@dxos/react-ui-table 0.8.3-main.7f5a14c → 0.8.3

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

@@ -8,7 +8,7 @@ import { type StoryObj, type Meta } from '@storybook/react';
 import { Schema } from 'effect';
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import { Type } from '@dxos/echo';
+import { Obj, Type } from '@dxos/echo';
 import { FormatEnum, isMutable, toJsonSchema, EchoObject, GeneratorAnnotation } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
@@ -125,6 +125,7 @@ const useTestTableModel = () => {
     model,
     presentation,
     space,
+    client,
     handleInsertRow,
     handleSaveView,
     handleDeleteRows,
@@ -166,7 +167,7 @@ const StoryViewEditor = () => {
 //
 
 const DefaultStory = () => {
-  const { schema, table, tableRef, model, presentation, handleInsertRow, handleSaveView } = useTestTableModel();
+  const { schema, table, tableRef, model, presentation, client, handleInsertRow, handleSaveView } = useTestTableModel();
 
   if (!schema || !table) {
     return <div />;
@@ -177,7 +178,14 @@ const DefaultStory = () => {
       <div className='grid grid-rows-[min-content_1fr] min-bs-0 overflow-hidden'>
         <TableToolbar classNames='border-be border-subduedSeparator' onAdd={handleInsertRow} onSave={handleSaveView} />
         <Table.Root>
-          <Table.Main ref={tableRef} model={model} presentation={presentation} schema={schema} ignoreAttention />
+          <Table.Main
+            ref={tableRef}
+            model={model}
+            presentation={presentation}
+            schema={schema}
+            client={client}
+            ignoreAttention
+          />
         </Table.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
@@ -208,7 +216,7 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(Obj.make(TableType, {}));
         const schema = await initializeTable({ client, space, table, initialRow: false });
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
@@ -237,7 +245,7 @@ export const StaticSchema: StoryObj = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(Obj.make(TableType, {}));
         await initializeTable({ client, space, table, typename: Testing.Organization.typename });
 
         const factory = createObjectFactory(space.db, faker as any);
@@ -279,7 +287,7 @@ export const ArrayOfObjects: StoryObj = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(Obj.make(TableType, {}));
         await initializeTable({ client, space, table, typename: ContactWithArrayOfEmails.typename });
 
         const factory = createObjectFactory(space.db, faker as any);
@@ -332,7 +340,7 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(Obj.make(TableType, {}));
         await initializeTable({ client, space, table, initialRow: false, typename });
 
         // Populate.

package/src/components/Table/Table.tsx

@@ -15,6 +15,7 @@ import React, {
   useEffect,
 } from 'react';
 
+import { type Client } from '@dxos/client';
 import { getValue } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { Filter } from '@dxos/react-client/echo';
@@ -77,13 +78,14 @@ export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
   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;
   onRowClick?: (row: any) => void;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention, schema, onRowClick }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
     const { hasAttention } = useAttention(model?.id ?? 'table');
     const { t } = useTranslation(translationKey);
@@ -307,7 +309,15 @@ const TableMain = forwardRef<TableController, TableMainProps>(
         if (model && props.referenceSchema && field.referencePath) {
           const space = model.space;
           invariant(space);
-          const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
+
+          let schema;
+          if (client) {
+            schema = client.graph.schemaRegistry.getSchema(props.referenceSchema);
+          }
+          if (!schema) {
+            schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
+          }
+
           if (schema) {
             const { objects } = await space.db.query(Filter.type(schema)).run();
             const options = objects
@@ -336,7 +346,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
         return [];
       },
-      [model, t],
+      [model, client, t],
     );
 
     if (!model || !modals) {

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

@@ -5,15 +5,16 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
-import { type Schema } from 'effect';
 import { SchemaAST } from 'effect';
 import React, { useEffect, useMemo } from 'react';
 
-import { type BaseObject, getSchemaTypename, type HasId, toJsonSchema } from '@dxos/echo-schema';
+import { Obj, type Type } from '@dxos/echo';
+import { getSchemaTypename, 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 { useClient } from '@dxos/react-client';
+import { makeRef } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { DataType, createView, ViewProjection, ViewType } from '@dxos/schema';
 import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
@@ -32,26 +33,29 @@ const generator: ValueGenerator = faker as any;
 // TODO(burdon): Mutable and immutable views.
 // TODO(burdon): Reconcile schemas types and utils (see API PR).
 // TODO(burdon): Base type for T (with id); see ECHO API PR?
-const useTestModel = <T extends BaseObject & HasId>(schema: Schema.Schema<T>, count: number) => {
+const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
   const { space } = useClientProvider();
 
   const jsonSchema = useMemo(() => toJsonSchema(schema), [schema]);
   const table = useMemo(() => {
+    if (!space) {
+      return undefined;
+    }
     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]);
+    return space.db.add(Obj.make(TableType, { view: makeRef(view) }));
+  }, [schema, space, jsonSchema]);
 
   const projection = useMemo(() => {
-    if (!table.view?.target) {
+    if (!table?.view?.target) {
       return undefined;
     }
 
     // TODO(burdon): Just pass in view? Reuse same jsonSchema instance? View determines if mutable, etc.
     return new ViewProjection(jsonSchema, table.view.target);
-  }, [schema, table]);
+  }, [jsonSchema, table]);
 
   const features = useMemo<TableFeatures>(
     () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
@@ -82,16 +86,17 @@ const useTestModel = <T extends BaseObject & HasId>(schema: Schema.Schema<T>, co
 };
 
 const DefaultStory = () => {
+  const client = useClient();
   const { model: orgModel, presentation: orgPresentation } = useTestModel(DataType.Organization, 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'>
       <Table.Root>
-        <Table.Main model={orgModel} presentation={orgPresentation} ignoreAttention />
+        <Table.Main model={orgModel} presentation={orgPresentation} client={client} ignoreAttention />
       </Table.Root>
       <Table.Root>
-        <Table.Main model={contactModel} presentation={contactPresentation} ignoreAttention />
+        <Table.Main model={contactModel} presentation={contactPresentation} client={client} ignoreAttention />
       </Table.Root>
     </div>
   );

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { useGridContext, type GridScopedProps } from '@dxos/react-ui-grid';
+
+export type CellValidationMessageProps = {
+  validationError: string | null;
+};
+
+export const CellValidationMessage = ({
+  validationError,
+  __gridScope,
+}: GridScopedProps<CellValidationMessageProps>) => {
+  const { editing, editBox: box } = useGridContext('GridSheetCellEditor', __gridScope);
+
+  if (!editing || !validationError) {
+    return null;
+  }
+
+  return (
+    <div
+      role='none'
+      className='absolute bg-errorSurface text-errorSurfaceText rounded-bs-sm text-xs p-1'
+      style={{
+        ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },
+        zIndex: 10,
+        insetBlockEnd: `calc(100% - ${box.insetBlockStart}px)`,
+        insetInlineStart: box.insetInlineStart,
+        inlineSize: box.inlineSize,
+      }}
+    >
+      {validationError}
+    </div>
+  );
+};

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

@@ -7,6 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { Obj } from '@dxos/echo';
 import { type EchoSchema, isMutable } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
@@ -96,7 +97,7 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(Obj.make(TableType, {}));
         const schema = await initializeTable({ client, space, table });
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -4,7 +4,7 @@
 
 import { type Completion } from '@codemirror/autocomplete';
 import { type Schema } from 'effect/Schema';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -27,6 +27,7 @@ import {
 import { tagPickerExtension, createLinks } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
+import { CellValidationMessage } from './CellValidationMessage';
 import { FormCellEditor } from './FormCellEditor';
 import { completion } from './extension';
 import { type TableModel, type ModalController } from '../../model';
@@ -102,6 +103,7 @@ export const TableCellEditor = ({
   const { id: gridId, editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
   const { themeMode } = useThemeContext();
+  const [_validationError, setValidationError] = useState<string | null>(null);
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -116,51 +118,76 @@ export const TableCellEditor = ({
   }, [model, editing]);
 
   const handleEnter = useCallback(
-    (value: any) => {
+    async (value: any) => {
       if (!model || !editing) {
         return;
       }
 
       const cell = parseCellIndex(editing.index);
-      model.setCellData(cell, value);
-      onEnter?.(cell);
-      onFocus?.();
-      setEditing(null);
+
+      // Validate the value
+      const result = await model.validateCellData(cell, value);
+
+      if (result.valid) {
+        setValidationError(null);
+        model.setCellData(cell, value);
+        onEnter?.(cell);
+        onFocus?.();
+        setEditing(null);
+      } else {
+        setValidationError(result.error);
+        // Editor stays open on validation failure
+      }
     },
     [model, editing, onEnter, onFocus, setEditing],
   );
 
   const handleBlur = useCallback<EditorBlurHandler>(
-    (value) => {
+    async (value) => {
       if (!model || !editing) {
         return;
       }
       if (suppressNextBlur.current) {
         suppressNextBlur.current = false;
-        return;
       }
 
-      const cell = parseCellIndex(editing.index);
-      if (value !== undefined) {
-        model.setCellData(cell, value);
-      }
+      // Don't save on blur - let handleClose handle validation and saving
     },
     [model, editing],
   );
 
   const handleClose = useCallback<EditorKeyOrBlurHandler>(
-    (value, event) => {
+    async (value, event) => {
       if (!model || !editing || !fieldProjection) {
         return;
       }
 
       const cell = parseCellIndex(editing.index);
-      onEnter?.(cell);
-      if (event && onFocus) {
-        onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+
+      if (value !== undefined) {
+        // Pre-commit validation check.
+        const result = await model.validateCellData(cell, value);
+
+        if (result.valid) {
+          setValidationError(null);
+          model.setCellData(cell, value);
+          setEditing(null);
+          onEnter?.(cell);
+          if (event && onFocus) {
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+          }
+        } else {
+          setValidationError(result.error);
+        }
+      } else {
+        setValidationError(null);
+        setEditing(null);
+        if (event && onFocus) {
+          onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+        }
       }
     },
-    [model, editing, onFocus, onEnter, fieldProjection],
+    [model, editing, onFocus, onEnter, fieldProjection, setEditing],
   );
 
   const extension = useMemo(() => {
@@ -209,9 +236,9 @@ export const TableCellEditor = ({
                 return;
               }
               if (mode === 'single-select') {
-                handleEnter(ids[0]);
+                void handleEnter(ids[0]);
               } else {
-                handleEnter(ids);
+                void handleEnter(ids);
               }
             }
           },
@@ -238,12 +265,12 @@ export const TableCellEditor = ({
                           [field.referencePath!]: data.text,
                         },
                         (data) => {
-                          handleEnter(data);
+                          void handleEnter(data);
                         },
                       );
                     }
                   } else {
-                    handleEnter(data);
+                    void handleEnter(data);
                   }
                 }
               },
@@ -312,7 +339,12 @@ export const TableCellEditor = ({
     }
   }, [model, editing]);
 
-  return <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} />;
+  return (
+    <>
+      <CellValidationMessage validationError={_validationError} __gridScope={__gridScope} />
+      <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} />
+    </>
+  );
 };
 
 const determineNavigationAxis = ({ key }: EditorKeyEvent): 'col' | 'row' | undefined => {

package/src/components/testing.ts

@@ -5,9 +5,10 @@
 import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { setValue, toJsonSchema, TypeEnum, TypedObject, FormatEnum, ObjectId } from '@dxos/echo-schema';
+import { Obj, Ref } from '@dxos/echo';
+import { FormatEnum, ObjectId, setValue, toJsonSchema, TypedObject, TypeEnum } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
-import { live, makeRef } from '@dxos/react-client/echo';
+import { live } from '@dxos/react-client/echo';
 import { createView, type ViewProjection } from '@dxos/schema';
 
 import { TableType } from '../types';
@@ -21,8 +22,8 @@ export const TestSchema = TypedObject({ typename: 'example.com/type/Test', versi
 });
 
 export const createTable = (schema = TestSchema) => {
-  return live(TableType, {
-    view: makeRef(
+  return Obj.make(TableType, {
+    view: Ref.make(
       createView({
         name: 'Test',
         typename: schema.typename,

package/src/hooks/useTableModel.ts

@@ -3,6 +3,7 @@
 //
 
 import { effect } from '@preact/signals-core';
+import orderBy from 'lodash.orderby';
 import { useEffect, useState } from 'react';
 
 import { fullyQualifiedId, getSpace, type Live } from '@dxos/react-client/echo';
@@ -66,7 +67,13 @@ export const useTableModel = <T extends TableRow = TableRow>({
   // Update data.
   useEffect(() => {
     if (rows) {
-      model?.setRows(rows);
+      // TODO(ZaymonFC): Remove this workaround once unstable query ordering issue is resolved
+      /*
+       * Sort all objects by string id field as a temporary workaround for query ordering issues
+       * Reference: https://github.com/dxos/dxos/pull/9409
+       */
+      const sortedRows = orderBy(rows, [(row) => String(row.id)], ['asc']);
+      model?.setRows(sortedRows);
     }
   }, [model, rows]);
 

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

@@ -6,11 +6,12 @@ import { computed } from '@preact/signals-core';
 import { Schema } from 'effect';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
+import { Obj, Ref } from '@dxos/echo';
 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';
-import { live, makeRef } from '@dxos/react-client/echo';
+import { live } from '@dxos/react-client/echo';
 import { createView, ViewProjection } from '@dxos/schema';
 
 import { TableModel, type TableModelProps } from './table-model';
@@ -108,6 +109,6 @@ const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = live(TableType, { view: makeRef(view) });
+  const table = Obj.make(TableType, { view: Ref.make(view) });
   return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
 };

package/src/model/table-model.ts

@@ -6,7 +6,15 @@ import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-c
 
 import { type Space } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
-import { type FieldSortType, FormatEnum, getValue, setValue, type JsonProp } from '@dxos/echo-schema';
+import {
+  type FieldSortType,
+  FormatEnum,
+  getValue,
+  setValue,
+  type JsonProp,
+  getSnapshot,
+  getSchema,
+} from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { isLiveObject, makeRef } from '@dxos/live-object';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
@@ -16,13 +24,16 @@ import {
   type DxGridPlanePosition,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type ViewType, type ViewProjection } from '@dxos/schema';
+import { type ViewType, type ViewProjection, type PropertyType, validateSchema } from '@dxos/schema';
 
 import { type SelectionMode, SelectionModel } from './selection-model';
 import { TableSorting } from './table-sorting';
 import { touch } from '../util';
 import { extractTagIds } from '../util/tag';
 
+// TODO(ZaymonFC): Use a common type?
+export type ValidationResult = { valid: true } | { valid: false; error: string };
+
 // TODO(burdon): Use schema types.
 export type TableRow = Record<JsonProp, any> & { id: string };
 
@@ -330,54 +341,58 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     }
   };
 
-  public setCellData = ({ col, row }: DxGridPlanePosition, value: any): void => {
+  public validateCellData = async ({ col, row }: DxGridPlanePosition, value: any): Promise<ValidationResult> => {
     const rowIdx = this._sorting.getDataIndex(row);
     const fields = this._view?.fields ?? [];
     if (col < 0 || col >= fields.length) {
-      return;
+      return { valid: false, error: 'Invalid column index' };
     }
 
     const field = fields[col];
     const { props } = this._projection.getFieldProjection(field.id);
-    switch (props.format) {
-      case FormatEnum.Ref: {
-        // TODO(ZaymonFC): This get's called an additional time by the cell editor onBlur, but with the cell editors
-        //   plain string value. Maybe onBlur should be called with the actual value?
-        if (isLiveObject(value)) {
-          setValue(this._rows.value[rowIdx], field.path, makeRef(value));
-        }
-        break;
-      }
 
-      case FormatEnum.SingleSelect: {
-        const ids = extractTagIds(value);
-        if (ids && ids.length > 0) {
-          setValue(this._rows.value[rowIdx], field.path, ids[0]);
-        }
-        break;
-      }
+    const currentRow = this._rows.value[rowIdx];
+    invariant(currentRow, 'Invalid row index');
 
-      case FormatEnum.MultiSelect: {
-        const ids = extractTagIds(value);
-        if (ids) {
-          setValue(this._rows.value[rowIdx], field.path, ids);
-        }
-        break;
-      }
+    // Get a snapshot of the current object.
+    const snapshot = getSnapshot(currentRow);
+    const transformedValue = editorTextToCellValue(props, value);
 
-      default: {
-        setValue(
-          this._rows.value[rowIdx],
-          field.path,
-          parseValue({
-            type: props.type,
-            format: props.format,
-            value,
-          }),
-        );
-        break;
-      }
+    // Set the proposed value.
+    setValue(snapshot, field.path, transformedValue);
+
+    const schema = getSchema(currentRow);
+    invariant(schema);
+
+    const validationResult = validateSchema(schema, snapshot);
+    if (validationResult && validationResult.length > 0) {
+      const error = validationResult[0];
+      invariant(error.path === field.path);
+      return { valid: false, error: error.message };
+    }
+
+    return { valid: true };
+  };
+
+  public setCellData = ({ col, row }: DxGridPlanePosition, value: any): void => {
+    const rowIdx = this._sorting.getDataIndex(row);
+    const fields = this._view?.fields ?? [];
+    if (col < 0 || col >= fields.length) {
+      return;
+    }
+
+    const field = fields[col];
+    const { props } = this._projection.getFieldProjection(field.id);
+    const transformedValue = editorTextToCellValue(props, value);
+
+    // Special handling for Ref format to preserve existing behavior
+    if (props.format === FormatEnum.Ref && !isLiveObject(value)) {
+      // TODO(ZaymonFC): This get's called an additional time by the cell editor onBlur, but with the cell editors
+      //   plain string value. Maybe onBlur should be called with the actual value?
+      return;
     }
+
+    setValue(this._rows.value[rowIdx], field.path, transformedValue);
   };
 
   /**
@@ -446,3 +461,37 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     this._sorting.save();
   }
 }
+
+const editorTextToCellValue = (props: PropertyType, value: any): any => {
+  switch (props.format) {
+    case FormatEnum.Ref: {
+      if (isLiveObject(value)) {
+        return makeRef(value);
+      } else {
+        return value;
+      }
+    }
+
+    case FormatEnum.SingleSelect: {
+      const ids = extractTagIds(value);
+      if (ids && ids.length > 0) {
+        return ids[0];
+      } else {
+        return value;
+      }
+    }
+
+    case FormatEnum.MultiSelect: {
+      const ids = extractTagIds(value);
+      return ids || value;
+    }
+
+    default: {
+      return parseValue({
+        type: props.type,
+        format: props.format,
+        value,
+      });
+    }
+  }
+};

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

@@ -5,8 +5,9 @@
 import { Schema } from 'effect';
 import { describe, expect, it, beforeEach } from 'vitest';
 
+import { Obj, Ref } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
-import { live, makeRef } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView, ViewProjection } from '@dxos/schema';
 
@@ -98,6 +99,6 @@ const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = live(TableType, { view: makeRef(view) });
+  const table = Obj.make(TableType, { view: Ref.make(view) });
   return new TableModel({ id: table.id, view, projection, ...props });
 };