packages/effect-fc/src/Component.ts

@@ -1,8 +1,7 @@
 /** biome-ignore-all lint/complexity/noBannedTypes: {} is the default type for React props */
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
-import { Context, Effect, Effectable, ExecutionStrategy, Function, Predicate, Runtime, Scope, Tracer, type Types, type Utils } from "effect"
+import { Context, Effect, Effectable, ExecutionStrategy, Exit, Function, Layer, ManagedRuntime, Predicate, Ref, Runtime, Scope, Tracer, type Types, type Utils } from "effect"
 import * as React from "react"
-import * as Hooks from "./Hooks/index.js"
 import { Memoized } from "./index.js"
 
 
@@ -46,6 +45,11 @@ export namespace Component {
     }
 }
 
+export interface ScopeOptions {
+    readonly finalizerExecutionMode?: "sync" | "fork"
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
+}
+
 
 const ComponentProto = Object.freeze({
     ...Effectable.CommitPrototype,
@@ -60,7 +64,7 @@ const ComponentProto = Object.freeze({
         runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
 
         return React.useRef(function ScopeProvider(props: P) {
-            const scope = Runtime.runSync(runtimeRef.current)(Hooks.useScope(
+            const scope = Runtime.runSync(runtimeRef.current)(useScope(
                 Array.from(
                     Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
                 ),
@@ -408,6 +412,55 @@ export const withRuntime: {
     )
 })
 
+
+export const useScope: {
+    (
+        deps: React.DependencyList,
+        options?: ScopeOptions,
+    ): Effect.Effect<Scope.Scope>
+} = Effect.fnUntraced(function*(deps, options) {
+    const runtime = yield* Effect.runtime()
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: no reactivity needed
+    const [isInitialRun, initialScope] = React.useMemo(() => Runtime.runSync(runtime)(Effect.all([
+        Ref.make(true),
+        Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential),
+    ])), [])
+    const [scope, setScope] = React.useState(initialScope)
+
+    React.useEffect(() => Runtime.runSync(runtime)(
+        Effect.if(isInitialRun, {
+            onTrue: () => Effect.as(
+                Ref.set(isInitialRun, false),
+                () => closeScope(scope, runtime, options),
+            ),
+
+            onFalse: () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential).pipe(
+                Effect.tap(scope => Effect.sync(() => setScope(scope))),
+                Effect.map(scope => () => closeScope(scope, runtime, options)),
+            ),
+        })
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    ), deps)
+
+    return scope
+})
+
+const closeScope = (
+    scope: Scope.CloseableScope,
+    runtime: Runtime.Runtime<never>,
+    options?: ScopeOptions,
+) => {
+    switch (options?.finalizerExecutionMode ?? "sync") {
+        case "sync":
+            Runtime.runSync(runtime)(Scope.close(scope, Exit.void))
+            break
+        case "fork":
+            Runtime.runFork(runtime)(Scope.close(scope, Exit.void))
+            break
+    }
+}
+
 export const useOnMount: {
     <A, E, R>(
         f: () => Effect.Effect<A, E, R>
@@ -430,6 +483,108 @@ export const useOnChange: {
     deps: React.DependencyList,
 ) {
     const runtime = yield* Effect.runtime<R>()
-    // biome-ignore lint/correctness/useExhaustiveDependencies: "f" is non-reactive
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
     return yield* React.useMemo(() => Runtime.runSync(runtime)(Effect.cached(f())), deps)
 })
+
+export const useReactEffect: {
+    <E, R>(
+        f: () => Effect.Effect<void, E, R>,
+        deps?: React.DependencyList,
+        options?: ScopeOptions,
+    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function* <E, R>(
+    f: () => Effect.Effect<void, E, R>,
+    deps?: React.DependencyList,
+    options?: ScopeOptions,
+) {
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    React.useEffect(() => Effect.Do.pipe(
+        Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
+        Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(f(), Scope.Scope, scope))),
+        Effect.map(({ scope }) =>
+            () => closeScope(scope, runtime, options)
+        ),
+        Runtime.runSync(runtime),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    ), deps)
+})
+
+export const useReactLayoutEffect: {
+    <E, R>(
+        f: () => Effect.Effect<void, E, R>,
+        deps?: React.DependencyList,
+        options?: ScopeOptions,
+    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function* <E, R>(
+    f: () => Effect.Effect<void, E, R>,
+    deps?: React.DependencyList,
+    options?: ScopeOptions,
+) {
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    React.useLayoutEffect(() => Effect.Do.pipe(
+        Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
+        Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(f(), Scope.Scope, scope))),
+        Effect.map(({ scope }) =>
+            () => closeScope(scope, runtime, options)
+        ),
+        Runtime.runSync(runtime),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    ), deps)
+})
+
+export const useCallbackSync: {
+    <Args extends unknown[], A, E, R>(
+        f: (...args: Args) => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+    ): Effect.Effect<(...args: Args) => A, never, R>
+} = Effect.fnUntraced(function* <Args extends unknown[], A, E, R>(
+    f: (...args: Args) => Effect.Effect<A, E, R>,
+    deps: React.DependencyList,
+) {
+    // biome-ignore lint/style/noNonNullAssertion: context initialization
+    const runtimeRef = React.useRef<Runtime.Runtime<R>>(null!)
+    runtimeRef.current = yield* Effect.runtime<R>()
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    return React.useCallback((...args: Args) => Runtime.runSync(runtimeRef.current)(f(...args)), deps)
+})
+
+export const useCallbackPromise: {
+    <Args extends unknown[], A, E, R>(
+        f: (...args: Args) => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+    ): Effect.Effect<(...args: Args) => Promise<A>, never, R>
+} = Effect.fnUntraced(function* <Args extends unknown[], A, E, R>(
+    f: (...args: Args) => Effect.Effect<A, E, R>,
+    deps: React.DependencyList,
+) {
+    // biome-ignore lint/style/noNonNullAssertion: context initialization
+    const runtimeRef = React.useRef<Runtime.Runtime<R>>(null!)
+    runtimeRef.current = yield* Effect.runtime<R>()
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    return React.useCallback((...args: Args) => Runtime.runPromise(runtimeRef.current)(f(...args)), deps)
+})
+
+export const useContext: {
+    <ROut, E, RIn>(
+        layer: Layer.Layer<ROut, E, RIn>,
+        options?: ScopeOptions,
+    ): Effect.Effect<Context.Context<ROut>, E, RIn>
+} = Effect.fnUntraced(function* <ROut, E, RIn>(
+    layer: Layer.Layer<ROut, E, RIn>,
+    options?: ScopeOptions,
+) {
+    const scope = yield* useScope([layer], options)
+
+    return yield* useOnChange(() => Effect.context<RIn>().pipe(
+        Effect.map(context => ManagedRuntime.make(Layer.provide(layer, Layer.succeedContext(context)))),
+        Effect.tap(runtime => Effect.addFinalizer(() => runtime.disposeEffect)),
+        Effect.andThen(runtime => runtime.runtimeEffect),
+        Effect.andThen(runtime => runtime.context),
+        Effect.provideService(Scope.Scope, scope),
+    ), [scope])
+})

packages/effect-fc/src/Form.ts

@@ -1,10 +1,11 @@
 import * as AsyncData from "@typed/async-data"
-import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream, SubscriptionRef } from "effect"
+import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream } from "effect"
 import type { NoSuchElementException } from "effect/Cause"
 import * as React from "react"
-import * as Hooks from "./Hooks/index.js"
+import * as Component from "./Component.js"
 import * as PropertyPath from "./PropertyPath.js"
 import * as Subscribable from "./Subscribable.js"
+import * as SubscriptionRef from "./SubscriptionRef.js"
 import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
 
 
@@ -163,7 +164,7 @@ export namespace service {
 
 export const service = <A, I = A, R = never, SA = void, SE = A, SR = never>(
     options: service.Options<A, I, R, SA, SE, SR>
-): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, R | Scope.Scope> => Effect.tap(
+): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, Scope.Scope | R> => Effect.tap(
     make(options),
     form => Effect.forkScoped(run(form)),
 )
@@ -220,24 +221,6 @@ extends Pipeable.Class() implements FormField<A, I> {
 
 export const isFormField = (u: unknown): u is FormField<unknown, unknown> => Predicate.hasProperty(u, FormFieldTypeId)
 
-export namespace useForm {
-    export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never>
-    extends make.Options<A, I, R, SA, SE, SR> {}
-}
-
-export const useForm: {
-    <A, I = A, R = never, SA = void, SE = A, SR = never>(
-        options: make.Options<A, I, R, SA, SE, SR>,
-        deps: React.DependencyList,
-    ): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, R>
-} = Effect.fnUntraced(function* <A, I = A, R = never, SA = void, SE = A, SR = never>(
-    options: make.Options<A, I, R, SA, SE, SR>,
-    deps: React.DependencyList,
-) {
-    const form = yield* Hooks.useMemo(() => make(options), [options.debounce, ...deps])
-    yield* Hooks.useFork(() => run(form), [form])
-    return form
-})
 
 export const useSubmit = <A, I, R, SA, SE, SR>(
     self: Form<A, I, R, SA, SE, SR>
@@ -245,7 +228,7 @@ export const useSubmit = <A, I, R, SA, SE, SR>(
     () => Promise<Option.Option<AsyncData.AsyncData<SA, SE>>>,
     never,
     SR
-> => Hooks.useCallbackPromise(() => submit(self), [self])
+> => Component.useCallbackPromise(() => submit(self), [self])
 
 export const useField = <A, I, R, SA, SE, SR, const P extends PropertyPath.Paths<NoInfer<I>>>(
     self: Form<A, I, R, SA, SE, SR>,
@@ -271,15 +254,14 @@ export const useInput: {
     <A, I>(
         field: FormField<A, I>,
         options?: useInput.Options,
-    ): Effect.Effect<useInput.Result<I>, NoSuchElementException>
+    ): Effect.Effect<useInput.Result<I>, NoSuchElementException, Scope.Scope>
 } = Effect.fnUntraced(function* <A, I>(
     field: FormField<A, I>,
     options?: useInput.Options,
 ) {
-    const internalValueRef = yield* Hooks.useMemo(() => Effect.andThen(field.encodedValueRef, SubscriptionRef.make), [field])
+    const internalValueRef = yield* Component.useOnChange(() => Effect.tap(
-    const [value, setValue] = yield* Hooks.useRefState(internalValueRef)
+        Effect.andThen(field.encodedValueRef, SubscriptionRef.make),
-
+        internalValueRef => Effect.forkScoped(Effect.all([
-    yield* Hooks.useFork(() => Effect.all([
             Stream.runForEach(
                 Stream.drop(field.encodedValueRef, 1),
                 upstreamEncodedValue => Effect.whenEffect(
@@ -296,8 +278,10 @@ export const useInput: {
                 ),
                 internalValue => Ref.set(field.encodedValueRef, internalValue),
             ),
-    ], { concurrency: "unbounded" }), [field, internalValueRef, options?.debounce])
+        ], { concurrency: "unbounded" })),
+    ), [field, options?.debounce])
 
+    const [value, setValue] = yield* SubscriptionRef.useSubscriptionRefState(internalValueRef)
     return { value, setValue }
 })
 
@@ -316,23 +300,21 @@ export const useOptionalInput: {
     <A, I>(
         field: FormField<A, Option.Option<I>>,
         options: useOptionalInput.Options<I>,
-    ): Effect.Effect<useOptionalInput.Result<I>, NoSuchElementException>
+    ): Effect.Effect<useOptionalInput.Result<I>, NoSuchElementException, Scope.Scope>
 } = Effect.fnUntraced(function* <A, I>(
     field: FormField<A, Option.Option<I>>,
     options: useOptionalInput.Options<I>,
 ) {
-    const [enabledRef, internalValueRef] = yield* Hooks.useMemo(() => Effect.andThen(
+    const [enabledRef, internalValueRef] = yield* Component.useOnChange(() => Effect.tap(
+        Effect.andThen(
             field.encodedValueRef,
             Option.match({
                 onSome: v => Effect.all([SubscriptionRef.make(true), SubscriptionRef.make(v)]),
                 onNone: () => Effect.all([SubscriptionRef.make(false), SubscriptionRef.make(options.defaultValue)]),
             }),
-    ), [field])
+        ),
 
-    const [enabled, setEnabled] = yield* Hooks.useRefState(enabledRef)
+        ([enabledRef, internalValueRef]) => Effect.forkScoped(Effect.all([
-    const [value, setValue] = yield* Hooks.useRefState(internalValueRef)
-
-    yield* Hooks.useFork(() => Effect.all([
             Stream.runForEach(
                 Stream.drop(field.encodedValueRef, 1),
 
@@ -364,7 +346,10 @@ export const useOptionalInput: {
                 ),
                 ([enabled, internalValue]) => Ref.set(field.encodedValueRef, enabled ? Option.some(internalValue) : Option.none()),
             ),
-    ], { concurrency: "unbounded" }), [field, enabledRef, internalValueRef, options.debounce])
+        ], { concurrency: "unbounded" })),
+    ), [field, options.debounce])
 
+    const [enabled, setEnabled] = yield* SubscriptionRef.useSubscriptionRefState(enabledRef)
+    const [value, setValue] = yield* SubscriptionRef.useSubscriptionRefState(internalValueRef)
     return { enabled, setEnabled, value, setValue }
 })

packages/effect-fc/src/Subscribable.ts

@@ -1,17 +1,47 @@
-import { Effect, Stream, Subscribable } from "effect"
+import { Effect, Equivalence, pipe, type Scope, Stream, Subscribable } from "effect"
+import * as React from "react"
+import * as Component from "./Component.js"
 
 
-export const zipLatestAll = <T extends ReadonlyArray<Subscribable.Subscribable<any, any, any>>>(
+export const zipLatestAll = <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
-    ...subscribables: T
+    ...elements: T
 ): Subscribable.Subscribable<
     [T[number]] extends [never]
         ? never
         : { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never },
-    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer _R> ? _E : never,
+    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer E, infer _R> ? E : never,
-    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer _R> ? _R : never
+    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer R> ? R : never
 > => Subscribable.make({
-    get: Effect.all(subscribables.map(v => v.get)),
+    get: Effect.all(elements.map(v => v.get)),
-    changes: Stream.zipLatestAll(...subscribables.map(v => v.changes)),
+    changes: Stream.zipLatestAll(...elements.map(v => v.changes)),
 }) as any
 
+export const useSubscribables: {
+    <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
+        ...elements: T
+    ): Effect.Effect<
+        [T[number]] extends [never]
+            ? never
+            : { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never },
+        [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer E, infer _R> ? E : never,
+        ([T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer R> ? R : never) | Scope.Scope
+    >
+} = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
+    ...elements: T
+) {
+    const [reactStateValue, setReactStateValue] = React.useState(
+        yield* Component.useOnMount(() => Effect.all(elements.map(v => v.get)))
+    )
+
+    yield* Component.useOnChange(() => Effect.forkScoped(pipe(
+        elements.map(ref => Stream.changesWith(ref.changes, Equivalence.strict())),
+        streams => Stream.zipLatestAll(...streams),
+        Stream.runForEach(v =>
+            Effect.sync(() => setReactStateValue(v))
+        ),
+    )), elements)
+
+    return reactStateValue as any
+})
+
 export * from "effect/Subscribable"

packages/effect-fc/src/SubscriptionRef.ts

@@ -0,0 +1,43 @@
+import { Effect, Equivalence, type Scope, Stream, SubscriptionRef } from "effect"
+import * as React from "react"
+import * as Component from "./Component.js"
+import * as SetStateAction from "./SetStateAction.js"
+
+
+export const useSubscriptionRefState: {
+    <A>(
+        ref: SubscriptionRef.SubscriptionRef<A>
+    ): Effect.Effect<readonly [A, React.Dispatch<React.SetStateAction<A>>], never, Scope.Scope>
+} = Effect.fnUntraced(function* <A>(ref: SubscriptionRef.SubscriptionRef<A>) {
+    const [reactStateValue, setReactStateValue] = React.useState(yield* Component.useOnMount(() => ref))
+
+    yield* Component.useOnChange(() => Effect.forkScoped(Stream.runForEach(
+        Stream.changesWith(ref.changes, Equivalence.strict()),
+        v => Effect.sync(() => setReactStateValue(v)),
+    )), [ref])
+
+    const setValue = yield* Component.useCallbackSync((setStateAction: React.SetStateAction<A>) =>
+        Effect.andThen(
+            SubscriptionRef.updateAndGet(ref, prevState => SetStateAction.value(setStateAction, prevState)),
+            v => setReactStateValue(v),
+        ),
+    [ref])
+
+    return [reactStateValue, setValue]
+})
+
+export const useSubscriptionRefFromState: {
+    <A>(state: readonly [A, React.Dispatch<React.SetStateAction<A>>]): Effect.Effect<SubscriptionRef.SubscriptionRef<A>, never, Scope.Scope>
+} = Effect.fnUntraced(function*([value, setValue]) {
+    const ref = yield* Component.useOnMount(() => SubscriptionRef.make(value))
+
+    yield* Component.useOnChange(() => Effect.forkScoped(Stream.runForEach(
+        Stream.changesWith(ref.changes, Equivalence.strict()),
+        v => Effect.sync(() => setValue(v)),
+    )), [setValue])
+    yield* Component.useReactEffect(() => SubscriptionRef.set(ref, value), [value])
+
+    return ref
+})
+
+export * from "effect/SubscriptionRef"

packages/effect-fc/src/index.ts

@@ -7,4 +7,5 @@ export * as PropertyPath from "./PropertyPath.js"
 export * as ReactRuntime from "./ReactRuntime.js"
 export * as SetStateAction from "./SetStateAction.js"
 export * as Subscribable from "./Subscribable.js"
+export * as SubscriptionRef from "./SubscriptionRef.js"
 export * as SubscriptionSubRef from "./SubscriptionSubRef.js"

packages/example/src/domain/Todo.ts

@@ -1,5 +1,5 @@
-import { assertEncodedJsonifiable } from "@/lib/schema"
 import { Schema } from "effect"
+import { assertEncodedJsonifiable } from "@/lib/schema"
 
 
 export class Todo extends Schema.Class<Todo>("Todo")({

packages/example/src/lib/input/TextAreaInput.tsx

@@ -1,41 +0,0 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: effect-fc HOC */
-import { Callout, Flex, TextArea, type TextAreaProps } from "@radix-ui/themes"
-import { Array, type Equivalence, Option, ParseResult, type Schema, Struct } from "effect"
-import { Component } from "effect-fc"
-import { useInput } from "effect-fc/Hooks"
-import * as React from "react"
-
-
-export type TextAreaInputProps<A, R> = Omit<useInput.Options<A, R>, "schema" | "equivalence"> & Omit<TextAreaProps, "ref">
-
-export const TextAreaInput = <A, R>(options: {
-    readonly schema: Schema.Schema<A, string, R>
-    readonly equivalence?: Equivalence.Equivalence<A>
-}): Component.Component<
-    TextAreaInputProps<A, R>,
-    React.JSX.Element,
-    ParseResult.ParseError,
-    R
-> => Component.makeUntraced("TextFieldInput")(function*(props) {
-    const input = yield* useInput({ ...options, ...props })
-    const issue = React.useMemo(() => input.error.pipe(
-        Option.map(ParseResult.ArrayFormatter.formatErrorSync),
-        Option.flatMap(Array.head),
-    ), [input.error])
-
-    return (
-        <Flex direction="column" gap="1">
-            <TextArea
-                value={input.value}
-                onChange={e => input.setValue(e.target.value)}
-                {...Struct.omit(props, "ref")}
-            />
-
-            {Option.isSome(issue) &&
-                <Callout.Root color="red" role="alert">
-                    <Callout.Text>{issue.value.message}</Callout.Text>
-                </Callout.Root>
-            }
-        </Flex>
-    )
-})

packages/example/src/lib/input/TextFieldInput.tsx

@@ -1,69 +0,0 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: effect-fc HOC */
-import { Callout, Checkbox, Flex, TextField } from "@radix-ui/themes"
-import { Array, type Equivalence, Option, ParseResult, type Schema, Struct } from "effect"
-import { Component } from "effect-fc"
-import { useInput, useOptionalInput } from "effect-fc/Hooks"
-import * as React from "react"
-
-
-export type TextFieldInputProps<A, R> = (
-    & Omit<useInput.Options<A, R>, "schema" | "equivalence">
-    & Omit<TextField.RootProps, "ref">
-)
-export type TextFieldOptionalInputProps<A, R> = (
-    & Omit<useOptionalInput.Options<A, R>, "schema" | "equivalence">
-    & Omit<TextField.RootProps, "ref" | "defaultValue">
-)
-
-export const TextFieldInput = <A, R, O extends boolean = false>(options: {
-    readonly optional?: O
-    readonly schema: Schema.Schema<A, string, R>
-    readonly equivalence?: Equivalence.Equivalence<A>
-}) => Component.makeUntraced("TextFieldInput")(function*(props: O extends true
-    ? TextFieldOptionalInputProps<A, R>
-    : TextFieldInputProps<A, R>
-) {
-    const input: (
-        | { readonly optional: true } & useOptionalInput.Result
-        | { readonly optional: false } & useInput.Result
-    ) = options.optional
-        ? {
-            optional: true,
-            ...yield* useOptionalInput({ ...options, ...props as TextFieldOptionalInputProps<A, R> }),
-        }
-        : {
-            optional: false,
-            ...yield* useInput({ ...options, ...props as TextFieldInputProps<A, R> }),
-        }
-
-    const issue = React.useMemo(() => input.error.pipe(
-        Option.map(ParseResult.ArrayFormatter.formatErrorSync),
-        Option.flatMap(Array.head),
-    ), [input.error])
-
-    return (
-        <Flex direction="column" gap="1">
-            <Flex direction="row" align="center" gap="1">
-                {input.optional &&
-                    <Checkbox
-                        checked={input.enabled}
-                        onCheckedChange={checked => input.setEnabled(checked !== "indeterminate" && checked)}
-                    />
-                }
-
-                <TextField.Root
-                    value={input.value}
-                    onChange={e => input.setValue(e.target.value)}
-                    disabled={input.optional ? !input.enabled : undefined}
-                    {...Struct.omit(props as TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>, "ref", "defaultValue")}
-                />
-            </Flex>
-
-            {(!(input.optional && !input.enabled) && Option.isSome(issue)) &&
-                <Callout.Root color="red" role="alert">
-                    <Callout.Text>{issue.value.message}</Callout.Text>
-                </Callout.Root>
-            }
-        </Flex>
-    )
-})

packages/example/src/routes/dev/input.tsx

@@ -1,41 +0,0 @@
-import { Container } from "@radix-ui/themes"
-import { createFileRoute } from "@tanstack/react-router"
-import { Schema, SubscriptionRef } from "effect"
-import { Component, Hooks, Memoized } from "effect-fc"
-import { TextFieldInput } from "@/lib/input/TextFieldInput"
-import { runtime } from "@/runtime"
-
-
-const IntFromString = Schema.NumberFromString.pipe(Schema.int())
-
-const IntTextFieldInput = TextFieldInput({ schema: IntFromString })
-const StringTextFieldInput = TextFieldInput({ schema: Schema.String })
-
-const Input = Component.makeUntraced("Input")(function*() {
-    const IntTextFieldInputFC = yield* IntTextFieldInput
-    const StringTextFieldInputFC = yield* StringTextFieldInput
-
-    const intRef1 = yield* Hooks.useOnce(() => SubscriptionRef.make(0))
-    // const intRef2 = yield* useOnce(() => SubscriptionRef.make(0))
-    const stringRef = yield* Hooks.useOnce(() => SubscriptionRef.make(""))
-    // yield* useFork(() => Stream.runForEach(intRef1.changes, Console.log), [intRef1])
-
-    // const input2 = yield* useInput({ schema: IntFromString, ref: intRef2 })
-
-    // const [str, setStr] = yield* useRefState(stringRef)
-
-    return (
-        <Container>
-            <IntTextFieldInputFC ref={intRef1} />
-            <StringTextFieldInputFC ref={stringRef} />
-            <StringTextFieldInputFC ref={stringRef} />
-        </Container>
-    )
-}).pipe(
-    Memoized.memoized,
-    Component.withRuntime(runtime.context)
-)
-
-export const Route = createFileRoute("/dev/input")({
-    component: Input,
-})

packages/example/src/todo/Todo.tsx

@@ -1,19 +1,14 @@
 import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Chunk, DateTime, Effect, Match, Option, Ref, Runtime, Schema, Stream, SubscriptionRef } from "effect"
-import { Component, Hooks, Memoized, Subscribable, SubscriptionSubRef } from "effect-fc"
+import { Component, Form, Hooks, Memoized, Subscribable, SubscriptionSubRef } from "effect-fc"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
 import * as Domain from "@/domain"
-import { TextAreaInput } from "@/lib/input/TextAreaInput"
-import { TextFieldInput } from "@/lib/input/TextFieldInput"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
 import { TodosState } from "./TodosState.service"
 
 
-const StringTextAreaInput = TextAreaInput({ schema: Schema.String })
-const OptionalDateTimeInput = TextFieldInput({ optional: true, schema: DateTimeUtcFromZonedInput })
-
 const makeTodo = makeUuid4.pipe(
     Effect.map(id => Domain.Todo.Todo.make({
         id,
@@ -48,10 +43,23 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
         Effect.let("completedAtRef", ({ ref }) => SubscriptionSubRef.makeFromPath(ref, ["completedAt"])),
     ), [props._tag, props._tag === "edit" ? props.id : undefined])
 
-    const [index, size] = yield* Hooks.useSubscribables(indexRef, state.sizeSubscribable)
+    const { form } = yield* Component.useOnChange(() => Effect.gen(function*() {
+        const form = yield* Form.service({
+            schema: Domain.Todo.TodoFromJson,
+            initialEncodedValue: yield* Schema.encode(Domain.Todo.TodoFromJson)(
+                yield* Match.value(props).pipe(
+                    Match.tag("new", () => makeTodo),
+                    Match.tag("edit", ({ id }) => state.getElementRef(id)),
+                    Match.exhaustive,
+                )
+            ),
+            onSubmit: v => Effect.void,
+        })
 
-    const StringTextAreaInputFC = yield* StringTextAreaInput
+        return { form }
-    const OptionalDateTimeInputFC = yield* OptionalDateTimeInput
+    }), [props._tag, props._tag === "edit" ? props.id : undefined])
+
+    const [index, size] = yield* Hooks.useSubscribables(indexRef, state.sizeSubscribable)
 
 
     return (

packages/example/src/todo/Todos.tsx

@@ -1,15 +1,15 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
 import { Chunk, Console, Effect } from "effect"
-import { Component, Hooks } from "effect-fc"
+import { Component, Subscribable } from "effect-fc"
 import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
 
 
 export class Todos extends Component.makeUntraced("Todos")(function*() {
     const state = yield* TodosState
-    const [todos] = yield* Hooks.useSubscribables(state.ref)
+    const [todos] = yield* Subscribable.useSubscribables(state.ref)
 
-    yield* Hooks.useOnce(() => Effect.andThen(
+    yield* Component.useOnMount(() => Effect.andThen(
         Console.log("Todos mounted"),
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))