@nifrajs/web-solid 2.2.0 → 2.4.0

package/dist/router.d.ts

@@ -0,0 +1,45 @@
+import type { InferOutput, StandardSchemaV1 } from "@nifrajs/core/server";
+import { type Blocker, type BlockerFunction, type NavigateFunction } 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`
+ * (the route's typed, validated search, as a reactive accessor). Navigation goes through `@nifrajs/web`'s
+ * 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 } from "solid-js";
+export type { Blocker, BlockerFunction, BlockerState, NavigateFunction } from "@nifrajs/web";
+/** The current route's validated search accessor, provided by `compose` on SSR + client mount alike
+ * (derived from the URL via the shared `searchOfChain`). Read via {@link useSearch}. */
+export declare const SearchContext: import("solid-js").Context<Accessor<Record<string, unknown>> | undefined>;
+/**
+ * The route's typed, validated search params as a reactive accessor - the SAME value the loader received
+ * as `ctx.search`. SSR-correct: `compose` provides it from the URL server-side and from the identical
+ * client-mount derivation, so a value rendered from it doesn't flash on hydration. Call it to read the
+ * current search (`useSearch()().page`); it updates in place on a same-route navigation. Pass the route's
+ * `searchSchema` as the type argument for its output type.
+ *
+ * ```tsx
+ * const search = useSearch<typeof searchSchema>() // Accessor<{ page: number }>
+ * return <span>{search().page}</span>
+ * ```
+ */
+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).
+ * 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;
+/**
+ * Guard navigation away from a page with unsaved work, confirming with your OWN async UI. Mirrors
+ * react-router's `useBlocker`: pass a boolean or a `({ currentLocation, nextLocation }) => boolean`
+ * predicate, and get back a reactive {@link Blocker} accessor. When a navigation (an anchor click,
+ * `useNavigate`, or a browser back/forward) is intercepted, `blocker().state` becomes `"blocked"` and
+ * `proceed`/`reset` go live - show a dialog and call `proceed()` to continue or `reset()` to stay put.
+ * It also arms the browser's native "Leave site?" prompt on tab close / reload. Idle on the server and
+ * before hydration.
+ *
+ * The component body runs once, so to track a CHANGING flag pass a function -
+ * `useBlocker(() => isDirty())` - not a bare signal accessor's current value. A constant boolean is fine.
+ */
+export declare function useBlocker(shouldBlock: boolean | BlockerFunction): Accessor<Blocker>;
+//# sourceMappingURL=router.d.ts.map

package/dist/router.d.ts.map

@@ -0,0 +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;AACzE,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EAKtB,MAAM,cAAc,CAAA;AACrB;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,QAAQ,EAAsD,MAAM,UAAU,CAAA;AAE5F,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAM5F;wFACwF;AACxF,eAAO,MAAM,aAAa,2EAAqD,CAAA;AAE/E;;;;;;;;;;;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,CAO9C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,GAAG,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,CASpF"}

package/dist/router.js

@@ -0,0 +1,60 @@
+import { getBrowserNavigate, IDLE_BLOCKER, registerBlocker, resolveNavigate, } 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`
+ * (the route's typed, validated search, as a reactive accessor). Navigation goes through `@nifrajs/web`'s
+ * 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, createSignal, onCleanup, useContext } from "solid-js";
+// 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;
+/** The current route's validated search accessor, provided by `compose` on SSR + client mount alike
+ * (derived from the URL via the shared `searchOfChain`). Read via {@link useSearch}. */
+export const SearchContext = createContext();
+/**
+ * The route's typed, validated search params as a reactive accessor - the SAME value the loader received
+ * as `ctx.search`. SSR-correct: `compose` provides it from the URL server-side and from the identical
+ * client-mount derivation, so a value rendered from it doesn't flash on hydration. Call it to read the
+ * current search (`useSearch()().page`); it updates in place on a same-route navigation. Pass the route's
+ * `searchSchema` as the type argument for its output type.
+ *
+ * ```tsx
+ * const search = useSearch<typeof searchSchema>() // Accessor<{ page: number }>
+ * return <span>{search().page}</span>
+ * ```
+ */
+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).
+ * 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() {
+    return ((to, options) => {
+        const navigate = getBrowserNavigate();
+        if (navigate === undefined)
+            return;
+        const resolved = resolveNavigate(to, options);
+        navigate(resolved.to, resolved.options);
+    });
+}
+/**
+ * Guard navigation away from a page with unsaved work, confirming with your OWN async UI. Mirrors
+ * react-router's `useBlocker`: pass a boolean or a `({ currentLocation, nextLocation }) => boolean`
+ * predicate, and get back a reactive {@link Blocker} accessor. When a navigation (an anchor click,
+ * `useNavigate`, or a browser back/forward) is intercepted, `blocker().state` becomes `"blocked"` and
+ * `proceed`/`reset` go live - show a dialog and call `proceed()` to continue or `reset()` to stay put.
+ * It also arms the browser's native "Leave site?" prompt on tab close / reload. Idle on the server and
+ * before hydration.
+ *
+ * The component body runs once, so to track a CHANGING flag pass a function -
+ * `useBlocker(() => isDirty())` - not a bare signal accessor's current value. A constant boolean is fine.
+ */
+export function useBlocker(shouldBlock) {
+    const [blocker, setBlocker] = createSignal(IDLE_BLOCKER);
+    onCleanup(registerBlocker((args) => (typeof shouldBlock === "function" ? shouldBlock(args) : shouldBlock), setBlocker));
+    return blocker;
+}
+//# sourceMappingURL=router.js.map

package/dist/router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.js","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,kBAAkB,EAClB,YAAY,EAIZ,eAAe,EACf,eAAe,GAChB,MAAM,cAAc,CAAA;AACrB;;;;;;GAMG;AACH,OAAO,EAAiB,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAI5F,6FAA6F;AAC7F,MAAM,YAAY,GAAsC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;AACzE,MAAM,qBAAqB,GAAsC,GAAG,EAAE,CAAC,YAAY,CAAA;AAEnF;wFACwF;AACxF,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,EAAqC,CAAA;AAE/E;;;;;;;;;;;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,CAAC,CAAC,EAAyC,EAAE,OAAyB,EAAE,EAAE;QAC/E,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,CAAqB,CAAA;AACxB,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,WAAsC;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,YAAY,CAAU,YAAY,CAAC,CAAA;IACjE,SAAS,CACP,eAAe,CACb,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,EAC/E,UAAU,CACX,CACF,CAAA;IACD,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nifrajs/web-solid",
-  "version": "2.2.0",
-  "description": "Solid render adapter for @nifrajs/web — SSR + hydration + the Solid Babel build plugin.",
+  "version": "2.4.0",
+  "description": "Solid render adapter for @nifrajs/web - SSR + hydration + the Solid Babel build plugin.",
   "keywords": [
     "bun",
     "typescript",
@@ -36,6 +36,11 @@
       "types": "./dist/fetcher.d.ts",
       "default": "./dist/fetcher.js"
     },
+    "./router": {
+      "bun": "./src/router.ts",
+      "types": "./dist/router.d.ts",
+      "default": "./dist/router.js"
+    },
     "./query": {
       "bun": "./src/query.ts",
       "types": "./dist/query.d.ts",
@@ -70,6 +75,11 @@
       "bun": "./src/mdx-runtime.ts",
       "types": "./dist/mdx-runtime.d.ts",
       "default": "./dist/mdx-runtime.js"
+    },
+    "./fn": {
+      "bun": "./src/fn.ts",
+      "types": "./dist/fn.d.ts",
+      "default": "./dist/fn.js"
     }
   },
   "files": [
@@ -87,9 +97,10 @@
   "dependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
-    "@nifrajs/i18n": "2.2.0",
-    "@nifrajs/image": "2.2.0",
-    "@nifrajs/web": "2.2.0",
+    "@nifrajs/core": "2.4.0",
+    "@nifrajs/i18n": "2.4.0",
+    "@nifrajs/image": "2.4.0",
+    "@nifrajs/web": "2.4.0",
     "babel-preset-solid": "^1.9.3"
   },
   "peerDependencies": {

package/src/await.ts

@@ -1,13 +1,13 @@
 import type { Deferred } from "@nifrajs/web"
 /**
- * `@nifrajs/web-solid/await` — the `<Await>` primitive for deferred loader data (`defer()`). Isomorphic
+ * `@nifrajs/web-solid/await` - the `<Await>` primitive for deferred loader data (`defer()`). Isomorphic
  * and imports only `solid-js` + a type from `@nifrajs/web` (never `solid-js/web`'s server or the Babel
  * plugin), so route components can use it without dragging server/build code into the client bundle.
  * No JSX (the package builds with plain `tsc`).
  *
  * Solid streams the boundary natively: on the server `createResource` awaits the deferred promise,
  * `<Suspense>` flushes the fallback then the resolved content mid-stream, and Solid serializes the
- * resource value into its hydration data — so the client hydrates the streamed content without a
+ * resource value into its hydration data - so the client hydrates the streamed content without a
  * re-fetch (it reads `_$HY`, not the registry promise).
  */
 import { createComponent, createResource, type JSX, Suspense } from "solid-js"
@@ -46,7 +46,7 @@ export function Await<T>(props: AwaitProps<T>): JSX.Element {
     get children() {
       // Errored? Render `errorFallback`, else rethrow to an outer <ErrorBoundary>. Check `data.error`
       // BEFORE `data()` (which would rethrow). Otherwise: `data()` suspends until the resource
-      // settles (on the client Solid reads the serialized value — no re-fetch).
+      // settles (on the client Solid reads the serialized value - no re-fetch).
       if (data.error !== undefined) {
         if (props.errorFallback) return props.errorFallback(data.error)
         throw data.error

package/src/client.ts

@@ -1,10 +1,10 @@
-import type { MountRouterOptions, RenderProps } from "@nifrajs/web"
+import { type MountRouterOptions, type RenderProps, searchOfChain } from "@nifrajs/web"
 /**
- * @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
+ * @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
  * same-route update (revalidation, a param change, an optimistic submit) updates **in place** via
  * fine-grained reactivity, preserving the layout chain + focus + scroll. Runs against Solid's client
- * build; kept in its own entry so SSR code never ships to the client bundle. No JSX — Solid's package
+ * build; kept in its own entry so SSR code never ships to the client bundle. No JSX - Solid's package
  * build is plain `tsc`, so this uses Solid's runtime functions directly, like `compose`.
  */
 import { createSignal } from "solid-js"
@@ -12,7 +12,7 @@ import { hydrate as solidHydrate, render as solidRender } from "solid-js/web"
 import { compose } from "./compose.ts"
 import { setMountedRouter } from "./fetcher.ts"
 
-// The `_error` boundary chain element — defined in its own module, re-exported here so nifra's client
+// The `_error` boundary chain element - defined in its own module, re-exported here so nifra's client
 // codegen resolves it from `@nifrajs/web-solid/client` alongside `mountRouter`.
 export { errorBoundary } from "./error.ts"
 
@@ -25,22 +25,22 @@ export function hydrate(chain: readonly unknown[], props: RenderProps, container
  * Mount a Solid Router driven by the agnostic store. The first render *hydrates* the SSR'd chain. The
  * route's props are exposed as **getters over a signal** created inside the render root, so:
  *
- * - **Same route** (revalidation, a param change, an optimistic submit) — the snapshot signal is
+ * - **Same route** (revalidation, a param change, an optimistic submit) - the snapshot signal is
  *   updated and only the components reading the changed props re-run; the layout chain stays mounted,
  *   so **focus and scroll are preserved**. This is the case the old "dispose + re-render on every
  *   navigation" implementation regressed.
- * - **Different route** — the matched chain genuinely changed (different page + layouts), so the root
+ * - **Different route** - the matched chain genuinely changed (different page + layouts), so the root
  *   is disposed and the new chain is rendered. (Getter-props are a transparent reactive boundary, so
- *   they don't shift Solid's structural hydration keys — unlike a `<Show>`, which would.)
+ *   they don't shift Solid's structural hydration keys - unlike a `<Show>`, which would.)
  */
 export function mountRouter(options: MountRouterOptions): void {
-  const { router, routes, container } = options
+  const { router, routes, searchSchemas, container } = options
   setMountedRouter(router) // expose it to createFetcher/useFetchers (same page, client-only)
   const el = container as Element
 
   let dispose: (() => void) | undefined
   let mountedRouteId: string | null = null
-  // The setter for the currently-mounted route's reactive props — same-route settles push through it.
+  // The setter for the currently-mounted route's reactive props - same-route settles push through it.
   let update: ((snapshot: ReturnType<typeof router.snapshot>) => void) | null = null
 
   const mount = (first: boolean): void => {
@@ -49,9 +49,9 @@ export function mountRouter(options: MountRouterOptions): void {
     const renderer = first ? solidHydrate : solidRender
     dispose = renderer(() => {
       // Signal owned by THIS render root (so it's never ownerless). `props` are getters over it; a
-      // same-route settle calls `update(snapshot)` and the reading components update in place — no
+      // same-route settle calls `update(snapshot)` and the reading components update in place - no
       // recompose, so the layout chain + focus + scroll survive. Cast bridges
-      // `exactOptionalPropertyTypes` (a getter is always present, returning `undefined` when idle —
+      // `exactOptionalPropertyTypes` (a getter is always present, returning `undefined` when idle -
       // the documented "absent on idle" semantics for `submission`).
       const [snapshot, setSnapshot] = createSignal(initial)
       update = setSnapshot
@@ -65,6 +65,16 @@ export function mountRouter(options: MountRouterOptions): void {
         get pending() {
           return snapshot().pending
         },
+        get search() {
+          // The SAME searchOfChain the server ran, over this snapshot's URL - a same-route search change
+          // updates in place (fine-grained), matching the SSR value on hydration.
+          const s = snapshot()
+          const idx = s.path.indexOf("?")
+          return searchOfChain(
+            searchSchemas?.[s.routeId] ?? [],
+            idx === -1 ? "" : s.path.slice(idx),
+          )
+        },
         get submission() {
           return snapshot().submission
         },

package/src/compose.ts

@@ -1,10 +1,17 @@
 import type { RenderProps } from "@nifrajs/web"
 import { type Component, createComponent, type JSX } from "solid-js"
+import { 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({})
 
 /**
  * Fold a layout chain (outermost layout → page) into a single Solid tree: the page
  * (innermost) receives `props` (the loader data); each layout wraps the child via its
- * `children`. Shared by the server adapter (renderToString) and the client (hydrate).
+ * `children`. The whole tree is wrapped in a {@link SearchContext} provider carrying an accessor of the
+ * validated `search` (threaded through `RenderProps` identically on SSR + client), so `useSearch` reads
+ * the same value on both sides - no hydration mismatch. Shared by the server adapter (renderToString) and
+ * the client (hydrate).
  */
 export function compose(chain: readonly unknown[], props: RenderProps): () => JSX.Element {
   const last = chain.length - 1
@@ -18,5 +25,14 @@ export function compose(chain: readonly unknown[], props: RenderProps): () => JS
     const layoutData = props.layoutData?.[i] ?? null
     node = () => createComponent(Layout, { data: layoutData, children: child() })
   }
-  return node
+  const inner = node
+  // The provider `value` is an ACCESSOR reading `props.search` - a getter over the mount's snapshot on
+  // the client (so a same-route search change updates in place), a static value on SSR.
+  return () =>
+    createComponent(SearchContext.Provider, {
+      value: () => (props.search ?? EMPTY_SEARCH) as Record<string, unknown>,
+      get children() {
+        return inner()
+      },
+    })
 }

package/src/content.ts

@@ -1,11 +1,11 @@
 /**
- * `@nifrajs/web-solid/content` — render pre-rendered HTML (e.g. a `@nifrajs/content` collection entry's
+ * `@nifrajs/web-solid/content` - render pre-rendered HTML (e.g. a `@nifrajs/content` collection entry's
  * `.html`) into the DOM. Solid sets `innerHTML` reactively on a `<Dynamic>` element. Pairs with content
  * collections: `<Content html={entry.html} />`. No JSX (`createComponent`/`Dynamic`), so it builds with
  * plain `tsc`.
  *
  * Security: injects raw HTML, so `html` MUST be trusted (your own Markdown/content, rendered at
- * build/server time) — never pass user-supplied HTML without sanitizing it first.
+ * build/server time) - never pass user-supplied HTML without sanitizing it first.
  */
 import { createComponent, type JSX, mergeProps, splitProps } from "solid-js"
 import { Dynamic } from "solid-js/web"

package/src/error.ts

@@ -1,5 +1,5 @@
 /**
- * `errorBoundary` — the Solid error-boundary chain element for nifra's `_error.tsx`. Its own module
+ * `errorBoundary` - the Solid error-boundary chain element for nifra's `_error.tsx`. Its own module
  * (imports only `solid-js`) so the client codegen can import it from `@nifrajs/web-solid/client` (which
  * re-exports it). No JSX (`createComponent`), so the package builds with plain `tsc`.
  */
@@ -9,7 +9,7 @@ import { createComponent, ErrorBoundary, type JSX } from "solid-js"
  * Build an error-boundary chain element bound to `fallback` (a route's `_error` component). nifra's
  * client codegen inserts it before the page in the matched chain; a render error in the subtree renders
  * `fallback` with `{ data: { name, message } }` (via Solid's `<ErrorBoundary>`) instead of crashing.
- * DOM-transparent (renders its children directly — no wrapper element), so it never disturbs hydration.
+ * DOM-transparent (renders its children directly - no wrapper element), so it never disturbs hydration.
  */
 export function errorBoundary(fallback: unknown): unknown {
   const Fallback = fallback as (props: { data: { name: string; message: string } }) => JSX.Element

package/src/fetcher.ts

@@ -1,6 +1,6 @@
 import type { ClientRouter, Fetcher, FetcherState } from "@nifrajs/web"
 /**
- * `@nifrajs/web-solid/fetcher` — Solid bindings for concurrent fetchers. `createFetcher(key)` bridges an
+ * `@nifrajs/web-solid/fetcher` - Solid bindings for concurrent fetchers. `createFetcher(key)` bridges an
  * independent {@link Fetcher}'s `subscribe`/`snapshot` store into a Solid signal (the pattern the F16
  * spike confirmed) and returns its reactive state accessor plus `load`/`submit`; `useFetchers()`
  * bridges the whole live collection. Imports only `solid-js` (never `solid-js/web`), so route
@@ -8,7 +8,7 @@ import type { ClientRouter, Fetcher, FetcherState } from "@nifrajs/web"
  * bundle. No JSX (the package builds with plain `tsc`).
  *
  * The router that owns the fetchers registers itself via `setMountedRouter` from `mountRouter`. On the
- * server (no mount) the accessors return an idle state — fetchers are client-only — so SSR markup is
+ * server (no mount) the accessors return an idle state - fetchers are client-only - so SSR markup is
  * unchanged and the first client render after `mountRouter` takes over cleanly.
  */
 import { type Accessor, createSignal, onCleanup } from "solid-js"
@@ -16,7 +16,7 @@ import { type Accessor, createSignal, onCleanup } from "solid-js"
 // The active client router (set by `mountRouter`). Module-scoped: one app per page, client-only.
 let mountedRouter: ClientRouter | undefined
 
-/** Register (or clear) the router that owns fetchers — called by `mountRouter`. Not for app use. */
+/** Register (or clear) the router that owns fetchers - called by `mountRouter`. Not for app use. */
 export function setMountedRouter(router: ClientRouter | undefined): void {
   mountedRouter = router
 }
@@ -50,7 +50,7 @@ export function createFetcher(key: string): FetcherHandle {
 }
 
 /**
- * Bind the whole live fetcher collection — for a global busy view. Returns a reactive accessor; read
+ * Bind the whole live fetcher collection - for a global busy view. Returns a reactive accessor; read
  * each entry's `.snapshot()` for its state. Updates whenever any fetcher transitions or one is created.
  */
 export function useFetchers(): Accessor<readonly Fetcher[]> {

package/src/fn.ts

@@ -0,0 +1,42 @@
+/**
+ * `@nifrajs/web-solid/fn` - Solid binding for a server function's pending/error state.
+ *
+ * Calling a server function needs no hook: the client stub is `(input) => Promise<Output>`. This adds
+ * the part a component usually wants around it - in flight, last result, last error - and nothing more.
+ *
+ * The state machine is `@nifrajs/web`'s `createServerFnStore`, shared with every other adapter, so
+ * "is it pending" has one answer rather than five that drift. This file contributes only a signal fed by the store.
+ */
+
+import type { ClientServerFn, ServerFnReference } from "@nifrajs/web/fn"
+import { createServerFnStore, type ServerFnState } from "@nifrajs/web/fn-state"
+import { type Accessor, createSignal, onCleanup } from "solid-js"
+
+/** A server function's state accessor plus the call itself. */
+export interface ServerFnHandle<Input, Output> {
+  /** Reactive state - read it inside JSX so Solid tracks it. */
+  readonly state: Accessor<ServerFnState<Output>>
+  /** Invoke it. Records state, and rejects on failure - attach `.catch` if you only render state. */
+  readonly call: (input: Input) => Promise<Output>
+  /** Back to idle. */
+  readonly reset: () => void
+}
+
+/**
+ * Track one server function's call state.
+ *
+ *     const addTodo = useServerFn(fns.addTodo)
+ *     <button disabled={addTodo.state().pending} onClick={() => addTodo.call({ text }).catch(() => {})}>
+ */
+export function useServerFn<Input, Output>(
+  fn: ServerFnReference<Input, Output>,
+): ServerFnHandle<Input, Output> {
+  const store = createServerFnStore(fn as ClientServerFn<Input, Output>)
+  // Seeded from the store, not from the idle constant. They are the same value here - the store is
+  // created one line up and cannot have moved - so this is correctness that does not depend on that
+  // staying true. Svelte had exactly this line reading the constant, and when its subscription turned
+  // out to be lazy the first render showed idle for a call that had already finished.
+  const [state, setState] = createSignal<ServerFnState<Output>>(store.snapshot())
+  onCleanup(store.subscribe(() => setState(() => store.snapshot())))
+  return { state, call: store.call, reset: store.reset }
+}

package/src/i18n.ts

@@ -1,5 +1,5 @@
 /**
- * `@nifrajs/web-solid/i18n` — Solid bindings for `@nifrajs/i18n`. `<I18nProvider locale messages>` builds a
+ * `@nifrajs/web-solid/i18n` - Solid bindings for `@nifrajs/i18n`. `<I18nProvider locale messages>` builds a
  * `Formatter` (a `createMemo`, so switching locale rebuilds it) and provides it; `useT()` reads it.
  * Both `locale` + `messages` are serializable, so a loader returns them, the page renders with the
  * negotiated catalog on the server, and the client rebuilds the same formatter on hydrate (no

package/src/image.ts

@@ -1,5 +1,5 @@
 /**
- * `@nifrajs/web-solid/image` — a CLS-safe responsive Solid `<Image>`. A thin wrapper over `resolveImage`
+ * `@nifrajs/web-solid/image` - a CLS-safe responsive Solid `<Image>`. A thin wrapper over `resolveImage`
  * from `@nifrajs/image`: it computes the responsive `<img>` attributes (`src`/`srcset`/`sizes`/`width`/
  * `height`/`loading`/`decoding`/`fetchpriority` via `toHtmlAttrs`) and renders an `<img>` through
  * Solid's `<Dynamic>`. Extra DOM props (`class`, `style`, `id`, `data-*`, handlers) pass through
@@ -10,7 +10,7 @@ import { type ImageLoader, type ImageProps, resolveImage, toHtmlAttrs } from "@n
 import { createComponent, type JSX, mergeProps, splitProps } from "solid-js"
 import { Dynamic } from "solid-js/web"
 
-/** Attributes `resolveImage` computes — callers can't override them via DOM passthrough. */
+/** Attributes `resolveImage` computes - callers can't override them via DOM passthrough. */
 type ComputedAttrs =
   | "src"
   | "srcset"
@@ -25,7 +25,7 @@ type ComputedAttrs =
 export interface ImageComponentProps
   extends ImageProps,
     Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, ComputedAttrs | keyof ImageProps> {
-  /** CDN URL builder. Defaults to the identity loader (no transform — still CLS-safe + lazy). */
+  /** CDN URL builder. Defaults to the identity loader (no transform - still CLS-safe + lazy). */
   readonly loader?: ImageLoader
 }
 

package/src/index.ts

@@ -1,14 +1,14 @@
 /**
- * @nifrajs/web-solid — the Solid render adapter for @nifrajs/web (server side) + the Solid Babel
+ * @nifrajs/web-solid - the Solid render adapter for @nifrajs/web (server side) + the Solid Babel
  * Bun-plugin. Streaming SSR via `renderToStream` + `generateHydrationScript`; the layout-chain
  * fold is in `./compose`. Client hydration lives in `@nifrajs/web-solid/client` (Solid's browser
  * build).
  */
 import { transformAsync } from "@babel/core"
-// @ts-expect-error — no type declarations published
+// @ts-expect-error - no type declarations published
 import presetTypeScript from "@babel/preset-typescript"
 import type { RenderAdapter } from "@nifrajs/web"
-// @ts-expect-error — no type declarations published
+// @ts-expect-error - no type declarations published
 import presetSolid from "babel-preset-solid"
 import type { BunPlugin } from "bun"
 import {
@@ -20,19 +20,19 @@ import { compose } from "./compose.ts"
 
 const HYDRATION_HEAD = generateHydrationScript()
 
-/** The Solid server render adapter — pass to @nifrajs/web's `renderPage`. */
+/** The Solid server render adapter - pass to @nifrajs/web's `renderPage`. */
 export const solidAdapter: RenderAdapter = {
   // Synchronous one-pass render for non-deferred pages (renderPage's buffered fast path). Solid's
   // `renderToString` emits the same hydratable markup (same `data-hk` keys seeded by
   // `generateHydrationScript()`) as `renderToStream`, but skips the TransformStream + Solid's
-  // streaming machinery — the heaviest of the five renderers on Bun. A page that defer()s/Suspends
+  // streaming machinery - the heaviest of the five renderers on Bun. A page that defer()s/Suspends
   // takes `renderToStream` below (progressive resolution needs it).
   renderToString(chain, props) {
     return solidRenderToString(compose(chain, props))
   },
   renderToStream(chain, props) {
     // Solid's `renderToStream` streams `Uint8Array` chunks into a Web `WritableStream` via
-    // `pipeTo` (fire-and-forget — returns void); pipe into a TransformStream and hand back the
+    // `pipeTo` (fire-and-forget - returns void); pipe into a TransformStream and hand back the
     // readable side. Suspense boundaries stream as they resolve; `generateHydrationScript()` (in
     // <head>) seeds client hydration. A render failure errors `ts.readable`, which `renderPage`
     // surfaces on the response body.
@@ -46,7 +46,7 @@ export const solidAdapter: RenderAdapter = {
 }
 
 /**
- * Bun build/runtime plugin that compiles Solid components with Babel — `generate: "ssr"`
+ * Bun build/runtime plugin that compiles Solid components with Babel - `generate: "ssr"`
  * for the server, `"dom"` for the client, `hydratable` so SSR and hydrate align. Solid's
  * reactive-JSX compiler ships only as a Babel plugin (no swc/native port); this runs at
  * build time, on `.tsx` files only.

package/src/mdx-runtime.ts

@@ -1,7 +1,7 @@
 /**
- * Solid MDX runtime — the `useMDXComponents` provider that `@nifrajs/web-solid/mdx`'s compiled MDX imports
+ * Solid MDX runtime - the `useMDXComponents` provider that `@nifrajs/web-solid/mdx`'s compiled MDX imports
  * (via `@mdx-js`'s `providerImportSource`). MDX emits intrinsic elements (`h1`, `p`, …) as *string*
- * component references, but Solid can't `createComponent("h1")` — its JSX is compile-time. So we map
+ * component references, but Solid can't `createComponent("h1")` - its JSX is compile-time. So we map
  * each Markdown-output tag to a Solid component that renders it via `<Dynamic component={tag}>`.
  */
 import { createComponent } from "solid-js"

package/src/mdx.ts

@@ -1,15 +1,15 @@
 /**
- * `solidMdxBunPlugin` — compile `.mdx` routes/files to **Solid** components. MDX is JSX-oriented but
+ * `solidMdxBunPlugin` - compile `.mdx` routes/files to **Solid** components. MDX is JSX-oriented but
  * Solid's JSX is compile-time, so this: (1) compiles MDX → JSX with `@mdx-js` (keeping JSX), pointing
  * intrinsic elements at `@nifrajs/web-solid/mdx-runtime` (which renders them via Solid's `<Dynamic>`), then
- * (2) runs `babel-preset-solid` — the same transform `solidBunPlugin` applies to `.tsx`. Pass it to
+ * (2) runs `babel-preset-solid` - the same transform `solidBunPlugin` applies to `.tsx`. Pass it to
  * `buildClient`/`buildServer`'s `plugins` (`"dom"` for the client, `"ssr"` for the server), like
  * `solidBunPlugin`. `@mdx-js/mdx` is an optional peer (lazy-loaded at build time).
  */
 import { transformAsync } from "@babel/core"
-// @ts-expect-error — no type declarations published
+// @ts-expect-error - no type declarations published
 import presetTypeScript from "@babel/preset-typescript"
-// @ts-expect-error — no type declarations published
+// @ts-expect-error - no type declarations published
 import presetSolid from "babel-preset-solid"
 import type { BunPlugin } from "bun"
 
@@ -31,7 +31,7 @@ export function solidMdxBunPlugin(generate: "dom" | "ssr"): BunPlugin {
         compile = ((await import(MDX_MODULE)) as MdxCompiler).compile
       } catch {
         throw new Error(
-          "@nifrajs/web-solid/mdx: compiling `.mdx` needs the `@mdx-js/mdx` package — install it (`bun add @mdx-js/mdx`).",
+          "@nifrajs/web-solid/mdx: compiling `.mdx` needs the `@mdx-js/mdx` package - install it (`bun add @mdx-js/mdx`).",
         )
       }
       build.onLoad({ filter: /\.mdx(\?|$)/ }, async (args) => {

package/src/query.ts

@@ -1,11 +1,11 @@
 import { createQueryClient, type QueryClient, type QueryState } from "@nifrajs/web"
 /**
- * `@nifrajs/web-solid/query` — Solid bindings for the keyed query-cache. `createQuery(key, fn)` bridges a
+ * `@nifrajs/web-solid/query` - Solid bindings for the keyed query-cache. `createQuery(key, fn)` bridges a
  * query's `subscribe`/`snapshot` store into a Solid signal and fetches on mount; `useQueryClient`
  * 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
+ * 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).
  * The `key` is captured once (Solid setup runs once); a reactive key is a documented future enhancement.
  */