@dxos/react-ui-form 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

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

@@ -2,19 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useState, useRef } from 'react';
+import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 
 import { type SelectOption } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
-import { type ChromaticPalette, Icon, IconButton, Input, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
+import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, mx } from '@dxos/react-ui-theme';
+import { hues, subtleHover } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
 
-// TODO(ZaymonFC): Handle disabled.
 export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
   const [selected, setSelectedId] = useState<string | null>(null);
   const [isNewOption, setIsNewOption] = useState(false);
@@ -115,7 +114,12 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
       <InputHeader error={error} label={label} />
       <div role='none'>
         {options && (
-          <List.Root items={options} isItem={(item) => true} onMove={handleMove}>
+          <List.Root
+            items={options}
+            isItem={(item) => true}
+            onMove={disabled ? undefined : handleMove}
+            readonly={disabled}
+          >
             {({ items }) => (
               <div role='list' className='w-full overflow-auto'>
                 {items?.map((item) => (
@@ -123,26 +127,30 @@ 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={[subtleHover, 'flex flex-col cursor-pointer rounded-sm']}
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
-                        <List.ItemDragHandle />
+                        <List.ItemDragHandle disabled={disabled} />
                         <List.ItemTitle onClick={() => handleClick(item.id)} classNames='flex-1'>
                           {/* TODO(ZaymonFC): Move spacer into Tag component. */}
                           <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
                         </List.ItemTitle>
-                        <Icon
+                        <IconButton
+                          iconOnly
+                          variant='ghost'
+                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: 'os' })}
                           icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleClick(item.id)}
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='mis-4 mbs-2 flex flex-col gap-1'>
+                        <div className='pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine'>
                           {/* 16px to match drag handle width. */}
                           <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='flex flex-row items-center gap-1'>
+                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
                             <Input.TextInput
+                              disabled={disabled}
                               placeholder={t('select option label placeholder')}
                               ref={selected === item.id ? inputRef : undefined}
                               value={item.title}
@@ -151,14 +159,9 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                               classNames='flex-1'
                               data-no-submit
                             />
-                            <Toolbar.Root classNames='p-0 m-0 !is-auto'>
-                              <HuePicker
-                                value={item.color}
-                                onChange={handleColorChange(item.id)}
-                                rootVariant='toolbar-button'
-                              />
-                            </Toolbar.Root>
+                            <HuePicker disabled={disabled} value={item.color} onChange={handleColorChange(item.id)} />
                             <IconButton
+                              disabled={disabled}
                               icon='ph--trash--fill'
                               iconOnly
                               label={t('select option delete')}
@@ -170,18 +173,14 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     </List.Item>
                   </div>
                 ))}
-                <div role='listitem'>
-                  <div
-                    role='button'
-                    className={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
-                    onClick={handleAdd}
-                  >
-                    <div className='flex items-center gap-1'>
-                      <Icon icon='ph--plus--regular' />
-                      <span className='text-sm'>{t('select option add')}</span>
-                    </div>
-                  </div>
-                </div>
+                <IconButton
+                  variant='ghost'
+                  icon='ph--plus--regular'
+                  label={t('select option add')}
+                  onClick={handleAdd}
+                  disabled={disabled}
+                  classNames='is-full'
+                />
               </div>
             )}
           </List.Root>

package/src/components/Form/factory.tsx

@@ -5,9 +5,9 @@
 import { FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
+import { GeoPointInput } from './custom';
 import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
-import { GeoPointInput } from './custom';
 
 /**
  * Get property input component.

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

@@ -6,24 +6,26 @@ import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
+import { Obj, Type } from '@dxos/echo';
+import { type EchoSchema, Format, TypedObject, toJsonSchema } 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 { withTheme, withLayout } from '@dxos/storybook-utils';
+import { DataType, ProjectionModel, createView } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 import { translations } from '../../translations';
 import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
+import { ViewEditor, type ViewEditorProps } from './ViewEditor';
+
 // 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 +33,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 +44,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 +58,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

@@ -3,15 +3,16 @@
 //
 
 import { composeStories } from '@storybook/react';
-import { screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, screen, 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 { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
-import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 
@@ -19,8 +20,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 +42,7 @@ describe('ViewEditor', () => {
   test('renders view editor', async () => {
     await Default.run();
     await waitForViewEditor();
-    expect(screen.getByText('View')).toBeInTheDocument();
+    expect(screen.getByText('Record type')).toBeInTheDocument();
   });
 
   test('change property name', async () => {
@@ -73,7 +74,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 +121,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');
 
@@ -138,7 +141,7 @@ describe('ViewEditor', () => {
     // Find the delete button for the 'name' property.
     const nameProperty = screen.getByText('name');
     const propertyRow = nameProperty.closest('[role="listitem"]');
-    const deleteButton = propertyRow?.querySelector('button:last-child');
+    const deleteButton = propertyRow?.querySelector('[data-testid="field.delete"]');
 
     if (!deleteButton) {
       throw new Error('Delete button not found');
@@ -161,7 +164,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 +190,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

@@ -11,21 +11,19 @@ import { invariant } from '@dxos/invariant';
 import { Callout, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 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 { inputTextLabel, mx, subtleHover } from '@dxos/react-ui-theme';
+import { type DataType, FieldSchema, type FieldType, ProjectionModel, VIEW_FIELD_LIMIT } from '@dxos/schema';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
 import { Form, type FormProps } from '../Form';
 
-const grid = 'grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]';
+const listGrid = 'grid grid-cols-[min-content_1fr_min-content_min-content_min-content]';
+const listItemGrid = 'grid grid-cols-subgrid col-span-5';
 
 const ViewMetaSchema = Schema.Struct({
-  name: Schema.String.annotations({
-    title: 'View',
-  }),
   typename: Format.URL.annotations({
-    title: 'Typename',
+    title: 'Record type',
   }),
 }).pipe(Schema.mutable);
 
@@ -34,7 +32,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,27 +59,23 @@ 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]);
-  const [field, setField] = useState<FieldType>();
+    return new ProjectionModel(jsonSchema, view.projection);
+  }, [schema, view.projection]);
+  const [expandedField, setExpandedField] = useState<FieldType['id']>();
   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(
+  const handleToggleField = useCallback(
     (field: FieldType) => {
-      if (readonly) {
-        return;
-      }
-      setField((f) => (f === field ? undefined : field));
+      setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
     },
     [readonly],
   );
@@ -91,56 +85,52 @@ export const ViewEditor = ({
   const handleAdd = useCallback(() => {
     invariant(!readonly);
     const field = projection.createFieldProjection();
-    setField(field);
-  }, [schema, view, readonly]);
+    setExpandedField(field.id);
+  }, [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(
     (fieldId: string) => {
       invariant(!readonly);
-      if (fieldId === field?.id) {
-        setField(undefined);
+      if (fieldId === expandedField) {
+        setExpandedField(undefined);
       }
 
       onDelete?.(fieldId);
     },
-    [schema, field, onDelete, readonly],
+    [expandedField, 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), []);
+  const handleClose = useCallback(() => setExpandedField(undefined), []);
 
   const hiddenProperties = projection.getHiddenProperties();
 
   const handleHide = useCallback(
     (fieldId: string) => {
-      setField(undefined);
+      setExpandedField(undefined);
       projection.hideFieldProjection(fieldId);
     },
     [projection],
@@ -148,7 +138,7 @@ export const ViewEditor = ({
 
   const handleShow = useCallback(
     (property: string) => {
-      setField(undefined);
+      setExpandedField(undefined);
       projection.showFieldProjection(property as JsonProp);
     },
     [projection],
@@ -157,11 +147,12 @@ export const ViewEditor = ({
   return (
     <div role='none' className={mx(classNames)}>
       {readonly && (
-        <div role='none' className={mx('is-full', outerSpacing && 'plb-cardSpacingBlock pli-cardSpacingInline')}>
-          <Callout.Root valence='info'>
-            <Callout.Title>{t('system schema description')}</Callout.Title>
-          </Callout.Root>
-        </div>
+        <Callout.Root
+          valence='info'
+          classNames={['is-full mlb-cardSpacingBlock', outerSpacing && 'mli-cardSpacingInline']}
+        >
+          <Callout.Title>{t('system schema description')}</Callout.Title>
+        </Callout.Root>
       )}
 
       {/* TODO(burdon): Is the form read-only or just the schema? */}
@@ -176,46 +167,65 @@ export const ViewEditor = ({
       />
 
       <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
-        <label className={mx(inputTextLabel)}>{t('fields label')}</label>
+        <h2 className={mx(inputTextLabel)}>{t('fields label')}</h2>
 
         <List.Root<FieldType>
-          items={view.fields}
+          items={view.projection.fields}
           isItem={Schema.is(FieldSchema)}
           getId={(field) => field.id}
-          readonly={readonly}
           onMove={readonly ? undefined : handleMove}
+          readonly={readonly}
         >
           {({ items: fields }) => (
             <>
-              {showHeading && (
-                <div role='heading' className={grid}>
-                  <div />
-                  <div className='flex items-center text-sm'>{t('field path label')}</div>
-                </div>
-              )}
+              {showHeading && <h3 className='text-sm'>{t('field path label')}</h3>}
 
-              <div role='list' className='flex flex-col is-full'>
+              <div role='list' className={listGrid}>
                 {fields?.map((field) => (
                   <List.Item<FieldType>
                     key={field.id}
                     item={field}
-                    classNames={mx(grid, ghostHover, 'overflow-hidden', !readonly && 'cursor-pointer')}
+                    classNames={listItemGrid}
+                    aria-expanded={expandedField === field.id}
                   >
-                    <List.ItemDragHandle />
-                    <List.ItemTitle onClick={() => handleSelect(field)}>{field.path}</List.ItemTitle>
-                    <List.ItemButton
-                      data-testid='hide-field-button'
-                      icon='ph--eye-slash--regular'
-                      // TDOO(burdon): Is this the correct test?
-                      disabled={view.fields.length <= 1}
-                      onClick={() => handleHide(field.id)}
-                    />
-                    {/* TODO(burdon): Remove unless implement undo. */}
-                    {!readonly && (
+                    <div role='none' className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}>
+                      <List.ItemDragHandle disabled={readonly} />
+                      <List.ItemTitle onClick={() => handleToggleField(field)}>{field.path}</List.ItemTitle>
+                      <List.ItemButton
+                        label={t('hide field label')}
+                        data-testid='hide-field-button'
+                        icon='ph--eye-slash--regular'
+                        autoHide={false}
+                        // TDOO(burdon): Is this the correct test?
+                        disabled={readonly || view.projection.fields.length <= 1}
+                        onClick={() => handleHide(field.id)}
+                      />
+                      {/* TODO(burdon): Remove unless implement undo. */}
                       <List.ItemDeleteButton
-                        disabled={view.fields.length <= 1}
+                        label={t('delete field label')}
+                        autoHide={false}
+                        disabled={readonly || view.projection.fields.length <= 1}
                         onClick={() => handleDelete(field.id)}
+                        data-testid='field.delete'
                       />
+                      <IconButton
+                        iconOnly
+                        variant='ghost'
+                        label={t('toggle expand label', { ns: 'os' })}
+                        icon={expandedField === field.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
+                        onClick={() => handleToggleField(field)}
+                      />
+                    </div>
+                    {expandedField === field.id && (
+                      <div role='none' className='col-span-5'>
+                        <FieldEditor
+                          readonly={readonly}
+                          projection={projection}
+                          field={field}
+                          registry={registry}
+                          onSave={handleClose}
+                        />
+                      </div>
                     )}
                   </List.Item>
                 ))}
@@ -226,7 +236,7 @@ export const ViewEditor = ({
 
         {hiddenProperties.length > 0 && (
           <>
-            <label className={mx(inputTextLabel)}>{t('hidden fields label')}</label>
+            <h2 className={mx(inputTextLabel)}>{t('hidden fields label')}</h2>
 
             <List.Root<string>
               items={hiddenProperties}
@@ -234,16 +244,17 @@ export const ViewEditor = ({
               getId={(property) => property}
             >
               {({ items: properties }) => (
-                <div role='list' className='flex flex-col is-full'>
+                <div role='list' className='grid grid-cols-[1fr_min-content]'>
                   {properties?.map((property) => (
                     <List.Item<string>
                       key={property}
                       item={property}
-                      classNames={mx(grid, ghostHover, !readonly && 'cursor-pointer')}
+                      classNames={mx('grid grid-cols-subgrid col-span-2 rounded-sm', subtleHover)}
                     >
-                      <List.ItemDragHandle disabled />
                       <List.ItemTitle>{property}</List.ItemTitle>
                       <List.ItemButton
+                        label={t('show field label')}
+                        disabled={readonly}
                         icon='ph--eye--regular'
                         onClick={() => handleShow(property)}
                         data-testid='show-field-button'
@@ -257,26 +268,15 @@ export const ViewEditor = ({
         )}
       </div>
 
-      {field && (
-        <FieldEditor
-          key={field.id}
-          view={view}
-          projection={projection}
-          field={field}
-          registry={registry}
-          onSave={handleClose}
-        />
-      )}
-
-      {!readonly && !field && (
+      {!readonly && !expandedField && (
         <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
           <IconButton
             icon='ph--plus--regular'
             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}
-            classNames='flex is-full'
+            disabled={view.projection.fields.length >= VIEW_FIELD_LIMIT}
+            classNames='is-full'
           />
         </div>
       )}

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

@@ -8,13 +8,14 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { live } from '@dxos/live-object';
-import { testData, TestSchema, testView, type TestType } from '@dxos/schema/testing';
+import { TestSchema, type TestType, testData, testView } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { DeprecatedForm, type DeprecatedFormProps } from './Form';
 import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
+import { DeprecatedForm, type DeprecatedFormProps } from './Form';
+
 const DefaultStory = (props: DeprecatedFormProps) => (
   <TestLayout json={{ props }}>
     <TestPanel>
@@ -40,14 +41,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 +56,7 @@ export const Empty: Story = {
 export const Readonly: Story = {
   args: {
     object: live(testData),
-    view: live(testView),
+    projection: live(testView).projection,
     schema: TestSchema,
     readonly: true,
   },