@dxos/react-ui-form 0.7.1-staging.599df14

package/dist/types/src/components/testing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../src/components/testing.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,eAAO,MAAM,SAAS,6BAA8B,eAAe,CAAC,iBAAiB,CAAC,sBAIrF,CAAC;AAEF,eAAO,MAAM,UAAU,mCAAoC,eAAe,CAAC,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,CAAC,CAAC,sBAO5G,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './useForm';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

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

@@ -0,0 +1,58 @@
+import { type FocusEvent } from 'react';
+import { type SimpleType, type S } from '@dxos/effect';
+import { type PropertyKey, type ValidationError } from '@dxos/schema';
+/**
+ * Return type from `useForm` hook.
+ */
+export type FormHandler<T extends object = {}> = {
+    values: T;
+    errors: Record<PropertyKey<T>, string>;
+    touched: Record<PropertyKey<T>, boolean>;
+    changed: Record<PropertyKey<T>, boolean>;
+    canSubmit: boolean;
+    handleSubmit: () => void;
+    getStatus: (property: PropertyKey<T>) => {
+        status?: 'error';
+        error?: string;
+    };
+    getValue: <V>(property: PropertyKey<T>) => V;
+    onValueChange: <V>(property: PropertyKey<T>, type: SimpleType, value: V) => void;
+    onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+};
+/**
+ * Hook options.
+ */
+export interface FormOptions<T extends object> {
+    schema: S.Schema<T>;
+    initialValues: T;
+    /**
+     * Callback for value changes. Note: This is called even when values are invalid.
+     * Sometimes the parent component may want to know about changes even if the form is
+     * in an invalid state.
+     */
+    onValuesChanged?: (values: T) => void;
+    /**
+     * Custom validation function that runs only after schema validation passes.
+     * Use this for complex validation logic that can't be expressed in the schema.
+     * @returns Array of validation errors, or undefined if validation passes
+     */
+    onValidate?: (values: T) => ValidationError[] | undefined;
+    /**
+     * Called when the form is valid.
+     */
+    onValid?: (values: T, meta: {
+        changed: FormHandler<T>['changed'];
+    }) => void;
+    /**
+     * Called when the form is submitted and passes validation.
+     */
+    onSubmit?: (values: T, meta: {
+        changed: FormHandler<T>['changed'];
+    }) => 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 object>({ schema, initialValues, onValuesChanged, onValidate, onValid, onSubmit, }: FormOptions<T>) => FormHandler<T>;
+//# sourceMappingURL=useForm.d.ts.map

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

@@ -0,0 +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,CAAC,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAkB,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEtF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,EAAE,IAAI;IAK/C,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,MAAM;IAC3C,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,MAAM,8EAOrC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAiIhC,CAAC"}

package/dist/types/src/index.d.ts

@@ -0,0 +1,6 @@
+import translations from './translations';
+export * from './components';
+export * from './hooks';
+export * from './util';
+export { translations };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/types/src/translations.d.ts

@@ -0,0 +1,46 @@
+export declare const translationKey = "react-ui-form";
+declare const _default: {
+    'en-US': {
+        "react-ui-form": {
+            'fields label': string;
+            'button add property': string;
+            'field property label': string;
+            'field property placeholder': string;
+            'field format label': string;
+            'field path label': string;
+            'add field': string;
+            'delete field': string;
+            'field limit reached': string;
+            'button cancel': string;
+            'button save': string;
+            'format boolean': string;
+            'format currency': string;
+            'format date': string;
+            'format date-time': string;
+            'format did': string;
+            'format duration': string;
+            'format email': string;
+            'format formula': string;
+            'format hostname': string;
+            'format integer': string;
+            'format json': string;
+            'format latlng': string;
+            'format markdown': string;
+            'format percent': string;
+            'format ref': string;
+            'format regex': string;
+            'format string': string;
+            'format text': string;
+            'format time': string;
+            'format timestamp': string;
+            'format user': string;
+            'format number': string;
+            'format uri': string;
+            'format uuid': string;
+            'placeholder latitude': string;
+            'placeholder longitude': string;
+        };
+    };
+}[];
+export default _default;
+//# sourceMappingURL=translations.d.ts.map

package/dist/types/src/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE9C,wBAoDE"}

package/dist/types/src/util/field.d.ts

@@ -0,0 +1,22 @@
+import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { type ValidationError } from '@dxos/schema';
+/**
+ * Parse value by field value type.
+ * Used by Table, Sheet, etc.
+ * Handles various data types including booleans, numbers, dates, and strings.
+ * Returns undefined for empty or null inputs.
+ */
+export type ParseProps = {
+    type?: TypeEnum;
+    format?: FormatEnum;
+    value: any;
+};
+export declare const parseValue: ({ type, format, value }: ParseProps) => any;
+export type CellClassesForFieldTypeProps = {
+    type?: TypeEnum;
+    format?: FormatEnum;
+};
+export declare const cellClassesForFieldType: ({ type, format }: CellClassesForFieldTypeProps) => string[] | undefined;
+export declare const cellClassesForRowSelection: (selected: boolean) => string[] | undefined;
+export declare const pathNotUniqueError: (path: string) => ValidationError;
+//# sourceMappingURL=field.d.ts.map

package/dist/types/src/util/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../src/util/field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,UAAU,4BAA6B,UAAU,QAoE7D,CAAC;AAGF,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,qBAAsB,4BAA4B,KAAG,MAAM,EAAE,GAAG,SAiCnG,CAAC;AAEF,eAAO,MAAM,0BAA0B,aAAc,OAAO,yBAAsD,CAAC;AAGnH,eAAO,MAAM,kBAAkB,SAAU,MAAM,KAAG,eAGhD,CAAC"}

package/dist/types/src/util/formatting.d.ts

@@ -0,0 +1,15 @@
+import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+type ValueFormatProps = {
+    type: TypeEnum;
+    format?: FormatEnum | undefined;
+    value: any;
+    locale?: string | undefined;
+};
+/**
+ * Format value by type.
+ * Used by Table, Sheet, etc.
+ */
+export declare const formatForDisplay: ({ type, format, value, locale }: ValueFormatProps) => string;
+export declare const formatForEditing: ({ type, format, value, locale }: ValueFormatProps) => string;
+export {};
+//# sourceMappingURL=formatting.d.ts.map

package/dist/types/src/util/formatting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../src/util/formatting.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF;;;GAGG;AAGH,eAAO,MAAM,gBAAgB,oCAAiD,gBAAgB,KAAG,MA+DhG,CAAC;AAEF,eAAO,MAAM,gBAAgB,oCAAiD,gBAAgB,KAAG,MA+ChG,CAAC"}

package/dist/types/src/util/index.d.ts

@@ -0,0 +1,3 @@
+export * from './field';
+export * from './formatting';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/util/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@dxos/react-ui-form",
+  "version": "0.7.1-staging.599df14",
+  "description": "Data components.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {}
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-flourish": "^1.1.2",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
+    "@effect/schema": "^0.75.5",
+    "@radix-ui/react-context": "^1.0.0",
+    "date-fns": "^3.3.1",
+    "effect": "^3.9.2",
+    "jsonpath": "^1.1.1",
+    "@dxos/async": "0.7.1-staging.599df14",
+    "@dxos/echo-db": "0.7.1-staging.599df14",
+    "@dxos/echo-schema": "0.7.1-staging.599df14",
+    "@dxos/debug": "0.7.1-staging.599df14",
+    "@dxos/effect": "0.7.1-staging.599df14",
+    "@dxos/invariant": "0.7.1-staging.599df14",
+    "@dxos/log": "0.7.1-staging.599df14",
+    "@dxos/keys": "0.7.1-staging.599df14",
+    "@dxos/react-client": "0.7.1-staging.599df14",
+    "@dxos/react-ui-list": "0.7.1-staging.599df14",
+    "@dxos/react-ui-types": "0.7.1-staging.599df14",
+    "@dxos/schema": "0.7.1-staging.599df14",
+    "@dxos/util": "0.7.1-staging.599df14"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/jsonpath": "~0.2.4",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "fast-check": "^3.19.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "5.4.7",
+    "@dxos/echo-signals": "0.7.1-staging.599df14",
+    "@dxos/react-ui": "0.7.1-staging.599df14",
+    "@dxos/react-ui-syntax-highlighter": "0.7.1-staging.599df14",
+    "@dxos/react-ui-theme": "0.7.1-staging.599df14",
+    "@dxos/storybook-utils": "0.7.1-staging.599df14",
+    "@dxos/random": "0.7.1-staging.599df14"
+  },
+  "peerDependencies": {
+    "@effect/schema": "^0.75.5",
+    "@phosphor-icons/react": "^2.1.5",
+    "effect": "^3.9.2",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui-theme": "0.7.1-staging.599df14",
+    "@dxos/react-ui": "0.7.1-staging.599df14"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { createMutableSchema } from '@dxos/echo-schema/testing';
+import { log } from '@dxos/log';
+import { ViewProjection } from '@dxos/schema';
+import { TestSchema, testView } from '@dxos/schema/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { FieldEditor, type FieldEditorProps } from './FieldEditor';
+import translations from '../../translations';
+import { TestLayout, TestPanel } from '../testing';
+
+type StoryProps = FieldEditorProps;
+
+const DefaultStory = (props: FieldEditorProps) => {
+  const handleComplete: FieldEditorProps['onClose'] = () => {
+    log.info('onClose', { props });
+  };
+
+  return (
+    <TestLayout json={{ props }}>
+      <TestPanel>
+        <FieldEditor {...props} onClose={handleComplete} />
+      </TestPanel>
+    </TestLayout>
+  );
+};
+
+const meta: Meta<StoryProps> = {
+  title: 'ui/react-ui-form/FieldEditor',
+  component: FieldEditor,
+  render: DefaultStory,
+  decorators: [withLayout({ fullscreen: true }), withTheme],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<StoryProps>;
+
+export const Default: Story = {
+  args: {
+    projection: new ViewProjection(createMutableSchema(TestSchema), testView),
+    view: testView,
+    field: testView.fields[0],
+  },
+};

package/src/components/FieldEditor/FieldEditor.tsx

@@ -0,0 +1,167 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { type SchemaResolver } from '@dxos/echo-db';
+import { FormatEnum, FormatEnums, formatToType, type MutableSchema } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+import { useTranslation } from '@dxos/react-ui';
+import {
+  getFormatSchema,
+  getSchemaProperties,
+  sortProperties,
+  type FieldType,
+  type PropertyType,
+  type ViewType,
+  type ViewProjection,
+} from '@dxos/schema';
+
+import { translationKey } from '../../translations';
+import { Form, type FormProps, SelectInput } from '../Form';
+
+export type FieldEditorProps = {
+  view: ViewType;
+  projection: ViewProjection;
+  field: FieldType;
+  registry?: SchemaResolver;
+  onClose: () => 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) => {
+  const { t } = useTranslation(translationKey);
+  const [props, setProps] = useState<PropertyType>(projection.getFieldProjection(field.id).props);
+  useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
+
+  const [schemas, setSchemas] = useState<MutableSchema[]>([]);
+  useEffect(() => {
+    if (!registry) {
+      return;
+    }
+
+    const subscription = registry.subscribe(setSchemas);
+    const t = setTimeout(async () => {
+      const schemas = await registry.query();
+      setSchemas(schemas);
+    });
+    return () => {
+      clearTimeout(t);
+      subscription?.();
+    };
+  }, [registry]);
+
+  const [schema, setSchema] = useState<MutableSchema>();
+  useEffect(() => {
+    setSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
+  }, [schemas, props?.referenceSchema]);
+
+  // TODO(burdon): Need to wrap otherwise throws error:
+  //  Class constructor SchemaClass cannot be invoked without 'new'.
+  const [{ fieldSchema }, setFieldSchema] = useState({ fieldSchema: getFormatSchema(props?.format) });
+  const handleValuesChanged = useCallback<NonNullable<FormProps<PropertyType>['onValuesChanged']>>(
+    (_props) => {
+      // Update schema if format changed.
+      // TODO(burdon): Callback should pass `changed` to indicate which fields have changed.
+      if (_props.format !== props.format) {
+        setFieldSchema({ fieldSchema: getFormatSchema(_props.format) });
+      }
+      if (_props.referenceSchema !== props.referenceSchema) {
+        setSchema(schemas.find((schema) => schema.typename === _props.referenceSchema));
+      }
+
+      setProps((props) => {
+        const type = formatToType[_props.format as keyof typeof formatToType];
+        if (props.type !== type) {
+          return { ...props, ..._props, type };
+        }
+
+        return props;
+      });
+    },
+    [schemas, props],
+  );
+
+  const handleValidate = useCallback<NonNullable<FormProps<PropertyType>['onValidate']>>(
+    ({ property }) => {
+      if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
+        return [
+          {
+            path: 'property',
+            message: `property is not unique: '${property}'`,
+          },
+        ];
+      }
+    },
+    [view.fields, field],
+  );
+
+  const handleSubmit = useCallback<NonNullable<FormProps<PropertyType>['onSubmit']>>(
+    (props) => {
+      projection.setFieldProjection({ field, props });
+      onClose();
+    },
+    [projection, field, onClose],
+  );
+
+  const handleCancel = useCallback<NonNullable<FormProps<PropertyType>['onCancel']>>(() => {
+    // Need to defer to allow form to close.
+    requestAnimationFrame(() => onCancel?.());
+    onClose();
+  }, [onClose]);
+
+  if (!fieldSchema) {
+    log.warn('invalid format', { props });
+    return null;
+  }
+
+  return (
+    <Form<PropertyType>
+      key={field.id}
+      autoFocus
+      values={props}
+      schema={fieldSchema}
+      filter={(props) => props.filter((p) => p.name !== 'type')}
+      sort={['property', 'format']}
+      onValuesChanged={handleValuesChanged}
+      onValidate={handleValidate}
+      onSubmit={handleSubmit}
+      onCancel={handleCancel}
+      Custom={{
+        ['format' satisfies keyof PropertyType]: (props) => (
+          <SelectInput<PropertyType>
+            {...props}
+            options={FormatEnums.filter((value) => value !== FormatEnum.None).map((value) => ({
+              value,
+              label: t(`format ${value}`),
+            }))}
+          />
+        ),
+        ['referenceSchema' satisfies keyof PropertyType]: (props) => (
+          <SelectInput<PropertyType>
+            {...props}
+            options={schemas.map((schema) => ({
+              value: schema.typename,
+            }))}
+          />
+        ),
+        ['referencePath' satisfies keyof PropertyType]: (props) => (
+          <SelectInput<PropertyType>
+            {...props}
+            options={
+              schema
+                ? getSchemaProperties(schema.schema.ast)
+                    .sort(sortProperties)
+                    .map((p) => ({ value: p.name }))
+                : []
+            }
+          />
+        ),
+      }}
+    />
+  );
+};

package/src/components/FieldEditor/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './FieldEditor';

package/src/components/Form/Custom.tsx

@@ -0,0 +1,65 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { type LatLng } from '@dxos/echo-schema';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { InputHeader, type InputProps } from './Input';
+import { translationKey } from '../../translations';
+
+//
+// Custom format components.
+//
+
+export const LatLngInput = <T extends object>({
+  property,
+  type,
+  label,
+  disabled,
+  getStatus,
+  getValue,
+  onValueChange,
+  onBlur,
+}: InputProps<T>) => {
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus?.(property);
+  const { lat = 0, lng = 0 } = getValue<LatLng>(property) ?? {};
+
+  return (
+    <Input.Root validationValence={status}>
+      <InputHeader error={error}>
+        <Input.Label>{label}</Input.Label>
+      </InputHeader>
+      <div className='grid grid-cols-2 gap-2'>
+        <Input.TextInput
+          type='number'
+          disabled={disabled}
+          placeholder={t('placeholder latitude')}
+          value={lat}
+          onChange={(event) => onValueChange(property, type, { lat: safeParseFloat(event.target.value, 0), lng })}
+          onBlur={onBlur}
+        />
+        <Input.TextInput
+          type='number'
+          disabled={disabled}
+          placeholder={t('placeholder longitude')}
+          value={lng}
+          onChange={(event) => onValueChange(property, type, { lat, lng: safeParseFloat(event.target.value, 0) })}
+          onBlur={onBlur}
+        />
+      </div>
+    </Input.Root>
+  );
+};
+
+// TODO(burdon): Factor out.
+const safeParseFloat = (str: string, defaultValue?: number): number | undefined => {
+  try {
+    return parseFloat(str);
+  } catch {
+    return defaultValue ?? 0;
+  }
+};