@nifrajs/web-preact 3.5.0 → 4.0.0

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAkBnE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE1C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAA;AAExC,oGAAoG;AACpG,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,OAAO,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,CAE/F;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAoB7D"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAgBnE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE1C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAA;AAExC,oGAAoG;AACpG,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,OAAO,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,CAE/F;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAQ7D"}

package/dist/client.js

@@ -1,6 +1,3 @@
-// `/client`, not the root: the root's graph carries the server, and Vite's dev server evaluates it
-// instead of tree-shaking it - which broke hydration before the browser ran a line of app code.
-import { searchOfChain } from "@nifrajs/web/client";
 /**
  * @nifrajs/web-preact/client - Preact client runtime. `hydrate` hydrates a single SSR'd route;
  * `mountRouter` hydrates a stateful Router that subscribes to the agnostic store (via
@@ -12,6 +9,7 @@ import { h, hydrate as preactHydrate } from "preact";
 import { useSyncExternalStore } from "preact/compat";
 import { compose } from "./compose.js";
 import { setMountedRouter } from "./fetcher.js";
+import { routeProps } from "./route-props.js";
 // The `_error` boundary chain element - defined in its own (DOM-free) module, re-exported here so
 // nifra's client codegen resolves it from `@nifrajs/web-preact/client` alongside `mountRouter`.
 export { errorBoundary } from "./error.js";
@@ -39,23 +37,11 @@ export function hydrate(chain, props, container) {
  * (no `getServerSnapshot`); `router.snapshot` is deterministic, so hydration matches the SSR markup.
  */
 export function mountRouter(options) {
-    const { router, routes, searchSchemas, container } = options;
+    const { router, routes, searchSchemas, matchChains, container } = options;
     setMountedRouter(router); // expose it to useFetcher/useFetchers (same page, client-only)
     const Router = () => {
         const state = useSyncExternalStore(router.subscribe, router.snapshot);
-        // Derive this route's typed `search` from the URL + the route's schema chain (the SAME `searchOfChain`
-        // the server ran), so `useSearch` reads an identical value and hydrates with no drift.
-        const q = state.path.indexOf("?");
-        const rawSearch = q === -1 ? "" : state.path.slice(q);
-        return compose(routes[state.routeId] ?? [], {
-            data: state.data,
-            actionData: state.actionData,
-            pending: state.pending,
-            search: searchOfChain(searchSchemas?.[state.routeId] ?? [], rawSearch),
-            // The in-flight submission (for optimistic UI) - spread only when present.
-            ...(state.submission ? { submission: state.submission } : {}),
-            ...(state.boundaries !== undefined ? { boundaries: state.boundaries } : {}),
-        });
+        return compose(routes[state.routeId] ?? [], routeProps(state, searchSchemas, matchChains));
     };
     preactHydrate(h(Router, null), container);
 }

package/dist/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,mGAAmG;AACnG,gGAAgG;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD;;;;;;GAMG;AACH,OAAO,EAA0B,CAAC,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAA;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAE/C,kGAAkG;AAClG,gGAAgG;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE1C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAA;AAExC,oGAAoG;AACpG,MAAM,UAAU,OAAO,CAAC,KAAyB,EAAE,KAAkB,EAAE,SAAkB;IACvF,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,SAAoB,CAAC,CAAA;AAC5D,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,OAA2B;IACrD,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,OAAO,CAAA;IAC5D,gBAAgB,CAAC,MAAM,CAAC,CAAA,CAAC,+DAA+D;IACxF,MAAM,MAAM,GAAsB,GAAG,EAAE;QACrC,MAAM,KAAK,GAAG,oBAAoB,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAA;QACrE,uGAAuG;QACvG,uFAAuF;QACvF,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;QACjC,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QACrD,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE;YAC1C,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,UAAU,EAAE,KAAK,CAAC,UAAU;YAC5B,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,MAAM,EAAE,aAAa,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,CAAC;YACtE,2EAA2E;YAC3E,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7D,GAAG,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SAC5E,CAAC,CAAA;IACJ,CAAC,CAAA;IACD,aAAa,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,SAAoB,CAAC,CAAA;AACtD,CAAC"}
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA;;;;;;GAMG;AACH,OAAO,EAA0B,CAAC,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAA;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE7C,kGAAkG;AAClG,gGAAgG;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE1C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAA;AAExC,oGAAoG;AACpG,MAAM,UAAU,OAAO,CAAC,KAAyB,EAAE,KAAkB,EAAE,SAAkB;IACvF,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,SAAoB,CAAC,CAAA;AAC5D,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,OAA2B;IACrD,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,OAAO,CAAA;IACzE,gBAAgB,CAAC,MAAM,CAAC,CAAA,CAAC,+DAA+D;IACxF,MAAM,MAAM,GAAsB,GAAG,EAAE;QACrC,MAAM,KAAK,GAAG,oBAAoB,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAA;QACrE,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,CAAA;IAC5F,CAAC,CAAA;IACD,aAAa,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,SAAoB,CAAC,CAAA;AACtD,CAAC"}

package/dist/compose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../src/compose.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAgE,KAAK,KAAK,EAAE,MAAM,QAAQ,CAAA;AAejG;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,OAAO,EAAE,EAAE,KAAK,EAAE,WAAW,GAAG,KAAK,CAuB5E"}
+{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../src/compose.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAgE,KAAK,KAAK,EAAE,MAAM,QAAQ,CAAA;AAoBjG;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,OAAO,EAAE,EAAE,KAAK,EAAE,WAAW,GAAG,KAAK,CA2B5E"}

package/dist/compose.js

@@ -1,11 +1,12 @@
 import { createElement, h } from "preact";
-import { SearchContext } from "./router.js";
+import { RenderPropsContext, SearchContext } from "./router.js";
 // Frozen empty search so a render with no search context has a stable provider value.
 const EMPTY_SEARCH = Object.freeze({});
 // Preact's `createElement` overloads drop a typed `Context.Provider`'s required `value` under
 // exactOptionalPropertyTypes (same issue i18n's provider hits); invoke it through a precisely-typed
 // factory that states the real `{ value }` + children contract rather than scatter `any`.
 const createSearchProvider = createElement;
+const createPropsProvider = createElement;
 /**
  * Fold a layout chain (outermost layout → page) into a single Preact tree: the page (innermost)
  * receives `props` (the loader data); each layout wraps the child via its `children` (Preact passes
@@ -32,6 +33,6 @@ export function compose(chain, props) {
             ...(props.boundaries !== undefined ? { boundaries: props.boundaries } : {}),
         }, node);
     }
-    return createSearchProvider(SearchContext.Provider, { value: props.search ?? EMPTY_SEARCH }, node);
+    return createSearchProvider(SearchContext.Provider, { value: props.search ?? EMPTY_SEARCH }, createPropsProvider(RenderPropsContext.Provider, { value: props }, node));
 }
 //# sourceMappingURL=compose.js.map

package/dist/compose.js.map

@@ -1 +1 @@
-{"version":3,"file":"compose.js","sourceRoot":"","sources":["../src/compose.ts"],"names":[],"mappings":"AACA,OAAO,EAA8C,aAAa,EAAE,CAAC,EAAc,MAAM,QAAQ,CAAA;AACjG,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,sFAAsF;AACtF,MAAM,YAAY,GAAsC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AAEzE,8FAA8F;AAC9F,oGAAoG;AACpG,0FAA0F;AAC1F,MAAM,oBAAoB,GAAG,aAInB,CAAA;AAEV;;;;;;;GAOG;AACH,MAAM,UAAU,OAAO,CAAC,KAAyB,EAAE,KAAkB;IACnE,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAA;IAC7B,iGAAiG;IACjG,8FAA8F;IAC9F,mGAAmG;IACnG,gGAAgG;IAChG,2FAA2F;IAC3F,IAAI,IAAI,GAAU,CAAC,CAAC,KAAK,CAAC,IAAI,CAA+B,EAAE,KAAK,CAAU,CAAA;IAC9E,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACnC,wFAAwF;QACxF,6FAA6F;QAC7F,mGAAmG;QACnG,kEAAkE;QAClE,IAAI,GAAG,CAAC,CACN,KAAK,CAAC,CAAC,CAAqC,EAC5C;YACE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI;YACnC,GAAG,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SAC5E,EACD,IAAI,CACI,CAAA;IACZ,CAAC;IACD,OAAO,oBAAoB,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,IAAI,YAAY,EAAE,EAAE,IAAI,CAAC,CAAA;AACpG,CAAC"}
+{"version":3,"file":"compose.js","sourceRoot":"","sources":["../src/compose.ts"],"names":[],"mappings":"AACA,OAAO,EAA8C,aAAa,EAAE,CAAC,EAAc,MAAM,QAAQ,CAAA;AACjG,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE/D,sFAAsF;AACtF,MAAM,YAAY,GAAsC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AAEzE,8FAA8F;AAC9F,oGAAoG;AACpG,0FAA0F;AAC1F,MAAM,oBAAoB,GAAG,aAInB,CAAA;AACV,MAAM,mBAAmB,GAAG,aAIlB,CAAA;AAEV;;;;;;;GAOG;AACH,MAAM,UAAU,OAAO,CAAC,KAAyB,EAAE,KAAkB;IACnE,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAA;IAC7B,iGAAiG;IACjG,8FAA8F;IAC9F,mGAAmG;IACnG,gGAAgG;IAChG,2FAA2F;IAC3F,IAAI,IAAI,GAAU,CAAC,CAAC,KAAK,CAAC,IAAI,CAA+B,EAAE,KAAK,CAAU,CAAA;IAC9E,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACnC,wFAAwF;QACxF,6FAA6F;QAC7F,mGAAmG;QACnG,kEAAkE;QAClE,IAAI,GAAG,CAAC,CACN,KAAK,CAAC,CAAC,CAAqC,EAC5C;YACE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI;YACnC,GAAG,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SAC5E,EACD,IAAI,CACI,CAAA;IACZ,CAAC;IACD,OAAO,oBAAoB,CACzB,aAAa,CAAC,QAAQ,EACtB,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,IAAI,YAAY,EAAE,EACvC,mBAAmB,CAAC,kBAAkB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,CACzE,CAAA;AACH,CAAC"}

package/dist/i18n.d.ts

@@ -5,16 +5,29 @@
  * and the client rebuilds the same formatter from the same props (no mismatch). Uses `preact` +
  * `preact/hooks` - no JSX.
  */
-import { type Formatter, type Messages } from "@nifrajs/i18n";
+import { type Formatter, type FormatterOptions, type MessageKey, type RegisteredMessages, type Translation } from "@nifrajs/i18n";
 import { type ComponentChildren, type VNode } from "preact";
-export interface I18nProviderProps {
+export interface I18nProviderProps extends FormatterOptions {
     readonly locale: string;
-    readonly messages: Messages;
+    /** The catalog for `locale`, checked against the registered catalog type when one is declared. */
+    readonly messages: Translation;
     readonly children?: ComponentChildren;
 }
-/** Provide a {@link Formatter} (built from `locale` + `messages`) to the subtree. Memoized on
- * `locale`/`messages`, so switching locale rebuilds it and re-renders consumers. */
+/** Provide a {@link Formatter} (built from `locale` + `messages`, with the optional `fallback`,
+ * `onMissing`, `timeZone` and `numberingSystem` of `createFormatter`) to the subtree. Memoized
+ * on those props, so switching locale rebuilds it and re-renders consumers; formatters are cached by
+ * catalog identity, so an inline `fallback={[en]}` still yields the same instance. */
 export declare function I18nProvider(props: I18nProviderProps): VNode;
-/** Read the current {@link Formatter} (`{ locale, t, n, d }`). Throws if no `<I18nProvider>` is above. */
+/** Read the current {@link Formatter} (`{ locale, t, get, n, d }`). Throws if no `<I18nProvider>` is above. */
 export declare function useT(): Formatter;
+/** Tag handlers for {@link rich}, by tag name: each receives its tag's content as one node. */
+export type RichTags = Readonly<Record<string, (content: ComponentChildren) => ComponentChildren>>;
+/**
+ * The message at `key` with its tags rendered by `tags`, as Preact nodes - no HTML, no
+ * `dangerouslySetInnerHTML`. `"Read the <link>terms</link>"` with
+ * `{ link: (content) => <a href="/terms">{content}</a> }` renders the link around "terms"; a tag with
+ * no handler renders its content as text, `<br/>` is a `<br>`, and interpolated values are always
+ * text. See `@nifrajs/i18n/rich`.
+ */
+export declare function rich<M extends object = RegisteredMessages>(formatter: Formatter<M>, key: MessageKey<M>, tags?: RichTags, vars?: Readonly<Record<string, unknown>>): ComponentChildren;
 //# sourceMappingURL=i18n.d.ts.map

package/dist/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,EAAE,KAAK,iBAAiB,EAAgC,KAAK,KAAK,EAAE,MAAM,QAAQ,CAAA;AAezF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CACtC;AAED;oFACoF;AACpF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAM5D;AAED,0GAA0G;AAC1G,wBAAgB,IAAI,IAAI,SAAS,CAMhC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,kBAAkB,EACvB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,KAAK,iBAAiB,EAA0C,KAAK,KAAK,EAAE,MAAM,QAAQ,CAAA;AAenG,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,kGAAkG;IAClG,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAA;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CACtC;AAED;;;sFAGsF;AACtF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAO5D;AAED,+GAA+G;AAC/G,wBAAgB,IAAI,IAAI,SAAS,CAMhC;AAED,+FAA+F;AAC/F,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC,CAAC,CAAA;AAalG;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,GAAG,kBAAkB,EACxD,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,EACvB,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,EAClB,IAAI,CAAC,EAAE,QAAQ,EACf,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GACvC,iBAAiB,CAEnB"}

package/dist/i18n.js

@@ -5,8 +5,9 @@
  * and the client rebuilds the same formatter from the same props (no mismatch). Uses `preact` +
  * `preact/hooks` - no JSX.
  */
-import { createFormatter } from "@nifrajs/i18n";
-import { createContext, createElement } from "preact";
+import { createFormatter, } from "@nifrajs/i18n";
+import { renderRich } from "@nifrajs/i18n/rich";
+import { createContext, createElement, Fragment } from "preact";
 import { useContext, useMemo } from "preact/hooks";
 const I18nContext = createContext(null);
 // Preact's `createElement` overloads don't reconcile a typed `Context.Provider` (required `value`)
@@ -14,13 +15,16 @@ const I18nContext = createContext(null);
 // The call is correct at runtime (proven by the tests), so invoke it through a precisely-typed element
 // factory that states the real contract (`{ value }` + children), rather than scatter `any`.
 const createProvider = createElement;
-/** Provide a {@link Formatter} (built from `locale` + `messages`) to the subtree. Memoized on
- * `locale`/`messages`, so switching locale rebuilds it and re-renders consumers. */
+/** Provide a {@link Formatter} (built from `locale` + `messages`, with the optional `fallback`,
+ * `onMissing`, `timeZone` and `numberingSystem` of `createFormatter`) to the subtree. Memoized
+ * on those props, so switching locale rebuilds it and re-renders consumers; formatters are cached by
+ * catalog identity, so an inline `fallback={[en]}` still yields the same instance. */
 export function I18nProvider(props) {
-    const formatter = useMemo(() => createFormatter(props.locale, props.messages), [props.locale, props.messages]);
+    const { locale, messages, fallback, onMissing, timeZone, numberingSystem } = props;
+    const formatter = useMemo(() => createFormatter(locale, messages, { fallback, onMissing, timeZone, numberingSystem }), [locale, messages, fallback, onMissing, timeZone, numberingSystem]);
     return createProvider(I18nContext.Provider, { value: formatter }, props.children);
 }
-/** Read the current {@link Formatter} (`{ locale, t, n, d }`). Throws if no `<I18nProvider>` is above. */
+/** Read the current {@link Formatter} (`{ locale, t, get, n, d }`). Throws if no `<I18nProvider>` is above. */
 export function useT() {
     const formatter = useContext(I18nContext);
     if (formatter === null) {
@@ -28,4 +32,23 @@ export function useT() {
     }
     return formatter;
 }
+const join = (chunks) => chunks.length === 0
+    ? null
+    : chunks.length === 1
+        ? chunks[0]
+        : createElement(Fragment, null, ...chunks);
+const PREACT_RICH = {
+    join,
+    lineBreak: () => createElement("br", null),
+};
+/**
+ * The message at `key` with its tags rendered by `tags`, as Preact nodes - no HTML, no
+ * `dangerouslySetInnerHTML`. `"Read the <link>terms</link>"` with
+ * `{ link: (content) => <a href="/terms">{content}</a> }` renders the link around "terms"; a tag with
+ * no handler renders its content as text, `<br/>` is a `<br>`, and interpolated values are always
+ * text. See `@nifrajs/i18n/rich`.
+ */
+export function rich(formatter, key, tags, vars) {
+    return renderRich(PREACT_RICH, formatter, key, tags, vars);
+}
 //# sourceMappingURL=i18n.js.map

package/dist/i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../src/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,eAAe,EAAiC,MAAM,eAAe,CAAA;AAC9E,OAAO,EAA0B,aAAa,EAAE,aAAa,EAAc,MAAM,QAAQ,CAAA;AACzF,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAElD,MAAM,WAAW,GAAG,aAAa,CAAmB,IAAI,CAAC,CAAA;AAEzD,mGAAmG;AACnG,uGAAuG;AACvG,uGAAuG;AACvG,6FAA6F;AAC7F,MAAM,cAAc,GAAG,aAIb,CAAA;AAQV;oFACoF;AACpF,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,EACnD,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAC/B,CAAA;IACD,OAAO,cAAc,CAAC,WAAW,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;AACnF,CAAC;AAED,0GAA0G;AAC1G,MAAM,UAAU,IAAI;IAClB,MAAM,SAAS,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACzC,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACvB,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAA;IACpF,CAAC;IACD,OAAO,SAAS,CAAA;AAClB,CAAC"}
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../src/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EACL,eAAe,GAMhB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAsC,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACnF,OAAO,EAA0B,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAc,MAAM,QAAQ,CAAA;AACnG,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAElD,MAAM,WAAW,GAAG,aAAa,CAAmB,IAAI,CAAC,CAAA;AAEzD,mGAAmG;AACnG,uGAAuG;AACvG,uGAAuG;AACvG,6FAA6F;AAC7F,MAAM,cAAc,GAAG,aAIb,CAAA;AASV;;;sFAGsF;AACtF,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,CAAA;IAClF,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,EAC3F,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC,CACnE,CAAA;IACD,OAAO,cAAc,CAAC,WAAW,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;AACnF,CAAC;AAED,+GAA+G;AAC/G,MAAM,UAAU,IAAI;IAClB,MAAM,SAAS,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACzC,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACvB,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAA;IACpF,CAAC;IACD,OAAO,SAAS,CAAA;AAClB,CAAC;AAKD,MAAM,IAAI,GAAG,CAAC,MAAqC,EAAqB,EAAE,CACxE,MAAM,CAAC,MAAM,KAAK,CAAC;IACjB,CAAC,CAAC,IAAI;IACN,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;QACnB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;QACX,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,CAAA;AAChD,MAAM,WAAW,GAAoC;IACnD,IAAI;IACJ,SAAS,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC;CAC3C,CAAA;AAED;;;;;;GAMG;AACH,MAAM,UAAU,IAAI,CAClB,SAAuB,EACvB,GAAkB,EAClB,IAAe,EACf,IAAwC;IAExC,OAAO,UAAU,CAAC,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;AAC5D,CAAC"}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAWjD,8EAA8E;AAC9E,eAAO,MAAM,aAAa,EAAE,aAyB3B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAiDjD,8EAA8E;AAC9E,eAAO,MAAM,aAAa,EAAE,aA0B3B,CAAA"}

package/dist/index.js

@@ -7,6 +7,39 @@
  */
 import { compose } from "./compose.js";
 import { preactRenderToStream, preactRenderToString } from "./preact-render.js";
+const ISLAND_RUNTIME_OPEN = "<script>(function(){";
+const ISLAND_RUNTIME_OPEN_BYTES = new TextEncoder().encode(ISLAND_RUNTIME_OPEN);
+const startsWithBytes = (chunk, prefix) => {
+    if (chunk.length < prefix.length)
+        return false;
+    for (let i = 0; i < prefix.length; i++)
+        if (chunk[i] !== prefix[i])
+            return false;
+    return true;
+};
+/**
+ * `preact-render-to-string` streams the runtime that moves resolved `<Suspense>` content into place as
+ * one attribute-less `<script>` chunk, and takes no nonce option. Stamp the document nonce on exactly
+ * that chunk (it defines the `preact-island` element); every other chunk passes through untouched, so
+ * an app-rendered `<script>` never inherits the nonce.
+ */
+function withIslandRuntimeNonce(stream, nonce) {
+    const decoder = new TextDecoder();
+    const encoder = new TextEncoder();
+    const nonced = `<script nonce="${nonce.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;")}">(function(){`;
+    return stream.pipeThrough(new TransformStream({
+        transform(chunk, controller) {
+            if (startsWithBytes(chunk, ISLAND_RUNTIME_OPEN_BYTES)) {
+                const text = decoder.decode(chunk);
+                if (text.includes('"preact-island"')) {
+                    controller.enqueue(encoder.encode(nonced + text.slice(ISLAND_RUNTIME_OPEN.length)));
+                    return;
+                }
+            }
+            controller.enqueue(chunk);
+        },
+    }));
+}
 /** The Preact server render adapter - pass to @nifrajs/web's `renderPage`. */
 export const preactAdapter = {
     // Synchronous one-pass render for non-deferred pages (renderPage's buffered fast path). The sync
@@ -22,11 +55,12 @@ export const preactAdapter = {
         }
         return loaded.renderToString(compose(chain, props));
     },
-    async renderToStream(chain, props) {
+    async renderToStream(chain, props, options) {
         // `renderToReadableStream` yields a Web ReadableStream<Uint8Array>; <Suspense> boundaries
         // (preact/compat) stream as they resolve, mirroring the React adapter.
         const { renderToReadableStream } = await preactRenderToStream();
-        return renderToReadableStream(compose(chain, props));
+        const stream = renderToReadableStream(compose(chain, props));
+        return options?.nonce === undefined ? stream : withIslandRuntimeNonce(stream, options.nonce);
     },
     // Preact reconciles against the existing DOM on hydrate (like React), so there's no per-document
     // bootstrap script - the seam allows the empty string (contrast Solid's generateHydrationScript).

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAE/E,8EAA8E;AAC9E,MAAM,CAAC,MAAM,aAAa,GAAkB;IAC1C,iGAAiG;IACjG,gGAAgG;IAChG,EAAE;IACF,gGAAgG;IAChG,oGAAoG;IACpG,kEAAkE;IAClE,cAAc,CAAC,KAAK,EAAE,KAAK;QACzB,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAA;QACrC,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;YAC9B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;QACnF,CAAC;QACD,OAAO,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IACrD,CAAC;IACD,KAAK,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK;QAC/B,0FAA0F;QAC1F,uEAAuE;QACvE,MAAM,EAAE,sBAAsB,EAAE,GAAG,MAAM,oBAAoB,EAAE,CAAA;QAC/D,OAAO,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IACtD,CAAC;IACD,iGAAiG;IACjG,kGAAkG;IAClG,aAAa;QACX,OAAO,EAAE,CAAA;IACX,CAAC;CACF,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/route-props.d.ts

@@ -0,0 +1,4 @@
+import type { MountRouterOptions, RenderProps, RouterState } from "@nifrajs/web";
+/** The client half of the server's `RenderProps`, so the first render matches the SSR markup. */
+export declare function routeProps(state: RouterState, searchSchemas: MountRouterOptions["searchSchemas"], matchChains?: MountRouterOptions["matchChains"]): RenderProps;
+//# sourceMappingURL=route-props.d.ts.map

package/dist/route-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-props.d.ts","sourceRoot":"","sources":["../src/route-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAKhF,iGAAiG;AACjG,wBAAgB,UAAU,CACxB,KAAK,EAAE,WAAW,EAClB,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,EAClD,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,GAC9C,WAAW,CAuBb"}

package/dist/route-props.js

@@ -0,0 +1,29 @@
+// `/client`, not the root: the root's graph carries the server, and Vite's dev server evaluates it
+// instead of tree-shaking it - which broke hydration before the browser ran a line of app code.
+import { searchOfChain } from "@nifrajs/web/client";
+/** The client half of the server's `RenderProps`, so the first render matches the SSR markup. */
+export function routeProps(state, searchSchemas, matchChains) {
+    const matchChain = matchChains?.[state.routeId];
+    // Derive this route's typed `search` from the URL + the route's schema chain (the SAME `searchOfChain`
+    // the server ran), so `useSearch` reads an identical value and hydrates with no drift.
+    const q = state.path.indexOf("?");
+    const rawSearch = q === -1 ? "" : state.path.slice(q);
+    return {
+        data: state.data,
+        // Each layout's own loader data. Without it a layout renders `data: null` on the client while the
+        // server rendered it with its data - a hydration mismatch on the first paint.
+        ...(state.layoutData !== undefined ? { layoutData: state.layoutData } : {}),
+        actionData: state.actionData,
+        pending: state.pending,
+        // The same `params`/`path` the server render received, so `useMatches` reports the same chain.
+        params: state.params,
+        path: state.path,
+        search: searchOfChain(searchSchemas?.[state.routeId] ?? [], rawSearch),
+        // The in-flight submission (for optimistic UI) - spread only when present.
+        ...(state.submission ? { submission: state.submission } : {}),
+        ...(state.boundaries !== undefined ? { boundaries: state.boundaries } : {}),
+        // The chain `useMatches` reports - the server passed the same one to the SSR render.
+        ...(matchChain !== undefined ? { matchChain } : {}),
+    };
+}
+//# sourceMappingURL=route-props.js.map

package/dist/route-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-props.js","sourceRoot":"","sources":["../src/route-props.ts"],"names":[],"mappings":"AACA,mGAAmG;AACnG,gGAAgG;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEnD,iGAAiG;AACjG,MAAM,UAAU,UAAU,CACxB,KAAkB,EAClB,aAAkD,EAClD,WAA+C;IAE/C,MAAM,UAAU,GAAG,WAAW,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAC/C,uGAAuG;IACvG,uFAAuF;IACvF,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IACjC,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACrD,OAAO;QACL,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,kGAAkG;QAClG,8EAA8E;QAC9E,GAAG,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3E,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,+FAA+F;QAC/F,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,MAAM,EAAE,aAAa,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,CAAC;QACtE,2EAA2E;QAC3E,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7D,GAAG,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3E,qFAAqF;QACrF,GAAG,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KACpD,CAAA;AACH,CAAC"}

package/dist/router.d.ts

@@ -1,7 +1,19 @@
 import type { InferOutput, StandardSchemaV1 } from "@nifrajs/core/server";
-import type { Blocker, BlockerFunction, BlockerState, NavigateFunction } from "@nifrajs/web";
-export type { Blocker, BlockerFunction, BlockerState, NavigateFunction };
+import type { Blocker, BlockerFunction, BlockerState, NavigateFunction, RenderProps, UIMatch } from "@nifrajs/web";
+export type { Blocker, BlockerFunction, BlockerState, NavigateFunction, UIMatch };
 export declare const SearchContext: import("preact").Context<Record<string, unknown>>;
+export declare const RenderPropsContext: import("preact").Context<RenderProps | undefined>;
+/**
+ * The rendered chain - each layout, then the page - with the URL prefix, params and loader data each
+ * one owns, plus its `handle` export. The same list on the server render and the client mount, so a
+ * layout can render breadcrumbs from its children's `handle`s without a hydration mismatch.
+ *
+ * ```tsx
+ * export const handle = { crumb: "Settings" }
+ * const crumbs = useMatches().flatMap((m) => (m.handle as { crumb?: string } | undefined)?.crumb ?? [])
+ * ```
+ */
+export declare function useMatches(): readonly UIMatch[];
 /**
  * The route's typed, validated search params - the SAME value the loader received as `ctx.search`.
  * SSR-correct: `compose` provides it from the URL server-side and from the identical derivation on the

package/dist/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAIzE,OAAO,KAAK,EACV,OAAO,EACP,eAAe,EACf,YAAY,EACZ,gBAAgB,EAGjB,MAAM,cAAc,CAAA;AAmBrB,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAgBxE,eAAO,MAAM,aAAa,mDACsE,CAAA;AAGhG;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CACvB,MAAM,SAAS,gBAAgB,GAAG,SAAS,GAAG,SAAS,KACpD,MAAM,SAAS,gBAAgB,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAInF;AAED;;sEAEsE;AACtE,wBAAgB,WAAW,IAAI,gBAAgB,CAO9C;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,GAAG,eAAe,GAAG,OAAO,CAe1E"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAIzE,OAAO,KAAK,EACV,OAAO,EACP,eAAe,EACf,YAAY,EACZ,gBAAgB,EAGhB,WAAW,EACX,OAAO,EACR,MAAM,cAAc,CAAA;AAqBrB,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAA;AAgBjF,eAAO,MAAM,aAAa,mDACsE,CAAA;AAShG,eAAO,MAAM,kBAAkB,mDAC4D,CAAA;AAK3F;;;;;;;;;GASG;AACH,wBAAgB,UAAU,IAAI,SAAS,OAAO,EAAE,CAG/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CACvB,MAAM,SAAS,gBAAgB,GAAG,SAAS,GAAG,SAAS,KACpD,MAAM,SAAS,gBAAgB,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAInF;AAED;;sEAEsE;AACtE,wBAAgB,WAAW,IAAI,gBAAgB,CAO9C;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,GAAG,eAAe,GAAG,OAAO,CAe1E"}

package/dist/router.js

@@ -1,6 +1,8 @@
 // `/client`, not the root - these are DOM values, and the root's graph carries the
 // server, which Vite's dev server evaluates rather than tree-shakes.
 import { getBrowserNavigate, IDLE_BLOCKER, registerBlocker, resolveNavigate, } from "@nifrajs/web/client";
+// Its own subpath, so an app that never calls `useMatches` never bundles it.
+import { chainMatches } from "@nifrajs/web/internal/matches-runtime";
 /**
  * `@nifrajs/web-preact/router` - Preact routing bindings over the agnostic `@nifrajs/web` history layer:
  * `useNavigate` (programmatic navigation), `useBlocker` (the unsaved-changes guard), and `useSearch`
@@ -9,7 +11,7 @@ import { getBrowserNavigate, IDLE_BLOCKER, registerBlocker, resolveNavigate, } f
  * `compose` provides on SSR + client mount alike. Client-safe (no `preact-render-to-string`). No JSX.
  */
 import { createContext } from "preact";
-import { useCallback, useContext, useEffect, useRef, useState } from "preact/compat";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/compat";
 // Frozen empty search so the default context value has a stable reference.
 const EMPTY_SEARCH = Object.freeze({});
 /** The current route's validated search, provided by `compose` on SSR + client mount alike (derived from
@@ -23,6 +25,27 @@ const SEARCH_CONTEXT_SLOT = Symbol.for("nifra.web-preact.search-context");
 const searchContextSlot = globalThis;
 export const SearchContext = searchContextSlot[SEARCH_CONTEXT_SLOT] ?? createContext(EMPTY_SEARCH);
 searchContextSlot[SEARCH_CONTEXT_SLOT] = SearchContext;
+/** The props `compose` rendered the chain with - what {@link useMatches} reads. A `globalThis`
+ * singleton for the same reason as {@link SearchContext}. */
+const PROPS_CONTEXT_SLOT = Symbol.for("nifra.web-preact.props-context");
+const propsContextSlot = globalThis;
+export const RenderPropsContext = propsContextSlot[PROPS_CONTEXT_SLOT] ?? createContext(undefined);
+propsContextSlot[PROPS_CONTEXT_SLOT] = RenderPropsContext;
+const NO_MATCHES = Object.freeze([]);
+/**
+ * The rendered chain - each layout, then the page - with the URL prefix, params and loader data each
+ * one owns, plus its `handle` export. The same list on the server render and the client mount, so a
+ * layout can render breadcrumbs from its children's `handle`s without a hydration mismatch.
+ *
+ * ```tsx
+ * export const handle = { crumb: "Settings" }
+ * const crumbs = useMatches().flatMap((m) => (m.handle as { crumb?: string } | undefined)?.crumb ?? [])
+ * ```
+ */
+export function useMatches() {
+    const props = useContext(RenderPropsContext);
+    return useMemo(() => (props === undefined ? NO_MATCHES : chainMatches(props)), [props]);
+}
 /**
  * The route's typed, validated search params - the SAME value the loader received as `ctx.search`.
  * SSR-correct: `compose` provides it from the URL server-side and from the identical derivation on the

package/dist/router.js.map

@@ -1 +1 @@
-{"version":3,"file":"router.js","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAYA,mFAAmF;AACnF,qEAAqE;AACrE,OAAO,EACL,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,eAAe,GAChB,MAAM,qBAAqB,CAAA;AAC5B;;;;;;GAMG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIpF,2EAA2E;AAC3E,MAAM,YAAY,GAAsC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AAEzE;;;;;;2BAM2B;AAC3B,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAA;AACzE,MAAM,iBAAiB,GAAG,UAEzB,CAAA;AACD,MAAM,CAAC,MAAM,aAAa,GACxB,iBAAiB,CAAC,mBAAmB,CAAC,IAAI,aAAa,CAA0B,YAAY,CAAC,CAAA;AAChG,iBAAiB,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAA;AAEtD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,SAAS;IAGvB,OAAO,UAAU,CAAC,aAAa,CAEJ,CAAA;AAC7B,CAAC;AAED;;sEAEsE;AACtE,MAAM,UAAU,WAAW;IACzB,OAAO,WAAW,CAAC,CAAC,EAAyC,EAAE,OAAyB,EAAE,EAAE;QAC1F,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAA;QACrC,IAAI,QAAQ,KAAK,SAAS;YAAE,OAAM;QAClC,MAAM,QAAQ,GAAG,eAAe,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;QAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IACzC,CAAC,EAAE,EAAE,CAAqB,CAAA;AAC5B,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,UAAU,CAAC,WAAsC;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,YAAY,CAAC,CAAA;IAC7D,oGAAoG;IACpG,oFAAoF;IACpF,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;IAC1C,cAAc,CAAC,OAAO,GAAG,WAAW,CAAA;IACpC,SAAS,CACP,GAAG,EAAE,CACH,eAAe,CAAC,CAAC,IAAI,EAAE,EAAE;QACvB,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAA;QACtC,OAAO,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IAChE,CAAC,EAAE,UAAU,CAAC,EAChB,EAAE,CACH,CAAA;IACD,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"router.js","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nifrajs/web-preact",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "description": "Preact render adapter for @nifrajs/web - streaming SSR + hydration (no build plugin).",
   "keywords": [
     "bun",
@@ -14,6 +14,9 @@
     "full-stack"
   ],
   "type": "module",
+  "nifra": {
+    "environment": "library"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -82,10 +85,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@nifrajs/core": "3.5.0",
-    "@nifrajs/i18n": "3.5.0",
-    "@nifrajs/image": "3.5.0",
-    "@nifrajs/web": "3.5.0",
+    "@nifrajs/core": "4.0.0",
+    "@nifrajs/i18n": "4.0.0",
+    "@nifrajs/image": "4.0.0",
+    "@nifrajs/web": "4.0.0",
     "preact-render-to-string": "^6.5.0"
   },
   "peerDependencies": {

package/src/client.ts

@@ -1,7 +1,4 @@
 import type { MountRouterOptions, RenderProps } from "@nifrajs/web"
-// `/client`, not the root: the root's graph carries the server, and Vite's dev server evaluates it
-// instead of tree-shaking it - which broke hydration before the browser ran a line of app code.
-import { searchOfChain } from "@nifrajs/web/client"
 /**
  * @nifrajs/web-preact/client - Preact client runtime. `hydrate` hydrates a single SSR'd route;
  * `mountRouter` hydrates a stateful Router that subscribes to the agnostic store (via
@@ -13,6 +10,7 @@ import { type FunctionComponent, h, hydrate as preactHydrate } from "preact"
 import { useSyncExternalStore } from "preact/compat"
 import { compose } from "./compose.ts"
 import { setMountedRouter } from "./fetcher.ts"
+import { routeProps } from "./route-props.ts"
 
 // The `_error` boundary chain element - defined in its own (DOM-free) module, re-exported here so
 // nifra's client codegen resolves it from `@nifrajs/web-preact/client` alongside `mountRouter`.
@@ -44,23 +42,11 @@ export function hydrate(chain: readonly unknown[], props: RenderProps, container
  * (no `getServerSnapshot`); `router.snapshot` is deterministic, so hydration matches the SSR markup.
  */
 export function mountRouter(options: MountRouterOptions): void {
-  const { router, routes, searchSchemas, container } = options
+  const { router, routes, searchSchemas, matchChains, container } = options
   setMountedRouter(router) // expose it to useFetcher/useFetchers (same page, client-only)
   const Router: FunctionComponent = () => {
     const state = useSyncExternalStore(router.subscribe, router.snapshot)
-    // Derive this route's typed `search` from the URL + the route's schema chain (the SAME `searchOfChain`
-    // the server ran), so `useSearch` reads an identical value and hydrates with no drift.
-    const q = state.path.indexOf("?")
-    const rawSearch = q === -1 ? "" : state.path.slice(q)
-    return compose(routes[state.routeId] ?? [], {
-      data: state.data,
-      actionData: state.actionData,
-      pending: state.pending,
-      search: searchOfChain(searchSchemas?.[state.routeId] ?? [], rawSearch),
-      // The in-flight submission (for optimistic UI) - spread only when present.
-      ...(state.submission ? { submission: state.submission } : {}),
-      ...(state.boundaries !== undefined ? { boundaries: state.boundaries } : {}),
-    })
+    return compose(routes[state.routeId] ?? [], routeProps(state, searchSchemas, matchChains))
   }
   preactHydrate(h(Router, null), container as Element)
 }

package/src/compose.ts

@@ -1,6 +1,6 @@
 import type { RenderProps } from "@nifrajs/web"
 import { type ComponentChildren, type ComponentType, createElement, h, type VNode } from "preact"
-import { SearchContext } from "./router.ts"
+import { RenderPropsContext, SearchContext } from "./router.ts"
 
 // Frozen empty search so a render with no search context has a stable provider value.
 const EMPTY_SEARCH: Readonly<Record<string, unknown>> = Object.freeze({})
@@ -13,6 +13,11 @@ const createSearchProvider = createElement as (
   props: { value: Record<string, unknown> },
   children?: ComponentChildren,
 ) => VNode
+const createPropsProvider = createElement as (
+  type: typeof RenderPropsContext.Provider,
+  props: { value: RenderProps },
+  children?: ComponentChildren,
+) => VNode
 
 /**
  * Fold a layout chain (outermost layout → page) into a single Preact tree: the page (innermost)
@@ -44,5 +49,9 @@ export function compose(chain: readonly unknown[], props: RenderProps): VNode {
       node,
     ) as VNode
   }
-  return createSearchProvider(SearchContext.Provider, { value: props.search ?? EMPTY_SEARCH }, node)
+  return createSearchProvider(
+    SearchContext.Provider,
+    { value: props.search ?? EMPTY_SEARCH },
+    createPropsProvider(RenderPropsContext.Provider, { value: props }, node),
+  )
 }

package/src/i18n.ts

@@ -5,8 +5,16 @@
  * and the client rebuilds the same formatter from the same props (no mismatch). Uses `preact` +
  * `preact/hooks` - no JSX.
  */
-import { createFormatter, type Formatter, type Messages } from "@nifrajs/i18n"
-import { type ComponentChildren, createContext, createElement, type VNode } from "preact"
+import {
+  createFormatter,
+  type Formatter,
+  type FormatterOptions,
+  type MessageKey,
+  type RegisteredMessages,
+  type Translation,
+} from "@nifrajs/i18n"
+import { type RichChunks, type RichRenderer, renderRich } from "@nifrajs/i18n/rich"
+import { type ComponentChildren, createContext, createElement, Fragment, type VNode } from "preact"
 import { useContext, useMemo } from "preact/hooks"
 
 const I18nContext = createContext<Formatter | null>(null)
@@ -21,23 +29,27 @@ const createProvider = createElement as (
   children?: ComponentChildren,
 ) => VNode
 
-export interface I18nProviderProps {
+export interface I18nProviderProps extends FormatterOptions {
   readonly locale: string
-  readonly messages: Messages
+  /** The catalog for `locale`, checked against the registered catalog type when one is declared. */
+  readonly messages: Translation
   readonly children?: ComponentChildren
 }
 
-/** Provide a {@link Formatter} (built from `locale` + `messages`) to the subtree. Memoized on
- * `locale`/`messages`, so switching locale rebuilds it and re-renders consumers. */
+/** Provide a {@link Formatter} (built from `locale` + `messages`, with the optional `fallback`,
+ * `onMissing`, `timeZone` and `numberingSystem` of `createFormatter`) to the subtree. Memoized
+ * on those props, so switching locale rebuilds it and re-renders consumers; formatters are cached by
+ * catalog identity, so an inline `fallback={[en]}` still yields the same instance. */
 export function I18nProvider(props: I18nProviderProps): VNode {
+  const { locale, messages, fallback, onMissing, timeZone, numberingSystem } = props
   const formatter = useMemo(
-    () => createFormatter(props.locale, props.messages),
-    [props.locale, props.messages],
+    () => createFormatter(locale, messages, { fallback, onMissing, timeZone, numberingSystem }),
+    [locale, messages, fallback, onMissing, timeZone, numberingSystem],
   )
   return createProvider(I18nContext.Provider, { value: formatter }, props.children)
 }
 
-/** Read the current {@link Formatter} (`{ locale, t, n, d }`). Throws if no `<I18nProvider>` is above. */
+/** Read the current {@link Formatter} (`{ locale, t, get, n, d }`). Throws if no `<I18nProvider>` is above. */
 export function useT(): Formatter {
   const formatter = useContext(I18nContext)
   if (formatter === null) {
@@ -45,3 +57,33 @@ export function useT(): Formatter {
   }
   return formatter
 }
+
+/** Tag handlers for {@link rich}, by tag name: each receives its tag's content as one node. */
+export type RichTags = Readonly<Record<string, (content: ComponentChildren) => ComponentChildren>>
+
+const join = (chunks: RichChunks<ComponentChildren>): ComponentChildren =>
+  chunks.length === 0
+    ? null
+    : chunks.length === 1
+      ? chunks[0]
+      : createElement(Fragment, null, ...chunks)
+const PREACT_RICH: RichRenderer<ComponentChildren> = {
+  join,
+  lineBreak: () => createElement("br", null),
+}
+
+/**
+ * The message at `key` with its tags rendered by `tags`, as Preact nodes - no HTML, no
+ * `dangerouslySetInnerHTML`. `"Read the <link>terms</link>"` with
+ * `{ link: (content) => <a href="/terms">{content}</a> }` renders the link around "terms"; a tag with
+ * no handler renders its content as text, `<br/>` is a `<br>`, and interpolated values are always
+ * text. See `@nifrajs/i18n/rich`.
+ */
+export function rich<M extends object = RegisteredMessages>(
+  formatter: Formatter<M>,
+  key: MessageKey<M>,
+  tags?: RichTags,
+  vars?: Readonly<Record<string, unknown>>,
+): ComponentChildren {
+  return renderRich(PREACT_RICH, formatter, key, tags, vars)
+}

package/src/index.ts

@@ -9,6 +9,44 @@ import type { RenderAdapter } from "@nifrajs/web"
 import { compose } from "./compose.ts"
 import { preactRenderToStream, preactRenderToString } from "./preact-render.ts"
 
+const ISLAND_RUNTIME_OPEN = "<script>(function(){"
+const ISLAND_RUNTIME_OPEN_BYTES = new TextEncoder().encode(ISLAND_RUNTIME_OPEN)
+
+const startsWithBytes = (chunk: Uint8Array, prefix: Uint8Array): boolean => {
+  if (chunk.length < prefix.length) return false
+  for (let i = 0; i < prefix.length; i++) if (chunk[i] !== prefix[i]) return false
+  return true
+}
+
+/**
+ * `preact-render-to-string` streams the runtime that moves resolved `<Suspense>` content into place as
+ * one attribute-less `<script>` chunk, and takes no nonce option. Stamp the document nonce on exactly
+ * that chunk (it defines the `preact-island` element); every other chunk passes through untouched, so
+ * an app-rendered `<script>` never inherits the nonce.
+ */
+function withIslandRuntimeNonce(
+  stream: ReadableStream<Uint8Array>,
+  nonce: string,
+): ReadableStream<Uint8Array> {
+  const decoder = new TextDecoder()
+  const encoder = new TextEncoder()
+  const nonced = `<script nonce="${nonce.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;")}">(function(){`
+  return stream.pipeThrough(
+    new TransformStream<Uint8Array, Uint8Array>({
+      transform(chunk, controller) {
+        if (startsWithBytes(chunk, ISLAND_RUNTIME_OPEN_BYTES)) {
+          const text = decoder.decode(chunk)
+          if (text.includes('"preact-island"')) {
+            controller.enqueue(encoder.encode(nonced + text.slice(ISLAND_RUNTIME_OPEN.length)))
+            return
+          }
+        }
+        controller.enqueue(chunk)
+      },
+    }),
+  )
+}
+
 /** The Preact server render adapter - pass to @nifrajs/web's `renderPage`. */
 export const preactAdapter: RenderAdapter = {
   // Synchronous one-pass render for non-deferred pages (renderPage's buffered fast path). The sync
@@ -24,11 +62,12 @@ export const preactAdapter: RenderAdapter = {
     }
     return loaded.renderToString(compose(chain, props))
   },
-  async renderToStream(chain, props) {
+  async renderToStream(chain, props, options) {
     // `renderToReadableStream` yields a Web ReadableStream<Uint8Array>; <Suspense> boundaries
     // (preact/compat) stream as they resolve, mirroring the React adapter.
     const { renderToReadableStream } = await preactRenderToStream()
-    return renderToReadableStream(compose(chain, props))
+    const stream = renderToReadableStream(compose(chain, props))
+    return options?.nonce === undefined ? stream : withIslandRuntimeNonce(stream, options.nonce)
   },
   // Preact reconciles against the existing DOM on hydrate (like React), so there's no per-document
   // bootstrap script - the seam allows the empty string (contrast Solid's generateHydrationScript).

package/src/route-props.ts

@@ -0,0 +1,34 @@
+import type { MountRouterOptions, RenderProps, RouterState } from "@nifrajs/web"
+// `/client`, not the root: the root's graph carries the server, and Vite's dev server evaluates it
+// instead of tree-shaking it - which broke hydration before the browser ran a line of app code.
+import { searchOfChain } from "@nifrajs/web/client"
+
+/** The client half of the server's `RenderProps`, so the first render matches the SSR markup. */
+export function routeProps(
+  state: RouterState,
+  searchSchemas: MountRouterOptions["searchSchemas"],
+  matchChains?: MountRouterOptions["matchChains"],
+): RenderProps {
+  const matchChain = matchChains?.[state.routeId]
+  // Derive this route's typed `search` from the URL + the route's schema chain (the SAME `searchOfChain`
+  // the server ran), so `useSearch` reads an identical value and hydrates with no drift.
+  const q = state.path.indexOf("?")
+  const rawSearch = q === -1 ? "" : state.path.slice(q)
+  return {
+    data: state.data,
+    // Each layout's own loader data. Without it a layout renders `data: null` on the client while the
+    // server rendered it with its data - a hydration mismatch on the first paint.
+    ...(state.layoutData !== undefined ? { layoutData: state.layoutData } : {}),
+    actionData: state.actionData,
+    pending: state.pending,
+    // The same `params`/`path` the server render received, so `useMatches` reports the same chain.
+    params: state.params,
+    path: state.path,
+    search: searchOfChain(searchSchemas?.[state.routeId] ?? [], rawSearch),
+    // The in-flight submission (for optimistic UI) - spread only when present.
+    ...(state.submission ? { submission: state.submission } : {}),
+    ...(state.boundaries !== undefined ? { boundaries: state.boundaries } : {}),
+    // The chain `useMatches` reports - the server passed the same one to the SSR render.
+    ...(matchChain !== undefined ? { matchChain } : {}),
+  }
+}

package/src/router.ts

@@ -9,6 +9,8 @@ import type {
   NavigateFunction,
   NavigateOptions,
   NavigateTargetInput,
+  RenderProps,
+  UIMatch,
 } from "@nifrajs/web"
 // `/client`, not the root - these are DOM values, and the root's graph carries the
 // server, which Vite's dev server evaluates rather than tree-shakes.
@@ -18,6 +20,8 @@ import {
   registerBlocker,
   resolveNavigate,
 } from "@nifrajs/web/client"
+// Its own subpath, so an app that never calls `useMatches` never bundles it.
+import { chainMatches } from "@nifrajs/web/internal/matches-runtime"
 /**
  * `@nifrajs/web-preact/router` - Preact routing bindings over the agnostic `@nifrajs/web` history layer:
  * `useNavigate` (programmatic navigation), `useBlocker` (the unsaved-changes guard), and `useSearch`
@@ -26,9 +30,9 @@ import {
  * `compose` provides on SSR + client mount alike. Client-safe (no `preact-render-to-string`). No JSX.
  */
 import { createContext } from "preact"
-import { useCallback, useContext, useEffect, useRef, useState } from "preact/compat"
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/compat"
 
-export type { Blocker, BlockerFunction, BlockerState, NavigateFunction }
+export type { Blocker, BlockerFunction, BlockerState, NavigateFunction, UIMatch }
 
 // Frozen empty search so the default context value has a stable reference.
 const EMPTY_SEARCH: Readonly<Record<string, unknown>> = Object.freeze({})
@@ -48,6 +52,33 @@ export const SearchContext =
   searchContextSlot[SEARCH_CONTEXT_SLOT] ?? createContext<Record<string, unknown>>(EMPTY_SEARCH)
 searchContextSlot[SEARCH_CONTEXT_SLOT] = SearchContext
 
+/** The props `compose` rendered the chain with - what {@link useMatches} reads. A `globalThis`
+ * singleton for the same reason as {@link SearchContext}. */
+const PROPS_CONTEXT_SLOT = Symbol.for("nifra.web-preact.props-context")
+const propsContextSlot = globalThis as {
+  [PROPS_CONTEXT_SLOT]?: ReturnType<typeof createContext<RenderProps | undefined>>
+}
+export const RenderPropsContext =
+  propsContextSlot[PROPS_CONTEXT_SLOT] ?? createContext<RenderProps | undefined>(undefined)
+propsContextSlot[PROPS_CONTEXT_SLOT] = RenderPropsContext
+
+const NO_MATCHES: readonly UIMatch[] = Object.freeze([])
+
+/**
+ * The rendered chain - each layout, then the page - with the URL prefix, params and loader data each
+ * one owns, plus its `handle` export. The same list on the server render and the client mount, so a
+ * layout can render breadcrumbs from its children's `handle`s without a hydration mismatch.
+ *
+ * ```tsx
+ * export const handle = { crumb: "Settings" }
+ * const crumbs = useMatches().flatMap((m) => (m.handle as { crumb?: string } | undefined)?.crumb ?? [])
+ * ```
+ */
+export function useMatches(): readonly UIMatch[] {
+  const props = useContext(RenderPropsContext)
+  return useMemo(() => (props === undefined ? NO_MATCHES : chainMatches(props)), [props])
+}
+
 /**
  * The route's typed, validated search params - the SAME value the loader received as `ctx.search`.
  * SSR-correct: `compose` provides it from the URL server-side and from the identical derivation on the