remix 3.0.0-beta.1 → 3.0.0-beta.3

package/src/file-storage-s3/README.md

@@ -1,12 +1,11 @@
 # file-storage-s3
 
-S3 backend for [`remix/file-storage`](https://github.com/remix-run/remix/tree/main/packages/file-storage).
-Use this package when you want the `FileStorage` API backed by AWS S3 or an S3-compatible provider.
+S3 backend for [`remix/file-storage`](https://github.com/remix-run/remix/tree/main/packages/file-storage). Use this package when you want the `FileStorage` API backed by AWS S3 or an S3-compatible provider.
 
 ## Features
 
 - **S3-Compatible API** - Works with AWS S3 and S3-compatible APIs (e.g. MinIO, LocalStack)
-- **Metadata Preservation** - Preserves `File` metadata (`name`, `type`, `lastModified`)
+- **Metadata Preservation** - Preserves `File` metadata (`name`, `type`, `size`, `lastModified`)
 - **Runtime-Agnostic Signing** - Uses [`aws4fetch`](https://github.com/mhart/aws4fetch) for SigV4 signing
 
 ## Installation

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

@@ -69,8 +69,7 @@ let router = createRouter({
 
 ### Limit Multipart Growth
 
-`formData()` forwards multipart limit options to `parseFormData()`, so you can cap uploads with
-`maxHeaderSize`, `maxFiles`, `maxFileSize`, `maxParts`, and `maxTotalSize`.
+`formData()` forwards multipart limit options to `parseFormData()`, so you can cap uploads with `maxHeaderSize`, `maxFiles`, `maxFileSize`, `maxParts`, and `maxTotalSize`.
 
 ```ts
 let router = createRouter({

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

@@ -72,8 +72,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 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`.
 
@@ -118,15 +117,15 @@ try {
 }
 ```
 
-If you're looking for a more flexible storage solution for `File` objects that are uploaded, this library pairs really well with [the `file-storage` library](https://github.com/remix-run/remix/tree/main/packages/file-storage) for keeping files in various storage backends.
+If you're looking for a more flexible storage solution for `FileUpload` objects, this library pairs really well with [the `file-storage` library](https://github.com/remix-run/remix/tree/main/packages/file-storage) for keeping files in various storage backends.
 
 ```ts
-import { LocalFileStorage } from 'remix/file-storage/local'
+import { createFsFileStorage } from 'remix/file-storage/fs'
 import type { FileUpload } from 'remix/form-data-parser'
 import { parseFormData } from 'remix/form-data-parser'
 
 // Set up storage for uploaded files
-const fileStorage = new LocalFileStorage('/uploads/user-avatars')
+const fileStorage = createFsFileStorage('/uploads/user-avatars')
 
 // Define how to handle incoming file uploads
 async function uploadHandler(fileUpload: FileUpload) {
@@ -134,11 +133,8 @@ async function uploadHandler(fileUpload: FileUpload) {
   if (fileUpload.fieldName === 'user-avatar') {
     let storageKey = `user-${user.id}-avatar`
 
-    // Put the file in storage
-    await fileStorage.set(storageKey, fileUpload)
-
-    // Return a lazy File object that can access the stored file when needed
-    return fileStorage.get(storageKey)
+    // Put the file in storage and return the stored LazyFile
+    return fileStorage.put(storageKey, fileUpload)
   }
 
   // Ignore unrecognized fields
@@ -153,8 +149,7 @@ The [`demos` directory](https://github.com/remix-run/remix/tree/main/packages/fo
 
 ## Related Packages
 
-- [`data-schema`](https://github.com/remix-run/remix/tree/main/packages/data-schema) - Tiny,
-  standards-aligned validation with a `form-data` export for `FormData` and `URLSearchParams`
+- [`data-schema`](https://github.com/remix-run/remix/tree/main/packages/data-schema) - Tiny, standards-aligned validation with a `form-data` export for `FormData` and `URLSearchParams`
 - [`file-storage`](https://github.com/remix-run/remix/tree/main/packages/file-storage) - A simple key/value interface for storing `FileUpload` objects you get from the parser
 - [`multipart-parser`](https://github.com/remix-run/remix/tree/main/packages/multipart-parser) - The parser used internally for parsing `multipart/form-data` HTTP messages
 

package/src/headers/README.md

@@ -53,6 +53,26 @@ headers.get('Content-Type') // no typed parse needed
 headers.contentType.mediaType // parses Content-Type lazily
 ```
 
+Use `apply()` to apply a `SuperHeadersInit` value to an existing instance with header-aware semantics:
+
+```ts
+let headers = new Headers({
+  contentType: 'text/html',
+  setCookie: { name: 'session', value: 'abc' },
+  vary: 'Accept-Encoding',
+})
+
+headers.apply({
+  contentType: 'application/json',
+  setCookie: { name: 'theme', value: 'dark' },
+  vary: ['Accept-Encoding', 'Accept-Language'],
+})
+
+headers.get('Content-Type') // 'application/json'
+headers.get('Vary') // 'accept-encoding, accept-language'
+headers.getSetCookie() // ['session=abc', 'theme=dark']
+```
+
 ## Individual Header Utilities
 
 Each supported header has a class that represents the header value. Use the static `from()` method to parse header values. Each class has a `toString()` method that returns the header value as a string, which you can either call manually, or will be called automatically when the header class is used in a context that expects a string.
@@ -74,6 +94,16 @@ The following headers are currently supported:
 - [Set-Cookie](./README.md#set-cookie)
 - [Vary](./README.md#vary)
 
+If you only need a specific header parser (for example, just `Content-Type`), import that parser directly from its subpath. This avoids pulling the package barrel and `SuperHeaders`:
+
+```ts
+import { ContentType } from 'remix/headers/content-type'
+import { SetCookie } from 'remix/headers/set-cookie'
+
+let contentType = ContentType.from('text/plain; charset=utf-8')
+let setCookie = new SetCookie('session=abc; Path=/')
+```
+
 ### Accept
 
 Parse, manipulate and stringify [`Accept` headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept).
@@ -325,7 +355,7 @@ headers.set('Content-Type', new ContentType({ mediaType: 'text/html', charset: '
 
 Parse, manipulate and stringify [`Cookie` headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cookie).
 
-Implements `Map<name, value>`.
+Implements an ordered list of name/value pairs. Duplicate cookie names are preserved, such as when cookies with the same name were set for different paths.
 
 ```ts
 import { Cookie } from 'remix/headers'
@@ -334,6 +364,7 @@ import { Cookie } from 'remix/headers'
 let cookie = Cookie.from(request.headers.get('Cookie'))
 
 cookie.get('session_id') // 'abc123'
+cookie.getAll('session_id') // ['abc123']
 cookie.get('theme') // 'dark'
 cookie.has('session_id') // true
 cookie.size // 2
@@ -345,6 +376,7 @@ for (let [name, value] of cookie) {
 
 // Modify and set header
 cookie.set('theme', 'light')
+cookie.append('session_id', 'def456')
 cookie.delete('session_id')
 headers.set('Cookie', cookie)
 

package/src/headers/accept-encoding.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/headers/accept-encoding'

package/src/headers/accept-language.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/headers/accept-language'

package/src/headers/accept.ts

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

package/src/headers/cache-control.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/headers/cache-control'

package/src/headers/content-disposition.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/headers/content-disposition'

package/src/headers/content-range.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/headers/content-range'

package/src/headers/content-type.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/headers/content-type'

package/src/headers/cookie.ts

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

package/src/headers/if-match.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/headers/if-match'

package/src/headers/if-none-match.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/headers/if-none-match'

package/src/headers/if-range.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/headers/if-range'

package/src/headers/range.ts

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

package/src/headers/raw-headers.ts

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

package/src/headers/set-cookie.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/headers/set-cookie'

package/{dist/node-serve.js → src/headers/vary.ts}

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

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

@@ -124,8 +124,7 @@ async function handler(request: Request) {
 
 ### Custom Hostname Configuration
 
-Configure custom hostnames for deployment on VPS or custom environments. `node-fetch-server` uses
-the `host` option when constructing `request.url`.
+Configure custom hostnames for deployment on VPS or custom environments. `node-fetch-server` uses the `host` option when constructing `request.url`.
 
 ```ts
 import * as http from 'node:http'
@@ -291,7 +290,6 @@ The [`demos` directory](https://github.com/remix-run/remix/tree/main/packages/no
 
 ## Related Packages
 
-- [`node-serve`](https://github.com/remix-run/remix/tree/main/packages/node-serve) - Build high-performance Fetch API servers for Node.js
 - [`fetch-proxy`](https://github.com/remix-run/remix/tree/main/packages/fetch-proxy) - Build HTTP proxy servers using the web fetch API
 
 ## Benchmarks
@@ -322,7 +320,6 @@ Simple HTML response benchmarks without inspecting the incoming request.
 
 | Server                    |   Version | Requests/sec | Avg latency | Transfer/sec |
 | ------------------------- | --------: | -----------: | ----------: | -----------: |
-| `remix/node-serve`        |   `0.0.0` |     `62,225` |    `6.45ms` |     `9.85MB` |
 | `node:http`               | `24.15.0` |     `47,110` |   `10.66ms` |     `9.66MB` |
 | `remix/node-fetch-server` |  `0.13.0` |     `43,317` |   `11.69ms` |     `8.80MB` |
 | `express`                 |   `5.2.1` |     `39,752` |   `13.69ms` |     `9.59MB` |
@@ -333,7 +330,6 @@ POST benchmarks that read and print the request method, headers, and a small bod
 
 | Server                    |   Version | Requests/sec | Avg latency | Transfer/sec |
 | ------------------------- | --------: | -----------: | ----------: | -----------: |
-| `remix/node-serve`        |   `0.0.0` |     `31,213` |   `12.75ms` |     `4.94MB` |
 | `remix/node-fetch-server` |  `0.13.0` |     `25,430` |   `24.25ms` |     `5.17MB` |
 | `node:http`               | `24.15.0` |     `25,088` |   `23.89ms` |     `5.14MB` |
 | `express`                 |   `5.2.1` |     `22,845` |   `27.16ms` |     `5.51MB` |
@@ -344,7 +340,6 @@ POST benchmarks that read and print the request method, headers, and a 1 MB body
 
 | Server                    |   Version | Requests/sec | Avg latency | Transfer/sec |
 | ------------------------- | --------: | -----------: | ----------: | -----------: |
-| `remix/node-serve`        |   `0.0.0` |      `1,148` |  `327.72ms` |   `186.03KB` |
 | `remix/node-fetch-server` |  `0.13.0` |      `1,086` |  `217.69ms` |   `225.87KB` |
 | `node:http`               | `24.15.0` |      `1,079` |  `198.67ms` |   `226.54KB` |
 | `express`                 |   `5.2.1` |      `1,022` |  `216.07ms` |   `252.51KB` |

package/src/node-tsx/README.md

@@ -2,13 +2,9 @@
 
 Run Node.js with TypeScript and JSX syntax support in `.ts`, `.tsx`, and `.jsx` files.
 
-`node-tsx` transforms supported source files before Node.js executes them, including
-TypeScript syntax that requires JavaScript code generation such as enums, runtime
-namespaces, and parameter properties. JSX compiler options are read from the nearest
-`tsconfig.json` for each loaded file.
+`node-tsx` transforms supported source files before Node.js executes them, including TypeScript syntax that requires JavaScript code generation such as enums, runtime namespaces, and parameter properties. JSX compiler options are read from the nearest `tsconfig.json` for each loaded file.
 
-The loader does not type check, change Node.js module resolution, apply TypeScript
-path aliases, or downlevel JavaScript syntax for older runtimes.
+The loader does not type check, change Node.js module resolution, apply TypeScript path aliases, or downlevel JavaScript syntax for older runtimes.
 
 ## Installation
 
@@ -47,8 +43,7 @@ Since import resolution still follows Node.js, configure type checking to match
 - [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) requires type-only imports and exports to be marked so runtime imports are unambiguous.
 - [`rewriteRelativeImportExtensions`](https://www.typescriptlang.org/tsconfig/#rewriteRelativeImportExtensions) preserves a `tsc` emit path by rewriting relative `.ts` and `.tsx` imports to JavaScript extensions.
 
-Do not enable `erasableSyntaxOnly` if you want TypeScript to accept the same
-transform-only syntax that `node-tsx` can execute.
+Do not enable `erasableSyntaxOnly` if you want TypeScript to accept the same transform-only syntax that `node-tsx` can execute.
 
 ### Programmatic usage
 

package/src/route-pattern/README.md

@@ -55,15 +55,13 @@ createHref('http(s)://:region.cdn.com/assets/*file.:ext', {
 
 ## API at a glance
 
-**remix/route-pattern** - Parse and stringify patterns.
-
-**remix/route-pattern/href** - Generate hrefs for patterns with type safe params.
-
-**remix/route-pattern/match** - Match against one pattern with type inference for params. Or match against many patterns with deterministic ranking and attached data.
-
-**remix/route-pattern/join** - Combine two patterns into one. Override protocol, hostname, port. Join pathnames. Merge search constraints.
-
-**remix/route-pattern/specificity** - Rank matches by [specificity](#ranking-matches-by-specificity).
+| Import                            | Description                                                                                                                            |
+| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `remix/route-pattern`             | Parse and stringify patterns.                                                                                                          |
+| `remix/route-pattern/href`        | Generate hrefs for patterns with type safe params.                                                                                     |
+| `remix/route-pattern/match`       | Match against one pattern with type inference for params, or match against many patterns with deterministic ranking and attached data. |
+| `remix/route-pattern/join`        | Combine two patterns into one. Override protocol, hostname, port. Join pathnames. Merge search constraints.                            |
+| `remix/route-pattern/specificity` | Rank matches by [specificity](#ranking-matches-by-specificity).                                                                        |
 
 For in-depth reference, visit the [`route-pattern` API docs](https://api.remix.run/api/remix/route-pattern)
 
@@ -113,6 +111,15 @@ While variables, wilcards, and optionals are most prevalent in pathnames, you ca
 '(:locale.)example.com/docs(/:section)' // matches en.example.com/docs, en.example.com/docs/guides
 ```
 
+**Escape characters** with `\`:
+
+```ts
+'time/12\\:30' // matches /time/12:30
+'calculator/2\\*3' // matches /calculator/2*3
+'wiki/Mercury_\\(planet\\)' // matches /wiki/Mercury_(planet)
+'wiki/AC\\/DC' // matches /wiki/AC%2FDC
+```
+
 ### Search
 
 **Search constraints** narrow matches using `?key` or `?key=value`:
@@ -175,8 +182,7 @@ When multiple patterns match the same URL, `route-pattern` chooses the most spec
 
 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`. For example:
 
 ```ts
 import { createMultiMatcher } from 'remix/route-pattern/match'
@@ -195,8 +201,7 @@ matches.sort(descending).map((match) => match.pattern.toString())
 
 ## Generate hrefs
 
-`createHref` turns a pattern and params into a URL string.
-Required variables and wildcards must be provided, while params inside optional groups may be omitted.
+`createHref` turns a pattern and params into a URL string. Required variables and wildcards must be provided, while params inside optional groups may be omitted.
 
 ```ts
 import { createHref } from 'remix/route-pattern/href'

package/src/session-storage-redis/README.md

@@ -1,7 +1,6 @@
 # session-storage-redis
 
-Redis-backed session storage for [`remix/session`](https://github.com/remix-run/remix/tree/main/packages/session).
-Use this package when app servers need to share session state through Redis.
+Redis-backed session storage for [`remix/session`](https://github.com/remix-run/remix/tree/main/packages/session). Use this package when app servers need to share session state through Redis.
 
 ## Installation
 

package/src/test/README.md

@@ -209,8 +209,7 @@ suite('My Test Suite', () => {
 
 ### Programmatic runner
 
-`remix/test/cli` exports `runRemixTest()` for tools that want to run the test runner without
-exiting the current process:
+`remix/test/cli` exports `runRemixTest()` for tools that want to run the test runner without exiting the current process:
 
 ```ts
 import { runRemixTest } from 'remix/test/cli'
@@ -221,9 +220,7 @@ let exitCode = await runRemixTest({
 })
 ```
 
-`runRemixTest()` returns the runner exit code. The `remix test` bin wrapper calls
-`process.exit()` with that code when the run finishes so open workers, browsers, or project handles
-cannot keep the CLI alive.
+`runRemixTest()` returns the runner exit code. The `remix test` bin wrapper calls `process.exit()` with that code when the run finishes so open workers, browsers, or project handles cannot keep the CLI alive.
 
 ### Test Context
 

package/src/ui/README.md

@@ -135,13 +135,15 @@ let Theme = createTheme({
 Render the theme once near the top of your document:
 
 ```tsx
-function Layout(props: { children: RemixNode }) {
-  return (
+import type { Handle, RemixNode } from 'remix/ui'
+
+function Layout(handle: Handle<{ children: RemixNode }>) {
+  return () => (
     <html>
       <head>
         <Theme />
       </head>
-      <body>{props.children}</body>
+      <body>{handle.props.children}</body>
     </html>
   )
 }
@@ -168,13 +170,13 @@ let card = css({
 Render shared glyphs separately from the theme styles:
 
 ```tsx
-import type { RemixNode } from 'remix/ui'
+import type { Handle, RemixNode } from 'remix/ui'
 import { Button } from 'remix/ui/button'
 import { Glyph } from 'remix/ui/glyph'
 import { RMX_01, RMX_01_GLYPHS } from 'remix/ui/theme'
 
-function Layout(props: { children: RemixNode }) {
-  return (
+function Layout(handle: Handle<{ children: RemixNode }>) {
+  return () => (
     <html>
       <head>
         <RMX_01 />
@@ -184,7 +186,7 @@ function Layout(props: { children: RemixNode }) {
         <Button startIcon={<Glyph name="add" />} tone="primary">
           New project
         </Button>
-        {props.children}
+        {handle.props.children}
       </body>
     </html>
   )

package/src/ui/anchor/README.md

@@ -1,6 +1,6 @@
 # anchor
 
-`anchor` positions a floating element against an anchor element and keeps it constrained to the viewport. Use it for custom floating surfaces that need placement, flipping, offsets, and optional relative alignment.
+`anchor` positions a floating element against an anchor element or viewport coordinates and keeps it constrained to the viewport. Use it for custom floating surfaces that need placement, flipping, offsets, and optional relative alignment.
 
 ## Usage
 
@@ -49,11 +49,19 @@ popover.addEventListener('beforetoggle', (event) => {
 })
 ```
 
+Anchor to coordinates when the surface should open at a pointer location.
+
+```tsx
+let cleanup = anchor(popover, { x: event.clientX, y: event.clientY }, { placement: 'bottom-start' })
+```
+
 ## `anchor.*`
 
-- `anchor(floatingElement, anchorElement, options)`: positions `floatingElement` against `anchorElement`, starts animation-frame polling for geometry changes, and returns a cleanup function.
+- `anchor(floatingElement, anchorTarget, options)`: positions `floatingElement` against an element or coordinate target, starts animation-frame polling for geometry changes, and returns a cleanup function.
 - `AnchorOptions`: placement, inset, relative alignment, and offset options.
+- `AnchorPoint`: viewport coordinate target with `x`, `y`, and optional `width`/`height`.
 - `AnchorPlacement`: exported placement names for the main sides and top/bottom start/end alignment.
+- `AnchorTarget`: an `HTMLElement` or `AnchorPoint`.
 
 ## Placements
 
@@ -149,5 +157,5 @@ anchor(listbox, trigger, {
 - Oversized inset surfaces with `relativeTo` preserve alignment by scrolling the nearest scrollable descendant when possible.
 - `offset`, `offsetX`, and `offsetY` may be numbers or functions that receive the floating element.
 - `relativeTo` lets a surface align to an inner element, which is useful for selected options inside popovers.
-- `anchor` polls on animation frames for anchor or floating geometry changes and repositions when either changes.
+- `anchor` polls on animation frames for anchor target or floating geometry changes and repositions when either changes.
 - The returned cleanup function cancels animation-frame polling.

package/src/ui/animation/README.md

@@ -52,12 +52,13 @@ function Toast() {
 `animateExit` keeps a removed keyed element in the DOM long enough to animate from its natural styles to the provided keyframe.
 
 ```tsx
+import type { Handle } from 'remix/ui'
 import { animateExit } from 'remix/ui/animation'
 
-function Item({ id, label }: { id: string; label: string }) {
+function Item(handle: Handle<{ id: string; label: string }>) {
   return () => (
     <li
-      key={id}
+      key={handle.props.id}
       mix={[
         animateExit({
           opacity: 0,
@@ -67,7 +68,7 @@ function Item({ id, label }: { id: string; label: string }) {
         }),
       ]}
     >
-      {label}
+      {handle.props.label}
     </li>
   )
 }
@@ -105,12 +106,13 @@ Exit animations can reclaim a removed keyed node if the same keyed element is re
 `animateLayout` animates layout changes with a FLIP-style transform projection. Use it on elements whose position or size can change between renders.
 
 ```tsx
+import type { Handle } from 'remix/ui'
 import { animateLayout, spring } from 'remix/ui/animation'
 
-function Card({ expanded }: { expanded: boolean }) {
+function Card(handle: Handle<{ expanded: boolean }>) {
   return () => (
     <section
-      class={expanded ? 'card expanded' : 'card'}
+      class={handle.props.expanded ? 'card expanded' : 'card'}
       mix={[
         animateLayout({
           ...spring('smooth'),

package/src/ui/combobox/README.md

@@ -8,7 +8,7 @@ Use it when the user should type draft text, filter a popup list, and still comm
 
 ```tsx
 import { css, type Handle } from 'remix/ui'
-import { Combobox, ComboboxOption, onComboboxChange } from 'remix/ui'
+import { Combobox, ComboboxOption, onComboboxChange } from 'remix/ui/combobox'
 
 let airports = [
   {

package/src/ui/menu/README.md

@@ -68,6 +68,29 @@ Use `menuLabel` when the menu surface needs a different accessible label from th
 </Menu>
 ```
 
+Use `menu.contextTrigger()` with `menu.Context` and `MenuList` when a menu should open at the right-click location of an element.
+
+```tsx
+import * as menu from 'remix/ui/menu'
+import { MenuItem, MenuList } from 'remix/ui/menu'
+
+export function FileContextMenu(handle: Handle) {
+  return () => (
+    <menu.Context label="File actions">
+      <div mix={menu.contextTrigger()} tabIndex={0}>
+        File.txt
+      </div>
+      <MenuList>
+        <MenuItem name="rename">Rename</MenuItem>
+        <MenuItem name="delete">Delete</MenuItem>
+      </MenuList>
+    </menu.Context>
+  )
+}
+```
+
+Attach `onMenuSelect(...)` to `MenuList` or a shared ancestor when using lower-level context menu composition.
+
 ## `menu.*`
 
 - `Menu`: composed trigger, popover, and list component for the common menu case.
@@ -77,13 +100,14 @@ Use `menuLabel` when the menu surface needs a different accessible label from th
 - `onMenuSelect(...)`: event mixin for the bubbling `MenuSelectEvent`.
 - `MenuSelectEvent`: bubbling event class whose `item` describes the selected item.
 - `MenuSelectItem`: selected item shape with `checked`, `id`, `label`, `name`, `type`, and `value`.
-- `menu.Context`, `menu.trigger()`, `menu.popover()`, `menu.list()`, `menu.item(...)`, and `menu.submenuTrigger(...)`: lower-level composition primitives.
+- `menu.Context`, `menu.trigger()`, `menu.contextTrigger()`, `menu.popover()`, `menu.list()`, `menu.item(...)`, and `menu.submenuTrigger(...)`: lower-level composition primitives.
 - `buttonStyle`, `popoverStyle`, `listStyle`, `itemStyle`, `itemSlotStyle`, `itemLabelStyle`, `itemGlyphStyle`, and `triggerGlyphStyle`: flat style mixins used by the wrappers.
-- `MenuProps`, `MenuItemProps`, `MenuListProps`, `MenuProviderProps`, `MenuTriggerOptions`, `MenuItemOptions`, and `SubmenuProps`: public TypeScript props and option types.
+- `MenuProps`, `MenuItemProps`, `MenuListProps`, `MenuProviderProps`, `MenuTriggerOptions`, `MenuContextTriggerOptions`, `MenuItemOptions`, and `SubmenuProps`: public TypeScript props and option types.
 
 ## Behavior Notes
 
 - Click opens the root menu and focuses the list; clicking the trigger again closes it and restores focus.
+- `menu.contextTrigger()` opens the root menu from a `contextmenu` event at the pointer coordinates and supports keyboard opening with the Context Menu key or Shift+F10.
 - `ArrowDown` opens from the trigger at the first enabled item. `ArrowUp` opens at the last enabled item. Enter and Space open the menu with focus on the list.
 - Keyboard navigation skips disabled items and does not wrap past the first or last enabled item.
 - `Home` and `End` move to the first and last enabled item. Enter and Space activate the highlighted item.

package/src/ui/server/README.md

@@ -1,6 +1,6 @@
 # Server
 
-Remix Component can render to HTML on the server using two APIs:
+Remix UI can render to HTML on the server using two APIs:
 
 - `renderToString` - Returns a complete HTML string. Simple, but buffers the entire response.
 - `renderToStream` - Returns a `ReadableStream<Uint8Array>`. Sends the initial HTML immediately and streams frame content as it resolves.
@@ -26,6 +26,7 @@ import { renderToStream } from 'remix/ui/server'
 
 let stream = renderToStream(<App />, {
   frameSrc: request.url,
+  signal: request.signal,
   resolveFrame(src, _target, context) {
     let frameUrl = new URL(src, context?.currentFrameSrc ?? request.url)
     return fetchHtml(frameUrl)
@@ -44,6 +45,7 @@ return new Response(stream, {
 
 - **`frameSrc`** - Seeds SSR frame state for the current render. When provided, server-rendered components can read `handle.frame.src` and `handle.frames.top.src` during SSR.
 - **`topFrameSrc`** - Overrides the root frame URL used for `handle.frames.top.src`. This is mainly useful when calling `renderToStream()` from inside `resolveFrame()` for a nested frame render.
+- **`signal`** - Cancels pending server rendering work. Pass `request.signal` so client disconnects can stop unresolved frame work without invoking `onError` for the disconnect itself.
 - **`resolveFrame(src, target, context)`** - Called when a `<Frame>` needs its content. Return a string of HTML, a `ReadableStream<Uint8Array>`, or a promise of either. `context.currentFrameSrc` is the URL for the frame that contains the `<Frame>`, and `context.topFrameSrc` is the outer document URL. Required if your component tree contains `<Frame>` elements.
 - **`onError(error)`** - Called when a rendering error occurs. If not provided, the stream rejects with the error.
 
@@ -80,7 +82,7 @@ function ProductPage() {
 
 ## CSS
 
-Components using the `css` prop have their styles collected during rendering and emitted as a single `<style>` tag in the `<head>`. No client-side style injection is needed for server-rendered content.
+Components using the `css(...)` mixin through `mix` have their styles collected during rendering and emitted as a single `<style>` tag in the `<head>`. No client-side style injection is needed for server-rendered content.
 
 ## See Also
 

package/dist/node-serve.d.ts

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

package/dist/node-serve.d.ts.map

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