@dxos/react-ui-table 0.8.4-main.dedc0f3 → 0.8.4-main.ead640a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.4-main.dedc0f3",
+  "version": "0.8.4-main.ead640a",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -53,73 +53,73 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.7",
+    "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.2",
+    "@codemirror/view": "^6.38.4",
     "@fluentui/react-tabster": "^9.24.2",
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/async": "0.8.4-main.dedc0f3",
-    "@dxos/context": "0.8.4-main.dedc0f3",
-    "@dxos/debug": "0.8.4-main.dedc0f3",
-    "@dxos/echo": "0.8.4-main.dedc0f3",
-    "@dxos/echo-db": "0.8.4-main.dedc0f3",
-    "@dxos/echo-schema": "0.8.4-main.dedc0f3",
-    "@dxos/effect": "0.8.4-main.dedc0f3",
-    "@dxos/invariant": "0.8.4-main.dedc0f3",
-    "@dxos/keys": "0.8.4-main.dedc0f3",
-    "@dxos/live-object": "0.8.4-main.dedc0f3",
-    "@dxos/log": "0.8.4-main.dedc0f3",
-    "@dxos/lit-grid": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-search": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-attention": "0.8.4-main.dedc0f3",
-    "@dxos/react-client": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-editor": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-form": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-grid": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-menu": "0.8.4-main.dedc0f3",
-    "@dxos/random": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-searchlist": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-tag-picker": "0.8.4-main.dedc0f3",
-    "@dxos/schema": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-types": "0.8.4-main.dedc0f3",
-    "@dxos/util": "0.8.4-main.dedc0f3"
+    "@dxos/async": "0.8.4-main.ead640a",
+    "@dxos/context": "0.8.4-main.ead640a",
+    "@dxos/debug": "0.8.4-main.ead640a",
+    "@dxos/echo": "0.8.4-main.ead640a",
+    "@dxos/echo-db": "0.8.4-main.ead640a",
+    "@dxos/effect": "0.8.4-main.ead640a",
+    "@dxos/invariant": "0.8.4-main.ead640a",
+    "@dxos/keys": "0.8.4-main.ead640a",
+    "@dxos/lit-grid": "0.8.4-main.ead640a",
+    "@dxos/live-object": "0.8.4-main.ead640a",
+    "@dxos/log": "0.8.4-main.ead640a",
+    "@dxos/random": "0.8.4-main.ead640a",
+    "@dxos/plugin-search": "0.8.4-main.ead640a",
+    "@dxos/react-client": "0.8.4-main.ead640a",
+    "@dxos/react-ui-attention": "0.8.4-main.ead640a",
+    "@dxos/react-ui-components": "0.8.4-main.ead640a",
+    "@dxos/react-ui-editor": "0.8.4-main.ead640a",
+    "@dxos/react-ui-grid": "0.8.4-main.ead640a",
+    "@dxos/react-ui-searchlist": "0.8.4-main.ead640a",
+    "@dxos/react-ui-menu": "0.8.4-main.ead640a",
+    "@dxos/react-ui-stack": "0.8.4-main.ead640a",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.ead640a",
+    "@dxos/schema": "0.8.4-main.ead640a",
+    "@dxos/react-ui-types": "0.8.4-main.ead640a",
+    "@dxos/util": "0.8.4-main.ead640a",
+    "@dxos/react-ui-form": "0.8.4-main.ead640a"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.90.2",
+    "@effect-rx/rx-react": "0.42.4",
+    "@effect/platform": "0.92.1",
     "@types/lodash.orderby": "^4.6.9",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.17.7",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.1",
+    "effect": "3.18.3",
     "fast-check": "^3.19.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/echo-signals": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-search": "0.8.4-main.dedc0f3",
-    "@dxos/random": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
-    "@dxos/test-utils": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/storybook-utils": "0.8.4-main.dedc0f3"
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/echo-signals": "0.8.4-main.ead640a",
+    "@dxos/lit-ui": "0.8.4-main.ead640a",
+    "@dxos/plugin-search": "0.8.4-main.ead640a",
+    "@dxos/random": "0.8.4-main.ead640a",
+    "@dxos/react-ui": "0.8.4-main.ead640a",
+    "@dxos/react-ui-theme": "0.8.4-main.ead640a",
+    "@dxos/storybook-utils": "0.8.4-main.ead640a",
+    "@dxos/test-utils": "0.8.4-main.ead640a"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.ead640a",
+    "@dxos/react-ui-theme": "0.8.4-main.ead640a"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,20 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
-import { FormatEnum, type JsonSchemaType } from '@dxos/echo-schema';
+import { FormatEnum, type JsonSchemaType } from '@dxos/echo/internal';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 import { type SchemaPropertyDefinition } from '@dxos/schema';
 import { Testing } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { type TableFeatures } from '../../model';
 import { translations } from '../../translations';
@@ -60,8 +58,11 @@ const DynamicTableStory = () => {
 const meta = {
   title: 'ui/react-ui-table/DynamicTable',
   component: DynamicTable,
-  parameters: { translations },
-  decorators: [withLayout({ fullscreen: true }), withTheme],
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 } satisfies Meta<typeof DynamicTable>;
 
 export default meta;
@@ -144,7 +145,7 @@ export const WithEchoSchema: StoryObj = {
       types: [Testing.Contact],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ space }) => {
+      onCreateSpace: async ({ space }) => {
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
             Obj.make(Testing.Contact, {

package/src/components/Table/DynamicTable.tsx

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import { type JsonSchemaType } from '@dxos/echo-schema';
+import { type JsonSchemaType } from '@dxos/echo/internal';
 import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -45,15 +45,12 @@ export const DynamicTable = ({
   ...props
 }: DynamicTableProps) => {
   // TODO(burdon): Remove variance from the props (should be normalized externally; possibly via hooks).
-  const { typename, jsonSchema } = useMemo(
+  const { jsonSchema } = useMemo(
     () => getBaseSchema({ typename: name, properties, jsonSchema: _jsonSchema, schema }),
     [name, properties, _jsonSchema, schema],
   );
 
-  const { projection, view } = useMemo(
-    () => makeDynamicTable({ typename, jsonSchema, properties }),
-    [typename, jsonSchema, properties],
-  );
+  const { projection, view } = useMemo(() => makeDynamicTable({ jsonSchema, properties }), [jsonSchema, properties]);
 
   const tableRef = useRef<TableController>(null);
   const handleCellUpdate = useCallback((cell: any) => {

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

@@ -2,20 +2,23 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { Type } from '@dxos/echo';
-import { type JsonSchemaType } from '@dxos/echo-schema';
+import type * as Schema from 'effect/Schema';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Obj, Type } from '@dxos/echo';
+import { type JsonSchemaType } from '@dxos/echo/internal';
+import { type DxGrid } from '@dxos/lit-grid';
+import '@dxos/lit-ui/dx-tag-picker.pcss';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { translations as formTranslations } from '@dxos/react-ui-form';
 import { DataType } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
@@ -86,6 +89,14 @@ const DefaultStory = () => {
   const client = useClient();
   const { model: orgModel, presentation: orgPresentation } = useTestModel(DataType.Organization, 50);
   const { model: contactModel, presentation: contactPresentation } = useTestModel(DataType.Person, 50);
+  const { space } = useClientProvider();
+
+  const handleCreate = useCallback(
+    (schema: Schema.Schema.AnyNoContext, values: any) => {
+      return client.spaces.default.db.add(Obj.make(schema, values));
+    },
+    [space],
+  );
 
   return (
     <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
@@ -94,8 +105,10 @@ const DefaultStory = () => {
           model={orgModel}
           schema={DataType.Organization}
           presentation={orgPresentation}
+          onCreate={handleCreate}
           client={client}
           ignoreAttention
+          testId='relations-0'
         />
       </TableComponent.Root>
       <TableComponent.Root>
@@ -103,8 +116,10 @@ const DefaultStory = () => {
           model={contactModel}
           schema={DataType.Person}
           presentation={contactPresentation}
+          onCreate={handleCreate}
           client={client}
           ignoreAttention
+          testId='relations-1'
         />
       </TableComponent.Root>
     </div>
@@ -114,20 +129,120 @@ const DefaultStory = () => {
 const meta = {
   title: 'ui/react-ui-table/Relations',
   render: DefaultStory,
-  parameters: { translations, controls: { disable: true } },
   decorators: [
+    withTheme,
     withClientProvider({
       types: [DataType.View, DataType.Organization, DataType.Person, Table.Table],
       createIdentity: true,
       createSpace: true,
     }),
-    withTheme,
-    withLayout({ fullscreen: true }),
   ],
+  parameters: {
+    layout: 'fullscreen',
+    controls: { disable: true },
+    translations: [...translations, ...formTranslations],
+  },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  // TODO(wittjosiah): This test is flaky, especially in CI.
+  //   Most typical failure is `targetCell` returns `null`.
+  _play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    const body = within(document.body);
+
+    // Get all dx-grid elements (should have 2 - one for each table)
+    const firstGrid = await canvas.findByTestId('relations-0', undefined, { timeout: 30_000 });
+    const secondGrid = await canvas.findByTestId('relations-1', undefined, { timeout: 30_000 });
+
+    // Focus on the second table (Person/contacts table)
+    await expect(secondGrid).toBeVisible();
+
+    // Scroll to the relations column (column 4) - this mimics the scrollToColumn call
+    (secondGrid.closest('dx-grid') as DxGrid).scrollToColumn(4);
+
+    // Wait for scroll to complete
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    // Find and click the target cell (first row, relations column)
+    const targetCell = secondGrid.querySelector('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
+    await expect(targetCell).toBeVisible();
+
+    // Click to focus the cell
+    await userEvent.click(targetCell as HTMLElement);
+    await expect(targetCell).toHaveFocus();
+    await userEvent.keyboard('{Enter}');
+
+    // Look for the combobox that should appear in edit mode
+    const combobox = await body.findByRole('combobox', undefined, { timeout: 5000 });
+    await userEvent.click(combobox);
+
+    const searchField = await body.findByPlaceholderText('Search…');
+    await userEvent.click(searchField);
+
+    // Get the first organization name from the first table to search for
+    const orgCell = firstGrid.querySelector(
+      '[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="0"] .dx-grid__cell__content',
+    ) as HTMLElement;
+
+    const orgName = orgCell.textContent;
+    // Type the first 4 characters to search
+    await userEvent.type(searchField, orgName.substring(0, 4));
+
+    // Look for an option to select
+    const option = await body.findAllByRole('option');
+    await expect(option[0]).toBeVisible();
+
+    // Press Enter to select
+    await userEvent.keyboard('{Enter}');
+
+    // Look for and click save button
+    const saveButton = await body.findByTestId('save-button');
+    await userEvent.click(saveButton);
+
+    // Verify the relation was set (cell should now contain the org name)
+    await expect(targetCell).toHaveTextContent(orgName.substring(0, 4));
+
+    // Test object creation (new relations) - equivalent to "new relations work as expected" test
+    // Find a different cell to test object creation (second row, relations column)
+    const newTargetCell = secondGrid.querySelector(
+      '[data-dx-grid-plane="grid"] [aria-rowindex="1"][aria-colindex="4"]',
+    );
+    await expect(newTargetCell).toBeTruthy();
+
+    // Click to focus the cell
+    await userEvent.click(newTargetCell as Element);
+
+    await userEvent.keyboard('{Enter}');
+
+    // Look for the combobox that should appear in edit mode
+    const newCombobox = await body.findByRole('combobox');
+    await userEvent.click(newCombobox);
+
+    const newSearchField = await body.findByPlaceholderText('Search…');
+    await userEvent.click(newSearchField);
+
+    // Type a new object name (this will create a new object)
+    const newOrgName = 'Salieri LLC';
+    await userEvent.type(newSearchField, newOrgName);
+
+    // Look for an option to select (should be the create new option)
+    const newOption = await body.findAllByRole('option');
+    await expect(newOption[0]).toBeVisible();
+
+    // Press Enter to select/create
+    await userEvent.keyboard('{Enter}');
+
+    // Look for and click save button
+    const createReferencedObjectForm = await body.findByTestId('create-referenced-object-form');
+    const saveObjectButton = await within(createReferencedObjectForm).findByTestId('save-button');
+    await userEvent.click(saveObjectButton);
+
+    // Verify the new object was created and relation was set
+    await expect(newTargetCell).toHaveTextContent(newOrgName);
+  },
+} as any;

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

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { Filter, Obj, Query, Type } from '@dxos/echo';
+import { Obj, type QueryAST, Type } from '@dxos/echo';
 import {
   EchoObject,
   FormatAnnotation,
@@ -16,17 +14,18 @@ import {
   GeneratorAnnotation,
   LabelAnnotation,
   PropertyMetaAnnotationId,
-} from '@dxos/echo-schema';
+} from '@dxos/echo/internal';
+import { live } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
-import { type Space, live } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { DataType, getSchemaFromPropertyDefinitions } from '@dxos/schema';
+import { DataType, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
 import { Testing, createObjectFactory } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
@@ -77,12 +76,12 @@ const StoryViewEditor = ({
   handleDeleteColumn: (fieldId: string) => void;
 }) => {
   const handleQueryChanged = useCallback(
-    (typename: string) => {
+    (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
-      schema.updateTypename(typename);
+      schema.updateTypename(getTypenameFromQuery(newQuery));
       invariant(view);
-      view.query = Query.select(Filter.typename(typename)).ast;
+      view.query.ast = newQuery;
     },
     [schema, view],
   );
@@ -160,21 +159,13 @@ type StoryProps = { rows?: number };
 const meta = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
-  parameters: {
-    translations,
-    layout: 'fullscreen',
-    controls: {
-      disable: true,
-    },
-  },
   decorators: [
     withTheme,
-    withLayout({ fullscreen: true }),
     withClientProvider({
       types: [DataType.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
+      onCreateSpace: async ({ client, space }) => {
         const [schema] = await space.db.schemaRegistry.register([TestSchema]);
         const { view } = await Table.makeView({ client, space, typename: schema.typename });
         view.projection.fields = [
@@ -196,6 +187,13 @@ const meta = {
       },
     }),
   ],
+  parameters: {
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
+    translations,
+  },
 } satisfies Meta<typeof TableComponent>;
 
 export default meta;
@@ -206,13 +204,12 @@ export const Default: Story = {};
 
 export const StaticSchema: StoryObj = {
   render: DefaultStory,
-  parameters: { translations },
   decorators: [
     withClientProvider({
       types: [DataType.View, Table.Table, Testing.Contact, Testing.Organization],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
+      onCreateSpace: async ({ client, space }) => {
         const { view } = await Table.makeView({ client, space, typename: Testing.Contact.typename });
         space.db.add(view);
 
@@ -223,9 +220,11 @@ export const StaticSchema: StoryObj = {
         ]);
       },
     }),
-    withLayout({ fullscreen: true }),
-    withTheme,
   ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 };
 
 const ContactWithArrayOfEmails = Schema.Struct({
@@ -247,13 +246,12 @@ const ContactWithArrayOfEmails = Schema.Struct({
 
 export const ArrayOfObjects: StoryObj = {
   render: DefaultStory,
-  parameters: { translations },
   decorators: [
     withClientProvider({
       types: [DataType.View, Table.Table, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
+      onCreateSpace: async ({ client, space }) => {
         const { view } = await Table.makeView({ client, space, typename: ContactWithArrayOfEmails.typename });
         space.db.add(view);
 
@@ -265,21 +263,22 @@ export const ArrayOfObjects: StoryObj = {
         ]);
       },
     }),
-    withLayout({ fullscreen: true }),
-    withTheme,
   ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 };
 
 export const Tags: Meta<StoryProps> = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
-  parameters: { translations },
   decorators: [
     withClientProvider({
       types: [DataType.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
+      onCreateSpace: async ({ client, space }) => {
         // Configure schema.
         const typename = 'example.com/SingleSelect';
         const selectOptions = [
@@ -321,7 +320,9 @@ export const Tags: Meta<StoryProps> = {
         });
       },
     }),
-    withLayout({ fullscreen: true }),
-    withTheme,
   ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 };

package/src/components/Table/Table.tsx

@@ -2,7 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Schema } from 'effect/Schema';
+import type * as Schema from 'effect/Schema';
+import * as String from 'effect/String';
 import React, {
   type MouseEvent,
   type PropsWithChildren,
@@ -15,8 +16,8 @@ import React, {
   useState,
 } from 'react';
 
-import { type Client } from '@dxos/react-client';
 // TODO(wittjosiah): Remove dependency on react-client.
+import { type Client } from '@dxos/react-client';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
   type DxGridElement,
@@ -34,11 +35,10 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
 import { tableButtons, tableControls } from '../../util';
-import { type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
+import { type OnCreateHandler, type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
-import { CreateRefPanel } from './CreateRefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
 
 const columnDefault = { grid: { minSize: 80, maxSize: 640 } };
@@ -80,15 +80,17 @@ export type TableController = {
 export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
-  schema?: Schema.AnyNoContext;
+  schema?: Schema.Schema.AnyNoContext;
   client?: Client;
   // TODO(burdon): Rename since attention isn't a useful concept here? Standardize across other components. Pass property into useAttention.
   ignoreAttention?: boolean;
+  onCreate?: OnCreateHandler;
   onRowClick?: (row: any) => void;
+  testId?: string;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, schema, client, onCreate, onRowClick, testId }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
     const { hasAttention } = useAttention(model?.id ?? 'table');
     const modals = useMemo(() => new ModalController(), []);
@@ -275,7 +277,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
       (increment, delta, cell) => {
         if (dxGrid && model) {
-          if (cell?.plane === 'grid' && cell?.row >= model.getRowCount() - 1) {
+          if (cell?.plane === 'grid' && cell?.row >= model.getRowCount() - 1 && increment !== 'col') {
             handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : 'final');
           } else if (cell?.plane === 'frozenRowsEnd' && increment === 'row') {
             handleSaveDraftRow(cell.row);
@@ -320,7 +322,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               void navigator.clipboard.readText().then((clipboardText) => {
                 try {
                   // Attempt to set the cell's content to clipboard content
-                  model.setCellData(cell, clipboardText);
+                  model.setCellData(cell, String.trim(clipboardText).replace(/[\n\r]+/, ' '));
                   handleSave();
                 } catch {
                   // If validation fails, emit a DxEditRequest event with initialContent from clipboard
@@ -356,6 +358,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
             try {
               model.setCellData(cell, undefined);
               event.preventDefault();
+              handleSave();
             } catch {
               // Delete results in a validation error; don’t prevent default so dx-grid can emit an edit request.
             }
@@ -404,6 +407,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           schema={schema}
           onFocus={handleFocus}
           onSave={handleSave}
+          onCreate={onCreate}
           client={client}
         />
         <Grid.Content
@@ -419,12 +423,12 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           onClick={handleGridClick}
           onKeyDownCapture={handleKeyDown}
           onWheelCapture={handleWheel}
+          {...(testId && { 'data-testid': testId })}
           ref={setDxGrid}
         />
         <RowActionsMenu model={model} modals={modals} />
         <ColumnActionsMenu model={model} modals={modals} />
         <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
-        <CreateRefPanel model={model} modals={modals} />
       </Grid.Root>
     );
   },