@sveltejs/kit 3.0.0-next.12 → 3.0.0-next.13

package/src/runtime/client/client.js

@@ -1,12 +1,11 @@
 /** @import { RouteId } from '$app/types' */
 /** @import { RemoteFunctionDataNode, ServerNodesResponse, ServerRedirectNode } from 'types' */
-/** @import { NavigationIntent } from './types.js' */
-/** @import { RenderNode } from '../types.js' */
+/** @import { NavigationFinished, NavigationIntent } from './types.js' */
 /** @import { CacheEntry } from './remote-functions/cache.svelte.js' */
 /** @import { Query } from './remote-functions/query/instance.svelte.js' */
 /** @import { LiveQuery } from './remote-functions/query-live/instance.svelte.js' */
 import { BROWSER, DEV } from 'esm-env';
-import * as svelte from 'svelte';
+import { settled, tick, fork, onMount, hydrate, mount } from 'svelte';
 import { HttpError, Redirect, SvelteKitError } from '@sveltejs/kit/internal';
 import { decode_pathname, strip_hash, make_trackable, normalize_path } from '../../utils/url.js';
 import { dev_fetch, initial_fetch, lock_fetch, subsequent_fetch, unlock_fetch } from './fetcher.js';
@@ -25,13 +24,10 @@ import {
 import { base, set_match_implementation } from '$app/paths/internal/client';
 import * as devalue from 'devalue';
 import {
-	HISTORY_INDEX,
-	NAVIGATION_INDEX,
+	HISTORY_INFO_KEY,
+	HISTORY_METADATA_KEY,
 	PRELOAD_PRIORITIES,
-	SCROLL_KEY,
-	STATES_KEY,
-	SNAPSHOT_KEY,
-	PAGE_URL_KEY
+	SNAPSHOT_KEY
 } from './constants.js';
 import { validate_page_exports } from '../../utils/exports.js';
 import { noop } from '../../utils/functions.js';
@@ -43,28 +39,29 @@ import {
 	validate_load_response
 } from '../shared.js';
 import { get_message, get_status } from '../../utils/error.js';
-import { page, update, navigating, updated, notify_version } from './state.svelte.js';
+import { page, navigating, updated, notify_version } from './state.svelte.js';
 import { payload } from './payload.js';
 import { add_data_suffix, add_resolution_suffix } from '../pathname.js';
 import { noop_span } from '../telemetry/noop.js';
 import { read_ndjson } from './ndjson.js';
-import RootModern from '../components/root.svelte';
-import { asClassComponent } from 'svelte/legacy';
+import Root from '../components/root.svelte';
+import { Props, RenderNode } from '../props.svelte.js';
 
-const Root = asClassComponent(RootModern);
+/**
+ * @typedef {{
+ *   historyIndex: number;
+ *   navigationIndex: number;
+ *   pageUrl?: string;
+ *   state: Record<string, any>;
+ *   persistState: boolean;
+ *   resetIndex: number;
+ * }} HistoryMetadata
+ */
 
 export { load_css };
 const ICON_REL_ATTRIBUTES = new Set(['icon', 'shortcut icon', 'apple-touch-icon']);
 
 let errored = false;
-/**
- * Set via transformError, reset and read at the end of navigate.
- * Necessary because a navigation might succeed loading but during rendering
- * an error occurs, at which point the navigation result needs to be overridden with the error result.
- * TODO this is all very hacky, rethink for SvelteKit 3 where we can assume Svelte 5 and do an overhaul of client.js
- * @type {{ error: App.Error, status: number } | null}
- */
-let rendering_error = null;
 
 /**
  * `reset` functions for `<svelte:boundary>`s in the generated root that have
@@ -73,19 +70,18 @@ let rendering_error = null;
  * navigation away from a render error would leave the stale `+error.svelte`
  * mounted. The boundary's `onerror` populates this array; `navigate` drains it
  * after applying the new props. See sveltejs/kit#15694.
- * @type {Array<(() => void) | undefined>}
+ * @type {Set<() => void>}
  */
-const resetters = [];
+const resetters = new Set();
 
-// We track the scroll position associated with each history entry in sessionStorage,
+// We track information associated with each history entry in sessionStorage,
 // rather than on history.state itself, because when navigation is driven by
-// popstate it's too late to update the scroll position associated with the
+// popstate it's too late to access the options or update the focus position associated with the
 // state we're navigating from
 /**
- * history index -> { x, y }
- * @type {Record<number, { x: number; y: number }>}
+ * @type {Record<number, { scroll?: { x: number; y: number }; resetIndex?: number }>}
  */
-const scroll_positions = storage.get(SCROLL_KEY) ?? {};
+const history_info = storage.get(HISTORY_INFO_KEY) ?? {};
 
 /**
  * navigation index -> any
@@ -93,14 +89,14 @@ const scroll_positions = storage.get(SCROLL_KEY) ?? {};
  */
 const snapshots = storage.get(SNAPSHOT_KEY) ?? {};
 
-/**
- * @deprecated this is a temporary measure to avoid a regression, replace with nested `RenderNode` classes
- */
-let current_tree = /** @type {RenderNode} */ ({});
+/** @type {Props} */
+let props;
 
 if (DEV && BROWSER) {
 	let warned = false;
 
+	const current_module_url = import.meta.url.split('?')[0]; // remove query params that vite adds to the URL when it is loaded from node_modules
+
 	const warn = () => {
 		if (warned) return;
 
@@ -113,14 +109,15 @@ if (DEV && BROWSER) {
 		// skip over `warn` and the place where `warn` was called
 		const frame = stack[2];
 
-		// ignore calls that happen inside dependencies, including SvelteKit.
+		// Ignore calls that happen inside dependencies, including SvelteKit.
+		// The second condition is only relevant when developing SvelteKit and running it, as there's no node_modules in the stack then (but we still do it to not get repeatedly confused)
 		// `frame` can be falsy if we came from an anonymous function
-		if (frame?.includes('node_modules')) return;
+		if (frame?.includes('node_modules') || frame?.includes(current_module_url)) return;
 
 		warned = true;
 
 		console.warn(
-			"Avoid using `history.pushState(...)` and `history.replaceState(...)` as these will conflict with SvelteKit's router. Use the `pushState` and `replaceState` imports from `$app/navigation` instead."
+			"Avoid using `history.pushState(...)` and `history.replaceState(...)` as these will conflict with SvelteKit's router. Use `goto(...)` from `$app/navigation` instead."
 		);
 	};
 
@@ -138,8 +135,60 @@ if (DEV && BROWSER) {
 }
 
 /** @param {number} index */
-function update_scroll_positions(index) {
-	scroll_positions[index] = scroll_state();
+function capture_scroll(index) {
+	history_info[index].scroll = scroll_state();
+}
+
+/**
+ * @param {number} index
+ * @param {Pick<HistoryMetadata, 'resetIndex'>} options
+ */
+function set_history_options(index, options) {
+	history_info[index] = {
+		...history_info[index],
+		resetIndex: options.resetIndex
+	};
+}
+
+/** @param {boolean} reset */
+function blur_active_element(reset) {
+	if (
+		reset &&
+		document.activeElement instanceof HTMLElement &&
+		document.activeElement !== document.body
+	) {
+		document.activeElement.blur();
+	}
+}
+
+/**
+ * @param {URL} url
+ * @param {{ x: number; y: number } | null | undefined} scroll
+ * @param {boolean} reset
+ * @param {Element | null} active_element
+ */
+function reset_scroll_and_focus(url, scroll, reset, active_element) {
+	/** @type {Element | null} */
+	let deep_linked = null;
+
+	if (autoscroll) {
+		if (scroll) {
+			scrollTo(scroll.x, scroll.y);
+		} else if ((deep_linked = get_hash_element(url))) {
+			deep_linked.scrollIntoView();
+		} else {
+			scrollTo(0, 0);
+		}
+	}
+
+	const changed_focus =
+		document.activeElement !== active_element && document.activeElement !== document.body;
+
+	if (reset && !changed_focus) {
+		reset_focus(url, !deep_linked);
+	}
+
+	autoscroll = true;
 }
 
 /**
@@ -150,8 +199,8 @@ function clear_onward_history(current_history_index, current_navigation_index) {
 	// if we navigated back, then pushed a new state, we can
 	// release memory by pruning the scroll/snapshot lookup
 	let i = current_history_index + 1;
-	while (scroll_positions[i]) {
-		delete scroll_positions[i];
+	while (history_info[i]) {
+		delete history_info[i];
 		i += 1;
 	}
 
@@ -225,14 +274,6 @@ export const prerender_responses = {};
 /** @type {Array<((url: URL) => boolean)>} */
 const invalidated = [];
 
-/**
- * An array of the `+layout.svelte` and `+page.svelte` component instances
- * that currently live on the page — used for capturing and restoring snapshots.
- * It's updated/manipulated through `bind:this` in `Root.svelte`.
- * @type {import('svelte').SvelteComponent[]}
- */
-const components = [];
-
 /** @type {{id: string, token: {}, promise: Promise<import('./types.js').NavigationResult>, fork: Promise<import('svelte').Fork | null> | null} | null} */
 let load_cache = null;
 
@@ -282,21 +323,30 @@ let started = false;
 let autoscroll = true;
 let updating = false;
 let is_navigating = false;
-let hash_navigating = false;
+/** @type {HistoryMetadata | null} */
+let hash_navigating = null;
 /** True as soon as there happened one client-side navigation (excluding the SvelteKit-initialized initial one when in SPA mode) */
 let has_navigated = false;
 
 let force_invalidation = false;
 
-/** @type {import('svelte').SvelteComponent} */
-let root;
-
 /** @type {number} keeping track of the history index in order to prevent popstate navigation events if needed */
 let current_history_index;
 
 /** @type {number} */
 let current_navigation_index;
 
+/** @type {number} */
+let current_reset_index;
+
+/**
+ * @param {any} [state]
+ * @returns {HistoryMetadata | undefined}
+ */
+function get_history_metadata(state = history.state) {
+	return state?.[HISTORY_METADATA_KEY];
+}
+
 /** @type {{}} Token for the latest navigation. Updated on new navigations */
 let navigation_token;
 
@@ -319,7 +369,7 @@ let invalidation_token;
 const preload_tokens = new Set();
 
 /** @type {Promise<void> | null} */
-export let pending_invalidate;
+let pending_invalidate;
 
 /**
  * @type {Map<string, Map<string, CacheEntry<Query<any>>>>}
@@ -350,12 +400,33 @@ set_match_implementation(async (url) => {
 	return null;
 });
 
+let embedded_start = Promise.resolve();
+
+/**
+ * TODO this indirection is a grotesque workaround for the fact that multiple apps
+ * can operate on the same shared mutable state. This is fundamentally unsound,
+ * and the `start`/`_start` distinction does not fix it, but it does get the
+ * tests passing. We need to rethink this whole thing but not right now
+ * @param {import('./types.js').SvelteKitApp} _app
+ * @param {HTMLElement} _target
+ * @param {Parameters<typeof _hydrate>[1]} [data]
+ */
+export function start(_app, _target, data) {
+	if (__SVELTEKIT_EMBEDDED__) {
+		const start_promise = embedded_start.then(() => _start(_app, _target, data));
+		embedded_start = start_promise.catch(noop);
+		return start_promise;
+	}
+
+	return _start(_app, _target, data);
+}
+
 /**
  * @param {import('./types.js').SvelteKitApp} _app
  * @param {HTMLElement} _target
- * @param {Parameters<typeof _hydrate>[1]} [hydrate]
+ * @param {Parameters<typeof _hydrate>[1]} [data]
  */
-export async function start(_app, _target, hydrate) {
+async function _start(_app, _target, data) {
 	if (DEV && _target === document.body) {
 		console.warn(
 			'Placing %sveltekit.body% directly inside <body> is not recommended, as your app may break for users who have certain browser extensions installed.\n\nConsider wrapping it in an element:\n\n<div style="display: contents">\n  %sveltekit.body%\n</div>'
@@ -393,31 +464,56 @@ export async function start(_app, _target, hydrate) {
 	// connectivity errors after initialisation don't nuke the app
 	default_layout_loader = _app.nodes[0];
 	default_error_loader = _app.nodes[1];
-	void default_layout_loader();
-	void default_error_loader();
 
-	current_history_index = history.state?.[HISTORY_INDEX];
-	current_navigation_index = history.state?.[NAVIGATION_INDEX];
+	const [root_layout, root_error] = await Promise.all([
+		default_layout_loader(),
+		default_error_loader()
+	]);
+
+	const tree = new RenderNode(root_layout.component, root_error.component);
+
+	props = new Props({
+		page,
+		tree,
+		form: undefined,
+		error: undefined,
+		onerror: (_, reset) => resetters.add(reset)
+	});
+
+	const history_metadata = get_history_metadata();
+	current_history_index = history_metadata?.historyIndex ?? 0;
+	current_navigation_index = history_metadata?.navigationIndex ?? 0;
+	current_reset_index = history_metadata?.resetIndex ?? 0;
 
 	if (!current_history_index) {
 		// we use Date.now() as an offset so that cross-document navigations
 		// within the app don't result in data loss
-		current_history_index = current_navigation_index = Date.now();
+		current_history_index = current_navigation_index = current_reset_index = Date.now();
 
 		// create initial history entry, so we can return here
 		history.replaceState(
 			{
 				...history.state,
-				[HISTORY_INDEX]: current_history_index,
-				[NAVIGATION_INDEX]: current_navigation_index
+				[HISTORY_METADATA_KEY]: {
+					historyIndex: current_history_index,
+					navigationIndex: current_navigation_index,
+					state: {},
+					persistState: false,
+					resetIndex: current_history_index
+				}
 			},
 			''
 		);
 	}
 
+	set_history_options(
+		current_history_index,
+		/** @type {HistoryMetadata} */ (get_history_metadata())
+	);
+
 	// if we reload the page, or Cmd-Shift-T back to it,
 	// recover scroll position
-	const scroll = scroll_positions[current_history_index];
+	const scroll = history_info[current_history_index]?.scroll;
 	function restore_scroll() {
 		if (scroll) {
 			history.scrollRestoration = 'manual';
@@ -425,15 +521,17 @@ export async function start(_app, _target, hydrate) {
 		}
 	}
 
-	if (hydrate) {
+	if (data) {
 		restore_scroll();
 
-		await _hydrate(target, hydrate);
+		await _hydrate(target, data);
 	} else {
 		await navigate({
 			type: 'enter',
 			url: resolve_url(app.hash ? decode_hash(new URL(location.href)) : location.href),
-			replace_state: true
+			replace_state: true,
+			state: history_metadata?.persistState ? history_metadata.state : {},
+			persist_state: history_metadata?.persistState ?? false
 		});
 
 		restore_scroll();
@@ -482,6 +580,7 @@ async function _invalidate(reset_page_state = true) {
 	}
 
 	const prev_state = page.state;
+	const prev_shallow = page.shallow;
 	const navigation_result = intent && (await load_route(intent));
 	if (!navigation_result || token !== invalidation_token || nav_token !== navigation_token) {
 		return;
@@ -490,7 +589,7 @@ async function _invalidate(reset_page_state = true) {
 	if (navigation_result.type === 'redirect') {
 		return _goto(
 			new URL(navigation_result.location, current.url).href,
-			{ replaceState: true },
+			{ replace: true },
 			1,
 			token
 		);
@@ -506,11 +605,10 @@ async function _invalidate(reset_page_state = true) {
 	if (!reset_page_state) {
 		navigation_result.props.page.state = prev_state;
 	}
-	update(navigation_result.props.page);
-	current_tree = navigation_result.props.tree;
+	navigation_result.props.page.shallow = prev_shallow;
+	apply_navigation_result(navigation_result);
 	current = { ...navigation_result.state, nav: current.nav };
 	reset_invalidation();
-	root.$set(navigation_result.props);
 
 	// only wait for promises that are connected to queries that still exist
 	/** @type {Promise<any>[]} */
@@ -541,21 +639,21 @@ function reset_invalidation() {
 
 /** @param {number} index */
 function capture_snapshot(index) {
-	if (components.some((c) => c?.snapshot)) {
-		snapshots[index] = components.map((c) => c?.snapshot?.capture());
+	if (props.components.some((c) => c?.snapshot)) {
+		snapshots[index] = props.components.map((c) => c?.snapshot?.capture());
 	}
 }
 
 /** @param {number} index */
 function restore_snapshot(index) {
 	snapshots[index]?.forEach((value, i) => {
-		components[i]?.snapshot?.restore(value);
+		props.components[i]?.snapshot?.restore(value);
 	});
 }
 
 function persist_state() {
-	update_scroll_positions(current_history_index);
-	storage.set(SCROLL_KEY, scroll_positions);
+	capture_scroll(current_history_index);
+	storage.set(HISTORY_INFO_KEY, history_info);
 
 	capture_snapshot(current_navigation_index);
 	storage.set(SNAPSHOT_KEY, snapshots);
@@ -563,7 +661,7 @@ function persist_state() {
 
 /**
  * @param {string | URL} url
- * @param {{ replaceState?: boolean; noScroll?: boolean; keepFocus?: boolean; refreshAll?: boolean; invalidate?: Array<string | URL | ((url: URL) => boolean)>; state?: Record<string, any> }} options
+ * @param {{ replace?: boolean; reset?: boolean; refreshAll?: boolean; invalidate?: Array<string | URL | ((url: URL) => boolean)>; state?: Record<string, any>; persistState?: boolean }} options
  * @param {number} redirect_count
  * @param {{}} [nav_token]
  * @param {NavigationIntent | undefined} [intent] navigation intent, when already known by the caller (avoids recomputing it)
@@ -584,10 +682,10 @@ export async function _goto(url, options, redirect_count, nav_token, intent) {
 	await navigate({
 		type: 'goto',
 		url: resolve_url(url),
-		keepfocus: options.keepFocus,
-		noscroll: options.noScroll,
-		replace_state: options.replaceState,
+		reset: options.reset,
+		replace_state: options.replace,
 		state: options.state,
+		persist_state: options.persistState,
 		redirect_count,
 		nav_token,
 		intent,
@@ -621,9 +719,8 @@ export async function _goto(url, options, redirect_count, nav_token, intent) {
 	if (options.refreshAll) {
 		// TODO the ticks shouldn't be necessary, something inside Svelte itself is buggy
 		// when a query in a layout that still exists after page change is refreshed earlier than this
-		void svelte
-			.tick()
-			.then(svelte.tick)
+		void tick()
+			.then(tick)
 			.then(() => {
 				for (const [id, entries] of query_map) {
 					for (const [payload, { resource }] of entries) {
@@ -665,7 +762,7 @@ async function _preload_data(intent) {
 
 		load_cache.promise.catch(discard_load_cache);
 
-		if (__SVELTEKIT_FORK_PRELOADS__ && svelte.fork) {
+		if (__SVELTEKIT_FORK_PRELOADS__) {
 			const lc = load_cache;
 
 			lc.fork = lc.promise.then((result) => {
@@ -673,10 +770,8 @@ async function _preload_data(intent) {
 				// resolve, bail rather than creating an orphan fork
 				if (lc === load_cache && result.type === 'loaded') {
 					try {
-						return svelte.fork(() => {
-							root.$set(result.props);
-							update(result.props.page);
-							current_tree = result.props.tree;
+						return fork(() => {
+							apply_navigation_result(result);
 						});
 					} catch {
 						// if it errors, it's because the experimental flag isn't enabled in Svelte
@@ -710,9 +805,9 @@ async function _preload_code(url) {
 /**
  * @param {import('./types.js').NavigationFinished} result
  * @param {HTMLElement} target
- * @param {boolean} hydrate
+ * @param {boolean} should_hydrate
  */
-async function initialize(result, target, hydrate) {
+async function initialize(result, target, should_hydrate) {
 	if (__SVELTEKIT_DEV__ && result.state.error && document.querySelector('vite-error-overlay'))
 		return;
 
@@ -734,21 +829,18 @@ async function initialize(result, target, hydrate) {
 		if (style) style.remove();
 	}
 
-	update(/** @type {import('@sveltejs/kit').Page} */ (result.props.page));
-	current_tree = result.props.tree;
+	apply_navigation_result(result);
 
-	// TODO: use mount()
-	root = new Root({
+	// TODO treeshake `hydrate` in csr mode
+	const render = should_hydrate ? hydrate : mount;
+
+	render(Root, {
 		target,
-		props: { ...result.props, components, resetters },
-		hydrate,
-		// Svelte 5 specific: asynchronously instantiate the component, i.e. don't call flushSync
-		sync: false,
+		props,
 		transformError: /** @param {unknown} e */ async (e) => {
 			const error = await handle_error(e, current.nav);
-			rendering_error = { error, status: error.status };
 			page.error = error;
-			page.status = rendering_error.status;
+			page.status = error.status;
 			return error;
 		}
 	});
@@ -757,16 +849,17 @@ async function initialize(result, target, hydrate) {
 	// which causes component script blocks to run asynchronously
 	void (await Promise.resolve());
 
-	if (hydrate) {
+	if (should_hydrate) {
 		/** @type {import('@sveltejs/kit').AfterNavigate} */
 		const navigation = {
 			from: null,
 			to: {
 				...nav,
-				scroll: scroll_positions[current_history_index] ?? scroll_state()
+				scroll: history_info[current_history_index]?.scroll ?? scroll_state()
 			},
 			willUnload: false,
 			type: 'enter',
+			shallow: false,
 			complete: Promise.resolve()
 		};
 
@@ -848,7 +941,7 @@ async function get_navigation_result_from_branch({
 	let current_node = result.props.tree;
 
 	/** @type {RenderNode | undefined} */
-	let previous_node = current_tree;
+	let previous_node = props.tree;
 
 	for (let i = 0; i < branch.length; i += 1) {
 		const node = branch[i];
@@ -856,11 +949,6 @@ async function get_navigation_result_from_branch({
 
 		if (!node) continue;
 
-		const error_loader = errors?.slice(0, i + 1).findLast((x) => x) ?? default_error_loader;
-
-		current_node.error = (await error_loader()).component;
-		current_node.component = node.node.component;
-
 		if (
 			// if an ancestor node in this path changed, `data_changed` is already true and the
 			// accumulated `data` differs from the previous render, so we must re-merge
@@ -878,10 +966,24 @@ async function get_navigation_result_from_branch({
 		data = current_node.data;
 
 		if (i < branch.length - 1) {
-			current_node.child = /** @type {import('../types.js').RenderNode} */ ({});
-			current_node = current_node.child;
+			let next_index = i + 1;
+			while (next_index < branch.length && !branch[next_index]) {
+				next_index += 1;
+			}
+
+			const next = branch[next_index];
+
+			if (next) {
+				const error_loader =
+					errors?.slice(0, next_index + 1).findLast((x) => x) ?? default_error_loader;
+
+				current_node = current_node.child = new RenderNode(
+					next.node.component,
+					(await error_loader()).component
+				);
 
-			previous_node = previous_node?.child;
+				previous_node = previous_node?.child;
+			}
 		}
 	}
 
@@ -900,6 +1002,7 @@ async function get_navigation_result_from_branch({
 				id: route?.id ?? null
 			},
 			state: {},
+			shallow: null,
 			status: status ?? error?.status ?? 200,
 			url: new URL(url),
 			form: form ?? null,
@@ -1298,7 +1401,7 @@ async function load_route({ id, invalidating, url, params, route, preload }) {
 
 		if (server_data_node?.type === 'error') {
 			// rethrow and catch below
-			throw new HttpError(server_data_node.error.status, server_data_node.error);
+			throw new HttpError(server_data_node.error);
 		}
 
 		return load_node({
@@ -1655,12 +1758,14 @@ function get_page_key(url) {
  *   delta?: number;
  *   event?: PopStateEvent | MouseEvent;
  *   scroll?: { x: number, y: number };
+ *   shallow?: boolean;
+ *   target?: { params: Record<string, string> | null; route: { id: string } | null; url: URL };
  * }} opts
  */
-function _before_navigate({ url, type, intent, delta, event, scroll }) {
+function _before_navigate({ url, type, intent, delta, event, scroll, shallow = false, target }) {
 	let should_block = false;
 
-	const nav = create_navigation(current, intent, url, type, scroll ?? null);
+	const nav = create_navigation(current, intent, url, type, scroll ?? null, shallow, target);
 
 	if (nav.navigation.type === 'popstate' && delta !== undefined) {
 		nav.navigation.delta = delta;
@@ -1681,6 +1786,9 @@ function _before_navigate({ url, type, intent, delta, event, scroll }) {
 
 	if (!is_navigating) {
 		// Don't run the event during redirects
+		// TODO this isn't fully right: if you do a goto(...) while another goto(...) is in progress,
+		// or you click a link while a navigation is in progress, the beforNavigate calls are not triggered,
+		// and maybe they should be?
 		before_navigate_callbacks.forEach((fn) => fn(cancellable));
 	}
 
@@ -1693,13 +1801,14 @@ function _before_navigate({ url, type, intent, delta, event, scroll }) {
  *   url: URL;
  *   popped?: {
  *     state: Record<string, any>;
- *     scroll: { x: number, y: number };
+ *     scroll?: { x: number, y: number };
  *     delta: number;
+ *     shallow: { params: Record<string, string> | null; route: { id: string } | null; url: URL } | null;
  *   };
- *   keepfocus?: boolean;
- *   noscroll?: boolean;
+ *   reset?: boolean;
  *   replace_state?: boolean;
  *   state?: Record<string, any>;
+ *   persist_state?: boolean;
  *   redirect_count?: number;
  *   nav_token?: {};
  *   accept?: () => void;
@@ -1713,10 +1822,10 @@ async function navigate({
 	type,
 	url,
 	popped,
-	keepfocus,
-	noscroll,
+	reset = true,
 	replace_state,
 	state = {},
+	persist_state = false,
 	redirect_count = 0,
 	nav_token = {},
 	accept = noop,
@@ -1738,6 +1847,8 @@ async function navigate({
 					delta: popped?.delta,
 					intent,
 					scroll: popped?.scroll,
+					shallow: !!popped?.shallow,
+					target: popped?.shallow ?? undefined,
 					// @ts-ignore
 					event
 				});
@@ -1821,10 +1932,10 @@ async function navigate({
 				type,
 				url: new URL(navigation_result.location, url),
 				popped,
-				keepfocus,
-				noscroll,
+				reset,
 				replace_state,
 				state,
+				persist_state,
 				redirect_count: redirect_count + 1,
 				nav_token
 			});
@@ -1858,7 +1969,7 @@ async function navigate({
 
 	updating = true;
 
-	update_scroll_positions(previous_history_index);
+	capture_scroll(previous_history_index);
 	capture_snapshot(previous_navigation_index);
 
 	// ensure the url pathname matches the page's trailing slash option
@@ -1871,15 +1982,23 @@ async function navigate({
 	if (!popped) {
 		// this is a new navigation, rather than a popstate
 		const change = replace_state ? 0 : 1;
+		if (type !== 'enter') {
+			if (reset) current_reset_index += 1;
+		}
 
 		const entry = {
-			[HISTORY_INDEX]: (current_history_index += change),
-			[NAVIGATION_INDEX]: (current_navigation_index += change),
-			[STATES_KEY]: state
+			[HISTORY_METADATA_KEY]: /** @satisfies {HistoryMetadata} */ ({
+				historyIndex: (current_history_index += change),
+				navigationIndex: (current_navigation_index += change),
+				state,
+				persistState: persist_state,
+				resetIndex: current_reset_index
+			})
 		};
 
 		const fn = replace_state ? history.replaceState : history.pushState;
 		fn.call(history, entry, '', url);
+		set_history_options(current_history_index, entry[HISTORY_METADATA_KEY]);
 
 		if (!replace_state) {
 			clear_onward_history(current_history_index, current_navigation_index);
@@ -1898,6 +2017,7 @@ async function navigate({
 	}
 
 	navigation_result.props.page.state = state;
+	navigation_result.props.page.shallow = popped?.shallow ?? null;
 
 	/**
 	 * @type {Promise<void> | undefined}
@@ -1928,7 +2048,13 @@ async function navigate({
 		}
 
 		// Type-casts are save because we know this resolved a proper SvelteKit route
-		const target = /** @type {import('@sveltejs/kit').NavigationTarget} */ (nav.navigation.to);
+		const target = popped?.shallow
+			? {
+					params: navigation_result.state.params,
+					route: { id: navigation_result.state.route?.id ?? null },
+					url: navigation_result.state.url
+				}
+			: /** @type {import('@sveltejs/kit').NavigationTarget} */ (nav.navigation.to);
 		current = {
 			...navigation_result.state,
 			nav: {
@@ -1945,13 +2071,7 @@ async function navigate({
 
 		// Remove focus before updating the component tree, so that blur/focusout
 		// handlers fire while the old component's data is still valid (#14575)
-		if (
-			!keepfocus &&
-			document.activeElement instanceof HTMLElement &&
-			document.activeElement !== document.body
-		) {
-			document.activeElement.blur();
-		}
+		blur_active_element(reset);
 
 		const fork = load_cache_fork && (await load_cache_fork);
 
@@ -1960,28 +2080,22 @@ async function navigate({
 			// `fork.commit()` applies the preloaded state synchronously before the
 			// first `await`, so reset any previously-failed boundaries now so the
 			// stale `+error.svelte` is torn down. See sveltejs/kit#15694.
-			for (const reset of resetters) {
-				reset?.();
+			for (const reset_boundary of resetters) {
+				reset_boundary();
 			}
-			resetters.length = 0;
+			resetters.clear();
 		} else {
-			rendering_error = null; // TODO this can break with forks, rethink for SvelteKit 3 where we can assume Svelte 5
-			root.$set(navigation_result.props);
-			current_tree = navigation_result.props.tree;
+			apply_navigation_result(navigation_result);
+
 			// Reset any boundaries that failed on a previous navigation now that the
 			// new props are applied, otherwise the stale `+error.svelte` stays
 			// mounted above the new route's content. See sveltejs/kit#15694.
-			for (const reset of resetters) {
-				reset?.();
+			for (const reset_boundary of resetters) {
+				reset_boundary();
 			}
-			resetters.length = 0;
-			// Check for sync rendering error
-			if (rendering_error) {
-				Object.assign(navigation_result.props.page, rendering_error);
-			}
-			update(navigation_result.props.page);
+			resetters.clear();
 
-			commit_promise = svelte.settled?.();
+			commit_promise = settled();
 		}
 
 		has_navigated = true;
@@ -1991,7 +2105,7 @@ async function navigate({
 
 	const { activeElement } = document;
 
-	await (commit_promise ?? svelte.tick());
+	await commit_promise;
 
 	if (navigation_token !== nav_token) {
 		// a new navigation happened while we were waiting for the DOM to update, so abort
@@ -1999,44 +2113,7 @@ async function navigate({
 		return;
 	}
 
-	// Check for async rendering error
-	if (navigation_result.props.page && rendering_error) {
-		Object.assign(navigation_result.props.page, rendering_error);
-	}
-
-	// we reset scroll before dealing with focus, to avoid a flash of unscrolled content
-	/** @type {Element | null} */
-	let deep_linked = null;
-
-	if (autoscroll) {
-		const scroll = popped ? popped.scroll : noscroll ? scroll_state() : null;
-		if (scroll) {
-			scrollTo(scroll.x, scroll.y);
-		} else if ((deep_linked = get_hash_element(url))) {
-			// Here we use `scrollIntoView` on the element instead of `scrollTo`
-			// because it natively supports the `scroll-margin` and `scroll-behavior`
-			// CSS properties.
-			deep_linked.scrollIntoView();
-		} else {
-			scrollTo(0, 0);
-		}
-	}
-
-	const changed_focus =
-		// reset focus only if any manual focus management didn't override it
-		document.activeElement !== activeElement &&
-		// also refocus when activeElement is body already because the
-		// focus event might not have been fired on it yet
-		document.activeElement !== document.body;
-
-	if (!keepfocus && !changed_focus) {
-		// We don't need to manually restore the scroll position if we're navigating
-		// to a fragment identifier. It is automatically done for us when we set the
-		// sequential navigation starting point with `location.replace`
-		reset_focus(url, !deep_linked);
-	}
-
-	autoscroll = true;
+	reset_scroll_and_focus(url, reset ? popped?.scroll : scroll_state(), reset, activeElement);
 
 	is_navigating = false;
 
@@ -2280,7 +2357,7 @@ export async function handle_error(error, event) {
  * @param {T} callback
  */
 function add_navigation_callback(callbacks, callback) {
-	svelte.onMount(() => {
+	onMount(() => {
 		callbacks.add(callback);
 
 		return () => {
@@ -2352,24 +2429,49 @@ export function disableScrollHandling() {
 }
 
 let warned_on_invalidate_all = false;
+let warned_on_replace_state = false;
+let warned_on_push_state = false;
+let warned_on_replace_state_function = false;
+
+/**
+ * @param {string | URL} url
+ * @param {'goto' | 'pushState' | 'replaceState'} caller
+ */
+async function resolve_intent(url, caller) {
+	const resolved = new URL(resolve_url(url));
+
+	if (resolved.origin !== origin) {
+		throw new Error(
+			DEV
+				? `Cannot use \`${caller}\` with an external URL. Use \`window.location = "${url}"\` instead`
+				: `${caller}: invalid URL`
+		);
+	}
+
+	const intent = await get_navigation_intent(resolved, false);
+
+	if (!intent) {
+		throw new Error(
+			DEV
+				? `Cannot use \`${caller}\` with a URL that does not resolve to a route within the app. Use \`window.location = "${url}"\` instead`
+				: `${caller}: invalid URL`
+		);
+	}
+
+	return intent;
+}
 
 /**
- * Allows you to navigate programmatically to a given route, with options such as keeping the current element focused.
- * Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified `url`.
+ * Allows you to navigate programmatically to a given route, with control over details such as whether scroll and focus are reset
+ * (as they would be with a regular navigation) or preserved.
+ *
+ * Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) or the state change has been applied.
  *
- * `goto` is intended for navigations to routes that belong to the app.
- * If the URL does not resolve to a route within the app, the returned promise will reject.
+ * `goto` is intended for navigations to routes that belong to the app, and will reject if a route cannot be resolved.
  * For external URLs, use `window.location = url` to perform a full-page navigation instead of calling `goto(url)`.
  *
  * @param {string | URL} url Where to navigate to. Note that if you've set [`config.paths.base`](https://svelte.dev/docs/kit/configuration#paths) and the URL is root-relative, you need to prepend the base path if you want to navigate within the app.
- * @param {Object} [opts] Options related to the navigation
- * @param {boolean} [opts.replaceState] If `true`, will replace the current `history` entry rather than creating a new one with `pushState`
- * @param {boolean} [opts.noScroll] If `true`, the browser will maintain its scroll position rather than scrolling to the top of the page after navigation
- * @param {boolean} [opts.keepFocus] If `true`, the currently focused element will retain focus after navigation. Otherwise, focus will be reset to the body
- * @param {boolean} [opts.refreshAll] If `true`, all `load` functions and queries of the page will be rerun. See https://svelte.dev/docs/kit/load#rerunning-load-functions for more info on invalidation.
- * @param {Array<string | URL | ((url: URL) => boolean)>} [opts.invalidate] Causes any load functions to re-run if they depend on one of the urls
- * @param {boolean} [opts.invalidateAll] Deprecated in favour of opts.refreshAll.
- * @param {App.PageState} [opts.state] An optional object that will be available as `page.state`
+ * @param {import('@sveltejs/kit').GotoOptions} [opts] Options related to the navigation
  * @returns {Promise<void>}
  */
 export async function goto(url, opts = {}) {
@@ -2377,23 +2479,35 @@ export async function goto(url, opts = {}) {
 		throw new Error('Cannot call goto(...) on the server');
 	}
 
-	url = new URL(resolve_url(url));
+	if (DEV) {
+		if ('replaceState' in opts && !warned_on_replace_state) {
+			warned_on_replace_state = true;
+			console.warn(
+				`The \`goto(..., { replaceState: ${opts.replaceState} })\` option has been deprecated in favour of \`replace\``
+			);
+		}
 
-	if (url.origin !== origin) {
-		throw new Error(
-			DEV
-				? `Cannot use \`goto\` with an external URL. Use \`window.location = "${url}"\` instead`
-				: 'goto: invalid URL'
-		);
+		if ('noScroll' in opts || 'keepFocus' in opts) {
+			throw new Error(
+				`The \`goto(..., { noScroll: true, keepFocus: true })\` options have been replaced by \`reset: false\``
+			);
+		}
 	}
 
-	const intent = await get_navigation_intent(url, false);
+	const replace = opts.replace ?? opts.replaceState ?? false;
 
-	if (!intent) {
-		throw new Error(
-			DEV
-				? `Cannot use \`goto\` with a URL that does not resolve to a route within the app. Use \`window.location = "${url}"\` instead`
-				: 'goto: invalid URL'
+	const intent = await resolve_intent(url, 'goto');
+
+	if (opts.shallow) {
+		return update_state(
+			intent,
+			opts.state ?? {},
+			{
+				replace,
+				persist_state: opts.persistState ?? false,
+				reset: opts.reset ?? false
+			},
+			'goto'
 		);
 	}
 
@@ -2404,8 +2518,13 @@ export async function goto(url, opts = {}) {
 		);
 	}
 
-	opts.refreshAll = opts.refreshAll ?? opts.invalidateAll;
-	return _goto(url, opts, 0, {}, intent);
+	return _goto(
+		intent.url,
+		{ ...opts, replace, refreshAll: opts.refreshAll ?? opts.invalidateAll },
+		0,
+		{},
+		intent
+	);
 }
 
 /**
@@ -2579,63 +2698,77 @@ export async function preloadCode(pathname) {
 }
 
 /**
- * Programmatically create a new history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](https://svelte.dev/docs/kit/shallow-routing).
+ * Programmatically create a new history entry with the given `page.state`. Used for [shallow routing](https://svelte.dev/docs/kit/shallow-routing).
  *
+ * @deprecated Use `goto(url, { state, shallow: true })` instead.
  * @param {string | URL} url
  * @param {App.PageState} state
- * @returns {void}
+ * @returns {Promise<void>}
  */
-export function pushState(url, state) {
+export async function pushState(url, state) {
 	if (!BROWSER) {
 		throw new Error('Cannot call pushState(...) on the server');
 	}
 
-	if (DEV) {
-		if (!started) {
-			throw new Error('Cannot call pushState(...) before router is initialized');
-		}
-
-		try {
-			// use `devalue.stringify` as a convenient way to ensure we exclude values that can't be properly rehydrated, such as custom class instances
-			devalue.stringify(state);
-		} catch (error) {
-			// @ts-expect-error
-			throw new Error(`Could not serialize state${error.path}`, { cause: error });
-		}
+	if (DEV && !warned_on_push_state) {
+		warned_on_push_state = true;
+		console.warn(
+			'`pushState(...)` is deprecated. Use `goto(url, { state, shallow: true })` instead.'
+		);
 	}
 
-	update_scroll_positions(current_history_index);
+	const intent = await resolve_intent(url, 'pushState');
 
-	const opts = {
-		[HISTORY_INDEX]: (current_history_index += 1),
-		[NAVIGATION_INDEX]: current_navigation_index,
-		[PAGE_URL_KEY]: page.url.href,
-		[STATES_KEY]: state
-	};
-
-	history.pushState(opts, '', resolve_url(url));
-	has_navigated = true;
-
-	page.state = state;
-
-	clear_onward_history(current_history_index, current_navigation_index);
+	await update_state(
+		intent,
+		state,
+		{ replace: false, persist_state: false, reset: false },
+		'pushState'
+	);
 }
 
 /**
- * Programmatically replace the current history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](https://svelte.dev/docs/kit/shallow-routing).
+ * Programmatically replace the current history entry with the given `page.state`. Used for [shallow routing](https://svelte.dev/docs/kit/shallow-routing).
  *
+ * @deprecated Use `goto(url, { state, shallow: true, replace: true })` instead.
  * @param {string | URL} url
  * @param {App.PageState} state
- * @returns {void}
+ * @returns {Promise<void>}
  */
-export function replaceState(url, state) {
+export async function replaceState(url, state) {
 	if (!BROWSER) {
 		throw new Error('Cannot call replaceState(...) on the server');
 	}
 
+	if (DEV && !warned_on_replace_state_function) {
+		warned_on_replace_state_function = true;
+		console.warn(
+			'`replaceState(...)` is deprecated. Use `goto(url, { state, shallow: true, replace: true })` instead.'
+		);
+	}
+
+	const intent = await resolve_intent(url, 'replaceState');
+
+	await update_state(
+		intent,
+		state,
+		{ replace: true, persist_state: false, reset: false },
+		'replaceState'
+	);
+}
+
+/**
+ * @param {NavigationIntent} intent
+ * @param {App.PageState} state
+ * @param {{ replace: boolean; persist_state: boolean; reset: boolean; }} options
+ * @param {'goto' | 'pushState' | 'replaceState'} caller
+ */
+async function update_state(intent, state, { replace, persist_state, reset }, caller) {
+	const url = intent.url;
+
 	if (DEV) {
 		if (!started) {
-			throw new Error('Cannot call replaceState(...) before router is initialized');
+			throw new Error(`Cannot call ${caller}(...) before router is initialized`);
 		}
 
 		try {
@@ -2647,16 +2780,100 @@ export function replaceState(url, state) {
 		}
 	}
 
-	const opts = {
-		[HISTORY_INDEX]: current_history_index,
-		[NAVIGATION_INDEX]: current_navigation_index,
-		[PAGE_URL_KEY]: page.url.href,
-		[STATES_KEY]: state
+	const nav =
+		// For backwards compatibility we don't trigger navigation hooks etc for push/replaceState
+		caller === 'goto' ? _before_navigate({ url, type: 'goto', intent, shallow: true }) : undefined;
+
+	if (!nav && caller === 'goto') return;
+
+	const nav_token = {};
+
+	if (nav) {
+		navigation_token = invalidation_token = nav_token;
+		is_navigating = true;
+		navigating.current = nav.navigation;
+		updating = true;
+	}
+
+	if (!replace) capture_scroll(current_history_index);
+	if (reset) current_reset_index += 1;
+
+	const entry = {
+		[HISTORY_METADATA_KEY]: /** @satisfies {HistoryMetadata} */ ({
+			historyIndex: (current_history_index += replace ? 0 : 1),
+			navigationIndex: current_navigation_index,
+			pageUrl: page.url.href,
+			state,
+			persistState: persist_state,
+			resetIndex: current_reset_index
+		})
 	};
 
-	history.replaceState(opts, '', resolve_url(url));
+	const fn = replace ? history.replaceState : history.pushState;
+	fn.call(history, entry, '', url);
+	set_history_options(current_history_index, entry[HISTORY_METADATA_KEY]);
+
+	if (!replace) {
+		has_navigated = true;
+		clear_onward_history(current_history_index, current_navigation_index);
+	}
+
+	if (nav) {
+		const after_navigate = (
+			await Promise.all(
+				// eslint-disable-next-line @typescript-eslint/await-thenable -- we need to await because they can be asynchronous
+				Array.from(on_navigate_callbacks, (fn) =>
+					fn(/** @type {import('@sveltejs/kit').OnNavigate} */ (nav.navigation))
+				)
+			)
+		).filter(/** @returns {value is () => void} */ (value) => typeof value === 'function');
+
+		if (after_navigate.length > 0) {
+			function cleanup() {
+				after_navigate.forEach((fn) => after_navigate_callbacks.delete(fn));
+			}
+
+			after_navigate.push(cleanup);
+			after_navigate.forEach((fn) => after_navigate_callbacks.add(fn));
+		}
+	}
+
+	blur_active_element(reset);
 
 	page.state = state;
+	page.shallow = {
+		params: intent?.params ?? null,
+		route: intent ? { id: intent.route.id } : null,
+		url
+	};
+
+	if (!nav) return;
+
+	const { activeElement } = document;
+
+	await settled();
+
+	if (navigation_token !== nav_token) {
+		// a new navigation happened while we were waiting for the DOM to update, so abort
+		nav.reject(new Error('navigation aborted'));
+		return;
+	}
+
+	reset_scroll_and_focus(url, reset ? null : scroll_state(), reset, activeElement);
+
+	is_navigating = false;
+	nav.fulfil(undefined);
+
+	if (nav.navigation.to) {
+		nav.navigation.to.scroll = scroll_state();
+	}
+
+	after_navigate_callbacks.forEach((fn) =>
+		fn(/** @type {import('@sveltejs/kit').AfterNavigate} */ (nav.navigation))
+	);
+
+	navigating.current = null;
+	updating = false;
 }
 
 /**
@@ -2681,15 +2898,13 @@ export async function applyAction(result) {
 		page.status = result.status;
 
 		/** @type {Record<string, any>} */
-		root.$set({
-			// this brings Svelte's view of the world in line with SvelteKit's
-			// after use:enhance reset the form....
-			form: null
-		});
+		// this brings Svelte's view of the world in line with SvelteKit's
+		// after use:enhance reset the form....
+		props.form = null;
 
 		// ...so that setting the `form` prop takes effect and isn't ignored
-		await svelte.tick();
-		root.$set({ form: result.data });
+		await tick();
+		props.form = result.data;
 
 		if (result.type === 'success') {
 			reset_focus(/** @type {URL} */ (page.url));
@@ -2719,11 +2934,9 @@ export async function set_nearest_error_page(error) {
 
 		current = { ...navigation_result.state, nav: current.nav };
 
-		root.$set(navigation_result.props);
-		current_tree = navigation_result.props.tree;
-		update(navigation_result.props.page);
+		apply_navigation_result(navigation_result);
 
-		void svelte.tick().then(() => reset_focus(current.url));
+		void tick().then(() => reset_focus(current.url));
 	}
 }
 
@@ -2866,17 +3079,21 @@ function _start_router() {
 				return;
 			}
 			// set this flag to distinguish between navigations triggered by
-			// clicking a hash link and those triggered by popstate
-			hash_navigating = true;
+			// clicking a hash link and those triggered by popstate. We gotta retrieve
+			// history metadata here because the hashchange event will occur after history.state was updated
+			hash_navigating = {
+				.../** @type {HistoryMetadata} */ (get_history_metadata()),
+				resetIndex: current_reset_index + (options.reset ? 1 : 0)
+			};
 
-			update_scroll_positions(current_history_index);
+			capture_scroll(current_history_index);
 
 			update_url(url);
 
 			if (!options.replace_state) return;
 
 			// hashchange event shouldn't occur if the router is replacing state.
-			hash_navigating = false;
+			hash_navigating = null;
 		}
 
 		event.preventDefault();
@@ -2894,8 +3111,7 @@ function _start_router() {
 		await navigate({
 			type: 'link',
 			url,
-			keepfocus: options.keepfocus,
-			noscroll: options.noscroll,
+			reset: options.reset,
 			replace_state: options.replace_state ?? url.href === location.href,
 			event
 		});
@@ -2941,8 +3157,7 @@ function _start_router() {
 		void navigate({
 			type: 'form',
 			url,
-			keepfocus: options.keepfocus,
-			noscroll: options.noscroll,
+			reset: options.reset,
 			replace_state: options.replace_state ?? url.href === location.href,
 			event
 		});
@@ -2951,53 +3166,82 @@ function _start_router() {
 	addEventListener('popstate', async (event) => {
 		if (resetting_focus) return;
 
-		if (event.state?.[HISTORY_INDEX]) {
-			const history_index = event.state[HISTORY_INDEX];
+		const history_metadata = get_history_metadata(event.state);
+
+		if (history_metadata?.historyIndex) {
+			const history_index = history_metadata.historyIndex;
+			const source_info = history_info[current_history_index];
 			navigation_token = invalidation_token = {};
 
 			// if a popstate-driven navigation is cancelled, we need to counteract it
 			// with history.go, which means we end up back here, hence this check
 			if (history_index === current_history_index) return;
 
-			const scroll = scroll_positions[history_index];
-			const state = event.state[STATES_KEY] ?? {};
-			const url = new URL(event.state[PAGE_URL_KEY] ?? location.href);
-			const navigation_index = event.state[NAVIGATION_INDEX];
-			const is_hash_change = current.url ? strip_hash(location) === strip_hash(current.url) : false;
+			const delta = history_index - current_history_index;
+			const reset_index = history_metadata.resetIndex;
+			const reset = reset_index !== (source_info?.resetIndex ?? current_reset_index);
+			const scroll = history_info[history_index]?.scroll;
+			const state = history_metadata.state;
+			const url = new URL(history_metadata.pageUrl ?? location.href);
+			const navigation_index = history_metadata.navigationIndex;
+			const is_hash_change =
+				current.url && (location.href + current.url.href).includes('#') // check if even has a hash
+					? strip_hash(location) === strip_hash(current.url)
+					: false;
 			const shallow =
-				navigation_index === current_navigation_index && (has_navigated || is_hash_change);
+				navigation_index === current_navigation_index &&
+				((has_navigated &&
+					(history_metadata.pageUrl === undefined || history_metadata.pageUrl === location.href)) ||
+					is_hash_change);
+			const shallow_url = history_metadata.pageUrl ? new URL(location.href) : null;
+			const shallow_intent = shallow_url
+				? await get_navigation_intent(shallow_url, false)
+				: undefined;
+			const shallow_target = shallow_url
+				? {
+						params: shallow_intent?.params ?? null,
+						route: shallow_intent ? { id: shallow_intent.route.id } : null,
+						url: shallow_url
+					}
+				: null;
 
 			if (shallow) {
 				// We don't need to navigate, we just need to update scroll and/or state.
 				// This happens with hash links and `pushState`/`replaceState`. The
 				// exception is if we haven't navigated yet, since we could have
 				// got here after a modal navigation then a reload
+
+				blur_active_element(reset);
+
 				if (state !== page.state) {
 					page.state = state;
 				}
 
-				update_url(url);
+				page.shallow = shallow_target;
 
-				scroll_positions[current_history_index] = scroll_state();
-				if (scroll) scrollTo(scroll.x, scroll.y);
+				update_url(url);
 
+				capture_scroll(current_history_index);
 				current_history_index = history_index;
+				current_reset_index = reset_index;
+				if (reset && scroll) scrollTo(scroll.x, scroll.y);
 				return;
 			}
 
-			const delta = history_index - current_history_index;
-
 			await navigate({
 				type: 'popstate',
 				url,
+				reset,
 				popped: {
 					state,
 					scroll,
-					delta
+					delta,
+					shallow: shallow_target
 				},
 				accept: () => {
 					current_history_index = history_index;
 					current_navigation_index = navigation_index;
+					current_reset_index = reset_index;
 				},
 				block: () => {
 					history.go(-delta);
@@ -3026,16 +3270,22 @@ function _start_router() {
 		// if the hashchange happened as a result of clicking on a link,
 		// we need to update history, otherwise we have to leave it alone
 		if (hash_navigating) {
-			hash_navigating = false;
+			const history_metadata = hash_navigating;
+			hash_navigating = null;
+			current_reset_index = history_metadata.resetIndex;
 			history.replaceState(
 				{
 					...history.state,
-					[HISTORY_INDEX]: ++current_history_index,
-					[NAVIGATION_INDEX]: current_navigation_index
+					[HISTORY_METADATA_KEY]: {
+						...history_metadata,
+						historyIndex: ++current_history_index,
+						navigationIndex: current_navigation_index
+					}
 				},
 				'',
 				location.href
 			);
+			set_history_options(current_history_index, history_metadata);
 		}
 	});
 
@@ -3102,7 +3352,7 @@ async function _hydrate(
 
 	/** @type {import('./types.js').NavigationFinished | undefined} */
 	let result;
-	let hydrate = true;
+	let should_hydrate = true;
 
 	try {
 		const branch_promises = node_ids.map(async (n, i) => {
@@ -3168,7 +3418,7 @@ async function _hydrate(
 		});
 
 		target.textContent = '';
-		hydrate = false;
+		should_hydrate = false;
 	}
 
 	// Exit early when we encounter a redirect while loading the root error page.
@@ -3176,10 +3426,11 @@ async function _hydrate(
 	if (!result) return;
 
 	if (result.props.page) {
-		result.props.page.state = {};
+		const history_metadata = get_history_metadata();
+		result.props.page.state = history_metadata?.persistState ? history_metadata.state : {};
 	}
 
-	await initialize(result, target, hydrate);
+	await initialize(result, target, should_hydrate);
 }
 
 /**
@@ -3206,20 +3457,19 @@ async function load_data(url, invalid) {
 	notify_version(res.headers.get('x-sveltekit-version'));
 
 	if (!res.ok) {
-		// error message is a JSON-stringified string which devalue can't handle at the top level
 		// turn it into a HttpError to not call handleError on the client again (was already handled on the server)
 		// if `__data.json` doesn't exist or the server has an internal error,
 		// avoid parsing the HTML error page as a JSON
-		/** @type {string | undefined} */
-		let message;
+		/** @type {App.Error} */
+		let error = { status: res.status, message: 'Internal Error' };
+
 		if (res.headers.get('content-type')?.includes('application/json')) {
-			message = await res.json();
+			error = { status: res.status, ...(await res.json()) };
 		} else if (res.status === 404) {
-			message = 'Not Found';
-		} else if (res.status === 500) {
-			message = 'Internal Error';
+			error.message = 'Not Found';
 		}
-		throw new HttpError(res.status, message);
+
+		throw new HttpError(error);
 	}
 
 	return new Promise((resolve, reject) => {
@@ -3412,8 +3662,18 @@ function reset_focus(url, scroll = true) {
  * @param {URL | null} url
  * @param {T} type
  * @param {{ x: number, y: number } | null} [target_scroll] The scroll position for the target (for popstate navigations)
+ * @param {boolean} [shallow]
+ * @param {{ params: Record<string, string> | null; route: { id: string } | null; url: URL }} [target]
  */
-function create_navigation(current, intent, url, type, target_scroll = null) {
+function create_navigation(
+	current,
+	intent,
+	url,
+	type,
+	target_scroll = null,
+	shallow = false,
+	target
+) {
 	/** @type {(value: any) => void} */
 	let fulfil;
 
@@ -3437,13 +3697,14 @@ function create_navigation(current, intent, url, type, target_scroll = null) {
 			scroll: scroll_state()
 		},
 		to: url && {
-			params: intent?.params ?? null,
-			route: { id: intent?.route?.id ?? null },
-			url,
+			params: target ? target.params : (intent?.params ?? null),
+			route: { id: target ? (target.route?.id ?? null) : (intent?.route?.id ?? null) },
+			url: target?.url ?? url,
 			scroll: target_scroll
 		},
-		willUnload: !intent,
+		willUnload: !shallow && !intent,
 		type,
+		shallow,
 		complete
 	});
 
@@ -3516,3 +3777,21 @@ if (DEV) {
 		});
 	}
 }
+
+/**
+ * @param {NavigationFinished} result
+ */
+function apply_navigation_result(result) {
+	Object.assign(page, result.props.page);
+
+	props.tree.data = result.props.tree.data;
+	props.tree.child = result.props.tree.child;
+
+	if ('form' in result.props) {
+		props.form = result.props.form;
+	}
+
+	if ('error' in result.props) {
+		props.error = result.props.error;
+	}
+}