@thomasfosterau/effect-svelte 0.1.0 → 0.2.0

package/dist/await.svelte.d.ts

@@ -0,0 +1,45 @@
+import { Effect } from "effect";
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
+
+//#region src/await.svelte.d.ts
+interface UseQueryPromiseReturn<A, E> {
+  /** The underlying query result state (same as {@link useQuery}). */
+  readonly current: AsyncResult.AsyncResult<A, E>;
+  /**
+   * A `Promise` reflecting `current`, for use with Svelte's `{#await}` (or
+   * `<svelte:boundary>`). Its identity is stable until the result transitions:
+   * pending while loading, resolved with the (possibly stale) value, rejected
+   * on failure.
+   */
+  readonly promise: Promise<A>;
+  /** Re-run the effect. A new `promise` is produced as the result transitions. */
+  readonly refetch: () => void;
+}
+/**
+ * Run an effect and bridge its result to Svelte 5's native async, so you can
+ * render it with an `{#await}` block instead of `AsyncResult.match`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useQueryPromise } from '@thomasfosterau/effect-svelte';
+ *   import { Effect } from 'effect';
+ *
+ *   const user = useQueryPromise(fetchUser(1));
+ * </script>
+ *
+ * {#await user.promise}
+ *   <p>Loading…</p>
+ * {:then value}
+ *   <p>{value.name}</p>
+ * {:catch error}
+ *   <p>Failed: {error.message}</p>
+ * {/await}
+ *
+ * <button onclick={user.refetch}>Reload</button>
+ * ```
+ */
+declare function useQueryPromise<A, E, R>(effect: Effect.Effect<A, E, R>): UseQueryPromiseReturn<A, E>;
+//#endregion
+export { UseQueryPromiseReturn, useQueryPromise };
+//# sourceMappingURL=await.svelte.d.ts.map

package/dist/await.svelte.js

@@ -0,0 +1,44 @@
+import { useQuery } from "./query.svelte.js";
+import { resultToPromise } from "./internal/await.js";
+//#region src/await.svelte.ts
+/**
+* Run an effect and bridge its result to Svelte 5's native async, so you can
+* render it with an `{#await}` block instead of `AsyncResult.match`.
+*
+* @example
+* ```svelte
+* <script lang="ts">
+*   import { useQueryPromise } from '@thomasfosterau/effect-svelte';
+*   import { Effect } from 'effect';
+*
+*   const user = useQueryPromise(fetchUser(1));
+* <\/script>
+*
+* {#await user.promise}
+*   <p>Loading…</p>
+* {:then value}
+*   <p>{value.name}</p>
+* {:catch error}
+*   <p>Failed: {error.message}</p>
+* {/await}
+*
+* <button onclick={user.refetch}>Reload</button>
+* ```
+*/
+function useQueryPromise(effect) {
+	const query = useQuery(effect);
+	const promise = $derived(resultToPromise(query.current));
+	return {
+		get current() {
+			return query.current;
+		},
+		get promise() {
+			return promise;
+		},
+		refetch: query.refetch
+	};
+}
+//#endregion
+export { useQueryPromise };
+
+//# sourceMappingURL=await.svelte.js.map

package/dist/await.svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"await.svelte.js","names":[],"sources":["../src/await.svelte.ts"],"sourcesContent":["import type { Effect } from \"effect\";\nimport type * as AsyncResult from \"effect/unstable/reactivity/AsyncResult\";\nimport { resultToPromise } from \"./internal/await.js\";\nimport { useQuery } from \"./query.svelte.js\";\n\nexport interface UseQueryPromiseReturn<A, E> {\n  /** The underlying query result state (same as {@link useQuery}). */\n  readonly current: AsyncResult.AsyncResult<A, E>;\n\n  /**\n   * A `Promise` reflecting `current`, for use with Svelte's `{#await}` (or\n   * `<svelte:boundary>`). Its identity is stable until the result transitions:\n   * pending while loading, resolved with the (possibly stale) value, rejected\n   * on failure.\n   */\n  readonly promise: Promise<A>;\n\n  /** Re-run the effect. A new `promise` is produced as the result transitions. */\n  readonly refetch: () => void;\n}\n\n/**\n * Run an effect and bridge its result to Svelte 5's native async, so you can\n * render it with an `{#await}` block instead of `AsyncResult.match`.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   import { useQueryPromise } from '@thomasfosterau/effect-svelte';\n *   import { Effect } from 'effect';\n *\n *   const user = useQueryPromise(fetchUser(1));\n * </script>\n *\n * {#await user.promise}\n *   <p>Loading…</p>\n * {:then value}\n *   <p>{value.name}</p>\n * {:catch error}\n *   <p>Failed: {error.message}</p>\n * {/await}\n *\n * <button onclick={user.refetch}>Reload</button>\n * ```\n */\nexport function useQueryPromise<A, E, R>(\n  effect: Effect.Effect<A, E, R>,\n): UseQueryPromiseReturn<A, E> {\n  const query = useQuery(effect);\n\n  // Recompute (and only then hand `{#await}` a new promise) when the underlying\n  // result transitions — not on every unrelated re-render.\n  const promise = $derived(resultToPromise(query.current));\n\n  return {\n    get current() {\n      return query.current;\n    },\n    get promise() {\n      return promise;\n    },\n    refetch: query.refetch,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,gBACd,QAC6B;CAC7B,MAAM,QAAQ,SAAS,MAAM;CAI7B,MAAM,UAAU,SAAS,gBAAgB,MAAM,OAAO,CAAC;CAEvD,OAAO;EACL,IAAI,UAAU;GACZ,OAAO,MAAM;EACf;EACA,IAAI,UAAU;GACZ,OAAO;EACT;EACA,SAAS,MAAM;CACjB;AACF"}

package/dist/derived.svelte.d.ts

@@ -1,7 +1,19 @@
-import { Effect } from "effect";
+import { Duration, Effect } from "effect";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
 
 //#region src/derived.svelte.d.ts
+interface UseDerivedOptions {
+  /**
+   * Debounce re-runs by this duration: when a dependency changes, wait this
+   * long before running, and if another change arrives within the window,
+   * restart the wait. The previous value stays visible during the window (the
+   * result only flips to `waiting` once the run actually starts).
+   *
+   * Accepts any Effect `Duration.Input` (e.g. `"300 millis"`, `500`,
+   * `Duration.seconds(1)`).
+   */
+  readonly debounce?: Duration.Input;
+}
 interface DerivedReturn<A, E> {
   /**
    * The current result. While re-running after a dependency change, the
@@ -14,30 +26,32 @@ interface DerivedReturn<A, E> {
  * The function parameter is called inside $effect, so it automatically tracks dependencies.
  * When dependencies change, the previous fiber is interrupted and a new one starts.
  *
+ * Pass `{ debounce }` to coalesce rapid dependency changes (e.g. a search box):
+ * interrupting the previous fiber cancels its pending debounce sleep, so only
+ * the last change in a burst actually runs.
+ *
  * @example
  * ```svelte
  * <script lang="ts">
  *   import { useDerived, AsyncResult } from '@thomasfosterau/effect-svelte';
  *   import { Effect } from 'effect';
  *
- *   let userId = $state(1);
+ *   let query = $state('');
  *
- *   const user = useDerived(() =>
- *     Effect.gen(function* () {
- *       const response = yield* fetchUser(userId);
- *       return response;
- *     })
+ *   const results = useDerived(
+ *     () => search(query),
+ *     { debounce: '300 millis' },
  *   );
  * </script>
  *
- * <button onclick={() => userId++}>Next User</button>
+ * <input bind:value={query} />
  *
- * {#if AsyncResult.isSuccess(user.current)}
- *   <p>User: {user.current.value.name}</p>
+ * {#if AsyncResult.isSuccess(results.current)}
+ *   <ul>{#each results.current.value as r}<li>{r}</li>{/each}</ul>
  * {/if}
  * ```
  */
-declare function useDerived<A, E, R>(fn: () => Effect.Effect<A, E, R>): DerivedReturn<A, E>;
+declare function useDerived<A, E, R>(fn: () => Effect.Effect<A, E, R>, options?: UseDerivedOptions): DerivedReturn<A, E>;
 //#endregion
-export { DerivedReturn, useDerived };
+export { DerivedReturn, UseDerivedOptions, useDerived };
 //# sourceMappingURL=derived.svelte.d.ts.map

package/dist/derived.svelte.js

@@ -8,38 +8,48 @@ import { Effect, Fiber } from "effect";
 * The function parameter is called inside $effect, so it automatically tracks dependencies.
 * When dependencies change, the previous fiber is interrupted and a new one starts.
 *
+* Pass `{ debounce }` to coalesce rapid dependency changes (e.g. a search box):
+* interrupting the previous fiber cancels its pending debounce sleep, so only
+* the last change in a burst actually runs.
+*
 * @example
 * ```svelte
 * <script lang="ts">
 *   import { useDerived, AsyncResult } from '@thomasfosterau/effect-svelte';
 *   import { Effect } from 'effect';
 *
-*   let userId = $state(1);
+*   let query = $state('');
 *
-*   const user = useDerived(() =>
-*     Effect.gen(function* () {
-*       const response = yield* fetchUser(userId);
-*       return response;
-*     })
+*   const results = useDerived(
+*     () => search(query),
+*     { debounce: '300 millis' },
 *   );
 * <\/script>
 *
-* <button onclick={() => userId++}>Next User</button>
+* <input bind:value={query} />
 *
-* {#if AsyncResult.isSuccess(user.current)}
-*   <p>User: {user.current.value.name}</p>
+* {#if AsyncResult.isSuccess(results.current)}
+*   <ul>{#each results.current.value as r}<li>{r}</li>{/each}</ul>
 * {/if}
 * ```
 */
-function useDerived(fn) {
+function useDerived(fn, options = {}) {
+	const { debounce } = options;
 	const runtime = getRuntimeContext();
 	const state = makeResult();
 	let currentFiber = null;
 	$effect(() => {
 		if (currentFiber !== null) interruptFiber(currentFiber);
 		const effect = fn();
-		state.startWaiting();
-		const runningFiber = runFork(runtime)(effect);
+		let runningFiber;
+		if (debounce === void 0) {
+			state.startWaiting();
+			runningFiber = runFork(runtime)(effect);
+		} else runningFiber = runFork(runtime)(Effect.gen(function* () {
+			yield* Effect.sleep(debounce);
+			yield* Effect.sync(() => state.startWaiting());
+			return yield* effect;
+		}));
 		currentFiber = runningFiber;
 		runFork(runtime)(Effect.gen(function* () {
 			const exit = yield* Fiber.await(runningFiber);

package/dist/derived.svelte.js.map

@@ -1 +1 @@
-{"version":3,"file":"derived.svelte.js","names":["getRuntime"],"sources":["../src/derived.svelte.ts"],"sourcesContent":["import { Effect, Fiber } from \"effect\";\nimport type * as AsyncResult from \"effect/unstable/reactivity/AsyncResult\";\nimport { getRuntime } from \"./context.svelte.js\";\nimport { interruptFiber, runFork, type RuntimeLike } from \"./internal/run.js\";\nimport { makeResult } from \"./internal/result.svelte.js\";\n\nexport interface DerivedReturn<A, E> {\n  /**\n   * The current result. While re-running after a dependency change, the\n   * previous value is kept as a waiting `Success` (stale-while-revalidate).\n   */\n  readonly current: AsyncResult.AsyncResult<A, E>;\n}\n\n/**\n * Re-run an effect whenever reactive dependencies change.\n * The function parameter is called inside $effect, so it automatically tracks dependencies.\n * When dependencies change, the previous fiber is interrupted and a new one starts.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   import { useDerived, AsyncResult } from '@thomasfosterau/effect-svelte';\n *   import { Effect } from 'effect';\n *\n *   let userId = $state(1);\n *\n *   const user = useDerived(() =>\n *     Effect.gen(function* () {\n *       const response = yield* fetchUser(userId);\n *       return response;\n *     })\n *   );\n * </script>\n *\n * <button onclick={() => userId++}>Next User</button>\n *\n * {#if AsyncResult.isSuccess(user.current)}\n *   <p>User: {user.current.value.name}</p>\n * {/if}\n * ```\n */\nexport function useDerived<A, E, R>(fn: () => Effect.Effect<A, E, R>): DerivedReturn<A, E> {\n  const runtime = getRuntime() as RuntimeLike<R>;\n\n  const state = makeResult<A, E>();\n  let currentFiber: Fiber.Fiber<A, E> | null = null;\n\n  $effect(() => {\n    // Interrupt previous fiber if it exists\n    if (currentFiber !== null) {\n      interruptFiber(currentFiber);\n    }\n\n    // Get the effect (this tracks reactive dependencies)\n    const effect = fn();\n\n    // Mark as waiting, preserving the previous value if there is one.\n    state.startWaiting();\n\n    // Run the effect and capture the fiber reference\n    const runningFiber = runFork(runtime)(effect);\n    currentFiber = runningFiber;\n\n    // Settle the result when the fiber completes, unless deps changed first.\n    runFork(runtime)(\n      Effect.gen(function* () {\n        const exit = yield* Fiber.await(runningFiber);\n        if (currentFiber === runningFiber) {\n          state.settle(exit);\n          currentFiber = null;\n        }\n      }),\n    );\n\n    // Cleanup: interrupt the fiber when dependencies change or component unmounts\n    return () => {\n      if (currentFiber !== null) {\n        interruptFiber(currentFiber);\n        currentFiber = null;\n      }\n    };\n  });\n\n  return {\n    get current() {\n      return state.current;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,WAAoB,IAAuD;CACzF,MAAM,UAAUA,kBAAW;CAE3B,MAAM,QAAQ,WAAiB;CAC/B,IAAI,eAAyC;CAE7C,cAAc;EAEZ,IAAI,iBAAiB,MACnB,eAAe,YAAY;EAI7B,MAAM,SAAS,GAAG;EAGlB,MAAM,aAAa;EAGnB,MAAM,eAAe,QAAQ,OAAO,EAAE,MAAM;EAC5C,eAAe;EAGf,QAAQ,OAAO,EACb,OAAO,IAAI,aAAa;GACtB,MAAM,OAAO,OAAO,MAAM,MAAM,YAAY;GAC5C,IAAI,iBAAiB,cAAc;IACjC,MAAM,OAAO,IAAI;IACjB,eAAe;GACjB;EACF,CAAC,CACH;EAGA,aAAa;GACX,IAAI,iBAAiB,MAAM;IACzB,eAAe,YAAY;IAC3B,eAAe;GACjB;EACF;CACF,CAAC;CAED,OAAO,EACL,IAAI,UAAU;EACZ,OAAO,MAAM;CACf,EACF;AACF"}
+{"version":3,"file":"derived.svelte.js","names":["getRuntime"],"sources":["../src/derived.svelte.ts"],"sourcesContent":["import { Duration, Effect, Fiber } from \"effect\";\nimport type * as AsyncResult from \"effect/unstable/reactivity/AsyncResult\";\nimport { getRuntime } from \"./context.svelte.js\";\nimport { interruptFiber, runFork, type RuntimeLike } from \"./internal/run.js\";\nimport { makeResult } from \"./internal/result.svelte.js\";\n\nexport interface UseDerivedOptions {\n  /**\n   * Debounce re-runs by this duration: when a dependency changes, wait this\n   * long before running, and if another change arrives within the window,\n   * restart the wait. The previous value stays visible during the window (the\n   * result only flips to `waiting` once the run actually starts).\n   *\n   * Accepts any Effect `Duration.Input` (e.g. `\"300 millis\"`, `500`,\n   * `Duration.seconds(1)`).\n   */\n  readonly debounce?: Duration.Input;\n}\n\nexport interface DerivedReturn<A, E> {\n  /**\n   * The current result. While re-running after a dependency change, the\n   * previous value is kept as a waiting `Success` (stale-while-revalidate).\n   */\n  readonly current: AsyncResult.AsyncResult<A, E>;\n}\n\n/**\n * Re-run an effect whenever reactive dependencies change.\n * The function parameter is called inside $effect, so it automatically tracks dependencies.\n * When dependencies change, the previous fiber is interrupted and a new one starts.\n *\n * Pass `{ debounce }` to coalesce rapid dependency changes (e.g. a search box):\n * interrupting the previous fiber cancels its pending debounce sleep, so only\n * the last change in a burst actually runs.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   import { useDerived, AsyncResult } from '@thomasfosterau/effect-svelte';\n *   import { Effect } from 'effect';\n *\n *   let query = $state('');\n *\n *   const results = useDerived(\n *     () => search(query),\n *     { debounce: '300 millis' },\n *   );\n * </script>\n *\n * <input bind:value={query} />\n *\n * {#if AsyncResult.isSuccess(results.current)}\n *   <ul>{#each results.current.value as r}<li>{r}</li>{/each}</ul>\n * {/if}\n * ```\n */\nexport function useDerived<A, E, R>(\n  fn: () => Effect.Effect<A, E, R>,\n  options: UseDerivedOptions = {},\n): DerivedReturn<A, E> {\n  const { debounce } = options;\n  const runtime = getRuntime() as RuntimeLike<R>;\n\n  const state = makeResult<A, E>();\n  let currentFiber: Fiber.Fiber<A, E> | null = null;\n\n  $effect(() => {\n    // Interrupt previous fiber if it exists (this also cancels a pending\n    // debounce sleep, which is what makes debouncing work).\n    if (currentFiber !== null) {\n      interruptFiber(currentFiber);\n    }\n\n    // Get the effect (this tracks reactive dependencies).\n    const effect = fn();\n\n    let runningFiber: Fiber.Fiber<A, E>;\n    if (debounce === undefined) {\n      // Mark as waiting, preserving the previous value if there is one.\n      state.startWaiting();\n      runningFiber = runFork(runtime)(effect);\n    } else {\n      // Wait out the debounce window first; only then flip to waiting and run,\n      // so the previous value stays visible until the run actually begins.\n      runningFiber = runFork(runtime)(\n        Effect.gen(function* () {\n          yield* Effect.sleep(debounce);\n          yield* Effect.sync(() => state.startWaiting());\n          return yield* effect;\n        }),\n      );\n    }\n    currentFiber = runningFiber;\n\n    // Settle the result when the fiber completes, unless deps changed first.\n    runFork(runtime)(\n      Effect.gen(function* () {\n        const exit = yield* Fiber.await(runningFiber);\n        if (currentFiber === runningFiber) {\n          state.settle(exit);\n          currentFiber = null;\n        }\n      }),\n    );\n\n    // Cleanup: interrupt the fiber when dependencies change or component unmounts\n    return () => {\n      if (currentFiber !== null) {\n        interruptFiber(currentFiber);\n        currentFiber = null;\n      }\n    };\n  });\n\n  return {\n    get current() {\n      return state.current;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,WACd,IACA,UAA6B,CAAC,GACT;CACrB,MAAM,EAAE,aAAa;CACrB,MAAM,UAAUA,kBAAW;CAE3B,MAAM,QAAQ,WAAiB;CAC/B,IAAI,eAAyC;CAE7C,cAAc;EAGZ,IAAI,iBAAiB,MACnB,eAAe,YAAY;EAI7B,MAAM,SAAS,GAAG;EAElB,IAAI;EACJ,IAAI,aAAa,KAAA,GAAW;GAE1B,MAAM,aAAa;GACnB,eAAe,QAAQ,OAAO,EAAE,MAAM;EACxC,OAGE,eAAe,QAAQ,OAAO,EAC5B,OAAO,IAAI,aAAa;GACtB,OAAO,OAAO,MAAM,QAAQ;GAC5B,OAAO,OAAO,WAAW,MAAM,aAAa,CAAC;GAC7C,OAAO,OAAO;EAChB,CAAC,CACH;EAEF,eAAe;EAGf,QAAQ,OAAO,EACb,OAAO,IAAI,aAAa;GACtB,MAAM,OAAO,OAAO,MAAM,MAAM,YAAY;GAC5C,IAAI,iBAAiB,cAAc;IACjC,MAAM,OAAO,IAAI;IACjB,eAAe;GACjB;EACF,CAAC,CACH;EAGA,aAAa;GACX,IAAI,iBAAiB,MAAM;IACzB,eAAe,YAAY;IAC3B,eAAe;GACjB;EACF;CACF,CAAC;CAED,OAAO,EACL,IAAI,UAAU;EACZ,OAAO,MAAM;CACf,EACF;AACF"}

package/dist/effect.svelte.d.ts

@@ -24,6 +24,19 @@ interface UseEffectReturn<A, E> {
    * Interrupt the currently running effect
    */
   interrupt: () => void;
+  /**
+   * Optimistically overwrite the current value with a non-waiting `Success`,
+   * without running the effect. Accepts a value or an updater function that
+   * receives the current value (`undefined` if there is none yet). Useful for
+   * local cache writes after a mutation, reconciled by the next `run`.
+   */
+  setData: (updater: A | ((previous: A | undefined) => A)) => void;
+  /**
+   * `true` while a previous value is being shown but a re-run is in flight
+   * (stale-while-revalidate) — i.e. the result is `waiting` and still holds a
+   * value.
+   */
+  readonly isStale: boolean;
 }
 /**
  * Run a single Effect and track its result state.

package/dist/effect.svelte.js

@@ -1,7 +1,8 @@
 import { getRuntimeContext } from "./context.svelte.js";
 import { interruptFiber, runFork } from "./internal/run.js";
 import { makeResult } from "./internal/result.svelte.js";
-import { Effect, Fiber } from "effect";
+import { Effect, Fiber, Option } from "effect";
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
 //#region src/effect.svelte.ts
 /**
 * Run a single Effect and track its result state.
@@ -54,12 +55,21 @@ function useEffect(effect, options = {}) {
 			interrupt();
 		};
 	});
+	const setData = (updater) => {
+		const previous = Option.getOrUndefined(AsyncResult.value(state.current));
+		const next = typeof updater === "function" ? updater(previous) : updater;
+		state.succeed(next);
+	};
 	return {
 		get current() {
 			return state.current;
 		},
 		run,
-		interrupt
+		interrupt,
+		setData,
+		get isStale() {
+			return AsyncResult.isWaiting(state.current) && Option.isSome(AsyncResult.value(state.current));
+		}
 	};
 }
 //#endregion

package/dist/effect.svelte.js.map

@@ -1 +1 @@
-{"version":3,"file":"effect.svelte.js","names":["getRuntime"],"sources":["../src/effect.svelte.ts"],"sourcesContent":["import { Effect, Fiber } from \"effect\";\nimport type * as AsyncResult from \"effect/unstable/reactivity/AsyncResult\";\nimport { getRuntime } from \"./context.svelte.js\";\nimport { interruptFiber, runFork, type RuntimeLike } from \"./internal/run.js\";\nimport { makeResult } from \"./internal/result.svelte.js\";\n\nexport interface UseEffectOptions {\n  /**\n   * If true, the effect will run immediately on mount.\n   * If false, the effect will only run when manually triggered via run().\n   * @default false\n   */\n  immediate?: boolean;\n}\n\nexport interface UseEffectReturn<A, E> {\n  /**\n   * The current result state of the effect. Re-running preserves the previous\n   * value as a waiting `Success` (stale-while-revalidate).\n   */\n  readonly current: AsyncResult.AsyncResult<A, E>;\n\n  /**\n   * Manually trigger execution of the effect\n   */\n  run: () => void;\n\n  /**\n   * Interrupt the currently running effect\n   */\n  interrupt: () => void;\n}\n\n/**\n * Run a single Effect and track its result state.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   import { useEffect, AsyncResult } from '@thomasfosterau/effect-svelte';\n *   import { Effect } from 'effect';\n *\n *   const fetchData = useEffect(\n *     Effect.delay(Effect.succeed(42), '1 second'),\n *     { immediate: true }\n *   );\n * </script>\n *\n * {#if AsyncResult.isSuccess(fetchData.current)}\n *   <p>Result: {fetchData.current.value}</p>\n * {/if}\n * ```\n */\nexport function useEffect<A, E, R>(\n  effect: Effect.Effect<A, E, R>,\n  options: UseEffectOptions = {},\n): UseEffectReturn<A, E> {\n  const { immediate = false } = options;\n  const runtime = getRuntime() as RuntimeLike<R>;\n\n  const state = makeResult<A, E>();\n  let currentFiber: Fiber.Fiber<A, E> | null = null;\n\n  const run = () => {\n    // Interrupt any existing fiber\n    if (currentFiber !== null) {\n      interruptFiber(currentFiber);\n    }\n\n    // Mark as waiting, preserving the previous value if there is one.\n    state.startWaiting();\n\n    // Run the effect and capture the fiber reference\n    const runningFiber = runFork(runtime)(effect);\n    currentFiber = runningFiber;\n\n    // Settle the result when the fiber completes, unless a newer run replaced it.\n    runFork(runtime)(\n      Effect.gen(function* () {\n        const exit = yield* Fiber.await(runningFiber);\n        if (currentFiber === runningFiber) {\n          state.settle(exit);\n          currentFiber = null;\n        }\n      }),\n    );\n  };\n\n  const interrupt = () => {\n    if (currentFiber !== null) {\n      interruptFiber(currentFiber);\n      currentFiber = null;\n      // Return to the initial state so the effect can be run again cleanly.\n      state.reset();\n    }\n  };\n\n  // Set up effect lifecycle\n  $effect(() => {\n    if (immediate) {\n      run();\n    }\n\n    // Cleanup: interrupt any running fiber on unmount\n    return () => {\n      interrupt();\n    };\n  });\n\n  return {\n    get current() {\n      return state.current;\n    },\n    run,\n    interrupt,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,UACd,QACA,UAA4B,CAAC,GACN;CACvB,MAAM,EAAE,YAAY,UAAU;CAC9B,MAAM,UAAUA,kBAAW;CAE3B,MAAM,QAAQ,WAAiB;CAC/B,IAAI,eAAyC;CAE7C,MAAM,YAAY;EAEhB,IAAI,iBAAiB,MACnB,eAAe,YAAY;EAI7B,MAAM,aAAa;EAGnB,MAAM,eAAe,QAAQ,OAAO,EAAE,MAAM;EAC5C,eAAe;EAGf,QAAQ,OAAO,EACb,OAAO,IAAI,aAAa;GACtB,MAAM,OAAO,OAAO,MAAM,MAAM,YAAY;GAC5C,IAAI,iBAAiB,cAAc;IACjC,MAAM,OAAO,IAAI;IACjB,eAAe;GACjB;EACF,CAAC,CACH;CACF;CAEA,MAAM,kBAAkB;EACtB,IAAI,iBAAiB,MAAM;GACzB,eAAe,YAAY;GAC3B,eAAe;GAEf,MAAM,MAAM;EACd;CACF;CAGA,cAAc;EACZ,IAAI,WACF,IAAI;EAIN,aAAa;GACX,UAAU;EACZ;CACF,CAAC;CAED,OAAO;EACL,IAAI,UAAU;GACZ,OAAO,MAAM;EACf;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"effect.svelte.js","names":["getRuntime"],"sources":["../src/effect.svelte.ts"],"sourcesContent":["import { Effect, Fiber, Option } from \"effect\";\nimport * as AsyncResult from \"effect/unstable/reactivity/AsyncResult\";\nimport { getRuntime } from \"./context.svelte.js\";\nimport { interruptFiber, runFork, type RuntimeLike } from \"./internal/run.js\";\nimport { makeResult } from \"./internal/result.svelte.js\";\n\nexport interface UseEffectOptions {\n  /**\n   * If true, the effect will run immediately on mount.\n   * If false, the effect will only run when manually triggered via run().\n   * @default false\n   */\n  immediate?: boolean;\n}\n\nexport interface UseEffectReturn<A, E> {\n  /**\n   * The current result state of the effect. Re-running preserves the previous\n   * value as a waiting `Success` (stale-while-revalidate).\n   */\n  readonly current: AsyncResult.AsyncResult<A, E>;\n\n  /**\n   * Manually trigger execution of the effect\n   */\n  run: () => void;\n\n  /**\n   * Interrupt the currently running effect\n   */\n  interrupt: () => void;\n\n  /**\n   * Optimistically overwrite the current value with a non-waiting `Success`,\n   * without running the effect. Accepts a value or an updater function that\n   * receives the current value (`undefined` if there is none yet). Useful for\n   * local cache writes after a mutation, reconciled by the next `run`.\n   */\n  setData: (updater: A | ((previous: A | undefined) => A)) => void;\n\n  /**\n   * `true` while a previous value is being shown but a re-run is in flight\n   * (stale-while-revalidate) — i.e. the result is `waiting` and still holds a\n   * value.\n   */\n  readonly isStale: boolean;\n}\n\n/**\n * Run a single Effect and track its result state.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   import { useEffect, AsyncResult } from '@thomasfosterau/effect-svelte';\n *   import { Effect } from 'effect';\n *\n *   const fetchData = useEffect(\n *     Effect.delay(Effect.succeed(42), '1 second'),\n *     { immediate: true }\n *   );\n * </script>\n *\n * {#if AsyncResult.isSuccess(fetchData.current)}\n *   <p>Result: {fetchData.current.value}</p>\n * {/if}\n * ```\n */\nexport function useEffect<A, E, R>(\n  effect: Effect.Effect<A, E, R>,\n  options: UseEffectOptions = {},\n): UseEffectReturn<A, E> {\n  const { immediate = false } = options;\n  const runtime = getRuntime() as RuntimeLike<R>;\n\n  const state = makeResult<A, E>();\n  let currentFiber: Fiber.Fiber<A, E> | null = null;\n\n  const run = () => {\n    // Interrupt any existing fiber\n    if (currentFiber !== null) {\n      interruptFiber(currentFiber);\n    }\n\n    // Mark as waiting, preserving the previous value if there is one.\n    state.startWaiting();\n\n    // Run the effect and capture the fiber reference\n    const runningFiber = runFork(runtime)(effect);\n    currentFiber = runningFiber;\n\n    // Settle the result when the fiber completes, unless a newer run replaced it.\n    runFork(runtime)(\n      Effect.gen(function* () {\n        const exit = yield* Fiber.await(runningFiber);\n        if (currentFiber === runningFiber) {\n          state.settle(exit);\n          currentFiber = null;\n        }\n      }),\n    );\n  };\n\n  const interrupt = () => {\n    if (currentFiber !== null) {\n      interruptFiber(currentFiber);\n      currentFiber = null;\n      // Return to the initial state so the effect can be run again cleanly.\n      state.reset();\n    }\n  };\n\n  // Set up effect lifecycle\n  $effect(() => {\n    if (immediate) {\n      run();\n    }\n\n    // Cleanup: interrupt any running fiber on unmount\n    return () => {\n      interrupt();\n    };\n  });\n\n  const setData = (updater: A | ((previous: A | undefined) => A)): void => {\n    const previous = Option.getOrUndefined(AsyncResult.value(state.current));\n    const next =\n      typeof updater === \"function\"\n        ? (updater as (previous: A | undefined) => A)(previous)\n        : updater;\n    state.succeed(next);\n  };\n\n  return {\n    get current() {\n      return state.current;\n    },\n    run,\n    interrupt,\n    setData,\n    get isStale() {\n      return (\n        AsyncResult.isWaiting(state.current) && Option.isSome(AsyncResult.value(state.current))\n      );\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,SAAgB,UACd,QACA,UAA4B,CAAC,GACN;CACvB,MAAM,EAAE,YAAY,UAAU;CAC9B,MAAM,UAAUA,kBAAW;CAE3B,MAAM,QAAQ,WAAiB;CAC/B,IAAI,eAAyC;CAE7C,MAAM,YAAY;EAEhB,IAAI,iBAAiB,MACnB,eAAe,YAAY;EAI7B,MAAM,aAAa;EAGnB,MAAM,eAAe,QAAQ,OAAO,EAAE,MAAM;EAC5C,eAAe;EAGf,QAAQ,OAAO,EACb,OAAO,IAAI,aAAa;GACtB,MAAM,OAAO,OAAO,MAAM,MAAM,YAAY;GAC5C,IAAI,iBAAiB,cAAc;IACjC,MAAM,OAAO,IAAI;IACjB,eAAe;GACjB;EACF,CAAC,CACH;CACF;CAEA,MAAM,kBAAkB;EACtB,IAAI,iBAAiB,MAAM;GACzB,eAAe,YAAY;GAC3B,eAAe;GAEf,MAAM,MAAM;EACd;CACF;CAGA,cAAc;EACZ,IAAI,WACF,IAAI;EAIN,aAAa;GACX,UAAU;EACZ;CACF,CAAC;CAED,MAAM,WAAW,YAAwD;EACvE,MAAM,WAAW,OAAO,eAAe,YAAY,MAAM,MAAM,OAAO,CAAC;EACvE,MAAM,OACJ,OAAO,YAAY,aACd,QAA2C,QAAQ,IACpD;EACN,MAAM,QAAQ,IAAI;CACpB;CAEA,OAAO;EACL,IAAI,UAAU;GACZ,OAAO,MAAM;EACf;EACA;EACA;EACA;EACA,IAAI,UAAU;GACZ,OACE,YAAY,UAAU,MAAM,OAAO,KAAK,OAAO,OAAO,YAAY,MAAM,MAAM,OAAO,CAAC;EAE1F;CACF;AACF"}

package/dist/index.d.ts

@@ -4,11 +4,15 @@ import { SvelteRuntime, defaultSvelteRuntime } from "./runtime.js";
 import { useScope, useScopeCallback } from "./scope.svelte.js";
 import { UseEffectOptions, UseEffectReturn, useEffect } from "./effect.svelte.js";
 import { UseStreamReturn, useStream } from "./stream.svelte.js";
-import { DerivedReturn, useDerived } from "./derived.svelte.js";
+import { DerivedReturn, UseDerivedOptions, useDerived } from "./derived.svelte.js";
 import { UseQueryReturn, useQuery } from "./query.svelte.js";
+import { MutationCallbacks } from "./internal/mutation.js";
+import { UseMutationReturn, useMutation } from "./mutation.svelte.js";
+import { UseQueryPromiseReturn, useQueryPromise } from "./await.svelte.js";
 import { UsePubSubReturn, UseSubscriptionRefReturn, usePubSub, useSubscriptionRef } from "./subscription.svelte.js";
+import { UseWritableRefReturn, useWritableRef } from "./writable-ref.svelte.js";
 import { ReactiveMutationReturn, ReactiveQueryReturn, ReactiveStreamReturn, reactiveMutation, reactiveQuery, reactiveStream, useInvalidateKeys } from "./reactivity.svelte.js";
 import { SignalEmitter } from "./emitter.js";
 import { Store_d_exports } from "./Store.js";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-export { AsyncResult, type DerivedReturn, type ReactiveMutationReturn, type ReactiveQueryReturn, type ReactiveStreamReturn, type RuntimeLike, SignalEmitter, Store_d_exports as Store, SvelteRuntime, type UseEffectOptions, type UseEffectReturn, type UsePubSubReturn, type UseQueryReturn, type UseStreamReturn, type UseSubscriptionRefReturn, defaultSvelteRuntime, getRuntimeContext as getRuntime, provideRuntime, reactiveMutation, reactiveQuery, reactiveStream, useDerived, useEffect, useInvalidateKeys, usePubSub, useQuery, useScope, useScopeCallback, useStream, useSubscriptionRef };
+export { AsyncResult, type DerivedReturn, type MutationCallbacks, type ReactiveMutationReturn, type ReactiveQueryReturn, type ReactiveStreamReturn, type RuntimeLike, SignalEmitter, Store_d_exports as Store, SvelteRuntime, type UseDerivedOptions, type UseEffectOptions, type UseEffectReturn, type UseMutationReturn, type UsePubSubReturn, type UseQueryPromiseReturn, type UseQueryReturn, type UseStreamReturn, type UseSubscriptionRefReturn, type UseWritableRefReturn, defaultSvelteRuntime, getRuntimeContext as getRuntime, provideRuntime, reactiveMutation, reactiveQuery, reactiveStream, useDerived, useEffect, useInvalidateKeys, useMutation, usePubSub, useQuery, useQueryPromise, useScope, useScopeCallback, useStream, useSubscriptionRef, useWritableRef };

package/dist/index.js

@@ -5,9 +5,12 @@ import { useEffect } from "./effect.svelte.js";
 import { useStream } from "./stream.svelte.js";
 import { useDerived } from "./derived.svelte.js";
 import { useQuery } from "./query.svelte.js";
+import { useMutation } from "./mutation.svelte.js";
+import { useQueryPromise } from "./await.svelte.js";
 import { usePubSub, useSubscriptionRef } from "./subscription.svelte.js";
+import { useWritableRef } from "./writable-ref.svelte.js";
 import { reactiveMutation, reactiveQuery, reactiveStream, useInvalidateKeys } from "./reactivity.svelte.js";
 import { SignalEmitter } from "./emitter.js";
 import { Store_exports } from "./Store.js";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-export { AsyncResult, SignalEmitter, Store_exports as Store, SvelteRuntime, defaultSvelteRuntime, getRuntimeContext as getRuntime, provideRuntime, reactiveMutation, reactiveQuery, reactiveStream, useDerived, useEffect, useInvalidateKeys, usePubSub, useQuery, useScope, useScopeCallback, useStream, useSubscriptionRef };
+export { AsyncResult, SignalEmitter, Store_exports as Store, SvelteRuntime, defaultSvelteRuntime, getRuntimeContext as getRuntime, provideRuntime, reactiveMutation, reactiveQuery, reactiveStream, useDerived, useEffect, useInvalidateKeys, useMutation, usePubSub, useQuery, useQueryPromise, useScope, useScopeCallback, useStream, useSubscriptionRef, useWritableRef };

package/dist/internal/await.js

@@ -0,0 +1,39 @@
+import { Cause, Option } from "effect";
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
+//#region src/internal/await.ts
+/**
+* Convert an {@link AsyncResult.AsyncResult} into a `Promise`, so Effect-backed
+* state can drive Svelte 5's native async (`{#await}` blocks and
+* `<svelte:boundary>` suspense), which both consume a real thenable.
+*
+* Mapping:
+* - **Failure** → a rejected promise (with the typed error `E` when present,
+*   otherwise the squashed cause). Checked first, so a failure that carries a
+*   previous success still surfaces the error in the `{:catch}` block.
+* - **Holds a value** (a `Success`, including a waiting one during
+*   stale-while-revalidate) → a resolved promise, so the UI keeps showing data
+*   while a refresh is in flight.
+* - **Initial / waiting with no value** → a perpetually-pending promise, so the
+*   `{#await}` loading branch (or the boundary's `pending` snippet) shows.
+*
+* Callers should memoise the result (e.g. via `$derived`) so a fresh pending
+* promise is not produced on unrelated re-renders — a new promise identity is
+* only wanted when the underlying result transitions.
+*/
+function resultToPromise(result) {
+	if (AsyncResult.isFailure(result)) {
+		const cause = AsyncResult.cause(result);
+		if (Option.isSome(cause)) {
+			const error = Cause.findErrorOption(cause.value);
+			return Promise.reject(Option.isSome(error) ? error.value : Cause.squash(cause.value));
+		}
+		return Promise.reject(/* @__PURE__ */ new Error("AsyncResult failure with no cause"));
+	}
+	const value = AsyncResult.value(result);
+	if (Option.isSome(value)) return Promise.resolve(value.value);
+	return new Promise(() => {});
+}
+//#endregion
+export { resultToPromise };
+
+//# sourceMappingURL=await.js.map

package/dist/internal/await.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"await.js","names":[],"sources":["../../src/internal/await.ts"],"sourcesContent":["import { Cause, Option } from \"effect\";\nimport * as AsyncResult from \"effect/unstable/reactivity/AsyncResult\";\n\n/**\n * Convert an {@link AsyncResult.AsyncResult} into a `Promise`, so Effect-backed\n * state can drive Svelte 5's native async (`{#await}` blocks and\n * `<svelte:boundary>` suspense), which both consume a real thenable.\n *\n * Mapping:\n * - **Failure** → a rejected promise (with the typed error `E` when present,\n *   otherwise the squashed cause). Checked first, so a failure that carries a\n *   previous success still surfaces the error in the `{:catch}` block.\n * - **Holds a value** (a `Success`, including a waiting one during\n *   stale-while-revalidate) → a resolved promise, so the UI keeps showing data\n *   while a refresh is in flight.\n * - **Initial / waiting with no value** → a perpetually-pending promise, so the\n *   `{#await}` loading branch (or the boundary's `pending` snippet) shows.\n *\n * Callers should memoise the result (e.g. via `$derived`) so a fresh pending\n * promise is not produced on unrelated re-renders — a new promise identity is\n * only wanted when the underlying result transitions.\n */\nexport function resultToPromise<A, E>(result: AsyncResult.AsyncResult<A, E>): Promise<A> {\n  if (AsyncResult.isFailure(result)) {\n    const cause = AsyncResult.cause(result);\n    if (Option.isSome(cause)) {\n      const error = Cause.findErrorOption(cause.value);\n      return Promise.reject(Option.isSome(error) ? error.value : Cause.squash(cause.value));\n    }\n    return Promise.reject(new Error(\"AsyncResult failure with no cause\"));\n  }\n\n  const value = AsyncResult.value(result);\n  if (Option.isSome(value)) return Promise.resolve(value.value);\n\n  // Initial / waiting with no value yet: stay pending.\n  return new Promise<A>(() => {});\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,gBAAsB,QAAmD;CACvF,IAAI,YAAY,UAAU,MAAM,GAAG;EACjC,MAAM,QAAQ,YAAY,MAAM,MAAM;EACtC,IAAI,OAAO,OAAO,KAAK,GAAG;GACxB,MAAM,QAAQ,MAAM,gBAAgB,MAAM,KAAK;GAC/C,OAAO,QAAQ,OAAO,OAAO,OAAO,KAAK,IAAI,MAAM,QAAQ,MAAM,OAAO,MAAM,KAAK,CAAC;EACtF;EACA,OAAO,QAAQ,uBAAO,IAAI,MAAM,mCAAmC,CAAC;CACtE;CAEA,MAAM,QAAQ,YAAY,MAAM,MAAM;CACtC,IAAI,OAAO,OAAO,KAAK,GAAG,OAAO,QAAQ,QAAQ,MAAM,KAAK;CAG5D,OAAO,IAAI,cAAiB,CAAC,CAAC;AAChC"}

package/dist/internal/mutation.d.ts

@@ -0,0 +1,38 @@
+import { Effect } from "effect";
+
+//#region src/internal/mutation.d.ts
+/**
+ * Lifecycle callbacks for a mutation, following TanStack Query conventions.
+ *
+ * `onMutate` runs synchronously before the effect starts and its return value
+ * is threaded through `onSuccess` / `onError` / `onSettled` as `context` — the
+ * idiomatic place to apply an optimistic update and capture a snapshot for
+ * rollback.
+ */
+interface MutationCallbacks<A, E, I, C> {
+  /**
+   * Runs before the mutation effect. Apply an optimistic update here and return
+   * any value (e.g. a snapshot) to receive it back as `context` in the other
+   * callbacks — use it to roll back in `onError`.
+   */
+  readonly onMutate?: (input: I) => C;
+  /** Runs after the mutation succeeds, before invalidation. */
+  readonly onSuccess?: (value: A, input: I, context: C | undefined) => void;
+  /**
+   * Runs after the mutation fails with a typed error. Pure defects (dies)
+   * still settle `current` as a failure but do not invoke this callback, since
+   * there is no `E` value to hand back — inspect `current` for those.
+   */
+  readonly onError?: (error: E, input: I, context: C | undefined) => void;
+  /** Runs after `onSuccess` / `onError`, regardless of outcome. */
+  readonly onSettled?: (input: I, context: C | undefined) => void;
+  /**
+   * Reactivity keys to invalidate after a successful mutation (a static array
+   * or a function of the input). Requires the runtime to include
+   * `Reactivity.layer` from `effect/unstable/reactivity`.
+   */
+  readonly invalidates?: ReadonlyArray<unknown> | ((input: I) => ReadonlyArray<unknown>);
+}
+//#endregion
+export { MutationCallbacks };
+//# sourceMappingURL=mutation.d.ts.map

package/dist/internal/mutation.js

@@ -0,0 +1,61 @@
+import { interruptFiber, runFork } from "./run.js";
+import { Cause, Effect, Exit, Fiber, Option } from "effect";
+import { Reactivity } from "effect/unstable/reactivity";
+//#region src/internal/mutation.ts
+/**
+* The orchestration half of {@link useMutation}, factored out of the rune
+* wrapper so it can be unit-tested with a plain (non-rune) {@link ResultState}
+* and a real runtime.
+*
+* Drives `state` through the stale-while-revalidate transitions and dispatches
+* the {@link MutationCallbacks} from the settled `Exit`. Interrupted runs (a
+* newer `mutate` replacing an older one, or teardown) are ignored so a
+* superseded run never clobbers the latest result.
+*/
+function makeMutation(runtime, state, fn, callbacks = {}) {
+	let currentFiber = null;
+	const mutate = (input) => {
+		if (currentFiber !== null) interruptFiber(currentFiber);
+		const context = callbacks.onMutate?.(input);
+		state.startWaiting();
+		const running = runFork(runtime)(fn(input));
+		currentFiber = running;
+		runFork(runtime)(Effect.gen(function* () {
+			const exit = yield* Fiber.await(running);
+			if (currentFiber !== running) return;
+			currentFiber = null;
+			if (Exit.isSuccess(exit)) {
+				state.settle(exit);
+				callbacks.onSuccess?.(exit.value, input, context);
+				const keys = typeof callbacks.invalidates === "function" ? callbacks.invalidates(input) : callbacks.invalidates;
+				if (keys !== void 0) runFork(runtime)(Reactivity.invalidate(keys));
+				callbacks.onSettled?.(input, context);
+				return;
+			}
+			if (Cause.hasInterrupts(exit.cause)) return;
+			state.settle(exit);
+			const error = Cause.findErrorOption(exit.cause);
+			if (Option.isSome(error)) callbacks.onError?.(error.value, input, context);
+			callbacks.onSettled?.(input, context);
+		}));
+	};
+	const interrupt = () => {
+		if (currentFiber !== null) {
+			interruptFiber(currentFiber);
+			currentFiber = null;
+		}
+	};
+	const reset = () => {
+		interrupt();
+		state.reset();
+	};
+	return {
+		mutate,
+		reset,
+		interrupt
+	};
+}
+//#endregion
+export { makeMutation };
+
+//# sourceMappingURL=mutation.js.map

package/dist/internal/mutation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mutation.js","names":[],"sources":["../../src/internal/mutation.ts"],"sourcesContent":["import { Cause, Effect, Exit, Fiber, Option } from \"effect\";\nimport { Reactivity } from \"effect/unstable/reactivity\";\nimport { interruptFiber, runFork, type RuntimeLike } from \"./run.js\";\nimport type { ResultState } from \"./result.svelte.js\";\n\n/**\n * Lifecycle callbacks for a mutation, following TanStack Query conventions.\n *\n * `onMutate` runs synchronously before the effect starts and its return value\n * is threaded through `onSuccess` / `onError` / `onSettled` as `context` — the\n * idiomatic place to apply an optimistic update and capture a snapshot for\n * rollback.\n */\nexport interface MutationCallbacks<A, E, I, C> {\n  /**\n   * Runs before the mutation effect. Apply an optimistic update here and return\n   * any value (e.g. a snapshot) to receive it back as `context` in the other\n   * callbacks — use it to roll back in `onError`.\n   */\n  readonly onMutate?: (input: I) => C;\n  /** Runs after the mutation succeeds, before invalidation. */\n  readonly onSuccess?: (value: A, input: I, context: C | undefined) => void;\n  /**\n   * Runs after the mutation fails with a typed error. Pure defects (dies)\n   * still settle `current` as a failure but do not invoke this callback, since\n   * there is no `E` value to hand back — inspect `current` for those.\n   */\n  readonly onError?: (error: E, input: I, context: C | undefined) => void;\n  /** Runs after `onSuccess` / `onError`, regardless of outcome. */\n  readonly onSettled?: (input: I, context: C | undefined) => void;\n  /**\n   * Reactivity keys to invalidate after a successful mutation (a static array\n   * or a function of the input). Requires the runtime to include\n   * `Reactivity.layer` from `effect/unstable/reactivity`.\n   */\n  readonly invalidates?: ReadonlyArray<unknown> | ((input: I) => ReadonlyArray<unknown>);\n}\n\n/** The imperative surface of a mutation, independent of any rune state. */\nexport interface MutationCore<I> {\n  /** Run the mutation for `input`, interrupting any in-flight run. */\n  readonly mutate: (input: I) => void;\n  /** Interrupt the in-flight run and reset the result to `Initial`. */\n  readonly reset: () => void;\n  /** Interrupt the in-flight run without resetting the result. */\n  readonly interrupt: () => void;\n}\n\n/**\n * The orchestration half of {@link useMutation}, factored out of the rune\n * wrapper so it can be unit-tested with a plain (non-rune) {@link ResultState}\n * and a real runtime.\n *\n * Drives `state` through the stale-while-revalidate transitions and dispatches\n * the {@link MutationCallbacks} from the settled `Exit`. Interrupted runs (a\n * newer `mutate` replacing an older one, or teardown) are ignored so a\n * superseded run never clobbers the latest result.\n */\nexport function makeMutation<A, E, I, C, R>(\n  runtime: RuntimeLike<R>,\n  state: ResultState<A, E>,\n  fn: (input: I) => Effect.Effect<A, E, R>,\n  callbacks: MutationCallbacks<A, E, I, C> = {},\n): MutationCore<I> {\n  let currentFiber: Fiber.Fiber<A, E> | null = null;\n\n  const mutate = (input: I): void => {\n    if (currentFiber !== null) interruptFiber(currentFiber);\n\n    const context = callbacks.onMutate?.(input);\n    state.startWaiting();\n\n    const running = runFork(runtime)(fn(input));\n    currentFiber = running;\n\n    runFork(runtime)(\n      Effect.gen(function* () {\n        const exit = yield* Fiber.await(running);\n        // A newer mutate (or teardown) has superseded this run.\n        if (currentFiber !== running) return;\n        currentFiber = null;\n\n        if (Exit.isSuccess(exit)) {\n          state.settle(exit);\n          callbacks.onSuccess?.(exit.value, input, context);\n          const keys =\n            typeof callbacks.invalidates === \"function\"\n              ? callbacks.invalidates(input)\n              : callbacks.invalidates;\n          if (keys !== undefined) {\n            // Requires the runtime to provide Reactivity (documented contract).\n            runFork(runtime as RuntimeLike<Reactivity.Reactivity>)(Reactivity.invalidate(keys));\n          }\n          callbacks.onSettled?.(input, context);\n          return;\n        }\n\n        // Interruption is normal teardown; keep the prior state.\n        if (Cause.hasInterrupts(exit.cause)) return;\n\n        state.settle(exit);\n        const error = Cause.findErrorOption(exit.cause);\n        if (Option.isSome(error)) callbacks.onError?.(error.value, input, context);\n        callbacks.onSettled?.(input, context);\n      }),\n    );\n  };\n\n  const interrupt = (): void => {\n    if (currentFiber !== null) {\n      interruptFiber(currentFiber);\n      currentFiber = null;\n    }\n  };\n\n  const reset = (): void => {\n    interrupt();\n    state.reset();\n  };\n\n  return { mutate, reset, interrupt };\n}\n"],"mappings":";;;;;;;;;;;;;;AA0DA,SAAgB,aACd,SACA,OACA,IACA,YAA2C,CAAC,GAC3B;CACjB,IAAI,eAAyC;CAE7C,MAAM,UAAU,UAAmB;EACjC,IAAI,iBAAiB,MAAM,eAAe,YAAY;EAEtD,MAAM,UAAU,UAAU,WAAW,KAAK;EAC1C,MAAM,aAAa;EAEnB,MAAM,UAAU,QAAQ,OAAO,EAAE,GAAG,KAAK,CAAC;EAC1C,eAAe;EAEf,QAAQ,OAAO,EACb,OAAO,IAAI,aAAa;GACtB,MAAM,OAAO,OAAO,MAAM,MAAM,OAAO;GAEvC,IAAI,iBAAiB,SAAS;GAC9B,eAAe;GAEf,IAAI,KAAK,UAAU,IAAI,GAAG;IACxB,MAAM,OAAO,IAAI;IACjB,UAAU,YAAY,KAAK,OAAO,OAAO,OAAO;IAChD,MAAM,OACJ,OAAO,UAAU,gBAAgB,aAC7B,UAAU,YAAY,KAAK,IAC3B,UAAU;IAChB,IAAI,SAAS,KAAA,GAEX,QAAQ,OAA6C,EAAE,WAAW,WAAW,IAAI,CAAC;IAEpF,UAAU,YAAY,OAAO,OAAO;IACpC;GACF;GAGA,IAAI,MAAM,cAAc,KAAK,KAAK,GAAG;GAErC,MAAM,OAAO,IAAI;GACjB,MAAM,QAAQ,MAAM,gBAAgB,KAAK,KAAK;GAC9C,IAAI,OAAO,OAAO,KAAK,GAAG,UAAU,UAAU,MAAM,OAAO,OAAO,OAAO;GACzE,UAAU,YAAY,OAAO,OAAO;EACtC,CAAC,CACH;CACF;CAEA,MAAM,kBAAwB;EAC5B,IAAI,iBAAiB,MAAM;GACzB,eAAe,YAAY;GAC3B,eAAe;EACjB;CACF;CAEA,MAAM,cAAoB;EACxB,UAAU;EACV,MAAM,MAAM;CACd;CAEA,OAAO;EAAE;EAAQ;EAAO;CAAU;AACpC"}

package/dist/internal/result.svelte.d.ts

@@ -0,0 +1 @@
+import { Cause, Exit } from "effect";

package/dist/internal/writable.js

@@ -0,0 +1,21 @@
+import { runFork } from "./run.js";
+import { SubscriptionRef } from "effect";
+//#region src/internal/writable.ts
+/**
+* Build a {@link RefWriter} for a `SubscriptionRef`, running writes on the
+* given runtime.
+*/
+function refWriter(runtime, ref) {
+	return {
+		set: (value) => {
+			runFork(runtime)(SubscriptionRef.set(ref, value));
+		},
+		update: (f) => {
+			runFork(runtime)(SubscriptionRef.update(ref, f));
+		}
+	};
+}
+//#endregion
+export { refWriter };
+
+//# sourceMappingURL=writable.js.map

package/dist/internal/writable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"writable.js","names":[],"sources":["../../src/internal/writable.ts"],"sourcesContent":["import { SubscriptionRef } from \"effect\";\nimport { runFork, type RuntimeLike } from \"./run.js\";\n\n/**\n * The imperative write half of a two-way `SubscriptionRef` binding, factored\n * out of the rune wrapper so the write semantics can be unit-tested without a\n * Svelte component context.\n *\n * Both `set` and `update` fork the write onto the runtime and return\n * immediately — the value the caller sees update is driven by the ref's\n * `changes` stream (or, in the rune wrapper, an optimistic local assignment).\n */\nexport interface RefWriter<A> {\n  /** Replace the ref's value. */\n  readonly set: (value: A) => void;\n  /** Apply a function to the ref's current value. */\n  readonly update: (f: (current: A) => A) => void;\n}\n\n/**\n * Build a {@link RefWriter} for a `SubscriptionRef`, running writes on the\n * given runtime.\n */\nexport function refWriter<A>(\n  runtime: RuntimeLike<never>,\n  ref: SubscriptionRef.SubscriptionRef<A>,\n): RefWriter<A> {\n  return {\n    set: (value) => {\n      runFork(runtime)(SubscriptionRef.set(ref, value));\n    },\n    update: (f) => {\n      runFork(runtime)(SubscriptionRef.update(ref, f));\n    },\n  };\n}\n"],"mappings":";;;;;;;AAuBA,SAAgB,UACd,SACA,KACc;CACd,OAAO;EACL,MAAM,UAAU;GACd,QAAQ,OAAO,EAAE,gBAAgB,IAAI,KAAK,KAAK,CAAC;EAClD;EACA,SAAS,MAAM;GACb,QAAQ,OAAO,EAAE,gBAAgB,OAAO,KAAK,CAAC,CAAC;EACjD;CACF;AACF"}

package/dist/mutation.svelte.d.ts

@@ -0,0 +1,53 @@
+import { MutationCallbacks } from "./internal/mutation.js";
+import { Effect } from "effect";
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
+
+//#region src/mutation.svelte.d.ts
+interface UseMutationReturn<A, E, I> {
+  /**
+   * The current result state of the mutation. Starts `Initial`; each `mutate`
+   * marks it waiting (preserving the previous value) and settles to
+   * `Success` / `Failure`.
+   */
+  readonly current: AsyncResult.AsyncResult<A, E>;
+  /** Run the mutation with `input`. A new call interrupts any in-flight run. */
+  readonly mutate: (input: I) => void;
+  /** Interrupt any in-flight run and reset `current` back to `Initial`. */
+  readonly reset: () => void;
+}
+/**
+ * A TanStack-Query-shaped mutation hook: run an effectful `fn(input)` on
+ * demand, track its {@link AsyncResult.AsyncResult}, and fire lifecycle
+ * callbacks.
+ *
+ * Optimistic updates follow the TanStack model — apply the change in `onMutate`
+ * and return a snapshot as `context`, then roll back in `onError`. `invalidates`
+ * re-runs any reactive queries depending on the given keys after success (this
+ * requires the runtime to include `Reactivity.layer`).
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useMutation, AsyncResult } from '@thomasfosterau/effect-svelte';
+ *   import { Effect } from 'effect';
+ *
+ *   const addTodo = useMutation(
+ *     (title: string) => saveTodo(title),
+ *     {
+ *       invalidates: ['todos'],
+ *       onSuccess: (todo) => console.log('added', todo.id),
+ *     },
+ *   );
+ * </script>
+ *
+ * <button onclick={() => addTodo.mutate('Buy milk')}>Add</button>
+ *
+ * {#if AsyncResult.isWaiting(addTodo.current)}
+ *   <p>Saving…</p>
+ * {/if}
+ * ```
+ */
+declare function useMutation<A, E, I, R, C = unknown>(fn: (input: I) => Effect.Effect<A, E, R>, options?: MutationCallbacks<A, E, I, C>): UseMutationReturn<A, E, I>;
+//#endregion
+export { UseMutationReturn, useMutation };
+//# sourceMappingURL=mutation.svelte.d.ts.map

package/dist/mutation.svelte.js

@@ -0,0 +1,53 @@
+import { getRuntimeContext } from "./context.svelte.js";
+import { makeResult } from "./internal/result.svelte.js";
+import { makeMutation } from "./internal/mutation.js";
+//#region src/mutation.svelte.ts
+/**
+* A TanStack-Query-shaped mutation hook: run an effectful `fn(input)` on
+* demand, track its {@link AsyncResult.AsyncResult}, and fire lifecycle
+* callbacks.
+*
+* Optimistic updates follow the TanStack model — apply the change in `onMutate`
+* and return a snapshot as `context`, then roll back in `onError`. `invalidates`
+* re-runs any reactive queries depending on the given keys after success (this
+* requires the runtime to include `Reactivity.layer`).
+*
+* @example
+* ```svelte
+* <script lang="ts">
+*   import { useMutation, AsyncResult } from '@thomasfosterau/effect-svelte';
+*   import { Effect } from 'effect';
+*
+*   const addTodo = useMutation(
+*     (title: string) => saveTodo(title),
+*     {
+*       invalidates: ['todos'],
+*       onSuccess: (todo) => console.log('added', todo.id),
+*     },
+*   );
+* <\/script>
+*
+* <button onclick={() => addTodo.mutate('Buy milk')}>Add</button>
+*
+* {#if AsyncResult.isWaiting(addTodo.current)}
+*   <p>Saving…</p>
+* {/if}
+* ```
+*/
+function useMutation(fn, options = {}) {
+	const runtime = getRuntimeContext();
+	const state = makeResult();
+	const core = makeMutation(runtime, state, fn, options);
+	$effect(() => () => core.interrupt());
+	return {
+		get current() {
+			return state.current;
+		},
+		mutate: core.mutate,
+		reset: core.reset
+	};
+}
+//#endregion
+export { useMutation };
+
+//# sourceMappingURL=mutation.svelte.js.map

package/dist/mutation.svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mutation.svelte.js","names":["getRuntime"],"sources":["../src/mutation.svelte.ts"],"sourcesContent":["import type { Effect } from \"effect\";\nimport type * as AsyncResult from \"effect/unstable/reactivity/AsyncResult\";\nimport { getRuntime } from \"./context.svelte.js\";\nimport { makeMutation, type MutationCallbacks } from \"./internal/mutation.js\";\nimport type { RuntimeLike } from \"./internal/run.js\";\nimport { makeResult } from \"./internal/result.svelte.js\";\n\nexport type { MutationCallbacks } from \"./internal/mutation.js\";\n\nexport interface UseMutationReturn<A, E, I> {\n  /**\n   * The current result state of the mutation. Starts `Initial`; each `mutate`\n   * marks it waiting (preserving the previous value) and settles to\n   * `Success` / `Failure`.\n   */\n  readonly current: AsyncResult.AsyncResult<A, E>;\n\n  /** Run the mutation with `input`. A new call interrupts any in-flight run. */\n  readonly mutate: (input: I) => void;\n\n  /** Interrupt any in-flight run and reset `current` back to `Initial`. */\n  readonly reset: () => void;\n}\n\n/**\n * A TanStack-Query-shaped mutation hook: run an effectful `fn(input)` on\n * demand, track its {@link AsyncResult.AsyncResult}, and fire lifecycle\n * callbacks.\n *\n * Optimistic updates follow the TanStack model — apply the change in `onMutate`\n * and return a snapshot as `context`, then roll back in `onError`. `invalidates`\n * re-runs any reactive queries depending on the given keys after success (this\n * requires the runtime to include `Reactivity.layer`).\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   import { useMutation, AsyncResult } from '@thomasfosterau/effect-svelte';\n *   import { Effect } from 'effect';\n *\n *   const addTodo = useMutation(\n *     (title: string) => saveTodo(title),\n *     {\n *       invalidates: ['todos'],\n *       onSuccess: (todo) => console.log('added', todo.id),\n *     },\n *   );\n * </script>\n *\n * <button onclick={() => addTodo.mutate('Buy milk')}>Add</button>\n *\n * {#if AsyncResult.isWaiting(addTodo.current)}\n *   <p>Saving…</p>\n * {/if}\n * ```\n */\nexport function useMutation<A, E, I, R, C = unknown>(\n  fn: (input: I) => Effect.Effect<A, E, R>,\n  options: MutationCallbacks<A, E, I, C> = {},\n): UseMutationReturn<A, E, I> {\n  const runtime = getRuntime() as RuntimeLike<R>;\n  const state = makeResult<A, E>();\n  const core = makeMutation(runtime, state, fn, options);\n\n  // Interrupt any in-flight mutation when the component unmounts.\n  $effect(() => () => core.interrupt());\n\n  return {\n    get current() {\n      return state.current;\n    },\n    mutate: core.mutate,\n    reset: core.reset,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAgB,YACd,IACA,UAAyC,CAAC,GACd;CAC5B,MAAM,UAAUA,kBAAW;CAC3B,MAAM,QAAQ,WAAiB;CAC/B,MAAM,OAAO,aAAa,SAAS,OAAO,IAAI,OAAO;CAGrD,oBAAoB,KAAK,UAAU,CAAC;CAEpC,OAAO;EACL,IAAI,UAAU;GACZ,OAAO,MAAM;EACf;EACA,QAAQ,KAAK;EACb,OAAO,KAAK;CACd;AACF"}

package/dist/query.svelte.d.ts

@@ -12,6 +12,17 @@ interface UseQueryReturn<A, E> {
    * Re-fetch the data by re-running the effect
    */
   refetch: () => void;
+  /**
+   * Optimistically overwrite the query's data locally without refetching.
+   * Accepts a value or an updater over the current value (`undefined` if none
+   * yet). The next `refetch` reconciles it with the server.
+   */
+  setData: (updater: A | ((previous: A | undefined) => A)) => void;
+  /**
+   * `true` while showing a previous value during a refetch
+   * (stale-while-revalidate).
+   */
+  readonly isStale: boolean;
 }
 /**
  * Query pattern with refetch capability.

package/dist/query.svelte.js

@@ -32,7 +32,11 @@ function useQuery(effect) {
 		get current() {
 			return effectHook.current;
 		},
-		refetch: effectHook.run
+		refetch: effectHook.run,
+		setData: effectHook.setData,
+		get isStale() {
+			return effectHook.isStale;
+		}
 	};
 }
 //#endregion

package/dist/query.svelte.js.map

@@ -1 +1 @@
-{"version":3,"file":"query.svelte.js","names":[],"sources":["../src/query.svelte.ts"],"sourcesContent":["import type { Effect } from \"effect\";\nimport type * as AsyncResult from \"effect/unstable/reactivity/AsyncResult\";\nimport { useEffect } from \"./effect.svelte.js\";\n\nexport interface UseQueryReturn<A, E> {\n  /**\n   * The current result state of the query. Refetching preserves the previous\n   * value as a waiting `Success` (stale-while-revalidate).\n   */\n  readonly current: AsyncResult.AsyncResult<A, E>;\n\n  /**\n   * Re-fetch the data by re-running the effect\n   */\n  refetch: () => void;\n}\n\n/**\n * Query pattern with refetch capability.\n * Runs the effect immediately on mount and provides a refetch function.\n * Built on top of useEffect with immediate: true.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   import { useQuery, AsyncResult } from '@thomasfosterau/effect-svelte';\n *   import { Effect } from 'effect';\n *\n *   const query = useQuery(\n *     Effect.gen(function* () {\n *       const data = yield* fetchData();\n *       return data;\n *     })\n *   );\n * </script>\n *\n * <button onclick={query.refetch}>Refresh</button>\n *\n * {#if AsyncResult.isSuccess(query.current)}\n *   <p>Data: {JSON.stringify(query.current.value)}</p>\n * {/if}\n * ```\n */\nexport function useQuery<A, E, R>(effect: Effect.Effect<A, E, R>): UseQueryReturn<A, E> {\n  const effectHook = useEffect(effect, { immediate: true });\n\n  return {\n    get current() {\n      return effectHook.current;\n    },\n    refetch: effectHook.run,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,SAAkB,QAAsD;CACtF,MAAM,aAAa,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;CAExD,OAAO;EACL,IAAI,UAAU;GACZ,OAAO,WAAW;EACpB;EACA,SAAS,WAAW;CACtB;AACF"}
+{"version":3,"file":"query.svelte.js","names":[],"sources":["../src/query.svelte.ts"],"sourcesContent":["import type { Effect } from \"effect\";\nimport type * as AsyncResult from \"effect/unstable/reactivity/AsyncResult\";\nimport { useEffect } from \"./effect.svelte.js\";\n\nexport interface UseQueryReturn<A, E> {\n  /**\n   * The current result state of the query. Refetching preserves the previous\n   * value as a waiting `Success` (stale-while-revalidate).\n   */\n  readonly current: AsyncResult.AsyncResult<A, E>;\n\n  /**\n   * Re-fetch the data by re-running the effect\n   */\n  refetch: () => void;\n\n  /**\n   * Optimistically overwrite the query's data locally without refetching.\n   * Accepts a value or an updater over the current value (`undefined` if none\n   * yet). The next `refetch` reconciles it with the server.\n   */\n  setData: (updater: A | ((previous: A | undefined) => A)) => void;\n\n  /**\n   * `true` while showing a previous value during a refetch\n   * (stale-while-revalidate).\n   */\n  readonly isStale: boolean;\n}\n\n/**\n * Query pattern with refetch capability.\n * Runs the effect immediately on mount and provides a refetch function.\n * Built on top of useEffect with immediate: true.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   import { useQuery, AsyncResult } from '@thomasfosterau/effect-svelte';\n *   import { Effect } from 'effect';\n *\n *   const query = useQuery(\n *     Effect.gen(function* () {\n *       const data = yield* fetchData();\n *       return data;\n *     })\n *   );\n * </script>\n *\n * <button onclick={query.refetch}>Refresh</button>\n *\n * {#if AsyncResult.isSuccess(query.current)}\n *   <p>Data: {JSON.stringify(query.current.value)}</p>\n * {/if}\n * ```\n */\nexport function useQuery<A, E, R>(effect: Effect.Effect<A, E, R>): UseQueryReturn<A, E> {\n  const effectHook = useEffect(effect, { immediate: true });\n\n  return {\n    get current() {\n      return effectHook.current;\n    },\n    refetch: effectHook.run,\n    setData: effectHook.setData,\n    get isStale() {\n      return effectHook.isStale;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAgB,SAAkB,QAAsD;CACtF,MAAM,aAAa,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;CAExD,OAAO;EACL,IAAI,UAAU;GACZ,OAAO,WAAW;EACpB;EACA,SAAS,WAAW;EACpB,SAAS,WAAW;EACpB,IAAI,UAAU;GACZ,OAAO,WAAW;EACpB;CACF;AACF"}

package/dist/writable-ref.svelte.d.ts

@@ -0,0 +1,48 @@
+import { SubscriptionRef } from "effect";
+
+//#region src/writable-ref.svelte.d.ts
+interface UseWritableRefReturn<A> {
+  /**
+   * The current value of the `SubscriptionRef`. Reading tracks it reactively;
+   * assigning writes back to the ref, so this property is usable directly with
+   * Svelte's `bind:` directive (e.g. `bind:value={name.current}`).
+   */
+  current: A;
+  /** Replace the ref's value. */
+  readonly set: (value: A) => void;
+  /** Apply a function to the ref's current value. */
+  readonly update: (f: (current: A) => A) => void;
+}
+/**
+ * Two-way binding between an Effect `SubscriptionRef` and Svelte runes.
+ *
+ * Unlike {@link useSubscriptionRef} (read-only `{ current }`), this hook exposes
+ * a writable `current` — reading tracks the ref reactively and assigning writes
+ * back — so Effect-managed state can drive `bind:value` for shared form / app
+ * state. `set` and `update` are also provided for imperative writes.
+ *
+ * Local writes update `current` optimistically (so `bind:` does not glitch) and
+ * are reconciled by the ref's `changes` stream, which also delivers updates
+ * made elsewhere in the application.
+ *
+ * A `SubscriptionRef` is required (not a plain `Ref`): only a `SubscriptionRef`
+ * exposes the `changes` stream needed to observe external updates reactively.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useWritableRef } from '@thomasfosterau/effect-svelte';
+ *   import { SubscriptionRef } from 'effect';
+ *
+ *   // Assume nameRef is a SubscriptionRef<string> from shared app state
+ *   const name = useWritableRef(nameRef);
+ * </script>
+ *
+ * <input bind:value={name.current} />
+ * <button onclick={() => name.set("")}>Clear</button>
+ * ```
+ */
+declare function useWritableRef<A>(ref: SubscriptionRef.SubscriptionRef<A>): UseWritableRefReturn<A>;
+//#endregion
+export { UseWritableRefReturn, useWritableRef };
+//# sourceMappingURL=writable-ref.svelte.d.ts.map

package/dist/writable-ref.svelte.js

@@ -0,0 +1,66 @@
+import { getRuntimeContext } from "./context.svelte.js";
+import { interruptFiber, runFork, runSync } from "./internal/run.js";
+import { refWriter } from "./internal/writable.js";
+import { Effect, Stream, SubscriptionRef } from "effect";
+//#region src/writable-ref.svelte.ts
+/**
+* Two-way binding between an Effect `SubscriptionRef` and Svelte runes.
+*
+* Unlike {@link useSubscriptionRef} (read-only `{ current }`), this hook exposes
+* a writable `current` — reading tracks the ref reactively and assigning writes
+* back — so Effect-managed state can drive `bind:value` for shared form / app
+* state. `set` and `update` are also provided for imperative writes.
+*
+* Local writes update `current` optimistically (so `bind:` does not glitch) and
+* are reconciled by the ref's `changes` stream, which also delivers updates
+* made elsewhere in the application.
+*
+* A `SubscriptionRef` is required (not a plain `Ref`): only a `SubscriptionRef`
+* exposes the `changes` stream needed to observe external updates reactively.
+*
+* @example
+* ```svelte
+* <script lang="ts">
+*   import { useWritableRef } from '@thomasfosterau/effect-svelte';
+*   import { SubscriptionRef } from 'effect';
+*
+*   // Assume nameRef is a SubscriptionRef<string> from shared app state
+*   const name = useWritableRef(nameRef);
+* <\/script>
+*
+* <input bind:value={name.current} />
+* <button onclick={() => name.set("")}>Clear</button>
+* ```
+*/
+function useWritableRef(ref) {
+	const runtime = getRuntimeContext();
+	let value = $state(runSync(runtime)(SubscriptionRef.get(ref)));
+	const writer = refWriter(runtime, ref);
+	const set = (next) => {
+		value = next;
+		writer.set(next);
+	};
+	const update = (f) => {
+		set(f(value));
+	};
+	$effect(() => {
+		const fiber = runFork(runtime)(Stream.runForEach(SubscriptionRef.changes(ref), (next) => Effect.sync(() => {
+			value = next;
+		})));
+		return () => interruptFiber(fiber);
+	});
+	return {
+		get current() {
+			return value;
+		},
+		set current(next) {
+			set(next);
+		},
+		set,
+		update
+	};
+}
+//#endregion
+export { useWritableRef };
+
+//# sourceMappingURL=writable-ref.svelte.js.map

package/dist/writable-ref.svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"writable-ref.svelte.js","names":["getRuntime"],"sources":["../src/writable-ref.svelte.ts"],"sourcesContent":["import { Effect, Stream, SubscriptionRef } from \"effect\";\nimport { getRuntime } from \"./context.svelte.js\";\nimport { interruptFiber, runFork, runSync, type RuntimeLike } from \"./internal/run.js\";\nimport { refWriter } from \"./internal/writable.js\";\n\nexport interface UseWritableRefReturn<A> {\n  /**\n   * The current value of the `SubscriptionRef`. Reading tracks it reactively;\n   * assigning writes back to the ref, so this property is usable directly with\n   * Svelte's `bind:` directive (e.g. `bind:value={name.current}`).\n   */\n  current: A;\n\n  /** Replace the ref's value. */\n  readonly set: (value: A) => void;\n\n  /** Apply a function to the ref's current value. */\n  readonly update: (f: (current: A) => A) => void;\n}\n\n/**\n * Two-way binding between an Effect `SubscriptionRef` and Svelte runes.\n *\n * Unlike {@link useSubscriptionRef} (read-only `{ current }`), this hook exposes\n * a writable `current` — reading tracks the ref reactively and assigning writes\n * back — so Effect-managed state can drive `bind:value` for shared form / app\n * state. `set` and `update` are also provided for imperative writes.\n *\n * Local writes update `current` optimistically (so `bind:` does not glitch) and\n * are reconciled by the ref's `changes` stream, which also delivers updates\n * made elsewhere in the application.\n *\n * A `SubscriptionRef` is required (not a plain `Ref`): only a `SubscriptionRef`\n * exposes the `changes` stream needed to observe external updates reactively.\n *\n * @example\n * ```svelte\n * <script lang=\"ts\">\n *   import { useWritableRef } from '@thomasfosterau/effect-svelte';\n *   import { SubscriptionRef } from 'effect';\n *\n *   // Assume nameRef is a SubscriptionRef<string> from shared app state\n *   const name = useWritableRef(nameRef);\n * </script>\n *\n * <input bind:value={name.current} />\n * <button onclick={() => name.set(\"\")}>Clear</button>\n * ```\n */\nexport function useWritableRef<A>(\n  ref: SubscriptionRef.SubscriptionRef<A>,\n): UseWritableRefReturn<A> {\n  const runtime = getRuntime() as RuntimeLike<never>;\n\n  // Read the initial value synchronously so it is available before (and during\n  // SSR, instead of) the subscription.\n  let value = $state(runSync(runtime)(SubscriptionRef.get(ref)));\n\n  const writer = refWriter(runtime, ref);\n\n  const set = (next: A): void => {\n    // Optimistic local update so `bind:value` reflects the change immediately,\n    // then persist to the ref (whose `changes` stream reconciles the value).\n    value = next;\n    writer.set(next);\n  };\n\n  const update = (f: (current: A) => A): void => {\n    set(f(value));\n  };\n\n  // Keep `value` in sync with updates made anywhere else in the app. The\n  // `changes` stream re-emits the current value on subscribe, so no update is\n  // missed between the synchronous initial read and the subscription starting.\n  $effect(() => {\n    const fiber = runFork(runtime)(\n      Stream.runForEach(SubscriptionRef.changes(ref), (next) =>\n        Effect.sync(() => {\n          value = next;\n        }),\n      ),\n    );\n    return () => interruptFiber(fiber);\n  });\n\n  return {\n    get current() {\n      return value;\n    },\n    set current(next: A) {\n      set(next);\n    },\n    set,\n    update,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,eACd,KACyB;CACzB,MAAM,UAAUA,kBAAW;CAI3B,IAAI,QAAQ,OAAO,QAAQ,OAAO,EAAE,gBAAgB,IAAI,GAAG,CAAC,CAAC;CAE7D,MAAM,SAAS,UAAU,SAAS,GAAG;CAErC,MAAM,OAAO,SAAkB;EAG7B,QAAQ;EACR,OAAO,IAAI,IAAI;CACjB;CAEA,MAAM,UAAU,MAA+B;EAC7C,IAAI,EAAE,KAAK,CAAC;CACd;CAKA,cAAc;EACZ,MAAM,QAAQ,QAAQ,OAAO,EAC3B,OAAO,WAAW,gBAAgB,QAAQ,GAAG,IAAI,SAC/C,OAAO,WAAW;GAChB,QAAQ;EACV,CAAC,CACH,CACF;EACA,aAAa,eAAe,KAAK;CACnC,CAAC;CAED,OAAO;EACL,IAAI,UAAU;GACZ,OAAO;EACT;EACA,IAAI,QAAQ,MAAS;GACnB,IAAI,IAAI;EACV;EACA;EACA;CACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thomasfosterau/effect-svelte",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Effect integration for Svelte 5 runes",
   "keywords": [
     "effect",