@dxos/react-ui-table 0.8.4-main.fcfe5033a5 → 0.8.4-staging.60fe92afc8

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

@@ -5,24 +5,26 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
-import { Annotation, type Database, Format, Obj, type QueryAST, Ref, Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { DXN, Annotation, type Database, Format, Obj, type QueryAST, Ref, Type, View } from '@dxos/echo';
 import { type Mutable, PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { random } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Panel, ScrollArea } from '@dxos/react-ui';
-import { ViewEditor, translations as formTranslations } from '@dxos/react-ui-form';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { ViewEditor } from '@dxos/react-ui-form';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { ViewModel, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
+import { ViewModel, getSchemaFromPropertyDefinitions } from '@dxos/schema';
 import { TestSchema, createObjectFactory } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
+import { translations } from '#translations';
+
 import { useTestTableModel } from '../../testing';
-import { translations } from '../../translations';
 import { Table } from '../../types';
 import { Table as TableComponent } from './Table';
 
@@ -51,10 +53,11 @@ const Example = Schema.Struct({
     title: 'Parent',
   }),
 }).pipe(
-  Type.object({ typename: `com.example.type.${PublicKey.random().truncate()}`, version: '0.1.0' }),
   Annotation.LabelAnnotation.set(['name']),
+  // NSID last segment must start with a letter (DXN spec), so prefix the random hex.
+  Type.makeObject(DXN.make(`com.example.type.example${PublicKey.random().truncate()}`, '0.1.0')),
 );
-interface Example extends Schema.Schema.Type<typeof Example> {}
+interface Example extends Type.InstanceType<typeof Example> {}
 
 const StoryViewEditor = ({
   view,
@@ -63,17 +66,16 @@ const StoryViewEditor = ({
   handleDeleteColumn,
 }: {
   view?: View.View;
-  schema?: Schema.Schema.AnyNoContext;
+  schema?: Type.AnyEntity;
   db?: Database.Database;
   handleDeleteColumn: (fieldId: string) => void;
 }) => {
   const handleQueryChanged = useCallback(
     (newQuery: QueryAST.Query) => {
       invariant(schema);
-      invariant(Type.isMutable(schema));
-      schema.updateTypename(getTypenameFromQuery(newQuery));
+      invariant(Type.getDatabase(schema) != null);
       invariant(view);
-      Obj.change(view, (view) => {
+      Obj.update(view, (view) => {
         view.query.ast = newQuery as Mutable<typeof newQuery>;
       });
     },
@@ -86,8 +88,8 @@ const StoryViewEditor = ({
 
   return (
     <ViewEditor
-      registry={db?.schemaRegistry}
-      schema={schema}
+      registry={db?.graph.registry}
+      type={schema}
       view={view}
       onQueryChanged={handleQueryChanged}
       onDelete={handleDeleteColumn}
@@ -141,9 +143,7 @@ const DefaultStory = () => {
       <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>
+          <JsonHighlighter data={{ view: table.view.target, schema }} classNames='text-xs' />
         </ScrollArea.Viewport>
       </ScrollArea.Root>
     </div>
@@ -170,10 +170,13 @@ const meta = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const [schema] = await space.db.schemaRegistry.register([Example]);
-        const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: schema.typename });
+        const type = await space.db.addType(Example);
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({
+          db: space.db,
+          typename: Type.getTypename(type),
+        });
         const table = Table.make({ view, jsonSchema });
-        Obj.change(view, (view) => {
+        Obj.update(view, (view) => {
           view.projection.fields = [
             view.projection.fields.find((field) => field.path === 'name')!,
             ...view.projection.fields.filter((field) => field.path !== 'name'),
@@ -184,7 +187,7 @@ const meta = {
 
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            Obj.make(schema, {
+            Obj.make(type, {
               name: random.lorem.sentence(),
               status: random.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
               description: random.lorem.paragraph(),
@@ -219,7 +222,7 @@ export const StaticSchema: StoryObj = {
       onCreateSpace: async ({ space }) => {
         const { view, jsonSchema } = await ViewModel.makeFromDatabase({
           db: space.db,
-          typename: TestSchema.Person.typename,
+          typename: Type.getTypename(TestSchema.Person),
         });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
@@ -248,12 +251,7 @@ const ContactWithArrayOfEmails = Schema.Struct({
       }),
     ),
   ),
-}).pipe(
-  Type.object({
-    typename: 'org.dxos.type.contactWithArrayOfEmails',
-    version: '0.1.0',
-  }),
-);
+}).pipe(Type.makeObject(DXN.make('org.dxos.type.contactWithArrayOfEmails', '0.1.0')));
 
 export const ArrayOfObjects: StoryObj = {
   render: DefaultStory,
@@ -265,7 +263,7 @@ export const ArrayOfObjects: StoryObj = {
       onCreateSpace: async ({ space }) => {
         const { view, jsonSchema } = await ViewModel.makeFromDatabase({
           db: space.db,
-          typename: ContactWithArrayOfEmails.typename,
+          typename: Type.getTypename(ContactWithArrayOfEmails),
         });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
@@ -285,6 +283,61 @@ export const ArrayOfObjects: StoryObj = {
   },
 };
 
+export const RequiredSchema: StoryObj = {
+  render: DefaultStory,
+  decorators: [
+    withClientProvider({
+      types: [View.View, Table.Table, TestSchema.Person],
+      createIdentity: true,
+      createSpace: true,
+      onCreateSpace: async ({ space }) => {
+        // TestSchema.Person has a required `name: Schema.String` field.
+        // No pre-populated rows so the add-row flow is the first interaction.
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({
+          db: space.db,
+          typename: Type.getTypename(TestSchema.Person),
+        });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, ...formTranslations],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 30 s covers ECHO client + space + table creation (the only inherently slow step).
+    const addRowButton = await canvas.findByTestId('table.toolbar.add-row', undefined, { timeout: 30_000 });
+
+    // Person.name is required, so db.add throws → useAddRow returns 'draft' →
+    // a draft row appears in frozenRowsEnd and focus is set to its first cell.
+    await userEvent.click(addRowButton);
+
+    const draftCell = await canvas.findByTestId('frozenRowsEnd.0.0');
+    await userEvent.click(draftCell);
+
+    // Open the editor with Enter rather than typing to open — the latter routes the first
+    // character into dx-grid's `initialContent` and races the editor mount. The empty value
+    // fails validation; the editor must stay open so the value below can be entered.
+    await userEvent.keyboard('{Enter}');
+    await canvas.findByTestId('grid.cell-editor');
+
+    // The editor is focused (autoFocus); type the required value and commit.
+    await userEvent.keyboard('Alice');
+    await userEvent.keyboard('{Enter}');
+
+    // The draft row is committed and appears in the grid with the typed value.
+    await waitFor(async () => {
+      const cell = canvas.getByTestId('grid.0.0');
+      const text = cell.querySelector('.dx-grid__cell__content')?.textContent;
+      await expect(text).toBe('Alice');
+    });
+  },
+};
+
 export const Tags: Meta<DefaultStoryProps> = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
@@ -295,7 +348,7 @@ export const Tags: Meta<DefaultStoryProps> = {
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         // Configure schema.
-        const typename = 'com.example.type.single-select';
+        const typename = 'com.example.type.singleSelect';
         const selectOptions = [
           { id: 'one', title: 'One', color: 'emerald' },
           { id: 'two', title: 'Two', color: 'blue' },
@@ -306,7 +359,7 @@ export const Tags: Meta<DefaultStoryProps> = {
 
         const selectOptionIds = selectOptions.map((o) => o.id);
 
-        const schema = getSchemaFromPropertyDefinitions(typename, [
+        const type = getSchemaFromPropertyDefinitions(typename, [
           {
             name: 'single',
             format: Format.TypeFormat.SingleSelect,
@@ -318,7 +371,7 @@ export const Tags: Meta<DefaultStoryProps> = {
             config: { options: selectOptions },
           },
         ]);
-        const [storedSchema] = await space.db.schemaRegistry.register([schema]);
+        const storedType = await space.db.addType(type);
 
         // Initialize table.
         const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename });
@@ -328,7 +381,7 @@ export const Tags: Meta<DefaultStoryProps> = {
         // Populate.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            Obj.make(storedSchema, {
+            Obj.make(Type.assertObject(storedType), {
               single: random.helpers.arrayElement([...selectOptionIds, undefined]),
               multiple: random.helpers.randomSubset(selectOptionIds),
             }),

package/src/components/Table/TableContent.tsx

@@ -8,6 +8,7 @@ import React, { type MouseEvent, type WheelEvent, useCallback, useContext, useEf
 
 import { type Type } from '@dxos/echo';
 import { log } from '@dxos/log';
+import { composable, composableProps } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
   type DxGridAxisMeta,
@@ -21,7 +22,7 @@ import {
   gridSeparatorInlineEnd,
 } from '@dxos/react-ui-grid';
 import { DxEditRequest } from '@dxos/react-ui-grid';
-import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
 import { tableButtons, tableControls } from '../../util';
@@ -49,16 +50,20 @@ export type TableContentProps = {
   presentation?: TablePresentation;
   // TODO(burdon): Factor out attention.
   ignoreAttention?: boolean;
+  attendableId?: string;
   onCreate?: OnCreateHandler;
   onRowClick?: (row: any) => void;
   testId?: string;
 };
 
 export const TableContent = composable<HTMLDivElement, TableContentProps>(
-  ({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
+  (
+    { schema, model, presentation, ignoreAttention, attendableId, onCreate, onRowClick, testId, ...props },
+    forwardedRef,
+  ) => {
     const registry = useContext(RegistryContext);
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
-    const { hasAttention } = useAttention(model?.id ?? 'table');
+    const { hasAttention } = useAttention(attendableId ?? model?.id ?? 'table');
     const modals = useMemo(() => new ModalController(registry), [registry]);
     const columnMeta = useAtomValue(model?.columnMeta ?? emptyColumnMeta);
     // Subscribe to rows atom to trigger re-render when rows change.
@@ -379,7 +384,7 @@ export const TableContent = composable<HTMLDivElement, TableContentProps>(
     }, [dxGrid, model, presentation]);
 
     if (!model || !modals) {
-      return <span role='none' className='dx-attention-surface' />;
+      return <span className='dx-attention-surface' />;
     }
 
     return (

package/src/components/Table/TableToolbar.tsx

@@ -5,6 +5,7 @@
 import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import React, { useContext, useEffect, useMemo } from 'react';
 
+import { composable, composableProps } from '@dxos/react-ui';
 import {
   type ActionGraphEdges,
   type ActionGraphNodes,
@@ -16,9 +17,8 @@ import {
   createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
-import { composable, composableProps } from '@dxos/ui-theme';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
 export type TableToolbarActionProperties = { type: TableToolbarActionType };
 

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -23,11 +23,10 @@ export const CellValidationMessage = ({
   }
 
   const bgClass = variant === 'error' ? 'bg-error-surface' : 'bg-warning-surface';
-  const textClass = variant === 'error' ? 'text-error-surface-text' : 'text-warning-surface-text';
+  const textClass = variant === 'error' ? 'text-error-fg' : 'text-warning-fg';
 
   return (
     <div
-      role='none'
       className={`absolute ${bgClass} ${textClass} rounded-h-sm text-xs p-1`}
       style={{
         ...{ '--dx-grid-cell-width': `${box?.inlineSize ?? 200}px` },

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -5,8 +5,8 @@
 import type * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Entity, type Type } from '@dxos/echo';
-import { Ref, getValue } from '@dxos/echo/internal';
+import { Entity, Ref, Type } from '@dxos/echo';
+import { SchemaEx } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { type Label, Popover } from '@dxos/react-ui';
 import { Form, type FormRootProps, type RefFieldProps } from '@dxos/react-ui-form';
@@ -14,8 +14,9 @@ import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
 import { type FieldProjection } from '@dxos/schema';
 import { getDeep, isTruthy, setDeep } from '@dxos/util';
 
+import { translationKey } from '#translations';
+
 import { type ModalController, type TableModel, type TableRow } from '../../model';
-import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
 const createOptionLabel: Label = ['create-new-object.label', { ns: translationKey }];
@@ -62,7 +63,7 @@ export const FormCellEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
       return undefined;
     }
 
-    return narrowSchema(schema, [fieldProjection.field.path]);
+    return narrowSchema(Type.getSchema(schema), [fieldProjection.field.path]);
   }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
 
   const originalRow = useMemo<TableRow | undefined>(() => {
@@ -150,8 +151,8 @@ export const FormCellEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
       results
         .map((obj) => {
           return {
-            id: Entity.getDXN(obj).toString(),
-            label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
+            id: Entity.getURI(obj),
+            label: SchemaEx.getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
           };
         })
         .filter(isTruthy),
@@ -166,7 +167,7 @@ export const FormCellEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
     <Popover.Root open={editing} onOpenChange={handleOpenChange}>
       <Popover.VirtualTrigger virtualRef={anchorRef} />
       <Popover.Portal>
-        <Popover.Content tabIndex={-1} classNames='dx-card-popover-width dx-density-fine'>
+        <Popover.Content tabIndex={-1} classNames='dx-card-popover-width dx-density-md'>
           <Popover.Arrow />
           <Popover.Viewport>
             <Form.Root

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

@@ -5,8 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Obj } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { Obj, Type, View } from '@dxos/echo';
 import { random } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
@@ -14,8 +13,9 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { ViewModel } from '@dxos/schema';
 import { Task } from '@dxos/types';
 
+import { translations } from '#translations';
+
 import { useTestTableModel } from '../../testing';
-import { translations } from '../../translations';
 import { Table } from '../../types';
 import { TableCellEditor } from './TableCellEditor';
 
@@ -52,7 +52,10 @@ const meta = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: Task.Task.typename });
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({
+          db: space.db,
+          typename: Type.getTypename(Task.Task),
+        });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
         Array.from({ length: 10 }).forEach(() => {

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -8,7 +8,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { debounce } from '@dxos/async';
 import { type Type } from '@dxos/echo';
-import { Format, TypeEnum } from '@dxos/echo/internal';
+import { Format, TypeEnum } from '@dxos/echo/Format';
 import { invariant } from '@dxos/invariant';
 import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
 import {
@@ -90,6 +90,12 @@ export const TableValueEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
   return <TableCellEditor model={model} modals={modals} onFocus={onFocus} onSave={onSave} __gridScope={__gridScope} />;
 };
 
+const cellEditorSlots: GridCellEditorProps['slots'] = {
+  content: {
+    className: '!py-(--dx-grid-cell-editor-padding-block)',
+  },
+};
+
 export const TableCellEditor = ({
   __gridScope,
   model,
@@ -245,11 +251,7 @@ export const TableCellEditor = ({
       <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
       <GridCellEditor
         extensions={extensions}
-        slots={{
-          content: {
-            className: '!py-(--dx-grid-cell-editor-padding-block)',
-          },
-        }}
+        slots={cellEditorSlots}
         getCellContent={getCellContent}
         onBlur={handleBlur}
       />

package/src/components/testing.ts

@@ -6,9 +6,9 @@ import { Atom } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
 import { useEffect } from 'react';
 
-import { Format, Type } from '@dxos/echo';
-import { TypeEnum } from '@dxos/echo/internal';
-import { setValue } from '@dxos/effect';
+import { DXN, Format, Type } from '@dxos/echo';
+import { TypeEnum } from '@dxos/echo/Format';
+import { SchemaEx } from '@dxos/effect';
 import { random } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';
 
@@ -17,12 +17,7 @@ export const TestSchema = Schema.Struct({
   age: Schema.optional(Schema.Number),
   active: Schema.optional(Schema.Boolean),
   netWorth: Schema.optional(Schema.Number),
-}).pipe(
-  Type.object({
-    typename: 'com.example.type.test',
-    version: '0.1.0',
-  }),
-);
+}).pipe(Type.makeObject(DXN.make('com.example.type.test', '0.1.0')));
 
 export type TestItem = {
   name: string;
@@ -99,15 +94,15 @@ export const useSimulator = ({ items, projection, insertInterval, updateInterval
         // TODO(ZaymonFC): Restore this once I know how to derive the type from the schema.
         switch (type) {
           case TypeEnum.String: {
-            setValue(item, path, `Updated ${Date.now()}`);
+            SchemaEx.setValue(item, path, `Updated ${Date.now()}`);
             break;
           }
           case TypeEnum.Number: {
-            setValue(item, path, Math.floor(Math.random() * 100));
+            SchemaEx.setValue(item, path, Math.floor(Math.random() * 100));
             break;
           }
           case TypeEnum.Boolean: {
-            setValue(item, path, !item[path]);
+            SchemaEx.setValue(item, path, !item[path]);
             break;
           }
         }

package/src/hooks/useProjectionModel.ts

@@ -5,7 +5,7 @@
 import { type Registry } from '@effect-atom/atom-react';
 import { useState } from 'react';
 
-import { JsonSchema, Type } from '@dxos/echo';
+import { Type } from '@dxos/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
 
@@ -21,13 +21,12 @@ export const useProjectionModel = <S extends Type.AnyEntity>(
   useAsyncEffect(async () => {
     if (schema && table) {
       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 : JsonSchema.toJsonSchema(schema);
+      // Use the live jsonSchema reference for reactivity.
+      const jsonSchema = schema.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);
+      // Pass the type entity only when stored, to allow schema mutations.
+      const change = createEchoChangeCallback(view, Type.getDatabase(schema) != null ? schema : undefined);
 
       const projection = new ProjectionModel({ registry, view, baseSchema: jsonSchema, change });
       projection.normalizeView();

package/src/hooks/useTableModel.ts

@@ -44,7 +44,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
   ...props
 }: UseTableModelProps<T>): TableModel<T> | undefined => {
   const registry = useContext(RegistryContext);
-  const selected = useSelected(object && Obj.getDXN(object).toString(), 'multi');
+  const selected = useSelected(object && Obj.getURI(object), 'multi');
   const initialSelection = useMemo(() => selected, [object]);
 
   const [model, setModel] = useState<TableModel<T>>();

package/src/index.ts

@@ -2,11 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { translations } from './translations';
-
 export * from './components';
 export * from './hooks';
 export * from './model';
 export * from './util';
-
-export { translations };

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

@@ -6,7 +6,7 @@ import { Registry } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
 import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 
-import { Filter, JsonSchema, Query, Type } from '@dxos/echo';
+import { DXN, Filter, JsonSchema, Query, Type } from '@dxos/echo';
 import { createEchoSchema } from '@dxos/echo/testing';
 import { ProjectionModel, ViewModel, createDirectChangeCallback } from '@dxos/schema';
 
@@ -118,15 +118,10 @@ describe('TableModel', () => {
 const Test = Schema.Struct({
   title: Schema.String,
   completed: Schema.Boolean,
-}).pipe(
-  Type.object({
-    typename: 'com.example.type.test',
-    version: '0.1.0',
-  }),
-);
+}).pipe(Type.makeObject(DXN.make('com.example.type.test', '0.1.0')));
 
 const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
-  const schema = createEchoSchema(Test);
+  const schema = createEchoSchema(Type.getSchema(Test));
   const view = ViewModel.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
@@ -136,7 +131,7 @@ const createTableModel = (registry: Registry.Registry, props: Partial<TableModel
     registry,
     view,
     baseSchema: schema.jsonSchema,
-    change: createDirectChangeCallback(view.projection, JsonSchema.toJsonSchema(schema)),
+    change: createDirectChangeCallback(view.projection, JsonSchema.toJsonSchema(Type.getSchema(schema))),
   });
   projection.normalizeView();
   return new TableModel({