@rangojs/router 0.0.0-experimental.ad1a365c → 0.0.0-experimental.b000c598

package/README.md

@@ -161,13 +161,18 @@ const urlpatterns = urls(({ path }) => [
 ]);
 ```
 
-Use `reverse()` as the default way to link to routes:
+Use `ctx.reverse()` from handler context as the default way to link to routes from server code:
 
 ```tsx
-router.reverse("product", { slug: "widget" }); // "/product/widget"
-router.reverse("search", undefined, { q: "rsc" }); // "/search?q=rsc"
+const ProductPage: Handler<"product"> = (ctx) => {
+  const url = ctx.reverse("product", { slug: "widget" }); // "/product/widget"
+  const searchUrl = ctx.reverse("search", undefined, { q: "rsc" }); // "/search?q=rsc"
+  return <Link to={url}>Widget</Link>;
+};
 ```
 
+`router.reverse()` (exported from the router module) is the same function without a handler context, useful in scripts or tests. In request code, prefer `ctx.reverse()` — it auto-fills mount params from the current match.
+
 ### Composable URL Modules
 
 Local route names compose cleanly with `include(..., { name })`:
@@ -479,39 +484,64 @@ const urlpatterns = urls(({ path, loader }) => [
 
 ## Navigation & Links
 
-### Named Routes with `reverse()` (Server Components)
+### Named Routes with `ctx.reverse()` (Server)
 
-In server components, use `reverse()` to generate URLs by route name:
+In server components and handlers, use `ctx.reverse()` to generate URLs by route name. This is the default — it is typed, auto-fills mount params from the current match, and resolves both local (`.name`) and absolute (`name.sub`) names:
 
 ```tsx
 import { Link } from "@rangojs/router/client";
+import type { Handler } from "@rangojs/router";
+
+const BlogPostPage: Handler<"blogPost"> = (ctx) => {
+  const backUrl = ctx.reverse("blog");
+  return <Link to={backUrl}>Back to blog</Link>;
+};
+```
+
+`reverse()` is type-safe — route names and required params are checked at compile time. Included routes use dotted names: `ctx.reverse("api.health")`.
+
+For scripts, tests, or other code without a handler context, import the router-level `reverse`:
+
+```tsx
 import { reverse } from "./router";
+reverse("blogPost", { slug: "my-post" });
+```
+
+### Client Components
+
+**`reverse()` is server-only.** It depends on the route manifest and handler context — neither is available in the browser bundle. Client components receive URLs as props, loader data, or server-action return values:
+
+```tsx
+// server
+function BlogIndex(ctx: HandlerContext) {
+  return (
+    <Nav
+      home={ctx.reverse("home")}
+      post={ctx.reverse("blogPost", { slug: "my-post" })}
+    />
+  );
+}
+```
+
+```tsx
+"use client";
+import { Link } from "@rangojs/router/client";
 
-function BlogIndex() {
+export function Nav({ home, post }: { home: string; post: string }) {
   return (
     <nav>
-      <Link to={reverse("home")}>Home</Link>
-      <Link to={reverse("blogPost", { slug: "my-post" })}>My Post</Link>
-      <Link to={reverse("about")}>About</Link>
+      <Link to={home}>Home</Link>
+      <Link to={post}>My Post</Link>
     </nav>
   );
 }
 ```
 
-`reverse()` is type-safe — route names and required params are checked at compile time. Included routes use dotted names: `reverse("api.health")`.
-
-Handlers also have `ctx.reverse()` directly on the context:
-
-```tsx
-const BlogPostPage: Handler<"blogPost"> = (ctx) => {
-  const backUrl = ctx.reverse("blog");
-  return <Link to={backUrl}>Back to blog</Link>;
-};
-```
+For client-side navigation to static paths (no named-route lookup), use `href()` — see below. For URLs tied to named routes, always generate on the server and pass the string in.
 
 ### `href()` for Path Validation (Client Components)
 
-In client components, use `href()` for compile-time path validation:
+In client components, use `href()` for compile-time path validation on static path strings:
 
 ```tsx
 "use client";

package/dist/vite/index.js

@@ -1859,12 +1859,13 @@ function getVirtualVersionContent(version) {
 
 // src/vite/utils/package-resolution.ts
 import { existsSync } from "node:fs";
+import { createRequire } from "node:module";
 import { resolve } from "node:path";
 
 // package.json
 var package_default = {
   name: "@rangojs/router",
-  version: "0.0.0-experimental.ad1a365c",
+  version: "0.0.0-experimental.b000c598",
   description: "Django-inspired RSC router with composable URL patterns",
   keywords: [
     "react",
@@ -1997,9 +1998,9 @@ var package_default = {
     tag: "experimental"
   },
   scripts: {
-    build: "pnpm dlx esbuild src/vite/index.ts --bundle --format=esm --outfile=dist/vite/index.js --platform=node --packages=external && pnpm dlx esbuild src/bin/rango.ts --bundle --format=esm --outfile=dist/bin/rango.js --platform=node --packages=external --banner:js='#!/usr/bin/env node' && chmod +x dist/bin/rango.js",
+    build: "pnpm dlx esbuild src/vite/index.ts --bundle --format=esm --outfile=dist/vite/index.js --platform=node --packages=external && mkdir -p dist/vite/plugins && cp src/vite/plugins/cloudflare-protocol-loader-hook.mjs dist/vite/plugins/cloudflare-protocol-loader-hook.mjs && pnpm dlx esbuild src/bin/rango.ts --bundle --format=esm --outfile=dist/bin/rango.js --platform=node --packages=external --banner:js='#!/usr/bin/env node' && chmod +x dist/bin/rango.js",
     prepublishOnly: "pnpm build",
-    typecheck: "tsc --noEmit",
+    typecheck: "tsc --noEmit && tsc -p tsconfig.strict-check.json --noEmit",
     test: "playwright test",
     "test:ui": "playwright test --ui",
     "test:unit": "vitest run",
@@ -2041,6 +2042,7 @@ var package_default = {
 };
 
 // src/vite/utils/package-resolution.ts
+var require2 = createRequire(import.meta.url);
 var VIRTUAL_PACKAGE_NAME = "@rangojs/router";
 function getPublishedPackageName() {
   return package_default.name;
@@ -2081,6 +2083,20 @@ function getPackageAliases() {
   }
   return aliases;
 }
+function getVendorAliases() {
+  const specs = [
+    "@vitejs/plugin-rsc/vendor/react-server-dom/client.edge",
+    "@vitejs/plugin-rsc/vendor/react-server-dom/server.edge"
+  ];
+  const aliases = {};
+  for (const spec of specs) {
+    try {
+      aliases[spec] = require2.resolve(spec);
+    } catch {
+    }
+  }
+  return aliases;
+}
 
 // src/build/route-types/param-extraction.ts
 function extractParamsFromPattern(pattern) {
@@ -3260,7 +3276,7 @@ function createCjsToEsmPlugin() {
 import { createServer as createViteServer } from "vite";
 import { resolve as resolve8 } from "node:path";
 import { readFileSync as readFileSync6 } from "node:fs";
-import { createRequire } from "node:module";
+import { createRequire as createRequire2, register } from "node:module";
 import { pathToFileURL } from "node:url";
 
 // src/vite/plugins/virtual-stub-plugin.ts
@@ -3287,6 +3303,113 @@ function createVirtualStubPlugin() {
   };
 }
 
+// src/vite/plugins/cloudflare-protocol-stub.ts
+var VIRTUAL_PREFIX = "virtual:rango-cloudflare-stub-";
+var NULL_PREFIX = "\0" + VIRTUAL_PREFIX;
+var CF_PREFIX = "cloudflare:";
+var BUILD_ENV_GLOBAL_KEY = "__rango_build_env__";
+var SOURCE_EXT_RE = /\.[mc]?[jt]sx?$/;
+var IMPORT_NODE_TYPES = /* @__PURE__ */ new Set([
+  "ImportDeclaration",
+  "ImportExpression",
+  "ExportNamedDeclaration",
+  "ExportAllDeclaration"
+]);
+var STUBS = {
+  "cloudflare:workers": `
+export class DurableObject { constructor(_ctx, _env) {} }
+export class WorkerEntrypoint { constructor(_ctx, _env) {} }
+export class WorkflowEntrypoint { constructor(_ctx, _env) {} }
+export class RpcTarget {}
+export const env = globalThis[${JSON.stringify(BUILD_ENV_GLOBAL_KEY)}] ?? {};
+export default {};
+`,
+  "cloudflare:email": `
+export class EmailMessage { constructor(_from, _to, _raw) {} }
+export default {};
+`,
+  "cloudflare:sockets": `
+export function connect() { return {}; }
+export default {};
+`,
+  "cloudflare:workflows": `
+export class NonRetryableError extends Error {
+  constructor(message, name) { super(message); this.name = name ?? "NonRetryableError"; }
+}
+export default {};
+`
+};
+var FALLBACK_STUB = `export default {};
+`;
+function createCloudflareProtocolStubPlugin() {
+  return {
+    name: "@rangojs/router:cloudflare-protocol-stub",
+    transform(code, id) {
+      const cleanId = id.split("?")[0] ?? id;
+      if (!SOURCE_EXT_RE.test(cleanId)) return null;
+      if (!code.includes(CF_PREFIX)) return null;
+      let ast;
+      try {
+        ast = this.parse(code);
+      } catch {
+        return null;
+      }
+      const hits = [];
+      walk(ast, (node) => {
+        if (!IMPORT_NODE_TYPES.has(node.type)) return;
+        const source = node.source;
+        if (!source || source.type !== "Literal") return;
+        if (typeof source.value !== "string") return;
+        if (!source.value.startsWith(CF_PREFIX)) return;
+        if (typeof source.start !== "number" || typeof source.end !== "number")
+          return;
+        hits.push({
+          start: source.start,
+          end: source.end,
+          value: source.value
+        });
+      });
+      if (hits.length === 0) return null;
+      hits.sort((a, b) => b.start - a.start);
+      let out = code;
+      for (const hit of hits) {
+        const submodule = hit.value.slice(CF_PREFIX.length);
+        const quote = code[hit.start] === "'" ? "'" : '"';
+        out = out.slice(0, hit.start) + quote + VIRTUAL_PREFIX + submodule + quote + out.slice(hit.end);
+      }
+      return { code: out, map: null };
+    },
+    resolveId(id) {
+      if (id.startsWith(VIRTUAL_PREFIX)) {
+        return "\0" + id;
+      }
+      return null;
+    },
+    load(id) {
+      if (!id.startsWith(NULL_PREFIX)) return null;
+      const submodule = id.slice(NULL_PREFIX.length);
+      const specifier = CF_PREFIX + submodule;
+      return STUBS[specifier] ?? FALLBACK_STUB;
+    }
+  };
+}
+function walk(node, visit) {
+  if (!node || typeof node !== "object") return;
+  if (Array.isArray(node)) {
+    for (const child of node) walk(child, visit);
+    return;
+  }
+  const n = node;
+  if (typeof n.type !== "string") return;
+  visit(n);
+  for (const key in n) {
+    if (key === "loc" || key === "start" || key === "end" || key === "range") {
+      continue;
+    }
+    walk(n[key], visit);
+  }
+}
+
 // src/vite/plugins/client-ref-hashing.ts
 import { relative } from "node:path";
 import { createHash as createHash2 } from "node:crypto";
@@ -4682,7 +4805,22 @@ function postprocessBundle(state) {
 }
 
 // src/vite/router-discovery.ts
+var loaderHookRegistered = false;
+function ensureCloudflareProtocolLoaderRegistered() {
+  if (loaderHookRegistered) return;
+  loaderHookRegistered = true;
+  try {
+    register(
+      new URL("./plugins/cloudflare-protocol-loader-hook.mjs", import.meta.url)
+    );
+  } catch (err) {
+    console.warn(
+      `[rsc-router] Could not register Node ESM loader hook for cloudflare:* imports (${err?.message ?? err}). Falling back to Vite transform only.`
+    );
+  }
+}
 async function createTempRscServer(state, options = {}) {
+  ensureCloudflareProtocolLoaderRegistered();
   const { default: rsc } = await import("@vitejs/plugin-rsc");
   return createViteServer({
     root: state.projectRoot,
@@ -4705,6 +4843,7 @@ async function createTempRscServer(state, options = {}) {
       ...options.forceBuild ? [hashClientRefs(state.projectRoot)] : [],
       createVersionPlugin(),
       createVirtualStubPlugin(),
+      createCloudflareProtocolStubPlugin(),
       // Dev prerender must use dev-mode IDs (path-based) to match the workerd
       // runtime. forceBuild produces hashed IDs for production bundle consistency.
       exposeInternalIds(options.forceBuild ? { forceBuild: true } : void 0),
@@ -4721,7 +4860,7 @@ async function resolveBuildEnv(option, factoryCtx) {
       );
     }
     try {
-      const userRequire = createRequire(
+      const userRequire = createRequire2(
         resolve8(factoryCtx.root, "package.json")
       );
       const wranglerPath = userRequire.resolve("wrangler");
@@ -4756,6 +4895,7 @@ async function acquireBuildEnv(s, command, mode) {
   if (!result) return false;
   s.resolvedBuildEnv = result.env;
   s.buildEnvDispose = result.dispose ?? null;
+  globalThis[BUILD_ENV_GLOBAL_KEY] = result.env;
   return true;
 }
 async function releaseBuildEnv(s) {
@@ -4768,6 +4908,7 @@ async function releaseBuildEnv(s) {
     s.buildEnvDispose = null;
   }
   s.resolvedBuildEnv = void 0;
+  delete globalThis[BUILD_ENV_GLOBAL_KEY];
 }
 function createRouterDiscoveryPlugin(entryPath, opts) {
   const s = createDiscoveryState(entryPath, opts);
@@ -5273,7 +5414,7 @@ async function rango(options) {
   const preset = resolvedOptions.preset ?? "node";
   const showBanner = resolvedOptions.banner ?? true;
   const plugins = [];
-  const rangoAliases = getPackageAliases();
+  const rangoAliases = { ...getPackageAliases(), ...getVendorAliases() };
   const excludeDeps = [
     ...getExcludeDeps(),
     // The public browser entry re-exports the RSDW browser client.
@@ -5284,6 +5425,8 @@ async function rango(options) {
     // cjs-to-esm transform can patch the real file.
     "@vitejs/plugin-rsc/vendor/react-server-dom/client.browser"
   ];
+  const pkg = getPublishedPackageName();
+  const nested = (spec) => `${pkg} > ${spec}`;
   const routerRef = { path: void 0 };
   const prerenderEnabled = true;
   if (preset === "cloudflare") {
@@ -5321,7 +5464,7 @@ async function rango(options) {
               // Pre-bundle rsc-html-stream to prevent discovery during first request
               // Exclude rsc-router modules to ensure same Context instance
               optimizeDeps: {
-                include: ["rsc-html-stream/client"],
+                include: [nested("rsc-html-stream/client")],
                 exclude: excludeDeps,
                 esbuildOptions: sharedEsbuildOptions
               }
@@ -5346,8 +5489,10 @@ async function rango(options) {
                   "react-dom/static.edge",
                   "react/jsx-runtime",
                   "react/jsx-dev-runtime",
-                  "rsc-html-stream/server",
-                  "@vitejs/plugin-rsc/vendor/react-server-dom/client.edge"
+                  nested("rsc-html-stream/server"),
+                  nested(
+                    "@vitejs/plugin-rsc/vendor/react-server-dom/client.edge"
+                  )
                 ],
                 exclude: excludeDeps,
                 esbuildOptions: sharedEsbuildOptions
@@ -5362,7 +5507,9 @@ async function rango(options) {
                   "react",
                   "react/jsx-runtime",
                   "react/jsx-dev-runtime",
-                  "@vitejs/plugin-rsc/vendor/react-server-dom/server.edge"
+                  nested(
+                    "@vitejs/plugin-rsc/vendor/react-server-dom/server.edge"
+                  )
                 ],
                 exclude: excludeDeps,
                 esbuildOptions: sharedEsbuildOptions
@@ -5443,7 +5590,7 @@ ${list}`);
                   "react-dom",
                   "react/jsx-runtime",
                   "react/jsx-dev-runtime",
-                  "rsc-html-stream/client"
+                  nested("rsc-html-stream/client")
                 ],
                 exclude: excludeDeps,
                 esbuildOptions: sharedEsbuildOptions,
@@ -5460,7 +5607,9 @@ ${list}`);
                   "react-dom/static.edge",
                   "react/jsx-runtime",
                   "react/jsx-dev-runtime",
-                  "@vitejs/plugin-rsc/vendor/react-server-dom/client.edge"
+                  nested(
+                    "@vitejs/plugin-rsc/vendor/react-server-dom/client.edge"
+                  )
                 ],
                 exclude: excludeDeps,
                 esbuildOptions: sharedEsbuildOptions
@@ -5473,7 +5622,9 @@ ${list}`);
                   "react",
                   "react/jsx-runtime",
                   "react/jsx-dev-runtime",
-                  "@vitejs/plugin-rsc/vendor/react-server-dom/server.edge"
+                  nested(
+                    "@vitejs/plugin-rsc/vendor/react-server-dom/server.edge"
+                  )
                 ],
                 esbuildOptions: sharedEsbuildOptions
               }

package/dist/vite/plugins/cloudflare-protocol-loader-hook.mjs

@@ -0,0 +1,76 @@
+// Node ESM loader hook that resolves `cloudflare:*` imports to the same
+// stub ESM the Vite transform produces for rewritten specifiers.
+//
+// Why both? The Vite transform (cloudflare-protocol-stub.ts) catches
+// imports in modules that flow through Vite's plugin pipeline — covers
+// user source and any node_modules package Vite fetches and transforms.
+// But Vite/Rollup externalize certain packages (e.g. `partyserver`,
+// which has `import { DurableObject, env } from "cloudflare:workers"`
+// at its top level, and similar "workerd-native" libraries). Externalized
+// modules bypass the transform: Rollup hands their resolution to Node's
+// native ESM loader, which rejects URL-scheme specifiers. This loader
+// hook registers via `module.register()` from `createTempRscServer` and
+// intercepts `cloudflare:*` at Node's resolve layer — before the default
+// loader throws ERR_UNSUPPORTED_ESM_URL_SCHEME.
+//
+// Lifecycle: the hook runs in a dedicated worker thread (Node ESM loader
+// architecture) with its own globalThis. It cannot see the main thread's
+// `__rango_build_env__` bridge, so the `env` export here is always `{}`.
+// That's fine in practice — externalized libraries don't typically touch
+// `env` at module top level; they read it at request time in workerd
+// where the real module exists. Build-time prerender handlers in user
+// source DO read `env`, but they flow through the Vite transform (which
+// does bridge `env` from `getPlatformProxy()`), not through this loader.
+//
+// Keep STUBS in sync with cloudflare-protocol-stub.ts — both paths need
+// to hand out the same base classes.
+
+const CF_PREFIX = "cloudflare:";
+
+const STUBS = {
+  "cloudflare:workers": `
+export class DurableObject { constructor(_ctx, _env) {} }
+export class WorkerEntrypoint { constructor(_ctx, _env) {} }
+export class WorkflowEntrypoint { constructor(_ctx, _env) {} }
+export class RpcTarget {}
+export const env = {};
+export default {};
+`,
+  "cloudflare:email": `
+export class EmailMessage { constructor(_from, _to, _raw) {} }
+export default {};
+`,
+  "cloudflare:sockets": `
+export function connect() { return {}; }
+export default {};
+`,
+  "cloudflare:workflows": `
+export class NonRetryableError extends Error {
+  constructor(message, name) { super(message); this.name = name ?? "NonRetryableError"; }
+}
+export default {};
+`,
+};
+
+// Policy: unknown `cloudflare:*` specifiers resolve permissively to an
+// empty default export rather than throwing. Same reasoning as
+// cloudflare-protocol-stub.ts's FALLBACK_STUB — we prioritize
+// dependency-graph resilience over strict validation, because third-party
+// packages can pull `cloudflare:*` modules we haven't curated.
+const FALLBACK_STUB = `export default {};\n`;
+
+function dataUrlFor(specifier) {
+  const body = STUBS[specifier] ?? FALLBACK_STUB;
+  return "data:text/javascript;base64," + Buffer.from(body).toString("base64");
+}
+
+export async function resolve(specifier, context, nextResolve) {
+  if (specifier.startsWith(CF_PREFIX)) {
+    return {
+      shortCircuit: true,
+      url: dataUrlFor(specifier),
+      format: "module",
+    };
+  }
+  return nextResolve(specifier, context);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rangojs/router",
-  "version": "0.0.0-experimental.ad1a365c",
+  "version": "0.0.0-experimental.b000c598",
   "description": "Django-inspired RSC router with composable URL patterns",
   "keywords": [
     "react",
@@ -133,9 +133,9 @@
     "tag": "experimental"
   },
   "scripts": {
-    "build": "pnpm dlx esbuild src/vite/index.ts --bundle --format=esm --outfile=dist/vite/index.js --platform=node --packages=external && pnpm dlx esbuild src/bin/rango.ts --bundle --format=esm --outfile=dist/bin/rango.js --platform=node --packages=external --banner:js='#!/usr/bin/env node' && chmod +x dist/bin/rango.js",
+    "build": "pnpm dlx esbuild src/vite/index.ts --bundle --format=esm --outfile=dist/vite/index.js --platform=node --packages=external && mkdir -p dist/vite/plugins && cp src/vite/plugins/cloudflare-protocol-loader-hook.mjs dist/vite/plugins/cloudflare-protocol-loader-hook.mjs && pnpm dlx esbuild src/bin/rango.ts --bundle --format=esm --outfile=dist/bin/rango.js --platform=node --packages=external --banner:js='#!/usr/bin/env node' && chmod +x dist/bin/rango.js",
     "prepublishOnly": "pnpm build",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.strict-check.json --noEmit",
     "test": "playwright test",
     "test:ui": "playwright test --ui",
     "test:unit": "vitest run",

package/skills/breadcrumbs/SKILL.md

@@ -141,9 +141,11 @@ path("/dashboard", (ctx) => {
   breadcrumb({ label: "Dashboard", href: "/dashboard" });
   return <DashboardNav handle={Breadcrumbs} />;
 });
+```
 
+```tsx
 // Client component
-("use client");
+"use client";
 import { useHandle, type Breadcrumbs } from "@rangojs/router/client";
 
 function DashboardNav({ handle }: { handle: typeof Breadcrumbs }) {

package/skills/hooks/SKILL.md

@@ -298,9 +298,11 @@ path("/dashboard", (ctx) => {
   push({ label: "Dashboard", href: "/dashboard" });
   return <DashboardNav handle={Breadcrumbs} />;
 });
+```
 
+```tsx
 // Client component — typeof infers the full Handle<T> type
-("use client");
+"use client";
 import { useHandle, type Breadcrumbs } from "@rangojs/router/client";
 
 function DashboardNav({ handle }: { handle: typeof Breadcrumbs }) {
@@ -593,6 +595,12 @@ function ProductPage() {
   return <h1>Product {params.productId}</h1>;
 }
 
+// Annotate the expected shape via a generic
+function ProductPageTyped() {
+  const { productId } = useParams<{ productId: string }>();
+  return <h1>Product {productId}</h1>;
+}
+
 // With selector for performance (re-renders only when selected value changes)
 function ProductId() {
   const productId = useParams((p) => p.productId);
@@ -600,7 +608,7 @@ function ProductId() {
 }
 ```
 
-Returns merged params from all matched route segments. Updates on navigation commit (not during pending navigation).
+Returns merged params from all matched route segments as a `Readonly<T>` map. Updates on navigation commit (not during pending navigation).
 
 ### usePathname()
 
@@ -681,24 +689,24 @@ function MountInfo() {
 }
 ```
 
-See `/links` for full URL generation guide including server-side `ctx.reverse`.
+See `/links` for full URL generation guide. The default server API is `ctx.reverse()`; in client components, receive URLs as props, loader data, or server-action return values — `reverse()` is not available in the browser.
 
 ## Hook Summary
 
-| Hook                 | Purpose                           | Returns                                         |
-| -------------------- | --------------------------------- | ----------------------------------------------- |
-| `useParams()`        | Route params                      | `Record<string, string>` or selected value      |
-| `usePathname()`      | Current pathname                  | `string`                                        |
-| `useSearchParams()`  | URL search params                 | `ReadonlyURLSearchParams`                       |
-| `useHref()`          | Mount-aware href                  | `(path) => string`                              |
-| `useMount()`         | Current include() mount path      | `string`                                        |
-| `useNavigation()`    | Reactive navigation state         | state, location, isStreaming                    |
-| `useRouter()`        | Stable router actions             | push, replace, refresh, prefetch, back, forward |
-| `useSegments()`      | URL path & segment IDs            | path, segmentIds, location                      |
-| `useLinkStatus()`    | Link pending state                | { pending }                                     |
-| `useLoader()`        | Loader data (strict)              | data, isLoading, error                          |
-| `useFetchLoader()`   | Loader with on-demand fetch       | data, load, isLoading                           |
-| `useHandle()`        | Accumulated handle data           | T (handle type)                                 |
-| `useAction()`        | Server action state               | state, error, result                            |
-| `useLocationState()` | History state (persists or flash) | T \| undefined                                  |
-| `useClientCache()`   | Cache control                     | { clear }                                       |
+| Hook                 | Purpose                           | Returns                                                            |
+| -------------------- | --------------------------------- | ------------------------------------------------------------------ |
+| `useParams()`        | Route params                      | `Readonly<T>` (default `Record<string, string>`) or selected value |
+| `usePathname()`      | Current pathname                  | `string`                                                           |
+| `useSearchParams()`  | URL search params                 | `ReadonlyURLSearchParams`                                          |
+| `useHref()`          | Mount-aware href                  | `(path) => string`                                                 |
+| `useMount()`         | Current include() mount path      | `string`                                                           |
+| `useNavigation()`    | Reactive navigation state         | state, location, isStreaming                                       |
+| `useRouter()`        | Stable router actions             | push, replace, refresh, prefetch, back, forward                    |
+| `useSegments()`      | URL path & segment IDs            | path, segmentIds, location                                         |
+| `useLinkStatus()`    | Link pending state                | { pending }                                                        |
+| `useLoader()`        | Loader data (strict)              | data, isLoading, error                                             |
+| `useFetchLoader()`   | Loader with on-demand fetch       | data, load, isLoading                                              |
+| `useHandle()`        | Accumulated handle data           | T (handle type)                                                    |
+| `useAction()`        | Server action state               | state, error, result                                               |
+| `useLocationState()` | History state (persists or flash) | T \| undefined                                                     |
+| `useClientCache()`   | Cache control                     | { clear }                                                          |