Update dependency typescript to v7

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: Thilawyn/effect-fc#50

README.md

@@ -1,6 +1,6 @@
 # Effect FC Monorepo
 
-[Effect-TS](https://effect.website/) integration for React 19+ that allows you to write function components using Effect generators.
+[Effect-TS](https://effect.website/) integration for React 19.2+ that allows you to write function components using Effect generators.
 
 This monorepo contains:
 - [The `effect-fc` library](packages/effect-fc)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-fc/monorepo",
-  "packageManager": "bun@1.3.6",
+  "packageManager": "bun@1.3.14",
   "private": true,
   "workspaces": [
     "./packages/*"
@@ -15,12 +15,12 @@
     "clean:modules": "turbo clean:modules && rm -rf node_modules"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.11",
-    "@effect/language-service": "^0.72.0",
-    "@types/bun": "^1.3.6",
-    "npm-check-updates": "^19.3.1",
+    "@biomejs/biome": "^2.4.16",
+    "@effect/language-service": "^0.86.2",
+    "@types/bun": "^1.3.14",
+    "npm-check-updates": "^22.2.1",
     "npm-sort": "^0.0.4",
-    "turbo": "^2.7.5",
-    "typescript": "^5.9.3"
+    "turbo": "^2.9.16",
+    "typescript": "^7.0.0"
   }
 }

packages/docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/docs/README.md

@@ -0,0 +1,17 @@
+# effect-fc Docs
+
+The documentation site is built with Docusaurus.
+
+## Local Development
+
+```bash
+bun run --cwd packages/docs start
+```
+
+## Build
+
+```bash
+bun run --cwd packages/docs build
+```
+
+The static site is written to `packages/docs/build`.

packages/docs/biome.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://biomejs.dev/schemas/latest/schema.json",
+  "root": false,
+  "extends": "//",
+  "files": {
+    "includes": ["./src/**"]
+  }
+}

packages/docs/docs/forms.md

@@ -0,0 +1,168 @@
+---
+sidebar_position: 3
+title: Forms
+---
+
+# Forms
+
+The form modules provide an Effect-first model for editable, schema-validated
+state. They are not a visual component library. Instead, they give you
+Lenses/Subscribables for form values, validation issues, and commit state, so
+you can build the UI with whatever components your app already uses.
+
+The base `Form` type represents a field. A field tracks both the raw encoded
+value used by inputs and the decoded value produced by an Effect `Schema`:
+
+- `encodedValue`: a `Lens` containing the raw input value.
+- `value`: a `Subscribable` containing the decoded value as an `Option`.
+- `issues`: a `Subscribable` containing schema validation issues for that field.
+- `canCommit`, `isValidating`, and `isCommitting`: `Subscribable` flags for UI
+  state.
+
+There are two root form flavors:
+
+- `SubmittableForm`: owns local encoded form state, validates it, and submits a
+  decoded value through a mutation.
+- `SynchronizedForm`: wraps an existing target `Lens` and writes valid changes
+  back to that target.
+
+Most apps create one of those root forms, then focus it into fields with
+`Form.focusObjectOn`, `Form.focusArrayAt`, or the other focusing helpers.
+
+The core form model is Effect code and can technically be used outside
+Effect-FC. Effect-FC adds the React-facing hooks, such as `Form.useInput`, that
+make those forms convenient to bind to components.
+
+## Field Inputs
+
+Use `Form.useInput` to connect a `Form` field to a controlled input. It returns
+a React-style `{ value, setValue }` pair and writes changes back to the field's
+`encodedValue` Lens.
+
+```tsx
+import { Component, Form, Subscribable } from "effect-fc"
+
+const TextInputView = Component.make("TextInput")(
+  function* (props: {
+    readonly form: Form.Form<readonly PropertyKey[], string, string>
+    readonly label: string
+  }) {
+    const input = yield* Form.useInput(props.form, {
+      debounce: "250 millis",
+    })
+    const [issues] = yield* Subscribable.useAll([props.form.issues])
+
+    return (
+      <label>
+        {props.label}
+        <input
+          value={input.value}
+          onChange={(event) => input.setValue(event.currentTarget.value)}
+        />
+        {issues.map((issue) => (
+          <small key={issue.path.join(".")}>
+            {issue.message}
+          </small>
+        ))}
+      </label>
+    )
+  },
+)
+```
+
+Use `Form.useOptionalInput` for `Option` fields. It returns the same value/setter
+pair plus `enabled` and `setEnabled`, which is useful for optional inputs that
+can be toggled on and off.
+
+## Submittable Forms
+
+Use `SubmittableForm` when the user edits local encoded form state, validates it
+with a schema, and then submits a decoded value.
+
+```tsx
+import { Effect, Schema } from "effect"
+import { Component, Form, SubmittableForm, Subscribable } from "effect-fc"
+import { TextInputView } from "./TextInputView"
+
+const RegisterSchema = Schema.Struct({
+  email: Schema.String,
+  password: Schema.String,
+})
+
+class RegisterFormState extends Effect.Service<RegisterFormState>()(
+  "RegisterFormState",
+  {
+    scoped: Effect.gen(function* () {
+      const form = yield* SubmittableForm.service({
+        schema: RegisterSchema,
+        initialEncodedValue: {
+          email: "",
+          password: "",
+        },
+        f: ([value]) =>
+          Effect.log(`Registering ${value.email}`),
+      })
+
+      return {
+        form,
+        email: Form.focusObjectOn(form, "email"),
+        password: Form.focusObjectOn(form, "password"),
+      } as const
+    }),
+  },
+) {}
+
+const RegisterFormView = Component.make("RegisterForm")(
+  function* () {
+    const state = yield* RegisterFormState
+    const [canCommit, isCommitting] = yield* Subscribable.useAll([
+      state.form.canCommit,
+      state.form.isCommitting,
+    ])
+    const runPromise = yield* Component.useRunPromise()
+    const TextInput = yield* TextInputView.use
+
+    return (
+      <form
+        onSubmit={(event) => {
+          event.preventDefault()
+          void runPromise(state.form.submit)
+        }}
+      >
+        <TextInput label="Email" form={state.email} />
+        <TextInput label="Password" form={state.password} />
+        <button disabled={!canCommit}>
+          {isCommitting ? "Submitting..." : "Submit"}
+        </button>
+      </form>
+    )
+  },
+)
+```
+
+`SubmittableForm.service` starts validation in the form's scope. The form keeps
+its encoded input state, decoded value, validation issues, submit mutation, and
+commit flags available as Lenses/Subscribables.
+
+## Synchronized Forms
+
+Use `SynchronizedForm` when a form should edit an existing target `Lens`.
+Instead of submitting a final value, valid encoded changes are synchronized back
+to the target Lens.
+
+This is useful for edit screens where the form is a validated view over existing
+state. Use `SubmittableForm` for "submit this draft" flows, and
+`SynchronizedForm` for "keep this target state synchronized when valid" flows.
+
+## Focusing Fields
+
+Forms can be focused just like Lenses:
+
+```tsx
+const emailField = Form.focusObjectOn(form, "email")
+const firstItemField = Form.focusArrayAt(form, 0)
+```
+
+Focused fields keep the parent form's validation and commit state, but narrow
+`encodedValue`, `value`, and `issues` to the field path. This lets each input
+component receive only the field it needs.

packages/docs/docs/getting-started.md

@@ -0,0 +1,415 @@
+---
+sidebar_position: 1
+title: Getting Started
+---
+
+# Getting Started
+
+`effect-fc` lets React components be written as Effect programs. Inside a
+component body you can yield services, run Effects, subscribe to Effect-powered
+state, and still export a normal React function component at the edge of your
+app.
+
+## Install
+
+Install `effect-fc` alongside `effect` and React 19.2 or newer:
+
+```bash npm2yarn
+npm install effect-fc effect react
+```
+```bash npm2yarn
+npm install --save-dev @types/react
+```
+
+`effect-fc` is not opinionated about the React platform. Use it with web,
+native, custom renderers, or any environment where React components can run.
+Then install the platform-specific React packages for your target.
+
+For web apps, install React DOM:
+
+```bash npm2yarn
+npm install react-dom
+```
+```bash npm2yarn
+npm install --save-dev @types/react-dom
+```
+
+## Create A Runtime
+
+An Effect-FC app needs an Effect runtime. Build one from the services your UI
+needs, then share it with React through `ReactRuntime.Provider`.
+
+For an empty app, `Layer.empty` is enough:
+
+```tsx title="src/runtime.ts"
+import { Layer } from "effect"
+import { ReactRuntime } from "effect-fc"
+
+export const runtime = ReactRuntime.make(Layer.empty)
+```
+
+As your app grows, add services to the layer:
+
+```tsx title="src/runtime.ts"
+import { FetchHttpClient } from "@effect/platform"
+import { Layer } from "effect"
+import { ReactRuntime } from "effect-fc"
+
+const AppLive = Layer.empty.pipe(
+  Layer.provideMerge(FetchHttpClient.layer),
+)
+
+export const runtime = ReactRuntime.make(AppLive)
+```
+
+## Provide The Runtime
+
+At the React root, wrap your app with `ReactRuntime.Provider`:
+
+```tsx title="src/main.tsx"
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { ReactRuntime } from "effect-fc"
+import { App } from "./App"
+import { runtime } from "./runtime"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ReactRuntime.Provider runtime={runtime}>
+      <App />
+    </ReactRuntime.Provider>
+  </StrictMode>,
+)
+```
+
+`ReactRuntime.Provider` also works with routers. Keep it above your router
+provider so route components can be converted with the same runtime context.
+
+## Write Your First Component
+
+Use `Component.make` when you want automatic tracing spans, or
+`Component.makeUntraced` when you only want the component behavior. This creates
+an Effect-FC component, not a plain React component yet.
+
+The Effect run during render must be synchronous. Effect-FC follows React's
+render model, so component bodies should produce JSX without waiting on async
+work. Use lifecycle hooks, callbacks, queries, or other Effect-FC helpers for
+async work that happens outside render.
+
+```tsx title="src/HelloView.tsx"
+import { Effect } from "effect"
+import { Component } from "effect-fc"
+
+export const HelloView = Component.make("HelloView")(function* (props: {
+  readonly name: string
+}) {
+  const message = yield* Effect.succeed(`Hello, ${props.name}`)
+
+  return <h1>{message}</h1>
+})
+```
+
+At this point `HelloView` can yield Effects, services, and scoped lifecycle
+work, but React cannot render it directly.
+
+## Apply A Runtime
+
+Use `Component.withRuntime` at the boundary where an Effect-FC component needs
+to become a regular React function component.
+
+```tsx title="src/Hello.tsx"
+import { Component } from "effect-fc"
+import { HelloView } from "./HelloView"
+import { runtime } from "./runtime"
+
+export const Hello = HelloView.pipe(
+  Component.withRuntime(runtime.context),
+)
+```
+
+`Hello` is now a normal React component:
+
+```tsx title="src/App.tsx"
+import { Hello } from "./Hello"
+
+export function App() {
+  return <Hello name="Effect" />
+}
+```
+
+## Use Effect-FC Components Together
+
+Inside an Effect-FC component, other Effect-FC components are available through
+their `.use` effect. Yield `.use` to get a React component for the current
+runtime context, then render it like JSX.
+
+```tsx title="src/GreetingCardView.tsx"
+import { Component } from "effect-fc"
+import { HelloView } from "./HelloView"
+
+export const GreetingCardView = Component.make("GreetingCard")(
+  function* () {
+    const Hello = yield* HelloView.use
+
+    return (
+      <section>
+        <Hello name="Effect" />
+        <p>This component is still running inside Effect-FC.</p>
+      </section>
+    )
+  },
+)
+```
+
+Use `Component.withRuntime` only when you leave the Effect-FC tree and need a
+normal React component again:
+
+```tsx title="src/GreetingCard.tsx"
+import { Component } from "effect-fc"
+import { GreetingCardView } from "./GreetingCardView"
+import { runtime } from "./runtime"
+
+export const GreetingCard = GreetingCardView.pipe(
+  Component.withRuntime(runtime.context),
+)
+```
+
+## Component Lifecycle
+
+Every Effect-FC component instance exposes an Effect `Scope`. Effects that need
+`Scope.Scope` can use that component scope to register finalizers, fork scoped
+work, or acquire scoped resources.
+
+The component scope is created when React mounts the component and closes when
+React unmounts it. When the scope closes, Effect runs the finalizers registered
+inside that scope.
+
+Finalizers are forked when the scope closes, so cleanup logic can run
+asynchronous Effects even though the component body itself must stay
+synchronous.
+
+```tsx title="src/MountedMessageView.tsx"
+import { Console, Effect } from "effect"
+import { Component } from "effect-fc"
+
+export const MountedMessageView = Component.make("MountedMessage")(
+  function* () {
+    const message = yield* Component.useOnMount(() =>
+      Effect.gen(function* () {
+        yield* Console.log("MountedMessage mounted")
+        yield* Effect.addFinalizer(() =>
+          Console.log("MountedMessage unmounted"),
+        )
+
+        return "This value was loaded on mount."
+      }),
+    )
+
+    return <p>{message}</p>
+  },
+)
+```
+
+Use `Component.useOnMount` when the component needs a value produced by an
+Effect during its first render. The value is then cached for the component
+instance. You can also use it to set up scoped component logic, subscriptions,
+or resources that should live for the lifetime of that component instance.
+
+Use `Component.useOnChange` when render needs the value computed by
+scoped work that depends on changing inputs. When a dependency changes, React
+re-renders the component and the hook computes the next value during that
+render.
+
+```tsx
+import { Console, Effect } from "effect"
+import { Component } from "effect-fc"
+
+const UserPanelView = Component.make("UserPanel")(
+  function* (props: { readonly userId: string }) {
+    const label = yield* Component.useOnChange(
+      () =>
+        Effect.gen(function* () {
+          yield* Console.log(`Preparing view for ${props.userId}`)
+          yield* Effect.addFinalizer(() =>
+            Console.log(`Cleaning up ${props.userId}`),
+          )
+
+          return `Viewing user ${props.userId}`
+        }),
+      [props.userId],
+    )
+
+    return <p>{label}</p>
+  },
+)
+```
+
+In this example, each `userId` gets its own scope. When `userId` changes,
+Effect-FC closes the previous scope, runs its finalizers, and creates a new
+scope for the next load. Unlike `useOnMount`, `useOnChange` does not expose the
+component's root scope directly. It creates and provides its own scope for that
+dependency window. Some other Effect-FC hooks follow the same pattern when they
+need a lifecycle that is narrower than the whole component instance.
+
+## Useful Effect-FC Hooks
+
+Unlike plain React hooks, Effect-FC hooks return Effects. Use `yield*` to run
+them inside the component body.
+
+The most common Effect-FC hooks are:
+
+- `Component.useOnMount`: run an Effect once during the component's first render
+  after mount, and return its value. The Effect must be synchronous.
+
+```tsx
+const initialData = yield* Component.useOnMount(() => loadInitialData)
+```
+
+- `Component.useOnChange`: when a dependency changes, React re-renders the
+  component and the Effect is run again inside the component body. It returns
+  the latest value, so the Effect must be synchronous too.
+
+```tsx
+const label = yield* Component.useOnChange(() => formatUserLabel(id), [id])
+```
+
+- `Component.useReactEffect`: Effect-powered `React.useEffect` for side effects
+  that do not need to compute render output or trigger a re-render. The Effect
+  must be synchronous and can register scoped finalizers.
+
+```tsx
+yield* Component.useReactEffect(
+  () => Effect.forkScoped(subscribeToUser(id)),
+  [id],
+)
+```
+
+- `Component.useReactLayoutEffect`: Effect-powered `React.useLayoutEffect` with scoped
+  finalizers.
+
+```tsx
+yield* Component.useReactLayoutEffect(() => measure(ref), [])
+```
+
+- `Component.useRunSync` and `Component.useRunPromise`: run Effects from React
+  event handlers.
+
+```tsx
+const runPromise = yield* Component.useRunPromise()
+
+return (
+  <button onClick={() => void runPromise(saveUser)}>
+    Save
+  </button>
+)
+```
+
+- `Component.useCallbackSync` and `Component.useCallbackPromise`: create stable
+  React callbacks.
+
+```tsx
+const save = yield* Component.useCallbackPromise(
+  (user: User) => saveUser(user),
+  [],
+)
+
+return <button onClick={() => void save(user)}>Save</button>
+```
+
+## Use React Normally
+
+An Effect-FC component is still a React function component. Anything you can do
+in a regular React component can also be done in an Effect-FC component,
+including React hooks, refs, event handlers, context, and JSX composition.
+
+```tsx
+import { Component } from "effect-fc"
+import * as React from "react"
+
+const CounterView = Component.make("Counter")(function* () {
+  const [count, setCount] = React.useState(0)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+
+  return (
+    <button ref={buttonRef} onClick={() => setCount(count + 1)}>
+      Count: {count}
+    </button>
+  )
+})
+```
+
+Use regular React hooks for local UI concerns, and reach for Effect-FC helpers
+when the component needs Effect services, scopes, resources, or Effect-powered
+callbacks.
+
+## Use Tags
+
+Components can yield Effect tags directly in the component body. There is no
+need to memoize the service yourself; just yield the tag wherever the component
+needs it.
+
+```tsx title="src/Greeting.tsx"
+const GreetingView = Component.make("Greeting")(function* (props: {
+  readonly name: string
+}) {
+  const greeting = yield* GreetingService
+
+  return <p>{greeting.greet(props.name)}</p>
+})
+```
+
+Service values in the runtime context are reactive by default. If a provided
+service instance changes, Effect-FC unmounts and mounts again the components
+that depend on that context, so they read the new service and restart their
+scoped lifecycle with the new environment. For services that should not trigger
+that behavior, pass their tags with `Component.withOptions({ nonReactiveTags:
+[...] })`.
+
+## Provide Services To A Subtree
+
+Use `Component.useContextFromLayer` when an Effect-FC component should provide
+extra services to another Effect-FC component. It turns a `Layer` into a runtime
+context that can be provided to `.use`.
+
+```tsx title="src/GreetingPageView.tsx"
+import { Effect } from "effect"
+import { Component } from "effect-fc"
+import { GreetingView } from "./Greeting"
+import { GreetingService } from "./services"
+
+const GreetingLive = GreetingService.Default({
+  greet: (name: string) => `Welcome, ${name}`,
+})
+
+export const GreetingPageView = Component.make("GreetingPage")(function* () {
+  const context = yield* Component.useContextFromLayer(GreetingLive)
+  const Greeting = yield* Effect.provide(GreetingView.use, context)
+
+  return <Greeting name="Effect" />
+})
+```
+
+The layer passed to `useContextFromLayer` should be stable. If a new layer value
+is created on every render, Effect-FC has to build a new context, which can
+cause unnecessary re-renders and scoped lifecycle restarts. Define static layers
+outside the component, or memoize layers that depend on React props or state.
+
+Layers built with `useContextFromLayer` are scoped to the component that builds
+them. That means service construction can register scoped logic, acquire
+resources, fork scoped fibers, and add finalizers that are tied to that
+component's lifecycle.
+
+## Where To Go Next
+
+Once the runtime and component boundary are in place, the rest of the library
+builds on the same idea:
+
+- `Subscribable.useAll` reads Effect subscribables and rerenders when they
+  change.
+- `Lens` connects React state and Effect `SubscriptionRef` values.
+- `Query` and `Mutation` model async data and user-triggered operations.
+- `Form`, `SubmittableForm`, and `SynchronizedForm` help build Effect-backed
+  forms.
+
+The important pattern is small and repeatable: write Effect-FC components inside
+the runtime, then use `Component.withRuntime` at React boundaries.

packages/docs/docs/state-management.md

@@ -0,0 +1,245 @@
+---
+sidebar_position: 2
+title: State Management
+---
+
+# State Management
+
+`Lens` is the main type used for state management in `effect-fc`.
+
+A Lens is an effectful handle to a piece of state. It can read the current value,
+subscribe to changes, and write updates back to the underlying source. A Lens
+can point at a whole state object or focus on one nested field inside it.
+
+The usual pattern is to create state with Effect primitives such as
+`SubscriptionRef`, turn that primitive into a Lens with a matching constructor
+such as `Lens.fromSubscriptionRef`, and bind Lens values into components with
+`Subscribable.useAll`.
+
+`Subscribable` is the read-only side of this model. Every Lens is also a
+Subscribable.
+
+`effect-fc` re-exports the `Lens` and `Subscribable` modules from
+[`effect-lens`](https://github.com/Thiladev/effect-lens) for convenience. The
+core data model and transformation APIs belong to `effect-lens`, so check the
+[`effect-lens` documentation](https://github.com/Thiladev/effect-lens/tree/master/packages/effect-lens) for the full Lens/Subscribable API.
+
+## Where To Store State
+
+State can live pretty much anywhere as a `Lens` or `Subscribable`: in a
+service, in a layer, in a component scope, or alongside plain React state. Pick
+the owner based on who needs the state. Once you have a Lens/Subscribable
+handle, pass it around however you like, including through React props.
+
+If state is shared by multiple components or belongs to application logic, store
+it in an Effect service:
+
+```tsx
+import { Effect, SubscriptionRef } from "effect"
+import { Component, Lens, Subscribable } from "effect-fc"
+
+class CounterState extends Effect.Service<CounterState>()("CounterState", {
+  effect: Effect.gen(function* () {
+    const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0))
+
+    return { count } as const
+  }),
+}) {}
+
+const CounterValueView = Component.make("CounterValue")(function* () {
+  const state = yield* CounterState
+  const [count] = yield* Subscribable.useAll([state.count])
+
+  return <p>Count: {count}</p>
+})
+```
+
+If state belongs to a single Effect-FC component instance, or to a shallow
+hierarchy of subcomponents that receive it through props, create it with
+`Component.useOnMount`:
+
+```tsx
+import { Effect, SubscriptionRef } from "effect"
+import { Component, Lens, Subscribable } from "effect-fc"
+
+const LocalCounterView = Component.make("LocalCounter")(function* () {
+  const state = yield* Component.useOnMount(() =>
+    Effect.gen(function* () {
+      const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0))
+
+      return { count } as const
+    }),
+  )
+  const [count] = yield* Subscribable.useAll([state.count])
+
+  return <p>Count: {count}</p>
+})
+```
+
+For simple UI state that is not shared and does not need Effect integration,
+prefer regular React state. A local "show details" toggle is usually better as
+`React.useState(false)` than as a Lens.
+
+## Subscribable.useAll
+
+A `Subscribable<A>` is reactive state with a current value and a stream of
+changes. Use `Subscribable.useAll` whenever a component needs to bind
+subscribable values into render output.
+
+`Lens` is a `Subscribable`, so this is also the default way to read Lens values
+from a component.
+
+```tsx
+import { Effect, SubscriptionRef } from "effect"
+import { Component, Lens, Subscribable } from "effect-fc"
+
+class CounterState extends Effect.Service<CounterState>()("CounterState", {
+  effect: Effect.gen(function* () {
+    const count = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(0))
+    const doubled = Subscribable.map(count, (n) => n * 2)
+
+    return { count, doubled } as const
+  }),
+}) {}
+
+const CounterReadOnlyView = Component.make("CounterReadOnly")(
+  function* () {
+    const state = yield* CounterState
+    const [count, doubled] = yield* Subscribable.useAll([
+      state.count,
+      state.doubled,
+    ])
+
+    return <p>Count: {count}, doubled: {doubled}</p>
+  },
+)
+```
+
+`Subscribable.useAll` reads the current values during render and uses scoped subscriptions to update React state when changes arrive.
+
+When you need to modify state, write to the Lens with `Lens.set` or `Lens.update`:
+
+```tsx
+const CounterControlsView = Component.make("CounterControls")(
+  function* () {
+    const state = yield* CounterState
+    const [count] = yield* Subscribable.useAll([state.count])
+
+    const increment = yield* Component.useCallbackSync(
+      () => Lens.update(state.count, (n) => n + 1),
+      [],
+    )
+    const reset = yield* Component.useCallbackSync(
+      () => Lens.set(state.count, 0),
+      [],
+    )
+
+    return (
+      <section>
+        <p>Count: {count}</p>
+        <button onClick={increment}>Increment</button>
+        <button onClick={reset}>Reset</button>
+      </section>
+    )
+  },
+)
+```
+
+## Lens.useState
+
+`Lens.useState` is useful when React needs the familiar `[value, setValue]`
+tuple, backed by a Lens. Reach for it when the JSX API expects a synchronous
+setter, especially controlled inputs such as text fields, checkboxes, selects,
+or third-party components with `value` / `onChange` props.
+
+If a component only needs to display the value, prefer `Subscribable.useAll`.
+`Lens.useState` is for places where reading and writing need to be wired
+together in React's local-state shape.
+
+```tsx
+import { Effect, SubscriptionRef } from "effect"
+import { Component, Lens } from "effect-fc"
+
+class FormState extends Effect.Service<FormState>()("FormState", {
+  effect: Effect.gen(function* () {
+    const name = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(""))
+
+    return { name } as const
+  }),
+}) {}
+
+const NameInputView = Component.make("NameInput")(function* () {
+  const state = yield* FormState
+  const [name, setName] = yield* Lens.useState(state.name)
+
+  return (
+    <input
+      value={name}
+      onChange={(event) => setName(event.currentTarget.value)}
+    />
+  )
+})
+```
+
+`Lens.useState` returns the current value and a React-compatible setter. Calling
+the setter writes through the Lens, so every other component subscribed to the
+same Lens sees the update.
+
+## Focused Lenses
+
+Use focused Lenses when a component should work with one part of a larger state
+object. A focused Lens is still a Lens, so it can be read with
+`Subscribable.useAll` or used with `Lens.useState` when React needs a
+read/write tuple.
+
+```tsx
+import { Effect, SubscriptionRef } from "effect"
+import { Component, Lens, Subscribable } from "effect-fc"
+
+interface UserProfile {
+  readonly name: string
+  readonly email: string
+  readonly role: string
+}
+
+class ProfileState extends Effect.Service<ProfileState>()("ProfileState", {
+  effect: Effect.gen(function* () {
+    const profile = Lens.fromSubscriptionRef(
+      yield* SubscriptionRef.make<UserProfile>({
+        name: "",
+        email: "",
+        role: "reader",
+      }),
+    )
+    const name = Lens.focusObjectOn(profile, "name")
+    const role = Lens.focusObjectOn(profile, "role")
+
+    return { profile, name, role } as const
+  }),
+}) {}
+
+const ProfileNameView = Component.make("ProfileName")(function* () {
+  const state = yield* ProfileState
+  const [name, setName] = yield* Lens.useState(state.name)
+  const [role] = yield* Subscribable.useAll([state.role])
+
+  return (
+    <label>
+      Name
+      <input
+        value={name}
+        onChange={(event) => setName(event.currentTarget.value)}
+      />
+      <span>Role: {role}</span>
+    </label>
+  )
+})
+```
+
+Updating the focused `name` Lens through `Lens.useState` updates the parent
+`profile` Lens. The focused `role` Lens is only read, so it stays on the simpler
+`Subscribable.useAll` path.
+
+For focusing into nested state, deriving lenses, custom write behavior, and the
+complete API, refer to the
+[`effect-lens` documentation](https://github.com/Thiladev/effect-lens/tree/master/packages/effect-lens).

packages/docs/docusaurus.config.ts

@@ -0,0 +1,128 @@
+import type * as Preset from "@docusaurus/preset-classic"
+import type { Config } from "@docusaurus/types"
+import { themes as prismThemes } from "prism-react-renderer"
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+const config: Config = {
+  title: "effect-fc",
+  tagline: "Write React function components with Effect",
+  favicon: "img/favicon.ico",
+
+  // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
+  future: {
+    v4: true, // Improve compatibility with the upcoming Docusaurus v4
+  },
+
+  // Set the production url of your site here
+  url: "https://thiladev.github.io",
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: "/effect-fc/",
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
+  organizationName: "Thiladev", // Usually your GitHub org/user name.
+  projectName: "effect-fc", // Usually your repo name.
+
+  onBrokenLinks: "throw",
+
+  // Even if you don't use internationalization, you can use this field to set
+  // useful metadata like html lang. For example, if your site is Chinese, you
+  // may want to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          sidebarPath: "./sidebars.ts",
+          editUrl:
+            "https://github.com/Thiladev/effect-fc/tree/main/packages/docs/",
+        },
+        blog: false,
+        theme: {
+          customCss: "./src/css/custom.css",
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
+  themeConfig: {
+    // Replace with your project's social card
+    colorMode: {
+      respectPrefersColorScheme: true,
+    },
+    navbar: {
+      title: "effect-fc",
+      logo: {
+        alt: "effect-fc logo",
+        src: "img/logo.svg",
+      },
+      items: [
+        {
+          type: "docSidebar",
+          sidebarId: "docsSidebar",
+          position: "left",
+          label: "Docs",
+        },
+        {
+          href: "https://github.com/Thiladev/effect-fc",
+          label: "GitHub",
+          position: "right",
+        },
+      ],
+    },
+    footer: {
+      style: "dark",
+      links: [
+        {
+          title: "Docs",
+          items: [
+            {
+              label: "Getting Started",
+              to: "/docs/getting-started",
+            },
+          ],
+        },
+        {
+          title: "Project",
+          items: [
+            {
+              label: "GitHub",
+              href: "https://github.com/Thiladev/effect-fc",
+            },
+            {
+              label: "Example App",
+              href: "https://github.com/Thiladev/effect-fc/tree/main/packages/example",
+            },
+          ],
+        },
+        {
+          title: "Ecosystem",
+          items: [
+            {
+              label: "Effect",
+              href: "https://effect.website/",
+            },
+            {
+              label: "React",
+              href: "https://react.dev/",
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} effect-fc contributors. Built with Docusaurus.`,
+    },
+    prism: {
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
+    },
+  } satisfies Preset.ThemeConfig,
+}
+
+export default config

packages/docs/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "3.10.1",
+    "@docusaurus/faster": "^3.10.1",
+    "@docusaurus/preset-classic": "3.10.1",
+    "@mdx-js/react": "^3.1.1",
+    "clsx": "^2.1.1",
+    "prism-react-renderer": "^2.4.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.10.1",
+    "@docusaurus/tsconfig": "3.10.1",
+    "@docusaurus/types": "3.10.1",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "~7.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=20.0"
+  }
+}

packages/docs/sidebars.ts

@@ -0,0 +1,9 @@
+import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+const sidebars: SidebarsConfig = {
+  docsSidebar: ["getting-started", "state-management", "forms"],
+}
+
+export default sidebars

packages/docs/src/css/custom.css

@@ -0,0 +1,37 @@
+:root {
+  --ifm-color-primary: #0b6f74;
+  --ifm-color-primary-dark: #096469;
+  --ifm-color-primary-darker: #085e63;
+  --ifm-color-primary-darkest: #074d51;
+  --ifm-color-primary-light: #0d7a7f;
+  --ifm-color-primary-lighter: #0e8085;
+  --ifm-color-primary-lightest: #109096;
+  --ifm-background-color: #fffaf1;
+  --ifm-code-font-size: 95%;
+  --ifm-font-family-base:
+    "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
+  --docusaurus-highlighted-code-line-bg: rgba(11, 111, 116, 0.1);
+}
+
+.button--primary {
+  --ifm-button-background-color: #0b6f74;
+  --ifm-button-border-color: #0b6f74;
+}
+
+.button--secondary {
+  --ifm-button-background-color: #f4a636;
+  --ifm-button-border-color: #f4a636;
+  --ifm-button-color: #1f2526;
+}
+
+[data-theme="dark"] {
+  --ifm-color-primary: #7ad6d4;
+  --ifm-color-primary-dark: #5cccca;
+  --ifm-color-primary-darker: #4cc6c4;
+  --ifm-color-primary-darkest: #34aaa8;
+  --ifm-color-primary-light: #98e0de;
+  --ifm-color-primary-lighter: #a8e6e4;
+  --ifm-color-primary-lightest: #d5f4f3;
+  --ifm-background-color: #111c1f;
+  --docusaurus-highlighted-code-line-bg: rgba(122, 214, 212, 0.18);
+}

packages/docs/src/pages/index.module.css

@@ -0,0 +1,80 @@
+.page {
+  min-height: calc(100vh - var(--ifm-navbar-height));
+  background:
+    radial-gradient(circle at top left, rgba(11, 111, 116, 0.22), transparent 32rem),
+    radial-gradient(circle at 85% 20%, rgba(244, 166, 54, 0.18), transparent 28rem),
+    linear-gradient(135deg, #f8f4ea 0%, #eef8f7 48%, #fffaf1 100%);
+}
+
+.hero {
+  padding: 8rem 1rem 5rem;
+}
+
+.eyebrow {
+  color: #0b6f74;
+  font-size: 0.85rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  margin-bottom: 1.25rem;
+  text-transform: uppercase;
+}
+
+.hero h1 {
+  color: #132c2f;
+  font-size: clamp(3rem, 9vw, 6.75rem);
+  letter-spacing: -0.08em;
+  line-height: 0.9;
+  margin: 0;
+  max-width: 880px;
+}
+
+.lede {
+  color: #385256;
+  font-size: clamp(1.15rem, 2vw, 1.45rem);
+  line-height: 1.65;
+  margin: 2rem 0 0;
+  max-width: 720px;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2.5rem;
+}
+
+.cards {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding: 0 1rem 6rem;
+}
+
+.cards article {
+  background: rgba(255, 255, 255, 0.74);
+  border: 1px solid rgba(19, 44, 47, 0.12);
+  border-radius: 1.5rem;
+  box-shadow: 0 24px 80px rgba(19, 44, 47, 0.08);
+  padding: 1.5rem;
+}
+
+.cards h2 {
+  color: #132c2f;
+  font-size: 1.2rem;
+  margin-bottom: 0.75rem;
+}
+
+.cards p {
+  color: #486267;
+  margin: 0;
+}
+
+@media screen and (max-width: 996px) {
+  .hero {
+    padding-top: 5rem;
+  }
+
+  .cards {
+    grid-template-columns: 1fr;
+  }
+}

packages/docs/src/pages/index.tsx

@@ -0,0 +1,62 @@
+import Link from "@docusaurus/Link"
+import Layout from "@theme/Layout"
+import clsx from "clsx"
+import type { ReactNode } from "react"
+
+import styles from "./index.module.css"
+
+export default function Home(): ReactNode {
+  return (
+    <Layout
+      title="effect-fc"
+      description="Write React function components with Effect"
+    >
+      <main className={styles.page}>
+        <section className={clsx("container", styles.hero)}>
+          <p className={styles.eyebrow}>Effect for React function components</p>
+          <h1>Write components as Effect programs.</h1>
+          <p className={styles.lede}>
+            effect-fc gives React 19 components access to Effect services,
+            scopes, subscriptions, and async workflows without giving up normal
+            React boundaries.
+          </p>
+          <div className={styles.actions}>
+            <Link className="button button--primary button--lg" to="/docs/getting-started">
+              Get Started
+            </Link>
+            <Link
+              className="button button--secondary button--lg"
+              to="https://github.com/Thiladev/effect-fc"
+            >
+              GitHub
+            </Link>
+          </div>
+        </section>
+
+        <section className={clsx("container", styles.cards)}>
+          <article>
+            <h2>Generator components</h2>
+            <p>
+              Use <code>Component.make</code> to yield Effects and return JSX
+              from the same component body.
+            </p>
+          </article>
+          <article>
+            <h2>Runtime at the edge</h2>
+            <p>
+              Provide your app layer once with <code>ReactRuntime.Provider</code>
+              and convert Effect-FC components at React boundaries.
+            </p>
+          </article>
+          <article>
+            <h2>Scoped lifecycles</h2>
+            <p>
+              Tie subscriptions and resources to component scopes so finalizers
+              run when React unmounts.
+            </p>
+          </article>
+        </section>
+      </main>
+    </Layout>
+  )
+}

packages/docs/static/img/logo.svg

@@ -0,0 +1,6 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="128" height="128" rx="32" fill="#0B6F74"/>
+  <path d="M34 39H78C88.4934 39 97 47.5066 97 58C97 68.4934 88.4934 77 78 77H51V95H34V39Z" fill="#FFF9ED"/>
+  <path d="M51 55V62H78C80.2091 62 82 60.2091 82 58C82 55.7909 80.2091 55 78 55H51Z" fill="#0B6F74"/>
+  <path d="M51 77H86V95H51V77Z" fill="#F4A636"/>
+</svg>

packages/docs/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  // This file is not used in compilation. It is here just for a nice editor experience.
+  "extends": "@docusaurus/tsconfig",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "ignoreDeprecations": "6.0"
+  },
+  "exclude": [".docusaurus", "build"]
+}

packages/effect-fc-next/README.md

@@ -0,0 +1,56 @@
+# Effect FC Next
+
+[Effect-TS](https://effect.website/) integration for React 19.2+ that allows you to write function components using Effect generators.
+
+This library is in early development. While it is (almost) feature complete and mostly usable, expect bugs and quirks. Things are still being ironed out, so ideas and criticisms are more than welcome.
+
+Documentation is currently being written. In the meantime, you can take a look at the `packages/example` directory.
+
+## Peer dependencies
+- `effect` 3.19+
+- `react` & `@types/react` 19.2+
+
+## Known issues
+- React Refresh doesn't work for Effect FC's yet. Page reload is required to view changes. Regular React components are unaffected.
+
+## What writing components looks like
+```typescript
+export class TodosView extends Component.make("TodosView")(function*() {
+    const state = yield* TodosState
+    const [todos] = yield* Component.useSubscribables([state.subscriptionRef])
+
+    yield* Component.useOnMount(() => Effect.andThen(
+        Console.log("Todos mounted"),
+        Effect.addFinalizer(() => Console.log("Todos unmounted")),
+    ))
+
+    const Todo = yield* TodoView.use
+
+    return (
+        <Container>
+            <Heading align="center">Todos</Heading>
+
+            <Flex direction="column" align="stretch" gap="2" mt="2">
+                <Todo _tag="new" />
+
+                {Chunk.map(todos, todo =>
+                    <Todo key={todo.id} _tag="edit" id={todo.id} />
+                )}
+            </Flex>
+        </Container>
+    )
+}) {}
+
+const Index = Component.make("IndexView")(function*() {
+    const context = yield* Component.useContextFromLayer(TodosState.Default)
+    const Todos = yield* Effect.provide(TodosView.use, context)
+
+    return <Todos />
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
+export const Route = createFileRoute("/")({
+    component: Index
+})
+```

packages/effect-fc-next/biome.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://biomejs.dev/schemas/latest/schema.json",
+  "root": false,
+  "extends": "//",
+  "files": {
+    "includes": ["./src/**"]
+  }
+}

packages/effect-fc-next/package.json

@@ -0,0 +1,57 @@
+{
+  "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"
+    },
+    "./*": [
+      {
+        "types": "./dist/*/index.d.ts",
+        "default": "./dist/*/index.js"
+      },
+      {
+        "types": "./dist/*.d.ts",
+        "default": "./dist/*.js"
+      }
+    ]
+  },
+  "scripts": {
+    "build": "tsc",
+    "lint:tsc": "tsc --noEmit",
+    "lint:biome": "biome lint",
+    "test": "vitest run",
+    "pack": "npm pack",
+    "clean:cache": "rm -rf .turbo tsconfig.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"
+  }
+}

packages/effect-fc-next/src/Async.ts

@@ -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,
+
+    asFunctionComponent<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),
+))

packages/effect-fc-next/src/ErrorObserver.ts

@@ -0,0 +1,47 @@
+import { type Cause, Context, Effect, Layer, Option, Pipeable, Predicate, PubSub, type Scope } from "effect"
+
+
+export const ErrorObserverTypeId: unique symbol = Symbol.for("@effect-fc/ErrorObserver/ErrorObserver")
+export type ErrorObserverTypeId = typeof ErrorObserverTypeId
+
+export interface ErrorObserver<in out E = never> extends Pipeable.Pipeable {
+    readonly [ErrorObserverTypeId]: ErrorObserverTypeId
+    handle<A, E1, R>(effect: Effect.Effect<A, E1, R>): Effect.Effect<A, E1, R>
+    readonly subscribe: Effect.Effect<PubSub.Subscription<Cause.Cause<E>>, never, Scope.Scope>
+}
+
+export const ErrorObserver = <E = never>() => Context.Service<ErrorObserver<E>>(
+    "@effect-fc/ErrorObserver/ErrorObserver",
+)
+
+export class ErrorObserverImpl<in out E = never> extends Pipeable.Class implements ErrorObserver<E> {
+    readonly [ErrorObserverTypeId]: ErrorObserverTypeId = ErrorObserverTypeId
+
+    constructor(readonly pubsub: PubSub.PubSub<Cause.Cause<E>>) {
+        super()
+    }
+
+    get subscribe(): Effect.Effect<PubSub.Subscription<Cause.Cause<E>>, never, Scope.Scope> {
+        return PubSub.subscribe(this.pubsub)
+    }
+
+    handle<A, E1, R>(effect: Effect.Effect<A, E1, R>): Effect.Effect<A, E1, R> {
+        return Effect.tapCause(effect, cause => Effect.asVoid(
+            PubSub.publish(this.pubsub, cause as unknown as Cause.Cause<E>),
+        ))
+    }
+}
+
+export const isErrorObserver = (u: unknown): u is ErrorObserver<unknown> => Predicate.hasProperty(u, ErrorObserverTypeId)
+
+export const layer: Layer.Layer<ErrorObserver> = Layer.effect(ErrorObserver())(
+    Effect.map(PubSub.unbounded<Cause.Cause<never>>(), pubsub => new ErrorObserverImpl(pubsub)),
+)
+
+export const handle = <A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, E, R> => Effect.flatMap(
+    Effect.serviceOption(ErrorObserver()),
+    Option.match({
+        onSome: observer => observer.handle(effect),
+        onNone: () => effect,
+    }),
+)

packages/effect-fc-next/src/Form.ts

@@ -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 }
+})

packages/effect-fc-next/src/Lens.ts

@@ -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
+})

packages/effect-fc-next/src/LensForm.ts

@@ -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),
+)

packages/effect-fc-next/src/Memoized.ts

@@ -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),
+))

packages/effect-fc-next/src/Mutation.ts

@@ -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>>())),
+    )
+})

packages/effect-fc-next/src/MutationForm.ts

@@ -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),
+)

packages/effect-fc-next/src/PubSub.ts

@@ -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
+})

packages/effect-fc-next/src/Query.ts

@@ -0,0 +1,417 @@
+import { type Cause, type Context, Duration, Effect, Equal, type Equivalence, Exit, Fiber, Option, Pipeable, Predicate, 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 = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(previous))
+
+            const fiber = yield* Effect.forkScoped(Effect.andThen(
+                Lens.update(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 => Lens.update(
+                    state,
+                    previous => Exit.match(exit, {
+                        onSuccess: v => ({
+                            key: previous.key,
+                            result: AsyncResult.success(v),
+                        }),
+                        onFailure: c => 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,
+                                }),
+                            }),
+                        }),
+                    }),
+                ).pipe(
+                    Effect.andThen(Effect.all([
+                        Effect.fiberId,
+                        Lens.get(this.fiber),
+                    ])),
+                    Effect.flatMap(([fiberId, fiber]) => Option.match(fiber, {
+                        onSome: v => 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(
+        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),
+)

packages/effect-fc-next/src/QueryClient.ts

@@ -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),
+)

packages/effect-fc-next/src/ReactRuntime.ts

@@ -0,0 +1,69 @@
+/** 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"
+
+
+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<Component.ScopeMap> = Component.ScopeMap.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.mergeAll(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 => {
+    Effect.runSync(Component.useOnChange(
+        () => Effect.addFinalizer(() => runtime.runtime.disposeEffect),
+        [runtime],
+    ))
+
+    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 => React.createElement(runtime.context, { value: React.use(promise) }, children)

packages/effect-fc-next/src/SetStateAction.ts

@@ -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
+)

packages/effect-fc-next/src/Stream.ts

@@ -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>
+})

packages/effect-fc-next/src/View.ts

@@ -0,0 +1,40 @@
+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(() => View.changes(View.zipLatestAll(...elements)).pipe(
+        Stream.changesWith((options?.equivalence as Equivalence.Equivalence<any[]> | undefined) ?? Equivalence.Array(Equivalence.strictEqual())),
+        Stream.runForEach(v =>
+            Effect.sync(() => setReactStateValue(v))
+        ),
+        Effect.forkScoped,
+    ), elements)
+
+    return reactStateValue as any
+})

packages/effect-fc-next/src/index.ts

@@ -0,0 +1,16 @@
+export * as Async from "./Async.js"
+export * as Component from "./Component.js"
+export * as ErrorObserver from "./ErrorObserver.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 SetStateAction from "./SetStateAction.js"
+export * as Stream from "./Stream.js"
+export * as View from "./View.js"

packages/effect-fc-next/test/Component.test.tsx

@@ -0,0 +1,354 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import { Context, Effect, Layer } from "effect"
+import * as React from "react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import * as Component from "../src/Component.js"
+import * as ReactRuntime from "../src/ReactRuntime.js"
+
+
+class ValueService extends Context.Service<ValueService, { readonly value: string }>()("ValueService") {}
+
+afterEach(() => {
+    vi.useRealTimers()
+})
+
+describe("Component", () => {
+    it("runs useOnMount only once across rerenders", 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.withRuntime(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("mounted")
+        expect(onMount).toHaveBeenCalledTimes(1)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+        expect(await screen.findByText("mounted")).toBeTruthy()
+        expect(onMount).toHaveBeenCalledTimes(1)
+
+        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.withRuntime(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value={1} />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("value:1")
+        expect(onChange).toHaveBeenCalledTimes(1)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value={1} />
+            </runtime.context.Provider>
+        )
+
+        expect(await screen.findByText("value:1")).toBeTruthy()
+        expect(onChange).toHaveBeenCalledTimes(1)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value={2} />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("value:2")
+        expect(onChange).toHaveBeenCalledTimes(2)
+
+        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.withRuntime(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.withRuntime(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: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.withRuntime(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe prefix="a" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("a:1")
+        expect(seenCallbacks).toHaveLength(2)
+        expect(seenCallbacks[0]).toBe(seenCallbacks[1])
+        expect(seenCallbacks[0]?.(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(2)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe prefix="b" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("b:1")
+        await waitFor(() => expect(seenCallbacks).toHaveLength(3))
+        expect(seenCallbacks[2]).not.toBe(seenCallbacks[1])
+        expect(seenCallbacks[2]?.(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.withRuntime(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
+
+            yield* Component.useOnMount(() => Effect.gen(function*() {
+                yield* Effect.sync(() => mounts())
+                yield* Effect.addFinalizer(() => Effect.sync(() => unmounts()))
+            }))
+
+            return <div>{service.value}</div>
+        }).pipe(
+            Component.withOptions({ 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.useContextFromLayer(serviceLayer, {
+                finalizerExecutionDebounce: 0,
+            })
+            const Child = yield* Effect.provide(SubComponent.use, context)
+
+            return <Child />
+        }).pipe(
+            Component.withRuntime(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Parent value="first" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("first")
+        expect(mounts).toHaveBeenCalledTimes(1)
+        expect(unmounts).not.toHaveBeenCalled()
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Parent value="second" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("second")
+        expect(mounts).toHaveBeenCalledTimes(1)
+        expect(unmounts).not.toHaveBeenCalled()
+
+        view.unmount()
+        await waitFor(() => expect(unmounts).toHaveBeenCalledTimes(1))
+        await runtime.runtime.dispose()
+    })
+})

packages/effect-fc-next/test/Lens.test.tsx

@@ -0,0 +1,165 @@
+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 "../src/Component.js"
+import * as Lens from "../src/Lens.js"
+import * as ReactRuntime from "../src/ReactRuntime.js"
+
+
+const makeRuntime = async () => {
+    const runtime = ReactRuntime.make(Layer.empty)
+    const effectRuntime = await runtime.runtime.context()
+
+    return {
+        runtime,
+        effectRuntime,
+        dispose: () => runtime.runtime.dispose(),
+    }
+}
+
+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 onClick={() => setValue(previous => previous + 1)}>increment</button>
+                </>
+            )
+        }).pipe(
+            Component.withRuntime(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.withRuntime(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 onClick={() => setValue(previous => `${previous}!`)}>{value}</button>
+        }).pipe(
+            Component.withRuntime(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(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.withRuntime(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(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()
+    })
+})

packages/effect-fc-next/test/Query.test.ts

@@ -0,0 +1,169 @@
+import { Effect, Option, type Scope, Stream } from "effect"
+import { describe, expect, it } from "vitest"
+import * as Query from "../src/Query.js"
+import * as QueryClient from "../src/QueryClient.js"
+import * as Result from "../src/Result.js"
+
+
+const runQueryTest = <A, E>(effect: Effect.Effect<A, E, QueryClient.QueryClient | Scope.Scope>) =>
+    Effect.runPromise(Effect.scoped(effect.pipe(
+        Effect.provide(QueryClient.QueryClient.Default),
+    )))
+
+const expectSuccessValue = <A, E, P>(
+    result: Result.Result<A, E, P>,
+): A => {
+    expect(Result.isSuccess(result)).toBe(true)
+
+    if (!Result.isSuccess(result))
+        throw new Error(`Expected Success result, received ${result._tag}`)
+
+    return result.value
+}
+
+const expectSomeValue = <A>(option: Option.Option<A>): A => {
+    expect(Option.isSome(option)).toBe(true)
+
+    if (!Option.isSome(option))
+        throw new Error("Expected Some option, received None")
+
+    return option.value
+}
+
+describe("Query", () => {
+    it("fetch caches successful results until they are invalidated or stale", async () => {
+        let calls = 0
+        const key = Stream.empty as Stream.Stream<readonly [number]>
+
+        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(result[0]._tag).toBe("Success")
+        expect(result[1]._tag).toBe("Success")
+        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 = Stream.empty as Stream.Stream<readonly [number]>
+
+        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 = Stream.empty as Stream.Stream<readonly [number]>
+
+        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 = Stream.empty as Stream.Stream<readonly [number]>
+
+        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 stream automatically and updates latest state", async () => {
+        let calls = 0
+        const key = Stream.make([1] as const) as Stream.Stream<readonly [number]>
+
+        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",
+            })
+
+            yield* Effect.sleep("10 millis")
+
+            return {
+                final: yield* query.result.get,
+                latestKey: yield* query.latestKey.get,
+                latestFinalResult: yield* query.latestFinalResult.get,
+            }
+        })
+
+        const result = await runQueryTest(effect)
+
+        expect(calls).toBe(1)
+        expect(expectSuccessValue(result.final)).toBe("value:1:1")
+        expect(expectSomeValue(result.latestKey)).toEqual([1])
+        expect(expectSuccessValue(expectSomeValue(result.latestFinalResult))).toBe("value:1:1")
+    })
+})

packages/effect-fc-next/test/View.test.tsx

@@ -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 "../src/Component.js"
+import * as ReactRuntime from "../src/ReactRuntime.js"
+import * as View from "../src/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.withRuntime(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.withRuntime(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()
+    })
+})

packages/effect-fc-next/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "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"],
+  "exclude": ["**/*.test.ts", "**/*.spec.ts"]
+}

packages/effect-fc-next/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config"
+
+
+export default defineConfig({
+    test: {
+        environment: "jsdom",
+        include: ["test/**/*.test.ts?(x)"],
+    },
+})

packages/effect-fc/README.md

@@ -15,39 +15,37 @@ Documentation is currently being written. In the meantime, you can take a look a
 
 ## What writing components looks like
 ```typescript
-export class Todos extends Component.make("Todos")(function*() {
+export class TodosView extends Component.make("TodosView")(function*() {
     const state = yield* TodosState
-    const [todos] = yield* useSubscribables(state.ref)
+    const [todos] = yield* Component.useSubscribables([state.subscriptionRef])
 
-    yield* useOnMount(() => Effect.andThen(
+    yield* Component.useOnMount(() => Effect.andThen(
         Console.log("Todos mounted"),
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))
 
-    const TodoFC = yield* Todo
+    const Todo = yield* TodoView.use
 
     return (
         <Container>
             <Heading align="center">Todos</Heading>
 
             <Flex direction="column" align="stretch" gap="2" mt="2">
-                <TodoFC _tag="new" />
+                <Todo _tag="new" />
 
                 {Chunk.map(todos, todo =>
-                    <TodoFC key={todo.id} _tag="edit" id={todo.id} />
+                    <Todo key={todo.id} _tag="edit" id={todo.id} />
                 )}
             </Flex>
         </Container>
     )
 }) {}
 
-const TodosStateLive = TodosState.Default("todos")
+const Index = Component.make("IndexView")(function*() {
+    const context = yield* Component.useContextFromLayer(TodosState.Default)
+    const Todos = yield* Effect.provide(TodosView.use, context)
 
-const Index = Component.make("Index")(function*() {
-    const context = yield* useContext(TodosStateLive)
-    const TodosFC = yield* Effect.provide(Todos, context)
-
-    return <TodosFC />
+    return <Todos />
 }).pipe(
     Component.withRuntime(runtime.context)
 )

packages/effect-fc/package.json

@@ -1,7 +1,7 @@
 {
   "name": "effect-fc",
   "description": "Write React function components with Effect",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "type": "module",
   "files": [
     "./README.md",
@@ -32,17 +32,24 @@
     "build": "tsc",
     "lint:tsc": "tsc --noEmit",
     "lint:biome": "biome lint",
+    "test": "vitest run",
     "pack": "npm pack",
     "clean:cache": "rm -rf .turbo tsconfig.tsbuildinfo",
     "clean:dist": "rm -rf dist",
     "clean:modules": "rm -rf node_modules"
   },
   "devDependencies": {
-    "@effect/platform-browser": "^0.74.0"
+    "@effect/platform-browser": "^0.76.0",
+    "@testing-library/react": "^16.3.0",
+    "jsdom": "^26.1.0",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@types/react": "^19.2.0",
-    "effect": "^3.19.0",
+    "effect": "^3.21.0",
     "react": "^19.2.0"
+  },
+  "dependencies": {
+    "effect-lens": "^0.2.0"
   }
 }

packages/effect-fc/src/Async.ts

@@ -1,35 +1,49 @@
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
-import { Effect, Function, Predicate, Runtime, Scope } from "effect"
+import { Effect, type Equivalence, Function, Predicate, Runtime, Scope } from "effect"
 import * as React from "react"
 import * as Component from "./Component.js"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
-export type TypeId = typeof TypeId
+export const AsyncTypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
+export type AsyncTypeId = typeof AsyncTypeId
 
-export interface Async extends Async.Options {
-    readonly [TypeId]: TypeId
+
+/**
+ * A trait for `Component`'s that allows them running asynchronous effects.
+ */
+export interface Async extends AsyncPrototype, AsyncOptions {}
+
+export interface AsyncPrototype {
+    readonly [AsyncTypeId]: AsyncTypeId
 }
 
-export namespace Async {
-    export interface Options {
+/**
+ * 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
 }
 
-    export type Props = Omit<React.SuspenseProps, "children">
-}
+/**
+ * Props for `Async` components.
+ */
+export type AsyncProps = Omit<React.SuspenseProps, "children">
 
 
-const AsyncProto = Object.freeze({
-    [TypeId]: TypeId,
+export const AsyncPrototype: AsyncPrototype = Object.freeze({
+    [AsyncTypeId]: AsyncTypeId,
 
-    makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
-        this: Component.Component<P, A, E, R> & Async,
+    asFunctionComponent<P extends {}, A extends React.ReactNode, E, R, F extends Component.Component.Signature>(
+        this: Component.Component<P, A, E, R, F> & Async,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
     ) {
-        const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
+        const Inner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
 
-        return ({ fallback, name, ...props }: Async.Props) => {
+        return ({ fallback, name, ...props }: AsyncProps) => {
             const promise = Runtime.runPromise(runtimeRef.current)(
                 Effect.andThen(
                     Component.useScope([], this),
@@ -40,45 +54,117 @@ const AsyncProto = Object.freeze({
             return React.createElement(
                 React.Suspense,
                 { fallback: fallback ?? this.defaultFallback, name },
-                React.createElement(SuspenseInner, { promise }),
+                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
 
-export const isAsync = (u: unknown): u is Async => Predicate.hasProperty(u, TypeId)
+    for (const key in self) {
+        if (key === "fallback")
+            continue
+        if (!(key in that) || !Object.is(self[key], that[key]))
+            return false
+    }
 
-export const async = <T extends Component.Component<any, any, any, any>>(
-    self: T
+    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> & Async.Props,
+        Component.Component.Props<T> & AsyncProps,
         Component.Component.Success<T>,
         Component.Component.Error<T>,
-        Component.Component.Context<T>
+        Component.Component.Context<T>,
+        Component.Component.DefaultSignature<Component.Component.Props<T> & AsyncProps, Component.Component.Success<T>>
     >
     & Async
 ) => Object.setPrototypeOf(
-    Object.assign(function() {}, self),
+    Object.assign(function() {}, self, { propsEquivalence: defaultPropsEquivalence }),
     Object.freeze(Object.setPrototypeOf(
-        Object.assign({}, AsyncProto),
+        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, any, any, any> & Async>(
-        options: Partial<Async.Options>
+    <T extends Component.Component.Any & Async>(
+        options: Partial<AsyncOptions>
     ): (self: T) => T
-    <T extends Component.Component<any, any, any, any> & Async>(
+    <T extends Component.Component.Any & Async>(
         self: T,
-        options: Partial<Async.Options>,
+        options: Partial<AsyncOptions>,
     ): T
-} = Function.dual(2, <T extends Component.Component<any, any, any, any> & Async>(
+} = Function.dual(2, <T extends Component.Component.Any & Async>(
     self: T,
-    options: Partial<Async.Options>,
+    options: Partial<AsyncOptions>,
 ): T => Object.setPrototypeOf(
     Object.assign(function() {}, self, options),
     Object.getPrototypeOf(self),

packages/effect-fc/src/ErrorObserver.ts

@@ -1,20 +1,20 @@
 import { type Cause, Context, Effect, Exit, Layer, Option, Pipeable, Predicate, PubSub, type Queue, type Scope, Supervisor } from "effect"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/ErrorObserver/ErrorObserver")
-export type TypeId = typeof TypeId
+export const ErrorObserverTypeId: unique symbol = Symbol.for("@effect-fc/ErrorObserver/ErrorObserver")
+export type ErrorObserverTypeId = typeof ErrorObserverTypeId
 
 export interface ErrorObserver<in out E = never> extends Pipeable.Pipeable {
-    readonly [TypeId]: TypeId
+    readonly [ErrorObserverTypeId]: ErrorObserverTypeId
     handle<A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, E, R>
     readonly subscribe: Effect.Effect<Queue.Dequeue<Cause.Cause<E>>, never, Scope.Scope>
 }
 
 export const ErrorObserver = <E = never>(): Context.Tag<ErrorObserver, ErrorObserver<E>> => Context.GenericTag("@effect-fc/ErrorObserver/ErrorObserver")
 
-class ErrorObserverImpl<in out E = never>
+export class ErrorObserverImpl<in out E = never>
 extends Pipeable.Class() implements ErrorObserver<E> {
-    readonly [TypeId]: TypeId = TypeId
+    readonly [ErrorObserverTypeId]: ErrorObserverTypeId = ErrorObserverTypeId
     readonly subscribe: Effect.Effect<Queue.Dequeue<Cause.Cause<E>>, never, Scope.Scope>
 
     constructor(
@@ -29,7 +29,7 @@ extends Pipeable.Class() implements ErrorObserver<E> {
     }
 }
 
-class ErrorObserverSupervisorImpl extends Supervisor.AbstractSupervisor<void> {
+export class ErrorObserverSupervisorImpl extends Supervisor.AbstractSupervisor<void> {
     readonly value = Effect.void
     constructor(readonly pubsub: PubSub.PubSub<Cause.Cause<never>>) {
         super()
@@ -43,7 +43,7 @@ class ErrorObserverSupervisorImpl extends Supervisor.AbstractSupervisor<void> {
 }
 
 
-export const isErrorObserver = (u: unknown): u is ErrorObserver<unknown> => Predicate.hasProperty(u, TypeId)
+export const isErrorObserver = (u: unknown): u is ErrorObserver<unknown> => Predicate.hasProperty(u, ErrorObserverTypeId)
 
 export const layer: Layer.Layer<ErrorObserver> = Layer.unwrapEffect(Effect.map(
     PubSub.unbounded<Cause.Cause<never>>(),

packages/effect-fc/src/Form.ts

@@ -1,293 +1,157 @@
-import { Array, Cause, Chunk, type Context, type Duration, Effect, Equal, Exit, Fiber, flow, Hash, HashMap, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream } from "effect"
+import { Array, type Cause, Chunk, type Duration, Effect, Equal, Function, identity, Option, type ParseResult, Pipeable, Predicate, type Scope, Stream, SubscriptionRef } from "effect"
 import type * as React from "react"
 import * as Component from "./Component.js"
-import * as Mutation from "./Mutation.js"
-import * as PropertyPath from "./PropertyPath.js"
-import * as Result from "./Result.js"
+import * as Lens from "./Lens.js"
 import * as Subscribable from "./Subscribable.js"
-import * as SubscriptionRef from "./SubscriptionRef.js"
-import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
 
 
 export const FormTypeId: unique symbol = Symbol.for("@effect-fc/Form/Form")
 export type FormTypeId = typeof FormTypeId
 
-export interface Form<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+export interface Form<out P extends readonly PropertyKey[], in out A, in out I = A, in out ER = never, in out EW = never>
 extends Pipeable.Pipeable {
     readonly [FormTypeId]: FormTypeId
 
-    readonly schema: Schema.Schema<A, I, R>
-    readonly context: Context.Context<Scope.Scope | R>
-    readonly mutation: Mutation.Mutation<
-        readonly [value: A, form: Form<A, I, R, unknown, unknown, unknown>],
-        MA, ME, MR, MP
-    >
-    readonly autosubmit: boolean
-    readonly debounce: Option.Option<Duration.DurationInput>
-
-    readonly value: Subscribable.Subscribable<Option.Option<A>>
-    readonly encodedValue: SubscriptionRef.SubscriptionRef<I>
-    readonly error: Subscribable.Subscribable<Option.Option<ParseResult.ParseError>>
-    readonly validationFiber: Subscribable.Subscribable<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>>
-
-    readonly canSubmit: Subscribable.Subscribable<boolean>
-
-    field<const P extends PropertyPath.Paths<I>>(
-        path: P
-    ): Effect.Effect<FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>>
-
-    readonly run: Effect.Effect<void>
-    readonly submit: Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>, Cause.NoSuchElementException>
+    readonly path: P
+    readonly value: Subscribable.Subscribable<Option.Option<A>, ER, never>
+    readonly encodedValue: Lens.Lens<I, ER, EW, never, never>
+    readonly issues: Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[], never, never>
+    readonly isValidating: Subscribable.Subscribable<boolean, ER, never>
+    readonly canCommit: Subscribable.Subscribable<boolean, never, never>
+    readonly isCommitting: Subscribable.Subscribable<boolean, never, never>
 }
 
-export class FormImpl<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
-extends Pipeable.Class() implements Form<A, I, R, MA, ME, MR, MP> {
+export class FormImpl<out P extends readonly PropertyKey[], in out A, in out I = A, in out ER = never, in out EW = never>
+extends Pipeable.Class() implements Form<P, A, I, ER, EW> {
     readonly [FormTypeId]: FormTypeId = FormTypeId
 
     constructor(
-        readonly schema: Schema.Schema<A, I, R>,
-        readonly context: Context.Context<Scope.Scope | R>,
-        readonly mutation: Mutation.Mutation<
-            readonly [value: A, form: Form<A, I, R, unknown, unknown, unknown>],
-            MA, ME, MR, MP
-        >,
-        readonly autosubmit: boolean,
-        readonly debounce: Option.Option<Duration.DurationInput>,
-
-        readonly value: SubscriptionRef.SubscriptionRef<Option.Option<A>>,
-        readonly encodedValue: SubscriptionRef.SubscriptionRef<I>,
-        readonly error: SubscriptionRef.SubscriptionRef<Option.Option<ParseResult.ParseError>>,
-        readonly validationFiber: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>>,
-
-        readonly runSemaphore: Effect.Semaphore,
-        readonly fieldCache: Ref.Ref<HashMap.HashMap<FormFieldKey, FormField<unknown, unknown>>>,
+        readonly path: P,
+        readonly value: Subscribable.Subscribable<Option.Option<A>, ER, never>,
+        readonly encodedValue: Lens.Lens<I, ER, EW, never, never>,
+        readonly issues: Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[], never, never>,
+        readonly isValidating: Subscribable.Subscribable<boolean, never, never>,
+        readonly canCommit: Subscribable.Subscribable<boolean, never, never>,
+        readonly isCommitting: Subscribable.Subscribable<boolean, never, never>,
     ) {
         super()
+    }
+}
 
-        this.canSubmit = Subscribable.map(
-            Subscribable.zipLatestAll(this.value, this.error, this.validationFiber, this.mutation.result),
-            ([value, error, validationFiber, result]) => (
-                Option.isSome(value) &&
-                Option.isNone(error) &&
-                Option.isNone(validationFiber) &&
-                !(Result.isRunning(result) || Result.hasRefreshingFlag(result))
-            ),
+
+export const isForm = (u: unknown): u is Form<readonly PropertyKey[], unknown, unknown> => Predicate.hasProperty(u, FormTypeId)
+
+
+const filterIssuesByPath = (
+    issues: readonly ParseResult.ArrayFormatterIssue[],
+    path: readonly PropertyKey[],
+): readonly ParseResult.ArrayFormatterIssue[] => Array.filter(issues, issue =>
+    issue.path.length >= path.length && Array.every(path, (p, i) => p === issue.path[i])
 )
-    }
 
-    field<const P extends PropertyPath.Paths<I>>(
-        path: P
-    ): Effect.Effect<FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>> {
-        const key = new FormFieldKey(path)
-        return this.fieldCache.pipe(
-            Effect.map(HashMap.get(key)),
-            Effect.flatMap(Option.match({
-                onSome: v => Effect.succeed(v as FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>>),
-                onNone: () => Effect.tap(
-                    Effect.succeed(makeFormField(this as Form<A, I, R, MA, ME, MR, MP>, path)),
-                    v => Ref.update(this.fieldCache, HashMap.set(key, v as FormField<unknown, unknown>)),
-                ),
-            })),
-        )
-    }
+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
 
-    readonly canSubmit: Subscribable.Subscribable<boolean>
-
-    get run(): Effect.Effect<void> {
-        return this.runSemaphore.withPermits(1)(Stream.runForEach(
-            this.encodedValue.changes.pipe(
-                Option.isSome(this.debounce) ? Stream.debounce(this.debounce.value) : identity
-            ),
-
-            encodedValue => this.validationFiber.pipe(
-                Effect.andThen(Option.match({
-                    onSome: Fiber.interrupt,
-                    onNone: () => Effect.void,
-                })),
-                Effect.andThen(
-                    Effect.forkScoped(Effect.onExit(
-                        Schema.decode(this.schema, { errors: "all" })(encodedValue),
-                        exit => Effect.andThen(
-                            Exit.matchEffect(exit, {
-                                onSuccess: v => Effect.andThen(
-                                    Ref.set(this.value, Option.some(v)),
-                                    Ref.set(this.error, Option.none()),
-                                ),
-                                onFailure: c => Option.match(Chunk.findFirst(Cause.failures(c), e => e._tag === "ParseError"), {
-                                    onSome: e => Ref.set(this.error, Option.some(e)),
-                                    onNone: () => Effect.void,
-                                }),
-                            }),
-                            Ref.set(this.validationFiber, Option.none()),
-                        ),
-                    )).pipe(
-                        Effect.tap(fiber => Ref.set(this.validationFiber, Option.some(fiber))),
-                        Effect.andThen(Fiber.join),
-                        Effect.andThen(value => this.autosubmit
-                            ? Effect.asVoid(Effect.forkScoped(this.submitValue(value)))
-                            : Effect.void
-                        ),
-                        Effect.forkScoped,
-                    )
-                ),
-                Effect.provide(this.context),
-            ),
-        ))
-    }
-
-    get submit(): Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>, Cause.NoSuchElementException> {
-        return this.value.pipe(
-            Effect.andThen(identity),
-            Effect.andThen(value => this.submitValue(value)),
-        )
-    }
-
-    submitValue(value: A): Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>> {
-        return Effect.whenEffect(
-            Effect.tap(
-                this.mutation.mutate([value, this as any]),
-                result => Result.isFailure(result)
-                    ? Option.match(
-                        Chunk.findFirst(
-                            Cause.failures(result.cause as Cause.Cause<ParseResult.ParseError>),
-                            e => e._tag === "ParseError",
-                        ),
-                        {
-                            onSome: e => Ref.set(this.error, Option.some(e)),
-                            onNone: () => Effect.void,
-                        },
-                    )
-                    : Effect.void
-            ),
-            this.canSubmit.get,
-        )
-    }
-}
-
-export const isForm = (u: unknown): u is Form<unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, FormTypeId)
-
-export declare namespace make {
-    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
-    extends Mutation.make.Options<
-        readonly [value: NoInfer<A>, form: Form<NoInfer<A>, NoInfer<I>, NoInfer<R>, unknown, unknown, unknown>],
-        MA, ME, MR, MP
-    > {
-        readonly schema: Schema.Schema<A, I, R>
-        readonly initialEncodedValue: NoInfer<I>
-        readonly autosubmit?: boolean
-        readonly debounce?: Duration.DurationInput
-    }
-}
-
-export const make = Effect.fnUntraced(function* <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
-    options: make.Options<A, I, R, MA, ME, MR, MP>
-): Effect.fn.Return<
-    Form<A, I, R, MA, ME, Result.forkEffect.OutputContext<MA, ME, MR, MP>, MP>,
-    never,
-    Scope.Scope | R | Result.forkEffect.OutputContext<MA, ME, MR, MP>
-> {
     return new FormImpl(
-        options.schema,
-        yield* Effect.context<Scope.Scope | R>(),
-        yield* Mutation.make(options),
-        options.autosubmit ?? false,
-        Option.fromNullable(options.debounce),
-
-        yield* SubscriptionRef.make(Option.none<A>()),
-        yield* SubscriptionRef.make(options.initialEncodedValue),
-        yield* SubscriptionRef.make(Option.none<ParseResult.ParseError>()),
-        yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, ParseResult.ParseError>>()),
-
-        yield* Effect.makeSemaphore(1),
-        yield* Ref.make(HashMap.empty<FormFieldKey, FormField<unknown, unknown>>()),
+        path,
+        Subscribable.mapOption(form.value, a => a[key]),
+        Lens.focusObjectOn(form.encodedValue, key),
+        Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
+        form.isValidating,
+        form.canCommit,
+        form.isCommitting,
     )
 })
 
-export declare namespace service {
-    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
-    extends make.Options<A, I, R, MA, ME, MR, MP> {}
-}
+export const focusArrayAt: {
+    <P extends readonly PropertyKey[], A extends readonly any[], I extends readonly any[], ER, EW>(
+        self: Form<P, A, I, ER, EW>,
+        index: number,
+    ): Form<readonly [...P, number], A[number], I[number], ER | Cause.NoSuchElementException, EW | Cause.NoSuchElementException>
+    <P extends readonly PropertyKey[], A extends readonly any[], I extends readonly any[], ER, EW>(
+        index: number,
+    ): (self: Form<P, A, I, ER, EW>) => Form<readonly [...P, number], A[number], I[number], ER | Cause.NoSuchElementException, EW | Cause.NoSuchElementException>
+} = Function.dual(2, <P extends readonly PropertyKey[], A extends readonly any[], I extends readonly any[], ER, EW>(
+    self: Form<P, A, I, ER, EW>,
+    index: number,
+): Form<readonly [...P, number], A[number], I[number], ER | Cause.NoSuchElementException, EW | Cause.NoSuchElementException> => {
+    const form = self as FormImpl<P, A, I, ER, EW>
+    const path = [...form.path, index] as const
 
-export const service = <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
-    options: service.Options<A, I, R, MA, ME, MR, MP>
-): Effect.Effect<
-    Form<A, I, R, MA, ME, Result.forkEffect.OutputContext<MA, ME, MR, MP>, MP>,
-    never,
-    Scope.Scope | R | Result.forkEffect.OutputContext<MA, ME, MR, MP>
-> => Effect.tap(
-    make(options),
-    form => Effect.forkScoped(form.run),
+    return new FormImpl(
+        path,
+        Subscribable.mapOptionEffect(form.value, Array.get(index)),
+        Lens.focusArrayAt(form.encodedValue, index),
+        Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
+        form.isValidating,
+        form.canCommit,
+        form.isCommitting,
     )
+})
 
+export const focusTupleAt: {
+    <P extends readonly PropertyKey[], A extends readonly [any, ...any[]], I extends readonly [any, ...any[]], ER, EW, K extends number>(
+        self: Form<P, A, I, ER, EW>,
+        index: K,
+    ): Form<readonly [...P, K], A[K], I[K], ER, EW>
+    <P extends readonly PropertyKey[], A extends readonly [any, ...any[]], I extends readonly [any, ...any[]], ER, EW, K extends number>(
+        index: K,
+    ): (self: Form<P, A, I, ER, EW>) => Form<readonly [...P, K], A[K], I[K], ER, EW>
+} = Function.dual(2, <P extends readonly PropertyKey[], A extends readonly [any, ...any[]], I extends readonly [any, ...any[]], ER, EW, K extends number>(
+    self: Form<P, A, I, ER, EW>,
+    index: K,
+): Form<readonly [...P, K], A[K], I[K], ER, EW> => {
+    const form = self as FormImpl<P, A, I, ER, EW>
+    const path = [...form.path, index] as const
 
-export const FormFieldTypeId: unique symbol = Symbol.for("@effect-fc/Form/FormField")
-export type FormFieldTypeId = typeof FormFieldTypeId
-
-export interface FormField<in out A, in out I = A>
-extends Pipeable.Pipeable {
-    readonly [FormFieldTypeId]: FormFieldTypeId
-
-    readonly value: Subscribable.Subscribable<Option.Option<A>, Cause.NoSuchElementException>
-    readonly encodedValue: SubscriptionRef.SubscriptionRef<I>
-    readonly issues: Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[]>
-    readonly isValidating: Subscribable.Subscribable<boolean>
-    readonly isSubmitting: Subscribable.Subscribable<boolean>
-}
-
-class FormFieldImpl<in out A, in out I = A>
-extends Pipeable.Class() implements FormField<A, I> {
-    readonly [FormFieldTypeId]: FormFieldTypeId = FormFieldTypeId
-
-    constructor(
-        readonly value: Subscribable.Subscribable<Option.Option<A>, Cause.NoSuchElementException>,
-        readonly encodedValue: SubscriptionRef.SubscriptionRef<I>,
-        readonly issues: Subscribable.Subscribable<readonly ParseResult.ArrayFormatterIssue[]>,
-        readonly isValidating: Subscribable.Subscribable<boolean>,
-        readonly isSubmitting: Subscribable.Subscribable<boolean>,
-    ) {
-        super()
-    }
-}
-
-const FormFieldKeyTypeId: unique symbol = Symbol.for("@effect-fc/Form/FormFieldKey")
-type FormFieldKeyTypeId = typeof FormFieldKeyTypeId
-
-class FormFieldKey implements Equal.Equal {
-    readonly [FormFieldKeyTypeId]: FormFieldKeyTypeId = FormFieldKeyTypeId
-    constructor(readonly path: PropertyPath.PropertyPath) {}
-
-    [Equal.symbol](that: Equal.Equal) {
-        return isFormFieldKey(that) && PropertyPath.equivalence(this.path, that.path)
-    }
-    [Hash.symbol]() {
-        return Hash.array(this.path)
-    }
-}
-
-export const isFormField = (u: unknown): u is FormField<unknown, unknown> => Predicate.hasProperty(u, FormFieldTypeId)
-const isFormFieldKey = (u: unknown): u is FormFieldKey => Predicate.hasProperty(u, FormFieldKeyTypeId)
-
-export const makeFormField = <A, I, R, MA, ME, MR, MP, const P extends PropertyPath.Paths<NoInfer<I>>>(
-    self: Form<A, I, R, MA, ME, MR, MP>,
-    path: P,
-): FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>> => {
-    return new FormFieldImpl(
-        Subscribable.mapEffect(self.value, Option.match({
-            onSome: v => Option.map(PropertyPath.get(v, path), Option.some),
-            onNone: () => Option.some(Option.none()),
-        })),
-        SubscriptionSubRef.makeFromPath(self.encodedValue, path),
-        Subscribable.mapEffect(self.error, Option.match({
-            onSome: flow(
-                ParseResult.ArrayFormatter.formatError,
-                Effect.map(Array.filter(issue => PropertyPath.equivalence(issue.path, path))),
-            ),
-            onNone: () => Effect.succeed([]),
-        })),
-        Subscribable.map(self.validationFiber, Option.isSome),
-        Subscribable.map(self.mutation.result, result => Result.isRunning(result) || Result.hasRefreshingFlag(result)),
+    return new FormImpl(
+        path,
+        Subscribable.mapOption(form.value, Array.unsafeGet(index)),
+        Lens.focusTupleAt(form.encodedValue, index),
+        Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
+        form.isValidating,
+        form.canCommit,
+        form.isCommitting,
     )
-}
+})
+
+export const focusChunkAt: {
+    <P extends readonly PropertyKey[], A, I, ER, EW>(
+        self: Form<P, Chunk.Chunk<A>, Chunk.Chunk<I>, ER, EW>,
+        index: number,
+    ): Form<readonly [...P, number], A, I, ER | Cause.NoSuchElementException, EW>
+    <P extends readonly PropertyKey[], A, I, ER, EW>(
+        index: number,
+    ): (self: Form<P, Chunk.Chunk<A>, Chunk.Chunk<I>, ER, EW>) => Form<readonly [...P, number], A, I, ER | Cause.NoSuchElementException, EW>
+} = Function.dual(2, <P extends readonly PropertyKey[], A, I, ER, EW>(
+    self: Form<P, Chunk.Chunk<A>, Chunk.Chunk<I>, ER, EW>,
+    index: number,
+): Form<readonly [...P, number], A, I, ER | Cause.NoSuchElementException, EW> => {
+    const form = self as FormImpl<P, Chunk.Chunk<A>, Chunk.Chunk<I>, ER, EW>
+    const path = [...form.path, index] as const
+
+    return new FormImpl(
+        path,
+        Subscribable.mapOptionEffect(form.value, Chunk.get(index)),
+        Lens.focusChunkAt(form.encodedValue, index),
+        Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
+        form.isValidating,
+        form.canCommit,
+        form.isCommitting,
+    )
+})
 
 
 export namespace useInput {
@@ -301,33 +165,39 @@ export namespace useInput {
     }
 }
 
-export const useInput = Effect.fnUntraced(function* <A, I>(
-    field: FormField<A, I>,
+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>, Cause.NoSuchElementException, Scope.Scope> {
-    const internalValueRef = yield* Component.useOnChange(() => Effect.tap(
-        Effect.andThen(field.encodedValue, SubscriptionRef.make),
-        internalValueRef => Effect.forkScoped(Effect.all([
+): 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(field.encodedValue, 1),
+                Stream.drop(form.encodedValue.changes, 1),
                 upstreamEncodedValue => Effect.whenEffect(
-                    Ref.set(internalValueRef, upstreamEncodedValue),
-                    Effect.andThen(internalValueRef, internalValue => !Equal.equals(upstreamEncodedValue, internalValue)),
+                    Lens.set(internalValueLens, upstreamEncodedValue),
+                    Effect.andThen(Lens.get(internalValueLens), internalValue => !Equal.equals(upstreamEncodedValue, internalValue)),
                 ),
             ),
 
             Stream.runForEach(
-                internalValueRef.changes.pipe(
+                internalValueLens.changes.pipe(
                     Stream.drop(1),
                     Stream.changesWith(Equal.equivalence()),
                     options?.debounce ? Stream.debounce(options.debounce) : identity,
                 ),
-                internalValue => Ref.set(field.encodedValue, internalValue),
+                internalValue => Lens.set(form.encodedValue, internalValue),
             ),
-        ], { concurrency: "unbounded" })),
-    ), [field, options?.debounce])
+        ], { concurrency: "unbounded", discard: true }))
 
-    const [value, setValue] = yield* SubscriptionRef.useSubscriptionRefState(internalValueRef)
+        return internalValueLens
+    }), [form, options?.debounce])
+
+    const [value, setValue] = yield* Lens.useState(internalValueLens)
     return { value, setValue }
 })
 
@@ -342,55 +212,63 @@ export namespace useOptionalInput {
     }
 }
 
-export const useOptionalInput = Effect.fnUntraced(function* <A, I>(
-    field: FormField<A, Option.Option<I>>,
+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>, Cause.NoSuchElementException, Scope.Scope> {
-    const [enabledRef, internalValueRef] = yield* Component.useOnChange(() => Effect.tap(
-        Effect.andThen(
-            field.encodedValue,
+): 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([SubscriptionRef.make(true), SubscriptionRef.make(v)]),
-                onNone: () => Effect.all([SubscriptionRef.make(false), SubscriptionRef.make(options.defaultValue)]),
+                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),
+                ]),
             }),
-        ),
+        )
 
-        ([enabledRef, internalValueRef]) => Effect.forkScoped(Effect.all([
+        yield* Effect.forkScoped(Effect.all([
             Stream.runForEach(
-                Stream.drop(field.encodedValue, 1),
+                Stream.drop(field.encodedValue.changes, 1),
 
                 upstreamEncodedValue => Effect.whenEffect(
                     Option.match(upstreamEncodedValue, {
                         onSome: v => Effect.andThen(
-                            Ref.set(enabledRef, true),
-                            Ref.set(internalValueRef, v),
+                            Lens.set(enabledLens, true),
+                            Lens.set(internalValueLens, v),
                         ),
                         onNone: () => Effect.andThen(
-                            Ref.set(enabledRef, false),
-                            Ref.set(internalValueRef, options.defaultValue),
+                            Lens.set(enabledLens, false),
+                            Lens.set(internalValueLens, options.defaultValue),
                         ),
                     }),
 
                     Effect.andThen(
-                        Effect.all([enabledRef, internalValueRef]),
+                        Effect.all([Lens.get(enabledLens), Lens.get(internalValueLens)]),
                         ([enabled, internalValue]) => !Equal.equals(upstreamEncodedValue, enabled ? Option.some(internalValue) : Option.none()),
                     ),
                 ),
             ),
 
             Stream.runForEach(
-                enabledRef.changes.pipe(
-                    Stream.zipLatest(internalValueRef.changes),
+                enabledLens.changes.pipe(
+                    Stream.zipLatest(internalValueLens.changes),
                     Stream.drop(1),
                     Stream.changesWith(Equal.equivalence()),
                     options?.debounce ? Stream.debounce(options.debounce) : identity,
                 ),
-                ([enabled, internalValue]) => Ref.set(field.encodedValue, enabled ? Option.some(internalValue) : Option.none()),
+                ([enabled, internalValue]) => Lens.set(field.encodedValue, enabled ? Option.some(internalValue) : Option.none()),
             ),
-        ], { concurrency: "unbounded" })),
-    ), [field, options.debounce])
+        ], { concurrency: "unbounded" }))
 
-    const [enabled, setEnabled] = yield* SubscriptionRef.useSubscriptionRefState(enabledRef)
-    const [value, setValue] = yield* SubscriptionRef.useSubscriptionRefState(internalValueRef)
+        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 }
 })

packages/effect-fc/src/Lens.ts

@@ -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, RR | RW> {
+    const [reactStateValue, setReactStateValue] = React.useState(yield* Component.useOnMount(() => Lens.get(lens)))
+
+    yield* Component.useReactEffect(() => Effect.forkScoped(
+        Stream.runForEach(
+            Stream.changesWith(lens.changes, options?.equivalence ?? Equivalence.strict()),
+            v => Effect.sync(() => setReactStateValue(v)),
+        )
+    ), [lens])
+
+    const setValue = yield* Component.useCallbackSync(
+        (setStateAction: React.SetStateAction<A>) => Effect.andThen(
+            Lens.updateAndGet(lens, prevState => SetStateAction.value(setStateAction, prevState)),
+            v => 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.strict()),
+        v => Effect.sync(() => setValue(v)),
+    )), [setValue])
+    yield* Component.useReactEffect(() => Lens.set(lens, value), [value])
+
+    return lens
+})

packages/effect-fc/src/Memoized.ts

@@ -1,50 +1,111 @@
 /** 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 TypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
-export type TypeId = typeof TypeId
+export const MemoizedTypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
+export type MemoizedTypeId = typeof MemoizedTypeId
 
-export interface Memoized<P> extends Memoized.Options<P> {
-    readonly [TypeId]: TypeId
+
+/**
+ * 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
 }
 
-export namespace Memoized {
-    export interface Options<P> {
-        readonly propsAreEqual?: Equivalence.Equivalence<P>
-    }
+/**
+ * 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>
 }
 
 
-const MemoizedProto = Object.freeze({
-    [TypeId]: TypeId
+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, TypeId)
+export const isMemoized = (u: unknown): u is Memoized<unknown> => Predicate.hasProperty(u, MemoizedTypeId)
 
-export const memoized = <T extends Component.Component<any, any, any, any>>(
+/**
+ * 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({}, MemoizedProto),
+        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, any, any, any> & Memoized<any>>(
-        options: Partial<Memoized.Options<Component.Component.Props<T>>>
+    <T extends Component.Component.Any & Memoized<any>>(
+        options: Partial<MemoizedOptions<Component.Component.Props<T>>>
     ): (self: T) => T
-    <T extends Component.Component<any, any, any, any> & Memoized<any>>(
+    <T extends Component.Component.Any & Memoized<any>>(
         self: T,
-        options: Partial<Memoized.Options<Component.Component.Props<T>>>,
+        options: Partial<MemoizedOptions<Component.Component.Props<T>>>,
     ): T
-} = Function.dual(2, <T extends Component.Component<any, any, any, any> & Memoized<any>>(
+} = Function.dual(2, <T extends Component.Component.Any & Memoized<any>>(
     self: T,
-    options: Partial<Memoized.Options<Component.Component.Props<T>>>,
+    options: Partial<MemoizedOptions<Component.Component.Props<T>>>,
 ): T => Object.setPrototypeOf(
     Object.assign(function() {}, self, options),
     Object.getPrototypeOf(self),

packages/effect-fc/src/Mutation.ts

@@ -99,8 +99,10 @@ extends Pipeable.Class() implements Mutation<K, A, E, R, P> {
     }
 }
 
+
 export const isMutation = (u: unknown): u is Mutation<readonly unknown[], unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, MutationTypeId)
 
+
 export declare namespace make {
     export interface Options<K extends Mutation.AnyKey = never, A = void, E = never, R = never, P = never> {
         readonly f: (key: K) => Effect.Effect<A, E, Result.forkEffect.InputContext<R, NoInfer<P>>>
@@ -111,12 +113,12 @@ export declare namespace make {
 export const make = Effect.fnUntraced(function* <const K extends Mutation.AnyKey = never, A = void, E = never, R = never, P = never>(
     options: make.Options<K, A, E, R, P>
 ): Effect.fn.Return<
-    Mutation<K, A, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
+    Mutation<K, A, E, Result.forkEffect.OutputContext<R, P>, P>,
     never,
-    Scope.Scope | Result.forkEffect.OutputContext<A, E, R, P>
+    Scope.Scope | Result.forkEffect.OutputContext<R, P>
 > {
     return new MutationImpl(
-        yield* Effect.context<Scope.Scope | Result.forkEffect.OutputContext<A, E, R, P>>(),
+        yield* Effect.context<Scope.Scope | Result.forkEffect.OutputContext<R, P>>(),
         options.f as any,
         options.initialProgress as P,
 

packages/effect-fc/src/PropertyPath.ts

@@ -1,98 +0,0 @@
-import { Array, Equivalence, Function, Option, Predicate } from "effect"
-
-
-export type PropertyPath = readonly PropertyKey[]
-
-type Prev = readonly [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-
-export type Paths<T, D extends number = 5, Seen = never> = readonly [] | (
-    D extends never ? readonly [] :
-    T extends Seen ? readonly [] :
-    T extends readonly any[] ? {
-        [K in keyof T as K extends number ? K : never]:
-            | readonly [K]
-            | readonly [K, ...Paths<T[K], Prev[D], Seen | T>]
-    } extends infer O
-        ? O[keyof O]
-        : never
-    :
-    T extends object ? {
-        [K in keyof T as K extends string | number | symbol ? K : never]-?:
-            NonNullable<T[K]> extends infer V
-                ? readonly [K] | readonly [K, ...Paths<V, Prev[D], Seen>]
-                : never
-    } extends infer O
-        ? O[keyof O]
-        : never
-    :
-    never
-)
-
-export type ValueFromPath<T, P extends readonly any[]> = P extends readonly [infer Head, ...infer Tail]
-    ? Head extends keyof T
-        ? ValueFromPath<T[Head], Tail>
-        : T extends readonly any[]
-            ? Head extends number
-                ? ValueFromPath<T[number], Tail>
-                : never
-            : never
-    : T
-
-
-export const equivalence: Equivalence.Equivalence<PropertyPath> = Equivalence.array(Equivalence.strict())
-
-export const unsafeGet: {
-    <T, const P extends Paths<T>>(path: P): (self: T) => ValueFromPath<T, P>
-    <T, const P extends Paths<T>>(self: T, path: P): ValueFromPath<T, P>
-} = Function.dual(2, <T, const P extends Paths<T>>(self: T, path: P): ValueFromPath<T, P> =>
-    path.reduce((acc: any, key: any) => acc?.[key], self)
-)
-
-export const get: {
-    <T, const P extends Paths<T>>(path: P): (self: T) => Option.Option<ValueFromPath<T, P>>
-    <T, const P extends Paths<T>>(self: T, path: P): Option.Option<ValueFromPath<T, P>>
-} = Function.dual(2, <T, const P extends Paths<T>>(self: T, path: P): Option.Option<ValueFromPath<T, P>> =>
-    path.reduce(
-        (acc: Option.Option<any>, key: any): Option.Option<any> => Option.isSome(acc)
-            ? Predicate.hasProperty(acc.value, key)
-                ? Option.some(acc.value[key])
-                : Option.none()
-            : acc,
-
-        Option.some(self),
-    )
-)
-
-export const immutableSet: {
-    <T, const P extends Paths<T>>(path: P, value: ValueFromPath<T, P>): (self: T) => Option.Option<T>
-    <T, const P extends Paths<T>>(self: T, path: P, value: ValueFromPath<T, P>): Option.Option<T>
-} = Function.dual(3, <T, const P extends Paths<T>>(self: T, path: P, value: ValueFromPath<T, P>): Option.Option<T> => {
-    const key = Array.head(path as PropertyPath)
-    if (Option.isNone(key))
-        return Option.some(value as T)
-    if (!Predicate.hasProperty(self, key.value))
-        return Option.none()
-
-    const child = immutableSet<any, any>(self[key.value], Option.getOrThrow(Array.tail(path as PropertyPath)), value)
-    if (Option.isNone(child))
-        return child
-
-    if (Array.isArray(self))
-        return typeof key.value === "number"
-            ? Option.some([
-                ...self.slice(0, key.value),
-                child.value,
-                ...self.slice(key.value + 1),
-            ] as T)
-            : Option.none()
-
-    if (typeof self === "object")
-        return Option.some(
-            Object.assign(
-                Object.create(Object.getPrototypeOf(self)),
-                { ...self, [key.value]: child.value },
-            )
-        )
-
-    return Option.none()
-})

packages/effect-fc/src/PubSub.ts

@@ -3,7 +3,7 @@ import type * as React from "react"
 import * as Component from "./Component.js"
 
 
-export const usePubSubFromReactiveValues = Effect.fnUntraced(function* <const A extends React.DependencyList>(
+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))

packages/effect-fc/src/Query.ts

@@ -6,12 +6,12 @@ import * as Result from "./Result.js"
 export const QueryTypeId: unique symbol = Symbol.for("@effect-fc/Query/Query")
 export type QueryTypeId = typeof QueryTypeId
 
-export interface Query<in out K extends Query.AnyKey, in out A, in out E = never, in out R = never, in out P = never>
+export interface Query<in out K extends Query.AnyKey, in out A, in out KE = never, in out KR = never, in out E = never, in out R = never, in out P = never>
 extends Pipeable.Pipeable {
     readonly [QueryTypeId]: QueryTypeId
 
-    readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | R>
-    readonly key: Stream.Stream<K>
+    readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | KR | R>
+    readonly key: Stream.Stream<K, KE, KR>
     readonly f: (key: K) => Effect.Effect<A, E, R>
     readonly initialProgress: P
 
@@ -37,13 +37,13 @@ export declare namespace Query {
     export type AnyKey = readonly any[]
 }
 
-export class QueryImpl<in out K extends Query.AnyKey, in out A, in out E = never, in out R = never, in out P = never>
-extends Pipeable.Class() implements Query<K, A, E, R, P> {
+export class QueryImpl<in out K extends Query.AnyKey, in out A, in out KE = never, in out KR = never, in out E = never, in out R = never, in out P = never>
+extends Pipeable.Class() implements Query<K, A, KE, KR, E, R, P> {
     readonly [QueryTypeId]: QueryTypeId = QueryTypeId
 
     constructor(
-        readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | R>,
-        readonly key: Stream.Stream<K>,
+        readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | KR | R>,
+        readonly key: Stream.Stream<K, KE, KR>,
         readonly f: (key: K) => Effect.Effect<A, E, R>,
         readonly initialProgress: P,
 
@@ -77,6 +77,7 @@ extends Pipeable.Class() implements Query<K, A, E, R, P> {
         ], { concurrency: "unbounded" }).pipe(
             Effect.ignore,
             this.runSemaphore.withPermits(1),
+            Effect.provide(this.context),
         )
     }
 
@@ -265,11 +266,13 @@ extends Pipeable.Class() implements Query<K, A, E, R, P> {
     }
 }
 
-export const isQuery = (u: unknown): u is Query<readonly unknown[], unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, QueryTypeId)
+
+export const isQuery = (u: unknown): u is Query<readonly unknown[], unknown> => Predicate.hasProperty(u, QueryTypeId)
+
 
 export declare namespace make {
-    export interface Options<K extends Query.AnyKey, A, E = never, R = never, P = never> {
-        readonly key: Stream.Stream<K>
+    export interface Options<K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never> {
+        readonly key: Stream.Stream<K, KE, KR>
         readonly f: (key: NoInfer<K>) => Effect.Effect<A, E, Result.forkEffect.InputContext<R, NoInfer<P>>>
         readonly initialProgress?: P
         readonly staleTime?: Duration.DurationInput
@@ -277,17 +280,17 @@ export declare namespace make {
     }
 }
 
-export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, E = never, R = never, P = never>(
-    options: make.Options<K, A, E, R, P>
+export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never>(
+    options: make.Options<K, A, KE, KR, E, R, P>
 ): Effect.fn.Return<
-    Query<K, A, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
+    Query<K, A, KE, KR, E, Result.forkEffect.OutputContext<R, P>, P>,
     never,
-    Scope.Scope | QueryClient.QueryClient | Result.forkEffect.OutputContext<A, E, R, P>
+    Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<R, P>
 > {
     const client = yield* QueryClient.QueryClient
 
-    return new QueryImpl(
-        yield* Effect.context<Scope.Scope | QueryClient.QueryClient | Result.forkEffect.OutputContext<A, E, R, P>>(),
+    return new QueryImpl<K, A, KE, KR, E, Result.forkEffect.OutputContext<R, P>, P>(
+        yield* Effect.context<Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<R, P>>(),
         options.key,
         options.f as any,
         options.initialProgress as P,
@@ -304,12 +307,12 @@ export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, E =
     )
 })
 
-export const service = <K extends Query.AnyKey, A, E = never, R = never, P = never>(
-    options: make.Options<K, A, E, R, P>
+export const service = <K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never>(
+    options: make.Options<K, A, KE, KR, E, R, P>
 ): Effect.Effect<
-    Query<K, A, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
+    Query<K, A, KE, KR, E, Result.forkEffect.OutputContext<R, P>, P>,
     never,
-    Scope.Scope | QueryClient.QueryClient | Result.forkEffect.OutputContext<A, E, R, P>
+    Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<R, P>
 > => Effect.tap(
     make(options),
     query => Effect.forkScoped(query.run),

packages/effect-fc/src/Result.ts

@@ -1,4 +1,5 @@
-import { Cause, Context, Data, Effect, Equal, Exit, type Fiber, Hash, Layer, Match, Pipeable, Predicate, PubSub, pipe, Ref, type Scope, Stream, Subscribable } from "effect"
+import { Cause, Context, Data, Effect, Equal, Exit, type Fiber, Hash, Layer, Match, Pipeable, Predicate, PubSub, pipe, Ref, type Scope, Stream, type Subscribable, SynchronizedRef } from "effect"
+import { Lens } from "effect-lens"
 
 
 export const ResultTypeId: unique symbol = Symbol.for("@effect-fc/Result/Result")
@@ -15,10 +16,6 @@ export type Final<A, E = never, P = never> = (Success<A> | Failure<E>) & ({} | F
 export type Flags<P = never> = WillFetch | WillRefresh | Refreshing<P>
 
 export declare namespace Result {
-    export interface Prototype extends Pipeable.Pipeable, Equal.Equal {
-        readonly [ResultTypeId]: ResultTypeId
-    }
-
     export type Success<R extends Result<any, any, any>> = [R] extends [Result<infer A, infer _E, infer _P>] ? A : never
     export type Failure<R extends Result<any, any, any>> = [R] extends [Result<infer _A, infer E, infer _P>] ? E : never
     export type Progress<R extends Result<any, any, any>> = [R] extends [Result<infer _A, infer _E, infer P>] ? P : never
@@ -28,21 +25,21 @@ export declare namespace Flags {
     export type Keys = keyof WillFetch & WillRefresh & Refreshing<any>
 }
 
-export interface Initial extends Result.Prototype {
+export interface Initial extends ResultPrototype {
     readonly _tag: "Initial"
 }
 
-export interface Running<P = never> extends Result.Prototype {
+export interface Running<P = never> extends ResultPrototype {
     readonly _tag: "Running"
     readonly progress: P
 }
 
-export interface Success<A> extends Result.Prototype {
+export interface Success<A> extends ResultPrototype {
     readonly _tag: "Success"
     readonly value: A
 }
 
-export interface Failure<E = never> extends Result.Prototype {
+export interface Failure<E = never> extends ResultPrototype {
     readonly _tag: "Failure"
     readonly cause: Cause.Cause<E>
 }
@@ -61,7 +58,11 @@ export interface Refreshing<P = never> {
 }
 
 
-const ResultPrototype = Object.freeze({
+export interface ResultPrototype extends Pipeable.Pipeable, Equal.Equal {
+    readonly [ResultTypeId]: ResultTypeId
+}
+
+export const ResultPrototype: ResultPrototype = Object.freeze({
     ...Pipeable.Prototype,
     [ResultTypeId]: ResultTypeId,
 
@@ -95,7 +96,7 @@ const ResultPrototype = Object.freeze({
             Hash.cached(this),
         )
     },
-} as const satisfies Result.Prototype)
+} as const)
 
 
 export const isResult = (u: unknown): u is Result<unknown, unknown, unknown> => Predicate.hasProperty(u, ResultTypeId)
@@ -162,52 +163,40 @@ export const toExit: {
 }
 
 
-export interface State<A, E = never, P = never> {
-    readonly get: Effect.Effect<Result<A, E, P>>
-    readonly set: (v: Result<A, E, P>) => Effect.Effect<void>
-}
-
-export const State = <A, E = never, P = never>(): Context.Tag<State<A, E, P>, State<A, E, P>> => Context.GenericTag("@effect-fc/Result/State")
-
 export interface Progress<P = never> {
-    readonly update: <E, R>(
-        f: (previous: P) => Effect.Effect<P, E, R>
-    ) => Effect.Effect<void, PreviousResultNotRunningNorRefreshing | E, R>
+    readonly progress: Lens.Lens<P, PreviousResultNotRunningNorRefreshing, never, never, never>
 }
+export const Progress = <P = never>(): Context.Tag<Progress<P>, Progress<P>> => Context.GenericTag("@effect-fc/Result/Progress")
 
 export class PreviousResultNotRunningNorRefreshing extends Data.TaggedError("@effect-fc/Result/PreviousResultNotRunningNorRefreshing")<{
     readonly previous: Result<unknown, unknown, unknown>
 }> {}
 
-export const Progress = <P = never>(): Context.Tag<Progress<P>, Progress<P>> => Context.GenericTag("@effect-fc/Result/Progress")
-
-export const makeProgressLayer = <A, E, P = never>(): Layer.Layer<
-    Progress<P>,
-    never,
-    State<A, E, P>
-> => Layer.effect(Progress<P>(), Effect.gen(function*() {
-    const state = yield* State<A, E, P>()
-
-    return {
-        update: <FE, FR>(f: (previous: P) => Effect.Effect<P, FE, FR>) => Effect.Do.pipe(
-            Effect.bind("previous", () => Effect.andThen(state.get, previous =>
-                (isRunning(previous) || hasRefreshingFlag(previous))
-                    ? Effect.succeed(previous)
-                    : Effect.fail(new PreviousResultNotRunningNorRefreshing({ previous })),
-            )),
-            Effect.bind("progress", ({ previous }) => f(previous.progress)),
-            Effect.let("next", ({ previous, progress }) => isRunning(previous)
-                ? running(progress)
-                : refreshing(previous, progress) as Final<A, E, P> & Refreshing<P>
+export const makeProgressLayer = <A, E, P = never>(
+    state: Lens.Lens<Result<A, E, P>, never, never, never, never>
+): Layer.Layer<Progress<P> | Progress<never>, never, never> => Layer.succeed(
+    Progress<P>() as Context.Tag<Progress<P> | Progress<never>, Progress<P> | Progress<never>>,
+    {
+        progress: state.pipe(
+            Lens.mapEffect(
+                a => (isRunning(a) || hasRefreshingFlag(a))
+                    ? Effect.succeed(a)
+                    : Effect.fail(new PreviousResultNotRunningNorRefreshing({ previous: a })),
+                (_, b) => Effect.succeed(b),
             ),
-            Effect.andThen(({ next }) => state.set(next)),
+            Lens.map(
+                a => a.progress,
+                (a, b) => isRunning(a)
+                    ? running(b)
+                    : refreshing(a, b) as Final<A, E, P> & Refreshing<P>,
             ),
-    }
-}))
+        )
+    },
+)
 
 
 export namespace unsafeForkEffect {
-    export type OutputContext<A, E, R, P> = Exclude<R, State<A, E, P> | Progress<P> | Progress<never>>
+    export type OutputContext<R, P> = Exclude<R, Progress<P> | Progress<never>>
 
     export interface Options<A, E, P> {
         readonly initial?: Initial | Final<A, E, P>
@@ -215,55 +204,56 @@ export namespace unsafeForkEffect {
     }
 }
 
-export const unsafeForkEffect = <A, E, R, P = never>(
+export const unsafeForkEffect = Effect.fnUntraced(function* <A, E, R, P = never>(
     effect: Effect.Effect<A, E, R>,
     options?: unsafeForkEffect.Options<NoInfer<A>, NoInfer<E>, P>,
-): Effect.Effect<
+): Effect.fn.Return<
     readonly [result: Subscribable.Subscribable<Result<A, E, P>, never, never>, fiber: Fiber.Fiber<A, E>],
     never,
-    Scope.Scope | unsafeForkEffect.OutputContext<A, E, R, P>
-> => Effect.Do.pipe(
-    Effect.bind("ref", () => Ref.make(options?.initial ?? initial<A, E, P>())),
-    Effect.bind("pubsub", () => PubSub.unbounded<Result<A, E, P>>()),
-    Effect.bind("fiber", ({ ref, pubsub }) => Effect.forkScoped(State<A, E, P>().pipe(
-        Effect.andThen(state => state.set(
+    Scope.Scope | unsafeForkEffect.OutputContext<R, P>
+> {
+    const ref = (yield* SynchronizedRef.make(
+        options?.initial ?? initial<A, E, P>()
+    )) as Lens.SynchronizedRefLensImpl.SynchronizedRefWithInternals<Result<A, E, P>>
+    const pubsub = yield* PubSub.unbounded<Result<A, E, P>>()
+
+    const state = Lens.make({
+        get: Ref.get(ref.ref),
+        get changes() {
+            return Stream.unwrapScoped(Effect.map(
+                Effect.all([Ref.get(ref.ref), Stream.fromPubSub(pubsub, { scoped: true })]),
+                ([latest, stream]) => Stream.concat(Stream.make(latest), stream),
+            ))
+        },
+        commit: value => Effect.zipLeft(
+            Ref.set(ref.ref, value),
+            PubSub.publish(pubsub, value),
+        ),
+        lock: Effect.succeed(ref.withLock),
+    })
+
+    const fiber = yield* Effect.gen(function*() {
+        yield* Lens.set(
+            state,
             (isFinal(options?.initial) && hasWillRefreshFlag(options?.initial))
                 ? refreshing(options.initial, options?.initialProgress) as Result<A, E, P>
-                : running(options?.initialProgress)
-        ).pipe(
-            Effect.andThen(effect),
-            Effect.onExit(exit => Effect.andThen(
-                state.set(fromExit(exit)),
+                : running(options?.initialProgress),
+        )
+        return yield* Effect.onExit(effect, exit => Effect.andThen(
+            Lens.set(state, fromExit(exit)),
             Effect.forkScoped(PubSub.shutdown(pubsub)),
-            )),
-        )),
-        Effect.provide(Layer.empty.pipe(
-            Layer.provideMerge(makeProgressLayer<A, E, P>()),
-            Layer.provideMerge(Layer.succeed(State<A, E, P>(), {
-                get: ref,
-                set: v => Effect.andThen(Ref.set(ref, v), PubSub.publish(pubsub, v))
-            })),
-        )),
-    ))),
-    Effect.map(({ ref, pubsub, fiber }) => [
-        Subscribable.make({
-            get: ref,
-            changes: Stream.unwrapScoped(Effect.map(
-                Effect.all([ref, Stream.fromPubSub(pubsub, { scoped: true })]),
-                ([latest, stream]) => Stream.concat(Stream.make(latest), stream),
-            )),
-        }),
-        fiber,
-    ]),
-) as Effect.Effect<
-    readonly [result: Subscribable.Subscribable<Result<A, E, P>, never, never>, fiber: Fiber.Fiber<A, E>],
-    never,
-    Scope.Scope | unsafeForkEffect.OutputContext<A, E, R, P>
->
+        ))
+    }).pipe(
+        Effect.forkScoped,
+        Effect.provide(makeProgressLayer(state)),
+    )
+
+    return [state, fiber] as const
+})
 
 export namespace forkEffect {
     export type InputContext<R, P> = R extends Progress<infer X> ? [X] extends [P] ? R : never : R
-    export type OutputContext<A, E, R, P> = unsafeForkEffect.OutputContext<A, E, R, P>
+    export type OutputContext<R, P> = unsafeForkEffect.OutputContext<R, P>
     export interface Options<A, E, P> extends unsafeForkEffect.Options<A, E, P> {}
 }
 
@@ -274,6 +264,6 @@ export const forkEffect: {
     ): Effect.Effect<
         readonly [result: Subscribable.Subscribable<Result<A, E, P>, never, never>, fiber: Fiber.Fiber<A, E>],
         never,
-        Scope.Scope | forkEffect.OutputContext<A, E, R, P>
+        Scope.Scope | forkEffect.OutputContext<R, P>
     >
 } = unsafeForkEffect

packages/effect-fc/src/SetStateAction.ts

@@ -3,8 +3,8 @@ import type * as React from "react"
 
 
 export const value: {
-    <S>(prevState: S): (self: React.SetStateAction<S>) => S
     <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)

packages/effect-fc/src/Stream.ts

@@ -3,7 +3,7 @@ import * as React from "react"
 import * as Component from "./Component.js"
 
 
-export const useStream: {
+export const use: {
     <A, E, R>(
         stream: Stream.Stream<A, E, R>
     ): Effect.Effect<Option.Option<A>, never, R>

packages/effect-fc/src/SubmittableForm.ts

@@ -0,0 +1,220 @@
+import { Array, Cause, Chunk, type Context, Effect, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, Schema, type Scope, SubscriptionRef } from "effect"
+import * as Form from "./Form.js"
+import * as Lens from "./Lens.js"
+import * as Mutation from "./Mutation.js"
+import * as Result from "./Result.js"
+import * as Subscribable from "./Subscribable.js"
+
+
+export const SubmittableFormTypeId: unique symbol = Symbol.for("@effect-fc/Form/SubmittableForm")
+export type SubmittableFormTypeId = typeof SubmittableFormTypeId
+
+export interface SubmittableForm<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+extends Form.Form<readonly [], A, I, never, never> {
+    readonly [SubmittableFormTypeId]: SubmittableFormTypeId
+
+    readonly schema: Schema.Schema<A, I, R>
+    readonly context: Context.Context<Scope.Scope | R>
+    readonly mutation: Mutation.Mutation<
+        readonly [value: A, form: SubmittableForm<A, I, R, unknown, unknown, unknown>],
+        MA, ME, MR, MP
+    >
+    readonly validationFiber: Subscribable.Subscribable<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>, never, never>
+
+    readonly run: Effect.Effect<void>
+    readonly submit: Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>, Cause.NoSuchElementException>
+}
+
+export class SubmittableFormImpl<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+extends Pipeable.Class() implements SubmittableForm<A, I, R, MA, ME, MR, MP> {
+    readonly [Form.FormTypeId]: Form.FormTypeId = Form.FormTypeId
+    readonly [SubmittableFormTypeId]: SubmittableFormTypeId = SubmittableFormTypeId
+
+    readonly path = [] as const
+
+    readonly encodedValue: Lens.Lens<I, never, never, never, never>
+    readonly isValidating: Subscribable.Subscribable<boolean, never, never>
+    readonly canCommit: Subscribable.Subscribable<boolean, never, never>
+    readonly isCommitting: Subscribable.Subscribable<boolean, never, never>
+
+    constructor(
+        readonly schema: Schema.Schema<A, I, R>,
+        readonly context: Context.Context<Scope.Scope | R>,
+        readonly mutation: Mutation.Mutation<
+            readonly [value: A, form: SubmittableForm<A, I, R, unknown, unknown, unknown>],
+            MA, ME, MR, MP
+        >,
+        readonly value: Lens.Lens<Option.Option<A>, never, never, never, never>,
+        readonly internalEncodedValue: Lens.Lens<I, never, never, never, never>,
+        readonly issues: Lens.Lens<readonly ParseResult.ArrayFormatterIssue[], never, never, never, never>,
+        readonly validationFiber: Lens.Lens<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>, never, never, never, never>,
+
+        readonly runSemaphore: Effect.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 => Subscribable.map(self.validationFiber, Option.isSome)),
+            Subscribable.unwrap,
+        )
+        this.canCommit = Effect.succeed(this).pipe(
+            Effect.map(self => Subscribable.map(
+                Subscribable.zipLatestAll(self.value, self.issues, self.validationFiber, self.mutation.result),
+                ([value, issues, validationFiber, result]) => (
+                    Option.isSome(value) &&
+                    Array.isEmptyReadonlyArray(issues) &&
+                    Option.isNone(validationFiber) &&
+                    !(Result.isRunning(result) || Result.hasRefreshingFlag(result))
+                ),
+            )),
+            Subscribable.unwrap,
+        )
+        this.isCommitting = Effect.succeed(this).pipe(
+            Effect.map(self => Subscribable.map(
+                self.mutation.result,
+                result => Result.isRunning(result) || Result.hasRefreshingFlag(result),
+            )),
+            Subscribable.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.decode(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(
+                ParseResult.isParseError,
+                flow(
+                    ParseResult.ArrayFormatter.formatError,
+                    Effect.flatMap(v => Lens.set(this.issues, v)),
+                ),
+            ),
+
+            Effect.provide(this.context),
+        )
+    }
+
+    get run(): Effect.Effect<void, never, never> {
+        return Lens.get(this.encodedValue).pipe(
+            Effect.flatMap(v => Schema.decode(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<Result.Final<MA, ME, MP>>, Cause.NoSuchElementException, never> {
+        return Lens.get(this.value).pipe(
+            Effect.flatMap(identity),
+            Effect.flatMap(value => this.submitValue(value)),
+        )
+    }
+
+    submitValue(value: A): Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>, never, never> {
+        return Effect.whenEffect(
+            Effect.tap(
+                this.mutation.mutate([value, this as any]),
+                result => Result.isFailure(result)
+                    ? Option.match(
+                        Chunk.findFirst(
+                            Cause.failures(result.cause as Cause.Cause<ParseResult.ParseError>),
+                            e => e._tag === "ParseError",
+                        ),
+                        {
+                            onSome: e => Effect.flatMap(
+                                ParseResult.ArrayFormatter.formatError(e),
+                                v => Lens.set(this.issues, v),
+                            ),
+                            onNone: () => Effect.void,
+                        },
+                    )
+                    : Effect.void
+            ),
+            this.canCommit.get,
+        )
+    }
+}
+
+
+export const isSubmittableForm = (u: unknown): u is SubmittableForm<unknown, unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, SubmittableFormTypeId)
+
+
+export declare namespace make {
+    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+    extends Mutation.make.Options<
+        readonly [value: NoInfer<A>, form: SubmittableForm<NoInfer<A>, NoInfer<I>, NoInfer<R>, unknown, unknown, unknown>],
+        MA, ME, MR, MP
+    > {
+        readonly schema: Schema.Schema<A, I, R>
+        readonly initialEncodedValue: NoInfer<I>
+    }
+}
+
+export const make = Effect.fnUntraced(function* <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
+    options: make.Options<A, I, R, MA, ME, MR, MP>
+): Effect.fn.Return<
+    SubmittableForm<A, I, R, MA, ME, Result.forkEffect.OutputContext<MR, MP>, MP>,
+    never,
+    Scope.Scope | R | Result.forkEffect.OutputContext<MR, MP>
+> {
+    return new SubmittableFormImpl(
+        options.schema,
+        yield* Effect.context<Scope.Scope | R>(),
+        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 ParseResult.ArrayFormatterIssue[]>(Array.empty())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, ParseResult.ParseError>>())),
+
+        yield* Effect.makeSemaphore(1),
+    )
+})
+
+export declare namespace service {
+    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+    extends make.Options<A, I, R, MA, ME, MR, MP> {}
+}
+
+export const service = <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
+    options: service.Options<A, I, R, MA, ME, MR, MP>
+): Effect.Effect<
+    SubmittableForm<A, I, R, MA, ME, Result.forkEffect.OutputContext<MR, MP>, MP>,
+    never,
+    Scope.Scope | R | Result.forkEffect.OutputContext<MR, MP>
+> => Effect.tap(
+    make(options),
+    form => Effect.forkScoped(form.run),
+)

packages/effect-fc/src/Subscribable.ts

@@ -1,8 +1,11 @@
-import { Effect, Equivalence, Stream, Subscribable } from "effect"
+import { Effect, Equivalence, Stream } from "effect"
+import { Subscribable } from "effect-lens"
 import * as React from "react"
 import * as Component from "./Component.js"
 
 
+export * from "effect-lens/Subscribable"
+
 export const zipLatestAll = <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
     ...elements: T
 ): Subscribable.Subscribable<
@@ -16,7 +19,7 @@ export const zipLatestAll = <const T extends readonly Subscribable.Subscribable<
     changes: Stream.zipLatestAll(...elements.map(v => v.changes)),
 }) as any
 
-export declare namespace useSubscribables {
+export declare namespace useAll {
     export type Success<T extends readonly Subscribable.Subscribable<any, any, any>[]> = [T[number]] extends [never]
         ? never
         : { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never }
@@ -26,11 +29,11 @@ export declare namespace useSubscribables {
     }
 }
 
-export const useSubscribables = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
+export const useAll = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
     elements: T,
-    options?: useSubscribables.Options<useSubscribables.Success<NoInfer<T>>>,
+    options?: useAll.Options<useAll.Success<NoInfer<T>>>,
 ): Effect.fn.Return<
-    useSubscribables.Success<T>,
+    useAll.Success<T>,
     [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer E, infer _R> ? E : never,
     [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer R> ? R : never
 > {
@@ -48,5 +51,3 @@ export const useSubscribables = Effect.fnUntraced(function* <const T extends rea
 
     return reactStateValue as any
 })
-
-export * from "effect/Subscribable"

packages/effect-fc/src/SubscriptionRef.ts

@@ -1,61 +0,0 @@
-import { Effect, Equivalence, Ref, Stream, SubscriptionRef } from "effect"
-import * as React from "react"
-import * as Component from "./Component.js"
-import * as SetStateAction from "./SetStateAction.js"
-
-
-export declare namespace useSubscriptionRefState {
-    export interface Options<A> {
-        readonly equivalence?: Equivalence.Equivalence<A>
-    }
-}
-
-export const useSubscriptionRefState = Effect.fnUntraced(function* <A>(
-    ref: SubscriptionRef.SubscriptionRef<A>,
-    options?: useSubscriptionRefState.Options<NoInfer<A>>,
-): Effect.fn.Return<readonly [A, React.Dispatch<React.SetStateAction<A>>]> {
-    const [reactStateValue, setReactStateValue] = React.useState(yield* Component.useOnMount(() => ref))
-
-    yield* Component.useReactEffect(() => Effect.forkScoped(
-        Stream.runForEach(
-            Stream.changesWith(ref.changes, options?.equivalence ?? Equivalence.strict()),
-            v => Effect.sync(() => setReactStateValue(v)),
-        )
-    ), [ref])
-
-    const setValue = yield* Component.useCallbackSync(
-        (setStateAction: React.SetStateAction<A>) => Effect.andThen(
-            Ref.updateAndGet(ref, prevState => SetStateAction.value(setStateAction, prevState)),
-            v => setReactStateValue(v),
-        ),
-        [ref],
-    )
-
-    return [reactStateValue, setValue]
-})
-
-export declare namespace useSubscriptionRefFromState {
-    export interface Options<A> {
-        readonly equivalence?: Equivalence.Equivalence<A>
-    }
-}
-
-export const useSubscriptionRefFromState = Effect.fnUntraced(function* <A>(
-    [value, setValue]: readonly [A, React.Dispatch<React.SetStateAction<A>>],
-    options?: useSubscriptionRefFromState.Options<NoInfer<A>>,
-): Effect.fn.Return<SubscriptionRef.SubscriptionRef<A>> {
-    const ref = yield* Component.useOnChange(() => Effect.tap(
-        SubscriptionRef.make(value),
-        ref => Effect.forkScoped(
-            Stream.runForEach(
-                Stream.changesWith(ref.changes, options?.equivalence ?? Equivalence.strict()),
-                v => Effect.sync(() => setValue(v)),
-            )
-        ),
-    ), [setValue])
-
-    yield* Component.useReactEffect(() => Ref.set(ref, value), [value])
-    return ref
-})
-
-export * from "effect/SubscriptionRef"

packages/effect-fc/src/SubscriptionSubRef.ts

@@ -1,186 +0,0 @@
-import { Chunk, Effect, Effectable, Option, Predicate, Readable, Ref, Stream, Subscribable, SubscriptionRef, SynchronizedRef, type Types, type Unify } from "effect"
-import * as PropertyPath from "./PropertyPath.js"
-
-
-export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("@effect-fc/SubscriptionSubRef/SubscriptionSubRef")
-export type SubscriptionSubRefTypeId = typeof SubscriptionSubRefTypeId
-
-export interface SubscriptionSubRef<in out A, in out B extends SubscriptionRef.SubscriptionRef<any>>
-extends SubscriptionSubRef.Variance<A, B>, SubscriptionRef.SubscriptionRef<A> {
-    readonly parent: B
-
-    readonly [Unify.typeSymbol]?: unknown
-    readonly [Unify.unifySymbol]?: SubscriptionSubRefUnify<this>
-    readonly [Unify.ignoreSymbol]?: SubscriptionSubRefUnifyIgnore
-}
-
-export declare namespace SubscriptionSubRef {
-    export interface Variance<in out A, in out B> {
-        readonly [SubscriptionSubRefTypeId]: {
-            readonly _A: Types.Invariant<A>
-            readonly _B: Types.Invariant<B>
-        }
-    }
-}
-
-export interface SubscriptionSubRefUnify<A extends { [Unify.typeSymbol]?: any }> extends SubscriptionRef.SubscriptionRefUnify<A> {
-    SubscriptionSubRef?: () => Extract<A[Unify.typeSymbol], SubscriptionSubRef<any, any>>
-}
-
-export interface SubscriptionSubRefUnifyIgnore extends SubscriptionRef.SubscriptionRefUnifyIgnore {
-    SubscriptionRef?: true
-}
-
-
-const refVariance = { _A: (_: any) => _ }
-const synchronizedRefVariance = { _A: (_: any) => _ }
-const subscriptionRefVariance = { _A: (_: any) => _ }
-const subscriptionSubRefVariance = { _A: (_: any) => _, _B: (_: any) => _ }
-
-class SubscriptionSubRefImpl<in out A, in out B extends SubscriptionRef.SubscriptionRef<any>>
-extends Effectable.Class<A> implements SubscriptionSubRef<A, B> {
-    readonly [Readable.TypeId]: Readable.TypeId = Readable.TypeId
-    readonly [Subscribable.TypeId]: Subscribable.TypeId = Subscribable.TypeId
-    readonly [Ref.RefTypeId] = refVariance
-    readonly [SynchronizedRef.SynchronizedRefTypeId] = synchronizedRefVariance
-    readonly [SubscriptionRef.SubscriptionRefTypeId] = subscriptionRefVariance
-    readonly [SubscriptionSubRefTypeId] = subscriptionSubRefVariance
-
-    readonly get: Effect.Effect<A>
-
-    constructor(
-        readonly parent: B,
-        readonly getter: (parentValue: Effect.Effect.Success<B>) => A,
-        readonly setter: (parentValue: Effect.Effect.Success<B>, value: A) => Effect.Effect.Success<B>,
-    ) {
-        super()
-        this.get = Effect.map(this.parent, this.getter)
-    }
-
-    commit() {
-        return this.get
-    }
-
-    get changes(): Stream.Stream<A> {
-        return Stream.unwrap(
-            Effect.map(this.get, a => Stream.concat(
-                Stream.make(a),
-                Stream.map(this.parent.changes, this.getter),
-            ))
-        )
-    }
-
-    modify<C>(f: (a: A) => readonly [C, A]): Effect.Effect<C> {
-        return this.modifyEffect(a => Effect.succeed(f(a)))
-    }
-
-    modifyEffect<C, E, R>(f: (a: A) => Effect.Effect<readonly [C, A], E, R>): Effect.Effect<C, E, R> {
-        return Effect.Do.pipe(
-            Effect.bind("b", (): Effect.Effect<Effect.Effect.Success<B>> => this.parent),
-            Effect.bind("ca", ({ b }) => f(this.getter(b))),
-            Effect.tap(({ b, ca: [, a] }) => SubscriptionRef.set(this.parent, this.setter(b, a))),
-            Effect.map(({ ca: [c] }) => c),
-        )
-    }
-}
-
-
-export const isSubscriptionSubRef = (u: unknown): u is SubscriptionSubRef<unknown, SubscriptionRef.SubscriptionRef<unknown>> => Predicate.hasProperty(u, SubscriptionSubRefTypeId)
-
-export const makeFromGetSet = <A, B extends SubscriptionRef.SubscriptionRef<any>>(
-    parent: B,
-    options: {
-        readonly get: (parentValue: Effect.Effect.Success<B>) => A
-        readonly set: (parentValue: Effect.Effect.Success<B>, value: A) => Effect.Effect.Success<B>
-    },
-): SubscriptionSubRef<A, B> => new SubscriptionSubRefImpl(parent, options.get, options.set)
-
-export const makeFromPath = <
-    B extends SubscriptionRef.SubscriptionRef<any>,
-    const P extends PropertyPath.Paths<Effect.Effect.Success<B>>,
->(
-    parent: B,
-    path: P,
-): SubscriptionSubRef<PropertyPath.ValueFromPath<Effect.Effect.Success<B>, P>, B> => new SubscriptionSubRefImpl(
-    parent,
-    parentValue => Option.getOrThrow(PropertyPath.get(parentValue, path)),
-    (parentValue, value) => Option.getOrThrow(PropertyPath.immutableSet(parentValue, path, value)),
-)
-
-export const makeFromChunkIndex: {
-    <B extends SubscriptionRef.SubscriptionRef<Chunk.NonEmptyChunk<any>>>(
-        parent: B,
-        index: number,
-    ): SubscriptionSubRef<
-        Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never,
-        B
-    >
-    <B extends SubscriptionRef.SubscriptionRef<Chunk.Chunk<any>>>(
-        parent: B,
-        index: number,
-    ): SubscriptionSubRef<
-        Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never,
-        B
-    >
-} = (
-    parent: SubscriptionRef.SubscriptionRef<Chunk.Chunk<any>>,
-    index: number,
-) => new SubscriptionSubRefImpl(
-    parent,
-    parentValue => Chunk.unsafeGet(parentValue, index),
-    (parentValue, value) => Chunk.replace(parentValue, index, value),
-) as any
-
-export const makeFromChunkFindFirst: {
-    <B extends SubscriptionRef.SubscriptionRef<Chunk.NonEmptyChunk<any>>>(
-        parent: B,
-        findFirstPredicate: Predicate.Predicate<Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never>,
-    ): SubscriptionSubRef<
-        Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never,
-        B
-    >
-    <B extends SubscriptionRef.SubscriptionRef<Chunk.Chunk<any>>>(
-        parent: B,
-        findFirstPredicate: Predicate.Predicate<Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never>,
-    ): SubscriptionSubRef<
-        Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never,
-        B
-    >
-} = (
-    parent: SubscriptionRef.SubscriptionRef<Chunk.Chunk<never>>,
-    findFirstPredicate: Predicate.Predicate.Any,
-) => new SubscriptionSubRefImpl(
-    parent,
-    parentValue => Option.getOrThrow(Chunk.findFirst(parentValue, findFirstPredicate)),
-    (parentValue, value) => Option.getOrThrow(Option.andThen(
-        Chunk.findFirstIndex(parentValue, findFirstPredicate),
-        index => Chunk.replace(parentValue, index, value),
-    )),
-) as any
-
-export const makeFromChunkFindLast: {
-    <B extends SubscriptionRef.SubscriptionRef<Chunk.NonEmptyChunk<any>>>(
-        parent: B,
-        findLastPredicate: Predicate.Predicate<Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never>,
-    ): SubscriptionSubRef<
-        Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never,
-        B
-    >
-    <B extends SubscriptionRef.SubscriptionRef<Chunk.Chunk<any>>>(
-        parent: B,
-        findLastPredicate: Predicate.Predicate<Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never>,
-    ): SubscriptionSubRef<
-        Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never,
-        B
-    >
-} = (
-    parent: SubscriptionRef.SubscriptionRef<Chunk.Chunk<never>>,
-    findLastPredicate: Predicate.Predicate.Any,
-) => new SubscriptionSubRefImpl(
-    parent,
-    parentValue => Option.getOrThrow(Chunk.findLast(parentValue, findLastPredicate)),
-    (parentValue, value) => Option.getOrThrow(Option.andThen(
-        Chunk.findLastIndex(parentValue, findLastPredicate),
-        index => Chunk.replace(parentValue, index, value),
-    )),
-) as any

packages/effect-fc/src/SynchronizedForm.ts

@@ -0,0 +1,223 @@
+import { Array, type Context, Effect, Equal, Fiber, flow, Option, ParseResult, Pipeable, Predicate, Schema, type Scope, Stream, SubscriptionRef } from "effect"
+import * as Form from "./Form.js"
+import * as Lens from "./Lens.js"
+import * as Subscribable from "./Subscribable.js"
+
+
+export const SynchronizedFormTypeId: unique symbol = Symbol.for("@effect-fc/Form/SynchronizedForm")
+export type SynchronizedFormTypeId = typeof SynchronizedFormTypeId
+
+export interface SynchronizedForm<
+    in out A,
+    in out I = A,
+    in out R = never,
+    in out TER = never,
+    in out TEW = never,
+    in out TRR = never,
+    in out TRW = never,
+> extends Form.Form<readonly [], A, I, TER, TER | TEW> {
+    readonly [SynchronizedFormTypeId]: SynchronizedFormTypeId
+
+    readonly schema: Schema.Schema<A, I, R>
+    readonly context: Context.Context<Scope.Scope | R | TRR | TRW>
+    readonly target: Lens.Lens<A, TER, TEW, TRR, TRW>
+    readonly validationFiber: Subscribable.Subscribable<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>, never, never>
+
+    readonly run: Effect.Effect<void, TER>
+}
+
+export class SynchronizedFormImpl<
+    in out A,
+    in out I = A,
+    in out R = never,
+    in out TER = never,
+    in out TEW = never,
+    in out TRR = never,
+    in out TRW = never,
+> extends Pipeable.Class() implements SynchronizedForm<A, I, R, TER, TEW, TRR, TRW> {
+    readonly [Form.FormTypeId]: Form.FormTypeId = Form.FormTypeId
+    readonly [SynchronizedFormTypeId]: SynchronizedFormTypeId = SynchronizedFormTypeId
+
+    readonly path = [] as const
+
+    readonly value: Subscribable.Subscribable<Option.Option<A>, never, never>
+    readonly encodedValue: Lens.Lens<I, TER, TER | TEW, never, never>
+    readonly isValidating: Subscribable.Subscribable<boolean, never, never>
+    readonly canCommit: Subscribable.Subscribable<boolean, never, never>
+
+    constructor(
+        readonly schema: Schema.Schema<A, I, R>,
+        readonly context: Context.Context<Scope.Scope | R | TRR | TRW>,
+        readonly target: Lens.Lens<A, TER, TEW, TRR, TRW>,
+
+        readonly internalEncodedValue: Lens.Lens<I, never, never, never, never>,
+        readonly issues: Lens.Lens<readonly ParseResult.ArrayFormatterIssue[], never, never, never, never>,
+        readonly validationFiber: Lens.Lens<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>, never, never, never, never>,
+        readonly isCommitting: Lens.Lens<boolean, never, never>,
+
+        readonly runSemaphore: Effect.Semaphore,
+    ) {
+        super()
+
+        this.value = Effect.succeed(this).pipe(
+            Effect.map(self => Subscribable.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.catchAll(() => Stream.make(Option.none())),
+                        ),
+                        self.context,
+                    )
+                },
+            })),
+            Subscribable.unwrap,
+        )
+        this.encodedValue = Effect.all([
+            Effect.succeed(this),
+            Effect.succeed(Lens.asLensImpl(this.internalEncodedValue)),
+        ]).pipe(
+            Effect.map(([self, parent]) => Lens.make<I, TER, TER | TEW, never, never>({
+                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 => Subscribable.map(self.validationFiber, Option.isSome)),
+            Subscribable.unwrap,
+        )
+        this.canCommit = Effect.succeed(this).pipe(
+            Effect.map(self => Subscribable.map(
+                Subscribable.zipLatestAll(self.issues, self.validationFiber, self.isCommitting),
+                ([issues, validationFiber, isCommitting]) => (
+                    Array.isEmptyReadonlyArray(issues) &&
+                    Option.isNone(validationFiber) &&
+                    !isCommitting
+                ),
+            )),
+            Subscribable.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.decode(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(
+                ParseResult.isParseError,
+                flow(
+                    ParseResult.ArrayFormatter.formatError,
+                    Effect.flatMap(v => Lens.set(this.issues, v)),
+                ),
+            ),
+
+            Effect.provide(this.context),
+        )
+    }
+
+    get run(): Effect.Effect<void, TER, never> {
+        return this.runSemaphore.withPermits(1)(Effect.provide(
+            Stream.runForEach(
+                Stream.drop(this.target.changes, 1),
+                targetValue => Schema.encode(this.schema, { errors: "all" })(targetValue).pipe(
+                    Effect.flatMap(encodedValue => Effect.whenEffect(
+                        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 isSynchronizedForm = (u: unknown): u is SynchronizedForm<unknown, unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, SynchronizedFormTypeId)
+
+
+export declare namespace make {
+    export interface Options<in out A, in out I = A, in out R = never, in out TER = never, in out TEW = never, in out TRR = never, in out TRW = never> {
+        readonly schema: Schema.Schema<A, I, R>
+        readonly target: Lens.Lens<A, TER, TEW, TRR, TRW>
+        readonly initialEncodedValue?: NoInfer<I>
+    }
+}
+
+export const make = Effect.fnUntraced(function* <A, I = A, R = never, TER = never, TEW = never, TRR = never, TRW = never>(
+    options: make.Options<A, I, R, TER, TEW, TRR, TRW>
+): Effect.fn.Return<
+    SynchronizedForm<A, I, R, TER, TEW, TRR, TRW>,
+    ParseResult.ParseError | TER,
+    Scope.Scope | R | TRR | TRW
+> {
+    const initialEncodedValue = options.initialEncodedValue !== undefined
+        ? options.initialEncodedValue
+        : yield* Effect.flatMap(
+            Lens.get(options.target),
+            Schema.encode(options.schema, { errors: "all" }),
+        )
+
+    return new SynchronizedFormImpl(
+        options.schema,
+        yield* Effect.context<Scope.Scope | R | TRR | TRW>(),
+        options.target,
+
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(initialEncodedValue)),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make<readonly ParseResult.ArrayFormatterIssue[]>(Array.empty())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, ParseResult.ParseError>>())),
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(false)),
+
+        yield* Effect.makeSemaphore(1),
+    )
+})
+
+export declare namespace service {
+    export interface Options<in out A, in out I = A, in out R = never, in out TER = never, in out TEW = never, in out TRR = never, in out TRW = never>
+    extends make.Options<A, I, R, TER, TEW, TRR, TRW> {}
+}
+
+export const service = <A, I = A, R = never, TER = never, TEW = never, TRR = never, TRW = never>(
+    options: service.Options<A, I, R, TER, TEW, TRR, TRW>
+): Effect.Effect<
+    SynchronizedForm<A, I, R, TER, TEW, TRR, TRW>,
+    ParseResult.ParseError | TER,
+    Scope.Scope | R | TRR | TRW
+> => Effect.tap(
+    make(options),
+    form => Effect.forkScoped(form.run),
+)

packages/effect-fc/src/index.ts

@@ -2,9 +2,9 @@ export * as Async from "./Async.js"
 export * as Component from "./Component.js"
 export * as ErrorObserver from "./ErrorObserver.js"
 export * as Form from "./Form.js"
+export * as Lens from "./Lens.js"
 export * as Memoized from "./Memoized.js"
 export * as Mutation from "./Mutation.js"
-export * as PropertyPath from "./PropertyPath.js"
 export * as PubSub from "./PubSub.js"
 export * as Query from "./Query.js"
 export * as QueryClient from "./QueryClient.js"
@@ -12,6 +12,6 @@ export * as ReactRuntime from "./ReactRuntime.js"
 export * as Result from "./Result.js"
 export * as SetStateAction from "./SetStateAction.js"
 export * as Stream from "./Stream.js"
+export * as SubmittableForm from "./SubmittableForm.js"
 export * as Subscribable from "./Subscribable.js"
-export * as SubscriptionRef from "./SubscriptionRef.js"
-export * as SubscriptionSubRef from "./SubscriptionSubRef.js"
+export * as SynchronizedForm from "./SynchronizedForm.js"

packages/effect-fc/test/Component.test.tsx

@@ -0,0 +1,354 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import { Context, Effect, Layer } from "effect"
+import * as React from "react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import * as Component from "../src/Component.js"
+import * as ReactRuntime from "../src/ReactRuntime.js"
+
+
+class ValueService extends Context.Tag("ValueService")<ValueService, { readonly value: string }>() {}
+
+afterEach(() => {
+    vi.useRealTimers()
+})
+
+describe("Component", () => {
+    it("runs useOnMount only once across rerenders", async () => {
+        const onMount = vi.fn(() => Effect.succeed("mounted"))
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await Effect.runPromise(runtime.runtime.runtimeEffect)
+
+        const Probe = Component.makeUntraced("UseOnMountProbe")(function*() {
+            const value = yield* Component.useOnMount(onMount)
+            return <div>{value}</div>
+        }).pipe(
+            Component.withRuntime(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("mounted")
+        expect(onMount).toHaveBeenCalledTimes(1)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe />
+            </runtime.context.Provider>
+        )
+        expect(await screen.findByText("mounted")).toBeTruthy()
+        expect(onMount).toHaveBeenCalledTimes(1)
+
+        view.unmount()
+        await Effect.runPromise(runtime.runtime.disposeEffect)
+    })
+
+    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 Effect.runPromise(runtime.runtime.runtimeEffect)
+
+        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.withRuntime(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value={1} />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("value:1")
+        expect(onChange).toHaveBeenCalledTimes(1)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value={1} />
+            </runtime.context.Provider>
+        )
+
+        expect(await screen.findByText("value:1")).toBeTruthy()
+        expect(onChange).toHaveBeenCalledTimes(1)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe value={2} />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("value:2")
+        expect(onChange).toHaveBeenCalledTimes(2)
+
+        view.unmount()
+        await Effect.runPromise(runtime.runtime.disposeEffect)
+    })
+
+    it("closes the previous scope on dependency changes and unmount", async () => {
+        const cleanup = vi.fn()
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await Effect.runPromise(runtime.runtime.runtimeEffect)
+
+        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.withRuntime(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 Effect.runPromise(runtime.runtime.disposeEffect)
+    })
+
+    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 Effect.runPromise(runtime.runtime.runtimeEffect)
+
+        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.withRuntime(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:second",
+            "cleanup:second",
+        ])
+        await Effect.runPromise(runtime.runtime.disposeEffect)
+    })
+
+    it("keeps useCallbackSync stable until dependencies change", async () => {
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await Effect.runPromise(runtime.runtime.runtimeEffect)
+        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.withRuntime(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe prefix="a" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("a:1")
+        expect(seenCallbacks).toHaveLength(2)
+        expect(seenCallbacks[0]).toBe(seenCallbacks[1])
+        expect(seenCallbacks[0]?.(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(2)
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Probe prefix="b" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("b:1")
+        await waitFor(() => expect(seenCallbacks).toHaveLength(3))
+        expect(seenCallbacks[2]).not.toBe(seenCallbacks[1])
+        expect(seenCallbacks[2]?.(2)).toBe("b:2")
+
+        view.unmount()
+        await Effect.runPromise(runtime.runtime.disposeEffect)
+    })
+
+    it("delays cleanup according to finalizerExecutionDebounce", async () => {
+        const cleanup = vi.fn()
+        const runtime = ReactRuntime.make(Layer.empty)
+        const effectRuntime = await Effect.runPromise(runtime.runtime.runtimeEffect)
+
+        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.withRuntime(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 Effect.runPromise(runtime.runtime.disposeEffect)
+    })
+
+    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 Effect.runPromise(runtime.runtime.runtimeEffect)
+
+        const SubComponent = Component.makeUntraced("NonReactiveSubComponent")(function*() {
+            const service = yield* ValueService
+
+            yield* Component.useOnMount(() => Effect.gen(function*() {
+                yield* Effect.sync(() => mounts())
+                yield* Effect.addFinalizer(() => Effect.sync(() => unmounts()))
+            }))
+
+            return <div>{service.value}</div>
+        }).pipe(
+            Component.withOptions({ 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.useContextFromLayer(serviceLayer, {
+                finalizerExecutionDebounce: 0,
+            })
+            const Child = yield* Effect.provide(SubComponent.use, context)
+
+            return <Child />
+        }).pipe(
+            Component.withRuntime(runtime.context)
+        )
+
+        const view = render(
+            <runtime.context.Provider value={effectRuntime}>
+                <Parent value="first" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("first")
+        expect(mounts).toHaveBeenCalledTimes(1)
+        expect(unmounts).not.toHaveBeenCalled()
+
+        view.rerender(
+            <runtime.context.Provider value={effectRuntime}>
+                <Parent value="second" />
+            </runtime.context.Provider>
+        )
+
+        await screen.findByText("second")
+        expect(mounts).toHaveBeenCalledTimes(1)
+        expect(unmounts).not.toHaveBeenCalled()
+
+        view.unmount()
+        await waitFor(() => expect(unmounts).toHaveBeenCalledTimes(1))
+        await Effect.runPromise(runtime.runtime.disposeEffect)
+    })
+})

packages/effect-fc/test/Lens.test.tsx

@@ -0,0 +1,165 @@
+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 "../src/Component.js"
+import * as Lens from "../src/Lens.js"
+import * as ReactRuntime from "../src/ReactRuntime.js"
+
+
+const makeRuntime = async () => {
+    const runtime = ReactRuntime.make(Layer.empty)
+    const effectRuntime = await Effect.runPromise(runtime.runtime.runtimeEffect)
+
+    return {
+        runtime,
+        effectRuntime,
+        dispose: () => Effect.runPromise(runtime.runtime.disposeEffect),
+    }
+}
+
+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 onClick={() => setValue(previous => previous + 1)}>increment</button>
+                </>
+            )
+        }).pipe(
+            Component.withRuntime(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.withRuntime(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 onClick={() => setValue(previous => `${previous}!`)}>{value}</button>
+        }).pipe(
+            Component.withRuntime(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(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.withRuntime(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(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()
+    })
+})

packages/effect-fc/test/Query.test.ts

@@ -0,0 +1,169 @@
+import { Effect, Option, type Scope, Stream } from "effect"
+import { describe, expect, it } from "vitest"
+import * as Query from "../src/Query.js"
+import * as QueryClient from "../src/QueryClient.js"
+import * as Result from "../src/Result.js"
+
+
+const runQueryTest = <A, E>(effect: Effect.Effect<A, E, QueryClient.QueryClient | Scope.Scope>) =>
+    Effect.runPromise(Effect.scoped(effect.pipe(
+        Effect.provide(QueryClient.QueryClient.Default),
+    )))
+
+const expectSuccessValue = <A, E, P>(
+    result: Result.Result<A, E, P>,
+): A => {
+    expect(Result.isSuccess(result)).toBe(true)
+
+    if (!Result.isSuccess(result))
+        throw new Error(`Expected Success result, received ${result._tag}`)
+
+    return result.value
+}
+
+const expectSomeValue = <A>(option: Option.Option<A>): A => {
+    expect(Option.isSome(option)).toBe(true)
+
+    if (!Option.isSome(option))
+        throw new Error("Expected Some option, received None")
+
+    return option.value
+}
+
+describe("Query", () => {
+    it("fetch caches successful results until they are invalidated or stale", async () => {
+        let calls = 0
+        const key = Stream.empty as Stream.Stream<readonly [number]>
+
+        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(result[0]._tag).toBe("Success")
+        expect(result[1]._tag).toBe("Success")
+        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 = Stream.empty as Stream.Stream<readonly [number]>
+
+        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 = Stream.empty as Stream.Stream<readonly [number]>
+
+        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 = Stream.empty as Stream.Stream<readonly [number]>
+
+        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 stream automatically and updates latest state", async () => {
+        let calls = 0
+        const key = Stream.make([1] as const) as Stream.Stream<readonly [number]>
+
+        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",
+            })
+
+            yield* Effect.sleep("10 millis")
+
+            return {
+                final: yield* query.result.get,
+                latestKey: yield* query.latestKey.get,
+                latestFinalResult: yield* query.latestFinalResult.get,
+            }
+        })
+
+        const result = await runQueryTest(effect)
+
+        expect(calls).toBe(1)
+        expect(expectSuccessValue(result.final)).toBe("value:1:1")
+        expect(expectSomeValue(result.latestKey)).toEqual([1])
+        expect(expectSuccessValue(expectSomeValue(result.latestFinalResult))).toBe("value:1:1")
+    })
+})

packages/effect-fc/test/Subscribable.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import { Effect, Fiber, Layer, Stream, SubscriptionRef } from "effect"
+import { Lens } from "effect-lens"
+import { describe, expect, it } from "vitest"
+import * as Component from "../src/Component.js"
+import * as ReactRuntime from "../src/ReactRuntime.js"
+import * as Subscribable from "../src/Subscribable.js"
+
+
+const makeRuntime = async () => {
+    const runtime = ReactRuntime.make(Layer.empty)
+    const effectRuntime = await Effect.runPromise(runtime.runtime.runtimeEffect)
+
+    return {
+        runtime,
+        effectRuntime,
+        dispose: () => Effect.runPromise(runtime.runtime.disposeEffect),
+    }
+}
+
+describe("Subscribable", () => {
+    it("zipLatestAll reads current values from all inputs", async () => {
+        const leftRef = await Effect.runPromise(SubscriptionRef.make(1))
+        const rightRef = await Effect.runPromise(SubscriptionRef.make("a"))
+        const left = Lens.fromSubscriptionRef(leftRef)
+        const right = Lens.fromSubscriptionRef(rightRef)
+
+        const zipped = Subscribable.zipLatestAll(left, right)
+
+        expect(await Effect.runPromise(zipped.get)).toEqual([1, "a"])
+    })
+
+    it("zipLatestAll emits updates when any input changes", async () => {
+        const leftRef = await Effect.runPromise(SubscriptionRef.make(1))
+        const rightRef = await Effect.runPromise(SubscriptionRef.make("a"))
+        const left = Lens.fromSubscriptionRef(leftRef)
+        const right = Lens.fromSubscriptionRef(rightRef)
+
+        const zipped = Subscribable.zipLatestAll(left, right)
+        const values: Array<readonly [number, string]> = []
+
+        const collector = Effect.runFork(Effect.scoped(zipped.changes.pipe(
+            Stream.runForEach(value => Effect.sync(() => {
+                values.push(value as readonly [number, string])
+            })),
+        )))
+
+        await Effect.runPromise(Lens.set(left, 2))
+        await waitFor(() => expect(values).toContainEqual([2, "a"]))
+
+        await Effect.runPromise(Lens.set(right, "b"))
+        await waitFor(() => expect(values).toContainEqual([2, "b"]))
+
+        Fiber.interruptFork(collector)
+    })
+
+    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("SubscribableUseAllProbe")(function*() {
+            const [currentCount, currentLabel] = yield* Subscribable.useAll([count, label])
+
+            return <div>{`${currentCount}:${currentLabel}`}</div>
+        }).pipe(
+            Component.withRuntime(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("SubscribableUseAllEquivalenceProbe")(function*() {
+            const [currentItem, currentFlag] = yield* Subscribable.useAll([item, flag], {
+                equivalence: ([selfItem, selfFlag], [thatItem, thatFlag]) =>
+                    selfItem.id === thatItem.id && selfFlag === thatFlag,
+            })
+
+            return <div>{`${currentItem.label}:${currentFlag ? "on" : "off"}`}</div>
+        }).pipe(
+            Component.withRuntime(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()
+    })
+})

packages/effect-fc/tsconfig.json

@@ -25,6 +25,7 @@
     "noPropertyAccessFromIndexSignature": false,
 
     // Build
+    "rootDir": "./src",
     "outDir": "./dist",
     "declaration": true,
     "sourceMap": true,
@@ -34,5 +35,6 @@
     ]
   },
 
-  "include": ["./src"]
+  "include": ["./src"],
+  "exclude": ["**/*.test.ts", "**/*.spec.ts"]
 }

packages/effect-fc/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config"
+
+
+export default defineConfig({
+    test: {
+        environment: "jsdom",
+        include: ["test/**/*.test.ts?(x)"],
+    },
+})

packages/example-next/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.tanstack

packages/example-next/README.md

@@ -0,0 +1,10 @@
+# Effect FC Next Example
+
+Minimal React example for `effect-fc-next`, Effect V4, and `effect-lens@2`.
+
+```bash
+bun run dev
+```
+
+The counter demonstrates a V4 `SubscriptionRef` exposed as an Effect Lens and
+rendered through an Effect-FC component.

packages/example-next/biome.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://biomejs.dev/schemas/latest/schema.json",
+  "root": false,
+  "extends": "//",
+  "files": {
+    "includes": ["./src/**", "!src/routeTree.gen.ts"]
+  }
+}

packages/example-next/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/example-next/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@effect-fc/example-next",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "lint:tsc": "tsc --noEmit",
+    "lint:biome": "biome lint",
+    "preview": "vite preview",
+    "clean:cache": "rm -rf .turbo node_modules/.tmp node_modules/.vite* .tanstack",
+    "clean:dist": "rm -rf dist",
+    "clean:modules": "rm -rf node_modules"
+  },
+  "devDependencies": {
+    "@tanstack/react-router": "^1.170.10",
+    "@tanstack/react-router-devtools": "^1.167.0",
+    "@tanstack/router-plugin": "^1.168.13",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "globals": "^17.6.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "vite": "^8.0.16"
+  },
+  "dependencies": {
+    "@effect/platform-browser": "4.0.0-beta.98",
+    "@radix-ui/themes": "^3.3.0",
+    "effect": "4.0.0-beta.98",
+    "effect-fc-next": "workspace:*",
+    "react-icons": "^5.6.0"
+  },
+  "overrides": {
+    "@types/react": "^19.2.15",
+    "effect": "4.0.0-beta.98",
+    "react": "^19.2.6"
+  }
+}

packages/example-next/src/lib/form/TextFieldFormInputView.tsx

@@ -0,0 +1,56 @@
+import { Callout, Flex, Spinner, TextField } from "@radix-ui/themes"
+import { Array, Option, Struct } from "effect"
+import { Component, Form, View } from "effect-fc-next"
+import type * as React from "react"
+
+
+export declare namespace TextFieldFormInputView {
+    export interface Props<out P extends readonly PropertyKey[], A, ER, EW>
+    extends Omit<TextField.RootProps, "form">, Form.useInput.Options {
+        readonly form: Form.Form<P, A, string, ER, EW>
+    }
+
+    export type Signature = <P extends readonly PropertyKey[], A, ER, EW>(props: Props<P, A, ER, EW>) => React.ReactNode
+}
+
+export const TextFieldFormInputView = Component.make("TextFieldFormInputView")(function*(
+    props: TextFieldFormInputView.Props<readonly PropertyKey[], any, any, any>
+) {
+    const input = yield* Form.useInput(props.form, props)
+    const [issues, isValidating, isCommitting] = yield* View.useAll([
+        props.form.issues,
+        props.form.isValidating,
+        props.form.isCommitting,
+    ])
+
+    return (
+        <Flex direction="column" gap="1">
+            <TextField.Root
+                value={input.value}
+                onChange={e => input.setValue(e.target.value)}
+                disabled={isCommitting}
+                {...Struct.omit(props, ["form"])}
+            >
+                {isValidating &&
+                    <TextField.Slot side="right">
+                        <Spinner />
+                    </TextField.Slot>
+                }
+
+                {props.children}
+            </TextField.Root>
+
+            {Option.match(Array.head(issues), {
+                onSome: issue => (
+                    <Callout.Root>
+                        <Callout.Text>{issue.message}</Callout.Text>
+                    </Callout.Root>
+                ),
+
+                onNone: () => <></>,
+            })}
+        </Flex>
+    )
+}).pipe(
+    Component.withSignature<TextFieldFormInputView.Signature>()
+)

packages/example-next/src/lib/form/TextFieldOptionalFormInputView.tsx

@@ -0,0 +1,64 @@
+import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
+import { Array, Option, Struct } from "effect"
+import { Component, Form, View } from "effect-fc-next"
+import type * as React from "react"
+
+
+export declare namespace TextFieldOptionalFormInputView {
+    export interface Props<out P extends readonly PropertyKey[], A, ER, EW>
+    extends Omit<TextField.RootProps, "form" | "defaultValue">, Form.useOptionalInput.Options<string> {
+        readonly form: Form.Form<P, A, Option.Option<string>, ER, EW>
+    }
+
+    export type Signature = <P extends readonly PropertyKey[], A, ER, EW>(props: Props<P, A, ER, EW>) => React.ReactNode
+}
+
+export const TextFieldOptionalFormInputView = Component.make("TextFieldOptionalFormInputView")(function*(
+    props: TextFieldOptionalFormInputView.Props<readonly PropertyKey[], any, any, any>
+) {
+    const input = yield* Form.useOptionalInput(props.form, props)
+    const [issues, isValidating, isCommitting] = yield* View.useAll([
+        props.form.issues,
+        props.form.isValidating,
+        props.form.isCommitting,
+    ])
+
+    return (
+        <Flex direction="column" gap="1">
+            <TextField.Root
+                value={input.value}
+                onChange={e => input.setValue(e.target.value)}
+                disabled={!input.enabled || isCommitting}
+                {...Struct.omit(props, ["form", "defaultValue"])}
+            >
+                <TextField.Slot side="left">
+                    <Switch
+                        size="1"
+                        checked={input.enabled}
+                        onCheckedChange={input.setEnabled}
+                    />
+                </TextField.Slot>
+
+                {isValidating &&
+                    <TextField.Slot side="right">
+                        <Spinner />
+                    </TextField.Slot>
+                }
+
+                {props.children}
+            </TextField.Root>
+
+            {Option.match(Array.head(issues), {
+                onSome: issue => (
+                    <Callout.Root>
+                        <Callout.Text>{issue.message}</Callout.Text>
+                    </Callout.Root>
+                ),
+
+                onNone: () => <></>,
+            })}
+        </Flex>
+    )
+}).pipe(
+    Component.withSignature<TextFieldOptionalFormInputView.Signature>()
+)

packages/example-next/src/main.tsx

@@ -0,0 +1,21 @@
+import { createRouter, RouterProvider } from "@tanstack/react-router"
+import { ReactRuntime } from "effect-fc-next"
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { routeTree } from "./routeTree.gen"
+import { runtime } from "./runtime"
+
+const router = createRouter({ routeTree })
+
+declare module "@tanstack/react-router" {
+    interface Register { router: typeof router }
+}
+
+// biome-ignore lint/style/noNonNullAssertion: the Vite template provides this element
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <ReactRuntime.Provider runtime={runtime}>
+            <RouterProvider router={router} />
+        </ReactRuntime.Provider>
+    </StrictMode>,
+)

packages/example-next/src/post.ts

@@ -0,0 +1,15 @@
+import { Effect } from "effect"
+
+
+export interface Post {
+    readonly title: string
+    readonly body: string
+}
+
+export const fetchPost = (id: number) => Effect.tryPromise({
+    try: () =>
+        fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
+            .then(response => response.json() as Promise<Post>),
+
+    catch: () => new Error("Unable to fetch post"),
+})

packages/example-next/src/routeTree.gen.ts

@@ -0,0 +1,149 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as AsyncRouteImport } from './routes/async'
+import { Route as BlankRouteImport } from './routes/blank'
+import { Route as FormRouteImport } from './routes/form'
+import { Route as QueryRouteImport } from './routes/query'
+import { Route as ResultRouteImport } from './routes/result'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AsyncRoute = AsyncRouteImport.update({
+  id: '/async',
+  path: '/async',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const BlankRoute = BlankRouteImport.update({
+  id: '/blank',
+  path: '/blank',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const FormRoute = FormRouteImport.update({
+  id: '/form',
+  path: '/form',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const QueryRoute = QueryRouteImport.update({
+  id: '/query',
+  path: '/query',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ResultRoute = ResultRouteImport.update({
+  id: '/result',
+  path: '/result',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/async': typeof AsyncRoute
+  '/blank': typeof BlankRoute
+  '/form': typeof FormRoute
+  '/query': typeof QueryRoute
+  '/result': typeof ResultRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/async': typeof AsyncRoute
+  '/blank': typeof BlankRoute
+  '/form': typeof FormRoute
+  '/query': typeof QueryRoute
+  '/result': typeof ResultRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/async': typeof AsyncRoute
+  '/blank': typeof BlankRoute
+  '/form': typeof FormRoute
+  '/query': typeof QueryRoute
+  '/result': typeof ResultRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/async' | '/blank' | '/form' | '/query' | '/result'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/async' | '/blank' | '/form' | '/query' | '/result'
+  id: '__root__' | '/' | '/async' | '/blank' | '/form' | '/query' | '/result'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  AsyncRoute: typeof AsyncRoute
+  BlankRoute: typeof BlankRoute
+  FormRoute: typeof FormRoute
+  QueryRoute: typeof QueryRoute
+  ResultRoute: typeof ResultRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/async': {
+      id: '/async'
+      path: '/async'
+      fullPath: '/async'
+      preLoaderRoute: typeof AsyncRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/blank': {
+      id: '/blank'
+      path: '/blank'
+      fullPath: '/blank'
+      preLoaderRoute: typeof BlankRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/form': {
+      id: '/form'
+      path: '/form'
+      fullPath: '/form'
+      preLoaderRoute: typeof FormRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/query': {
+      id: '/query'
+      path: '/query'
+      fullPath: '/query'
+      preLoaderRoute: typeof QueryRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/result': {
+      id: '/result'
+      path: '/result'
+      fullPath: '/result'
+      preLoaderRoute: typeof ResultRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  AsyncRoute: AsyncRoute,
+  BlankRoute: BlankRoute,
+  FormRoute: FormRoute,
+  QueryRoute: QueryRoute,
+  ResultRoute: ResultRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

packages/example-next/src/routes/__root.tsx

@@ -0,0 +1,32 @@
+import { Container, Flex, Theme } from "@radix-ui/themes"
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
+
+import "@radix-ui/themes/styles.css"
+import "../index.css"
+
+
+export const Route = createRootRoute({
+    component: Root,
+})
+
+function Root() {
+    return (
+        <Theme>
+            <Container mb="4">
+                <Flex direction="row" justify="center" align="center" gap="2">
+                    <Link to="/">Index</Link>
+                    <Link to="/blank">Blank</Link>
+                    <Link to="/async">Async</Link>
+                    <Link to="/query">Query</Link>
+                    <Link to="/result">Result</Link>
+                    <Link to="/form">Form</Link>
+                </Flex>
+            </Container>
+
+            <Outlet />
+
+            <TanStackRouterDevtools />
+        </Theme>
+    )
+}

packages/example-next/src/routes/async.tsx

@@ -0,0 +1,64 @@
+import { Container, Flex, Heading, Slider, Text, TextField } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Async, Component, Memoized } from "effect-fc-next"
+import * as React from "react"
+import { fetchPost } from "@/post"
+import { runtime } from "@/runtime"
+
+
+interface AsyncFetchPostViewProps {
+    readonly id: number
+}
+
+const AsyncFetchPostView = Component.make("AsyncFetchPostView")(function*(
+    props: AsyncFetchPostViewProps,
+) {
+    const post = yield* Component.useOnChange(
+        () => fetchPost(props.id),
+        [props.id],
+    )
+
+    return (
+        <div>
+            <Heading>{post.title}</Heading>
+            <Text>{post.body}</Text>
+        </div>
+    )
+}).pipe(
+    Async.async,
+    Async.withOptions({ defaultFallback: <Text>Loading post...</Text> }),
+    Memoized.memoized,
+)
+
+const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
+    const [text, setText] = React.useState("Typing here should not trigger a refetch of the post")
+    const [id, setId] = React.useState(1)
+
+    const AsyncFetchPost = yield* AsyncFetchPostView.use
+
+    return (
+        <Container>
+            <Flex direction="column" align="stretch" gap="2">
+                <TextField.Root
+                    value={text}
+                    onChange={event => setText(event.currentTarget.value)}
+                />
+
+                <Slider
+                    value={[id]}
+                    min={1}
+                    max={10}
+                    onValueChange={([value]) => setId(value ?? 1)}
+                />
+
+                <AsyncFetchPost id={id} fallback={<Text>Loading post...</Text>} />
+            </Flex>
+        </Container>
+    )
+}).pipe(
+    Component.withRuntime(runtime.context),
+)
+
+export const Route = createFileRoute("/async")({
+    component: AsyncRouteComponent,
+})

packages/example-next/src/routes/blank.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router"
+
+
+export const Route = createFileRoute("/blank")({
+    component: RouteComponent
+})
+
+function RouteComponent() {
+    return <div>Hello "/blank"!</div>
+}

packages/example-next/src/routes/form.tsx

@@ -0,0 +1,63 @@
+import { Button, Container, Flex, Text, TextField } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Effect, Schema } from "effect"
+import { Component, Form, MutationForm, View } from "effect-fc-next"
+import { runtime } from "@/runtime"
+
+
+const RegisterSchema = Schema.Struct({
+    email: Schema.String,
+    password: Schema.String,
+})
+
+const RegisterRouteComponent = Component.make("RegisterRouteView")(function*() {
+    const form = yield* Component.useOnMount(() => MutationForm.service({
+        schema: RegisterSchema,
+        initialEncodedValue: { email: "", password: "" },
+        f: ([value]) => Effect.log(`Registered ${value.email}`),
+    }))
+    const emailField = yield* Form.useInput(
+        Form.focusObjectOn(form, "email"),
+    )
+    const passwordField = yield* Form.useInput(
+        Form.focusObjectOn(form, "password"),
+    )
+    const [canCommit, isCommitting] = yield* View.useAll([
+        form.canCommit,
+        form.isCommitting,
+    ])
+    const runPromise = yield* Component.useRunPromise()
+
+    return (
+        <Container width="300">
+            <form onSubmit={(event) => {
+                event.preventDefault()
+                void runPromise(form.submit)
+            }}>
+                <Flex direction="column" gap="2">
+                    <TextField.Root
+                        value={emailField.value}
+                        onChange={event => emailField.setValue(event.currentTarget.value)}
+                        placeholder="Email"
+                    />
+                    <TextField.Root
+                        value={passwordField.value}
+                        onChange={event => passwordField.setValue(event.currentTarget.value)}
+                        placeholder="Password"
+                        type="password"
+                    />
+                    <Button disabled={!canCommit || isCommitting}>
+                        {isCommitting ? "Submitting…" : "Submit"}
+                    </Button>
+                </Flex>
+            </form>
+            <Text size="2">A MutationForm validates local input, then submits it.</Text>
+        </Container>
+    )
+}).pipe(
+    Component.withRuntime(runtime.context),
+)
+
+export const Route = createFileRoute("/form")({
+    component: RegisterRouteComponent,
+})

packages/example-next/src/routes/index.tsx

@@ -0,0 +1,56 @@
+import { Button, Container, Flex, Text, TextField } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Effect, SubscriptionRef } from "effect"
+import { Component, Lens, View } from "effect-fc-next"
+import { runtime } from "@/runtime"
+
+
+const TodoRouteComponent = Component.make("TodoRouteView")(function*() {
+    const todosLens = yield* Component.useOnMount(() => Effect.map(
+        SubscriptionRef.make<readonly string[]>([]),
+        Lens.fromSubscriptionRef,
+    ))
+    const draftLens = yield* Component.useOnMount(() => Effect.map(
+        SubscriptionRef.make(""),
+        Lens.fromSubscriptionRef,
+    ))
+
+    const [todos] = yield* View.useAll([todosLens])
+    const [draft, setDraft] = yield* Lens.useState(draftLens)
+    const runPromise = yield* Component.useRunPromise()
+
+    const addTodo = Lens.update(todosLens, todos =>
+        draft.trim() === ""
+            ? todos
+            : [...todos, draft.trim()],
+    ).pipe(
+        Effect.andThen(Lens.set(draftLens, "")),
+    )
+
+    return (
+        <Container width="480">
+            <Flex direction="column" gap="3">
+                <Text size="2">A small Effect v4 todo state example backed by a Lens.</Text>
+
+                <Flex gap="2">
+                    <TextField.Root
+                        value={draft}
+                        onChange={event => setDraft(event.currentTarget.value)}
+                    />
+
+                    <Button onClick={() => void runPromise(addTodo)}>
+                        Add
+                    </Button>
+                </Flex>
+
+                {todos.map(todo => <Text key={todo}>• {todo}</Text>)}
+            </Flex>
+        </Container>
+    )
+}).pipe(
+    Component.withRuntime(runtime.context),
+)
+
+export const Route = createFileRoute("/")({
+    component: TodoRouteComponent,
+})

packages/example-next/src/routes/query.tsx

@@ -0,0 +1,85 @@
+import { Button, Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Effect, SubscriptionRef } from "effect"
+import { AsyncResult } from "effect/unstable/reactivity"
+import { Component, Lens, Mutation, Query, View } from "effect-fc-next"
+import { fetchPost, type Post } from "@/post"
+import { runtime } from "@/runtime"
+
+
+interface PostResultViewProps {
+    readonly result: AsyncResult.AsyncResult<Post, Error>
+}
+
+const PostResultView = (props: PostResultViewProps) =>
+    AsyncResult.match(props.result, {
+        onInitial: () => <Text>Loading...</Text>,
+        onFailure: () => <Text>Request failed.</Text>,
+        onSuccess: result => (
+            <>
+                <Heading>{result.value.title}</Heading>
+                <Text>{result.value.body}</Text>
+            </>
+        ),
+    })
+
+const QueryRouteComponent = Component.make("QueryRouteView")(function*() {
+    const [idLens, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
+        const idLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(1))
+        const query = yield* Query.service({
+            key: idLens,
+            f: fetchPost,
+            staleTime: "10 seconds",
+        })
+        const mutation = yield* Mutation.make({
+            f: fetchPost,
+        })
+
+        return [idLens, query, mutation] as const
+    }))
+
+    const [id] = yield* View.useAll([idLens])
+    const [queryState, mutationResult] = yield* View.useAll([
+        query.state,
+        mutation.state,
+    ])
+    const runPromise = yield* Component.useRunPromise()
+
+    return (
+        <Container>
+            <Flex direction="column" align="center" gap="2">
+                <Slider
+                    value={[id]}
+                    min={1}
+                    max={10}
+                    onValueChange={([value]) =>
+                        void runPromise(Lens.set(idLens, value ?? 1))
+                    }
+                />
+
+                <PostResultView result={queryState.result} />
+
+                <Flex direction="row" justify="center" align="center" gap="1">
+                    <Button onClick={() => void runPromise(query.refresh)}>
+                        Refresh
+                    </Button>
+                    <Button onClick={() => void runPromise(query.invalidateCache)}>
+                        Invalidate cache
+                    </Button>
+                </Flex>
+
+                <PostResultView result={mutationResult} />
+
+                <Button onClick={() => void runPromise(mutation.mutate(id))}>
+                    Mutate
+                </Button>
+            </Flex>
+        </Container>
+    )
+}).pipe(
+    Component.withRuntime(runtime.context),
+)
+
+export const Route = createFileRoute("/query")({
+    component: QueryRouteComponent,
+})

packages/example-next/src/routes/result.tsx

@@ -0,0 +1,45 @@
+import { Button, Container, Flex, Heading, Text } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { AsyncResult } from "effect/unstable/reactivity"
+import { Component, Mutation, View } from "effect-fc-next"
+import { fetchPost, type Post } from "@/post"
+import { runtime } from "@/runtime"
+
+
+const PostResultView = (props: { readonly result: AsyncResult.AsyncResult<Post, Error> }) =>
+    AsyncResult.match(props.result, {
+        onInitial: () => <Text>Ready to load.</Text>,
+        onFailure: () => <Text>Request failed.</Text>,
+        onSuccess: result => (
+            <>
+                <Heading>{result.value.title}</Heading>
+                <Text>{result.value.body}</Text>
+            </>
+        ),
+    })
+
+const ResultRouteComponent = Component.make("ResultRouteView")(function*() {
+    const mutation = yield* Component.useOnMount(() => Mutation.make({
+        f: (_: undefined) => fetchPost(1),
+    }))
+    const [result] = yield* View.useAll([mutation.state])
+    const runPromise = yield* Component.useRunPromise()
+
+    return (
+        <Container>
+            <Flex direction="column" gap="2">
+                <Button onClick={() => void runPromise(mutation.mutate(undefined))}>
+                    Load post
+                </Button>
+
+                <PostResultView result={result} />
+            </Flex>
+        </Container>
+    )
+}).pipe(
+    Component.withRuntime(runtime.context),
+)
+
+export const Route = createFileRoute("/result")({
+    component: ResultRouteComponent,
+})

packages/example-next/src/runtime.ts

@@ -0,0 +1,4 @@
+import { QueryClient, ReactRuntime } from "effect-fc-next"
+
+
+export const runtime = ReactRuntime.make(QueryClient.layer())

packages/example-next/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/example-next/tsconfig.app.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    "plugins": [
+      { "name": "@effect/language-service" }
+    ]
+  },
+
+  "include": ["src"]
+}

packages/example-next/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

packages/example-next/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+
+  "include": ["vite.config.ts"]
+}

packages/example-next/vite.config.ts

@@ -0,0 +1,22 @@
+import { tanstackRouter } from "@tanstack/router-plugin/vite"
+import react from "@vitejs/plugin-react"
+import path from "node:path"
+import { defineConfig } from "vite"
+
+
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [
+        tanstackRouter({
+            target: "react",
+            autoCodeSplitting: true,
+        }),
+        react(),
+    ],
+
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
+})

packages/example/package.json

@@ -13,30 +13,30 @@
     "clean:modules": "rm -rf node_modules"
   },
   "devDependencies": {
-    "@tanstack/react-router": "^1.154.12",
-    "@tanstack/react-router-devtools": "^1.154.12",
-    "@tanstack/router-plugin": "^1.154.12",
-    "@types/react": "^19.2.9",
+    "@tanstack/react-router": "^1.170.10",
+    "@tanstack/react-router-devtools": "^1.167.0",
+    "@tanstack/router-plugin": "^1.168.13",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "globals": "^17.0.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "type-fest": "^5.4.1",
-    "vite": "^7.3.1"
+    "@vitejs/plugin-react": "^6.0.2",
+    "globals": "^17.6.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "type-fest": "^5.7.0",
+    "vite": "^8.0.16"
   },
   "dependencies": {
-    "@effect/platform": "^0.94.2",
-    "@effect/platform-browser": "^0.74.0",
-    "@radix-ui/themes": "^3.2.1",
+    "@effect/platform": "^0.96.1",
+    "@effect/platform-browser": "^0.76.0",
+    "@radix-ui/themes": "^3.3.0",
     "@typed/id": "^0.17.2",
-    "effect": "^3.19.15",
+    "effect": "^3.21.2",
     "effect-fc": "workspace:*",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.6.0"
   },
   "overrides": {
-    "@types/react": "^19.2.9",
-    "effect": "^3.19.15",
-    "react": "^19.2.3"
+    "@types/react": "^19.2.15",
+    "effect": "^3.21.2",
+    "react": "^19.2.6"
   }
 }

packages/example/src/lib/form/TextFieldFormInput.tsx

@@ -1,75 +0,0 @@
-import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
-import { Array, Option, Struct } from "effect"
-import { Component, Form, Subscribable } from "effect-fc"
-
-
-interface Props
-extends TextField.RootProps, Form.useInput.Options {
-    readonly optional?: false
-    readonly field: Form.FormField<any, string>
-}
-
-interface OptionalProps
-extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptionalInput.Options<string> {
-    readonly optional: true
-    readonly field: Form.FormField<any, Option.Option<string>>
-}
-
-export type TextFieldFormInputProps = Props | OptionalProps
-
-
-export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(function*(props: TextFieldFormInputProps) {
-    const input: (
-        | { readonly optional: true } & Form.useOptionalInput.Success<string>
-        | { readonly optional: false } & Form.useInput.Success<string>
-    ) = props.optional
-        // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
-        ? { optional: true, ...yield* Form.useOptionalInput(props.field, props) }
-        // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
-        : { optional: false, ...yield* Form.useInput(props.field, props) }
-
-    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables([
-        props.field.issues,
-        props.field.isValidating,
-        props.field.isSubmitting,
-    ])
-
-    return (
-        <Flex direction="column" gap="1">
-            <TextField.Root
-                value={input.value}
-                onChange={e => input.setValue(e.target.value)}
-                disabled={(input.optional && !input.enabled) || isSubmitting}
-                {...Struct.omit(props, "optional", "defaultValue")}
-            >
-                {input.optional &&
-                    <TextField.Slot side="left">
-                        <Switch
-                            size="1"
-                            checked={input.enabled}
-                            onCheckedChange={input.setEnabled}
-                        />
-                    </TextField.Slot>
-                }
-
-                {isValidating &&
-                    <TextField.Slot side="right">
-                        <Spinner />
-                    </TextField.Slot>
-                }
-
-                {props.children}
-            </TextField.Root>
-
-            {Option.match(Array.head(issues), {
-                onSome: issue => (
-                    <Callout.Root>
-                        <Callout.Text>{issue.message}</Callout.Text>
-                    </Callout.Root>
-                ),
-
-                onNone: () => <></>,
-            })}
-        </Flex>
-    )
-}) {}

packages/example/src/lib/form/TextFieldFormInputView.tsx

@@ -0,0 +1,56 @@
+import { Callout, Flex, Spinner, TextField } from "@radix-ui/themes"
+import { Array, Option, Struct } from "effect"
+import { Component, Form, Subscribable } from "effect-fc"
+import type * as React from "react"
+
+
+export declare namespace TextFieldFormInputView {
+    export interface Props<out P extends readonly PropertyKey[], A, ER, EW>
+    extends Omit<TextField.RootProps, "form">, Form.useInput.Options {
+        readonly form: Form.Form<P, A, string, ER, EW>
+    }
+
+    export type Signature = <P extends readonly PropertyKey[], A, ER, EW>(props: Props<P, A, ER, EW>) => React.ReactNode
+}
+
+export const TextFieldFormInputView = Component.make("TextFieldFormInputView")(function*(
+    props: TextFieldFormInputView.Props<readonly PropertyKey[], any, any, any>
+) {
+    const input = yield* Form.useInput(props.form, props)
+    const [issues, isValidating, isCommitting] = yield* Subscribable.useAll([
+        props.form.issues,
+        props.form.isValidating,
+        props.form.isCommitting,
+    ])
+
+    return (
+        <Flex direction="column" gap="1">
+            <TextField.Root
+                value={input.value}
+                onChange={e => input.setValue(e.target.value)}
+                disabled={isCommitting}
+                {...Struct.omit(props, "form")}
+            >
+                {isValidating &&
+                    <TextField.Slot side="right">
+                        <Spinner />
+                    </TextField.Slot>
+                }
+
+                {props.children}
+            </TextField.Root>
+
+            {Option.match(Array.head(issues), {
+                onSome: issue => (
+                    <Callout.Root>
+                        <Callout.Text>{issue.message}</Callout.Text>
+                    </Callout.Root>
+                ),
+
+                onNone: () => <></>,
+            })}
+        </Flex>
+    )
+}).pipe(
+    Component.withSignature<TextFieldFormInputView.Signature>()
+)