raf-effect-atom 0.2.5 → 0.3.0

package/CHANGELOG.md

@@ -1,10 +1,35 @@
 # Changelog
 
+## [0.3.0](https://github.com/KATT/raf-effect-atom/compare/raf-effect-atom%400.2.6...raf-effect-atom%400.3.0) (2026-10-23)
+
+### ⚠ BREAKING CHANGES
+
+* **raf-effect-atom:** `raf-effect-atom/next` is `raf-effect-atom/rsc`, without `dehydrate`; write `<HydrationBoundary registry={getRegistry()}>` from `raf-effect-atom` instead of `<HydrateAtoms state={await dehydrate()}>`, and import `RegistryProvider` from `raf-effect-atom`.
+
+### Features
+
+* **raf-effect-atom:** import HydrationBoundary from raf-effect-atom in server components, and the RSC verbs from raf-effect-atom/rsc ([bf7fdbc](https://github.com/KATT/raf-effect-atom/commit/bf7fdbcde2e9f785bd276a08117aefa359051b82))
+
+## [0.2.6](https://github.com/KATT/raf-effect-atom/compare/raf-effect-atom%400.2.5...raf-effect-atom%400.2.6) (2026-10-23)
+
+### Features
+
+- **raf-effect-atom:** start browser-only reads with prefetchInBrowser ([65f783a](https://github.com/KATT/raf-effect-atom/commit/65f783a0014e44a8aa11ce5e8fa34ab863063403))
+
+### Documentation
+
+- **www:** keep a search box's text in the URL, and drop the debounce sample ([a3949bf](https://github.com/KATT/raf-effect-atom/commit/a3949bfca4b64e478132f983033b2776e50ba949))
+
+### Tests
+
+- **raf-effect-atom:** start a browser-only read from a client-only TanStack route ([69a8bd8](https://github.com/KATT/raf-effect-atom/commit/69a8bd887c34a7aeef51fdd20057ac30aa9e1fbc))
+- **raf-effect-atom:** type a derived atom's handle through it and its wrappers ([a16b587](https://github.com/KATT/raf-effect-atom/commit/a16b587a59dc4827dd18ecb3a3d5bb8f6fdedf0b))
+
 ## [0.2.5](https://github.com/KATT/raf-effect-atom/compare/raf-effect-atom%400.2.4...raf-effect-atom%400.2.5) (2026-10-23)
 
 ### Features
 
-* **raf-effect-atom:** start a derived atom's source from the loader verbs, following initialValueTarget ([00a9760](https://github.com/KATT/raf-effect-atom/commit/00a97602068cabf085fa9cfe41e88bf853b6af32))
+- **raf-effect-atom:** start a derived atom's source from the loader verbs, following initialValueTarget ([00a9760](https://github.com/KATT/raf-effect-atom/commit/00a97602068cabf085fa9cfe41e88bf853b6af32))
 
 ## [0.2.4](https://github.com/KATT/raf-effect-atom/compare/raf-effect-atom%400.2.3...raf-effect-atom%400.2.4) (2026-10-23)
 

package/README.md

@@ -52,8 +52,8 @@ function IssueTitle(props: { readonly issue: Handle<typeof issue> }) {
 Each framework has a subpath that gives every server request its own registry and sends it to the browser:
 
 - `raf-effect-atom/tanstack-router`, for TanStack Router and TanStack Start: `setupRouterAtoms({ router, registry })` in `getRouter`, with `Loader.make(registry)` on the router context.
-- `raf-effect-atom/next`, for the App Router: `prefetch`, `ensure` and `fetch` in server components, which pass the handles to client components as props, and `<HydrateAtoms state={await dehydrate()}>` around them. `makeRequestAtoms({ seed })` makes the same functions over a registry seeded from the request, such as with its cookie.
-- `raf-effect-atom/react-router`, for Framework Mode: `atomsMiddleware(atomsContext)` as the root middleware and `clientAtomsMiddleware(atomsContext)` as its client middleware, loaders that return `atoms.dehydrate()` with their handles and double as client loaders, and `HydrationBoundary` in the route component.
+- `raf-effect-atom/rsc`, for React Server Components such as the Next.js App Router: `prefetch`, `ensure` and `fetch` in server components, which pass the handles to client components as props, and `<HydrationBoundary registry={getRegistry()}>` around them. `HydrationBoundary` and `RegistryProvider` come from `raf-effect-atom` itself: server components get the build that takes the request's registry through the `react-server` export condition. `makeRequestAtoms({ seed })` makes the same functions over a registry seeded from the request, such as with its cookie.
+- `raf-effect-atom/react-router`, for Framework Mode: `atomsMiddleware(atomsContext)` as the root middleware and `clientAtomsMiddleware(atomsContext)` as its client middleware, loaders that return `atoms.dehydrate()` with their handles and double as client loaders, and `<HydrationBoundary state={loaderData.atoms}>` in the route component.
 
 In development, `useAtomResult` reports a read that starts an atom nothing started, a request waterfall. `<WaterfallDetection mode="throw">` at the root makes it throw to the nearest error boundary. `useWaterfall(source, ...args)` starts an atom whose input exists only in render, marks it as a known waterfall, and returns its handle.
 

package/dist/Handle.d.mts

@@ -67,6 +67,11 @@ export type HandleKey<S> = string & {
  */
 export interface Handle<S> {
   readonly args: ArgsOf<S>;
+  /**
+   * `true` when `Loader.prefetchInBrowser` ran on the server and left the
+   * atom to the browser: the browser's read starts it.
+   */
+  readonly inBrowser?: true;
   /** The atom's serialization key; `undefined` for an atom without one. */
   readonly key: HandleKey<S> | undefined;
 }

package/dist/Hooks.mjs

@@ -3,6 +3,7 @@ import { stream } from "./internal/pending.mjs";
 import { hydrated } from "./Hydration.mjs";
 import { keyOf, release } from "./internal/leases.mjs";
 import { atomOf, sourceOf } from "./internal/handles.mjs";
+import { isRequestRegistry } from "./RequestRegistry.mjs";
 import { requireRequestRegistry } from "./internal/registry.mjs";
 import { ModeContext, check } from "./internal/waterfalls.mjs";
 import * as Predicate from "effect/Predicate";
@@ -99,6 +100,7 @@ const useAtomResult = (source, handle) => {
 	const registry = React.useContext(RegistryContext);
 	const atom = atomOf(source, handle.args);
 	requireRequestRegistry(registry, "useAtomResult");
+	if (handle.inBrowser === true && isRequestRegistry(registry)) throw new Error(`raf-effect-atom: ${String(atom)} starts in the browser (Loader.prefetchInBrowser), so the server renders the nearest Suspense boundary's fallback, and the browser renders the boundary.`);
 	const target = sourceOf(atom);
 	const started = hydrated(target);
 	const read = target === atom ? hydrated(atom) : atom;
@@ -106,7 +108,7 @@ const useAtomResult = (source, handle) => {
 	if (process.env.NODE_ENV !== "production" && handle.key !== void 0 && Predicate.isString(key) && handle.key !== key) throw new Error(`raf-effect-atom: useAtomResult read the handle of ${handle.key} through a source that makes ${key}. Read a handle through the source that made it.`);
 	const streamed = Predicate.isString(key) ? stream(registry, key) : void 0;
 	if (streamed !== void 0) React.use(streamed);
-	if (process.env.NODE_ENV !== "production") check(registry, started, React.use(ModeContext));
+	if (process.env.NODE_ENV !== "production" && handle.inBrowser !== true) check(registry, started, React.use(ModeContext));
 	if (read !== started) registry.get(started);
 	const current = registry.get(read);
 	const result = useAtomSuspense(read, {

package/dist/Loader.d.mts

@@ -5,7 +5,7 @@ import * as Effect from "effect/Effect";
 import * as AsyncResult from "effect/reactivity/AsyncResult";
 import * as AtomRegistry from "effect/reactivity/AtomRegistry";
 declare namespace Loader_d_exports {
-  export { LeaseTTL, Loader, MakeOptions, SettledResult, ensure, fetch, make, prefetch, result };
+  export { LeaseTTL, Loader, MakeOptions, SettledResult, ensure, fetch, make, prefetch, prefetchInBrowser, result };
 }
 /**
  * A settled `AsyncResult`: what `ensure` and `fetch` return.
@@ -73,6 +73,49 @@ export declare const LeaseTTL: Context.Reference<Duration.Duration>;
  * @since 0.1.0
  */
 export declare const prefetch: <S extends Source>(source: S, ...args: ArgsOf<S>) => Effect.Effect<Handle<S>, never, AtomRegistry.AtomRegistry>;
+/**
+ * Starts a source's atom in the browser, and returns its handle: on the
+ * server, it starts nothing, and the browser's read starts the atom.
+ *
+ * **When to use**
+ *
+ * Use for data only the browser can load: an input the server never sees,
+ * such as a token in the URL's fragment or a permission, or a request the
+ * server can't make. The rest of the page still renders on the server.
+ *
+ * **Details**
+ *
+ * - In the browser, it's `prefetch`: a loader that runs there, such as on a
+ *   client navigation, starts the atom and takes a lease.
+ * - On a request registry, it returns a handle marked `inBrowser` without
+ *   starting the atom, so the atom needs no serialization key. On the
+ *   server, `useAtomResult` throws for that handle, so React renders the
+ *   nearest Suspense boundary's fallback there and renders the boundary in
+ *   the browser. There, the read starts the atom, and the waterfall check
+ *   skips it, since a loader asked for it.
+ *
+ * **Gotchas**
+ *
+ * - Read the handle under a Suspense boundary: on the server, a read
+ *   outside one fails the whole render. React reports the boundary it
+ *   renders in the browser to `onRecoverableError`.
+ * - On a page the server rendered, the request starts when the browser
+ *   renders the read, after hydration's JavaScript has loaded: start the
+ *   data the server can load with `prefetch` or `ensure`.
+ *
+ * **Example**
+ *
+ * ```ts
+ * import { Loader } from "raf-effect-atom"
+ *
+ * const program = Loader.prefetchInBrowser(pushSubscription)
+ * ```
+ *
+ * @stability unstable
+ * @category verbs
+ * @since 0.2.6
+ */
+export declare const prefetchInBrowser: <S extends Source>(source: S, ...args: ArgsOf<S>) => Effect.Effect<Handle<S>, never, AtomRegistry.AtomRegistry>;
 /**
  * Starts a source's atom, waits only while it has no result, and returns a
  * handle whose reader renders without suspending.
@@ -179,6 +222,8 @@ export interface Loader {
    * the seed resolves.
    */
   readonly prefetch: <S extends Source>(source: S, ...args: ArgsOf<S>) => Handle<S>;
+  /** {@link prefetchInBrowser}, run at once. */
+  readonly prefetchInBrowser: <S extends Source>(source: S, ...args: ArgsOf<S>) => Handle<S>;
   /**
    * Runs an Effect that needs the registry, such as the Effect verbs in an
    * `Effect.gen`, as a Promise that rejects with its squashed cause.
@@ -213,8 +258,8 @@ export interface MakeOptions {
  *
  * Use in a framework integration, in loaders that are async functions, or
  * in an event handler that starts an atom before the state change that
- * renders its reader, for state that can't be in the URL, such as a
- * search-as-you-type query. In Effect code, use the verbs directly, and run
+ * renders its reader, for a choice a click or a submit makes that doesn't
+ * belong in the URL. In Effect code, use the verbs directly, and run
  * the Effect on the registry with `run`.
  *
  * **Details**

package/dist/Loader.mjs

@@ -2,7 +2,7 @@ import { __exportAll } from "./_virtual/_rolldown/runtime.mjs";
 import { hydrated } from "./Hydration.mjs";
 import { isDevelopment } from "./internal/development.mjs";
 import { keyOf, take } from "./internal/leases.mjs";
-import { atomOf, loaded as loaded$1, make as make$1, sourceOf } from "./internal/handles.mjs";
+import { atomOf, inBrowser, loaded as loaded$1, make as make$1, sourceOf } from "./internal/handles.mjs";
 import { afterSeed, pending } from "./internal/seeds.mjs";
 import { isRequestRegistry } from "./RequestRegistry.mjs";
 import * as Atom from "effect/reactivity/Atom";
@@ -31,6 +31,9 @@ import * as AtomRegistry from "effect/reactivity/AtomRegistry";
 * | `ensure`   | if it isn't in the registry     | only while it's `Initial`     | returns it at once    |
 * | `fetch`    | if it isn't, or refreshes it    | until the new result settles  | refreshes, then waits |
 *
+* `prefetchInBrowser` is `prefetch` in the browser. On the server, it
+* starts nothing, and the browser's read starts the atom.
+*
 * Typed failures don't reject: `ensure` and `fetch` settle on them, and
 * `result` returns the settled `AsyncResult`, so a loader can redirect on a
 * tag and otherwise let a boundary render the failure. Only defects and
@@ -48,6 +51,7 @@ var Loader_exports = /* @__PURE__ */ __exportAll({
 	fetch: () => fetch,
 	make: () => make,
 	prefetch: () => prefetch,
+	prefetchInBrowser: () => prefetchInBrowser,
 	result: () => result
 });
 /**
@@ -154,6 +158,54 @@ const prefetch = (source, ...args) => Effect.gen(function* () {
 	yield* start(atom);
 	return make$1(args, atom);
 });
+/**
+* Starts a source's atom in the browser, and returns its handle: on the
+* server, it starts nothing, and the browser's read starts the atom.
+*
+* **When to use**
+*
+* Use for data only the browser can load: an input the server never sees,
+* such as a token in the URL's fragment or a permission, or a request the
+* server can't make. The rest of the page still renders on the server.
+*
+* **Details**
+*
+* - In the browser, it's `prefetch`: a loader that runs there, such as on a
+*   client navigation, starts the atom and takes a lease.
+* - On a request registry, it returns a handle marked `inBrowser` without
+*   starting the atom, so the atom needs no serialization key. On the
+*   server, `useAtomResult` throws for that handle, so React renders the
+*   nearest Suspense boundary's fallback there and renders the boundary in
+*   the browser. There, the read starts the atom, and the waterfall check
+*   skips it, since a loader asked for it.
+*
+* **Gotchas**
+*
+* - Read the handle under a Suspense boundary: on the server, a read
+*   outside one fails the whole render. React reports the boundary it
+*   renders in the browser to `onRecoverableError`.
+* - On a page the server rendered, the request starts when the browser
+*   renders the read, after hydration's JavaScript has loaded: start the
+*   data the server can load with `prefetch` or `ensure`.
+*
+* **Example**
+*
+* ```ts
+* import { Loader } from "raf-effect-atom"
+*
+* const program = Loader.prefetchInBrowser(pushSubscription)
+* ```
+*
+* @stability unstable
+* @category verbs
+* @since 0.2.6
+*/
+const prefetchInBrowser = (source, ...args) => Effect.gen(function* () {
+	const atom = atomOf(source, args);
+	if (isRequestRegistry(yield* AtomRegistry.AtomRegistry)) return inBrowser(args, atom);
+	yield* start(atom);
+	return make$1(args, atom);
+});
 const loaded = (args, atom, result) => {
 	const handle = loaded$1(args, atom);
 	results.set(handle, result);
@@ -277,8 +329,8 @@ const either = (first, second) => first === void 0 || second === void 0 ? first
 *
 * Use in a framework integration, in loaders that are async functions, or
 * in an event handler that starts an atom before the state change that
-* renders its reader, for state that can't be in the URL, such as a
-* search-as-you-type query. In Effect code, use the verbs directly, and run
+* renders its reader, for a choice a click or a submit makes that doesn't
+* belong in the URL. In Effect code, use the verbs directly, and run
 * the Effect on the registry with `run`.
 *
 * **Details**
@@ -319,7 +371,15 @@ const make = (registry, options) => {
 			});
 			return make$1(args, atom);
 		},
+		prefetchInBrowser: (source, ...args) => {
+			const atom = atomOf(source, args);
+			if (isRequestRegistry(registry)) return inBrowser(args, atom);
+			afterSeed(registry, () => {
+				Effect.runSync(provide(start(atom)));
+			});
+			return make$1(args, atom);
+		},
 		run: (effect, runOptions) => runPromise(provide(effect), either(signal, runOptions?.signal))
 	};
 };
-export { LeaseTTL, Loader_exports, ensure, fetch, make, prefetch, result };
+export { LeaseTTL, Loader_exports, ensure, fetch, make, prefetch, prefetchInBrowser, result };

package/dist/ReactHydration.d.mts

@@ -1,33 +1,52 @@
 import * as Hydration from "effect/reactivity/Hydration";
+import * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import * as React from "react";
 /**
- * Props for `HydrationBoundary`.
+ * Props for `HydrationBoundary`: the request's `registry` in a server
+ * component, or the `state` it dehydrated anywhere else.
  *
  * @stability unstable
  * @category models
  * @since 0.1.0
  */
-export interface HydrationBoundaryProps {
+export type HydrationBoundaryProps = {
   readonly children?: React.ReactNode | undefined;
+  /**
+   * The request registry of the server component render, such as
+   * `raf-effect-atom/rsc`'s `getRegistry()`. Server components only.
+   */
+  readonly registry: AtomRegistry.AtomRegistry;
+  readonly state?: never;
+} | {
+  readonly children?: React.ReactNode | undefined;
+  readonly registry?: never;
   /** The state `Hydration.dehydrate` returned on the server. */
   readonly state?: Iterable<Hydration.DehydratedAtom> | undefined;
-}
+};
 /**
  * Hydrates the state a server registry dehydrated, streamed results
  * included.
  *
  * **When to use**
  *
- * Use where the server's state reaches the React tree as a prop, such as
- * React Server Components props or a React Router loader's data. A router
- * that hydrates before rendering calls `Hydration.hydrate` instead.
+ * Use where the server's state reaches the React tree through rendering
+ * rather than a router: a server component's registry, or a React Router
+ * loader's data. A router that hydrates before rendering calls
+ * `Hydration.hydrate` instead.
  *
  * **Details**
  *
- * Settled values go to `@effect/atom-react`'s `HydrationBoundary`, which
- * hydrates new atoms during render and existing ones after commit. Each
- * streamed result is held until it arrives, so `useAtomResult` waits for it
- * instead of requesting it again.
+ * In a server component, pass the request's `registry`. Server components
+ * get their own build of `HydrationBoundary` through the package's
+ * `react-server` export condition: it waits for the registry's seed,
+ * dehydrates it, and sends the state with the server component's payload,
+ * so results still loading stream in as they settle.
+ *
+ * Anywhere else, pass the `state` a loader dehydrated. Settled values go to
+ * `@effect/atom-react`'s `HydrationBoundary`, which hydrates new atoms
+ * during render and existing ones after commit. Each streamed result is
+ * held until it arrives, so `useAtomResult` waits for it instead of
+ * requesting it again.
  *
  * During server rendering, when `state` is the array `dehydrate` returned,
  * as React Router passes a loader's data to the server render, the children
@@ -37,15 +56,29 @@ export interface HydrationBoundaryProps {
  *
  * **Gotchas**
  *
- * In development, it throws during server rendering when the registry isn't
- * a request registry, such as `@effect/atom-react`'s default one, which
- * every request shares: one request's state would reach the others.
+ * `registry` works only in server components: in a client component it
+ * throws, since a registry can't cross to the browser. In development, it
+ * throws during server rendering when the registry isn't a request
+ * registry, such as `@effect/atom-react`'s default one, which every request
+ * shares: one request's state would reach the others.
  *
  * **Example**
  *
  * ```tsx
  * import { HydrationBoundary } from "raf-effect-atom"
+ * import { ensure, getRegistry } from "raf-effect-atom/rsc"
+ *
+ * // A server component
+ * export default async function IssueRoute(props: { params: Promise<{ id: string }> }) {
+ *   const handle = await ensure(issue, Number((await props.params).id))
+ *   return (
+ *     <HydrationBoundary registry={getRegistry()}>
+ *       <IssuePage issue={handle} />
+ *     </HydrationBoundary>
+ *   )
+ * }
  *
+ * // A React Router route component
  * <HydrationBoundary state={loaderData.atoms}>
  *   <IssuePage issue={loaderData.issue} />
  * </HydrationBoundary>

package/dist/ReactHydration.mjs

@@ -19,16 +19,24 @@ import { jsx } from "react/jsx-runtime";
 *
 * **When to use**
 *
-* Use where the server's state reaches the React tree as a prop, such as
-* React Server Components props or a React Router loader's data. A router
-* that hydrates before rendering calls `Hydration.hydrate` instead.
+* Use where the server's state reaches the React tree through rendering
+* rather than a router: a server component's registry, or a React Router
+* loader's data. A router that hydrates before rendering calls
+* `Hydration.hydrate` instead.
 *
 * **Details**
 *
-* Settled values go to `@effect/atom-react`'s `HydrationBoundary`, which
-* hydrates new atoms during render and existing ones after commit. Each
-* streamed result is held until it arrives, so `useAtomResult` waits for it
-* instead of requesting it again.
+* In a server component, pass the request's `registry`. Server components
+* get their own build of `HydrationBoundary` through the package's
+* `react-server` export condition: it waits for the registry's seed,
+* dehydrates it, and sends the state with the server component's payload,
+* so results still loading stream in as they settle.
+*
+* Anywhere else, pass the `state` a loader dehydrated. Settled values go to
+* `@effect/atom-react`'s `HydrationBoundary`, which hydrates new atoms
+* during render and existing ones after commit. Each streamed result is
+* held until it arrives, so `useAtomResult` waits for it instead of
+* requesting it again.
 *
 * During server rendering, when `state` is the array `dehydrate` returned,
 * as React Router passes a loader's data to the server render, the children
@@ -38,15 +46,29 @@ import { jsx } from "react/jsx-runtime";
 *
 * **Gotchas**
 *
-* In development, it throws during server rendering when the registry isn't
-* a request registry, such as `@effect/atom-react`'s default one, which
-* every request shares: one request's state would reach the others.
+* `registry` works only in server components: in a client component it
+* throws, since a registry can't cross to the browser. In development, it
+* throws during server rendering when the registry isn't a request
+* registry, such as `@effect/atom-react`'s default one, which every request
+* shares: one request's state would reach the others.
 *
 * **Example**
 *
 * ```tsx
 * import { HydrationBoundary } from "raf-effect-atom"
+* import { ensure, getRegistry } from "raf-effect-atom/rsc"
+*
+* // A server component
+* export default async function IssueRoute(props: { params: Promise<{ id: string }> }) {
+*   const handle = await ensure(issue, Number((await props.params).id))
+*   return (
+*     <HydrationBoundary registry={getRegistry()}>
+*       <IssuePage issue={handle} />
+*     </HydrationBoundary>
+*   )
+* }
 *
+* // A React Router route component
 * <HydrationBoundary state={loaderData.atoms}>
 *   <IssuePage issue={loaderData.issue} />
 * </HydrationBoundary>
@@ -57,6 +79,7 @@ import { jsx } from "react/jsx-runtime";
 * @since 0.1.0
 */
 const HydrationBoundary$1 = (props) => {
+	if (props.registry !== void 0) throw new Error("raf-effect-atom: HydrationBoundary needs `state` here. `registry` works only in server components.");
 	const context = React.useContext(RegistryContext);
 	const state = props.state;
 	const source = isServer() ? sourceOf(state) : void 0;

package/dist/ReactHydration.react-server.d.mts

@@ -0,0 +1,25 @@
+import { HydrationBoundaryProps } from "./ReactHydration.mjs";
+import * as React from "react";
+/**
+ * Sends a server component's request registry to the client components
+ * under it.
+ *
+ * **Details**
+ *
+ * With `registry`, it waits for the registry's seed, dehydrates the atoms
+ * started so far, and renders the client `HydrationBoundary` with that
+ * state. React serializes the state's promises with the payload, so a result
+ * still loading streams in when it settles. With `state`, it passes that
+ * state on.
+ *
+ * **Gotchas**
+ *
+ * Call the verbs before rendering it: each boundary sends what its registry
+ * held when it rendered. It throws for a registry that isn't a request
+ * registry, which every request would share.
+ *
+ * @stability unstable
+ * @category components
+ * @since 0.3.0
+ */
+export declare const HydrationBoundary: (props: HydrationBoundaryProps) => Promise<React.ReactNode>;

package/dist/ReactHydration.react-server.mjs

@@ -0,0 +1,41 @@
+import { dehydrate } from "./Hydration.mjs";
+import { isRequestRegistry, settled } from "./RequestRegistry.mjs";
+import { HydrationBoundary as HydrationBoundary$1 } from "./ReactHydration.mjs";
+import { jsx } from "react/jsx-runtime";
+// src/ReactHydration.react-server.tsx
+/**
+* Sends a server component's request registry to the client components
+* under it.
+*
+* **Details**
+*
+* With `registry`, it waits for the registry's seed, dehydrates the atoms
+* started so far, and renders the client `HydrationBoundary` with that
+* state. React serializes the state's promises with the payload, so a result
+* still loading streams in when it settles. With `state`, it passes that
+* state on.
+*
+* **Gotchas**
+*
+* Call the verbs before rendering it: each boundary sends what its registry
+* held when it rendered. It throws for a registry that isn't a request
+* registry, which every request would share.
+*
+* @stability unstable
+* @category components
+* @since 0.3.0
+*/
+const HydrationBoundary = async (props) => {
+	const registry = props.registry;
+	if (registry === void 0) return /* @__PURE__ */ jsx(HydrationBoundary$1, {
+		state: props.state,
+		children: props.children
+	});
+	if (!isRequestRegistry(registry)) throw new Error("raf-effect-atom: HydrationBoundary got a registry that isn't a request registry, which would share results between requests. Pass raf-effect-atom/rsc's getRegistry(), or one makeRequestAtoms made.");
+	await settled(registry);
+	return /* @__PURE__ */ jsx(HydrationBoundary$1, {
+		state: dehydrate(registry),
+		children: props.children
+	});
+};
+export { HydrationBoundary };

package/dist/ReactRouter.d.mts

@@ -1,5 +1,4 @@
 import { Loader } from "./Loader.mjs";
-import { RegistryProvider } from "./RegistryProvider.mjs";
 import * as EffectHydration from "effect/reactivity/Hydration";
 import * as AtomRegistry from "effect/reactivity/AtomRegistry";
 /**
@@ -140,5 +139,4 @@ export declare const atomsMiddleware: (context: AtomsContext, options?: AtomsMid
  * @category integrations
  * @since 0.2.1
  */
-export declare const clientAtomsMiddleware: (context: AtomsContext) => <Result>(args: MiddlewareArgs, next: () => Promise<Result>) => Promise<Result>;
-export { RegistryProvider };
+export declare const clientAtomsMiddleware: (context: AtomsContext) => <Result>(args: MiddlewareArgs, next: () => Promise<Result>) => Promise<Result>;

package/dist/ReactRouter.mjs

@@ -2,7 +2,6 @@ import { dehydrate } from "./Hydration.mjs";
 import { make, settled } from "./RequestRegistry.mjs";
 import { make as make$1 } from "./Loader.mjs";
 import { current } from "./internal/registry.mjs";
-import { RegistryProvider } from "./RegistryProvider.mjs";
 import * as Predicate from "effect/Predicate";
 // src/ReactRouter.ts
 /**
@@ -11,11 +10,12 @@ import * as Predicate from "effect/Predicate";
 * A root `middleware` gives each server request its own registry, under a
 * router context the app creates. Loaders start atoms with its verbs and
 * return its `dehydrate()` with their data; the route component hydrates it
-* with `HydrationBoundary`, inside the root's `RegistryProvider`. A root
-* `clientMiddleware` puts the browser's registry under the same context, so
-* one function can be both the route's `loader` and its `clientLoader`: after the first
-* page, loaders run in the browser, where `ensure` finds what the registry
-* already holds. Nothing is imported from `react-router`.
+* with `HydrationBoundary`, inside the root's `RegistryProvider`, both from
+* `raf-effect-atom`. A root `clientMiddleware` puts the browser's registry
+* under the same context, so one function can be both the route's `loader`
+* and its `clientLoader`: after the first page, loaders run in the browser,
+* where `ensure` finds what the registry already holds. Nothing is imported
+* from `react-router`.
 *
 * **Example**
 *
@@ -192,7 +192,7 @@ const disposeAfter = (body, registry) => {
 */
 const clientAtomsMiddleware = (context) => (args, next) => {
 	const registry = current();
-	if (registry === void 0) throw new Error("clientAtomsMiddleware found no mounted RegistryProvider: render raf-effect-atom/react-router's RegistryProvider around the app in the root layout.");
+	if (registry === void 0) throw new Error("clientAtomsMiddleware found no mounted RegistryProvider: render raf-effect-atom's RegistryProvider around the app in the root layout.");
 	args.context.set(context, {
 		...make$1(registry, { signal: args.request.signal }),
 		dehydrate: () => [],
@@ -200,4 +200,4 @@ const clientAtomsMiddleware = (context) => (args, next) => {
 	});
 	return next();
 };
-export { RegistryProvider, atomsMiddleware, clientAtomsMiddleware };
+export { atomsMiddleware, clientAtomsMiddleware };

package/dist/RegistryProvider.d.mts

@@ -24,7 +24,7 @@ import * as React from "react";
  * **Example**
  *
  * ```tsx
- * import { RegistryProvider } from "raf-effect-atom/next" // or "raf-effect-atom/react-router"
+ * import { RegistryProvider } from "raf-effect-atom"
  *
  * export default function RootLayout(props: { children: React.ReactNode }) {
  *   return (

package/dist/RegistryProvider.mjs

@@ -5,7 +5,8 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 // src/RegistryProvider.tsx
 /**
-* The registry provider shared by the Next.js and React Router integrations.
+* The registry provider for apps that render the server's state through
+* `HydrationBoundary`, such as React Server Components and React Router.
 *
 * @stability unstable
 * @since 0.1.0
@@ -35,7 +36,7 @@ import { jsx } from "react/jsx-runtime";
 * **Example**
 *
 * ```tsx
-* import { RegistryProvider } from "raf-effect-atom/next" // or "raf-effect-atom/react-router"
+* import { RegistryProvider } from "raf-effect-atom"
 *
 * export default function RootLayout(props: { children: React.ReactNode }) {
 *   return (

package/dist/{Next.d.mts → Rsc.d.mts}

@@ -1,13 +1,10 @@
 import { ArgsOf, Handle, LoadedHandle, Source } from "./Handle.mjs";
 import { Loader } from "./Loader.mjs";
 import { Options } from "./RequestRegistry.mjs";
-import { HydrateAtoms } from "./NextClient.mjs";
-import { RegistryProvider } from "./RegistryProvider.mjs";
-import * as EffectHydration from "effect/reactivity/Hydration";
 import * as AtomRegistry from "effect/reactivity/AtomRegistry";
 /**
  * The loader verbs over the request registry of the server render in
- * progress, with its registry and `dehydrate`.
+ * progress, with its registry.
  *
  * @stability unstable
  * @category models
@@ -15,30 +12,28 @@ import * as AtomRegistry from "effect/reactivity/AtomRegistry";
  */
 export interface RequestAtoms extends Loader {
   /**
-   * `Hydration.dehydrate` on the request's registry, for `HydrateAtoms`,
-   * once its seed has settled.
+   * The request registry of the server render in progress, for
+   * `HydrationBoundary`'s `registry`.
    */
-  readonly dehydrate: () => Promise<Array<EffectHydration.DehydratedAtom>>;
-  /** The request registry of the server render in progress. */
   readonly getRegistry: () => AtomRegistry.AtomRegistry;
 }
 /**
- * Creates the verbs, `getRegistry` and `dehydrate` over a request registry
- * that `seed` prepares.
+ * Creates the verbs and `getRegistry` over a request registry that `seed`
+ * prepares.
  *
  * **When to use**
  *
  * Use when the request's atoms need something from the request before they
  * run, such as an RPC protocol that forwards the page request's cookie. Make
  * them once, in a server-only module, and call the verbs on them instead of
- * the ones `raf-effect-atom/next` exports.
+ * the ones `raf-effect-atom/rsc` exports.
  *
  * **Details**
  *
  * The seed runs on each request's registry when a server component first
  * uses it. It can be async, as `headers()` is: `ensure` and `fetch` wait
  * for it, `prefetch` returns its handle at once and starts the atom once the
- * seed resolves, and `dehydrate` waits for both.
+ * seed resolves, and `HydrationBoundary` waits for both.
  *
  * **Example**
  *
@@ -46,7 +41,7 @@ export interface RequestAtoms extends Loader {
  * // src/atoms.server.ts
  * import "server-only"
  * import { headers } from "next/headers"
- * import { makeRequestAtoms } from "raf-effect-atom/next"
+ * import { makeRequestAtoms } from "raf-effect-atom/rsc"
  *
  * export const atoms = makeRequestAtoms({
  *   seed: async (registry) => {
@@ -90,6 +85,15 @@ export declare const getRegistry: () => AtomRegistry.AtomRegistry;
  * @since 0.1.0
  */
 export declare const prefetch: <S extends Source>(source: S, ...args: ArgsOf<S>) => Handle<S>;
+/**
+ * `Loader.prefetchInBrowser` on the request's registry: returns a handle
+ * whose atom the browser's read starts, without starting it on the server.
+ *
+ * @stability unstable
+ * @category verbs
+ * @since 0.2.6
+ */
+export declare const prefetchInBrowser: <S extends Source>(source: S, ...args: ArgsOf<S>) => Handle<S>;
 /**
  * `Loader.ensure` on the request's registry: starts a source's atom, waits
  * for its result, and returns its handle.
@@ -127,26 +131,4 @@ export declare const fetch: <S extends Source>(source: S, ...args: ArgsOf<S>) =>
  * @category verbs
  * @since 0.2.3
  */
-export declare const run: Loader["run"];
-/**
- * `Hydration.dehydrate` on the request's registry, for `HydrateAtoms`.
- *
- * **Gotchas**
- *
- * Includes the atoms started so far, so call it after the server component's
- * verbs. Each `HydrateAtoms` hydrates what its own `dehydrate()` saw.
- *
- * **Example**
- *
- * ```tsx
- * <HydrateAtoms state={await dehydrate()}>
- *   <Issue issue={handle} />
- * </HydrateAtoms>
- * ```
- *
- * @stability unstable
- * @category dehydration
- * @since 0.1.0
- */
-export declare const dehydrate: () => Promise<Array<EffectHydration.DehydratedAtom>>;
-export { HydrateAtoms, RegistryProvider };
+export declare const run: Loader["run"];

package/dist/{Next.mjs → Rsc.mjs}

@@ -1,24 +1,22 @@
-import { make } from "./internal/next.mjs";
-import { HydrateAtoms } from "./NextClient.mjs";
-import { RegistryProvider } from "./RegistryProvider.mjs";
-// src/Next.ts
+import { make } from "./internal/rsc.mjs";
+// src/Rsc.ts
 /**
-* Creates the verbs, `getRegistry` and `dehydrate` over a request registry
-* that `seed` prepares.
+* Creates the verbs and `getRegistry` over a request registry that `seed`
+* prepares.
 *
 * **When to use**
 *
 * Use when the request's atoms need something from the request before they
 * run, such as an RPC protocol that forwards the page request's cookie. Make
 * them once, in a server-only module, and call the verbs on them instead of
-* the ones `raf-effect-atom/next` exports.
+* the ones `raf-effect-atom/rsc` exports.
 *
 * **Details**
 *
 * The seed runs on each request's registry when a server component first
 * uses it. It can be async, as `headers()` is: `ensure` and `fetch` wait
 * for it, `prefetch` returns its handle at once and starts the atom once the
-* seed resolves, and `dehydrate` waits for both.
+* seed resolves, and `HydrationBoundary` waits for both.
 *
 * **Example**
 *
@@ -26,7 +24,7 @@ import { RegistryProvider } from "./RegistryProvider.mjs";
 * // src/atoms.server.ts
 * import "server-only"
 * import { headers } from "next/headers"
-* import { makeRequestAtoms } from "raf-effect-atom/next"
+* import { makeRequestAtoms } from "raf-effect-atom/rsc"
 *
 * export const atoms = makeRequestAtoms({
 *   seed: async (registry) => {
@@ -72,6 +70,15 @@ const getRegistry = atoms.getRegistry;
 */
 const prefetch = atoms.prefetch;
 /**
+* `Loader.prefetchInBrowser` on the request's registry: returns a handle
+* whose atom the browser's read starts, without starting it on the server.
+*
+* @stability unstable
+* @category verbs
+* @since 0.2.6
+*/
+const prefetchInBrowser = atoms.prefetchInBrowser;
+/**
 * `Loader.ensure` on the request's registry: starts a source's atom, waits
 * for its result, and returns its handle.
 *
@@ -109,25 +116,4 @@ const fetch = atoms.fetch;
 * @since 0.2.3
 */
 const run = atoms.run;
-/**
-* `Hydration.dehydrate` on the request's registry, for `HydrateAtoms`.
-*
-* **Gotchas**
-*
-* Includes the atoms started so far, so call it after the server component's
-* verbs. Each `HydrateAtoms` hydrates what its own `dehydrate()` saw.
-*
-* **Example**
-*
-* ```tsx
-* <HydrateAtoms state={await dehydrate()}>
-*   <Issue issue={handle} />
-* </HydrateAtoms>
-* ```
-*
-* @stability unstable
-* @category dehydration
-* @since 0.1.0
-*/
-const dehydrate = atoms.dehydrate;
-export { HydrateAtoms, RegistryProvider, dehydrate, ensure, fetch, getRegistry, makeRequestAtoms, prefetch, run };
+export { ensure, fetch, getRegistry, makeRequestAtoms, prefetch, prefetchInBrowser, run };

package/dist/Waterfalls.d.mts

@@ -51,7 +51,7 @@ export declare const WaterfallDetection: (props: {
 }) => React.ReactNode;
 /**
  * Starts a source's atom during render and returns its handle, for an input
- * only a render knows, such as a debounced search query.
+ * only a render knows, such as an id read from another atom's result.
  *
  * **When to use**
  *

package/dist/Waterfalls.mjs

@@ -55,7 +55,7 @@ const WaterfallDetection = (props) => process.env.NODE_ENV === "production" ? pr
 });
 /**
 * Starts a source's atom during render and returns its handle, for an input
-* only a render knows, such as a debounced search query.
+* only a render knows, such as an id read from another atom's result.
 *
 * **When to use**
 *

package/dist/index.d.mts

@@ -1,8 +1,10 @@
 import { ArgsOf, ErrorOf, Handle, HandleKey, LoadedHandle, Source, SuccessOf } from "./Handle.mjs";
 import { Loader_d_exports } from "./Loader.mjs";
 import { RequestRegistry_d_exports } from "./RequestRegistry.mjs";
-import { HydrationBoundary, HydrationBoundaryProps } from "./ReactHydration.mjs";
 import { Hydration_d_exports } from "./Hydration.mjs";
 import { useAtomResult } from "./Hooks.mjs";
+import { HydrationBoundary, HydrationBoundaryProps } from "./ReactHydration.mjs";
+import { RegistryProvider } from "./RegistryProvider.mjs";
 import { WaterfallDetection, WaterfallMode, useWaterfall } from "./Waterfalls.mjs";
-export { ArgsOf, ErrorOf, Handle, HandleKey, Hydration_d_exports as Hydration, HydrationBoundary, HydrationBoundaryProps, LoadedHandle, Loader_d_exports as Loader, RequestRegistry_d_exports as RequestRegistry, Source, SuccessOf, WaterfallDetection, WaterfallMode, useAtomResult, useWaterfall };
+import "./index.shared.mjs";
+export { ArgsOf, ErrorOf, Handle, HandleKey, Hydration_d_exports as Hydration, HydrationBoundary, type HydrationBoundaryProps, LoadedHandle, Loader_d_exports as Loader, RegistryProvider, RequestRegistry_d_exports as RequestRegistry, Source, SuccessOf, WaterfallDetection, WaterfallMode, useAtomResult, useWaterfall };

package/dist/index.mjs

@@ -2,6 +2,7 @@ import { Hydration_exports } from "./Hydration.mjs";
 import { RequestRegistry_exports } from "./RequestRegistry.mjs";
 import { Loader_exports } from "./Loader.mjs";
 import { useAtomResult } from "./Hooks.mjs";
-import { HydrationBoundary } from "./ReactHydration.mjs";
+import { RegistryProvider } from "./RegistryProvider.mjs";
 import { WaterfallDetection, useWaterfall } from "./Waterfalls.mjs";
-export { Hydration_exports as Hydration, HydrationBoundary, Loader_exports as Loader, RequestRegistry_exports as RequestRegistry, WaterfallDetection, useAtomResult, useWaterfall };
+import { HydrationBoundary } from "./ReactHydration.mjs";
+export { Hydration_exports as Hydration, HydrationBoundary, Loader_exports as Loader, RegistryProvider, RequestRegistry_exports as RequestRegistry, WaterfallDetection, useAtomResult, useWaterfall };

package/dist/index.react-server.d.mts

@@ -0,0 +1,11 @@
+import { ArgsOf, ErrorOf, Handle, HandleKey, LoadedHandle, Source, SuccessOf } from "./Handle.mjs";
+import { Loader_d_exports } from "./Loader.mjs";
+import { RequestRegistry_d_exports } from "./RequestRegistry.mjs";
+import { Hydration_d_exports } from "./Hydration.mjs";
+import { useAtomResult } from "./Hooks.mjs";
+import { HydrationBoundaryProps } from "./ReactHydration.mjs";
+import { RegistryProvider } from "./RegistryProvider.mjs";
+import { WaterfallDetection, WaterfallMode, useWaterfall } from "./Waterfalls.mjs";
+import "./index.shared.mjs";
+import { HydrationBoundary } from "./ReactHydration.react-server.mjs";
+export { ArgsOf, ErrorOf, Handle, HandleKey, Hydration_d_exports as Hydration, HydrationBoundary, type HydrationBoundaryProps, LoadedHandle, Loader_d_exports as Loader, RegistryProvider, RequestRegistry_d_exports as RequestRegistry, Source, SuccessOf, WaterfallDetection, WaterfallMode, useAtomResult, useWaterfall };

package/dist/index.react-server.mjs

@@ -0,0 +1,8 @@
+import { Hydration_exports } from "./Hydration.mjs";
+import { RequestRegistry_exports } from "./RequestRegistry.mjs";
+import { Loader_exports } from "./Loader.mjs";
+import { useAtomResult } from "./Hooks.mjs";
+import { RegistryProvider } from "./RegistryProvider.mjs";
+import { WaterfallDetection, useWaterfall } from "./Waterfalls.mjs";
+import { HydrationBoundary } from "./ReactHydration.react-server.mjs";
+export { Hydration_exports as Hydration, HydrationBoundary, Loader_exports as Loader, RegistryProvider, RequestRegistry_exports as RequestRegistry, WaterfallDetection, useAtomResult, useWaterfall };

package/dist/index.shared.d.mts

@@ -0,0 +1,9 @@
+import { ArgsOf, ErrorOf, Handle, HandleKey, LoadedHandle, Source, SuccessOf } from "./Handle.mjs";
+import { Loader_d_exports } from "./Loader.mjs";
+import { RequestRegistry_d_exports } from "./RequestRegistry.mjs";
+import { Hydration_d_exports } from "./Hydration.mjs";
+import { useAtomResult } from "./Hooks.mjs";
+import { HydrationBoundaryProps } from "./ReactHydration.mjs";
+import { RegistryProvider } from "./RegistryProvider.mjs";
+import { WaterfallDetection, WaterfallMode, useWaterfall } from "./Waterfalls.mjs";
+export { ArgsOf, ErrorOf, Handle, HandleKey, Hydration_d_exports as Hydration, type HydrationBoundaryProps, LoadedHandle, Loader_d_exports as Loader, RegistryProvider, RequestRegistry_d_exports as RequestRegistry, Source, SuccessOf, WaterfallDetection, WaterfallMode, useAtomResult, useWaterfall };

package/dist/internal/handles.mjs

@@ -23,9 +23,14 @@ const make = (args, atom) => ({
 	args,
 	key: keyOf(atom)
 });
+const inBrowser = (args, atom) => ({
+	args,
+	inBrowser: true,
+	key: keyOf(atom)
+});
 const loaded = (args, atom) => ({
 	args,
 	key: keyOf(atom),
 	loaded: true
 });
-export { atomOf, loaded, make, sourceOf };
+export { atomOf, inBrowser, loaded, make, sourceOf };

package/dist/internal/{next.mjs → rsc.mjs}

@@ -1,8 +1,7 @@
-import { dehydrate } from "../Hydration.mjs";
-import { make as make$1, settled } from "../RequestRegistry.mjs";
+import { make as make$1 } from "../RequestRegistry.mjs";
 import { make as make$2 } from "../Loader.mjs";
 import * as React from "react";
-// src/internal/next.ts
+// src/internal/rsc.ts
 const renderSignal = () => {
 	return React.cacheSignal();
 };
@@ -14,15 +13,11 @@ const make = (options) => {
 	});
 	const getLoader = React.cache(() => make$2(getRegistry(), { signal: renderSignal() ?? void 0 }));
 	return {
-		dehydrate: async () => {
-			const registry = getRegistry();
-			await settled(registry);
-			return dehydrate(registry);
-		},
 		ensure: (source, ...args) => getLoader().ensure(source, ...args),
 		fetch: (source, ...args) => getLoader().fetch(source, ...args),
 		getRegistry,
 		prefetch: (source, ...args) => getLoader().prefetch(source, ...args),
+		prefetchInBrowser: (source, ...args) => getLoader().prefetchInBrowser(source, ...args),
 		run: (effect, runOptions) => getLoader().run(effect, runOptions)
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raf-effect-atom",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Render-as-you-fetch for Effect Atom: start atoms from route loaders and stream them into the browser, typed failures intact",
   "keywords": [
     "effect",
@@ -33,9 +33,12 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs",
-    "./next": "./dist/Next.mjs",
+    ".": {
+      "react-server": "./dist/index.react-server.mjs",
+      "default": "./dist/index.mjs"
+    },
     "./react-router": "./dist/ReactRouter.mjs",
+    "./rsc": "./dist/Rsc.mjs",
     "./tanstack-router": "./dist/TanStackRouter.mjs"
   },
   "peerDependencies": {
@@ -58,7 +61,7 @@
     "@types/react-dom": "19.3.0",
     "@vitest/coverage-v8": "5.0.5",
     "effect": "4.0.6",
-    "effect-atom-boundary": "0.1.1",
+    "effect-atom-boundary": "0.1.2",
     "happy-dom": "21.0.4",
     "react": "19.3.1",
     "react-dom": "19.3.1",

package/dist/NextClient.d.mts

@@ -1,32 +0,0 @@
-import { HydrationBoundaryProps } from "./ReactHydration.mjs";
-import * as React from "react";
-/**
- * Hydrates the state a server component dehydrated with `await dehydrate()`,
- * streamed results included.
- *
- * **Details**
- *
- * React serializes the state's promises with the server component's
- * payload, so a result still loading streams in when it settles, and
- * `useAtomResult` waits for it instead of requesting it again.
- *
- * **Example**
- *
- * ```tsx
- * import { dehydrate, ensure, HydrateAtoms } from "raf-effect-atom/next"
- *
- * export default async function IssuePage(props: { params: Promise<{ id: string }> }) {
- *   const handle = await ensure(issue, Number((await props.params).id))
- *   return (
- *     <HydrateAtoms state={await dehydrate()}>
- *       <Issue issue={handle} />
- *     </HydrateAtoms>
- *   )
- * }
- * ```
- *
- * @stability unstable
- * @category components
- * @since 0.1.0
- */
-export declare const HydrateAtoms: (props: HydrationBoundaryProps) => React.ReactNode;

package/dist/NextClient.mjs

@@ -1,44 +0,0 @@
-"use client";
-import { HydrationBoundary } from "./ReactHydration.mjs";
-import { jsx } from "react/jsx-runtime";
-// src/NextClient.tsx
-/**
-* The client components of `raf-effect-atom/next`.
-*
-* @stability unstable
-* @since 0.1.0
-*/
-/**
-* Hydrates the state a server component dehydrated with `await dehydrate()`,
-* streamed results included.
-*
-* **Details**
-*
-* React serializes the state's promises with the server component's
-* payload, so a result still loading streams in when it settles, and
-* `useAtomResult` waits for it instead of requesting it again.
-*
-* **Example**
-*
-* ```tsx
-* import { dehydrate, ensure, HydrateAtoms } from "raf-effect-atom/next"
-*
-* export default async function IssuePage(props: { params: Promise<{ id: string }> }) {
-*   const handle = await ensure(issue, Number((await props.params).id))
-*   return (
-*     <HydrateAtoms state={await dehydrate()}>
-*       <Issue issue={handle} />
-*     </HydrateAtoms>
-*   )
-* }
-* ```
-*
-* @stability unstable
-* @category components
-* @since 0.1.0
-*/
-const HydrateAtoms = (props) => /* @__PURE__ */ jsx(HydrationBoundary, {
-	state: props.state,
-	children: props.children
-});
-export { HydrateAtoms };