@dxos/react-ui-table 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/src/components/Table/Table.tsx

@@ -35,11 +35,13 @@ import {
   gridSeparatorInlineEnd,
 } from '@dxos/react-ui-grid';
 import { DxEditRequest } from '@dxos/react-ui-grid';
-import { mx } from '@dxos/ui-theme';
+import { composableProps, mx } from '@dxos/ui-theme';
+import { type ComposableProps } from '@dxos/ui-types';
 
 import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
 import { tableButtons, tableControls } from '../../util';
 import { type OnCreateHandler, type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
+import { TableToolbar } from '../TableToolbar';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
@@ -53,51 +55,37 @@ const emptyColumnMeta = Atom.make<DxGridAxisMeta>({ grid: {} });
 // Table.Root
 //
 
-export type TableRootProps = PropsWithChildren<{ role?: string }>;
+export type TableRootProps = PropsWithChildren;
 
-const TableRoot = ({ children, role = 'article' }: TableRootProps) => {
-  return (
-    <div
-      role='none'
-      className={mx(
-        'relative !border-separator [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]',
-        role === 'card--popover' && 'popover-card-height',
-        role === 'section' && 'attention-surface',
-        role === 'card--intrinsic' && '[&_.dx-grid]:bs-[--dx-grid-content-block-size]',
-        ['card--popover', 'section', 'card--extrinsic'].includes(role) && 'overflow-hidden',
-        ['article', 'slide'].includes(role) && 'flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:bs-0',
-      )}
-    >
-      {children}
-    </div>
-  );
+const TableRoot = ({ children }: TableRootProps) => {
+  return <>{children}</>;
 };
 
 //
 // Table.Main
 //
 
+const emptyRowsAtom = Atom.make<unknown[]>([]);
+const emptyCellUpdateAtom = Atom.make<number>(0);
+
 export type TableController = {
   update?: (cell?: DxGridPosition) => void;
   handleInsertRowResult?: (insertRowResult?: InsertRowResult) => void;
 };
 
-export type TableMainProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+export type TableMainProps<T extends Type.AnyEntity = Type.AnyEntity> = ComposableProps<HTMLDivElement> & {
   schema?: T;
   model?: TableModel;
   presentation?: TablePresentation;
-  // TODO(burdon): Rename since attention isn't a useful concept here? Standardize across other components. Pass property into useAttention.
+  // TODO(burdon): Factor out attention.
   ignoreAttention?: boolean;
   onCreate?: OnCreateHandler;
   onRowClick?: (row: any) => void;
   testId?: string;
 };
 
-const emptyRowsAtom = Atom.make<unknown[]>([]);
-const emptyCellUpdateAtom = Atom.make<number>(0);
-
-const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
-  { schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId }: TableMainProps<T>,
+const TableMainInner = <T extends Type.AnyEntity = Type.AnyEntity>(
+  { schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }: TableMainProps<T>,
   forwardedRef: Ref<TableController>,
 ) => {
   const registry = useContext(RegistryContext);
@@ -424,47 +412,54 @@ const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
   }, [dxGrid, model, presentation]);
 
   if (!model || !modals) {
-    return <span role='none' className='attention-surface' />;
+    return <span role='none' className='dx-attention-surface' />;
   }
 
   return (
-    <Grid.Root id={model.id ?? 'table-grid'}>
-      <TableValueEditor<T>
-        model={model}
-        modals={modals}
-        schema={schema}
-        onFocus={handleFocus}
-        onSave={handleSave}
-        onCreate={onCreate}
-      />
-      <Grid.Content
-        className={mx('[--dx-grid-base:var(--baseSurface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
-        frozen={frozen}
-        columns={columnMeta}
-        columnDefault={columnDefault}
-        rowDefault={rowDefault}
-        limitRows={rows.length}
-        limitColumns={columnCount}
-        overscroll='trap'
-        onAxisResize={handleAxisResize}
-        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} />
-    </Grid.Root>
+    <div {...composableProps(props, { role: 'none', className: 'dx-container relative' })}>
+      <Grid.Root id={model.id ?? 'table-grid'}>
+        <TableValueEditor<T>
+          model={model}
+          modals={modals}
+          schema={schema}
+          onFocus={handleFocus}
+          onSave={handleSave}
+          onCreate={onCreate}
+        />
+        <Grid.Content
+          className={mx('[--dx-grid-base:var(--base-surface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
+          frozen={frozen}
+          columns={columnMeta}
+          columnDefault={columnDefault}
+          rowDefault={rowDefault}
+          limitRows={rows.length}
+          limitColumns={columnCount}
+          overscroll='trap'
+          onAxisResize={handleAxisResize}
+          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} />
+      </Grid.Root>
+    </div>
   );
 };
 
-const TableMain = forwardRef(TableMainInner) as <T extends Type.Entity.Any = Type.Entity.Any>(
+const TableMain = forwardRef(TableMainInner) as <T extends Type.AnyEntity = Type.AnyEntity>(
   props: TableMainProps<T> & { ref?: Ref<TableController> },
 ) => JSX.Element;
 
+//
+// Table
+//
+
 export const Table = {
   Root: TableRoot,
   Main: TableMain,
+  Toolbar: TableToolbar,
 };

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -22,15 +22,15 @@ export const CellValidationMessage = ({
     return null;
   }
 
-  const bgClass = variant === 'error' ? 'bg-errorSurface' : 'bg-warningSurface';
-  const textClass = variant === 'error' ? 'text-errorSurfaceText' : 'text-warningSurfaceText';
+  const bgClass = variant === 'error' ? 'bg-error-surface' : 'bg-warning-surface';
+  const textClass = variant === 'error' ? 'text-error-surface-text' : 'text-warning-surface-text';
 
   return (
     <div
       role='none'
-      className={`absolute ${bgClass} ${textClass} rounded-bs-sm text-xs p-1`}
+      className={`absolute ${bgClass} ${textClass} rounded-h-sm text-xs p-1`}
       style={{
-        ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },
+        ...{ '--dx-grid-cell-width': `${box?.inlineSize ?? 200}px` },
         zIndex: 10,
         insetBlockEnd: `calc(100% - ${box.insetBlockStart}px)`,
         insetInlineStart: box.insetInlineStart,

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -20,9 +20,9 @@ import { narrowSchema } from '../../util';
 
 const createOptionLabel: Label = ['create new object label', { ns: translationKey }];
 
-export type OnCreateHandler = (schema: Type.Entity.Any, values: any) => Parameters<typeof Ref.make>[0];
+export type OnCreateHandler = (schema: Type.AnyEntity, values: any) => Parameters<typeof Ref.make>[0];
 
-export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+export type FormCellEditorProps<T extends Type.AnyEntity = Type.AnyEntity> = {
   __gridScope: any;
   schema?: T;
   model?: TableModel;
@@ -32,7 +32,7 @@ export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
   onCreate?: OnCreateHandler;
 } & Omit<FormRootProps<any>, 'values' | 'schema' | 'onCreate'>;
 
-export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
+export const FormCellEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
   __gridScope,
   schema,
   model,
@@ -85,8 +85,12 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
 
   // NOTE: Important to get a mutable deep clone to eject from the echo object.
   // TODO(wittjosiah): Consider using something like Obj.clone for this use case.
-  const formValues = useMemo(() => (originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}), [originalRow]);
+  const initialFormValues = useMemo(() => (originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}), [originalRow]);
+  const [formValues, setFormValues] = useState<any>(initialFormValues);
 
+  const handleValuesChanged = useCallback<NonNullable<FormRootProps<any>['onValuesChanged']>>((values) => {
+    setFormValues(values);
+  }, []);
   const handleOpenChange = useCallback((nextOpen: boolean) => {
     if (nextOpen === false) {
       setEditing(null);
@@ -162,7 +166,7 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
     <Popover.Root open={editing} onOpenChange={handleOpenChange}>
       <Popover.VirtualTrigger virtualRef={anchorRef} />
       <Popover.Portal>
-        <Popover.Content tabIndex={-1} classNames='popover-card-width density-fine'>
+        <Popover.Content tabIndex={-1} classNames='dx-card-popover-width dx-density-fine'>
           <Popover.Arrow />
           <Popover.Viewport>
             <Form.Root
@@ -170,6 +174,8 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
               autoFocus
               schema={narrowedSchema}
               values={formValues}
+              onValuesChanged={handleValuesChanged}
+              projection={model?.projection}
               createInitialValuePath={fieldProjection.field.referencePath}
               createOptionIcon='ph--plus--regular'
               createOptionLabel={createOptionLabel}

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

@@ -6,11 +6,12 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { Obj } from '@dxos/echo';
+import { View } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
-import { View } from '@dxos/schema';
+import { ViewModel } from '@dxos/schema';
 import { Task } from '@dxos/types';
 
 import { useTestTableModel } from '../../testing';
@@ -45,14 +46,14 @@ const meta = {
   component: DefaultStory,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withLayout({ layout: 'column' }),
     withClientProvider({
       types: [View.View, Task.Task, Table.Table],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const { view, jsonSchema } = await View.makeFromDatabase({ db: space.db, typename: Task.Task.typename });
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: Task.Task.typename });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
         Array.from({ length: 10 }).forEach(() => {

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -31,7 +31,7 @@ import { FormCellEditor, type OnCreateHandler } from './FormCellEditor';
 
 const editorSlots = {
   scroll: {
-    className: '!plb-[--dx-grid-cell-editor-padding-block]',
+    className: '!py-(--dx-grid-cell-editor-padding-block)',
   },
 };
 
@@ -42,7 +42,7 @@ export type QueryResult = Pick<Completion, 'label'> & {
   data: any;
 };
 
-export type TableCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+export type TableCellEditorProps<T extends Type.AnyEntity = Type.AnyEntity> = {
   schema?: T;
   model?: TableModel;
   modals?: ModalController;
@@ -51,7 +51,7 @@ export type TableCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> =
   onSave?: () => void;
 };
 
-export const TableValueEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
+export const TableValueEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
   __gridScope,
   schema,
   model,

package/src/components/TableToolbar/TableToolbar.tsx

@@ -10,9 +10,8 @@ import {
   type ActionGraphEdges,
   type ActionGraphNodes,
   type ActionGraphProps,
+  Menu,
   type MenuAction,
-  MenuProvider,
-  ToolbarMenu,
   createGapSeparator,
   createMenuAction,
   useMenuActions,
@@ -75,7 +74,7 @@ const createTableToolbarActions = ({
     }
     const gap = createGapSeparator();
     nodes.push(...gap.nodes);
-    const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target }));
+    const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target, relation: 'child' }));
     if (customActions) {
       const custom = get(customActions);
       nodes.push(...custom.nodes);
@@ -95,6 +94,7 @@ export const TableToolbar = ({
   onAdd,
   onSave,
   customActions,
+  ...props
 }: TableToolbarProps) => {
   const registry = useContext(RegistryContext);
   const stateAtom = useMemo(() => Atom.make<TableToolbarState>({ viewDirty }), []);
@@ -111,8 +111,8 @@ export const TableToolbar = ({
   const menu = useMenuActions(actionsCreator);
 
   return (
-    <MenuProvider {...menu} attendableId={attendableId}>
-      <ToolbarMenu classNames={classNames} />
-    </MenuProvider>
+    <Menu.Root {...menu} attendableId={attendableId}>
+      <Menu.Toolbar {...props} classNames={classNames} />
+    </Menu.Root>
   );
 };

package/src/components/testing.ts

@@ -19,7 +19,7 @@ export const TestSchema = Schema.Struct({
   netWorth: Schema.optional(Schema.Number),
 }).pipe(
   Type.object({
-    typename: 'example.com/type/Test',
+    typename: 'com.example.type.test',
     version: '0.1.0',
   }),
 );

package/src/hooks/useAddRow.ts

@@ -10,7 +10,7 @@ import { type InsertRowResult } from '../model';
 
 export type UseAddRowProps = {
   db?: Database.Database;
-  schema?: Type.Obj.Any;
+  schema?: Type.AnyObj;
 };
 
 /**

package/src/hooks/useProjectionModel.ts

@@ -5,13 +5,13 @@
 import { type Registry } from '@effect-atom/atom-react';
 import { useState } from 'react';
 
-import { Type } from '@dxos/echo';
+import { JsonSchema, Type } from '@dxos/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
 
 import { type Table } from '../types';
 
-export const useProjectionModel = <S extends Type.Entity.Any>(
+export const useProjectionModel = <S extends Type.AnyEntity>(
   schema: S | undefined,
   table: Table.Table | undefined,
   registry: Registry.Registry,
@@ -23,7 +23,7 @@ export const useProjectionModel = <S extends Type.Entity.Any>(
       const view = await table.view.load();
       // For mutable schemas (EchoSchema), use the live jsonSchema reference for reactivity.
       // For immutable schemas, create a snapshot.
-      const jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : Type.toJsonSchema(schema);
+      const jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : JsonSchema.toJsonSchema(schema);
 
       // Always use createEchoChangeCallback since the view is ECHO-backed.
       // Pass schema only when mutable to allow schema mutations.

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

@@ -6,9 +6,9 @@ import { Registry } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
 import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 
-import { Filter, Query, Type } from '@dxos/echo';
+import { Filter, JsonSchema, Query, Type } from '@dxos/echo';
 import { createEchoSchema } from '@dxos/echo/testing';
-import { ProjectionModel, View, createDirectChangeCallback } from '@dxos/schema';
+import { ProjectionModel, ViewModel, createDirectChangeCallback } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -121,14 +121,14 @@ const Test = Schema.Struct({
   completed: Schema.Boolean,
 }).pipe(
   Type.object({
-    typename: 'example.com/type/Test',
+    typename: 'com.example.type.test',
     version: '0.1.0',
   }),
 );
 
 const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const view = View.make({
+  const view = ViewModel.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
   });
@@ -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, JsonSchema.toJsonSchema(schema)),
   });
   projection.normalizeView();
   return new TableModel({

package/src/model/table-model.ts

@@ -6,6 +6,7 @@ import { Atom, type Registry } from '@effect-atom/atom-react';
 
 import { Resource } from '@dxos/context';
 import { type Database, Format, Obj, Order, Query, type QueryAST, Ref } from '@dxos/echo';
+import { type View } from '@dxos/echo';
 import { type JsonProp, type JsonSchemaType, type Mutable, toEffectSchema } from '@dxos/echo/internal';
 import { getSnapshot } from '@dxos/echo/internal';
 import { getValue, setValue } from '@dxos/effect';
@@ -19,7 +20,7 @@ import {
   type DxGridPlaneRange,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type ProjectionModel, type PropertyType, type ValidationError, type View, validateSchema } from '@dxos/schema';
+import { type ProjectionModel, type PropertyType, type ValidationError, validateSchema } from '@dxos/schema';
 
 import { type Table } from '../types';
 import { extractOrder } from '../util';
@@ -122,7 +123,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 +140,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 +177,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     pinnedRows = { top: [], bottom: [] },
     rowActions = [],
     onCellUpdate,
-    onDeleteColumn,
+    onColumnDelete,
     onDeleteRows,
     onInsertRow,
     onRowOrderChange,
@@ -292,7 +293,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 +692,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 +797,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

@@ -6,9 +6,9 @@ import { Registry } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { Filter, Query, Type } from '@dxos/echo';
+import { Filter, JsonSchema, Query, Type } from '@dxos/echo';
 import { createEchoSchema } from '@dxos/echo/testing';
-import { ProjectionModel, View, createDirectChangeCallback } from '@dxos/schema';
+import { ProjectionModel, ViewModel, createDirectChangeCallback } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -92,14 +92,14 @@ const Test = Schema.Struct({
   count: Schema.Number,
 }).pipe(
   Type.object({
-    typename: 'example.com/type/Test',
+    typename: 'com.example.type.test',
     version: '0.1.0',
   }),
 );
 
 const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const view = View.make({
+  const view = ViewModel.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
   });
@@ -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, JsonSchema.toJsonSchema(schema)),
   });
   projection.normalizeView();
   return new TableModel({ registry, object, projection, ...props });

package/src/model/table-presentation.ts

@@ -6,6 +6,7 @@ import { Atom, type Registry } from '@effect-atom/atom-react';
 import * as Predicate from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
+import { type View } from '@dxos/echo';
 import { Format, TypeEnum, getValue } from '@dxos/echo/internal';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
@@ -15,7 +16,7 @@ import {
   type DxGridPlaneRange,
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
-import { type FieldType, VIEW_FIELD_LIMIT } from '@dxos/schema';
+import { VIEW_FIELD_LIMIT } from '@dxos/schema';
 import { mx } from '@dxos/ui-theme';
 
 import { tableButtons, tableControls } from '../util';
@@ -107,7 +108,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
   private createDataCell(
     cells: DxGridPlaneCells,
     obj: T,
-    field: FieldType,
+    field: View.FieldType,
     colIndex: number,
     displayIndex: number,
   ): void {
@@ -210,7 +211,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 end-0 inset-y-0 p-(--dx-grid-cell-content-padding-block)"><dx-anchor dxn=${dxn} class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
       }
     }
 
@@ -335,11 +336,11 @@ export class TablePresentation<T extends TableRow = TableRow> {
         value: '',
         resizeHandle: 'col',
         accessoryHtml: `
-          <span class="grow min-is-0 truncate">${props.title ?? field.path}</span>
+          <span class="grow min-w-0 truncate">${props.title ?? field.path}</span>
           ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
           ${tableButtons.columnSettings.render({ fieldId: field.id })}
         `,
-        className: '!bg-toolbarSurface !text-description [&>div]:flex [&>div]:items-stretch',
+        className: '!bg-toolbar-surface text-description! [&>div]:flex [&>div]:items-stretch',
       };
     }
 
@@ -382,7 +383,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     if (!this.model.features.selection.enabled || this.model.selection.selectionMode === 'single') {
       return {
         [toPlaneCellIndex({ col: 0, row: 0 })]: {
-          className: '!bg-toolbarSurface',
+          className: '!bg-toolbar-surface',
           readonly: true,
           value: '',
         },
@@ -396,7 +397,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
           header: true,
           checked: this.model.selection.allRowsSelected,
         }),
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbar-surface',
         readonly: true,
         value: '',
       },
@@ -411,7 +412,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
               disabled: (this.model.projection?.getFields()?.length ?? 0) >= VIEW_FIELD_LIMIT,
             })
           : undefined,
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbar-surface',
         readonly: true,
         value: '',
       },
@@ -465,7 +466,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 export const cellClassesForRowSelection = (selected: boolean, selectionMode: SelectionMode) => {
   if (!selected) {
     if (selectionMode === 'single') {
-      return ['!cursor-pointer'];
+      return ['cursor-pointer!'];
     } else {
       return undefined;
     }
@@ -473,8 +474,8 @@ export const cellClassesForRowSelection = (selected: boolean, selectionMode: Sel
 
   switch (selectionMode) {
     case 'single':
-      return ['!bg-currentRelated dx-grid__cell--no-focus-unfurl hover:bg-hoverSurface !cursor-pointer'];
+      return ['dx-grid__cell--no-focus-unfurl !bg-current-surface hover:bg-hover-surface cursor-pointer!'];
     case 'multiple':
-      return ['!bg-gridCellSelected'];
+      return ['!bg-grid-cell-selected'];
   }
 };