From 59adb976729e42e111facd59574e6884a1684ed8 Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barry@barrymichaeldoyle.com>
Date: Wed, 28 Oct 2026 13:19:01 +0200
Subject: [PATCH 01/11] fix: preload eagerly rendered images and hoist charset
 and viewport metas in document renders

React's server renderer emits a <link rel="preload" as="image"> for every <img>
it renders eagerly and opens <head> with the charset and viewport metas. Redact
rendered the images and metas in place, so the browser only discovered a hero
image once the parser reached it in the body (#97).

Document renders (an <html> tree, or a synthesised head) now mirror React: an
<img> with a src or srcSet that is not loading="lazy" or fetchPriority="low",
not a data: URI and not inside <picture>, <noscript> or SVG adds an image preload
through the existing resource collector, sharing React's dedupe key with explicit
preload() calls. The first ten per flush and every fetchPriority="high" image go
ahead of the stylesheets, the rest after the scripts. <meta charSet> and
<meta name="viewport"> in the shell are hoisted to the start of the head; metas
streamed in later boundaries stay in place.

Fragment renders are unchanged: their root-container hydration adopts nodes by
position, so leading hints would mismatch there.

Server bundle cost: +308 B gzip source, +310 B built, recorded as an allowance
measured on Node 24.22.0 against main 0c7274e.
---
 .changeset/image-preloads.md                 |   5 +
 packages/redact/src/server/dispatcher.ts     |  15 +-
 packages/redact/src/server/resource-hints.ts |  23 ++-
 packages/redact/src/server/walk.ts           |  29 +++-
 scripts/size-check.mjs                       |   8 +-
 tests/image-preloads.test.tsx                | 160 +++++++++++++++++++
 6 files changed, 225 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/image-preloads.md
 create mode 100644 tests/image-preloads.test.tsx

diff --git a/.changeset/image-preloads.md b/.changeset/image-preloads.md
new file mode 100644
index 0000000..cb38ec2
--- /dev/null
+++ b/.changeset/image-preloads.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/redact': patch
+---
+
+Document renders now preload the images they render eagerly and open `<head>` with the charset and viewport metas, as React's server renderer does. Every `<img>` outside `<picture>`, `<noscript>` and SVG that has a `src` or `srcSet`, is not `loading="lazy"` or `fetchPriority="low"` and is not a `data:` URI gets a `<link rel="preload" as="image">`; the first ten and every `fetchPriority="high"` image are placed ahead of the stylesheets, the rest after the scripts.
diff --git a/packages/redact/src/server/dispatcher.ts b/packages/redact/src/server/dispatcher.ts
index fe22539..2f315d8 100644
--- a/packages/redact/src/server/dispatcher.ts
+++ b/packages/redact/src/server/dispatcher.ts
@@ -13,13 +13,18 @@ export interface SSRFrame {
   resources?: ReturnType<typeof createResourceHints>
   shellFlushed?: boolean
   styleNonce?: string | undefined
+  // Set once the walk has opened <head>. Image preloads and hoisted metas only belong to
+  // document renders, where the head is position-insensitive for hydration.
+  document?: boolean
 }
 
 let frame: SSRFrame | null = null
 
+const resources = () => frame!.resources ||= createResourceHints(!!frame!.shellFlushed, frame!.styleNonce)
+
 resourceHintDispatcher.emit = (kind, href, options) => {
   if (!frame) return false
-  ;(frame.resources ||= createResourceHints(!!frame.shellFlushed, frame.styleNonce)).add(kind, href, options)
+  resources().add(kind, href, options)
   return true
 }
 
@@ -35,7 +40,13 @@ export function currentSSRFrame(): SSRFrame {
 }
 
 export function recordHostResource(type: string, props: any, scope?: ResourceScope): boolean {
-  return !!frame && (frame.resources ||= createResourceHints(!!frame.shellFlushed, frame.styleNonce)).addHost(type, props, scope)
+  return !!frame && resources().addHost(type, props, scope)
+}
+
+// An <img> adds its preload. A charset or viewport <meta> in the shell returns the sink that
+// hoists its markup.
+export function recordHoisted(tag: string, props: any): ((chunk: string) => void) | null | void {
+  if (frame?.document) return tag === 'img' ? resources().addImage(props) : resources().addMeta(props)
 }
 
 export function endSSR(previous?: ReturnType<typeof beginSSR>): void {
diff --git a/packages/redact/src/server/resource-hints.ts b/packages/redact/src/server/resource-hints.ts
index 285812a..e2e46f5 100644
--- a/packages/redact/src/server/resource-hints.ts
+++ b/packages/redact/src/server/resource-hints.ts
@@ -1,4 +1,4 @@
-import { isFunction } from '../core/functions'
+import { isFunction, isString } from '../core/functions'
 import { resourceKind, resourceURL, type ResourceHintKind, type ResourceHintOptions } from '../core/resource-hints'
 import { attrToHtml, escapeAttr } from './escape'
 import { attributeName } from '../core/attributes'
@@ -56,8 +56,9 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
   const styles = new Map<string, Resource[]>()
   const dependencies = new Map<string, string[]>()
   const visibleInline = new Set<string>()
+  let charset = '', viewport = ''
   const collector = {
-    add(kind: ResourceHintKind | 'style', href: string, options: ResourceHintOptions): Resource {
+    add(kind: ResourceHintKind | 'style', href: string, options: ResourceHintOptions, eager?: boolean): Resource {
       let type: string = kind
       let source = href
       const init = kind === 'style' || kind === 'stylesheet' || kind === 'script' || kind === 'module-script'
@@ -89,12 +90,25 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
       } else {
         const group = kind === 'dns-prefetch' || kind === 'preconnect' ? 0
           : kind === 'preload' && options.as === 'font' ? 1
-          : kind === 'preload' && options.as === 'image' && options.fetchPriority === 'high' ? 2
+          : kind === 'preload' && options.as === 'image' && (options.fetchPriority === 'high' || eager && groups[2]!.length < 10) ? 2
           : init ? 3 : 4
         groups[group]!.push(resource)
       }
       return resource
     },
+    // Preload an eagerly rendered <img> as React does: the first ten per flush and every
+    // fetchPriority="high" image go ahead of the stylesheets, the rest after the scripts.
+    addImage(props: any): void {
+      const { srcSet } = props, source = srcSet || props.src
+      if (props.loading === 'lazy' || props.fetchPriority === 'low' || !source || !isString(source) || /^data:/i.test(source)) return
+      collector.add('preload', source, { as: 'image', imageSrcSet: srcSet, imageSizes: props.sizes, crossOrigin: props.crossOrigin, integrity: props.integrity, type: props.type, fetchPriority: props.fetchPriority, referrerPolicy: props.referrerPolicy } as any, true)
+    },
+    // Hoist <meta charSet> and <meta name="viewport"> to the start of the head. Content streamed
+    // after the shell keeps its metas in place.
+    addMeta(props: any): ((chunk: string) => void) | null {
+      const isCharset = isString(props.charSet)
+      return !shellFlushed && (isCharset || props.name === 'viewport') && props.itemProp == null ? chunk => { isCharset ? charset += chunk : viewport += chunk } : null
+    },
     addHost(type: string, props: any, scope?: ResourceScope): boolean {
       const kind = resourceKind(type, props)
       if (!kind) return false
@@ -127,7 +141,8 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
       return result
     },
     drain(): string {
-      let output = ''
+      let output = charset + viewport
+      charset = viewport = ''
       function flush(group: Resource[], precedence?: string) {
         let remaining = 0
         let inline = false, hasStylesheets = false
diff --git a/packages/redact/src/server/walk.ts b/packages/redact/src/server/walk.ts
index c015f74..8600bf8 100644
--- a/packages/redact/src/server/walk.ts
+++ b/packages/redact/src/server/walk.ts
@@ -34,6 +34,7 @@ import {
   popContext,
   snapshotContexts,
   recordHostResource,
+  recordHoisted,
   currentSSRFrame,
   type ContextSnapshot,
 } from './dispatcher'
@@ -68,7 +69,7 @@ export interface WalkOptions {
   bootstrapped?: boolean | undefined
   isBoundaryResolution?: boolean | undefined
   resourceScope?: ResourceScope | undefined
-  // Shared traversal flags: SVG = 1, adjacent text = 2.
+  // Shared traversal flags: SVG = 1, adjacent text = 2, inside <picture> or <noscript> = 4.
   // Host children restore previous flags on return or throw.
   textState?: { bits: number }
 }
@@ -247,6 +248,13 @@ function walkHost(
 ): void {
   const isSvg = !!(opts.textState!.bits & 1) || tag === 'svg'
   if (!isSvg && resourceKind(tag, props) && recordHostResource(tag, props, opts.resourceScope)) return
+  // In a document render React's server renderer preloads the images it renders eagerly and
+  // opens <head> with the charset and viewport metas. Neither applies inside <svg>, <picture>
+  // or <noscript>.
+  if (!isSvg && !(opts.textState!.bits & 4) && /^(img|meta)$/.test(tag)) {
+    const emit = recordHoisted(tag, props)
+    if (emit) opts = { ...opts, emit }
+  }
   // <textarea value="..."> serializes its value as a TEXT CHILD, not an
   // attribute. `defaultValue` is the fallback when `value` is absent. This
   // matches React and the HTML spec — `<textarea value="x">` is not valid
@@ -322,18 +330,18 @@ function walkHost(
 
   if (VOID_ELEMENTS.has(tag)) {
     opts.emit('/>')
-    opts.textState!.bits &= 1
+    opts.textState!.bits &= 5
     return
   }
   opts.emit('>')
-  if (tag === 'head') opts.onHead?.()
+  if (tag === 'head') openHead(opts)
   // Opening a host element starts a fresh text flow context for its children.
   // Children's text separator tracking is independent of the outer context.
   const parentTextState = opts.textState
 
   if (tag === 'html' && !hasHeadChild(props.children)) {
     opts.emit('<head>')
-    opts.onHead?.()
+    openHead(opts)
     opts.emit('</head>')
   }
 
@@ -342,7 +350,7 @@ function walkHost(
   if (isTextarea && textareaValue != null) {
     opts.emit(escapeText(String(textareaValue)))
     opts.emit(`</${tag}>`)
-    parentTextState!.bits &= 1
+    parentTextState!.bits &= 5
     return
   }
 
@@ -360,7 +368,7 @@ function walkHost(
       }
     }
     opts.emit(`</${tag}>`)
-    parentTextState!.bits &= 1
+    parentTextState!.bits &= 5
     return
   }
 
@@ -368,7 +376,7 @@ function walkHost(
     opts.emit(String(dangerouslyHtml))
   } else {
     const previousState = parentTextState!.bits
-    parentTextState!.bits = +(isSvg && tag !== 'foreignObject')
+    parentTextState!.bits = +(isSvg && tag !== 'foreignObject') | previousState & 4 | (/^(picture|noscript)$/.test(tag) ? 4 : 0)
     try {
       walkNode(props.children, opts)
     } finally {
@@ -377,12 +385,17 @@ function walkHost(
   }
   opts.emit(`</${tag}>`)
   // Host element closing resets outer flow — next sibling text starts fresh.
-  parentTextState!.bits &= 1
+  parentTextState!.bits &= 5
   } finally {
     if (isSelect) popSelectContext()
   }
 }
 
+function openHead(opts: WalkOptions): void {
+  currentSSRFrame().document = true
+  opts.onHead?.()
+}
+
 function hasHeadChild(children: unknown): boolean {
   if (children == null || typeof children === 'boolean') return false
   if (Array.isArray(children)) return children.some(hasHeadChild)
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index fc69f74..10cf228 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -63,11 +63,17 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
   'redact/dom-client (hydration=stub)': [3, 0],
 }
 
+// Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
+// Only the server bundle changes; the client entries are untouched.
+const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
+  'redact/server': [308, 310],
+}
+
 let failed = false
 for (const tree of ['src', 'dist']) {
   for (const row of await measureSizes(tree)) {
     const baseBudget = BUDGETS[row.name]
-    const budget = baseBudget === undefined ? undefined : baseBudget + (STORE_HYDRATION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (ROOT_TRANSITION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (QUEUE_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0)
+    const budget = baseBudget === undefined ? undefined : baseBudget + (IMAGE_PRELOAD_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (STORE_HYDRATION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (ROOT_TRANSITION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (QUEUE_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0)
     const ok = budget !== undefined && row.gz <= budget
     failed ||= !ok
     console.log(`${ok ? 'PASS' : 'FAIL'} ${tree} ${row.name}: ${row.gz} B gzip, budget ${budget ?? 'missing'}`)
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
new file mode 100644
index 0000000..a5a02d3
--- /dev/null
+++ b/tests/image-preloads.test.tsx
@@ -0,0 +1,160 @@
+import { describe, expect, it, vi } from 'vitest'
+import { preload } from 'react-dom'
+import { hydrateRoot } from 'react-dom/client'
+import { renderToReadableStream, renderToString } from 'react-dom/server'
+
+type Attributes = Record<string, string>
+function tags(html: string): Attributes[] {
+  return Array.from(html.matchAll(/<(link|meta|title)\b([^>]*)>/g), ([, tag, source]) => ({
+    tag: tag!,
+    ...Object.fromEntries(Array.from(source!.matchAll(/([\w-]+)="([^"]*)"/g), ([, name, value]) => [name!.toLowerCase(), value!])),
+  }))
+}
+const head = (html: string) => tags(html.slice(html.indexOf('<head>'), html.indexOf('</head>')))
+
+function Page({ children }: { children?: any }) {
+  return (
+    <html>
+      <head>
+        <link rel="stylesheet" href="/app.css" precedence="default" />
+        <title>page</title>
+        <meta name="viewport" content="width=device-width" />
+        <meta charSet="utf-8" />
+        <meta name="description" content="stays in place" />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
+
+const images = (
+  <>
+    <img src="/hero.png" fetchPriority="high" alt="" />
+    <img src="/plain.png" alt="" />
+    <img src="/plain.png" alt="again" />
+    <img src="/fallback.png" srcSet="/small.png 1x, /large.png 2x" sizes="100vw" crossOrigin="anonymous" alt="" />
+    <img src="/lazy.png" loading="lazy" alt="" />
+    <img src="/low.png" fetchPriority="low" alt="" />
+    <img src="data:image/png;base64,AAAA" alt="" />
+    <img src="" alt="" />
+    <picture><source srcSet="/picture.webp" type="image/webp" /><img src="/picture.png" alt="" /></picture>
+    <noscript><img src="/noscript.png" alt="" /></noscript>
+    <svg><image href="/vector.png" /></svg>
+  </>
+)
+
+const expectedHead = [
+  { tag: 'meta', charset: 'utf-8' },
+  { tag: 'meta', name: 'viewport', content: 'width=device-width' },
+  { tag: 'link', rel: 'preload', as: 'image', href: '/hero.png', fetchpriority: 'high' },
+  { tag: 'link', rel: 'preload', as: 'image', href: '/plain.png' },
+  { tag: 'link', rel: 'preload', as: 'image', imagesrcset: '/small.png 1x, /large.png 2x', imagesizes: '100vw', crossorigin: 'anonymous' },
+  { tag: 'link', rel: 'stylesheet', href: '/app.css', 'data-precedence': 'default' },
+  { tag: 'title' },
+  { tag: 'meta', name: 'description', content: 'stays in place' },
+]
+
+async function streamed(element: any) {
+  const stream = await renderToReadableStream(element)
+  await stream.allReady
+  return new Response(stream).text()
+}
+
+describe('image preloads', () => {
+  it('preloads eagerly rendered images and opens the head with charset and viewport', () => {
+    const html = renderToString(<Page>{images}</Page>)
+    expect(head(html)).toEqual(expectedHead)
+    // The images themselves still render where they are.
+    expect(html.match(/<img\b/g)).toHaveLength(10)
+    expect(html).toContain('<meta name="description" content="stays in place"/></head>')
+  })
+
+  it('streams the same head', async () => {
+    expect(head(await streamed(<Page>{images}</Page>))).toEqual(expectedHead)
+  })
+
+  it('sends the first ten image preloads ahead of the stylesheets and the rest after the scripts', () => {
+    const html = renderToString(
+      <Page>
+        {Array.from({ length: 12 }, (_, index) => <img key={index} src={`/${index}.png`} alt="" />)}
+        <img src="/late-hero.png" fetchPriority="high" alt="" />
+      </Page>,
+    )
+    const links = head(html).filter(link => link.rel !== undefined)
+    expect(links.map(link => link.href ?? link.rel)).toEqual([
+      ...Array.from({ length: 10 }, (_, index) => `/${index}.png`),
+      '/late-hero.png',
+      '/app.css',
+      '/10.png',
+      '/11.png',
+    ])
+  })
+
+  it('shares one preload with an explicit preload() of the same image', () => {
+    function App() {
+      preload('/explicit.png', { as: 'image' })
+      preload('/high.png', { as: 'image', fetchPriority: 'high' })
+      return <><img src="/explicit.png" alt="" /><img src="/high.png" alt="" /><img src="/other.png" alt="" /></>
+    }
+    const links = head(renderToString(<Page><App /></Page>)).filter(link => link.rel !== undefined)
+    expect(links).toEqual([
+      { tag: 'link', rel: 'preload', as: 'image', href: '/high.png', fetchpriority: 'high' },
+      { tag: 'link', rel: 'preload', as: 'image', href: '/other.png' },
+      { tag: 'link', rel: 'stylesheet', href: '/app.css', 'data-precedence': 'default' },
+      { tag: 'link', rel: 'preload', as: 'image', href: '/explicit.png' },
+    ])
+  })
+
+  it('leaves fragment renders alone, whose root-container hydration is positional', () => {
+    const html = renderToString(<><p>intro</p><meta charSet="utf-8" /><img src="/inline.png" alt="" /></>)
+    expect(html).toBe('<p>intro</p><meta charset="utf-8"/><img src="/inline.png" alt=""/>')
+  })
+
+  it('synthesises the head of an html tree that omits it', () => {
+    const html = renderToString(<html><body><img src="/hero.png" fetchPriority="high" alt="" /></body></html>)
+    expect(html).toBe('<!DOCTYPE html><html><head><link rel="preload" href="/hero.png" as="image" fetchpriority="high"/></head><body><img src="/hero.png" fetchpriority="high" alt=""/></body></html>')
+  })
+
+  it('keeps itemProp metas and metas inside noscript where they are', () => {
+    const html = renderToString(<Page><meta itemProp="name" content="item" /><noscript><meta charSet="latin1" /></noscript></Page>)
+    expect(html).toContain('<body><meta itemprop="name" content="item"/><noscript><meta charset="latin1"/></noscript></body>')
+    expect(head(html).filter(tag => tag.charset)).toEqual([{ tag: 'meta', charset: 'utf-8' }])
+  })
+
+  it('renders late boundary images with their own preloads and no hoisting', async () => {
+    let resolve!: () => void
+    const ready = new Promise<void>(next => { resolve = next })
+    let done = false
+    function Late() {
+      if (!done) throw ready.then(() => { done = true })
+      return <><meta name="viewport" content="late" /><img src="/late.png" alt="" /></>
+    }
+    const { Suspense } = await import('react')
+    const stream = await renderToReadableStream(<Page><Suspense fallback={<p>loading</p>}><Late /></Suspense></Page>)
+    resolve()
+    await stream.allReady
+    const html = await new Response(stream).text()
+    expect(head(html).filter(tag => tag.name === 'viewport')).toEqual([{ tag: 'meta', name: 'viewport', content: 'width=device-width' }])
+    const body = html.slice(html.indexOf('<body>'))
+    expect(body).toContain('<link rel="preload" href="/late.png" as="image"/>')
+    expect(body).toContain('<meta name="viewport" content="late"/><img src="/late.png" alt=""/>')
+  })
+
+  it('hydrates the reordered head without recoverable errors', () => {
+    const html = renderToString(<Page>{images}</Page>)
+    const doc = new (globalThis as any).DOMParser().parseFromString('<!doctype html>' + html, 'text/html') as Document
+    const onRecoverableError = vi.fn()
+    const errors: unknown[] = []
+    const consoleError = vi.spyOn(console, 'error').mockImplementation((...args) => { errors.push(args) })
+    try {
+      hydrateRoot(doc as any, <Page>{images}</Page>, { onRecoverableError })
+    } finally {
+      consoleError.mockRestore()
+    }
+    expect(onRecoverableError).not.toHaveBeenCalled()
+    expect(errors).toEqual([])
+    expect(doc.querySelectorAll('link[rel="preload"][as="image"]')).toHaveLength(3)
+    expect(doc.querySelector('meta[charset]')).toBe(doc.head.firstElementChild)
+    expect(doc.querySelectorAll('img')).toHaveLength(10)
+  })
+})

From 798465994c4b6f62be166b193df146440358440a Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barry@barrymichaeldoyle.com>
Date: Wed, 28 Oct 2026 13:29:46 +0200
Subject: [PATCH 02/11] Discard hoisted metas when a shell attempt is abandoned

The stream retries the shell after a root-level suspension and keeps the
resource collector, whose hints deduplicate by key. The charset and viewport
buffers did not, so a retried shell emitted its metas twice. Clear them with
the discarded chunks; test; allowance re-measured (+325 B source, +327 B built).
---
 packages/redact/src/server/resource-hints.ts |  4 ++++
 packages/redact/src/server/stream.ts         |  1 +
 scripts/size-check.mjs                       |  2 +-
 tests/image-preloads.test.tsx                | 17 +++++++++++++++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/redact/src/server/resource-hints.ts b/packages/redact/src/server/resource-hints.ts
index e2e46f5..821eb02 100644
--- a/packages/redact/src/server/resource-hints.ts
+++ b/packages/redact/src/server/resource-hints.ts
@@ -109,6 +109,10 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
       const isCharset = isString(props.charSet)
       return !shellFlushed && (isCharset || props.name === 'viewport') && props.itemProp == null ? chunk => { isCharset ? charset += chunk : viewport += chunk } : null
     },
+    // An abandoned shell attempt re-walks its metas; the hints it registered stay deduplicated.
+    discardMetas(): void {
+      charset = viewport = ''
+    },
     addHost(type: string, props: any, scope?: ResourceScope): boolean {
       const kind = resourceKind(type, props)
       if (!kind) return false
diff --git a/packages/redact/src/server/stream.ts b/packages/redact/src/server/stream.ts
index 694a489..b7129a9 100644
--- a/packages/redact/src/server/stream.ts
+++ b/packages/redact/src/server/stream.ts
@@ -124,6 +124,7 @@ export async function streamHtml(
         shellChunks.length = chunkCount
         boundaries.length = boundaryCount
         state.nextId = nextId
+        currentSSRFrame().resources?.discardMetas()
         if (!isThenable(err)) throw err
         if (++rootRetries > 50) {
           throw new Error('renderToReadableStream exceeded 50 root suspension retries.')
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index 10cf228..4372fbc 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -66,7 +66,7 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
 // Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
 // Only the server bundle changes; the client entries are untouched.
 const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
-  'redact/server': [308, 310],
+  'redact/server': [325, 327],
 }
 
 let failed = false
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
index a5a02d3..386e532 100644
--- a/tests/image-preloads.test.tsx
+++ b/tests/image-preloads.test.tsx
@@ -140,6 +140,23 @@ describe('image preloads', () => {
     expect(body).toContain('<meta name="viewport" content="late"/><img src="/late.png" alt=""/>')
   })
 
+  it('emits the metas of a retried shell once', async () => {
+    let value: string | undefined
+    const pending = Promise.resolve('ready').then(result => { value = result })
+    function Root() {
+      if (value === undefined) throw pending
+      return <Page><img src="/hero.png" alt="" /><p>{value}</p></Page>
+    }
+    function Shell() {
+      // Suspends at the root on the first attempt, outside any boundary.
+      if (value === undefined) throw pending
+      return <Root />
+    }
+    const html = await streamed(<Shell />)
+    expect(head(html)).toEqual([expectedHead[0], expectedHead[1], { tag: 'link', rel: 'preload', as: 'image', href: '/hero.png' }, ...expectedHead.slice(5)])
+    expect(html).toContain('<p>ready</p>')
+  })
+
   it('hydrates the reordered head without recoverable errors', () => {
     const html = renderToString(<Page>{images}</Page>)
     const doc = new (globalThis as any).DOMParser().parseFromString('<!doctype html>' + html, 'text/html') as Document

From 774c9bbdbe9ad39b33faa47bf8a0474cd63cd5c7 Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barry@barrymichaeldoyle.com>
Date: Wed, 28 Oct 2026 13:30:33 +0200
Subject: [PATCH 03/11] Make the retried-shell test suspend after the head is
 walked

The previous version suspended before <head>, so no meta reached the abandoned
attempt and the test passed without the fix. It now fails without it.
---
 tests/image-preloads.test.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
index 386e532..13fe81f 100644
--- a/tests/image-preloads.test.tsx
+++ b/tests/image-preloads.test.tsx
@@ -143,16 +143,12 @@ describe('image preloads', () => {
   it('emits the metas of a retried shell once', async () => {
     let value: string | undefined
     const pending = Promise.resolve('ready').then(result => { value = result })
-    function Root() {
-      if (value === undefined) throw pending
-      return <Page><img src="/hero.png" alt="" /><p>{value}</p></Page>
-    }
-    function Shell() {
-      // Suspends at the root on the first attempt, outside any boundary.
+    function Late() {
+      // Suspends outside any boundary after the head was walked, so the shell is rendered twice.
       if (value === undefined) throw pending
-      return <Root />
+      return <p>{value}</p>
     }
-    const html = await streamed(<Shell />)
+    const html = await streamed(<Page><img src="/hero.png" alt="" /><Late /></Page>)
     expect(head(html)).toEqual([expectedHead[0], expectedHead[1], { tag: 'link', rel: 'preload', as: 'image', href: '/hero.png' }, ...expectedHead.slice(5)])
     expect(html).toContain('<p>ready</p>')
   })

From 662f6252145494f52d1fb0a27507122fab73ca86 Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barry@barrymichaeldoyle.com>
Date: Wed, 28 Oct 2026 14:03:49 +0200
Subject: [PATCH 04/11] Drop the hoisted metas of a boundary whose children are
 discarded

A Suspense boundary that rendered a charset or viewport meta and then
suspended or threw left the meta in the hoist buffer while its output was
discarded, so the shell carried a meta from content that streams in later with
its own copy. The collector now snapshots the buffers before a boundary's
children and restores them when they are discarded; the shell retry reuses the
same method. The boundary's preloads stay registered, as they deduplicate.
Allowance re-measured (+340 B source, +342 B built).
---
 packages/redact/src/server/resource-hints.ts |  9 ++++--
 packages/redact/src/server/stream.ts         |  2 +-
 packages/redact/src/server/walk.ts           |  2 ++
 scripts/size-check.mjs                       |  2 +-
 tests/image-preloads.test.tsx                | 32 +++++++++++++++++++-
 5 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/packages/redact/src/server/resource-hints.ts b/packages/redact/src/server/resource-hints.ts
index 821eb02..2f6758b 100644
--- a/packages/redact/src/server/resource-hints.ts
+++ b/packages/redact/src/server/resource-hints.ts
@@ -109,9 +109,12 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
       const isCharset = isString(props.charSet)
       return !shellFlushed && (isCharset || props.name === 'viewport') && props.itemProp == null ? chunk => { isCharset ? charset += chunk : viewport += chunk } : null
     },
-    // An abandoned shell attempt re-walks its metas; the hints it registered stay deduplicated.
-    discardMetas(): void {
-      charset = viewport = ''
+    // Snapshot the hoisted metas, or restore a snapshot when the content that added them is
+    // discarded (a suspended boundary, an abandoned shell attempt). Hints stay: they deduplicate.
+    metas(restore?: string[]): string[] {
+      const saved = [charset, viewport]
+      if (restore) [charset, viewport] = restore as [string, string]
+      return saved
     },
     addHost(type: string, props: any, scope?: ResourceScope): boolean {
       const kind = resourceKind(type, props)
diff --git a/packages/redact/src/server/stream.ts b/packages/redact/src/server/stream.ts
index b7129a9..e8038ea 100644
--- a/packages/redact/src/server/stream.ts
+++ b/packages/redact/src/server/stream.ts
@@ -124,7 +124,7 @@ export async function streamHtml(
         shellChunks.length = chunkCount
         boundaries.length = boundaryCount
         state.nextId = nextId
-        currentSSRFrame().resources?.discardMetas()
+        currentSSRFrame().resources?.metas(['', ''])
         if (!isThenable(err)) throw err
         if (++rootRetries > 50) {
           throw new Error('renderToReadableStream exceeded 50 root suspension retries.')
diff --git a/packages/redact/src/server/walk.ts b/packages/redact/src/server/walk.ts
index 8600bf8..44f4ed4 100644
--- a/packages/redact/src/server/walk.ts
+++ b/packages/redact/src/server/walk.ts
@@ -473,6 +473,7 @@ function walkSuspense(
   const thrownInfo: { componentStack?: string | undefined } = {}
   const childEmit = (s: string) => childParts.push(s)
   const resourceScope: ResourceScope | undefined = currentSSRFrame().shellFlushed ? {} : undefined
+  const metas = currentSSRFrame().resources?.metas()
   try {
     walkNode(props.children, {
       ...opts,
@@ -484,6 +485,7 @@ function walkSuspense(
     })
   } catch (thenable: any) {
     nested.length = 0
+    currentSSRFrame().resources?.metas(metas || ['', ''])
     const suspended = isThenable(thenable)
     if (!suspended) {
       if (isBrowserError(thenable)) opts.onBrowserBailout?.(thenable, { componentStack: (thenable as any).componentStack || opts.componentStack || '' })
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index 4372fbc..e6542c2 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -66,7 +66,7 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
 // Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
 // Only the server bundle changes; the client entries are untouched.
 const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
-  'redact/server': [325, 327],
+  'redact/server': [340, 342],
 }
 
 let failed = false
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
index 13fe81f..de5e9ed 100644
--- a/tests/image-preloads.test.tsx
+++ b/tests/image-preloads.test.tsx
@@ -121,7 +121,37 @@ describe('image preloads', () => {
     expect(head(html).filter(tag => tag.charset)).toEqual([{ tag: 'meta', charset: 'utf-8' }])
   })
 
-  it('renders late boundary images with their own preloads and no hoisting', async () => {
+  it('drops the metas of a boundary that suspends and keeps its preload', async () => {
+    let resolve!: () => void
+    const ready = new Promise<void>(next => { resolve = next })
+    let done = false
+    function Late() {
+      if (!done) throw ready.then(() => { done = true })
+      return <p>late</p>
+    }
+    const { Suspense } = await import('react')
+    const stream = await renderToReadableStream(
+      <Page>
+        <Suspense fallback={<p>loading</p>}>
+          <meta name="viewport" content="late" />
+          <img src="/late.png" alt="" />
+          <Late />
+        </Suspense>
+      </Page>,
+    )
+    resolve()
+    await stream.allReady
+    const html = await new Response(stream).text()
+    // The shell keeps only the head's viewport; the boundary's meta arrives in place with its content.
+    expect(html.match(/<meta name="viewport"/g)).toHaveLength(2)
+    expect(head(html).filter(tag => tag.name === 'viewport')).toEqual([{ tag: 'meta', name: 'viewport', content: 'width=device-width' }])
+    expect(html).toContain('<meta name="viewport" content="late"/><img src="/late.png" alt=""/><p>late</p>')
+    // The preload registered by the discarded attempt stays in the shell and is not repeated.
+    expect(html.match(/rel="preload" href="\/late.png"/g)).toHaveLength(1)
+    expect(head(html).some(tag => tag.href === '/late.png')).toBe(true)
+  })
+
+  it('renders the preloads of a boundary that streams later with its content', async () => {
     let resolve!: () => void
     const ready = new Promise<void>(next => { resolve = next })
     let done = false

From 816f816fe83d63b0aa42320cb9b0748bd53c5b66 Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barrydoyle18@gmail.com>
Date: Thu, 29 Oct 2026 12:37:03 +0200
Subject: [PATCH 05/11] fix(server): document mode starts at <html>; boundaries
 keep picture exclusions

A fragment that renders its own <head> no longer turns on image preloads and
meta hoisting: the document flag is set when <html> opens, which covers both a
real and a synthesised head, so standalone fragments keep their positional
output.

A Suspense boundary records the picture/noscript and SVG flags of its parent,
and the streamed re-render starts from them, so an <img> inside <picture> that
renders after suspension is still not preloaded.
---
 packages/redact/src/server/stream.ts |  1 +
 packages/redact/src/server/walk.ts   | 18 ++++++++++--------
 scripts/size-check.mjs               |  2 +-
 tests/image-preloads.test.tsx        | 24 ++++++++++++++++++++++++
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/redact/src/server/stream.ts b/packages/redact/src/server/stream.ts
index e8038ea..a17fc88 100644
--- a/packages/redact/src/server/stream.ts
+++ b/packages/redact/src/server/stream.ts
@@ -222,6 +222,7 @@ function streamBoundary(
           onError: options.onError,
         componentStack: b.componentStack,
         resourceScope,
+        textState: { bits: b.textBits },
       })
       state.frame?.resources?.mergeScope(resourceScope)
     } catch (err) {
diff --git a/packages/redact/src/server/walk.ts b/packages/redact/src/server/walk.ts
index 44f4ed4..086521f 100644
--- a/packages/redact/src/server/walk.ts
+++ b/packages/redact/src/server/walk.ts
@@ -55,6 +55,8 @@ export interface SuspendedBoundary {
   thenable: Promise<any>
   contextSnapshot: ContextSnapshot
   componentStack: string
+  // SVG and picture/noscript flags of the parent, so a boundary rendered later keeps its exclusions.
+  textBits: number
 }
 
 export interface WalkOptions {
@@ -298,7 +300,11 @@ function walkHost(
   // CSS sizing (documentElement.clientHeight returns the content height, not
   // the viewport) — and Floating-UI-based libraries (Radix dropdowns etc.)
   // then compute off-screen positions for overlays.
-  if (tag === 'html') opts.emit('<!DOCTYPE html>')
+  if (tag === 'html') {
+    // Only document renders hoist image preloads and metas: their head is position-insensitive for hydration.
+    currentSSRFrame().document = true
+    opts.emit('<!DOCTYPE html>')
+  }
 
   opts.emit('<' + tag)
   for (const k in props) {
@@ -334,14 +340,14 @@ function walkHost(
     return
   }
   opts.emit('>')
-  if (tag === 'head') openHead(opts)
+  if (tag === 'head') opts.onHead?.()
   // Opening a host element starts a fresh text flow context for its children.
   // Children's text separator tracking is independent of the outer context.
   const parentTextState = opts.textState
 
   if (tag === 'html' && !hasHeadChild(props.children)) {
     opts.emit('<head>')
-    openHead(opts)
+    opts.onHead?.()
     opts.emit('</head>')
   }
 
@@ -391,11 +397,6 @@ function walkHost(
   }
 }
 
-function openHead(opts: WalkOptions): void {
-  currentSSRFrame().document = true
-  opts.onHead?.()
-}
-
 function hasHeadChild(children: unknown): boolean {
   if (children == null || typeof children === 'boolean') return false
   if (Array.isArray(children)) return children.some(hasHeadChild)
@@ -505,6 +506,7 @@ function walkSuspense(
     if (suspended) opts.onSuspend?.({
       id, fallbackHTML: fallbackParts.join(''), children: props.children, thenable, contextSnapshot,
       componentStack: thrownInfo.componentStack || opts.componentStack || '',
+      textBits: opts.textState!.bits & 5,
     })
     return
   }
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index e6542c2..d9364bb 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -66,7 +66,7 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
 // Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
 // Only the server bundle changes; the client entries are untouched.
 const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
-  'redact/server': [340, 342],
+  'redact/server': [354, 351],
 }
 
 let failed = false
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
index de5e9ed..a964cb0 100644
--- a/tests/image-preloads.test.tsx
+++ b/tests/image-preloads.test.tsx
@@ -110,6 +110,11 @@ describe('image preloads', () => {
     expect(html).toBe('<p>intro</p><meta charset="utf-8"/><img src="/inline.png" alt=""/>')
   })
 
+  it('leaves a fragment that renders its own head alone', () => {
+    const html = renderToString(<><head><meta charSet="utf-8" /></head><img src="/inline.png" alt="" /></>)
+    expect(html).toBe('<head><meta charset="utf-8"/></head><img src="/inline.png" alt=""/>')
+  })
+
   it('synthesises the head of an html tree that omits it', () => {
     const html = renderToString(<html><body><img src="/hero.png" fetchPriority="high" alt="" /></body></html>)
     expect(html).toBe('<!DOCTYPE html><html><head><link rel="preload" href="/hero.png" as="image" fetchpriority="high"/></head><body><img src="/hero.png" fetchpriority="high" alt=""/></body></html>')
@@ -151,6 +156,25 @@ describe('image preloads', () => {
     expect(head(html).some(tag => tag.href === '/late.png')).toBe(true)
   })
 
+  it('keeps excluding the images of a picture whose boundary streams later', async () => {
+    let resolve!: () => void
+    const ready = new Promise<void>(next => { resolve = next })
+    let done = false
+    function Late() {
+      if (!done) throw ready.then(() => { done = true })
+      return <img src="/late.png" alt="" />
+    }
+    const { Suspense } = await import('react')
+    const stream = await renderToReadableStream(
+      <Page><picture><source srcSet="/late.webp" type="image/webp" /><Suspense fallback={null}><Late /></Suspense></picture></Page>,
+    )
+    resolve()
+    await stream.allReady
+    const html = await new Response(stream).text()
+    expect(html).toContain('<img src="/late.png" alt=""/>')
+    expect(html).not.toContain('rel="preload" href="/late.png"')
+  })
+
   it('renders the preloads of a boundary that streams later with its content', async () => {
     let resolve!: () => void
     const ready = new Promise<void>(next => { resolve = next })

From 015eb57d1c3c0667abd3402479082b9b0bbc55d6 Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barrydoyle18@gmail.com>
Date: Thu, 29 Oct 2026 13:12:46 +0200
Subject: [PATCH 06/11] fix(server): promote a preload() its <img> renders
 eagerly; omit fallback charset and viewport metas

An eager <img> whose image was already registered with preload() moves that
preload ahead of the stylesheets when it is fetchPriority="high" or one of the
first ten per flush, keeping the preload's own attributes, as React does.

A Suspense fallback's charset and viewport metas are omitted instead of hoisted
into the head, as React omits hoistables from fallbacks. Its images are still
preloaded.
---
 packages/redact/src/server/resource-hints.ts | 12 ++++++++--
 packages/redact/src/server/walk.ts           |  2 ++
 scripts/size-check.mjs                       |  2 +-
 tests/image-preloads.test.tsx                | 23 +++++++++++++++++++-
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/redact/src/server/resource-hints.ts b/packages/redact/src/server/resource-hints.ts
index 2f6758b..393cbc9 100644
--- a/packages/redact/src/server/resource-hints.ts
+++ b/packages/redact/src/server/resource-hints.ts
@@ -70,7 +70,15 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
       else if (kind === 'preconnect') type += ':' + (options.crossOrigin ?? 'default')
       const key = JSON.stringify([type, source])
       const prior = resources.get(key)
-      if (prior && (!init || prior.kind !== 'preload' && prior.kind !== 'modulepreload')) return prior
+      // Image preloads that go ahead of the stylesheets: every fetchPriority="high" one and the
+      // first ten eager <img> per flush, as in React.
+      const high = kind === 'preload' && options.as === 'image' && (options.fetchPriority === 'high' || eager && groups[2]!.length < 10)
+      if (prior && (!init || prior.kind !== 'preload' && prior.kind !== 'modulepreload')) {
+        // An eager <img> also moves the preload() of the same image ahead, keeping its attributes.
+        const index = eager && high ? groups[4]!.indexOf(prior) : -1
+        if (index >= 0) groups[2]!.push(...groups[4]!.splice(index, 1))
+        return prior
+      }
 
       const resource: Resource = { kind, href, options: { ...options } }
       if (kind === 'style' && (!styleNonce || options.nonce === styleNonce)) resource.css = styleText(options)
@@ -90,7 +98,7 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
       } else {
         const group = kind === 'dns-prefetch' || kind === 'preconnect' ? 0
           : kind === 'preload' && options.as === 'font' ? 1
-          : kind === 'preload' && options.as === 'image' && (options.fetchPriority === 'high' || eager && groups[2]!.length < 10) ? 2
+          : high ? 2
           : init ? 3 : 4
         groups[group]!.push(resource)
       }
diff --git a/packages/redact/src/server/walk.ts b/packages/redact/src/server/walk.ts
index 086521f..2a57165 100644
--- a/packages/redact/src/server/walk.ts
+++ b/packages/redact/src/server/walk.ts
@@ -499,6 +499,8 @@ function walkSuspense(
       onSuspend: opts.onSuspend ? (boundary) => nested.push(boundary) : undefined,
       nextBoundaryId: opts.nextBoundaryId,
     })
+    // A fallback's charset and viewport metas are omitted, as React omits hoistables from fallbacks.
+    currentSSRFrame().resources?.metas(metas || ['', ''])
     if (!suspended) {
       opts.emit(`<!--${isBrowserError(thenable) ? '$!' : '$E'}${id}-->${fallbackParts.join('')}<!--/$-->`)
     } else emitBoundary(opts, id, fallbackParts.join(''))
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index d9364bb..b5fffcb 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -66,7 +66,7 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
 // Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
 // Only the server bundle changes; the client entries are untouched.
 const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
-  'redact/server': [354, 351],
+  'redact/server': [401, 400],
 }
 
 let failed = false
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
index a964cb0..2a949fe 100644
--- a/tests/image-preloads.test.tsx
+++ b/tests/image-preloads.test.tsx
@@ -97,11 +97,12 @@ describe('image preloads', () => {
       return <><img src="/explicit.png" alt="" /><img src="/high.png" alt="" /><img src="/other.png" alt="" /></>
     }
     const links = head(renderToString(<Page><App /></Page>)).filter(link => link.rel !== undefined)
+    // The explicit preload moves ahead of the stylesheet once its image renders, keeping its own attributes.
     expect(links).toEqual([
       { tag: 'link', rel: 'preload', as: 'image', href: '/high.png', fetchpriority: 'high' },
+      { tag: 'link', rel: 'preload', as: 'image', href: '/explicit.png' },
       { tag: 'link', rel: 'preload', as: 'image', href: '/other.png' },
       { tag: 'link', rel: 'stylesheet', href: '/app.css', 'data-precedence': 'default' },
-      { tag: 'link', rel: 'preload', as: 'image', href: '/explicit.png' },
     ])
   })
 
@@ -175,6 +176,26 @@ describe('image preloads', () => {
     expect(html).not.toContain('rel="preload" href="/late.png"')
   })
 
+  it('omits the charset and viewport metas of a fallback and preloads its images', async () => {
+    let resolve!: () => void
+    const ready = new Promise<void>(next => { resolve = next })
+    let done = false
+    function Late() {
+      if (!done) throw ready.then(() => { done = true })
+      return <p>late</p>
+    }
+    const { Suspense } = await import('react')
+    const fallback = <><meta name="viewport" content="fallback" /><meta name="robots" content="noindex" /><img src="/fallback.png" alt="" /></>
+    const stream = await renderToReadableStream(<Page><Suspense fallback={fallback}><Late /></Suspense></Page>)
+    resolve()
+    await stream.allReady
+    const html = await new Response(stream).text()
+    expect(html).not.toContain('content="fallback"')
+    expect(html).toContain('<meta name="robots" content="noindex"/><img src="/fallback.png" alt=""/>')
+    expect(head(html).filter(tag => tag.name === 'viewport')).toEqual([{ tag: 'meta', name: 'viewport', content: 'width=device-width' }])
+    expect(head(html).some(tag => tag.href === '/fallback.png')).toBe(true)
+  })
+
   it('renders the preloads of a boundary that streams later with its content', async () => {
     let resolve!: () => void
     const ready = new Promise<void>(next => { resolve = next })

From ca634f9fcbf065b8a1276ad9f5878824d3613444 Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barrydoyle18@gmail.com>
Date: Thu, 29 Oct 2026 13:24:42 +0200
Subject: [PATCH 07/11] fix(server): a discarded Suspense child that opened
 <html> leaves no document mode behind

walkSuspense saves the frame's document flag with its meta buffers before
walking the children and restores it when they suspend or throw, so a fragment
whose boundary rendered <html> before suspending keeps its fallback and later
siblings positional: no preloads, no hoisted metas.
---
 packages/redact/src/server/walk.ts | 10 +++++++---
 scripts/size-check.mjs             |  2 +-
 tests/image-preloads.test.tsx      | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/redact/src/server/walk.ts b/packages/redact/src/server/walk.ts
index 2a57165..bacf5ab 100644
--- a/packages/redact/src/server/walk.ts
+++ b/packages/redact/src/server/walk.ts
@@ -474,7 +474,9 @@ function walkSuspense(
   const thrownInfo: { componentStack?: string | undefined } = {}
   const childEmit = (s: string) => childParts.push(s)
   const resourceScope: ResourceScope | undefined = currentSSRFrame().shellFlushed ? {} : undefined
-  const metas = currentSSRFrame().resources?.metas()
+  const frame = currentSSRFrame()
+  const metas = frame.resources?.metas()
+  const document = !!frame.document
   try {
     walkNode(props.children, {
       ...opts,
@@ -486,7 +488,9 @@ function walkSuspense(
     })
   } catch (thenable: any) {
     nested.length = 0
-    currentSSRFrame().resources?.metas(metas || ['', ''])
+    // The discarded children may have opened <html>; the fallback and later siblings keep the outer mode.
+    frame.document = document
+    frame.resources?.metas(metas || ['', ''])
     const suspended = isThenable(thenable)
     if (!suspended) {
       if (isBrowserError(thenable)) opts.onBrowserBailout?.(thenable, { componentStack: (thenable as any).componentStack || opts.componentStack || '' })
@@ -500,7 +504,7 @@ function walkSuspense(
       nextBoundaryId: opts.nextBoundaryId,
     })
     // A fallback's charset and viewport metas are omitted, as React omits hoistables from fallbacks.
-    currentSSRFrame().resources?.metas(metas || ['', ''])
+    frame.resources?.metas(metas || ['', ''])
     if (!suspended) {
       opts.emit(`<!--${isBrowserError(thenable) ? '$!' : '$E'}${id}-->${fallbackParts.join('')}<!--/$-->`)
     } else emitBoundary(opts, id, fallbackParts.join(''))
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index b5fffcb..d5368f8 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -66,7 +66,7 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
 // Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
 // Only the server bundle changes; the client entries are untouched.
 const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
-  'redact/server': [401, 400],
+  'redact/server': [435, 433],
 }
 
 let failed = false
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
index 2a949fe..f5cd26c 100644
--- a/tests/image-preloads.test.tsx
+++ b/tests/image-preloads.test.tsx
@@ -116,6 +116,20 @@ describe('image preloads', () => {
     expect(html).toBe('<head><meta charset="utf-8"/></head><img src="/inline.png" alt=""/>')
   })
 
+  it('keeps a fragment out of document mode when its suspended child opened html', async () => {
+    const { Suspense } = await import('react')
+    function Doc() {
+      return <html><body><Never /></body></html>
+    }
+    function Never(): null {
+      throw new Promise(() => {})
+    }
+    const html = renderToString(<><Suspense fallback={<><meta charSet="utf-8" /><img src="/fallback.png" alt="" /></>}><Doc /></Suspense><img src="/after.png" alt="" /></>)
+    expect(html).not.toContain('rel="preload"')
+    expect(html).toContain('<meta charset="utf-8"/><img src="/fallback.png" alt=""/>')
+    expect(html).toMatch(/<img src="\/after.png" alt=""\/>$/)
+  })
+
   it('synthesises the head of an html tree that omits it', () => {
     const html = renderToString(<html><body><img src="/hero.png" fetchPriority="high" alt="" /></body></html>)
     expect(html).toBe('<!DOCTYPE html><html><head><link rel="preload" href="/hero.png" as="image" fetchpriority="high"/></head><body><img src="/hero.png" fetchpriority="high" alt=""/></body></html>')

From 44af8fb9fdec354d0a19d5b7957dd2dc151ede7f Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barrydoyle18@gmail.com>
Date: Thu, 29 Oct 2026 13:50:39 +0200
Subject: [PATCH 08/11] fix(server): a document wrapped in a resolved Suspense
 boundary gets its head hints after the doctype

The boundary buffers its children, so <head> reported the outer output
position before the document had been emitted and the renderer inserted the
collected hints ahead of <!DOCTYPE html>. walkSuspense now records where <head>
opened inside its buffer and reports it to the renderer as it commits the
children. This also moves stylesheets that main already placed before the
doctype in this case.
---
 packages/redact/src/server/walk.ts | 10 +++++++++-
 scripts/size-check.mjs             |  2 +-
 tests/image-preloads.test.tsx      |  9 +++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/redact/src/server/walk.ts b/packages/redact/src/server/walk.ts
index bacf5ab..9e4f39c 100644
--- a/packages/redact/src/server/walk.ts
+++ b/packages/redact/src/server/walk.ts
@@ -473,6 +473,8 @@ function walkSuspense(
   const nested: SuspendedBoundary[] = []
   const thrownInfo: { componentStack?: string | undefined } = {}
   const childEmit = (s: string) => childParts.push(s)
+  // Where <head> opened inside the buffered children, reported to the renderer once they commit.
+  let head = -1
   const resourceScope: ResourceScope | undefined = currentSSRFrame().shellFlushed ? {} : undefined
   const frame = currentSSRFrame()
   const metas = frame.resources?.metas()
@@ -483,6 +485,7 @@ function walkSuspense(
       resourceScope,
       thrownInfo,
       emit: childEmit,
+      onHead: () => { head = childParts.length },
       onSuspend: opts.onSuspend ? (boundary) => nested.push(boundary) : undefined,
       nextBoundaryId: opts.nextBoundaryId,
     })
@@ -527,7 +530,12 @@ function walkSuspense(
   // producing visible duplicates (e.g. double navbar logos). Markers let the
   // client treat this as a resolved boundary and hydrate in-place.
   opts.emit(`<!--$${id}-->`)
-  opts.emit(childParts.join(''))
+  if (head < 0) opts.emit(childParts.join(''))
+  else {
+    opts.emit(childParts.slice(0, head).join(''))
+    opts.onHead?.()
+    opts.emit(childParts.slice(head).join(''))
+  }
   opts.emit(`<!--/$-->`)
   for (const boundary of nested) opts.onSuspend?.(boundary)
 }
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index d5368f8..2022fab 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -66,7 +66,7 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
 // Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
 // Only the server bundle changes; the client entries are untouched.
 const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
-  'redact/server': [435, 433],
+  'redact/server': [448, 448],
 }
 
 let failed = false
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
index f5cd26c..8aef780 100644
--- a/tests/image-preloads.test.tsx
+++ b/tests/image-preloads.test.tsx
@@ -130,6 +130,15 @@ describe('image preloads', () => {
     expect(html).toMatch(/<img src="\/after.png" alt=""\/>$/)
   })
 
+  it('inserts the head hints after the doctype of a document wrapped in a resolved boundary', async () => {
+    const { Suspense } = await import('react')
+    const page = <Suspense fallback={null}><Page><img src="/hero.png" alt="" /></Page></Suspense>
+    for (const html of [renderToString(page), await streamed(page)]) {
+      expect(html.startsWith('<!--$0--><!DOCTYPE html><html><head><meta charset="utf-8"/>')).toBe(true)
+      expect(head(html)[2]).toEqual({ tag: 'link', rel: 'preload', as: 'image', href: '/hero.png' })
+    }
+  })
+
   it('synthesises the head of an html tree that omits it', () => {
     const html = renderToString(<html><body><img src="/hero.png" fetchPriority="high" alt="" /></body></html>)
     expect(html).toBe('<!DOCTYPE html><html><head><link rel="preload" href="/hero.png" as="image" fetchpriority="high"/></head><body><img src="/hero.png" fetchpriority="high" alt=""/></body></html>')

From 64fc4cec20b5092ca87d15283d659fd221273b7e Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barrydoyle18@gmail.com>
Date: Thu, 29 Oct 2026 14:30:18 +0200
Subject: [PATCH 09/11] fix(server): a document fallback gets its head hints
 after the doctype and leaves no document mode behind

The fallback walk records where <head> opened inside its buffer, as the
children walk does, and reports it to the renderer when the fallback is
emitted, so a fallback that renders the whole document no longer gets the
collected hints ahead of <!DOCTYPE html>. The frame's document flag is restored
after the fallback walk too, so later siblings of a fragment stay positional.
emitBoundary is folded into the fallback path, which shares a small emitParts
helper with the committed-children path.
---
 packages/redact/src/server/walk.ts | 32 +++++++++++++++---------------
 scripts/size-check.mjs             |  2 +-
 tests/image-preloads.test.tsx      | 18 +++++++++++++++++
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/packages/redact/src/server/walk.ts b/packages/redact/src/server/walk.ts
index 9e4f39c..461c715 100644
--- a/packages/redact/src/server/walk.ts
+++ b/packages/redact/src/server/walk.ts
@@ -500,17 +500,23 @@ function walkSuspense(
       else opts.onError?.(thenable)
     }
     const fallbackParts: string[] = []
+    head = -1
     walkNode(props.fallback, {
       ...opts,
       emit: (s) => fallbackParts.push(s),
+      onHead: () => { head = fallbackParts.length },
       onSuspend: opts.onSuspend ? (boundary) => nested.push(boundary) : undefined,
       nextBoundaryId: opts.nextBoundaryId,
     })
+    frame.document = document
     // A fallback's charset and viewport metas are omitted, as React omits hoistables from fallbacks.
     frame.resources?.metas(metas || ['', ''])
-    if (!suspended) {
-      opts.emit(`<!--${isBrowserError(thenable) ? '$!' : '$E'}${id}-->${fallbackParts.join('')}<!--/$-->`)
-    } else emitBoundary(opts, id, fallbackParts.join(''))
+    // Visible div wrapper for a pending boundary so the fallback UI shows; B: id lets $RC locate it on
+    // reveal. The leading/trailing comments let hydration detect a pending boundary and register a
+    // reveal callback.
+    opts.emit(suspended ? `<!--$?${id}--><div id="B:${id}">` : `<!--${isBrowserError(thenable) ? '$!' : '$E'}${id}-->`)
+    emitParts(opts, fallbackParts, head)
+    opts.emit(suspended ? '</div><!--/$-->' : '<!--/$-->')
     for (const boundary of nested) opts.onSuspend?.(boundary)
     if (suspended) opts.onSuspend?.({
       id, fallbackHTML: fallbackParts.join(''), children: props.children, thenable, contextSnapshot,
@@ -530,21 +536,15 @@ function walkSuspense(
   // producing visible duplicates (e.g. double navbar logos). Markers let the
   // client treat this as a resolved boundary and hydrate in-place.
   opts.emit(`<!--$${id}-->`)
-  if (head < 0) opts.emit(childParts.join(''))
-  else {
-    opts.emit(childParts.slice(0, head).join(''))
-    opts.onHead?.()
-    opts.emit(childParts.slice(head).join(''))
-  }
+  emitParts(opts, childParts, head)
   opts.emit(`<!--/$-->`)
   for (const boundary of nested) opts.onSuspend?.(boundary)
 }
 
-function emitBoundary(opts: WalkOptions, id: number, fallbackHTML: string): void {
-  // Visible div wrapper so the fallback UI shows; B: id lets $RC locate it on
-  // reveal. The leading/trailing comments let hydration detect a pending
-  // boundary and register a reveal callback.
-  opts.emit(`<!--$?${id}--><div id="B:${id}">`)
-  opts.emit(fallbackHTML)
-  opts.emit(`</div><!--/$-->`)
+// Emit buffered output, reporting where <head> opened in it so the renderer inserts its hints there.
+function emitParts(opts: WalkOptions, parts: string[], head: number): void {
+  if (head < 0) return opts.emit(parts.join(''))
+  opts.emit(parts.slice(0, head).join(''))
+  opts.onHead?.()
+  opts.emit(parts.slice(head).join(''))
 }
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index 2022fab..a306586 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -66,7 +66,7 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
 // Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
 // Only the server bundle changes; the client entries are untouched.
 const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
-  'redact/server': [448, 448],
+  'redact/server': [450, 448],
 }
 
 let failed = false
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
index 8aef780..a2ca8e6 100644
--- a/tests/image-preloads.test.tsx
+++ b/tests/image-preloads.test.tsx
@@ -139,6 +139,24 @@ describe('image preloads', () => {
     }
   })
 
+  it('inserts the head hints after the doctype of a document fallback', async () => {
+    const { Suspense } = await import('react')
+    function Broken(): null {
+      throw new Error('broken')
+    }
+    const html = renderToString(<Suspense fallback={<Page><img src="/hero.png" alt="" /></Page>}><Broken /></Suspense>)
+    expect(html.startsWith('<!--$E0--><!DOCTYPE html><html><head><link rel="preload" href="/hero.png" as="image"/>')).toBe(true)
+  })
+
+  it('keeps a fragment out of document mode after a fallback that opened html', async () => {
+    const { Suspense } = await import('react')
+    function Never(): null {
+      throw new Promise(() => {})
+    }
+    const html = renderToString(<><Suspense fallback={<html><body /></html>}><Never /></Suspense><meta charSet="utf-8" /></>)
+    expect(html).toMatch(/<meta charset="utf-8"\/>$/)
+  })
+
   it('synthesises the head of an html tree that omits it', () => {
     const html = renderToString(<html><body><img src="/hero.png" fetchPriority="high" alt="" /></body></html>)
     expect(html).toBe('<!DOCTYPE html><html><head><link rel="preload" href="/hero.png" as="image" fetchpriority="high"/></head><body><img src="/hero.png" fetchpriority="high" alt=""/></body></html>')

From 6ea76046e40a6a1de59469d4472409c12a389bcd Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barrydoyle18@gmail.com>
Date: Thu, 29 Oct 2026 14:42:02 +0200
Subject: [PATCH 10/11] refactor(server): document mode is a lexical walk flag;
 picture and noscript get separate bits

Document mode was a frame-wide flag set when <html> opened, so walkSuspense
had to save and restore it around discarded children and fallbacks, and a
boundary nested in a document fallback lost it when it streamed later. It is
now bit 16 of the walk's shared flags, set for the children of <html>. Like the
SVG bit it is captured in a suspended boundary's textBits and cannot leak out of
a discarded attempt, so the save/restore code and SSRFrame.document are gone.

<picture> and <noscript> get separate bits (4 and 8). Images are still not
preloaded inside either, but charset and viewport metas inside <picture> are
hoisted, as React only keeps metas in place inside <noscript>.
---
 packages/redact/src/server/dispatcher.ts |  5 +---
 packages/redact/src/server/walk.ts       | 35 ++++++++++--------------
 scripts/size-check.mjs                   |  2 +-
 tests/image-preloads.test.tsx            | 28 +++++++++++++++++++
 4 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/packages/redact/src/server/dispatcher.ts b/packages/redact/src/server/dispatcher.ts
index 2f315d8..2fc7b6b 100644
--- a/packages/redact/src/server/dispatcher.ts
+++ b/packages/redact/src/server/dispatcher.ts
@@ -13,9 +13,6 @@ export interface SSRFrame {
   resources?: ReturnType<typeof createResourceHints>
   shellFlushed?: boolean
   styleNonce?: string | undefined
-  // Set once the walk has opened <head>. Image preloads and hoisted metas only belong to
-  // document renders, where the head is position-insensitive for hydration.
-  document?: boolean
 }
 
 let frame: SSRFrame | null = null
@@ -46,7 +43,7 @@ export function recordHostResource(type: string, props: any, scope?: ResourceSco
 // An <img> adds its preload. A charset or viewport <meta> in the shell returns the sink that
 // hoists its markup.
 export function recordHoisted(tag: string, props: any): ((chunk: string) => void) | null | void {
-  if (frame?.document) return tag === 'img' ? resources().addImage(props) : resources().addMeta(props)
+  if (frame) return tag === 'img' ? resources().addImage(props) : resources().addMeta(props)
 }
 
 export function endSSR(previous?: ReturnType<typeof beginSSR>): void {
diff --git a/packages/redact/src/server/walk.ts b/packages/redact/src/server/walk.ts
index 461c715..f7135f2 100644
--- a/packages/redact/src/server/walk.ts
+++ b/packages/redact/src/server/walk.ts
@@ -55,7 +55,7 @@ export interface SuspendedBoundary {
   thenable: Promise<any>
   contextSnapshot: ContextSnapshot
   componentStack: string
-  // SVG and picture/noscript flags of the parent, so a boundary rendered later keeps its exclusions.
+  // SVG, picture, noscript and document flags of the parent, so a boundary rendered later keeps them.
   textBits: number
 }
 
@@ -71,7 +71,8 @@ export interface WalkOptions {
   bootstrapped?: boolean | undefined
   isBoundaryResolution?: boolean | undefined
   resourceScope?: ResourceScope | undefined
-  // Shared traversal flags: SVG = 1, adjacent text = 2, inside <picture> or <noscript> = 4.
+  // Shared traversal flags: SVG = 1, adjacent text = 2, inside <picture> = 4, inside <noscript> = 8,
+  // inside <html> = 16.
   // Host children restore previous flags on return or throw.
   textState?: { bits: number }
 }
@@ -251,9 +252,11 @@ function walkHost(
   const isSvg = !!(opts.textState!.bits & 1) || tag === 'svg'
   if (!isSvg && resourceKind(tag, props) && recordHostResource(tag, props, opts.resourceScope)) return
   // In a document render React's server renderer preloads the images it renders eagerly and
-  // opens <head> with the charset and viewport metas. Neither applies inside <svg>, <picture>
-  // or <noscript>.
-  if (!isSvg && !(opts.textState!.bits & 4) && /^(img|meta)$/.test(tag)) {
+  // opens <head> with the charset and viewport metas. Only document renders do this here, since
+  // their head is position-insensitive for hydration. Neither applies inside <svg> or <noscript>,
+  // and images inside <picture> are not preloaded.
+  const bits = opts.textState!.bits
+  if (!isSvg && bits & 16 && !(bits & 8) && (tag === 'meta' || tag === 'img' && !(bits & 4))) {
     const emit = recordHoisted(tag, props)
     if (emit) opts = { ...opts, emit }
   }
@@ -300,11 +303,7 @@ function walkHost(
   // CSS sizing (documentElement.clientHeight returns the content height, not
   // the viewport) — and Floating-UI-based libraries (Radix dropdowns etc.)
   // then compute off-screen positions for overlays.
-  if (tag === 'html') {
-    // Only document renders hoist image preloads and metas: their head is position-insensitive for hydration.
-    currentSSRFrame().document = true
-    opts.emit('<!DOCTYPE html>')
-  }
+  if (tag === 'html') opts.emit('<!DOCTYPE html>')
 
   opts.emit('<' + tag)
   for (const k in props) {
@@ -336,7 +335,7 @@ function walkHost(
 
   if (VOID_ELEMENTS.has(tag)) {
     opts.emit('/>')
-    opts.textState!.bits &= 5
+    opts.textState!.bits &= 29
     return
   }
   opts.emit('>')
@@ -356,7 +355,7 @@ function walkHost(
   if (isTextarea && textareaValue != null) {
     opts.emit(escapeText(String(textareaValue)))
     opts.emit(`</${tag}>`)
-    parentTextState!.bits &= 5
+    parentTextState!.bits &= 29
     return
   }
 
@@ -374,7 +373,7 @@ function walkHost(
       }
     }
     opts.emit(`</${tag}>`)
-    parentTextState!.bits &= 5
+    parentTextState!.bits &= 29
     return
   }
 
@@ -382,7 +381,7 @@ function walkHost(
     opts.emit(String(dangerouslyHtml))
   } else {
     const previousState = parentTextState!.bits
-    parentTextState!.bits = +(isSvg && tag !== 'foreignObject') | previousState & 4 | (/^(picture|noscript)$/.test(tag) ? 4 : 0)
+    parentTextState!.bits = +(isSvg && tag !== 'foreignObject') | previousState & 28 | (tag === 'picture' ? 4 : tag === 'noscript' ? 8 : tag === 'html' ? 16 : 0)
     try {
       walkNode(props.children, opts)
     } finally {
@@ -391,7 +390,7 @@ function walkHost(
   }
   opts.emit(`</${tag}>`)
   // Host element closing resets outer flow — next sibling text starts fresh.
-  parentTextState!.bits &= 5
+  parentTextState!.bits &= 29
   } finally {
     if (isSelect) popSelectContext()
   }
@@ -478,7 +477,6 @@ function walkSuspense(
   const resourceScope: ResourceScope | undefined = currentSSRFrame().shellFlushed ? {} : undefined
   const frame = currentSSRFrame()
   const metas = frame.resources?.metas()
-  const document = !!frame.document
   try {
     walkNode(props.children, {
       ...opts,
@@ -491,8 +489,6 @@ function walkSuspense(
     })
   } catch (thenable: any) {
     nested.length = 0
-    // The discarded children may have opened <html>; the fallback and later siblings keep the outer mode.
-    frame.document = document
     frame.resources?.metas(metas || ['', ''])
     const suspended = isThenable(thenable)
     if (!suspended) {
@@ -508,7 +504,6 @@ function walkSuspense(
       onSuspend: opts.onSuspend ? (boundary) => nested.push(boundary) : undefined,
       nextBoundaryId: opts.nextBoundaryId,
     })
-    frame.document = document
     // A fallback's charset and viewport metas are omitted, as React omits hoistables from fallbacks.
     frame.resources?.metas(metas || ['', ''])
     // Visible div wrapper for a pending boundary so the fallback UI shows; B: id lets $RC locate it on
@@ -521,7 +516,7 @@ function walkSuspense(
     if (suspended) opts.onSuspend?.({
       id, fallbackHTML: fallbackParts.join(''), children: props.children, thenable, contextSnapshot,
       componentStack: thrownInfo.componentStack || opts.componentStack || '',
-      textBits: opts.textState!.bits & 5,
+      textBits: opts.textState!.bits & 29,
     })
     return
   }
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index a306586..b4fcb84 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -66,7 +66,7 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
 // Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
 // Only the server bundle changes; the client entries are untouched.
 const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
-  'redact/server': [450, 448],
+  'redact/server': [463, 463],
 }
 
 let failed = false
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
index a2ca8e6..f9c78fa 100644
--- a/tests/image-preloads.test.tsx
+++ b/tests/image-preloads.test.tsx
@@ -157,6 +157,34 @@ describe('image preloads', () => {
     expect(html).toMatch(/<meta charset="utf-8"\/>$/)
   })
 
+  it('hoists the metas inside a picture, as React does, but not its images', () => {
+    const html = renderToString(<html><head /><body><picture><meta name="viewport" content="pic" /><img src="/pic.png" alt="" /></picture></body></html>)
+    expect(html).toBe('<!DOCTYPE html><html><head><meta name="viewport" content="pic"/></head><body><picture><img src="/pic.png" alt=""/></picture></body></html>')
+  })
+
+  it('preloads the images of a boundary nested in a document fallback when it streams later', async () => {
+    const { Suspense } = await import('react')
+    let resolve!: () => void
+    const ready = new Promise<void>(next => { resolve = next })
+    let done = false
+    function Late() {
+      if (!done) throw ready.then(() => { done = true })
+      return <img src="/late.png" alt="" />
+    }
+    function Broken(): null {
+      throw new Error('broken')
+    }
+    const stream = await renderToReadableStream(
+      <Suspense fallback={<Page><Suspense fallback={null}><Late /></Suspense></Page>}><Broken /></Suspense>,
+      { onError() {} },
+    )
+    resolve()
+    await stream.allReady
+    const html = await new Response(stream).text()
+    expect(html).toContain('<img src="/late.png" alt=""/>')
+    expect(html).toContain('rel="preload" href="/late.png"')
+  })
+
   it('synthesises the head of an html tree that omits it', () => {
     const html = renderToString(<html><body><img src="/hero.png" fetchPriority="high" alt="" /></body></html>)
     expect(html).toBe('<!DOCTYPE html><html><head><link rel="preload" href="/hero.png" as="image" fetchpriority="high"/></head><body><img src="/hero.png" fetchpriority="high" alt=""/></body></html>')

From cd320d1658c29505ca05114a919ae1ebaa2792bd Mon Sep 17 00:00:00 2001
From: Barry Michael Doyle <barrydoyle18@gmail.com>
Date: Thu, 29 Oct 2026 14:50:47 +0200
Subject: [PATCH 11/11] fix(server): keep the text around a hoisted meta apart

A charset or viewport meta hoisted out of a text run left the text before and
after it adjacent, so the browser parsed one text node where the client renders
two. The walk now emits the text separator in its place when the previous
sibling was text, as React's pushMeta does.
---
 packages/redact/src/server/walk.ts | 6 +++++-
 scripts/size-check.mjs             | 2 +-
 tests/image-preloads.test.tsx      | 8 ++++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/redact/src/server/walk.ts b/packages/redact/src/server/walk.ts
index f7135f2..a871c3f 100644
--- a/packages/redact/src/server/walk.ts
+++ b/packages/redact/src/server/walk.ts
@@ -258,7 +258,11 @@ function walkHost(
   const bits = opts.textState!.bits
   if (!isSvg && bits & 16 && !(bits & 8) && (tag === 'meta' || tag === 'img' && !(bits & 4))) {
     const emit = recordHoisted(tag, props)
-    if (emit) opts = { ...opts, emit }
+    if (emit) {
+      // The hoisted meta leaves the body, so keep the text around it apart as React does.
+      if (bits & 2) opts.emit('<!-- -->')
+      opts = { ...opts, emit }
+    }
   }
   // <textarea value="..."> serializes its value as a TEXT CHILD, not an
   // attribute. `defaultValue` is the fallback when `value` is absent. This
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index b4fcb84..c5b39d6 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -66,7 +66,7 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
 // Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
 // Only the server bundle changes; the client entries are untouched.
 const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
-  'redact/server': [463, 463],
+  'redact/server': [468, 468],
 }
 
 let failed = false
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
index f9c78fa..89eabad 100644
--- a/tests/image-preloads.test.tsx
+++ b/tests/image-preloads.test.tsx
@@ -185,6 +185,14 @@ describe('image preloads', () => {
     expect(html).toContain('rel="preload" href="/late.png"')
   })
 
+  it('keeps the text around a hoisted meta apart', () => {
+    const page = <html><head /><body><p>{'a'}<meta charSet="utf-8" />{'b'}</p></body></html>
+    const html = renderToString(page)
+    expect(html).toBe('<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><p>a<!-- -->b</p></body></html>')
+    const doc = new (globalThis as any).DOMParser().parseFromString(html, 'text/html') as Document
+    expect(doc.querySelector('p')!.childNodes).toHaveLength(3)
+  })
+
   it('synthesises the head of an html tree that omits it', () => {
     const html = renderToString(<html><body><img src="/hero.png" fetchPriority="high" alt="" /></body></html>)
     expect(html).toBe('<!DOCTYPE html><html><head><link rel="preload" href="/hero.png" as="image" fetchpriority="high"/></head><body><img src="/hero.png" fetchpriority="high" alt=""/></body></html>')