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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.72ec0f3",
+  "version": "0.8.4-main.7ace549",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -32,28 +32,28 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.4-main.72ec0f3",
-    "@dxos/debug": "0.8.4-main.72ec0f3",
-    "@dxos/echo": "0.8.4-main.72ec0f3",
-    "@dxos/echo-query": "0.8.4-main.72ec0f3",
-    "@dxos/effect": "0.8.4-main.72ec0f3",
-    "@dxos/echo-db": "0.8.4-main.72ec0f3",
-    "@dxos/keys": "0.8.4-main.72ec0f3",
-    "@dxos/invariant": "0.8.4-main.72ec0f3",
-    "@dxos/lit-ui": "0.8.4-main.72ec0f3",
-    "@dxos/live-object": "0.8.4-main.72ec0f3",
-    "@dxos/log": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-components": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-searchlist": "0.8.4-main.72ec0f3",
-    "@dxos/react-client": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-editor": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-types": "0.8.4-main.72ec0f3",
-    "@dxos/schema": "0.8.4-main.72ec0f3",
-    "@dxos/types": "0.8.4-main.72ec0f3",
-    "@dxos/util": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-list": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-pickers": "0.8.4-main.72ec0f3"
+    "@dxos/async": "0.8.4-main.7ace549",
+    "@dxos/debug": "0.8.4-main.7ace549",
+    "@dxos/effect": "0.8.4-main.7ace549",
+    "@dxos/echo": "0.8.4-main.7ace549",
+    "@dxos/invariant": "0.8.4-main.7ace549",
+    "@dxos/keys": "0.8.4-main.7ace549",
+    "@dxos/lit-ui": "0.8.4-main.7ace549",
+    "@dxos/echo-query": "0.8.4-main.7ace549",
+    "@dxos/live-object": "0.8.4-main.7ace549",
+    "@dxos/log": "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-client": "0.8.4-main.7ace549",
+    "@dxos/react-ui-list": "0.8.4-main.7ace549",
+    "@dxos/react-ui-pickers": "0.8.4-main.7ace549",
+    "@dxos/react-ui-searchlist": "0.8.4-main.7ace549",
+    "@dxos/react-ui-stack": "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",
+    "@dxos/react-ui-types": "0.8.4-main.7ace549",
+    "@dxos/echo-db": "0.8.4-main.7ace549"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
@@ -64,19 +64,19 @@
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.72ec0f3",
-    "@dxos/storybook-utils": "0.8.4-main.72ec0f3",
-    "@dxos/echo-signals": "0.8.4-main.72ec0f3"
+    "@dxos/echo-signals": "0.8.4-main.7ace549",
+    "@dxos/random": "0.8.4-main.7ace549",
+    "@dxos/react-ui": "0.8.4-main.7ace549",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.7ace549",
+    "@dxos/react-ui-theme": "0.8.4-main.7ace549",
+    "@dxos/storybook-utils": "0.8.4-main.7ace549"
   },
   "peerDependencies": {
     "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/FieldEditor/FieldEditor.stories.tsx

@@ -9,7 +9,7 @@ import { createEchoSchema } from '@dxos/echo/testing';
 import { log } from '@dxos/log';
 import { withTheme } from '@dxos/react-ui/testing';
 import { ProjectionModel } from '@dxos/schema';
-import { TestSchema, testView } from '@dxos/schema/testing';
+import { Example, testView } from '@dxos/schema/testing';
 
 import { translations } from '../../translations';
 import { FIELD_EDITOR_DEBUG_SYMBOL, TestLayout, TestPanel } from '../testing';
@@ -71,7 +71,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    projection: new ProjectionModel(createEchoSchema(TestSchema).jsonSchema, testView.projection),
+    projection: new ProjectionModel(createEchoSchema(Example).jsonSchema, testView.projection),
     field: testView.projection.fields[0],
   },
   parameters: { controls: { disabled: true } },

package/src/components/FieldEditor/FieldEditor.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type EchoSchema, FormatEnum, FormatEnums, formatToType } from '@dxos/echo/internal';
+import { type EchoSchema, Format, FormatEnums, formatToType } from '@dxos/echo/internal';
 import { type SchemaRegistry } from '@dxos/echo-db';
 import { log } from '@dxos/log';
 import { useAsyncEffect, useTranslation } from '@dxos/react-ui';
@@ -140,7 +140,7 @@ export const FieldEditor = ({
       ['format' satisfies keyof PropertyType]: (props) => (
         <SelectInput
           {...props}
-          options={FormatEnums.filter((value) => value !== FormatEnum.None).map((value) => ({
+          options={FormatEnums.filter((value) => value !== Format.TypeFormat.None).map((value) => ({
             value,
             label: t(`format ${value}`),
           }))}
@@ -159,7 +159,7 @@ export const FieldEditor = ({
           {...props}
           options={
             referenceSchema
-              ? getSchemaProperties(referenceSchema.ast)
+              ? getSchemaProperties(referenceSchema.ast, {}, { form: true })
                   .sort(sortProperties)
                   .map((p) => ({ value: p.name }))
               : []

package/src/components/Form/ArrayField.tsx

@@ -46,7 +46,9 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
       return {};
     }
 
-    return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [prop.name, prop.defaultValue]));
+    return Object.fromEntries(
+      getSchemaProperties(typeLiteral, {}, { form: true }).map((prop) => [prop.name, prop.defaultValue]),
+    );
   };
 
   const getDefaultValue = () =>

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

@@ -6,13 +6,11 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useState } from 'react';
 
-import { ContactType } from '@dxos/client/testing';
-import { type Type } from '@dxos/echo';
-import { type BaseObject, Expando, Format, Ref, type TypeAnnotation, getObjectDXN } from '@dxos/echo/internal';
-import { live } from '@dxos/echo/internal';
+import { Format, Obj, Ref, Type } from '@dxos/echo';
+import { type AnyProperties, type TypeAnnotation } from '@dxos/echo/internal';
 import { Tooltip } from '@dxos/react-ui';
 import { withLayoutVariants, withTheme } from '@dxos/react-ui/testing';
-import { Testing } from '@dxos/schema/testing';
+import { TestSchema } from '@dxos/schema/testing';
 
 import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
@@ -20,12 +18,12 @@ import { TestLayout, TestPanel } from '../testing';
 import { SelectInput } from './Defaults';
 import { Form, type FormProps } from './Form';
 
-type StoryProps<T extends BaseObject> = {
+type StoryProps<T extends AnyProperties> = {
   debug?: boolean;
-  schema: Type.Obj.Any;
+  schema: Schema.Schema.AnyNoContext;
 } & FormProps<T>;
 
-const DefaultStory = <T extends BaseObject = any>({
+const DefaultStory = <T extends AnyProperties = any>({
   debug,
   schema,
   values: initialValues,
@@ -51,13 +49,13 @@ const DefaultStory = <T extends BaseObject = any>({
   return <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />;
 };
 
-const RefStory = <T extends BaseObject = any>(props: StoryProps<T>) => {
+const RefStory = <T extends AnyProperties = any>(props: StoryProps<T>) => {
   const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
     switch (typeInfo.typename) {
-      case Testing.Person.typename:
+      case TestSchema.Person.typename:
         return [
-          { dxn: getObjectDXN(contact1)!, label: 'John Coltraine' },
-          { dxn: getObjectDXN(contact2)!, label: 'Erykah Badu' },
+          { dxn: Obj.getDXN(contact1), label: 'Alice' },
+          { dxn: Obj.getDXN(contact2), label: 'Bob' },
         ];
       default:
         return [];
@@ -122,7 +120,7 @@ export const Default: Story = {
 export const Organization: Story = {
   args: {
     debug: true,
-    schema: Testing.OrganizationSchema,
+    schema: TestSchema.OrganizationSchema,
     values: {
       name: 'DXOS',
       website: 'https://dxos.org',
@@ -134,7 +132,7 @@ export const Organization: Story = {
 export const OrganizationAutoSave: Story = {
   args: {
     debug: true,
-    schema: Testing.OrganizationSchema,
+    schema: TestSchema.OrganizationSchema,
     values: {
       name: 'DXOS',
       website: 'https://dxos.org',
@@ -150,7 +148,7 @@ export const OrganizationAutoSave: Story = {
 export const Person: Story = {
   args: {
     debug: true,
-    schema: Testing.Person,
+    schema: TestSchema.Person,
     values: {
       name: 'Bot',
     },
@@ -278,16 +276,18 @@ export const Enum: StoryObj<StoryProps<ColorType>> = {
 //
 
 const RefSchema = Schema.Struct({
-  contact: Ref(ContactType).annotations({ title: 'Contact Reference' }),
-  optionalContact: Schema.optional(Ref(ContactType).annotations({ title: 'Optional Contact Reference' })),
-  refArray: Schema.optional(Schema.Array(Ref(ContactType))),
-  unknownExpando: Schema.optional(Ref(Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' })),
+  contact: Type.Ref(TestSchema.Person).annotations({ title: 'Contact Reference' }),
+  optionalContact: Schema.optional(Type.Ref(TestSchema.Person).annotations({ title: 'Optional Contact Reference' })),
+  refArray: Schema.optional(Schema.Array(Type.Ref(TestSchema.Person))),
+  unknownExpando: Schema.optional(
+    Type.Ref(Type.Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' }),
+  ),
 });
 
 type RefSchema = Schema.Schema.Type<typeof RefSchema>;
 
-const contact1 = live(ContactType, { identifiers: [] });
-const contact2 = live(ContactType, { identifiers: [] });
+const contact1 = Obj.make(TestSchema.Person, { name: 'Alice' });
+const contact2 = Obj.make(TestSchema.Person, { name: 'Bob' });
 
 export const Refs: StoryObj<StoryProps<RefSchema>> = {
   render: RefStory,

package/src/components/Form/Form.tsx

@@ -6,7 +6,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
 import type * as Schema from 'effect/Schema';
 import React, { type ReactElement, useCallback, useEffect, useRef } from 'react';
 
-import { type BaseObject, type PropertyKey } from '@dxos/echo/internal';
+import { type AnyProperties, type PropertyKey } from '@dxos/echo/internal';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { cardDialogOverflow, cardSpacing } from '@dxos/react-ui-stack';
 import { type ProjectionModel, type SchemaProperty } from '@dxos/schema';
@@ -18,7 +18,7 @@ import { FormFields, type FormFieldsProps } from './FormContent';
 import { FormProvider } from './FormContext';
 import { type InputComponent, type InputProps } from './Input';
 
-export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
+export type PropsFilter<T extends AnyProperties> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
 
 export type ComponentLookup = (args: {
   prop: string;
@@ -28,7 +28,7 @@ export type ComponentLookup = (args: {
 
 export type CustomInputMap = Partial<Record<string, InputComponent>>;
 
-export type FormProps<T extends BaseObject> = ThemedClassName<{
+export type FormProps<T extends AnyProperties> = ThemedClassName<{
   id?: string;
   values: Partial<T>;
   // TODO(burdon): Autofocus first input.
@@ -45,7 +45,7 @@ export type FormProps<T extends BaseObject> = ThemedClassName<{
   // TODO(wittjosiah): This needs to support different ref field options per field.
   FormFieldsProps;
 
-export const Form = <T extends BaseObject>({
+export const Form = <T extends AnyProperties>({
   classNames,
   id,
   testId,

package/src/components/Form/FormActions.tsx

@@ -37,7 +37,12 @@ export const FormActions = ({ readonly, onCancel, outerSpacing = true }: FormAct
       )}
     >
       {onCancel && !readonly && (
-        <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('cancel button')} onClick={onCancel} />
+        <IconButton
+          data-testid='cancel-button'
+          icon='ph--x--regular'
+          label={t('cancel button label')}
+          onClick={onCancel}
+        />
       )}
       {handleSave && (
         <IconButton
@@ -45,7 +50,7 @@ export const FormActions = ({ readonly, onCancel, outerSpacing = true }: FormAct
           data-testid='save-button'
           disabled={!canSave}
           icon='ph--check--regular'
-          label={t('save button')}
+          label={t('save button label')}
           onClick={handleSave}
         />
       )}

package/src/components/Form/FormContent.tsx

@@ -264,7 +264,7 @@ export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
   ) => {
     const values = useFormValues(path);
     const properties = useMemo(() => {
-      const props = getSchemaProperties(schema.ast, values);
+      const props = getSchemaProperties(schema.ast, values, { form: true });
 
       // Use projection-based field management when view and projection are available
       if (projection) {

package/src/components/Form/FormContext.tsx

@@ -14,23 +14,23 @@ import React, {
 } from 'react';
 
 import { raise } from '@dxos/debug';
-import { type BaseObject, getValue } from '@dxos/echo/internal';
+import { type AnyProperties, getValue } from '@dxos/echo/internal';
 import { type SimpleType, createJsonPath } from '@dxos/effect';
 
 import { type FormHandler, type FormOptions, useForm } from '../../hooks';
 
-type FormContextValue<T extends BaseObject> = FormHandler<T>;
+type FormContextValue<T extends AnyProperties> = FormHandler<T>;
 
 const FormContext = createContext<FormContextValue<any> | undefined>(undefined);
 
-export const useFormContext = <T extends BaseObject>(): FormContextValue<T> => {
+export const useFormContext = <T extends AnyProperties>(): FormContextValue<T> => {
   return useContext(FormContext) ?? raise(new Error('Missing FormContext'));
 };
 
 export const useFormValues = (path: (string | number)[] = []): any => {
   const { values: formValues } = useFormContext();
   const jsonPath = createJsonPath(path);
-  return getValue(formValues, jsonPath) as BaseObject;
+  return getValue(formValues, jsonPath) as AnyProperties;
 };
 
 export type FormInputStateProps = {

package/src/components/Form/Input.tsx

@@ -4,7 +4,7 @@
 
 import React, { type FC } from 'react';
 
-import { type FormatEnum } from '@dxos/echo/internal';
+import { type Format } from '@dxos/echo/internal';
 import { type SimpleType } from '@dxos/effect';
 import { Icon, Input, Tooltip } from '@dxos/react-ui';
 import { labelSpacing } from '@dxos/react-ui-stack';
@@ -17,7 +17,7 @@ import { type FormInputStateProps } from './FormContext';
  */
 export type InputProps = {
   type: SimpleType;
-  format?: FormatEnum;
+  format?: Format.TypeFormat;
   label: string;
   placeholder?: string;
   inputOnly?: boolean;

package/src/components/Form/factory.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum } from '@dxos/echo/internal';
+import { Format } from '@dxos/echo/internal';
 import { type SimpleType } from '@dxos/effect';
 
 import { GeoPointInput } from './custom';
@@ -12,11 +12,14 @@ import { type InputComponent } from './Input';
 /**
  * Get property input component.
  */
-export const getInputComponent = (type: SimpleType, format?: FormatEnum | string): InputComponent | undefined => {
+export const getInputComponent = (
+  type: SimpleType,
+  format?: Format.TypeFormat | string,
+): InputComponent | undefined => {
   switch (format) {
-    case FormatEnum.GeoPoint:
+    case Format.TypeFormat.GeoPoint:
       return GeoPointInput;
-    case FormatEnum.Markdown:
+    case Format.TypeFormat.Markdown:
       return MarkdownInput;
   }
 

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

@@ -74,7 +74,6 @@ const DefaultStory = (props: StoryProps) => {
         name: 'Test',
         query: Query.select(Filter.type(TestSchema)),
         jsonSchema: Type.toJsonSchema(TestSchema),
-        presentation: Obj.make(Type.Expando, {}),
       });
 
       setSchema(testSchema);
@@ -88,7 +87,7 @@ const DefaultStory = (props: StoryProps) => {
         return;
       }
 
-      if (props.mode === 'query') {
+      if (props.mode === 'tag') {
         const queue = target && DXN.tryParse(target) ? target : undefined;
         const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
         view.query.ast = query.ast;
@@ -102,12 +101,10 @@ const DefaultStory = (props: StoryProps) => {
         const newView = View.make({
           query,
           jsonSchema: newSchema.jsonSchema,
-          presentation: Obj.make(Type.Expando, {}),
         });
         view.projection = Obj.getSnapshot(newView).projection;
         setSchema(() => newSchema);
       } else {
-        console.log('updateViewQuery', { newQuery });
         view.query.ast = newQuery;
         schema.updateTypename(getTypenameFromQuery(newQuery));
       }
@@ -194,8 +191,8 @@ export const Readonly: Story = {
   },
 };
 
-export const QueryMode: Story = {
+export const TagQueryMode: Story = {
   args: {
-    mode: 'query',
+    mode: 'tag',
   },
 };

package/src/components/ViewEditor/ViewEditor.tsx

@@ -37,7 +37,7 @@ export type ViewEditorProps = ThemedClassName<
   {
     schema: Schema.Schema.AnyNoContext;
     view: View.View;
-    mode?: 'schema' | 'query' | 'named-query';
+    mode?: 'schema' | 'tag';
     registry?: SchemaRegistry;
     readonly?: boolean;
     showHeading?: boolean;
@@ -96,13 +96,9 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
             : QueryAST.Query.annotations({ title: 'Query' }),
       });
 
-      if (mode === 'query' || mode === 'named-query') {
-        const name = Schema.Struct({
-          name: Schema.optional(Schema.String.annotations({ title: 'Name' })),
-        });
-
+      if (mode === 'tag') {
         return Schema.Struct({
-          ...(mode === 'named-query' ? { ...name.fields, ...base.fields } : base.fields),
+          ...base.fields,
           target: Schema.optional(Schema.String.annotations({ title: 'Target Queue' })),
         }).pipe(Schema.mutable);
       }
@@ -114,11 +110,10 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     // TODO(burdon): Settings should have domain name owned by user.
     const viewValues = useMemo(
       () => ({
-        name: view.name,
         query: mode === 'schema' ? getTypenameFromQuery(view.query.ast) : view.query.ast,
         target: queueTarget,
       }),
-      [view.name, mode, view.query.ast, queueTarget],
+      [mode, view.query.ast, queueTarget],
     );
 
     const handleToggleField = useCallback(
@@ -138,18 +133,12 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
 
     const handleUpdate = useCallback(
       (values: any) => {
-        invariant(!readonly);
         requestAnimationFrame(() => {
-          if ('name' in values && view.name !== values.name) {
-            view.name = values.name;
-            return;
-          }
-
           const query = mode === 'schema' ? Query.select(Filter.typename(values.query)).ast : values.query;
           onQueryChanged?.(query, values.target);
         });
       },
-      [onQueryChanged, readonly, view, queueTarget, mode],
+      [onQueryChanged, view, queueTarget, mode],
     );
 
     const handleDelete = useCallback(
@@ -194,11 +183,12 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       [projectionModel],
     );
 
-    const custom = useMemo(() => (mode === 'query' ? customFields({ types, tags }) : undefined), [types, tags, mode]);
+    const custom = useMemo(() => (mode === 'tag' ? customFields({ types, tags }) : undefined), [types, tags, mode]);
 
     return (
       <div role='none' className={mx(classNames)}>
-        {schemaReadonly && mode === 'schema' && (
+        {/* If readonlyProp is set, then the callout is not needed. */}
+        {schemaReadonly && !readonly && (
           <Callout.Root valence='info' classNames={['mlb-cardSpacingBlock', outerSpacing && 'mli-cardSpacingInline']}>
             <Callout.Title>{t('system schema description')}</Callout.Title>
           </Callout.Root>
@@ -210,7 +200,6 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
           autoSave
           schema={viewSchema}
           values={viewValues}
-          readonly={readonly ? 'disabled-input' : false}
           onSave={handleUpdate}
           outerSpacing={outerSpacing}
           Custom={custom}
@@ -243,7 +232,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
                           role='none'
                           className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}
                         >
-                          <List.ItemDragHandle disabled={readonly} />
+                          <List.ItemDragHandle disabled={readonly || schemaReadonly} />
                           <List.ItemTitle
                             classNames={hidden && 'text-subdued'}
                             onClick={() => handleToggleField(field)}
@@ -258,7 +247,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
                             disabled={readonly || (!hidden && projectionModel.fields.length <= 1)}
                             onClick={() => (hidden ? handleShow(field.path) : handleHide(field.id))}
                           />
-                          {mode === 'schema' && (
+                          {!readonly && (
                             <>
                               <List.ItemDeleteButton
                                 label={t('delete field label')}
@@ -279,7 +268,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
                             </>
                           )}
                         </div>
-                        {expandedField === field.id && mode === 'schema' && (
+                        {expandedField === field.id && !readonly && (
                           <div role='none' className='col-span-5 mbs-1 mbe-1 border border-separator rounded-md'>
                             <FieldEditor
                               readonly={readonly || schemaReadonly ? 'disabled-input' : false}
@@ -299,11 +288,11 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
           </List.Root>
         </div>
 
-        {!readonly && !expandedField && mode === 'schema' && (
+        {!readonly && !expandedField && (
           <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
             <IconButton
               icon='ph--plus--regular'
-              label={t('add property button')}
+              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}

package/src/hooks/useForm.ts

@@ -6,7 +6,7 @@ import type * as Schema from 'effect/Schema';
 import * as SchemaAST from 'effect/SchemaAST';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type BaseObject, getValue, setValue } from '@dxos/echo/internal';
+import { type AnyProperties, getValue, setValue } from '@dxos/echo/internal';
 import { type JsonPath, type SimpleType, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
@@ -16,7 +16,7 @@ import { type MaybePromise } from '@dxos/util';
 /**
  * Return type from `useForm` hook.
  */
-export type FormHandler<T extends BaseObject> = {
+export type FormHandler<T extends AnyProperties> = {
   //
   // Form state management.
   //
@@ -44,7 +44,7 @@ export type FormHandler<T extends BaseObject> = {
 /**
  * Hook options.
  */
-export interface FormOptions<T extends BaseObject> {
+export interface FormOptions<T extends AnyProperties> {
   /**
    * Effect schema (Type literal).
    */
@@ -85,7 +85,7 @@ export interface FormOptions<T extends BaseObject> {
  * Creates a hook for managing form state, including values, validation, and submission.
  * Deeply integrated with `@dxos/schema` for schema-based validation.
  */
-export const useForm = <T extends BaseObject>({
+export const useForm = <T extends AnyProperties>({
   schema,
   initialValues,
   onValuesChanged,
@@ -276,7 +276,7 @@ export const useForm = <T extends BaseObject>({
   );
 };
 
-const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPath, V> => {
+const createKeySet = <T extends AnyProperties, V>(obj: T, value: V): Record<JsonPath, V> => {
   invariant(obj);
   return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<JsonPath, V>);
 };

package/src/hooks/useRefQueryLookupHandler.ts

@@ -5,7 +5,7 @@
 import { useCallback } from 'react';
 
 import { Obj } from '@dxos/echo';
-import { type TypeAnnotation, getObjectDXN } from '@dxos/echo/internal';
+import { type TypeAnnotation } from '@dxos/echo/internal';
 import { Filter, type Space } from '@dxos/react-client/echo';
 import { isNonNullable } from '@dxos/util';
 
@@ -19,12 +19,12 @@ export const useRefQueryLookupHandler = ({ space }: UseRefQueryLookupProps): Que
       if (!space) {
         return [];
       }
+
       const query = space.db.query(Filter.typename(typeInfo.typename));
       const { objects } = await query.run();
-
       return objects
         .map((object) => {
-          const dxn = getObjectDXN(object);
+          const dxn = Obj.getDXN(object);
           if (!dxn) {
             return undefined;
           }

package/src/translations.ts

@@ -15,7 +15,7 @@ export const translations = [
         'empty readonly ref field label': '(none)',
 
         // TODO(burdon): Standardize field/property.
-        'add property button': 'Add property',
+        'add property button label': 'Add property',
         'field property label': 'Property',
         'field property placeholder': 'Property name',
         'field format label': 'Type',
@@ -33,7 +33,8 @@ export const translations = [
         'ref field placeholder_other': 'Select items…',
 
         // TODO(burdon): Factor out?
-        'save button': 'Save',
+        'cancel button label': 'Cancel',
+        'save button label': 'Save',
 
         // FormatEnum
         'format boolean': 'Boolean',
@@ -77,9 +78,9 @@ export const translations = [
         'select option add': 'Add option',
 
         // System schema message.
-        'system schema title': 'System record type',
+        'system schema title': 'System type',
         'system schema description':
-          'This is a system record type and cannot be modified, though the view can still be configured.',
+          'This is a system type and cannot be modified, though the view can still be configured.',
       },
     },
   },