Add Effect v4 support, Fast Refresh tooling, and revamped docs (#56)

## Summary - Add `effect-fc-next`, a React 19 integration targeting Effect v4 beta. - Introduce component lifecycles, scoped resources, queries, mutations, forms, lenses, views, and refreshable components. - Add `@effect-view/vite-plugin` for Vite Fast Refresh support. - Add an Effect v4 example application covering the new APIs. - Expand test coverage for both the existing and next-generation packages. - Replace the starter Docusaurus content with complete Effect View documentation while preserving the Effect v3 docs as a versioned snapshot. - Update the landing page, navigation, package scripts, and build output. - Extend CI with linting, tests, package builds, Docker builds, and container publishing. ## Validation - `bun lint:tsc` - `bun lint:biome` - `bun test` - `bun run build` - `bun pack` - Docker image build --------- Co-authored-by: Julien Valverdé <julien.valverde@mailo.com> Reviewed-on: Thilawyn/effect-fc#56
2026-07-26 02:32:59 +02:00
parent 721ab7d736
commit 4478598f15
138 changed files with 13360 additions and 1970 deletions
@@ -0,0 +1,145 @@
+<p align="center">
+  <a href="https://thila.dev/effect-view">
+    <img src="../docs/static/img/logo.svg" width="104" height="104" alt="Effect View logo" />
+  </a>
+</p>
+
+<h1 align="center">Effect View</h1>
+
+<p align="center">
+  Write React components as typed Effect programs.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/effect-view"><img src="https://img.shields.io/npm/v/effect-view?color=08777b" alt="npm version" /></a>
+  <a href="https://thila.dev/effect-view"><img src="https://img.shields.io/badge/docs-Effect_View-16a3a1" alt="Effect View documentation" /></a>
+  <a href="https://github.com/Thiladev/effect-view/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/effect-view?color=e99526" alt="MIT license" /></a>
+</p>
+
+<p align="center">
+  <strong><a href="https://thila.dev/effect-view">Read the documentation →</a></strong>
+</p>
+
+Effect View brings Effect's typed services, resource safety, concurrency, and
+data modeling into React 19 without replacing React's component model. Yield
+Effects and services from a component body, let scopes follow the React
+lifecycle, and return ordinary JSX.
+
+> **Effect v4 beta:** Effect View is built for the Effect v4 beta release. If
+> your application uses Effect v3, use the legacy
+> [`effect-fc` package](https://www.npmjs.com/package/effect-fc) instead.
+
+```bash
+npm install effect-view effect@beta react
+```
+
+Effect View does not depend on `react-dom`. Install the renderer used by your
+application—for example, `react-dom` for the web:
+
+```bash
+npm install react-dom
+```
+
+You can use Effect View with React Native or any other React renderer instead.
+
+## What it looks like
+
+An Effect View component is an Effect program that produces JSX. It can create
+scoped state, access services, and use React-facing hooks without leaving the
+generator model:
+
+```tsx
+import { Effect, SubscriptionRef } from "effect"
+import { Component, Lens } from "effect-view"
+import { runtime } from "./runtime"
+
+const CounterValueView = Component.make("CounterValue")(
+  function* ({ count }: { readonly count: Lens.Lens<number> }) {
+    yield* Component.useOnMount(() =>
+      Effect.addFinalizer(() =>
+        Effect.log("CounterValue unmounted"),
+      ),
+    )
+
+    const [value, setValue] = yield* Lens.useState(count)
+
+    return (
+      <button onClick={() => setValue((n) => n + 1)}>
+        Count: {value}
+      </button>
+    )
+  },
+)
+
+const CounterView = Component.make("Counter")(function* () {
+  const count = yield* Component.useOnMount(() =>
+    Effect.map(
+      SubscriptionRef.make(0),
+      Lens.fromSubscriptionRef,
+    ),
+  )
+
+  const CounterValue = yield* CounterValueView.use
+
+  return <CounterValue count={count} />
+})
+
+export const Counter = CounterView.pipe(
+  Component.withContext(runtime.context),
+)
+```
+
+`CounterView` composes another Effect View component by yielding its `.use`
+Effect, then renders the resulting component as ordinary JSX. The child can
+access the current Effect context and receives its own component scope.
+
+`Effect.addFinalizer` uses the scope already provided to the component body, so
+the finalizer above runs when `CounterValue` unmounts.
+
+At the outer boundary, `Counter` is still a normal React component and its Effect requirements remain
+typed until they reach the runtime.
+
+[Build the runtime and render your first component →](https://thila.dev/effect-view/docs/getting-started)
+
+## Why Effect View
+
+| | Capability | What it gives you |
+| --- | --- | --- |
+| **Effect components** | `Component.make` | Yield Effects and typed services directly, then return JSX. |
+| **Managed lifecycles** | `Scope.Scope` | Finalizers, fibers, subscriptions, and resources close with their component or dependency lifecycle. |
+| **One application runtime** | `ReactRuntime` | Build your Layer once and make its services available throughout the UI. |
+| **Reactive state** | `Lens` and `View` | Focus large state models into small writable values and subscribe only where React needs them. |
+| **Server state** | `Query` and `Mutation` | TanStack Query-style caching, invalidation, staleness, and mutations with typed Effects underneath. |
+| **Schema-driven forms** | `MutationForm` and `LensForm` | Keep input-friendly encoded values while application code receives validated, decoded types. |
+| **Async rendering** | `Async` and `Memoized` | Integrate asynchronous Effects with Suspense while retaining Effect errors and cancellation. |
+
+## Designed for both ecosystems
+
+Effect View does not hide Effect behind callbacks or recreate React around a
+new rendering model. React still owns rendering, JSX, hooks, Suspense, and
+events. Effect owns services, errors, resource safety, concurrency, streams,
+and schemas. Effect View provides the lifecycle-aware boundary between them.
+
+## Documentation
+
+The complete documentation is available at **[thila.dev/effect-view](https://thila.dev/effect-view)**.
+
+## Requirements
+
+- React 19.2 or newer
+- **Effect v4 beta** (`effect@beta`)
+- TypeScript and `@types/react` for TypeScript projects
+
+Effect View is renderer-independent and does not require `react-dom`.
+
+## Project status
+
+Effect View is currently beta software. The main APIs are available, but
+breaking changes and rough edges are still possible before a stable release.
+
+Issues, ideas, and contributions are welcome on
+[GitHub](https://github.com/Thiladev/effect-view).
+
+## License
+
+[MIT](https://github.com/Thiladev/effect-view/blob/main/LICENSE)
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://biomejs.dev/schemas/latest/schema.json",
+  "root": false,
+  "extends": "//",
+  "files": {
+    "includes": ["./src/**"]
+  }
+}
@@ -0,0 +1,115 @@
+{
+  "name": "effect-fc-next",
+  "description": "Write React function components with Effect",
+  "version": "0.1.0-beta.0",
+  "type": "module",
+  "files": [
+    "./README.md",
+    "./dist"
+  ],
+  "license": "MIT",
+  "repository": {
+    "url": "git+https://github.com/Thiladev/effect-fc.git"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./Async": {
+      "types": "./dist/Async.d.ts",
+      "default": "./dist/Async.js"
+    },
+    "./Component": {
+      "types": "./dist/Component.d.ts",
+      "default": "./dist/Component.js"
+    },
+    "./Form": {
+      "types": "./dist/Form.d.ts",
+      "default": "./dist/Form.js"
+    },
+    "./Lens": {
+      "types": "./dist/Lens.d.ts",
+      "default": "./dist/Lens.js"
+    },
+    "./LensForm": {
+      "types": "./dist/LensForm.d.ts",
+      "default": "./dist/LensForm.js"
+    },
+    "./Memoized": {
+      "types": "./dist/Memoized.d.ts",
+      "default": "./dist/Memoized.js"
+    },
+    "./Mutation": {
+      "types": "./dist/Mutation.d.ts",
+      "default": "./dist/Mutation.js"
+    },
+    "./MutationForm": {
+      "types": "./dist/MutationForm.d.ts",
+      "default": "./dist/MutationForm.js"
+    },
+    "./PubSub": {
+      "types": "./dist/PubSub.d.ts",
+      "default": "./dist/PubSub.js"
+    },
+    "./Query": {
+      "types": "./dist/Query.d.ts",
+      "default": "./dist/Query.js"
+    },
+    "./QueryClient": {
+      "types": "./dist/QueryClient.d.ts",
+      "default": "./dist/QueryClient.js"
+    },
+    "./ReactRuntime": {
+      "types": "./dist/ReactRuntime.d.ts",
+      "default": "./dist/ReactRuntime.js"
+    },
+    "./Refreshable": {
+      "types": "./dist/Refreshable.d.ts",
+      "default": "./dist/Refreshable.js"
+    },
+    "./ScopeRegistry": {
+      "types": "./dist/ScopeRegistry.d.ts",
+      "default": "./dist/ScopeRegistry.js"
+    },
+    "./SetStateAction": {
+      "types": "./dist/SetStateAction.d.ts",
+      "default": "./dist/SetStateAction.js"
+    },
+    "./Stream": {
+      "types": "./dist/Stream.d.ts",
+      "default": "./dist/Stream.js"
+    },
+    "./View": {
+      "types": "./dist/View.d.ts",
+      "default": "./dist/View.js"
+    }
+  },
+  "scripts": {
+    "lint:tsc": "tsc -b --noEmit",
+    "lint:biome": "biome lint",
+    "test": "vitest run",
+    "build": "tsc -b tsconfig.build.json",
+    "pack": "npm pack",
+    "clean:cache": "rm -rf .turbo *.tsbuildinfo",
+    "clean:dist": "rm -rf dist",
+    "clean:modules": "rm -rf node_modules"
+  },
+  "devDependencies": {
+    "@effect/platform-browser": "4.0.0-beta.98",
+    "@testing-library/react": "^16.3.0",
+    "effect": "4.0.0-beta.98",
+    "jsdom": "^26.1.0",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "@types/react": "^19.2.0",
+    "effect": "4.0.0-beta.98",
+    "react": "^19.2.0"
+  },
+  "dependencies": {
+    "@standard-schema/spec": "^1.1.0",
+    "effect-lens": "^2.0.0-beta.1"
+  }
+}
@@ -0,0 +1,63 @@
+import { act, fireEvent, render, screen } from "@testing-library/react"
+import { Effect, Layer } from "effect"
+import * as React from "react"
+import { describe, expect, it, vi } from "vitest"
+import * as Async from "./Async.js"
+import * as Component from "./Component.js"
+import * as Memoized from "./Memoized.js"
+import * as ReactRuntime from "./ReactRuntime.js"
+
+describe("Async", () => {
+    it("does not rerun for an unrelated parent state update", async () => {
+        const load = vi.fn((_id: number) => Effect.never)
+        const renderPost = vi.fn()
+        const runtime = ReactRuntime.make(Layer.empty)
+        const context = await runtime.runtime.context()
+
+        const Post = Component.make("Post")(function*(props: { readonly id: number }) {
+            renderPost()
+            const value = yield* Component.useOnChange(() => load(props.id), [props.id])
+            return <div>{value}</div>
+        }).pipe(
+            Async.async,
+            Memoized.memoized,
+        )
+
+        const Parent = Component.make("Parent")(function*() {
+            const [text, setText] = React.useState("")
+            const AsyncPost = yield* Post.use
+
+            return <>
+                <input
+                    aria-label="text"
+                    value={text}
+                    onChange={event => setText(event.currentTarget.value)}
+                />
+                <AsyncPost id={1} fallback={<div>loading</div>} />
+            </>
+        }).pipe(Component.withContext(runtime.context))
+
+        let view!: ReturnType<typeof render>
+        await act(async () => {
+            view = render(
+                <runtime.context.Provider value={context}>
+                    <Parent />
+                </runtime.context.Provider>,
+            )
+        })
+
+        expect(screen.getByText("loading")).toBeTruthy()
+        expect(load).toHaveBeenCalledTimes(2)
+        const callsAfterLoad = load.mock.calls.length
+        const rendersAfterLoad = renderPost.mock.calls.length
+
+        await act(async () => {
+            fireEvent.change(screen.getByLabelText("text"), { target: { value: "a" } })
+        })
+        expect(load).toHaveBeenCalledTimes(callsAfterLoad)
+        expect(renderPost).toHaveBeenCalledTimes(rendersAfterLoad)
+
+        view.unmount()
+        await runtime.runtime.dispose()
+    })
+})
@@ -0,0 +1,171 @@
+/** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
+import { type Context, Effect, type Equivalence, Function, Predicate, Scope } from "effect"
+import * as React from "react"
+import * as Component from "./Component.js"
+
+
+export const AsyncTypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
+export type AsyncTypeId = typeof AsyncTypeId
+
+
+/**
+ * A trait for `Component`'s that allows them running asynchronous effects.
+ */
+export interface Async extends AsyncPrototype, AsyncOptions {}
+
+export interface AsyncPrototype {
+    readonly [AsyncTypeId]: AsyncTypeId
+}
+
+/**
+ * Configuration options for `Async` components.
+ */
+export interface AsyncOptions {
+    /**
+     * The default fallback React node to display while the async operation is pending.
+     * Used if no fallback is provided to the component when rendering.
+     */
+    readonly defaultFallback?: React.ReactNode
+}
+
+/**
+ * Props for `Async` components.
+ */
+export type AsyncProps = Omit<React.SuspenseProps, "children">
+
+
+export const AsyncPrototype: AsyncPrototype = Object.freeze({
+    [AsyncTypeId]: AsyncTypeId,
+
+    makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R, F extends Component.Component.Signature>(
+        this: Component.Component<P, A, E, R, F> & Async,
+        contextRef: React.RefObject<Context.Context<Exclude<R, Scope.Scope>>>,
+    ) {
+        const Inner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
+
+        return ({ fallback, name, ...props }: AsyncProps) => {
+            const promise = Effect.runPromiseWith(contextRef.current)(
+                Effect.flatMap(
+                    Component.useScope([], this),
+                    scope => Effect.provideService(this.body(props as P), Scope.Scope, scope),
+                )
+            )
+
+            return React.createElement(
+                React.Suspense,
+                { fallback: fallback ?? this.defaultFallback, name },
+                React.createElement(Inner, { promise }),
+            )
+        }
+    },
+} as const)
+
+/**
+ * An equivalence function for comparing `AsyncProps` that ignores the `fallback` property.
+ * Used by default by async components with `Memoized.memoized` applied.
+ */
+export const defaultPropsEquivalence: Equivalence.Equivalence<AsyncProps> = (
+    self: Record<string, unknown>,
+    that: Record<string, unknown>,
+) => {
+    if (self === that)
+        return true
+
+    for (const key in self) {
+        if (key === "fallback")
+            continue
+        if (!(key in that) || !Object.is(self[key], that[key]))
+            return false
+    }
+
+    for (const key in that) {
+        if (key === "fallback")
+            continue
+        if (!(key in self))
+            return false
+    }
+
+    return true
+}
+
+
+export const isAsync = (u: unknown): u is Async => Predicate.hasProperty(u, AsyncTypeId)
+
+/**
+ * Converts a Component into an `Async` component that supports running asynchronous effects.
+ *
+ * Note: The component cannot have a prop named "promise" as it's reserved for internal use.
+ *
+ * @param self - The component to convert to an Async component
+ * @returns A new `Async` component with the same body, error, and context types as the input
+ *
+ * @example
+ * ```ts
+ * const MyAsyncComponent = MyComponent.pipe(
+ *   Async.async,
+ * )
+ * ```
+ */
+export const async = <T extends Component.Component.Any>(
+    self: T & (
+        "promise" extends keyof Component.Component.Props<T>
+            ? "The 'promise' prop name is restricted for Async components. Please rename the 'promise' prop to something else."
+            : T
+    )
+): (
+    & Omit<T, keyof Component.Component.AsComponent<T>>
+    & Component.Component<
+        Component.Component.Props<T> & AsyncProps,
+        Component.Component.Success<T>,
+        Component.Component.Error<T>,
+        Component.Component.Context<T>,
+        Component.Component.DefaultSignature<Component.Component.Props<T> & AsyncProps, Component.Component.Success<T>>
+    >
+    & Async
+) => Object.setPrototypeOf(
+    Object.assign(function() {}, self, { propsEquivalence: defaultPropsEquivalence }),
+    Object.freeze(Object.setPrototypeOf(
+        Object.assign({}, AsyncPrototype),
+        Object.getPrototypeOf(self),
+    )),
+)
+
+/**
+ * Applies options to an Async component, returning a new Async component with the updated configuration.
+ *
+ * Supports both curried and uncurried application styles.
+ *
+ * @param self - The Async component to apply options to (in uncurried form)
+ * @param options - The options to apply to the component
+ * @returns An Async component with the applied options
+ *
+ * @example
+ * ```ts
+ * // Curried
+ * const MyAsyncComponent = MyComponent.pipe(
+ *   Async.async,
+ *   Async.withOptions({ defaultFallback: <p>Loading...</p> }),
+ * )
+ *
+ * // Uncurried
+ * const MyAsyncComponent = Async.withOptions(
+ *   Async.async(MyComponent),
+ *   { defaultFallback: <p>Loading...</p> },
+ * )
+ * ```
+ */
+export const withOptions: {
+    <T extends Component.Component.Any & Async>(
+        options: Partial<AsyncOptions>
+    ): (self: T) => T
+    <T extends Component.Component.Any & Async>(
+        self: T,
+        options: Partial<AsyncOptions>,
+    ): T
+} = Function.dual(2, <T extends Component.Component.Any & Async>(
+    self: T,
+    options: Partial<AsyncOptions>,
+): T => Object.setPrototypeOf(
+    Object.assign(function() {}, self, options),
+    Object.getPrototypeOf(self),
+))
@@ -0,0 +1,571 @@
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { Context, Effect, HashMap, Layer, SubscriptionRef } from "effect"
+import * as React from "react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import * as Component from "./Component.js"
+import * as ReactRuntime from "./ReactRuntime.js"
+import * as Refreshable from "./Refreshable.js"
+import * as ScopeRegistry from "./ScopeRegistry.js"
+
+
+class ValueService extends Context.Service<ValueService, { readonly value: string }>()("ValueService") {}
+
+afterEach(() => {
+    vi.useRealTimers()
+})
+
+describe("Component", () => {
+    it("does not rerun useOnMount across rerenders after Strict Mode initialization", async () => {
+        const onMount = vi.fn(() => Effect.succeed("mounted"))
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+
+        const Probe = Component.makeUntraced("UseOnMountProbe")(function*() {
+            const value = yield* Component.useOnMount(onMount)
+            return <div>{value}</div>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("mounted")
+        expect(onMount).toHaveBeenCalledTimes(2)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+        expect(await screen.findByText("mounted")).toBeTruthy()
+        expect(onMount).toHaveBeenCalledTimes(2)
+
+        view.unmount()
+        await runtime.runtime.dispose()
+    })
+
+    it("recomputes useOnChange only when dependencies change", async () => {
+        const onChange = vi.fn((value: number) => Effect.succeed(`value:${value}`))
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+
+        const Probe = Component.makeUntraced("UseOnChangeProbe")(function*(props: { readonly value: number }) {
+            const result = yield* Component.useOnChange(() => onChange(props.value), [props.value], {
+                finalizerExecutionDebounce: 0,
+            })
+
+            return <div>{result}</div>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value={1} />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("value:1")
+        expect(onChange).toHaveBeenCalledTimes(2)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value={1} />
+            </runtime.context.Provider>
+        )
+
+        expect(await screen.findByText("value:1")).toBeTruthy()
+        expect(onChange).toHaveBeenCalledTimes(2)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value={2} />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("value:2")
+        expect(onChange).toHaveBeenCalledTimes(4)
+
+        view.unmount()
+        await runtime.runtime.dispose()
+    })
+
+    it("closes the previous scope on dependency changes and unmount", async () => {
+        const cleanup = vi.fn()
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+
+        const Probe = Component.makeUntraced("ScopeCleanupProbe")(function*(props: { readonly value: string }) {
+            const result = yield* Component.useOnChange(
+                () => Effect.gen(function*() {
+                    yield* Effect.addFinalizer(() => Effect.sync(() => cleanup(props.value)))
+                    return props.value
+                }),
+                [props.value],
+                { finalizerExecutionDebounce: 0 },
+            )
+
+            return <div>{result}</div>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value="first" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("first")
+        expect(cleanup).not.toHaveBeenCalled()
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value="second" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("second")
+        await waitFor(() => expect(cleanup).toHaveBeenCalledWith("first"))
+        expect(cleanup).toHaveBeenCalledTimes(1)
+
+        view.unmount()
+
+        await waitFor(() => expect(cleanup).toHaveBeenCalledWith("second"))
+        expect(cleanup).toHaveBeenCalledTimes(2)
+        await runtime.runtime.dispose()
+    })
+
+    it("runs useReactEffect setup and cleanup when dependencies change", async () => {
+        const lifecycle = vi.fn<(message: string) => void>()
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+
+        const Probe = Component.makeUntraced("UseReactEffectProbe")(function*(props: { readonly value: string }) {
+            yield* Component.useReactEffect(() =>
+                Effect.gen(function*() {
+                    yield* Effect.sync(() => lifecycle(`mount:${props.value}`))
+                    yield* Effect.addFinalizer(() => Effect.sync(() => lifecycle(`cleanup:${props.value}`)))
+                }),
+            [props.value])
+
+            return <div>{props.value}</div>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value="first" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("first")
+        await waitFor(() => expect(lifecycle).toHaveBeenCalledWith("mount:first"))
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value="second" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("second")
+        await waitFor(() => expect(lifecycle).toHaveBeenCalledWith("cleanup:first"))
+        await waitFor(() => expect(lifecycle).toHaveBeenCalledWith("mount:second"))
+
+        view.unmount()
+
+        await waitFor(() => expect(lifecycle).toHaveBeenCalledWith("cleanup:second"))
+        expect(lifecycle.mock.calls.map(([message]) => message)).toEqual([
+            "mount:first",
+            "cleanup:first",
+            "mount:first",
+            "cleanup:first",
+            "mount:second",
+            "cleanup:second",
+        ])
+        await runtime.runtime.dispose()
+    })
+
+    it("keeps useCallbackSync stable until dependencies change", async () => {
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+        const seenCallbacks: Array<(value: number) => string> = []
+
+        const Probe = Component.makeUntraced("UseCallbackSyncProbe")(function*(props: { readonly prefix: string }) {
+            const callback = yield* Component.useCallbackSync(
+                (value: number) => Effect.succeed(`${props.prefix}:${value}`),
+                [props.prefix],
+            )
+
+            yield* Component.useOnMount(() => Effect.sync(() => {
+                seenCallbacks.push(callback)
+            }))
+
+            React.useEffect(() => {
+                seenCallbacks.push(callback)
+            }, [callback])
+
+            return <div>{callback(1)}</div>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe prefix="a" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("a:1")
+        const initialLength = seenCallbacks.length
+        const initialCallback = seenCallbacks.at(-1)
+        expect(initialCallback?.(2)).toBe("a:2")
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe prefix="a" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("a:1")
+        expect(seenCallbacks).toHaveLength(initialLength)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe prefix="b" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("b:1")
+        await waitFor(() => expect(seenCallbacks.length).toBeGreaterThan(initialLength))
+        expect(seenCallbacks.at(-1)).not.toBe(initialCallback)
+        expect(seenCallbacks.at(-1)?.(2)).toBe("b:2")
+
+        view.unmount()
+        await runtime.runtime.dispose()
+    })
+
+    it("delays cleanup according to finalizerExecutionDebounce", async () => {
+        const cleanup = vi.fn()
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+
+        const Probe = Component.makeUntraced("DebouncedCleanupProbe")(function*(props: { readonly value: string }) {
+            const result = yield* Component.useOnChange(
+                () => Effect.gen(function*() {
+                    yield* Effect.addFinalizer(() => Effect.sync(() => cleanup(props.value)))
+                    return props.value
+                }),
+                [props.value],
+                { finalizerExecutionDebounce: "20 millis" },
+            )
+
+            return <div>{result}</div>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value="first" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("first")
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value="second" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("second")
+        expect(cleanup).not.toHaveBeenCalled()
+
+        await new Promise(resolve => setTimeout(resolve, 5))
+        expect(cleanup).not.toHaveBeenCalled()
+
+        await waitFor(() => expect(cleanup).toHaveBeenCalledWith("first"), { timeout: 100 })
+
+        view.unmount()
+        await waitFor(() => expect(cleanup).toHaveBeenCalledWith("second"), { timeout: 100 })
+        await runtime.runtime.dispose()
+    })
+
+    it("does not remount a component when only nonReactiveTags change", async () => {
+        const mounts = vi.fn()
+        const unmounts = vi.fn()
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+
+        const SubComponent = Component.makeUntraced("NonReactiveSubComponent")(function*() {
+            const service = yield* ValueService
+            const [count, setCount] = React.useState(0)
+
+            yield* Component.useOnMount(() => Effect.gen(function*() {
+                yield* Effect.sync(() => mounts())
+                yield* Effect.addFinalizer(() => Effect.sync(() => unmounts()))
+            }))
+
+            return <button type="button" onClick={() => setCount(value => value + 1)}>{`${service.value}:${count}`}</button>
+        }).pipe(
+            Component.withOptions({
+                nonReactiveTags: [...Component.defaultOptions.nonReactiveTags, ValueService],
+            })
+        )
+
+        const Parent = Component.makeUntraced("NonReactiveParent")(function*(props: { readonly value: string }) {
+            const serviceLayer = React.useMemo(
+                () => Layer.succeed(ValueService, { value: props.value }),
+                [props.value],
+            )
+            const context = yield* Component.useLayer(serviceLayer, {
+                finalizerExecutionDebounce: 0,
+            })
+            const Child = yield* Effect.provide(SubComponent.use, context)
+
+            return <Child />
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Parent value="first" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("first:0")
+        const initialMounts = mounts.mock.calls.length
+        expect(initialMounts).toBeGreaterThan(0)
+        expect(unmounts).not.toHaveBeenCalled()
+
+        fireEvent.click(screen.getByRole("button", { name: "first:0" }))
+        await screen.findByText("first:1")
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Parent value="second" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("second:1")
+        expect(mounts).toHaveBeenCalledTimes(initialMounts)
+        expect(unmounts).not.toHaveBeenCalled()
+
+        view.unmount()
+        await waitFor(() => expect(unmounts).toHaveBeenCalledTimes(1))
+        await runtime.runtime.dispose()
+    })
+
+    it("does not commit effects or retain registered scopes for a discarded Suspense render", async () => {
+        const setup = vi.fn()
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+        const scopeRegistry = Context.get(effectRuntime, ScopeRegistry.ScopeRegistry)
+        const pending = new Promise<void>(() => {})
+
+        const Probe = Component.makeUntraced("DiscardedSuspenseProbe")(function*() {
+            yield* Component.useReactEffect(() => Effect.sync(setup), [])
+            React.use(pending)
+            return <div>committed</div>
+        }).pipe(
+            Component.withOptions({ scopeCommitTimeout: "10 millis" }),
+            Component.withContext(runtime.context)
+        )
+
+        let view!: ReturnType<typeof render>
+        await act(async () => {
+            view = render(
+                <React.Suspense fallback={<div>fallback</div>}>
+                    <runtime.context.Provider value={effectRuntime}>
+                        <Probe />
+                    </runtime.context.Provider>
+                </React.Suspense>
+            )
+        })
+
+        try {
+            await screen.findByText("fallback")
+            expect(setup).not.toHaveBeenCalled()
+            await waitFor(() => expect(HashMap.size(Effect.runSync(SubscriptionRef.get(scopeRegistry.ref)))).toBe(0))
+        }
+        finally {
+            view.unmount()
+            await runtime.runtime.dispose()
+        }
+    })
+
+    it("keeps committed scopes alive without heartbeats", async () => {
+        const acquisitions = vi.fn()
+        const releases = vi.fn()
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+        const scopeRegistry = Context.get(effectRuntime, ScopeRegistry.ScopeRegistry)
+
+        const Probe = Component.makeUntraced("CommittedScopeProbe")(function*() {
+            yield* Component.useOnMount(() => Effect.gen(function*() {
+                yield* Effect.sync(acquisitions)
+                yield* Effect.addFinalizer(() => Effect.sync(releases))
+            }))
+
+            return <div>committed</div>
+        }).pipe(
+            Component.withOptions({
+                finalizerExecutionDebounce: "10 millis",
+                scopeCommitTimeout: "10 millis",
+            }),
+            Component.withContext(runtime.context),
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("committed")
+        await waitFor(() => expect(releases).toHaveBeenCalledTimes(acquisitions.mock.calls.length - 1))
+        await new Promise(resolve => setTimeout(resolve, 30))
+
+        expect(HashMap.size(Effect.runSync(SubscriptionRef.get(scopeRegistry.ref)))).toBe(1)
+        expect(releases).toHaveBeenCalledTimes(acquisitions.mock.calls.length - 1)
+
+        view.unmount()
+        await waitFor(() => expect(releases).toHaveBeenCalledTimes(acquisitions.mock.calls.length))
+        await waitFor(() => expect(HashMap.size(Effect.runSync(SubscriptionRef.get(scopeRegistry.ref)))).toBe(0))
+        await runtime.runtime.dispose()
+    })
+
+    it("does not expire a scope while a descendant is suspended past the finalizer debounce", async () => {
+        const runtime = ReactRuntime.make(Layer.empty)
+        let resolve!: () => void
+        const pending = new Promise<void>(complete => {
+            resolve = complete
+        })
+
+        const Suspended = () => {
+            React.use(pending)
+            return <div>committed</div>
+        }
+
+        let view!: ReturnType<typeof render>
+        await act(async () => {
+            view = render(
+                <ReactRuntime.Provider runtime={runtime} fallback={<div>fallback</div>}>
+                    <Suspended />
+                </ReactRuntime.Provider>
+            )
+        })
+
+        try {
+            await screen.findByText("fallback")
+            await new Promise(resolve => setTimeout(resolve, 150))
+            await act(async () => {
+                resolve()
+                await pending
+            })
+            await screen.findByText("committed")
+        }
+        finally {
+            view.unmount()
+            await runtime.runtime.dispose()
+        }
+    })
+
+    it("clears ScopeRegistry after a suspended render retries, commits, and unmounts", async () => {
+        const lifecycle = vi.fn<(message: string) => void>()
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+        const scopeRegistry = Context.get(effectRuntime, ScopeRegistry.ScopeRegistry)
+        let resolve!: () => void
+        const pending = new Promise<void>(complete => {
+            resolve = complete
+        })
+
+        const Probe = Component.makeUntraced("RetriedSuspenseProbe")(function*() {
+            React.use(pending)
+            yield* Component.useReactEffect(() => Effect.gen(function*() {
+                yield* Effect.sync(() => lifecycle("mount"))
+                yield* Effect.addFinalizer(() => Effect.sync(() => lifecycle("cleanup")))
+            }), [])
+            return <div>committed</div>
+        }).pipe(
+            Component.withOptions({ scopeCommitTimeout: "10 millis" }),
+            Component.withContext(runtime.context)
+        )
+
+        let view!: ReturnType<typeof render>
+        await act(async () => {
+            view = render(
+                <React.Suspense fallback={<div>fallback</div>}>
+                    <runtime.context.Provider value={effectRuntime}>
+                        <Probe />
+                    </runtime.context.Provider>
+                </React.Suspense>
+            )
+        })
+
+        try {
+            await screen.findByText("fallback")
+            await act(async () => {
+                resolve()
+                await pending
+            })
+            await screen.findByText("committed")
+            await waitFor(() => expect(lifecycle).toHaveBeenCalledWith("mount"))
+
+            view.unmount()
+            await waitFor(() => expect(HashMap.size(Effect.runSync(SubscriptionRef.get(scopeRegistry.ref)))).toBe(0))
+            expect(lifecycle.mock.calls.filter(([message]) => message === "mount")).toHaveLength(2)
+            expect(lifecycle.mock.calls.filter(([message]) => message === "cleanup")).toHaveLength(2)
+        }
+        finally {
+            view.unmount()
+            await runtime.runtime.dispose()
+        }
+    })
+
+    it("refreshes a registered body while preserving or resetting local state", async () => {
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await runtime.runtime.context()
+
+        const makeProbe = (label: string) => Component.makeUntraced("RefreshProbe")(function*() {
+            const [count, setCount] = React.useState(0)
+            return <button type="button" onClick={() => setCount(value => value + 1)}>{label}:{count}</button>
+        })
+        const original = makeProbe("old")
+        const cell = Refreshable.makeCell(original, "hooks", false)
+        Refreshable.attach(original, cell)
+
+        const Probe = Component.withContext(original, runtime.context)
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        fireEvent.click(await screen.findByRole("button"))
+        expect(screen.getByRole("button").textContent).toBe("old:1")
+
+        await act(async () => {
+            cell.update(makeProbe("compatible"), "hooks", false)
+            await Promise.resolve()
+        })
+        expect(screen.getByRole("button").textContent).toBe("compatible:1")
+
+        await act(async () => {
+            cell.update(makeProbe("reset"), "changed-hooks", false)
+            await Promise.resolve()
+        })
+        expect(screen.getByRole("button").textContent).toBe("reset:0")
+
+        view.unmount()
+        await runtime.runtime.dispose()
+    })
+})
@@ -0,0 +1,276 @@
+import type { StandardSchemaV1 } from "@standard-schema/spec"
+import { Array, type Cause, Chunk, type Duration, Effect, Equal, Function, identity, Option, Pipeable, Predicate, type Scope, Stream, SubscriptionRef } from "effect"
+import type * as React from "react"
+import * as Component from "./Component.js"
+import * as Lens from "./Lens.js"
+import * as View from "./View.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[], out A, in out I = A, out ER = never, out EW = never>
+extends Pipeable.Pipeable {
+    readonly [FormTypeId]: FormTypeId
+
+    readonly path: P
+    readonly value: View.View<Option.Option<A>, ER, never>
+    readonly encodedValue: Lens.Lens<I, ER, EW, never, never>
+    readonly issues: View.View<readonly StandardSchemaV1.Issue[], never, never>
+    readonly isValidating: View.View<boolean, ER, never>
+    readonly canCommit: View.View<boolean, never, never>
+    readonly isCommitting: View.View<boolean, never, never>
+}
+
+export class FormImpl<out P extends readonly PropertyKey[], out A, in out I = A, out ER = never, out EW = never>
+extends Pipeable.Class implements Form<P, A, I, ER, EW> {
+    readonly [FormTypeId]: FormTypeId = FormTypeId
+
+    constructor(
+        readonly path: P,
+        readonly value: View.View<Option.Option<A>, ER, never>,
+        readonly encodedValue: Lens.Lens<I, ER, EW, never, never>,
+        readonly issues: View.View<readonly StandardSchemaV1.Issue[], never, never>,
+        readonly isValidating: View.View<boolean, never, never>,
+        readonly canCommit: View.View<boolean, never, never>,
+        readonly isCommitting: View.View<boolean, never, never>,
+    ) {
+        super()
+    }
+}
+
+export const isForm = (u: unknown): u is Form<readonly PropertyKey[], unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, FormTypeId)
+
+
+const filterIssuesByPath = (
+    issues: readonly StandardSchemaV1.Issue[],
+    path: readonly PropertyKey[],
+): readonly StandardSchemaV1.Issue[] => Array.filter(issues, issue => {
+    const issuePath = issue.path
+    if (!issuePath) return false
+    return issuePath.length >= path.length && Array.every(path, (p, i) => p === issuePath[i])
+})
+
+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,
+        View.mapOption(form.value, a => a[key]),
+        Lens.focusObjectOn(form.encodedValue, key),
+        View.map(form.issues, issues => filterIssuesByPath(issues, path)),
+        form.isValidating,
+        form.canCommit,
+        form.isCommitting,
+    )
+})
+
+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.NoSuchElementError, EW | Cause.NoSuchElementError>
+    <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.NoSuchElementError, EW | Cause.NoSuchElementError>
+} = 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.NoSuchElementError, EW | Cause.NoSuchElementError> => {
+    const form = self as FormImpl<P, A, I, ER, EW>
+    const path = [...form.path, index] as const
+
+    return new FormImpl(
+        path,
+        View.mapOptionEffect(form.value, value => Effect.fromOption(Array.get(value, index))),
+        Lens.focusArrayAt(form.encodedValue, index),
+        View.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,
+        View.mapOption(form.value, Array.getUnsafe(index)),
+        Lens.focusTupleAt(form.encodedValue, index),
+        View.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.NoSuchElementError, 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.NoSuchElementError, 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.NoSuchElementError, 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,
+        View.mapOptionEffect(form.value, value => Effect.fromOption(Chunk.get(value, index))),
+        Lens.focusChunkAt(form.encodedValue, index),
+        View.map(form.issues, issues => filterIssuesByPath(issues, path)),
+        form.isValidating,
+        form.canCommit,
+        form.isCommitting,
+    )
+})
+
+
+export namespace useInput {
+    export interface Options {
+        readonly debounce?: Duration.Input
+    }
+
+    export interface Success<T> {
+        readonly value: T
+        readonly setValue: React.Dispatch<React.SetStateAction<T>>
+    }
+}
+
+export const useInput = Effect.fnUntraced(function* <P extends readonly PropertyKey[], A, I, ER, EW>(
+    form: Form<P, A, I, ER, EW>,
+    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([
+            Stream.runForEach(
+                Stream.drop(Lens.changes(form.encodedValue), 1),
+                upstreamEncodedValue => Effect.when(
+                    Lens.set(internalValueLens, upstreamEncodedValue),
+                    Effect.map(Lens.get(internalValueLens), internalValue => !Equal.equals(upstreamEncodedValue, internalValue)),
+                ),
+            ),
+
+            Stream.runForEach(
+                Lens.changes(internalValueLens).pipe(
+                    Stream.drop(1),
+                    Stream.changesWith(Equal.asEquivalence()),
+                    options?.debounce ? Stream.debounce(options.debounce) : identity,
+                ),
+                internalValue => Lens.set(form.encodedValue, internalValue),
+            ),
+        ], { concurrency: "unbounded", discard: true }))
+
+        return internalValueLens
+    }), [form, options?.debounce])
+
+    const [value, setValue] = yield* Lens.useState(internalValueLens)
+    return { value, setValue }
+})
+
+export namespace useOptionalInput {
+    export interface Options<T> extends useInput.Options {
+        readonly defaultValue: T
+    }
+
+    export interface Success<T> extends useInput.Success<T> {
+        readonly enabled: boolean
+        readonly setEnabled: React.Dispatch<React.SetStateAction<boolean>>
+    }
+}
+
+export const useOptionalInput = Effect.fnUntraced(function* <P extends readonly PropertyKey[], A, I, ER, EW>(
+    field: Form<P, A, Option.Option<I>, ER, EW>,
+    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),
+            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),
+                ]),
+            }),
+        )
+
+        yield* Effect.forkScoped(Effect.all([
+            Stream.runForEach(
+                Stream.drop(Lens.changes(field.encodedValue), 1),
+
+                upstreamEncodedValue => Effect.when(
+                    Option.match(upstreamEncodedValue, {
+                        onSome: v => Effect.andThen(
+                            Lens.set(enabledLens, true),
+                            Lens.set(internalValueLens, v),
+                        ),
+                        onNone: () => Effect.andThen(
+                            Lens.set(enabledLens, false),
+                            Lens.set(internalValueLens, options.defaultValue),
+                        ),
+                    }),
+
+                    Effect.map(
+                        Effect.all([Lens.get(enabledLens), Lens.get(internalValueLens)]),
+                        ([enabled, internalValue]) => !Equal.equals(upstreamEncodedValue, enabled ? Option.some(internalValue) : Option.none()),
+                    ),
+                ),
+            ),
+
+            Stream.runForEach(
+                Lens.changes(enabledLens).pipe(
+                    Stream.zipLatest(internalValueLens.changes),
+                    Stream.drop(1),
+                    Stream.changesWith(Equal.asEquivalence()),
+                    options?.debounce ? Stream.debounce(options.debounce) : identity,
+                ),
+                ([enabled, internalValue]) => Lens.set(field.encodedValue, enabled ? Option.some(internalValue) : Option.none()),
+            ),
+        ], { concurrency: "unbounded" }))
+
+        return [enabledLens, internalValueLens] as const
+    }), [field, options.debounce])
+
+    const [enabled, setEnabled] = yield* Lens.useState(enabledLens)
+    const [value, setValue] = yield* Lens.useState(internalValueLens)
+    return { enabled, setEnabled, value, setValue }
+})
@@ -0,0 +1,171 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { Effect, Layer, SubscriptionRef } from "effect"
+import * as React from "react"
+import { describe, expect, it } from "vitest"
+import * as Component from "./Component.js"
+import * as Lens from "./Lens.js"
+import * as ReactRuntime from "./ReactRuntime.js"
+
+
+const makeRuntime = async () => {
+    const runtime = ReactRuntime.make(Layer.empty)
+    const effectRuntime = await runtime.runtime.context()
+
+    return {
+        runtime,
+        effectRuntime,
+        dispose: () => runtime.runtime.dispose(),
+    }
+}
+
+const expectDefined = <A,>(value: A | undefined): A => {
+    if (value === undefined)
+        throw new Error("Expected value to be defined")
+    return value
+}
+
+describe("Lens", () => {
+    it("useState stays in sync with lens updates in both directions", async () => {
+        const { runtime, effectRuntime, dispose } = await makeRuntime()
+        const ref = await Effect.runPromise(SubscriptionRef.make(0))
+        const lens = Lens.fromSubscriptionRef(ref)
+
+        const Probe = Component.makeUntraced("LensUseStateProbe")(function*() {
+            const [value, setValue] = yield* Lens.useState(lens)
+
+            return (
+                <>
+                    <div>{value}</div>
+                    <button type="button" onClick={() => setValue(previous => previous + 1)}>increment</button>
+                </>
+            )
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("0")
+
+        await Effect.runPromise(Lens.set(lens, 5))
+        await screen.findByText("5")
+
+        fireEvent.click(screen.getByRole("button", { name: "increment" }))
+        await screen.findByText("6")
+        expect(await Effect.runPromise(Lens.get(lens))).toBe(6)
+
+        view.unmount()
+        await dispose()
+    })
+
+    it("useState respects the provided equivalence when subscribing to lens changes", async () => {
+        const { runtime, effectRuntime, dispose } = await makeRuntime()
+        const ref = await Effect.runPromise(SubscriptionRef.make({ id: 1, label: "first" }))
+        const lens = Lens.fromSubscriptionRef(ref)
+
+        const Probe = Component.makeUntraced("LensUseStateEquivalenceProbe")(function*() {
+            const [value] = yield* Lens.useState(lens, {
+                equivalence: (self, that) => self.id === that.id,
+            })
+
+            return <div>{value.label}</div>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("first")
+
+        await Effect.runPromise(Lens.set(lens, { id: 1, label: "ignored" }))
+        await waitFor(() => expect(screen.getByText("first")).toBeTruthy())
+        expect(screen.queryByText("ignored")).toBeNull()
+
+        await Effect.runPromise(Lens.set(lens, { id: 2, label: "updated" }))
+        await screen.findByText("updated")
+
+        view.unmount()
+        await dispose()
+    })
+
+    it("useFromReactState writes React state changes into the returned lens", async () => {
+        const { runtime, effectRuntime, dispose } = await makeRuntime()
+        let lens: Lens.Lens<string, never, never, never, never> | undefined
+
+        const Probe = Component.makeUntraced("LensUseFromReactStateProbe")(function*() {
+            const [value, setValue] = React.useState("hello")
+            const reactLens = yield* Lens.useFromReactState([value, setValue])
+
+            yield* Component.useOnMount(() => Effect.sync(() => {
+                lens = reactLens
+            }))
+
+            return <button type="button" onClick={() => setValue(previous => `${previous}!`)}>{value}</button>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("hello")
+        await waitFor(() => expect(lens).toBeDefined())
+
+        fireEvent.click(screen.getByRole("button", { name: "hello" }))
+        await screen.findByText("hello!")
+        await waitFor(async () => expect(await Effect.runPromise(Lens.get(expectDefined(lens)))).toBe("hello!"))
+
+        view.unmount()
+        await dispose()
+    })
+
+    it("useFromReactState respects equivalence when lens updates flow back into React state", async () => {
+        const { runtime, effectRuntime, dispose } = await makeRuntime()
+        let lens: Lens.Lens<{ readonly id: number; readonly label: string }, never, never, never, never> | undefined
+
+        const Probe = Component.makeUntraced("LensUseFromReactStateEquivalenceProbe")(function*() {
+            const [value, setValue] = React.useState({ id: 1, label: "first" })
+            const reactLens = yield* Lens.useFromReactState([value, setValue], {
+                equivalence: (self, that) => self.id === that.id,
+            })
+
+            yield* Component.useOnMount(() => Effect.sync(() => {
+                lens = reactLens
+            }))
+
+            return <div>{value.label}</div>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("first")
+        await waitFor(() => expect(lens).toBeDefined())
+
+        await Effect.runPromise(Lens.set(expectDefined(lens), { id: 1, label: "ignored" }))
+        await waitFor(() => expect(screen.getByText("first")).toBeTruthy())
+        expect(screen.queryByText("ignored")).toBeNull()
+
+        await Effect.runPromise(Lens.set(expectDefined(lens), { id: 2, label: "updated" }))
+        await screen.findByText("updated")
+
+        view.unmount()
+        await dispose()
+    })
+})
@@ -0,0 +1,62 @@
+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"
+
+
+export * from "effect-lens/Lens"
+
+export declare namespace useState {
+    export interface Options<A> {
+        readonly equivalence?: Equivalence.Equivalence<A>
+    }
+}
+
+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 | EW, 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.strictEqual()),
+            v => Effect.sync(() => setReactStateValue(v)),
+        )
+    ), [lens])
+
+    const setValue = yield* Component.useCallbackSync(
+        (setStateAction: React.SetStateAction<A>) => Effect.tap(
+            Lens.updateAndGet(lens, prevState => SetStateAction.value(setStateAction, prevState)),
+            v => Effect.sync(() => setReactStateValue(v)),
+        ),
+        [lens],
+    )
+
+    return [reactStateValue, setValue]
+})
+
+export declare namespace useFromReactState {
+    export interface Options<A> {
+        readonly equivalence?: Equivalence.Equivalence<A>
+    }
+}
+
+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,
+    ))
+
+    yield* Component.useReactEffect(() => Effect.forkScoped(Stream.runForEach(
+        Stream.changesWith(lens.changes, options?.equivalence ?? Equivalence.strictEqual()),
+        v => Effect.sync(() => setValue(v)),
+    )), [setValue])
+    yield* Component.useReactEffect(() => Lens.set(lens, value), [value])
+
+    return lens
+})
@@ -0,0 +1,206 @@
+import type { StandardSchemaV1 } from "@standard-schema/spec"
+import { Array, type Context, Effect, Equal, Fiber, Option, Pipeable, Predicate, Schema, SchemaIssue, type Scope, Semaphore, Stream, SubscriptionRef } from "effect"
+import * as Form from "./Form.js"
+import * as Lens from "./Lens.js"
+import * as View from "./View.js"
+
+
+export const LensFormTypeId: unique symbol = Symbol.for("@effect-fc/Form/LensForm")
+export type LensFormTypeId = typeof LensFormTypeId
+
+export interface LensForm<in out A, in out I = A, in out RD = never, in out RE = never, out TER = never, out TEW = never, in out TRR = never, in out TRW = never>
+extends Form.Form<readonly [], A, I, TER, TER | TEW> {
+    readonly [LensFormTypeId]: LensFormTypeId
+
+    readonly schema: Schema.ConstraintCodec<A, I, RD, RE>
+    readonly context: Context.Context<Scope.Scope | RD | RE | TRR | TRW>
+    readonly target: Lens.Lens<A, TER, TEW, TRR, TRW>
+    readonly validationFiber: View.View<Option.Option<Fiber.Fiber<A, Schema.SchemaError>>, never, never>
+
+    readonly run: Effect.Effect<void, TER>
+}
+
+export class LensFormImpl<in out A, in out I = A, in out RD = never, in out RE = never, out TER = never, out TEW = never, in out TRR = never, in out TRW = never>
+extends Pipeable.Class implements LensForm<A, I, RD, RE, TER, TEW, TRR, TRW> {
+    readonly [Form.FormTypeId]: Form.FormTypeId = Form.FormTypeId
+    readonly [LensFormTypeId]: LensFormTypeId = LensFormTypeId
+
+    readonly path = [] as const
+
+    readonly value: View.View<Option.Option<A>, never, never>
+    readonly encodedValue: Lens.Lens<I, TER, TER | TEW, never, never>
+    readonly isValidating: View.View<boolean, never, never>
+    readonly canCommit: View.View<boolean, never, never>
+
+    constructor(
+        readonly schema: Schema.ConstraintCodec<A, I, RD, RE>,
+        readonly context: Context.Context<Scope.Scope | RD | RE | TRR | TRW>,
+        readonly target: Lens.Lens<A, TER, TEW, TRR, TRW>,
+
+        readonly internalEncodedValue: Lens.Lens<I, never, never, never, never>,
+        readonly issues: Lens.Lens<readonly StandardSchemaV1.Issue[], never, never, never, never>,
+        readonly validationFiber: Lens.Lens<Option.Option<Fiber.Fiber<A, Schema.SchemaError>>, never, never, never, never>,
+        readonly isCommitting: Lens.Lens<boolean, never, never>,
+
+        readonly runSemaphore: Semaphore.Semaphore,
+    ) {
+        super()
+
+        this.value = Effect.succeed(this).pipe(
+            Effect.map(self => View.make({
+                get: Effect.provide(Effect.option(self.target.get), self.context),
+                get changes() {
+                    return Stream.provideContext(
+                        self.target.changes.pipe(
+                            Stream.map(Option.some),
+                            Stream.catch(() => Stream.make(Option.none())),
+                        ),
+                        self.context,
+                    )
+                },
+            })),
+            View.unwrap,
+        )
+        this.encodedValue = Effect.all([
+            Effect.succeed(this),
+            Effect.succeed(Lens.asLensImpl(this.internalEncodedValue)),
+        ]).pipe(
+            Effect.map(([self, parent]) => Lens.make({
+                get: parent.get,
+                get changes() { return parent.changes },
+                commit: a => Effect.andThen(
+                    Effect.flatMap(
+                        parent.resolve,
+                        resolved => resolved.commit(Effect.succeed(a)),
+                    ),
+                    self.synchronizeEncodedValue(a),
+                ),
+                lock: parent.lock,
+            })),
+            Lens.unwrap,
+        )
+        this.isValidating = Effect.succeed(this).pipe(
+            Effect.map(self => View.map(self.validationFiber, Option.isSome)),
+            View.unwrap,
+        )
+        this.canCommit = Effect.succeed(this).pipe(
+            Effect.map(self => View.map(
+                View.zipLatestAll(self.issues, self.validationFiber, self.isCommitting),
+                ([issues, validationFiber, isCommitting]) => (
+                    Array.isReadonlyArrayEmpty(issues) &&
+                    Option.isNone(validationFiber) &&
+                    !isCommitting
+                ),
+            )),
+            View.unwrap,
+        )
+    }
+
+    synchronizeEncodedValue(encodedValue: I): Effect.Effect<void, TER | TEW, never> {
+        return Lens.get(this.validationFiber).pipe(
+            Effect.andThen(Option.match({
+                onSome: Fiber.interrupt,
+                onNone: () => Effect.void,
+            })),
+            Effect.andThen(Effect.forkScoped(
+                Effect.ensuring(
+                    Schema.decodeEffect(this.schema, { errors: "all" })(encodedValue),
+                    Lens.set(this.validationFiber, Option.none()),
+                )
+            )),
+            Effect.tap(fiber => Lens.set(this.validationFiber, Option.some(fiber))),
+            Effect.flatMap(Fiber.join),
+
+            Effect.flatMap(value => Effect.ensuring(
+                Lens.set(this.isCommitting, true).pipe(
+                    Effect.andThen(Lens.set(this.issues, Array.empty())),
+                    Effect.andThen(Lens.set(this.target, value)),
+                ),
+                Lens.set(this.isCommitting, false),
+            )),
+            Effect.catchIf(
+                Schema.isSchemaError,
+                error => Lens.set(this.issues, SchemaIssue.makeFormatterStandardSchemaV1()(error.issue).issues),
+            ),
+
+            Effect.provide(this.context),
+        )
+    }
+
+    get run(): Effect.Effect<void, TER, never> {
+        return this.runSemaphore.withPermits(1)(Effect.provide(
+            Stream.runForEach(
+                Stream.drop(Lens.changes(this.target), 1),
+                targetValue => Schema.encodeEffect(this.schema, { errors: "all" })(targetValue).pipe(
+                    Effect.flatMap(encodedValue => Effect.when(
+                        Effect.andThen(
+                            Lens.set(this.issues, Array.empty()),
+                            Lens.set(this.internalEncodedValue, encodedValue),
+                        ),
+                        Effect.map(
+                            Lens.get(this.internalEncodedValue),
+                            currentEncodedValue => !Equal.equals(encodedValue, currentEncodedValue),
+                        ),
+                    )),
+                    Effect.ignore,
+                ),
+            ),
+            this.context,
+        ))
+    }
+}
+
+export const isLensForm = (u: unknown): u is LensForm<unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, LensFormTypeId)
+
+
+export declare namespace make {
+    export interface Options<in out A, out I = A, out RD = never, out RE = never, out TER = never, out TEW = never, out TRR = never, out TRW = never> {
+        readonly schema: Schema.ConstraintCodec<A, I, RD, RE>
+        readonly target: Lens.Lens<A, TER, TEW, TRR, TRW>
+        readonly initialEncodedValue?: NoInfer<I>
+    }
+}
+
+export const make = Effect.fnUntraced(function* <A, I = A, RD = never, RE = never, TER = never, TEW = never, TRR = never, TRW = never>(
+    options: make.Options<A, I, RD, RE, TER, TEW, TRR, TRW>
+): Effect.fn.Return<
+    LensForm<A, I, RD, RE, TER, TEW, TRR, TRW>,
+    Schema.SchemaError | TER,
+    Scope.Scope | RD | RE | TRR | TRW
+> {
+    const initialEncodedValue = options.initialEncodedValue !== undefined
+        ? options.initialEncodedValue
+        : yield* Effect.flatMap(
+            Lens.get(options.target),
+            Schema.encodeEffect(options.schema),
+        )
+
+    return new LensFormImpl(
+        options.schema,
+        yield* Effect.context<Scope.Scope | RD | RE | TRR | TRW>(),
+        options.target,
+
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(initialEncodedValue)),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make<readonly StandardSchemaV1.Issue[]>(Array.empty())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, Schema.SchemaError>>())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(false)),
+
+        yield* Semaphore.make(1),
+    )
+})
+
+export declare namespace service {
+    export interface Options<in out A, out I = A, out RD = never, out RE = never, out TER = never, out TEW = never, out TRR = never, out TRW = never>
+    extends make.Options<A, I, RD, RE, TER, TEW, TRR, TRW> {}
+}
+
+export const service = <A, I = A, RD = never, RE = never, TER = never, TEW = never, TRR = never, TRW = never>(
+    options: service.Options<A, I, RD, RE, TER, TEW, TRR, TRW>
+): Effect.Effect<
+    LensForm<A, I, RD, RE, TER, TEW, TRR, TRW>,
+    Schema.SchemaError | TER,
+    Scope.Scope | RD | RE | TRR | TRW
+> => Effect.tap(
+    make(options),
+    form => Effect.forkScoped(form.run),
+)
@@ -0,0 +1,112 @@
+/** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
+import { type Equivalence, Function, Predicate } from "effect"
+import * as React from "react"
+import type * as Component from "./Component.js"
+
+
+export const MemoizedTypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
+export type MemoizedTypeId = typeof MemoizedTypeId
+
+
+/**
+ * A trait for `Component`'s that uses `React.memo` to optimize re-renders based on prop equality.
+ *
+ * @template P The props type of the component
+ */
+export interface Memoized<P> extends MemoizedPrototype, MemoizedOptions<P> {}
+
+export interface MemoizedPrototype {
+    readonly [MemoizedTypeId]: MemoizedTypeId
+}
+
+/**
+ * Configuration options for Memoized components.
+ *
+ * @template P The props type of the component
+ */
+export interface MemoizedOptions<P> {
+    /**
+     * An optional equivalence function for comparing component props.
+     * If provided, this function is used by React.memo to determine if props have changed.
+     * Returns `true` if props are equivalent (no re-render), `false` if they differ (re-render).
+     */
+    readonly propsEquivalence?: Equivalence.Equivalence<P>
+}
+
+
+export const MemoizedPrototype: MemoizedPrototype = Object.freeze({
+    [MemoizedTypeId]: MemoizedTypeId,
+
+    transformFunctionComponent<P extends {}>(
+        this: Memoized<P>,
+        f: React.FC<P>,
+    ) {
+        return React.memo(f, this.propsEquivalence)
+    },
+} as const)
+
+
+export const isMemoized = (u: unknown): u is Memoized<unknown> => Predicate.hasProperty(u, MemoizedTypeId)
+
+/**
+ * Converts a Component into a `Memoized` component that optimizes re-renders using `React.memo`.
+ *
+ * @param self - The component to convert to a Memoized component
+ * @returns A new `Memoized` component with the same body, error, and context types as the input
+ *
+ * @example
+ * ```ts
+ * const MyMemoizedComponent = MyComponent.pipe(
+ *   Memoized.memoized,
+ * )
+ * ```
+ */
+export const memoized = <T extends Component.Component.Any>(
+    self: T
+): T & Memoized<Component.Component.Props<T>> => Object.setPrototypeOf(
+    Object.assign(function() {}, self),
+    Object.freeze(Object.setPrototypeOf(
+        Object.assign({}, MemoizedPrototype),
+        Object.getPrototypeOf(self),
+    )),
+)
+
+/**
+ * Applies options to a Memoized component, returning a new Memoized component with the updated configuration.
+ *
+ * Supports both curried and uncurried application styles.
+ *
+ * @param self - The Memoized component to apply options to (in uncurried form)
+ * @param options - The options to apply to the component
+ * @returns A Memoized component with the applied options
+ *
+ * @example
+ * ```ts
+ * // Curried
+ * const MyMemoizedComponent = MyComponent.pipe(
+ *   Memoized.memoized,
+ *   Memoized.withOptions({ propsEquivalence: (a, b) => a.id === b.id }),
+ * )
+ *
+ * // Uncurried
+ * const MyMemoizedComponent = Memoized.withOptions(
+ *   Memoized.memoized(MyComponent),
+ *   { propsEquivalence: (a, b) => a.id === b.id },
+ * )
+ * ```
+ */
+export const withOptions: {
+    <T extends Component.Component.Any & Memoized<any>>(
+        options: Partial<MemoizedOptions<Component.Component.Props<T>>>
+    ): (self: T) => T
+    <T extends Component.Component.Any & Memoized<any>>(
+        self: T,
+        options: Partial<MemoizedOptions<Component.Component.Props<T>>>,
+    ): T
+} = Function.dual(2, <T extends Component.Component.Any & Memoized<any>>(
+    self: T,
+    options: Partial<MemoizedOptions<Component.Component.Props<T>>>,
+): T => Object.setPrototypeOf(
+    Object.assign(function() {}, self, options),
+    Object.getPrototypeOf(self),
+))
@@ -0,0 +1,153 @@
+import { type Context, Effect, Equal, Exit, type Fiber, Option, Pipeable, Predicate, type Scope, Stream, SubscriptionRef } from "effect"
+import { AsyncResult } from "effect/unstable/reactivity"
+import * as Lens from "./Lens.js"
+import * as View from "./View.js"
+
+
+export const MutationTypeId: unique symbol = Symbol.for("@effect-fc/Mutation/Mutation")
+export type MutationTypeId = typeof MutationTypeId
+
+export interface Mutation<in out K, out A, out E = never, in out R = never>
+extends Pipeable.Pipeable {
+    readonly [MutationTypeId]: MutationTypeId
+
+    readonly context: Context.Context<Scope.Scope | R>
+    readonly f: (key: K) => Effect.Effect<A, E, R>
+
+    readonly latestKey: View.View<Option.Option<K>>
+    readonly fiber: View.View<Option.Option<Fiber.Fiber<A, E>>>
+    readonly state: View.View<AsyncResult.AsyncResult<A, E>>
+    readonly latestFinalResult: View.View<Option.Option<AsyncResult.Success<A, E> | AsyncResult.Failure<A, E>>>
+
+    mutate(key: K): Effect.Effect<AsyncResult.Success<A, E> | AsyncResult.Failure<A, E>>
+    mutateView(key: K): Effect.Effect<View.View<AsyncResult.AsyncResult<A, E>>>
+}
+
+export const isMutation = (u: unknown): u is Mutation<unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, MutationTypeId)
+
+
+export class MutationImpl<in out K, in out A, in out E = never, in out R = never>
+extends Pipeable.Class implements Mutation<K, A, E, R> {
+    readonly [MutationTypeId]: MutationTypeId = MutationTypeId
+
+    constructor(
+        readonly context: Context.Context<Scope.Scope | R>,
+        readonly f: (key: K) => Effect.Effect<A, E, R>,
+
+        readonly latestKey: Lens.Lens<Option.Option<K>>,
+        readonly fiber: Lens.Lens<Option.Option<Fiber.Fiber<A, E>>>,
+        readonly state: Lens.Lens<AsyncResult.AsyncResult<A, E>>,
+        readonly latestFinalResult: Lens.Lens<Option.Option<AsyncResult.Success<A, E> | AsyncResult.Failure<A, E>>>,
+    ) {
+        super()
+    }
+
+    mutate(key: K): Effect.Effect<AsyncResult.Success<A, E> | AsyncResult.Failure<A, E>> {
+        return Lens.set(this.latestKey, Option.some(key)).pipe(
+            Effect.andThen(this.start(key)),
+            Effect.flatMap(state => this.watch(state)),
+            Effect.provide(this.context),
+        )
+    }
+    mutateView(key: K): Effect.Effect<View.View<AsyncResult.AsyncResult<A, E>>> {
+        return Lens.set(this.latestKey, Option.some(key)).pipe(
+            Effect.andThen(this.start(key)),
+            Effect.tap(state => Effect.forkScoped(this.watch(state))),
+            Effect.provide(this.context),
+        )
+    }
+
+    start(key: K): Effect.Effect<
+        View.View<AsyncResult.AsyncResult<A, E>>,
+        never,
+        Scope.Scope | R
+    > {
+        return Effect.gen({ self: this }, function*() {
+            const previous = yield* Lens.get(this.latestFinalResult)
+            const state = Lens.fromSubscriptionRef(yield* SubscriptionRef.make<AsyncResult.AsyncResult<A, E>>(
+                Option.getOrElse(previous, () => AsyncResult.initial(false))
+            ))
+
+            const fiber = yield* Effect.forkScoped(Effect.andThen(
+                Lens.update(state, AsyncResult.match({
+                    onInitial: () => AsyncResult.initial(true),
+                    onSuccess: v => AsyncResult.success(v.value, {
+                        waiting: true,
+                    }),
+                    onFailure: v => AsyncResult.failure(v.cause, {
+                        waiting: true,
+                        previousSuccess: v.previousSuccess,
+                    })
+                })),
+
+                Effect.onExit(this.f(key), exit => Lens.update(
+                    state,
+                    previous => Exit.match(exit, {
+                        onSuccess: v => AsyncResult.success(v),
+                        onFailure: c => AsyncResult.match(previous, {
+                            onInitial: () => AsyncResult.failure(c),
+                            onSuccess: v => AsyncResult.failure(c, {
+                                previousSuccess: Option.some(v),
+                            }),
+                            onFailure: v => AsyncResult.failure(c, {
+                                previousSuccess: v.previousSuccess,
+                            })
+                        }),
+                    }),
+                ).pipe(
+                    Effect.andThen(Effect.all([
+                        Effect.fiberId,
+                        Lens.get(this.fiber),
+                    ])),
+                    Effect.flatMap(([fiberId, fiber]) => Option.match(fiber, {
+                        onSome: v => Equal.equals(fiberId, v.id)
+                            ? Lens.set(this.fiber, Option.none())
+                            : Effect.void,
+                        onNone: () => Effect.void,
+                    })),
+                )),
+            ))
+
+            yield* Lens.set(this.fiber, Option.some(fiber))
+            return state
+        })
+    }
+
+    watch(
+        state: View.View<AsyncResult.AsyncResult<A, E>>
+    ): Effect.Effect<AsyncResult.Success<A, E> | AsyncResult.Failure<A, E>> {
+        return View.get(state).pipe(
+            Effect.andThen(initial => Stream.runFoldEffect(
+                View.changes(state),
+                () => initial,
+                (_, result) => Effect.as(Lens.set(this.state, result), result),
+            ) as Effect.Effect<AsyncResult.Success<A, E> | AsyncResult.Failure<A, E>>),
+            Effect.tap(result => Lens.set(this.latestFinalResult, Option.some(result))),
+        )
+    }
+}
+
+
+export declare namespace make {
+    export interface Options<K = never, A = void, E = never, R = never> {
+        readonly f: (key: K) => Effect.Effect<A, E, R>
+    }
+}
+
+export const make = Effect.fnUntraced(function* <K = never, A = void, E = never, R = never>(
+    options: make.Options<K, A, E, R>
+): Effect.fn.Return<
+    Mutation<K, A, E, R>,
+    never,
+    Scope.Scope | R
+> {
+    return new MutationImpl(
+        yield* Effect.context<Scope.Scope | R>(),
+        options.f,
+
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<K>())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, E>>())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make<AsyncResult.AsyncResult<A, E>>(AsyncResult.initial())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<AsyncResult.Success<A, E> | AsyncResult.Failure<A, E>>())),
+    )
+})
@@ -0,0 +1,213 @@
+import type { StandardSchemaV1 } from "@standard-schema/spec"
+import { Array, Cause, type Context, Effect, Fiber, Option, Pipeable, Predicate, Schema, SchemaError, SchemaIssue, type Scope, Semaphore, SubscriptionRef } from "effect"
+import { AsyncResult } from "effect/unstable/reactivity"
+import * as Form from "./Form.js"
+import * as Lens from "./Lens.js"
+import * as Mutation from "./Mutation.js"
+import * as View from "./View.js"
+
+
+export const MutationFormTypeId: unique symbol = Symbol.for("@effect-fc/Form/MutationForm")
+export type MutationFormTypeId = typeof MutationFormTypeId
+
+export interface MutationForm<in out A, in out I = A, in out RD = never, in out RE = never, out MA = void, out ME = never, in out MR = never>
+extends Form.Form<readonly [], A, I, never, never> {
+    readonly [MutationFormTypeId]: MutationFormTypeId
+
+    readonly schema: Schema.ConstraintCodec<A, I, RD, RE>
+    readonly context: Context.Context<Scope.Scope | RD | RE>
+    readonly mutation: Mutation.Mutation<
+        readonly [value: A, form: MutationForm<A, I, RD, RE, unknown, unknown, unknown>],
+        MA, ME, MR
+    >
+    readonly validationFiber: View.View<Option.Option<Fiber.Fiber<A, Schema.SchemaError>>, never, never>
+
+    readonly run: Effect.Effect<void>
+    readonly submit: Effect.Effect<Option.Option<AsyncResult.Success<MA, ME> | AsyncResult.Failure<MA, ME>>, Cause.NoSuchElementError>
+}
+
+export class MutationFormImpl<in out A, in out I = A, in out RD = never, in out RE = never, out MA = void, out ME = never, in out MR = never>
+extends Pipeable.Class implements MutationForm<A, I, RD, RE, MA, ME, MR> {
+    readonly [Form.FormTypeId]: Form.FormTypeId = Form.FormTypeId
+    readonly [MutationFormTypeId]: MutationFormTypeId = MutationFormTypeId
+
+    readonly path = [] as const
+
+    readonly encodedValue: Lens.Lens<I, never, never, never, never>
+    readonly isValidating: View.View<boolean, never, never>
+    readonly canCommit: View.View<boolean, never, never>
+    readonly isCommitting: View.View<boolean, never, never>
+
+    constructor(
+        readonly schema: Schema.ConstraintCodec<A, I, RD, RE>,
+        readonly context: Context.Context<Scope.Scope | RD | RE>,
+        readonly mutation: Mutation.Mutation<
+            readonly [value: A, form: MutationForm<A, I, RD, RE, unknown, unknown, unknown>],
+            MA, ME, MR
+        >,
+        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 StandardSchemaV1.Issue[], never, never, never, never>,
+        readonly validationFiber: Lens.Lens<Option.Option<Fiber.Fiber<A, Schema.SchemaError>>, never, never, never, never>,
+
+        readonly runSemaphore: Semaphore.Semaphore,
+    ) {
+        super()
+
+        this.encodedValue = Effect.all([
+            Effect.succeed(this),
+            Effect.succeed(Lens.asLensImpl(this.internalEncodedValue)),
+        ]).pipe(
+            Effect.map(([self, parent]) => Lens.make({
+                get: parent.get,
+                get changes() { return parent.changes },
+                commit: a => Effect.andThen(
+                    Effect.flatMap(
+                        parent.resolve,
+                        resolved => resolved.commit(Effect.succeed(a)),
+                    ),
+                    self.synchronizeEncodedValue(a),
+                ),
+                lock: parent.lock,
+            })),
+            Lens.unwrap,
+        )
+        this.isValidating = Effect.succeed(this).pipe(
+            Effect.map(self => View.map(self.validationFiber, Option.isSome)),
+            View.unwrap,
+        )
+        this.canCommit = Effect.succeed(this).pipe(
+            Effect.map(self => View.map(
+                View.zipLatestAll(self.value, self.issues, self.validationFiber, self.mutation.state),
+                ([value, issues, validationFiber, result]) => (
+                    Option.isSome(value) &&
+                    Array.isReadonlyArrayEmpty(issues) &&
+                    Option.isNone(validationFiber) &&
+                    !AsyncResult.isWaiting(result)
+                ),
+            )),
+            View.unwrap,
+        )
+        this.isCommitting = Effect.succeed(this).pipe(
+            Effect.map(self => View.map(self.mutation.state, AsyncResult.isWaiting)),
+            View.unwrap,
+        )
+    }
+
+    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.ensuring(
+                    Schema.decodeEffect(this.schema, { errors: "all" })(encodedValue),
+                    Lens.set(this.validationFiber, Option.none()),
+                )
+            )),
+            Effect.tap(fiber => Lens.set(this.validationFiber, Option.some(fiber))),
+            Effect.flatMap(Fiber.join),
+
+            Effect.tap(() => Lens.set(this.issues, Array.empty())),
+            Effect.flatMap(value => Lens.set(this.value, Option.some(value))),
+            Effect.catchIf(
+                SchemaError.isSchemaError,
+                error => Lens.set(this.issues, SchemaIssue.makeFormatterStandardSchemaV1()(error.issue).issues),
+            ),
+
+            Effect.provide(this.context),
+        )
+    }
+
+    get run(): Effect.Effect<void, never, never> {
+        return Lens.get(this.encodedValue).pipe(
+            Effect.flatMap(v => Schema.decodeEffect(this.schema)(v)),
+            Effect.option,
+            Effect.flatMap(v => Lens.set(this.value, v)),
+            Effect.provide(this.context),
+            this.runSemaphore.withPermits(1),
+        )
+    }
+
+    get submit(): Effect.Effect<Option.Option<AsyncResult.Success<MA, ME> | AsyncResult.Failure<MA, ME>>, Cause.NoSuchElementError, never> {
+        return Lens.get(this.value).pipe(
+            Effect.flatMap(Effect.fromOption),
+            Effect.flatMap(value => this.submitValue(value)),
+        )
+    }
+
+    submitValue(value: A): Effect.Effect<Option.Option<AsyncResult.Success<MA, ME> | AsyncResult.Failure<MA, ME>>, never, never> {
+        return Effect.when(
+            Effect.tap(
+                this.mutation.mutate([value, this as any]),
+                result => AsyncResult.isFailure(result)
+                    ? Option.match(
+                        Array.findFirst(
+                            result.cause.reasons,
+                            reason => Cause.isFailReason(reason) && SchemaError.isSchemaError(reason.error)
+                                ? Option.some(reason.error)
+                                : Option.none(),
+                        ),
+                        {
+                            onSome: error => Lens.set(this.issues, SchemaIssue.makeFormatterStandardSchemaV1()(error.issue).issues),
+                            onNone: () => Effect.void,
+                        },
+                    )
+                    : Effect.void,
+            ),
+            View.get(this.canCommit),
+        )
+    }
+}
+
+export const isMutationForm = (u: unknown): u is MutationForm<unknown, unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, MutationFormTypeId)
+
+
+export declare namespace make {
+    export interface Options<in out A, in out I = A, in out RD = never, in out RE = never, out MA = void, out ME = never, out MR = never>
+    extends Mutation.make.Options<
+        readonly [value: NoInfer<A>, form: MutationForm<NoInfer<A>, NoInfer<I>, NoInfer<RD>, NoInfer<RE>, unknown, unknown, unknown>],
+        MA, ME, MR
+    > {
+        readonly schema: Schema.ConstraintCodec<A, I, RD, RE>
+        readonly initialEncodedValue: NoInfer<I>
+    }
+}
+
+export const make = Effect.fnUntraced(function* <A, I = A, RD = never, RE = never, MA = void, ME = never, MR = never>(
+    options: make.Options<A, I, RD, RE, MA, ME, MR>
+): Effect.fn.Return<
+    MutationForm<A, I, RD, RE, MA, ME, MR>,
+    never,
+    Scope.Scope | RD | RE | MR
+> {
+    return new MutationFormImpl(
+        options.schema,
+        yield* Effect.context<Scope.Scope | RD | RE | MR>(),
+        yield* Mutation.make(options),
+
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<A>())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(options.initialEncodedValue)),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make<readonly StandardSchemaV1.Issue[]>(Array.empty())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, Schema.SchemaError>>())),
+
+        yield* Semaphore.make(1),
+    )
+})
+
+export declare namespace service {
+    export interface Options<in out A, in out I = A, in out RD = never, in out RE = never, out MA = void, out ME = never, out MR = never>
+    extends make.Options<A, I, RD, RE, MA, ME, MR> {}
+}
+
+export const service = <A, I = A, RD = never, RE = never, MA = void, ME = never, MR = never>(
+    options: service.Options<A, I, RD, RE, MA, ME, MR>
+): Effect.Effect<
+    MutationForm<A, I, RD, RE, MA, ME, MR>,
+    never,
+    Scope.Scope | RD | RE | MR
+> => Effect.tap(
+    make(options),
+    form => Effect.forkScoped(form.run),
+)
@@ -0,0 +1,17 @@
+import { Effect, PubSub, type Scope } from "effect"
+import type * as React from "react"
+import * as Component from "./Component.js"
+
+
+export * from "effect/PubSub"
+
+export const useFromReactiveValues = 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))
+    yield* Component.useReactEffect(() => Effect.flatMap(
+        PubSub.isShutdown(pubsub),
+        shutdown => shutdown ? Effect.succeed(undefined) : Effect.asVoid(PubSub.publish(pubsub, values)),
+    ), values)
+    return pubsub
+})
@@ -0,0 +1,167 @@
+import { Effect, type Scope, Stream } from "effect"
+import { AsyncResult } from "effect/unstable/reactivity"
+import { describe, expect, it } from "vitest"
+import * as Query from "./Query.js"
+import * as QueryClient from "./QueryClient.js"
+import * as View from "./View.js"
+
+
+const runQueryTest = <A, E>(effect: Effect.Effect<A, E, QueryClient.QueryClient | Scope.Scope>) =>
+    Effect.runPromise(Effect.scoped(effect.pipe(
+        Effect.provide(QueryClient.layer()),
+    )))
+
+const staticKey = <K>(key: K): View.View<K> => View.make({
+    get: Effect.succeed(key),
+    changes: Stream.make(key),
+})
+
+const expectSuccessValue = <A, E>(
+    state: Query.FinalQueryState<unknown, A, E>,
+): A => {
+    expect(AsyncResult.isSuccess(state.result)).toBe(true)
+
+    if (!AsyncResult.isSuccess(state.result))
+        throw new Error(`Expected Success result, received ${state.result._tag}`)
+
+    return state.result.value
+}
+
+describe("Query", () => {
+    it("fetch caches successful results until they are invalidated or stale", async () => {
+        let calls = 0
+        const key = staticKey<readonly [number]>([1])
+
+        const result = await runQueryTest(Effect.gen(function*() {
+            const query = yield* Query.make({
+                key,
+                f: ([id]: readonly [number]) => Effect.sync(() => {
+                    calls += 1
+                    return `value:${id}:${calls}`
+                }),
+                staleTime: "1 minute",
+            })
+
+            const first = yield* query.fetch([1])
+            const second = yield* query.fetch([1])
+
+            return [first, second] as const
+        }))
+
+        expect(calls).toBe(1)
+        expect(expectSuccessValue(result[0])).toBe("value:1:1")
+        expect(expectSuccessValue(result[1])).toBe("value:1:1")
+    })
+
+    it("refresh reruns the latest query key", async () => {
+        let calls = 0
+        const key = staticKey<readonly [number]>([1])
+
+        const result = await runQueryTest(Effect.gen(function*() {
+            const query = yield* Query.make({
+                key,
+                f: ([id]: readonly [number]) => Effect.sync(() => {
+                    calls += 1
+                    return `value:${id}:${calls}`
+                }),
+                staleTime: "0 millis",
+            })
+
+            const first = yield* query.fetch([1])
+            yield* Effect.sleep("1 millis")
+            const refreshed = yield* query.refresh
+
+            return [first, refreshed] as const
+        }))
+
+        expect(calls).toBe(2)
+        expect(expectSuccessValue(result[0])).toBe("value:1:1")
+        expect(expectSuccessValue(result[1])).toBe("value:1:2")
+    })
+
+    it("invalidateCacheEntry forces the next fetch for that key to rerun", async () => {
+        let calls = 0
+        const key = staticKey<readonly [number]>([1])
+
+        const result = await runQueryTest(Effect.gen(function*() {
+            const query = yield* Query.make({
+                key,
+                f: ([id]: readonly [number]) => Effect.sync(() => {
+                    calls += 1
+                    return `value:${id}:${calls}`
+                }),
+                staleTime: "1 minute",
+            })
+
+            const first = yield* query.fetch([1])
+            yield* query.invalidateCacheEntry([1])
+            const second = yield* query.fetch([1])
+
+            return [first, second] as const
+        }))
+
+        expect(calls).toBe(2)
+        expect(expectSuccessValue(result[0])).toBe("value:1:1")
+        expect(expectSuccessValue(result[1])).toBe("value:1:2")
+    })
+
+    it("invalidateCache clears cached entries for the query function", async () => {
+        let calls = 0
+        const key = staticKey<readonly [number]>([1])
+
+        const result = await runQueryTest(Effect.gen(function*() {
+            const query = yield* Query.make({
+                key,
+                f: ([id]: readonly [number]) => Effect.sync(() => {
+                    calls += 1
+                    return `value:${id}:${calls}`
+                }),
+                staleTime: "1 minute",
+            })
+
+            const first = yield* query.fetch([1])
+            yield* query.invalidateCache
+            const second = yield* query.fetch([1])
+
+            return [first, second] as const
+        }))
+
+        expect(calls).toBe(2)
+        expect(expectSuccessValue(result[0])).toBe("value:1:1")
+        expect(expectSuccessValue(result[1])).toBe("value:1:2")
+    })
+
+    it("service starts the key view automatically and records its latest final state", async () => {
+        let calls = 0
+        const key = staticKey<readonly [number]>([1])
+
+        const effect = Effect.gen(function*() {
+            const query = yield* Query.service({
+                key,
+                f: ([id]: readonly [number]) => Effect.sync(() => {
+                    calls += 1
+                    return `value:${id}:${calls}`
+                }),
+                staleTime: "1 minute",
+            })
+
+            const latestFinalState = yield* Effect.sleep("1 millis").pipe(
+                Effect.andThen(View.get(query.latestFinalState)),
+                Effect.flatMap(Effect.fromOption),
+                Effect.eventually,
+                Effect.timeout("1 second"),
+            )
+
+            return {
+                state: yield* View.get(query.state),
+                latestFinalState,
+            }
+        })
+
+        const result = await runQueryTest(effect)
+
+        expect(calls).toBe(1)
+        expect(result.state.key).toEqual([1])
+        expect(expectSuccessValue(result.latestFinalState)).toBe("value:1:1")
+    })
+})
@@ -0,0 +1,463 @@
+import { Cause, type Context, Duration, Effect, Equal, type Equivalence, Exit, Fiber, Option, Pipeable, Predicate, PubSub, Ref, type Scope, Semaphore, Stream, SubscriptionRef } from "effect"
+import { AsyncResult } from "effect/unstable/reactivity"
+import * as Lens from "./Lens.js"
+import * as QueryClient from "./QueryClient.js"
+import * as View from "./View.js"
+
+
+export const QueryTypeId: unique symbol = Symbol.for("@effect-fc/Query/Query")
+export type QueryTypeId = typeof QueryTypeId
+
+export interface Query<in out K, out A, out E = never, in out R = never>
+extends Pipeable.Pipeable {
+    readonly [QueryTypeId]: QueryTypeId
+
+    readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | R>
+    readonly key: View.View<K>
+    readonly keyEquivalence: Equivalence.Equivalence<K>
+    readonly f: (key: K) => Effect.Effect<A, E, R>
+
+    readonly staleTime: Duration.Duration
+    readonly refreshOnWindowFocus: boolean
+
+    readonly fiber: View.View<Option.Option<Fiber.Fiber<A, E>>>
+    readonly state: View.View<QueryState<K, A, E>>
+    readonly latestFinalState: View.View<Option.Option<FinalQueryState<K, A, E>>>
+
+    readonly run: Effect.Effect<void>
+    fetch(key: K): Effect.Effect<FinalQueryState<K, A, E>, Cause.NoSuchElementError>
+    fetchView(key: K): Effect.Effect<View.View<QueryState<K, A, E>>, Cause.NoSuchElementError>
+    readonly refresh: Effect.Effect<FinalQueryState<K, A, E>, Cause.NoSuchElementError>
+    readonly refreshView: Effect.Effect<View.View<QueryState<K, A, E>>, Cause.NoSuchElementError>
+
+    readonly invalidateCache: Effect.Effect<void>
+    invalidateCacheEntry(key: K): Effect.Effect<void>
+}
+
+export interface QueryState<out K, out A, out E = never> {
+    readonly key: K
+    readonly result: AsyncResult.AsyncResult<A, E>
+}
+
+export interface FinalQueryState<out K, out A, out E = never> {
+    readonly key: K
+    readonly result: AsyncResult.Success<A, E> | AsyncResult.Failure<A, E>
+}
+
+export const isQuery = (u: unknown): u is Query<unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, QueryTypeId)
+
+
+export class QueryImpl<in out K, in out A, in out E = never, in out R = never>
+extends Pipeable.Class implements Query<K, A, E, R> {
+    readonly [QueryTypeId]: QueryTypeId = QueryTypeId
+
+    constructor(
+        readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | R>,
+        readonly key: View.View<K>,
+        readonly keyEquivalence: Equivalence.Equivalence<K>,
+        readonly f: (key: K) => Effect.Effect<A, E, R>,
+
+        readonly staleTime: Duration.Duration,
+        readonly refreshOnWindowFocus: boolean,
+
+        readonly fiber: Lens.Lens<Option.Option<Fiber.Fiber<A, E>>>,
+        readonly state: Lens.Lens<QueryState<K, A, E>>,
+        readonly latestFinalState: Lens.Lens<Option.Option<FinalQueryState<K, A, E>>>,
+
+        readonly runSemaphore: Semaphore.Semaphore,
+    ) {
+        super()
+    }
+
+    get run(): Effect.Effect<void> {
+        return Effect.all([
+            Stream.runForEach(
+                this.key.changes,
+                key => Effect.gen({ self: this }, function*() {
+                    yield* this.interrupt
+                    const latestFinalState = yield* Lens.get(this.latestFinalState)
+
+                    const state = yield* this.startCached(
+                        Option.isSome(latestFinalState) && this.keyEquivalence(key, latestFinalState.value.key)
+                            ? latestFinalState.value
+                            : {
+                                key,
+                                result: AsyncResult.initial(false),
+                            }
+                    )
+
+                    yield* Effect.forkScoped(this.watch(state))
+                }),
+            ),
+
+            Effect.promise(() => import("@effect/platform-browser")).pipe(
+                Effect.flatMap(({ BrowserStream }) => this.refreshOnWindowFocus
+                    ? Stream.runForEach(
+                        BrowserStream.fromEventListenerWindow("focus"),
+                        () => this.refreshView,
+                    )
+                    : Effect.void
+                ),
+                Effect.catchDefect(() => Effect.void),
+            ),
+        ], { concurrency: "unbounded" }).pipe(
+            Effect.ignore,
+            this.runSemaphore.withPermits(1),
+            Effect.provide(this.context),
+        )
+    }
+
+    get interrupt(): Effect.Effect<void> {
+        return Effect.flatMap(Lens.get(this.fiber), Option.match({
+            onSome: Fiber.interrupt,
+            onNone: () => Effect.void,
+        }))
+    }
+
+    fetch(key: K): Effect.Effect<FinalQueryState<K, A, E>, Cause.NoSuchElementError> {
+        return Effect.gen({ self: this }, function*() {
+            yield* this.interrupt
+            const state = yield* this.startCached({
+                key,
+                result: AsyncResult.initial(false),
+            })
+            return yield* this.watch(state)
+        }).pipe(
+            Effect.provide(this.context),
+        )
+    }
+
+    fetchView(key: K): Effect.Effect<
+        View.View<QueryState<K, A, E>>,
+        Cause.NoSuchElementError
+    > {
+        return Effect.gen({ self: this }, function*() {
+            yield* this.interrupt
+            const state = yield* this.startCached({
+                key,
+                result: AsyncResult.initial(false),
+            })
+
+            yield* Effect.forkScoped(this.watch(state))
+            return state
+        }).pipe(
+            Effect.provide(this.context),
+        )
+    }
+
+    get refresh(): Effect.Effect<FinalQueryState<K, A, E>, Cause.NoSuchElementError> {
+        return Effect.gen({ self: this }, function*() {
+            yield* this.interrupt
+            const latestState = yield* Lens.get(this.state)
+            const latestFinalState = yield* Lens.get(this.latestFinalState)
+
+            const state = yield* this.startCached(
+                Option.isSome(latestFinalState) && this.keyEquivalence(latestState.key, latestFinalState.value.key)
+                    ? latestFinalState.value
+                    : {
+                        key: latestState.key,
+                        result: AsyncResult.initial(false),
+                    }
+            )
+
+            return yield* this.watch(state)
+        }).pipe(
+            Effect.provide(this.context),
+        )
+    }
+
+    get refreshView(): Effect.Effect<
+        View.View<QueryState<K, A, E>>,
+        Cause.NoSuchElementError
+    > {
+        return Effect.gen({ self: this }, function*() {
+            yield* this.interrupt
+            const latestState = yield* Lens.get(this.state)
+            const latestFinalState = yield* Lens.get(this.latestFinalState)
+
+            const state = yield* this.startCached(
+                Option.isSome(latestFinalState) && this.keyEquivalence(latestState.key, latestFinalState.value.key)
+                    ? latestFinalState.value
+                    : {
+                        key: latestState.key,
+                        result: AsyncResult.initial(false),
+                    }
+            )
+
+            yield* Effect.forkScoped(this.watch(state))
+            return state
+        }).pipe(
+            Effect.provide(this.context),
+        )
+    }
+
+    startCached(
+        previous: QueryState<K, A, E>,
+    ): Effect.Effect<
+        View.View<QueryState<K, A, E>>,
+        Cause.NoSuchElementError,
+        Scope.Scope | QueryClient.QueryClient | R
+    > {
+        return Effect.flatMap(this.getCacheEntry(previous.key), Option.match({
+            onSome: entry => Effect.flatMap(
+                QueryClient.isQueryClientCacheEntryStale(entry),
+                isStale => isStale
+                    ? this.start({
+                        key: previous.key,
+                        result: entry.result as AsyncResult.AsyncResult<A, E>,
+                    })
+                    : Effect.succeed(View.make({
+                        get: Effect.succeed({
+                            key: previous.key,
+                            result: entry.result as AsyncResult.AsyncResult<A, E>,
+                        }),
+                        get changes() {
+                            return Stream.make({
+                                key: previous.key,
+                                result: entry.result as AsyncResult.AsyncResult<A, E>,
+                            })
+                        },
+                    })),
+            ),
+            onNone: () => this.start(previous),
+        }))
+    }
+
+    start(
+        previous: QueryState<K, A, E>,
+    ): Effect.Effect<
+        View.View<QueryState<K, A, E>>,
+        never,
+        Scope.Scope | R
+    > {
+        return Effect.gen({ self: this }, function*() {
+            const state = yield* makeQueryStateLens(previous)
+
+            const fiber = yield* Effect.forkScoped(Effect.andThen(
+                Lens.update<QueryState<K, A, E>, never, never, never, never>(
+                    state,
+                    previous => AsyncResult.match(previous.result, {
+                        onInitial: () => ({
+                            key: previous.key,
+                            result: AsyncResult.initial(true),
+                        }),
+                        onSuccess: result => ({
+                            key: previous.key,
+                            result: AsyncResult.success(result.value, {
+                                waiting: true,
+                            }),
+                        }),
+                        onFailure: result => ({
+                            key: previous.key,
+                            result: AsyncResult.failure(result.cause, {
+                                waiting: true,
+                                previousSuccess: result.previousSuccess,
+                            }),
+                        }),
+                    }
+                )),
+
+                Effect.onExit(this.f(previous.key), exit => Effect.gen({ self: this }, function*() {
+                    const fiberId = yield* Effect.fiberId
+                    const fiber = yield* Lens.get(this.fiber)
+
+                    if (Option.isSome(fiber) && fiberId === fiber.value.id)
+                        yield* Lens.set(this.fiber, Option.none())
+
+                    const finalState = (yield* Lens.updateAndGet<QueryState<K, A, E>, never, never, never, never>(
+                        state,
+                        previous => Exit.match(exit, {
+                            onSuccess: v => ({
+                                key: previous.key,
+                                result: AsyncResult.success(v),
+                            }),
+                            onFailure: c => Cause.hasInterruptsOnly(c)
+                                ? previous
+                                : AsyncResult.match(previous.result, {
+                                    onInitial: () => ({
+                                        key: previous.key,
+                                        result: AsyncResult.failure(c),
+                                    }),
+                                    onSuccess: v => ({
+                                        key: previous.key,
+                                        result: AsyncResult.failure(c, {
+                                            previousSuccess: Option.some(v),
+                                        }),
+                                    }),
+                                    onFailure: v => ({
+                                        key: previous.key,
+                                        result: AsyncResult.failure(c, {
+                                            previousSuccess: v.previousSuccess,
+                                        }),
+                                    }),
+                                }),
+                        }),
+                    )) as FinalQueryState<K, A, E>
+
+                    yield* Lens.set(this.latestFinalState, Option.some(finalState))
+                    yield* PubSub.shutdown(state.pubsub)
+                }))
+            ))
+
+            yield* Lens.set(this.fiber, Option.some(fiber))
+            return state
+        })
+    }
+
+    watch(
+        view: View.View<QueryState<K, A, E>>
+    ): Effect.Effect<FinalQueryState<K, A, E>, never, QueryClient.QueryClient> {
+        return Effect.gen({ self: this }, function*() {
+            const initial = yield* View.get(view)
+            const final = yield* Stream.runFoldEffect(
+                View.changes(view),
+                () => initial,
+                (_, state) => Effect.as(Lens.set(this.state, state), state),
+            ) as Effect.Effect<FinalQueryState<K, A, E>>
+
+            yield* Lens.set(this.latestFinalState, Option.some(final))
+            if (AsyncResult.isSuccess(final.result))
+                yield* this.setCacheEntry(final.key, final.result)
+
+            return final
+        })
+    }
+
+    makeCacheKey(key: K): QueryClient.QueryClientCacheKey {
+        return new QueryClient.QueryClientCacheKey(key, this.f as (key: unknown) => Effect.Effect<unknown, unknown, unknown>)
+    }
+
+    getCacheEntry(
+        key: K
+    ): Effect.Effect<Option.Option<QueryClient.QueryClientCacheEntry>, never, QueryClient.QueryClient> {
+        return Effect.andThen(
+            Effect.all([
+                Effect.succeed(this.makeCacheKey(key)),
+                QueryClient.QueryClient,
+            ]),
+            ([key, client]) => client.getCacheEntry(key),
+        )
+    }
+
+    setCacheEntry(
+        key: K,
+        result: AsyncResult.Success<A, E>,
+    ): Effect.Effect<QueryClient.QueryClientCacheEntry, never, QueryClient.QueryClient> {
+        return Effect.flatMap(
+            Effect.all([
+                Effect.succeed(this.makeCacheKey(key)),
+                QueryClient.QueryClient,
+            ]),
+            ([key, client]) => client.setCacheEntry(key, result, this.staleTime),
+        )
+    }
+
+    get invalidateCache(): Effect.Effect<void> {
+        return QueryClient.QueryClient.pipe(
+            Effect.andThen(client => client.invalidateCacheEntries(this.f as (key: unknown) => Effect.Effect<unknown, unknown, unknown>)),
+            Effect.provide(this.context),
+        )
+    }
+
+    invalidateCacheEntry(key: K): Effect.Effect<void> {
+        return Effect.all([
+            Effect.succeed(this.makeCacheKey(key)),
+            QueryClient.QueryClient,
+        ]).pipe(
+            Effect.andThen(([key, client]) => client.invalidateCacheEntry(key)),
+            Effect.provide(this.context),
+        )
+    }
+}
+
+export declare namespace make {
+    export interface Options<K, A, E = never, R = never> {
+        readonly key: View.View<K>,
+        readonly keyEquivalence?: Equivalence.Equivalence<K>,
+        readonly f: (key: K) => Effect.Effect<A, E, R>
+
+        readonly staleTime?: Duration.Input
+        readonly refreshOnWindowFocus?: boolean
+    }
+}
+
+export const make = Effect.fnUntraced(function* <K, A, E = never, R = never>(
+    options: make.Options<K, A, E, R>
+): Effect.fn.Return<
+    Query<K, A, E, R>,
+    Cause.NoSuchElementError,
+    Scope.Scope | QueryClient.QueryClient | R
+> {
+    const client = yield* QueryClient.QueryClient
+
+    return new QueryImpl(
+        yield* Effect.context<Scope.Scope | QueryClient.QueryClient | R>(),
+        options.key,
+        options.keyEquivalence ?? Equal.asEquivalence(),
+        options.f,
+
+        options.staleTime ? yield* Effect.fromOption(Duration.fromInput(options.staleTime)) : client.defaultStaleTime,
+        options.refreshOnWindowFocus ?? client.defaultRefreshOnWindowFocus,
+
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, E>>())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make<QueryState<K, A, E>>({
+            key: yield* View.get(options.key),
+            result: AsyncResult.initial(false),
+        })),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<FinalQueryState<K, A, E>>())),
+
+        yield* Semaphore.make(1),
+    )
+})
+
+export const service = <K, A, E = never, R = never>(
+    options: make.Options<K, A, E, R>
+): Effect.Effect<
+    Query<K, A, E, R>,
+    Cause.NoSuchElementError,
+    Scope.Scope | QueryClient.QueryClient | R
+> => Effect.tap(
+    make(options),
+    query => Effect.forkScoped(query.run),
+)
+
+
+export class QueryStateLens<in out K, in out A, in out E = never>
+extends Lens.LensImpl<QueryState<K, A, E>, never, never, never, never> {
+    constructor(
+        readonly ref: Ref.Ref<QueryState<K, A, E>>,
+        readonly pubsub: PubSub.PubSub<QueryState<K, A, E>>,
+        readonly semaphore: Semaphore.Semaphore,
+    ) {
+        super()
+    }
+
+    get resolve(): Effect.Effect<Lens.LensImpl.Resolved<QueryState<K, A, E>>, never, never> {
+        return Effect.map(
+            Ref.get(this.ref),
+            value => ({
+                value,
+                commit: next => Effect.flatMap(
+                    next,
+                    value => Effect.andThen(
+                        Ref.set(this.ref, value),
+                        PubSub.publish(this.pubsub, value),
+                    ),
+                ),
+            }),
+        )
+    }
+    get changes() { return Stream.fromPubSub(this.pubsub) }
+    get lock() { return Effect.succeed(this.semaphore.withPermit) }
+}
+
+export const makeQueryStateLens = <K, A, E = never>(
+    initial: QueryState<K, A, E>,
+) => Effect.all([
+    Ref.make(initial),
+    PubSub.unbounded<QueryState<K, A, E>>({ replay: 1 }),
+    Semaphore.make(1),
+]).pipe(
+    Effect.tap(([, pubsub]) => PubSub.publish(pubsub, initial)),
+    Effect.map(([ref, pubsub, semaphore]) => new QueryStateLens(ref, pubsub, semaphore)),
+)
@@ -0,0 +1,183 @@
+import { type Cause, Context, DateTime, Duration, Effect, Equal, Equivalence, Hash, HashMap, Layer, type Option, Pipeable, Predicate, Schedule, type Scope, Semaphore, SubscriptionRef } from "effect"
+import type { AsyncResult } from "effect/unstable/reactivity"
+import * as Lens from "./Lens.js"
+import type * as View from "./View.js"
+
+
+export const QueryClientServiceTypeId: unique symbol = Symbol.for("@effect-fc/QueryClient/QueryClientService")
+export type QueryClientServiceTypeId = typeof QueryClientServiceTypeId
+
+export interface QueryClientService extends Pipeable.Pipeable {
+    readonly [QueryClientServiceTypeId]: QueryClientServiceTypeId
+
+    readonly cache: View.View<HashMap.HashMap<QueryClientCacheKey, QueryClientCacheEntry>>
+    readonly cacheGcTime: Duration.Duration
+    readonly defaultStaleTime: Duration.Duration
+    readonly defaultRefreshOnWindowFocus: boolean
+
+    readonly run: Effect.Effect<void, Cause.NoSuchElementError>
+    getCacheEntry(key: QueryClientCacheKey): Effect.Effect<Option.Option<QueryClientCacheEntry>>
+    setCacheEntry(
+        key: QueryClientCacheKey,
+        result: AsyncResult.Success<unknown, unknown>,
+        staleTime: Duration.Duration,
+    ): Effect.Effect<QueryClientCacheEntry>
+    invalidateCacheEntries(f: (key: unknown) => Effect.Effect<unknown, unknown, unknown>): Effect.Effect<void>
+    invalidateCacheEntry(key: QueryClientCacheKey): Effect.Effect<void>
+}
+
+export class QueryClient extends Context.Service<QueryClient, QueryClientService>()(
+    "@effect-fc/QueryClient/QueryClient"
+) {}
+
+export class QueryClientServiceImpl
+extends Pipeable.Class
+implements QueryClientService {
+    readonly [QueryClientServiceTypeId]: QueryClientServiceTypeId = QueryClientServiceTypeId
+
+    constructor(
+        readonly cache: Lens.Lens<HashMap.HashMap<QueryClientCacheKey, QueryClientCacheEntry>>,
+        readonly cacheGcTime: Duration.Duration,
+        readonly defaultStaleTime: Duration.Duration,
+        readonly defaultRefreshOnWindowFocus: boolean,
+        readonly runSemaphore: Semaphore.Semaphore,
+    ) {
+        super()
+    }
+
+    get run(): Effect.Effect<void, Cause.NoSuchElementError> {
+        return this.runSemaphore.withPermits(1)(Effect.repeat(
+            Effect.flatMap(
+                DateTime.now,
+                now => Lens.update(this.cache, HashMap.filter(entry =>
+                    Duration.isLessThan(
+                        DateTime.distance(entry.lastAccessedAt, now),
+                        Duration.sum(entry.staleTime, this.cacheGcTime),
+                    )
+                )),
+            ),
+            Schedule.spaced("30 second"),
+        ))
+    }
+
+    getCacheEntry(key: QueryClientCacheKey): Effect.Effect<Option.Option<QueryClientCacheEntry>> {
+        return Effect.all([
+            DateTime.now,
+            Effect.flatMap(
+                Effect.map(Lens.get(this.cache), HashMap.get(key)),
+                Effect.fromOption,
+            ),
+        ]).pipe(
+            Effect.map(([now, entry]) => new QueryClientCacheEntry(entry.result, entry.staleTime, entry.createdAt, now)),
+            Effect.tap(entry => Lens.update(this.cache, HashMap.set(key, entry))),
+            Effect.option,
+        )
+    }
+
+    setCacheEntry(
+        key: QueryClientCacheKey,
+        result: AsyncResult.Success<unknown, unknown>,
+        staleTime: Duration.Duration,
+    ): Effect.Effect<QueryClientCacheEntry> {
+        return DateTime.now.pipe(
+            Effect.map(now => new QueryClientCacheEntry(result, staleTime, now, now)),
+            Effect.tap(entry => Lens.update(this.cache, HashMap.set(key, entry))),
+        )
+    }
+
+    invalidateCacheEntries(f: (key: unknown) => Effect.Effect<unknown, unknown, unknown>): Effect.Effect<void> {
+        return Lens.update(this.cache, HashMap.filter((_, key) => !Equivalence.strictEqual()(key.f, f)))
+    }
+    invalidateCacheEntry(key: QueryClientCacheKey): Effect.Effect<void> {
+        return Lens.update(this.cache, HashMap.remove(key))
+    }
+}
+
+export const isQueryClientService = (u: unknown): u is QueryClientService => Predicate.hasProperty(u, QueryClientServiceTypeId)
+
+export declare namespace make {
+    export interface Options {
+        readonly cacheGcTime?: Duration.Input
+        readonly defaultStaleTime?: Duration.Input
+        readonly defaultRefreshOnWindowFocus?: boolean
+    }
+}
+
+export const make = Effect.fnUntraced(function* (
+    options: make.Options = {}
+): Effect.fn.Return<QueryClientService, Cause.NoSuchElementError, never> {
+    return new QueryClientServiceImpl(
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(HashMap.empty<QueryClientCacheKey, QueryClientCacheEntry>())),
+        yield* Effect.fromOption(Duration.fromInput(options.cacheGcTime ?? "5 minutes")),
+        yield* Effect.fromOption(Duration.fromInput(options.defaultStaleTime ?? "0 minutes")),
+        options.defaultRefreshOnWindowFocus ?? true,
+        yield* Semaphore.make(1),
+    )
+})
+
+export declare namespace service {
+    export interface Options extends make.Options {}
+}
+
+export const service = (
+    options?: service.Options
+): Effect.Effect<QueryClientService, Cause.NoSuchElementError, Scope.Scope> => Effect.tap(
+    make(options),
+    client => Effect.forkScoped(client.run),
+)
+
+export const layer = (options?: service.Options) => Layer.effect(QueryClient, service(options))
+
+
+export const QueryClientCacheKeyTypeId: unique symbol = Symbol.for("@effect-fc/QueryClient/QueryClientCacheKey")
+export type QueryClientCacheKeyTypeId = typeof QueryClientCacheKeyTypeId
+
+export class QueryClientCacheKey
+extends Pipeable.Class
+implements Pipeable.Pipeable, Equal.Equal {
+    readonly [QueryClientCacheKeyTypeId]: QueryClientCacheKeyTypeId = QueryClientCacheKeyTypeId
+
+    constructor(
+        readonly key: unknown,
+        readonly f: (key: unknown) => Effect.Effect<unknown, unknown, unknown>,
+    ) {
+        super()
+    }
+
+    [Equal.symbol](that: Equal.Equal) {
+        return isQueryClientCacheKey(that) && Equal.equals(this.key, that.key) && Equivalence.strictEqual()(this.f, that.f)
+    }
+    [Hash.symbol]() {
+        return Hash.combine(Hash.hash(this.f))(Hash.hash(this.key))
+    }
+}
+
+export const isQueryClientCacheKey = (u: unknown): u is QueryClientCacheKey => Predicate.hasProperty(u, QueryClientCacheKeyTypeId)
+
+
+export const QueryClientCacheEntryTypeId: unique symbol = Symbol.for("@effect-fc/QueryClient/QueryClientCacheEntry")
+export type QueryClientCacheEntryTypeId = typeof QueryClientCacheEntryTypeId
+
+export class QueryClientCacheEntry
+extends Pipeable.Class
+implements Pipeable.Pipeable {
+    readonly [QueryClientCacheEntryTypeId]: QueryClientCacheEntryTypeId = QueryClientCacheEntryTypeId
+
+    constructor(
+        readonly result: AsyncResult.Success<unknown, unknown>,
+        readonly staleTime: Duration.Duration,
+        readonly createdAt: DateTime.DateTime,
+        readonly lastAccessedAt: DateTime.DateTime,
+    ) {
+        super()
+    }
+}
+
+export const isQueryClientCacheEntry = (u: unknown): u is QueryClientCacheEntry => Predicate.hasProperty(u, QueryClientCacheEntryTypeId)
+
+export const isQueryClientCacheEntryStale = (
+    self: QueryClientCacheEntry
+): Effect.Effect<boolean, Cause.NoSuchElementError> => Effect.map(
+    DateTime.now,
+    now => Duration.isGreaterThanOrEqualTo(DateTime.distance(self.createdAt, now), self.staleTime),
+)
@@ -0,0 +1,73 @@
+/** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
+import { type Context, Effect, Layer, ManagedRuntime, Predicate } from "effect"
+import * as React from "react"
+import * as Component from "./Component.js"
+import * as ScopeRegistry from "./ScopeRegistry.js"
+
+
+export const ReactRuntimeTypeId: unique symbol = Symbol.for("@effect-fc/ReactRuntime/ReactRuntime")
+export type ReactRuntimeTypeId = typeof ReactRuntimeTypeId
+
+export interface ReactRuntime<R, ER> {
+    new(_: never): Record<string, never>
+    readonly [ReactRuntimeTypeId]: ReactRuntimeTypeId
+    readonly runtime: ManagedRuntime.ManagedRuntime<R, ER>
+    readonly context: React.Context<Context.Context<R>>
+}
+
+const ReactRuntimePrototype = Object.freeze({ [ReactRuntimeTypeId]: ReactRuntimeTypeId } as const)
+
+export const preludeLayer: Layer.Layer<ScopeRegistry.ScopeRegistry> = ScopeRegistry.layer
+
+export const isReactRuntime = (u: unknown): u is ReactRuntime<unknown, unknown> => Predicate.hasProperty(u, ReactRuntimeTypeId)
+
+export const make = <R, ER>(
+    layer: Layer.Layer<R, ER>,
+    memoMap?: Layer.MemoMap,
+): ReactRuntime<Layer.Success<typeof preludeLayer> | R, ER> => Object.setPrototypeOf(
+    Object.assign(function() {}, {
+        runtime: ManagedRuntime.make(
+            Layer.merge(preludeLayer, layer),
+            { memoMap },
+        ),
+        // biome-ignore lint/style/noNonNullAssertion: context initialization
+        context: React.createContext<Context.Context<Layer.Success<typeof preludeLayer> | R>>(null!),
+    }),
+    ReactRuntimePrototype,
+)
+
+
+export namespace Provider {
+    export interface Props<R, ER> extends React.SuspenseProps {
+        readonly runtime: ReactRuntime<R, ER>
+        readonly children?: React.ReactNode
+    }
+}
+
+export const Provider = <R, ER>(
+    { runtime, children, ...suspenseProps }: Provider.Props<R, ER>
+): React.ReactNode => {
+    const promise = React.useMemo(() => runtime.runtime.context(), [runtime])
+
+    return React.createElement(
+        React.Suspense,
+        suspenseProps,
+        React.createElement(ProviderInner<R, ER>, { runtime, promise, children }),
+    )
+}
+
+const ProviderInner = <R, ER>(
+    { runtime, promise, children }: {
+        readonly runtime: ReactRuntime<R, ER>
+        readonly promise: Promise<Context.Context<R>>
+        readonly children?: React.ReactNode
+    }
+): React.ReactNode => {
+    const context = React.use(promise)
+    Effect.runSyncWith(context)(Component.useOnChange(
+        () => Effect.addFinalizer(() => runtime.runtime.disposeEffect),
+        [runtime],
+    ))
+
+    return React.createElement(runtime.context, { value: context }, children)
+}
@@ -0,0 +1,60 @@
+import { describe, expect, it, vi } from "vitest"
+import type * as Component from "./Component.js"
+import * as Refreshable from "./Refreshable.js"
+
+
+describe("Refreshable", () => {
+    it("attaches a cell and notifies subscribers after a compatible update", async () => {
+        const first = {} as Component.Component.Any
+        const cell = Refreshable.makeCell(first, "hooks", false)
+        const listener = vi.fn()
+
+        expect(Refreshable.isRefreshable(first)).toBe(false)
+        const attached = Refreshable.attach(first, cell)
+        expect(attached).toBe(first)
+        expect(Refreshable.isRefreshable(first)).toBe(true)
+        expect(attached[Refreshable.RefreshableTypeId]).toBe(cell)
+        expect(Object.getPrototypeOf(attached).asFunctionComponent)
+            .toBe(Refreshable.RefreshablePrototype.asFunctionComponent)
+
+        cell.subscribe(listener)
+        const second = {} as Component.Component.Any
+        cell.update(second, "hooks", false)
+
+        expect(cell.current).toBe(second)
+        expect(cell.snapshot).toEqual({
+            revision: 1,
+            resetRevision: 0,
+        })
+
+        await Promise.resolve()
+        expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it("requests a remount when a signature changes or reset is forced", () => {
+        const component = {} as Component.Component.Any
+        const cell = Refreshable.makeCell(component, "one", false)
+
+        cell.update({} as Component.Component.Any, "two", false)
+        expect(cell.snapshot.resetRevision).toBe(1)
+
+        cell.update({} as Component.Component.Any, "two", true)
+        expect(cell.snapshot.resetRevision).toBe(2)
+    })
+
+    it("builds the refresh shell from the current descriptor implementation", () => {
+        const implementation = () => null
+        const makeFunctionComponent = vi.fn(() => implementation)
+        const component = {
+            makeFunctionComponent,
+        } as unknown as Component.ComponentImpl.Any
+        const contextRef = {
+            current: {},
+        } as never
+        const cell = Refreshable.makeCell(component, "hooks", false)
+        const attached = Refreshable.attach(component, cell)
+
+        expect(attached.asFunctionComponent(contextRef)).not.toBe(implementation)
+        expect(makeFunctionComponent).toHaveBeenCalledWith(contextRef)
+    })
+})
@@ -0,0 +1,181 @@
+import type { Context, Scope } from "effect"
+import * as React from "react"
+import type * as Component from "./Component.js"
+
+
+/**
+ * A stable identifier used to associate an Effect View descriptor with its
+ * development refresh cell.
+ *
+ * This low-level API is intended for development-server integrations such as
+ * `@effect-view/vite-plugin`.
+ */
+export const RefreshableTypeId: unique symbol = Symbol.for("@effect-view/Refreshable/Refreshable")
+export type RefreshableTypeId = typeof RefreshableTypeId
+
+/**
+ * The version observed by a mounted Effect View refresh shell.
+ *
+ * `revision` changes for every update. `resetRevision` changes only when the
+ * adapter determines that preserving React state is unsafe.
+ */
+export interface Snapshot {
+    readonly revision: number
+    readonly resetRevision: number
+}
+
+/**
+ * A mutable development cell holding the latest version of an Effect View
+ * descriptor.
+ *
+ * This low-level API is intended for development-server integrations.
+ */
+export interface Cell {
+    current: Component.ComponentImpl.Any
+    signature: string
+    forceReset: boolean
+    snapshot: Snapshot
+    readonly subscribe: (listener: () => void) => () => void
+    readonly getSnapshot: () => Snapshot
+    readonly update: (
+        component: Component.Component.Any,
+        signature: string,
+        forceReset: boolean,
+    ) => void
+}
+
+export const RefreshablePrototype = Object.freeze({
+    asFunctionComponent<P extends {}, A extends React.ReactNode, E, R, F extends Component.Component.Signature>(
+        this: Component.ComponentImpl<P, A, E, R, F> & Refreshable,
+        contextRef: React.RefObject<Context.Context<Exclude<R, Scope.Scope>>>,
+    ) {
+        const cell = this[RefreshableTypeId]
+        let current = cell.current
+        let functionComponent = current.makeFunctionComponent(contextRef)
+
+        // Calling the current renderer inside this stable component deliberately
+        // keeps its hooks on the same fiber until resetRevision changes.
+        const Implementation = (props: P) => {
+            if (current !== cell.current) {
+                current = cell.current
+                functionComponent = current.makeFunctionComponent(contextRef)
+            }
+            return functionComponent(props)
+        }
+
+        const RefreshableComponent = (props: P) => {
+            const snapshot = React.useSyncExternalStore(
+                cell.subscribe,
+                cell.getSnapshot,
+                cell.getSnapshot,
+            )
+            return React.createElement(Implementation, {
+                ...props,
+                key: snapshot.resetRevision,
+            })
+        }
+
+        return RefreshableComponent as F
+    },
+} as const)
+
+export type RefreshablePrototype = typeof RefreshablePrototype
+
+/**
+ * A descriptor that can be connected to a development refresh cell.
+ */
+export interface Refreshable extends RefreshablePrototype {
+    readonly [RefreshableTypeId]: Cell
+}
+
+/**
+ * Checks whether a descriptor has been connected to a development refresh
+ * cell.
+ */
+export const isRefreshable = <A extends object>(
+    value: A,
+): value is A & Refreshable => Object.hasOwn(value, RefreshableTypeId)
+
+/**
+ * Creates a refresh cell for an Effect View descriptor.
+ *
+ * This low-level API is intended for development-server integrations.
+ */
+export const makeCell = (
+    component: Component.Component.Any,
+    signature: string,
+    forceReset: boolean,
+): Cell => {
+    const listeners = new Set<() => void>()
+    let notificationPending = false
+
+    const cell: Cell = {
+        current: component as Component.ComponentImpl.Any,
+        signature,
+        forceReset,
+        snapshot: {
+            revision: 0,
+            resetRevision: 0,
+        },
+        subscribe(listener) {
+            listeners.add(listener)
+            return () => {
+                listeners.delete(listener)
+            }
+        },
+        getSnapshot() {
+            return cell.snapshot
+        },
+        update(nextComponent, nextSignature, nextForceReset) {
+            const shouldReset = cell.forceReset
+                || nextForceReset
+                || cell.signature !== nextSignature
+
+            cell.current = nextComponent as Component.ComponentImpl.Any
+            cell.signature = nextSignature
+            cell.forceReset = nextForceReset
+            cell.snapshot = {
+                revision: cell.snapshot.revision + 1,
+                resetRevision: cell.snapshot.resetRevision + (shouldReset ? 1 : 0),
+            }
+
+            if (!notificationPending) {
+                notificationPending = true
+                queueMicrotask(() => {
+                    notificationPending = false
+                    for (const listener of listeners)
+                        listener()
+                })
+            }
+        },
+    }
+
+    return cell
+}
+
+/**
+ * Associates a descriptor with a refresh cell and returns the descriptor.
+ *
+ * This low-level API is intended for development-server integrations.
+ */
+export const attach = <A extends Component.Component.Any>(
+    component: A,
+    cell: Cell,
+): A & Refreshable => {
+    if (!isRefreshable(component)) {
+        Object.setPrototypeOf(
+            component,
+            Object.freeze(Object.setPrototypeOf(
+                Object.assign({}, RefreshablePrototype),
+                Object.getPrototypeOf(component),
+            )),
+        )
+    }
+
+    Object.defineProperty(component, RefreshableTypeId, {
+        configurable: true,
+        enumerable: true,
+        value: cell,
+    })
+    return component as A & Refreshable
+}
@@ -0,0 +1,186 @@
+import { type Cause, Chunk, Context, DateTime, type Duration, Effect, Equal, Exit, HashMap, Layer, Option, Order, Predicate, Scope, Semaphore, Stream, SubscriptionRef } from "effect"
+
+
+export const ScopeRegistryServiceTypeId: unique symbol = Symbol.for("@effect-view/ScopeRegistryService/ScopeRegistryService")
+export type ScopeRegistryServiceTypeId = typeof ScopeRegistryServiceTypeId
+
+export interface ScopeRegistryService {
+    readonly [ScopeRegistryServiceTypeId]: ScopeRegistryServiceTypeId
+    readonly ref: SubscriptionRef.SubscriptionRef<HashMap.HashMap<ScopeRegistryService.Key, ScopeRegistryService.Entry>>
+
+    register(
+        key: ScopeRegistryService.Key,
+        options: ScopeRegistryService.RegisterOptions,
+    ): Effect.Effect<ScopeRegistryService.Entry>
+    commit(key: ScopeRegistryService.Key): Effect.Effect<ScopeRegistryService.Entry, Cause.NoSuchElementError>
+    release(key: ScopeRegistryService.Key): Effect.Effect<ScopeRegistryService.Entry, Cause.NoSuchElementError>
+
+    readonly run: Effect.Effect<void, never, Scope.Scope>
+}
+
+export declare namespace ScopeRegistryService {
+    export type Key = object
+
+    export interface RegisterOptions {
+        readonly finalizerExecutionStrategy: "sequential" | "parallel"
+        readonly finalizerExecutionDebounce: Duration.Input
+        readonly scopeCommitTimeout: Duration.Input
+    }
+
+    export interface Entry {
+        readonly scope: Scope.Closeable
+        readonly expiresAt: Option.Option<DateTime.Utc>
+        readonly finalizerExecutionDebounce: Duration.Input
+    }
+}
+
+export const isScopeRegistryService = (u: unknown): u is ScopeRegistryService => Predicate.hasProperty(u, ScopeRegistryServiceTypeId)
+export const makeKey = (): ScopeRegistryService.Key => Equal.byReference({})
+
+
+export class ScopeRegistryServiceImpl implements ScopeRegistryService {
+    readonly [ScopeRegistryServiceTypeId]: ScopeRegistryServiceTypeId = ScopeRegistryServiceTypeId
+
+    constructor(
+        readonly ref: SubscriptionRef.SubscriptionRef<HashMap.HashMap<ScopeRegistryService.Key, ScopeRegistryService.Entry>>,
+        readonly runSemaphore: Semaphore.Semaphore,
+    ) {}
+
+    register(
+        key: ScopeRegistryService.Key,
+        options: ScopeRegistryService.RegisterOptions,
+    ): Effect.Effect<ScopeRegistryService.Entry> {
+        return Effect.gen({ self: this }, function*() {
+            const entry = Equal.byReference({
+                scope: yield* Scope.make(options.finalizerExecutionStrategy),
+                expiresAt: Option.some(DateTime.addDuration(yield* DateTime.now, options.scopeCommitTimeout)),
+                finalizerExecutionDebounce: options.finalizerExecutionDebounce,
+            })
+
+            yield* SubscriptionRef.update(this.ref, HashMap.set(key, entry))
+            return entry
+        })
+    }
+
+    commit(key: ScopeRegistryService.Key): Effect.Effect<ScopeRegistryService.Entry, Cause.NoSuchElementError> {
+        return SubscriptionRef.get(this.ref).pipe(
+            Effect.map(HashMap.get(key)),
+            Effect.flatMap(Effect.fromOption),
+            Effect.map(entry => Equal.byReference<ScopeRegistryService.Entry>({
+                ...entry,
+                expiresAt: Option.none(),
+            })),
+            Effect.tap(entry => SubscriptionRef.update(this.ref, HashMap.set(key, entry))),
+        )
+    }
+
+    release(key: ScopeRegistryService.Key): Effect.Effect<ScopeRegistryService.Entry, Cause.NoSuchElementError> {
+        return SubscriptionRef.get(this.ref).pipe(
+            Effect.map(HashMap.get(key)),
+            Effect.flatMap(option => Effect.all([
+                DateTime.now,
+                Effect.fromOption(option),
+            ])),
+            Effect.map(([now, entry]) => Equal.byReference<ScopeRegistryService.Entry>({
+                ...entry,
+                expiresAt: Option.some(DateTime.addDuration(now, entry.finalizerExecutionDebounce)),
+            })),
+            Effect.tap(entry => SubscriptionRef.update(this.ref, HashMap.set(key, entry))),
+        )
+    }
+
+    get run(): Effect.Effect<void, never, Scope.Scope> {
+        return Effect.addFinalizer(() => this.dispose).pipe(
+            Effect.andThen(SubscriptionRef.changes(this.ref).pipe(
+                Stream.switchMap(entries => Option.match(this.getNextExpiration(entries), {
+                    onNone: () => Stream.never,
+                    onSome: expiresAt => Stream.fromEffect(DateTime.now.pipe(
+                        Effect.flatMap(now => DateTime.isLessThan(now, expiresAt)
+                            ? Effect.sleep(DateTime.distance(now, expiresAt))
+                            : Effect.void),
+                        Effect.andThen(Effect.uninterruptible(this.closeExpired)),
+                    )),
+                })),
+                Stream.runDrain,
+            )),
+            this.runSemaphore.withPermit,
+        )
+    }
+
+    get dispose(): Effect.Effect<void> {
+        return SubscriptionRef.getAndSet(
+            this.ref,
+            HashMap.empty<ScopeRegistryService.Key, ScopeRegistryService.Entry>(),
+        ).pipe(
+            Effect.flatMap(entries => Effect.forEach(
+                HashMap.values(entries),
+                entry => Scope.close(entry.scope, Exit.void),
+            )),
+            Effect.asVoid,
+        )
+    }
+
+    get closeExpired(): Effect.Effect<void> {
+        return Effect.flatMap(DateTime.now, now => SubscriptionRef.modify(
+            this.ref,
+            HashMap.reduce(
+                [
+                    Chunk.empty<ScopeRegistryService.Entry>(),
+                    HashMap.empty<ScopeRegistryService.Key, ScopeRegistryService.Entry>(),
+                ] as const,
+
+                ([expired, remaining], entry, key) => Option.exists(
+                    entry.expiresAt,
+                    expiresAt => DateTime.isLessThanOrEqualTo(expiresAt, now),
+                )
+                    ? [Chunk.append(expired, entry), remaining] as const
+                    : [expired, HashMap.set(remaining, key, entry)] as const,
+            ),
+        )).pipe(
+            Effect.flatMap(entries => Effect.forEach(
+                entries,
+                entry => Scope.close(entry.scope, Exit.void),
+            )),
+            Effect.asVoid,
+        )
+    }
+
+    getNextExpiration(
+        entries: HashMap.HashMap<ScopeRegistryService.Key, ScopeRegistryService.Entry>,
+    ): Option.Option<DateTime.Utc> {
+        return HashMap.reduce(
+            entries,
+            Option.none<DateTime.Utc>(),
+            (earliest, entry) => Option.match(entry.expiresAt, {
+                onNone: () => earliest,
+                onSome: expiresAt => Option.some(Option.match(earliest, {
+                    onNone: () => expiresAt,
+                    onSome: Order.min<DateTime.Utc>(DateTime.Order)(expiresAt),
+                })),
+            }),
+        )
+    }
+}
+
+export const make: Effect.Effect<ScopeRegistryService> = Effect.gen(function*() {
+    return new ScopeRegistryServiceImpl(
+        yield* SubscriptionRef.make(HashMap.empty<ScopeRegistryService.Key, ScopeRegistryService.Entry>()),
+        yield* Semaphore.make(1),
+    )
+})
+
+
+/**
+ * Internal Effect service that maintains a registry of scopes associated with React component instances.
+ *
+ * This service is used internally by the `Component.useScope` hook to manage the lifecycle of component scopes,
+ * including tracking active scopes and coordinating their cleanup when components unmount or dependencies change.
+ */
+export class ScopeRegistry extends Context.Service<ScopeRegistry, ScopeRegistryService>()(
+    "@effect-view/ScopeRegistry/ScopeRegistry"
+) {}
+
+export const layer = Layer.effect(ScopeRegistry, Effect.tap(
+    make,
+    registry => Effect.forkScoped(registry.run),
+))
@@ -0,0 +1,12 @@
+import { Function } from "effect"
+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
+} = Function.dual(2, <S>(self: React.SetStateAction<S>, prevState: S): S =>
+    typeof self === "function"
+        ? (self as (prevState: S) => S)(prevState)
+        : self
+)
@@ -0,0 +1,33 @@
+import { Effect, Equivalence, Option, Stream } from "effect"
+import * as React from "react"
+import * as Component from "./Component.js"
+
+
+export * from "effect/Stream"
+
+export const use: {
+    <A, E, R>(
+        stream: Stream.Stream<A, E, R>
+    ): Effect.Effect<Option.Option<A>, never, R>
+    <A extends NonNullable<unknown>, E, R>(
+        stream: Stream.Stream<A, E, R>,
+        initialValue: A,
+    ): Effect.Effect<Option.Some<A>, never, R>
+} = Effect.fnUntraced(function* <A extends NonNullable<unknown>, E, R>(
+    stream: Stream.Stream<A, E, R>,
+    initialValue?: A,
+) {
+    const [reactStateValue, setReactStateValue] = React.useState(() => initialValue
+        ? Option.some(initialValue)
+        : Option.none()
+    )
+
+    yield* Component.useReactEffect(() => Effect.forkScoped(
+        Stream.runForEach(
+            Stream.changesWith(stream, Equivalence.strictEqual()),
+            v => Effect.sync(() => setReactStateValue(Option.some(v))),
+        )
+    ), [stream])
+
+    return reactStateValue as Option.Some<A>
+})
@@ -0,0 +1,94 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import { Effect, Layer, SubscriptionRef } from "effect"
+import { Lens } from "effect-lens"
+import { describe, expect, it } from "vitest"
+import * as Component from "./Component.js"
+import * as ReactRuntime from "./ReactRuntime.js"
+import * as View from "./View.js"
+
+
+const makeRuntime = async () => {
+    const runtime = ReactRuntime.make(Layer.empty)
+    const effectRuntime = await runtime.runtime.context()
+
+    return {
+        runtime,
+        effectRuntime,
+        dispose: () => runtime.runtime.dispose(),
+    }
+}
+
+describe("View", () => {
+    it("useAll returns the latest values and rerenders when any input changes", async () => {
+        const { runtime, effectRuntime, dispose } = await makeRuntime()
+        const countRef = await Effect.runPromise(SubscriptionRef.make(1))
+        const labelRef = await Effect.runPromise(SubscriptionRef.make("a"))
+        const count = Lens.fromSubscriptionRef(countRef)
+        const label = Lens.fromSubscriptionRef(labelRef)
+
+        const Probe = Component.makeUntraced("ViewUseAllProbe")(function*() {
+            const [currentCount, currentLabel] = yield* View.useAll([count, label])
+
+            return <div>{`${currentCount}:${currentLabel}`}</div>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("1:a")
+
+        await Effect.runPromise(Lens.set(count, 2))
+        await screen.findByText("2:a")
+
+        await Effect.runPromise(Lens.set(label, "b"))
+        await screen.findByText("2:b")
+
+        view.unmount()
+        await dispose()
+    })
+
+    it("useAll respects the provided equivalence when processing updates", async () => {
+        const { runtime, effectRuntime, dispose } = await makeRuntime()
+        const itemRef = await Effect.runPromise(SubscriptionRef.make({ id: 1, label: "first" }))
+        const flagRef = await Effect.runPromise(SubscriptionRef.make(true))
+        const item = Lens.fromSubscriptionRef(itemRef)
+        const flag = Lens.fromSubscriptionRef(flagRef)
+
+        const Probe = Component.makeUntraced("ViewUseAllEquivalenceProbe")(function*() {
+            const [currentItem, currentFlag] = yield* View.useAll([item, flag], {
+                equivalence: ([selfItem, selfFlag], [thatItem, thatFlag]) =>
+                    selfItem.id === thatItem.id && selfFlag === thatFlag,
+            })
+
+            return <div>{`${currentItem.label}:${currentFlag ? "on" : "off"}`}</div>
+        }).pipe(
+            Component.withContext(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("first:on")
+
+        await Effect.runPromise(Lens.set(item, { id: 1, label: "ignored" }))
+        await waitFor(() => expect(screen.getByText("first:on")).toBeTruthy())
+        expect(screen.queryByText("ignored:on")).toBeNull()
+
+        await Effect.runPromise(Lens.set(flag, false))
+        await screen.findByText("ignored:off")
+
+        await Effect.runPromise(Lens.set(item, { id: 2, label: "updated" }))
+        await screen.findByText("updated:off")
+
+        view.unmount()
+        await dispose()
+    })
+})
@@ -0,0 +1,42 @@
+import { Effect, Equivalence, Stream } from "effect"
+import { View } from "effect-lens"
+import * as React from "react"
+import * as Component from "./Component.js"
+
+
+export * from "effect-lens/View"
+
+export declare namespace useAll {
+    export type Success<T extends readonly View.View<any, any, any>[]> = [T[number]] extends [never]
+        ? never
+        : { [K in keyof T]: T[K] extends View.View<infer A, infer _E, infer _R> ? A : never }
+
+    export interface Options<A> {
+        readonly equivalence?: Equivalence.Equivalence<A>
+    }
+}
+
+export const useAll = Effect.fnUntraced(function* <const T extends readonly View.View<any, any, any>[]>(
+    elements: T,
+    options?: useAll.Options<useAll.Success<NoInfer<T>>>,
+): Effect.fn.Return<
+    useAll.Success<T>,
+    [T[number]] extends [never] ? never : T[number] extends View.View<infer _A, infer E, infer _R> ? E : never,
+    [T[number]] extends [never] ? never : T[number] extends View.View<infer _A, infer _E, infer R> ? R : never
+> {
+    const [reactStateValue, setReactStateValue] = React.useState(
+        yield* Component.useOnMount(() => Effect.all(elements.map(View.get)))
+    )
+
+    yield* Component.useReactEffect(() => Stream.make(reactStateValue).pipe(
+        Stream.concat(View.changes(View.zipLatestAll(...elements))),
+        Stream.changesWith((options?.equivalence as Equivalence.Equivalence<any[]> | undefined) ?? Equivalence.Array(Equivalence.strictEqual())),
+        Stream.drop(1),
+        Stream.runForEach(v =>
+            Effect.sync(() => setReactStateValue(v))
+        ),
+        Effect.forkScoped,
+    ), elements)
+
+    return reactStateValue as any
+})
@@ -0,0 +1,17 @@
+export * as Async from "./Async.js"
+export * as Component from "./Component.js"
+export * as Form from "./Form.js"
+export * as Lens from "./Lens.js"
+export * as LensForm from "./LensForm.js"
+export * as Memoized from "./Memoized.js"
+export * as Mutation from "./Mutation.js"
+export * as MutationForm from "./MutationForm.js"
+export * as PubSub from "./PubSub.js"
+export * as Query from "./Query.js"
+export * as QueryClient from "./QueryClient.js"
+export * as ReactRuntime from "./ReactRuntime.js"
+export * as Refreshable from "./Refreshable.js"
+export * as ScopeRegistry from "./ScopeRegistry.js"
+export * as SetStateAction from "./SetStateAction.js"
+export * as Stream from "./Stream.js"
+export * as View from "./View.js"
@@ -0,0 +1,4 @@
+import { configure } from "@testing-library/react"
+
+
+configure({ reactStrictMode: true })
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["**/setup-tests.ts", "**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"]
+}
@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "NodeNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    // "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "NodeNext",
+    // "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    // "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false,
+
+    // Build
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declaration": true,
+    "sourceMap": true,
+
+    "plugins": [
+      { "name": "@effect/language-service" }
+    ]
+  },
+
+  "include": ["./src"],
+}
@@ -0,0 +1,10 @@
+import { defineConfig } from "vitest/config"
+
+
+export default defineConfig({
+    test: {
+        environment: "jsdom",
+        include: ["./src/**/*.test.ts?(x)"],
+        setupFiles: ["./src/setup-tests.ts"],
+    },
+})