Update dependency typescript to v6

This PR contains the following updates:

| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@effect/language-service](https://github.com/Effect-TS/language-service) | [`^0.75.0` → `^0.80.0`](https://renovatebot.com/diffs/npm/@effect%2flanguage-service/0.75.1/0.80.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@effect%2flanguage-service/0.80.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@effect%2flanguage-service/0.75.1/0.80.0?slim=true) |
| [typescript](https://www.typescriptlang.org/) ([source](https://github.com/microsoft/TypeScript)) | [`~5.6.2` → `~5.9.0`](https://renovatebot.com/diffs/npm/typescript/5.6.3/5.9.3) | ![age](https://developer.mend.io/api/mc/badges/age/npm/typescript/5.9.3?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/typescript/5.6.3/5.9.3?slim=true) |

---

### Release Notes

<details>
<summary>Effect-TS/language-service (@&#8203;effect/language-service)</summary>

### [`v0.80.0`](https://github.com/Effect-TS/language-service/releases/tag/%40effect/language-service%400.80.0)

[Compare Source](https://github.com/Effect-TS/language-service/compare/@effect/language-service@0.79.0...@effect/language-service@0.80.0)

##### Minor Changes

- [#&#8203;681](https://github.com/Effect-TS/language-service/pull/681) [`1017a54`](https://github.com/Effect-TS/language-service/commit/1017a5443b2e6919f18e57afb86373ba825037c9) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Generate a root `schema.json` for `tsconfig.json` plugin configuration, add typed Effect Language Service plugin options to that schema, and have `effect-language-service setup` add or remove the matching `$schema` entry automatically.

- [#&#8203;679](https://github.com/Effect-TS/language-service/pull/679) [`3664197`](https://github.com/Effect-TS/language-service/commit/3664197f271012d001f6074d40c5303826d632ce) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add inline `--lspconfig` support to the `effect-language-service diagnostics` CLI command so diagnostics runs can override the project plugin configuration without editing `tsconfig.json`.

### [`v0.79.0`](https://github.com/Effect-TS/language-service/releases/tag/%40effect/language-service%400.79.0)

[Compare Source](https://github.com/Effect-TS/language-service/compare/@effect/language-service@0.78.0...@effect/language-service@0.79.0)

##### Minor Changes

- [#&#8203;671](https://github.com/Effect-TS/language-service/pull/671) [`6b9c378`](https://github.com/Effect-TS/language-service/commit/6b9c378c4e1d0c83e4afe322cf44ccacd75d1cb4) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add the `extendsNativeError` diagnostic to warn when classes directly extend the native `Error` constructor, including common local aliases such as `const E = Error`.

  This helps steer users toward tagged errors that preserve stronger typing in the Effect failure channel.

- [#&#8203;678](https://github.com/Effect-TS/language-service/pull/678) [`0e9c11b`](https://github.com/Effect-TS/language-service/commit/0e9c11b4b3c076adef62e31722855ebc0071aaf6) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Generate the README diagnostics table from the diagnostic registry.

  Each diagnostic now declares:

  - whether it is fixable
  - which Effect versions it supports

  The generated table is checked in CI, and diagnostics tests verify that `fixable` matches the presence of non-suppression quick fixes.

- [#&#8203;676](https://github.com/Effect-TS/language-service/pull/676) [`2f982d6`](https://github.com/Effect-TS/language-service/commit/2f982d69541633aca2cd3bcdc89bdae7d17cb97b) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add the `nodeBuiltinImport` diagnostic to warn when importing Node.js built-in modules (`fs`, `path`, `child_process`) that have Effect-native counterparts in `@effect/platform`.

  This diagnostic covers ES module imports and top-level `require()` calls, matching both bare and `node:`-prefixed specifiers as well as subpath variants like `fs/promises`, `path/posix`, and `path/win32`. It defaults to severity `off` and provides no code fixes.

- [#&#8203;673](https://github.com/Effect-TS/language-service/pull/673) [`f9e24df`](https://github.com/Effect-TS/language-service/commit/f9e24df5db70110d5e84da45810bd82cf12fadc7) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add plugin options to better control patched `tsc` behavior.

  `ignoreEffectErrorsInTscExitCode` allows Effect diagnostics reported as errors to be ignored for exit-code purposes, and `skipDisabledOptimiziation` keeps disabled diagnostics eligible for comment-based overrides when patch mode is active.

- [#&#8203;674](https://github.com/Effect-TS/language-service/pull/674) [`54e8c16`](https://github.com/Effect-TS/language-service/commit/54e8c16865e99be9b6faec3e50c17d1e501242f9) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add the `serviceNotAsClass` diagnostic to warn when `ServiceMap.Service` is used as a variable assignment instead of in a class declaration.

  Includes an auto-fix that converts `const Config = ServiceMap.Service<Shape>("Config")` to `class Config extends ServiceMap.Service<Config, Shape>()("Config") {}`.

##### Patch Changes

- [#&#8203;675](https://github.com/Effect-TS/language-service/pull/675) [`d1f09c3`](https://github.com/Effect-TS/language-service/commit/d1f09c364bde5a14905b4a9d030830309b6aab43) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Rename the `skipDisabledOptimiziation` plugin option to `skipDisabledOptimization`.

  Example:

  ```json
  {
    "compilerOptions": {
      "plugins": [
        {
          "name": "@&#8203;effect/language-service",
          "skipDisabledOptimization": true
        }
      ]
    }
  }
  ```

### [`v0.78.0`](https://github.com/Effect-TS/language-service/releases/tag/%40effect/language-service%400.78.0)

[Compare Source](https://github.com/Effect-TS/language-service/compare/@effect/language-service@0.77.0...@effect/language-service@0.78.0)

##### Minor Changes

- [#&#8203;663](https://github.com/Effect-TS/language-service/pull/663) [`0e82d43`](https://github.com/Effect-TS/language-service/commit/0e82d437e91fe0b98c51b4b53c8d06f29aa41b8e) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Improve `effectFnOpportunity` inferred span naming for service-layer methods and align examples for Effect v4.

  The inferred span can now include service + method names (for example `MyService.log`) when the convertible function is a method inside a layer service object for strict supported patterns like:

  - `Layer.succeed(Service)(...)`
  - `Layer.sync(Service)(...)`
  - `Layer.effect(Service)(Effect.gen(...))`
  - `Layer.effect(Service, Effect.gen(...))`

  Also add Effect v4 diagnostics fixtures for:

  - `effectFnOpportunity_inferred.ts`
  - `effectFnOpportunity_inferredLayer.ts`

- [#&#8203;669](https://github.com/Effect-TS/language-service/pull/669) [`a010a29`](https://github.com/Effect-TS/language-service/commit/a010a29d219a22da2553d82da3bbabc3312106f5) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add a new `effectInFailure` diagnostic that warns when an `Effect` computation appears in the failure channel (`E`) of another `Effect`.

  The rule traverses Effect-typed expressions, unrolls union members of `E`, and reports when any member is itself a strict Effect type.

  It prefers innermost matches for nested cases (for example nested `Effect.try` in `catch`) to avoid noisy parent reports.

##### Patch Changes

- [#&#8203;666](https://github.com/Effect-TS/language-service/pull/666) [`06b3a6c`](https://github.com/Effect-TS/language-service/commit/06b3a6ce41c24459120c6a396804dadaf420786a) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Fix `effectFnOpportunity` inferred span naming for `Layer.*(this, ...)` patterns in class static members.

  When the inferred layer target is `this`, the diagnostic now uses the nearest enclosing class name (for example `MyService`) instead of the literal `this` token.

- [#&#8203;665](https://github.com/Effect-TS/language-service/pull/665) [`a95a679`](https://github.com/Effect-TS/language-service/commit/a95a6792e313ac920f6621858439b18d52c9c0d9) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Improve yield-based diagnostics and hover behavior by introducing `effectYieldableType` in `TypeParser` and using it in `missingReturnYieldStar`.

  - In Effect v4, yieldable values are recognized through `asEffect()` and mapped to Effect `A/E/R`.
  - In Effect v3, `effectYieldableType` falls back to standard `effectType` behavior.
  - `missingReturnYieldStar` now correctly handles yieldable values such as `Option.none()`.
  - Hover support for `yield*` was updated to use yieldable parsing paths.

- [#&#8203;664](https://github.com/Effect-TS/language-service/pull/664) [`934ef7e`](https://github.com/Effect-TS/language-service/commit/934ef7e0b58bc5260425b47a9efe1f4d0ccc26f0) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Improve `missingReturnYieldStar` safety by targeting only expression statements with top-level `yield*` expressions and validating the enclosing `Effect.gen` scope via `findEnclosingScopes`.

  This avoids edge cases where nested or wrapped `yield*` expressions could be matched incorrectly.

- [#&#8203;661](https://github.com/Effect-TS/language-service/pull/661) [`0f92686`](https://github.com/Effect-TS/language-service/commit/0f92686ac86b4f90eea436c542914ce59c39afb6) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Update effect dependency to v4.0.0-beta.19 and fix compatibility issues:

  - Fix `layerMagic` refactor producing `any` types in Layer channels by replacing `Array.partition` (which now uses the v4 `Filter.Filter` API) with a native loop for boolean partition logic
  - Add v4 Layer type detection shortcut using `"~effect/Layer"` TypeId property, matching the pattern already used for Effect type detection
  - Mark `Effect.filterMap` as unchanged in the outdated API migration database since it was re-added in v4

### [`v0.77.0`](https://github.com/Effect-TS/language-service/releases/tag/%40effect/language-service%400.77.0)

[Compare Source](https://github.com/Effect-TS/language-service/compare/@effect/language-service@0.76.0...@effect/language-service@0.77.0)

##### Minor Changes

- [#&#8203;655](https://github.com/Effect-TS/language-service/pull/655) [`c875de2`](https://github.com/Effect-TS/language-service/commit/c875de2c2334f740155f5a1e8a1a44636506d157) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add `outdatedApi` diagnostic that warns when using outdated Effect APIs in a project targeting a newer version of Effect.

##### Patch Changes

- [#&#8203;660](https://github.com/Effect-TS/language-service/pull/660) [`99a97a6`](https://github.com/Effect-TS/language-service/commit/99a97a6a4e275d03562de7ede2a2510f1c06f230) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Dispose TypeScript language services in tests to prevent resource leaks

  Added `languageService.dispose()` calls via `try/finally` patterns to all test files that create language services through `createServicesWithMockedVFS()`. This ensures proper cleanup of TypeScript compiler resources after each test completes, preventing memory leaks during test runs.

- [#&#8203;658](https://github.com/Effect-TS/language-service/pull/658) [`0154667`](https://github.com/Effect-TS/language-service/commit/0154667a23c95a8133751b3454b9233ddc39d8e3) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Fix outdated API diagnostic for Effect v4 compatibility

  - Fixed `TaggedError` completion to use `TaggedErrorClass` matching the v4 API
  - Removed `Schema.RequestClass` examples that no longer exist in v4
  - Updated Effect v4 harness to latest version

- [#&#8203;659](https://github.com/Effect-TS/language-service/pull/659) [`2699a80`](https://github.com/Effect-TS/language-service/commit/2699a80e3ecbce91db269cd34689752950d8d278) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add support for `Model.Class` from `effect/unstable/schema` in completions and diagnostics.

  The `classSelfMismatch` diagnostic now detects mismatched Self type parameters in `Model.Class` declarations, and the autocomplete for Self type in classes now suggests `Model.Class` when typing after `Model.`.

  ```ts
  import { Model } from "effect/unstable/schema";

  // autocomplete triggers after `Model.`
  export class MyDataModel extends Model.Class<MyDataModel>("MyDataModel")({
    id: Schema.String,
  }) {}
  ```

### [`v0.76.0`](https://github.com/Effect-TS/language-service/releases/tag/%40effect/language-service%400.76.0)

[Compare Source](https://github.com/Effect-TS/language-service/compare/@effect/language-service@0.75.1...@effect/language-service@0.76.0)

##### Minor Changes

- [#&#8203;651](https://github.com/Effect-TS/language-service/pull/651) [`aeab349`](https://github.com/Effect-TS/language-service/commit/aeab349b498c5bea4d050409a57f8f1900190c39) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add refactor to convert `Effect.Service` to `Context.Tag` with a static `Layer` property.

  Supports all combinator kinds (`effect`, `scoped`, `sync`, `succeed`) and `dependencies`. The refactor replaces the `Effect.Service` class declaration with a `Context.Tag` class that has a `static layer` property using the corresponding `Layer` combinator.

  Before:

  ```ts
  export class MyService extends Effect.Service<MyService>()("MyService", {
    effect: Effect.gen(function* () {
      return { value: "hello" };
    }),
  }) {}
  ```

  After:

  ```ts
  export class MyService extends Context.Tag("MyService")<
    MyService,
    { value: string }
  >() {
    static layer = Layer.effect(
      this,
      Effect.gen(function* () {
        return { value: "hello" };
      })
    );
  }
  ```

- [#&#8203;654](https://github.com/Effect-TS/language-service/pull/654) [`2c93eab`](https://github.com/Effect-TS/language-service/commit/2c93eabfd7b799543832dc84304f20c90382c7eb) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Migrate internal Effect dependency from v3 to v4. This updates all CLI and core modules to use the Effect v4 API while maintaining full backward compatibility with existing functionality.

</details>

<details>
<summary>microsoft/TypeScript (typescript)</summary>

### [`v5.9.3`](https://github.com/microsoft/TypeScript/releases/tag/v5.9.3): TypeScript 5.9.3

[Compare Source](https://github.com/microsoft/TypeScript/compare/v5.9.2...v5.9.3)

Note: this tag was recreated to point at the correct commit. The npm package contained the correct content.

For release notes, check out the [release announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-5-9/)

- [fixed issues query for Typescript 5.9.0 (Beta)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.9.0%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.9.1 (RC)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.9.1%22+is%3Aclosed+).
- *No specific changes for TypeScript 5.9.2 (Stable)*
- [fixed issues query for Typescript 5.9.3 (Stable)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.9.3%22+is%3Aclosed+).

Downloads are available on:

- [npm](https://www.npmjs.com/package/typescript)

### [`v5.9.2`](https://github.com/microsoft/TypeScript/releases/tag/v5.9.2): TypeScript 5.9

[Compare Source](https://github.com/microsoft/TypeScript/compare/v5.8.3...v5.9.2)

Note: this tag was recreated to point at the correct commit. The npm package contained the correct content.

For release notes, check out the [release announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-5-9/)

- [fixed issues query for Typescript 5.9.0 (Beta)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.9.0%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.9.1 (RC)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.9.1%22+is%3Aclosed+).
- *No specific changes for TypeScript 5.9.2 (Stable)*

Downloads are available on:

- [npm](https://www.npmjs.com/package/typescript)

### [`v5.8.3`](https://github.com/microsoft/TypeScript/releases/tag/v5.8.3): TypeScript 5.8.3

[Compare Source](https://github.com/microsoft/TypeScript/compare/v5.8.2...v5.8.3)

Note: this tag was recreated to point at the correct commit. The npm package contained the correct content.

For release notes, check out the [release announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/).

- [fixed issues query for Typescript 5.8.0 (Beta)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.8.0%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.8.1 (RC)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.8.1%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.8.2 (Stable)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.8.2%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.8.3 (Stable)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.8.3%22+is%3Aclosed+).

Downloads are available on:

- [npm](https://www.npmjs.com/package/typescript)

### [`v5.8.2`](https://github.com/microsoft/TypeScript/releases/tag/v5.8.2): TypeScript 5.8

[Compare Source](https://github.com/microsoft/TypeScript/compare/v5.7.3...v5.8.2)

For release notes, check out the [release announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/).

- [fixed issues query for Typescript 5.8.0 (Beta)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.8.0%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.8.1 (RC)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.8.1%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.8.2 (Stable)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.8.2%22+is%3Aclosed+).

Downloads are available on:

- [npm](https://www.npmjs.com/package/typescript)

### [`v5.7.3`](https://github.com/microsoft/TypeScript/releases/tag/v5.7.3): TypeScript 5.7.3

[Compare Source](https://github.com/microsoft/TypeScript/compare/v5.7.2...v5.7.3)

For release notes, check out the [release announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/).

- [fixed issues query for Typescript 5.7.0 (Beta)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.7.0%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.7.1 (RC)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.7.1%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.7.2 (Stable)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.7.2%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.7.3 (Stable)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.7.2%22+is%3Aclosed+).

Downloads are available on [npm](https://www.npmjs.com/package/typescript)

### [`v5.7.2`](https://github.com/microsoft/TypeScript/releases/tag/v5.7.2): TypeScript 5.7

[Compare Source](https://github.com/microsoft/TypeScript/compare/v5.6.3...v5.7.2)

For release notes, check out the [release announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/).

- [fixed issues query for Typescript 5.7.0 (Beta)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.7.0%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.7.1 (RC)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.7.1%22+is%3Aclosed+).
- [fixed issues query for Typescript 5.7.2 (Stable)](https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93\&q=milestone%3A%22TypeScript+5.7.2%22+is%3Aclosed+).

Downloads are available on:

- [npm](https://www.npmjs.com/package/typescript)

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://github.com/renovatebot/renovate/discussions) if that's undesired.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4zNi4yIiwidXBkYXRlZEluVmVyIjoiNDMuNzYuMiIsInRhcmdldEJyYW5jaCI6Im5leHQiLCJsYWJlbHMiOltdfQ==-->

Reviewed-on: #35
Co-authored-by: Renovate Bot <renovate-bot@valverde.cloud>
Co-committed-by: Renovate Bot <renovate-bot@valverde.cloud>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-fc/monorepo",
-  "packageManager": "bun@1.3.14",
+  "packageManager": "bun@1.3.11",
   "private": true,
   "workspaces": [
     "./packages/*"
@@ -15,12 +15,12 @@
     "clean:modules": "turbo clean:modules && rm -rf node_modules"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.16",
+    "@biomejs/biome": "^2.4.9",
-    "@effect/language-service": "^0.86.2",
+    "@effect/language-service": "^0.84.2",
-    "@types/bun": "^1.3.14",
+    "@types/bun": "^1.3.11",
-    "npm-check-updates": "^22.2.1",
+    "npm-check-updates": "^19.6.6",
     "npm-sort": "^0.0.4",
-    "turbo": "^2.9.16",
+    "turbo": "^2.8.21",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.2"
   }
 }

packages/docs/blog/2019-05-28-first-blog-post.md

@@ -7,4 +7,6 @@ tags: [hola, docusaurus]
 
 Lorem ipsum dolor sit amet...
 
+<!-- truncate -->
+
 ...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

packages/docs/blog/2019-05-29-long-blog-post.md

@@ -9,6 +9,8 @@ This is the summary of a very long blog post,
 
 Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
 
+<!-- truncate -->
+
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

packages/docs/blog/2021-08-26-welcome/index.md

@@ -9,6 +9,8 @@ tags: [facebook, hello, docusaurus]
 
 Here are a few tips you might find useful.
 
+<!-- truncate -->
+
 Simply add Markdown files (or folders) to the `blog` directory.
 
 Regular blog authors can be added to `authors.yml`.

packages/docs/package.json

@@ -15,20 +15,19 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.10.1",
+    "@docusaurus/core": "3.9.2",
-    "@docusaurus/faster": "^3.10.1",
+    "@docusaurus/preset-classic": "3.9.2",
-    "@docusaurus/preset-classic": "3.10.1",
+    "@mdx-js/react": "^3.0.0",
-    "@mdx-js/react": "^3.1.1",
+    "clsx": "^2.0.0",
-    "clsx": "^2.1.1",
+    "prism-react-renderer": "^2.3.0",
-    "prism-react-renderer": "^2.4.1",
+    "react": "^19.0.0",
-    "react": "^19.2.5",
+    "react-dom": "^19.0.0"
-    "react-dom": "^19.2.5"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.10.1",
+    "@docusaurus/module-type-aliases": "3.9.2",
-    "@docusaurus/tsconfig": "3.10.1",
+    "@docusaurus/tsconfig": "3.9.2",
-    "@docusaurus/types": "3.10.1",
+    "@docusaurus/types": "3.9.2",
-    "typescript": "~6.0.3"
+    "typescript": "~6.0.0"
   },
   "browserslist": {
     "production": [

packages/effect-fc/package.json

@@ -1,7 +1,7 @@
 {
   "name": "effect-fc",
   "description": "Write React function components with Effect",
-  "version": "0.3.0",
+  "version": "0.2.4",
   "type": "module",
   "files": [
     "./README.md",
@@ -46,6 +46,6 @@
     "react": "^19.2.0"
   },
   "dependencies": {
-    "effect-lens": "^0.2.0"
+    "effect-lens": "^0.1.4"
   }
 }

packages/effect-fc/src/Async.ts

@@ -37,8 +37,8 @@ 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>(
+    asFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
-        this: Component.Component<P, A, E, R, F> & Async,
+        this: Component.Component<P, A, E, R> & Async,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
     ) {
         const Inner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
@@ -106,7 +106,7 @@ export const isAsync = (u: unknown): u is Async => Predicate.hasProperty(u, Asyn
  * )
  * ```
  */
-export const async = <T extends Component.Component.Any>(
+export const async = <T extends Component.Component<any, any, any, 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."
@@ -118,8 +118,7 @@ export const async = <T extends Component.Component.Any>(
         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(
@@ -155,14 +154,14 @@ export const async = <T extends Component.Component.Any>(
  * ```
  */
 export const withOptions: {
-    <T extends Component.Component.Any & Async>(
+    <T extends Component.Component<any, any, any, any> & Async>(
         options: Partial<AsyncOptions>
     ): (self: T) => T
-    <T extends Component.Component.Any & Async>(
+    <T extends Component.Component<any, any, any, any> & Async>(
         self: T,
         options: Partial<AsyncOptions>,
     ): T
-} = Function.dual(2, <T extends Component.Component.Any & Async>(
+} = Function.dual(2, <T extends Component.Component<any, any, any, any> & Async>(
     self: T,
     options: Partial<AsyncOptions>,
 ): T => Object.setPrototypeOf(

packages/effect-fc/src/Component.ts

@@ -10,52 +10,49 @@ export type ComponentTypeId = typeof ComponentTypeId
 /**
  * Represents an Effect-based React Component that integrates the Effect system with React.
  */
-export interface Component<P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>
+export interface Component<P extends {}, A extends React.ReactNode, E, R>
-extends ComponentPrototype<R, F>, ComponentOptions {
+extends ComponentPrototype<P, A, R>, ComponentOptions {
     new(_: never): Record<string, never>
     readonly [ComponentTypeId]: ComponentTypeId
     readonly "~Props": P
     readonly "~Success": A
     readonly "~Error": E
     readonly "~Context": R
-    readonly "~Function": F
 
     readonly body: (props: P) => Effect.Effect<A, E, R>
 }
 
 export declare namespace Component {
-    export type Default<P extends {}, A extends React.ReactNode, E, R> = Component<P, A, E, R, DefaultSignature<P, A>>
+    export type Props<T extends Component<any, any, any, any>> = [T] extends [Component<infer P, infer _A, infer _E, infer _R>] ? P : never
-    export type Any = Component<any, any, any, any, any>
+    export type Success<T extends Component<any, any, any, any>> = [T] extends [Component<infer _P, infer A, infer _E, infer _R>] ? A : never
+    export type Error<T extends Component<any, any, any, any>> = [T] extends [Component<infer _P, infer _A, infer E, infer _R>] ? E : never
+    export type Context<T extends Component<any, any, any, any>> = [T] extends [Component<infer _P, infer _A, infer _E, infer R>] ? R : never
 
-    export type Signature = (props: any) => React.ReactNode
+    export type AsComponent<T extends Component<any, any, any, any>> = Component<Props<T>, Success<T>, Error<T>, Context<T>>
-    export type DefaultSignature<P extends {}, A extends React.ReactNode> = (props: P) => A
-
-    export type Props<T extends Any> = [T] extends [Component<infer P, infer _A, infer _E, infer _R, infer _F>] ? P : never
-    export type Success<T extends Any> = [T] extends [Component<infer _P, infer A, infer _E, infer _R, infer _F>] ? A : never
-    export type Error<T extends Any> = [T] extends [Component<infer _P, infer _A, infer E, infer _R, infer _F>] ? E : never
-    export type Context<T extends Any> = [T] extends [Component<infer _P, infer _A, infer _E, infer R, infer _F>] ? R : never
-    export type Function<T extends Any> = [T] extends [Component<infer _P, infer _A, infer _E, infer _R, infer F>] ? F : never
-
-    export type AsComponent<T extends Any> = Component<Props<T>, Success<T>, Error<T>, Context<T>, Function<T>>
 }
 
 
-export interface ComponentImpl<P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>
+export interface ComponentPrototype<P extends {}, A extends React.ReactNode, R>
-extends Component<P, A, E, R, F>, ComponentImplPrototype<R, F> {}
+extends Pipeable.Pipeable {
+    readonly [ComponentTypeId]: ComponentTypeId
+    readonly use: Effect.Effect<(props: P) => A, never, Exclude<R, Scope.Scope>>
 
-export interface ComponentImplPrototype<R, F extends Component.Signature> {
+    asFunctionComponent(
-    readonly use: Effect.Effect<F, never, Exclude<R, Scope.Scope>>
+        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>
+    ): (props: P) => A
 
-    asFunctionComponent(runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>): F
+    setFunctionComponentName(f: React.FC<P>): void
-    setFunctionComponentName(f: F): void
+    transformFunctionComponent(f: React.FC<P>): React.FC<P>
-    transformFunctionComponent(f: F): F
 }
 
-export const ComponentImplPrototype: ComponentImplPrototype<any, any> = Object.freeze({
+export const ComponentPrototype: ComponentPrototype<any, any, any> = Object.freeze({
+    [ComponentTypeId]: ComponentTypeId,
+    ...Pipeable.Prototype,
+
     get use() { return use(this) },
 
-    asFunctionComponent<P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>(
+    asFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
-        this: ComponentImpl<P, A, E, R, F>,
+        this: Component<P, A, E, R>,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
     ) {
         return (props: P) => Runtime.runSync(runtimeRef.current)(
@@ -66,8 +63,8 @@ export const ComponentImplPrototype: ComponentImplPrototype<any, any> = Object.f
         )
     },
 
-    setFunctionComponentName<P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>(
+    setFunctionComponentName<P extends {}, A extends React.ReactNode, E, R>(
-        this: ComponentImpl<P, A, E, R, F>,
+        this: Component<P, A, E, R>,
         f: React.FC<P>,
     ) {
         f.displayName = this.displayName ?? "Anonymous"
@@ -76,8 +73,8 @@ export const ComponentImplPrototype: ComponentImplPrototype<any, any> = Object.f
     transformFunctionComponent: identity,
 } as const)
 
-const use = Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>(
+const use = Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode, E, R>(
-    self: ComponentImpl<P, A, E, R, F>
+    self: Component<P, A, E, R>
 ) {
     // biome-ignore lint/style/noNonNullAssertion: React ref initialization
     const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
@@ -85,7 +82,7 @@ const use = Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode
 
     return yield* React.useState(() => Runtime.runSync(runtimeRef.current)(Effect.cachedFunction(
         (_services: readonly any[]) => Effect.sync(() => {
-            const f = self.asFunctionComponent(runtimeRef)
+            const f: React.FC<P> = self.asFunctionComponent(runtimeRef)
             self.setFunctionComponentName(f)
             return self.transformFunctionComponent(f)
         }),
@@ -96,23 +93,6 @@ const use = Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode
 })
 
 
-export interface ComponentPrototype<R, F extends Component.Signature>
-extends Pipeable.Pipeable {
-    readonly [ComponentTypeId]: ComponentTypeId
-    readonly use: Effect.Effect<F, never, Exclude<R, Scope.Scope>>
-}
-
-export const ComponentPrototype: ComponentPrototype<any, any> = Object.freeze(
-    Object.defineProperties(
-        {
-            [ComponentTypeId]: ComponentTypeId,
-            ...Pipeable.Prototype,
-        },
-        Object.getOwnPropertyDescriptors(ComponentImplPrototype),
-    ) as ComponentPrototype<any, any>
-)
-
-
 export interface ComponentOptions {
     /**
      * Custom display name for the component in React DevTools and debugging utilities.
@@ -151,13 +131,13 @@ export const defaultOptions: ComponentOptions = {
 }
 
 
-export const isComponent = (u: unknown): u is Component.Default<{}, React.ReactNode, unknown, unknown> => Predicate.hasProperty(u, ComponentTypeId)
+export const isComponent = (u: unknown): u is Component<{}, React.ReactNode, unknown, unknown> => Predicate.hasProperty(u, ComponentTypeId)
 
 export declare namespace make {
     export type Gen = {
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A extends React.ReactNode, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>
-        ): Component.Default<
+        ): Component<
             P, A,
             [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
             [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
@@ -172,7 +152,7 @@ export declare namespace make {
                 >,
                 props: NoInfer<P>,
             ) => B,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<B>>, Effect.Effect.Error<B>, Effect.Effect.Context<B>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<B>>, Effect.Effect.Error<B>, Effect.Effect.Context<B>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -184,7 +164,7 @@ export declare namespace make {
                 props: NoInfer<P>,
             ) => B,
             b: (_: B, props: NoInfer<P>) => C,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<C>>, Effect.Effect.Error<C>, Effect.Effect.Context<C>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<C>>, Effect.Effect.Error<C>, Effect.Effect.Context<C>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -197,7 +177,7 @@ export declare namespace make {
             ) => B,
             b: (_: B, props: NoInfer<P>) => C,
             c: (_: C, props: NoInfer<P>) => D,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<D>>, Effect.Effect.Error<D>, Effect.Effect.Context<D>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<D>>, Effect.Effect.Error<D>, Effect.Effect.Context<D>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -211,7 +191,7 @@ export declare namespace make {
             b: (_: B, props: NoInfer<P>) => C,
             c: (_: C, props: NoInfer<P>) => D,
             d: (_: D, props: NoInfer<P>) => E,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<E>>, Effect.Effect.Error<E>, Effect.Effect.Context<E>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<E>>, Effect.Effect.Error<E>, Effect.Effect.Context<E>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -226,7 +206,7 @@ export declare namespace make {
             c: (_: C, props: NoInfer<P>) => D,
             d: (_: D, props: NoInfer<P>) => E,
             e: (_: E, props: NoInfer<P>) => F,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<F>>, Effect.Effect.Error<F>, Effect.Effect.Context<F>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<F>>, Effect.Effect.Error<F>, Effect.Effect.Context<F>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -242,7 +222,7 @@ export declare namespace make {
             d: (_: D, props: NoInfer<P>) => E,
             e: (_: E, props: NoInfer<P>) => F,
             f: (_: F, props: NoInfer<P>) => G,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<G>>, Effect.Effect.Error<G>, Effect.Effect.Context<G>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<G>>, Effect.Effect.Error<G>, Effect.Effect.Context<G>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -259,7 +239,7 @@ export declare namespace make {
             e: (_: E, props: NoInfer<P>) => F,
             f: (_: F, props: NoInfer<P>) => G,
             g: (_: G, props: NoInfer<P>) => H,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<H>>, Effect.Effect.Error<H>, Effect.Effect.Context<H>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<H>>, Effect.Effect.Error<H>, Effect.Effect.Context<H>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H, I extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -277,7 +257,7 @@ export declare namespace make {
             f: (_: F, props: NoInfer<P>) => G,
             g: (_: G, props: NoInfer<P>) => H,
             h: (_: H, props: NoInfer<P>) => I,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<I>>, Effect.Effect.Error<I>, Effect.Effect.Context<I>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<I>>, Effect.Effect.Error<I>, Effect.Effect.Context<I>>
         <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H, I, J extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Generator<Eff, A, never>,
             a: (
@@ -296,35 +276,35 @@ export declare namespace make {
             g: (_: G, props: NoInfer<P>) => H,
             h: (_: H, props: NoInfer<P>) => I,
             i: (_: I, props: NoInfer<P>) => J,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<J>>, Effect.Effect.Error<J>, Effect.Effect.Context<J>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<J>>, Effect.Effect.Error<J>, Effect.Effect.Context<J>>
     }
 
     export type NonGen = {
         <Eff extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
             body: (props: P) => Eff
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => Eff,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
             b: (_: B, props: NoInfer<P>) => Eff,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
             b: (_: B, props: NoInfer<P>) => C,
             c: (_: C, props: NoInfer<P>) => Eff,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
             b: (_: B, props: NoInfer<P>) => C,
             c: (_: C, props: NoInfer<P>) => D,
             d: (_: D, props: NoInfer<P>) => Eff,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
@@ -332,7 +312,7 @@ export declare namespace make {
             c: (_: C, props: NoInfer<P>) => D,
             d: (_: D, props: NoInfer<P>) => E,
             e: (_: E, props: NoInfer<P>) => Eff,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
@@ -341,7 +321,7 @@ export declare namespace make {
             d: (_: D, props: NoInfer<P>) => E,
             e: (_: E, props: NoInfer<P>) => F,
             f: (_: F, props: NoInfer<P>) => Eff,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
@@ -351,7 +331,7 @@ export declare namespace make {
             e: (_: E, props: NoInfer<P>) => F,
             f: (_: F, props: NoInfer<P>) => G,
             g: (_: G, props: NoInfer<P>) => Eff,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, H, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
@@ -362,7 +342,7 @@ export declare namespace make {
             f: (_: F, props: NoInfer<P>) => G,
             g: (_: G, props: NoInfer<P>) => H,
             h: (_: H, props: NoInfer<P>) => Eff,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
         <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, H, I, P extends {} = {}>(
             body: (props: P) => A,
             a: (_: A, props: NoInfer<P>) => B,
@@ -374,7 +354,7 @@ export declare namespace make {
             g: (_: G, props: NoInfer<P>) => H,
             h: (_: H, props: NoInfer<P>) => I,
             i: (_: I, props: NoInfer<P>) => Eff,
-        ): Component.Default<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
+        ): Component<P, Effect.Effect.Success<Effect.Effect.AsEffect<Eff>>, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
     }
 }
 
@@ -520,24 +500,6 @@ export const makeUntraced: (
         )
 )
 
-export declare namespace withSignature {
-    export type Result<T extends Component.Any, F extends Component.Signature> = (
-        & Omit<T, keyof Component.AsComponent<T>>
-        & Component<Component.Props<T>, Component.Success<T>, Component.Error<T>, Component.Context<T>, F>
-    )
-}
-
-export const withSignature: {
-    <F extends Component.Signature>(): <T extends Component.Any>(
-        self: T
-    ) => withSignature.Result<T, F>
-    <F extends Component.Signature, T extends Component.Any>(
-        self: T
-    ): withSignature.Result<T, F>
-} = (self?: Component.Any): any => self === undefined
-    ? identity
-    : self
-
 /**
  * Creates a new component with modified configuration options while preserving all original behavior.
  *
@@ -555,14 +517,14 @@ export const withSignature: {
  * ```
  */
 export const withOptions: {
-    <T extends Component.Any>(
+    <T extends Component<any, any, any, any>>(
         options: Partial<ComponentOptions>
     ): (self: T) => T
-    <T extends Component.Any>(
+    <T extends Component<any, any, any, any>>(
         self: T,
         options: Partial<ComponentOptions>,
     ): T
-} = Function.dual(2, <T extends Component.Any>(
+} = Function.dual(2, <T extends Component<any, any, any, any>>(
     self: T,
     options: Partial<ComponentOptions>,
 ): T => Object.setPrototypeOf(
@@ -608,19 +570,19 @@ export const withOptions: {
  *
  */
 export const withRuntime: {
-    <P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>(
+    <P extends {}, A extends React.ReactNode, E, R>(
         context: React.Context<Runtime.Runtime<R>>,
-    ): (self: Component<P, A, E, Scope.Scope | NoInfer<R>, F>) => F
+    ): (self: Component<P, A, E, Scope.Scope | NoInfer<R>>) => (props: P) => A
-    <P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>(
+    <P extends {}, A extends React.ReactNode, E, R>(
-        self: Component<P, A, E, Scope.Scope | NoInfer<R>, F>,
+        self: Component<P, A, E, Scope.Scope | NoInfer<R>>,
         context: React.Context<Runtime.Runtime<R>>,
-    ): F
+    ): (props: P) => A
-} = Function.dual(2, <P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>(
+} = Function.dual(2, <P extends {}, A extends React.ReactNode, E, R>(
-    self: Component<P, A, E, R, F>,
+    self: Component<P, A, E, R>,
     context: React.Context<Runtime.Runtime<R>>,
 ) => function WithRuntime(props: P) {
     return React.createElement(
-        Runtime.runSync(React.useContext(context))(self.use) as React.FC<P>,
+        Runtime.runSync(React.useContext(context))(self.use),
         props,
     )
 })

packages/effect-fc/src/Form.ts

@@ -1,8 +1,11 @@
-import { Array, type Cause, Chunk, type Duration, Effect, Equal, Function, identity, Option, type ParseResult, Pipeable, Predicate, type Scope, Stream, SubscriptionRef } from "effect"
+import { Array, Cause, Chunk, type Context, type Duration, Effect, Equal, Exit, Fiber, Function, identity, Option, ParseResult, Pipeable, Predicate, Schema, type Scope, Stream } from "effect"
 import type * as React from "react"
 import * as Component from "./Component.js"
 import * as Lens from "./Lens.js"
+import * as Mutation from "./Mutation.js"
+import * as Result from "./Result.js"
 import * as Subscribable from "./Subscribable.js"
+import * as SubscriptionRef from "./SubscriptionRef.js"
 
 
 export const FormTypeId: unique symbol = Symbol.for("@effect-fc/Form/Form")
@@ -17,8 +20,8 @@ extends Pipeable.Pipeable {
     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 canSubmit: Subscribable.Subscribable<boolean, never, never>
-    readonly isCommitting: Subscribable.Subscribable<boolean, never, never>
+    readonly isSubmitting: Subscribable.Subscribable<boolean, never, never>
 }
 
 export class FormImpl<out P extends readonly PropertyKey[], in out A, in out I = A, in out ER = never, in out EW = never>
@@ -31,15 +34,209 @@ extends Pipeable.Class() implements Form<P, A, I, ER, EW> {
         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 canSubmit: Subscribable.Subscribable<boolean, never, never>,
-        readonly isCommitting: Subscribable.Subscribable<boolean, never, never>,
+        readonly isSubmitting: Subscribable.Subscribable<boolean, never, never>,
     ) {
         super()
     }
 }
 
 
+export const RootFormTypeId: unique symbol = Symbol.for("@effect-fc/Form/RootForm")
+export type RootFormTypeId = typeof RootFormTypeId
+
+export interface RootForm<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<readonly [], A, I, never, never> {
+    readonly schema: Schema.Schema<A, I, R>
+    readonly context: Context.Context<Scope.Scope | R>
+    readonly mutation: Mutation.Mutation<
+        readonly [value: A, form: RootForm<A, I, R, unknown, unknown, unknown>],
+        MA, ME, MR, MP
+    >
+    readonly autosubmit: boolean
+
+    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 RootFormImpl<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 RootForm<A, I, R, MA, ME, MR, MP> {
+    readonly [FormTypeId]: FormTypeId = FormTypeId
+    readonly [RootFormTypeId]: RootFormTypeId = RootFormTypeId
+
+    readonly path = [] as const
+
+    constructor(
+        readonly schema: Schema.Schema<A, I, R>,
+        readonly context: Context.Context<Scope.Scope | R>,
+        readonly mutation: Mutation.Mutation<
+            readonly [value: A, form: RootForm<A, I, R, unknown, unknown, unknown>],
+            MA, ME, MR, MP
+        >,
+        readonly autosubmit: boolean,
+
+        readonly value: Lens.Lens<Option.Option<A>, never, never, never, never>,
+        readonly encodedValue: Lens.Lens<I, never, never, never, never>,
+        readonly issues: Lens.Lens<readonly ParseResult.ArrayFormatterIssue[], never, never, never, never>,
+        readonly validationFiber: Lens.Lens<Option.Option<Fiber.Fiber<A, ParseResult.ParseError>>, never, never, never, never>,
+        readonly isValidating: Subscribable.Subscribable<boolean, never, never>,
+
+        readonly canSubmit: Subscribable.Subscribable<boolean, never, never>,
+        readonly isSubmitting: Subscribable.Subscribable<boolean, never, never>,
+
+        readonly runSemaphore: Effect.Semaphore,
+    ) {
+        super()
+    }
+
+    get run(): Effect.Effect<void> {
+        return this.runSemaphore.withPermits(1)(Stream.runForEach(
+            this.encodedValue.changes,
+
+            encodedValue => Lens.get(this.validationFiber).pipe(
+                Effect.andThen(Option.match({
+                    onSome: Fiber.interrupt,
+                    onNone: () => Effect.void,
+                })),
+                Effect.andThen(
+                    Effect.forkScoped(Effect.onExit(
+                        Schema.decode(this.schema, { errors: "all" })(encodedValue),
+                        exit => Effect.andThen(
+                            Exit.matchEffect(exit, {
+                                onSuccess: v => Effect.andThen(
+                                    Lens.set(this.value, Option.some(v)),
+                                    Lens.set(this.issues, Array.empty()),
+                                ),
+                                onFailure: c => Option.match(Chunk.findFirst(Cause.failures(c), e => e._tag === "ParseError"), {
+                                    onSome: e => Effect.flatMap(
+                                        ParseResult.ArrayFormatter.formatError(e),
+                                        v => Lens.set(this.issues, v),
+                                    ),
+                                    onNone: () => Effect.void,
+                                }),
+                            }),
+                            Lens.set(this.validationFiber, Option.none()),
+                        ),
+                    )).pipe(
+                        Effect.tap(fiber => Lens.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 Lens.get(this.value).pipe(
+            Effect.andThen(identity),
+            Effect.andThen(value => this.submitValue(value)),
+        )
+    }
+
+    submitValue(value: A): Effect.Effect<Option.Option<Result.Final<MA, ME, MP>>> {
+        return Effect.whenEffect(
+            Effect.tap(
+                this.mutation.mutate([value, this as any]),
+                result => Result.isFailure(result)
+                    ? Option.match(
+                        Chunk.findFirst(
+                            Cause.failures(result.cause as Cause.Cause<ParseResult.ParseError>),
+                            e => e._tag === "ParseError",
+                        ),
+                        {
+                            onSome: e => Effect.flatMap(
+                                ParseResult.ArrayFormatter.formatError(e),
+                                v => Lens.set(this.issues, v),
+                            ),
+                            onNone: () => Effect.void,
+                        },
+                    )
+                    : Effect.void
+            ),
+            this.canSubmit.get,
+        )
+    }
+}
+
+
 export const isForm = (u: unknown): u is Form<readonly PropertyKey[], unknown, unknown> => Predicate.hasProperty(u, FormTypeId)
+export const isRootForm = (u: unknown): u is RootForm<readonly PropertyKey[], unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, RootFormTypeId)
+
+
+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: RootForm<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
+    }
+}
+
+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<
+    RootForm<A, I, R, MA, ME, Result.forkEffect.OutputContext<MR, MP>, MP>,
+    never,
+    Scope.Scope | R | Result.forkEffect.OutputContext<MR, MP>
+> {
+    const mutation = yield* Mutation.make(options)
+    const valueLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<A>()))
+    const issuesLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make<readonly ParseResult.ArrayFormatterIssue[]>(Array.empty()))
+    const validationFiberLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(Option.none<Fiber.Fiber<A, ParseResult.ParseError>>()))
+
+    return new RootFormImpl(
+        options.schema,
+        yield* Effect.context<Scope.Scope | R>(),
+        mutation,
+        options.autosubmit ?? false,
+
+        valueLens,
+        Lens.fromSubscriptionRef(yield* SubscriptionRef.make(options.initialEncodedValue)),
+        issuesLens,
+        validationFiberLens,
+        Subscribable.map(validationFiberLens, Option.isSome),
+
+        Subscribable.map(
+            Subscribable.zipLatestAll(valueLens, issuesLens, validationFiberLens, mutation.result),
+            ([value, issues, validationFiber, result]) => (
+                Option.isSome(value) &&
+                Array.isEmptyReadonlyArray(issues) &&
+                Option.isNone(validationFiber) &&
+                !(Result.isRunning(result) || Result.hasRefreshingFlag(result))
+            ),
+        ),
+        Subscribable.map(mutation.result, result => Result.isRunning(result) || Result.hasRefreshingFlag(result)),
+
+        yield* Effect.makeSemaphore(1),
+    )
+})
+
+export declare namespace service {
+    export interface Options<in out A, in out I = A, in out R = never, in out MA = void, in out ME = never, in out MR = never, in out MP = never>
+    extends make.Options<A, I, R, MA, ME, MR, MP> {}
+}
+
+export const service = <A, I = A, R = never, MA = void, ME = never, MR = never, MP = never>(
+    options: service.Options<A, I, R, MA, ME, MR, MP>
+): Effect.Effect<
+    RootForm<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),
+)
 
 
 const filterIssuesByPath = (
@@ -49,7 +246,7 @@ const filterIssuesByPath = (
     issue.path.length >= path.length && Array.every(path, (p, i) => p === issue.path[i])
 )
 
-export const focusObjectOn: {
+export const focusObjectField: {
     <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,
@@ -67,11 +264,11 @@ export const focusObjectOn: {
     return new FormImpl(
         path,
         Subscribable.mapOption(form.value, a => a[key]),
-        Lens.focusObjectOn(form.encodedValue, key),
+        Lens.focusObjectField(form.encodedValue, key),
         Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
         form.isValidating,
-        form.canCommit,
+        form.canSubmit,
-        form.isCommitting,
+        form.isSubmitting,
     )
 })
 
@@ -96,8 +293,8 @@ export const focusArrayAt: {
         Lens.focusArrayAt(form.encodedValue, index),
         Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
         form.isValidating,
-        form.canCommit,
+        form.canSubmit,
-        form.isCommitting,
+        form.isSubmitting,
     )
 })
 
@@ -122,8 +319,8 @@ export const focusTupleAt: {
         Lens.focusTupleAt(form.encodedValue, index),
         Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
         form.isValidating,
-        form.canCommit,
+        form.canSubmit,
-        form.isCommitting,
+        form.isSubmitting,
     )
 })
 
@@ -148,8 +345,8 @@ export const focusChunkAt: {
         Lens.focusChunkAt(form.encodedValue, index),
         Subscribable.map(form.issues, issues => filterIssuesByPath(issues, path)),
         form.isValidating,
-        form.canCommit,
+        form.canSubmit,
-        form.isCommitting,
+        form.isSubmitting,
     )
 })
 
@@ -192,7 +389,7 @@ export const useInput = Effect.fnUntraced(function* <P extends readonly Property
                 ),
                 internalValue => Lens.set(form.encodedValue, internalValue),
             ),
-        ], { concurrency: "unbounded", discard: true }))
+        ], { concurrency: "unbounded" }))
 
         return internalValueLens
     }), [form, options?.debounce])

packages/effect-fc/src/Lens.ts

@@ -1,8 +1,9 @@
-import { Effect, Equivalence, Stream, SubscriptionRef } from "effect"
+import { Effect, Equivalence, Stream } from "effect"
 import { Lens } from "effect-lens"
 import * as React from "react"
 import * as Component from "./Component.js"
 import * as SetStateAction from "./SetStateAction.js"
+import * as SubscriptionRef from "./SubscriptionRef.js"
 
 
 export * from "effect-lens/Lens"
@@ -37,15 +38,15 @@ export const useState = Effect.fnUntraced(function* <A, ER, EW, RR, RW>(
     return [reactStateValue, setValue]
 })
 
-export declare namespace useFromReactState {
+export declare namespace useFromState {
     export interface Options<A> {
         readonly equivalence?: Equivalence.Equivalence<A>
     }
 }
 
-export const useFromReactState = Effect.fnUntraced(function* <A>(
+export const useFromState = Effect.fnUntraced(function* <A>(
     [value, setValue]: readonly [A, React.Dispatch<React.SetStateAction<A>>],
-    options?: useFromReactState.Options<NoInfer<A>>,
+    options?: useFromState.Options<NoInfer<A>>,
 ): Effect.fn.Return<Lens.Lens<A, never, never, never, never>> {
     const lens = yield* Component.useOnMount(() => Effect.map(
         SubscriptionRef.make(value),

packages/effect-fc/src/Memoized.ts

@@ -61,7 +61,7 @@ export const isMemoized = (u: unknown): u is Memoized<unknown> => Predicate.hasP
  * )
  * ```
  */
-export const memoized = <T extends Component.Component.Any>(
+export const memoized = <T extends Component.Component<any, any, any, any>>(
     self: T
 ): T & Memoized<Component.Component.Props<T>> => Object.setPrototypeOf(
     Object.assign(function() {}, self),
@@ -96,14 +96,14 @@ export const memoized = <T extends Component.Component.Any>(
  * ```
  */
 export const withOptions: {
-    <T extends Component.Component.Any & Memoized<any>>(
+    <T extends Component.Component<any, any, any, any> & Memoized<any>>(
         options: Partial<MemoizedOptions<Component.Component.Props<T>>>
     ): (self: T) => T
-    <T extends Component.Component.Any & Memoized<any>>(
+    <T extends Component.Component<any, any, any, any> & Memoized<any>>(
         self: T,
         options: Partial<MemoizedOptions<Component.Component.Props<T>>>,
     ): T
-} = Function.dual(2, <T extends Component.Component.Any & Memoized<any>>(
+} = Function.dual(2, <T extends Component.Component<any, any, any, any> & Memoized<any>>(
     self: T,
     options: Partial<MemoizedOptions<Component.Component.Props<T>>>,
 ): T => Object.setPrototypeOf(

packages/effect-fc/src/Mutation.ts

@@ -99,10 +99,8 @@ extends Pipeable.Class() implements Mutation<K, A, E, R, P> {
     }
 }
 
-
 export const isMutation = (u: unknown): u is Mutation<readonly unknown[], unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, MutationTypeId)
 
-
 export declare namespace make {
     export interface Options<K extends Mutation.AnyKey = never, A = void, E = never, R = never, P = never> {
         readonly f: (key: K) => Effect.Effect<A, E, Result.forkEffect.InputContext<R, NoInfer<P>>>

packages/effect-fc/src/PropertyPath.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, test } from "bun:test"
+import { Option } from "effect"
+import * as PropertyPath from "./PropertyPath.js"
+
+
+describe("immutableSet with arrays", () => {
+    test("sets a top-level array element", () => {
+        const arr = [1, 2, 3]
+        const result = PropertyPath.immutableSet(arr, [1], 99)
+        expect(result).toEqual(Option.some([1, 99, 3]))
+    })
+
+    test("does not mutate the original array", () => {
+        const arr = [1, 2, 3]
+        PropertyPath.immutableSet(arr, [0], 42)
+        expect(arr).toEqual([1, 2, 3])
+    })
+
+    test("sets the first element of an array", () => {
+        const arr = ["a", "b", "c"]
+        const result = PropertyPath.immutableSet(arr, [0], "z")
+        expect(result).toEqual(Option.some(["z", "b", "c"]))
+    })
+
+    test("sets the last element of an array", () => {
+        const arr = [10, 20, 30]
+        const result = PropertyPath.immutableSet(arr, [2], 99)
+        expect(result).toEqual(Option.some([10, 20, 99]))
+    })
+
+    test("sets a nested array element inside an object", () => {
+        const obj = { tags: ["foo", "bar", "baz"] }
+        const result = PropertyPath.immutableSet(obj, ["tags", 1], "qux")
+        expect(result).toEqual(Option.some({ tags: ["foo", "qux", "baz"] }))
+    })
+
+    test("sets a deeply nested value inside an array of objects", () => {
+        const obj = { items: [{ name: "alice" }, { name: "bob" }] }
+        const result = PropertyPath.immutableSet(obj, ["items", 0, "name"], "charlie")
+        expect(result).toEqual(Option.some({ items: [{ name: "charlie" }, { name: "bob" }] }))
+    })
+
+    test("sets a value in a nested array", () => {
+        const matrix = [[1, 2], [3, 4]]
+        const result = PropertyPath.immutableSet(matrix, [1, 0], 99)
+        expect(result).toEqual(Option.some([[1, 2], [99, 4]]))
+    })
+
+    test("returns Option.none() for an out-of-bounds index", () => {
+        const arr = [1, 2, 3]
+        const result = PropertyPath.immutableSet(arr, [5], 99)
+        expect(result).toEqual(Option.none())
+    })
+
+    test("returns Option.none() for a non-numeric key on an array", () => {
+        const arr = [1, 2, 3]
+        // @ts-expect-error intentionally wrong key type
+        const result = PropertyPath.immutableSet(arr, ["length"], 0)
+        expect(result).toEqual(Option.none())
+    })
+
+    test("empty path returns Option.some of the value itself", () => {
+        const arr = [1, 2, 3]
+        const result = PropertyPath.immutableSet(arr, [], [9, 9, 9] as any)
+        expect(result).toEqual(Option.some([9, 9, 9]))
+    })
+})

packages/effect-fc/src/PropertyPath.ts

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

packages/effect-fc/src/PubSub.ts

@@ -3,7 +3,7 @@ import type * as React from "react"
 import * as Component from "./Component.js"
 
 
-export const useFromReactiveValues = Effect.fnUntraced(function* <const A extends React.DependencyList>(
+export const usePubSubFromReactiveValues = Effect.fnUntraced(function* <const A extends React.DependencyList>(
     values: A
 ): Effect.fn.Return<PubSub.PubSub<A>, never, Scope.Scope> {
     const pubsub = yield* Component.useOnMount(() => Effect.acquireRelease(PubSub.unbounded<A>(), PubSub.shutdown))

packages/effect-fc/src/Query.ts

@@ -266,10 +266,8 @@ extends Pipeable.Class() implements Query<K, A, KE, KR, E, R, P> {
     }
 }
 
-
 export const isQuery = (u: unknown): u is Query<readonly unknown[], unknown> => Predicate.hasProperty(u, QueryTypeId)
 
-
 export declare namespace make {
     export interface Options<K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never> {
         readonly key: Stream.Stream<K, KE, KR>

packages/effect-fc/src/Result.ts

@@ -1,4 +1,4 @@
-import { Cause, Context, Data, Effect, Equal, Exit, type Fiber, Hash, Layer, Match, Pipeable, Predicate, PubSub, pipe, Ref, type Scope, Stream, type Subscribable, SynchronizedRef } from "effect"
+import { Cause, Context, Data, Effect, Equal, Exit, type Fiber, Hash, Layer, Match, pipe, Pipeable, Predicate, PubSub, Ref, type Scope, Stream, type Subscribable, SynchronizedRef } from "effect"
 import { Lens } from "effect-lens"
 
 
@@ -212,24 +212,24 @@ export const unsafeForkEffect = Effect.fnUntraced(function* <A, E, R, P = never>
     never,
     Scope.Scope | unsafeForkEffect.OutputContext<R, P>
 > {
-    const ref = (yield* SynchronizedRef.make(
+    const ref = yield* SynchronizedRef.make<Result<A, E, P>>(options?.initial ?? initial<A, E, P>())
-        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({
+    const state = Lens.make<Result<A, E, P>, never, never, never, never>({
-        get: Ref.get(ref.ref),
+        get get() { return Ref.get(ref) },
         get changes() {
             return Stream.unwrapScoped(Effect.map(
-                Effect.all([Ref.get(ref.ref), Stream.fromPubSub(pubsub, { scoped: true })]),
+                Effect.all([Ref.get(ref), Stream.fromPubSub(pubsub, { scoped: true })]),
                 ([latest, stream]) => Stream.concat(Stream.make(latest), stream),
             ))
         },
-        commit: value => Effect.zipLeft(
+        modify: f => Ref.get(ref).pipe(
-            Ref.set(ref.ref, value),
+            Effect.flatMap(f),
-            PubSub.publish(pubsub, value),
+            Effect.flatMap(([b, a]) => Ref.set(ref, a).pipe(
+                Effect.as(b),
+                Effect.zipLeft(PubSub.publish(pubsub, a))
+            )),
         ),
-        lock: Effect.succeed(ref.withLock),
     })
 
     const fiber = yield* Effect.gen(function*() {

packages/effect-fc/src/Stream.ts

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

packages/effect-fc/src/SubmittableForm.ts

@@ -1,220 +0,0 @@
-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

@@ -19,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 useAll {
+export declare namespace useSubscribables {
     export type Success<T extends readonly Subscribable.Subscribable<any, any, any>[]> = [T[number]] extends [never]
         ? never
         : { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never }
@@ -29,11 +29,11 @@ export declare namespace useAll {
     }
 }
 
-export const useAll = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
+export const useSubscribables = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
     elements: T,
-    options?: useAll.Options<useAll.Success<NoInfer<T>>>,
+    options?: useSubscribables.Options<useSubscribables.Success<NoInfer<T>>>,
 ): Effect.fn.Return<
-    useAll.Success<T>,
+    useSubscribables.Success<T>,
     [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer E, infer _R> ? E : never,
     [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer R> ? R : never
 > {

packages/effect-fc/src/SubscriptionRef.ts

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

packages/effect-fc/src/SubscriptionSubRef.test.ts

@@ -0,0 +1,183 @@
+import { describe, expect, test } from "bun:test"
+import { Chunk, Effect, Ref, SubscriptionRef } from "effect"
+import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
+
+
+describe("SubscriptionSubRef with array refs", () => {
+    test("creates a subref for a single array element using path", async () => {
+        const value = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([{ name: "alice" }, { name: "bob" }, { name: "charlie" }]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [1, "name"])
+                    return subref.get
+                },
+            ),
+        )
+
+        expect(value).toBe("bob")
+    })
+
+    test("modifies a single array element via subref", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([{ name: "alice" }, { name: "bob" }, { name: "charlie" }]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [1, "name"])
+                    return Effect.flatMap(
+                        Ref.set(subref, "bob-updated"),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(result).toEqual([{ name: "alice" }, { name: "bob-updated" }, { name: "charlie" }])
+    })
+
+    test("modifies array element at index 0", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([10, 20, 30]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [0])
+                    return Effect.flatMap(
+                        Ref.set(subref, 99),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(result).toEqual([99, 20, 30])
+    })
+
+    test("modifies array element at last index", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make(["a", "b", "c"]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [2])
+                    return Effect.flatMap(
+                        Ref.set(subref, "z"),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(result).toEqual(["a", "b", "z"])
+    })
+
+    test("modifies nested array element", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([[1, 2], [3, 4], [5, 6]]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [1, 0])
+                    return Effect.flatMap(
+                        Ref.set(subref, 99),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(result).toEqual([[1, 2], [99, 4], [5, 6]])
+    })
+
+    test("uses modifyEffect to transform array element", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([{ count: 1 }, { count: 2 }, { count: 3 }]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [1, "count"])
+                    return Effect.flatMap(
+                        Ref.update(subref, count => count + 100),
+                        () => Effect.map(Ref.get(parent), parentValue => ({ result: 102, parentValue })),
+                    )
+                },
+            ),
+        )
+
+        expect(result.result).toBe(102) // count + 100
+        expect(result.parentValue).toEqual([{ count: 1 }, { count: 102 }, { count: 3 }]) // count + 100
+    })
+
+    test("uses modify to transform array element", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([10, 20, 30]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [1])
+                    return Effect.flatMap(
+                        Ref.update(subref, x => x + 5),
+                        () => Effect.map(Ref.get(parent), parentValue => ({ result: 25, parentValue })),
+                    )
+                },
+            ),
+        )
+
+        expect(result.result).toBe(25) // 20 + 5
+        expect(result.parentValue).toEqual([10, 25, 30]) // 20 + 5
+    })
+
+    test("makeFromChunkIndex modifies chunk element", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make(Chunk.make(100, 200, 300)),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromChunkIndex(parent, 1)
+                    return Effect.flatMap(
+                        Ref.set(subref, 999),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(Chunk.toReadonlyArray(result)).toEqual([100, 999, 300])
+    })
+
+    test("makeFromGetSet with custom getter/setter for array element", async () => {
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make([{ id: 1, value: "a" }, { id: 2, value: "b" }]),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromGetSet(parent, {
+                        get: arr => arr[0].value,
+                        set: (arr, newValue) => [
+                            { ...arr[0], value: newValue },
+                            ...arr.slice(1),
+                        ],
+                    })
+                    return Effect.flatMap(
+                        Ref.set(subref, "updated"),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(result).toEqual([{ id: 1, value: "updated" }, { id: 2, value: "b" }])
+    })
+
+    test("does not mutate original array when modifying via subref", async () => {
+        const original = [{ name: "alice" }, { name: "bob" }]
+        const result = await Effect.runPromise(
+            Effect.flatMap(
+                SubscriptionRef.make(original),
+                parent => {
+                    const subref = SubscriptionSubRef.makeFromPath(parent, [0, "name"])
+                    return Effect.flatMap(
+                        Ref.set(subref, "alice-updated"),
+                        () => Ref.get(parent),
+                    )
+                },
+            ),
+        )
+
+        expect(original).toEqual([{ name: "alice" }, { name: "bob" }]) // original unchanged
+        expect(result).toEqual([{ name: "alice-updated" }, { name: "bob" }]) // new value in ref
+    })
+})

packages/effect-fc/src/SubscriptionSubRef.ts

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

packages/effect-fc/src/SynchronizedForm.ts

@@ -1,223 +0,0 @@
-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

@@ -5,6 +5,7 @@ export * as Form from "./Form.js"
 export * as Lens from "./Lens.js"
 export * as Memoized from "./Memoized.js"
 export * as Mutation from "./Mutation.js"
+export * as PropertyPath from "./PropertyPath.js"
 export * as PubSub from "./PubSub.js"
 export * as Query from "./Query.js"
 export * as QueryClient from "./QueryClient.js"
@@ -12,6 +13,6 @@ export * as ReactRuntime from "./ReactRuntime.js"
 export * as Result from "./Result.js"
 export * as SetStateAction from "./SetStateAction.js"
 export * as Stream from "./Stream.js"
-export * as SubmittableForm from "./SubmittableForm.js"
 export * as Subscribable from "./Subscribable.js"
-export * as SynchronizedForm from "./SynchronizedForm.js"
+export * as SubscriptionRef from "./SubscriptionRef.js"
+export * as SubscriptionSubRef from "./SubscriptionSubRef.js"

packages/example/package.json

@@ -13,30 +13,30 @@
     "clean:modules": "rm -rf node_modules"
   },
   "devDependencies": {
-    "@tanstack/react-router": "^1.170.10",
+    "@tanstack/react-router": "^1.168.3",
-    "@tanstack/react-router-devtools": "^1.167.0",
+    "@tanstack/react-router-devtools": "^1.166.11",
-    "@tanstack/router-plugin": "^1.168.13",
+    "@tanstack/router-plugin": "^1.167.4",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.1",
-    "globals": "^17.6.0",
+    "globals": "^17.4.0",
-    "react": "^19.2.6",
+    "react": "^19.2.4",
-    "react-dom": "^19.2.6",
+    "react-dom": "^19.2.4",
-    "type-fest": "^5.7.0",
+    "type-fest": "^5.5.0",
-    "vite": "^8.0.16"
+    "vite": "^8.0.2"
   },
   "dependencies": {
-    "@effect/platform": "^0.96.1",
+    "@effect/platform": "^0.96.0",
     "@effect/platform-browser": "^0.76.0",
     "@radix-ui/themes": "^3.3.0",
     "@typed/id": "^0.17.2",
-    "effect": "^3.21.2",
+    "effect": "^3.21.0",
     "effect-fc": "workspace:*",
     "react-icons": "^5.6.0"
   },
   "overrides": {
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.14",
-    "effect": "^3.21.2",
+    "effect": "^3.21.0",
-    "react": "^19.2.6"
+    "react": "^19.2.4"
   }
 }

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

@@ -1,26 +1,22 @@
 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>
+    export interface Props extends Omit<TextField.RootProps, "form">, Form.useInput.Options {
-    extends Omit<TextField.RootProps, "form">, Form.useInput.Options {
+        readonly form: Form.Form<readonly PropertyKey[], any, string>
-        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 class TextFieldFormInputView extends Component.make("TextFieldFormInputView")(function*(
-}
+    props: TextFieldFormInputView.Props
-
-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([
+    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables([
         props.form.issues,
         props.form.isValidating,
-        props.form.isCommitting,
+        props.form.isSubmitting,
     ])
 
     return (
@@ -28,7 +24,7 @@ export const TextFieldFormInputView = Component.make("TextFieldFormInputView")(f
             <TextField.Root
                 value={input.value}
                 onChange={e => input.setValue(e.target.value)}
-                disabled={isCommitting}
+                disabled={isSubmitting}
                 {...Struct.omit(props, "form")}
             >
                 {isValidating &&
@@ -51,6 +47,4 @@ export const TextFieldFormInputView = Component.make("TextFieldFormInputView")(f
             })}
         </Flex>
     )
-}).pipe(
+}) {}
-    Component.withSignature<TextFieldFormInputView.Signature>()
-)

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

@@ -1,26 +1,22 @@
 import { Callout, Flex, Spinner, Switch, 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 TextFieldOptionalFormInputView {
-    export interface Props<out P extends readonly PropertyKey[], A, ER, EW>
+    export interface Props extends Omit<TextField.RootProps, "form" | "defaultValue">, Form.useOptionalInput.Options<string> {
-    extends Omit<TextField.RootProps, "form" | "defaultValue">, Form.useOptionalInput.Options<string> {
+        readonly form: Form.Form<readonly PropertyKey[], any, Option.Option<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 class TextFieldOptionalFormInputView extends Component.make("TextFieldOptionalFormInputView")(function*(
-}
+    props: TextFieldOptionalFormInputView.Props
-
-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* Subscribable.useAll([
+    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables([
         props.form.issues,
         props.form.isValidating,
-        props.form.isCommitting,
+        props.form.isSubmitting,
     ])
 
     return (
@@ -28,7 +24,7 @@ export const TextFieldOptionalFormInputView = Component.make("TextFieldOptionalF
             <TextField.Root
                 value={input.value}
                 onChange={e => input.setValue(e.target.value)}
-                disabled={!input.enabled || isCommitting}
+                disabled={!input.enabled || isSubmitting}
                 {...Struct.omit(props, "form", "defaultValue")}
             >
                 <TextField.Slot side="left">
@@ -59,6 +55,4 @@ export const TextFieldOptionalFormInputView = Component.make("TextFieldOptionalF
             })}
         </Flex>
     )
-}).pipe(
+}) {}
-    Component.withSignature<TextFieldOptionalFormInputView.Signature>()
-)

packages/example/src/routes/form.tsx

@@ -1,11 +1,11 @@
-import { Button, Container, Flex, Text } from "@radix-ui/themes"
-import { createFileRoute } from "@tanstack/react-router"
-import { Console, Effect, Match, Option, ParseResult, Schema } from "effect"
-import { Component, Form, SubmittableForm, Subscribable } from "effect-fc"
 import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
 import { TextFieldOptionalFormInputView } from "@/lib/form/TextFieldOptionalFormInputView"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
 import { runtime } from "@/runtime"
+import { Button, Container, Flex, Text } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Console, Effect, Match, Option, ParseResult, Schema } from "effect"
+import { Component, Form, Subscribable } from "effect-fc"
 
 
 const email = Schema.pattern<typeof Schema.String>(
@@ -41,7 +41,7 @@ const RegisterFormSubmitSchema = Schema.Struct({
 
 class RegisterFormService extends Effect.Service<RegisterFormService>()("RegisterFormService", {
     scoped: Effect.gen(function*() {
-        const form = yield* SubmittableForm.service({
+        const form = yield* Form.service({
             schema: RegisterFormSchema.pipe(
                 Schema.compose(
                     Schema.transformOrFail(
@@ -64,17 +64,17 @@ class RegisterFormService extends Effect.Service<RegisterFormService>()("Registe
 
         return {
             form,
-            emailField: Form.focusObjectOn(form, "email"),
+            emailField: Form.focusObjectField(form, "email"),
-            passwordField: Form.focusObjectOn(form, "password"),
+            passwordField: Form.focusObjectField(form, "password"),
-            birthField: Form.focusObjectOn(form, "birth"),
+            birthField: Form.focusObjectField(form, "birth"),
         } as const
     })
 }) {}
 
 class RegisterFormView extends Component.make("RegisterFormView")(function*() {
     const form = yield* RegisterFormService
-    const [canCommit, submitResult] = yield* Subscribable.useAll([
+    const [canSubmit, submitResult] = yield* Subscribable.useSubscribables([
-        form.form.canCommit,
+        form.form.canSubmit,
         form.form.mutation.result,
     ])
 
@@ -111,7 +111,7 @@ class RegisterFormView extends Component.make("RegisterFormView")(function*() {
                         defaultValue=""
                     />
 
-                    <Button disabled={!canCommit}>Submit</Button>
+                    <Button disabled={!canSubmit}>Submit</Button>
                 </Flex>
             </form>
 

packages/example/src/routes/query.tsx

@@ -1,8 +1,8 @@
 import { HttpClient, type HttpClientError } from "@effect/platform"
 import { Button, Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Array, Cause, Chunk, Console, Effect, flow, Match, Option, Schema, Stream, SubscriptionRef } from "effect"
+import { Array, Cause, Chunk, Console, Effect, flow, Match, Option, Schema, Stream } from "effect"
-import { Component, ErrorObserver, Lens, Mutation, Query, Result, Subscribable } from "effect-fc"
+import { Component, ErrorObserver, Mutation, Query, Result, Subscribable, SubscriptionRef } from "effect-fc"
 import { runtime } from "@/runtime"
 
 
@@ -16,9 +16,9 @@ const Post = Schema.Struct({
 const ResultView = Component.make("ResultView")(function*() {
     const runPromise = yield* Component.useRunPromise()
 
-    const [idLens, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
+    const [idRef, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
-        const idLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(1))
+        const idRef = yield* SubscriptionRef.make(1)
-        const key = Stream.map(idLens.changes, id => [id] as const)
+        const key = Stream.map(idRef.changes, id => [id] as const)
 
         const query = yield* Query.service({
             key,
@@ -40,11 +40,11 @@ const ResultView = Component.make("ResultView")(function*() {
             ),
         })
 
-        return [idLens, query, mutation] as const
+        return [idRef, query, mutation] as const
     }))
 
-    const [id, setId] = yield* Lens.useState(idLens)
+    const [id, setId] = yield* SubscriptionRef.useSubscriptionRefState(idRef)
-    const [queryResult, mutationResult] = yield* Subscribable.useAll([query.result, mutation.result])
+    const [queryResult, mutationResult] = yield* Subscribable.useSubscribables([query.result, mutation.result])
 
     yield* Component.useOnMount(() => ErrorObserver.ErrorObserver<HttpClientError.HttpClientError>().pipe(
         Effect.andThen(observer => observer.subscribe),
@@ -105,7 +105,7 @@ const ResultView = Component.make("ResultView")(function*() {
                 </div>
 
                 <Flex direction="row" justify="center" align="center" gap="1">
-                    <Button onClick={() => runPromise(Effect.andThen(Lens.get(idLens), id => mutation.mutate([id])))}>Mutate</Button>
+                    <Button onClick={() => runPromise(Effect.andThen(idRef, id => mutation.mutate([id])))}>Mutate</Button>
                 </Flex>
             </Flex>
         </Container>

packages/example/src/routes/result.tsx

@@ -21,7 +21,7 @@ const ResultView = Component.makeUntraced("Result")(function*() {
         Effect.tap(Effect.sleep("250 millis")),
         Result.forkEffect,
     ))
-    const [result] = yield* Subscribable.useAll([resultSubscribable])
+    const [result] = yield* Subscribable.useSubscribables([resultSubscribable])
 
     yield* Component.useOnMount(() => ErrorObserver.ErrorObserver<HttpClientError.HttpClientError>().pipe(
         Effect.andThen(observer => observer.subscribe),

packages/example/src/todo/EditTodoView.tsx

@@ -1,88 +0,0 @@
-import { Box, Flex, IconButton } from "@radix-ui/themes"
-import { Effect } from "effect"
-import { Component, Form, Subscribable, SynchronizedForm } from "effect-fc"
-import { FaArrowDown, FaArrowUp } from "react-icons/fa"
-import { FaDeleteLeft } from "react-icons/fa6"
-import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
-import { TextFieldOptionalFormInputView } from "@/lib/form/TextFieldOptionalFormInputView"
-import { TodoFormSchema } from "./TodoFormSchema"
-import { TodosState } from "./TodosState"
-
-
-export interface EditTodoViewProps {
-    readonly id: string
-}
-
-export class EditTodoView extends Component.make("TodoView")(function*(props: EditTodoViewProps) {
-    const state = yield* TodosState
-
-    const [
-        indexSubscribable,
-        contentField,
-        completedAtField,
-    ] = yield* Component.useOnChange(() => Effect.gen(function*() {
-        const indexSubscribable = state.getIndexSubscribable(props.id)
-
-        const form = yield* SynchronizedForm.service({
-            schema: TodoFormSchema,
-            target: state.getElementLens(props.id),
-        })
-
-        return [
-            indexSubscribable,
-            Form.focusObjectOn(form, "content"),
-            Form.focusObjectOn(form, "completedAt"),
-        ] as const
-    }), [props.id])
-
-    const [index, size] = yield* Subscribable.useAll([
-        indexSubscribable,
-        state.sizeSubscribable,
-    ])
-
-    const runSync = yield* Component.useRunSync()
-    const TextFieldFormInput = yield* TextFieldFormInputView.use
-    const TextFieldOptionalFormInput = yield* TextFieldOptionalFormInputView.use
-
-
-    return (
-        <Flex direction="row" align="center" gap="2">
-            <Box flexGrow="1">
-                <Flex direction="column" align="stretch" gap="2">
-                    <TextFieldFormInput
-                        form={contentField}
-                        debounce="250 millis"
-                    />
-
-                    <Flex direction="row" justify="center" align="center" gap="2">
-                        <TextFieldOptionalFormInput
-                            form={completedAtField}
-                            type="datetime-local"
-                            defaultValue=""
-                        />
-                    </Flex>
-                </Flex>
-            </Box>
-
-            <Flex direction="column" justify="center" align="center" gap="1">
-                <IconButton
-                    disabled={index <= 0}
-                    onClick={() => runSync(state.moveLeft(props.id))}
-                >
-                    <FaArrowUp />
-                </IconButton>
-
-                <IconButton
-                    disabled={index >= size - 1}
-                    onClick={() => runSync(state.moveRight(props.id))}
-                >
-                    <FaArrowDown />
-                </IconButton>
-
-                <IconButton onClick={() => runSync(state.remove(props.id))}>
-                    <FaDeleteLeft />
-                </IconButton>
-            </Flex>
-        </Flex>
-    )
-}) {}

packages/example/src/todo/NewTodoView.tsx

@@ -1,78 +0,0 @@
-import { Box, Button, Flex } from "@radix-ui/themes"
-import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Chunk, type DateTime, Effect, Option, Schema } from "effect"
-import { Component, Form, Lens, SubmittableForm, Subscribable } from "effect-fc"
-import * as Domain from "@/domain"
-import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
-import { TextFieldOptionalFormInputView } from "@/lib/form/TextFieldOptionalFormInputView"
-import { TodoFormSchema } from "./TodoFormSchema"
-import { TodosState } from "./TodosState"
-
-
-const makeTodo = makeUuid4.pipe(
-    Effect.map(id => Domain.Todo.Todo.make({
-        id,
-        content: "",
-        completedAt: Option.none(),
-    })),
-    Effect.provide(GetRandomValues.CryptoRandom),
-)
-
-
-export class NewTodoView extends Component.make("NewTodoView")(function*() {
-    const state = yield* TodosState
-
-    const [
-        form,
-        contentField,
-        completedAtField,
-    ] = yield* Component.useOnMount(() => Effect.gen(function*() {
-        const form = yield* SubmittableForm.service({
-            schema: TodoFormSchema,
-            initialEncodedValue: yield* Schema.encode(TodoFormSchema)(yield* makeTodo),
-            f: ([todo, form]) => Lens.update(state.lens, Chunk.prepend(todo)).pipe(
-                Effect.andThen(makeTodo),
-                Effect.andThen(Schema.encode(TodoFormSchema)),
-                Effect.andThen(v => Lens.set(form.encodedValue, v)),
-            ),
-        })
-
-        return [
-            form,
-            Form.focusObjectOn(form, "content"),
-            Form.focusObjectOn(form, "completedAt"),
-        ] as const
-    }))
-
-    const [canCommit] = yield* Subscribable.useAll([form.canCommit])
-
-    const runPromise = yield* Component.useRunPromise<DateTime.CurrentTimeZone>()
-    const TextFieldFormInput = yield* TextFieldFormInputView.use
-    const TextFieldOptionalFormInput = yield* TextFieldOptionalFormInputView.use
-
-
-    return (
-        <Flex direction="row" align="center" gap="2">
-            <Box flexGrow="1">
-                <Flex direction="column" align="stretch" gap="2">
-                    <TextFieldFormInput
-                        form={contentField}
-                        debounce="250 millis"
-                    />
-
-                    <Flex direction="row" justify="center" align="center" gap="2">
-                        <TextFieldOptionalFormInput
-                            form={completedAtField}
-                            type="datetime-local"
-                            defaultValue=""
-                        />
-
-                        <Button disabled={!canCommit} onClick={() => void runPromise(form.submit)}>
-                            Add
-                        </Button>
-                    </Flex>
-                </Flex>
-            </Box>
-        </Flex>
-    )
-}) {}

packages/example/src/todo/TodoFormSchema.ts

@@ -1,9 +0,0 @@
-import { Schema } from "effect"
-import * as Domain from "@/domain"
-import { DateTimeUtcFromZonedInput } from "@/lib/schema"
-
-
-export const TodoFormSchema = Schema.compose(Schema.Struct({
-    ...Domain.Todo.Todo.fields,
-    completedAt: Schema.OptionFromSelf(DateTimeUtcFromZonedInput),
-}), Domain.Todo.Todo)

packages/example/src/todo/TodoView.tsx

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

packages/example/src/todo/TodosState.ts

@@ -1,7 +1,7 @@
 import { KeyValueStore } from "@effect/platform"
 import { BrowserKeyValueStore } from "@effect/platform-browser"
 import { Chunk, Console, Effect, Option, Schema, Stream, SubscriptionRef } from "effect"
-import { Lens, Subscribable } from "effect-fc"
+import { Subscribable, SubscriptionSubRef } from "effect-fc"
 import { Todo } from "@/domain"
 
 
@@ -30,29 +30,27 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
                 : kv.remove(key)
         )
 
-        const lens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(yield* readFromLocalStorage))
+        const ref = yield* SubscriptionRef.make(yield* readFromLocalStorage)
-        yield* Effect.forkScoped(lens.changes.pipe(
+        yield* Effect.forkScoped(ref.changes.pipe(
             Stream.debounce("500 millis"),
             Stream.runForEach(saveToLocalStorage),
         ))
-        yield* Effect.addFinalizer(() => Lens.get(lens).pipe(
+        yield* Effect.addFinalizer(() => ref.pipe(
             Effect.andThen(saveToLocalStorage),
             Effect.ignore,
         ))
 
-        const sizeSubscribable = Subscribable.map(lens, Chunk.size)
+        const sizeSubscribable = Subscribable.make({
+            get: Effect.andThen(ref, Chunk.size),
+            get changes() { return Stream.map(ref.changes, Chunk.size) },
+        })
+        const getElementRef = (id: string) => SubscriptionSubRef.makeFromChunkFindFirst(ref, v => v.id === id)
+        const getIndexSubscribable = (id: string) => Subscribable.make({
+            get: Effect.flatMap(ref, Chunk.findFirstIndex(v => v.id === id)),
+            get changes() { return Stream.flatMap(ref.changes, Chunk.findFirstIndex(v => v.id === id)) },
+        })
 
-        const getElementLens = (id: string) => Lens.mapEffect(
+        const moveLeft = (id: string) => SubscriptionRef.updateEffect(ref, todos => Effect.Do.pipe(
-            lens,
-            Chunk.findFirst(v => v.id === id),
-            (a, b) => Effect.flatMap(
-                Chunk.findFirstIndex(a, v => v.id === id),
-                i => Chunk.replaceOption(a, i, b),
-            )
-        )
-        const getIndexSubscribable = (id: string) => Subscribable.mapEffect(lens, Chunk.findFirstIndex(v => v.id === id))
-
-        const moveLeft = (id: string) => Lens.updateEffect(lens, todos => Effect.Do.pipe(
             Effect.bind("index", () => Chunk.findFirstIndex(todos, v => v.id === id)),
             Effect.bind("todo", ({ index }) => Chunk.get(todos, index)),
             Effect.bind("previous", ({ index }) => Chunk.get(todos, index - 1)),
@@ -64,7 +62,7 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
                 : todos
             ),
         ))
-        const moveRight = (id: string) => Lens.updateEffect(lens, todos => Effect.Do.pipe(
+        const moveRight = (id: string) => SubscriptionRef.updateEffect(ref, todos => Effect.Do.pipe(
             Effect.bind("index", () => Chunk.findFirstIndex(todos, v => v.id === id)),
             Effect.bind("todo", ({ index }) => Chunk.get(todos, index)),
             Effect.bind("next", ({ index }) => Chunk.get(todos, index + 1)),
@@ -76,15 +74,15 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
                 : todos
             ),
         ))
-        const remove = (id: string) => Lens.updateEffect(lens, todos => Effect.andThen(
+        const remove = (id: string) => SubscriptionRef.updateEffect(ref, todos => Effect.andThen(
             Chunk.findFirstIndex(todos, v => v.id === id),
             index => Chunk.remove(todos, index),
         ))
 
         return {
-            lens,
+            ref,
             sizeSubscribable,
-            getElementLens,
+            getElementRef,
             getIndexSubscribable,
             moveLeft,
             moveRight,

packages/example/src/todo/TodosView.tsx

@@ -1,32 +1,30 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
 import { Chunk, Console, Effect } from "effect"
 import { Component, Subscribable } from "effect-fc"
-import { EditTodoView } from "./EditTodoView"
-import { NewTodoView } from "./NewTodoView"
 import { TodosState } from "./TodosState"
+import { TodoView } from "./TodoView"
 
 
 export class TodosView extends Component.make("TodosView")(function*() {
     const state = yield* TodosState
-    const [todos] = yield* Subscribable.useAll([state.lens])
+    const [todos] = yield* Subscribable.useSubscribables([state.ref])
 
     yield* Component.useOnMount(() => Effect.andThen(
         Console.log("Todos mounted"),
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))
 
-    const NewTodo = yield* NewTodoView.use
+    const Todo = yield* TodoView.use
-    const EditTodo = yield* EditTodoView.use
 
     return (
         <Container>
             <Heading align="center">Todos</Heading>
 
             <Flex direction="column" align="stretch" gap="2" mt="2">
-                <NewTodo />
+                <Todo _tag="new" />
 
                 {Chunk.map(todos, todo =>
-                    <EditTodo key={todo.id} id={todo.id} />
+                    <Todo key={todo.id} _tag="edit" id={todo.id} />
                 )}
             </Flex>
         </Container>