remix 3.0.0-rc.4 → 3.0.0-rc.5

package/INDEX.md

@@ -12,7 +12,7 @@ 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. |
@@ -31,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) |
@@ -54,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) |
@@ -73,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/guides/01-start-here.md

@@ -192,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.
@@ -217,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";
 
@@ -320,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";
@@ -348,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";
@@ -454,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";
@@ -606,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.
 
@@ -629,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";
 
@@ -685,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";
@@ -713,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";
 
@@ -752,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

@@ -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

@@ -254,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.                                         |