@dxos/react-ui-table 0.8.4-main.72ec0f3 → 0.8.4-main.7ace549

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.4-main.72ec0f3",
+  "version": "0.8.4-main.7ace549",
   "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.72ec0f3",
-    "@dxos/debug": "0.8.4-main.72ec0f3",
-    "@dxos/echo": "0.8.4-main.72ec0f3",
-    "@dxos/effect": "0.8.4-main.72ec0f3",
-    "@dxos/invariant": "0.8.4-main.72ec0f3",
-    "@dxos/lit-grid": "0.8.4-main.72ec0f3",
-    "@dxos/echo-db": "0.8.4-main.72ec0f3",
-    "@dxos/keys": "0.8.4-main.72ec0f3",
-    "@dxos/live-object": "0.8.4-main.72ec0f3",
-    "@dxos/log": "0.8.4-main.72ec0f3",
-    "@dxos/plugin-search": "0.8.4-main.72ec0f3",
-    "@dxos/react-client": "0.8.4-main.72ec0f3",
-    "@dxos/random": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-attention": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-components": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-editor": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-form": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-grid": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-menu": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-searchlist": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.72ec0f3",
-    "@dxos/context": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-types": "0.8.4-main.72ec0f3",
-    "@dxos/types": "0.8.4-main.72ec0f3",
-    "@dxos/util": "0.8.4-main.72ec0f3",
-    "@dxos/schema": "0.8.4-main.72ec0f3"
+    "@dxos/context": "0.8.4-main.7ace549",
+    "@dxos/async": "0.8.4-main.7ace549",
+    "@dxos/debug": "0.8.4-main.7ace549",
+    "@dxos/echo": "0.8.4-main.7ace549",
+    "@dxos/echo-db": "0.8.4-main.7ace549",
+    "@dxos/effect": "0.8.4-main.7ace549",
+    "@dxos/invariant": "0.8.4-main.7ace549",
+    "@dxos/keys": "0.8.4-main.7ace549",
+    "@dxos/live-object": "0.8.4-main.7ace549",
+    "@dxos/log": "0.8.4-main.7ace549",
+    "@dxos/lit-grid": "0.8.4-main.7ace549",
+    "@dxos/plugin-search": "0.8.4-main.7ace549",
+    "@dxos/random": "0.8.4-main.7ace549",
+    "@dxos/react-client": "0.8.4-main.7ace549",
+    "@dxos/react-ui-attention": "0.8.4-main.7ace549",
+    "@dxos/react-ui-components": "0.8.4-main.7ace549",
+    "@dxos/react-ui-editor": "0.8.4-main.7ace549",
+    "@dxos/react-ui-form": "0.8.4-main.7ace549",
+    "@dxos/react-ui-grid": "0.8.4-main.7ace549",
+    "@dxos/react-ui-menu": "0.8.4-main.7ace549",
+    "@dxos/react-ui-searchlist": "0.8.4-main.7ace549",
+    "@dxos/react-ui-stack": "0.8.4-main.7ace549",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.7ace549",
+    "@dxos/react-ui-types": "0.8.4-main.7ace549",
+    "@dxos/schema": "0.8.4-main.7ace549",
+    "@dxos/types": "0.8.4-main.7ace549",
+    "@dxos/util": "0.8.4-main.7ace549"
   },
   "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.72ec0f3",
-    "@dxos/lit-ui": "0.8.4-main.72ec0f3",
-    "@dxos/plugin-search": "0.8.4-main.72ec0f3",
-    "@dxos/random": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.72ec0f3",
-    "@dxos/test-utils": "0.8.4-main.72ec0f3",
-    "@dxos/storybook-utils": "0.8.4-main.72ec0f3"
+    "@dxos/lit-ui": "0.8.4-main.7ace549",
+    "@dxos/random": "0.8.4-main.7ace549",
+    "@dxos/plugin-search": "0.8.4-main.7ace549",
+    "@dxos/react-ui": "0.8.4-main.7ace549",
+    "@dxos/react-ui-theme": "0.8.4-main.7ace549",
+    "@dxos/storybook-utils": "0.8.4-main.7ace549",
+    "@dxos/test-utils": "0.8.4-main.7ace549",
+    "@dxos/echo-signals": "0.8.4-main.7ace549"
   },
   "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.72ec0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.72ec0f3"
+    "@dxos/react-ui": "0.8.4-main.7ace549",
+    "@dxos/react-ui-theme": "0.8.4-main.7ace549"
   },
   "publishConfig": {
     "access": "public"

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

@@ -6,14 +6,14 @@ 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 +25,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 },
     ],
     [],
   );
@@ -132,7 +132,7 @@ export const WithEchoSchema: StoryObj = {
   render: () => {
     const client = useClient();
     const { space } = useClientProvider();
-    const schema = useSchema(client, space, Testing.Person.typename);
+    const schema = useSchema(client, space, TestSchema.Person.typename);
     const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
     if (!schema) {
       return <div>Loading schema...</div>;
@@ -142,13 +142,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

@@ -8,6 +8,7 @@ import React, { useCallback, useMemo, useRef } from 'react';
 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';
@@ -50,7 +51,7 @@ export const DynamicTable = ({
     [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';
@@ -38,8 +37,7 @@ const generator: ValueGenerator = faker as any;
 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 +49,15 @@ 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]);
+    const { view, jsonSchema } = await View.makeFromSpace({ client, space, typename: Type.getTypename(schema) });
+    const object = Table.make({ view, jsonSchema });
+    setObject(object);
+    space.db.add(object);
+    await space.db.schemaRegistry.register([schema]);
   }, [client, 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) {

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,
@@ -109,7 +101,7 @@ const DefaultStory = () => {
   const {
     space,
     schema,
-    view,
+    table,
     tableRef,
     model,
     presentation,
@@ -119,7 +111,7 @@ const DefaultStory = () => {
     handleDeleteColumn,
   } = useTestTableModel();
 
-  if (!schema || !view) {
+  if (!schema || !table?.view.target) {
     return <div />;
   }
 
@@ -139,9 +131,14 @@ const DefaultStory = () => {
         </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>
@@ -166,14 +163,15 @@ const meta = {
       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 });
+        const [schema] = await space.db.schemaRegistry.register([Example]);
+        const { view, jsonSchema } = await View.makeFromSpace({ client, 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 +190,7 @@ const meta = {
     controls: {
       disable: true,
     },
-    translations,
+    translations: [...translations, ...formTranslations],
   },
 } satisfies Meta<typeof TableComponent>;
 
@@ -210,25 +208,26 @@ export const StaticSchema: StoryObj = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ client, space }) => {
-        const { view } = await Table.makeView({ client, space, typename: Testing.Person.typename });
-        space.db.add(view);
+        const { view, jsonSchema } = await View.makeFromSpace({ client, 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 +237,7 @@ const ContactWithArrayOfEmails = Schema.Struct({
     ),
   ),
 }).pipe(
-  EchoObject({
+  Type.Obj({
     typename: 'dxos.org/type/ContactWithArrayOfEmails',
     version: '0.1.0',
   }),
@@ -248,17 +247,22 @@ 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);
+        const { view, jsonSchema } = await View.makeFromSpace({
+          client,
+          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 },
         ]);
       },
@@ -294,25 +298,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({ client, 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),
             }),

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -6,7 +6,7 @@ import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Filter, Obj } from '@dxos/echo';
-import { FormatEnum, Ref, type TypeAnnotation, getValue } from '@dxos/echo/internal';
+import { Format, Ref, type TypeAnnotation, getValue } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { getSnapshot } from '@dxos/live-object';
 import { type Client } from '@dxos/react-client';
@@ -151,7 +151,7 @@ export const FormCellEditor = ({
   }, []);
 
   const refSchema = useMemo(() => {
-    if (fieldProjection.props.format === FormatEnum.Ref && fieldProjection.props.referenceSchema) {
+    if (fieldProjection.props.format === Format.TypeFormat.Ref && fieldProjection.props.referenceSchema) {
       const { schema: refSchema } = getSchema({
         typename: fieldProjection.props.referenceSchema,
       });

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

@@ -24,9 +24,9 @@ type StoryProps = {
 };
 
 const DefaultStory = ({ editing }: StoryProps) => {
-  const { model, view } = useTestTableModel();
+  const { model, table } = useTestTableModel();
 
-  if (!model || !view) {
+  if (!model || !table) {
     return <div />;
   }
 
@@ -50,8 +50,9 @@ const meta = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ client, space }) => {
-        const { view } = await Table.makeView({ client, space, typename: Task.Task.typename });
-        space.db.add(view);
+        const { view, jsonSchema } = await View.makeFromSpace({ client, space, typename: Task.Task.typename });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
             Obj.make(Task.Task, {

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -9,7 +9,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { debounce } from '@dxos/async';
 import type { Client } from '@dxos/client';
-import { FormatEnum, TypeEnum } from '@dxos/echo/internal';
+import { Format, TypeEnum } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
 import {
@@ -74,9 +74,9 @@ export const TableValueEditor = ({
 
   if (
     fieldProjection?.props.type === TypeEnum.Array ||
-    fieldProjection?.props.format === FormatEnum.SingleSelect ||
-    fieldProjection?.props.format === FormatEnum.Ref
-    // TODO(thure): Support `FormatEnum.MultiSelect`
+    fieldProjection?.props.format === Format.TypeFormat.SingleSelect ||
+    fieldProjection?.props.format === Format.TypeFormat.Ref
+    // TODO(thure): Support `Format.TypeFormat.MultiSelect`
   ) {
     return (
       <FormCellEditor

package/src/components/TableToolbar/TableToolbar.tsx

@@ -58,7 +58,7 @@ const createTableToolbarActions = ({
       const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
         type: 'add-row' as const,
         icon: 'ph--plus--regular',
-        label: ['add row', { ns: translationKey }],
+        label: ['add row label', { ns: translationKey }],
         testId: 'table.toolbar.add-row',
       });
       nodes.push(add);

package/src/components/testing.ts

@@ -5,13 +5,13 @@
 import * as Schema from 'effect/Schema';
 import { useEffect } from 'react';
 
-import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo/internal';
+import { Format } from '@dxos/echo';
+import { TypeEnum, TypedObject, setValue } from '@dxos/echo/internal';
 import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';
 
 export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  id: ObjectId,
   name: Schema.optional(Schema.String),
   age: Schema.optional(Schema.Number),
   active: Schema.optional(Schema.Boolean),
@@ -88,7 +88,7 @@ export const useSimulator = ({ items, projection, insertInterval, updateInterval
 
         if (format) {
           switch (format) {
-            case FormatEnum.Currency: {
+            case Format.TypeFormat.Currency: {
               item[path] = Math.floor(Math.random() * 1000);
               break;
             }

package/src/hooks/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './useTableModel';
 export * from './useAddRow';
+export * from './useProjectionModel';
+export * from './useTableModel';

package/src/hooks/useProjectionModel.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { Type } from '@dxos/echo';
+import { ProjectionModel } from '@dxos/schema';
+
+import { type Table } from '../types';
+
+export const useProjectionModel = <S extends Type.Entity.Any>(schema: S | undefined, table: Table.Table | undefined) =>
+  useMemo(() => {
+    if (schema && table?.view.target?.projection) {
+      const projection = new ProjectionModel(Type.toJsonSchema(schema), table.view.target.projection);
+      projection.normalizeView();
+      return projection;
+    }
+  }, [schema, table?.view.target?.projection]);