@nifrajs/web-solid 5.9.0 → 5.11.0

package/dist/router-context.js

@@ -0,0 +1,14 @@
+import { createContext } from "solid-js";
+/** Shared provider identities across the Bun server and Vite's SSR module graph. */
+const SEARCH_CONTEXT_SLOT = Symbol.for("nifra.web-solid.search-context");
+// biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The namespaced Symbol.for key shares one matching Solid Context across Bun and Vite's duplicate module graphs in this SSR process.
+const searchContextSlot = globalThis;
+export const SearchContext = searchContextSlot[SEARCH_CONTEXT_SLOT] ?? createContext();
+searchContextSlot[SEARCH_CONTEXT_SLOT] = SearchContext;
+/** Props for the composed route chain; a global singleton for the same reason as SearchContext. */
+const PROPS_CONTEXT_SLOT = Symbol.for("nifra.web-solid.props-context");
+// biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The namespaced Symbol.for key shares one matching Solid Context across Bun and Vite's duplicate module graphs in this SSR process.
+const propsContextSlot = globalThis;
+export const RenderPropsContext = propsContextSlot[PROPS_CONTEXT_SLOT] ?? createContext();
+propsContextSlot[PROPS_CONTEXT_SLOT] = RenderPropsContext;
+//# sourceMappingURL=router-context.js.map

package/dist/router-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"router-context.js","sourceRoot":"","sources":["../src/router-context.ts"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,EAAE,MAAM,UAAU,CAAA;AAErE,oFAAoF;AACpF,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAA;AACxE,oMAAoM;AACpM,MAAM,iBAAiB,GAAG,UAEzB,CAAA;AACD,MAAM,CAAC,MAAM,aAAa,GACxB,iBAAiB,CAAC,mBAAmB,CAAC,IAAI,aAAa,EAAqC,CAAA;AAC9F,iBAAiB,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAA;AAEtD,mGAAmG;AACnG,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAA;AACtE,oMAAoM;AACpM,MAAM,gBAAgB,GAAG,UAAyE,CAAA;AAClG,MAAM,CAAC,MAAM,kBAAkB,GAC7B,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,aAAa,EAAe,CAAA;AACtE,gBAAgB,CAAC,kBAAkB,CAAC,GAAG,kBAAkB,CAAA"}

package/dist/router.d.ts

@@ -1,5 +1,5 @@
 import type { InferOutput, StandardSchemaV1 } from "@nifrajs/core/server";
-import type { Blocker, BlockerFunction, BlockerState, NavigateFunction, RenderProps, UIMatch } from "@nifrajs/web";
+import type { Blocker, BlockerFunction, BlockerState, NavigateFunction, UIMatch } from "@nifrajs/web";
 /**
  * `@nifrajs/web-solid/router` - Solid routing bindings over the agnostic `@nifrajs/web` history layer:
  * `useNavigate` (programmatic navigation), `useBlocker` (the unsaved-changes guard), and `useSearch`
@@ -7,11 +7,14 @@ import type { Blocker, BlockerFunction, BlockerState, NavigateFunction, RenderPr
  * DOM-free bridges (`getBrowserNavigate` / `registerBlocker`, populated by `installHistory`); `useSearch`
  * reads the accessor `compose` provides on SSR + client mount alike. Imports only `solid-js`. No JSX.
  */
-import { type Accessor, type Context } from "solid-js";
+import { type Accessor } from "solid-js";
+import { RenderPropsContext, SearchContext } from "./router-context.js";
+export { href, rawHref } from "@nifrajs/web/client";
 export { onPageHide, onPageShow, usePageVisibility } from "./page-visibility.js";
+export type { RouteSlotController, RouteSlotProps } from "./route-slot.tsx";
+export { RouteSlot, useRouteSlot } from "./route-slot.tsx";
 export type { Blocker, BlockerFunction, BlockerState, NavigateFunction, UIMatch };
-export declare const SearchContext: Context<Accessor<Record<string, unknown>> | undefined>;
-export declare const RenderPropsContext: Context<RenderProps | undefined>;
+export { RenderPropsContext, SearchContext };
 /**
  * The rendered chain - each layout, then the page - with the URL prefix, params and loader data each
  * one owns, plus its `handle` export, as a reactive accessor. The same list on the server render and
@@ -38,7 +41,7 @@ export declare function useMatches(): Accessor<readonly UIMatch[]>;
  * ```
  */
 export declare function useSearch<Schema extends StandardSchemaV1 | undefined = undefined>(): Accessor<Schema extends StandardSchemaV1 ? InferOutput<Schema> : Record<string, unknown>>;
-/** Get the {@link NavigateFunction} (a string path, a history delta, or a typed `{ to, search }` object).
+/** Get the {@link NavigateFunction} (an `Href` from `href()` or `rawHref()`, or a history delta).
  * Resolves the browser navigate at call time, so it works as soon as `installHistory` has run and no-ops
  * before then / on the server. */
 export declare function useNavigate(): NavigateFunction;

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,EAChB,WAAW,EACX,OAAO,EACR,MAAM,cAAc,CAAA;AAOrB;;;;;;GAMG;AACH,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,OAAO,EAMb,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAChF,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAA;AAiBjF,eAAO,MAAM,aAAa,wDACoE,CAAA;AAO9F,eAAO,MAAM,kBAAkB,kCACuC,CAAA;AAKtE;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,IAAI,QAAQ,CAAC,SAAS,OAAO,EAAE,CAAC,CAIzD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,MAAM,SAAS,gBAAgB,GAAG,SAAS,GAAG,SAAS,KAAK,QAAQ,CAC5F,MAAM,SAAS,gBAAgB,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAChF,CAIA;AAED;;kCAEkC;AAClC,wBAAgB,WAAW,IAAI,gBAAgB,CAE9C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,GAAG,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,CAYpF"}
+{"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,EAChB,OAAO,EACR,MAAM,cAAc,CAAA;AAOrB;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,QAAQ,EAAmD,MAAM,UAAU,CAAA;AAEzF,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEvE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAChF,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC3E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC1D,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA;AAe5C;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,IAAI,QAAQ,CAAC,SAAS,OAAO,EAAE,CAAC,CAIzD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,MAAM,SAAS,gBAAgB,GAAG,SAAS,GAAG,SAAS,KAAK,QAAQ,CAC5F,MAAM,SAAS,gBAAgB,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAChF,CAIA;AAED;;kCAEkC;AAClC,wBAAgB,WAAW,IAAI,gBAAgB,CAE9C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,GAAG,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,CAYpF"}

package/dist/router.js

@@ -11,9 +11,13 @@ import { navigateNow } from "@nifrajs/web/internal/navigate-runtime";
  * DOM-free bridges (`getBrowserNavigate` / `registerBlocker`, populated by `installHistory`); `useSearch`
  * reads the accessor `compose` provides on SSR + client mount alike. Imports only `solid-js`. No JSX.
  */
-import { createContext, createMemo, createSignal, onCleanup, useContext, } from "solid-js";
+import { createMemo, createSignal, onCleanup, useContext } from "solid-js";
 import { PageContext } from "./page-visibility.js";
+import { RenderPropsContext, SearchContext } from "./router-context.js";
+export { href, rawHref } from "@nifrajs/web/client";
 export { onPageHide, onPageShow, usePageVisibility } from "./page-visibility.js";
+export { RouteSlot, useRouteSlot } from "./route-slot.jsx";
+export { RenderPropsContext, SearchContext };
 // Frozen empty search + a stable accessor for a `useSearch` used outside a nifra route tree.
 const EMPTY_SEARCH = Object.freeze({});
 const EMPTY_SEARCH_ACCESSOR = () => EMPTY_SEARCH;
@@ -24,16 +28,6 @@ const EMPTY_SEARCH_ACCESSOR = () => EMPTY_SEARCH;
  * code under Bun provides; route modules through Vite's SSR runner read), and Solid matches provider
  * to reader by context object identity - two `createContext` results make `useSearch` SSR-render its
  * empty default in dev. */
-const SEARCH_CONTEXT_SLOT = Symbol.for("nifra.web-solid.search-context");
-const searchContextSlot = globalThis;
-export const SearchContext = searchContextSlot[SEARCH_CONTEXT_SLOT] ?? createContext();
-searchContextSlot[SEARCH_CONTEXT_SLOT] = SearchContext;
-/** The props `compose` rendered the chain with - getters over the router snapshot on the client - which
- * {@link useMatches} reads. A `globalThis` singleton for the same reason as {@link SearchContext}. */
-const PROPS_CONTEXT_SLOT = Symbol.for("nifra.web-solid.props-context");
-const propsContextSlot = globalThis;
-export const RenderPropsContext = propsContextSlot[PROPS_CONTEXT_SLOT] ?? createContext();
-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
@@ -68,7 +62,7 @@ export function useMatches() {
 export function useSearch() {
     return (useContext(SearchContext) ?? EMPTY_SEARCH_ACCESSOR);
 }
-/** Get the {@link NavigateFunction} (a string path, a history delta, or a typed `{ to, search }` object).
+/** Get the {@link NavigateFunction} (an `Href` from `href()` or `rawHref()`, or a history delta).
  * Resolves the browser navigate at call time, so it works as soon as `installHistory` has run and no-ops
  * before then / on the server. */
 export function useNavigate() {

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,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACnE,6EAA6E;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACpE;;;;;;GAMG;AACH,OAAO,EAGL,aAAa,EACb,UAAU,EACV,YAAY,EACZ,SAAS,EACT,UAAU,GACX,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAGhF,6FAA6F;AAC7F,MAAM,YAAY,GAAsC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AACzE,MAAM,qBAAqB,GAAsC,GAAG,EAAE,CAAC,YAAY,CAAA;AAEnF;;;;;;2BAM2B;AAC3B,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAA;AACxE,MAAM,iBAAiB,GAAG,UAEzB,CAAA;AACD,MAAM,CAAC,MAAM,aAAa,GACxB,iBAAiB,CAAC,mBAAmB,CAAC,IAAI,aAAa,EAAqC,CAAA;AAC9F,iBAAiB,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAA;AAEtD;sGACsG;AACtG,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAA;AACtE,MAAM,gBAAgB,GAAG,UAAyE,CAAA;AAClG,MAAM,CAAC,MAAM,kBAAkB,GAC7B,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,aAAa,EAAe,CAAA;AACtE,gBAAgB,CAAC,kBAAkB,CAAC,GAAG,kBAAkB,CAAA;AAEzD,MAAM,UAAU,GAAuB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AAExD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU;IACxB,MAAM,KAAK,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAA;IAC5C,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,GAAG,EAAE,CAAC,UAAU,CAAA;IAChD,OAAO,UAAU,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;AAC9C,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,SAAS;IAGvB,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,qBAAqB,CAEzD,CAAA;AACH,CAAC;AAED;;kCAEkC;AAClC,MAAM,UAAU,WAAW;IACzB,OAAO,WAAW,CAAA;AACpB,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,WAAsC;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,YAAY,CAAU,YAAY,CAAC,CAAA;IACjE,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACpC,SAAS,CACP,eAAe,CACb,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI;QACvB,CAAC,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,EACvE,UAAU,CACX,CACF,CAAA;IACD,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"router.js","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AAWA,mFAAmF;AACnF,qEAAqE;AACrE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACnE,6EAA6E;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACpE;;;;;;GAMG;AACH,OAAO,EAAiB,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEvE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAEhF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE1D,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA;AAE5C,6FAA6F;AAC7F,MAAM,YAAY,GAAsC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AACzE,MAAM,qBAAqB,GAAsC,GAAG,EAAE,CAAC,YAAY,CAAA;AAEnF;;;;;;2BAM2B;AAC3B,MAAM,UAAU,GAAuB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AAExD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU;IACxB,MAAM,KAAK,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAA;IAC5C,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,GAAG,EAAE,CAAC,UAAU,CAAA;IAChD,OAAO,UAAU,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;AAC9C,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,SAAS;IAGvB,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,qBAAqB,CAEzD,CAAA;AACH,CAAC;AAED;;kCAEkC;AAClC,MAAM,UAAU,WAAW;IACzB,OAAO,WAAW,CAAA;AACpB,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,WAAsC;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,YAAY,CAAU,YAAY,CAAC,CAAA;IACjE,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACpC,SAAS,CACP,eAAe,CACb,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI;QACvB,CAAC,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,EACvE,UAAU,CACX,CACF,CAAA;IACD,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nifrajs/web-solid",
-  "version": "5.9.0",
+  "version": "5.11.0",
   "description": "Solid render adapter for @nifrajs/web - SSR + hydration, with the Solid Babel build plugin (@nifrajs/web-solid/plugin).",
   "keywords": [
     "bun",
@@ -132,16 +132,16 @@
   "dependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
-    "@nifrajs/core": "5.9.0",
-    "@nifrajs/web": "5.9.0",
+    "@nifrajs/core": "5.11.0",
+    "@nifrajs/web": "5.11.0",
     "babel-preset-solid": "^1.9.3",
     "solid-refresh": "^0.7.8"
   },
   "peerDependencies": {
     "@mdx-js/mdx": "^3",
     "solid-js": "^1.9.0",
-    "@nifrajs/i18n": "^5.9.0",
-    "@nifrajs/image": "^5.9.0"
+    "@nifrajs/i18n": "^5.11.0",
+    "@nifrajs/image": "^5.11.0"
   },
   "peerDependenciesMeta": {
     "@mdx-js/mdx": {

package/src/client.ts

@@ -1,4 +1,5 @@
 import type { MountRouterOptions, RenderProps } from "@nifrajs/web"
+import { setRouteSlotRuntime } from "@nifrajs/web/client"
 /**
  * @nifrajs/web-solid/client - Solid client runtime. `hydrate` hydrates a single SSR'd route;
  * `mountRouter` hydrates the initial route then drives navigation through a Solid signal - so a
@@ -36,6 +37,7 @@ export function hydrate(chain: readonly unknown[], props: RenderProps, container
  */
 export function mountRouter(options: MountRouterOptions): void {
   const { router, routes, searchSchemas, matchChains, container } = options
+  setRouteSlotRuntime({ router, routes, searchSchemas, matchChains })
   setMountedRouter(router) // expose it to createFetcher/useFetchers (same page, client-only)
   const el = container as Element
 

package/src/compose.ts

@@ -1,6 +1,6 @@
 import type { RenderProps } from "@nifrajs/web"
 import { type Component, createComponent, type JSX } from "solid-js"
-import { RenderPropsContext, SearchContext } from "./router.ts"
+import { RenderPropsContext, SearchContext } from "./router-context.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({})
@@ -29,7 +29,9 @@ export function compose(chain: readonly unknown[], props: RenderProps): () => JS
         get data() {
           return props.layoutData?.[i] ?? null
         },
-        ...(props.boundaries !== undefined ? { boundaries: props.boundaries } : {}),
+        get boundaries() {
+          return props.boundaries
+        },
         children: child(),
       })
   }

package/src/image.ts

@@ -6,7 +6,14 @@
  * reactively (`splitProps`/`mergeProps`). Resizing is delegated to the `loader`; nifra bundles no codec.
  * No JSX (`createComponent`/`Dynamic`), so the package builds with plain `tsc`.
  */
-import { type ImageLoader, type ImageProps, resolveImage, toHtmlAttrs } from "@nifrajs/image"
+import {
+  type ImageInputProps,
+  type ImageLoader,
+  type ImageProps,
+  resolveImage,
+  type StaticImageProps,
+  toHtmlAttrs,
+} from "@nifrajs/image"
 import { createComponent, type JSX, mergeProps, splitProps } from "solid-js"
 import { Dynamic } from "solid-js/web"
 
@@ -29,11 +36,14 @@ export interface ImageComponentProps
   readonly loader?: ImageLoader
 }
 
+export type StaticImageComponentProps = StaticImageProps &
+  Omit<ImageComponentProps, "src" | "width" | "height">
+
 /**
- * Render a responsive, CLS-safe `<img>`. `width`+`height` are required (reserve layout space);
+ * Render a responsive, CLS-safe `<img>`. String URLs require dimensions; asset imports infer them;
  * `priority` marks the LCP image (`eager` + `fetchpriority="high"`). Extra DOM props pass through.
  */
-export function Image(props: ImageComponentProps): JSX.Element {
+export function Image(props: ImageComponentProps | StaticImageComponentProps): JSX.Element {
   // Separate the nifra-only props (not valid DOM attributes) from the DOM passthrough (`rest`), keeping
   // both reactive. `rest` carries class/style/id/handlers; the computed attrs are layered over it.
   const [, rest] = splitProps(props, [
@@ -51,10 +61,7 @@ export function Image(props: ImageComponentProps): JSX.Element {
   const attrs = (): ReturnType<typeof toHtmlAttrs> => {
     // Build ImageProps via conditional spreads (exactOptionalPropertyTypes: an unset optional is
     // absent, not `undefined`). resolveImage validates width/height > 0 (CLS contract).
-    const input: ImageProps = {
-      src: props.src,
-      width: props.width,
-      height: props.height,
+    const common = {
       alt: props.alt,
       ...(props.sizes !== undefined ? { sizes: props.sizes } : {}),
       ...(props.widths !== undefined ? { widths: props.widths } : {}),
@@ -62,6 +69,20 @@ export function Image(props: ImageComponentProps): JSX.Element {
       ...(props.loading !== undefined ? { loading: props.loading } : {}),
       ...(props.priority !== undefined ? { priority: props.priority } : {}),
     }
+    const input: ImageInputProps =
+      typeof props.src === "string"
+        ? {
+            ...common,
+            src: props.src,
+            width: props.width ?? Number.NaN,
+            height: props.height ?? Number.NaN,
+          }
+        : {
+            ...common,
+            src: props.src,
+            ...(props.width !== undefined ? { width: props.width } : {}),
+            ...(props.height !== undefined ? { height: props.height } : {}),
+          }
     return toHtmlAttrs(resolveImage(input, props.loader))
   }
   return createComponent(Dynamic, mergeProps(rest, attrs, { component: "img" }))

package/src/keep-alive-view.ts

@@ -23,7 +23,7 @@ import {
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import { PageContext, type PageSlot } from "./page-visibility.ts"
-import { RenderPropsContext, SearchContext } from "./router.ts"
+import { RenderPropsContext, SearchContext } from "./router-context.ts"
 
 /** What the view renders with: one per mount, on the server or in the browser. */
 export interface KeepAliveViewMount {

package/src/ppr.ts

@@ -38,7 +38,7 @@ function openHost<Data>(hole: HoleDefinition<Data>, fill: () => unknown): JSX.El
 }
 
 /**
- * Experimental: one `dynamic` or `shared` boundary of a partially prerendered page.
+ * One `dynamic` or `shared` boundary of a partially prerendered page.
  *
  * In a shared shell the hole is an empty host Solid never fills: the PPR runtime puts the server's
  * HTML into it, and an interactive hole then hydrates as its own root from the frame's props. When the

package/src/query.ts

@@ -1,4 +1,16 @@
-import type { QueryClient, QueryOptions, QueryState } from "@nifrajs/web"
+import type {
+  DehydratedState,
+  InfiniteData,
+  InfiniteQueryOptions,
+  MutationCallbacks,
+  MutationContext,
+  MutationHandle,
+  MutationState,
+  QueryClient,
+  QueryOptions,
+  QueryState,
+} from "@nifrajs/web"
+import { createMutation as createMutationHandle } from "@nifrajs/web/client"
 import {
   createNoClientRefetch,
   fetchOnMount,
@@ -12,15 +24,46 @@ import {
  * exposes `invalidateQueries` for after a mutation. Imports only `solid-js` + `@nifrajs/web` (never
  * `solid-js/web`), so route components use it on the server *and* client. No JSX.
  *
- * The query client is created lazily **client-side only** (`typeof window`) - on the server the
- * accessor returns the idle/pending state (queries are client-first; loaders are the SSR data source).
+ * Without a provider, the query client is created lazily **client-side only** (`typeof window`) - on
+ * the server the accessor returns idle state and route loaders remain the data source. A
+ * `QueryClientProvider` can supply a request-scoped hydrated client.
  * The `key` is captured once (Solid setup runs once); a reactive key is a documented future enhancement.
  */
-import { type Accessor, createSignal, onCleanup, onMount } from "solid-js"
+import {
+  type Accessor,
+  createComponent,
+  createContext,
+  createSignal,
+  type JSX,
+  onCleanup,
+  onMount,
+  useContext,
+} from "solid-js"
+
+const QueryClientContext = createContext<QueryClient>()
+
+function queryClientForCurrentTree(): QueryClient | undefined {
+  return useContext(QueryClientContext) ?? getQueryClientSingleton()
+}
+
+/** Provide a request-scoped client and optionally seed it before descendants run. */
+export function QueryClientProvider(props: {
+  readonly client: QueryClient
+  readonly state?: DehydratedState
+  readonly children?: JSX.Element
+}): JSX.Element {
+  if (props.state !== undefined) props.client.hydrate(props.state)
+  return createComponent(QueryClientContext.Provider, {
+    value: props.client,
+    get children() {
+      return props.children
+    },
+  })
+}
 
 /** Access the query client to imperatively `invalidateQueries(keyOrPrefix)` (e.g. after a mutation). */
 export function useQueryClient(): Pick<QueryClient, "invalidateQueries"> {
-  return getQueryClientSingleton() ?? { invalidateQueries: noop }
+  return queryClientForCurrentTree() ?? { invalidateQueries: noop }
 }
 
 /** A query's reactive state accessor plus `refetch`. */
@@ -42,7 +85,7 @@ export function createQuery<T>(
   fn: () => Promise<T>,
   options?: QueryOptions,
 ): CreateQueryResult<T> {
-  const handle = getQueryClientSingleton()?.query<T>(key, fn, options)
+  const handle = queryClientForCurrentTree()?.query<T>(key, fn, options)
   const [state, setState] = createSignal<QueryState<T>>(
     handle ? handle.snapshot() : IDLE_QUERY_STATE,
   )
@@ -56,3 +99,99 @@ export function createQuery<T>(
     refetch: createNoClientRefetch<T>("[nifra/web-solid]", "createQuery.refetch"),
   }
 }
+
+/** A mutation result expressed as Solid accessors and imperative controls. */
+export interface CreateMutationResult<TData, TVariables> {
+  readonly state: Accessor<MutationState<TData, TVariables>>
+  readonly isIdle: Accessor<boolean>
+  readonly isPending: Accessor<boolean>
+  readonly isError: Accessor<boolean>
+  readonly isSuccess: Accessor<boolean>
+  readonly mutate: (variables: TVariables) => void
+  readonly mutateAsync: (variables: TVariables) => Promise<TData>
+  readonly reset: () => void
+  readonly cancel: () => void
+}
+
+/** Bind a mutation to a Solid owner. Identity changes discard late results and callbacks. */
+export function createMutation<TData, TVariables = void>(
+  fn: (variables: TVariables, context: MutationContext) => Promise<TData>,
+  callbacks: MutationCallbacks<TData, TVariables> = {},
+): CreateMutationResult<TData, TVariables> {
+  const handle: MutationHandle<TData, TVariables> = createMutationHandle(fn, callbacks)
+  const [state, setState] = createSignal(handle.snapshot())
+  onCleanup(handle.subscribe(() => setState(() => handle.snapshot())))
+  return {
+    state,
+    isIdle: () => state().status === "idle",
+    isPending: () => state().status === "pending",
+    isError: () => state().status === "error",
+    isSuccess: () => state().status === "success",
+    mutate: (variables) => {
+      handle.mutate(variables).catch(noop)
+    },
+    mutateAsync: handle.mutate,
+    reset: handle.reset,
+    cancel: handle.cancel,
+  }
+}
+
+/** Options for a Solid infinite query. */
+export interface CreateInfiniteQueryOptions<T, P> extends InfiniteQueryOptions<T, P> {
+  readonly enabled?: boolean
+}
+
+/** Infinite-query state and page controls expressed as Solid accessors. */
+export interface CreateInfiniteQueryResult<T, P> {
+  readonly state: Accessor<QueryState<InfiniteData<T, P>>>
+  readonly isPending: Accessor<boolean>
+  readonly isError: Accessor<boolean>
+  readonly isSuccess: Accessor<boolean>
+  readonly hasNextPage: Accessor<boolean>
+  readonly hasPreviousPage: Accessor<boolean>
+  readonly fetchNextPage: () => Promise<InfiniteData<T, P>>
+  readonly fetchPreviousPage: () => Promise<InfiniteData<T, P>>
+  readonly refetch: () => Promise<InfiniteData<T, P>>
+}
+
+/** Bind a paged query to a Solid owner and fetch its first page on mount. */
+export function createInfiniteQuery<T, P>(
+  key: unknown,
+  fn: (pageParam: P) => Promise<T>,
+  options: CreateInfiniteQueryOptions<T, P>,
+): CreateInfiniteQueryResult<T, P> {
+  const client = queryClientForCurrentTree()
+  const enabled = options.enabled !== false
+  const handle = client?.infiniteQuery<T, P>(key, fn, options)
+  const [state, setState] = createSignal<QueryState<InfiniteData<T, P>>>(
+    handle
+      ? handle.snapshot()
+      : // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: An idle query has no generic page data; the provider supplies the typed state before use.
+        (IDLE_QUERY_STATE as QueryState<InfiniteData<T, P>>),
+  )
+  if (handle) {
+    onCleanup(handle.subscribe(() => setState(() => handle.snapshot())))
+    onMount(fetchOnMount(enabled ? handle : undefined))
+  }
+  const noClientAction = createNoClientRefetch<InfiniteData<T, P>>(
+    "[nifra/web-solid]",
+    "infinite query action",
+  )
+  return {
+    state,
+    isPending: () => state().status === "pending",
+    isError: () => state().status === "error",
+    isSuccess: () => state().status === "success",
+    hasNextPage: () => {
+      state()
+      return handle?.hasNextPage() ?? false
+    },
+    hasPreviousPage: () => {
+      state()
+      return handle?.hasPreviousPage() ?? false
+    },
+    fetchNextPage: handle?.fetchNextPage ?? noClientAction,
+    fetchPreviousPage: handle?.fetchPreviousPage ?? noClientAction,
+    refetch: handle?.refetch ?? noClientAction,
+  }
+}

package/src/route-slot.tsx

@@ -0,0 +1,137 @@
+import type { RenderProps, RouteSlotName, RouteSlotTarget } from "@nifrajs/web"
+import {
+  getRouteSlotStore,
+  type LoadedRouteSlot,
+  type RouteSlotSnapshot,
+  type RouteSlotStatus,
+  rawHref,
+  routeSlotSyncKey,
+  routeSlotTargetFromPath,
+  setRouteSlot,
+  stripRouteSlots,
+  syncRouteSlotStore,
+} from "@nifrajs/web/client"
+import { navigateNow } from "@nifrajs/web/internal/navigate-runtime"
+import {
+  createComponent,
+  createEffect,
+  createMemo,
+  createSignal,
+  type JSX,
+  onCleanup,
+  untrack,
+  useContext,
+} from "solid-js"
+import { Dynamic } from "solid-js/web"
+import { compose } from "./compose.ts"
+import { RenderPropsContext } from "./router-context.ts"
+
+export interface RouteSlotController {
+  readonly target: () => string | undefined
+  readonly status: () => RouteSlotStatus
+  readonly content: () => LoadedRouteSlot | undefined
+  readonly error: () => string | undefined
+  open(target: RouteSlotTarget): void
+  close(): void
+}
+
+export interface RouteSlotHooks {
+  createEffect(effect: () => void): void
+  createMemo<T>(read: () => T): () => T
+  createSignal<T>(initial: T): readonly [() => T, (next: T | ((previous: T) => T)) => void]
+  onCleanup(cleanup: () => void): void
+}
+
+export interface RouteSlotProps {
+  readonly name: RouteSlotName
+  readonly fallback?: JSX.Element
+  readonly error?: JSX.Element | ((code: string) => JSX.Element)
+}
+
+/** Build the hook with its small reactive surface; the test seam avoids global module mocks. */
+export function createRouteSlotBinding(
+  readProps: () => RenderProps | undefined,
+  navigate: (href: ReturnType<typeof rawHref>) => void,
+  hooks: RouteSlotHooks,
+): (name: RouteSlotName) => RouteSlotController {
+  return function useRouteSlot(name: RouteSlotName): RouteSlotController {
+    const props = readProps()
+    const path = (): string => props?.path ?? "/"
+    const pending = (): boolean => props?.pending === true
+    const parsed = hooks.createMemo(() => routeSlotTargetFromPath(path(), name))
+    const basePath = hooks.createMemo(() => stripRouteSlots(path()))
+    const store = hooks.createMemo(() => getRouteSlotStore(basePath(), name))
+    const [snapshot, setSnapshot] = hooks.createSignal<RouteSlotSnapshot>(
+      store().getServerSnapshot(),
+    )
+    const requestKey = hooks.createMemo(() =>
+      routeSlotSyncKey(basePath(), name, parsed().target, parsed().error, pending()),
+    )
+
+    hooks.createEffect(() => {
+      const currentStore = store()
+      setSnapshot(currentStore.getSnapshot())
+      const unsubscribe = currentStore.subscribe(() => setSnapshot(currentStore.getSnapshot()))
+      hooks.onCleanup(unsubscribe)
+    })
+
+    hooks.createEffect(() => {
+      const current = parsed()
+      syncRouteSlotStore(store(), basePath(), name, current.target, current.error, pending())
+    })
+
+    const current = hooks.createMemo(() => {
+      const value = snapshot()
+      return value.key === requestKey() ? value : undefined
+    })
+
+    return {
+      target: () => parsed().target,
+      status: () =>
+        current()?.status ??
+        (parsed().error !== undefined
+          ? "error"
+          : pending() || parsed().target === undefined
+            ? "idle"
+            : "loading"),
+      content: () => current()?.content,
+      error: () => current()?.error ?? parsed().error,
+      open: (target) => navigate(rawHref(setRouteSlot(path(), name, String(target)))),
+      close: () => navigate(rawHref(setRouteSlot(path(), name, null))),
+    }
+  }
+}
+
+/** Read or navigate one route slot without changing any sibling slot's URL state or component tree. */
+export const useRouteSlot = createRouteSlotBinding(
+  () => useContext(RenderPropsContext),
+  navigateNow,
+  { createEffect, createMemo, createSignal, onCleanup },
+)
+
+/** Render the registered route's complete layout and page chain in this independently navigable region. */
+
+export function RouteSlot(props: RouteSlotProps): JSX.Element {
+  const slot = useRouteSlot(props.name)
+  const view = createMemo(() => {
+    const content = slot.content()
+    if (content !== undefined) return untrack(() => compose(content.chain, content)())
+    if (slot.status() === "error") {
+      const code = slot.error() ?? "unavailable"
+      const error = props.error
+      if (typeof error === "function") return untrack(() => error(code))
+      if (error !== undefined) return error
+      return untrack(() =>
+        createComponent(Dynamic, {
+          component: "div",
+          role: "alert",
+          "data-route-slot-error": code,
+          children: "This panel is unavailable.",
+        }),
+      )
+    }
+    return slot.target() !== undefined ? (props.fallback ?? null) : null
+  })
+  // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion lint/plugin/noChainedTypeAssertions: Solid inserts an accessor reactively as its child, while its JSX.Element type excludes functions.
+  return view as unknown as JSX.Element
+}

package/src/router-context.ts

@@ -0,0 +1,20 @@
+import type { RenderProps } from "@nifrajs/web"
+import { type Accessor, type Context, createContext } from "solid-js"
+
+/** Shared provider identities across the Bun server and Vite's SSR module graph. */
+const SEARCH_CONTEXT_SLOT = Symbol.for("nifra.web-solid.search-context")
+// biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The namespaced Symbol.for key shares one matching Solid Context across Bun and Vite's duplicate module graphs in this SSR process.
+const searchContextSlot = globalThis as {
+  [SEARCH_CONTEXT_SLOT]?: Context<Accessor<Record<string, unknown>> | undefined>
+}
+export const SearchContext =
+  searchContextSlot[SEARCH_CONTEXT_SLOT] ?? createContext<Accessor<Record<string, unknown>>>()
+searchContextSlot[SEARCH_CONTEXT_SLOT] = SearchContext
+
+/** Props for the composed route chain; a global singleton for the same reason as SearchContext. */
+const PROPS_CONTEXT_SLOT = Symbol.for("nifra.web-solid.props-context")
+// biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The namespaced Symbol.for key shares one matching Solid Context across Bun and Vite's duplicate module graphs in this SSR process.
+const propsContextSlot = globalThis as { [PROPS_CONTEXT_SLOT]?: Context<RenderProps | undefined> }
+export const RenderPropsContext =
+  propsContextSlot[PROPS_CONTEXT_SLOT] ?? createContext<RenderProps>()
+propsContextSlot[PROPS_CONTEXT_SLOT] = RenderPropsContext