@remix-run/cli 0.2.0 → 0.3.1

package/{bootstrap → template}/.agents/skills/remix/references/auth-and-sessions.md

@@ -68,18 +68,18 @@ fail fast when the secret is missing.
 
 ```typescript
 // Filesystem storage
-import { createFsSessionStorage } from 'remix/session/fs-storage'
+import { createFsSessionStorage } from 'remix/session-storage/fs'
 export let sessionStorage = createFsSessionStorage('./tmp/sessions')
 
 // Memory storage (for tests)
-import { createMemorySessionStorage } from 'remix/session/memory-storage'
+import { createMemorySessionStorage } from 'remix/session-storage/memory'
 export let sessionStorage = createMemorySessionStorage()
 ```
 
 ### Add session middleware
 
 ```typescript
-import { session } from 'remix/session-middleware'
+import { session } from 'remix/middleware/session'
 
 let router = createRouter({
   middleware: [
@@ -151,7 +151,7 @@ bypassable by clearing cookies; if the guarantee needs to survive that, you also
 ### Basic setup
 
 ```typescript
-import { auth, createSessionAuthScheme } from 'remix/auth-middleware'
+import { auth, createSessionAuthScheme } from 'remix/middleware/auth'
 import { Session } from 'remix/session'
 import { Database } from 'remix/data-table'
 
@@ -179,7 +179,7 @@ export function loadAuth() {
 ### Reading auth state
 
 ```typescript
-import { Auth } from 'remix/auth-middleware'
+import { Auth } from 'remix/middleware/auth'
 
 function handler({ get }) {
   let auth = get(Auth)
@@ -303,7 +303,9 @@ module-scope provider to `finishExternalAuth(...)` and `refreshExternalAuth(...)
 ### OAuth controller
 
 ```typescript
-export default {
+import { createController } from 'remix/router'
+
+export default createController(routes.auth.google, {
   actions: {
     // GET /auth/google — redirect to Google
     async index(context) {
@@ -326,10 +328,10 @@ export default {
         authAccountId: authAccount.id,
       })
 
-      return redirect(returnTo ?? routes.account.href())
+      return redirect(returnTo ?? routes.account.index.href())
     },
   },
-} satisfies Controller<typeof routes.auth.google>
+})
 ```
 
 ### Refresh stored provider tokens
@@ -356,20 +358,41 @@ async function refreshGoogleTokens({ get }) {
 
 ### Controller-level protection
 
-Apply `requireAuth()` to an entire controller subtree:
+Apply `requireAuth()` to every action in one controller:
+
+```typescript
+import { createController } from 'remix/router'
+import { requireAuth } from 'remix/middleware/auth'
+
+export default createController(routes.account, {
+  middleware: [requireAuth()],
+  actions: {
+    index() {
+      /* guaranteed authenticated */
+    },
+  },
+})
+```
+
+Nested route maps need their own explicit protection:
 
 ```typescript
-import { requireAuth } from 'remix/auth-middleware'
+// app/router.ts
+router.map(routes.account, accountController)
+router.map(routes.account.settings, accountSettingsController)
 
-export default {
+// app/actions/account/settings/controller.tsx
+export default createController(routes.account.settings, {
   middleware: [requireAuth()],
   actions: {
     index() {
       /* guaranteed authenticated */
     },
-    settings: settingsController,
+    update() {
+      /* guaranteed authenticated */
+    },
   },
-} satisfies Controller<typeof routes.account>
+})
 ```
 
 ### Stacking middleware
@@ -377,14 +400,14 @@ export default {
 Combine auth checks with role checks:
 
 ```typescript
-export default {
+export default createController(routes.admin, {
   middleware: [requireAuth(), requireAdmin()],
   actions: {
     index() {
       /* requires auth + admin */
     },
   },
-} satisfies Controller<typeof routes.admin>
+})
 ```
 
 ### Action-level protection
@@ -392,9 +415,9 @@ export default {
 Apply middleware to a single route:
 
 ```typescript
-import { Auth, requireAuth } from 'remix/auth-middleware'
+import { Auth, requireAuth } from 'remix/middleware/auth'
 
-router.get(routes.account, {
+router.get(routes.account.index, {
   middleware: [requireAuth()],
   handler(context) {
     let auth = context.get(Auth)
@@ -406,7 +429,7 @@ router.get(routes.account, {
 ### Redirect on auth failure
 
 ```typescript
-import { requireAuth } from 'remix/auth-middleware'
+import { requireAuth } from 'remix/middleware/auth'
 import { redirect } from 'remix/response/redirect'
 
 export function requireAuthRedirect() {

package/{bootstrap → template}/.agents/skills/remix/references/component-model.md

@@ -20,7 +20,10 @@ For host-element behavior (event handlers, styles, refs, animations), see
 A component has two phases:
 
 1. **Setup phase** — runs once when the component is created
-2. **Render phase** — returned function runs on initial render and every update
+2. **Render phase** — returned zero-argument function runs on initial render and every update
+
+The component shape is `function Component(handle: Handle<Props>) { return () => ... }`. Props are
+available as `handle.props` in setup scope and are updated before every render.
 
 ```tsx
 import { on, type Handle } from 'remix/ui'

package/{bootstrap → template}/.agents/skills/remix/references/data-and-validation.md

@@ -84,9 +84,16 @@ runtime only needs the column shape and validation hooks. Two valid patterns:
 
 Pick one and apply it consistently across the app.
 
-### Table validation hooks
+### Table lifecycle hooks
 
-Tables can define `validate`, `beforeWrite`, and `afterRead` hooks:
+Tables can define validation and lifecycle hooks:
+
+- `validate` runs before `create` and `update` writes and should return either `{ value }` or
+  `{ issues }`
+- `beforeWrite` can normalize or veto `create`/`update` values
+- `afterWrite` observes completed `create`/`update` operations
+- `beforeDelete` and `afterDelete` observe or veto deletes
+- `afterRead` can normalize or reject row values after reads
 
 ```typescript
 export const books = table({
@@ -94,6 +101,12 @@ export const books = table({
   columns: {
     /* ... */
   },
+  beforeWrite({ value }) {
+    if (typeof value.slug === 'string') {
+      return { value: { ...value, slug: value.slug.trim().toLowerCase() } }
+    }
+    return { value }
+  },
   validate({ operation, value }) {
     let issues = []
     if (operation === 'create' && !value.slug) {
@@ -101,6 +114,9 @@ export const books = table({
     }
     return issues.length > 0 ? { issues } : { value }
   },
+  afterRead({ value }) {
+    return { value }
+  },
 })
 ```
 
@@ -111,7 +127,7 @@ Create a database with an adapter and expose it via middleware:
 ```typescript
 import BetterSqlite3 from 'better-sqlite3'
 import { createDatabase, Database } from 'remix/data-table'
-import { createSqliteDatabaseAdapter } from 'remix/data-table-sqlite'
+import { createSqliteDatabaseAdapter } from 'remix/data-table/sqlite'
 
 let sqlite = new BetterSqlite3('./db/app.db')
 sqlite.pragma('foreign_keys = ON')
@@ -126,7 +142,7 @@ client fits the runtime instead of assuming `better-sqlite3` is required.
 ### Database middleware
 
 ```typescript
-import type { Middleware } from 'remix/fetch-router'
+import type { Middleware } from 'remix/router'
 import { Database } from 'remix/data-table'
 
 export function loadDatabase(): Middleware {
@@ -284,7 +300,7 @@ The recommended way: register `formData()` middleware in the root stack and read
 the context system. This also lets `methodOverride()` and CSRF middleware work uniformly.
 
 ```typescript
-import { formData } from 'remix/form-data-middleware'
+import { formData } from 'remix/middleware/form-data'
 
 let router = createRouter({
   middleware: [, /* ... */ formData() /* ... */],

package/{bootstrap → template}/.agents/skills/remix/references/middleware-and-server.md

@@ -9,7 +9,7 @@ involves:
 - Writing custom middleware that sets typed context values
 - Adding fast-exit handling (static files, CORS preflights) versus request-enriching layers
   (sessions, auth, data loading)
-- Booting a Node `http` server with `createRequestListener`
+- Choosing when to keep the generated Node server versus switching server adapters
 
 For data and persistence specifics, see `data-and-validation.md`. For session and auth specifics,
 see `auth-and-sessions.md`.
@@ -22,14 +22,14 @@ request-enriching middleware (session, auth) later.
 Recommended ordering:
 
 ```typescript
-import { createRouter } from 'remix/fetch-router'
-import { compression } from 'remix/compression-middleware'
-import { formData } from 'remix/form-data-middleware'
-import { logger } from 'remix/logger-middleware'
-import { methodOverride } from 'remix/method-override-middleware'
-import { session } from 'remix/session-middleware'
-import { staticFiles } from 'remix/static-middleware'
-import { asyncContext } from 'remix/async-context-middleware'
+import { createRouter } from 'remix/router'
+import { compression } from 'remix/middleware/compression'
+import { formData } from 'remix/middleware/form-data'
+import { logger } from 'remix/middleware/logger'
+import { methodOverride } from 'remix/middleware/method-override'
+import { session } from 'remix/middleware/session'
+import { staticFiles } from 'remix/middleware/static'
+import { asyncContext } from 'remix/middleware/async-context'
 
 let middleware = []
 
@@ -53,18 +53,18 @@ let router = createRouter({ middleware })
 
 | Middleware                 | Import                             | Use when                                                                      | Notes                                                          |
 | -------------------------- | ---------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| `staticFiles(dir, opts?)`  | `remix/static-middleware`          | Serve files from `public/` or another directory exactly as they exist on disk | Fast exit; usually near the top                                |
-| `compression()`            | `remix/compression-middleware`     | Compress text-like responses                                                  | Usually global                                                 |
-| `logger()`                 | `remix/logger-middleware`          | Log requests and responses                                                    | Often development-only; `colors` can force color output on/off |
-| `cors(opts?)`              | `remix/cors-middleware`            | Endpoints must serve cross-origin browsers or preflight `OPTIONS` requests    | Usually early so preflights can short-circuit                  |
-| `cop(opts?)`               | `remix/cop-middleware`             | Reject unsafe cross-origin browser requests without synchronizer tokens       | Put before session or CSRF when used                           |
-| `formData(opts?)`          | `remix/form-data-middleware`       | Parse `FormData` bodies, especially forms and uploads                         | Needed for `_csrf` form field extraction                       |
-| `methodOverride()`         | `remix/method-override-middleware` | HTML forms need `PUT`, `PATCH`, or `DELETE` semantics                         | Run after form parsing                                         |
-| `session(cookie, storage)` | `remix/session-middleware`         | Cookie-backed sessions                                                        | Must run before session-backed auth or CSRF                    |
-| `csrf(opts?)`              | `remix/csrf-middleware`            | Session-backed form workflows need synchronizer-token CSRF protection         | Requires `session()` before it                                 |
-| `asyncContext()`           | `remix/async-context-middleware`   | Helpers outside handlers need request context via `getContext()`              | Add before helpers rely on it                                  |
-| `auth({ schemes })`        | `remix/auth-middleware`            | Resolve auth state into `context.get(Auth)`                                   | Run after `session()` for session-backed auth                  |
-| `requireAuth()`            | `remix/auth-middleware`            | A controller or action must reject anonymous access                           | Usually controller-level or action-level, not global           |
+| `staticFiles(dir, opts?)`  | `remix/middleware/static`          | Serve files from `public/` or another directory exactly as they exist on disk | Fast exit; usually near the top                                |
+| `compression()`            | `remix/middleware/compression`     | Compress text-like responses                                                  | Usually global                                                 |
+| `logger()`                 | `remix/middleware/logger`          | Log requests and responses                                                    | Often development-only; `colors` can force color output on/off |
+| `cors(opts?)`              | `remix/middleware/cors`            | Endpoints must serve cross-origin browsers or preflight `OPTIONS` requests    | Usually early so preflights can short-circuit                  |
+| `cop(opts?)`               | `remix/middleware/cop`             | Reject unsafe cross-origin browser requests without synchronizer tokens       | Put before session or CSRF when used                           |
+| `formData(opts?)`          | `remix/middleware/form-data`       | Parse `FormData` bodies, especially forms and uploads                         | Needed for `_csrf` form field extraction                       |
+| `methodOverride()`         | `remix/middleware/method-override` | HTML forms need `PUT`, `PATCH`, or `DELETE` semantics                         | Run after form parsing                                         |
+| `session(cookie, storage)` | `remix/middleware/session`         | Cookie-backed sessions                                                        | Must run before session-backed auth or CSRF                    |
+| `csrf(opts?)`              | `remix/middleware/csrf`            | Session-backed form workflows need synchronizer-token CSRF protection         | Requires `session()` before it                                 |
+| `asyncContext()`           | `remix/middleware/async-context`   | Helpers outside handlers need request context via `getContext()`              | Add before helpers rely on it                                  |
+| `auth({ schemes })`        | `remix/middleware/auth`            | Resolve auth state into `context.get(Auth)`                                   | Run after `session()` for session-backed auth                  |
+| `requireAuth()`            | `remix/middleware/auth`            | A controller or action must reject anonymous access                           | Usually controller-level or action-level, not global           |
 
 ### Static files vs browser modules
 
@@ -103,7 +103,7 @@ staticFiles('./public', {
 })
 
 // Form data with upload handler
-import { FileUpload } from 'remix/form-data-parser'
+import type { FileUpload } from 'remix/form-data-parser'
 import { createFsFileStorage } from 'remix/file-storage/fs'
 
 let fileStorage = createFsFileStorage('./tmp/uploads')
@@ -120,15 +120,16 @@ errors at the route boundary when they should become user-facing `Response` obje
 
 ## Writing Custom Middleware
 
-Middleware is a function that receives `(context, next)` and returns a `Response`. Call `next()` to
-continue the chain.
+Middleware is a function that receives `(context, next)`. Return a `Response` to short-circuit, call
+and return `next()` when you need the downstream response, or return nothing when you only set
+context and want the router to continue automatically.
 
 ### Setting context values
 
 Use `context.set(key, value)` to add typed values accessible downstream via `context.get(key)`.
 
 ```typescript
-import type { Middleware } from 'remix/fetch-router'
+import type { Middleware } from 'remix/router'
 import { Database } from 'remix/data-table'
 
 export function loadDatabase(): Middleware {
@@ -142,7 +143,7 @@ export function loadDatabase(): Middleware {
 ### Guarding routes
 
 ```typescript
-import { Auth } from 'remix/auth-middleware'
+import { Auth } from 'remix/middleware/auth'
 
 export function requireAdmin(): Middleware {
   return (context, next) => {
@@ -163,8 +164,8 @@ helpers:
 
 ```typescript
 // app/utils/context.ts
-import { getContext } from 'remix/async-context-middleware'
-import { Auth } from 'remix/auth-middleware'
+import { getContext } from 'remix/middleware/async-context'
+import { Auth } from 'remix/middleware/auth'
 import { Database } from 'remix/data-table'
 import { Session } from 'remix/session'
 
@@ -200,18 +201,21 @@ Middleware can be applied at three levels:
    let router = createRouter({ middleware: [...] })
    ```
 
-2. **Controller-level** — runs for all actions in a controller subtree:
+2. **Controller-level** — runs for the direct actions in one controller:
 
    ```typescript
-   export default {
+   export default createController(routes.account, {
      middleware: [requireAuth()],
      actions: { ... },
-   } satisfies Controller<typeof routes.account>
+   })
    ```
 
+   Controller middleware does not flow into other controllers. Add the middleware to each
+   controller that needs it.
+
 3. **Action-level** — runs for a single route:
    ```typescript
-   router.get(routes.account, {
+   router.get(routes.account.index, {
      middleware: [requireAuth()],
      handler: accountAction.handler,
    })
@@ -219,25 +223,10 @@ Middleware can be applied at three levels:
 
 ## Node Server Setup
 
-Use `createRequestListener` to bridge Node's `http` module to the Fetch API router:
+New apps already include a `server.ts` that adapts the app router with
+`remix/node-fetch-server`. Keep that generated server unless the task specifically needs to change
+runtime behavior such as host/protocol handling, TLS, HTTP/2, WebSockets, deployment lifecycle, or
+test-only server setup.
 
-```typescript
-import * as http from 'node:http'
-import { createRequestListener } from 'remix/node-fetch-server'
-
-let server = http.createServer(
-  createRequestListener(async (request) => {
-    try {
-      return await router.fetch(request)
-    } catch (error) {
-      console.error(error)
-      return new Response('Internal Server Error', { status: 500 })
-    }
-  }),
-)
-
-let port = Number(process.env.PORT) || 3000
-server.listen(port, () => {
-  console.log(`http://localhost:${port}`)
-})
-```
+Use `remix/node-fetch-server` when you want to keep owning a standard Node `http`, `https`, or
+`http2` server directly.

package/{bootstrap → template}/.agents/skills/remix/references/routing-and-controllers.md

@@ -17,7 +17,7 @@ data is `data-and-validation.md`. For request lifecycle and middleware ordering,
 
 ## Route Builders
 
-Import all route builders from `remix/fetch-router/routes`.
+Import all route builders from `remix/routes`.
 
 ### `route(prefix, map)` — nested route group
 
@@ -27,7 +27,7 @@ call (when you want a shared URL prefix) or a plain object literal (when each le
 its absolute path).
 
 ```typescript
-import { route, get, post } from 'remix/fetch-router/routes'
+import { route, get, post } from 'remix/routes'
 
 export const routes = route({
   home: '/',
@@ -92,18 +92,22 @@ redirect(routes.account.orders.show.href({ orderId: '42' }))
 
 ## Actions
 
-An action is a handler for a single leaf route. Type it with `BuildAction`:
+An action is the handler for one leaf route. In Remix app code, actions should live in controllers.
+Use `Action` only when a reusable helper needs to type one action before it is added to a
+controller or when you are doing low-level router wiring outside the `app/actions` convention:
 
 ```typescript
-import type { BuildAction } from 'remix/fetch-router'
+import { createAction } from 'remix/router'
 
-export const search: BuildAction<'GET', typeof routes.search> = {
+import { routes } from '../routes.ts'
+
+export const search = createAction(routes.search, {
   async handler({ url }) {
     let query = url.searchParams.get('q') ?? ''
     let results = await searchIndex(query)
     return render(<SearchPage query={query} results={results} />)
   },
-}
+})
 ```
 
 The handler receives a context object with:
@@ -116,9 +120,9 @@ The handler receives a context object with:
 Actions with inline middleware:
 
 ```typescript
-import { requireAuth } from 'remix/auth-middleware'
+import { requireAuth } from 'remix/middleware/auth'
 
-router.get(routes.account, {
+router.get(routes.account.index, {
   middleware: [requireAuth()],
   handler: accountAction.handler,
 })
@@ -195,17 +199,18 @@ if (!parsed.success) {
 ### Return JSON
 
 For routes consumed by client code rather than rendered as a page (autocomplete endpoints, polling
-APIs, inter-service calls), return a JSON `Response`. Use `remix/headers` for cache headers
-instead of hand-formatting strings:
+APIs, inter-service calls), return a JSON `Response`. Use `SuperHeaders` from `remix/headers` when
+typed header accessors make the response clearer:
 
 ```typescript
-import { CacheControl } from 'remix/headers'
+import Headers from 'remix/headers'
+
+let headers = new Headers()
+headers.contentType = { mediaType: 'application/json', charset: 'utf-8' }
+headers.cacheControl = { noStore: true }
 
 return new Response(JSON.stringify({ results }), {
-  headers: {
-    'Content-Type': 'application/json; charset=utf-8',
-    'Cache-Control': new CacheControl({ noStore: true }).toString(),
-  },
+  headers,
 })
 ```
 
@@ -216,15 +221,20 @@ with the server.
 
 ## Controllers
 
-A controller mirrors a route map. Each key in `actions` matches a key in the route definition.
-Pass `AppContext` as the second generic to `Controller` so `get(Database)`, `get(Session)`,
-`get(Auth)`, etc. are typed against your middleware stack.
+A controller owns the direct leaf routes in one route map. Each key in `actions` matches a direct
+leaf route key in the route definition passed to `router.map(...)`. Nested route-map keys do not
+belong inside a controller's `actions`; map those route maps with their own controllers.
+
+Configure `RouterTypes.context` with your app context in the router module, then use
+`createController()` so `get(Database)`, `get(Session)`, `get(Auth)`, etc. are typed against your
+middleware stack without repeating a type clause on every controller.
 
 ```typescript
-import type { Controller } from 'remix/fetch-router'
-import type { AppContext } from '../router.ts'
+import { createController } from 'remix/router'
+
+import { routes } from '../routes.ts'
 
-export default {
+export default createController(routes.books, {
   actions: {
     async index({ get }) {
       let db = get(Database)
@@ -239,74 +249,125 @@ export default {
       return render(<ShowPage book={book} />)
     },
   },
-} satisfies Controller<typeof routes.books, AppContext>
+})
 ```
 
-### Nested controllers
+### Root controller
 
-When a route map contains nested maps, the controller nests too:
+The root route map uses `app/actions/controller.tsx` and owns only top-level leaf routes:
 
 ```typescript
 // routes.ts
 export const routes = route({
+  assets: get('/assets/*path'),
+  home: '/',
   account: route('account', {
     index: '/',
     settings: form('settings', { formMethod: 'PUT', names: { action: 'update' } }),
-    orders: resources('orders', { only: ['index', 'show'], param: 'orderId' }),
   }),
 })
 
-// controllers/account/controller.tsx
-import settingsController from './settings/controller.tsx'
-import ordersController from './orders/controller.tsx'
+// app/actions/controller.tsx
+export default createController(routes, {
+  actions: {
+    async assets({ request }) {
+      return (await assetServer.fetch(request)) ?? new Response('Not Found', { status: 404 })
+    },
+    home() {
+      return render(<HomePage />)
+    },
+  },
+})
+```
+
+Because `account` is a nested route map, it is not an action key in the root controller.
+
+### Nested route maps
+
+Nested route maps use their own controllers under `app/actions/<route-key>/controller.tsx`.
+Directory names under `app/actions/` are route-map keys, not URL path segments.
 
-export default {
+```typescript
+// app/actions/account/controller.tsx
+export default createController(routes.account, {
   middleware: [requireAuth()],
   actions: {
-    index() { return render(<AccountPage />) },
-    settings: settingsController,
-    orders: ordersController,
+    index() {
+      return render(<AccountPage />)
+    },
   },
-} satisfies Controller<typeof routes.account, AppContext>
+})
+
+// app/actions/account/settings/controller.tsx
+export default createController(routes.account.settings, {
+  middleware: [requireAuth()],
+  actions: {
+    index() {
+      return render(<SettingsPage />)
+    },
+    update() {
+      return redirect(routes.account.index.href(), 303)
+    },
+  },
+})
+```
+
+Then map each route map explicitly:
+
+```typescript
+import rootController from './actions/controller.tsx'
+import accountController from './actions/account/controller.tsx'
+import accountSettingsController from './actions/account/settings/controller.tsx'
+
+let router = createRouter({ middleware })
+
+router.map(routes, rootController)
+router.map(routes.account, accountController)
+router.map(routes.account.settings, accountSettingsController)
 ```
 
 ### Controller middleware
 
-The `middleware` array on a controller runs for every action in that subtree, before action-level
-middleware:
+The `middleware` array on a controller runs only for the direct actions in that controller, before
+action-level middleware. It does not apply to other controllers.
 
 ```typescript
-export default {
+export default createController(routes.admin, {
   middleware: [requireAuth(), requireAdmin()],
   actions: {
     /* all actions require auth + admin */
   },
-} satisfies Controller<typeof routes.admin, AppContext>
+})
 ```
 
 ## Registering Routes
 
-Use `router.map` for route maps (controllers) and verb methods for leaf routes:
+Use `router.map` for route maps and controllers. Map each nested route map explicitly. Use verb
+methods only for low-level router wiring outside the `app/actions` controller convention.
 
 ```typescript
 let router = createRouter({ middleware })
 
-// Route map → controller
+// Route maps → controllers
+router.map(routes, rootController)
+router.map(routes.contact, contactController)
 router.map(routes.auth, authController)
+router.map(routes.auth.login, authLoginController)
 router.map(routes.admin, adminController)
+router.map(routes.admin.books, adminBooksController)
 
-// Leaf route → action
-router.map(routes.home, home)
+// Leaf route → one-off action
 router.get(routes.search, searchAction)
 router.post(routes.logout, logoutAction)
 ```
 
 ## Typed Context
 
-Define an `AppContext` type from your middleware stack for use in actions and controllers:
+Define an `AppContext` type from your middleware stack, then make it the default context used by
+`createAction()` and `createController()`:
 
 ```typescript
-import type { MiddlewareContext, WithParams, AnyParams } from 'remix/fetch-router'
+import type { MiddlewareContext, ContextWithParams, AnyParams } from 'remix/router'
 
 type RootMiddleware = [
   ReturnType<typeof formData>,
@@ -315,10 +376,16 @@ type RootMiddleware = [
   ReturnType<typeof loadAuth>,
 ]
 
-export type AppContext<params extends AnyParams = AnyParams> = WithParams<
+export type AppContext<params extends AnyParams = {}> = ContextWithParams<
   MiddlewareContext<RootMiddleware>,
   params
 >
+
+declare module 'remix/router' {
+  interface RouterTypes {
+    context: AppContext
+  }
+}
 ```
 
 This gives typed `context.get(Database)`, `context.get(Session)`, `context.get(Auth)`, etc.