@dxos/react-ui-form 0.7.2 → 0.7.3-staging.971cd8d

package/dist/types/src/hooks/useForm.d.ts

@@ -2,6 +2,7 @@ import { type FocusEvent } from 'react';
 import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
 import { type SimpleType, type S } from '@dxos/effect';
 import { type ValidationError } from '@dxos/schema';
+import { type MaybePromise } from '@dxos/util';
 /**
  * Return type from `useForm` hook.
  */
@@ -10,8 +11,8 @@ export type FormHandler<T extends BaseObject> = {
     errors: Record<PropertyKey<T>, string>;
     touched: Record<PropertyKey<T>, boolean>;
     changed: Record<PropertyKey<T>, boolean>;
-    canSubmit: boolean;
-    handleSubmit: () => void;
+    canSave: boolean;
+    handleSave: () => void;
     getStatus: (property: PropertyKey<T>) => {
         status?: 'error';
         error?: string;
@@ -24,7 +25,13 @@ export type FormHandler<T extends BaseObject> = {
  * Hook options.
  */
 export interface FormOptions<T extends BaseObject> {
+    /**
+     * Effect schema.
+     */
     schema: S.Schema<T>;
+    /**
+     * Initial values (which may not pass validation).
+     */
     initialValues: T;
     /**
      * Callback for value changes. Note: This is called even when values are invalid.
@@ -47,13 +54,13 @@ export interface FormOptions<T extends BaseObject> {
     /**
      * Called when the form is submitted and passes validation.
      */
-    onSubmit?: (values: T, meta: {
+    onSave?: (values: T, meta: {
         changed: FormHandler<T>['changed'];
-    }) => void;
+    }) => MaybePromise<void>;
 }
 /**
  * Creates a hook for managing form state, including values, validation, and submission.
  * Deeply integrated with `@dxos/schema` for schema-based validation.
  */
-export declare const useForm: <T extends BaseObject>({ schema, initialValues, onValuesChanged, onValidate, onValid, onSubmit, }: FormOptions<T>) => FormHandler<T>;
+export declare const useForm: <T extends BaseObject>({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave, }: FormOptions<T>) => FormHandler<T>;
 //# sourceMappingURL=useForm.d.ts.map

package/dist/types/src/hooks/useForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,IAAI,CAAC;IAMzB,SAAS,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC7C,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjF,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAGpB,aAAa,EAAE,CAAC,CAAC;IAEjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEtC;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9E;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,8EAOzC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAiIhC,CAAC"}
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC7C,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjF,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C;;OAEG;IAEH,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpB;;OAEG;IAEH,aAAa,EAAE,CAAC,CAAC;IAEjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEtC;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC1F;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,4EAOzC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAwIhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.7.2",
+  "version": "0.7.3-staging.971cd8d",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,19 +29,20 @@
     "date-fns": "^3.3.1",
     "effect": "^3.9.2",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.7.2",
-    "@dxos/debug": "0.7.2",
-    "@dxos/echo-db": "0.7.2",
-    "@dxos/echo-schema": "0.7.2",
-    "@dxos/effect": "0.7.2",
-    "@dxos/keys": "0.7.2",
-    "@dxos/invariant": "0.7.2",
-    "@dxos/log": "0.7.2",
-    "@dxos/react-client": "0.7.2",
-    "@dxos/react-ui-list": "0.7.2",
-    "@dxos/react-ui-types": "0.7.2",
-    "@dxos/schema": "0.7.2",
-    "@dxos/util": "0.7.2"
+    "@dxos/async": "0.7.3-staging.971cd8d",
+    "@dxos/debug": "0.7.3-staging.971cd8d",
+    "@dxos/echo-db": "0.7.3-staging.971cd8d",
+    "@dxos/echo-schema": "0.7.3-staging.971cd8d",
+    "@dxos/invariant": "0.7.3-staging.971cd8d",
+    "@dxos/effect": "0.7.3-staging.971cd8d",
+    "@dxos/keys": "0.7.3-staging.971cd8d",
+    "@dxos/log": "0.7.3-staging.971cd8d",
+    "@dxos/live-object": "0.7.3-staging.971cd8d",
+    "@dxos/react-client": "0.7.3-staging.971cd8d",
+    "@dxos/react-ui-list": "0.7.3-staging.971cd8d",
+    "@dxos/react-ui-types": "0.7.3-staging.971cd8d",
+    "@dxos/util": "0.7.3-staging.971cd8d",
+    "@dxos/schema": "0.7.3-staging.971cd8d"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -52,12 +53,12 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.7.2",
-    "@dxos/random": "0.7.2",
-    "@dxos/react-ui-syntax-highlighter": "0.7.2",
-    "@dxos/react-ui": "0.7.2",
-    "@dxos/react-ui-theme": "0.7.2",
-    "@dxos/storybook-utils": "0.7.2"
+    "@dxos/echo-signals": "0.7.3-staging.971cd8d",
+    "@dxos/random": "0.7.3-staging.971cd8d",
+    "@dxos/react-ui": "0.7.3-staging.971cd8d",
+    "@dxos/react-ui-syntax-highlighter": "0.7.3-staging.971cd8d",
+    "@dxos/react-ui-theme": "0.7.3-staging.971cd8d",
+    "@dxos/storybook-utils": "0.7.3-staging.971cd8d"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
@@ -65,8 +66,8 @@
     "effect": "^3.9.2",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.2",
-    "@dxos/react-ui": "0.7.2"
+    "@dxos/react-ui-theme": "0.7.3-staging.971cd8d",
+    "@dxos/react-ui": "0.7.3-staging.971cd8d"
   },
   "publishConfig": {
     "access": "public"

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { createMutableSchema } from '@dxos/echo-schema/testing';
+import { createMutableSchema } from '@dxos/live-object/testing';
 import { log } from '@dxos/log';
 import { ViewProjection } from '@dxos/schema';
 import { TestSchema, testView } from '@dxos/schema/testing';
@@ -20,14 +20,14 @@ import { TestLayout, TestPanel } from '../testing';
 type StoryProps = FieldEditorProps;
 
 const DefaultStory = (props: FieldEditorProps) => {
-  const handleComplete: FieldEditorProps['onClose'] = () => {
+  const handleComplete: FieldEditorProps['onSave'] = () => {
     log.info('onClose', { props });
   };
 
   return (
     <TestLayout json={{ props }}>
       <TestPanel>
-        <FieldEditor {...props} onClose={handleComplete} />
+        <FieldEditor {...props} onSave={handleComplete} />
       </TestPanel>
     </TestLayout>
   );

package/src/components/FieldEditor/FieldEditor.tsx

@@ -26,14 +26,14 @@ export type FieldEditorProps = {
   projection: ViewProjection;
   field: FieldType;
   registry?: SchemaResolver;
-  onClose: () => void;
+  onSave: () => void;
   onCancel?: () => void;
 };
 
 /**
  * Displays a Form representing the metadata for a given `Field` and `View`.
  */
-export const FieldEditor = ({ view, projection, field, registry, onClose, onCancel }: FieldEditorProps) => {
+export const FieldEditor = ({ view, projection, field, registry, onSave, onCancel }: FieldEditorProps) => {
   const { t } = useTranslation(translationKey);
   const [props, setProps] = useState<PropertyType>(projection.getFieldProjection(field.id).props);
   useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
@@ -100,19 +100,19 @@ export const FieldEditor = ({ view, projection, field, registry, onClose, onCanc
     [view.fields, field],
   );
 
-  const handleSubmit = useCallback<NonNullable<FormProps<PropertyType>['onSubmit']>>(
+  const handleSave = useCallback<NonNullable<FormProps<PropertyType>['onSave']>>(
     (props) => {
       projection.setFieldProjection({ field, props });
-      onClose();
+      onSave();
     },
-    [projection, field, onClose],
+    [projection, field, onSave],
   );
 
   const handleCancel = useCallback<NonNullable<FormProps<PropertyType>['onCancel']>>(() => {
     // Need to defer to allow form to close.
     requestAnimationFrame(() => onCancel?.());
-    onClose();
-  }, [onClose]);
+    onSave();
+  }, [onSave]);
 
   if (!fieldSchema) {
     log.warn('invalid format', { props });
@@ -129,7 +129,7 @@ export const FieldEditor = ({ view, projection, field, registry, onClose, onCanc
       sort={['property', 'format']}
       onValuesChanged={handleValuesChanged}
       onValidate={handleValidate}
-      onSubmit={handleSubmit}
+      onSave={handleSave}
       onCancel={handleCancel}
       Custom={{
         ['format' satisfies keyof PropertyType]: (props) => (

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

@@ -7,7 +7,8 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useCallback, useState } from 'react';
 
-import { AST, Format, S } from '@dxos/echo-schema';
+import { AST, type BaseObject, Format, S } from '@dxos/echo-schema';
+import { Testing } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { SelectInput } from './Defaults';
@@ -33,24 +34,24 @@ const TestSchema = S.Struct({
 
 type TestType = S.Schema.Type<typeof TestSchema>;
 
-type StoryProps = FormProps<TestType>;
+type StoryProps<T extends BaseObject> = { schema: S.Schema<T> } & FormProps<T>;
 
-const DefaultStory = ({ values: initialValues }: StoryProps) => {
+const DefaultStory = <T extends BaseObject>({ schema, values: initialValues }: StoryProps<T>) => {
   const [values, setValues] = useState(initialValues);
-  const handleSubmit = useCallback<NonNullable<FormProps<TestType>['onSubmit']>>((values) => {
+  const handleSave = useCallback<NonNullable<FormProps<T>['onSave']>>((values) => {
     setValues(values);
   }, []);
 
   return (
-    <TestLayout json={{ values, schema: TestSchema.ast.toJSON() }}>
+    <TestLayout json={{ values, schema: schema.ast.toJSON() }}>
       <TestPanel>
-        <Form<TestType> schema={TestSchema} values={values} onSubmit={handleSubmit} />
+        <Form<T> schema={schema} values={values} onSave={handleSave} />
       </TestPanel>
     </TestLayout>
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta: Meta<StoryProps<any>> = {
   title: 'ui/react-ui-form/Form',
   component: Form,
   render: DefaultStory,
@@ -62,10 +63,11 @@ const meta: Meta<StoryProps> = {
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story<T extends BaseObject> = StoryObj<StoryProps<T>>;
 
-export const Default: Story = {
+export const Default: Story<TestType> = {
   args: {
+    schema: TestSchema,
     values: {
       name: 'DXOS',
       active: true,
@@ -76,6 +78,33 @@ export const Default: Story = {
   },
 };
 
+// TODO(burdon): Should accept partial values.
+export const Org: Story<Testing.OrgSchemaType> = {
+  args: {
+    schema: Testing.OrgSchema,
+    values: {
+      name: 'DXOS',
+      website: 'https://dxos.org',
+    },
+  },
+};
+
+// TODO(burdon): Type issue with employer reference.
+// TODO(burdon): Test table/form with compound values (e.g., address).
+// export const Contact: Story<Testing.ContactSchemaType> = {
+//   args: {
+//     // Property name is missing in type EncodedReference but required in type
+//     schema: Testing.ContactSchema,
+//     values: {
+//       name: 'Bot',
+//     },
+//   },
+// };
+
+//
+// TODO(burdon): Move into separate storybook and use test types.
+//
+
 const ShapeSchema = S.Struct({
   shape: S.optional(
     S.Union(
@@ -92,11 +121,12 @@ const ShapeSchema = S.Struct({
 }).pipe(S.mutable);
 
 type ShapeType = S.Schema.Type<typeof ShapeSchema>;
+
 type DiscriminatedUnionStoryProps = FormProps<ShapeType>;
 
 const DiscriminatedUnionStory = ({ values: initialValues }: DiscriminatedUnionStoryProps) => {
   const [values, setValues] = useState(initialValues);
-  const handleSubmit = useCallback<NonNullable<FormProps<ShapeType>['onSubmit']>>((values) => {
+  const handleSave = useCallback<NonNullable<FormProps<ShapeType>['onSave']>>((values) => {
     setValues(values);
   }, []);
 
@@ -106,7 +136,7 @@ const DiscriminatedUnionStory = ({ values: initialValues }: DiscriminatedUnionSt
         <Form<ShapeType>
           schema={ShapeSchema}
           values={values}
-          onSubmit={handleSubmit}
+          onSave={handleSave}
           Custom={{
             ['shape.type' as const]: (props) => (
               <SelectInput<ShapeType>

package/src/components/Form/Form.tsx

@@ -28,7 +28,9 @@ export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) =>
 
 export type FormProps<T extends BaseObject> = ThemedClassName<
   {
+    // TODO(burdon): Partial<T>?
     values: T;
+
     /** Path to the current object from the root. Used with nested forms. */
     path?: string[];
 
@@ -39,18 +41,20 @@ export type FormProps<T extends BaseObject> = ThemedClassName<
     filter?: PropsFilter<T>;
     sort?: PropertyKey<T>[];
     autoSave?: boolean;
+    testId?: string;
     onCancel?: () => void;
 
     /**
      * Map of custom renderers for specific properties.
      */
     Custom?: Partial<Record<string, InputComponent<T>>>;
-  } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSubmit'>
+  } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'>
 >;
 
 /**
  * General purpose form component that displays field controls based on the given schema.
  */
+// TODO(burdon): Area to show general validation errors.
 export const Form = <T extends BaseObject>({
   classNames,
   schema,
@@ -60,21 +64,22 @@ export const Form = <T extends BaseObject>({
   filter,
   sort,
   autoSave,
+  testId,
   onValuesChanged,
   onValidate,
-  onSubmit,
+  onSave,
   onCancel,
   Custom,
 }: FormProps<T>) => {
   const { t } = useTranslation(translationKey);
-  const onValid = useMemo(() => (autoSave ? onSubmit : undefined), [autoSave, onSubmit]);
-  const { canSubmit, values, errors, handleSubmit, ...inputProps } = useForm<T>({
+  const onValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
+  const { canSave, values, errors, handleSave, ...inputProps } = useForm<T>({
     schema,
     initialValues,
     onValuesChanged,
     onValidate,
     onValid,
-    onSubmit,
+    onSave,
   });
 
   // Filter and sort props.
@@ -98,12 +103,12 @@ export const Form = <T extends BaseObject>({
   }, [errors]);
 
   return (
-    <div role='form' className={mx('flex flex-col w-full gap-2 py-2', classNames)}>
+    <div role='form' className={mx('flex flex-col w-full gap-2 py-2', classNames)} data-testid={testId}>
       {properties
         .map((property) => {
           const { ast, name, type, format, title, description, examples, options } = property;
           const key = [...path, name];
-          const label = pipe(title ?? name, capitalize);
+          const label = title ?? pipe(name, capitalize);
           const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
 
           // Get generic input.
@@ -177,19 +182,25 @@ export const Form = <T extends BaseObject>({
         })
         .filter(isNotFalsy)}
 
-      {(onCancel || onSubmit) && !autoSave && (
+      {(onCancel || onSave) && !autoSave && (
         <div role='none' className='flex justify-center'>
           <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
             {onCancel && !readonly && (
-              <IconButton icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
+              <IconButton
+                data-testid='cancel-button'
+                icon='ph--x--regular'
+                label={t('button cancel')}
+                onClick={onCancel}
+              />
             )}
-            {onSubmit && (
+            {onSave && (
               <IconButton
                 type='submit'
-                disabled={!canSubmit}
+                data-testid='save-button'
+                disabled={!canSave}
                 icon='ph--check--regular'
                 label={t('button save')}
-                onClick={handleSubmit}
+                onClick={handleSave}
               />
             )}
           </div>

package/src/components/ViewEditor/ViewEditor.tsx

@@ -22,7 +22,7 @@ const ViewMetaSchema = S.Struct({
   name: S.String.annotations({
     [AST.TitleAnnotationId]: 'View',
   }),
-  type: Format.DXN.annotations({
+  typename: Format.DXN.annotations({
     [AST.TitleAnnotationId]: 'Typename',
   }),
 }).pipe(S.mutable);
@@ -60,16 +60,16 @@ export const ViewEditor = ({
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
       // TODO(burdon): Settings should have domain name owned by user.
-      type: view.query.type,
+      typename: view.query.typename,
     };
   }, [view]);
 
   const handleViewUpdate = useCallback(
-    ({ name, type }: ViewMetaType) => {
+    ({ name, typename }: ViewMetaType) => {
       requestAnimationFrame(() => {
         view.name = name;
-        view.query.type = type;
-        schema.updateTypename(type);
+        view.query.typename = typename;
+        schema.updateTypename(typename);
       });
     },
     [view, schema],
@@ -95,7 +95,7 @@ export const ViewEditor = ({
 
   return (
     <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
-      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSubmit={handleViewUpdate} />
+      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
 
       <div>
         {/* TODO(burdon): Clean up common form ux. */}
@@ -139,9 +139,10 @@ export const ViewEditor = ({
           projection={projection}
           field={field}
           registry={registry}
-          onClose={handleClose}
+          onSave={handleClose}
         />
       )}
+
       {!readonly && !field && (
         <div className='flex p-2 justify-center'>
           <IconButton

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

@@ -7,11 +7,11 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { create } from '@dxos/echo-schema';
-import { testData, testView, TestSchema, type TestType } from '@dxos/schema/testing';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { create } from '@dxos/live-object';
+import { testData, TestSchema, testView, type TestType } from '@dxos/schema/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { type DeprecatedFormProps, DeprecatedForm } from './Form';
+import { DeprecatedForm, type DeprecatedFormProps } from './Form';
 import translations from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 

package/src/hooks/useForm.ts

@@ -9,6 +9,7 @@ import { type SimpleType, type S } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { validateSchema, type ValidationError } from '@dxos/schema';
+import { type MaybePromise } from '@dxos/util';
 
 /**
  * Return type from `useForm` hook.
@@ -22,8 +23,8 @@ export type FormHandler<T extends BaseObject> = {
   errors: Record<PropertyKey<T>, string>;
   touched: Record<PropertyKey<T>, boolean>;
   changed: Record<PropertyKey<T>, boolean>;
-  canSubmit: boolean;
-  handleSubmit: () => void;
+  canSave: boolean;
+  handleSave: () => void;
 
   //
   // Form input component helpers.
@@ -39,9 +40,16 @@ export type FormHandler<T extends BaseObject> = {
  * Hook options.
  */
 export interface FormOptions<T extends BaseObject> {
+  /**
+   * Effect schema.
+   */
+  // TODO(burdon): Change to S.Struct<T>?
   schema: S.Schema<T>;
 
-  // TODO(burdon): Are these reactive?
+  /**
+   * Initial values (which may not pass validation).
+   */
+  // TODO(burdon): Should be partial?
   initialValues: T;
 
   /**
@@ -56,7 +64,7 @@ export interface FormOptions<T extends BaseObject> {
    * Use this for complex validation logic that can't be expressed in the schema.
    * @returns Array of validation errors, or undefined if validation passes
    */
-  // TODO(burdon): Change to key x value.
+  // TODO(burdon): Change to key x value?
   onValidate?: (values: T) => ValidationError[] | undefined;
 
   /**
@@ -67,7 +75,7 @@ export interface FormOptions<T extends BaseObject> {
   /**
    * Called when the form is submitted and passes validation.
    */
-  onSubmit?: (values: T, meta: { changed: FormHandler<T>['changed'] }) => void;
+  onSave?: (values: T, meta: { changed: FormHandler<T>['changed'] }) => MaybePromise<void>;
 }
 
 /**
@@ -80,7 +88,7 @@ export const useForm = <T extends BaseObject>({
   onValuesChanged,
   onValidate,
   onValid,
-  onSubmit,
+  onSave,
 }: FormOptions<T>): FormHandler<T> => {
   const [values, setValues] = useState<T>(initialValues);
   useEffect(() => {
@@ -90,6 +98,7 @@ export const useForm = <T extends BaseObject>({
   const [touched, setTouched] = useState<Record<PropertyKey<T>, boolean>>(createKeySet(initialValues, false));
   const [changed, setChanged] = useState<Record<PropertyKey<T>, boolean>>(createKeySet(initialValues, false));
   const [errors, setErrors] = useState<Record<PropertyKey<T>, string>>({} as Record<PropertyKey<T>, string>);
+  const [saving, setSaving] = useState(false);
 
   //
   // Validation.
@@ -123,19 +132,25 @@ export const useForm = <T extends BaseObject>({
    * NOTE: We can submit if there is no touched field that has an error.
    * Basically, if there's a validation message visible in the form, submit should be disabled.
    */
-  const canSubmit = useMemo(
+  const canSave = useMemo(
     () =>
+      !saving &&
       Object.keys(values).every(
         (property) => touched[property as PropertyKey<T>] === false || !errors[property as PropertyKey<T>],
       ),
-    [values, touched, errors],
+    [values, touched, errors, saving],
   );
 
-  const handleSubmit = useCallback(() => {
+  const handleSave = useCallback(async () => {
     if (validate(values)) {
-      onSubmit?.(values, { changed });
+      setSaving(true);
+      try {
+        await onSave?.(values, { changed });
+      } finally {
+        setSaving(false);
+      }
     }
-  }, [values, validate, onSubmit]);
+  }, [values, validate, onSave]);
 
   //
   // Fields.
@@ -185,7 +200,7 @@ export const useForm = <T extends BaseObject>({
 
       // TODO(Zan): This should be configurable behavior.
       if (event.relatedTarget?.getAttribute('type') === 'submit') {
-        // NOTE: We do this here instead of onSubmit because the blur event is triggered before the submit event
+        // NOTE: We do this here instead of onSave because the blur event is triggered before the submit event
         //  and results in the submit button being disabled when the form is invalid.
         setTouched(createKeySet(values, true));
       }
@@ -201,8 +216,8 @@ export const useForm = <T extends BaseObject>({
     errors,
     touched,
     changed,
-    canSubmit,
-    handleSubmit,
+    canSave,
+    handleSave,
 
     // Field utils.
     getStatus,