@dxos/react-ui-form 0.7.5-main.9d2a38b → 0.7.5-main.e9bb01b

package/src/components/Form/Input.tsx

@@ -4,30 +4,29 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
+import { type FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 import { Icon, Tooltip } from '@dxos/react-ui';
 import { errorText } from '@dxos/react-ui-theme';
 
-import { type FormHandler } from '../../hooks';
+import { type FormInputStateProps } from './FormContext';
 
 /**
  * Props passed to input components.
  */
-export type InputProps<T extends BaseObject> = {
-  property: PropertyKey<T>;
+export type InputProps = {
   type: SimpleType;
   format?: FormatEnum;
   label?: string;
   disabled?: boolean;
   placeholder?: string;
   inputOnly?: boolean;
-} & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
+} & FormInputStateProps;
 
 /**
  * Form input component.
  */
-export type InputComponent<T extends BaseObject> = FC<InputProps<T>>;
+export type InputComponent = FC<InputProps>;
 
 export type InputHeaderProps = PropsWithChildren<{
   error?: string;

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

@@ -4,26 +4,17 @@
 
 import React from 'react';
 
-import { type BaseObject, type GeoPoint } from '@dxos/echo-schema';
+import { type GeoPoint } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
 
-export const GeoPointInput = <T extends BaseObject>({
-  property,
-  type,
-  label,
-  disabled,
-  getStatus,
-  getValue,
-  onValueChange,
-  onBlur,
-}: InputProps<T>) => {
+export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
   const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus?.(property);
-  const [lng = 0, lat = 0] = getValue<GeoPoint>(property) ?? [];
+  const { status, error } = getStatus();
+  const [lng = 0, lat = 0] = getValue<GeoPoint>() ?? [];
 
   return (
     <Input.Root validationValence={status}>
@@ -36,7 +27,7 @@ export const GeoPointInput = <T extends BaseObject>({
           disabled={disabled}
           placeholder={t('placeholder longitude')}
           value={lng}
-          onChange={(event) => onValueChange(property, type, [lat, safeParseFloat(event.target.value, 0)])}
+          onChange={(event) => onValueChange(type, [lat, safeParseFloat(event.target.value, 0)])}
           onBlur={onBlur}
         />
         <Input.TextInput
@@ -44,7 +35,7 @@ export const GeoPointInput = <T extends BaseObject>({
           disabled={disabled}
           placeholder={t('placeholder latitude')}
           value={lat}
-          onChange={(event) => onValueChange(property, type, [safeParseFloat(event.target.value, 0), lng])}
+          onChange={(event) => onValueChange(type, [safeParseFloat(event.target.value, 0), lng])}
           onBlur={onBlur}
         />
       </div>

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

@@ -0,0 +1,58 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { S, SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { SelectOptionInput } from './SelectOptionsInput';
+import translations from '../../../translations';
+import { TestLayout, TestPanel } from '../../testing';
+import { Form } from '../Form';
+
+const schema = S.Struct({
+  options: S.Array(SelectOptionSchema).pipe(S.mutable),
+}).pipe(S.mutable);
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<{ options: SelectOption[] }>({
+    // TODO(Zaymon): Pick colors from our limited set.
+    options: [
+      { id: 'opt_1', title: 'First option', color: 'amber' },
+      { id: 'opt_2', title: 'Second option', color: 'emerald' },
+      { id: 'opt_3', title: 'Third option', color: 'rose' },
+    ],
+  });
+
+  return (
+    <TestLayout>
+      <TestPanel>
+        <Form
+          schema={schema}
+          values={values}
+          onSave={(vals) => setValues(vals)}
+          Custom={{ options: SelectOptionInput }}
+        />
+      </TestPanel>
+    </TestLayout>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-form/SelectOptionsInput',
+  component: SelectOptionInput,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: { translations },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: DefaultStory,
+};

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

@@ -0,0 +1,192 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useState, type ChangeEvent, useRef } from 'react';
+
+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 { translationKey } from '../../../translations';
+import { InputHeader, type InputProps } from '../Input';
+
+// TODO(ZaymonFC): Handle disabled.
+export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
+  const [selected, setSelectedId] = useState<string | null>(null);
+  const [isNewOption, setIsNewOption] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
+  const options = getValue<SelectOption[] | undefined>();
+
+  // Initialization.
+  useEffect(() => {
+    if (options === undefined) {
+      onValueChange(type, []);
+    }
+  }, [options, onValueChange, type]);
+
+  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));
+    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));
+    return (
+      availableHues[Math.floor(Math.random() * availableHues.length)] ??
+      hueKeys[Math.floor(Math.random() * hueKeys.length)]
+    );
+  };
+
+  const handleAdd = useCallback(() => {
+    const newId = PublicKey.random().truncate();
+    const newOption = { id: newId, title: '', color: randomHue() };
+    onValueChange(type, [...(options ?? []), newOption]);
+    setSelectedId(newId);
+    setIsNewOption(true);
+  }, [options, type, onValueChange]);
+
+  const handleDelete = useCallback(
+    (id: string) => {
+      const newOptions = options?.filter((option) => option.id !== id) ?? [];
+      onValueChange(type, newOptions);
+      setSelectedId(null);
+    },
+    [options, type, onValueChange],
+  );
+
+  const handleMove = useCallback(
+    (from: number, to: number) => {
+      if (!options) {
+        return;
+      }
+
+      const newOptions = [...options];
+      const [removed] = newOptions.splice(from, 1);
+      newOptions.splice(to, 0, removed);
+      onValueChange(type, newOptions);
+    },
+    [options, type, onValueChange],
+  );
+
+  const handleClick = useCallback((id: string) => {
+    setSelectedId((current) => (current === id ? null : id));
+  }, []);
+
+  const handleTitleChange = useCallback(
+    (id: string) => (e: ChangeEvent<HTMLInputElement>) => {
+      const newOptions = options?.map((o) => (o.id === id ? { ...o, title: e.target.value } : o));
+      onValueChange(type, newOptions ?? []);
+    },
+    [options, type, onValueChange],
+  );
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      setSelectedId(null);
+    }
+  }, []);
+
+  const handleColorChange = useCallback(
+    (id: string) => (hue: string) => {
+      const newOptions = options?.map((o) => (o.id === id ? { ...o, color: hue } : o));
+      onValueChange(type, newOptions ?? []);
+    },
+    [options, type, onValueChange],
+  );
+
+  useEffect(() => {
+    if (selected && isNewOption && inputRef.current) {
+      inputRef.current.focus();
+      setIsNewOption(false);
+    }
+  }, [selected, isNewOption]);
+
+  return (
+    <Input.Root validationValence={status}>
+      <InputHeader error={error}>
+        <Input.Label>{label}</Input.Label>
+      </InputHeader>
+      <div role='none'>
+        {options && (
+          <List.Root items={options} isItem={(item) => true} onMove={handleMove}>
+            {({ items }) => (
+              <div role='list' className='w-full overflow-auto'>
+                {items?.map((item) => (
+                  <div key={item.id}>
+                    <List.Item
+                      role='button'
+                      item={item}
+                      classNames={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
+                      aria-expanded={selected === item.id}
+                    >
+                      <div className='flex items-center'>
+                        <List.ItemDragHandle />
+                        <List.ItemTitle onClick={() => handleClick(item.id)} classNames='flex-1'>
+                          {/* TODO(ZaymonFC): Move spacer into Tag component. */}
+                          <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
+                        </List.ItemTitle>
+                        <Icon
+                          icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
+                          onClick={() => handleClick(item.id)}
+                        />
+                      </div>
+                      {selected === item.id && (
+                        <div className='mis-4 mbs-2 flex flex-col gap-1'>
+                          {/* 16px to match drag handle width. */}
+                          <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
+                          <div className='flex flex-row items-center gap-1'>
+                            <Input.TextInput
+                              placeholder={t('select option label placeholder')}
+                              ref={selected === item.id ? inputRef : undefined}
+                              value={item.title}
+                              onChange={handleTitleChange(item.id)}
+                              onKeyDown={handleKeyDown}
+                              classNames='flex-1'
+                            />
+                            <Toolbar.Root classNames='p-0 m-0 !is-auto'>
+                              <HuePickerToolbarButton hue={item.color} onChangeHue={handleColorChange(item.id)} />
+                            </Toolbar.Root>
+                            <IconButton
+                              icon='ph--trash--fill'
+                              iconOnly
+                              label={t('select option delete')}
+                              onClick={() => handleDelete(item.id)}
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </List.Item>
+                  </div>
+                ))}
+                <div role='listitem'>
+                  <div
+                    role='button'
+                    className={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
+                    onClick={handleAdd}
+                  >
+                    <div className='flex items-center gap-1'>
+                      <Icon icon='ph--plus--regular' />
+                      <span className='text-sm'>{t('select option add')}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </List.Root>
+        )}
+      </div>
+    </Input.Root>
+  );
+};

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

@@ -4,7 +4,6 @@
 
 import React from 'react';
 
-import { type BaseObject } from '@dxos/echo-schema';
 import { Input } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { safeParseFloat } from '@dxos/util';
@@ -13,9 +12,8 @@ import { InputHeader, type InputProps } from '../Input';
 
 const gridCols = ['grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4'];
 
-export const TupleInput = <T extends BaseObject>({
+export const TupleInput = ({
   binding,
-  property,
   type,
   label,
   disabled,
@@ -23,11 +21,11 @@ export const TupleInput = <T extends BaseObject>({
   getValue,
   onValueChange,
   onBlur,
-}: InputProps<T> & { binding: string[] }) => {
-  const { status, error } = getStatus?.(property);
+}: InputProps & { binding: string[] }) => {
+  const { status, error } = getStatus();
 
   // TODO(burdon): Generalize number/float/string, etc.
-  const values: Record<string, number> = getValue<Record<string, number>>(property) ?? {};
+  const values: Record<string, number> = getValue<Record<string, number>>() ?? {};
 
   return (
     <Input.Root validationValence={status}>
@@ -41,9 +39,7 @@ export const TupleInput = <T extends BaseObject>({
             type='number'
             disabled={disabled}
             value={values[prop]}
-            onChange={(event) =>
-              onValueChange(property, type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })
-            }
+            onChange={(event) => onValueChange(type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })}
             onBlur={onBlur}
           />
         ))}

package/src/components/Form/custom/index.ts

@@ -3,4 +3,5 @@
 //
 
 export * from './GeoPointInput';
+export * from './SelectOptionsInput';
 export * from './TupleInput';

package/src/components/Form/factory.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type BaseObject, FormatEnum } from '@dxos/echo-schema';
+import { FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
 import { BooleanInput, NumberInput, TextInput } from './Defaults';
@@ -12,10 +12,7 @@ import { GeoPointInput } from './custom';
 /**
  * Get property input component.
  */
-export const getInputComponent = <T extends BaseObject>(
-  type: SimpleType,
-  format?: FormatEnum,
-): InputComponent<T> | undefined => {
+export const getInputComponent = (type: SimpleType, format?: FormatEnum): InputComponent | undefined => {
   switch (format) {
     case FormatEnum.LatLng:
       return GeoPointInput;

package/src/components/ViewEditor/ViewEditor.tsx

@@ -10,7 +10,6 @@ import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui
 import { List } from '@dxos/react-ui-list';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
 import { FieldSchema, type FieldType, type ViewType, ViewProjection, VIEW_FIELD_LIMIT } from '@dxos/schema';
-import { arrayMove } from '@dxos/util';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
@@ -91,7 +90,11 @@ export const ViewEditor = ({
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
-      arrayMove(view.fields, fromIndex, toIndex);
+      // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
+      const fields = [...view.fields];
+      const [moved] = fields.splice(fromIndex, 1);
+      fields.splice(toIndex, 0, moved);
+      view.fields = fields;
     },
     [view.fields],
   );

package/src/components/deprecated/FormInput.tsx

@@ -4,7 +4,21 @@
 
 import React, { type JSX, type PropsWithChildren } from 'react';
 
-import { Input } from '@dxos/react-ui';
+import { Input, type ThemedClassName } from '@dxos/react-ui';
+import { mx, textBlockWidth } from '@dxos/react-ui-theme';
+
+/**
+ * @deprecated
+ */
+export const DeprecatedFormContainer = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => {
+  return (
+    <div role='none' className='w-full p-4 justify-center overflow-x-hidden overflow-y-auto'>
+      <div role='form' className={mx('flex flex-col', textBlockWidth, classNames)}>
+        {children}
+      </div>
+    </div>
+  );
+};
 
 export type DeprecatedFormInputProps = {
   label: string;
@@ -27,7 +41,9 @@ export const DeprecatedFormInput = ({
       <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-h-[40px] items-center'>{label}</Input.Label>
+          <Input.Label classNames='flex min-bs-[--rail-action] items-center' style={{ fontSize: 'unset' }}>
+            {label}
+          </Input.Label>
           {description && (
             <Input.DescriptionAndValidation classNames='mbs-0.5'>
               <Input.Description>{description}</Input.Description>
@@ -36,7 +52,7 @@ export const DeprecatedFormInput = ({
         </div>
 
         <div role='none'>
-          <div role='none' className='flex min-h-[40px] items-center'>
+          <div role='none' className='flex min-bs-[--rail-action] items-center'>
             {children}
           </div>
         </div>

package/src/hooks/useForm.ts

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type FocusEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type BaseObject, type PropertyKey, getValue, setValue } from '@dxos/echo-schema';
-import { type SimpleType, type S, type JsonPath } from '@dxos/effect';
+import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
+import { type SimpleType, type S, type JsonPath, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { validateSchema, type ValidationError } from '@dxos/schema';
@@ -20,9 +20,9 @@ export type FormHandler<T extends BaseObject> = {
   //
 
   values: Partial<T>;
-  errors: Record<PropertyKey<T>, string>;
-  touched: Record<PropertyKey<T>, boolean>;
-  changed: Record<PropertyKey<T>, boolean>;
+  errors: Record<JsonPath, string>;
+  touched: Record<JsonPath, boolean>;
+  changed: Record<JsonPath, boolean>;
   canSave: boolean;
   handleSave: () => void;
 
@@ -30,10 +30,10 @@ export type FormHandler<T extends BaseObject> = {
   // Form input component helpers.
   //
 
-  getStatus: (property: PropertyKey<T>) => { status?: 'error'; error?: string };
-  getValue: <V>(property: PropertyKey<T>) => V | undefined;
-  onValueChange: <V>(property: PropertyKey<T>, type: SimpleType, value: V) => void;
-  onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  getStatus: (path: string | (string | number)[]) => { status?: 'error'; error?: string };
+  getValue: <V>(path: (string | number)[]) => V | undefined;
+  onValueChange: <V>(path: (string | number)[], type: SimpleType, value: V) => void;
+  onTouched: (path: (string | number)[]) => void;
 };
 
 /**
@@ -94,16 +94,15 @@ export const useForm = <T extends BaseObject>({
     setValues(initialValues);
   }, [initialValues]);
 
-  const [touched, setTouched] = useState<Record<PropertyKey<T>, boolean>>(createKeySet(initialValues, false));
-  const [changed, setChanged] = useState<Record<PropertyKey<T>, boolean>>(createKeySet(initialValues, false));
-  const [errors, setErrors] = useState<Record<PropertyKey<T>, string>>({} as Record<PropertyKey<T>, string>);
+  const [touched, setTouched] = useState<Record<JsonPath, boolean>>(createKeySet(initialValues, false));
+  const [changed, setChanged] = useState<Record<JsonPath, boolean>>(createKeySet(initialValues, false));
+  const [errors, setErrors] = useState<Record<JsonPath, string>>({});
   const [saving, setSaving] = useState(false);
 
   //
   // Validation.
   //
 
-  // TODO(burdon): Validate each property separately.
   const validate = useCallback(
     (values: Partial<T>): values is T => {
       let errors: ValidationError[] = validateSchema(schema, values) ?? [];
@@ -136,8 +135,15 @@ export const useForm = <T extends BaseObject>({
   const canSave = useMemo(
     () =>
       !saving &&
-      Object.keys(values).every((property) => touched[property as JsonPath] === false || !errors[property as JsonPath]),
-    [values, touched, errors, saving],
+      // Check if any error paths that are touched have errors
+      !Object.entries(touched).some(
+        ([path, isTouched]) =>
+          isTouched &&
+          Object.keys(errors).some(
+            (errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`),
+          ),
+      ),
+    [touched, errors, saving],
   );
 
   const handleSave = useCallback(async () => {
@@ -156,19 +162,27 @@ export const useForm = <T extends BaseObject>({
   //
 
   const getStatus = useCallback<FormHandler<T>['getStatus']>(
-    (property: PropertyKey<T>) => ({
-      status: errors[property] ? 'error' : undefined,
-      error: errors[property] ? errors[property] : undefined,
-    }),
-    [touched, errors],
+    (path) => {
+      const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
+      const matchingError = Object.entries(errors).find(
+        ([errorPath]) =>
+          errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`),
+      );
+
+      return {
+        status: matchingError ? 'error' : undefined,
+        error: matchingError ? matchingError[1] : undefined,
+      };
+    },
+    [errors],
   );
 
-  // TODO(burdon): Use path to extract hierarchical value.
-  const getFormValue = <V>(property: PropertyKey<T>): V | undefined => {
-    return getValue(values, property as any as JsonPath);
+  const getFormValue = <V>(path: (string | number)[]): V | undefined => {
+    return getValue(values, createJsonPath(path));
   };
 
-  const onValueChange = (property: PropertyKey<T>, type: SimpleType, value: any) => {
+  const onValueChange = (path: (string | number)[], type: SimpleType, value: any) => {
+    const jsonPath = createJsonPath(path);
     let parsedValue = value;
     try {
       if (type === 'number') {
@@ -179,9 +193,9 @@ export const useForm = <T extends BaseObject>({
       parsedValue = undefined;
     }
 
-    const newValues = { ...setValue(values, property as any as JsonPath, parsedValue) };
+    const newValues = { ...setValue(values, jsonPath, parsedValue) };
     setValues(newValues);
-    setChanged((prev) => ({ ...prev, [property]: true }));
+    setChanged((prev) => ({ ...prev, [jsonPath]: true }));
     onValuesChanged?.(newValues);
 
     const isValid = validate(newValues);
@@ -190,19 +204,10 @@ export const useForm = <T extends BaseObject>({
     }
   };
 
-  // TODO(burdon): This is a leaky abstraction: the hook ideally shouldn't get involved in UX.
-  const onBlur = useCallback(
-    (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const { name } = event.target;
-      setTouched((touched) => ({ ...touched, [name]: true }));
-
-      // TODO(Zan): This should be configurable behavior.
-      if (event.relatedTarget?.getAttribute('type') === 'submit') {
-        // NOTE: We do this here instead of onSave because the blur event is triggered before the submit event
-        //  and results in the submit button being disabled when the form is invalid.
-        setTouched(createKeySet(values, true));
-      }
-
+  const onTouched = useCallback(
+    (path: (string | number)[]) => {
+      const jsonPath = createJsonPath(path);
+      setTouched((touched) => ({ ...touched, [jsonPath]: true }));
       validate(values);
     },
     [validate, values],
@@ -221,23 +226,25 @@ export const useForm = <T extends BaseObject>({
     getStatus,
     getValue: getFormValue,
     onValueChange,
-    onBlur,
+    onTouched,
   } satisfies FormHandler<T>;
 };
 
-const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<PropertyKey<T>, V> => {
+const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPath, V> => {
   invariant(obj);
-  return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<PropertyKey<T>, V>);
+  return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<JsonPath, V>);
 };
 
-const flatMap = <T extends BaseObject>(errors: ValidationError[]) => {
+const flatMap = (errors: ValidationError[]) => {
   return errors.reduce(
     (result, { path, message }) => {
-      if (!(path in result)) {
-        result[path as PropertyKey<T>] = message;
+      // Convert the validation error path format to our JsonPath format
+      const jsonPath = fromEffectValidationPath(path);
+      if (!(jsonPath in result)) {
+        result[jsonPath] = message;
       }
       return result;
     },
-    {} as Record<PropertyKey<T>, string>,
+    {} as Record<JsonPath, string>,
   );
 };