@remix-run/ui 0.4.0 → 0.6.0

package/src/runtime/vnode.ts

@@ -1,7 +1,13 @@
-import type { ComponentHandle, Component } from './component.ts'
-import { Fragment, Frame } from './component.ts'
+import type { ComponentHandle, Fragment, Frame, FrameHandle, FrameProps } from './component.ts'
 import { isRemixElement } from './core/vnode.ts'
-import type { ElementProps, RemixNode } from './jsx.ts'
+import type { Frame as FrameInstance } from './frame.ts'
+import type { RemixNode } from './jsx.ts'
+import type { ElementFunction } from './element-function.ts'
+import type { Key } from './key.ts'
+import type { MixinRuntimeState, MixinRuntimeValue } from './mixins/mixin.ts'
+import type { OnMixinDescriptor } from './mixins/on-mixin.ts'
+import type { Scheduler } from './scheduler.ts'
+import type { StyleManager } from '../style/index.ts'
 
 export { isRemixElement }
 
@@ -9,136 +15,234 @@ export const TEXT_NODE = Symbol('TEXT_NODE')
 export const NON_RENDER_NODE = Symbol('NON_RENDER_NODE')
 export const ROOT_VNODE = Symbol('ROOT_VNODE')
 
-export type VNodeType =
-  | typeof ROOT_VNODE
-  | string // host element
-  | Function // component
-  | typeof TEXT_NODE
-  | typeof NON_RENDER_NODE
-  | typeof Fragment
-  | typeof Frame
-
-export type VNode<T extends VNodeType = VNodeType> = {
-  type: T
-  props?: ElementProps
-  _mixedProps?: ElementProps
-  key?: string
-
-  // _prefixes assigned during reconciliation
-  _parent?: VNode
-  _children?: VNode[]
-  _dom?: unknown
-  _controller?: AbortController
-  _mixState?: unknown
-  _directEventDescriptors?: unknown
-  _directEventState?: unknown
-  _controlledState?: unknown
-  _svg?: boolean
-  // Range roots render between comment boundary markers
-  _rangeStart?: Node
-  _rangeEnd?: Node
-  _pendingHydrationComponentId?: string
-  _frameInstance?: unknown
-  _frameFallbackRoot?: { render: (element: RemixNode) => void; dispose: () => void }
-  _frameResolveToken?: number
-  _frameResolveController?: AbortController
-  _frameResolved?: boolean
+export type VNodeKind = 'root' | 'empty' | 'text' | 'fragment' | 'host' | 'component' | 'frame'
 
-  // TEXT_NODE
-  _text?: string
-
-  // Component
-  _handle?: ComponentHandle
-  _id?: string
-  _content?: VNode
+export type RuntimeElementProps = {
+  [name: string]: unknown
+}
 
-  // Mixin-persisted node removal state
-  _persistedByMixins?: boolean
-  _persistedParentByMixins?: ParentNode
-  _persistedRemovalToken?: number
+export type RuntimeHostProps = RuntimeElementProps & {
+  children?: RemixNode
+  innerHTML?: string
+  mix?: MixinRuntimeValue
 }
 
-export type FragmentNode = VNode & {
-  type: typeof Fragment
-  _children: VNode[]
+type InputNodeBase<kind extends VNodeKind, type> = {
+  kind: kind
+  type: type
+  key?: Key
+  _parent?: never
 }
 
-export type TextNode = VNode & {
-  type: typeof TEXT_NODE
+export type NonRenderNode = InputNodeBase<'empty', typeof NON_RENDER_NODE>
+
+export type TextNode = InputNodeBase<'text', typeof TEXT_NODE> & {
   _text: string
 }
 
-export type NonRenderNode = VNode & {
-  type: typeof NON_RENDER_NODE
+export type FragmentNode = InputNodeBase<'fragment', typeof Fragment> & {
+  _children: VNodeInput[]
+}
+
+export type HostNode = InputNodeBase<'host', string> & {
+  props: RuntimeHostProps
+  _children: VNodeInput[]
+}
+
+export type ComponentNode = InputNodeBase<'component', ElementFunction> & {
+  props: RuntimeElementProps
+}
+
+export type FrameNode = InputNodeBase<'frame', typeof Frame> & {
+  props: RuntimeElementProps & FrameProps
 }
 
-export type CommittedTextNode = TextNode & {
+export type VNodeInput =
+  | NonRenderNode
+  | TextNode
+  | FragmentNode
+  | HostNode
+  | ComponentNode
+  | FrameNode
+
+type MountedNodeBase = {
+  _parent: VNodeParent
+  _svg: boolean
+}
+
+type CommittedNodeBase<kind extends VNodeKind, type> = {
+  kind: kind
+  type: type
+  key?: Key
+} & MountedNodeBase
+
+export type CommittedNonRenderNode = CommittedNodeBase<'empty', typeof NON_RENDER_NODE>
+
+export type CommittedTextNode = CommittedNodeBase<'text', typeof TEXT_NODE> & {
+  _text: string
   _dom: Text
 }
 
-export type HostNode = VNode & {
+export type ControlledReflectionState = {
+  disposed: boolean
+  listenersAttached: boolean
+  pendingRestoreVersion: number
+  managesValue: boolean
+  managesChecked: boolean
+  hasControlledValue: boolean
+  controlledValue: unknown
+  hasControlledChecked: boolean
+  controlledChecked: unknown
+  onInput(): void
+  onChange(): void
+}
+
+export type DirectEventBinding = {
   type: string
-  props: ElementProps
-  _children: VNode[]
+  handler: (event: Event, signal: AbortSignal) => void | Promise<void>
+  capture: boolean
+  stableHandler: ((event: Event) => void) | null
+  reentry: AbortController | null
+}
+
+export type DirectEventState = {
+  bindings: DirectEventBinding[]
+}
+
+export type HostPersistenceState = {
+  parent: ParentNode
+  token: number
 }
 
-export type CommittedHostNode = HostNode & {
+export type CommittedHostNode = CommittedNodeBase<'host', string> & {
+  props: RuntimeHostProps
+  _children: CommittedVNode[]
   _dom: Element
-  _controller?: AbortController
+  _mixedProps: RuntimeHostProps
+  _mixState?: MixinRuntimeState
+  _directEventDescriptors?: OnMixinDescriptor[]
+  _directEventState?: DirectEventState
+  _controlledState?: ControlledReflectionState
+  _persistence?: HostPersistenceState
 }
 
-export type ComponentNode = VNode & {
-  type: Function
-  props: ElementProps
-  _handle: ComponentHandle
+export type CommittedFragmentNode = CommittedNodeBase<'fragment', typeof Fragment> & {
+  _children: CommittedVNode[]
 }
 
-export type CommittedComponentNode = VNode & {
-  type: Function
-  props: ElementProps
-  _content: VNode
+export type MountingComponentNode = CommittedNodeBase<'component', ElementFunction> & {
+  props: RuntimeElementProps
   _handle: ComponentHandle
+  _context: ReconcileContext
+}
+
+export type CommittedComponentNode = MountingComponentNode & {
+  _content: CommittedVNode
 }
 
-export function isFragmentNode(node: VNode): node is FragmentNode {
-  return node.type === Fragment
+export interface FrameFallbackRoot {
+  render(element: RemixNode): void
+  dispose(): void
 }
 
-export function isTextNode(node: VNode): node is TextNode {
-  return node.type === TEXT_NODE
+export type FrameMountState = {
+  instance: FrameInstance
+  fallbackRoot?: FrameFallbackRoot
+  resolveToken: number
+  resolveController?: AbortController
+  resolved: boolean
 }
 
-export function isNonRenderNode(node: VNode): node is NonRenderNode {
-  return node.type === NON_RENDER_NODE
+export type CommittedFrameNode = CommittedNodeBase<'frame', typeof Frame> & {
+  props: RuntimeElementProps & FrameProps
+  _rangeStart: Comment
+  _rangeEnd: Comment
+  _state: FrameMountState
+}
+
+export type CommittedVNode =
+  | CommittedNonRenderNode
+  | CommittedTextNode
+  | CommittedFragmentNode
+  | CommittedHostNode
+  | CommittedComponentNode
+  | CommittedFrameNode
+
+export type RootVNode = {
+  kind: 'root'
+  type: typeof ROOT_VNODE
+  _children: CommittedVNode[]
+  _svg: boolean
+  _rangeStart?: Node
+  _rangeEnd?: Node
+  _pendingHydrationComponentId?: string
 }
 
-export function isCommittedTextNode(node: VNode): node is CommittedTextNode {
-  return isTextNode(node) && node._dom instanceof Text
+export interface ReconcileContext {
+  frame: FrameHandle
+  scheduler: Scheduler
+  styles: StyleManager
+  rootTarget: EventTarget
 }
 
-export function isHostNode(node: VNode): node is HostNode {
-  return typeof node.type === 'string'
+export type VNodeParent =
+  | RootVNode
+  | CommittedFragmentNode
+  | CommittedHostNode
+  | MountingComponentNode
+  | CommittedComponentNode
+
+export type VNode = VNodeInput | CommittedVNode | RootVNode | MountingComponentNode
+
+export function isFragmentNode(node: VNode): node is FragmentNode | CommittedFragmentNode {
+  return node.kind === 'fragment'
 }
 
-export function isCommittedHostNode(node: VNode): node is CommittedHostNode {
-  return isHostNode(node) && node._dom instanceof Element
+export function isTextNode(node: VNode): node is TextNode | CommittedTextNode {
+  return node.kind === 'text'
 }
 
-export function isComponentNode(node: VNode): node is ComponentNode {
-  return typeof node.type === 'function' && node.type !== Frame
+export function isNonRenderNode(node: VNode): node is NonRenderNode | CommittedNonRenderNode {
+  return node.kind === 'empty'
+}
+
+export function isCommittedTextNode(node: CommittedVNode): node is CommittedTextNode {
+  return node.kind === 'text'
+}
+
+export function isHostNode(node: VNode): node is HostNode | CommittedHostNode {
+  return node.kind === 'host'
+}
+
+export function isCommittedHostNode(node: CommittedVNode): node is CommittedHostNode {
+  return node.kind === 'host'
+}
+
+export function isComponentNode(
+  node: VNode,
+): node is ComponentNode | MountingComponentNode | CommittedComponentNode {
+  return node.kind === 'component'
 }
 
 export function isCommittedComponentNode(node: VNode): node is CommittedComponentNode {
-  return isComponentNode(node) && node._content !== undefined
+  return node.kind === 'component' && '_content' in node
+}
+
+export function isFrameNode(node: VNode): node is FrameNode | CommittedFrameNode {
+  return node.kind === 'frame'
+}
+
+export function isCommittedFrameNode(node: CommittedVNode): node is CommittedFrameNode {
+  return node.kind === 'frame'
 }
 
-export function findContextFromAncestry(node: VNode, type: Component): unknown {
-  let current: VNode | undefined = node
+export function findContextFromAncestry(node: VNodeParent, type: ElementFunction): unknown {
+  let current: VNodeParent | undefined = node
   while (current) {
-    if (current.type === type && isComponentNode(current)) {
+    if (current.kind === 'component' && current.type === type) {
       return current._handle.getContextValue()
     }
-    current = current._parent
+    current = '_parent' in current ? current._parent : undefined
   }
   return undefined
 }

package/src/select/index.tsx

@@ -30,10 +30,10 @@ export type SelectOptionProps = Props<'div'> & {
 }
 
 const selectTriggerShadow =
-  '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.12)'
+  '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2))'
 
 const selectTriggerFocusShadow =
-  '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px #3573F6, 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)'
+  '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px light-dark(#3573F6, #6eaaff), 0 0 0 4px light-dark(rgba(53, 115, 246, 0.1), rgba(110, 170, 255, 0.18)), 0 6px 32px 4px light-dark(rgba(53, 115, 246, 0.08), rgba(110, 170, 255, 0.14)), inset 0 0 8px 1px light-dark(rgba(53, 115, 246, 0.05), rgba(110, 170, 255, 0.1))'
 
 const selectTriggerCss: CSSMixinDescriptor = css({
   appearance: 'none',
@@ -51,9 +51,9 @@ const selectTriggerCss: CSSMixinDescriptor = css({
   gap: '6px',
   border: 0,
   borderRadius: '8px',
-  background: '#FFFFFF',
+  background: 'light-dark(#FFFFFF, #1a1a1a)',
   boxShadow: selectTriggerShadow,
-  color: '#101010',
+  color: 'light-dark(#101010, #ececec)',
   fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
   fontStyle: 'normal',
   fontWeight: 400,
@@ -62,15 +62,15 @@ const selectTriggerCss: CSSMixinDescriptor = css({
   fontFeatureSettings: '"ss01" on, "cv01" on',
   letterSpacing: 0,
   textAlign: 'left',
-  textShadow: '0 1px 0 #FFFFFF',
+  textShadow: '0 1px 0 light-dark(#FFFFFF, rgb(0 0 0 / 0.35))',
   whiteSpace: 'nowrap',
   '&:hover, &:focus-visible, &[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible':
     {
-      background: '#FFFFFF',
-      color: '#101010',
+      background: 'light-dark(#FFFFFF, #1a1a1a)',
+      color: 'light-dark(#101010, #ececec)',
     },
   '&:active': {
-    background: '#FFFFFF',
+    background: 'light-dark(#FFFFFF, #1a1a1a)',
   },
   '&:focus-visible': {
     outline: 0,
@@ -99,7 +99,7 @@ const triggerIconCss: CSSMixinDescriptor = css({
   justifyContent: 'center',
   width: '16px',
   height: '16px',
-  color: '#707070',
+  color: 'light-dark(#707070, #b3b3b3)',
   flex: 'none',
   '& > svg': {
     display: 'block',

package/src/server/README.md

@@ -23,6 +23,7 @@ Renders a component tree to a streaming response. The initial HTML is sent immed
 
 ```tsx
 import { renderToStream } from 'remix/ui/server'
+import { assetServer } from './assets.ts'
 
 let stream = renderToStream(<App />, {
   frameSrc: request.url,
@@ -31,6 +32,17 @@ let stream = renderToStream(<App />, {
     let frameUrl = new URL(src, context?.currentFrameSrc ?? request.url)
     return fetchHtml(frameUrl)
   },
+  async resolveClientEntry(entryId, component) {
+    let [href, preloads] = await Promise.all([
+      assetServer.getHref(entryId),
+      assetServer.getPreloads(entryId),
+    ])
+    return {
+      href,
+      exportName: entryId.split('#')[1] || component.name,
+      preloads,
+    }
+  },
   onError(error) {
     console.error(error)
   },
@@ -47,6 +59,7 @@ return new Response(stream, {
 - **`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.
+- **`resolveClientEntry(entryId, component)`** - Resolves the public module URL, export name, and optional module preload hrefs for a hydrated client entry.
 - **`onError(error)`** - Called when a rendering error occurs. If not provided, the stream rejects with the error.
 
 When you render nested frame responses with `renderToStream()` inside `resolveFrame()`, pass `frameSrc` for the frame being rendered and carry `topFrameSrc` forward from the parent context. That preserves `handle.frames.top.src` across the whole SSR frame tree.

package/src/server/stream.ts

@@ -1,5 +1,6 @@
 import type { ComponentHandle, FrameHandle, Key, RemixNode } from '../runtime/component.ts'
 import type { ElementType, ElementProps, RemixElement } from '../runtime/jsx.ts'
+import type { ElementFunction } from '../runtime/element-function.ts'
 import { Fragment, createComponent, createFrameHandle, Frame } from '../runtime/component.ts'
 import { isEntry, type EntryComponent } from '../runtime/client-entries.ts'
 import {
@@ -76,6 +77,8 @@ interface UnresolvedHydrationData {
 interface ResolvedClientEntry {
   href: string
   exportName: string
+  /** Browser module hrefs to begin preloading before hydrating this entry. */
+  preloads?: readonly string[]
 }
 
 interface FrameData {
@@ -89,7 +92,6 @@ interface RenderContext {
   onError: (error: unknown) => void
   parentVNode?: VNode
   styleCache: Map<string, { selector: string; css: string }>
-  emittedStyles: Set<string>
   resolveFrame: (
     src: string,
     target?: string,
@@ -99,6 +101,7 @@ interface RenderContext {
   hydrationData: Map<string, HydrationData>
   unresolvedHydrationData: Map<string, UnresolvedHydrationData>
   frameData: Map<string, FrameData>
+  modulePreloadTags: Set<string>
   blockingFrameTails: ReadableStream<Uint8Array>[]
   signal: AbortSignal
   flushKind: FlushKind
@@ -203,11 +206,11 @@ export function renderToStream(
     onError,
     resolveFrame: options?.resolveFrame ?? defaultResolveFrame,
     styleCache: new Map(),
-    emittedStyles: new Set(),
     pendingFrames: [],
     hydrationData: new Map(),
     unresolvedHydrationData: new Map(),
     frameData: new Map(),
+    modulePreloadTags: new Set(),
     blockingFrameTails: [],
     signal: renderAbortController.signal,
     flushKind: 'fragment',
@@ -436,7 +439,7 @@ function buildSegment(node: RemixNode, context: RenderContext, frameState: SsrFr
       return buildElementSegment(tag, props, context, frameState)
     }
 
-    if (typeof type === 'function') {
+    if (isElementFunction(type)) {
       if (type === Frame) {
         return buildFrameSegment(node, context, frameState)
       }
@@ -493,6 +496,7 @@ function buildFrameSegment(
       context.resolveFrame(props.src, props.name, resolveFrameContext),
     ).then(async (resolved) => {
       let { html, tail } = await resolveFrameHtml(resolved)
+      html = hoistModulePreloadsFromFrameHead(html, context)
       seg.content = staticSeg(html)
       if (tail) {
         context.blockingFrameTails.push(tail)
@@ -788,8 +792,8 @@ function sanitizeReturnedSsrMixinProps(props: ElementProps): ElementProps {
 
 function resolveReturnedSsrMixDescriptors(
   value: unknown,
-): Array<{ type: Function; args: unknown[] }> | null {
-  let descriptors: Array<{ type: Function; args: unknown[] }> = []
+): Array<{ type: ElementFunction; args: unknown[] }> | null {
+  let descriptors: Array<{ type: ElementFunction; args: unknown[] }> = []
   if (!collectReturnedSsrMixDescriptors(value, descriptors)) {
     return null
   }
@@ -799,7 +803,7 @@ function resolveReturnedSsrMixDescriptors(
 
 function collectReturnedSsrMixDescriptors(
   value: unknown,
-  output: Array<{ type: Function; args: unknown[] }>,
+  output: Array<{ type: ElementFunction; args: unknown[] }>,
 ): boolean {
   if (!value) {
     return true
@@ -829,7 +833,11 @@ function isSsrMixinElement(
   return '__rmxMixinElementType' in value
 }
 
-function isSsrMixinDescriptor(value: unknown): value is { type: Function; args: unknown[] } {
+function isElementFunction(value: unknown): value is ElementFunction {
+  return typeof value === 'function'
+}
+
+function isSsrMixinDescriptor(value: unknown): value is { type: ElementFunction; args: unknown[] } {
   if (!value || typeof value !== 'object' || isRemixElement(value)) {
     return false
   }
@@ -839,7 +847,7 @@ function isSsrMixinDescriptor(value: unknown): value is { type: Function; args:
 }
 
 function buildComponentSegment(
-  type: Function,
+  type: ElementFunction,
   props: any,
   context: RenderContext,
   componentId: string,
@@ -923,7 +931,7 @@ function createHydrationPropsReplacer(context: RenderContext, frameState: SsrFra
     }
 
     // Component function: render synchronously, then unwrap its result
-    if (typeof type === 'function') {
+    if (isElementFunction(type)) {
       let vnode = createVNode(type, props)
       if (context.parentVNode) {
         vnode._parent = context.parentVNode
@@ -1070,6 +1078,10 @@ async function resolveClientEntries(
       moduleUrl: resolvedEntry.href,
       props,
     })
+
+    for (let preload of resolvedEntry.preloads ?? []) {
+      context.modulePreloadTags.add(createModulePreloadTag(preload))
+    }
   }
 
   context.unresolvedHydrationData.clear()
@@ -1092,6 +1104,19 @@ function validateResolvedClientEntry(
   if (!resolvedEntry.exportName) {
     throw new Error(`resolveClientEntry must return a non-empty exportName. Received "${entryId}".`)
   }
+
+  if (resolvedEntry.preloads !== undefined) {
+    if (!Array.isArray(resolvedEntry.preloads)) {
+      throw new Error(`resolveClientEntry preloads must be an array. Received "${entryId}".`)
+    }
+    for (let preload of resolvedEntry.preloads) {
+      if (typeof preload !== 'string' || preload.length === 0) {
+        throw new Error(
+          `resolveClientEntry preloads must contain non-empty strings. Received "${entryId}".`,
+        )
+      }
+    }
+  }
 }
 
 function validateClientEntriesForHydration(context: RenderContext): void {
@@ -1156,9 +1181,10 @@ function transformAttributeName(name: string, isSvg: boolean): string {
 function finalizeHtml(html: string, context: RenderContext): string {
   let hasHtmlRoot = context.flushKind === 'document'
 
+  let preloads = collectModulePreloadTags(context)
   let styles = collectStyleTags(context)
-  if (styles) {
-    let headContent = styles
+  if (preloads || styles) {
+    let headContent = preloads + styles
     if (hasHtmlRoot) {
       // For HTML root, inject into existing head or create one
       let headCloseIndex = html.indexOf('</head>')
@@ -1180,8 +1206,6 @@ function finalizeHtml(html: string, context: RenderContext): string {
     }
   }
 
-  html = dedupeServerStyleTagsInHtml(html, context.emittedStyles)
-
   // Append aggregated hydration/frame data script at the end
   let rmxData = buildRmxDataScript(context)
   if (rmxData) {
@@ -1206,6 +1230,52 @@ function finalizeHtml(html: string, context: RenderContext): string {
   return html
 }
 
+const FRAME_HEAD_OPEN_TAG = '<head>'
+const FRAME_HEAD_CLOSE_TAG = '</head>'
+const MARKED_MODULE_PRELOAD_START = '<link data-rmx rel="modulepreload" href="'
+const MODULE_PRELOAD_END = '" />'
+
+function createModulePreloadTag(href: string): string {
+  return `${MARKED_MODULE_PRELOAD_START}${escapeHtml(href)}${MODULE_PRELOAD_END}`
+}
+
+function collectModulePreloadTags(context: RenderContext): string {
+  return Array.from(context.modulePreloadTags).join('')
+}
+
+function hoistModulePreloadsFromFrameHead(html: string, context: RenderContext): string {
+  if (!html.startsWith(FRAME_HEAD_OPEN_TAG)) return html
+
+  let tags: string[] = []
+  let remainingHeadStart = FRAME_HEAD_OPEN_TAG.length
+  while (html.startsWith(MARKED_MODULE_PRELOAD_START, remainingHeadStart)) {
+    let tagEnd = html.indexOf(
+      MODULE_PRELOAD_END,
+      remainingHeadStart + MARKED_MODULE_PRELOAD_START.length,
+    )
+    if (tagEnd === -1) return html
+
+    tagEnd += MODULE_PRELOAD_END.length
+    tags.push(html.slice(remainingHeadStart, tagEnd))
+    remainingHeadStart = tagEnd
+  }
+
+  if (tags.length === 0) return html
+
+  let headClose = html.indexOf(FRAME_HEAD_CLOSE_TAG, remainingHeadStart)
+  if (headClose === -1) return html
+
+  for (let tag of tags) {
+    context.modulePreloadTags.add(tag)
+  }
+
+  if (remainingHeadStart === headClose) {
+    return html.slice(headClose + FRAME_HEAD_CLOSE_TAG.length)
+  }
+
+  return FRAME_HEAD_OPEN_TAG + html.slice(remainingHeadStart)
+}
+
 function processStyleProps(props: any): any {
   let processedProps = { ...props }
   let classAttr = typeof props.class === 'string' ? props.class : ''
@@ -1252,24 +1322,12 @@ function renderStyleTag(
 ): string {
   let wrappedCss = wrapStyleForLayer(selector, css, layer)
   if (!wrappedCss) return ''
-  return `<style data-rmx="${escapeHtml(selector)}">${wrappedCss}</style>`
+  return `<style data-rmx="${escapeHtml(selector)}">${escapeStyleText(wrappedCss)}</style>`
 }
 
-function readStyleTagAttribute(attrs: string, name: string): string | null {
-  let match = attrs.match(new RegExp(`\\b${name}=(?:"([^"]*)"|'([^']*)')`))
-  if (!match) return null
-  return match[1] ?? match[2] ?? null
-}
-
-function dedupeServerStyleTagsInHtml(html: string, seenStyles: Set<string>): string {
-  return html.replace(/<style\b([^>]*)>[\s\S]*?<\/style>/gi, (match, attrs) => {
-    let selector = readStyleTagAttribute(attrs, 'data-rmx')
-    if (!selector) return match
-
-    if (seenStyles.has(selector)) return ''
-    seenStyles.add(selector)
-    return match
-  })
+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 ')
 }
 
 function buildRmxDataScript(context: RenderContext): string {
@@ -1303,6 +1361,12 @@ function escapeScriptJson(json: string): string {
 // the handler's `finalizeHtml` emits selector-addressed `<style>` tags in its HTML, and on the client,
 // the `adoptServerStyleTag` MutationObserver (stylesheet.ts) picks it up anywhere in the
 // document and adopts the CSS into an adopted stylesheet.
+//
+// Style tags are intentionally NOT deduped across frame boundaries: each frame
+// owns its style rules independently on the client (per-frame refcounted
+// adoption), so every frame's HTML must carry the full set of style tags its
+// content references — even when a sibling frame or the enclosing document
+// already emitted the same selector.
 async function streamPendingFrames(
   context: RenderContext,
   controller: ReadableStreamDefaultController,
@@ -1323,7 +1387,6 @@ async function streamPendingFrames(
         try {
           let { html, tail } = await promise
           if (context.signal.aborted) return
-          html = dedupeServerStyleTagsInHtml(html, context.emittedStyles)
 
           // Stream as a template element (first chunk only)
           let templateHtml = `<template id="${frameId}">${escapeTemplateContent(html)}</template>`