@weftui/router 0.29.0 → 0.30.0

package/dist/client/index.d.ts

@@ -1,5 +1,5 @@
-import { S as Router, b as NavState, i as RouterDef, m as RouteNode, u as Fields, x as NavigateOptions } from "../compile-Bb7AknG_.js";
-import { n as outletNode, r as HrefArgs, t as RouterApp } from "../outlet-2AnUWKQD.js";
+import { S as Router, b as NavState, i as RouterDef, m as RouteNode, u as Fields, x as NavigateOptions } from "../compile-DFlX4Atp.js";
+import { n as outletNode, r as HrefArgs, t as RouterApp } from "../outlet-CWpiNOxW.js";
 import { Effect, Layer, Scope } from "effect";
 import { AppRpcClientTag } from "@weftui/core";
 import { RpcGroup } from "effect/unstable/rpc";

package/dist/client/index.js

@@ -1,5 +1,5 @@
-import { a as Router, i as setResolvedCommit, n as outletNode, o as getPreload, r as preRunLeaf, t as RouterApp } from "../outlet-BgJmsO_g.js";
-import { r as match, t as href } from "../href-3swSSbn_.js";
+import { a as Router, i as setResolvedCommit, n as outletNode, o as getPreload, r as preRunLeaf, t as RouterApp } from "../outlet-Crd9mxZA.js";
+import { r as match, t as href } from "../href-wIrP-_-3.js";
 import { HttpApiClient } from "effect/unstable/httpapi";
 import { Context, Effect, Exit, Fiber, Layer, Option, Schema, Scope, Stream, SubscriptionRef } from "effect";
 import { AppRpcClientTag, Subscribable } from "@weftui/core";
@@ -245,7 +245,7 @@ function pathOf(url) {
 function applyQuery(transform, options) {
 	return Effect.gen(function* () {
 		const router = yield* Router;
-		const match = yield* router.currentMatch.get;
+		const match = yield* Subscribable.get(router.currentMatch);
 		if (match._tag !== "Matched") return;
 		const next = transform(match.query);
 		const search = encodeSearch(Schema.encodeUnknownSync(match.leaf.querySchema)(next));

package/dist/{compile-Bb7AknG_.d.ts → compile-DFlX4Atp.d.ts}

@@ -182,7 +182,7 @@ declare const OutletTag_base: Context.ServiceClass<OutletTag, "@weftui/router/Ou
 declare class OutletTag extends OutletTag_base {}
 /**
  * Reads the live match's **path params** for the requested `fields`. Snapshot
- * semantics (reads `yield* Router`, then `currentMatch.get`), returning the
+ * semantics (reads `yield* Router`, then `Subscribable.get(currentMatch)`), returning the
  * already-decoded values **directly**: the matcher decoded them against the leaf's
  * full path schema, so no re-validation is needed. The cast is sound because the
  * picked subset is the `Type` side of `fields`. Fails with a {@link RouterParamsError}
@@ -198,9 +198,9 @@ declare function readParams<F extends Fields>(fields: F): Effect.Effect<FieldsTy
 declare function readQuery<F extends Fields>(fields: F): Effect.Effect<FieldsType<F>, RouterParamsError, Router>;
 /**
  * Reactive counterpart to {@link readParams}: a {@link Subscribable} of the live
- * match's **path params** for `fields`, derived from `currentMatch.changes`. It
+ * match's **path params** for `fields`, derived from `Subscribable.changes(currentMatch)`. It
  * re-emits on every navigation and stays live across `NotFound` (yielding the empty
- * subset), so a component can render `[(yield* Router.paramsStream(fields)).changes]`
+ * subset), so a component can render `[Subscribable.changes(yield* Router.paramsStream(fields))]`
  * and update in place even when the outlet keeps the same leaf mounted. Re-exported
  * as `Router.paramsStream`.
  */

package/dist/{href-3swSSbn_.js → href-wIrP-_-3.js}

@@ -1,4 +1,4 @@
-import { l as leafRegistry } from "./outlet-BgJmsO_g.js";
+import { l as leafRegistry } from "./outlet-Crd9mxZA.js";
 import { Result, Schema } from "effect";
 //#region src/matcher.ts
 /** Escapes a literal path segment for inclusion in a `RegExp`. */

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-import { A as notFound, C as RouterHttpApiClient, D as RouterNotFound, E as match, O as RouterParamsError, S as Router, T as compileMatchers, _ as TreeE, a as RouterOptions, b as NavState, c as leafRegistry, d as FieldsType, f as LayoutNode, g as SubtreeR, h as SubtreeE, i as RouterDef, k as isRouterNotFound, l as ComponentSlot, m as RouteNode, n as CompiledLayout, o as buildHttpApi, p as RouteHandlerProps, r as CompiledLeaf, s as compile, t as Compiled, u as Fields, v as TreeNode, w as RouteMatch, x as NavigateOptions, y as TreeR } from "./compile-Bb7AknG_.js";
-import { i as href, n as outletNode, r as HrefArgs, t as RouterApp } from "./outlet-2AnUWKQD.js";
+import { A as notFound, C as RouterHttpApiClient, D as RouterNotFound, E as match, O as RouterParamsError, S as Router, T as compileMatchers, _ as TreeE, a as RouterOptions, b as NavState, c as leafRegistry, d as FieldsType, f as LayoutNode, g as SubtreeR, h as SubtreeE, i as RouterDef, k as isRouterNotFound, l as ComponentSlot, m as RouteNode, n as CompiledLayout, o as buildHttpApi, p as RouteHandlerProps, r as CompiledLeaf, s as compile, t as Compiled, u as Fields, v as TreeNode, w as RouteMatch, x as NavigateOptions, y as TreeR } from "./compile-DFlX4Atp.js";
+import { i as href, n as outletNode, r as HrefArgs, t as RouterApp } from "./outlet-CWpiNOxW.js";
 export { type Compiled, type CompiledLayout, type CompiledLeaf, type ComponentSlot, type Fields, type FieldsType, type HrefArgs, type LayoutNode, type NavState, type NavigateOptions, type RouteHandlerProps, type RouteMatch, type RouteNode, Router, RouterApp, type RouterDef, type RouterHttpApiClient, RouterNotFound, type RouterOptions, RouterParamsError, type SubtreeE, type SubtreeR, type TreeE, type TreeNode, type TreeR, buildHttpApi, compile, compileMatchers, href, isRouterNotFound, leafRegistry, match, notFound, outletNode };

package/dist/index.js

@@ -1,3 +1,3 @@
-import { a as Router, c as compile, d as RouterParamsError, f as isRouterNotFound, l as leafRegistry, n as outletNode, p as notFound, s as buildHttpApi, t as RouterApp, u as RouterNotFound } from "./outlet-BgJmsO_g.js";
-import { n as compileMatchers, r as match, t as href } from "./href-3swSSbn_.js";
+import { a as Router, c as compile, d as RouterParamsError, f as isRouterNotFound, l as leafRegistry, n as outletNode, p as notFound, s as buildHttpApi, t as RouterApp, u as RouterNotFound } from "./outlet-Crd9mxZA.js";
+import { n as compileMatchers, r as match, t as href } from "./href-wIrP-_-3.js";
 export { Router, RouterApp, RouterNotFound, RouterParamsError, buildHttpApi, compile, compileMatchers, href, isRouterNotFound, leafRegistry, match, notFound, outletNode };

package/dist/{outlet-2AnUWKQD.d.ts → outlet-CWpiNOxW.d.ts}

@@ -1,4 +1,4 @@
-import { D as RouterNotFound, S as Router, d as FieldsType, i as RouterDef, m as RouteNode, u as Fields } from "./compile-Bb7AknG_.js";
+import { D as RouterNotFound, S as Router, d as FieldsType, i as RouterDef, m as RouteNode, u as Fields } from "./compile-DFlX4Atp.js";
 import { Node } from "@weftui/core";
 //#region src/href.d.ts
 /**

package/dist/{outlet-BgJmsO_g.js → outlet-Crd9mxZA.js}

@@ -301,7 +301,7 @@ function pick(fields, record) {
 }
 /**
 * Reads the live match's **path params** for the requested `fields`. Snapshot
-* semantics (reads `yield* Router`, then `currentMatch.get`), returning the
+* semantics (reads `yield* Router`, then `Subscribable.get(currentMatch)`), returning the
 * already-decoded values **directly**: the matcher decoded them against the leaf's
 * full path schema, so no re-validation is needed. The cast is sound because the
 * picked subset is the `Type` side of `fields`. Fails with a {@link RouterParamsError}
@@ -309,7 +309,8 @@ function pick(fields, record) {
 */
 function readParams(fields) {
 	return Effect.gen(function* () {
-		const match = yield* (yield* Router).currentMatch.get;
+		const router = yield* Router;
+		const match = yield* Subscribable.get(router.currentMatch);
 		if (match._tag === "NotFound") return yield* Effect.fail(new RouterParamsError({
 			source: "path",
 			keys: Object.keys(fields)
@@ -325,7 +326,8 @@ function readParams(fields) {
 */
 function readQuery(fields) {
 	return Effect.gen(function* () {
-		const match = yield* (yield* Router).currentMatch.get;
+		const router = yield* Router;
+		const match = yield* Subscribable.get(router.currentMatch);
 		if (match._tag === "NotFound") return yield* Effect.fail(new RouterParamsError({
 			source: "query",
 			keys: Object.keys(fields)
@@ -343,15 +345,15 @@ function readQuery(fields) {
 function selectStream(currentMatch, fields, source) {
 	const select = (m) => pick(fields, m._tag === "Matched" ? m[source] : {});
 	return Subscribable.make({
-		get: Effect.map(currentMatch.get, select),
-		changes: Stream.map(currentMatch.changes, select)
+		get: Effect.map(Subscribable.get(currentMatch), select),
+		changes: Stream.map(Subscribable.changes(currentMatch), select)
 	});
 }
 /**
 * Reactive counterpart to {@link readParams}: a {@link Subscribable} of the live
-* match's **path params** for `fields`, derived from `currentMatch.changes`. It
+* match's **path params** for `fields`, derived from `Subscribable.changes(currentMatch)`. It
 * re-emits on every navigation and stays live across `NotFound` (yielding the empty
-* subset), so a component can render `[(yield* Router.paramsStream(fields)).changes]`
+* subset), so a component can render `[Subscribable.changes(yield* Router.paramsStream(fields))]`
 * and update in place even when the outlet keeps the same leaf mounted. Re-exported
 * as `Router.paramsStream`.
 */
@@ -370,7 +372,7 @@ function subscribeQuery(fields) {
 }
 /**
 * Reactive {@link Subscribable} of the client {@link NavState}. A component reads
-* `[(yield* Router.navigatingStream).changes]` to render pending UI during a
+* `[Subscribable.changes(yield* Router.navigatingStream)]` to render pending UI during a
 * deferred-commit navigation (`pending-navigation.specs.md`,
 * `resolve-before-commit.specs.md`). Re-exported as `Router.navigatingStream`.
 */
@@ -436,10 +438,10 @@ function takeResolvedCommit(router, url) {
 }
 /**
 * The staged `Router` view the pre-run executes under (AC-R4): identical to
-* `router` except `currentMatch.get` resolves to the **target** match. The URL
+* `router` except `Subscribable.get(currentMatch)` resolves to the **target** match. The URL
 * ref has not moved yet, and one-shot reads (`Router.params`, `Router.query`,
-* `currentMatch.get`) inside the pre-running component body must decode the
-* destination, not the page being left. `currentMatch.changes` (and `navigate` /
+* `Subscribable.get(currentMatch)`) inside the pre-running component body must decode the
+* destination, not the page being left. `Subscribable.changes(currentMatch)` (and `navigate` /
 * `httpApiClient` / `navigating`) delegate to the live service, so reactive
 * subscriptions, which occur at render/mount time post-commit, observe the
 * committed match onward.
@@ -449,7 +451,7 @@ function stageMatch(router, target) {
 		...router,
 		currentMatch: Subscribable.make({
 			get: Effect.succeed(target),
-			changes: router.currentMatch.changes
+			changes: Subscribable.changes(router.currentMatch)
 		})
 	};
 }
@@ -524,7 +526,7 @@ function renderLevel(def, router, index, match) {
 * reactive child region.
 */
 function levelStream(def, router, index) {
-	return pipe(router.currentMatch.changes, Stream.map((match) => [keyOf(index, match), match]), Stream.changesWith((a, b) => a[0] === b[0]), Stream.map(([, match]) => renderLevel(def, router, index, match)));
+	return pipe(Subscribable.changes(router.currentMatch), Stream.map((match) => [keyOf(index, match), match]), Stream.changesWith((a, b) => a[0] === b[0]), Stream.map(([, match]) => renderLevel(def, router, index, match)));
 }
 /**
 * The bare nested-outlet node for a router definition: a fragment whose single

package/dist/server/index.d.ts

@@ -1,4 +1,4 @@
-import { S as Router, i as RouterDef, l as ComponentSlot } from "../compile-Bb7AknG_.js";
+import { S as Router, i as RouterDef, l as ComponentSlot } from "../compile-DFlX4Atp.js";
 import { Effect, Layer } from "effect";
 import { AppRpcClientTag } from "@weftui/core";
 import { RpcGroup } from "effect/unstable/rpc";

package/dist/server/index.js

@@ -1,4 +1,4 @@
-import { a as Router, f as isRouterNotFound, n as outletNode, u as RouterNotFound } from "../outlet-BgJmsO_g.js";
+import { a as Router, f as isRouterNotFound, n as outletNode, u as RouterNotFound } from "../outlet-Crd9mxZA.js";
 import { HttpApiBuilder, HttpApiEndpoint, HttpApiGroup } from "effect/unstable/httpapi";
 import { Cause, Effect, Exit, Layer, Option, Schema, Scope, Stream } from "effect";
 import { AppRpcClientTag, Subscribable } from "@weftui/core";

package/docs/explanation/boundaries-and-suspense.md

@@ -81,13 +81,13 @@ On the server, `renderToStreamHydratable` emits the fallback inline and appends
 Conceptually it is the same idea as the other boundaries: a node that decides what renders in a subtree. But the thing it intercepts is a **round-trip to a server handler**. Instead of a children array, it takes a `render` function that receives a reactive [`Resource`](https://weftui.dev/docs/reference/core#resourcea).
 
 ```typescript
-import { Boundary, h } from "@weftui/core";
+import { Boundary, h, Subscribable } from "@weftui/core";
 import { Stream } from "effect";
 
 Boundary.rpc(
   GetStock,
   () => ({ id: productId }),
-  (resource) => h.span([Stream.map(resource.value.changes, (s) => String(s.units))]),
+  (resource) => h.span([Stream.map(Subscribable.changes(resource.value), (s) => String(s.units))]),
   { fallback: h.p("loading…") },
 );
 ```

package/docs/how-to/add-routing.md

@@ -9,10 +9,10 @@ description: "@weftui/router: universal nested routing, Router.route / Router.la
 
 `@weftui/router` is a universal (server + client) nested router for Weft. It maps a URL to a rendered `Node` tree on both sides:
 
-- **Server**: matches an incoming request path, renders the matched nested page to hydratable HTML, and responds with `text/html` (HTTP 404 for not-found).
-- **Client**: matches `window.location`, swaps pages reactively via the History API, and keeps unchanged ancestor layouts mounted across navigations.
+- **Server**: matches an incoming request path, renders to hydratable HTML.
+- **Client**: matches reactively via the History API.
 
-The package mirrors `@weftui/dom`: a shared (universal) root, a `./client` entry, and a `./server` entry.
+The package exports a shared (universal) root, a `./client` entry, and a `./server` entry.
 
 ```bash
 npm install @weftui/router
@@ -20,9 +20,22 @@ npm install @weftui/router
 
 ## The mental model
 
-A route's **component is its handler**. A page is a component that renders, and its `component` slot is invoked at render time on whichever side the request arrives. Server-resolved data stays with [`Boundary.rpc`](https://weftui.dev/docs/how-to/load-data-with-rpc); client-side async stays with `Boundary.suspend`.
+A route's **component is its handler**. A page is a component that renders, and its `component` slot is invoked at render time.
 
-You author an **explicit nested route tree** with three namespaced combinators (mirroring the `h.div` / `Component.gen` / `Boundary.catchTag` surface) and seal it once:
+```typescript
+const homeRoute = Router.route("", { component: Home });
+const aboutRoute = Router.route("about", { component: About });
+const userRoute = Router.route("users/:id", {
+  path: { id: Schema.NumberFromString },
+  component: ({ path }) => h.h1(`User ${path.id}`),
+});
+
+const App = Router.router(Router.layout({ component: Shell }, [homeRoute, aboutRoute, userRoute]), {
+  notFound: () => h.h1("404"),
+});
+```
+
+You author a **nested route tree** with namespaced combinators and seal it once:
 
 | Combinator                                            | Builds                                                           |
 | ----------------------------------------------------- | ---------------------------------------------------------------- |
@@ -34,7 +47,7 @@ The tree is the source of truth. The same sealed `RouterDef` drives both server
 
 ## Authoring routes
 
-Every `component` slot is a **`ComponentSlot`**: a callable producing a `Node`, passed **uncalled**. Use [`Component.make` / `Component.gen`](https://weftui.dev/docs/how-to/author-components) (or a plain `() => Node` thunk). The router invokes it at render time, which lets `href(…)` resolve after the tree is compiled.
+Every **`ComponentSlot`** produces a `Node` when called. Use [`Component.make` / `Component.gen`](https://weftui.dev/docs/how-to/author-components) (or a plain `() => Node` thunk). The router invokes it at render time, which lets `href(…)` resolve after the tree is compiled.
 
 ```typescript
 import { Component, h } from "@weftui/core";
@@ -54,10 +67,13 @@ const User = Router.route("users/:id", {
 });
 ```
 
-- **`segment`** is relative to the parent and may contain `:name` path-param placeholders (e.g. `"users/:id"`). A leading/trailing `/` is tolerated. Each leaf carries its full relative path (e.g. `"users/:id/settings"`).
-- **`path` / `query`** are `Schema.Struct.Fields` (a record of `name → Schema`), declared **only on routes**. The compiler covers every `:name` placeholder in `pathSchema`, defaulting to `Schema.String` when a placeholder has no declared field. Query fields are optional by default.
+- **`segment`** is relative to the parent and may contain `:name` path-param placeholders (e.g. `"users/:id"`). A leading/trailing `/` is tolerated.
+
+Each leaf carries its full relative path (e.g. `"users/:id/settings"`).
 
-> Authoring components with `Component.make` / `Component.gen` keeps every slot fully typed: the router never sees a `Node<any, any>`. Each component's `E`/`R` channels aggregate up through `Router.layout` / `Router.router` into the sealed `RouterDef`.
+**`path` / `query`** are `Schema.Struct.Fields` (a record of `name → Schema`), declared **only on routes**. The compiler covers every `:name` placeholder in `pathSchema`, defaulting to `Schema.String` when a placeholder has no declared field. Query fields are optional by default.
+
+> Authoring components with `Component.make` / `Component.gen` keeps every slot fully typed: Each component's `E`/`R` channels aggregate up through `Router.layout` / `Router.router` into the sealed `RouterDef`.
 
 ## Reading the match: handler-arg props vs. injection
 
@@ -97,9 +113,29 @@ const UserShell = Component.gen(function* () {
 
 `Router.params(fields)` / `Router.query(fields)` read the live match and pick the requested `fields` keys (already decoded by the matcher, so no re-validation). They return the typed values. When no route matches, they fail with a tagged [`RouterParamsError`](#errors) carrying `source: "path" | "query"` and the requested `keys`.
 
-That error bubbles into the app node's aggregate `E`, so a user may recover it with `Boundary.catchTag("RouterParamsError", …)`.
+That error bubbles into the app node's aggregate `E`, so a user may recover it with `Boundary.catchTag(…)`.
+
+### Reactive accessors: `paramsStream` / `queryStream`
+
+`Router.paramsStream(fields)` / `Router.queryStream(fields)` are the reactive counterparts of `params` / `query`. Each resolves a `Subscribable` derived from `Subscribable.changes(currentMatch)`, so a component can update **in place** even when the same leaf stays mounted, the case a query-only navigation (`setQuery` / `patchQuery`, see [Programmatic navigation](#programmatic-navigation)) produces and a snapshot `Router.query` would miss:
+
+```typescript
+import { Component, h, Subscribable } from "@weftui/core";
+import { Router } from "@weftui/router";
+import { Schema, Stream } from "effect";
+
+const sortQuery = { sort: Schema.optional(Schema.String) };
+
+const ProductsPage = Component.gen(function* () {
+  const query = yield* Router.queryStream(sortQuery);
+  return yield* h.section([
+    h.h2("Products"),
+    h.p(["sort: ", Stream.map(Subscribable.changes(query), (q) => q.sort ?? "none")]),
+  ]);
+});
+```
 
-> **Reactive accessors.** `Router.paramsStream(fields)` / `Router.queryStream(fields)` are the reactive counterparts. Each resolves a `Subscribable` derived from `currentMatch.changes`. A component can render `[(yield* Router.queryStream(sortQuery)).changes]` and update **in place** even when the same leaf stays mounted (the query-only case `Router.query` would miss). See [Programmatic navigation](#programmatic-navigation).
+A `NotFound` match yields the empty subset rather than failing, so the stream stays live across navigations.
 
 ## Layouts and the outlet
 
@@ -121,7 +157,30 @@ A layout owns **no `segment` or `path`**; all path structure lives on routes. A
 
 ### Layout persistence
 
-Each nesting level renders as a reactive stream child keyed by `(pattern + the param values that level depends on)` and `dedupe`d. An unchanged ancestor layout therefore **stays mounted** across a navigation that only changes a deeper level. Its DOM identity and any local state (a `SubscriptionRef`, a scroll position) survive while only the inner outlet swaps.
+Each nesting level renders as a reactive stream child keyed by `(pattern + the param values that level depends on)` and `dedupe`d. An unchanged ancestor layout therefore **stays mounted** across a navigation that only changes a deeper level: its DOM identity and any local state (a `SubscriptionRef`, a scroll position) survive while only the inner outlet swaps.
+
+```typescript
+import { Component, h } from "@weftui/core";
+import { Router } from "@weftui/router";
+import { Clock } from "effect";
+
+// UserShell's body runs once per distinct `:id`. Navigating between
+// /users/1/settings and /users/1/posts doesn't change `:id`, so this
+// instance (and `sessionStart`) is never recreated: only `outlet` swaps.
+const UserShell = Component.gen(function* () {
+  const { id } = yield* Router.params(idParam);
+  const outlet = yield* Router.Outlet;
+  const sessionStart = yield* Clock.currentTimeMillis;
+
+  return yield* h.div({ class: "user" }, [
+    h.p(`shell mounted at ${sessionStart}`),
+    h.h1(`User ${id}`),
+    outlet,
+  ]);
+});
+```
+
+Navigate from `/users/1/settings` to `/users/1/posts` and the mounted timestamp stays the same; navigate to `/users/2/settings` and it re-renders, since `:id` changed.
 
 ## Sealing the tree
 
@@ -175,7 +234,7 @@ Router.route("users/:id", {
 });
 ```
 
-`RouterNotFound` is exported, so a `Boundary.catchTag("RouterNotFound", …)` placed inside a subtree overrides the app-level fallback for that subtree. The router's internal boundary is outermost, so a nearer user boundary wins.
+`RouterNotFound` is exported, so a `Boundary.catchTag(…)` placed inside a subtree overrides the app-level fallback for that subtree. The router's internal boundary is outermost, so a nearer user boundary wins.
 
 > **`Schema.NumberFromString` gotcha.** Decoding no longer fails on a non-numeric segment: `/users/abc` decodes `id` to `NaN` instead of missing the route. A leaf that guards a numeric param must check `Number.isFinite(id)` itself (as above). Relying on the schema alone to 404 non-numeric input no longer works.
 
@@ -183,21 +242,103 @@ Router.route("users/:id", {
 
 On the client, provide the `Router` via `RouterLive(def)` and render `RouterApp(def)`. `RouterLive` is a **scoped layer**: it owns the `popstate` listener and the same-origin link-click interceptor, so it must outlive the mount.
 
-Give it to `WeftApp.make`. The app runtime owns it for the app's lifetime, built lazily on first hydrate and released only at `WeftApp.dispose`. Do not wrap `Effect.provide` around the mount/hydrate call; services come exclusively from the app layer.
+Give it to `WeftApp.make`. The app runtime owns it for the app's lifetime, built lazily on first mount/hydrate and released only at `WeftApp.dispose`. Do not wrap `Effect.provide` around the mount/hydrate call; services come exclusively from the app layer. `RouterLive`'s only required argument is the sealed `App`; a second `options` argument adds an rpc group or a custom `baseUrl` when needed (see [`Boundary.rpc` interplay](#boundaryrpc-interplay)).
+
+```typescript
+const app = WeftApp.make(RouterLive(App));
+void Effect.runPromise(WeftApp.mount(app, RouterApp(App), root));
+```
+
+### Client-only app
+
+A complete, no-SSR app: three routes under one `Shell` layout, mounted directly into an empty `#root`. This is the whole file set, copy/paste runnable in a `vite` + `@weftui/router` project.
+
+```html
+<!-- index.html -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Weft routing demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+```
+
+```typescript
+// src/app.ts
+/**
+ * Client-only routing demo: a Shell layout with Home, About, and a dynamic
+ * User page, sealed into a single RouterDef. Side-effect-free (no mount call),
+ * so `main.ts` and any test can import `App` directly.
+ */
+import { Component, h } from "@weftui/core";
+import { href, notFound, Router } from "@weftui/router";
+import { Schema } from "effect";
+
+const idParam = { id: Schema.NumberFromString };
+
+const homeRoute = Router.route("", {
+  component: Component.make(() => h.section({ id: "page" }, [h.h2("Home")])),
+});
+
+const aboutRoute = Router.route("about", {
+  component: Component.make(() => h.section({ id: "page" }, [h.h2("About")])),
+});
+
+const userRoute = Router.route("users/:id", {
+  path: idParam,
+  component: ({ path }) => {
+    if (!Number.isFinite(path.id) || path.id < 0) return notFound();
+    return h.section({ id: "page" }, [h.h2(`User ${path.id}`)]);
+  },
+});
+
+const Shell = Component.gen(function* () {
+  const outlet = yield* Router.Outlet;
+  return yield* h.div({ id: "app" }, [
+    h.nav([
+      h.a({ href: href(homeRoute) }, "Home"),
+      " · ",
+      h.a({ href: href(aboutRoute) }, "About"),
+      " · ",
+      h.a({ href: href(userRoute, { path: { id: 1 } }) }, "User 1"),
+    ]),
+    h.main([outlet]),
+  ]);
+});
+
+export const App = Router.router(
+  Router.layout({ component: Shell }, [homeRoute, aboutRoute, userRoute]),
+  { notFound: () => h.section({ id: "page" }, [h.h2("404: page not found")]) },
+);
+```
 
 ```typescript
-// entry-client.ts
+// src/main.ts
+/**
+ * Browser entry: mounts the routing demo into `#root`. No server render to
+ * hydrate, so this uses `WeftApp.mount`, not `hydrate`.
+ */
 import { WeftApp } from "@weftui/dom/client";
 import { RouterApp, RouterLive } from "@weftui/router/client";
 import { Effect } from "effect";
 import { App } from "./app";
 
-const root = document.getElementById("root")!;
+const root = document.getElementById("root");
+if (root === null) {
+  throw new Error("#root not found");
+}
+
 const app = WeftApp.make(RouterLive(App));
-void Effect.runPromise(WeftApp.hydrate(app, RouterApp(App), root));
+void Effect.runPromise(WeftApp.mount(app, RouterApp(App), root));
 ```
 
-For a client-only app (no SSR), swap `WeftApp.hydrate` for `WeftApp.mount`; everything else is identical.
+`WeftApp.mount(app, node, root)` clears `root` and renders `node` fresh, in contrast to `hydrate`, which adopts existing server-rendered DOM (see [Full SSR example](#full-ssr-example) below). Everything else, the layout, `href`, params, navigation, is identical between the two setups.
 
 ### Link interception
 
@@ -209,6 +350,11 @@ A plain `h.a({ href })` to a same-origin, route-matching URL performs SPA naviga
 - same-document (hash-only) navigations
 - hrefs that don't resolve to a route
 
+```typescript
+h.a({ href: "/about" }, "About"); // intercepted: SPA navigation, no reload
+h.a({ href: "/about", target: "_blank" }, "About"); // native: falls through
+```
+
 You don't wire anything up. `RouterLive` installs the delegated listener for the layer's lifetime and removes it on teardown.
 
 ## Programmatic navigation
@@ -265,10 +411,98 @@ On the server, `RouterServer`:
 - renders `RouterApp` to hydratable HTML inside a **document shell**
 - reports a status (404 when no route matches or a page raises `RouterNotFound`)
 
-The document shell is itself a `ComponentSlot` that splices the app via `yield* Router.Outlet`, exactly like a layout receives its outlet:
+The document shell is itself a `ComponentSlot` that splices the app via `yield* Router.Outlet`, exactly like a layout receives its outlet.
+
+```typescript
+const { html, status } = await Effect.runPromise(
+  RouterServer.render(App, { document: documentShell, url }),
+);
+```
+
+### Full SSR example
+
+The same three routes as the [client-only app](#client-only-app), rendered on the server as hydratable HTML and hydrated in the browser. This is the whole file set (drop it alongside a dev server that bridges `entry-server.ts`'s `handler` into Vite or any Web-platform server; see [`examples/router-ssr/server.ts`](https://github.com/stefvw93/weft/blob/main/examples/router-ssr/server.ts) for a working one).
+
+```typescript
+// src/app.ts
+/**
+ * Shared, isomorphic router app: three pages under one persistent Shell
+ * layout. Side-effect-free: it never mounts or serves. `entry-server.ts`
+ * renders the matched route on the server; `entry-client.ts` hydrates over it.
+ */
+import { Component, h } from "@weftui/core";
+import { href, notFound, Router } from "@weftui/router";
+import { Schema } from "effect";
+
+const idParam = { id: Schema.NumberFromString };
+
+export const homeRoute = Router.route("", {
+  component: Component.make(() => h.section({ id: "page" }, [h.h2("Home")])),
+});
+
+export const aboutRoute = Router.route("about", {
+  component: Component.make(() => h.section({ id: "page" }, [h.h2("About")])),
+});
+
+export const userRoute = Router.route("users/:id", {
+  path: idParam,
+  component: ({ path }) => {
+    if (!Number.isFinite(path.id) || path.id < 0) return notFound();
+    return h.section({ id: "page" }, [h.h2(`User ${path.id}`)]);
+  },
+});
+
+const Shell = Component.gen(function* () {
+  const outlet = yield* Router.Outlet;
+  return yield* h.div({ id: "app" }, [
+    h.nav([
+      h.a({ href: href(homeRoute) }, "Home"),
+      " · ",
+      h.a({ href: href(aboutRoute) }, "About"),
+    ]),
+    h.main([outlet]),
+  ]);
+});
+
+export const App = Router.router(
+  Router.layout({ component: Shell }, [homeRoute, aboutRoute, userRoute]),
+  { notFound: () => h.section({ id: "page" }, [h.h2("404: page not found")]) },
+);
+```
+
+```typescript
+// src/entry-client.ts
+/**
+ * Client entry: hydrates the server-rendered markup in `#root`.
+ *
+ * `RouterApp(App)` is the universal router root; `RouterLive(App)` provides
+ * the History-API-backed `Router` (seeded from `window.location`, with the
+ * same-origin link click interceptor installed). `hydrate` adopts the server
+ * DOM in place and resumes the reactive outlet.
+ */
+import { WeftApp } from "@weftui/dom/client";
+import { RouterApp, RouterLive } from "@weftui/router/client";
+import { Effect } from "effect";
+import { App } from "./app";
+
+const root = document.getElementById("root");
+if (root === null) {
+  throw new Error("#root not found");
+}
+
+const app = WeftApp.make(RouterLive(App));
+void Effect.runPromise(WeftApp.hydrate(app, RouterApp(App), root));
+```
 
 ```typescript
-// entry-server.ts
+// src/entry-server.ts
+/**
+ * Server entry: renders the matched route to a hydratable HTML document.
+ *
+ * `documentShell` splices the app via `yield* Router.Outlet` (injected per
+ * request by `RouterServer`). `render` drives it for a single `url`; `handler`
+ * is a Web `fetch`-style handler ready to bridge into Vite or any Web server.
+ */
 import { Component, h } from "@weftui/core";
 import { Router } from "@weftui/router";
 import { RouterServer } from "@weftui/router/server";
@@ -287,14 +521,16 @@ const documentShell = Component.gen(function* () {
 });
 
 // { html, status }: `<!DOCTYPE html>` is prepended for you.
-export const render = (url: string) =>
+export const render = (url: string): Promise<{ html: string; status: number }> =>
   Effect.runPromise(RouterServer.render(App, { document: documentShell, url }));
 
-// Or a Web fetch-style handler, ready to bridge into Vite or any Web server.
+// A Web fetch-style handler, ready to bridge into Vite or any Web server.
 export const handler = RouterServer.toWebHandler(App, { document: documentShell });
 ```
 
-`render` provides both `Router.Outlet` (the app, per request) and `Router` (so the shell may read params). It renders through `renderToStringHydratable` so the client can `hydrate` in place.
+`render` provides both `Router.Outlet` (the app, per request) and `Router` (so the shell may read params). It renders through `renderToStringHydratable` so the client can `hydrate` in place. Neither `RouterLive` nor `RouterServer` needs an `rpc` option here: it's optional and only required once a page uses [`Boundary.rpc`](#boundaryrpc-interplay).
+
+`handler` still needs a server to call it. [`examples/router-ssr/server.ts`](https://github.com/stefvw93/weft/blob/main/examples/router-ssr/server.ts) shows the shape: a Node HTTP server that runs Vite in middleware mode, converts each request to a Web `Request`, calls `handler`, and runs HTML responses through `vite.transformIndexHtml` for HMR (non-HTML responses, like a `Boundary.rpc` refetch, are forwarded untouched). See that file and its co-located [`vite.config.ts`](https://github.com/stefvw93/weft/blob/main/examples/router-ssr/vite.config.ts) for the full dev-server wiring; it's the same shape in production behind any Web-platform host.
 
 ### `effect/unstable/httpapi` is the spine
 
@@ -305,27 +541,68 @@ The result is a single `"pages"` group with one GET endpoint per leaf at its ful
 - **Server**: `RouterServer` dispatches through `HttpApiBuilder` (platform owns request→leaf matching, path/query decode, and the 404 status).
 - **Client**: `RouterLive` derives a real `HttpApiClient` from the same `def.httpApi` (exposed as `Router.httpApiClient`) for network work. SPA URL→leaf resolution stays **local**; there is no public client-side "match this URL against my `HttpApi`" utility in platform. It is fed from the same endpoint definitions, so it never drifts from the server.
 
+```typescript
+import { Option } from "effect";
+
+App.httpApi; // HttpApi.Top: one "pages" group, a GET endpoint per leaf
+
+const { httpApiClient } = yield * Router;
+Option.isSome(httpApiClient); // true under RouterLive, false under RouterServer
+```
+
 ## Errors
 
-| Error               | Raised by                                                             | Recover with                                                                |
-| ------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------- |
-| `RouterNotFound`    | `notFound()`, or no route matched                                     | `Boundary.catchTag("RouterNotFound", …)` (or the app-level `notFound` page) |
-| `RouterParamsError` | `Router.params` / `Router.query` on a missing/invalid key or no match | `Boundary.catchTag("RouterParamsError", …)`                                 |
+| Error               | Raised by                                                             | Recover with                                              |
+| ------------------- | --------------------------------------------------------------------- | --------------------------------------------------------- |
+| `RouterNotFound`    | `notFound()`, or no route matched                                     | `Boundary.catchTag(…)` (or the app-level `notFound` page) |
+| `RouterParamsError` | `Router.params` / `Router.query` on a missing/invalid key or no match | `Boundary.catchTag(…)`                                    |
 
 Both are modeled as `Schema.TaggedErrorClass`, so they encode/decode across the wire the same way `Boundary.rpc` replays typed failures.
 
+Recover locally by wrapping just the subtree that can fail, rather than relying on the app-level `notFound` page for everything:
+
+```typescript
+import { Boundary, Component, h } from "@weftui/core";
+import { Router } from "@weftui/router";
+
+const UserShell = Component.gen(function* () {
+  const outlet = yield* Router.Outlet;
+  return yield* h.div({ class: "user" }, [
+    Boundary.catchTag(
+      {
+        tag: "RouterParamsError",
+        fallback: () => h.p({ class: "error" }, "Couldn't read this page's params."),
+      },
+      [outlet],
+    ),
+  ]);
+});
+```
+
+The matched tag is removed from the boundary's output `E`; an unmatched error (e.g. `RouterNotFound`) re-raises to the nearest parent boundary, which is the router's own not-found boundary if nothing closer catches it.
+
 ## `Boundary.rpc` interplay
 
 Initial SSR navigation works end to end: the server resolves the rpc and inlines its payload, and the client replays it during `hydrate`.
 
 **Client-side** navigation into a page containing a `Boundary.rpc` has no SSR payload, so the boundary performs a **client-first mount**. It renders the boundary's `fallback`, forks the rpc call over `POST /_eui/rpc`, and swaps in the result.
 
-`@weftui/router` provides the `AppRpcClientTag` seam on both sides (network client on the client, in-process on the server). The same rpc backs SSR-replay, refetch, and client-first mount. See the [rpc data boundaries guide](https://weftui.dev/docs/how-to/load-data-with-rpc).
+`@weftui/router` provides the `AppRpcClientTag` seam on both sides (network client on the client, in-process on the server). The same rpc backs SSR-replay, refetch, and client-first mount. Both `RouterLive` and `RouterServer` take an optional `{ rpc: { group } }` (server also needs `handlers`) to wire it: see the [rpc data boundaries guide](https://weftui.dev/docs/how-to/load-data-with-rpc) and [`examples/router-ssr`](https://github.com/stefvw93/weft/tree/main/examples/router-ssr) for the full contract/handler split.
+
+```typescript
+// client (entry-client.ts): network rpc client over the shared group
+const app = WeftApp.make(RouterLive(App, { rpc: { group: StockRpcs } }));
+
+// server (entry-server.ts): same group, plus its handler Layer
+const rpc = { group: StockRpcs, handlers: StockLive };
+export const handler = RouterServer.toWebHandler(App, { document: documentShell, rpc });
+```
 
 ## See also
 
 - [`@weftui/router` API reference](https://weftui.dev/docs/reference/router)
-- [examples/router-ssr](https://github.com/stefvw93/weft/tree/main/examples/router-ssr): a runnable SSR + hydration app with nested layouts, persistent layout state, type-safe `href`s, handler-arg props, and programmatic navigation over the `effect/unstable/httpapi` spine
+- [examples/router-ssr](https://github.com/stefvw93/weft/tree/main/examples/router-ssr): a runnable SSR + hydration app with nested layouts, persistent layout state, type-safe `href`s, handler-arg props, `Boundary.rpc`, and programmatic navigation over the `effect/unstable/httpapi` spine
+- [examples/router-client](https://github.com/stefvw93/weft/tree/main/examples/router-client): the client-only counterpart, no server, no SSR, no `Boundary.rpc`
 - [Component Authoring](https://weftui.dev/docs/how-to/author-components): `Component.make` / `Component.gen`, the idiomatic way to write route components
 - [Server-Side Rendering](https://weftui.dev/docs/how-to/render-on-the-server): `renderToStringHydratable`, `hydrate`, and `Boundary.rpc`
 - [RPC Data Boundaries](https://weftui.dev/docs/how-to/load-data-with-rpc): `Boundary.rpc`, the `Resource` handle, and the four lifecycles

package/docs/how-to/author-components.md

@@ -193,13 +193,13 @@ When a caller passes a plain string, the component's node type has `never` for t
 Splicing a `Source` straight into `h` (`[props.label]`) is enough when you only place it in the tree. When the body needs to **read or derive** from the value (combine two props, feed a stream operator, drive logic), normalize it first with [`Source.toSubscribable`](https://weftui.dev/docs/reference/core#sourcetosubscribablesource-key). It turns any `Source<A>` into an await-first, hot `Subscribable<A>`:
 
 ```typescript
-import { Component, h, Source } from "@weftui/core";
+import { Component, h, Source, Subscribable } from "@weftui/core";
 import { Stream } from "effect";
 
 const LoudLabel = Component.gen(function* (props: { label: Source.Source<string> }) {
   const label = yield* Source.toSubscribable(props.label); // Subscribable<string>
   // Now derive from it like any Subscribable: static, Effect, and Stream inputs all work.
-  return yield* h.strong([Stream.map(label.changes, (text) => text.toUpperCase())]);
+  return yield* h.strong([Stream.map(Subscribable.changes(label), (text) => text.toUpperCase())]);
 });
 ```
 

package/docs/how-to/load-data-with-rpc.md

@@ -14,7 +14,7 @@ description: Boundary.rpc, server-resolved and client-refreshable data; the cont
 A `Boundary.rpc` is a **thin consumer**. It carries an rpc, a payload thunk, and a `render` that receives a reactive [`Resource`](https://weftui.dev/docs/reference/core#resourcea). The renderer resolves the rpc through the ambient [`AppRpcClientTag`](https://weftui.dev/docs/reference/core#apprpcclienttag) seam (provided by `@weftui/router`). The same rpc serves every lifecycle, so SSR-replay, refetch, and client-first mount are one mechanism, not three.
 
 ```typescript
-import { Boundary, h } from "@weftui/core";
+import { Boundary, h, Subscribable } from "@weftui/core";
 import { Stream } from "effect";
 import { GetStock } from "./data/inventory";
 
@@ -26,7 +26,7 @@ Boundary.rpc(
   ) =>
     h.p([
       "in stock: ",
-      h.span([Stream.map(resource.value.changes, (s) => String(s.units))]),
+      h.span([Stream.map(Subscribable.changes(resource.value), (s) => String(s.units))]),
       h.button({ type: "button", onclick: () => resource.refetch }, "Refresh"),
     ]),
   { fallback: h.p("loading stock…") }, // shown only on a client-first mount
@@ -127,8 +127,8 @@ Because the SSR path seeds `value` await-first (it emits the seed immediately),
 ```typescript
 (resource) =>
   h.section({ class: "product" }, [
-    h.span([Stream.map(resource.value.changes, (s) => String(s.units))]),
-    h.span([Stream.map(resource.pending.changes, (p) => (p ? "refreshing…" : ""))]),
+    h.span([Stream.map(Subscribable.changes(resource.value), (s) => String(s.units))]),
+    h.span([Stream.map(Subscribable.changes(resource.pending), (p) => (p ? "refreshing…" : ""))]),
     h.button({ type: "button", onclick: () => resource.refetch }, "Refresh stock"),
   ]);
 ```

package/docs/how-to/render-keyed-lists.md

@@ -12,14 +12,14 @@ description: Render a reactive collection with List.each so reordering, insertin
 Use [`List.each`](https://weftui.dev/docs/reference/core#listeach), the keyed-list combinator. It renders each item **once per key** and reconciles across emissions. A reorder _moves_ existing DOM nodes, an insert adds one, a remove drops one, and untouched rows are left entirely alone.
 
 ```typescript
-import { h, List } from "@weftui/core";
+import { h, List, Subscribable } from "@weftui/core";
 import { Stream } from "effect";
 
 declare const rows: Subscribable.Subscribable<ReadonlyArray<{ id: number; name: string }>>;
 
 h.ul([
   List.each(
-    { of: rows.changes, by: (row) => row.id }, // key by stable identity
+    { of: Subscribable.changes(rows), by: (row) => row.id }, // key by stable identity
     (row) => h.li(row.name),
   ),
 ]);
@@ -30,7 +30,7 @@ h.ul([
 
 ## Why not `map`?
 
-Mapping items by hand (`Stream.map(rows.changes, (rs) => rs.map(r => h.li(r.name)))`) produces a **new children array on every emission**. The renderer then rebuilds the whole region: every row's DOM node is recreated even if only one item moved.
+Mapping items by hand (`Stream.map(Subscribable.changes(rows), (rs) => rs.map(r => h.li(r.name)))`) produces a **new children array on every emission**. The renderer then rebuilds the whole region: every row's DOM node is recreated even if only one item moved.
 
 `List.each` reconciles by key instead, so DOM identity (and the focus/scroll/typed-input state attached to it) survives across updates.
 
@@ -39,8 +39,8 @@ Mapping items by hand (`Stream.map(rows.changes, (rs) => rs.map(r => h.li(r.name
 Because `render` runs **exactly once per key**, reconciliation never re-runs it for a kept row, so it never refreshes that row's content on its own. To make a row's content reactive, thread a `Stream` **inside** the row rather than expecting a re-render:
 
 ```typescript
-List.each({ of: rows.changes, by: (row) => row.id }, (row) =>
-  h.li([h.span([Stream.map(row.status.changes, (s) => s)])]),
+List.each({ of: Subscribable.changes(rows), by: (row) => row.id }, (row) =>
+  h.li([h.span([Stream.map(Subscribable.changes(row.status), (s) => s)])]),
 );
 ```
 

package/docs/how-to/render-on-the-server.md

@@ -54,7 +54,7 @@ Use a hydratable renderer whenever the client will call `hydrate`. The plain ren
 It follows the same server/client split: the rpc **contract** (pure Schema) is shared, while its **handler** lives in a server-only Layer the client never imports.
 
 ```typescript
-import { Boundary, h } from "@weftui/core";
+import { Boundary, h, Subscribable } from "@weftui/core";
 import { Stream } from "effect";
 import { GetStock } from "./data/inventory";
 
@@ -65,7 +65,7 @@ const StockPanel = (productId: number) =>
     (resource) =>
       h.p([
         "in stock: ",
-        h.span([Stream.map(resource.value.changes, (stock) => String(stock.units))]),
+        h.span([Stream.map(Subscribable.changes(resource.value), (stock) => String(stock.units))]),
         h.button({ type: "button", onclick: () => resource.refetch }, "Refresh"),
       ]),
     { fallback: h.p("loading stock…") }, // shown only on a client-first SPA mount

package/docs/how-to/show-navigation-progress.md

@@ -14,7 +14,7 @@ When you navigate to a route, the router is **deferred-commit**. It resolves the
 That resolve window is exposed as a reactive signal, [`Router.navigating`](https://weftui.dev/docs/reference/router#routernavigating), that you read to render pending UI.
 
 ```typescript
-import { Component, h } from "@weftui/core";
+import { Component, h, Subscribable } from "@weftui/core";
 import { Router } from "@weftui/router";
 import { Stream } from "effect";
 
@@ -25,7 +25,7 @@ const Shell = Component.gen(function* () {
     h.div({
       id: "nav-progress",
       "aria-hidden": "true",
-      class: Stream.map(nav.changes, (s) =>
+      class: Stream.map(Subscribable.changes(nav), (s) =>
         s._tag === "Navigating" ? "nav-progress is-navigating" : "nav-progress",
       ),
     }),

package/docs/reference/core.md

@@ -358,9 +358,9 @@ The keyed-list combinator. It is the opt-in alternative to wholesale child rebui
 > elements.
 
 ```typescript
-import { h, List } from "@weftui/core";
+import { h, List, Subscribable } from "@weftui/core";
 
-h.ul([List.each({ of: rows.changes, by: (row) => row.id }, (row) => h.li(row.name))]);
+h.ul([List.each({ of: Subscribable.changes(rows), by: (row) => row.id }, (row) => h.li(row.name))]);
 ```
 
 #### `List.each`

package/docs/reference/router.md

@@ -111,7 +111,7 @@ Router.params<F extends Fields>(fields: F): Effect<FieldsType<F>, RouterParamsEr
 Router.query<F extends Fields>(fields: F): Effect<FieldsType<F>, RouterParamsError, Router>;
 ```
 
-Snapshot accessors that read the **live match** (`currentMatch.get`) and pick the requested `fields` keys from the decoded path/query. The matcher already decoded the values against the leaf's full schema, so they are returned directly (no re-validation).
+Snapshot accessors that read the **live match** (`Subscribable.get(currentMatch)`) and pick the requested `fields` keys from the decoded path/query. The matcher already decoded the values against the leaf's full schema, so they are returned directly (no re-validation).
 
 Readable from **any** component, not just the leaf: this is the dependency-injection path layouts and deep nodes use (leaves can instead take [handler-arg props](#routerroute)). They fail with a [`RouterParamsError`](#routerparamserror) (`source: "path" | "query"`, plus the requested `keys`) when no route matches.
 
@@ -122,7 +122,7 @@ Router.paramsStream<F extends Fields>(fields: F): Effect<Subscribable<FieldsType
 Router.queryStream<F extends Fields>(fields: F): Effect<Subscribable<FieldsType<F>>, never, Router>;
 ```
 
-The **reactive** counterparts. Each resolves a `Subscribable<FieldsType<F>>` derived from `currentMatch.changes`. A component can render `[(yield* Router.queryStream(fields)).changes]` and update **in place** even when the outlet keeps the same leaf mounted. That is exactly the query-only case (`setQuery` / `patchQuery`) a snapshot `Router.query` would miss.
+The **reactive** counterparts. Each resolves a `Subscribable<FieldsType<F>>` derived from `Subscribable.changes(currentMatch)`. A component can render `[Subscribable.changes(yield* Router.queryStream(fields))]` and update **in place** even when the outlet keeps the same leaf mounted. That is exactly the query-only case (`setQuery` / `patchQuery`) a snapshot `Router.query` would miss.
 
 Resilient across navigations: a `NotFound` match yields the empty subset rather than failing, so the stream stays live.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weftui/router",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Universal nested router for Weft: one route tree, server and client, with type-safe params and href",
   "keywords": [
     "effect",
@@ -44,8 +44,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@weftui/core": "0.29.0",
-    "@weftui/dom": "0.29.0"
+    "@weftui/core": "0.30.0",
+    "@weftui/dom": "0.30.0"
   },
   "devDependencies": {
     "@types/jsdom": "^28.0.3",