@dxos/react-ui-table 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.4-main.21d9917",
+  "version": "0.8.4-main.2244d791bb",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -60,7 +60,7 @@
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
-    "@effect-atom/atom-react": "^0.4.6",
+    "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
@@ -68,58 +68,58 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/context": "0.8.4-main.21d9917",
-    "@dxos/debug": "0.8.4-main.21d9917",
-    "@dxos/async": "0.8.4-main.21d9917",
-    "@dxos/echo-atom": "0.8.4-main.21d9917",
-    "@dxos/echo": "0.8.4-main.21d9917",
-    "@dxos/effect": "0.8.4-main.21d9917",
-    "@dxos/invariant": "0.8.4-main.21d9917",
-    "@dxos/keys": "0.8.4-main.21d9917",
-    "@dxos/lit-grid": "0.8.4-main.21d9917",
-    "@dxos/random": "0.8.4-main.21d9917",
-    "@dxos/log": "0.8.4-main.21d9917",
-    "@dxos/react-client": "0.8.4-main.21d9917",
-    "@dxos/react-ui-attention": "0.8.4-main.21d9917",
-    "@dxos/react-ui-components": "0.8.4-main.21d9917",
-    "@dxos/react-ui-form": "0.8.4-main.21d9917",
-    "@dxos/react-ui-grid": "0.8.4-main.21d9917",
-    "@dxos/react-ui-menu": "0.8.4-main.21d9917",
-    "@dxos/react-ui-stack": "0.8.4-main.21d9917",
-    "@dxos/schema": "0.8.4-main.21d9917",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.21d9917",
-    "@dxos/types": "0.8.4-main.21d9917",
-    "@dxos/react-ui-searchlist": "0.8.4-main.21d9917",
-    "@dxos/util": "0.8.4-main.21d9917",
-    "@dxos/ui-types": "0.8.4-main.21d9917",
-    "@dxos/react-ui-editor": "0.8.4-main.21d9917"
+    "@dxos/async": "0.8.4-main.2244d791bb",
+    "@dxos/debug": "0.8.4-main.2244d791bb",
+    "@dxos/context": "0.8.4-main.2244d791bb",
+    "@dxos/echo": "0.8.4-main.2244d791bb",
+    "@dxos/echo-atom": "0.8.4-main.2244d791bb",
+    "@dxos/effect": "0.8.4-main.2244d791bb",
+    "@dxos/invariant": "0.8.4-main.2244d791bb",
+    "@dxos/keys": "0.8.4-main.2244d791bb",
+    "@dxos/lit-grid": "0.8.4-main.2244d791bb",
+    "@dxos/log": "0.8.4-main.2244d791bb",
+    "@dxos/random": "0.8.4-main.2244d791bb",
+    "@dxos/react-client": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-attention": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-editor": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-form": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-grid": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-searchlist": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-menu": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-components": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-stack": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.2244d791bb",
+    "@dxos/types": "0.8.4-main.2244d791bb",
+    "@dxos/schema": "0.8.4-main.2244d791bb",
+    "@dxos/ui-types": "0.8.4-main.2244d791bb",
+    "@dxos/util": "0.8.4-main.2244d791bb"
   },
   "devDependencies": {
-    "@effect/platform": "0.93.6",
+    "@effect/platform": "0.94.4",
     "@types/lodash.orderby": "^4.6.9",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "fast-check": "^3.19.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/lit-ui": "0.8.4-main.21d9917",
-    "@dxos/random": "0.8.4-main.21d9917",
-    "@dxos/react-client": "0.8.4-main.21d9917",
-    "@dxos/react-ui": "0.8.4-main.21d9917",
-    "@dxos/storybook-utils": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917",
-    "@dxos/test-utils": "0.8.4-main.21d9917"
+    "@dxos/lit-ui": "0.8.4-main.2244d791bb",
+    "@dxos/random": "0.8.4-main.2244d791bb",
+    "@dxos/react-client": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/storybook-utils": "0.8.4-main.2244d791bb",
+    "@dxos/test-utils": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.21d9917",
-    "@dxos/react-ui": "0.8.4-main.21d9917"
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "publishConfig": {
     "access": "public"

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

@@ -3,10 +3,11 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import type * as Types from 'effect/Types';
 import React, { useMemo, useState } from 'react';
 
-import { Obj } from '@dxos/echo';
-import { Format, type JsonSchemaType } from '@dxos/echo/internal';
+import { type JsonSchema, Obj } from '@dxos/echo';
+import { Format } from '@dxos/echo/internal';
 import { faker } from '@dxos/random';
 import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
@@ -58,7 +59,7 @@ const DynamicTableStory = () => {
 const meta = {
   title: 'ui/react-ui-table/DynamicTable',
   component: DynamicTable,
-  decorators: [withTheme, withRegistry],
+  decorators: [withTheme(), withRegistry],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -101,7 +102,7 @@ export const WithClickToSelect: StoryObj = {
 
 export const WithJsonSchema: StoryObj = {
   render: () => {
-    const schema = useMemo<JsonSchemaType>(
+    const schema = useMemo<Types.DeepMutable<JsonSchema.JsonSchema>>(
       () => ({
         type: 'object',
         properties: {

package/src/components/Table/DynamicTable.tsx

@@ -3,10 +3,11 @@
 //
 
 import { RegistryContext } from '@effect-atom/atom-react';
+import type * as Types from 'effect/Types';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import { type Type } from '@dxos/echo';
-import { type JsonSchemaType } from '@dxos/echo/internal';
+import { type JsonSchema } from '@dxos/echo';
 import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
 import { type ProjectionModel } from '@dxos/schema';
 import { mx } from '@dxos/ui-theme';
@@ -23,7 +24,7 @@ export type DynamicTableProps<T extends Type.Entity.Any = Type.Entity.Any> = The
   name?: string; // TODO(burdon): Remove?
   rows: any[];
   properties?: TablePropertyDefinition[];
-  jsonSchema?: JsonSchemaType;
+  jsonSchema?: Types.DeepMutable<JsonSchema.JsonSchema>;
   features?: Partial<TableFeatures>;
   rowActions?: TableRowAction[];
   onRowClick?: (row: any) => void;

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

@@ -125,7 +125,7 @@ const meta = {
   title: 'ui/react-ui-table/Relations',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withRegistry,
     // TODO(thure): Shouldn't `layout: 'fullscreen'` below make this unnecessary?
     withLayout({ classNames: 'fixed inset-0' }),

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

@@ -12,6 +12,7 @@ import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { ScrollArea } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor, translations as formTranslations } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
@@ -103,6 +104,15 @@ const DefaultStory = () => {
   const { db, schema, table, tableRef, model, presentation, handleInsertRow, handleSaveView, handleDeleteColumn } =
     useTestTableModel();
 
+  const handleRowClick = useCallback(
+    (row: any) => {
+      if (model?.getDraftRowCount() === 0 && ['frozenRowsEnd', 'fixedEndStart', 'fixedEndEnd'].includes(row?.plane)) {
+        handleInsertRow();
+      }
+    },
+    [model, handleInsertRow],
+  );
+
   if (!schema || !table?.view.target) {
     return <div />;
   }
@@ -117,16 +127,19 @@ const DefaultStory = () => {
             schema={schema}
             model={model}
             presentation={presentation}
+            onRowClick={handleRowClick}
             ignoreAttention
           />
         </TableComponent.Root>
       </div>
-      <div className='flex flex-col bs-full border-l border-separator overflow-y-auto'>
-        <StoryViewEditor view={table.view.target} schema={schema} db={db} handleDeleteColumn={handleDeleteColumn} />
-        <SyntaxHighlighter language='json' className='text-xs'>
-          {JSON.stringify({ view: table.view.target, schema }, null, 2)}
-        </SyntaxHighlighter>
-      </div>
+      <ScrollArea.Root orientation='vertical' classNames='border-l border-separator'>
+        <ScrollArea.Viewport>
+          <StoryViewEditor view={table.view.target} schema={schema} db={db} handleDeleteColumn={handleDeleteColumn} />
+          <SyntaxHighlighter language='json' className='text-xs'>
+            {JSON.stringify({ view: table.view.target, schema }, null, 2)}
+          </SyntaxHighlighter>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
     </div>
   );
 };
@@ -143,7 +156,7 @@ const meta = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withRegistry,
     withClientProvider({
       types: [View.View, Table.Table],

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

@@ -45,7 +45,7 @@ const meta = {
   component: DefaultStory,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withLayout({ layout: 'column' }),
     withClientProvider({
       types: [View.View, Task.Task, Table.Table],

package/src/hooks/useProjectionModel.ts

@@ -7,7 +7,7 @@ import { useState } from 'react';
 
 import { Type } from '@dxos/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { ProjectionModel, createDirectChangeCallback, createEchoChangeCallback } from '@dxos/schema';
+import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
 
 import { type Table } from '../types';
 
@@ -25,10 +25,9 @@ export const useProjectionModel = <S extends Type.Entity.Any>(
       // For immutable schemas, create a snapshot.
       const jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : Type.toJsonSchema(schema);
 
-      // Use createEchoChangeCallback for mutable schemas (EchoSchema), otherwise use direct mutation.
-      const change = Type.isMutable(schema)
-        ? createEchoChangeCallback(view, schema)
-        : createDirectChangeCallback(view.projection, jsonSchema);
+      // Always use createEchoChangeCallback since the view is ECHO-backed.
+      // Pass schema only when mutable to allow schema mutations.
+      const change = createEchoChangeCallback(view, Type.isMutable(schema) ? schema : undefined);
 
       const projection = new ProjectionModel({ registry, view, baseSchema: jsonSchema, change });
       projection.normalizeView();

package/src/hooks/useTableModel.ts

@@ -29,7 +29,7 @@ export type UseTableModelProps<T extends TableRow = TableRow> = {
   onRowAction?: (actionId: string, data: T) => void;
 } & Pick<
   TableModelProps<T>,
-  'features' | 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChange'
+  'features' | 'onInsertRow' | 'onDeleteRows' | 'onColumnDelete' | 'onCellUpdate' | 'onRowOrderChange'
 >;
 
 export const useTableModel = <T extends TableRow = TableRow>({

package/src/model/table-model.test.ts

@@ -137,7 +137,7 @@ const createTableModel = (registry: Registry.Registry, props: Partial<TableModel
     registry,
     view,
     baseSchema: schema.jsonSchema,
-    change: createDirectChangeCallback(view.projection, schema.jsonSchema),
+    change: createDirectChangeCallback(view.projection, Type.toJsonSchema(schema)),
   });
   projection.normalizeView();
   return new TableModel({

package/src/model/table-model.ts

@@ -122,7 +122,7 @@ export type TableModelProps<T extends TableRow = TableRow> = {
   onResolveSchema?: (typename: string) => Promise<JsonSchemaType>;
   onInsertRow?: (data?: any) => InsertRowResult;
   onDeleteRows?: (index: number, obj: T[]) => void;
-  onDeleteColumn?: (fieldId: string) => void;
+  onColumnDelete?: (fieldId: string) => void;
   onCellUpdate?: (cell: DxGridPosition) => void;
   onRowOrderChange?: () => void;
   onRowAction?: (actionId: string, data: T) => void;
@@ -139,7 +139,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   private readonly _onInsertRow?: (data?: any) => InsertRowResult;
   private readonly _onDeleteRows?: TableModelProps<T>['onDeleteRows'];
-  private readonly _onDeleteColumn?: TableModelProps<T>['onDeleteColumn'];
+  private readonly _onColumnDelete?: TableModelProps<T>['onColumnDelete'];
   private readonly _onCellUpdate?: TableModelProps<T>['onCellUpdate'];
   private readonly _onRowOrderChange?: TableModelProps<T>['onRowOrderChange'];
   private readonly _onRowAction?: TableModelProps<T>['onRowAction'];
@@ -176,7 +176,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     pinnedRows = { top: [], bottom: [] },
     rowActions = [],
     onCellUpdate,
-    onDeleteColumn,
+    onColumnDelete,
     onDeleteRows,
     onInsertRow,
     onRowOrderChange,
@@ -292,7 +292,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     this._rowActions = rowActions;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
-    this._onDeleteColumn = onDeleteColumn;
+    this._onColumnDelete = onColumnDelete;
     this._onCellUpdate = onCellUpdate;
     this._onRowOrderChange = onRowOrderChange;
     this._onRowAction = onRowAction;
@@ -691,7 +691,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       const currentRow = this._registry.get(this._rows)[row];
       invariant(currentRow, 'Invalid row index');
 
-      const snapshot = getSnapshot(currentRow);
+      const snapshot = { ...getSnapshot(currentRow) };
       setValue(snapshot, field.path, transformedValue);
 
       const schema = Obj.getSchema(currentRow);
@@ -796,8 +796,8 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     }
 
     const field = this._projection?.getFields().find((field) => field.id === fieldId);
-    if (field && this._onDeleteColumn) {
-      this._onDeleteColumn(field.id);
+    if (field && this._onColumnDelete) {
+      this._onColumnDelete(field.id);
     }
   }
 

package/src/model/table-presentation.test.ts

@@ -108,7 +108,7 @@ const createTableModel = (registry: Registry.Registry, props: Partial<TableModel
     registry,
     view,
     baseSchema: schema.jsonSchema,
-    change: createDirectChangeCallback(view.projection, schema.jsonSchema),
+    change: createDirectChangeCallback(view.projection, Type.toJsonSchema(schema)),
   });
   projection.normalizeView();
   return new TableModel({ registry, object, projection, ...props });

package/src/model/table-presentation.ts

@@ -210,7 +210,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       const targetObj = getValue(obj, field.path)?.target;
       if (targetObj) {
         const dxn = Obj.getDXN(targetObj)?.toString();
-        cell.accessoryHtml = `<div role="none" class="absolute inline-end-0 inset-block-0 p-[--dx-grid-cell-content-padding-block]"><dx-anchor refId=${dxn} class="dx-button is-6 aspect-square min-bs-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
+        cell.accessoryHtml = `<div role="none" class="absolute inline-end-0 inset-block-0 p-[--dx-grid-cell-content-padding-block]"><dx-anchor dxn=${dxn} class="dx-button is-6 aspect-square min-bs-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
       }
     }
 

package/src/playwright/TableManager.ts

@@ -17,6 +17,7 @@ const TABLE_SELECTORS = {
   },
   columnDelete: 'column-delete',
   rowDelete: 'row-menu-delete',
+  addRow: 'table.toolbar.add-row',
 } as const;
 
 export class TableManager {
@@ -53,10 +54,16 @@ export class TableManager {
     await this.page.getByTestId(TABLE_SELECTORS.columnSort[direction]).click();
   }
 
-  public async addColumn({ label, format }: { label: string; format: string }): Promise<void> {
+  public async addRow(): Promise<void> {
+    await this.page.getByTestId(TABLE_SELECTORS.addRow).click();
+  }
+
+  public async addColumn({ label, format }: { label: string; format?: string }): Promise<void> {
     await this.page.getByTestId(TABLE_SELECTORS.newColumnButton).click();
-    await this.page.getByRole('combobox').click();
-    await this.page.getByLabel(format).click();
+    if (format) {
+      await this.page.getByRole('combobox').click();
+      await this.page.getByLabel(format).click();
+    }
     await this.page.getByPlaceholder('Property label').click();
     await this.page.getByPlaceholder('Property label').fill(label);
     await this.page.getByRole('button', { name: 'Save' }).click();

package/src/playwright/smoke.spec.ts

@@ -121,8 +121,22 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  // Rest of add column test remains the same as it's a more complex flow.
-  test('add column', async ({ browser, browserName }) => {
+  test('add column without changing format', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+    const newColumnLabel = 'DEFAULT FORMAT COL';
+
+    await table.addColumn({ label: newColumnLabel });
+
+    await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
+    await page.close();
+  });
+
+  test('add column with format', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
     test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
@@ -160,6 +174,35 @@ test.describe('Table', () => {
     await page.close();
   });
 
+  test('add row and edit cell', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+
+    // Click the CTA row at the bottom to add a new row.
+    await table.grid.cell(0, 0, 'frozenRowsEnd').click();
+
+    // All schema fields are optional so the row is added directly to the grid (not as a draft).
+    const newCell = table.grid.cell(0, 10, 'grid');
+    await newCell.waitFor({ state: 'visible' });
+
+    // Focus should already be on the new row; engage edit mode.
+    await page.keyboard.press('Enter');
+    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+
+    // Type text and confirm.
+    const cellContent = 'New row content';
+    await page.keyboard.type(cellContent);
+    await page.keyboard.press('Enter');
+
+    // Assert the cell content is saved.
+    await expect(newCell).toHaveText(cellContent);
+    await page.close();
+  });
+
   // TODO(wittjosiah): Remove? Conflicts with story play function which is run as a unit test anyways.
   test.skip('extant relations work as expected', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');

package/src/testing/useTestTableModel.ts

@@ -97,7 +97,7 @@ export const useTestTableModel = <T extends Type.Obj.Any = Type.Obj.Any>(): Test
     rows: filteredObjects,
     onInsertRow: addRow,
     onDeleteRows: handleDeleteRows,
-    onDeleteColumn: handleDeleteColumn,
+    onColumnDelete: handleDeleteColumn,
     onCellUpdate: handleCellUpdate,
     onRowOrderChange: handleRowOrderChange,
   });

package/src/util/dynamic-table.test.ts

@@ -0,0 +1,70 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Registry } from '@effect-atom/atom-react';
+import { describe, expect, test } from 'vitest';
+
+import { Format } from '@dxos/echo';
+
+import { type TablePropertyDefinition, getBaseSchema, makeDynamicTable } from './dynamic-table';
+
+describe('makeDynamicTable', () => {
+  /**
+   * Base case: plain jsonSchema (not from Echo / Type.toJsonSchema). Does not exercise the path
+   * where projection or schema are reactive, so this does not reproduce the Obj.change regression.
+   * Confirms makeDynamicTable + setProperties (title) works with plain objects.
+   */
+  test('makeDynamicTable with plain jsonSchema and properties with title does not throw', () => {
+    const registry = Registry.make();
+    const jsonSchema = {
+      type: 'object' as const,
+      properties: {
+        id: { type: 'string' as const },
+        name: { type: 'string' as const },
+      },
+      required: ['id'],
+    };
+    const properties: TablePropertyDefinition[] = [
+      { name: 'id', format: Format.TypeFormat.String },
+      { name: 'name', format: Format.TypeFormat.String, title: 'Name' },
+    ];
+
+    expect(() => {
+      const { projection, object } = makeDynamicTable({
+        registry,
+        jsonSchema,
+        properties,
+      });
+      expect(projection).toBeDefined();
+      expect(object).toBeDefined();
+      expect(projection.getFields().length).toBeGreaterThan(0);
+    }).not.toThrow();
+  });
+
+  /**
+   * Regression test for the path where jsonSchema comes from getBaseSchema(typename, properties).
+   * That path uses Echo (View.make, Type.toJsonSchema); mutations must run inside Obj.change and on a
+   * cloned schema. This test ensures that flow does not throw.
+   */
+  test('makeDynamicTable with jsonSchema from getBaseSchema(typename, properties) and properties with title does not throw', () => {
+    const registry = Registry.make();
+    const typename = 'example.com/type/DynamicTableTest';
+    const properties: TablePropertyDefinition[] = [
+      { name: 'id', format: Format.TypeFormat.String },
+      { name: 'name', format: Format.TypeFormat.String, title: 'Name' },
+    ];
+    const { jsonSchema } = getBaseSchema({ typename, properties });
+
+    expect(() => {
+      const { projection, object } = makeDynamicTable({
+        registry,
+        jsonSchema,
+        properties,
+      });
+      expect(projection).toBeDefined();
+      expect(object).toBeDefined();
+      expect(projection.getFields().length).toBeGreaterThan(0);
+    }).not.toThrow();
+  });
+});

package/src/util/dynamic-table.ts

@@ -3,13 +3,14 @@
 //
 
 import { type Registry } from '@effect-atom/atom-react';
+import type * as Types from 'effect/Types';
 
 import { Filter, type JsonSchema, Obj, Order, Query, type QueryAST, Ref, Type } from '@dxos/echo';
 import {
   ProjectionModel,
   type SchemaPropertyDefinition,
   View,
-  createDirectChangeCallback,
+  createEchoChangeCallback,
   getSchemaFromPropertyDefinitions,
 } from '@dxos/schema';
 
@@ -37,11 +38,11 @@ export const getBaseSchema = ({
   schema?: Type.Entity.Any;
   typename?: string;
   properties?: TablePropertyDefinition[];
-  jsonSchema?: JsonSchema.JsonSchema;
-}): { typename: string; jsonSchema: JsonSchema.JsonSchema } => {
+  jsonSchema?: Types.DeepMutable<JsonSchema.JsonSchema>;
+}): { typename: string; jsonSchema: Types.DeepMutable<JsonSchema.JsonSchema> } => {
   if (typename && properties) {
     const schema = getSchemaFromPropertyDefinitions(typename, properties);
-    return { typename: schema.typename, jsonSchema: schema.jsonSchema };
+    return { typename: schema.typename, jsonSchema: Type.toJsonSchema(schema) };
   } else if (schema) {
     return { typename: Type.getTypename(schema)!, jsonSchema: Type.toJsonSchema(schema) };
   } else if (typename && jsonSchema) {
@@ -57,7 +58,7 @@ export const makeDynamicTable = ({
   properties,
 }: {
   registry: Registry.Registry;
-  jsonSchema: JsonSchema.JsonSchema;
+  jsonSchema: Types.DeepMutable<JsonSchema.JsonSchema>;
   properties?: TablePropertyDefinition[];
 }): { projection: ProjectionModel; object: Table.Table } => {
   const view = View.make({
@@ -67,12 +68,11 @@ export const makeDynamicTable = ({
   });
   const object = Obj.make(Table.Table, { view: Ref.make(view), sizes: {} });
 
-  // Use direct change callback for in-memory objects (non-ECHO backed).
   const projection = new ProjectionModel({
     registry,
     view,
     baseSchema: jsonSchema,
-    change: createDirectChangeCallback(view.projection, jsonSchema),
+    change: createEchoChangeCallback(view, jsonSchema),
   });
   projection.normalizeView();
   if (properties && projection.getFields()) {