@dxos/react-ui-form 0.8.4-main.84f28bd → 0.8.4-main.c1de068

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.c1de068",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,48 +29,48 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.4-main.84f28bd",
-    "@dxos/debug": "0.8.4-main.84f28bd",
-    "@dxos/echo": "0.8.4-main.84f28bd",
-    "@dxos/echo-db": "0.8.4-main.84f28bd",
-    "@dxos/echo-schema": "0.8.4-main.84f28bd",
-    "@dxos/effect": "0.8.4-main.84f28bd",
-    "@dxos/invariant": "0.8.4-main.84f28bd",
-    "@dxos/keys": "0.8.4-main.84f28bd",
-    "@dxos/lit-ui": "0.8.4-main.84f28bd",
-    "@dxos/live-object": "0.8.4-main.84f28bd",
-    "@dxos/log": "0.8.4-main.84f28bd",
-    "@dxos/react-client": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-list": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-pickers": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-stack": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-tag-picker": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-types": "0.8.4-main.84f28bd",
-    "@dxos/schema": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@dxos/async": "0.8.4-main.c1de068",
+    "@dxos/debug": "0.8.4-main.c1de068",
+    "@dxos/echo": "0.8.4-main.c1de068",
+    "@dxos/echo-db": "0.8.4-main.c1de068",
+    "@dxos/echo-schema": "0.8.4-main.c1de068",
+    "@dxos/effect": "0.8.4-main.c1de068",
+    "@dxos/invariant": "0.8.4-main.c1de068",
+    "@dxos/keys": "0.8.4-main.c1de068",
+    "@dxos/live-object": "0.8.4-main.c1de068",
+    "@dxos/lit-ui": "0.8.4-main.c1de068",
+    "@dxos/log": "0.8.4-main.c1de068",
+    "@dxos/react-client": "0.8.4-main.c1de068",
+    "@dxos/react-ui-list": "0.8.4-main.c1de068",
+    "@dxos/react-ui-pickers": "0.8.4-main.c1de068",
+    "@dxos/react-ui-tag-picker": "0.8.4-main.c1de068",
+    "@dxos/react-ui-stack": "0.8.4-main.c1de068",
+    "@dxos/react-ui-types": "0.8.4-main.c1de068",
+    "@dxos/schema": "0.8.4-main.c1de068",
+    "@dxos/util": "0.8.4-main.c1de068"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.16.13",
+    "effect": "3.17.0",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.4-main.84f28bd",
-    "@dxos/random": "0.8.4-main.84f28bd",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
-    "@dxos/storybook-utils": "0.8.4-main.84f28bd"
+    "@dxos/echo-signals": "0.8.4-main.c1de068",
+    "@dxos/react-ui": "0.8.4-main.c1de068",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c1de068",
+    "@dxos/random": "0.8.4-main.c1de068",
+    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
+    "@dxos/storybook-utils": "0.8.4-main.c1de068"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "@dxos/react-ui": "0.8.4-main.c1de068",
+    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
   },
   "publishConfig": {
     "access": "public"

package/src/components/FieldEditor/FieldEditor.stories.tsx

@@ -9,7 +9,7 @@ import React, { useMemo, useEffect } from 'react';
 
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { log } from '@dxos/log';
-import { ViewProjection } from '@dxos/schema';
+import { ProjectionModel } from '@dxos/schema';
 import { TestSchema, testView } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -20,13 +20,12 @@ import { TestLayout, TestPanel, FIELD_EDITOR_DEBUG_SYMBOL } from '../testing';
 // Type definition for debug objects exposed to tests.
 export type FieldEditorDebugObjects = {
   props: FieldEditorProps;
-  projection: ViewProjection;
+  projection: ProjectionModel;
 };
 
 type StoryProps = FieldEditorProps;
 
 const DefaultStory = (props: FieldEditorProps) => {
-  const projection = useMemo(() => new ViewProjection(createEchoSchema(TestSchema).jsonSchema, testView), []);
   const handleComplete: FieldEditorProps['onSave'] = () => {
     log.info('onClose', { props });
   };
@@ -34,20 +33,23 @@ const DefaultStory = (props: FieldEditorProps) => {
   // Expose objects on window for test access.
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      (window as any)[FIELD_EDITOR_DEBUG_SYMBOL] = { props, projection } satisfies FieldEditorDebugObjects;
+      (window as any)[FIELD_EDITOR_DEBUG_SYMBOL] = {
+        props,
+        projection: props.projection,
+      } satisfies FieldEditorDebugObjects;
     }
-  }, [props, projection]);
+  }, [props, props.projection]);
 
   // NOTE(ZaymonFC): This looks awkward but it resolves an infinite parsing issue with sb.
   const json = useMemo(
-    () => JSON.parse(JSON.stringify({ props, projection })),
-    [JSON.stringify(props), JSON.stringify(projection)],
+    () => JSON.parse(JSON.stringify({ props, projection: props.projection })),
+    [JSON.stringify(props), JSON.stringify(props.projection)],
   );
 
   return (
     <TestLayout json={json}>
       <TestPanel>
-        <FieldEditor {...props} projection={projection} onSave={handleComplete} />
+        <FieldEditor {...props} onSave={handleComplete} />
       </TestPanel>
     </TestLayout>
   );
@@ -69,8 +71,8 @@ type Story = StoryObj<StoryProps>;
 
 export const Default: Story = {
   args: {
-    view: testView,
-    field: testView.fields[0],
+    projection: new ProjectionModel(createEchoSchema(TestSchema).jsonSchema, testView.projection),
+    field: testView.projection.fields[0],
   },
   parameters: { controls: { disabled: true } },
 };

package/src/components/FieldEditor/FieldEditor.test.tsx

@@ -6,7 +6,7 @@ import { composeStories } from '@storybook/react';
 import { screen, cleanup, fireEvent, act } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
-import { ViewProjection } from '@dxos/schema';
+import { ProjectionModel } from '@dxos/schema';
 
 import * as stories from './FieldEditor.stories';
 import { type FieldEditorDebugObjects } from './FieldEditor.stories';
@@ -14,14 +14,6 @@ import { FIELD_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 
-const getFieldEditorDebugObjects = (): FieldEditorDebugObjects => {
-  const debugObjects = (window as any)[FIELD_EDITOR_DEBUG_SYMBOL] as FieldEditorDebugObjects;
-  expect(debugObjects).toBeDefined();
-  expect(debugObjects.props).toBeInstanceOf(Object); // Props object
-  expect(debugObjects.projection).toBeInstanceOf(ViewProjection);
-  return debugObjects;
-};
-
 describe('FieldEditor', () => {
   afterEach(() => {
     cleanup();
@@ -33,7 +25,7 @@ describe('FieldEditor', () => {
     expect(screen.getByText('Type format')).toBeInTheDocument();
     expect(screen.getByText('String')).toBeInTheDocument();
 
-    // Verify the initial field shows as String type
+    // Verify the initial field shows as String type.
     expect(screen.getByText('String')).toBeInTheDocument();
 
     fireEvent.click(screen.getByRole('combobox'));
@@ -49,9 +41,17 @@ describe('FieldEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getFieldEditorDebugObjects();
 
-    const name = debugObjects.projection.schema.properties!.name;
+    const name = debugObjects.projection.baseSchema.properties!.name;
     expect(name.type).toBe('number');
     expect(name.format).toBe('number');
     expect(name.description).toBe('Full name.');
   });
 });
+
+const getFieldEditorDebugObjects = (): FieldEditorDebugObjects => {
+  const debugObjects = (window as any)[FIELD_EDITOR_DEBUG_SYMBOL] as FieldEditorDebugObjects;
+  expect(debugObjects).toBeDefined();
+  expect(debugObjects.props).toBeInstanceOf(Object); // Props object
+  expect(debugObjects.projection).toBeInstanceOf(ProjectionModel);
+  return debugObjects;
+};

package/src/components/FieldEditor/FieldEditor.tsx

@@ -14,8 +14,7 @@ import {
   sortProperties,
   type FieldType,
   type PropertyType,
-  type ViewType,
-  type ViewProjection,
+  type ProjectionModel,
   type SchemaProperty,
 } from '@dxos/schema';
 
@@ -23,8 +22,7 @@ import { translationKey } from '../../translations';
 import { Form, type FormProps, type InputComponent, SelectInput, SelectOptionInput } from '../Form';
 
 export type FieldEditorProps = {
-  view: ViewType;
-  projection: ViewProjection;
+  projection: ProjectionModel;
   field: FieldType;
   registry?: SchemaRegistry;
   onSave: () => void;
@@ -34,15 +32,7 @@ export type FieldEditorProps = {
 /**
  * Displays a Form representing the metadata for a given `Field` and `View`.
  */
-export const FieldEditor = ({
-  view,
-  projection,
-  field,
-  registry,
-  onSave,
-  onCancel,
-  outerSpacing,
-}: FieldEditorProps) => {
+export const FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing }: FieldEditorProps) => {
   const { t } = useTranslation(translationKey);
   const [props, setProps] = useState<PropertyType>(projection.getFieldProjection(field.id).props);
   useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
@@ -112,7 +102,7 @@ export const FieldEditor = ({
 
   const handleValidate = useCallback<NonNullable<FormProps<PropertyType>['onValidate']>>(
     ({ property }) => {
-      if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
+      if (property && projection.fields.find((f) => f.path === property && f.path !== field.path)) {
         return [
           {
             path: 'property',
@@ -121,7 +111,7 @@ export const FieldEditor = ({
         ];
       }
     },
-    [view.fields, field],
+    [projection.fields, field],
   );
 
   const handleSave = useCallback<NonNullable<FormProps<PropertyType>['onSave']>>(

package/src/components/Form/ArrayField.tsx

@@ -113,7 +113,7 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
       </div>
       {!readonly && (
         <IconButton
-          classNames='is-full mlb-1 flex'
+          classNames='is-full mlb-cardSpacingBlock flex'
           icon='ph--plus--regular'
           label={t('add field')}
           onClick={handleAdd}

package/src/components/Form/custom/SelectOptionsInput.tsx

@@ -123,7 +123,7 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
+                      classNames={['p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay']}
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -8,11 +8,12 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React, { useCallback, useMemo, useState, useEffect } from 'react';
 
+import { Obj, Type } from '@dxos/echo';
 import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
 import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { ViewProjection, ViewType, createView } from '@dxos/schema';
+import { DataType, ProjectionModel, createView } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
@@ -22,8 +23,8 @@ import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
   schema: EchoSchema;
-  view: ViewType;
-  projection: ViewProjection;
+  view: DataType.View;
+  projection: ProjectionModel;
 };
 
 type StoryProps = Pick<ViewEditorProps, 'readonly'>;
@@ -31,8 +32,8 @@ type StoryProps = Pick<ViewEditorProps, 'readonly'>;
 const DefaultStory = (props: StoryProps) => {
   const space = useSpace();
   const [schema, setSchema] = useState<EchoSchema>();
-  const [view, setView] = useState<ViewType>();
-  const [projection, setProjection] = useState<ViewProjection>();
+  const [view, setView] = useState<DataType.View>();
+  const [projection, setProjection] = useState<ProjectionModel>();
   useAsyncEffect(async () => {
     if (space) {
       class TestSchema extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
@@ -42,8 +43,13 @@ const DefaultStory = (props: StoryProps) => {
       }) {}
 
       const [schema] = await space.db.schemaRegistry.register([TestSchema]);
-      const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: toJsonSchema(TestSchema) });
-      const projection = new ViewProjection(schema.jsonSchema, view);
+      const view = createView({
+        name: 'Test',
+        typename: schema.typename,
+        jsonSchema: toJsonSchema(TestSchema),
+        presentation: Obj.make(Type.Expando, {}),
+      });
+      const projection = new ProjectionModel(schema.jsonSchema, view.projection);
 
       setSchema(schema);
       setView(view);
@@ -51,7 +57,7 @@ const DefaultStory = (props: StoryProps) => {
     }
   }, [space]);
 
-  const views = useQuery(space, Filter.type(ViewType));
+  const views = useQuery(space, Filter.type(DataType.View));
   const currentTypename = useMemo(() => view?.query?.typename, [view]);
   const updateViewTypename = useCallback(
     (newTypename: string) => {

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -6,8 +6,8 @@ import { composeStories } from '@storybook/react';
 import { screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
-import { EchoSchema } from '@dxos/echo-schema';
-import { ViewProjection, ViewType } from '@dxos/schema';
+import { EchoSchema, isInstanceOf } from '@dxos/echo-schema';
+import { DataType, ProjectionModel } from '@dxos/schema';
 
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
@@ -19,8 +19,8 @@ const getViewEditorDebugObjects = (): ViewEditorDebugObjects => {
   const debugObjects = (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] as ViewEditorDebugObjects;
   expect(debugObjects).toBeDefined();
   expect(debugObjects.schema).toBeInstanceOf(EchoSchema);
-  expect(debugObjects.view).toBeInstanceOf(ViewType);
-  expect(debugObjects.projection).toBeInstanceOf(ViewProjection);
+  expect(isInstanceOf(DataType.View, debugObjects.view)).toBeTruthy();
+  expect(debugObjects.projection).toBeInstanceOf(ProjectionModel);
   return debugObjects;
 };
 
@@ -41,7 +41,7 @@ describe('ViewEditor', () => {
   test('renders view editor', async () => {
     await Default.run();
     await waitForViewEditor();
-    expect(screen.getByText('View')).toBeInTheDocument();
+    expect(screen.getByText('Typename')).toBeInTheDocument();
   });
 
   test('change property name', async () => {
@@ -73,7 +73,7 @@ describe('ViewEditor', () => {
     expect(schemaProperties!.name).toBeUndefined();
 
     // Check view contains new_property field.
-    const newPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'new_property');
+    const newPropertyField = debugObjects.view.projection.fields.find((field: any) => field.path === 'new_property');
     expect(newPropertyField).toBeDefined();
     expect(newPropertyField!.path).toBe('new_property');
 
@@ -120,7 +120,9 @@ describe('ViewEditor', () => {
     expect(schemaProperties!.added_property).toBeDefined();
 
     // Check view contains added_property field.
-    const addedPropertyField = debugObjects.view.fields.find((field: any) => field.path === 'added_property');
+    const addedPropertyField = debugObjects.view.projection.fields.find(
+      (field: any) => field.path === 'added_property',
+    );
     expect(addedPropertyField).toBeDefined();
     expect(addedPropertyField!.path).toBe('added_property');
 
@@ -161,7 +163,7 @@ describe('ViewEditor', () => {
     expect(schemaProperties!.name).toBeUndefined();
 
     // Check view no longer contains the name field.
-    const nameField = debugObjects.view.fields.find((field: any) => field.path === 'name');
+    const nameField = debugObjects.view.projection.fields.find((field: any) => field.path === 'name');
     expect(nameField).toBeUndefined();
 
     // Check projection no longer contains the name property.
@@ -187,18 +189,18 @@ describe('ViewEditor', () => {
     const debugObjects = getViewEditorDebugObjects();
 
     // Check that hiddenFields is non-empty.
-    expect(debugObjects.view.hiddenFields).toBeDefined();
-    expect(debugObjects.view.hiddenFields!.length).toBeGreaterThan(0);
+    expect(debugObjects.view.projection.hiddenFields).toBeDefined();
+    expect(debugObjects.view.projection.hiddenFields!.length).toBeGreaterThan(0);
 
     // Click the show button
     fireEvent.click(screen.getByTestId('show-field-button'));
 
     // Wait for the data to update and check that hiddenFields is empty.
     await waitFor(() => {
-      expect(debugObjects.view.hiddenFields!.length).toBe(0);
+      expect(debugObjects.view.projection.hiddenFields!.length).toBe(0);
     });
 
     // Also verify that the field is back in the visible fields list.
-    expect(debugObjects.view.fields.length).toBeGreaterThan(0);
+    expect(debugObjects.view.projection.fields.length).toBeGreaterThan(0);
   });
 });

package/src/components/ViewEditor/ViewEditor.tsx

@@ -12,7 +12,7 @@ import { Callout, IconButton, type ThemedClassName, useTranslation } from '@dxos
 import { List } from '@dxos/react-ui-list';
 import { cardSpacing } from '@dxos/react-ui-stack';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
-import { FieldSchema, type FieldType, type ViewType, ViewProjection, VIEW_FIELD_LIMIT } from '@dxos/schema';
+import { FieldSchema, type FieldType, VIEW_FIELD_LIMIT, type DataType, ProjectionModel } from '@dxos/schema';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
@@ -21,9 +21,6 @@ import { Form, type FormProps } from '../Form';
 const grid = 'grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]';
 
 const ViewMetaSchema = Schema.Struct({
-  name: Schema.String.annotations({
-    title: 'View',
-  }),
   typename: Format.URL.annotations({
     title: 'Typename',
   }),
@@ -34,7 +31,7 @@ type ViewMetaType = Schema.Schema.Type<typeof ViewMetaSchema>;
 export type ViewEditorProps = ThemedClassName<
   {
     schema: Schema.Schema.AnyNoContext;
-    view: ViewType;
+    view: DataType.View;
     registry?: SchemaRegistry;
     readonly?: boolean;
     showHeading?: boolean;
@@ -61,20 +58,19 @@ export const ViewEditor = ({
   const projection = useMemo(() => {
     // Use reactive and mutable version of json schema when schema is mutable.
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-    return new ViewProjection(jsonSchema, view);
-  }, [schema, view]);
+    return new ProjectionModel(jsonSchema, view.projection);
+  }, [schema, view.projection]);
   const [field, setField] = useState<FieldType>();
   const readonly = _readonly || !isMutable(schema);
 
   // TODO(burdon): Should be reactive.
   const viewValues = useMemo(() => {
     return {
-      name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
       // TODO(burdon): Settings should have domain name owned by user.
       typename: view.query.typename,
     };
-  }, [view]);
+  }, [view.query.typename]);
 
   const handleSelect = useCallback(
     (field: FieldType) => {
@@ -92,22 +88,18 @@ export const ViewEditor = ({
     invariant(!readonly);
     const field = projection.createFieldProjection();
     setField(field);
-  }, [schema, view, readonly]);
+  }, [schema, projection, readonly]);
 
   const handleUpdate = useCallback(
-    ({ name, typename }: ViewMetaType) => {
+    ({ typename }: ViewMetaType) => {
       invariant(!readonly);
       requestAnimationFrame(() => {
-        if (view.name !== name) {
-          view.name = name;
-        }
-
         if (view.query.typename !== typename && !readonly) {
           onTypenameChanged?.(typename);
         }
       });
     },
-    [schema, view, onTypenameChanged, readonly],
+    [view.query.typename, onTypenameChanged, readonly],
   );
 
   const handleDelete = useCallback(
@@ -119,19 +111,19 @@ export const ViewEditor = ({
 
       onDelete?.(fieldId);
     },
-    [schema, field, onDelete, readonly],
+    [field, onDelete, readonly],
   );
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       invariant(!readonly);
       // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
-      const fields = [...view.fields];
+      const fields = [...view.projection.fields];
       const [moved] = fields.splice(fromIndex, 1);
       fields.splice(toIndex, 0, moved);
-      view.fields = fields;
+      view.projection.fields = fields;
     },
-    [schema, view.fields, readonly],
+    [view.projection.fields, readonly],
   );
 
   const handleClose = useCallback(() => setField(undefined), []);
@@ -179,7 +171,7 @@ export const ViewEditor = ({
         <label className={mx(inputTextLabel)}>{t('fields label')}</label>
 
         <List.Root<FieldType>
-          items={view.fields}
+          items={view.projection.fields}
           isItem={Schema.is(FieldSchema)}
           getId={(field) => field.id}
           readonly={readonly}
@@ -207,13 +199,13 @@ export const ViewEditor = ({
                       data-testid='hide-field-button'
                       icon='ph--eye-slash--regular'
                       // TDOO(burdon): Is this the correct test?
-                      disabled={view.fields.length <= 1}
+                      disabled={view.projection.fields.length <= 1}
                       onClick={() => handleHide(field.id)}
                     />
                     {/* TODO(burdon): Remove unless implement undo. */}
                     {!readonly && (
                       <List.ItemDeleteButton
-                        disabled={view.fields.length <= 1}
+                        disabled={view.projection.fields.length <= 1}
                         onClick={() => handleDelete(field.id)}
                       />
                     )}
@@ -258,14 +250,7 @@ export const ViewEditor = ({
       </div>
 
       {field && (
-        <FieldEditor
-          key={field.id}
-          view={view}
-          projection={projection}
-          field={field}
-          registry={registry}
-          onSave={handleClose}
-        />
+        <FieldEditor key={field.id} projection={projection} field={field} registry={registry} onSave={handleClose} />
       )}
 
       {!readonly && !field && (
@@ -275,7 +260,7 @@ export const ViewEditor = ({
             label={t('button add property')}
             onClick={readonly ? undefined : handleAdd}
             // TODO(burdon): Show field limit in ux (not tooltip).
-            disabled={view.fields.length >= VIEW_FIELD_LIMIT}
+            disabled={view.projection.fields.length >= VIEW_FIELD_LIMIT}
             classNames='flex is-full'
           />
         </div>

package/src/components/deprecated/Form.stories.tsx

@@ -40,14 +40,14 @@ type Story = StoryObj<DeprecatedFormProps<TestType>>;
 export const Default: Story = {
   args: {
     object: live(testData),
-    view: live(testView),
+    projection: live(testView).projection,
     schema: TestSchema,
   },
 };
 
 export const Empty: Story = {
   args: {
-    view: live(testView),
+    projection: live(testView).projection,
     schema: TestSchema,
   },
 };
@@ -55,7 +55,7 @@ export const Empty: Story = {
 export const Readonly: Story = {
   args: {
     object: live(testData),
-    view: live(testView),
+    projection: live(testView).projection,
     schema: TestSchema,
     readonly: true,
   },

package/src/components/deprecated/Form.tsx

@@ -8,10 +8,10 @@ import React, { useState } from 'react';
 import { findProperty } from '@dxos/effect';
 import { Input, type ThemedClassName, type TextInputProps as NativeTextInputProps } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { type ViewType, getFieldValue, setFieldValue } from '@dxos/schema';
+import { getFieldValue, setFieldValue, type Projection } from '@dxos/schema';
 
 export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
-  view: ViewType;
+  projection: Projection;
   object: T;
   schema?: Schema.Schema<T>;
   readonly?: boolean;
@@ -22,14 +22,14 @@ export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
  */
 export const DeprecatedForm = <T extends {} = {}>({
   classNames,
-  view,
+  projection,
   object,
   schema,
   readonly,
 }: DeprecatedFormProps<T>) => {
   return (
     <div role='none' className={mx('flex flex-col w-full gap-2 p-2', classNames)}>
-      {view.fields.map((field) => {
+      {projection.fields.map((field) => {
         const prop = schema && findProperty(schema, field.path);
         const title = (prop && pipe(SchemaAST.getTitleAnnotation(prop), Option.getOrUndefined)) ?? '';
         const description = (prop && pipe(SchemaAST.getDescriptionAnnotation(prop), Option.getOrUndefined)) ?? title;