Update bun minor+patch updates

This PR contains the following updates:

| Package | Change | Age | Confidence |
|---|---|---|---|
| [@effect/language-service](https://github.com/Effect-TS/language-service) | [`^0.49.0` -> `^0.54.0`](https://renovatebot.com/diffs/npm/@effect%2flanguage-service/0.49.0/0.54.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@effect%2flanguage-service/0.54.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@effect%2flanguage-service/0.49.0/0.54.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) |

---

### Release Notes

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

### [`v0.54.0`](https://github.com/Effect-TS/language-service/blob/HEAD/CHANGELOG.md#0540)

[Compare Source](https://github.com/Effect-TS/language-service/compare/v0.53.3...v0.54.0)

##### Minor Changes

- [#&#8203;476](https://github.com/Effect-TS/language-service/pull/476) [`9d5028c`](9d5028c92c) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add `unknownInEffectCatch` diagnostic to warn when catch callbacks in `Effect.tryPromise`, `Effect.tryMap`, or `Effect.tryMapPromise` return `unknown` or `any` types. This helps ensure proper error typing by encouraging developers to wrap unknown errors into Effect's `Data.TaggedError` or narrow down the type to the specific error being raised.

  Example:

  ```typescript
  // ❌ Will trigger diagnostic
  const program = Effect.tryPromise({
    try: () => fetch("http://something"),
    catch: (e) => e, // returns unknown
  });

  // ✅ Proper typed error
  class MyError extends Data.TaggedError("MyError")<{ cause: unknown }> {}

  const program = Effect.tryPromise({
    try: () => fetch("http://something"),
    catch: (e) => new MyError({ cause: e }),
  });
  ```

##### Patch Changes

- [#&#8203;475](https://github.com/Effect-TS/language-service/pull/475) [`9f2425e`](9f2425e65e) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Fix TSC patching mode to properly filter diagnostics by module name. The `reportSuggestionsAsWarningsInTsc` option now only affects the TSC module and not the TypeScript module, preventing suggestions from being incorrectly reported in non-TSC contexts.

### [`v0.53.3`](https://github.com/Effect-TS/language-service/blob/HEAD/CHANGELOG.md#0533)

[Compare Source](https://github.com/Effect-TS/language-service/compare/v0.53.2...v0.53.3)

##### Patch Changes

- [#&#8203;473](https://github.com/Effect-TS/language-service/pull/473) [`b29eca5`](b29eca54ae) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Fix memory leak in CLI diagnostics by properly disposing language services when they change between batches.

  The CLI diagnostics command now tracks the language service instance and disposes of it when a new instance is created, preventing memory accumulation during batch processing of large codebases.

- [#&#8203;474](https://github.com/Effect-TS/language-service/pull/474) [`06b9ac1`](06b9ac1439) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Fix TSC patching mode to properly enable diagnosticsName option and simplify suggestion handling.

  When using the language service in TSC patching mode, the `diagnosticsName` option is now automatically enabled to ensure diagnostic rule names are included in the output. Additionally, the handling of suggestion-level diagnostics has been simplified - when `reportSuggestionsAsWarningsInTsc` is enabled, suggestions are now converted to Message category instead of Warning category with a prefix.

  This change ensures consistent diagnostic formatting across both IDE and CLI usage modes.

- [#&#8203;471](https://github.com/Effect-TS/language-service/pull/471) [`be70748`](be70748806) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Improve CLI diagnostics output formatting by displaying rule names in a more readable format.

  The CLI now displays diagnostic rule names using the format `effect(ruleName):` instead of `TS<code>:`, making it easier to identify which Effect diagnostic rule triggered the error. Additionally, the CLI now disables the `diagnosticsName` option internally to prevent duplicate rule name display in the message text.

  Example output:

  ```
  Before: TS90001: Floating Effect detected...
  After:  effect(floatingEffect): Floating Effect detected...
  ```

### [`v0.53.2`](https://github.com/Effect-TS/language-service/blob/HEAD/CHANGELOG.md#0532)

[Compare Source](https://github.com/Effect-TS/language-service/compare/v0.53.1...v0.53.2)

##### Patch Changes

- [#&#8203;469](https://github.com/Effect-TS/language-service/pull/469) [`f27be56`](f27be56a61) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add `reportSuggestionsAsWarningsInTsc` configuration option to allow suggestions and messages to be reported as warnings in TypeScript compiler.

  When enabled, diagnostics with "suggestion" or "message" severity will be upgraded to "warning" severity with a "\[suggestion]" prefix in the message text. This is useful for CI/CD pipelines where you want to enforce suggestion-level diagnostics as warnings in the TypeScript compiler output.

  Example configuration:

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

### [`v0.53.1`](https://github.com/Effect-TS/language-service/blob/HEAD/CHANGELOG.md#0531)

[Compare Source](https://github.com/Effect-TS/language-service/compare/v0.53.0...v0.53.1)

##### Patch Changes

- [#&#8203;467](https://github.com/Effect-TS/language-service/pull/467) [`c2f6e50`](c2f6e5036b) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Fix layer graph display improvements: properly render newlines in mermaid diagrams using `<br/>` tags, and improve readability by displaying variable declaration names instead of full expressions when available.

  Example: Instead of showing the entire `pipe(Database.Default, Layer.provideMerge(UserRepository.Default))` expression in the graph node, it now displays the cleaner variable name `AppLive` when the layer is assigned to a variable.

### [`v0.53.0`](https://github.com/Effect-TS/language-service/blob/HEAD/CHANGELOG.md#0530)

[Compare Source](https://github.com/Effect-TS/language-service/compare/v0.52.1...v0.53.0)

##### Minor Changes

- [#&#8203;466](https://github.com/Effect-TS/language-service/pull/466) [`e76e9b9`](e76e9b9045) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add support for following symbols in Layer Graph visualization

  The layer graph feature now supports following symbol references to provide deeper visualization of layer dependencies. This is controlled by the new `layerGraphFollowDepth` configuration option (default: 0).

  Example:

  ```typescript
  // With layerGraphFollowDepth: 1
  export const myLayer = otherLayer.pipe(Layer.provide(DbConnection.Default));
  // Now visualizes the full dependency tree by following the 'otherLayer' reference
  ```

##### Patch Changes

- [#&#8203;464](https://github.com/Effect-TS/language-service/pull/464) [`4cbd549`](4cbd5499a5) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Fix layer graph for expression nodes not returning layers directly

### [`v0.52.1`](https://github.com/Effect-TS/language-service/blob/HEAD/CHANGELOG.md#0521)

[Compare Source](https://github.com/Effect-TS/language-service/compare/v0.52.0...v0.52.1)

##### Patch Changes

- [#&#8203;462](https://github.com/Effect-TS/language-service/pull/462) [`4931bbd`](4931bbd5d4) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Skip patching again by default, unless --force option is provided

### [`v0.52.0`](https://github.com/Effect-TS/language-service/blob/HEAD/CHANGELOG.md#0520)

[Compare Source](https://github.com/Effect-TS/language-service/compare/v0.51.1...v0.52.0)

##### Minor Changes

- [#&#8203;460](https://github.com/Effect-TS/language-service/pull/460) [`1ac81a0`](1ac81a0edb) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add new diagnostic `catchUnfailableEffect` to warn when using catch functions on effects that never fail

  This diagnostic detects when catch error handling functions are applied to effects that have a `never` error type (meaning they cannot fail). It supports all Effect catch variants:

  - `Effect.catchAll`
  - `Effect.catch`
  - `Effect.catchIf`
  - `Effect.catchSome`
  - `Effect.catchTag`
  - `Effect.catchTags`

  Example:

  ```typescript
  // Will trigger diagnostic
  const example = Effect.succeed(42).pipe(
    Effect.catchAll(() => Effect.void) // <- Warns here
  );

  // Will not trigger diagnostic
  const example2 = Effect.fail("error").pipe(
    Effect.catchAll(() => Effect.succeed(42))
  );
  ```

  The diagnostic works in both pipeable style (`Effect.succeed(x).pipe(Effect.catchAll(...))`) and data-first style (`pipe(Effect.succeed(x), Effect.catchAll(...))`), analyzing the error type at each position in the pipe chain.

- [#&#8203;458](https://github.com/Effect-TS/language-service/pull/458) [`372a9a7`](372a9a767b) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Refactor TypeParser internals to use symbol-based navigation instead of type-based navigation

  This change improves the reliability and performance of the TypeParser by switching from type-based navigation to symbol-based navigation when identifying Effect, Schema, and other Effect ecosystem APIs. The new implementation:

  - Uses TypeScript's symbol resolution APIs to accurately identify imports and references
  - Supports package name resolution to verify that identifiers actually reference the correct packages
  - Implements proper alias resolution for imported symbols
  - Adds caching for source file package information lookups
  - Provides new helper methods like `isNodeReferenceToEffectModuleApi` and `isNodeReferenceToEffectSchemaModuleApi`

  This is an internal refactoring that doesn't change the public API or functionality, but provides a more robust foundation for the language service features.

### [`v0.51.1`](https://github.com/Effect-TS/language-service/blob/HEAD/CHANGELOG.md#0511)

[Compare Source](https://github.com/Effect-TS/language-service/compare/v0.51.0...v0.51.1)

##### Patch Changes

- [#&#8203;456](https://github.com/Effect-TS/language-service/pull/456) [`ddc3da8`](ddc3da8771) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Bug fix for layer graph: properly display dependencies when they reference themselves

  The layer graph now correctly identifies and displays dependencies even when using type assignment compatibility (e.g., when a layer provides a base type and another layer requires a subtype).

### [`v0.51.0`](https://github.com/Effect-TS/language-service/blob/HEAD/CHANGELOG.md#0510)

[Compare Source](https://github.com/Effect-TS/language-service/compare/v0.50.0...v0.51.0)

##### Minor Changes

- [#&#8203;452](https://github.com/Effect-TS/language-service/pull/452) [`fb0ae8b`](fb0ae8bf7b) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add `strictEffectProvide` diagnostic to warn when using Effect.provide with Layer outside of application entry points

  This new diagnostic helps developers identify potential scope lifetime issues by detecting when `Effect.provide` is called with a Layer argument in locations that are not application entry points.

  **Example:**

  ```typescript
  // Will trigger diagnostic
  export const program = Effect.void.pipe(Effect.provide(MyService.Default));
  ```

  **Message:**

  > Effect.provide with a Layer should only be used at application entry points. If this is an entry point, you can safely disable this diagnostic. Otherwise, using Effect.provide may break scope lifetimes. Compose all layers at your entry point and provide them at once.

  **Configuration:**

  - **Default severity**: `"off"` (opt-in)
  - **Diagnostic name**: `strictEffectProvide`

  This diagnostic is disabled by default and can be enabled via tsconfig.json:

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

##### Patch Changes

- [#&#8203;455](https://github.com/Effect-TS/language-service/pull/455) [`11743b5`](11743b5144) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Bug fix for `missedPipeableOpportunity` diagnostic

### [`v0.50.0`](https://github.com/Effect-TS/language-service/blob/HEAD/CHANGELOG.md#0500)

[Compare Source](https://github.com/Effect-TS/language-service/compare/v0.49.0...v0.50.0)

##### Minor Changes

- [#&#8203;450](https://github.com/Effect-TS/language-service/pull/450) [`3994aaf`](3994aafb7d) Thanks [@&#8203;mattiamanzati](https://github.com/mattiamanzati)! - Add new diagnostic to detect nested function calls that can be converted to pipeable style

  The new `missedPipeableOpportunity` diagnostic identifies nested function calls that would be more readable when converted to Effect's pipeable style. For example:

  ```ts
  // Detected pattern:
  toString(double(addOne(5)));

  // Can be converted to:
  addOne(5).pipe(double, toString);
  ```

  This diagnostic helps maintain consistent code style and improves readability by suggesting the more idiomatic pipeable approach when multiple functions are chained together.

</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.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- 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:eyJjcmVhdGVkSW5WZXIiOiI0MS4xNjUuNCIsInVwZGF0ZWRJblZlciI6IjQxLjE2OS4xIiwidGFyZ2V0QnJhbmNoIjoibmV4dCIsImxhYmVscyI6W119-->

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

.gitea/workflows/test-build.yaml

@@ -12,7 +12,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
-          node-version: "22"
+          node-version: "24"
       - name: Clone repo
         uses: actions/checkout@v5
       - name: Install dependencies

bun.lock

@@ -5,7 +5,7 @@
       "name": "@effect-fc/monorepo",
       "devDependencies": {
         "@biomejs/biome": "^2.2.5",
-        "@effect/language-service": "^0.48.0",
+        "@effect/language-service": "^0.55.0",
         "@types/bun": "^1.2.23",
         "npm-check-updates": "^19.0.0",
         "npm-sort": "^0.0.4",
@@ -15,10 +15,7 @@
     },
     "packages/effect-fc": {
       "name": "effect-fc",
-      "version": "0.1.5",
+      "version": "0.2.0",
-      "dependencies": {
-        "@typed/async-data": "^0.13.1",
-      },
       "peerDependencies": {
         "@types/react": "^19.0.0",
         "effect": "^3.15.0",
@@ -32,9 +29,7 @@
         "@effect/platform": "^0.92.1",
         "@effect/platform-browser": "^0.72.0",
         "@radix-ui/themes": "^3.2.1",
-        "@typed/async-data": "^0.13.1",
         "@typed/id": "^0.17.2",
-        "@typed/lazy-ref": "^0.3.3",
         "effect": "^3.18.1",
         "effect-fc": "workspace:*",
         "react-icons": "^5.5.0",
@@ -135,7 +130,7 @@
 
     "@effect-fc/example": ["@effect-fc/example@workspace:packages/example"],
 
-    "@effect/language-service": ["@effect/language-service@0.48.0", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-u7DTPoGFFeDGSdomjY5C2nCGNWSisxpYSqHp3dlSG8kCZh5cay+166bveHRYvuJSJS5yomdkPTJwjwrqMmT7Og=="],
+    "@effect/language-service": ["@effect/language-service@0.55.1", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-vMKYEzX9yC31a0NYGBQR4BI009NbSn6h9g9QCVnbatkb1VPZAuKble6OVXoyBq+VuYnyCePqwsc81TyiNsqRrw=="],
 
     "@effect/platform": ["@effect/platform@0.92.1", "", { "dependencies": { "find-my-way-ts": "^0.1.6", "msgpackr": "^1.11.4", "multipasta": "^0.2.7" }, "peerDependencies": { "effect": "^3.18.1" } }, "sha512-XXWCBVwyhaKZISN7aM1fv/3fWDGyxr84ObywnUrL8aHvJLoIeskWFAP/fqw3c5MFCrJ3ZV97RWLbv6JiBQugdg=="],
 
@@ -423,12 +418,8 @@
 
     "@tanstack/virtual-file-routes": ["@tanstack/virtual-file-routes@1.132.31", "", {}, "sha512-rxS8Cm2nIXroLqkm9pE/8X2lFNuvcTIIiFi5VH4PwzvKscAuaW3YRMN1WmaGDI2mVEn+GLaoY6Kc3jOczL5i4w=="],
 
-    "@typed/async-data": ["@typed/async-data@0.13.1", "", { "dependencies": { "@typed/lazy-ref": "^0.3.2", "effect": "^3.11.9" } }, "sha512-rKv3HQtoHeGJwZpEaTL0FAEKfqHcMr/x3GtgkE01p2tJiKjq1eVaPZYpweZEEF/zUutox7DQ14oH85x+ZpPA/Q=="],
-
     "@typed/id": ["@typed/id@0.17.2", "", { "peerDependencies": { "effect": "^3.14.7" } }, "sha512-z/Z14/moeu9x45IpkGaRwuvb+CQ3s3UCc/agcpZibTz1yPb3RgSDXx4rOHIuyb6hG6oNzqe9yY4GbbMq3Hb5Ug=="],
 
-    "@typed/lazy-ref": ["@typed/lazy-ref@0.3.3", "", { "dependencies": { "effect": "^3.11.9" } }, "sha512-qJoy01/RFYwWBaWhQBzL3Ow20Q+CPybJ/KJnGNKzyDpRUFcEvd3YSQMqZjRdBZmG2wnEpjedAnlCx9ApvKJIlA=="],
-
     "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
 
     "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],

package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.5",
-    "@effect/language-service": "^0.48.0",
+    "@effect/language-service": "^0.55.0",
     "@types/bun": "^1.2.23",
     "npm-check-updates": "^19.0.0",
     "npm-sort": "^0.0.4",

packages/effect-fc/package.json

@@ -41,8 +41,5 @@
     "@types/react": "^19.0.0",
     "effect": "^3.15.0",
     "react": "^19.0.0"
-  },
-  "dependencies": {
-    "@typed/async-data": "^0.13.1"
   }
 }

packages/effect-fc/src/Component.ts

@@ -1,6 +1,6 @@
 /** biome-ignore-all lint/complexity/noBannedTypes: {} is the default type for React props */
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
-import { Context, type Duration, Effect, Effectable, Equivalence, ExecutionStrategy, Exit, Fiber, Function, HashMap, Layer, ManagedRuntime, Option, Predicate, Ref, Runtime, Scope, Tracer, type Types, type Utils } from "effect"
+import { Context, type Duration, Effect, Effectable, Equivalence, ExecutionStrategy, Exit, Fiber, Function, HashMap, Layer, ManagedRuntime, Option, Predicate, Ref, Runtime, Scope, Tracer, type Utils } from "effect"
 import * as React from "react"
 import { Memoized } from "./index.js"
 
@@ -386,9 +386,9 @@ export const withOptions: {
 export const withRuntime: {
     <P extends {}, A extends React.ReactNode, E, R>(
         context: React.Context<Runtime.Runtime<R>>,
-    ): (self: Component<P, A, E, Types.NoInfer<R>>) => (props: P) => A
+    ): (self: Component<P, A, E, Scope.Scope | NoInfer<R>>) => (props: P) => A
     <P extends {}, A extends React.ReactNode, E, R>(
-        self: Component<P, A, E, Types.NoInfer<R>>,
+        self: Component<P, A, E, Scope.Scope | NoInfer<R>>,
         context: React.Context<Runtime.Runtime<R>>,
     ): (props: P) => A
 } = Function.dual(2, <P extends {}, A extends React.ReactNode, E, R>(
@@ -402,7 +402,7 @@ export const withRuntime: {
 })
 
 
-export class ScopeMap extends Effect.Service<ScopeMap>()("effect-fc/Component/ScopeMap", {
+export class ScopeMap extends Effect.Service<ScopeMap>()("@effect-fc/Component/ScopeMap", {
     effect: Effect.bind(Effect.Do, "ref", () => Ref.make(HashMap.empty<object, ScopeMap.Entry>()))
 }) {}
 
@@ -490,7 +490,7 @@ export const useOnMount: {
 })
 
 export namespace useOnChange {
-    export type Options = useScope.Options
+    export interface Options extends useScope.Options {}
 }
 
 export const useOnChange: {
@@ -559,7 +559,7 @@ const runReactEffect = <E, R>(
 )
 
 export namespace useReactLayoutEffect {
-    export type Options = useReactEffect.Options
+    export interface Options extends useReactEffect.Options {}
 }
 
 export const useReactLayoutEffect: {
@@ -578,6 +578,18 @@ export const useReactLayoutEffect: {
     React.useLayoutEffect(() => runReactEffect(runtime, f, options), deps)
 })
 
+export const useRunSync = <R = never>(): Effect.Effect<
+    <A, E = never>(effect: Effect.Effect<A, E, Scope.Scope | R>) => A,
+    never,
+    Scope.Scope | R
+> => Effect.andThen(Effect.runtime(), Runtime.runSync)
+
+export const useRunPromise = <R = never>(): Effect.Effect<
+    <A, E = never>(effect: Effect.Effect<A, E, Scope.Scope | R>) => Promise<A>,
+    never,
+    Scope.Scope | R
+> => Effect.andThen(Effect.runtime(), context => Runtime.runPromise(context))
+
 export const useCallbackSync: {
     <Args extends unknown[], A, E, R>(
         f: (...args: Args) => Effect.Effect<A, E, R>,
@@ -613,25 +625,15 @@ export const useCallbackPromise: {
 })
 
 export namespace useContext {
-    export type Options = useScope.Options
+    export interface Options extends useOnChange.Options {}
 }
 
-export const useContext: {
+export const useContext = <ROut, E, RIn>(
-    <ROut, E, RIn>(
     layer: Layer.Layer<ROut, E, RIn>,
     options?: useContext.Options,
-    ): Effect.Effect<Context.Context<ROut>, E, RIn>
+): Effect.Effect<Context.Context<ROut>, E, Scope.Scope | RIn> => useOnChange(() => Effect.context<RIn>().pipe(
-} = Effect.fnUntraced(function* <ROut, E, RIn>(
-    layer: Layer.Layer<ROut, E, RIn>,
-    options?: useContext.Options,
-) {
-    const scope = yield* useScope([layer], options)
-
-    return yield* useOnChange(() => Effect.context<RIn>().pipe(
     Effect.map(context => ManagedRuntime.make(Layer.provide(layer, Layer.succeedContext(context)))),
     Effect.tap(runtime => Effect.addFinalizer(() => runtime.disposeEffect)),
     Effect.andThen(runtime => runtime.runtimeEffect),
     Effect.andThen(runtime => runtime.context),
-        Effect.provideService(Scope.Scope, scope),
+), [layer], options)
-    ), [scope])
-})

packages/effect-fc/src/Form.ts

@@ -1,9 +1,9 @@
-import * as AsyncData from "@typed/async-data"
 import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream } from "effect"
 import type { NoSuchElementException } from "effect/Cause"
 import * as React from "react"
 import * as Component from "./Component.js"
 import * as PropertyPath from "./PropertyPath.js"
+import * as Result from "./Result.js"
 import * as Subscribable from "./Subscribable.js"
 import * as SubscriptionRef from "./SubscriptionRef.js"
 import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
@@ -25,7 +25,7 @@ extends Pipeable.Pipeable {
     readonly encodedValueRef: SubscriptionRef.SubscriptionRef<I>
     readonly errorRef: SubscriptionRef.SubscriptionRef<Option.Option<ParseResult.ParseError>>
     readonly validationFiberRef: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.Fiber<void, never>>>
-    readonly submitStateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<SA, SE>>
+    readonly submitResultRef: SubscriptionRef.SubscriptionRef<Result.Result<SA, SE>>
 
     readonly canSubmitSubscribable: Subscribable.Subscribable<boolean>
 }
@@ -44,7 +44,7 @@ extends Pipeable.Class() implements Form<A, I, R, SA, SE, SR> {
         readonly encodedValueRef: SubscriptionRef.SubscriptionRef<I>,
         readonly errorRef: SubscriptionRef.SubscriptionRef<Option.Option<ParseResult.ParseError>>,
         readonly validationFiberRef: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.Fiber<void, never>>>,
-        readonly submitStateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<SA, SE>>,
+        readonly submitResultRef: SubscriptionRef.SubscriptionRef<Result.Result<SA, SE>>,
 
         readonly canSubmitSubscribable: Subscribable.Subscribable<boolean>,
     ) {
@@ -77,7 +77,7 @@ export const make: {
     const valueRef = yield* SubscriptionRef.make(Option.none<A>())
     const errorRef = yield* SubscriptionRef.make(Option.none<ParseResult.ParseError>())
     const validationFiberRef = yield* SubscriptionRef.make(Option.none<Fiber.Fiber<void, never>>())
-    const submitStateRef = yield* SubscriptionRef.make(AsyncData.noData<SA, SE>())
+    const submitResultRef = yield* SubscriptionRef.make<Result.Result<SA, SE>>(Result.initial())
 
     return new FormImpl(
         options.schema,
@@ -89,15 +89,15 @@ export const make: {
         yield* SubscriptionRef.make(options.initialEncodedValue),
         errorRef,
         validationFiberRef,
-        submitStateRef,
+        submitResultRef,
 
         Subscribable.map(
-            Subscribable.zipLatestAll(valueRef, errorRef, validationFiberRef, submitStateRef),
+            Subscribable.zipLatestAll(valueRef, errorRef, validationFiberRef, submitResultRef),
-            ([value, error, validationFiber, submitState]) => (
+            ([value, error, validationFiber, submitResult]) => (
                 Option.isSome(value) &&
                 Option.isNone(error) &&
                 Option.isNone(validationFiber) &&
-                !AsyncData.isLoading(submitState)
+                !(Result.isRunning(submitResult) || Result.isRefreshing(submitResult))
             ),
         ),
     )
@@ -150,20 +150,31 @@ export const run = <A, I, R, SA, SE, SR>(
 
 export const submit = <A, I, R, SA, SE, SR>(
     self: Form<A, I, R, SA, SE, SR>
-): Effect.Effect<Option.Option<AsyncData.AsyncData<SA, SE>>, NoSuchElementException, SR> => Effect.whenEffect(
+): Effect.Effect<Option.Option<Result.Result<SA, SE>>, NoSuchElementException, Scope.Scope | SR> => Effect.whenEffect(
     self.valueRef.pipe(
         Effect.andThen(identity),
-        Effect.tap(Ref.set(self.submitStateRef, AsyncData.loading())),
+        Effect.andThen(value => Result.forkEffectDequeue(
-        Effect.andThen(flow(
+            self.onSubmit(value) as Effect.Effect<SA, SE, Result.forkEffectDequeue.InputContext<SR, never>>)
-            self.onSubmit as (value: NoInfer<A>) => Effect.Effect<SA, SE | ParseResult.ParseError, SR>,
+        ),
-            Effect.tapErrorTag("ParseError", e => Ref.set(self.errorRef, Option.some(e as ParseResult.ParseError))),
+        Effect.andThen(Stream.fromQueue),
-            Effect.exit,
+        Stream.unwrap,
-            Effect.map(Exit.match({
+        Stream.runFoldEffect(
-                onSuccess: a => AsyncData.success(a),
+            Result.initial() as Result.Result<SA, SE>,
-                onFailure: e => AsyncData.failure(e as Cause.Cause<SE>),
+            (_, result) => Effect.as(Ref.set(self.submitResultRef, result), result),
-            })),
+        ),
-            Effect.tap(v => Ref.set(self.submitStateRef, v)),
+        Effect.tap(result => Result.isFailure(result)
-        )),
+            ? Option.match(
+                Chunk.findFirst(
+                    Cause.failures(result.cause as Cause.Cause<ParseResult.ParseError>),
+                    e => e._tag === "ParseError",
+                ),
+                {
+                    onSome: e => Ref.set(self.errorRef, Option.some(e)),
+                    onNone: () => Effect.void,
+                },
+            )
+            : Effect.void
+        ),
     ),
 
     self.canSubmitSubscribable.get,
@@ -198,11 +209,11 @@ export const field = <A, I, R, SA, SE, SR, const P extends PropertyPath.Paths<No
         onNone: () => Effect.succeed([]),
     })),
     Subscribable.map(self.validationFiberRef, Option.isSome),
-    Subscribable.map(self.submitStateRef, AsyncData.isLoading)
+    Subscribable.map(self.submitResultRef, result => Result.isRunning(result) || Result.isRefreshing(result)),
 )
 
 
-export const FormFieldTypeId: unique symbol = Symbol.for("effect-fc/FormField")
+export const FormFieldTypeId: unique symbol = Symbol.for("@effect-fc/Form/FormField")
 export type FormFieldTypeId = typeof FormFieldTypeId
 
 export interface FormField<in out A, in out I = A>
@@ -237,9 +248,9 @@ export const isFormField = (u: unknown): u is FormField<unknown, unknown> => Pre
 export const useSubmit = <A, I, R, SA, SE, SR>(
     self: Form<A, I, R, SA, SE, SR>
 ): Effect.Effect<
-    () => Promise<Option.Option<AsyncData.AsyncData<SA, SE>>>,
+    () => Promise<Option.Option<Result.Result<SA, SE>>>,
     never,
-    SR
+    Scope.Scope | SR
 > => Component.useCallbackPromise(() => submit(self), [self])
 
 export const useField = <A, I, R, SA, SE, SR, const P extends PropertyPath.Paths<NoInfer<I>>>(

packages/effect-fc/src/Result.ts

@@ -0,0 +1,256 @@
+import { Cause, Context, Data, Effect, Equal, Exit, Hash, Layer, Match, Option, Pipeable, Predicate, pipe, Queue, Ref, type Scope, type Subscribable, SubscriptionRef } from "effect"
+
+
+export const ResultTypeId: unique symbol = Symbol.for("@effect-fc/Result/Result")
+export type ResultTypeId = typeof ResultTypeId
+
+export type Result<A, E = never, P = never> = (
+    | Initial
+    | Running<P>
+    | Success<A>
+    | (Success<A> & Refreshing<P>)
+    | Failure<A, E>
+    | (Failure<A, E> & Refreshing<P>)
+)
+
+export namespace Result {
+    export interface Prototype extends Pipeable.Pipeable, Equal.Equal {
+        readonly [ResultTypeId]: ResultTypeId
+    }
+
+    export type Success<R extends Result<any, any, any>> = [R] extends [Result<infer A, infer _E, infer _P>] ? A : never
+    export type Failure<R extends Result<any, any, any>> = [R] extends [Result<infer _A, infer E, infer _P>] ? E : never
+    export type Progress<R extends Result<any, any, any>> = [R] extends [Result<infer _A, infer _E, infer P>] ? P : never
+}
+
+export interface Initial extends Result.Prototype {
+    readonly _tag: "Initial"
+}
+
+export interface Running<P = never> extends Result.Prototype {
+    readonly _tag: "Running"
+    readonly progress: P
+}
+
+export interface Success<A> extends Result.Prototype {
+    readonly _tag: "Success"
+    readonly value: A
+}
+
+export interface Failure<A, E = never> extends Result.Prototype {
+    readonly _tag: "Failure"
+    readonly cause: Cause.Cause<E>
+    readonly previousSuccess: Option.Option<Success<A>>
+}
+
+export interface Refreshing<P = never> {
+    readonly refreshing: true
+    readonly progress: P
+}
+
+
+const ResultPrototype = Object.freeze({
+    ...Pipeable.Prototype,
+    [ResultTypeId]: ResultTypeId,
+
+    [Equal.symbol](this: Result<any, any, any>, that: Result<any, any, any>): boolean {
+        if (this._tag !== that._tag)
+            return false
+
+        return Match.value(this).pipe(
+            Match.tag("Initial", () => true),
+            Match.tag("Running", self => Equal.equals(self.progress, (that as Running<any>).progress)),
+            Match.tag("Success", self =>
+                Equal.equals(self.value, (that as Success<any>).value) &&
+                (isRefreshing(self) ? self.refreshing : false) === (isRefreshing(that) ? that.refreshing : false) &&
+                Equal.equals(isRefreshing(self) ? self.progress : undefined, isRefreshing(that) ? that.progress : undefined)
+            ),
+            Match.tag("Failure", self =>
+                Equal.equals(self.cause, (that as Failure<any, any>).cause) &&
+                (isRefreshing(self) ? self.refreshing : false) === (isRefreshing(that) ? that.refreshing : false) &&
+                Equal.equals(isRefreshing(self) ? self.progress : undefined, isRefreshing(that) ? that.progress : undefined)
+            ),
+            Match.exhaustive,
+        )
+    },
+
+    [Hash.symbol](this: Result<any, any, any>): number {
+        const tagHash = Hash.string(this._tag)
+
+        return Match.value(this).pipe(
+            Match.tag("Initial", () => tagHash),
+            Match.tag("Running", self => Hash.combine(Hash.hash(self.progress))(tagHash)),
+            Match.tag("Success", self => pipe(tagHash,
+                Hash.combine(Hash.hash(self.value)),
+                Hash.combine(Hash.hash(isRefreshing(self) ? self.progress : undefined)),
+            )),
+            Match.tag("Failure", self => pipe(tagHash,
+                Hash.combine(Hash.hash(self.cause)),
+                Hash.combine(Hash.hash(isRefreshing(self) ? self.progress : undefined)),
+            )),
+            Match.exhaustive,
+            Hash.cached(this),
+        )
+    },
+} as const satisfies Result.Prototype)
+
+
+export const isResult = (u: unknown): u is Result<unknown, unknown, unknown> => Predicate.hasProperty(u, ResultTypeId)
+export const isInitial = (u: unknown): u is Initial => isResult(u) && u._tag === "Initial"
+export const isRunning = (u: unknown): u is Running<unknown> => isResult(u) && u._tag === "Running"
+export const isSuccess = (u: unknown): u is Success<unknown> => isResult(u) && u._tag === "Success"
+export const isFailure = (u: unknown): u is Failure<unknown, unknown> => isResult(u) && u._tag === "Failure"
+export const isRefreshing = (u: unknown): u is Refreshing<unknown> => isResult(u) && Predicate.hasProperty(u, "refreshing") && u.refreshing
+
+export const initial = (): Initial => Object.setPrototypeOf({ _tag: "Initial" }, ResultPrototype)
+export const running = <P = never>(progress?: P): Running<P> => Object.setPrototypeOf({ _tag: "Running", progress }, ResultPrototype)
+export const succeed = <A>(value: A): Success<A> => Object.setPrototypeOf({ _tag: "Success", value }, ResultPrototype)
+
+export const fail = <E, A = never>(
+    cause: Cause.Cause<E>,
+    previousSuccess?: Success<A>,
+): Failure<A, E> => Object.setPrototypeOf({
+    _tag: "Failure",
+    cause,
+    previousSuccess: Option.fromNullable(previousSuccess),
+}, ResultPrototype)
+export const refreshing = <R extends Success<any> | Failure<any, any>, P = never>(
+    result: R,
+    progress?: P,
+): Omit<R, keyof Refreshing<Result.Progress<R>>> & Refreshing<P> => Object.setPrototypeOf(
+    Object.assign({}, result, { progress }),
+    Object.getPrototypeOf(result),
+)
+
+export const fromExit = <A, E>(
+    exit: Exit.Exit<A, E>
+): Success<A> | Failure<A, E> => exit._tag === "Success"
+    ? succeed(exit.value)
+    : fail(exit.cause)
+
+export const toExit = <A, E, P>(
+    self: Result<A, E, P>
+): Exit.Exit<A, E | Cause.NoSuchElementException> => {
+    switch (self._tag) {
+        case "Success":
+            return Exit.succeed(self.value)
+        case "Failure":
+            return Exit.failCause(self.cause)
+        default:
+            return Exit.fail(new Cause.NoSuchElementException())
+    }
+}
+
+
+export interface State<A, E = never, P = never> {
+    readonly get: Effect.Effect<Result<A, E, P>>
+    readonly set: (v: Result<A, E, P>) => Effect.Effect<void>
+}
+
+export const State = <A, E = never, P = never>(): Context.Tag<State<A, E, P>, State<A, E, P>> => Context.GenericTag("@effect-fc/Result/State")
+
+export interface Progress<P = never> {
+    readonly update: <E, R>(
+        f: (previous: P) => Effect.Effect<P, E, R>
+    ) => Effect.Effect<void, PreviousResultNotRunningNorRefreshing | E, R>
+}
+
+export class PreviousResultNotRunningNorRefreshing extends Data.TaggedError("@effect-fc/Result/PreviousResultNotRunningNorRefreshing")<{
+    readonly previous: Result<unknown, unknown, unknown>
+}> {}
+
+export const Progress = <P = never>(): Context.Tag<Progress<P>, Progress<P>> => Context.GenericTag("@effect-fc/Result/Progress")
+
+export const makeProgressLayer = <A, E, P = never>(): Layer.Layer<
+    Progress<P>,
+    never,
+    State<A, E, P>
+> => Layer.effect(Progress<P>(), Effect.gen(function*() {
+    const state = yield* State<A, E, P>()
+
+    return {
+        update: <E, R>(f: (previous: P) => Effect.Effect<P, E, R>) => Effect.Do.pipe(
+            Effect.bind("previous", () => Effect.andThen(state.get, previous =>
+                isRunning(previous) || isRefreshing(previous)
+                    ? Effect.succeed(previous)
+                    : Effect.fail(new PreviousResultNotRunningNorRefreshing({ previous })),
+            )),
+            Effect.bind("progress", ({ previous }) => f(previous.progress)),
+            Effect.let("next", ({ previous, progress }) => Object.setPrototypeOf(
+                Object.assign({}, previous, { progress }),
+                Object.getPrototypeOf(previous),
+            )),
+            Effect.andThen(({ next }) => state.set(next)),
+        ),
+    }
+}))
+
+
+export namespace forkEffect {
+    export type InputContext<R, P> = R extends Progress<infer X> ? [X] extends [P] ? R : never : R
+    export type OutputContext<R> = Scope.Scope | Exclude<R, Progress<any> | Progress<never>>
+
+    export interface Options<P> {
+        readonly initialProgress?: P
+    }
+}
+
+export const forkEffect = <A, E, R, P = never>(
+    effect: Effect.Effect<A, E, forkEffect.InputContext<R, NoInfer<P>>>,
+    options?: forkEffect.Options<P>,
+): Effect.Effect<
+    Subscribable.Subscribable<Result<A, E, P>>,
+    never,
+    forkEffect.OutputContext<R>
+> => Effect.tap(
+    SubscriptionRef.make<Result<A, E, P>>(initial()),
+    ref => Effect.forkScoped(State<A, E, P>().pipe(
+        Effect.andThen(state => state.set(running(options?.initialProgress)).pipe(
+            Effect.andThen(effect),
+            Effect.onExit(exit => state.set(fromExit(exit))),
+        )),
+        Effect.provide(Layer.empty.pipe(
+            Layer.provideMerge(makeProgressLayer<A, E, P>()),
+            Layer.provideMerge(Layer.succeed(State<A, E, P>(), {
+                get: ref,
+                set: v => Ref.set(ref, v),
+            })),
+        )),
+    )),
+) as Effect.Effect<Subscribable.Subscribable<Result<A, E, P>>, never, Scope.Scope>
+
+export namespace forkEffectDequeue {
+    export type InputContext<R, P> = forkEffect.InputContext<R, P>
+    export type OutputContext<R> = forkEffect.OutputContext<R>
+    export interface Options<P> extends forkEffect.Options<P> {}
+}
+
+export const forkEffectDequeue = <A, E, R, P = never>(
+    effect: Effect.Effect<A, E, forkEffectDequeue.InputContext<R, NoInfer<P>>>,
+    options?: forkEffectDequeue.Options<P>,
+): Effect.Effect<
+    Queue.Dequeue<Result<A, E, P>>,
+    never,
+    forkEffectDequeue.OutputContext<R>
+> => Effect.all([
+    Ref.make<Result<A, E, P>>(initial()),
+    Queue.unbounded<Result<A, E, P>>(),
+]).pipe(
+    Effect.tap(([ref, queue]) => Effect.forkScoped(State<A, E, P>().pipe(
+        Effect.andThen(state => state.set(running(options?.initialProgress)).pipe(
+            Effect.andThen(effect),
+            Effect.onExit(exit => Effect.andThen(
+                state.set(fromExit(exit)),
+                Effect.forkScoped(Queue.shutdown(queue)),
+            )),
+        )),
+        Effect.provide(Layer.empty.pipe(
+            Layer.provideMerge(makeProgressLayer<A, E, P>()),
+            Layer.provideMerge(Layer.succeed(State<A, E, P>(), {
+                get: ref,
+                set: v => Effect.andThen(Ref.set(ref, v), Queue.offer(queue, v))
+            })),
+        )),
+    ))),
+    Effect.map(([, queue]) => queue),
+) as Effect.Effect<Queue.Dequeue<Result<A, E, P>>, never, Scope.Scope>

packages/effect-fc/src/Subscribable.ts

@@ -1,4 +1,4 @@
-import { Effect, Equivalence, pipe, type Scope, Stream, Subscribable } from "effect"
+import { Effect, Equivalence, type Scope, Stream, Subscribable } from "effect"
 import * as React from "react"
 import * as Component from "./Component.js"
 
@@ -16,30 +16,40 @@ export const zipLatestAll = <const T extends readonly Subscribable.Subscribable<
     changes: Stream.zipLatestAll(...elements.map(v => v.changes)),
 }) as any
 
+export 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 }
+
+    export interface Options<A> {
+        readonly equivalence?: Equivalence.Equivalence<A>
+    }
+}
+
 export const useSubscribables: {
     <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
-        ...elements: T
+        elements: T,
+        options?: useSubscribables.Options<useSubscribables.Success<NoInfer<T>>>,
     ): Effect.Effect<
-        [T[number]] extends [never]
+        useSubscribables.Success<T>,
-            ? never
-            : { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never },
         [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer E, infer _R> ? E : never,
-        ([T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer R> ? R : never) | Scope.Scope
+        Scope.Scope | ([T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer R> ? R : never)
     >
 } = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
-    ...elements: T
+    elements: T,
+    options?: useSubscribables.Options<useSubscribables.Success<NoInfer<T>>>,
 ) {
     const [reactStateValue, setReactStateValue] = React.useState(
         yield* Component.useOnMount(() => Effect.all(elements.map(v => v.get)))
     )
 
-    yield* Component.useReactEffect(() => Effect.forkScoped(pipe(
+    yield* Component.useReactEffect(() => Stream.zipLatestAll(...elements.map(ref => ref.changes)).pipe(
-        elements.map(ref => Stream.changesWith(ref.changes, Equivalence.strict())),
+        Stream.changesWith((options?.equivalence as Equivalence.Equivalence<any[]> | undefined) ?? Equivalence.array(Equivalence.strict())),
-        streams => Stream.zipLatestAll(...streams),
         Stream.runForEach(v =>
             Effect.sync(() => setReactStateValue(v))
         ),
-    )), elements)
+        Effect.forkScoped,
+    ), elements)
 
     return reactStateValue as any
 })

packages/effect-fc/src/SubscriptionRef.ts

@@ -4,16 +4,26 @@ import * as Component from "./Component.js"
 import * as SetStateAction from "./SetStateAction.js"
 
 
+export namespace useSubscriptionRefState {
+    export interface Options<A> {
+        readonly equivalence?: Equivalence.Equivalence<A>
+    }
+}
+
 export const useSubscriptionRefState: {
     <A>(
-        ref: SubscriptionRef.SubscriptionRef<A>
+        ref: SubscriptionRef.SubscriptionRef<A>,
+        options?: useSubscriptionRefState.Options<NoInfer<A>>,
     ): Effect.Effect<readonly [A, React.Dispatch<React.SetStateAction<A>>], never, Scope.Scope>
-} = Effect.fnUntraced(function* <A>(ref: SubscriptionRef.SubscriptionRef<A>) {
+} = Effect.fnUntraced(function* <A>(
+    ref: SubscriptionRef.SubscriptionRef<A>,
+    options?: useSubscriptionRefState.Options<NoInfer<A>>,
+) {
     const [reactStateValue, setReactStateValue] = React.useState(yield* Component.useOnMount(() => ref))
 
     yield* Component.useReactEffect(() => Effect.forkScoped(
         Stream.runForEach(
-            Stream.changesWith(ref.changes, Equivalence.strict()),
+            Stream.changesWith(ref.changes, options?.equivalence ?? Equivalence.strict()),
             v => Effect.sync(() => setReactStateValue(v)),
         )
     ), [ref])
@@ -28,14 +38,23 @@ export const useSubscriptionRefState: {
     return [reactStateValue, setValue]
 })
 
+export namespace useSubscriptionRefFromState {
+    export interface Options<A> {
+        readonly equivalence?: Equivalence.Equivalence<A>
+    }
+}
+
 export const useSubscriptionRefFromState: {
-    <A>(state: readonly [A, React.Dispatch<React.SetStateAction<A>>]): Effect.Effect<SubscriptionRef.SubscriptionRef<A>, never, Scope.Scope>
+    <A>(
-} = Effect.fnUntraced(function*([value, setValue]) {
+        state: readonly [A, React.Dispatch<React.SetStateAction<A>>],
+        options?: useSubscriptionRefFromState.Options<NoInfer<A>>,
+    ): Effect.Effect<SubscriptionRef.SubscriptionRef<A>, never, Scope.Scope>
+} = Effect.fnUntraced(function*([value, setValue], options) {
     const ref = yield* Component.useOnChange(() => Effect.tap(
         SubscriptionRef.make(value),
         ref => Effect.forkScoped(
             Stream.runForEach(
-                Stream.changesWith(ref.changes, Equivalence.strict()),
+                Stream.changesWith(ref.changes, options?.equivalence ?? Equivalence.strict()),
                 v => Effect.sync(() => setValue(v)),
             )
         ),

packages/effect-fc/src/SubscriptionSubRef.ts

@@ -2,7 +2,7 @@ import { Chunk, Effect, Effectable, Option, Predicate, Readable, Ref, Stream, Su
 import * as PropertyPath from "./PropertyPath.js"
 
 
-export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("effect-fc/SubscriptionSubRef/SubscriptionSubRef")
+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>>

packages/effect-fc/src/index.ts

@@ -4,6 +4,7 @@ export * as Form from "./Form.js"
 export * as Memoized from "./Memoized.js"
 export * as PropertyPath from "./PropertyPath.js"
 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 Subscribable from "./Subscribable.js"

packages/example/package.json

@@ -26,12 +26,10 @@
     "vite": "^7.1.8"
   },
   "dependencies": {
-    "@effect/platform": "^0.92.1",
+    "@effect/platform": "^0.93.0",
-    "@effect/platform-browser": "^0.72.0",
+    "@effect/platform-browser": "^0.73.0",
     "@radix-ui/themes": "^3.2.1",
-    "@typed/async-data": "^0.13.1",
     "@typed/id": "^0.17.2",
-    "@typed/lazy-ref": "^0.3.3",
     "effect": "^3.18.1",
     "effect-fc": "workspace:*",
     "react-icons": "^5.5.0"

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

@@ -28,11 +28,11 @@ export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInp
         // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
         : { optional: false, ...yield* Form.useInput(props.field, props) }
 
-    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables(
+    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables([
         props.field.issuesSubscribable,
         props.field.isValidatingSubscribable,
         props.field.isSubmittingSubscribable,
-    )
+    ])
 
     return (
         <Flex direction="column" gap="1">

packages/example/src/routeTree.gen.ts

@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as ResultRouteImport } from './routes/result'
 import { Route as FormRouteImport } from './routes/form'
 import { Route as BlankRouteImport } from './routes/blank'
 import { Route as IndexRouteImport } from './routes/index'
@@ -16,6 +17,11 @@ import { Route as DevMemoRouteImport } from './routes/dev/memo'
 import { Route as DevContextRouteImport } from './routes/dev/context'
 import { Route as DevAsyncRenderingRouteImport } from './routes/dev/async-rendering'
 
+const ResultRoute = ResultRouteImport.update({
+  id: '/result',
+  path: '/result',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const FormRoute = FormRouteImport.update({
   id: '/form',
   path: '/form',
@@ -51,6 +57,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
+  '/result': typeof ResultRoute
   '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
@@ -59,6 +66,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
+  '/result': typeof ResultRoute
   '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
@@ -68,6 +76,7 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
+  '/result': typeof ResultRoute
   '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
@@ -78,6 +87,7 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/form'
+    | '/result'
     | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
@@ -86,6 +96,7 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/form'
+    | '/result'
     | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
@@ -94,6 +105,7 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/form'
+    | '/result'
     | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
@@ -103,6 +115,7 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   BlankRoute: typeof BlankRoute
   FormRoute: typeof FormRoute
+  ResultRoute: typeof ResultRoute
   DevAsyncRenderingRoute: typeof DevAsyncRenderingRoute
   DevContextRoute: typeof DevContextRoute
   DevMemoRoute: typeof DevMemoRoute
@@ -110,6 +123,13 @@ export interface RootRouteChildren {
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/result': {
+      id: '/result'
+      path: '/result'
+      fullPath: '/result'
+      preLoaderRoute: typeof ResultRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/form': {
       id: '/form'
       path: '/form'
@@ -159,6 +179,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   BlankRoute: BlankRoute,
   FormRoute: FormRoute,
+  ResultRoute: ResultRoute,
   DevAsyncRenderingRoute: DevAsyncRenderingRoute,
   DevContextRoute: DevContextRoute,
   DevMemoRoute: DevMemoRoute,

packages/example/src/routes/form.tsx

@@ -1,6 +1,6 @@
-import { Button, Container, Flex } from "@radix-ui/themes"
+import { Button, Container, Flex, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Console, Effect, Option, ParseResult, Schema } from "effect"
+import { Console, Effect, Match, Option, ParseResult, Schema } from "effect"
 import { Component, Form, Subscribable } from "effect-fc"
 import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
@@ -39,19 +39,22 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
         ),
 
         initialEncodedValue: { email: "", password: "", birth: Option.none() },
-        onSubmit: v => Effect.sleep("500 millis").pipe(
+        onSubmit: Effect.fnUntraced(function*(v) {
-            Effect.andThen(Console.log(v)),
+            yield* Effect.sleep("500 millis")
-            Effect.andThen(Effect.sync(() => alert("Done!"))),
+            return v
-        ),
+        }),
         debounce: "500 millis",
     })
 }) {}
 
 class RegisterFormView extends Component.makeUntraced("RegisterFormView")(function*() {
     const form = yield* RegisterForm
-    const submit = yield* Form.useSubmit(form)
+    const [canSubmit, submitResult] = yield* Subscribable.useSubscribables([
-    const [canSubmit] = yield* Subscribable.useSubscribables(form.canSubmitSubscribable)
+        form.canSubmitSubscribable,
+        form.submitResultRef,
+    ])
 
+    const runPromise = yield* Component.useRunPromise()
     const TextFieldFormInputFC = yield* TextFieldFormInput
 
     yield* Component.useOnMount(() => Effect.gen(function*() {
@@ -64,7 +67,7 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
         <Container width="300">
             <form onSubmit={e => {
                 e.preventDefault()
-                void submit()
+                void runPromise(Form.submit(form))
             }}>
                 <Flex direction="column" gap="2">
                     <TextFieldFormInputFC
@@ -85,6 +88,14 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
                     <Button disabled={!canSubmit}>Submit</Button>
                 </Flex>
             </form>
+
+            {Match.value(submitResult).pipe(
+                Match.tag("Initial", () => <></>),
+                Match.tag("Running", () => <Text>Submitting...</Text>),
+                Match.tag("Success", () => <Text>Submitted successfully!</Text>),
+                Match.tag("Failure", e => <Text>Error: {e.cause.toString()}</Text>),
+                Match.exhaustive,
+            )}
         </Container>
     )
 }) {}

packages/example/src/routes/result.tsx

@@ -0,0 +1,45 @@
+import { HttpClient } from "@effect/platform"
+import { Container, Heading, Text } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Effect, Match, Schema } from "effect"
+import { Component, Result, Subscribable } from "effect-fc"
+import { runtime } from "@/runtime"
+
+
+const Post = Schema.Struct({
+    userId: Schema.Int,
+    id: Schema.Int,
+    title: Schema.String,
+    body: Schema.String,
+})
+
+const ResultView = Component.makeUntraced("Result")(function*() {
+    const resultSubscribable = yield* Component.useOnMount(() => HttpClient.HttpClient.pipe(
+        Effect.andThen(client => client.get("https://jsonplaceholder.typicode.com/posts/1")),
+        Effect.andThen(response => response.json),
+        Effect.andThen(Schema.decodeUnknown(Post)),
+        Effect.tap(Effect.sleep("250 millis")),
+        Result.forkEffect,
+    ))
+    const [result] = yield* Subscribable.useSubscribables([resultSubscribable])
+
+    return (
+        <Container>
+            {Match.value(result).pipe(
+                Match.tag("Running", () => <Text>Loading...</Text>),
+                Match.tag("Success", result => <>
+                    <Heading>{result.value.title}</Heading>
+                    <Text>{result.value.body}</Text>
+                </>),
+                Match.tag("Failure", result =>
+                    <Text>An error has occured: {result.cause.toString()}</Text>
+                ),
+                Match.orElse(() => <></>),
+            )}
+        </Container>
+    )
+})
+
+export const Route = createFileRoute("/result")({
+    component: Component.withRuntime(ResultView, runtime.context)
+})

packages/example/src/todo/Todo.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Chunk, Effect, Match, Option, Ref, Runtime, Schema, Stream } from "effect"
+import { Chunk, type DateTime, Effect, Match, Option, Ref, Schema, Stream } from "effect"
 import { Component, Form, Subscribable } from "effect-fc"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
@@ -31,7 +31,6 @@ export type TodoProps = (
 )
 
 export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoProps) {
-    const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
     const [
@@ -78,12 +77,14 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
         ] as const
     }), [props._tag, props._tag === "edit" ? props.id : undefined])
 
-    const [index, size, canSubmit] = yield* Subscribable.useSubscribables(
+    const [index, size, canSubmit] = yield* Subscribable.useSubscribables([
         indexRef,
         state.sizeSubscribable,
         form.canSubmitSubscribable,
-    )
+    ])
-    const submit = yield* Form.useSubmit(form)
+
+    const runSync = yield* Component.useRunSync()
+    const runPromise = yield* Component.useRunPromise<DateTime.CurrentTimeZone>()
     const TextFieldFormInputFC = yield* TextFieldFormInput
 
 
@@ -102,7 +103,7 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
                         />
 
                         {props._tag === "new" &&
-                            <Button disabled={!canSubmit} onClick={() => submit()}>
+                            <Button disabled={!canSubmit} onClick={() => void runPromise(Form.submit(form))}>
                                 Add
                             </Button>
                         }
@@ -114,19 +115,19 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
                 <Flex direction="column" justify="center" align="center" gap="1">
                     <IconButton
                         disabled={index <= 0}
-                        onClick={() => Runtime.runSync(runtime)(state.moveLeft(props.id))}
+                        onClick={() => runSync(state.moveLeft(props.id))}
                     >
                         <FaArrowUp />
                     </IconButton>
 
                     <IconButton
                         disabled={index >= size - 1}
-                        onClick={() => Runtime.runSync(runtime)(state.moveRight(props.id))}
+                        onClick={() => runSync(state.moveRight(props.id))}
                     >
                         <FaArrowDown />
                     </IconButton>
 
-                    <IconButton onClick={() => Runtime.runSync(runtime)(state.remove(props.id))}>
+                    <IconButton onClick={() => runSync(state.remove(props.id))}>
                         <FaDeleteLeft />
                     </IconButton>
                 </Flex>

packages/example/src/todo/Todos.tsx

@@ -7,7 +7,7 @@ import { TodosState } from "./TodosState.service"
 
 export class Todos extends Component.makeUntraced("Todos")(function*() {
     const state = yield* TodosState
-    const [todos] = yield* Subscribable.useSubscribables(state.ref)
+    const [todos] = yield* Subscribable.useSubscribables([state.ref])
 
     yield* Component.useOnMount(() => Effect.andThen(
         Console.log("Todos mounted"),