@dxos/react-ui-table 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0

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

@@ -5,14 +5,17 @@
 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 { AST, type BaseObject, ImmutableSchema, type BaseSchema, type HasId } from '@dxos/echo-schema';
+import { type BaseObject, getSchemaTypename, type HasId, toJsonSchema } 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 { Contact, createView, Organization, ViewProjection, ViewType } from '@dxos/schema';
+import { DataType, createView, ViewProjection, ViewType } from '@dxos/schema';
 import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -29,14 +32,15 @@ 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: BaseSchema<T>, count: number) => {
+const useTestModel = <T extends BaseObject & HasId>(schema: Schema.Schema<T>, count: number) => {
   const { space } = useClientProvider();
 
+  const jsonSchema = useMemo(() => toJsonSchema(schema), [schema]);
   const table = useMemo(() => {
-    // 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 });
+    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) });
   }, [schema]);
 
@@ -46,7 +50,7 @@ const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count
     }
 
     // TODO(burdon): Just pass in view? Reuse same jsonSchema instance? View determines if mutable, etc.
-    return new ViewProjection(schema.jsonSchema, table.view.target);
+    return new ViewProjection(jsonSchema, table.view.target);
   }, [schema, table]);
 
   const features = useMemo<TableFeatures>(
@@ -66,8 +70,6 @@ const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count
     });
   }, [model, space]);
 
-  console.log(projection?.getFieldProjections());
-
   const presentation = useMemo(() => {
     if (!model) {
       return;
@@ -80,13 +82,9 @@ const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count
 };
 
 const DefaultStory = () => {
-  // TODO(burdon): Remove need for ImmutableSchema wrapper at API-level.
-  const orgSchema = useMemo(() => new ImmutableSchema(Organization), []);
-  const { model: orgModel, presentation: orgPresentation } = useTestModel<Organization>(orgSchema, 50);
-
+  const { model: orgModel, presentation: orgPresentation } = useTestModel(DataType.Organization, 50);
   // TODO(burdon): Generate links with references.
-  const contactSchema = useMemo(() => new ImmutableSchema(Contact), []);
-  const { model: contactModel, presentation: contactPresentation } = useTestModel<Contact>(contactSchema, 50);
+  const { model: contactModel, presentation: contactPresentation } = useTestModel(DataType.Person, 50);
 
   return (
     <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
@@ -106,12 +104,12 @@ const meta: Meta<typeof DefaultStory> = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Organization, Contact],
+      types: [TableType, ViewType, DataType.Organization, DataType.Person],
       createIdentity: true,
       createSpace: true,
     }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
+    withLayout({ fullscreen: true }),
   ],
 };
 

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -0,0 +1,94 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Schema } from 'effect';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { getSnapshot } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { Popover } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
+import { type FieldProjection } from '@dxos/schema';
+import { getDeep, setDeep } from '@dxos/util';
+
+import { type TableModel } from '../../model';
+import { narrowSchema } from '../../util';
+
+type FormCellEditorProps = {
+  fieldProjection: FieldProjection;
+  model?: TableModel;
+  schema?: Schema.Schema.AnyNoContext;
+  __gridScope: any;
+};
+
+export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }: FormCellEditorProps) => {
+  const { editing, setEditing } = useGridContext('ArrayEditor', __gridScope);
+  const cellRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (editing && editing.cellElement) {
+      cellRef.current = editing.cellElement as HTMLButtonElement;
+    }
+  }, [editing?.cellElement]);
+
+  const narrowedSchema = useMemo(() => {
+    if (!schema) {
+      return undefined;
+    }
+    return narrowSchema(schema, [fieldProjection.field.path]);
+  }, [JSON.stringify(schema), fieldProjection.field.path]);
+
+  const originalRow = useMemo(() => {
+    if (model && editing) {
+      const cell = parseCellIndex(editing.index);
+      const row = model.getRowAt(cell.row);
+      invariant(row);
+
+      return row;
+    }
+
+    return undefined;
+  }, [model, editing]);
+
+  const formValues = useMemo(() => {
+    if (originalRow) {
+      // NOTE(ZaymonFC): Important to get a snapshot to eject from the live object.
+      return getSnapshot(originalRow);
+    }
+  }, [originalRow]);
+
+  const handleSave = useCallback(
+    (values: any) => {
+      const path = fieldProjection.field.path;
+      const value = getDeep(values, [path]);
+      setDeep(originalRow, [path], value);
+      setEditing(null);
+    },
+    [fieldProjection.field.path, originalRow],
+  );
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen === false) {
+        setEditing(null);
+      }
+    },
+    [setEditing],
+  );
+
+  if (!editing) {
+    return null;
+  }
+
+  return (
+    <Popover.Root open={editing !== null} onOpenChange={handleOpenChange}>
+      <Popover.VirtualTrigger virtualRef={cellRef} />
+      <Popover.Content tabIndex={-1} classNames='popover-consistent-width'>
+        <Popover.Arrow />
+        <Form values={formValues} schema={narrowedSchema as any} onSave={handleSave} />
+      </Popover.Content>
+    </Popover.Root>
+  );
+};

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 { ImmutableSchema, type EchoSchema } from '@dxos/echo-schema';
+import { type EchoSchema, isMutable } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { Filter, useQuery, live } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { defaultSizeRow, Grid, type GridEditing } from '@dxos/react-ui-grid';
+import { defaultRowSize, 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.schema(TableType));
+  const tables = useQuery(space, Filter.type(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 instanceof ImmutableSchema),
+      schemaEditable: schema && isMutable(schema),
     }),
-    [],
+    [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: defaultSizeRow }}>
+    <div className='flex w-[300px] border border-separator' style={{ height: defaultRowSize }}>
       <Grid.Root id='test' editing={editing}>
         <TableCellEditor model={model} onQuery={handleQuery} />
       </Grid.Root>
@@ -107,7 +107,7 @@ const meta: Meta<StoryProps> = {
       },
     }),
     withTheme,
-    withLayout({ tooltips: true }),
+    withLayout(),
   ],
 };
 
@@ -120,6 +120,7 @@ export const Default: Story = {
     editing: {
       index: 'grid,0,3',
       initialContent: 'Test',
+      cellElement: null,
     },
   },
 };

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -1,11 +1,12 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 import { type Completion } from '@codemirror/autocomplete';
+import { type Schema } from 'effect/Schema';
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import { FormatEnum } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { type DxGrid } from '@dxos/lit-grid';
 import { useThemeContext } from '@dxos/react-ui';
@@ -26,6 +27,7 @@ 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';
 
@@ -43,11 +45,52 @@ 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,
@@ -261,11 +304,9 @@ 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) : '';
     }

package/src/components/TableToolbar/TableToolbar.tsx

@@ -10,7 +10,6 @@ import {
   createGapSeparator,
   createMenuAction,
   type MenuAction,
-  type MenuActionHandler,
   MenuProvider,
   ToolbarMenu,
   useMenuActions,
@@ -27,18 +26,18 @@ export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
 type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
 export type TableToolbarProps = ThemedClassName<
-  TableToolbarState & { onAction?: MenuActionHandler<TableToolbarAction>; attendableId?: string }
+  TableToolbarState & { onAction: (action: TableToolbarAction) => void; attendableId?: string }
 >;
 
-const createTableToolbarActions = (state: TableToolbarState) => {
-  const add = createMenuAction<TableToolbarActionProperties>('add-row', {
-    type: 'add-row',
+const createTableToolbarActions = (state: TableToolbarState, onAction: (action: TableToolbarAction) => void) => {
+  const add = createMenuAction<TableToolbarActionProperties>('add-row', () => onAction(add), {
+    type: 'add-row' as const,
     icon: 'ph--plus--regular',
     label: ['add row', { ns: translationKey }],
     testId: 'table.toolbar.add-row',
   });
-  const save = createMenuAction<TableToolbarActionProperties>('save-view', {
-    type: 'save-view',
+  const save = createMenuAction<TableToolbarActionProperties>('save-view', () => onAction(save), {
+    type: 'save-view' as const,
     icon: 'ph--floppy-disk--regular',
     label: ['save view label', { ns: translationKey }],
     testId: 'table.toolbar.save-view',
@@ -46,8 +45,8 @@ const createTableToolbarActions = (state: TableToolbarState) => {
     hidden: !state.viewDirty,
   });
   const gap = createGapSeparator();
-  const comment = createMenuAction('comment', {
-    type: 'comment',
+  const comment = createMenuAction('comment', () => onAction(comment), {
+    type: 'comment' as const,
     icon: 'ph--chat-text--regular',
     label: ['create comment', { ns: translationKey }],
     testId: 'table.toolbar.comment',
@@ -61,11 +60,11 @@ const createTableToolbarActions = (state: TableToolbarState) => {
 
 export const TableToolbar = ({ classNames, viewDirty, attendableId, onAction }: TableToolbarProps) => {
   const state = useMemo(() => live<TableToolbarState>({ viewDirty }), []);
-  const actionsCreator = useCallback(() => createTableToolbarActions(state), [state]);
+  const actionsCreator = useCallback(() => createTableToolbarActions(state, onAction), [state, onAction]);
   const menu = useMenuActions(actionsCreator);
 
   return (
-    <MenuProvider {...menu} attendableId={attendableId} onAction={onAction as MenuActionHandler}>
+    <MenuProvider {...menu} attendableId={attendableId}>
       <ToolbarMenu classNames={classNames} />
     </MenuProvider>
   );

package/src/components/testing.ts

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { setValue, toJsonSchema, S, TypeEnum, TypedObject, FormatEnum } from '@dxos/echo-schema';
+import { setValue, toJsonSchema, TypeEnum, TypedObject, FormatEnum, ObjectId } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 import { live, makeRef } from '@dxos/react-client/echo';
 import { createView, type ViewProjection } from '@dxos/schema';
@@ -12,11 +13,11 @@ import { createView, type ViewProjection } from '@dxos/schema';
 import { TableType } from '../types';
 
 export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  id: S.String,
-  name: S.optional(S.String),
-  age: S.optional(S.Number),
-  active: S.optional(S.Boolean),
-  netWorth: S.optional(S.Number),
+  id: ObjectId,
+  name: Schema.optional(Schema.String),
+  age: Schema.optional(Schema.Number),
+  active: Schema.optional(Schema.Boolean),
+  netWorth: Schema.optional(Schema.Number),
 });
 
 export const createTable = (schema = TestSchema) => {

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

@@ -3,9 +3,10 @@
 //
 
 import { computed } from '@preact/signals-core';
+import { Schema } from 'effect';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { S, TypedObject } from '@dxos/echo-schema';
+import { TypedObject } from '@dxos/echo-schema';
 import { updateCounter } from '@dxos/echo-schema/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
 import { createEchoSchema } from '@dxos/live-object/testing';
@@ -99,8 +100,8 @@ describe('TableModel', () => {
 });
 
 class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  title: S.String,
-  completed: S.Boolean,
+  title: Schema.String,
+  completed: Schema.Boolean,
 }) {}
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {

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

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import { describe, expect, it, beforeEach } from 'vitest';
 
-import { S, TypedObject } from '@dxos/echo-schema';
+import { TypedObject } from '@dxos/echo-schema';
 import { live, makeRef } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView, ViewProjection } from '@dxos/schema';
@@ -89,8 +90,8 @@ describe('TablePresentation', () => {
 });
 
 class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  title: S.String,
-  completed: S.Boolean,
+  title: Schema.String,
+  completed: Schema.Boolean,
 }) {}
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {

package/src/model/table-presentation.ts

@@ -3,8 +3,9 @@
 //
 
 import { signal } from '@preact/signals-core';
+import { isNotNullable } from 'effect/Predicate';
 
-import { FormatEnum, getDXN, getValue } from '@dxos/echo-schema';
+import { FormatEnum, getDXN, getValue, TypeEnum } from '@dxos/echo-schema';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridPlane,
@@ -84,6 +85,10 @@ export class TablePresentation<T extends TableRow = TableRow> {
             return '';
           }
 
+          if (props.type === 'array') {
+            return '';
+          }
+
           switch (props.format) {
             case FormatEnum.Boolean:
             case FormatEnum.SingleSelect:
@@ -121,6 +126,47 @@ export class TablePresentation<T extends TableRow = TableRow> {
         cell.className = mx(classes.flat());
       }
 
+      if (props.type === TypeEnum.Array) {
+        const targetArray = getValue(obj, field.path);
+        if (targetArray && Array.isArray(targetArray)) {
+          // TODO(ZaymonFC): For arrays of objects, objects should have a 'label' annotation on the field
+          // that can be used to render tags.
+          // TODO(ZaymonFC): Move to util.
+          const getLabel = (value: any) => {
+            // If the value is falsy, return undefined
+            // If the object is an array, check for 'name' property
+            // If the object is a primitive type (string, number, boolean) stringify
+            // If the object is an array return 'Array'
+            if (!value) {
+              return undefined;
+            }
+            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+              return String(value);
+            }
+            if (Array.isArray(value)) {
+              return 'Array';
+            }
+            if (typeof value === 'object' && value.name) {
+              return value.name;
+            }
+            if (typeof value === 'object' && value.value) {
+              return `${value.value}`;
+            }
+            return 'Object';
+          };
+
+          const tags = targetArray
+            .map(getLabel)
+            .filter(isNotNullable)
+            .map((title) => {
+              return `<span class="dx-tag rounded-xl" data-hue="neutral">${title}</span>`;
+            })
+            .join('');
+
+          cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
+        }
+      }
+
       if (props.format === FormatEnum.Ref && props.referenceSchema) {
         const targetObj = getValue(obj, field.path)?.target;
         if (targetObj) {
@@ -166,7 +212,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
             .join(' ');
 
           if (tags) {
-            cell.accessoryHtml = tags;
+            cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1">${tags}</div>`;
           }
         }
       }
@@ -206,7 +252,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
           ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
           ${tableButtons.columnSettings.render({ fieldId: field.id })}
         `,
-        className: '!bg-gridHeader',
+        className: '!bg-toolbarSurface',
       };
     }
 
@@ -249,7 +295,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-gridHeader',
+          className: '!bg-toolbarSurface',
           readonly: true,
           value: '',
         },
@@ -263,7 +309,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
           header: true,
           checked: this.model.selection.allRowsSeleted.value,
         }),
-        className: '!bg-gridHeader',
+        className: '!bg-toolbarSurface',
         readonly: true,
         value: '',
       },
@@ -278,7 +324,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
               disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
             })
           : undefined,
-        className: '!bg-gridHeader',
+        className: '!bg-toolbarSurface',
         readonly: true,
         value: '',
       },

package/src/types/table.ts

@@ -2,20 +2,28 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EchoObject, Expando, LabelAnnotationId, ObjectId, Ref, S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
+
 // import { ThreadType } from '@dxos/plugin-space/types';
+import { LabelAnnotationId, ObjectId, Ref, Expando, EchoObject } from '@dxos/echo-schema';
 import { ViewType } from '@dxos/schema';
 
-export const TableSchema = S.Struct({
+export const TableSchema = Schema.Struct({
   id: ObjectId,
-  name: S.optional(S.String),
-  view: S.optional(Ref(ViewType)),
+  name: Schema.optional(Schema.String),
+  view: Schema.optional(Ref(ViewType)),
   // TODO(burdon): Document why threads is included here?
-  threads: S.optional(S.Array(Ref(Expando /* ThreadType */))),
+  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),
 }).annotations({
   // TODO(burdon): Move annotation to property.
   [LabelAnnotationId]: 'name',
 });
 
-export const TableType = TableSchema.pipe(EchoObject({ typename: 'dxos.org/type/Table', version: '0.1.0' }));
-export interface TableType extends S.Schema.Type<typeof TableType> {}
+// TODO(burdon): Move out of react-ui-xxx.
+export const TableType = TableSchema.pipe(
+  EchoObject({
+    typename: 'dxos.org/type/Table',
+    version: '0.1.0',
+  }),
+);
+export interface TableType extends Schema.Schema.Type<typeof TableType> {}

package/src/util/dynamic-table.ts

@@ -2,7 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import type { BaseSchema, JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
+import { type Schema } from 'effect';
+
+import { getTypename, toJsonSchema } from '@dxos/echo-schema';
+import type { JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
 import { live, makeRef } from '@dxos/live-object';
 import {
   createView,
@@ -27,7 +30,7 @@ export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<Propert
  * @deprecated
  */
 // TODO(burdon): Remove variance.
-export const getBaseSchems = ({
+export const getBaseSchema = ({
   typename,
   properties,
   jsonSchema,
@@ -36,13 +39,13 @@ export const getBaseSchems = ({
   typename?: string;
   properties?: TablePropertyDefinition[];
   jsonSchema?: JsonSchemaType;
-  schema?: BaseSchema;
+  schema?: Schema.Schema.AnyNoContext;
 }): { typename: string; jsonSchema: JsonSchemaType } => {
   if (typename && properties) {
     const schema = getSchemaFromPropertyDefinitions(typename, properties);
     return { typename: schema.typename, jsonSchema: schema.jsonSchema };
   } else if (schema) {
-    return { typename: schema.typename, jsonSchema: schema.jsonSchema };
+    return { typename: getTypename(schema)!, jsonSchema: toJsonSchema(schema) };
   } else if (typename && jsonSchema) {
     return { typename, jsonSchema };
   } else {

package/src/util/index.ts

@@ -7,3 +7,4 @@ export * from './signals';
 export * from './table';
 export * from './table-buttons';
 export * from './table-controls';
+export * from './schema';