@weftui/core 0.29.0 → 0.30.0

package/dist/{index-4cTlhojA.d.ts → index-CX9uEejU.d.ts}

@@ -1,10 +1,9 @@
-import { Cause, Effect, Option, Scope, Stream, SubscriptionRef } from "effect";
+import { Cause, Effect, Option, Scope, Stream, SubscriptionRef, Types as Types$1 } from "effect";
 declare namespace index_d_exports {
-  export { Subscribable, TypeId, changes, get, isSubscribable, make };
+  export { Subscribable, TypeId, Variance, changes, get, isSubscribable, make };
 }
 /**
- * Unique brand identifying a {@link Subscribable}, and the key under which its
- * `get`/`changes` channels are held. Effect 4 dropped its own
+ * Unique brand identifying a {@link Subscribable}. Effect 4 dropped its own
  * `Subscribable`/`Readable` modules, so Weft carries this reactivity interface
  * locally; the string brand mirrors Effect 4's `"~effect/*"` TypeId convention
  * (e.g. `SubscriptionRef`) and backs the {@link isSubscribable} guard.
@@ -15,22 +14,27 @@ declare const TypeId = "~@weftui/core/Subscribable";
  */
 type TypeId = typeof TypeId;
 /**
- * A hot, await-first reactive value: `get` reads the current value as an
- * `Effect`, `changes` is a `Stream` of every value (including the current one).
- * Read them either directly or through the {@link get} / {@link changes} module
- * accessors, which mirror Effect 4's `SubscriptionRef.get` / `.changes` so a
+ * Phantom variance carrier for {@link Subscribable}; all three channels are
+ * covariant, matching the `Effect`/`Stream` channels the value wraps.
+ */
+interface Variance<out A, out E, out R> {
+  readonly _A: Types$1.Covariant<A>;
+  readonly _E: Types$1.Covariant<E>;
+  readonly _R: Types$1.Covariant<R>;
+}
+/**
+ * A hot, await-first reactive value: a current value plus a stream of every
+ * value (including the current one). The interface is brand-only; read it
+ * through the {@link get} / {@link changes} module accessors, which mirror
+ * Effect 4's `SubscriptionRef.get` / `SubscriptionRef.changes` so a
  * `Subscribable` and a `SubscriptionRef` read the same way at a call site.
  *
- * This is Weft's local replacement for Effect 3's `Subscribable`, preserved as
- * public API so `Source`, `Boundary`, and the DOM renderers keep the same
- * reactivity surface across the Effect 4 migration.
+ * This is Weft's local replacement for the `Subscribable` module Effect 4
+ * removed, preserved as public API so `Source`, `Boundary`, and the DOM
+ * renderers share one reactivity surface.
  */
-interface Subscribable<A, E = never, R = never> {
-  readonly [TypeId]: TypeId;
-  /** Read the current value; also reachable via the {@link get} accessor. */
-  readonly get: Effect.Effect<A, E, R>;
-  /** Stream of every value; also reachable via the {@link changes} accessor. */
-  readonly changes: Stream.Stream<A, E, R>;
+interface Subscribable<out A, out E = never, out R = never> {
+  readonly [TypeId]: Variance<A, E, R>;
 }
 /**
  * Build a {@link Subscribable} from a `get` effect and a `changes` stream. The
@@ -43,13 +47,14 @@ declare const make: <A, E = never, R = never>(options: {
 }) => Subscribable<A, E, R>;
 /**
  * Read the current value of a {@link Subscribable} as an `Effect`. Mirrors
- * `SubscriptionRef.get`, so call sites read `Subscribable`s and
- * `SubscriptionRef`s the same way.
+ * `SubscriptionRef.get`; the only way to read the value, the interface exposes
+ * no members.
  */
 declare const get: <A, E, R>(self: Subscribable<A, E, R>) => Effect.Effect<A, E, R>;
 /**
  * The `Stream` of every value of a {@link Subscribable}, starting with the
- * current one. Mirrors `SubscriptionRef.changes`.
+ * current one. Mirrors `SubscriptionRef.changes`; the only way to observe
+ * changes, the interface exposes no members.
  */
 declare const changes: <A, E, R>(self: Subscribable<A, E, R>) => Stream.Stream<A, E, R>;
 /**

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { D as Subscribable, E as Source, O as index_d_exports, T as NoPropValue, a as SVGElements, r as Renderable, s as HTMLElements, t as ElementDescriptor } from "./index-4cTlhojA.js";
+import { D as Subscribable, E as Source, O as index_d_exports, T as NoPropValue, a as SVGElements, r as Renderable, s as HTMLElements, t as ElementDescriptor } from "./index-CX9uEejU.js";
 import { Cause, Context, Effect, Filter, Option, Stream } from "effect";
 import { Rpc } from "effect/unstable/rpc";
 //#region src/combinator/types.d.ts

package/dist/index.js

@@ -1 +1 @@
-import{t as e}from"./rolldown-runtime-DK3Fl9T5.js";import{Cause as t,Context as n,Data as r,Deferred as i,Effect as a,Filter as o,Option as s,Predicate as c,Result as l,Stream as u,SubscriptionRef as d,identity as f,pipe as p}from"effect";const m=Symbol.for(`@weftui/core/ElementDescriptor`);function h(e){let t=a.succeed(e);return Object.defineProperty(t,m,{value:e,enumerable:!1}),t}function g(e){return a.isEffect(e)&&m in e?e[m]:void 0}var _=e({FAILURE_BOUNDARY:()=>v,SERVER_BOUNDARY:()=>b,SUSPENSE_BOUNDARY:()=>y,catch:()=>S,catchCause:()=>C,catchFilter:()=>E,catchIf:()=>D,catchTag:()=>w,catchTags:()=>T,rpc:()=>k,suspend:()=>O});const v=Symbol.for(`weft/FAILURE_BOUNDARY`),y=Symbol.for(`weft/SUSPENSE_BOUNDARY`),b=Symbol.for(`weft/SERVER_BOUNDARY`);function x(e,t){return h({type:v,props:{match:e,children:t}})}function S(e,n){return x(n=>{let r=t.findErrorOption(n);return s.isSome(r)?e.fallback(r.value):null},n)}function C(e,t){return x(t=>e.fallback(t),t)}function w(e,n){return x(n=>{let r=t.findErrorOption(n);if(s.isNone(r))return null;let i=r.value;return i._tag===e.tag?e.fallback(i):null},n)}function T(e,n){return x(n=>{let r=t.findErrorOption(n);if(s.isNone(r))return null;let i=r.value,a=i._tag;if(a===void 0)return null;let o=e[a];return o?o(i):null},n)}function E(e,n,r){return x(r=>{let i=t.findErrorOption(r);if(s.isNone(i))return null;let a=e(i.value);return l.isSuccess(a)?n(a.success):null},r)}function D(e,n){return x(n=>{let r=t.findErrorOption(n);if(s.isNone(r))return null;let i=r.value;return e.predicate(i)?e.fallback(i):null},n)}function O(e,t){return h({type:y,props:{...e,children:t}})}function k(e,t,n,r){let i=e;return h({type:b,props:{tag:i._tag,payloadSchema:i.payloadSchema,successSchema:i.successSchema,errorSchema:i.errorSchema,payload:t,render:n,fallback:r?.fallback}})}var A=class extends n.Service()(`@weftui/core/AppRpcClient`){};const j=e=>()=>n.Service()(e);function M(e){return typeof e==`object`&&!!e&&u.TypeId in e}function N(e){return M(e)?e:a.isEffect(e)?u.fromEffect(e):u.make(e)}var P=e({TypeId:()=>F,changes:()=>R,get:()=>L,isSubscribable:()=>z,make:()=>I});const F=`~@weftui/core/Subscribable`,I=e=>({[F]:F,get:e.get,changes:e.changes}),L=e=>e.get,R=e=>e.changes,z=e=>c.hasProperty(e,F);var B=class extends r.TaggedError(`NoPropValue`){};let V;(function(e){function n(e,n){return z(e)?a.succeed(e):M(e)?a.gen(function*(){let r=yield*d.make(s.none()),c=yield*i.make(),l=yield*i.make(),m=p(u.runForEach(e,e=>p(d.set(r,s.some(e)),a.andThen(i.succeed(c,e)),a.asVoid)),a.ensuring(p(d.get(r),a.flatMap(e=>s.isNone(e)?a.asVoid(i.fail(c,new B({key:n}))):a.void))),a.onError(e=>t.hasInterruptsOnly(e)?a.void:a.asVoid(i.failCause(l,e))));yield*a.forkScoped(m);let h=p(d.get(r),a.flatMap(e=>s.isSome(e)?a.succeed(e.value):i.await(c))),g=p(d.changes(r),u.filterMap(o.fromPredicateOption(f)),u.interruptWhen(i.await(l)));return I({get:h,changes:g})}):a.isEffect(e)?a.gen(function*(){let t=yield*a.cached(e),n=u.fromEffect(t);return I({get:t,changes:n})}):a.succeed(I({get:a.succeed(e),changes:u.make(e)}))}e.toSubscribable=n})(V||={});const H=Symbol(`@weftui/core/fragment`);function U(e){return((t,n)=>{let r={},i;return Array.isArray(t)||typeof t==`string`||typeof t==`number`?i=t:t!==void 0&&(r=t,n!==void 0&&(i=n)),h({type:e,props:i===void 0?r:{...r,children:i}})})}function W(e=new Map){return new Proxy({fragment(e){return h({type:H,props:{children:e}})}},{get(t,n){return n in t?t[n]:e.get(n)??e.set(n,U(n)).get(n)}})}const G=W(new Map),K=Symbol(`@weftui/core/list`);let q;(function(e){function t(e,t){return h({type:K,props:{of:e.of,by:e.by,render:t}})}e.each=t})(q||={});let J;(function(e){function t(e){return(t,n=[])=>a.gen(function*(){return yield*e(t,n)})}e.gen=t;function n(e){return e}e.make=n})(J||={});export{A as AppRpcClientTag,_ as Boundary,J as Component,v as FAILURE_BOUNDARY,H as FRAGMENT,K as LIST,q as List,B as NoPropValue,b as SERVER_BOUNDARY,y as SUSPENSE_BOUNDARY,j as ServerTag,V as Source,P as Subscribable,h as elementNode,g as getElementDescriptor,G as h,M as isStream,N as toStream};
+import{t as e}from"./rolldown-runtime-DK3Fl9T5.js";import{Cause as t,Context as n,Data as r,Deferred as i,Effect as a,Filter as o,Option as s,Predicate as c,Result as l,Stream as u,SubscriptionRef as d,identity as f,pipe as p}from"effect";const m=Symbol.for(`@weftui/core/ElementDescriptor`);function h(e){let t=a.succeed(e);return Object.defineProperty(t,m,{value:e,enumerable:!1}),t}function g(e){return a.isEffect(e)&&m in e?e[m]:void 0}var _=e({FAILURE_BOUNDARY:()=>v,SERVER_BOUNDARY:()=>b,SUSPENSE_BOUNDARY:()=>y,catch:()=>S,catchCause:()=>C,catchFilter:()=>E,catchIf:()=>D,catchTag:()=>w,catchTags:()=>T,rpc:()=>k,suspend:()=>O});const v=Symbol.for(`weft/FAILURE_BOUNDARY`),y=Symbol.for(`weft/SUSPENSE_BOUNDARY`),b=Symbol.for(`weft/SERVER_BOUNDARY`);function x(e,t){return h({type:v,props:{match:e,children:t}})}function S(e,n){return x(n=>{let r=t.findErrorOption(n);return s.isSome(r)?e.fallback(r.value):null},n)}function C(e,t){return x(t=>e.fallback(t),t)}function w(e,n){return x(n=>{let r=t.findErrorOption(n);if(s.isNone(r))return null;let i=r.value;return i._tag===e.tag?e.fallback(i):null},n)}function T(e,n){return x(n=>{let r=t.findErrorOption(n);if(s.isNone(r))return null;let i=r.value,a=i._tag;if(a===void 0)return null;let o=e[a];return o?o(i):null},n)}function E(e,n,r){return x(r=>{let i=t.findErrorOption(r);if(s.isNone(i))return null;let a=e(i.value);return l.isSuccess(a)?n(a.success):null},r)}function D(e,n){return x(n=>{let r=t.findErrorOption(n);if(s.isNone(r))return null;let i=r.value;return e.predicate(i)?e.fallback(i):null},n)}function O(e,t){return h({type:y,props:{...e,children:t}})}function k(e,t,n,r){let i=e;return h({type:b,props:{tag:i._tag,payloadSchema:i.payloadSchema,successSchema:i.successSchema,errorSchema:i.errorSchema,payload:t,render:n,fallback:r?.fallback}})}var A=class extends n.Service()(`@weftui/core/AppRpcClient`){};const j=e=>()=>n.Service()(e);function M(e){return typeof e==`object`&&!!e&&u.TypeId in e}function N(e){return M(e)?e:a.isEffect(e)?u.fromEffect(e):u.make(e)}var P=e({TypeId:()=>F,changes:()=>z,get:()=>R,isSubscribable:()=>B,make:()=>L});const F=`~@weftui/core/Subscribable`,I=e=>e,L=e=>({[F]:F,get:e.get,changes:e.changes}),R=e=>I(e).get,z=e=>I(e).changes,B=e=>c.hasProperty(e,F);var V=class extends r.TaggedError(`NoPropValue`){};let H;(function(e){function n(e,n){return B(e)?a.succeed(e):M(e)?a.gen(function*(){let r=yield*d.make(s.none()),c=yield*i.make(),l=yield*i.make(),m=p(u.runForEach(e,e=>p(d.set(r,s.some(e)),a.andThen(i.succeed(c,e)),a.asVoid)),a.ensuring(p(d.get(r),a.flatMap(e=>s.isNone(e)?a.asVoid(i.fail(c,new V({key:n}))):a.void))),a.onError(e=>t.hasInterruptsOnly(e)?a.void:a.asVoid(i.failCause(l,e))));yield*a.forkScoped(m);let h=p(d.get(r),a.flatMap(e=>s.isSome(e)?a.succeed(e.value):i.await(c))),g=p(d.changes(r),u.filterMap(o.fromPredicateOption(f)),u.interruptWhen(i.await(l)));return L({get:h,changes:g})}):a.isEffect(e)?a.gen(function*(){let t=yield*a.cached(e),n=u.fromEffect(t);return L({get:t,changes:n})}):a.succeed(L({get:a.succeed(e),changes:u.make(e)}))}e.toSubscribable=n})(H||={});const U=Symbol(`@weftui/core/fragment`);function W(e){return((t,n)=>{let r={},i;return Array.isArray(t)||typeof t==`string`||typeof t==`number`?i=t:t!==void 0&&(r=t,n!==void 0&&(i=n)),h({type:e,props:i===void 0?r:{...r,children:i}})})}function G(e=new Map){return new Proxy({fragment(e){return h({type:U,props:{children:e}})}},{get(t,n){return n in t?t[n]:e.get(n)??e.set(n,W(n)).get(n)}})}const K=G(new Map),q=Symbol(`@weftui/core/list`);let J;(function(e){function t(e,t){return h({type:q,props:{of:e.of,by:e.by,render:t}})}e.each=t})(J||={});let Y;(function(e){function t(e){return(t,n=[])=>a.gen(function*(){return yield*e(t,n)})}e.gen=t;function n(e){return e}e.make=n})(Y||={});export{A as AppRpcClientTag,_ as Boundary,Y as Component,v as FAILURE_BOUNDARY,U as FRAGMENT,q as LIST,J as List,V as NoPropValue,b as SERVER_BOUNDARY,y as SUSPENSE_BOUNDARY,j as ServerTag,H as Source,P as Subscribable,h as elementNode,g as getElementDescriptor,K as h,M as isStream,N as toStream};

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-import { C as StyleAttributeValue, S as HTMLAttributeSource, _ as HTMLFormMethod, a as SVGElements, b as HTMLReferrerPolicy, c as HTMLRole, d as EventHandlerFn, f as HTMLAutocapitalize, g as HTMLFormEncType, h as HTMLDir, i as SVGAttributes, l as DOMAttributes, m as HTMLCrossorigin, n as ElementType, o as HTMLAttributes, p as HTMLAutocomplete, r as Renderable, s as HTMLElements, t as ElementDescriptor, u as EventHandler, v as HTMLIframeSandbox, w as StyleProperties, x as AriaAttributes, y as HTMLLinkAs } from "../index-4cTlhojA.js";
+import { C as StyleAttributeValue, S as HTMLAttributeSource, _ as HTMLFormMethod, a as SVGElements, b as HTMLReferrerPolicy, c as HTMLRole, d as EventHandlerFn, f as HTMLAutocapitalize, g as HTMLFormEncType, h as HTMLDir, i as SVGAttributes, l as DOMAttributes, m as HTMLCrossorigin, n as ElementType, o as HTMLAttributes, p as HTMLAutocomplete, r as Renderable, s as HTMLElements, t as ElementDescriptor, u as EventHandler, v as HTMLIframeSandbox, w as StyleProperties, x as AriaAttributes, y as HTMLLinkAs } from "../index-CX9uEejU.js";
 export { AriaAttributes, DOMAttributes, ElementDescriptor, ElementType, EventHandler, EventHandlerFn, HTMLAttributeSource, HTMLAttributes, HTMLAutocapitalize, HTMLAutocomplete, HTMLCrossorigin, HTMLDir, HTMLElements, HTMLFormEncType, HTMLFormMethod, HTMLIframeSandbox, HTMLLinkAs, HTMLReferrerPolicy, HTMLRole, Renderable, SVGAttributes, SVGElements, StyleAttributeValue, StyleProperties };

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/core",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Element builders and combinators for Weft: reactive UI, woven from Effect",
   "keywords": [
     "combinators",