@remix-run/ui 0.7.0 → 0.8.0

package/src/runtime/navigation.ts

@@ -36,11 +36,36 @@ interface FormSubmissionNavigationInfo {
 
 interface FrameRedirectNavigationInfo {
   type: typeof frameRedirectNavigationInfoType
+  resetScroll: boolean
 }
 
 const formSubmissionNavigationInfoType = 'frame-form-submission'
 const frameRedirectNavigationInfoType = 'frame-redirect'
 
+function resyncWebKitScrollAfterNavigation(event: NavigateEvent, resetScroll: boolean): void {
+  let userAgent = navigator.userAgent
+  if (!userAgent.includes('AppleWebKit')) return
+  if (userAgent.includes('Chrome') || userAgent.includes('Chromium')) return
+  if (!resetScroll || (event.navigationType !== 'push' && event.navigationType !== 'replace'))
+    return
+  if (new URL(event.destination.url).hash) return
+
+  window.navigation.addEventListener(
+    'navigatesuccess',
+    () => {
+      // WebKit can reset its internal scroll position without synchronizing the visual viewport.
+      // https://bugs.webkit.org/show_bug.cgi?id=309542
+      if (event.signal.aborted || window.scrollX !== 0 || window.scrollY !== 0) return
+      window.scrollTo({ behavior: 'instant', left: 0, top: 1 })
+      requestAnimationFrame(() => {
+        if (event.signal.aborted || window.scrollX !== 0 || window.scrollY !== 1) return
+        window.scrollTo({ behavior: 'instant', left: 0, top: 0 })
+      })
+    },
+    { once: true, signal: event.signal },
+  )
+}
+
 /**
  * Options for client-side frame-aware navigation.
  */
@@ -64,7 +89,17 @@ export async function navigate(href: string, options?: NavigationOptions) {
     resetScroll: options?.resetScroll !== false,
     $rmx: true,
   } satisfies NavigationState
-  let transition = window.navigation.navigate(href, { state, history: options?.history })
+  let navigation = window.navigation
+  if (!navigation) {
+    if (options?.history === 'replace') {
+      window.location.replace(href)
+    } else {
+      window.location.assign(href)
+    }
+    return
+  }
+
+  let transition = navigation.navigate(href, { state, history: options?.history })
   await transition.finished
 }
 
@@ -92,6 +127,7 @@ export function startNavigationListenerImpl(
   },
 ) {
   let navigation = window.navigation
+  if (!navigation) return
   let resolveFormNavigation = createFormNavigationResolver(signal)
 
   navigation.updateCurrentEntry({
@@ -108,7 +144,11 @@ export function startNavigationListenerImpl(
       if (!event.canIntercept || isCrossOriginDestination(event)) return
 
       if (isFrameRedirectNavigationInfo(event.info)) {
-        event.intercept({ async handler() {} })
+        resyncWebKitScrollAfterNavigation(event, event.info.resetScroll)
+        event.intercept({
+          async handler() {},
+          scroll: event.info.resetScroll === false ? 'manual' : undefined,
+        })
         return
       }
 
@@ -118,15 +158,22 @@ export function startNavigationListenerImpl(
             state: replayedSubmission.state,
             getSubmission: replayedSubmission.getSubmission,
           }
-        : getRuntimeNavigation(event, resolveFormNavigation)
+        : getRuntimeNavigation(navigation, event, resolveFormNavigation)
       if (!runtimeNavigation) return
       let { state } = runtimeNavigation
+      resyncWebKitScrollAfterNavigation(event, state.resetScroll)
 
       let topFrame = options.getTopFrame()
       let namedFrame = state.target ? options.getNamedFrame(state.target) : undefined
       let frame = namedFrame ?? topFrame
 
       let handler = async () => {
+        if (event.signal.aborted) return
+
+        if (event.navigationType === 'traverse' && state.resetScroll) {
+          preserveStartingDocumentScrollState(navigation, event)
+        }
+
         let submission = await runtimeNavigation.getSubmission?.()
         if (event.signal.aborted) return
 
@@ -150,16 +197,17 @@ export function startNavigationListenerImpl(
             state: { ...state, src: redirectedTo },
             info: {
               type: frameRedirectNavigationInfoType,
+              resetScroll: state.resetScroll,
             } satisfies FrameRedirectNavigationInfo,
           })
         }
-
-        let isNewEntry = event.navigationType === 'push' || event.navigationType === 'replace'
-        if (state.resetScroll && isNewEntry) {
-          window.scrollTo(0, 0)
-        }
       }
 
+      let interceptOptions = {
+        handler,
+        scroll: state.resetScroll === false ? 'manual' : undefined,
+      } satisfies NavigationInterceptOptions
+
       if (runtimeNavigation.getSubmission) {
         // <form method="post"> navigations
         if (runtimeNavigation.replaceHistory && replayedSubmission == null) {
@@ -168,20 +216,19 @@ export function startNavigationListenerImpl(
 
           // Modern browsers allow you to update the in-flight navigation entry before it's committed
           if (supportsPrecommit) {
-            let interceptOptions: NavigationInterceptOptionsWithPrecommit = {
-              handler,
+            event.intercept({
+              ...interceptOptions,
               precommitHandler(controller) {
                 controller.redirect(event.destination.url, { history: 'replace' })
               },
-            }
-            event.intercept(interceptOptions)
+            })
             return
           }
 
           // Safari doesn't support precommit as of Aug 2026, so we do a full replacement navigation
           if (event.cancelable) {
             event.preventDefault()
-            window.navigation.navigate(event.destination.url, {
+            navigation.navigate(event.destination.url, {
               history: 'replace',
               state,
               info: {
@@ -194,14 +241,14 @@ export function startNavigationListenerImpl(
           }
         }
 
-        event.intercept({ handler })
+        event.intercept(interceptOptions)
       } else {
         // <a>/<form method="get"> navigations
         if (runtimeNavigation.replaceHistory && event.cancelable) {
           event.preventDefault()
           navigation.navigate(event.destination.url, { history: 'replace', state })
         } else {
-          event.intercept({ handler })
+          event.intercept(interceptOptions)
         }
       }
     },
@@ -231,7 +278,9 @@ function isFrameRedirectNavigationInfo(value: unknown): value is FrameRedirectNa
     typeof value === 'object' &&
     value != null &&
     'type' in value &&
-    value.type === frameRedirectNavigationInfoType
+    value.type === frameRedirectNavigationInfoType &&
+    'resetScroll' in value &&
+    typeof value.resetScroll === 'boolean'
   )
 }
 
@@ -240,23 +289,69 @@ function isCrossOriginDestination(event: NavigateEvent): boolean {
   return destination.origin !== window.location.origin
 }
 
+function preserveStartingDocumentScrollState(navigation: Navigation, event: NavigateEvent): void {
+  // Full-document reconciliation can temporarily shrink the page or trigger scroll anchoring
+  // before the Navigation API performs its deferred restoration. Preserve the starting scroll
+  // range and position until the navigation finishes so native restoration remains authoritative.
+  // Root scroll height includes page-level effects such as body padding.
+
+  // We think this is a bug in Chromium where they are incorrectly classifying a
+  // DOM-modification-driven scroll change as a user scroll action, causing it to skip restoration
+  // after the transition. The intended user-scroll behavior is tested here:
+  // https://github.com/web-platform-tests/wpt/blob/master/navigation-api/scroll-behavior/after-transition-skips-restore-when-scrolled.html
+
+  let { scrollHeight, clientHeight } = document.documentElement
+  let stylesheet = new CSSStyleSheet()
+  stylesheet.replaceSync(`
+    html {
+      min-height: ${scrollHeight + clientHeight}px !important;
+      overflow-anchor: none !important;
+    }
+
+    body {
+      overflow-anchor: none !important;
+    }
+  `)
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet]
+
+  let cleanedUp = false
+  let cleanup = () => {
+    if (cleanedUp) return
+    cleanedUp = true
+    event.signal.removeEventListener('abort', cleanup)
+    navigation.removeEventListener('navigatesuccess', cleanup)
+    navigation.removeEventListener('navigateerror', cleanup)
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (current) => current !== stylesheet,
+    )
+  }
+
+  event.signal.addEventListener('abort', cleanup, { once: true })
+  navigation.addEventListener('navigatesuccess', cleanup, { once: true })
+  navigation.addEventListener('navigateerror', cleanup, { once: true })
+}
+
 function getRuntimeNavigation(
+  navigation: Navigation,
   event: NavigateEvent,
   resolveFormNavigation: ReturnType<typeof createFormNavigationResolver>,
 ): RuntimeNavigation | undefined {
   if (event.navigationType === 'traverse') {
-    let state = getTraverseNavigationState(event)
+    let state = getTraverseNavigationState(navigation, event)
     return state ? { state } : undefined
   }
 
-  let sourceNavigation = getSourceElementNavigation(event, resolveFormNavigation)
+  let sourceNavigation = getSourceElementNavigation(navigation, event, resolveFormNavigation)
   if (sourceNavigation) return sourceNavigation
 
   let destinationState = event.destination.getState()
   if (isRuntimeNavigation(destinationState)) return { state: destinationState }
 }
 
-function getTraverseNavigationState(event: NavigateEvent): NavigationState | undefined {
+function getTraverseNavigationState(
+  navigation: Navigation,
+  event: NavigateEvent,
+): NavigationState | undefined {
   let destinationState = event.destination.getState()
   if (isRuntimeNavigation(destinationState)) {
     return destinationState
@@ -264,7 +359,6 @@ function getTraverseNavigationState(event: NavigateEvent): NavigationState | und
 
   // Safari returns `null` for destination.getState(), even though its in the
   // navigation.entries(), so we do its job for it and look it up.
-  let navigation = window.navigation
   let matchingEntry = navigation.entries().find((entry) => entry.key === event.destination.key)
   if (matchingEntry) {
     let state = matchingEntry.getState()
@@ -277,6 +371,7 @@ function getTraverseNavigationState(event: NavigateEvent): NavigationState | und
 }
 
 function getSourceElementNavigation(
+  navigation: Navigation,
   event: NavigateEvent,
   resolveFormNavigation: ReturnType<typeof createFormNavigationResolver>,
 ): RuntimeNavigation | undefined {
@@ -286,36 +381,36 @@ function getSourceElementNavigation(
 
   let linkElement = sourceElement.closest('a, area')
   if (linkElement instanceof Element) {
-    if (linkElement.hasAttribute('rmx-document')) return
+    if (linkElement.hasAttribute('data-rmx-document')) return
     if (linkElement.hasAttribute('download')) return
 
     return {
       state: {
-        target: linkElement.getAttribute('rmx-target') ?? undefined,
-        src: linkElement.getAttribute('rmx-src') ?? event.destination.url,
-        resetScroll: linkElement.getAttribute('rmx-reset-scroll') !== 'false',
+        target: linkElement.getAttribute('data-rmx-target') ?? undefined,
+        src: linkElement.getAttribute('data-rmx-src') ?? event.destination.url,
+        resetScroll: linkElement.getAttribute('data-rmx-reset-scroll') !== 'false',
         $rmx: true,
       },
-      replaceHistory: getReplaceHistory(linkElement.getAttribute('rmx-history'), false),
+      replaceHistory: getReplaceHistory(linkElement.getAttribute('data-rmx-history'), false),
     }
   }
 
   let formNavigation = resolveFormNavigation(event)
-  if (!formNavigation || formNavigation.hasAttribute('rmx-document')) return
+  if (!formNavigation || formNavigation.hasAttribute('data-rmx-document')) return
 
   let replaceHistoryByDefault =
     formNavigation.getSubmission !== undefined &&
-    event.destination.url === window.navigation.currentEntry?.url
+    event.destination.url === navigation.currentEntry?.url
 
   return {
     state: {
-      target: formNavigation.getAttribute('rmx-target') ?? undefined,
-      src: formNavigation.getAttribute('rmx-src') ?? event.destination.url,
-      resetScroll: formNavigation.getAttribute('rmx-reset-scroll') !== 'false',
+      target: formNavigation.getAttribute('data-rmx-target') ?? undefined,
+      src: formNavigation.getAttribute('data-rmx-src') ?? event.destination.url,
+      resetScroll: formNavigation.getAttribute('data-rmx-reset-scroll') !== 'false',
       $rmx: true,
     },
     replaceHistory: getReplaceHistory(
-      formNavigation.getAttribute('rmx-history'),
+      formNavigation.getAttribute('data-rmx-history'),
       replaceHistoryByDefault,
     ),
     getSubmission: formNavigation.getSubmission,

package/src/runtime/reconcile.ts

@@ -1163,7 +1163,7 @@ function insertFrame(
       resolveController: undefined,
     },
   })
-  resolveClientFrame(committed, runtime)
+  resolveClientFrame(committed, runtime, runtime.serverFrameReload)
 
   return committed
 }
@@ -1171,7 +1171,7 @@ function insertFrame(
 function resolveClientFrame(
   node: CommittedFrameNode,
   runtime: FrameRuntime,
-  serverFrameReload?: { signal: AbortSignal },
+  serverFrameReload?: NonNullable<FrameRuntime['serverFrameReload']>,
 ): void {
   let frameSrc = getFrameSrc(node)
   let state = node._state
@@ -1189,7 +1189,7 @@ function resolveClientFrame(
   let resolveController = reload?.controller ?? new AbortController()
   state.resolveController = resolveController
 
-  Promise.resolve()
+  let resolve = Promise.resolve()
     .then(() =>
       runtime.resolveFrame(frameSrc, {
         signal: resolveController.signal,
@@ -1203,7 +1203,10 @@ function resolveClientFrame(
       state.fallbackRoot?.dispose()
       state.fallbackRoot = undefined
       let nextContent = asAbortableFrameContent(content, resolveController.signal)
-      await instance.render(nextContent, { signal: resolveController.signal })
+      await instance.render(nextContent, {
+        signal: resolveController.signal,
+        reconciliationTracker: serverFrameReload?.reconciliationTracker,
+      })
       if (state.resolveToken !== token || resolveController.signal.aborted) return
       state.resolved = true
     })
@@ -1218,6 +1221,10 @@ function resolveClientFrame(
         state.resolveController = undefined
       }
     })
+
+  if (serverFrameReload?.reconciliationTracker && !node.props.fallback) {
+    serverFrameReload.reconciliationTracker.waitFor(resolve)
+  }
 }
 
 function disposeFrameResources(node: CommittedFrameNode): void {

package/src/runtime/run.ts

@@ -76,9 +76,12 @@ export function getNamedFrame(name: string): FrameHandle {
 // manual reloads use the requested form encoding instead of always sending multipart bodies.
 function getRequestBody(options?: ResolveFrameOptions): BodyInit | undefined {
   let formData = options?.formData
-  if (!formData || options?.method?.toLowerCase() === 'get') return
+  let method = options?.method
+  if (!formData || !method || ['get', 'head'].includes(method.toLowerCase())) return
 
-  if (options?.encType === 'text/plain') {
+  let encType = options?.encType
+
+  if (encType === 'text/plain') {
     let body = ''
     for (let [name, value] of formData) {
       name = normalizeLineBreaks(name)
@@ -88,7 +91,7 @@ function getRequestBody(options?: ResolveFrameOptions): BodyInit | undefined {
     return new Blob([body], { type: 'text/plain' })
   }
 
-  if (options?.encType !== 'application/x-www-form-urlencoded') return formData
+  if (encType !== 'application/x-www-form-urlencoded') return formData
 
   let body = new URLSearchParams()
   for (let [name, value] of formData) {

package/src/runtime/scheduler.ts

@@ -35,13 +35,21 @@ export interface Scheduler {
   dequeue(): void
 }
 
-// Protect against infinite cascading updates (e.g. handle.update() during render)
-const MAX_CASCADING_UPDATES = 50
+const CASCADING_UPDATE_WARN_THRESHOLD = 50
+const MAX_CASCADING_COMPONENT_UPDATES = 50
 
 export type SchedulerPhaseEvent = Event & {
   parents: ParentNode[]
 }
 
+function getComponentName(vnode: CommittedComponentNode): string {
+  return vnode.type.name || 'Anonymous'
+}
+
+function formatComponentCounts(counts: Map<string, number>): string {
+  return Array.from(counts, ([name, count]) => `${name} x${count}`).join(', ')
+}
+
 /**
  * Creates the DOM update scheduler used by the component runtime.
  *
@@ -62,7 +70,10 @@ export function createScheduler(
   let postCommitTasks: EmptyFn[] = []
   let flushScheduled = false
   let flushing = false
-  let cascadingUpdateCount = 0
+  let cascadingComponentUpdateCount = 0
+  let cascadingComponentUpdateCounts = new WeakMap<CommittedComponentNode, number>()
+  let cascadingComponentNameCounts = new Map<string, number>()
+  let warnedAboutCascadingUpdates = false
   let resetScheduled = false
   let phaseEvents = new EventTarget()
   let phaseListenerCounts: Record<SchedulerPhaseType, number> = {
@@ -82,11 +93,48 @@ export function createScheduler(
     // Reset when control returns to the event loop while still allowing
     // microtask-driven flushes in the same turn to count as cascading.
     setTimeout(() => {
-      cascadingUpdateCount = 0
+      cascadingComponentUpdateCount = 0
+      cascadingComponentUpdateCounts = new WeakMap()
+      cascadingComponentNameCounts = new Map()
+      warnedAboutCascadingUpdates = false
       resetScheduled = false
     }, 0)
   }
 
+  function trackCascadingUpdate(vnode: CommittedComponentNode): boolean {
+    cascadingComponentUpdateCount++
+
+    let componentName = getComponentName(vnode)
+    cascadingComponentNameCounts.set(
+      componentName,
+      (cascadingComponentNameCounts.get(componentName) ?? 0) + 1,
+    )
+
+    let componentUpdateCount = (cascadingComponentUpdateCounts.get(vnode) ?? 0) + 1
+    cascadingComponentUpdateCounts.set(vnode, componentUpdateCount)
+    scheduleCounterReset()
+
+    if (
+      !warnedAboutCascadingUpdates &&
+      cascadingComponentUpdateCount >= CASCADING_UPDATE_WARN_THRESHOLD
+    ) {
+      warnedAboutCascadingUpdates = true
+      console.warn(
+        `${cascadingComponentUpdateCount} cascading component updates detected in one event loop turn. Consider reducing hydration regions. Components: ${formatComponentCounts(cascadingComponentNameCounts)}`,
+      )
+    }
+
+    if (componentUpdateCount > MAX_CASCADING_COMPONENT_UPDATES) {
+      let error = new Error(
+        `handle.update() infinite loop detected in ${componentName} after ${componentUpdateCount} cascading updates. Components: ${formatComponentCounts(cascadingComponentNameCounts)}`,
+      )
+      dispatchError(error)
+      return false
+    }
+
+    return true
+  }
+
   function flush() {
     if (flushing) return
     flushing = true
@@ -104,15 +152,6 @@ export function createScheduler(
           postCommitTasks.length > 0
         if (!hasWork) return
 
-        cascadingUpdateCount++
-        scheduleCounterReset()
-
-        if (cascadingUpdateCount > MAX_CASCADING_UPDATES) {
-          let error = new Error('handle.update() infinite loop detected')
-          dispatchError(error)
-          return
-        }
-
         documentState.capture()
 
         let updateParents = batch.size > 0 ? Array.from(new Set(batch.values())) : []
@@ -125,6 +164,7 @@ export function createScheduler(
 
           for (let [vnode, domParent] of vnodes) {
             if (ancestorIsScheduled(vnode, batch, noScheduledAncestor)) continue
+            if (!trackCascadingUpdate(vnode)) return
             let curr = vnode._content
             // Calculate anchor at render time from current vdom position (never stale).
             // Needed for fragment self-updates that add children - without this, new children

package/src/runtime/spa-response.ts

@@ -0,0 +1,56 @@
+import type { RemixNode } from './jsx.ts'
+
+type SPAResponseData = {
+  node: RemixNode
+  redirectedTo?: string
+}
+
+let spaResponses: WeakMap<Response, SPAResponseData> | undefined
+
+/**
+ * Creates and finalizes responses carrying renderable Remix nodes for the SPA runtime.
+ */
+export const spaResponse = {
+  /**
+   * Creates a bodyless response associated with a renderable Remix node.
+   *
+   * @param node Node to render when the response resolves a frame.
+   * @param init Standard response status, status text, and headers.
+   * @returns A response understood by the SPA runtime.
+   * @throws {TypeError} When called outside a browser environment.
+   */
+  create(node: RemixNode, init?: ResponseInit): Response {
+    if (typeof document === 'undefined') {
+      throw new TypeError('spaResponse.create() can only be used in a browser')
+    }
+
+    let response = new Response(null, init)
+    let responses = (spaResponses ??= new WeakMap())
+    responses.set(response, { node })
+    return response
+  },
+
+  /**
+   * Prepares the final route response for frame resolution.
+   *
+   * @param response Final response returned by the SPA router.
+   * @param redirectedTo Final redirect URL, when the route followed redirects.
+   * @returns The same response after validating it and recording its redirect URL.
+   * @throws {TypeError} When the response was not created by `spaResponse.create()`.
+   */
+  finalize(response: Response, redirectedTo?: string): Response {
+    let data = getSpaResponseData(response)
+    if (!data) throw new TypeError('Expected a Remix SPA response')
+
+    if (redirectedTo === undefined) {
+      delete data.redirectedTo
+    } else {
+      data.redirectedTo = redirectedTo
+    }
+    return response
+  },
+}
+
+export function getSpaResponseData(response: Response): SPAResponseData | undefined {
+  return spaResponses?.get(response)
+}

package/src/runtime/typed-event-target.ts

@@ -1,12 +1,7 @@
 /**
  * An `EventTarget` subclass with typed event maps.
  */
-export class TypedEventTarget<eventMap> extends EventTarget {
-  /**
-   * Phantom property that carries the event map type on instances.
-   */
-  declare readonly __eventMap?: eventMap
-}
+export class TypedEventTarget<eventMap> extends EventTarget {}
 
 /**
  * Interface surface for {@link TypedEventTarget} with typed listener overloads.

package/src/server/stream.ts

@@ -492,7 +492,7 @@ function buildFrameSegment(
     framePromise.catch(() => {})
     context.pendingFrames.push({ frameId, promise: framePromise })
   } else {
-    seg.pending = Promise.resolve(
+    let framePromise = Promise.resolve(
       context.resolveFrame(props.src, props.name, resolveFrameContext),
     ).then(async (resolved) => {
       let { html, tail } = await resolveFrameHtml(resolved)
@@ -502,6 +502,9 @@ function buildFrameSegment(
         context.blockingFrameTails.push(tail)
       }
     })
+    // An earlier blocking frame may reject before this promise is awaited.
+    framePromise.catch(() => {})
+    seg.pending = framePromise
   }
 
   return seg
@@ -535,6 +538,16 @@ function buildElementSegment(
     return staticSeg(`<${tag}${attrs}>${props.innerHTML}</${tag}>`)
   }
 
+  if (tag === 'script') {
+    if (typeof props.children === 'string') {
+      return staticSeg(`<${tag}${attrs}>${escapeScriptTextContent(props.children)}</${tag}>`)
+    }
+    if (props.children != null) {
+      console.error(new Error('script elements with children must have a single string child'))
+    }
+    return staticSeg(`<${tag}${attrs}></${tag}>`)
+  }
+
   let open = staticSeg(`<${tag}${attrs}>`)
   // Adjust svg context for children: foreignObject switches back to HTML
   let previousInsideSvg = context.insideSvg
@@ -1174,6 +1187,16 @@ function escapeTemplateContent(html: string): string {
   return html.replace(/<\/template/gi, '<\\/template')
 }
 
+const SCRIPT_TAG_PATTERN = /(<\/|<)(s)(cript)/gi
+
+function escapeScriptTextContent(value: string): string {
+  return value.replace(
+    SCRIPT_TAG_PATTERN,
+    (_match, prefix: string, firstLetter: string, suffix: string) =>
+      `${prefix}${firstLetter === 's' ? '\\u0073' : '\\u0053'}${suffix}`,
+  )
+}
+
 function transformAttributeName(name: string, isSvg: boolean): string {
   return normalizeAttributeName(name, isSvg).attr
 }
@@ -1232,7 +1255,7 @@ function finalizeHtml(html: string, context: RenderContext): string {
 
 const FRAME_HEAD_OPEN_TAG = '<head>'
 const FRAME_HEAD_CLOSE_TAG = '</head>'
-const MARKED_MODULE_PRELOAD_START = '<link data-rmx rel="modulepreload" href="'
+const MARKED_MODULE_PRELOAD_START = '<link data-rmx-module-preload rel="modulepreload" href="'
 const MODULE_PRELOAD_END = '" />'
 
 function createModulePreloadTag(href: string): string {
@@ -1322,12 +1345,12 @@ function renderStyleTag(
 ): string {
   let wrappedCss = wrapStyleForLayer(selector, css, layer)
   if (!wrappedCss) return ''
-  return `<style data-rmx="${escapeHtml(selector)}">${escapeStyleText(wrappedCss)}</style>`
+  return `<style data-rmx-style="${escapeHtml(selector)}">${escapeStyleText(wrappedCss)}</style>`
 }
 
 function escapeStyleText(css: string): string {
-  // A literal "</style" closes an HTML style element even when it appears inside a CSS string.
-  return css.replace(/</g, '\\3C ')
+  // Only neutralize literal style end tags. Escaping every '<' breaks valid range media queries.
+  return css.replace(/<\/style/gi, '\\3C/style')
 }
 
 function buildRmxDataScript(context: RenderContext): string {

package/src/style/stylesheet.ts

@@ -7,7 +7,7 @@ import { REMIX_UI_STYLE_LAYER } from './layers.ts'
 // never become *wrong* — only unused. That observation drives a two-tier
 // lifetime model on a single document-level registry:
 //
-// - **Server-adopted rules are pinned.** Once a `<style data-rmx>` tag is
+// - **Server-adopted rules are pinned.** Once a `<style data-rmx-style>` tag is
 //   adopted, its rule stays for the life of the manager. Frame reloads,
 //   island hydration, and streamed templates never need to agree on which
 //   scope "owns" a shared rule — adoption is additive and idempotent, and the
@@ -34,7 +34,7 @@ export interface StyleManager {
   dispose(): void
 }
 
-const SERVER_STYLE_SELECTOR = 'style[data-rmx]'
+const SERVER_STYLE_SELECTOR = 'style[data-rmx-style]'
 
 function getStyleLayerName(className: string, layer: string = REMIX_UI_STYLE_LAYER): string {
   return `${layer}.${className}`
@@ -95,7 +95,7 @@ function isHtmlStyleElement(node: unknown): node is HTMLStyleElement {
 }
 
 function getStyleSelector(styleEl: HTMLStyleElement): string | null {
-  let selector = styleEl.getAttribute('data-rmx')?.trim()
+  let selector = styleEl.getAttribute('data-rmx-style')?.trim()
   return selector ? selector : null
 }