@dxos/react-ui-table 0.8.4-main.2c6827d → 0.8.4-main.3c1ae3b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.4-main.2c6827d",
+  "version": "0.8.4-main.3c1ae3b",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -65,33 +65,33 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/async": "0.8.4-main.2c6827d",
-    "@dxos/debug": "0.8.4-main.2c6827d",
-    "@dxos/context": "0.8.4-main.2c6827d",
-    "@dxos/effect": "0.8.4-main.2c6827d",
-    "@dxos/invariant": "0.8.4-main.2c6827d",
-    "@dxos/keys": "0.8.4-main.2c6827d",
-    "@dxos/echo": "0.8.4-main.2c6827d",
-    "@dxos/live-object": "0.8.4-main.2c6827d",
-    "@dxos/plugin-search": "0.8.4-main.2c6827d",
-    "@dxos/log": "0.8.4-main.2c6827d",
-    "@dxos/echo-db": "0.8.4-main.2c6827d",
-    "@dxos/random": "0.8.4-main.2c6827d",
-    "@dxos/react-client": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-attention": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-components": "0.8.4-main.2c6827d",
-    "@dxos/lit-grid": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-form": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-editor": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-grid": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-searchlist": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-menu": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-types": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.2c6827d",
-    "@dxos/types": "0.8.4-main.2c6827d",
-    "@dxos/schema": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-stack": "0.8.4-main.2c6827d",
-    "@dxos/util": "0.8.4-main.2c6827d"
+    "@dxos/async": "0.8.4-main.3c1ae3b",
+    "@dxos/context": "0.8.4-main.3c1ae3b",
+    "@dxos/debug": "0.8.4-main.3c1ae3b",
+    "@dxos/echo": "0.8.4-main.3c1ae3b",
+    "@dxos/echo-db": "0.8.4-main.3c1ae3b",
+    "@dxos/effect": "0.8.4-main.3c1ae3b",
+    "@dxos/invariant": "0.8.4-main.3c1ae3b",
+    "@dxos/keys": "0.8.4-main.3c1ae3b",
+    "@dxos/lit-grid": "0.8.4-main.3c1ae3b",
+    "@dxos/log": "0.8.4-main.3c1ae3b",
+    "@dxos/live-object": "0.8.4-main.3c1ae3b",
+    "@dxos/random": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-search": "0.8.4-main.3c1ae3b",
+    "@dxos/react-client": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-attention": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-components": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-editor": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-form": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-grid": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-menu": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-searchlist": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-stack": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-types": "0.8.4-main.3c1ae3b",
+    "@dxos/schema": "0.8.4-main.3c1ae3b",
+    "@dxos/types": "0.8.4-main.3c1ae3b",
+    "@dxos/util": "0.8.4-main.3c1ae3b"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.3.4",
@@ -104,14 +104,14 @@
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/echo-signals": "0.8.4-main.2c6827d",
-    "@dxos/lit-ui": "0.8.4-main.2c6827d",
-    "@dxos/random": "0.8.4-main.2c6827d",
-    "@dxos/plugin-search": "0.8.4-main.2c6827d",
-    "@dxos/react-ui": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-theme": "0.8.4-main.2c6827d",
-    "@dxos/test-utils": "0.8.4-main.2c6827d",
-    "@dxos/storybook-utils": "0.8.4-main.2c6827d"
+    "@dxos/echo-signals": "0.8.4-main.3c1ae3b",
+    "@dxos/lit-ui": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-search": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
+    "@dxos/random": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b",
+    "@dxos/storybook-utils": "0.8.4-main.3c1ae3b",
+    "@dxos/test-utils": "0.8.4-main.3c1ae3b"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.3.4",
@@ -119,8 +119,8 @@
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-theme": "0.8.4-main.2c6827d"
+    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/ColumnActionsMenu.tsx

@@ -9,7 +9,10 @@ import { DropdownMenu, useTranslation } from '@dxos/react-ui';
 import { type ModalController, type TableModel } from '../../model';
 import { translationKey } from '../../translations';
 
-type ColumnActionsMenuProps = { model: TableModel; modals: ModalController };
+export type ColumnActionsMenuProps = {
+  model: TableModel;
+  modals: ModalController;
+};
 
 export const ColumnActionsMenu = ({ model, modals }: ColumnActionsMenuProps) => {
   const { t } = useTranslation(translationKey);

package/src/components/Table/ColumnSettings.tsx

@@ -4,8 +4,7 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-// TODO(burdon): Remove dependency on echo-db.
-import { type SchemaRegistry } from '@dxos/echo-db';
+import { type SchemaRegistry } from '@dxos/echo';
 import { Popover } from '@dxos/react-ui';
 import { FieldEditor } from '@dxos/react-ui-form';
 import { type FieldType } from '@dxos/schema';
@@ -13,7 +12,7 @@ import { type FieldType } from '@dxos/schema';
 import { type ModalController, type TableModel } from '../../model';
 
 type ColumnSettingsProps = {
-  registry?: SchemaRegistry;
+  registry?: SchemaRegistry.SchemaRegistry;
   model?: TableModel;
   modals: ModalController;
   onNewColumn: () => void;

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

@@ -6,14 +6,13 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
-import { FormatEnum, type JsonSchemaType } from '@dxos/echo/internal';
+import { Format, type JsonSchemaType } from '@dxos/echo/internal';
 import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
 import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 import { type SchemaPropertyDefinition } from '@dxos/schema';
-import { Testing } from '@dxos/schema/testing';
+import { TestSchema } from '@dxos/schema/testing';
 
 import { type TableFeatures } from '../../model';
 import { translations } from '../../translations';
@@ -25,8 +24,8 @@ faker.seed(0);
 const useTestPropertiesAndObjects = () => {
   const properties = useMemo<SchemaPropertyDefinition[]>(
     () => [
-      { name: 'name', format: FormatEnum.String },
-      { name: 'age', format: FormatEnum.Number },
+      { name: 'name', format: Format.TypeFormat.String },
+      { name: 'age', format: Format.TypeFormat.Number },
     ],
     [],
   );
@@ -130,9 +129,8 @@ export const WithJsonSchema: StoryObj = {
 
 export const WithEchoSchema: StoryObj = {
   render: () => {
-    const client = useClient();
     const { space } = useClientProvider();
-    const schema = useSchema(client, space, Testing.Person.typename);
+    const schema = useSchema(space, TestSchema.Person.typename);
     const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
     if (!schema) {
       return <div>Loading schema...</div>;
@@ -142,13 +140,13 @@ export const WithEchoSchema: StoryObj = {
   },
   decorators: [
     withClientProvider({
-      types: [Testing.Person],
+      types: [TestSchema.Person],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            Obj.make(Testing.Person, {
+            Obj.make(TestSchema.Person, {
               name: faker.person.fullName(),
               email: faker.internet.email(),
             }),

package/src/components/Table/DynamicTable.tsx

@@ -2,12 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo, useRef } from 'react';
 
+import { type Type } from '@dxos/echo';
 import { type JsonSchemaType } from '@dxos/echo/internal';
 import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
+import { ProjectionModel } from '@dxos/schema';
 
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRowAction } from '../../model';
@@ -15,12 +16,12 @@ import { type TablePropertyDefinition, getBaseSchema, makeDynamicTable } from '.
 
 import { Table, type TableController } from './Table';
 
-type DynamicTableProps = ThemedClassName<{
+export type DynamicTableProps<T extends Type.Entity.Any = Type.Entity.Any> = ThemedClassName<{
+  schema?: T;
   name?: string; // TODO(burdon): Remove?
   rows: any[];
   properties?: TablePropertyDefinition[];
   jsonSchema?: JsonSchemaType;
-  schema?: Schema.Schema.AnyNoContext;
   features?: Partial<TableFeatures>;
   rowActions?: TableRowAction[];
   onRowClick?: (row: any) => void;
@@ -32,25 +33,25 @@ type DynamicTableProps = ThemedClassName<{
  */
 // TODO(burdon): Instead of creating component variants, create helpers/hooks that normalize the props.
 // TODO(burdon): Warning: Cannot update a component (`DynamicTable`) while rendering a different component (`DynamicTable`).
-export const DynamicTable = ({
+export const DynamicTable = <T extends Type.Entity.Any = Type.Entity.Any>({
   classNames,
+  schema,
   name = 'example.com/dynamic-table', // Rmove default or make random; this will lead to type collisions.
   rows,
   properties,
   jsonSchema: _jsonSchema,
-  schema,
   rowActions,
   onRowClick,
   onRowAction,
   ...props
-}: DynamicTableProps) => {
+}: DynamicTableProps<T>) => {
   // TODO(burdon): Remove variance from the props (should be normalized externally; possibly via hooks).
   const { jsonSchema } = useMemo(
     () => getBaseSchema({ typename: name, properties, jsonSchema: _jsonSchema, schema }),
     [name, properties, _jsonSchema, schema],
   );
 
-  const { projection, view } = useMemo(() => makeDynamicTable({ jsonSchema, properties }), [jsonSchema, properties]);
+  const { object, projection } = useMemo(() => makeDynamicTable({ jsonSchema, properties }), [jsonSchema, properties]);
 
   const tableRef = useRef<TableController>(null);
   const handleCellUpdate = useCallback((cell: any) => {
@@ -70,11 +71,18 @@ export const DynamicTable = ({
       }) as const,
   );
 
+  const projectionModel = useMemo(() => {
+    if (jsonSchema && projection) {
+      const model = new ProjectionModel(jsonSchema, projection);
+      model.normalizeView();
+      return model;
+    }
+  }, [jsonSchema, projection]);
+
   const model = useTableModel({
     rows,
-    view,
-    schema: jsonSchema,
-    projection,
+    object,
+    projection: projectionModel,
     features,
     rowActions,
     onCellUpdate: handleCellUpdate,

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

@@ -8,7 +8,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
 import { Obj, Type } from '@dxos/echo';
-import { type JsonSchemaType } from '@dxos/echo/internal';
 import { type DxGrid } from '@dxos/lit-grid';
 import '@dxos/lit-ui/dx-tag-picker.pcss';
 import { faker } from '@dxos/random';
@@ -21,7 +20,7 @@ import { View } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { Organization, Person } from '@dxos/types';
 
-import { useTableModel } from '../../hooks';
+import { useProjectionModel, useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
 import { translations } from '../../translations';
 import { Table } from '../../types';
@@ -36,10 +35,8 @@ const generator: ValueGenerator = faker as any;
 // TODO(burdon): Reconcile schemas types and utils (see API PR).
 // TODO(burdon): Base type for T (with id); see ECHO API PR?
 const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
-  const client = useClient();
   const { space } = useClientProvider();
-  const [view, setView] = useState<View.View>();
-  const [jsonSchema, setJsonSchema] = useState<JsonSchemaType>();
+  const [object, setObject] = useState<Table.Table>();
 
   const features = useMemo<TableFeatures>(
     () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
@@ -51,18 +48,14 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
       return;
     }
 
-    const {
-      jsonSchema,
-      schema: effectSchema,
-      view,
-    } = await Table.makeView({ client, space, typename: Type.getTypename(schema) });
-    setJsonSchema(jsonSchema);
-    setView(view);
-    space.db.add(view);
-    await space.db.schemaRegistry.register([effectSchema]);
-  }, [client, space, schema]);
+    const { view, jsonSchema } = await View.makeFromSpace({ space, typename: Type.getTypename(schema) });
+    const object = Table.make({ view, jsonSchema });
+    setObject(object);
+    space.db.add(object);
+  }, [space, schema]);
 
-  const model = useTableModel<TableRow>({ view, schema: jsonSchema, rows: [], features });
+  const projection = useProjectionModel(schema, object);
+  const model = useTableModel<TableRow>({ object, projection, features });
 
   useEffect(() => {
     if (!model || !space) {
@@ -107,7 +100,6 @@ const DefaultStory = () => {
           schema={Organization.Organization}
           presentation={orgPresentation}
           onCreate={handleCreate}
-          client={client}
           ignoreAttention
           testId='relations-0'
         />
@@ -118,7 +110,6 @@ const DefaultStory = () => {
           schema={Person.Person}
           presentation={contactPresentation}
           onCreate={handleCreate}
-          client={client}
           ignoreAttention
           testId='relations-1'
         />

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

@@ -6,26 +6,18 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { Obj, type QueryAST, Type } from '@dxos/echo';
-import {
-  EchoObject,
-  FormatAnnotation,
-  FormatEnum,
-  GeneratorAnnotation,
-  LabelAnnotation,
-  PropertyMetaAnnotationId,
-} from '@dxos/echo/internal';
-import { live } from '@dxos/echo/internal';
+import { Annotation, Format, Obj, type QueryAST, Type } from '@dxos/echo';
+import { PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
-import { ViewEditor } from '@dxos/react-ui-form';
+import { ViewEditor, translations as formTranslations } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { View, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
-import { Testing, createObjectFactory } from '@dxos/schema/testing';
+import { TestSchema, createObjectFactory } from '@dxos/schema/testing';
 
 import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
@@ -34,13 +26,13 @@ import { TableToolbar } from '../TableToolbar';
 
 import { Table as TableComponent } from './Table';
 
-const TestSchema = Schema.Struct({
+const Example = Schema.Struct({
   // TODO(wittjosiah): Should be title. Currently name to work with default label.
   name: Schema.optional(Schema.String).annotations({ title: 'Title' }),
   urgent: Schema.optional(Schema.Boolean).annotations({ title: 'Urgent' }),
   status: Schema.optional(
     Schema.Literal('todo', 'in-progress', 'done')
-      .pipe(FormatAnnotation.set(FormatEnum.SingleSelect))
+      .pipe(Format.FormatAnnotation.set(Format.TypeFormat.SingleSelect))
       .annotations({
         title: 'Status',
         [PropertyMetaAnnotationId]: {
@@ -55,14 +47,14 @@ const TestSchema = Schema.Struct({
       }),
   ),
   description: Schema.optional(Schema.String).annotations({ title: 'Description' }),
-  parent: Schema.optional(Schema.suspend((): Type.Ref<TestSchema> => Type.Ref(TestSchema))).annotations({
+  parent: Schema.optional(Schema.suspend((): Type.Ref<Example> => Type.Ref(Example))).annotations({
     title: 'Parent',
   }),
 }).pipe(
   Type.Obj({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }),
-  LabelAnnotation.set(['name']),
+  Annotation.LabelAnnotation.set(['name']),
 );
-interface TestSchema extends Schema.Schema.Type<typeof TestSchema> {}
+interface Example extends Schema.Schema.Type<typeof Example> {}
 
 const StoryViewEditor = ({
   view,
@@ -106,20 +98,10 @@ const StoryViewEditor = ({
 //
 
 const DefaultStory = () => {
-  const {
-    space,
-    schema,
-    view,
-    tableRef,
-    model,
-    presentation,
-    client,
-    handleInsertRow,
-    handleSaveView,
-    handleDeleteColumn,
-  } = useTestTableModel();
+  const { space, schema, table, tableRef, model, presentation, handleInsertRow, handleSaveView, handleDeleteColumn } =
+    useTestTableModel();
 
-  if (!schema || !view) {
+  if (!schema || !table?.view.target) {
     return <div />;
   }
 
@@ -130,18 +112,22 @@ const DefaultStory = () => {
         <TableComponent.Root>
           <TableComponent.Main
             ref={tableRef}
+            schema={schema}
             model={model}
             presentation={presentation}
-            schema={schema}
-            client={client}
             ignoreAttention
           />
         </TableComponent.Root>
       </div>
       <div className='flex flex-col bs-full border-l border-separator overflow-y-auto'>
-        <StoryViewEditor view={view} schema={schema} space={space} handleDeleteColumn={handleDeleteColumn} />
+        <StoryViewEditor
+          view={table.view.target}
+          schema={schema}
+          space={space}
+          handleDeleteColumn={handleDeleteColumn}
+        />
         <SyntaxHighlighter language='json' className='text-xs'>
-          {JSON.stringify({ view, schema }, null, 2)}
+          {JSON.stringify({ view: table.view.target, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
     </div>
@@ -165,15 +151,16 @@ const meta = {
       types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onCreateSpace: async ({ client, space }) => {
-        const [schema] = await space.db.schemaRegistry.register([TestSchema]);
-        const { view } = await Table.makeView({ client, space, typename: schema.typename });
+      onCreateSpace: async ({ space }) => {
+        const [schema] = await space.db.schemaRegistry.register([Example]);
+        const { view, jsonSchema } = await View.makeFromSpace({ space, typename: schema.typename });
+        const table = Table.make({ view, jsonSchema });
         view.projection.fields = [
           view.projection.fields.find((field: any) => field.path === 'name')!,
           ...view.projection.fields.filter((field: any) => field.path !== 'name'),
         ];
 
-        space.db.add(view);
+        space.db.add(table);
 
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
@@ -192,7 +179,7 @@ const meta = {
     controls: {
       disable: true,
     },
-    translations,
+    translations: [...translations, ...formTranslations],
   },
 } satisfies Meta<typeof TableComponent>;
 
@@ -209,26 +196,27 @@ export const StaticSchema: StoryObj = {
       types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onCreateSpace: async ({ client, space }) => {
-        const { view } = await Table.makeView({ client, space, typename: Testing.Person.typename });
-        space.db.add(view);
+      onCreateSpace: async ({ space }) => {
+        const { view, jsonSchema } = await View.makeFromSpace({ space, typename: TestSchema.Person.typename });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          { type: Testing.Person, count: 10 },
-          // { type: Testing.Organization, count: 1 },
+          { type: TestSchema.Person, count: 10 },
+          // { type: TestSchema.Organization, count: 1 },
         ]);
       },
     }),
   ],
   parameters: {
     layout: 'fullscreen',
-    translations,
+    translations: [...translations, ...formTranslations],
   },
 };
 
 const ContactWithArrayOfEmails = Schema.Struct({
-  name: Schema.String.pipe(GeneratorAnnotation.set('person.fullName')),
+  name: Schema.String.pipe(Annotation.GeneratorAnnotation.set('person.fullName')),
   emails: Schema.optional(
     Schema.Array(
       Schema.Struct({
@@ -238,7 +226,7 @@ const ContactWithArrayOfEmails = Schema.Struct({
     ),
   ),
 }).pipe(
-  EchoObject({
+  Type.Obj({
     typename: 'dxos.org/type/ContactWithArrayOfEmails',
     version: '0.1.0',
   }),
@@ -248,17 +236,21 @@ export const ArrayOfObjects: StoryObj = {
   render: DefaultStory,
   decorators: [
     withClientProvider({
-      types: [View.View, Table.Table, Testing.Person, Testing.Organization, ContactWithArrayOfEmails],
+      types: [View.View, Table.Table, TestSchema.Person, TestSchema.Organization, ContactWithArrayOfEmails],
       createIdentity: true,
       createSpace: true,
-      onCreateSpace: async ({ client, space }) => {
-        const { view } = await Table.makeView({ client, space, typename: ContactWithArrayOfEmails.typename });
-        space.db.add(view);
+      onCreateSpace: async ({ space }) => {
+        const { view, jsonSchema } = await View.makeFromSpace({
+          space,
+          typename: ContactWithArrayOfEmails.typename,
+        });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          // { type: Testing.Person, count: 10 },
-          // { type: Testing.Organization, count: 1 },
+          // { type: TestSchema.Person, count: 10 },
+          // { type: TestSchema.Organization, count: 1 },
           { type: ContactWithArrayOfEmails, count: 10 },
         ]);
       },
@@ -278,7 +270,7 @@ export const Tags: Meta<StoryProps> = {
       types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onCreateSpace: async ({ client, space }) => {
+      onCreateSpace: async ({ space }) => {
         // Configure schema.
         const typename = 'example.com/SingleSelect';
         const selectOptions = [
@@ -294,25 +286,26 @@ export const Tags: Meta<StoryProps> = {
         const schema = getSchemaFromPropertyDefinitions(typename, [
           {
             name: 'single',
-            format: FormatEnum.SingleSelect,
+            format: Format.TypeFormat.SingleSelect,
             config: { options: selectOptions },
           },
           {
             name: 'multiple',
-            format: FormatEnum.MultiSelect,
+            format: Format.TypeFormat.MultiSelect,
             config: { options: selectOptions },
           },
         ]);
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const { view } = await Table.makeView({ client, space, typename });
-        space.db.add(view);
+        const { view, jsonSchema } = await View.makeFromSpace({ space, typename });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
 
         // Populate.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            live(storedSchema, {
+            Obj.make(storedSchema, {
               single: faker.helpers.arrayElement([...selectOptionIds, undefined]),
               multiple: faker.helpers.randomSubset(selectOptionIds),
             }),