ship-final.patch

diff --git a/core/attributes.ts b/core/attributes.ts
index f148b5c..66aaba3 100644
--- a/core/attributes.ts
+++ b/core/attributes.ts
@@ -14,6 +14,7 @@ export function attributeName(name: string, isSvg = false): string {
   if (name === 'acceptCharset') return 'accept-charset'
   if (name === 'crossOrigin') return 'crossorigin'
   if (name === 'noModule') return 'nomodule'
+  if (name === 'maskType') return 'mask-type'
   if (name === 'viewBox') return 'viewBox'
   return name.startsWith('aria-') || name.startsWith('data-')
     ? name
diff --git b/core/browser.ts b/core/browser.ts
new file mode 100644
index 0000000..ccf0ca4
--- /dev/null
+++ b/core/browser.ts
@@ -0,0 +1,33 @@
+export const REACT_RECOVERABLE_TYPE = Symbol.for('react.recoverable')
+
+export interface BrowserToken {
+  readonly $$typeof: typeof REACT_RECOVERABLE_TYPE
+  readonly _reason: string | (() => unknown) | undefined
+}
+
+export function browser(reason?: string | (() => unknown)): BrowserToken {
+  return { $$typeof: REACT_RECOVERABLE_TYPE, _reason: reason }
+}
+
+export function isBrowserToken(value: any): value is BrowserToken {
+  return value?.$$typeof === REACT_RECOVERABLE_TYPE
+}
+
+export function browserError(token: BrowserToken): Error {
+  let cause: unknown = token._reason
+  if (typeof cause === 'function') {
+    try {
+      cause = cause()
+    } catch {
+      cause = 'The reason for browser-only rendering could not be determined because its initializer threw.'
+    }
+  }
+  const error = new Error('Browser-only rendering was requested by `browser()`.',
+    token._reason === undefined ? undefined : { cause })
+  Object.defineProperty(error, REACT_RECOVERABLE_TYPE, { value: true })
+  return error
+}
+
+export function isBrowserError(error: any): error is Error {
+  return error?.[REACT_RECOVERABLE_TYPE] === true
+}
diff --git a/core/internal.ts b/core/internal.ts
index 3ec9b40..15b5c39 100644
--- a/core/internal.ts
+++ b/core/internal.ts
@@ -14,6 +14,8 @@ export const enum FiberTag {
   Lazy = 10,
   Suspense = 11,
   Root = 12,
+  Activity = 13,
+  Resource = 14,
 }
 
 export interface Hook {
@@ -21,12 +23,13 @@ export interface Hook {
   q: any
   d: any
   c: any
-  n: Hook | null
 }
 
 export interface Effect {
-  t: 0 | 1
+  t: 0 | 1 | 2
   c: () => any
+  d?: () => void
+  s?: boolean // Store subscriptions run in layout but stay connected in Suspense.
 }
 
 export interface Fiber {
@@ -42,24 +45,39 @@ export interface Fiber {
   parent: Fiber | null
   child: Fiber | null
   sibling: Fiber | null
-  hooks: Hook | null
+  hooks: Hook[] | null
   cu: Array<() => void> | null
   dy: boolean
   um: boolean
+  pd?: boolean
+  su?: Fiber | null // Retained Suspense primary update target.
+  ld?: boolean // Layout effects and refs are disconnected, not passive effects.
   root: FiberRoot | null
+  depth?: number
+  cx?: Map<any, any> | null
+  cr?: Ref<any> | null
+  rc?: (() => void) | null
 }
 
+export type RecoverableErrorHandler = (error: unknown, info: { componentStack: string | null; errorBoundary?: unknown }) => void
+
 export interface FiberRoot {
   c: Element | DocumentFragment
   r: Fiber
   p: Set<Fiber>
   s: boolean
-  re?: ((err: unknown) => void) | undefined
-  ce?: ((err: unknown) => void) | undefined
-  ue?: ((err: unknown) => void) | undefined
+  u?: (() => void) | undefined
+  er?: Array<{ error: unknown; stack: string }> | undefined
+  eb?: boolean
+  sp?: boolean
+  re?: RecoverableErrorHandler | undefined
+  ce?: RecoverableErrorHandler | undefined
+  ue?: RecoverableErrorHandler | undefined
   i: string | undefined
   ic: number
   h: boolean
+  a?: boolean
+  fr?: boolean
 }
 
 export function createFiber(tag: FiberTag, type: any, key: string | null): Fiber {
diff --git b/core/resource-hints.ts b/core/resource-hints.ts
new file mode 100644
index 0000000..82bf80e
--- /dev/null
+++ b/core/resource-hints.ts
@@ -0,0 +1,36 @@
+export type ResourceHintKind =
+  | 'dns-prefetch'
+  | 'preconnect'
+  | 'preload'
+  | 'modulepreload'
+  | 'stylesheet'
+  | 'script'
+  | 'module-script'
+
+// Only supported string options reach the dispatcher, using the public camelCase
+// names. Fonts have crossOrigin: ''. Stylesheet precedence defaults to 'default'.
+// Module preloads omit as for the implicit script destination. href is non-empty.
+// A server renderer returns true to consume a hint in its current request, even
+// when deduplication means no new output. Returning false falls through to the DOM.
+export type ResourceHintOptions = Record<string, string>
+
+export const resourceHintDispatcher: {
+  emit?: (kind: ResourceHintKind, href: string, options: ResourceHintOptions) => boolean
+} = {}
+
+// The renderer excludes SVG before calling this. A ref does not opt a resource
+// out of sharing, but event ownership, disabled sheets and itemProp do.
+export function resourceKind(type: string, props: any): 'style' | 'stylesheet' | 'script' | undefined {
+  if (props.itemProp != null) return
+  if (type === 'style') {
+    if (typeof props.precedence === 'string' && typeof props.href === 'string' && props.href) return 'style'
+  } else if (type === 'link') {
+    if (props.rel === 'stylesheet' && typeof props.href === 'string' && props.href && typeof props.precedence === 'string' && props.disabled == null && !props.onLoad && !props.onError) return 'stylesheet'
+  } else if (type === 'script' && props.async && typeof props.async !== 'function' && typeof props.async !== 'symbol' && typeof props.src === 'string' && props.src && !props.onLoad && !props.onError) return 'script'
+}
+
+export function resourceURL(value: string): string {
+  return /^[\u0000-\u0020]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*:/i.test(value)
+    ? "javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')"
+    : value
+}
diff --git a/dom/_all.ts b/dom/_all.ts
index e7dda6d..ef8f5c2 100644
--- a/dom/_all.ts
+++ b/dom/_all.ts
@@ -18,13 +18,7 @@ export type { Root, RootOptions } from './root'
 export { createPortal } from './portal'
 export { act } from './test-utils'
 
-// Resource hints — stubs
-export function preconnect(_href: string, _opts?: any): void {}
-export function prefetchDNS(_href: string): void {}
-export function preload(_href: string, _opts?: any): void {}
-export function preinit(_href: string, _opts?: any): void {}
-export function preloadModule(_href: string, _opts?: any): void {}
-export function preinitModule(_href: string, _opts?: any): void {}
+export { preconnect, prefetchDNS, preload, preinit, preloadModule, preinitModule } from './resource-hints'
 
 export const version = '19.2.3'
 
diff --git b/dom/commit.ts b/dom/commit.ts
new file mode 100644
index 0000000..7f4f908
--- /dev/null
+++ b/dom/commit.ts
@@ -0,0 +1,186 @@
+import { FiberTag, type Fiber, type Hook } from '../core'
+import { setProp } from './dom'
+
+export interface CommitPlan {
+  q: any[][] // Before-mutation, mutation, effect, rollback and failure queues.
+  c: number[][] // Queue lengths saved at each rollback checkpoint.
+  b: number // Next before-mutation callback, including reentrant commits.
+  m: boolean // Mutation phase has started, preventing duplicate commits.
+}
+
+export let currentCommit: CommitPlan | null = null
+let activeCommit: CommitPlan | null = null
+let reusableCommit: CommitPlan | undefined
+let checkpointHook: (() => void) | undefined
+
+function createCommit(): CommitPlan {
+  return { q: [[], [], [], [], []], c: [], b: 0, m: false }
+}
+
+export function prepareCommit(render: () => void, plan = createCommit()): CommitPlan {
+  const previous = currentCommit
+  currentCommit = plan
+  try { render() } catch (error) {
+    currentCommit = null
+    const failed = plan.q[4]!
+    for (let i = 0; i < failed.length; i++) {
+      const work = failed[i]
+      if (typeof work === 'function') work()
+      else {
+        const children = failed[++i] as Fiber[] | undefined
+        work.child = children?.[0] ?? null
+        if (children) for (let j = 0; j < children.length; j++) children[j]!.sibling = children[j + 1] ?? null
+      }
+    }
+    throw error
+  } finally { currentCommit = previous }
+  return plan
+}
+
+export function queueMutation(work: () => void): void {
+  if (!currentCommit) { work(); return }
+  currentCommit.q[1]!.push(work)
+}
+
+export function queueText(node: Text, value: string): void {
+  if (currentCommit) currentCommit.q[1]!.push(value, node)
+  else node.data = value
+}
+
+export function queueProp(node: Element, key: string, value: any, previous: any, svg: boolean): void {
+  if (currentCommit) currentCommit.q[1]!.push(node, key, value, previous, svg)
+  else setProp(node, key, value, previous, svg)
+}
+
+export function queueBeforeMutation(work: () => void): void {
+  if (currentCommit) currentCommit.q[0]!.push(work)
+  else work()
+}
+
+export function queueCommitEffects(work: () => void): void {
+  const plan = currentCommit || activeCommit
+  if (plan) plan.q[2]!.push(work)
+  else work()
+}
+
+export function onCommitRollback(work: () => void): void {
+  currentCommit?.q[3]!.push(work)
+}
+
+export function onCommitFailure(work: () => void): void {
+  if (currentCommit) currentCommit.q[4]!.push(work)
+  else work()
+}
+
+// Structural reconciliation already builds the previous child list. Keep
+// that list for a failed preparation without allocating per-fiber closures.
+export function rememberChildList(parent: Fiber, children?: Fiber[]): void {
+  currentCommit?.q[4]!.push(parent, children)
+}
+
+export function setCommitCheckpointHook(hook: () => void): void {
+  checkpointHook = hook
+}
+
+export function checkpointCommit(fiber?: Fiber): number {
+  if (!currentCommit) return -1
+  const checkpoint = currentCommit.c.length
+  currentCommit.c.push(currentCommit.q.map(queue => queue.length))
+  if (fiber) rememberSubtree(fiber)
+  checkpointHook?.()
+  return checkpoint
+}
+
+function rememberSubtree(fiber: Fiber): void {
+  const saved = { ...fiber }
+  // Memo and lazy preserve their wrapper tag around the same class instance.
+  const instance = fiber.sn?._fiber === fiber ? fiber.sn : null
+  // Hook has four fields. One flat snapshot preserves slot and dispatch
+  // identity without a tuple and object clone for every hook.
+  const hooks: any[] | null = fiber.hooks && []
+  if (hooks) for (const hook of fiber.hooks!) {
+    const queue = hook.q
+    hooks.push(hook, hook.s, queue, hook.d, hook.c, queue && typeof queue === 'object' ? { ...queue } : null)
+  }
+  const memoized = fiber.ms && (instance || fiber.tag === FiberTag.Suspense || fiber.tag === FiberTag.Fragment)
+    ? { ...fiber.ms } : null
+  if (fiber.cx) saved.cx = new Map(fiber.cx)
+  if (fiber.cu) saved.cu = fiber.cu.slice()
+  const props = instance?.props, state = instance?.state, context = instance?.context
+  onCommitRollback(() => {
+    Object.assign(fiber, saved)
+    if (memoized) {
+      for (const key in fiber.ms) if (!(key in memoized)) delete fiber.ms[key]
+      Object.assign(fiber.ms, memoized)
+    }
+    if (hooks) {
+      fiber.hooks!.length = hooks.length / 6
+      for (let index = 0; index < hooks.length; index += 6) {
+        const hook: Hook = fiber.hooks![index / 6] = hooks[index]
+        hook.s = hooks[index + 1]
+        hook.q = hooks[index + 2]
+        hook.d = hooks[index + 3]
+        hook.c = hooks[index + 4]
+        const queue = hooks[index + 5]
+        if (queue) Object.assign(hook.q, queue)
+      }
+    }
+    if (instance) { instance.props = props; instance.state = state; instance.context = context }
+  })
+  for (let child = fiber.child; child; child = child.sibling) rememberSubtree(child)
+  if (fiber.tag === FiberTag.Suspense && fiber.ms?.f) rememberSubtree(fiber.ms.f)
+}
+
+export function rewindCommit(checkpoint: number): void {
+  if (!currentCommit || checkpoint < 0) return
+  const lengths = currentCommit.c[checkpoint]!
+  const undo = currentCommit.q[3]!
+  for (let index = undo.length - 1; index >= lengths[3]!; index--) undo[index]!()
+  currentCommit.q.forEach((queue, index) => { queue.length = lengths[index]! })
+  currentCommit.c.length = checkpoint
+}
+
+export function commitBeforeMutation(plan: CommitPlan): void {
+  const queue = plan.q[0]!
+  while (plan.b < queue.length) queue[plan.b++]!()
+}
+
+export function commitMutation(plan: CommitPlan): void {
+  if (plan.m) return
+  commitBeforeMutation(plan)
+  if (plan.m) return
+  plan.m = true
+  const previous = activeCommit
+  activeCommit = plan
+  try {
+    const mutations = plan.q[1]!
+    for (let index = 0; index < mutations.length; index++) {
+      const work = mutations[index]
+      if (typeof work === 'function') work()
+      else if (typeof work === 'string') mutations[++index].data = work
+      else setProp(work, mutations[++index], mutations[++index], mutations[++index], mutations[++index])
+    }
+    for (const work of plan.q[2]!) work()
+  } finally {
+    activeCommit = previous
+    for (const queue of plan.q) queue.length = 0
+    plan.c.length = 0
+  }
+}
+
+export function commitSynchronously(render: () => void): void {
+  if (currentCommit) { render(); return }
+  const plan = reusableCommit || createCommit()
+  reusableCommit = undefined
+  plan.b = 0
+  plan.m = false
+  try { commitMutation(prepareCommit(render, plan)) }
+  finally {
+    // Failed preparation must not leave work for a later synchronous root.
+    if (!plan.m) {
+      for (const queue of plan.q) queue.length = 0
+      plan.c.length = 0
+    }
+    reusableCommit = plan
+  }
+}
diff --git a/dom/dispatcher.ts b/dom/dispatcher.ts
index 2eadebd..c5ea564 100644
--- a/dom/dispatcher.ts
+++ b/dom/dispatcher.ts
@@ -1,6 +1,9 @@
-import type { Hook, Fiber, FiberRoot, Effect } from '../core'
-import { ReactSharedInternals, REACT_CONTEXT_TYPE } from '../react'
-import { scheduleUpdate, enqueueEffect, readContext } from './reconcile'
+import type { Hook, Fiber, FiberRoot, Effect, ReactNode } from '../core'
+import { ReactSharedInternals, REACT_CONTEXT_TYPE, startTransition } from '../react'
+import { scheduleUpdate, enqueueEffect, readContext, rememberActivityEffect, handleCommitError } from './reconcile'
+import { REACT_RECOVERABLE_TYPE } from '../core/browser'
+import { queueCommitEffects } from './commit'
+import { deferTransitionPassive } from './features/view-transition'
 
 function getCurrentFiber(): Fiber {
   const f = ReactSharedInternals.F
@@ -14,32 +17,9 @@ function getCurrentFiber(): Fiber {
 }
 
 function nextHook(): Hook {
-  const fiber = getCurrentFiber()
-  const idx = ReactSharedInternals.I++
-
-  let prev = ReactSharedInternals.K
-
-  if (idx === 0) {
-    if (fiber.hooks) {
-      ReactSharedInternals.K = fiber.hooks
-      return fiber.hooks
-    }
-    const h: Hook = { s: undefined, q: undefined, d: undefined, c: undefined, n: null }
-    fiber.hooks = h
-    ReactSharedInternals.K = h
-    return h
-  }
-
-  if (prev && prev.n) {
-    ReactSharedInternals.K = prev.n
-    return prev.n
-  }
-
-  const h: Hook = { s: undefined, q: undefined, d: undefined, c: undefined, n: null }
-  if (prev) prev.n = h
-  else fiber.hooks = h
-  ReactSharedInternals.K = h
-  return h
+  const hooks = getCurrentFiber().hooks ||= []
+  const index = ReactSharedInternals.I++
+  return hooks[index] ||= { s: undefined, q: undefined, d: undefined, c: undefined }
 }
 
 function depsEqual(
@@ -57,110 +37,185 @@ function depsEqual(
 
 type BasicStateAction<S> = S | ((p: S) => S)
 
+function initializeReducer(hook: Hook, fiber: Fiber, initialArg: any, init?: (arg: any) => any): void {
+  hook.s = init ? init(initialArg) : initialArg
+  hook.c = null
+  hook.q = (action: any) => {
+    if (fiber.um || fiber.pd) return
+    ;(hook.c ||= []).push(action)
+    scheduleUpdate(fiber)
+  }
+}
+
+// Reducer slots reuse the effect-cleanup field for pending actions. Zero marks
+// eager state work, null means no update. Replacing arrays lets retries restore
+// pending actions without copying or shifting them.
+function reducePending(hook: Hook, reducer: (state: any, action: any) => any, previous = hook.s): void {
+  const actions = hook.c
+  if (actions == null) return
+  hook.c = null
+  let state = hook.s
+  if (actions) for (const action of actions) state = reducer(state, action)
+  hookFlags |= Object.is(state, previous) ? 2 : 3
+  hook.s = state
+}
+
+let hookEffects: any[] | undefined
+// Bit 1 records a changed value; bit 2 records a processed reducer queue.
+let hookFlags = 0
+export const HOOK_BAILOUT = Symbol()
+
+function resetHookEffects(effects: any[]): void {
+  for (let index = 0; index < effects.length; index += 4) effects[index].d = effects[index + 1]
+}
+
+export function renderWithHooks(
+  fiber: Fiber,
+  render: (props: any, ref?: any) => ReactNode,
+  props: any,
+  ref?: any,
+  canBail = false,
+): ReactNode | typeof HOOK_BAILOUT {
+  const previousDispatcher = ReactSharedInternals.H, previousFiber = ReactSharedInternals.F, previousIndex = ReactSharedInternals.I
+  const previousEffects = hookEffects, previousFlags = hookFlags
+  hookEffects = undefined
+  hookFlags = 0
+  ReactSharedInternals.H = DISPATCHER
+  ReactSharedInternals.F = fiber
+  try {
+    let rendered: ReactNode, attempts = 0
+    do {
+      if (++attempts > 25) throw new Error(process.env.NODE_ENV !== 'production' ? 'Too many re-renders.' : '')
+      if (hookEffects) {
+        resetHookEffects(hookEffects)
+        hookEffects = undefined
+      }
+      ReactSharedInternals.I = 0
+      fiber.dy = false
+      rendered = render(props, ref)
+    } while (fiber.dy)
+    if (canBail && hookFlags === 2) {
+      // React accepts the rendered dependencies on a reducer bailout, but
+      // keeps the previous committed effect descriptions until real work.
+      hookEffects = undefined
+      return HOOK_BAILOUT
+    }
+    if (hookEffects) {
+      const effects: any[] = hookEffects
+      for (let index = 0; index < effects.length; index += 4) {
+        const hook = effects[index], effect = effects[index + 2]
+        rememberActivityEffect(fiber, hook, effect)
+        if (effects[index + 3]) enqueueEffect(fiber, effect)
+      }
+      hookEffects = undefined
+    }
+    return rendered
+  } finally {
+    if (hookEffects) resetHookEffects(hookEffects)
+    hookEffects = previousEffects
+    hookFlags = previousFlags
+    ReactSharedInternals.H = previousDispatcher
+    ReactSharedInternals.F = previousFiber
+    ReactSharedInternals.I = previousIndex
+  }
+}
+
+export function cleanupEffect(hook: Hook, fiber: Fiber): void {
+  if (!hook.c) return
+  const cleanup = hook.c
+  hook.c = null
+  if (fiber.cu) {
+    const index = fiber.cu.indexOf(cleanup)
+    if (index >= 0) fiber.cu.splice(index, 1)
+  }
+  try { cleanup() } catch (error) { handleCommitError(fiber, error) }
+}
+
+function useEffectImpl(type: Effect['t'], create: () => any, deps?: ReadonlyArray<unknown>): void {
+  const hook = nextHook()
+  const fiber = getCurrentFiber()
+  const changed = hook.d === undefined || !depsEqual(hook.d, deps)
+  if (!changed && !fiber.root?.a && !(type === 1 && fiber.root?.sp)) return
+  const previous = hook.d
+  hook.d = deps
+  const effect: Effect = {
+    t: type,
+    c: () => {
+      cleanupEffect(hook, fiber)
+      const cleanup = create()
+      // Each effect owns its cleanup even when hooks return the same function.
+      hook.c = typeof cleanup === 'function' ? () => {
+        if (type === 0) {
+          const dispose = () => {
+            try { cleanup() } catch (error) { handleCommitError(fiber, error) }
+          }
+          if (!deferTransitionPassive(dispose)) queueCommitEffects(dispose)
+        } else cleanup()
+      } : null
+      return hook.c
+    },
+  }
+  if (type === 1) effect.d = () => cleanupEffect(hook, fiber)
+  ;(hookEffects ||= []).push(hook, previous, effect, changed)
+}
+
 // Singleton — every method reads render context via ReactSharedInternals,
 // and per-hook closures live on the hook itself, so nothing is render-local
 // to capture. Allocating a fresh wrapper + 17 method closures per function-
 // component render was pure GC pressure.
 const DISPATCHER = makeDispatcherImpl()
 
-export function makeDispatcher() {
-  return DISPATCHER
-}
-
 function makeDispatcherImpl() {
   return {
     useState<S>(initial: S | (() => S)): [S, (a: BasicStateAction<S>) => void] {
-      return this.useReducer(
-        basicReducer as (state: S, action: BasicStateAction<S>) => S,
-        typeof initial == 'function' ? (initial as () => S)() : initial,
-      )
-    },
-
-    useReducer<S, A>(reducer: (s: S, a: A) => S, initialArg: any, init?: (a: any) => S) {
-      const hook = nextHook()
-      const fiber = getCurrentFiber()
+      const hook = nextHook(), fiber = getCurrentFiber()
       if (hook.q === undefined) {
-        hook.s = init ? init(initialArg) : initialArg
-        const queue: any = { r: reducer }
-        const dispatch = (action: A) => {
-          const currentState = hook.s as S
-          const next = queue.r(currentState, action)
-          if (!Object.is(next, currentState)) {
+        hook.s = hook.d = typeof initial === 'function' ? (initial as () => S)() : initial
+        hook.c = null
+        hook.q = (action: BasicStateAction<S>) => {
+          if (fiber.um || fiber.pd) return
+          if (ReactSharedInternals.F !== fiber && !hook.c) {
+            let next: S
+            try {
+              next = basicReducer(hook.s, action)
+            } catch {
+              hook.c = [action]
+              scheduleUpdate(fiber)
+              return
+            }
+            if (Object.is(next, hook.s)) return
             hook.s = next
+            hook.c = 0
             scheduleUpdate(fiber)
+            return
           }
+          ;(hook.c ||= []).push(action)
+          scheduleUpdate(fiber)
         }
-        queue.d = dispatch
-        hook.q = queue
-      } else {
-        hook.q.r = reducer
       }
-      return [hook.s, hook.q.d] as [S, (a: A) => void]
+      reducePending(hook, basicReducer, hook.d)
+      hook.d = hook.s
+      return [hook.s, hook.q]
     },
 
-    useEffect(create: () => any, deps?: ReadonlyArray<unknown>) {
+    useReducer<S, A>(reducer: (s: S, a: A) => S, initialArg: any, init?: (a: any) => S) {
       const hook = nextHook()
-      const fiber = getCurrentFiber()
-      const prevDeps = hook.d
-      if (prevDeps !== undefined && depsEqual(prevDeps, deps)) return
-      hook.d = deps
-      const effect: Effect = {
-        t: 0,
-        c: () => {
-          // Run the prior cleanup INSIDE the effect run, not during the
-          // dispatch/render phase. If render A → B → C all happen back-to-
-          // back before the passive microtask drains, dispatch-time cleanup
-          // only fires once (between A→B) and fx B + C both run fresh,
-          // leaving two side-fx (e.g. two plot SVGs) in the DOM. Doing
-          // it here, at effect-run time, means every new create first tears
-          // down whatever cleanup is currently live on the hook.
-          if (hook.c) {
-            try { hook.c() } catch {}
-            // The prior cleanup was also pushed onto fiber.cu; remove
-            // it so unmount doesn't double-call it.
-            if (fiber.cu) {
-              const i = fiber.cu.indexOf(hook.c)
-              if (i >= 0) fiber.cu.splice(i, 1)
-            }
-            hook.c = null
-          }
-          const c = create()
-          hook.c = typeof c == 'function' ? c : null
-          return hook.c
-        },
-      }
-      enqueueEffect(fiber, effect)
+      if (hook.q === undefined) initializeReducer(hook, getCurrentFiber(), initialArg, init)
+      reducePending(hook, reducer)
+      hook.d = reducer
+      return [hook.s, hook.q] as [S, (a: A) => void]
+    },
+
+    useEffect(create: () => any, deps?: ReadonlyArray<unknown>) {
+      useEffectImpl(0, create, deps)
     },
 
     useLayoutEffect(create: () => any, deps?: ReadonlyArray<unknown>) {
-      const hook = nextHook()
-      const fiber = getCurrentFiber()
-      const prevDeps = hook.d
-      if (prevDeps !== undefined && depsEqual(prevDeps, deps)) return
-      hook.d = deps
-      const effect: Effect = {
-        t: 1,
-        c: () => {
-          // Mirror useEffect: tear down the prior cleanup at run time so
-          // coalesced renders don't leak side-fx.
-          if (hook.c) {
-            try { hook.c() } catch {}
-            if (fiber.cu) {
-              const i = fiber.cu.indexOf(hook.c)
-              if (i >= 0) fiber.cu.splice(i, 1)
-            }
-            hook.c = null
-          }
-          const c = create()
-          hook.c = typeof c == 'function' ? c : null
-          return hook.c
-        },
-      }
-      enqueueEffect(fiber, effect)
+      useEffectImpl(1, create, deps)
     },
 
     useInsertionEffect(create: () => any, deps?: ReadonlyArray<unknown>) {
-      return this.useLayoutEffect(create, deps)
+      useEffectImpl(2, create, deps)
     },
 
     useRef<T>(initial: T) {
@@ -190,14 +245,16 @@ function makeDispatcherImpl() {
     },
 
     useImperativeHandle<T>(ref: any, factory: () => T, deps?: ReadonlyArray<unknown>) {
-      const hook = nextHook()
-      if (hook.d !== undefined && depsEqual(hook.d, deps)) return
-      hook.d = deps
-      const value = factory()
-      if (ref) {
-        if (typeof ref == 'function') ref(value)
-        else ref.current = value
-      }
+      useEffectImpl(1, () => {
+        if (!ref) return
+        const value = factory()
+        if (typeof ref === 'function') {
+          const cleanup = ref(value)
+          return typeof cleanup === 'function' ? cleanup : () => ref(null)
+        }
+        ref.current = value
+        return () => { ref.current = null }
+      }, deps == null ? undefined : [...deps, ref])
     },
 
     useDebugValue<T>(_value: T, _formatter?: (v: T) => any): void {
@@ -217,13 +274,19 @@ function makeDispatcherImpl() {
     },
 
     useTransition(): [boolean, (fn: () => void) => void] {
-      return [false, (fn: () => void) => fn()]
+      return [false, startTransition]
     },
 
     useDeferredValue<T>(v: T): T {
       return v
     },
 
+    useCacheRefresh(): () => void {
+      // There is no client cache to invalidate. Preserve hook identity and
+      // leave state and scheduling alone, as with the uncached client cache().
+      return this.useCallback(() => {}, [])
+    },
+
     useSyncExternalStore<T>(
       subscribe: (cb: () => void) => () => void,
       getSnapshot: () => T,
@@ -251,26 +314,19 @@ function makeDispatcherImpl() {
       const isHydrating = Boolean(root?.h)
       const value =
         isHydrating && getServerSnapshot ? getServerSnapshot() : getSnapshot()
+      if (!Object.is(hook.s, value)) hookFlags |= 1
       hook.s = value
 
       const deps = [subscribe]
-      if (hook.d === undefined || !depsEqual(hook.d, deps)) {
+      const changed = hook.d === undefined || !depsEqual(hook.d, deps)
+      if (changed || fiber.root?.a) {
+        const previous = hook.d
         hook.d = deps
         const effect: Effect = {
           t: 1,
+          s: true,
           c: () => {
-            if (hook.c) {
-              try {
-                hook.c()
-              } catch {
-                // ignore cleanup failures
-              }
-              if (fiber.cu) {
-                const i = fiber.cu.indexOf(hook.c)
-                if (i >= 0) fiber.cu.splice(i, 1)
-              }
-              hook.c = null
-            }
+            cleanupEffect(hook, fiber)
 
             let unsubscribed = false
             const cleanup = () => {
@@ -293,7 +349,6 @@ function makeDispatcherImpl() {
               }
 
               if (!Object.is(hook.s, next)) {
-                hook.s = next
                 scheduleUpdate(fiber)
               }
             }
@@ -311,12 +366,13 @@ function makeDispatcherImpl() {
             return cleanup
           },
         }
-        enqueueEffect(fiber, effect)
+        ;(hookEffects ||= []).push(hook, previous, effect, changed)
       }
       return value
     },
 
     use<T>(resource: any): T {
+      if (resource?.$$typeof === REACT_RECOVERABLE_TYPE) return undefined as T
       if (resource == null) {
         if (process.env.NODE_ENV !== 'production') {
           throw new Error('use() received null or undefined')
@@ -372,7 +428,7 @@ let idCounter = 0
 function findRootFromFiber(fiber: Fiber): FiberRoot | null {
   let f: Fiber | null = fiber
   while (f) {
-    if (f.root) return f.root
+    if (f.root) return fiber.root = f.root
     f = f.parent
   }
   return null
diff --git a/dom/dom.ts b/dom/dom.ts
index 2140001..f4737b3 100644
--- a/dom/dom.ts
+++ b/dom/dom.ts
@@ -9,6 +9,7 @@ const BOOLEAN_ATTRS = new Set([
   'autoplay',
   'checked',
   'controls',
+  'credentialless',
   'default',
   'defer',
   'disabled',
@@ -51,6 +52,54 @@ export function isSvgElement(el: Element): boolean {
   return (el as any).ownerSVGElement !== undefined || el.tagName === 'svg'
 }
 
+export function syncInputValue(el: HTMLInputElement, props: any, prev?: any): void {
+  if (!prev) {
+    el.checked = el.defaultChecked = !!(props.checked ?? props.defaultChecked)
+  } else if (props.checked != null) {
+    el.checked = !!props.checked
+  } else if (props.defaultChecked != null) {
+    el.defaultChecked = !!props.defaultChecked
+  }
+  const value = props.value
+  const fallback = props.defaultValue
+  if (!prev) {
+    if (value == null && (el.type === 'submit' || el.type === 'reset')) return
+    if (value != null || fallback != null) {
+      const initial = '' + (value ?? fallback)
+      if (el.value !== initial) el.value = initial
+      el.defaultValue = initial
+    }
+    return
+  }
+  if (value != null) {
+    // Number inputs keep equivalent user spelling, including trailing zeroes.
+    if (el.type === 'number' ? (value === 0 && el.value === '') || el.value != value : el.value !== '' + value) {
+      el.value = '' + value
+    }
+    const nextDefault = el.type === 'number' && el.value == value ? el.value : '' + value
+    if (el.defaultValue !== nextDefault) el.defaultValue = nextDefault
+  } else if (fallback != null) {
+    if (el.defaultValue !== '' + fallback) el.defaultValue = '' + fallback
+  } else if (prev.defaultValue != null || el.type === 'submit' || el.type === 'reset') {
+    el.removeAttribute('value')
+  }
+}
+
+export function syncTextareaValue(el: HTMLTextAreaElement, props: any, mounting = false): void {
+  if (mounting) {
+    const children = props.children
+    const initial = props.value ?? props.defaultValue ?? (Array.isArray(children) ? children[0] : children) ?? ''
+    el.defaultValue = initial
+    // The strict check also preserves React's clean numeric-default state.
+    if (initial !== '' && el.textContent === initial) el.value = initial
+    return
+  }
+  const value = props.value
+  if (value != null && el.value !== '' + value) el.value = '' + value
+  const fallback = props.defaultValue ?? value ?? ''
+  if (el.defaultValue !== '' + fallback) el.defaultValue = '' + fallback
+}
+
 export function setProp(
   el: Element,
   name: string,
@@ -59,6 +108,14 @@ export function setProp(
   isSvg: boolean,
 ): void {
   if (name === 'children' || name === 'key' || name === 'ref') return
+  // These names need no alias or boolean-attribute normalization.
+  if (name.length > 5 && (name.charCodeAt(0) === 97 || name.charCodeAt(0) === 100)) {
+    if (name.startsWith('aria-') || name.startsWith('data-')) {
+      if (next == null) el.removeAttribute(name)
+      else el.setAttribute(name, '' + next)
+      return
+    }
+  }
   const attr = attributeName(name, isSvg)
 
   // defaultValue / defaultChecked are IDL-property-only — they seed the
@@ -76,19 +133,8 @@ export function setProp(
     return
   }
 
-  if (name === 'className') {
-    if (isSvg) {
-      if (next == null) el.removeAttribute('class')
-      else el.setAttribute('class', '' + next)
-    } else {
-      ;(el as HTMLElement).className = next == null ? '' : '' + next
-    }
-    return
-  }
-
-  if (name === 'class') {
-    if (next == null) el.removeAttribute('class')
-    else el.setAttribute('class', '' + next)
+  if (name === 'className' && !isSvg) {
+    ;(el as HTMLElement).className = next == null ? '' : '' + next
     return
   }
 
@@ -105,17 +151,11 @@ export function setProp(
   }
 
   if (name[0] === 'o' && name[1] === 'n') {
-    setEventHandler(el, name, next, prev)
+    setEventHandler(el, name, next)
     return
   }
 
-  if (name === 'htmlFor') {
-    if (next == null) el.removeAttribute('for')
-    else el.setAttribute('for', '' + next)
-    return
-  }
-
-  if (STRING_BOOLEAN_ATTRS.has(attr)) {
+  if (name === 'className' || name === 'class' || name === 'htmlFor' || STRING_BOOLEAN_ATTRS.has(attr)) {
     if (next == null) el.removeAttribute(attr)
     else el.setAttribute(attr, '' + next)
     return
@@ -128,32 +168,12 @@ export function setProp(
     } catch {}
   }
 
-  if (BOOLEAN_ATTRS.has(name.toLowerCase())) {
-    if (next) el.setAttribute(attr, '')
-    else el.removeAttribute(attr)
-    return
-  }
-
-  // aria-* and data-* attributes stringify booleans to `"true"`/`"false"`
-  // rather than using the HTML boolean-attribute presence/absence semantics.
-  // This matches React and the ARIA spec (aria-hidden="false" is meaningful).
-  if (name.length > 5 && (name.charCodeAt(0) === 97 /* a */ || name.charCodeAt(0) === 100 /* d */)) {
-    if (name.startsWith('aria-') || name.startsWith('data-')) {
-      if (next == null) {
-        el.removeAttribute(attr)
-      } else {
-        el.setAttribute(attr, '' + next)
-      }
-      return
-    }
-  }
+  if (BOOLEAN_ATTRS.has(attr)) next = !!next
 
   if (next == null || next === false) {
     el.removeAttribute(attr)
-  } else if (next === true) {
-    el.setAttribute(attr, '')
   } else {
-    el.setAttribute(attr, '' + next)
+    el.setAttribute(attr, next === true ? '' : next)
   }
 }
 
@@ -241,7 +261,7 @@ export interface SyntheticEvent extends Event {
   currentTarget: EventTarget & Element
 }
 
-function setEventHandler(el: Element, name: string, next: any, prev: any): void {
+function setEventHandler(el: Element, name: string, next: any): void {
   // Only function handlers are accepted. Reject strings/objects/etc — the
   // legacy `onclick="..."` HTML attribute (string handler) is a known XSS
   // vector if a parent spreads untrusted props onto a host element. React
@@ -256,13 +276,11 @@ function setEventHandler(el: Element, name: string, next: any, prev: any): void
   // `onInput` on the same text input — which both dispatch from the native
   // `input` event — can coexist without clobbering each other's handlers.
   const handlers = ((el as any).__handlers ||= Object.create(null))
-  const key = name
-
-  const existing = handlers[key]
+  const existing = handlers[name]
 
   if (existing && !next) {
-    el.removeEventListener(existing.event, existing.listener, existing.capture)
-    handlers[key] = null
+    el.removeEventListener(existing.event, existing.listener, capture)
+    handlers[name] = null
     return
   }
 
@@ -271,7 +289,6 @@ function setEventHandler(el: Element, name: string, next: any, prev: any): void
       current: next as Function,
       listener: null as any,
       event: eventName,
-      capture,
     }
     entry.listener = (e: Event) => {
       // React hands handlers a SyntheticEvent that carries `.nativeEvent`.
@@ -282,7 +299,7 @@ function setEventHandler(el: Element, name: string, next: any, prev: any): void
       if ((e as any).nativeEvent === undefined) (e as any).nativeEvent = e
       entry.current(e)
     }
-    handlers[key] = entry
+    handlers[name] = entry
     el.addEventListener(eventName, entry.listener, capture)
     return
   }
@@ -291,10 +308,9 @@ function setEventHandler(el: Element, name: string, next: any, prev: any): void
     // Re-bind if the effective DOM event changed (e.g. <input> whose `type`
     // flipped from "text" to "checkbox" — onChange should now follow `change`
     // instead of `input`). This is rare but keeps semantics correct.
-    if (existing.event !== eventName || existing.capture !== capture) {
-      el.removeEventListener(existing.event, existing.listener, existing.capture)
+    if (existing.event !== eventName) {
+      el.removeEventListener(existing.event, existing.listener, capture)
       existing.event = eventName
-      existing.capture = capture
       el.addEventListener(eventName, existing.listener, capture)
     }
     existing.current = next
diff --git b/dom/error-info.ts b/dom/error-info.ts
new file mode 100644
index 0000000..40ff9c4
--- /dev/null
+++ b/dom/error-info.ts
@@ -0,0 +1,15 @@
+import { FiberTag, type Fiber } from '../core'
+
+export function componentStack(fiber: Fiber | null): string {
+  let stack = ''
+  for (; fiber; fiber = fiber.parent) {
+    let type = fiber.type
+    while (type && typeof type === 'object') type = type.type || type.render
+    const name = typeof type === 'string' ? type
+      : typeof type === 'function' ? type.displayName || type.name || 'Anonymous'
+      : fiber.tag === FiberTag.Suspense ? 'Suspense'
+      : fiber.tag === FiberTag.Activity ? 'Activity' : ''
+    if (name) stack += '\n    at ' + name
+  }
+  return stack
+}
diff --git b/dom/features/activity/full.ts b/dom/features/activity/full.ts
new file mode 100644
index 0000000..ad275b4
--- /dev/null
+++ b/dom/features/activity/full.ts
@@ -0,0 +1,166 @@
+import { FiberTag, type Fiber } from '../../../core'
+import { REACT_ACTIVITY_TYPE } from '../../../react/activity'
+import { onCommitRollback, queueMutation } from '../../commit'
+import { retainedEffects as effects, inSuspensePrimary, setLayoutDisconnected, walkRetained as walk } from '../../retained-effects'
+import {
+  attachRef,
+  childrenToArray,
+  detachRef,
+  enqueueEffect,
+  findRoot,
+  flushFiberCommits,
+  getCurrentRoot,
+  handleCommitError,
+  installCapability,
+  reconcileChildren,
+  registerRenderer,
+  registerTypeMatcher,
+  scheduleLifecycle,
+  scheduleUpdate,
+} from '../../reconcile'
+
+// Retain effect descriptions, not subscriptions, while a subtree is hidden.
+// Weak keys keep this bookkeeping out of fibers that do not use Activity.
+const disconnected = new WeakSet<Fiber>()
+const hiddenDoms = new WeakSet<Fiber>()
+
+function setMembership(set: WeakSet<Fiber>, fiber: Fiber, present: boolean): boolean {
+  const previous = set.has(fiber)
+  if (previous === present) return previous
+  onCommitRollback(() => { if (previous) set.add(fiber); else set.delete(fiber) })
+  if (present) set.add(fiber)
+  else set.delete(fiber)
+  return previous
+}
+
+function isHidden(fiber: Fiber): boolean {
+  if (!(fiber.root ?? findRoot(fiber))?.a) return false
+  for (let parent: Fiber | null = fiber; parent; parent = parent.parent) {
+    if (parent.tag === FiberTag.Activity && parent.pp?.mode === 'hidden') return true
+  }
+  return false
+}
+
+function report(fiber: Fiber, fn: () => void): void {
+  try { fn() } catch (error) { handleCommitError(fiber, error) }
+}
+
+function disconnect(fiber: Fiber): void {
+  if (disconnected.has(fiber)) return
+  setMembership(disconnected, fiber, true)
+  queueMutation(() => {
+    // Insertion effects remain connected, just as they do in React.
+    const insertion = new Set<() => void>()
+    for (const [hook, effect] of effects.get(fiber) ?? []) {
+      if (effect.t === 2 && hook.c) insertion.add(hook.c)
+    }
+    if (fiber.cu) {
+      const keep = fiber.cu.filter(cleanup => insertion.has(cleanup))
+      for (const cleanup of fiber.cu) {
+        if (!insertion.has(cleanup)) report(fiber, cleanup)
+      }
+      fiber.cu = keep.length ? keep : null
+    }
+    for (const [hook, effect] of effects.get(fiber) ?? []) {
+      if (effect.t !== 2) hook.c = null
+    }
+    detachRef(fiber.cr ?? fiber.ref)
+    fiber.cr = null
+    fiber.rc = null
+    const instance = fiber.sn?._fiber === fiber ? fiber.sn : null
+    if (!fiber.ld && instance?.componentWillUnmount) {
+      const props = instance.props, state = instance.state, committed = fiber.ms?.c
+      if (committed) { instance.props = committed.props; instance.state = committed.state }
+      try { report(fiber, () => instance.componentWillUnmount()) }
+      finally { instance.props = props; instance.state = state }
+    }
+  })
+}
+
+function prepare(fiber: Fiber): void {
+  if (!isHidden(fiber) || disconnected.has(fiber)) return
+  if (fiber.mp == null) setMembership(disconnected, fiber, true)
+  else disconnect(fiber)
+}
+
+function needsHiddenDom(fiber: Fiber): boolean {
+  for (let parent = fiber.parent; parent; parent = parent.parent) {
+    if (parent.tag === FiberTag.Activity && parent.pp?.mode === 'hidden') return true
+    if (parent.tag === FiberTag.Host) return false
+    // A portal starts a new DOM tree, but keeps the parent's Activity state.
+    if (parent.tag === FiberTag.Portal) return isHidden(parent)
+  }
+  return false
+}
+
+function syncDom(fiber: Fiber): void {
+  if (!(fiber.root ?? findRoot(fiber))?.a) return
+  if (!fiber.dom || (fiber.tag !== FiberTag.Host && fiber.tag !== FiberTag.Text)) return
+  if (needsHiddenDom(fiber)) {
+    setMembership(hiddenDoms, fiber, true)
+    queueMutation(() => {
+      if (fiber.tag === FiberTag.Text) fiber.dom!.nodeValue = ''
+      else (fiber.dom as HTMLElement).style.setProperty('display', 'none', 'important')
+    })
+  } else if (setMembership(hiddenDoms, fiber, false)) {
+    // A Suspense fallback can remain active after its Activity is revealed.
+    // Its preserved primary DOM must stay hidden until that boundary resumes.
+    for (let parent = fiber.parent; parent; parent = parent.parent) {
+      if (parent.tag === FiberTag.Suspense && parent.ms?.d?.some(([node]: [Node, string]) => node === fiber.dom)) return
+    }
+    const props = fiber.pp
+    queueMutation(() => {
+      if (fiber.tag === FiberTag.Text) fiber.dom!.nodeValue = props
+      else {
+        const display = props?.style?.display
+        ;(fiber.dom as HTMLElement).style.display = display == null || typeof display === 'boolean' ? '' : ('' + display).trim()
+      }
+    })
+  }
+}
+
+function reconnect(fiber: Fiber): void {
+  syncDom(fiber)
+  if (isHidden(fiber) || inSuspensePrimary(fiber) || !setMembership(disconnected, fiber, false)) return
+  setLayoutDisconnected(fiber, false)
+  const instance = fiber.sn?._fiber === fiber ? fiber.sn : null
+  if (fiber.tag === FiberTag.Host || fiber.tag === FiberTag.Resource) attachRef(fiber, fiber.dom)
+  else if (instance || fiber.tag === FiberTag.Fragment) attachRef(fiber, fiber.sn)
+  for (const effect of effects.get(fiber)?.values() ?? []) {
+    if (effect.t !== 2) enqueueEffect(fiber, effect)
+  }
+  if (instance?.componentDidMount) {
+    scheduleLifecycle(fiber, () => instance.componentDidMount())
+  }
+  flushFiberCommits(fiber)
+}
+
+function finish(fiber: Fiber): void {
+  if (fiber.tag === FiberTag.Suspense && (fiber.root ?? findRoot(fiber))?.a) walk(fiber, reconnect, true)
+  else syncDom(fiber)
+}
+
+function renderActivity(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const root = fiber.root ?? findRoot(fiber)
+  if (root) root.a = true
+  const props = fiber.pp ?? {}
+  // Hidden content is absent from server HTML. Mount it after hydration so it
+  // cannot consume a following visible sibling's hydration cursor.
+  if (getCurrentRoot()?.h && props.mode === 'hidden' && !fiber.mp) {
+    fiber.mp = props
+    queueMicrotask(() => scheduleUpdate(fiber))
+    return
+  }
+  if (isHidden(fiber)) walk(fiber, prepare)
+  else walk(fiber, syncDom)
+  reconcileChildren(fiber, childrenToArray(props.children), domParent, anchor)
+  walk(fiber, reconnect, true)
+  fiber.mp = props
+}
+
+installCapability('isActivityHidden', isHidden)
+installCapability('activityIsDisconnected', fiber => disconnected.has(fiber))
+installCapability('prepareActivityFiber', prepare)
+installCapability('syncActivity', finish)
+registerTypeMatcher(type => type === REACT_ACTIVITY_TYPE ? FiberTag.Activity : null)
+registerRenderer(FiberTag.Activity, renderActivity)
diff --git b/dom/features/activity/index.ts b/dom/features/activity/index.ts
new file mode 100644
index 0000000..007f15d
--- /dev/null
+++ b/dom/features/activity/index.ts
@@ -0,0 +1 @@
+export * from './full'
diff --git b/dom/features/activity/stub.ts b/dom/features/activity/stub.ts
new file mode 100644
index 0000000..0c507dd
--- /dev/null
+++ b/dom/features/activity/stub.ts
@@ -0,0 +1,14 @@
+import { FiberTag, type Fiber } from '../../../core'
+import { REACT_ACTIVITY_TYPE } from '../../../react/activity'
+import { childrenToArray, reconcileChildren, registerRenderer, registerTypeMatcher } from '../../reconcile'
+
+// Explicit small-preset downgrade: hidden children unmount instead of being
+// retained. Showing them again creates fresh state, DOM, effects, and refs.
+function renderActivity(fiber: Fiber, parent: Node, anchor: Node | null): void {
+  const props = fiber.pp ?? {}
+  reconcileChildren(fiber, props.mode === 'hidden' ? [] : childrenToArray(props.children), parent, anchor)
+  fiber.mp = props
+}
+
+registerTypeMatcher(type => type === REACT_ACTIVITY_TYPE ? FiberTag.Activity : null)
+registerRenderer(FiberTag.Activity, renderActivity)
diff --git a/dom/features/class/full.ts b/dom/features/class/full.ts
index 2a5be9f..fd0091c 100644
--- a/dom/features/class/full.ts
+++ b/dom/features/class/full.ts
@@ -1,4 +1,5 @@
 import { FiberTag, type Fiber, type ReactNode } from '../../../core'
+import { checkpointCommit, rewindCommit, queueBeforeMutation, queueMutation } from '../../commit'
 import {
   registerRenderer,
   reconcileChildren,
@@ -8,17 +9,30 @@ import {
   isThenable,
   handleSuspended,
   handleErrorInRender,
+  readContext,
+  attachRef,
+  syncRefIfChanged,
+  isActivityHidden,
+  layoutIsDisconnected,
+  RenderErrorCapture,
+  handleCommitError,
 } from '../../reconcile'
 
 function renderClass(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  fiber.cx?.clear()
   const Ctor = fiber.type as any
   let instance = fiber.sn
   const props = fiber.pp ?? {}
   const isNew = !instance
+  const previous = fiber.ms?.c
+  let didRender = true
+  let captured = fiber.ms?.error instanceof RenderErrorCapture ? fiber.ms.error as RenderErrorCapture : undefined
+  if (captured) delete fiber.ms.error
 
   // Class contextType: read the current value of the subscribed context so
   // `this.context` reflects the nearest Provider. Evaluated every render.
-  const ctxValue = Ctor.contextType ? Ctor.contextType._currentValue : undefined
+  const ctxValue = Ctor.contextType ? readContext(fiber, Ctor.contextType) : undefined
+  const contextChanged = instance && !Object.is(instance.context, ctxValue)
 
   if (isNew) {
     instance = new Ctor(props, ctxValue)
@@ -47,39 +61,31 @@ function renderClass(fiber: Fiber, domParent: Node, anchor: Node | null): void {
       if (d) instance.state = { ...instance.state, ...d }
     }
   } else {
-    const prevProps = instance.props
-    const prevState = instance.state
     // Refresh context on every render — Providers higher up may have changed.
     instance.context = ctxValue
     if (Ctor.getDerivedStateFromProps) {
       const d = Ctor.getDerivedStateFromProps(props, instance.state)
       if (d) instance.state = { ...instance.state, ...d }
     }
-    if (instance.shouldComponentUpdate) {
+    if (!captured && instance.shouldComponentUpdate && !contextChanged) {
       if (!instance.shouldComponentUpdate(props, instance.state, instance.context)) {
-        instance.props = props
-        fiber.mp = props
-        // Still need to render children with previous output
-        if (fiber.ms?.r) {
-          reconcileChildren(fiber, childrenToArray(fiber.ms.r), domParent, anchor)
-        }
-        return
+        didRender = false
       }
     }
     instance.props = props
-    // New snapshot must win over any stale one from a previous render —
-    // otherwise componentDidUpdate keeps seeing the original props and can
-    // ping-pong setState forever.
-    fiber.ms = { ...(fiber.ms ?? {}), p: prevProps, s: prevState }
+  }
+  if (captured && Ctor.getDerivedStateFromError) {
+    const update = Ctor.getDerivedStateFromError(captured.error)
+    if (update != null) instance.state = { ...instance.state, ...update }
   }
 
   let rendered: ReactNode
   try {
-    rendered = instance.render()
+    rendered = captured && !Ctor.getDerivedStateFromError ? null : didRender ? instance.render() : fiber.ms?.r
   } catch (e: any) {
     if (isThenable(e)) {
       handleSuspended(fiber, e)
-      rendered = null
+      return
     } else {
       handleErrorInRender(fiber, e)
       return
@@ -87,17 +93,62 @@ function renderClass(fiber: Fiber, domParent: Node, anchor: Node | null): void {
   }
   fiber.ms = { ...(fiber.ms ?? {}), r: rendered }
 
-  reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  const canCatch = Ctor.getDerivedStateFromError || instance.componentDidCatch
+  if (canCatch) fiber.ms.b = Ctor
+  if (canCatch && fiber.root) fiber.root.eb = true
+  const checkpoint = canCatch ? checkpointCommit(fiber) : -1
+  try {
+    reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  } catch (error) {
+    if (!(error instanceof RenderErrorCapture) || error.boundary !== fiber) throw error
+    rewindCommit(checkpoint)
+    captured = error
+    didRender = true
+    if (Ctor.getDerivedStateFromError) {
+      const update = Ctor.getDerivedStateFromError(error.error)
+      if (update != null) instance.state = { ...instance.state, ...update }
+      try { rendered = instance.render() } catch (fallbackError) {
+        handleErrorInRender(fiber, fallbackError)
+        return
+      }
+    } else rendered = null
+    fiber.ms = { ...(fiber.ms ?? {}), r: rendered }
+    reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
+  }
   fiber.mp = props
+  const state = instance.state
+  queueMutation(() => { fiber.ms.c = { props, state } })
+
+  if (isNew) attachRef(fiber, instance)
+  else syncRefIfChanged(fiber, instance)
 
   // Schedule lifecycle
   if (isNew) {
     if (instance.componentDidMount) {
       scheduleLifecycle(fiber, () => instance.componentDidMount())
     }
-  } else if (instance.componentDidUpdate) {
-    const { p, s } = fiber.ms ?? {}
-    scheduleLifecycle(fiber, () => instance.componentDidUpdate(p, s))
+  } else if (previous && didRender) {
+    let snapshot: any
+    if (instance.getSnapshotBeforeUpdate && !layoutIsDisconnected(fiber)) {
+      queueBeforeMutation(() => {
+        if (!fiber.um && !fiber.pd && !isActivityHidden(fiber) && !layoutIsDisconnected(fiber)) {
+          try { snapshot = instance.getSnapshotBeforeUpdate(previous.props, previous.state) }
+          catch (error) { handleCommitError(fiber, error) }
+        }
+      })
+    }
+    if (instance.componentDidUpdate) {
+      scheduleLifecycle(fiber, () => instance.componentDidUpdate(previous.props, previous.state, snapshot))
+    }
+  }
+  if (captured) {
+    const error = captured.error
+    const info = { componentStack: captured.stack }
+    scheduleLifecycle(fiber, () => {
+      try { fiber.root?.ce?.(error, { ...info, errorBoundary: instance }) }
+      catch (callbackError) { setTimeout(() => { throw callbackError }) }
+      instance.componentDidCatch?.(error, info)
+    })
   }
 }
 
diff --git a/dom/features/context/full.ts b/dom/features/context/full.ts
index d0f963f..bfcff99 100644
--- a/dom/features/context/full.ts
+++ b/dom/features/context/full.ts
@@ -6,9 +6,14 @@ import {
   installCapability,
   reconcileChildren,
   childrenToArray,
+  renderFiber,
+  getHostParent,
+  getAnchor,
 } from '../../reconcile'
 
-function realReadContext(fiber: Fiber, ctx: any): any {
+let changingProviders = 0
+
+function contextValue(fiber: Fiber, ctx: any): any {
   let p: Fiber | null = fiber.parent
   while (p) {
     if (p.tag === FiberTag.Provider && (p.type as any)._context === ctx) {
@@ -19,15 +24,71 @@ function realReadContext(fiber: Fiber, ctx: any): any {
   return ctx._currentValue
 }
 
+function remember(fiber: Fiber, ctx: any, value: any): void {
+  ;(fiber.cx ??= new Map()).set(ctx, value)
+}
+
+function realReadContext(fiber: Fiber, ctx: any): any {
+  const value = contextValue(fiber, ctx)
+  remember(fiber, ctx, value)
+  // Initial suspended attempts are discarded. Keep their external context
+  // reads on the boundary so a provider can retry them before a promise settles.
+  let child = fiber
+  let p = fiber.parent
+  while (p) {
+    if (p.tag === FiberTag.Provider && p.type._context === ctx) break
+    if (p.tag === FiberTag.Suspense && p.ms?.f !== child) remember(p, ctx, value)
+    child = p
+    p = p.parent
+  }
+  return value
+}
+
+export function ownContextChanged(fiber: Fiber): boolean {
+  if (!changingProviders) return false
+  const reads = fiber.cx
+  if (reads) {
+    for (const [ctx, value] of reads) {
+      if (!Object.is(value, contextValue(fiber, ctx))) return true
+    }
+  }
+  return false
+}
+
+export function hasContextChanged(fiber: Fiber, includeFallback = true): boolean {
+  if (!changingProviders) return false
+  if (ownContextChanged(fiber)) return true
+  let child = fiber.child
+  while (child) {
+    if (hasContextChanged(child)) return true
+    child = child.sibling
+  }
+  return includeFallback && fiber.tag === FiberTag.Suspense && !!fiber.ms?.f && hasContextChanged(fiber.ms.f)
+}
+
+export function renderContextConsumers(fiber: Fiber): void {
+  if (!changingProviders) return
+  let child = fiber.child
+  while (child) {
+    if (child.tag === FiberTag.Suspense ? hasContextChanged(child) : ownContextChanged(child)) {
+      const domParent = getHostParent(child)
+      renderFiber(child, domParent, getAnchor(child, domParent))
+    } else {
+      renderContextConsumers(child)
+    }
+    child = child.sibling
+  }
+}
+
 function renderProvider(fiber: Fiber, domParent: Node, anchor: Node | null): void {
   const ctx = (fiber.type as any)._context
   const props = fiber.pp ?? {}
-  const prevValue = ctx._currentValue
-  ctx._currentValue = props.value
+  const changed = fiber.mp && !Object.is(fiber.mp.value, props.value)
+  if (changed) changingProviders++
   try {
     reconcileChildren(fiber, childrenToArray(props.children), domParent, anchor)
   } finally {
-    ctx._currentValue = prevValue
+    if (changed) changingProviders--
   }
   // Also store the value on the fiber so descendants rendering later (via updates)
   // can read through by walking up.
@@ -36,6 +97,7 @@ function renderProvider(fiber: Fiber, domParent: Node, anchor: Node | null): voi
 }
 
 function renderConsumer(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  fiber.cx?.clear()
   const ctx = (fiber.type as any)._context
   const props = fiber.pp ?? {}
   const children = props.children
diff --git a/dom/features/context/stub.ts b/dom/features/context/stub.ts
index d5ef153..627dd21 100644
--- a/dom/features/context/stub.ts
+++ b/dom/features/context/stub.ts
@@ -7,6 +7,12 @@ import {
   childrenToArray,
 } from '../../reconcile'
 
+export function hasContextChanged(_fiber: Fiber, _includeFallback = true): boolean {
+  return false
+}
+export const ownContextChanged = hasContextChanged
+export function renderContextConsumers(_fiber: Fiber): void {}
+
 // Stub: Context feature disabled. Provider elements render as Fragments
 // (value is never propagated — descendants see only the Context's default).
 // Consumer elements still invoke their function-children with the default
diff --git a/dom/features/forward-ref/full.ts b/dom/features/forward-ref/full.ts
index a9d2df5..7a77b23 100644
--- a/dom/features/forward-ref/full.ts
+++ b/dom/features/forward-ref/full.ts
@@ -1,5 +1,5 @@
 import { FiberTag, type Fiber, type ReactNode } from '../../../core'
-import { ReactSharedInternals, REACT_FORWARD_REF_TYPE } from '../../../react'
+import { REACT_FORWARD_REF_TYPE } from '../../../react'
 import {
   registerRenderer,
   registerTypeMatcher,
@@ -8,42 +8,32 @@ import {
   isThenable,
   handleSuspended,
   handleErrorInRender,
+  getForceRerenderingFiber,
 } from '../../reconcile'
-import { makeDispatcher } from '../../dispatcher'
+import { HOOK_BAILOUT, renderWithHooks } from '../../dispatcher'
 
 function renderForwardRef(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const canBail = fiber === getForceRerenderingFiber() && fiber.pp === fiber.mp
+  fiber.cx?.clear()
   const props = fiber.pp ?? {}
   const render = (fiber.type as any).render
   const ref = fiber.ref ?? (props.ref ?? null)
 
-  const prevDispatcher = ReactSharedInternals.H
-  const prevFiber = ReactSharedInternals.F
-  const prevHook = ReactSharedInternals.K
-  const prevIndex = ReactSharedInternals.I
-  ReactSharedInternals.H = makeDispatcher()
-  ReactSharedInternals.F = fiber
-  ReactSharedInternals.K = null
-  ReactSharedInternals.I = 0
-
-  let rendered: ReactNode
+  let rendered: ReactNode | typeof HOOK_BAILOUT
   try {
     const { ref: _omit, ...rest } = props
-    rendered = render(rest, ref)
+    rendered = renderWithHooks(fiber, render, rest, ref, canBail)
   } catch (e: any) {
     if (isThenable(e)) {
       handleSuspended(fiber, e)
-      rendered = null
+      return
     } else {
       handleErrorInRender(fiber, e)
       return
     }
-  } finally {
-    ReactSharedInternals.H = prevDispatcher
-    ReactSharedInternals.F = prevFiber
-    ReactSharedInternals.K = prevHook
-    ReactSharedInternals.I = prevIndex
   }
 
+  if (rendered === HOOK_BAILOUT) return
   reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
   fiber.mp = props
 }
diff --git b/dom/features/fragment-refs/index.ts b/dom/features/fragment-refs/index.ts
new file mode 100644
index 0000000..13d6314
--- /dev/null
+++ b/dom/features/fragment-refs/index.ts
@@ -0,0 +1 @@
+export { createFragmentInstance, updateFragmentHost, refreshFragmentInstances } from '../../fragment-instance'
diff --git b/dom/features/fragment-refs/stub.ts b/dom/features/fragment-refs/stub.ts
new file mode 100644
index 0000000..5c5c47d
--- /dev/null
+++ b/dom/features/fragment-refs/stub.ts
@@ -0,0 +1,3 @@
+export function createFragmentInstance(_fiber: unknown): any { return null }
+export function updateFragmentHost(_fiber: unknown, _adding: boolean): void {}
+export function refreshFragmentInstances(_root: unknown): void {}
diff --git a/dom/features/hydration/full.ts b/dom/features/hydration/full.ts
index bd65d8f..41fc9c1 100644
--- a/dom/features/hydration/full.ts
+++ b/dom/features/hydration/full.ts
@@ -7,10 +7,12 @@ import {
   type ReactNode,
 } from '../../../core'
 import { attributeName, STRING_BOOLEAN_ATTRS } from '../../../core/attributes'
-import { createHostNode, setProp } from '../../dom'
+import { createHostNode, setProp, syncTextareaValue } from '../../dom'
+import { queueMutation, queueProp, queueText } from '../../commit'
 import { drainReplayQueue } from '../../event-replay'
-import { discardPendingWork, findRoot, flushSyncWork, renderRoot } from '../../reconcile'
+import { discardPendingWork, discardPendingEffects, findRoot, flushSyncWork, renderRoot, scheduleRootRender, recoverRootError } from '../../reconcile'
 import { attachRootFiber, createFiberRoot } from '../../root-internal'
+import { componentStack } from '../../error-info'
 
 // Re-export from event-replay so all hydration concerns live behind one
 // feature boundary — the plugin's stub swap strips drainReplayQueue too.
@@ -146,9 +148,9 @@ export function abortHydration(cause: unknown, fiber: Fiber | null = null): neve
 
 interface HydrateRootOptions {
   identifierPrefix?: string
-  onRecoverableError?: (error: unknown) => void
-  onCaughtError?: (error: unknown) => void
-  onUncaughtError?: (error: unknown) => void
+  onRecoverableError?: import('../../../core').RecoverableErrorHandler
+  onCaughtError?: import('../../../core').RecoverableErrorHandler
+  onUncaughtError?: import('../../../core').RecoverableErrorHandler
 }
 
 interface HydratedRoot {
@@ -186,7 +188,7 @@ export function hydrateRootImpl(
 
   return {
     render(children) {
-      flushSyncWork(() => {
+      scheduleRootRender(root, () => {
         const normalized = isDocument ? normalizeDocumentChildren(children) : children
         renderRoot(
           root,
@@ -224,13 +226,19 @@ function headAttrsMatch(
   if (!keys) return true
   for (const k of keys) {
     const propVal = props[k]
-    const elVal = el.getAttribute(attributeName(k))
+    const elVal = hydrationAttribute(el, attributeName(k))
     if (propVal == null && elVal == null) continue
     if (propVal == null || elVal == null || String(propVal) !== elVal) return false
   }
   return true
 }
 
+function hydrationAttribute(el: Element, name: string): string | null {
+  return name === 'nonce' && 'nonce' in el && el.hasAttribute(name)
+    ? (el as HTMLElement).nonce ?? ''
+    : el.getAttribute(name)
+}
+
 export function beginHydration(root: FiberRoot): void {
   root.ic = 0
   root.h = true
@@ -247,7 +255,7 @@ export function endHydration(root: FiberRoot): void {
  * marker emitted by the server. Returns info + advances the cursor past the
  * marker pair (start comment + fallback/real content + end comment).
  */
-export type BoundaryInfo = [0 | 1, number, Comment, Comment]
+export type BoundaryInfo = [0 | 1 | 2 | 3, number, Comment, Comment]
 
 export function tryConsumeBoundary(parent: Fiber): BoundaryInfo | null {
   const cursor = hydrationCursors.get(findHostParent(parent))
@@ -255,9 +263,9 @@ export function tryConsumeBoundary(parent: Fiber): BoundaryInfo | null {
   const peek = cursor.n
   if (!peek || peek.nodeType !== 8) return null
   const data = (peek as Comment).data
-  const m = /^(\$\??)(\d+)$/.exec(data)
+  const m = /^(\$[?!E]?)(\d+)$/.exec(data)
   if (!m) return null
-  const kind = m[1] === '$?' ? 1 : 0
+  const kind = m[1] === '$?' ? 1 : m[1] === '$!' ? 2 : m[1] === '$E' ? 3 : 0
   const id = Number(m[2])
   const startMark = peek as Comment
   // Advance past the start comment
@@ -265,8 +273,11 @@ export function tryConsumeBoundary(parent: Fiber): BoundaryInfo | null {
   // Locate end comment: closest <!--/$-->
   let endMark: Comment | null = null
   let scan = startMark.nextSibling
+  let depth = 0
   while (scan) {
+    if (scan.nodeType === 8 && /^\$[?!E]?\d+$/.test((scan as Comment).data)) depth++
     if (scan.nodeType === 8 && (scan as Comment).data === '/$') {
+      if (depth) { depth--; scan = scan.nextSibling; continue }
       endMark = scan as Comment
       break
     }
@@ -360,26 +371,43 @@ export function adoptHostDom(fiber: Fiber, parent: Fiber): boolean {
     !props.suppressHydrationWarning &&
     canRecoverHydrationPropMismatch(candidate, tag)
   validateHydrationProps(fiber, candidate as Element, props, tag, isSvg)
+  // Form state can change between server paint and hydration. Initialize reset
+  // defaults without treating the live value or selection as a mismatch.
+  if (tag === 'input' || tag === 'textarea') queueHydrationFormState(candidate as Element, props, tag)
   for (const k in props) {
     if (
-      k === 'children' ||
-      k === 'key' ||
-      k === 'ref' ||
-      k === 'suppressHydrationWarning' ||
-      k === 'suppressContentEditableWarning'
-    ) continue
-    if (
-      syncHydrationProps ||
+      (syncHydrationProps &&
+        k !== 'children' && k !== 'key' && k !== 'ref' &&
+        (k !== 'nonce' || hydrationAttribute(candidate as Element, k) !== props[k]) &&
+        k !== 'suppressHydrationWarning' && k !== 'suppressContentEditableWarning' &&
+        !isHydrationFormProp(tag, k)) ||
       (k[0] === 'o' && k[1] === 'n' && typeof props[k] == 'function')
-    ) {
-      setProp(candidate as Element, k, props[k], undefined, isSvg)
-    }
+    ) queueProp(candidate as Element, k, props[k], undefined, isSvg)
   }
   // Set up child cursor for this host's children
   hydrationCursors.set(fiber, new HydrationCursor(candidate))
   return true
 }
 
+function queueHydrationFormState(el: Element, props: any, tag: string): void {
+  queueMutation(() => {
+    if (tag === 'input') {
+      const input = el as HTMLInputElement
+      if (props.type != null) input.type = props.type
+      const value = props.value ?? props.defaultValue
+      if (value != null && (props.value != null || (input.type !== 'submit' && input.type !== 'reset'))) {
+        input.defaultValue = '' + value
+      }
+      // Mark checked as dirty before changing its default, including clean SSR
+      // inputs whose client default differs. This also preserves radio groups.
+      input.checked = input.checked
+      input.defaultChecked = !!(props.checked ?? props.defaultChecked)
+    } else {
+      syncTextareaValue(el as HTMLTextAreaElement, props, true)
+    }
+  })
+}
+
 export function adoptTextDom(fiber: Fiber, parent: Fiber, text: string): boolean {
   const cursor = hydrationCursors.get(findHostParent(parent))
   if (!cursor) return false
@@ -400,7 +428,7 @@ export function adoptTextDom(fiber: Fiber, parent: Fiber, text: string): boolean
         canRecoverHydrationPropMismatch(candidate),
       )
       if (recovered) {
-        ;(candidate as Text).data = text
+        queueText(candidate as Text, text)
       }
     }
     fiber.dom = candidate
@@ -447,7 +475,7 @@ function failHydration(
 ): boolean {
   const root = findRoot(fiber)
   if (root?.re) {
-    root.re(error)
+    root.re(error, { componentStack: componentStack(fiber) })
   }
   if (recoverInPlace) return true
   abortHydration(error, findHostRecoveryParent(fiber) ?? fiber)
@@ -533,6 +561,7 @@ export function recoverHydration(root: FiberRoot, error: unknown): boolean {
     flushSyncWork(() => renderRoot(root, children))
   } catch (clientError) {
     resetAfterHydrationFailure(root, container)
+    if (recoverRootError(clientError)) return true
     throw clientError
   }
   return true
@@ -543,24 +572,27 @@ function resetAfterHydrationFailure(
   container: Element | Document,
 ): void {
   discardPendingWork(root)
+  discardPendingEffects(root)
   clearHydrationContainer(container)
   attachRootFiber(root, container)
   root.h = false
 }
 
 function clearHydrationContainer(container: Element | Document): void {
-  if (container.nodeType === 9) {
-    let node = container.firstChild
-    while (node) {
-      const next = node.nextSibling
-      if (node.nodeType !== 10 /* DOCUMENT_TYPE_NODE */) {
-        container.removeChild(node)
+  queueMutation(() => {
+    if (container.nodeType === 9) {
+      let node = container.firstChild
+      while (node) {
+        const next = node.nextSibling
+        if (node.nodeType !== 10 /* DOCUMENT_TYPE_NODE */) {
+          container.removeChild(node)
+        }
+        node = next
       }
-      node = next
+      return
     }
-    return
-  }
-  ;(container as Element).textContent = ''
+    ;(container as Element).textContent = ''
+  })
 }
 
 function getRecoverableHostChildren(
@@ -684,6 +716,14 @@ function createHostElement(type: string, props: Record<string, unknown>): ReactE
   }
 }
 
+function isHydrationFormProp(tag: string, key: string): boolean {
+  return (
+    ((tag === 'input' || tag === 'textarea' || tag === 'select') && (key === 'value' || key === 'defaultValue')) ||
+    (tag === 'input' && (key === 'checked' || key === 'defaultChecked')) ||
+    (tag === 'option' && key === 'selected')
+  )
+}
+
 function validateHydrationProps(
   fiber: Fiber,
   el: Element,
@@ -708,13 +748,14 @@ function validateHydrationProps(
     ) continue
 
     if (k === 'dangerouslySetInnerHTML') {
-      let html = '' + (value?.__html ?? '')
+      let html = value?.__html
+      if (html == null) continue
       if (tag !== 'script' && tag !== 'style') {
-        const probe = document.createElement('div')
+        const probe = createHostNode(tag, isSvg)
         probe.innerHTML = html
         html = probe.innerHTML
       }
-      if ((el as HTMLElement).innerHTML !== html) {
+      if ((el as HTMLElement).innerHTML !== '' + html) {
         failHydration(
           fiber,
           process.env.NODE_ENV !== 'production'
@@ -726,51 +767,7 @@ function validateHydrationProps(
       continue
     }
 
-    if (k === 'value' || k === 'defaultValue') {
-      if (tag === 'select') continue
-      if (tag === 'input' || tag === 'textarea') {
-        if (k === 'value' || props.value == null) {
-          if (value != null && (el as HTMLInputElement).value !== '' + value) {
-            failHydration(
-              fiber,
-              process.env.NODE_ENV !== 'production'
-                ? new Error(`Hydration ${tag} value mismatch on <${tag}>.`)
-                : undefined,
-              recoverInPlace,
-            )
-          }
-        }
-        continue
-      }
-    }
-
-    if (tag === 'input' && (k === 'checked' || k === 'defaultChecked')) {
-      if (k === 'checked' || props.checked == null) {
-        if (value != null && (el as HTMLInputElement).checked !== !!value) {
-          failHydration(
-            fiber,
-            process.env.NODE_ENV !== 'production'
-              ? new Error(`Hydration checked mismatch on <input>.`)
-              : undefined,
-            recoverInPlace,
-          )
-        }
-      }
-      continue
-    }
-
-    if (tag === 'option' && k === 'selected') {
-      if (value != null && (el as HTMLOptionElement).selected !== !!value) {
-        failHydration(
-          fiber,
-          process.env.NODE_ENV !== 'production'
-            ? new Error(`Hydration selected mismatch on <option>.`)
-            : undefined,
-          recoverInPlace,
-        )
-      }
-      continue
-    }
+    if (isHydrationFormProp(tag, k)) continue
 
     if (k === 'style') {
       expected ??= createHostNode(tag, isSvg)
@@ -802,12 +799,15 @@ function validateHydrationProps(
     } else if (k === 'muted' && !isSvg && (tag === 'video' || tag === 'audio')) {
       // The muted property controls playback; defaultMuted reflects the SSR attribute.
       expectedValue = value ? '' : null
+    } else if (stringifiedBoolean && k.length > 5) {
+      // These attributes use setAttribute string coercion, not DOM property normalization.
+      expectedValue = '' + value
     } else {
       expected ??= createHostNode(tag, isSvg)
       setProp(expected, k, value, undefined, isSvg)
       expectedValue = expected.getAttribute(attr)
     }
-    const actualValue = el.getAttribute(attr)
+    const actualValue = hydrationAttribute(el, attr)
     if (expectedValue !== actualValue) {
       failHydration(
         fiber,
diff --git a/dom/features/hydration/stub.ts b/dom/features/hydration/stub.ts
index bf1470f..17be62c 100644
--- a/dom/features/hydration/stub.ts
+++ b/dom/features/hydration/stub.ts
@@ -24,7 +24,7 @@ export class HydrationCursor {
   }
 }
 
-export type BoundaryInfo = [0 | 1, number, Comment, Comment]
+export type BoundaryInfo = [0 | 1 | 2 | 3, number, Comment, Comment]
 
 export function beginHydration(_root: FiberRoot): void {
   throw new Error(
diff --git a/dom/features/index.ts b/dom/features/index.ts
index 590c1e6..01d2ef0 100644
--- a/dom/features/index.ts
+++ b/dom/features/index.ts
@@ -9,3 +9,4 @@ import './memo'
 import './forward-ref'
 import './lazy'
 import './class'
+import './activity'
diff --git a/dom/features/memo/full.ts b/dom/features/memo/full.ts
index 65f1c33..691c665 100644
--- a/dom/features/memo/full.ts
+++ b/dom/features/memo/full.ts
@@ -10,6 +10,7 @@ import {
   renderFiber,
   getForceRerenderingFiber,
 } from '../../reconcile'
+import { ownContextChanged, renderContextConsumers } from '../context'
 
 function shallowEqual(a: any, b: any): boolean {
   if (a === b) return true
@@ -33,10 +34,10 @@ function renderMemo(fiber: Fiber, domParent: Node, anchor: Node | null): void {
   // useSyncExternalStore notification), props haven't changed by definition —
   // bailing would swallow the state change and the subscriber never re-runs.
   // rerenderFiber tags the fiber so we skip the gate here.
-  const bypassMemo = fiber === getForceRerenderingFiber()
+  const bypassMemo = fiber.dy || fiber === getForceRerenderingFiber()
   const eq = !bypassMemo && prev && (compare ? compare(prev, props) : shallowEqual(prev, props))
-  if (eq) {
-    // Re-render children with previous output (already in tree)
+  if (eq && !ownContextChanged(fiber)) {
+    renderContextConsumers(fiber)
     return
   }
 
diff --git a/dom/features/suspense/full.ts b/dom/features/suspense/full.ts
index 1225d94..45fa668 100644
--- a/dom/features/suspense/full.ts
+++ b/dom/features/suspense/full.ts
@@ -1,5 +1,5 @@
 import { FiberTag, createFiber, type Fiber } from '../../../core'
-import { REACT_SUSPENSE_TYPE } from '../../../react'
+import { REACT_SUSPENSE_TYPE, ReactSharedInternals, startTransition } from '../../../react'
 import {
   registerRenderer,
   registerTypeMatcher,
@@ -15,7 +15,19 @@ import {
   getCurrentRoot,
   withCurrentRoot,
   discardPendingWork,
+  findSuspenseBoundary,
+  RenderSuspenseCapture,
+  activityIsDisconnected,
+  isActivityHidden,
+  attachRef,
+  detachRef,
+  enqueueEffect,
+  flushFiberCommits,
+  scheduleLifecycle,
+  handleCommitError,
 } from '../../reconcile'
+import { cleanupEffect } from '../../dispatcher'
+import { retainedEffects, inSuspensePrimary, setLayoutDisconnected, walkRetained } from '../../retained-effects'
 import {
   HydrationCursor,
   setHydrationCursor,
@@ -24,15 +36,25 @@ import {
   tryConsumeBoundary,
   isHydrationBailout,
 } from '../hydration'
+import { hasContextChanged, renderContextConsumers } from '../context'
+import { checkpointCommit, rewindCommit, queueMutation, onCommitFailure } from '../../commit'
 
 let suspendHandler: ((t: Promise<any>) => void) | null = null
 
+function scheduleRetry(fiber: Fiber): void {
+  const previous = ReactSharedInternals.T
+  ReactSharedInternals.T = null
+  try { startTransition(() => scheduleUpdate(fiber)) } finally { ReactSharedInternals.T = previous }
+}
+
 function realHandleSuspended(fiber: Fiber, thenable: Promise<any>): void {
   if (suspendHandler) return suspendHandler(thenable)
+  const boundary = findSuspenseBoundary(fiber)
+  if (boundary) throw new RenderSuspenseCapture(boundary)
   // Fallback: schedule re-render when promise settles
   thenable.then(
-    () => scheduleUpdate(fiber),
-    () => scheduleUpdate(fiber),
+    () => scheduleRetry(fiber),
+    () => scheduleRetry(fiber),
   )
 }
 
@@ -46,14 +68,15 @@ function realHandleSuspended(fiber: Fiber, thenable: Promise<any>): void {
 // their original `display` so we can restore it) and the fallback as a
 // detached Fragment fiber in `state.f` (deliberately kept OUT of
 // `fiber.child` so reconciles against `props.children` don't trip on it).
-// First-mount suspensions have no committed DOM worth preserving, so they
-// keep the original unmount-and-render-fallback behavior.
+// First-mount suspensions discard the failed primary but retain a separate
+// fallback fiber so unsuccessful retries preserve its state and DOM.
 interface SuspenseState {
   p?: Promise<any> | null
   b?: Comment
   e?: Comment
   r?: any
   a?: boolean
+  u?: boolean
   // Re-suspend preservation:
   d?: Array<[HTMLElement, string]> | null
   f?: Fiber | null
@@ -61,11 +84,12 @@ interface SuspenseState {
 
 function renderSuspense(fiber: Fiber, domParent: Node, anchor: Node | null): void {
   const props = fiber.pp ?? {}
-  const state = (fiber.ms ??= {}) as SuspenseState
+  let state = (fiber.ms ??= {}) as SuspenseState
 
   // Streaming hydration: if the next DOM node is a server-emitted boundary
   // marker, route through the boundary-aware hydration path.
   const root = getCurrentRoot()
+  if (root) root.sp = true
   if (root?.h && !state.b) {
     const boundary = tryConsumeBoundary(fiber.parent!)
     if (boundary) {
@@ -85,14 +109,11 @@ function renderSuspense(fiber: Fiber, domParent: Node, anchor: Node | null): voi
     return
   }
 
-  // We were already in the suspended-with-preserved-primary state. Don't
-  // re-attempt primary children (would re-throw and churn the tree). Just
-  // refresh the fallback in case its JSX changed, and wait for the pending
-  // promise to fire scheduleUpdate.
-  if (state.p) {
+  // New primary children or context can unblock a boundary before its old
+  // promise settles. A fallback-only update can keep the pending primary.
+  if (state.p && !state.u && props.children === fiber.mp?.children && !hasContextChanged(fiber, false)) {
     if (state.f) {
-      state.f.pp = { children: props.fallback }
-      renderFiber(state.f, domParent, anchor)
+      renderFallback(state.f, props.fallback, domParent, anchor)
     } else {
       // Initial-mount suspended path: no committed primary to preserve.
       reconcileChildren(fiber, childrenToArray(props.fallback), domParent, anchor)
@@ -105,8 +126,11 @@ function renderSuspense(fiber: Fiber, domParent: Node, anchor: Node | null): voi
   // attempting the new render. If the new attempt suspends and we did have a
   // committed primary, we keep it (hidden) rather than destroying it.
   const hadCommittedPrimary = fiber.mp && fiber.child
+  state.u = false
+  const checkpoint = checkpointCommit(fiber)
 
   const prevHandler = suspendHandler
+  fiber.cx?.clear()
   let pendingThenable: any
   suspendHandler = (thenable) => {
     pendingThenable = thenable
@@ -118,63 +142,142 @@ function renderSuspense(fiber: Fiber, domParent: Node, anchor: Node | null): voi
   }
 
   if (pendingThenable) {
+    rewindCommit(checkpoint)
+    state = (fiber.ms ??= {}) as SuspenseState
+    const previousThenable = state.p
     state.p = pendingThenable
     const onSettle = () => {
-      state.p = null
-      scheduleUpdate(fiber)
+      const current = fiber.ms as SuspenseState | null
+      if (!current || current.p !== pendingThenable) return
+      current.p = null
+      scheduleRetry(fiber)
     }
-    pendingThenable.then(onSettle, onSettle)
+    if (previousThenable !== pendingThenable) pendingThenable.then(onSettle, onSettle)
 
-    if (hadCommittedPrimary) {
+    // Rewind restored the committed tree, including its existing hidden state.
+    // Only the first hide needs update-target, lifecycle and DOM work.
+    if (hadCommittedPrimary && !state.d) {
       // Hide the primary subtree's root host doms so the fallback is the only
       // thing visible, but the underlying nodes (and their scroll/state/focus)
       // survive. Save original `display` for the resume path.
       const hidden: Array<[HTMLElement, string]> = []
       let c: Fiber | null = hadCommittedPrimary
+      while (c) {
+        setUpdateBoundary(c, fiber)
+        walkRetained(c, disconnectLayout)
+        c = c.sibling
+      }
+      c = hadCommittedPrimary
       while (c) {
         hideRootHostDoms(c, hidden)
         c = c.sibling
       }
       state.d = hidden
 
-      // Mount fallback in a detached Fragment fiber. Kept off `fiber.child`
-      // so reconciles of primary don't see it as a stale match candidate.
-      if (!state.f) {
-        state.f = createFiber(FiberTag.Fragment, null, null)
-        state.f.parent = fiber
-      }
-      state.f.pp = { children: props.fallback }
-      renderFiber(state.f, domParent, anchor)
-    } else {
+    } else if (!hadCommittedPrimary) {
       // First-mount suspension — nothing to preserve.
       unmountAllChildren(fiber, domParent)
-      reconcileChildren(fiber, childrenToArray(props.fallback), domParent, anchor)
     }
+    // Keep fallback identity across unsuccessful retries of an initial mount.
+    if (!state.f) {
+      state.f = createFiber(FiberTag.Fragment, null, null)
+      state.f.parent = fiber
+    }
+    renderFallback(state.f, props.fallback, domParent, anchor)
   } else {
+    state.p = null
+    fiber.cx?.clear()
+    const wasHidden = !!state.d
     // Render succeeded. Clean up any preserved-suspend state from a prior
     // suspension cycle: unhide primary, unmount the orphan fallback fiber.
     if (state.d) {
-      for (const [el, origDisplay] of state.d) {
-        el.style.display = origDisplay
-      }
+      for (let child = fiber.child; child; child = child.sibling) setUpdateBoundary(child, fiber.su)
+      const hidden = state.d
+      queueMutation(() => {
+        for (const [el, origDisplay] of hidden) el.style.display = origDisplay
+      })
       state.d = null
     }
     if (state.f) {
       unmountFiber(state.f, domParent)
       state.f = null
     }
+    if (wasHidden) for (let child = fiber.child; child; child = child.sibling) walkRetained(child, reconnectLayout, true)
   }
   fiber.mp = props
 }
 
+function renderFallback(fiber: Fiber, children: any, domParent: Node, anchor: Node | null): void {
+  // Local updates remain independently queued, unless an outer hidden primary
+  // owns them. Context must still cross an otherwise unchanged fallback.
+  if (fiber.mp && fiber.mp.children === children && !fiber.su) renderContextConsumers(fiber)
+  else {
+    fiber.pp = { children }
+    renderFiber(fiber, domParent, anchor)
+  }
+}
+
+function disconnectLayout(fiber: Fiber): void {
+  if (setLayoutDisconnected(fiber, true) || activityIsDisconnected(fiber)) return
+  queueMutation(() => {
+    for (const [hook, effect] of retainedEffects.get(fiber) ?? []) {
+      if (effect.t === 1 && !effect.s) cleanupEffect(hook, fiber)
+    }
+    const cleanup = fiber.rc
+    fiber.rc = null
+    if (cleanup) {
+      const index = fiber.cu?.indexOf(cleanup) ?? -1
+      if (index >= 0) fiber.cu!.splice(index, 1)
+      try { cleanup() } catch (error) { handleCommitError(fiber, error) }
+    }
+    detachRef(fiber.cr ?? fiber.ref, fiber)
+    fiber.cr = null
+    const instance = fiber.sn?._fiber === fiber ? fiber.sn : null
+    if (instance?.componentWillUnmount) {
+      const props = instance.props, state = instance.state, committed = fiber.ms?.c
+      if (committed) { instance.props = committed.props; instance.state = committed.state }
+      try { instance.componentWillUnmount() } catch (error) { handleCommitError(fiber, error) }
+      finally { instance.props = props; instance.state = state }
+    }
+  })
+}
+
+function reconnectLayout(fiber: Fiber): void {
+  if (!fiber.ld || isActivityHidden(fiber) || activityIsDisconnected(fiber)) return
+  if (inSuspensePrimary(fiber)) return
+  setLayoutDisconnected(fiber, false)
+  const instance = fiber.sn?._fiber === fiber ? fiber.sn : null
+  if (fiber.tag === FiberTag.Host || fiber.tag === FiberTag.Resource) attachRef(fiber, fiber.dom)
+  else if (instance || fiber.tag === FiberTag.Fragment) attachRef(fiber, fiber.sn)
+  for (const effect of retainedEffects.get(fiber)?.values() ?? []) {
+    if (effect.t === 1 && !effect.s) enqueueEffect(fiber, effect)
+  }
+  if (instance?.componentDidMount) scheduleLifecycle(fiber, () => instance.componentDidMount())
+  flushFiberCommits(fiber)
+}
+
+function setUpdateBoundary(fiber: Fiber, boundary: Fiber | null | undefined): void {
+  fiber.su = boundary ?? null
+  const primary = fiber.tag === FiberTag.Suspense && fiber.ms?.p ? fiber : boundary
+  for (let child = fiber.child; child; child = child.sibling) setUpdateBoundary(child, primary)
+  if (fiber.tag === FiberTag.Suspense && fiber.ms?.f) setUpdateBoundary(fiber.ms.f, boundary)
+}
+
 // Walk a fiber subtree collecting host/text DOM nodes that sit at the root
 // of the subtree (do not descend through their children — display:none on
 // the root hides the whole element). Used by the hide-on-suspend path.
 function hideRootHostDoms(fiber: Fiber, out: Array<[HTMLElement, string]>): void {
   if (fiber.tag === FiberTag.Host) {
     const el = fiber.dom as HTMLElement
-    out.push([el, el.style.display])
-    el.style.display = 'none'
+    const existing = out.find(([node]) => node === el)
+    const entry: [HTMLElement, string] = existing ?? [el, el.style.display]
+    if (!existing) out.push(entry)
+    const display = fiber.pp?.style?.display
+    queueMutation(() => {
+      // Earlier Activity or host updates in this commit can change display.
+      if (!existing || el.style.display !== 'none' || display === 'none') entry[1] = el.style.display
+      el.style.display = 'none'
+    })
     return
   }
   if (fiber.tag === FiberTag.Portal) return
@@ -188,7 +291,7 @@ function hideRootHostDoms(fiber: Fiber, out: Array<[HTMLElement, string]>): void
 function hydrateSuspenseBoundary(
   fiber: Fiber,
   props: any,
-  boundary: [0 | 1, number, Comment, Comment],
+  boundary: [0 | 1 | 2 | 3, number, Comment, Comment],
   domParent: Node,
   anchor: Node | null,
 ): void {
@@ -200,6 +303,13 @@ function hydrateSuspenseBoundary(
     r: props.children,
   }
 
+  if (pendingBoundary >= 2) {
+    if (pendingBoundary === 3) reportServerFailure(fiber)
+    recoverBoundaryHydration(fiber, props.children, startMark.parentNode!, startMark, endMark, true)
+    fiber.mp = props
+    return
+  }
+
   if (!pendingBoundary) {
     // Real DOM is inline between startMark and endMark. Hydrate into it.
     const parent = startMark.parentNode!
@@ -209,8 +319,10 @@ function hydrateSuspenseBoundary(
       advanceCursorPast(fiber.parent!, endMark)
     } catch (e) {
       if (!isHydrationBailout(e)) {
-        clearBoundaryRange(startMark, endMark)
-        unmountAllChildren(fiber, parent)
+        onCommitFailure(() => {
+          clearBoundaryRange(startMark, endMark)
+          unmountAllChildren(fiber, parent)
+        })
         throw e
       }
       recoverBoundaryHydration(fiber, props.children, parent, startMark, endMark)
@@ -253,19 +365,25 @@ function recoverBoundaryHydration(
   parent: Node,
   startMark: Comment,
   endMark: Comment,
+  retryBoundary = false,
 ): void {
   const root = findRoot(fiber)!
   const prevHydrating = root.h
-  discardPendingWork(root)
+  if (!retryBoundary) discardPendingWork(root)
   clearBoundaryRange(startMark, endMark)
   unmountAllChildren(fiber, parent)
   root.h = false
   try {
-    reconcileChildren(fiber, childrenToArray(children), parent, endMark)
+    if (retryBoundary) {
+      fiber.ms = {}
+      renderSuspense(fiber, parent, endMark)
+    } else reconcileChildren(fiber, childrenToArray(children), parent, endMark)
     advanceCursorPast(fiber.parent!, endMark)
   } catch (clientError) {
-    clearBoundaryRange(startMark, endMark)
-    unmountAllChildren(fiber, parent)
+    onCommitFailure(() => {
+      clearBoundaryRange(startMark, endMark)
+      unmountAllChildren(fiber, parent)
+    })
     throw clientError
   } finally {
     root.h = prevHydrating
@@ -276,14 +394,16 @@ function recoverFallbackHydration(fiber: Fiber, fallback: any, parent: HTMLEleme
   const root = findRoot(fiber)!
   const prevHydrating = root.h
   discardPendingWork(root)
-  parent.textContent = ''
+  queueMutation(() => { parent.textContent = '' })
   unmountAllChildren(fiber, parent)
   root.h = false
   try {
     reconcileChildren(fiber, childrenToArray(fallback), parent, null)
   } catch (clientError) {
-    parent.textContent = ''
-    unmountAllChildren(fiber, parent)
+    onCommitFailure(() => {
+      parent.textContent = ''
+      unmountAllChildren(fiber, parent)
+    })
     throw clientError
   } finally {
     root.h = prevHydrating
@@ -302,6 +422,12 @@ function rehydrateBoundary(fiber: Fiber): void {
   // (or at least its container); unmounting here cleans up fibers + fx.
   withCurrentRoot(root, () => {
     const prevHydrating = root.h
+    if (state.b.data.startsWith('$!') || state.b.data.startsWith('$E')) {
+      if (state.b.data.startsWith('$E')) reportServerFailure(fiber)
+      recoverBoundaryHydration(fiber, state.r, parent, state.b, state.e, true)
+      runEffects(root)
+      return
+    }
     try {
       unmountAllChildren(fiber, parent)
 
@@ -311,8 +437,10 @@ function rehydrateBoundary(fiber: Fiber): void {
       reconcileChildren(fiber, childrenToArray(state.r), parent, null)
     } catch (e) {
       if (!isHydrationBailout(e)) {
-        clearBoundaryRange(state.b, state.e)
-        unmountAllChildren(fiber, parent)
+        onCommitFailure(() => {
+          clearBoundaryRange(state.b, state.e)
+          unmountAllChildren(fiber, parent)
+        })
         throw e
       }
 
@@ -325,13 +453,22 @@ function rehydrateBoundary(fiber: Fiber): void {
   })
 }
 
+function reportServerFailure(fiber: Fiber): void {
+  const error = new Error('Switched to client rendering because the server render did not complete.')
+  const handler = findRoot(fiber)?.re
+  if (handler) handler(error, { componentStack: null })
+  else console.error(error)
+}
+
 function clearBoundaryRange(startMark: Comment, endMark: Comment): void {
-  let node = startMark.nextSibling
-  while (node && node !== endMark) {
-    const next = node.nextSibling
-    node.parentNode?.removeChild(node)
-    node = next
-  }
+  queueMutation(() => {
+    let node = startMark.nextSibling
+    while (node && node !== endMark) {
+      const next = node.nextSibling
+      node.parentNode?.removeChild(node)
+      node = next
+    }
+  })
 }
 
 registerTypeMatcher((type) => (type === REACT_SUSPENSE_TYPE ? FiberTag.Suspense : null))
diff --git b/dom/features/view-transition/full.ts b/dom/features/view-transition/full.ts
new file mode 100644
index 0000000..99928a8
--- /dev/null
+++ b/dom/features/view-transition/full.ts
@@ -0,0 +1,288 @@
+import type { FiberRoot } from '../../../core'
+import { ReactSharedInternals } from '../../../react/shared-internals'
+import { currentCommit, prepareCommit, commitBeforeMutation, commitMutation, commitSynchronously, type CommitPlan } from '../../commit'
+import { prepareViewTransition } from './visual'
+import { recoverRootError } from '../../reconcile'
+
+type Work = { commit: () => void; scopes: Set<Set<string>> }
+type Visual = NonNullable<ReturnType<typeof prepareViewTransition>>
+interface Transaction {
+  native?: ViewTransition
+  visual: Visual
+  work: Map<FiberRoot, Work>
+  layout: Array<() => void>
+  passive: Array<() => void>
+  consumed: boolean
+  cancelled: boolean
+  ready: boolean
+  plans: CommitPlan[]
+  preparing: boolean
+}
+interface Coordinator {
+  queued: Map<FiberRoot, Work>
+  active?: Transaction | undefined
+  flush: () => void
+  scheduled: boolean
+}
+
+const marks = new Map<FiberRoot, Set<Set<string>> | null>()
+const documents = new Map<Document, Coordinator>()
+let committing: Transaction | undefined
+
+function ownerDocument(root: FiberRoot): Document {
+  return root.c.nodeType === 9 ? root.c as unknown as Document : root.c.ownerDocument!
+}
+
+function drain(queue: Array<() => void>): void {
+  while (queue.length) queue.shift()!()
+}
+
+function passive(transaction: Transaction): void {
+  if (transaction.consumed) transaction.visual.restore()
+  drain(transaction.passive)
+}
+
+function release(doc: Document, coordinator: Coordinator): void {
+  if (!coordinator.active && !coordinator.queued.size && documents.get(doc) === coordinator) documents.delete(doc)
+}
+
+function render(work: Map<FiberRoot, Work>): void {
+  for (const entry of work.values()) entry.commit()
+}
+
+function prepareRoot(transaction: Transaction, root: FiberRoot, commit: () => void): void {
+  try {
+    prepareCommit(() => {
+      transaction.plans.push(currentCommit!)
+      commit()
+    })
+  } catch (error) {
+    transaction.plans.pop()
+    if (!recoverRootError(error)) throw error
+    transaction.work.delete(root)
+    transaction.visual.exclude(root)
+  }
+}
+
+function beforeMutation(transaction: Transaction): void {
+  for (const plan of transaction.plans) commitBeforeMutation(plan)
+}
+
+function mutation(transaction: Transaction): void {
+  for (const plan of transaction.plans) commitMutation(plan)
+}
+
+export function markTransitionUpdate(root: FiberRoot): void {
+  if (committing) return
+  const coordinator = documents.size ? documents.get(ownerDocument(root)) : undefined
+  if (coordinator?.active) passive(coordinator.active)
+  const scope = ReactSharedInternals.T
+  if (scope) {
+    if (marks.get(root) !== null) {
+      let scopes = marks.get(root)
+      if (!scopes) marks.set(root, scopes = new Set())
+      scopes.add(scope)
+    }
+  } else {
+    if (marks.has(root)) marks.set(root, null)
+    if (coordinator) cancel(coordinator)
+  }
+}
+
+export function deferTransition(root: FiberRoot, commit: () => void, flush: () => void): boolean {
+  if (committing?.preparing && !currentCommit && ownerDocument(root) === committing.visual.document) {
+    prepareRoot(committing, root, commit)
+    return true
+  }
+  if (!marks.size && !documents.size) return false
+  const scopes = marks.get(root)
+  marks.delete(root)
+  const doc = ownerDocument(root)
+  const activeCoordinator = documents.get(doc)
+  if (activeCoordinator?.active?.plans.length && !activeCoordinator.active.consumed && !currentCommit) {
+    // A reentrant urgent render must consume the already-rendered commit
+    // before reconciling another tree against it.
+    if (committing || !scopes) cancel(activeCoordinator)
+  }
+  if (committing || !scopes || !doc.startViewTransition) return false
+  let coordinator = documents.get(doc)
+  if (!coordinator) {
+    coordinator = { queued: new Map(), flush, scheduled: false }
+    documents.set(doc, coordinator)
+  }
+  const existing = coordinator.queued.get(root)
+  if (existing) for (const scope of scopes) existing.scopes.add(scope)
+  else coordinator.queued.set(root, { commit, scopes })
+  kick(doc, coordinator)
+  return true
+}
+
+function kick(doc: Document, coordinator: Coordinator): void {
+  if (coordinator.active || coordinator.scheduled || !coordinator.queued.size) return
+  coordinator.scheduled = true
+  queueMicrotask(async () => {
+    coordinator.scheduled = false
+    if (coordinator.active || !coordinator.queued.size) return
+    const work = coordinator.queued
+    coordinator.queued = new Map()
+    const types = new Set<string>()
+    for (const entry of work.values()) for (const scope of entry.scopes) for (const type of scope) types.add(type)
+    const visual = prepareViewTransition(work.keys(), [...types])
+    if (!visual) {
+      commitSynchronously(() => render(work))
+      release(doc, coordinator)
+      return
+    }
+    const transaction: Transaction = { visual, work, layout: [], passive: [], plans: [], preparing: true, consumed: false, cancelled: false, ready: false }
+    coordinator.active = transaction
+    try {
+      try {
+        within(transaction, () => {
+          for (const [root, entry] of work) prepareRoot(transaction, root, entry.commit)
+          coordinator.flush()
+        })
+      } finally { transaction.preparing = false }
+      const resources = visual.prepare()
+      if (resources) await resources
+      if (transaction.cancelled) return
+      within(transaction, () => beforeMutation(transaction))
+      if (!visual.beforeCommit()) {
+        cancel(coordinator)
+        return
+      }
+    } catch (error) {
+      cancel(coordinator)
+      report(transaction, error)
+      return
+    }
+    const update = () => {
+      if (transaction.consumed) return
+      transaction.consumed = true
+      const navigation = (doc.defaultView as any)?.navigation?.transition
+      const fonts = doc.fonts
+      const wasLoaded = fonts?.status === 'loaded'
+      within(transaction, () => {
+        mutation(transaction)
+        coordinator.flush()
+      })
+      const finishCommit = () => {
+        if (transaction.cancelled) return
+        within(transaction, () => { drain(transaction.layout); coordinator.flush() })
+        if (navigation) return navigation.finished.catch(() => {}).then(() => {
+          if (!transaction.cancelled) visual.afterCommit()
+        })
+        visual.afterCommit()
+      }
+      const resources = visual.waitForResources(!!wasLoaded)
+      if (resources) return resources.then(finishCommit)
+      return finishCommit()
+    }
+    try {
+      const native = transaction.native = doc.startViewTransition({ update, types: [...types] })
+      native.updateCallbackDone.catch(error => report(transaction, error))
+      native.ready.then(() => {
+        if (!transaction.cancelled) {
+          transaction.ready = true
+          try { visual.ready() } catch (error) { report(transaction, error) }
+        }
+      }, error => {
+        try {
+          if (!transaction.cancelled && reportable(error)) {
+            const root = transaction.work.keys().next().value
+            if (root?.re) root.re(error, { componentStack: null })
+            else if (typeof reportError === 'function') reportError(error)
+            else queueMicrotask(() => { throw error })
+          }
+        } finally {
+          transaction.cancelled = true
+          try { visual.cancel() } finally { consume(transaction) }
+        }
+      })
+      native.finished.then(() => finish(doc, coordinator, transaction), () => finish(doc, coordinator, transaction))
+    } catch {
+      cancel(coordinator)
+    }
+  })
+}
+
+function reportable(error: unknown): boolean {
+  return error !== null && !(error && typeof error === 'object' && 'name' in error && error.name === 'InvalidStateError' &&
+    'message' in error && (
+      error.message === 'View transition was skipped because document visibility state is hidden.' ||
+      error.message === 'Skipping view transition because document visibility state has become hidden.' ||
+      error.message === 'Skipping view transition because viewport size changed.' ||
+      error.message === 'Transition was aborted because of invalid state'
+    ))
+}
+
+function consume(transaction: Transaction): void {
+  transaction.consumed = true
+  within(transaction, () => {
+    beforeMutation(transaction)
+    mutation(transaction)
+  })
+  drain(transaction.layout)
+}
+
+function within(transaction: Transaction, work: () => void): void {
+  const previous = committing
+  committing = transaction
+  try { work() } finally { committing = previous }
+}
+
+function report(transaction: Transaction, error: unknown): void {
+  const root = transaction.work.keys().next().value
+  if (root?.ue) root.ue(error, { componentStack: null })
+  else queueMicrotask(() => { throw error })
+}
+
+function finish(doc: Document, coordinator: Coordinator, transaction: Transaction): void {
+  if (coordinator.active === transaction) coordinator.active = undefined
+  try { passive(transaction) } catch (error) { report(transaction, error) } finally {
+    try { transaction.visual.finish() } catch (error) { report(transaction, error) } finally {
+      if (coordinator.queued.size) kick(doc, coordinator)
+      else release(doc, coordinator)
+    }
+  }
+}
+
+function cancel(coordinator: Coordinator): void {
+  const transaction = coordinator.active
+  const queued = coordinator.queued
+  const root = queued.keys().next().value
+  const doc = transaction?.visual.document ?? (root ? ownerDocument(root) : undefined)
+  coordinator.queued = new Map()
+  if (transaction) {
+    if (!transaction.ready) {
+      coordinator.active = undefined
+      transaction.cancelled = true
+      transaction.native?.skipTransition()
+      try { transaction.visual.cancel() } catch (error) { report(transaction, error) }
+    }
+    consume(transaction)
+    passive(transaction)
+  }
+  commitSynchronously(() => render(queued))
+  if (doc) release(doc, coordinator)
+}
+
+export function cancelTransitions(): void {
+  if (!marks.size && !documents.size) return
+  marks.clear()
+  for (const [doc, coordinator] of [...documents]) {
+    cancel(coordinator)
+    release(doc, coordinator)
+  }
+}
+
+export function deferTransitionLayout(work: () => void): boolean {
+  if (!committing) return false
+  committing.layout.push(work)
+  return true
+}
+
+export function deferTransitionPassive(work: () => void): boolean {
+  if (!committing) return false
+  committing.passive.push(work)
+  return true
+}
diff --git b/dom/features/view-transition/index.ts b/dom/features/view-transition/index.ts
new file mode 100644
index 0000000..007f15d
--- /dev/null
+++ b/dom/features/view-transition/index.ts
@@ -0,0 +1 @@
+export * from './full'
diff --git b/dom/features/view-transition/resources.ts b/dom/features/view-transition/resources.ts
new file mode 100644
index 0000000..9bf99ee
--- /dev/null
+++ b/dom/features/view-transition/resources.ts
@@ -0,0 +1,107 @@
+export type TransitionImages = Map<HTMLImageElement, { src?: unknown; srcSet?: unknown; onLoad?: unknown; loading?: unknown }>
+
+let imageBudget = 0
+
+function imageBytes(image: HTMLImageElement): number {
+  return (image.width || 100) * (image.height || 100) * (image.ownerDocument.defaultView?.devicePixelRatio || 1) * 0.25
+}
+
+function staticResource(type: string): boolean {
+  return /^(css|script|font|img|image|input|link)$/.test(type)
+}
+
+// Match React's estimate from up to eleven groups of overlapping transfers,
+// falling back to the browser's downlink estimate and then 5 Mbps.
+function bandwidth(doc: Document): number {
+  const view = doc.defaultView!
+  const entries = view.performance.getEntriesByType?.('resource') as PerformanceResourceTiming[] | undefined
+  let count = 0, bits = 0
+  for (let i = 0; entries && i < entries.length; i++) {
+    const entry = entries[i]!
+    if (!entry.transferSize || !entry.duration || !staticResource(entry.initiatorType)) continue
+    let overlap = 0
+    for (++i; i < entries.length; i++) {
+      const next = entries[i]!
+      if (next.startTime > entry.responseEnd) break
+      if (next.transferSize && staticResource(next.initiatorType)) {
+        overlap += next.transferSize * (next.responseEnd < entry.responseEnd ? 1 :
+          (entry.responseEnd - next.startTime) / (next.responseEnd - next.startTime))
+      }
+    }
+    i--
+    bits += 8 * (entry.transferSize + overlap) / (entry.duration / 1000)
+    if (++count > 10) break
+  }
+  if (count) return bits / count / 1000000
+  const downlink = (view.navigator as any).connection?.downlink
+  return typeof downlink === 'number' ? downlink : 5
+}
+
+export function transitionResources(doc: Document, previous: TransitionImages, next: TransitionImages) {
+  const pending: HTMLImageElement[] = []
+  const releases = new Set<() => void>()
+
+  function wait(promises: Promise<unknown>[], timeout: number, cleanups: Array<() => void> = []): Promise<void> | undefined {
+    if (!promises.length) return
+    return new Promise(resolve => {
+      const finish = () => {
+        if (!releases.delete(finish)) return
+        clearTimeout(timer)
+        for (const cleanup of cleanups) cleanup()
+        resolve()
+      }
+      const timer = setTimeout(finish, timeout)
+      releases.add(finish)
+      Promise.all(promises).then(finish, finish)
+    })
+  }
+
+  return {
+    before() {
+      const promises: Promise<unknown>[] = []
+      let bytes = 0
+      for (const [image, props] of next) {
+        const old = previous.get(image)
+        if (props.src == null || props.src === '' || props.onLoad != null || props.loading === 'lazy' ||
+          (old && props.src === old.src && props.srcSet === old.srcSet) || typeof image.decode !== 'function') continue
+        if (!image.complete) { pending.push(image); bytes += imageBytes(image) }
+        promises.push(image.decode().catch(() => {}))
+      }
+      if (bytes && !imageBudget) imageBudget = 125 * bandwidth(doc) * 500
+      return wait(promises, bytes > imageBudget ? 50 : 800)
+    },
+    after(fontsWereLoaded: boolean) {
+      const promises: Promise<unknown>[] = []
+      const cleanups: Array<() => void> = []
+      if (fontsWereLoaded) {
+        // Discover fonts introduced by mutation before the browser captures.
+        doc.documentElement.getBoundingClientRect()
+        if (doc.fonts.status === 'loading') promises.push(doc.fonts.ready)
+      }
+      const images: HTMLImageElement[] = []
+      let bytes = 0
+      const view = doc.defaultView!
+      for (const image of pending) {
+        if (image.complete) continue
+        const rect = image.getBoundingClientRect()
+        if (rect.bottom <= 0 || rect.right <= 0 || rect.top >= view.innerHeight || rect.left >= view.innerWidth) continue
+        bytes += imageBytes(image)
+        if (bytes > imageBudget) { images.length = 0; break }
+        images.push(image)
+      }
+      for (const image of images) {
+        promises.push(new Promise<void>(resolve => {
+          const loaded = () => resolve()
+          image.addEventListener('load', loaded)
+          image.addEventListener('error', loaded)
+          cleanups.push(() => {
+            image.removeEventListener('load', loaded)
+            image.removeEventListener('error', loaded)
+          })
+        }))
+      }
+      return wait(promises, 500, cleanups)
+    },
+    cancel() { for (const release of releases) release() },
+  }
+}
diff --git b/dom/features/view-transition/stub.ts b/dom/features/view-transition/stub.ts
new file mode 100644
index 0000000..8f8771a
--- /dev/null
+++ b/dom/features/view-transition/stub.ts
@@ -0,0 +1,7 @@
+import type { FiberRoot } from '../../../core'
+
+export function markTransitionUpdate(_root: FiberRoot): void {}
+export function deferTransition(_root: FiberRoot, _commit: () => void, _flush: () => void): boolean { return false }
+export function cancelTransitions(): void {}
+export function deferTransitionLayout(_work: () => void): boolean { return false }
+export function deferTransitionPassive(_work: () => void): boolean { return false }
diff --git b/dom/features/view-transition/visual.ts b/dom/features/view-transition/visual.ts
new file mode 100644
index 0000000..1e45e79
--- /dev/null
+++ b/dom/features/view-transition/visual.ts
@@ -0,0 +1,406 @@
+import { FiberTag, type Fiber, type FiberRoot } from '../../../core'
+import {
+  REACT_VIEW_TRANSITION_TYPE,
+  type ViewTransitionClass,
+  type ViewTransitionInstance,
+  type ViewTransitionProps,
+  type ViewTransitionPseudoElement,
+} from '../../../react/view-transition'
+import { transitionResources, type TransitionImages } from './resources'
+
+type Kind = 'enter' | 'exit' | 'update' | 'share'
+type Host = HTMLElement | SVGElement
+type Rect = [number, number, number, number]
+interface Boundary {
+  fiber: Fiber
+  props: ViewTransitionProps
+  hosts: Host[]
+  ancestors: Fiber[]
+  parent: Fiber | null
+  name: string
+  explicit: boolean
+  rects: Rect[]
+  content: string
+  inViewport: boolean
+}
+interface Snapshot {
+  boundaries: Map<Fiber, Boundary>
+  visible: Set<Fiber>
+  images: TransitionImages
+}
+interface Capture {
+  old?: Boundary | undefined
+  next?: Boundary | undefined
+  kind: Kind
+  name: string
+  oldHosts: Host[]
+  newEnabled: boolean
+}
+interface Event {
+  boundary: Boundary
+  kind: Kind
+  name: string
+}
+
+const names = new WeakMap<Fiber, string>()
+const styleProperties = ['view-transition-name', 'view-transition-class']
+let nextName = 0
+
+function byType(value: ViewTransitionClass | undefined, types: string[]): string | undefined {
+  if (typeof value === 'string') return value
+  if (!value) return undefined
+  let result: string | undefined
+  for (const type of types) {
+    const match = value[type]
+    if (match === 'none') return match
+    if (match != null) result = result == null ? match : result + ' ' + match
+  }
+  return result ?? value.default
+}
+
+function className(props: ViewTransitionProps, kind: Kind, types: string[]): string | undefined {
+  const value = byType(props[kind], types) ?? byType(props.default, types)
+  return value === 'auto' ? undefined : value
+}
+
+function visibleChildren(fiber: Fiber, visit: (child: Fiber) => void): void {
+  if (fiber.tag === FiberTag.Activity && fiber.pp?.mode === 'hidden') return
+  if (fiber.tag === FiberTag.Suspense && fiber.ms?.f) {
+    visit(fiber.ms.f)
+    return
+  }
+  for (let child = fiber.child; child; child = child.sibling) visit(child)
+}
+
+// Ignore nested boundary content: its mutations belong to that boundary.
+function contents(node: Node, nested: Set<Node>, first = false): string {
+  if (!first && nested.has(node)) return '|'
+  if (node.nodeType === 3) return JSON.stringify(node.nodeValue)
+  if (node.nodeType !== 1) return ''
+  const element = node as Host
+  let result = '<' + element.nodeName
+  for (const attribute of element.attributes) {
+    if (attribute.name !== 'style') result += ' ' + attribute.name + '=' + JSON.stringify(attribute.value)
+  }
+  for (let i = 0; i < element.style.length; i++) {
+    const property = element.style[i]!
+    if (property !== 'view-transition-name' && property !== 'view-transition-class') {
+      result += ';' + property + ':' + element.style.getPropertyValue(property) + '!' + element.style.getPropertyPriority(property)
+    }
+  }
+  if ('value' in element) result += '=' + (element as HTMLInputElement).value
+  if ('checked' in element) result += ':' + (element as HTMLInputElement).checked
+  result += '>'
+  for (let child = node.firstChild; child; child = child.nextSibling) result += contents(child, nested)
+  return result + '</' + element.nodeName + '>'
+}
+
+function snapshot(roots: FiberRoot[], doc: Document, types: string[], connected = true): Snapshot {
+  const boundaries = new Map<Fiber, Boundary>()
+  const visible = new Set<Fiber>()
+  const images: TransitionImages = new Map()
+  const allHosts = new Set<Node>()
+  const empty: Boundary[] = []
+  const ancestors: Fiber[] = []
+  function walk(fiber: Fiber, parent: Fiber | null, pending: Boundary[]): void {
+    if (fiber.um) return
+    if (fiber.type === REACT_VIEW_TRANSITION_TYPE) {
+      const props: ViewTransitionProps = fiber.pp ?? {}
+      const explicitName = byType(props.name, types)
+      let name = explicitName
+      if (name == null || name === 'auto') {
+        name = names.get(fiber)
+        if (!name) names.set(fiber, name = '_redact_t_' + (++nextName).toString(32))
+      }
+      const boundary: Boundary = {
+        fiber, props, hosts: [], ancestors: ancestors.slice(), parent, name,
+        explicit: explicitName != null && explicitName !== 'auto', rects: [], content: '', inViewport: false,
+      }
+      boundaries.set(fiber, boundary)
+      pending = pending.concat(boundary)
+      parent = fiber
+    }
+    if (fiber.tag === FiberTag.Host) {
+      visible.add(fiber)
+      const dom = fiber.dom as Host | null
+      if (parent && fiber.type === 'img' && dom?.ownerDocument === doc) {
+        images.set(dom as HTMLImageElement, fiber.pp)
+      }
+      if (pending.length && dom?.ownerDocument === doc && (!connected || dom.isConnected) && dom.style) {
+        for (const boundary of pending) boundary.hosts.push(dom)
+        allHosts.add(dom)
+      }
+      pending = empty
+      ancestors.push(fiber)
+    }
+    visibleChildren(fiber, child => walk(child, parent, pending))
+    if (fiber.tag === FiberTag.Host) ancestors.pop()
+  }
+  for (const root of roots) walk(root.r, null, empty)
+  const view = doc.defaultView
+  if (connected) for (const boundary of boundaries.values()) {
+    boundary.rects = boundary.hosts.map(host => {
+      const rect = host.getBoundingClientRect()
+      return [rect.x, rect.y, rect.width, rect.height]
+    })
+    boundary.inViewport = boundary.rects.some(([x, y, width, height]) => width > 0 && height > 0 && x + width > 0 && y + height > 0 && x < (view?.innerWidth ?? Infinity) && y < (view?.innerHeight ?? Infinity))
+    boundary.content = boundary.hosts.map(host => contents(host, allHosts, true)).join('')
+  }
+  return { boundaries, visible, images }
+}
+
+function pseudo(doc: Document, kind: string, name: string): ViewTransitionPseudoElement {
+  const scope = doc.documentElement
+  const selector = '::view-transition-' + kind + '(' + nativeName(name) + ')'
+  return {
+    animate(keyframes, options) {
+      return scope.animate(keyframes, { ...(typeof options === 'number' ? { duration: options } : options), pseudoElement: selector })
+    },
+    getAnimations() {
+      return scope.getAnimations({ subtree: true }).filter(animation => {
+        const effect = animation.effect as KeyframeEffect | null
+        return effect?.target === scope && effect.pseudoElement === selector
+      })
+    },
+    getComputedStyle() { return doc.defaultView!.getComputedStyle(scope, selector) },
+  }
+}
+
+function nativeName(name: string): string {
+  return CSS.escape(name) === name ? name : CSS.escape('r-' + btoa(name).replace(/=/g, ''))
+}
+
+function instance(doc: Document, name: string): ViewTransitionInstance {
+  return {
+    name,
+    group: pseudo(doc, 'group', name),
+    imagePair: pseudo(doc, 'image-pair', name),
+    old: pseudo(doc, 'old', name),
+    new: pseudo(doc, 'new', name),
+  }
+}
+
+function topLevel(boundary: Boundary, other: Snapshot, side: Snapshot): boolean {
+  // An inserted/deleted host wrapper owns its subtree's enter/exit animation.
+  if (boundary.ancestors.some(fiber => !other.visible.has(fiber))) return false
+  for (let parent = boundary.parent; parent; parent = side.boundaries.get(parent)?.parent ?? null) {
+    if (!other.boundaries.has(parent)) return false
+  }
+  return true
+}
+
+function changed(before: Boundary, after: Boundary): boolean {
+  return before.content !== after.content || before.hosts.length !== after.hosts.length ||
+    before.hosts.some((host, i) => host !== after.hosts[i] || before.rects[i]!.some((value, axis) => value !== after.rects[i]![axis]))
+}
+
+export interface PreparedViewTransition {
+  document: Document
+  exclude(root: FiberRoot): void
+  prepare(): Promise<void> | undefined
+  waitForResources(fontsWereLoaded: boolean): Promise<void> | undefined
+  beforeCommit(): boolean
+  afterCommit(): void
+  ready(): void
+  restore(): void
+  finish(): void
+  cancel(): void
+}
+
+export function prepareViewTransition(rootIterable: Iterable<FiberRoot>, types: string[]): PreparedViewTransition | null {
+  const roots = Array.from(rootIterable)
+  const container = roots[0]?.c
+  const doc = container?.nodeType === 9 ? container as unknown as Document : container?.ownerDocument
+  if (!doc?.documentElement) return null
+  const before = snapshot(roots, doc, types)
+  const saved = new Map<Host, string[]>()
+  const suppressed = new Set<string>()
+  const events: Event[] = []
+  const cleanups: (() => void)[] = []
+  const captures: Capture[] = []
+  let done = false
+  let after: Snapshot
+  let resources: ReturnType<typeof transitionResources> | undefined
+
+  function apply(host: Host, name: string, classes?: string): void {
+    let previous = saved.get(host)
+    if (!previous) saved.set(host, previous = [])
+    for (let index = 0; index < 2; index++) {
+      const property = styleProperties[index]!
+      const offset = index * 3
+      const current = host.style.getPropertyValue(property)
+      // A committed style prop may replace either temporary value.
+      if (current !== previous[offset + 2]) {
+        previous[offset] = current
+        previous[offset + 1] = host.style.getPropertyPriority(property)
+      }
+      const value = index ? classes === 'none' ? '' : classes ?? previous[offset]! : nativeName(name)
+      host.style.setProperty(property, previous[offset + 2] = value, 'important')
+    }
+  }
+
+  function applyHosts(hosts: Host[], name: string, props: ViewTransitionProps, kind: Kind): void {
+    const classes = className(props, kind, types)
+    hosts.forEach((host, index) => apply(host, index ? name + '_' + index : name, classes))
+  }
+
+  function suppress(hosts: Host[], name: string): void {
+    hosts.forEach((_, index) => suppressed.add(index ? name + '_' + index : name))
+  }
+
+  function ownership(side: 'old' | 'next'): Map<Host, Capture> {
+    const owners = new Map<Host, Capture>()
+    for (const capture of captures) {
+      if (side === 'next' && !capture.newEnabled) continue
+      for (const host of capture[side]?.hosts ?? []) owners.set(host, capture)
+    }
+    return owners
+  }
+
+  function capture(kind: Kind, old?: Boundary, next?: Boundary, enabled = true): void {
+    captures.push({ old, next, kind, name: (old ?? next)!.name, oldHosts: [], newEnabled: !!next && enabled })
+  }
+
+  function restore(): void {
+    for (const [host, previous] of saved) {
+      for (let index = 0; index < 2; index++) {
+        const property = styleProperties[index]!
+        const offset = index * 3
+        if (host.style.getPropertyValue(property) === previous[offset + 2]) {
+          host.style.setProperty(property, previous[offset]!, previous[offset + 1])
+        }
+      }
+    }
+    saved.clear()
+  }
+
+  function finish(): void {
+    if (done) return
+    done = true
+    resources?.cancel()
+    restore()
+    let error: unknown
+    let failed = false
+    for (const cleanup of cleanups.splice(0)) {
+      try { cleanup() } catch (caught) { if (!failed) { error = caught; failed = true } }
+    }
+    if (failed) throw error
+  }
+
+  return {
+    document: doc,
+    exclude(root) {
+      const index = roots.indexOf(root)
+      if (index >= 0) roots.splice(index, 1)
+      for (const [fiber] of before.boundaries) if (fiber.root === root) before.boundaries.delete(fiber)
+    },
+    prepare() {
+      after = snapshot(roots, doc, types, false)
+      resources = transitionResources(doc, before.images, after.images)
+      return resources.before()
+    },
+    waitForResources(fontsWereLoaded) { if (!done) return resources?.after(fontsWereLoaded) },
+    beforeCommit() {
+      if (done) return false
+      const entering = new Map<string, Boundary>()
+      const paired = new Set<Fiber>()
+      for (const boundary of after.boundaries.values()) {
+        if (!before.boundaries.has(boundary.fiber) && boundary.explicit) entering.set(boundary.name, boundary)
+      }
+      for (const old of before.boundaries.values()) {
+        const current = after.boundaries.get(old.fiber)
+        if (current) {
+          if (className(current.props, 'update', types) !== 'none') capture('update', old, current)
+        } else {
+          const shared = old.explicit && old.inViewport ? entering.get(old.name) : undefined
+          if (shared) {
+            entering.delete(old.name)
+            if (className(old.props, 'share', types) !== 'none') {
+              paired.add(shared.fiber)
+              capture('share', old, shared, className(shared.props, 'share', types) !== 'none')
+            }
+          } else if (topLevel(old, after, before) && old.inViewport && className(old.props, 'exit', types) !== 'none') {
+            capture('exit', old)
+          }
+        }
+      }
+      for (const boundary of after.boundaries.values()) {
+        if (before.boundaries.has(boundary.fiber) || paired.has(boundary.fiber)) continue
+        if (topLevel(boundary, before, after) && className(boundary.props, 'enter', types) !== 'none') {
+          capture('enter', undefined, boundary)
+        }
+      }
+      // A directly nested boundary owns updates; an outer presence boundary
+      // owns entering/exiting hosts. Shared descendants take precedence.
+      captures.sort((a, b) => (a.kind === 'share' ? 2 : a.kind === 'update' ? 0 : 1) - (b.kind === 'share' ? 2 : b.kind === 'update' ? 0 : 1))
+      if (!captures.some(capture => capture.old?.hosts.length || (capture.newEnabled && capture.next?.hosts.length))) return false
+      const owners = ownership('old')
+      apply(doc.documentElement, 'none')
+      for (const boundary of before.boundaries.values()) for (const host of boundary.hosts) apply(host, 'none')
+      for (const capture of captures) {
+        capture.oldHosts = capture.old?.hosts.filter(host => owners.get(host) === capture) ?? []
+        const props = capture.kind === 'update' ? capture.next!.props : capture.old?.props
+        if (props) applyHosts(capture.oldHosts, capture.name, props, capture.kind)
+      }
+      return true
+    },
+    afterCommit() {
+      if (done) return
+      const after = snapshot(roots, doc, types)
+      for (const capture of captures) {
+        if (capture.next) capture.next = after.boundaries.get(capture.next.fiber)
+        if (capture.kind !== 'update' && !capture.next?.inViewport) capture.newEnabled = false
+      }
+      const owners = ownership('next')
+      for (const boundary of after.boundaries.values()) for (const host of boundary.hosts) apply(host, 'none')
+      for (const capture of captures) {
+        const newHosts = capture.next?.hosts.filter(host => owners.get(host) === capture) ?? []
+        if (capture.next) applyHosts(newHosts, capture.name, capture.next.props, capture.kind)
+        if (!capture.oldHosts.length && !newHosts.length) continue
+        if (capture.kind === 'update') {
+          if (capture.next && capture.old && changed(capture.old, capture.next)) events.push({ boundary: capture.next, name: capture.name, kind: 'update' })
+          else suppress(capture.oldHosts, capture.name)
+        } else {
+          const boundary = capture.kind === 'enter' ? capture.next : capture.old
+          if (boundary) events.push({ boundary, name: capture.name, kind: capture.kind })
+        }
+      }
+    },
+    ready() {
+      if (done) return
+      // These captures were needed before the synchronous commit could tell
+      // which boundaries changed. Cancel their native animations, not the DOM.
+      const nativeSuppressed = new Set([...suppressed].map(nativeName))
+      for (const animation of doc.documentElement.getAnimations({ subtree: true })) {
+        const effect = animation.effect as KeyframeEffect | null
+        const selector = effect?.pseudoElement
+        if (effect?.target !== doc.documentElement || !selector) continue
+        const start = selector.indexOf('(')
+        if (start >= 0 && nativeSuppressed.has(selector.slice(start + 1, -1))) animation.cancel()
+      }
+      for (const name of suppressed) {
+        const animation = pseudo(doc, 'group', name).animate({ opacity: 0 }, { duration: 0, fill: 'forwards' })
+        cleanups.push(() => animation.cancel())
+      }
+      let error: unknown
+      let failed = false
+      for (const event of events) {
+        if (done) break
+        const callback = event.boundary.props[('on' + event.kind[0]!.toUpperCase() + event.kind.slice(1)) as 'onEnter']
+        if (callback) {
+          try {
+            const cleanup = callback(instance(doc, event.name), types)
+            if (typeof cleanup === 'function') {
+              if (done) cleanup()
+              else cleanups.push(cleanup)
+            }
+          } catch (caught) { if (!failed) { error = caught; failed = true } }
+        }
+      }
+      if (failed) throw error
+    },
+    restore,
+    finish,
+    cancel: finish,
+  }
+}
diff --git b/dom/fragment-instance.ts b/dom/fragment-instance.ts
new file mode 100644
index 0000000..32ca3ec
--- /dev/null
+++ b/dom/fragment-instance.ts
@@ -0,0 +1,337 @@
+import { FiberTag, type Fiber, type FiberRoot } from '../core'
+import { findRoot, getCurrentRoot, isActivityHidden } from './reconcile'
+import { onCommitFailure, onCommitRollback, queueMutation } from './commit'
+
+type Listener = EventListenerOrEventListenerObject
+type Observer = IntersectionObserver | ResizeObserver
+type OwnedNode = Node & { reactFragments?: Set<FragmentInstance> }
+type Registration = {
+  type: string
+  listener: Listener
+  attached: Listener
+  capture: boolean
+  options: AddEventListenerOptions
+  cleanup?: () => void
+}
+
+const instances = new WeakMap<FiberRoot, Set<FragmentInstance>>()
+
+function hosts(fiber: Fiber, deep = false, result: Fiber[] = []): Fiber[] {
+  for (let child = fiber.child; child; child = child.sibling) {
+    if (child.um || isActivityHidden(child)) continue
+    const host = child.tag === FiberTag.Host || child.tag === FiberTag.Text
+    if (host) result.push(child)
+    if (!host || deep) hosts(child, deep, result)
+  }
+  if (deep && fiber.tag === FiberTag.Suspense && fiber.ms?.f) hosts(fiber.ms.f, true, result)
+  return result
+}
+
+function node(fiber: Fiber): Node {
+  return fiber.tag === FiberTag.Root ? fiber.root!.c : fiber.dom!
+}
+
+function siblings(fiber: Fiber, parent: Fiber | null): [Node | null, Node | null] {
+  let previous: Node | null = null
+  let next: Node | null = null
+  let found = false
+  function visit(parent: Fiber): void {
+    for (let child = parent.child; child && !next; child = child.sibling) {
+      if (child === fiber) found = true
+      else if (child.tag === FiberTag.Host || child.tag === FiberTag.Text) {
+        if (found) next = node(child)
+        else previous = node(child)
+      } else if (!isActivityHidden(child)) visit(child)
+    }
+  }
+  if (parent) visit(parent)
+  return [previous, next]
+}
+
+function containsFiber(parent: Fiber, child: Fiber | null): boolean {
+  for (; child; child = child.parent) if (child === parent) return true
+  return false
+}
+
+export class FragmentInstance {
+  private nodes = new Set<OwnedNode>()
+  private listeners: Registration[] = []
+  private observers = new Set<Observer>()
+  private pending = new Map<Observer, Set<Element>>()
+  private children: Node[] = []
+  private ordered: Fiber[] = []
+  private parent: Node | null = null
+  private adjacent: [Node | null, Node | null] = [null, null]
+  private portalContainer: Node | null = null
+
+  constructor(private fiber: Fiber) {}
+
+  refresh(ordered: Fiber[]): void {
+    this.children = hosts(this.fiber).map(node)
+    let parent = this.fiber.parent
+    this.portalContainer = null
+    for (; parent; parent = parent.parent) {
+      if (parent.tag === FiberTag.Host || parent.tag === FiberTag.Root) break
+      if (parent.tag === FiberTag.Portal && !this.portalContainer) this.portalContainer = parent.mp.container
+    }
+    this.parent = parent && node(parent)
+    this.adjacent = siblings(this.fiber, parent)
+    this.ordered = ordered
+    const current = new Set(this.children)
+    for (const child of this.nodes) if (!current.has(child)) this.update(child, false)
+    for (const child of current) this.update(child, true)
+  }
+
+  /** Renderer hook, called only for first-level host insertion/removal. */
+  update(child: OwnedNode, adding: boolean): void {
+    if (adding === this.nodes.has(child)) return
+    if (adding) {
+      this.nodes.add(child)
+      ;(child.reactFragments ??= new Set()).add(this)
+    } else {
+      this.nodes.delete(child)
+      child.reactFragments?.delete(this)
+    }
+    for (const entry of this.listeners) {
+      if (adding) child.addEventListener(entry.type, entry.attached, entry.options)
+      else child.removeEventListener(entry.type, entry.attached, entry.capture)
+    }
+    if (child.nodeType !== 1) return
+    for (const observer of this.observers) {
+      if (adding) {
+        this.pending.get(observer)?.delete(child as Element)
+        observer.observe(child as Element)
+      } else if (typeof (observer as IntersectionObserver).rootMargin === 'string') {
+        let pending = this.pending.get(observer)
+        if (!pending) {
+          this.pending.set(observer, pending = new Set())
+          const flush = () => {
+            for (const element of pending!) observer.unobserve(element)
+            if (this.pending.get(observer) === pending) this.pending.delete(observer)
+          }
+          const frame = child.ownerDocument?.defaultView?.requestAnimationFrame
+          if (frame) frame(() => frame(flush))
+          else queueMicrotask(flush)
+        }
+        pending.add(child as Element)
+      } else observer.unobserve(child as Element)
+    }
+  }
+
+  addEventListener(type: string, listener: Listener | null, options?: boolean | AddEventListenerOptions): void {
+    if (!listener) return
+    const opts = typeof options === 'boolean' ? { capture: options } : options ?? {}
+    const capture = !!opts.capture
+    if (opts.signal?.aborted || this.listeners.some((entry) => entry.type === type && entry.listener === listener && entry.capture === capture)) return
+    const instance = this
+    const entry: Registration = {
+      type, listener, capture,
+      options: opts.passive === undefined ? { capture } : { capture, passive: opts.passive },
+      attached: opts.once ? function (this: EventTarget, event: Event) {
+        instance.removeEventListener(type, listener, capture)
+        if (typeof listener === 'function') listener.call(this, event)
+        else listener.handleEvent(event)
+      } : listener,
+    }
+    if (opts.signal) {
+      const abort = () => this.removeEventListener(type, listener, capture)
+      opts.signal.addEventListener('abort', abort, { once: true })
+      entry.cleanup = () => opts.signal!.removeEventListener('abort', abort)
+    }
+    this.listeners.push(entry)
+    for (const child of this.nodes) child.addEventListener(type, entry.attached, entry.options)
+  }
+
+  removeEventListener(type: string, listener: Listener | null, options?: boolean | EventListenerOptions): void {
+    const capture = typeof options === 'boolean' ? options : !!options?.capture
+    const index = this.listeners.findIndex((entry) => entry.type === type && entry.listener === listener && entry.capture === capture)
+    if (index < 0) return
+    const entry = this.listeners.splice(index, 1)[0]!
+    for (const child of this.nodes) child.removeEventListener(type, entry.attached, capture)
+    entry.cleanup?.()
+  }
+
+  dispatchEvent(event: Event): boolean {
+    const parent = !this.fiber.um && this.parent
+    if (!parent) return true
+    const target = parent
+    if (!this.listeners.length && event.bubbles) return target.dispatchEvent(event)
+    const document = target.nodeType === 9 ? target as Document : target.ownerDocument!
+    const temporary = target.nodeType === 9 ? document.createComment('') : document.createTextNode('')
+    for (const entry of this.listeners) temporary.addEventListener(entry.type, entry.attached, entry.options)
+    target.appendChild(temporary)
+    try { return temporary.dispatchEvent(event) }
+    finally { temporary.parentNode?.removeChild(temporary) }
+  }
+
+  private focusChild(last: boolean, options?: FocusOptions): void {
+    // Parent links survive reconciliation. Filter the committed root order,
+    // not the work-in-progress child pointers, when focus is actually used.
+    const children = this.ordered.filter(child => containsFiber(this.fiber, child))
+    if (last) children.reverse()
+    for (const child of children) {
+      if (child.tag === FiberTag.Text) continue
+      const element = child.dom as HTMLElement
+      if (element.ownerDocument.activeElement === element) return
+      let focused = false
+      const handleFocus = () => { focused = true }
+      element.ownerDocument.addEventListener('focus', handleFocus, true)
+      try { (element.focus ?? HTMLElement.prototype.focus).call(element, options) }
+      finally { element.ownerDocument.removeEventListener('focus', handleFocus, true) }
+      if (focused) return
+    }
+  }
+
+  focus(options?: FocusOptions): void { this.focusChild(false, options) }
+  focusLast(options?: FocusOptions): void { this.focusChild(true, options) }
+
+  blur(): void {
+    const parent = this.parent
+    const active = parent && (parent.ownerDocument ?? parent as Document).activeElement as HTMLElement | null
+    if (active && this.children.some((child) => child.contains(active))) active.blur()
+  }
+
+  observeUsing(observer: Observer): void {
+    this.observers.add(observer)
+    for (const child of this.nodes) if (child.nodeType === 1) observer.observe(child as Element)
+  }
+
+  unobserveUsing(observer: Observer): void {
+    if (!this.observers.delete(observer)) return
+    for (const child of this.nodes) if (child.nodeType === 1) observer.unobserve(child as Element)
+    for (const child of this.pending.get(observer) ?? []) observer.unobserve(child)
+    this.pending.get(observer)?.clear()
+    this.pending.delete(observer)
+  }
+
+  getClientRects(): DOMRect[] {
+    const rects: DOMRect[] = []
+    for (const child of this.children) {
+      if (child.nodeType === 3) {
+        const range = child.ownerDocument!.createRange()
+        range.selectNodeContents(child)
+        rects.push(...range.getClientRects())
+      } else rects.push(...(child as Element).getClientRects())
+    }
+    return rects
+  }
+
+  getRootNode(options?: GetRootNodeOptions): Node | FragmentInstance {
+    const parent = !this.fiber.um && this.parent
+    return parent ? parent.getRootNode(options) : this
+  }
+
+  compareDocumentPosition(other: Node): number {
+    const parent = !this.fiber.um && this.parent
+    if (!parent) return 1
+    const children = this.children
+    let parentNode = parent
+    if (!children.length) {
+      if (this.portalContainer) parentNode = this.portalContainer
+      let result = parentNode.compareDocumentPosition(other)
+      if (parentNode === other) result = 8
+      else if (result & 16) {
+        const following = this.adjacent[1]
+        const position = following && following.compareDocumentPosition(other)
+        result = following && (position === 0 || position! & 4) ? 4 : 2
+      }
+      return result | 32
+    }
+    const first = children[0]!
+    const last = children[children.length - 1]!
+    if (this.portalContainer) parentNode = first.parentNode!
+    if (!parentNode) return 1
+    const firstContained = parentNode.compareDocumentPosition(first) & 16
+    const lastContained = parentNode.compareDocumentPosition(last) & 16
+    const firstPosition = first.compareDocumentPosition(other)
+    const lastPosition = last.compareDocumentPosition(other)
+    const result = (firstContained && first === other) || (lastContained && last === other) ||
+      (firstPosition & 16) || (lastPosition & 16) ||
+      (firstContained && lastContained && (firstPosition & 4) && (lastPosition & 2)) ? 16 :
+      (!firstContained && first === other) || (!lastContained && last === other) ? 32 : firstPosition
+    if (result & 33) return result
+    const ordered = this.ordered
+    let otherFiber: Fiber | undefined
+    for (let target: Node | null = other; target && !otherFiber; target = target.parentNode) {
+      otherFiber = ordered.find((fiber) => fiber.dom === target)
+    }
+    if (result & 16) return containsFiber(this.fiber, otherFiber ?? null) ? result : 32
+    if (result & 8) return otherFiber || other === other.ownerDocument || other === other.ownerDocument?.documentElement || other === other.ownerDocument?.body ? result : 32
+    if (!otherFiber) return 32
+    const otherIndex = ordered.indexOf(otherFiber)
+    return ((result & 2) && otherIndex <= ordered.findIndex(fiber => fiber.dom === first)) ||
+      ((result & 4) && otherIndex >= ordered.findIndex(fiber => fiber.dom === last)) ? result : 32
+  }
+
+  scrollIntoView(alignToTop?: boolean): void {
+    if (typeof alignToTop === 'object') throw new Error('FragmentInstance.scrollIntoView expects a boolean, not an options object.')
+    if (this.fiber.um) return
+    const children = this.children.slice()
+    const top = alignToTop !== false
+    if (!children.length) {
+      const [previous, next] = this.adjacent
+      const fallback = top ? next ?? previous ?? this.parent : previous ?? next
+      if (fallback) children.push(fallback)
+    }
+    if (top) children.reverse()
+    for (const target of children) {
+      if (target.nodeType === 3) {
+        const range = target.ownerDocument!.createRange()
+        range.selectNodeContents(target)
+        const rect = range.getBoundingClientRect()
+        const window = target.ownerDocument!.defaultView!
+        window.scrollTo(window.scrollX + rect.left, window.scrollY + (top ? rect.top : rect.bottom - window.innerHeight))
+      } else if (target.nodeType === 11) {
+        ;(target as ShadowRoot).host?.scrollIntoView(alignToTop)
+      } else if (target.nodeType !== 9) (target as Element).scrollIntoView(alignToTop)
+    }
+  }
+
+  dispose(): void {
+    for (const child of this.nodes) this.update(child, false)
+    for (const entry of this.listeners) entry.cleanup?.()
+    this.listeners = []
+    this.children = []
+    this.ordered = []
+    this.parent = null
+    const root = this.fiber.root ?? findRoot(this.fiber)
+    if (root) instances.get(root)?.delete(this)
+  }
+}
+
+export function createFragmentInstance(fiber: Fiber): FragmentInstance {
+  const root = fiber.root ?? findRoot(fiber)
+  if (root) root.fr = true
+  const instance = new FragmentInstance(fiber)
+  if (root) {
+    let registered = instances.get(root)
+    if (!registered) instances.set(root, registered = new Set())
+    registered.add(instance)
+    onCommitRollback(() => { registered.delete(instance) })
+    onCommitFailure(() => { registered.delete(instance) })
+  }
+  return instance
+}
+
+export function updateFragmentHost(fiber: Fiber, adding: boolean): void {
+  if (!(fiber.root ?? getCurrentRoot() ?? findRoot(fiber))?.fr || !fiber.dom) return
+  const dom = fiber.dom
+  queueMutation(() => {
+    for (let parent = fiber.parent; parent; parent = parent.parent) {
+      if (adding && isActivityHidden(parent)) break
+      if (parent.tag === FiberTag.Fragment && parent.sn instanceof FragmentInstance) parent.sn.update(dom, adding)
+      if (parent.tag === FiberTag.Host || parent.tag === FiberTag.Root) break
+    }
+  })
+}
+
+export function refreshFragmentInstances(root: FiberRoot): void {
+  if (!root.fr) return
+  const registered = instances.get(root)
+  if (!registered?.size) return
+  queueMutation(() => {
+    if (!registered.size) return
+    const ordered = hosts(root.r, true)
+    for (const instance of registered) instance.refresh(ordered)
+  })
+}
diff --git a/dom/index.ts b/dom/index.ts
index 176eb3e..e0477e2 100644
--- a/dom/index.ts
+++ b/dom/index.ts
@@ -5,14 +5,11 @@ import './features'
 
 export { flushSync, batchedUpdates as unstable_batchedUpdates } from './root'
 export { createPortal } from './portal'
+export { browser } from '../core/browser'
+export type { BrowserToken } from '../core/browser'
 
-// Resource hints — stubs
-export function preconnect(_href: string, _opts?: any): void {}
-export function prefetchDNS(_href: string): void {}
-export function preload(_href: string, _opts?: any): void {}
-export function preinit(_href: string, _opts?: any): void {}
-export function preloadModule(_href: string, _opts?: any): void {}
-export function preinitModule(_href: string, _opts?: any): void {}
+import { preconnect, prefetchDNS, preload, preinit, preloadModule, preinitModule } from './resource-hints'
+export { preconnect, prefetchDNS, preload, preinit, preloadModule, preinitModule }
 
 export const __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = {
   d: {
@@ -35,10 +32,12 @@ export const version = '19.2.3'
 // Required by React's default export consumers
 import { flushSync, batchedUpdates } from './root'
 import { createPortal } from './portal'
+import { browser } from '../core/browser'
 export default {
   flushSync,
   unstable_batchedUpdates: batchedUpdates,
   createPortal,
+  browser,
   preconnect,
   prefetchDNS,
   preload,
diff --git a/dom/portal.ts b/dom/portal.ts
index 56386e2..9dd1d89 100644
--- a/dom/portal.ts
+++ b/dom/portal.ts
@@ -3,7 +3,7 @@ import { REACT_PORTAL_TYPE } from '../react'
 
 export function createPortal(
   children: ReactNode,
-  container: Element,
+  container: Element | DocumentFragment,
   key: string | null = null,
 ): ReactElement {
   return {
diff --git a/dom/reconcile.ts b/dom/reconcile.ts
index 7dcb519..2f2940b 100644
--- a/dom/reconcile.ts
+++ b/dom/reconcile.ts
@@ -8,17 +8,25 @@ import {
   type FiberRoot,
   type ReactElement,
   type ReactNode,
-  type Hook,
   type Effect,
+  type Hook,
 } from '../core'
 import {
   ReactSharedInternals,
   REACT_LAZY_TYPE,
   REACT_STRICT_MODE_TYPE,
   REACT_PROFILER_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
 } from '../react'
-import { createHostNode, setProp } from './dom'
-import { makeDispatcher } from './dispatcher'
+import { createHostNode, setProp, syncInputValue, syncTextareaValue } from './dom'
+import { HOOK_BAILOUT, renderWithHooks } from './dispatcher'
+import { rememberRetainedEffect, setLayoutDisconnected } from './retained-effects'
+import { componentStack } from './error-info'
+import { resourceKind } from '../core/resource-hints'
+import { acquireResource } from './resources'
+import { currentCommit, commitSynchronously, queueMutation, queueText, queueCommitEffects, setCommitCheckpointHook, onCommitRollback, onCommitFailure, checkpointCommit, rewindCommit, rememberChildList } from './commit'
+import { markTransitionUpdate, deferTransition, cancelTransitions, deferTransitionLayout, deferTransitionPassive } from './features/view-transition'
+import { createFragmentInstance, updateFragmentHost, refreshFragmentInstances } from './features/fragment-refs'
 import {
   adoptHostDom,
   adoptTextDom,
@@ -28,6 +36,7 @@ import {
   findHostParent as findHydrationHost,
   abortHydration,
   recoverHydration,
+  isHydrationBailout,
 } from './features/hydration'
 
 // ---------------------------------------------------------------------------
@@ -35,6 +44,7 @@ import {
 // ---------------------------------------------------------------------------
 
 let currentRoot: FiberRoot | null = null
+let preparedParent: Node | null = null
 let flushing = false
 let isBatching = false
 const pendingRoots = new Set<FiberRoot>()
@@ -54,11 +64,21 @@ export function scheduleUpdate(fiber: Fiber): void {
   // query, any external store) can fire after unmount if their cleanup was
   // missed, and letting those reach rerenderFiber mounts zombie DOM into the
   // old .parent's DOM (which stays reachable via the stale pointer).
-  if (fiber.um) return
+  if (fiber.um || fiber.pd) return
+  fiber.dy = true
+  // A component finishes its render-phase updates before reconciling children.
+  if (ReactSharedInternals.F === fiber) return
   const root = findRoot(fiber)
   if (!root) return
+  // Retained Suspense primaries must retry their boundary, not commit a child
+  // against the older props preserved by the failed attempt.
+  while (fiber.su) {
+    fiber = fiber.su
+    fiber.ms.u = true
+    fiber.dy = true
+  }
+  markTransitionUpdate(root)
   root.p.add(fiber)
-  fiber.dy = true
   pendingRoots.add(root)
   if (isBatching) return
   if (!root.s) {
@@ -68,14 +88,19 @@ export function scheduleUpdate(fiber: Fiber): void {
 }
 
 export function flushSyncWork(fn: () => void): void {
+  cancelTransitions()
+  const transition = ReactSharedInternals.T
+  ReactSharedInternals.T = null
   const wasBatching = isBatching
   isBatching = true
   try {
     fn()
+    isBatching = wasBatching
+    flushPending()
   } finally {
     isBatching = wasBatching
+    ReactSharedInternals.T = transition
   }
-  flushPending()
 }
 
 export function batchedUpdates<T>(fn: () => T): T {
@@ -105,27 +130,11 @@ function flushPending(): void {
       pendingRoots.clear()
       for (const root of roots) {
         root.s = false
-        // Render each pending fiber from shallowest first so an ancestor's
-        // cascade reaches descendants before we try to render them directly.
-        // Descendants rendered via cascade still have `dy=true` (only
-        // rerenderFiber clears it); when we later reach them in this loop,
-        // rerenderFiber's own `if (!dy) return` is our short-circuit. We
-        // previously filtered descendants of dy ancestors here, but that
-        // loses updates whenever an ancestor's render doesn't actually reach
-        // the descendant — e.g. React.memo bailing on equal props. Keep all
-        // dy fibers and let rerenderFiber de-dupe via its dy check.
-        const pending = [...root.p]
-        root.p.clear()
-        pending.sort((a, b) => fiberDepth(a) - fiberDepth(b))
-        for (const fiber of pending) {
-          try {
-            rerenderFiber(fiber, root)
-          } catch (error) {
-            if (!recoverHydration(root, error)) throw error
-            break
-          }
+        const render = () => flushRoot(root)
+        if (!deferTransition(root, render, flushPending)) {
+          try { commitSynchronously(render) }
+          catch (error) { if (!recoverRootError(error)) throw error }
         }
-        runEffects(root)
       }
     }
   } finally {
@@ -133,26 +142,80 @@ function flushPending(): void {
   }
 }
 
+function flushRoot(root: FiberRoot): void {
+  if (root.er) {
+    flushRootErrors(root)
+    return
+  }
+  const render = root.u
+  root.u = undefined
+  if (render) render()
+  // Ancestors run first, but keep descendants in the queue: an ancestor can
+  // bail out without reaching a descendant's independently scheduled update.
+  const pending = [...root.p]
+  root.p.clear()
+  pending.sort((a, b) => fiberDepth(a) - fiberDepth(b))
+  for (const fiber of pending) {
+    if (!fiber.dy || fiber.um || fiber.pd) continue
+    const boundary = root.eb && findErrorBoundary(fiber)
+    const checkpoint = boundary || (root.sp && findSuspenseBoundary(fiber)) ? checkpointCommit(fiber) : -1
+    try {
+      rerenderFiber(fiber, root)
+    } catch (error) {
+      if (error instanceof RenderSuspenseCapture) {
+        rewindCommit(checkpoint)
+        error.boundary.ms.u = true
+        scheduleUpdate(error.boundary)
+        continue
+      }
+      if (error instanceof RenderErrorCapture) {
+        if (error.boundary.tag === FiberTag.Root) throw error
+        rewindCommit(checkpoint)
+        captureError(error)
+        continue
+      }
+      if (!recoverHydration(root, error)) throw error
+      break
+    }
+  }
+  runEffects(root)
+}
+
+export function scheduleRootRender(root: FiberRoot, render: () => void): void {
+  markTransitionUpdate(root)
+  root.u = render
+  pendingRoots.add(root)
+  if (isBatching) return
+  flushPending()
+}
+
 export function discardPendingWork(root: FiberRoot): void {
+  root.u = undefined
   root.p.clear()
   root.s = false
   pendingRoots.delete(root)
 }
 
-function fiberDepth(fiber: Fiber): number {
-  let d = 0
-  let p: Fiber | null = fiber.parent
-  while (p) {
-    d++
-    p = p.parent
+export function discardPendingEffects(root: FiberRoot): void {
+  for (const queue of [pendingEffects, pendingInsertionEffects, pendingCommits]) {
+    for (let index = queue.length - 1; index >= 0; index--) {
+      if (findRoot(queue[index]![0]) === root) removePendingEffect(queue, index)
+    }
   }
-  return d
+  for (const fiber of stagedCommits.keys()) {
+    if (findRoot(fiber) === root) removeStagedCommits(fiber)
+  }
+}
+
+function fiberDepth(fiber: Fiber): number {
+  // Reused fibers keep their parent and root, including keyed sibling moves.
+  return fiber.depth ??= fiber.parent ? fiberDepth(fiber.parent) + 1 : 0
 }
 
 export function findRoot(fiber: Fiber): FiberRoot | null {
   let f: Fiber | null = fiber
   while (f) {
-    if (f.root) return f.root
+    if (f.root) return fiber.root = f.root
     f = f.parent
   }
   return null
@@ -163,6 +226,7 @@ export function findRoot(fiber: Fiber): FiberRoot | null {
 // ---------------------------------------------------------------------------
 
 export function renderRoot(root: FiberRoot, children: ReactNode): void {
+  if (!currentCommit) return commitSynchronously(() => renderRoot(root, children))
   const rootFiber = root.r
   rootFiber.pp = { children }
   currentRoot = root
@@ -185,7 +249,7 @@ function rerenderFiber(fiber: Fiber, root: FiberRoot): void {
   // content from a previous location staying on screen after nav, because a
   // pending rerender on the old route's LibraryLandingPage (um during
   // Outlet's shallow-first render) still fires from root.pending.
-  if (fiber.um) return
+  if (fiber.um || fiber.pd) return
   // Clear BEFORE rendering so a scheduleUpdate() triggered mid-render (e.g.
   // error boundary catching a descendant throw) marks us dy for the next
   // flush iteration instead of being wiped out when render() completes.
@@ -204,7 +268,8 @@ function rerenderFiber(fiber: Fiber, root: FiberRoot): void {
   const prevForcing = forceRerenderingFiber
   forceRerenderingFiber = fiber
   try {
-    renderFiber(fiber, getHostParent(fiber), getAnchor(fiber))
+    const domParent = getHostParent(fiber)
+    renderFiber(fiber, domParent, getAnchor(fiber, domParent))
   } finally {
     forceRerenderingFiber = prevForcing
     if (resumeHydration) {
@@ -255,10 +320,6 @@ function pushChildren(node: ReactNode, out: NormalizedChild[]): void {
     for (let i = 0; i < node.length; i++) pushChildren(node[i], out)
     return
   }
-  if (isIterable(node)) {
-    for (const item of node as Iterable<ReactNode>) pushChildren(item, out)
-    return
-  }
   if (typeof node === 'object') {
     const t = (node as any).$$typeof
     if (ACCEPTED_ELEMENT_MARKERS.has(t)) {
@@ -278,6 +339,9 @@ function pushChildren(node: ReactNode, out: NormalizedChild[]): void {
       return
     }
   }
+  if (isIterable(node)) {
+    for (const item of node as Iterable<ReactNode>) pushChildren(item, out)
+  }
 }
 
 function isIterable(obj: any): boolean {
@@ -318,7 +382,7 @@ function fiberFromChild(child: NormalizedChild, parent: Fiber): Fiber {
   const marker = type && (type as any).$$typeof
   if (typeof type === 'string') tag = FiberTag.Host
   else if (type === REACT_FRAGMENT_TYPE) tag = FiberTag.Fragment
-  else if (type === REACT_STRICT_MODE_TYPE || type === REACT_PROFILER_TYPE) tag = FiberTag.Fragment
+  else if (type === REACT_STRICT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_VIEW_TRANSITION_TYPE) tag = FiberTag.Fragment
   else {
     // Feature-registered type matchers (Portal, future extractions). Features
     // that carry the symbol as element.type directly (rather than wrapping in
@@ -355,8 +419,9 @@ export function reconcileChildren(
   domParent: Node,
   anchor: Node | null,
 ): void {
-  // Fast path: unkeyed positional steady-state. Walk the existing sibling
-  // chain and newChildren in lockstep, validating AND committing in one pass.
+  // Fast path: positional steady-state, including unchanged keyed lists.
+  // Walk the sibling chain and newChildren in lockstep, validating and
+  // committing in one pass.
   // On any divergence we fall back to the slow path, which rebuilds the
   // sibling chain anyway — partial pp writes are idempotent.
   // Skips the Map / Set / existing-array allocation entirely.
@@ -365,12 +430,12 @@ export function reconcileChildren(
     let ok = true
     for (let i = 0; i < newChildren.length; i++) {
       const child = newChildren[i]
-      if (child == null || !f || f.key != null) { ok = false; break }
+      if (child == null || !f) { ok = false; break }
       if (typeof child === 'string') {
-        if (f.tag !== FiberTag.Text) { ok = false; break }
+        if (f.tag !== FiberTag.Text || f.key != null) { ok = false; break }
         f.pp = child
       } else {
-        if ((child as ReactElement).key != null) { ok = false; break }
+        if (!sameKey(f.key, (child as ReactElement).key)) { ok = false; break }
         if (f.type !== (child as ReactElement).type) { ok = false; break }
         f.pp = (child as ReactElement).props
         f.ref = (child as any).ref ?? null
@@ -380,19 +445,32 @@ export function reconcileChildren(
     if (ok && f === null) {
       // Pass 2: render forward with per-child anchors. Identical to the slow
       // path's pass 2.
-      for (let r: Fiber | null = parent.child; r; r = r.sibling) {
-        let a = anchor
-        for (let s: Fiber | null = r.sibling; s; s = s.sibling) {
-          const d = firstDomNode(s)
-          if (d && d.parentNode === domParent) { a = d; break }
-        }
-        renderFiber(r, domParent, a)
-      }
+      renderChildChain(parent, domParent, anchor, false)
       return
     }
   }
 
+  if (!parent.child) {
+    // Build every sibling before rendering, just like the matching path.
+    // A first mount has no old fibers to index, claim or remove.
+    rememberChildList(parent)
+    let previous: Fiber | null = null
+    for (const child of newChildren) {
+      if (child == null) continue
+      const fiber = fiberFromChild(child, parent)
+      if (previous) previous.sibling = fiber
+      else parent.child = fiber
+      previous = fiber
+    }
+    renderChildChain(parent, domParent, anchor, true)
+    if (previous && !currentRoot?.h && domParent.nodeName !== 'HEAD') {
+      placeChildrenInOrder(parent, domParent, anchor)
+    }
+    return
+  }
+
   const existing = collectChildren(parent)
+  rememberChildList(parent, existing)
   const keyed = new Map<string, Fiber>()
   for (const f of existing) {
     if (f.key != null) keyed.set('k' + f.key, f)
@@ -450,7 +528,7 @@ export function reconcileChildren(
     if (!match) {
       while (existingIdx < existing.length) {
         const cand = existing[existingIdx]!
-        if (claimed.has(cand) || cand.key != null) {
+        if (cand.key != null) {
           existingIdx++
           continue
         }
@@ -503,17 +581,10 @@ export function reconcileChildren(
   // walks DOM forward and each renderFiber adopts the next existing node,
   // so per-child anchors are moot — fall back to the parent's anchor.
   const hydrating = !!currentRoot?.h
-  for (let f: Fiber | null = parent.child; f; f = f.sibling) {
-    let a = anchor
-    if (!hydrating) {
-      // Find the firstDomNode of the next still-mounted sibling, if any.
-      for (let s: Fiber | null = f.sibling; s; s = s.sibling) {
-        const d = firstDomNode(s)
-        if (d && d.parentNode === domParent) { a = d; break }
-      }
-    }
-    renderFiber(f, domParent, a)
-  }
+  // New siblings have no DOM yet, so searching them for an anchor cannot help.
+  // An empty replacement has no new chain. The old children remain linked
+  // until cleanup below, and must not render again on their way out.
+  if (prevNewFiber) renderChildChain(parent, domParent, anchor, hydrating || existing.length === 0)
 
   if (!prevNewFiber) parent.child = null
   else prevNewFiber.sibling = null
@@ -535,13 +606,6 @@ export function reconcileChildren(
         structurallyChanged = true
       }
     }
-    // Leftover keyed
-    for (const f of keyed.values()) {
-      if (!claimed.has(f)) {
-        unmountFiber(f, domParent)
-        structurallyChanged = true
-      }
-    }
   }
 
   // During hydration, DOM is already in document order from the cursor-driven
@@ -560,14 +624,49 @@ export function reconcileChildren(
   }
 }
 
+function renderChildChain(
+  parent: Fiber,
+  domParent: Node,
+  anchor: Node | null,
+  skipAnchors: boolean,
+): void {
+  for (let f = parent.child; f; f = f.sibling) {
+    let nextAnchor = anchor
+    if (!skipAnchors) {
+      for (let sibling = f.sibling; sibling; sibling = sibling.sibling) {
+        const dom = firstDomNode(sibling, domParent)
+        if (dom) {
+          nextAnchor = dom
+          break
+        }
+      }
+    }
+    renderFiber(f, domParent, nextAnchor)
+  }
+}
+
 function placeChildrenInOrder(parent: Fiber, domParent: Node, anchor: Node | null): void {
-  const doms: Node[] = []
   let c = parent.child
+  // One direct DOM child already at its exact anchor needs no collection.
+  if ((!currentCommit || domParent === preparedParent) && c && !c.sibling && (c.tag === FiberTag.Host || c.tag === FiberTag.Text) &&
+    c.dom?.parentNode === domParent && c.dom.nextSibling === anchor) return
+  const doms: Node[] = []
   while (c) {
     collectHostDoms(c, doms)
     c = c.sibling
   }
 
+  if (currentCommit && domParent !== preparedParent) {
+    if (doms.length) queuePlacement(doms, domParent, anchor)
+  } else placeDomsInOrder(doms, domParent, anchor)
+}
+
+function queuePlacement(doms: Node[], parent: Node, anchor: Node | null): void {
+  queueMutation(() => placeDomsInOrder(doms, parent, anchor))
+}
+
+function placeDomsInOrder(doms: Node[], domParent: Node, anchor: Node | null): void {
+
   // Pre-check: if our fiber-owned DOM is already in document order within
   // domParent AND the trailing anchor matches, no reorder is needed. This is
   // the common case on stable re-renders, and avoids detaching/re-attaching
@@ -579,7 +678,7 @@ function placeChildrenInOrder(parent: Fiber, domParent: Node, anchor: Node | nul
       current = current!.nextSibling
       // Skip foreign nodes (SSR-injected scripts, dev-styles) between owned
       // fiber DOMs — they should stay where they are.
-      while (current && !doms.includes(current as Node)) {
+      while (current && current !== doms[i] && !doms.includes(current as Node)) {
         current = current.nextSibling
       }
       if (current !== doms[i]) inOrder = false
@@ -636,6 +735,7 @@ function collectHostDoms(fiber: Fiber, out: Node[]): void {
     collectHostDoms(c, out)
     c = c.sibling
   }
+  if (fiber.tag === FiberTag.Suspense && fiber.ms?.f) collectHostDoms(fiber.ms.f, out)
 }
 
 function collectChildren(parent: Fiber): Fiber[] {
@@ -711,12 +811,27 @@ export function getForceRerenderingFiber(): Fiber | null {
 
 registerRenderer(FiberTag.Text, renderText)
 registerRenderer(FiberTag.Host, renderHost)
+registerRenderer(FiberTag.Resource, renderHost)
 registerRenderer(FiberTag.Function, renderFunction)
 registerRenderer(FiberTag.Fragment, renderFragment)
 
 export function renderFiber(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  // Memo consumes pending state when it delegates to its inner renderer.
+  if (fiber.tag !== FiberTag.Memo) fiber.dy = false
+  fiber.root ||= currentRoot || findRoot(fiber)
+  if (fiber.root?.sp && fiber.parent?.ld && fiber.mp === null) setLayoutDisconnected(fiber, true)
+  if (fiber.root?.a) CAPABILITIES.prepareActivityFiber(fiber)
   const fn = RENDERERS[fiber.tag]
-  if (fn) fn(fiber, domParent, anchor)
+  try {
+    if (fn) fn(fiber, domParent, anchor)
+  } catch (error) {
+    removeStagedCommits(fiber)
+    if (currentRoot?.h || error instanceof RenderErrorCapture || error instanceof RenderSuspenseCapture || isHydrationBailout(error)) throw error
+    if (isThenable(error)) handleSuspended(fiber, error)
+    else handleErrorInRender(fiber, error)
+  }
+  if (fiber.root?.a) CAPABILITIES.syncActivity(fiber)
+  if (lastStagedFiber === fiber) flushFiberCommits(fiber)
 }
 
 function renderText(fiber: Fiber, domParent: Node, anchor: Node | null): void {
@@ -729,32 +844,62 @@ function renderText(fiber: Fiber, domParent: Node, anchor: Node | null): void {
       fiber.dom = document.createTextNode(text)
       insertInto(domParent, fiber.dom, anchor)
     }
+    updateFragmentHost(fiber, true)
   } else {
     // Past the fast path, and adoptTextDom already realigned `.data` on
     // hydration — `.data !== text` here is guaranteed, so write directly.
-    ;(fiber.dom as Text).data = text
+    queueText(fiber.dom as Text, text)
   }
   fiber.mp = text
   // dy cleared at rerender start; leaving true lets mid-render schedule persist
 }
 
 function renderHost(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const hadDom = !!fiber.dom
   const props = fiber.pp ?? {}
   const prev = fiber.mp ?? {}
   const type = fiber.type as string
   const isSvg = type === 'svg' || (domParent as Element).namespaceURI === 'http://www.w3.org/2000/svg'
+  const isResource = fiber.tag === FiberTag.Resource
+  const canAcquire = !isSvg && (isResource || !fiber.mp) && resourceKind(type, props)
+  if (isResource || canAcquire) {
+    fiber.tag = FiberTag.Resource
+    if (canAcquire) {
+      let container: Node = domParent.nodeType === 9 ? domParent : domParent.ownerDocument!
+      if (type !== 'script') {
+        // Host assembly may still be detached. Style ownership follows the
+        // logical root or nearest portal, not that temporary DOM tree.
+        container = fiber.root?.c || domParent
+        for (let parent = fiber.parent; parent; parent = parent.parent) {
+          if (parent.tag === FiberTag.Portal) { container = parent.pp.container; break }
+        }
+      }
+      queueMutation(() => {
+        const resource = acquireResource(type, props, container)
+        fiber.sn ||= resource
+      })
+    }
+    if (fiber.mp) syncRefIfChanged(fiber, fiber.sn)
+    else attachRef(fiber, null)
+    fiber.mp = props
+    return
+  }
 
   // <select value> must be applied AFTER children mount — setting `.value`
   // on a `<select>` with no matching `<option>` yet resets it to empty. Same
   // for `defaultValue` on first mount. Stash and replay.
   const isSelect = type === 'select'
+  const isInput = !isSvg && type === 'input'
+  const isTextarea = !isSvg && type === 'textarea'
+  const deferValue = isSelect || isInput || isTextarea
+  let hydrated = false
   const deferredSelectValue =
     isSelect && (props.value !== undefined || props.defaultValue !== undefined)
       ? props.value !== undefined ? props.value : props.defaultValue
       : undefined
 
   if (!fiber.dom) {
-    const hydrated = currentRoot?.h ? adoptHostDom(fiber, fiber.parent!) : false
+    hydrated = currentRoot?.h ? adoptHostDom(fiber, fiber.parent!) : false
     if (!hydrated) {
       fiber.dom = createHostNode(type, isSvg)
       // Two passes so form-control attributes (notably <input type>) are in
@@ -763,7 +908,7 @@ function renderHost(fiber: Fiber, domParent: Node, anchor: Node | null): void {
       // → `input` vs `change`); binding before `type` is applied would
       // attach to the wrong event for checkbox/radio/file inputs.
       for (const k in props) {
-        if (isSelect && (k === 'value' || k === 'defaultValue')) continue
+        if ((deferValue && (k === 'value' || k === 'defaultValue')) || (isInput && (k === 'checked' || k === 'defaultChecked' || k === 'name'))) continue
         if (isEventProp(k)) continue
         setProp(fiber.dom as Element, k, props[k], undefined, isSvg)
       }
@@ -771,45 +916,30 @@ function renderHost(fiber: Fiber, domParent: Node, anchor: Node | null): void {
         if (!isEventProp(k)) continue
         setProp(fiber.dom as Element, k, props[k], undefined, isSvg)
       }
+      if (isInput) {
+        syncInputValue(fiber.dom as HTMLInputElement, props)
+        setProp(fiber.dom as Element, 'name', props.name, undefined, false)
+      }
+      if (isTextarea) syncTextareaValue(fiber.dom as HTMLTextAreaElement, props, true)
       insertInto(domParent, fiber.dom, anchor)
     }
+    updateFragmentHost(fiber, true)
     attachRef(fiber, fiber.dom)
-  } else if (prev !== props) {
-    const el = fiber.dom as Element
-    // Single-pass diff. Defer changed event props into a small array so the
-    // `type-before-events` invariant the mount path needs (setEventHandler
-    // reads `el.type` to resolve onChange→input vs change) still holds when
-    // a render flips both `type` and an event handler in the same pass.
-    // The vast majority of host updates have no events at all (e.g. data-*
-    // attributes flipping on a stable list), so the deferred array stays
-    // null and we collapse to one for-in over `props`.
-    let deferredEvents: string[] | null = null
-    for (const k in props) {
-      if (isSelect && (k === 'value' || k === 'defaultValue')) continue
-      if (isEventProp(k)) {
-        if (prev[k] !== props[k]) {
-          deferredEvents ||= []
-          deferredEvents.push(k)
-        }
-        continue
-      }
-      if (prev[k] !== props[k]) setProp(el, k, props[k], prev[k], isSvg)
-    }
-    // Removals — keys present in prev but not in props.
-    for (const k in prev) {
-      if (!(k in props)) setProp(el, k, undefined, prev[k], isSvg)
-    }
-    if (deferredEvents) {
-      for (let i = 0; i < deferredEvents.length; i++) {
-        const k = deferredEvents[i]!
-        setProp(el, k, props[k], prev[k], isSvg)
-      }
-    }
-    syncRefIfChanged(fiber, fiber.dom)
+  } else if (prev !== props && (isInput || isTextarea || hostNeedsUpdate(props, prev))) {
+    queueHostProps(fiber.dom as Element, props, prev, isSvg, isInput, isTextarea, deferValue)
   }
+  if (hadDom) syncRefIfChanged(fiber, fiber.dom)
 
   // Children go into this DOM node
-  reconcileChildren(fiber, childrenToArray(props.children), fiber.dom!, null)
+  // Textarea's value/defaultValue owns its text node, not child fibers.
+  if (!hadDom && !hydrated) {
+    // Only a host allocated by this render is safe to assemble eagerly.
+    // User-owned detached roots and portal containers still commit normally.
+    const previous = preparedParent
+    preparedParent = fiber.dom
+    try { reconcileChildren(fiber, isTextarea ? [] : childrenToArray(props.children), fiber.dom!, null) }
+    finally { preparedParent = previous }
+  } else reconcileChildren(fiber, isTextarea ? [] : childrenToArray(props.children), fiber.dom!, null)
 
   // During hydration, if after reconciling all client-expected children we
   // still have server DOM left in the cursor for this host, that's a
@@ -820,7 +950,7 @@ function renderHost(fiber: Fiber, domParent: Node, anchor: Node | null): void {
     const parentTag = (fiber.type as string).toLowerCase()
     const hasOpaqueHydrationChildren =
       props.dangerouslySetInnerHTML != null ||
-      (parentTag === 'textarea' && (props.value != null || props.defaultValue != null))
+      isTextarea
     if (
       parentTag !== 'head' &&
       parentTag !== 'html' &&
@@ -835,7 +965,7 @@ function renderHost(fiber: Fiber, domParent: Node, anchor: Node | null): void {
               ? `Hydration mismatch: server rendered extra nodes inside <${parentTag}>.`
               : 'Hydration mismatch.',
           )
-          if (currentRoot.re) currentRoot.re(error)
+          if (currentRoot.re) currentRoot.re(error, { componentStack: null })
           abortHydration(error, fiber)
         }
       }
@@ -843,57 +973,86 @@ function renderHost(fiber: Fiber, domParent: Node, anchor: Node | null): void {
   }
 
   // Apply <select> value after options are mounted.
-  if (isSelect && deferredSelectValue !== undefined) {
-    const select = fiber.dom as HTMLSelectElement
-    if (Array.isArray(deferredSelectValue)) {
-      const asStrings = deferredSelectValue.map((v) => '' + v)
-      for (const opt of Array.from(select.options)) {
-        opt.selected = asStrings.includes(opt.value)
-      }
-    } else {
-      select.value = '' + deferredSelectValue
-    }
+  if (isSelect && !hydrated && deferredSelectValue !== undefined) {
+    queueSelectValue(fiber.dom as HTMLSelectElement, deferredSelectValue)
   }
 
   fiber.mp = props
   // dy cleared at rerender start; leaving true lets mid-render schedule persist
 }
 
-function renderFunction(fiber: Fiber, domParent: Node, anchor: Node | null): void {
-  const prevDispatcher = ReactSharedInternals.H
-  const prevFiber = ReactSharedInternals.F
-  const prevHook = ReactSharedInternals.K
-  const prevIndex = ReactSharedInternals.I
+function queueSelectValue(select: HTMLSelectElement, value: any): void {
+  queueMutation(() => {
+    if (Array.isArray(value)) {
+      const selected = new Set(value.map((v) => '' + v))
+      const options = select.options
+      for (let i = 0; i < options.length; i++) {
+        const opt = options[i]!
+        opt.selected = selected.has(opt.value)
+      }
+    } else {
+      select.value = '' + value
+    }
+  })
+}
 
-  ReactSharedInternals.H = makeDispatcher()
-  ReactSharedInternals.F = fiber
-  ReactSharedInternals.K = null
-  ReactSharedInternals.I = 0
+function hostNeedsUpdate(props: any, previous: any): boolean {
+  for (const key in props) {
+    if (props[key] !== previous[key] && key !== 'children' && key !== 'ref' && key !== 'key') return true
+  }
+  for (const key in previous) {
+    if (key !== 'children' && key !== 'ref' && key !== 'key' && !(key in props)) return true
+  }
+  return false
+}
 
-  let rendered: ReactNode
+function queueHostProps(el: Element, props: any, prev: any, isSvg: boolean, isInput: boolean, isTextarea: boolean, deferValue: boolean): void {
+  queueMutation(() => {
+    // Radio groups stay disconnected until type, value and checked agree.
+    if (isInput) setProp(el, 'name', '', undefined, false)
+    let events: string[] | undefined
+    for (const key in props) {
+      const next = props[key], previous = prev[key]
+      if (next === previous || key === 'children' || key === 'ref' || key === 'key' || (deferValue && (key === 'value' || key === 'defaultValue')) || (isInput && (key === 'checked' || key === 'defaultChecked' || key === 'name'))) continue
+      if (isEventProp(key)) {
+        (events ||= []).push(key)
+      } else setProp(el, key, next, previous, isSvg)
+    }
+    for (const key in prev) {
+      if (key === 'children' || key === 'ref' || key === 'key' || ((isInput || isTextarea) && (key === 'value' || key === 'defaultValue')) || (isInput && (key === 'checked' || key === 'defaultChecked' || key === 'name'))) continue
+      if (!(key in props)) setProp(el, key, undefined, prev[key], isSvg)
+    }
+    // Event resolution sees the new input type, as it does on mount.
+    if (events) for (const key of events) setProp(el, key, props[key], prev[key], isSvg)
+    if (isInput) {
+      syncInputValue(el as HTMLInputElement, props, prev)
+      setProp(el, 'name', props.name, prev.name, false)
+    } else if (isTextarea) syncTextareaValue(el as HTMLTextAreaElement, props)
+  })
+}
+
+function renderFunction(fiber: Fiber, domParent: Node, anchor: Node | null): void {
+  const canBail = fiber === forceRerenderingFiber && fiber.pp === fiber.mp
+  fiber.cx?.clear()
+  let rendered: ReactNode | typeof HOOK_BAILOUT
   let deferredForHydration = false
   try {
-    rendered = (fiber.type as Function)(fiber.pp ?? {})
+    rendered = renderWithHooks(fiber, fiber.type, fiber.pp ?? {}, undefined, canBail)
   } catch (e: any) {
     if (isThenable(e)) {
       if (deferHydration(fiber, e)) {
         deferredForHydration = true
       } else {
-        CAPABILITIES.handleSuspended(fiber, e)
-        rendered = null
+        handleSuspended(fiber, e)
+        return
       }
     } else {
       handleErrorInRender(fiber, e)
       return
     }
-  } finally {
-    ReactSharedInternals.H = prevDispatcher
-    ReactSharedInternals.F = prevFiber
-    ReactSharedInternals.K = prevHook
-    ReactSharedInternals.I = prevIndex
   }
 
-  if (deferredForHydration) return
+  if (deferredForHydration || rendered === HOOK_BAILOUT) return
 
   reconcileChildren(fiber, childrenToArray(rendered), domParent, anchor)
   fiber.mp = fiber.pp
@@ -930,6 +1089,24 @@ export function deferHydration(fiber: Fiber, thenable: Promise<any>): boolean {
 function renderFragment(fiber: Fiber, domParent: Node, anchor: Node | null): void {
   const props = fiber.pp ?? {}
   reconcileChildren(fiber, childrenToArray(props.children), domParent, anchor)
+  if (fiber.type === REACT_FRAGMENT_TYPE) {
+    if (fiber.ref && !fiber.sn) fiber.sn = createFragmentInstance(fiber)
+    const previous = fiber.ms?.ref
+    if (previous !== fiber.ref) {
+      if (fiber.cu) {
+        const cleanups = fiber.cu
+        queueMutation(() => {
+          for (const cleanup of cleanups) {
+            try { cleanup() } catch (error) { handleCommitError(fiber, error) }
+          }
+        })
+        fiber.cu = null
+      }
+      detachRef(previous, fiber)
+      fiber.ms = { ...fiber.ms, ref: fiber.ref }
+      if (fiber.sn) attachRef(fiber, fiber.sn)
+    }
+  }
   fiber.mp = props
   // dy cleared at rerender start; leaving true lets mid-render schedule persist
 }
@@ -960,11 +1137,35 @@ function defaultHandleSuspended(fiber: Fiber, thenable: Promise<any>): void {
 export interface Capabilities {
   handleSuspended: (fiber: Fiber, thenable: Promise<any>) => void
   readContext: (fiber: Fiber, ctx: any) => any
+  isActivityHidden: (fiber: Fiber) => boolean
+  activityIsDisconnected: (fiber: Fiber) => boolean
+  prepareActivityFiber: (fiber: Fiber) => void
+  syncActivity: (fiber: Fiber) => void
 }
 
 const CAPABILITIES: Capabilities = {
   handleSuspended: defaultHandleSuspended,
   readContext: defaultReadContext,
+  isActivityHidden: () => false,
+  activityIsDisconnected: () => false,
+  prepareActivityFiber: () => {},
+  syncActivity: () => {},
+}
+
+export function isActivityHidden(fiber: Fiber): boolean {
+  return !!(fiber.root ?? currentRoot ?? findRoot(fiber))?.a && CAPABILITIES.isActivityHidden(fiber)
+}
+
+export function activityIsDisconnected(fiber: Fiber): boolean {
+  return !!fiber.root?.a && CAPABILITIES.activityIsDisconnected(fiber)
+}
+
+export function layoutIsDisconnected(fiber: Fiber): boolean {
+  return !!fiber.ld || activityIsDisconnected(fiber)
+}
+
+export function rememberActivityEffect(fiber: Fiber, hook: Hook, effect: Effect): void {
+  if (fiber.root?.a || (fiber.root?.sp && effect.t === 1 && !effect.s)) rememberRetainedEffect(fiber, hook, effect)
 }
 
 export function installCapability<K extends keyof Capabilities>(
@@ -977,35 +1178,119 @@ export function installCapability<K extends keyof Capabilities>(
 // Wrapper for features that catch thrown thenables inside their render
 // functions. Delegates to the installed Suspense capability.
 export function handleSuspended(fiber: Fiber, thenable: Promise<any>): void {
+  if (isActivityHidden(fiber) && !findSuspenseBoundary(fiber)) {
+    defaultHandleSuspended(fiber, thenable)
+    return
+  }
   CAPABILITIES.handleSuspended(fiber, thenable)
 }
 
+export class RenderSuspenseCapture {
+  constructor(public boundary: Fiber) {}
+}
+
+export function findSuspenseBoundary(fiber: Fiber): Fiber | null {
+  let child = fiber
+  for (let parent = fiber.parent; parent; parent = parent.parent) {
+    if (parent.tag === FiberTag.Suspense && parent.ms?.f !== child) return parent
+    // Hidden prerendering cannot activate a fallback outside its Activity.
+    if (parent.tag === FiberTag.Activity && parent.pp?.mode === 'hidden') return null
+    child = parent
+  }
+  return null
+}
+
+export class RenderErrorCapture {
+  stack: string
+  constructor(public boundary: Fiber, public error: unknown, source: Fiber = boundary) {
+    this.stack = componentStack(source)
+  }
+}
+
+function captureError(capture: RenderErrorCapture): void {
+  const fiber = capture.boundary
+  fiber.ms = { ...fiber.ms, error: capture }
+  scheduleUpdate(fiber)
+}
+
+function findErrorBoundary(fiber: Fiber): Fiber | null {
+  for (let parent = fiber.parent; parent; parent = parent.parent) {
+    if (parent.um || parent.pd) continue
+    const instance = parent.sn
+    if (instance?._fiber === parent && (parent.ms?.b?.getDerivedStateFromError || instance.componentDidCatch)) return parent
+  }
+  return null
+}
+
+function captureRootError(root: FiberRoot, stack: string, error: unknown): void {
+  const errors = root.er ||= []
+  if (!errors.length) root.u = undefined
+  errors.push({ error, stack })
+  scheduleUpdate(root.r)
+}
+
+function flushRootErrors(root: FiberRoot): void {
+  const errors = root.er!
+  root.er = undefined
+  if (root.r.mp === null) queueMutation(() => { root.c.textContent = '' })
+  renderRoot(root, null)
+  queueCommitEffects(() => {
+    for (const captured of errors) {
+      try {
+        if (root.ue) root.ue(captured.error, { componentStack: captured.stack })
+        else if (typeof reportError === 'function') reportError(captured.error)
+        else queueMicrotask(() => { throw captured.error })
+      } catch (error) { setTimeout(() => { throw error }) }
+    }
+  })
+  if (root.u) pendingRoots.add(root)
+}
+
+export function recoverRootError(error: unknown, abort?: () => void): boolean {
+  if (!(error instanceof RenderErrorCapture) || error.boundary.tag !== FiberTag.Root) return false
+  const root = error.boundary.root!
+  abort?.()
+  discardPendingWork(root)
+  discardPendingEffects(root)
+  captureRootError(root, error.stack, error.error)
+  return true
+}
+
+export function handleCommitError(fiber: Fiber, error: unknown): void {
+  const boundary = findErrorBoundary(fiber)
+  if (boundary) {
+    captureError(new RenderErrorCapture(boundary, error, fiber))
+    return
+  }
+  const root = findRoot(fiber)
+  if (root) captureRootError(root, componentStack(fiber), error)
+  else queueMicrotask(() => { throw error })
+}
+
 export function handleErrorInRender(fiber: Fiber, err: any): void {
+  if (err instanceof RenderErrorCapture) throw err
+  removeStagedCommits(fiber)
+  for (const queue of [pendingEffects, pendingInsertionEffects, pendingCommits]) {
+    for (let index = queue.length - 1; index >= 0; index--) {
+      if (queue[index]![0] === fiber) removePendingEffect(queue, index)
+    }
+  }
   if (currentRoot?.h) {
     abortHydration(err, fiber)
   }
   // Bubble to nearest class boundary with getDerivedStateFromError / componentDidCatch
-  let f: Fiber | null = fiber.parent
-  while (f) {
-    if (f.tag === FiberTag.Class) {
-      const Ctor = f.type as any
-      const instance = f.sn
-      if (Ctor.getDerivedStateFromError) {
-        const update = Ctor.getDerivedStateFromError(err)
-        instance.state = { ...instance.state, ...update }
-      }
-      if (instance.componentDidCatch) {
-        try {
-          instance.componentDidCatch(err, { componentStack: '' })
-        } catch {}
-      }
-      scheduleUpdate(f)
-      return
-    }
-    f = f.parent
+  const boundary = findErrorBoundary(fiber)
+  if (boundary) {
+    const capture = new RenderErrorCapture(boundary, err, fiber)
+    if (currentCommit) throw capture
+    captureError(capture)
+    return
   }
-  // No boundary — report to root
-  if (currentRoot?.ue) currentRoot.ue(err)
+  // Abort the prepared render. Its mutation/effect queues must not commit
+  // before the root is cleared and the error callback runs.
+  const root = currentRoot ?? findRoot(fiber)
+  if (root && currentCommit && (flushing || root.ue)) throw new RenderErrorCapture(root.r, err, fiber)
+  if (root?.ue) root.ue(err, { componentStack: componentStack(fiber) })
   else throw err
 }
 
@@ -1017,34 +1302,48 @@ export function isThenable(x: any): x is Promise<any> {
 // Unmount
 // ---------------------------------------------------------------------------
 
-export function unmountFiber(fiber: Fiber, domParent: Node): void {
+export function unmountFiber(fiber: Fiber, domParent: Node, remove = true): void {
+  if (fiber.um) return
+  if (currentCommit) return queueUnmount(fiber, domParent, remove)
+  removeStagedCommits(fiber)
+  if (fiber.type === REACT_FRAGMENT_TYPE && fiber.sn) {
+    if (fiber.cu) {
+      for (const cleanup of fiber.cu) {
+        try { cleanup() } catch (error) { handleCommitError(fiber, error) }
+      }
+      fiber.cu = null
+    }
+    detachRef(fiber.cr ?? fiber.ref, fiber)
+  }
   fiber.um = true
-  // Recurse first
-  let c = fiber.child
-  while (c) {
-    const next = c.sibling
-    unmountFiber(c, fiber.tag === FiberTag.Host ? fiber.dom! : domParent)
-    c = next
+  if (fiber.tag === FiberTag.Host || fiber.tag === FiberTag.Text) updateFragmentHost(fiber, false)
+  if (fiber.type === REACT_FRAGMENT_TYPE && fiber.sn) fiber.sn.dispose()
+  if (fiber.tag === FiberTag.Suspense && fiber.ms?.f) {
+    unmountFiber(fiber.ms.f, domParent, remove)
+    fiber.ms.f = null
   }
-  fiber.child = null
-
   // Run cu (fx + layout fx)
   if (fiber.cu) {
-    for (const cleanup of fiber.cu) {
+    const cleanups = fiber.cu
+    fiber.cu = null
+    for (const cleanup of cleanups) {
       try {
         cleanup()
       } catch (e) {
-        if (currentRoot?.re) currentRoot.re(e)
+        handleCommitError(fiber, e)
       }
     }
-    fiber.cu = null
   }
 
-  if (fiber.tag === FiberTag.Class && fiber.sn?.componentWillUnmount) {
-    try {
-      fiber.sn.componentWillUnmount()
-    } catch (e) {
-      if (currentRoot?.re) currentRoot.re(e)
+  if (fiber.sn?._fiber === fiber) {
+    const committed = fiber.ms?.c
+    if (committed) { fiber.sn.props = committed.props; fiber.sn.state = committed.state }
+    if (fiber.sn.componentWillUnmount && !layoutIsDisconnected(fiber)) {
+      try {
+        fiber.sn.componentWillUnmount()
+      } catch (e) {
+        handleCommitError(fiber, e)
+      }
     }
     fiber.sn._fiber = null
     fiber.sn._enqueueUpdate = null
@@ -1052,16 +1351,41 @@ export function unmountFiber(fiber: Fiber, domParent: Node): void {
   }
 
   // Detach ref
-  if (fiber.ref) detachRef(fiber.ref)
+  if (fiber.cr ?? fiber.ref) detachRef(fiber.cr ?? fiber.ref, fiber)
+
+  let c = fiber.child
+  while (c) {
+    const next = c.sibling
+    unmountFiber(c, fiber.tag === FiberTag.Host ? fiber.dom! : domParent, fiber.tag === FiberTag.Portal || (remove && fiber.tag !== FiberTag.Host))
+    c = next
+  }
+  fiber.child = null
 
   // Remove DOM if host
-  if (fiber.tag === FiberTag.Host && fiber.dom && fiber.dom.parentNode) {
-    fiber.dom.parentNode.removeChild(fiber.dom)
-  } else if (fiber.tag === FiberTag.Text && fiber.dom && fiber.dom.parentNode) {
+  if (remove && (fiber.tag === FiberTag.Host || fiber.tag === FiberTag.Text) && fiber.dom?.parentNode) {
     fiber.dom.parentNode.removeChild(fiber.dom)
   }
 }
 
+function queueUnmount(fiber: Fiber, domParent: Node, remove: boolean): void {
+  if (fiber.pd) return
+  // Keep committed DOM available for snapshots, but stop deleted work now.
+  const deleted: Fiber[] = []
+  markPendingDeletion(fiber, deleted)
+  const restore = () => { for (const child of deleted) child.pd = false }
+  onCommitRollback(restore)
+  onCommitFailure(restore)
+  queueMutation(() => unmountFiber(fiber, domParent, remove))
+}
+
+function markPendingDeletion(fiber: Fiber, deleted: Fiber[]): void {
+  if (fiber.pd) return
+  fiber.pd = true
+  deleted.push(fiber)
+  for (let child = fiber.child; child; child = child.sibling) markPendingDeletion(child, deleted)
+  if (fiber.tag === FiberTag.Suspense && fiber.ms?.f) markPendingDeletion(fiber.ms.f, deleted)
+}
+
 export function unmountAllChildren(parent: Fiber, domParent: Node): void {
   let c = parent.child
   while (c) {
@@ -1077,6 +1401,7 @@ export function unmountAllChildren(parent: Fiber, domParent: Node): void {
 // ---------------------------------------------------------------------------
 
 function insertInto(parent: Node, node: Node, anchor: Node | null): void {
+  if (currentCommit && parent !== preparedParent) return queueInsertion(parent, node, anchor)
   const projectedHeadParent = getDocumentHeadInsertionParent(parent, node)
   if (projectedHeadParent) {
     projectedHeadParent.appendChild(node)
@@ -1094,6 +1419,10 @@ function insertInto(parent: Node, node: Node, anchor: Node | null): void {
   }
 }
 
+function queueInsertion(parent: Node, node: Node, anchor: Node | null): void {
+  queueMutation(() => insertInto(parent, node, anchor))
+}
+
 const DOCUMENT_HEAD_TAGS = new Set(['base', 'link', 'meta', 'script', 'style', 'title'])
 
 function getDocumentHeadInsertionParent(parent: Node, node: Node): HTMLHeadElement | null {
@@ -1103,7 +1432,7 @@ function getDocumentHeadInsertionParent(parent: Node, node: Node): HTMLHeadEleme
   return (parent as Document).head
 }
 
-function getHostParent(fiber: Fiber): Node {
+export function getHostParent(fiber: Fiber): Node {
   let p = fiber.parent
   while (p) {
     if (p.tag === FiberTag.Host) return p.dom!
@@ -1127,35 +1456,32 @@ function getHostParent(fiber: Fiber): Node {
   throw new Error()
 }
 
-function getAnchor(fiber: Fiber): Node | null {
-  // Return the first DOM node that comes after this fiber within the host parent
-  let f: Fiber | null = fiber.sibling
-  while (f) {
-    const d = firstDomNode(f)
-    if (d) return d
-    f = f.sibling
-  }
-  // Ascend
-  let p = fiber.parent
-  while (p && p.tag !== FiberTag.Host && p.tag !== FiberTag.Root && p.tag !== FiberTag.Portal) {
-    if (p.sibling) {
-      const d = firstDomNode(p.sibling)
+export function getAnchor(fiber: Fiber, domParent: Node): Node | null {
+  let p: Fiber | null = fiber
+  while (p) {
+    let sibling = p.sibling
+    while (sibling) {
+      const d = firstDomNode(sibling, domParent)
       if (d) return d
+      sibling = sibling.sibling
     }
     p = p.parent
+    if (p?.tag === FiberTag.Host || p?.tag === FiberTag.Root || p?.tag === FiberTag.Portal) break
   }
   return null
 }
 
-function firstDomNode(fiber: Fiber): Node | null {
-  if (fiber.tag === FiberTag.Host || fiber.tag === FiberTag.Text) return fiber.dom
+function firstDomNode(fiber: Fiber, domParent: Node): Node | null {
+  if (fiber.tag === FiberTag.Host || fiber.tag === FiberTag.Text) {
+    return fiber.dom?.parentNode === domParent ? fiber.dom : null
+  }
   let c = fiber.child
   while (c) {
-    const d = firstDomNode(c)
+    const d = firstDomNode(c, domParent)
     if (d) return d
     c = c.sibling
   }
-  return null
+  return fiber.tag === FiberTag.Suspense && fiber.ms?.f ? firstDomNode(fiber.ms.f, domParent) : null
 }
 
 // ---------------------------------------------------------------------------
@@ -1179,36 +1505,57 @@ function defaultReadContext(_fiber: Fiber, ctx: any): any {
 // Refs
 // ---------------------------------------------------------------------------
 
-function attachRef(fiber: Fiber, value: any): void {
+export function attachRef(fiber: Fiber, value: any): void {
   const ref = fiber.ref ?? (fiber.pp?.ref ?? null)
   if (!ref) return
-  if (typeof ref == 'function') {
-    // Match React's commit-phase semantics: callback refs run after render
-    // (during the layout/commit phase), not during render. Calling them
-    // synchronously here breaks libraries that assert no event handlers run
-    // during render (e.g. base-ui's useStableCallback trampoline).
-    scheduleLifecycle(fiber, () => {
+  if (isActivityHidden(fiber) || layoutIsDisconnected(fiber)) return
+  stageCommit(fiber, () => {
+    if (fiber.tag === FiberTag.Resource) value = fiber.sn
+    fiber.cr = ref
+    if (typeof ref == 'function') {
+      // Callback refs run during commit, after insertion effects install
+      // event callback implementations and in subtree layout order.
       const cleanup = ref(value)
       fiber.cu ||= []
-      fiber.cu.push(typeof cleanup == 'function' ? cleanup : () => ref(null))
-    })
-  } else {
-    ref.current = value
-  }
+      const detach = typeof cleanup == 'function' ? cleanup : () => ref(null)
+      fiber.rc = detach
+      fiber.cu.push(detach)
+    } else {
+      ref.current = value
+    }
+  }, true)
 }
 
-function syncRefIfChanged(fiber: Fiber, value: any): void {
+export function syncRefIfChanged(fiber: Fiber, value: any): void {
   const ref = fiber.ref ?? (fiber.pp?.ref ?? null)
-  if (!ref) return
-  if (typeof ref === 'object' && ref.current !== value) ref.current = value
+  if (!ref && !fiber.cr) return
+  if (isActivityHidden(fiber) || layoutIsDisconnected(fiber)) return
+  const previous = fiber.cr ?? null
+  if (previous !== ref) {
+    const cleanup = fiber.rc
+    queueMutation(() => {
+      if (cleanup) {
+        const index = fiber.cu?.indexOf(cleanup) ?? -1
+        if (index >= 0) fiber.cu!.splice(index, 1)
+        fiber.rc = null
+        try { cleanup() } catch (error) { handleCommitError(fiber, error) }
+      }
+      detachRef(previous, fiber)
+      fiber.cr = null
+    })
+    attachRef(fiber, value)
+  } else if (ref && typeof ref === 'object' && ref.current !== value) attachRef(fiber, value)
 }
 
-function detachRef(ref: any): void {
+export function detachRef(ref: any, fiber?: Fiber): void {
   // Function refs are handled via fiber.cu (queued in attachRef during
   // the commit phase): the cleanup either invokes the user-returned cleanup
   // fn or calls ref(null). Calling ref(null) here would double-fire it.
   if (ref && typeof ref === 'object') {
-    ref.current = null
+    queueMutation(() => {
+      try { ref.current = null }
+      catch (error) { if (fiber) handleCommitError(fiber, error); else throw error }
+    })
   }
 }
 
@@ -1217,46 +1564,146 @@ function detachRef(ref: any): void {
 // ---------------------------------------------------------------------------
 
 const pendingEffects: Array<[Fiber, Effect]> = []
-const pendingLayoutEffects: Array<[Fiber, Effect]> = []
-const pendingLifecycles: Array<() => void> = []
+const pendingInsertionEffects: Array<[Fiber, Effect]> = []
+type LayoutCommit = [Fiber, Effect | (() => void), boolean]
+const pendingCommits: LayoutCommit[] = []
+const stagedCommits = new Map<Fiber, LayoutCommit[]>()
+// Track only fibers with queued work. A ref-less descendant can finish with
+// one identity check, even while an ancestor has a pending layout effect.
+const stagedFibers: Fiber[] = []
+let lastStagedFiber: Fiber | undefined
+
+// Appends are covered by checkpoint lengths. Only removals need to retain
+// the affected entry, and only while a render has a rollback checkpoint.
+function removePendingEffect(queue: Array<[Fiber, Effect] | LayoutCommit>, index: number): void {
+  const entry = queue[index]!
+  queue.splice(index, 1)
+  if (currentCommit?.c.length) onCommitRollback(() => { queue.splice(index, 0, entry) })
+}
 
-export function enqueueEffect(fiber: Fiber, effect: Effect): void {
-  if (effect.t) {
-    pendingLayoutEffects.push([fiber, effect])
+function stageCommit(fiber: Fiber, work: Effect | (() => void), ref = false): void {
+  let entries = stagedCommits.get(fiber)
+  if (!entries) {
+    stagedCommits.set(fiber, entries = [])
+    stagedFibers.push(fiber)
+    lastStagedFiber = fiber
+  }
+  entries.push([fiber, work, ref])
+}
+
+function removeStagedCommits(fiber: Fiber): void {
+  if (!stagedCommits.delete(fiber)) return
+  if (lastStagedFiber === fiber) stagedFibers.pop()
+  else stagedFibers.splice(stagedFibers.lastIndexOf(fiber), 1)
+  lastStagedFiber = stagedFibers[stagedFibers.length - 1]
+}
+
+// Rendering already visits the tree in order. Completing a fiber stages its
+// layout work after its children, without another tree walk at commit time.
+export function flushFiberCommits(fiber: Fiber): void {
+  const entries = stagedCommits.get(fiber)
+  if (!entries) return
+  removeStagedCommits(fiber)
+  if (fiber.type === REACT_FRAGMENT_TYPE) {
+    // React attaches Fragment refs before their descendants. Only referenced
+    // Fragments need to locate this insertion point among queued commits.
+    let index = pendingCommits.length
+    outer: for (let i = 0; i < pendingCommits.length; i++) {
+      for (let parent = pendingCommits[i]![0].parent; parent; parent = parent.parent) {
+        if (parent === fiber) { index = i; break outer }
+      }
+    }
+    if (index < pendingCommits.length && currentCommit?.c.length) {
+      const count = entries.length
+      onCommitRollback(() => { pendingCommits.splice(index, count) })
+    }
+    pendingCommits.splice(index, 0, ...entries)
+  } else if (fiber.tag === FiberTag.Class || fiber.sn?._fiber === fiber) {
+    for (const entry of entries) if (!entry[2]) pendingCommits.push(entry)
+    for (const entry of entries) if (entry[2]) pendingCommits.push(entry)
   } else {
-    pendingEffects.push([fiber, effect])
+    for (const entry of entries) pendingCommits.push(entry)
   }
 }
 
-export function scheduleLifecycle(_fiber: Fiber, fn: () => void): void {
-  pendingLifecycles.push(fn)
+export function enqueueEffect(fiber: Fiber, effect: Effect): void {
+  if (effect.t !== 2 && (isActivityHidden(fiber) || activityIsDisconnected(fiber) || (effect.t === 1 && !effect.s && fiber.ld))) return
+  if (effect.t === 2) pendingInsertionEffects.push([fiber, effect])
+  else if (effect.t === 1) stageCommit(fiber, effect)
+  else pendingEffects.push([fiber, effect])
+}
+
+export function scheduleLifecycle(fiber: Fiber, fn: () => void): void {
+  if (isActivityHidden(fiber) || layoutIsDisconnected(fiber)) return
+  stageCommit(fiber, fn)
 }
 
 export function runEffects(root: FiberRoot): void {
-  // Layout fx synchronously
-  while (pendingLayoutEffects.length) {
-    const [fiber, effect] = pendingLayoutEffects.shift()!
-    runEffect(fiber, effect, root)
-  }
-  // Then lifecycles
-  while (pendingLifecycles.length) {
-    const fn = pendingLifecycles.shift()!
-    try {
-      fn()
-    } catch (e) {
-      if (root.ce) root.ce(e)
+  if (root.fr) refreshFragmentInstances(root)
+  if (!pendingInsertionEffects.length && !pendingCommits.length && !pendingEffects.length) return
+  flushEffects(root)
+}
+
+function flushEffects(root: FiberRoot): void {
+  const insertion = pendingInsertionEffects.splice(0)
+  const layout = pendingCommits.splice(0)
+  const batch = pendingEffects.splice(0)
+  if (currentCommit?.c.length) onCommitRollback(() => {
+    // A nested render can drain these queues before an enclosing attempt
+    // fails. Reuse the captured batches, then older checkpoints trim tails.
+    pendingInsertionEffects.unshift(...insertion)
+    pendingCommits.unshift(...layout)
+    pendingEffects.unshift(...batch)
+  })
+  queueCommitEffects(() => {
+  for (const [fiber, effect] of insertion) runEffect(fiber, effect, root)
+  if (layout.length) {
+    for (const [fiber, work] of layout) {
+      if (typeof work !== 'function' && !fiber.um && !isActivityHidden(fiber) && !layoutIsDisconnected(fiber)) work.d?.()
     }
+    const runLayout = () => {
+      for (const [fiber, work] of layout) {
+        if (typeof work !== 'function') runEffect(fiber, work, root)
+        else if (!fiber.um && !isActivityHidden(fiber) && !layoutIsDisconnected(fiber)) {
+          try { work() } catch (error) { handleCommitError(fiber, error) }
+        }
+      }
+    }
+    if (!deferTransitionLayout(runLayout)) runLayout()
   }
   // Passive fx on microtask
-  if (pendingEffects.length) {
-    const batch = pendingEffects.splice(0)
-    queueMicrotask(() => {
+  if (batch.length) {
+    const passive = () => {
       for (const [fiber, effect] of batch) runEffect(fiber, effect, root)
-    })
+    }
+    if (!deferTransitionPassive(passive)) queueMicrotask(passive)
   }
+  })
 }
 
+setCommitCheckpointHook(() => {
+  // A parent allocated before this savepoint can contain eager insertions
+  // from an abandoned child render. Restore only that new, detached host.
+  const parent = preparedParent as Element | null
+  const children = parent && Array.from(parent.childNodes)
+  const effects = pendingEffects.length, insertion = pendingInsertionEffects.length, commits = pendingCommits.length
+  const staged = new Map([...stagedCommits].map(([fiber, work]) => [fiber, work.slice()]))
+  const stack = stagedFibers.slice(), last = lastStagedFiber
+  onCommitRollback(() => {
+    if (parent) parent.replaceChildren(...children!)
+    pendingEffects.length = effects
+    pendingInsertionEffects.length = insertion
+    pendingCommits.length = commits
+    stagedCommits.clear()
+    for (const [fiber, work] of staged) stagedCommits.set(fiber, work)
+    stagedFibers.splice(0, stagedFibers.length, ...stack)
+    lastStagedFiber = last
+  })
+})
+
 function runEffect(fiber: Fiber, effect: Effect, root: FiberRoot): void {
+  if (fiber.um) return
+  if (effect.t !== 2 && (isActivityHidden(fiber) || activityIsDisconnected(fiber) || (effect.t === 1 && !effect.s && fiber.ld))) return
   try {
     const cleanup = effect.c()
     if (typeof cleanup == 'function') {
@@ -1264,7 +1711,7 @@ function runEffect(fiber: Fiber, effect: Effect, root: FiberRoot): void {
       fiber.cu.push(cleanup)
     }
   } catch (e) {
-    if (root.ce) root.ce(e)
+    handleCommitError(fiber, e)
   }
 }
 
diff --git b/dom/resource-hints.ts b/dom/resource-hints.ts
new file mode 100644
index 0000000..036ceae
--- /dev/null
+++ b/dom/resource-hints.ts
@@ -0,0 +1,115 @@
+import { resourceHintDispatcher, resourceURL, type ResourceHintKind, type ResourceHintOptions } from '../core/resource-hints'
+import { adoptResourceProps, getResources, insertResource, resourceAttribute, resourceSelector } from './resource-store'
+const requestOptions = 'integrity fetchPriority'
+
+function options(input: any, fields: string, as?: string): ResourceHintOptions {
+  const result: ResourceHintOptions = {}
+  for (const name of fields ? fields.split(' ') : []) {
+    const value = input?.[name]
+    if (typeof value === 'string') result[name] = value
+  }
+  const crossOrigin = input?.crossOrigin
+  if (as === 'font' || typeof crossOrigin === 'string') {
+    result.crossOrigin = as !== 'font' && crossOrigin === 'use-credentials' ? crossOrigin : ''
+  }
+  return result
+}
+
+function scriptDestination(as: string): boolean {
+  return /^(script|audioworklet|paintworklet|serviceworker|sharedworker|worker)$/.test(as)
+}
+
+function emit(kind: ResourceHintKind, href: string, props: ResourceHintOptions): void {
+  if (!href || resourceHintDispatcher.emit?.(kind, href, props) || typeof document === 'undefined') return
+  const resources = getResources(document)
+
+  const style = kind === 'stylesheet'
+  const script = kind === 'script' || kind === 'module-script'
+  const preload = kind === 'preload' || kind === 'modulepreload'
+  const as = props.as || 'script'
+  let selector: string
+  let tag = 'link'
+  if (style || script) {
+    selector = resourceSelector(href, style ? 'style' : 'script')
+    if (resources.instances.has(selector)) return
+    const existing = document.querySelector(selector)
+    if (existing) { resources.instances.set(selector, existing); return }
+    adoptResourceProps(props, resources.preloads.get(selector), script)
+    if (style) {
+      props = { rel: 'stylesheet', href, 'data-precedence': props.precedence!, ...props }
+      delete props.precedence
+    } else {
+      tag = 'script'
+      props = { src: href, async: '', ...(kind === 'module-script' ? { type: 'module' } : {}), ...props }
+    }
+  } else {
+    selector = `link[rel="${kind}"]`
+    let resource = ''
+    if (preload) {
+      selector += resourceAttribute('as', as)
+      if (as === 'image' && props.imageSrcSet) {
+        selector += resourceAttribute('imagesrcset', props.imageSrcSet)
+        if (typeof props.imageSizes === 'string') selector += resourceAttribute('imagesizes', props.imageSizes)
+      } else selector += resourceAttribute('href', href)
+      resource = (kind === 'preload' ? as === 'script' || as === 'style' : scriptDestination(as))
+        ? resourceSelector(href, as)
+        : ''
+    } else {
+      selector += resourceAttribute('href', href)
+      if (props.crossOrigin != null) selector += resourceAttribute('crossorigin', props.crossOrigin)
+    }
+    const key = resource || selector
+    if (resources.preloads.has(key)) return
+    resources.preloads.set(key, props)
+    if (document.querySelector(selector) || resource && document.querySelector(resource)) return
+    props = { rel: kind, ...(kind === 'preload' && as === 'image' && props.imageSrcSet ? {} : { href }), ...props }
+  }
+
+  const node = document.createElement(tag)
+  for (const name in props) {
+    const value = props[name]!
+    node.setAttribute(name.toLowerCase(), name === 'href' || name === 'src' ? resourceURL(value) : value)
+  }
+  if (style || script) resources.instances.set(selector, node)
+  insertResource(node, style ? props['data-precedence'] : undefined)
+}
+
+export function prefetchDNS(href: string): void {
+  if (typeof href === 'string') emit('dns-prefetch', href, {})
+}
+
+export function preconnect(href: string, input?: any): void {
+  if (typeof href === 'string') emit('preconnect', href, options(input, ''))
+}
+
+export function preload(href: string, input?: any): void {
+  if (typeof href === 'string' && input && typeof input === 'object' && typeof input.as === 'string' && input.as) {
+    emit('preload', href, options(input, 'as nonce type referrerPolicy imageSrcSet imageSizes media ' + requestOptions, input.as))
+  }
+}
+
+export function preinit(href: string, input?: any): void {
+  if (typeof href === 'string' && input) {
+    if (input.as === 'style') {
+      const props = options(input, 'precedence ' + requestOptions)
+      props.precedence ||= 'default'
+      emit('stylesheet', href, props)
+    } else if (input.as === 'script') {
+      emit('script', href, options(input, 'nonce ' + requestOptions))
+    }
+  }
+}
+
+export function preloadModule(href: string, input?: any): void {
+  if (typeof href === 'string') {
+    const props = options(input, 'as nonce ' + requestOptions, input?.as)
+    if (props.as === 'script') delete props.as
+    emit('modulepreload', href, props)
+  }
+}
+
+export function preinitModule(href: string, input?: any): void {
+  if (typeof href === 'string' && (input == null || typeof input === 'object' && (input.as == null || input.as === 'script'))) {
+    emit('module-script', href, options(input, 'nonce ' + requestOptions))
+  }
+}
diff --git b/dom/resource-store.ts b/dom/resource-store.ts
new file mode 100644
index 0000000..e9ec8bf
--- /dev/null
+++ b/dom/resource-store.ts
@@ -0,0 +1,52 @@
+import type { ResourceHintOptions } from '../core/resource-hints'
+
+interface Resources {
+  // Connection and preload selectors are disjoint, so one map deduplicates both.
+  preloads: Map<string, ResourceHintOptions>
+  instances: Map<string, Element>
+}
+
+export type ResourceRoot = Document | DocumentFragment
+
+const roots = /*#__PURE__*/ new WeakMap<ResourceRoot, Resources>()
+// Existing document links can satisfy a shadow declaration. Links created by
+// the resource system belong to their original root instead.
+export const createdStylesheets = /*#__PURE__*/ new WeakSet<Element>()
+
+export function resourceAttribute(name: string, value: string): string {
+  return `[${name}="${value.replace(/[\n"\\]/g, char => '\\' + char.charCodeAt(0).toString(16) + ' ')}"]`
+}
+
+export function resourceSelector(href: string, as: string): string {
+  return as === 'style'
+    ? 'link[rel="stylesheet"]' + resourceAttribute('href', href)
+    : 'script[async]' + resourceAttribute('src', href)
+}
+
+export function getResources(root: ResourceRoot): Resources {
+  let resources = roots.get(root)
+  if (!resources) roots.set(root, resources = { preloads: new Map(), instances: new Map() })
+  return resources
+}
+
+export function adoptResourceProps(props: any, prior: ResourceHintOptions | undefined, script: boolean): void {
+  if (prior) for (const name of ['crossOrigin', 'referrerPolicy', script ? 'integrity' : 'title']) {
+    if (props[name] == null && prior[name] != null) props[name] = prior[name]
+  }
+}
+
+export function insertResource(node: Element, precedence?: string, root: ResourceRoot = node.ownerDocument): void {
+  const container = root.nodeType === 9 ? (root as Document).head : root
+  if (precedence != null) {
+    if (node.localName === 'link') createdStylesheets.add(node)
+    let previous: Element | undefined
+    let matched = false
+    for (const sibling of root.querySelectorAll('link[rel="stylesheet"][data-precedence],style[data-precedence]')) {
+      if (sibling.getAttribute('data-precedence') === precedence) matched = true
+      else if (matched) break
+      previous = sibling
+    }
+    if (previous) previous.parentNode!.insertBefore(node, previous.nextSibling)
+    else container.insertBefore(node, container.firstChild)
+  } else container.appendChild(node)
+}
diff --git b/dom/resources.ts b/dom/resources.ts
new file mode 100644
index 0000000..0d96a36
--- /dev/null
+++ b/dom/resources.ts
@@ -0,0 +1,39 @@
+import { resourceURL } from '../core/resource-hints'
+import { setProp } from './dom'
+import { adoptResourceProps, createdStylesheets, getResources, insertResource, resourceAttribute, resourceSelector, type ResourceRoot } from './resource-store'
+
+// Called only during commit. Resource nodes are shared by href and are not
+// owned by a component's placement or unmount operations.
+// The renderer has already checked this host's resource eligibility.
+export function acquireResource(type: string, props: any, container: Node): Element {
+  const script = type === 'script'
+  const style = type === 'style'
+  const ownerDocument = (container.nodeType === 9 ? container : container.ownerDocument) as Document
+  const tree = script ? ownerDocument : container.getRootNode()
+  const root = (tree.nodeType === 9 || tree.nodeType === 11 ? tree : ownerDocument) as ResourceRoot
+  const href = script ? props.src : props.href
+  const resources = getResources(root)
+  const key = resourceSelector(href, script ? 'script' : 'style')
+  let node = resources.instances.get(key)
+  if (node) return node
+  const existing = !style && !script && root !== ownerDocument ? ownerDocument.querySelector(key) : null
+  node = existing && !createdStylesheets.has(existing) && !(existing as any)._p ? existing
+    : root.querySelector(style ? 'style' + resourceAttribute('data-href~', href) : key) || undefined
+  if (node) { resources.instances.set(key, node); return node }
+
+  const next = { ...props }
+  if (!script) {
+    next['data-precedence'] = props.precedence
+    delete next.precedence
+    if (style) { next['data-href'] = props.href; delete next.href }
+  }
+  if (!style) adoptResourceProps(next, getResources(ownerDocument).preloads.get(key), script)
+  node = ownerDocument.createElement(type)
+  for (const name in next) {
+    setProp(node, name, name === 'href' || name === 'src' ? resourceURL(next[name]) : next[name], undefined, false)
+  }
+  if (style && next.dangerouslySetInnerHTML == null && (typeof next.children === 'string' || typeof next.children === 'number' || typeof next.children === 'bigint')) node.textContent = '' + next.children
+  resources.instances.set(key, node)
+  insertResource(node, script ? undefined : props.precedence, root)
+  return node
+}
diff --git b/dom/retained-effects.ts b/dom/retained-effects.ts
new file mode 100644
index 0000000..7c14b04
--- /dev/null
+++ b/dom/retained-effects.ts
@@ -0,0 +1,38 @@
+import { FiberTag, type Fiber, type Hook, type Effect } from '../core'
+import { onCommitRollback } from './commit'
+
+export const retainedEffects = new WeakMap<Fiber, Map<Hook, Effect>>()
+
+export function rememberRetainedEffect(fiber: Fiber, hook: Hook, effect: Effect): void {
+  let entries = retainedEffects.get(fiber)
+  if (!entries) {
+    retainedEffects.set(fiber, entries = new Map())
+    onCommitRollback(() => { retainedEffects.delete(fiber) })
+  }
+  const previous = entries.get(hook), target = entries
+  onCommitRollback(() => { if (previous) target.set(hook, previous); else target.delete(hook) })
+  entries.set(hook, effect)
+}
+
+export function setLayoutDisconnected(fiber: Fiber, disconnected: boolean): boolean {
+  const previous = !!fiber.ld
+  if (previous !== disconnected) {
+    onCommitRollback(() => { fiber.ld = previous })
+    fiber.ld = disconnected
+  }
+  return previous
+}
+
+export function walkRetained(fiber: Fiber, visit: (fiber: Fiber) => void, postorder = false): void {
+  if (!postorder) visit(fiber)
+  for (let child = fiber.child; child; child = child.sibling) walkRetained(child, visit, postorder)
+  if (fiber.tag === FiberTag.Suspense && fiber.ms?.f) walkRetained(fiber.ms.f, visit, postorder)
+  if (postorder) visit(fiber)
+}
+
+export function inSuspensePrimary(fiber: Fiber): boolean {
+  for (let child = fiber, parent = fiber.parent; parent; child = parent, parent = parent.parent) {
+    if (parent.tag === FiberTag.Suspense && parent.ms?.d && parent.ms.f !== child) return true
+  }
+  return false
+}
diff --git a/dom/root-internal.ts b/dom/root-internal.ts
index 11cbdb2..a782726 100644
--- a/dom/root-internal.ts
+++ b/dom/root-internal.ts
@@ -1,10 +1,10 @@
-import { FiberTag, createFiber, type Fiber, type FiberRoot } from '../core'
+import { FiberTag, createFiber, type Fiber, type FiberRoot, type RecoverableErrorHandler } from '../core'
 
 export interface RootOptionsInternal {
   identifierPrefix?: string
-  onRecoverableError?: (error: unknown) => void
-  onCaughtError?: (error: unknown) => void
-  onUncaughtError?: (error: unknown) => void
+  onRecoverableError?: RecoverableErrorHandler
+  onCaughtError?: RecoverableErrorHandler
+  onUncaughtError?: RecoverableErrorHandler
 }
 
 export function createFiberRoot(
diff --git a/dom/root.ts b/dom/root.ts
index 42796cb..26820f5 100644
--- a/dom/root.ts
+++ b/dom/root.ts
@@ -1,13 +1,14 @@
-import type { ReactNode } from '../core'
-import { renderRoot, flushSyncWork, batchedUpdates } from './reconcile'
+import type { ReactNode, RecoverableErrorHandler } from '../core'
+import { renderRoot, scheduleRootRender, flushSyncWork, batchedUpdates } from './reconcile'
 import { hydrateRootImpl } from './features/hydration'
 import { createFiberRoot } from './root-internal'
+import { queueMutation } from './commit'
 
 export interface RootOptions {
   identifierPrefix?: string
-  onRecoverableError?: (error: unknown) => void
-  onCaughtError?: (error: unknown) => void
-  onUncaughtError?: (error: unknown) => void
+  onRecoverableError?: RecoverableErrorHandler
+  onCaughtError?: RecoverableErrorHandler
+  onUncaughtError?: RecoverableErrorHandler
 }
 
 export interface Root {
@@ -21,16 +22,13 @@ export function createRoot(container: Element | DocumentFragment, options: RootO
   let firstRender = true
   return {
     render(children) {
-      if (firstRender) {
-        firstRender = false
-        // Match real React's `clearContainer` semantics: blow away any pre-render
-        // markup (server-rendered placeholder, splash shells, etc.) on the
-        // initial commit so it doesn't stack with the React tree.
-        if ((container as Node).nodeType === 1 /* ELEMENT_NODE */) {
-          ;(container as Element).textContent = ''
+      scheduleRootRender(root, () => {
+        if (firstRender) {
+          queueMutation(() => {
+            firstRender = false
+            if ((container as Node).nodeType === 1) container.textContent = ''
+          })
         }
-      }
-      flushSyncWork(() => {
         renderRoot(root, children)
       })
     },
diff --git b/react/activity.ts b/react/activity.ts
new file mode 100644
index 0000000..0b73737
--- /dev/null
+++ b/react/activity.ts
@@ -0,0 +1,10 @@
+import type { ReactNode } from '../core'
+
+export const REACT_ACTIVITY_TYPE = Symbol.for('react.activity')
+
+export interface ActivityProps {
+  children?: ReactNode
+  mode?: 'hidden' | 'visible'
+}
+
+export const Activity = REACT_ACTIVITY_TYPE as any as (props: ActivityProps) => any
diff --git a/react/element.ts b/react/element.ts
index 1d72bd6..878ed99 100644
--- a/react/element.ts
+++ b/react/element.ts
@@ -4,17 +4,21 @@ import {
   REACT_FRAGMENT_TYPE,
   type ReactElement,
   type ReactNode,
+  type Ref,
 } from '../core'
+import type { FragmentInstance } from '../dom/fragment-instance'
 
 export const Fragment = REACT_FRAGMENT_TYPE as unknown as (props: {
   children?: ReactNode
+  key?: string | number
+  ref?: Ref<FragmentInstance>
 }) => ReactElement
 
 const RESERVED_PROPS: Record<string, 1> = { key: 1, ref: 1, __self: 1, __source: 1 }
 
 export function createElement(
   type: any,
-  config: Record<string, any> | null,
+  config?: Record<string, any> | null,
   ...children: ReactNode[]
 ): ReactElement {
   let key: string | null = null
@@ -46,7 +50,7 @@ export function createElement(
 
 export function cloneElement(
   element: ReactElement,
-  config: Record<string, any> | null,
+  config?: Record<string, any> | null,
   ...children: ReactNode[]
 ): ReactElement {
   let key = element.key
diff --git a/react/hooks.ts b/react/hooks.ts
index 8da8e0e..f1974f5 100644
--- a/react/hooks.ts
+++ b/react/hooks.ts
@@ -5,7 +5,8 @@ import type {
   DependencyList,
 } from '../core'
 import type { Context } from './context'
-import { getDispatcher } from './shared-internals'
+import { getDispatcher, ReactSharedInternals } from './shared-internals'
+import type { BrowserToken } from '../core/browser'
 
 export function useState<S>(initial: S | (() => S)): [S, Dispatch<SetStateAction<S>>] {
   return getDispatcher().useState(initial)
@@ -82,12 +83,20 @@ export function useSyncExternalStore<T>(
   return getDispatcher().useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }
 
-export function use<T>(resource: PromiseLike<T> | { _currentValue: T } | { $$typeof: symbol; _currentValue: T }): T {
+export function use(resource: BrowserToken): undefined
+export function use<T>(resource: PromiseLike<T> | { _currentValue: T } | { $$typeof: symbol; _currentValue: T }): T
+export function use<T>(resource: BrowserToken | PromiseLike<T> | { _currentValue: T } | { $$typeof: symbol; _currentValue: T }): T {
   return getDispatcher().use(resource)
 }
 
+export function unstable_useCacheRefresh(): () => void {
+  return getDispatcher().useCacheRefresh()
+}
+
 export function startTransition(fn: () => void): void {
-  fn()
+  const previous = ReactSharedInternals.T
+  ReactSharedInternals.T = previous || new Set()
+  try { fn() } finally { ReactSharedInternals.T = previous }
 }
 
 export function useActionState<S, P>(
diff --git a/react/index.ts b/react/index.ts
index 740c670..9c07bbb 100644
--- a/react/index.ts
+++ b/react/index.ts
@@ -39,6 +39,7 @@ export {
   useOptimistic,
   useEffectEvent,
   startTransition,
+  unstable_useCacheRefresh,
 } from './hooks'
 export {
   createContext,
@@ -64,10 +65,18 @@ export {
 } from './suspense'
 export { REACT_PORTAL_TYPE } from './portal'
 export { Children } from './children'
+export { ViewTransition, addTransitionType, REACT_VIEW_TRANSITION_TYPE } from './view-transition'
+export type { ViewTransitionProps, ViewTransitionClass, ViewTransitionInstance, ViewTransitionPseudoElement } from './view-transition'
+export { Activity, REACT_ACTIVITY_TYPE } from './activity'
+export type { ActivityProps } from './activity'
+export type { FragmentInstance } from '../dom/fragment-instance'
 export { ReactSharedInternals } from './shared-internals'
 
 // Stub exports
 export const cache = <T extends Function>(fn: T): T => fn
+// The client/DOM-server entry has no RSC cache lifetime, matching React's
+// client export. The upstream Flight renderer remains responsible for RSC.
+export const cacheSignal = (): AbortSignal | null => null
 export const act = async (fn: () => any) => {
   const r = fn()
   if (r && typeof r.then == 'function') await r
@@ -101,12 +110,15 @@ import {
   useOptimistic,
   useEffectEvent,
   startTransition,
+  unstable_useCacheRefresh,
 } from './hooks'
 import { createContext } from './context'
 import { Component, PureComponent } from './class'
 import { memo, forwardRef, lazy } from './memo'
 import { Suspense, StrictMode, Profiler } from './suspense'
 import { Children } from './children'
+import { ViewTransition, addTransitionType } from './view-transition'
+import { Activity } from './activity'
 
 export default {
   createElement,
@@ -135,6 +147,7 @@ export default {
   useOptimistic,
   useEffectEvent,
   startTransition,
+  unstable_useCacheRefresh,
   createContext,
   Component,
   PureComponent,
@@ -145,5 +158,10 @@ export default {
   StrictMode,
   Profiler,
   Children,
+  ViewTransition,
+  Activity,
+  addTransitionType,
+  cache,
+  cacheSignal,
   version: '19.2.3',
 }
diff --git a/react/shared-internals.ts b/react/shared-internals.ts
index 08755c8..0f13410 100644
--- a/react/shared-internals.ts
+++ b/react/shared-internals.ts
@@ -1,4 +1,4 @@
-import type { Fiber, Hook } from '../core'
+import type { Fiber } from '../core'
 
 export interface Dispatcher {
   useState<S>(initial: S | (() => S)): [S, (s: S | ((p: S) => S)) => void]
@@ -25,13 +25,14 @@ export interface Dispatcher {
     getServerSnapshot?: () => T,
   ): T
   use<T>(promiseOrContext: any): T
+  useCacheRefresh(): () => void
 }
 
 interface SharedInternals {
   H: Dispatcher | null
   F: Fiber | null
-  K: Hook | null
   I: number
+  T?: Set<string> | null | undefined
 }
 
 // Stash the singleton on `globalThis` under a registered symbol. Module-scoped
@@ -52,7 +53,6 @@ export const ReactSharedInternals: SharedInternals =
   (g[KEY] = {
     H: null,
     F: null,
-    K: null,
     I: 0,
   })
 
diff --git b/react/view-transition.ts b/react/view-transition.ts
new file mode 100644
index 0000000..66493c2
--- /dev/null
+++ b/react/view-transition.ts
@@ -0,0 +1,41 @@
+import type { ReactNode } from '../core'
+import { ReactSharedInternals } from './shared-internals'
+
+export const REACT_VIEW_TRANSITION_TYPE = Symbol.for('react.view_transition')
+
+export type ViewTransitionClass = string | Record<string, string>
+export interface ViewTransitionPseudoElement {
+  animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation
+  getAnimations(): Animation[]
+  getComputedStyle(): CSSStyleDeclaration
+}
+
+export interface ViewTransitionInstance {
+  name: string
+  group: ViewTransitionPseudoElement
+  imagePair: ViewTransitionPseudoElement
+  old: ViewTransitionPseudoElement
+  new: ViewTransitionPseudoElement
+}
+
+type ViewTransitionEvent = (instance: ViewTransitionInstance, types: string[]) => void | (() => void)
+export interface ViewTransitionProps {
+  children?: ReactNode
+  name?: string | Record<string, string> | undefined
+  default?: ViewTransitionClass | undefined
+  enter?: ViewTransitionClass | undefined
+  exit?: ViewTransitionClass | undefined
+  update?: ViewTransitionClass | undefined
+  share?: ViewTransitionClass | undefined
+  onEnter?: ViewTransitionEvent | undefined
+  onExit?: ViewTransitionEvent | undefined
+  onUpdate?: ViewTransitionEvent | undefined
+  onShare?: ViewTransitionEvent | undefined
+}
+
+// Animation support belongs to the optional DOM feature, not this public entry.
+export const ViewTransition = REACT_VIEW_TRANSITION_TYPE as unknown as (props: ViewTransitionProps) => any
+
+export function addTransitionType(type: string): void {
+  ReactSharedInternals.T?.add(type)
+}
diff --git a/server/bootstrap-script.ts b/server/bootstrap-script.ts
index 2dd7afc..6acb6aa 100644
--- a/server/bootstrap-script.ts
+++ b/server/bootstrap-script.ts
@@ -20,9 +20,17 @@
  * listeners for a small set of interactive events and push them into a buffer.
  * The bundle drains and replays them via the replay code in @tanstack/redact/dom.
  */
+import { escapeAttr } from './escape'
+
 export const BOUNDARY_REVEAL_RUNTIME =
   `(function(){` +
-    `var c={};` +
+    `var c={},r=new Map;` +
+    `function place(n,v){` +
+      `var a=document.head.querySelectorAll('link[rel="stylesheet"][data-precedence],style[data-precedence]'),t=a.length?a[a.length-1]:null,p=t;` +
+      `for(var k=0;k<a.length;k++){if(a[k].getAttribute("data-precedence")===v)p=a[k];else if(p!==t)break}` +
+      `document.head.insertBefore(n,p?p.nextSibling:document.head.firstChild);` +
+    `}` +
+    `function load(n,e){return new Promise(function(y,x){n.onload=function(){e.p=null;y()};n.onerror=function(){e.p=null;x()}})}` +
     `window.$RH=function(i,f){` +
       `if(!document.getElementById("B:"+i))f();` +
       `else c[i]=f;` +
@@ -30,6 +38,10 @@ export const BOUNDARY_REVEAL_RUNTIME =
     `window.$RC=function(i){` +
       `var s=document.getElementById("S:"+i),b=document.getElementById("B:"+i);` +
       `if(!s||!b)return;` +
+      `var a=document.querySelectorAll('body link[rel="stylesheet"][data-precedence],body style[data-precedence]');` +
+      `for(var j=0;j<a.length;j++){` +
+        `var n=a[j];if(n.getAttribute("media")==="not all")n.removeAttribute("media");place(n,n.getAttribute("data-precedence"));` +
+      `}` +
       `var p=b.parentNode,m=b.previousSibling;` +
       `while(s.firstChild)p.insertBefore(s.firstChild,b);` +
       `s.parentNode.removeChild(s);` +
@@ -37,6 +49,25 @@ export const BOUNDARY_REVEAL_RUNTIME =
       `if(m&&m.nodeType===8)m.data="$"+i;` +
       `if(c[i]){var f=c[i];delete c[i];f()}` +
     `};` +
+    `window.$RL=function(i,d){` +
+      `var w=[];for(var j=0;j<d.length;j++){` +
+        `var a=d[j],e=r.get(a[0]);if(!e){` +
+          `var n=null,l=document.querySelectorAll('link[rel="stylesheet"]');for(var k=0;k<l.length;k++)if(l[k].getAttribute("href")===a[0]){n=l[k];break}` +
+          `e={n:n,p:null};r.set(a[0],e);if(!n){` +
+            `n=e.n=document.createElement("link");n.rel="stylesheet";n.href=a[0];n.setAttribute("data-precedence",a[1]);` +
+            `for(var k=2;k<a.length;k+=2)n.setAttribute(a[k],a[k+1]);` +
+            `e.p=load(n,e);place(n,a[1]);` +
+          `}` +
+        `}` +
+        `var m=e.n.getAttribute("media");if(e.p&&(!m||matchMedia(m).matches))w.push(e.p);` +
+      `}` +
+      `Promise.all(w).then(function(){$RC(i)},function(){$RB(i,1)});` +
+    `};` +
+    `window.$RB=function(i,e){` +
+      `var b=document.getElementById("B:"+i);if(!b)return;` +
+      `var m=b.previousSibling;if(m&&m.nodeType===8)m.data=(e?"$E":"$!")+i;` +
+      `b.removeAttribute("id");if(c[i]){var f=c[i];delete c[i];f()}` +
+    `};` +
     `var q=[];window.$RE_q=q;` +
     `var evs=["click","submit","input","change","keydown"];` +
     `function h(e){q.push([e.type,e.target,e.timeStamp])}` +
@@ -45,11 +76,11 @@ export const BOUNDARY_REVEAL_RUNTIME =
   `})();`
 
 export function injectBootstrapScript(nonce?: string): string {
-  const n = nonce ? ` nonce="${nonce}"` : ''
+  const n = nonce ? ` nonce="${escapeAttr(nonce)}"` : ''
   return `<script${n}>${BOUNDARY_REVEAL_RUNTIME}</script>`
 }
 
-export function revealScript(id: number, nonce?: string): string {
-  const n = nonce ? ` nonce="${nonce}"` : ''
-  return `<script${n}>$RC(${id})</script>`
+export function revealScript(id: number, nonce?: string, styles?: string[][]): string {
+  const n = nonce ? ` nonce="${escapeAttr(nonce)}"` : ''
+  return `<script${n}>${styles?.length ? `$RL(${id},${JSON.stringify(styles).replace(/</g, '\\u003c')})` : `$RC(${id})`}</script>`
 }
diff --git a/server/dispatcher.ts b/server/dispatcher.ts
index 1d9faee..06818f3 100644
--- a/server/dispatcher.ts
+++ b/server/dispatcher.ts
@@ -1,18 +1,41 @@
 import { ReactSharedInternals, REACT_CONTEXT_TYPE } from '../react'
+import { isBrowserToken, browserError } from '../core/browser'
+import { resourceHintDispatcher } from '../core/resource-hints'
+import { createResourceHints, type ResourceScope } from './resource-hints'
 
-interface SSRFrame {
+export interface SSRFrame {
   idCounter: number
   identifierPrefix: string
   contextStack: Array<{ context: any; prev: any }>
+  resources?: ReturnType<typeof createResourceHints>
+  shellFlushed?: boolean
+  styleNonce?: string | undefined
 }
 
 let frame: SSRFrame | null = null
 
-export function beginSSR(identifierPrefix = ':R'): void {
-  frame = { idCounter: 0, identifierPrefix, contextStack: [] }
+resourceHintDispatcher.emit = (kind, href, options) => {
+  if (!frame) return false
+  ;(frame.resources ||= createResourceHints(!!frame.shellFlushed, frame.styleNonce)).add(kind, href, options)
+  return true
 }
 
-export function endSSR(): void {
+export function beginSSR(identifierPrefix = ':R', nextFrame?: SSRFrame) {
+  const previous = { frame, dispatcher: ReactSharedInternals.H }
+  frame = nextFrame ?? { idCounter: 0, identifierPrefix, contextStack: [] }
+  ReactSharedInternals.H = ssrDispatcher as any
+  return previous
+}
+
+export function currentSSRFrame(): SSRFrame {
+  return frame!
+}
+
+export function recordHostResource(type: string, props: any, scope?: ResourceScope): boolean {
+  return !!frame && (frame.resources ||= createResourceHints(!!frame.shellFlushed, frame.styleNonce)).addHost(type, props, scope)
+}
+
+export function endSSR(previous?: ReturnType<typeof beginSSR>): void {
   // Restore any remaining pushed contexts (defensive)
   if (frame) {
     for (let i = frame.contextStack.length - 1; i >= 0; i--) {
@@ -20,7 +43,10 @@ export function endSSR(): void {
       context._currentValue = prev
     }
   }
-  frame = null
+  // Only synchronous renders restore their caller. A stream can finish
+  // after its caller has returned, so it must not reinstall that dispatcher.
+  ReactSharedInternals.H = previous?.dispatcher ?? null
+  frame = previous?.frame ?? null
 }
 
 export function pushContext(context: any, value: any): void {
@@ -59,6 +85,9 @@ export function applyContextSnapshot(snapshot: ContextSnapshot): () => void {
 }
 
 export const ssrDispatcher = {
+  useCacheRefresh() {
+    return () => { throw new Error('Refreshing the cache is not supported during server rendering.') }
+  },
   useState<S>(initial: S | (() => S)) {
     const v = typeof initial === 'function' ? (initial as () => S)() : initial
     return [v, (() => {}) as any] as [S, any]
@@ -113,6 +142,7 @@ export const ssrDispatcher = {
   },
   use<T>(resource: any): T {
     if (resource == null) throw new Error('use() received null or undefined')
+    if (isBrowserToken(resource)) throw browserError(resource)
     if (resource.$$typeof === REACT_CONTEXT_TYPE) {
       return resource._currentValue
     }
@@ -148,11 +178,3 @@ export const ssrDispatcher = {
     throw new Error('use() expected a Promise or Context')
   },
 }
-
-export function installSSRDispatcher(): void {
-  ReactSharedInternals.H = ssrDispatcher as any
-}
-
-export function uninstallSSRDispatcher(): void {
-  ReactSharedInternals.H = null
-}
diff --git a/server/escape.ts b/server/escape.ts
index 16108c6..2675201 100644
--- a/server/escape.ts
+++ b/server/escape.ts
@@ -1,23 +1,25 @@
 import { attributeName, STRING_BOOLEAN_ATTRS } from '../core/attributes'
 
-const ATTR_MAP: Record<string, string> = {
-  '&': '&amp;',
-  '"': '&quot;',
-  '<': '&lt;',
-  '>': '&gt;',
-}
-const TEXT_MAP: Record<string, string> = {
-  '&': '&amp;',
-  '<': '&lt;',
-  '>': '&gt;',
+function escape(value: string, pattern: RegExp): string {
+  let out = ''
+  let start = 0
+  while (pattern.test(value)) {
+    const end = pattern.lastIndex
+    const char = value[end - 1]
+    out += value.slice(start, end - 1) + (
+      char === '&' ? '&amp;' : char === '<' ? '&lt;' : char === '>' ? '&gt;' : '&quot;'
+    )
+    start = end
+  }
+  return out + value.slice(start)
 }
 
 export function escapeAttr(value: string): string {
-  return value.replace(/[&"<>]/g, (c) => ATTR_MAP[c]!)
+  return /[&"<>]/.test(value) ? escape(value, /[&"<>]/g) : value
 }
 
 export function escapeText(value: string): string {
-  return value.replace(/[&<>]/g, (c) => TEXT_MAP[c]!)
+  return /[&<>]/.test(value) ? escape(value, /[&<>]/g) : value
 }
 
 // Raw-text element body escaping: prevent any closing tag for the raw-text
@@ -57,6 +59,7 @@ const BOOLEAN_ATTRS = new Set([
   'autoplay',
   'checked',
   'controls',
+  'credentialless',
   'default',
   'defer',
   'disabled',
diff --git a/server/renderToString.ts b/server/renderToString.ts
index ba44db0..ec8d4bc 100644
--- a/server/renderToString.ts
+++ b/server/renderToString.ts
@@ -1,25 +1,27 @@
 import type { ReactNode } from '../core'
-import { beginSSR, endSSR, installSSRDispatcher, uninstallSSRDispatcher } from './dispatcher'
+import { beginSSR, currentSSRFrame, endSSR } from './dispatcher'
 import { walk } from './walk'
 
 export function renderToString(
   children: ReactNode,
   options: { identifierPrefix?: string } = {},
 ): string {
-  installSSRDispatcher()
-  beginSSR(options.identifierPrefix)
+  const previous = beginSSR(options.identifierPrefix)
   let output = ''
   let id = 0
+  let head = 0
   try {
     walk(children, {
       emit: (s) => {
         output += s
       },
       nextBoundaryId: () => id++,
+      onHead: () => { head = output.length },
     })
+    const hints = currentSSRFrame().resources?.drain()
+    if (hints) output = output.slice(0, head) + hints + output.slice(head)
   } finally {
-    endSSR()
-    uninstallSSRDispatcher()
+    endSSR(previous)
   }
   return output
 }
diff --git b/server/resource-hints.ts b/server/resource-hints.ts
new file mode 100644
index 0000000..588553b
--- /dev/null
+++ b/server/resource-hints.ts
@@ -0,0 +1,165 @@
+import { resourceKind, resourceURL, type ResourceHintKind, type ResourceHintOptions } from '../core/resource-hints'
+import { attrToHtml, escapeAttr } from './escape'
+import { attributeName } from '../core/attributes'
+
+interface Resource {
+  kind: ResourceHintKind | 'style'
+  href: string
+  options: Record<string, any>
+  sent?: boolean
+  cancelled?: boolean
+  preloaded?: boolean
+  css?: string
+}
+
+export interface ResourceScope {
+  stylesheets?: Map<string, string[]>
+  inline?: Set<string>
+}
+
+function styleText(props: any): string {
+  const html = props.dangerouslySetInnerHTML
+  if (html != null) {
+    if (typeof html !== 'object' || !('__html' in html)) throw new Error('dangerouslySetInnerHTML must be an object with an __html field.')
+    if (props.children != null) throw new Error('Can only set one of children or dangerouslySetInnerHTML.')
+    return html.__html == null ? '' : '' + html.__html
+  }
+  const child = Array.isArray(props.children) ? props.children.length < 2 ? props.children[0] : null : props.children
+  return child == null || typeof child === 'function' || typeof child === 'symbol' ? ''
+    : ('' + child).replace(/(<\/?)(s)(tyle)/gi, (_, prefix: string, s: string, suffix: string) => prefix + '\\' + s.charCodeAt(0).toString(16) + ' ' + suffix)
+}
+
+function markup(resource: Resource, late: boolean): string {
+  const { kind, href, options } = resource
+  const script = kind === 'script' || kind === 'module-script'
+  const style = kind === 'stylesheet'
+  const props: Record<string, any> = script
+    ? { src: href, ...(kind === 'module-script' ? { type: 'module' } : {}), async: true, ...options }
+    : style
+      ? late
+        ? { rel: 'preload', as: 'style', href, crossOrigin: options.crossOrigin, fetchPriority: options.fetchPriority, integrity: options.integrity, media: options.media, hrefLang: options.hrefLang, referrerPolicy: options.referrerPolicy }
+        : { rel: 'stylesheet', href, 'data-precedence': options.precedence!, ...options }
+      : { rel: kind, ...(options.as === 'image' && options.imageSrcSet ? {} : { href }), ...options }
+  let output = script ? '<script' : '<link'
+  for (const name in props) {
+    if (name === 'precedence' || late && name === 'data-precedence') continue
+    const value = name === 'href' || name === 'src' ? resourceURL(props[name]!) : props[name]!
+    output += attrToHtml(name, value).replace(/'/g, '&#x27;')
+  }
+  return output + (script ? '></script>' : '/>')
+}
+
+export function createResourceHints(shellFlushed = false, styleNonce?: string) {
+  const resources = new Map<string, Resource>()
+  const groups: Resource[][] = [[], [], [], [], []]
+  const styles = new Map<string, Resource[]>()
+  const dependencies = new Map<string, string[]>()
+  const visibleInline = new Set<string>()
+  const collector = {
+    add(kind: ResourceHintKind | 'style', href: string, options: ResourceHintOptions): Resource {
+      let type: string = kind
+      let source = href
+      const init = kind === 'style' || kind === 'stylesheet' || kind === 'script' || kind === 'module-script'
+      if (kind === 'preload') {
+        type = options.as!
+        if (type === 'image' && options.imageSrcSet) source = options.imageSrcSet + '\n' + (options.imageSizes || '')
+      } else if (kind === 'modulepreload') type = 'module-' + (options.as || 'script')
+      else if (kind === 'stylesheet') type = 'style'
+      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
+
+      const resource: Resource = { kind, href, options: { ...options } }
+      if (kind === 'style' && (!styleNonce || options.nonce === styleNonce)) resource.css = styleText(options)
+      if (prior) {
+        prior.cancelled = true
+        resource.preloaded = !!prior.sent
+        for (const name of ['crossOrigin', 'integrity']) {
+          if (resource.options[name] == null && prior.options[name] != null) resource.options[name] = prior.options[name]!
+        }
+      }
+      resources.set(key, resource)
+      if (kind === 'stylesheet' || kind === 'style') {
+        const precedence = options.precedence!
+        let group = styles.get(precedence)
+        if (!group) styles.set(precedence, group = [])
+        group.push(resource)
+      } else {
+        const group = kind === 'dns-prefetch' || kind === 'preconnect' ? 0
+          : kind === 'preload' && options.as === 'font' ? 1
+          : kind === 'preload' && options.as === 'image' && options.fetchPriority === 'high' ? 2
+          : init ? 3 : 4
+        groups[group]!.push(resource)
+      }
+      return resource
+    },
+    addHost(type: string, props: any, scope?: ResourceScope): boolean {
+      const kind = resourceKind(type, props)
+      if (!kind) return false
+      const resource = collector.add(kind === 'script' && props.type === 'module' ? 'module-script' : kind, kind === 'script' ? props.src : props.href, props)
+      if (shellFlushed && kind === 'stylesheet') {
+        const descriptor = [resourceURL(resource.href), resource.options.precedence]
+        for (const name in resource.options) {
+          if (name === 'href' || name === 'rel' || name === 'precedence' || name === 'data-precedence' || name === 'children' || name === 'dangerouslySetInnerHTML' || name === 'innerHTML' || name === 'style' || name === 'suppressHydrationWarning' || name === 'suppressContentEditableWarning' || name === 'ref' || name === 'key' || /^on/i.test(name) || !/^[a-zA-Z_:][a-zA-Z0-9:_.-]*$/.test(name)) continue
+          const value = resource.options[name]
+          if (value == null || typeof value === 'function' || typeof value === 'symbol' || name === 'hidden' && value === false) continue
+          descriptor.push(attributeName(name), name === 'hidden' ? '' : name === 'src' ? resourceURL('' + value) : '' + value)
+        }
+        ;(scope ? scope.stylesheets ||= new Map() : dependencies).set(resource.href, descriptor)
+      } else if (shellFlushed && kind === 'style') {
+        ;(scope ? scope.inline ||= new Set() : visibleInline).add(resource.options.precedence)
+      }
+      return true
+    },
+    mergeScope(scope: ResourceScope, parent?: ResourceScope): void {
+      if (scope.stylesheets) for (const [href, descriptor] of scope.stylesheets) {
+        ;(parent ? parent.stylesheets ||= new Map() : dependencies).set(href, descriptor)
+      }
+      if (scope.inline) for (const precedence of scope.inline) {
+        ;(parent ? parent.inline ||= new Set() : visibleInline).add(precedence)
+      }
+    },
+    takeStylesheets(): string[][] {
+      const result = Array.from(dependencies.values())
+      dependencies.clear()
+      return result
+    },
+    drain(): string {
+      let output = ''
+      function flush(group: Resource[], precedence?: string) {
+        let remaining = 0
+        let inline = false, hasStylesheets = false
+        let hrefs = '', rules = ''
+        for (const resource of group) {
+          if (!resource.sent && !resource.cancelled) {
+            if (resource.kind === 'style') {
+              if (shellFlushed && !visibleInline.has(precedence!)) { group[remaining++] = resource; continue }
+              inline = true
+              if (resource.css !== undefined) {
+                hrefs += (hrefs ? ' ' : '') + resource.href
+                rules += resource.css
+              }
+            } else {
+              if (resource.kind === 'stylesheet') hasStylesheets = true
+              if (!(shellFlushed && resource.kind === 'stylesheet' && resource.preloaded)) output += markup(resource, shellFlushed)
+            }
+            resource.sent = true
+          }
+        }
+        group.length = remaining
+        if (hrefs || inline && !shellFlushed && !hasStylesheets) {
+          output += `<style${styleNonce !== undefined ? ` nonce="${escapeAttr(styleNonce)}"` : ''}${shellFlushed ? ' media="not all"' : ''} data-precedence="${escapeAttr(precedence!)}"${hrefs ? ` data-href="${escapeAttr(hrefs)}"` : ''}>${rules}</style>`
+        }
+      }
+      for (let index = 0; index < groups.length; index++) {
+        if (index === 3) for (const [precedence, group] of styles) flush(group, precedence)
+        flush(groups[index]!)
+      }
+      shellFlushed = true
+      visibleInline.clear()
+      return output
+    },
+  }
+  return collector
+}
diff --git a/server/stream.ts b/server/stream.ts
index 38f67a8..c6a6427 100644
--- a/server/stream.ts
+++ b/server/stream.ts
@@ -2,21 +2,25 @@ import type { ReactNode } from '../core'
 import {
   beginSSR,
   endSSR,
-  installSSRDispatcher,
-  uninstallSSRDispatcher,
   applyContextSnapshot,
+  currentSSRFrame,
+  type SSRFrame,
 } from './dispatcher'
-import { walk, type SuspendedBoundary } from './walk'
+import { walk, type SuspendedBoundary, type BrowserBailoutCallback } from './walk'
+import { browserError, isBrowserToken, isBrowserError } from '../core/browser'
 import { BOUNDARY_REVEAL_RUNTIME, revealScript } from './bootstrap-script'
-import { escapeScript } from './escape'
+import { escapeAttr, escapeScript } from './escape'
+import { resourceURL } from '../core/resource-hints'
+import type { ResourceScope } from './resource-hints'
 
 export interface StreamOptions {
   identifierPrefix?: string
-  nonce?: string
+  nonce?: string | { script?: string; style?: string }
   bootstrapScriptContent?: string | ReadonlyArray<string>
   bootstrapScripts?: ReadonlyArray<string | { src: string; async?: boolean; nonce?: string }>
   bootstrapModules?: ReadonlyArray<string | { src: string; nonce?: string }>
   onError?: (error: unknown) => string | void
+  onBrowserBailout?: BrowserBailoutCallback
   signal?: AbortSignal
   progressiveChunkSize?: number
 }
@@ -28,6 +32,7 @@ export interface ReadableStreamResult extends ReadableStream<Uint8Array> {
 export interface PipeableWritable {
   write(chunk: string): unknown
   end(): unknown
+  destroy?(error?: unknown): unknown
 }
 
 export interface OrchestratorState {
@@ -35,6 +40,28 @@ export interface OrchestratorState {
   pending: Set<Promise<void>>
   closed: boolean
   errored: unknown | null
+  aborted: boolean
+  reason: unknown
+  abort: (reason?: unknown) => void
+  cancelled: Promise<void>
+  onShellReady?: () => void
+  frame?: SSRFrame
+}
+
+function createState(): OrchestratorState {
+  let wake!: () => void
+  const state: OrchestratorState = {
+    nextId: 0, pending: new Set(), closed: false, errored: null,
+    aborted: false, reason: undefined,
+    cancelled: new Promise<void>((resolve) => { wake = resolve }),
+    abort(reason) {
+      if (state.closed || state.aborted) return
+      state.aborted = true
+      state.reason = isBrowserToken(reason) ? browserError(reason) : reason ?? new Error('The render was aborted by the server without a reason.')
+      wake()
+    },
+  }
+  return state
 }
 
 type Emit = (chunk: string) => void
@@ -45,9 +72,7 @@ export async function streamHtml(
   options: StreamOptions,
   state: OrchestratorState,
 ): Promise<void> {
-  installSSRDispatcher()
-  beginSSR(options.identifierPrefix)
-  const nonce = options.nonce
+  const nonce = scriptNonce(options)
 
   try {
     const boundaries: SuspendedBoundary[] = []
@@ -60,6 +85,7 @@ export async function streamHtml(
     // one encode and one enqueue per shell — measured ~2-4% of total SSR
     // time on CPU profiles.
     const shellChunks: string[] = []
+    let head = 0
     const bufferedEmit: Emit = (chunk) => {
       shellChunks.push(chunk)
     }
@@ -70,17 +96,27 @@ export async function streamHtml(
     // partial shell chunks or boundary ids from the aborted attempt.
     let shellRendered = false
     let rootRetries = 0
+    let resources: SSRFrame['resources']
     while (!shellRendered) {
       const chunkCount = shellChunks.length
       const boundaryCount = boundaries.length
       const nextId = state.nextId
+      head = 0
+      const previous = beginSSR(options.identifierPrefix)
+      currentSSRFrame().styleNonce = typeof options.nonce === 'object' ? options.nonce?.style : undefined
+      if (resources) currentSSRFrame().resources = resources
+      let suspended: Promise<unknown> | undefined
       try {
+        if (state.aborted) throw state.reason
         walk(children, {
           emit: bufferedEmit,
           onSuspend: (b) => boundaries.push(b),
           nextBoundaryId: () => state.nextId++,
+          onBrowserBailout: options.onBrowserBailout,
+          onHead: () => { head = shellChunks.length },
         })
         shellRendered = true
+        state.frame = currentSSRFrame()
       } catch (err) {
         shellChunks.length = chunkCount
         boundaries.length = boundaryCount
@@ -89,10 +125,18 @@ export async function streamHtml(
         if (++rootRetries > 50) {
           throw new Error('renderToReadableStream exceeded 50 root suspension retries.')
         }
-        await err
+        suspended = err
+      } finally {
+        resources = currentSSRFrame().resources
+        endSSR(previous)
       }
+      if (suspended) await Promise.race([suspended, state.cancelled])
     }
 
+    const hints = state.frame?.resources?.drain()
+    if (hints) shellChunks.splice(head, 0, hints)
+    if (state.frame) state.frame.shellFlushed = true
+
     // 2. Inject runtime + bootstrap scripts (once, after shell). Skip the
     // reveal/event-replay runtime when nothing needs it — no suspensions to
     // reveal and no bootstrap scripts to guard against early user input. That
@@ -104,7 +148,7 @@ export async function streamHtml(
       (options.bootstrapScripts?.length ?? 0) > 0 ||
       (options.bootstrapModules?.length ?? 0) > 0
     if (boundaries.length > 0 || hasBootstrap) {
-      shellChunks.push(`<script${nonce ? ` nonce="${nonce}"` : ''}>${BOUNDARY_REVEAL_RUNTIME}</script>`)
+      shellChunks.push(`<script${nonce ? ` nonce="${escapeAttr(nonce)}"` : ''}>${BOUNDARY_REVEAL_RUNTIME}</script>`)
       for (const content of bootstrapScriptContentToArray(options.bootstrapScriptContent)) {
         shellChunks.push(inlineBootstrapTag(content, nonce))
       }
@@ -117,17 +161,20 @@ export async function streamHtml(
     }
 
     if (shellChunks.length) emit(normalizeDocumentShell(shellChunks.join('')))
+    state.onShellReady?.()
 
     // 3. Stream suspended boundaries as they resolve
     for (const b of boundaries) streamBoundary(b, emit, options, state)
     await drain(state)
   } catch (err) {
+    if (isBrowserError(err)) {
+      err = new Error('The server render could not complete because client rendering was requested outside a Suspense boundary.',
+        Object.hasOwn(err, 'cause') ? { cause: err.cause } : undefined)
+    }
     state.errored = err
     if (options.onError) options.onError(err)
     throw err
   } finally {
-    endSSR()
-    uninstallSSRDispatcher()
     state.closed = true
   }
 }
@@ -138,39 +185,59 @@ function streamBoundary(
   options: StreamOptions,
   state: OrchestratorState,
 ): void {
+  const nonce = scriptNonce(options)
   const task = (async () => {
     try {
-      await b.thenable
-    } catch (err) {
-      if (options.onError) options.onError(err)
-    }
+      await Promise.race([b.thenable, state.cancelled])
+    } catch {}
     if (state.closed) return
 
+    const defer = (error: unknown) => {
+      if (isBrowserError(error)) options.onBrowserBailout?.(error, { componentStack: (error as any).componentStack || b.componentStack })
+      else options.onError?.(error)
+      emit(`<script${nonce ? ` nonce="${escapeAttr(nonce)}"` : ''}>$RB(${b.id}${isBrowserError(error) ? '' : ',1'})</script>`)
+    }
+    if (state.aborted) { defer(state.reason); return }
+
     // Re-render the boundary's children into a string, restoring the
     // provider stack from when the boundary first suspended.
     const parts: string[] = []
     const sub: SuspendedBoundary[] = []
+    const resourceScope: ResourceScope = {}
+    let styles: string[][] | undefined
+    const previous = beginSSR(options.identifierPrefix, state.frame)
+    state.frame?.resources?.takeStylesheets()
     const restore = applyContextSnapshot(b.contextSnapshot)
     try {
       walk(b.children, {
         emit: (s) => parts.push(s),
         onSuspend: (n) => sub.push(n),
         nextBoundaryId: () => state.nextId++,
+        onBrowserBailout: options.onBrowserBailout,
+        componentStack: b.componentStack,
+        resourceScope,
       })
+      state.frame?.resources?.mergeScope(resourceScope)
     } catch (err) {
-      if (options.onError) options.onError(err)
-      restore()
+      if (isThenable(err)) {
+        streamBoundary({ ...b, thenable: err }, emit, options, state)
+      } else defer(err)
       return
+    } finally {
+      restore()
+      endSSR(previous)
+      const hints = state.frame?.resources?.drain()
+      styles = state.frame?.resources?.takeStylesheets()
+      if (hints) emit(hints)
     }
-    restore()
 
-    emit(`<div hidden id="S:${b.id}">${parts.join('')}</div>${revealScript(b.id, options.nonce)}`)
+    emit(`<div hidden id="S:${b.id}">${parts.join('')}</div>${revealScript(b.id, nonce, styles)}`)
 
     // Recurse: any nested suspensions inside the now-revealed content
     for (const s of sub) streamBoundary(s, emit, options, state)
   })()
   state.pending.add(task)
-  task.finally(() => state.pending.delete(task))
+  task.then(() => state.pending.delete(task), () => state.pending.delete(task))
 }
 
 async function drain(state: OrchestratorState): Promise<void> {
@@ -183,6 +250,10 @@ function isThenable(value: unknown): value is Promise<unknown> {
   return !!value && typeof (value as { then?: unknown }).then === 'function'
 }
 
+function scriptNonce(options: StreamOptions): string | undefined {
+  return typeof options.nonce === 'string' ? options.nonce : options.nonce?.script
+}
+
 function bootstrapScriptContentToArray(
   content: StreamOptions['bootstrapScriptContent'],
 ): string[] {
@@ -191,7 +262,7 @@ function bootstrapScriptContentToArray(
 }
 
 function inlineBootstrapTag(content: string, defaultNonce: string | undefined): string {
-  const nAttr = defaultNonce ? ` nonce="${defaultNonce}"` : ''
+  const nAttr = defaultNonce ? ` nonce="${escapeAttr(defaultNonce)}"` : ''
   return `<script${nAttr}>${escapeScript(content)}</script>`
 }
 
@@ -237,9 +308,9 @@ function bootstrapTag(
   kind: 'script' | 'module',
   defaultNonce: string | undefined,
 ): string {
-  const src = typeof entry === 'string' ? entry : entry.src
+  const src = escapeAttr(resourceURL(typeof entry === 'string' ? entry : entry.src))
   const nonce = typeof entry === 'string' ? defaultNonce : entry.nonce ?? defaultNonce
-  const nAttr = nonce ? ` nonce="${nonce}"` : ''
+  const nAttr = nonce ? ` nonce="${escapeAttr(nonce)}"` : ''
   if (kind === 'module') return `<script type="module"${nAttr} src="${src}"></script>`
   return `<script async${nAttr} src="${src}"></script>`
 }
@@ -252,13 +323,15 @@ export function renderToReadableStream(
   children: ReactNode,
   options: StreamOptions = {},
 ): Promise<ReadableStreamResult> {
-  const state: OrchestratorState = {
-    nextId: 0,
-    pending: new Set(),
-    closed: false,
-    errored: null,
-  }
+  const state = createState()
   const encoder = new TextEncoder()
+  let abortListener: (() => void) | undefined
+  const detachAbortListener = () => {
+    if (abortListener) {
+      options.signal?.removeEventListener('abort', abortListener)
+      abortListener = undefined
+    }
+  }
 
   let allReadyResolve!: () => void
   let allReadyReject!: (e: unknown) => void
@@ -266,6 +339,15 @@ export function renderToReadableStream(
     allReadyResolve = r
     allReadyReject = rej
   })
+  // Shell failures reject the outer promise before callers receive allReady.
+  allReady.catch(() => {})
+  let shellResolve!: (stream: ReadableStreamResult) => void
+  let shellReject!: (error: unknown) => void
+  const shell = new Promise<ReadableStreamResult>((resolve, reject) => {
+    shellResolve = resolve
+    shellReject = reject
+  })
+  state.onShellReady = () => queueMicrotask(() => shellResolve(Object.assign(stream, { allReady })))
 
   const stream = new ReadableStream<Uint8Array>({
     start(controller) {
@@ -275,31 +357,41 @@ export function renderToReadableStream(
         } catch {}
       }
 
+      if (options.signal) {
+        abortListener = () => {
+          detachAbortListener()
+          state.abort(options.signal!.reason)
+        }
+        options.signal.addEventListener('abort', abortListener)
+        if (options.signal.aborted) abortListener()
+      }
+
       streamHtml(children, emit, options, state).then(
         () => {
+          detachAbortListener()
           try {
             controller.close()
           } catch {}
           allReadyResolve()
         },
         (err) => {
+          detachAbortListener()
           try {
             controller.error(err)
           } catch {}
           allReadyReject(err)
+          shellReject(err)
         },
       )
 
-      options.signal?.addEventListener('abort', () => {
-        state.closed = true
-        try {
-          controller.close()
-        } catch {}
-      })
+    },
+    cancel(reason) {
+      state.abort(reason)
+      detachAbortListener()
     },
   })
 
-  return Promise.resolve(Object.assign(stream, { allReady }))
+  return shell
 }
 
 // ---------------------------------------------------------------------------
@@ -321,18 +413,20 @@ export function renderToPipeableStream(
   children: ReactNode,
   options: PipeableOptions = {},
 ): PipeableHandle {
-  const state: OrchestratorState = {
-    nextId: 0,
-    pending: new Set(),
-    closed: false,
-    errored: null,
-  }
+  const state = createState()
 
   const buffers: string[] = []
   let dest: PipeableWritable | null = null
   let shellReady = false
+  let shellFailed = false
   let finished = false
-  let aborted = false
+  let failed = false
+  let failure: unknown
+
+  const finishDestination = (target: PipeableWritable) => {
+    if (failed && target.destroy) target.destroy(failure)
+    else target.end()
+  }
 
   const flushTo = (w: PipeableWritable) => {
     if (!buffers.length) return
@@ -341,11 +435,17 @@ export function renderToPipeableStream(
   }
 
   const emit: Emit = (chunk) => {
-    if (aborted || finished) return
+    if (finished) return
     if (dest) dest.write(chunk)
     else buffers.push(chunk)
   }
 
+  state.onShellReady = () => queueMicrotask(() => {
+    if (shellFailed) return
+    shellReady = true
+    options.onShellReady?.()
+  })
+
   // Kick off rendering
   streamHtml(children, emit, options, state).then(
     () => {
@@ -354,35 +454,27 @@ export function renderToPipeableStream(
       options.onAllReady?.()
     },
     (err) => {
+      finished = true
+      failed = true
+      failure = err
       if (!shellReady) {
+        shellFailed = true
         options.onShellError?.(err)
       } else {
-        options.onError?.(err)
-        if (dest) dest.end()
+        if (dest) finishDestination(dest)
       }
     },
   )
 
-  // We call onShellReady once the first synchronous emit has landed.
-  // streamHtml above runs the shell synchronously before the first await in drain(),
-  // so we can schedule onShellReady right after the first microtask.
-  queueMicrotask(() => {
-    if (aborted || finished) return
-    shellReady = true
-    options.onShellReady?.()
-  })
-
   return {
     pipe<T extends PipeableWritable>(target: T): T {
       dest = target
-      flushTo(target)
-      if (finished) target.end()
+      if (!failed) flushTo(target)
+      if (finished) finishDestination(target)
       return target
     },
-    abort(_reason?: unknown) {
-      aborted = true
-      state.closed = true
-      if (dest) dest.end()
+    abort(reason?: unknown) {
+      state.abort(reason)
     },
   }
 }
diff --git a/server/walk.ts b/server/walk.ts
index ea5568b..db00730 100644
--- a/server/walk.ts
+++ b/server/walk.ts
@@ -15,6 +15,8 @@ import {
   REACT_STRICT_MODE_TYPE,
   REACT_PROFILER_TYPE,
   REACT_PORTAL_TYPE,
+  REACT_ACTIVITY_TYPE,
+  REACT_VIEW_TRANSITION_TYPE,
 } from '../react'
 import {
   attrToHtml,
@@ -27,8 +29,19 @@ import {
   pushContext,
   popContext,
   snapshotContexts,
+  recordHostResource,
+  currentSSRFrame,
   type ContextSnapshot,
 } from './dispatcher'
+import { isBrowserError } from '../core/browser'
+import { resourceKind } from '../core/resource-hints'
+import type { ResourceScope } from './resource-hints'
+
+export interface ServerErrorInfo {
+  componentStack: string
+}
+
+export type BrowserBailoutCallback = (error: Error, errorInfo: ServerErrorInfo) => void
 
 export interface SuspendedBoundary {
   id: number
@@ -36,15 +49,21 @@ export interface SuspendedBoundary {
   children: ReactNode
   thenable: Promise<any>
   contextSnapshot: ContextSnapshot
+  componentStack: string
 }
 
 export interface WalkOptions {
   emit: (chunk: string) => void
+  onHead?: () => void
   onSuspend?: ((boundary: SuspendedBoundary) => void) | undefined
+  onBrowserBailout?: BrowserBailoutCallback | undefined
+  componentStack?: string | undefined
+  thrownInfo?: { componentStack?: string | undefined }
   nextBoundaryId: () => number
   bootstrapped?: boolean | undefined
   isBoundaryResolution?: boolean | undefined
   isSvg?: boolean | undefined
+  resourceScope?: ResourceScope | undefined
   /**
    * Tracks whether the most recent emission within the *current text flow*
    * ended with a text node. When the next emission is also text, we emit a
@@ -160,6 +179,15 @@ function walkElement(el: ReactElement, opts: WalkOptions): void {
     return
   }
 
+  if (type === REACT_ACTIVITY_TYPE) {
+    if (props.mode !== 'hidden') walkNode(props.children, opts)
+    return
+  }
+  if (type === REACT_VIEW_TRANSITION_TYPE) {
+    walkNode(props.children, opts)
+    return
+  }
+
   if (typeof type === 'string') {
     walkHost(type, props, opts)
     return
@@ -196,8 +224,7 @@ function walkElement(el: ReactElement, opts: WalkOptions): void {
     const render = (type as any).render
     const ref = (props as any).ref ?? null
     const { ref: _omit, ...rest } = props as any
-    const rendered = render(rest, ref)
-    walkNode(rendered, opts)
+    walkComponent(render, rest, opts, ref)
     return
   }
 
@@ -234,6 +261,7 @@ function walkHost(
   opts: WalkOptions,
 ): void {
   const isSvg = opts.isSvg || tag === 'svg'
+  if (!isSvg && resourceKind(tag, props) && recordHostResource(tag, props, opts.resourceScope)) return
   // <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
@@ -270,6 +298,7 @@ function walkHost(
     pushSelectContext(val)
   }
   const isOption = tag === 'option'
+  try {
 
   // Prepend the HTML5 doctype to the stream when rendering an <html> root.
   // Without it the browser parses the document in quirks mode, which breaks
@@ -312,6 +341,7 @@ function walkHost(
     return
   }
   opts.emit('>')
+  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
@@ -322,7 +352,9 @@ function walkHost(
   }
 
   if (tag === 'html' && !hasHeadChild(props.children)) {
-    opts.emit('<head></head>')
+    opts.emit('<head>')
+    opts.onHead?.()
+    opts.emit('</head>')
   }
 
   const dangerouslyHtml = props.dangerouslySetInnerHTML?.__html
@@ -358,9 +390,11 @@ function walkHost(
     walkNode(props.children, childOpts)
   }
   opts.emit(`</${tag}>`)
-  if (isSelect) popSelectContext()
   // Host element closing resets outer flow — next sibling text starts fresh.
   if (parentTextState) parentTextState.lastWasText = false
+  } finally {
+    if (isSelect) popSelectContext()
+  }
 }
 
 function hasHeadChild(children: unknown): boolean {
@@ -393,7 +427,12 @@ function walkComponent(
   fn: Function,
   props: Record<string, any>,
   opts: WalkOptions,
+  ref?: unknown,
 ): void {
+  if (opts.onBrowserBailout) {
+    opts = { ...opts, componentStack: `\n    at ${(fn as any).displayName || fn.name || 'Anonymous'}${opts.componentStack || ''}` }
+  }
+  try {
   if ((fn as any).prototype?.isReactComponent) {
     const ctxType = (fn as any).contextType
     const ctxValue = ctxType ? ctxType._currentValue : undefined
@@ -407,8 +446,15 @@ function walkComponent(
     walkNode(instance.render(), opts)
     return
   }
-  const rendered = (fn as any)(props)
+  const rendered = (fn as any)(props, ref)
   walkNode(rendered, opts)
+  } catch (error) {
+    if (opts.thrownInfo && !opts.thrownInfo.componentStack) opts.thrownInfo.componentStack = opts.componentStack
+    if (isBrowserError(error) && !(error as any).componentStack) {
+      Object.defineProperty(error, 'componentStack', { value: opts.componentStack })
+    }
+    throw error
+  }
 }
 
 function walkSuspense(
@@ -423,26 +469,37 @@ function walkSuspense(
   // Try to render the children synchronously. If a thenable is thrown,
   // record the boundary and emit the fallback.
   const childParts: string[] = []
+  const nested: SuspendedBoundary[] = []
+  const thrownInfo: { componentStack?: string | undefined } = {}
   const childEmit = (s: string) => childParts.push(s)
+  const resourceScope: ResourceScope | undefined = currentSSRFrame().shellFlushed ? {} : undefined
   try {
     walkNode(props.children, {
+      ...opts,
+      resourceScope,
+      thrownInfo,
       emit: childEmit,
-      onSuspend: opts.onSuspend,
+      onSuspend: opts.onSuspend ? (boundary) => nested.push(boundary) : undefined,
       nextBoundaryId: opts.nextBoundaryId,
     })
   } catch (thenable: any) {
-    if (isThenable(thenable)) {
+    nested.length = 0
+    if (isThenable(thenable) || isBrowserError(thenable)) {
       const fallbackParts: string[] = []
-      try {
         walkNode(props.fallback, {
+          ...opts,
           emit: (s) => fallbackParts.push(s),
-          onSuspend: opts.onSuspend,
+          onSuspend: opts.onSuspend ? (boundary) => nested.push(boundary) : undefined,
           nextBoundaryId: opts.nextBoundaryId,
         })
-      } catch {
-        // Fallback suspending is unsupported; emit nothing
+      if (isBrowserError(thenable)) {
+        opts.onBrowserBailout?.(thenable, { componentStack: (thenable as any).componentStack || opts.componentStack || '' })
+        opts.emit(`<!--$!${id}-->${fallbackParts.join('')}<!--/$-->`)
+        for (const boundary of nested) opts.onSuspend?.(boundary)
+        return
       }
       emitBoundary(opts, id, fallbackParts.join(''))
+      for (const boundary of nested) opts.onSuspend?.(boundary)
 
       if (opts.onSuspend) {
         opts.onSuspend({
@@ -451,6 +508,7 @@ function walkSuspense(
           children: props.children,
           thenable,
           contextSnapshot,
+          componentStack: thrownInfo.componentStack || opts.componentStack || '',
         })
       }
       return
@@ -458,6 +516,8 @@ function walkSuspense(
     throw thenable
   }
 
+  if (resourceScope) currentSSRFrame().resources?.mergeScope(resourceScope, opts.resourceScope)
+
   // Children rendered fully — emit them wrapped in resolved-boundary markers
   // (`<!--$N-->` / `<!--/$-->`). Without markers, the client hydrator has no
   // way to know this subtree is inside a Suspense, so if the client version
@@ -468,6 +528,7 @@ function walkSuspense(
   opts.emit(`<!--$${id}-->`)
   opts.emit(childParts.join(''))
   opts.emit(`<!--/$-->`)
+  for (const boundary of nested) opts.onSuspend?.(boundary)
 }
 
 function emitBoundary(opts: WalkOptions, id: number, fallbackHTML: string): void {
diff --git a/vite/index.ts b/vite/index.ts
index d63ce05..11ee8aa 100644
--- a/vite/index.ts
+++ b/vite/index.ts
@@ -12,6 +12,12 @@ export type RedactPreset = 'nano' | 'full'
  * configs as autocompleted options.
  */
 export interface RedactFeatures {
+  /** Activity visibility, retained state and disconnected effects. */
+  activity?: boolean
+  /** DOM instances, events, focus, layout and observers for Fragment refs. */
+  fragmentRefs?: boolean
+  /** Experimental native ViewTransition animations. Opt-in until snapshot parity is complete. */
+  viewTransitions?: boolean
   /**
    * `createPortal`. When `false`, portal elements render in place as a
    * Fragment (the `container` prop is ignored). `renderPortal` and its
@@ -72,6 +78,9 @@ export interface RedactFeatures {
 }
 
 interface ResolvedFeatures {
+  activity: boolean
+  fragmentRefs: boolean
+  viewTransitions: boolean
   portal: boolean
   context: boolean
   suspense: boolean
@@ -85,11 +94,13 @@ interface ResolvedFeatures {
 const PRESET_DEFAULTS: Record<RedactPreset, ResolvedFeatures> = {
   // Opt-in: everything off. Turn individual features on via `features`.
   nano: {
+    activity: false, fragmentRefs: false, viewTransitions: false,
     portal: false, context: false, suspense: false, memo: false,
     forwardRef: false, lazy: false, classComponents: false, hydration: false,
   },
   // Opt-out: everything on (drop-in React parity). Turn features off via `features`.
   full: {
+    activity: true, fragmentRefs: true, viewTransitions: false,
     portal: true, context: true, suspense: true, memo: true,
     forwardRef: true, lazy: true, classComponents: true, hydration: true,
   },
@@ -101,6 +112,9 @@ function resolveFeatures(
 ): ResolvedFeatures {
   const p = PRESET_DEFAULTS[preset]
   return {
+    activity: overrides.activity ?? p.activity,
+    fragmentRefs: overrides.fragmentRefs ?? p.fragmentRefs,
+    viewTransitions: overrides.viewTransitions ?? p.viewTransitions,
     portal: overrides.portal ?? p.portal,
     context: overrides.context ?? p.context,
     suspense: overrides.suspense ?? p.suspense,
@@ -166,7 +180,10 @@ const ALIASES: Record<string, string> = {
   'react/jsx-dev-runtime': '@tanstack/redact/jsx-dev-runtime',
   'react/compiler-runtime': '@tanstack/redact/compiler-runtime',
   'react-dom/client': '@tanstack/redact/dom-client',
+  'react-dom/server.browser': '@tanstack/redact/server',
+  'react-dom/server.bun': '@tanstack/redact/server',
   'react-dom/server.edge': '@tanstack/redact/server',
+  'react-dom/server.node': '@tanstack/redact/server',
   'react-dom/static.edge': '@tanstack/redact/server',
   'react-dom/server': '@tanstack/redact/server',
   'react-dom/test-utils': '@tanstack/redact/dom-test-utils',
@@ -225,10 +242,8 @@ function resolveExport(packageDir: string, sub: string): string | null {
   }
   const key = sub ? './' + sub : '.'
   const exp = pkg.exports?.[key]
-  // Prefer published `import` (dist/.js) over `source` — dist is a single
-  // transformed bundle so Vite's dep optimizer doesn't thrash on dozens of
-  // individual source files. The package keeps cross-subpath imports
-  // external, so there's still only one runtime instance.
+  // Prefer published JavaScript over TypeScript sources. Dist preserves one
+  // file per module, so subpath imports share state and feature boundaries.
   const pick = (v: any): string | null => {
     if (typeof v === 'string') return v
     if (v && typeof v === 'object') {
@@ -388,11 +403,12 @@ export function redact(options: RedactOptions = {}): any {
       // if the flag is off. The stub registers a graceful-degradation
       // matcher (e.g. Portal → Fragment) so user code keeps working.
       if (importer && /[\\/]features[\\/]index\.[jt]sx?$/.test(importer)) {
-        const m = id.match(/^\.\/([a-z-]+)$/)
+        const m = id.match(/^\.\/([a-z-]+)(\/index\.js)?$/)
         if (m) {
-          const name = m[1] as keyof ResolvedFeatures
+          const dir = m[1]!
+          const name = (dir === 'forward-ref' ? 'forwardRef' : dir === 'fragment-refs' ? 'fragmentRefs' : dir === 'view-transition' ? 'viewTransitions' : dir === 'class' ? 'classComponents' : dir) as keyof ResolvedFeatures
           if (name in features && !features[name]) {
-            const r = await this.resolve(`./${name}/stub`, importer, {
+            const r = await this.resolve(`./${dir}/stub${m[2] ? '.js' : ''}`, importer, {
               ...opts,
               skipSelf: true,
             })
@@ -401,13 +417,14 @@ export function redact(options: RedactOptions = {}): any {
         }
       }
 
-      // Hydration swap: hydration isn't self-registering, so it's imported
-      // from reconcile.ts, root.ts, and the Suspense/Lazy feature modules.
-      // Any specifier ending in `/hydration` that resolves to our feature
-      // module gets redirected to the stub when the flag is off.
-      if (!features.hydration && importer && /[\\/]hydration$/.test(id)) {
+      // Peer imports must use the same feature selection as the registration
+      // entrypoint, or an enabled feature can bring a disabled one back in.
+      const peer = id.match(/[\\/](context|hydration|fragment-refs|view-transition)(?:[\\/]index\.js)?$/)
+      const peerKey = peer?.[1] === 'fragment-refs' ? 'fragmentRefs' : peer?.[1] === 'view-transition' ? 'viewTransitions' : peer?.[1] as 'context' | 'hydration' | undefined
+      if (importer && peer && peerKey && !features[peerKey]) {
         const r = await this.resolve(id, importer, { ...opts, skipSelf: true })
-        if (r && /features[\\/]hydration[\\/]index\.(ts|js)$/.test(r.id)) {
+        const resolvedFeature = r?.id.match(/features[\\/](context|hydration|fragment-refs|view-transition)[\\/]index\.(ts|js)$/)
+        if (resolvedFeature?.[1] === peer[1]) {
           return r.id.replace(/index\.(ts|js)$/, 'stub.$1')
         }
       }