@dxos/react-ui-form 0.7.5-labs.ea4b4c2 → 0.7.5-labs.f400bbc

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.7.5-labs.ea4b4c2",
+  "version": "0.7.5-labs.f400bbc",
   "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",
@@ -28,21 +29,21 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.7.5-labs.ea4b4c2",
-    "@dxos/echo-db": "0.7.5-labs.ea4b4c2",
-    "@dxos/echo-schema": "0.7.5-labs.ea4b4c2",
-    "@dxos/invariant": "0.7.5-labs.ea4b4c2",
-    "@dxos/effect": "0.7.5-labs.ea4b4c2",
-    "@dxos/debug": "0.7.5-labs.ea4b4c2",
-    "@dxos/keys": "0.7.5-labs.ea4b4c2",
-    "@dxos/live-object": "0.7.5-labs.ea4b4c2",
-    "@dxos/log": "0.7.5-labs.ea4b4c2",
-    "@dxos/react-ui-pickers": "0.7.5-labs.ea4b4c2",
-    "@dxos/react-ui-list": "0.7.5-labs.ea4b4c2",
-    "@dxos/react-ui-types": "0.7.5-labs.ea4b4c2",
-    "@dxos/react-client": "0.7.5-labs.ea4b4c2",
-    "@dxos/schema": "0.7.5-labs.ea4b4c2",
-    "@dxos/util": "0.7.5-labs.ea4b4c2"
+    "@dxos/async": "0.7.5-labs.f400bbc",
+    "@dxos/debug": "0.7.5-labs.f400bbc",
+    "@dxos/echo-db": "0.7.5-labs.f400bbc",
+    "@dxos/echo-schema": "0.7.5-labs.f400bbc",
+    "@dxos/effect": "0.7.5-labs.f400bbc",
+    "@dxos/invariant": "0.7.5-labs.f400bbc",
+    "@dxos/keys": "0.7.5-labs.f400bbc",
+    "@dxos/live-object": "0.7.5-labs.f400bbc",
+    "@dxos/log": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-pickers": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-list": "0.7.5-labs.f400bbc",
+    "@dxos/react-client": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-types": "0.7.5-labs.f400bbc",
+    "@dxos/schema": "0.7.5-labs.f400bbc",
+    "@dxos/util": "0.7.5-labs.f400bbc"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -54,12 +55,12 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.7.5-labs.ea4b4c2",
-    "@dxos/random": "0.7.5-labs.ea4b4c2",
-    "@dxos/react-ui": "0.7.5-labs.ea4b4c2",
-    "@dxos/react-ui-theme": "0.7.5-labs.ea4b4c2",
-    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.ea4b4c2",
-    "@dxos/storybook-utils": "0.7.5-labs.ea4b4c2"
+    "@dxos/echo-signals": "0.7.5-labs.f400bbc",
+    "@dxos/random": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.f400bbc",
+    "@dxos/storybook-utils": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-theme": "0.7.5-labs.f400bbc"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
@@ -67,8 +68,8 @@
     "effect": "^3.12.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-labs.ea4b4c2",
-    "@dxos/react-ui-theme": "0.7.5-labs.ea4b4c2"
+    "@dxos/react-ui": "0.7.5-labs.f400bbc",
+    "@dxos/react-ui-theme": "0.7.5-labs.f400bbc"
   },
   "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';
 
@@ -77,8 +77,6 @@ export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onVa
   const { status, error } = getStatus();
   const checked = Boolean(getValue());
 
-  // TODO(burdon): Runtime error:
-  //  Warning: Unknown event handler property `onCheckedChange`. It will be ignored.
   return (
     <Input.Root validationValence={status}>
       {!inputOnly && (
@@ -136,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, useEffect, 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';
@@ -68,12 +68,13 @@ export const Form = <T extends BaseObject>({
   lookupComponent,
   Custom,
 }: FormProps<T>) => {
+  const formRef = useRef<HTMLDivElement>(null);
   const onValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
 
-  // TODO(burdon): Hack to select first input.
+  // Focus the first input element within this form.
   useEffect(() => {
-    if (autoFocus) {
-      const input = document.querySelector('input');
+    if (autoFocus && formRef.current) {
+      const input = formRef.current.querySelector('input');
       if (input) {
         input.focus();
       }
@@ -82,7 +83,9 @@ export const Form = <T extends BaseObject>({
 
   return (
     <FormProvider
+      formRef={formRef}
       schema={schema}
+      autoSave={autoSave}
       initialValues={initialValues}
       onValuesChanged={onValuesChanged}
       onValidate={onValidate}
@@ -90,7 +93,7 @@ export const Form = <T extends BaseObject>({
       onSave={onSave}
     >
       {/* TODO(burdon): Remove padding. */}
-      <div role='none' className={mx('p-2', classNames)} data-testid={testId}>
+      <div ref={formRef} role='none' className={mx('p-2', classNames)} data-testid={testId}>
         <FormFields
           schema={schema}
           path={path}

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}
+      />
     );
   }
 

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, useMemo, type FocusEvent, type PropsWithChildren } from 'react';
 
 import { raise } from '@dxos/debug';
 import { type BaseObject, getValue } from '@dxos/echo-schema';
@@ -34,15 +34,63 @@ export type FormInputStateProps = {
 export const useInputProps = (path: (string | number)[] = []): FormInputStateProps => {
   const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
 
-  return {
-    getStatus: () => getStatus(path),
-    getValue: () => getFormValue(path),
-    onValueChange: (type: SimpleType, value: any) => onValueChange(path, type, value),
-    onBlur: () => onTouched(path),
-  };
+  const stablePath = useMemo(() => path, [Array.isArray(path) ? path.join('.') : path]);
+  return useMemo(
+    () => ({
+      getStatus: () => getStatus(stablePath),
+      getValue: () => getFormValue(stablePath),
+      onValueChange: (type: SimpleType, value: any) => onValueChange(stablePath, type, value),
+      onBlur: () => onTouched(stablePath),
+    }),
+    [getStatus, getFormValue, onValueChange, onTouched, stablePath],
+  );
 };
 
-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.GeoPoint:
       return GeoPointInput;
+    case FormatEnum.Markdown:
+      return MarkdownInput;
   }
 
   switch (type) {

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/hooks/useForm.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -24,6 +24,7 @@ export type FormHandler<T extends BaseObject> = {
   touched: Record<JsonPath, boolean>;
   changed: Record<JsonPath, boolean>;
   canSave: boolean;
+  formIsValid: boolean;
   handleSave: () => void;
 
   //
@@ -129,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.
@@ -136,7 +141,7 @@ export const useForm = <T extends BaseObject>({
   const canSave = useMemo(
     () =>
       !saving &&
-      // Check if any error paths that are touched have errors
+      // Check if any error paths that are touched have errors.
       !Object.entries(touched).some(
         ([path, isTouched]) =>
           isTouched &&
@@ -178,32 +183,38 @@ export const useForm = <T extends BaseObject>({
     [errors],
   );
 
-  const getFormValue = <V>(path: (string | number)[]): V | undefined => {
-    return getValue(values, createJsonPath(path));
-  };
+  const getFormValue = useCallback<FormHandler<T>['getValue']>(
+    <V>(path: (string | number)[]): V | undefined => {
+      return getValue(values, createJsonPath(path));
+    },
+    [values],
+  );
 
-  const onValueChange = (path: (string | number)[], type: SimpleType, value: any) => {
-    const jsonPath = createJsonPath(path);
-    let parsedValue = value;
-    try {
-      if (type === 'number') {
-        parsedValue = parseFloat(value as string) || 0;
+  const onValueChange = useCallback<FormHandler<T>['onValueChange']>(
+    (path: (string | number)[], type: SimpleType, value: any) => {
+      const jsonPath = createJsonPath(path);
+      let parsedValue = value;
+      try {
+        if (type === 'number') {
+          parsedValue = parseFloat(value as string) || 0;
+        }
+      } catch (err) {
+        log.catch(err);
+        parsedValue = undefined;
       }
-    } catch (err) {
-      log.catch(err);
-      parsedValue = undefined;
-    }
 
-    const newValues = { ...setValue(values, jsonPath, parsedValue) };
-    setValues(newValues);
-    setChanged((prev) => ({ ...prev, [jsonPath]: true }));
-    onValuesChanged?.(newValues);
+      const newValues = { ...setValue(values, jsonPath, parsedValue) };
+      setValues(newValues);
+      setChanged((prev) => ({ ...prev, [jsonPath]: true }));
+      onValuesChanged?.(newValues);
 
-    const isValid = validate(newValues);
-    if (isValid && onValid) {
-      onValid(newValues, { changed });
-    }
-  };
+      const isValid = validate(newValues);
+      if (isValid && onValid) {
+        onValid(newValues, { changed });
+      }
+    },
+    [values, onValuesChanged, validate, onValid, changed],
+  );
 
   const onTouched = useCallback(
     (path: (string | number)[]) => {
@@ -214,21 +225,39 @@ export const useForm = <T extends BaseObject>({
     [validate, values],
   );
 
-  return {
-    // State.
-    values,
-    errors,
-    touched,
-    changed,
-    canSave,
-    handleSave,
-
-    // Field utils.
-    getStatus,
-    getValue: getFormValue,
-    onValueChange,
-    onTouched,
-  } satisfies FormHandler<T>;
+  return useMemo(
+    () => ({
+      // State.
+      values,
+      errors,
+      touched,
+      changed,
+      canSave,
+      formIsValid,
+
+      // Actions.
+      handleSave,
+
+      // Field utils.
+      getStatus,
+      getValue: getFormValue,
+      onValueChange,
+      onTouched,
+    }),
+    [
+      values,
+      errors,
+      touched,
+      changed,
+      canSave,
+      formIsValid,
+      handleSave,
+      getStatus,
+      getFormValue,
+      onValueChange,
+      onTouched,
+    ],
+  );
 };
 
 const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPath, V> => {
@@ -239,7 +268,7 @@ const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPat
 const flatMap = (errors: ValidationError[]) => {
   return errors.reduce(
     (result, { path, message }) => {
-      // Convert the validation error path format to our JsonPath format
+      // Convert the validation error path format to our JsonPath format.
       const jsonPath = fromEffectValidationPath(path);
       if (!(jsonPath in result)) {
         result[jsonPath] = message;

package/src/translations.ts

@@ -36,7 +36,7 @@ export default [
         'format hostname': 'Hostname',
         'format integer': 'Integer',
         'format json': 'JSON',
-        'format latlng': 'LatLng',
+        'format latlng': 'Geopoint',
         'format markdown': 'Markdown',
         'format percent': 'Percent',
         'format ref': 'Reference',