remix 3.0.0-rc.4 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix",
-  "version": "3.0.0-rc.4",
+  "version": "3.0.0",
   "description": "The Remix web framework",
   "author": "Michael Jackson <mjijackson@gmail.com>",
   "license": "MIT",
@@ -46,6 +46,50 @@
       "types": "./dist/cli.d.ts",
       "default": "./dist/cli.js"
     },
+    "./component": {
+      "types": "./dist/component.d.ts",
+      "default": "./dist/component.js"
+    },
+    "./component-hmr": {
+      "types": "./dist/component-hmr.d.ts",
+      "default": "./dist/component-hmr.js"
+    },
+    "./component-hmr/assets": {
+      "types": "./dist/component-hmr/assets.d.ts",
+      "default": "./dist/component-hmr/assets.js"
+    },
+    "./component-hmr/node": {
+      "types": "./dist/component-hmr/node.d.ts",
+      "default": "./dist/component-hmr/node.js"
+    },
+    "./component-hmr/runtime/browser": {
+      "types": "./dist/component-hmr/runtime/browser.d.ts",
+      "default": "./dist/component-hmr/runtime/browser.js"
+    },
+    "./component-hmr/runtime/server": {
+      "types": "./dist/component-hmr/runtime/server.d.ts",
+      "default": "./dist/component-hmr/runtime/server.js"
+    },
+    "./component/dev/refresh": {
+      "types": "./dist/component/dev/refresh.d.ts",
+      "default": "./dist/component/dev/refresh.js"
+    },
+    "./component/jsx-dev-runtime": {
+      "types": "./dist/component/jsx-dev-runtime.d.ts",
+      "default": "./dist/component/jsx-dev-runtime.js"
+    },
+    "./component/jsx-runtime": {
+      "types": "./dist/component/jsx-runtime.d.ts",
+      "default": "./dist/component/jsx-runtime.js"
+    },
+    "./component/server": {
+      "types": "./dist/component/server.d.ts",
+      "default": "./dist/component/server.js"
+    },
+    "./component/test": {
+      "types": "./dist/component/test.d.ts",
+      "default": "./dist/component/test.js"
+    },
     "./cookie": {
       "types": "./dist/cookie.d.ts",
       "default": "./dist/cookie.js"
@@ -385,134 +429,6 @@
       "types": "./dist/test/cli.d.ts",
       "default": "./dist/test/cli.js"
     },
-    "./ui": {
-      "types": "./dist/ui.d.ts",
-      "default": "./dist/ui.js"
-    },
-    "./ui-hmr": {
-      "types": "./dist/ui-hmr.d.ts",
-      "default": "./dist/ui-hmr.js"
-    },
-    "./ui-hmr/assets": {
-      "types": "./dist/ui-hmr/assets.d.ts",
-      "default": "./dist/ui-hmr/assets.js"
-    },
-    "./ui-hmr/node": {
-      "types": "./dist/ui-hmr/node.d.ts",
-      "default": "./dist/ui-hmr/node.js"
-    },
-    "./ui-hmr/runtime/browser": {
-      "types": "./dist/ui-hmr/runtime/browser.d.ts",
-      "default": "./dist/ui-hmr/runtime/browser.js"
-    },
-    "./ui-hmr/runtime/server": {
-      "types": "./dist/ui-hmr/runtime/server.d.ts",
-      "default": "./dist/ui-hmr/runtime/server.js"
-    },
-    "./ui/accordion": {
-      "types": "./dist/ui/accordion.d.ts",
-      "default": "./dist/ui/accordion.js"
-    },
-    "./ui/accordion/primitives": {
-      "types": "./dist/ui/accordion/primitives.d.ts",
-      "default": "./dist/ui/accordion/primitives.js"
-    },
-    "./ui/anchor": {
-      "types": "./dist/ui/anchor.d.ts",
-      "default": "./dist/ui/anchor.js"
-    },
-    "./ui/animation": {
-      "types": "./dist/ui/animation.d.ts",
-      "default": "./dist/ui/animation.js"
-    },
-    "./ui/breadcrumbs": {
-      "types": "./dist/ui/breadcrumbs.d.ts",
-      "default": "./dist/ui/breadcrumbs.js"
-    },
-    "./ui/button": {
-      "types": "./dist/ui/button.d.ts",
-      "default": "./dist/ui/button.js"
-    },
-    "./ui/checkbox": {
-      "types": "./dist/ui/checkbox.d.ts",
-      "default": "./dist/ui/checkbox.js"
-    },
-    "./ui/combobox": {
-      "types": "./dist/ui/combobox.d.ts",
-      "default": "./dist/ui/combobox.js"
-    },
-    "./ui/combobox/primitives": {
-      "types": "./dist/ui/combobox/primitives.d.ts",
-      "default": "./dist/ui/combobox/primitives.js"
-    },
-    "./ui/dev/refresh": {
-      "types": "./dist/ui/dev/refresh.d.ts",
-      "default": "./dist/ui/dev/refresh.js"
-    },
-    "./ui/input": {
-      "types": "./dist/ui/input.d.ts",
-      "default": "./dist/ui/input.js"
-    },
-    "./ui/jsx-dev-runtime": {
-      "types": "./dist/ui/jsx-dev-runtime.d.ts",
-      "default": "./dist/ui/jsx-dev-runtime.js"
-    },
-    "./ui/jsx-runtime": {
-      "types": "./dist/ui/jsx-runtime.d.ts",
-      "default": "./dist/ui/jsx-runtime.js"
-    },
-    "./ui/listbox": {
-      "types": "./dist/ui/listbox.d.ts",
-      "default": "./dist/ui/listbox.js"
-    },
-    "./ui/menu": {
-      "types": "./dist/ui/menu.d.ts",
-      "default": "./dist/ui/menu.js"
-    },
-    "./ui/menu/primitives": {
-      "types": "./dist/ui/menu/primitives.d.ts",
-      "default": "./dist/ui/menu/primitives.js"
-    },
-    "./ui/popover": {
-      "types": "./dist/ui/popover.d.ts",
-      "default": "./dist/ui/popover.js"
-    },
-    "./ui/radio": {
-      "types": "./dist/ui/radio.d.ts",
-      "default": "./dist/ui/radio.js"
-    },
-    "./ui/select": {
-      "types": "./dist/ui/select.d.ts",
-      "default": "./dist/ui/select.js"
-    },
-    "./ui/select/primitives": {
-      "types": "./dist/ui/select/primitives.d.ts",
-      "default": "./dist/ui/select/primitives.js"
-    },
-    "./ui/server": {
-      "types": "./dist/ui/server.d.ts",
-      "default": "./dist/ui/server.js"
-    },
-    "./ui/tabs": {
-      "types": "./dist/ui/tabs.d.ts",
-      "default": "./dist/ui/tabs.js"
-    },
-    "./ui/tabs/primitives": {
-      "types": "./dist/ui/tabs/primitives.d.ts",
-      "default": "./dist/ui/tabs/primitives.js"
-    },
-    "./ui/test": {
-      "types": "./dist/ui/test.d.ts",
-      "default": "./dist/ui/test.js"
-    },
-    "./ui/toggle": {
-      "types": "./dist/ui/toggle.d.ts",
-      "default": "./dist/ui/toggle.js"
-    },
-    "./ui/toggle/primitives": {
-      "types": "./dist/ui/toggle/primitives.d.ts",
-      "default": "./dist/ui/toggle/primitives.js"
-    },
     "./package.json": "./package.json"
   },
   "devDependencies": {
@@ -521,54 +437,54 @@
     "typescript": "^7.0.2"
   },
   "dependencies": {
-    "@remix-run/assets": "^0.8.0",
-    "@remix-run/async-context-middleware": "^0.3.8",
-    "@remix-run/auth": "^0.3.3",
-    "@remix-run/ui": "^0.11.0",
-    "@remix-run/auth-middleware": "^0.2.8",
-    "@remix-run/compression-middleware": "^0.1.16",
-    "@remix-run/cors-middleware": "^0.2.1",
-    "@remix-run/csrf-middleware": "^0.2.0",
-    "@remix-run/cop-middleware": "^0.1.11",
-    "@remix-run/cookie": "^0.7.1",
-    "@remix-run/data-table": "^0.6.0",
-    "@remix-run/data-table-mysql": "^0.5.3",
-    "@remix-run/data-schema": "^0.3.1",
-    "@remix-run/data-table-postgres": "^0.5.3",
-    "@remix-run/data-table-sqlite": "^0.6.3",
-    "@remix-run/fetch-proxy": "^0.9.0",
-    "@remix-run/file-storage": "^0.13.8",
-    "@remix-run/fetch-router": "^0.22.2",
-    "@remix-run/file-storage-s3": "^0.1.6",
-    "@remix-run/form-data-middleware": "^0.3.8",
-    "@remix-run/form-data-parser": "^0.17.7",
-    "@remix-run/fs": "^0.4.7",
-    "@remix-run/html-template": "^0.3.2",
-    "@remix-run/logger-middleware": "^0.3.8",
-    "@remix-run/method-override-middleware": "^0.1.16",
-    "@remix-run/mime": "^0.4.3",
-    "@remix-run/multipart-parser": "^0.16.6",
-    "@remix-run/node-fetch-server": "^0.14.2",
-    "@remix-run/node-tsx": "^0.1.2",
-    "@remix-run/response": "^0.3.10",
-    "@remix-run/headers": "^0.21.3",
-    "@remix-run/lazy-file": "^5.0.7",
-    "@remix-run/route-pattern": "^0.25.0",
-    "@remix-run/session": "^0.4.3",
-    "@remix-run/session-middleware": "^0.5.1",
-    "@remix-run/session-storage-memcache": "^0.1.3",
-    "@remix-run/session-storage-redis": "^0.1.2",
-    "@remix-run/tar-parser": "^0.8.1",
-    "@remix-run/assert": "^0.3.1",
-    "@remix-run/cli": "^0.8.0",
-    "@remix-run/test": "^0.6.2",
-    "@remix-run/render-middleware": "^0.3.2",
-    "@remix-run/terminal": "^0.1.2",
-    "@remix-run/node-hmr": "^0.2.1",
-    "@remix-run/spa": "^0.1.3",
-    "@remix-run/ui-hmr": "^0.1.1",
-    "@remix-run/static-middleware": "^0.4.17",
-    "@remix-run/multiple-import-maps-polyfill": "^0.1.1"
+    "@remix-run/async-context-middleware": "^1.0.0",
+    "@remix-run/auth": "^1.0.0",
+    "@remix-run/component-hmr": "^1.0.0",
+    "@remix-run/auth-middleware": "^1.0.0",
+    "@remix-run/assets": "^1.0.0",
+    "@remix-run/component": "^1.0.0",
+    "@remix-run/cors-middleware": "^1.0.0",
+    "@remix-run/cop-middleware": "^1.0.0",
+    "@remix-run/cookie": "^1.0.0",
+    "@remix-run/data-schema": "^1.0.0",
+    "@remix-run/csrf-middleware": "^1.0.0",
+    "@remix-run/data-table": "^1.0.0",
+    "@remix-run/data-table-postgres": "^1.0.0",
+    "@remix-run/data-table-sqlite": "^1.0.0",
+    "@remix-run/fetch-proxy": "^1.0.0",
+    "@remix-run/compression-middleware": "^1.0.0",
+    "@remix-run/form-data-middleware": "^1.0.0",
+    "@remix-run/data-table-mysql": "^1.0.0",
+    "@remix-run/fetch-router": "^1.0.0",
+    "@remix-run/file-storage": "^1.0.0",
+    "@remix-run/form-data-parser": "^1.0.0",
+    "@remix-run/fs": "^1.0.0",
+    "@remix-run/headers": "^1.0.0",
+    "@remix-run/file-storage-s3": "^1.0.0",
+    "@remix-run/html-template": "^1.0.0",
+    "@remix-run/mime": "^1.0.0",
+    "@remix-run/multipart-parser": "^1.0.0",
+    "@remix-run/lazy-file": "^5.0.8",
+    "@remix-run/method-override-middleware": "^1.0.0",
+    "@remix-run/node-fetch-server": "^1.0.0",
+    "@remix-run/logger-middleware": "^1.0.0",
+    "@remix-run/node-tsx": "^1.0.0",
+    "@remix-run/response": "^1.0.0",
+    "@remix-run/route-pattern": "^1.0.0",
+    "@remix-run/session-middleware": "^1.0.0",
+    "@remix-run/session": "^1.0.0",
+    "@remix-run/session-storage-memcache": "^1.0.0",
+    "@remix-run/assert": "^1.0.0",
+    "@remix-run/cli": "^1.0.0",
+    "@remix-run/tar-parser": "^1.0.0",
+    "@remix-run/test": "^1.0.0",
+    "@remix-run/terminal": "^1.0.0",
+    "@remix-run/session-storage-redis": "^1.0.0",
+    "@remix-run/spa": "^1.0.0",
+    "@remix-run/multiple-import-maps-polyfill": "^1.0.0",
+    "@remix-run/node-hmr": "^1.0.0",
+    "@remix-run/static-middleware": "^1.0.0",
+    "@remix-run/render-middleware": "^1.0.0"
   },
   "bin": {
     "remix": "./dist/cli-entry.js"
@@ -595,13 +511,13 @@
   },
   "sideEffects": [
     "./src/cli-entry.ts",
+    "./src/component-hmr/node.ts",
     "./src/node-hmr/runtime.ts",
     "./src/node-tsx.ts",
-    "./src/ui-hmr/node.ts",
     "./dist/cli-entry.js",
+    "./dist/component-hmr/node.js",
     "./dist/node-hmr/runtime.js",
-    "./dist/node-tsx.js",
-    "./dist/ui-hmr/node.js"
+    "./dist/node-tsx.js"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node ../../scripts/copy-package-type-only-exports.ts .",

package/src/assets/README.md

@@ -225,8 +225,8 @@ let { href, importMap, preloads } = await assetServer.getScriptEntry('app/assets
 This can be used when rendering a document shell:
 
 ```tsx
-import type { Handle, RemixNode } from 'remix/ui'
-import { ImportMap } from 'remix/ui/server'
+import type { Handle, RemixNode } from 'remix/component'
+import { ImportMap } from 'remix/component/server'
 import { assetServer } from './assets.ts'
 
 let { href, importMap, preloads } = await assetServer.getScriptEntry('app/assets/entry.tsx')
@@ -248,10 +248,10 @@ export function Document(handle: Handle<{ children: RemixNode }>) {
 }
 ```
 
-This can also be used for resolved client entries in [`remix/ui`](../ui/README.md) when using `import.meta.url` as the client entry ID:
+This can also be used for resolved client entries in [`remix/component`](../component/README.md) when using `import.meta.url` as the client entry ID:
 
 ```tsx
-import { renderToStream } from 'remix/ui/server'
+import { renderToStream } from 'remix/component/server'
 import { assetServer } from './assets.ts'
 
 let stream = renderToStream(<App />, {
@@ -324,7 +324,7 @@ let preloads = await assetServer.getPreloads([
 //   '/assets/app/actions/public/entry.ts',
 //   '/assets/app/search/public/search.tsx',
 //   '/assets/app/search/public/utils.ts',
-//   '/assets/npm/remix/ui/index.js',
+//   '/assets/npm/remix/component/index.js',
 //   ...etc
 // ]
 ```
@@ -436,22 +436,22 @@ If only some modules have side effects, `sideEffects` can be set to an array of
 }
 ```
 
-For example, an application might import `css` from `remix/ui`:
+For example, an application might import `css` from `remix/component`:
 
 ```ts
 // entry.ts
-import { css } from 'remix/ui'
+import { css } from 'remix/component'
 ```
 
 That binding passes through two barrel files before reaching its implementation:
 
 ```ts
-// remix/src/ui.ts
-export * from '@remix-run/ui'
+// remix/src/component.ts
+export * from '@remix-run/component'
 ```
 
 ```ts
-// @remix-run/ui/dist/index.js
+// @remix-run/component/dist/index.js
 export { css } from './style/css-mixin.js'
 // ...other exports
 ```
@@ -460,7 +460,7 @@ After optimization, the served `entry.ts` module imports the binding directly fr
 
 ```ts
 // entry.ts
-import { css } from '/assets/npm/@remix-run/ui/dist/style/css-mixin.js'
+import { css } from '/assets/npm/@remix-run/component/dist/style/css-mixin.js'
 ```
 
 ## Script Options
@@ -985,7 +985,7 @@ if (import.meta.hot) {
 
 - [`fetch-router`](../fetch-router/README.md) - A Fetch-based router that pairs naturally with `assets`
 - [`node-hmr`](../node-hmr/README.md) - Provides the server-side `import.meta.hot` runtime and browser HMR channel used by `hmr`
-- [`ui-hmr`](../ui-hmr/README.md) - Provides a Remix UI component HMR loader for `scripts.loaders`
+- [`component-hmr`](../component-hmr/README.md) - Provides a Remix component HMR loader for `scripts.loaders`
 
 ## License
 

package/src/cli/README.md

@@ -4,7 +4,7 @@ Command-line interface for creating and managing Remix projects.
 
 ## Features
 
-- Create new Remix projects with `npx remix@next new` or installed `remix new`
+- Create new Remix projects with `npx remix new` or installed `remix new`
 - List browser-reachable files and inspect URL mappings with `remix assets`
 - Print shell completion scripts with `remix completion`
 - Check project environment and Remix app conventions with `remix doctor`
@@ -19,7 +19,7 @@ Command-line interface for creating and managing Remix projects.
 
 ## Installation
 
-Use `npx remix@next new <target-dir>` to scaffold a new Remix app. Install `remix` when you want the local `remix` command:
+Use `npx remix new <target-dir>` to scaffold a new Remix app. Install `remix` when you want the local `remix` command:
 
 ```sh
 npm i remix
@@ -41,7 +41,7 @@ remix completion zsh >> ~/.zshrc
 
 ## Usage
 
-Use `npx remix@next new my-remix-app` to scaffold a new Remix app. After installing Remix, the equivalent local command is `remix new my-remix-app`.
+Use `npx remix new my-remix-app` to scaffold a new Remix app. After installing Remix, the equivalent local command is `remix new my-remix-app`.
 
 The rest of the CLI is available through the installed `remix` command:
 

package/src/{ui → component}/README.md

@@ -1,14 +1,14 @@
-# ui
+# component
 
-Runtime UI primitives for Remix apps, including the component runtime, server rendering, frame hydration, reusable mixins, and headless first-party behavior primitives.
+A minimal component system built on JavaScript and DOM primitives. Write components that render on
+the server, stream to the browser, and hydrate only where you need interactivity.
 
 ## Features
 
 - Component runtime APIs for rendering, hydration, link and form frame navigation, and JSX
-- Server rendering APIs for streaming Remix UI trees and frames
-- `mix` composition with event, ref, CSS, and animation helpers
-- Headless behavior primitives for controls such as menus, listboxes, popovers, selects, and comboboxes
-- Lower-level utilities for keyboard events, typeahead search, refs, attributes, and CSS transition timing
+- Server rendering APIs for streaming component trees and frames
+- `mix` composition with event, ref, and CSS helpers
+- Lower-level utilities for events, refs, attributes, and rendering lifecycle
 
 ## Installation
 
@@ -18,84 +18,40 @@ npm i remix
 
 ## Usage
 
-Compose behavior primitives with your own markup and styles:
+Components receive a handle and return a render function. Local state stays in ordinary JavaScript
+variables, and `handle.update()` explicitly schedules another render:
 
 ```tsx
-import { css, on } from 'remix/ui'
-import type { Handle } from 'remix/ui'
-import * as popover from 'remix/ui/popover'
-
-let triggerCss = css({
-  border: '1px solid #d1d5db',
-  borderRadius: '6px',
-  padding: '6px 10px',
-})
-
-let surfaceCss = css({
-  background: 'white',
-  border: '1px solid #d1d5db',
-  borderRadius: '6px',
-  padding: '8px',
-})
+import { on } from 'remix/component'
+import type { Handle } from 'remix/component'
 
-function ViewOptions(handle: Handle) {
-  let open = false
+function Counter(handle: Handle<{ initialCount?: number }>) {
+  let count = handle.props.initialCount ?? 0
 
   return () => (
-    <popover.Context>
-      <button
-        mix={[
-          triggerCss,
-          popover.anchor({ placement: 'bottom-end' }),
-          popover.focusOnHide(),
-          on('click', () => {
-            open = true
-            handle.update()
-          }),
-        ]}
-        type="button"
-      >
-        View options
-      </button>
-      <div
-        mix={[
-          surfaceCss,
-          popover.surface({
-            open,
-            onHide() {
-              open = false
-              handle.update()
-            },
-          }),
-        ]}
-      >
-        Panel content
-      </div>
-    </popover.Context>
+    <button
+      type="button"
+      mix={on('click', () => {
+        count++
+        void handle.update()
+      })}
+    >
+      Count: {count}
+    </button>
   )
 }
 ```
 
-Button styling is available as a composable mixin:
-
-```tsx
-import button from 'remix/ui/button'
-
-function Actions() {
-  return () => <button mix={button({ tone: 'primary' })}>Create project</button>
-}
-```
-
 ## Custom Mixins
 
-Use `createMixin(...)` to share host behavior, manage DOM resources, or provide default props. The [Mixins guide](https://github.com/remix-run/remix/blob/main/packages/ui/docs/mixins.md) covers setup and render, `MixinHandle`, lifecycle events, and deferred removal with `beforeRemove` and `event.persistNode(...)`.
+Use `createMixin(...)` to share host behavior, manage DOM resources, or provide default props. The [Mixins guide](https://github.com/remix-run/remix/blob/main/packages/component/docs/mixins.md) covers setup and render, `MixinHandle`, lifecycle events, and deferred removal with `beforeRemove` and `event.persistNode(...)`.
 
 ## Client Entry Loading
 
 `run()` hydrates client entries by calling `loadModule` for each component module:
 
 ```tsx
-import { run } from 'remix/ui'
+import { run } from 'remix/component'
 
 let app = run({
   async loadModule(moduleUrl, exportName) {
@@ -221,12 +177,12 @@ window.navigation?.addEventListener('navigate', (e) => e.stopImmediatePropagatio
 This prevents Remix from intercepting Navigation API events. Explicit frame reloads such as
 `handle.frame.reload()` continue to use the frame resolver.
 
-The default resolver accepts `2xx` responses and `3xx` or `4xx` responses whose `Content-Type` includes `text/html`, ignoring case. It rejects other `3xx` or `4xx` responses and all `5xx` responses with an error containing their status and status text. A custom `resolveFrame` may return a `Response` with any status when it wants Remix UI to render the response body.
+The default resolver accepts `2xx` responses and `3xx` or `4xx` responses whose `Content-Type` includes `text/html`, ignoring case. It rejects other `3xx` or `4xx` responses and all `5xx` responses with an error containing their status and status text. A custom `resolveFrame` may return a `Response` with any status when it wants the component runtime to render the response body.
 
 Forms remain ordinary HTML forms before the runtime starts. Add `data-rmx-target` to reload a named frame, or `data-rmx-document` to require a full-document submission:
 
 ```tsx
-import { Frame } from 'remix/ui'
+import { Frame } from 'remix/component'
 
 function AccountPage() {
   return () => (
@@ -242,13 +198,13 @@ function AccountPage() {
 }
 ```
 
-Native constraint validation and submitter overrides still apply. GET form values arrive in `src`; non-GET forms provide `formData`, `method`, and `encType` to the resolver. See [Frames](https://github.com/remix-run/remix/blob/main/packages/ui/docs/frames.md#form-navigation) for targeting, history behavior, request encoding, opt-outs, and server response guidance.
+Native constraint validation and submitter overrides still apply. GET form values arrive in `src`; non-GET forms provide `formData`, `method`, and `encType` to the resolver. See [Frames](https://github.com/remix-run/remix/blob/main/packages/component/docs/frames.md#form-navigation) for targeting, history behavior, request encoding, opt-outs, and server response guidance.
 
 Use `data-rmx-history="push|replace"` on an enhanced anchor or form to control how the navigation updates history. This can override the automatic replacement used for non-GET form submissions to the current URL.
 
 ## Single-page Applications
 
-Use `render` and `run` from `remix/spa` when every route runs in the browser and returns a Remix UI
+Use `render` and `run` from `remix/spa` when every route runs in the browser and returns a component
 tree instead of an HTTP response body. The render middleware keeps the router's standard `Request`
 to `Response` contract while associating the response with a node for the top frame to render:
 
@@ -284,7 +240,7 @@ Use `data-rmx-preserve-dom` on the smallest element whose live DOM should belong
 </pagefind-ui>
 ```
 
-Remix UI still renders the element's children during SSR and still hydrates any initial client entries inside it. On later frame reloads, matched `data-rmx-preserve-dom` elements keep their current attributes and children instead of accepting incoming DOM updates. See [Preserving client-owned DOM](https://github.com/remix-run/remix/blob/main/packages/ui/docs/frames.md#preserving-client-owned-dom) for guidance and caveats.
+The component runtime still renders the element's children during SSR and still hydrates any initial client entries inside it. On later frame reloads, matched `data-rmx-preserve-dom` elements keep their current attributes and children instead of accepting incoming DOM updates. See [Preserving client-owned DOM](https://github.com/remix-run/remix/blob/main/packages/component/docs/frames.md#preserving-client-owned-dom) for guidance and caveats.
 
 Use `data-rmx-preserve-attrs` when client code owns only specific attributes, such as a theme set on `<html>`:
 
@@ -292,13 +248,13 @@ Use `data-rmx-preserve-attrs` when client code owns only specific attributes, su
 <html lang="en" data-rmx-preserve-attrs="data-theme"></html>
 ```
 
-On frame reloads, the space-separated attribute names in the incoming HTML keep their live values or absence. Other attributes and children reconcile normally. An empty or omitted list uses normal attribute reconciliation. This works on any matched element; it does not prevent removal or replacement. See [Preserving client-owned attributes](https://github.com/remix-run/remix/blob/main/packages/ui/docs/frames.md#preserving-client-owned-attributes) for examples and ownership rules.
+On frame reloads, the space-separated attribute names in the incoming HTML keep their live values or absence. Other attributes and children reconcile normally. An empty or omitted list uses normal attribute reconciliation. This works on any matched element; it does not prevent removal or replacement. See [Preserving client-owned attributes](https://github.com/remix-run/remix/blob/main/packages/component/docs/frames.md#preserving-client-owned-attributes) for examples and ownership rules.
 
 ## Cascade Layers
 
-Remix UI emits generated `css(...)` rules under the `rmx` cascade layer. Unlayered CSS outranks layered CSS, so use explicit layer order when mixing Remix UI with global styles.
+The component runtime emits generated `css(...)` rules under the `rmx` cascade layer. Unlayered CSS outranks layered CSS, so use explicit layer order when mixing generated styles with global styles.
 
-Put layers that should lose to Remix UI before `rmx`:
+Put layers that should lose to generated styles before `rmx`:
 
 ```css
 @layer base, rmx;

package/src/{ui → component}/dev/refresh.ts

@@ -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/src/{ui → component}/jsx-dev-runtime.ts

@@ -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/src/{ui → component}/jsx-runtime.ts

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