@dxos/react-ui-form 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.e098934",
+  "version": "0.8.4-main.e8ec1fe",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -28,54 +28,55 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@fluentui/react-tabster": "^9.24.2",
     "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-react": "^3.2.0",
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.4-main.e098934",
-    "@dxos/debug": "0.8.4-main.e098934",
-    "@dxos/echo": "0.8.4-main.e098934",
-    "@dxos/echo-schema": "0.8.4-main.e098934",
-    "@dxos/echo-db": "0.8.4-main.e098934",
-    "@dxos/effect": "0.8.4-main.e098934",
-    "@dxos/invariant": "0.8.4-main.e098934",
-    "@dxos/lit-ui": "0.8.4-main.e098934",
-    "@dxos/keys": "0.8.4-main.e098934",
-    "@dxos/live-object": "0.8.4-main.e098934",
-    "@dxos/log": "0.8.4-main.e098934",
-    "@dxos/react-client": "0.8.4-main.e098934",
-    "@dxos/react-ui-components": "0.8.4-main.e098934",
-    "@dxos/react-ui-editor": "0.8.4-main.e098934",
-    "@dxos/react-ui-pickers": "0.8.4-main.e098934",
-    "@dxos/react-ui-list": "0.8.4-main.e098934",
-    "@dxos/react-ui-searchlist": "0.8.4-main.e098934",
-    "@dxos/react-ui-stack": "0.8.4-main.e098934",
-    "@dxos/schema": "0.8.4-main.e098934",
-    "@dxos/react-ui-types": "0.8.4-main.e098934",
-    "@dxos/util": "0.8.4-main.e098934",
-    "@dxos/react-ui-tag-picker": "0.8.4-main.e098934"
+    "@dxos/async": "0.8.4-main.e8ec1fe",
+    "@dxos/echo": "0.8.4-main.e8ec1fe",
+    "@dxos/debug": "0.8.4-main.e8ec1fe",
+    "@dxos/echo-db": "0.8.4-main.e8ec1fe",
+    "@dxos/effect": "0.8.4-main.e8ec1fe",
+    "@dxos/echo-query": "0.8.4-main.e8ec1fe",
+    "@dxos/keys": "0.8.4-main.e8ec1fe",
+    "@dxos/lit-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/live-object": "0.8.4-main.e8ec1fe",
+    "@dxos/invariant": "0.8.4-main.e8ec1fe",
+    "@dxos/react-client": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-components": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-editor": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-pickers": "0.8.4-main.e8ec1fe",
+    "@dxos/log": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-list": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-searchlist": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-stack": "0.8.4-main.e8ec1fe",
+    "@dxos/schema": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-types": "0.8.4-main.e8ec1fe",
+    "@dxos/types": "0.8.4-main.e8ec1fe",
+    "@dxos/util": "0.8.4-main.e8ec1fe"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.17.7",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "effect": "3.18.3",
     "fast-check": "^3.19.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/echo-signals": "0.8.4-main.e098934",
-    "@dxos/random": "0.8.4-main.e098934",
-    "@dxos/react-ui": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934",
-    "@dxos/storybook-utils": "0.8.4-main.e098934",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.e098934"
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/echo-signals": "0.8.4-main.e8ec1fe",
+    "@dxos/random": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe",
+    "@dxos/storybook-utils": "0.8.4-main.e8ec1fe"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ControlSection/ControlSection.stories.tsx

@@ -2,12 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 
@@ -17,12 +15,13 @@ const meta = {
   title: 'ui/react-ui-form/ControlSection',
   component: ControlSection,
   render: (args) => (
-    <ControlPage classNames='w-[40rem]'>
+    <ControlPage classNames='is-[40rem]'>
       <ControlSection {...args} />
     </ControlPage>
   ),
-  decorators: [withLayout({ fullscreen: true, classNames: 'justify-center' }), withTheme],
+  decorators: [withTheme],
   parameters: {
+    layout: 'centered',
     translations,
   },
 } satisfies Meta<typeof ControlSection>;

package/src/components/ControlSection/ControlSection.tsx

@@ -22,7 +22,7 @@ export type ControlPageProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
 
 export const ControlPage = ({ children, classNames, ...props }: ControlPageProps) => {
   return (
-    <StackItem.Content classNames='block overflow-y-auto [--control-spacing:var(--dx-trimMd)]'>
+    <StackItem.Content scrollable classNames='[--control-spacing:var(--dx-trimMd)]'>
       <div role='none' className={mx('pli-cardSpacingInline pbe-trimLg', classNames)} {...props}>
         {children}
       </div>

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

@@ -2,16 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo } from 'react';
 
-import { createEchoSchema } from '@dxos/live-object/testing';
+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 { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { translations } from '../../translations';
 import { FIELD_EDITOR_DEBUG_SYMBOL, TestLayout, TestPanel } from '../testing';
@@ -31,6 +29,8 @@ const DefaultStory = (props: FieldEditorProps) => {
 
   // Expose objects on window for test access.
   useEffect(() => {
+    props.projection.normalizeView();
+
     if (typeof window !== 'undefined') {
       (window as any)[FIELD_EDITOR_DEBUG_SYMBOL] = {
         props,
@@ -58,8 +58,9 @@ const meta = {
   title: 'ui/react-ui-form/FieldEditor',
   component: FieldEditor as any,
   render: DefaultStory,
-  decorators: [withLayout({ fullscreen: true }), withTheme],
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof DefaultStory>;

package/src/components/FieldEditor/FieldEditor.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { type EchoSchema, FormatEnum, FormatEnums, formatToType } from '@dxos/echo/internal';
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { type EchoSchema, FormatEnum, FormatEnums, formatToType } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { useAsyncEffect, useTranslation } from '@dxos/react-ui';
 import {
@@ -13,6 +13,7 @@ import {
   type ProjectionModel,
   type PropertyType,
   type SchemaProperty,
+  formatToAdditionalPropertyAttributes,
   getFormatSchema,
   getSchemaProperties,
   sortProperties,
@@ -94,8 +95,10 @@ export const FieldEditor = ({
 
       setProps((props) => {
         const type = formatToType[_props.format as keyof typeof formatToType];
+        const additionalProps =
+          formatToAdditionalPropertyAttributes[_props.format as keyof typeof formatToAdditionalPropertyAttributes];
         if (props.type !== type) {
-          return { ...props, ..._props, type };
+          return { ...props, ..._props, ...additionalProps, type } as PropertyType;
         }
 
         return _props as PropertyType;

package/src/components/Form/ArrayField.tsx

@@ -2,8 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST, pipe } from 'effect';
-import { capitalize } from 'effect/String';
+import * as Function from 'effect/Function';
+import * as SchemaAST from 'effect/SchemaAST';
+import * as String from 'effect/String';
 import React, { Fragment, useCallback } from 'react';
 
 import { SimpleType, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
@@ -34,7 +35,7 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
   //  It doesn't become live until another field is touched, but that's better than the whole form crashing.
   const values = (useFormValues(path ?? []) ?? []) as any[];
   invariant(Array.isArray(values), `Values at path ${path?.join('.')} must be an array.`);
-  const label = title ?? pipe(name, capitalize);
+  const label = title ?? Function.pipe(name, String.capitalize);
 
   const elementType = findArrayElementType(ast);
 

package/src/components/Form/Defaults.tsx

@@ -192,7 +192,7 @@ export const MarkdownInput = ({
           disabled={!!readonly}
           placeholder={placeholder}
           value={getValue() ?? ''}
-          classNames={'min-bs-auto max-h-40 overflow-auto'}
+          classNames={'min-bs-auto max-bs-40 overflow-auto'}
           onChange={(event) => onValueChange(type, event.target.value)}
           onBlur={onBlur}
           style={{ resize: 'none' }}

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

@@ -2,19 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+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-schema';
-import { live } from '@dxos/live-object';
-import { withSurfaceVariantsLayout } from '@dxos/react-ui/testing';
+import { type BaseObject, Expando, Format, Ref, type TypeAnnotation, getObjectDXN } from '@dxos/echo/internal';
+import { live } 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 { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
@@ -40,11 +38,13 @@ const DefaultStory = <T extends BaseObject = any>({
 
   if (debug) {
     return (
-      <TestLayout json={{ values, schema: schema.ast }}>
-        <TestPanel>
-          <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />
-        </TestPanel>
-      </TestLayout>
+      <Tooltip.Provider>
+        <TestLayout json={{ values, schema: schema.ast }}>
+          <TestPanel>
+            <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />
+          </TestPanel>
+        </TestLayout>
+      </Tooltip.Provider>
     );
   }
 
@@ -54,7 +54,7 @@ const DefaultStory = <T extends BaseObject = any>({
 const RefStory = <T extends BaseObject = any>(props: StoryProps<T>) => {
   const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
     switch (typeInfo.typename) {
-      case ContactType.typename:
+      case Testing.Person.typename:
         return [
           { dxn: getObjectDXN(contact1)!, label: 'John Coltraine' },
           { dxn: getObjectDXN(contact2)!, label: 'Erykah Badu' },
@@ -67,24 +67,6 @@ const RefStory = <T extends BaseObject = any>(props: StoryProps<T>) => {
   return <DefaultStory<T> onQueryRefOptions={onQueryRefOptions} {...props} />;
 };
 
-const meta = {
-  title: 'ui/react-ui-form/Form',
-  component: Form as any,
-  render: DefaultStory,
-  decorators: [withLayout({ fullscreen: true }), withTheme],
-  parameters: {
-    translations,
-  },
-  argTypes: {
-    readonly: {
-      control: 'boolean',
-      description: 'Readonly',
-    },
-  },
-} satisfies Meta<StoryProps<any>>;
-
-export default meta;
-
 const AddressSchema = Schema.Struct({
   street: Schema.optional(Schema.String.annotations({ title: 'Street' })),
   city: Schema.optional(Schema.String.annotations({ title: 'City' })),
@@ -102,10 +84,28 @@ const ContactSchema = Schema.Struct({
 
 type ContactSchema = Schema.Schema.Type<typeof ContactSchema>;
 
-type Story = StoryObj<StoryProps<any>>;
+const meta = {
+  title: 'ui/react-ui-form/Form',
+  component: Form as any,
+  render: DefaultStory,
+  decorators: [withTheme, withLayoutVariants()],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+  argTypes: {
+    readonly: {
+      control: 'boolean',
+      description: 'Readonly',
+    },
+  },
+} satisfies Meta<StoryProps<any>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  decorators: [withSurfaceVariantsLayout(), withTheme],
   args: {
     schema: ContactSchema,
     values: {
@@ -147,10 +147,10 @@ export const OrganizationAutoSave: Story = {
 // TODO(burdon): Type issue with employer reference.
 // TODO(burdon): Test table/form with compound values (e.g., address).
 // Property name is missing in type EncodedReference but required in type
-export const Contact: Story = {
+export const Person: Story = {
   args: {
     debug: true,
-    schema: Testing.ContactSchema,
+    schema: Testing.Person,
     values: {
       name: 'Bot',
     },

package/src/components/Form/Form.tsx

@@ -3,15 +3,15 @@
 //
 
 import { useFocusFinders } from '@fluentui/react-tabster';
-import { type Schema } from 'effect';
-import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
+import type * as Schema from 'effect/Schema';
+import React, { type ReactElement, useCallback, useEffect, useRef } from 'react';
 
-import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
+import { type BaseObject, 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';
 
-import { type FormOptions } from '../../hooks';
+import { type FormHandler, type FormOptions } from '../../hooks';
 
 import { FormActions, type FormOuterSpacing } from './FormActions';
 import { FormFields, type FormFieldsProps } from './FormContent';
@@ -29,6 +29,7 @@ export type ComponentLookup = (args: {
 export type CustomInputMap = Partial<Record<string, InputComponent>>;
 
 export type FormProps<T extends BaseObject> = ThemedClassName<{
+  id?: string;
   values: Partial<T>;
   // TODO(burdon): Autofocus first input.
   autoFocus?: boolean;
@@ -41,10 +42,12 @@ export type FormProps<T extends BaseObject> = ThemedClassName<{
   onCancel?: () => void;
 }> &
   Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'> &
+  // TODO(wittjosiah): This needs to support different ref field options per field.
   FormFieldsProps;
 
 export const Form = <T extends BaseObject>({
   classNames,
+  id,
   testId,
   values: initialValues,
   autoFocus,
@@ -72,7 +75,14 @@ export const Form = <T extends BaseObject>({
   }, [autoFocus]);
 
   // TODO(burdon): Name?
-  const handleValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
+  const handleValid = useCallback(
+    async (values: any, meta: { changed: FormHandler<T>['changed'] }) => {
+      if (autoSave) {
+        await onSave?.(values, meta);
+      }
+    },
+    [autoSave, onSave],
+  );
 
   return (
     <FormProvider
@@ -85,7 +95,7 @@ export const Form = <T extends BaseObject>({
       onValid={handleValid}
       onSave={onSave}
     >
-      <div role='none' className='contents' data-testid={testId}>
+      <div role='none' className='contents' {...(id && { 'data-object-id': id })} data-testid={testId}>
         <FormFields
           {...props}
           ref={formRef}

package/src/components/Form/FormActions.tsx

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

package/src/components/Form/FormContent.tsx

@@ -2,15 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema, SchemaAST, pipe } from 'effect';
-import { capitalize } from 'effect/String';
-import React, { forwardRef, useMemo } from 'react';
+import * as Function from 'effect/Function';
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+import * as StringEffect from 'effect/String';
+import React, { Component, type PropsWithChildren, type ReactNode, forwardRef, useMemo } from 'react';
 
 import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { type ProjectionModel, type SchemaProperty, getSchemaProperties } from '@dxos/schema';
-import { isNotFalsy } from '@dxos/util';
+import { isTruthy } from '@dxos/util';
 
 import { type QueryRefOptions } from '../../hooks';
 import { getRefProps } from '../../util';
@@ -33,7 +35,13 @@ export type FormFieldProps = {
   Custom?: Partial<Record<string, InputComponent>>;
 } & Pick<
   RefFieldProps,
-  'readonly' | 'onQueryRefOptions' | 'createOptionLabel' | 'createOptionIcon' | 'onCreateFromQuery'
+  | 'readonly'
+  | 'onQueryRefOptions'
+  | 'createOptionLabel'
+  | 'createOptionIcon'
+  | 'onCreate'
+  | 'createSchema'
+  | 'createInitialValuePath'
 >;
 
 export const FormField = ({
@@ -45,14 +53,16 @@ export const FormField = ({
   onQueryRefOptions,
   createOptionLabel,
   createOptionIcon,
-  onCreateFromQuery,
+  onCreate,
+  createSchema,
+  createInitialValuePath,
   lookupComponent,
   Custom,
 }: FormFieldProps) => {
   const { ast, name, type, format, title, description, options, examples, array } = property;
   const inputProps = useInputProps(path);
 
-  const label = useMemo(() => title ?? pipe(name, capitalize), [title, name]);
+  const label = useMemo(() => title ?? Function.pipe(name, StringEffect.capitalize), [title, name]);
   const placeholder = useMemo(
     () => (examples?.length ? `Example: "${examples[0]}"` : description),
     [examples, description],
@@ -114,7 +124,9 @@ export const FormField = ({
         onQueryRefOptions={onQueryRefOptions}
         createOptionLabel={createOptionLabel}
         createOptionIcon={createOptionIcon}
-        onCreateFromQuery={onCreateFromQuery}
+        onCreate={onCreate}
+        createSchema={createSchema}
+        createInitialValuePath={createInitialValuePath}
         {...inputProps}
       />
     );
@@ -188,7 +200,7 @@ export const FormField = ({
             onQueryRefOptions={onQueryRefOptions}
             createOptionLabel={createOptionLabel}
             createOptionIcon={createOptionIcon}
-            onCreateFromQuery={onCreateFromQuery}
+            onCreate={onCreate}
             Custom={Custom}
             lookupComponent={lookupComponent}
           />
@@ -222,7 +234,15 @@ export type FormFieldsProps = ThemedClassName<
     Custom?: Partial<Record<string, InputComponent>>;
     onQueryRefOptions?: QueryRefOptions;
   } & Pick<FormFieldProps, 'readonly'> &
-    Pick<RefFieldProps, 'onQueryRefOptions' | 'createOptionLabel' | 'createOptionIcon' | 'onCreateFromQuery'>
+    Pick<
+      RefFieldProps,
+      | 'onQueryRefOptions'
+      | 'createOptionLabel'
+      | 'createOptionIcon'
+      | 'onCreate'
+      | 'createSchema'
+      | 'createInitialValuePath'
+    >
 >;
 
 export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
@@ -282,21 +302,61 @@ export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
         {properties
           .map((property) => {
             return (
-              <FormField
-                key={property.name}
-                property={property}
-                path={[...(path ?? []), property.name]}
-                readonly={readonly}
-                projection={projection}
-                onQueryRefOptions={onQueryRefOptions}
-                lookupComponent={lookupComponent}
-                Custom={Custom}
-                {...props}
-              />
+              <ErrorBoundary key={property.name} path={[...(path ?? []), property.name]}>
+                <FormField
+                  property={property}
+                  path={[...(path ?? []), property.name]}
+                  readonly={readonly}
+                  projection={projection}
+                  onQueryRefOptions={onQueryRefOptions}
+                  lookupComponent={lookupComponent}
+                  Custom={Custom}
+                  {...props}
+                />
+              </ErrorBoundary>
             );
           })
-          .filter(isNotFalsy)}
+          .filter(isTruthy)}
       </div>
     );
   },
 );
+
+type ErrorState = {
+  error: Error | undefined;
+};
+
+type ErrorBoundaryProps = PropsWithChildren<{
+  path?: (string | number)[];
+}>;
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorState> {
+  static getDerivedStateFromError(error: Error): { error: Error } {
+    return { error };
+  }
+
+  override state = { error: undefined };
+
+  override componentDidUpdate(prevProps: ErrorBoundaryProps): void {
+    if (prevProps.path !== this.props.path) {
+      this.resetError();
+    }
+  }
+
+  override render(): ReactNode {
+    if (this.state.error) {
+      return (
+        <div className='flex gap-2 border border-roseFill font-mono text-sm'>
+          <span className='bg-roseFill text-surfaceText pli-1 font-thin'>ERROR</span>
+          {String(this.props.path?.join('.'))}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+
+  private resetError(): void {
+    this.setState({ error: undefined });
+  }
+}

package/src/components/Form/FormContext.tsx

@@ -14,7 +14,7 @@ import React, {
 } from 'react';
 
 import { raise } from '@dxos/debug';
-import { type BaseObject, getValue } from '@dxos/echo-schema';
+import { type BaseObject, getValue } from '@dxos/echo/internal';
 import { type SimpleType, createJsonPath } from '@dxos/effect';
 
 import { type FormHandler, type FormOptions, useForm } from '../../hooks';
@@ -62,7 +62,7 @@ export const FormProvider = ({
   ...formOptions
 }: PropsWithChildren<
   FormOptions<any> & {
-    formRef?: RefObject<HTMLDivElement>;
+    formRef?: RefObject<HTMLDivElement | null>;
     autoSave?: boolean;
   }
 >) => {
@@ -92,7 +92,7 @@ export const FormProvider = ({
         }
       }
     },
-    [form, autoSave],
+    [form.canSave, form.formIsValid, form.handleSave, autoSave],
   );
 
   useEffect(() => {

package/src/components/Form/Input.tsx

@@ -4,7 +4,7 @@
 
 import React, { type FC } from 'react';
 
-import { type FormatEnum } from '@dxos/echo-schema';
+import { type FormatEnum } 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';