@dxos/react-ui-form 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.5ad4a44",
+  "version": "0.8.4-main.66e292d",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -32,50 +32,51 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.4-main.5ad4a44",
-    "@dxos/debug": "0.8.4-main.5ad4a44",
-    "@dxos/echo": "0.8.4-main.5ad4a44",
-    "@dxos/echo-db": "0.8.4-main.5ad4a44",
-    "@dxos/echo-query": "0.8.4-main.5ad4a44",
-    "@dxos/effect": "0.8.4-main.5ad4a44",
-    "@dxos/invariant": "0.8.4-main.5ad4a44",
-    "@dxos/keys": "0.8.4-main.5ad4a44",
-    "@dxos/lit-ui": "0.8.4-main.5ad4a44",
-    "@dxos/react-client": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-components": "0.8.4-main.5ad4a44",
-    "@dxos/log": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-editor": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-list": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-pickers": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-searchlist": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-stack": "0.8.4-main.5ad4a44",
-    "@dxos/live-object": "0.8.4-main.5ad4a44",
-    "@dxos/schema": "0.8.4-main.5ad4a44",
-    "@dxos/util": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-types": "0.8.4-main.5ad4a44"
+    "@dxos/async": "0.8.4-main.66e292d",
+    "@dxos/debug": "0.8.4-main.66e292d",
+    "@dxos/echo": "0.8.4-main.66e292d",
+    "@dxos/echo-db": "0.8.4-main.66e292d",
+    "@dxos/echo-query": "0.8.4-main.66e292d",
+    "@dxos/effect": "0.8.4-main.66e292d",
+    "@dxos/invariant": "0.8.4-main.66e292d",
+    "@dxos/keys": "0.8.4-main.66e292d",
+    "@dxos/lit-ui": "0.8.4-main.66e292d",
+    "@dxos/log": "0.8.4-main.66e292d",
+    "@dxos/live-object": "0.8.4-main.66e292d",
+    "@dxos/react-client": "0.8.4-main.66e292d",
+    "@dxos/react-ui-components": "0.8.4-main.66e292d",
+    "@dxos/react-ui-editor": "0.8.4-main.66e292d",
+    "@dxos/react-ui-list": "0.8.4-main.66e292d",
+    "@dxos/react-ui-pickers": "0.8.4-main.66e292d",
+    "@dxos/react-ui-searchlist": "0.8.4-main.66e292d",
+    "@dxos/react-ui-stack": "0.8.4-main.66e292d",
+    "@dxos/react-ui-types": "0.8.4-main.66e292d",
+    "@dxos/schema": "0.8.4-main.66e292d",
+    "@dxos/util": "0.8.4-main.66e292d",
+    "@dxos/types": "0.8.4-main.66e292d"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react-dom": "~19.2.2",
     "effect": "3.18.3",
     "fast-check": "^3.19.0",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/echo-signals": "0.8.4-main.5ad4a44",
-    "@dxos/random": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.5ad4a44",
-    "@dxos/storybook-utils": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-theme": "0.8.4-main.5ad4a44"
+    "@dxos/echo-signals": "0.8.4-main.66e292d",
+    "@dxos/random": "0.8.4-main.66e292d",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.66e292d",
+    "@dxos/storybook-utils": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
+    "@dxos/react-ui": "0.8.4-main.66e292d"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-theme": "0.8.4-main.5ad4a44"
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d"
   },
   "publishConfig": {
     "access": "public"

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

@@ -15,7 +15,7 @@ const meta = {
   title: 'ui/react-ui-form/ControlSection',
   component: ControlSection,
   render: (args) => (
-    <ControlPage classNames='w-[40rem]'>
+    <ControlPage classNames='is-[40rem]'>
       <ControlSection {...args} />
     </ControlPage>
   ),

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/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

@@ -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 { withSurfaceVariantsLayout, withTheme } from '@dxos/react-ui/testing';
-import { Testing } from '@dxos/schema/testing';
+import { withLayoutVariants, withTheme } from '@dxos/react-ui/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 ContactType.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 [];
@@ -88,7 +86,7 @@ const meta = {
   title: 'ui/react-ui-form/Form',
   component: Form as any,
   render: DefaultStory,
-  decorators: [withTheme, withSurfaceVariantsLayout()],
+  decorators: [withTheme, withLayoutVariants()],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -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',
@@ -147,10 +145,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: 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,8 @@ 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.
   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>({
+export const Form = <T extends AnyProperties>({
   classNames,
+  id,
   testId,
   values: initialValues,
   autoFocus,
@@ -92,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,12 @@ 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 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('button save')}
+          label={t('save button label')}
           onClick={handleSave}
         />
       )}

package/src/components/Form/FormContent.tsx

@@ -6,7 +6,7 @@ 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, { forwardRef, useMemo } from 'react';
+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';
@@ -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) {
@@ -302,17 +302,18 @@ 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(isTruthy)}
@@ -320,3 +321,42 @@ export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
     );
   },
 );
+
+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,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/RefField.tsx

@@ -2,6 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
+import '@dxos/lit-ui/dx-tag-picker.pcss';
+
 import type * as Schema from 'effect/Schema';
 import type * as SchemaAST from 'effect/SchemaAST';
 import React, { useCallback, useMemo } from 'react';
@@ -70,7 +72,11 @@ export const RefField = ({
     () => (ast ? findAnnotation<ReferenceAnnotationValue>(ast, ReferenceAnnotationId) : undefined),
     [ast],
   );
-  const { options: availableOptions, loading: _loading } = useQueryRefOptions({ refTypeInfo, onQueryRefOptions });
+  const {
+    options: availableOptions,
+    update: updateOptions,
+    loading: _loading,
+  } = useQueryRefOptions({ refTypeInfo, onQueryRefOptions });
 
   if ((refTypeInfo && refTypeInfo?.typename === getTypeAnnotation(Expando)?.typename) || !onQueryRefOptions) {
     // If ref type is expando, fall back to taking a DXN in string format.
@@ -135,6 +141,14 @@ export const RefField = ({
     [availableOptions, array, onValueChange],
   );
 
+  const handleCreate = useCallback(
+    (values: any) => {
+      onCreate?.(values);
+      updateOptions();
+    },
+    [onCreate, updateOptions],
+  );
+
   if (!refTypeInfo) {
     return null;
   }
@@ -211,7 +225,7 @@ export const RefField = ({
               createOptionLabel={createOptionLabel}
               createOptionIcon={createOptionIcon}
               createInitialValuePath={createInitialValuePath}
-              onCreate={onCreate}
+              onCreate={handleCreate}
             />
           </ObjectPicker.Root>
         )}

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

@@ -121,7 +121,7 @@ export const SelectOptionInput = ({ type, label, readonly, getStatus, getValue,
             readonly={!!readonly}
           >
             {({ items }) => (
-              <div role='list' className='w-full overflow-auto'>
+              <div role='list' className='is-full overflow-auto'>
                 {items?.map((item) => (
                   <div key={item.id}>
                     <List.Item

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;
   }