remix 3.0.0-beta.3 → 3.0.0-beta.5

package/src/fetch-router/README.md

@@ -8,7 +8,7 @@ A minimal, composable router built on the [web Fetch API](https://developer.mozi
 - **Type-Safe Routing**: Leverage TypeScript for compile-time route validation and parameter inference
 - **Typed Request Context**: Carry request-scoped context through routers, controllers, and actions
 - **Declarative Route Maps**: Define your route structure upfront with type-safe route names and request methods
-- **Flexible Middleware**: Apply middleware globally, per-route, or to controllers
+- **Flexible Middleware**: Use router, controller, and action middleware for each request boundary
 - **Easy Testing**: Use standard `fetch()` to test your routes - no special test harness required
 
 ## Installation
@@ -237,6 +237,85 @@ router.map(routes.contact, {
 })
 ```
 
+### Composing Route Groups
+
+As applications grow, it is useful to let one file own the routes for a specific area of the app while the top-level router decides where that area is mounted. Use `router.mount()` with a route installer to register a group of routes under a route pattern prefix.
+
+A route installer receives a `RouteBuilder`, not a full `Router`, so it can register routes but cannot dispatch requests. The parent router remains the only router that owns request dispatch, the matcher, and the default handler.
+
+```ts
+import { createRouter, type RouteBuilder } from 'remix/router'
+import { get, route } from 'remix/routes'
+
+const adminRouteDefs = {
+  index: get('/'),
+  users: {
+    show: get('/users/:id'),
+  },
+}
+
+// Use relative route groups inside installers. These routes are registered below
+// the mount prefix when `installAdminRoutes()` runs.
+const adminRouteGroup = route(adminRouteDefs)
+
+// Use full app routes for links and redirects.
+const routes = {
+  admin: route('/admin', adminRouteDefs),
+}
+
+function installAdminRoutes<context extends AppContext>(router: RouteBuilder<context>) {
+  router.map(adminRouteGroup, {
+    actions: {
+      index() {
+        return new Response('Admin')
+      },
+    },
+  })
+
+  router.map(adminRouteGroup.users, {
+    actions: {
+      show({ params, currentUser }) {
+        return new Response(`User ${params.id} for ${currentUser.id}`)
+      },
+    },
+  })
+}
+
+let router = createRouter<AppContext>({ middleware })
+
+router.mount('/admin', installAdminRoutes)
+```
+
+Mount prefixes are route patterns. They compose with routes registered inside the installer using `joinPatterns()`, so params from the mount prefix are available to mounted handlers:
+
+```ts
+router.mount('/orgs/:orgId', (org) => {
+  org.get('/users/:userId', ({ params }) => {
+    // params is { orgId: string, userId: string }
+    return new Response(`${params.orgId}:${params.userId}`)
+  })
+})
+```
+
+When a mount prefix and child route use the same param name, the right-most route param wins, matching `route-pattern` behavior.
+
+Middleware stays on routers, controllers, and actions. If an entire route group needs auth or another boundary, put that middleware on the controllers or actions owned by the installer:
+
+```ts
+function installAdminRoutes<context extends AppContext>(router: RouteBuilder<context>) {
+  router.map(adminRouteGroup, {
+    middleware: [requireAdmin()],
+    actions: {
+      index({ admin }) {
+        return new Response(admin.id)
+      },
+    },
+  })
+}
+```
+
+Unknown paths below a mounted prefix fall through to the parent router's default handler. If a route group needs its own catch-all response, register one explicitly inside the installer.
+
 ### Declaring Routes
 
 In addition to the `{ method, pattern }` syntax shown above, the router provides a few shorthand methods that help eliminate some of the boilerplate when building complex route maps:
@@ -504,10 +583,12 @@ type Routes = typeof routes
 
 Middleware functions run code before and/or after actions. They are a powerful way to add functionality to your app.
 
+Every middleware must either return a `Response`, return the response from `next()`, or call `await next()` before it returns. Middleware that returns without calling `next()` throws at runtime.
+
 A basic logging middleware might look like this:
 
 ```ts
-import type { Middleware } from 'remix/router'
+import { type Middleware } from 'remix/router'
 
 // You can use the `Middleware` type to type middleware functions.
 function logger(): Middleware {
@@ -567,8 +648,9 @@ function loadDatabase(): Middleware<{
   value: Database
   property: 'db'
 }> {
-  return async (context) => {
+  return async (context, next) => {
     context.set(Database, await connectDatabase(), { property: 'db' })
+    return next()
   }
 }
 
@@ -580,13 +662,13 @@ router.get('/books', async (context) => {
 
 Use `context.db` (or `context.get(Database)`). If two values use the same property name, the router throws.
 
-Middleware may be used at three levels: globally on the router, on a controller, or inline on an individual action.
+Middleware has three API-owned forms: router middleware, controller middleware, and action middleware.
 
-Global middleware is added to the router when it is created using the `createRouter({ middleware })` option. This middleware runs before any routes are matched and is useful for doing things like logging, serving static files, profiling, and a variety of other things. Global middleware runs on every request, so it's important to keep them lightweight and fast.
+Router middleware is added to the router when it is created using the `createRouter({ middleware })` option. This middleware runs before any routes are matched and is useful for doing things like logging, serving static files, profiling, and a variety of other things. Router middleware runs on every request, so it's important to keep it lightweight and fast.
 
-Controller middleware runs for every direct action in a controller. Action middleware runs only for one action, whether that action is registered in a controller or directly with `router.map()` or one of the method-specific helpers like `router.get()`, `router.post()`, `router.put()`, `router.delete()`, etc. The object form for actions is `{ handler, middleware? }`, so you can omit `middleware` entirely when you do not need it.
+Controller middleware runs for every direct action in a controller. Action middleware runs only for one action, whether that action is created with `createAction()`, registered in a controller, or registered directly with `router.map()` or one of the method-specific helpers like `router.get()`, `router.post()`, `router.put()`, `router.delete()`, etc. The object form for actions is `{ handler, middleware? }`, so you can omit `middleware` entirely when you do not need it.
 
-A controller's `middleware` applies only to the direct route actions in that controller, and its `actions` object may not include nested route-map keys. Map nested route maps explicitly so each controller owns the direct route actions for one route map.
+A controller's `middleware` applies only to the direct route actions in that controller, and its `actions` object may not include nested route-map keys. This is the router's scoped middleware model: map nested route maps explicitly so each controller owns the direct route actions for one route map, and share middleware arrays between controllers that need the same boundary.
 
 ```tsx
 let routes = route({
@@ -598,21 +680,21 @@ let routes = route({
 })
 
 let router = createRouter({
-  // This middleware runs on all requests.
+  // Router middleware runs on all requests.
   middleware: [staticFiles('./public')],
 })
 
 router.map(routes.home, () => new Response('Home'))
 
 router.map(routes.admin, {
-  // This middleware applies to all actions in this controller.
+  // Controller middleware applies to all direct actions in this controller.
   middleware: [auth({ token: 'secret' })],
   actions: {
     dashboard() {
       return new Response('Dashboard')
     },
     settings: {
-      // This middleware applies only to this action.
+      // Action middleware applies only to this action.
       middleware: [requireAdmin()],
       handler() {
         return new Response('Settings')
@@ -655,17 +737,11 @@ router.get('/posts/:id', (context) => {
 
 Route params are only half of a handler's type contract. In many apps, handlers also depend on values that middleware loads into request context, like sessions, database connections, or authenticated users.
 
-`fetch-router` lets you carry that context contract through the router and into stored controllers and actions. A common pattern is to derive one app-local context type from your router middleware, augment `RouterTypes.context` with it, then use `createAction()` and `createController()` to type stored handlers.
+`fetch-router` lets you carry that context contract through the router and into direct route registration, stored controllers, and stored actions. A common pattern is to derive one application context type from your middleware, augment `RouterTypes.context` with it, then use `createAction()` and `createController()` to type stored handlers.
 
 ```ts
 import { Auth, requireAuth } from 'remix/middleware/auth'
-import {
-  createAction,
-  createController,
-  type AnyParams,
-  type ContextWithParams,
-  type MiddlewareContext,
-} from 'remix/router'
+import { createAction, createController, createRouter, type RouterContext } from 'remix/router'
 import { route } from 'remix/routes'
 import { loadDatabase } from './middleware/database.ts'
 import { loadSession } from './middleware/session.ts'
@@ -675,12 +751,12 @@ let routes = route({
 })
 
 type AuthIdentity = { id: string }
-type RootMiddleware = [ReturnType<typeof loadSession>, ReturnType<typeof loadDatabase>]
 
-type AppContext<params extends AnyParams = {}> = ContextWithParams<
-  MiddlewareContext<RootMiddleware>,
-  params
->
+export const router = createRouter({
+  middleware: [loadSession(), loadDatabase()],
+})
+
+type AppContext = RouterContext<typeof router>
 
 declare module 'remix/router' {
   interface RouterTypes {
@@ -688,19 +764,16 @@ declare module 'remix/router' {
   }
 }
 
-let accountMiddleware = [requireAuth<AuthIdentity>()] as const
-type AccountContext = MiddlewareContext<typeof accountMiddleware, AppContext>
-
-let accountAction = createAction<typeof routes.account, AccountContext>(routes.account, {
-  middleware: accountMiddleware,
+let accountAction = createAction(routes.account, {
+  middleware: [requireAuth<AuthIdentity>()],
   handler(context) {
     let auth = context.get(Auth)
     return Response.json({ id: auth.identity.id })
   },
 })
 
-let accountController = createController<typeof routes, AccountContext>(routes, {
-  middleware: accountMiddleware,
+let accountController = createController(routes, {
+  middleware: [requireAuth<AuthIdentity>()],
   actions: {
     account(context) {
       let auth = context.get(Auth)
@@ -710,11 +783,13 @@ let accountController = createController<typeof routes, AccountContext>(routes,
 })
 ```
 
-In this example, `RootMiddleware` is the middleware tuple that defines the app context contract. It should include middleware instances. When a middleware is created by a factory function like `loadSession()`, use `ReturnType<typeof loadSession>` so the type describes the middleware value that actually runs. `AccountContext` applies local account middleware on top of that base context before the handler runs.
+In this example, the router's inline middleware array defines the app context contract. `RouterContext<typeof router>` extracts the request context that the router provides, so `RouterTypes.context` can use that context without storing the middleware chain separately.
+
+Prefer plain inline arrays for `middleware` options on routers, controllers, actions, and route helpers. Inline arrays already give TypeScript enough information to infer middleware-provided context for downstream handlers, so `createAction()` and direct action objects see action middleware context, and `createController()` sees controller middleware context without `createMiddleware()`.
 
-For small apps with a stable tuple-typed runtime array, `MiddlewareContext<typeof middleware>` is a fine shortcut. For larger apps, prefer the named `RootMiddleware` and `AppContext` pattern so runtime middleware assembly and context typing can evolve independently.
+Use `createMiddleware()` only when a middleware chain is stored somewhere and its exact tuple type needs to survive that boundary. The common cases are deriving `MiddlewareContext<typeof rootMiddleware>` without a router value, exporting a reusable chain, or returning a chain from a factory. A standalone array like `let middleware = [loadSession(), loadDatabase()]` widens to a normal array, so `MiddlewareContext<typeof middleware>` cannot derive the ordered middleware context.
 
-When manually annotating stored handlers, use `Action<typeof route, Context>` for values that may be either a plain handler function or an action object with optional middleware.
+When manually annotating stored handlers with `Action<typeof route, Context>` or `Controller<typeof routes, Context>`, compose any action or controller middleware chain into `Context` with `MiddlewareContext<typeof actionOrControllerMiddleware, AppContext>`.
 
 #### Middleware Provider Guidance
 
@@ -729,7 +804,12 @@ If you're authoring a middleware package that stores values in request context,
 Apps can derive request context from the middleware tuple with `MiddlewareContext`. If they need to describe a context shape without a middleware tuple, they can use the core `ContextWithEntry` and `ContextWithEntries` helpers directly.
 
 ```ts
-import { createContextKey, type Middleware, type MiddlewareContext } from 'remix/router'
+import {
+  createContextKey,
+  createMiddleware,
+  type Middleware,
+  type MiddlewareContext,
+} from 'remix/router'
 
 // The context key that consumers will need to read from `context.get(...)`
 export const CurrentUser = createContextKey<User | null>()
@@ -747,7 +827,7 @@ export function loadCurrentUser(): Middleware<{
   }
 }
 
-let middleware = [loadCurrentUser()] as const
+let middleware = createMiddleware(loadCurrentUser())
 type AppContext = MiddlewareContext<typeof middleware>
 
 // Use context.currentUser (or context.get(CurrentUser)).

package/src/form-data-parser/README.md

@@ -7,7 +7,7 @@ A streaming `multipart/form-data` parser that solves memory issues with file upl
 - **Drop-in replacement** for `request.formData()` with streaming file upload support
 - **Minimal buffering** - processes file upload streams with minimal memory footprint
 - **Standards-based** - built on the [web Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) and [File API](https://developer.mozilla.org/en-US/docs/Web/API/File)
-- **Smart fallback** - automatically uses native `request.formData()` for non-`multipart/form-data` requests
+- **Smart fallback** - parses `application/x-www-form-urlencoded` requests with the same total size and field count limits, and uses native `request.formData()` for other form requests
 - **Storage agnostic** - works with any storage backend (local disk, S3, R2, etc.)
 
 ## Why You Need This
@@ -74,7 +74,7 @@ async function requestHandler(request: Request) {
 
 To validate the resulting `FormData` object with `remix/data-schema`, use the `remix/data-schema/form-data` helpers.
 
-To limit the overall shape of multipart requests, use the `maxHeaderSize`, `maxFileSize`, `maxFiles`, `maxParts`, and `maxTotalSize` options. By default, `parseFormData()` uses `maxFiles = 20`, `maxParts = 1000`, and `maxTotalSize = maxFiles * maxFileSize + 1 MiB`.
+To limit the overall shape of multipart requests, use the `maxHeaderSize`, `maxFileSize`, `maxFiles`, `maxParts`, and `maxTotalSize` options. For `application/x-www-form-urlencoded` requests, `maxParts` limits the number of form fields and `maxTotalSize` limits the raw request body size. By default, `parseFormData()` uses `maxFiles = 20`, `maxParts = 1000`, and `maxTotalSize = maxFiles * maxFileSize + 1 MiB`.
 
 Known limit errors are thrown directly so you can handle them with `instanceof` checks. Other failures while parsing the request body are wrapped in `FormDataParseError`, with the original error available as `error.cause`. Errors thrown or rejected by your `uploadHandler` are not wrapped.
 
@@ -106,9 +106,9 @@ try {
   } else if (error instanceof MaxFileSizeExceededError) {
     console.error(`Files may not be larger than 10 MiB`)
   } else if (error instanceof MaxPartsExceededError) {
-    console.error(`Request may not contain more than 25 multipart parts`)
+    console.error(`Request may not contain more than 25 form fields or multipart parts`)
   } else if (error instanceof MaxTotalSizeExceededError) {
-    console.error(`Multipart request may not exceed 12 MiB of total content`)
+    console.error(`Form data request may not exceed 12 MiB of total content`)
   } else if (error instanceof FormDataParseError) {
     console.error(`Could not parse form data:`, error.cause ?? error)
   } else {

package/src/mime/README.md

@@ -86,12 +86,19 @@ mimeTypeToContentType('image/png') // 'image/png'
 Registers or overrides a MIME type for one or more file extensions.
 
 ```ts
-import { defineMimeType } from 'remix/mime'
+import { defineMimeType, detectMimeType } from 'remix/mime'
 
 defineMimeType({
   extensions: ['myformat'],
   mimeType: 'application/x-myformat',
 })
+
+defineMimeType({
+  extensions: ['be.pit'],
+  mimeType: 'application/x-be-pit-document',
+})
+
+detectMimeType('filename.be.pit') // 'application/x-be-pit-document'
 ```
 
 You can also optionally configure the charset and whether the MIME type is compressible:

package/src/node-fetch-server/README.md

@@ -8,7 +8,8 @@ Build Node.js servers with web-standard Fetch API primitives. `node-fetch-server
 - **Node.js HTTP Integration** - Works directly with `node:http`, `node:https`, and `node:http2`
 - **Streaming Support** - Response support with `ReadableStream`
 - **Custom Hostname** - Configuration for deployment flexibility
-- **Client Info** - Access to client connection info (IP address, port)
+- **Proxy Header Support** - Opt in to trusted `Forwarded`, `X-Forwarded-Host`, `X-Forwarded-Proto`, and `X-Forwarded-For` headers
+- **Client Info** - Access to client connection info (IP address, port, and trusted proxy address)
 - **TypeScript** - Full TypeScript support with type definitions
 
 ## Installation
@@ -146,9 +147,34 @@ let server = http.createServer(createRequestListener(handler, { host: hostname }
 server.listen(3000)
 ```
 
+### Trusted Proxy Headers
+
+If your app runs behind a trusted reverse proxy, Node.js sees the proxy connection instead of the original client connection. Enable `trustProxy` to use trusted proxy headers when constructing `request.url` and client information:
+
+- `Forwarded: proto` and `X-Forwarded-Proto` can provide the original request protocol.
+- `Forwarded: host` and `X-Forwarded-Host` can provide the original request host.
+- `Forwarded: for` and `X-Forwarded-For` can provide the original client address.
+
+Only enable this option when your server is reachable exclusively through a trusted proxy that overwrites these headers. Otherwise, clients can spoof the host, protocol, and client address.
+
+```ts
+import * as http from 'node:http'
+import { createRequestListener } from 'remix/node-fetch-server'
+
+let server = http.createServer(
+  createRequestListener(handler, {
+    trustProxy: true,
+  }),
+)
+
+server.listen(3000)
+```
+
+When `host` or `protocol` are set, those fixed options take precedence over trusted proxy headers.
+
 ### Accessing Client Information
 
-Get client connection details (IP address, port) for logging or security:
+Get client connection details (IP address, port) for logging or security. When `trustProxy` is enabled, `client.address` uses trusted `Forwarded` or `X-Forwarded-For` values when present:
 
 ```ts
 import { type FetchHandler } from 'remix/node-fetch-server'

package/src/route-pattern/README.md

@@ -65,6 +65,8 @@ createHref('http(s)://:region.cdn.com/assets/*file.:ext', {
 
 For in-depth reference, visit the [`route-pattern` API docs](https://api.remix.run/api/remix/route-pattern)
 
+Examples in this README use `remix/route-pattern/*` imports. The same APIs are also available from the direct package entrypoints: `@remix-run/route-pattern`, `@remix-run/route-pattern/href`, `@remix-run/route-pattern/match`, `@remix-run/route-pattern/join`, and `@remix-run/route-pattern/specificity`.
+
 ## Pattern syntax
 
 ### Protocol
@@ -149,6 +151,8 @@ docsMatcher.match(url)?.params
 // Type safe params     ^? { tenant: string | undefined, path: string, ext: string } | undefined
 ```
 
+Matchers accept absolute URL strings or `URL` objects. Relative strings such as `/blog/v3` are not accepted because matching uses the platform `URL` parser; wrap relative paths with a known origin before matching them.
+
 ### Match against multiple patterns
 
 Use `createMultiMatcher` when you need to match many patterns and attach your own data to each match.
@@ -172,17 +176,38 @@ matcher.match('https://example.com/api/v2/users/profile')
 
 The matched pattern is only known at runtime, so matched `params` are not inferred when matching with `createMultiMatcher`.
 
+Each match returns:
+
+- `url`: the `URL` object that was matched
+- `pattern`: the matched `RoutePattern`
+- `data`: the data attached with `matcher.add(pattern, data)`
+- `params`: captured param values
+- `paramsMeta`: hostname and pathname param metadata
+
+`paramsMeta.hostname` and `paramsMeta.pathname` are arrays of `{ type, name, value, begin, end }` entries. The offsets are measured after URL normalization. A pattern with no hostname matches any hostname, represented in `paramsMeta.hostname` as an unnamed wildcard entry.
+
+Set `ignoreCase: true` to make pathname matching case-insensitive. Hostname matching is always case-insensitive, and search constraints are always case-sensitive.
+
+```ts
+let matcher = createMatcher('/Docs/:slug', { ignoreCase: true })
+
+matcher.match('https://example.com/docs/Intro')?.params
+// { slug: 'Intro' }
+```
+
 ### Ranking matches by specificity
 
 When multiple patterns match the same URL, `route-pattern` chooses the most specific match deterministically. Matches are ranked left-to-right, character-by-character:
 
+- Explicit protocol and port constraints are more specific than omitted constraints.
+- Static hostnames are more specific than dynamic hostnames, which are more specific than omitted hostnames.
 - Static characters are more specific than variables.
 - Variables are more specific than wildcards.
 - Earliest difference decides the winner.
 
 This is the same ranking used by `createMultiMatcher`.
 
-For advanced use cases, `/specificity` provides comparison utilities: `lessThan`, `greaterThan`, `equal`, `descending`, `ascending`, `compare`. For example:
+For advanced use cases, `/specificity` provides comparison utilities: `lessThan`, `greaterThan`, `equal`, `descending`, `ascending`, `compare`. `lessThan(a, b)` returns `true` when match `a` is less specific than match `b`. For example:
 
 ```ts
 import { createMultiMatcher } from 'remix/route-pattern/match'
@@ -226,6 +251,10 @@ createHref('blog/:slug?ref=docs', { slug: 'v3' }, { utm_source: 'newsletter' })
 // '/blog/v3?utm_source=newsletter&ref=docs'
 ```
 
+`createHref()` throws `CreateHrefError` when it cannot safely generate an href. The error exposes stable structured details on `error.details`; the string message is for humans.
+
+Common failures include missing required params, nameless wildcards, invalid hostname params, empty pathname variables, and origin patterns that specify a protocol or port without a concrete hostname.
+
 **Note:** optional groups without params are included in the generated href:
 
 ```ts
@@ -238,25 +267,41 @@ createHref('products(.json)')
 
 ## Parse & stringify patterns
 
-You can explicitly parse and stringify patterns:
+You can explicitly parse and stringify patterns. Create a `RoutePattern` with `RoutePattern.parse` and use the methods and helpers below instead of reading parsed token internals.
 
 ```ts
-import { RoutePattern } from 'remix/route-pattern'
+import { getRoutePatternCaptures, RoutePattern } from 'remix/route-pattern'
 
-let pattern = RoutePattern.parse('://example.com/blog/:slug')
+let pattern = RoutePattern.parse('://:tenant.example.com/blog/:slug(/*path)')
 //  ^? RoutePattern
 
 pattern.toString()
-// '://example.com/blog/:slug'
+// '://:tenant.example.com/blog/:slug(/*path)'
 
 pattern.toJSON()
-// { hostname: 'example.com', pathname: 'blog/:slug', ... }
+// { hostname: ':tenant.example.com', pathname: 'blog/:slug(/*path)', ... }
+
+getRoutePatternCaptures(pattern)
+// [
+//   { part: 'hostname', type: ':', name: 'tenant', optional: false },
+//   { part: 'pathname', type: ':', name: 'slug', optional: false },
+//   { part: 'pathname', type: '*', name: 'path', optional: true },
+// ]
 ```
 
 All APIs that take a `pattern` arg accept `string` or a parsed `RoutePattern`.
 
 **TIP:** For high-performance scenarios, you can parse patterns ahead of time to avoid reparsing them on every call.
 
+`RoutePattern.toJSON()` returns a `RoutePatternJSON` object with serialized `protocol`, `hostname`, `port`, `pathname`, and `search` fields. `RoutePattern.parse()` throws `ParseError` for malformed sources; the error exposes stable `type`, `source`, and `index` fields.
+
+The public support types are:
+
+- `RoutePatternCapture` from `remix/route-pattern`
+- `RoutePatternJSON` from `remix/route-pattern`
+- `CreateHrefErrorDetails` from `remix/route-pattern/href`
+- `MatchParamMeta` from `remix/route-pattern/match`
+
 ## Combine patterns
 
 `joinPatterns` builds a new pattern from a base pattern.

package/src/session/README.md

@@ -126,7 +126,7 @@ This will clear all session data from storage the next time it is saved. It also
 
 Several strategies are provided out of the box for storing session data across requests, depending on your needs.
 
-A session storage object must always be initialized with a _signed_ session cookie. This is used to identify the session and to store the session data in the response.
+Session storage objects read and save cookie values. Use the `session` middleware with a signed `Cookie` to parse the incoming `Cookie` header, expose the session on request context, and serialize any saved value back into a `Set-Cookie` response header.
 
 #### Filesystem Storage
 

package/src/test/README.md

@@ -9,6 +9,7 @@ A test framework for JavaScript and TypeScript projects.
 - Playwright E2E testing via `t.serve`
 - In-browser component testing (pair with `render` from `remix/ui/test`)
 - Mock functions and method spies via `t.mock.fn` / `t.mock.method`
+- Per-test and hook timeouts with `t.signal` abort support
 - Unified code coverage reporting across unit and E2E tests
 - Watch mode
 - Config file support (`remix-test.config.ts`)
@@ -193,6 +194,11 @@ describe('My Test Suite', () => {
   afterEach(() => {})
 
   it('tests something', () => {})
+  it('skips with a reason', { skip: 'requires API credentials' }, () => {})
+  it('tracks planned work', { todo: 'add retry coverage' }, () => {})
+  it('fails if it takes too long', { timeout: 5_000 }, async (t) => {
+    await fetchSomething({ signal: t.signal })
+  })
   it('tests something else', () => {})
 })
 ```
@@ -229,6 +235,9 @@ Each test callback receives a `TestContext` (`t`) as its first argument with hel
 ```ts
 // from 'remix/test'
 interface TestContext {
+  // Aborts when the test times out or when the user-provided test signal aborts
+  signal: AbortSignal
+
   // Register a cleanup function to run after the test completes
   after(fn: () => void): void
 
@@ -284,6 +293,24 @@ it('cleanup', (t) => {
 })
 ```
 
+#### Timeouts and Signals
+
+Pass `{ timeout: ms }` to `it()` or after any lifecycle hook callback to fail that work if it takes too long. Timed-out tests abort `t.signal`, so async code that accepts an `AbortSignal` can cancel promptly.
+
+```ts
+it('loads data', { timeout: 5_000 }, async (t) => {
+  let response = await fetch('/api/data', { signal: t.signal })
+  assert.equal(response.status, 200)
+})
+
+beforeEach(
+  async () => {
+    await resetDatabase()
+  },
+  { timeout: 1_000 },
+)
+```
+
 #### Fake Timers
 
 `t.useFakeTimers()` replaces the global timer functions (`setTimeout`, `setInterval`, etc.) with controllable fakes that are automatically restored after the test. It works in any test environment — server unit tests, browser tests, or E2E setup code.