diff --git a/packages/core/src/eventHandler.ts b/packages/core/src/eventHandler.ts
index 75a543b05..43714dcef 100644
--- a/packages/core/src/eventHandler.ts
+++ b/packages/core/src/eventHandler.ts
@@ -3,10 +3,17 @@ import debounce from './debounce'
 import { fireNavigateEvent } from './events'
 import { history } from './history'
 import { router } from './index'
+import {
+  layerClosing,
+  layerDismissedByRestore,
+  layersOf,
+  recordHistoryEntry,
+  restoreKeepsBase,
+  withAddressHash,
+} from './layers'
 import { page as currentPage } from './page'
 import { Scroll } from './scroll'
-import { GlobalEvent, GlobalEventNames, GlobalEventResult, InternalEvent } from './types'
-import { hrefToUrl } from './url'
+import { GlobalEvent, GlobalEventNames, GlobalEventResult, InternalEvent, LayerState } from './types'
 
 class EventHandler {
   protected internalListeners: {
@@ -50,6 +57,7 @@ class EventHandler {
   }
 
   public onMissingHistoryItem() {
+    layerClosing.settleUnwind()
     // At this point, the user has probably cleared the state
     // Mark the current page as cleared so that we don't try to write anything to it.
     currentPage.clear()
@@ -82,10 +90,10 @@ class EventHandler {
     const state = event.state || null
 
     if (state === null) {
-      const url = hrefToUrl(currentPage.get().url)
-      url.hash = window.location.hash
-
-      history.replaceState({ ...currentPage.getWithoutFlashData(), url: url.href })
+      // An entry the browser wrote itself, usually for an in-page anchor. It stands between the
+      // stack and the entry beneath it, so closing a layer has one more step to take back.
+      layerClosing.settleUnwind()
+      history.replaceState(withAddressHash(recordHistoryEntry(currentPage.getWithoutFlashData()), window.location.hash))
       Scroll.reset()
 
       return
@@ -103,28 +111,64 @@ class EventHandler {
           return
         }
 
-        // Cancel ongoing requests except prefetch requests
-        router.cancelAll({ prefetch: false })
+        // A close's unwind steps back onto the page that is staying, so anything in flight for it
+        // belongs to the page coming back. A genuine back navigates away, and takes its requests.
+        const unwindingOntoTheSamePage = layerClosing.isUnwinding() && currentPage.isTheSame(data)
 
-        currentPage.setQuietly(data, { preserveState: false }).then(() => {
-          Scroll.restore(history.getScrollRegions())
-          fireNavigateEvent(currentPage.get())
+        if (!unwindingOntoTheSamePage) {
+          // Cancel ongoing requests except prefetch requests
+          router.cancelAll({ prefetch: false })
+        }
 
-          const pendingDeferred: Record<string, string[]> = {}
-          const pageProps = currentPage.get().props
+        if (layerClosing.unwindLandsItself()) {
+          layerClosing.settleUnwind()
+          return
+        }
 
-          for (const [group, props] of Object.entries(data.initialDeferredProps ?? data.deferredProps ?? {})) {
-            const missing = props.filter((prop) => get(pageProps, prop) === undefined)
+        if (data.component === '') {
+          layerClosing.settleUnwind()
+          router.visit(data.url, { replace: true, preserveScroll: true, preserveState: true })
+          return
+        }
 
-            if (missing.length > 0) {
-              pendingDeferred[group] = missing
+        // Back over a single layer dismisses it, so it leaves like every other dismissal: marked,
+        // given its exit, taken off once the shell reports.
+        const dismissed = layerClosing.isUnwinding() ? undefined : layerDismissedByRestore(currentPage.get(), data)
+        const dismissal =
+          dismissed && !layerClosing.isClosing(dismissed.id)
+            ? layerClosing.close(dismissed.id, { absorbed: true })
+            : Promise.resolve()
+
+        // The restore lands on the page already on screen, so remounting it would throw its state away.
+        const landsOnThePageOnScreen =
+          unwindingOntoTheSamePage || !!dismissed || restoreKeepsBase(currentPage.get(), data)
+
+        dismissal
+          .then(() => currentPage.setQuietly(data, { preserveState: landsOnThePageOnScreen }))
+          .then(() => {
+            layerClosing.settleUnwind()
+            Scroll.restore(history.getScrollRegions())
+            fireNavigateEvent(currentPage.get())
+
+            for (const tier of [data, ...layersOf(data)]) {
+              const pendingDeferred: Record<string, string[]> = {}
+
+              for (const [group, props] of Object.entries(tier.initialDeferredProps ?? tier.deferredProps ?? {})) {
+                const missing = props.filter((prop) => get(tier.props, prop) === undefined)
+
+                if (missing.length > 0) {
+                  pendingDeferred[group] = missing
+                }
+              }
+
+              if (Object.keys(pendingDeferred).length > 0) {
+                this.fireInternalEvent('loadDeferredProps', {
+                  deferredProps: pendingDeferred,
+                  layerId: (tier as LayerState).id,
+                })
+              }
             }
-          }
-
-          if (Object.keys(pendingDeferred).length > 0) {
-            this.fireInternalEvent('loadDeferredProps', pendingDeferred)
-          }
-        })
+          })
       })
       .catch(() => {
         this.onMissingHistoryItem()
diff --git a/packages/core/src/events.ts b/packages/core/src/events.ts
index 2f29ad76b..206c25d6e 100644
--- a/packages/core/src/events.ts
+++ b/packages/core/src/events.ts
@@ -1,3 +1,4 @@
+import { addressOf } from './layers'
 import { GlobalEventDetails, GlobalEventNames, GlobalEventTrigger } from './types'
 
 function fireEvent<TEventName extends GlobalEventNames>(
@@ -32,7 +33,7 @@ export const fireBeforeUpdateEvent: GlobalEventTrigger<'beforeUpdate'> = (page)
 }
 
 export const fireNavigateEvent: GlobalEventTrigger<'navigate'> = (page, { cached = false, visitId } = {}) => {
-  return fireEvent('navigate', { detail: { page, cached, visitId } })
+  return fireEvent('navigate', { detail: { page, url: addressOf(page), cached, visitId } })
 }
 
 export const fireClientVisitEvent: GlobalEventTrigger<'clientVisit'> = (page, { replace, visitId }) => {
@@ -48,7 +49,7 @@ export const fireStartEvent: GlobalEventTrigger<'start'> = (visit) => {
 }
 
 export const fireSuccessEvent: GlobalEventTrigger<'success'> = (page, { visitId } = {}) => {
-  return fireEvent('success', { detail: { page, visitId } })
+  return fireEvent('success', { detail: { page, url: addressOf(page), visitId } })
 }
 
 export const firePrefetchedEvent: GlobalEventTrigger<'prefetched'> = (response, visit) => {
diff --git a/packages/core/src/head.ts b/packages/core/src/head.ts
index 7cc03cc21..a9f124421 100644
--- a/packages/core/src/head.ts
+++ b/packages/core/src/head.ts
@@ -1,5 +1,6 @@
 import debounce from './debounce'
-import type { HeadManager, HeadManagerOnUpdateCallback, Page, ServerHeadOption } from './types'
+import { topPageOf } from './layers'
+import type { HeadManager, HeadManagerOnUpdateCallback, LayerState, Page, ServerHeadOption } from './types'
 
 const serverHeadProviderId = 'server'
 
@@ -17,8 +18,11 @@ export function resolveServerHead(page: Page, serverHead?: ServerHeadOption): st
     return []
   }
 
+  // The top layer's head wins, exactly as a <Head> in a layer does.
+  const headPage = topPageOf(page)
+
   const elements =
-    typeof serverHead === 'function' ? serverHead(page) : page.props[serverHead === true ? 'head' : serverHead]
+    typeof serverHead === 'function' ? serverHead(headPage) : headPage.props[serverHead === true ? 'head' : serverHead]
 
   if (!Array.isArray(elements)) {
     return []
@@ -96,15 +100,18 @@ export default function createHeadManager(
   titleCallback: (title: string) => string,
   onUpdate: HeadManagerOnUpdateCallback,
   initialServerHead: Array<string> = [],
+  stack: () => LayerState[] = () => [],
 ): HeadManager {
   const states: Record<string, Array<string>> = initialServerHead.length
     ? { [serverHeadProviderId]: initialServerHead }
     : {}
+  const providers: Record<string, string | undefined> = {}
   let lastProviderId = 0
 
-  function connect(): string {
+  function connect(layerId?: string): string {
     const id = (lastProviderId += 1)
     states[id] = []
+    providers[id] = layerId
     return id.toString()
   }
 
@@ -114,12 +121,14 @@ export default function createHeadManager(
     }
 
     delete states[id]
+    delete providers[id]
     commit()
   }
 
-  function reconnect(id: string): void {
+  function reconnect(id: string, layerId?: string): void {
     if (Object.keys(states).indexOf(id) === -1) {
       states[id] = []
+      providers[id] = layerId
     }
   }
 
@@ -144,8 +153,15 @@ export default function createHeadManager(
   function collect(): Array<string> {
     const title = titleCallback('')
     const serverHead = states[serverHeadProviderId] || []
+
+    const open = stack()
+    // Ordered by the stack, so the top layer's title wins. A provider naming no layer ranks below
+    // every layer, which is where the base belongs.
+    const rankOf = (id: string): number => open.findIndex((layer) => layer.id === providers[id])
+
     const providerHead = Object.keys(states)
       .filter((id) => id !== serverHeadProviderId)
+      .sort((a, b) => rankOf(a) - rankOf(b))
       .flatMap((id) => states[id])
 
     const defaults: Record<string, string> = {
@@ -187,11 +203,11 @@ export default function createHeadManager(
   return {
     forceUpdate: commit,
     updateServerHead,
-    createProvider: function () {
-      const id = connect()
+    createProvider: function (layerId?: string) {
+      const id = connect(layerId)
 
       return {
-        reconnect: () => reconnect(id),
+        reconnect: () => reconnect(id, layerId),
         update: (elements) => update(id, elements),
         disconnect: () => disconnect(id),
       }
diff --git a/packages/core/src/history.ts b/packages/core/src/history.ts
index 9e311b445..c8ef890e9 100644
--- a/packages/core/src/history.ts
+++ b/packages/core/src/history.ts
@@ -1,6 +1,8 @@
-import { cloneDeep, isEqual } from 'es-toolkit'
+import { isEqual } from 'es-toolkit'
 import { decryptHistory, encryptHistory, historySessionStorageKeys } from './encryption'
 import { eventHandler } from './eventHandler'
+import { addressOf, encryptsHistory, layerClosing, mapLayers, promoteDeepestLayer } from './layers'
+import { toStructuredCloneable } from './objectUtils'
 import { page as currentPage } from './page'
 import Queue from './queue'
 import { SessionStorage } from './sessionStorage'
@@ -18,21 +20,34 @@ class History {
   // We need initialState for `restore`
   protected initialState: Partial<Page> | null = null
 
-  public remember(data: unknown, key: string): void {
+  public remember(data: unknown, key: string, layerId?: string): void {
+    if (isServer) {
+      return
+    }
+
+    const current = currentPage.get().rememberedState ?? {}
+
     this.replaceState({
       ...currentPage.getWithoutFlashData(),
-      rememberedState: {
-        ...(currentPage.get()?.rememberedState ?? {}),
-        [key]: data,
-      },
+      rememberedState: layerId
+        ? { ...current, [layerId]: { ...(current[layerId] ?? {}), [key]: data } }
+        : { ...current, [key]: data },
     })
   }
 
-  public restore(key: string): unknown {
+  public restore(key: string, layerId?: string): unknown {
     if (!isServer) {
-      return this.current[this.rememberedState]?.[key] !== undefined
-        ? this.current[this.rememberedState]?.[key]
-        : this.initialState?.[this.rememberedState]?.[key]
+      const current = this.current[this.rememberedState] as Record<string, unknown> | undefined
+      const initial = this.initialState?.[this.rememberedState] as Record<string, unknown> | undefined
+
+      if (layerId) {
+        const stored = (current?.[layerId] ?? {}) as Record<string, unknown>
+        const storedInitial = (initial?.[layerId] ?? {}) as Record<string, unknown>
+
+        return stored[key] !== undefined ? stored[key] : storedInitial[key]
+      }
+
+      return current?.[key] !== undefined ? current?.[key] : initial?.[key]
     }
   }
 
@@ -52,7 +67,7 @@ class History {
       return this.getPageData(page).then((data) => {
         // Defer history.pushState to the next event loop tick to prevent timing conflicts.
         // Ensure any previous history.replaceState completes before pushState is executed.
-        const doPush = () => this.doPushState({ page: data }, page.url).then(() => cb?.())
+        const doPush = () => this.doPushState({ page: data }, addressOf(page)).then(() => cb?.())
 
         if (isChromeIOS) {
           return new Promise((resolve) => {
@@ -67,23 +82,22 @@ class History {
 
   protected clonePageProps(page: Page): Page {
     try {
-      structuredClone(page.props)
+      structuredClone(page)
       return page
     } catch {
-      // Props contain non-serializable data (e.g., Proxies, functions).
-      // Clone them to ensure they can be safely stored in browser history.
-      return {
-        ...page,
-        props: cloneDeep(page.props),
-      }
+      // Props contain non-serializable data (e.g., Proxies, functions), which
+      // the browser cannot store in history. Drop what it cannot carry.
+      return toStructuredCloneable(page)
     }
   }
 
   protected getPageData(page: Page): Promise<Page | ArrayBuffer> {
-    const pageWithClonedProps = this.clonePageProps(page)
+    const open = layerClosing.withoutClosingLayers(page)
+    const entry = open.component === '' ? promoteDeepestLayer(open) : open
+    const pageWithClonedProps = this.clonePageProps(entry)
 
     return new Promise((resolve) => {
-      return page.encryptHistory ? encryptHistory(pageWithClonedProps).then(resolve) : resolve(pageWithClonedProps)
+      return encryptsHistory(entry) ? encryptHistory(pageWithClonedProps).then(resolve) : resolve(pageWithClonedProps)
     })
   }
 
@@ -117,20 +131,24 @@ class History {
     return pageData instanceof ArrayBuffer ? decryptHistory(pageData) : Promise.resolve(pageData)
   }
 
-  public saveScrollPositions(scrollRegions: ScrollRegion[]): void {
+  public saveScrollPositions(scrollRegions: ScrollRegion[], scrollRegionLayers?: (string | null)[]): void {
     queue.add(() => {
       return Promise.resolve().then(() => {
         if (!window.history.state?.page) {
           return
         }
 
-        if (isEqual(this.getScrollRegions(), scrollRegions)) {
+        if (
+          isEqual(this.getScrollRegions(), scrollRegions) &&
+          isEqual(this.getScrollRegionLayers() ?? [], scrollRegionLayers ?? [])
+        ) {
           return
         }
 
         return this.doReplaceState({
           page: window.history.state.page,
           scrollRegions,
+          scrollRegionLayers,
         })
       })
     })
@@ -159,6 +177,10 @@ class History {
     return window.history.state?.scrollRegions || []
   }
 
+  public getScrollRegionLayers(): (string | null)[] | undefined {
+    return window.history.state?.scrollRegionLayers
+  }
+
   public getDocumentScrollPosition(): ScrollRegion {
     return window.history.state?.documentScrollPosition || { top: 0, left: 0 }
   }
@@ -171,7 +193,12 @@ class History {
 
     // Exclude flash from the merge to prevent callers (like router.remember())
     // from accidentally clearing flash data on the current page.
-    const { flash, ...pageWithoutFlash } = page
+    const live = currentPage.get().layers ?? []
+    const { flash, ...pageWithoutFlash } = mapLayers(page, (layer) => ({
+      ...layer,
+      flash: live.find((open) => open.id === layer.id)?.flash ?? {},
+    }))
+
     currentPage.merge(pageWithoutFlash)
 
     if (isServer) {
@@ -189,7 +216,7 @@ class History {
       return this.getPageData(page).then((data) => {
         // Defer history.replaceState to the next event loop tick to prevent timing conflicts.
         // Ensure any previous history.pushState completes before replaceState is executed.
-        const doReplace = () => this.doReplaceState({ page: data }, page.url).then(() => cb?.())
+        const doReplace = () => this.doReplaceState({ page: data }, addressOf(page)).then(() => cb?.())
 
         if (isChromeIOS) {
           return new Promise((resolve) => {
@@ -202,6 +229,12 @@ class History {
     })
   }
 
+  // Steps back over the entries a closing stack stands on, behind the writes queued ahead of it:
+  // under encryption those are genuinely async, and stepping early would cross the wrong entry.
+  public back(entries: number): void {
+    queue.add(() => Promise.resolve().then(() => window.history.go(-entries)))
+  }
+
   protected isHistoryThrottleError(error: unknown): error is Error & { name: 'SecurityError' } {
     return (
       error instanceof Error &&
@@ -232,14 +265,19 @@ class History {
     data: {
       page: Page | ArrayBuffer
       scrollRegions?: ScrollRegion[]
+      scrollRegionLayers?: (string | null)[]
       documentScrollPosition?: ScrollRegion
     },
     url?: string,
   ): Promise<void> {
     return this.withThrottleProtection(() => {
+      const { scrollRegionLayers, ...state } = data
+      const carriedLayers = 'scrollRegionLayers' in data ? scrollRegionLayers : window.history.state?.scrollRegionLayers
+
       window.history.replaceState(
         {
-          ...data,
+          ...state,
+          ...(carriedLayers !== undefined && { scrollRegionLayers: carriedLayers }),
           scrollRegions: data.scrollRegions ?? window.history.state?.scrollRegions,
           documentScrollPosition: data.documentScrollPosition ?? window.history.state?.documentScrollPosition,
         },
@@ -253,6 +291,7 @@ class History {
     data: {
       page: Page | ArrayBuffer
       scrollRegions?: ScrollRegion[]
+      scrollRegionLayers?: (string | null)[]
       documentScrollPosition?: ScrollRegion
     },
     url: string,
@@ -261,6 +300,13 @@ class History {
       try {
         window.history.pushState(data, '', url)
       } catch (error) {
+        if (this.isHistoryThrottleError(error)) {
+          console.error(error.message)
+          eventHandler.fireInternalEvent('historyEntryDropped', url)
+
+          return
+        }
+
         if (!this.isQuotaExceededError(error)) {
           throw error
         }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 5c519c349..3409b5ea4 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -23,9 +23,28 @@ export {
   type LayoutCallbackReturn,
   type LayoutDefinition,
   type LayoutPropsStore,
+  type LayoutSlot,
+  type SetLayoutProps,
+  emptyLayoutSlot,
 } from './layout'
+export { createLayerApi, type LayerApi } from './router'
+export { cancelLayer, layerDialogAttributes, lockScroll, observeExit, raiseLayer, type LayerExit } from './layerDialog'
+export {
+  layerShellProps,
+  layerTransitionName,
+  layoutPageOf,
+  normalizeLoading,
+  resolveInitialPage,
+  topPageOf,
+  type LayerHandle,
+} from './layers'
 export { shouldIntercept, shouldNavigate } from './navigationEvents'
-export { isPathOrSubPath, partialReloadRequestsProp, partialReloadRequestsSomeProps } from './partialReload'
+export {
+  isPathOrSubPath,
+  partialReloadFillsDeferred,
+  partialReloadRequestsProp,
+  partialReloadRequestsSomeProps,
+} from './partialReload'
 export { progress, default as setupProgress } from './progress'
 export { FormComponentResetSymbol, resetFormFields } from './resetFormFields'
 export { buildSSRBody } from './ssrUtils'
diff --git a/packages/core/src/infiniteScroll/data.ts b/packages/core/src/infiniteScroll/data.ts
index c4f9f6001..a27bbad8f 100644
--- a/packages/core/src/infiniteScroll/data.ts
+++ b/packages/core/src/infiniteScroll/data.ts
@@ -1,4 +1,5 @@
 import { ActiveVisit, router } from '../index'
+import { tierOf } from '../layers'
 import { page as currentPage } from '../page'
 import { Page, PendingVisit, ReloadOptions, ScrollProp, UseInfiniteScrollDataManager } from '../types'
 
@@ -18,6 +19,8 @@ export type InfiniteScrollPageIdentifier = string | number | null
 export type InfiniteScrollOnCompleteDetails = { page: InfiniteScrollPageIdentifier; completed: boolean }
 
 export const useInfiniteScrollData = (options: {
+  /** @internal */
+  layerId?: string
   getPropName: () => string
   onBeforeUpdate: () => void
   onBeforePreviousRequest: () => void
@@ -35,7 +38,7 @@ export const useInfiniteScrollData = (options: {
   onReset?: () => void
 }): UseInfiniteScrollDataManager => {
   const getScrollPropFromCurrentPage = (): ScrollProp => {
-    const scrollProp = currentPage.get().scrollProps?.[options.getPropName()]
+    const scrollProp = tierOf(currentPage.get(), options.layerId).scrollProps?.[options.getPropName()]
 
     if (scrollProp) {
       return scrollProp
@@ -72,7 +75,7 @@ export const useInfiniteScrollData = (options: {
   if (typeof window !== 'undefined') {
     resetState()
 
-    const rememberedState = router.restore(getRememberKey()) as InfiniteScrollState | undefined
+    const rememberedState = router.restore(getRememberKey(), options.layerId) as InfiniteScrollState | undefined
 
     if (
       rememberedState &&
@@ -124,6 +127,7 @@ export const useInfiniteScrollData = (options: {
         requestCount: state.requestCount,
       } as InfiniteScrollState,
       getRememberKey(),
+      options.layerId,
     )
   }
 
@@ -144,6 +148,7 @@ export const useInfiniteScrollData = (options: {
       ...reloadOptions,
       data: { ...(reloadOptions.data || {}), [getPageName()]: page },
       only: [...(reloadOptions.only || []), options.getPropName()],
+      layerId: options.layerId,
       preserveUrl: true, // we handle URL updates manually via useInfiniteScrollQueryString()
       headers: {
         [MERGE_INTENT_HEADER]: side === 'previous' ? 'prepend' : 'append',
diff --git a/packages/core/src/infiniteScroll/queryString.ts b/packages/core/src/infiniteScroll/queryString.ts
index 3b523cccf..ce2b4f652 100644
--- a/packages/core/src/infiniteScroll/queryString.ts
+++ b/packages/core/src/infiniteScroll/queryString.ts
@@ -1,6 +1,7 @@
 import { hrefToUrl, router, urlHasProtocol, urlToString } from '..'
 import debounce from '../debounce'
 import { getElementsInViewportFromCollection } from '../domUtils'
+import { tierOf } from '../layers'
 import { page as currentPage } from './../page'
 import Queue from './../queue'
 import { getPageFromElement } from './elements'
@@ -8,9 +9,9 @@ import { getPageFromElement } from './elements'
 // Shared queue among all instances to ensure URL updates are processed sequentially
 const queue = new Queue<Promise<void>>()
 
-let initialUrl: URL | null
-let payloadUrl: URL | null
-let initialUrlWasAbsolute: boolean | null = null
+// The url each tier is accumulating pages into, until the queue drains and writes it. Keyed by
+// tier, so a layer paginating never accumulates into the page beneath it nor writes that url.
+const syncing = new Map<string, { initial: URL; payload: URL; absolute: boolean }>()
 
 /**
  * As users scroll through infinite content, this system updates the URL to reflect
@@ -18,30 +19,39 @@ let initialUrlWasAbsolute: boolean | null = null
  * so that the URL reflects whichever page has the most visible items.
  */
 export const useInfiniteScrollQueryString = (options: {
+  layerId?: string
   getPageName: () => string
   getItemsElement: () => HTMLElement
   shouldPreserveUrl: () => boolean
 }) => {
   let enabled = true
 
+  const tier = options.layerId ?? ''
+
   const queuePageUpdate = (page: string) => {
     queue
       .add(() => {
         return new Promise((resolve) => {
           if (!enabled) {
-            initialUrl = payloadUrl = null
+            syncing.delete(tier)
             return resolve()
           }
 
-          if (!initialUrl || !payloadUrl) {
-            const currentPageUrl = currentPage.get().url
-            initialUrl = hrefToUrl(currentPageUrl)
-            payloadUrl = hrefToUrl(currentPageUrl)
-            initialUrlWasAbsolute = urlHasProtocol(currentPageUrl)
+          let sync = syncing.get(tier)
+
+          if (!sync) {
+            const tierUrl = tierOf(currentPage.get(), options.layerId).url
+
+            if (tierUrl === null) {
+              return resolve()
+            }
+
+            sync = { initial: hrefToUrl(tierUrl), payload: hrefToUrl(tierUrl), absolute: urlHasProtocol(tierUrl) }
+            syncing.set(tier, sync)
           }
 
           const pageName = options.getPageName()
-          const searchParams = payloadUrl.searchParams
+          const searchParams = sync.payload.searchParams
 
           // Clean URLs: don't show ?page=1 in the URL, just remove the parameter entirely
           if (page === '1') {
@@ -54,22 +64,19 @@ export const useInfiniteScrollQueryString = (options: {
         })
       })
       .finally(() => {
-        if (
-          enabled &&
-          initialUrl &&
-          payloadUrl &&
-          initialUrl.href !== payloadUrl.href &&
-          initialUrlWasAbsolute !== null
-        ) {
+        const sync = syncing.get(tier)
+
+        if (enabled && sync && sync.initial.href !== sync.payload.href) {
           // Update URL without triggering a page reload or affecting scroll position
           router.replace({
-            url: urlToString(payloadUrl, initialUrlWasAbsolute),
+            url: urlToString(sync.payload, sync.absolute),
+            layerId: options.layerId,
             preserveScroll: true,
             preserveState: true,
           })
         }
 
-        initialUrl = payloadUrl = initialUrlWasAbsolute = null
+        syncing.delete(tier)
       })
   }
 
diff --git a/packages/core/src/initialVisit.ts b/packages/core/src/initialVisit.ts
index dc629621b..c6ceb9f1b 100644
--- a/packages/core/src/initialVisit.ts
+++ b/packages/core/src/initialVisit.ts
@@ -1,8 +1,10 @@
 import { eventHandler } from './eventHandler'
 import { fireFlashEvent, fireNavigateEvent } from './events'
 import { history } from './history'
+import { missingBase } from './layers'
 import { navigationType } from './navigationType'
 import { page as currentPage } from './page'
+import { walkTo } from './response'
 import { Scroll } from './scroll'
 import { SessionStorage } from './sessionStorage'
 import { LocationVisit, Page } from './types'
@@ -36,7 +38,8 @@ export class InitialVisit {
       .then((data) => {
         const visitId = uid()
 
-        currentPage.set(data, { preserveScroll: true, preserveState: true, visitId }).then(() => {
+        // A restore never adds an entry, not even where the stack it brings back opens layers.
+        currentPage.set(data, { replace: true, preserveScroll: true, preserveState: true, visitId }).then(() => {
           Scroll.restore(scrollRegions)
           fireNavigateEvent(currentPage.get(), { visitId })
         })
@@ -60,10 +63,6 @@ export class InitialVisit {
 
     SessionStorage.remove(SessionStorage.locationVisitKey)
 
-    if (typeof window !== 'undefined') {
-      currentPage.setUrlHash(window.location.hash)
-    }
-
     history
       .decrypt(currentPage.get())
       .then(() => {
@@ -72,20 +71,13 @@ export class InitialVisit {
         const scrollRegions = history.getScrollRegions()
         currentPage.remember(rememberedState)
 
-        currentPage
-          .set(currentPage.get(), {
-            preserveScroll: locationVisit.preserveScroll,
-            preserveState: true,
-            initialRender: true,
-            visitId,
-          })
-          .then(() => {
-            if (locationVisit.preserveScroll) {
-              Scroll.restore(scrollRegions)
-            }
-
-            this.fireInitialEvents(visitId)
-          })
+        this.setInitialPage({ preserveScroll: locationVisit.preserveScroll, visitId }).then(() => {
+          if (locationVisit.preserveScroll) {
+            Scroll.restore(scrollRegions)
+          }
+
+          this.fireInitialEvents(visitId)
+        })
       })
       .catch(() => {
         eventHandler.onMissingHistoryItem()
@@ -95,23 +87,34 @@ export class InitialVisit {
   }
 
   protected static handleDefault(): void {
-    if (typeof window !== 'undefined') {
-      currentPage.setUrlHash(window.location.hash)
-    }
-
     const visitId = uid()
 
-    currentPage
-      .set(currentPage.get(), { preserveScroll: true, preserveState: true, initialRender: true, visitId })
-      .then(() => {
-        if (navigationType.isReload()) {
-          Scroll.restore(history.getScrollRegions())
-        } else {
-          Scroll.scrollToAnchor()
-        }
+    this.setInitialPage({ preserveScroll: true, visitId }).then(() => {
+      if (navigationType.isReload()) {
+        Scroll.restore(history.getScrollRegions())
+      } else {
+        Scroll.scrollToAnchor()
+      }
 
-        this.fireInitialEvents(visitId)
-      })
+      this.fireInitialEvents(visitId)
+    })
+  }
+
+  protected static setInitialPage({
+    preserveScroll,
+    visitId,
+  }: {
+    preserveScroll?: boolean
+    visitId: string
+  }): Promise<void> {
+    const page = currentPage.get()
+    const base = missingBase(page)
+
+    return currentPage.set(page, { preserveScroll, preserveState: true, initialRender: true, visitId }).then(() => {
+      if (base !== undefined && typeof window !== 'undefined') {
+        walkTo(base)
+      }
+    })
   }
 
   protected static fireInitialEvents(visitId: string): void {
diff --git a/packages/core/src/layerDialog.ts b/packages/core/src/layerDialog.ts
new file mode 100644
index 000000000..e538ae585
--- /dev/null
+++ b/packages/core/src/layerDialog.ts
@@ -0,0 +1,198 @@
+// The `<dialog>` mechanics behind the shipped Layer, kept here so all three adapters share them and
+// an app replacing the `layer` option can build on them.
+
+import type { LayerShellProps } from './types'
+
+const exitTimeout = 2000
+
+// What the shipped Layer puts on its dialog, including the marks `raiseLayer` reads back below.
+export const layerDialogAttributes = (shell: Omit<LayerShellProps, 'close' | 'done'>) => ({
+  open: true,
+  'data-layer-index': shell.index,
+  'data-layer-top': String(shell.isTop),
+  'data-layer-closing': String(!shell.open),
+  'data-layer-type': shell.type,
+  'aria-label': shell.label,
+})
+
+// Chromium groups the close watchers of dialogs shown without user activation, so one Escape can
+// reach every dialog in the group. Only the top layer answers it; the rest cannot refuse (their
+// cancel is not cancelable), so they are re-shown once the browser has closed them.
+export function cancelLayer(event: Event, shell: Pick<LayerShellProps, 'isTop' | 'close'>): void {
+  event.preventDefault()
+
+  if (shell.isTop) {
+    shell.close()
+
+    return
+  }
+
+  const dialog = event.target as HTMLDialogElement
+
+  dialog.addEventListener(
+    'close',
+    () => {
+      if (dialog.isConnected && dialog.dataset.layerClosing !== 'true') {
+        raiseLayer(dialog, false)
+      }
+    },
+    { once: true },
+  )
+}
+
+let scrollLocks = 0
+let unlocked: { overflow: string; scrollbarGutter: string } | null = null
+
+// Locks the document's scroll, ref-counted across a stack, and returns its own release.
+export function lockScroll(): () => void {
+  const root = document.documentElement
+
+  if (scrollLocks++ === 0) {
+    unlocked = { overflow: root.style.overflow, scrollbarGutter: root.style.scrollbarGutter }
+    root.style.overflow = 'hidden'
+    root.style.scrollbarGutter = 'stable'
+  }
+
+  let released = false
+
+  return () => {
+    if (released) {
+      return
+    }
+
+    released = true
+
+    if (--scrollLocks === 0 && unlocked) {
+      root.style.overflow = unlocked.overflow
+      root.style.scrollbarGutter = unlocked.scrollbarGutter
+      unlocked = null
+    }
+  }
+}
+
+// Puts a dialog on top of the browser's own stack. One already in the top layer has to leave it
+// first: Chromium re-orders it in place, WebKit and Firefox leave it where it was, which sends
+// Escape to whichever layer entered the top layer last rather than the one on top of the stack.
+function showModal(dialog: HTMLDialogElement): void {
+  if (dialog.matches(':modal')) {
+    dialog.close()
+  }
+
+  dialog.removeAttribute('open')
+  dialog.showModal()
+}
+
+export function raiseLayer(dialog: HTMLDialogElement, isTop: boolean): void {
+  if (!dialog.matches(':modal')) {
+    showModal(dialog)
+  }
+
+  if (isTop) {
+    return
+  }
+
+  // A layer inserted beneath open ones mounts after them, so its showModal lands above dialogs it
+  // belongs under. Re-showing each of those, bottom to top, keeps the stack the right way up.
+  const index = Number(dialog.dataset.layerIndex)
+
+  document
+    .querySelectorAll<HTMLDialogElement>('dialog[data-layer-index]:not([data-layer-closing="true"])')
+    .forEach((above) => {
+      if (Number(above.dataset.layerIndex) > index && above.matches(':modal')) {
+        showModal(above)
+      }
+    })
+}
+
+export interface LayerExit {
+  /** The layer's `open` changed: false runs its exit, true abandons one already under way. */
+  toggle(open: boolean): void
+  teardown(): void
+}
+
+export function observeExit(dialog: () => HTMLDialogElement | null | undefined, done: () => void): LayerExit {
+  let exiting = false
+  let stop: (() => void) | null = null
+
+  const teardown = () => {
+    stop?.()
+    stop = null
+  }
+
+  return {
+    teardown,
+    toggle(open) {
+      if (open) {
+        teardown()
+        exiting = false
+
+        const el = dialog()
+
+        // An abandoned close whose exit already ran left the dialog closed, and only re-showing
+        // it puts the layer back on screen.
+        if (el && !el.matches(':modal')) {
+          raiseLayer(el, el.dataset.layerTop === 'true')
+        }
+
+        return
+      }
+
+      if (exiting) {
+        return
+      }
+
+      exiting = true
+
+      const el = dialog()
+
+      if (!el) {
+        done()
+
+        return
+      }
+
+      let finished = false
+
+      const finish = () => {
+        if (!finished) {
+          finished = true
+          teardown()
+          // Closing is what hands focus back to whatever opened the layer, and only a dialog still
+          // in the document can. Too late on unmount: React tears effects down after removing it.
+          el.close()
+          done()
+        }
+      }
+
+      // The subtree counts: a shell that slides a panel inside the dialog animates that, not the
+      // dialog. One that fills forwards stays listed once it has ended, and an endless one, a
+      // spinner say, is not something an exit can wait for.
+      const finishWhenIdle = () =>
+        requestAnimationFrame(() => {
+          const running = el
+            .getAnimations({ subtree: true })
+            .some(
+              (animation) =>
+                animation.playState === 'running' && animation.effect?.getComputedTiming().endTime !== Infinity,
+            )
+
+          if (!running) {
+            finish()
+          }
+        })
+
+      const timeout = setTimeout(finish, exitTimeout)
+
+      el.addEventListener('transitionend', finishWhenIdle)
+      el.addEventListener('animationend', finishWhenIdle)
+
+      stop = () => {
+        clearTimeout(timeout)
+        el.removeEventListener('transitionend', finishWhenIdle)
+        el.removeEventListener('animationend', finishWhenIdle)
+      }
+
+      requestAnimationFrame(finishWhenIdle)
+    },
+  }
+}
diff --git a/packages/core/src/layers.ts b/packages/core/src/layers.ts
new file mode 100644
index 000000000..33c3c04db
--- /dev/null
+++ b/packages/core/src/layers.ts
@@ -0,0 +1,1063 @@
+import { omit } from 'es-toolkit'
+import { router } from '.'
+import { history } from './history'
+import { page as currentPage } from './page'
+import {
+  BaseSnapshot,
+  Layer,
+  LayerShellProps,
+  LayerState,
+  LoadingOption,
+  LocalLayer,
+  Page,
+  PageProps,
+  ResolvedLayer,
+  UrlMethodPair,
+} from './types'
+import { hrefToUrl, isSameUrlWithoutHash } from './url'
+
+let sequence = 0
+
+// A layer's component is thrown away and remade unless the write that landed on it preserved state,
+// which is what the page's own key does for the base.
+let renderSequence = 0
+
+export const nextRenderKey = (): number => ++renderSequence
+
+export const layersOf = (page: Page): LayerState[] => page.layers ?? []
+
+export const layerAt = (page: Page, id: string | undefined): LayerState | undefined =>
+  id === undefined ? undefined : layersOf(page).find((layer) => layer.id === id)
+
+export const tierOf = (page: Page, id: string | undefined): Layer => layerAt(page, id) ?? page
+
+export const mapLayers = (page: Page, fn: (layer: LayerState) => LayerState): Page =>
+  page.layers ? { ...page, layers: page.layers.map(fn) } : page
+
+// Writes fields onto one tier: the layer the id names, or the page itself when it names none.
+export const withTier = (page: Page, id: string | undefined, fields: Partial<LayerState>): Page =>
+  id === undefined
+    ? ({ ...page, ...fields } as Page)
+    : mapLayers(page, (layer) => (layer.id === id ? { ...layer, ...fields } : layer))
+
+// History keeps ids the counter has forgotten, so an id is checked against the stack it joins.
+export const nextLayerId = (base: Page): string => {
+  const taken = new Set(layersOf(base).map((layer) => layer.id))
+
+  let id: string
+
+  do {
+    id = `layer-${++sequence}`
+  } while (taken.has(id))
+
+  return id
+}
+
+export const isLocalLayer = (target: string | URL | UrlMethodPair | LocalLayer): target is LocalLayer =>
+  typeof target === 'object' && 'component' in target
+
+// The mark's presence is what makes a response a layer, so an empty mark still counts.
+export const isLayerResponse = (page: Page): boolean => typeof page.layer === 'object' && page.layer !== null
+
+export const layerKeyOf = (response: Page): string => response.layer?.key || response.component
+
+export const layerBaseOf = (response: Page): string | undefined => response.layer?.base
+
+export const promoteLayer = (response: Page): Page => {
+  const { layers, layer, ...page } = response
+
+  return page as Page
+}
+
+// A layer composes only while the base it was dispatched from is still the one on screen.
+export const capturedBaseIsValid = ({
+  captured,
+  live,
+  dispatchedUrl,
+  dispatchedFrom,
+  opening = false,
+  layer,
+}: {
+  captured: BaseSnapshot
+  live: BaseSnapshot
+  dispatchedUrl: URL
+  dispatchedFrom?: string
+  opening?: boolean
+  layer: { url: string; key: string; base?: string }
+}): boolean => {
+  if (captured.generation !== live.generation) {
+    return false
+  }
+
+  if (opening) {
+    // The call named the layer it wanted, so a create that redirects to the record still opens it.
+    return true
+  }
+
+  // A bare router call from inside a layer carries no tier, so the stack it left stands in for one.
+  const sentFrom = dispatchedFrom ?? layersOf(captured.page).at(-1)?.id
+
+  const dispatchedTowardTheLayer = isSameUrlWithoutHash(dispatchedUrl, hrefToUrl(layer.url))
+  const theLayerIsAlreadyOpen = layersOf(live.page).some((open) => open.key === layer.key)
+  const dispatchedFromALayerStillOpen = layersOf(live.page).some((open) => open.id === sentFrom)
+  // The layer names the page it stands on and that page is on screen, so a plain create that
+  // redirects to the record opens over the list it was posted from rather than walking one back.
+  const standsOnThePageOnScreen =
+    layer.base !== undefined && isSameUrlWithoutHash(hrefToUrl(layer.base), hrefToUrl(live.page.url))
+
+  return dispatchedTowardTheLayer || theLayerIsAlreadyOpen || dispatchedFromALayerStillOpen || standsOnThePageOnScreen
+}
+
+// The layer a response belongs to: one open under the same key is that layer coming back, not a new one.
+export const openLayerFor = (page: Page, response: Page, id?: string): LayerState | undefined => {
+  const key = layerKeyOf(response)
+  const matches = layersOf(page).filter((layer) => !layer.local && layer.key === key)
+
+  return matches.find((layer) => layer.id === id) ?? matches[0]
+}
+
+// What a layer holds by being on the stack, rather than by being a tier.
+const stackFields = [
+  'id',
+  'key',
+  'base',
+  'standalone',
+  'entries',
+  'owner',
+  'local',
+  'preservesUrl',
+  'renderKey',
+] as const
+
+const tierState = (layer: LayerState): Layer => omit(layer, stackFields)
+
+// What a visit carries into its landing, the id being the one `router.layer()` minted.
+export interface CarriedLayer {
+  base: Page
+  layerId?: string
+  opening: boolean
+  owner: string
+  claims?: boolean
+}
+
+// An instant visit puts a placeholder in the layer it was aimed at, and only its own response can
+// claim that placeholder. Claimed by id rather than by key: the key is the server's to choose, and
+// the placeholder went up before the server had said anything.
+const claimedPlaceholder = (base: Page, id: string | undefined, claims?: boolean): LayerState | undefined =>
+  claims ? layerAt(base, id) : undefined
+
+const composedLayerId = (base: Page, response: Page, { layerId, opening, claims }: CarriedLayer): string => {
+  const open = openLayerFor(base, response, layerId) ?? claimedPlaceholder(base, layerId, claims)
+  const mints = opening && layerId !== undefined
+  const taken = layersOf(base).some((layer) => layer.id === layerId)
+
+  const id = open ? open.id : mints && !taken ? layerId : nextLayerId(base)
+
+  if (mints && id !== layerId) {
+    registryRekey(layerId, id)
+  }
+
+  return id
+}
+
+export const composeLayer = (
+  base: Page,
+  response: Page,
+  id: string,
+  {
+    url = response.url,
+    standalone = false,
+    owner = null,
+    local = false,
+    preservesUrl = false,
+    remount = false,
+    claims = false,
+  }: {
+    url?: string | null
+    standalone?: boolean
+    owner?: string | null
+    local?: boolean
+    preservesUrl?: boolean
+    remount?: boolean
+    claims?: boolean
+  } = {},
+): Page => {
+  const layers = layersOf(base)
+  const rewrites =
+    standalone || local ? undefined : (openLayerFor(base, response, id) ?? claimedPlaceholder(base, id, claims))
+  // Settled when the layer opened: a later partial or poll must not move the address onto it.
+  const preserves = rewrites ? rewrites.preservesUrl : preservesUrl
+
+  const layer: LayerState = {
+    id: rewrites?.id ?? id,
+    key: layerKeyOf(response),
+    renderKey: rewrites && !remount ? rewrites.renderKey : nextRenderKey(),
+    component: response.component,
+    props: response.props,
+    url,
+    base: layerBaseOf(response) ?? null,
+    encryptHistory: response.encryptHistory ?? false,
+    standalone: rewrites?.standalone ?? standalone,
+    entries: rewrites?.entries ?? 0,
+    owner: rewrites?.owner ?? owner,
+    deferredProps: response.deferredProps ?? {},
+    initialDeferredProps: response.initialDeferredProps ?? response.deferredProps,
+    rescuedProps: response.rescuedProps ?? [],
+    flash: response.flash ?? {},
+    onceProps: response.onceProps ?? {},
+    scrollProps: response.scrollProps ?? {},
+    ...(local ? { local: true } : {}),
+    ...(preserves ? { preservesUrl: true } : {}),
+  }
+
+  return {
+    ...base,
+    // The asset version rides on the page, not the tier, so the composite takes the one it landed on.
+    version: response.version,
+    clearHistory: base.clearHistory || response.clearHistory,
+    layers: rewrites ? layers.map((open) => (open === rewrites ? layer : open)) : [...layers, layer],
+  }
+}
+
+export const composeLocalLayer = (base: Page, component: string, props: PageProps, id: string, owner: string): Page =>
+  composeLayer(base, { component, props, layer: {}, url: null, version: base.version } as unknown as Page, id, {
+    url: null,
+    owner,
+    local: true,
+  })
+
+export const composeColdLayer = (
+  response: Page,
+  id: string,
+  url: string | null = response.url,
+  owner: string | null = null,
+): Page =>
+  composeLayer(
+    {
+      component: '',
+      props: { errors: {} },
+      url: layerBaseOf(response)!,
+      version: response.version,
+      rescuedProps: [],
+      flash: response.flash,
+      // State is remembered against a page the user was on, and nobody has been on this one.
+      rememberedState: {},
+    } as Page,
+    response,
+    id,
+    { url, standalone: true, owner },
+  )
+
+export const insertLayerBeneath = (page: Page, response: Page, id: string): Page => {
+  const composed = composeLayer({ ...page, layers: [] }, response, id, { standalone: true })
+
+  return { ...composed, layers: [...composed.layers!, ...layersOf(page)] }
+}
+
+// A walk that stops leaves its deepest layer drawn over nothing, so that layer becomes the page.
+export const promoteDeepestLayer = (page: Page): Page => {
+  const [deepest, ...above] = layersOf(page)
+
+  if (!deepest) {
+    return page
+  }
+
+  const { layers, ...base } = page
+
+  const promoted = {
+    ...base,
+    ...tierState(deepest),
+    url: deepest.url ?? base.url,
+    encryptHistory: base.encryptHistory || deepest.encryptHistory,
+    // Both tiers' flash was announced when it was set, and isn't announced again here.
+    flash: {},
+  } as Page
+
+  return above.length > 0 ? { ...promoted, layers: above } : promoted
+}
+
+export const closeLayer = (page: Page, id: string): Page => {
+  const index = layersOf(page).findIndex((layer) => layer.id === id)
+
+  if (index === -1) {
+    return page
+  }
+
+  const { layers, ...beneath } = page
+
+  return index === 0 ? (beneath as Page) : { ...beneath, layers: layers!.slice(0, index) }
+}
+
+// A layer that never made it onto the stack has no removal to fire its onClose, so the visit does.
+export const closeUnlandedLayer = (page: Page, id: string | undefined): void => {
+  if (id !== undefined && !layersOf(page).some((layer) => layer.id === id)) {
+    registryClose(id)
+  }
+}
+
+// The topmost layer whose url the visit that opened it left free to own.
+const addressLayer = (page: Page): LayerState | undefined =>
+  layersOf(page)
+    .filter((layer) => layer.url !== null && !layer.preservesUrl)
+    .at(-1)
+
+export const addressOf = (page: Page): string => addressLayer(page)?.url ?? page.url
+
+// The tier the address belongs to, which is the page itself when no layer owns it.
+export const addressTierOf = (page: Page): Layer => addressLayer(page) ?? page
+
+// A hash belongs on the url the address is read from: on the base it never reaches the address bar.
+export const withAddressHash = (page: Page, hash: string): Page => {
+  const owner = addressLayer(page)
+  const url = hrefToUrl(owner?.url ?? page.url)
+
+  url.hash = hash
+
+  return withTier(page, owner?.id, { url: url.href })
+}
+
+// A stack can name a base that has since been remounted: by a restore, or by a detour returning its
+// layer over the page the prompt replaced. Left as it was, what the stack emits reaches nobody.
+export const withLiveOwners = (page: Page, baseId: string): Page => {
+  const open = new Set(layersOf(page).map((layer) => layer.id))
+
+  return mapLayers(page, (layer) =>
+    layer.owner !== null && !open.has(layer.owner) ? { ...layer, owner: baseId } : layer,
+  )
+}
+
+// The layer a restore dismisses, if that is what it is: a step back onto the entry the top layer
+// was opened over, which is the browser doing by hand what closing the layer does. A layer that
+// pushed entries of its own sits further back than one step, and a jump that lands anywhere else
+// is a navigation, not a dismissal.
+export const layerDismissedByRestore = (page: Page, restored: Page): LayerState | undefined => {
+  const open = layersOf(page)
+  const top = open.at(-1)
+  const beneath = layersOf(restored)
+
+  if (!top || top.entries !== 1 || beneath.length !== open.length - 1) {
+    return undefined
+  }
+
+  const stands = (tier: Layer, was: Layer) => tier.component === was.component && tier.url === was.url
+
+  return stands(restored, page) &&
+    beneath.every((layer, index) => layer.id === open[index].id && stands(layer, open[index]))
+    ? top
+    : undefined
+}
+
+// A restore whose base is the page already on screen: only the stack moved, and remounting the base
+// would throw away the state the stack was opened over.
+export const restoreKeepsBase = (page: Page, restored: Page): boolean =>
+  layersOf(restored).length > 0 && restored.component === page.component && restored.url === page.url
+
+const withoutRemembered = (page: Page, layerIds: string[]): Page => ({
+  ...page,
+  rememberedState: Object.fromEntries(
+    Object.entries(page.rememberedState ?? {}).filter(([key]) => !layerIds.includes(key)),
+  ),
+})
+
+export const withoutFlash = (page: Page): Page => ({
+  ...mapLayers(page, (layer) => ({ ...layer, flash: {} })),
+  flash: {},
+})
+
+// One entry holds every tier, so anything short of the union writes one layer's props in plaintext.
+export const encryptsHistory = (page: Page): boolean =>
+  !!page.encryptHistory || layersOf(page).some((layer) => layer.encryptHistory)
+
+// Every entry pushed while a layer is on screen is one that closing it has to step back over.
+export const recordHistoryEntry = (page: Page): Page => withTopEntries(page, 1)
+
+export const dropHistoryEntry = (page: Page): Page => withTopEntries(page, -1)
+
+const withTopEntries = (page: Page, by: number): Page => {
+  const top = layersOf(page).at(-1)
+
+  return top === undefined ? page : withTier(page, top.id, { entries: Math.max(0, top.entries + by) })
+}
+
+export const entriesToUnwind = (page: Page, id: string): number => {
+  const index = layersOf(page).findIndex((layer) => layer.id === id)
+
+  return index === -1 ? 0 : page.layers!.slice(index).reduce((entries, layer) => entries + layer.entries, 0)
+}
+
+// The entries the dropped layers owned fall to the layer beneath them.
+const absorbLayersAbove = (page: Page, id: string): Page => {
+  const layers = layersOf(page)
+  const index = layers.findIndex((layer) => layer.id === id)
+  const entries = entriesToUnwind(page, id)
+  const kept = layers.slice(0, index)
+  const beneath = kept.at(-1)
+
+  return {
+    ...page,
+    layers: beneath ? [...kept.slice(0, -1), { ...beneath, entries: beneath.entries + entries }] : kept,
+  }
+}
+
+export const maxLayerChain = 10
+
+// A base already on the stack would send the walk round in circles.
+const walkContinues = (page: Page, base: string): boolean => {
+  const layers = layersOf(page)
+  const fetchedFrom = (url: string | null) => url !== null && isSameUrlWithoutHash(hrefToUrl(url), hrefToUrl(base))
+
+  if (layers.some((layer) => fetchedFrom(layer.url))) {
+    return false
+  }
+
+  if (layers.length >= maxLayerChain) {
+    console.warn(
+      `A layer chain more than ${maxLayerChain} layers deep was declared, so "${base}" was not fetched. The deepest layer that loaded is being used as the page.`,
+    )
+
+    return false
+  }
+
+  return true
+}
+
+export const missingBase = (page: Page): string | undefined =>
+  page.component === '' ? (layersOf(page)[0]?.base ?? undefined) : undefined
+
+// The url a blank base is waiting on: the base its layer declared, or its own once the stack that
+// declared it was dismissed and the recovery is fetching it.
+export const loadingBase = (page: Page): string | undefined =>
+  missingBase(page) ?? (page.component === '' && layersOf(page).length === 0 && page.url !== '' ? page.url : undefined)
+
+export interface LayerLanding {
+  page: Page
+  walksTo?: string
+  landedOn?: string
+  preserveUrl: boolean
+}
+
+export const landLayerResponse = ({
+  base,
+  response,
+  responseUrl,
+  composesAsLayer,
+  walksBeneath,
+  remount,
+  carried,
+  preserveUrl,
+  keepsStack,
+}: {
+  base: Page
+  response: Page
+  responseUrl: string
+  composesAsLayer: boolean
+  walksBeneath: boolean
+  remount: boolean
+  carried: CarriedLayer
+  preserveUrl: boolean
+  keepsStack: boolean
+}): LayerLanding => {
+  const landing: LayerLanding = { page: response, preserveUrl }
+  const isLayer = isLayerResponse(response)
+  const standsOn = isLayer ? layerBaseOf(response) : undefined
+
+  if (composesAsLayer) {
+    const id = composedLayerId(carried.base, response, carried)
+    const open = layerAt(carried.base, id)
+
+    landing.page = composeLayer(carried.base, response, id, {
+      url: preserveUrl && open ? open.url : responseUrl,
+      preservesUrl: preserveUrl,
+      owner: carried.owner,
+      remount,
+      claims: carried.claims,
+    })
+    landing.landedOn = id
+    // An open is a step of its own, so the layer carries the preservation and writes its entry.
+    landing.preserveUrl = preserveUrl && !!open
+  } else if (walksBeneath && standsOn !== undefined) {
+    const id = nextLayerId(base)
+
+    landing.page = insertLayerBeneath(base, response, id)
+    landing.walksTo = standsOn
+    landing.landedOn = id
+  } else if (walksBeneath) {
+    landing.page = { ...promoteLayer(response), layers: base.layers }
+  } else if (standsOn !== undefined) {
+    // Nothing valid to sit on, but it says what it belongs on, so the walk fetches that beneath it.
+    const id = carried.layerId ?? nextLayerId(base)
+
+    landing.preserveUrl = false
+    landing.page = composeColdLayer(response, id, responseUrl, carried.owner)
+    landing.walksTo = standsOn
+    landing.landedOn = id
+  } else if (isLayer) {
+    landing.page = promoteLayer(response)
+  } else if (keepsStack) {
+    landing.page = { ...response, layers: base.layers }
+  }
+
+  if (landing.walksTo !== undefined && !walkContinues(landing.page, landing.walksTo)) {
+    landing.page = promoteDeepestLayer(landing.page)
+    landing.walksTo = undefined
+    landing.landedOn = undefined
+  }
+
+  return landing
+}
+
+export interface LayerHandle {
+  id: string
+  /** Hears what this layer's immediate children emit, and returns its own unsubscribe. */
+  on(name: string, callback: (payload?: unknown, childId?: string) => void): () => void
+  /** The same, for the first one only. */
+  once(name: string, callback: (payload?: unknown, childId?: string) => void): () => void
+  onClose(callback: () => void): () => void
+  close(): Promise<void>
+  /** Sends an event to whatever opened this layer; dropped when that has no handle of its own. */
+  emit(name: string, payload?: unknown): void
+  /** @internal */
+  deliver(childId: string, name: string, payload?: unknown): void
+  /** @internal */
+  fireOnClose(): void
+}
+
+// Handles live beside the page, never on it, so no history entry carries them. An id can be
+// re-opened while older handles still point at it, so each one holds a list.
+const layerRegistry = new Map<string, LayerHandle[]>()
+
+export const registryWrite = (id: string, entry: LayerHandle): void => {
+  layerRegistry.set(id, [...(layerRegistry.get(id) ?? []), entry])
+}
+
+export const registryRead = (id: string): LayerHandle | undefined => layerRegistry.get(id)?.at(-1)
+
+export const registryHas = (id: string): boolean => layerRegistry.has(id)
+
+export const registryClose = (id: string): void => {
+  layerRegistry.get(id)?.forEach((handle) => handle.fireOnClose())
+  layerRegistry.delete(id)
+}
+
+// Moves handles onto the id the layer actually composed under. Left where they were minted, they
+// would answer for a layer that never opened.
+const registryRekey = (from: string, to: string): void => {
+  const moving = layerRegistry.get(from)
+
+  if (moving === undefined) {
+    return
+  }
+
+  moving.forEach((handle) => (handle.id = to))
+  layerRegistry.set(to, [...(layerRegistry.get(to) ?? []), ...moving])
+  layerRegistry.delete(from)
+}
+
+export const layerHandleFor = (id: string, mint: (id: string) => LayerHandle): LayerHandle => {
+  if (typeof window === 'undefined') {
+    // Nothing emits or closes during a render, so the handle is spent with the render that asks.
+    return mint(id)
+  }
+
+  const existing = registryRead(id)
+
+  if (existing) {
+    return existing
+  }
+
+  const handle = mint(id)
+
+  registryWrite(id, handle)
+
+  return handle
+}
+
+export const createLayerHandle = (
+  id: string,
+  close: (id: string) => Promise<void>,
+  ownerOf: (id: string) => string | null | undefined,
+): LayerHandle => {
+  const subscriptions = new Map<string, ((payload?: unknown, childId?: string) => void)[]>()
+  const onCloseCallbacks: (() => void)[] = []
+
+  const deliver = (childId: string, name: string, payload?: unknown): void => {
+    for (const callback of subscriptions.get(name) ?? []) {
+      callback(payload, childId)
+    }
+  }
+
+  const handle: LayerHandle = {
+    id,
+    on: (name, callback) => {
+      subscriptions.set(name, [...(subscriptions.get(name) ?? []), callback])
+
+      return () =>
+        subscriptions.set(
+          name,
+          (subscriptions.get(name) ?? []).filter((subscribed) => subscribed !== callback),
+        )
+    },
+    once: (name, callback) => {
+      const stop = handle.on(name, (payload, childId) => {
+        stop()
+        callback(payload, childId)
+      })
+
+      return stop
+    },
+    onClose: (callback) => {
+      onCloseCallbacks.push(callback)
+
+      return () => {
+        const at = onCloseCallbacks.indexOf(callback)
+
+        if (at > -1) {
+          onCloseCallbacks.splice(at, 1)
+        }
+      }
+    },
+    close: () => close(handle.id),
+    emit: (name, payload) => {
+      const owner = ownerOf(handle.id)
+
+      if (owner === null || owner === undefined) {
+        return
+      }
+
+      layerRegistry.get(owner)?.forEach((ownerHandle) => ownerHandle.deliver(handle.id, name, payload))
+    },
+    deliver,
+    fireOnClose: () => {
+      for (const callback of onCloseCallbacks) {
+        callback()
+      }
+    },
+  }
+
+  return handle
+}
+
+// How long an unwind waits for the browser. Settling early installs a page it is about to replace.
+const unwindTimeout = 1000
+
+type Deferred = { settled: Promise<void>; settle: () => void }
+
+const deferred = (): Deferred => {
+  let settle!: () => void
+
+  return { settled: new Promise<void>((resolve) => (settle = resolve)), settle }
+}
+
+export interface CloseOptions {
+  // The app asked for the close (router.close / handle.close), which refreshes what it lands on.
+  programmatic?: boolean
+  refresh?: (address: string, layerId?: string) => Promise<void>
+  // The caller installs the page these layers leave behind, so the removal writes nothing itself.
+  absorbed?: boolean
+}
+
+// The close sequence runs in three steps: a layer is marked, the shell reports back once it has run
+// its exit, and only then is it taken off the stack, stepping back over the entries it owned.
+class LayerClosing {
+  // The layers a close is waiting on, deepest first.
+  protected pending: { id: string; reported: boolean }[] = []
+  protected options: CloseOptions | undefined
+  protected unwinding: (Deferred & { landsItself: boolean }) | null = null
+  protected closing: Deferred | null = null
+  protected removing: string[] = []
+
+  public close(id?: string, options: CloseOptions = {}): Promise<void> {
+    if (this.unwinding) {
+      // The last close's layers stay on screen until the browser restores the entry beneath them.
+      return Promise.resolve()
+    }
+
+    const layers = layersOf(currentPage.get())
+    const index = id === undefined ? layers.length - 1 : layers.findIndex((layer) => layer.id === id)
+
+    if (index === -1) {
+      return Promise.resolve()
+    }
+
+    if (this.isClosing(layers[index].id)) {
+      return this.closing?.settled ?? Promise.resolve()
+    }
+
+    // Widening restates which layers are owed, not what they have reported.
+    this.pending = layers.slice(index).map((layer) => ({
+      id: layer.id,
+      reported: this.pending.find((marked) => marked.id === layer.id)?.reported ?? false,
+    }))
+    this.options = options
+
+    const closing = (this.closing ??= deferred())
+
+    return currentPage.rerender().then(() => closing.settled)
+  }
+
+  // Closes everything above a layer without stepping back, since the caller is about to install
+  // the page that takes them off the screen.
+  public async closeAbove(id: string | undefined): Promise<void> {
+    const layers = layersOf(currentPage.get())
+    const index = id === undefined ? -1 : layers.findIndex((layer) => layer.id === id)
+    const above = index === -1 ? undefined : layers[index + 1]
+
+    if (!above) {
+      return
+    }
+
+    await this.close(above.id, { absorbed: true })
+  }
+
+  public closed(id?: string): Promise<void> {
+    const marked = id === undefined ? this.pending.at(-1) : this.pending.find((layer) => layer.id === id)
+
+    if (!marked) {
+      return Promise.resolve()
+    }
+
+    marked.reported = true
+
+    if (!this.pending.every((layer) => layer.reported)) {
+      return Promise.resolve()
+    }
+
+    const closed = this.pending.map((layer) => layer.id)
+    const options = this.options
+    const closing = this.closing
+    this.pending = []
+    this.options = undefined
+    // Handed to the removal, so a close marked while this one refreshes waits on one of its own.
+    this.closing = null
+
+    return this.remove(closed, options, closing).finally(() => closing?.settle())
+  }
+
+  protected remove(
+    closed: string[],
+    { programmatic = false, refresh, absorbed = false }: CloseOptions = {},
+    closing?: Deferred | null,
+  ): Promise<void> {
+    const layer = layerAt(currentPage.get(), closed[0])
+
+    if (!layer) {
+      return Promise.resolve()
+    }
+
+    if (absorbed) {
+      // Nothing steps back: the caller pushes its own entry in front of the ones these layers own.
+      currentPage.merge(withoutRemembered(absorbLayersAbove(currentPage.get(), closed[0]), closed))
+      currentPage.dropLayerOptimisticState(closed)
+      closed.forEach(registryClose)
+
+      return Promise.resolve()
+    }
+
+    this.removing = closed
+
+    const entries = entriesToUnwind(currentPage.get(), layer.id)
+    // A layer the user was never behind opened on an entry of its own, so the step back lands on the
+    // entry still holding it and the close installs the page beneath rather than leaving it to the
+    // restore. That entry is the one the user arrived on, so the page beneath it is a step of its
+    // own: only a layer that never got an entry writes over the one it is being closed out of.
+    const writesTheEntry = layer.standalone || entries === 0
+    const replaces = entries === 0 && !layer.standalone
+
+    const land = () =>
+      currentPage.set(closeLayer(currentPage.get(), layer.id), {
+        replace: replaces,
+        preserveScroll: true,
+        preserveState: true,
+        preservesBase: true,
+      })
+
+    let removal: Promise<void>
+
+    if (entries > 0) {
+      removal = this.beginUnwind(land, writesTheEntry)
+      history.back(entries)
+
+      if (writesTheEntry) {
+        removal = removal.then(async () => {
+          // Unless the wait ran out and already landed it.
+          if (layerAt(currentPage.get(), layer.id)) {
+            await land()
+          }
+        })
+      }
+    } else {
+      removal = land()
+    }
+
+    return removal.then(async () => {
+      // Off the screen, which is what a close means. The refresh beneath it is a follow-up.
+      closing?.settle()
+
+      // A layer with no url of its own has nothing to re-ask for, so the base beneath it answers.
+      const landedOn = layersOf(currentPage.get()).at(-1)
+      const refreshed = landedOn?.url ? landedOn : undefined
+      // Unless what it would re-ask for is a blank the walk has yet to fill in, which the recovery
+      // is already fetching. A walk that landed leaves a base like any other, stale and worth asking.
+      const recovering = refreshed === undefined && currentPage.get().component === ''
+
+      if (programmatic && refresh && !recovering) {
+        await refresh(refreshed?.url ?? currentPage.get().url, refreshed?.id)
+      }
+
+      currentPage.merge(withoutRemembered(currentPage.get(), closed))
+
+      if (writesTheEntry) {
+        history.replaceState(currentPage.getWithoutFlashData())
+      }
+
+      // Rolling the layer's optimistic back would write its keys into the base's props.
+      currentPage.dropLayerOptimisticState(closed)
+
+      this.removing = []
+      closed.forEach(registryClose)
+    })
+  }
+
+  protected beginUnwind(land: () => Promise<void>, landsItself: boolean): Promise<void> {
+    const { settled, settle } = deferred()
+
+    // A back() the browser refuses, a step past the start of the session say, fires no popstate,
+    // so the close lands the page itself once the wait is up.
+    const refused = setTimeout(() => {
+      this.unwinding = null
+      land().then(settle)
+    }, unwindTimeout)
+
+    this.unwinding = {
+      landsItself,
+      settled,
+      settle: () => {
+        clearTimeout(refused)
+        settle()
+      },
+    }
+
+    return settled
+  }
+
+  // Whether the entry the step back is heading for still holds the layer being closed. The restore
+  // that answers it would put that layer back on screen, so the close installs the page instead.
+  public unwindLandsItself(): boolean {
+    return this.unwinding?.landsItself ?? false
+  }
+
+  public settleUnwind(): void {
+    this.unwinding?.settle()
+    this.unwinding = null
+  }
+
+  public unwindSettled(): Promise<void> {
+    return this.unwinding?.settled ?? Promise.resolve()
+  }
+
+  public isUnwinding(): boolean {
+    return this.unwinding !== null
+  }
+
+  public isClosing(id: string): boolean {
+    return this.pending.some((layer) => layer.id === id)
+  }
+
+  // Abandons a close whose layer the page being written replaced.
+  public reconcile(page: Page): void {
+    if (this.pending.length === 0) {
+      return
+    }
+
+    // Read by render key: a supersede remakes the component that was dismissed and is not the one to
+    // close, while a partial or a poll rewrites the layer where it stands and leaves it closing.
+    const stands = (layer: LayerState): boolean => {
+      const landed = layerAt(page, layer.id)
+
+      return landed !== undefined && landed.renderKey === layer.renderKey
+    }
+
+    if (layersOf(currentPage.get()).every((layer) => !this.isClosing(layer.id) || stands(layer))) {
+      return
+    }
+
+    this.pending = []
+    this.options = undefined
+    this.closing?.settle()
+    this.closing = null
+  }
+
+  // Fires onClose for every live layer the page that is landing no longer holds. Left to the
+  // landing rather than the write, since a write a newer one supersedes takes nothing away.
+  public release(page: Page): void {
+    const open = new Set(layersOf(page).map((layer) => layer.id))
+
+    layersOf(currentPage.get())
+      .filter((layer) => !open.has(layer.id) && !this.removing.includes(layer.id))
+      .forEach((layer) => registryClose(layer.id))
+  }
+
+  // The stack as history sees it: a dismissed layer stays on the page for the shell to animate out,
+  // but must not ride into the entry it is leaving.
+  public withoutClosingLayers(page: Page): Page {
+    if (this.pending.length === 0) {
+      return page
+    }
+
+    const { layers, ...beneath } = page
+    const kept = layersOf(page).filter((layer) => !this.isClosing(layer.id))
+
+    return kept.length > 0 ? { ...beneath, layers: kept } : (beneath as Page)
+  }
+}
+
+export const layerClosing = new LayerClosing()
+
+export const layerShellProps = (
+  layer: Pick<ResolvedLayer, 'id' | 'isClosing' | 'local'>,
+  index: number,
+  stack: number,
+): Omit<LayerShellProps, 'label'> => ({
+  open: !layer.isClosing,
+  index,
+  isTop: index === stack - 1,
+  type: layer.local ? 'local' : 'routed',
+  close: () => router.close(layer.id),
+  done: () => router.closed(layer.id),
+})
+
+export const layerTransitionName = (id: string): string => `inertia-layer-${id}`
+
+// The page a layer's own code reads through usePage(): its own state, the composite's for the rest.
+// A layer with no url falls through to the address beneath it, never one a layer above it owns.
+export const layerPageOf = (page: Page, layer: LayerState): Page => {
+  const index = layersOf(page).findIndex((open) => open.id === layer.id)
+
+  return {
+    ...tierState(layer),
+    props: { ...layer.props, errors: layer.props.errors ?? {} },
+    url: layer.url ?? addressOf(index === -1 ? page : { ...page, layers: page.layers!.slice(0, index) }),
+    version: page.version,
+    clearHistory: page.clearHistory,
+    layers: page.layers,
+    rememberedState: page.rememberedState,
+  } as Page
+}
+
+export const topPageOf = (page: Page): Page => {
+  const top = layersOf(page).at(-1)
+
+  return top ? layerPageOf(page, top) : page
+}
+
+// The page a layer's layout resolves against. A layer with no url takes an empty one, so its
+// layout never reads the address of the layer beneath it.
+export const layoutPageOf = (layer: ResolvedLayer): Page => ({ ...layer.page, url: layer.url ?? '' })
+
+export const resolveLayers = <ComponentType>(
+  page: Page,
+  resolve: (name: string, page: Page) => ComponentType | Promise<ComponentType>,
+  isClosing: (id: string) => boolean = () => false,
+): Promise<ResolvedLayer<ComponentType>[]> =>
+  Promise.all(
+    layersOf(page).map(async (layer) => {
+      const layerPage = layerPageOf(page, layer)
+
+      return {
+        ...layer,
+        page: layerPage,
+        component: await resolve(layer.component, layerPage),
+        isClosing: isClosing(layer.id),
+      }
+    }),
+  )
+
+// The fragment never reached the server, so it goes back on before anything composes.
+const withBrowserHash = (response: Page): Page => {
+  const hash = typeof window === 'undefined' ? '' : window.location.hash
+
+  return hash && !response.url.includes(hash) ? { ...response, url: response.url + hash } : response
+}
+
+const composeInitialPage = (response: Page): Page => {
+  // The counter belongs to the document being rendered, and an SSR process renders many.
+  sequence = 0
+  renderSequence = 0
+
+  const page = withBrowserHash(response)
+
+  if (!isLayerResponse(page)) {
+    return page
+  }
+
+  const base = layerBaseOf(page)
+
+  if (base === undefined) {
+    return promoteLayer(page)
+  }
+
+  const cold = composeColdLayer(page, nextLayerId(page))
+
+  return walkContinues(cold, base) ? cold : promoteLayer(page)
+}
+
+// The page a document renders as, which is not always the page it arrived with: a layer response
+// opens over a base that still has to be fetched.
+export const resolveInitialPage = async <ComponentType, PageType extends Page>(
+  response: PageType,
+  resolve: (name: string, page: Page) => ComponentType | Promise<ComponentType>,
+  resolveLoading?: (url: string, page: Page) => ComponentType | Promise<ComponentType | undefined> | undefined,
+): Promise<{ page: PageType; component?: ComponentType; layers: ResolvedLayer<ComponentType>[] }> => {
+  const page = composeInitialPage(response) as PageType
+  const base = loadingBase(page)
+
+  const [component, layers] = await Promise.all([
+    page.component !== ''
+      ? resolve(page.component, page)
+      : base === undefined
+        ? undefined
+        : resolveLoading?.(base, page),
+    resolveLayers(page, resolve),
+  ])
+
+  return { page, component, layers }
+}
+
+// Turns the `loading` option, a component or a resolver for one, into the resolver the router
+// takes. A component here is whatever the adapter renders; `rendered` recognises the output of one
+// called as if it were the resolver, and `normalize` maps a module onto the component it carries.
+export const normalizeLoading = <ComponentType>(
+  loading: LoadingOption | undefined,
+  {
+    rendered = () => false,
+    normalize = (value) => ((value as { default?: ComponentType })?.default || value) as ComponentType,
+  }: {
+    rendered?: (value: unknown) => boolean
+    normalize?: (value: unknown) => ComponentType
+  } = {},
+): ((url: string, page: Page) => Promise<ComponentType | undefined>) | undefined => {
+  if (loading === undefined) {
+    return undefined
+  }
+
+  return async (url, page) => {
+    if (typeof loading !== 'function') {
+      return normalize(loading)
+    }
+
+    let resolved: unknown
+
+    try {
+      resolved = await (loading as (url: string, page: Page) => unknown)(url, page)
+    } catch {
+      // A component, not a resolver: it choked on the arguments.
+      return normalize(loading)
+    }
+
+    if (resolved == null) {
+      return undefined
+    }
+
+    return rendered(resolved) ? normalize(loading) : normalize(resolved)
+  }
+}
diff --git a/packages/core/src/layout.ts b/packages/core/src/layout.ts
index 64c872faa..1be8a594c 100644
--- a/packages/core/src/layout.ts
+++ b/packages/core/src/layout.ts
@@ -16,24 +16,37 @@ export type LayoutCallbackReturn<C> =
   | Record<string, C | [C, Record<string, unknown>?] | { component: C; props?: Record<string, unknown> }>
   | Partial<LayoutProps>
 
+export interface SetLayoutProps {
+  (props: Partial<LayoutProps>, layerId?: string): void
+  <K extends keyof NamedLayoutProps>(name: K, props: Partial<NamedLayoutProps[K]>, layerId?: string): void
+  <T = never>(props: Partial<NoInfer<T>>, layerId?: string): void
+  <T = never>(name: string, props: Partial<NoInfer<T>>, layerId?: string): void
+}
+
+export interface LayoutSlot {
+  shared: Record<string, unknown>
+  named: Record<string, Record<string, unknown>>
+}
+
 export interface LayoutPropsStore {
-  set(props: Partial<LayoutProps>): void
-  setFor<K extends keyof NamedLayoutProps>(name: K, props: Partial<NamedLayoutProps[K]>): void
-  get(): { shared: Record<string, unknown>; named: Record<string, Record<string, unknown>> }
+  set: SetLayoutProps
+  get(): LayoutSlot
+  getForLayer(layerId: string): LayoutSlot
+  layerIds(): string[]
   reset(): void
+  retainLayers(ids: string[]): void
   subscribe(callback: () => void): () => void
 }
 
+export const emptyLayoutSlot: LayoutSlot = { shared: {}, named: {} }
+
 export function createLayoutPropsStore(): LayoutPropsStore {
-  let shared: Record<string, unknown> = {}
-  let named: Record<string, Record<string, unknown>> = {}
-  let snapshot = { shared, named }
+  // Every tier's props under one key. '' is the base.
+  const slots = new Map<string, LayoutSlot>()
   const listeners = new Set<() => void>()
   let pendingNotify = false
 
-  const updateSnapshot = () => {
-    snapshot = { shared, named }
-  }
+  const slotOf = (tier: string): LayoutSlot => slots.get(tier) ?? emptyLayoutSlot
 
   const notify = () => {
     if (pendingNotify) {
@@ -47,45 +60,54 @@ export function createLayoutPropsStore(): LayoutPropsStore {
     })
   }
 
-  return {
-    set(props) {
-      const merged = { ...shared, ...props }
+  const drop = (tiers: string[]) => {
+    // Not some(), which would stop at the first tier it took away.
+    if (tiers.filter((tier) => slots.delete(tier)).length > 0) {
+      notify()
+    }
+  }
+
+  // Without a name the layer takes second place, so the props are whichever argument is not it.
+  const set = (
+    nameOrProps: string | Record<string, unknown>,
+    propsOrLayerId?: Record<string, unknown> | string,
+    layerId?: string,
+  ): void => {
+    const name = typeof nameOrProps === 'string' ? nameOrProps : null
+    const props = (name ? propsOrLayerId : nameOrProps) as Record<string, unknown>
+    const tier = (typeof propsOrLayerId === 'string' ? propsOrLayerId : layerId) ?? ''
+
+    const current = slotOf(tier)
+    const into = name ? (current.named[name] ?? {}) : current.shared
+    const merged = { ...into, ...props }
+
+    if (isEqual(into, merged)) {
+      return
+    }
 
-      if (isEqual(shared, merged)) {
-        return
-      }
+    slots.set(tier, name ? { ...current, named: { ...current.named, [name]: merged } } : { ...current, shared: merged })
+    notify()
+  }
 
-      shared = merged
-      updateSnapshot()
-      notify()
-    },
+  return {
+    set: set as SetLayoutProps,
 
-    setFor(name, props) {
-      const current = named[name] || {}
-      const merged = { ...current, ...props }
+    get: () => slotOf(''),
 
-      if (isEqual(current, merged)) {
-        return
-      }
+    getForLayer: (layerId) => slotOf(layerId),
 
-      named = { ...named, [name]: merged }
-      updateSnapshot()
-      notify()
-    },
+    layerIds: () => Array.from(slots.keys()).filter((tier) => tier !== ''),
 
-    reset() {
-      shared = {}
-      named = {}
-      updateSnapshot()
-      notify()
+    reset: () => drop(['']),
+
+    retainLayers(ids) {
+      drop(Array.from(slots.keys()).filter((tier) => tier !== '' && !ids.includes(tier)))
     },
 
     subscribe(callback) {
       listeners.add(callback)
       return () => listeners.delete(callback)
     },
-
-    get: () => snapshot,
   }
 }
 
diff --git a/packages/core/src/objectUtils.ts b/packages/core/src/objectUtils.ts
index b4fdac80c..3a8a14c37 100644
--- a/packages/core/src/objectUtils.ts
+++ b/packages/core/src/objectUtils.ts
@@ -97,3 +97,90 @@ export const setPathPreservingIdentity = <T>(target: T, path: string, value: unk
 
   return copyAlongPath(target, 0) as T
 }
+
+const isStructuredCloneable = (value: unknown): boolean => {
+  const type = typeof value
+
+  return type !== 'function' && type !== 'symbol'
+}
+
+// Cloned as-is because they cannot hold a function. Error is the exception. Its
+// `cause` can, but walking it would strip the error type, which is worse.
+const isNativelyCloneable = (value: object): boolean =>
+  value instanceof Date ||
+  value instanceof RegExp ||
+  value instanceof Error ||
+  value instanceof ArrayBuffer ||
+  ArrayBuffer.isView(value) ||
+  (typeof Blob !== 'undefined' && value instanceof Blob)
+
+// Produces a value structuredClone() accepts. Functions and symbols are dropped
+// from objects, and become null in arrays so indices survive.
+export const toStructuredCloneable = <T>(value: T): T => {
+  const seen = new WeakMap<object, unknown>()
+
+  const copy = (node: unknown): unknown => {
+    if (node === null || typeof node !== 'object') {
+      return node
+    }
+
+    if (seen.has(node)) {
+      return seen.get(node)
+    }
+
+    if (isNativelyCloneable(node)) {
+      return node
+    }
+
+    if (Array.isArray(node)) {
+      const result: unknown[] = []
+      seen.set(node, result)
+
+      // Not forEach(), which skips holes and would shift every later index.
+      for (const item of node) {
+        result.push(isStructuredCloneable(item) ? copy(item) : null)
+      }
+
+      return result
+    }
+
+    if (node instanceof Set) {
+      const result = new Set()
+      seen.set(node, result)
+      node.forEach((item) => {
+        if (isStructuredCloneable(item)) {
+          result.add(copy(item))
+        }
+      })
+
+      return result
+    }
+
+    if (node instanceof Map) {
+      const result = new Map()
+      seen.set(node, result)
+      node.forEach((item, key) => {
+        if (isStructuredCloneable(key) && isStructuredCloneable(item)) {
+          result.set(copy(key), copy(item))
+        }
+      })
+
+      return result
+    }
+
+    // Anything else is walked as own enumerable properties: structuredClone()
+    // discards prototypes anyway.
+    const result: Record<string, unknown> = {}
+    seen.set(node, result)
+
+    Object.entries(node).forEach(([key, item]) => {
+      if (isStructuredCloneable(item)) {
+        result[key] = copy(item)
+      }
+    })
+
+    return result
+  }
+
+  return copy(value) as T
+}
diff --git a/packages/core/src/page.ts b/packages/core/src/page.ts
index 2e53ad1b1..e19c43b8e 100644
--- a/packages/core/src/page.ts
+++ b/packages/core/src/page.ts
@@ -3,44 +3,146 @@ import { get, set } from 'es-toolkit/compat'
 import { eventHandler } from './eventHandler'
 import { fireNavigateEvent } from './events'
 import { history } from './history'
+import {
+  addressOf,
+  dropHistoryEntry,
+  isLayerResponse,
+  layerAt,
+  layerClosing,
+  layersOf,
+  loadingBase,
+  openLayerFor,
+  recordHistoryEntry,
+  registryClose,
+  resolveLayers,
+  tierOf,
+  withLiveOwners,
+  withTier,
+  withoutFlash,
+} from './layers'
 import { prefetchedRequests } from './prefetched'
 import { Scroll } from './scroll'
-import { Component, FlashData, Page, PageEvent, PageHandler, PageResolver, RouterInitParams, Visit } from './types'
+import {
+  Component,
+  FlashData,
+  Layer,
+  LoadingResolver,
+  Page,
+  PageEvent,
+  PageHandler,
+  PageResolver,
+  ResolvedLayer,
+  RouterInitParams,
+  Visit,
+} from './types'
 import { hrefToUrl, isSameUrlWithoutHash } from './url'
 
+const baseTier = 'base'
+
+const tiersOf = (page: Page): [string, Layer][] => [
+  ...layersOf(page).map((layer): [string, Layer] => [layer.id, layer]),
+  [baseTier, page],
+]
+
+// The groups a tier arrived owing, held from the write that carries them until one lands: a write
+// a newer one supersedes never gets that far, and leaves them for the write that does.
+const pendingDeferred = new Map<string, Pick<Layer, 'deferredProps' | 'component' | 'url'>>()
+
+// A write aimed at one tier carries every other tier along untouched, groups and all, so only the
+// groups a write actually brings are recorded. The document's own page brings its own.
+const recordDeferredProps = (page: Page, onScreen?: Page): void => {
+  const carried = new Map(onScreen ? tiersOf(onScreen).map(([key, tier]) => [key, tier.deferredProps]) : [])
+
+  for (const [key, tier] of tiersOf(page)) {
+    if (Object.keys(tier.deferredProps ?? {}).length && tier.deferredProps !== carried.get(key)) {
+      pendingDeferred.set(key, { deferredProps: tier.deferredProps, component: tier.component, url: tier.url })
+    }
+  }
+}
+
+const announceDeferredProps = (page: Page): void => {
+  const tiers = tiersOf(page)
+  const open = new Set(tiers.map(([key]) => key))
+
+  for (const key of pendingDeferred.keys()) {
+    if (!open.has(key)) {
+      pendingDeferred.delete(key)
+    }
+  }
+
+  for (const [key, tier] of tiers) {
+    const owed = pendingDeferred.get(key)
+
+    if (!owed) {
+      continue
+    }
+
+    pendingDeferred.delete(key)
+
+    // The tier moved on while the write was out, so what it was owing is not what it wants now.
+    if (owed.component !== tier.component || owed.url !== tier.url) {
+      continue
+    }
+
+    eventHandler.fireInternalEvent('loadDeferredProps', {
+      deferredProps: owed.deferredProps,
+      layerId: key === baseTier ? undefined : key,
+    })
+  }
+}
+
+let baseSequence = 0
+
+const nextBaseId = (): string => `base-${++baseSequence}`
+
 class CurrentPage {
   protected page!: Page
   protected swapComponent!: PageHandler<any>
   protected resolveComponent!: PageResolver
+  protected resolveLoading?: LoadingResolver
   protected onFlashCallback?: (flash: Page['flash']) => void
   protected componentId = {}
+  protected baseGeneration = 0
+  protected baseId = ''
   protected listeners: {
     event: PageEvent
     callback: VoidFunction
   }[] = []
   protected isFirstPageLoad = true
   protected cleared = false
-  protected pendingDeferredProps: Pick<Page, 'deferredProps' | 'url' | 'component'> | null = null
   protected historyQuotaExceeded = false
-  protected optimisticBaseline: Partial<Page['props']> = {}
-  protected pendingOptimistics: { id: number; callback: (props: Page['props']) => Partial<Page['props']> | void }[] = []
+  protected historyEntryDropped = false
+  // Optimistic baselines per prop, under the tier that owns them. '' is the base.
+  protected optimisticBaselines: Map<string, Partial<Page['props']>> = new Map()
+  protected pendingOptimistics: {
+    id: number
+    layerId?: string
+    callback: (props: Page['props']) => Partial<Page['props']> | void
+  }[] = []
   protected optimisticCounter = 0
 
   public init<ComponentType = Component>({
     initialPage,
     swapComponent,
     resolveComponent,
+    resolveLoading,
     onFlash,
   }: RouterInitParams<ComponentType>) {
     this.page = { ...initialPage, flash: initialPage.flash ?? {}, rescuedProps: initialPage.rescuedProps ?? [] }
     this.swapComponent = swapComponent
     this.resolveComponent = resolveComponent
+    this.resolveLoading = resolveLoading
     this.onFlashCallback = onFlash
+    this.baseId = nextBaseId()
 
     eventHandler.on('historyQuotaExceeded', () => {
       this.historyQuotaExceeded = true
     })
 
+    eventHandler.on('historyEntryDropped', () => {
+      this.historyEntryDropped = true
+    })
+
     return this
   }
 
@@ -53,6 +155,7 @@ class CurrentPage {
       viewTransition = false,
       cached = false,
       initialRender = false,
+      preservesBase = false,
       visitId,
     }: {
       replace?: boolean
@@ -61,49 +164,75 @@ class CurrentPage {
       viewTransition?: Visit['viewTransition']
       cached?: boolean
       initialRender?: boolean
+      preservesBase?: boolean
       visitId?: string
     } = {},
   ): Promise<void> {
-    if (Object.keys(page.deferredProps || {}).length) {
-      this.pendingDeferredProps = {
-        deferredProps: page.deferredProps,
-        component: page.component,
-        url: page.url,
-      }
-
+    if (Object.keys(page.deferredProps || {}).length && page.initialDeferredProps === undefined) {
       // Preserve original deferred props for back button handling
-      if (page.initialDeferredProps === undefined) {
-        page.initialDeferredProps = page.deferredProps
-      }
+      page.initialDeferredProps = page.deferredProps
+    }
+
+    recordDeferredProps(page, initialRender ? undefined : this.page)
+
+    if (!preservesBase) {
+      // A write in flight is enough to invalidate the base for anything composing onto it.
+      this.baseGeneration++
     }
 
+    layerClosing.reconcile(page)
+
     this.componentId = {}
 
     const componentId = this.componentId
 
     if (page.clearHistory) {
       history.clear()
+      // Spent on a copy, so the flag rides into neither this entry nor the stack composing onto it.
+      page = { ...page, clearHistory: false }
     }
 
-    return this.resolve(page.component, page).then((component) => {
+    return Promise.all([this.resolve(page.component, page), this.resolveLayers(page)]).then(([component, layers]) => {
       if (componentId !== this.componentId) {
         // Component has changed since we started resolving this component, bail
         return
       }
 
+      if (!preservesBase && this.takesBaseAway(page, preserveState)) {
+        registryClose(this.baseId)
+        this.baseId = nextBaseId()
+      }
+
+      page = withLiveOwners(page, this.baseId)
+
+      layerClosing.release(page)
+
       page.rememberedState ??= {}
 
       const isServer = typeof window === 'undefined'
       const location = !isServer ? window.location : new URL(page.url)
       const scrollRegions = !isServer && preserveScroll ? Scroll.getScrollRegions() : []
-      replace = replace || isSameUrlWithoutHash(hrefToUrl(page.url), location)
+      const scrollRegionLayers = !isServer && preserveScroll ? Scroll.getScrollRegionLayers() : undefined
+      // A layer open is a step of its own, so it pushes even where the address has not moved.
+      const opensLayer = layersOf(page).some((layer) => !layer.standalone && !layerAt(this.page, layer.id))
+
+      replace = replace || (!opensLayer && isSameUrlWithoutHash(hrefToUrl(addressOf(page)), location))
+
+      if (!replace && !history.preserveUrl) {
+        page = recordHistoryEntry(page)
+      }
 
       // Clear flash data from the page object, we don't want it when navigating back/forward...
-      const pageForHistory = { ...page, flash: {} }
+      const pageForHistory = withoutFlash(page)
 
       return new Promise<void>((resolve) =>
         replace ? history.replaceState(pageForHistory, resolve) : history.pushState(pageForHistory, resolve),
       ).then(() => {
+        if (this.historyEntryDropped) {
+          this.historyEntryDropped = false
+          page = dropHistoryEntry(page)
+        }
+
         const isNewComponent = !this.isTheSame(page)
 
         if (!isNewComponent && Object.keys(page.props.errors || {}).length > 0) {
@@ -137,6 +266,7 @@ class CurrentPage {
 
         return this.swap({
           component,
+          layers,
           page,
           preserveState,
           viewTransition,
@@ -146,20 +276,12 @@ class CurrentPage {
             // Scroll regions must be explicitly restored since the DOM elements are destroyed
             // and recreated during the component 'swap'. Document scroll is naturally
             // preserved as the document element itself persists across navigations.
-            window.requestAnimationFrame(() => Scroll.restoreScrollRegions(scrollRegions))
+            window.requestAnimationFrame(() => Scroll.restoreScrollRegions(scrollRegions, scrollRegionLayers))
           } else {
             Scroll.reset()
           }
 
-          if (
-            this.pendingDeferredProps &&
-            this.pendingDeferredProps.component === page.component &&
-            this.pendingDeferredProps.url === page.url
-          ) {
-            eventHandler.fireInternalEvent('loadDeferredProps', this.pendingDeferredProps.deferredProps)
-          }
-
-          this.pendingDeferredProps = null
+          announceDeferredProps(page)
 
           if (!replace) {
             fireNavigateEvent(page, { cached, visitId })
@@ -177,11 +299,19 @@ class CurrentPage {
       preserveState?: boolean
     } = {},
   ) {
-    return this.resolve(page.component, page).then((component) => {
+    page = withLiveOwners(page, this.baseId)
+
+    this.baseGeneration++
+    layerClosing.reconcile(page)
+    layerClosing.release(page)
+
+    return this.resolve(page.component, page).then(async (component) => {
+      const layers = await this.resolveLayers(page)
+
       this.page = page
       this.cleared = false
       history.setCurrent(page)
-      return this.swap({ component, page, preserveState, viewTransition: false })
+      return this.swap({ component, layers, page, preserveState, viewTransition: false })
     })
   }
 
@@ -197,35 +327,55 @@ class CurrentPage {
     return this.page
   }
 
+  public generation(): number {
+    return this.baseGeneration
+  }
+
+  public id(): string {
+    return this.baseId
+  }
+
+  // A base the landing page still stands on keeps its id, and with it the handles hung off it.
+  protected takesBaseAway(page: Page, preserveState: boolean): boolean {
+    return !layersOf(page).some((open) => layerAt(this.page, open.id)) && !(preserveState && this.isTheSame(page))
+  }
+
   public getWithoutFlashData(): Page {
-    return { ...this.page, flash: {} }
+    return withoutFlash(this.page)
   }
 
   public hasOnceProps(): boolean {
-    return Object.keys(this.page.onceProps ?? {}).length > 0
+    return tiersOf(this.page).some(([, tier]) => Object.keys(tier.onceProps ?? {}).length > 0)
   }
 
   public merge(data: Partial<Page>): void {
     this.page = { ...this.page, ...data }
   }
 
-  public setPropsQuietly(props: Page['props']): Promise<unknown> {
-    this.page = { ...this.page, props }
+  public setPropsQuietly(props: Page['props'], layerId?: string): Promise<unknown> {
+    this.page = withTier(this.page, layerId, { props })
 
-    return this.resolve(this.page.component, this.page).then((component) => {
-      return this.swap({ component, page: this.page, preserveState: true, viewTransition: false })
-    })
+    return this.rerender()
   }
 
-  public setFlash(flash: FlashData): void {
-    this.page = { ...this.page, flash }
-    this.onFlashCallback?.(flash)
+  public rerender(): Promise<void> {
+    return Promise.all([this.resolve(this.page.component, this.page), this.resolveLayers(this.page)]).then(
+      ([component, layers]) =>
+        this.swap({ component, layers, page: this.page, preserveState: true, viewTransition: false }).then(() => {}),
+    )
   }
 
-  public setUrlHash(hash: string): void {
-    if (!this.page.url.includes(hash)) {
-      this.page.url += hash
+  public setFlash(flash: FlashData, layerId?: string): void {
+    this.page = withTier(this.page, layerId, { flash })
+
+    if (layerId) {
+      // The onFlash callback lands on the composite's own flash, where a layer's has no business.
+      this.rerender()
+
+      return
     }
+
+    this.onFlashCallback?.(flash)
   }
 
   public remember(data: Page['rememberedState']): void {
@@ -234,18 +384,20 @@ class CurrentPage {
 
   public swap({
     component,
+    layers,
     page,
     preserveState,
     viewTransition,
     initialRender = false,
   }: {
-    component: Component
+    component?: Component
+    layers?: ResolvedLayer[]
     page: Page
     preserveState: boolean
     viewTransition: Visit['viewTransition']
     initialRender?: boolean
   }): Promise<unknown> {
-    const doSwap = () => this.swapComponent({ component, page, preserveState, initialRender })
+    const doSwap = () => this.swapComponent({ component, layers, page, preserveState, initialRender })
 
     if (!viewTransition || !document?.startViewTransition || document.visibilityState === 'hidden') {
       return doSwap()
@@ -264,53 +416,89 @@ class CurrentPage {
     })
   }
 
-  public resolve(component: string, page?: Page): Promise<Component> {
-    return Promise.resolve(this.resolveComponent(component, page))
+  public resolve(component: string, page?: Page): Promise<Component | undefined> {
+    if (component !== '') {
+      return Promise.resolve(this.resolveComponent(component, page))
+    }
+
+    const base = page === undefined ? undefined : loadingBase(page)
+
+    return Promise.resolve(base === undefined ? undefined : this.resolveLoading?.(base, page!))
+  }
+
+  protected resolveLayers(page: Page): Promise<ResolvedLayer[] | undefined> {
+    if (!page.layers?.length) {
+      return Promise.resolve(undefined)
+    }
+
+    return resolveLayers(
+      page,
+      (name, layerPage) => this.resolve(name, layerPage),
+      (id) => layerClosing.isClosing(id),
+    )
   }
 
   public nextOptimisticId(): number {
     return ++this.optimisticCounter
   }
 
-  public setBaseline(key: string, value: unknown): void {
-    if (!(key in this.optimisticBaseline)) {
-      this.optimisticBaseline[key] = value
+  protected baselineOf(layerId?: string): Partial<Page['props']> {
+    return this.optimisticBaselines.get(layerId ?? '') ?? {}
+  }
+
+  public setBaseline(key: string, value: unknown, layerId?: string): void {
+    const baseline = this.baselineOf(layerId)
+
+    if (!(key in baseline)) {
+      this.optimisticBaselines.set(layerId ?? '', { ...baseline, [key]: value })
     }
   }
 
-  public updateBaseline(key: string, value: unknown): void {
-    if (key in this.optimisticBaseline) {
-      this.optimisticBaseline[key] = value
+  public updateBaseline(key: string, value: unknown, layerId?: string): void {
+    const baseline = this.baselineOf(layerId)
+
+    if (key in baseline) {
+      this.optimisticBaselines.set(layerId ?? '', { ...baseline, [key]: value })
     }
   }
 
-  public hasBaseline(key: string): boolean {
-    return key in this.optimisticBaseline
+  public hasBaseline(key: string, layerId?: string): boolean {
+    return key in this.baselineOf(layerId)
   }
 
-  public registerOptimistic(id: number, callback: (props: Page['props']) => Partial<Page['props']> | void): void {
-    this.pendingOptimistics.push({ id, callback })
+  public registerOptimistic(
+    id: number,
+    layerId: string | undefined,
+    callback: (props: Page['props']) => Partial<Page['props']> | void,
+  ): void {
+    this.pendingOptimistics.push({ id, layerId, callback })
   }
 
   public unregisterOptimistic(id: number): void {
     this.pendingOptimistics = this.pendingOptimistics.filter((entry) => entry.id !== id)
   }
 
-  public replayOptimistics(): Partial<Page['props']> {
-    const baselineKeys = Object.keys(this.optimisticBaseline)
+  public replayOptimistics(layerId?: string): Partial<Page['props']> {
+    const tierProps = tierOf(this.page, layerId).props
+    const baseline = this.baselineOf(layerId)
+    const baselineKeys = Object.keys(baseline)
 
     if (baselineKeys.length === 0) {
       return {}
     }
 
-    const props = cloneDeep(this.page.props)
+    const props = cloneDeep(tierProps) as Record<string, unknown>
 
     for (const key of baselineKeys) {
-      props[key] = cloneDeep(this.optimisticBaseline[key])
+      props[key] = cloneDeep(baseline[key])
     }
 
-    for (const { callback } of this.pendingOptimistics) {
-      const result = callback(cloneDeep(props))
+    for (const { callback, layerId: entryTier } of this.pendingOptimistics) {
+      if (entryTier !== layerId) {
+        continue
+      }
+
+      const result = callback(cloneDeep(props) as Page['props'])
 
       if (result) {
         Object.assign(props, result)
@@ -331,10 +519,20 @@ class CurrentPage {
   }
 
   public clearOptimisticState(): void {
-    this.optimisticBaseline = {}
+    this.optimisticBaselines.clear()
     this.pendingOptimistics = []
   }
 
+  public dropLayerOptimisticState(layerIds: string[]): void {
+    for (const id of layerIds) {
+      this.optimisticBaselines.delete(id)
+    }
+
+    this.pendingOptimistics = this.pendingOptimistics.filter(
+      (entry) => !entry.layerId || !layerIds.includes(entry.layerId),
+    )
+  }
+
   public isTheSame(page: Page): boolean {
     return this.page.component === page.component
   }
@@ -351,16 +549,29 @@ class CurrentPage {
     this.listeners.filter((listener) => listener.event === event).forEach((listener) => listener.callback())
   }
 
-  public mergeOncePropsIntoResponse(response: Page, { force = false }: { force?: boolean } = {}): void {
+  public mergeOncePropsIntoResponse(
+    response: Page,
+    { force = false, layerId }: { force?: boolean; layerId?: string } = {},
+  ): void {
+    const isLayer = isLayerResponse(response)
+    const open = isLayer ? openLayerFor(this.page, response, layerId) : undefined
+
+    if (isLayer && !open) {
+      return
+    }
+
+    const onceBag = open?.onceProps ?? this.page.onceProps
+    const props = open?.props ?? this.page.props
+
     Object.entries(response.onceProps ?? {}).forEach(([key, onceProp]) => {
-      const existingOnceProp = this.page.onceProps?.[key]
+      const existingOnceProp = onceBag?.[key]
 
       if (existingOnceProp === undefined) {
         return
       }
 
       if (force || get(response.props, onceProp.prop) === undefined) {
-        set(response.props, onceProp.prop, get(this.page.props, existingOnceProp.prop))
+        set(response.props, onceProp.prop, get(props, existingOnceProp.prop))
         response.onceProps![key].expiresAt = existingOnceProp.expiresAt
       }
     })
diff --git a/packages/core/src/partialReload.ts b/packages/core/src/partialReload.ts
index 244e2f383..adedfb77e 100644
--- a/packages/core/src/partialReload.ts
+++ b/packages/core/src/partialReload.ts
@@ -1,4 +1,5 @@
-import { ActiveVisit } from './types'
+import { ActiveVisit, PendingVisit } from './types'
+import { hrefToUrl, isSameUrlWithoutQueryOrHash } from './url'
 
 type VisitFilter = Pick<ActiveVisit, 'only' | 'except'>
 
@@ -27,3 +28,15 @@ export const partialReloadRequestsProp = (visit: VisitFilter, prop: string): boo
 export const partialReloadRequestsSomeProps = (visit: VisitFilter, props: string[]): boolean => {
   return props.some((prop) => partialReloadRequestsProp(visit, prop))
 }
+
+// Whether a visit is the one filling in a tier's deferred props. Two tiers can sit on the same url
+// waiting on the same prop, so the tier has to match as well.
+export const partialReloadFillsDeferred = (
+  visit: PendingVisit,
+  tier: { layerId?: string; url: string },
+  props: string[],
+): boolean =>
+  visit.preserveState === true &&
+  visit.layerId === tier.layerId &&
+  isSameUrlWithoutQueryOrHash(visit.url, hrefToUrl(tier.url)) &&
+  partialReloadRequestsSomeProps(visit, props)
diff --git a/packages/core/src/prefetched.ts b/packages/core/src/prefetched.ts
index ebf94f1a8..df5eadecb 100644
--- a/packages/core/src/prefetched.ts
+++ b/packages/core/src/prefetched.ts
@@ -6,6 +6,7 @@ import { Response } from './response'
 import { timeToMs } from './time'
 import {
   ActiveVisit,
+  BaseSnapshot,
   CacheForOption,
   InFlightPrefetch,
   InternalActiveVisit,
@@ -188,7 +189,7 @@ class PrefetchedRequests {
     return this.findCached(params) || this.findInFlight(params)
   }
 
-  public use(prefetched: PrefetchedResponse | InFlightPrefetch, params: ActiveVisit) {
+  public use(prefetched: PrefetchedResponse | InFlightPrefetch, params: ActiveVisit, capturedBase: BaseSnapshot) {
     const id = `${params.url.pathname}-${Date.now()}-${Math.random().toString(36).substring(7)}`
 
     this.currentUseId = id
@@ -207,6 +208,9 @@ class PrefetchedRequests {
 
       response.mergeParams({ ...consumedParams, onPrefetched: () => {} })
 
+      // The visit replaying this was dispatched from the page on screen, not the one it came from.
+      response.setCapturedBase(capturedBase)
+
       // If this was a one-time cache, remove it
       // (generally a prefetch="click" request with no specified cache value)
       this.removeSingleUseItems(params)
@@ -250,7 +254,7 @@ class PrefetchedRequests {
   }
 
   protected paramsAreEqual(params1: ActiveVisit, params2: ActiveVisit): boolean {
-    return objectsAreEqual<ActiveVisit>(
+    return objectsAreEqual<InternalActiveVisit>(
       this.withoutPurposePrefetchHeader(params1),
       this.withoutPurposePrefetchHeader(params2),
       [
@@ -278,6 +282,9 @@ class PrefetchedRequests {
         'component',
         'pageProps',
         'cached',
+        'fabricatedLayer',
+        'layerId',
+        'layerOwner',
       ],
     )
   }
diff --git a/packages/core/src/queue.ts b/packages/core/src/queue.ts
index 257a782c8..238bcb9a9 100644
--- a/packages/core/src/queue.ts
+++ b/packages/core/src/queue.ts
@@ -1,27 +1,32 @@
 export default class Queue<T> {
   protected items: (() => T)[] = []
-  protected processingPromise: Promise<void> | null = null
+  protected running = false
+  protected processingPromise: Promise<void> = Promise.resolve()
 
   public add(item: () => T) {
     this.items.push(item)
+
     return this.process()
   }
 
   public process() {
-    this.processingPromise ??= this.processNext().finally(() => {
-      this.processingPromise = null
-    })
+    if (!this.running) {
+      this.running = true
+      this.processingPromise = this.drain()
+    }
 
     return this.processingPromise
   }
 
-  protected processNext(): Promise<void> {
-    const next = this.items.shift()
-
-    if (next) {
-      return Promise.resolve(next()).then(() => this.processNext())
+  // The flag falls in the same tick as the check that ended the loop, so an item added from here on
+  // starts a run of its own rather than joining a promise that has already settled.
+  protected async drain(): Promise<void> {
+    try {
+      for (let next = this.items.shift(); next; next = this.items.shift()) {
+        await next()
+      }
+    } finally {
+      this.running = false
     }
-
-    return Promise.resolve()
   }
 }
diff --git a/packages/core/src/request.ts b/packages/core/src/request.ts
index ee5a409a3..361889b76 100644
--- a/packages/core/src/request.ts
+++ b/packages/core/src/request.ts
@@ -9,10 +9,11 @@ import {
 import { http } from './http'
 import { HttpCancelledError, HttpResponseError } from './httpErrors'
 import { interceptors } from './interceptors'
+import { closeUnlandedLayer, layerAt } from './layers'
 import { page as currentPage } from './page'
 import { RequestParams } from './requestParams'
 import { Response } from './response'
-import type { ActiveVisit, Page } from './types'
+import type { ActiveVisit, BaseSnapshot, Page } from './types'
 import { HttpProgressEvent, HttpRequestConfig, HttpRequestHeaders } from './types'
 import { urlWithoutHash } from './url'
 
@@ -26,6 +27,7 @@ export class Request {
   constructor(
     params: ActiveVisit,
     protected page: Page,
+    protected capturedBase: BaseSnapshot,
     { optimistic = false }: { optimistic?: boolean } = {},
   ) {
     this.requestParams = RequestParams.create(params)
@@ -33,8 +35,13 @@ export class Request {
     this.optimistic = optimistic
   }
 
-  public static create(params: ActiveVisit, page: Page, options?: { optimistic?: boolean }): Request {
-    return new Request(params, page, options)
+  public static create(
+    params: ActiveVisit,
+    page: Page,
+    capturedBase: BaseSnapshot,
+    options?: { optimistic?: boolean },
+  ): Request {
+    return new Request(params, page, capturedBase, options)
   }
 
   public isPrefetch(): boolean {
@@ -45,6 +52,10 @@ export class Request {
     return this.requestParams.all().url
   }
 
+  public get layerId(): string | undefined {
+    return this.requestParams.all().layerId
+  }
+
   public isOptimistic(): boolean {
     return this.optimistic
   }
@@ -91,14 +102,14 @@ export class Request {
       .getClient()
       .request(processedConfig)
       .then((response) => {
-        this.response = Response.create(this.requestParams, response, this.page)
+        this.response = Response.create(this.requestParams, response, this.page, this.capturedBase)
 
         return this.response.handle()
       })
       .catch((error) => {
         // Handle HTTP error responses (4xx/5xx)
         if (error instanceof HttpResponseError) {
-          this.response = Response.create(this.requestParams, error.response, this.page)
+          this.response = Response.create(this.requestParams, error.response, this.page, this.capturedBase)
 
           return this.response.handle()
         }
@@ -111,6 +122,10 @@ export class Request {
           return
         }
 
+        // A request that never brought a response back leaves nothing to open the layer it was
+        // aimed at, so the attempt is spent here as it is on every other terminal path.
+        closeUnlandedLayer(currentPage.get(), this.requestParams.all().layerId)
+
         if (this.requestParams.all().onNetworkError(error) === false) {
           return
         }
@@ -163,6 +178,8 @@ export class Request {
 
     this.requestParams.markAsCancelled({ cancelled, interrupted })
 
+    closeUnlandedLayer(currentPage.get(), this.requestParams.all().layerId)
+
     this.fireFinishEvents()
   }
 
@@ -187,16 +204,22 @@ export class Request {
       headers['X-Inertia-Version'] = page.version
     }
 
-    const onceProps = Object.entries(page.onceProps || {})
-      .filter(([, onceProp]) => {
-        if (get(page.props, onceProp.prop) === undefined) {
-          // The prop could deferred and not be loaded yet
-          return false
-        }
-
-        return !onceProp.expiresAt || onceProp.expiresAt > Date.now()
-      })
-      .map(([key]) => key)
+    // A request names its own tier's once keys in the except header, never a union with another's.
+    // A visit opening a layer has no tier of its own yet, so it names none.
+    const { layerId } = this.requestParams.all()
+    const tier = layerId === undefined ? page : layerAt(page, layerId)
+    const onceProps = tier
+      ? Object.entries(tier.onceProps || {})
+          .filter(([, onceProp]) => {
+            if (get(tier.props, onceProp.prop) === undefined) {
+              // The prop could deferred and not be loaded yet
+              return false
+            }
+
+            return !onceProp.expiresAt || onceProp.expiresAt > Date.now()
+          })
+          .map(([key]) => key)
+      : []
 
     if (onceProps.length > 0) {
       headers['X-Inertia-Except-Once-Props'] = onceProps.join(',')
diff --git a/packages/core/src/requestParams.ts b/packages/core/src/requestParams.ts
index 9f50d8322..8602af8f4 100644
--- a/packages/core/src/requestParams.ts
+++ b/packages/core/src/requestParams.ts
@@ -1,3 +1,4 @@
+import { tierOf } from './layers'
 import { page as currentPage } from './page'
 import { Response } from './response'
 import {
@@ -75,6 +76,18 @@ export class RequestParams {
     return this.params.poll === true
   }
 
+  public isReload() {
+    return this.params.reload === true
+  }
+
+  public isWalkRequest() {
+    return this.params.walk === true
+  }
+
+  public fabricatedLayer() {
+    return this.params.fabricatedLayer === true
+  }
+
   public onCancelToken(cb: VoidFunction) {
     this.params.onCancelToken({
       cancel: cb,
@@ -133,7 +146,8 @@ export class RequestParams {
     }
 
     if (this.isPartial()) {
-      headers['X-Inertia-Partial-Component'] = currentPage.get().component
+      // A partial names its own tier's component, so the server answers that route's partial.
+      headers['X-Inertia-Partial-Component'] = tierOf(currentPage.get(), this.params.layerId).component
     }
 
     const only = this.params.only.concat(this.params.reset)
diff --git a/packages/core/src/response.ts b/packages/core/src/response.ts
index b074a8832..c0829aff6 100644
--- a/packages/core/src/response.ts
+++ b/packages/core/src/response.ts
@@ -13,15 +13,279 @@ import {
 } from './events'
 import { history } from './history'
 import { interceptors } from './interceptors'
+import {
+  CarriedLayer,
+  addressOf,
+  addressTierOf,
+  capturedBaseIsValid,
+  closeUnlandedLayer,
+  isLayerResponse,
+  landLayerResponse,
+  layerAt,
+  layerBaseOf,
+  layerClosing,
+  layerKeyOf,
+  layersOf,
+  loadingBase,
+  openLayerFor,
+  promoteDeepestLayer,
+  tierOf,
+  withTier,
+} from './layers'
 import { page as currentPage } from './page'
 import { partialReloadRequestsProp } from './partialReload'
 import Queue from './queue'
 import { RequestParams } from './requestParams'
 import { SessionStorage } from './sessionStorage'
-import { ActiveVisit, ErrorBag, Errors, HttpResponse, Page, PageProps } from './types'
-import { hrefToUrl, isSameUrlWithoutHash, setHashIfSameUrl } from './url'
+import {
+  ActiveVisit,
+  BaseSnapshot,
+  ErrorBag,
+  Errors,
+  HttpResponse,
+  Layer,
+  LayerState,
+  Page,
+  PageProps,
+  VisitOptions,
+} from './types'
+import { hrefToUrl, isSameUrlWithoutHash, setHashIfSameUrl, urlWithoutHash } from './url'
+
+const responseQueue = new Queue<Promise<boolean | void>>()
+
+// What a marked detour stashed, so the return trip composes over the page the user was on.
+interface InterstitialCarry {
+  layer: CarriedLayer
+  dispatchedUrl: string
+}
+
+let interstitialCarry: InterstitialCarry | undefined
+
+// Only the layer the detour interrupted may claim the stash, never one opened on the prompt.
+const interstitialCarryFor = (url: string): InterstitialCarry | undefined =>
+  interstitialCarry && isSameUrlWithoutHash(hrefToUrl(interstitialCarry.dispatchedUrl), hrefToUrl(url))
+    ? interstitialCarry
+    : undefined
+
+export const landWalk = (walkedFrom: number): Promise<void> => {
+  const page = currentPage.get()
+
+  if (walkedFrom !== currentPage.generation()) {
+    return Promise.resolve()
+  }
+
+  if (!layerClosing.withoutClosingLayers(page).layers?.length) {
+    // Nothing to promote: the page is the blank base, which never renders. Re-request its own url.
+    return Promise.resolve(router.visit(page.url, { replace: true, preserveScroll: true, preserveState: true }))
+  }
+
+  return currentPage.set(promoteDeepestLayer(page), {
+    replace: true,
+    preserveScroll: true,
+    preserveState: true,
+    preservesBase: true,
+  })
+}
+
+export const walkTo = (base: string): void => {
+  const walkedFrom = currentPage.generation()
+
+  // A hop that brings back no page leaves the stack drawn over a base that is never coming.
+  const land = () => {
+    responseQueue.add(() => landWalk(walkedFrom))
+
+    return false
+  }
+
+  router.visit(base, {
+    walk: true,
+    async: true,
+    replace: true,
+    preserveScroll: true,
+    preserveState: true,
+    onHttpException: land,
+    onNetworkError: land,
+  } as VisitOptions & { walk: true })
+}
+
+function isObject(item: any): boolean {
+  return item && typeof item === 'object' && !Array.isArray(item)
+}
+
+function hasUniqueProperty(item: any, property: string): boolean {
+  return item && typeof item === 'object' && property in item
+}
+
+function appendWithMatching(
+  existingItems: any[],
+  newItems: any[],
+  newItemsMap: Map<any, any>,
+  uniqueProperty: string,
+): any[] {
+  // Update existing items with new values, keep non-matching items
+  const updatedExisting = existingItems.map((item) => {
+    if (hasUniqueProperty(item, uniqueProperty) && newItemsMap.has(item[uniqueProperty])) {
+      return newItemsMap.get(item[uniqueProperty])
+    }
+
+    return item
+  })
+
+  // Filter new items to only include those not already in existing items
+  const newItemsToAdd = newItems.filter((item) => {
+    if (!hasUniqueProperty(item, uniqueProperty)) {
+      return true // Always add items without unique property
+    }
+
+    return !existingItems.some(
+      (existing) => hasUniqueProperty(existing, uniqueProperty) && existing[uniqueProperty] === item[uniqueProperty],
+    )
+  })
+
+  return [...updatedExisting, ...newItemsToAdd]
+}
+
+function prependWithMatching(
+  existingItems: any[],
+  newItems: any[],
+  newItemsMap: Map<any, any>,
+  uniqueProperty: string,
+): any[] {
+  // Filter existing items, keeping only those not being updated
+  const untouchedExisting = existingItems.filter((item) => {
+    if (hasUniqueProperty(item, uniqueProperty)) {
+      return !newItemsMap.has(item[uniqueProperty])
+    }
+
+    return true
+  })
+
+  return [...newItems, ...untouchedExisting]
+}
+
+function mergeOrMatchItems(
+  existingItems: any[],
+  newItems: any[],
+  matchProp: string,
+  matchPropsOn: string[],
+  shouldAppend = true,
+) {
+  const items = Array.isArray(existingItems) ? existingItems : []
+
+  // Find the matching key for this specific property path
+  const matchingKey = matchPropsOn.find((key) => {
+    const keyPath = key.split('.').slice(0, -1).join('.')
+
+    return keyPath === matchProp
+  })
+
+  // If no matching key is configured, simply concatenate the arrays
+  if (!matchingKey) {
+    return shouldAppend ? [...items, ...newItems] : [...newItems, ...items]
+  }
+
+  // Extract the property name we'll use to match items (e.g., 'id' from 'users.data.id')
+  const uniqueProperty = matchingKey.split('.').pop() || ''
+
+  // Create a map of new items by their unique property lookups
+  const newItemsMap = new Map()
+
+  newItems.forEach((item) => {
+    if (hasUniqueProperty(item, uniqueProperty)) {
+      newItemsMap.set(item[uniqueProperty], item)
+    }
+  })
+
+  return shouldAppend
+    ? appendWithMatching(items, newItems, newItemsMap, uniqueProperty)
+    : prependWithMatching(items, newItems, newItemsMap, uniqueProperty)
+}
+
+function mergeProp(
+  pageResponse: Page,
+  currentProps: PageProps,
+  prop: string,
+  shouldAppend: boolean,
+  matchPropsOn: string[],
+): void {
+  const currentProp = get(currentProps, prop)
+  const incomingProp = get(pageResponse.props, prop)
+
+  if (Array.isArray(incomingProp)) {
+    const newArray = mergeOrMatchItems((currentProp || []) as any[], incomingProp, prop, matchPropsOn, shouldAppend)
+
+    set(pageResponse.props, prop, newArray)
+  } else if (typeof incomingProp === 'object' && incomingProp !== null) {
+    const newObject = {
+      ...(currentProp || {}),
+      ...incomingProp,
+    }
+
+    set(pageResponse.props, prop, newObject)
+  }
+}
+
+function deepMergeProp(target: any, source: any, matchProp: string, matchPropsOn: string[]): any {
+  if (Array.isArray(source)) {
+    return mergeOrMatchItems(target, source, matchProp, matchPropsOn)
+  }
+
+  if (typeof source === 'object' && source !== null) {
+    // Merge objects by iterating over keys
+    return Object.keys(source).reduce(
+      (acc, key) => {
+        acc[key] = deepMergeProp(target ? target[key] : undefined, source[key], `${matchProp}.${key}`, matchPropsOn)
+        return acc
+      },
+      { ...target },
+    )
+  }
+
+  // If the source is neither an array nor an object, simply return it
+  return source
+}
+
+function deepMergeObjects(target: PageProps, source: PageProps): PageProps {
+  const result = { ...target }
+
+  for (const key of Object.keys(source)) {
+    const targetValue = target[key]
+    const sourceValue = source[key]
+
+    if (isObject(targetValue) && isObject(sourceValue)) {
+      result[key] = deepMergeObjects(targetValue as PageProps, sourceValue as PageProps)
+    } else {
+      result[key] = sourceValue
+    }
+  }
+
+  return result
+}
+
+function mergePropsInto(pageResponse: Page, currentProps: PageProps, nestedProps: string[]): void {
+  const matchPropsOn = pageResponse.matchPropsOn || []
+
+  ;(pageResponse.mergeProps || []).forEach((prop) => mergeProp(pageResponse, currentProps, prop, true, matchPropsOn))
+  ;(pageResponse.prependProps || []).forEach((prop) => mergeProp(pageResponse, currentProps, prop, false, matchPropsOn))
+  ;(pageResponse.deepMergeProps || []).forEach((prop) => {
+    const currentProp = get(currentProps, prop)
+    const incomingProp = get(pageResponse.props, prop)
+
+    set(pageResponse.props, prop, deepMergeProp(currentProp, incomingProp, prop, matchPropsOn))
+  })
 
-const queue = new Queue<Promise<boolean | void>>()
+  const nestedTopKeys = new Set(nestedProps.filter((prop) => prop.includes('.')).map((prop) => prop.split('.')[0]))
+
+  for (const key of nestedTopKeys) {
+    const currentValue = currentProps[key]
+
+    if (isObject(currentValue) && isObject(pageResponse.props[key])) {
+      pageResponse.props[key] = deepMergeObjects(currentValue as PageProps, pageResponse.props[key] as PageProps)
+    }
+  }
+
+  pageResponse.props = { ...currentProps, ...pageResponse.props }
+}
 
 export class Response {
   protected wasPrefetched = false
@@ -31,10 +295,16 @@ export class Response {
     protected requestParams: RequestParams,
     protected response: HttpResponse,
     protected originatingPage: Page,
+    protected capturedBase: BaseSnapshot,
   ) {}
 
-  public static create(params: RequestParams, response: HttpResponse, originatingPage: Page): Response {
-    return new Response(params, response, originatingPage)
+  public static create(
+    params: RequestParams,
+    response: HttpResponse,
+    originatingPage: Page,
+    capturedBase: BaseSnapshot,
+  ): Response {
+    return new Response(params, response, originatingPage, capturedBase)
   }
 
   public isProcessed(): boolean {
@@ -48,7 +318,7 @@ export class Response {
   }
 
   public async handle() {
-    return queue.add(() => this.process())
+    return responseQueue.add(() => this.process())
   }
 
   public async process() {
@@ -76,35 +346,70 @@ export class Response {
       }
 
       if (this.requestParams.all().onHttpException(response) === false) {
+        this.closeLayerAttempt()
         return
       }
 
       if (!fireHttpExceptionEvent(response)) {
+        this.closeLayerAttempt()
         return
       }
     }
 
+    const data = this.getDataFromResponse(this.response.data)
+
+    if (data && data.close) {
+      const { layerId } = this.requestParams.all()
+      // A close is never installed: it closes the layer the visit was made from, or the top one when
+      // it named none. One whose layer has gone since has nothing of its own left to close.
+      const closes = layerId === undefined ? layersOf(currentPage.get()).at(-1) : layerAt(currentPage.get(), layerId)
+
+      if (closes) {
+        // Not awaited: the close refreshes what it lands on, and that response queues behind this one.
+        router.close(closes.id)
+      } else {
+        router.reload()
+      }
+
+      this.closeLayerAttempt()
+
+      router.flushByCacheTags(this.requestParams.all().invalidateCacheTags || [])
+
+      // The visit succeeded even though nothing installed. The closing layers are still on screen
+      // running their exit, so the page the callbacks see is the one the close leaves behind.
+      const landsOn = layerClosing.withoutClosingLayers(currentPage.get())
+
+      fireSuccessEvent(landsOn, { visitId: this.requestParams.all().id })
+
+      return this.requestParams.all().onSuccess(landsOn)
+    }
+
     await history.processQueue()
 
     history.preserveUrl = this.requestParams.all().preserveUrl
 
-    await this.setPage()
+    const landedOn = await this.setPage()
 
-    const { flash } = currentPage.get()
+    const page = currentPage.get()
+    const tier = landedOn === undefined ? page : layerAt(page, landedOn)
 
-    if (Object.keys(flash).length > 0 && !this.requestParams.isDeferredPropsRequest()) {
-      fireFlashEvent(flash)
-      this.requestParams.all().onFlash(flash)
-    }
+    if (tier) {
+      const { flash } = tier
 
-    const errors = currentPage.get().props.errors || {}
+      if (Object.keys(flash).length > 0 && !this.requestParams.isDeferredPropsRequest()) {
+        fireFlashEvent(flash)
+        this.requestParams.all().onFlash(flash)
+      }
+
+      const errors = (tier.props.errors || {}) as Errors & ErrorBag
 
-    if (Object.keys(errors).length > 0) {
-      const scopedErrors = this.getScopedErrors(errors)
+      if (Object.keys(errors).length > 0) {
+        const scopedErrors = this.getScopedErrors(errors)
 
-      fireErrorEvent(scopedErrors, { page: currentPage.get(), visitId: this.requestParams.all().id })
+        fireErrorEvent(scopedErrors, { page, visitId: this.requestParams.all().id })
 
-      return this.requestParams.all().onError(scopedErrors)
+        return this.requestParams.all().onError(scopedErrors)
+      }
     }
 
     router.flushByCacheTags(this.requestParams.all().invalidateCacheTags || [])
@@ -112,7 +417,7 @@ export class Response {
     if (!this.wasPrefetched) {
       // We end up here other than from the prefetch cache, so we assume this response is
       // newer than the cached one and therefore flush the cache.
-      router.flush(currentPage.get().url)
+      router.flush(tier?.url ?? page.url)
     }
 
     fireSuccessEvent(currentPage.get(), { visitId: this.requestParams.all().id })
@@ -126,6 +431,10 @@ export class Response {
     this.requestParams.merge(params)
   }
 
+  public setCapturedBase(capturedBase: BaseSnapshot): void {
+    this.capturedBase = capturedBase
+  }
+
   public getPageResponse(): Page {
     const data = this.getDataFromResponse(this.response.data)
 
@@ -138,9 +447,15 @@ export class Response {
   }
 
   protected async handleNonInertiaResponse() {
+    // Nothing below installs a layer: every path either navigates away or shows the error.
+    this.closeLayerAttempt()
+
     if (this.isInertiaRedirect()) {
+      // The layer target is dropped, so a redirected layer reload lands as a base navigation.
+      const { layerId, layerOwner, ...params } = this.requestParams.all()
+
       router.visit(this.getHeader('x-inertia-redirect'), {
-        ...this.requestParams.all(),
+        ...params,
         method: 'get',
         data: {},
       })
@@ -201,7 +516,7 @@ export class Response {
   /**
    * @link https://inertiajs.com/redirects#external-redirects
    */
-  protected locationVisit(url: URL): boolean | void {
+  protected locationVisit(url: URL): Promise<void> | boolean | void {
     try {
       if (typeof window === 'undefined') {
         return
@@ -218,6 +533,10 @@ export class Response {
       // force a full-page navigation the user never initiated. The next user-initiated visit
       // hits the same location response and reloads then.
       if (versionChange && this.requestParams.all().async) {
+        if (this.requestParams.isWalkRequest()) {
+          return landWalk(this.capturedBase.generation)
+        }
+
         return
       }
 
@@ -235,17 +554,21 @@ export class Response {
     }
   }
 
-  protected async setPage(): Promise<void> {
+  protected async setPage(): Promise<string | undefined> {
+    // Composing onto a stack the browser is stepping out of would reopen what the user just closed.
+    await layerClosing.unwindSettled()
+
     const pageResponse = this.getPageResponse()
 
     if (!this.shouldSetPage(pageResponse)) {
-      return Promise.resolve()
+      this.closeLayerAttempt()
+      return undefined
     }
 
     this.response = await interceptors.processResponse(this.requestParams.all(), this.response)
 
     this.mergeProps(pageResponse)
-    currentPage.mergeOncePropsIntoResponse(pageResponse)
+    currentPage.mergeOncePropsIntoResponse(pageResponse, { layerId: this.requestParams.all().layerId })
     this.preserveOptimisticProps(pageResponse)
     this.preserveEqualProps(pageResponse)
 
@@ -253,19 +576,185 @@ export class Response {
 
     this.requestParams.setPreserveOptions(pageResponse)
 
-    pageResponse.url = history.preserveUrl ? currentPage.get().url : this.pageUrl(pageResponse)
+    // `preserveUrl` puts the base's url on the response, so the layer's own is held here.
+    const responseUrl = this.pageUrl(pageResponse)
+
+    pageResponse.url = history.preserveUrl ? currentPage.get().url : responseUrl
+
+    let base = currentPage.get()
+    const isLayer = isLayerResponse(pageResponse)
+    const walksBeneath = this.requestParams.isWalkRequest()
+
+    const handedBackTo = this.errorsHandedBackTo(pageResponse)
+    const refreshesBase = this.refreshesBase(pageResponse) || handedBackTo !== undefined
+    const keepsStack = (this.keepsStack(pageResponse) || handedBackTo !== undefined) && layersOf(base).length > 0
+
+    if (!isLayer && !walksBeneath) {
+      this.carryOrEndDetour(pageResponse)
+    }
+
+    // A carried return composes over the base its stash holds, which the clauses below cannot see.
+    const carry = interstitialCarryFor(responseUrl)
+    const composesAsLayer =
+      !walksBeneath && isLayer && (carry !== undefined || this.hasValidCapturedBase(pageResponse, responseUrl, base))
+    const carriedReturn = composesAsLayer && carry !== undefined
+
+    if (composesAsLayer) {
+      // A link four layers deep can name a layer that is not the top one, so the stack closes down
+      // to it before the response lands. A refresh in place names no level: a poll or a deferred
+      // group filling in under an open layer leaves that layer where it is. Neither does a form
+      // handed back to a layer standing above the address it was submitted from.
+      if (!this.refreshesInPlace() && handedBackTo === undefined) {
+        await layerClosing.closeAbove(openLayerFor(base, pageResponse, this.requestParams.all().layerId)?.id)
+
+        base = currentPage.get()
+      }
+
+      const open = openLayerFor(base, pageResponse, this.requestParams.all().layerId)
+
+      if (open && this.requestParams.isPartial() && open.component === pageResponse.component) {
+        this.mergeIntoTier(pageResponse, open)
+      }
+    }
+
+    const landing = landLayerResponse({
+      base,
+      response: pageResponse,
+      responseUrl,
+      composesAsLayer,
+      walksBeneath,
+      // The layer's own component is kept only when the visit asked for it, as the base's is.
+      remount: !this.requestParams.all().preserveState,
+      carried: carry?.layer ?? this.carriedLayer(base),
+      preserveUrl: history.preserveUrl,
+      keepsStack,
+    })
+
+    if (handedBackTo) {
+      const landedOn = tierOf(landing.page, landing.landedOn)
+
+      landing.page = withTier(
+        withTier(landing.page, landing.landedOn, { props: { ...landedOn.props, errors: {} }, flash: {} }),
+        handedBackTo.id,
+        { props: { ...handedBackTo.props, errors: pageResponse.props.errors }, flash: landedOn.flash },
+      )
+      landing.landedOn = handedBackTo.id
+    }
 
-    this.requestParams.all().onBeforeUpdate(pageResponse)
-    fireBeforeUpdateEvent(pageResponse)
+    const page = landing.page
+    const landsOverTheStack = composesAsLayer || handedBackTo !== undefined
 
-    return currentPage.set(pageResponse, {
-      replace: this.requestParams.all().replace,
-      preserveScroll: this.requestParams.all().preserveScroll as boolean,
-      preserveState: this.requestParams.all().preserveState as boolean,
+    history.preserveUrl = landing.preserveUrl
+
+    if (carriedReturn) {
+      interstitialCarry = undefined
+    }
+
+    if (landing.landedOn === undefined) {
+      // The open never landed, so its handle is spent. Fired ahead of the page that replaces it.
+      this.closeLayerAttempt()
+    }
+
+    this.requestParams.all().onBeforeUpdate(page)
+    fireBeforeUpdateEvent(page)
+
+    await currentPage.set(page, {
+      // The layer's entry takes the prompt's place, so back lands on the base, not a dead prompt.
+      replace: carriedReturn || this.requestParams.all().replace,
+      preserveScroll: landsOverTheStack || (this.requestParams.all().preserveScroll as boolean),
+      preserveState: landsOverTheStack || (this.requestParams.all().preserveState as boolean),
+      preservesBase: landsOverTheStack || walksBeneath || refreshesBase,
       viewTransition: this.requestParams.all().viewTransition,
       cached: this.requestParams.all().cached,
       visitId: this.requestParams.all().id,
     })
+
+    if (landing.walksTo !== undefined) {
+      walkTo(landing.walksTo)
+    } else if (walksBeneath) {
+      // The write can be superseded while its component resolves, by a close's own write say, and
+      // what superseded it still shows the blank. This response is spent, so the walk is sent again.
+      const base = loadingBase(currentPage.get())
+
+      if (base !== undefined) {
+        walkTo(base)
+      }
+    }
+
+    return landing.landedOn
+  }
+
+  // A marked non-layer response is a prompt the user will return from, so the base it was dispatched
+  // from is stashed before the prompt installs. The mark alone says so: a plain visit the server
+  // answers with a layer once the prompt is done is the same detour, and the client has no layer of
+  // its own to recognise it by. An unmarked landing ends any pending detour.
+  protected carryOrEndDetour(pageResponse: Page): void {
+    const { url, layerOwner } = this.requestParams.all()
+
+    // A prompt answering its own submit, a wrong password say, is the detour already running. Only
+    // an open of its own starts a second one, retiring the attempt the old stash was pausing.
+    if (pageResponse.interstitial && interstitialCarry && layerOwner === undefined) {
+      return
+    }
+
+    if (interstitialCarry) {
+      // The detour it was holding is not coming back, so the attempt it paused is spent after all.
+      closeUnlandedLayer(currentPage.get(), interstitialCarry.layer.layerId)
+    }
+
+    interstitialCarry = pageResponse.interstitial
+      ? { layer: this.carriedLayer(this.capturedBase.page), dispatchedUrl: urlWithoutHash(url).href }
+      : undefined
+  }
+
+  protected carriedLayer(base: Page): CarriedLayer {
+    const { layerId, layerOwner } = this.requestParams.all()
+
+    return {
+      base,
+      layerId,
+      opening: layerOwner !== undefined,
+      owner: layerOwner ?? layerAt(base, layerId)?.id ?? currentPage.id(),
+      claims: this.requestParams.fabricatedLayer(),
+    }
+  }
+
+  protected closeLayerAttempt(): void {
+    const { layerId } = this.requestParams.all()
+
+    // A marked detour returns to this layer, so its attempt is paused rather than spent.
+    if (interstitialCarry?.layer.layerId === layerId) {
+      return
+    }
+
+    closeUnlandedLayer(currentPage.get(), layerId)
+  }
+
+  protected hasValidCapturedBase(pageResponse: Page, layerUrl: string, base: Page): boolean {
+    const { layerId, layerOwner } = this.requestParams.all()
+
+    return capturedBaseIsValid({
+      captured: this.capturedBase,
+      live: { page: base, generation: currentPage.generation() },
+      dispatchedUrl: this.requestParams.all().url,
+      dispatchedFrom: layerOwner ?? layerId,
+      opening: layerOwner !== undefined,
+      layer: { url: layerUrl, key: layerKeyOf(pageResponse), base: layerBaseOf(pageResponse) },
+    })
+  }
+
+  // A layer response for a visit aimed at a layer that has since closed has nowhere to land: it
+  // would either reopen what the user dismissed or, having no valid base left, tear the page down
+  // to walk one back. An open carries no tier yet, so it is exempt.
+  protected answersAClosedLayer(pageResponse: Page): boolean {
+    const { layerId, layerOwner } = this.requestParams.all()
+
+    return (
+      layerId !== undefined &&
+      layerOwner === undefined &&
+      !layerAt(currentPage.get(), layerId) &&
+      isLayerResponse(pageResponse)
+    )
   }
 
   protected getDataFromResponse(response: any): any {
@@ -281,12 +770,25 @@ export class Response {
   }
 
   protected shouldSetPage(pageResponse: Page): boolean {
+    if (this.requestParams.isWalkRequest()) {
+      return this.capturedBase.generation === currentPage.generation()
+    }
+
+    if (this.answersAClosedLayer(pageResponse)) {
+      return false
+    }
+
     if (!this.requestParams.all().async) {
       // If the request is sync, we should always set the page
       return true
     }
 
-    if (this.originatingPage.component !== pageResponse.component) {
+    // Read against the tier the request was aimed at: what says a layer has moved on is its own
+    // component and url changing, neither of which the page beneath it carries.
+    const originating = tierOf(this.originatingPage, this.requestParams.all().layerId)
+    const live = tierOf(currentPage.get(), this.requestParams.all().layerId)
+
+    if (originating.component !== pageResponse.component) {
       // We originated from a component but the response re-directed us,
       // we should respect the redirection and set the page
       return true
@@ -294,16 +796,20 @@ export class Response {
 
     // At this point, if the originating request component is different than the current component,
     // the user has since navigated and we should discard the response
-    if (this.originatingPage.component !== currentPage.get().component) {
+    if (originating.component !== live.component) {
       return false
     }
 
-    const originatingUrl = hrefToUrl(this.originatingPage.url)
-    const currentPageUrl = hrefToUrl(currentPage.get().url)
+    if (originating.url === null || live.url === null) {
+      return originating.url === live.url
+    }
+
+    const originatingUrl = hrefToUrl(originating.url)
+    const liveUrl = hrefToUrl(live.url)
 
     // We have the same component, let's double-check the URL
     // If we're no longer on the same path name (e.g. /users/1 -> /users/2), we should not set the page
-    return originatingUrl.origin === currentPageUrl.origin && originatingUrl.pathname === currentPageUrl.pathname
+    return originatingUrl.origin === liveUrl.origin && originatingUrl.pathname === liveUrl.pathname
   }
 
   protected pageUrl(pageResponse: Page) {
@@ -323,169 +829,130 @@ export class Response {
       return
     }
 
+    const layer = isLayerResponse(pageResponse)
+      ? openLayerFor(currentPage.get(), pageResponse, this.requestParams.all().layerId)
+      : undefined
+
     for (const key of Object.keys(pageResponse.props)) {
-      if (currentPage.hasBaseline(key)) {
-        currentPage.updateBaseline(key, pageResponse.props[key])
-        pageResponse.props[key] = currentPage.get().props[key]
+      if (currentPage.hasBaseline(key, layer?.id)) {
+        currentPage.updateBaseline(key, pageResponse.props[key], layer?.id)
+        pageResponse.props[key] = (layer ? layer.props : currentPage.get().props)[key]
       }
     }
   }
 
+  // Read against the tier the response is landing on: a layer's props have nothing in common with
+  // the base's, so sharing what happens to be equal between them would be sharing across tiers.
   protected preserveEqualProps(pageResponse: Page): void {
-    if (pageResponse.component !== currentPage.get().component) {
+    const tier = isLayerResponse(pageResponse)
+      ? openLayerFor(currentPage.get(), pageResponse, this.requestParams.all().layerId)
+      : currentPage.get()
+
+    if (!tier || tier.component !== pageResponse.component) {
       return
     }
 
-    const currentPageProps = currentPage.get().props
-
     Object.entries(pageResponse.props).forEach(([key, value]) => {
-      if (isEqual(value, currentPageProps[key])) {
-        pageResponse.props[key] = currentPageProps[key]
+      if (isEqual(value, tier.props[key])) {
+        pageResponse.props[key] = tier.props[key]
       }
     })
   }
 
-  protected mergeProps(pageResponse: Page): void {
-    if (!this.requestParams.isPartial() || pageResponse.component !== currentPage.get().component) {
-      return
-    }
+  protected refreshesInPlace(): boolean {
+    return this.requestParams.isPartial() || this.requestParams.isReload()
+  }
 
-    const propsToAppend = pageResponse.mergeProps || []
-    const propsToPrepend = pageResponse.prependProps || []
-    const propsToDeepMerge = pageResponse.deepMergeProps || []
-    const matchPropsOn = pageResponse.matchPropsOn || []
-
-    const mergeProp = (prop: string, shouldAppend: boolean) => {
-      const currentProp = get(currentPage.get().props, prop)
-      const incomingProp = get(pageResponse.props, prop)
-
-      if (Array.isArray(incomingProp)) {
-        const newArray = this.mergeOrMatchItems(
-          (currentProp || []) as any[],
-          incomingProp,
-          prop,
-          matchPropsOn,
-          shouldAppend,
-        )
-
-        set(pageResponse.props, prop, newArray)
-      } else if (typeof incomingProp === 'object' && incomingProp !== null) {
-        const newObject = {
-          ...(currentProp || {}),
-          ...incomingProp,
-        }
+  // The stack stands over the refreshed base. A blank base takes whatever fills it in, being a
+  // placeholder a walk left.
+  protected keepsStack(pageResponse: Page): boolean {
+    return this.refreshesInPlace() && (this.staysOnBaseComponent(pageResponse) || currentPage.get().component === '')
+  }
 
-        set(pageResponse.props, prop, newObject)
-      }
-    }
+  protected refreshesBase(pageResponse: Page): boolean {
+    return this.refreshesInPlace() && this.landsOnTheBase(pageResponse)
+  }
 
-    propsToAppend.forEach((prop) => mergeProp(prop, true))
-    propsToPrepend.forEach((prop) => mergeProp(prop, false))
+  protected landsOnTheBase(pageResponse: Page): boolean {
+    return (
+      this.staysOnBaseComponent(pageResponse) &&
+      isSameUrlWithoutHash(hrefToUrl(pageResponse.url), hrefToUrl(currentPage.get().url))
+    )
+  }
 
-    propsToDeepMerge.forEach((prop) => {
-      const currentProp = get(currentPage.get().props, prop)
-      const incomingProp = get(pageResponse.props, prop)
+  // A layer that does not own the address, one with no url of its own say, is submitted from the
+  // address of the tier beneath it, so that is where its errors and flash come back. A response arriving there
+  // unchanged is the server handing the form back, not a navigation.
+  protected errorsHandedBackTo(pageResponse: Page): LayerState | undefined {
+    const page = currentPage.get()
+    const layer = layerAt(page, this.requestParams.all().layerId)
+    const address = addressTierOf(page)
 
-      // Function to recursively merge objects and arrays
-      const deepMerge = (target: any, source: any, matchProp: string) => {
-        if (Array.isArray(source)) {
-          return this.mergeOrMatchItems(target, source, matchProp, matchPropsOn)
-        }
+    return layer &&
+      address !== layer &&
+      Object.keys(pageResponse.props.errors ?? {}).length > 0 &&
+      pageResponse.component === address.component &&
+      isSameUrlWithoutHash(hrefToUrl(pageResponse.url), hrefToUrl(addressOf(page)))
+      ? layer
+      : undefined
+  }
 
-        if (typeof source === 'object' && source !== null) {
-          // Merge objects by iterating over keys
-          return Object.keys(source).reduce(
-            (acc, key) => {
-              acc[key] = deepMerge(target ? target[key] : undefined, source[key], `${matchProp}.${key}`)
-              return acc
-            },
-            { ...target },
-          )
-        }
+  protected staysOnBaseComponent(pageResponse: Page): boolean {
+    return pageResponse.component === currentPage.get().component
+  }
 
-        // If the source is neither an array nor an object, simply return it
-        return source
-      }
+  protected mergeProps(pageResponse: Page): void {
+    if (!this.requestParams.isPartial() || !this.staysOnBaseComponent(pageResponse) || isLayerResponse(pageResponse)) {
+      return
+    }
 
-      // Apply the deep merge and update the page response
-      set(pageResponse.props, prop, deepMerge(currentProp, incomingProp, prop))
-    })
+    this.mergeIntoTier(pageResponse, currentPage.get())
+  }
 
-    const nestedTopKeys = new Set(
-      [...this.requestParams.all().only, ...this.requestParams.all().except]
-        .filter((prop) => prop.includes('.'))
-        .map((prop) => prop.split('.')[0]),
-    )
-    for (const key of nestedTopKeys) {
-      const currentValue = currentPage.get().props[key]
+  protected mergeIntoTier(pageResponse: Page, tier: Layer): void {
+    mergePropsInto(pageResponse, tier.props, this.nestedProps())
 
-      if (this.isObject(currentValue) && this.isObject(pageResponse.props[key])) {
-        pageResponse.props[key] = this.deepMergeObjects(currentValue as PageProps, pageResponse.props[key] as PageProps)
-      }
+    if (this.shouldPreserveErrors(pageResponse, tier)) {
+      pageResponse.props.errors = tier.props.errors as Errors & ErrorBag
     }
 
-    pageResponse.props = { ...currentPage.get().props, ...pageResponse.props }
-
-    if (this.shouldPreserveErrors(pageResponse)) {
-      pageResponse.props.errors = currentPage.get().props.errors
+    if (tier.scrollProps) {
+      pageResponse.scrollProps = { ...tier.scrollProps, ...pageResponse.scrollProps }
     }
 
-    // Preserve the existing scrollProps
-    if (currentPage.get().scrollProps) {
-      pageResponse.scrollProps = {
-        ...(currentPage.get().scrollProps || {}),
-        ...(pageResponse.scrollProps || {}),
-      }
+    if (Object.keys(tier.onceProps ?? {}).length > 0) {
+      pageResponse.onceProps = { ...tier.onceProps, ...pageResponse.onceProps }
     }
 
-    // Preserve the existing onceProps
-    if (currentPage.hasOnceProps()) {
-      pageResponse.onceProps = {
-        ...(currentPage.get().onceProps || {}),
-        ...(pageResponse.onceProps || {}),
-      }
+    if (Object.keys(tier.initialDeferredProps ?? {}).length > 0) {
+      pageResponse.initialDeferredProps = tier.initialDeferredProps
     }
 
-    // Preserve flash data on deferred props requests (background fetches that replay
-    // the same flash from the initial load), but let regular partial reloads use
-    // whatever the server sent (which may be empty, clearing stale flash)
     if (this.requestParams.isDeferredPropsRequest()) {
-      pageResponse.flash = { ...currentPage.get().flash }
-    }
-
-    const currentOriginalDeferred = currentPage.get().initialDeferredProps
-    if (currentOriginalDeferred && Object.keys(currentOriginalDeferred).length > 0) {
-      pageResponse.initialDeferredProps = currentOriginalDeferred
+      pageResponse.flash = { ...tier.flash }
     }
 
-    pageResponse.rescuedProps = this.mergeRescuedProps(pageResponse)
+    pageResponse.rescuedProps = this.mergedRescued(pageResponse, tier.rescuedProps)
   }
 
-  protected mergeRescuedProps(pageResponse: Page): string[] {
-    const currentRescued = currentPage.get().rescuedProps ?? []
-    const incomingRescued = pageResponse.rescuedProps ?? []
+  protected nestedProps(): string[] {
+    return [...this.requestParams.all().only, ...this.requestParams.all().except]
+  }
 
-    const newRescued = new Set(
-      currentRescued.filter((prop) => !partialReloadRequestsProp(this.requestParams.all(), prop)),
-    )
+  protected mergedRescued(pageResponse: Page, current: string[] = []): string[] {
+    const rescued = new Set(current.filter((prop) => !partialReloadRequestsProp(this.requestParams.all(), prop)))
 
-    incomingRescued.forEach((prop) => newRescued.add(prop))
+    ;(pageResponse.rescuedProps ?? []).forEach((prop) => rescued.add(prop))
 
-    return Array.from(newRescued)
+    return Array.from(rescued)
   }
 
-  /**
-   * By default, the Laravel adapter shares validation errors via Inertia::always(),
-   * so responses always include errors, even when empty. Components like
-   * InfiniteScroll and WhenVisible, as well as loading deferred props,
-   * perform async requests that should practically never reset errors.
-   */
-  protected shouldPreserveErrors(pageResponse: Page): boolean {
+  protected shouldPreserveErrors(pageResponse: Page, tier: Layer): boolean {
     if (!this.requestParams.all().preserveErrors) {
       return false
     }
 
-    const currentErrors = currentPage.get().props.errors
+    const currentErrors = tier.props.errors as Errors | undefined
 
     if (!currentErrors || Object.keys(currentErrors).length === 0) {
       return false
@@ -500,117 +967,6 @@ export class Response {
     return true
   }
 
-  protected isObject(item: any): boolean {
-    return item && typeof item === 'object' && !Array.isArray(item)
-  }
-
-  protected deepMergeObjects(target: PageProps, source: PageProps): PageProps {
-    const result = { ...target }
-
-    for (const key of Object.keys(source)) {
-      const targetValue = target[key]
-      const sourceValue = source[key]
-
-      if (this.isObject(targetValue) && this.isObject(sourceValue)) {
-        result[key] = this.deepMergeObjects(targetValue as PageProps, sourceValue as PageProps)
-      } else {
-        result[key] = sourceValue
-      }
-    }
-
-    return result
-  }
-
-  protected mergeOrMatchItems(
-    existingItems: any[],
-    newItems: any[],
-    matchProp: string,
-    matchPropsOn: string[],
-    shouldAppend = true,
-  ) {
-    const items = Array.isArray(existingItems) ? existingItems : []
-
-    // Find the matching key for this specific property path
-    const matchingKey = matchPropsOn.find((key) => {
-      const keyPath = key.split('.').slice(0, -1).join('.')
-
-      return keyPath === matchProp
-    })
-
-    // If no matching key is configured, simply concatenate the arrays
-    if (!matchingKey) {
-      return shouldAppend ? [...items, ...newItems] : [...newItems, ...items]
-    }
-
-    // Extract the property name we'll use to match items (e.g., 'id' from 'users.data.id')
-    const uniqueProperty = matchingKey.split('.').pop() || ''
-
-    // Create a map of new items by their unique property lookups
-    const newItemsMap = new Map()
-
-    newItems.forEach((item) => {
-      if (this.hasUniqueProperty(item, uniqueProperty)) {
-        newItemsMap.set(item[uniqueProperty], item)
-      }
-    })
-
-    return shouldAppend
-      ? this.appendWithMatching(items, newItems, newItemsMap, uniqueProperty)
-      : this.prependWithMatching(items, newItems, newItemsMap, uniqueProperty)
-  }
-
-  protected appendWithMatching(
-    existingItems: any[],
-    newItems: any[],
-    newItemsMap: Map<any, any>,
-    uniqueProperty: string,
-  ): any[] {
-    // Update existing items with new values, keep non-matching items
-    const updatedExisting = existingItems.map((item) => {
-      if (this.hasUniqueProperty(item, uniqueProperty) && newItemsMap.has(item[uniqueProperty])) {
-        return newItemsMap.get(item[uniqueProperty])
-      }
-
-      return item
-    })
-
-    // Filter new items to only include those not already in existing items
-    const newItemsToAdd = newItems.filter((item) => {
-      if (!this.hasUniqueProperty(item, uniqueProperty)) {
-        return true // Always add items without unique property
-      }
-
-      return !existingItems.some(
-        (existing) =>
-          this.hasUniqueProperty(existing, uniqueProperty) && existing[uniqueProperty] === item[uniqueProperty],
-      )
-    })
-
-    return [...updatedExisting, ...newItemsToAdd]
-  }
-
-  protected prependWithMatching(
-    existingItems: any[],
-    newItems: any[],
-    newItemsMap: Map<any, any>,
-    uniqueProperty: string,
-  ): any[] {
-    // Filter existing items, keeping only those not being updated
-    const untouchedExisting = existingItems.filter((item) => {
-      if (this.hasUniqueProperty(item, uniqueProperty)) {
-        return !newItemsMap.has(item[uniqueProperty])
-      }
-
-      return true
-    })
-
-    return [...newItems, ...untouchedExisting]
-  }
-
-  protected hasUniqueProperty(item: any, property: string): boolean {
-    return item && typeof item === 'object' && property in item
-  }
-
   protected async setRememberedState(pageResponse: Page): Promise<void> {
     const rememberedState = await history.getState<Page['rememberedState']>(history.rememberedState, {})
 
diff --git a/packages/core/src/router.ts b/packages/core/src/router.ts
index ecfc7e523..91c2280e6 100644
--- a/packages/core/src/router.ts
+++ b/packages/core/src/router.ts
@@ -1,11 +1,30 @@
 import { cloneDeep, isEqual } from 'es-toolkit'
 import { get, set } from 'es-toolkit/compat'
-import { progress } from '.'
+import { progress, router } from '.'
 import { config } from './config'
 import { eventHandler } from './eventHandler'
 import { fireBeforeEvent, fireClientVisitEvent, fireFlashEvent } from './events'
 import { history } from './history'
 import { InitialVisit } from './initialVisit'
+import {
+  LayerHandle,
+  closeUnlandedLayer,
+  composeLayer,
+  composeLocalLayer,
+  createLayerHandle,
+  isLocalLayer,
+  layerAt,
+  layerClosing,
+  layerHandleFor,
+  layerPageOf,
+  layersOf,
+  nextLayerId,
+  nextRenderKey,
+  registryHas,
+  registryWrite,
+  tierOf,
+  withTier,
+} from './layers'
 import { setPathPreservingIdentity, stripTopLevelUndefined } from './objectUtils'
 import { page as currentPage } from './page'
 import { polls } from './polls'
@@ -17,13 +36,19 @@ import { RequestStream } from './requestStream'
 import { Scroll } from './scroll'
 import {
   ActiveVisit,
+  BaseSnapshot,
   ClientSideVisitOptions,
   Component,
+  ErrorBag,
+  Errors,
   FlashData,
   GlobalEvent,
   GlobalEventNames,
   GlobalEventResult,
   InFlightPrefetch,
+  Layer,
+  LayerState,
+  LocalLayer,
   Method,
   OptimisticCallback,
   Page,
@@ -53,30 +78,39 @@ import {
 
 const noop = () => {}
 
-export class Router {
-  protected syncRequestStream = new RequestStream({
-    maxConcurrent: 1,
-    interruptible: true,
-  })
+const syncRequests = new RequestStream({
+  maxConcurrent: 1,
+  interruptible: true,
+})
 
-  protected asyncRequestStream = new RequestStream({
-    maxConcurrent: Infinity,
-    interruptible: false,
-  })
+const asyncRequests = new RequestStream({
+  maxConcurrent: Infinity,
+  interruptible: false,
+})
 
-  protected clientVisitQueue = new Queue<Promise<void>>()
+const clientVisits = new Queue<Promise<void>>()
+
+export class Router {
+  protected syncRequestStream = syncRequests
+  protected asyncRequestStream = asyncRequests
+  protected clientVisitQueue = clientVisits
 
   protected pendingOptimisticCallback: OptimisticCallback | undefined = undefined
 
+  // Bound to a layer, every request this router makes lands on it. The app's own is bound to none.
+  constructor(protected layerId?: string) {}
+
   public init<ComponentType = Component>({
     initialPage,
     resolveComponent,
+    resolveLoading,
     swapComponent,
     onFlash,
   }: RouterInitParams<ComponentType>): void {
     currentPage.init({
       initialPage,
       resolveComponent,
+      resolveLoading,
       swapComponent,
       onFlash,
     })
@@ -91,8 +125,8 @@ export class Router {
       }
     })
 
-    eventHandler.on('loadDeferredProps', (deferredProps: Page['deferredProps']) => {
-      this.loadDeferredProps(deferredProps)
+    eventHandler.on('loadDeferredProps', (payload: { deferredProps: Page['deferredProps']; layerId?: string }) => {
+      this.loadDeferredProps(payload.deferredProps, payload.layerId)
     })
 
     eventHandler.on('historyQuotaExceeded', (url) => {
@@ -159,8 +193,16 @@ export class Router {
       return
     }
 
-    return this.visit(window.location.href, {
-      ...options,
+    const page = currentPage.get()
+    const { layerId = this.layerId, ...reloadOptions } = options
+    const layer = layerAt(page, layerId)
+
+    const url = layer?.url ?? ((page.layers?.length ?? 0) > 0 ? page.url : window.location.href)
+
+    const visitOptions: VisitOptions<T> & { reload: true } = {
+      ...reloadOptions,
+      ...(layer?.url ? { layerId } : {}),
+      reload: true,
       preserveScroll: true,
       preserveState: true,
       async: true,
@@ -168,37 +210,88 @@ export class Router {
         ...(options.headers || {}),
         'Cache-Control': 'no-cache',
       },
+    }
+
+    this.dispatchVisit(url, visitOptions)
+  }
+
+  public layer<T extends RequestPayload = RequestPayload>(
+    url: string | URL | UrlMethodPair,
+    options?: VisitOptions<T>,
+  ): LayerHandle
+  public layer(local: LocalLayer): LayerHandle
+  public layer<T extends RequestPayload = RequestPayload>(
+    target: string | URL | UrlMethodPair | LocalLayer,
+    options: VisitOptions<T> = {},
+  ): LayerHandle {
+    if (isLocalLayer(target)) {
+      return this.openLayer((id, owner) =>
+        this.clientVisitQueue.add(() => this.performLocalOpen(id, owner, target.component, target.props ?? {})),
+      )
+    }
+
+    return this.openLayer((id, owner) => this.visit(target, { ...options, layerId: id, layerOwner: owner }))
+  }
+
+  protected openLayer(open: (id: string, owner: string) => void): LayerHandle {
+    const id = nextLayerId(currentPage.get())
+    const handle = this.createLayerHandleWithOwner(id)
+
+    registryWrite(id, handle)
+
+    open(id, this.layerId ?? layersOf(currentPage.get()).at(-1)?.id ?? currentPage.id())
+
+    if (!registryHas(id)) {
+      // Refused before the caller had the handle to subscribe on, so its onClose is owed a turn.
+      queueMicrotask(() => handle.fireOnClose())
+    }
+
+    return handle
+  }
+
+  public layerHandle(id?: string): LayerHandle {
+    return layerHandleFor(id ?? currentPage.id(), (handleId) => this.createLayerHandleWithOwner(handleId))
+  }
+
+  protected createLayerHandleWithOwner(id: string): LayerHandle {
+    return createLayerHandle(
+      id,
+      (handleId) => this.closeLayer(handleId),
+      (layerId) => layerAt(currentPage.get(), layerId)?.owner,
+    )
+  }
+
+  protected async performLocalOpen(id: string, owner: string, component: string, props: PageProps): Promise<void> {
+    await layerClosing.unwindSettled()
+
+    await currentPage.set(composeLocalLayer(currentPage.get(), component, props, id, owner), {
+      preserveScroll: true,
+      preserveState: true,
+      preservesBase: true,
+      viewTransition: false,
     })
   }
 
-  public remember(data: unknown, key = 'default'): void {
-    history.remember(data, key)
+  public remember(data: unknown, key = 'default', layerId?: string): void {
+    history.remember(data, key, layerId)
   }
 
-  public restore<T = unknown>(key = 'default'): T | undefined {
-    return history.restore(key) as T | undefined
+  public restore<T = unknown>(key = 'default', layerId?: string): T | undefined {
+    return history.restore(key, layerId) as T | undefined
   }
 
   public on<TEventName extends GlobalEventNames>(
     type: TEventName,
     callback: (event: GlobalEvent<TEventName>) => GlobalEventResult<TEventName>,
   ): VoidFunction {
-    if (typeof window === 'undefined') {
-      return () => {}
-    }
-
-    return eventHandler.onGlobalEvent(type, callback)
+    return this.onGlobal(type, callback)
   }
 
   public once<TEventName extends GlobalEventNames>(
     type: TEventName,
     callback: (event: GlobalEvent<TEventName>) => GlobalEventResult<TEventName>,
   ): VoidFunction {
-    if (typeof window === 'undefined') {
-      return () => {}
-    }
-
-    const remove = this.on(type, (event) => {
+    const remove = this.onGlobal(type, (event) => {
       remove()
       return callback(event)
     })
@@ -206,6 +299,19 @@ export class Router {
     return remove
   }
 
+  // A `LayerApi` is this router with its own `on()` for the layer's events put on the instance, so
+  // the router's own callers come through here to reach Inertia's.
+  protected onGlobal<TEventName extends GlobalEventNames>(
+    type: TEventName,
+    callback: (event: GlobalEvent<TEventName>) => GlobalEventResult<TEventName>,
+  ): VoidFunction {
+    if (typeof window === 'undefined') {
+      return () => {}
+    }
+
+    return eventHandler.onGlobalEvent(type, callback)
+  }
+
   public hasPendingOptimistic(): boolean {
     return this.asyncRequestStream.hasPendingOptimistic()
   }
@@ -256,6 +362,14 @@ export class Router {
     href: string | URL | UrlMethodPair,
     options: VisitOptions<T> = {},
   ): void {
+    this.dispatchVisit(href, { ...options, layerId: options.layerId ?? this.layerId })
+  }
+
+  // `visit` with the tier already settled: a reload that dropped its layer keeps it dropped.
+  protected dispatchVisit<T extends RequestPayload = RequestPayload>(
+    href: string | URL | UrlMethodPair,
+    options: VisitOptions<T> = {},
+  ): boolean {
     options.optimistic = options.optimistic ?? this.pendingOptimisticCallback
     this.pendingOptimisticCallback = undefined
 
@@ -272,17 +386,24 @@ export class Router {
 
     // If either of these return false, we don't want to continue
     if (events.onBefore(visit) === false || !fireBeforeEvent(visit)) {
-      return
+      closeUnlandedLayer(currentPage.get(), visit.layerId)
+
+      return false
     }
 
+    const capturedBase = this.captureBase()
+
     const currentPageUrl = hrefToUrl(currentPage.get().url)
     const isPartialReload = visit.only.length > 0 || visit.except.length > 0 || visit.reset.length > 0
 
+    const targetedLayer = layerAt(currentPage.get(), visit.layerId)
+    const tierUrl = targetedLayer?.url ? hrefToUrl(targetedLayer.url) : currentPageUrl
+
     // For partial reloads, only compare the base URL (origin + pathname) to allow
     // concurrent requests with different query params to the same page
     const isSamePage = isPartialReload
-      ? isSameUrlWithoutQueryOrHash(visit.url, currentPageUrl)
-      : isSameUrlWithoutHash(visit.url, currentPageUrl)
+      ? isSameUrlWithoutQueryOrHash(visit.url, tierUrl)
+      : isSameUrlWithoutHash(visit.url, tierUrl)
 
     if (!isSamePage) {
       // Cancel in-flight requests aimed at the page we're navigating away from
@@ -292,7 +413,8 @@ export class Router {
         (request) =>
           !request.isPrefetch() &&
           !request.isOptimistic() &&
-          isSameUrlWithoutQueryOrHash(request.getUrl(), currentPageUrl),
+          (request.layerId ?? null) === (visit.layerId ?? null) &&
+          isSameUrlWithoutQueryOrHash(request.getUrl(), tierUrl),
       )
     }
 
@@ -303,7 +425,7 @@ export class Router {
     }
 
     if (options.optimistic) {
-      this.applyOptimisticUpdate(options.optimistic, events)
+      this.applyOptimisticUpdate(options.optimistic, events, visit.layerId)
     }
 
     if (!currentPage.isCleared() && !visit.preserveUrl) {
@@ -311,7 +433,7 @@ export class Router {
       Scroll.save()
     }
 
-    const requestParams: PendingVisit & VisitCallbacks = {
+    const requestParams: PendingVisit & VisitCallbacks & { fabricatedLayer?: boolean } = {
       ...visit,
       ...events,
     }
@@ -321,11 +443,13 @@ export class Router {
 
       if (prefetched) {
         progress.reveal(prefetched.inFlight)
-        prefetchedRequests.use(prefetched, requestParams)
+        prefetchedRequests.use(prefetched, requestParams, capturedBase)
       } else {
         progress.reveal(true)
         const requestStream = visit.async ? this.asyncRequestStream : this.syncRequestStream
-        requestStream.send(Request.create(requestParams, currentPage.get(), { optimistic: !!options.optimistic }))
+        requestStream.send(
+          Request.create(requestParams, currentPage.get(), capturedBase, { optimistic: !!options.optimistic }),
+        )
       }
     }
 
@@ -337,18 +461,21 @@ export class Router {
     }
 
     if (visit.component) {
-      history.processQueue().then(() => {
-        this.performInstantSwap(visit).then(() => {
+      Promise.all([history.processQueue(), layerClosing.unwindSettled()]).then(() => {
+        this.performInstantSwap(visit).then((fabricatedLayer) => {
           requestParams.preserveScroll = true
           requestParams.preserveState = true
           requestParams.replace = true
           requestParams.viewTransition = false
+          requestParams.fabricatedLayer = fabricatedLayer
           sendRequest()
         })
       })
     } else {
       sendRequest()
     }
+
+    return true
   }
 
   public getCached(
@@ -415,7 +542,7 @@ export class Router {
 
     this.asyncRequestStream.interruptInFlight()
 
-    const requestParams: PendingVisit & VisitCallbacks = {
+    const requestParams: PendingVisit & VisitCallbacks & { fabricatedLayer?: boolean } = {
       ...visit,
       ...events,
     }
@@ -438,7 +565,7 @@ export class Router {
       prefetchedRequests.add(
         requestParams,
         (params) => {
-          this.asyncRequestStream.send(Request.create(params, currentPage.get()))
+          this.asyncRequestStream.send(Request.create(params, currentPage.get(), this.captureBase()))
         },
         {
           cacheFor: config.get('prefetch.cacheFor'),
@@ -449,6 +576,43 @@ export class Router {
     })
   }
 
+  public close(id?: string): Promise<void> {
+    return this.closeLayer(id)
+  }
+
+  // A `LayerApi` puts its own no-argument `close()` on the instance, so the router's own callers
+  // come through here to close the layer they name rather than the one the api is bound to.
+  protected closeLayer(id?: string): Promise<void> {
+    return layerClosing.close(id, {
+      programmatic: true,
+      refresh: (address, layerId) => this.refreshBeneath(address, layerId),
+    })
+  }
+
+  public closed(id?: string): Promise<void> {
+    return layerClosing.closed(id)
+  }
+
+  protected refreshBeneath(address: string, layerId?: string): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const reload: VisitOptions & { reload: true } = {
+        reload: true,
+        layerId,
+        preserveState: true,
+        preserveScroll: true,
+        replace: true,
+        // A follow-up, not a navigation: sent sync it would interrupt the work that closed the layer.
+        async: true,
+        // Every terminal path resolves. Success alone strands the close behind a cancelled refresh.
+        onFinish: () => resolve(),
+      }
+
+      if (!this.dispatchVisit(address, reload)) {
+        resolve()
+      }
+    })
+  }
+
   public clearHistory(): void {
     history.clear()
   }
@@ -457,7 +621,7 @@ export class Router {
     return history.decrypt()
   }
 
-  public resolveComponent(component: string, page?: Page): Promise<Component> {
+  public resolveComponent(component: string, page?: Page): Promise<Component | undefined> {
     return currentPage.resolve(component, page)
   }
 
@@ -468,7 +632,7 @@ export class Router {
   public replaceProp<TProps = Page['props']>(
     name: string,
     value: unknown | ((oldValue: unknown, props: TProps) => unknown),
-    options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess'>,
+    options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess' | 'layerId'>,
   ): void {
     this.replace({
       preserveScroll: true,
@@ -485,7 +649,7 @@ export class Router {
   public appendToProp<TProps = Page['props']>(
     name: string,
     value: unknown | unknown[] | ((oldValue: unknown, props: TProps) => unknown | unknown[]),
-    options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess'>,
+    options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess' | 'layerId'>,
   ): void {
     this.replaceProp(
       name,
@@ -505,7 +669,7 @@ export class Router {
   public prependToProp<TProps = Page['props']>(
     name: string,
     value: unknown | unknown[] | ((oldValue: unknown, props: TProps) => unknown | unknown[]),
-    options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess'>,
+    options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess' | 'layerId'>,
   ): void {
     this.replaceProp(
       name,
@@ -529,8 +693,10 @@ export class Router {
   public flash<TFlash extends PageFlashData = PageFlashData>(
     keyOrData: string | ((flash: FlashData) => TFlash) | TFlash,
     value?: unknown,
+    { layerId = this.layerId }: { layerId?: string } = {},
   ): void {
-    const current = currentPage.get().flash
+    const page = currentPage.get()
+    const current = tierOf(page, layerId).flash
     let flash: PageFlashData
 
     if (typeof keyOrData === 'function') {
@@ -543,7 +709,7 @@ export class Router {
       return
     }
 
-    currentPage.setFlash(flash)
+    currentPage.setFlash(flash, layerAt(page, layerId)?.id)
 
     if (Object.keys(flash).length) {
       fireFlashEvent(flash)
@@ -554,43 +720,76 @@ export class Router {
     params: ClientSideVisitOptions<TProps>,
     { replace = false }: { replace?: boolean } = {},
   ): void {
-    this.clientVisitQueue.add(() => this.performClientVisit(params, { replace }))
+    const visit = { ...params, layerId: params.layerId ?? this.layerId }
+
+    this.clientVisitQueue.add(() => this.performClientVisit(visit, { replace }))
   }
 
-  protected performClientVisit<TProps = Page['props']>(
+  protected async performClientVisit<TProps = Page['props']>(
     params: ClientSideVisitOptions<TProps>,
     { replace = false }: { replace?: boolean } = {},
   ): Promise<void> {
+    await layerClosing.unwindSettled()
+
     const current = currentPage.get()
 
+    const targetedLayer = layerAt(current, params.layerId)
+    const tier = tierOf(current, params.layerId)
+
     const onceProps =
       typeof params.props === 'function'
         ? Object.fromEntries(
-            Object.values(current.onceProps ?? {}).map((onceProp) => [
-              onceProp.prop,
-              get(current.props, onceProp.prop),
-            ]),
+            Object.values(tier.onceProps ?? {}).map((onceProp) => [onceProp.prop, get(tier.props, onceProp.prop)]),
           )
         : {}
 
     const props =
       typeof params.props === 'function'
-        ? params.props(current.props as TProps, onceProps as Partial<TProps>)
-        : (params.props ?? current.props)
+        ? params.props(tier.props as TProps, onceProps as Partial<TProps>)
+        : (params.props ?? tier.props)
+
+    const flash = typeof params.flash === 'function' ? params.flash(tier.flash) : params.flash
+
+    const { viewTransition, onError, onFinish, onFlash, onSuccess, layerId: _layerId, ...pageParams } = params
+
+    let page: Page
+    let preservesBase: boolean
+
+    if (targetedLayer) {
+      // Resolved against the layer's own page, so `preserveState: 'errors'` reads the layer's bag.
+      const keepsState = RequestParams.resolvePreserveOption(
+        params.preserveState ?? false,
+        layerPageOf(current, targetedLayer),
+      )
 
-    const flash = typeof params.flash === 'function' ? params.flash(current.flash) : params.flash
+      page = withTier(current, targetedLayer.id, {
+        ...(pageParams.component !== undefined && { component: pageParams.component }),
+        ...(pageParams.url !== undefined && { url: pageParams.url }),
+        ...(pageParams.encryptHistory !== undefined && { encryptHistory: pageParams.encryptHistory }),
+        ...(keepsState ? {} : { renderKey: nextRenderKey() }),
+        flash: flash ?? {},
+        props: props as Page['props'],
+      })
+      preservesBase = true
+    } else {
+      preservesBase = replace && params.component === undefined
 
-    const { viewTransition, onError, onFinish, onFlash, onSuccess, ...pageParams } = params
+      const { layers, ...withoutStack } = current
 
-    const page = {
-      ...current,
-      ...pageParams,
-      flash: flash ?? {},
-      props: props as Page['props'],
+      page = {
+        ...(preservesBase ? current : withoutStack),
+        ...pageParams,
+        flash: flash ?? {},
+        props: props as Page['props'],
+      }
     }
 
-    const preserveScroll = RequestParams.resolvePreserveOption(params.preserveScroll ?? false, page)
-    const preserveState = RequestParams.resolvePreserveOption(params.preserveState ?? false, page)
+    const tierPage = targetedLayer ? layerPageOf(current, targetedLayer) : page
+
+    // A write that lands on a layer leaves the page beneath it standing, so its scroll stands too.
+    const preserveScroll =
+      !!targetedLayer || RequestParams.resolvePreserveOption(params.preserveScroll ?? false, tierPage)
+    const preserveState = RequestParams.resolvePreserveOption(params.preserveState ?? false, tierPage)
 
     const visitId = this.createVisitId()
 
@@ -599,20 +798,24 @@ export class Router {
         replace,
         preserveScroll,
         preserveState,
+        preservesBase,
         viewTransition,
         visitId,
       })
       .then(() => {
         fireClientVisitEvent(currentPage.get(), { replace, visitId })
 
-        const currentFlash = currentPage.get().flash
+        const current = currentPage.get()
+        const announcedLayer = layerAt(current, params.layerId)
+        const currentFlash = announcedLayer ? (announcedLayer.flash ?? {}) : current.flash
 
         if (Object.keys(currentFlash).length > 0) {
           fireFlashEvent(currentFlash)
           onFlash?.(currentFlash)
         }
 
-        const errors = currentPage.get().props.errors || {}
+        const errors = ((announcedLayer ? announcedLayer.props.errors || {} : current.props.errors) || {}) as Errors &
+          ErrorBag
 
         if (Object.keys(errors).length === 0) {
           onSuccess?.(currentPage.get())
@@ -626,30 +829,43 @@ export class Router {
       .finally(() => onFinish?.(params))
   }
 
-  protected performInstantSwap(visit: PendingVisit): Promise<void> {
+  protected captureBase(): BaseSnapshot {
+    return { page: currentPage.get(), generation: currentPage.generation() }
+  }
+
+  protected performInstantSwap(visit: PendingVisit): Promise<boolean> {
     const current = currentPage.get()
+    const targetedLayer = layerAt(current, visit.layerId)
+    const tier = targetedLayer ?? current
 
     const sharedProps = Object.fromEntries(
-      (current.sharedProps ?? []).filter((key) => key in current.props).map((key) => [key, current.props[key]]),
+      (current.sharedProps ?? []).filter((key) => key in tier.props).map((key) => [key, tier.props[key]]),
     )
 
     const resolvedPageProps =
       typeof visit.pageProps === 'function'
-        ? visit.pageProps(cloneDeep(current.props), cloneDeep(sharedProps))
+        ? visit.pageProps(cloneDeep(tier.props), cloneDeep(sharedProps))
         : visit.pageProps
 
     const intermediateProps = resolvedPageProps !== null ? { ...resolvedPageProps } : { ...sharedProps }
+    const props = { ...intermediateProps, errors: {} }
+    const url = visit.url.pathname + visit.url.search + visit.url.hash
+
+    if (targetedLayer) {
+      return this.swapLayerInstantly(current, targetedLayer, visit, props, url).then(() => true)
+    }
 
-    const onceProps = this.preserveOncePropsOnInstantVisit(current, intermediateProps)
+    if (visit.layerOwner !== undefined) {
+      return this.openLayerInstantly(current, visit, props, url).then(() => true)
+    }
+
+    const onceProps = this.preserveOncePropsOnInstantVisit(current, props)
 
     const intermediatePage: Page = {
       component: visit.component!,
-      url: visit.url.pathname + visit.url.search + visit.url.hash,
+      url,
       version: current.version,
-      props: {
-        ...intermediateProps,
-        errors: {},
-      },
+      props,
       flash: {},
       rescuedProps: [],
       clearHistory: false,
@@ -659,10 +875,67 @@ export class Router {
       rememberedState: {},
     }
 
-    return currentPage.set(intermediatePage, {
+    return currentPage
+      .set(intermediatePage, {
+        replace: visit.replace,
+        preserveScroll: RequestParams.resolvePreserveOption(visit.preserveScroll, intermediatePage),
+        preserveState: false,
+        viewTransition: visit.viewTransition,
+        visitId: visit.id,
+      })
+      .then(() => false)
+  }
+
+  // The same fabrication aimed at one layer, so a link inside a layer renders instantly there
+  // instead of tearing the stack down to put the placeholder on the page.
+  protected swapLayerInstantly(
+    current: Page,
+    layer: LayerState,
+    visit: PendingVisit,
+    props: Page['props'],
+    url: string,
+  ): Promise<void> {
+    const page = withTier(current, layer.id, {
+      component: visit.component!,
+      url,
+      renderKey: nextRenderKey(),
+      props,
+      flash: {},
+      rescuedProps: [],
+      deferredProps: {},
+      initialDeferredProps: undefined,
+      onceProps: this.preserveOncePropsOnInstantVisit(layer, props),
+      scrollProps: {},
+    })
+
+    return currentPage.set(page, {
       replace: visit.replace,
-      preserveScroll: RequestParams.resolvePreserveOption(visit.preserveScroll, intermediatePage),
-      preserveState: false,
+      // The page beneath is staying, so its scroll is not the fabrication's to reset.
+      preserveScroll: true,
+      // The base beneath keeps its component and its id, so what lands next still composes onto it.
+      preserveState: true,
+      preservesBase: true,
+      viewTransition: visit.viewTransition,
+      visitId: visit.id,
+    })
+  }
+
+  // A visit that is opening a layer puts its placeholder up as a layer, leaving the page it opens
+  // on where it is. Keyed by the id the open minted, which the response then claims it under.
+  protected openLayerInstantly(current: Page, visit: PendingVisit, props: Page['props'], url: string): Promise<void> {
+    const placeholder = {
+      component: visit.component!,
+      props,
+      url,
+      layer: { key: visit.layerId },
+      version: current.version,
+    } as unknown as Page
+
+    return currentPage.set(composeLayer(current, placeholder, visit.layerId!, { owner: visit.layerOwner! }), {
+      replace: visit.replace,
+      preserveScroll: true,
+      preserveState: true,
+      preservesBase: true,
       viewTransition: visit.viewTransition,
       visitId: visit.id,
     })
@@ -673,7 +946,7 @@ export class Router {
    * and registry. Otherwise the swap discards the value, and an in-flight prefetch that already
    * claimed the prop resolves with nothing to restore it from.
    */
-  protected preserveOncePropsOnInstantVisit(current: Page, props: PageProps): Page['onceProps'] {
+  protected preserveOncePropsOnInstantVisit(current: Layer, props: PageProps): Page['onceProps'] {
     const onceProps: NonNullable<Page['onceProps']> = {}
 
     Object.entries(current.onceProps ?? {}).forEach(([key, onceProp]) => {
@@ -798,8 +1071,15 @@ export class Router {
     }
   }
 
-  protected applyOptimisticUpdate(optimistic: OptimisticCallback, events: VisitCallbacks): void {
-    const currentProps = currentPage.get().props
+  protected applyOptimisticUpdate(optimistic: OptimisticCallback, events: VisitCallbacks, layerId?: string): void {
+    const layer = layerAt(currentPage.get(), layerId)
+
+    if (layerId && !layer) {
+      return
+    }
+
+    const tierPage = layer ? layerPageOf(currentPage.get(), layer) : currentPage.get()
+    const currentProps = tierPage.props
     const optimisticProps = optimistic(cloneDeep(currentProps))
 
     if (!optimisticProps) {
@@ -819,14 +1099,15 @@ export class Router {
     }
 
     const id = currentPage.nextOptimisticId()
-    const component = currentPage.get().component
+    const component = tierPage.component
 
     for (const key of changedKeys) {
-      currentPage.setBaseline(key, cloneDeep(currentProps[key]))
+      currentPage.setBaseline(key, cloneDeep(currentProps[key]), layerId)
     }
 
-    currentPage.registerOptimistic(id, optimistic)
-    currentPage.setPropsQuietly({ ...currentProps, ...optimisticProps })
+    currentPage.registerOptimistic(id, layerId, optimistic)
+
+    currentPage.setPropsQuietly({ ...currentProps, ...optimisticProps }, layerId)
 
     let shouldRestore = true
 
@@ -840,11 +1121,13 @@ export class Router {
     events.onFinish = (visit) => {
       currentPage.unregisterOptimistic(id)
 
-      if (shouldRestore && currentPage.get().component === component) {
-        const replayedProps = currentPage.replayOptimistics()
+      const tier = layerId ? layerAt(currentPage.get(), layerId) : currentPage.get()
+
+      if (shouldRestore && tier?.component === component) {
+        const replayedProps = currentPage.replayOptimistics(layerId)
 
         if (Object.keys(replayedProps).length > 0) {
-          currentPage.setPropsQuietly({ ...currentPage.get().props, ...replayedProps })
+          currentPage.setPropsQuietly({ ...tier.props, ...replayedProps } as Page['props'], layerId)
         }
       }
 
@@ -856,11 +1139,56 @@ export class Router {
     }
   }
 
-  protected loadDeferredProps(deferred: Page['deferredProps']): void {
+  protected loadDeferredProps(deferred: Page['deferredProps'], layerId?: string): void {
     if (deferred) {
       Object.values(deferred).forEach((props) => {
-        this.doReload({ only: props, deferredProps: true, preserveErrors: true })
+        this.doReload({
+          only: props,
+          deferredProps: true,
+          preserveErrors: true,
+          ...(layerId && { layerId }),
+        })
       })
     }
   }
 }
+
+// A layer from the inside: the router bound to it, plus the layer's own handle. `layer.post()` is
+// `router.post()` aimed at the layer, and `layer.layer()` opens a child this layer owns.
+export interface LayerApi extends Pick<
+  Router,
+  | 'visit'
+  | 'get'
+  | 'post'
+  | 'put'
+  | 'patch'
+  | 'delete'
+  | 'reload'
+  | 'poll'
+  | 'layer'
+  | 'push'
+  | 'replace'
+  | 'replaceProp'
+  | 'appendToProp'
+  | 'prependToProp'
+  | 'flash'
+> {
+  id: string | undefined
+  close(): Promise<void>
+  onClose(callback: () => void): () => void
+  emit(name: string, payload?: unknown): void
+  on(name: string, callback: (payload?: unknown, childId?: string) => void): () => void
+  once(name: string, callback: (payload?: unknown, childId?: string) => void): () => void
+}
+
+export const createLayerApi = (id: string | undefined): LayerApi =>
+  Object.assign(new Router(id), {
+    id,
+    close: () => (id === undefined ? Promise.resolve() : router.layerHandle(id).close()),
+    onClose: (callback: () => void) => router.layerHandle(id).onClose(callback),
+    emit: (name: string, payload?: unknown) => router.layerHandle(id).emit(name, payload),
+    on: (name: string, callback: (payload?: unknown, childId?: string) => void) =>
+      router.layerHandle(id).on(name, callback),
+    once: (name: string, callback: (payload?: unknown, childId?: string) => void) =>
+      router.layerHandle(id).once(name, callback),
+  })
diff --git a/packages/core/src/scroll.ts b/packages/core/src/scroll.ts
index f0551dbdd..1ac0f7009 100644
--- a/packages/core/src/scroll.ts
+++ b/packages/core/src/scroll.ts
@@ -7,7 +7,7 @@ const isFirefox = !isServer && /Firefox/i.test(window.navigator.userAgent)
 
 export class Scroll {
   public static save(): void {
-    history.saveScrollPositions(this.getScrollRegions())
+    history.saveScrollPositions(this.getScrollRegions(), this.getScrollRegionLayers())
   }
 
   public static getScrollRegions(): ScrollRegion[] {
@@ -17,6 +17,16 @@ export class Scroll {
     }))
   }
 
+  public static getScrollRegionLayers(): (string | null)[] | undefined {
+    const tiers = Array.from(this.regions()).map((region) => this.tierOf(region))
+
+    return tiers.some((tier) => tier !== null) ? tiers : undefined
+  }
+
+  protected static tierOf(region: Element): string | null {
+    return region.closest('[data-layer-id]')?.getAttribute('data-layer-id') ?? null
+  }
+
   protected static regions(): NodeListOf<Element> {
     return document.querySelectorAll('[scroll-region]')
   }
@@ -71,17 +81,25 @@ export class Scroll {
 
     window.requestAnimationFrame(() => {
       this.restoreDocument()
-      this.restoreScrollRegions(scrollRegions)
+      this.restoreScrollRegions(scrollRegions, history.getScrollRegionLayers())
     })
   }
 
-  public static restoreScrollRegions(scrollRegions: ScrollRegion[]): void {
+  public static restoreScrollRegions(scrollRegions: ScrollRegion[], scrollRegionLayers?: (string | null)[]): void {
     if (isServer) {
       return
     }
 
+    // A region takes the next saved position of its own tier. An entry written before layers
+    // existed carries no tiers, and lines up by index as it always did.
+    const savedByTier = new Map<string | null, ScrollRegion[]>()
+
+    scrollRegionLayers?.forEach((tier, index) => {
+      savedByTier.set(tier, [...(savedByTier.get(tier) ?? []), scrollRegions[index]])
+    })
+
     this.regions().forEach((region: Element, index: number) => {
-      const scrollPosition = scrollRegions[index]
+      const scrollPosition = scrollRegionLayers ? savedByTier.get(this.tierOf(region))?.shift() : scrollRegions[index]
 
       if (!scrollPosition) {
         return
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 4a0954625..451323814 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -223,8 +223,58 @@ export type ScrollProp = {
   reset: boolean
 }
 
-export interface Page<SharedProps extends PageProps = PageProps> {
+/** What every tier of the screen holds. A page is a layer; a layer is not a page. */
+export interface Layer {
   component: string
+  props: PageProps
+  /** Null for a layer with no url of its own; the address then falls through to the layer beneath it. */
+  url: string | null
+  encryptHistory?: boolean
+  deferredProps?: Record<string, NonNullable<VisitOptions['only']>>
+  initialDeferredProps?: Record<string, NonNullable<VisitOptions['only']>>
+  rescuedProps: string[]
+  flash: FlashData
+  onceProps?: Record<string, { prop: keyof PageProps; expiresAt?: number | null }>
+  scrollProps?: Record<keyof PageProps, ScrollProp>
+}
+
+export interface LayerState extends Layer {
+  id: string
+  key: string
+  /** Changes when a write lands on the layer without preserving state, so its component remounts. */
+  renderKey: number
+  base: string | null
+  encryptHistory: boolean
+  /** Opened over a base the user was never on, which is what says where closing it returns to. */
+  standalone: boolean
+  /** The entries pushed while this layer owned the address, which closing it steps back over. */
+  entries: number
+  owner: string | null
+  deferredProps: Record<string, NonNullable<VisitOptions['only']>>
+  /** @internal */
+  local?: boolean
+  /** @internal */
+  preservesUrl?: boolean
+}
+
+export interface LayerShellProps {
+  open: boolean
+  index: number
+  isTop: boolean
+  type: 'routed' | 'local'
+  close: () => void
+  done: () => void
+  /** The dialog's accessible name. Nothing here sets it: only the app's own shell knows the name. */
+  label?: string
+}
+
+export type ResolvedLayer<ComponentType = Component> = Omit<LayerState, 'component'> & {
+  component: ComponentType
+  page: Page
+  isClosing: boolean
+}
+
+export interface Page<SharedProps extends PageProps = PageProps> extends Layer {
   props: PageProps &
     SharedProps & {
       errors: Errors & ErrorBag
@@ -234,24 +284,18 @@ export interface Page<SharedProps extends PageProps = PageProps> {
   version: string | null
   clearHistory?: boolean
   preserveFragment?: boolean
-  encryptHistory?: boolean
-  deferredProps?: Record<string, NonNullable<VisitOptions['only']>>
-  initialDeferredProps?: Record<string, NonNullable<VisitOptions['only']>>
-  rescuedProps: string[]
+  interstitial?: boolean
   mergeProps?: string[]
   prependProps?: string[]
   deepMergeProps?: string[]
   matchPropsOn?: string[]
   sharedProps?: string[]
-  scrollProps?: Record<keyof PageProps, ScrollProp>
-  flash: FlashData
-  onceProps?: Record<
-    string,
-    {
-      prop: keyof PageProps
-      expiresAt?: number | null
-    }
-  >
+  layers?: LayerState[]
+  layer?: {
+    key?: string
+    base?: string
+  }
+  close?: boolean
 
   /** @internal */
   rememberedState: Record<string, unknown>
@@ -259,6 +303,22 @@ export interface Page<SharedProps extends PageProps = PageProps> {
   optimisticUpdatedAt?: Record<string, number>
 }
 
+/**
+ * A layer opened from the client rather than fetched. It has no url of its own, but is still a
+ * history step: back closes it and forward brings it back.
+ */
+export interface LocalLayer {
+  component: string
+  props?: PageProps
+}
+
+// An instant visit fabricates a page before its request goes out, so the base a visit was
+// dispatched from is captured up front rather than read back at send time.
+export interface BaseSnapshot {
+  page: Page
+  generation: number
+}
+
 export type ScrollRegion = {
   top: number
   left: number
@@ -275,6 +335,8 @@ export interface ClientSideVisitOptions<TProps = Page['props']> {
   preserveState?: VisitOptions['preserveState']
   errorBag?: string | null
   viewTransition?: VisitOptions['viewTransition']
+  /** @internal */
+  layerId?: string
   onError?: (errors: Errors) => void
   onFinish?: (visit: ClientSideVisitOptions<TProps>) => void
   onFlash?: (flash: FlashData) => void
@@ -283,14 +345,30 @@ export interface ClientSideVisitOptions<TProps = Page['props']> {
 
 export type PageResolver = (name: string, page?: Page<SharedPageProps>) => Component
 
+/** Resolves the placeholder rendered while a cold-opened layer's base is still being fetched. */
+export type LoadingResolver = (url: string, page: Page) => Component | Promise<Component | undefined> | undefined
+
+export type LoadingOption<ComponentType = Component> =
+  | ComponentType
+  | ((
+      url: string,
+      page: Page,
+    ) =>
+      | ComponentType
+      | { default: ComponentType }
+      | Promise<ComponentType | { default: ComponentType } | undefined>
+      | undefined)
+
 export type PageHandler<ComponentType = Component> = ({
   component,
   page,
+  layers,
   preserveState,
   initialRender,
 }: {
-  component: ComponentType
+  component?: ComponentType
   page: Page
+  layers?: ResolvedLayer<ComponentType>[]
   preserveState: boolean
   initialRender: boolean
 }) => Promise<unknown>
@@ -341,6 +419,10 @@ export type Visit<T extends RequestPayload = RequestPayload> = {
     | ((currentProps: PageProps, sharedProps: Partial<PageProps>) => Record<string, unknown>)
     | null
   cached: boolean
+  /** @internal */
+  layerId?: string
+  /** @internal */
+  layerOwner?: string
 }
 
 export type GlobalEventsMap<T extends RequestPayload = RequestPayload> = {
@@ -388,6 +470,7 @@ export type GlobalEventsMap<T extends RequestPayload = RequestPayload> = {
     parameters: [Page<SharedPageProps>, { cached?: boolean; visitId?: string }?]
     details: {
       page: Page<SharedPageProps>
+      url: string
       cached?: boolean
       visitId?: string
     }
@@ -406,6 +489,7 @@ export type GlobalEventsMap<T extends RequestPayload = RequestPayload> = {
     parameters: [Page<SharedPageProps>, { visitId?: string }?]
     details: {
       page: Page<SharedPageProps>
+      url: string
       visitId?: string
     }
     result: void
@@ -498,7 +582,7 @@ export type GlobalEventCallback<TEventName extends GlobalEventNames<T>, T extend
   ...params: GlobalEventParameters<TEventName, T>
 ) => GlobalEventResult<TEventName, T>
 
-export type InternalEvent = 'missingHistoryItem' | 'loadDeferredProps' | 'historyQuotaExceeded'
+export type InternalEvent = 'missingHistoryItem' | 'loadDeferredProps' | 'historyQuotaExceeded' | 'historyEntryDropped'
 
 export type VisitCallbacks<T extends RequestPayload = RequestPayload> = {
   onCancelToken: CancelTokenCallback
@@ -535,6 +619,7 @@ export type VisitHelperOptions<T extends RequestPayload = RequestPayload> = Omit
 export type RouterInitParams<ComponentType = Component> = {
   initialPage: Page
   resolveComponent: PageResolver
+  resolveLoading?: LoadingResolver
   swapComponent: PageHandler<ComponentType>
   onFlash?: (flash: Page['flash']) => void
 }
@@ -551,14 +636,22 @@ export type PendingVisitOptions = {
 export type PendingVisit<T extends RequestPayload = RequestPayload> = Visit<T> & PendingVisitOptions
 
 export type ActiveVisit<T extends RequestPayload = RequestPayload> = PendingVisit<T> &
-  Required<Omit<VisitOptions<T>, 'optimistic'>>
+  Required<Omit<VisitOptions<T>, 'optimistic' | 'layerId' | 'layerOwner'>> & {
+    /** @internal */
+    layerId?: string
+    /** @internal */
+    layerOwner?: string
+  }
 
 export type InternalActiveVisit = ActiveVisit & {
   onPrefetchResponse?: (response: Response) => void
   onPrefetchError?: (error: Error) => void
   deferredProps?: boolean
   poll?: boolean
+  reload?: boolean
   cached?: boolean
+  walk?: boolean
+  fabricatedLayer?: boolean
 }
 
 export type VisitId = string
@@ -654,7 +747,7 @@ export type HeadManagerOnUpdateCallback = (elements: string[]) => void
 export type HeadManager = {
   forceUpdate: () => void
   updateServerHead: (elements?: string[]) => void
-  createProvider: () => {
+  createProvider: (layerId?: string) => {
     reconnect: () => void
     update: HeadManagerOnUpdateCallback
     disconnect: () => void
@@ -873,6 +966,8 @@ export type FormComponentSlotProps<TForm extends object = Record<string, any>> =
 export type FormComponentRef<TForm extends object = Record<string, any>> = FormComponentSlotProps<TForm>
 
 export interface UseInfiniteScrollOptions {
+  /** @internal */
+  layerId?: string
   // Core data
   getPropName: () => string
   inReverseMode: () => boolean
diff --git a/packages/core/src/url.ts b/packages/core/src/url.ts
index 5a80c6c04..7ee8fdb77 100644
--- a/packages/core/src/url.ts
+++ b/packages/core/src/url.ts
@@ -11,8 +11,11 @@ import type {
   VisitOptions,
 } from './types'
 
+// A relative href needs an origin to resolve against, and a server has no location to read one from.
+const ssrOrigin = 'http://ssr.inertia'
+
 export function hrefToUrl(href: string | URL): URL {
-  return new URL(href.toString(), typeof window === 'undefined' ? undefined : window.location.toString())
+  return new URL(href.toString(), typeof window === 'undefined' ? ssrOrigin : window.location.toString())
 }
 
 export const transformUrlAndData = (
diff --git a/packages/core/tests/head.test.ts b/packages/core/tests/head.test.ts
index acd9703c0..ebcb40149 100644
--- a/packages/core/tests/head.test.ts
+++ b/packages/core/tests/head.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import createHeadManager, { resolveServerHead } from '../src/head'
-import { Page } from '../src/types'
+import { LayerState, Page } from '../src/types'
 
 const page = (props: Page['props'] = {}): Page => ({
   component: 'Users/Index',
@@ -15,6 +15,33 @@ const page = (props: Page['props'] = {}): Page => ({
   rememberedState: {},
 })
 
+const layer = (overrides: Partial<LayerState> = {}): LayerState => ({
+  id: 'layer-1',
+  key: 'Users/Edit',
+  component: 'Users/Edit',
+  props: {},
+  url: '/users/5/edit',
+  base: '/users',
+  encryptHistory: false,
+  standalone: true,
+  entries: 0,
+  owner: null,
+  ...overrides,
+})
+
+const coldComposite = (headProps: Page['props'] = {}): Page =>
+  ({
+    ...page({ errors: {} }),
+    component: '',
+    layers: [layer({ component: 'SSR/Layer', props: { ...headProps } })],
+  }) as Page
+
+const warmComposite = (headProps: Page['props'], baseHeadProps: Page['props']): Page =>
+  ({
+    ...page({ errors: {}, ...baseHeadProps }),
+    layers: [layer({ component: 'Users/Edit', standalone: false, props: { ...headProps } })],
+  }) as Page
+
 describe('createHeadManager', () => {
   describe('server head', () => {
     it('normalizes server head elements into Inertia managed elements', () => {
@@ -35,6 +62,29 @@ describe('createHeadManager', () => {
       ])
     })
 
+    it('resolves a cold layer server head from the top layer when the base is blank', () => {
+      expect(
+        resolveServerHead(coldComposite({ head: ['<title>Layer</title>'] }), (p) => p.props.head as string[]),
+      ).toEqual(['<title data-inertia="server-head-0">Layer</title>'])
+    })
+
+    it('resolves a cold layer server head from a named prop on the top layer', () => {
+      expect(
+        resolveServerHead(coldComposite({ metaTags: ['<meta name="description" content="Layer">'] }), 'metaTags'),
+      ).toEqual(['<meta data-inertia="server-head-0" name="description" content="Layer">'])
+    })
+
+    it('resolves a warm layer server head from the top layer, not the base beneath it', () => {
+      expect(
+        resolveServerHead(warmComposite({ head: ['<title>Layer</title>'] }, { head: ['<title>Base</title>'] }), true),
+      ).toEqual(['<title data-inertia="server-head-0">Layer</title>'])
+    })
+
+    it('returns no head for a cold layer that carries none', () => {
+      expect(resolveServerHead(coldComposite(), true)).toEqual([])
+      expect(resolveServerHead(coldComposite(), (p) => p.props.head as string[])).toEqual([])
+    })
+
     it('updates server head elements using a reserved provider', () => {
       const collected: string[][] = []
 
@@ -111,4 +161,107 @@ describe('createHeadManager', () => {
       expect(head).not.toContain('<script>alert(')
     })
   })
+
+  describe('stack order', () => {
+    const stackOf =
+      (...ids: string[]) =>
+      () =>
+        ids.map((id) => ({ id }) as LayerState)
+
+    it('orders the page beneath the layers, the layers by their index, and keeps only the top title', () => {
+      const collected: string[][] = []
+
+      const manager = createHeadManager(
+        true,
+        (title) => title,
+        (elements) => collected.push(elements),
+        [],
+        stackOf('layer-1', 'layer-2'),
+      )
+
+      const firstBase = manager.createProvider()
+      const layerOne = manager.createProvider('layer-1')
+      const layerTwo = manager.createProvider('layer-2')
+      const secondBase = manager.createProvider()
+
+      firstBase.update(['<meta data-inertia="first-base" content="first">'])
+      secondBase.update(['<meta data-inertia="second-base" content="second">'])
+      layerOne.update(['<title data-inertia="">Layer One</title>', '<meta data-inertia="one" content="1">'])
+      layerTwo.update(['<title data-inertia="">Layer Two</title>'])
+
+      expect(collected[collected.length - 1]).toEqual([
+        '<meta data-inertia="first-base" content="first">',
+        '<meta data-inertia="second-base" content="second">',
+        '<title data-inertia="">Layer Two</title>',
+        '<meta data-inertia="one" content="1">',
+      ])
+    })
+
+    it("keeps the top layer's title when another layer is inserted beneath it", () => {
+      const collected: string[][] = []
+
+      let stack: LayerState[] = [{ id: 'outer' } as LayerState]
+
+      const manager = createHeadManager(
+        true,
+        (title) => title,
+        (elements) => collected.push(elements),
+        [],
+        () => stack,
+      )
+
+      const outer = manager.createProvider('outer')
+      outer.update(['<title data-inertia="">Outer</title>'])
+
+      stack = [{ id: 'inner' } as LayerState, { id: 'outer' } as LayerState]
+      const inner = manager.createProvider('inner')
+      inner.update(['<title data-inertia="">Inner</title>'])
+
+      expect(collected[collected.length - 1]).toEqual(['<title data-inertia="">Outer</title>'])
+    })
+
+    it("keeps a layer's title winning over the page's when its provider disconnects and reconnects", () => {
+      const collected: string[][] = []
+
+      const manager = createHeadManager(
+        true,
+        (title) => title,
+        (elements) => collected.push(elements),
+        [],
+        stackOf('layer-1'),
+      )
+
+      const layerOne = manager.createProvider('layer-1')
+      const base = manager.createProvider()
+
+      layerOne.update(['<title data-inertia="">Layer</title>'])
+      base.update(['<title data-inertia="">Base</title>'])
+
+      layerOne.disconnect()
+      layerOne.reconnect()
+      layerOne.update(['<title data-inertia="">Layer</title>'])
+
+      expect(collected[collected.length - 1]).toEqual(['<title data-inertia="">Layer</title>'])
+    })
+
+    it('keeps the server head first', () => {
+      const collected: string[][] = []
+
+      const manager = createHeadManager(
+        true,
+        (title) => title,
+        (elements) => collected.push(elements),
+        ['<title data-inertia="server-head-0">Server Head</title>'],
+        stackOf('layer-1'),
+      )
+
+      const layerOne = manager.createProvider('layer-1')
+      layerOne.update(['<meta data-inertia="one" content="1">'])
+
+      expect(collected[collected.length - 1]).toEqual([
+        '<title data-inertia="server-head-0">Server Head</title>',
+        '<meta data-inertia="one" content="1">',
+      ])
+    })
+  })
 })
diff --git a/packages/core/tests/history.test.ts b/packages/core/tests/history.test.ts
new file mode 100644
index 000000000..103a71736
--- /dev/null
+++ b/packages/core/tests/history.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from 'vitest'
+import { history } from '../src/history'
+import { composeLayer } from '../src/layers'
+import Queue from '../src/queue'
+import { Page, PageProps } from '../src/types'
+
+const pageWith = (props: PageProps): Page => ({
+  component: 'Users/Index',
+  props: {
+    errors: {},
+    ...props,
+  },
+  url: '/users',
+  version: null,
+  rescuedProps: [],
+  flash: {},
+  rememberedState: {},
+})
+
+const clonePageProps = (page: Page): Page =>
+  (history as unknown as { clonePageProps(page: Page): Page }).clonePageProps(page)
+
+describe('clonePageProps', () => {
+  it('returns props the browser can store in history', () => {
+    const page = clonePageProps(pageWith({ name: 'Joe', onClick: () => {} }))
+
+    expect(() => structuredClone(page.props)).not.toThrow()
+  })
+
+  it('returns the page untouched when its props are already cloneable', () => {
+    const page = pageWith({ name: 'Joe' })
+
+    expect(clonePageProps(page)).toBe(page)
+  })
+
+  it('does not mutate the original props', () => {
+    const onClick = () => {}
+    const page = pageWith({ onClick })
+
+    clonePageProps(page)
+
+    expect(page.props.onClick).toBe(onClick)
+  })
+
+  it('returns props the browser can store when the unstorable ones are on a layer', () => {
+    const layer = { ...pageWith({ onClick: () => {} }), component: 'Users/Edit', layer: { key: 'Users/Edit' } }
+    const page = clonePageProps(composeLayer(pageWith({}), layer as Page, 'layer-1'))
+
+    expect(() => structuredClone(page)).not.toThrow()
+  })
+})
+
+describe('the write queue', () => {
+  it('runs an item added while the item ahead of it was settling', async () => {
+    const queue = new Queue<Promise<void>>()
+    const ran: string[] = []
+    let first!: Promise<void>
+
+    queue.add(() => (first = Promise.resolve().then(() => void ran.push('first'))))
+    await first.then(() => queue.add(() => Promise.resolve().then(() => void ran.push('second'))))
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(ran).toEqual(['first', 'second'])
+  })
+})
+
+describe('remembering state on the server', () => {
+  const withoutWindow = async (run: (history: { remember(data: unknown, key: string): void }) => void) => {
+    vi.resetModules()
+
+    const browser = globalThis.window
+
+    // @ts-expect-error the server has none
+    delete globalThis.window
+
+    try {
+      run((await import('../src/history')).history)
+    } finally {
+      globalThis.window = browser
+    }
+  }
+
+  it('does nothing, since a render has no history to remember into', async () => {
+    await withoutWindow((history) => expect(() => history.remember({ name: 'Joe' }, 'default')).not.toThrow())
+  })
+})
diff --git a/packages/core/tests/layer-handles.test.ts b/packages/core/tests/layer-handles.test.ts
new file mode 100644
index 000000000..d58735f3d
--- /dev/null
+++ b/packages/core/tests/layer-handles.test.ts
@@ -0,0 +1,2320 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { router } from '../src'
+import { eventHandler } from '../src/eventHandler'
+import { history } from '../src/history'
+import { http } from '../src/http'
+import { layerClosing } from '../src/layers'
+import { createLayerHandle, registryClose, registryHas, registryRead, registryWrite } from '../src/layers'
+import { addressOf, composeLayer } from '../src/layers'
+import { page as currentPage } from '../src/page'
+import { prefetchedRequests } from '../src/prefetched'
+import { Router, createLayerApi } from '../src/router'
+import { LayerState, Page, ResolvedLayer, VisitOptions } from '../src/types'
+import { listeners, veto } from './support/browser'
+import { editLayer, hold, holding, marked, pageWith, respondWith, settled } from './support/layers'
+
+describe('router.layer: the routed handle', () => {
+  const client = http.getClient()
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(() => {
+    http.setClient(client)
+    layerClosing.settleUnwind()
+    vi.restoreAllMocks()
+  })
+
+  it('returns a handle that subscribes and closes', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    expect(typeof handle.on).toBe('function')
+    expect(typeof handle.onClose).toBe('function')
+    expect(typeof handle.close).toBe('function')
+  })
+
+  it('composes a warm layer under the id the handle was minted with, and close() dismisses it', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    const [layer] = currentPage.get().layers!
+    expect(layer.id).toBe(handle.id)
+    expect(registryRead(layer.id)).toBe(handle)
+
+    const go = vi.spyOn(window.history, 'go')
+    handle.close()
+    await settled()
+    layerClosing.closed(layer.id)
+    await history.processQueue()
+
+    expect(go).toHaveBeenCalledWith(-1)
+
+    http.setClient({ request: () => new Promise(() => {}) })
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+    await vi.waitFor(() => expect(currentPage.get()).not.toHaveProperty('layers'))
+  })
+
+  it('composes a cold layer under the carried id when the captured base went stale', async () => {
+    await hold(pageWith())
+    const answer = holding()
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+
+    await currentPage.set(pageWith({ component: 'Users/Archive', url: '/users/archive' }))
+
+    answer()!({
+      status: 200,
+      data: editLayer({ layer: { base: '/users' } }),
+      headers: { 'x-inertia': 'true' },
+    })
+
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    const [layer] = currentPage.get().layers!
+    expect(layer.id).toBe(handle.id)
+    expect(layer.standalone).toBe(true)
+    expect(registryRead(layer.id)).toBe(handle)
+  })
+
+  it('re-keys the handle when the stack takes the id it was minted with, and close() still works', async () => {
+    await hold(pageWith())
+    const answer = holding()
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+    const minted = handle.id
+
+    await currentPage.set(
+      composeLayer(currentPage.get(), pageWith({ component: 'Teams/Show', layer: { key: 'Teams/Show' } }), minted),
+      { preservesBase: true },
+    )
+
+    answer()!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    const [taken, composed] = currentPage.get().layers!
+    expect(composed.id).not.toBe(minted)
+    expect(composed.id).toBe(handle.id)
+    expect(registryRead(composed.id)).toBe(handle)
+
+    const go = vi.spyOn(window.history, 'go')
+    handle.close()
+    await settled()
+    layerClosing.closed(composed.id)
+    await history.processQueue()
+
+    expect(go).toHaveBeenCalledWith(-1)
+
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: { ...currentPage.get(), layers: [taken] } } } as PopStateEvent)
+    await vi.waitFor(() => expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual([taken.id]))
+  })
+
+  it('takes over the layer already open under the key, rather than opening another', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    const [open] = currentPage.get().layers!
+    respondWith(editLayer({ props: { user: { id: 5, name: 'Renamed' } } }))
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5, name: 'Renamed' } }))
+
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual([open.id])
+    expect(handle.id).toBe(open.id)
+    expect(registryRead(open.id)).toBe(handle)
+
+    const go = vi.spyOn(window.history, 'go')
+    handle.close()
+    await settled()
+    layerClosing.closed(open.id)
+    await history.processQueue()
+
+    expect(go).toHaveBeenCalledWith(-1)
+
+    http.setClient({ request: () => new Promise(() => {}) })
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+    await vi.waitFor(() => expect(currentPage.get()).not.toHaveProperty('layers'))
+  })
+
+  it('keeps the first handle listening when a second open takes over the layer, and closes both', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+
+    const first = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    const closed: string[] = []
+    first.onClose(() => closed.push('first'))
+
+    respondWith(editLayer({ props: { user: { id: 5, name: 'Renamed' } } }))
+
+    const second = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5, name: 'Renamed' } }))
+
+    second.onClose(() => closed.push('second'))
+    expect(second.id).toBe(first.id)
+
+    respondWith(pageWith())
+
+    const open = currentPage.get().layers![0]
+    second.close()
+    await settled()
+    layerClosing.closed(open.id)
+    await history.processQueue()
+
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+
+    await vi.waitFor(() => expect(closed).toEqual(['first', 'second']))
+  })
+
+  it('makes the page the owner of a layer opened from it', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+    const baseId = currentPage.id()
+
+    router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    expect(currentPage.get().layers![0].owner).toBe(baseId)
+  })
+
+  it("keeps a layer's handle when a partial it made is answered by a page that keeps the stack", async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    respondWith(pageWith({ url: '/users?search=x', props: { users: [{ id: 9 }] } }))
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users?search=x', {
+        layerId: handle.id,
+        only: ['users'],
+        onSuccess: () => resolve(),
+        onError: () => resolve(),
+      })
+    })
+
+    expect(currentPage.get().layers).toHaveLength(1)
+    expect(fires).toBe(0)
+    expect(registryHas(handle.id)).toBe(true)
+  })
+
+  it('keeps the layer a vetoed link was sent from, and closes the handle of a vetoed open', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    const [opener] = currentPage.get().layers!
+    const openerHandle = router.layerHandle(opener.id)
+    respondWith(pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } }))
+    veto.types.add('inertia:before')
+
+    try {
+      router.visit('http://localhost/users/5/notes', { layerId: opener.id })
+      expect(registryRead(opener.id)).toBe(openerHandle)
+
+      const handle = router.layer('http://localhost/users/5/notes')
+      expect(registryHas(handle.id)).toBe(false)
+    } finally {
+      veto.types.delete('inertia:before')
+    }
+  })
+
+  it('makes the layer a link was clicked in the owner of the layer it opens, keeping its handle', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    const [opener] = currentPage.get().layers!
+    const openerHandle = router.layerHandle(opener.id)
+    const heard: unknown[] = []
+    openerHandle.on('saved', (payload) => heard.push(payload))
+    respondWith(pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } }))
+
+    router.visit('http://localhost/users/5/notes', { layerId: opener.id })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    const [, child] = currentPage.get().layers!
+    expect(child.owner).toBe(opener.id)
+    expect(openerHandle.id).toBe(opener.id)
+    expect(registryRead(opener.id)).toBe(openerHandle)
+
+    router.layerHandle(child.id).emit('saved', { id: 9 })
+    expect(heard).toEqual([{ id: 9 }])
+  })
+
+  it('makes a layer the owner of a layer opened from inside it', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    const [opener] = currentPage.get().layers!
+    respondWith(pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } }))
+
+    router.layer('http://localhost/users/5/notes')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    expect(currentPage.get().layers![1].owner).toBe(opener.id)
+  })
+})
+
+describe('layer events', () => {
+  const layerAt = (path: string, component: string): Page =>
+    pageWith({ component, url: path, layer: { key: component } })
+
+  const responding = (pages: Record<string, Page>) =>
+    http.setClient({
+      request: async ({ url }) => ({
+        status: 200,
+        data: pages[new URL(url).pathname],
+        headers: { 'x-inertia': 'true' },
+      }),
+    })
+
+  const client = http.getClient()
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(() => {
+    http.setClient(client)
+    layerClosing.settleUnwind()
+    vi.restoreAllMocks()
+  })
+
+  it('delivers an event to the immediate owner only, never up the chain', async () => {
+    await hold(pageWith())
+    responding({
+      '/a': layerAt('/a', 'Users/A'),
+      '/b': layerAt('/b', 'Users/B'),
+      '/c': layerAt('/c', 'Users/C'),
+    })
+
+    const a = router.layer('http://localhost/a')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+    const b = router.layer('http://localhost/b')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+    const c = router.layer('http://localhost/c')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(3))
+
+    const seen: string[] = []
+    a.on('saved', () => seen.push('a'))
+    b.on('saved', () => seen.push('b'))
+
+    c.emit('saved', { id: 3 })
+    expect(seen).toEqual(['b'])
+
+    b.emit('saved', { id: 2 })
+    expect(seen).toEqual(['b', 'a'])
+  })
+
+  it('distinguishes the same-named events of two children by the emitting id', async () => {
+    const base = pageWith()
+    const a = composeLayer(base, pageWith({ component: 'Users/A', url: '/a', layer: { key: 'Users/A' } }), 'layer-a')
+    const withB = composeLayer(a, pageWith({ component: 'Users/B', url: '/b', layer: { key: 'Users/B' } }), 'layer-b', {
+      url: '/b',
+      owner: 'layer-a',
+    })
+    const withD = composeLayer(
+      withB,
+      pageWith({ component: 'Users/D', url: '/d', layer: { key: 'Users/D' } }),
+      'layer-d',
+      { url: '/d', owner: 'layer-a' },
+    )
+
+    currentPage.init({
+      initialPage: withD,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+    const ownerOf = (layerId: string): string | null | undefined =>
+      (currentPage.get().layers ?? []).find((layer) => layer.id === layerId)?.owner
+    const aHandle = createLayerHandle('layer-a', async () => {}, ownerOf)
+    const bHandle = createLayerHandle('layer-b', async () => {}, ownerOf)
+    const dHandle = createLayerHandle('layer-d', async () => {}, ownerOf)
+    registryWrite('layer-a', aHandle)
+    registryWrite('layer-b', bHandle)
+    registryWrite('layer-d', dHandle)
+
+    const seen: [string, unknown][] = []
+    aHandle.on('saved', (payload, childId) => seen.push([childId, payload]))
+
+    bHandle.emit('saved', { id: 1 })
+    dHandle.emit('saved', { id: 2 })
+
+    expect(seen).toEqual([
+      ['layer-b', { id: 1 }],
+      ['layer-d', { id: 2 }],
+    ])
+  })
+
+  it('drops an event no one subscribed to, silently', async () => {
+    await hold(pageWith())
+    responding({ '/a': layerAt('/a', 'Users/A'), '/b': layerAt('/b', 'Users/B') })
+
+    const a = router.layer('http://localhost/a')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+    const b = router.layer('http://localhost/b')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    expect(() => b.emit('saved', { id: 1 })).not.toThrow()
+  })
+
+  it('drops an event a layer emits to the page, which has no handle to hear it', async () => {
+    await hold(pageWith())
+    responding({ '/a': layerAt('/a', 'Users/A') })
+
+    const a = router.layer('http://localhost/a')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    expect(currentPage.get().layers![0].owner).toBe(currentPage.id())
+    expect(() => a.emit('saved', { id: 1 })).not.toThrow()
+  })
+
+  it('closes a child opened through layer.layer(), leaving the layer that opened it', async () => {
+    await hold(pageWith())
+    responding({ '/a': layerAt('/a', 'Users/A'), '/b': layerAt('/b', 'Users/B') })
+
+    const a = router.layer('http://localhost/a')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    const child = createLayerApi(a.id).layer('http://localhost/b')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    await child.close()
+    await settled()
+
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual([a.id])
+  })
+
+  it('hears a layer event through once() exactly once, and through on() every time', async () => {
+    await hold(pageWith())
+    responding({ '/a': layerAt('/a', 'Users/A') })
+
+    const heard: string[] = []
+    const owner = createLayerApi(undefined)
+
+    owner.once('saved', () => heard.push('once'))
+    owner.on('saved', () => heard.push('on'))
+
+    const a = router.layer('http://localhost/a')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    a.emit('saved')
+    a.emit('saved')
+
+    expect(heard).toEqual(['once', 'on', 'on'])
+  })
+
+  it('stops a once() subscription that never fired', async () => {
+    await hold(pageWith())
+    responding({ '/a': layerAt('/a', 'Users/A') })
+
+    const heard: string[] = []
+    const stop = createLayerApi(undefined).once('saved', () => heard.push('once'))
+
+    const a = router.layer('http://localhost/a')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    stop()
+    a.emit('saved')
+
+    expect(heard).toEqual([])
+  })
+
+  it('keeps the page hearing its children across a preserved visit of its own component', async () => {
+    await hold(pageWith())
+    responding({ '/a': layerAt('/a', 'Users/A') })
+
+    const heard: unknown[] = []
+    createLayerApi(undefined).on('saved', (payload) => heard.push(payload))
+
+    await currentPage.set(pageWith({ url: '/users?filter=x' }), { preserveState: true })
+
+    const a = router.layer('http://localhost/a')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    a.emit('saved', { id: 1 })
+
+    expect(heard).toEqual([{ id: 1 }])
+  })
+})
+
+describe('closing a layer that has a handle', () => {
+  const client = http.getClient()
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(() => {
+    http.setClient(client)
+    layerClosing.settleUnwind()
+    vi.restoreAllMocks()
+  })
+
+  it('fires onClose once the removal and the refresh it triggered have settled, seeing the refreshed state', async () => {
+    await hold(pageWith())
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+    answer!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    const seen: Page[] = []
+    handle.onClose(() => seen.push(currentPage.get()))
+
+    http.setClient({
+      request: async () => ({
+        status: 200,
+        data: pageWith({ props: { users: [{ id: 9 }] } }),
+        headers: { 'x-inertia': 'true' },
+      }),
+    })
+
+    handle.close()
+    await settled()
+    router.closed(handle.id)
+    await history.processQueue()
+
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+
+    await vi.waitFor(() => expect(seen).toHaveLength(1))
+    expect(seen[0].props).toEqual(expect.objectContaining({ users: [{ id: 9 }] }))
+    expect(registryHas(handle.id)).toBe(false)
+  })
+
+  it('refreshes the layer beneath once, after the unwind settled, targeting the restored address', async () => {
+    await hold(pageWith())
+    const requested: string[] = []
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({
+      request: ({ url }) => {
+        requested.push(new URL(url).pathname)
+
+        return new Promise((resolve) => (answer = resolve))
+      },
+    })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+    answer!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    handle.close()
+    await settled()
+    router.closed(handle.id)
+    await history.processQueue()
+
+    expect(requested).toEqual(['/users/5/edit'])
+
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+
+    await vi.waitFor(() => expect(requested).toEqual(['/users/5/edit', '/users']))
+    answer!({ status: 200, data: pageWith(), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(registryHas(handle.id)).toBe(false))
+  })
+
+  it('aims the refresh at the base when the layer it lands on has no url of its own', async () => {
+    await hold(pageWith({ props: { token: 'base value' }, onceProps: { baseKey: { prop: 'token' } } }))
+    const sent: { url: string; onceProps: string | undefined }[] = []
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({
+      request: ({ url, headers }) => {
+        sent.push({ url: new URL(url).pathname, onceProps: (headers ?? {})['X-Inertia-Except-Once-Props'] })
+
+        return new Promise((resolve) => (answer = resolve))
+      },
+    })
+
+    router.layer({ component: 'Layers/Local', props: {} })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+    const beneath = currentPage.get()
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+    answer!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    handle.close()
+    await settled()
+    router.closed(handle.id)
+    await history.processQueue()
+
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: beneath } } as PopStateEvent)
+
+    await vi.waitFor(() => expect(sent.map((request) => request.url)).toEqual(['/users/5/edit', '/users']))
+    expect(sent[1].onceProps).toBe('baseKey')
+  })
+
+  it('completes the close itself when the browser never answers the step back', async () => {
+    await hold(pageWith())
+    const requested: string[] = []
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({
+      request: ({ url }) => {
+        requested.push(new URL(url).pathname)
+
+        return new Promise((resolve) => (answer = resolve))
+      },
+    })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+    answer!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    handle.close()
+    await settled()
+    router.closed(handle.id)
+    await history.processQueue()
+
+    await vi.waitFor(() => expect(currentPage.get().layers ?? []).toHaveLength(0), { timeout: 4000 })
+    await vi.waitFor(() => expect(requested).toEqual(['/users/5/edit', '/users']), { timeout: 4000 })
+    answer!({ status: 200, data: pageWith(), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(registryHas(handle.id)).toBe(false))
+  })
+
+  it('fires onClose when a before listener vetoes the refresh the close runs', async () => {
+    await hold(pageWith())
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+    answer!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    let closed = false
+    handle.onClose(() => (closed = true))
+
+    veto.types.add('inertia:before')
+
+    try {
+      handle.close()
+      await settled()
+      router.closed(handle.id)
+      await history.processQueue()
+
+      eventHandler.init()
+      listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+
+      await vi.waitFor(() => expect(closed).toBe(true))
+      expect(registryHas(handle.id)).toBe(false)
+    } finally {
+      veto.types.delete('inertia:before')
+    }
+  })
+
+  it('carries preserveState on the refresh, for the state of the layer beneath', async () => {
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    currentPage.init({
+      initialPage: pageWith(),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+    await currentPage.setQuietly(pageWith())
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+    answer!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    http.setClient({
+      request: async () => ({ status: 200, data: pageWith(), headers: { 'x-inertia': 'true' } }),
+    })
+    const visit = vi.spyOn(router as unknown as { dispatchVisit: (...args: unknown[]) => boolean }, 'dispatchVisit')
+
+    handle.close()
+    await settled()
+    router.closed(handle.id)
+    await history.processQueue()
+
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+
+    await vi.waitFor(() => expect(visit.mock.calls.length).toBeGreaterThan(0))
+    expect(visit.mock.calls.at(-1)).toEqual([
+      '/users',
+      expect.objectContaining({ reload: true, preserveState: true, replace: true }),
+    ])
+  })
+
+  it('does not refresh when a restore drops the layer, since the restored entry already holds the base', async () => {
+    await hold(pageWith())
+    const requested: string[] = []
+    http.setClient({
+      request: async ({ url }) => {
+        requested.push(new URL(url).pathname)
+
+        return { status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } }
+      },
+    })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+    requested.length = 0
+
+    const seen: Page[] = []
+    handle.onClose(() => seen.push(currentPage.get()))
+
+    await currentPage.setQuietly(pageWith())
+
+    expect(seen).toHaveLength(1)
+    expect(requested).toEqual([])
+    expect(registryHas(handle.id)).toBe(false)
+  })
+
+  it('does not refresh when the layer closed was standalone, since the blank recovery already fetches', async () => {
+    const requested: string[] = []
+    http.setClient({
+      request: async ({ url }) => {
+        requested.push(new URL(url).pathname)
+
+        return { status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } }
+      },
+    })
+
+    currentPage.init({
+      initialPage: {
+        ...pageWith(),
+        layers: [
+          {
+            id: 'layer-1',
+            key: 'Users/Edit',
+            component: 'Users/Edit',
+            props: {},
+            url: '/users/5/edit',
+            base: '/users',
+            encryptHistory: false,
+            standalone: true,
+            entries: 0,
+            owner: null,
+          },
+        ],
+      },
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+    const handle = createLayerHandle(
+      'layer-1',
+      async () => {},
+      () => null,
+    )
+    let fires = 0
+    handle.onClose(() => fires++)
+    registryWrite('layer-1', handle)
+    requested.length = 0
+
+    const router = new Router()
+    router.close('layer-1')
+    await settled()
+    router.closed('layer-1')
+    await history.processQueue()
+
+    expect(requested).toEqual([])
+    await vi.waitFor(() => expect(fires).toBe(1))
+    expect(registryHas('layer-1')).toBe(false)
+  })
+})
+
+describe('layer handles across restores and navigations', () => {
+  const client = http.getClient()
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(() => {
+    http.setClient(client)
+    layerClosing.settleUnwind()
+    vi.restoreAllMocks()
+  })
+
+  it('fires a handle onClose exactly once when the restore drops its layer, then clears it', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => ({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } }),
+    })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    await currentPage.setQuietly(pageWith({ component: 'Users/Archive', url: '/users/archive' }))
+
+    expect(fires).toBe(1)
+    expect(registryHas(handle.id)).toBe(false)
+  })
+
+  it('gives a restored stack the page it lands on as its owner, so its events are still heard', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => ({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } }),
+    })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    const stack = currentPage.get()
+
+    await currentPage.set(pageWith({ component: 'Users/Archive', url: '/users/archive' }))
+    await currentPage.setQuietly(stack)
+
+    const heard: unknown[] = []
+    router.layerHandle().on('saved', (payload) => heard.push(payload))
+    router.layerHandle(handle.id).emit('saved', { id: 5 })
+
+    expect(heard).toEqual([{ id: 5 }])
+  })
+
+  it('keeps the layer and page handles when a newer write supersedes an older one', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+
+    const layer = router.layerHandle('layer-1')
+    const base = router.layerHandle()
+    let closed = ''
+
+    layer.onClose(() => (closed += 'layer'))
+    base.onClose(() => (closed += 'base'))
+
+    currentPage.set(pageWith({ component: 'Teams/Index', url: '/teams' }))
+    await new Promise<void>((resolve) => {
+      new Router().replace({ props: { users: [{ id: 1 }] }, onSuccess: () => resolve() })
+    })
+    await settled()
+
+    expect(currentPage.get().layers).toHaveLength(1)
+    expect(closed).toBe('')
+    expect(registryRead('layer-1')).toBe(layer)
+    expect(router.layerHandle()).toBe(base)
+  })
+
+  it('keeps a handle whose layer the restored stack still holds', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => ({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } }),
+    })
+
+    const outer = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    const heard: string[] = []
+    outer.onClose(() => heard.push('closed'))
+    outer.on('saved', () => heard.push('saved'))
+
+    http.setClient({
+      request: async () => ({
+        status: 200,
+        data: pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } }),
+        headers: { 'x-inertia': 'true' },
+      }),
+    })
+
+    router.layer('http://localhost/users/5/notes')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    const [beneath] = currentPage.get().layers!
+    await currentPage.setQuietly({ ...currentPage.get(), layers: [beneath] })
+
+    expect(heard).toEqual([])
+    expect(registryRead(outer.id)).toBe(outer)
+
+    const reopened = router.layer('http://localhost/users/5/notes')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    reopened.emit('saved')
+
+    expect(heard).toEqual(['saved'])
+  })
+
+  it('fires a handle onClose when a navigation from the base takes its layer away', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => ({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } }),
+    })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    http.setClient({
+      request: async () => ({
+        status: 200,
+        data: pageWith({ component: 'Teams/Index', url: '/teams' }),
+        headers: { 'x-inertia': 'true' },
+      }),
+    })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/teams', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(currentPage.get().layers).toBeUndefined()
+    expect(fires).toBe(1)
+    expect(registryHas(handle.id)).toBe(false)
+  })
+
+  it('keeps the handle of a layer whose own response clears the history', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => ({
+        status: 200,
+        data: editLayer({ clearHistory: true }),
+        headers: { 'x-inertia': 'true' },
+      }),
+    })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    expect(currentPage.get().layers![0].id).toBe(handle.id)
+    expect(fires).toBe(0)
+    expect(registryHas(handle.id)).toBe(true)
+  })
+})
+
+describe('the handle of a layer open that never lands', () => {
+  const client = http.getClient()
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(() => {
+    http.setClient(client)
+    layerClosing.settleUnwind()
+    vi.restoreAllMocks()
+  })
+
+  it('closes the handle when a 4xx is suppressed by onHttpException', async () => {
+    await hold(pageWith())
+    const answer = holding()
+
+    const handle = router.layer('http://localhost/users/5/edit', { onHttpException: () => false })
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    answer()!({ status: 422, data: editLayer(), headers: { 'x-inertia': 'true' } })
+
+    await vi.waitFor(() => expect(fires).toBe(1))
+    expect(registryHas(handle.id)).toBe(false)
+  })
+
+  it('closes the handle when the request is cancelled, and not twice if the response lands anyway', async () => {
+    await hold(pageWith())
+    const answer = holding()
+
+    const openHandle = router.layer('http://localhost/users/5/notes')
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+    answer()!({
+      status: 200,
+      data: pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } }),
+      headers: { 'x-inertia': 'true' },
+    })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    let openFires = 0
+    openHandle.onClose(() => openFires++)
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    router.cancelAll()
+    await vi.waitFor(() => expect(fires).toBe(1))
+    expect(registryHas(handle.id)).toBe(false)
+    expect(openFires).toBe(0)
+
+    answer()!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(fires).toBe(1)
+    expect(openFires).toBe(0)
+  })
+
+  it('does not fire a handle whose layer composed before a late cancel arrives', async () => {
+    await hold(pageWith())
+    const answer = holding()
+
+    let release!: () => void
+    const handle = router.layer('http://localhost/users/5/edit', {
+      onSuccess: () => new Promise<void>((resolve) => (release = resolve)),
+    })
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    answer()!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    router.cancelAll()
+    release()
+
+    expect(fires).toBe(0)
+    expect(registryHas(handle.id)).toBe(true)
+  })
+
+  it('closes the handle whose layer a back restore drops, exactly once', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => ({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } }),
+    })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    await currentPage.setQuietly(pageWith())
+
+    expect(fires).toBe(1)
+    expect(registryHas(handle.id)).toBe(false)
+  })
+
+  it('closes the handle when onBefore vetoes the visit, leaving other handles alone', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async ({ url }) => {
+        const path = new URL(url).pathname
+
+        return {
+          status: 200,
+          data: pageWith({ component: path.slice(1), url: path, layer: { key: path.slice(1) } }),
+          headers: { 'x-inertia': 'true' },
+        }
+      },
+    })
+
+    const openHandle = router.layer('http://localhost/notes')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    let openFires = 0
+    openHandle.onClose(() => openFires++)
+
+    const handle = router.layer('http://localhost/users/5/edit', { onBefore: () => false })
+
+    expect(registryHas(handle.id)).toBe(false)
+    expect(registryHas(openHandle.id)).toBe(true)
+    expect(openFires).toBe(0)
+  })
+
+  it('closes the handle when the layer response is promoted to a page instead of composing', async () => {
+    await hold(pageWith())
+
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } }),
+        'layer-notes',
+      ),
+      { preservesBase: true },
+    )
+    const openHandle = createLayerHandle(
+      'layer-notes',
+      async () => {},
+      () => null,
+    )
+    registryWrite('layer-notes', openHandle)
+
+    let openFires = 0
+    openHandle.onClose(() => openFires++)
+
+    const answer = holding()
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    await currentPage.set(pageWith({ component: 'Users/Archive', url: '/users/archive' }))
+
+    expect(openFires).toBe(1)
+
+    answer()!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+
+    await vi.waitFor(() => expect(fires).toBe(1))
+    expect(registryHas(handle.id)).toBe(false)
+    expect(currentPage.get().component).toBe('Users/Edit')
+    expect(openFires).toBe(1)
+  })
+
+  it('closes the handle when an async visit response is dropped', async () => {
+    await hold(pageWith())
+    const answer = holding()
+
+    const handle = router.layer('http://localhost/users/5/edit', { async: true })
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    await currentPage.set(pageWith({ component: 'Users/Archive', url: '/users/archive' }))
+
+    answer()!({ status: 200, data: pageWith({ props: { users: [{ id: 9 }] } }), headers: { 'x-inertia': 'true' } })
+
+    await vi.waitFor(() => expect(fires).toBe(1))
+    expect(registryHas(handle.id)).toBe(false)
+  })
+
+  it('fires the handle of a layer opened cold exactly once when a back restore drops its stack, even if its walk then fails', async () => {
+    await hold(pageWith({ component: 'Auth/Login', url: '/login' }))
+    const requested: string[] = []
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({
+      request: ({ url }) => {
+        requested.push(new URL(url).pathname)
+
+        return new Promise((resolve) => (answer = resolve))
+      },
+    })
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+
+    await currentPage.set(pageWith({ component: 'Users/Archive', url: '/users/archive' }))
+    answer!({ status: 200, data: editLayer({ layer: { base: '/users' } }), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+    await vi.waitFor(() => expect(requested).toEqual(['/users/5/edit', '/users']))
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+    await vi.waitFor(() => expect(fires).toBe(1))
+    expect(registryHas(handle.id)).toBe(false)
+
+    answer!({ status: 500, data: '<html>Server Error</html>', headers: {} })
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(fires).toBe(1)
+  })
+
+  it('closes the handle when the application vetoes the visit before it starts', async () => {
+    await hold(pageWith())
+    holding()
+    veto.types.add('inertia:before')
+
+    let fires = 0
+    const handle = router.layer('http://localhost/users/5/edit')
+    handle.onClose(() => fires++)
+    veto.types.clear()
+
+    await settled()
+
+    expect(fires).toBe(1)
+    expect(registryHas(handle.id)).toBe(false)
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('closes the handle when a 409 redirect re-issues the visit as a page navigation', async () => {
+    await hold(pageWith())
+    const requested: string[] = []
+
+    http.setClient({
+      request: async ({ url }) => {
+        requested.push(new URL(url).pathname)
+
+        return requested.length === 1
+          ? { status: 409, data: '', headers: { 'x-inertia-redirect': 'http://localhost/users' } }
+          : { status: 200, data: pageWith({ props: { users: [{ id: 9 }] } }), headers: { 'x-inertia': 'true' } }
+      },
+    })
+
+    const handle = router.layer('http://localhost/users/5/edit', { async: true })
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    await vi.waitFor(() => expect(fires).toBe(1))
+    await vi.waitFor(() => expect(requested).toEqual(['/users/5/edit', '/users']))
+
+    expect(registryHas(handle.id)).toBe(false)
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('closes the handle when the request never brings a response back', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => {
+        throw new Error('offline')
+      },
+    })
+    veto.types.add('inertia:networkError')
+
+    let fires = 0
+    const handle = router.layer('http://localhost/users/5/edit')
+    handle.onClose(() => fires++)
+
+    await vi.waitFor(() => expect(fires).toBe(1))
+    veto.types.clear()
+
+    expect(registryHas(handle.id)).toBe(false)
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('closes the handle when a 4xx reaches the error dialog', async () => {
+    await hold(pageWith())
+    const answer = holding()
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    answer()!({ status: 500, data: '<html>Server Error</html>', headers: {} })
+
+    await vi.waitFor(() => expect(fires).toBe(1))
+    expect(registryHas(handle.id)).toBe(false)
+  })
+})
+
+describe('a layer open answered by an interstitial', () => {
+  const client = http.getClient()
+
+  const prompt = (overrides: Partial<Page> = {}): Page =>
+    pageWith({ component: 'Auth/Sudo', url: '/sudo', interstitial: true, ...overrides } as Partial<Page>)
+
+  const answering = (...responses: Page[]) => {
+    const queue = [...responses]
+
+    http.setClient({
+      request: async () => ({
+        status: 200,
+        data: (queue.length > 1 ? queue.shift() : queue[0]) as never,
+        headers: { 'x-inertia': 'true' },
+      }),
+    })
+  }
+
+  const settled = () => new Promise((resolve) => setTimeout(resolve))
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(async () => {
+    http.setClient(client)
+    layerClosing.settleUnwind()
+    await settled()
+    vi.restoreAllMocks()
+  })
+
+  it('keeps the handle open, since the prompt returns to it', async () => {
+    await hold(pageWith())
+    answering(prompt())
+
+    let fires = 0
+    const handle = router.layer('http://localhost/users/5/edit')
+    handle.onClose(() => fires++)
+    await settled()
+
+    expect(currentPage.get().component).toBe('Auth/Sudo')
+    expect(fires).toBe(0)
+    expect(registryHas(handle.id)).toBe(true)
+  })
+
+  it('fires onClose when the layer the prompt returned to is closed', async () => {
+    await hold(pageWith())
+    answering(prompt(), editLayer())
+
+    let fires = 0
+    const handle = router.layer('http://localhost/users/5/edit')
+    handle.onClose(() => fires++)
+    await settled()
+
+    new Router().visit('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+    expect(currentPage.get().layers![0].id).toBe(handle.id)
+    expect(fires).toBe(0)
+
+    await router.close(handle.id)
+    await settled()
+
+    expect(fires).toBe(1)
+  })
+
+  it('keeps the handle open when the prompt answers its own submit', async () => {
+    await hold(pageWith())
+    answering(prompt(), prompt({ props: { errors: { password: 'Wrong' } } }), editLayer())
+
+    let fires = 0
+    const handle = router.layer('http://localhost/users/5/edit')
+    handle.onClose(() => fires++)
+    await settled()
+
+    new Router().visit('http://localhost/sudo', { method: 'post' })
+    await settled()
+
+    expect(fires).toBe(0)
+    expect(registryHas(handle.id)).toBe(true)
+
+    new Router().visit('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().layers![0].id).toBe(handle.id)
+  })
+
+  it('fires onClose when a navigation away abandons the prompt', async () => {
+    await hold(pageWith())
+    answering(prompt(), pageWith({ component: 'Dashboard', url: '/dashboard' }))
+
+    let fires = 0
+    const handle = router.layer('http://localhost/users/5/edit')
+    handle.onClose(() => fires++)
+    await settled()
+
+    new Router().visit('http://localhost/dashboard')
+    await vi.waitFor(() => expect(fires).toBe(1))
+
+    expect(currentPage.get().component).toBe('Dashboard')
+    expect(registryHas(handle.id)).toBe(false)
+  })
+
+  it('closes the handle when the response is an ordinary page rather than a prompt', async () => {
+    await hold(pageWith())
+    answering(pageWith({ component: 'Auth/Login', url: '/login' }))
+
+    let fires = 0
+    const handle = router.layer('http://localhost/users/5/edit')
+    handle.onClose(() => fires++)
+
+    await vi.waitFor(() => expect(fires).toBe(1))
+    expect(registryHas(handle.id)).toBe(false)
+  })
+
+  it('gives the returned layer the page it lands on as its owner', async () => {
+    await hold(pageWith())
+    answering(prompt(), editLayer())
+
+    const handle = router.layer('http://localhost/users/5/edit')
+    await settled()
+
+    new Router().visit('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    expect(currentPage.get().layers![0].owner).toBe(currentPage.id())
+
+    let heard: unknown = null
+    router.layerHandle().on('saved', (payload) => (heard = payload))
+    handle.emit('saved', { id: 5 })
+
+    expect(heard).toEqual({ id: 5 })
+  })
+})
+
+describe('local layers: router.layer({ component, props })', () => {
+  const client = http.getClient()
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(() => {
+    http.setClient(client)
+    layerClosing.settleUnwind()
+    vi.restoreAllMocks()
+  })
+
+  it('opens a local layer with no url of its own, owned by the topmost layer', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    const [opener] = currentPage.get().layers!
+
+    const handle = router.layer({ component: 'Users/Notes', props: { user: { id: 5 } } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    const [routed, local] = currentPage.get().layers!
+    expect(local.id).toBe(handle.id)
+    expect(local.url).toBeNull()
+    expect(local.key).toBe('Users/Notes')
+    expect(local.owner).toBe(opener.id)
+    expect(local.props).toEqual({ user: { id: 5 } })
+    expect(addressOf(currentPage.get())).toBe('/users/5/edit')
+    expect(registryRead(local.id)).toBe(handle)
+  })
+
+  it('makes the page the owner of a local layer opened from it', async () => {
+    await hold(pageWith())
+    const baseId = currentPage.id()
+
+    router.layer({ component: 'Users/Notes', props: { user: { id: 5 } } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    expect(currentPage.get().layers![0].owner).toBe(baseId)
+  })
+
+  it('writes a history entry for a local open, at the address the stack already owns', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    router.layer({ component: 'Users/Notes', props: { user: { id: 5 } } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+    await history.processQueue()
+
+    expect(pushState).toHaveBeenCalledWith(expect.anything(), '', '/users/5/edit')
+    expect(currentPage.get().layers![1].entries).toBe(1)
+  })
+
+  it('serialises a local layer into an entry', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => ({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } }),
+    })
+
+    const routed = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    const local = router.layer({ component: 'Users/Notes', props: { user: { id: 5 } } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+    await new Promise<void>((resolve) => {
+      new Router().replace({ props: { users: [{ id: 9 }] }, onSuccess: () => resolve() })
+    })
+
+    const [state] = replaceState.mock.lastCall as unknown as [{ page: Page }]
+    expect(state.page.layers!.map((layer) => layer.id)).toEqual([routed.id, local.id])
+    expect(state.page.layers![1]).toMatchObject({ local: true, component: 'Users/Notes', props: { user: { id: 5 } } })
+  })
+
+  it('drops a local layer on restore, firing its handle onClose once', async () => {
+    await hold(pageWith())
+
+    const handle = router.layer({ component: 'Users/Notes', props: { user: { id: 5 } } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    let fires = 0
+    handle.onClose(() => fires++)
+
+    await currentPage.setQuietly(pageWith())
+
+    expect(fires).toBe(1)
+    expect(registryHas(handle.id)).toBe(false)
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('gives two local opens two ids and two handles, and closing one leaves the other', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => ({ status: 200, data: pageWith(), headers: { 'x-inertia': 'true' } }),
+    })
+
+    const first = router.layer({ component: 'Users/Notes', props: { user: { id: 5 } } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+    const second = router.layer({ component: 'Users/Notes', props: { user: { id: 6 } } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    const [a, b] = currentPage.get().layers!
+    expect(a.id).not.toBe(b.id)
+    expect(a.key).toBe('Users/Notes')
+    expect(registryRead(a.id)).toBe(first)
+    expect(registryRead(b.id)).toBe(second)
+
+    second.close()
+    await settled()
+    layerClosing.closed(b.id)
+    await history.processQueue()
+
+    eventHandler.init()
+    listeners.get('popstate')!({
+      state: { page: { ...currentPage.get(), layers: [a] } },
+    } as PopStateEvent)
+
+    await vi.waitFor(() => expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual([a.id]))
+    await vi.waitFor(() => expect(registryHas(b.id)).toBe(false))
+    expect(registryHas(a.id)).toBe(true)
+  })
+
+  it('does not let a routed response rewrite an open local layer', async () => {
+    await hold(pageWith())
+
+    const local = router.layer({ component: 'Users/Edit', props: { user: { id: 5 } } })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+    const [localLayer] = currentPage.get().layers!
+
+    http.setClient({
+      request: async () => ({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } }),
+    })
+    const routed = router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    const [stillLocal, composed] = currentPage.get().layers!
+    expect(stillLocal).toEqual(localLayer)
+    expect(composed.id).toBe(routed.id)
+    expect(composed.key).toBe('Users/Edit')
+    expect(registryRead(composed.id)).toBe(routed)
+    expect(registryRead(stillLocal.id)).toBe(local)
+  })
+})
+
+describe('closing a layer', () => {
+  const layerWith = (overrides: Partial<LayerState>, index: number): LayerState => ({
+    id: `layer-${index + 1}`,
+    key: `L${index}`,
+    component: `L${index}`,
+    props: {},
+    url: null,
+    base: null,
+    encryptHistory: false,
+    standalone: false,
+    entries: 0,
+    owner: null,
+    deferredProps: {},
+    rescuedProps: [],
+    flash: {},
+    onceProps: {},
+    ...overrides,
+  })
+
+  let swapped: ResolvedLayer[] | undefined
+
+  const openOver = (base: Page, ...layers: Partial<LayerState>[]) =>
+    currentPage.init({
+      initialPage: { ...base, layers: layers.map(layerWith) },
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async ({ layers }) => {
+        swapped = layers
+      },
+    })
+
+  const markClose = async (id?: string): Promise<void> => {
+    layerClosing.close(id)
+
+    await settled()
+  }
+
+  const closeFully = async (id?: string): Promise<Promise<void>[]> => {
+    await markClose(id)
+
+    const exits = (currentPage.get().layers ?? []).map((layer) => layerClosing.closed(layer.id))
+
+    await history.processQueue()
+
+    return exits
+  }
+
+  const reportExit = async (id?: string) => {
+    layerClosing.closed(id)
+
+    await history.processQueue()
+  }
+
+  const standing = (address: string) => {
+    Object.assign(window, { location: new URL(`http://localhost${address}`) })
+  }
+
+  afterEach(() => {
+    layerClosing.settleUnwind()
+    standing('/users')
+    vi.restoreAllMocks()
+  })
+
+  it('resolves once the layer is off the screen, not when it starts closing', async () => {
+    openOver(pageWith(), { url: null })
+    let settledClose = false
+
+    const closed = layerClosing.close('layer-1').then(() => (settledClose = true))
+
+    await settled()
+
+    expect(currentPage.get().layers).toHaveLength(1)
+    expect(settledClose).toBe(false)
+
+    await reportExit('layer-1')
+    await closed
+
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('unwinds the steps taken over a cold layer before writing the page beneath it', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', standalone: true }, { url: '/users/5/notes', entries: 1 })
+    standing('/users/5/notes')
+    const go = vi.spyOn(window.history, 'go')
+
+    await closeFully('layer-1')
+
+    expect(go).toHaveBeenCalledWith(-1)
+  })
+
+  it('unwinds to the entry the layer beneath is on', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+    const go = vi.spyOn(window.history, 'go')
+
+    await closeFully()
+
+    expect(go).toHaveBeenCalledWith(-1)
+  })
+
+  it('unwinds past every layer above the one being closed', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 }, { url: '/teams/9', entries: 1 })
+    const go = vi.spyOn(window.history, 'go')
+
+    await closeFully('layer-1')
+
+    expect(go).toHaveBeenCalledWith(-2)
+  })
+
+  it('closes the topmost layer when none is named', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 }, { url: '/teams/9', entries: 1 })
+    const go = vi.spyOn(window.history, 'go')
+
+    await closeFully()
+
+    expect(go).toHaveBeenCalledWith(-1)
+  })
+
+  it('does not unwind past a layer that never moved the address', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 }, { url: null })
+    const go = vi.spyOn(window.history, 'go')
+
+    await closeFully('layer-1')
+
+    expect(go).toHaveBeenCalledWith(-1)
+  })
+
+  it('does not unwind past a layer that only moved the address by a hash', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 }, { url: '/users/5/edit#notes' })
+    const go = vi.spyOn(window.history, 'go')
+
+    await closeFully('layer-1')
+
+    expect(go).toHaveBeenCalledWith(-1)
+  })
+
+  it('unwinds every entry the layer pushed, not just the one the open did', async () => {
+    openOver(pageWith())
+    const go = vi.spyOn(window.history, 'go')
+
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({ component: 'Steps/One', layer: { key: 'Wizard' }, url: '/steps/1' }),
+        'layer-1',
+      ),
+      { preservesBase: true },
+    )
+    standing('/steps/1')
+
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({ component: 'Steps/Two', layer: { key: 'Wizard' }, url: '/steps/2' }),
+        'layer-2',
+      ),
+      { preservesBase: true },
+    )
+    standing('/steps/2')
+
+    await closeFully()
+
+    expect(go).toHaveBeenCalledWith(-2)
+  })
+
+  it('records each entry pushed on the layer that owns the address', async () => {
+    openOver(pageWith())
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({ component: 'Steps/One', layer: { key: 'Wizard' }, url: '/steps/1' }),
+        'layer-1',
+      ),
+      { preservesBase: true },
+    )
+    standing('/steps/1')
+
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({ component: 'Steps/Two', layer: { key: 'Wizard' }, url: '/steps/2' }),
+        'layer-2',
+      ),
+      { preservesBase: true },
+    )
+
+    expect(currentPage.get().layers!.map((layer) => layer.entries)).toEqual([2])
+    expect(pushState.mock.lastCall![0].page.layers.map((layer: LayerState) => layer.entries)).toEqual([2])
+  })
+
+  it('counts a history entry an anchor pushed inside a layer', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+    standing('/users/5/edit#notes')
+    eventHandler.init()
+
+    listeners.get('popstate')!({ state: null } as PopStateEvent)
+    await history.processQueue()
+
+    expect(currentPage.get().layers!.map((layer) => layer.entries)).toEqual([2])
+
+    const go = vi.spyOn(window.history, 'go')
+
+    await closeFully()
+
+    expect(go).toHaveBeenCalledWith(-2)
+  })
+
+  it('records a step on a layer opened at the address the page beneath already has', async () => {
+    openOver(pageWith())
+
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({ component: 'Users/Edit', layer: { key: 'Users/Edit' }, url: '/users' }),
+        'layer-1',
+      ),
+      { preservesBase: true },
+    )
+
+    expect(currentPage.get().layers!.map((layer) => layer.entries)).toEqual([1])
+  })
+
+  it('steps back only after the writes ahead of it have landed', async () => {
+    openOver(pageWith())
+    const order: string[] = []
+    vi.spyOn(window.history, 'pushState').mockImplementation(() => {
+      order.push('write')
+    })
+    vi.spyOn(window.history, 'go').mockImplementation(() => {
+      order.push('back')
+    })
+
+    history.pushState(pageWith({ url: '/elsewhere' }), null)
+    history.back(1)
+    await history.processQueue()
+
+    expect(order).toEqual(['write', 'back'])
+  })
+
+  it('writes the page beneath a layer that never moved the address', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 }, { url: null })
+    standing('/users/5/edit')
+    const go = vi.spyOn(window.history, 'go')
+    const replaceState = vi.spyOn(history, 'replaceState')
+
+    await Promise.all(await closeFully('layer-2'))
+
+    expect(go).not.toHaveBeenCalled()
+    expect(replaceState).toHaveBeenCalled()
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual(['layer-1'])
+  })
+
+  it('pushes the page beneath a standalone layer, leaving the entry the layer arrived on', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', standalone: true })
+    standing('/users/5/edit')
+    const go = vi.spyOn(window.history, 'go')
+    const pushState = vi.spyOn(history, 'pushState')
+
+    await Promise.all(await closeFully())
+
+    expect(go).not.toHaveBeenCalled()
+    expect(pushState).toHaveBeenCalled()
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get()).not.toHaveProperty('layers')
+  })
+
+  it('closes every layer above the one it was asked to close', async () => {
+    openOver(pageWith(), { url: '/a', standalone: true }, { url: '/b', entries: 1 }, { url: '/c', entries: 1 })
+    standing('/c')
+    const go = vi.spyOn(window.history, 'go')
+
+    await closeFully('layer-1')
+
+    expect(go).toHaveBeenCalledWith(-2)
+    expect(layerClosing.isUnwinding()).toBe(true)
+  })
+
+  it('leaves the page the stack was opened over in place', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', standalone: true })
+    standing('/users/5/edit')
+    const generation = currentPage.generation()
+
+    await Promise.all(await closeFully())
+
+    expect(currentPage.generation()).toBe(generation)
+  })
+
+  it('does nothing when there is no stack to close', async () => {
+    currentPage.init({
+      initialPage: pageWith(),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+    const go = vi.spyOn(window.history, 'go')
+    const pushState = vi.spyOn(history, 'pushState')
+
+    await closeFully()
+
+    expect(go).not.toHaveBeenCalled()
+    expect(pushState).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when the layer named is not on the stack', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+    const go = vi.spyOn(window.history, 'go')
+    const pushState = vi.spyOn(history, 'pushState')
+
+    await closeFully('layer-9')
+
+    expect(go).not.toHaveBeenCalled()
+    expect(pushState).not.toHaveBeenCalled()
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual(['layer-1'])
+  })
+
+  it('closes a stack restored from history to the same place', async () => {
+    currentPage.init({
+      initialPage: pageWith(),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+    const pushState = vi.spyOn(window.history, 'pushState')
+    const layer = pageWith({
+      component: 'Users/Edit',
+      url: '/users/5/edit',
+      layer: { key: 'Users/Edit' },
+      encryptHistory: true,
+    })
+
+    await currentPage.set(composeLayer(currentPage.get(), layer, 'layer-1', { url: layer.url, standalone: true }), {
+      preservesBase: true,
+    })
+
+    const entry = pushState.mock.lastCall![0].page
+
+    expect(entry).toBeInstanceOf(ArrayBuffer)
+
+    const restored = await history.decrypt(entry)
+
+    expect(restored.layers).toEqual([expect.objectContaining({ id: 'layer-1', standalone: true })])
+  })
+
+  it('closeAbove waits for the layers it marked, not for a close still refreshing', async () => {
+    const client = http.getClient()
+    openOver(pageWith(), { url: null }, { url: null }, { url: null })
+
+    let answerRefresh: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answerRefresh = resolve)) })
+
+    router.close('layer-3')
+    await settled()
+    await reportExit('layer-3')
+    await settled()
+
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual(['layer-1', 'layer-2'])
+
+    let closedAbove = false
+    const above = layerClosing.closeAbove('layer-1').then(() => (closedAbove = true))
+
+    await settled()
+    answerRefresh!({ status: 200, data: pageWith() as unknown as string, headers: { 'x-inertia': 'true' } })
+    await settled()
+
+    expect(closedAbove).toBe(false)
+
+    await reportExit('layer-2')
+    await above
+
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual(['layer-1'])
+    http.setClient(client)
+  })
+
+  describe('the window between close and done', () => {
+    it('marks the layer rather than removing it', async () => {
+      openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+
+      await markClose()
+
+      expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual(['layer-1'])
+      expect(swapped!.map((layer) => layer.isClosing)).toEqual([true])
+    })
+
+    it('marks every layer above the one being closed', async () => {
+      openOver(pageWith(), { url: '/a', entries: 1 }, { url: '/b', entries: 1 }, { url: '/c', entries: 1 })
+
+      await markClose('layer-2')
+
+      expect(swapped!.map((layer) => layer.isClosing)).toEqual([false, true, true])
+    })
+
+    it('leaves history alone until the exit has run', async () => {
+      openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+      const go = vi.spyOn(window.history, 'go')
+      const pushState = vi.spyOn(history, 'pushState')
+      const replaceState = vi.spyOn(history, 'replaceState')
+
+      await markClose()
+
+      expect(go).not.toHaveBeenCalled()
+      expect(pushState).not.toHaveBeenCalled()
+      expect(replaceState).not.toHaveBeenCalled()
+    })
+
+    it('removes the layer once the exit has run', async () => {
+      openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+      const go = vi.spyOn(window.history, 'go')
+
+      await markClose()
+      await reportExit()
+
+      expect(go).toHaveBeenCalledWith(-1)
+    })
+
+    it('waits for every layer it marked before removing any of them', async () => {
+      openOver(pageWith(), { url: '/a', entries: 1 }, { url: '/b', entries: 1 })
+      standing('/b')
+      const go = vi.spyOn(window.history, 'go')
+
+      await markClose('layer-1')
+      await layerClosing.closed('layer-2')
+
+      expect(go).not.toHaveBeenCalled()
+
+      await reportExit('layer-1')
+
+      expect(go).toHaveBeenCalledWith(-2)
+    })
+
+    it('ignores an exit reported by a layer nobody closed', async () => {
+      openOver(pageWith(), { url: '/a', entries: 1 }, { url: '/b', entries: 1 })
+      const go = vi.spyOn(window.history, 'go')
+
+      await layerClosing.closed('layer-2')
+
+      expect(go).not.toHaveBeenCalled()
+      expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual(['layer-1', 'layer-2'])
+    })
+
+    it('does not restart an exit already under way', async () => {
+      openOver(pageWith(), { url: '/a', entries: 1 }, { url: '/b', entries: 1 })
+      standing('/b')
+      const go = vi.spyOn(window.history, 'go')
+
+      await markClose('layer-1')
+      await layerClosing.closed('layer-2')
+      await markClose('layer-1')
+      await reportExit('layer-1')
+
+      expect(go).toHaveBeenCalledWith(-2)
+    })
+
+    it('keeps the exits already reported when a close widens to a lower layer', async () => {
+      openOver(pageWith(), { url: '/a', entries: 1 }, { url: '/b', entries: 1 }, { url: '/c', entries: 1 })
+      standing('/c')
+      const go = vi.spyOn(window.history, 'go')
+
+      await markClose('layer-2')
+      await layerClosing.closed('layer-3')
+      await markClose('layer-1')
+      await layerClosing.closed('layer-2')
+      await reportExit('layer-1')
+
+      expect(go).toHaveBeenCalledWith(-3)
+    })
+
+    it('cancels the pending removal when the layer is superseded', async () => {
+      openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+      const go = vi.spyOn(window.history, 'go')
+
+      await markClose()
+      await currentPage.set(
+        composeLayer(
+          currentPage.get(),
+          pageWith({ component: 'L0', layer: { key: 'L0' }, url: '/users/5/edit' }),
+          'layer-2',
+          { remount: true },
+        ),
+        { preservesBase: true },
+      )
+
+      expect(swapped!.map((layer) => layer.isClosing)).toEqual([false])
+
+      await layerClosing.closed('layer-1')
+
+      expect(go).not.toHaveBeenCalled()
+      expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual(['layer-1'])
+    })
+
+    it('keeps the pending removal when the layer is refreshed where it stands', async () => {
+      openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+      standing('/users/5/edit')
+      const go = vi.spyOn(window.history, 'go')
+
+      await markClose()
+      await currentPage.set(
+        composeLayer(
+          currentPage.get(),
+          pageWith({ component: 'L0', layer: { key: 'L0' }, url: '/users/5/edit', props: { users: ['ada'] } }),
+          'layer-2',
+        ),
+        { preservesBase: true },
+      )
+
+      expect(swapped!.map((layer) => layer.isClosing)).toEqual([true])
+      expect(currentPage.get().layers![0].props).toEqual({ users: ['ada'] })
+
+      await layerClosing.closed('layer-1')
+
+      expect(go).toHaveBeenCalledWith(-1)
+    })
+
+    it('keeps a layer being closed out of the entry a write leaves behind', async () => {
+      openOver(pageWith(), { url: '/a', entries: 1 }, { url: '/b', entries: 1 })
+      standing('/b')
+      const replaceState = vi.spyOn(window.history, 'replaceState')
+
+      await markClose('layer-2')
+      await currentPage.set({ ...currentPage.get(), props: { users: ['ada'] } }, { preservesBase: true })
+
+      expect(replaceState.mock.lastCall![0].page.layers.map((layer: LayerState) => layer.id)).toEqual(['layer-1'])
+      expect(replaceState.mock.lastCall![2]).toBe('/b')
+    })
+
+    it('keeps a layer being closed on the page it is rendered from', async () => {
+      openOver(pageWith(), { url: '/a', entries: 1 }, { url: '/b', entries: 1 })
+      standing('/b')
+
+      await markClose('layer-2')
+      await currentPage.set({ ...currentPage.get(), props: { users: ['ada'] } }, { preservesBase: true })
+
+      expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual(['layer-1', 'layer-2'])
+      expect(swapped!.map((layer) => layer.isClosing)).toEqual([false, true])
+    })
+
+    it('does nothing on a page that has no stack at all', async () => {
+      currentPage.init({
+        initialPage: pageWith(),
+        resolveComponent: (name) => ({ name }) as never,
+        swapComponent: async ({ layers }) => {
+          swapped = layers
+        },
+      })
+      const go = vi.spyOn(window.history, 'go')
+      const pushState = vi.spyOn(history, 'pushState')
+
+      await markClose()
+      await layerClosing.closed()
+
+      expect(go).not.toHaveBeenCalled()
+      expect(pushState).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('while the unwind is in flight', () => {
+    it('does not unwind a second time for a close issued inside the window', async () => {
+      openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+      standing('/users/5/edit')
+      const go = vi.spyOn(window.history, 'go')
+
+      await closeFully()
+
+      expect(go).toHaveBeenCalledTimes(1)
+
+      await closeFully()
+
+      expect(go).toHaveBeenCalledTimes(1)
+    })
+
+    it('resolves an exit only once the browser has restored what was beneath', async () => {
+      openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+      standing('/users/5/edit')
+      vi.spyOn(window.history, 'go')
+      eventHandler.init()
+
+      await markClose()
+      let resolved = false
+      const exit = layerClosing.closed().then(() => {
+        resolved = true
+      })
+      await history.processQueue()
+
+      expect(resolved).toBe(false)
+
+      listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+      await exit
+
+      expect(resolved).toBe(true)
+      expect(currentPage.get().layers).toBeUndefined()
+    })
+
+    it('does not put a standalone layer back on screen when the step back restores the entry holding it', async () => {
+      openOver(pageWith(), {
+        key: 'Users/Edit',
+        component: 'Users/Edit',
+        url: '/users/6/edit',
+        standalone: true,
+        entries: 1,
+      })
+      standing('/users/6/edit')
+      const go = vi.spyOn(window.history, 'go')
+      const pushState = vi.spyOn(history, 'pushState')
+      eventHandler.init()
+
+      const stillHoldingTheLayer = currentPage.get()
+
+      await markClose()
+      const exit = layerClosing.closed()
+      await history.processQueue()
+
+      expect(go).toHaveBeenCalledWith(-1)
+
+      listeners.get('popstate')!({ state: { page: stillHoldingTheLayer } } as PopStateEvent)
+      await exit
+
+      expect(currentPage.get().component).toBe('Users/Index')
+      expect(currentPage.get()).not.toHaveProperty('layers')
+      expect(pushState).toHaveBeenCalled()
+    })
+
+    it('holds an instant visit until the step back has restored', async () => {
+      openOver(pageWith(), { key: 'Users/Edit', component: 'Users/Edit', url: '/users/5/edit', entries: 1 })
+      standing('/users/5/edit')
+      vi.spyOn(window.history, 'go')
+      eventHandler.init()
+      http.setClient({ request: () => new Promise(() => {}) })
+
+      await closeFully()
+
+      new Router().visit('/users/9', { component: 'Users/Show' } as VisitOptions)
+      await settled()
+
+      expect(currentPage.get().component).toBe('Users/Index')
+
+      listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+
+      await vi.waitFor(() => expect(currentPage.get().component).toBe('Users/Show'))
+      expect(currentPage.get().layers).toBeUndefined()
+    })
+
+    it('holds a response that lands mid-close until the step back has restored', async () => {
+      openOver(pageWith(), { key: 'Users/Edit', component: 'Users/Edit', url: '/users/5/edit', entries: 1 })
+      standing('/users/5/edit')
+      vi.spyOn(window.history, 'go')
+      eventHandler.init()
+      let answer: ((response: unknown) => void) | null = null
+      http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+      const settled = new Promise<Page>((resolve) => {
+        const settle = () => resolve(currentPage.get())
+        new Router().visit('http://localhost/users/5', { method: 'post', onSuccess: settle, onError: settle })
+      })
+      await vi.waitFor(() => expect(answer).not.toBeNull())
+
+      await closeFully()
+
+      answer!({
+        status: 200,
+        data: pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit' } }),
+        headers: { 'x-inertia': 'true' },
+      })
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+      const page = await settled
+
+      expect(page.component).toBe('Users/Edit')
+      expect(page.layers).toBeUndefined()
+    })
+  })
+})
+
+describe('closing through the router', () => {
+  const open = () =>
+    currentPage.init({
+      initialPage: {
+        ...pageWith(),
+        layers: [
+          {
+            id: 'layer-1',
+            key: 'Users/Edit',
+            component: 'Users/Edit',
+            props: {},
+            url: '/users/5/edit',
+            base: null,
+            encryptHistory: false,
+            standalone: false,
+            entries: 1,
+            owner: null,
+          },
+        ],
+      },
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+  afterEach(() => {
+    layerClosing.settleUnwind()
+    vi.restoreAllMocks()
+  })
+
+  it('closes the topmost layer when none is named', async () => {
+    open()
+    const go = vi.spyOn(window.history, 'go')
+    const router = new Router()
+
+    router.close()
+    await settled()
+    router.closed()
+    await history.processQueue()
+
+    expect(go).toHaveBeenCalledWith(-1)
+  })
+
+  it('closes the layer a shell names', async () => {
+    open()
+    const go = vi.spyOn(window.history, 'go')
+    const router = new Router()
+
+    router.close('layer-1')
+    await settled()
+    router.closed('layer-1')
+    await history.processQueue()
+
+    expect(go).toHaveBeenCalledWith(-1)
+  })
+})
+
+describe('the layer registry', () => {
+  const handle = {
+    id: 'layer-1',
+    on: () => {},
+    onClose: () => {},
+    close: async () => {},
+    emit: () => {},
+    deliver: () => {},
+    fireOnClose: () => {},
+  }
+
+  const layerWith = (overrides: Partial<LayerState>, index: number): LayerState => ({
+    id: `layer-${index + 1}`,
+    key: `L${index}`,
+    component: `L${index}`,
+    props: {},
+    url: null,
+    base: null,
+    encryptHistory: false,
+    standalone: false,
+    entries: 0,
+    owner: null,
+    deferredProps: {},
+    rescuedProps: [],
+    flash: {},
+    onceProps: {},
+    ...overrides,
+  })
+
+  const openOver = (base: Page, ...layers: Partial<LayerState>[]) =>
+    currentPage.init({
+      initialPage: { ...base, layers: layers.map(layerWith) },
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+  const standing = (address: string) => {
+    Object.assign(window, { location: new URL(`http://localhost${address}`) })
+  }
+
+  afterEach(() => {
+    registryClose('layer-1')
+    registryClose('layer-2')
+    layerClosing.settleUnwind()
+    standing('/users')
+    vi.restoreAllMocks()
+  })
+
+  it('keeps no handle when there is no browser, so a server render never shares one', () => {
+    const browser = globalThis.window
+
+    try {
+      // @ts-expect-error the render has no window to read
+      delete globalThis.window
+
+      const first = router.layerHandle('rendered-layer')
+      const second = router.layerHandle('rendered-layer')
+
+      expect(second).not.toBe(first)
+    } finally {
+      globalThis.window = browser
+    }
+
+    expect(registryHas('rendered-layer')).toBe(false)
+  })
+
+  it('hands back the handle written for a layer id', () => {
+    registryWrite('layer-1', handle)
+
+    expect(registryRead('layer-1')).toBe(handle)
+    expect(registryHas('layer-1')).toBe(true)
+  })
+
+  it('releases the handle of a layer once its removal has settled', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+    registryWrite('layer-1', handle)
+
+    await marked()
+    layerClosing.closed('layer-1')
+    await history.processQueue()
+
+    expect(registryHas('layer-1')).toBe(true)
+
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+    await vi.waitFor(() => expect(registryHas('layer-1')).toBe(false))
+  })
+
+  it('releases the handle of a layer whose close is dropped', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+    registryWrite('layer-1', handle)
+
+    await marked()
+    await currentPage.set(pageWith({ component: 'Users/Show', url: '/users/5' }))
+
+    expect(registryHas('layer-1')).toBe(false)
+  })
+
+  it('keeps the handle of a layer that is superseded under its own id', async () => {
+    openOver(pageWith(), { url: '/users/5/edit', entries: 1 })
+    registryWrite('layer-1', handle)
+
+    await marked()
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({ component: 'L0', layer: { key: 'L0' }, url: '/users/5/edit' }),
+        'layer-2',
+      ),
+      { preservesBase: true },
+    )
+
+    expect(registryHas('layer-1')).toBe(true)
+  })
+})
diff --git a/packages/core/tests/layer-history.test.ts b/packages/core/tests/layer-history.test.ts
new file mode 100644
index 000000000..5afa1b36c
--- /dev/null
+++ b/packages/core/tests/layer-history.test.ts
@@ -0,0 +1,564 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { historySessionStorageKeys } from '../src/encryption'
+import { eventHandler } from '../src/eventHandler'
+import { history } from '../src/history'
+import { http } from '../src/http'
+import { InitialVisit } from '../src/initialVisit'
+import { composeLayer, encryptsHistory } from '../src/layers'
+import { navigationType } from '../src/navigationType'
+import { page as currentPage } from '../src/page'
+import { prefetchedRequests } from '../src/prefetched'
+import { Router } from '../src/router'
+import { Page } from '../src/types'
+import { listeners } from './support/browser'
+import { editLayer, hold, pageWith, respondWith } from './support/layers'
+
+describe('the history entry a layer open leaves behind', () => {
+  const initWith = (page: Page) =>
+    currentPage.init({
+      initialPage: page,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('is pushed, so the entry the base sits on survives', async () => {
+    initWith(pageWith())
+    const pushState = vi.spyOn(history, 'pushState')
+    const replaceState = vi.spyOn(history, 'replaceState')
+
+    const layer = pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit' } })
+
+    await currentPage.set(composeLayer(currentPage.get(), layer, 'layer-1'), { preservesBase: true })
+
+    expect(pushState).toHaveBeenCalled()
+    expect(replaceState).not.toHaveBeenCalled()
+  })
+
+  it('is still replaced when a page lands where the user already is', async () => {
+    initWith(pageWith())
+    const pushState = vi.spyOn(history, 'pushState')
+    const replaceState = vi.spyOn(history, 'replaceState')
+
+    await currentPage.set(pageWith({ props: { users: [{ id: 1 }] } }))
+
+    expect(replaceState).toHaveBeenCalled()
+    expect(pushState).not.toHaveBeenCalled()
+  })
+
+  it("carries the layer's address, so the address bar shows the layer", async () => {
+    initWith(pageWith())
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    const layer = pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit' } })
+
+    await currentPage.set(composeLayer(currentPage.get(), layer, 'layer-1'), { preservesBase: true })
+
+    expect(pushState).toHaveBeenCalledWith(
+      expect.objectContaining({
+        page: expect.objectContaining({
+          url: '/users',
+          layers: [expect.objectContaining({ id: 'layer-1', url: '/users/5/edit' })],
+        }),
+      }),
+      '',
+      '/users/5/edit',
+    )
+  })
+
+  it("carries the page's own url when there are no layers", async () => {
+    initWith(pageWith())
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await currentPage.set(pageWith({ component: 'Users/Show', url: '/users/5' }))
+
+    expect(pushState).toHaveBeenCalledWith(expect.anything(), '', '/users/5')
+  })
+
+  it("serialises a layer's own fields onto the entry, and nothing more", async () => {
+    initWith(pageWith())
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    const layer = pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit' } })
+
+    await currentPage.set(composeLayer(currentPage.get(), layer, 'layer-1'), { preservesBase: true })
+
+    const [state] = pushState.mock.lastCall as unknown as [{ page: Page }]
+
+    expect(Object.keys(state.page.layers![0]).sort()).toEqual([
+      'base',
+      'component',
+      'deferredProps',
+      'encryptHistory',
+      'entries',
+      'flash',
+      'id',
+      'initialDeferredProps',
+      'key',
+      'onceProps',
+      'owner',
+      'props',
+      'renderKey',
+      'rescuedProps',
+      'scrollProps',
+      'standalone',
+      'url',
+    ])
+  })
+
+  it('counts the entry it pushed against the layer that owns the address', async () => {
+    initWith(pageWith())
+
+    await currentPage.set(composeLayer(currentPage.get(), editLayer(), 'layer-1'), { preservesBase: true })
+
+    expect(currentPage.get().layers![0].entries).toBe(1)
+  })
+
+  it('gives the count back when the browser refuses the entry', async () => {
+    initWith(pageWith())
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    vi.spyOn(window.history, 'pushState').mockImplementation(() => {
+      const refusal = new Error('Attempt to use history.pushState() more than 100 times per 10 seconds')
+      refusal.name = 'SecurityError'
+      throw refusal
+    })
+
+    await currentPage.set(composeLayer(currentPage.get(), editLayer(), 'layer-1'), { preservesBase: true })
+
+    expect(currentPage.get().layers![0].entries).toBe(0)
+  })
+
+  it("keeps the layer's address when the page beneath it is rewritten in place", async () => {
+    const layer = pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit' } })
+    initWith(composeLayer(pageWith(), layer, 'layer-1'))
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    await new Promise<void>((resolve) => {
+      new Router().replace({ props: { users: [{ id: 1 }] }, onSuccess: () => resolve() })
+    })
+
+    expect(replaceState).toHaveBeenCalledWith(expect.anything(), '', '/users/5/edit')
+  })
+
+  it('leaves the flash off the entry a close rewrites in place', async () => {
+    await hold(pageWith({ flash: { message: 'Saved.' } }))
+    respondWith(pageWith({ flash: { message: 'Saved.' } }))
+
+    await currentPage.set(composeLayer(currentPage.get(), editLayer(), 'layer-1'), {
+      preservesBase: true,
+      replace: true,
+    })
+
+    const replaceState = vi.spyOn(history, 'replaceState')
+    const router = new Router()
+    let closed = false
+    router.layerHandle('layer-1').onClose(() => (closed = true))
+
+    await router.close('layer-1')
+
+    await vi.waitFor(() => expect(closed).toBe(true))
+
+    expect(currentPage.get().flash).toEqual({ message: 'Saved.' })
+    expect(replaceState.mock.calls.map(([page]) => page.flash)).not.toContainEqual({ message: 'Saved.' })
+  })
+
+  it("rewrites in place with the page's own url when there are no layers", async () => {
+    initWith(pageWith())
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    await new Promise<void>((resolve) => {
+      new Router().replace({ props: { users: [{ id: 1 }] }, onSuccess: () => resolve() })
+    })
+
+    expect(replaceState).toHaveBeenCalledWith(expect.anything(), '', '/users')
+  })
+})
+
+describe('a document loaded onto a back_forward entry holding a stack', () => {
+  afterEach(() => {
+    Object.assign(window, { location: new URL('http://localhost/users') })
+    vi.restoreAllMocks()
+  })
+
+  it('rewrites the entry it was handed rather than pushing another', async () => {
+    const cold = composeLayer(pageWith({ component: '', url: '/users' }), editLayer(), 'layer-1', {
+      standalone: true,
+    })
+
+    currentPage.init({
+      initialPage: cold,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+    Object.assign(window, { location: new URL('http://localhost/users/5/edit') })
+
+    const restored = composeLayer(pageWith(), editLayer(), 'layer-7') as Page
+    const pushState = vi.spyOn(window.history, 'pushState')
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    vi.spyOn(history, 'decrypt').mockResolvedValue(restored)
+    vi.spyOn(history, 'browserHasHistoryEntry').mockReturnValue(true)
+    vi.spyOn(navigationType, 'isBackForward').mockReturnValue(true)
+
+    InitialVisit.handle()
+
+    await new Promise((resolve) => setTimeout(resolve))
+    await history.processQueue()
+
+    expect(pushState).not.toHaveBeenCalled()
+    expect(replaceState).toHaveBeenCalled()
+  })
+})
+
+describe('the base beneath a stack a restore moves', () => {
+  const swaps: { component: string; preserveState: boolean }[] = []
+
+  const holdWatching = async (page: Page): Promise<void> => {
+    currentPage.init({
+      initialPage: page,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async ({ component, preserveState }) => {
+        swaps.push({ component: (component as { name: string } | undefined)?.name ?? '', preserveState })
+      },
+    })
+
+    await currentPage.setQuietly(page)
+  }
+
+  const step = (url: string, entries: number): Page => {
+    const page = composeLayer(pageWith(), editLayer({ url }), 'layer-1')
+    page.layers![0].entries = entries
+
+    return page
+  }
+
+  const restore = async (page: Page): Promise<void> => {
+    swaps.length = 0
+    listeners.get('popstate')!({ state: { page } } as PopStateEvent)
+
+    await new Promise((resolve) => setTimeout(resolve))
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('is left alone when a back step moves within the layer above it', async () => {
+    await holdWatching(step('/users/5/edit/two', 2))
+    eventHandler.init()
+
+    await restore(step('/users/5/edit/one', 1))
+
+    expect(swaps).toEqual([{ component: 'Users/Index', preserveState: true }])
+  })
+
+  it('is remade when the restore lands on another page altogether', async () => {
+    await holdWatching(step('/users/5/edit/two', 2))
+    eventHandler.init()
+
+    await restore(pageWith({ component: 'Teams/Index', url: '/teams' }))
+
+    expect(swaps).toEqual([{ component: 'Teams/Index', preserveState: false }])
+  })
+})
+
+describe('the hash on an entry the browser wrote', () => {
+  const initWith = (page: Page) =>
+    currentPage.init({
+      initialPage: page,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+  const editLayer = pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit' } })
+  const notesLayer = pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } })
+
+  const walkOnto = async (address: string): Promise<void> => {
+    window.location = new URL(address) as unknown as Location
+    eventHandler.init()
+    listeners.get('popstate')!({ state: null } as PopStateEvent)
+
+    await history.processQueue()
+  }
+
+  afterEach(() => {
+    window.location = new URL('http://localhost/users') as unknown as Location
+    vi.restoreAllMocks()
+  })
+
+  it("writes it onto the page's own url when there are no layers", async () => {
+    initWith(pageWith())
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    await walkOnto('http://localhost/users#comments')
+
+    expect(replaceState).toHaveBeenCalledWith(
+      expect.objectContaining({ page: expect.objectContaining({ url: 'http://localhost/users#comments' }) }),
+      '',
+      'http://localhost/users#comments',
+    )
+  })
+
+  it('writes it onto the layer that owns the address, leaving the base beneath it alone', async () => {
+    initWith(composeLayer(pageWith(), editLayer, 'layer-1'))
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    await walkOnto('http://localhost/users/5/edit#comments')
+
+    expect(replaceState).toHaveBeenCalledWith(
+      expect.objectContaining({
+        page: expect.objectContaining({
+          url: '/users',
+          layers: [expect.objectContaining({ url: 'http://localhost/users/5/edit#comments' })],
+        }),
+      }),
+      '',
+      'http://localhost/users/5/edit#comments',
+    )
+  })
+
+  it('writes it onto the layer beneath one with no url of its own', async () => {
+    const routed = composeLayer(pageWith(), editLayer, 'layer-1')
+    initWith(composeLayer(routed, notesLayer, 'layer-2', { url: null }))
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    await walkOnto('http://localhost/users/5/edit#comments')
+
+    expect(replaceState).toHaveBeenCalledWith(
+      expect.objectContaining({
+        page: expect.objectContaining({
+          url: '/users',
+          layers: [
+            expect.objectContaining({ url: 'http://localhost/users/5/edit#comments' }),
+            expect.objectContaining({ url: null }),
+          ],
+        }),
+      }),
+      '',
+      'http://localhost/users/5/edit#comments',
+    )
+  })
+})
+
+describe('encrypting the history entry a stack leaves behind', () => {
+  const initWith = (page: Page) =>
+    currentPage.init({
+      initialPage: page,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+  const entryWritten = async (page: Page, options: Parameters<typeof currentPage.set>[1] = {}) => {
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await currentPage.set(page, options)
+
+    return pushState.mock.lastCall![0].page
+  }
+
+  const openedOver = (base: Page, layer: Page) => {
+    initWith(base)
+
+    return entryWritten(composeLayer(currentPage.get(), layer, 'layer-1'), { preservesBase: true })
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('encrypts the entry when only the layer asks for it', async () => {
+    expect(await openedOver(pageWith(), editLayer({ encryptHistory: true }))).toBeInstanceOf(ArrayBuffer)
+  })
+
+  it('encrypts the entry when only the base asks for it', async () => {
+    expect(await openedOver(pageWith({ encryptHistory: true }), editLayer())).toBeInstanceOf(ArrayBuffer)
+  })
+
+  it('leaves the entry readable when neither asks for it', async () => {
+    const entry = await openedOver(pageWith(), editLayer({ props: { user: { id: 5 } } }))
+
+    expect(entry).not.toBeInstanceOf(ArrayBuffer)
+    expect(entry.layers).toEqual([expect.objectContaining({ props: { user: { id: 5 } } })])
+  })
+
+  it('restores the whole stack from an entry a layer had encrypted', async () => {
+    const entry = await openedOver(pageWith(), editLayer({ encryptHistory: true, props: { user: { id: 5 } } }))
+
+    expect(entry).toBeInstanceOf(ArrayBuffer)
+
+    const restored = await history.decrypt(entry)
+
+    expect(restored.url).toBe('/users')
+    expect(restored.layers).toEqual([
+      expect.objectContaining({ key: 'Users/Edit', props: { user: { id: 5 } }, encryptHistory: true }),
+    ])
+    expect(encryptsHistory(restored)).toBe(true)
+  })
+
+  it('still encrypts a page with no layers that asks for it', async () => {
+    initWith(pageWith())
+
+    const entry = await entryWritten(pageWith({ component: 'Users/Show', url: '/users/5', encryptHistory: true }))
+
+    expect(entry).toBeInstanceOf(ArrayBuffer)
+  })
+
+  it('leaves a page with no layers that does not ask for it readable', async () => {
+    initWith(pageWith())
+
+    const entry = await entryWritten(pageWith({ component: 'Users/Show', url: '/users/5' }))
+
+    expect(entry).not.toBeInstanceOf(ArrayBuffer)
+    expect(entry.component).toBe('Users/Show')
+  })
+})
+
+describe('clearing the history keys from a stack', () => {
+  const initWith = (page: Page) =>
+    currentPage.init({
+      initialPage: page,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+  const seedKeys = () => {
+    window.sessionStorage.setItem(historySessionStorageKeys.key, '[1,2,3]')
+    window.sessionStorage.setItem(historySessionStorageKeys.iv, '[4,5,6]')
+  }
+
+  const keysHeld = () => window.sessionStorage.getItem(historySessionStorageKeys.key) !== null
+
+  const openOver = (base: Page, layer: Page, id = 'layer-1') =>
+    currentPage.set(composeLayer(base, layer, id), { preservesBase: true })
+
+  it('discards them when the layer asks to clear history', async () => {
+    initWith(pageWith())
+    seedKeys()
+
+    await openOver(currentPage.get(), editLayer({ clearHistory: true }))
+
+    expect(keysHeld()).toBe(false)
+  })
+
+  it('keeps them when neither the base nor the layer asks', async () => {
+    initWith(pageWith())
+    seedKeys()
+
+    await openOver(currentPage.get(), editLayer())
+
+    expect(keysHeld()).toBe(true)
+  })
+
+  it('does not discard them again when a second layer opens over one that asked', async () => {
+    initWith(pageWith())
+    await openOver(currentPage.get(), editLayer({ clearHistory: true }))
+    seedKeys()
+
+    await openOver(
+      currentPage.get(),
+      pageWith({ component: 'Teams/Show', url: '/teams/9', layer: { key: 'Teams/Show' } }),
+      'layer-2',
+    )
+
+    expect(keysHeld()).toBe(true)
+  })
+
+  it('does not discard them again when the page beneath a layer that asked is rewritten', async () => {
+    initWith(pageWith())
+    await openOver(currentPage.get(), editLayer({ clearHistory: true }))
+    seedKeys()
+
+    await new Promise<void>((resolve) => {
+      new Router().replace({ props: { users: [{ id: 1 }] }, onSuccess: () => resolve() })
+    })
+
+    expect(keysHeld()).toBe(true)
+  })
+})
+
+describe('the address the events report', () => {
+  const initWith = (page: Page) =>
+    currentPage.init({
+      initialPage: page,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+  const recordEvents = (): CustomEvent[] => {
+    const fired: CustomEvent[] = []
+
+    vi.spyOn(document, 'dispatchEvent').mockImplementation((event) => {
+      fired.push(event as CustomEvent)
+      return true
+    })
+
+    return fired
+  }
+
+  const detailOf = (fired: CustomEvent[], name: string) =>
+    fired.findLast((event) => event.type === `inertia:${name}`)!.detail
+
+  const visitAnswering = (response: Page): Promise<void> => {
+    http.setClient({
+      request: async () => ({ status: 200, data: response as unknown as string, headers: { 'x-inertia': 'true' } }),
+    })
+
+    return new Promise((resolve) => {
+      new Router().visit(`http://localhost${response.url}`, { onSuccess: () => resolve() })
+    })
+  }
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it("gives inertia:navigate the layer's address, while the page it carries keeps its own url", async () => {
+    initWith(pageWith())
+    const fired = recordEvents()
+
+    const layer = pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit' } })
+
+    await currentPage.set(composeLayer(currentPage.get(), layer, 'layer-1'), { preservesBase: true })
+
+    expect(detailOf(fired, 'navigate').url).toBe('/users/5/edit')
+    expect(detailOf(fired, 'navigate').page.url).toBe('/users')
+  })
+
+  it("gives inertia:navigate the page's own url when there are no layers", async () => {
+    initWith(pageWith())
+    const fired = recordEvents()
+
+    await currentPage.set(pageWith({ component: 'Users/Show', url: '/users/5' }))
+
+    expect(detailOf(fired, 'navigate').url).toBe('/users/5')
+  })
+
+  it("gives inertia:success the layer's address, while the page it carries keeps its own url", async () => {
+    initWith(pageWith())
+    await currentPage.setQuietly(pageWith())
+    const fired = recordEvents()
+
+    await visitAnswering(pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit' } }))
+
+    expect(detailOf(fired, 'success').url).toBe('/users/5/edit')
+    expect(detailOf(fired, 'success').page.url).toBe('/users')
+  })
+
+  it("gives inertia:success the page's own url when there are no layers", async () => {
+    initWith(pageWith())
+    await currentPage.setQuietly(pageWith())
+    const fired = recordEvents()
+
+    await visitAnswering(pageWith({ component: 'Users/Show', url: '/users/5' }))
+
+    expect(detailOf(fired, 'success').url).toBe('/users/5')
+  })
+})
diff --git a/packages/core/tests/layer-responses.test.ts b/packages/core/tests/layer-responses.test.ts
new file mode 100644
index 000000000..e5f28b9c1
--- /dev/null
+++ b/packages/core/tests/layer-responses.test.ts
@@ -0,0 +1,2712 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { router } from '../src'
+import { eventHandler } from '../src/eventHandler'
+import { history } from '../src/history'
+import { http } from '../src/http'
+import { layerClosing } from '../src/layers'
+import {
+  addressOf,
+  closeLayer,
+  composeColdLayer,
+  composeLayer,
+  composeLocalLayer,
+  entriesToUnwind,
+  isLayerResponse,
+  layerPageOf,
+  nextLayerId,
+} from '../src/layers'
+import { page as currentPage } from '../src/page'
+import { prefetchedRequests } from '../src/prefetched'
+import { RequestParams } from '../src/requestParams'
+import { Response } from '../src/response'
+import { Router } from '../src/router'
+import { Scroll } from '../src/scroll'
+import {
+  ActiveVisit,
+  ClientSideVisitOptions,
+  Errors,
+  HttpResponse,
+  LayerState,
+  Page,
+  PageHandler,
+  ResolvedLayer,
+  VisitOptions,
+} from '../src/types'
+import { listeners } from './support/browser'
+import { editLayer, hold, holding, pageWith, respondWith } from './support/layers'
+
+describe('resolving a page with layers', () => {
+  const swapArgsFor = async (page: Page): Promise<Parameters<PageHandler>[0]> => {
+    const swapped: Parameters<PageHandler>[0][] = []
+
+    currentPage.init({
+      initialPage: pageWith(),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async (args) => {
+        swapped.push(args)
+      },
+    })
+
+    await currentPage.setQuietly(page)
+
+    return swapped.at(-1)!
+  }
+
+  it('resolves every layer and hands them to the adapter in stack order', async () => {
+    const first = composeLayer(
+      pageWith(),
+      pageWith({ component: 'Users/Edit', layer: { key: 'Users/Edit' } }),
+      'layer-1',
+    )
+    const composed = composeLayer(first, pageWith({ component: 'Teams/Show', layer: { key: 'Teams/Show' } }), 'layer-2')
+
+    const args = await swapArgsFor(composed)
+
+    expect(args.component).toEqual({ name: 'Users/Index' })
+    expect(args.layers).toEqual([
+      expect.objectContaining({ id: 'layer-1', component: { name: 'Users/Edit' } }),
+      expect.objectContaining({ id: 'layer-2', component: { name: 'Teams/Show' } }),
+    ])
+  })
+
+  it('keeps the rest of the layer state beside the resolved component', async () => {
+    const response = pageWith({
+      component: 'Users/Edit',
+      props: { user: { id: 5 } },
+      url: '/users/5/edit',
+      layer: { key: 'Users/Edit', base: '/users' },
+    })
+
+    const composed = composeLayer(pageWith(), response, 'layer-1')
+    const args = await swapArgsFor(composed)
+
+    expect(args.layers).toEqual([
+      {
+        ...composed.layers![0],
+        component: { name: 'Users/Edit' },
+        isClosing: false,
+        page: layerPageOf(composed, composed.layers![0]),
+      },
+    ])
+  })
+
+  it('passes no layers for an ordinary page', async () => {
+    const args = await swapArgsFor(pageWith({ component: 'Users/Show' }))
+
+    expect(args.component).toEqual({ name: 'Users/Show' })
+    expect(args.layers).toBeUndefined()
+  })
+})
+
+describe('an ordinary response', () => {
+  it('is passed through untouched, with no layers key', () => {
+    const response = pageWith({ component: 'Users/Show', url: '/users/5' })
+
+    expect(isLayerResponse(response)).toBe(false)
+    expect(response).not.toHaveProperty('layers')
+  })
+})
+
+describe('base generation', () => {
+  const initWith = (page: Page) =>
+    currentPage.init({
+      initialPage: page,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+  const set = (page: Page, options?: Parameters<typeof currentPage.set>[1]) => currentPage.set(page, options)
+
+  it('changes when a page response replaces the base', async () => {
+    initWith(pageWith())
+    const before = currentPage.generation()
+
+    await set(pageWith({ component: 'Users/Show', url: '/users/5' }))
+
+    expect(currentPage.generation()).not.toBe(before)
+  })
+
+  it('survives a layer composed onto the base', async () => {
+    initWith(pageWith())
+    const before = currentPage.generation()
+
+    const layer = pageWith({ component: 'Users/Edit', layer: { key: 'Users/Edit' } })
+
+    await set(composeLayer(currentPage.get(), layer, 'layer-1'), { preservesBase: true })
+
+    expect(currentPage.generation()).toBe(before)
+  })
+
+  it('changes when a navigation lands on the very same page', async () => {
+    initWith(pageWith())
+    const before = currentPage.generation()
+
+    await set(pageWith())
+
+    expect(currentPage.generation()).not.toBe(before)
+  })
+
+  it('survives a partial reload of the same page', async () => {
+    initWith(pageWith())
+    const before = currentPage.generation()
+
+    await set(pageWith({ props: { users: [{ id: 1 }] } }), { preservesBase: true })
+
+    expect(currentPage.generation()).toBe(before)
+  })
+
+  it('survives a client visit that only rewrites the url', () => {
+    initWith(pageWith())
+    const before = currentPage.generation()
+
+    new Router().replace({ url: 'http://localhost/users?page=2' })
+
+    expect(currentPage.generation()).toBe(before)
+  })
+
+  it('changes when a client visit declares another component', async () => {
+    initWith(pageWith())
+    const before = currentPage.generation()
+
+    new Router().push({ component: 'Users/Create', url: 'http://localhost/users/create' })
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(currentPage.generation()).not.toBe(before)
+  })
+
+  it('changes when a client visit pushes another page state', async () => {
+    initWith(pageWith())
+    const before = currentPage.generation()
+
+    new Router().push({ url: 'http://localhost/users/2', props: { users: [{ id: 2 }] } })
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(currentPage.generation()).not.toBe(before)
+  })
+
+  it('survives the prop helpers rewriting the page in place', () => {
+    initWith(pageWith())
+    const before = currentPage.generation()
+    const router = new Router()
+
+    router.replaceProp('users', [{ id: 1 }])
+    expect(currentPage.generation()).toBe(before)
+
+    router.appendToProp('users', { id: 2 })
+    expect(currentPage.generation()).toBe(before)
+
+    router.prependToProp('users', { id: 0 })
+    expect(currentPage.generation()).toBe(before)
+  })
+
+  it('changes when history restores a page', async () => {
+    initWith(pageWith())
+    const before = currentPage.generation()
+
+    await currentPage.setQuietly(pageWith({ component: 'Users/Show', url: '/users/5' }))
+
+    expect(currentPage.generation()).not.toBe(before)
+  })
+
+  it('survives a prop refresh of the base', async () => {
+    initWith(pageWith())
+    const before = currentPage.generation()
+
+    await currentPage.setPropsQuietly({ ...currentPage.get().props, users: [{ id: 1 }] })
+
+    expect(currentPage.generation()).toBe(before)
+  })
+})
+
+describe('base id', () => {
+  const initWith = (page: Page) =>
+    currentPage.init({
+      initialPage: page,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+  const set = (page: Page, options?: Parameters<typeof currentPage.set>[1]) => currentPage.set(page, options)
+
+  it('is minted for the base it is given', () => {
+    initWith(pageWith())
+
+    expect(currentPage.id()).toBeTruthy()
+  })
+
+  it('survives a layer composed onto the base', async () => {
+    initWith(pageWith())
+    const before = currentPage.id()
+
+    const layer = pageWith({ component: 'Users/Edit', layer: { key: 'Users/Edit' } })
+
+    await set(composeLayer(currentPage.get(), layer, 'layer-1'), { preservesBase: true })
+
+    expect(currentPage.id()).toBe(before)
+  })
+
+  it('survives a partial reload of the same page', async () => {
+    initWith(pageWith())
+    const before = currentPage.id()
+
+    await set(pageWith({ props: { users: [{ id: 1 }] } }), { preservesBase: true })
+
+    expect(currentPage.id()).toBe(before)
+  })
+
+  it('survives a plain reload of the same page', async () => {
+    initWith(pageWith())
+    const before = currentPage.id()
+
+    await set(pageWith({ props: { users: [{ id: 9 }] } }), { preservesBase: true })
+
+    expect(currentPage.id()).toBe(before)
+  })
+
+  it('changes when a navigation replaces the base', async () => {
+    initWith(pageWith())
+    const before = currentPage.id()
+
+    await set(pageWith({ component: 'Users/Show', url: '/users/5' }))
+
+    expect(currentPage.id()).not.toBe(before)
+  })
+
+  it('survives a preserved visit to another url of the same component', async () => {
+    initWith(pageWith())
+    const before = currentPage.id()
+
+    await set(pageWith({ url: '/users?filter=x' }), { preserveState: true })
+
+    expect(currentPage.id()).toBe(before)
+  })
+
+  it('changes when a preserved visit installs another component', async () => {
+    initWith(pageWith())
+    const before = currentPage.id()
+
+    await set(pageWith({ component: 'Users/Show', url: '/users/5' }), { preserveState: true })
+
+    expect(currentPage.id()).not.toBe(before)
+  })
+
+  it('survives a partial that moves the base while a layer stands on it', async () => {
+    initWith(pageWith())
+    const before = currentPage.id()
+
+    await set(composeLayer(currentPage.get(), editLayer(), 'layer-1'), { preservesBase: true })
+    await set(composeLayer(pageWith({ url: '/users?search=x' }), editLayer(), 'layer-1'))
+
+    expect(currentPage.id()).toBe(before)
+  })
+
+  it('never changes on a history restore', async () => {
+    initWith(pageWith())
+    const before = currentPage.id()
+
+    await currentPage.setQuietly(pageWith({ component: 'Users/Show', url: '/users/5' }))
+
+    expect(currentPage.id()).toBe(before)
+  })
+})
+
+describe('an open stack across a client visit', () => {
+  const stacked = (): Page =>
+    composeLayer(pageWith(), pageWith({ component: 'Users/Edit', layer: { key: 'Users/Edit' } }), 'layer-1')
+
+  const clientVisit = (params: ClientSideVisitOptions, { replace = false } = {}): Promise<Page> => {
+    currentPage.init({
+      initialPage: stacked(),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+    return new Promise((resolve) => {
+      const router = new Router()
+      const options = { ...params, onSuccess: () => resolve(currentPage.get()) }
+
+      if (replace) {
+        router.replace(options)
+      } else {
+        router.push(options)
+      }
+    })
+  }
+
+  it('leaves the stack behind when a client visit installs another page', async () => {
+    const page = await clientVisit({ component: 'Reports/Index', url: 'http://localhost/reports' })
+
+    expect(page.component).toBe('Reports/Index')
+    expect(page.layers).toBeUndefined()
+  })
+
+  it('leaves the stack behind when a client visit pushes another state of the same component', async () => {
+    const page = await clientVisit({ url: 'http://localhost/users/2', props: { users: [{ id: 2 }] } })
+
+    expect(page.layers).toBeUndefined()
+  })
+
+  it('keeps the stack when a client visit only rewrites the page beneath it', async () => {
+    const page = await clientVisit({ url: 'http://localhost/users?page=2' }, { replace: true })
+
+    expect(page.layers!.map((layer) => layer.key)).toEqual(['Users/Edit'])
+  })
+
+  it('keeps the stack when a prop helper rewrites the page beneath it', async () => {
+    const page = await clientVisit({ props: { users: [{ id: 1 }] } }, { replace: true })
+
+    expect(page.props).toEqual({ users: [{ id: 1 }] })
+    expect(page.layers!.map((layer) => layer.key)).toEqual(['Users/Edit'])
+  })
+})
+
+describe('a client visit aimed at a layer', () => {
+  const stacked = (): Page =>
+    composeLayer(
+      pageWith(),
+      pageWith({ component: 'Users/Edit', layer: { key: 'Users/Edit' }, props: { user: { id: 5 }, todos: [1] } }),
+      'layer-1',
+    )
+
+  const hold = (): Router => {
+    currentPage.init({
+      initialPage: stacked(),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+    return new Router()
+  }
+
+  const layerVisit = (params: ClientSideVisitOptions, { replace = false } = {}): Promise<Page> => {
+    const router = hold()
+
+    return new Promise((resolve) => {
+      const options = { ...params, layerId: 'layer-1', onSuccess: () => resolve(currentPage.get()) }
+
+      if (replace) {
+        router.replace(options)
+      } else {
+        router.push(options)
+      }
+    })
+  }
+
+  it("replaceProp changes the layer's own props, not the page's", async () => {
+    const router = hold()
+
+    const page = await new Promise<Page>((resolve) => {
+      router.replaceProp('todos', [7], { layerId: 'layer-1', onSuccess: () => resolve(currentPage.get()) })
+    })
+
+    expect(page.layers![0].props).toEqual({ user: { id: 5 }, todos: [7] })
+    expect(page.props).toEqual({ users: [] })
+  })
+
+  it('leaves the scroll of the page beneath alone', async () => {
+    const reset = vi.spyOn(Scroll, 'reset')
+
+    await layerVisit({ props: { user: { id: 9 } } })
+
+    expect(reset).not.toHaveBeenCalled()
+  })
+
+  it('still resets the scroll when it is aimed at the page', async () => {
+    const router = hold()
+    const reset = vi.spyOn(Scroll, 'reset')
+
+    await new Promise((resolve) => router.push({ props: { users: [] }, onSuccess: resolve }))
+
+    expect(reset).toHaveBeenCalled()
+  })
+
+  it('a push keeps the stack and the base generation', async () => {
+    const generation = currentPage.generation()
+    const page = await layerVisit({
+      url: '/users/5/edit?step=2',
+      props: { user: { id: 5 }, step: 2 },
+    })
+
+    expect(page.layers!.map((layer) => layer.key)).toEqual(['Users/Edit'])
+    expect(currentPage.generation()).toBe(generation)
+    expect(page.layers![0].url).toBe('/users/5/edit?step=2')
+    expect(page.layers![0].props).toEqual(expect.objectContaining({ step: 2 }))
+    expect(page.props).toEqual({ users: [] })
+  })
+
+  it('a replace keeps the stack and the base generation', async () => {
+    const generation = currentPage.generation()
+    const page = await layerVisit({ props: { user: { id: 9 } } }, { replace: true })
+
+    expect(page.layers!.map((layer) => layer.key)).toEqual(['Users/Edit'])
+    expect(currentPage.generation()).toBe(generation)
+    expect(page.layers![0].props).toEqual(expect.objectContaining({ user: { id: 9 } }))
+    expect(page.props).toEqual({ users: [] })
+  })
+
+  it('does not write a stale layer id onto the page it installs', async () => {
+    const router = hold()
+
+    const page = await new Promise<Page>((resolve) => {
+      router.push({
+        url: '/reports',
+        props: { users: [{ id: 9 }] },
+        layerId: 'stale',
+        onSuccess: () => resolve(currentPage.get()),
+      })
+    })
+
+    expect(page.component).toBe('Users/Index')
+    expect(page).not.toHaveProperty('layerId')
+  })
+
+  it('carries the layer errors it brings into onError', async () => {
+    const router = hold()
+    let announcedErrors: unknown = undefined
+    let success = false
+
+    await new Promise<void>((resolve) => {
+      router.replace({
+        layerId: 'layer-1',
+        props: (layerProps) => ({ ...layerProps, errors: { note: 'The note is required.' } }),
+        onError: (errors) => {
+          announcedErrors = errors
+          resolve()
+        },
+        onSuccess: () => {
+          success = true
+          resolve()
+        },
+      })
+    })
+
+    expect(success).toBe(false)
+    expect(announcedErrors).toEqual({ note: 'The note is required.' })
+  })
+
+  it("hands the props function the layer's onceProps", async () => {
+    currentPage.init({
+      initialPage: composeLayer(
+        pageWith(),
+        pageWith({
+          component: 'Users/Edit',
+          layer: { key: 'Users/Edit' },
+          props: { user: { id: 5 }, layerProp: 'layer value' },
+          onceProps: { layerKey: { prop: 'layerProp' } },
+        }),
+        'layer-1',
+      ),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+    const router = new Router()
+    let receivedOnce: unknown = undefined
+
+    await new Promise<void>((resolve) => {
+      router.replace({
+        layerId: 'layer-1',
+        props: (layerProps, onceProps) => {
+          receivedOnce = onceProps
+          return layerProps
+        },
+        onSuccess: () => resolve(),
+      })
+    })
+
+    expect(receivedOnce).toEqual({ layerProp: 'layer value' })
+  })
+
+  it("does not fall back to the page's errors", async () => {
+    currentPage.init({
+      initialPage: composeLayer(
+        pageWith({ props: { users: [], errors: { name: 'The name is required.' } } }),
+        pageWith({ component: 'Users/Edit', layer: { key: 'Users/Edit' }, props: { user: { id: 5 }, todos: [1] } }),
+        'layer-1',
+      ),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+    const router = new Router()
+    let announcedErrors: unknown = undefined
+    let success = false
+
+    await new Promise<void>((resolve) => {
+      router.replace({
+        layerId: 'layer-1',
+        props: (layerProps) => ({ ...layerProps, todos: [7] }),
+        onError: (errors) => {
+          announcedErrors = errors
+          resolve()
+        },
+        onSuccess: () => {
+          success = true
+          resolve()
+        },
+      })
+    })
+
+    expect(success).toBe(true)
+    expect(announcedErrors).toBeUndefined()
+  })
+
+  it('applies and announces flash on the layer', async () => {
+    const router = hold()
+    let announcedFlash: unknown = undefined
+
+    await new Promise<void>((resolve) => {
+      router.replace({
+        layerId: 'layer-1',
+        props: (layerProps) => ({ ...layerProps, todos: [7] }),
+        flash: { message: 'Saved.' },
+        onFlash: (flash) => {
+          announcedFlash = flash
+          resolve()
+        },
+        onSuccess: () => resolve(),
+      })
+    })
+
+    expect(announcedFlash).toEqual({ message: 'Saved.' })
+    expect(currentPage.get().layers![0].flash).toEqual({ message: 'Saved.' })
+    expect(currentPage.get().flash).toEqual({})
+  })
+
+  it('clears the flash a layer was already showing, rather than announcing it a second time', async () => {
+    const router = hold()
+
+    await new Promise<void>((resolve) => {
+      router.replace({ layerId: 'layer-1', flash: { message: 'Saved.' }, onSuccess: () => resolve() })
+    })
+
+    const announced: unknown[] = []
+
+    await new Promise<void>((resolve) => {
+      router.replace({
+        layerId: 'layer-1',
+        props: (layerProps) => ({ ...layerProps, todos: [7] }),
+        onFlash: (flash) => announced.push(flash),
+        onSuccess: () => resolve(),
+      })
+    })
+
+    expect(announced).toEqual([])
+    expect(currentPage.get().layers![0].flash).toEqual({})
+  })
+})
+
+describe('a response that refreshes the base', () => {
+  class ExposedResponse extends Response {
+    public refreshes(pageResponse: Page): boolean {
+      return this.refreshesBase(pageResponse)
+    }
+
+    public merge(pageResponse: Page): void {
+      this.mergeProps(pageResponse)
+    }
+  }
+
+  const responseFor = (visit: Partial<ActiveVisit>) => {
+    currentPage.init({
+      initialPage: pageWith(),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+
+    const params = { only: [], except: [], reset: [], ...visit } as unknown as ActiveVisit
+
+    return new ExposedResponse(RequestParams.create(params), {} as HttpResponse, pageWith(), {
+      page: pageWith(),
+      generation: currentPage.generation(),
+    })
+  }
+
+  it('a reload of the same component refreshes it', () => {
+    expect(responseFor({ reload: true } as Partial<ActiveVisit>).refreshes(pageWith())).toBe(true)
+  })
+
+  it('a reload redirected to another component does not', () => {
+    const redirected = pageWith({ component: 'Auth/Login', url: '/login' })
+
+    expect(responseFor({ reload: true } as Partial<ActiveVisit>).refreshes(redirected)).toBe(false)
+  })
+
+  it('a visit to another url of the same component does not', () => {
+    const elsewhere = pageWith({ url: '/users?page=2' })
+
+    expect(responseFor({}).refreshes(elsewhere)).toBe(false)
+  })
+
+  it('a partial reload of the same component still refreshes it', () => {
+    expect(responseFor({ only: ['users'] }).refreshes(pageWith())).toBe(true)
+  })
+
+  it('a partial reload of another url of the same component does not', () => {
+    expect(responseFor({ only: ['users'] }).refreshes(pageWith({ url: '/users?search=x' }))).toBe(false)
+  })
+
+  it('does not merge a plain reload into the props already held', () => {
+    const response = responseFor({ reload: true } as Partial<ActiveVisit>)
+    const pageResponse = pageWith({ props: { users: [{ id: 1 }] } })
+
+    currentPage.merge({ props: { users: [], stale: true } as Page['props'] })
+    response.merge(pageResponse)
+
+    expect(pageResponse.props).toEqual({ users: [{ id: 1 }] })
+  })
+})
+
+describe('the base a layer response composes onto', () => {
+  const visit = (url: string, options: VisitOptions = {}, router = new Router()): Promise<Page> =>
+    new Promise((resolve) => {
+      const settle = () => resolve(currentPage.get())
+
+      router.visit(url, { ...options, onSuccess: settle, onError: settle })
+    })
+
+  const cached = () => (prefetchedRequests as unknown as { cached: unknown[] }).cached
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('composes onto the page a visit aimed at the layer was made from', async () => {
+    await hold(pageWith())
+    const generation = currentPage.generation()
+    respondWith(editLayer())
+
+    const page = await visit('http://localhost/users/5/edit')
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.url).toBe('/users')
+    expect(page.layers).toEqual([expect.objectContaining({ key: 'Users/Edit', url: '/users/5/edit' })])
+    expect(currentPage.generation()).toBe(generation)
+  })
+
+  it('composes onto the page it names as its base, when a create redirects to the record', async () => {
+    await hold(pageWith())
+    const generation = currentPage.generation()
+    respondWith(editLayer({ layer: { key: 'Users/Edit', base: '/users' } }))
+
+    const page = await visit('http://localhost/users', { method: 'post' })
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.url).toBe('/users')
+    expect(page.layers).toEqual([expect.objectContaining({ key: 'Users/Edit', url: '/users/5/edit' })])
+    expect(currentPage.generation()).toBe(generation)
+  })
+
+  it('walks a base back for a layer whose base is not the page on screen', async () => {
+    await hold(pageWith({ component: 'Auth/Login', url: '/login' }))
+    respondWith(editLayer({ layer: { key: 'Users/Edit', base: '/users' } }))
+
+    const page = await visit('http://localhost/login', { method: 'post' })
+
+    expect(page.component).toBe('')
+    expect(page.layers).toEqual([expect.objectContaining({ key: 'Users/Edit', standalone: true })])
+  })
+
+  it('takes the asset version the layer arrived on', async () => {
+    await hold(pageWith({ version: 'old' }))
+    respondWith(editLayer({ version: 'new' }))
+
+    const page = await visit('http://localhost/users/5/edit', { method: 'post' })
+
+    expect(page.version).toBe('new')
+  })
+
+  it('composes onto the page beneath a layer that is already open', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    const generation = currentPage.generation()
+    respondWith(editLayer({ props: { user: { id: 5 }, errors: { name: 'The name field is required.' } } }))
+
+    const page = await visit('http://localhost/users/5', { method: 'post' })
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.url).toBe('/users')
+    expect(page.layers).toEqual([
+      expect.objectContaining({
+        id: 'layer-1',
+        props: { user: { id: 5 }, errors: { name: 'The name field is required.' } },
+      }),
+    ])
+    expect(currentPage.generation()).toBe(generation)
+  })
+
+  it('composes onto a layer that opened while the visit was in flight', async () => {
+    await hold(pageWith())
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    const settled = visit('http://localhost/users/5', { method: 'post' })
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+
+    await currentPage.set(composeLayer(currentPage.get(), editLayer(), 'layer-1'), { preservesBase: true })
+    const generation = currentPage.generation()
+
+    answer!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+
+    const page = await settled
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.layers).toEqual([expect.objectContaining({ id: 'layer-1', key: 'Users/Edit' })])
+    expect(currentPage.generation()).toBe(generation)
+  })
+
+  it('composes onto the stack when a visit from inside it comes back as a different layer', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    respondWith(
+      pageWith({ component: 'Teams/Show', url: '/teams/9', layer: { key: 'Teams/Show' }, props: { team: { id: 9 } } }),
+    )
+
+    const page = await visit('http://localhost/users/5/promote', { method: 'post' })
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.layers!.map((layer) => layer.key)).toEqual(['Users/Edit', 'Teams/Show'])
+  })
+
+  it('composes onto the stack when the layer the visit was sent from is still open', async () => {
+    const notes = pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } })
+
+    await hold(composeLayer(composeLayer(pageWith(), editLayer(), 'layer-edit'), notes, 'layer-notes'))
+
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    const settled = visit('http://localhost/users/5/promote', { method: 'post' }, new Router('layer-edit'))
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+
+    await currentPage.set(closeLayer(currentPage.get(), 'layer-notes'), { preservesBase: true })
+
+    answer!({
+      status: 200,
+      data: pageWith({ component: 'Teams/Show', url: '/teams/9', layer: { key: 'Teams/Show' } }),
+      headers: { 'x-inertia': 'true' },
+    })
+
+    const page = await settled
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.layers!.map((layer) => layer.key)).toEqual(['Users/Edit', 'Teams/Show'])
+  })
+
+  it('promotes a layer when the page moved to another url of the same component while it was in flight', async () => {
+    await hold(pageWith())
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    const settled = visit('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+
+    respondWith(pageWith({ url: '/users?search=x', props: { users: [{ id: 9 }] } }))
+    await visit('http://localhost/users?search=x', { only: ['users'], async: true })
+
+    answer!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    const page = await settled
+
+    expect(page.component).toBe('Users/Edit')
+    expect(page.layers).toBeUndefined()
+  })
+
+  it('composes a layer across a background reload that refreshes the base in place', async () => {
+    await hold(pageWith())
+    const generation = currentPage.generation()
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    const settled = visit('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+
+    respondWith(pageWith({ url: '/users?page=2', props: { users: [{ id: 9 }] } }))
+    await new Promise<void>((resolve) => {
+      new Router().reload({ only: ['users'], data: { page: 2 }, preserveUrl: true, onSuccess: () => resolve() })
+    })
+    expect(currentPage.generation()).toBe(generation)
+
+    answer!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    const page = await settled
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.props).toEqual({ users: [{ id: 9 }] })
+    expect(page.layers).toEqual([expect.objectContaining({ key: 'Users/Edit' })])
+  })
+
+  it('composes a layer opened by a visit that preserves the url', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+
+    const page = await visit('http://localhost/users/5/edit', { preserveUrl: true })
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.layers).toEqual([expect.objectContaining({ key: 'Users/Edit' })])
+  })
+
+  it('gives a layer opened by a visit that preserves the url its own url, but not the address', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+
+    const page = await visit('http://localhost/users/5/edit', { preserveUrl: true })
+
+    expect(page.layers).toEqual([
+      expect.objectContaining({ key: 'Users/Edit', url: '/users/5/edit', preservesUrl: true }),
+    ])
+    expect(addressOf(page)).toBe('/users')
+  })
+
+  it('leaves an open layer the url it already had when a preserving reload rewrites it', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+    await visit('http://localhost/users/5/edit')
+
+    const [layer] = currentPage.get().layers!
+    respondWith(editLayer({ url: '/users/5/edit?page=2', props: { user: { id: 5 }, notes: [1] } }))
+
+    await visit('http://localhost/users/5/edit?page=2', {
+      layerId: layer.id,
+      only: ['notes'],
+      preserveUrl: true,
+    })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id, url: '/users/5/edit' })])
+    expect(addressOf(currentPage.get())).toBe('/users/5/edit')
+  })
+
+  it('leaves the address on the layer beneath when a layer opens without moving the url', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+    await visit('http://localhost/users/5/edit')
+
+    await new Promise((resolve) => setTimeout(resolve))
+
+    respondWith(pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } }))
+    await visit('http://localhost/users/5/notes', { preserveUrl: true })
+
+    await vi.waitFor(() => expect(history.preserveUrl).toBe(false))
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    await new Promise<void>((resolve) => {
+      new Router().replace({ props: { users: [{ id: 1 }] }, onSuccess: () => resolve() })
+    })
+
+    expect(replaceState).toHaveBeenCalledWith(expect.anything(), '', '/users/5/edit')
+    expect(currentPage.get().layers!.map((layer) => [layer.url, !!layer.preservesUrl])).toEqual([
+      ['/users/5/edit', false],
+      ['/users/5/notes', true],
+    ])
+    expect(addressOf(currentPage.get())).toBe('/users/5/edit')
+  })
+
+  it('promotes a layer dispatched from a layer the user dismissed while it was in flight', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    const generation = currentPage.generation()
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    const settled = visit('http://localhost/users/5/promote', { method: 'post' })
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+
+    await currentPage.set(closeLayer(currentPage.get(), 'layer-1'), { preservesBase: true })
+
+    answer!({
+      status: 200,
+      data: pageWith({ component: 'Teams/Show', url: '/teams/9', layer: { key: 'Teams/Show' } }),
+      headers: { 'x-inertia': 'true' },
+    })
+    const page = await settled
+
+    expect(page.component).toBe('Teams/Show')
+    expect(page.layers).toBeUndefined()
+    expect(currentPage.generation()).not.toBe(generation)
+  })
+
+  it('does not reopen a layer the user dismissed while a submit inside it was in flight', async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    const settled = visit('http://localhost/users/5', { method: 'post' })
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+
+    await currentPage.set(closeLayer(currentPage.get(), 'layer-1'), { preservesBase: true })
+
+    answer!({
+      status: 200,
+      data: editLayer({ props: { user: { id: 5 }, errors: { name: 'The name field is required.' } } }),
+      headers: { 'x-inertia': 'true' },
+    })
+    const page = await settled
+
+    expect(page.component).toBe('Users/Edit')
+    expect(page.layers).toBeUndefined()
+  })
+
+  it('promotes a layer to a page when it comes back through a login page', async () => {
+    await hold(pageWith({ component: 'Auth/Login', url: '/login' }))
+    const generation = currentPage.generation()
+    respondWith(editLayer())
+
+    const page = await visit('http://localhost/login', { method: 'post' })
+
+    expect(page.component).toBe('Users/Edit')
+    expect(page.url).toBe('/users/5/edit')
+    expect(page.layers).toBeUndefined()
+    expect(page).not.toHaveProperty('layer')
+    expect(currentPage.generation()).not.toBe(generation)
+  })
+
+  it('composes a layer router.layer() asked for, whatever url the server answered from', async () => {
+    await hold(pageWith())
+    const generation = currentPage.generation()
+    respondWith(editLayer())
+
+    const handle = new Router().layer('http://localhost/users/5/edit-start', { method: 'post' })
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().layers).toEqual([
+      expect.objectContaining({ id: handle.id, key: 'Users/Edit', url: '/users/5/edit' }),
+    ])
+    expect(currentPage.generation()).toBe(generation)
+  })
+
+  it('promotes a layer router.layer() asked for when the page beneath it was replaced in flight', async () => {
+    await hold(pageWith())
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    new Router().layer('http://localhost/users/5/edit-start', { method: 'post' })
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+
+    await currentPage.setQuietly(pageWith({ component: 'Users/Archive', url: '/users/archive' }))
+
+    answer!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+
+    await vi.waitFor(() => expect(currentPage.get().component).toBe('Users/Edit'))
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('promotes a prefetched layer replayed onto a base an instant swap has since replaced', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+    const router = new Router()
+
+    router.prefetch('http://localhost/users/5/edit', {}, { cacheFor: '30s' })
+    await vi.waitFor(() => expect(cached()).toHaveLength(1))
+
+    await currentPage.setQuietly(pageWith({ component: 'Users/Archive', url: '/users/archive' }))
+    await currentPage.setQuietly(pageWith({ component: 'Users/Trash', url: '/users/trash' }))
+
+    const page = await visit('http://localhost/users/5/edit', { component: 'Users/Edit' }, router)
+
+    expect(page.props).toEqual({ user: { id: 5 } })
+    expect(page.layers).toBeUndefined()
+  })
+})
+
+describe('the prefetch cache shared between the page and its layers', () => {
+  const cached = () => (prefetchedRequests as unknown as { cached: unknown[] }).cached
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(() => {
+    prefetchedRequests.removeAll()
+    vi.restoreAllMocks()
+  })
+
+  it('answers a lookup from the page or another layer with what a layer prefetched', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+
+    new Router().prefetch('http://localhost/users/5/edit', { layerId: 'layer-1' }, { cacheFor: '30s' })
+    await vi.waitFor(() => expect(cached()).toHaveLength(1))
+
+    expect(new Router().getCached('http://localhost/users/5/edit', {})).not.toBeNull()
+    expect(new Router().getCached('http://localhost/users/5/edit', { layerId: 'layer-2' })).not.toBeNull()
+  })
+
+  it('does not answer a lookup that asks for other props', async () => {
+    await hold(pageWith())
+    respondWith(editLayer())
+
+    new Router().prefetch('http://localhost/users/5/edit', { layerId: 'layer-1' }, { cacheFor: '30s' })
+    await vi.waitFor(() => expect(cached()).toHaveLength(1))
+
+    expect(new Router().getCached('http://localhost/users/5/edit', { only: ['user'] })).toBeNull()
+  })
+})
+
+describe("a layer's own component across a rewrite", () => {
+  const rendered: ResolvedLayer[][] = []
+
+  const openEdit = async (): Promise<number> => {
+    rendered.length = 0
+
+    currentPage.init({
+      initialPage: pageWith(),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async ({ layers }) => {
+        rendered.push(layers ?? [])
+      },
+    })
+
+    await currentPage.setQuietly(pageWith())
+    respondWith(editLayer())
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    return rendered.at(-1)![0].renderKey
+  }
+
+  const rewrite = async (options: VisitOptions): Promise<number> => {
+    respondWith(editLayer({ props: { user: { id: 6 } } }))
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/6/edit', {
+        ...options,
+        onSuccess: () => resolve(),
+        onError: () => resolve(),
+      })
+    })
+
+    return rendered.at(-1)![0].renderKey
+  }
+
+  it('remakes the component when the visit did not preserve state', async () => {
+    const opened = await openEdit()
+
+    expect(await rewrite({})).not.toBe(opened)
+  })
+
+  it('keeps the component when the visit preserved state', async () => {
+    const opened = await openEdit()
+
+    expect(await rewrite({ preserveState: true })).toBe(opened)
+  })
+})
+
+describe('a layer response that names an earlier level', () => {
+  const visit = (url: string, options: VisitOptions = {}, router = new Router()): Promise<Page> =>
+    new Promise((resolve) => {
+      const settle = () => resolve(currentPage.get())
+
+      router.visit(url, { ...options, onSuccess: settle, onError: settle })
+    })
+
+  const notesLayer = (overrides: Partial<Page> = {}): Page =>
+    pageWith({ component: 'Users/Notes', url: '/users/5/edit/notes', layer: { key: 'Users/Notes' }, ...overrides })
+
+  const stack = async (): Promise<[LayerState, LayerState]> => {
+    await hold(pageWith())
+
+    respondWith(editLayer())
+    await visit('http://localhost/users/5/edit')
+
+    respondWith(notesLayer())
+    await visit('http://localhost/users/5/edit/notes')
+
+    const [edit, notes] = currentPage.get().layers!
+
+    expect([edit.entries, notes.entries]).toEqual([1, 1])
+
+    return [edit, notes]
+  }
+
+  afterEach(() => {
+    layerClosing.settleUnwind()
+  })
+
+  it('closes the layers above the one it lands on, rewriting that layer where it stands', async () => {
+    const [edit, notes] = await stack()
+    const closed: string[] = []
+    router.layerHandle(notes.id).onClose(() => closed.push(notes.id))
+
+    respondWith(editLayer({ url: '/users/6/edit', props: { user: { id: 6 } } }))
+
+    const page = await visit('http://localhost/users/6/edit')
+
+    expect(page.layers!.map((layer) => layer.id)).toEqual([edit.id])
+    expect(page.layers![0].props).toEqual({ user: { id: 6 } })
+    expect(addressOf(page)).toBe('/users/6/edit')
+    expect(closed).toEqual([notes.id])
+  })
+
+  it('gives the layer it lands on the entries the closed layers owned', async () => {
+    const [edit] = await stack()
+    respondWith(editLayer({ url: '/users/6/edit' }))
+
+    const page = await visit('http://localhost/users/6/edit')
+
+    expect(page.layers![0].entries).toBe(3)
+    expect(entriesToUnwind(page, edit.id)).toBe(3)
+  })
+
+  it('does not cancel a reload of the page when the close refreshes the layer beneath', async () => {
+    const edit = composeLayer(pageWith(), editLayer(), 'edit', { url: '/users/5/edit' })
+
+    await hold(composeLayer(edit, notesLayer(), 'notes', { url: '/users/5/edit/notes' }))
+
+    let cancelled = false
+    http.setClient({ request: () => new Promise(() => {}) })
+    new Router().reload({ only: ['users'], onCancel: () => (cancelled = true) } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    const requested: string[] = []
+    http.setClient({
+      request: ({ url }) => {
+        requested.push(new URL(url).pathname)
+
+        return new Promise(() => {})
+      },
+    })
+
+    await router.close('notes')
+
+    await vi.waitFor(() => expect(requested).toEqual(['/users/5/edit']))
+    expect(cancelled).toBe(false)
+  })
+
+  it('leaves the layers above alone when a poll refreshes the layer beneath them', async () => {
+    const [edit, notes] = await stack()
+    respondWith(editLayer({ props: { user: { id: 5, seen: 1 } } }))
+
+    await new Promise<void>((resolve) => {
+      router.reload({ layerId: edit.id, onSuccess: () => resolve(), onError: () => resolve() } as VisitOptions)
+    })
+
+    const page = currentPage.get()
+
+    expect(page.layers!.map((layer) => layer.id)).toEqual([edit.id, notes.id])
+    expect(page.layers![0].props).toEqual({ user: { id: 5, seen: 1 } })
+    expect(addressOf(page)).toBe('/users/5/edit/notes')
+  })
+
+  it('leaves the layers above alone when a deferred group fills in the layer beneath them', async () => {
+    const [edit, notes] = await stack()
+    respondWith(editLayer({ props: { user: { id: 5 }, history: [1] } }))
+
+    await new Promise<void>((resolve) => {
+      router.reload({
+        layerId: edit.id,
+        only: ['history'],
+        onSuccess: () => resolve(),
+        onError: () => resolve(),
+      } as VisitOptions)
+    })
+
+    const page = currentPage.get()
+
+    expect(page.layers!.map((layer) => layer.id)).toEqual([edit.id, notes.id])
+    expect(page.layers![0].props).toEqual({ user: { id: 5 }, history: [1] })
+  })
+
+  it('leaves a response that lands on the top layer stacked exactly as it was', async () => {
+    const [edit, notes] = await stack()
+    respondWith(notesLayer({ url: '/users/5/edit/other-notes' }))
+
+    const page = await visit('http://localhost/users/5/edit/other-notes')
+
+    expect(page.layers!.map((layer) => layer.id)).toEqual([edit.id, notes.id])
+    expect(addressOf(page)).toBe('/users/5/edit/other-notes')
+  })
+})
+
+describe('an open layer across a partial or reload', () => {
+  const visit = (url: string, options: VisitOptions = {}, router = new Router()): Promise<Page> =>
+    new Promise((resolve) => {
+      const settle = () => resolve(currentPage.get())
+
+      router.visit(url, { ...options, onSuccess: settle, onError: settle })
+    })
+
+  const queueSettled = () => new Promise((resolve) => setTimeout(resolve))
+
+  const openWarm = async (layerProps: Page['props'] = { user: { id: 5 } }): Promise<void> => {
+    await hold(pageWith())
+    respondWith(editLayer({ props: layerProps }))
+    await visit('http://localhost/users/5/edit')
+    await queueSettled()
+  }
+
+  const openCold = async (layerProps: Page['props'] = { user: { id: 5 } }): Promise<void> => {
+    await hold(pageWith())
+    await currentPage.set(
+      composeColdLayer(editLayer({ layer: { base: '/users' }, props: layerProps }), nextLayerId(pageWith())),
+      {
+        preservesBase: true,
+      },
+    )
+  }
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(async () => {
+    await queueSettled()
+    vi.restoreAllMocks()
+  })
+
+  it('keeps a warm layer when a partial refreshes the base beneath it', async () => {
+    await openWarm({ user: { id: 5 }, stats: [1] })
+    const generation = currentPage.generation()
+    const [layer] = currentPage.get().layers!
+    respondWith(pageWith({ props: { stats: [1, 2, 3] } }))
+
+    await visit('http://localhost/users', { only: ['stats'] })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().layers!.map((open) => open.id)).toEqual([layer.id])
+    expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5 }, stats: [1] })
+    expect(currentPage.get().props).toEqual({ users: [], stats: [1, 2, 3] })
+    expect(currentPage.generation()).toBe(generation)
+  })
+
+  it('keeps a warm layer when a plain reload refreshes the base beneath it', async () => {
+    await openWarm({ user: { id: 5 }, stats: [1] })
+    const generation = currentPage.generation()
+    const [layer] = currentPage.get().layers!
+    respondWith(pageWith({ props: { users: [{ id: 9 }] } }))
+    await queueSettled()
+
+    await new Promise<void>((resolve) => {
+      new Router().reload({ onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5 }, stats: [1] })
+    expect(currentPage.get().props).toEqual({ users: [{ id: 9 }] })
+    expect(currentPage.generation()).toBe(generation)
+  })
+
+  it('keeps a warm layer when a partial moves the base to another url of the same component', async () => {
+    await openWarm({ user: { id: 5 } })
+    const generation = currentPage.generation()
+    const [layer] = currentPage.get().layers!
+    respondWith(pageWith({ url: '/users?search=x', props: { users: [{ id: 9 }] } }))
+
+    await visit('http://localhost/users?search=x', { only: ['users'] })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.generation()).not.toBe(generation)
+    expect(currentPage.get().props).toEqual(expect.objectContaining({ users: [{ id: 9 }] }))
+  })
+
+  it("drops the stack when a layer's own reload is answered by another page", async () => {
+    await openWarm({ user: { id: 5 } })
+    const [layer] = currentPage.get().layers!
+    respondWith(pageWith({ component: 'Auth/Login', url: '/login', props: {} }))
+    await queueSettled()
+
+    await new Promise<void>((resolve) => {
+      new Router(layer.id).reload({ onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(currentPage.get().component).toBe('Auth/Login')
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('drops the stack when a reload of the base is answered by another page', async () => {
+    await openWarm({ user: { id: 5 } })
+    respondWith(pageWith({ component: 'Auth/Login', url: '/login', props: {} }))
+    await queueSettled()
+
+    await new Promise<void>((resolve) => {
+      new Router().reload({ onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(currentPage.get().component).toBe('Auth/Login')
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it("merges a warm layer's props when a partial is answered by the layer, keeping its siblings", async () => {
+    await openWarm({ user: { id: 5 }, stats: [1] })
+    const [layer] = currentPage.get().layers!
+    respondWith(editLayer({ props: { stats: [1, 2, 3] } }))
+
+    await visit('http://localhost/users/5/edit', { only: ['stats'] })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5 }, stats: [1, 2, 3] })
+  })
+
+  it('starts a layer clean when a partial is answered under its key by another component', async () => {
+    await openWarm({ user: { id: 5 }, stats: [1] })
+    const [layer] = currentPage.get().layers!
+    respondWith(editLayer({ component: 'Users/Show', props: { stats: [1, 2, 3] } }))
+
+    await visit('http://localhost/users/5/edit', { only: ['stats'] })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id, component: 'Users/Show' })])
+    expect(currentPage.get().layers![0].props).toEqual({ stats: [1, 2, 3] })
+  })
+
+  it("keeps a layer's scroll and once props across a partial that carried neither", async () => {
+    const scrollProps = {
+      stats: { pageName: 'page', previousPage: null, nextPage: 2, currentPage: 1, reset: false },
+    }
+    const onceProps = { welcome: { prop: 'user', expiresAt: 123 } }
+
+    await hold(pageWith())
+    respondWith(editLayer({ props: { user: { id: 5 }, stats: [1] }, scrollProps, onceProps }))
+    await visit('http://localhost/users/5/edit')
+    await queueSettled()
+
+    respondWith(editLayer({ props: { stats: [1, 2, 3] } }))
+    await visit('http://localhost/users/5/edit', { only: ['stats'] })
+
+    expect(currentPage.get().layers![0].scrollProps).toEqual(scrollProps)
+    expect(currentPage.get().layers![0].onceProps).toEqual(onceProps)
+  })
+
+  it("preserves a layer's own errors across a partial that carried none", async () => {
+    await hold(pageWith())
+    respondWith(editLayer({ props: { user: { id: 5 }, errors: { name: 'Required' } } }))
+    await visit('http://localhost/users/5/edit')
+    await queueSettled()
+
+    respondWith(editLayer({ props: { stats: [1], errors: {} } }))
+    await visit('http://localhost/users/5/edit', { only: ['stats'], preserveErrors: true })
+
+    expect(currentPage.get().layers![0].props.errors).toEqual({ name: 'Required' })
+  })
+
+  it("merges a cold layer's props when a partial is answered by the layer, keeping its siblings", async () => {
+    await openCold({ user: { id: 5 } })
+    const [layer] = currentPage.get().layers!
+    respondWith(editLayer({ layer: { base: '/users' }, props: { stats: [1, 2, 3] } }))
+
+    await visit('http://localhost/users/5/edit', { only: ['stats'] })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5 }, stats: [1, 2, 3] })
+  })
+
+  it('replaces the blank with the real base when a partial is answered by the base, keeping the layer', async () => {
+    await openCold({ user: { id: 5 } })
+    const [layer] = currentPage.get().layers!
+    respondWith(pageWith({ props: { users: [{ id: 9 }], stats: [1, 2, 3] } }))
+
+    await visit('http://localhost/users', { only: ['stats'] })
+
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().props).toEqual(expect.objectContaining({ stats: [1, 2, 3] }))
+  })
+
+  it('keeps a prop the response to a partial left out, since a partial merges into the layer', async () => {
+    await openWarm({ user: { id: 5 }, stats: [1] })
+    const [layer] = currentPage.get().layers!
+    respondWith(editLayer({ props: { stats: [1, 2, 3], notes: ['x'] } }))
+
+    await visit('http://localhost/users/5/edit', { only: ['stats'] })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().layers![0].props).toEqual(
+      expect.objectContaining({ user: { id: 5 }, stats: [1, 2, 3], notes: ['x'] }),
+    )
+  })
+
+  it('replaces a layer wholesale when a plain visit is answered by the layer dropping a prop', async () => {
+    await openWarm({ user: { id: 5 }, stats: [1] })
+    const [layer] = currentPage.get().layers!
+    respondWith(editLayer({ props: { stats: [1, 2, 3] } }))
+
+    await visit('http://localhost/users/5/edit')
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().layers![0].props).toEqual({ stats: [1, 2, 3] })
+  })
+
+  it('keeps a sibling inside a nested layer prop when a partial asks for a dotted path', async () => {
+    await openWarm({ user: { id: 5, name: 'Claud' } })
+    const [layer] = currentPage.get().layers!
+    respondWith(editLayer({ props: { user: { id: 9 } } }))
+
+    await visit('http://localhost/users/5/edit', { only: ['user.id'] })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().layers![0].props).toEqual({ user: { id: 9, name: 'Claud' } })
+  })
+
+  it('keeps a layer prop the server left out of an except-only partial, matching the base', async () => {
+    await openWarm({ user: { id: 5, name: 'Claud' } })
+    const [layer] = currentPage.get().layers!
+    respondWith(editLayer({ props: { user: { id: 5 } } }))
+
+    await visit('http://localhost/users/5/edit', { except: ['user.name'] })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5, name: 'Claud' } })
+  })
+
+  it('keeps a warm layer when a reset-only request refreshes the base beneath it', async () => {
+    await openWarm({ user: { id: 5 }, stats: [1] })
+    const generation = currentPage.generation()
+    const [layer] = currentPage.get().layers!
+    respondWith(pageWith({ props: { stats: [1, 2, 3] } }))
+
+    await visit('http://localhost/users', { reset: ['stats'] })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().props).toEqual(expect.objectContaining({ stats: [1, 2, 3] }))
+    expect(currentPage.generation()).toBe(generation)
+  })
+
+  it('keeps a nested sibling on the base itself across a dotted partial path', async () => {
+    await hold(pageWith({ props: { user: { id: 5, name: 'Claud' } } }))
+    respondWith(pageWith({ props: { user: { id: 9 } } }))
+
+    await visit('http://localhost/users', { only: ['user.id'] })
+
+    expect(currentPage.get().props).toEqual({ user: { id: 9, name: 'Claud' } })
+  })
+
+  it('emits no layers key when a layerless partial reload refreshes the base', async () => {
+    await hold(pageWith({ props: { stats: [1] } }))
+    respondWith(pageWith({ props: { stats: [1, 2, 3] } }))
+    await queueSettled()
+
+    await new Promise<void>((resolve) => {
+      new Router().reload({ only: ['stats'], onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(currentPage.get()).not.toHaveProperty('layers')
+    expect(currentPage.get().props).toEqual({ stats: [1, 2, 3] })
+  })
+
+  it('appends a layer partial mergeProps to the open layer items', async () => {
+    await openWarm({ user: { id: 5 }, items: [1] })
+    respondWith(editLayer({ props: { items: [2, 3] }, mergeProps: ['items'] }))
+
+    await visit('http://localhost/users/5/edit', { only: ['items'] })
+
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: expect.any(String) })])
+    expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5 }, items: [1, 2, 3] })
+  })
+
+  it('prepends a layer partial prependProps before the open layer items', async () => {
+    await openWarm({ user: { id: 5 }, items: [3] })
+    respondWith(editLayer({ props: { items: [1, 2] }, prependProps: ['items'] }))
+
+    await visit('http://localhost/users/5/edit', { only: ['items'] })
+
+    expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5 }, items: [1, 2, 3] })
+  })
+
+  it('deep merges a layer partial deepMergeProps into the open layer', async () => {
+    await openWarm({ user: { id: 5 }, filters: { status: 'open', sort: 'asc' } })
+    respondWith(editLayer({ props: { filters: { status: 'closed' } }, deepMergeProps: ['filters'] }))
+
+    await visit('http://localhost/users/5/edit', { only: ['filters'] })
+
+    expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5 }, filters: { status: 'closed', sort: 'asc' } })
+  })
+
+  it('matches layer partial items by matchPropsOn and updates them in place', async () => {
+    await openWarm({
+      user: { id: 5 },
+      items: [
+        { id: 1, name: 'old' },
+        { id: 2, name: 'keep' },
+      ],
+    })
+    respondWith(
+      editLayer({
+        props: { items: [{ id: 1, name: 'new' }] },
+        mergeProps: ['items'],
+        matchPropsOn: ['items.id'],
+      }),
+    )
+
+    await visit('http://localhost/users/5/edit', { only: ['items'] })
+
+    expect(currentPage.get().layers![0].props).toEqual({
+      user: { id: 5 },
+      items: [
+        { id: 1, name: 'new' },
+        { id: 2, name: 'keep' },
+      ],
+    })
+  })
+
+  it('merges a same-component layer partial against the layer, never the base', async () => {
+    await hold(pageWith({ props: { users: [], items: [10] } }))
+    respondWith(
+      pageWith({
+        component: 'Users/Index',
+        url: '/users/filtered',
+        layer: { key: 'Users/Index' },
+        props: { items: [1], filter: 'open' },
+      }),
+    )
+    await visit('http://localhost/users/filtered')
+    await queueSettled()
+
+    respondWith(
+      pageWith({
+        component: 'Users/Index',
+        url: '/users/filtered',
+        layer: { key: 'Users/Index' },
+        props: { items: [2, 3] },
+        mergeProps: ['items'],
+      }),
+    )
+    await visit('http://localhost/users/filtered', { only: ['items'] })
+
+    expect(currentPage.get().layers![0].props).toEqual({ items: [1, 2, 3], filter: 'open' })
+    expect(currentPage.get().layers![0].props).not.toHaveProperty('users')
+    expect(currentPage.get().props).toEqual(expect.objectContaining({ users: [], items: [10] }))
+  })
+})
+
+describe('per-layer optimistic updates', () => {
+  const editLayer = (overrides: Partial<Page> = {}): Page =>
+    pageWith({
+      component: 'Users/Edit',
+      url: '/users/5/edit',
+      layer: { key: 'Users/Edit' },
+      props: { user: { id: 5 }, todos: [1] },
+      ...overrides,
+    })
+
+  const queueSettled = () => new Promise((resolve) => setTimeout(resolve))
+
+  const visit = (url: string, options: VisitOptions = {}): Promise<Page> =>
+    new Promise((resolve) => {
+      const settle = () => resolve(currentPage.get())
+      new Router().visit(url, { ...options, onSuccess: settle, onError: settle })
+    })
+
+  const open = async (): Promise<void> => {
+    await hold(pageWith({ props: { users: [], todos: [10] } }))
+    respondWith(editLayer())
+    await visit('http://localhost/users/5/edit')
+    await queueSettled()
+  }
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(async () => {
+    await queueSettled()
+    vi.restoreAllMocks()
+  })
+
+  it('passes the layer props to a layer-targeted optimistic callback and writes the layer', async () => {
+    await open()
+    const layerId = currentPage.get().layers![0].id
+    const received: unknown[] = []
+
+    respondWith(editLayer({ props: { todos: [2] } }))
+    router
+      .optimistic((props) => {
+        received.push(props.todos)
+        return { todos: [...(props.todos as number[]), 9] }
+      })
+      .visit('http://localhost/users/5/edit', { layerId })
+    await queueSettled()
+
+    expect(received).toEqual([[1]])
+    expect(currentPage.get().layers![0].props).toEqual(expect.objectContaining({ todos: [2] }))
+    expect(currentPage.get().props).toEqual(expect.objectContaining({ todos: [10] }))
+  })
+
+  it('rolls a failed layer optimistic back into the layer, never the base', async () => {
+    await open()
+    const layerId = currentPage.get().layers![0].id
+
+    let release!: () => void
+    const held = new Promise<void>((resolve) => (release = resolve))
+    http.setClient({
+      request: async () => {
+        await held
+        return { status: 500, data: 'boom', headers: {} }
+      },
+    })
+    router
+      .optimistic((props) => ({ todos: [...(props.todos as number[]), 9] }))
+      .visit('http://localhost/users/5/edit', { layerId, onError: () => {}, onSuccess: () => {} })
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(currentPage.get().layers![0].props).toEqual(expect.objectContaining({ todos: [1, 9] }))
+    expect(currentPage.get().props).toEqual(expect.objectContaining({ todos: [10] }))
+
+    release()
+    await queueSettled()
+
+    expect(currentPage.get().layers![0].props).toEqual(expect.objectContaining({ todos: [1] }))
+    expect(currentPage.get().props).toEqual(expect.objectContaining({ todos: [10] }))
+  })
+
+  it('never injects a pending base optimistic into a landing layer response', async () => {
+    await open()
+    const layerId = currentPage.get().layers![0].id
+
+    let releaseBase!: () => void
+    const baseHeld = new Promise<void>((resolve) => (releaseBase = resolve))
+    http.setClient({
+      request: async (config) => {
+        if (config.url.includes('/users/5/edit')) {
+          return {
+            status: 200,
+            data: editLayer({ props: { todos: [2] } }) as unknown as string,
+            headers: { 'x-inertia': 'true' },
+          }
+        }
+        await baseHeld
+        return {
+          status: 200,
+          data: pageWith({ props: { users: [], todos: [10, 9] } }) as unknown as string,
+          headers: { 'x-inertia': 'true' },
+        }
+      },
+    })
+
+    router.optimistic((props) => ({ todos: [...(props.todos as number[]), 9] })).reload()
+    await new Promise((resolve) => setTimeout(resolve))
+    expect(currentPage.get().props).toEqual(expect.objectContaining({ todos: [10, 9] }))
+
+    await visit('http://localhost/users/5/edit', { layerId, only: ['todos'] })
+    await queueSettled()
+
+    expect(currentPage.get().layers![0].props).toEqual(expect.objectContaining({ todos: [2] }))
+    expect(currentPage.get().props).toEqual(expect.objectContaining({ todos: [10, 9] }))
+
+    releaseBase()
+  })
+
+  it('drops a closed layer optimistic state instead of rolling it into the base', async () => {
+    await hold(pageWith({ props: { users: [], todos: [10] } }))
+    await currentPage.set(
+      composeColdLayer(
+        pageWith({
+          component: 'Users/Edit',
+          url: '/users/5/edit',
+          layer: { key: 'Users/Edit', base: '/users' },
+          props: { user: { id: 5 }, todos: [1] },
+        }),
+        nextLayerId(pageWith()),
+      ),
+      { preservesBase: true },
+    )
+    const layerId = currentPage.get().layers![0].id
+
+    let releaseLayer!: () => void
+    const layerHeld = new Promise<void>((resolve) => (releaseLayer = resolve))
+    http.setClient({
+      request: async () => {
+        await layerHeld
+        return { status: 200, data: editLayer() as unknown as string, headers: { 'x-inertia': 'true' } }
+      },
+    })
+    router
+      .optimistic((props) => ({ todos: [...(props.todos as number[]), 9] }))
+      .visit('http://localhost/users/5/edit', { layerId, onError: () => {}, onSuccess: () => {} })
+    await new Promise((resolve) => setTimeout(resolve))
+
+    await layerClosing.close(layerId)
+    await layerClosing.closed(layerId)
+    await queueSettled()
+
+    expect(currentPage.pendingOptimisticCount()).toBe(0)
+    expect(currentPage.get()).not.toHaveProperty('layers')
+    expect(currentPage.get().props).not.toHaveProperty('todos')
+
+    releaseLayer()
+  })
+})
+
+describe('a reload or partial issued from inside a layer', () => {
+  const inertiaResponse = (page: Page): HttpResponse => ({
+    status: 200,
+    data: page as unknown as string,
+    headers: { 'x-inertia': 'true' },
+  })
+
+  const queueSettled = () => new Promise((resolve) => setTimeout(resolve))
+
+  const openWarm = async (layerUrl = '/users/5/edit'): Promise<LayerState> => {
+    await hold(pageWith())
+    http.setClient({ request: async () => inertiaResponse(editLayer({ url: layerUrl })) })
+    await new Promise<void>((resolve) => {
+      new Router().visit(`http://localhost${layerUrl}`, { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+    return currentPage.get().layers![0]
+  }
+
+  const address = window.location.href
+
+  afterEach(async () => {
+    window.location.href = address
+    await queueSettled()
+    vi.restoreAllMocks()
+  })
+
+  it("re-asks for the layer's own url when the reload carries the layer's id", async () => {
+    const layer = await openWarm()
+    const requested: string[] = []
+
+    http.setClient({
+      request: ({ url }) => {
+        requested.push(new URL(url).pathname)
+        return Promise.resolve(inertiaResponse(editLayer()))
+      },
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().reload({ layerId: layer.id, only: ['user'], onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(requested).toEqual(['/users/5/edit'])
+  })
+
+  it('discards a reload the layer moved on from while it was in flight', async () => {
+    const layer = await openWarm()
+    const held = holding()
+
+    const reloaded = new Promise<void>((resolve) => {
+      new Router().reload({ layerId: layer.id, onSuccess: () => resolve(), onError: () => resolve() } as VisitOptions)
+    })
+    await vi.waitFor(() => expect(held()).not.toBeNull())
+    const stale = held()!
+
+    http.setClient({
+      request: async () => inertiaResponse(editLayer({ url: '/users/6/edit', props: { user: { id: 6 } } })),
+    })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/6/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+
+    stale(inertiaResponse(editLayer({ url: '/users/5/edit', props: { user: { id: 5 } } })))
+    await reloaded
+    await queueSettled()
+
+    expect(currentPage.get().layers!.map((open) => open.url)).toEqual(['/users/6/edit'])
+    expect(currentPage.get().layers![0].props.user).toEqual({ id: 6 })
+  })
+
+  it('keeps a reload of a layer that stayed where it was while it was in flight', async () => {
+    const layer = await openWarm()
+    const held = holding()
+
+    const reloaded = new Promise<void>((resolve) => {
+      new Router().reload({ layerId: layer.id, onSuccess: () => resolve(), onError: () => resolve() } as VisitOptions)
+    })
+    await vi.waitFor(() => expect(held()).not.toBeNull())
+
+    held()!(inertiaResponse(editLayer({ url: '/users/5/edit', props: { user: { id: 5, seen: 1 } } })))
+    await reloaded
+    await queueSettled()
+
+    expect(currentPage.get().layers![0].props.user).toEqual({ id: 5, seen: 1 })
+  })
+
+  it('keeps the identity of the props a response left untouched, reading them off the layer', async () => {
+    const layer = await openWarm()
+    const untouched = layer.props.user
+
+    http.setClient({
+      request: async () => inertiaResponse(editLayer({ props: { user: { id: 5 } } })),
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(currentPage.get().layers![0].props.user).toBe(untouched)
+  })
+
+  it('keeps the identity of the props a base response left untouched', async () => {
+    await hold(pageWith({ props: { users: [{ id: 1 }], team: { id: 7 } } }))
+    const untouched = currentPage.get().props.team
+
+    http.setClient({
+      request: async () => inertiaResponse(pageWith({ props: { users: [{ id: 2 }], team: { id: 7 } } })),
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(currentPage.get().props.team).toBe(untouched)
+    expect(currentPage.get().props.users).toEqual([{ id: 2 }])
+  })
+
+  it('never takes the identity of a base prop that happens to equal the layer prop', async () => {
+    await hold(pageWith({ component: 'Users/Edit', props: { user: { id: 5 } } }))
+    http.setClient({ request: async () => inertiaResponse(editLayer({ component: 'Users/Edit' })) })
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+
+    expect(currentPage.get().layers![0].props.user).not.toBe(currentPage.get().props.user)
+    expect(currentPage.get().layers![0].props.user).toEqual({ id: 5 })
+  })
+
+  it('a bare reload re-asks for the base beneath the stack, not the address', async () => {
+    const layer = await openWarm()
+    window.location.href = 'http://localhost/users/5/edit'
+    const requested: string[] = []
+
+    http.setClient({
+      request: ({ url }) => {
+        requested.push(new URL(url).pathname)
+        return Promise.resolve(inertiaResponse(pageWith({ props: { users: [{ id: 9 }] } })))
+      },
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().reload({ onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(requested).toEqual(['/users'])
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+  })
+
+  it('names the layer in X-Inertia-Partial-Component when the reload carries the layer id', async () => {
+    const layer = await openWarm()
+    let partialComponent: string | undefined
+
+    http.setClient({
+      request: ({ headers }) => {
+        partialComponent = (headers ?? {})['X-Inertia-Partial-Component']
+        return Promise.resolve(inertiaResponse(editLayer()))
+      },
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().reload({ layerId: layer.id, only: ['user'], onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(partialComponent).toBe('Users/Edit')
+  })
+
+  it('drops the carried target for a url-less layer and reloads the base beneath the stack', async () => {
+    await hold(pageWith())
+    const id = nextLayerId(currentPage.get())
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({
+          component: 'Users/Edit',
+          url: '/users/5/edit',
+          layer: { key: 'Users/Edit' },
+          props: { user: { id: 5 } },
+        }) as Page,
+        id,
+        { url: null, owner: currentPage.id() },
+      ),
+      { preservesBase: true },
+    )
+    await queueSettled()
+
+    const requested: string[] = []
+    let partialComponent: string | undefined
+    http.setClient({
+      request: ({ url, headers }) => {
+        requested.push(new URL(url).pathname)
+        partialComponent = (headers ?? {})['X-Inertia-Partial-Component']
+        return Promise.resolve(inertiaResponse(pageWith({ props: { users: [{ id: 9 }] } })))
+      },
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().reload({ layerId: id, only: ['users'], onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(requested).toEqual(['/users'])
+    expect(partialComponent).toBe('Users/Index')
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id })])
+  })
+
+  it('drops the target for a url-less layer reloading through its own router', async () => {
+    await hold(composeLocalLayer(pageWith(), 'Users/Preview', {}, 'local', currentPage.id()))
+
+    const requested: string[] = []
+    let partialComponent: string | undefined
+    http.setClient({
+      request: ({ url, headers }) => {
+        requested.push(new URL(url).pathname)
+        partialComponent = (headers ?? {})['X-Inertia-Partial-Component']
+
+        return Promise.resolve(inertiaResponse(pageWith({ props: { users: [{ id: 9 }] } })))
+      },
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router('local').reload({ only: ['users'], onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(requested).toEqual(['/users'])
+    expect(partialComponent).toBe('Users/Index')
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: 'local' })])
+  })
+
+  it('strips the layer target from the request a 409 redirect re-issues', async () => {
+    const layer = await openWarm()
+    const requested: string[] = []
+    const partialComponents: (string | undefined)[] = []
+
+    http.setClient({
+      request: ({ url, headers }) => {
+        requested.push(new URL(url).pathname)
+        partialComponents.push((headers ?? {})['X-Inertia-Partial-Component'])
+
+        return requested.length === 1
+          ? Promise.resolve({
+              status: 409,
+              data: '',
+              headers: { 'x-inertia-redirect': 'http://localhost/users' },
+            } as HttpResponse)
+          : Promise.resolve(inertiaResponse(pageWith({ props: { users: [{ id: 9 }] } })))
+      },
+    })
+
+    new Router().reload({ layerId: layer.id, only: ['users'] })
+    await vi.waitFor(() => expect(requested).toHaveLength(2))
+
+    expect(requested).toEqual(['/users/5/edit', '/users'])
+    expect(partialComponents[1]).toBe('Users/Index')
+    expect(currentPage.get().layers).toEqual([expect.objectContaining({ id: layer.id })])
+    expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5 } })
+  })
+
+  it('a visit to the page does not cancel an in-flight request aimed at a layer', async () => {
+    await hold(pageWith())
+    const id = nextLayerId(currentPage.get())
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({
+          component: 'Users/Edit',
+          url: '/users',
+          layer: { key: 'Users/Edit' },
+          props: { user: { id: 5 } },
+        }) as Page,
+        id,
+        { url: '/users', owner: currentPage.id() },
+      ),
+      { preservesBase: true },
+    )
+    await queueSettled()
+
+    const released: string[] = []
+    http.setClient({
+      request: ({ url }) => {
+        const path = new URL(url).pathname
+        released.push(path)
+        return path === '/dashboard'
+          ? Promise.resolve(inertiaResponse(pageWith({ component: 'Dashboard', url: '/dashboard' })))
+          : new Promise<HttpResponse>(() => {})
+      },
+    })
+
+    let layerPartialCancelled = false
+    router.visit('http://localhost/users', {
+      layerId: id,
+      only: ['user'],
+      async: true,
+      onCancel: () => (layerPartialCancelled = true),
+    })
+    await vi.waitFor(() => expect(released).toContain('/users'))
+
+    await new Promise<void>((resolve) => {
+      router.visit('http://localhost/dashboard', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(layerPartialCancelled).toBe(false)
+  })
+
+  it("a reload aimed at a layer does not cancel the page's pending load", async () => {
+    const layer = await openWarm()
+    const released: string[] = []
+
+    http.setClient({
+      request: ({ url }) => {
+        const path = new URL(url).pathname
+        released.push(path)
+        return path === '/users/5/edit'
+          ? Promise.resolve(inertiaResponse(editLayer()))
+          : new Promise<HttpResponse>(() => {})
+      },
+    })
+
+    let basePendingCancelled = false
+    router.reload({ only: ['users'], onCancel: () => (basePendingCancelled = true) })
+    await vi.waitFor(() => expect(released).toContain('/users'))
+
+    router.reload({ layerId: layer.id, only: ['user'] })
+    await vi.waitFor(() => expect(released).toContain('/users/5/edit'))
+
+    expect(basePendingCancelled).toBe(false)
+  })
+
+  it('discards a layer response whose layer closed while the request was in flight', async () => {
+    const layer = await openWarm()
+    let answer!: (response: HttpResponse) => void
+
+    http.setClient({
+      request: ({ url }) =>
+        new URL(url).pathname === '/users/5/edit'
+          ? new Promise<HttpResponse>((resolve) => (answer = resolve))
+          : Promise.resolve(inertiaResponse(pageWith())),
+    })
+
+    new Router().reload({ layerId: layer.id, only: ['user'] })
+    await vi.waitFor(() => expect(answer).toBeDefined())
+
+    const closing = router.close(layer.id)
+    await queueSettled()
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+    await closing
+    await queueSettled()
+
+    answer(inertiaResponse(editLayer()))
+    await queueSettled()
+
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('discards a response whose standalone layer closed, rather than reopening it over the page', async () => {
+    await hold(pageWith())
+    const id = nextLayerId(currentPage.get())
+    await currentPage.set(composeColdLayer(editLayer({ layer: { key: 'Users/Edit', base: '/users' } }), id), {
+      preservesBase: true,
+    })
+    await queueSettled()
+
+    let answer!: (response: HttpResponse) => void
+    http.setClient({ request: () => new Promise<HttpResponse>((resolve) => (answer = resolve)) })
+
+    new Router().reload({ layerId: id, only: ['user'] })
+    await vi.waitFor(() => expect(answer).toBeDefined())
+
+    await router.close(id)
+    await queueSettled()
+    expect(currentPage.get().layers).toBeUndefined()
+
+    answer(inertiaResponse(editLayer({ layer: { key: 'Users/Edit', base: '/users' } })))
+    await queueSettled()
+
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('installs a page response for a visit whose layer closed, since it is a navigation', async () => {
+    const layer = await openWarm()
+    let answer!: (response: HttpResponse) => void
+
+    http.setClient({
+      request: ({ url }) =>
+        new URL(url).pathname === '/users/5/edit'
+          ? new Promise<HttpResponse>((resolve) => (answer = resolve))
+          : Promise.resolve(inertiaResponse(pageWith())),
+    })
+
+    new Router().visit('http://localhost/users/5/edit', { layerId: layer.id })
+    await vi.waitFor(() => expect(answer).toBeDefined())
+
+    const closing = router.close(layer.id)
+    await queueSettled()
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+    await closing
+    await queueSettled()
+
+    answer(inertiaResponse(pageWith({ component: 'Dashboard', url: '/dashboard' })))
+    await queueSettled()
+
+    expect(currentPage.get().component).toBe('Dashboard')
+  })
+})
+
+describe('an instant visit that opens a layer or is made from one', () => {
+  const client = http.getClient()
+
+  const openOn = async (layer: Partial<Page> = {}) => {
+    await hold(composeLayer(pageWith(), editLayer(layer), 'layer-1'))
+
+    return currentPage.get().layers![0]
+  }
+
+  const holdTheRequest = () => http.setClient({ request: () => new Promise(() => {}) })
+
+  afterEach(() => {
+    http.setClient(client)
+    layerClosing.settleUnwind()
+    vi.restoreAllMocks()
+  })
+
+  it('rewrites the layer where it stands rather than fabricating a page over the stack', async () => {
+    const open = await openOn()
+    holdTheRequest()
+
+    router.visit('/users/9/edit', { component: 'Users/Edit', layerId: open.id } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    const page = currentPage.get()
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.props).toEqual({ users: [] })
+    expect(page.layers).toHaveLength(1)
+    expect(page.layers![0].id).toBe(open.id)
+    expect(page.layers![0].component).toBe('Users/Edit')
+    expect(page.layers![0].url).toBe('/users/9/edit')
+  })
+
+  it('leaves the base its identity, so the response it fetched still composes onto the stack', async () => {
+    const open = await openOn()
+    const generation = currentPage.generation()
+    const baseId = currentPage.id()
+    holdTheRequest()
+
+    router.visit('/users/9/edit', { component: 'Users/Edit', layerId: open.id } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(currentPage.generation()).toBe(generation)
+    expect(currentPage.id()).toBe(baseId)
+  })
+
+  it('does not fire the onClose of the layer it is swapping', async () => {
+    const open = await openOn()
+    let closed = false
+    router.layerHandle(open.id).onClose(() => (closed = true))
+    holdTheRequest()
+
+    router.visit('/users/9/edit', { component: 'Users/Edit', layerId: open.id } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(closed).toBe(false)
+  })
+
+  it('drops the record the layer was showing rather than carrying it into the placeholder', async () => {
+    const open = await openOn({
+      props: { user: { id: 5 } },
+      deferredProps: { default: ['history'] },
+      onceProps: { token: { prop: 'token' } },
+      scrollProps: { items: { pageName: 'page' } },
+      rescuedProps: ['history'],
+      flash: { message: 'Saved' },
+    } as Partial<Page>)
+    holdTheRequest()
+
+    router.visit('/users/9/edit', { component: 'Users/Edit', layerId: open.id } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    const [swapped] = currentPage.get().layers!
+
+    expect(swapped.props).toEqual({ errors: {} })
+    expect(swapped.deferredProps).toEqual({})
+    expect(swapped.onceProps).toEqual({})
+    expect(swapped.scrollProps).toEqual({})
+    expect(swapped.rescuedProps).toEqual([])
+    expect(swapped.flash).toEqual({})
+  })
+
+  it('remakes the layer component for the record it is heading to', async () => {
+    const open = await openOn()
+    holdTheRequest()
+
+    router.visit('/users/9/edit', { component: 'Users/Edit', layerId: open.id } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(currentPage.get().layers![0].renderKey).not.toBe(open.renderKey)
+  })
+
+  it('lands a response keyed differently on the placeholder rather than beside it', async () => {
+    // The server keys this layer per record, so the key the response carries is not one the
+    // placeholder could have been given when it went up.
+    const open = await openOn({ layer: { key: 'panel:first' } } as Partial<Page>)
+    const answer = holding()
+
+    router.visit('/layers/panel/second', { component: 'Layers/Panel', layerId: open.id } as VisitOptions)
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+
+    answer()!({
+      status: 200,
+      data: editLayer({
+        component: 'Layers/Panel',
+        url: '/layers/panel/second',
+        layer: { key: 'panel:second' },
+        props: { name: 'second' },
+      }),
+      headers: { 'x-inertia': 'true' },
+    })
+
+    await vi.waitFor(() => expect(currentPage.get().layers![0].key).toBe('panel:second'))
+
+    const page = currentPage.get()
+
+    expect(page.layers).toHaveLength(1)
+    expect(page.layers![0].id).toBe(open.id)
+    expect(page.layers![0].props).toEqual({ name: 'second' })
+  })
+
+  it('stacks a response under a different key as a new layer when no placeholder was fabricated', async () => {
+    const open = await openOn({ layer: { key: 'panel:first' } } as Partial<Page>)
+
+    respondWith(
+      editLayer({
+        component: 'Layers/Panel',
+        url: '/layers/panel/second',
+        layer: { key: 'panel:second' },
+        props: { name: 'second' },
+      }),
+    )
+
+    router.visit('/layers/panel/second', { layerId: open.id } as VisitOptions)
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['panel:first', 'panel:second'])
+  })
+
+  it('lands the response on the layer it fabricated, keeping its component instance', async () => {
+    const open = await openOn()
+    const answer = holding()
+
+    router.visit('/users/9/edit', { component: 'Users/Edit', layerId: open.id } as VisitOptions)
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+
+    const fabricated = currentPage.get().layers![0]
+
+    answer()!({
+      status: 200,
+      data: editLayer({ url: '/users/9/edit', props: { user: { id: 9 } } }),
+      headers: { 'x-inertia': 'true' },
+    })
+
+    await vi.waitFor(() => expect(currentPage.get().layers![0].props).toEqual({ user: { id: 9 } }))
+
+    const page = currentPage.get()
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.layers).toHaveLength(1)
+    expect(page.layers![0].id).toBe(open.id)
+    expect(page.layers![0].renderKey).toBe(fabricated.renderKey)
+  })
+
+  it('puts the placeholder up as a layer, leaving the page it opens on where it is', async () => {
+    await hold(pageWith())
+    holdTheRequest()
+
+    router.layer('/users/5/edit', { component: 'Users/Edit' } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    const page = currentPage.get()
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.url).toBe('/users')
+    expect(page.layers).toHaveLength(1)
+    expect(page.layers![0].component).toBe('Users/Edit')
+    expect(page.layers![0].url).toBe('/users/5/edit')
+    expect(page.layers![0].owner).toBe(currentPage.id())
+  })
+
+  it('lands the response on the placeholder an open put up, under the id it minted', async () => {
+    await hold(pageWith())
+    const answer = holding()
+
+    const handle = router.layer('/users/5/edit', { component: 'Users/Edit' } as VisitOptions)
+    await vi.waitFor(() => expect(answer()).not.toBeNull())
+
+    const fabricated = currentPage.get().layers![0]
+
+    answer()!({ status: 200, data: editLayer(), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().layers![0].props).toEqual({ user: { id: 5 } }))
+
+    const page = currentPage.get()
+
+    expect(page.component).toBe('Users/Index')
+    expect(page.layers).toHaveLength(1)
+    expect(page.layers![0].id).toBe(fabricated.id)
+    expect(page.layers![0].id).toBe(handle.id)
+    expect(page.layers![0].key).toBe('Users/Edit')
+  })
+
+  it('leaves the scroll of the page beneath alone', async () => {
+    const open = await openOn()
+    const reset = vi.spyOn(Scroll, 'reset')
+    holdTheRequest()
+
+    router.visit('/users/9/edit', { component: 'Users/Edit', layerId: open.id } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(reset).not.toHaveBeenCalled()
+  })
+
+  it('still resets the scroll when it fabricates a page', async () => {
+    await openOn()
+    const reset = vi.spyOn(Scroll, 'reset')
+    holdTheRequest()
+
+    router.visit('/users/9/edit', { component: 'Users/Edit' } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(reset).toHaveBeenCalled()
+  })
+
+  it('still fabricates a page when the visit names no layer', async () => {
+    await openOn()
+    holdTheRequest()
+
+    router.visit('/users/9/edit', { component: 'Users/Edit' } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(currentPage.get().component).toBe('Users/Edit')
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('falls back to fabricating a page when the layer it names has already closed', async () => {
+    const open = await openOn()
+    await currentPage.set(closeLayer(currentPage.get(), open.id), { preservesBase: true })
+    holdTheRequest()
+
+    router.visit('/users/9/edit', { component: 'Users/Edit', layerId: open.id } as VisitOptions)
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(currentPage.get().component).toBe('Users/Edit')
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+})
+
+describe('a close: true response runs the close flow instead of installing', () => {
+  const queueSettled = () => new Promise((resolve) => setTimeout(resolve))
+
+  const submit = (url: string, options: VisitOptions = {}): Promise<void> =>
+    new Promise((resolve) => {
+      new Router().visit(url, { ...options, method: 'post', onFinish: () => resolve() })
+    })
+
+  const openWarm = async (): Promise<void> => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => ({ status: 200, data: editLayer() as unknown as string, headers: { 'x-inertia': 'true' } }),
+    })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+  }
+
+  beforeEach(() => {
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(async () => {
+    await queueSettled()
+    layerClosing.settleUnwind()
+    vi.restoreAllMocks()
+  })
+
+  it('runs the top-layer close flow when close: true arrives over an open layer, installing nothing', async () => {
+    await openWarm()
+    const [layer] = currentPage.get().layers!
+    const go = vi.spyOn(window.history, 'go')
+    const requested: string[] = []
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({
+      request: ({ url }) => {
+        requested.push(new URL(url).pathname)
+        return new Promise((resolve) => (answer = resolve))
+      },
+    })
+
+    const submitted = submit('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+    answer!({
+      status: 200,
+      data: pageWith({ close: true, url: '/users/5/edit' }),
+      headers: { 'x-inertia': 'true' },
+    })
+    await submitted
+
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().url).toBe('/users')
+    expect(currentPage.get().layers!.map((open) => open.id)).toEqual([layer.id])
+    expect(currentPage.get()).not.toHaveProperty('close')
+
+    layerClosing.closed(layer.id)
+    await history.processQueue()
+    expect(go).toHaveBeenCalledWith(-1)
+
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+    await vi.waitFor(() => expect(requested).toEqual(['/users/5/edit', '/users']))
+
+    answer!({ status: 200, data: pageWith({ props: { users: [{ id: 9 }] } }), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().props.users).toEqual([{ id: 9 }]))
+    expect(currentPage.get()).not.toHaveProperty('layers')
+  })
+
+  it('reports the submit as a success, since nothing about it failed', async () => {
+    await openWarm()
+    let succeeded = false
+    let errored = false
+    http.setClient({
+      request: async () => ({
+        status: 200,
+        data: pageWith({ close: true, url: '/users/5/edit' }) as unknown as string,
+        headers: { 'x-inertia': 'true' },
+      }),
+    })
+
+    await submit('http://localhost/users/5/edit', {
+      onSuccess: () => {
+        succeeded = true
+      },
+      onError: () => {
+        errored = true
+      },
+    })
+
+    expect(succeeded).toBe(true)
+    expect(errored).toBe(false)
+  })
+
+  it('hands the success callbacks the page as the close leaves it, not the one still showing the layer', async () => {
+    await openWarm()
+    const [lower] = currentPage.get().layers!
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } }),
+        'layer-notes',
+      ),
+      { preservesBase: true },
+    )
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    let received: Page | null = null
+    const submitted = new Promise<void>((resolve) => {
+      new Router('layer-notes').visit('http://localhost/users/5/notes', {
+        method: 'post',
+        onSuccess: (page) => {
+          received = page
+        },
+        onFinish: () => resolve(),
+      })
+    })
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+    answer!({ status: 200, data: pageWith({ close: true, url: '/users/5/notes' }), headers: { 'x-inertia': 'true' } })
+    await submitted
+
+    expect(received!.layers!.map((layer: LayerState) => layer.id)).toEqual([lower.id])
+  })
+
+  it('closes the layer the visit was made from, and every layer above it', async () => {
+    await openWarm()
+    const [lower] = currentPage.get().layers!
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } }),
+        'layer-notes',
+      ),
+      { preservesBase: true },
+    )
+    const go = vi.spyOn(window.history, 'go')
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    const submitted = new Promise<void>((resolve) => {
+      new Router(lower.id).visit('http://localhost/users/5/edit', { method: 'post', onFinish: () => resolve() })
+    })
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+    answer!({
+      status: 200,
+      data: pageWith({ close: true, url: '/users/5/edit' }),
+      headers: { 'x-inertia': 'true' },
+    })
+    await submitted
+
+    await vi.waitFor(() => expect(go).toHaveBeenCalledWith(-2))
+  })
+
+  it('closes nothing when the layer the visit was made from has gone since', async () => {
+    await openWarm()
+    const [gone] = currentPage.get().layers!
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+    const submitted = submit('http://localhost/users/5', { layerId: gone.id } as VisitOptions)
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+
+    await currentPage.set(closeLayer(currentPage.get(), gone.id), { preservesBase: true })
+    await currentPage.set(
+      composeLayer(
+        currentPage.get(),
+        pageWith({ component: 'Users/Notes', url: '/users/5/notes', layer: { key: 'Users/Notes' } }),
+        'layer-notes',
+      ),
+      { preservesBase: true },
+    )
+
+    const go = vi.spyOn(window.history, 'go')
+
+    answer!({ status: 200, data: pageWith({ close: true }), headers: { 'x-inertia': 'true' } })
+    await submitted
+    await queueSettled()
+
+    expect(go).not.toHaveBeenCalled()
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual(['layer-notes'])
+  })
+
+  it('refreshes the current page when close: true arrives with no layer open', async () => {
+    await hold(pageWith({ props: { stats: [1] } }))
+    const requested: string[] = []
+    let answer: ((response: unknown) => void) | null = null
+    http.setClient({
+      request: ({ url }) => {
+        requested.push(new URL(url).pathname)
+        return new Promise((resolve) => (answer = resolve))
+      },
+    })
+
+    const submitted = submit('http://localhost/users')
+    await vi.waitFor(() => expect(answer).not.toBeNull())
+    answer!({
+      status: 200,
+      data: JSON.stringify(pageWith({ close: true, props: { stats: [9, 9, 9] } })),
+      headers: { 'x-inertia': 'true' },
+    })
+    await submitted
+
+    expect(currentPage.get()).not.toHaveProperty('close')
+    expect(currentPage.get().props).toEqual({ stats: [1] })
+
+    await vi.waitFor(() => expect(requested).toEqual(['/users', '/users']))
+    answer!({ status: 200, data: pageWith({ props: { users: [{ id: 9 }] } }), headers: { 'x-inertia': 'true' } })
+    await vi.waitFor(() => expect(currentPage.get().props).toEqual(expect.objectContaining({ users: [{ id: 9 }] })))
+  })
+})
+
+describe('a submit answered by the tier the layer stands on', () => {
+  const openLocal = async (): Promise<string> => {
+    await hold(pageWith())
+
+    const handle = router.layer({ component: 'Users/Confirm', props: { user: 5 } })
+
+    await new Promise((resolve) => setTimeout(resolve))
+
+    return handle.id
+  }
+
+  const openLocalOverALayer = async (): Promise<[string, string]> => {
+    await hold(pageWith())
+
+    respondWith(editLayer())
+    await new Promise<void>((resolve) => router.visit('http://localhost/users/5/edit', { onSuccess: () => resolve() }))
+
+    const handle = router.layer({ component: 'Users/Confirm', props: { user: 5 } })
+
+    await new Promise((resolve) => setTimeout(resolve))
+
+    return [currentPage.get().layers![0].id, handle.id]
+  }
+
+  const submit = (layerId: string): Promise<Errors> =>
+    new Promise((resolve) => {
+      router.post('http://localhost/users', {}, {
+        layerId,
+        onError: resolve,
+        onSuccess: () => resolve({}),
+      } as VisitOptions)
+    })
+
+  afterEach(async () => {
+    await new Promise((resolve) => setTimeout(resolve))
+    layerClosing.settleUnwind()
+  })
+
+  it('keeps a local layer up and gives it the errors the server handed back', async () => {
+    const layerId = await openLocal()
+    respondWith(pageWith({ props: { users: [], errors: { name: 'The name is required.' } } }))
+
+    const announced = await submit(layerId)
+
+    expect(announced).toEqual({ name: 'The name is required.' })
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual([layerId])
+    expect(currentPage.get().layers![0].props.errors).toEqual({ name: 'The name is required.' })
+    expect(currentPage.get().props.errors).toEqual({})
+  })
+
+  it('hands the flash back to the layer along with the errors', async () => {
+    const layerId = await openLocal()
+    respondWith(
+      pageWith({ props: { users: [], errors: { name: 'Required.' } }, flash: { message: 'Check the form.' } }),
+    )
+
+    const flashes: unknown[] = []
+
+    await new Promise<void>((resolve) => {
+      router.post('http://localhost/users', {}, {
+        layerId,
+        onFlash: (flash) => flashes.push(flash),
+        onError: () => resolve(),
+        onSuccess: () => resolve(),
+      } as VisitOptions)
+    })
+
+    expect(flashes).toEqual([{ message: 'Check the form.' }])
+    expect(currentPage.get().layers![0].flash).toEqual({ message: 'Check the form.' })
+    expect(currentPage.get().flash).toEqual({})
+  })
+
+  it('clears the stack when the same submit comes back without errors', async () => {
+    const layerId = await openLocal()
+    respondWith(pageWith({ props: { users: [{ id: 9 }] } }))
+
+    await submit(layerId)
+
+    expect(currentPage.get().layers).toBeUndefined()
+    expect(currentPage.get().props).toEqual({ users: [{ id: 9 }] })
+  })
+
+  it('clears the stack when the errors come back on another page altogether', async () => {
+    const layerId = await openLocal()
+    respondWith(pageWith({ component: 'Users/Create', url: '/users/create', props: { errors: { name: 'Required.' } } }))
+
+    await submit(layerId)
+
+    expect(currentPage.get().layers).toBeUndefined()
+    expect(currentPage.get().component).toBe('Users/Create')
+  })
+
+  it('keeps a local layer up when the address it was submitted from belongs to the layer beneath it', async () => {
+    const [editId, layerId] = await openLocalOverALayer()
+    respondWith(editLayer({ props: { user: { id: 5 }, errors: { name: 'The name is required.' } } }))
+
+    const announced = await submit(layerId)
+
+    expect(announced).toEqual({ name: 'The name is required.' })
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual([editId, layerId])
+    expect(currentPage.get().layers![1].props.errors).toEqual({ name: 'The name is required.' })
+    expect(currentPage.get().layers![0].props.errors).toEqual({})
+  })
+
+  it('closes the local layer when the errors come back from another url of that layer', async () => {
+    const [editId, layerId] = await openLocalOverALayer()
+    respondWith(editLayer({ url: '/users/6/edit', props: { user: { id: 6 }, errors: { name: 'Required.' } } }))
+
+    await submit(layerId)
+
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual([editId])
+    expect(currentPage.get().layers![0].props.errors).toEqual({ name: 'Required.' })
+  })
+})
diff --git a/packages/core/tests/layer-state.test.ts b/packages/core/tests/layer-state.test.ts
new file mode 100644
index 000000000..62a311169
--- /dev/null
+++ b/packages/core/tests/layer-state.test.ts
@@ -0,0 +1,1029 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { router } from '../src'
+import { eventHandler } from '../src/eventHandler'
+import { history } from '../src/history'
+import { http } from '../src/http'
+import { useInfiniteScrollQueryString } from '../src/infiniteScroll/queryString'
+import { layerClosing } from '../src/layers'
+import { composeLayer, closeLayer, layerPageOf } from '../src/layers'
+import { page as currentPage } from '../src/page'
+import { prefetchedRequests } from '../src/prefetched'
+import { Response } from '../src/response'
+import { Router } from '../src/router'
+import { ClientSideVisitOptions, HttpResponse, LayerState, Page, ResolvedLayer, VisitOptions } from '../src/types'
+import { listeners } from './support/browser'
+import { editLayer, hold, pageWith } from './support/layers'
+
+describe("a layer's deferred and rescued props", () => {
+  const inertiaResponse = (page: Page): HttpResponse => ({
+    status: 200,
+    data: page as unknown as string,
+    headers: { 'x-inertia': 'true' },
+  })
+
+  const queueSettled = () => new Promise((resolve) => setTimeout(resolve))
+
+  let deferredCleanup: (() => void) | null = null
+
+  const deferredRouter = (): Router => {
+    deferredCleanup?.()
+    const router = new Router()
+
+    deferredCleanup = eventHandler.on(
+      'loadDeferredProps',
+      ({ deferredProps, layerId }: { deferredProps: Page['deferredProps']; layerId?: string }) => {
+        Object.values(deferredProps ?? {}).forEach((props) => {
+          router.reload({
+            only: props,
+            deferredProps: true,
+            preserveErrors: true,
+            ...(layerId && { layerId }),
+          } as VisitOptions)
+        })
+      },
+    )
+
+    return router
+  }
+
+  afterEach(async () => {
+    deferredCleanup?.()
+    deferredCleanup = null
+    await queueSettled()
+    vi.restoreAllMocks()
+  })
+
+  it('loads the deferred props a layer response declared into the layer', async () => {
+    await hold(pageWith())
+    const requested: { url: string; partialComponent: string | undefined }[] = []
+
+    http.setClient({
+      request: ({ url, headers }) => {
+        requested.push({
+          url: new URL(url).pathname,
+          partialComponent: (headers ?? {})['X-Inertia-Partial-Component'],
+        })
+
+        return requested.length === 1
+          ? Promise.resolve(
+              inertiaResponse(
+                editLayer({ deferredProps: { slow: ['stats'] }, rescuedProps: ['stats'], props: { user: { id: 5 } } }),
+              ),
+            )
+          : Promise.resolve(
+              inertiaResponse(editLayer({ props: { user: { id: 5 }, stats: [1, 2, 3] }, rescuedProps: [] })),
+            )
+      },
+    })
+
+    await new Promise<void>((resolve) => {
+      deferredRouter().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await vi.waitFor(() => expect(requested).toHaveLength(2))
+
+    expect(requested[1].url).toBe('/users/5/edit')
+    expect(requested[1].partialComponent).toBe('Users/Edit')
+
+    await vi.waitFor(() =>
+      expect(currentPage.get().layers![0].props).toEqual(expect.objectContaining({ stats: [1, 2, 3] })),
+    )
+    expect(currentPage.get().layers![0].rescuedProps).toEqual([])
+    expect(currentPage.get().props).toEqual({ users: [] })
+  })
+
+  it('aims the deferred follow-up at a layer that preserved the url, not at the page', async () => {
+    await hold(pageWith())
+    const followUps: { url: string; component: string | undefined }[] = []
+
+    http.setClient({
+      request: ({ url, headers }) => {
+        const path = new URL(url).pathname
+
+        if (((headers ?? {})['X-Inertia-Partial-Data'] ?? '').includes('stats')) {
+          followUps.push({ url: path, component: (headers ?? {})['X-Inertia-Partial-Component'] })
+
+          return Promise.resolve(inertiaResponse(editLayer({ props: { user: { id: 5 }, stats: [1] } })))
+        }
+
+        return Promise.resolve(
+          inertiaResponse(editLayer({ deferredProps: { slow: ['stats'] }, props: { user: { id: 5 } } })),
+        )
+      },
+    })
+
+    await new Promise<void>((resolve) => {
+      deferredRouter().visit('http://localhost/users/5/edit', {
+        preserveUrl: true,
+        onSuccess: () => resolve(),
+        onError: () => resolve(),
+      })
+    })
+    await queueSettled()
+
+    expect(currentPage.get().layers![0].preservesUrl).toBe(true)
+    expect(followUps).toEqual([{ url: '/users/5/edit', component: 'Users/Edit' }])
+    expect(currentPage.get().props).toEqual({ users: [] })
+  })
+
+  it("does not re-fire the page's pending deferred props when a layer opens over it", async () => {
+    await hold(pageWith())
+    const deferredFollowUps: string[] = []
+
+    http.setClient({
+      request: ({ url, headers }) => {
+        const path = new URL(url).pathname
+        const partialData = (headers ?? {})['X-Inertia-Partial-Data'] ?? ''
+
+        if (partialData.includes('stats')) {
+          deferredFollowUps.push(path)
+          return new Promise<HttpResponse>(() => {})
+        }
+
+        return path === '/users/5/edit'
+          ? Promise.resolve(
+              inertiaResponse(
+                editLayer({ deferredProps: { slow: ['stats'] }, rescuedProps: ['stats'], props: { user: { id: 5 } } }),
+              ),
+            )
+          : Promise.resolve(inertiaResponse(pageWith({ deferredProps: { slow: ['stats'] } })))
+      },
+    })
+
+    const router = deferredRouter()
+
+    await new Promise<void>((resolve) => {
+      router.visit('http://localhost/users', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+    await vi.waitFor(() => expect(deferredFollowUps).toHaveLength(1))
+
+    await new Promise<void>((resolve) => {
+      router.visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await vi.waitFor(() => expect(deferredFollowUps).toHaveLength(2))
+
+    expect(deferredFollowUps).toEqual(['/users', '/users/5/edit'])
+  })
+
+  it('rescued props travel with the layer and resolve into its props', async () => {
+    await hold(pageWith())
+    const held: ((response: HttpResponse) => void)[] = []
+    let opens = 0
+
+    http.setClient({
+      request: ({ url }) => {
+        const path = new URL(url).pathname
+        return path === '/users/5/edit' && opens++ === 0
+          ? Promise.resolve(
+              inertiaResponse(
+                editLayer({
+                  deferredProps: { slow: ['stats'] },
+                  rescuedProps: ['stats', 'notes'],
+                  props: { user: { id: 5 } },
+                }),
+              ),
+            )
+          : new Promise<HttpResponse>((resolve) => held.push(resolve))
+      },
+    })
+
+    await new Promise<void>((resolve) => {
+      deferredRouter().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(currentPage.get().layers![0].rescuedProps).toEqual(['stats', 'notes'])
+    expect(layerPageOf(currentPage.get(), currentPage.get().layers![0]).rescuedProps).toEqual(['stats', 'notes'])
+
+    await vi.waitFor(() => expect(held).toHaveLength(1))
+    await queueSettled()
+    held[0](inertiaResponse(editLayer({ props: { user: { id: 5 }, stats: [1, 2, 3] }, rescuedProps: [] })))
+    await vi.waitFor(() =>
+      expect(currentPage.get().layers![0].props).toEqual(expect.objectContaining({ stats: [1, 2, 3] })),
+    )
+
+    expect(currentPage.get().layers![0].rescuedProps).toEqual(['notes'])
+    expect(currentPage.get().props).toEqual({ users: [] })
+  })
+
+  it('drops what a layer was owing when the write that lands has closed it', async () => {
+    await hold(pageWith())
+    const groups: { layerId?: string }[] = []
+    const stop = eventHandler.on('loadDeferredProps', (payload: { layerId?: string }) => groups.push(payload))
+
+    const opened = composeLayer(pageWith(), editLayer({ deferredProps: { slow: ['stats'] } }), 'layer-1')
+
+    currentPage.set(opened)
+    await currentPage.set(closeLayer(opened, 'layer-1'))
+
+    stop()
+
+    expect(groups).toEqual([])
+  })
+
+  it("re-asks for the deferred props a restored entry's layer is still missing", async () => {
+    eventHandler.init()
+    await hold(pageWith())
+
+    const asked: { only: unknown; partialComponent: string | undefined }[] = []
+    http.setClient({
+      request: ({ headers }) => {
+        asked.push({
+          only: headers['X-Inertia-Partial-Data'],
+          partialComponent: headers['X-Inertia-Partial-Component'],
+        })
+
+        return new Promise<HttpResponse>(() => {})
+      },
+    })
+
+    deferredRouter()
+
+    const entry = composeLayer(
+      pageWith({ deferredProps: { slow: ['sidebar'] }, props: { users: [], sidebar: ['loaded'] } }),
+      editLayer({ deferredProps: { slow: ['stats'] }, props: { user: { id: 5 } } }),
+      'layer-1',
+    )
+
+    listeners.get('popstate')!({ state: { page: entry } } as unknown as Event)
+
+    await vi.waitFor(() => expect(asked).toHaveLength(1))
+    await queueSettled()
+
+    expect(asked).toEqual([{ only: 'stats', partialComponent: 'Users/Edit' }])
+  })
+})
+
+describe('the deferred props a page write was carrying', () => {
+  const listen = (): { groups: Page['deferredProps'][]; stop: () => void } => {
+    const groups: Page['deferredProps'][] = []
+    const stop = eventHandler.on('loadDeferredProps', (payload: { deferredProps: Page['deferredProps'] }) =>
+      groups.push(payload.deferredProps),
+    )
+
+    return { groups, stop }
+  }
+
+  it('are announced by the write that lands when a newer one supersedes it', async () => {
+    await hold(pageWith())
+    const { groups, stop } = listen()
+
+    currentPage.set(pageWith({ deferredProps: { default: ['stats'] } }))
+    await currentPage.set(pageWith({ props: { users: [], stats: [] } }))
+
+    stop()
+
+    expect(groups).toEqual([{ default: ['stats'] }])
+  })
+
+  it('are dropped when the write that lands is on another page entirely', async () => {
+    await hold(pageWith())
+    const { groups, stop } = listen()
+
+    currentPage.set(pageWith({ deferredProps: { default: ['stats'] } }))
+    await currentPage.set(pageWith({ component: 'Teams/Index', url: '/teams' }))
+
+    stop()
+
+    expect(groups).toEqual([])
+  })
+
+  it('are announced again by a cached prefetch replayed onto the page a second time', async () => {
+    await hold(pageWith())
+    const { groups, stop } = listen()
+
+    const deferred = pageWith({ component: 'Users/Show', url: '/users/5', deferredProps: { default: ['stats'] } })
+    let requests = 0
+
+    http.setClient({
+      request: async ({ url }) => {
+        requests++
+
+        return {
+          status: 200,
+          data: (url.includes('/users/5') ? deferred : pageWith()) as unknown as string,
+          headers: { 'x-inertia': 'true' },
+        }
+      },
+    })
+
+    const router = new Router()
+    router.prefetch('http://localhost/users/5', {}, { cacheFor: '30s' })
+    await vi.waitFor(() => expect(requests).toBe(1))
+
+    const visit = (url: string) =>
+      new Promise<void>((resolve) => router.visit(url, { onSuccess: () => resolve(), onError: () => resolve() }))
+
+    await visit('http://localhost/users/5')
+    await visit('http://localhost/users')
+    await visit('http://localhost/users/5')
+
+    stop()
+    prefetchedRequests.removeAll()
+
+    expect(groups).toEqual([{ default: ['stats'] }, { default: ['stats'] }])
+  })
+
+  it('are left alone by a write that carries them along for another tier', async () => {
+    await hold(pageWith())
+    const { groups, stop } = listen()
+
+    await currentPage.set(pageWith({ deferredProps: { default: ['stats'] } }))
+    await currentPage.set(composeLayer(currentPage.get(), editLayer(), 'layer-1'))
+
+    stop()
+
+    expect(groups).toEqual([{ default: ['stats'] }])
+  })
+})
+
+describe("a layer response's errors", () => {
+  const inertiaResponse = (page: Page): HttpResponse => ({
+    status: 200,
+    data: page as unknown as string,
+    headers: { 'x-inertia': 'true' },
+  })
+
+  const queueSettled = () => new Promise((resolve) => setTimeout(resolve))
+
+  afterEach(async () => {
+    await queueSettled()
+    vi.restoreAllMocks()
+  })
+
+  it("announces a layer response's errors through the layer's bag, not the page's", async () => {
+    await hold(pageWith())
+    const events: string[] = []
+    let announcedErrors: unknown
+
+    http.setClient({
+      request: async () =>
+        inertiaResponse(editLayer({ props: { user: { id: 5 }, errors: { note: 'The note is required.' } } })),
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', {
+        onError: (errors) => {
+          announcedErrors = errors
+          events.push('error')
+        },
+        onSuccess: () => events.push('success'),
+        onFinish: () => resolve(),
+      })
+    })
+
+    expect(events).toEqual(['error'])
+    expect(announcedErrors).toEqual({ note: 'The note is required.' })
+    expect(currentPage.get().layers![0].props.errors).toEqual({ note: 'The note is required.' })
+  })
+
+  it('announces the errors a rewrite of an open layer brings through that layer', async () => {
+    await hold(pageWith())
+    http.setClient({ request: async () => inertiaResponse(editLayer()) })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+    const layerId = currentPage.get().layers![0].id
+
+    let announcedErrors: unknown
+    let success = false
+    http.setClient({
+      request: async () =>
+        inertiaResponse(editLayer({ props: { user: { id: 5 }, errors: { note: 'The note is required.' } } })),
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users', {
+        method: 'post',
+        onError: (errors) => {
+          announcedErrors = errors
+          resolve()
+        },
+        onSuccess: () => {
+          success = true
+          resolve()
+        },
+      })
+    })
+
+    expect(announcedErrors).toEqual({ note: 'The note is required.' })
+    expect(success).toBe(false)
+    expect(currentPage.get().layers![0].id).toBe(layerId)
+  })
+
+  it('announces a rewrite of a non-top layer through that layer, not the top', async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () => inertiaResponse(editLayer()),
+    })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+    http.setClient({
+      request: async () =>
+        inertiaResponse(
+          pageWith({
+            component: 'Teams/Show',
+            url: '/teams/9',
+            layer: { key: 'Teams/Show' },
+            props: { team: { id: 9 } },
+          }),
+        ),
+    })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/teams/9', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+
+    const beneath = currentPage.get().layers![0]
+    const top = currentPage.get().layers![1]
+
+    let announcedErrors: unknown
+    let success = false
+    http.setClient({
+      request: async () =>
+        inertiaResponse(editLayer({ props: { user: { id: 5 }, errors: { note: 'The note is required.' } } })),
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users', {
+        method: 'post',
+        onError: (errors) => {
+          announcedErrors = errors
+          resolve()
+        },
+        onSuccess: () => {
+          success = true
+          resolve()
+        },
+      })
+    })
+
+    expect(announcedErrors).toEqual({ note: 'The note is required.' })
+    expect(success).toBe(false)
+    expect(currentPage.get().layers!.map((layer) => layer.id)).toEqual([beneath.id])
+    expect(currentPage.get().layers![0].props).toHaveProperty('errors')
+    expect(top.props).not.toHaveProperty('errors')
+  })
+
+  it("a page response's errors announce exactly as they always have", async () => {
+    await hold(pageWith())
+    const events: string[] = []
+    let announcedErrors: unknown
+
+    http.setClient({
+      request: async () =>
+        inertiaResponse(pageWith({ props: { users: [], errors: { name: 'The name is required.' } } })),
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users', {
+        onError: (errors) => {
+          announcedErrors = errors
+          events.push('error')
+        },
+        onSuccess: () => events.push('success'),
+        onFinish: () => resolve(),
+      })
+    })
+
+    expect(events).toEqual(['error'])
+    expect(announcedErrors).toEqual({ name: 'The name is required.' })
+  })
+})
+
+describe("a layer response's flash", () => {
+  const inertiaResponse = (page: Page): HttpResponse => ({
+    status: 200,
+    data: page as unknown as string,
+    headers: { 'x-inertia': 'true' },
+  })
+
+  const hold = async (page: Page, onFlash?: (flash: Page['flash']) => void): Promise<Page> => {
+    currentPage.init({
+      initialPage: page,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+      ...(onFlash && { onFlash }),
+    })
+
+    await currentPage.setQuietly(page)
+
+    return page
+  }
+
+  const queueSettled = () => new Promise((resolve) => setTimeout(resolve))
+
+  let deferredCleanup: (() => void) | null = null
+
+  const deferredRouter = (): Router => {
+    deferredCleanup?.()
+    const router = new Router()
+
+    deferredCleanup = eventHandler.on(
+      'loadDeferredProps',
+      (payload: { deferredProps: Page['deferredProps']; layerId?: string }) => {
+        Object.values(payload.deferredProps ?? {}).forEach((props) => {
+          router.reload({
+            only: props,
+            deferredProps: true,
+            preserveErrors: true,
+            ...(payload.layerId && { layerId: payload.layerId }),
+          } as VisitOptions)
+        })
+      },
+    )
+
+    return router
+  }
+
+  afterEach(async () => {
+    deferredCleanup?.()
+    deferredCleanup = null
+    await queueSettled()
+    vi.restoreAllMocks()
+  })
+
+  it("announces a layer response's flash through the layer, whose own page carries it", async () => {
+    await hold(pageWith())
+    let announcedFlash: unknown
+
+    http.setClient({
+      request: async () => inertiaResponse(editLayer({ flash: { message: 'Saved.' } })),
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', {
+        onFlash: (flash) => {
+          announcedFlash = flash
+          resolve()
+        },
+        onSuccess: () => resolve(),
+      })
+    })
+
+    expect(announcedFlash).toEqual({ message: 'Saved.' })
+    expect(layerPageOf(currentPage.get(), currentPage.get().layers![0]).flash).toEqual({ message: 'Saved.' })
+    expect(currentPage.get().flash).toEqual({})
+  })
+
+  it("strips a layer's flash from the history entry it leaves", async () => {
+    await hold(pageWith())
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    http.setClient({
+      request: async () => inertiaResponse(editLayer({ flash: { message: 'Saved.' } })),
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    const [state] = pushState.mock.lastCall as unknown as [{ page: Page }]
+    const entryLayer = state.page.layers![0]
+
+    expect((entryLayer as LayerState).flash).toEqual({})
+  })
+
+  it("a layer's live flash survives a history merge that does not touch it", async () => {
+    await hold(pageWith())
+    http.setClient({ request: async () => inertiaResponse(editLayer({ flash: { message: 'Saved.' } })) })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+
+    router.remember('note', 'typed')
+
+    expect(currentPage.get().layers![0].flash).toEqual({ message: 'Saved.' })
+  })
+
+  it("router.flash with no layer open fires onFlash with the page's flash", async () => {
+    const baseFlashes: unknown[] = []
+    await hold(pageWith(), (flash) => baseFlashes.push(flash))
+
+    router.flash('message', 'Saved.')
+
+    expect(currentPage.get().flash).toEqual({ message: 'Saved.' })
+    expect(baseFlashes).toEqual([{ message: 'Saved.' }])
+  })
+
+  it("a flash written to a layer never reaches the page's own flash", async () => {
+    const baseFlashes: unknown[] = []
+    await hold(pageWith(), (flash) => baseFlashes.push(flash))
+    http.setClient({ request: async () => inertiaResponse(editLayer()) })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+
+    router.flash('message', 'Saved.', { layerId: currentPage.get().layers![0].id })
+
+    expect(currentPage.get().layers![0].flash).toEqual({ message: 'Saved.' })
+    expect(baseFlashes).toEqual([])
+  })
+
+  it('re-renders the layer a flash was written to, since no callback carries it', async () => {
+    const swapped: (ResolvedLayer[] | undefined)[] = []
+
+    currentPage.init({
+      initialPage: pageWith(),
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async ({ layers }) => {
+        swapped.push(layers)
+      },
+    })
+    await currentPage.setQuietly(composeLayer(pageWith(), editLayer(), 'layer-1'))
+    swapped.length = 0
+
+    router.flash('message', 'Saved.', { layerId: 'layer-1' })
+
+    await vi.waitFor(() => expect(swapped).toHaveLength(1))
+    expect(swapped[0]![0].page.flash).toEqual({ message: 'Saved.' })
+  })
+
+  it("router.flash from inside a layer targets the layer's flash", async () => {
+    await hold(pageWith())
+    http.setClient({ request: async () => inertiaResponse(editLayer()) })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+    const layerId = currentPage.get().layers![0].id
+
+    router.flash('message', 'Saved.', { layerId })
+
+    expect(currentPage.get().layers![0].flash).toEqual({ message: 'Saved.' })
+    expect(currentPage.get().flash).toEqual({})
+  })
+
+  it("a layer's deferred response keeps the flash the layer already had", async () => {
+    await hold(pageWith())
+    const held: ((response: HttpResponse) => void)[] = []
+    let opens = 0
+
+    http.setClient({
+      request: ({ url }) => {
+        const path = new URL(url).pathname
+        return path === '/users/5/edit' && opens++ === 0
+          ? Promise.resolve(
+              inertiaResponse(
+                editLayer({
+                  flash: { message: 'Saved.' },
+                  deferredProps: { slow: ['stats'] },
+                  rescuedProps: ['stats'],
+                  props: { user: { id: 5 } },
+                }),
+              ),
+            )
+          : new Promise<HttpResponse>((resolve) => held.push(resolve))
+      },
+    })
+
+    await new Promise<void>((resolve) => {
+      deferredRouter().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    await vi.waitFor(() => expect(held).toHaveLength(1))
+    await queueSettled()
+    held[0](inertiaResponse(editLayer({ props: { user: { id: 5 }, stats: [1, 2, 3] }, rescuedProps: [] })))
+    await vi.waitFor(() =>
+      expect(currentPage.get().layers![0].props).toEqual(expect.objectContaining({ stats: [1, 2, 3] })),
+    )
+
+    expect(currentPage.get().layers![0].flash).toEqual({ message: 'Saved.' })
+  })
+})
+
+describe('remembered state per layer', () => {
+  const inertiaResponse = (page: Page): HttpResponse => ({
+    status: 200,
+    data: page as unknown as string,
+    headers: { 'x-inertia': 'true' },
+  })
+
+  const queueSettled = () => new Promise((resolve) => setTimeout(resolve))
+
+  const openLayer = async (preserveUrl = false): Promise<string> => {
+    http.setClient({ request: async () => inertiaResponse(editLayer()) })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', {
+        ...(preserveUrl && { preserveUrl: true }),
+        onSuccess: () => resolve(),
+        onError: () => resolve(),
+      })
+    })
+    await queueSettled()
+    return currentPage.get().layers![0].id
+  }
+
+  afterEach(async () => {
+    await queueSettled()
+    vi.restoreAllMocks()
+  })
+
+  it("namespaces a layer's remember/restore under its id, leaving the page's bag alone", async () => {
+    await hold(pageWith())
+    const layerId = await openLayer()
+
+    router.remember('typed', 'note', layerId)
+
+    expect(history.restore('note', layerId)).toBe('typed')
+    expect(history.restore('note')).toBeUndefined()
+    expect(currentPage.get().rememberedState).toEqual({ [layerId]: { note: 'typed' } })
+  })
+
+  it('a remember/restore with no layer open keeps the top-level bag it always used', async () => {
+    await hold(pageWith())
+
+    router.remember('typed', 'note')
+
+    expect(history.restore('note')).toBe('typed')
+    expect(currentPage.get().rememberedState).toEqual({ note: 'typed' })
+  })
+
+  it("drops a closed layer's bag once its removal has settled", async () => {
+    await hold(pageWith())
+    const layerId = await openLayer(true)
+
+    router.remember('typed', 'note', layerId)
+    expect(history.restore('note', layerId)).toBe('typed')
+
+    await layerClosing.close(layerId)
+    await history.processQueue()
+
+    eventHandler.init()
+    listeners.get('popstate')!({ state: { page: pageWith() } } as PopStateEvent)
+
+    await vi.waitFor(() => expect(currentPage.get().rememberedState).toEqual({}))
+    expect(router.restore('note', layerId)).toBeUndefined()
+  })
+
+  it("a restored page keeps the layer's bag, so reopening it finds the state", async () => {
+    const layerId = 'layer-1'
+    const restored = pageWith({
+      layers: [editLayer() as unknown as Page['layers'] extends Array<infer L> ? L : never],
+      rememberedState: { [layerId]: { note: 'typed' } },
+    })
+
+    currentPage.init({
+      initialPage: restored,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent: async () => {},
+    })
+    await currentPage.setQuietly(restored)
+
+    expect(history.restore('note', layerId)).toBe('typed')
+  })
+})
+
+describe('once props per layer', () => {
+  const inertiaResponse = (page: Page): HttpResponse => ({
+    status: 200,
+    data: page as unknown as string,
+    headers: { 'x-inertia': 'true' },
+  })
+
+  const queueSettled = () => new Promise((resolve) => setTimeout(resolve))
+
+  const cached = () => (prefetchedRequests as unknown as { cached: unknown[] }).cached
+
+  afterEach(async () => {
+    await queueSettled()
+    prefetchedRequests.removeAll()
+    vi.restoreAllMocks()
+  })
+
+  it('names no once keys at all on the visit that opens a layer', async () => {
+    await hold(pageWith({ props: { baseProp: 'base value' }, onceProps: { baseKey: { prop: 'baseProp' } } }))
+
+    let exceptOnce: string | undefined = 'unset'
+    http.setClient({
+      request: async ({ headers }) => {
+        exceptOnce = (headers ?? {})['X-Inertia-Except-Once-Props']
+
+        return Promise.resolve(inertiaResponse(editLayer()))
+      },
+    })
+
+    router.layer('http://localhost/users/5/edit')
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+
+    expect(exceptOnce).toBeUndefined()
+  })
+
+  it("a layer-targeted partial names the layer's once keys in the except header", async () => {
+    await hold(pageWith({ props: { baseProp: 'base value' }, onceProps: { baseKey: { prop: 'baseProp' } } }))
+    http.setClient({
+      request: async () =>
+        inertiaResponse(
+          editLayer({
+            onceProps: { layerKey: { prop: 'layerProp' } },
+            props: { user: { id: 5 }, layerProp: 'layer value' },
+          }),
+        ),
+    })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+
+    let exceptOnce: string | undefined
+    http.setClient({
+      request: async ({ headers }) => {
+        exceptOnce = (headers ?? {})['X-Inertia-Except-Once-Props']
+        return Promise.resolve(inertiaResponse(editLayer({ props: { user: { id: 5 } } })))
+      },
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().reload({
+        layerId: currentPage.get().layers![0].id,
+        only: ['user'],
+        onSuccess: () => resolve(),
+        onError: () => resolve(),
+      })
+    })
+
+    expect(exceptOnce).toBe('layerKey')
+  })
+
+  it("a layer response's once props back-fill into the layer, never with the page's value", async () => {
+    await hold(pageWith({ props: { baseProp: 'base value' }, onceProps: { baseKey: { prop: 'baseProp' } } }))
+    http.setClient({
+      request: async () =>
+        inertiaResponse(
+          editLayer({
+            onceProps: { layerKey: { prop: 'layerProp' } },
+            props: { user: { id: 5 }, layerProp: 'layer value' },
+          }),
+        ),
+    })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+    await queueSettled()
+    const layerId = currentPage.get().layers![0].id
+
+    http.setClient({
+      request: async () =>
+        inertiaResponse(editLayer({ onceProps: { layerKey: { prop: 'layerProp' } }, props: { user: { id: 9 } } })),
+    })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    expect(currentPage.get().layers![0].props).toEqual(
+      expect.objectContaining({ user: { id: 9 }, layerProp: 'layer value' }),
+    )
+    expect(currentPage.get().layers![0].props).not.toHaveProperty('baseProp')
+  })
+
+  it("does not put the page's once props into a cached layer response", async () => {
+    await hold(pageWith({ props: { baseProp: 'base value' }, onceProps: { baseKey: { prop: 'baseProp' } } }))
+    http.setClient({
+      request: async () =>
+        inertiaResponse(editLayer({ onceProps: { baseKey: { prop: 'baseProp' } }, props: { user: { id: 5 } } })),
+    })
+
+    new Router().prefetch('http://localhost/users/5/edit', {}, { cacheFor: '30s' })
+    await vi.waitFor(() => expect(cached()).toHaveLength(1))
+
+    prefetchedRequests.updateCachedOncePropsFromCurrentPage()
+
+    const [prefetched] = cached() as unknown as [{ response: Promise<Response> }]
+    const page = await prefetched.response.then((response) => response.getPageResponse())
+
+    expect(page.props).not.toHaveProperty('baseProp')
+  })
+
+  it("re-syncs a cached prefetch when the once props on screen are only a layer's", async () => {
+    await hold(pageWith())
+    http.setClient({
+      request: async () =>
+        inertiaResponse(editLayer({ url: '/users/5/notes', onceProps: { token: { prop: 'token' } } })),
+    })
+
+    new Router().prefetch('http://localhost/users/5/notes', {}, { cacheFor: '30s' })
+    await vi.waitFor(() => expect(cached()).toHaveLength(1))
+
+    http.setClient({
+      request: async () =>
+        inertiaResponse(
+          editLayer({ onceProps: { token: { prop: 'token' } }, props: { user: { id: 5 }, token: 'live' } }),
+        ),
+    })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    const [prefetched] = cached() as unknown as [{ response: Promise<Response> }]
+    const page = await prefetched.response.then((response) => response.getPageResponse())
+
+    expect(page.props.token).toBe('live')
+  })
+
+  it('flushes the cached prefetch of the layer a fresh response landed on', async () => {
+    await hold(pageWith())
+    http.setClient({ request: async () => inertiaResponse(editLayer()) })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve(), onError: () => resolve() })
+    })
+
+    new Router().prefetch('http://localhost/users/5/edit', {}, { cacheFor: '30s' })
+    await vi.waitFor(() => expect(cached()).toHaveLength(1))
+
+    http.setClient({ request: async () => inertiaResponse(editLayer({ props: { user: { id: 9 } } })) })
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', {
+        method: 'post',
+        onSuccess: () => resolve(),
+        onError: () => resolve(),
+      })
+    })
+
+    expect(cached()).toHaveLength(0)
+  })
+})
+
+describe("an infinite scroll's url sync", () => {
+  const item = (page: string): HTMLElement =>
+    ({
+      dataset: { infiniteScrollPage: page },
+      offsetParent: {},
+      getBoundingClientRect: () => ({ top: 0, bottom: 10, left: 0, right: 10 }),
+    }) as unknown as HTMLElement
+
+  const paginate = async (layerId: string | undefined): Promise<ClientSideVisitOptions[]> => {
+    const replaced: ClientSideVisitOptions[] = []
+    vi.spyOn(Router.prototype, 'replace').mockImplementation((params) => {
+      replaced.push(params as ClientSideVisitOptions)
+    })
+
+    const items = [item('2'), item('2')]
+    const manager = useInfiniteScrollQueryString({
+      layerId,
+      getPageName: () => 'page',
+      getItemsElement: () => ({ children: items }) as unknown as HTMLElement,
+      shouldPreserveUrl: () => false,
+    })
+
+    manager.onItemIntersected(items[1])
+    await vi.waitFor(() => expect(replaced).toHaveLength(1))
+
+    return replaced
+  }
+
+  beforeEach(() => {
+    Object.assign(window, { innerHeight: 800, innerWidth: 800 })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it("writes the page number onto the layer's own url, and aims the visit at the layer", async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1', { url: '/users/5/edit' }))
+
+    expect(await paginate('layer-1')).toEqual([
+      { url: '/users/5/edit?page=2', layerId: 'layer-1', preserveScroll: true, preserveState: true },
+    ])
+  })
+
+  it("writes the page number onto the page's own url when the scroll is not in a layer", async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1', { url: '/users/5/edit' }))
+
+    expect(await paginate(undefined)).toEqual([
+      { url: '/users?page=2', layerId: undefined, preserveScroll: true, preserveState: true },
+    ])
+  })
+
+  it("keeps a layer and the page paginating at once out of each other's urls", async () => {
+    await hold(composeLayer(pageWith(), editLayer(), 'layer-1', { url: '/users/5/edit' }))
+
+    const replaced: ClientSideVisitOptions[] = []
+    vi.spyOn(Router.prototype, 'replace').mockImplementation((params) => {
+      replaced.push(params as ClientSideVisitOptions)
+    })
+
+    const items = [item('2'), item('2')]
+    const scrollFor = (layerId?: string) =>
+      useInfiniteScrollQueryString({
+        layerId,
+        getPageName: () => 'page',
+        getItemsElement: () => ({ children: items }) as unknown as HTMLElement,
+        shouldPreserveUrl: () => false,
+      })
+
+    scrollFor(undefined).onItemIntersected(items[1])
+    scrollFor('layer-1').onItemIntersected(items[1])
+
+    await vi.waitFor(() => expect(replaced).toHaveLength(2))
+
+    expect(replaced.map((visit) => `${visit.layerId}:${visit.url}`).sort()).toEqual([
+      'layer-1:/users/5/edit?page=2',
+      'undefined:/users?page=2',
+    ])
+  })
+})
diff --git a/packages/core/tests/layer-walk.test.ts b/packages/core/tests/layer-walk.test.ts
new file mode 100644
index 000000000..4719e9833
--- /dev/null
+++ b/packages/core/tests/layer-walk.test.ts
@@ -0,0 +1,1329 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { router } from '../src'
+import dialog from '../src/dialog'
+import { eventHandler } from '../src/eventHandler'
+import { history } from '../src/history'
+import { http } from '../src/http'
+import { HttpNetworkError, HttpResponseError } from '../src/httpErrors'
+import { InitialVisit } from '../src/initialVisit'
+import { layerClosing } from '../src/layers'
+import { composeLayer, maxLayerChain, resolveInitialPage } from '../src/layers'
+import { page as currentPage } from '../src/page'
+import { prefetchedRequests } from '../src/prefetched'
+import { Router } from '../src/router'
+import { SessionStorage } from '../src/sessionStorage'
+import { HttpRequestHeaders, HttpResponse, Page, PageHandler, VisitOptions } from '../src/types'
+import { listeners } from './support/browser'
+import { marked, pageWith } from './support/layers'
+
+describe('the walk a cold layer sends for the base beneath it', () => {
+  const loginPage = pageWith({ component: 'Auth/Login', url: '/login' })
+
+  const layerAt = (url: string, component: string, base?: string): Page =>
+    pageWith({ component, url, layer: { key: component, base }, props: {} })
+
+  const hold = async (page: Page, swapComponent: PageHandler<never> = async () => {}): Promise<void> => {
+    currentPage.init({
+      initialPage: page,
+      resolveComponent: (name) => ({ name }) as never,
+      swapComponent,
+    })
+
+    await currentPage.setQuietly(page)
+  }
+
+  const swapping = (swaps: { component: string; preserveState: boolean }[]): PageHandler<never> =>
+    (async ({ component, preserveState }) =>
+      swaps.push({
+        component: (component as { name: string } | undefined)?.name ?? '',
+        preserveState,
+      })) as PageHandler<never>
+
+  const held = new Map<string, { resolve: (response: HttpResponse) => void; reject: (error: Error) => void }>()
+
+  const sent = new Map<string, HttpRequestHeaders>()
+
+  const inertiaResponse = (page: Page): HttpResponse => ({
+    status: 200,
+    data: page as unknown as string,
+    headers: { 'x-inertia': 'true' },
+  })
+
+  const errorPage: HttpResponse = { status: 500, data: '<html>Server Error</html>', headers: {} }
+
+  const answering = (pages: Record<string, Page>): string[] => {
+    const requested: string[] = []
+
+    http.setClient({
+      request: ({ url, headers }) => {
+        const path = new URL(url).pathname
+        requested.push(path)
+        sent.set(path, headers ?? {})
+
+        return pages[path]
+          ? Promise.resolve(inertiaResponse(pages[path]))
+          : new Promise<HttpResponse>((resolve, reject) => held.set(path, { resolve, reject }))
+      },
+    })
+
+    return requested
+  }
+
+  const answer = (path: string, page: Page): Promise<void> => {
+    held.get(path)!.resolve(inertiaResponse(page))
+
+    return new Promise((resolve) => setTimeout(resolve))
+  }
+
+  const refuse = (path: string, error: Error): Promise<void> => {
+    held.get(path)!.reject(error)
+
+    return new Promise((resolve) => setTimeout(resolve))
+  }
+
+  const refuseWith = (path: string, response: HttpResponse): Promise<void> => {
+    held.get(path)!.resolve(response)
+
+    return new Promise((resolve) => setTimeout(resolve))
+  }
+
+  const openCold = (options: VisitOptions = {}): Promise<Page> =>
+    new Promise((resolve) => {
+      const settle = () => resolve(currentPage.get())
+
+      new Router().visit('http://localhost/login', { method: 'post', ...options, onSuccess: settle, onError: settle })
+    })
+
+  const walked = (component: string) => vi.waitFor(() => expect(currentPage.get().component).toBe(component))
+
+  const address = window.location.href
+  const client = http.getClient()
+
+  const waitingForTheHop = async (): Promise<void> => {
+    await vi.waitFor(() => expect(held.has('/users')).toBe(true))
+    await new Promise((resolve) => setTimeout(resolve))
+  }
+
+  beforeEach(() => {
+    held.clear()
+    sent.clear()
+    prefetchedRequests.removeAll()
+  })
+
+  afterEach(() => {
+    window.location.href = address
+    http.setClient(client)
+    vi.restoreAllMocks()
+  })
+
+  it('opens the layer over a base that has not arrived yet', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+
+    const page = await openCold()
+
+    expect(page.component).toBe('')
+    expect(page.url).toBe('/users')
+    expect(page.layers).toEqual([
+      expect.objectContaining({ key: 'Users/Edit', url: '/users/5/edit', base: '/users', standalone: true }),
+    ])
+  })
+
+  it("writes the layer's address before the base beneath it has been fetched", async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await openCold()
+    await history.processQueue()
+
+    expect(pushState).toHaveBeenCalledWith(expect.anything(), '', '/users/5/edit')
+  })
+
+  it('keeps the address on the top layer even when the visit asked to preserve the url', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    const page = await openCold({ preserveUrl: true })
+    await history.processQueue()
+
+    expect(page.layers).toEqual([expect.objectContaining({ key: 'Users/Edit', url: '/users/5/edit' })])
+    expect(pushState).toHaveBeenCalledWith(expect.anything(), '', '/users/5/edit')
+  })
+
+  it('resolves a two-deep cold open in three requests, top down', async () => {
+    await hold(loginPage)
+    const requested = answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5'),
+      '/users/5': layerAt('/users/5', 'Users/Show', '/users'),
+      '/users': pageWith(),
+    })
+
+    await openCold()
+    await walked('Users/Index')
+
+    expect(requested).toEqual(['/login', '/users/5', '/users'])
+    expect(currentPage.get().url).toBe('/users')
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Users/Show', 'Users/Edit'])
+  })
+
+  it('marks every layer it resolves standalone', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5'),
+      '/users/5': layerAt('/users/5', 'Users/Show', '/users'),
+      '/users': pageWith(),
+    })
+
+    await openCold()
+    await walked('Users/Index')
+
+    expect(currentPage.get().layers!.map((layer) => layer.standalone)).toEqual([true, true])
+  })
+
+  it('pushes one history entry for the whole walk, however deep it goes', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5'),
+      '/users/5': layerAt('/users/5', 'Users/Show', '/users'),
+      '/users': pageWith(),
+    })
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await openCold()
+    await walked('Users/Index')
+    await history.processQueue()
+
+    expect(pushState).toHaveBeenCalledOnce()
+  })
+
+  it('does not walk for a layer that declares no base at all', async () => {
+    await hold(loginPage)
+    const requested = answering({ '/login': layerAt('/users/5/edit', 'Users/Edit') })
+
+    const page = await openCold()
+
+    expect(requested).toEqual(['/login'])
+    expect(page.component).toBe('Users/Edit')
+    expect(page.layers).toBeUndefined()
+  })
+
+  it('does not reload the page when a hop comes back as a location visit on a new version', async () => {
+    await hold(loginPage)
+    const requested: string[] = []
+
+    http.setClient({
+      request: async ({ url }) => {
+        const path = new URL(url).pathname
+        requested.push(path)
+
+        return path === '/login'
+          ? inertiaResponse(layerAt('/users/5/edit', 'Users/Edit', '/users'))
+          : {
+              status: 409,
+              data: '',
+              headers: { 'x-inertia-location': 'http://localhost/elsewhere', 'x-inertia-version': 'v2' },
+            }
+      },
+    })
+
+    await openCold()
+    await vi.waitFor(() => expect(requested).toEqual(['/login', '/users']))
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(window.location.href).toBe(address)
+  })
+
+  it('does not re-announce flash the base is already holding when a hop lands', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+
+    await openCold()
+    await waitingForTheHop()
+
+    new Router().flash('message', 'Saved.')
+    const dispatched = vi.spyOn(document, 'dispatchEvent')
+
+    await answer('/users', layerAt('/users', 'Users/Index', '/users/list'))
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+
+    expect(currentPage.get().flash).toEqual({ message: 'Saved.' })
+    expect(dispatched.mock.calls.map(([event]) => (event as Event).type)).not.toContain('inertia:flash')
+  })
+
+  it('does not interrupt a visit the user made while the walk is running', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5') })
+
+    await openCold()
+    await vi.waitFor(() => expect(held.has('/users/5')).toBe(true))
+    await new Promise((resolve) => setTimeout(resolve))
+
+    let cancelled = false
+    router.visit('http://localhost/dashboard', { onCancel: () => (cancelled = true) })
+    await vi.waitFor(() => expect(held.has('/dashboard')).toBe(true))
+
+    await answer('/users/5', layerAt('/users/5', 'Users/Show', '/users'))
+    await vi.waitFor(() => expect(held.has('/users')).toBe(true))
+
+    expect(cancelled).toBe(false)
+  })
+
+  it('stops when the base it is sent for is already on the stack', async () => {
+    await hold(loginPage)
+    const requested = answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5'),
+      '/users/5': layerAt('/users/5', 'Users/Show', '/users/5/edit'),
+    })
+
+    await openCold()
+    await walked('Users/Show')
+
+    expect(requested).toEqual(['/login', '/users/5'])
+    expect(currentPage.get().url).toBe('/users/5')
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Users/Edit'])
+  })
+
+  it('stops when the base it is sent for is the same url written absolutely', async () => {
+    await hold(loginPage)
+    const requested = answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5'),
+      '/users/5': layerAt('/users/5', 'Users/Show', 'http://localhost/users/5/edit'),
+    })
+
+    await openCold()
+    await walked('Users/Show')
+
+    expect(requested).toEqual(['/login', '/users/5'])
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Users/Edit'])
+  })
+
+  it('announces the errors the layer it promoted brought', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5'),
+      '/users/5': {
+        ...layerAt('/users/5', 'Users/Show', '/users/5/edit'),
+        props: { errors: { team: 'The team field is required.' } },
+      },
+    })
+    const dispatched = vi.spyOn(document, 'dispatchEvent')
+
+    await openCold()
+    await walked('Users/Show')
+
+    expect(currentPage.get().props.errors).toEqual({ team: 'The team field is required.' })
+    expect(dispatched.mock.calls.map(([event]) => (event as Event).type)).toContain('inertia:error')
+  })
+
+  it('does not re-announce the flash the base was holding when the walk stops', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5') })
+
+    await openCold()
+    await vi.waitFor(() => expect(held.has('/users/5')).toBe(true))
+    await new Promise((resolve) => setTimeout(resolve))
+
+    new Router().flash('message', 'Saved.')
+    const dispatched = vi.spyOn(document, 'dispatchEvent')
+
+    await answer('/users/5', layerAt('/users/5', 'Users/Show', '/users/5/edit'))
+    await walked('Users/Show')
+
+    expect(currentPage.get().flash).toEqual({})
+    expect(dispatched.mock.calls.map(([event]) => (event as Event).type)).not.toContain('inertia:flash')
+  })
+
+  it('announces the flash a layer that opened over a base of its own brought', async () => {
+    await hold(loginPage)
+    answering({ '/login': { ...layerAt('/users/5/edit', 'Users/Edit', '/users'), flash: { message: 'Saved.' } } })
+    const dispatched = vi.spyOn(document, 'dispatchEvent')
+
+    await openCold()
+
+    expect(dispatched.mock.calls.map(([event]) => (event as Event).type)).toContain('inertia:flash')
+  })
+
+  it('announces the flash once, and not again as the walk fills the stack beneath it', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': { ...layerAt('/users/5/edit', 'Users/Edit', '/users'), flash: { message: 'Saved.' } },
+      '/users': layerAt('/users', 'Users/Index', '/users/list'),
+      '/users/list': pageWith({ component: 'Users/List', url: '/users/list' }),
+    })
+    const dispatched = vi.spyOn(document, 'dispatchEvent')
+
+    await openCold()
+    await walked('Users/List')
+
+    expect(dispatched.mock.calls.filter(([event]) => (event as Event).type === 'inertia:flash')).toHaveLength(1)
+  })
+
+  it('writes the layer onto the entry, not the base the walk is still fetching', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await openCold()
+    await history.processQueue()
+
+    const [[state]] = pushState.mock.calls as unknown as [[{ page: Page }]]
+
+    expect(state.page.component).toBe('Users/Edit')
+    expect(state.page.url).toBe('/users/5/edit')
+    expect(state.page.layers).toBeUndefined()
+  })
+
+  it('writes the whole stack onto the entry once the base beneath it has arrived', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users'), '/users': pageWith() })
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    await openCold()
+    await walked('Users/Index')
+    await history.processQueue()
+
+    const [state] = replaceState.mock.lastCall as unknown as [{ page: Page }]
+
+    expect(state.page.component).toBe('Users/Index')
+    expect(state.page.layers).toEqual([expect.objectContaining({ key: 'Users/Edit' })])
+  })
+
+  it('writes the deepest layer it has reached onto the entry as the walk goes deeper', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users'),
+      '/users': layerAt('/users', 'Users/Index', '/users/list'),
+    })
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    await openCold()
+    await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(2))
+    await history.processQueue()
+
+    const [state] = replaceState.mock.lastCall as unknown as [{ page: Page }]
+
+    expect(state.page.component).toBe('Users/Index')
+    expect(state.page.layers).toEqual([expect.objectContaining({ key: 'Users/Edit' })])
+  })
+
+  it('opens a warm layer on top of the stack a cold open walked to', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users'),
+      '/users': pageWith(),
+      '/users/5/notes': layerAt('/users/5/notes', 'Notes/Edit', '/users/5'),
+    })
+
+    await openCold()
+    await walked('Users/Index')
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/notes', { onSuccess: () => resolve() })
+    })
+
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Users/Edit', 'Notes/Edit'])
+    expect(currentPage.get().layers![0].standalone).toBe(true)
+    expect(currentPage.get().layers![1].standalone).toBe(false)
+  })
+
+  it('rewrites a cold layer in place when a warm visit brings its key back', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users'),
+      '/users': pageWith(),
+      '/users/5/edit': pageWith({
+        component: 'Users/Edit',
+        url: '/users/5/edit',
+        layer: { key: 'Users/Edit', base: '/users' },
+        props: { user: { id: 5, name: 'Renamed' } },
+      }),
+    })
+
+    await openCold()
+    await walked('Users/Index')
+
+    const [cold] = currentPage.get().layers!
+    const id = cold.id
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/users/5/edit', { onSuccess: () => resolve() })
+    })
+
+    const [rewritten] = currentPage.get().layers!
+    expect(currentPage.get().layers).toHaveLength(1)
+    expect(rewritten.id).toBe(id)
+    expect(rewritten.standalone).toBe(true)
+    expect(rewritten.props).toEqual({ user: { id: 5, name: 'Renamed' } })
+  })
+
+  it('does not land the entry on a layer the user has dismissed', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+
+    await openCold()
+    await waitingForTheHop()
+
+    const [top] = currentPage.get().layers!
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await marked(top.id)
+    await currentPage.set({ ...currentPage.get(), props: { errors: {} } }, { preservesBase: true })
+    await history.processQueue()
+
+    const [state] = pushState.mock.lastCall as unknown as [{ page: Page }]
+
+    expect(state.page.component).not.toBe('Users/Edit')
+    expect(state.page.layers).toBeUndefined()
+  })
+
+  it('restores an entry the walk never filled in by promoting its layer to the page', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    eventHandler.init()
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await openCold()
+    await waitingForTheHop()
+    await history.processQueue()
+
+    const [[state]] = pushState.mock.calls as unknown as [[{ page: Page }]]
+
+    listeners.get('popstate')!({ state } as PopStateEvent)
+    await walked('Users/Edit')
+
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('re-requests a restored entry that holds no page, replacing it with the page fetched for its url', async () => {
+    const swaps: { component: string; preserveState: boolean }[] = []
+
+    window.location.href = 'http://localhost/users/5/edit'
+
+    await hold(loginPage, swapping(swaps))
+    const requested = answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    eventHandler.init()
+    const pushState = vi.spyOn(window.history, 'pushState')
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    await openCold()
+    await waitingForTheHop()
+
+    const [top] = currentPage.get().layers!
+    await marked(top.id)
+    await layerClosing.closed(top.id)
+    await history.processQueue()
+
+    const [captured] = pushState.mock.lastCall as unknown as [{ page: Page }]
+    listeners.get('popstate')!({ state: captured } as PopStateEvent)
+
+    const installed = swaps.length
+    const pushes = pushState.mock.calls.length
+    await vi.waitFor(() => expect(requested.filter((path) => path === '/users')).toHaveLength(2))
+    await answer('/users', pageWith())
+
+    await walked('Users/Index')
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().props).toEqual({ users: [] })
+    expect(currentPage.get().url).toBe('/users')
+
+    expect(swaps.slice(installed)).toEqual([{ component: 'Users/Index', preserveState: true }])
+    expect(pushState.mock.calls).toHaveLength(pushes)
+    const [state] = replaceState.mock.lastCall as unknown as [{ page: Page }]
+    expect(state.page.component).toBe('Users/Index')
+    expect(state.page.layers).toBeUndefined()
+  })
+
+  it('never hands the adapter a blank page when a blank entry is restored', async () => {
+    const swaps: { component: string; preserveState: boolean }[] = []
+
+    window.location.href = 'http://localhost/users/5/edit'
+
+    await hold(loginPage, swapping(swaps))
+    const requested = answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    eventHandler.init()
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await openCold()
+    await waitingForTheHop()
+
+    const [top] = currentPage.get().layers!
+    await marked(top.id)
+    await layerClosing.closed(top.id)
+    await history.processQueue()
+
+    const [captured] = pushState.mock.lastCall as unknown as [{ page: Page }]
+    listeners.get('popstate')!({ state: captured } as PopStateEvent)
+
+    const installed = swaps.length
+    await vi.waitFor(() => expect(requested.filter((path) => path === '/users')).toHaveLength(2))
+
+    expect(swaps.slice(installed).some(({ component }) => component === '')).toBe(false)
+
+    await answer('/users', pageWith())
+    await walked('Users/Index')
+    expect(currentPage.get().component).toBe('Users/Index')
+  })
+
+  it('restores a composed entry as it was written, not as a re-request', async () => {
+    const restored = composeLayer(
+      pageWith(),
+      pageWith({ component: 'Teams/Edit', layer: { key: 'Teams/Edit' } }),
+      'layer-9',
+    )
+
+    await hold(loginPage)
+    eventHandler.init()
+
+    listeners.get('popstate')!({ state: { page: restored } } as PopStateEvent)
+    await walked('Users/Index')
+
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Teams/Edit'])
+  })
+
+  it('recovers a blank restore on an old version through missingHistoryItem, never rendering the blank', async () => {
+    const swaps: { component: string; preserveState: boolean }[] = []
+
+    await hold(pageWith({ component: 'Users/Index', url: '/users', version: 'v2' }), swapping(swaps))
+    answering({ '/users': pageWith({ component: 'Users/List', url: '/users', version: 'v1' }) })
+    eventHandler.init()
+    const visit = vi.spyOn(router, 'visit')
+    const offMissing = eventHandler.on('missingHistoryItem', () => {
+      router.visit(window.location.href, { preserveState: true, preserveScroll: true, replace: true })
+    })
+
+    try {
+      listeners.get('popstate')!({
+        state: { page: pageWith({ component: '', url: '/users', version: 'v1' }) },
+      } as PopStateEvent)
+
+      await vi.waitFor(() => expect(visit).toHaveBeenCalled())
+      expect(visit).toHaveBeenCalledWith('http://localhost/users', {
+        preserveState: true,
+        preserveScroll: true,
+        replace: true,
+      })
+      expect(swaps).not.toContainEqual(expect.objectContaining({ component: '' }))
+
+      await walked('Users/List')
+    } finally {
+      offMissing()
+    }
+  })
+
+  it('stops at the depth it is capped to, and warns', async () => {
+    await hold(loginPage)
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const requested = answering({
+      '/login': layerAt('/step-0', 'Step/0', '/step-1'),
+      ...Object.fromEntries(
+        Array.from({ length: maxLayerChain + 1 }, (_, step) => [
+          `/step-${step + 1}`,
+          layerAt(`/step-${step + 1}`, `Step/${step + 1}`, `/step-${step + 2}`),
+        ]),
+      ),
+    })
+
+    await openCold()
+    await walked(`Step/${maxLayerChain - 1}`)
+
+    expect(requested).toHaveLength(maxLayerChain)
+    expect(warn).toHaveBeenCalledOnce()
+    expect(warn).toHaveBeenCalledWith(
+      `A layer chain more than ${maxLayerChain} layers deep was declared, so "/step-${maxLayerChain}" was not fetched. The deepest layer that loaded is being used as the page.`,
+    )
+    expect(currentPage.get().layers).toHaveLength(maxLayerChain - 1)
+  })
+
+  it('drops a hop that lands after the user has navigated away', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users'),
+      '/dashboard': pageWith({ component: 'Dashboard', url: '/dashboard' }),
+    })
+
+    await openCold()
+    await waitingForTheHop()
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/dashboard', { onSuccess: () => resolve() })
+    })
+    await answer('/users', pageWith())
+
+    expect(currentPage.get().component).toBe('Dashboard')
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('drops a hop that lands after the user has gone back', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    eventHandler.init()
+
+    await openCold()
+    await waitingForTheHop()
+
+    listeners.get('popstate')!({ state: { page: loginPage } } as PopStateEvent)
+    await walked('Auth/Login')
+    await answer('/users', pageWith())
+
+    expect(currentPage.get().component).toBe('Auth/Login')
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('asks for the base beneath it with the version the layer arrived on', async () => {
+    await hold(pageWith({ component: 'Auth/Login', url: '/login', version: 'v0' }))
+    answering({ '/login': { ...layerAt('/users/5/edit', 'Users/Edit', '/users'), version: 'v1' } })
+
+    await openCold()
+    await waitingForTheHop()
+
+    expect(sent.get('/users')!['X-Inertia-Version']).toBe('v1')
+  })
+
+  it('lands on the layer it has when a hop comes back as an error page', async () => {
+    await hold(loginPage)
+    const overlay = vi.spyOn(dialog, 'show').mockImplementation(() => {})
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+
+    await openCold()
+    await waitingForTheHop()
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+
+    await walked('Users/Edit')
+    expect(currentPage.get().url).toBe('/users/5/edit')
+    expect(currentPage.get().layers).toBeUndefined()
+    expect(overlay).not.toHaveBeenCalled()
+  })
+
+  it('lands on the layer it has when a hop is answered by an error page the application rendered', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+
+    await openCold()
+    await waitingForTheHop()
+    await refuse(
+      '/users',
+      new HttpResponseError('Request failed with status code 500', {
+        status: 500,
+        data: pageWith({ component: 'Error', url: '/users', props: { status: 500 } }) as unknown as string,
+        headers: { 'x-inertia': 'true' },
+      }),
+    )
+
+    await walked('Users/Edit')
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('lands on the layer it has when a hop never answers', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+
+    await openCold()
+    await waitingForTheHop()
+    await refuse('/users', new HttpNetworkError('Network Error', 'http://localhost/users'))
+
+    await walked('Users/Edit')
+    expect(currentPage.get().layers).toBeUndefined()
+  })
+
+  it('lands on the deepest layer it resolved when a hop further down fails', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5'),
+      '/users/5': layerAt('/users/5', 'Users/Show', '/users'),
+    })
+
+    await openCold()
+    await waitingForTheHop()
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+
+    await walked('Users/Show')
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Users/Edit'])
+  })
+
+  it('still composes a visit made from inside the stack when a failed hop lands', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5'),
+      '/users/5': layerAt('/users/5', 'Users/Show', '/users'),
+    })
+
+    await openCold()
+    await waitingForTheHop()
+
+    new Router().visit('http://localhost/users/5/edit', { method: 'put' })
+    await vi.waitFor(() => expect(held.has('/users/5/edit')).toBe(true))
+
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+    await walked('Users/Show')
+    await answer('/users/5/edit', layerAt('/users/5/edit', 'Users/Edit', '/users/5'))
+
+    expect(currentPage.get().component).toBe('Users/Show')
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Users/Edit'])
+  })
+
+  it('does not land a failed hop on a stack the user went back to', async () => {
+    const restored = composeLayer(
+      pageWith(),
+      pageWith({ component: 'Teams/Edit', layer: { key: 'Teams/Edit' } }),
+      'layer-9',
+    )
+
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    eventHandler.init()
+
+    await openCold()
+    await waitingForTheHop()
+
+    listeners.get('popstate')!({ state: { page: restored } } as PopStateEvent)
+    await walked('Users/Index')
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Teams/Edit'])
+  })
+
+  it('does not land a location-answered hop on a stack the user went back to', async () => {
+    const restored = composeLayer(
+      pageWith(),
+      pageWith({ component: 'Teams/Edit', layer: { key: 'Teams/Edit' } }),
+      'layer-9',
+    )
+
+    await hold(loginPage)
+    eventHandler.init()
+
+    http.setClient({
+      request: ({ url }) => {
+        const path = new URL(url).pathname
+
+        return path === '/login'
+          ? Promise.resolve(inertiaResponse(layerAt('/users/5/edit', 'Users/Edit', '/users')))
+          : new Promise<HttpResponse>((resolve, reject) => held.set(path, { resolve, reject }))
+      },
+    })
+
+    await openCold()
+    await waitingForTheHop()
+
+    listeners.get('popstate')!({ state: { page: restored } } as PopStateEvent)
+    await walked('Users/Index')
+
+    await refuseWith('/users', {
+      status: 409,
+      data: '',
+      headers: { 'x-inertia-location': 'http://localhost/elsewhere', 'x-inertia-version': 'v2' },
+    })
+
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Teams/Edit'])
+  })
+
+  it('lands on the entry the stack was already written to', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await openCold()
+    await waitingForTheHop()
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+
+    await walked('Users/Edit')
+    await history.processQueue()
+
+    expect(pushState).toHaveBeenCalledOnce()
+    expect(pushState).toHaveBeenCalledWith(expect.anything(), '', '/users/5/edit')
+  })
+
+  it('lands without remounting the stack above it or moving the scroll', async () => {
+    const swaps: { component: string; preserveState: boolean }[] = []
+
+    await hold(loginPage, swapping(swaps))
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5'),
+      '/users/5': layerAt('/users/5', 'Users/Show', '/users'),
+    })
+
+    await openCold()
+    await waitingForTheHop()
+
+    const scrollTo = vi.spyOn(window, 'scrollTo')
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+    await walked('Users/Show')
+
+    expect(swaps.at(-1)).toEqual({ component: 'Users/Show', preserveState: true })
+    expect(scrollTo).not.toHaveBeenCalled()
+  })
+
+  it('sends the walk again when a close supersedes its landing while the base component resolves', async () => {
+    let landTheImport!: () => void
+    const importing = new Promise<void>((resolve) => (landTheImport = resolve))
+    let imports = 0
+
+    currentPage.init({
+      initialPage: loginPage,
+      resolveComponent: (name) => {
+        if (name !== 'Users/Index') {
+          return { name } as never
+        }
+
+        // The first resolution hangs like a chunk crawling over a slow network; the retry is cached.
+        return (++imports === 1 ? importing.then(() => ({ name })) : { name }) as never
+      },
+      swapComponent: async () => {},
+    })
+    await currentPage.setQuietly(loginPage)
+
+    const requested = answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users'),
+      '/users': pageWith(),
+    })
+
+    await openCold()
+    await vi.waitFor(() => expect(requested).toContain('/users'))
+    await new Promise((resolve) => setTimeout(resolve))
+
+    const [top] = currentPage.get().layers!
+    await marked(top.id)
+    await layerClosing.closed(top.id)
+
+    landTheImport()
+    await vi.waitFor(() => expect(requested.filter((path) => path === '/users')).toHaveLength(2))
+
+    await walked('Users/Index')
+    expect(currentPage.get().layers).toBeUndefined()
+    expect(currentPage.get().url).toBe('/users')
+  })
+
+  it('installs the base via a re-request when the stack it was walking for has been closed', async () => {
+    const swaps: { component: string; preserveState: boolean }[] = []
+
+    await hold(loginPage, swapping(swaps))
+    const requested = answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+
+    await openCold()
+    await waitingForTheHop()
+
+    const [top] = currentPage.get().layers!
+    await marked(top.id)
+    await layerClosing.closed(top.id)
+
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+    await vi.waitFor(() => expect(requested.filter((path) => path === '/users')).toHaveLength(2))
+    await answer('/users', pageWith())
+
+    await walked('Users/Index')
+    expect(swaps.at(-1)).toEqual({ component: 'Users/Index', preserveState: true })
+    expect(currentPage.get().component).toBe('Users/Index')
+  })
+
+  it('re-requests the blank base the closed layer was standing on, replacing its entry', async () => {
+    const swaps: { component: string; preserveState: boolean }[] = []
+
+    window.location.href = 'http://localhost/users/5/edit'
+
+    await hold(loginPage, swapping(swaps))
+    const requested = answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    const pushState = vi.spyOn(window.history, 'pushState')
+    const replaceState = vi.spyOn(window.history, 'replaceState')
+
+    await openCold()
+    await waitingForTheHop()
+
+    const [top] = currentPage.get().layers!
+    await marked(top.id)
+    await layerClosing.closed(top.id)
+
+    const installed = swaps.length
+    const pushes = pushState.mock.calls.length
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+    await vi.waitFor(() => expect(requested.filter((path) => path === '/users')).toHaveLength(2))
+    await answer('/users', pageWith())
+
+    await walked('Users/Index')
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().props).toEqual({ users: [] })
+    expect(currentPage.get().url).toBe('/users')
+
+    expect(swaps.slice(installed)).toEqual([{ component: 'Users/Index', preserveState: true }])
+    expect(pushState.mock.calls).toHaveLength(pushes)
+    const [state] = replaceState.mock.lastCall as unknown as [{ page: Page }]
+    expect(state.page.component).toBe('Users/Index')
+    expect(state.page.layers).toBeUndefined()
+  })
+
+  it('does not resurrect a layer that is mid-close when its hop fails, and re-requests the base', async () => {
+    await hold(loginPage)
+    const requested = answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+
+    await openCold()
+    await waitingForTheHop()
+
+    const [top] = currentPage.get().layers!
+    await marked(top.id)
+
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+
+    expect(currentPage.get().component).not.toBe('Users/Edit')
+
+    await vi.waitFor(() => expect(requested.filter((path) => path === '/users')).toHaveLength(2))
+    await answer('/users', pageWith())
+
+    await walked('Users/Index')
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().layers).toBeUndefined()
+    expect(currentPage.get().url).toBe('/users')
+  })
+
+  it('shows the error dialog when the recovery re-request itself fails', async () => {
+    const swaps: { component: string; preserveState: boolean }[] = []
+
+    await hold(loginPage, swapping(swaps))
+    const requested = answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+    const overlay = vi.spyOn(dialog, 'show')
+
+    await openCold()
+    await waitingForTheHop()
+
+    const [top] = currentPage.get().layers!
+    await marked(top.id)
+    await layerClosing.closed(top.id)
+
+    const installed = swaps.length
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+    await vi.waitFor(() => expect(requested.filter((path) => path === '/users')).toHaveLength(2))
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+
+    await vi.waitFor(() => expect(overlay).toHaveBeenCalled())
+
+    expect(swaps.slice(installed)).toHaveLength(0)
+    expect(currentPage.get().component).toBe('')
+  })
+
+  it('does not re-request the blank when the user has navigated away from the stack being walked', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users'),
+      '/dashboard': pageWith({ component: 'Dashboard', url: '/dashboard' }),
+    })
+    const visit = vi.spyOn(router, 'visit')
+    const dispatched = vi.spyOn(document, 'dispatchEvent')
+
+    await openCold()
+    await waitingForTheHop()
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/dashboard', { onSuccess: () => resolve() })
+    })
+
+    await new Promise((resolve) => setTimeout(resolve))
+
+    await refuseWith('/users', {
+      status: 409,
+      data: '',
+      headers: { 'x-inertia-location': 'http://localhost/elsewhere', 'x-inertia-version': 'v2' },
+    })
+
+    expect(dispatched.mock.calls.filter(([event]) => (event as Event).type === 'inertia:location')).toHaveLength(1)
+    expect(currentPage.get().component).toBe('Dashboard')
+    expect(currentPage.get().layers).toBeUndefined()
+
+    expect(visit).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not land a failed hop into a stack the user has already left', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users'),
+      '/dashboard': pageWith({ component: 'Dashboard', url: '/dashboard' }),
+    })
+    const visit = vi.spyOn(router, 'visit')
+
+    await openCold()
+    await waitingForTheHop()
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/dashboard', { onSuccess: () => resolve() })
+    })
+
+    await new Promise((resolve) => setTimeout(resolve))
+
+    await refuse('/users', new HttpResponseError('Request failed with status code 500', errorPage))
+
+    expect(currentPage.get().component).toBe('Dashboard')
+    expect(currentPage.get().layers).toBeUndefined()
+
+    expect(visit).toHaveBeenCalledTimes(1)
+  })
+
+  it('records the url a redirected hop answered from on the layer it inserts', async () => {
+    await hold(loginPage)
+    answering({
+      '/login': layerAt('/users/5/edit', 'Users/Edit', '/users/5'),
+      '/users/5': layerAt('/users/5?tab=profile', 'Users/Show', '/users'),
+      '/users': pageWith(),
+    })
+
+    await openCold()
+    await walked('Users/Index')
+
+    expect(currentPage.get().layers!.map((layer) => layer.url)).toEqual(['/users/5?tab=profile', '/users/5/edit'])
+  })
+
+  it('walks on from the page a hop was redirected to', async () => {
+    await hold(loginPage)
+    const requested: string[] = []
+
+    http.setClient({
+      request: async ({ url }) => {
+        const path = new URL(url).pathname
+        requested.push(path)
+
+        if (path === '/users') {
+          return { status: 409, data: '', headers: { 'x-inertia-redirect': 'http://localhost/users/list' } }
+        }
+
+        return inertiaResponse(
+          path === '/login' ? layerAt('/users/5/edit', 'Users/Edit', '/users') : pageWith({ url: '/users/list' }),
+        )
+      },
+    })
+
+    await openCold()
+    await walked('Users/Index')
+
+    expect(requested).toEqual(['/login', '/users', '/users/list'])
+    expect(currentPage.get().url).toBe('/users/list')
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Users/Edit'])
+  })
+
+  it('keeps walking for the base a layer closed mid-walk was standing on', async () => {
+    await hold(loginPage)
+    answering({ '/login': layerAt('/users/5/edit', 'Users/Edit', '/users') })
+
+    await openCold()
+    await waitingForTheHop()
+
+    const [top] = currentPage.get().layers!
+    await marked(top.id)
+    await layerClosing.closed(top.id)
+
+    await answer('/users', layerAt('/users', 'Users/Index', '/users/list'))
+    await vi.waitFor(() => expect(held.has('/users/list')).toBe(true))
+    await answer('/users/list', pageWith({ component: 'Users/List', url: '/users/list' }))
+
+    await walked('Users/List')
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Users/Index'])
+  })
+
+  it('leaves an open stack alone when a background visit is answered on a new version', async () => {
+    await hold(composeLayer(pageWith(), pageWith({ component: 'Teams/Edit', layer: { key: 'Teams/Edit' } }), 'layer-9'))
+
+    http.setClient({
+      request: async () => ({
+        status: 409,
+        data: '',
+        headers: { 'x-inertia-location': 'http://localhost/elsewhere', 'x-inertia-version': 'v2' },
+      }),
+    })
+
+    await new Promise<void>((resolve) => {
+      new Router().visit('http://localhost/teams', { async: true, onFinish: () => resolve() })
+    })
+
+    expect(currentPage.get().component).toBe('Users/Index')
+    expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Teams/Edit'])
+  })
+
+  it('lands on the layer it has when a hop is answered on a new version', async () => {
+    await hold(loginPage)
+
+    http.setClient({
+      request: async ({ url }) =>
+        new URL(url).pathname === '/login'
+          ? inertiaResponse(layerAt('/users/5/edit', 'Users/Edit', '/users'))
+          : {
+              status: 409,
+              data: '',
+              headers: { 'x-inertia-location': 'http://localhost/elsewhere', 'x-inertia-version': 'v2' },
+            },
+    })
+
+    await openCold()
+
+    await walked('Users/Edit')
+    expect(currentPage.get().layers).toBeUndefined()
+    expect(window.location.href).toBe(address)
+  })
+
+  describe('when the layer arrives on the initial page', () => {
+    const load = async (response: Page): Promise<void> => {
+      const { page } = await resolveInitialPage(response, (name) => ({ name }) as never)
+
+      currentPage.init({
+        initialPage: page,
+        resolveComponent: (name) => ({ name }) as never,
+        swapComponent: async () => {},
+      })
+
+      InitialVisit.handle()
+
+      await new Promise((resolve) => setTimeout(resolve))
+    }
+
+    beforeEach(() => {
+      window.location.href = 'http://localhost/users/5/edit'
+      history.setCurrent({} as Page)
+    })
+
+    it('opens the layer over a base that has not arrived yet, and sends for it', async () => {
+      const requested = answering({})
+
+      await load(layerAt('/users/5/edit', 'Users/Edit', '/users'))
+
+      expect(currentPage.get().component).toBe('')
+      expect(currentPage.get().url).toBe('/users')
+      expect(currentPage.get().layers).toEqual([
+        expect.objectContaining({ key: 'Users/Edit', url: '/users/5/edit', base: '/users', standalone: true }),
+      ])
+      expect(requested).toEqual(['/users'])
+    })
+
+    it('walks on down to the page the chain stands on', async () => {
+      const requested = answering({
+        '/users': layerAt('/users', 'Users/Index', '/users/list'),
+        '/users/list': pageWith({ component: 'Users/List', url: '/users/list' }),
+      })
+
+      await load(layerAt('/users/5/edit', 'Users/Edit', '/users'))
+      await walked('Users/List')
+
+      expect(requested).toEqual(['/users', '/users/list'])
+      expect(currentPage.get().layers!.map((layer) => layer.key)).toEqual(['Users/Index', 'Users/Edit'])
+    })
+
+    it("writes the layer's address onto the entry the document arrived on", async () => {
+      const replaceState = vi.spyOn(window.history, 'replaceState')
+      const pushState = vi.spyOn(window.history, 'pushState')
+      answering({})
+
+      await load(layerAt('/users/5/edit', 'Users/Edit', '/users'))
+
+      expect(pushState).not.toHaveBeenCalled()
+      expect(replaceState).toHaveBeenCalledWith(expect.anything(), '', '/users/5/edit')
+    })
+
+    it('keeps the hash the browser is on with the layer that owns the address', async () => {
+      window.location.href = 'http://localhost/users/5/edit#profile'
+      answering({})
+
+      await load(layerAt('/users/5/edit', 'Users/Edit', '/users'))
+
+      expect(currentPage.get().layers![0].url).toBe('/users/5/edit#profile')
+      expect(currentPage.get().url).toBe('/users')
+    })
+
+    it('renders a layer that declares no base as an ordinary page', async () => {
+      const requested = answering({})
+
+      await load(layerAt('/users/5/edit', 'Users/Edit'))
+
+      expect(currentPage.get().component).toBe('Users/Edit')
+      expect(currentPage.get().url).toBe('/users/5/edit')
+      expect(currentPage.get().layers).toBeUndefined()
+      expect(currentPage.get().layer).toBeUndefined()
+      expect(requested).toEqual([])
+    })
+
+    it('does not send for a base a layer declares at its own url', async () => {
+      const requested = answering({})
+
+      await load(layerAt('/users/5/edit', 'Users/Edit', '/users/5/edit'))
+
+      expect(currentPage.get().component).toBe('Users/Edit')
+      expect(currentPage.get().layers).toBeUndefined()
+      expect(requested).toEqual([])
+    })
+
+    it('lands on the layer it opened when the base beneath it cannot be fetched', async () => {
+      answering({})
+
+      await load(layerAt('/users/5/edit', 'Users/Edit', '/users'))
+      await refuse('/users', new HttpNetworkError('Network Error', 'http://localhost/users'))
+
+      expect(currentPage.get().component).toBe('Users/Edit')
+      expect(currentPage.get().url).toBe('/users/5/edit')
+      expect(currentPage.get().layers).toBeUndefined()
+    })
+
+    it('opens a layer the return leg of a location visit arrived with', async () => {
+      const requested = answering({})
+      SessionStorage.set(SessionStorage.locationVisitKey, { preserveScroll: false })
+
+      await load(layerAt('/users/5/edit', 'Users/Edit', '/users'))
+
+      await vi.waitFor(() => expect(currentPage.get().layers).toHaveLength(1))
+      expect(currentPage.get().component).toBe('')
+      expect(currentPage.get().layers![0].key).toBe('Users/Edit')
+      expect(requested).toEqual(['/users'])
+    })
+
+    it('announces the flash the layer arrived with', async () => {
+      answering({})
+      const dispatched = vi.spyOn(document, 'dispatchEvent')
+
+      await load({ ...layerAt('/users/5/edit', 'Users/Edit', '/users'), flash: { message: 'Saved.' } } as Page)
+
+      expect(dispatched.mock.calls.map(([event]) => (event as Event).type)).toContain('inertia:flash')
+    })
+
+    it('writes the layer onto the entry while the base beneath it has not arrived', async () => {
+      const replaceState = vi.spyOn(window.history, 'replaceState')
+      answering({})
+
+      await load(layerAt('/users/5/edit', 'Users/Edit', '/users'))
+
+      const [state] = replaceState.mock.lastCall as unknown as [{ page: Page }]
+
+      expect(state.page.component).toBe('Users/Edit')
+      expect(state.page.layers).toBeUndefined()
+    })
+
+    it('mints the same layer id on every initial page, so the server and client agree', async () => {
+      answering({})
+
+      const first = await resolveInitialPage(
+        layerAt('/users/5/edit', 'Users/Edit', '/users'),
+        (name) => ({ name }) as never,
+      )
+      const second = await resolveInitialPage(
+        layerAt('/users/5/edit', 'Users/Edit', '/users'),
+        (name) => ({ name }) as never,
+      )
+
+      expect(first.page.layers!.map((layer) => layer.id)).toEqual(['layer-1'])
+      expect(second.page.layers!.map((layer) => layer.id)).toEqual(['layer-1'])
+    })
+
+    it('installs an initial page that is not a layer exactly as it arrived', async () => {
+      const requested = answering({})
+
+      currentPage.init({
+        initialPage: pageWith(),
+        resolveComponent: (name) => ({ name }) as never,
+        swapComponent: async () => {},
+      })
+
+      const arrived = currentPage.get()
+
+      InitialVisit.handle()
+      await new Promise((resolve) => setTimeout(resolve))
+
+      expect(currentPage.get()).toBe(arrived)
+      expect(requested).toEqual([])
+    })
+  })
+})
diff --git a/packages/core/tests/layers.test.ts b/packages/core/tests/layers.test.ts
new file mode 100644
index 000000000..5a6db89d6
--- /dev/null
+++ b/packages/core/tests/layers.test.ts
@@ -0,0 +1,1222 @@
+import { describe, expect, it } from 'vitest'
+import {
+  addressOf,
+  capturedBaseIsValid,
+  closeLayer,
+  composeColdLayer,
+  composeLayer,
+  composeLocalLayer,
+  dropHistoryEntry,
+  encryptsHistory,
+  entriesToUnwind,
+  insertLayerBeneath,
+  isLayerResponse,
+  layerPageOf,
+  layoutPageOf,
+  loadingBase,
+  nextLayerId,
+  normalizeLoading,
+  openLayerFor,
+  promoteDeepestLayer,
+  promoteLayer,
+  recordHistoryEntry,
+  resolveInitialPage,
+  withAddressHash,
+} from '../src/layers'
+import { createLayoutPropsStore } from '../src/layout'
+import { page as currentPage } from '../src/page'
+import { LayerState, Page, ResolvedLayer } from '../src/types'
+import { pageWith } from './support/layers'
+
+describe('isLayerResponse', () => {
+  it('is true when the response carries a layer mark', () => {
+    expect(isLayerResponse(pageWith({ layer: { key: 'Users/Edit' } }))).toBe(true)
+  })
+
+  it('is true for a layer mark that declares nothing', () => {
+    expect(isLayerResponse(pageWith({ layer: {} }))).toBe(true)
+  })
+
+  it('is false for an ordinary page response', () => {
+    expect(isLayerResponse(pageWith())).toBe(false)
+  })
+
+  it('is false when the layer mark is null', () => {
+    expect(isLayerResponse(pageWith({ layer: null } as Partial<Page>))).toBe(false)
+  })
+})
+
+describe('nextLayerId', () => {
+  it("skips ids already on the base's stack", () => {
+    const base = composeLayer(pageWith(), pageWith({ component: 'A', layer: { key: 'A' } }), 'layer-1')
+
+    expect(nextLayerId(base)).not.toBe('layer-1')
+  })
+
+  it('does not collide with a restored stack after the counter resets', () => {
+    const restored = {
+      ...pageWith(),
+      layers: [
+        {
+          id: 'layer-1',
+          key: 'A',
+          component: 'A',
+          props: {},
+          url: '/a',
+          base: null,
+          encryptHistory: false,
+          standalone: false,
+          entries: 1,
+          owner: null,
+        },
+      ],
+    }
+
+    expect(restored.layers.map((layer) => layer.id)).not.toContain(nextLayerId(restored))
+  })
+
+  it('gives every layer on a stack a different id', () => {
+    let page = pageWith()
+
+    for (let i = 0; i < 3; i++) {
+      page = composeLayer(page, pageWith({ component: `C${i}`, layer: { key: `C${i}` } }), nextLayerId(page))
+    }
+
+    expect(new Set(page.layers!.map((layer) => layer.id)).size).toBe(3)
+  })
+})
+
+describe('composeLayer', () => {
+  const base = pageWith()
+  const response = pageWith({
+    component: 'Users/Edit',
+    props: { user: { id: 5 } },
+    url: '/users/5/edit',
+    layer: { key: 'Users/Edit', base: '/users' },
+  })
+
+  it('keeps the page it composes onto as the base', () => {
+    const composed = composeLayer(base, response, 'layer-1')
+
+    expect(composed.component).toBe('Users/Index')
+    expect(composed.url).toBe('/users')
+    expect(composed.props).toEqual({ users: [] })
+  })
+
+  it('appends the response as a layer', () => {
+    const composed = composeLayer(base, response, 'layer-1')
+
+    expect(composed.layers).toEqual([
+      {
+        id: 'layer-1',
+        key: 'Users/Edit',
+        renderKey: expect.any(Number),
+        component: 'Users/Edit',
+        props: { user: { id: 5 } },
+        url: '/users/5/edit',
+        base: '/users',
+        encryptHistory: false,
+        standalone: false,
+        entries: 0,
+        owner: null,
+        deferredProps: {},
+        rescuedProps: [],
+        flash: {},
+        onceProps: {},
+        scrollProps: {},
+      },
+    ])
+  })
+
+  it('does not mark a layer opened over a page as standalone', () => {
+    expect(composeLayer(base, response, 'layer-1').layers![0].standalone).toBe(false)
+  })
+
+  it('marks a layer opened over nothing as standalone', () => {
+    expect(composeLayer(base, response, 'layer-1', { url: response.url, standalone: true }).layers![0].standalone).toBe(
+      true,
+    )
+  })
+
+  it('defaults the key to the component name when the key is empty', () => {
+    const composed = composeLayer(base, pageWith({ component: 'Users/Edit', layer: { key: '' } }), 'layer-1')
+
+    expect(composed.layers![0].key).toBe('Users/Edit')
+  })
+
+  it('defaults the key to the component name when the layer declares none', () => {
+    const composed = composeLayer(base, pageWith({ component: 'Users/Edit', layer: {} }), 'layer-1')
+
+    expect(composed.layers![0].key).toBe('Users/Edit')
+  })
+
+  it('carries a null base when none was declared', () => {
+    const withoutBase = { ...response, layer: { key: 'Users/Edit' } }
+
+    expect(composeLayer(base, withoutBase as Page, 'layer-1').layers![0].base).toBeNull()
+  })
+
+  it('stacks onto layers already present', () => {
+    const first = composeLayer(base, response, 'layer-1')
+    const second = composeLayer(first, pageWith({ component: 'Teams/Show', layer: { key: 'Teams/Show' } }), 'layer-2')
+
+    expect(second.layers!.map((layer) => layer.id)).toEqual(['layer-1', 'layer-2'])
+    expect(second.component).toBe('Users/Index')
+  })
+
+  it('rewrites a layer whose key is already open, at its index', () => {
+    const open = composeLayer(base, response, 'layer-1')
+    const invalid = { ...response, props: { user: { id: 5 }, errors: { name: 'The name field is required.' } } }
+
+    const composed = composeLayer(open, invalid, 'layer-9')
+
+    expect(composed.layers).toHaveLength(1)
+    expect(composed.layers![0].props).toEqual({ user: { id: 5 }, errors: { name: 'The name field is required.' } })
+  })
+
+  it('leaves the layers above the one it rewrites where they are', () => {
+    const open = composeLayer(
+      composeLayer(base, response, 'layer-1'),
+      pageWith({ component: 'Teams/Show', layer: { key: 'Teams/Show' } }),
+      'layer-2',
+    )
+
+    const composed = composeLayer(open, response, 'layer-9')
+
+    expect(composed.layers!.map((layer) => layer.id)).toEqual(['layer-1', 'layer-2'])
+    expect(composed.layers![1]).toEqual(open.layers![1])
+  })
+
+  it('keeps the id of the layer it rewrites', () => {
+    const open = composeLayer(base, response, 'layer-1')
+
+    expect(composeLayer(open, response, 'layer-9').layers![0].id).toBe('layer-1')
+  })
+
+  it('keeps whether the layer it rewrites was standalone', () => {
+    const open = composeLayer(base, response, 'layer-1', { url: response.url, standalone: true })
+
+    expect(composeLayer(open, response, 'layer-9').layers![0].standalone).toBe(true)
+  })
+
+  it('appends a second layer of the same component opened under another key', () => {
+    const open = composeLayer(base, response, 'layer-1')
+
+    const composed = composeLayer(open, { ...response, layer: { ...response.layer, key: 'Users/Edit:6' } }, 'layer-2')
+
+    expect(composed.layers!.map((layer) => layer.id)).toEqual(['layer-1', 'layer-2'])
+  })
+
+  it('does not rewrite an open key when the new layer is standalone', () => {
+    const open = composeLayer(base, response, 'layer-1')
+
+    const composed = composeLayer(open, response, 'layer-2', { url: response.url, standalone: true })
+
+    expect(composed.layers).toHaveLength(2)
+    expect(composed.layers).toContainEqual(expect.objectContaining({ id: 'layer-1', standalone: false }))
+  })
+
+  it('does not mutate the stack it rewrites', () => {
+    const open = composeLayer(base, response, 'layer-1')
+    const openCopy = structuredClone(open)
+
+    composeLayer(open, response, 'layer-9')
+
+    expect(open).toEqual(openCopy)
+  })
+
+  it('does not mutate either input', () => {
+    const baseCopy = structuredClone(base)
+    const responseCopy = structuredClone(response)
+
+    composeLayer(base, response, 'layer-1')
+
+    expect(base).toEqual(baseCopy)
+    expect(response).toEqual(responseCopy)
+  })
+
+  it('strips the layer mark from the layer it composes', () => {
+    const layer = composeLayer(base, response, 'layer-1').layers![0]
+
+    expect(layer).not.toHaveProperty('layer')
+  })
+
+  it('updates initialDeferredProps when a rewrite brings new deferred groups', () => {
+    const open = composeLayer(base, { ...response, deferredProps: { default: ['stats'] } }, 'layer-1')
+
+    expect(open.layers![0].initialDeferredProps).toEqual({ default: ['stats'] })
+
+    const rewritten = composeLayer(open, { ...response, deferredProps: { default: ['history'] } }, 'layer-9')
+
+    expect(rewritten.layers![0].initialDeferredProps).toEqual({ default: ['history'] })
+  })
+})
+
+describe('insertLayerBeneath', () => {
+  const cold = pageWith({
+    component: 'Users/Edit',
+    props: { user: { id: 5 } },
+    url: '/users/5/edit',
+    layer: { key: 'Users/Edit', base: '/users' },
+  })
+
+  const stack = composeLayer(
+    pageWith({ component: 'Dashboard', props: { stats: 3 }, url: '/dashboard' }),
+    cold,
+    'layer-1',
+    { url: cold.url, standalone: true },
+  )
+
+  const fetched = pageWith({
+    component: 'Users/Index',
+    props: { users: [] },
+    url: '/users',
+    layer: { key: 'Users/Index', base: '/dashboard' },
+  })
+
+  it('inserts the fetched base as the bottom layer', () => {
+    expect(insertLayerBeneath(stack, fetched, 'layer-2').layers![0]).toEqual({
+      id: 'layer-2',
+      key: 'Users/Index',
+      renderKey: expect.any(Number),
+      component: 'Users/Index',
+      props: { users: [] },
+      url: '/users',
+      base: '/dashboard',
+      encryptHistory: false,
+      standalone: true,
+      entries: 0,
+      owner: null,
+      deferredProps: {},
+      rescuedProps: [],
+      flash: {},
+      onceProps: {},
+      scrollProps: {},
+    })
+  })
+
+  it('keeps the page beneath the stack as the base', () => {
+    const walked = insertLayerBeneath(stack, fetched, 'layer-2')
+
+    expect(walked.component).toBe('Dashboard')
+    expect(walked.url).toBe('/dashboard')
+    expect(walked.props).toEqual({ stats: 3 })
+  })
+
+  it('strips the layer mark from the page', () => {
+    const walked = insertLayerBeneath(stack, fetched, 'layer-2')
+
+    expect(walked).not.toHaveProperty('layer')
+  })
+
+  it('leaves the layers above it exactly where they were', () => {
+    const hop = insertLayerBeneath(stack, fetched, 'layer-2')
+    const walked = insertLayerBeneath(
+      hop,
+      pageWith({ component: 'Teams/Show', layer: { key: 'Teams/Show' } }),
+      'layer-3',
+    )
+
+    expect(walked.layers!.map((layer) => layer.id)).toEqual(['layer-3', 'layer-2', 'layer-1'])
+    expect(walked.layers![1]).toBe(hop.layers![0])
+    expect(walked.layers![2]).toBe(hop.layers![1])
+  })
+
+  it('marks the inserted layer standalone, like the ones above it', () => {
+    const walked = insertLayerBeneath(stack, fetched, 'layer-2')
+
+    expect(walked.layers!.map((layer) => layer.standalone)).toEqual([true, true])
+  })
+
+  it('does not rewrite a layer already open under the same key', () => {
+    const walked = insertLayerBeneath(stack, cold, 'layer-2')
+
+    expect(walked.layers!.map((layer) => layer.id)).toEqual(['layer-2', 'layer-1'])
+  })
+
+  it('does not mutate the page it is given', () => {
+    const stackCopy = structuredClone(stack)
+
+    insertLayerBeneath(stack, fetched, 'layer-2')
+
+    expect(stack).toEqual(stackCopy)
+  })
+})
+
+describe('composeColdLayer', () => {
+  const cold = pageWith({
+    component: 'Users/Edit',
+    props: { user: { id: 5 } },
+    url: '/users/5/edit',
+    layer: { key: 'Users/Edit', base: '/users' },
+  })
+
+  it('leaves the page blank until the base beneath the layer is fetched', () => {
+    expect(composeColdLayer(cold, 'layer-1').component).toBe('')
+  })
+
+  it('sets the page url to the base it is fetching', () => {
+    expect(composeColdLayer(cold, 'layer-1').url).toBe('/users')
+  })
+
+  it('marks the layer standalone, since nothing was ever beneath it', () => {
+    expect(composeColdLayer(cold, 'layer-1').layers).toEqual([
+      expect.objectContaining({ id: 'layer-1', key: 'Users/Edit', url: '/users/5/edit', standalone: true }),
+    ])
+  })
+
+  it('gives the layer no url of its own when the visit preserved the url', () => {
+    expect(composeColdLayer(cold, 'layer-1', null).layers![0].url).toBeNull()
+  })
+
+  it('strips the layer mark from the page', () => {
+    const page = composeColdLayer(cold, 'layer-1')
+
+    expect(page).not.toHaveProperty('layer')
+  })
+
+  it('keeps the errors the layer arrived with off the page beneath it', () => {
+    const page = composeColdLayer(
+      { ...cold, props: { user: { id: 5 }, errors: { name: 'Required.' } } } as Page,
+      'layer-1',
+    )
+
+    expect(page.props).toEqual({ errors: {} })
+  })
+
+  it('carries the flash the layer arrived with onto the page beneath it', () => {
+    const page = composeColdLayer({ ...cold, flash: { message: 'Saved.' } } as Page, 'layer-1')
+
+    expect(page.flash).toEqual({ message: 'Saved.' })
+  })
+})
+
+describe('resolveInitialPage', () => {
+  const resolve = (name: string) => ({ name }) as never
+
+  const layerAt = (url: string, component: string, base?: string): Page =>
+    pageWith({ component, url, layer: { key: component, base }, props: {} })
+
+  it('leaves a response that is not a layer exactly as it arrived', async () => {
+    const response = pageWith()
+
+    const { page, component, layers } = await resolveInitialPage(response, resolve)
+
+    expect(page).toBe(response)
+    expect(component).toEqual({ name: 'Users/Index' })
+    expect(layers).toEqual([])
+  })
+
+  it('opens a layer loaded cold over a base that has not arrived yet', async () => {
+    const { page, component, layers } = await resolveInitialPage(
+      layerAt('/users/5/edit', 'Users/Edit', '/users'),
+      resolve,
+    )
+
+    expect(page.component).toBe('')
+    expect(page.url).toBe('/users')
+    expect(component).toBeUndefined()
+    expect(layers).toEqual([
+      expect.objectContaining({ key: 'Users/Edit', component: { name: 'Users/Edit' }, isClosing: false }),
+    ])
+  })
+
+  it('renders a layer that declares no base as an ordinary page', async () => {
+    const { page, component, layers } = await resolveInitialPage(layerAt('/users/5/edit', 'Users/Edit'), resolve)
+
+    expect(page.component).toBe('Users/Edit')
+    expect(page).not.toHaveProperty('layer')
+    expect(component).toEqual({ name: 'Users/Edit' })
+    expect(layers).toEqual([])
+  })
+
+  it('renders a layer whose base is its own url as an ordinary page', async () => {
+    const { page } = await resolveInitialPage(layerAt('/users/5/edit', 'Users/Edit', '/users/5/edit'), resolve)
+
+    expect(page.component).toBe('Users/Edit')
+    expect(page.layers).toBeUndefined()
+    expect(page).not.toHaveProperty('layer')
+  })
+
+  it('does not touch the response it was given', async () => {
+    const response = layerAt('/users/5/edit', 'Users/Edit', '/users')
+    const copy = structuredClone(response)
+
+    await resolveInitialPage(response, resolve)
+
+    expect(response).toEqual(copy)
+  })
+
+  it("puts the browser's hash on the layer that owns the address", async () => {
+    window.location.href = 'http://localhost/users/5/edit#profile'
+
+    const { page } = await resolveInitialPage(layerAt('/users/5/edit', 'Users/Edit', '/users'), resolve)
+
+    expect(page.layers![0].url).toBe('/users/5/edit#profile')
+    expect(page.url).toBe('/users')
+
+    window.location.href = 'http://localhost/users'
+  })
+
+  it('does not append the hash to a url that already carries it', async () => {
+    window.location.href = 'http://localhost/users/5/edit#profile'
+
+    const { page } = await resolveInitialPage(layerAt('/users/5/edit#profile', 'Users/Edit', '/users'), resolve)
+
+    expect(page.layers![0].url).toBe('/users/5/edit#profile')
+
+    window.location.href = 'http://localhost/users'
+  })
+
+  it('resolves the base a cold open is missing through the loading resolver', async () => {
+    const seen: [string, Page][] = []
+    const resolveLoading = (url: string, page: Page) => {
+      seen.push([url, page])
+
+      return { name: 'Loading' } as never
+    }
+
+    const { page, component } = await resolveInitialPage(
+      layerAt('/users/5/edit', 'Users/Edit', '/users'),
+      resolve,
+      resolveLoading,
+    )
+
+    expect(component).toEqual({ name: 'Loading' })
+    expect(seen).toEqual([['/users', page]])
+    expect(page.layers!.map((layer) => layer.key)).toEqual(['Users/Edit'])
+  })
+
+  it('never consults the loading resolver for an ordinary page', async () => {
+    const resolveLoading = () => {
+      throw new Error('consulted')
+    }
+
+    const { component } = await resolveInitialPage(pageWith(), resolve, resolveLoading)
+
+    expect(component).toEqual({ name: 'Users/Index' })
+  })
+})
+
+describe('loadingBase', () => {
+  const blank = () =>
+    composeColdLayer(
+      pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit', base: '/users' } }),
+      'layer-1',
+    )
+
+  it('is the base the blank page is waiting on', () => {
+    expect(loadingBase(blank())).toBe('/users')
+  })
+
+  it("is the blank page's own url once the layer above it has gone", () => {
+    const { layers: _layers, ...dismissed } = blank()
+
+    expect(loadingBase(dismissed as Page)).toBe('/users')
+  })
+
+  it('is undefined for a blank with no url at all', () => {
+    expect(loadingBase({ ...pageWith(), component: '', url: '' })).toBeUndefined()
+  })
+
+  it('is undefined for a page that has a component', () => {
+    expect(loadingBase(pageWith())).toBeUndefined()
+  })
+})
+
+describe('normalizeLoading', () => {
+  const page = pageWith()
+
+  it('is undefined when no option was given', () => {
+    expect(normalizeLoading(undefined)).toBeUndefined()
+  })
+
+  it('resolves a component as itself', async () => {
+    const component = { render: () => null }
+
+    await expect(normalizeLoading(component)!('/users', page)).resolves.toBe(component)
+  })
+
+  it('resolves a module to the component it carries', async () => {
+    const component = { render: () => null }
+
+    await expect(normalizeLoading({ default: component })!('/users', page)).resolves.toBe(component)
+  })
+
+  it('hands a resolver the url and the page, and resolves what it returns', async () => {
+    const component = { render: () => null }
+    const seen: unknown[] = []
+    const resolver = normalizeLoading((url: string, resolved: Page) => {
+      seen.push(url, resolved)
+
+      return component
+    })
+
+    await expect(resolver!('/users', page)).resolves.toBe(component)
+    expect(seen).toEqual(['/users', page])
+  })
+
+  it('unwraps the module a resolver imports', async () => {
+    const component = { render: () => null }
+
+    await expect(normalizeLoading(() => Promise.resolve({ default: component }))!('/users', page)).resolves.toBe(
+      component,
+    )
+  })
+
+  it('resolves nothing when the resolver declines', async () => {
+    await expect(normalizeLoading(() => undefined)!('/users', page)).resolves.toBeUndefined()
+  })
+
+  it('resolves a component that throws when called as itself', async () => {
+    const component = () => {
+      throw new Error('not a resolver')
+    }
+
+    await expect(normalizeLoading(component)!('/users', page)).resolves.toBe(component)
+  })
+
+  it('resolves a component whose call the rendered check recognises as itself', async () => {
+    const component = () => ({ vnode: true })
+
+    const resolver = normalizeLoading(component, { rendered: (value) => (value as { vnode?: boolean }).vnode === true })
+
+    await expect(resolver!('/users', page)).resolves.toBe(component)
+  })
+})
+
+describe('resolving a blank base through the page', () => {
+  const init = (resolveLoading?: (url: string, page: Page) => never) =>
+    currentPage.init({
+      initialPage: pageWith(),
+      resolveComponent: (name) => ({ name }) as never,
+      resolveLoading,
+      swapComponent: async () => {},
+    })
+
+  const blank = () =>
+    composeColdLayer(
+      pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit', base: '/users' } }),
+      'layer-1',
+    )
+
+  it('resolves the placeholder for the base the blank is missing', async () => {
+    init((url, page) => ({ name: `loading:${url}:${page.layers!.length}` }) as never)
+
+    await expect(currentPage.resolve('', blank())).resolves.toEqual({ name: 'loading:/users:1' })
+  })
+
+  it('resolves the placeholder for a blank page whose layer was dismissed', async () => {
+    init((url) => ({ name: `loading:${url}` }) as never)
+    const { layers: _layers, ...dismissed } = blank()
+
+    await expect(currentPage.resolve('', dismissed as Page)).resolves.toEqual({ name: 'loading:/users' })
+  })
+
+  it('resolves nothing without a loading resolver', async () => {
+    init()
+
+    await expect(currentPage.resolve('', blank())).resolves.toBeUndefined()
+  })
+
+  it('never sends a blank page to the ordinary resolver', async () => {
+    const named: string[] = []
+    currentPage.init({
+      initialPage: pageWith(),
+      resolveComponent: (name) => {
+        named.push(name)
+
+        return { name } as never
+      },
+      swapComponent: async () => {},
+    })
+
+    await currentPage.resolve('', blank())
+
+    expect(named).toEqual([])
+  })
+})
+
+describe('layerPageOf', () => {
+  const layer = (overrides: Partial<LayerState> = {}): LayerState => ({
+    id: 'layer-1',
+    key: 'Users/Edit',
+    component: 'Users/Edit',
+    props: { user: { id: 5 }, errors: { name: 'required' } },
+    url: '/users/5/edit',
+    base: '/users',
+    encryptHistory: false,
+    standalone: false,
+    entries: 1,
+    owner: null,
+    ...overrides,
+  })
+
+  it("swaps in the layer's component, props and url in place of the page's", () => {
+    const page = layerPageOf(pageWith({ version: 'v9', clearHistory: true }), layer())
+
+    expect(page.component).toBe('Users/Edit')
+    expect(page.props).toEqual({ user: { id: 5 }, errors: { name: 'required' } })
+    expect(page.url).toBe('/users/5/edit')
+  })
+
+  it('keeps the global version and clearHistory for the layer', () => {
+    const page = layerPageOf(pageWith({ version: 'v9', clearHistory: true }), layer())
+
+    expect(page.version).toBe('v9')
+    expect(page.clearHistory).toBe(true)
+  })
+
+  it("reads errors from the layer's own props, not the page's", () => {
+    const page = layerPageOf(pageWith({ props: { errors: { other: 'x' } } }), layer())
+
+    expect(page.props.errors).toEqual({ name: 'required' })
+  })
+
+  it('falls back to the address for a layer with no url of its own', () => {
+    const base = pageWith({ url: '/users' })
+    const page = layerPageOf(base, layer({ url: null }))
+
+    expect(page.url).toBe(addressOf(base))
+  })
+
+  it('falls back to the address beneath it, never the address of a layer above it', () => {
+    const local = layer({ id: 'layer-1', url: null })
+    const above = layer({ id: 'layer-2', url: '/users/9/notes' })
+    const page = { ...pageWith({ url: '/users' }), layers: [local, above] }
+
+    expect(layerPageOf(page, local).url).toBe('/users')
+    expect(layerPageOf(page, above).url).toBe('/users/9/notes')
+  })
+
+  it('carries the full stack as layers', () => {
+    const base = composeLayer(pageWith(), pageWith({ component: 'A', layer: { key: 'A' } }), 'layer-1')
+    const page = layerPageOf(base, layer())
+
+    expect(page.layers).toEqual(base.layers)
+    expect(page.layers!.map((open) => open.id)).toEqual(['layer-1'])
+  })
+
+  it('takes encryptHistory from the layer, never from the page beneath it', () => {
+    const page = layerPageOf(pageWith({ encryptHistory: true }), layer({ encryptHistory: false }))
+
+    expect(page.encryptHistory).toBe(false)
+  })
+
+  it("reads the flash the layer itself carries, never the page's", () => {
+    const page = layerPageOf(pageWith({ flash: { message: 'composite' } }), layer({ flash: { message: 'layer' } }))
+
+    expect(page.flash).toEqual({ message: 'layer' })
+  })
+
+  it("resolves a layer component with the layer's own page, not the whole page", async () => {
+    const resolved: Array<[string, Page | undefined]> = []
+    currentPage.init({
+      initialPage: pageWith(),
+      resolveComponent: (name, page) => {
+        resolved.push([name, page])
+        return { name } as never
+      },
+      swapComponent: async () => {},
+    })
+
+    const composed = composeLayer(
+      currentPage.get(),
+      pageWith({
+        component: 'Users/Edit',
+        url: '/users/5/edit',
+        layer: { key: 'Users/Edit' },
+        props: { user: { id: 5 } },
+      }),
+      'layer-1',
+    )
+    await currentPage.set(composed, { preservesBase: true })
+
+    const layerResolve = resolved.find(([name]) => name === 'Users/Edit')
+
+    expect(layerResolve).toBeDefined()
+    expect(layerResolve![1]).toEqual(layerPageOf(composed, composed.layers![0]))
+  })
+})
+
+describe('layoutPageOf', () => {
+  const resolved = (overrides: Partial<ResolvedLayer> = {}): ResolvedLayer =>
+    ({
+      id: 'layer-1',
+      key: 'Users/Edit',
+      component: {},
+      page: pageWith({
+        component: 'Users/Edit',
+        url: '/users/5/edit',
+        props: { user: { id: 5 }, errors: { name: 'required' } },
+      }),
+      url: '/users/5/edit',
+      base: '/users',
+      encryptHistory: false,
+      standalone: false,
+      entries: 1,
+      owner: null,
+      isClosing: false,
+      ...overrides,
+    }) as ResolvedLayer
+
+  it('leaves the url empty for a layer with no url of its own, so it never reaches the address', () => {
+    const page = layoutPageOf(resolved({ url: null }))
+
+    expect(page.component).toBe('Users/Edit')
+    expect(page.props).toEqual({ user: { id: 5 }, errors: { name: 'required' } })
+    expect(page.url).toBe('')
+  })
+
+  it('keeps the layer url when the layer has one', () => {
+    expect(layoutPageOf(resolved()).url).toBe('/users/5/edit')
+  })
+})
+
+describe('createLayoutPropsStore, per-layer slots', () => {
+  it("writes a layer's layout props to that layer alone, leaving the page's untouched", () => {
+    const store = createLayoutPropsStore()
+
+    store.set({ base: 'chrome' })
+    store.set({ fromLayer: 'panel' }, 'layer-1')
+
+    expect(store.getForLayer('layer-1')).toEqual({ shared: { fromLayer: 'panel' }, named: {} })
+    expect(store.getForLayer('layer-2')).toEqual({ shared: {}, named: {} })
+    expect(store.get()).toEqual({ shared: { base: 'chrome' }, named: {} })
+  })
+
+  it('writes a named slot beside the shared one for the same layer', () => {
+    const store = createLayoutPropsStore()
+
+    store.set('header', { title: 'Settings' }, 'layer-1')
+    store.set({ fromLayer: 'panel' }, 'layer-1')
+
+    expect(store.getForLayer('layer-1')).toEqual({
+      shared: { fromLayer: 'panel' },
+      named: { header: { title: 'Settings' } },
+    })
+  })
+
+  it('retainLayers drops every slot outside the stack; reset() leaves the layer slots alone', () => {
+    const store = createLayoutPropsStore()
+
+    store.set({ base: 'chrome' })
+    store.set({ fromLayer: 'panel' }, 'layer-1')
+    store.set({ other: 'x' }, 'layer-2')
+    store.set({ kept: 'y' }, 'layer-3')
+    store.retainLayers(['layer-3'])
+
+    expect(store.layerIds()).toEqual(['layer-3'])
+    expect(store.getForLayer('layer-1')).toEqual({ shared: {}, named: {} })
+    expect(store.getForLayer('layer-2')).toEqual({ shared: {}, named: {} })
+
+    store.reset()
+
+    expect(store.get()).toEqual({ shared: {}, named: {} })
+    expect(store.getForLayer('layer-3')).toEqual({ shared: { kept: 'y' }, named: {} })
+  })
+})
+
+describe('promoteDeepestLayer', () => {
+  const stack = insertLayerBeneath(
+    composeColdLayer(
+      pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit', base: '/users/5' } }),
+      'layer-1',
+    ),
+    pageWith({
+      component: 'Users/Show',
+      props: { user: { id: 5 } },
+      url: '/users/5?tab=profile',
+      layer: { key: 'Users/Show', base: '/users' },
+    }),
+    'layer-2',
+  )
+
+  it('makes the deepest layer the page the rest of the stack stands on', () => {
+    const page = promoteDeepestLayer(stack)
+
+    expect(page.component).toBe('Users/Show')
+    expect(page.props).toEqual({ user: { id: 5 } })
+    expect(page.url).toBe('/users/5?tab=profile')
+  })
+
+  it('leaves the layers above it standing', () => {
+    expect(promoteDeepestLayer(stack).layers).toEqual([expect.objectContaining({ id: 'layer-1', key: 'Users/Edit' })])
+  })
+
+  it('has no stack left when the layer it promotes is the only one', () => {
+    const alone = composeColdLayer(
+      pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit', base: '/users' } }),
+      'layer-1',
+    )
+
+    expect(promoteDeepestLayer(alone).component).toBe('Users/Edit')
+    expect(promoteDeepestLayer(alone).layers).toBeUndefined()
+  })
+
+  it('carries the encryption the promoted layer asked for onto the page', () => {
+    const secret = composeColdLayer(
+      pageWith({
+        component: 'Users/Edit',
+        url: '/users/5/edit',
+        layer: { key: 'Users/Edit', base: '/users' },
+        encryptHistory: true,
+      }),
+      'layer-1',
+    )
+
+    expect(promoteDeepestLayer(secret).encryptHistory).toBe(true)
+  })
+
+  it('does not carry the flash of the base it discards onto the page', () => {
+    expect(promoteDeepestLayer({ ...stack, flash: { message: 'Saved.' } }).flash).toEqual({})
+  })
+
+  it('leaves a page with no layers alone', () => {
+    expect(promoteDeepestLayer(pageWith())).toEqual(pageWith())
+  })
+
+  it("carries the promoted layer's deferred, rescued, once and scroll props onto the page", () => {
+    const pending = insertLayerBeneath(
+      composeColdLayer(
+        pageWith({ component: 'Users/Edit', url: '/users/5/edit', layer: { key: 'Users/Edit', base: '/users/5' } }),
+        'layer-1',
+      ),
+      pageWith({
+        component: 'Users/Show',
+        url: '/users/5',
+        layer: { key: 'Users/Show' },
+        deferredProps: { default: ['activity'] },
+        rescuedProps: ['permissions'],
+        onceProps: { banner: { prop: 'banner' } },
+        scrollProps: { notes: { pageName: 'page', previousPage: null, nextPage: 2, currentPage: 1, reset: false } },
+      }),
+      'layer-2',
+    )
+
+    const page = promoteDeepestLayer(pending)
+
+    expect(page.deferredProps).toEqual({ default: ['activity'] })
+    expect(page.initialDeferredProps).toEqual({ default: ['activity'] })
+    expect(page.rescuedProps).toEqual(['permissions'])
+    expect(page.onceProps).toEqual({ banner: { prop: 'banner' } })
+    expect(page.scrollProps).toEqual({
+      notes: { pageName: 'page', previousPage: null, nextPage: 2, currentPage: 1, reset: false },
+    })
+  })
+
+  it("leaves the promoted layer's stack fields behind", () => {
+    const page = promoteDeepestLayer(stack)
+
+    expect(page).not.toHaveProperty('id')
+    expect(page).not.toHaveProperty('key')
+    expect(page).not.toHaveProperty('standalone')
+    expect(page).not.toHaveProperty('entries')
+    expect(page).not.toHaveProperty('owner')
+  })
+})
+
+describe('openLayerFor', () => {
+  const twoPanels = composeLayer(
+    composeLayer(pageWith(), pageWith({ component: 'Panel', layer: {} }), 'layer-1', '/panels/1'),
+    pageWith({ component: 'Panel', layer: {} }),
+    'layer-2',
+    { url: '/panels/2', standalone: true },
+  )
+
+  it("finds the layer open under the response's key", () => {
+    expect(openLayerFor(twoPanels, pageWith({ component: 'Panel', layer: {} }))?.id).toBe('layer-1')
+  })
+
+  it('prefers the layer the visit was made from where two share a key', () => {
+    expect(openLayerFor(twoPanels, pageWith({ component: 'Panel', layer: {} }), 'layer-2')?.id).toBe('layer-2')
+  })
+
+  it('never matches a local layer', () => {
+    const local = composeLocalLayer(pageWith(), 'Panel', {}, 'layer-9', 'base-1')
+
+    expect(openLayerFor(local, pageWith({ component: 'Panel', layer: {} }))).toBeUndefined()
+  })
+
+  it('finds nothing when no open layer carries the key', () => {
+    expect(openLayerFor(twoPanels, pageWith({ component: 'Users/Edit', layer: {} }))).toBeUndefined()
+  })
+})
+
+describe('addressOf', () => {
+  it('is the page url when there are no layers', () => {
+    expect(addressOf(pageWith())).toBe('/users')
+  })
+
+  it('is the topmost layer url', () => {
+    const one = composeLayer(pageWith(), pageWith({ component: 'A', url: '/a', layer: { key: 'A' } }), 'layer-1')
+    const two = composeLayer(one, pageWith({ component: 'B', url: '/b', layer: { key: 'B' } }), 'layer-2')
+
+    expect(addressOf(two)).toBe('/b')
+  })
+
+  it('falls through a layer that has no url of its own', () => {
+    const routed = composeLayer(pageWith(), pageWith({ component: 'A', url: '/a', layer: { key: 'A' } }), 'layer-1')
+    const local = { ...routed, layers: [...routed.layers!, { ...routed.layers![0], id: 'layer-2', url: null }] }
+
+    expect(addressOf(local)).toBe('/a')
+  })
+
+  it('is the topmost layer url even when it is empty', () => {
+    const routed = composeLayer(pageWith(), pageWith({ component: 'A', url: '', layer: { key: 'A' } }), 'layer-1')
+
+    expect(addressOf(routed)).toBe('')
+  })
+
+  it('is the page url when no layer has one', () => {
+    const routed = composeLayer(pageWith(), pageWith({ component: 'A', url: '/a', layer: { key: 'A' } }), 'layer-1')
+    const local = { ...routed, layers: [{ ...routed.layers![0], url: null }] }
+
+    expect(addressOf(local)).toBe('/users')
+  })
+})
+
+describe('withAddressHash', () => {
+  const routed = composeLayer(pageWith(), pageWith({ component: 'A', url: '/a', layer: { key: 'A' } }), 'layer-1')
+
+  it('writes the hash onto the page url when there are no layers', () => {
+    expect(withAddressHash(pageWith(), '#comments').url).toBe('http://localhost/users#comments')
+  })
+
+  it('writes it onto the topmost layer that has a url', () => {
+    const stacked = composeLayer(routed, pageWith({ component: 'B', url: '/b', layer: { key: 'B' } }), 'layer-2')
+
+    expect(withAddressHash(stacked, '#comments').layers!.map((layer) => layer.url)).toEqual([
+      '/a',
+      'http://localhost/b#comments',
+    ])
+  })
+
+  it('falls through a layer that has no url of its own', () => {
+    const local = composeLayer(routed, pageWith({ component: 'B', url: '/b', layer: { key: 'B' } }), 'layer-2', {
+      url: null,
+    })
+
+    expect(withAddressHash(local, '#comments').layers!.map((layer) => layer.url)).toEqual([
+      'http://localhost/a#comments',
+      null,
+    ])
+  })
+
+  it('writes it onto the page url when no layer has one', () => {
+    const local = { ...routed, layers: [{ ...routed.layers![0], url: null }] }
+    const hashed = withAddressHash(local, '#comments')
+
+    expect(hashed.url).toBe('http://localhost/users#comments')
+    expect(hashed.layers![0].url).toBeNull()
+  })
+
+  it('replaces a hash the address already carries', () => {
+    expect(withAddressHash(pageWith({ url: '/users#top' }), '#comments').url).toBe('http://localhost/users#comments')
+  })
+
+  it('does not mutate the page it is given', () => {
+    withAddressHash(routed, '#comments')
+
+    expect(routed.layers![0].url).toBe('/a')
+  })
+})
+
+describe('encryptsHistory', () => {
+  const stack = (base: Partial<Page>, ...layers: Partial<Page>[]): Page =>
+    layers.reduce(
+      (page, overrides, index) =>
+        composeLayer(
+          page,
+          pageWith({ component: `L${index}`, layer: { key: `L${index}` }, ...overrides }),
+          `layer-${index}`,
+        ),
+      pageWith(base),
+    )
+
+  it('is false for a page nobody asked to encrypt', () => {
+    expect(encryptsHistory(pageWith())).toBe(false)
+  })
+
+  it('is true for a page that asks for it', () => {
+    expect(encryptsHistory(pageWith({ encryptHistory: true }))).toBe(true)
+  })
+
+  it('is false when neither the base nor its layer asks for it', () => {
+    expect(encryptsHistory(stack({}, {}))).toBe(false)
+  })
+
+  it('is true when only the layer asks for it', () => {
+    expect(encryptsHistory(stack({}, { encryptHistory: true }))).toBe(true)
+  })
+
+  it('is true when only the base asks for it', () => {
+    expect(encryptsHistory(stack({ encryptHistory: true }, {}))).toBe(true)
+  })
+
+  it('is true when any layer in the stack asks for it', () => {
+    expect(encryptsHistory(stack({}, {}, { encryptHistory: true }, {}))).toBe(true)
+  })
+
+  const withoutAnswer = (page: Page): Page => {
+    const { encryptHistory, ...older } = page.layers![0]
+
+    return { ...page, layers: [older as LayerState] }
+  }
+
+  it('reads a layer with no encryptHistory of its own as not asking', () => {
+    expect(encryptsHistory(withoutAnswer(stack({}, {})))).toBe(false)
+  })
+
+  it('still reads the base beneath a layer with no encryptHistory of its own', () => {
+    expect(encryptsHistory(withoutAnswer(stack({ encryptHistory: true }, {})))).toBe(true)
+  })
+})
+
+describe('capturedBaseIsValid', () => {
+  const loginPage = pageWith({ component: 'Auth/Login', url: '/login' })
+  const stackWith = (key: string, id = 'layer-1'): Page =>
+    composeLayer(pageWith(), pageWith({ component: key, layer: { key: key } }), id)
+
+  const validity = (overrides: Partial<Parameters<typeof capturedBaseIsValid>[0]> = {}): boolean =>
+    capturedBaseIsValid({
+      captured: { page: loginPage, generation: 7 },
+      live: { page: loginPage, generation: 7 },
+      dispatchedUrl: new URL('http://localhost/login'),
+      layer: { url: '/users/5/edit', key: 'Users/Edit' },
+      ...overrides,
+    })
+
+  it('holds when the visit was dispatched toward the layer', () => {
+    expect(validity({ dispatchedUrl: new URL('http://localhost/users/5/edit') })).toBe(true)
+  })
+
+  it('holds when the layer is already open', () => {
+    expect(validity({ live: { page: stackWith('Users/Edit'), generation: 7 } })).toBe(true)
+  })
+
+  it('holds when the layer it was dispatched from is still open', () => {
+    const stack = stackWith('Teams/Show')
+
+    expect(validity({ captured: { page: stack, generation: 7 }, live: { page: stack, generation: 7 } })).toBe(true)
+  })
+
+  it('fails once the layer it was dispatched from has been closed', () => {
+    expect(validity({ captured: { page: stackWith('Teams/Show'), generation: 7 } })).toBe(false)
+  })
+
+  it('fails when the layer it was dispatched from has been closed and another opened', () => {
+    expect(
+      validity({
+        captured: { page: stackWith('Teams/Show'), generation: 7 },
+        live: { page: stackWith('Teams/Members', 'layer-2'), generation: 7 },
+      }),
+    ).toBe(false)
+  })
+
+  it('fails for a layer returned through a login page', () => {
+    expect(validity()).toBe(false)
+  })
+
+  it('fails once the base it captured has been replaced, whatever else holds', () => {
+    expect(
+      validity({ dispatchedUrl: new URL('http://localhost/users/5/edit'), live: { page: loginPage, generation: 8 } }),
+    ).toBe(false)
+  })
+})
+
+describe('promoteLayer', () => {
+  const response = pageWith({
+    component: 'Users/Edit',
+    url: '/users/5/edit',
+    layer: { key: 'Users/Edit', base: '/users' },
+  })
+
+  it('drops the layer mark and the stack', () => {
+    const promoted = promoteLayer(response)
+
+    expect(promoted).not.toHaveProperty('layer')
+    expect(promoted).not.toHaveProperty('layers')
+  })
+
+  it('keeps everything the page itself is made of', () => {
+    expect(promoteLayer(response)).toEqual({ ...pageWith(), component: 'Users/Edit', url: '/users/5/edit' })
+  })
+
+  it('does not mutate the response', () => {
+    const copy = structuredClone(response)
+
+    promoteLayer(response)
+
+    expect(response).toEqual(copy)
+  })
+})
+
+describe('closeLayer', () => {
+  const stack = (...urls: (string | null)[]): Page =>
+    urls.reduce(
+      (page, url, index) =>
+        composeLayer(page, pageWith({ component: `L${index}`, layer: { key: `L${index}` } }), `layer-${index + 1}`, {
+          url: url,
+        }),
+      pageWith(),
+    )
+
+  it('leaves the page the stack was drawn over', () => {
+    const closed = closeLayer(stack('/a'), 'layer-1')
+
+    expect(closed.component).toBe('Users/Index')
+    expect(closed.url).toBe('/users')
+    expect(closed).not.toHaveProperty('layers')
+  })
+
+  it('removes every layer above the one being closed', () => {
+    const closed = closeLayer(stack('/a', '/b', '/c'), 'layer-2')
+
+    expect(closed.layers!.map((layer) => layer.id)).toEqual(['layer-1'])
+  })
+
+  it('leaves the stack alone when the layer is not on it', () => {
+    const closed = closeLayer(stack('/a', '/b'), 'layer-9')
+
+    expect(closed.layers!.map((layer) => layer.id)).toEqual(['layer-1', 'layer-2'])
+  })
+
+  it('does not mutate the page', () => {
+    const open = stack('/a', '/b')
+    const copy = structuredClone(open)
+
+    closeLayer(open, 'layer-1')
+
+    expect(open).toEqual(copy)
+  })
+})
+
+describe('history entry counting', () => {
+  const openAt = (url: string) => composeLayer(pageWith(), pageWith({ component: 'A', url, layer: {} }), 'layer-1')
+
+  it('counts the entry against the layer that owns the address', () => {
+    const counted = recordHistoryEntry(openAt('/a'))
+
+    expect(counted.layers![0].entries).toBe(1)
+    expect(entriesToUnwind(counted, 'layer-1')).toBe(1)
+  })
+
+  it('gives the entry back when the browser refused to write it', () => {
+    const counted = recordHistoryEntry(openAt('/a'))
+    const dropped = dropHistoryEntry(counted)
+
+    expect(dropped.layers![0].entries).toBe(0)
+    expect(entriesToUnwind(dropped, 'layer-1')).toBe(0)
+  })
+
+  it('never counts a layer below zero entries', () => {
+    expect(dropHistoryEntry(openAt('/a')).layers![0].entries).toBe(0)
+  })
+
+  it('does nothing on a page with no layers', () => {
+    const page = pageWith()
+
+    expect(dropHistoryEntry(page)).toEqual(page)
+  })
+})
diff --git a/packages/core/tests/objectUtils.test.ts b/packages/core/tests/objectUtils.test.ts
index 6f78168a7..40784ea22 100644
--- a/packages/core/tests/objectUtils.test.ts
+++ b/packages/core/tests/objectUtils.test.ts
@@ -1,6 +1,6 @@
 import { set } from 'es-toolkit/compat'
 import { describe, expect, it } from 'vitest'
-import { setPathPreservingIdentity } from '../src/objectUtils'
+import { setPathPreservingIdentity, toStructuredCloneable } from '../src/objectUtils'
 
 describe('setPathPreservingIdentity', () => {
   it('matches es-toolkit set() semantics for values', () => {
@@ -67,3 +67,136 @@ describe('setPathPreservingIdentity', () => {
     expect(result.items[1]).toEqual({ id: 99 })
   })
 })
+
+describe('toStructuredCloneable', () => {
+  it('produces a value structuredClone accepts', () => {
+    const props = { name: 'Joe', onClick: () => {}, nested: { fn() {}, keep: 1 } }
+
+    expect(() => structuredClone(toStructuredCloneable(props))).not.toThrow()
+  })
+
+  it('drops function-valued keys and keeps the rest', () => {
+    const props = { name: 'Joe', onClick: () => {}, nested: { fn() {}, keep: 1 } }
+
+    expect(toStructuredCloneable(props)).toEqual({ name: 'Joe', nested: { keep: 1 } })
+  })
+
+  it('preserves array indices by nulling dropped entries', () => {
+    expect(toStructuredCloneable({ items: [1, () => {}, 3] })).toEqual({ items: [1, null, 3] })
+  })
+
+  it('preserves length and indices for sparse arrays', () => {
+    const result = toStructuredCloneable({ items: [1, , 3] }) as { items: unknown[] }
+
+    expect(result.items).toHaveLength(3)
+    expect(result.items[2]).toBe(3)
+    expect(() => structuredClone(result)).not.toThrow()
+  })
+
+  it('does not mutate the input', () => {
+    const fn = () => {}
+    const props = { fn, keep: 1 }
+
+    toStructuredCloneable(props)
+
+    expect(props.fn).toBe(fn)
+  })
+
+  it('leaves an already-cloneable value structurally equal', () => {
+    const props = { a: 1, b: [{ c: 'd' }], e: null }
+
+    expect(toStructuredCloneable(props)).toEqual(props)
+  })
+
+  it('handles circular references', () => {
+    const props: Record<string, unknown> = { a: 1 }
+    props.self = props
+
+    expect(() => structuredClone(toStructuredCloneable(props))).not.toThrow()
+  })
+
+  it('walks class instances rather than passing them through', () => {
+    class Thing {
+      name = 'Joe'
+      onClick = () => {}
+      greet() {}
+    }
+
+    const result = toStructuredCloneable({ thing: new Thing() })
+
+    expect(() => structuredClone(result)).not.toThrow()
+    expect(result).toEqual({ thing: { name: 'Joe' } })
+  })
+
+  it('preserves values structuredClone handles natively', () => {
+    const props = { when: new Date(0), pattern: /x/g, seen: new Set([1]), by: new Map([['a', 1]]) }
+
+    const result = toStructuredCloneable(props)
+
+    expect(() => structuredClone(result)).not.toThrow()
+    expect(result.when).toBeInstanceOf(Date)
+    expect(result.pattern).toEqual(/x/g)
+    expect(result.seen).toEqual(new Set([1]))
+    expect(result.by).toEqual(new Map([['a', 1]]))
+  })
+
+  it('drops set entries that cannot be cloned', () => {
+    const props = { seen: new Set([1, () => {}]) }
+
+    const result = toStructuredCloneable(props)
+
+    expect(() => structuredClone(result)).not.toThrow()
+    expect(result.seen).toEqual(new Set([1]))
+  })
+
+  it('drops map entries whose key or value cannot be cloned', () => {
+    const props = {
+      by: new Map<unknown, unknown>([
+        ['a', 1],
+        ['b', () => {}],
+        [() => {}, 2],
+      ]),
+    }
+
+    const result = toStructuredCloneable(props)
+
+    expect(() => structuredClone(result)).not.toThrow()
+    expect(result.by).toEqual(new Map([['a', 1]]))
+  })
+
+  it('walks values nested inside sets and maps', () => {
+    const props = {
+      seen: new Set([{ fn: () => {}, keep: 1 }]),
+      by: new Map([['a', { fn: () => {}, keep: 2 }]]),
+    }
+
+    const result = toStructuredCloneable(props)
+
+    expect(() => structuredClone(result)).not.toThrow()
+    expect(result.seen).toEqual(new Set([{ keep: 1 }]))
+    expect(result.by).toEqual(new Map([['a', { keep: 2 }]]))
+  })
+
+  it('terminates on self-referencing Sets and Maps', () => {
+    const set = new Set<unknown>()
+    set.add(set)
+
+    const map = new Map<unknown, unknown>()
+    map.set('self', map)
+
+    expect(() => structuredClone(toStructuredCloneable({ set, map }))).not.toThrow()
+  })
+
+  it('terminates on a cycle routed through a Map key', () => {
+    const map = new Map<object, unknown>()
+    const key: Record<string, unknown> = {}
+    key.map = map
+    map.set(key, 1)
+
+    const result = toStructuredCloneable({ map })
+    const [copiedKey] = [...result.map.keys()] as Record<string, unknown>[]
+
+    expect(() => structuredClone(result)).not.toThrow()
+    expect(copiedKey.map).toBe(result.map)
+  })
+})
diff --git a/packages/core/tests/queue.test.ts b/packages/core/tests/queue.test.ts
new file mode 100644
index 000000000..95c2f8b8c
--- /dev/null
+++ b/packages/core/tests/queue.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import Queue from '../src/queue'
+
+const ticks = async (count: number): Promise<void> => {
+  for (let tick = 0; tick < count; tick++) {
+    await Promise.resolve()
+  }
+}
+
+describe('the queue behind visits, responses and history writes', () => {
+  it('runs its items one after another', async () => {
+    const queue = new Queue<Promise<void>>()
+    const ran: string[] = []
+
+    queue.add(async () => {
+      await ticks(2)
+      ran.push('first')
+    })
+
+    await queue.add(async () => {
+      ran.push('second')
+    })
+
+    expect(ran).toEqual(['first', 'second'])
+  })
+
+  for (const tick of [0, 1, 2, 3, 4, 5]) {
+    it(`settles only once the item added ${tick} ticks into the run has finished`, async () => {
+      const queue = new Queue<Promise<void>>()
+      const ran: string[] = []
+
+      queue.add(async () => {
+        await ticks(2)
+        ran.push('first')
+      })
+
+      await ticks(tick)
+
+      await queue.add(async () => {
+        await ticks(3)
+        ran.push('second')
+      })
+
+      expect(ran).toEqual(['first', 'second'])
+    })
+  }
+})
diff --git a/packages/core/tests/router.test.ts b/packages/core/tests/router.test.ts
new file mode 100644
index 000000000..e92915dbf
--- /dev/null
+++ b/packages/core/tests/router.test.ts
@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { historySessionStorageKeys } from '../src/encryption'
+import { http } from '../src/http'
+import { page as currentPage } from '../src/page'
+import { prefetchedRequests } from '../src/prefetched'
+import { Response } from '../src/response'
+import { Router } from '../src/router'
+import { BaseSnapshot, Page } from '../src/types'
+
+const pageWith = (overrides: Partial<Page> = {}): Page =>
+  ({
+    component: 'Users/Index',
+    props: { users: [] },
+    url: '/users',
+    version: null,
+    rescuedProps: [],
+    flash: {},
+    rememberedState: {},
+    ...overrides,
+  }) as Page
+
+const hold = async (page: Page): Promise<Page> => {
+  currentPage.init({
+    initialPage: page,
+    resolveComponent: (name) => ({ name }) as never,
+    swapComponent: async () => {},
+  })
+
+  await currentPage.setQuietly(page)
+
+  return page
+}
+
+beforeEach(() => {
+  http.setClient({ request: () => new Promise(() => {}) })
+  prefetchedRequests.removeAll()
+})
+
+const respondWith = (page: Page) =>
+  http.setClient({
+    request: async () => ({ status: 200, data: page as unknown as string, headers: { 'x-inertia': 'true' } }),
+  })
+
+const capturesOf = (router: Router): BaseSnapshot[] =>
+  (
+    router as unknown as { syncRequestStream: { requests: { capturedBase: BaseSnapshot }[] } }
+  ).syncRequestStream.requests.map((request) => request.capturedBase)
+
+const cached = () => (prefetchedRequests as unknown as { cached: { response: Promise<Response> }[] }).cached
+
+const capturedBaseOf = (response: Response): BaseSnapshot =>
+  (response as unknown as { capturedBase: BaseSnapshot }).capturedBase
+
+const dispatched = async (router: Router): Promise<BaseSnapshot> => {
+  await vi.waitFor(() => expect(capturesOf(router)).toHaveLength(1))
+
+  return capturesOf(router)[0]
+}
+
+describe('the base a visit is dispatched from', () => {
+  it('is the page on screen', async () => {
+    const base = await hold(pageWith())
+    const generation = currentPage.generation()
+    const router = new Router()
+
+    router.visit('http://localhost/users/5')
+
+    expect(await dispatched(router)).toEqual({ page: base, generation })
+  })
+
+  it('is the base before an instant swap replaces it', async () => {
+    const base = await hold(pageWith())
+    const generation = currentPage.generation()
+    const router = new Router()
+
+    router.visit('http://localhost/users/5', { component: 'Users/Show' })
+
+    const captured = await dispatched(router)
+
+    expect(currentPage.get()).not.toBe(base)
+    expect(currentPage.generation()).not.toBe(generation)
+    expect(captured).toEqual({ page: base, generation })
+  })
+
+  it('is the page on screen when a prefetched response is replayed, not the one it was prefetched from', async () => {
+    await hold(pageWith())
+    respondWith(pageWith({ component: 'Users/Show', url: '/users/5' }))
+    const router = new Router()
+
+    router.prefetch('http://localhost/users/5', {}, { cacheFor: '30s' })
+
+    await vi.waitFor(() => expect(cached()).toHaveLength(1))
+    const prefetched = await cached()[0].response
+
+    const moved = pageWith({ component: 'Users/Archive', url: '/users/archive' })
+    await currentPage.setQuietly(moved)
+    const generation = currentPage.generation()
+
+    router.visit('http://localhost/users/5')
+
+    await vi.waitFor(() => expect(capturedBaseOf(prefetched)).toEqual({ page: moved, generation }))
+  })
+
+  it('is the base before an instant swap when the response was prefetched', async () => {
+    await hold(pageWith())
+    respondWith(pageWith({ component: 'Users/Show', url: '/users/5' }))
+    const router = new Router()
+
+    router.prefetch('http://localhost/users/5', {}, { cacheFor: '30s' })
+
+    await vi.waitFor(() => expect(cached()).toHaveLength(1))
+    const prefetched = await cached()[0].response
+
+    const moved = pageWith({ component: 'Users/Archive', url: '/users/archive' })
+    await currentPage.setQuietly(moved)
+    const generation = currentPage.generation()
+
+    router.visit('http://localhost/users/5', { component: 'Users/Show' })
+
+    await vi.waitFor(() => expect(capturedBaseOf(prefetched)).toEqual({ page: moved, generation }))
+  })
+})
+
+describe('clearing history', () => {
+  const seedKeys = () => {
+    window.sessionStorage.setItem(historySessionStorageKeys.key, '[1,2,3]')
+    window.sessionStorage.setItem(historySessionStorageKeys.iv, '[4,5,6]')
+  }
+
+  const keysHeld = () => window.sessionStorage.getItem(historySessionStorageKeys.key) !== null
+
+  const logoutPage = (): Page => pageWith({ component: 'Auth/Logout', url: '/logout', clearHistory: true })
+
+  const settled = () => new Promise((resolve) => setTimeout(resolve))
+
+  it('discards the keys when the page asks', async () => {
+    await hold(pageWith())
+    seedKeys()
+
+    await currentPage.set(logoutPage())
+
+    expect(keysHeld()).toBe(false)
+  })
+
+  it('keeps them when the page does not ask', async () => {
+    await hold(pageWith())
+    seedKeys()
+
+    await currentPage.set(pageWith({ component: 'Users/Show', url: '/users/5' }))
+
+    expect(keysHeld()).toBe(true)
+  })
+
+  it('leaves no pending request on the entry it writes', async () => {
+    await hold(pageWith())
+    const pushState = vi.spyOn(window.history, 'pushState')
+
+    await currentPage.set(logoutPage())
+
+    expect(pushState.mock.lastCall![0].page.clearHistory).toBe(false)
+
+    pushState.mockRestore()
+  })
+
+  it('does not discard them again when a client visit rewrites the page', async () => {
+    await hold(pageWith())
+    await currentPage.set(logoutPage())
+    await settled()
+    seedKeys()
+
+    await new Promise<void>((resolve) => {
+      new Router().replace({ props: { users: [{ id: 1 }] }, onSuccess: () => resolve() })
+    })
+
+    expect(keysHeld()).toBe(true)
+  })
+
+  it('still asks when a cached prefetch is replayed a second time', async () => {
+    await hold(pageWith())
+
+    let requests = 0
+
+    http.setClient({
+      request: async () => {
+        requests++
+
+        return { status: 200, data: logoutPage() as unknown as string, headers: { 'x-inertia': 'true' } }
+      },
+    })
+
+    const router = new Router()
+    router.prefetch('http://localhost/logout', {}, { cacheFor: '30s' })
+    await vi.waitFor(() => expect(requests).toBe(1))
+
+    const visit = () =>
+      new Promise<void>((resolve) => router.visit('http://localhost/logout', { onSuccess: () => resolve() }))
+
+    await visit()
+    seedKeys()
+    await visit()
+
+    expect(requests).toBe(1)
+    expect(keysHeld()).toBe(false)
+  })
+})
diff --git a/packages/core/tests/support/browser.ts b/packages/core/tests/support/browser.ts
new file mode 100644
index 000000000..067dc7218
--- /dev/null
+++ b/packages/core/tests/support/browser.ts
@@ -0,0 +1,52 @@
+// Composing a layer is browser work: the visit fires DOM events, writes history and resets scroll.
+// Loaded as a vitest setup file, so the globals stand before any module that reads them at import.
+
+const session = new Map<string, string>()
+
+// `eventHandler.init()` registers its listeners here, so keeping them lets a test drive popstate
+// through the handler the browser would rather than reaching past it.
+export const listeners = new Map<string, EventListener>()
+
+// The stub has no listeners of its own, so a test that needs a cancelable event cancelled says so
+// here: `dispatchEvent` returning false is exactly what a listener calling preventDefault does.
+export const veto = { types: new Set<string>() }
+
+globalThis.window = {
+  location: new URL('http://localhost/users'),
+  history: { state: {}, pushState: () => {}, replaceState: () => {}, go: () => {} },
+  navigator: { userAgent: 'node' },
+  scrollTo: () => {},
+  addEventListener: (type: string, listener: EventListener) => listeners.set(type, listener),
+  requestAnimationFrame: () => 0,
+  setTimeout: () => 0,
+  // Encrypting an entry is real crypto against a real session store, so an encrypted stack can be
+  // read back rather than only asserted to be unreadable.
+  crypto: globalThis.crypto,
+  sessionStorage: {
+    getItem: (key: string) => session.get(key) ?? null,
+    setItem: (key: string, value: string) => session.set(key, value),
+    removeItem: (key: string) => session.delete(key),
+    clear: () => session.clear(),
+  },
+} as unknown as Window & typeof globalThis
+
+globalThis.document = {
+  dispatchEvent: (event: Event) => !veto.types.has(event.type),
+  querySelectorAll: () => [],
+  getElementById: () => null,
+  addEventListener: () => {},
+  // The error dialog mounts real elements (dialog.ts), so the stub has to hand them out.
+  createElement: () => ({
+    style: {},
+    setAttribute: () => {},
+    addEventListener: () => {},
+    appendChild: () => {},
+    prepend: () => {},
+    querySelectorAll: () => [],
+    showModal: () => {},
+    focus: () => {},
+    remove: () => {},
+  }),
+  head: { appendChild: () => {} },
+  body: { prepend: () => {} },
+} as unknown as Document
diff --git a/packages/core/tests/support/layers.ts b/packages/core/tests/support/layers.ts
new file mode 100644
index 000000000..b68b3f5a1
--- /dev/null
+++ b/packages/core/tests/support/layers.ts
@@ -0,0 +1,76 @@
+import { http } from '../../src/http'
+import { layerClosing } from '../../src/layers'
+import { page as currentPage } from '../../src/page'
+import { Page } from '../../src/types'
+
+export const pageWith = (overrides: Partial<Page> = {}): Page =>
+  ({
+    component: 'Users/Index',
+    props: { users: [] },
+    url: '/users',
+    version: null,
+    rescuedProps: [],
+    flash: {},
+    rememberedState: {},
+    ...overrides,
+  }) as Page
+
+// The layer most of these tests open: a keyed response over the users page.
+export const editLayer = (overrides: Partial<Page> = {}): Page =>
+  pageWith({
+    component: 'Users/Edit',
+    url: '/users/5/edit',
+    layer: { key: 'Users/Edit' },
+    props: { user: { id: 5 } },
+    ...overrides,
+  })
+
+/**
+ * Puts a page on screen without a visit, so a test starts from a stack it composed itself. It
+ * navigates onto the page rather than starting on it, so the base's generation is past the value an
+ * uncaptured capture would hold.
+ */
+export const hold = async (page: Page): Promise<Page> => {
+  currentPage.init({
+    initialPage: page,
+    resolveComponent: (name) => ({ name }) as never,
+    // Standing in for the shell an adapter mounts, which reports each closing layer's exit once its
+    // animation has run, never synchronously inside the swap that marked it.
+    swapComponent: async ({ layers }) => {
+      const closing = (layers ?? []).filter((layer) => layer.isClosing)
+
+      if (closing.length > 0) {
+        queueMicrotask(() => closing.forEach((layer) => layerClosing.closed(layer.id)))
+      }
+    },
+  })
+
+  await currentPage.setQuietly(page)
+
+  return page
+}
+
+/** Lets everything already queued run: renders, history writes and request callbacks. */
+export const settled = (): Promise<unknown> => new Promise((resolve) => setTimeout(resolve))
+
+/** Marks a close and lets the marking render, which is what the shell sees before its exit runs. */
+export const marked = async (id?: string): Promise<void> => {
+  layerClosing.close(id)
+
+  await currentPage.rerender()
+}
+
+/** Answers every request with the given page. */
+export const respondWith = (page: Page) =>
+  http.setClient({
+    request: async () => ({ status: 200, data: page as unknown as string, headers: { 'x-inertia': 'true' } }),
+  })
+
+/** Holds every request open, handing each resolve out once. */
+export const holding = () => {
+  let answer: ((response: unknown) => void) | null = null
+
+  http.setClient({ request: () => new Promise((resolve) => (answer = resolve)) })
+
+  return () => answer
+}
diff --git a/packages/core/vitest.config.ts b/packages/core/vitest.config.ts
new file mode 100644
index 000000000..2d0a97326
--- /dev/null
+++ b/packages/core/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    // The layer suites drive the router end to end, which needs the browser globals in place before
+    // the modules that read them are imported.
+    setupFiles: ['./tests/support/browser.ts'],
+  },
+})
diff --git a/packages/react/src/App.ts b/packages/react/src/App.ts
index aa27cfed7..ac687d541 100755
--- a/packages/react/src/App.ts
+++ b/packages/react/src/App.ts
@@ -1,19 +1,28 @@
 import {
   createHeadManager,
+  emptyLayoutSlot,
   HeadManagerOnUpdateCallback,
   HeadManagerTitleCallback,
   isPropsObject,
   isPropsObjectOrCallback,
+  layerShellProps,
+  layerTransitionName,
+  layoutPageOf,
+  LayoutSlot,
+  LoadingResolver,
   normalizeLayouts,
   Page,
   PageHandler,
   PageProps,
+  ResolvedLayer,
   resolveServerHead,
   router,
+  topPageOf,
   type ServerHeadOption,
 } from '@inertiajs/core'
 import {
   createElement,
+  Fragment,
   FunctionComponent,
   isValidElement,
   ReactNode,
@@ -25,9 +34,11 @@ import {
 } from 'react'
 import { flushSync } from 'react-dom'
 import HeadContext from './HeadContext'
-import { resetLayoutProps, store } from './layoutProps'
+import Layer from './Layer'
+import { resetLayoutProps, retainLayerLayoutProps, store } from './layoutProps'
 import PageContext from './PageContext'
-import { LayoutFunction, ReactComponent, ReactPageHandlerArgs } from './types'
+import { LayerComponent, LayoutFunction, ReactComponent, ReactPageHandlerArgs } from './types'
+import { layerContext } from './useLayer'
 
 function isComponent(value: unknown): value is ReactComponent {
   return typeof value === 'function' || (typeof value === 'object' && value !== null && '$$typeof' in value)
@@ -65,6 +76,7 @@ let swapComponent: PageHandler<ReactComponent> = async (args) => {
 type CurrentPage = {
   component: ReactComponent | null
   page: Page
+  layers: ResolvedLayer<ReactComponent>[]
   key: number | null
 }
 
@@ -72,33 +84,116 @@ export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
   children?: (options: { Component: ReactComponent; props: PageProps; key: number | null }) => ReactNode
   initialPage: Page<SharedProps>
   initialComponent?: ReactComponent
+  initialLayers?: ResolvedLayer<ReactComponent>[]
   resolveComponent?: (name: string, page?: Page) => ReactComponent | Promise<ReactComponent>
   titleCallback?: HeadManagerTitleCallback
   onHeadUpdate?: HeadManagerOnUpdateCallback
   defaultLayout?: (name: string, page: Page) => unknown
+  layer?: LayerComponent
+  resolveLoading?: LoadingResolver
   serverHead?: ServerHeadOption
 }
 
 export type InertiaApp = FunctionComponent<InertiaAppProps>
 
-const emptySnapshot = {
-  shared: {} as Record<string, unknown>,
-  named: {} as Record<string, Record<string, unknown>>,
+function renderLayout(
+  component: ReactComponent,
+  page: Page,
+  child: ReactNode,
+  dynamicProps: LayoutSlot,
+  defaultLayout?: (name: string, page: Page) => unknown,
+): ReactNode {
+  let effectiveLayout: unknown
+  let callbackProps: Record<string, unknown> | null = null
+  const layoutValue = component.layout
+
+  if (isLayoutResolver(layoutValue)) {
+    const result = (layoutValue as Function)(page.props)
+
+    if (isValidElement(result)) {
+      return (layoutValue as LayoutFunction)(child)
+    }
+
+    if (isPropsObjectOrCallback(result, isComponent)) {
+      effectiveLayout = defaultLayout?.(page.component, page)
+      callbackProps = result as Record<string, unknown>
+    } else {
+      effectiveLayout = result
+    }
+  } else if (isPropsObject(layoutValue, isComponent)) {
+    effectiveLayout = defaultLayout?.(page.component, page)
+    callbackProps = layoutValue as unknown as Record<string, unknown>
+  } else {
+    effectiveLayout = layoutValue ?? defaultLayout?.(page.component, page)
+  }
+
+  let layouts = normalizeLayouts(
+    effectiveLayout,
+    isComponent,
+    layoutValue && !callbackProps ? isRenderFunction : undefined,
+  )
+
+  if (callbackProps) {
+    layouts = layouts.map((l) => ({ ...l, props: { ...l.props, ...callbackProps } }))
+  }
+
+  if (layouts.length > 0) {
+    return layouts.reduceRight((childNode, layout) => {
+      return createElement(
+        layout.component,
+        {
+          ...page.props,
+          ...layout.props,
+          ...dynamicProps.shared,
+          ...(layout.name ? dynamicProps.named[layout.name] || {} : {}),
+        },
+        childNode,
+      )
+    }, child)
+  }
+
+  return child
+}
+
+function LayerLayout({
+  layer,
+  defaultLayout,
+}: {
+  layer: ResolvedLayer<ReactComponent>
+  defaultLayout?: (name: string, page: Page) => unknown
+}) {
+  const layerLayoutProps = useSyncExternalStore(
+    store.subscribe,
+    () => store.getForLayer(layer.id),
+    () => emptyLayoutSlot,
+  )
+
+  return renderLayout(
+    layer.component,
+    layoutPageOf(layer),
+    createElement(layer.component, { key: layer.renderKey, ...layer.page.props }),
+    layerLayoutProps,
+    defaultLayout,
+  )
 }
 
 export default function App<SharedProps extends PageProps = PageProps>({
   children,
   initialPage,
   initialComponent,
+  initialLayers,
   resolveComponent,
   titleCallback,
   onHeadUpdate,
   defaultLayout,
+  layer: LayerComponent = Layer,
+  resolveLoading,
   serverHead,
 }: InertiaAppProps<SharedProps>) {
   const [current, setCurrent] = useState<CurrentPage>({
     component: initialComponent || null,
     page: { ...initialPage, flash: initialPage.flash ?? {} },
+    layers: initialLayers ?? [],
     key: null,
   })
 
@@ -108,18 +203,20 @@ export default function App<SharedProps extends PageProps = PageProps>({
   const headManager = useMemo(() => {
     return createHeadManager(
       typeof window === 'undefined',
-      (title: string) => (titleCallback ? titleCallback(title, pageRef.current) : title),
+      (title: string) => (titleCallback ? titleCallback(title, topPageOf(pageRef.current)) : title),
       onHeadUpdate || (() => {}),
       resolveServerHead(initialPage, serverHead),
+      () => pageRef.current.layers ?? [],
     )
   }, [])
 
-  const dynamicLayoutProps = useSyncExternalStore(store.subscribe, store.get, () => emptySnapshot)
+  const dynamicLayoutProps = useSyncExternalStore(store.subscribe, store.get, () => emptyLayoutSlot)
 
   if (!routerIsInitialized) {
     router.init<ReactComponent>({
       initialPage,
       resolveComponent: resolveComponent!,
+      resolveLoading,
       swapComponent: async (args) => swapComponent(args),
       onFlash: (flash) => {
         setCurrent((current) => ({
@@ -133,7 +230,7 @@ export default function App<SharedProps extends PageProps = PageProps>({
   }
 
   useEffect(() => {
-    swapComponent = async ({ component, page, preserveState, initialRender }: ReactPageHandlerArgs) => {
+    swapComponent = async ({ component, page, layers, preserveState, initialRender }: ReactPageHandlerArgs) => {
       if (initialRender) {
         // We block setting the current page on the initial page to
         // prevent the initial page from being re-rendered again.
@@ -144,10 +241,15 @@ export default function App<SharedProps extends PageProps = PageProps>({
         resetLayoutProps()
       }
 
+      const nextLayers = layers ?? []
+
+      retainLayerLayoutProps(nextLayers.map((layer) => layer.id))
+
       flushSync(() =>
         setCurrent((current) => ({
-          component,
+          component: component ?? null,
           page,
+          layers: nextLayers,
           key: preserveState ? current.key : Date.now(),
         })),
       )
@@ -173,70 +275,16 @@ export default function App<SharedProps extends PageProps = PageProps>({
     }
   }, [])
 
-  if (!current.component) {
-    return createElement(
-      HeadContext.Provider,
-      { value: headManager },
-      createElement(PageContext.Provider, { value: current.page }, null),
-    )
-  }
-
   const renderChildren =
     children ||
-    (({ Component, props, key }) => {
-      const child = createElement(Component, { key, ...props })
-
-      let effectiveLayout: unknown
-      let callbackProps: Record<string, unknown> | null = null
-      const layoutValue = Component.layout
-
-      if (isLayoutResolver(layoutValue)) {
-        const result = (layoutValue as Function)(props)
-
-        if (isValidElement(result)) {
-          return (layoutValue as LayoutFunction)(child)
-        }
-
-        if (isPropsObjectOrCallback(result, isComponent)) {
-          effectiveLayout = defaultLayout?.(current.page.component, current.page)
-          callbackProps = result as Record<string, unknown>
-        } else {
-          effectiveLayout = result
-        }
-      } else if (isPropsObject(layoutValue, isComponent)) {
-        effectiveLayout = defaultLayout?.(current.page.component, current.page)
-        callbackProps = layoutValue as unknown as Record<string, unknown>
-      } else {
-        effectiveLayout = layoutValue ?? defaultLayout?.(current.page.component, current.page)
-      }
-
-      let layouts = normalizeLayouts(
-        effectiveLayout,
-        isComponent,
-        layoutValue && !callbackProps ? isRenderFunction : undefined,
-      )
-
-      if (callbackProps) {
-        layouts = layouts.map((l) => ({ ...l, props: { ...l.props, ...callbackProps } }))
-      }
-
-      if (layouts.length > 0) {
-        return layouts.reduceRight((childNode, layout) => {
-          return createElement(
-            layout.component,
-            {
-              ...props,
-              ...layout.props,
-              ...dynamicLayoutProps.shared,
-              ...(layout.name ? dynamicLayoutProps.named[layout.name] || {} : {}),
-            },
-            childNode,
-          )
-        }, child)
-      }
-
-      return child
-    })
+    (({ Component, props, key }) =>
+      renderLayout(
+        Component,
+        current.page,
+        createElement(Component, { key, ...props }),
+        dynamicLayoutProps,
+        defaultLayout,
+      ))
 
   return createElement(
     HeadContext.Provider,
@@ -244,11 +292,36 @@ export default function App<SharedProps extends PageProps = PageProps>({
     createElement(
       PageContext.Provider,
       { value: current.page },
-      renderChildren({
-        Component: current.component,
-        key: current.key,
-        props: current.page.props,
-      }),
+      createElement(
+        Fragment,
+        null,
+        current.component
+          ? renderChildren({
+              Component: current.component,
+              key: current.key,
+              props: current.page.props,
+            })
+          : null,
+        ...current.layers.map((layer, index) =>
+          createElement(
+            layerContext.Provider,
+            { key: layer.id, value: layer.id },
+            createElement(
+              PageContext.Provider,
+              { value: layer.page },
+              createElement(
+                LayerComponent,
+                layerShellProps(layer, index, current.layers.length),
+                createElement(
+                  'div',
+                  { 'data-layer-id': layer.id, style: { viewTransitionName: layerTransitionName(layer.id) } },
+                  createElement(LayerLayout, { layer, defaultLayout }),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
     ),
   )
 }
diff --git a/packages/react/src/Deferred.ts b/packages/react/src/Deferred.ts
index 796b8f161..4d75e8a9c 100644
--- a/packages/react/src/Deferred.ts
+++ b/packages/react/src/Deferred.ts
@@ -1,7 +1,8 @@
-import { isSameUrlWithoutQueryOrHash, partialReloadRequestsSomeProps } from '@inertiajs/core'
+import { partialReloadFillsDeferred } from '@inertiajs/core'
 import { get } from 'es-toolkit/compat'
 import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { router } from '.'
+import { useLayerId } from './useLayer'
 import usePage from './usePage'
 
 interface DeferredSlotProps {
@@ -25,8 +26,11 @@ const Deferred = ({ children, data, rescue, fallback }: DeferredProps) => {
   }
 
   const [reloading, setReloading] = useState(false)
+  const layerId = useLayerId()
   const activeReloads = useRef(new Set<object>())
   const page = usePage()
+  const pageRef = useRef(page)
+  pageRef.current = page
   const pageProps = page.props
   const keys = useMemo(() => (Array.isArray(data) ? data : [data]), [data])
   const rescuedKeys = useMemo(() => new Set(page.rescuedProps), [page.rescuedProps])
@@ -35,11 +39,7 @@ const Deferred = ({ children, data, rescue, fallback }: DeferredProps) => {
     const removeStartListener = router.on('start', (e) => {
       const visit = e.detail.visit
 
-      if (
-        visit.preserveState === true &&
-        isSameUrlWithoutQueryOrHash(visit.url, window.location) &&
-        partialReloadRequestsSomeProps(visit, keys)
-      ) {
+      if (partialReloadFillsDeferred(visit, { layerId, url: pageRef.current.url }, keys)) {
         activeReloads.current.add(visit)
         setReloading(true)
       }
diff --git a/packages/react/src/Head.ts b/packages/react/src/Head.ts
index 3d8208d54..ba8902d2d 100644
--- a/packages/react/src/Head.ts
+++ b/packages/react/src/Head.ts
@@ -1,6 +1,7 @@
 import { escape } from 'es-toolkit/compat'
 import React, { FunctionComponent, ReactElement, ReactNode, use, useEffect, useMemo } from 'react'
 import HeadContext from './HeadContext'
+import { useLayerId } from './useLayer'
 
 type InertiaHeadProps = {
   title?: string
@@ -11,7 +12,8 @@ type InertiaHead = FunctionComponent<InertiaHeadProps>
 
 const Head: InertiaHead = function ({ children, title }) {
   const headManager = use(HeadContext)
-  const provider = useMemo(() => headManager!.createProvider(), [headManager])
+  const layerId = useLayerId()
+  const provider = useMemo(() => headManager!.createProvider(layerId), [headManager, layerId])
   const isServer = typeof window === 'undefined'
 
   useEffect(() => {
diff --git a/packages/react/src/InfiniteScroll.ts b/packages/react/src/InfiniteScroll.ts
index 0aad78ad7..15d91d3f7 100644
--- a/packages/react/src/InfiniteScroll.ts
+++ b/packages/react/src/InfiniteScroll.ts
@@ -18,6 +18,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
+import { useLayerId } from './useLayer'
 import usePage from './usePage'
 
 const resolveHTMLElement = (
@@ -112,6 +113,7 @@ const InfiniteScroll = forwardRef<InfiniteScrollRef, ComponentProps>(
     const itemsElementRef = useCallback((node: HTMLElement | null) => setItemsElementFromRef(node), [])
 
     const scrollProp = usePage().scrollProps?.[data]
+    const layerId = useLayerId()
 
     const [loadingPrevious, setLoadingPrevious] = useState(false)
     const [loadingNext, setLoadingNext] = useState(false)
@@ -191,6 +193,7 @@ const InfiniteScroll = forwardRef<InfiniteScrollRef, ComponentProps>(
       }
 
       const infiniteScrollInstance = useInfiniteScroll({
+        layerId,
         // Data
         getPropName: () => data,
         inReverseMode: () => callbackPropsRef.current.reverse,
diff --git a/packages/react/src/Layer.ts b/packages/react/src/Layer.ts
new file mode 100644
index 000000000..51f088dec
--- /dev/null
+++ b/packages/react/src/Layer.ts
@@ -0,0 +1,47 @@
+import {
+  LayerExit,
+  LayerShellProps,
+  cancelLayer,
+  layerDialogAttributes,
+  lockScroll,
+  observeExit,
+  raiseLayer,
+} from '@inertiajs/core'
+import { createElement, ReactNode, useEffect, useRef } from 'react'
+
+export default function Layer({ close, done, children, ...shell }: LayerShellProps & { children?: ReactNode }) {
+  const dialog = useRef<HTMLDialogElement>(null)
+  const doneRef = useRef(done)
+  doneRef.current = done
+
+  const exit = useRef<LayerExit>(null)
+  exit.current ??= observeExit(
+    () => dialog.current,
+    () => doneRef.current(),
+  )
+
+  useEffect(() => {
+    raiseLayer(dialog.current!, shell.isTop)
+
+    const releaseScroll = lockScroll()
+
+    return () => {
+      exit.current!.teardown()
+      releaseScroll()
+    }
+  }, [])
+
+  useEffect(() => {
+    exit.current!.toggle(shell.open)
+  }, [shell.open])
+
+  return createElement(
+    'dialog',
+    {
+      ref: dialog,
+      ...layerDialogAttributes(shell),
+      onCancel: (event: Event) => cancelLayer(event, { isTop: shell.isTop, close }),
+    },
+    children,
+  )
+}
diff --git a/packages/react/src/Link.ts b/packages/react/src/Link.ts
index 7b8db3d99..c2b75869b 100755
--- a/packages/react/src/Link.ts
+++ b/packages/react/src/Link.ts
@@ -14,6 +14,7 @@ import {
 } from '@inertiajs/core'
 import { createElement, ElementType, forwardRef, useEffect, useMemo, useRef, useState } from 'react'
 import { config } from '.'
+import { useLayerId } from './useLayer'
 
 const noop = () => undefined
 
@@ -65,6 +66,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
     },
     ref,
   ) => {
+    const layerId = useLayerId()
     const [inFlightCount, setInFlightCount] = useState(0)
     const hoverTimeout = useRef<number>(undefined)
 
@@ -103,6 +105,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
 
     const baseParams = useMemo<VisitOptions>(
       () => ({
+        layerId,
         data: _data,
         method: _method,
         preserveScroll,
@@ -117,6 +120,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
         pageProps,
       }),
       [
+        layerId,
         _data,
         _method,
         preserveScroll,
diff --git a/packages/react/src/WhenVisible.ts b/packages/react/src/WhenVisible.ts
index b0af9fe32..5f351db35 100644
--- a/packages/react/src/WhenVisible.ts
+++ b/packages/react/src/WhenVisible.ts
@@ -1,6 +1,7 @@
 import { ReloadOptions, router } from '@inertiajs/core'
 import { get } from 'es-toolkit/compat'
 import { createElement, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useLayerId } from './useLayer'
 import usePage from './usePage'
 
 interface WhenVisibleSlotProps {
@@ -22,6 +23,7 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }: W
   as = as ?? 'div'
   fallback = fallback ?? null
 
+  const layerId = useLayerId()
   const pageProps = usePage().props
   const keys = useMemo(() => (data ? (Array.isArray(data) ? data : [data]) : []), [data])
 
@@ -73,6 +75,7 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }: W
         const reloadParams = getReloadParamsRef.current()
 
         router.reload({
+          layerId,
           ...reloadParams,
           onStart: (e) => {
             fetching.current = true
diff --git a/packages/react/src/createInertiaApp.ts b/packages/react/src/createInertiaApp.ts
index 8341f1ebf..cadec8e6d 100644
--- a/packages/react/src/createInertiaApp.ts
+++ b/packages/react/src/createInertiaApp.ts
@@ -8,18 +8,21 @@ import {
   getInitialPageFromDOM,
   http as httpModule,
   InertiaAppSSRResponse,
+  LoadingOption,
+  normalizeLoading,
   Page,
   PageProps,
+  resolveInitialPage,
   router,
   setupProgress,
   SharedPageProps,
 } from '@inertiajs/core'
-import { createElement, ReactElement, StrictMode } from 'react'
+import { createElement, isValidElement, ReactElement, StrictMode } from 'react'
 import { createRoot, hydrateRoot } from 'react-dom/client'
 import { renderToString } from 'react-dom/server'
 import App, { InertiaAppProps, type InertiaApp } from './App'
 import { config } from './index'
-import { ReactComponent, ReactInertiaAppConfig } from './types'
+import { LayerComponent, ReactComponent, ReactInertiaAppConfig } from './types'
 
 export type SetupOptions<ElementType, SharedProps extends PageProps> = {
   el: ElementType
@@ -44,6 +47,8 @@ type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOp
   void,
   ReactInertiaAppConfig
 > & {
+  layer?: LayerComponent
+  loading?: LoadingOption<ReactComponent>
   strictMode?: undefined
   withApp?: never
 }
@@ -56,6 +61,8 @@ type InertiaAppOptionsForSSR<SharedProps extends PageProps> = CreateInertiaAppOp
   ReactInertiaAppConfig
 > & {
   render: typeof renderToString
+  layer?: LayerComponent
+  loading?: LoadingOption<ReactComponent>
   strictMode?: undefined
   withApp?: never
 }
@@ -71,6 +78,8 @@ type InertiaAppOptionsAuto<SharedProps extends PageProps> = Omit<
 > & {
   page?: Page<SharedProps>
   render?: undefined
+  layer?: LayerComponent
+  loading?: LoadingOption<ReactComponent>
   strictMode?: boolean
 } & (
     | { setup?: undefined; withApp?: ReactWithApp<SharedProps> }
@@ -106,6 +115,8 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
     nonce,
     http,
     layout,
+    layer,
+    loading,
     serverHead,
     strictMode = false,
     withApp,
@@ -140,21 +151,30 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
       return ((module as { default?: ReactComponent }).default || module) as ReactComponent
     })
 
+  const resolveLoading = normalizeLoading<ReactComponent>(loading, { rendered: isValidElement })
+
   // SSR render function factory - when on server without page/render, return a render function
   // This is used by the Vite plugin's SSR transform
   if (isServer && !page && !render) {
     return async (page: Page<SharedProps>, renderToString: RenderToString) => {
       let head: string[] = []
 
-      const initialComponent = await resolveComponent(page.component, page)
+      const {
+        page: initialPage,
+        component: initialComponent,
+        layers: initialLayers,
+      } = await resolveInitialPage(page, resolveComponent, resolveLoading)
 
       const props: InertiaAppProps<SharedProps> = {
-        initialPage: page,
+        initialPage,
         initialComponent,
+        initialLayers,
         resolveComponent,
         titleCallback: title,
         onHeadUpdate: (elements: string[]) => (head = elements),
         defaultLayout: layout,
+        layer,
+        resolveLoading,
         serverHead,
       }
 
@@ -181,21 +201,24 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
     }
   }
 
-  const initialPage = page || getInitialPageFromDOM<Page<SharedProps>>(id)!
+  const initialResponse = page || getInitialPageFromDOM<Page<SharedProps>>(id)!
 
   let head: string[] = []
 
   const reactApp = await Promise.all([
-    resolveComponent(initialPage.component, initialPage),
+    resolveInitialPage(initialResponse, resolveComponent, resolveLoading),
     router.decryptHistory().catch(() => {}),
-  ]).then(([initialComponent]) => {
+  ]).then(([{ page: initialPage, component: initialComponent, layers: initialLayers }]) => {
     const props: InertiaAppProps<SharedProps> = {
       initialPage,
       initialComponent,
+      initialLayers,
       resolveComponent,
       titleCallback: title,
       onHeadUpdate: isServer ? (elements: string[]) => (head = elements) : undefined,
       defaultLayout: layout,
+      layer,
+      resolveLoading,
       serverHead,
     }
 
@@ -236,7 +259,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
 
   if (isServer && render && reactApp) {
     const html = render(reactApp)
-    const body = buildSSRBody(id, initialPage, html)
+    const body = buildSSRBody(id, initialResponse, html)
 
     return { head, body }
   }
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index c4c8deed0..013c19492 100755
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -8,9 +8,10 @@ export { default as Deferred } from './Deferred'
 export { default as Form, useFormContext } from './Form'
 export { default as Head } from './Head'
 export { default as InfiniteScroll } from './InfiniteScroll'
+export { default as Layer } from './Layer'
 export { resetLayoutProps, setLayoutProps } from './layoutProps'
 export { InertiaLinkProps, default as Link } from './Link'
-export { LayoutCallback, ReactComponent as ResolvedComponent } from './types'
+export { type LayerComponent, LayoutCallback, ReactComponent as ResolvedComponent } from './types'
 export {
   InertiaForm,
   InertiaFormProps,
@@ -22,6 +23,7 @@ export {
   default as useForm,
 } from './useForm'
 export { default as useHttp } from './useHttp'
+export { default as useLayer } from './useLayer'
 export { default as usePage } from './usePage'
 export { default as usePoll } from './usePoll'
 export { default as usePrefetch } from './usePrefetch'
diff --git a/packages/react/src/layoutProps.ts b/packages/react/src/layoutProps.ts
index f056b1404..69ae80ca8 100644
--- a/packages/react/src/layoutProps.ts
+++ b/packages/react/src/layoutProps.ts
@@ -1,19 +1,13 @@
-import { createLayoutPropsStore, type LayoutProps, type NamedLayoutProps } from '@inertiajs/core'
+import { createLayoutPropsStore } from '@inertiajs/core'
 
 export const store = createLayoutPropsStore()
 
-export function setLayoutProps(props: Partial<LayoutProps>): void
-export function setLayoutProps<K extends keyof NamedLayoutProps>(name: K, props: Partial<NamedLayoutProps[K]>): void
-export function setLayoutProps<T = never>(props: Partial<NoInfer<T>>): void
-export function setLayoutProps<T = never>(name: string, props: Partial<NoInfer<T>>): void
-export function setLayoutProps(nameOrProps: string | Record<string, unknown>, props?: Record<string, unknown>): void {
-  if (typeof nameOrProps === 'string') {
-    store.setFor(nameOrProps, props!)
-  } else {
-    store.set(nameOrProps)
-  }
-}
+export const setLayoutProps = store.set
 
 export function resetLayoutProps(): void {
   store.reset()
 }
+
+export function retainLayerLayoutProps(ids: string[]): void {
+  store.retainLayers(ids)
+}
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index ca7aa160f..7b6f16862 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -1,9 +1,10 @@
-import { type LayoutCallbackReturn, PageHandler, SharedPageProps } from '@inertiajs/core'
+import { type LayerShellProps, type LayoutCallbackReturn, PageHandler, SharedPageProps } from '@inertiajs/core'
 import { ComponentType, ReactNode } from 'react'
 
 export type LayoutFunction = (page: ReactNode) => ReactNode
 export type LayoutCallback = (props: SharedPageProps) => LayoutCallbackReturn<ComponentType<any>>
 export type LayoutComponent = ComponentType<{ children: ReactNode }>
+export type LayerComponent = ComponentType<LayerShellProps & { children?: ReactNode }>
 
 export type ReactComponent = ComponentType<any> & {
   layout?: LayoutComponent | LayoutComponent[] | LayoutFunction | ((props: any) => any)
diff --git a/packages/react/src/useForm.ts b/packages/react/src/useForm.ts
index f94f2dbff..03ead7d9a 100644
--- a/packages/react/src/useForm.ts
+++ b/packages/react/src/useForm.ts
@@ -23,6 +23,7 @@ import { cloneDeep } from 'es-toolkit'
 import type { NamedInputEvent, PrecognitionPath, ValidationConfig, Validator } from 'laravel-precognition'
 import { useCallback, useMemo, useRef } from 'react'
 import useFormState, { SetDataAction, SetDataByKeyValuePair, SetDataByMethod, SetDataByObject } from './useFormState'
+import { useLayerId } from './useLayer'
 import useRemember from './useRemember'
 
 // Re-export types that were moved to useFormState
@@ -117,6 +118,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   // Resolve initial data for remember functionality hooks
   const initialDefaults = typeof data === 'function' ? cloneDeep(data()) : cloneDeep(data)
 
+  const layerId = useLayerId()
   const cancelToken = useRef<CancelToken | null>(null)
   const excludeKeysRef = useRef<FormDataKeys<TForm>[]>([])
   const pendingOptimisticRef = useRef<OptimisticCallback | null>(null)
@@ -159,6 +161,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
       defaultsCalledInOnSuccessRef.current = false
 
       const _options: VisitOptions = {
+        layerId,
         ...options,
         onCancelToken: (token) => {
           cancelToken.current = token
diff --git a/packages/react/src/useLayer.ts b/packages/react/src/useLayer.ts
new file mode 100644
index 000000000..605d3345e
--- /dev/null
+++ b/packages/react/src/useLayer.ts
@@ -0,0 +1,13 @@
+import { createLayerApi, LayerApi } from '@inertiajs/core'
+import { createContext, use, useMemo } from 'react'
+
+export const layerContext = createContext<string | null>(null)
+layerContext.displayName = 'InertiaLayerContext'
+
+export const useLayerId = (): string | undefined => use(layerContext) ?? undefined
+
+export default function useLayer(): LayerApi {
+  const layerId = useLayerId()
+
+  return useMemo(() => createLayerApi(layerId), [layerId])
+}
diff --git a/packages/react/src/usePoll.ts b/packages/react/src/usePoll.ts
index fc0cc1daf..e294e3380 100644
--- a/packages/react/src/usePoll.ts
+++ b/packages/react/src/usePoll.ts
@@ -1,5 +1,6 @@
 import { PollOptions, ReloadOptions, router } from '@inertiajs/core'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import useLayer from './useLayer'
 
 export default function usePoll(
   interval: number,
@@ -12,12 +13,13 @@ export default function usePoll(
   const latest = useRef(requestOptions)
   latest.current = requestOptions
 
+  const layer = useLayer()
   const pollRef = useRef<ReturnType<typeof router.poll> | null>(null)
 
   const [polling, setPolling] = useState(options.autoStart ?? true)
 
   useEffect(() => {
-    pollRef.current = router.poll(
+    pollRef.current = layer.poll(
       interval,
       typeof requestOptions === 'function' ? () => (latest.current as () => ReloadOptions)() : requestOptions,
       { ...options, autoStart: options.autoStart ?? true },
diff --git a/packages/react/src/useRemember.ts b/packages/react/src/useRemember.ts
index 529bfc02a..63d1f0d46 100755
--- a/packages/react/src/useRemember.ts
+++ b/packages/react/src/useRemember.ts
@@ -1,13 +1,15 @@
 import { router } from '@inertiajs/core'
 import { Dispatch, MutableRefObject, SetStateAction, useEffect, useState } from 'react'
+import { useLayerId } from './useLayer'
 
 export default function useRemember<State>(
   initialState: State,
   key?: string,
   excludeKeysRef?: MutableRefObject<string[]>,
 ): [State, Dispatch<SetStateAction<State>>] {
+  const layerId = useLayerId()
   const [state, setState] = useState(() => {
-    const restored = router.restore(key) as State
+    const restored = router.restore(key, layerId) as State
 
     return restored !== undefined ? restored : initialState
   })
@@ -17,9 +19,9 @@ export default function useRemember<State>(
     if (keys && keys.length > 0 && typeof state === 'object' && state !== null) {
       const filtered = { ...state } as Record<string, unknown>
       keys.forEach((k) => delete filtered[k])
-      router.remember(filtered, key)
+      router.remember(filtered, key, layerId)
     } else {
-      router.remember(state, key)
+      router.remember(state, key, layerId)
     }
   }, [state, key])
 
diff --git a/packages/react/test-app/Layouts/AdminLayout.tsx b/packages/react/test-app/Layouts/AdminLayout.tsx
new file mode 100644
index 000000000..2172f16d2
--- /dev/null
+++ b/packages/react/test-app/Layouts/AdminLayout.tsx
@@ -0,0 +1,8 @@
+export default ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div id="admin-layout">
+      <span>Admin Layout</span>
+      {children}
+    </div>
+  )
+}
diff --git a/packages/react/test-app/Layouts/DefaultLayout.tsx b/packages/react/test-app/Layouts/DefaultLayout.tsx
index 489b41a3d..c00e0e482 100644
--- a/packages/react/test-app/Layouts/DefaultLayout.tsx
+++ b/packages/react/test-app/Layouts/DefaultLayout.tsx
@@ -1,7 +1,20 @@
-export default ({ children }: { children: React.ReactNode }) => {
+export default ({
+  children,
+  baseChrome,
+  layerChrome,
+  name,
+}: {
+  children: React.ReactNode
+  baseChrome?: string
+  layerChrome?: string
+  name?: string
+}) => {
   return (
     <div id="default-layout">
       <span>Default Layout</span>
+      <div id="base-chrome">{baseChrome ?? ''}</div>
+      <div id="layer-chrome">{layerChrome ?? ''}</div>
+      <div id="layout-name">{name ?? ''}</div>
       {children}
     </div>
   )
diff --git a/packages/react/test-app/Layouts/Layer.tsx b/packages/react/test-app/Layouts/Layer.tsx
new file mode 100644
index 000000000..5fd2d4568
--- /dev/null
+++ b/packages/react/test-app/Layouts/Layer.tsx
@@ -0,0 +1,37 @@
+import { Layer, useLayer, usePage } from '@inertiajs/react'
+import { ReactNode } from 'react'
+
+export default function LayerWrapper({
+  open,
+  index,
+  isTop,
+  type,
+  close,
+  done,
+  children,
+}: {
+  open: boolean
+  index: number
+  isTop: boolean
+  type: 'routed' | 'local'
+  close: () => void
+  done: () => void
+  children?: ReactNode
+}) {
+  const page = usePage()
+  const layer = useLayer()
+
+  return (
+    <Layer
+      open={open}
+      index={index}
+      isTop={isTop}
+      type={type}
+      close={close}
+      done={done}
+      label={layer.id ? page.component : 'unresolved'}
+    >
+      {children}
+    </Layer>
+  )
+}
diff --git a/packages/react/test-app/Pages/History/NonSerializable.tsx b/packages/react/test-app/Pages/History/NonSerializable.tsx
new file mode 100644
index 000000000..923009fd7
--- /dev/null
+++ b/packages/react/test-app/Pages/History/NonSerializable.tsx
@@ -0,0 +1,13 @@
+import { router } from '@inertiajs/react'
+
+export default () => {
+  const pushFunctionProp = () => {
+    router.push({
+      url: '/history/non-serializable/target',
+      component: 'History/NonSerializableTarget',
+      props: { message: 'Target page', onAction: () => 'action from the function prop' },
+    })
+  }
+
+  return <button onClick={pushFunctionProp}>Push a function prop</button>
+}
diff --git a/packages/react/test-app/Pages/History/NonSerializableTarget.tsx b/packages/react/test-app/Pages/History/NonSerializableTarget.tsx
new file mode 100644
index 000000000..6f10db631
--- /dev/null
+++ b/packages/react/test-app/Pages/History/NonSerializableTarget.tsx
@@ -0,0 +1,19 @@
+import { router } from '@inertiajs/react'
+
+export default ({ message }: { message: string }) => {
+  const clientVisit = () => {
+    router.push({
+      url: '/history/non-serializable/landed',
+      component: 'History/NonSerializableTarget',
+      props: { message: 'Client visit landed' },
+    })
+  }
+
+  return (
+    <>
+      <button onClick={clientVisit}>Client visit</button>
+
+      <div>{message}</div>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/Base.tsx b/packages/react/test-app/Pages/Layers/Base.tsx
new file mode 100644
index 000000000..0a93a159b
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Base.tsx
@@ -0,0 +1,114 @@
+import { Link, router, setLayoutProps, usePage, useRemember } from '@inertiajs/react'
+import { useState } from 'react'
+
+export default ({ likes }: { likes: number }) => {
+  const page = usePage()
+  const { errors } = page.props as { errors?: { name?: string } }
+  const [visitEvents, setVisitEvents] = useState<string[]>([])
+  const [childEvents, setChildEvents] = useState('')
+  const [cancelledEvent, setCancelledEvent] = useState('')
+  const [remembered, setRemembered] = useRemember({ note: '' })
+
+  const record = (event: string) => setVisitEvents((events) => [...events, event])
+
+  const pushPanel = () => {
+    router.push({
+      url: '/layers/panel/client',
+      component: 'Layers/Panel',
+      props: { name: 'from a client visit' },
+    })
+  }
+
+  const openPanelWithCallbacks = () => {
+    router.visit('/layers/panel/first', {
+      onFlash: () => record('flash'),
+      onError: () => record('error'),
+      onSuccess: () => record('success'),
+    })
+  }
+
+  const openPanelWithViewTransition = () => {
+    router.visit('/layers/panel/first', { viewTransition: true })
+  }
+
+  const like = () => {
+    router.optimistic<{ likes: number }>((props) => ({ likes: props.likes + 1 })).post('/layers/like')
+  }
+
+  const refresh = () => {
+    router.reload()
+  }
+
+  const openPanelWithoutMovingTheAddress = () => {
+    router.visit('/layers/counted/panel', { preserveUrl: true })
+  }
+
+  const partialReload = () => {
+    router.reload({ only: ['likes'] })
+  }
+
+  const openHandledPanel = () => {
+    const handle = router.layer('/layers/panel/first')
+    handle.on('saved', (user) => setChildEvents(`saved ${(user as { id?: number })?.id}`))
+  }
+
+  const openCancelledPanel = () => {
+    const handle = router.layer('/layers/panel/delayed?delay=600')
+    handle.onClose(() => setCancelledEvent('closed'))
+  }
+
+  const openLocalLayer = () => {
+    router.layer({ component: 'Layers/Local', props: { note: 'local' } })
+  }
+
+  const setBaseChrome = () => {
+    setLayoutProps({ baseChrome: 'base' })
+  }
+
+  return (
+    <>
+      <div>Base page</div>
+
+      {/* Tall enough that the page beneath a layer has a scroll position worth keeping. */}
+      <div id="spacer" style={{ height: 1000 }} />
+
+      {errors?.name && <p id="page-error">{errors.name}</p>}
+
+      <div id="layer-count">{page.layers?.length ?? 0}</div>
+      <div id="visit-events">{visitEvents.join(',')}</div>
+      <div id="page-flash">{(page.flash as { message?: string })?.message ?? ''}</div>
+      <div id="likes">{likes}</div>
+      <div id="child-events">{childEvents}</div>
+      <div id="cancelled-event">{cancelledEvent}</div>
+
+      <input id="note" />
+      {/* A history entry carries remembered state, so this is the one input that can survive a back. */}
+      <input id="remembered-note" value={remembered.note} onChange={(e) => setRemembered({ note: e.target.value })} />
+
+      <Link href="/layers/panel/first">Open panel</Link>
+      <Link href="/layers/guarded">Open guarded panel</Link>
+      <Link href="/layers/panel/second">Open second panel</Link>
+      <Link href="/layers/panel/third">Open third panel</Link>
+      <Link href="/layers/slow">Open slow panel</Link>
+      <Link href="/layers/panel/delayed?delay=600">Open delayed panel</Link>
+      <Link href="/layers/settings">Open settings</Link>
+      {/* Both steps are the same layer key, so the second rewrites the layer the first opened. */}
+      <Link href="/layers/step/one">Open step one</Link>
+      <Link href="/layers/step/two">Open step two</Link>
+      <Link href="/layers/counted/panel">Open counted panel</Link>
+      <Link href="/layers/deferred">Open deferred layer</Link>
+
+      <button onClick={pushPanel}>Push panel as a page</button>
+      <button onClick={openPanelWithCallbacks}>Open panel with callbacks</button>
+      <button onClick={openPanelWithViewTransition}>Open panel with view transition</button>
+      <button onClick={like}>Like</button>
+      <button onClick={refresh}>Refresh in the background</button>
+      <button onClick={openPanelWithoutMovingTheAddress}>Open panel without moving the address</button>
+      <button onClick={partialReload}>Partial reload</button>
+      <button onClick={openHandledPanel}>Open handled panel</button>
+      <button onClick={openCancelledPanel}>Open cancelled panel</button>
+      <button onClick={openLocalLayer}>Open local layer</button>
+      <button onClick={setBaseChrome}>Set base chrome</button>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/ChainInner.tsx b/packages/react/test-app/Pages/Layers/ChainInner.tsx
new file mode 100644
index 000000000..99a7de9c3
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/ChainInner.tsx
@@ -0,0 +1,8 @@
+import { Head } from '@inertiajs/react'
+
+export default () => (
+  <>
+    <Head title="Chain inner" />
+    <div>Chain inner</div>
+  </>
+)
diff --git a/packages/react/test-app/Pages/Layers/ChainOuter.tsx b/packages/react/test-app/Pages/Layers/ChainOuter.tsx
new file mode 100644
index 000000000..1a895052c
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/ChainOuter.tsx
@@ -0,0 +1,8 @@
+import { Head } from '@inertiajs/react'
+
+export default () => (
+  <>
+    <Head title="Chain outer" />
+    <div>Chain outer</div>
+  </>
+)
diff --git a/packages/react/test-app/Pages/Layers/Child.tsx b/packages/react/test-app/Pages/Layers/Child.tsx
new file mode 100644
index 000000000..80622f8bf
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Child.tsx
@@ -0,0 +1,13 @@
+import { useLayer } from '@inertiajs/react'
+
+export default () => {
+  const layer = useLayer()
+
+  return (
+    <>
+      <div>Child layer</div>
+      <button onClick={() => layer.emit('saved', { id: 5 })}>Emit saved</button>
+      <button onClick={() => layer.close()}>Close myself</button>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/Deferred.tsx b/packages/react/test-app/Pages/Layers/Deferred.tsx
new file mode 100644
index 000000000..caa936c3b
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Deferred.tsx
@@ -0,0 +1,11 @@
+import { Deferred } from '@inertiajs/react'
+
+export default ({ name, stats }: { name: string; stats?: number[] }) => (
+  <>
+    <div>Deferred layer: {name}</div>
+
+    <Deferred data="stats" fallback={<div data-testid="deferred-fallback">Loading stats...</div>}>
+      <div data-testid="deferred-stats">{stats?.join(',')}</div>
+    </Deferred>
+  </>
+)
diff --git a/packages/react/test-app/Pages/Layers/Guarded.tsx b/packages/react/test-app/Pages/Layers/Guarded.tsx
new file mode 100644
index 000000000..18d76e365
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Guarded.tsx
@@ -0,0 +1,3 @@
+export default () => {
+  return <div id="guarded-layer">Guarded layer</div>
+}
diff --git a/packages/react/test-app/Pages/Layers/Headed.tsx b/packages/react/test-app/Pages/Layers/Headed.tsx
new file mode 100644
index 000000000..496974d58
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Headed.tsx
@@ -0,0 +1,10 @@
+import { Head } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <>
+      <Head title="Headed Layer" />
+      <div>Headed layer</div>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/HeadedBase.tsx b/packages/react/test-app/Pages/Layers/HeadedBase.tsx
new file mode 100644
index 000000000..3b10a8243
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/HeadedBase.tsx
@@ -0,0 +1,10 @@
+import { Head } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <>
+      <Head title="Headed Base" />
+      <div>Headed base page</div>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/Infinite.tsx b/packages/react/test-app/Pages/Layers/Infinite.tsx
new file mode 100644
index 000000000..c40f616d3
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Infinite.tsx
@@ -0,0 +1,31 @@
+import { InfiniteScroll } from '@inertiajs/react'
+import UserCard, { User } from '../InfiniteScroll/UserCard'
+
+export default ({ users }: { users: { data: User[] } }) => {
+  return (
+    <>
+      <div>Infinite layer</div>
+      <InfiniteScroll
+        data="users"
+        style={{ display: 'grid', gap: '20px' }}
+        manual
+        previous={({ loading, fetch, hasMore }) => (
+          <>
+            <button onClick={fetch}>{loading ? 'Loading previous items...' : 'Load previous items'}</button>
+            <span>Has more previous: {hasMore.toString()}</span>
+          </>
+        )}
+        next={({ loading, fetch, hasMore }) => (
+          <>
+            <button onClick={fetch}>{loading ? 'Loading next items...' : 'Load next items'}</button>
+            <span>Has more next: {hasMore.toString()}</span>
+          </>
+        )}
+      >
+        {users.data.map((user) => (
+          <UserCard key={user.id} user={user} />
+        ))}
+      </InfiniteScroll>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/LoadingBase.tsx b/packages/react/test-app/Pages/Layers/LoadingBase.tsx
new file mode 100644
index 000000000..bb91a1197
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/LoadingBase.tsx
@@ -0,0 +1,3 @@
+export default () => {
+  return <div id="loading-base">Loading the page beneath</div>
+}
diff --git a/packages/react/test-app/Pages/Layers/Local.tsx b/packages/react/test-app/Pages/Layers/Local.tsx
new file mode 100644
index 000000000..3b5133288
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Local.tsx
@@ -0,0 +1,7 @@
+export default ({ note, errors }: { note: string; errors: Record<string, string> }) => (
+  <>
+    <div>Local layer</div>
+    <div id="local-note">{note}</div>
+    <div id="local-errors">{typeof errors}</div>
+  </>
+)
diff --git a/packages/react/test-app/Pages/Layers/Login.tsx b/packages/react/test-app/Pages/Layers/Login.tsx
new file mode 100644
index 000000000..4a0fb62c8
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Login.tsx
@@ -0,0 +1,15 @@
+import { router } from '@inertiajs/react'
+
+export default () => {
+  const signIn = () => {
+    router.post('/layers/login')
+  }
+
+  return (
+    <>
+      <div id="login-page">Sign in to continue</div>
+
+      <button onClick={signIn}>Sign in</button>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/Panel.tsx b/packages/react/test-app/Pages/Layers/Panel.tsx
new file mode 100644
index 000000000..74872294e
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Panel.tsx
@@ -0,0 +1,118 @@
+import { router, useForm, useLayer, usePage } from '@inertiajs/react'
+import { useEffect, useState } from 'react'
+
+export default ({ name, count, errors }: { name: string; count?: number; errors?: { note?: string } }) => {
+  const page = usePage()
+  const layer = useLayer()
+  const form = useForm('note', { note: '' })
+
+  const [childEvents, setChildEvents] = useState('')
+
+  useEffect(() => layer.on('saved', (payload) => setChildEvents(`saved ${(payload as { id: number }).id}`)), [layer])
+
+  const save = () => {
+    router.post(`/layers/panel/${name}/save`)
+  }
+
+  const submitForm = () => {
+    form.post(`/layers/panel/${name}/save`)
+  }
+
+  const submitFormOptimistically = () => {
+    form.optimistic<{ count: number }>((current) => ({ ...current, count: 99 })).post(`/layers/panel/${name}/save-slow`)
+  }
+
+  const saveAndClose = () => {
+    router.post('/layers/close')
+  }
+
+  const openNext = () => {
+    router.post(`/layers/panel/${name}/next`)
+  }
+
+  const openNextInstantly = () => {
+    layer.visit('/layers/panel/second?delay=500', { component: 'Layers/Panel' })
+  }
+
+  const openNextWithoutMovingTheAddress = () => {
+    router.visit('/layers/panel/second', { preserveUrl: true })
+  }
+
+  const partialReload = () => {
+    layer.reload({ only: ['count'] })
+  }
+
+  const partialThroughTheLayerRouter = () => {
+    layer.get(`/layers/panel/${name}`, {}, { only: ['count'] })
+  }
+
+  const reloadBase = () => {
+    router.reload()
+  }
+
+  const bumpCount = () => {
+    layer.replaceProp('count', (old: unknown) => Number(old ?? 0) + 1)
+  }
+
+  const openChild = () => {
+    const handle = router.layer('/layers/child')
+    window.testing.childHandle = handle
+  }
+
+  const likeAndClose = () => {
+    router.post('/layers/like')
+    layer.close()
+  }
+
+  const likeInBackgroundAndClose = () => {
+    router.post('/layers/like', {}, { async: true })
+    layer.close()
+  }
+
+  const openChildThroughTheLayer = () => {
+    const handle = layer.layer('/layers/child')
+    window.testing.layerChildHandle = handle
+  }
+
+  return (
+    <>
+      <div>Panel layer: {name}</div>
+
+      {/* usePage() inside a layer resolves the layer's own page, not the composite's. */}
+      <div data-testid="layer-use-page">
+        {(page.props as { name?: string }).name}|{page.url}|{page.component}
+      </div>
+
+      <div data-testid="panel-count">{count}</div>
+
+      <div id="panel-child-events">{childEvents}</div>
+
+      {errors?.note && <p className="panel-error">{errors.note}</p>}
+
+      <input className="panel-note" />
+      <input
+        className="layer-remembered"
+        value={form.data.note}
+        onChange={(e) => form.setData('note', e.target.value)}
+      />
+
+      {form.errors.note && <p className="panel-form-error">{form.errors.note}</p>}
+
+      <button onClick={save}>Save panel</button>
+      <button onClick={submitForm}>Submit panel form</button>
+      <button onClick={submitFormOptimistically}>Submit panel form optimistically</button>
+      <button onClick={saveAndClose}>Save and close</button>
+      <button onClick={openNext}>Open next panel</button>
+      <button onClick={openNextInstantly}>Instantly open the next panel</button>
+      <button onClick={openNextWithoutMovingTheAddress}>Open a second panel without moving the address</button>
+      <button onClick={partialReload}>Partial reload panel</button>
+      <button onClick={partialThroughTheLayerRouter}>Partial through the layer router</button>
+      <button onClick={reloadBase}>Reload base beneath</button>
+      <button onClick={bumpCount}>Layer replaceProp</button>
+      <button onClick={likeAndClose}>Like and close</button>
+      <button onClick={likeInBackgroundAndClose}>Like in the background and close</button>
+      <button onClick={openChild}>Open child layer</button>
+      <button onClick={openChildThroughTheLayer}>Open child through the layer</button>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/Prompt.tsx b/packages/react/test-app/Pages/Layers/Prompt.tsx
new file mode 100644
index 000000000..9c8893b78
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Prompt.tsx
@@ -0,0 +1,15 @@
+import { router } from '@inertiajs/react'
+
+export default () => {
+  const complete = () => {
+    router.post('/layers/prompt/complete')
+  }
+
+  return (
+    <>
+      <div id="prompt-page">Sudo prompt</div>
+
+      <button onClick={complete}>Complete the prompt</button>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/ScrollBase.tsx b/packages/react/test-app/Pages/Layers/ScrollBase.tsx
new file mode 100644
index 000000000..831718def
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/ScrollBase.tsx
@@ -0,0 +1,10 @@
+export default () => {
+  return (
+    <>
+      <div>Scroll base page</div>
+      <div scroll-region="" id="base-region" style={{ height: 200, overflowY: 'auto', border: '1px solid #ccc' }}>
+        <div style={{ height: 800 }}>Base scrollable content</div>
+      </div>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/ScrollLayer.tsx b/packages/react/test-app/Pages/Layers/ScrollLayer.tsx
new file mode 100644
index 000000000..15b03ed6d
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/ScrollLayer.tsx
@@ -0,0 +1,10 @@
+export default () => {
+  return (
+    <>
+      <div>Scroll layer</div>
+      <div scroll-region="" id="layer-region" style={{ height: 200, overflowY: 'auto', border: '1px solid #ccc' }}>
+        <div style={{ height: 800 }}>Layer scrollable content</div>
+      </div>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/Settings.tsx b/packages/react/test-app/Pages/Layers/Settings.tsx
new file mode 100644
index 000000000..39ba2b81e
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Settings.tsx
@@ -0,0 +1,14 @@
+import { Link, setLayoutProps, useLayer } from '@inertiajs/react'
+
+export default () => {
+  const layer = useLayer()
+
+  setLayoutProps({ layerChrome: 'layer' }, layer.id)
+
+  return (
+    <>
+      <div>Account settings</div>
+      <Link href="/layers/settings">Open settings again</Link>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/Layers/Slow.tsx b/packages/react/test-app/Pages/Layers/Slow.tsx
new file mode 100644
index 000000000..5c16da854
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Slow.tsx
@@ -0,0 +1,3 @@
+export default () => {
+  return <div>Slow layer</div>
+}
diff --git a/packages/react/test-app/Pages/Layers/SlowImport.tsx b/packages/react/test-app/Pages/Layers/SlowImport.tsx
new file mode 100644
index 000000000..e9b12a26c
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/SlowImport.tsx
@@ -0,0 +1,3 @@
+export default () => {
+  return <div>Slow import base</div>
+}
diff --git a/packages/react/test-app/Pages/Layers/Waypoint.tsx b/packages/react/test-app/Pages/Layers/Waypoint.tsx
new file mode 100644
index 000000000..c278ec7cc
--- /dev/null
+++ b/packages/react/test-app/Pages/Layers/Waypoint.tsx
@@ -0,0 +1,22 @@
+import { Link, router } from '@inertiajs/react'
+
+export default ({ name, next }: { name: string; next: string }) => {
+  const prefetchPanel = () => {
+    router.prefetch('/layers/panel/first', {}, { cacheFor: '30s' })
+  }
+
+  const openPanelInstantly = () => {
+    router.visit('/layers/panel/first', { component: 'Layers/Panel' })
+  }
+
+  return (
+    <>
+      <div id="waypoint">Waypoint {name}</div>
+
+      <Link href={`/layers/waypoint/${next}`}>Go to the next waypoint</Link>
+
+      <button onClick={prefetchPanel}>Prefetch the panel</button>
+      <button onClick={openPanelInstantly}>Instantly open the panel</button>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/SSR/Layer.tsx b/packages/react/test-app/Pages/SSR/Layer.tsx
new file mode 100644
index 000000000..008757c2e
--- /dev/null
+++ b/packages/react/test-app/Pages/SSR/Layer.tsx
@@ -0,0 +1,16 @@
+import { useRemember } from '@inertiajs/react'
+
+export default function Layer() {
+  const [remembered, setRemembered] = useRemember({ note: '' })
+
+  return (
+    <>
+      <div data-testid="ssr-layer">SSR layer</div>
+      <input
+        value={remembered.note}
+        onChange={(event) => setRemembered({ note: event.target.value })}
+        data-testid="ssr-layer-note"
+      />
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/SSR/LayerBase.tsx b/packages/react/test-app/Pages/SSR/LayerBase.tsx
new file mode 100644
index 000000000..f6722c038
--- /dev/null
+++ b/packages/react/test-app/Pages/SSR/LayerBase.tsx
@@ -0,0 +1,3 @@
+export default function LayerBase() {
+  return <div data-testid="ssr-layer-base">SSR layer base</div>
+}
diff --git a/packages/react/test-app/Pages/SSR/LayerLoading.tsx b/packages/react/test-app/Pages/SSR/LayerLoading.tsx
new file mode 100644
index 000000000..cb929c4ff
--- /dev/null
+++ b/packages/react/test-app/Pages/SSR/LayerLoading.tsx
@@ -0,0 +1,3 @@
+export default function LayerLoading() {
+  return <div id="loading-base">SSR loading placeholder</div>
+}
diff --git a/packages/react/test-app/Pages/TypeScriptLayoutProps.tsx b/packages/react/test-app/Pages/TypeScriptLayoutProps.tsx
index 386c5a0e0..f313aa77b 100644
--- a/packages/react/test-app/Pages/TypeScriptLayoutProps.tsx
+++ b/packages/react/test-app/Pages/TypeScriptLayoutProps.tsx
@@ -6,6 +6,8 @@ declare module '@inertiajs/core' {
     layoutProps: {
       title: string
       showSidebar: boolean
+      baseChrome?: string
+      layerChrome?: string
     }
     namedLayoutProps: {
       app: { title: string; theme: 'light' | 'dark' }
diff --git a/packages/react/test-app/app.tsx b/packages/react/test-app/app.tsx
index a8c1cf75e..3960ec957 100644
--- a/packages/react/test-app/app.tsx
+++ b/packages/react/test-app/app.tsx
@@ -1,11 +1,15 @@
 import type { HttpClient, HttpClientOptions, Page } from '@inertiajs/core'
 import { axiosAdapter, type VisitOptions } from '@inertiajs/core'
-import { createInertiaApp, router, type ResolvedComponent } from '@inertiajs/react'
-import { createRoot } from 'react-dom/client'
+import { createInertiaApp, router, setLayoutProps, type ResolvedComponent } from '@inertiajs/react'
+import { createRoot, hydrateRoot } from 'react-dom/client'
+import AdminLayout from './Layouts/AdminLayout'
 import AppLayout from './Layouts/AppLayout'
 import DefaultLayout from './Layouts/DefaultLayout'
+import Layer from './Layouts/Layer'
+import LoadingBase from './Pages/Layers/LoadingBase'
+import LayerLoading from './Pages/SSR/LayerLoading'
 
-window.testing = { Inertia: router }
+window.testing = { Inertia: router, setLayoutProps }
 window.resolverReceivedPage = null as Page | null
 
 const params = new URLSearchParams(window.location.search)
@@ -39,10 +43,34 @@ createInertiaApp({
       await new Promise((resolve) => setTimeout(resolve, 50))
     }
 
+    if (name === 'Layers/Slow') {
+      // Long enough for a test to supersede the layer visit while it is still resolving
+      await new Promise((resolve) => setTimeout(resolve, 500))
+    }
+
+    if (name === 'Layers/SlowImport') {
+      // Long enough for a dismissal to supersede a walk landing while its component resolves
+      await new Promise((resolve) => setTimeout(resolve, 700))
+    }
+
     return pages[`./Pages/${name}.tsx`]
   },
+  layer: Layer,
+  loading: (url, page) => {
+    window.loadingResolved = [url, ...(page.layers ?? []).map((layer) => layer.key)].join('|')
+
+    if (url.startsWith('/ssr/layer-loading-base')) {
+      return LayerLoading
+    }
+
+    return url.startsWith('/layers/loading') ? LoadingBase : undefined
+  },
   setup({ el, App, props }) {
-    createRoot(el).render(<App {...props} />)
+    if (el.hasAttribute('data-server-rendered')) {
+      hydrateRoot(el, <App {...props} />)
+    } else {
+      createRoot(el).render(<App {...props} />)
+    }
   },
   progress: {
     delay: 0,
@@ -59,6 +87,9 @@ createInertiaApp({
   ...(params.has('withDefaultLayout') && {
     layout: () => DefaultLayout,
   }),
+  ...(params.has('withUrlBasedLayout') && {
+    layout: (name: string, page) => (page.url?.startsWith('/layers/base') ? AdminLayout : DefaultLayout),
+  }),
   ...(params.has('withAnonymousDefaultLayout') && {
     layout:
       () =>
@@ -98,4 +129,7 @@ createInertiaApp({
   ...(params.has('withTitleCallback') && {
     title: (title, page) => [title, page.props.titleSuffix].filter(Boolean).join(' | '),
   }),
+  ...(params.has('withLayersTitleCallback') && {
+    title: (title, page) => [title, page.props.suffix].filter(Boolean).join(' | '),
+  }),
 })
diff --git a/packages/react/test-app/ssr-auto.tsx b/packages/react/test-app/ssr-auto.tsx
index 50c9027b6..d352e43fe 100644
--- a/packages/react/test-app/ssr-auto.tsx
+++ b/packages/react/test-app/ssr-auto.tsx
@@ -1,5 +1,6 @@
 import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
 import { createElement } from 'react'
+import Layer from './Layouts/Layer'
 import { WithAppContext } from './Pages/SSR/WithApp'
 
 // This file uses createInertiaApp as a standalone expression (not exported)
@@ -9,6 +10,7 @@ import { WithAppContext } from './Pages/SSR/WithApp'
 // 3. Export a default render function
 
 createInertiaApp<{ locale?: string }>({
+  layer: Layer,
   resolve: (name) => {
     const pages = import.meta.glob<ResolvedComponent>('./Pages/SSR/**/*.tsx', { eager: true })
     return pages[`./Pages/${name}.tsx`]
diff --git a/packages/react/test-app/ssr.tsx b/packages/react/test-app/ssr.tsx
index 801c2ce82..14ada7180 100644
--- a/packages/react/test-app/ssr.tsx
+++ b/packages/react/test-app/ssr.tsx
@@ -1,11 +1,21 @@
 import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
 import createServer from '@inertiajs/react/server'
 import ReactDOMServer from 'react-dom/server'
+import Layer from './Layouts/Layer'
 
 createServer((page) =>
   createInertiaApp({
     page,
     render: ReactDOMServer.renderToString,
+    layer: Layer,
+    loading: (url: string) => {
+      if (!url.startsWith('/ssr/layer-loading-base')) {
+        return undefined
+      }
+
+      const pages = import.meta.glob<ResolvedComponent>('./Pages/SSR/**/*.tsx', { eager: true })
+      return pages['./Pages/SSR/LayerLoading.tsx']
+    },
     serverHead: (page) => page.props.head as string[],
     resolve: (name) => {
       const pages = import.meta.glob<ResolvedComponent>('./Pages/SSR/**/*.tsx', { eager: true })
diff --git a/packages/react/test-app/types.d.ts b/packages/react/test-app/types.d.ts
index 6b4f0521e..e004b16a3 100644
--- a/packages/react/test-app/types.d.ts
+++ b/packages/react/test-app/types.d.ts
@@ -1,9 +1,13 @@
-import type { Method, Page, PageProps, Router } from '@inertiajs/core'
+import type { LayerHandle, Method, Page, PageProps, Router } from '@inertiajs/core'
+import { setLayoutProps as adapterSetLayoutProps } from '@inertiajs/react'
 
 declare global {
   interface Window {
     testing: {
       Inertia: Router
+      setLayoutProps?: typeof adapterSetLayoutProps
+      childHandle?: LayerHandle
+      layerChildHandle?: LayerHandle
     }
     initialPage: Page
     _inertia_request_dump: {
@@ -26,6 +30,7 @@ declare global {
     _inertia_content_layout_id: string | undefined
     _plugin_global_props: object
     resolverReceivedPage: Page | null
+    loadingResolved: string | undefined
   }
 
   interface ImportMeta {
diff --git a/packages/svelte/src/components/App.svelte b/packages/svelte/src/components/App.svelte
index 635ecd89f..eaf37cf0c 100644
--- a/packages/svelte/src/components/App.svelte
+++ b/packages/svelte/src/components/App.svelte
@@ -1,39 +1,66 @@
 <script module lang="ts">
-  import { type Page, type PageProps } from '@inertiajs/core'
-  import type { ComponentResolver, ResolvedComponent } from '../types'
+  import { type LoadingResolver, type Page, type PageProps, type ResolvedLayer } from '@inertiajs/core'
+  import type { ComponentResolver, LayerComponent, ResolvedComponent } from '../types'
 
   export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
-    initialComponent: ResolvedComponent
+    initialComponent?: ResolvedComponent
     initialPage: Page<SharedProps>
+    initialLayers?: ResolvedLayer<ResolvedComponent>[]
     resolveComponent: ComponentResolver
+    resolveLoading?: LoadingResolver
     defaultLayout?: (name: string, page: Page) => unknown
+    layer?: LayerComponent
   }
 </script>
 
 <script lang="ts">
-  import { isPropsObjectOrCallback, isPropsObject, normalizeLayouts } from '@inertiajs/core'
+  import {
+    emptyLayoutSlot,
+    isPropsObjectOrCallback,
+    isPropsObject,
+    layerShellProps,
+    layerTransitionName,
+    layoutPageOf,
+    normalizeLayouts,
+  } from '@inertiajs/core'
+  import type { LayoutSlot } from '@inertiajs/core'
   import { router } from '@inertiajs/core'
   import type { Component } from 'svelte'
-  import { resetLayoutProps, storeState } from '../layoutProps.svelte'
+  import { layerState, resetLayoutProps, retainLayerLayoutProps, storeState } from '../layoutProps.svelte'
   import { setPage } from '../page.svelte'
   import type { LayoutType, LayoutResolver } from '../types'
+  import Layer from './Layer.svelte'
+  import LayerPageContext from './LayerPageContext.svelte'
   import Render, { h, type RenderProps } from './Render.svelte'
 
   interface Props {
-    initialComponent: InertiaAppProps['initialComponent']
+    initialComponent?: InertiaAppProps['initialComponent']
     initialPage: InertiaAppProps['initialPage']
+    initialLayers?: InertiaAppProps['initialLayers']
     resolveComponent: InertiaAppProps['resolveComponent']
+    resolveLoading?: InertiaAppProps['resolveLoading']
     defaultLayout?: InertiaAppProps['defaultLayout']
+    layer?: InertiaAppProps['layer']
   }
 
-  const { initialComponent, initialPage, resolveComponent, defaultLayout }: Props = $props()
+  const {
+    initialComponent,
+    initialPage,
+    initialLayers,
+    resolveComponent,
+    resolveLoading,
+    defaultLayout,
+    layer: LayerComponent = Layer,
+  }: Props = $props()
 
   // svelte-ignore state_referenced_locally
   let component = $state(initialComponent)
   let key = $state<number | null>(null)
   // svelte-ignore state_referenced_locally
   let page = $state({ ...initialPage, flash: initialPage.flash ?? {} })
-  let renderProps = $derived.by<RenderProps>(() => resolveRenderProps(component, page, key))
+  // svelte-ignore state_referenced_locally
+  let layers = $state<ResolvedLayer<ResolvedComponent>[]>(initialLayers ?? [])
+  let renderProps = $derived.by<RenderProps | null>(() => (component ? resolveRenderProps(component, page, key) : null))
 
   // Synchronous initialization so the global page store is populated during SSR
   // ($effect.pre does not run during Svelte 5 SSR)
@@ -52,18 +79,23 @@
     router.init<ResolvedComponent>({
       initialPage,
       resolveComponent,
+      resolveLoading,
       swapComponent: async (args) => {
         // Explicitly sync the global page store before swapping components,
         // ensuring the page store is up-to-date when the new component's
         // script block runs (necessary for async: true).
         setPage(args.page)
-        component = args.component
-        page = args.page
-        key = args.preserveState ? key : Date.now()
 
         if (!args.preserveState) {
           resetLayoutProps()
         }
+
+        retainLayerLayoutProps((args.layers ?? []).map((layer) => layer.id))
+
+        component = args.component
+        page = args.page
+        layers = args.layers ?? []
+        key = args.preserveState ? key : Date.now()
       },
       onFlash: (flash) => {
         page = { ...page, flash }
@@ -96,7 +128,16 @@
     )
   }
 
-  function resolveRenderProps(component: ResolvedComponent, page: Page, key: number | null = null): RenderProps {
+  const baseLayoutProps = () => (isServer ? emptyLayoutSlot : { shared: storeState.shared, named: storeState.named })
+  const layerLayoutProps = (layerId: string) => () =>
+    isServer ? emptyLayoutSlot : (layerState[layerId] ?? emptyLayoutSlot)
+
+  function resolveRenderProps(
+    component: ResolvedComponent,
+    page: Page,
+    key: number | null = null,
+    dynamicProps: () => LayoutSlot = baseLayoutProps,
+  ): RenderProps {
     const child = h(component.default, page.props, [], key)
 
     if (component.layout && isRenderFunction(component.layout)) {
@@ -128,7 +169,15 @@
     }
 
     return effectiveLayout
-      ? resolveLayout(effectiveLayout, child, page.props, key, !!component.layout && !callbackProps, callbackProps)
+      ? resolveLayout(
+          effectiveLayout,
+          child,
+          page.props,
+          key,
+          !!component.layout && !callbackProps,
+          callbackProps,
+          dynamicProps,
+        )
       : child
   }
 
@@ -139,6 +188,7 @@
     key: number | null,
     isFromPage: boolean = true,
     callbackProps: Record<string, unknown> | null = null,
+    dynamicProps: () => LayoutSlot = baseLayoutProps,
   ): RenderProps {
     if (isFromPage && isRenderFunction(layout)) {
       return (layout as LayoutResolver)(h, child)
@@ -151,7 +201,7 @@
     }
 
     if (layouts.length > 0) {
-      const dynamicProps = isServer ? { shared: {}, named: {} } : { shared: storeState.shared, named: storeState.named }
+      const slot = dynamicProps()
 
       return layouts.reduceRight((child, layout) => {
         return {
@@ -160,8 +210,8 @@
             {
               ...pageProps,
               ...layout.props,
-              ...dynamicProps.shared,
-              ...(layout.name ? dynamicProps.named[layout.name] || {} : {}),
+              ...slot.shared,
+              ...(layout.name ? slot.named[layout.name] || {} : {}),
             },
             [child],
             key,
@@ -173,6 +223,20 @@
 
     return child
   }
+
+  function wrapLayerLayout(layer: ResolvedLayer<ResolvedComponent>): RenderProps {
+    return resolveRenderProps(layer.component, layoutPageOf(layer), layer.renderKey, layerLayoutProps(layer.id))
+  }
 </script>
 
-<Render {...renderProps} />
+<!-- The stack starts on the same line as the page. A line break between them renders as a
+     whitespace text node, which every app would then carry whether it uses layers or not. -->
+{#if renderProps}<Render {...renderProps} />{/if}{#each layers as layer, index (layer.id)}
+  <LayerPageContext page={layer.page} layerId={layer.id}>
+    <LayerComponent {...layerShellProps(layer, index, layers.length)}>
+      <div data-layer-id={layer.id} style:view-transition-name={layerTransitionName(layer.id)}>
+        <Render {...wrapLayerLayout(layer)} />
+      </div>
+    </LayerComponent>
+  </LayerPageContext>
+{/each}
diff --git a/packages/svelte/src/components/Deferred.svelte b/packages/svelte/src/components/Deferred.svelte
index 3b446a627..3fd2d91d4 100644
--- a/packages/svelte/src/components/Deferred.svelte
+++ b/packages/svelte/src/components/Deferred.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { isSameUrlWithoutQueryOrHash, router, partialReloadRequestsSomeProps } from '@inertiajs/core'
+  import { partialReloadFillsDeferred, router } from '@inertiajs/core'
   import { get } from 'es-toolkit/compat'
-  import { page } from '../index'
+  import { usePage } from '../index'
+  import { layerId } from '../page.svelte'
 
   interface Props {
     data: string | string[]
@@ -12,23 +13,21 @@
 
   let { data, rescue, fallback, children }: Props = $props()
 
+  const page = usePage()
   const keys = $derived(Array.isArray(data) ? data : [data])
   const rescuedKeys = $derived(new Set(page.rescuedProps))
   const loaded = $derived(keys.every((key) => typeof get(page.props, key) !== 'undefined'))
   const failed = $derived(keys.some((key) => rescuedKeys.has(key)))
 
   let reloading = $state(false)
+  const currentLayerId = layerId()
   const activeReloads = new Set<object>()
 
   $effect(() => {
     const removeStartListener = router.on('start', (e) => {
       const visit = e.detail.visit
 
-      if (
-        visit.preserveState === true &&
-        isSameUrlWithoutQueryOrHash(visit.url, window.location) &&
-        partialReloadRequestsSomeProps(visit, keys)
-      ) {
+      if (partialReloadFillsDeferred(visit, { layerId: currentLayerId, url: page.url }, keys)) {
         activeReloads.add(visit)
         reloading = true
       }
diff --git a/packages/svelte/src/components/InfiniteScroll.svelte b/packages/svelte/src/components/InfiniteScroll.svelte
index e4add123b..1c0ea2ce2 100644
--- a/packages/svelte/src/components/InfiniteScroll.svelte
+++ b/packages/svelte/src/components/InfiniteScroll.svelte
@@ -8,8 +8,8 @@
     type ReloadOptions,
     useInfiniteScroll,
   } from '@inertiajs/core'
-  import { onDestroy, onMount } from 'svelte'
-  import { usePage } from '../page.svelte'
+  import { getContext, onDestroy, onMount } from 'svelte'
+  import { layerIdKey, usePage } from '../page.svelte'
 
   interface Props {
     data: InfiniteScrollComponentBaseProps['data']
@@ -132,6 +132,7 @@
     const resolvedEndElement = resolveHTMLElement(endElement, endElementRef)
 
     infiniteScrollInstance = useInfiniteScroll({
+      layerId: getContext<string | undefined>(layerIdKey),
       // Data
       getPropName: () => data,
       inReverseMode: () => reverse ?? false,
diff --git a/packages/svelte/src/components/Layer.svelte b/packages/svelte/src/components/Layer.svelte
new file mode 100644
index 000000000..1042cf53d
--- /dev/null
+++ b/packages/svelte/src/components/Layer.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import {
+    cancelLayer,
+    layerDialogAttributes,
+    lockScroll,
+    observeExit,
+    raiseLayer,
+    type LayerShellProps,
+  } from '@inertiajs/core'
+  import { onMount } from 'svelte'
+  import type { Snippet } from 'svelte'
+
+  let { close, done, children, ...shell }: LayerShellProps & { children: Snippet } = $props()
+
+  let dialog: HTMLDialogElement | undefined = $state()
+
+  const exit = observeExit(
+    () => dialog,
+    () => done(),
+  )
+
+  onMount(() => {
+    raiseLayer(dialog!, shell.isTop)
+
+    const releaseScroll = lockScroll()
+
+    return () => {
+      exit.teardown()
+      releaseScroll()
+    }
+  })
+
+  const onCancel = (event: Event) => cancelLayer(event, { isTop: shell.isTop, close })
+
+  $effect(() => {
+    exit.toggle(shell.open)
+  })
+</script>
+
+<dialog bind:this={dialog} {...layerDialogAttributes(shell)} oncancel={onCancel}>
+  {@render children()}
+</dialog>
diff --git a/packages/svelte/src/components/LayerPageContext.svelte b/packages/svelte/src/components/LayerPageContext.svelte
new file mode 100644
index 000000000..4ebfd3134
--- /dev/null
+++ b/packages/svelte/src/components/LayerPageContext.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Page } from '@inertiajs/core'
+  import { setContext } from 'svelte'
+  import type { Snippet } from 'svelte'
+  import { layerIdKey, layerPageKey } from '../page.svelte'
+
+  let {
+    page,
+    layerId,
+    children,
+  }: {
+    page: Page
+    layerId: string
+    children?: Snippet
+  } = $props()
+
+  // svelte-ignore state_referenced_locally
+  const layerPage = $state<Page>({ ...page })
+
+  $effect.pre(() => {
+    Object.assign(layerPage, page)
+  })
+
+  setContext(layerPageKey, layerPage)
+  // svelte-ignore state_referenced_locally
+  setContext(layerIdKey, layerId)
+</script>
+
+{@render children?.()}
diff --git a/packages/svelte/src/components/Link.svelte b/packages/svelte/src/components/Link.svelte
index 1d3620161..2754c7990 100644
--- a/packages/svelte/src/components/Link.svelte
+++ b/packages/svelte/src/components/Link.svelte
@@ -2,6 +2,9 @@
   import { isUrlMethodPair, resolveUrlMethodPairComponent } from '@inertiajs/core'
   import type { LinkComponentBaseProps } from '@inertiajs/core'
   import { inertia } from '../index'
+  import { layerId } from '../page.svelte'
+
+  const currentLayerId = layerId()
 
   interface Props {
     href?: LinkComponentBaseProps['href']
@@ -95,6 +98,7 @@
 <svelte:element
   this={asProp}
   use:inertia={{
+    layerId: currentLayerId,
     ...(asProp !== 'a' ? { href: _href } : {}),
     data,
     method: _method,
diff --git a/packages/svelte/src/components/WhenVisible.svelte b/packages/svelte/src/components/WhenVisible.svelte
index 0fafa5d84..d8a03f88e 100644
--- a/packages/svelte/src/components/WhenVisible.svelte
+++ b/packages/svelte/src/components/WhenVisible.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import { router, type ReloadOptions } from '@inertiajs/core'
   import { get } from 'es-toolkit/compat'
-  import { usePage } from '../page.svelte'
+  import { layerId, usePage } from '../page.svelte'
+
+  const currentLayerId = layerId()
 
   interface Props {
     data?: string | string[]
@@ -42,6 +44,7 @@
         const reloadParams = getReloadParams()
 
         router.reload({
+          layerId: currentLayerId,
           ...reloadParams,
           onStart: (event) => {
             fetching = true
diff --git a/packages/svelte/src/createInertiaApp.ts b/packages/svelte/src/createInertiaApp.ts
index dc1069720..e27eeaf9f 100644
--- a/packages/svelte/src/createInertiaApp.ts
+++ b/packages/svelte/src/createInertiaApp.ts
@@ -4,12 +4,15 @@ import {
   exposeInterceptors,
   getInitialPageFromDOM,
   http as httpModule,
+  normalizeLoading,
+  resolveInitialPage,
   resolveServerHead,
   router,
   setupProgress,
   type CreateInertiaAppOptions,
   type CreateInertiaAppOptionsForCSR,
   type InertiaAppSSRResponse,
+  type LoadingOption,
   type Page,
   type PageProps,
   type SharedPageProps,
@@ -17,7 +20,7 @@ import {
 import { hydrate, mount } from 'svelte'
 import App, { type InertiaAppProps } from './components/App.svelte'
 import { config } from './index'
-import type { ComponentResolver, ResolvedComponent, SvelteInertiaAppConfig } from './types'
+import type { ComponentResolver, LayerComponent, ResolvedComponent, SvelteInertiaAppConfig } from './types'
 
 type SvelteRenderResult = { body: string; head: string }
 
@@ -39,6 +42,8 @@ type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOp
   SvelteRenderResult | void,
   SvelteInertiaAppConfig
 > & {
+  layer?: LayerComponent
+  loading?: LoadingOption<ResolvedComponent['default'] | ResolvedComponent>
   withApp?: never
 }
 
@@ -52,6 +57,8 @@ type InertiaAppOptionsAuto<SharedProps extends PageProps> = Omit<
   'setup'
 > & {
   page?: Page<SharedProps>
+  layer?: LayerComponent
+  loading?: LoadingOption<ResolvedComponent['default'] | ResolvedComponent>
 } & (
     | { setup?: undefined; withApp?: SvelteWithApp<SharedProps> }
     | { setup: (options: SetupOptions<SharedProps>) => SvelteRenderResult | void; withApp?: never }
@@ -84,6 +91,8 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
     nonce,
     http,
     layout,
+    layer,
+    loading,
     serverHead,
     withApp,
     dev = !!import.meta.env?.DEV,
@@ -109,17 +118,30 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
 
   const resolveComponent = (name: string, page?: Page) => Promise.resolve(resolve!(name, page))
 
+  // The renderer reads `component.default`, so a bare component is wrapped the way a module arrives.
+  const resolveLoading = normalizeLoading<ResolvedComponent>(loading, {
+    normalize: (value) =>
+      (value && typeof value === 'object' && 'default' in value ? value : { default: value }) as ResolvedComponent,
+  })
+
   // SSR render function factory - when on server without page, return a render function
   // This is used by the Vite plugin's SSR transform
   if (isServer && !page) {
     return async (page: Page<SharedProps>, render: SvelteServerRender) => {
-      const initialComponent = (await resolveComponent(page.component, page)) as ResolvedComponent
+      const {
+        page: initialPage,
+        component: initialComponent,
+        layers: initialLayers,
+      } = await resolveInitialPage(page, resolveComponent, resolveLoading)
 
       const props: InertiaAppProps<SharedProps> = {
-        initialPage: page,
+        initialPage,
         initialComponent,
+        initialLayers,
         resolveComponent,
+        resolveLoading,
         defaultLayout: layout,
+        layer,
       }
 
       let svelteApp: SvelteRenderResult
@@ -144,12 +166,18 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
 
       return {
         body,
-        head: [...resolveServerHead(page, serverHead), svelteApp.head],
+        head: [...resolveServerHead(initialPage, serverHead), svelteApp.head],
       }
     }
   }
 
-  const initialPage = page || getInitialPageFromDOM<Page<SharedProps>>(id)!
+  const initialResponse = page || getInitialPageFromDOM<Page<SharedProps>>(id)!
+
+  const [{ page: initialPage, component: initialComponent, layers: initialLayers }] = await Promise.all([
+    resolveInitialPage(initialResponse, resolveComponent, resolveLoading),
+    router.decryptHistory().catch(() => {}),
+  ])
+
   const serverHeadManager =
     !isServer && serverHead
       ? createHeadManager(
@@ -160,12 +188,15 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
         )
       : null
 
-  const [initialComponent] = await Promise.all([
-    resolveComponent(initialPage.component, initialPage) as Promise<ResolvedComponent>,
-    router.decryptHistory().catch(() => {}),
-  ])
-
-  const props: InertiaAppProps<SharedProps> = { initialPage, initialComponent, resolveComponent, defaultLayout: layout }
+  const props: InertiaAppProps<SharedProps> = {
+    initialPage,
+    initialComponent,
+    initialLayers,
+    resolveComponent,
+    resolveLoading,
+    defaultLayout: layout,
+    layer,
+  }
 
   // SSR with page provided (legacy pattern used by ssr.ts)
   if (isServer) {
@@ -176,7 +207,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
     const svelteApp = await setup({ el: null, App, props })
 
     if (svelteApp) {
-      const body = buildSSRBody(id, initialPage, svelteApp.body)
+      const body = buildSSRBody(id, initialResponse, svelteApp.body)
 
       return {
         body,
diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts
index d8007cfe7..fe1a60aff 100644
--- a/packages/svelte/src/index.ts
+++ b/packages/svelte/src/index.ts
@@ -8,13 +8,14 @@ export { default as Deferred } from './components/Deferred.svelte'
 export { default as Form } from './components/Form.svelte'
 export { useFormContext } from './components/formContext'
 export { default as InfiniteScroll } from './components/InfiniteScroll.svelte'
+export { default as Layer } from './components/Layer.svelte'
 export { default as Link } from './components/Link.svelte'
 export { default as WhenVisible } from './components/WhenVisible.svelte'
 export { default as createInertiaApp } from './createInertiaApp'
 export { resetLayoutProps, setLayoutProps } from './layoutProps.svelte'
 export { default as inertia } from './link'
 export { default as page, usePage } from './page.svelte'
-export { type LayoutCallback, type ResolvedComponent, type SvelteInertiaAppConfig } from './types'
+export { type LayerComponent, type LayoutCallback, type ResolvedComponent, type SvelteInertiaAppConfig } from './types'
 export {
   default as useForm,
   type InertiaForm,
@@ -22,6 +23,7 @@ export {
   type InertiaPrecognitiveForm,
 } from './useForm.svelte'
 export { default as useHttp } from './useHttp.svelte'
+export { useLayer } from './page.svelte'
 export { default as usePoll } from './usePoll.svelte'
 export { default as usePrefetch } from './usePrefetch.svelte'
 export { default as useRemember } from './useRemember.svelte'
diff --git a/packages/svelte/src/layoutProps.svelte.ts b/packages/svelte/src/layoutProps.svelte.ts
index 72bccdadf..e86fd03e4 100644
--- a/packages/svelte/src/layoutProps.svelte.ts
+++ b/packages/svelte/src/layoutProps.svelte.ts
@@ -1,4 +1,4 @@
-import { createLayoutPropsStore, type LayoutProps, type NamedLayoutProps } from '@inertiajs/core'
+import { createLayoutPropsStore, type LayoutSlot } from '@inertiajs/core'
 
 const store = createLayoutPropsStore()
 
@@ -7,23 +7,25 @@ export const storeState = $state({
   named: {} as Record<string, Record<string, unknown>>,
 })
 
+export const layerState = $state<Record<string, LayoutSlot>>({})
+
 store.subscribe(() => {
   const snapshot = store.get()
   storeState.shared = snapshot.shared
   storeState.named = snapshot.named
-})
 
-export function setLayoutProps(props: Partial<LayoutProps>): void
-export function setLayoutProps<K extends keyof NamedLayoutProps>(name: K, props: Partial<NamedLayoutProps[K]>): void
-export function setLayoutProps<T = never>(props: Partial<NoInfer<T>>): void
-export function setLayoutProps<T = never>(name: string, props: Partial<NoInfer<T>>): void
-export function setLayoutProps(nameOrProps: string | Record<string, unknown>, props?: Record<string, unknown>): void {
-  if (typeof nameOrProps === 'string') {
-    store.setFor(nameOrProps, props!)
-  } else {
-    store.set(nameOrProps)
+  const known = new Set(store.layerIds())
+  for (const id of known) {
+    layerState[id] = store.getForLayer(id)
   }
-}
+  for (const id of Object.keys(layerState)) {
+    if (!known.has(id)) {
+      delete layerState[id]
+    }
+  }
+})
+
+export const setLayoutProps = store.set
 
 export function resetLayoutProps(): void {
   store.reset()
@@ -31,3 +33,7 @@ export function resetLayoutProps(): void {
   storeState.shared = snapshot.shared
   storeState.named = snapshot.named
 }
+
+export function retainLayerLayoutProps(ids: string[]): void {
+  store.retainLayers(ids)
+}
diff --git a/packages/svelte/src/link.ts b/packages/svelte/src/link.ts
index b84fcce42..fc9f0d674 100644
--- a/packages/svelte/src/link.ts
+++ b/packages/svelte/src/link.ts
@@ -171,6 +171,7 @@ function link(
     }
 
     baseParams = {
+      layerId: params.layerId,
       data,
       method,
       replace: params.replace || false,
diff --git a/packages/svelte/src/page.svelte.ts b/packages/svelte/src/page.svelte.ts
index abd06c3dd..bfe87c22b 100644
--- a/packages/svelte/src/page.svelte.ts
+++ b/packages/svelte/src/page.svelte.ts
@@ -1,4 +1,5 @@
-import { type Page, type PageProps, type SharedPageProps } from '@inertiajs/core'
+import { createLayerApi, type LayerApi, type Page, type PageProps, type SharedPageProps } from '@inertiajs/core'
+import { getContext } from 'svelte'
 
 type SveltePage<TPageProps extends PageProps = PageProps> = Omit<Page<TPageProps & SharedPageProps>, 'props'> & {
   props: Page<TPageProps & SharedPageProps>['props'] & {
@@ -13,11 +14,40 @@ const page = $state<SveltePage>({
   version: null,
 } as SveltePage)
 
+export const layerPageKey = Symbol('inertiaLayerPage')
+export const layerIdKey = Symbol('inertiaLayerId')
+
+export function layerId(): string | undefined {
+  try {
+    return getContext<string>(layerIdKey)
+  } catch {
+    return undefined
+  }
+}
+
+export function useLayer(): LayerApi {
+  return createLayerApi(layerId())
+}
+
 export function setPage(newPage: SveltePage) {
+  for (const key of Object.keys(page)) {
+    if (!(key in newPage)) {
+      delete (page as Record<string, unknown>)[key]
+    }
+  }
+
   Object.assign(page, newPage)
 }
 
 export function usePage<TPageProps extends PageProps = PageProps>(): SveltePage<TPageProps> {
+  try {
+    const layerPage = getContext<Page>(layerPageKey)
+
+    if (layerPage) {
+      return layerPage as SveltePage<TPageProps>
+    }
+  } catch {}
+
   return page as SveltePage<TPageProps>
 }
 
diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts
index c8563b55a..f3aa29dfe 100644
--- a/packages/svelte/src/types.ts
+++ b/packages/svelte/src/types.ts
@@ -1,5 +1,5 @@
-import { type LayoutCallbackReturn, type Page, type SharedPageProps } from '@inertiajs/core'
-import type { Component } from 'svelte'
+import { type LayerShellProps, type LayoutCallbackReturn, type Page, type SharedPageProps } from '@inertiajs/core'
+import type { Component, Snippet } from 'svelte'
 import type { RenderFunction, RenderProps } from './components/Render.svelte'
 
 export type ComponentResolver = (
@@ -7,6 +7,8 @@ export type ComponentResolver = (
   page?: Page<SharedPageProps>,
 ) => ResolvedComponent | Promise<ResolvedComponent>
 
+export type LayerComponent = Component<LayerShellProps & { children: Snippet }>
+
 export type LayoutResolver = (h: RenderFunction, page: RenderProps) => RenderProps
 
 export type LayoutCallback = (props: SharedPageProps) => LayoutCallbackReturn<Component>
diff --git a/packages/svelte/src/useForm.svelte.ts b/packages/svelte/src/useForm.svelte.ts
index 655d79e22..355e0fc83 100644
--- a/packages/svelte/src/useForm.svelte.ts
+++ b/packages/svelte/src/useForm.svelte.ts
@@ -162,6 +162,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
     setRememberExcludeKeys,
     resetBeforeSubmit,
     finishProcessing,
+    layerId,
   } = useFormState<TForm>({
     data,
     rememberKey,
@@ -179,6 +180,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
     const transformedData = getTransform()(form.data()) as RequestPayload
 
     const _options: Omit<VisitOptions, 'method'> = {
+      layerId,
       ...options,
       onCancelToken: (token: CancelToken) => {
         cancelToken = token
diff --git a/packages/svelte/src/useFormState.svelte.ts b/packages/svelte/src/useFormState.svelte.ts
index 200e8edf7..6e362b9dc 100644
--- a/packages/svelte/src/useFormState.svelte.ts
+++ b/packages/svelte/src/useFormState.svelte.ts
@@ -15,6 +15,7 @@ import { get, has, set } from 'es-toolkit/compat'
 import type { NamedInputEvent, ValidationConfig, Validator } from 'laravel-precognition'
 import { createValidator, resolveName, toSimpleValidationErrors } from 'laravel-precognition'
 import { config } from '.'
+import { layerId as currentLayerId } from './page.svelte'
 
 type TransformCallback<TForm> = (data: TForm) => object
 
@@ -99,18 +100,20 @@ export interface UseFormStateReturn<TForm extends object> {
   resetBeforeSubmit: () => void
   finishProcessing: () => void
   withAllErrors: { enabled: () => boolean; enable: () => void }
+  layerId: string | undefined
 }
 
 export default function useFormState<TForm extends object>(
   options: UseFormStateOptions<TForm>,
 ): UseFormStateReturn<TForm> {
   const { data: dataOption, rememberKey, precognitionEndpoint: initialPrecognitionEndpoint } = options
+  const layerId = currentLayerId()
 
   const isDataFunction = typeof dataOption === 'function'
   const resolveData = () => (isDataFunction ? (dataOption as () => TForm)() : dataOption)
 
   const restored = rememberKey
-    ? (router.restore(rememberKey) as { data: TForm; errors: Record<FormDataKeys<TForm>, ErrorValue> } | null)
+    ? (router.restore(rememberKey, layerId) as { data: TForm; errors: Record<FormDataKeys<TForm>, ErrorValue> } | null)
     : null
 
   const initialData = restored?.data ?? cloneDeep(resolveData())
@@ -390,11 +393,11 @@ export default function useFormState<TForm extends object>(
       return
     }
 
-    const storedData = router.restore(rememberKey)
+    const storedData = router.restore(rememberKey, layerId)
     const newData = (form as unknown as InternalRememberState<TForm>).__remember()
 
     if (!isEqual(storedData, newData)) {
-      router.remember(newData, rememberKey)
+      router.remember(newData, rememberKey, layerId)
     }
   })
 
@@ -404,6 +407,7 @@ export default function useFormState<TForm extends object>(
 
   return {
     form: form as FormState<TForm> & InternalRememberState<TForm>,
+    layerId,
     setDefaults: (newDefaults: TForm) => {
       defaults = newDefaults
     },
diff --git a/packages/svelte/src/usePoll.svelte.ts b/packages/svelte/src/usePoll.svelte.ts
index a836920c2..d94c37e12 100644
--- a/packages/svelte/src/usePoll.svelte.ts
+++ b/packages/svelte/src/usePoll.svelte.ts
@@ -1,5 +1,6 @@
-import { router, type PollOptions, type ReloadOptions } from '@inertiajs/core'
+import { type PollOptions, type ReloadOptions } from '@inertiajs/core'
 import { onDestroy, onMount } from 'svelte'
+import { useLayer } from './page.svelte'
 
 export default function usePoll(
   interval: number,
@@ -11,7 +12,7 @@ export default function usePoll(
 ) {
   const autoStart = options.autoStart ?? true
 
-  const { stop, start, destroy } = router.poll(interval, requestOptions, {
+  const { stop, start, destroy } = useLayer().poll(interval, requestOptions, {
     ...options,
     autoStart: false,
   })
diff --git a/packages/svelte/src/useRemember.svelte.ts b/packages/svelte/src/useRemember.svelte.ts
index 705c57945..cd7b42003 100644
--- a/packages/svelte/src/useRemember.svelte.ts
+++ b/packages/svelte/src/useRemember.svelte.ts
@@ -1,12 +1,14 @@
 import { router } from '@inertiajs/core'
 import { cloneDeep } from 'es-toolkit'
+import { layerId as currentLayerId } from './page.svelte'
 
 export default function useRemember<State extends object>(initialState: State, key?: string): State {
-  const restored = router.restore(key) as State | undefined
+  const layerId = currentLayerId()
+  const restored = router.restore(key, layerId) as State | undefined
   const state = $state(restored !== undefined ? cloneDeep(restored) : initialState)
 
   $effect(() => {
-    router.remember(cloneDeep($state.snapshot(state)), key)
+    router.remember(cloneDeep($state.snapshot(state)), key, layerId)
   })
 
   return state
diff --git a/packages/svelte/test-app/Layouts/AdminLayout.svelte b/packages/svelte/test-app/Layouts/AdminLayout.svelte
new file mode 100644
index 000000000..72708a0f0
--- /dev/null
+++ b/packages/svelte/test-app/Layouts/AdminLayout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet
+  }
+
+  let { children }: Props = $props()
+</script>
+
+<div id="admin-layout">
+  <span>Admin Layout</span>
+  {@render children?.()}
+</div>
diff --git a/packages/svelte/test-app/Layouts/DefaultLayout.svelte b/packages/svelte/test-app/Layouts/DefaultLayout.svelte
index d7031e9ac..92922a0d5 100644
--- a/packages/svelte/test-app/Layouts/DefaultLayout.svelte
+++ b/packages/svelte/test-app/Layouts/DefaultLayout.svelte
@@ -1,12 +1,18 @@
 <script lang="ts">
   interface Props {
     children?: import('svelte').Snippet
+    baseChrome?: string
+    layerChrome?: string
+    name?: string
   }
 
-  let { children }: Props = $props()
+  let { children, baseChrome, layerChrome, name }: Props = $props()
 </script>
 
 <div id="default-layout">
   <span>Default Layout</span>
+  <div id="base-chrome">{baseChrome ?? ''}</div>
+  <div id="layer-chrome">{layerChrome ?? ''}</div>
+  <div id="layout-name">{name ?? ''}</div>
   {@render children?.()}
 </div>
diff --git a/packages/svelte/test-app/Layouts/Layer.svelte b/packages/svelte/test-app/Layouts/Layer.svelte
new file mode 100644
index 000000000..e63a77956
--- /dev/null
+++ b/packages/svelte/test-app/Layouts/Layer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Layer, useLayer, usePage } from '@inertiajs/svelte'
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    open: boolean
+    index: number
+    isTop: boolean
+    type: 'routed' | 'local'
+    close: () => void
+    done: () => void
+    children: Snippet
+  }
+
+  let { open, index, isTop, type, close, done, children }: Props = $props()
+
+  const page = usePage()
+  const layer = useLayer()
+</script>
+
+<Layer {open} {index} {isTop} {type} {close} {done} label={layer.id ? page.component : 'unresolved'}>
+  {@render children()}
+</Layer>
diff --git a/packages/svelte/test-app/Pages/History/NonSerializable.svelte b/packages/svelte/test-app/Pages/History/NonSerializable.svelte
new file mode 100644
index 000000000..c58a9493a
--- /dev/null
+++ b/packages/svelte/test-app/Pages/History/NonSerializable.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { router } from '@inertiajs/svelte'
+
+  const pushFunctionProp = () => {
+    router.push({
+      url: '/history/non-serializable/target',
+      component: 'History/NonSerializableTarget',
+      props: { message: 'Target page', onAction: () => 'action from the function prop' },
+    })
+  }
+</script>
+
+<button onclick={pushFunctionProp}>Push a function prop</button>
diff --git a/packages/svelte/test-app/Pages/History/NonSerializableTarget.svelte b/packages/svelte/test-app/Pages/History/NonSerializableTarget.svelte
new file mode 100644
index 000000000..a5fda2d4e
--- /dev/null
+++ b/packages/svelte/test-app/Pages/History/NonSerializableTarget.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { router } from '@inertiajs/svelte'
+
+  interface Props {
+    message: string
+    onAction?: () => string
+  }
+
+  let { message }: Props = $props()
+
+  const clientVisit = () => {
+    router.push({
+      url: '/history/non-serializable/landed',
+      component: 'History/NonSerializableTarget',
+      props: { message: 'Client visit landed' },
+    })
+  }
+</script>
+
+<button onclick={clientVisit}>Client visit</button>
+
+<div>{message}</div>
diff --git a/packages/svelte/test-app/Pages/Layers/Base.svelte b/packages/svelte/test-app/Pages/Layers/Base.svelte
new file mode 100644
index 000000000..da36017e9
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Base.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { inertia, router, setLayoutProps, usePage, useRemember } from '@inertiajs/svelte'
+
+  const { likes }: { likes: number } = $props()
+
+  const page = usePage()
+
+  let visitEvents = $state<string[]>([])
+  let childEvents = $state('')
+  let cancelledEvent = $state('')
+
+  const remembered = useRemember({ note: '' })
+
+  const pushPanel = () => {
+    router.push({
+      url: '/layers/panel/client',
+      component: 'Layers/Panel',
+      props: { name: 'from a client visit' },
+    })
+  }
+
+  const openPanelWithCallbacks = () => {
+    router.visit('/layers/panel/first', {
+      onFlash: () => (visitEvents = [...visitEvents, 'flash']),
+      onError: () => (visitEvents = [...visitEvents, 'error']),
+      onSuccess: () => (visitEvents = [...visitEvents, 'success']),
+    })
+  }
+
+  const openPanelWithViewTransition = () => {
+    router.visit('/layers/panel/first', { viewTransition: true })
+  }
+
+  const like = () => {
+    router.optimistic<{ likes: number }>((props) => ({ likes: props.likes + 1 })).post('/layers/like')
+  }
+
+  const refresh = () => {
+    router.reload()
+  }
+
+  const openPanelWithoutMovingTheAddress = () => {
+    router.visit('/layers/counted/panel', { preserveUrl: true })
+  }
+
+  const partialReload = () => {
+    router.reload({ only: ['likes'] })
+  }
+
+  const openHandledPanel = () => {
+    const handle = router.layer('/layers/panel/first')
+    handle.on('saved', (user) => (childEvents = `saved ${(user as { id?: number })?.id}`))
+  }
+
+  const openCancelledPanel = () => {
+    const handle = router.layer('/layers/panel/delayed?delay=600')
+    handle.onClose(() => (cancelledEvent = 'closed'))
+  }
+
+  const openLocalLayer = () => {
+    router.layer({ component: 'Layers/Local', props: { note: 'local' } })
+  }
+
+  const setBaseChrome = () => {
+    setLayoutProps({ baseChrome: 'base' })
+  }
+</script>
+
+<div>Base page</div>
+
+<div id="spacer" style="height: 1000px"></div>
+
+{#if page.props.errors?.name}
+  <p id="page-error">{page.props.errors.name}</p>
+{/if}
+
+<div id="layer-count">{page.layers?.length ?? 0}</div>
+<div id="visit-events">{visitEvents.join(',')}</div>
+<div id="page-flash">{(page.flash as { message?: string })?.message ?? ''}</div>
+<div id="likes">{likes}</div>
+<div id="child-events">{childEvents}</div>
+<div id="cancelled-event">{cancelledEvent}</div>
+
+<input id="note" />
+<input id="remembered-note" bind:value={remembered.note} />
+
+<a href="/layers/panel/first" use:inertia>Open panel</a>
+<a href="/layers/guarded" use:inertia>Open guarded panel</a>
+<a href="/layers/panel/second" use:inertia>Open second panel</a>
+<a href="/layers/panel/third" use:inertia>Open third panel</a>
+<a href="/layers/slow" use:inertia>Open slow panel</a>
+<a href="/layers/panel/delayed?delay=600" use:inertia>Open delayed panel</a>
+<a href="/layers/settings" use:inertia>Open settings</a>
+<a href="/layers/step/one" use:inertia>Open step one</a>
+<a href="/layers/step/two" use:inertia>Open step two</a>
+<a href="/layers/counted/panel" use:inertia>Open counted panel</a>
+<a href="/layers/deferred" use:inertia>Open deferred layer</a>
+
+<button onclick={pushPanel}>Push panel as a page</button>
+<button onclick={openPanelWithCallbacks}>Open panel with callbacks</button>
+<button onclick={openPanelWithViewTransition}>Open panel with view transition</button>
+<button onclick={like}>Like</button>
+<button onclick={refresh}>Refresh in the background</button>
+<button onclick={openPanelWithoutMovingTheAddress}>Open panel without moving the address</button>
+<button onclick={partialReload}>Partial reload</button>
+<button onclick={openHandledPanel}>Open handled panel</button>
+<button onclick={openCancelledPanel}>Open cancelled panel</button>
+<button onclick={openLocalLayer}>Open local layer</button>
+<button onclick={setBaseChrome}>Set base chrome</button>
diff --git a/packages/svelte/test-app/Pages/Layers/ChainInner.svelte b/packages/svelte/test-app/Pages/Layers/ChainInner.svelte
new file mode 100644
index 000000000..a1b7989e5
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/ChainInner.svelte
@@ -0,0 +1 @@
+<div>Chain inner</div>
diff --git a/packages/svelte/test-app/Pages/Layers/ChainOuter.svelte b/packages/svelte/test-app/Pages/Layers/ChainOuter.svelte
new file mode 100644
index 000000000..669780f5c
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/ChainOuter.svelte
@@ -0,0 +1 @@
+<div>Chain outer</div>
diff --git a/packages/svelte/test-app/Pages/Layers/Child.svelte b/packages/svelte/test-app/Pages/Layers/Child.svelte
new file mode 100644
index 000000000..db842e111
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Child.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { useLayer } from '@inertiajs/svelte'
+
+  const layer = useLayer()
+</script>
+
+<div>Child layer</div>
+<button onclick={() => layer.emit('saved', { id: 5 })}>Emit saved</button>
+<button onclick={() => layer.close()}>Close myself</button>
diff --git a/packages/svelte/test-app/Pages/Layers/Deferred.svelte b/packages/svelte/test-app/Pages/Layers/Deferred.svelte
new file mode 100644
index 000000000..aa55357cd
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Deferred.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Deferred } from '@inertiajs/svelte'
+
+  let { name, stats }: { name: string; stats?: number[] } = $props()
+</script>
+
+<div>Deferred layer: {name}</div>
+
+<Deferred data="stats">
+  {#snippet fallback()}
+    <div data-testid="deferred-fallback">Loading stats...</div>
+  {/snippet}
+  <div data-testid="deferred-stats">{stats?.join(',')}</div>
+</Deferred>
diff --git a/packages/svelte/test-app/Pages/Layers/Guarded.svelte b/packages/svelte/test-app/Pages/Layers/Guarded.svelte
new file mode 100644
index 000000000..53b8aab2e
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Guarded.svelte
@@ -0,0 +1 @@
+<div id="guarded-layer">Guarded layer</div>
diff --git a/packages/svelte/test-app/Pages/Layers/Infinite.svelte b/packages/svelte/test-app/Pages/Layers/Infinite.svelte
new file mode 100644
index 000000000..07bacb393
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Infinite.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { InfiniteScroll } from '@inertiajs/svelte'
+  import UserCard, { type User } from '../InfiniteScroll/UserCard.svelte'
+
+  interface Props {
+    users: { data: User[] }
+  }
+
+  let { users }: Props = $props()
+</script>
+
+<div>Infinite layer</div>
+
+<InfiniteScroll data="users" style="display: grid; gap: 20px" manual>
+  {#snippet previous({ hasMore, loading, fetch })}
+    <button onclick={fetch}>{loading ? 'Loading previous items...' : 'Load previous items'}</button>
+    <span>Has more previous: {hasMore}</span>
+  {/snippet}
+
+  {#each users.data as user (user.id)}
+    <UserCard {user} />
+  {/each}
+
+  {#snippet next({ hasMore, loading, fetch })}
+    <button onclick={fetch}>{loading ? 'Loading next items...' : 'Load next items'}</button>
+    <span>Has more next: {hasMore}</span>
+  {/snippet}
+</InfiniteScroll>
diff --git a/packages/svelte/test-app/Pages/Layers/LoadingBase.svelte b/packages/svelte/test-app/Pages/Layers/LoadingBase.svelte
new file mode 100644
index 000000000..2ccb99d0c
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/LoadingBase.svelte
@@ -0,0 +1 @@
+<div id="loading-base">Loading the page beneath</div>
diff --git a/packages/svelte/test-app/Pages/Layers/Local.svelte b/packages/svelte/test-app/Pages/Layers/Local.svelte
new file mode 100644
index 000000000..cf7400e3a
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Local.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { note, errors }: { note: string; errors: Record<string, string> } = $props()
+</script>
+
+<div>Local layer</div>
+<div id="local-note">{note}</div>
+<div id="local-errors">{typeof errors}</div>
diff --git a/packages/svelte/test-app/Pages/Layers/Login.svelte b/packages/svelte/test-app/Pages/Layers/Login.svelte
new file mode 100644
index 000000000..04ed8a8e3
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Login.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { router } from '@inertiajs/svelte'
+
+  const signIn = () => {
+    router.post('/layers/login')
+  }
+</script>
+
+<div id="login-page">Sign in to continue</div>
+
+<button onclick={signIn}>Sign in</button>
diff --git a/packages/svelte/test-app/Pages/Layers/ModuleScope.svelte b/packages/svelte/test-app/Pages/Layers/ModuleScope.svelte
new file mode 100644
index 000000000..b8ac496b4
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/ModuleScope.svelte
@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import { usePage as moduleScopeUsePage } from '@inertiajs/svelte'
+
+  const moduleScopePage = moduleScopeUsePage()
+
+  declare global {
+    interface Window {
+      moduleScopePageComponent: string
+      moduleScopePageUrl: string
+    }
+  }
+
+  window.moduleScopePageComponent = moduleScopePage.component
+  window.moduleScopePageUrl = moduleScopePage.url
+</script>
+
+<script lang="ts">
+  import { usePage } from '@inertiajs/svelte'
+
+  const page = usePage()
+</script>
+
+<div>Module scope page</div>
+<div data-testid="module-scope-page">{page.component}|{page.url}</div>
diff --git a/packages/svelte/test-app/Pages/Layers/Panel.svelte b/packages/svelte/test-app/Pages/Layers/Panel.svelte
new file mode 100644
index 000000000..6aae9270c
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Panel.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { router, useForm, useLayer, usePage } from '@inertiajs/svelte'
+  import { onDestroy } from 'svelte'
+
+  let { name, count, errors }: { name: string; count?: number; errors?: { note?: string } } = $props()
+
+  const page = usePage()
+  const layer = useLayer()
+  const form = useForm('note', { note: '' })
+
+  let childEvents = $state('')
+
+  onDestroy(layer.on('saved', (payload) => (childEvents = `saved ${(payload as { id: number }).id}`)))
+
+  const save = () => {
+    router.post(`/layers/panel/${name}/save`)
+  }
+
+  const submitForm = () => {
+    form.post(`/layers/panel/${name}/save`)
+  }
+
+  const submitFormOptimistically = () => {
+    form.optimistic<{ count: number }>((current) => ({ ...current, count: 99 })).post(`/layers/panel/${name}/save-slow`)
+  }
+
+  const saveAndClose = () => {
+    router.post('/layers/close')
+  }
+
+  const openNext = () => {
+    router.post(`/layers/panel/${name}/next`)
+  }
+
+  const openNextInstantly = () => {
+    layer.visit('/layers/panel/second?delay=500', { component: 'Layers/Panel' })
+  }
+
+  const openNextWithoutMovingTheAddress = () => {
+    router.visit('/layers/panel/second', { preserveUrl: true })
+  }
+
+  const partialReload = () => {
+    layer.reload({ only: ['count'] })
+  }
+
+  const partialThroughTheLayerRouter = () => {
+    layer.get(`/layers/panel/${name}`, {}, { only: ['count'] })
+  }
+
+  const reloadBase = () => {
+    router.reload()
+  }
+
+  const bumpCount = () => {
+    layer.replaceProp('count', (old: unknown) => Number(old ?? 0) + 1)
+  }
+
+  const openChild = () => {
+    const handle = router.layer('/layers/child')
+    window.testing.childHandle = handle
+  }
+
+  const likeAndClose = () => {
+    router.post('/layers/like')
+    layer.close()
+  }
+
+  const likeInBackgroundAndClose = () => {
+    router.post('/layers/like', {}, { async: true })
+    layer.close()
+  }
+
+  const openChildThroughTheLayer = () => {
+    const handle = layer.layer('/layers/child')
+    window.testing.layerChildHandle = handle
+  }
+</script>
+
+<div>Panel layer: {name}</div>
+
+<div data-testid="layer-use-page">
+  {(page.props as { name?: string }).name}|{page.url}|{page.component}
+</div>
+
+<div data-testid="panel-count">{count}</div>
+
+<div id="panel-child-events">{childEvents}</div>
+
+{#if errors?.note}
+  <p class="panel-error">{errors.note}</p>
+{/if}
+
+<input class="panel-note" />
+<input class="layer-remembered" bind:value={form.note} />
+
+{#if form.errors.note}
+  <p class="panel-form-error">{form.errors.note}</p>
+{/if}
+
+<button onclick={save}>Save panel</button>
+<button onclick={submitForm}>Submit panel form</button>
+<button onclick={submitFormOptimistically}>Submit panel form optimistically</button>
+<button onclick={saveAndClose}>Save and close</button>
+<button onclick={openNext}>Open next panel</button>
+<button onclick={openNextInstantly}>Instantly open the next panel</button>
+<button onclick={openNextWithoutMovingTheAddress}>Open a second panel without moving the address</button>
+<button onclick={partialReload}>Partial reload panel</button>
+<button onclick={partialThroughTheLayerRouter}>Partial through the layer router</button>
+<button onclick={reloadBase}>Reload base beneath</button>
+<button onclick={bumpCount}>Layer replaceProp</button>
+<button onclick={likeAndClose}>Like and close</button>
+<button onclick={likeInBackgroundAndClose}>Like in the background and close</button>
+<button onclick={openChild}>Open child layer</button>
+<button onclick={openChildThroughTheLayer}>Open child through the layer</button>
diff --git a/packages/svelte/test-app/Pages/Layers/Prompt.svelte b/packages/svelte/test-app/Pages/Layers/Prompt.svelte
new file mode 100644
index 000000000..335fec0e3
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Prompt.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { router } from '@inertiajs/svelte'
+
+  const complete = () => {
+    router.post('/layers/prompt/complete')
+  }
+</script>
+
+<div id="prompt-page">Sudo prompt</div>
+
+<button onclick={complete}>Complete the prompt</button>
diff --git a/packages/svelte/test-app/Pages/Layers/ScrollBase.svelte b/packages/svelte/test-app/Pages/Layers/ScrollBase.svelte
new file mode 100644
index 000000000..1790d25b6
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/ScrollBase.svelte
@@ -0,0 +1,4 @@
+<div>Scroll base page</div>
+<div scroll-region id="base-region" style="height: 200px; overflow-y: auto; border: 1px solid #ccc">
+  <div style="height: 800px">Base scrollable content</div>
+</div>
diff --git a/packages/svelte/test-app/Pages/Layers/ScrollLayer.svelte b/packages/svelte/test-app/Pages/Layers/ScrollLayer.svelte
new file mode 100644
index 000000000..202be5a0f
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/ScrollLayer.svelte
@@ -0,0 +1,4 @@
+<div>Scroll layer</div>
+<div scroll-region id="layer-region" style="height: 200px; overflow-y: auto; border: 1px solid #ccc">
+  <div style="height: 800px">Layer scrollable content</div>
+</div>
diff --git a/packages/svelte/test-app/Pages/Layers/Settings.svelte b/packages/svelte/test-app/Pages/Layers/Settings.svelte
new file mode 100644
index 000000000..f0cd51d83
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Settings.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { inertia, setLayoutProps, useLayer } from '@inertiajs/svelte'
+
+  const layer = useLayer()
+
+  setLayoutProps({ layerChrome: 'layer' }, layer.id)
+</script>
+
+<div>Account settings</div>
+<a href="/layers/settings" use:inertia>Open settings again</a>
diff --git a/packages/svelte/test-app/Pages/Layers/Slow.svelte b/packages/svelte/test-app/Pages/Layers/Slow.svelte
new file mode 100644
index 000000000..dbcdf1301
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Slow.svelte
@@ -0,0 +1 @@
+<div>Slow layer</div>
diff --git a/packages/svelte/test-app/Pages/Layers/SlowImport.svelte b/packages/svelte/test-app/Pages/Layers/SlowImport.svelte
new file mode 100644
index 000000000..6d8df2bfe
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/SlowImport.svelte
@@ -0,0 +1 @@
+<div>Slow import base</div>
diff --git a/packages/svelte/test-app/Pages/Layers/Waypoint.svelte b/packages/svelte/test-app/Pages/Layers/Waypoint.svelte
new file mode 100644
index 000000000..54b5bd82f
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Layers/Waypoint.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { inertia, router } from '@inertiajs/svelte'
+
+  let { name, next }: { name: string; next: string } = $props()
+
+  const prefetchPanel = () => {
+    router.prefetch('/layers/panel/first', {}, { cacheFor: '30s' })
+  }
+
+  const openPanelInstantly = () => {
+    router.visit('/layers/panel/first', { component: 'Layers/Panel' })
+  }
+</script>
+
+<div id="waypoint">Waypoint {name}</div>
+
+<a href="/layers/waypoint/{next}" use:inertia>Go to the next waypoint</a>
+
+<button onclick={prefetchPanel}>Prefetch the panel</button>
+<button onclick={openPanelInstantly}>Instantly open the panel</button>
diff --git a/packages/svelte/test-app/Pages/SSR/Layer.svelte b/packages/svelte/test-app/Pages/SSR/Layer.svelte
new file mode 100644
index 000000000..648fbe2a1
--- /dev/null
+++ b/packages/svelte/test-app/Pages/SSR/Layer.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { useRemember } from '@inertiajs/svelte'
+
+  const remembered = useRemember({ note: '' })
+</script>
+
+<div data-testid="ssr-layer">SSR layer</div>
+<input bind:value={remembered.note} data-testid="ssr-layer-note" />
diff --git a/packages/svelte/test-app/Pages/SSR/LayerBase.svelte b/packages/svelte/test-app/Pages/SSR/LayerBase.svelte
new file mode 100644
index 000000000..d137fd1eb
--- /dev/null
+++ b/packages/svelte/test-app/Pages/SSR/LayerBase.svelte
@@ -0,0 +1 @@
+<div data-testid="ssr-layer-base">SSR layer base</div>
diff --git a/packages/svelte/test-app/Pages/SSR/LayerLoading.svelte b/packages/svelte/test-app/Pages/SSR/LayerLoading.svelte
new file mode 100644
index 000000000..307a821a8
--- /dev/null
+++ b/packages/svelte/test-app/Pages/SSR/LayerLoading.svelte
@@ -0,0 +1 @@
+<div id="loading-base">SSR loading placeholder</div>
diff --git a/packages/svelte/test-app/Pages/TypeScriptLayoutProps.svelte b/packages/svelte/test-app/Pages/TypeScriptLayoutProps.svelte
index 4f22a00c9..16056cada 100644
--- a/packages/svelte/test-app/Pages/TypeScriptLayoutProps.svelte
+++ b/packages/svelte/test-app/Pages/TypeScriptLayoutProps.svelte
@@ -4,6 +4,8 @@
       layoutProps: {
         title: string
         showSidebar: boolean
+        baseChrome?: string
+        layerChrome?: string
       }
       namedLayoutProps: {
         app: { title: string; theme: 'light' | 'dark' }
diff --git a/packages/svelte/test-app/app.ts b/packages/svelte/test-app/app.ts
index ef5137f32..dad04444b 100644
--- a/packages/svelte/test-app/app.ts
+++ b/packages/svelte/test-app/app.ts
@@ -1,11 +1,15 @@
 import type { HttpClient, HttpClientOptions, Page } from '@inertiajs/core'
 import { axiosAdapter, type VisitOptions } from '@inertiajs/core'
-import { createInertiaApp, type ResolvedComponent, router } from '@inertiajs/svelte'
+import { createInertiaApp, type ResolvedComponent, router, setLayoutProps } from '@inertiajs/svelte'
 import { hydrate, mount } from 'svelte'
+import AdminLayout from './Layouts/AdminLayout.svelte'
 import AppLayout from './Layouts/AppLayout.svelte'
 import DefaultLayout from './Layouts/DefaultLayout.svelte'
+import Layer from './Layouts/Layer.svelte'
+import LoadingBase from './Pages/Layers/LoadingBase.svelte'
+import LayerLoading from './Pages/SSR/LayerLoading.svelte'
 
-window.testing = { Inertia: router }
+window.testing = { Inertia: router, setLayoutProps }
 window.resolverReceivedPage = null as Page | null
 
 const params = new URLSearchParams(window.location.search)
@@ -39,8 +43,28 @@ createInertiaApp({
       await new Promise((resolve) => setTimeout(resolve, 50))
     }
 
+    if (name === 'Layers/Slow') {
+      // Long enough for a test to supersede the layer visit while it is still resolving
+      await new Promise((resolve) => setTimeout(resolve, 500))
+    }
+
+    if (name === 'Layers/SlowImport') {
+      // Long enough for a dismissal to supersede a walk landing while its component resolves
+      await new Promise((resolve) => setTimeout(resolve, 700))
+    }
+
     return pages[`./Pages/${name}.svelte`] as ResolvedComponent
   },
+  layer: Layer,
+  loading: (url: string, page: Page) => {
+    window.loadingResolved = [url, ...(page.layers ?? []).map((layer) => layer.key)].join('|')
+
+    if (url.startsWith('/ssr/layer-loading-base')) {
+      return LayerLoading
+    }
+
+    return url.startsWith('/layers/loading') ? LoadingBase : undefined
+  },
   setup({ el, App, props }) {
     const isServerRendered = el?.hasAttribute('data-server-rendered')
 
@@ -61,6 +85,9 @@ createInertiaApp({
   ...(params.has('withDefaultLayout') && {
     layout: () => DefaultLayout,
   }),
+  ...(params.has('withUrlBasedLayout') && {
+    layout: (name: string, page) => (page.url?.startsWith('/layers/base') ? AdminLayout : DefaultLayout),
+  }),
   ...(params.has('withDefaultAppLayout') && {
     layout: () => AppLayout,
   }),
diff --git a/packages/svelte/test-app/ssr-auto.ts b/packages/svelte/test-app/ssr-auto.ts
index 120a12dde..ffc08efe0 100644
--- a/packages/svelte/test-app/ssr-auto.ts
+++ b/packages/svelte/test-app/ssr-auto.ts
@@ -1,4 +1,5 @@
 import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
+import Layer from './Layouts/Layer.svelte'
 
 // This file uses createInertiaApp as a standalone expression (not exported)
 // The Vite plugin SSR transform will automatically:
@@ -7,6 +8,7 @@ import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
 // 3. Export a default render function
 
 createInertiaApp<{ locale?: string }>({
+  layer: Layer,
   resolve: (name) => {
     const pages = import.meta.glob<ResolvedComponent>('./Pages/SSR/**/*.svelte', { eager: true })
     return pages[`./Pages/${name}.svelte`]
diff --git a/packages/svelte/test-app/ssr.ts b/packages/svelte/test-app/ssr.ts
index 9ba4960f7..38ad843a5 100644
--- a/packages/svelte/test-app/ssr.ts
+++ b/packages/svelte/test-app/ssr.ts
@@ -1,10 +1,20 @@
 import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
 import createServer from '@inertiajs/svelte/server'
 import { render } from 'svelte/server'
+import Layer from './Layouts/Layer.svelte'
 
 createServer((page) =>
   createInertiaApp({
     page,
+    layer: Layer,
+    loading: (url: string) => {
+      if (!url.startsWith('/ssr/layer-loading-base')) {
+        return undefined
+      }
+
+      const pages = import.meta.glob<ResolvedComponent>('./Pages/SSR/**/*.svelte', { eager: true })
+      return pages['./Pages/SSR/LayerLoading.svelte']
+    },
     serverHead: (page) => page.props.head as string[],
     resolve: (name) => {
       const pages = import.meta.glob<ResolvedComponent>('./Pages/SSR/**/*.svelte', { eager: true })
diff --git a/packages/svelte/test-app/types.d.ts b/packages/svelte/test-app/types.d.ts
index 0939eeb00..0083103cb 100644
--- a/packages/svelte/test-app/types.d.ts
+++ b/packages/svelte/test-app/types.d.ts
@@ -1,9 +1,13 @@
-import type { Method, Page, PageProps, Router } from '@inertiajs/core'
+import type { LayerHandle, Method, Page, PageProps, Router } from '@inertiajs/core'
+import { setLayoutProps as adapterSetLayoutProps } from '@inertiajs/svelte'
 
 declare global {
   interface Window {
     testing: {
       Inertia: Router
+      setLayoutProps?: typeof adapterSetLayoutProps
+      childHandle?: LayerHandle
+      layerChildHandle?: LayerHandle
     }
     initialPage: Page
     _inertia_request_dump: {
@@ -27,6 +31,7 @@ declare global {
     _inertia_content_layout_id: string | undefined
     _plugin_global_props: object
     resolverReceivedPage: Page | null
+    loadingResolved: string | undefined
   }
 
   interface ImportMeta {
diff --git a/packages/vue3/src/Layer.ts b/packages/vue3/src/Layer.ts
new file mode 100644
index 000000000..f5806ea49
--- /dev/null
+++ b/packages/vue3/src/Layer.ts
@@ -0,0 +1,50 @@
+import {
+  cancelLayer,
+  layerDialogAttributes,
+  lockScroll,
+  observeExit,
+  raiseLayer,
+  type LayerShellProps,
+} from '@inertiajs/core'
+import { defineComponent, h, onBeforeUnmount, onMounted, PropType, ref, watch } from 'vue'
+
+export default defineComponent({
+  name: 'Layer',
+  props: {
+    open: { type: Boolean, required: true },
+    index: { type: Number, required: true },
+    isTop: { type: Boolean, required: true },
+    type: { type: String as PropType<LayerShellProps['type']>, required: true },
+    close: { type: Function as PropType<() => void>, required: true },
+    done: { type: Function, required: true },
+    label: { type: String, required: false },
+  },
+  setup(props, { slots }) {
+    const dialog = ref<HTMLDialogElement | null>(null)
+    const exit = observeExit(
+      () => dialog.value,
+      () => props.done(),
+    )
+    let releaseScroll: (() => void) | null = null
+
+    onMounted(() => {
+      raiseLayer(dialog.value!, props.isTop)
+      releaseScroll = lockScroll()
+      exit.toggle(props.open)
+    })
+
+    onBeforeUnmount(() => {
+      exit.teardown()
+      releaseScroll?.()
+    })
+
+    watch(
+      () => props.open,
+      (open) => exit.toggle(open),
+    )
+
+    const onCancel = (event: Event) => cancelLayer(event, props)
+
+    return () => h('dialog', { ref: dialog, ...layerDialogAttributes(props), onCancel }, slots.default?.())
+  },
+})
diff --git a/packages/vue3/src/app.ts b/packages/vue3/src/app.ts
index a29f601fb..aadcf7a3b 100755
--- a/packages/vue3/src/app.ts
+++ b/packages/vue3/src/app.ts
@@ -1,16 +1,24 @@
 import {
   createHeadManager,
+  emptyLayoutSlot,
   HeadManager,
   HeadManagerOnUpdateCallback,
   HeadManagerTitleCallback,
   isPropsObject,
   isPropsObjectOrCallback,
+  layerShellProps,
+  layerTransitionName,
+  layoutPageOf,
+  LayoutSlot,
+  LoadingResolver,
   normalizeLayouts,
   Page,
   PageProps,
+  ResolvedLayer,
   resolveServerHead,
   router,
   SharedPageProps,
+  topPageOf,
   type ServerHeadOption,
 } from '@inertiajs/core'
 import {
@@ -19,17 +27,30 @@ import {
   DefineComponent,
   defineComponent,
   h,
+  hasInjectionContext,
+  InjectionKey,
+  inject,
   markRaw,
   Plugin,
   PropType,
+  provide,
   reactive,
   ref,
+  Ref,
   shallowRef,
+  toRef,
 } from 'vue'
-import { state as layoutPropsState, resetLayoutProps } from './layoutProps'
+import Layer from './Layer'
+import {
+  layerState as layerPropsForLayers,
+  retainLayerLayoutProps,
+  state as layoutPropsState,
+  resetLayoutProps,
+} from './layoutProps'
 import remember from './remember'
 import { VuePageHandlerArgs } from './types'
 import useForm from './useForm'
+import { layerIdKey } from './useLayer'
 
 type LayoutComponent = DefineComponent | Component
 
@@ -68,10 +89,13 @@ function isRenderFunction(value: unknown): boolean {
 export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
   initialPage: Page<SharedProps>
   initialComponent?: DefineComponent
+  initialLayers?: ResolvedLayer<DefineComponent>[]
   resolveComponent?: (name: string, page?: Page) => DefineComponent | Promise<DefineComponent>
   titleCallback?: HeadManagerTitleCallback
   onHeadUpdate?: HeadManagerOnUpdateCallback
   defaultLayout?: (name: string, page: Page) => unknown
+  layer?: Component
+  resolveLoading?: LoadingResolver
   serverHead?: ServerHeadOption
 }
 
@@ -79,11 +103,29 @@ export type InertiaApp = DefineComponent<InertiaAppProps>
 
 const component = ref<DefineComponent | undefined>(undefined)
 const page = ref<Page>()
-let pageAccessor: Page | null = null
+const layers = shallowRef<ResolvedLayer<DefineComponent>[] | undefined>(undefined)
+let pageAccessorRef: Page | null = null
+const layerAccessors = new WeakMap<Ref<Page>, Page>()
 const layout = shallowRef(null)
 const key = ref<number | undefined>(undefined)
 export let headManager: HeadManager
 
+const layerPageKey: InjectionKey<Ref<Page>> = Symbol('inertiaLayerPage')
+
+const LayerPageProvider = defineComponent({
+  name: 'LayerPageProvider',
+  props: {
+    page: { type: Object as PropType<Page>, required: true },
+    layerId: { type: String, required: true },
+  },
+  setup(props, { slots }) {
+    provide(layerPageKey, toRef(props, 'page'))
+    provide(layerIdKey, props.layerId)
+
+    return () => slots.default?.()
+  },
+})
+
 const App: InertiaApp = defineComponent({
   name: 'Inertia',
   props: {
@@ -95,6 +137,10 @@ const App: InertiaApp = defineComponent({
       type: Object as PropType<DefineComponent>,
       required: false,
     },
+    initialLayers: {
+      type: Array as PropType<ResolvedLayer<DefineComponent>[]>,
+      required: false,
+    },
     resolveComponent: {
       type: Function as PropType<(name: string, page?: Page) => DefineComponent | Promise<DefineComponent>>,
       required: false,
@@ -113,6 +159,15 @@ const App: InertiaApp = defineComponent({
       type: Function as PropType<(name: string, page: Page) => unknown>,
       required: false,
     },
+    layer: {
+      type: [Object, Function] as PropType<Component>,
+      required: false,
+      default: Layer,
+    },
+    resolveLoading: {
+      type: Function as PropType<LoadingResolver>,
+      required: false,
+    },
     serverHead: {
       type: [Boolean, String, Function] as PropType<ServerHeadOption>,
       required: false,
@@ -121,36 +176,45 @@ const App: InertiaApp = defineComponent({
   setup({
     initialPage,
     initialComponent,
+    initialLayers,
     resolveComponent,
     titleCallback,
     onHeadUpdate,
     defaultLayout,
+    layer,
+    resolveLoading,
     serverHead,
   }: InertiaAppProps) {
     component.value = initialComponent ? markRaw(initialComponent) : undefined
     page.value = { ...initialPage, flash: initialPage.flash ?? {} }
+    layers.value = initialLayers?.map((layer) => ({ ...layer, component: markRaw(layer.component) }))
     key.value = undefined
 
     const isServer = typeof window === 'undefined'
 
     headManager = createHeadManager(
       isServer,
-      (title: string) => (titleCallback ? titleCallback(title, page.value!) : title),
+      (title: string) => (titleCallback ? titleCallback(title, topPageOf(page.value!)) : title),
       onHeadUpdate || (() => {}),
       resolveServerHead(initialPage, serverHead),
+      () => page.value?.layers ?? [],
     )
 
     if (!isServer) {
       router.init<DefineComponent>({
         initialPage,
         resolveComponent: resolveComponent!,
+        resolveLoading,
         swapComponent: async (options: VuePageHandlerArgs) => {
           if (!options.preserveState) {
             resetLayoutProps()
           }
 
-          component.value = markRaw(options.component)
+          retainLayerLayoutProps((options.layers ?? []).map((layer) => layer.id))
+
+          component.value = options.component ? markRaw(options.component) : undefined
           page.value = options.page
+          layers.value = options.layers?.map((layer) => ({ ...layer, component: markRaw(layer.component) }))
           key.value = options.preserveState ? key.value : Date.now()
         },
         onFlash: (flash) => {
@@ -166,82 +230,130 @@ const App: InertiaApp = defineComponent({
       router.on('clientVisit', syncServerHead)
     }
 
-    return () => {
-      if (component.value) {
-        component.value.inheritAttrs = !!component.value.inheritAttrs
+    const baseLayoutProps = () => (isServer ? emptyLayoutSlot : layoutPropsState.value)
+    const layerLayoutProps = (layerId: string) =>
+      isServer ? emptyLayoutSlot : (layerPropsForLayers.value.get(layerId) ?? emptyLayoutSlot)
+
+    const wrapInLayout = (
+      component: DefineComponent,
+      page: Page,
+      child: ReturnType<typeof h>,
+      dynamicProps: () => LayoutSlot,
+    ): ReturnType<typeof h> => {
+      if (component.layout && isRenderFunction(component.layout)) {
+        return (component.layout as Function)(h, child)
+      }
 
-        const child = h(component.value, {
-          ...page.value!.props,
-          key: key.value,
-        })
+      let effectiveLayout: unknown
+      let callbackProps: Record<string, unknown> | null = null
+      const layoutValue = component.layout
 
-        if (layout.value) {
-          component.value.layout = layout.value
-          layout.value = null
+      if (
+        typeof layoutValue === 'function' &&
+        (layoutValue as Function).length <= 1 &&
+        typeof (layoutValue as Function).prototype === 'undefined'
+      ) {
+        const result = (layoutValue as Function)(page.props)
+
+        if (isPropsObjectOrCallback(result, isComponent)) {
+          effectiveLayout = defaultLayout?.(page.component, page)
+          callbackProps = result as Record<string, unknown>
+        } else {
+          effectiveLayout = result
         }
+      } else if (isPropsObject(layoutValue, isComponent)) {
+        effectiveLayout = defaultLayout?.(page.component, page)
+        callbackProps = layoutValue as Record<string, unknown>
+      } else {
+        effectiveLayout = layoutValue ?? defaultLayout?.(page.component, page)
+      }
 
-        if (component.value.layout && isRenderFunction(component.value.layout)) {
-          return (component.value.layout as Function)(h, child)
+      if (effectiveLayout) {
+        let layouts = normalizeLayouts(
+          effectiveLayout,
+          isComponent,
+          component.layout && !callbackProps ? isRenderFunction : undefined,
+        )
+
+        if (callbackProps) {
+          layouts = layouts.map((l) => ({ ...l, props: { ...l.props, ...callbackProps } }))
         }
 
-        let effectiveLayout: unknown
-        let callbackProps: Record<string, unknown> | null = null
-        const layoutValue = component.value.layout
-
-        if (
-          typeof layoutValue === 'function' &&
-          (layoutValue as Function).length <= 1 &&
-          typeof (layoutValue as Function).prototype === 'undefined'
-        ) {
-          const result = (layoutValue as Function)(page.value!.props)
-
-          if (isPropsObjectOrCallback(result, isComponent)) {
-            effectiveLayout = defaultLayout?.(page.value!.component, page.value!)
-            callbackProps = result as Record<string, unknown>
-          } else {
-            effectiveLayout = result
-          }
-        } else if (isPropsObject(layoutValue, isComponent)) {
-          effectiveLayout = defaultLayout?.(page.value!.component, page.value!)
-          callbackProps = layoutValue as Record<string, unknown>
-        } else {
-          effectiveLayout = layoutValue ?? defaultLayout?.(page.value!.component, page.value!)
+        if (layouts.length > 0) {
+          const slot = dynamicProps()
+
+          return layouts.reduceRight((childNode, layout) => {
+            const layoutComponent = layout.component as DefineComponent
+            layoutComponent.inheritAttrs = !!layoutComponent.inheritAttrs
+
+            return h(
+              layoutComponent,
+              {
+                ...page.props,
+                ...layout.props,
+                ...slot.shared,
+                ...(layout.name ? slot.named[layout.name] || {} : {}),
+              },
+              () => childNode,
+            )
+          }, child)
         }
+      }
 
-        if (effectiveLayout) {
-          let layouts = normalizeLayouts(
-            effectiveLayout,
-            isComponent,
-            component.value.layout && !callbackProps ? isRenderFunction : undefined,
-          )
+      return child
+    }
 
-          if (callbackProps) {
-            layouts = layouts.map((l) => ({ ...l, props: { ...l.props, ...callbackProps } }))
-          }
+    const renderTier = (component: DefineComponent, props: PageProps, key: number | undefined) => {
+      component.inheritAttrs = !!component.inheritAttrs
 
-          if (layouts.length > 0) {
-            const dynamicProps = isServer ? { shared: {}, named: {} } : layoutPropsState.value
-
-            return layouts.reduceRight((childNode, layout) => {
-              const layoutComponent = layout.component as DefineComponent
-              layoutComponent.inheritAttrs = !!layoutComponent.inheritAttrs
-
-              return h(
-                layoutComponent,
-                {
-                  ...page.value!.props,
-                  ...layout.props,
-                  ...dynamicProps.shared,
-                  ...(layout.name ? dynamicProps.named[layout.name] || {} : {}),
-                },
-                () => childNode,
-              )
-            }, child)
-          }
-        }
+      return h(component, { ...props, key })
+    }
+
+    const renderBase = () => {
+      if (!component.value) {
+        return
+      }
+
+      const child = renderTier(component.value, page.value!.props, key.value)
 
-        return child
+      if (layout.value) {
+        component.value.layout = layout.value
+        layout.value = null
       }
+
+      return wrapInLayout(component.value, page.value!, child, baseLayoutProps)
+    }
+
+    // Always a fragment, even with an empty stack. A root that switches between a single vnode and
+    // a fragment fails isSameVNodeType, so opening the first layer would remount the page beneath
+    // and lose its scroll position, form state and playing media.
+    return () => {
+      const stack = layers.value ?? []
+      const LayerShell = layer ?? Layer
+
+      return [
+        renderBase(),
+        ...stack.map((layer, index) => {
+          const layoutPage = layoutPageOf(layer)
+          const content = () =>
+            wrapInLayout(
+              layer.component,
+              layoutPage,
+              renderTier(layer.component, layoutPage.props, layer.renderKey),
+              () => layerLayoutProps(layer.id),
+            )
+
+          return h(LayerPageProvider, { key: layer.id, page: layer.page, layerId: layer.id }, () =>
+            h(LayerShell, layerShellProps(layer, index, stack.length), () =>
+              h(
+                'div',
+                { 'data-layer-id': layer.id, style: { viewTransitionName: layerTransitionName(layer.id) } },
+                content(),
+              ),
+            ),
+          )
+        }),
+      ]
     }
   },
 })
@@ -259,26 +371,43 @@ export const plugin: Plugin = {
   },
 }
 
+const pageKeys = [
+  'props',
+  'url',
+  'component',
+  'version',
+  'clearHistory',
+  'deferredProps',
+  'rescuedProps',
+  'mergeProps',
+  'prependProps',
+  'deepMergeProps',
+  'matchPropsOn',
+  'rememberedState',
+  'encryptHistory',
+  'scrollProps',
+  'flash',
+  'layers',
+] as const
+
+const pageAccessor = (source: () => Page | undefined): Page =>
+  reactive(Object.fromEntries(pageKeys.map((key) => [key, computed(() => source()?.[key])]))) as unknown as Page
+
 export function usePage<TPageProps extends PageProps = PageProps>(): Page<TPageProps & SharedPageProps> {
-  if (!pageAccessor) {
-    pageAccessor = reactive({
-      props: computed(() => page.value?.props),
-      url: computed(() => page.value?.url),
-      component: computed(() => page.value?.component),
-      version: computed(() => page.value?.version),
-      clearHistory: computed(() => page.value?.clearHistory),
-      deferredProps: computed(() => page.value?.deferredProps),
-      rescuedProps: computed(() => page.value?.rescuedProps),
-      mergeProps: computed(() => page.value?.mergeProps),
-      prependProps: computed(() => page.value?.prependProps),
-      deepMergeProps: computed(() => page.value?.deepMergeProps),
-      matchPropsOn: computed(() => page.value?.matchPropsOn),
-      rememberedState: computed(() => page.value?.rememberedState),
-      encryptHistory: computed(() => page.value?.encryptHistory),
-      scrollProps: computed(() => page.value?.scrollProps),
-      flash: computed(() => page.value?.flash),
-    }) as Page
+  const layerPage = hasInjectionContext() ? inject<Ref<Page> | undefined>(layerPageKey, undefined) : undefined
+
+  if (layerPage) {
+    let layerAccessor = layerAccessors.get(layerPage)
+
+    if (!layerAccessor) {
+      layerAccessor = pageAccessor(() => layerPage.value)
+      layerAccessors.set(layerPage, layerAccessor)
+    }
+
+    return layerAccessor as Page<TPageProps>
   }
 
-  return pageAccessor as Page<TPageProps>
+  pageAccessorRef ??= pageAccessor(() => page.value)
+
+  return pageAccessorRef as Page<TPageProps>
 }
diff --git a/packages/vue3/src/createInertiaApp.ts b/packages/vue3/src/createInertiaApp.ts
index 2785316a6..6b475394f 100644
--- a/packages/vue3/src/createInertiaApp.ts
+++ b/packages/vue3/src/createInertiaApp.ts
@@ -8,16 +8,19 @@ import {
   getInitialPageFromDOM,
   http as httpModule,
   InertiaAppSSRResponse,
+  LoadingOption,
+  normalizeLoading,
   Page,
   PageProps,
+  resolveInitialPage,
   router,
   setupProgress,
   SharedPageProps,
 } from '@inertiajs/core'
-import { createApp, createSSRApp, DefineComponent, h, Plugin, App as VueApp } from 'vue'
+import { Component, createApp, createSSRApp, DefineComponent, h, isVNode, Plugin, App as VueApp } from 'vue'
 import App, { InertiaApp, InertiaAppProps, plugin } from './app'
 import { config } from './index'
-import { VueInertiaAppConfig } from './types'
+import { LayerComponent, VueInertiaAppConfig } from './types'
 
 type ComponentResolver = (
   name: string,
@@ -43,6 +46,8 @@ type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOp
   void,
   VueInertiaAppConfig
 > & {
+  layer?: LayerComponent
+  loading?: LoadingOption<Component>
   withApp?: never
 }
 
@@ -54,6 +59,8 @@ type InertiaAppOptionsForSSR<SharedProps extends PageProps> = CreateInertiaAppOp
   VueInertiaAppConfig
 > & {
   render: (app: VueApp) => Promise<string>
+  layer?: LayerComponent
+  loading?: LoadingOption<Component>
   withApp?: never
 }
 
@@ -68,6 +75,8 @@ type InertiaAppOptionsAuto<SharedProps extends PageProps> = Omit<
 > & {
   page?: Page<SharedProps>
   render?: undefined
+  layer?: LayerComponent
+  loading?: LoadingOption<Component>
 } & (
     | { setup?: undefined; withApp?: VueWithApp<SharedProps> }
     | { setup: (options: SetupOptions<HTMLElement | null, SharedProps>) => VueApp | void; withApp?: never }
@@ -102,6 +111,8 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
     nonce,
     http,
     layout,
+    layer,
+    loading,
     serverHead,
     withApp,
     dev = !!import.meta.env?.DEV,
@@ -129,21 +140,30 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
   const resolveComponent = (name: string, page?: Page) =>
     Promise.resolve(resolve!(name, page)).then((module) => module.default || module)
 
+  const resolveLoading = normalizeLoading<DefineComponent>(loading, { rendered: isVNode })
+
   // SSR render function factory - when on server without page/render, return a render function
   // This is used by the Vite plugin's SSR transform
   if (isServer && !page && !render) {
     return async (page: Page<SharedProps>, renderToString: RenderToString) => {
       let head: string[] = []
 
-      const initialComponent = await resolveComponent(page.component, page)
+      const {
+        page: initialPage,
+        component: initialComponent,
+        layers: initialLayers,
+      } = await resolveInitialPage(page, resolveComponent, resolveLoading)
 
       const props: InertiaAppProps<SharedProps> = {
-        initialPage: page,
+        initialPage,
         initialComponent,
+        initialLayers,
         resolveComponent,
         titleCallback: title,
         onHeadUpdate: (elements: string[]) => (head = elements),
         defaultLayout: layout,
+        layer,
+        resolveLoading,
         serverHead,
       }
 
@@ -172,21 +192,24 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
     }
   }
 
-  const initialPage = page || getInitialPageFromDOM<Page<SharedProps>>(id)!
+  const initialResponse = page || getInitialPageFromDOM<Page<SharedProps>>(id)!
 
   let head: string[] = []
 
   const vueApp = await Promise.all([
-    resolveComponent(initialPage.component, initialPage),
+    resolveInitialPage(initialResponse, resolveComponent, resolveLoading),
     router.decryptHistory().catch(() => {}),
-  ]).then(([initialComponent]) => {
+  ]).then(([{ page: initialPage, component: initialComponent, layers: initialLayers }]) => {
     const props: InertiaAppProps<SharedProps> = {
       initialPage,
       initialComponent,
+      initialLayers,
       resolveComponent,
       titleCallback: title,
       onHeadUpdate: isServer ? (elements: string[]) => (head = elements) : undefined,
       defaultLayout: layout,
+      layer,
+      resolveLoading,
       serverHead,
     }
 
@@ -238,7 +261,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
 
   if (isServer && render && vueApp) {
     const html = await render(vueApp)
-    const body = buildSSRBody(id, initialPage, html)
+    const body = buildSSRBody(id, initialResponse, html)
 
     return { head, body }
   }
diff --git a/packages/vue3/src/deferred.ts b/packages/vue3/src/deferred.ts
index 3d4e3fc68..530d744d1 100644
--- a/packages/vue3/src/deferred.ts
+++ b/packages/vue3/src/deferred.ts
@@ -1,7 +1,8 @@
-import { isSameUrlWithoutQueryOrHash, partialReloadRequestsSomeProps, router } from '@inertiajs/core'
+import { partialReloadFillsDeferred, router } from '@inertiajs/core'
 import { get } from 'es-toolkit/compat'
 import { computed, defineComponent, Fragment, h, onMounted, onUnmounted, ref, type SlotsType } from 'vue'
 import { usePage } from './app'
+import { useLayerId } from './useLayer'
 
 export default defineComponent({
   name: 'Deferred',
@@ -17,6 +18,7 @@ export default defineComponent({
     rescue: { reloading: boolean }
   }>,
   setup(props, { slots }) {
+    const layerId = useLayerId()
     const reloading = ref(false)
     const activeReloads = new Set<object>()
     const page = usePage()
@@ -30,11 +32,7 @@ export default defineComponent({
       removeStartListener = router.on('start', (e) => {
         const visit = e.detail.visit
 
-        if (
-          visit.preserveState === true &&
-          isSameUrlWithoutQueryOrHash(visit.url, window.location) &&
-          partialReloadRequestsSomeProps(visit, keys.value)
-        ) {
+        if (partialReloadFillsDeferred(visit, { layerId, url: page.url }, keys.value)) {
           activeReloads.add(visit)
           reloading.value = true
         }
diff --git a/packages/vue3/src/head.ts b/packages/vue3/src/head.ts
index 89fd35bed..b5d52e72e 100644
--- a/packages/vue3/src/head.ts
+++ b/packages/vue3/src/head.ts
@@ -1,6 +1,7 @@
 import { escape } from 'es-toolkit/compat'
-import { defineComponent, DefineComponent, onBeforeUnmount, VNode } from 'vue'
+import { defineComponent, DefineComponent, inject, onBeforeUnmount, VNode } from 'vue'
 import { headManager } from './app'
+import { layerIdKey } from './useLayer'
 
 export type InertiaHead = DefineComponent<{
   title?: string
@@ -147,7 +148,8 @@ const Head: InertiaHead = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const provider = headManager.createProvider()
+    const layerId = inject(layerIdKey, undefined)
+    const provider = headManager.createProvider(layerId)
 
     onBeforeUnmount(() => {
       provider.disconnect()
diff --git a/packages/vue3/src/index.ts b/packages/vue3/src/index.ts
index 6ab59d516..11edb0af4 100755
--- a/packages/vue3/src/index.ts
+++ b/packages/vue3/src/index.ts
@@ -8,11 +8,13 @@ export { default as Deferred } from './deferred'
 export { createForm, default as Form, useFormContext } from './form'
 export { default as Head } from './head'
 export { default as InfiniteScroll } from './infiniteScroll'
+export { default as Layer } from './Layer'
 export { resetLayoutProps, setLayoutProps } from './layoutProps'
 export { InertiaLinkProps, default as Link } from './link'
-export { type LayoutCallback, type VueInertiaAppConfig, type VuePageHandlerArgs } from './types'
+export { type LayerComponent, type LayoutCallback, type VueInertiaAppConfig, type VuePageHandlerArgs } from './types'
 export { InertiaForm, InertiaFormProps, InertiaPrecognitiveForm, default as useForm } from './useForm'
 export { default as useHttp } from './useHttp'
+export { default as useLayer } from './useLayer'
 export { default as usePoll } from './usePoll'
 export { default as usePrefetch } from './usePrefetch'
 export { default as useRemember } from './useRemember'
diff --git a/packages/vue3/src/infiniteScroll.ts b/packages/vue3/src/infiniteScroll.ts
index 4d9d6c767..2c2307aeb 100644
--- a/packages/vue3/src/infiniteScroll.ts
+++ b/packages/vue3/src/infiniteScroll.ts
@@ -7,8 +7,21 @@ import {
   ReloadOptions,
   useInfiniteScroll,
 } from '@inertiajs/core'
-import { computed, defineComponent, Fragment, h, onMounted, onUnmounted, PropType, ref, SlotsType, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  Fragment,
+  h,
+  inject,
+  onMounted,
+  onUnmounted,
+  PropType,
+  ref,
+  SlotsType,
+  watch,
+} from 'vue'
 import { usePage } from './app'
+import { layerIdKey } from './useLayer'
 
 // Vue-specific element resolver
 const resolveHTMLElement = (
@@ -130,6 +143,7 @@ const InfiniteScroll = defineComponent({
       elementManager,
       flush: flushInfiniteScroll,
     } = useInfiniteScroll({
+      layerId: inject(layerIdKey, undefined),
       // Data
       getPropName: () => props.data,
       inReverseMode: () => props.reverse,
diff --git a/packages/vue3/src/layoutProps.ts b/packages/vue3/src/layoutProps.ts
index 1c5f2e3c9..f36f59b88 100644
--- a/packages/vue3/src/layoutProps.ts
+++ b/packages/vue3/src/layoutProps.ts
@@ -1,27 +1,24 @@
-import { createLayoutPropsStore, type LayoutProps, type NamedLayoutProps } from '@inertiajs/core'
+import { createLayoutPropsStore, type LayoutSlot } from '@inertiajs/core'
 import { ref } from 'vue'
 
 const store = createLayoutPropsStore()
 
 export const state = ref(store.get())
 
+export const layerState = ref(new Map<string, LayoutSlot>())
+
 store.subscribe(() => {
   state.value = store.get()
+  layerState.value = new Map(store.layerIds().map((id) => [id, store.getForLayer(id)]))
 })
 
-export function setLayoutProps(props: Partial<LayoutProps>): void
-export function setLayoutProps<K extends keyof NamedLayoutProps>(name: K, props: Partial<NamedLayoutProps[K]>): void
-export function setLayoutProps<T = never>(props: Partial<NoInfer<T>>): void
-export function setLayoutProps<T = never>(name: string, props: Partial<NoInfer<T>>): void
-export function setLayoutProps(nameOrProps: string | Record<string, unknown>, props?: Record<string, unknown>): void {
-  if (typeof nameOrProps === 'string') {
-    store.setFor(nameOrProps, props!)
-  } else {
-    store.set(nameOrProps)
-  }
-}
+export const setLayoutProps = store.set
 
 export function resetLayoutProps(): void {
   store.reset()
   state.value = store.get()
 }
+
+export function retainLayerLayoutProps(ids: string[]): void {
+  store.retainLayers(ids)
+}
diff --git a/packages/vue3/src/link.ts b/packages/vue3/src/link.ts
index 451dafd19..d1b01b875 100755
--- a/packages/vue3/src/link.ts
+++ b/packages/vue3/src/link.ts
@@ -13,6 +13,7 @@ import {
 } from '@inertiajs/core'
 import { Component, computed, defineComponent, DefineComponent, h, onMounted, onUnmounted, PropType, ref } from 'vue'
 import { config } from '.'
+import { useLayerId } from './useLayer'
 
 const noop = () => {}
 
@@ -148,6 +149,7 @@ const Link: InertiaLink = defineComponent({
     },
   },
   setup(props, { slots, attrs }) {
+    const layerId = useLayerId()
     const inFlightCount = ref(0)
     const hoverTimeout = ref<ReturnType<typeof setTimeout>>()
 
@@ -240,6 +242,7 @@ const Link: InertiaLink = defineComponent({
     })
 
     const baseParams = computed(() => ({
+      layerId,
       data: data.value,
       method: method.value,
       replace: props.replace,
diff --git a/packages/vue3/src/remember.ts b/packages/vue3/src/remember.ts
index 5fc7669d3..9b749875e 100755
--- a/packages/vue3/src/remember.ts
+++ b/packages/vue3/src/remember.ts
@@ -1,6 +1,7 @@
 import { router } from '@inertiajs/core'
 import { cloneDeep } from 'es-toolkit'
-import { ComponentOptions } from 'vue'
+import { ComponentOptions, inject } from 'vue'
+import { layerIdKey } from './useLayer'
 
 const remember: ComponentOptions = {
   created() {
@@ -8,6 +9,8 @@ const remember: ComponentOptions = {
       return
     }
 
+    const layerId = inject(layerIdKey, undefined)
+
     if (Array.isArray(this.$options.remember)) {
       this.$options.remember = { data: this.$options.remember }
     }
@@ -25,7 +28,7 @@ const remember: ComponentOptions = {
         ? this.$options.remember.key.call(this)
         : this.$options.remember.key
 
-    const restored = router.restore(rememberKey) as Record<string, unknown> | undefined
+    const restored = router.restore(rememberKey, layerId) as Record<string, unknown> | undefined
 
     const rememberable = this.$options.remember.data.filter((key: string) => {
       return !(this[key] !== null && typeof this[key] === 'object' && this[key].__rememberable === false)
@@ -57,6 +60,7 @@ const remember: ComponentOptions = {
               {},
             ),
             rememberKey,
+            layerId,
           )
         },
         { immediate: true, deep: true },
diff --git a/packages/vue3/src/types.ts b/packages/vue3/src/types.ts
index a4519aef9..f2a9eeba5 100644
--- a/packages/vue3/src/types.ts
+++ b/packages/vue3/src/types.ts
@@ -1,5 +1,6 @@
 import {
   createHeadManager,
+  type LayerShellProps,
   type LayoutCallbackReturn,
   Page,
   PageHandler,
@@ -13,6 +14,8 @@ import useForm from './useForm'
 export type VuePageHandlerArgs = Parameters<PageHandler<DefineComponent>>[0]
 export type VueInertiaAppConfig = {}
 
+export type LayerComponent = Component<LayerShellProps>
+
 export type LayoutCallback = (props: SharedPageProps) => LayoutCallbackReturn<Component>
 export type LayoutRenderFunction = (h: (component: Component, children: Component[]) => VNode, page: Component) => VNode
 
diff --git a/packages/vue3/src/useForm.ts b/packages/vue3/src/useForm.ts
index 725738a50..7958eb9f7 100644
--- a/packages/vue3/src/useForm.ts
+++ b/packages/vue3/src/useForm.ts
@@ -156,6 +156,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
     setRememberExcludeKeys,
     resetBeforeSubmit,
     finishProcessing,
+    layerId,
   } = useFormState<TForm>({
     data,
     rememberKey,
@@ -178,6 +179,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
       resetDefaultsCalledInOnSuccess()
 
       const _options: VisitOptions = {
+        layerId,
         ...options,
         onCancelToken: (token) => {
           cancelToken = token
diff --git a/packages/vue3/src/useFormState.ts b/packages/vue3/src/useFormState.ts
index 23dc24153..00ed0253f 100644
--- a/packages/vue3/src/useFormState.ts
+++ b/packages/vue3/src/useFormState.ts
@@ -23,6 +23,7 @@ import {
 } from 'laravel-precognition'
 import { reactive, watch } from 'vue'
 import { config } from '.'
+import { useLayerId } from './useLayer'
 
 type PrecognitionValidationConfig<TKeys> = ValidationConfig & {
   only?: TKeys[] | Iterable<TKeys> | ArrayLike<TKeys>
@@ -102,19 +103,21 @@ export interface UseFormStateReturn<TForm extends object> {
   resetBeforeSubmit: () => void
   finishProcessing: () => void
   withAllErrors: { enabled: () => boolean; enable: () => void }
+  layerId: string | undefined
 }
 
 export default function useFormState<TForm extends object>(
   options: UseFormStateOptions<TForm>,
 ): UseFormStateReturn<TForm> {
   const { data: dataOption, rememberKey } = options
+  const layerId = useLayerId()
   let { precognitionEndpoint } = options
 
   const isDataFunction = typeof dataOption === 'function'
   const resolveData = () => (isDataFunction ? (dataOption as () => TForm)() : dataOption)
 
   const restored = rememberKey
-    ? (router.restore(rememberKey) as { data: TForm; errors: Record<FormDataKeys<TForm>, ErrorValue> } | null)
+    ? (router.restore(rememberKey, layerId) as { data: TForm; errors: Record<FormDataKeys<TForm>, ErrorValue> } | null)
     : null
 
   const initialData = restored?.data ?? cloneDeep(resolveData())
@@ -378,11 +381,11 @@ export default function useFormState<TForm extends object>(
         return
       }
 
-      const storedData = router.restore(rememberKey)
+      const storedData = router.restore(rememberKey, layerId)
       const newData = cloneDeep((newValue as unknown as InternalRememberState<TForm>).__remember())
 
       if (!isEqual(storedData, newData)) {
-        router.remember(newData, rememberKey)
+        router.remember(newData, rememberKey, layerId)
       }
     },
     { immediate: true, deep: true },
@@ -394,6 +397,7 @@ export default function useFormState<TForm extends object>(
 
   return {
     form: typedForm,
+    layerId,
     setDefaults: (newDefaults: TForm) => {
       defaults = newDefaults
     },
diff --git a/packages/vue3/src/useLayer.ts b/packages/vue3/src/useLayer.ts
new file mode 100644
index 000000000..4ecbd387b
--- /dev/null
+++ b/packages/vue3/src/useLayer.ts
@@ -0,0 +1,10 @@
+import { createLayerApi, type LayerApi } from '@inertiajs/core'
+import { hasInjectionContext, inject, type InjectionKey } from 'vue'
+
+export const layerIdKey: InjectionKey<string> = Symbol('inertiaLayerId')
+
+export const useLayerId = (): string | undefined => (hasInjectionContext() ? inject(layerIdKey, undefined) : undefined)
+
+export default function useLayer(): LayerApi {
+  return createLayerApi(useLayerId())
+}
diff --git a/packages/vue3/src/usePoll.ts b/packages/vue3/src/usePoll.ts
index 0abd0bbdf..7ce8e95b3 100644
--- a/packages/vue3/src/usePoll.ts
+++ b/packages/vue3/src/usePoll.ts
@@ -1,5 +1,6 @@
-import { PollOptions, ReloadOptions, router } from '@inertiajs/core'
+import { PollOptions, ReloadOptions } from '@inertiajs/core'
 import { onMounted, onUnmounted, ref, Ref } from 'vue'
+import useLayer from './useLayer'
 
 export default function usePoll(
   interval: number,
@@ -15,7 +16,7 @@ export default function usePoll(
 } {
   const autoStart = options.autoStart ?? true
 
-  const { stop, start, destroy } = router.poll(interval, requestOptions, {
+  const { stop, start, destroy } = useLayer().poll(interval, requestOptions, {
     ...options,
     autoStart: false,
   })
diff --git a/packages/vue3/src/useRemember.ts b/packages/vue3/src/useRemember.ts
index 165e95821..1b92ad61c 100644
--- a/packages/vue3/src/useRemember.ts
+++ b/packages/vue3/src/useRemember.ts
@@ -1,6 +1,7 @@
 import { router } from '@inertiajs/core'
 import { cloneDeep } from 'es-toolkit'
-import { isReactive, reactive, ref, Ref, watch } from 'vue'
+import { inject, isReactive, reactive, ref, Ref, watch } from 'vue'
+import { layerIdKey } from './useLayer'
 
 export default function useRemember<T extends object>(
   data: T & { __rememberable?: boolean; __remember?: Function; __restore?: Function },
@@ -10,7 +11,8 @@ export default function useRemember<T extends object>(
     return data
   }
 
-  const restored = router.restore(key)
+  const layerId = inject(layerIdKey, undefined)
+  const restored = router.restore(key, layerId)
   const type = isReactive(data) ? reactive : ref
   const hasCallbacks = typeof data.__remember === 'function' && typeof data.__restore === 'function'
   const remembered = type(
@@ -20,7 +22,7 @@ export default function useRemember<T extends object>(
   watch(
     remembered,
     (newValue) => {
-      router.remember(cloneDeep(hasCallbacks ? data.__remember!() : newValue), key)
+      router.remember(cloneDeep(hasCallbacks ? data.__remember!() : newValue), key, layerId)
     },
     { immediate: true, deep: true },
   )
diff --git a/packages/vue3/src/whenVisible.ts b/packages/vue3/src/whenVisible.ts
index 0e0b24a88..3424ab168 100644
--- a/packages/vue3/src/whenVisible.ts
+++ b/packages/vue3/src/whenVisible.ts
@@ -2,6 +2,7 @@ import { ReloadOptions, router } from '@inertiajs/core'
 import { get } from 'es-toolkit/compat'
 import { computed, defineComponent, h, nextTick, onUnmounted, PropType, ref, SlotsType, watch } from 'vue'
 import { usePage } from './app'
+import { useLayerId } from './useLayer'
 
 export default defineComponent({
   name: 'WhenVisible',
@@ -30,6 +31,7 @@ export default defineComponent({
     },
   },
   setup(props, { slots }) {
+    const layerId = useLayerId()
     const loaded = ref(false)
     const fetching = ref(false)
     const observer = ref<IntersectionObserver | null>(null)
@@ -76,6 +78,7 @@ export default defineComponent({
           const reloadParams = getReloadParams()
 
           router.reload({
+            layerId,
             ...reloadParams,
             onStart: (e) => {
               fetching.value = true
diff --git a/packages/vue3/test-app/Layouts/AdminLayout.vue b/packages/vue3/test-app/Layouts/AdminLayout.vue
new file mode 100644
index 000000000..128b727e9
--- /dev/null
+++ b/packages/vue3/test-app/Layouts/AdminLayout.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div id="admin-layout">
+    <span>Admin Layout</span>
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Layouts/DefaultLayout.vue b/packages/vue3/test-app/Layouts/DefaultLayout.vue
index 3fc8af1d0..3dce00ca3 100644
--- a/packages/vue3/test-app/Layouts/DefaultLayout.vue
+++ b/packages/vue3/test-app/Layouts/DefaultLayout.vue
@@ -1,8 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineProps<{ baseChrome?: string; layerChrome?: string; name?: string }>()
+</script>
 
 <template>
   <div id="default-layout">
     <span>Default Layout</span>
+    <div id="base-chrome">{{ baseChrome ?? '' }}</div>
+    <div id="layer-chrome">{{ layerChrome ?? '' }}</div>
+    <div id="layout-name">{{ name ?? '' }}</div>
     <slot />
   </div>
 </template>
diff --git a/packages/vue3/test-app/Layouts/Layer.vue b/packages/vue3/test-app/Layouts/Layer.vue
new file mode 100644
index 000000000..7bb3eeaf0
--- /dev/null
+++ b/packages/vue3/test-app/Layouts/Layer.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Layer, useLayer, usePage } from '@inertiajs/vue3'
+
+defineProps<{
+  open: boolean
+  index: number
+  isTop: boolean
+  type: 'routed' | 'local'
+  close: () => void
+  done: () => void
+}>()
+
+const page = usePage()
+const layer = useLayer()
+</script>
+
+<template>
+  <Layer v-bind="$props" :label="layer.id ? page.component : 'unresolved'"><slot /></Layer>
+</template>
diff --git a/packages/vue3/test-app/Pages/History/NonSerializable.vue b/packages/vue3/test-app/Pages/History/NonSerializable.vue
new file mode 100644
index 000000000..f7f20e293
--- /dev/null
+++ b/packages/vue3/test-app/Pages/History/NonSerializable.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3'
+
+const pushFunctionProp = () => {
+  router.push({
+    url: '/history/non-serializable/target',
+    component: 'History/NonSerializableTarget',
+    props: { message: 'Target page', onAction: () => 'action from the function prop' },
+  })
+}
+</script>
+
+<template>
+  <button @click="pushFunctionProp">Push a function prop</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/History/NonSerializableTarget.vue b/packages/vue3/test-app/Pages/History/NonSerializableTarget.vue
new file mode 100644
index 000000000..561162e0d
--- /dev/null
+++ b/packages/vue3/test-app/Pages/History/NonSerializableTarget.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3'
+
+defineProps<{ message: string; onAction?: () => string }>()
+
+const clientVisit = () => {
+  router.push({
+    url: '/history/non-serializable/landed',
+    component: 'History/NonSerializableTarget',
+    props: { message: 'Client visit landed' },
+  })
+}
+</script>
+
+<template>
+  <button @click="clientVisit">Client visit</button>
+
+  <div>{{ message }}</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Base.vue b/packages/vue3/test-app/Pages/Layers/Base.vue
new file mode 100644
index 000000000..ed0a1ee6c
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Base.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { Link, router, usePage, useRemember, setLayoutProps } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+defineProps<{ likes: number }>()
+
+const page = usePage()
+const visitEvents = ref<string[]>([])
+const childEvents = ref('')
+const cancelledEvent = ref('')
+const remembered = useRemember({ note: '' })
+
+const pushPanel = () => {
+  router.push({
+    url: '/layers/panel/client',
+    component: 'Layers/Panel',
+    props: { name: 'from a client visit' },
+  })
+}
+
+const openPanelWithCallbacks = () => {
+  router.visit('/layers/panel/first', {
+    onFlash: () => visitEvents.value.push('flash'),
+    onError: () => visitEvents.value.push('error'),
+    onSuccess: () => visitEvents.value.push('success'),
+  })
+}
+
+const openPanelWithViewTransition = () => {
+  router.visit('/layers/panel/first', { viewTransition: true })
+}
+
+const like = () => {
+  router.optimistic<{ likes: number }>((props) => ({ likes: props.likes + 1 })).post('/layers/like')
+}
+
+const refresh = () => {
+  router.reload()
+}
+
+const openPanelWithoutMovingTheAddress = () => {
+  router.visit('/layers/counted/panel', { preserveUrl: true })
+}
+
+const partialReload = () => {
+  router.reload({ only: ['likes'] })
+}
+
+const openHandledPanel = () => {
+  const handle = router.layer('/layers/panel/first')
+  handle.on('saved', (user) => (childEvents.value = `saved ${(user as { id?: number })?.id}`))
+}
+
+const openCancelledPanel = () => {
+  const handle = router.layer('/layers/panel/delayed?delay=600')
+  handle.onClose(() => (cancelledEvent.value = 'closed'))
+}
+
+const openLocalLayer = () => {
+  router.layer({ component: 'Layers/Local', props: { note: 'local' } })
+}
+
+const setBaseChrome = () => {
+  setLayoutProps({ baseChrome: 'base' })
+}
+</script>
+
+<template>
+  <div>Base page</div>
+
+  <div id="spacer" style="height: 1000px"></div>
+
+  <p v-if="page.props.errors?.name" id="page-error">{{ page.props.errors.name }}</p>
+
+  <div id="layer-count">{{ page.layers?.length ?? 0 }}</div>
+  <div id="visit-events">{{ visitEvents.join(',') }}</div>
+  <div id="page-flash">{{ (page.flash as { message?: string })?.message ?? '' }}</div>
+  <div id="likes">{{ likes }}</div>
+  <div id="child-events">{{ childEvents }}</div>
+  <div id="cancelled-event">{{ cancelledEvent }}</div>
+
+  <input id="note" />
+  <input id="remembered-note" v-model="remembered.note" />
+
+  <Link href="/layers/panel/first">Open panel</Link>
+  <Link href="/layers/guarded">Open guarded panel</Link>
+  <Link href="/layers/panel/second">Open second panel</Link>
+  <Link href="/layers/panel/third">Open third panel</Link>
+  <Link href="/layers/slow">Open slow panel</Link>
+  <Link href="/layers/panel/delayed?delay=600">Open delayed panel</Link>
+  <Link href="/layers/settings">Open settings</Link>
+  <Link href="/layers/step/one">Open step one</Link>
+  <Link href="/layers/step/two">Open step two</Link>
+  <Link href="/layers/counted/panel">Open counted panel</Link>
+  <Link href="/layers/deferred">Open deferred layer</Link>
+
+  <button @click="pushPanel">Push panel as a page</button>
+  <button @click="openPanelWithCallbacks">Open panel with callbacks</button>
+  <button @click="openPanelWithViewTransition">Open panel with view transition</button>
+  <button @click="like">Like</button>
+  <button @click="refresh">Refresh in the background</button>
+  <button @click="openPanelWithoutMovingTheAddress">Open panel without moving the address</button>
+  <button @click="partialReload">Partial reload</button>
+  <button @click="openHandledPanel">Open handled panel</button>
+  <button @click="openCancelledPanel">Open cancelled panel</button>
+  <button @click="openLocalLayer">Open local layer</button>
+  <button @click="setBaseChrome">Set base chrome</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/ChainInner.vue b/packages/vue3/test-app/Pages/Layers/ChainInner.vue
new file mode 100644
index 000000000..47631d660
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/ChainInner.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <Head title="Chain inner" />
+  <div>Chain inner</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/ChainOuter.vue b/packages/vue3/test-app/Pages/Layers/ChainOuter.vue
new file mode 100644
index 000000000..f050a5e45
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/ChainOuter.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <Head title="Chain outer" />
+  <div>Chain outer</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Child.vue b/packages/vue3/test-app/Pages/Layers/Child.vue
new file mode 100644
index 000000000..67626de3f
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Child.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useLayer } from '@inertiajs/vue3'
+
+const layer = useLayer()
+
+const emitSaved = () => {
+  layer.emit('saved', { id: 5 })
+}
+
+const closeSelf = () => {
+  layer.close()
+}
+</script>
+
+<template>
+  <div>Child layer</div>
+  <button @click="emitSaved">Emit saved</button>
+  <button @click="closeSelf">Close myself</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Deferred.vue b/packages/vue3/test-app/Pages/Layers/Deferred.vue
new file mode 100644
index 000000000..fd9c885f4
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Deferred.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Deferred } from '@inertiajs/vue3'
+
+defineProps<{ name: string; stats?: number[] }>()
+</script>
+
+<template>
+  <div>Deferred layer: {{ name }}</div>
+
+  <Deferred data="stats">
+    <template #fallback>
+      <div data-testid="deferred-fallback">Loading stats...</div>
+    </template>
+    <template #default>
+      <div data-testid="deferred-stats">{{ stats?.join(',') }}</div>
+    </template>
+  </Deferred>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Guarded.vue b/packages/vue3/test-app/Pages/Layers/Guarded.vue
new file mode 100644
index 000000000..d2dfda89b
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Guarded.vue
@@ -0,0 +1,3 @@
+<template>
+  <div id="guarded-layer">Guarded layer</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Headed.vue b/packages/vue3/test-app/Pages/Layers/Headed.vue
new file mode 100644
index 000000000..cec2e5f7b
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Headed.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <Head title="Headed Layer" />
+  <div>Headed layer</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/HeadedBase.vue b/packages/vue3/test-app/Pages/Layers/HeadedBase.vue
new file mode 100644
index 000000000..2c3df0120
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/HeadedBase.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <Head title="Headed Base" />
+  <div>Headed base page</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Infinite.vue b/packages/vue3/test-app/Pages/Layers/Infinite.vue
new file mode 100644
index 000000000..5a3e56a95
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Infinite.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { InfiniteScroll } from '@inertiajs/vue3'
+import { User, default as UserCard } from '../InfiniteScroll/UserCard.vue'
+
+defineProps<{
+  users: { data: User[] }
+}>()
+</script>
+
+<template>
+  <div>Infinite layer</div>
+  <InfiniteScroll data="users" style="display: grid; gap: 20px" manual>
+    <template #previous="{ loading, fetch, hasMore }">
+      <button @click="fetch">{{ loading ? 'Loading previous items...' : 'Load previous items' }}</button>
+      <span>Has more previous: {{ hasMore }}</span>
+    </template>
+
+    <UserCard v-for="user in users.data" :key="user.id" :user="user" />
+
+    <template #next="{ loading, fetch, hasMore }">
+      <button @click="fetch">{{ loading ? 'Loading next items...' : 'Load next items' }}</button>
+      <span>Has more next: {{ hasMore }}</span>
+    </template>
+  </InfiniteScroll>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/LoadingBase.vue b/packages/vue3/test-app/Pages/Layers/LoadingBase.vue
new file mode 100644
index 000000000..38e500c79
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/LoadingBase.vue
@@ -0,0 +1,3 @@
+<template>
+  <div id="loading-base">Loading the page beneath</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Local.vue b/packages/vue3/test-app/Pages/Layers/Local.vue
new file mode 100644
index 000000000..ae9eb8cae
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Local.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{ note: string; errors: Record<string, string> }>()
+</script>
+
+<template>
+  <div>Local layer</div>
+  <div id="local-note">{{ note }}</div>
+  <div id="local-errors">{{ typeof errors }}</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Login.vue b/packages/vue3/test-app/Pages/Layers/Login.vue
new file mode 100644
index 000000000..b4a9e9d6d
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Login.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3'
+
+const signIn = () => {
+  router.post('/layers/login')
+}
+</script>
+
+<template>
+  <div id="login-page">Sign in to continue</div>
+
+  <button @click="signIn">Sign in</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/ModuleScope.vue b/packages/vue3/test-app/Pages/Layers/ModuleScope.vue
new file mode 100644
index 000000000..db46f2c21
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/ModuleScope.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import { usePage as moduleScopeUsePage } from '@inertiajs/vue3'
+
+const moduleScopePage = moduleScopeUsePage()
+
+declare global {
+  interface Window {
+    moduleScopePageComponent: string
+    moduleScopePageUrl: string
+  }
+}
+
+window.moduleScopePageComponent = String(moduleScopePage.component ?? '')
+window.moduleScopePageUrl = moduleScopePage.url ?? undefined
+</script>
+
+<script setup lang="ts">
+import { usePage } from '@inertiajs/vue3'
+
+const page = usePage()
+</script>
+
+<template>
+  <div>Module scope page</div>
+  <div data-testid="module-scope-page">{{ page.component }}|{{ page.url }}</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Panel.vue b/packages/vue3/test-app/Pages/Layers/Panel.vue
new file mode 100644
index 000000000..4529d22fa
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Panel.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { router, useForm, useLayer, usePage } from '@inertiajs/vue3'
+import { onUnmounted, ref } from 'vue'
+
+const props = defineProps<{ name: string; count?: number; errors?: { note?: string } }>()
+
+const page = usePage()
+const layer = useLayer()
+const form = useForm('note', { note: '' })
+
+const save = () => {
+  router.post(`/layers/panel/${props.name}/save`)
+}
+
+const submitForm = () => {
+  form.post(`/layers/panel/${props.name}/save`)
+}
+
+const submitFormOptimistically = () => {
+  form
+    .optimistic<{ count: number }>((current) => ({ ...current, count: 99 }))
+    .post(`/layers/panel/${props.name}/save-slow`)
+}
+
+const saveAndClose = () => {
+  router.post('/layers/close')
+}
+
+const openNext = () => {
+  router.post(`/layers/panel/${props.name}/next`)
+}
+
+const openNextInstantly = () => {
+  layer.visit('/layers/panel/second?delay=500', { component: 'Layers/Panel' })
+}
+
+const openNextWithoutMovingTheAddress = () => {
+  router.visit('/layers/panel/second', { preserveUrl: true })
+}
+
+const partialReload = () => {
+  layer.reload({ only: ['count'] })
+}
+
+const partialThroughTheLayerRouter = () => {
+  layer.get(`/layers/panel/${props.name}`, {}, { only: ['count'] })
+}
+
+const reloadBase = () => {
+  router.reload()
+}
+
+const bumpCount = () => {
+  layer.replaceProp('count', (old: unknown) => Number(old ?? 0) + 1)
+}
+
+const childEvents = ref('')
+const stopListening = layer.on('saved', (payload) => {
+  childEvents.value = `saved ${(payload as { id: number }).id}`
+})
+
+onUnmounted(stopListening)
+
+const openChild = () => {
+  const handle = router.layer('/layers/child')
+  window.testing.childHandle = handle
+}
+
+const likeAndClose = () => {
+  router.post('/layers/like')
+  layer.close()
+}
+
+const likeInBackgroundAndClose = () => {
+  router.post('/layers/like', {}, { async: true })
+  layer.close()
+}
+
+const openChildThroughTheLayer = () => {
+  const handle = layer.layer('/layers/child')
+  window.testing.layerChildHandle = handle
+}
+</script>
+
+<template>
+  <div>Panel layer: {{ name }}</div>
+
+  <div data-testid="layer-use-page">
+    {{ (page as any).props.name }}|{{ (page as any).url }}|{{ (page as any).component }}
+  </div>
+
+  <div data-testid="panel-count">{{ count }}</div>
+
+  <div id="panel-child-events">{{ childEvents }}</div>
+
+  <p v-if="props.errors?.note" class="panel-error">{{ props.errors.note }}</p>
+
+  <input class="panel-note" />
+  <input class="layer-remembered" v-model="form.note" />
+
+  <p v-if="form.errors.note" class="panel-form-error">{{ form.errors.note }}</p>
+
+  <button @click="save">Save panel</button>
+  <button @click="submitForm">Submit panel form</button>
+  <button @click="submitFormOptimistically">Submit panel form optimistically</button>
+  <button @click="saveAndClose">Save and close</button>
+  <button @click="openNext">Open next panel</button>
+  <button @click="openNextInstantly">Instantly open the next panel</button>
+  <button @click="openNextWithoutMovingTheAddress">Open a second panel without moving the address</button>
+  <button @click="partialReload">Partial reload panel</button>
+  <button @click="partialThroughTheLayerRouter">Partial through the layer router</button>
+  <button @click="reloadBase">Reload base beneath</button>
+  <button @click="bumpCount">Layer replaceProp</button>
+  <button @click="likeAndClose">Like and close</button>
+  <button @click="likeInBackgroundAndClose">Like in the background and close</button>
+  <button @click="openChild">Open child layer</button>
+  <button @click="openChildThroughTheLayer">Open child through the layer</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Prompt.vue b/packages/vue3/test-app/Pages/Layers/Prompt.vue
new file mode 100644
index 000000000..185035634
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Prompt.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3'
+
+const complete = () => {
+  router.post('/layers/prompt/complete')
+}
+</script>
+
+<template>
+  <div id="prompt-page">Sudo prompt</div>
+
+  <button @click="complete">Complete the prompt</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/ScrollBase.vue b/packages/vue3/test-app/Pages/Layers/ScrollBase.vue
new file mode 100644
index 000000000..aec27cbee
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/ScrollBase.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>Scroll base page</div>
+  <div scroll-region id="base-region" style="height: 200px; overflow-y: auto; border: 1px solid #ccc">
+    <div style="height: 800px">Base scrollable content</div>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/ScrollLayer.vue b/packages/vue3/test-app/Pages/Layers/ScrollLayer.vue
new file mode 100644
index 000000000..7b4c75380
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/ScrollLayer.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>Scroll layer</div>
+  <div scroll-region id="layer-region" style="height: 200px; overflow-y: auto; border: 1px solid #ccc">
+    <div style="height: 800px">Layer scrollable content</div>
+  </div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Settings.vue b/packages/vue3/test-app/Pages/Layers/Settings.vue
new file mode 100644
index 000000000..9680312b2
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Settings.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Link, setLayoutProps, useLayer } from '@inertiajs/vue3'
+
+const layer = useLayer()
+
+setLayoutProps({ layerChrome: 'layer' }, layer.id)
+</script>
+
+<template>
+  <div>Account settings</div>
+  <Link href="/layers/settings">Open settings again</Link>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Slow.vue b/packages/vue3/test-app/Pages/Layers/Slow.vue
new file mode 100644
index 000000000..e0773b387
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Slow.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Slow layer</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/SlowImport.vue b/packages/vue3/test-app/Pages/Layers/SlowImport.vue
new file mode 100644
index 000000000..3d7479887
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/SlowImport.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Slow import base</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/Layers/Waypoint.vue b/packages/vue3/test-app/Pages/Layers/Waypoint.vue
new file mode 100644
index 000000000..32f87b3bc
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Layers/Waypoint.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Link, router } from '@inertiajs/vue3'
+
+defineProps<{ name: string; next: string }>()
+
+const prefetchPanel = () => {
+  router.prefetch('/layers/panel/first', {}, { cacheFor: '30s' })
+}
+
+const openPanelInstantly = () => {
+  router.visit('/layers/panel/first', { component: 'Layers/Panel' })
+}
+</script>
+
+<template>
+  <div id="waypoint">Waypoint {{ name }}</div>
+
+  <Link :href="`/layers/waypoint/${next}`">Go to the next waypoint</Link>
+
+  <button @click="prefetchPanel">Prefetch the panel</button>
+  <button @click="openPanelInstantly">Instantly open the panel</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/SSR/Layer.vue b/packages/vue3/test-app/Pages/SSR/Layer.vue
new file mode 100644
index 000000000..5d6315b9c
--- /dev/null
+++ b/packages/vue3/test-app/Pages/SSR/Layer.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useRemember } from '@inertiajs/vue3'
+
+const remembered = useRemember({ note: '' })
+</script>
+
+<template>
+  <div data-testid="ssr-layer">SSR layer</div>
+  <input v-model="remembered.note" data-testid="ssr-layer-note" />
+</template>
diff --git a/packages/vue3/test-app/Pages/SSR/LayerBase.vue b/packages/vue3/test-app/Pages/SSR/LayerBase.vue
new file mode 100644
index 000000000..0648910b9
--- /dev/null
+++ b/packages/vue3/test-app/Pages/SSR/LayerBase.vue
@@ -0,0 +1,3 @@
+<template>
+  <div data-testid="ssr-layer-base">SSR layer base</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/SSR/LayerLoading.vue b/packages/vue3/test-app/Pages/SSR/LayerLoading.vue
new file mode 100644
index 000000000..294bb9590
--- /dev/null
+++ b/packages/vue3/test-app/Pages/SSR/LayerLoading.vue
@@ -0,0 +1,3 @@
+<template>
+  <div id="loading-base">SSR loading placeholder</div>
+</template>
diff --git a/packages/vue3/test-app/Pages/TypeScriptLayoutProps.vue b/packages/vue3/test-app/Pages/TypeScriptLayoutProps.vue
index 968a992df..66bde1433 100644
--- a/packages/vue3/test-app/Pages/TypeScriptLayoutProps.vue
+++ b/packages/vue3/test-app/Pages/TypeScriptLayoutProps.vue
@@ -7,6 +7,8 @@ declare module '@inertiajs/core' {
     layoutProps: {
       title: string
       showSidebar: boolean
+      baseChrome?: string
+      layerChrome?: string
     }
     namedLayoutProps: {
       app: { title: string; theme: 'light' | 'dark' }
diff --git a/packages/vue3/test-app/app.ts b/packages/vue3/test-app/app.ts
index e0f92bf0f..f2fe0a4c8 100644
--- a/packages/vue3/test-app/app.ts
+++ b/packages/vue3/test-app/app.ts
@@ -1,12 +1,16 @@
 import type { HttpClient, HttpClientOptions, Page } from '@inertiajs/core'
 import { axiosAdapter, type VisitOptions } from '@inertiajs/core'
-import { createInertiaApp, router } from '@inertiajs/vue3'
+import { createInertiaApp, router, setLayoutProps } from '@inertiajs/vue3'
 import type { DefineComponent } from 'vue'
-import { createApp, h } from 'vue'
+import { createApp, createSSRApp, h } from 'vue'
+import AdminLayout from './Layouts/AdminLayout.vue'
 import AppLayout from './Layouts/AppLayout.vue'
 import DefaultLayout from './Layouts/DefaultLayout.vue'
+import Layer from './Layouts/Layer.vue'
+import LoadingBase from './Pages/Layers/LoadingBase.vue'
+import LayerLoading from './Pages/SSR/LayerLoading.vue'
 
-window.testing = { Inertia: router }
+window.testing = { Inertia: router, setLayoutProps }
 window.resolverReceivedPage = null as Page | null
 
 const params = new URLSearchParams(window.location.search)
@@ -40,10 +44,31 @@ createInertiaApp({
       await new Promise((resolve) => setTimeout(resolve, 50))
     }
 
+    if (name === 'Layers/Slow') {
+      // Long enough for a test to supersede the layer visit while it is still resolving
+      await new Promise((resolve) => setTimeout(resolve, 500))
+    }
+
+    if (name === 'Layers/SlowImport') {
+      // Long enough for a dismissal to supersede a walk landing while its component resolves
+      await new Promise((resolve) => setTimeout(resolve, 700))
+    }
+
     return pages[`./Pages/${name}.vue`]
   },
+  layer: Layer,
+  loading: (url: string, page: Page) => {
+    window.loadingResolved = [url, ...(page.layers ?? []).map((layer) => layer.key)].join('|')
+
+    if (url.startsWith('/ssr/layer-loading-base')) {
+      return LayerLoading
+    }
+
+    return url.startsWith('/layers/loading') ? LoadingBase : undefined
+  },
   setup({ el, App, props, plugin }) {
-    const inst = createApp({ render: () => h(App, props) })
+    const root = { render: () => h(App, props) }
+    const inst = el.hasAttribute('data-server-rendered') ? createSSRApp(root) : createApp(root)
 
     if (!window.location.pathname.startsWith('/plugin/without')) {
       inst.use(plugin)
@@ -62,6 +87,9 @@ createInertiaApp({
   ...(params.has('withDefaultLayout') && {
     layout: () => DefaultLayout,
   }),
+  ...(params.has('withUrlBasedLayout') && {
+    layout: (name: string, page) => (page.url?.startsWith('/layers/base') ? AdminLayout : DefaultLayout),
+  }),
   ...(params.has('withDefaultAppLayout') && {
     layout: () => AppLayout,
   }),
@@ -91,4 +119,7 @@ createInertiaApp({
   ...(params.has('withTitleCallback') && {
     title: (title, page) => [title, page.props.titleSuffix].filter(Boolean).join(' | '),
   }),
+  ...(params.has('withLayersTitleCallback') && {
+    title: (title, page) => [title, page.props.suffix].filter(Boolean).join(' | '),
+  }),
 })
diff --git a/packages/vue3/test-app/ssr-auto.ts b/packages/vue3/test-app/ssr-auto.ts
index 251027b4f..55888b877 100644
--- a/packages/vue3/test-app/ssr-auto.ts
+++ b/packages/vue3/test-app/ssr-auto.ts
@@ -1,5 +1,6 @@
 import { createInertiaApp } from '@inertiajs/vue3'
 import type { DefineComponent } from 'vue'
+import Layer from './Layouts/Layer.vue'
 
 // This file uses createInertiaApp as a standalone expression (not exported)
 // The Vite plugin SSR transform will automatically:
@@ -8,6 +9,7 @@ import type { DefineComponent } from 'vue'
 // 3. Export a default render function
 
 createInertiaApp<{ locale?: string }>({
+  layer: Layer,
   resolve: (name) => {
     const pages = import.meta.glob<DefineComponent>('./Pages/SSR/**/*.vue', { eager: true })
     return pages[`./Pages/${name}.vue`]
diff --git a/packages/vue3/test-app/ssr.ts b/packages/vue3/test-app/ssr.ts
index 12d683038..2170ec4bf 100644
--- a/packages/vue3/test-app/ssr.ts
+++ b/packages/vue3/test-app/ssr.ts
@@ -2,11 +2,21 @@ import { createInertiaApp } from '@inertiajs/vue3'
 import createServer from '@inertiajs/vue3/server'
 import { createSSRApp, h, type DefineComponent } from 'vue'
 import { renderToString } from 'vue/server-renderer'
+import Layer from './Layouts/Layer.vue'
 
 createServer((page) =>
   createInertiaApp({
     page,
     render: renderToString,
+    layer: Layer,
+    loading: (url: string) => {
+      if (!url.startsWith('/ssr/layer-loading-base')) {
+        return undefined
+      }
+
+      const pages = import.meta.glob<DefineComponent>('./Pages/SSR/**/*.vue', { eager: true })
+      return pages['./Pages/SSR/LayerLoading.vue']
+    },
     serverHead: (page) => page.props.head as string[],
     resolve: (name) => {
       const pages = import.meta.glob<DefineComponent>('./Pages/SSR/**/*.vue', { eager: true })
diff --git a/packages/vue3/test-app/types.d.ts b/packages/vue3/test-app/types.d.ts
index 04cb11a58..a037abe85 100644
--- a/packages/vue3/test-app/types.d.ts
+++ b/packages/vue3/test-app/types.d.ts
@@ -1,9 +1,13 @@
-import type { Method, Page, PageProps, Router } from '@inertiajs/core'
+import type { LayerHandle, Method, Page, PageProps, Router } from '@inertiajs/core'
+import { setLayoutProps as adapterSetLayoutProps } from '@inertiajs/vue3'
 
 declare global {
   interface Window {
     testing: {
       Inertia: Router
+      setLayoutProps?: typeof adapterSetLayoutProps
+      childHandle?: LayerHandle
+      layerChildHandle?: LayerHandle
     }
     initialPage: Page
     _inertia_request_dump: {
@@ -26,6 +30,7 @@ declare global {
     _inertia_content_layout_id: string | undefined
     _plugin_global_props: object
     resolverReceivedPage: Page | null
+    loadingResolved: string | undefined
   }
 
   interface ImportMeta {
diff --git a/tests/app/server.js b/tests/app/server.js
index 61725b910..8f1a2217c 100644
--- a/tests/app/server.js
+++ b/tests/app/server.js
@@ -134,6 +134,55 @@ app.get('/ssr/server-head', (req, res) =>
   }),
 )
 
+app.get('/ssr/layer', (req, res) =>
+  inertia.renderSSR(req, res, {
+    component: 'SSR/Layer',
+    props: {},
+    layer: { key: 'ssr-layer', base: '/ssr/layer-base' },
+  }),
+)
+
+// A cold render resolves props.head from the layer, even though it draws over a blank base.
+app.get('/ssr/layer-head', (req, res) =>
+  inertia.renderSSR(req, res, {
+    component: 'SSR/Layer',
+    props: {
+      head: ['<title>Layer Head SSR</title>', '<meta name="description" content="Layer head description">'],
+    },
+    layer: { key: 'ssr-layer-head', base: '/ssr/layer-base' },
+  }),
+)
+
+app.get('/ssr/layer-base', (req, res) =>
+  inertia.renderSSR(req, res, {
+    component: 'SSR/LayerBase',
+    props: {},
+  }),
+)
+
+// The base beneath this is what the SSR entries' `loading` option matches on.
+app.get('/ssr/layer-loading', (req, res) =>
+  inertia.renderSSR(req, res, {
+    component: 'SSR/Layer',
+    props: {},
+    layer: { key: 'ssr-layer-loading', base: '/ssr/layer-loading-base?delay=1500' },
+  }),
+)
+
+app.get('/ssr/layer-loading-base', (req, res) => {
+  const respond = () =>
+    inertia.renderSSR(req, res, {
+      component: 'SSR/LayerBase',
+      props: {},
+    })
+
+  if (req.query.delay) {
+    setTimeout(respond, Number(req.query.delay))
+  } else {
+    respond()
+  }
+})
+
 // SSR auto-transform test routes (uses the Vite plugin SSR transform)
 app.get('/ssr-auto/page1', (req, res) =>
   inertia.renderSSRAuto(req, res, {
@@ -168,6 +217,14 @@ app.get('/ssr-auto/async', (req, res) =>
   }),
 )
 
+app.get('/ssr-auto/layer', (req, res) =>
+  inertia.renderSSRAuto(req, res, {
+    component: 'SSR/Layer',
+    props: {},
+    layer: { key: 'ssr-layer', base: '/ssr/layer-base' },
+  }),
+)
+
 app.get('/ssr/infinite-scroll', (req, res) => {
   const { paginated, scrollProp } = paginateUsers(1, 15, 40)
 
@@ -1095,6 +1152,13 @@ app.get('/prefetch/tags/:pageNumber{/:propType}', (req, res) => {
   })
 })
 
+app.get('/history/non-serializable', (req, res) => {
+  inertia.render(req, res, {
+    component: 'History/NonSerializable',
+    props: {},
+  })
+})
+
 app.get('/history/:pageNumber', (req, res) => {
   inertia.render(req, res, {
     component: 'History/Page',
@@ -1132,6 +1196,458 @@ app.get('/history-quota/:pageNumber', (req, res) => {
   })
 })
 
+// A counter per browser context, not per server: Playwright gives each test its own cookie jar, so
+// a row can assert an absolute count without depending on the rows that ran before it.
+const countFor = (req, res, name) => {
+  const seen = Number((req.headers.cookie || '').match(new RegExp(`${name}=(\\d+)`))?.[1] ?? 0)
+
+  res.cookie(name, String(seen + 1), { path: '/' })
+
+  return seen
+}
+
+app.get('/layers/base', (req, res) => {
+  // `?stale` leaves behind what a failed form post would, so a layer opening over it has something
+  // to wrongly replay. `?delay` holds the response open long enough to close a layer mid-walk. The
+  // settled users scroll prop is what a layer's own infinite scroll must not read instead of its own.
+  const stale = req.query.stale !== undefined
+  const respond = () =>
+    inertia.render(req, res, {
+      component: 'Layers/Base',
+      props: {
+        likes: 0,
+        ...(stale && { errors: { name: 'The name field is required.' } }),
+      },
+      flash: stale ? { message: 'Base flash' } : undefined,
+      scrollProps: {
+        users: { pageName: 'page', currentPage: 1, nextPage: null, previousPage: null, reset: false },
+      },
+    })
+
+  if (req.query.delay) {
+    setTimeout(respond, Number(req.query.delay))
+  } else {
+    respond()
+  }
+})
+
+app.post('/layers/like', (req, res) => {
+  // Slow enough that a test can assert on the optimistic state while the request is still in flight
+  setTimeout(() => inertia.render(req, res, { component: 'Layers/Base', props: { likes: 1 } }), 1000)
+})
+
+// Counts its answers, so a layer-targeted partial has something observable to refresh.
+app.get('/layers/panel/:name', (req, res) => {
+  // `?invalid` is what a failed submit redirects back to; `?delay` holds the response open.
+  const respond = () =>
+    inertia.render(req, res, {
+      component: 'Layers/Panel',
+      props: {
+        name: req.params.name,
+        count: countFor(req, res, 'layers-panel-answers') + 1,
+        ...(req.query.invalid !== undefined && { errors: { note: 'The note field is required.' } }),
+      },
+      layer: { key: `panel:${req.params.name}`, base: '/layers/base' },
+    })
+
+  if (req.query.delay) {
+    setTimeout(respond, Number(req.query.delay))
+  } else {
+    respond()
+  }
+})
+
+// A layer with a deferred group of its own. The follow-up is held open long enough for a test to
+// see the fallback before it resolves.
+app.get('/layers/deferred', (req, res) => {
+  const partial = req.headers['x-inertia-partial-data'] !== undefined
+  const respond = () =>
+    inertia.render(req, res, {
+      component: 'Layers/Deferred',
+      props: {
+        name: 'deferred',
+        ...(partial && { stats: [1, 2, 3] }),
+      },
+      layer: { key: 'deferred-panel', base: '/layers/base' },
+      ...(!partial && { deferredProps: { slow: ['stats'] }, rescuedProps: ['stats'] }),
+    })
+
+  if (partial) {
+    setTimeout(respond, 300)
+  } else {
+    respond()
+  }
+})
+
+app.post('/layers/panel/:name/save', (req, res) => res.redirect(303, `/layers/panel/${req.params.name}?invalid`))
+
+// The same failed save, held open long enough for the optimistic update to be observable.
+app.post('/layers/panel/:name/save-slow', (req, res) =>
+  res.redirect(303, `/layers/panel/${req.params.name}?invalid&delay=500`),
+)
+
+app.post('/layers/panel/:name/next', (req, res) => res.redirect(303, '/layers/panel/second'))
+
+// One key, two urls: the second step rewrites the layer the first opened rather than stacking.
+app.get('/layers/step/:name', (req, res) => {
+  inertia.render(req, res, {
+    component: 'Layers/Panel',
+    props: {
+      name: req.params.name,
+    },
+    layer: { key: 'step', base: '/layers/base' },
+  })
+})
+
+app.get('/layers/slow', (req, res) => {
+  inertia.render(req, res, {
+    component: 'Layers/Slow',
+    props: {},
+    layer: { key: 'slow', base: '/layers/base' },
+  })
+})
+
+app.get('/layers/waypoint/:name', (req, res) => {
+  inertia.render(req, res, {
+    component: 'Layers/Waypoint',
+    props: {
+      name: req.params.name,
+      next: req.params.name === 'a' ? 'b' : 'c',
+    },
+  })
+})
+
+const layersSignedIn = (req) => /layers-auth=1/.test(req.headers.cookie || '')
+
+const layersIntended = (req) => (req.headers.cookie || '').match(/layers-intended=([^;]+)/)
+
+app.get('/layers/settings', (req, res) => {
+  if (!layersSignedIn(req)) {
+    // The session expired mid-click, so the layer the user asked for is remembered and signing
+    // back in returns them to it.
+    res.cookie('layers-intended', req.originalUrl, { path: '/' })
+
+    return res.redirect(302, '/layers/login')
+  }
+
+  inertia.render(req, res, {
+    component: 'Layers/Settings',
+    props: {},
+    layer: { key: 'settings', base: '/layers/base' },
+  })
+})
+
+app.get('/layers/login', (req, res) => inertia.render(req, res, { component: 'Layers/Login', props: {} }))
+
+// The detour fixtures: the guarded route redirects to a marked prompt until the complete POST
+// confirms it, so the open lands on the prompt and the return trip re-composes over the base.
+// `?mark` renders the layer response carrying the mark too, which is the malformed case.
+const layersGuardedConfirmed = (req) => /layers-confirmed=1/.test(req.headers.cookie || '')
+
+app.get('/layers/guarded', (req, res) => {
+  if (!layersGuardedConfirmed(req)) {
+    return res.redirect(302, '/layers/prompt')
+  }
+
+  inertia.render(req, res, {
+    component: 'Layers/Guarded',
+    // A prop the layer component does not declare, so a fallthrough attribute would show up on it.
+    props: { note: 'guarded' },
+    layer: { key: 'guarded', base: '/layers/base' },
+    ...(req.query.mark ? { interstitial: true } : {}),
+  })
+})
+
+app.get('/layers/prompt', (req, res) =>
+  inertia.render(req, res, { component: 'Layers/Prompt', props: {}, interstitial: true }),
+)
+
+app.post('/layers/prompt/complete', (req, res) => {
+  res.cookie('layers-confirmed', '1', { path: '/' })
+
+  res.redirect(303, '/layers/guarded')
+})
+
+// The layer opens cold over the headed base, so the walk brings the base's <Head> in after the
+// layer's own and the head rows can watch which title survives.
+app.get('/layers/headed', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Headed',
+    props: { suffix: 'Layered' },
+    layer: { key: 'headed', base: '/layers/headed-base' },
+  }),
+)
+
+app.get('/layers/headed-base', (req, res) => inertia.render(req, res, { component: 'Layers/HeadedBase', props: {} }))
+
+// Each page carries its own [scroll-region], and the layer opens cold over the base, so a row can
+// scroll the layer's during the cold window and watch the walk restore each tier its own.
+app.get('/layers/scroll-base', (req, res) => inertia.render(req, res, { component: 'Layers/ScrollBase', props: {} }))
+
+app.get('/layers/scroll', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/ScrollLayer',
+    props: {},
+    layer: { key: 'scroll', base: '/layers/scroll-base' },
+  }),
+)
+
+// The layer's own infinite scroll, merged into the open layer on the carried-layerId reload. The
+// base's settled users scroll prop sits untouched on the composite.
+app.get('/layers/infinite', (req, res) => {
+  const page = req.query.page ? parseInt(req.query.page) : 1
+  const { paginated, scrollProp } = paginateUsers(page, 15, 40)
+
+  inertia.render(req, res, {
+    component: 'Layers/Infinite',
+    props: { users: paginated },
+    mergeProps: ['users.data'],
+    scrollProps: { users: scrollProp },
+    layer: { key: 'infinite', base: '/layers/base' },
+  })
+})
+
+app.post('/layers/login', (req, res) => {
+  const intended = layersIntended(req)
+
+  res.cookie('layers-auth', '1', { path: '/' })
+
+  res.redirect(303, intended ? decodeURIComponent(intended[1]) : '/layers/base')
+})
+
+// A chain two deep: opening the outer url cold walks through both, in three requests.
+app.get('/layers/chain/outer', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/ChainOuter',
+    props: {},
+    layer: { key: 'chain-outer', base: '/layers/chain/inner' },
+  }),
+)
+
+app.get('/layers/chain/inner', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/ChainInner',
+    props: {},
+    layer: { key: 'chain-inner', base: '/layers/base' },
+  }),
+)
+
+// A chain three deep: the walk inserts the middle and bottom layers beneath dialogs already open.
+app.get('/layers/chain/top', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/ChainOuter',
+    props: {},
+    layer: { key: 'chain-top', base: '/layers/chain/middle' },
+  }),
+)
+
+app.get('/layers/chain/middle', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/ChainInner',
+    props: {},
+    layer: { key: 'chain-middle', base: '/layers/chain/inner' },
+  }),
+)
+
+// The base answers the walk with a server error, so the walk lands on the layer it reached deepest
+// instead of painting the error overlay over it.
+app.get('/layers/cold-fail', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Panel',
+    props: { name: 'fail' },
+    layer: { key: 'fail', base: '/layers/fail-hop' },
+  }),
+)
+
+app.get('/layers/fail-hop', (req, res) => {
+  res.header('Vary', 'Accept')
+  res.header('X-Inertia', true)
+  return res.status(500).json({
+    component: 'ErrorPage',
+    props: { status: 500 },
+    url: req.originalUrl,
+    version: null,
+  })
+})
+
+// The walk's first hop 500s; the recovery visit the landing makes is answered with the base page.
+app.get('/layers/fail-once', (req, res) => {
+  if (countFor(req, res, 'layers-fail-once-answered') === 0) {
+    res.header('Vary', 'Accept')
+    res.header('X-Inertia', true)
+    return res.status(500).json({
+      component: 'ErrorPage',
+      props: { status: 500 },
+      url: req.originalUrl,
+      version: null,
+    })
+  }
+
+  return inertia.render(req, res, {
+    component: 'Layers/Base',
+    props: { likes: 0 },
+  })
+})
+
+app.get('/layers/fail-recover', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Panel',
+    props: { name: 'fail' },
+    layer: { key: 'fail-recover', base: '/layers/fail-once' },
+  }),
+)
+
+// The declared base is held open long enough to close the layer while its walk is still out.
+app.get('/layers/slow-base-panel', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Panel',
+    props: { name: 'slow' },
+    layer: { key: 'slow-base-panel', base: '/layers/base?delay=1500' },
+  }),
+)
+
+// `likes` counts every answer, so a reload, or a close's refresh, is visibly not the same page.
+app.get('/layers/counted/base', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Base',
+    props: { likes: countFor(req, res, 'layers-counted-base-answers') },
+  }),
+)
+
+// Counts its answers too, and drops a prop it rendered on the open whenever the request carries
+// partial headers, so the layer merge keeps the dropped prop as the deliberate ghost.
+app.get('/layers/counted/panel', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Panel',
+    props: {
+      name: 'counted',
+      count: countFor(req, res, 'layers-counted-panel-answers') + 1,
+      ...(!req.headers['x-inertia-partial-data'] && { tag: 'first' }),
+    },
+    layer: { key: 'counted-panel', base: '/layers/counted/base' },
+  }),
+)
+
+// A layer the base opens through a handle, which the base's handle hears events from.
+app.get('/layers/child', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Child',
+    props: {},
+    layer: { key: 'child', base: '/layers/base' },
+  }),
+)
+
+// Stages a flash in a cookie, standing in for the session flash Laravel keeps for the refresh the
+// client runs after a close. The route below emits it exactly once.
+app.post('/layers/close', (req, res) => {
+  res.cookie('layers-close-flash', 'Saved from the panel', { path: '/' })
+
+  inertia.render(req, res, { close: true })
+})
+
+app.get('/layers/close-flash/base', (req, res) => {
+  const staged = (req.headers.cookie || '').match(/layers-close-flash=([^;]+)/)
+
+  if (staged) {
+    res.clearCookie('layers-close-flash', { path: '/' })
+  }
+
+  inertia.render(req, res, {
+    component: 'Layers/Base',
+    props: { likes: countFor(req, res, 'layers-close-base-answers') },
+    ...(staged && { flash: { message: decodeURIComponent(staged[1]) } }),
+  })
+})
+
+// A layer with no base is not a layer at all cold: its url renders as the page it would be.
+app.get('/layers/promote-cold', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Panel',
+    props: { name: 'promote' },
+    layer: { key: 'promote' },
+  }),
+)
+
+// The bases beneath these are what the test apps' `loading` option matches on.
+app.get('/layers/loading/base', (req, res) => {
+  const respond = () => inertia.render(req, res, { component: 'Layers/Base', props: { likes: 0 } })
+
+  if (req.query.delay) {
+    setTimeout(respond, Number(req.query.delay))
+  } else {
+    respond()
+  }
+})
+
+app.get('/layers/loading/panel', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Panel',
+    props: { name: 'loading' },
+    layer: { key: 'loading-panel', base: '/layers/loading/base?delay=1500' },
+  }),
+)
+
+app.get('/layers/loading/slow-import', (req, res) =>
+  inertia.render(req, res, { component: 'Layers/SlowImport', props: {} }),
+)
+
+app.get('/layers/loading/slow-import/panel', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Panel',
+    props: { name: 'slow-import' },
+    layer: { key: 'loading-slow-import', base: '/layers/loading/slow-import' },
+  }),
+)
+
+app.get('/layers/loading/chain/outer', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/ChainOuter',
+    props: {},
+    layer: { key: 'loading-chain-outer', base: '/layers/loading/chain/inner' },
+  }),
+)
+
+app.get('/layers/loading/chain/inner', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/ChainInner',
+    props: {},
+    layer: { key: 'loading-chain-inner', base: '/layers/loading/base?delay=1500' },
+  }),
+)
+
+// A page whose module scope calls usePage(), which must not throw outside component init.
+app.get('/layers/module-scope', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/ModuleScope',
+    props: {},
+  }),
+)
+
+// A hop that does not carry the version is one whose layer response never seeded the walk.
+app.get('/layers/version/outer', (req, res) =>
+  inertia.render(req, res, {
+    component: 'Layers/Panel',
+    props: { name: 'version' },
+    layer: { key: 'version', base: '/layers/version-guard' },
+    version: 'v1',
+  }),
+)
+
+app.get('/layers/version-guard', (req, res) => {
+  if (req.get('X-Inertia-Version') === 'v1') {
+    return inertia.render(req, res, {
+      component: 'Layers/Base',
+      props: { likes: 0 },
+    })
+  }
+
+  // The version mismatch Laravel's middleware answers with: the hop is a background visit, so the
+  // client lands the walk rather than reloading, and the base the layer declared never arrives.
+  res.header('X-Inertia-Location', req.originalUrl)
+  res.header('X-Inertia-Version', 'v1')
+  return res.status(409).send('')
+})
+
 app.get('/when-visible', (req, res) => {
   const page = () =>
     inertia.render(req, res, {
diff --git a/tests/history.spec.ts b/tests/history.spec.ts
index 7ef60e783..baa5ca081 100644
--- a/tests/history.spec.ts
+++ b/tests/history.spec.ts
@@ -174,6 +174,26 @@ test('it handles bfcache restoration after history is cleared', async ({ page })
   expect(requests.requests.length).toBeGreaterThan(0)
 })
 
+test('a non-serializable prop does not break the visit or block the history queue', async ({ page }) => {
+  await page.goto('/history/non-serializable')
+
+  await page.getByRole('button', { name: 'Push a function prop' }).click()
+
+  await expect(page).toHaveURL('/history/non-serializable/target')
+  await expect(page.getByText('Target page')).toBeVisible()
+
+  // The function is dropped from history state, the rest of the props are kept
+  const historyState = await page.evaluate(() => window.history.state)
+  await expect(historyState.page.props.message).toBe('Target page')
+  await expect(historyState.page.props.onAction).toBeUndefined()
+
+  // The client visit queue must still process visits after the function prop was dropped
+  await page.getByRole('button', { name: 'Client visit' }).click()
+
+  await expect(page).toHaveURL('/history/non-serializable/landed')
+  await expect(page.getByText('Client visit landed')).toBeVisible()
+})
+
 test('will pull from server if history version is different than current version when pressing back', async ({
   page,
 }) => {
diff --git a/tests/layers.spec.ts b/tests/layers.spec.ts
new file mode 100644
index 000000000..6713963e1
--- /dev/null
+++ b/tests/layers.spec.ts
@@ -0,0 +1,2209 @@
+import { expect, test } from '@playwright/test'
+import { clickAndWaitForResponse, requests, scrollElementTo } from './support'
+
+declare const process: { env: { PACKAGE?: string } }
+
+test('a layer response renders over the page already displayed', async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#layer-count')).toHaveText('0')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#layer-count')).toHaveText('1')
+})
+
+test("usePage() inside a layer reads the layer's own page, not the page beneath it", async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+
+  await expect(page.locator('[data-layer-index="0"] [data-testid="layer-use-page"]')).toHaveText(
+    'first|/layers/panel/first|Layers/Panel',
+  )
+})
+
+test('usePage() at module scope falls back to the global page without throwing', async ({ page }) => {
+  // Svelte 5's getContext throws outside component init, so the accessor guards the read. The
+  // module block runs before the app mounts, so the store it falls back to is still empty.
+  test.skip(process.env.PACKAGE !== 'svelte', 'Svelte-only: module-scope usePage guard')
+
+  await page.goto('/layers/module-scope')
+
+  await expect(page.getByText('Module scope page')).toBeVisible()
+  await expect(page.locator('[data-testid="module-scope-page"]')).toHaveText('Layers/ModuleScope|/layers/module-scope')
+  await expect(page.evaluate(() => window.moduleScopePageUrl)).resolves.toBe('')
+})
+
+test('usePage() at module scope on vue3 falls back without a console warning', async ({ page }) => {
+  // Vue's inject() warns outside a setup() context, so the accessor guards the read with
+  // hasInjectionContext(). The module block runs before the app mounts, so the ref is still empty.
+  test.skip(process.env.PACKAGE !== 'vue3', 'Vue-only: module-scope usePage inject guard')
+
+  const warnings: string[] = []
+  page.on('console', (msg) => {
+    if (msg.type() === 'warning' || msg.type() === 'error') warnings.push(msg.text())
+  })
+
+  await page.goto('/layers/module-scope')
+
+  await expect(page.getByText('Module scope page')).toBeVisible()
+  await expect(page.locator('[data-testid="module-scope-page"]')).toHaveText('Layers/ModuleScope|/layers/module-scope')
+  await expect(page.evaluate(() => window.moduleScopePageUrl)).resolves.toBeUndefined()
+  expect(warnings.filter((w) => w.includes('inject() can only be used inside setup'))).toEqual([])
+})
+
+test('the page beneath a layer keeps its state', async ({ page }) => {
+  await page.goto('/layers/base')
+  await page.locator('#note').fill('typed before the layer opened')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await expect(page.locator('#note')).toHaveValue('typed before the layer opened')
+})
+
+test('layers stack, and two of the same component stay separate instances', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"] .panel-note').fill('typed in the first panel')
+
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open next panel' }).click()
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.getByText('Panel layer: second')).toBeVisible()
+
+  await expect(page.locator('[data-layer-index="0"]')).toHaveAttribute('data-layer-top', 'false')
+  await expect(page.locator('[data-layer-index="1"]')).toHaveAttribute('data-layer-top', 'true')
+
+  await expect(page.locator('[data-layer-index="0"] .panel-note')).toHaveValue('typed in the first panel')
+  await expect(page.locator('[data-layer-index="1"] .panel-note')).toHaveValue('')
+})
+
+test('a layer opening does not replay the flash and errors of the page beneath', async ({ page }) => {
+  await page.goto('/layers/base?stale')
+  await expect(page.locator('#page-error')).toHaveText('The name field is required.')
+
+  await clickAndWaitForResponse(page, 'Open panel with callbacks', '/layers/panel/first', 'button')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await expect(page.locator('#visit-events')).toHaveText('success')
+  await expect(page.locator('#page-error')).toHaveText('The name field is required.')
+})
+
+test('a form submitted inside a layer lands its errors on the layer, not the page beneath', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Submit panel form', exact: true }).click()
+
+  await expect(page.locator('.panel-form-error')).toHaveText('The note field is required.')
+  await expect(page.locator('#page-error')).toHaveCount(0)
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+})
+
+test("a form's optimistic update inside a layer applies to the layer's own props", async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  // The route counts its answers per browser context, so this is the first one this test has had.
+  await expect(page.locator('[data-testid="panel-count"]')).toHaveText('1')
+
+  // 99 is a value the route never answers with, so it can only have come from the callback.
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Submit panel form optimistically' }).click()
+
+  await expect(page.locator('[data-testid="panel-count"]')).toHaveText('99')
+})
+
+test('an optimistic update leaves an open stack standing', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  // The base is inert under the layer's dialog, so the post is issued through the router.
+  await page.evaluate(() =>
+    window.testing.Inertia.optimistic((props: { likes: number }) => ({ likes: props.likes + 1 })).post('/layers/like'),
+  )
+
+  await expect(page.locator('#likes')).toHaveText('1')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+})
+
+test('a client visit that installs another page leaves an open stack behind', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.locator('#layer-count')).toHaveText('1')
+
+  // The base is inert under the layer's dialog, so the visit is issued through the router.
+  await page.evaluate(() =>
+    window.testing.Inertia.push({
+      url: '/layers/panel/client',
+      component: 'Layers/Panel',
+      props: { name: 'from a client visit' },
+    }),
+  )
+
+  await expect(page.getByText('Panel layer: from a client visit')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeHidden()
+  await expect(page.getByText('Panel layer: first')).toBeHidden()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('opening a layer leaves the page beneath scrolled where the user left it', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  // The spacer sits above the content, so scrolling to the bottom leaves the link where it is.
+  await scrollElementTo(
+    page,
+    page.evaluate(() => window.scrollTo(0, document.body.scrollHeight)),
+  )
+  const scrolled = await page.evaluate(() => window.scrollY)
+  expect(scrolled).toBeGreaterThan(0)
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  expect(await page.evaluate(() => window.scrollY)).toBe(scrolled)
+})
+
+test('a layer open superseded before it resolves never appears on screen', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open slow panel', '/layers/slow')
+  await page.waitForTimeout(150)
+  await page.getByRole('button', { name: 'Push panel as a page' }).click()
+
+  await expect(page.getByText('Panel layer: from a client visit')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeHidden()
+
+  // Outlive the resolver delay the superseded layer is still waiting on.
+  await page.waitForTimeout(700)
+
+  await expect(page.getByText('Slow layer')).toBeHidden()
+  await expect(page.getByText('Base page')).toBeHidden()
+})
+
+test('a layer the visit was aimed at opens over the page it was made from', async ({ page }) => {
+  await page.context().addCookies([{ name: 'layers-auth', value: '1', domain: 'localhost', path: '/' }])
+
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open settings', '/layers/settings')
+
+  await expect(page.getByText('Account settings')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#layer-count')).toHaveText('1')
+})
+
+test('a layer returned through a login page opens cold, so the login page is never its backdrop', async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Open settings', '/layers/login')
+  await expect(page.locator('#login-page')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeHidden()
+
+  await clickAndWaitForResponse(page, 'Sign in', '/layers/settings', 'button')
+
+  await expect(page.getByText('Account settings')).toBeVisible()
+  // The failure to watch for is the login page still standing underneath.
+  await expect(page.locator('#login-page')).toBeHidden()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+})
+
+test('a cold layer stands on nothing at all until the walk lands the base beneath it', async ({ page }) => {
+  await page.goto('/layers/base?withDefaultLayout')
+  await expect(page.locator('#default-layout')).toHaveCount(1)
+
+  await clickAndWaitForResponse(page, 'Open settings', '/layers/login')
+  await expect(page.locator('#login-page')).toBeVisible()
+
+  // The hop is held so the cold window can be looked at rather than raced.
+  let landTheBase!: () => void
+  const held = new Promise<void>((resolve) => (landTheBase = resolve))
+  await page.route('**/layers/base', async (route) => {
+    await held
+    await route.continue()
+  })
+
+  const walkHop = page.waitForRequest('**/layers/base')
+  await clickAndWaitForResponse(page, 'Sign in', '/layers/settings', 'button')
+  await expect(page.getByText('Account settings')).toBeVisible()
+  await walkHop
+
+  await expect(page.locator('#login-page')).toBeHidden()
+  await expect(page.getByText('Base page')).toBeHidden()
+  await expect(page.locator('[data-layer-index="0"] #default-layout')).toBeVisible()
+  await expect(page.locator('#default-layout')).toHaveCount(1)
+
+  landTheBase()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#default-layout')).toHaveCount(2)
+  await expect(page.getByText('Account settings')).toBeVisible()
+})
+
+test('a defaultLayout that decides by page.url never matches a layer with no url of its own', async ({ page }) => {
+  await page.goto('/layers/base?withUrlBasedLayout')
+  await expect(page.locator('#admin-layout')).toBeVisible()
+
+  await page.getByRole('button', { name: 'Open local layer' }).click()
+
+  await expect(page.locator('[data-layer-index="0"] #default-layout')).toBeVisible()
+  await expect(page.locator('[data-layer-index="0"] #admin-layout')).toHaveCount(0)
+})
+
+test("a layer's layout reads the layer's own props and its own layout props", async ({ page }) => {
+  await page.goto('/layers/base?withDefaultLayout')
+  await expect(page.locator('#default-layout')).toHaveCount(1)
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  const layerId = await page.evaluate(() => (window.history.state.page.layers as { id: string }[])[0].id)
+  await page.evaluate((id) => window.testing.setLayoutProps({ layerChrome: 'layer' }, id), layerId)
+
+  await expect(page.locator('[data-layer-index="0"] #layout-name')).toHaveText('first')
+  await expect(page.locator('[data-layer-index="0"] #layer-chrome')).toHaveText('layer')
+  await expect(page.locator('#layout-name').first()).toHaveText('')
+  await expect(page.locator('#layer-chrome').first()).toHaveText('')
+})
+
+test('reopening the same layer keeps its layout props, which hold through the exit', async ({ page }) => {
+  await page.context().addCookies([{ name: 'layers-auth', value: '1', domain: 'localhost', path: '/' }])
+  await page.goto('/layers/base?withDefaultLayout')
+
+  await clickAndWaitForResponse(page, 'Open settings', '/layers/settings')
+  await expect(page.locator('[data-layer-index="0"] #layer-chrome')).toHaveText('layer')
+
+  await clickAndWaitForResponse(page, 'Open settings again', '/layers/settings')
+  await expect(page.locator('[data-layer-index="0"] #layer-chrome')).toHaveText('layer')
+
+  // An exit transition makes the closing window observable.
+  await page.addStyleTag({ content: 'dialog[data-layer-closing="true"] { opacity: 0; transition: opacity 400ms }' })
+  await page.keyboard.press('Escape')
+  await expect(page.locator('[data-layer-index="0"]')).toHaveAttribute('data-layer-closing', 'true')
+  await expect(page.locator('[data-layer-index="0"] #layer-chrome')).toHaveText('layer')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('closing a layer drops its layout props, so a forward restore finds nothing stale', async ({ page }) => {
+  await page.goto('/layers/base?withDefaultLayout')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  const layerId = await page.evaluate(() => (window.history.state.page.layers as { id: string }[])[0].id)
+  await page.evaluate((id) => window.testing.setLayoutProps({ layerChrome: 'layer' }, id), layerId)
+  await expect(page.locator('[data-layer-index="0"] #layer-chrome')).toHaveText('layer')
+
+  await page.keyboard.press('Escape')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+
+  await page.goForward()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.locator('[data-layer-index="0"] #layer-chrome')).toHaveText('')
+})
+
+test('a client visit that rewrites the page beneath a layer still clears what it was showing', async ({ page }) => {
+  await page.context().addCookies([{ name: 'layers-auth', value: '1', domain: 'localhost', path: '/' }])
+  await page.goto('/layers/base?withDefaultLayout')
+  await expect(page.locator('#default-layout')).toHaveCount(1)
+
+  // Set by hand rather than on mount: a remount would re-apply it and hide the reset.
+  await page.getByRole('button', { name: 'Set base chrome' }).click()
+  await expect(page.locator('#base-chrome')).toHaveText('base')
+
+  await clickAndWaitForResponse(page, 'Open settings', '/layers/settings')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await page.evaluate(() =>
+    window.testing.Inertia.replace({ url: '/layers/base?withDefaultLayout', props: { likes: 0 } }),
+  )
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.locator('#base-chrome').first()).toHaveText('')
+})
+
+test('a layer opened cold keeps its title when the page beneath it arrives', async ({ page }) => {
+  test.skip(process.env.PACKAGE === 'svelte', 'Svelte adapter has no Head component')
+
+  // The hop is held so the title can be looked at before and after its ancestry arrives. Firefox
+  // does not fire load while a route is holding a request, so the navigation waits for commit.
+  let landTheBase!: () => void
+  const held = new Promise<void>((resolve) => (landTheBase = resolve))
+  await page.route('**/layers/headed-base', async (route) => {
+    await held
+    await route.continue()
+  })
+
+  await page.goto('/layers/headed', { waitUntil: 'commit' })
+  await expect(page).toHaveTitle('Headed Layer')
+
+  landTheBase()
+  await expect(page.getByText('Headed base page')).toBeVisible()
+  await expect(page).toHaveTitle('Headed Layer')
+})
+
+test("a stack opened cold keeps the top layer's title as the layers beneath it arrive", async ({ page }) => {
+  test.skip(process.env.PACKAGE === 'svelte', 'Svelte adapter has no Head component')
+
+  await page.goto('/layers/chain/outer')
+
+  await expect(page).toHaveTitle('Chain outer')
+  await expect(page.getByText('Chain inner')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+})
+
+test('a title callback that reads page props is applied to the layer title, not the page', async ({ page }) => {
+  test.skip(process.env.PACKAGE === 'svelte', 'Svelte adapter has no Head component')
+
+  // The hop is held so the title can be looked at during the cold window.
+  let landTheBase!: () => void
+  const held = new Promise<void>((resolve) => (landTheBase = resolve))
+  await page.route('**/layers/headed-base', async (route) => {
+    await held
+    await route.continue()
+  })
+
+  await page.goto('/layers/headed?withLayersTitleCallback', { waitUntil: 'commit' })
+  await expect(page).toHaveTitle('Headed Layer | Layered')
+
+  landTheBase()
+  await expect(page.getByText('Headed base page')).toBeVisible()
+  await expect(page).toHaveTitle('Headed Layer | Layered')
+})
+
+test('renders a wrapper carrying the layer id, and none when no layer is open', async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page.locator('[data-layer-id]')).toHaveCount(0)
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  const layerId = await page.evaluate(() => (window.history.state.page.layers as { id: string }[])[0].id)
+
+  await expect(page.locator('[data-layer-id]')).toHaveCount(1)
+  await expect(page.locator(`[data-layer-id="${layerId}"]`)).toHaveCount(1)
+  await expect(page.locator(`[data-layer-id="${layerId}"]`)).toContainText('Panel layer: first')
+})
+
+test('a cold layer scroll region restores its own position, never the base', async ({ page }) => {
+  // The base hop is held so the layer's region can be scrolled while it is the only one on screen.
+  let landTheBase!: () => void
+  const held = new Promise<void>((resolve) => (landTheBase = resolve))
+  await page.route('**/layers/scroll-base', async (route) => {
+    await held
+    await route.continue()
+  })
+
+  await page.goto('/layers/scroll', { waitUntil: 'commit' })
+  await expect(page.locator('#layer-region')).toBeVisible()
+
+  await page.evaluate(() => document.querySelector('#layer-region')?.scrollTo(0, 200))
+  await page.waitForTimeout(250)
+
+  landTheBase()
+  await expect(page.getByText('Scroll base page')).toBeVisible()
+
+  await expect
+    .poll(() => page.evaluate(() => (document.querySelector('#layer-region') as HTMLElement | null)?.scrollTop))
+    .toBe(200)
+  await expect
+    .poll(() => page.evaluate(() => (document.querySelector('#base-region') as HTMLElement | null)?.scrollTop))
+    .toBe(0)
+})
+
+test("a restore after a layer closes still restores the page's scroll regions", async ({ page }) => {
+  await page.goto('/layers/scroll-base')
+  await expect(page.locator('#base-region')).toBeVisible()
+  await page.evaluate(() => document.querySelector('#base-region')?.scrollTo(0, 100))
+  await page.waitForTimeout(250)
+
+  await page.evaluate(() => window.testing.Inertia.layer({ component: 'Layers/ScrollLayer' }))
+  await expect(page.locator('#layer-region')).toBeVisible()
+  await page.evaluate(() => document.querySelector('#layer-region')?.scrollTo(0, 200))
+  await page.waitForTimeout(250)
+  await page.keyboard.press('Escape')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  // The close's own scroll restore settles first, or it would rewind the next scroll.
+  await page.waitForTimeout(300)
+
+  await page.evaluate(() => document.querySelector('#base-region')?.scrollTo(0, 150))
+  await page.waitForTimeout(250)
+
+  const scrollState = await page.evaluate(() => ({
+    scrollRegions: window.history.state?.scrollRegions,
+    scrollRegionLayers: window.history.state?.scrollRegionLayers,
+  }))
+  expect(scrollState.scrollRegionLayers).toBeUndefined()
+
+  // Wait for the marker before polling the scroll, so the poll never races the navigation's
+  // context teardown.
+  await page.goto('/layers/base')
+  await page.goBack()
+  await expect(page).toHaveURL('/layers/scroll-base')
+  await expect(page.locator('#base-region')).toBeVisible()
+
+  await expect
+    .poll(() => page.evaluate(() => (document.querySelector('#base-region') as HTMLElement | null)?.scrollTop))
+    .toBe(150)
+})
+
+test('an infinite-scroll layer paginates its own scroll props, never the base', async ({ page }) => {
+  await page.goto('/layers/infinite')
+  await expect(page.getByText('Infinite layer')).toBeVisible()
+  await expect(page.getByText('User 1', { exact: true })).toBeVisible()
+  await expect(page.getByText('User 16')).toBeHidden()
+
+  await page.getByRole('button', { name: 'Load next items' }).click()
+
+  await expect(page.getByText('User 16')).toBeVisible()
+  const baseUsersScrollProp = await page.evaluate(
+    () => (window.history.state.page.scrollProps as { users?: { nextPage: number | null } })?.users,
+  )
+  expect(baseUsersScrollProp?.nextPage).toBeNull()
+})
+
+test('a failed submit inside a layer keeps the page it was opened from beneath it', async ({ page }) => {
+  await page.goto('/layers/base')
+  await page.locator('#note').fill('typed before the layer opened')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"] .panel-note').fill('typed in the panel')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Save panel' }).click()
+
+  await expect(page.locator('.panel-error')).toHaveText('The note field is required.')
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#note')).toHaveValue('typed before the layer opened')
+  await expect(page.locator('#layer-count')).toHaveText('1')
+  await expect(page.locator('[data-layer-index="0"] .panel-note')).toHaveValue('typed in the panel')
+})
+
+test('a layer redirected to from inside the stack opens on top of that stack', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open next panel' }).click()
+
+  await expect(page.getByText('Panel layer: second')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#layer-count')).toHaveText('2')
+  await expect(page.locator('[data-layer-index="0"]')).toContainText('Panel layer: first')
+  await expect(page.locator('[data-layer-index="1"]')).toContainText('Panel layer: second')
+})
+
+test('a prefetched layer replayed after an instant visit opens cold, not over the page the visit put up', async ({
+  page,
+}) => {
+  await page.goto('/layers/waypoint/a')
+  await clickAndWaitForResponse(page, 'Prefetch the panel', '/layers/panel/first', 'button')
+
+  await clickAndWaitForResponse(page, 'Go to the next waypoint', '/layers/waypoint/b')
+  await clickAndWaitForResponse(page, 'Go to the next waypoint', '/layers/waypoint/c')
+  await expect(page.locator('#waypoint')).toHaveText('Waypoint c')
+
+  // The instant swap fabricates a page before the prefetched response is replayed, so the base
+  // the visit was dispatched from is two navigations and a swap gone.
+  requests.listen(page)
+  await page.getByRole('button', { exact: true, name: 'Instantly open the panel' }).click()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  expect(requests.requests.filter((request) => request.url().includes('/layers/panel/first'))).toHaveLength(0)
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#waypoint')).toBeHidden()
+})
+
+test('a background reload landing mid-flight leaves the layer composing onto the base it refreshed', async ({
+  page,
+}) => {
+  await page.goto('/layers/base')
+  await page.locator('#note').fill('typed before the layer opened')
+
+  const layerResponse = page.waitForResponse((response) => response.url().includes('/layers/panel/delayed'))
+  await page.getByRole('link', { exact: true, name: 'Open delayed panel' }).click()
+
+  await clickAndWaitForResponse(page, 'Refresh in the background', '/layers/base', 'button')
+  await layerResponse
+
+  await expect(page.getByText('Panel layer: delayed')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#layer-count')).toHaveText('1')
+  await expect(page.locator('#note')).toHaveValue('typed before the layer opened')
+})
+
+test('opening a layer moves the address to the layer, leaving the page beneath one entry back', async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page).toHaveURL('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await expect(page).toHaveURL('/layers/panel/first')
+
+  await page.goBack()
+
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Panel layer: first')).toBeHidden()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page).toHaveURL('/layers/panel/first')
+})
+
+test('forward restores the layer and its address over the page it was opened from', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page).toHaveURL('/layers/panel/first')
+
+  await page.goBack()
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+
+  await page.goForward()
+
+  await expect(page).toHaveURL('/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+})
+
+test('the address of a stack two layers deep is the topmost layer', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page).toHaveURL('/layers/panel/first')
+
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open next panel' }).click()
+  await expect(page.getByText('Panel layer: second')).toBeVisible()
+  await expect(page).toHaveURL('/layers/panel/second')
+
+  await page.goBack()
+  await expect(page).toHaveURL('/layers/panel/first')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Panel layer: second')).toBeHidden()
+
+  await page.goBack()
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('the entry a layer pushes carries the state of the page beneath it', async ({ page }) => {
+  await page.goto('/layers/base')
+  await page.locator('#remembered-note').fill('typed before the layer opened')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await page.goBack()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.locator('#remembered-note')).toHaveValue('typed before the layer opened')
+
+  requests.listen(page)
+  await page.goForward()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await expect(page.locator('#remembered-note')).toHaveValue('typed before the layer opened')
+  expect(requests.requests.filter((request) => request.url().includes('/layers/'))).toHaveLength(0)
+})
+
+test('a layer that opens without moving the address leaves it on the layer beneath', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page).toHaveURL('/layers/panel/first')
+
+  await clickAndWaitForResponse(
+    page,
+    'Open a second panel without moving the address',
+    '/layers/panel/second',
+    'button',
+  )
+  await expect(page.getByText('Panel layer: second')).toBeVisible()
+  await expect(page).toHaveURL('/layers/panel/first')
+
+  // A keystroke on the base is what writes history next. The base is inert under the layer dialogs, and
+  // a Playwright fill on an inert element only sets the value, so the input event is dispatched
+  // by hand.
+  await page.evaluate(() => {
+    const input = document.querySelector('#remembered-note') as HTMLInputElement
+    input.value = 'typed with two layers open'
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+
+  await expect(page).toHaveURL('/layers/panel/first')
+  await expect(page.locator('#layer-count')).toHaveText('2')
+})
+
+test('a layer being closed stays on screen until the shell says it is done', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page).toHaveURL('/layers/panel/first')
+  await expect(page.locator('[data-layer-index="0"]')).toHaveAttribute('data-layer-closing', 'false')
+
+  // An exit transition makes the closing window observable. Nothing is clicked: the shell reports
+  // done itself once the exit finishes.
+  await page.addStyleTag({ content: 'dialog[data-layer-closing="true"] { opacity: 0; transition: opacity 400ms }' })
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index="0"]')).toHaveAttribute('data-layer-closing', 'true')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page).toHaveURL('/layers/panel/first')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+})
+
+test('closing a layer marks the layers above it, and waits for all of them', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open next panel' }).click()
+
+  // The lower layer is inert under the top one's dialog, so the close is issued through the router.
+  // An exit transition makes the closing window observable.
+  await page.addStyleTag({ content: 'dialog[data-layer-closing="true"] { opacity: 0; transition: opacity 400ms }' })
+  const lowerLayerId = await page.evaluate(() => (window.history.state.page.layers as { id: string }[])[0].id)
+  // Not returned: the close resolves once the layers are gone, and the exit is what this asserts.
+  await page.evaluate((id) => void window.testing.Inertia.close(id), lowerLayerId)
+
+  await expect(page.locator('[data-layer-index="0"]')).toHaveAttribute('data-layer-closing', 'true')
+  await expect(page.locator('[data-layer-index="1"]')).toHaveAttribute('data-layer-closing', 'true')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(2)
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/base')
+})
+
+test('closing a layer in the middle of the stack leaves the one beneath it holding its own state', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"] .panel-note').fill('typed in the first panel')
+
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open next panel' }).click()
+  await page.locator('[data-layer-index="1"] .panel-note').fill('typed in the second panel')
+
+  // The panel's next button always lands on the second, and the base link is inert under the
+  // layer dialogs, so the third is opened through the router.
+  const thirdPanelResponse = page.waitForResponse((response) => response.url().includes('/layers/panel/third'))
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/panel/third'))
+  await thirdPanelResponse
+  await page.locator('[data-layer-index="2"] .panel-note').fill('typed in the third panel')
+
+  // The middle layer is inert under the top one's dialog, so the close is issued through the router.
+  const middleLayerId = await page.evaluate(() => (window.history.state.page.layers as { id: string }[])[1].id)
+  await page.evaluate((id) => window.testing.Inertia.close(id), middleLayerId)
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Panel layer: second')).toBeHidden()
+  await expect(page.getByText('Panel layer: third')).toBeHidden()
+
+  await expect(page.locator('[data-layer-index="0"]')).toContainText('Panel layer: first')
+  await expect(page.locator('[data-layer-index="0"] .panel-note')).toHaveValue('typed in the first panel')
+  await expect(page).toHaveURL('/layers/panel/first')
+})
+
+test('the browser back dismisses the top layer, running its exit like any other close', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.locator('[data-layer-index="0"]')).toHaveAttribute('data-layer-closing', 'false')
+
+  // An exit transition makes the closing window observable. The shell reports done once it finishes.
+  await page.addStyleTag({ content: 'dialog[data-layer-closing="true"] { opacity: 0; transition: opacity 400ms }' })
+  await page.goBack()
+
+  await expect(page.locator('[data-layer-index="0"]')).toHaveAttribute('data-layer-closing', 'true')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+})
+
+test('a history jump past the entry beneath drops the stack rather than dismissing it', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child layer' }).click()
+  await expect(page.locator('#layer-count')).toHaveText('2')
+
+  // A long exit makes a dismissal impossible to miss: the stack would still be on screen when the
+  // assertion below runs, rather than gone with the swap.
+  await page.addStyleTag({ content: 'dialog[data-layer-closing="true"] { opacity: 0; transition: opacity 2000ms }' })
+  await page.evaluate(() => window.history.go(-2))
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0, { timeout: 1000 })
+  await expect(page).toHaveURL('/layers/base')
+})
+
+test('closing a layer unwinds the history it pushed, so forward opens it again', async ({ page }) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/base')
+
+  await page.goForward()
+
+  await expect(page).toHaveURL('/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+})
+
+test('closing a layer that never moved the address leaves the history beneath it alone', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await clickAndWaitForResponse(
+    page,
+    'Open a second panel without moving the address',
+    '/layers/panel/second',
+    'button',
+  )
+  await expect(page.locator('#layer-count')).toHaveText('2')
+  await expect(page).toHaveURL('/layers/panel/first')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.locator('[data-layer-index="0"]')).toContainText('Panel layer: first')
+  await expect(page).toHaveURL('/layers/panel/first')
+
+  await page.goBack()
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('a layer whose key is already open is rewritten where it stands rather than replaced', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open step one', '/layers/step/one')
+  await expect(page.getByText('Panel layer: one')).toBeVisible()
+  await page.locator('[data-layer-index="0"] .panel-note').fill('typed in step one')
+
+  const element = await page.locator('[data-layer-index="0"]').elementHandle()
+
+  const stepTwoResponse = page.waitForResponse((response) => response.url().includes('/layers/step/two'))
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/step/two'))
+  await stepTwoResponse
+
+  await expect(page.getByText('Panel layer: two')).toBeVisible()
+  await expect(page).toHaveURL('/layers/step/two')
+  await expect(page.locator('#layer-count')).toHaveText('1')
+
+  expect(await element!.evaluate((node) => node.isConnected)).toBe(true)
+  await expect(page.locator('[data-layer-index="0"] .panel-note')).toHaveValue('')
+})
+
+test("a rewrite that preserves state keeps the layer's component instance", async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open step one', '/layers/step/one')
+  await page.locator('[data-layer-index="0"] .panel-note').fill('typed in step one')
+
+  const stepTwoResponse = page.waitForResponse((response) => response.url().includes('/layers/step/two'))
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/step/two', { preserveState: true }))
+  await stepTwoResponse
+
+  await expect(page.getByText('Panel layer: two')).toBeVisible()
+  await expect(page.locator('[data-layer-index="0"] .panel-note')).toHaveValue('typed in step one')
+})
+
+test('a layer response for an earlier level closes the layers standing above it', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open step one', '/layers/step/one')
+  await clickAndWaitForResponse(page, 'Open child layer', '/layers/child', 'button')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(2)
+  await expect(page).toHaveURL('/layers/child')
+
+  const stepTwoResponse = page.waitForResponse((response) => response.url().includes('/layers/step/two'))
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/step/two'))
+  await stepTwoResponse
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Panel layer: two')).toBeVisible()
+  await expect(page.getByText('Child layer', { exact: true })).toBeHidden()
+  await expect(page).toHaveURL('/layers/step/two')
+
+  // The entries the closed child owned are still in front of the base, so closing what is left has
+  // to step back over them as well as its own.
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/base')
+})
+
+test('closing a layer that walked through several steps unwinds every entry they pushed', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open step one', '/layers/step/one')
+  const stepTwoResponse = page.waitForResponse((response) => response.url().includes('/layers/step/two'))
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/step/two'))
+  await stepTwoResponse
+  await expect(page).toHaveURL('/layers/step/two')
+  await expect(page.locator('#layer-count')).toHaveText('1')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/base')
+
+  await page.goForward()
+
+  await expect(page).toHaveURL('/layers/step/one')
+  await expect(page.getByText('Panel layer: one')).toBeVisible()
+})
+
+test('a close abandoned by a landing response puts an already-exited layer back on screen', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open next panel' }).click()
+  await expect(page.getByText('Panel layer: second')).toBeVisible()
+
+  // The top layer's exit outruns the bottom's, so its dialog has closed by the time the response
+  // lands, remakes the bottom layer, and abandons the close.
+  await page.addStyleTag({
+    content: `
+      @keyframes layer-exit { to { opacity: 0.99 } }
+      dialog[data-layer-closing="true"] { animation: layer-exit 3000ms; }
+      dialog[data-layer-index="1"][data-layer-closing="true"] { animation-duration: 100ms; }
+    `,
+  })
+
+  const bottomId = await page.locator('[data-layer-index="0"] [data-layer-id]').getAttribute('data-layer-id')
+
+  await page.evaluate((id) => {
+    window.testing.Inertia.visit('/layers/panel/first?delay=600', {
+      only: ['count'],
+      preserveState: false,
+      async: true,
+    })
+    window.testing.Inertia.close(id!)
+  }, bottomId)
+
+  await expect(page.locator('[data-layer-index="0"] [data-testid="panel-count"]')).toHaveText('3')
+  await expect(page.getByText('Panel layer: second')).toBeVisible()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.locator('#layer-count')).toHaveText('2')
+})
+
+// The cold rows below hard-load a layer's url. Everything above opened warm, over a base on screen.
+
+test('a layer url opened cold renders the layer and the base the walk fetches beneath it', async ({ page }) => {
+  await page.goto('/layers/panel/first')
+
+  await expect(page).toHaveURL('/layers/panel/first')
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.locator('#layer-count')).toHaveText('1')
+  await expect(page).toHaveURL('/layers/panel/first')
+})
+
+test('a two-deep cold open resolves top down and keeps the address on the top layer', async ({ page }) => {
+  requests.listen(page)
+  await page.goto('/layers/chain/outer')
+
+  await expect(page).toHaveURL('/layers/chain/outer')
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Chain inner')).toBeVisible()
+  await expect(page.getByText('Chain outer')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(2)
+  await expect(page.locator('[data-layer-index="0"]')).toContainText('Chain inner')
+  await expect(page.locator('[data-layer-index="1"]')).toContainText('Chain outer')
+  await expect(page.locator('[data-layer-index="1"]')).toHaveAttribute('data-layer-top', 'true')
+  await expect(page).toHaveURL('/layers/chain/outer')
+
+  const layerRequests = requests.requests.filter((request) => request.url().includes('/layers/'))
+  expect(layerRequests.map((request) => new URL(request.url()).pathname)).toEqual([
+    '/layers/chain/outer',
+    '/layers/chain/inner',
+    '/layers/base',
+  ])
+})
+
+test('a cold chain closes one layer at a time, each close leaving the rest where it is', async ({ page }) => {
+  await page.goto('/layers/chain/outer')
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Chain inner')).toBeVisible()
+  await expect(page.getByText('Chain outer')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(2)
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.locator('[data-layer-index="0"]')).toContainText('Chain inner')
+  await expect(page).toHaveURL('/layers/chain/inner')
+  await expect(page.getByText('Chain outer')).toBeHidden()
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Chain inner')).toBeHidden()
+  await expect(page).toHaveURL('/layers/base')
+})
+
+test('a three-deep cold chain stacks its dialogs in layer order, so Escape closes only the top', async ({ page }) => {
+  await page.goto('/layers/chain/top')
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(3)
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(2)
+  await expect(page).toHaveURL('/layers/chain/middle')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page).toHaveURL('/layers/chain/inner')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/base')
+})
+
+test('closing a cold layer pushes the base beneath it as a step of its own', async ({ page }) => {
+  // The entry beneath the cold open stands for wherever the user was before the shared link.
+  await page.goto('/')
+  await page.goto('/layers/panel/first')
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#layer-count')).toHaveText('1')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await page.goBack()
+  await expect(page).toHaveURL('/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await page.goBack()
+  await expect(page).toHaveURL('/')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.getByText('Panel layer: first')).toBeHidden()
+})
+
+test('the hash a cold layer url arrived with survives the walk and a close', async ({ page }) => {
+  await page.goto('/layers/panel/first#something')
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page).toHaveURL('/layers/panel/first#something')
+
+  expect(await page.evaluate(() => window.history.state.page.layers[0].url)).toContain('#something')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/base')
+
+  await page.goBack()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page).toHaveURL('/layers/panel/first#something')
+})
+
+test('a server error fetching the base leaves the layer on screen, without the error overlay', async ({ page }) => {
+  await page.goto('/layers/cold-fail')
+
+  // The overlay must never paint over the very layer whose base failed to load.
+  await expect(page.getByText('Panel layer: fail')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.locator('dialog#inertia-error-dialog')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/cold-fail')
+})
+
+test('a cold layer closed while its base fails re-requests the base and replaces the blank', async ({ page }) => {
+  // The entry beneath the cold open stands for wherever the user was before the shared link.
+  await page.goto('/')
+
+  // The hop is held so the layer can be closed while it is still out.
+  let releaseTheHop!: () => void
+  const held = new Promise<void>((resolve) => (releaseTheHop = resolve))
+  let hopRequests = 0
+  await page.route('**/layers/fail-once', async (route) => {
+    if (hopRequests++ === 0) {
+      await held
+    }
+    await route.continue()
+  })
+
+  await page.goto('/layers/fail-recover', { waitUntil: 'commit' })
+
+  await expect(page.getByText('Panel layer: fail')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.getByText('Base page')).toBeHidden()
+  await expect(page).toHaveURL('/layers/fail-once')
+  const entriesAfterClose = await page.evaluate(() => window.history.length)
+
+  releaseTheHop()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/fail-once')
+  expect(await page.evaluate(() => window.history.length)).toBe(entriesAfterClose)
+
+  await page.goBack()
+  await expect(page.getByText('Panel layer: fail')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/fail-recover')
+
+  await page.goBack()
+  await expect(page).toHaveURL('/')
+  await expect(page.getByText('Panel layer: fail')).toBeHidden()
+})
+
+test('a cold layer closed while its base is slow restores to the base, never a blank', async ({ page }) => {
+  await page.goto('/')
+  // The base beneath it takes 1.5s, and Firefox does not fire load until the walk that fetches it
+  // has come back, which is the window this row is about.
+  await page.goto('/layers/slow-base-panel', { waitUntil: 'commit' })
+
+  await expect(page.getByText('Panel layer: slow')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.getByText('Base page')).toBeHidden()
+  await expect(page).toHaveURL('/layers/base?delay=1500')
+
+  await page.goBack()
+  await expect(page.getByText('Panel layer: slow')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+
+  await page.goForward()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+
+  await page.goBack()
+  await expect(page.getByText('Panel layer: slow')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await page.goBack()
+  await expect(page).toHaveURL('/')
+})
+
+test('a layer that declares no base at all opened cold renders as a page', async ({ page }) => {
+  requests.listen(page)
+  await page.goto('/layers/promote-cold')
+
+  await expect(page.getByText('Panel layer: promote')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  expect(
+    requests.requests.filter(
+      (request) => request.url().includes('/layers/') && !request.url().includes('/layers/promote-cold'),
+    ),
+  ).toHaveLength(0)
+
+  const entry = await page.evaluate(() => window.history.state.page)
+  expect(entry.layer).toBeUndefined()
+})
+
+test('a cold open fetches the base with the version the layer arrived on', async ({ page }) => {
+  await page.goto('/layers/version/outer')
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Panel layer: version')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+})
+
+test('keeps a layer open across a partial reload of the base beneath it', async ({ page }) => {
+  await page.goto('/layers/counted/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  // The layer opens with the address left on the base, so a reload re-asks for the base.
+  await clickAndWaitForResponse(page, 'Open panel without moving the address', '/layers/counted/panel', 'button')
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page).toHaveURL('/layers/counted/base')
+
+  const likesBefore = await page.locator('#likes').textContent()
+
+  // The base is inert under the layer's dialog, so the reload is issued through the router.
+  const partialResponse = page.waitForResponse((response) => response.url().includes('/layers/counted/base'))
+  await page.evaluate(() => window.testing.Inertia.reload({ only: ['likes'] }))
+  await partialResponse
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page.locator('#likes')).not.toHaveText(likesBefore ?? '')
+  await expect(page).toHaveURL('/layers/counted/base')
+})
+
+test('a layer-targeted partial names the layer in the header and merges into it, keeping a dropped prop', async ({
+  page,
+}) => {
+  await page.goto('/layers/counted/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Open counted panel', '/layers/counted/panel')
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page).toHaveURL('/layers/counted/panel')
+
+  const countBefore = await page.locator('[data-layer-index="0"] [data-testid="panel-count"]').textContent()
+  const likesBefore = await page.locator('#likes').textContent()
+
+  const responsePromise = page.waitForResponse((response) => response.url().includes('/layers/counted/panel'))
+  const requestPromise = page.waitForRequest((request) => request.url().includes('/layers/counted/panel'))
+  await page.getByRole('button', { exact: true, name: 'Partial reload panel' }).click()
+  const [request] = await Promise.all([requestPromise, responsePromise])
+  expect(request.headers()['x-inertia-partial-component']).toBe('Layers/Panel')
+
+  await expect(page.locator('[data-layer-index="0"] [data-testid="panel-count"]')).not.toHaveText(countBefore ?? '')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page.locator('#likes')).toHaveText(likesBefore ?? '')
+  const props = await page.evaluate(
+    () => (window.history.state.page.layers as { props: Record<string, unknown> }[])[0].props,
+  )
+  expect(props).toMatchObject({ name: 'counted', tag: 'first' })
+})
+
+test('a request made through the layer router targets the layer', async ({ page }) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  const countBefore = await page.locator('[data-layer-index="0"] [data-testid="panel-count"]').textContent()
+  const likesBefore = await page.locator('#likes').textContent()
+
+  const requestPromise = page.waitForRequest((request) => request.url().includes('/layers/panel/first'))
+  const responsePromise = page.waitForResponse((response) => response.url().includes('/layers/panel/first'))
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Partial through the layer router' }).click()
+  const [request] = await Promise.all([requestPromise, responsePromise])
+
+  expect(request.headers()['x-inertia-partial-component']).toBe('Layers/Panel')
+  await expect(page.locator('[data-layer-index="0"] [data-testid="panel-count"]')).not.toHaveText(countBefore ?? '')
+  await expect(page.locator('#likes')).toHaveText(likesBefore ?? '')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+})
+
+test('a bare reload from inside a layer refreshes the base beneath the stack', async ({ page }) => {
+  await page.goto('/layers/counted/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Open counted panel', '/layers/counted/panel')
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page).toHaveURL('/layers/counted/panel')
+
+  const likesBefore = await page.locator('#likes').textContent()
+
+  await clickAndWaitForResponse(page, 'Reload base beneath', '/layers/counted/base', 'button')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page.locator('#likes')).not.toHaveText(likesBefore ?? '')
+})
+
+test("a layer's replaceProp changes the layer's props, not the base's", async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  const countBefore = await page.locator('[data-layer-index="0"] [data-testid="panel-count"]').textContent()
+
+  await page.getByRole('button', { exact: true, name: 'Layer replaceProp' }).click()
+
+  await expect(page.locator('[data-layer-index="0"] [data-testid="panel-count"]')).toHaveText(
+    String(Number(countBefore ?? 0) + 1),
+  )
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.locator('#likes')).toHaveText('0')
+  const props = await page.evaluate(
+    () => (window.history.state.page.layers as { props: Record<string, unknown> }[])[0].props,
+  )
+  expect(props).toMatchObject({ name: 'first' })
+  const baseProps = await page.evaluate(() => window.history.state.page.props as Record<string, unknown>)
+  expect(baseProps).toEqual({ likes: 0 })
+})
+
+test("a remembered input inside a layer writes to the layer's bag, not the base's", async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await page.locator('[data-layer-index="0"] .layer-remembered').fill('typed in the layer')
+
+  const layerId = await page.evaluate(() => (window.history.state.page.layers as { id: string }[])[0].id)
+
+  // Vue and Svelte store the whole form state under the remember key; React keys its data and
+  // errors separately under `${key}:data`.
+  await expect
+    .poll(() =>
+      page.evaluate((id) => {
+        const restore = (
+          window.testing as { Inertia: { restore: (key: string, layerId?: string) => unknown } }
+        ).Inertia.restore.bind((window.testing as { Inertia: unknown }).Inertia)
+        const state = restore('note', id) as { data?: { note?: string } } | undefined
+        const data = restore('note:data', id) as { note?: string } | undefined
+
+        return state?.data?.note ?? data?.note
+      }, layerId),
+    )
+    .toBe('typed in the layer')
+  await expect
+    .poll(() =>
+      page.evaluate(() => {
+        const restore = (window.testing as { Inertia: { restore: (key: string) => unknown } }).Inertia.restore
+
+        return [restore('note'), restore('note:data')]
+      }),
+    )
+    .toEqual([undefined, undefined])
+})
+
+test("a layer's deferred props load into the layer, not the base", async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Open deferred layer', '/layers/deferred')
+  await expect(page.getByText('Deferred layer: deferred')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.locator('[data-testid="deferred-fallback"]')).toBeVisible()
+
+  await expect(page.locator('[data-testid="deferred-stats"]')).toHaveText('1,2,3')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Deferred layer: deferred')).toBeVisible()
+})
+
+test('a layer opened through a handle opens another, whose events reach the owner handle', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.getByRole('button', { exact: true, name: 'Open handled panel' }).click()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child layer' }).click()
+  await expect(page.getByText('Child layer', { exact: true })).toBeVisible()
+  await expect(page.locator('#layer-count')).toHaveText('2')
+
+  await page.locator('[data-layer-index="1"]').getByRole('button', { name: 'Emit saved' }).click()
+
+  await expect(page.locator('#child-events')).toHaveText('saved 5')
+})
+
+test('a layer emits to its owner and hears its children through its own useLayer()', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.getByRole('button', { exact: true, name: 'Open handled panel' }).click()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child layer' }).click()
+  await expect(page.getByText('Child layer', { exact: true })).toBeVisible()
+
+  await page.locator('[data-layer-index="1"]').getByRole('button', { name: 'Emit saved' }).click()
+
+  await expect(page.locator('#panel-child-events')).toHaveText('saved 5')
+  await expect(page.locator('#child-events')).toHaveText('saved 5')
+})
+
+test('going back to close a child leaves the layer beneath it hearing what it opens next', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.getByRole('button', { exact: true, name: 'Open handled panel' }).click()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child layer' }).click()
+  await expect(page.getByText('Child layer', { exact: true })).toBeVisible()
+
+  await page.goBack()
+
+  await expect(page.locator('#layer-count')).toHaveText('1')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child layer' }).click()
+  await expect(page.getByText('Child layer', { exact: true })).toBeVisible()
+  await page.locator('[data-layer-index="1"]').getByRole('button', { name: 'Emit saved' }).click()
+
+  await expect(page.locator('#panel-child-events')).toHaveText('saved 5')
+})
+
+test('a layer closes itself through its own useLayer()', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.getByRole('button', { exact: true, name: 'Open handled panel' }).click()
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child layer' }).click()
+  await expect(page.locator('#layer-count')).toHaveText('2')
+
+  await page.locator('[data-layer-index="1"]').getByRole('button', { name: 'Close myself' }).click()
+
+  await expect(page.locator('#layer-count')).toHaveText('1')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+})
+
+test("a layer opened through its owner's useLayer() closes itself, leaving its owner standing", async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child through the layer' }).click()
+  await expect(page.locator('#layer-count')).toHaveText('2')
+
+  await page.locator('[data-layer-index="1"]').getByRole('button', { name: 'Close myself' }).click()
+
+  await expect(page.locator('#layer-count')).toHaveText('1')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.getByText('Child layer', { exact: true })).toBeHidden()
+  await expect(page).toHaveURL('/layers/panel/first')
+})
+
+test('the handle layer.layer() returned closes the child, not the layer that opened it', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child through the layer' }).click()
+  await expect(page.locator('#layer-count')).toHaveText('2')
+
+  await page.evaluate(() => void window.testing.layerChildHandle!.close())
+
+  await expect(page.locator('#layer-count')).toHaveText('1')
+  await expect(page.locator('[data-layer-index="0"]')).toContainText('Panel layer: first')
+  await expect(page).toHaveURL('/layers/panel/first')
+})
+
+test('the owner handle closes the child layer it opened', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.getByRole('button', { exact: true, name: 'Open handled panel' }).click()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child layer' }).click()
+  await expect(page.getByText('Child layer', { exact: true })).toBeVisible()
+
+  // An exit transition makes the closing window observable.
+  await page.addStyleTag({ content: 'dialog[data-layer-closing="true"] { opacity: 0; transition: opacity 400ms }' })
+  await page.evaluate(() => void (window as any).testing.childHandle.close())
+  await expect(page.locator('[data-layer-index="1"]')).toHaveAttribute('data-layer-closing', 'true')
+  await expect(page.getByText('Child layer', { exact: true })).toBeVisible()
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Child layer', { exact: true })).toBeHidden()
+  await expect(page.locator('[data-layer-index="0"]')).toContainText('Panel layer: first')
+  await expect(page).toHaveURL('/layers/panel/first')
+})
+
+test('the page beneath keeps its own state when a layer closes', async ({ page }) => {
+  await page.goto('/layers/base')
+  await page.locator('#note').fill('typed on the page')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.locator('#note')).toHaveValue('typed on the page')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.locator('#layer-count')).toHaveText('0')
+  await expect(page.locator('#note')).toHaveValue('typed on the page')
+})
+
+test('the page beneath is left alone when a layer closes out of the middle of a stack', async ({ page }) => {
+  await page.goto('/layers/base')
+  await page.locator('#note').fill('typed on the page')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"] .panel-note').fill('typed in the panel')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child layer' }).click()
+  await expect(page.locator('#layer-count')).toHaveText('2')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('#layer-count')).toHaveText('1')
+  await expect(page.locator('#note')).toHaveValue('typed on the page')
+  await expect(page.locator('[data-layer-index="0"] .panel-note')).toHaveValue('typed in the panel')
+})
+
+test('a plain back onto the same component still remounts it, as it always did', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/counted/base'))
+  await expect(page).toHaveURL('/layers/counted/base')
+  await page.locator('#note').fill('typed on the second page')
+
+  await page.goBack()
+
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.locator('#note')).toHaveValue('')
+})
+
+test('a local layer is a history step: back closes it, forward brings it back', async ({ page }) => {
+  await page.goto('/')
+  await page.goto('/layers/base')
+
+  await page.getByRole('button', { exact: true, name: 'Open local layer' }).click()
+  await expect(page.getByText('Local layer', { exact: true })).toBeVisible()
+  await expect(page.locator('#local-note')).toHaveText('local')
+  await expect(page.locator('#local-errors')).toHaveText('object')
+  await expect(page).toHaveURL('/layers/base')
+
+  await page.goBack()
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page).toHaveURL('/layers/base')
+
+  await page.goForward()
+
+  await expect(page.getByText('Local layer', { exact: true })).toBeVisible()
+  await expect(page.locator('#local-note')).toHaveText('local')
+  await expect(page).toHaveURL('/layers/base')
+})
+
+test('a layer opened without moving the address is a history step too', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel without moving the address', '/layers/counted/panel', 'button')
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page).toHaveURL('/layers/base')
+
+  await page.goBack()
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page).toHaveURL('/layers/base')
+
+  await page.goForward()
+
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page).toHaveURL('/layers/base')
+})
+
+test('closing a layer above one that owns no address leaves it standing', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel without moving the address', '/layers/counted/panel', 'button')
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open child layer' }).click()
+  await expect(page.getByText('Child layer', { exact: true })).toBeVisible()
+  await expect(page.locator('#layer-count')).toHaveText('2')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('#layer-count')).toHaveText('1')
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page).toHaveURL('/layers/base')
+})
+
+test('an instant visit inside a layer renders in the layer, leaving the page beneath standing', async ({ page }) => {
+  await page.goto('/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  requests.listen(page)
+  await page.getByRole('button', { name: 'Instantly open the next panel' }).click()
+
+  // The placeholder is up before the server has answered: the layer is still the only one on the
+  // stack, and the page beneath it was never torn down to make room for it.
+  await expect(page).toHaveURL('/layers/panel/second?delay=500')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await expect(page.getByText('Panel layer: second')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  // Nothing went back for the base, which is what a cold reopen would have had to do.
+  expect(requests.requests.filter((request) => request.url().includes('/layers/base'))).toHaveLength(0)
+})
+
+test('a layer that owns no address still reloads itself, not the page beneath', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel without moving the address', '/layers/counted/panel', 'button')
+  await expect(page.getByTestId('panel-count')).toHaveText('1')
+
+  await clickAndWaitForResponse(page, 'Partial reload panel', '/layers/counted/panel', 'button')
+
+  await expect(page.getByTestId('panel-count')).toHaveText('2')
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page).toHaveURL('/layers/base')
+})
+
+test('a cancelled layer open fires the handle onClose', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  // The panel route holds its response, so the visit can be cancelled while it is still out.
+  await page.getByRole('button', { exact: true, name: 'Open cancelled panel' }).click()
+  await page.evaluate(() => (window as any).testing.Inertia.cancelAll())
+
+  await expect(page.locator('#cancelled-event')).toHaveText('closed')
+})
+
+test('a programmatic close refreshes the base beneath it', async ({ page }) => {
+  await page.goto('/layers/counted/base')
+  await expect(page.locator('#likes')).toHaveText('0')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('#likes')).toHaveText('1')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.getByText('Panel layer: first')).toBeHidden()
+})
+
+test('closing a cold-opened layer refreshes the base the walk fetched beneath it', async ({ page }) => {
+  await page.goto('/')
+  await page.goto('/layers/counted/panel')
+
+  await expect(page.getByText('Panel layer: counted')).toBeVisible()
+  await expect(page.locator('#likes')).toHaveText('0')
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.locator('#likes')).toHaveText('1')
+})
+
+test('a write issued alongside a close still lands when it outlives the unwind', async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page.locator('#likes')).toHaveText('0')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Like and close' }).click()
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page).toHaveURL('/layers/base')
+
+  // The write answers a second after the unwind stepped back over the layer's entry.
+  await expect(page.locator('#likes')).toHaveText('1', { timeout: 5000 })
+})
+
+test('a background request in flight when a layer closes is left to finish', async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page.locator('#likes')).toHaveText('0')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Like in the background and close' }).click()
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.locator('#likes')).toHaveText('1', { timeout: 5000 })
+})
+
+test('a close: true response closes the layer and the refresh brings the staged flash', async ({ page }) => {
+  await page.goto('/layers/close-flash/base')
+  await expect(page.locator('#page-flash')).toHaveText('')
+  const likesBefore = await page.locator('#likes').textContent()
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  // The close route stages a flash in a cookie and answers with `close: true`, which the client
+  // reads off the wire instead of installing.
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Save and close' }).click()
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.getByText('Panel layer: first')).toBeHidden()
+  await expect(page.locator('#likes')).toHaveText(String(Number(likesBefore) + 1))
+  await expect(page.locator('#page-flash')).toHaveText('Saved from the panel')
+})
+
+test('a layer open with viewTransition captures the layer, not the document', async ({ page, browserName }) => {
+  test.skip(browserName === 'firefox', 'Firefox does not support View Transitions API in CI')
+
+  await page.goto('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  // A layer captured as its own boundary gets a ::view-transition-group(inertia-layer-<id>) rather
+  // than being folded into the root. Chromium does not surface that group on the transition's
+  // animations, so it is sampled through getComputedStyle instead.
+  await page.evaluate(() => {
+    const w = window as unknown as { __vtCount: number; __vtGroupWidths: string[] }
+    w.__vtCount = 0
+    w.__vtGroupWidths = []
+    const original = document.startViewTransition.bind(document)
+    document.startViewTransition = (callback) => {
+      w.__vtCount += 1
+      const transition = original(callback)
+      transition.ready.then(async () => {
+        for (let i = 0; i < 20; i++) {
+          const groupName = `inertia-layer-${document.querySelector('[data-layer-id]')!.getAttribute('data-layer-id')}`
+          w.__vtGroupWidths.push(
+            getComputedStyle(document.documentElement, `::view-transition-group(${groupName})`).width,
+          )
+          await new Promise((resolve) => setTimeout(resolve, 20))
+        }
+      })
+      return transition
+    }
+  })
+
+  await clickAndWaitForResponse(page, 'Open panel with view transition', '/layers/panel/first', 'button')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  const layerId = await page.locator('[data-layer-id]').getAttribute('data-layer-id')
+  expect(layerId).toBeTruthy()
+
+  // Without the wrapper's view-transition-name there is no group, and every sample reads `auto`.
+  await expect
+    .poll(() =>
+      page.evaluate(() =>
+        (window as unknown as { __vtGroupWidths: string[] }).__vtGroupWidths.some(
+          (width) => width !== 'auto' && width !== '',
+        ),
+      ),
+    )
+    .toBe(true)
+
+  await expect(page.evaluate(() => (window as unknown as { __vtCount: number }).__vtCount)).resolves.toBe(1)
+})
+
+test('a layer component keeps undeclared props off its root element', async ({ page }) => {
+  test.skip(process.env.PACKAGE !== 'vue3', 'Fallthrough attributes are a Vue concept')
+
+  await page.goto('/layers/base')
+  await page.getByRole('link', { name: 'Open guarded panel' }).click()
+  await page.getByRole('button', { name: 'Complete the prompt' }).click()
+
+  await expect(page.locator('#guarded-layer')).toBeVisible()
+  await expect(page.locator('#guarded-layer')).not.toHaveAttribute('note')
+})
+
+test('a layerless app renders no dialog at all', async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page.locator('dialog')).toHaveCount(0)
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('the layer dialog traps focus: Tab cycles within it, the background is unreachable', async ({ page }) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await expect
+    .poll(() => page.evaluate(() => !!document.activeElement?.closest('dialog[data-layer-index="0"]')))
+    .toBe(true)
+
+  for (let i = 0; i < 6; i++) {
+    await page.keyboard.press('Tab')
+
+    expect(
+      await page.evaluate(() => {
+        const active = document.activeElement
+
+        // WebKit steps through <body> on its way round the cycle, which reaches nothing. What has
+        // to hold is that no control behind the layer is ever focused.
+        return active === document.body || !!active?.closest('dialog[data-layer-index="0"]')
+      }),
+    ).toBe(true)
+    await expect(page.locator('#note')).not.toBeFocused()
+  }
+})
+
+test('closing a layer hands focus back to what opened it', async ({ page }) => {
+  await page.goto('/layers/base')
+  const trigger = page.getByRole('link', { name: 'Open panel', exact: true })
+  await trigger.focus()
+  await page.keyboard.press('Enter')
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+
+  await page.keyboard.press('Escape')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+
+  await expect(trigger).toBeFocused()
+})
+
+test('Escape dismisses the top layer', async ({ page }) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.getByText('Panel layer: first')).toBeHidden()
+  await expect(page.getByText('Base page')).toBeVisible()
+})
+
+test('Escape closes the top layer only; the one beneath stays open and modal', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open next panel' }).click()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(2)
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.getByText('Panel layer: second')).toBeHidden()
+  await expect(page.getByText('Panel layer: first')).toBeVisible()
+  await expect(
+    page.evaluate(() => document.querySelector('dialog[data-layer-index="0"]')?.matches(':modal')),
+  ).resolves.toBe(true)
+})
+
+test('an open layer locks the background scroll, and the lock lifts only when the last one closes', async ({
+  page,
+}) => {
+  await page.goto('/layers/base')
+  await page.evaluate(() => window.scrollTo(0, 300))
+  expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
+
+  // Inertness blocks clicks and focus but not scrolling, so the lock is explicit: the root carries
+  // overflow:hidden while any layer is open, ref-counted across the stack.
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await page.locator('[data-layer-index="0"]').getByRole('button', { name: 'Open next panel' }).click()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(2)
+  await expect(page.evaluate(() => document.documentElement.style.overflow)).resolves.toBe('hidden')
+
+  const before = await page.evaluate(() => window.scrollY)
+  await page.keyboard.press('PageDown')
+  await page.mouse.move(400, 300)
+  await page.mouse.wheel(0, 400)
+  await page.waitForTimeout(100)
+  expect(await page.evaluate(() => window.scrollY)).toBe(before)
+
+  await page.keyboard.press('Escape')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  await expect(page.evaluate(() => document.documentElement.style.overflow)).resolves.toBe('hidden')
+
+  await page.keyboard.press('Escape')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.evaluate(() => document.documentElement.style.overflow)).resolves.toBe('')
+  const afterClose = await page.evaluate(() => window.scrollY)
+  await page.mouse.wheel(0, 400)
+  await page.waitForTimeout(100)
+  expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(afterClose)
+})
+
+test('the layer dialog is modal, has the dialog role, and is named after the layer it renders', async ({ page }) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+
+  await expect(page.getByRole('dialog', { name: 'Layers/Panel' })).toBeVisible()
+  await expect(page.evaluate(() => document.querySelector('dialog')?.matches(':modal'))).resolves.toBe(true)
+})
+
+test('a closing layer stays mounted until its exit completes, then is removed', async ({ page }) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  // A 400ms exit transition makes the closing window observable.
+  await page.addStyleTag({ content: 'dialog[data-layer-closing="true"] { opacity: 0; transition: opacity 400ms }' })
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('dialog[data-layer-closing="true"]')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await page.waitForTimeout(150)
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('a closing layer waits for an exit that animates a panel inside the dialog', async ({ page }) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await page.addStyleTag({
+    content: 'dialog[data-layer-closing="true"] [data-layer-id] { opacity: 0; transition: opacity 400ms }',
+  })
+  await page.keyboard.press('Escape')
+
+  await page.waitForTimeout(150)
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('an exit animation that holds its end state ends the close, rather than the exit timing out', async ({ page }) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  // `forwards` keeps the animation listed once it has ended, which is what any real shell writes.
+  await page.addStyleTag({
+    content: `@keyframes layer-out { to { opacity: 0 } }
+      dialog[data-layer-closing="true"] { animation: layer-out 400ms forwards }`,
+  })
+
+  const started = Date.now()
+  await page.keyboard.press('Escape')
+
+  await page.waitForTimeout(150)
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  expect(Date.now() - started).toBeLessThan(1200)
+})
+
+test('an exit animation on a panel inside the dialog ends the close, rather than the exit timing out', async ({
+  page,
+}) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await page.addStyleTag({
+    content: `@keyframes layer-out { to { opacity: 0 } }
+      dialog[data-layer-closing="true"] [data-layer-id] { animation: layer-out 200ms forwards }`,
+  })
+
+  const started = Date.now()
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  expect(Date.now() - started).toBeLessThan(1000)
+})
+
+test('an endless animation inside the dialog does not hold the exit open', async ({ page }) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await page.addStyleTag({
+    content: `@keyframes layer-spin { to { transform: rotate(360deg) } }
+      @keyframes layer-out { to { opacity: 0 } }
+      dialog [data-layer-id] { animation: layer-spin 600ms linear infinite }
+      dialog[data-layer-closing="true"] { animation: layer-out 200ms forwards }`,
+  })
+
+  const started = Date.now()
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  expect(Date.now() - started).toBeLessThan(1000)
+})
+
+test('with a layer open, a reload shows the progress bar and Escape still closes the layer', async ({ page }) => {
+  await page.goto('/layers/base')
+  await clickAndWaitForResponse(page, 'Open panel', '/layers/panel/first')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  // Hold the base response so the reload's progress bar is observable.
+  let releaseTheBase!: () => void
+  const held = new Promise<void>((resolve) => (releaseTheBase = resolve))
+  await page.route('**/layers/base', async (route) => {
+    await held
+    await route.continue()
+  })
+
+  await page.evaluate(() => {
+    window.testing.Inertia.reload()
+  })
+
+  await expect(page.locator('#nprogress .bar')).toHaveCount(1)
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+  await page.keyboard.press('Escape')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+
+  releaseTheBase()
+})
+
+test('completing an interstitial prompt opens the layer over the page it was requested from', async ({ page }) => {
+  await page.goto('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  requests.listen(page)
+  await page.evaluate(() => {
+    ;(window as any).testing.guardedHandle = (window as any).testing.Inertia.layer('/layers/guarded')
+  })
+  await expect(page.getByText('Sudo prompt')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeHidden()
+
+  await page.getByRole('button', { name: 'Complete the prompt' }).click()
+
+  await expect(page.getByText('Guarded layer')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Sudo prompt')).toBeHidden()
+  expect(await page.evaluate(() => window.history.state.page.component)).toBe('Layers/Base')
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+  expect(requests.requests.filter((request) => request.url().includes('/layers/base'))).toHaveLength(0)
+
+  await page.evaluate(() => window.testing.Inertia.close((window as any).testing.guardedHandle.id))
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('a layer open answered by an ordinary page closes the handle', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.evaluate(() => {
+    const handle = window.testing.Inertia.layer('/layers/settings')
+    handle.onClose(() => {
+      ;(window as any).unmarkedHandleClosed = true
+    })
+  })
+  await expect(page.locator('#login-page')).toBeVisible()
+
+  expect(await page.evaluate(() => (window as any).unmarkedHandleClosed)).toBe(true)
+})
+
+test('a visit made while the prompt is showing still opens the layer over the page beneath it', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.evaluate(() => {
+    ;(window as any).testing.Inertia.layer('/layers/guarded')
+  })
+  await expect(page.getByText('Sudo prompt')).toBeVisible()
+
+  await page.context().addCookies([{ name: 'layers-confirmed', value: '1', domain: 'localhost', path: '/' }])
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/guarded'))
+
+  await expect(page.getByText('Guarded layer')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Sudo prompt')).toBeHidden()
+  expect(await page.evaluate(() => window.history.state.page.component)).toBe('Layers/Base')
+})
+
+test('a second open after the prompt completes uses the page on screen, not the earlier one', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.evaluate(() => {
+    ;(window as any).testing.guardedHandle = (window as any).testing.Inertia.layer('/layers/guarded')
+  })
+  await expect(page.getByText('Sudo prompt')).toBeVisible()
+  await page.getByRole('button', { name: 'Complete the prompt' }).click()
+  await expect(page.getByText('Guarded layer')).toBeVisible()
+
+  await page.evaluate(() => window.testing.Inertia.close((window as any).testing.guardedHandle.id))
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/counted/base'))
+  // Both bases render Layers/Base, so the text is already on screen: the address is what says the
+  // second one has landed, and the layer below has to open over it rather than over the first.
+  await expect(page).toHaveURL('/layers/counted/base')
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/guarded'))
+  await expect(page.getByText('Guarded layer')).toBeVisible()
+  expect(await page.evaluate(() => window.history.state.page.url)).toBe('/layers/counted/base')
+})
+
+test('navigating away from the prompt ends it, so the next open uses the page on screen', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.evaluate(() => {
+    ;(window as any).testing.Inertia.layer('/layers/guarded')
+  })
+  await expect(page.getByText('Sudo prompt')).toBeVisible()
+
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/counted/base'))
+  await expect(page.getByText('Base page')).toBeVisible()
+  await page.context().addCookies([{ name: 'layers-confirmed', value: '1', domain: 'localhost', path: '/' }])
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/guarded'))
+  await expect(page.getByText('Guarded layer')).toBeVisible()
+  expect(await page.evaluate(() => window.history.state.page.url)).toBe('/layers/counted/base')
+})
+
+test('reloading during the prompt forgets the page the layer was opened from', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.evaluate(() => {
+    ;(window as any).testing.Inertia.layer('/layers/guarded')
+  })
+  await expect(page.getByText('Sudo prompt')).toBeVisible()
+
+  await page.reload()
+  await expect(page.getByText('Sudo prompt')).toBeVisible()
+  requests.listen(page)
+  await page.getByRole('button', { name: 'Complete the prompt' }).click()
+  await expect(page.getByText('Guarded layer')).toBeVisible()
+
+  // The walk for the base is sent once the layer has landed, so it trails the render it follows.
+  await expect.poll(() => requests.requests.filter((request) => request.url().includes('/layers/base')).length).toBe(1)
+})
+
+test('a layer opened by a visit returns over the page beneath, and back skips the prompt', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  requests.listen(page)
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/guarded'))
+  await expect(page.getByText('Sudo prompt')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeHidden()
+
+  await page.getByRole('button', { name: 'Complete the prompt' }).click()
+
+  await expect(page.getByText('Guarded layer')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+  expect(await page.evaluate(() => window.history.state.page.component)).toBe('Layers/Base')
+  expect(requests.requests.filter((request) => request.url().includes('/layers/base'))).toHaveLength(0)
+
+  await page.goBack()
+
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.getByText('Sudo prompt')).toBeHidden()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('a layer opened by a link returns over the page beneath, and back skips the prompt', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await clickAndWaitForResponse(page, 'Open guarded panel', '/layers/guarded')
+  await expect(page.getByText('Sudo prompt')).toBeVisible()
+
+  await page.getByRole('button', { name: 'Complete the prompt' }).click()
+
+  await expect(page.getByText('Guarded layer')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await page.goBack()
+
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.getByText('Sudo prompt')).toBeHidden()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('the back button from a layer opened through a prompt lands on the page, not the prompt', async ({ page }) => {
+  await page.goto('/layers/base')
+
+  await page.evaluate(() => {
+    ;(window as any).testing.guardedHandle = (window as any).testing.Inertia.layer('/layers/guarded')
+  })
+  await expect(page.getByText('Sudo prompt')).toBeVisible()
+  await page.getByRole('button', { name: 'Complete the prompt' }).click()
+  await expect(page.getByText('Guarded layer')).toBeVisible()
+
+  await page.goBack()
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.getByText('Sudo prompt')).toBeHidden()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+})
+
+test('a layer response that is also an interstitial still opens as a layer', async ({ page }) => {
+  await page.goto('/layers/base')
+  await page.context().addCookies([{ name: 'layers-confirmed', value: '1', domain: 'localhost', path: '/' }])
+
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/guarded?mark'))
+
+  await expect(page.getByText('Guarded layer')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.getByText('Sudo prompt')).toBeHidden()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+})
+
+test('an interstitial response with no layer open renders as an ordinary page', async ({ page }) => {
+  await page.goto('/layers/prompt')
+
+  await expect(page.getByText('Sudo prompt')).toBeVisible()
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  expect(await page.evaluate(() => window.history.state.page.component)).toBe('Layers/Prompt')
+})
+
+// The rows below opt into the loading placeholder. The test apps resolve one only for bases under
+// /layers/loading, and record every consultation, so the rows above keep today's blank.
+
+test('the loading placeholder renders beneath a cold-opened layer until the walk lands the base', async ({ page }) => {
+  // Firefox does not fire load while the walk's request is out, so the navigation waits for commit.
+  await page.goto('/layers/loading/panel', { waitUntil: 'commit' })
+
+  await expect(page.getByText('Panel layer: loading')).toBeVisible()
+  await expect(page.locator('#loading-base')).toBeVisible()
+  await expect(page.getByText('Base page')).toBeHidden()
+  expect(await page.evaluate(() => window.loadingResolved)).toBe('/layers/loading/base?delay=1500|loading-panel')
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#loading-base')).toHaveCount(0)
+  await expect(page.getByText('Panel layer: loading')).toBeVisible()
+})
+
+test('a layer dismissed while its base is loading leaves the placeholder, and the base swaps it in', async ({
+  page,
+}) => {
+  await page.goto('/layers/loading/panel', { waitUntil: 'commit' })
+  await expect(page.locator('#loading-base')).toBeVisible()
+
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.locator('#loading-base')).toBeVisible()
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#loading-base')).toHaveCount(0)
+})
+
+test('a stack opened cold renders one placeholder, not one per layer', async ({ page }) => {
+  await page.goto('/layers/loading/chain/outer', { waitUntil: 'commit' })
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(2)
+  await expect(page.locator('#loading-base')).toHaveCount(1)
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#loading-base')).toHaveCount(0)
+})
+
+test('closing the layer while the base component is still importing still leaves the base on screen', async ({
+  page,
+}) => {
+  // The walk is held so the dismissal can be timed: once it answers, the base's component import
+  // (which the resolver delays) is what holds the landing open, and the Escape lands inside that
+  // window, superseding it. The walk must then be sent again rather than left spent.
+  let releaseWalk!: () => void
+  const held = new Promise<void>((resolve) => (releaseWalk = resolve))
+  await page.route('**/layers/loading/slow-import', async (route) => {
+    await held
+    await route.continue()
+  })
+
+  await page.goto('/layers/loading/slow-import/panel', { waitUntil: 'commit' })
+  await expect(page.locator('#loading-base')).toBeVisible()
+
+  const answered = page.waitForResponse('**/layers/loading/slow-import')
+  releaseWalk()
+  await answered
+  await page.keyboard.press('Escape')
+
+  await expect(page.locator('[data-layer-index]')).toHaveCount(0)
+  await expect(page.getByText('Slow import base')).toBeVisible()
+  await expect(page.locator('#loading-base')).toHaveCount(0)
+})
+
+test('a layer opened over a page on screen never consults the loading resolver', async ({ page }) => {
+  await page.goto('/layers/loading/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/loading/panel'))
+
+  await expect(page.getByText('Panel layer: loading')).toBeVisible()
+  await expect(page.locator('#loading-base')).toHaveCount(0)
+  expect(await page.evaluate(() => window.loadingResolved)).toBeUndefined()
+})
+
+test('an ordinary navigation never consults the loading resolver, not even before the app initialises', async ({
+  page,
+}) => {
+  await page.goto('/layers/loading/base')
+
+  await expect(page.getByText('Base page')).toBeVisible()
+  await expect(page.locator('#loading-base')).toHaveCount(0)
+  expect(await page.evaluate(() => window.loadingResolved)).toBeUndefined()
+
+  await page.evaluate(() => window.testing.Inertia.visit('/layers/base'))
+
+  await expect(page).toHaveURL('/layers/base')
+  await expect(page.getByText('Base page')).toBeVisible()
+  expect(await page.evaluate(() => window.loadingResolved)).toBeUndefined()
+})
diff --git a/tests/ssr.spec.ts b/tests/ssr.spec.ts
index 5c38ad965..860e8e14c 100644
--- a/tests/ssr.spec.ts
+++ b/tests/ssr.spec.ts
@@ -305,3 +305,114 @@ test.describe('SSR Auto Transform', () => {
     })
   })
 })
+
+test.describe('SSR layers', () => {
+  test('it renders a cold layer inside its shell, over a base that is not there', async ({ page }) => {
+    const response = await page.request.get('/ssr/layer')
+    const html = await response.text()
+
+    expect(html).toContain('<dialog open')
+    expect(html).toContain('data-layer-index="0"')
+    expect(html).toContain('SSR layer')
+    expect(html).not.toContain('SSR layer base')
+  })
+
+  test('it renders a cold layer server head from the layer, not from the blank base beneath it', async ({ page }) => {
+    const response = await page.request.get('/ssr/layer-head')
+    const html = await response.text()
+
+    expect(html).toContain('<title data-inertia="server-head-0">Layer Head SSR</title>')
+    expect(html).toContain('<meta data-inertia="server-head-1" name="description" content="Layer head description">')
+  })
+
+  test('it renders a layer that remembers state, which the server has no history to write to', async ({ page }) => {
+    const response = await page.request.get('/ssr/layer')
+
+    expect(response.status()).toBe(200)
+    expect(await response.text()).toContain('data-testid="ssr-layer-note"')
+  })
+
+  test('it hands the client the layer response untouched, so the client walks the chain itself', async ({ page }) => {
+    const response = await page.request.get('/ssr/layer')
+    const html = await response.text()
+    const embedded = html.match(/<script data-page="app" type="application\/json">(.*?)<\/script>/)![1]
+
+    expect(JSON.parse(embedded.replace(/\\\//g, '/'))).toMatchObject({
+      component: 'SSR/Layer',
+      layer: { key: 'ssr-layer', base: '/ssr/layer-base' },
+    })
+  })
+
+  test('it renders the loading placeholder into the document beneath a cold layer', async ({ page }) => {
+    const response = await page.request.get('/ssr/layer-loading')
+    const html = await response.text()
+
+    expect(html).toContain('SSR layer')
+    expect(html).toContain('SSR loading placeholder')
+  })
+
+  test('the placeholder hydrates in place, and the walk replaces it with the base', async ({ page }) => {
+    consoleMessages.listen(page)
+
+    await page.goto('/ssr/layer-loading', { waitUntil: 'commit' })
+
+    await expect(page.locator('#loading-base')).toBeVisible()
+    await expect(page.getByTestId('ssr-layer-base')).toBeVisible()
+    await expect(page.locator('#loading-base')).toHaveCount(0)
+    expect(consoleMessages.errors).toHaveLength(0)
+  })
+
+  test('it renders a cold layer from the auto-transformed SSR entry too', async ({ page }) => {
+    const response = await page.request.get('/ssr-auto/layer')
+    const html = await response.text()
+
+    expect(html).toContain('<dialog open')
+    expect(html).toContain('data-layer-index="0"')
+    expect(html).toContain('SSR layer')
+  })
+
+  test('a cold layer url renders an open dialog that hydration upgrades to modal without throwing', async ({
+    page,
+  }) => {
+    const response = await page.request.get('/ssr/layer')
+    const html = await response.text()
+    expect(html).toContain('<dialog open')
+
+    consoleMessages.listen(page)
+
+    await page.goto('/ssr/layer')
+
+    await expect(page.locator('dialog[data-layer-index="0"]')).toBeVisible()
+    await expect(page.evaluate(() => document.querySelector('dialog')?.matches(':modal'))).resolves.toBe(true)
+    expect(consoleMessages.errors).toHaveLength(0)
+  })
+
+  test('it hydrates the layer it rendered rather than discarding and rebuilding it', async ({ page }) => {
+    consoleMessages.listen(page)
+
+    await page.addInitScript(() => {
+      const holdsTheLayer = (node: Node) =>
+        node instanceof Element &&
+        (node.matches('[data-testid="ssr-layer"]') || !!node.querySelector('[data-testid="ssr-layer"]'))
+
+      window.serverRenderedLayerWasRemoved = false
+
+      new MutationObserver((records) => {
+        records.forEach((record) => {
+          record.removedNodes.forEach((node) => {
+            window.serverRenderedLayerWasRemoved ||= holdsTheLayer(node)
+          })
+        })
+      }).observe(document, { childList: true, subtree: true })
+    })
+
+    await page.goto('/ssr/layer')
+
+    await expect(page.getByTestId('ssr-layer')).toBeVisible()
+    await expect(page.getByTestId('ssr-layer-base')).toBeVisible()
+    await expect(page.locator('[data-layer-index]')).toHaveCount(1)
+
+    expect(await page.evaluate(() => window.serverRenderedLayerWasRemoved)).toBe(false)
+    expect(consoleMessages.errors).toHaveLength(0)
+  })
+})