Update bun minor+patch updates

Update docs
2026-03-24 12:01:30 +00:00 · 2026-03-24 12:32:36 +01:00 · 2026-03-24 12:28:48 +01:00 · 2026-03-24 12:19:22 +01:00 · 2026-03-24 12:16:16 +01:00 · 2026-03-24 12:09:08 +01:00
36 changed files with 2078 additions and 1323 deletions
--- a/.codex
+++ b/.codex
--- a/bun.lock
+++ b/bun.lock
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@effect-fc/monorepo",
-  "packageManager": "bun@1.3.13",
+  "packageManager": "bun@1.3.6",
  "private": true,
  "workspaces": [
    "./packages/*"
@@ -15,12 +15,12 @@
    "clean:modules": "turbo clean:modules && rm -rf node_modules"
  },
  "devDependencies": {
-    "@biomejs/biome": "^2.4.13",
-    "@effect/language-service": "^0.85.1",
-    "@types/bun": "^1.3.13",
-    "npm-check-updates": "^22.0.1",
+    "@biomejs/biome": "^2.3.11",
+    "@effect/language-service": "^0.83.0",
+    "@types/bun": "^1.3.6",
+    "npm-check-updates": "^19.3.1",
    "npm-sort": "^0.0.4",
-    "turbo": "^2.9.6",
-    "typescript": "^6.0.3"
+    "turbo": "^2.7.5",
+    "typescript": "^5.9.3"
  }
 }
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -15,8 +15,8 @@
    "typecheck": "tsc"
  },
  "dependencies": {
-    "@docusaurus/core": "3.10.1",
-    "@docusaurus/preset-classic": "3.10.1",
+    "@docusaurus/core": "3.9.2",
+    "@docusaurus/preset-classic": "3.9.2",
    "@mdx-js/react": "^3.0.0",
    "clsx": "^2.0.0",
    "prism-react-renderer": "^2.3.0",
@@ -24,10 +24,10 @@
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.10.1",
-    "@docusaurus/tsconfig": "3.10.1",
-    "@docusaurus/types": "3.10.1",
-    "typescript": "~6.0.0"
+    "@docusaurus/module-type-aliases": "3.9.2",
+    "@docusaurus/tsconfig": "3.9.2",
+    "@docusaurus/types": "3.9.2",
+    "typescript": "~5.9.0"
  },
  "browserslist": {
    "production": [
--- a/packages/effect-fc/package.json
+++ b/packages/effect-fc/package.json
@@ -1,7 +1,7 @@
 {
  "name": "effect-fc",
  "description": "Write React function components with Effect",
-  "version": "0.2.5",
+  "version": "0.2.4",
  "type": "module",
  "files": [
    "./README.md",
@@ -42,10 +42,7 @@
  },
  "peerDependencies": {
    "@types/react": "^19.2.0",
-    "effect": "^3.21.0",
+    "effect": "^3.19.0",
    "react": "^19.2.0"
-  },
-  "dependencies": {
-    "effect-lens": "^0.1.5"
  }
 }
--- a/packages/effect-fc/src/Form.ts
+++ b/packages/effect-fc/src/Form.ts
@@ -1,157 +1,293 @@
-import { Array, type Cause, Chunk, type Duration, Effect, Equal, Function, identity, Option, type ParseResult, Pipeable, Predicate, type Scope, Stream, SubscriptionRef } from "effect"
+import { Array, Cause, Chunk, type Context, type Duration, Effect, Equal, Exit, Fiber, flow, Hash, HashMap, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream } from "effect"
 import type * as React from "react"
 import * as Component from "./Component.js"
-import * as Lens from "./Lens.js"
+import * as Mutation from "./Mutation.js"
+import * as PropertyPath from "./PropertyPath.js"
+import * as Result from "./Result.js"
 import * as Subscribable from "./Subscribable.js"
+import * as SubscriptionRef from "./SubscriptionRef.js"
+import * as SubscriptionSubRef from "./SubscriptionSubRef.js"


 export const FormTypeId: unique symbol = Symbol.for("@effect-fc/Form/Form")
 export type FormTypeId = typeof FormTypeId

-export interface Form<out P extends readonly PropertyKey[], in out A, in out I = A, in out ER = never, in out EW = never>
+export interface Form<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
 extends Pipeable.Pipeable {
    readonly [FormTypeId]: FormTypeId

-    readonly path: P
-    readonly value: Subscribable.Subscribable<Option.Option<A>, ER, never>
-    readonly encodedValue: Lens.Lens<I, ER, EW, never, never>
-    readonly issues: Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[], never, never>
-    readonly isValidating: Subscribable.Subscribable<boolean, ER, never>
-    readonly canCommit: Subscribable.Subscribable<boolean, never, never>
-    readonly isCommitting: Subscribable.Subscribable<boolean, never, never>
+    readonly schema: Schema.Schema<A, I, R>
+    readonly context: Context.Context<Scope.Scope | R>
+    readonly mutation: Mutation.Mutation<
+        readonly [value: A, form: Form<A, I, R, unknown, unknown, unknown>],
+        MA, ME, MR, MP
+    >
+    readonly autosubmit: boolean
+    readonly debounce: Option.Option<Duration.DurationInput>
+
+    readonly value: Subscribable.Subscribable<Option.Option<A>>
+    readonly encodedValue: SubscriptionRef.SubscriptionRef<I>
+    readonly error: Subscribable.Subscribable<Option.Option<ParseResult.ParseError>>
+    readonly validationFiber: Subscribable.Subscribable<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>>
+
+    readonly canSubmit: Subscribable.Subscribable<boolean>
+
+    field<const P extends PropertyPath.Paths<I>>(
+        path: P
+    ): Effect.Effect<FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>>
+
+    readonly run: Effect.Effect<void>
+    readonly submit: Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>, Cause.NoSuchElementException>
 }

-export class FormImpl<out P extends readonly PropertyKey[], in out A, in out I = A, in out ER = never, in out EW = never>
-extends Pipeable.Class() implements Form<P, A, I, ER, EW> {
+export class FormImpl<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+extends Pipeable.Class() implements Form<A, I, R, MA, ME, MR, MP> {
    readonly [FormTypeId]: FormTypeId = FormTypeId

    constructor(
-        readonly path: P,
-        readonly value: Subscribable.Subscribable<Option.Option<A>, ER, never>,
-        readonly encodedValue: Lens.Lens<I, ER, EW, never, never>,
-        readonly issues: Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[], never, never>,
-        readonly isValidating: Subscribable.Subscribable<boolean, never, never>,
-        readonly canCommit: Subscribable.Subscribable<boolean, never, never>,
-        readonly isCommitting: Subscribable.Subscribable<boolean, never, never>,
+        readonly schema: Schema.Schema<A, I, R>,
+        readonly context: Context.Context<Scope.Scope | R>,
+        readonly mutation: Mutation.Mutation<
+            readonly [value: A, form: Form<A, I, R, unknown, unknown, unknown>],
+            MA, ME, MR, MP
+        >,
+        readonly autosubmit: boolean,
+        readonly debounce: Option.Option<Duration.DurationInput>,
+
+        readonly value: SubscriptionRef.SubscriptionRef<Option.Option<A>>,
+        readonly encodedValue: SubscriptionRef.SubscriptionRef<I>,
+        readonly error: SubscriptionRef.SubscriptionRef<Option.Option<ParseResult.ParseError>>,
+        readonly validationFiber: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>>,
+
+        readonly runSemaphore: Effect.Semaphore,
+        readonly fieldCache: Ref.Ref<HashMap.HashMap<FormFieldKey, FormField<unknown, unknown>>>,
+    ) {
+        super()
+
+        this.canSubmit = Subscribable.map(
+            Subscribable.zipLatestAll(this.value, this.error, this.validationFiber, this.mutation.result),
+            ([value, error, validationFiber, result]) => (
+                Option.isSome(value) &&
+                Option.isNone(error) &&
+                Option.isNone(validationFiber) &&
+                !(Result.isRunning(result) || Result.hasRefreshingFlag(result))
+            ),
+        )
+    }
+
+    field<const P extends PropertyPath.Paths<I>>(
+        path: P
+    ): Effect.Effect<FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>> {
+        const key = new FormFieldKey(path)
+        return this.fieldCache.pipe(
+            Effect.map(HashMap.get(key)),
+            Effect.flatMap(Option.match({
+                onSome: v => Effect.succeed(v as FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>),
+                onNone: () => Effect.tap(
+                    Effect.succeed(makeFormField(this as Form<A, I, R, MA, ME, MR, MP>, path)),
+                    v => Ref.update(this.fieldCache, HashMap.set(key, v as FormField<unknown, unknown>)),
+                ),
+            })),
+        )
+    }
+
+    readonly canSubmit: Subscribable.Subscribable<boolean>
+
+    get run(): Effect.Effect<void> {
+        return this.runSemaphore.withPermits(1)(Stream.runForEach(
+            this.encodedValue.changes.pipe(
+                Option.isSome(this.debounce) ? Stream.debounce(this.debounce.value) : identity
+            ),
+
+            encodedValue => this.validationFiber.pipe(
+                Effect.andThen(Option.match({
+                    onSome: Fiber.interrupt,
+                    onNone: () => Effect.void,
+                })),
+                Effect.andThen(
+                    Effect.forkScoped(Effect.onExit(
+                        Schema.decode(this.schema, { errors: "all" })(encodedValue),
+                        exit => Effect.andThen(
+                            Exit.matchEffect(exit, {
+                                onSuccess: v => Effect.andThen(
+                                    Ref.set(this.value, Option.some(v)),
+                                    Ref.set(this.error, Option.none()),
+                                ),
+                                onFailure: c => Option.match(Chunk.findFirst(Cause.failures(c), e => e._tag === "ParseError"), {
+                                    onSome: e => Ref.set(this.error, Option.some(e)),
+                                    onNone: () => Effect.void,
+                                }),
+                            }),
+                            Ref.set(this.validationFiber, Option.none()),
+                        ),
+                    )).pipe(
+                        Effect.tap(fiber => Ref.set(this.validationFiber, Option.some(fiber))),
+                        Effect.andThen(Fiber.join),
+                        Effect.andThen(value => this.autosubmit
+                            ? Effect.asVoid(Effect.forkScoped(this.submitValue(value)))
+                            : Effect.void
+                        ),
+                        Effect.forkScoped,
+                    )
+                ),
+                Effect.provide(this.context),
+            ),
+        ))
+    }
+
+    get submit(): Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>, Cause.NoSuchElementException> {
+        return this.value.pipe(
+            Effect.andThen(identity),
+            Effect.andThen(value => this.submitValue(value)),
+        )
+    }
+
+    submitValue(value: A): Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>> {
+        return Effect.whenEffect(
+            Effect.tap(
+                this.mutation.mutate([value, this as any]),
+                result => Result.isFailure(result)
+                    ? Option.match(
+                        Chunk.findFirst(
+                            Cause.failures(result.cause as Cause.Cause<ParseResult.ParseError>),
+                            e => e._tag === "ParseError",
+                        ),
+                        {
+                            onSome: e => Ref.set(this.error, Option.some(e)),
+                            onNone: () => Effect.void,
+                        },
+                    )
+                    : Effect.void
+            ),
+            this.canSubmit.get,
+        )
+    }
+}
+
+export const isForm = (u: unknown): u is Form<unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, FormTypeId)
+
+export declare namespace make {
+    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+    extends Mutation.make.Options<
+        readonly [value: NoInfer<A>, form: Form<NoInfer<A>, NoInfer<I>, NoInfer<R>, unknown, unknown, unknown>],
+        MA, ME, MR, MP
+    > {
+        readonly schema: Schema.Schema<A, I, R>
+        readonly initialEncodedValue: NoInfer<I>
+        readonly autosubmit?: boolean
+        readonly debounce?: Duration.DurationInput
+    }
+}
+
+export const make = Effect.fnUntraced(function* <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
+    options: make.Options<A, I, R, MA, ME, MR, MP>
+): Effect.fn.Return<
+    Form<A, I, R, MA, ME, Result.forkEffect.OutputContext<MA, ME, MR, MP>, MP>,
+    never,
+    Scope.Scope | R | Result.forkEffect.OutputContext<MA, ME, MR, MP>
+> {
+    return new FormImpl(
+        options.schema,
+        yield* Effect.context<Scope.Scope | R>(),
+        yield* Mutation.make(options),
+        options.autosubmit ?? false,
+        Option.fromNullable(options.debounce),
+
+        yield* SubscriptionRef.make(Option.none<A>()),
+        yield* SubscriptionRef.make(options.initialEncodedValue),
+        yield* SubscriptionRef.make(Option.none<ParseResult.ParseError>()),
+        yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, ParseResult.ParseError>>()),
+
+        yield* Effect.makeSemaphore(1),
+        yield* Ref.make(HashMap.empty<FormFieldKey, FormField<unknown, unknown>>()),
+    )
+})
+
+export declare namespace service {
+    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+    extends make.Options<A, I, R, MA, ME, MR, MP> {}
+}
+
+export const service = <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
+    options: service.Options<A, I, R, MA, ME, MR, MP>
+): Effect.Effect<
+    Form<A, I, R, MA, ME, Result.forkEffect.OutputContext<MA, ME, MR, MP>, MP>,
+    never,
+    Scope.Scope | R | Result.forkEffect.OutputContext<MA, ME, MR, MP>
+> => Effect.tap(
+    make(options),
+    form => Effect.forkScoped(form.run),
+)
+
+
+export const FormFieldTypeId: unique symbol = Symbol.for("@effect-fc/Form/FormField")
+export type FormFieldTypeId = typeof FormFieldTypeId
+
+export interface FormField<in out A, in out I = A>
+extends Pipeable.Pipeable {
+    readonly [FormFieldTypeId]: FormFieldTypeId
+
+    readonly value: Subscribable.Subscribable<Option.Option<A>, Cause.NoSuchElementException>
+    readonly encodedValue: SubscriptionRef.SubscriptionRef<I>
+    readonly issues: Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[]>
+    readonly isValidating: Subscribable.Subscribable<boolean>
+    readonly isSubmitting: Subscribable.Subscribable<boolean>
+}
+
+class FormFieldImpl<in out A, in out I = A>
+extends Pipeable.Class() implements FormField<A, I> {
+    readonly [FormFieldTypeId]: FormFieldTypeId = FormFieldTypeId
+
+    constructor(
+        readonly value: Subscribable.Subscribable<Option.Option<A>, Cause.NoSuchElementException>,
+        readonly encodedValue: SubscriptionRef.SubscriptionRef<I>,
+        readonly issues: Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[]>,
+        readonly isValidating: Subscribable.Subscribable<boolean>,
+        readonly isSubmitting: Subscribable.Subscribable<boolean>,
    ) {
        super()
    }
 }

+const FormFieldKeyTypeId: unique symbol = Symbol.for("@effect-fc/Form/FormFieldKey")
+type FormFieldKeyTypeId = typeof FormFieldKeyTypeId

-export const isForm = (u: unknown): u is Form<readonly PropertyKey[], unknown, unknown> => Predicate.hasProperty(u, FormTypeId)
+class FormFieldKey implements Equal.Equal {
+    readonly [FormFieldKeyTypeId]: FormFieldKeyTypeId = FormFieldKeyTypeId
+    constructor(readonly path: PropertyPath.PropertyPath) {}

+    [Equal.symbol](that: Equal.Equal) {
+        return isFormFieldKey(that) && PropertyPath.equivalence(this.path, that.path)
+    }
+    [Hash.symbol]() {
+        return Hash.array(this.path)
+    }
+}

-const filterIssuesByPath = (
-    issues: readonly ParseResult.ArrayFormatterIssue[],
-    path: readonly PropertyKey[],
-): readonly ParseResult.ArrayFormatterIssue[] => Array.filter(issues, issue =>
-    issue.path.length >= path.length && Array.every(path, (p, i) => p === issue.path[i])
-)
+export const isFormField = (u: unknown): u is FormField<unknown, unknown> => Predicate.hasProperty(u, FormFieldTypeId)
+const isFormFieldKey = (u: unknown): u is FormFieldKey => Predicate.hasProperty(u, FormFieldKeyTypeId)

-export const focusObjectOn: {
-    <P extends readonly PropertyKey[], A extends object, I extends object, ER, EW, K extends keyof A & keyof I>(
-        self: Form<P, A, I, ER, EW>,
-        key: K,
-    ): Form<readonly [...P, K], A[K], I[K], ER, EW>
-    <P extends readonly PropertyKey[], A extends object, I extends object, ER, EW, K extends keyof A & keyof I>(
-        key: K,
-    ): (self: Form<P, A, I, ER, EW>) => Form<readonly [...P, K], A[K], I[K], ER, EW>
-} = Function.dual(2, <P extends readonly PropertyKey[], A extends object, I extends object, ER, EW, K extends keyof A & keyof I>(
-    self: Form<P, A, I, ER, EW>,
-    key: K,
-): Form<readonly [...P, K], A[K], I[K], ER, EW> => {
-    const form = self as FormImpl<P, A, I, ER, EW>
-    const path = [...form.path, key] as const
-
-    return new FormImpl(
-        path,
-        Subscribable.mapOption(form.value, a => a[key]),
-        Lens.focusObjectOn(form.encodedValue, key),
-        Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
-        form.isValidating,
-        form.canCommit,
-        form.isCommitting,
+export const makeFormField = <A, I, R, MA, ME, MR, MP, const P extends PropertyPath.Paths<NoInfer<I>>>(
+    self: Form<A, I, R, MA, ME, MR, MP>,
+    path: P,
+): FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>> => {
+    return new FormFieldImpl(
+        Subscribable.mapEffect(self.value, Option.match({
+            onSome: v => Option.map(PropertyPath.get(v, path), Option.some),
+            onNone: () => Option.some(Option.none()),
+        })),
+        SubscriptionSubRef.makeFromPath(self.encodedValue, path),
+        Subscribable.mapEffect(self.error, Option.match({
+            onSome: flow(
+                ParseResult.ArrayFormatter.formatError,
+                Effect.map(Array.filter(issue => PropertyPath.equivalence(issue.path, path))),
+            ),
+            onNone: () => Effect.succeed([]),
+        })),
+        Subscribable.map(self.validationFiber, Option.isSome),
+        Subscribable.map(self.mutation.result, result => Result.isRunning(result) || Result.hasRefreshingFlag(result)),
    )
-})
-
-export const focusArrayAt: {
-    <P extends readonly PropertyKey[], A extends readonly any[], I extends readonly any[], ER, EW>(
-        self: Form<P, A, I, ER, EW>,
-        index: number,
-    ): Form<readonly [...P, number], A[number], I[number], ER | Cause.NoSuchElementException, EW | Cause.NoSuchElementException>
-    <P extends readonly PropertyKey[], A extends readonly any[], I extends readonly any[], ER, EW>(
-        index: number,
-    ): (self: Form<P, A, I, ER, EW>) => Form<readonly [...P, number], A[number], I[number], ER | Cause.NoSuchElementException, EW | Cause.NoSuchElementException>
-} = Function.dual(2, <P extends readonly PropertyKey[], A extends readonly any[], I extends readonly any[], ER, EW>(
-    self: Form<P, A, I, ER, EW>,
-    index: number,
-): Form<readonly [...P, number], A[number], I[number], ER | Cause.NoSuchElementException, EW | Cause.NoSuchElementException> => {
-    const form = self as FormImpl<P, A, I, ER, EW>
-    const path = [...form.path, index] as const
-
-    return new FormImpl(
-        path,
-        Subscribable.mapOptionEffect(form.value, Array.get(index)),
-        Lens.focusArrayAt(form.encodedValue, index),
-        Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
-        form.isValidating,
-        form.canCommit,
-        form.isCommitting,
-    )
-})
-
-export const focusTupleAt: {
-    <P extends readonly PropertyKey[], A extends readonly [any, ...any[]], I extends readonly [any, ...any[]], ER, EW, K extends number>(
-        self: Form<P, A, I, ER, EW>,
-        index: K,
-    ): Form<readonly [...P, K], A[K], I[K], ER, EW>
-    <P extends readonly PropertyKey[], A extends readonly [any, ...any[]], I extends readonly [any, ...any[]], ER, EW, K extends number>(
-        index: K,
-    ): (self: Form<P, A, I, ER, EW>) => Form<readonly [...P, K], A[K], I[K], ER, EW>
-} = Function.dual(2, <P extends readonly PropertyKey[], A extends readonly [any, ...any[]], I extends readonly [any, ...any[]], ER, EW, K extends number>(
-    self: Form<P, A, I, ER, EW>,
-    index: K,
-): Form<readonly [...P, K], A[K], I[K], ER, EW> => {
-    const form = self as FormImpl<P, A, I, ER, EW>
-    const path = [...form.path, index] as const
-
-    return new FormImpl(
-        path,
-        Subscribable.mapOption(form.value, Array.unsafeGet(index)),
-        Lens.focusTupleAt(form.encodedValue, index),
-        Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
-        form.isValidating,
-        form.canCommit,
-        form.isCommitting,
-    )
-})
-
-export const focusChunkAt: {
-    <P extends readonly PropertyKey[], A, I, ER, EW>(
-        self: Form<P, Chunk.Chunk<A>, Chunk.Chunk<I>, ER, EW>,
-        index: number,
-    ): Form<readonly [...P, number], A, I, ER | Cause.NoSuchElementException, EW>
-    <P extends readonly PropertyKey[], A, I, ER, EW>(
-        index: number,
-    ): (self: Form<P, Chunk.Chunk<A>, Chunk.Chunk<I>, ER, EW>) => Form<readonly [...P, number], A, I, ER | Cause.NoSuchElementException, EW>
-} = Function.dual(2, <P extends readonly PropertyKey[], A, I, ER, EW>(
-    self: Form<P, Chunk.Chunk<A>, Chunk.Chunk<I>, ER, EW>,
-    index: number,
-): Form<readonly [...P, number], A, I, ER | Cause.NoSuchElementException, EW> => {
-    const form = self as FormImpl<P, Chunk.Chunk<A>, Chunk.Chunk<I>, ER, EW>
-    const path = [...form.path, index] as const
-
-    return new FormImpl(
-        path,
-        Subscribable.mapOptionEffect(form.value, Chunk.get(index)),
-        Lens.focusChunkAt(form.encodedValue, index),
-        Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
-        form.isValidating,
-        form.canCommit,
-        form.isCommitting,
-    )
-})
+}


 export namespace useInput {
@@ -165,39 +301,33 @@ export namespace useInput {
    }
 }

-export const useInput = Effect.fnUntraced(function* <P extends readonly PropertyKey[], A, I, ER, EW>(
-    form: Form<P, A, I, ER, EW>,
+export const useInput = Effect.fnUntraced(function* <A, I>(
+    field: FormField<A, I>,
    options?: useInput.Options,
-): Effect.fn.Return<useInput.Success<I>, ER, Scope.Scope> {
-    const internalValueLens = yield* Component.useOnChange(() => Effect.gen(function*() {
-        const internalValueLens = yield* Lens.get(form.encodedValue).pipe(
-            Effect.flatMap(SubscriptionRef.make),
-            Effect.map(Lens.fromSubscriptionRef),
-        )
-
-        yield* Effect.forkScoped(Effect.all([
+): Effect.fn.Return<useInput.Success<I>, Cause.NoSuchElementException, Scope.Scope> {
+    const internalValueRef = yield* Component.useOnChange(() => Effect.tap(
+        Effect.andThen(field.encodedValue, SubscriptionRef.make),
+        internalValueRef => Effect.forkScoped(Effect.all([
            Stream.runForEach(
-                Stream.drop(form.encodedValue.changes, 1),
+                Stream.drop(field.encodedValue, 1),
                upstreamEncodedValue => Effect.whenEffect(
-                    Lens.set(internalValueLens, upstreamEncodedValue),
-                    Effect.andThen(Lens.get(internalValueLens), internalValue => !Equal.equals(upstreamEncodedValue, internalValue)),
+                    Ref.set(internalValueRef, upstreamEncodedValue),
+                    Effect.andThen(internalValueRef, internalValue => !Equal.equals(upstreamEncodedValue, internalValue)),
                ),
            ),

            Stream.runForEach(
-                internalValueLens.changes.pipe(
+                internalValueRef.changes.pipe(
                    Stream.drop(1),
                    Stream.changesWith(Equal.equivalence()),
                    options?.debounce ? Stream.debounce(options.debounce) : identity,
                ),
-                internalValue => Lens.set(form.encodedValue, internalValue),
+                internalValue => Ref.set(field.encodedValue, internalValue),
            ),
-        ], { concurrency: "unbounded", discard: true }))
+        ], { concurrency: "unbounded" })),
+    ), [field, options?.debounce])

-        return internalValueLens
-    }), [form, options?.debounce])
-
-    const [value, setValue] = yield* Lens.useState(internalValueLens)
+    const [value, setValue] = yield* SubscriptionRef.useSubscriptionRefState(internalValueRef)
    return { value, setValue }
 })

@@ -212,63 +342,55 @@ export namespace useOptionalInput {
    }
 }

-export const useOptionalInput = Effect.fnUntraced(function* <P extends readonly PropertyKey[], A, I, ER, EW>(
-    field: Form<P, A, Option.Option<I>, ER, EW>,
+export const useOptionalInput = Effect.fnUntraced(function* <A, I>(
+    field: FormField<A, Option.Option<I>>,
    options: useOptionalInput.Options<I>,
-): Effect.fn.Return<useOptionalInput.Success<I>, ER, Scope.Scope> {
-    const [enabledLens, internalValueLens] = yield* Component.useOnChange(() => Effect.gen(function*() {
-        const [enabledLens, internalValueLens] = yield* Effect.flatMap(
-            Lens.get(field.encodedValue),
+): Effect.fn.Return<useOptionalInput.Success<I>, Cause.NoSuchElementException, Scope.Scope> {
+    const [enabledRef, internalValueRef] = yield* Component.useOnChange(() => Effect.tap(
+        Effect.andThen(
+            field.encodedValue,
            Option.match({
-                onSome: v => Effect.all([
-                    Effect.map(SubscriptionRef.make(true), Lens.fromSubscriptionRef),
-                    Effect.map(SubscriptionRef.make(v), Lens.fromSubscriptionRef),
-                ]),
-                onNone: () => Effect.all([
-                    Effect.map(SubscriptionRef.make(false), Lens.fromSubscriptionRef),
-                    Effect.map(SubscriptionRef.make(options.defaultValue), Lens.fromSubscriptionRef),
-                ]),
+                onSome: v => Effect.all([SubscriptionRef.make(true), SubscriptionRef.make(v)]),
+                onNone: () => Effect.all([SubscriptionRef.make(false), SubscriptionRef.make(options.defaultValue)]),
            }),
-        )
+        ),

-        yield* Effect.forkScoped(Effect.all([
+        ([enabledRef, internalValueRef]) => Effect.forkScoped(Effect.all([
            Stream.runForEach(
-                Stream.drop(field.encodedValue.changes, 1),
+                Stream.drop(field.encodedValue, 1),

                upstreamEncodedValue => Effect.whenEffect(
                    Option.match(upstreamEncodedValue, {
                        onSome: v => Effect.andThen(
-                            Lens.set(enabledLens, true),
-                            Lens.set(internalValueLens, v),
+                            Ref.set(enabledRef, true),
+                            Ref.set(internalValueRef, v),
                        ),
                        onNone: () => Effect.andThen(
-                            Lens.set(enabledLens, false),
-                            Lens.set(internalValueLens, options.defaultValue),
+                            Ref.set(enabledRef, false),
+                            Ref.set(internalValueRef, options.defaultValue),
                        ),
                    }),

                    Effect.andThen(
-                        Effect.all([Lens.get(enabledLens), Lens.get(internalValueLens)]),
+                        Effect.all([enabledRef, internalValueRef]),
                        ([enabled, internalValue]) => !Equal.equals(upstreamEncodedValue, enabled ? Option.some(internalValue) : Option.none()),
                    ),
                ),
            ),

            Stream.runForEach(
-                enabledLens.changes.pipe(
-                    Stream.zipLatest(internalValueLens.changes),
+                enabledRef.changes.pipe(
+                    Stream.zipLatest(internalValueRef.changes),
                    Stream.drop(1),
                    Stream.changesWith(Equal.equivalence()),
                    options?.debounce ? Stream.debounce(options.debounce) : identity,
                ),
-                ([enabled, internalValue]) => Lens.set(field.encodedValue, enabled ? Option.some(internalValue) : Option.none()),
+                ([enabled, internalValue]) => Ref.set(field.encodedValue, enabled ? Option.some(internalValue) : Option.none()),
            ),
-        ], { concurrency: "unbounded" }))
+        ], { concurrency: "unbounded" })),
+    ), [field, options.debounce])

-        return [enabledLens, internalValueLens] as const
-    }), [field, options.debounce])
-
-    const [enabled, setEnabled] = yield* Lens.useState(enabledLens)
-    const [value, setValue] = yield* Lens.useState(internalValueLens)
+    const [enabled, setEnabled] = yield* SubscriptionRef.useSubscriptionRefState(enabledRef)
+    const [value, setValue] = yield* SubscriptionRef.useSubscriptionRefState(internalValueRef)
    return { enabled, setEnabled, value, setValue }
 })
--- a/packages/effect-fc/src/Lens.test.ts
+++ b/packages/effect-fc/src/Lens.test.ts
@@ -0,0 +1,139 @@
+import { describe, expect, test } from "bun:test"
+import { Chunk, Effect, SubscriptionRef } from "effect"
+import * as Lens from "./Lens.js"
+
+
+describe("Lens", () => {
+    test("focusField focuses a nested property without touching other fields", async () => {
+        const [initialCount, updatedState] = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make({ count: 1, label: "original" }),
+                parent => {
+                    const countLens = Lens.focusField(Lens.fromSubscriptionRef(parent), "count")
+                    return Effect.flatMap(
+                        Lens.get(countLens),
+                        count => Effect.flatMap(
+                            Lens.set(countLens, count + 5),
+                            () => Effect.map(parent.get, state => [count, state] as const),
+                        ),
+                    )
+                },
+            ),
+        )
+
+        expect(initialCount).toBe(1)
+        expect(updatedState).toEqual({ count: 6, label: "original" })
+    })
+
+    test("focusMutableField preserves the root identity when mutating in place", async () => {
+        const original = { detail: "keep" }
+        const updated = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make(original),
+                parent => {
+                    const detailLens = Lens.focusMutableField(Lens.fromSubscriptionRef(parent), "detail")
+                    return Effect.flatMap(
+                        Lens.set(detailLens, "mutated"),
+                        () => parent.get,
+                    )
+                },
+            ),
+        )
+
+        expect(updated).toBe(original)
+        expect(updated.detail).toBe("mutated")
+    })
+
+    test("focusArrayAt updates the selected index", async () => {
+        const updated = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([10, 20, 30]),
+                parent => {
+                    const elementLens = Lens.focusArrayAt(Lens.fromSubscriptionRef(parent), 1)
+                    return Effect.flatMap(
+                        Lens.update(elementLens, value => value + 5),
+                        () => parent.get,
+                    )
+                },
+            ),
+        )
+
+        expect(updated).toEqual([10, 25, 30])
+    })
+
+    test("focusMutableArrayAt mutates the array reference in place", async () => {
+        const original = ["foo", "bar"]
+        const updated = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make(original),
+                parent => {
+                    const elementLens = Lens.focusMutableArrayAt(Lens.fromSubscriptionRef(parent), 0)
+                    return Effect.flatMap(
+                        Lens.set(elementLens, "baz"),
+                        () => parent.get,
+                    )
+                },
+            ),
+        )
+
+        expect(updated).toBe(original)
+        expect(updated).toEqual(["baz", "bar"])
+    })
+
+    test("focusChunkAt replaces the focused chunk element", async () => {
+        const updated = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make(Chunk.make(1, 2, 3) as Chunk.Chunk<number>),
+                parent => {
+                    const elementLens = Lens.focusChunkAt(Lens.fromSubscriptionRef(parent), 2)
+                    return Effect.flatMap(
+                        Lens.set(elementLens, 99),
+                        () => parent.get,
+                    )
+                },
+            ),
+        )
+
+        expect(Chunk.toReadonlyArray(updated)).toEqual([1, 2, 99])
+    })
+
+    // test("changes stream emits updates when lens mutates state", async () => {
+    //     const events = await Effect.runPromise(
+    //         Effect.flatMap(
+    //             SubscriptionRef.make({ count: 0 }),
+    //             parent => {
+    //                 const lens = Lens.mapField(Lens.fromSubscriptionRef(parent), "count")
+    //                 return Effect.fork(Stream.runCollect(Stream.take(lens.changes, 2))).pipe(
+    //                     Effect.tap(Lens.set(lens, 1)),
+    //                     Effect.tap(Lens.set(lens, 1)),
+    //                     Effect.andThen(Fiber.join),
+    //                     Effect.map(Chunk.toReadonlyArray),
+    //                 )
+    //             },
+    //         ),
+    //     )
+
+    //     expect(events).toEqual([1, 2])
+    // })
+
+    // test("mapped changes stream can derive transformed values", async () => {
+    //     const derived = await Effect.runPromise(
+    //         Effect.flatMap(
+    //             SubscriptionRef.make({ count: 10 }),
+    //             parent => {
+    //                 const lens = Lens.mapField(Lens.fromSubscriptionRef(parent), "count")
+    //                 const transformed = Stream.map(lens.changes, count => `count:${ count }`)
+    //                 return Effect.scoped(() => Effect.flatMap(
+    //                     Effect.forkScoped(Stream.runCollect(Stream.take(transformed, 1))),
+    //                     fiber => Effect.flatMap(
+    //                         Lens.set(lens, 42),
+    //                         () => Effect.join(fiber),
+    //                     ),
+    //                 ))
+    //             },
+    //         ),
+    //     )
+
+    //     expect(derived).toEqual(["count:42"])
+    // })
+})
--- a/packages/effect-fc/src/Lens.ts
+++ b/packages/effect-fc/src/Lens.ts
@@ -1,62 +1,408 @@
-import { Effect, Equivalence, Stream, SubscriptionRef } from "effect"
-import { Lens } from "effect-lens"
-import * as React from "react"
-import * as Component from "./Component.js"
-import * as SetStateAction from "./SetStateAction.js"
+import { Array, Chunk, Effect, Function, Pipeable, Predicate, Readable, Stream, Subscribable, type SubscriptionRef } from "effect"
+import type { NoSuchElementException } from "effect/Cause"


-export * from "effect-lens/Lens"
+export const LensTypeId: unique symbol = Symbol.for("@effect-fc/Lens/Lens")
+export type LensTypeId = typeof LensTypeId

-export declare namespace useState {
-    export interface Options<A> {
-        readonly equivalence?: Equivalence.Equivalence<A>
+/**
+ * A bidirectional view into some shared state that exposes:
+ *
+ * 1. a `get` effect for reading the current value of type `A`,
+ * 2. a `changes` stream that emits every subsequent update to `A`, and
+ * 3. a `modify` effect that can transform the current value.
+ */
+export interface Lens<in out A, in out ER = never, in out EW = never, in out RR = never, in out RW = never>
+extends Subscribable.Subscribable<A, ER, RR> {
+    readonly [LensTypeId]: LensTypeId
+
+    readonly modify: <B, E1 = never, R1 = never>(
+        f: (a: A) => Effect.Effect<readonly [B, A], E1, R1>
+    ) => Effect.Effect<B, ER | EW | E1, RR | RW | R1>
+}
+
+/**
+ * Internal `Lens` implementation.
+ */
+export class LensImpl<in out A, in out ER = never, in out EW = never, in out RR = never, in out RW = never>
+    extends Pipeable.Class() implements Lens<A, ER, EW, RR, RW> {
+    readonly [Readable.TypeId]: Readable.TypeId = Readable.TypeId
+    readonly [Subscribable.TypeId]: Subscribable.TypeId = Subscribable.TypeId
+    readonly [LensTypeId]: LensTypeId = LensTypeId
+
+    constructor(
+        readonly get: Effect.Effect<A, ER, RR>,
+        readonly changes: Stream.Stream<A, ER, RR>,
+        readonly modify: <B, E1 = never, R1 = never>(
+            f: (a: A) => Effect.Effect<readonly [B, A], E1, R1>
+        ) => Effect.Effect<B, ER | EW | E1, RR | RW | R1>,
+    ) {
+        super()
    }
 }

-export const useState = Effect.fnUntraced(function* <A, ER, EW, RR, RW>(
-    lens: Lens.Lens<A, ER, EW, RR, RW>,
-    options?: useState.Options<NoInfer<A>>,
-): Effect.fn.Return<readonly [A, React.Dispatch<React.SetStateAction<A>>], ER, RR | RW> {
-    const [reactStateValue, setReactStateValue] = React.useState(yield* Component.useOnMount(() => Lens.get(lens)))

-    yield* Component.useReactEffect(() => Effect.forkScoped(
-        Stream.runForEach(
-            Stream.changesWith(lens.changes, options?.equivalence ?? Equivalence.strict()),
-            v => Effect.sync(() => setReactStateValue(v)),
-        )
-    ), [lens])
+/**
+ * Checks whether a value is a `Lens`.
+ */
+export const isLens = (u: unknown): u is Lens<unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, LensTypeId)

-    const setValue = yield* Component.useCallbackSync(
-        (setStateAction: React.SetStateAction<A>) => Effect.andThen(
-            Lens.updateAndGet(lens, prevState => SetStateAction.value(setStateAction, prevState)),
-            v => setReactStateValue(v),
-        ),
-        [lens],
+
+/**
+ * Creates a `Lens` by supplying how to read the current value, observe changes, and apply transformations.
+ *
+ * Either `modify` or `set` needs to be supplied.
+ */
+export const make = <A, ER, EW, RR, RW>(
+    options: {
+        readonly get: Effect.Effect<A, ER, RR>
+        readonly changes: Stream.Stream<A, ER, RR>
+    } & (
+        | {
+            readonly modify: <B, E1 = never, R1 = never>(
+                f: (a: A) => Effect.Effect<readonly [B, A], E1, R1>
+            ) => Effect.Effect<B, ER | EW | E1, RR | RW | R1>
+        }
+        | { readonly set: (a: A) => Effect.Effect<void, EW, RW> }
    )
+): Lens<A, ER, EW, RR, RW> => new LensImpl<A, ER, EW, RR, RW>(
+    options.get,
+    options.changes,
+    Predicate.hasProperty(options, "modify")
+        ? options.modify
+        : <B, E1 = never, R1 = never>(
+            f: (a: A) => Effect.Effect<readonly [B, A], E1, R1>
+        ) => Effect.flatMap(
+            options.get,
+            a => Effect.flatMap(f(a), ([b, next]) => Effect.as(options.set(next), b)
+        )),
+)

-    return [reactStateValue, setValue]
+/**
+ * Creates a `Lens` that proxies a `SubscriptionRef`.
+ */
+export const fromSubscriptionRef = <A>(
+    ref: SubscriptionRef.SubscriptionRef<A>
+): Lens<A, never, never, never, never> => make({
+    get get() { return ref.get },
+    get changes() { return ref.changes },
+    modify: <B, E1 = never, R1 = never>(
+        f: (a: A) => Effect.Effect<readonly [B, A], E1, R1>
+    ) => ref.modifyEffect(f),
 })

-export declare namespace useFromReactState {
-    export interface Options<A> {
-        readonly equivalence?: Equivalence.Equivalence<A>
-    }
+/**
+ * Flattens an effectful `Lens`.
+ */
+export const unwrap = <A, ER, EW, RR, RW, E1, R1>(
+    effect: Effect.Effect<Lens<A, ER, EW, RR, RW>, E1, R1>
+): Lens<A, ER | E1, EW | E1, RR | R1, RW | R1> => make({
+    get: Effect.flatMap(effect, l => l.get),
+    changes: Stream.unwrap(Effect.map(effect, l => l.changes)),
+    modify: <B, E2 = never, R2 = never>(
+        f: (a: A) => Effect.Effect<readonly [B, A], E2, R2>
+    ) => Effect.flatMap(effect, l => l.modify(f)),
+})
+
+
+/**
+ * Derives a new `Lens` by applying synchronous getters and setters over the focused value.
+ */
+export const map: {
+    <A, ER, EW, RR, RW, B>(
+        self: Lens<A, ER, EW, RR, RW>,
+        get: (a: NoInfer<A>) => B,
+        set: (a: NoInfer<A>, b: B) => NoInfer<A>,
+    ): Lens<B, ER, EW, RR, RW>
+    <A, ER, EW, RR, RW, B>(
+        get: (a: NoInfer<A>) => B,
+        set: (a: NoInfer<A>, b: B) => NoInfer<A>,
+    ): (self: Lens<A, ER, EW, RR, RW>) => Lens<B, ER, EW, RR, RW>
+} = Function.dual(3, <A, ER, EW, RR, RW, B>(
+    self: Lens<A, ER, EW, RR, RW>,
+    get: (a: NoInfer<A>) => B,
+    set: (a: NoInfer<A>, b: B) => NoInfer<A>,
+): Lens<B, ER, EW, RR, RW> => make({
+    get get() { return Effect.map(self.get, get) },
+    get changes() { return Stream.map(self.changes, get) },
+    modify: <C, E1 = never, R1 = never>(
+        f: (b: B) => Effect.Effect<readonly [C, B], E1, R1>
+    ) => self.modify(a =>
+        Effect.flatMap(f(get(a)), ([c, next]) => Effect.succeed([c, set(a, next)]))
+    ),
+}))
+
+/**
+ * Derives a new `Lens` by applying effectful getters and setters over the focused value.
+ */
+export const mapEffect: {
+    <A, ER, EW, RR, RW, B, EGet = never, RGet = never, ESet = never, RSet = never>(
+        self: Lens<A, ER, EW, RR, RW>,
+        get: (a: NoInfer<A>) => Effect.Effect<B, EGet, RGet>,
+        set: (a: NoInfer<A>, b: B) => Effect.Effect<NoInfer<A>, ESet, RSet>,
+    ): Lens<B, ER | EGet, EW | ESet, RR | RGet, RW | RSet>
+    <A, ER, EW, RR, RW, B, EGet = never, RGet = never, ESet = never, RSet = never>(
+        get: (a: NoInfer<A>) => Effect.Effect<B, EGet, RGet>,
+        set: (a: NoInfer<A>, b: B) => Effect.Effect<NoInfer<A>, ESet, RSet>,
+    ): (self: Lens<A, ER, EW, RR, RW>) => Lens<B, ER | EGet, EW | ESet, RR | RGet, RW | RSet>
+} = Function.dual(3, <A, ER, EW, RR, RW, B, EGet = never, RGet = never, ESet = never, RSet = never>(
+    self: Lens<A, ER, EW, RR, RW>,
+    get: (a: NoInfer<A>) => Effect.Effect<B, EGet, RGet>,
+    set: (a: NoInfer<A>, b: B) => Effect.Effect<NoInfer<A>, ESet, RSet>,
+): Lens<B, ER | EGet, EW | ESet, RR | RGet, RW | RSet> => make({
+    get get() { return Effect.flatMap(self.get, get) },
+    get changes() { return Stream.mapEffect(self.changes, get) },
+    modify: <C, E1 = never, R1 = never>(
+        f: (b: B) => Effect.Effect<readonly [C, B], E1, R1>
+    ) => self.modify(a => Effect.flatMap(
+        get(a),
+        b => Effect.flatMap(
+            f(b),
+            ([c, bNext]) => Effect.flatMap(
+                set(a, bNext),
+                nextA => Effect.succeed([c, nextA] as const),
+            ),
+        )
+    )),
+}))
+
+/**
+ * Allows transforming only the `changes` stream of a `Lens` while keeping the focus type intact.
+ */
+export const mapStream: {
+    <A, ER, EW, RR, RW>(
+        self: Lens<A, ER, EW, RR, RW>,
+        f: (changes: Stream.Stream<NoInfer<A>, NoInfer<ER>, NoInfer<RR>>) => Stream.Stream<NoInfer<A>, NoInfer<ER>, NoInfer<RR>>,
+    ): Lens<A, ER, EW, RR, RW>
+    <A, ER, EW, RR, RW>(
+        f: (changes: Stream.Stream<NoInfer<A>, NoInfer<ER>, NoInfer<RR>>) => Stream.Stream<NoInfer<A>, NoInfer<ER>, NoInfer<RR>>,
+    ): (self: Lens<A, ER, EW, RR, RW>) => Lens<A, ER, EW, RR, RW>
+} = Function.dual(2, <A, ER, EW, RR, RW>(
+    self: Lens<A, ER, EW, RR, RW>,
+    f: (changes: Stream.Stream<NoInfer<A>, NoInfer<ER>, NoInfer<RR>>) => Stream.Stream<NoInfer<A>, NoInfer<ER>, NoInfer<RR>>,
+): Lens<A, ER, EW, RR, RW> => make({
+    get get() { return self.get },
+    get changes() { return f(self.changes) },
+    modify: self.modify,
+}))
+
+
+/**
+ * Narrows the focus to a field of an object. Replaces the object in an immutable fashion when written to.
+ */
+export const focusField: {
+    <A extends object, K extends keyof A, ER, EW, RR, RW>(
+        self: Lens<A, ER, EW, RR, RW>,
+        key: K,
+    ): Lens<A[K], ER, EW, RR, RW>
+    <A extends object, K extends keyof A, ER, EW, RR, RW>(
+        key: K,
+    ): (self: Lens<A, ER, EW, RR, RW>) => Lens<A[K], ER, EW, RR, RW>
+} = Function.dual(2, <A extends object, K extends keyof A, ER, EW, RR, RW>(
+    self: Lens<A, ER, EW, RR, RW>,
+    key: K,
+): Lens<A[K], ER, EW, RR, RW> => map(
+    self,
+    a => a[key],
+    (a, b) => Object.setPrototypeOf({ ...a, [key]: b }, Object.getPrototypeOf(a)),
+))
+
+export declare namespace focusMutableField {
+    export type WritableKeys<T> = {
+        [K in keyof T]-?: IfEquals<
+            { [P in K]: T[K] },
+            { -readonly [P in K]: T[K] },
+            K,
+            never
+        >
+    }[keyof T]
+
+    type IfEquals<X, Y, A = X, B = never> = (<T>() => T extends X ? 1 : 2) extends (<T>() => T extends Y ? 1 : 2) ? A : B
 }

-export const useFromReactState = Effect.fnUntraced(function* <A>(
-    [value, setValue]: readonly [A, React.Dispatch<React.SetStateAction<A>>],
-    options?: useFromReactState.Options<NoInfer<A>>,
-): Effect.fn.Return<Lens.Lens<A, never, never, never, never>> {
-    const lens = yield* Component.useOnMount(() => Effect.map(
-        SubscriptionRef.make(value),
-        Lens.fromSubscriptionRef,
-    ))
+/**
+ * Narrows the focus to a mutable field of an object. Mutates the object in place when written to.
+ */
+export const focusMutableField: {
+    <A extends object, K extends focusMutableField.WritableKeys<A>, ER, EW, RR, RW>(
+        self: Lens<A, ER, EW, RR, RW>,
+        key: K,
+    ): Lens<A[K], ER, EW, RR, RW>
+    <A extends object, K extends focusMutableField.WritableKeys<A>, ER, EW, RR, RW>(
+        key: K,
+    ): (self: Lens<A, ER, EW, RR, RW>) => Lens<A[K], ER, EW, RR, RW>
+} = Function.dual(2, <A extends object, K extends focusMutableField.WritableKeys<A>, ER, EW, RR, RW>(
+    self: Lens<A, ER, EW, RR, RW>,
+    key: K,
+): Lens<A[K], ER, EW, RR, RW> => map(self, a => a[key], (a, b) => { a[key] = b; return a }))

-    yield* Component.useReactEffect(() => Effect.forkScoped(Stream.runForEach(
-        Stream.changesWith(lens.changes, options?.equivalence ?? Equivalence.strict()),
-        v => Effect.sync(() => setValue(v)),
-    )), [setValue])
-    yield* Component.useReactEffect(() => Lens.set(lens, value), [value])
+/**
+ * Narrows the focus to an indexed element of an array. Replaces the array in an immutable fashion when written to.
+ */
+export const focusArrayAt: {
+    <A extends readonly any[], ER, EW, RR, RW>(
+        self: Lens<A, ER, EW, RR, RW>,
+        index: number,
+    ): Lens<A[number]>
+    <A extends readonly any[], ER, EW, RR, RW>(
+        index: number
+    ): (self: Lens<A, ER, EW, RR, RW>) => Lens<A[number], ER | NoSuchElementException, EW | NoSuchElementException, RR, RW>
+} = Function.dual(2, <A extends readonly any[], ER, EW, RR, RW>(
+    self: Lens<A, ER, EW, RR, RW>,
+    index: number,
+): Lens<A[number], ER | NoSuchElementException, EW | NoSuchElementException, RR, RW> => mapEffect(
+    self,
+    Array.get(index),
+    (a, b) => Array.replaceOption(a, index, b) as any,
+))

-    return lens
-})
+/**
+ * Narrows the focus to an indexed element of a mutable array. Mutates the array in place when written to.
+ */
+export const focusMutableArrayAt: {
+    <A, ER, EW, RR, RW>(
+        self: Lens<A[], ER, EW, RR, RW>,
+        index: number,
+    ): Lens<A, ER | NoSuchElementException, EW | NoSuchElementException, RR, RW>
+    <A, ER, EW, RR, RW>(
+        index: number
+    ): (self: Lens<A[], ER, EW, RR, RW>) => Lens<A, ER | NoSuchElementException, EW | NoSuchElementException, RR, RW>
+} = Function.dual(2, <A, ER, EW, RR, RW>(
+    self: Lens<A[], ER, EW, RR, RW>,
+    index: number,
+): Lens<A, ER | NoSuchElementException, EW | NoSuchElementException, RR, RW> => mapEffect(
+    self,
+    Array.get(index),
+    (a, b) => Effect.flatMap(
+        Array.get(a, index),
+        () => Effect.as(Effect.sync(() => { a[index] = b }), a),
+    ),
+))
+
+/**
+ * Narrows the focus to an indexed element of `Chunk`. Replaces the `Chunk` in an immutable fashion when written to.
+ */
+export const focusChunkAt: {
+    <A, ER, EW, RR, RW>(
+        self: Lens<Chunk.Chunk<A>, ER, EW, RR, RW>,
+        index: number,
+    ): Lens<A, ER | NoSuchElementException, EW, RR, RW>
+    <A, ER, EW, RR, RW>(
+        index: number
+    ): (self: Lens<Chunk.Chunk<A>, ER, EW, RR, RW>) => Lens<A, ER | NoSuchElementException, EW, RR, RW>
+} = Function.dual(2, <A, ER, EW, RR, RW>(
+    self: Lens<Chunk.Chunk<A>, ER, EW, RR, RW>,
+    index: number,
+): Lens<A, ER | NoSuchElementException, EW, RR, RW> => mapEffect(
+    self,
+    Chunk.get(index),
+    (a, b) => Effect.succeed(Chunk.replace(a, index, b))),
+)
+
+
+/**
+ * Reads the current value from a `Lens`.
+ */
+export const get = <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>): Effect.Effect<A, ER, RR> => self.get
+
+/**
+ * Sets the value of a `Lens`.
+ */
+export const set: {
+    <A, ER, EW, RR, RW>(value: A): (self: Lens<A, ER, EW, RR, RW>) => Effect.Effect<void, ER | EW, RR | RW>
+    <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, value: A): Effect.Effect<void, ER | EW, RR | RW>
+} = Function.dual(2, <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, value: A) =>
+    self.modify<void, never, never>(() => Effect.succeed([void 0, value] as const)),
+)
+
+/**
+ * Sets a `Lens` to a new value and returns the previous value.
+ */
+export const getAndSet: {
+    <A, ER, EW, RR, RW>(value: A): (self: Lens<A, ER, EW, RR, RW>) => Effect.Effect<A, ER | EW, RR | RW>
+    <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, value: A): Effect.Effect<A, ER | EW, RR | RW>
+} = Function.dual(2, <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, value: A) =>
+    self.modify<A, never, never>(a => Effect.succeed([a, value] as const)),
+)
+
+/**
+ * Applies a synchronous transformation to the value of a `Lens`, discarding the previous value.
+ */
+export const update: {
+    <A, ER, EW, RR, RW>(f: (a: A) => A): (self: Lens<A, ER, EW, RR, RW>) => Effect.Effect<void, ER | EW, RR | RW>
+    <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => A): Effect.Effect<void, ER | EW, RR | RW>
+} = Function.dual(2, <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => A) =>
+    self.modify<void, never, never>(a => Effect.succeed([void 0, f(a)] as const)),
+)
+
+/**
+ * Applies an effectful transformation to the value of a `Lens`, discarding the previous value.
+ */
+export const updateEffect: {
+    <A, ER, EW, RR, RW, E, R>(f: (a: A) => Effect.Effect<A, E, R>): (self: Lens<A, ER, EW, RR, RW>) => Effect.Effect<void, ER | EW | E, RR | RW | R>
+    <A, ER, EW, RR, RW, E, R>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => Effect.Effect<A, E, R>): Effect.Effect<void, ER | EW | E, RR | RW | R>
+} = Function.dual(2, <A, ER, EW, RR, RW, E, R>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => Effect.Effect<A, E, R>) =>
+    self.modify<void, E, R>(a => Effect.flatMap(
+        f(a),
+        next => Effect.succeed([void 0, next] as const),
+    )),
+)
+
+/**
+ * Applies a synchronous transformation the value of a `Lens` while returning the previous value.
+ */
+export const getAndUpdate: {
+    <A, ER, EW, RR, RW>(f: (a: A) => A): (self: Lens<A, ER, EW, RR, RW>) => Effect.Effect<A, ER | EW, RR | RW>
+    <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => A): Effect.Effect<A, ER | EW, RR | RW>
+} = Function.dual(2, <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => A) =>
+    self.modify<A, never, never>(a => Effect.succeed([a, f(a)] as const)),
+)
+
+/**
+ * Applies an effectful transformation the value of a `Lens` while returning the previous value.
+ */
+export const getAndUpdateEffect: {
+    <A, ER, EW, RR, RW, E, R>(f: (a: A) => Effect.Effect<A, E, R>): (self: Lens<A, ER, EW, RR, RW>) => Effect.Effect<A, ER | EW | E, RR | RW | R>
+    <A, ER, EW, RR, RW, E, R>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => Effect.Effect<A, E, R>): Effect.Effect<A, ER | EW | E, RR | RW | R>
+} = Function.dual(2, <A, ER, EW, RR, RW, E, R>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => Effect.Effect<A, E, R>) =>
+    self.modify<A, E, R>(a => Effect.flatMap(
+        f(a),
+        next => Effect.succeed([a, next] as const)
+    )),
+)
+
+/**
+ * Sets the value of a `Lens` and returns the new value.
+ */
+export const setAndGet: {
+    <A, ER, EW, RR, RW>(value: A): (self: Lens<A, ER, EW, RR, RW>) => Effect.Effect<A, ER | EW, RR | RW>
+    <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, value: A): Effect.Effect<A, ER | EW, RR | RW>
+} = Function.dual(2, <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, value: A) =>
+    self.modify<A, never, never>(() => Effect.succeed([value, value] as const)),
+)
+
+/**
+ * Applies a synchronous update the value of a `Lens` and returns the new value.
+ */
+export const updateAndGet: {
+    <A, ER, EW, RR, RW>(f: (a: A) => A): (self: Lens<A, ER, EW, RR, RW>) => Effect.Effect<A, ER | EW, RR | RW>
+    <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => A): Effect.Effect<A, ER | EW, RR | RW>
+} = Function.dual(2, <A, ER, EW, RR, RW>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => A) =>
+    self.modify<A, never, never>(a => {
+        const next = f(a)
+        return Effect.succeed([next, next] as const)
+    }),
+)
+
+/**
+ * Applies an effectful update to the value of a `Lens` and returns the new value.
+ */
+export const updateAndGetEffect: {
+    <A, ER, EW, RR, RW, E, R>(f: (a: A) => Effect.Effect<A, E, R>): (self: Lens<A, ER, EW, RR, RW>) => Effect.Effect<A, ER | EW | E, RR | RW | R>
+    <A, ER, EW, RR, RW, E, R>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => Effect.Effect<A, E, R>): Effect.Effect<A, ER | EW | E, RR | RW | R>
+} = Function.dual(2, <A, ER, EW, RR, RW, E, R>(self: Lens<A, ER, EW, RR, RW>, f: (a: A) => Effect.Effect<A, E, R>) =>
+    self.modify<A, E, R>(a => Effect.flatMap(
+        f(a),
+        next => Effect.succeed([next, next] as const),
+    )),
+)
--- a/packages/effect-fc/src/Mutation.ts
+++ b/packages/effect-fc/src/Mutation.ts
@@ -99,10 +99,8 @@ extends Pipeable.Class() implements Mutation<K, A, E, R, P> {
    }
 }

-
 export const isMutation = (u: unknown): u is Mutation<readonly unknown[], unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, MutationTypeId)

-
 export declare namespace make {
    export interface Options<K extends Mutation.AnyKey = never, A = void, E = never, R = never, P = never> {
        readonly f: (key: K) => Effect.Effect<A, E, Result.forkEffect.InputContext<R, NoInfer<P>>>
@@ -113,12 +111,12 @@ export declare namespace make {
 export const make = Effect.fnUntraced(function* <const K extends Mutation.AnyKey = never, A = void, E = never, R = never, P = never>(
    options: make.Options<K, A, E, R, P>
 ): Effect.fn.Return<
-    Mutation<K, A, E, Result.forkEffect.OutputContext<R, P>, P>,
+    Mutation<K, A, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
    never,
-    Scope.Scope | Result.forkEffect.OutputContext<R, P>
+    Scope.Scope | Result.forkEffect.OutputContext<A, E, R, P>
 > {
    return new MutationImpl(
-        yield* Effect.context<Scope.Scope | Result.forkEffect.OutputContext<R, P>>(),
+        yield* Effect.context<Scope.Scope | Result.forkEffect.OutputContext<A, E, R, P>>(),
        options.f as any,
        options.initialProgress as P,

--- a/packages/effect-fc/src/PropertyPath.test.ts
+++ b/packages/effect-fc/src/PropertyPath.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, test } from "bun:test"
+import { Option } from "effect"
+import * as PropertyPath from "./PropertyPath.js"
+
+
+describe("immutableSet with arrays", () => {
+    test("sets a top-level array element", () => {
+        const arr = [1, 2, 3]
+        const result = PropertyPath.immutableSet(arr, [1], 99)
+        expect(result).toEqual(Option.some([1, 99, 3]))
+    })
+
+    test("does not mutate the original array", () => {
+        const arr = [1, 2, 3]
+        PropertyPath.immutableSet(arr, [0], 42)
+        expect(arr).toEqual([1, 2, 3])
+    })
+
+    test("sets the first element of an array", () => {
+        const arr = ["a", "b", "c"]
+        const result = PropertyPath.immutableSet(arr, [0], "z")
+        expect(result).toEqual(Option.some(["z", "b", "c"]))
+    })
+
+    test("sets the last element of an array", () => {
+        const arr = [10, 20, 30]
+        const result = PropertyPath.immutableSet(arr, [2], 99)
+        expect(result).toEqual(Option.some([10, 20, 99]))
+    })
+
+    test("sets a nested array element inside an object", () => {
+        const obj = { tags: ["foo", "bar", "baz"] }
+        const result = PropertyPath.immutableSet(obj, ["tags", 1], "qux")
+        expect(result).toEqual(Option.some({ tags: ["foo", "qux", "baz"] }))
+    })
+
+    test("sets a deeply nested value inside an array of objects", () => {
+        const obj = { items: [{ name: "alice" }, { name: "bob" }] }
+        const result = PropertyPath.immutableSet(obj, ["items", 0, "name"], "charlie")
+        expect(result).toEqual(Option.some({ items: [{ name: "charlie" }, { name: "bob" }] }))
+    })
+
+    test("sets a value in a nested array", () => {
+        const matrix = [[1, 2], [3, 4]]
+        const result = PropertyPath.immutableSet(matrix, [1, 0], 99)
+        expect(result).toEqual(Option.some([[1, 2], [99, 4]]))
+    })
+
+    test("returns Option.none() for an out-of-bounds index", () => {
+        const arr = [1, 2, 3]
+        const result = PropertyPath.immutableSet(arr, [5], 99)
+        expect(result).toEqual(Option.none())
+    })
+
+    test("returns Option.none() for a non-numeric key on an array", () => {
+        const arr = [1, 2, 3]
+        // @ts-expect-error intentionally wrong key type
+        const result = PropertyPath.immutableSet(arr, ["length"], 0)
+        expect(result).toEqual(Option.none())
+    })
+
+    test("empty path returns Option.some of the value itself", () => {
+        const arr = [1, 2, 3]
+        const result = PropertyPath.immutableSet(arr, [], [9, 9, 9] as any)
+        expect(result).toEqual(Option.some([9, 9, 9]))
+    })
+})
--- a/packages/effect-fc/src/PropertyPath.ts
+++ b/packages/effect-fc/src/PropertyPath.ts
@@ -0,0 +1,98 @@
+import { Array, Equivalence, Function, Option, Predicate } from "effect"
+
+
+export type PropertyPath = readonly PropertyKey[]
+
+type Prev = readonly [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+export type Paths<T, D extends number = 5, Seen = never> = readonly [] | (
+    D extends never ? readonly [] :
+    T extends Seen ? readonly [] :
+    T extends readonly any[] ? {
+        [K in keyof T as K extends number ? K : never]:
+            | readonly [K]
+            | readonly [K, ...Paths<T[K], Prev[D], Seen | T>]
+    } extends infer O
+        ? O[keyof O]
+        : never
+    :
+    T extends object ? {
+        [K in keyof T as K extends string | number | symbol ? K : never]-?:
+            NonNullable<T[K]> extends infer V
+                ? readonly [K] | readonly [K, ...Paths<V, Prev[D], Seen>]
+                : never
+    } extends infer O
+        ? O[keyof O]
+        : never
+    :
+    never
+)
+
+export type ValueFromPath<T, P extends readonly any[]> = P extends readonly [infer Head, ...infer Tail]
+    ? Head extends keyof T
+        ? ValueFromPath<T[Head], Tail>
+        : T extends readonly any[]
+            ? Head extends number
+                ? ValueFromPath<T[number], Tail>
+                : never
+            : never
+    : T
+
+
+export const equivalence: Equivalence.Equivalence<PropertyPath> = Equivalence.array(Equivalence.strict())
+
+export const unsafeGet: {
+    <T, const P extends Paths<T>>(path: P): (self: T) => ValueFromPath<T, P>
+    <T, const P extends Paths<T>>(self: T, path: P): ValueFromPath<T, P>
+} = Function.dual(2, <T, const P extends Paths<T>>(self: T, path: P): ValueFromPath<T, P> =>
+    path.reduce((acc: any, key: any) => acc?.[key], self)
+)
+
+export const get: {
+    <T, const P extends Paths<T>>(path: P): (self: T) => Option.Option<ValueFromPath<T, P>>
+    <T, const P extends Paths<T>>(self: T, path: P): Option.Option<ValueFromPath<T, P>>
+} = Function.dual(2, <T, const P extends Paths<T>>(self: T, path: P): Option.Option<ValueFromPath<T, P>> =>
+    path.reduce(
+        (acc: Option.Option<any>, key: any): Option.Option<any> => Option.isSome(acc)
+            ? Predicate.hasProperty(acc.value, key)
+                ? Option.some(acc.value[key])
+                : Option.none()
+            : acc,
+
+        Option.some(self),
+    )
+)
+
+export const immutableSet: {
+    <T, const P extends Paths<T>>(path: P, value: ValueFromPath<T, P>): (self: T) => Option.Option<T>
+    <T, const P extends Paths<T>>(self: T, path: P, value: ValueFromPath<T, P>): Option.Option<T>
+} = Function.dual(3, <T, const P extends Paths<T>>(self: T, path: P, value: ValueFromPath<T, P>): Option.Option<T> => {
+    const key = Array.head(path as PropertyPath)
+    if (Option.isNone(key))
+        return Option.some(value as T)
+    if (!Predicate.hasProperty(self, key.value))
+        return Option.none()
+
+    const child = immutableSet<any, any>(self[key.value], Option.getOrThrow(Array.tail(path as PropertyPath)), value)
+    if (Option.isNone(child))
+        return child
+
+    if (Array.isArray(self))
+        return typeof key.value === "number"
+            ? Option.some([
+                ...self.slice(0, key.value),
+                child.value,
+                ...self.slice(key.value + 1),
+            ] as T)
+            : Option.none()
+
+    if (typeof self === "object")
+        return Option.some(
+            Object.assign(
+                Object.create(Object.getPrototypeOf(self)),
+                { ...self, [key.value]: child.value },
+            )
+        )
+
+    return Option.none()
+})
--- a/packages/effect-fc/src/PubSub.ts
+++ b/packages/effect-fc/src/PubSub.ts
@@ -3,7 +3,7 @@ import type * as React from "react"
 import * as Component from "./Component.js"


-export const useFromReactiveValues = Effect.fnUntraced(function* <const A extends React.DependencyList>(
+export const usePubSubFromReactiveValues = Effect.fnUntraced(function* <const A extends React.DependencyList>(
    values: A
 ): Effect.fn.Return<PubSub.PubSub<A>, never, Scope.Scope> {
    const pubsub = yield* Component.useOnMount(() => Effect.acquireRelease(PubSub.unbounded<A>(), PubSub.shutdown))
--- a/packages/effect-fc/src/Query.ts
+++ b/packages/effect-fc/src/Query.ts
@@ -266,10 +266,8 @@ extends Pipeable.Class() implements Query<K, A, KE, KR, E, R, P> {
    }
 }

-
 export const isQuery = (u: unknown): u is Query<readonly unknown[], unknown> => Predicate.hasProperty(u, QueryTypeId)

-
 export declare namespace make {
    export interface Options<K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never> {
        readonly key: Stream.Stream<K, KE, KR>
@@ -283,14 +281,14 @@ export declare namespace make {
 export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never>(
    options: make.Options<K, A, KE, KR, E, R, P>
 ): Effect.fn.Return<
-    Query<K, A, KE, KR, E, Result.forkEffect.OutputContext<R, P>, P>,
+    Query<K, A, KE, KR, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
    never,
-    Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<R, P>
+    Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<A, E, R, P>
 > {
    const client = yield* QueryClient.QueryClient

-    return new QueryImpl<K, A, KE, KR, E, Result.forkEffect.OutputContext<R, P>, P>(
-        yield* Effect.context<Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<R, P>>(),
+    return new QueryImpl<K, A, KE, KR, E, Result.forkEffect.OutputContext<A, E, R, P>, P>(
+        yield* Effect.context<Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<A, E, R, P>>(),
        options.key,
        options.f as any,
        options.initialProgress as P,
@@ -310,9 +308,9 @@ export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, KE =
 export const service = <K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never>(
    options: make.Options<K, A, KE, KR, E, R, P>
 ): Effect.Effect<
-    Query<K, A, KE, KR, E, Result.forkEffect.OutputContext<R, P>, P>,
+    Query<K, A, KE, KR, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
    never,
-    Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<R, P>
+    Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<A, E, R, P>
 > => Effect.tap(
    make(options),
    query => Effect.forkScoped(query.run),
--- a/packages/effect-fc/src/Result.ts
+++ b/packages/effect-fc/src/Result.ts
@@ -1,5 +1,4 @@
-import { Cause, Context, Data, Effect, Equal, Exit, type Fiber, Hash, Layer, Match, Pipeable, Predicate, PubSub, pipe, Ref, type Scope, Stream, type Subscribable, SynchronizedRef } from "effect"
-import { Lens } from "effect-lens"
+import { Cause, Context, Data, Effect, Equal, Exit, type Fiber, Hash, Layer, Match, Pipeable, Predicate, PubSub, pipe, Ref, type Scope, Stream, Subscribable } from "effect"


 export const ResultTypeId: unique symbol = Symbol.for("@effect-fc/Result/Result")
@@ -16,6 +15,10 @@ export type Final<A, E = never, P = never> = (Success<A> | Failure<E>) & ({} | F
 export type Flags<P = never> = WillFetch | WillRefresh | Refreshing<P>

 export declare namespace Result {
+    export interface Prototype extends Pipeable.Pipeable, Equal.Equal {
+        readonly [ResultTypeId]: ResultTypeId
+    }
+
    export type Success<R extends Result<any, any, any>> = [R] extends [Result<infer A, infer _E, infer _P>] ? A : never
    export type Failure<R extends Result<any, any, any>> = [R] extends [Result<infer _A, infer E, infer _P>] ? E : never
    export type Progress<R extends Result<any, any, any>> = [R] extends [Result<infer _A, infer _E, infer P>] ? P : never
@@ -25,21 +28,21 @@ export declare namespace Flags {
    export type Keys = keyof WillFetch & WillRefresh & Refreshing<any>
 }

-export interface Initial extends ResultPrototype {
+export interface Initial extends Result.Prototype {
    readonly _tag: "Initial"
 }

-export interface Running<P = never> extends ResultPrototype {
+export interface Running<P = never> extends Result.Prototype {
    readonly _tag: "Running"
    readonly progress: P
 }

-export interface Success<A> extends ResultPrototype {
+export interface Success<A> extends Result.Prototype {
    readonly _tag: "Success"
    readonly value: A
 }

-export interface Failure<E = never> extends ResultPrototype {
+export interface Failure<E = never> extends Result.Prototype {
    readonly _tag: "Failure"
    readonly cause: Cause.Cause<E>
 }
@@ -58,11 +61,7 @@ export interface Refreshing<P = never> {
 }


-export interface ResultPrototype extends Pipeable.Pipeable, Equal.Equal {
-    readonly [ResultTypeId]: ResultTypeId
-}
-
-export const ResultPrototype: ResultPrototype = Object.freeze({
+const ResultPrototype = Object.freeze({
    ...Pipeable.Prototype,
    [ResultTypeId]: ResultTypeId,

@@ -96,7 +95,7 @@ export const ResultPrototype: ResultPrototype = Object.freeze({
            Hash.cached(this),
        )
    },
-} as const)
+} as const satisfies Result.Prototype)


 export const isResult = (u: unknown): u is Result<unknown, unknown, unknown> => Predicate.hasProperty(u, ResultTypeId)
@@ -163,40 +162,52 @@ export const toExit: {
 }


-export interface Progress<P = never> {
-    readonly progress: Lens.Lens<P, PreviousResultNotRunningNorRefreshing, never, never, never>
+export interface State<A, E = never, P = never> {
+    readonly get: Effect.Effect<Result<A, E, P>>
+    readonly set: (v: Result<A, E, P>) => Effect.Effect<void>
+}
+
+export const State = <A, E = never, P = never>(): Context.Tag<State<A, E, P>, State<A, E, P>> => Context.GenericTag("@effect-fc/Result/State")
+
+export interface Progress<P = never> {
+    readonly update: <E, R>(
+        f: (previous: P) => Effect.Effect<P, E, R>
+    ) => Effect.Effect<void, PreviousResultNotRunningNorRefreshing | E, R>
 }
-export const Progress = <P = never>(): Context.Tag<Progress<P>, Progress<P>> => Context.GenericTag("@effect-fc/Result/Progress")

 export class PreviousResultNotRunningNorRefreshing extends Data.TaggedError("@effect-fc/Result/PreviousResultNotRunningNorRefreshing")<{
    readonly previous: Result<unknown, unknown, unknown>
 }> {}

-export const makeProgressLayer = <A, E, P = never>(
-    state: Lens.Lens<Result<A, E, P>, never, never, never, never>
-): Layer.Layer<Progress<P> | Progress<never>, never, never> => Layer.succeed(
-    Progress<P>() as Context.Tag<Progress<P> | Progress<never>, Progress<P> | Progress<never>>,
-    {
-        progress: state.pipe(
-            Lens.mapEffect(
-                a => (isRunning(a) || hasRefreshingFlag(a))
-                    ? Effect.succeed(a)
-                    : Effect.fail(new PreviousResultNotRunningNorRefreshing({ previous: a })),
-                (_, b) => Effect.succeed(b),
+export const Progress = <P = never>(): Context.Tag<Progress<P>, Progress<P>> => Context.GenericTag("@effect-fc/Result/Progress")
+
+export const makeProgressLayer = <A, E, P = never>(): Layer.Layer<
+    Progress<P>,
+    never,
+    State<A, E, P>
+> => Layer.effect(Progress<P>(), Effect.gen(function*() {
+    const state = yield* State<A, E, P>()
+
+    return {
+        update: <FE, FR>(f: (previous: P) => Effect.Effect<P, FE, FR>) => Effect.Do.pipe(
+            Effect.bind("previous", () => Effect.andThen(state.get, previous =>
+                (isRunning(previous) || hasRefreshingFlag(previous))
+                    ? Effect.succeed(previous)
+                    : Effect.fail(new PreviousResultNotRunningNorRefreshing({ previous })),
+            )),
+            Effect.bind("progress", ({ previous }) => f(previous.progress)),
+            Effect.let("next", ({ previous, progress }) => isRunning(previous)
+                ? running(progress)
+                : refreshing(previous, progress) as Final<A, E, P> & Refreshing<P>
            ),
-            Lens.map(
-                a => a.progress,
-                (a, b) => isRunning(a)
-                    ? running(b)
-                    : refreshing(a, b) as Final<A, E, P> & Refreshing<P>,
-            ),
-        )
-    },
-)
+            Effect.andThen(({ next }) => state.set(next)),
+        ),
+    }
+}))


 export namespace unsafeForkEffect {
-    export type OutputContext<R, P> = Exclude<R, Progress<P> | Progress<never>>
+    export type OutputContext<A, E, R, P> = Exclude<R, State<A, E, P> | Progress<P> | Progress<never>>

    export interface Options<A, E, P> {
        readonly initial?: Initial | Final<A, E, P>
@@ -204,56 +215,55 @@ export namespace unsafeForkEffect {
    }
 }

-export const unsafeForkEffect = Effect.fnUntraced(function* <A, E, R, P = never>(
+export const unsafeForkEffect = <A, E, R, P = never>(
    effect: Effect.Effect<A, E, R>,
    options?: unsafeForkEffect.Options<NoInfer<A>, NoInfer<E>, P>,
-): Effect.fn.Return<
+): Effect.Effect<
    readonly [result: Subscribable.Subscribable<Result<A, E, P>, never, never>, fiber: Fiber.Fiber<A, E>],
    never,
-    Scope.Scope | unsafeForkEffect.OutputContext<R, P>
-> {
-    const ref = yield* SynchronizedRef.make<Result<A, E, P>>(options?.initial ?? initial<A, E, P>())
-    const pubsub = yield* PubSub.unbounded<Result<A, E, P>>()
-
-    const state = Lens.make<Result<A, E, P>, never, never, never, never>({
-        get get() { return Ref.get(ref) },
-        get changes() {
-            return Stream.unwrapScoped(Effect.map(
-                Effect.all([Ref.get(ref), Stream.fromPubSub(pubsub, { scoped: true })]),
-                ([latest, stream]) => Stream.concat(Stream.make(latest), stream),
-            ))
-        },
-        modify: f => Ref.get(ref).pipe(
-            Effect.flatMap(f),
-            Effect.flatMap(([b, a]) => Ref.set(ref, a).pipe(
-                Effect.as(b),
-                Effect.zipLeft(PubSub.publish(pubsub, a))
-            )),
-        ),
-    })
-
-    const fiber = yield* Effect.gen(function*() {
-        yield* Lens.set(
-            state,
+    Scope.Scope | unsafeForkEffect.OutputContext<A, E, R, P>
+> => Effect.Do.pipe(
+    Effect.bind("ref", () => Ref.make(options?.initial ?? initial<A, E, P>())),
+    Effect.bind("pubsub", () => PubSub.unbounded<Result<A, E, P>>()),
+    Effect.bind("fiber", ({ ref, pubsub }) => Effect.forkScoped(State<A, E, P>().pipe(
+        Effect.andThen(state => state.set(
            (isFinal(options?.initial) && hasWillRefreshFlag(options?.initial))
                ? refreshing(options.initial, options?.initialProgress) as Result<A, E, P>
-                : running(options?.initialProgress),
-        )
-        return yield* Effect.onExit(effect, exit => Effect.andThen(
-            Lens.set(state, fromExit(exit)),
-            Effect.forkScoped(PubSub.shutdown(pubsub)),
-        ))
-    }).pipe(
-        Effect.forkScoped,
-        Effect.provide(makeProgressLayer(state)),
-    )
-
-    return [state, fiber] as const
-})
+                : running(options?.initialProgress)
+        ).pipe(
+            Effect.andThen(effect),
+            Effect.onExit(exit => Effect.andThen(
+                state.set(fromExit(exit)),
+                Effect.forkScoped(PubSub.shutdown(pubsub)),
+            )),
+        )),
+        Effect.provide(Layer.empty.pipe(
+            Layer.provideMerge(makeProgressLayer<A, E, P>()),
+            Layer.provideMerge(Layer.succeed(State<A, E, P>(), {
+                get: Ref.get(ref),
+                set: v => Effect.andThen(Ref.set(ref, v), PubSub.publish(pubsub, v))
+            })),
+        )),
+    ))),
+    Effect.map(({ ref, pubsub, fiber }) => [
+        Subscribable.make({
+            get: Ref.get(ref),
+            changes: Stream.unwrapScoped(Effect.map(
+                Effect.all([Ref.get(ref), Stream.fromPubSub(pubsub, { scoped: true })]),
+                ([latest, stream]) => Stream.concat(Stream.make(latest), stream),
+            )),
+        }),
+        fiber,
+    ]),
+) as Effect.Effect<
+    readonly [result: Subscribable.Subscribable<Result<A, E, P>, never, never>, fiber: Fiber.Fiber<A, E>],
+    never,
+    Scope.Scope | unsafeForkEffect.OutputContext<A, E, R, P>
+>

 export namespace forkEffect {
    export type InputContext<R, P> = R extends Progress<infer X> ? [X] extends [P] ? R : never : R
-    export type OutputContext<R, P> = unsafeForkEffect.OutputContext<R, P>
+    export type OutputContext<A, E, R, P> = unsafeForkEffect.OutputContext<A, E, R, P>
    export interface Options<A, E, P> extends unsafeForkEffect.Options<A, E, P> {}
 }

@@ -264,6 +274,6 @@ export const forkEffect: {
    ): Effect.Effect<
        readonly [result: Subscribable.Subscribable<Result<A, E, P>, never, never>, fiber: Fiber.Fiber<A, E>],
        never,
-        Scope.Scope | forkEffect.OutputContext<R, P>
+        Scope.Scope | forkEffect.OutputContext<A, E, R, P>
    >
 } = unsafeForkEffect
--- a/packages/effect-fc/src/SetStateAction.ts
+++ b/packages/effect-fc/src/SetStateAction.ts
@@ -3,8 +3,8 @@ import type * as React from "react"


 export const value: {
-    <S>(self: React.SetStateAction<S>, prevState: S): S
    <S>(prevState: S): (self: React.SetStateAction<S>) => S
+    <S>(self: React.SetStateAction<S>, prevState: S): S
 } = Function.dual(2, <S>(self: React.SetStateAction<S>, prevState: S): S =>
    typeof self === "function"
        ? (self as (prevState: S) => S)(prevState)
--- a/packages/effect-fc/src/Stream.ts
+++ b/packages/effect-fc/src/Stream.ts
@@ -3,7 +3,7 @@ import * as React from "react"
 import * as Component from "./Component.js"


-export const use: {
+export const useStream: {
    <A, E, R>(
        stream: Stream.Stream<A, E, R>
    ): Effect.Effect<Option.Option<A>, never, R>
--- a/packages/effect-fc/src/SubmittableForm.ts
+++ b/packages/effect-fc/src/SubmittableForm.ts
@@ -1,196 +0,0 @@
-import { Array, Cause, Chunk, type Context, Effect, Exit, Fiber, identity, Option, ParseResult, Pipeable, Predicate, Schema, type Scope, Stream, SubscriptionRef } from "effect"
-import * as Form from "./Form.js"
-import * as Lens from "./Lens.js"
-import * as Mutation from "./Mutation.js"
-import * as Result from "./Result.js"
-import * as Subscribable from "./Subscribable.js"
-
-
-export const SubmittableFormTypeId: unique symbol = Symbol.for("@effect-fc/Form/SubmittableForm")
-export type SubmittableFormTypeId = typeof SubmittableFormTypeId
-
-export interface SubmittableForm<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
-extends Form.Form<readonly [], A, I, never, never> {
-    readonly [SubmittableFormTypeId]: SubmittableFormTypeId
-
-    readonly schema: Schema.Schema<A, I, R>
-    readonly context: Context.Context<Scope.Scope | R>
-    readonly mutation: Mutation.Mutation<
-        readonly [value: A, form: SubmittableForm<A, I, R, unknown, unknown, unknown>],
-        MA, ME, MR, MP
-    >
-    readonly validationFiber: Subscribable.Subscribable<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>, never, never>
-
-    readonly run: Effect.Effect<void>
-    readonly submit: Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>, Cause.NoSuchElementException>
-}
-
-export class SubmittableFormImpl<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
-extends Pipeable.Class() implements SubmittableForm<A, I, R, MA, ME, MR, MP> {
-    readonly [Form.FormTypeId]: Form.FormTypeId = Form.FormTypeId
-    readonly [SubmittableFormTypeId]: SubmittableFormTypeId = SubmittableFormTypeId
-
-    readonly path = [] as const
-
-    constructor(
-        readonly schema: Schema.Schema<A, I, R>,
-        readonly context: Context.Context<Scope.Scope | R>,
-        readonly mutation: Mutation.Mutation<
-            readonly [value: A, form: SubmittableForm<A, I, R, unknown, unknown, unknown>],
-            MA, ME, MR, MP
-        >,
-        readonly value: Lens.Lens<Option.Option<A>, never, never, never, never>,
-        readonly encodedValue: Lens.Lens<I, never, never, never, never>,
-        readonly issues: Lens.Lens<readonly ParseResult.ArrayFormatterIssue[], never, never, never, never>,
-        readonly validationFiber: Lens.Lens<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>, never, never, never, never>,
-        readonly isValidating: Subscribable.Subscribable<boolean, never, never>,
-
-        readonly canCommit: Subscribable.Subscribable<boolean, never, never>,
-        readonly isCommitting: Subscribable.Subscribable<boolean, never, never>,
-
-        readonly runSemaphore: Effect.Semaphore,
-    ) {
-        super()
-    }
-
-    get run(): Effect.Effect<void> {
-        return this.runSemaphore.withPermits(1)(Effect.provide(
-            Stream.runForEach(
-                this.encodedValue.changes,
-
-                encodedValue => Lens.get(this.validationFiber).pipe(
-                    Effect.andThen(Option.match({
-                        onSome: Fiber.interrupt,
-                        onNone: () => Effect.void,
-                    })),
-                    Effect.andThen(
-                        Effect.forkScoped(Effect.onExit(
-                            Schema.decode(this.schema, { errors: "all" })(encodedValue),
-                            exit => Effect.andThen(
-                                Exit.matchEffect(exit, {
-                                    onSuccess: v => Effect.andThen(
-                                        Lens.set(this.value, Option.some(v)),
-                                        Lens.set(this.issues, Array.empty()),
-                                    ),
-                                    onFailure: c => Option.match(Chunk.findFirst(Cause.failures(c), e => e._tag === "ParseError"), {
-                                        onSome: e => Effect.flatMap(
-                                            ParseResult.ArrayFormatter.formatError(e),
-                                            v => Lens.set(this.issues, v),
-                                        ),
-                                        onNone: () => Effect.void,
-                                    }),
-                                }),
-                                Lens.set(this.validationFiber, Option.none()),
-                            ),
-                        ))
-                    ),
-                    Effect.tap(fiber => Lens.set(this.validationFiber, Option.some(fiber))),
-                    Effect.andThen(Fiber.join),
-                    Effect.ignore,
-                ),
-            ),
-
-            this.context,
-        ))
-    }
-
-    get submit(): Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>, Cause.NoSuchElementException> {
-        return Lens.get(this.value).pipe(
-            Effect.andThen(identity),
-            Effect.andThen(value => this.submitValue(value)),
-        )
-    }
-
-    submitValue(value: A): Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>> {
-        return Effect.whenEffect(
-            Effect.tap(
-                this.mutation.mutate([value, this as any]),
-                result => Result.isFailure(result)
-                    ? Option.match(
-                        Chunk.findFirst(
-                            Cause.failures(result.cause as Cause.Cause<ParseResult.ParseError>),
-                            e => e._tag === "ParseError",
-                        ),
-                        {
-                            onSome: e => Effect.flatMap(
-                                ParseResult.ArrayFormatter.formatError(e),
-                                v => Lens.set(this.issues, v),
-                            ),
-                            onNone: () => Effect.void,
-                        },
-                    )
-                    : Effect.void
-            ),
-            this.canCommit.get,
-        )
-    }
-}
-
-
-export const isSubmittableForm = (u: unknown): u is SubmittableForm<unknown, unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, SubmittableFormTypeId)
-
-
-export declare namespace make {
-    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
-    extends Mutation.make.Options<
-        readonly [value: NoInfer<A>, form: SubmittableForm<NoInfer<A>, NoInfer<I>, NoInfer<R>, unknown, unknown, unknown>],
-        MA, ME, MR, MP
-    > {
-        readonly schema: Schema.Schema<A, I, R>
-        readonly initialEncodedValue: NoInfer<I>
-    }
-}
-
-export const make = Effect.fnUntraced(function* <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
-    options: make.Options<A, I, R, MA, ME, MR, MP>
-): Effect.fn.Return<
-    SubmittableForm<A, I, R, MA, ME, Result.forkEffect.OutputContext<MR, MP>, MP>,
-    never,
-    Scope.Scope | R | Result.forkEffect.OutputContext<MR, MP>
-> {
-    const mutation = yield* Mutation.make(options)
-    const valueLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<A>()))
-    const issuesLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make<readonly ParseResult.ArrayFormatterIssue[]>(Array.empty()))
-    const validationFiberLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, ParseResult.ParseError>>()))
-
-    return new SubmittableFormImpl(
-        options.schema,
-        yield* Effect.context<Scope.Scope | R>(),
-        mutation,
-
-        valueLens,
-        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(options.initialEncodedValue)),
-        issuesLens,
-        validationFiberLens,
-        Subscribable.map(validationFiberLens, Option.isSome),
-
-        Subscribable.map(
-            Subscribable.zipLatestAll(valueLens, issuesLens, validationFiberLens, mutation.result),
-            ([value, issues, validationFiber, result]) => (
-                Option.isSome(value) &&
-                Array.isEmptyReadonlyArray(issues) &&
-                Option.isNone(validationFiber) &&
-                !(Result.isRunning(result) || Result.hasRefreshingFlag(result))
-            ),
-        ),
-        Subscribable.map(mutation.result, result => Result.isRunning(result) || Result.hasRefreshingFlag(result)),
-
-        yield* Effect.makeSemaphore(1),
-    )
-})
-
-export declare namespace service {
-    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
-    extends make.Options<A, I, R, MA, ME, MR, MP> {}
-}
-
-export const service = <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
-    options: service.Options<A, I, R, MA, ME, MR, MP>
-): Effect.Effect<
-    SubmittableForm<A, I, R, MA, ME, Result.forkEffect.OutputContext<MR, MP>, MP>,
-    never,
-    Scope.Scope | R | Result.forkEffect.OutputContext<MR, MP>
-> => Effect.tap(
-    make(options),
-    form => Effect.forkScoped(form.run),
-)
--- a/packages/effect-fc/src/Subscribable.ts
+++ b/packages/effect-fc/src/Subscribable.ts
@@ -1,11 +1,8 @@
-import { Effect, Equivalence, Stream } from "effect"
-import { Subscribable } from "effect-lens"
+import { Effect, Equivalence, Stream, Subscribable } from "effect"
 import * as React from "react"
 import * as Component from "./Component.js"


-export * from "effect-lens/Subscribable"
-
 export const zipLatestAll = <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
    ...elements: T
 ): Subscribable.Subscribable<
@@ -19,7 +16,7 @@ export const zipLatestAll = <const T extends readonly Subscribable.Subscribable<
    changes: Stream.zipLatestAll(...elements.map(v => v.changes)),
 }) as any

-export declare namespace useAll {
+export declare namespace useSubscribables {
    export type Success<T extends readonly Subscribable.Subscribable<any, any, any>[]> = [T[number]] extends [never]
        ? never
        : { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never }
@@ -29,11 +26,11 @@ export declare namespace useAll {
    }
 }

-export const useAll = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
+export const useSubscribables = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
    elements: T,
-    options?: useAll.Options<useAll.Success<NoInfer<T>>>,
+    options?: useSubscribables.Options<useSubscribables.Success<NoInfer<T>>>,
 ): Effect.fn.Return<
-    useAll.Success<T>,
+    useSubscribables.Success<T>,
    [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
 > {
@@ -51,3 +48,5 @@ export const useAll = Effect.fnUntraced(function* <const T extends readonly Subs

    return reactStateValue as any
 })
+
+export * from "effect/Subscribable"
--- a/packages/effect-fc/src/SubscriptionRef.ts
+++ b/packages/effect-fc/src/SubscriptionRef.ts
@@ -0,0 +1,61 @@
+import { Effect, Equivalence, Ref, Stream, SubscriptionRef } from "effect"
+import * as React from "react"
+import * as Component from "./Component.js"
+import * as SetStateAction from "./SetStateAction.js"
+
+
+export declare namespace useSubscriptionRefState {
+    export interface Options<A> {
+        readonly equivalence?: Equivalence.Equivalence<A>
+    }
+}
+
+export const useSubscriptionRefState = Effect.fnUntraced(function* <A>(
+    ref: SubscriptionRef.SubscriptionRef<A>,
+    options?: useSubscriptionRefState.Options<NoInfer<A>>,
+): Effect.fn.Return<readonly [A, React.Dispatch<React.SetStateAction<A>>]> {
+    const [reactStateValue, setReactStateValue] = React.useState(yield* Component.useOnMount(() => ref))
+
+    yield* Component.useReactEffect(() => Effect.forkScoped(
+        Stream.runForEach(
+            Stream.changesWith(ref.changes, options?.equivalence ?? Equivalence.strict()),
+            v => Effect.sync(() => setReactStateValue(v)),
+        )
+    ), [ref])
+
+    const setValue = yield* Component.useCallbackSync(
+        (setStateAction: React.SetStateAction<A>) => Effect.andThen(
+            Ref.updateAndGet(ref, prevState => SetStateAction.value(setStateAction, prevState)),
+            v => setReactStateValue(v),
+        ),
+        [ref],
+    )
+
+    return [reactStateValue, setValue]
+})
+
+export declare namespace useSubscriptionRefFromState {
+    export interface Options<A> {
+        readonly equivalence?: Equivalence.Equivalence<A>
+    }
+}
+
+export const useSubscriptionRefFromState = Effect.fnUntraced(function* <A>(
+    [value, setValue]: readonly [A, React.Dispatch<React.SetStateAction<A>>],
+    options?: useSubscriptionRefFromState.Options<NoInfer<A>>,
+): Effect.fn.Return<SubscriptionRef.SubscriptionRef<A>> {
+    const ref = yield* Component.useOnChange(() => Effect.tap(
+        SubscriptionRef.make(value),
+        ref => Effect.forkScoped(
+            Stream.runForEach(
+                Stream.changesWith(ref.changes, options?.equivalence ?? Equivalence.strict()),
+                v => Effect.sync(() => setValue(v)),
+            )
+        ),
+    ), [setValue])
+
+    yield* Component.useReactEffect(() => Ref.set(ref, value), [value])
+    return ref
+})
+
+export * from "effect/SubscriptionRef"
--- a/packages/effect-fc/src/SubscriptionSubRef.test.ts
+++ b/packages/effect-fc/src/SubscriptionSubRef.test.ts
@@ -0,0 +1,183 @@
+import { describe, expect, test } from "bun:test"
+import { Chunk, Effect, Ref, SubscriptionRef } from "effect"
+import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
+
+
+describe("SubscriptionSubRef with array refs", () => {
+    test("creates a subref for a single array element using path", async () => {
+        const value = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([{ name: "alice" }, { name: "bob" }, { name: "charlie" }]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [1, "name"])
+                    return subref.get
+                },
+            ),
+        )
+
+        expect(value).toBe("bob")
+    })
+
+    test("modifies a single array element via subref", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([{ name: "alice" }, { name: "bob" }, { name: "charlie" }]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [1, "name"])
+                    return Effect.flatMap(
+                        Ref.set(subref, "bob-updated"),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(result).toEqual([{ name: "alice" }, { name: "bob-updated" }, { name: "charlie" }])
+    })
+
+    test("modifies array element at index 0", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([10, 20, 30]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [0])
+                    return Effect.flatMap(
+                        Ref.set(subref, 99),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(result).toEqual([99, 20, 30])
+    })
+
+    test("modifies array element at last index", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make(["a", "b", "c"]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [2])
+                    return Effect.flatMap(
+                        Ref.set(subref, "z"),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(result).toEqual(["a", "b", "z"])
+    })
+
+    test("modifies nested array element", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([[1, 2], [3, 4], [5, 6]]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [1, 0])
+                    return Effect.flatMap(
+                        Ref.set(subref, 99),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(result).toEqual([[1, 2], [99, 4], [5, 6]])
+    })
+
+    test("uses modifyEffect to transform array element", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([{ count: 1 }, { count: 2 }, { count: 3 }]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [1, "count"])
+                    return Effect.flatMap(
+                        Ref.update(subref, count => count + 100),
+                        () => Effect.map(Ref.get(parent), parentValue => ({ result: 102, parentValue })),
+                    )
+                },
+            ),
+        )
+
+        expect(result.result).toBe(102) // count + 100
+        expect(result.parentValue).toEqual([{ count: 1 }, { count: 102 }, { count: 3 }]) // count + 100
+    })
+
+    test("uses modify to transform array element", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([10, 20, 30]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [1])
+                    return Effect.flatMap(
+                        Ref.update(subref, x => x + 5),
+                        () => Effect.map(Ref.get(parent), parentValue => ({ result: 25, parentValue })),
+                    )
+                },
+            ),
+        )
+
+        expect(result.result).toBe(25) // 20 + 5
+        expect(result.parentValue).toEqual([10, 25, 30]) // 20 + 5
+    })
+
+    test("makeFromChunkIndex modifies chunk element", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make(Chunk.make(100, 200, 300)),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromChunkIndex(parent, 1)
+                    return Effect.flatMap(
+                        Ref.set(subref, 999),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(Chunk.toReadonlyArray(result)).toEqual([100, 999, 300])
+    })
+
+    test("makeFromGetSet with custom getter/setter for array element", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([{ id: 1, value: "a" }, { id: 2, value: "b" }]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromGetSet(parent, {
+                        get: arr => arr[0].value,
+                        set: (arr, newValue) => [
+                            { ...arr[0], value: newValue },
+                            ...arr.slice(1),
+                        ],
+                    })
+                    return Effect.flatMap(
+                        Ref.set(subref, "updated"),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(result).toEqual([{ id: 1, value: "updated" }, { id: 2, value: "b" }])
+    })
+
+    test("does not mutate original array when modifying via subref", async () => {
+        const original = [{ name: "alice" }, { name: "bob" }]
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make(original),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [0, "name"])
+                    return Effect.flatMap(
+                        Ref.set(subref, "alice-updated"),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(original).toEqual([{ name: "alice" }, { name: "bob" }]) // original unchanged
+        expect(result).toEqual([{ name: "alice-updated" }, { name: "bob" }]) // new value in ref
+    })
+})
--- a/packages/effect-fc/src/SubscriptionSubRef.ts
+++ b/packages/effect-fc/src/SubscriptionSubRef.ts
@@ -0,0 +1,186 @@
+import { Chunk, Effect, Effectable, Option, Predicate, Readable, Ref, Stream, Subscribable, SubscriptionRef, SynchronizedRef, type Types, type Unify } from "effect"
+import * as PropertyPath from "./PropertyPath.js"
+
+
+export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("@effect-fc/SubscriptionSubRef/SubscriptionSubRef")
+export type SubscriptionSubRefTypeId = typeof SubscriptionSubRefTypeId
+
+export interface SubscriptionSubRef<in out A, in out B extends SubscriptionRef.SubscriptionRef<any>>
+extends SubscriptionSubRef.Variance<A, B>, SubscriptionRef.SubscriptionRef<A> {
+    readonly parent: B
+
+    readonly [Unify.typeSymbol]?: unknown
+    readonly [Unify.unifySymbol]?: SubscriptionSubRefUnify<this>
+    readonly [Unify.ignoreSymbol]?: SubscriptionSubRefUnifyIgnore
+}
+
+export declare namespace SubscriptionSubRef {
+    export interface Variance<in out A, in out B> {
+        readonly [SubscriptionSubRefTypeId]: {
+            readonly _A: Types.Invariant<A>
+            readonly _B: Types.Invariant<B>
+        }
+    }
+}
+
+export interface SubscriptionSubRefUnify<A extends { [Unify.typeSymbol]?: any }> extends SubscriptionRef.SubscriptionRefUnify<A> {
+    SubscriptionSubRef?: () => Extract<A[Unify.typeSymbol], SubscriptionSubRef<any, any>>
+}
+
+export interface SubscriptionSubRefUnifyIgnore extends SubscriptionRef.SubscriptionRefUnifyIgnore {
+    SubscriptionRef?: true
+}
+
+
+const refVariance = { _A: (_: any) => _ }
+const synchronizedRefVariance = { _A: (_: any) => _ }
+const subscriptionRefVariance = { _A: (_: any) => _ }
+const subscriptionSubRefVariance = { _A: (_: any) => _, _B: (_: any) => _ }
+
+class SubscriptionSubRefImpl<in out A, in out B extends SubscriptionRef.SubscriptionRef<any>>
+extends Effectable.Class<A> implements SubscriptionSubRef<A, B> {
+    readonly [Readable.TypeId]: Readable.TypeId = Readable.TypeId
+    readonly [Subscribable.TypeId]: Subscribable.TypeId = Subscribable.TypeId
+    readonly [Ref.RefTypeId] = refVariance
+    readonly [SynchronizedRef.SynchronizedRefTypeId] = synchronizedRefVariance
+    readonly [SubscriptionRef.SubscriptionRefTypeId] = subscriptionRefVariance
+    readonly [SubscriptionSubRefTypeId] = subscriptionSubRefVariance
+
+    readonly get: Effect.Effect<A>
+
+    constructor(
+        readonly parent: B,
+        readonly getter: (parentValue: Effect.Effect.Success<B>) => A,
+        readonly setter: (parentValue: Effect.Effect.Success<B>, value: A) => Effect.Effect.Success<B>,
+    ) {
+        super()
+        this.get = Effect.map(this.parent, this.getter)
+    }
+
+    commit() {
+        return this.get
+    }
+
+    get changes(): Stream.Stream<A> {
+        return Stream.unwrap(
+            Effect.map(this.get, a => Stream.concat(
+                Stream.make(a),
+                Stream.map(this.parent.changes, this.getter),
+            ))
+        )
+    }
+
+    modify<C>(f: (a: A) => readonly [C, A]): Effect.Effect<C> {
+        return this.modifyEffect(a => Effect.succeed(f(a)))
+    }
+
+    modifyEffect<C, E, R>(f: (a: A) => Effect.Effect<readonly [C, A], E, R>): Effect.Effect<C, E, R> {
+        return Effect.Do.pipe(
+            Effect.bind("b", (): Effect.Effect<Effect.Effect.Success<B>> => this.parent),
+            Effect.bind("ca", ({ b }) => f(this.getter(b))),
+            Effect.tap(({ b, ca: [, a] }) => SubscriptionRef.set(this.parent, this.setter(b, a))),
+            Effect.map(({ ca: [c] }) => c),
+        )
+    }
+}
+
+
+export const isSubscriptionSubRef = (u: unknown): u is SubscriptionSubRef<unknown, SubscriptionRef.SubscriptionRef<unknown>> => Predicate.hasProperty(u, SubscriptionSubRefTypeId)
+
+export const makeFromGetSet = <A, B extends SubscriptionRef.SubscriptionRef<any>>(
+    parent: B,
+    options: {
+        readonly get: (parentValue: Effect.Effect.Success<B>) => A
+        readonly set: (parentValue: Effect.Effect.Success<B>, value: A) => Effect.Effect.Success<B>
+    },
+): SubscriptionSubRef<A, B> => new SubscriptionSubRefImpl(parent, options.get, options.set)
+
+export const makeFromPath = <
+    B extends SubscriptionRef.SubscriptionRef<any>,
+    const P extends PropertyPath.Paths<Effect.Effect.Success<B>>,
+>(
+    parent: B,
+    path: P,
+): SubscriptionSubRef<PropertyPath.ValueFromPath<Effect.Effect.Success<B>, P>, B> => new SubscriptionSubRefImpl(
+    parent,
+    parentValue => Option.getOrThrow(PropertyPath.get(parentValue, path)),
+    (parentValue, value) => Option.getOrThrow(PropertyPath.immutableSet(parentValue, path, value)),
+)
+
+export const makeFromChunkIndex: {
+    <B extends SubscriptionRef.SubscriptionRef<Chunk.NonEmptyChunk<any>>>(
+        parent: B,
+        index: number,
+    ): SubscriptionSubRef<
+        Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never,
+        B
+    >
+    <B extends SubscriptionRef.SubscriptionRef<Chunk.Chunk<any>>>(
+        parent: B,
+        index: number,
+    ): SubscriptionSubRef<
+        Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never,
+        B
+    >
+} = (
+    parent: SubscriptionRef.SubscriptionRef<Chunk.Chunk<any>>,
+    index: number,
+) => new SubscriptionSubRefImpl(
+    parent,
+    parentValue => Chunk.unsafeGet(parentValue, index),
+    (parentValue, value) => Chunk.replace(parentValue, index, value),
+) as any
+
+export const makeFromChunkFindFirst: {
+    <B extends SubscriptionRef.SubscriptionRef<Chunk.NonEmptyChunk<any>>>(
+        parent: B,
+        findFirstPredicate: Predicate.Predicate<Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never>,
+    ): SubscriptionSubRef<
+        Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never,
+        B
+    >
+    <B extends SubscriptionRef.SubscriptionRef<Chunk.Chunk<any>>>(
+        parent: B,
+        findFirstPredicate: Predicate.Predicate<Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never>,
+    ): SubscriptionSubRef<
+        Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never,
+        B
+    >
+} = (
+    parent: SubscriptionRef.SubscriptionRef<Chunk.Chunk<never>>,
+    findFirstPredicate: Predicate.Predicate.Any,
+) => new SubscriptionSubRefImpl(
+    parent,
+    parentValue => Option.getOrThrow(Chunk.findFirst(parentValue, findFirstPredicate)),
+    (parentValue, value) => Option.getOrThrow(Option.andThen(
+        Chunk.findFirstIndex(parentValue, findFirstPredicate),
+        index => Chunk.replace(parentValue, index, value),
+    )),
+) as any
+
+export const makeFromChunkFindLast: {
+    <B extends SubscriptionRef.SubscriptionRef<Chunk.NonEmptyChunk<any>>>(
+        parent: B,
+        findLastPredicate: Predicate.Predicate<Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never>,
+    ): SubscriptionSubRef<
+        Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never,
+        B
+    >
+    <B extends SubscriptionRef.SubscriptionRef<Chunk.Chunk<any>>>(
+        parent: B,
+        findLastPredicate: Predicate.Predicate<Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never>,
+    ): SubscriptionSubRef<
+        Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never,
+        B
+    >
+} = (
+    parent: SubscriptionRef.SubscriptionRef<Chunk.Chunk<never>>,
+    findLastPredicate: Predicate.Predicate.Any,
+) => new SubscriptionSubRefImpl(
+    parent,
+    parentValue => Option.getOrThrow(Chunk.findLast(parentValue, findLastPredicate)),
+    (parentValue, value) => Option.getOrThrow(Option.andThen(
+        Chunk.findLastIndex(parentValue, findLastPredicate),
+        index => Chunk.replace(parentValue, index, value),
+    )),
+) as any
--- a/packages/effect-fc/src/SynchronizedForm.ts
+++ b/packages/effect-fc/src/SynchronizedForm.ts
@@ -1,239 +0,0 @@
-import { Array, Cause, Chunk, type Context, Effect, Exit, Fiber, Option, ParseResult, Pipeable, Predicate, Schema, type Scope, SubscriptionRef } from "effect"
-import * as Form from "./Form.js"
-import * as Lens from "./Lens.js"
-import * as Subscribable from "./Subscribable.js"
-
-
-export const SynchronizedFormTypeId: unique symbol = Symbol.for("@effect-fc/Form/SynchronizedForm")
-export type SynchronizedFormTypeId = typeof SynchronizedFormTypeId
-
-export interface SynchronizedForm<
-    in out A,
-    in out I = A,
-    in out R = never,
-    in out TER = never,
-    in out TEW = never,
-    in out TRR = never,
-    in out TRW = never,
-> extends Form.Form<readonly [], A, I, never, never> {
-    readonly [SynchronizedFormTypeId]: SynchronizedFormTypeId
-
-    readonly schema: Schema.Schema<A, I, R>
-    readonly context: Context.Context<Scope.Scope | R | TRR | TRW>
-    readonly target: Lens.Lens<A, TER, TEW, TRR, TRW>
-    readonly validationFiber: Subscribable.Subscribable<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>, never, never>
-
-    readonly run: Effect.Effect<void, TER>
-}
-
-export class SynchronizedFormImpl<
-    in out A,
-    in out I = A,
-    in out R = never,
-    in out TER = never,
-    in out TEW = never,
-    in out TRR = never,
-    in out TRW = never,
-> extends Pipeable.Class() implements SynchronizedForm<A, I, R, TER, TEW, TRR, TRW> {
-    readonly [Form.FormTypeId]: Form.FormTypeId = Form.FormTypeId
-    readonly [SynchronizedFormTypeId]: SynchronizedFormTypeId = SynchronizedFormTypeId
-
-    readonly path = [] as const
-    readonly encodedValue: Lens.Lens<I, never, never, never, never>
-
-    constructor(
-        readonly schema: Schema.Schema<A, I, R>,
-        readonly context: Context.Context<Scope.Scope | R | TRR | TRW>,
-        readonly target: Lens.Lens<A, TER, TEW, TRR, TRW>,
-
-        readonly value: Lens.Lens<Option.Option<A>, never, never, never, never>,
-        readonly internalEncodedValue: Lens.Lens<I, never, never, never, never>,
-        readonly issues: Lens.Lens<readonly ParseResult.ArrayFormatterIssue[], never, never, never, never>,
-        readonly validationFiber: Lens.Lens<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>, never, never, never, never>,
-        readonly isValidating: Subscribable.Subscribable<boolean, never, never>,
-
-        readonly canCommit: Subscribable.Subscribable<boolean, never, never>,
-        readonly isCommitting: Lens.Lens<boolean, never, never>,
-
-        readonly runSemaphore: Effect.Semaphore,
-    ) {
-        super()
-        this.encodedValue = makeEncodedValueLens(this)
-    }
-
-    synchronizeEncodedValue(encodedValue: I): Effect.Effect<void, never, never> {
-        return Lens.get(this.validationFiber).pipe(
-            Effect.andThen(Option.match({
-                onSome: Fiber.interrupt,
-                onNone: () => Effect.void,
-            })),
-            Effect.andThen(
-                Effect.forkScoped(Effect.onExit(
-                    Schema.decode(this.schema, { errors: "all" })(encodedValue),
-                    exit => Effect.andThen(
-                        Exit.matchEffect(exit, {
-                            onSuccess: v => Effect.andThen(
-                                Lens.set(this.value, Option.some(v)),
-                                Lens.set(this.issues, Array.empty()),
-                            ),
-                            onFailure: c => Option.match(
-                                Chunk.findFirst(Cause.failures(c), e => e._tag === "ParseError"),
-                                {
-                                    onSome: e => Effect.flatMap(
-                                        ParseResult.ArrayFormatter.formatError(e),
-                                        v => Lens.set(this.issues, v),
-                                    ),
-                                    onNone: () => Effect.void,
-                                },
-                            ),
-                        }),
-                        Lens.set(this.validationFiber, Option.none()),
-                    ),
-                ))
-            ),
-            Effect.tap(fiber => Lens.set(this.validationFiber, Option.some(fiber))),
-            Effect.andThen(Fiber.join),
-            Effect.tap(value => Effect.onExit(
-                Effect.andThen(
-                    Lens.set(this.isCommitting, true),
-                    Lens.set(this.target, value),
-                ),
-                () => Lens.set(this.isCommitting, false),
-            )),
-
-            Effect.ignore,
-            Effect.provide(this.context),
-        )
-    }
-
-    get run(): Effect.Effect<void, TER> {
-        return Effect.void
-        // return this.runSemaphore.withPermits(1)(Effect.provide(
-        //     Effect.andThen(
-        //         Effect.flatMap(
-        //             Lens.get(this.internalEncodedValue),
-        //             encodedValue => this.synchronizeEncodedValue(encodedValue),
-        //         ),
-        //         Stream.runForEach(
-        //             Stream.drop(this.target.changes, 1),
-
-        //             targetValue => Schema.encode(this.schema, { errors: "all" })(targetValue).pipe(
-        //                 Effect.flatMap(encodedValue => Effect.andThen(
-        //                     Effect.whenEffect(
-        //                         Lens.set(this.internalEncodedValue, encodedValue),
-        //                         Effect.map(
-        //                             Lens.get(this.internalEncodedValue),
-        //                             currentEncodedValue => !Equal.equals(encodedValue, currentEncodedValue),
-        //                         ),
-        //                     ),
-        //                     Effect.andThen(
-        //                         Lens.set(this.value, Option.some(targetValue)),
-        //                         Lens.set(this.issues, Array.empty()),
-        //                     ),
-        //                 )),
-        //                 Effect.ignore,
-        //             ),
-        //         ),
-        //     ),
-
-        //     this.context,
-        // ))
-    }
-}
-
-const makeEncodedValueLens = <A, I, R, TER, TEW, TRR, TRW>(
-    self: SynchronizedFormImpl<A, I, R, TER, TEW, TRR, TRW>
-): Lens.Lens<I, never, never, never, never> => Lens.make({
-    get get() { return self.internalEncodedValue.get },
-    get changes() { return self.internalEncodedValue.changes },
-    modify: f => self.internalEncodedValue.modify(
-        encodedValue => Effect.map(
-            f(encodedValue),
-            ([b, nextEncodedValue]) => [
-                [b, nextEncodedValue] as const,
-                nextEncodedValue,
-            ] as const
-        )
-    ).pipe(
-        Effect.tap(([, nextEncodedValue]) =>
-            self.synchronizeEncodedValue(nextEncodedValue).pipe(
-                Effect.forkScoped,
-                Effect.provide(self.context),
-            )
-        ),
-        Effect.map(([b]) => b),
-    ),
-})
-
-
-export const isSynchronizedForm = (u: unknown): u is SynchronizedForm<unknown, unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, SynchronizedFormTypeId)
-
-
-export declare namespace make {
-    export interface Options<in out A, in out I = A, in out R = never, in out TER = never, in out TEW = never, in out TRR = never, in out TRW = never> {
-        readonly schema: Schema.Schema<A, I, R>
-        readonly target: Lens.Lens<A, TER, TEW, TRR, TRW>
-        readonly initialEncodedValue?: NoInfer<I>
-    }
-}
-
-export const make = Effect.fnUntraced(function* <A, I = A, R = never, TER = never, TEW = never, TRR = never, TRW = never>(
-    options: make.Options<A, I, R, TER, TEW, TRR, TRW>
-): Effect.fn.Return<
-    SynchronizedForm<A, I, R, TER, TEW, TRR, TRW>,
-    ParseResult.ParseError | TER,
-    Scope.Scope | R | TRR | TRW
-> {
-    const valueLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<A>()))
-    const issuesLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make<readonly ParseResult.ArrayFormatterIssue[]>(Array.empty()))
-    const validationFiberLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, ParseResult.ParseError>>()))
-    const isCommittingLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(false))
-
-    const initialEncodedValue = options.initialEncodedValue !== undefined
-        ? options.initialEncodedValue
-        : yield* Effect.flatMap(
-            Lens.get(options.target),
-            Schema.encode(options.schema, { errors: "all" }),
-        )
-
-    return new SynchronizedFormImpl(
-        options.schema,
-        yield* Effect.context<Scope.Scope | R | TRR | TRW>(),
-        options.target,
-
-        valueLens,
-        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(initialEncodedValue)),
-        issuesLens,
-        validationFiberLens,
-        Subscribable.map(validationFiberLens, Option.isSome),
-
-        Subscribable.map(
-            Subscribable.zipLatestAll(valueLens, issuesLens, validationFiberLens, isCommittingLens),
-            ([value, issues, validationFiber, isCommitting]) => (
-                Option.isSome(value) &&
-                Array.isEmptyReadonlyArray(issues) &&
-                Option.isNone(validationFiber) &&
-                !isCommitting
-            ),
-        ),
-        isCommittingLens,
-
-        yield* Effect.makeSemaphore(1),
-    )
-})
-
-export declare namespace service {
-    export interface Options<in out A, in out I = A, in out R = never, in out TER = never, in out TEW = never, in out TRR = never, in out TRW = never>
-    extends make.Options<A, I, R, TER, TEW, TRR, TRW> {}
-}
-
-export const service = <A, I = A, R = never, TER = never, TEW = never, TRR = never, TRW = never>(
-    options: service.Options<A, I, R, TER, TEW, TRR, TRW>
-): Effect.Effect<
-    SynchronizedForm<A, I, R, TER, TEW, TRR, TRW>,
-    ParseResult.ParseError | TER,
-    Scope.Scope | R | TRR | TRW
-> => Effect.tap(
-    make(options),
-    form => Effect.forkScoped(form.run),
-)
--- a/packages/effect-fc/src/index.ts
+++ b/packages/effect-fc/src/index.ts
@@ -5,6 +5,7 @@ export * as Form from "./Form.js"
 export * as Lens from "./Lens.js"
 export * as Memoized from "./Memoized.js"
 export * as Mutation from "./Mutation.js"
+export * as PropertyPath from "./PropertyPath.js"
 export * as PubSub from "./PubSub.js"
 export * as Query from "./Query.js"
 export * as QueryClient from "./QueryClient.js"
@@ -12,6 +13,6 @@ export * as ReactRuntime from "./ReactRuntime.js"
 export * as Result from "./Result.js"
 export * as SetStateAction from "./SetStateAction.js"
 export * as Stream from "./Stream.js"
-export * as SubmittableForm from "./SubmittableForm.js"
 export * as Subscribable from "./Subscribable.js"
-export * as SynchronizedForm from "./SynchronizedForm.js"
+export * as SubscriptionRef from "./SubscriptionRef.js"
+export * as SubscriptionSubRef from "./SubscriptionSubRef.js"
--- a/packages/effect-fc/tsconfig.json
+++ b/packages/effect-fc/tsconfig.json
@@ -25,7 +25,6 @@
    "noPropertyAccessFromIndexSignature": false,

    // Build
-    "rootDir": "./src",
    "outDir": "./dist",
    "declaration": true,
    "sourceMap": true,
--- a/packages/example/package.json
+++ b/packages/example/package.json
@@ -13,30 +13,30 @@
    "clean:modules": "rm -rf node_modules"
  },
  "devDependencies": {
-    "@tanstack/react-router": "^1.168.26",
-    "@tanstack/react-router-devtools": "^1.166.13",
-    "@tanstack/router-plugin": "^1.167.29",
-    "@types/react": "^19.2.14",
+    "@tanstack/react-router": "^1.154.12",
+    "@tanstack/react-router-devtools": "^1.154.12",
+    "@tanstack/router-plugin": "^1.154.12",
+    "@types/react": "^19.2.9",
    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "globals": "^17.5.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "type-fest": "^5.6.0",
-    "vite": "^8.0.10"
+    "@vitejs/plugin-react": "^5.1.2",
+    "globals": "^17.0.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "type-fest": "^5.4.1",
+    "vite": "^7.3.1"
  },
  "dependencies": {
-    "@effect/platform": "^0.96.1",
+    "@effect/platform": "^0.96.0",
    "@effect/platform-browser": "^0.76.0",
-    "@radix-ui/themes": "^3.3.0",
+    "@radix-ui/themes": "^3.2.1",
    "@typed/id": "^0.17.2",
-    "effect": "^3.21.2",
+    "effect": "^3.19.15",
    "effect-fc": "workspace:*",
-    "react-icons": "^5.6.0"
+    "react-icons": "^5.5.0"
  },
  "overrides": {
-    "@types/react": "^19.2.14",
-    "effect": "^3.21.2",
-    "react": "^19.2.5"
+    "@types/react": "^19.2.9",
+    "effect": "^3.19.15",
+    "react": "^19.2.3"
  }
 }
--- a/packages/example/src/lib/form/TextFieldFormInputView.tsx
+++ b/packages/example/src/lib/form/TextFieldFormInputView.tsx
@@ -1,22 +1,24 @@
 import { Callout, Flex, Spinner, TextField } from "@radix-ui/themes"
-import { Array, Option, Struct } from "effect"
+import { Array, Option } from "effect"
 import { Component, Form, Subscribable } from "effect-fc"


 export declare namespace TextFieldFormInputView {
-    export interface Props extends Omit<TextField.RootProps, "form">, Form.useInput.Options {
-        readonly form: Form.Form<readonly PropertyKey[], any, string>
+    export interface Props
+    extends TextField.RootProps, Form.useInput.Options {
+        readonly field: Form.FormField<any, string>
    }
 }

+
 export class TextFieldFormInputView extends Component.make("TextFieldFormInputView")(function*(
    props: TextFieldFormInputView.Props
 ) {
-    const input = yield* Form.useInput(props.form, props)
-    const [issues, isValidating, isCommitting] = yield* Subscribable.useAll([
-        props.form.issues,
-        props.form.isValidating,
-        props.form.isCommitting,
+    const input = yield* Form.useInput(props.field, props)
+    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables([
+        props.field.issues,
+        props.field.isValidating,
+        props.field.isSubmitting,
    ])

    return (
@@ -24,8 +26,8 @@ export class TextFieldFormInputView extends Component.make("TextFieldFormInputVi
            <TextField.Root
                value={input.value}
                onChange={e => input.setValue(e.target.value)}
-                disabled={isCommitting}
-                {...Struct.omit(props, "form")}
+                disabled={isSubmitting}
+                {...props}
            >
                {isValidating &&
                    <TextField.Slot side="right">
--- a/packages/example/src/lib/form/TextFieldOptionalFormInputView.tsx
+++ b/packages/example/src/lib/form/TextFieldOptionalFormInputView.tsx
@@ -4,19 +4,21 @@ import { Component, Form, Subscribable } from "effect-fc"


 export declare namespace TextFieldOptionalFormInputView {
-    export interface Props extends Omit<TextField.RootProps, "form" | "defaultValue">, Form.useOptionalInput.Options<string> {
-        readonly form: Form.Form<readonly PropertyKey[], any, Option.Option<string>>
+    export interface Props
+    extends Omit<TextField.RootProps, "defaultValue">, Form.useOptionalInput.Options<string> {
+        readonly field: Form.FormField<any, Option.Option<string>>
    }
 }

+
 export class TextFieldOptionalFormInputView extends Component.make("TextFieldOptionalFormInputView")(function*(
    props: TextFieldOptionalFormInputView.Props
 ) {
-    const input = yield* Form.useOptionalInput(props.form, props)
-    const [issues, isValidating, isCommitting] = yield* Subscribable.useAll([
-        props.form.issues,
-        props.form.isValidating,
-        props.form.isCommitting,
+    const input = yield* Form.useOptionalInput(props.field, props)
+    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables([
+        props.field.issues,
+        props.field.isValidating,
+        props.field.isSubmitting,
    ])

    return (
@@ -24,8 +26,8 @@ export class TextFieldOptionalFormInputView extends Component.make("TextFieldOpt
            <TextField.Root
                value={input.value}
                onChange={e => input.setValue(e.target.value)}
-                disabled={!input.enabled || isCommitting}
-                {...Struct.omit(props, "form", "defaultValue")}
+                disabled={!input.enabled || isSubmitting}
+                {...Struct.omit(props, "defaultValue")}
            >
                <TextField.Slot side="left">
                    <Switch
--- a/packages/example/src/routes/form.tsx
+++ b/packages/example/src/routes/form.tsx
@@ -1,7 +1,7 @@
 import { Button, Container, Flex, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Console, Effect, Match, Option, ParseResult, Schema } from "effect"
-import { Component, Form, SubmittableForm, Subscribable } from "effect-fc"
+import { Component, Form, Subscribable } from "effect-fc"
 import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
 import { TextFieldOptionalFormInputView } from "@/lib/form/TextFieldOptionalFormInputView"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
@@ -40,42 +40,34 @@ const RegisterFormSubmitSchema = Schema.Struct({
 })

 class RegisterFormService extends Effect.Service<RegisterFormService>()("RegisterFormService", {
-    scoped: Effect.gen(function*() {
-        const form = yield* SubmittableForm.service({
-            schema: RegisterFormSchema.pipe(
-                Schema.compose(
-                    Schema.transformOrFail(
-                        Schema.typeSchema(RegisterFormSchema),
-                        Schema.typeSchema(RegisterFormSchema),
-                        {
-                            decode: v => Effect.andThen(Effect.sleep("500 millis"), ParseResult.succeed(v)),
-                            encode: ParseResult.succeed,
-                        },
-                    ),
+    scoped: Form.service({
+        schema: RegisterFormSchema.pipe(
+            Schema.compose(
+                Schema.transformOrFail(
+                    Schema.typeSchema(RegisterFormSchema),
+                    Schema.typeSchema(RegisterFormSchema),
+                    {
+                        decode: v => Effect.andThen(Effect.sleep("500 millis"), ParseResult.succeed(v)),
+                        encode: ParseResult.succeed,
+                    },
                ),
            ),
+        ),

-            initialEncodedValue: { email: "", password: "", birth: Option.none() },
-            f: Effect.fnUntraced(function*([value]) {
-                yield* Effect.sleep("500 millis")
-                return yield* Schema.decode(RegisterFormSubmitSchema)(value)
-            }),
-        })
-
-        return {
-            form,
-            emailField: Form.focusObjectOn(form, "email"),
-            passwordField: Form.focusObjectOn(form, "password"),
-            birthField: Form.focusObjectOn(form, "birth"),
-        } as const
+        initialEncodedValue: { email: "", password: "", birth: Option.none() },
+        f: Effect.fnUntraced(function*([value]) {
+            yield* Effect.sleep("500 millis")
+            return yield* Schema.decode(RegisterFormSubmitSchema)(value)
+        }),
+        debounce: "500 millis",
    })
 }) {}

 class RegisterFormView extends Component.make("RegisterFormView")(function*() {
    const form = yield* RegisterFormService
-    const [canCommit, submitResult] = yield* Subscribable.useAll([
-        form.form.canCommit,
-        form.form.mutation.result,
+    const [canSubmit, submitResult] = yield* Subscribable.useSubscribables([
+        form.canSubmit,
+        form.mutation.result,
    ])

    const runPromise = yield* Component.useRunPromise()
@@ -92,26 +84,24 @@ class RegisterFormView extends Component.make("RegisterFormView")(function*() {
        <Container width="300">
            <form onSubmit={e => {
                e.preventDefault()
-                void runPromise(form.form.submit)
+                void runPromise(form.submit)
            }}>
                <Flex direction="column" gap="2">
                    <TextFieldFormInput
-                        form={form.emailField}
-                        debounce="250 millis"
+                        field={yield* form.field(["email"])}
                    />

                    <TextFieldFormInput
-                        form={form.passwordField}
-                        debounce="250 millis"
+                        field={yield* form.field(["password"])}
                    />

                    <TextFieldOptionalFormInput
                        type="datetime-local"
-                        form={form.birthField}
+                        field={yield* form.field(["birth"])}
                        defaultValue=""
                    />

-                    <Button disabled={!canCommit}>Submit</Button>
+                    <Button disabled={!canSubmit}>Submit</Button>
                </Flex>
            </form>

--- a/packages/example/src/routes/query.tsx
+++ b/packages/example/src/routes/query.tsx
@@ -1,8 +1,8 @@
 import { HttpClient, type HttpClientError } from "@effect/platform"
 import { Button, Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Array, Cause, Chunk, Console, Effect, flow, Match, Option, Schema, Stream, SubscriptionRef } from "effect"
-import { Component, ErrorObserver, Lens, Mutation, Query, Result, Subscribable } from "effect-fc"
+import { Array, Cause, Chunk, Console, Effect, flow, Match, Option, Schema, Stream } from "effect"
+import { Component, ErrorObserver, Mutation, Query, Result, Subscribable, SubscriptionRef } from "effect-fc"
 import { runtime } from "@/runtime"


@@ -16,9 +16,9 @@ const Post = Schema.Struct({
 const ResultView = Component.make("ResultView")(function*() {
    const runPromise = yield* Component.useRunPromise()

-    const [idLens, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
-        const idLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(1))
-        const key = Stream.map(idLens.changes, id => [id] as const)
+    const [idRef, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
+        const idRef = yield* SubscriptionRef.make(1)
+        const key = Stream.map(idRef.changes, id => [id] as const)

        const query = yield* Query.service({
            key,
@@ -40,11 +40,11 @@ const ResultView = Component.make("ResultView")(function*() {
            ),
        })

-        return [idLens, query, mutation] as const
+        return [idRef, query, mutation] as const
    }))

-    const [id, setId] = yield* Lens.useState(idLens)
-    const [queryResult, mutationResult] = yield* Subscribable.useAll([query.result, mutation.result])
+    const [id, setId] = yield* SubscriptionRef.useSubscriptionRefState(idRef)
+    const [queryResult, mutationResult] = yield* Subscribable.useSubscribables([query.result, mutation.result])

    yield* Component.useOnMount(() => ErrorObserver.ErrorObserver<HttpClientError.HttpClientError>().pipe(
        Effect.andThen(observer => observer.subscribe),
@@ -105,7 +105,7 @@ const ResultView = Component.make("ResultView")(function*() {
                </div>

                <Flex direction="row" justify="center" align="center" gap="1">
-                    <Button onClick={() => runPromise(Effect.andThen(Lens.get(idLens), id => mutation.mutate([id])))}>Mutate</Button>
+                    <Button onClick={() => runPromise(Effect.andThen(idRef, id => mutation.mutate([id])))}>Mutate</Button>
                </Flex>
            </Flex>
        </Container>
--- a/packages/example/src/routes/result.tsx
+++ b/packages/example/src/routes/result.tsx
@@ -21,7 +21,7 @@ const ResultView = Component.makeUntraced("Result")(function*() {
        Effect.tap(Effect.sleep("250 millis")),
        Result.forkEffect,
    ))
-    const [result] = yield* Subscribable.useAll([resultSubscribable])
+    const [result] = yield* Subscribable.useSubscribables([resultSubscribable])

    yield* Component.useOnMount(() => ErrorObserver.ErrorObserver<HttpClientError.HttpClientError>().pipe(
        Effect.andThen(observer => observer.subscribe),
--- a/packages/example/src/todo/EditTodoView.tsx
+++ b/packages/example/src/todo/EditTodoView.tsx
@@ -1,88 +0,0 @@
-import { Box, Flex, IconButton } from "@radix-ui/themes"
-import { Effect } from "effect"
-import { Component, Form, Subscribable, SynchronizedForm } from "effect-fc"
-import { FaArrowDown, FaArrowUp } from "react-icons/fa"
-import { FaDeleteLeft } from "react-icons/fa6"
-import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
-import { TextFieldOptionalFormInputView } from "@/lib/form/TextFieldOptionalFormInputView"
-import { TodoFormSchema } from "./TodoFormSchema"
-import { TodosState } from "./TodosState"
-
-
-export interface EditTodoViewProps {
-    readonly id: string
-}
-
-export class EditTodoView extends Component.make("TodoView")(function*(props: EditTodoViewProps) {
-    const state = yield* TodosState
-
-    const [
-        indexSubscribable,
-        contentField,
-        completedAtField,
-    ] = yield* Component.useOnChange(() => Effect.gen(function*() {
-        const indexSubscribable = state.getIndexSubscribable(props.id)
-
-        const form = yield* SynchronizedForm.service({
-            schema: TodoFormSchema,
-            target: state.getElementLens(props.id),
-        })
-
-        return [
-            indexSubscribable,
-            Form.focusObjectOn(form, "content"),
-            Form.focusObjectOn(form, "completedAt"),
-        ] as const
-    }), [props.id])
-
-    const [index, size] = yield* Subscribable.useAll([
-        indexSubscribable,
-        state.sizeSubscribable,
-    ])
-
-    const runSync = yield* Component.useRunSync()
-    const TextFieldFormInput = yield* TextFieldFormInputView.use
-    const TextFieldOptionalFormInput = yield* TextFieldOptionalFormInputView.use
-
-
-    return (
-        <Flex direction="row" align="center" gap="2">
-            <Box flexGrow="1">
-                <Flex direction="column" align="stretch" gap="2">
-                    <TextFieldFormInput
-                        form={contentField}
-                        debounce="250 millis"
-                    />
-
-                    <Flex direction="row" justify="center" align="center" gap="2">
-                        <TextFieldOptionalFormInput
-                            form={completedAtField}
-                            type="datetime-local"
-                            defaultValue=""
-                        />
-                    </Flex>
-                </Flex>
-            </Box>
-
-            <Flex direction="column" justify="center" align="center" gap="1">
-                <IconButton
-                    disabled={index <= 0}
-                    onClick={() => runSync(state.moveLeft(props.id))}
-                >
-                    <FaArrowUp />
-                </IconButton>
-
-                <IconButton
-                    disabled={index >= size - 1}
-                    onClick={() => runSync(state.moveRight(props.id))}
-                >
-                    <FaArrowDown />
-                </IconButton>
-
-                <IconButton onClick={() => runSync(state.remove(props.id))}>
-                    <FaDeleteLeft />
-                </IconButton>
-            </Flex>
-        </Flex>
-    )
-}) {}
--- a/packages/example/src/todo/NewTodoView.tsx
+++ b/packages/example/src/todo/NewTodoView.tsx
@@ -1,78 +0,0 @@
-import { Box, Button, Flex } from "@radix-ui/themes"
-import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Chunk, type DateTime, Effect, Option, Schema } from "effect"
-import { Component, Form, Lens, SubmittableForm, Subscribable } from "effect-fc"
-import * as Domain from "@/domain"
-import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
-import { TextFieldOptionalFormInputView } from "@/lib/form/TextFieldOptionalFormInputView"
-import { TodoFormSchema } from "./TodoFormSchema"
-import { TodosState } from "./TodosState"
-
-
-const makeTodo = makeUuid4.pipe(
-    Effect.map(id => Domain.Todo.Todo.make({
-        id,
-        content: "",
-        completedAt: Option.none(),
-    })),
-    Effect.provide(GetRandomValues.CryptoRandom),
-)
-
-
-export class NewTodoView extends Component.make("NewTodoView")(function*() {
-    const state = yield* TodosState
-
-    const [
-        form,
-        contentField,
-        completedAtField,
-    ] = yield* Component.useOnMount(() => Effect.gen(function*() {
-        const form = yield* SubmittableForm.service({
-            schema: TodoFormSchema,
-            initialEncodedValue: yield* Schema.encode(TodoFormSchema)(yield* makeTodo),
-            f: ([todo, form]) => Lens.update(state.lens, Chunk.prepend(todo)).pipe(
-                Effect.andThen(makeTodo),
-                Effect.andThen(Schema.encode(TodoFormSchema)),
-                Effect.andThen(v => Lens.set(form.encodedValue, v)),
-            ),
-        })
-
-        return [
-            form,
-            Form.focusObjectOn(form, "content"),
-            Form.focusObjectOn(form, "completedAt"),
-        ] as const
-    }))
-
-    const [canCommit] = yield* Subscribable.useAll([form.canCommit])
-
-    const runPromise = yield* Component.useRunPromise<DateTime.CurrentTimeZone>()
-    const TextFieldFormInput = yield* TextFieldFormInputView.use
-    const TextFieldOptionalFormInput = yield* TextFieldOptionalFormInputView.use
-
-
-    return (
-        <Flex direction="row" align="center" gap="2">
-            <Box flexGrow="1">
-                <Flex direction="column" align="stretch" gap="2">
-                    <TextFieldFormInput
-                        form={contentField}
-                        debounce="250 millis"
-                    />
-
-                    <Flex direction="row" justify="center" align="center" gap="2">
-                        <TextFieldOptionalFormInput
-                            form={completedAtField}
-                            type="datetime-local"
-                            defaultValue=""
-                        />
-
-                        <Button disabled={!canCommit} onClick={() => void runPromise(form.submit)}>
-                            Add
-                        </Button>
-                    </Flex>
-                </Flex>
-            </Box>
-        </Flex>
-    )
-}) {}
--- a/packages/example/src/todo/TodoFormSchema.ts
+++ b/packages/example/src/todo/TodoFormSchema.ts
@@ -1,9 +0,0 @@
-import { Schema } from "effect"
-import * as Domain from "@/domain"
-import { DateTimeUtcFromZonedInput } from "@/lib/schema"
-
-
-export const TodoFormSchema = Schema.compose(Schema.Struct({
-    ...Domain.Todo.Todo.fields,
-    completedAt: Schema.OptionFromSelf(DateTimeUtcFromZonedInput),
-}), Domain.Todo.Todo)
--- a/packages/example/src/todo/TodoView.tsx
+++ b/packages/example/src/todo/TodoView.tsx
@@ -0,0 +1,136 @@
+import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
+import { GetRandomValues, makeUuid4 } from "@typed/id"
+import { Chunk, type DateTime, Effect, Match, Option, Ref, Schema, Stream } from "effect"
+import { Component, Form, Subscribable } from "effect-fc"
+import { FaArrowDown, FaArrowUp } from "react-icons/fa"
+import { FaDeleteLeft } from "react-icons/fa6"
+import * as Domain from "@/domain"
+import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
+import { TextFieldOptionalFormInputView } from "@/lib/form/TextFieldOptionalFormInputView"
+import { DateTimeUtcFromZonedInput } from "@/lib/schema"
+import { TodosState } from "./TodosState"
+
+
+const TodoFormSchema = Schema.compose(Schema.Struct({
+    ...Domain.Todo.Todo.fields,
+    completedAt: Schema.OptionFromSelf(DateTimeUtcFromZonedInput),
+}), Domain.Todo.Todo)
+
+const makeTodo = makeUuid4.pipe(
+    Effect.map(id => Domain.Todo.Todo.make({
+        id,
+        content: "",
+        completedAt: Option.none(),
+    })),
+    Effect.provide(GetRandomValues.CryptoRandom),
+)
+
+
+export type TodoProps = (
+    | { readonly _tag: "new" }
+    | { readonly _tag: "edit", readonly id: string }
+)
+
+export class TodoView extends Component.make("TodoView")(function*(props: TodoProps) {
+    const state = yield* TodosState
+
+    const [
+        indexRef,
+        form,
+        contentField,
+        completedAtField,
+    ] = yield* Component.useOnChange(() => Effect.gen(function*() {
+        const indexRef = Match.value(props).pipe(
+            Match.tag("new", () => Subscribable.make({ get: Effect.succeed(-1), changes: Stream.make(-1) })),
+            Match.tag("edit", ({ id }) => state.getIndexSubscribable(id)),
+            Match.exhaustive,
+        )
+
+        const form = yield* Form.service({
+            schema: TodoFormSchema,
+            initialEncodedValue: yield* Schema.encode(TodoFormSchema)(
+                yield* Match.value(props).pipe(
+                    Match.tag("new", () => makeTodo),
+                    Match.tag("edit", ({ id }) => state.getElementRef(id)),
+                    Match.exhaustive,
+                )
+            ),
+            f: ([todo, form]) => Match.value(props).pipe(
+                Match.tag("new", () => Ref.update(state.ref, Chunk.prepend(todo)).pipe(
+                    Effect.andThen(makeTodo),
+                    Effect.andThen(Schema.encode(TodoFormSchema)),
+                    Effect.andThen(v => Ref.set(form.encodedValue, v)),
+                )),
+                Match.tag("edit", ({ id }) => Ref.set(state.getElementRef(id), todo)),
+                Match.exhaustive,
+            ),
+            autosubmit: props._tag === "edit",
+            debounce: "250 millis",
+        })
+
+        return [
+            indexRef,
+            form,
+            yield* form.field(["content"]),
+            yield* form.field(["completedAt"]),
+        ] as const
+    }), [props._tag, props._tag === "edit" ? props.id : undefined])
+
+    const [index, size, canSubmit] = yield* Subscribable.useSubscribables([
+        indexRef,
+        state.sizeSubscribable,
+        form.canSubmit,
+    ])
+
+    const runSync = yield* Component.useRunSync()
+    const runPromise = yield* Component.useRunPromise<DateTime.CurrentTimeZone>()
+    const TextFieldFormInput = yield* TextFieldFormInputView.use
+    const TextFieldOptionalFormInput = yield* TextFieldOptionalFormInputView.use
+
+
+    return (
+        <Flex direction="row" align="center" gap="2">
+            <Box flexGrow="1">
+                <Flex direction="column" align="stretch" gap="2">
+                    <TextFieldFormInput field={contentField} />
+
+                    <Flex direction="row" justify="center" align="center" gap="2">
+                        <TextFieldOptionalFormInput
+                            field={completedAtField}
+                            type="datetime-local"
+                            defaultValue=""
+                        />
+
+                        {props._tag === "new" &&
+                            <Button disabled={!canSubmit} onClick={() => void runPromise(form.submit)}>
+                                Add
+                            </Button>
+                        }
+                    </Flex>
+                </Flex>
+            </Box>
+
+            {props._tag === "edit" &&
+                <Flex direction="column" justify="center" align="center" gap="1">
+                    <IconButton
+                        disabled={index <= 0}
+                        onClick={() => runSync(state.moveLeft(props.id))}
+                    >
+                        <FaArrowUp />
+                    </IconButton>
+
+                    <IconButton
+                        disabled={index >= size - 1}
+                        onClick={() => runSync(state.moveRight(props.id))}
+                    >
+                        <FaArrowDown />
+                    </IconButton>
+
+                    <IconButton onClick={() => runSync(state.remove(props.id))}>
+                        <FaDeleteLeft />
+                    </IconButton>
+                </Flex>
+            }
+        </Flex>
+    )
+}) {}
--- a/packages/example/src/todo/TodosState.ts
+++ b/packages/example/src/todo/TodosState.ts
@@ -1,7 +1,7 @@
 import { KeyValueStore } from "@effect/platform"
 import { BrowserKeyValueStore } from "@effect/platform-browser"
 import { Chunk, Console, Effect, Option, Schema, Stream, SubscriptionRef } from "effect"
-import { Lens, Subscribable } from "effect-fc"
+import { Subscribable, SubscriptionSubRef } from "effect-fc"
 import { Todo } from "@/domain"


@@ -30,29 +30,27 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
                : kv.remove(key)
        )

-        const lens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(yield* readFromLocalStorage))
-        yield* Effect.forkScoped(lens.changes.pipe(
+        const ref = yield* SubscriptionRef.make(yield* readFromLocalStorage)
+        yield* Effect.forkScoped(ref.changes.pipe(
            Stream.debounce("500 millis"),
            Stream.runForEach(saveToLocalStorage),
        ))
-        yield* Effect.addFinalizer(() => Lens.get(lens).pipe(
+        yield* Effect.addFinalizer(() => ref.pipe(
            Effect.andThen(saveToLocalStorage),
            Effect.ignore,
        ))

-        const sizeSubscribable = Subscribable.map(lens, Chunk.size)
+        const sizeSubscribable = Subscribable.make({
+            get: Effect.andThen(ref, Chunk.size),
+            get changes() { return Stream.map(ref.changes, Chunk.size) },
+        })
+        const getElementRef = (id: string) => SubscriptionSubRef.makeFromChunkFindFirst(ref, v => v.id === id)
+        const getIndexSubscribable = (id: string) => Subscribable.make({
+            get: Effect.flatMap(ref, Chunk.findFirstIndex(v => v.id === id)),
+            get changes() { return Stream.flatMap(ref.changes, Chunk.findFirstIndex(v => v.id === id)) },
+        })

-        const getElementLens = (id: string) => Lens.mapEffect(
-            lens,
-            Chunk.findFirst(v => v.id === id),
-            (a, b) => Effect.flatMap(
-                Chunk.findFirstIndex(a, v => v.id === id),
-                i => Chunk.replaceOption(a, i, b),
-            )
-        )
-        const getIndexSubscribable = (id: string) => Subscribable.mapEffect(lens, Chunk.findFirstIndex(v => v.id === id))
-
-        const moveLeft = (id: string) => Lens.updateEffect(lens, todos => Effect.Do.pipe(
+        const moveLeft = (id: string) => SubscriptionRef.updateEffect(ref, todos => Effect.Do.pipe(
            Effect.bind("index", () => Chunk.findFirstIndex(todos, v => v.id === id)),
            Effect.bind("todo", ({ index }) => Chunk.get(todos, index)),
            Effect.bind("previous", ({ index }) => Chunk.get(todos, index - 1)),
@@ -64,7 +62,7 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
                : todos
            ),
        ))
-        const moveRight = (id: string) => Lens.updateEffect(lens, todos => Effect.Do.pipe(
+        const moveRight = (id: string) => SubscriptionRef.updateEffect(ref, todos => Effect.Do.pipe(
            Effect.bind("index", () => Chunk.findFirstIndex(todos, v => v.id === id)),
            Effect.bind("todo", ({ index }) => Chunk.get(todos, index)),
            Effect.bind("next", ({ index }) => Chunk.get(todos, index + 1)),
@@ -76,15 +74,15 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
                : todos
            ),
        ))
-        const remove = (id: string) => Lens.updateEffect(lens, todos => Effect.andThen(
+        const remove = (id: string) => SubscriptionRef.updateEffect(ref, todos => Effect.andThen(
            Chunk.findFirstIndex(todos, v => v.id === id),
            index => Chunk.remove(todos, index),
        ))

        return {
-            lens,
+            ref,
            sizeSubscribable,
-            getElementLens,
+            getElementRef,
            getIndexSubscribable,
            moveLeft,
            moveRight,
--- a/packages/example/src/todo/TodosView.tsx
+++ b/packages/example/src/todo/TodosView.tsx
@@ -1,32 +1,30 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
 import { Chunk, Console, Effect } from "effect"
 import { Component, Subscribable } from "effect-fc"
-import { EditTodoView } from "./EditTodoView"
-import { NewTodoView } from "./NewTodoView"
 import { TodosState } from "./TodosState"
+import { TodoView } from "./TodoView"


 export class TodosView extends Component.make("TodosView")(function*() {
    const state = yield* TodosState
-    const [todos] = yield* Subscribable.useAll([state.lens])
+    const [todos] = yield* Subscribable.useSubscribables([state.ref])

    yield* Component.useOnMount(() => Effect.andThen(
        Console.log("Todos mounted"),
        Effect.addFinalizer(() => Console.log("Todos unmounted")),
    ))

-    const NewTodo = yield* NewTodoView.use
-    const EditTodo = yield* EditTodoView.use
+    const Todo = yield* TodoView.use

    return (
        <Container>
            <Heading align="center">Todos</Heading>

            <Flex direction="column" align="stretch" gap="2" mt="2">
-                <NewTodo />
+                <Todo _tag="new" />

                {Chunk.map(todos, todo =>
-                    <EditTodo key={todo.id} id={todo.id} />
+                    <Todo key={todo.id} _tag="edit" id={todo.id} />
                )}
            </Flex>
        </Container>