@dxos/react-ui-form 0.7.5-main.e9bb01b → 0.7.5-staging.2ff1350

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.7.5-main.e9bb01b",
+  "version": "0.7.5-staging.2ff1350",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -27,48 +28,48 @@
     "@effect/schema": "^0.75.5",
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
-    "effect": "^3.12.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.7.5-main.e9bb01b",
-    "@dxos/debug": "0.7.5-main.e9bb01b",
-    "@dxos/echo-db": "0.7.5-main.e9bb01b",
-    "@dxos/effect": "0.7.5-main.e9bb01b",
-    "@dxos/invariant": "0.7.5-main.e9bb01b",
-    "@dxos/keys": "0.7.5-main.e9bb01b",
-    "@dxos/echo-schema": "0.7.5-main.e9bb01b",
-    "@dxos/live-object": "0.7.5-main.e9bb01b",
-    "@dxos/log": "0.7.5-main.e9bb01b",
-    "@dxos/react-client": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-pickers": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-list": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-types": "0.7.5-main.e9bb01b",
-    "@dxos/util": "0.7.5-main.e9bb01b",
-    "@dxos/schema": "0.7.5-main.e9bb01b"
+    "@dxos/async": "0.7.5-staging.2ff1350",
+    "@dxos/debug": "0.7.5-staging.2ff1350",
+    "@dxos/echo-db": "0.7.5-staging.2ff1350",
+    "@dxos/echo-schema": "0.7.5-staging.2ff1350",
+    "@dxos/effect": "0.7.5-staging.2ff1350",
+    "@dxos/invariant": "0.7.5-staging.2ff1350",
+    "@dxos/keys": "0.7.5-staging.2ff1350",
+    "@dxos/live-object": "0.7.5-staging.2ff1350",
+    "@dxos/log": "0.7.5-staging.2ff1350",
+    "@dxos/react-client": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-list": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-pickers": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-types": "0.7.5-staging.2ff1350",
+    "@dxos/schema": "0.7.5-staging.2ff1350",
+    "@dxos/util": "0.7.5-staging.2ff1350"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "@types/jsonpath": "~0.2.4",
+    "@types/jsonpath": "^0.2.4",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
+    "effect": "^3.12.3",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-syntax-highlighter": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b",
-    "@dxos/random": "0.7.5-main.e9bb01b",
-    "@dxos/storybook-utils": "0.7.5-main.e9bb01b"
+    "@dxos/echo-signals": "0.7.5-staging.2ff1350",
+    "@dxos/random": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-theme": "0.7.5-staging.2ff1350",
+    "@dxos/storybook-utils": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-syntax-highlighter": "0.7.5-staging.2ff1350"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
     "@phosphor-icons/react": "^2.1.5",
-    "effect": "^3.9.2",
+    "effect": "^3.12.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b"
+    "@dxos/react-ui-theme": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui": "0.7.5-staging.2ff1350"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Form/Defaults.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import { Input, Select } from '@dxos/react-ui';
 
@@ -75,6 +75,7 @@ export const NumberInput = ({
 
 export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange }: InputProps) => {
   const { status, error } = getStatus();
+  const checked = Boolean(getValue());
 
   return (
     <Input.Root validationValence={status}>
@@ -83,7 +84,7 @@ export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onVa
           <Input.Label>{label}</Input.Label>
         </InputHeader>
       )}
-      <Input.Switch checked={getValue()} onCheckedChange={(value) => onValueChange(type, value)} />
+      <Input.Switch checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
       {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
@@ -133,3 +134,61 @@ export const SelectInput = ({
     </Input.Root>
   );
 };
+
+export const MarkdownInput = ({
+  type,
+  label,
+  inputOnly,
+  disabled,
+  placeholder,
+  getStatus,
+  getValue,
+  onValueChange,
+  onBlur,
+}: InputProps) => {
+  const { status, error } = getStatus();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // TODO(ZaymonFC): If we start using `Enter` for form submission, we should prevent default behavior here
+  //  since we're using a textarea element and the user needs to be able to enter new lines.
+
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = 'auto'; // For measurement.
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
+    }
+  }, []);
+
+  // Adjust height on initial render.
+  useEffect(() => {
+    adjustHeight();
+  }, [adjustHeight]);
+
+  // Adjust height when the content changes.
+  useEffect(() => {
+    adjustHeight();
+  }, [getValue(), adjustHeight]);
+
+  return (
+    <Input.Root validationValence={status}>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
+      <Input.TextArea
+        ref={textareaRef}
+        disabled={disabled}
+        placeholder={placeholder}
+        value={getValue() ?? ''}
+        classNames={'min-bs-auto max-h-40 overflow-auto'}
+        onChange={(event) => onValueChange(type, event.target.value)}
+        onBlur={onBlur}
+        style={{ resize: 'none' }}
+        spellCheck={false}
+      />
+      {inputOnly && <Input.Validation>{error}</Input.Validation>}
+    </Input.Root>
+  );
+};

package/src/components/Form/Form.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type ReactElement, useMemo } from 'react';
+import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
 
 import { type BaseObject, type S, type PropertyKey } from '@dxos/echo-schema';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -55,6 +55,7 @@ export const Form = <T extends BaseObject>({
   schema,
   values: initialValues,
   path = [],
+  autoFocus,
   readonly,
   filter,
   sort,
@@ -67,18 +68,32 @@ export const Form = <T extends BaseObject>({
   lookupComponent,
   Custom,
 }: FormProps<T>) => {
+  const formRef = useRef<HTMLDivElement>(null);
   const onValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
 
+  // Focus the first input element within this form.
+  useEffect(() => {
+    if (autoFocus && formRef.current) {
+      const input = formRef.current.querySelector('input');
+      if (input) {
+        input.focus();
+      }
+    }
+  }, [autoFocus]);
+
   return (
     <FormProvider
+      formRef={formRef}
       schema={schema}
+      autoSave={autoSave}
       initialValues={initialValues}
       onValuesChanged={onValuesChanged}
       onValidate={onValidate}
       onValid={onValid}
       onSave={onSave}
     >
-      <div role='none' className={mx('p-2', classNames)} data-testid={testId}>
+      {/* TODO(burdon): Remove padding. */}
+      <div ref={formRef} role='none' className={mx('p-2', classNames)} data-testid={testId}>
         <FormFields
           schema={schema}
           path={path}

package/src/components/Form/FormActions.tsx

@@ -20,7 +20,7 @@ export const FormActions = ({ onCancel, readonly }: FormActionsProps) => {
   const { canSave, handleSave } = useFormContext();
 
   return (
-    <div role='none' className='flex justify-center'>
+    <div role='none' className='mt-2 flex justify-center'>
       <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
         {onCancel && !readonly && (
           <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />

package/src/components/Form/FormContent.tsx

@@ -70,18 +70,15 @@ export const FormField = ({ property, path, readonly, inline, lookupComponent, C
   const CustomComponent = Custom?.[jsonPath];
   if (CustomComponent) {
     return (
-      // TODO(ZaymonFC): We should try to remove this div wrapper.
-      <div role='none'>
-        <CustomComponent
-          type={type}
-          format={format}
-          label={label}
-          inputOnly={inline}
-          placeholder={placeholder}
-          disabled={readonly}
-          {...inputProps}
-        />
-      </div>
+      <CustomComponent
+        type={type}
+        format={format}
+        label={label}
+        inputOnly={inline}
+        placeholder={placeholder}
+        disabled={readonly}
+        {...inputProps}
+      />
     );
   }
 
@@ -153,7 +150,7 @@ export const FormFields = ({ schema, path, filter, sort, readonly, lookupCompone
   }, [schema, values, filter, sort]);
 
   return (
-    <div role='form' className={mx('flex flex-col w-full gap-2 py-2')}>
+    <div role='form' className={mx('flex flex-col w-full gap-2')}>
       {properties
         .map((property) => {
           return (

package/src/components/Form/FormContext.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { createContext, useContext, type FocusEvent, type PropsWithChildren } from 'react';
+import React, { createContext, useContext, useEffect, type FocusEvent, type PropsWithChildren } from 'react';
 
 import { raise } from '@dxos/debug';
 import { type BaseObject, getValue } from '@dxos/echo-schema';
@@ -42,7 +42,51 @@ export const useInputProps = (path: (string | number)[] = []): FormInputStatePro
   };
 };
 
-export const FormProvider = ({ children, ...formOptions }: PropsWithChildren<FormOptions<any>>) => {
-  const formHandler = useForm(formOptions);
-  return <FormContext.Provider value={formHandler}>{children}</FormContext.Provider>;
+export const FormProvider = ({
+  children,
+  formRef,
+  autoSave,
+  ...formOptions
+}: PropsWithChildren<
+  FormOptions<any> & {
+    formRef?: React.RefObject<HTMLDivElement>;
+    autoSave?: boolean;
+  }
+>) => {
+  const form = useForm(formOptions);
+
+  useEffect(() => {
+    if (!formRef?.current) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const keyIsEnter = event.key === 'Enter';
+      const modifierUsed = event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
+      const inputIsTextarea = (event.target as HTMLElement).tagName.toLowerCase() === 'textarea';
+      const inputOptOut = (event.target as HTMLElement).hasAttribute('data-no-submit');
+
+      // Regular inputs: Submit on Enter (no modifiers).
+      const shouldSubmitRegularInput = !inputIsTextarea && keyIsEnter && !modifierUsed;
+
+      // Textareas: Submit only on Meta+Enter.
+      const shouldSubmitTextarea = inputIsTextarea && keyIsEnter && event.metaKey;
+
+      if ((shouldSubmitRegularInput || shouldSubmitTextarea) && !inputOptOut) {
+        if (!autoSave && form.canSave) {
+          form.handleSave();
+        }
+        if (autoSave && form.formIsValid) {
+          (event.target as HTMLElement).blur();
+        }
+      }
+    };
+
+    const formElement = formRef.current;
+
+    formElement.addEventListener('keydown', handleKeyDown);
+    return () => formElement.removeEventListener('keydown', handleKeyDown);
+  }, [formRef, form.canSave, form.formIsValid, form.handleSave, autoSave]);
+
+  return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
 };

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

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
 
-import { type GeoPoint } from '@dxos/echo-schema';
+import { type GeoPoint, GeoLocation } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
@@ -14,28 +14,58 @@ import { InputHeader, type InputProps } from '../Input';
 export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
-  const [lng = 0, lat = 0] = getValue<GeoPoint>() ?? [];
+  const geoPoint = useMemo<GeoPoint>(() => getValue<GeoPoint>() ?? [0, 0], [getValue]);
+  const geoLocation = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [geoPoint]);
+
+  const [longitudeText, setLongitudeText] = useState(geoLocation.longitude?.toString());
+  const [latitudeText, setLatitudeText] = useState(geoLocation.latitude?.toString());
+
+  useEffect(() => {
+    const location = GeoLocation.fromGeoPoint(geoPoint);
+    setLongitudeText(location.longitude.toString());
+    setLatitudeText(location.latitude.toString());
+  }, [geoPoint]);
+
+  const handleCoordinateChange = useCallback(
+    (coordinateType: keyof Pick<GeoLocation, 'longitude' | 'latitude'>, setText: (text: string) => void) =>
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const inputText = event.target.value;
+        setText(inputText);
+        if (inputText !== '' && inputText !== '-') {
+          const coord = safeParseFloat(inputText);
+          if (coord !== undefined && !isNaN(coord)) {
+            const currentLocation = GeoLocation.fromGeoPoint(getValue<GeoPoint>() ?? [0, 0]);
+            const newLocation = { ...currentLocation, [coordinateType]: coord };
+            const newValue = GeoLocation.toGeoPoint(newLocation);
+            onValueChange(type, newValue);
+          }
+        }
+      },
+    [getValue, onValueChange, type],
+  );
 
   return (
     <Input.Root validationValence={status}>
       <InputHeader error={error}>
         <Input.Label>{label}</Input.Label>
       </InputHeader>
-      <div className='grid grid-cols-2 gap-2'>
+      <div role='none' className='grid grid-cols-2 gap-2'>
         <Input.TextInput
-          type='number'
+          type='text'
+          pattern='^-?[0-9]*\.?[0-9]*$'
           disabled={disabled}
-          placeholder={t('placeholder longitude')}
-          value={lng}
-          onChange={(event) => onValueChange(type, [lat, safeParseFloat(event.target.value, 0)])}
+          placeholder={t('placeholder latitude')}
+          value={latitudeText}
+          onChange={handleCoordinateChange('latitude', setLatitudeText)}
           onBlur={onBlur}
         />
         <Input.TextInput
-          type='number'
+          type='text'
+          pattern='^-?[0-9]*\.?[0-9]*$'
           disabled={disabled}
-          placeholder={t('placeholder latitude')}
-          value={lat}
-          onChange={(event) => onValueChange(type, [safeParseFloat(event.target.value, 0), lng])}
+          placeholder={t('placeholder longitude')}
+          value={longitudeText}
+          onChange={handleCoordinateChange('longitude', setLongitudeText)}
           onBlur={onBlur}
         />
       </div>

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

@@ -8,8 +8,8 @@ import { type SelectOption } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { type ChromaticPalette, Icon, IconButton, Input, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
-import { HuePickerToolbarButton } from '@dxos/react-ui-pickers';
-import { hueTokenThemes, mx } from '@dxos/react-ui-theme';
+import { HuePicker } from '@dxos/react-ui-pickers';
+import { hues, mx } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
@@ -32,20 +32,17 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
 
   const randomHue = () => {
     const usedHues = new Set(options?.map((option) => option.color) ?? []);
-    const hueKeys = Object.keys(hueTokenThemes) as Array<keyof typeof hueTokenThemes>;
-
     // Pick a random unused option from hueTokenThemes.
-    const unusedHues = hueKeys.filter((hue) => !usedHues.has(hue));
+    const unusedHues = hues.filter((hue) => !usedHues.has(hue));
     if (unusedHues.length > 0) {
       return unusedHues[Math.floor(Math.random() * unusedHues.length)];
     }
 
     // Pick a random one that hasn't been used in the last three options
     const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
-    const availableHues = hueKeys.filter((hue) => !lastThree.has(hue));
+    const availableHues = hues.filter((hue) => !lastThree.has(hue));
     return (
-      availableHues[Math.floor(Math.random() * availableHues.length)] ??
-      hueKeys[Math.floor(Math.random() * hueKeys.length)]
+      availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)]
     );
   };
 
@@ -154,9 +151,10 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                               onChange={handleTitleChange(item.id)}
                               onKeyDown={handleKeyDown}
                               classNames='flex-1'
+                              data-no-submit
                             />
                             <Toolbar.Root classNames='p-0 m-0 !is-auto'>
-                              <HuePickerToolbarButton hue={item.color} onChangeHue={handleColorChange(item.id)} />
+                              <HuePicker value={item.color} onChange={handleColorChange(item.id)} />
                             </Toolbar.Root>
                             <IconButton
                               icon='ph--trash--fill'

package/src/components/Form/factory.tsx

@@ -5,7 +5,7 @@
 import { FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
-import { BooleanInput, NumberInput, TextInput } from './Defaults';
+import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
 import { GeoPointInput } from './custom';
 
@@ -14,8 +14,10 @@ import { GeoPointInput } from './custom';
  */
 export const getInputComponent = (type: SimpleType, format?: FormatEnum): InputComponent | undefined => {
   switch (format) {
-    case FormatEnum.LatLng:
+    case FormatEnum.LatLong:
       return GeoPointInput;
+    case FormatEnum.Markdown:
+      return MarkdownInput;
   }
 
   switch (type) {

package/src/components/Form/index.ts

@@ -2,8 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useFormValues } from './FormContext';
+
 export * from './custom';
 
 export * from './Defaults';
 export * from './Form';
 export * from './Input';
+export { useFormValues };

package/src/components/ViewEditor/ViewEditor.tsx

@@ -21,7 +21,7 @@ const ViewMetaSchema = S.Struct({
   name: S.String.annotations({
     [AST.TitleAnnotationId]: 'View',
   }),
-  typename: Format.DXN.annotations({
+  typename: Format.URL.annotations({
     [AST.TitleAnnotationId]: 'Typename',
   }),
 }).pipe(S.mutable);
@@ -103,7 +103,7 @@ export const ViewEditor = ({
 
   return (
     <div role='none' className={mx('flex flex-col w-full divide-y divide-separator', classNames)}>
-      <Form<ViewMetaType> autoFocus autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
+      <Form<ViewMetaType> autoSave schema={ViewMetaSchema} values={viewValues} onSave={handleViewUpdate} />
 
       <div>
         {/* TODO(burdon): Clean up common form ux. */}

package/src/components/deprecated/FormInput.tsx

@@ -29,7 +29,6 @@ export type DeprecatedFormInputProps = {
 /**
  * @deprecated
  */
-// TODO(burdon): Still used in ObservabilitySettings and all settings.
 export const DeprecatedFormInput = ({
   label,
   description,
@@ -40,7 +39,6 @@ export const DeprecatedFormInput = ({
     <div role='none' className='flex w-full gap-4 py-1'>
       <Input.Root>
         <div role='none' className='flex flex-col w-full'>
-          {/* TODO(burdon): Consistent height for controls (e.g., Select, Textbox, and Checkbox are all different). */}
           <Input.Label classNames='flex min-bs-[--rail-action] items-center' style={{ fontSize: 'unset' }}>
             {label}
           </Input.Label>
@@ -61,9 +59,8 @@ export const DeprecatedFormInput = ({
   );
 
   if (secondary) {
-    // console.log(secondary);
     return (
-      <div role='none' className='flex flex-col w-full'>
+      <div role='none'>
         {primary}
         {secondary}
       </div>

package/src/hooks/useForm.ts

@@ -5,7 +5,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
-import { type SimpleType, type S, type JsonPath, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
+import { AST, type S, type SimpleType, type JsonPath, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { validateSchema, type ValidationError } from '@dxos/schema';
@@ -24,6 +24,7 @@ export type FormHandler<T extends BaseObject> = {
   touched: Record<JsonPath, boolean>;
   changed: Record<JsonPath, boolean>;
   canSave: boolean;
+  formIsValid: boolean;
   handleSave: () => void;
 
   //
@@ -41,9 +42,8 @@ export type FormHandler<T extends BaseObject> = {
  */
 export interface FormOptions<T extends BaseObject> {
   /**
-   * Effect schema.
+   * Effect schema (Type literal).
    */
-  // TODO(burdon): Change to S.Struct<T>?
   schema: S.Schema<T>;
 
   /**
@@ -89,6 +89,8 @@ export const useForm = <T extends BaseObject>({
   onValid,
   onSave,
 }: FormOptions<T>): FormHandler<T> => {
+  invariant(AST.isTypeLiteral(schema.ast));
+
   const [values, setValues] = useState<Partial<T>>(initialValues);
   useEffect(() => {
     setValues(initialValues);
@@ -128,6 +130,10 @@ export const useForm = <T extends BaseObject>({
     }
   }, [values, schemaDirty]);
 
+  const formIsValid = useMemo(() => {
+    return Object.keys(errors).length === 0;
+  }, [errors]);
+
   /**
    * NOTE: We can submit if there is no touched field that has an error.
    * Basically, if there's a validation message visible in the form, submit should be disabled.
@@ -221,6 +227,7 @@ export const useForm = <T extends BaseObject>({
     changed,
     canSave,
     handleSave,
+    formIsValid,
 
     // Field utils.
     getStatus,

package/src/util/field.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
 import { type ValidationError } from '@dxos/schema';
 
 /**
@@ -81,6 +81,24 @@ export const parseValue = ({ type, format, value }: ParseProps) => {
       return isNaN(date.getTime()) ? null : date;
     }
 
+    case FormatEnum.LatLong: {
+      // Parse string in format "lat,long" to GeoPoint [longitude, latitude].
+      if (typeof value === 'string') {
+        // Only keep digits, decimal points, minus signs, and commas.
+        const cleaned = value.replace(/[^0-9.,-]+/g, '');
+        const parts = cleaned.split(',');
+        if (parts.length === 2) {
+          const lat = parseFloat(parts[0]);
+          const long = parseFloat(parts[1]);
+          if (!isNaN(lat) && !isNaN(long)) {
+            return GeoLocation.toGeoPoint({ latitude: lat, longitude: long });
+          }
+        }
+      }
+
+      return [0, 0];
+    }
+
     default: {
       return value;
     }