@rangojs/router 0.0.0-experimental.0f44aca1

package/skills/rango/SKILL.md

@@ -0,0 +1,118 @@
+---
+name: rango
+description: Overview of @rangojs/router and available skills
+argument-hint:
+---
+
+# @rangojs/router
+
+Django-inspired RSC router with composable URL patterns, type-safe href, and server components.
+
+## Skills
+
+| Skill              | Description                                                                |
+| ------------------ | -------------------------------------------------------------------------- |
+| `/router-setup`    | Create and configure the RSC router                                        |
+| `/route`           | Define routes with `urls()` and `path()`                                   |
+| `/layout`          | Layouts that wrap child routes                                             |
+| `/loader`          | Data loaders with `createLoader()`                                         |
+| `/middleware`      | Request processing and authentication                                      |
+| `/intercept`       | Modal/slide-over patterns for soft navigation                              |
+| `/parallel`        | Multi-column layouts and sidebars                                          |
+| `/caching`         | Segment caching with memory or KV stores                                   |
+| `/use-cache`       | Function-level caching with `"use cache"` directive                        |
+| `/cache-guide`     | When to use `cache()` vs `"use cache"` — differences and decision guide    |
+| `/document-cache`  | Edge caching with Cache-Control headers                                    |
+| `/theme`           | Light/dark mode with FOUC prevention                                       |
+| `/links`           | URL generation: ctx.reverse, href, useHref, useMount, scopedReverse        |
+| `/hooks`           | Client-side React hooks                                                    |
+| `/typesafety`      | Type-safe routes, params, href, and environment                            |
+| `/host-router`     | Multi-app host routing with domain/subdomain patterns                      |
+| `/tailwind`        | Set up Tailwind CSS v4 with `?url` imports                                 |
+| `/response-routes` | JSON/text/HTML/XML/stream endpoints with `path.json()`, `path.text()`      |
+| `/mime-routes`     | Content negotiation — same URL, different response types via Accept header |
+| `/fonts`           | Load web fonts with preload hints                                          |
+
+## Quick Start
+
+```typescript
+// urls.tsx
+import { urls } from "@rangojs/router";
+
+export const urlpatterns = urls(({ path, layout }) => [
+  layout(RootLayout, () => [
+    path("/", HomePage, { name: "home" }),
+    path("/about", AboutPage, { name: "about" }),
+  ]),
+]);
+
+// router.tsx
+import { createRouter } from "@rangojs/router";
+import { urlpatterns } from "./urls";
+
+export default createRouter({ document: Document }).routes(urlpatterns);
+```
+
+Use `/typesafety` for type-safe href and environment setup.
+
+## CLI: `npx rango generate`
+
+Single command to generate `.gen.ts` route type files. Auto-detects file type and
+generates the appropriate output.
+
+```bash
+# Single file
+npx rango generate src/urls.tsx
+
+# Multiple files
+npx rango generate src/router.tsx src/urls.tsx
+
+# Directory (recursive scan)
+npx rango generate src/
+
+# Mix of files and directories
+npx rango generate src/urls.tsx src/api/
+```
+
+### Auto-detection
+
+Each file is classified by its contents:
+
+| Contains       | Generated output                                                 |
+| -------------- | ---------------------------------------------------------------- |
+| `urls(`        | Per-module `*.gen.ts` with route names, patterns, params, search |
+| `createRouter` | Per-router `*.named-routes.gen.ts` with global route map         |
+| Both           | Both files                                                       |
+
+Directories are scanned recursively for `.ts`/`.tsx` files, skipping `node_modules`,
+dotfiles, and existing `.gen.` files.
+
+### Recursive includes
+
+The generator follows `include()` calls across files, resolving imports to build
+the full route tree. Circular includes are detected and warned about.
+
+### First-wins deduplication
+
+When a route name appears more than once, the first definition wins and duplicates
+are dropped with a warning. This applies only to the generated `.gen.ts` type files.
+Define the primary route before any fallback variant that reuses the same name.
+
+Content negotiation (see `/mime-routes`) is unaffected — negotiated routes use
+distinct names (e.g. `"product"` and `"productJson"`) and the Accept header
+dispatching happens at runtime in the trie, not in the type generator.
+
+### Limitations
+
+The CLI uses static source analysis (AST walking), not runtime execution. It cannot
+extract routes defined dynamically:
+
+- `Array.from()` or `.map()` generating path() calls
+- Conditional routes behind `import.meta.env` or feature flags
+- Routes computed from external data (databases, config files)
+- Template literal patterns with interpolated variables
+
+These routes are only discovered by the Vite plugin's runtime discovery during
+`pnpm dev` or `pnpm build`. The CLI-generated `.gen.ts` may have fewer routes
+than the runtime-generated version. During dev, the `preserveIfLarger` guard
+prevents the static parser from overwriting a larger runtime-discovered file.

package/skills/response-routes/SKILL.md

@@ -0,0 +1,411 @@
+---
+name: response-routes
+description: Response routes (path.json, path.text, etc.) for non-RSC endpoints with typed responses
+argument-hint: [json|text|html|xml|md|image|stream]
+---
+
+# Response Routes
+
+Response routes skip the RSC pipeline entirely. Use them for JSON APIs, plain text endpoints,
+XML feeds, image proxies, and any route that returns a `Response` instead of React components.
+
+## Route-Level Tags: path.json(), path.text(), etc.
+
+Inside any `urls()` callback, use `path.json()`, `path.text()`, or other tags alongside regular RSC routes:
+
+```typescript
+import { urls, RouterError } from "@rangojs/router";
+
+export const urlpatterns = urls(({ path, layout, include }) => [
+  // RSC routes (normal)
+  path("/", HomePage, { name: "home" }),
+  path("/about", AboutPage, { name: "about" }),
+
+  // JSON API route (inline, alongside RSC routes)
+  path.json(
+    "/api/status",
+    (ctx) => ({
+      status: "ok",
+      timestamp: Date.now(),
+    }),
+    { name: "status" },
+  ),
+
+  // Text route
+  path.text(
+    "/robots.txt",
+    (ctx) => {
+      return "User-agent: *\nAllow: /\nDisallow: /api/\n";
+    },
+    { name: "robots" },
+  ),
+
+  // Markdown route
+  path.md(
+    "/docs/:slug.md",
+    (ctx) => {
+      return `# ${ctx.params.slug}\n\nDocumentation content here.`;
+    },
+    { name: "docs" },
+  ),
+
+  // Response route (full control, returns Response directly)
+  path.image(
+    "/og/:slug.png",
+    async (ctx) => {
+      const image = await generateOgImage(ctx.params.slug);
+      return new Response(image, {
+        headers: {
+          "Content-Type": "image/png",
+          "Cache-Control": "public, max-age=86400",
+        },
+      });
+    },
+    { name: "ogImage" },
+  ),
+]);
+```
+
+## Available Tags
+
+| Tag      | Usage           | Handler returns    | Auto-wrap                |
+| -------- | --------------- | ------------------ | ------------------------ |
+| `json`   | `path.json()`   | plain object/array | `{ data: T }` envelope   |
+| `text`   | `path.text()`   | string             | text/plain Response      |
+| `html`   | `path.html()`   | string             | text/html Response       |
+| `xml`    | `path.xml()`    | string             | application/xml Response |
+| `md`     | `path.md()`     | string             | text/markdown Response   |
+| `image`  | `path.image()`  | Response           | pass-through             |
+| `stream` | `path.stream()` | Response           | pass-through             |
+| `any`    | `path.any()`    | Response           | pass-through             |
+
+## ResponseHandlerContext
+
+Response route handlers receive a lighter context (no `ctx.use()`, no `ctx.res`):
+
+```typescript
+interface ResponseHandlerContext<TParams, TEnv> {
+  request: Request;
+  params: TParams; // Typed from URL pattern
+  env: TEnv; // Plain bindings (DB, KV, etc.)
+  searchParams: URLSearchParams;
+  url: URL;
+  pathname: string;
+  reverse: (name: string, params?: Record<string, string>) => string;
+  get: GetVariableFn; // Read middleware variables
+  header: (name: string, value: string) => void;
+  // Use cookies().set(name, value, opts) for cookie mutations (standalone API)
+}
+```
+
+### Setting Headers and Cookies
+
+String-returning handlers (json, text, html, xml, md) can set custom headers and cookies
+without constructing a full Response:
+
+```typescript
+path.md(
+  "/docs/:slug.md",
+  (ctx) => {
+    ctx.header("Cache-Control", "public, max-age=3600");
+    cookies().set("last-doc", ctx.params.slug, { path: "/" });
+    return `# ${ctx.params.slug}\n\nContent here.`;
+  },
+  { name: "docs" },
+);
+```
+
+Headers set via `ctx.header()` and cookies set via `cookies().set()` are merged into the
+auto-wrapped Response. If the handler returns a `Response` directly, these are ignored
+(use the Response headers instead).
+
+### Environment Access
+
+`ctx.env` is always the plain bindings passed as TEnv to `createRouter<TEnv>()`:
+
+```typescript
+// createRouter<{ DB: D1Database; KV: KVNamespace }>({ ... })
+
+// In a response handler:
+path.json(
+  "/api/data",
+  (ctx) => {
+    ctx.env.DB; // D1Database (plain bindings)
+    ctx.env.KV; // KVNamespace
+    // Variables are accessed via ctx.get("key") or ctx.get(ContextVar)
+    return { data: "ok" };
+  },
+  { name: "data" },
+);
+```
+
+## JSON Envelope
+
+`path.json()` handlers return plain data. The framework auto-wraps it
+in a `ResponseEnvelope<T>` discriminated union:
+
+```typescript
+// Success: HTTP 200
+{ "data": { "status": "ok", "timestamp": 1700000000 } }
+
+// Error: HTTP 404 (or whatever status RouterError specifies)
+{ "error": { "message": "Product 999 not found", "code": "NOT_FOUND" } }
+```
+
+### Error Handling with RouterError
+
+Throw `RouterError` to return structured error envelopes:
+
+```typescript
+import { RouterError } from "@rangojs/router";
+
+path.json(
+  "/api/users/:id",
+  (ctx) => {
+    const user = users.get(ctx.params.id);
+    if (!user) {
+      throw new RouterError("NOT_FOUND", `User ${ctx.params.id} not found`, {
+        status: 404,
+      });
+    }
+    if (!hasPermission(ctx)) {
+      throw new RouterError("FORBIDDEN", "Access denied", { status: 403 });
+    }
+    return user;
+  },
+  { name: "user" },
+);
+```
+
+### Returning Response Directly
+
+JSON handlers can return `Response` to bypass auto-wrap (custom status, headers, streaming):
+
+```typescript
+path.json(
+  "/api/export",
+  (ctx) => {
+    const csv = generateCsv();
+    return new Response(csv, {
+      headers: {
+        "Content-Type": "text/csv",
+        "Content-Disposition": "attachment; filename=export.csv",
+      },
+    });
+  },
+  { name: "export" },
+);
+```
+
+## Client-Side Type Safety
+
+### ResponseEnvelope and isResponseError
+
+```typescript
+"use client";
+import type { ResponseEnvelope, ResponseError } from "@rangojs/router/client";
+import { isResponseError } from "@rangojs/router/client";
+
+// Fetch a typed response
+const res = await fetch("/api/products/1");
+const result: ResponseEnvelope<Product> = await res.json();
+
+if (isResponseError(result)) {
+  // result.error: ResponseError  (message, code?, type?)
+  // result.data: undefined
+  console.error(result.error.message);
+} else {
+  // result.data: Product
+  // result.error: undefined
+  console.log(result.data.name);
+}
+```
+
+### RouteResponse (scoped lookup by route name)
+
+Look up response type from a `path.json()` or `path.text()` module by route name:
+
+```typescript
+import type { RouteResponse } from "@rangojs/router";
+
+// From the apiPatterns module (before include)
+type HealthData = RouteResponse<typeof apiPatterns, "health">;
+// = ResponseEnvelope<{ status: string; timestamp: number }>
+
+type ProductsData = RouteResponse<typeof apiPatterns, "products">;
+// = ResponseEnvelope<{ id: string; name: string; price: number }[]>
+```
+
+### PathResponse (global lookup by URL pattern)
+
+Look up response type from the merged route map by URL pattern:
+
+```typescript
+import type { PathResponse } from "@rangojs/router/client";
+
+// After include("/api", apiPatterns) in main urls
+type Health = PathResponse<"/api/health">;
+// = ResponseEnvelope<{ status: string; timestamp: number }>
+
+// RSC routes return ResponseEnvelope<never>
+type Home = PathResponse<"/">;
+// = ResponseEnvelope<never>
+```
+
+### ParamsFor with Response Routes
+
+```typescript
+import type { ParamsFor } from "@rangojs/router/client";
+
+// Works for both RSC and response routes
+type ProductParams = ParamsFor<"api.productDetail">;
+// = { id: string }
+```
+
+## Links to Response Routes
+
+### Client: href.json(), href.text(), etc.
+
+Response route links need `data-external` to trigger hard navigation (skip RSC fetch).
+Use `href.json()` which returns props to spread on `<Link>`:
+
+```typescript
+"use client";
+import { href, Link } from "@rangojs/router/client";
+
+function Nav() {
+  return (
+    <>
+      {/* RSC link (client-side navigation) */}
+      <Link to={href("/about")}>About</Link>
+
+      {/* Response route link (hard navigation via data-external) */}
+      <Link {...href.json("/api/health")}>API Health</Link>
+      <Link {...href.text("/robots.txt")}>Robots</Link>
+    </>
+  );
+}
+
+// href.json("/api/health") returns:
+// { to: "/api/health", "data-external": "" }
+```
+
+## Use Items
+
+Response routes support only `middleware()` and `cache()` as use items.
+No `loader`, `loading`, `layout`, or `parallel`.
+
+```typescript
+path.json("/api/users", handler, { name: "users" }, () => [
+  cache({ ttl: 60, swr: 300 }),
+]);
+```
+
+## Mountable Module Pattern
+
+A self-contained module with RSC pages + JSON APIs, mountable via `include()`:
+
+```typescript
+// blog/api/urls.tsx
+import { urls, RouterError } from "@rangojs/router";
+
+export const blogApiPatterns = urls(({ path }) => [
+  path.json(
+    "/stats",
+    (ctx) => ({
+      views: 1200,
+      visitors: 450,
+    }),
+    { name: "stats" },
+  ),
+
+  path.json(
+    "/:slug/likes",
+    (ctx) => ({
+      slug: ctx.params.slug,
+      count: 42,
+    }),
+    { name: "likes" },
+  ),
+
+  path.json(
+    "/:slug/comments",
+    (ctx) => [{ id: "c1", body: "Great post", author: "alice" }],
+    { name: "comments" },
+  ),
+]);
+
+// blog/urls.tsx
+import { urls } from "@rangojs/router";
+import { blogApiPatterns } from "./api/urls";
+
+export const blogPatterns = urls(({ path, include }) => [
+  path("/", BlogIndex, { name: "index" }),
+  path("/:slug", BlogPost, { name: "post" }),
+  path("/category/:catId", BlogCategory, { name: "category" }),
+
+  include("/api", blogApiPatterns, { name: "api" }),
+]);
+
+// app/urls.tsx
+import { urls } from "@rangojs/router";
+import { blogPatterns } from "./blog/urls";
+
+export const urlpatterns = urls(({ path, include }) => [
+  path("/", HomePage, { name: "home" }),
+  include("/blog", blogPatterns, { name: "blog" }),
+]);
+```
+
+### Type safety after mounting
+
+```typescript
+import type { RouteResponse } from "@rangojs/router";
+import type { PathResponse, ParamsFor } from "@rangojs/router/client";
+
+// Scoped (before mount) -- use the module directly
+type Stats = RouteResponse<typeof blogApiPatterns, "stats">;
+// = ResponseEnvelope<{ views: number; visitors: number }>
+
+// After mounting -- names get prefixed
+type BlogStats = PathResponse<"/blog/api/stats">;
+// = ResponseEnvelope<{ views: number; visitors: number }>
+
+// Params work through nested includes
+type LikesParams = ParamsFor<"blog.api.likes">;
+// = { slug: string }
+```
+
+### ctx.reverse inside mounted modules
+
+Response route handlers inside a mounted module can reference local names:
+
+```typescript
+// Inside blogApiPatterns handler
+path(
+  "/:slug/likes",
+  (ctx) => {
+    // ctx.reverse resolves names relative to the mount point
+    const commentsUrl = ctx.reverse("comments", { slug: ctx.params.slug });
+    // -> "/blog/api/my-post/comments"
+
+    return { slug: ctx.params.slug, count: 42, commentsUrl };
+  },
+  { name: "likes" },
+);
+```
+
+## Content Negotiation
+
+Multiple response types can share the same URL pattern. See `/mime-routes` for the
+full content negotiation API (Accept header matching, Vary: Accept, multi-variant routes).
+
+## How It Works
+
+1. `path.json()` tags the route at the trie level with a MIME type
+2. `coreRequestHandler()` checks the tag before the RSC pipeline
+3. Tagged routes short-circuit: handler runs, Response is returned directly
+4. JSON routes auto-wrap return values in `{ data }` / `{ error }` envelope
+5. Client-side navigation to response routes gets `X-RSC-Reload` header, triggering hard navigation
+6. Response types flow through `_responses` phantom type on `UrlPatterns`, propagated by `include()`
+7. When multiple routes share a URL pattern, the trie merges them for content negotiation (see `/mime-routes`)