@lucas-barake/effect-form-react 0.4.0 → 0.6.0

package/src/FormReact.tsx

@@ -2,13 +2,12 @@
  * @since 1.0.0
  */
 import { RegistryContext, useAtom, useAtomSet, useAtomSubscribe, useAtomValue } from "@effect-atom/atom-react"
-import * as Atom from "@effect-atom/atom/Atom"
-import type * as Result from "@effect-atom/atom/Result"
+import type * as Atom from "@effect-atom/atom/Atom"
 import { Field, FormAtoms, Mode, Validation } from "@lucas-barake/effect-form"
 import type * as FormBuilder from "@lucas-barake/effect-form/FormBuilder"
-import { getNestedValue, isPathOrParentDirty, schemaPathToFieldPath } from "@lucas-barake/effect-form/internal/path"
+import { getNestedValue, isPathOrParentDirty, isPathUnderRoot } from "@lucas-barake/effect-form/internal/path"
 import * as Cause from "effect/Cause"
-import * as Effect from "effect/Effect"
+import type * as Effect from "effect/Effect"
 import * as Option from "effect/Option"
 import * as ParseResult from "effect/ParseResult"
 import type * as Schema from "effect/Schema"
@@ -18,12 +17,12 @@ import { createContext, useContext } from "react"
 import { useDebounced } from "./internal/use-debounced.js"
 
 /**
- * Props passed to field components.
+ * Form-controlled state passed to field components.
  *
  * @since 1.0.0
  * @category Models
  */
-export interface FieldComponentProps<S extends Schema.Schema.Any> {
+export interface FieldState<S extends Schema.Schema.Any> {
   readonly value: Schema.Schema.Encoded<S>
   readonly onChange: (value: Schema.Schema.Encoded<S>) => void
   readonly onBlur: () => void
@@ -33,6 +32,30 @@ export interface FieldComponentProps<S extends Schema.Schema.Any> {
   readonly isDirty: boolean
 }
 
+/**
+ * Props passed to field components.
+ * Contains form-controlled state in `field` and user-defined props in `props`.
+ *
+ * @since 1.0.0
+ * @category Models
+ */
+export interface FieldComponentProps<
+  S extends Schema.Schema.Any,
+  P extends Record<string, unknown> = Record<string, never>,
+> {
+  readonly field: FieldState<S>
+  readonly props: P
+}
+
+/**
+ * Extracts the extra props type from a field component.
+ *
+ * @since 1.0.0
+ * @category Type-level utilities
+ */
+export type ExtractExtraProps<C> = C extends React.FC<FieldComponentProps<any, infer P>> ? P
+  : Record<string, never>
+
 /**
  * Extracts field component map for array item schemas.
  * - For Struct schemas: returns a map of field names to components
@@ -42,9 +65,10 @@ export interface FieldComponentProps<S extends Schema.Schema.Any> {
  * @category Models
  */
 export type ArrayItemComponentMap<S extends Schema.Schema.Any> = S extends Schema.Struct<infer Fields> ? {
-    readonly [K in keyof Fields]: Fields[K] extends Schema.Schema.Any ? React.FC<FieldComponentProps<Fields[K]>> : never
+    readonly [K in keyof Fields]: Fields[K] extends Schema.Schema.Any ? React.FC<FieldComponentProps<Fields[K], any>>
+      : never
   }
-  : React.FC<FieldComponentProps<S>>
+  : React.FC<FieldComponentProps<S, any>>
 
 /**
  * Maps field names to their React components.
@@ -53,7 +77,7 @@ export type ArrayItemComponentMap<S extends Schema.Schema.Any> = S extends Schem
  * @category Models
  */
 export type FieldComponentMap<TFields extends Field.FieldsRecord> = {
-  readonly [K in keyof TFields]: TFields[K] extends Field.FieldDef<any, infer S> ? React.FC<FieldComponentProps<S>>
+  readonly [K in keyof TFields]: TFields[K] extends Field.FieldDef<any, infer S> ? React.FC<FieldComponentProps<S, any>>
     : TFields[K] extends Field.ArrayFieldDef<any, infer S> ? ArrayItemComponentMap<S>
     : never
 }
@@ -80,25 +104,6 @@ export interface ArrayFieldOperations<TItem> {
   readonly move: (from: number, to: number) => void
 }
 
-/**
- * State exposed to form.Subscribe render prop.
- *
- * @since 1.0.0
- * @category Models
- */
-export interface SubscribeState<TFields extends Field.FieldsRecord> {
-  readonly values: Field.EncodedFromFields<TFields>
-  readonly isDirty: boolean
-  readonly hasChangedSinceSubmit: boolean
-  readonly lastSubmittedValues: Option.Option<Field.EncodedFromFields<TFields>>
-  readonly submitResult: Result.Result<unknown, unknown>
-  readonly submit: () => void
-  readonly reset: () => void
-  readonly revertToLastSubmit: () => void
-  readonly setValue: <S>(field: FormBuilder.FieldRef<S>, update: S | ((prev: S) => S)) => void
-  readonly setValues: (values: Field.EncodedFromFields<TFields>) => void
-}
-
 /**
  * The result of building a form, containing all components and utilities needed
  * for form rendering and submission.
@@ -106,53 +111,47 @@ export interface SubscribeState<TFields extends Field.FieldsRecord> {
  * @since 1.0.0
  * @category Models
  */
-export type BuiltForm<TFields extends Field.FieldsRecord, R> = {
-  readonly atom: Atom.Writable<
-    Option.Option<FormBuilder.FormState<TFields>>,
-    Option.Option<FormBuilder.FormState<TFields>>
-  >
+export type BuiltForm<
+  TFields extends Field.FieldsRecord,
+  R,
+  A = void,
+  E = never,
+  CM extends FieldComponentMap<TFields> = FieldComponentMap<TFields>,
+> = {
+  // Atoms for fine-grained subscriptions (use with useAtomValue)
+  readonly isDirty: Atom.Atom<boolean>
+  readonly hasChangedSinceSubmit: Atom.Atom<boolean>
+  readonly lastSubmittedValues: Atom.Atom<Option.Option<Field.EncodedFromFields<TFields>>>
+  readonly submitCount: Atom.Atom<number>
+
   readonly schema: Schema.Schema<Field.DecodedFromFields<TFields>, Field.EncodedFromFields<TFields>, R>
   readonly fields: FieldRefs<TFields>
 
-  readonly Form: React.FC<{
+  readonly Initialize: React.FC<{
     readonly defaultValues: Field.EncodedFromFields<TFields>
-    readonly onSubmit: Atom.AtomResultFn<Field.DecodedFromFields<TFields>, unknown, unknown>
     readonly children: React.ReactNode
   }>
 
-  readonly Subscribe: React.FC<{
-    readonly children: (state: SubscribeState<TFields>) => React.ReactNode
-  }>
-
-  readonly useForm: () => {
-    readonly submit: () => void
-    readonly reset: () => void
-    readonly revertToLastSubmit: () => void
-    readonly isDirty: boolean
-    readonly hasChangedSinceSubmit: boolean
-    readonly lastSubmittedValues: Option.Option<Field.EncodedFromFields<TFields>>
-    readonly submitResult: Result.Result<unknown, unknown>
-    readonly values: Field.EncodedFromFields<TFields>
-    readonly setValue: <S>(field: FormBuilder.FieldRef<S>, update: S | ((prev: S) => S)) => void
-    readonly setValues: (values: Field.EncodedFromFields<TFields>) => void
-  }
-
-  readonly submit: <A>(
-    fn: (values: Field.DecodedFromFields<TFields>, get: Atom.FnContext) => A,
-  ) => Atom.AtomResultFn<
-    Field.DecodedFromFields<TFields>,
-    A extends Effect.Effect<infer T, any, any> ? T : A,
-    A extends Effect.Effect<any, infer E, any> ? E : never
-  >
-} & FieldComponents<TFields>
-
-type FieldComponents<TFields extends Field.FieldsRecord> = {
-  readonly [K in keyof TFields]: TFields[K] extends Field.FieldDef<any, any> ? React.FC
-    : TFields[K] extends Field.ArrayFieldDef<any, infer S> ? ArrayFieldComponent<S>
+  readonly submit: Atom.AtomResultFn<void, A, E | ParseResult.ParseError>
+  readonly reset: Atom.Writable<void, void>
+  readonly revertToLastSubmit: Atom.Writable<void, void>
+  readonly setValues: Atom.Writable<void, Field.EncodedFromFields<TFields>>
+  readonly setValue: <S>(field: FormBuilder.FieldRef<S>) => Atom.Writable<void, S | ((prev: S) => S)>
+} & FieldComponents<TFields, CM>
+
+type FieldComponents<TFields extends Field.FieldsRecord, CM extends FieldComponentMap<TFields>> = {
+  readonly [K in keyof TFields]: TFields[K] extends Field.FieldDef<any, any> ? React.FC<ExtractExtraProps<CM[K]>>
+    : TFields[K] extends Field.ArrayFieldDef<any, infer S>
+      ? ArrayFieldComponent<S, ExtractArrayItemExtraProps<CM[K], S>>
     : never
 }
 
-type ArrayFieldComponent<S extends Schema.Schema.Any> =
+type ExtractArrayItemExtraProps<CM, S extends Schema.Schema.Any> = S extends Schema.Struct<infer Fields>
+  ? { readonly [K in keyof Fields]: CM extends { readonly [P in K]: infer C } ? ExtractExtraProps<C> : never }
+  : CM extends React.FC<FieldComponentProps<any, infer P>> ? P
+  : never
+
+type ArrayFieldComponent<S extends Schema.Schema.Any, ExtraPropsMap> =
   & React.FC<{
     readonly children: (ops: ArrayFieldOperations<Schema.Schema.Encoded<S>>) => React.ReactNode
   }>
@@ -162,7 +161,11 @@ type ArrayFieldComponent<S extends Schema.Schema.Any> =
       readonly children: React.ReactNode | ((props: { readonly remove: () => void }) => React.ReactNode)
     }>
   }
-  & (S extends Schema.Struct<infer Fields> ? { readonly [K in keyof Fields]: React.FC }
+  & (S extends Schema.Struct<infer Fields> ? {
+      readonly [K in keyof Fields]: React.FC<
+        ExtraPropsMap extends { readonly [P in K]: infer EP } ? EP : Record<string, never>
+      >
+    }
     : unknown)
 
 interface ArrayItemContextValue {
@@ -173,7 +176,7 @@ interface ArrayItemContextValue {
 const ArrayItemContext = createContext<ArrayItemContextValue | null>(null)
 const AutoSubmitContext = createContext<(() => void) | null>(null)
 
-const makeFieldComponent = <S extends Schema.Schema.Any>(
+const makeFieldComponent = <S extends Schema.Schema.Any, P extends Record<string, unknown>>(
   fieldKey: string,
   fieldDef: Field.FieldDef<string, S>,
   crossFieldErrorsAtom: Atom.Writable<Map<string, string>, Map<string, string>>,
@@ -185,9 +188,9 @@ const makeFieldComponent = <S extends Schema.Schema.Any>(
     schema: Schema.Schema.Any,
   ) => Atom.AtomResultFn<unknown, void, ParseResult.ParseError>,
   getOrCreateFieldAtoms: (fieldPath: string) => FormAtoms.FieldAtoms,
-  Component: React.FC<FieldComponentProps<S>>,
-): React.FC => {
-  const FieldComponent: React.FC = React.memo(() => {
+  Component: React.FC<FieldComponentProps<S, P>>,
+): React.FC<P> => {
+  const FieldComponent: React.FC<P> = (extraProps) => {
     const arrayCtx = useContext(ArrayItemContext)
     const autoSubmitOnBlur = useContext(AutoSubmitContext)
     const fieldPath = arrayCtx ? `${arrayCtx.parentPath}.${fieldKey}` : fieldKey
@@ -246,12 +249,13 @@ const makeFieldComponent = <S extends Schema.Schema.Any>(
       (newValue: Schema.Schema.Encoded<S>) => {
         setValue(newValue)
         setCrossFieldErrors((prev) => {
-          if (prev.has(fieldPath)) {
-            const next = new Map(prev)
-            next.delete(fieldPath)
-            return next
+          const next = new Map<string, string>()
+          for (const [errorPath, message] of prev) {
+            if (!isPathUnderRoot(errorPath, fieldPath)) {
+              next.set(errorPath, message)
+            }
           }
-          return prev
+          return next.size !== prev.size ? next : prev
         })
         if (parsedMode.validation === "onChange") {
           validate(newValue)
@@ -276,20 +280,20 @@ const makeFieldComponent = <S extends Schema.Schema.Any>(
     const isValidating = validationResult.waiting
     const shouldShowError = isTouched || submitCount > 0
 
-    return (
-      <Component
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        error={shouldShowError ? validationError : Option.none<string>()}
-        isTouched={isTouched}
-        isValidating={isValidating}
-        isDirty={isDirty}
-      />
-    )
-  })
+    const fieldState: FieldState<S> = React.useMemo(() => ({
+      value,
+      onChange,
+      onBlur,
+      error: shouldShowError ? validationError : Option.none<string>(),
+      isTouched,
+      isValidating,
+      isDirty,
+    }), [value, onChange, onBlur, shouldShowError, validationError, isTouched, isValidating, isDirty])
 
-  return FieldComponent
+    return <Component field={fieldState} props={extraProps} />
+  }
+
+  return React.memo(FieldComponent) as React.FC<P>
 }
 
 const makeArrayFieldComponent = <S extends Schema.Schema.Any>(
@@ -307,7 +311,7 @@ const makeArrayFieldComponent = <S extends Schema.Schema.Any>(
   getOrCreateFieldAtoms: (fieldPath: string) => FormAtoms.FieldAtoms,
   operations: FormAtoms.FormOperations<any>,
   componentMap: ArrayItemComponentMap<S>,
-): ArrayFieldComponent<S> => {
+): ArrayFieldComponent<S, any> => {
   const isStructSchema = AST.isTypeLiteral(def.itemSchema.ast)
 
   const ArrayWrapper: React.FC<{
@@ -398,7 +402,7 @@ const makeArrayFieldComponent = <S extends Schema.Schema.Any>(
       const itemKey = prop.name as string
       const itemSchema = { ast: prop.type } as Schema.Schema.Any
       const itemDef = Field.makeField(itemKey, itemSchema)
-      const itemComponent = (componentMap as Record<string, React.FC<FieldComponentProps<any>>>)[itemKey]
+      const itemComponent = (componentMap as Record<string, React.FC<FieldComponentProps<any, any>>>)[itemKey]
       itemFieldComponents[itemKey] = makeFieldComponent(
         itemKey,
         itemDef,
@@ -418,6 +422,7 @@ const makeArrayFieldComponent = <S extends Schema.Schema.Any>(
     ...itemFieldComponents,
   }
 
+  // Proxy enables <Form.items.Item> and <Form.items.name> syntax
   return new Proxy(ArrayWrapper, {
     get(target, prop) {
       if (prop in properties) {
@@ -425,10 +430,13 @@ const makeArrayFieldComponent = <S extends Schema.Schema.Any>(
       }
       return Reflect.get(target, prop)
     },
-  }) as ArrayFieldComponent<S>
+  }) as ArrayFieldComponent<S, any>
 }
 
-const makeFieldComponents = <TFields extends Field.FieldsRecord>(
+const makeFieldComponents = <
+  TFields extends Field.FieldsRecord,
+  CM extends FieldComponentMap<TFields>,
+>(
   fields: TFields,
   stateAtom: Atom.Writable<
     Option.Option<FormBuilder.FormState<TFields>>,
@@ -444,8 +452,8 @@ const makeFieldComponents = <TFields extends Field.FieldsRecord>(
   ) => Atom.AtomResultFn<unknown, void, ParseResult.ParseError>,
   getOrCreateFieldAtoms: (fieldPath: string) => FormAtoms.FieldAtoms,
   operations: FormAtoms.FormOperations<TFields>,
-  componentMap: FieldComponentMap<TFields>,
-): FieldComponents<TFields> => {
+  componentMap: CM,
+): FieldComponents<TFields, CM> => {
   const components: Record<string, any> = {}
 
   for (const [key, def] of Object.entries(fields)) {
@@ -465,7 +473,7 @@ const makeFieldComponents = <TFields extends Field.FieldsRecord>(
         arrayComponentMap,
       )
     } else if (Field.isFieldDef(def)) {
-      const fieldComponent = (componentMap as Record<string, React.FC<FieldComponentProps<any>>>)[key]
+      const fieldComponent = (componentMap as Record<string, React.FC<FieldComponentProps<any, any>>>)[key]
       components[key] = makeFieldComponent(
         key,
         def,
@@ -480,7 +488,7 @@ const makeFieldComponents = <TFields extends Field.FieldsRecord>(
     }
   }
 
-  return components as FieldComponents<TFields>
+  return components as FieldComponents<TFields, CM>
 }
 
 /**
@@ -488,11 +496,11 @@ const makeFieldComponents = <TFields extends Field.FieldsRecord>(
  *
  * @example
  * ```tsx
- * import { Form } from "@lucas-barake/effect-form"
+ * import { FormBuilder } from "@lucas-barake/effect-form"
  * import { FormReact } from "@lucas-barake/effect-form-react"
+ * import { useAtomValue, useAtomSet } from "@effect-atom/atom-react"
  * import * as Atom from "@effect-atom/atom/Atom"
  * import * as Schema from "effect/Schema"
- * import * as Effect from "effect/Effect"
  * import * as Layer from "effect/Layer"
  *
  * const runtime = Atom.runtime(Layer.empty)
@@ -504,26 +512,28 @@ const makeFieldComponents = <TFields extends Field.FieldsRecord>(
  * const form = FormReact.build(loginForm, {
  *   runtime,
  *   fields: { email: TextInput, password: PasswordInput },
+ *   onSubmit: (values) => Effect.log(`Login: ${values.email}`),
  * })
  *
- * function LoginDialog({ onClose }) {
- *   const handleSubmit = form.submit((values) =>
- *     Effect.gen(function* () {
- *       yield* saveUser(values)
- *       onClose()
- *     })
+ * // Subscribe to atoms anywhere in the tree
+ * function SubmitButton() {
+ *   const isDirty = useAtomValue(form.isDirty)
+ *   const submit = useAtomValue(form.submit)
+ *   const callSubmit = useAtomSet(form.submit)
+ *   return (
+ *     <button onClick={() => callSubmit()} disabled={!isDirty || submit.waiting}>
+ *       {submit.waiting ? "Validating..." : "Login"}
+ *     </button>
  *   )
+ * }
  *
+ * function LoginDialog({ onClose }) {
  *   return (
- *     <form.Form defaultValues={{ email: "", password: "" }} onSubmit={handleSubmit}>
+ *     <form.Initialize defaultValues={{ email: "", password: "" }}>
  *       <form.email />
  *       <form.password />
- *       <form.Subscribe>
- *         {({ isDirty, submit }) => (
- *           <button onClick={submit} disabled={!isDirty}>Login</button>
- *         )}
- *       </form.Subscribe>
- *     </form.Form>
+ *       <SubmitButton />
+ *     </form.Initialize>
  *   )
  * }
  * ```
@@ -531,27 +541,35 @@ const makeFieldComponents = <TFields extends Field.FieldsRecord>(
  * @since 1.0.0
  * @category Constructors
  */
-export const build = <TFields extends Field.FieldsRecord, R, ER = never>(
+export const build = <
+  TFields extends Field.FieldsRecord,
+  R,
+  A,
+  E,
+  ER = never,
+  CM extends FieldComponentMap<TFields> = FieldComponentMap<TFields>,
+>(
   self: FormBuilder.FormBuilder<TFields, R>,
   options: {
     readonly runtime: Atom.AtomRuntime<R, ER>
-    readonly fields: FieldComponentMap<TFields>
+    readonly fields: CM
     readonly mode?: Mode.FormMode
+    readonly onSubmit: (decoded: Field.DecodedFromFields<TFields>, get: Atom.FnContext) => A | Effect.Effect<A, E, R>
   },
-): BuiltForm<TFields, R> => {
-  const { fields: components, mode, runtime } = options
+): BuiltForm<TFields, R, A, E, CM> => {
+  const { fields: components, mode, onSubmit, runtime } = options
   const parsedMode = Mode.parse(mode)
   const { fields } = self
 
-  const formAtoms: FormAtoms.FormAtoms<TFields, R> = FormAtoms.make({
+  const formAtoms: FormAtoms.FormAtoms<TFields, R, A, E> = FormAtoms.make({
     formBuilder: self,
     runtime,
+    onSubmit,
   })
 
   const {
     combinedSchema,
     crossFieldErrorsAtom,
-    decodeAndSubmit,
     dirtyFieldsAtom,
     fieldRefs,
     getOrCreateFieldAtoms,
@@ -559,42 +577,47 @@ export const build = <TFields extends Field.FieldsRecord, R, ER = never>(
     hasChangedSinceSubmitAtom,
     isDirtyAtom,
     lastSubmittedValuesAtom,
-    onSubmitAtom,
     operations,
-    resetValidationAtoms,
+    resetAtom,
+    revertToLastSubmitAtom,
+    setValue,
+    setValuesAtom,
     stateAtom,
+    submitAtom,
     submitCountAtom,
   } = formAtoms
 
-  const FormComponent: React.FC<{
+  const InitializeComponent: React.FC<{
     readonly defaultValues: Field.EncodedFromFields<TFields>
-    readonly onSubmit: Atom.AtomResultFn<Field.DecodedFromFields<TFields>, unknown, unknown>
     readonly children: React.ReactNode
-  }> = ({ children, defaultValues, onSubmit }) => {
+  }> = ({ children, defaultValues }) => {
     const registry = React.useContext(RegistryContext)
     const state = useAtomValue(stateAtom)
     const setFormState = useAtomSet(stateAtom)
-    const setOnSubmit = useAtomSet(onSubmitAtom)
-    const callDecodeAndSubmit = useAtomSet(decodeAndSubmit)
-
-    React.useEffect(() => {
-      setOnSubmit(onSubmit)
-    }, [onSubmit, setOnSubmit])
+    const callSubmit = useAtomSet(submitAtom)
+    // Prevents auto-submit from firing on mount when initial state is set
+    const isInitializedRef = React.useRef(false)
 
     React.useEffect(() => {
       setFormState(Option.some(operations.createInitialState(defaultValues)))
+      // Microtask ensures state update completes before enabling auto-submit
+      queueMicrotask(() => {
+        isInitializedRef.current = true
+      })
       // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only
     }, [])
 
     const debouncedAutoSubmit = useDebounced(() => {
       const stateOption = registry.get(stateAtom)
       if (Option.isNone(stateOption)) return
-      callDecodeAndSubmit(stateOption.value.values)
+      callSubmit()
     }, parsedMode.autoSubmit && parsedMode.validation === "onChange" ? parsedMode.debounce : null)
 
     useAtomSubscribe(
       stateAtom,
       React.useCallback(() => {
+        // Skip auto-submit for initial state set
+        if (!isInitializedRef.current) return
         if (parsedMode.autoSubmit && parsedMode.validation === "onChange") {
           debouncedAutoSubmit()
         }
@@ -606,9 +629,9 @@ export const build = <TFields extends Field.FieldsRecord, R, ER = never>(
       if (parsedMode.autoSubmit && parsedMode.validation === "onBlur") {
         const stateOption = registry.get(stateAtom)
         if (Option.isNone(stateOption)) return
-        callDecodeAndSubmit(stateOption.value.values)
+        callSubmit()
       }
-    }, [registry, callDecodeAndSubmit])
+    }, [registry, callSubmit])
 
     if (Option.isNone(state)) return null
 
@@ -626,175 +649,6 @@ export const build = <TFields extends Field.FieldsRecord, R, ER = never>(
     )
   }
 
-  const useFormHook = () => {
-    const registry = React.useContext(RegistryContext)
-    const formValues = Option.getOrThrow(useAtomValue(stateAtom)).values
-    const setFormState = useAtomSet(stateAtom)
-    const setCrossFieldErrors = useAtomSet(crossFieldErrorsAtom)
-    const [decodeAndSubmitResult, callDecodeAndSubmit] = useAtom(decodeAndSubmit)
-    const isDirty = useAtomValue(isDirtyAtom)
-    const hasChangedSinceSubmit = useAtomValue(hasChangedSinceSubmitAtom)
-    const lastSubmittedValues = useAtomValue(lastSubmittedValuesAtom)
-
-    React.useEffect(() => {
-      if (decodeAndSubmitResult._tag === "Failure") {
-        const parseError = Cause.failureOption(decodeAndSubmitResult.cause)
-        if (Option.isSome(parseError) && ParseResult.isParseError(parseError.value)) {
-          const issues = ParseResult.ArrayFormatter.formatErrorSync(parseError.value)
-
-          const fieldErrors = new Map<string, string>()
-          for (const issue of issues) {
-            if (issue.path.length > 0) {
-              const fieldPath = schemaPathToFieldPath(issue.path)
-              if (!fieldErrors.has(fieldPath)) {
-                fieldErrors.set(fieldPath, issue.message)
-              }
-            }
-          }
-
-          if (fieldErrors.size > 0) {
-            setCrossFieldErrors(fieldErrors)
-          }
-        }
-      }
-    }, [decodeAndSubmitResult, setCrossFieldErrors])
-
-    const submit = React.useCallback(() => {
-      const stateOption = registry.get(stateAtom)
-      if (Option.isNone(stateOption)) return
-
-      setCrossFieldErrors(new Map())
-
-      setFormState((prev) => {
-        if (Option.isNone(prev)) return prev
-        return Option.some(operations.createSubmitState(prev.value))
-      })
-
-      callDecodeAndSubmit(stateOption.value.values)
-    }, [setFormState, callDecodeAndSubmit, setCrossFieldErrors, registry])
-
-    const reset = React.useCallback(() => {
-      setFormState((prev) => {
-        if (Option.isNone(prev)) return prev
-        return Option.some(operations.createResetState(prev.value))
-      })
-      setCrossFieldErrors(new Map())
-      resetValidationAtoms(registry)
-      callDecodeAndSubmit(Atom.Reset)
-    }, [setFormState, setCrossFieldErrors, callDecodeAndSubmit, registry])
-
-    const revertToLastSubmit = React.useCallback(() => {
-      setFormState((prev) => {
-        if (Option.isNone(prev)) return prev
-        return Option.some(operations.revertToLastSubmit(prev.value))
-      })
-      setCrossFieldErrors(new Map())
-    }, [setFormState, setCrossFieldErrors])
-
-    const setValue = React.useCallback(<S,>(
-      field: FormBuilder.FieldRef<S>,
-      update: S | ((prev: S) => S),
-    ) => {
-      const path = field.key
-
-      setFormState((prev) => {
-        if (Option.isNone(prev)) return prev
-        const state = prev.value
-
-        const currentValue = getNestedValue(state.values, path) as S
-        const newValue = typeof update === "function"
-          ? (update as (prev: S) => S)(currentValue)
-          : update
-
-        return Option.some(operations.setFieldValue(state, path, newValue))
-      })
-
-      setCrossFieldErrors((prev) => {
-        let changed = false
-        const next = new Map(prev)
-        for (const errorPath of prev.keys()) {
-          if (errorPath === path || errorPath.startsWith(path + ".") || errorPath.startsWith(path + "[")) {
-            next.delete(errorPath)
-            changed = true
-          }
-        }
-        return changed ? next : prev
-      })
-    }, [setFormState, setCrossFieldErrors])
-
-    const setValues = React.useCallback((values: Field.EncodedFromFields<TFields>) => {
-      setFormState((prev) => {
-        if (Option.isNone(prev)) return prev
-        return Option.some(operations.setFormValues(prev.value, values))
-      })
-
-      setCrossFieldErrors(new Map())
-    }, [setFormState, setCrossFieldErrors])
-
-    return {
-      submit,
-      reset,
-      revertToLastSubmit,
-      isDirty,
-      hasChangedSinceSubmit,
-      lastSubmittedValues,
-      submitResult: decodeAndSubmitResult,
-      values: formValues,
-      setValue,
-      setValues,
-    }
-  }
-
-  const SubscribeComponent: React.FC<{
-    readonly children: (state: SubscribeState<TFields>) => React.ReactNode
-  }> = ({ children }) => {
-    const {
-      hasChangedSinceSubmit,
-      isDirty,
-      lastSubmittedValues,
-      reset,
-      revertToLastSubmit,
-      setValue,
-      setValues,
-      submit,
-      submitResult,
-      values,
-    } = useFormHook()
-
-    return (
-      <>
-        {children({
-          hasChangedSinceSubmit,
-          isDirty,
-          lastSubmittedValues,
-          reset,
-          revertToLastSubmit,
-          setValue,
-          setValues,
-          submit,
-          submitResult,
-          values,
-        })}
-      </>
-    )
-  }
-
-  const submitHelper = <A,>(
-    fn: (values: Field.DecodedFromFields<TFields>, get: Atom.FnContext) => A,
-  ) =>
-    runtime.fn<Field.DecodedFromFields<TFields>>()((values, get) => {
-      const result = fn(values, get)
-      return (Effect.isEffect(result) ? result : Effect.succeed(result)) as Effect.Effect<
-        A extends Effect.Effect<infer T, any, any> ? T : A,
-        A extends Effect.Effect<any, infer E, any> ? E : never,
-        R
-      >
-    }) as Atom.AtomResultFn<
-      Field.DecodedFromFields<TFields>,
-      A extends Effect.Effect<infer T, any, any> ? T : A,
-      A extends Effect.Effect<any, infer E, any> ? E : never
-    >
-
   const fieldComponents = makeFieldComponents(
     fields,
     stateAtom,
@@ -809,13 +663,47 @@ export const build = <TFields extends Field.FieldsRecord, R, ER = never>(
   )
 
   return {
-    atom: stateAtom,
+    isDirty: isDirtyAtom,
+    hasChangedSinceSubmit: hasChangedSinceSubmitAtom,
+    lastSubmittedValues: lastSubmittedValuesAtom,
+    submitCount: submitCountAtom,
     schema: combinedSchema,
     fields: fieldRefs,
-    Form: FormComponent,
-    Subscribe: SubscribeComponent,
-    useForm: useFormHook,
-    submit: submitHelper,
+    Initialize: InitializeComponent,
+    submit: submitAtom,
+    reset: resetAtom,
+    revertToLastSubmit: revertToLastSubmitAtom,
+    setValues: setValuesAtom,
+    setValue,
     ...fieldComponents,
-  } as BuiltForm<TFields, R>
+  } as BuiltForm<TFields, R, A, E, CM>
 }
+
+/**
+ * A curried helper that infers the schema type from the field definition.
+ * Provides ergonomic type inference when defining field components.
+ *
+ * @example
+ * ```tsx
+ * import { FormReact } from "@lucas-barake/effect-form-react"
+ *
+ * // Without extra props - schema inferred from field
+ * const TextInput = FormReact.forField(EmailField)(({ field }) => (
+ *   <input value={field.value} onChange={e => field.onChange(e.target.value)} />
+ * ))
+ *
+ * // With extra props - just specify the props type
+ * const TextInput = FormReact.forField(EmailField)<{ placeholder?: string }>(({ field, props }) => (
+ *   <input value={field.value} placeholder={props.placeholder} ... />
+ * ))
+ * ```
+ *
+ * @since 1.0.0
+ * @category Constructors
+ */
+export const forField = <K extends string, S extends Schema.Schema.Any>(
+  _field: Field.FieldDef<K, S>,
+) =>
+<P extends Record<string, unknown> = Record<string, never>>(
+  component: React.FC<FieldComponentProps<S, P>>,
+): React.FC<FieldComponentProps<S, P>> => component