remix 3.0.0-rc.3 → 3.0.0-rc.5

package/INDEX.md

@@ -12,8 +12,15 @@ Search this generated index by task, export name, or description. Use the guides
 | [Rendering UI](guides/04-rendering-ui.md) | How to build pages from Remix components, props, context, document shells, styles, and first-party UI. |
 | [Interactivity](guides/05-interactivity.md) | How server-rendered UI hydrates, handles events, connects components to application models, navigates, and cancels stale work. |
 | [Streaming UI with Frames](guides/06-streaming-ui-with-frames.md) | How to stream and reload route-owned UI with Frame, fallbacks, and server and browser frame resolvers. |
-| [Animation](guides/07-animation.md) | The CSS-first animation model and Remix UI helpers for motion that respects rendering state. |
+| [Animation](guides/07-animation.md) | The CSS-first animation model and Remix component helpers for motion that respects rendering state. |
+| [Data and Validation](guides/08-data-and-validation.md) | How Remix validates inputs, defines relational data, queries databases, and runs SQL migrations. |
+| [Forms and Mutations](guides/09-forms-and-mutations.md) | How native forms, action responses, validation failures, redirects, and enhanced mutations fit together. |
+| [Auth, Sessions, and Security](guides/10-auth-sessions-security.md) | How Remix stores per-browser state, resolves identity, protects routes, and defends browser request boundaries. |
+| [Files and Assets](guides/11-files-and-assets.md) | How Remix serves static files and source assets, accepts bounded uploads, stores files, and returns HTTP file responses. |
+| [Errors and Cancellation](guides/12-errors-and-cancellation.md) | How expected HTTP failures, uncaught server errors, rendering failures, client runtime errors, and aborted work propagate through Remix. |
 | [Testing](guides/13-testing.md) | How to choose a test boundary and test Remix routes, stateful request flows, components, and end-to-end behavior. |
+| [CLI and Tooling](guides/14-cli-and-tooling.md) | The Remix command-line workflow for creating, inspecting, testing, checking, and running TypeScript projects. |
+| [Production](guides/15-production.md) | How to configure, start, cache, observe, and shut down a Remix application in production. |
 
 ## Package APIs
 
@@ -24,6 +31,10 @@ Exports covered by the same README are grouped together.
 | `remix/assert` | Node assert-compatible utilities for any JavaScript environment | [README](src/assert/README.md) |
 | `remix/assets`<br>`remix/assets/types/hmr` | Fetch-based server for compiling browser JS/TS and CSS assets on demand | [README](src/assets/README.md) |
 | `remix/auth` | Browser login, OAuth, and OIDC helpers for Remix | [README](src/auth/README.md) |
+| `remix/component`<br>`remix/component/dev/refresh`<br>`remix/component/jsx-dev-runtime`<br>`remix/component/jsx-runtime` | Component runtime with server rendering and browser hydration | [README](src/component/README.md) |
+| `remix/component-hmr`<br>`remix/component-hmr/assets`<br>`remix/component-hmr/node`<br>`remix/component-hmr/runtime/browser`<br>`remix/component-hmr/runtime/server` | Hot module replacement runtime and transforms for Remix components | [README](src/component-hmr/README.md) |
+| `remix/component/server` | Component runtime with server rendering and browser hydration | [README](src/component/server/README.md) |
+| `remix/component/test` | Component runtime with server rendering and browser hydration | [README](src/component/test/README.md) |
 | `remix/cookie` | A toolkit for working with cookies in JavaScript | [README](src/cookie/README.md) |
 | `remix/data-schema`<br>`remix/data-schema/checks`<br>`remix/data-schema/coerce`<br>`remix/data-schema/form-data`<br>`remix/data-schema/lazy` | Tiny, standards-aligned schema validation | [README](src/data-schema/README.md) |
 | `remix/data-table`<br>`remix/data-table/cli`<br>`remix/data-table/migrations`<br>`remix/data-table/migrations/node`<br>`remix/data-table/operators`<br>`remix/data-table/sql-helpers` | A typed, relational query toolkit for JavaScript | [README](src/data-table/README.md) |
@@ -47,7 +58,7 @@ Exports covered by the same README are grouped together.
 | `remix/middleware/form-data` | Middleware for parsing FormData from request bodies | [README](src/form-data-middleware/README.md) |
 | `remix/middleware/logger` | Middleware for logging HTTP requests and responses | [README](src/logger-middleware/README.md) |
 | `remix/middleware/method-override` | Middleware for overriding HTTP request methods from form data | [README](src/method-override-middleware/README.md) |
-| `remix/middleware/render` | Conventional Remix UI and custom request-scoped render middleware | [README](src/render-middleware/README.md) |
+| `remix/middleware/render` | Conventional Remix component and custom request-scoped render middleware | [README](src/render-middleware/README.md) |
 | `remix/middleware/session` | Middleware for managing sessions with cookie-based storage | [README](src/session-middleware/README.md) |
 | `remix/middleware/static` | Middleware for serving static files from the filesystem | [README](src/static-middleware/README.md) |
 | `remix/mime` | Utilities for working with MIME types | [README](src/mime/README.md) |
@@ -66,22 +77,3 @@ Exports covered by the same README are grouped together.
 | `remix/tar-parser` | A fast, efficient parser for tar streams in any JavaScript environment | [README](src/tar-parser/README.md) |
 | `remix/terminal` | Terminal output utilities for JavaScript libraries and CLIs | [README](src/terminal/README.md) |
 | `remix/test`<br>`remix/test/cli` | A test framework for JavaScript and TypeScript projects | [README](src/test/README.md) |
-| `remix/ui`<br>`remix/ui/dev/refresh`<br>`remix/ui/jsx-dev-runtime`<br>`remix/ui/jsx-runtime` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/README.md) |
-| `remix/ui-hmr`<br>`remix/ui-hmr/assets`<br>`remix/ui-hmr/node`<br>`remix/ui-hmr/runtime/browser`<br>`remix/ui-hmr/runtime/server` | Hot module replacement runtime and transforms for Remix UI components | [README](src/ui-hmr/README.md) |
-| `remix/ui/accordion`<br>`remix/ui/accordion/primitives` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/accordion/README.md) |
-| `remix/ui/anchor` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/anchor/README.md) |
-| `remix/ui/animation` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/animation/README.md) |
-| `remix/ui/breadcrumbs` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/breadcrumbs/README.md) |
-| `remix/ui/button` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/button/README.md) |
-| `remix/ui/checkbox` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/checkbox/README.md) |
-| `remix/ui/combobox`<br>`remix/ui/combobox/primitives` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/combobox/README.md) |
-| `remix/ui/input` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/input/README.md) |
-| `remix/ui/listbox` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/listbox/README.md) |
-| `remix/ui/menu`<br>`remix/ui/menu/primitives` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/menu/README.md) |
-| `remix/ui/popover` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/popover/README.md) |
-| `remix/ui/radio` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/radio/README.md) |
-| `remix/ui/select`<br>`remix/ui/select/primitives` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/select/README.md) |
-| `remix/ui/server` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/server/README.md) |
-| `remix/ui/tabs`<br>`remix/ui/tabs/primitives` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/tabs/README.md) |
-| `remix/ui/test` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/test/README.md) |
-| `remix/ui/toggle`<br>`remix/ui/toggle/primitives` | UI runtime, headless primitives, and styled components for Remix | [README](src/ui/toggle/README.md) |

package/dist/component/dev/refresh.d.ts

@@ -0,0 +1,2 @@
+export * from '@remix-run/component/dev/refresh';
+//# sourceMappingURL=refresh.d.ts.map

package/dist/component/dev/refresh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refresh.d.ts","sourceRoot":"","sources":["../../../src/component/dev/refresh.ts"],"names":[],"mappings":"AACA,cAAc,kCAAkC,CAAA"}

package/dist/{ui → component}/dev/refresh.js

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/dev/refresh';
+export * from '@remix-run/component/dev/refresh';

package/dist/component/jsx-dev-runtime.d.ts

@@ -0,0 +1,2 @@
+export * from '@remix-run/component/jsx-dev-runtime';
+//# sourceMappingURL=jsx-dev-runtime.d.ts.map

package/dist/component/jsx-dev-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-dev-runtime.d.ts","sourceRoot":"","sources":["../../src/component/jsx-dev-runtime.ts"],"names":[],"mappings":"AACA,cAAc,sCAAsC,CAAA"}

package/dist/{ui → component}/jsx-dev-runtime.js

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/jsx-dev-runtime';
+export * from '@remix-run/component/jsx-dev-runtime';

package/dist/component/jsx-runtime.d.ts

@@ -0,0 +1,2 @@
+export * from '@remix-run/component/jsx-runtime';
+//# sourceMappingURL=jsx-runtime.d.ts.map

package/dist/component/jsx-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.d.ts","sourceRoot":"","sources":["../../src/component/jsx-runtime.ts"],"names":[],"mappings":"AACA,cAAc,kCAAkC,CAAA"}

package/dist/{ui → component}/jsx-runtime.js

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/jsx-runtime';
+export * from '@remix-run/component/jsx-runtime';

package/dist/component/server.d.ts

@@ -0,0 +1,2 @@
+export * from '@remix-run/component/server';
+//# sourceMappingURL=server.d.ts.map

package/dist/component/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/component/server.ts"],"names":[],"mappings":"AACA,cAAc,6BAA6B,CAAA"}

package/dist/{ui → component}/server.js

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/server';
+export * from '@remix-run/component/server';

package/dist/component/test.d.ts

@@ -0,0 +1,2 @@
+export * from '@remix-run/component/test';
+//# sourceMappingURL=test.d.ts.map

package/dist/component/test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.d.ts","sourceRoot":"","sources":["../../src/component/test.ts"],"names":[],"mappings":"AACA,cAAc,2BAA2B,CAAA"}

package/dist/{ui → component}/test.js

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/test';
+export * from '@remix-run/component/test';

package/dist/component-hmr/assets.d.ts

@@ -0,0 +1,2 @@
+export * from '@remix-run/component-hmr/assets';
+//# sourceMappingURL=assets.d.ts.map

package/dist/component-hmr/assets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assets.d.ts","sourceRoot":"","sources":["../../src/component-hmr/assets.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAA"}

package/dist/{ui-hmr.js → component-hmr/assets.js}

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui-hmr';
+export * from '@remix-run/component-hmr/assets';

package/dist/component-hmr/node.d.ts

@@ -0,0 +1,3 @@
+import '@remix-run/component-hmr/node';
+export {};
+//# sourceMappingURL=node.d.ts.map

package/dist/component-hmr/node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../src/component-hmr/node.ts"],"names":[],"mappings":"AACA,OAAO,+BAA+B,CAAA;AACtC,OAAO,EAAE,CAAA"}

package/dist/{ui-hmr → component-hmr}/node.js

@@ -1,3 +1,3 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-import '@remix-run/ui-hmr/node';
+import '@remix-run/component-hmr/node';
 export {};

package/dist/component-hmr/runtime/browser.d.ts

@@ -0,0 +1,2 @@
+export * from '@remix-run/component-hmr/runtime/browser';
+//# sourceMappingURL=browser.d.ts.map

package/dist/component-hmr/runtime/browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../../src/component-hmr/runtime/browser.ts"],"names":[],"mappings":"AACA,cAAc,0CAA0C,CAAA"}

package/dist/{ui-hmr → component-hmr}/runtime/browser.js

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui-hmr/runtime/browser';
+export * from '@remix-run/component-hmr/runtime/browser';

package/dist/component-hmr/runtime/server.d.ts

@@ -0,0 +1,2 @@
+export * from '@remix-run/component-hmr/runtime/server';
+//# sourceMappingURL=server.d.ts.map

package/dist/component-hmr/runtime/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../src/component-hmr/runtime/server.ts"],"names":[],"mappings":"AACA,cAAc,yCAAyC,CAAA"}

package/dist/{ui-hmr → component-hmr}/runtime/server.js

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui-hmr/runtime/server';
+export * from '@remix-run/component-hmr/runtime/server';

package/dist/component-hmr.d.ts

@@ -0,0 +1,2 @@
+export * from '@remix-run/component-hmr';
+//# sourceMappingURL=component-hmr.d.ts.map

package/dist/component-hmr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-hmr.d.ts","sourceRoot":"","sources":["../src/component-hmr.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAA"}

package/dist/{ui-hmr/assets.js → component-hmr.js}

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui-hmr/assets';
+export * from '@remix-run/component-hmr';

package/dist/component.d.ts

@@ -0,0 +1,2 @@
+export * from '@remix-run/component';
+//# sourceMappingURL=component.d.ts.map

package/dist/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA"}

package/dist/{ui/anchor.js → component.js}

@@ -1,2 +1,2 @@
 // IMPORTANT: This file is auto-generated, please do not edit manually.
-export * from '@remix-run/ui/anchor';
+export * from '@remix-run/component';

package/dist/fetch-router.d.ts

@@ -1,7 +1,5 @@
+import type { RouterTypes as RemixRouterTypes } from './index.ts';
 export * from '@remix-run/fetch-router';
-export interface RouterTypes {
-}
-type RemixRouterTypes = RouterTypes;
 declare module '@remix-run/fetch-router' {
     interface RouterTypes extends RemixRouterTypes {
     }

package/dist/fetch-router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-router.d.ts","sourceRoot":"","sources":["../src/fetch-router.ts"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAA;AAEvC,MAAM,WAAW,WAAW;CAAG;AAC/B,KAAK,gBAAgB,GAAG,WAAW,CAAA;AAEnC,OAAO,QAAQ,yBAAyB,CAAC;IACvC,UAAU,WAAY,SAAQ,gBAAgB;KAAG;CAClD"}
+{"version":3,"file":"fetch-router.d.ts","sourceRoot":"","sources":["../src/fetch-router.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,YAAY,CAAA;AACjE,cAAc,yBAAyB,CAAA;AAEvC,OAAO,QAAQ,yBAAyB,CAAC;IACvC,UAAU,WAAY,SAAQ,gBAAgB;KAAG;CAClD"}

package/dist/fetch-router.js

@@ -1,2 +1 @@
-// IMPORTANT: This file is auto-generated, please do not edit manually.
 export * from '@remix-run/fetch-router';

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+/**
+ * Ambient router type configuration for application-wide defaults.
+ *
+ * Apps may augment this interface to define the default request context used by
+ * `createAction()`, `createController()`, and `getContext()`.
+ * Apps with multiple routers should pass explicit context types instead.
+ *
+ * @example
+ * ```ts
+ * declare module 'remix' {
+ *   interface RouterTypes {
+ *     context: AppContext
+ *   }
+ * }
+ * ```
+ */
+export interface RouterTypes {}

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,WAAW;CAAG"}

package/dist/index.js

@@ -0,0 +1 @@
+export {};

package/guides/01-start-here.md

@@ -13,7 +13,7 @@ These APIs ship together through focused subpath imports from the `remix` packag
 
 The design of Remix comes from six core principles:
 
-1. **Agent-First Development.** Remix optimizes source code, documentation, tooling, and abstractions for LLMs, and provides primitives for using models inside the products you build.
+1. **Model-First Development.** Remix optimizes source code, documentation, tooling, and abstractions for LLMs, and provides primitives for using models inside the products you build.
 2. **Build on Web APIs.** Remix builds on `Request`, `Response`, `URL`, `FormData`, headers, cookies, and JavaScript because shared platform APIs reduce context switching across the full stack while keeping your application portable.
 3. **Religiously Runtime.** Remix APIs do not depend on bundlers, type generation, or static analysis. Routes, middleware, controllers, and tests should run as ordinary runtime code.
 4. **Avoid Dependencies.** Remix chooses dependencies carefully, wraps them behind its own boundaries, and works toward replacing them with focused packages when the framework needs long-term control.
@@ -78,6 +78,7 @@ my-remix-app/
     ├── router.ts              # middleware, routes, and controller mapping
     ├── middleware/            # request middleware and context providers
     ├── actions/               # controllers, route actions, and route-local UI
+    │   ├── controller.tsx     # root route controller
     │   ├── document.tsx       # app document shell
     │   └── public/
     │       └── entry.ts       # starts the browser runtime
@@ -93,9 +94,7 @@ import { createRequestListener } from "remix/node-fetch-server";
 
 import { router } from "./app/router.ts";
 
-const requestListener = createRequestListener(async (request) => {
-  return await router.fetch(request);
-});
+const requestListener = createRequestListener(router.fetch);
 const server = http.createServer(requestListener);
 
 server.listen(44100, () => {
@@ -193,14 +192,14 @@ The [Routing and Controllers](/routing-and-controllers/) chapter covers route ma
 
 Let's make this album page a little more interesting by returning HTML from a Remix component.
 
-Remix UI uses JSX with a two-phase component model. A component is a function that receives a `handle` and returns another function that renders JSX. The outer function is setup: it runs once when the component is created, so normal JavaScript variables declared there can hold local state. The returned function is render: it runs on the first render and every update afterward.
+A component is a function that receives a `handle` and returns another function that renders JSX. The outer function is setup: it runs once when the component is created, so normal JavaScript variables declared there can hold local state. The returned function is render: it runs on the first render and every update afterward.
 
 We'll come back to the component model later. If you want the full model now, check out the [Rendering UI](/rendering-ui/) chapter.
 
 ```tsx
 function MyComponent(handle) {
   // Setup phase: runs once when this component is created.
-  // The handle gives the component access to props and other Remix UI APIs.
+  // The handle gives the component access to props and other Remix component APIs.
 
   return () => {
     // Render phase: runs on the first render and every update afterward.
@@ -218,7 +217,7 @@ touch app/actions/albums/show-page.tsx
 ```
 
 ```tsx filename=app/actions/albums/show-page.tsx
-import type { Handle } from "remix/ui";
+import type { Handle } from "remix/component";
 
 import { Document } from "../document.tsx";
 
@@ -321,7 +320,7 @@ export default createController(routes.albums, {
 Let's tweak our `AlbumPage` component to display the album data:
 
 ```tsx filename=app/actions/albums/show-page.tsx lines=[3,6,8,11,13-16]
-import type { Handle } from "remix/ui";
+import type { Handle } from "remix/component";
 
 import type { Album } from "./data.ts";
 import { Document } from "../document.tsx";
@@ -349,8 +348,8 @@ Now the page displays the album title, artist, and year.
 Center it and add a little spacing with the `css` function and `mix` prop. The [Rendering UI](/rendering-ui/) chapter covers this helper and prop in more detail.
 
 ```tsx filename=app/actions/albums/show-page.tsx lines=[2,14-18,20]
-import type { Handle } from "remix/ui";
-import { css } from "remix/ui";
+import type { Handle } from "remix/component";
+import { css } from "remix/component";
 
 import type { Album } from "./data.ts";
 import { Document } from "../document.tsx";
@@ -455,8 +454,8 @@ router.map(routes.albums.edit, albumsEditController);
 Now we can create the form page. It's a very simple form that displays the existing data and submits a POST request to our edit action.
 
 ```tsx filename=app/actions/albums/edit/page.tsx
-import { css } from "remix/ui";
-import type { Handle } from "remix/ui";
+import { css } from "remix/component";
+import type { Handle } from "remix/component";
 
 import { routes } from "../../../routes.ts";
 import { Document } from "../../document.tsx";
@@ -549,7 +548,7 @@ export const router = createRouter({
 
 export type AppContext = RouterContext<typeof router>;
 
-declare module "remix/router" {
+declare module "remix" {
   interface RouterTypes {
     context: AppContext;
   }
@@ -607,7 +606,7 @@ export default createController(routes.albums.edit, {
 });
 ```
 
-The `action` route action validates the parsed Web `FormData`, returns an explicit response for invalid input or a missing album, and redirects back to the album page after a successful update. The [Data and Validation](/data-and-validation/) chapter shows how to render field-level validation errors back into a form.
+The `action` route action validates the parsed Web `FormData`, returns an explicit response for invalid input or a missing album, and redirects back to the album page after a successful update. The [Forms and Mutations](/forms-and-mutations/) chapter shows how to render field-level validation errors back into a form.
 
 Now we can update our album data and set it to the correct year.
 
@@ -630,13 +629,13 @@ mkdir -p app/actions/albums/edit/public
 touch app/actions/albums/edit/public/album-edit-form.tsx
 ```
 
-The colocated `public/` directory is the explicit browser-source boundary. The template's asset server allows source beneath `app/**/public/**`, so Remix can turn this component and its local dependencies into browser modules. Keep those local dependencies inside the same `public/` directory; `app/routes.ts` is allowed separately for type-safe links. The template also loads `app/actions/public/entry.ts`, which starts the Remix UI client runtime. The [Files and Assets](/files-and-assets/) chapter goes deeper into this bundlerless setup.
+The colocated `public/` directory is the explicit browser-source boundary. The template's asset server allows source beneath `app/**/public/**`, so Remix can turn this component and its local dependencies into browser modules. Keep those local dependencies inside the same `public/` directory; `app/routes.ts` is allowed separately for type-safe links. The template also loads `app/actions/public/entry.ts`, which starts the Remix component client runtime. The [Files and Assets](/files-and-assets/) chapter goes deeper into this bundlerless setup.
 
 Now that we have a place for the form to live, let's pull it into its own component.
 
 ```tsx filename=app/actions/albums/edit/public/album-edit-form.tsx
-import { css } from "remix/ui";
-import type { Handle } from "remix/ui";
+import { css } from "remix/component";
+import type { Handle } from "remix/component";
 
 import { routes } from "../../../../routes.ts";
 
@@ -686,8 +685,8 @@ export function AlbumEditForm(handle: Handle<{ album: Album }>) {
 Let's update the edit page to render this new `AlbumEditForm` component:
 
 ```tsx filename=app/actions/albums/edit/page.tsx lines=[4,16]
-import type { Handle } from "remix/ui";
-import { css } from "remix/ui";
+import type { Handle } from "remix/component";
+import { css } from "remix/component";
 
 import { AlbumEditForm } from "./public/album-edit-form.tsx";
 import { Document } from "../../document.tsx";
@@ -714,8 +713,8 @@ Everything should look like it did before.
 Next mark the form as a client entry. [`import.meta.url`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta) tells our asset server which source file should be turned into a browser-loadable module:
 
 ```tsx filename=app/actions/albums/edit/public/album-edit-form.tsx lines=[1,13-15,18]
-import { clientEntry, css } from "remix/ui";
-import type { Handle } from "remix/ui";
+import { clientEntry, css } from "remix/component";
+import type { Handle } from "remix/component";
 
 import { routes } from "../../../../routes.ts";
 
@@ -753,11 +752,11 @@ export const AlbumEditForm = clientEntry(
 );
 ```
 
-When the form submits, we flip the `pending` variable from `false` to `true` and call `handle.update()`. `handle.update()` tells Remix UI to render this component again with the new local state. To listen for the submit, we add an event listener via the `on` helper and pass an array into the `mix` prop.
+When the form submits, we flip the `pending` variable from `false` to `true` and call `handle.update()`. `handle.update()` tells the component runtime to render this component again with the new local state. To listen for the submit, we add an event listener via the `on` helper and pass an array into the `mix` prop.
 
 ```tsx filename=app/actions/albums/edit/public/album-edit-form.tsx lines=[1,25,27-31,34-36]
-import { clientEntry, css, on } from "remix/ui";
-import type { Handle } from "remix/ui";
+import { clientEntry, css, on } from "remix/component";
+import type { Handle } from "remix/component";
 
 import { routes } from "../../../../routes.ts";
 

package/guides/02-routing-and-controllers.md

@@ -46,7 +46,7 @@ Path variables are one part of Remix's route pattern syntax. Patterns can also i
 // matches /docs/v2/guides/routing/route-maps.html?preview=1
 ```
 
-You do not need to memorize Remix's route pattern syntax to follow this guide. The [`route-pattern` overview](https://api.remix.run/api/remix/route-pattern/overview/) covers the full grammar and the lower-level `remix/route-pattern/href` and `remix/route-pattern/match` APIs.
+You do not need to memorize Remix's route pattern syntax to follow this guide. The [`route-pattern` overview](../src/route-pattern/README.md) covers the full grammar and the lower-level `remix/route-pattern/href` and `remix/route-pattern/match` APIs.
 
 Finally, the `edit` branch has two leaves at the same URL: `index` handles `GET` and `action` handles `POST`.
 
@@ -148,7 +148,7 @@ export const routes = route({
 // routes.albums.create -> POST   /albums
 ```
 
-These helpers produce ordinary route maps and leaves, so you can nest them with hand-written definitions. Pass a map to `createController(...)`, then register it with `router.map(...)` just as you would a hand-written map. The [`remix/router` overview](https://api.remix.run/api/remix/router/overview/) covers the full route builder API.
+These helpers produce ordinary route maps and leaves, so you can nest them with hand-written definitions. Pass a map to `createController(...)`, then register it with `router.map(...)` just as you would a hand-written map. The [`remix/router` overview](../src/fetch-router/README.md) covers the full route builder API.
 
 ## Controllers and actions
 
@@ -226,7 +226,7 @@ return context.render(<AlbumPage album={album} />);
 
 The result is still an ordinary Web `Response`. An action can render a page, return text or JSON, redirect the browser, send a file, or return an error response.
 
-Expected outcomes such as invalid input, conflicts, and missing records should also return a `Response` with the appropriate status. Reserve thrown errors for unexpected failures. If an action or middleware throws, `router.fetch(...)` rejects so the server boundary can log the error and return a `500` response. The [Errors and Error Boundaries](/errors-and-error-boundaries/) chapter covers that path in detail.
+Expected outcomes such as invalid input, conflicts, and missing records should also return a `Response` with the appropriate status. Reserve thrown errors for unexpected failures. If an action or middleware throws, `router.fetch(...)` rejects so the server boundary can log the error and return a `500` response. The [Errors and Cancellation](/errors-and-cancellation/) chapter covers that path in detail.
 
 A text response can be as simple as:
 
@@ -245,7 +245,7 @@ import { routes } from "../../../routes.ts";
 return redirect(routes.albums.show.href({ albumId: context.params.albumId }), 303);
 ```
 
-For HTML outside the Remix UI render pipeline, the `html` template tag escapes interpolated values and `createHtmlResponse(...)` sets the HTML content type and adds a doctype:
+For HTML outside the Remix component render pipeline, the `html` template tag escapes interpolated values and `createHtmlResponse(...)` sets the HTML content type and adds a doctype:
 
 ```ts
 import { html } from "remix/html-template";

package/guides/03-request-handling.md

@@ -50,19 +50,7 @@ import { router } from "./app/router.ts";
 
 const port = process.env.PORT ? Number.parseInt(process.env.PORT, 10) : 44100;
 
-const server = http.createServer(
-  createRequestListener(async (request) => {
-    try {
-      return await router.fetch(request);
-    } catch (error) {
-      if (!(request.signal.aborted && error === request.signal.reason)) {
-        console.error(error);
-      }
-
-      return new Response("Internal Server Error", { status: 500 });
-    }
-  }),
-);
+const server = http.createServer(createRequestListener(router.fetch));
 
 server.listen(port, () => {
   console.log(`Server listening on http://localhost:${port}`);
@@ -83,7 +71,7 @@ Keep that boundary narrow. Code that only needs a URL, headers, cookies, a body,
 - passes the request to your Fetch handler; and
 - writes the returned response status, headers, and streamed body through Node.
 
-The same listener works with `node:http`, `node:https`, and Node's HTTP/2 compatibility API. Most apps only need to pass `router.fetch(...)` through a small error boundary, as shown above. `createRequestListener(...)` also has a default error handler, but handling router errors in `server.ts` lets the app decide what to log and return.
+The same listener works with `node:http`, `node:https`, and Node's HTTP/2 compatibility API. `createRequestListener(...)` logs errors and returns a generic `500` response by default.
 
 The listener accepts a few options when the server boundary needs more information:
 
@@ -97,7 +85,7 @@ The listener accepts a few options when the server boundary needs more informati
 For example, a Node server behind a trusted reverse proxy can let the listener recover the public protocol and host:
 
 ```ts filename=server.ts
-const requestListener = createRequestListener((request) => router.fetch(request), {
+const requestListener = createRequestListener(router.fetch, {
   trustProxy: true,
   onError(error) {
     console.error(error);
@@ -143,9 +131,7 @@ Deno uses the handler in `Deno.serve(...)`:
 ```ts filename=server.ts
 import { router } from "./app/router.ts";
 
-Deno.serve({ port: 44100 }, (request) => {
-  return router.fetch(request);
-});
+Deno.serve({ port: 44100 }, router.fetch);
 ```
 
 A Cloudflare Worker exports an object with a `fetch` method:
@@ -233,7 +219,7 @@ export const router = createRouter({
 
 export type AppContext = RouterContext<typeof router>;
 
-declare module "remix/router" {
+declare module "remix" {
   interface RouterTypes {
     context: AppContext;
   }
@@ -268,7 +254,7 @@ The default app starts with static-file and render middleware. Add the others wh
 | Middleware         | Import                             | What it does                                                                                                                | Placement                                                                                       |
 | ------------------ | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
 | `formData()`       | `remix/middleware/form-data`       | Parses URL-encoded and multipart bodies once, then provides `context.formData`. Non-form requests receive empty `FormData`. | Before `methodOverride()`, CSRF form-field checks, or actions that read parsed form data.       |
-| `render()`         | `remix/middleware/render`          | Installs the standard Remix UI `context.render(...)` function.                                                              | After middleware that may answer without rendering.                                             |
+| `render()`         | `remix/middleware/render`          | Installs the standard Remix component `context.render(...)` function.                                                       | After middleware that may answer without rendering.                                             |
 | `staticFiles()`    | `remix/middleware/static`          | Serves `GET` and `HEAD` requests from a directory, with conditional and range request support.                              | Early, before request enrichment that static files do not need.                                 |
 | `compression()`    | `remix/middleware/compression`     | Negotiates Brotli, gzip, or deflate for suitable downstream responses.                                                      | Before every response it should wrap, including `staticFiles()` when static text is compressed. |
 | `logger()`         | `remix/middleware/logger`          | Logs the request and downstream response and provides `context.logger(...)`.                                                | Usually first so early responses and `404`s are logged.                                         |