@dxos/react-ui-form 0.8.4-main.b97322e → 0.8.4-main.dedc0f3

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

@@ -9,65 +9,68 @@ import { Schema } from 'effect';
 import React, { useCallback, useState } from 'react';
 
 import { ContactType } from '@dxos/client/testing';
-import { type BaseObject, Expando, Format, getObjectDXN, Ref, type TypeAnnotation } from '@dxos/echo-schema';
+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 { Testing } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { SelectInput } from './Defaults';
-import { Form, type FormProps } from './Form';
 import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
-const AddressSchema = Schema.Struct({
-  street: Schema.optional(Schema.String.annotations({ title: 'Street' })),
-  city: Schema.optional(Schema.String.annotations({ title: 'City' })),
-  zip: Schema.optional(Schema.String.pipe(Schema.pattern(/^\d{5}(-\d{4})?$/)).annotations({ title: 'ZIP' })),
-  location: Schema.optional(Format.GeoPoint.annotations({ title: 'Location' })),
-}).annotations({ title: 'Address' });
-
-// TODO(burdon): Translations?
-const TestSchema = Schema.Struct({
-  name: Schema.optional(Schema.String.annotations({ title: 'Name' })),
-  active: Schema.optional(Schema.Boolean.annotations({ title: 'Active' })),
-  rank: Schema.optional(Schema.Number.annotations({ title: 'Rank' })),
-  website: Schema.optional(Format.URL.annotations({ title: 'Website' })),
-  address: Schema.optional(AddressSchema),
-}).pipe(Schema.mutable);
-
-type TestType = Schema.Schema.Type<typeof TestSchema>;
-
-type StoryProps<T extends BaseObject> = { schema: Schema.Schema<T> } & FormProps<T>;
+import { SelectInput } from './Defaults';
+import { Form, type FormProps } from './Form';
 
-const DefaultStory = <T extends BaseObject>({ schema, values: initialValues, ...props }: StoryProps<T>) => {
+type StoryProps<T extends BaseObject> = {
+  debug?: boolean;
+  schema: Type.Obj.Any;
+} & FormProps<T>;
+
+const DefaultStory = <T extends BaseObject = any>({
+  debug,
+  schema,
+  values: initialValues,
+  ...props
+}: StoryProps<T>) => {
   const [values, setValues] = useState(initialValues);
   const handleSave = useCallback<NonNullable<FormProps<T>['onSave']>>((values) => {
     setValues(values);
   }, []);
 
+  if (debug) {
+    return (
+      <TestLayout json={{ values, schema: schema.ast }}>
+        <TestPanel>
+          <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />
+        </TestPanel>
+      </TestLayout>
+    );
+  }
+
   return <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />;
 };
 
-const DebugStory = <T extends BaseObject>({ schema, values: initialValues, ...props }: StoryProps<T>) => {
-  const [values, setValues] = useState(initialValues);
-  const handleSave = useCallback<NonNullable<FormProps<T>['onSave']>>((values) => {
-    setValues(values);
+const RefStory = <T extends BaseObject = any>(props: StoryProps<T>) => {
+  const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
+    switch (typeInfo.typename) {
+      case ContactType.typename:
+        return [
+          { dxn: getObjectDXN(contact1)!, label: 'John Coltraine' },
+          { dxn: getObjectDXN(contact2)!, label: 'Erykah Badu' },
+        ];
+      default:
+        return [];
+    }
   }, []);
 
-  return (
-    <TestLayout json={{ values, schema: schema.ast.toJSON() }}>
-      <TestPanel>
-        <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />
-      </TestPanel>
-    </TestLayout>
-  );
+  return <DefaultStory<T> onQueryRefOptions={onQueryRefOptions} {...props} />;
 };
 
-const meta: Meta<StoryProps<any>> = {
+const meta = {
   title: 'ui/react-ui-form/Form',
-  component: Form<any>,
-  render: DebugStory,
+  component: Form as any,
+  render: DefaultStory,
   decorators: [withLayout({ fullscreen: true }), withTheme],
   parameters: {
     translations,
@@ -78,17 +81,33 @@ const meta: Meta<StoryProps<any>> = {
       description: 'Readonly',
     },
   },
-};
+} satisfies Meta<StoryProps<any>>;
 
 export default meta;
 
-type Story<T extends BaseObject> = StoryObj<StoryProps<T>>;
+const AddressSchema = Schema.Struct({
+  street: Schema.optional(Schema.String.annotations({ title: 'Street' })),
+  city: Schema.optional(Schema.String.annotations({ title: 'City' })),
+  zip: Schema.optional(Schema.String.pipe(Schema.pattern(/^\d{5}(-\d{4})?$/)).annotations({ title: 'ZIP' })),
+  location: Schema.optional(Format.GeoPoint.annotations({ title: 'Location' })),
+}).annotations({ title: 'Address' });
 
-export const Default: Story<TestType> = {
-  render: DefaultStory,
+const ContactSchema = Schema.Struct({
+  name: Schema.optional(Schema.String.annotations({ title: 'Name' })),
+  active: Schema.optional(Schema.Boolean.annotations({ title: 'Active' })),
+  rank: Schema.optional(Schema.Number.annotations({ title: 'Rank' })),
+  website: Schema.optional(Format.URL.annotations({ title: 'Website' })),
+  address: Schema.optional(AddressSchema),
+}).pipe(Schema.mutable);
+
+type ContactSchema = Schema.Schema.Type<typeof ContactSchema>;
+
+type Story = StoryObj<StoryProps<any>>;
+
+export const Default: Story = {
   decorators: [withSurfaceVariantsLayout(), withTheme],
   args: {
-    schema: TestSchema,
+    schema: ContactSchema,
     values: {
       name: 'DXOS',
       active: true,
@@ -100,8 +119,9 @@ export const Default: Story<TestType> = {
   },
 };
 
-export const Organization: Story<Schema.Schema.Type<typeof Testing.OrganizationSchema>> = {
+export const Organization: Story = {
   args: {
+    debug: true,
     schema: Testing.OrganizationSchema,
     values: {
       name: 'DXOS',
@@ -111,8 +131,9 @@ export const Organization: Story<Schema.Schema.Type<typeof Testing.OrganizationS
   },
 };
 
-export const OrganizationAutoSave: Story<Schema.Schema.Type<typeof Testing.OrganizationSchema>> = {
+export const OrganizationAutoSave: Story = {
   args: {
+    debug: true,
     schema: Testing.OrganizationSchema,
     values: {
       name: 'DXOS',
@@ -125,15 +146,20 @@ export const OrganizationAutoSave: Story<Schema.Schema.Type<typeof Testing.Organ
 
 // 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',
-//     },
-//   },
-// };
+// Property name is missing in type EncodedReference but required in type
+export const Contact: Story = {
+  args: {
+    debug: true,
+    schema: Testing.ContactSchema,
+    values: {
+      name: 'Bot',
+    },
+  },
+};
+
+//
+// Union
+//
 
 const ShapeSchema = Schema.Struct({
   shape: Schema.optional(
@@ -150,10 +176,11 @@ const ShapeSchema = Schema.Struct({
   ),
 }).pipe(Schema.mutable);
 
-type ShapeType = Schema.Schema.Type<typeof ShapeSchema>;
+type ShapeSchema = Schema.Schema.Type<typeof ShapeSchema>;
 
-export const DiscriminatedShape: Story<ShapeType> = {
+export const DiscriminatedShape: StoryObj<StoryProps<ShapeSchema>> = {
   args: {
+    debug: true,
     schema: ShapeSchema,
     readonly: false,
     values: {
@@ -176,15 +203,20 @@ export const DiscriminatedShape: Story<ShapeType> = {
   },
 };
 
+//
+// Arrays
+//
+
 const ArraysSchema = Schema.Struct({
   names: Schema.Array(Schema.String.pipe(Schema.nonEmptyString())),
   addresses: Schema.Array(AddressSchema),
 }).pipe(Schema.mutable);
 
-type ArraysType = Schema.Schema.Type<typeof ArraysSchema>;
+type ArraysSchema = Schema.Schema.Type<typeof ArraysSchema>;
 
-export const Arrays: StoryObj<FormProps<ArraysType>> = {
+export const Arrays: StoryObj<StoryProps<ArraysSchema>> = {
   args: {
+    debug: true,
     schema: ArraysSchema,
     readonly: false,
     values: {
@@ -194,6 +226,34 @@ export const Arrays: StoryObj<FormProps<ArraysType>> = {
   },
 };
 
+//
+// Tuple
+//
+
+// TODO(wittjosiah): Only GeoPoint is works currently.
+const TupleSchema = Schema.Struct({
+  tuple: Schema.Tuple(Schema.Number, Schema.String, Schema.Boolean),
+  geopoint: Format.GeoPoint,
+}).pipe(Schema.mutable);
+
+type TupleSchema = Schema.Schema.Type<typeof TupleSchema>;
+
+export const Tuple: StoryObj<StoryProps<TupleSchema>> = {
+  args: {
+    debug: true,
+    schema: TupleSchema,
+    readonly: false,
+    values: {
+      tuple: [1, 'a', true],
+      geopoint: [-122.41941, 37.77492],
+    },
+  },
+};
+
+//
+// Enum
+//
+
 const ColorSchema = Schema.Struct({
   color: Schema.Union(Schema.Literal('red'), Schema.Literal('green'), Schema.Literal('blue')).annotations({
     title: 'Color',
@@ -202,8 +262,9 @@ const ColorSchema = Schema.Struct({
 
 type ColorType = Schema.Schema.Type<typeof ColorSchema>;
 
-export const Enum: StoryObj<FormProps<ColorType>> = {
+export const Enum: StoryObj<StoryProps<ColorType>> = {
   args: {
+    debug: true,
     schema: ColorSchema,
     readonly: false,
     values: {
@@ -212,6 +273,10 @@ export const Enum: StoryObj<FormProps<ColorType>> = {
   },
 };
 
+//
+// Refs
+//
+
 const RefSchema = Schema.Struct({
   contact: Ref(ContactType).annotations({ title: 'Contact Reference' }),
   optionalContact: Schema.optional(Ref(ContactType).annotations({ title: 'Optional Contact Reference' })),
@@ -219,48 +284,19 @@ const RefSchema = Schema.Struct({
   unknownExpando: Schema.optional(Ref(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 RefStory = ({ values: initialValues, readonly }: FormProps<any>) => {
-  const [values, setValues] = useState(initialValues);
-  const handleSave = useCallback<NonNullable<FormProps<any>['onSave']>>((values) => {
-    setValues(values);
-  }, []);
-
-  const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
-    switch (typeInfo.typename) {
-      case ContactType.typename:
-        return [
-          { dxn: getObjectDXN(contact1)!, label: 'John Coltraine' },
-          { dxn: getObjectDXN(contact2)!, label: 'Erykah Badu' },
-        ];
-      default:
-        return [];
-    }
-  }, []);
-
-  return (
-    <TestLayout json={{ values, schema: RefSchema.ast.toJSON() }}>
-      <TestPanel>
-        <Form
-          schema={RefSchema}
-          values={values}
-          readonly={readonly}
-          onSave={handleSave}
-          onQueryRefOptions={onQueryRefOptions}
-        />
-      </TestPanel>
-    </TestLayout>
-  );
-};
-
-export const Refs: StoryObj<FormProps<ContactType>> = {
+export const Refs: StoryObj<StoryProps<RefSchema>> = {
   render: RefStory,
   args: {
+    debug: true,
+    schema: RefSchema,
     readonly: false,
     values: {
       refArray: [Ref.make(contact1), Ref.make(contact2)],
-    } as any,
+    },
   },
 };

package/src/components/Form/Form.tsx

@@ -2,19 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useFocusFinders } from '@fluentui/react-tabster';
 import { type Schema } from 'effect';
 import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
 
 import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { cardDialogOverflow, cardSpacing } from '@dxos/react-ui-stack';
-import { type SchemaProperty } from '@dxos/schema';
+import { type ProjectionModel, type SchemaProperty } from '@dxos/schema';
+
+import { type FormOptions } from '../../hooks';
 
 import { FormActions, type FormOuterSpacing } from './FormActions';
 import { FormFields, type FormFieldsProps } from './FormContent';
 import { FormProvider } from './FormContext';
-import { type InputProps, type InputComponent } from './Input';
-import { type FormOptions } from '../../hooks';
+import { type InputComponent, type InputProps } from './Input';
 
 export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
 
@@ -33,6 +35,7 @@ export type FormProps<T extends BaseObject> = ThemedClassName<{
   // TODO(burdon): Change to JsonPath includes/excludes.
   filter?: PropsFilter<T>;
   sort?: PropertyKey<T>[];
+  projection?: ProjectionModel;
   autoSave?: boolean;
   outerSpacing?: FormOuterSpacing;
   onCancel?: () => void;
@@ -48,8 +51,8 @@ export const Form = <T extends BaseObject>({
   readonly,
   autoSave,
   outerSpacing = true,
-  onCancel,
   schema,
+  onCancel,
   onValuesChanged,
   onValidate,
   onSave,
@@ -57,19 +60,20 @@ export const Form = <T extends BaseObject>({
 }: FormProps<T>) => {
   const formRef = useRef<HTMLDivElement>(null);
 
-  // TODO(burdon): Rename.
-  const handleValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
-
-  // Focus the first input element within this form.
+  // Focus the first focusable element within this form.
+  const { findFirstFocusable } = useFocusFinders();
   useEffect(() => {
     if (autoFocus && formRef.current) {
-      const input = formRef.current.querySelector('input');
-      if (input) {
-        input.focus();
+      const firstFocusable = findFirstFocusable(formRef.current);
+      if (firstFocusable) {
+        firstFocusable.focus();
       }
     }
   }, [autoFocus]);
 
+  // TODO(burdon): Name?
+  const handleValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
+
   return (
     <FormProvider
       formRef={formRef}
@@ -99,7 +103,7 @@ export const Form = <T extends BaseObject>({
           readonly={readonly}
           schema={schema}
         />
-        {(onCancel || onSave) && !autoSave && (
+        {(onCancel || onSave) && !autoSave && !readonly && (
           <FormActions readonly={readonly} onCancel={onCancel} outerSpacing={outerSpacing} />
         )}
       </div>

package/src/components/Form/FormActions.tsx

@@ -8,9 +8,10 @@ import { IconButton, useTranslation } from '@dxos/react-ui';
 import { cardSpacing } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
 
-import { useFormContext } from './FormContext';
 import { translationKey } from '../../translations';
 
+import { useFormContext } from './FormContext';
+
 export type FormOuterSpacing = boolean | 'blockStart-0' | 'scroll-fields';
 
 export type FormActionsProps = {

package/src/components/Form/FormContent.tsx

@@ -9,36 +9,43 @@ import React, { 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 { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
+import { type ProjectionModel, type SchemaProperty, getSchemaProperties } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
+import { type QueryRefOptions } from '../../hooks';
+import { getRefProps } from '../../util';
+
 import { ArrayField } from './ArrayField';
 import { SelectInput } from './Defaults';
+import { getInputComponent } from './factory';
 import { type ComponentLookup } from './Form';
-import { useInputProps, useFormValues } from './FormContext';
+import { useFormValues, useInputProps } from './FormContext';
 import { type InputComponent } from './Input';
-import { RefField } from './RefField';
-import { getInputComponent } from './factory';
-import { type QueryRefOptions } from '../../hooks';
-import { getRefProps } from '../../util';
+import { RefField, type RefFieldProps } from './RefField';
 
 export type FormFieldProps = {
   property: SchemaProperty<any>;
   path?: (string | number)[];
-  readonly?: boolean;
   /** Used to indicate if input should be presented inline (e.g. for array items). */
   inline?: boolean;
-  onQueryRefOptions?: QueryRefOptions;
+  projection?: ProjectionModel;
   lookupComponent?: ComponentLookup;
   Custom?: Partial<Record<string, InputComponent>>;
-};
+} & Pick<
+  RefFieldProps,
+  'readonly' | 'onQueryRefOptions' | 'createOptionLabel' | 'createOptionIcon' | 'onCreateFromQuery'
+>;
 
 export const FormField = ({
   property,
   path,
   readonly,
   inline,
+  projection,
   onQueryRefOptions,
+  createOptionLabel,
+  createOptionIcon,
+  onCreateFromQuery,
   lookupComponent,
   Custom,
 }: FormFieldProps) => {
@@ -62,7 +69,7 @@ export const FormField = ({
       type,
       format,
       label,
-      disabled: readonly,
+      readonly,
       placeholder,
       ...inputProps,
     },
@@ -82,7 +89,7 @@ export const FormField = ({
         label={label}
         inputOnly={inline}
         placeholder={placeholder}
-        disabled={readonly}
+        readonly={readonly}
         {...inputProps}
       />
     );
@@ -102,9 +109,12 @@ export const FormField = ({
         format={format}
         label={label}
         placeholder={placeholder}
-        disabled={readonly}
+        readonly={readonly}
         inputOnly={inline}
         onQueryRefOptions={onQueryRefOptions}
+        createOptionLabel={createOptionLabel}
+        createOptionIcon={createOptionIcon}
+        onCreateFromQuery={onCreateFromQuery}
         {...inputProps}
       />
     );
@@ -131,7 +141,7 @@ export const FormField = ({
         label={label}
         inputOnly={inline}
         placeholder={placeholder}
-        disabled={readonly}
+        readonly={readonly}
         {...inputProps}
       />
     );
@@ -146,7 +156,7 @@ export const FormField = ({
       <SelectInput
         type={type}
         format={format}
-        disabled={readonly}
+        readonly={readonly}
         inputOnly={inline}
         label={label}
         options={options.map((option) => ({ value: option, label: String(option) }))}
@@ -174,7 +184,11 @@ export const FormField = ({
             schema={Schema.make(typeLiteral)}
             path={path}
             readonly={readonly}
+            projection={projection}
             onQueryRefOptions={onQueryRefOptions}
+            createOptionLabel={createOptionLabel}
+            createOptionIcon={createOptionIcon}
+            onCreateFromQuery={onCreateFromQuery}
             Custom={Custom}
             lookupComponent={lookupComponent}
           />
@@ -186,36 +200,82 @@ export const FormField = ({
   return null;
 };
 
-export type FormFieldsProps = ThemedClassName<{
-  testId?: string;
-  readonly?: boolean;
-  schema: Schema.Schema.All;
-  /**
-   * Path to the current object from the root. Used with nested forms.
-   */
-  path?: (string | number)[];
-  filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
-  sort?: string[];
-  lookupComponent?: ComponentLookup;
-  /**
-   * Map of custom renderers for specific properties.
-   * Prefer lookupComponent for plugin specific input surfaces.
-   */
-  Custom?: Partial<Record<string, InputComponent>>;
-  onQueryRefOptions?: QueryRefOptions;
-}>;
+export type FormFieldsProps = ThemedClassName<
+  {
+    testId?: string;
+    schema: Schema.Schema.All;
+    /**
+     * Path to the current object from the root. Used with nested forms.
+     */
+    path?: (string | number)[];
+    filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
+    sort?: string[];
+    /**
+     * Optional projection for projection-based field management
+     */
+    projection?: ProjectionModel;
+    lookupComponent?: ComponentLookup;
+    /**
+     * Map of custom renderers for specific properties.
+     * Prefer lookupComponent for plugin specific input surfaces.
+     */
+    Custom?: Partial<Record<string, InputComponent>>;
+    onQueryRefOptions?: QueryRefOptions;
+  } & Pick<FormFieldProps, 'readonly'> &
+    Pick<RefFieldProps, 'onQueryRefOptions' | 'createOptionLabel' | 'createOptionIcon' | 'onCreateFromQuery'>
+>;
 
 export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
   (
-    { classNames, testId, schema, path, filter, sort, readonly, lookupComponent, Custom, onQueryRefOptions },
+    {
+      classNames,
+      schema,
+      path,
+      filter,
+      sort,
+      projection,
+      readonly,
+      lookupComponent,
+      Custom,
+      onQueryRefOptions,
+      ...props
+    },
     forwardRef,
   ) => {
     const values = useFormValues(path);
     const properties = useMemo(() => {
       const props = getSchemaProperties(schema.ast, values);
+
+      // Use projection-based field management when view and projection are available
+      if (projection) {
+        const fieldProjections = projection.getFieldProjections();
+        const hiddenProperties = new Set(projection.getHiddenProperties());
+
+        // Filter properties to only include visible ones and order by projection
+        const visibleProps = props.filter((prop) => !hiddenProperties.has(prop.name));
+        const orderedProps: SchemaProperty<any>[] = [];
+
+        // Add properties in projection field order
+        for (const fieldProjection of fieldProjections) {
+          const fieldPath = String(fieldProjection.field.path);
+          const prop = visibleProps.find((p) => p.name === fieldPath);
+          if (prop) {
+            orderedProps.push(prop);
+          }
+        }
+
+        // Add any remaining properties not in projection
+        const projectionPaths = new Set(fieldProjections.map((fp) => String(fp.field.path)));
+        const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name));
+        orderedProps.push(...remainingProps);
+
+        return orderedProps;
+      }
+
+      // Fallback to legacy filter/sort behavior
       const filtered = filter ? filter(props) : props;
       return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
-    }, [schema, values, filter, sort]);
+    }, [schema, values, filter, sort, projection?.fields]);
 
     return (
       <div role='form' className={mx('is-full', classNames)} ref={forwardRef}>
@@ -227,9 +287,11 @@ export const FormFields = forwardRef<HTMLDivElement, FormFieldsProps>(
                 property={property}
                 path={[...(path ?? []), property.name]}
                 readonly={readonly}
+                projection={projection}
                 onQueryRefOptions={onQueryRefOptions}
                 lookupComponent={lookupComponent}
                 Custom={Custom}
+                {...props}
               />
             );
           })

package/src/components/Form/FormContext.tsx

@@ -3,19 +3,19 @@
 //
 
 import React, {
-  createContext,
+  type FocusEvent,
+  type PropsWithChildren,
   type RefObject,
+  createContext,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
-  type FocusEvent,
-  type PropsWithChildren,
-  useCallback,
 } from 'react';
 
 import { raise } from '@dxos/debug';
 import { type BaseObject, getValue } from '@dxos/echo-schema';
-import { createJsonPath, type SimpleType } from '@dxos/effect';
+import { type SimpleType, createJsonPath } from '@dxos/effect';
 
 import { type FormHandler, type FormOptions, useForm } from '../../hooks';