@dxos/react-ui-form 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/src/components/Settings/Settings.tsx

@@ -0,0 +1,230 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import {
+  Button,
+  type ButtonProps,
+  Input,
+  type Label,
+  ScrollArea,
+  type ThemedClassName,
+  toLocalizedString,
+  useTranslation,
+} from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { translationKey } from '../../translations';
+
+const SETTINGS_ROOT_NAME = 'Settings.Root';
+const SETTINGS_SECTION_NAME = 'Settings.Section';
+const SETTINGS_SECTION_HEADING_NAME = 'Settings.SectionHeading';
+const SETTINGS_GROUP_NAME = 'Settings.Group';
+const SETTINGS_GROUP_BUTTON_NAME = 'Settings.GroupButton';
+const SETTINGS_CONTAINER_NAME = 'Settings.Container';
+const SETTINGS_FRAME_NAME = 'Settings.Frame';
+const SETTINGS_FRAME_ITEM_NAME = 'Settings.FrameItem';
+const SETTINGS_ITEM_NAME = 'Settings.Item';
+const SETTINGS_ITEM_INPUT_NAME = 'Settings.ItemInput';
+
+const styles = {
+  title: 'pb-trim-md text-base-surface-text text-lg',
+  description: 'text-base text-description',
+  grid: 'grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg',
+};
+
+//
+// Root
+//
+
+type SettingsRootProps = PropsWithChildren;
+
+const SettingsRoot = ({ children }: SettingsRootProps) => {
+  return (
+    <ScrollArea.Root className='dx-document' orientation='vertical' margin>
+      <ScrollArea.Viewport classNames='p-trim-md'>{children}</ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+SettingsRoot.displayName = SETTINGS_ROOT_NAME;
+
+//
+// Section
+//
+
+type SettingsSectionProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsSection = ({ title, description, children }: SettingsSectionProps) => {
+  return (
+    <>
+      <SettingsSectionHeading title={title} description={description} />
+      <div className='w-full pt-trim-md space-y-trim-md'>{children}</div>
+    </>
+  );
+};
+
+SettingsSection.displayName = SETTINGS_SECTION_NAME;
+
+//
+// Section Heading
+//
+
+const SettingsSectionHeading = ({ title, description }: Omit<SettingsSectionProps, 'children'>) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <>
+      <h2 className='px-trim-md mt-trim-md mb-trim-md text-xl'>{toLocalizedString(title, t)}</h2>
+      {description && <p className='px-trim-md my-trim-md text-description'>{toLocalizedString(description, t)}</p>}
+    </>
+  );
+};
+
+SettingsSectionHeading.displayName = SETTINGS_SECTION_HEADING_NAME;
+
+//
+// Group Button
+//
+
+const SettingsGroupButton = ({ classNames, ...props }: ButtonProps) => {
+  return <Button {...props} classNames={['md:col-span-2', classNames]} />;
+};
+
+SettingsGroupButton.displayName = SETTINGS_GROUP_BUTTON_NAME;
+
+//
+// Group
+//
+
+type SettingsGroupProps = ThemedClassName<PropsWithChildren>;
+
+const SettingsGroup = ({ children, classNames }: SettingsGroupProps) => (
+  <div role='none' className={mx('group space-y-trim-md', classNames)}>
+    {children}
+  </div>
+);
+
+SettingsGroup.displayName = SETTINGS_GROUP_NAME;
+
+//
+// Frame
+//
+
+const SettingsFrame = ({ children }: SettingsGroupProps) => (
+  <div role='none' className='p-trim-md border border-separator rounded-md'>
+    {children}
+  </div>
+);
+
+SettingsFrame.displayName = SETTINGS_FRAME_NAME;
+
+//
+// Frame Item
+//
+
+const SettingsFrameItem = ({ title, description, children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <div role='group' className='min-w-0'>
+      <h3 className='text-lg mb-2'>{toLocalizedString(title, t)}</h3>
+      {description && <p className='my-trim-sm md:mb-0 text-description'>{toLocalizedString(description, t)}</p>}
+      {children}
+    </div>
+  );
+};
+
+SettingsFrameItem.displayName = SETTINGS_FRAME_ITEM_NAME;
+
+//
+// Container
+//
+
+const SettingsContainer = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => {
+  return (
+    <div
+      role='none'
+      className={mx([
+        'dx-document',
+        '*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md',
+        'border border-separator rounded-md',
+        classNames,
+      ])}
+    >
+      {children}
+    </div>
+  );
+};
+
+SettingsContainer.displayName = SETTINGS_CONTAINER_NAME;
+
+//
+// Item
+//
+
+type SettingsItemProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsItem = ({ title, description = '', children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <SettingsContainer classNames={styles.grid}>
+      <h3 className={mx(styles.title, 'md:col-span-2')}>{toLocalizedString(title, t)}</h3>
+      <p className={styles.description}>{toLocalizedString(description, t)}</p>
+      <div role='none' className='overflow-hidden text-end py-1'>
+        {children}
+      </div>
+    </SettingsContainer>
+  );
+};
+
+SettingsItem.displayName = SETTINGS_ITEM_NAME;
+
+//
+// Item Input
+//
+
+const SettingsItemInput = ({ title, description = '', children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <Input.Root>
+      <SettingsContainer classNames={styles.grid}>
+        <Input.Label classNames={mx(styles.title, 'md:col-span-2')}>{toLocalizedString(title, t)}</Input.Label>
+        <Input.DescriptionAndValidation>
+          <Input.Description classNames={styles.description}>{toLocalizedString(description, t)}</Input.Description>
+        </Input.DescriptionAndValidation>
+        <div role='none' className='text-end py-1'>
+          {children}
+        </div>
+      </SettingsContainer>
+    </Input.Root>
+  );
+};
+
+SettingsItemInput.displayName = SETTINGS_ITEM_INPUT_NAME;
+
+//
+// Settings
+//
+
+export const Settings = {
+  Root: SettingsRoot,
+  Section: SettingsSection,
+  SectionHeading: SettingsSectionHeading,
+  Group: SettingsGroup,
+  GroupButton: SettingsGroupButton,
+  Container: SettingsContainer,
+  Frame: SettingsFrame,
+  FrameItem: SettingsFrameItem,
+  Item: SettingsItem,
+  ItemInput: SettingsItemInput,
+};

package/src/components/{ControlSection → Settings}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ControlSection';
+export * from './Settings';

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

@@ -6,14 +6,15 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
+import { DXN, Filter, JsonSchema, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
+import { type View } from '@dxos/echo';
 import { type EchoSchema, Format, type Mutable } from '@dxos/echo/internal';
 import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { type ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
-import { Employer, Organization, Person, Project } from '@dxos/types';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { type ProjectionModel, ViewModel, getTypenameFromQuery } from '@dxos/schema';
+import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
 import { translations } from '../../translations';
 import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
@@ -24,7 +25,7 @@ const types = [
   // TODO(burdon): Get label from annotation.
   { value: Organization.Organization.typename, label: 'Organization' },
   { value: Person.Person.typename, label: 'Person' },
-  { value: Project.Project.typename, label: 'Project' },
+  { value: Pipeline.Pipeline.typename, label: 'Project' },
   { value: Employer.Employer.typename, label: 'Employer' },
 ];
 
@@ -53,7 +54,7 @@ const DefaultStory = (props: StoryProps) => {
         salary: Format.Currency(),
       }).pipe(
         Type.object({
-          typename: 'example.com/type/Test',
+          typename: 'com.example.type.test',
           version: '0.1.0',
         }),
       );
@@ -64,16 +65,16 @@ const DefaultStory = (props: StoryProps) => {
         completed: Schema.Boolean,
       }).pipe(
         Type.object({
-          typename: 'example.com/type/Alternate',
+          typename: 'com.example.type.alternate',
           version: '0.1.0',
         }),
       );
 
       const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
-      const view = View.make({
+      const view = ViewModel.make({
         name: 'Test',
         query: Query.select(Filter.type(TestSchema)),
-        jsonSchema: Type.toJsonSchema(TestSchema),
+        jsonSchema: JsonSchema.toJsonSchema(TestSchema),
       });
 
       setSchema(testSchema);
@@ -89,7 +90,7 @@ const DefaultStory = (props: StoryProps) => {
 
       if (props.mode === 'tag') {
         const queue = target && DXN.tryParse(target) ? target : undefined;
-        const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
+        const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);
         Obj.change(view, (v) => {
           v.query.ast = query.ast as Mutable<typeof query.ast>;
         });
@@ -100,7 +101,7 @@ const DefaultStory = (props: StoryProps) => {
           return;
         }
 
-        const newView = View.make({
+        const newView = ViewModel.make({
           query,
           jsonSchema: newSchema.jsonSchema,
         });
@@ -175,7 +176,8 @@ const meta = {
         space.db.add(Tag.make({ label: 'New' }));
       },
     }),
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
   ],
   parameters: {
     layout: 'fullscreen',

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

@@ -6,8 +6,9 @@ import { composeStories } from '@storybook/react';
 import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
+import { View } from '@dxos/echo';
 import { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
-import { ProjectionModel, View } from '@dxos/schema';
+import { ProjectionModel } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
@@ -89,14 +90,10 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Click the add property button.
+    // Click the add property button. The new field is auto-expanded by handleAdd.
     const addButton = screen.getByText('Add property');
     fireEvent.click(addButton);
 
-    // Open the last field.
-    const buttons = screen.getAllByTestId('field.toggle');
-    fireEvent.click(buttons.at(-1)!);
-
     // Fill out the property field.
     const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'added_property' } });

package/src/components/ViewEditor/ViewEditor.tsx

@@ -9,19 +9,18 @@ import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
 import React, { forwardRef, useCallback, useContext, useImperativeHandle, useMemo, useState } from 'react';
 
-import { Filter, Format, Obj, Query, QueryAST, type SchemaRegistry } from '@dxos/echo';
+import { Entity, Feed, Filter, Format, Obj, Query, QueryAST, Ref, type SchemaRegistry } from '@dxos/echo';
+import { View } from '@dxos/echo';
 import { EchoSchema, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
-import { useObject } from '@dxos/react-client/echo';
-import { Callout, IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { useObject, useQuery } from '@dxos/react-client/echo';
+import { IconButton, Input, Message, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
 import { List } from '@dxos/react-ui-list';
 import {
-  FieldSchema,
-  type FieldType,
+  ParentLabelAnnotation,
   ProjectionModel,
   VIEW_FIELD_LIMIT,
-  type View,
   createEchoChangeCallback,
   getTypenameFromQuery,
 } from '@dxos/schema';
@@ -35,22 +34,20 @@ import {
   type FormFieldComponentProps,
   FormFieldLabel,
   type FormFieldMap,
+  type FormRootProps,
 } from '../Form';
 
-const listGrid = 'grid grid-cols-[min-content_1fr_min-content_min-content_min-content]';
-const listItemGrid = 'grid grid-cols-subgrid col-span-5';
-
 export type ViewEditorProps = ThemedClassName<
   {
     schema: Schema.Schema.AnyNoContext;
     view: View.View;
     mode?: 'schema' | 'tag';
     registry?: SchemaRegistry.SchemaRegistry;
-    readonly?: boolean;
     showHeading?: boolean;
     onQueryChanged?: (query: QueryAST.Query, target?: string) => void;
     onDelete?: (fieldId: string) => void;
-  } & Pick<QueryFormProps, 'types' | 'tags'>
+  } & Pick<QueryFormProps, 'types' | 'tags'> &
+    Pick<FormRootProps<any>, 'readonly' | 'db'>
 >;
 
 /**
@@ -64,6 +61,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       view,
       mode = 'schema',
       registry,
+      db,
       readonly,
       showHeading = false,
       types,
@@ -96,18 +94,31 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     }, [atomRegistry, schema, view]);
 
     useImperativeHandle(forwardedRef, () => projectionModel, [projectionModel]);
-    const [expandedField, setExpandedField] = useState<FieldType['id']>();
 
     const queueTarget = Match.value(view.query.ast).pipe(
-      Match.when({ type: 'options' }, ({ options }) => {
-        return Option.fromNullable(options.queues).pipe(
+      Match.when({ type: 'from' }, ({ from }) => {
+        if (from._tag !== 'scope') {
+          return undefined;
+        }
+        return Option.fromNullable(from.scope.queues).pipe(
           Option.flatMap((queues) => Array.head(queues)),
+          Option.map(String),
           Option.getOrUndefined,
         );
       }),
       Match.orElse(() => undefined),
     );
 
+    const feeds = useQuery(db, Filter.type(Feed.Feed));
+
+    const targetRef = useMemo(() => {
+      if (!queueTarget) {
+        return undefined;
+      }
+      const feed = feeds.find((feed) => Feed.getQueueDxn(feed)?.toString() === queueTarget);
+      return feed ? Ref.fromDXN(Entity.getDXN(feed)) : undefined;
+    }, [queueTarget, feeds]);
+
     const viewSchema = useMemo(() => {
       const base = Schema.Struct({
         query:
@@ -119,7 +130,12 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       if (mode === 'tag') {
         return Schema.Struct({
           ...base.fields,
-          target: Schema.optional(Schema.String.annotations({ title: 'Target Queue' })),
+          // TODO(wittjosiah): Replace Type.Feed with Dataset.Dataset when Ref.Ref supports unions.
+          target: Ref.Ref(Feed.Feed).pipe(
+            Schema.annotations({ title: 'Target Feed' }),
+            ParentLabelAnnotation.set(true),
+            Schema.optional,
+          ),
         }).pipe(Schema.mutable);
       }
 
@@ -131,9 +147,9 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     const viewValues = useMemo(
       () => ({
         query: mode === 'schema' ? getTypenameFromQuery(view.query.ast) : view.query.ast,
-        target: queueTarget,
+        target: targetRef,
       }),
-      [mode, view.query.ast, queueTarget],
+      [mode, view.query.ast, targetRef],
     );
 
     const fieldMap = useMemo<FormFieldMap | undefined>(
@@ -141,46 +157,48 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       [mode, types, tags],
     );
 
-    // TODO(burdon): Check if mutable.
-    const handleAdd = useCallback(() => {
-      invariant(!readonly);
-      const field = projectionModel.createFieldProjection();
-      setExpandedField(field.id);
-    }, [projectionModel, readonly]);
-
     const handleUpdate = useCallback(
       (values: any) => {
-        requestAnimationFrame(() => {
-          const query = mode === 'schema' ? Query.select(Filter.typename(values.query)).ast : values.query;
-          onQueryChanged?.(query, values.target);
-        });
+        const targetValue = values.target;
+        let queueDxn: string | undefined;
+
+        if (Ref.isRef(targetValue)) {
+          const feedDxn = targetValue.dxn.toString();
+          const feed = feeds.find((feed) => Obj.getDXN(feed).toString() === feedDxn);
+          if (feed) {
+            queueDxn = Feed.getQueueDxn(feed)?.toString();
+          }
+        }
+
+        // TODO(wittjosiah): Deep-clone the AST to plain JS or ECHO proxy arrays become objects with numeric keys.
+        const query =
+          mode === 'schema'
+            ? Query.select(Filter.typename(values.query)).ast
+            : JSON.parse(JSON.stringify(values.query));
+        onQueryChanged?.(query, queueDxn);
       },
-      [onQueryChanged, view, queueTarget, mode],
+      [onQueryChanged, mode, feeds],
     );
 
     const handleDelete = useCallback(
       (fieldId: string) => {
         invariant(!readonly);
-        if (fieldId === expandedField) {
-          setExpandedField(undefined);
-        }
-
         onDelete?.(fieldId);
       },
-      [expandedField, onDelete, readonly],
+      [onDelete, readonly],
     );
 
     return (
       <div role='none' className={mx(classNames)}>
         {/* If readonly is set, then the callout is not needed. */}
         {schemaReadonly && !readonly && (
-          <Callout.Root valence='info' classNames='mlb-cardSpacingBlock'>
-            <Callout.Title>{t('system schema description')}</Callout.Title>
-          </Callout.Root>
+          <Message.Root valence='info' classNames='my-form-padding'>
+            <Message.Title>{t('system schema description')}</Message.Title>
+          </Message.Root>
         )}
 
         {/* TODO(burdon): Is the form read-only or just the schema? */}
-        <Form.Root schema={viewSchema} values={viewValues} fieldMap={fieldMap} autoSave onSave={handleUpdate}>
+        <Form.Root schema={viewSchema} values={viewValues} fieldMap={fieldMap} db={db} onValuesChanged={handleUpdate}>
           <Form.FieldSet />
 
           <FormFieldLabel label={t('fields label')} asChild />
@@ -193,19 +211,6 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
             onDelete={handleDelete}
           />
         </Form.Root>
-
-        {!readonly && !expandedField && (
-          <div role='none' className='mlb-cardSpacingBlock'>
-            <IconButton
-              icon='ph--plus--regular'
-              label={t('add property button label')}
-              onClick={readonly ? undefined : handleAdd}
-              // TODO(burdon): Show field limit in ux (not tooltip).
-              disabled={view.projection.fields.length >= VIEW_FIELD_LIMIT}
-              classNames='is-full'
-            />
-          </div>
-        )}
       </div>
     );
   },
@@ -239,10 +244,16 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
     return model;
   }, [atomRegistry, schema, view]);
 
-  const [expandedField, setExpandedField] = useState<FieldType['id']>();
+  const [expandedField, setExpandedField] = useState<View.FieldType['id']>();
+
+  const handleAdd = useCallback(() => {
+    invariant(!readonly);
+    const field = projectionModel.createFieldProjection();
+    setExpandedField(field.id);
+  }, [projectionModel, readonly]);
 
   const handleToggleField = useCallback(
-    (field: FieldType) => {
+    (field: View.FieldType) => {
       setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
     },
     [readonly],
@@ -297,9 +308,9 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
   }
 
   return (
-    <List.Root<FieldType>
-      items={viewSnapshot.projection.fields as FieldType[]}
-      isItem={Schema.is(FieldSchema)}
+    <List.Root<View.FieldType>
+      items={viewSnapshot.projection.fields as View.FieldType[]}
+      isItem={Schema.is(View.FieldSchema)}
       getId={(field) => field.id}
       onMove={readonly ? undefined : handleMove}
       readonly={readonly}
@@ -307,22 +318,29 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
       {({ items: fields }) => (
         <>
           {showHeading && <h3 className='text-sm'>{t('field path label')}</h3>}
-          <div role='list' className={listGrid}>
+          <div role='list' className='grid grid-cols-[min-content_1fr_min-content_min-content_min-content]'>
             {fields?.map((field) => {
               const hidden = field.visible === false;
               return (
-                <List.Item<FieldType>
+                <List.Item<View.FieldType>
                   key={field.id}
                   item={field}
-                  classNames={listItemGrid}
+                  classNames={'grid grid-cols-subgrid col-span-5'}
                   aria-expanded={expandedField === field.id}
                 >
-                  <div role='none' className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}>
+                  <div
+                    role='none'
+                    className={mx(
+                      subtleHover,
+                      'grid grid-cols-subgrid col-span-5',
+                      'rounded-xs cursor-pointer min-h-10',
+                    )}
+                  >
                     <List.ItemDragHandle disabled={readonly || schemaReadonly} />
                     <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
                       {field.path}
                     </List.ItemTitle>
-                    <List.ItemButton
+                    <List.ItemIconButton
                       label={t(hidden ? 'show field label' : 'hide field label')}
                       data-testid={hidden ? 'show-field-button' : 'hide-field-button'}
                       icon={hidden ? 'ph--eye-closed--regular' : 'ph--eye--regular'}
@@ -339,7 +357,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                           onClick={() => handleDelete(field.id)}
                           data-testid='field.delete'
                         />
-                        <IconButton
+                        <List.ItemIconButton
                           iconOnly
                           variant='ghost'
                           label={t('toggle expand label', { ns: osTranslations })}
@@ -351,7 +369,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                     )}
                   </div>
                   {expandedField === field.id && !readonly && (
-                    <div role='none' className='col-span-5 mbs-1 mbe-1 border border-separator rounded-md'>
+                    <div role='none' className='col-span-5 mt-1 mb-1 border border-separator rounded-md'>
                       <FieldEditor
                         readonly={readonly || schemaReadonly}
                         registry={registry}
@@ -365,6 +383,17 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
               );
             })}
           </div>
+          {!readonly && !expandedField && (
+            <div role='none' className='my-form-padding'>
+              <IconButton
+                icon='ph--plus--regular'
+                label={t('add property button label')}
+                onClick={handleAdd}
+                disabled={viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT}
+                classNames='w-full'
+              />
+            </div>
+          )}
         </>
       )}
     </List.Root>

package/src/components/index.ts

@@ -2,8 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';
 export * from './ObjectPicker';
+export * from './Settings';
 export * from './ViewEditor';