@hybridly/core 0.10.0-beta.14 → 0.10.0-beta.15

package/dist/index.mjs

@@ -1,59 +1,355 @@
 import { t as __exportAll } from "./_chunks/chunk.mjs";
-import { debounce, debug, hasFiles, match, merge, objectToFormData, random, removeTrailingSlash, showResponseErrorModal, when } from "@hybridly/utils";
-import axios from "axios";
-import { parse, stringify } from "superjson";
-import qs from "qs";
-//#region src/constants.ts
-var constants_exports = /* @__PURE__ */ __exportAll({
-	DIALOG_KEY_HEADER: () => DIALOG_KEY_HEADER,
-	DIALOG_REDIRECT_HEADER: () => DIALOG_REDIRECT_HEADER,
-	ERROR_BAG_HEADER: () => ERROR_BAG_HEADER,
-	EXCEPT_DATA_HEADER: () => EXCEPT_DATA_HEADER,
-	EXTERNAL_NAVIGATION_HEADER: () => EXTERNAL_NAVIGATION_HEADER,
-	EXTERNAL_NAVIGATION_TARGET_HEADER: () => EXTERNAL_NAVIGATION_TARGET_HEADER,
-	HYBRIDLY_HEADER: () => HYBRIDLY_HEADER,
-	ONLY_DATA_HEADER: () => ONLY_DATA_HEADER,
-	PARTIAL_COMPONENT_HEADER: () => PARTIAL_COMPONENT_HEADER,
-	SCROLL_REGION_ATTRIBUTE: () => SCROLL_REGION_ATTRIBUTE,
-	STORAGE_EXTERNAL_KEY: () => STORAGE_EXTERNAL_KEY,
-	VERSION_HEADER: () => VERSION_HEADER
-});
-const STORAGE_EXTERNAL_KEY = "hybridly:external";
-const HYBRIDLY_HEADER = "x-hybrid";
-const EXTERNAL_NAVIGATION_HEADER = `${HYBRIDLY_HEADER}-external`;
-const EXTERNAL_NAVIGATION_TARGET_HEADER = `${HYBRIDLY_HEADER}-external-target`;
-const PARTIAL_COMPONENT_HEADER = `${HYBRIDLY_HEADER}-partial-component`;
-const ONLY_DATA_HEADER = `${HYBRIDLY_HEADER}-only-data`;
-const DIALOG_KEY_HEADER = `${HYBRIDLY_HEADER}-dialog-key`;
-const DIALOG_REDIRECT_HEADER = `${HYBRIDLY_HEADER}-dialog-redirect`;
-const EXCEPT_DATA_HEADER = `${HYBRIDLY_HEADER}-except-data`;
-const VERSION_HEADER = `${HYBRIDLY_HEADER}-version`;
-const ERROR_BAG_HEADER = `${HYBRIDLY_HEADER}-error-bag`;
-const SCROLL_REGION_ATTRIBUTE = "scroll-region";
+import { debug, getByPath, hasFiles, merge, mergeObject, objectToFormData, random, showResponseErrorModal, wrap } from "@hybridly/utils";
+import { trimEnd } from "es-toolkit/string";
+import { parse, stringify } from "picoquery";
+import { debounce } from "es-toolkit/function";
+import { parse as parse$1, stringify as stringify$1 } from "superjson";
+import { get, set, uniqBy } from "es-toolkit/compat";
+//#region src/query.ts
+function parseQueryString(query) {
+	const source = query.startsWith("?") ? query.slice(1) : query;
+	if (!source) return {};
+	return parse(source, {
+		nesting: true,
+		nestingSyntax: "index",
+		arrayRepeat: true,
+		arrayRepeatSyntax: "bracket"
+	});
+}
+function stringifyQueryString(value, options = {}) {
+	const normalizedQuery = unescapeBracketSyntaxInKeys(stringify(normalizeQueryValue(value), {
+		nesting: true,
+		nestingSyntax: "index",
+		arrayRepeat: (options.arrayFormat ?? "brackets") === "brackets",
+		arrayRepeatSyntax: "bracket"
+	}));
+	if (!normalizedQuery) return "";
+	return options.addQueryPrefix ? `?${normalizedQuery}` : normalizedQuery;
+}
+function unescapeBracketSyntaxInKeys(query) {
+	if (!query) return query;
+	return query.split("&").map((entry) => {
+		const separator = entry.indexOf("=");
+		if (separator < 0) return decodeBracketSyntax(entry);
+		const key = entry.slice(0, separator);
+		const value = entry.slice(separator);
+		return `${decodeBracketSyntax(key)}${value}`;
+	}).join("&");
+}
+function decodeBracketSyntax(value) {
+	return value.replace(/%5B/gi, "[").replace(/%5D/gi, "]");
+}
+function normalizeQueryValue(value) {
+	if (value instanceof Set) return [...value].map((entry) => normalizeQueryValue(entry));
+	if (Array.isArray(value)) return value.map((entry) => normalizeQueryValue(entry));
+	if (isPlainObject(value)) return Object.entries(value).reduce((result, [key, entry]) => ({
+		...result,
+		[key]: normalizeQueryValue(entry)
+	}), {});
+	return value;
+}
+function isPlainObject(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype;
+}
 //#endregion
-//#region src/errors.ts
-var NotAHybridResponseError = class extends Error {
-	constructor(response) {
-		super();
-		this.response = response;
+//#region src/url.ts
+/** Normalizes the given input to an URL. */
+function normalizeUrl(href, trailingSlash) {
+	return makeUrl(href, { trailingSlash }).toString();
+}
+/**
+* Converts an input to an URL, optionally changing its properties after initialization.
+*/
+function makeUrl(href, transformations = {}) {
+	try {
+		const base = document?.location?.href === "//" ? void 0 : document.location.href;
+		const url = new URL(String(href), base);
+		transformations = typeof transformations === "function" ? transformations(url) ?? {} : transformations ?? {};
+		Object.entries(transformations).forEach(([key, value]) => {
+			if (key === "query") {
+				const currentQueryParameters = merge(parseQueryString(url.search), value, { mergePlainObjects: true });
+				key = "search";
+				value = stringifyQueryString(currentQueryParameters, { arrayFormat: "brackets" });
+			}
+			Reflect.set(url, key, value);
+		});
+		if (transformations.trailingSlash === false) {
+			const _url = trimEnd(url.toString().replace(/\/\?/, "?"), "/");
+			url.toString = () => _url;
+		}
+		return url;
+	} catch (error) {
+		throw new TypeError(`${href} is not resolvable to a valid URL.`);
 	}
-};
-var NavigationCancelledError = class extends Error {};
-var RoutingNotInitialized = class extends Error {
-	constructor() {
-		super("Routing is not initialized. Make sure the Vite plugin is enabled and that `php artisan route:list` returns no error.");
+}
+/**
+* Checks if the given URLs have the same origin and path.
+*/
+function sameUrls(...hrefs) {
+	if (hrefs.length < 2) return true;
+	try {
+		return hrefs.every((href) => {
+			return makeUrl(href, { hash: "" }).toJSON() === makeUrl(hrefs.at(0), { hash: "" }).toJSON();
+		});
+	} catch {}
+	return false;
+}
+/**
+* Checks if the given URLs have the same origin, path, and hash.
+*/
+function sameHashes(...hrefs) {
+	if (hrefs.length < 2) return true;
+	try {
+		return hrefs.every((href) => {
+			return makeUrl(href).toJSON() === makeUrl(hrefs.at(0)).toJSON();
+		});
+	} catch {}
+	return false;
+}
+/**
+* If the back-end did not specify a hash, if the navigation specified one,
+* and both URLs lead to the same endpoint, we update the target URL
+* to use the hash of the initially-requested URL.
+*/
+function fillHash(currentUrl, targetUrl) {
+	currentUrl = makeUrl(currentUrl);
+	targetUrl = makeUrl(targetUrl);
+	if (currentUrl.hash && !targetUrl.hash && sameUrls(targetUrl, currentUrl)) targetUrl.hash = currentUrl.hash;
+	return targetUrl.toString();
+}
+//#endregion
+//#region src/http/client.ts
+var HttpError = class extends Error {
+	constructor(message, options) {
+		super(message);
+		this.isHttpError = true;
+		this.name = "HttpError";
+		this.config = options.config;
+		this.request = options.request;
+		this.response = options.response;
+		this.code = options.code ?? "ERR_NETWORK";
+		this.kind = options.kind ?? "network";
+		this.reason = options.reason;
 	}
 };
-var RouteNotFound = class extends Error {
-	constructor(name) {
-		super(`Route [${name}] does not exist.`);
+var HttpAbortError = class extends HttpError {
+	constructor(options) {
+		super("The request was aborted.", {
+			...options,
+			code: options.code ?? "ERR_ABORTED",
+			kind: options.kind ?? "abort"
+		});
+		this.name = "AbortError";
 	}
 };
-var MissingRouteParameter = class extends Error {
-	constructor(parameter, routeName) {
-		super(`Parameter [${parameter}] is required for route [${routeName}].`);
+function isHttpError(error) {
+	return error instanceof Error && error.isHttpError === true;
+}
+function isHttpAbortError(error) {
+	return isHttpError(error) && error.kind === "abort";
+}
+function createXhrHttpClient() {
+	return { request: async (config) => await requestWithXhr(config) };
+}
+function requestWithXhr(config) {
+	return new Promise((resolve, reject) => {
+		let settled = false;
+		const resolveOnce = (response) => {
+			if (settled) return;
+			settled = true;
+			cleanupAbort?.();
+			resolve(response);
+		};
+		const rejectOnce = (error) => {
+			if (settled) return;
+			settled = true;
+			cleanupAbort?.();
+			reject(error);
+		};
+		const xhr = new XMLHttpRequest();
+		const method = config.method ?? "GET";
+		const url = buildUrl(config.url, config.params);
+		const headers = normalizeHeaders(config.headers);
+		const body = toRequestBody(config.data, headers);
+		const cleanupAbort = registerAbortSignal(config.signal, xhr, (reason) => {
+			rejectOnce(new HttpAbortError({
+				config,
+				request: xhr,
+				reason
+			}));
+		});
+		if (config.signal?.aborted) {
+			rejectOnce(new HttpAbortError({
+				config,
+				request: xhr,
+				reason: config.signal.reason
+			}));
+			return;
+		}
+		xhr.open(method, url, true);
+		xhr.responseType = "arraybuffer";
+		for (const [key, value] of Object.entries(headers)) xhr.setRequestHeader(key, value);
+		if (config.onUploadProgress) xhr.upload.onprogress = (event) => {
+			const total = event.lengthComputable ? event.total : void 0;
+			const percentage = total && total > 0 ? Math.round(event.loaded / total * 100) : 0;
+			config.onUploadProgress?.({
+				loaded: event.loaded,
+				total,
+				lengthComputable: event.lengthComputable,
+				percentage
+			});
+		};
+		xhr.onload = () => {
+			resolveOnce(toResponse(xhr, config));
+		};
+		xhr.onerror = () => {
+			rejectOnce(new HttpError("Network Error", {
+				config,
+				request: xhr,
+				code: "ERR_NETWORK",
+				kind: "network"
+			}));
+		};
+		xhr.onabort = () => {
+			rejectOnce(new HttpAbortError({
+				config,
+				request: xhr,
+				reason: config.signal?.reason
+			}));
+		};
+		xhr.ontimeout = () => {
+			rejectOnce(new HttpError("The request timed out.", {
+				config,
+				request: xhr,
+				code: "ECONNABORTED",
+				kind: "timeout"
+			}));
+		};
+		try {
+			xhr.send(body);
+		} catch (error) {
+			rejectOnce(new HttpError("Network Error", {
+				config,
+				request: xhr,
+				code: "ERR_NETWORK",
+				kind: "network",
+				reason: error
+			}));
+		}
+	});
+}
+function registerAbortSignal(signal, xhr, onAbort) {
+	if (!signal) return;
+	if (signal.aborted) {
+		onAbort(signal.reason);
+		return;
 	}
-};
+	const abort = () => {
+		onAbort(signal.reason);
+		xhr.abort();
+	};
+	signal.addEventListener("abort", abort, { once: true });
+	return () => signal.removeEventListener("abort", abort);
+}
+function buildUrl(url, params) {
+	if (!params || Object.keys(params).length === 0) return url;
+	return makeUrl(url, { query: params }).toString();
+}
+function normalizeHeaders(headers) {
+	if (!headers) return {};
+	return Object.entries(headers).reduce((result, [key, value]) => ({
+		...result,
+		[key]: String(value)
+	}), {});
+}
+function toRequestBody(data, headers) {
+	if (data === void 0 || data === null) return null;
+	if (typeof FormData !== "undefined" && data instanceof FormData) return data;
+	if (typeof data === "string" || data instanceof Blob || data instanceof URLSearchParams || data instanceof ArrayBuffer || ArrayBuffer.isView(data)) return data;
+	if (typeof data === "object") {
+		if (!hasHeader(headers, "content-type")) headers["Content-Type"] = "application/json";
+		return JSON.stringify(data);
+	}
+	return String(data);
+}
+function hasHeader(headers, headerName) {
+	const expected = headerName.toLowerCase();
+	return Object.keys(headers).some((header) => header.toLowerCase() === expected);
+}
+function toResponse(xhr, config) {
+	const headers = createHttpHeaders(parseResponseHeaders(xhr.getAllResponseHeaders()));
+	const rawData = toArrayBuffer(xhr.response);
+	return {
+		data: decodeResponseBody(rawData, headers),
+		rawData,
+		status: xhr.status,
+		statusText: xhr.statusText,
+		headers,
+		request: xhr,
+		config,
+		toBlob: (type) => {
+			const resolvedType = type ?? headers.get("content-type");
+			return new Blob([rawData], { ...resolvedType ? { type: resolvedType } : {} });
+		}
+	};
+}
+function createHttpHeaders(values) {
+	const all = Object.freeze({ ...values });
+	const get = (name) => all[name.toLowerCase()];
+	const has = (name) => get(name) !== void 0;
+	const isContentType = (matcher) => {
+		const contentType = get("content-type");
+		if (!contentType) return false;
+		if (typeof matcher === "string") return contentType.toLowerCase().includes(matcher.toLowerCase());
+		return matcher.test(contentType);
+	};
+	return {
+		all,
+		get,
+		has,
+		isContentType
+	};
+}
+function toArrayBuffer(data) {
+	if (data instanceof ArrayBuffer) return data;
+	if (ArrayBuffer.isView(data)) return new Uint8Array(data.buffer, data.byteOffset, data.byteLength).slice().buffer;
+	if (typeof data === "string") return new TextEncoder().encode(data).buffer;
+	return /* @__PURE__ */ new ArrayBuffer(0);
+}
+function decodeResponseBody(rawData, headers) {
+	if (headers.isContentType(/(^|\b|\+)json(\b|;|$)/i)) {
+		const text = decodeText(rawData, headers);
+		try {
+			return JSON.parse(text);
+		} catch {
+			return text;
+		}
+	}
+	if (headers.isContentType(/^text\//i) || headers.isContentType(/xml|javascript|x-www-form-urlencoded/i)) return decodeText(rawData, headers);
+	return rawData;
+}
+function decodeText(rawData, headers) {
+	const charset = headers.get("content-type")?.match(/charset=([^;]+)/i)?.[1]?.trim();
+	try {
+		return new TextDecoder(charset).decode(rawData);
+	} catch {
+		return new TextDecoder().decode(rawData);
+	}
+}
+function parseResponseHeaders(rawHeaders) {
+	const lines = rawHeaders.split("\r\n").filter(Boolean);
+	const headers = {};
+	for (const line of lines) {
+		const separator = line.indexOf(":");
+		if (separator < 0) continue;
+		const name = line.slice(0, separator).trim().toLowerCase();
+		const value = line.slice(separator + 1).trim();
+		headers[name] = name in headers ? `${headers[name]}, ${value}` : value;
+	}
+	return headers;
+}
 //#endregion
 //#region src/plugins/plugin.ts
 function definePlugin(plugin) {
@@ -119,6 +415,36 @@ function registerHook(hook, fn, options) {
 	return appendCallbackToHooks(hook, fn);
 }
 //#endregion
+//#region src/constants.ts
+var constants_exports = /* @__PURE__ */ __exportAll({
+	DIALOG_KEY_HEADER: () => DIALOG_KEY_HEADER,
+	DIALOG_REDIRECT_HEADER: () => DIALOG_REDIRECT_HEADER,
+	ERROR_BAG_HEADER: () => ERROR_BAG_HEADER,
+	EXCEPT_DATA_HEADER: () => EXCEPT_DATA_HEADER,
+	EXTERNAL_NAVIGATION_HEADER: () => EXTERNAL_NAVIGATION_HEADER,
+	EXTERNAL_NAVIGATION_TARGET_HEADER: () => EXTERNAL_NAVIGATION_TARGET_HEADER,
+	HYBRIDLY_HEADER: () => HYBRIDLY_HEADER,
+	ONLY_DATA_HEADER: () => ONLY_DATA_HEADER,
+	PARTIAL_COMPONENT_HEADER: () => PARTIAL_COMPONENT_HEADER,
+	RESET_HEADER: () => RESET_HEADER,
+	SCROLL_REGION_ATTRIBUTE: () => SCROLL_REGION_ATTRIBUTE,
+	STORAGE_EXTERNAL_KEY: () => STORAGE_EXTERNAL_KEY,
+	VERSION_HEADER: () => VERSION_HEADER
+});
+const STORAGE_EXTERNAL_KEY = "hybridly:external";
+const HYBRIDLY_HEADER = "x-hybrid";
+const EXTERNAL_NAVIGATION_HEADER = `${HYBRIDLY_HEADER}-external`;
+const EXTERNAL_NAVIGATION_TARGET_HEADER = `${HYBRIDLY_HEADER}-external-target`;
+const PARTIAL_COMPONENT_HEADER = `${HYBRIDLY_HEADER}-partial-component`;
+const RESET_HEADER = `${HYBRIDLY_HEADER}-reset`;
+const ONLY_DATA_HEADER = `${HYBRIDLY_HEADER}-only-data`;
+const DIALOG_KEY_HEADER = `${HYBRIDLY_HEADER}-dialog-key`;
+const DIALOG_REDIRECT_HEADER = `${HYBRIDLY_HEADER}-dialog-redirect`;
+const EXCEPT_DATA_HEADER = `${HYBRIDLY_HEADER}-except-data`;
+const VERSION_HEADER = `${HYBRIDLY_HEADER}-version`;
+const ERROR_BAG_HEADER = `${HYBRIDLY_HEADER}-error-bag`;
+const SCROLL_REGION_ATTRIBUTE = "scroll-region";
+//#endregion
 //#region src/scroll.ts
 /** Saves the current view's scrollbar positions into the history state. */
 function saveScrollPositions() {
@@ -158,6 +484,7 @@ function resetScrollPositions() {
 }
 /** Restores the scroll positions stored in the context. */
 async function restoreScrollPositions() {
+	debug.scroll("Restoring scroll positions.");
 	const context = getRouterContext();
 	const regions = getScrollRegions();
 	if (!context.scrollRegions) {
@@ -173,74 +500,651 @@ async function restoreScrollPositions() {
 	});
 }
 //#endregion
-//#region src/url.ts
-/** Normalizes the given input to an URL. */
-function normalizeUrl(href, trailingSlash) {
-	return makeUrl(href, { trailingSlash }).toString();
+//#region src/errors.ts
+var HybridlyError = class extends Error {
+	constructor(message, options) {
+		super(message);
+		this.isHybridlyError = true;
+		this.name = "HybridlyError";
+		this.kind = options.kind;
+		this.code = options.code;
+		this.details = options.details;
+		this.cause = options.cause;
+	}
+};
+var InvalidResponseError = class extends HybridlyError {
+	constructor(options = {}) {
+		super("The response was not a valid hybrid response.", {
+			...options,
+			kind: "response.invalid",
+			code: "HYB_INVALID_RESPONSE"
+		});
+		this.name = "InvalidResponseError";
+	}
+};
+var NavigationCancelledError = class extends HybridlyError {
+	constructor(message = "The navigation was cancelled.", options = {}) {
+		super(message, {
+			...options,
+			kind: "navigation.cancelled",
+			code: "HYB_NAVIGATION_CANCELLED"
+		});
+		this.name = "NavigationCancelledError";
+	}
+};
+var RoutingNotInitialized = class extends HybridlyError {
+	constructor(options = {}) {
+		super("Routing is not initialized. Make sure the Vite plugin is enabled and that `php artisan route:list` returns no error.", {
+			...options,
+			kind: "routing.not-initialized",
+			code: "HYB_ROUTING_NOT_INITIALIZED"
+		});
+		this.name = "RoutingNotInitialized";
+	}
+};
+var RouteNotFound = class extends HybridlyError {
+	constructor(name, options = {}) {
+		super(`Route [${name}] does not exist.`, {
+			...options,
+			kind: "routing.route-not-found",
+			code: "HYB_ROUTE_NOT_FOUND",
+			details: { name }
+		});
+		this.name = "RouteNotFound";
+	}
+};
+var MissingRouteParameter = class extends HybridlyError {
+	constructor(parameter, routeName, options = {}) {
+		super(`Parameter [${parameter}] is required for route [${routeName}].`, {
+			...options,
+			kind: "routing.missing-parameter",
+			code: "HYB_MISSING_ROUTE_PARAMETER",
+			details: {
+				parameter,
+				routeName
+			}
+		});
+		this.name = "MissingRouteParameter";
+	}
+};
+function isHybridlyError(error) {
+	return error instanceof Error && error.isHybridlyError === true;
+}
+function isNavigationCancelledError(error) {
+	return isHybridlyError(error) && error.kind === "navigation.cancelled";
+}
+//#endregion
+//#region src/download.ts
+/** Checks if the response wants to redirect to an external URL. */
+function isDownloadResponse(response) {
+	return response.status === 200 && response.headers.has("content-disposition");
+}
+/** Handles a download. */
+async function handleDownloadResponse(response) {
+	const blob = response.toBlob();
+	const urlObject = window.webkitURL || window.URL;
+	const link = document.createElement("a");
+	link.style.display = "none";
+	link.href = urlObject.createObjectURL(blob);
+	link.download = getFileNameFromContentDispositionHeader(response.headers.get("content-disposition") ?? "");
+	link.click();
+	setTimeout(() => {
+		urlObject.revokeObjectURL(link.href);
+		link.remove();
+	}, 0);
+}
+function getFileNameFromContentDispositionHeader(header) {
+	return (header.split(";")[1]?.trim().split("=")[1])?.replace(/^"(.*)"$/, "$1") ?? "";
+}
+//#endregion
+//#region src/utils.ts
+function createPromiseWithResolvers() {
+	let resolve;
+	let reject;
+	return {
+		promise: new Promise((_resolve, _reject) => {
+			resolve = _resolve;
+			reject = _reject;
+		}),
+		resolve,
+		reject
+	};
+}
+//#endregion
+//#region src/router/request/request.ts
+function createPendingHybridRequest(options) {
+	const context = getRouterContext();
+	const url = makeUrl(options.url ?? context.url, options.transformUrl);
+	const { promise, resolve } = createPromiseWithResolvers();
+	return {
+		url,
+		options,
+		promise,
+		resolve,
+		id: random(),
+		controller: options.abortController ?? new AbortController(),
+		cancelled: false,
+		completed: false,
+		interrupted: false,
+		view: context.view
+	};
+}
+async function sendHybridRequest(request) {
+	const context = getInternalRouterContext();
+	return await context.http.request({
+		url: request.url.toString(),
+		method: request.options.method,
+		data: request.options.method === "GET" ? {} : request.options.data,
+		params: request.options.method === "GET" ? request.options.data : {},
+		signal: request.controller?.signal,
+		headers: {
+			...request.options.headers,
+			...context.dialog ? { [DIALOG_KEY_HEADER]: context.dialog.key } : {},
+			...context.dialog ? { [DIALOG_REDIRECT_HEADER]: context.dialog.redirectUrl ?? "" } : {},
+			...mergeObject(request.options.only || request.options.except || request.options.reset, {
+				[PARTIAL_COMPONENT_HEADER]: context.view.component,
+				...mergeObject(request.options.reset, { [RESET_HEADER]: JSON.stringify(wrap(request.options.reset)) }),
+				...mergeObject(request.options.only, { [ONLY_DATA_HEADER]: JSON.stringify(wrap(request.options.only)) }),
+				...mergeObject(request.options.except, { [EXCEPT_DATA_HEADER]: JSON.stringify(wrap(request.options.except)) })
+			}),
+			...mergeObject(request.options.errorBag, { [ERROR_BAG_HEADER]: request.options.errorBag }),
+			...mergeObject(context.version, { [VERSION_HEADER]: context.version }),
+			[HYBRIDLY_HEADER]: "true",
+			"X-Requested-With": "XMLHttpRequest",
+			"Accept": "text/html, application/xhtml+xml"
+		},
+		onUploadProgress: async (progress) => {
+			await runHooks("progress", request.options.hooks, progress, request, context);
+		}
+	});
+}
+async function performHybridRequest(request) {
+	enqueueRequest(request);
+	return request.promise;
+}
+/** Performs every action necessary to make a hybrid navigation. */
+async function performHybridNavigation(options) {
+	const context = getRouterContext();
+	debug.router("Making a hybrid navigation:", {
+		context,
+		options
+	});
+	await transformOptions(options);
+	const request = createPendingHybridRequest(options);
+	if (!await runHooks("before", options.hooks, request, context)) {
+		debug.router("\"before\" event returned false, aborting the navigation.");
+		return { error: new NavigationCancelledError("The navigation was cancelled by the \"before\" event.") };
+	}
+	await runHooks("start", options.hooks, request, context);
+	debug.router("Making request with the configured HTTP client.");
+	return await performHybridRequest(request);
 }
 /**
-* Converts an input to an URL, optionally changing its properties after initialization.
+* Transform the options object with convenience changes.
 */
-function makeUrl(href, transformations = {}) {
-	try {
-		const base = document?.location?.href === "//" ? void 0 : document.location.href;
-		const url = new URL(String(href), base);
-		transformations = typeof transformations === "function" ? transformations(url) ?? {} : transformations ?? {};
-		Object.entries(transformations).forEach(([key, value]) => {
-			if (key === "query") {
-				const currentQueryParameters = merge(qs.parse(url.search, { ignoreQueryPrefix: true }), value, { mergePlainObjects: true });
-				key = "search";
-				value = qs.stringify(currentQueryParameters, {
-					encodeValuesOnly: true,
-					arrayFormat: "brackets",
-					filter: (_, object) => object instanceof Set ? [...object] : object
+async function transformOptions(options) {
+	const context = getRouterContext();
+	if (!options.method) {
+		debug.router("Setting method to GET because none was provided.");
+		options.method = "GET";
+	}
+	options.method = options.method.toUpperCase();
+	options.mode ??= "navigation";
+	options.cancelOnNavigation ??= false;
+	options.interruptAsyncOnStart ??= "none";
+	if (options.mode === "async" && options.progress === void 0) options.progress = false;
+	if (options.mode === "async" && options.replace === void 0) options.replace = true;
+	if ((hasFiles(options.data) || options.useFormData) && !(options.data instanceof FormData)) {
+		options.data = objectToFormData(options.data);
+		debug.router("Converted data to FormData.", options.data);
+	}
+	if (!(options.data instanceof FormData) && options.method === "GET" && Object.keys(options.data ?? {}).length) {
+		debug.router("Transforming data to query parameters.", options.data);
+		options.url = makeUrl(options.url ?? context.url, { query: options.data });
+		options.data = {};
+	}
+	if ([
+		"PUT",
+		"PATCH",
+		"DELETE"
+	].includes(options.method) && options.spoof !== false) {
+		debug.router(`Automatically spoofing method ${options.method}.`);
+		if (options.data instanceof FormData) options.data.append("_method", options.method);
+		else if (typeof options.data === "undefined") options.data = { _method: options.method };
+		else if (options.data instanceof Object && Object.keys(options.data).length >= 0) Object.assign(options.data, { _method: options.method });
+		else debug.router("Could not spoof method because body type is not supported.", options.data);
+		options.method = "POST";
+	}
+	return options;
+}
+//#endregion
+//#region src/router/view.ts
+/**
+* Makes an internal navigation that swaps the view and updates the context.
+* @internal
+*/
+async function navigate(options) {
+	const context = getRouterContext();
+	options.hasDialog ??= !!options.payload?.dialog;
+	debug.router("Making an internal navigation:", {
+		context,
+		options
+	});
+	await runHooks("navigating", {}, options, context);
+	options.payload ??= payloadFromContext();
+	options.payload.view ??= payloadFromContext().view;
+	options.payload.view.properties = options.properties ?? options.payload.view.properties;
+	function evaluateConditionalOption(option) {
+		return typeof option === "function" ? option(options) : option;
+	}
+	const shouldPreserveState = evaluateConditionalOption(options.preserveState);
+	const shouldPreserveScroll = evaluateConditionalOption(options.preserveScroll);
+	const shouldReplaceHistory = evaluateConditionalOption(options.replace);
+	const shouldReplaceUrl = evaluateConditionalOption(options.preserveUrl);
+	const shouldPreserveView = !options.payload.view.component;
+	if (shouldPreserveState && getHistoryMemo() && options.payload.view.component === context.view.component) {
+		debug.history("Setting the memo from this history entry into the current context.");
+		setContext({ memo: getHistoryMemo() });
+	}
+	if (shouldReplaceUrl) {
+		debug.router(`Preserving the current URL (${context.url}) instead of navigating to ${options.payload.url}`);
+		options.payload.url = context.url;
+	}
+	setContext({
+		...shouldPreserveView ? {
+			view: {
+				component: context.view.component,
+				properties: merge(context.view.properties, options.payload.view.properties),
+				deferred: context.view.deferred,
+				mergeable: context.view.mergeable
+			},
+			url: context.url,
+			version: options.payload.version,
+			validation: options.payload.validation,
+			dialog: context.dialog
+		} : options.payload,
+		memo: {}
+	});
+	if (options.updateHistoryState !== false) {
+		debug.router(`Target URL is ${context.url}, current window URL is ${window.location.href}.`, { shouldReplaceHistory });
+		setHistoryState({ replace: shouldReplaceHistory });
+	}
+	if (Object.entries(context.view.deferred ?? {}).length) {
+		debug.router("Request has deferred properties, queueing a partial reload:", context.view.deferred);
+		context.adapter.executeOnMounted(async () => {
+			return Promise.all(Object.entries(context.view.deferred).map(async ([_, properties]) => {
+				await performHybridNavigation({
+					preserveScroll: true,
+					preserveState: true,
+					replace: true,
+					mode: "async",
+					only: properties
 				});
-			}
-			Reflect.set(url, key, value);
+			}));
 		});
-		if (transformations.trailingSlash === false) {
-			const _url = removeTrailingSlash(url.toString().replace(/\/\?/, "?"));
-			url.toString = () => _url;
+	}
+	const viewComponent = !shouldPreserveView ? await context.adapter.resolveComponent(context.view.component) : void 0;
+	if (viewComponent) debug.router(`Component [${context.view.component}] resolved to:`, viewComponent);
+	await context.adapter.onViewSwap({
+		component: viewComponent,
+		dialog: context.dialog,
+		properties: options.payload?.view?.properties,
+		preserveState: shouldPreserveState,
+		onMounted: (hookOptions) => runHooks("mounted", {}, {
+			...options,
+			...hookOptions
+		}, context)
+	});
+	if (options.type === "back-forward" || shouldPreserveScroll) restoreScrollPositions();
+	else if (!shouldPreserveScroll) resetScrollPositions();
+	await runHooks("navigated", {}, options, context);
+}
+/** Performs a local navigation to the given component without a round-trip. */
+async function performLocalNavigation(targetUrl, options) {
+	const context = getRouterContext();
+	const url = normalizeUrl(targetUrl);
+	return await navigate({
+		...options,
+		type: "local",
+		payload: {
+			version: context.version,
+			validation: context.validation,
+			dialog: options?.dialog === false ? void 0 : options?.dialog ?? context.dialog,
+			url,
+			view: {
+				component: options?.component ?? context.view.component,
+				properties: options?.properties ?? {},
+				deferred: {},
+				mergeable: []
+			}
 		}
-		return url;
-	} catch (error) {
-		throw new TypeError(`${href} is not resolvable to a valid URL.`);
+	});
+}
+//#endregion
+//#region src/router/response/external.ts
+/**
+* Performs an external navigation by saving options to the storage and
+* making a full page reload. Upon loading, the navigation options
+* will be pulled and a hybrid navigation will be made.
+*/
+async function performExternalNavigation(options) {
+	debug.external("Navigating to an external URL:", options);
+	if (options.target === "new-tab") {
+		const link = document.createElement("a");
+		link.style.display = "none";
+		link.target = "_blank";
+		link.href = options.url;
+		link.click();
+		setTimeout(() => link.remove(), 0);
+		return;
+	}
+	window.sessionStorage.setItem(STORAGE_EXTERNAL_KEY, JSON.stringify(options));
+	window.location.href = options.url;
+	if (sameUrls(window.location, options.url)) {
+		debug.external("Manually reloading due to the external URL being the same.");
+		window.location.reload();
 	}
 }
+/** Navigates to the given URL without the hybrid protocol. */
+function navigateToExternalUrl(url, data) {
+	document.location.href = makeUrl(url, { search: stringifyQueryString(data, { arrayFormat: "brackets" }) }).toString();
+}
+/** Checks if the response wants to redirect to an external URL. */
+function isExternalResponse(response) {
+	return response.status === 409 && response.headers.has(EXTERNAL_NAVIGATION_HEADER);
+}
 /**
-* Checks if the given URLs have the same origin and path.
+* Performs the internal navigation when an external navigation to a hybrid view has been made.
+* This method is meant to be called on router creation.
 */
-function sameUrls(...hrefs) {
-	if (hrefs.length < 2) return true;
+async function handleExternalNavigation() {
+	debug.external("Handling an external navigation.");
+	const options = JSON.parse(window.sessionStorage.getItem("hybridly:external") || "{}");
+	window.sessionStorage.removeItem(STORAGE_EXTERNAL_KEY);
+	debug.external("Options from the session storage:", options);
+	setContext({ url: makeUrl(getRouterContext().url, { hash: window.location.hash }).toString() });
+	await navigate({
+		type: "initial",
+		preserveState: true,
+		preserveScroll: options.preserveScroll
+	});
+}
+/** Checks if the navigation being initialized points to an external location. */
+function isExternalNavigation() {
 	try {
-		return hrefs.every((href) => {
-			return makeUrl(href, { hash: "" }).toJSON() === makeUrl(hrefs.at(0), { hash: "" }).toJSON();
-		});
+		return window.sessionStorage.getItem(STORAGE_EXTERNAL_KEY) !== null;
 	} catch {}
 	return false;
 }
+//#endregion
+//#region src/router/response/response.ts
+async function handleHybridRequestResponse({ request, response }) {
+	debug.router("Handling response", response);
+	const context = getInternalRouterContext();
+	const options = request.options;
+	saveScrollPositions();
+	if (await runHooks("data", options.hooks, request, response, context) === false) return { response };
+	if (isExternalResponse(response)) {
+		debug.router("The response is explicitely external.");
+		await performExternalNavigation({
+			url: fillHash(request.url, response.headers.get(EXTERNAL_NAVIGATION_HEADER)),
+			preserveScroll: options.preserveScroll === true,
+			target: "current"
+		});
+		return { response };
+	}
+	if (isDownloadResponse(response)) {
+		debug.router("The response returns a file to download.");
+		await handleDownloadResponse(response);
+		return { response };
+	}
+	if (!isHybridResponse(response)) {
+		debug.router("The response was not hybrid.");
+		console.warn("Hybridly received an invalid response.", response);
+		await runHooks("fail", request.options.hooks, new InvalidResponseError(), request, context);
+		const prevented = !await runHooks("invalid", request.options.hooks, request, response, context);
+		if (context.responseErrorModals && !prevented) showResponseErrorModal(typeof response.data === "string" ? response.data : JSON.stringify(response.data, null, 2));
+		return { response };
+	}
+	debug.router("The response respects the Hybridly protocol.");
+	const payload = response.data;
+	const mergedValidation = mergeValidation(context.validation, payload.validation, options.errorBag);
+	const incomingErrors = resolveErrors(payload.validation, options.errorBag);
+	if (options.mode !== "async" || context.view.component === request.view.component) {
+		const properties = (() => {
+			if (!payload.view && !isPartial(options)) return;
+			if (!payload.view.component || payload.view.component === context.view.component) return resolveProperties(context.view.properties, payload.view);
+		})();
+		if (properties) debug.router("Merged properties:", properties);
+		await navigate({
+			type: "server",
+			properties,
+			payload: {
+				...payload,
+				validation: mergedValidation,
+				url: fillHash(request.url, payload.url)
+			},
+			preserveScroll: options.preserveScroll,
+			preserveState: options.preserveState,
+			preserveUrl: options.preserveUrl,
+			replace: options.replace === true || options.preserveUrl || sameUrls(payload.url, window.location.href) && !sameHashes(payload.url, window.location.href),
+			viewTransition: options.viewTransition
+		});
+	} else debug.router("Discarding navigation from an asynchronous request initiated on a previous page.");
+	if (Object.keys(incomingErrors).length > 0) {
+		debug.router("The request returned validation errors.", incomingErrors);
+		const errors = resolveErrors(context.validation, options.errorBag);
+		const resolvedErrors = Object.keys(errors).length > 0 ? errors : incomingErrors;
+		await runHooks("validation-error", options.hooks, resolvedErrors, request, context);
+	} else await runHooks("success", options.hooks, payload, request, response, context);
+	return { response };
+}
+/** Checks if the response contains a hybrid header. */
+function isHybridResponse(response) {
+	return response.headers.has(HYBRIDLY_HEADER);
+}
+function isPartial(options) {
+	return options.only !== void 0 || options.except !== void 0;
+}
+function resolveProperties(original, payload) {
+	const mergedPayloadProperties = merge(original, payload.properties);
+	(payload.mergeable ?? []).forEach(([mergeableProperty, prepends, uniqueBy]) => {
+		const originalValue = getByPath(original, mergeableProperty);
+		const newValue = getByPath(payload.properties, mergeableProperty);
+		const mergeArrays = (current, incoming) => {
+			const merged = prepends === true ? [...incoming, ...current] : [...current, ...incoming];
+			if (typeof uniqueBy !== "string") return merged;
+			const getUniqueKey = (entry) => {
+				const key = get(entry, uniqueBy);
+				return key === void 0 ? Symbol() : key;
+			};
+			if (prepends === true) return uniqBy(merged, getUniqueKey);
+			const orderedKeys = [];
+			const valuesByKey = /* @__PURE__ */ new Map();
+			for (const entry of merged) {
+				const key = getUniqueKey(entry);
+				if (!valuesByKey.has(key)) orderedKeys.push(key);
+				valuesByKey.set(key, entry);
+			}
+			return orderedKeys.map((key) => valuesByKey.get(key));
+		};
+		let value = newValue;
+		if (Array.isArray(originalValue)) value = mergeArrays(originalValue, Array.isArray(newValue) ? newValue : newValue === void 0 ? [] : [newValue]);
+		else if (originalValue instanceof Object && newValue instanceof Object) value = merge(originalValue, newValue, {
+			overwriteArray: false,
+			arrayMerge: (current, incoming) => mergeArrays(current, incoming)
+		});
+		set(mergedPayloadProperties, mergeableProperty, value);
+	});
+	return mergedPayloadProperties;
+}
+function mergeValidation(current, next, errorBag) {
+	if (!errorBag) return next;
+	return {
+		...current,
+		[errorBag]: next[errorBag] ?? {}
+	};
+}
+function resolveErrors(validation, errorBag) {
+	if (errorBag) return validation[errorBag] ?? {};
+	return validation.default ?? {};
+}
+//#endregion
+//#region src/router/response/response-manager.ts
+const queue = [];
+let processing = false;
 /**
-* Checks if the given URLs have the same origin, path, and hash.
+* Adds a response to the queue and starts processing it if not already doing so.
 */
-function sameHashes(...hrefs) {
-	if (hrefs.length < 2) return true;
+function enqueueResponse(response) {
+	debug.queue("Enqueuing response", response);
+	queue.push(response);
+	processResponseQueue();
+}
+async function processResponseQueue() {
+	if (processing) return;
+	processing = true;
+	await processNextResponse();
+	processing = false;
+}
+async function processNextResponse() {
+	const response = queue.shift();
+	if (!response) {
+		debug.queue("End of response queue.");
+		return;
+	}
+	debug.queue("Processing response", response);
+	response.request.resolve(await handleHybridRequestResponse(response));
+	return await processNextResponse();
+}
+//#endregion
+//#region src/router/request/request-manager.ts
+const activeRequests = {
+	navigation: void 0,
+	async: /* @__PURE__ */ new Map(),
+	asyncGroups: /* @__PURE__ */ new Map()
+};
+/**
+* Registers and starts a request.
+*/
+function enqueueRequest(request) {
+	debug.queue("Enqueuing request", request);
+	interruptRequestIfNeeded(request);
+	if (isAsyncRequest(request)) {
+		registerAsyncRequest(request);
+		processRequest(request, () => unregisterAsyncRequest(request));
+		return;
+	}
+	activeRequests.navigation = request;
+	processRequest(request, () => {
+		if (activeRequests.navigation?.id === request.id) activeRequests.navigation = void 0;
+	});
+}
+function isAsyncRequest(request) {
+	return request.options.mode === "async";
+}
+function registerAsyncRequest(request) {
+	activeRequests.async.set(request.id, request);
+	const group = request.options.group;
+	if (!group) return;
+	if (!activeRequests.asyncGroups.has(group)) activeRequests.asyncGroups.set(group, /* @__PURE__ */ new Set());
+	activeRequests.asyncGroups.get(group)?.add(request.id);
+}
+function unregisterAsyncRequest(request) {
+	activeRequests.async.delete(request.id);
+	const group = request.options.group;
+	if (!group) return;
+	const requests = activeRequests.asyncGroups.get(group);
+	if (!requests) return;
+	requests.delete(request.id);
+	if (requests.size === 0) activeRequests.asyncGroups.delete(group);
+}
+async function processRequest(request, onFinally) {
+	debug.queue("Processing request", request);
 	try {
-		return hrefs.every((href) => {
-			return makeUrl(href).toJSON() === makeUrl(hrefs.at(0)).toJSON();
+		enqueueResponse({
+			request,
+			response: await sendHybridRequest(request)
 		});
-	} catch {}
-	return false;
+	} catch (error) {
+		if (!(error instanceof Error)) error = /* @__PURE__ */ new Error("Unknown error during request processing.");
+		await handleTransportError(request, error);
+	} finally {
+		request.completed = true;
+		debug.router("Ended navigation.", request);
+		await runHooks("after", request.options.hooks, request, getRouterContext());
+		onFinally();
+	}
+}
+async function handleTransportError(request, error) {
+	const context = getRouterContext();
+	if (isHttpAbortError(error)) {
+		debug.router("The request was aborted.", error);
+		await runHooks("abort", request.options.hooks, request, context);
+		await runHooks("fail", request.options.hooks, error, request, context);
+		request.resolve({ error });
+		return;
+	}
+	if (isNavigationCancelledError(error)) {
+		debug.router("The request was cancelled through the \"before\" hook.", error);
+		await runHooks("abort", request.options.hooks, request, context);
+	} else {
+		debug.router("An unknown error occured.", error);
+		console.error(error);
+		await runHooks("exception", request.options.hooks, error, request, context);
+	}
+	await runHooks("fail", request.options.hooks, error, request, context);
+	request.resolve({ error });
+}
+/**
+* Interrupts active requests according to the starting request's policy.
+*/
+function interruptRequestIfNeeded(request) {
+	if (isAsyncRequest(request)) {
+		interruptAsyncRequestsOnStart(request);
+		return;
+	}
+	interruptNavigationRequest({ interrupted: true });
+	interruptAsyncRequestsCancelledByNavigation();
+	interruptAsyncRequestsOnStart(request);
+}
+function interruptNavigationRequest(options) {
+	const request = activeRequests.navigation;
+	if (!request) return;
+	activeRequests.navigation = void 0;
+	cancelRequest(request, options);
+}
+function interruptAsyncRequestsCancelledByNavigation() {
+	for (const request of activeRequests.async.values()) if (request.options.cancelOnNavigation) interruptAsyncRequest(request, { interrupted: true });
+}
+function interruptAsyncRequestsOnStart(request) {
+	debug.queue("Interrupting async requests", request);
+	if (request.options.interruptAsyncOnStart === "none") return;
+	if (request.options.interruptAsyncOnStart === "all") {
+		for (const current of activeRequests.async.values()) interruptAsyncRequest(current, { interrupted: true });
+		return;
+	}
+	if (!request.options.group) return;
+	for (const requestId of activeRequests.asyncGroups.get(request.options.group) ?? []) {
+		const current = activeRequests.async.get(requestId);
+		if (current) interruptAsyncRequest(current, { interrupted: true });
+	}
+}
+function interruptAsyncRequest(request, options) {
+	unregisterAsyncRequest(request);
+	cancelRequest(request, options);
 }
 /**
-* If the back-end did not specify a hash, if the navigation specified one,
-* and both URLs lead to the same endpoint, we update the target URL
-* to use the hash of the initially-requested URL.
+* Cancels the current navigation request.
 */
-function fillHash(currentUrl, targetUrl) {
-	currentUrl = makeUrl(currentUrl);
-	targetUrl = makeUrl(targetUrl);
-	if (currentUrl.hash && !targetUrl.hash && sameUrls(targetUrl, currentUrl)) targetUrl.hash = currentUrl.hash;
-	return targetUrl.toString();
+function cancelNavigationRequest() {
+	interruptNavigationRequest({ cancelled: true });
+}
+function cancelRequest(request, options) {
+	request.completed = false;
+	request.cancelled = options.cancelled ?? false;
+	request.interrupted = options.interrupted ?? false;
+	request.controller.abort();
 }
 //#endregion
 //#region src/router/history.ts
@@ -276,10 +1180,7 @@ async function registerEventListeners() {
 	debug.history("Registering [popstate] and [scroll] event listeners.");
 	window?.addEventListener("popstate", async (event) => {
 		debug.history("Navigation detected (popstate event). State:", { state: event.state });
-		if (context.pendingNavigation) {
-			debug.router("Aborting current navigation.", context.pendingNavigation);
-			context.pendingNavigation?.controller?.abort();
-		}
+		cancelNavigationRequest();
 		const state = context.serializer.unserialize(event.state);
 		await runHooks("backForward", {}, state, context);
 		if (!state) {
@@ -303,9 +1204,10 @@ async function registerEventListeners() {
 			updateHistoryState: false
 		});
 	});
-	window?.addEventListener("scroll", (event) => debounce(100, () => {
+	const onScroll = debounce((event) => {
 		if ((event?.target)?.hasAttribute?.("scroll-region")) saveScrollPositions();
-	}), true);
+	}, 100);
+	window?.addEventListener("scroll", (event) => onScroll(event), true);
 }
 /** Checks if the current navigation was made by going back or forward. */
 function isBackForwardNavigation() {
@@ -343,6 +1245,7 @@ function serializeContext(context) {
 	return context.serializer.serialize({
 		url: context.url,
 		version: context.version,
+		validation: context.validation,
 		view: context.view,
 		dialog: context.dialog,
 		scrollRegions: context.scrollRegions,
@@ -354,14 +1257,14 @@ function createSerializer(options) {
 	return {
 		serialize: (data) => {
 			debug.history("Serializing data.", data);
-			return stringify(data);
+			return stringify$1(data);
 		},
 		unserialize: (data) => {
 			if (!data) {
 				debug.history("No data to unserialize.");
 				return;
 			}
-			return parse(data);
+			return parse$1(data);
 		}
 	};
 }
@@ -471,8 +1374,7 @@ function getRouteTransformable(routeName, routeParameters, shouldThrow) {
 	return {
 		...domain && { hostname: domain },
 		pathname: path,
-		search: qs.stringify(remaining, {
-			encodeValuesOnly: true,
+		search: stringifyQueryString(remaining, {
 			arrayFormat: "indices",
 			addQueryPrefix: true
 		})
@@ -534,29 +1436,6 @@ function updateRoutingConfiguration(routing) {
 	setContext({ routing });
 }
 //#endregion
-//#region src/download.ts
-/** Checks if the response wants to redirect to an external URL. */
-function isDownloadResponse(response) {
-	return response.status === 200 && !!response.headers["content-disposition"];
-}
-/** Handles a download. */
-async function handleDownloadResponse(response) {
-	const blob = new Blob([response.data], { type: response.headers["content-type"] });
-	const urlObject = window.webkitURL || window.URL;
-	const link = document.createElement("a");
-	link.style.display = "none";
-	link.href = urlObject.createObjectURL(blob);
-	link.download = getFileNameFromContentDispositionHeader(response.headers["content-disposition"]);
-	link.click();
-	setTimeout(() => {
-		urlObject.revokeObjectURL(link.href);
-		link.remove();
-	}, 0);
-}
-function getFileNameFromContentDispositionHeader(header) {
-	return (header.split(";")[1]?.trim().split("=")[1])?.replace(/^"(.*)"$/, "$1") ?? "";
-}
-//#endregion
 //#region src/context/context.ts
 const state = {
 	initialized: false,
@@ -576,6 +1455,7 @@ async function initializeContext(options) {
 	state.initialized = true;
 	state.context = {
 		...options.payload,
+		validation: options.payload.validation ?? {},
 		responseErrorModals: options.responseErrorModals,
 		serializer: createSerializer(options),
 		url: makeUrl(options.payload.url).toString(),
@@ -585,9 +1465,8 @@ async function initializeContext(options) {
 		},
 		scrollRegions: [],
 		plugins: options.plugins ?? [],
-		axios: registerAxios(options.axios ?? axios.create()),
+		http: options.http ?? createXhrHttpClient(),
 		routing: options.routing,
-		preloadCache: /* @__PURE__ */ new Map(),
 		hooks: {},
 		memo: {}
 	};
@@ -595,24 +1474,6 @@ async function initializeContext(options) {
 	return getInternalRouterContext();
 }
 /**
-* Registers an interceptor that assumes `arraybuffer`
-* responses and converts responses to JSON or text.
-*/
-function registerAxios(axios) {
-	axios.interceptors.response.use((response) => {
-		if (!isDownloadResponse(response)) {
-			const text = new TextDecoder().decode(response.data);
-			try {
-				response.data = JSON.parse(text);
-			} catch {
-				response.data = text;
-			}
-		}
-		return response;
-	}, (error) => Promise.reject(error));
-	return axios;
-}
-/**
 * Mutates properties at the top-level of the context.
 */
 function setContext(merge = {}, options = {}) {
@@ -630,70 +1491,12 @@ function payloadFromContext() {
 	return {
 		url: getRouterContext().url,
 		version: getRouterContext().version,
+		validation: getRouterContext().validation,
 		view: getRouterContext().view,
 		dialog: getRouterContext().dialog
 	};
 }
 //#endregion
-//#region src/external.ts
-/**
-* Performs an external navigation by saving options to the storage and
-* making a full page reload. Upon loading, the navigation options
-* will be pulled and a hybrid navigation will be made.
-*/
-async function performExternalNavigation(options) {
-	debug.external("Navigating to an external URL:", options);
-	if (options.target === "new-tab") {
-		const link = document.createElement("a");
-		link.style.display = "none";
-		link.target = "_blank";
-		link.href = options.url;
-		link.click();
-		setTimeout(() => link.remove(), 0);
-		return;
-	}
-	window.sessionStorage.setItem(STORAGE_EXTERNAL_KEY, JSON.stringify(options));
-	window.location.href = options.url;
-	if (sameUrls(window.location, options.url)) {
-		debug.external("Manually reloading due to the external URL being the same.");
-		window.location.reload();
-	}
-}
-/** Navigates to the given URL without the hybrid protocol. */
-function navigateToExternalUrl(url, data) {
-	document.location.href = makeUrl(url, { search: qs.stringify(data, {
-		encodeValuesOnly: true,
-		arrayFormat: "brackets"
-	}) }).toString();
-}
-/** Checks if the response wants to redirect to an external URL. */
-function isExternalResponse(response) {
-	return response?.status === 409 && !!response?.headers?.[EXTERNAL_NAVIGATION_HEADER];
-}
-/**
-* Performs the internal navigation when an external navigation to a hybrid view has been made.
-* This method is meant to be called on router creation.
-*/
-async function handleExternalNavigation() {
-	debug.external("Handling an external navigation.");
-	const options = JSON.parse(window.sessionStorage.getItem("hybridly:external") || "{}");
-	window.sessionStorage.removeItem(STORAGE_EXTERNAL_KEY);
-	debug.external("Options from the session storage:", options);
-	setContext({ url: makeUrl(getRouterContext().url, { hash: window.location.hash }).toString() });
-	await navigate({
-		type: "initial",
-		preserveState: true,
-		preserveScroll: options.preserveScroll
-	});
-}
-/** Checks if the navigation being initialized points to an external location. */
-function isExternalNavigation() {
-	try {
-		return window.sessionStorage.getItem(STORAGE_EXTERNAL_KEY) !== null;
-	} catch {}
-	return false;
-}
-//#endregion
 //#region src/dialog/index.ts
 /**
 * Closes the dialog.
@@ -719,62 +1522,6 @@ async function closeDialog(options) {
 	});
 }
 //#endregion
-//#region src/router/preload.ts
-/**
-* Checks if there is a preloaded request for the given URL.
-*/
-function isPreloaded(targetUrl) {
-	return getInternalRouterContext().preloadCache.has(targetUrl.toString()) ?? false;
-}
-/**
-* Gets the response of a preloaded request.
-*/
-function getPreloadedRequest(targetUrl) {
-	return getInternalRouterContext().preloadCache.get(targetUrl.toString());
-}
-/**
-* Stores the response of a preloaded request.
-*/
-function storePreloadRequest(targetUrl, response) {
-	getInternalRouterContext().preloadCache.set(targetUrl.toString(), response);
-}
-/**
-* Discards a preloaded request.
-*/
-function discardPreloadedRequest(targetUrl) {
-	return getInternalRouterContext().preloadCache.delete(targetUrl.toString());
-}
-/** Preloads a hybrid request. */
-async function performPreloadRequest(options) {
-	const context = getRouterContext();
-	const url = makeUrl(options.url ?? context.url);
-	if (isPreloaded(url)) {
-		debug.router("This request is already preloaded.");
-		return false;
-	}
-	if (context.pendingNavigation) {
-		debug.router("A navigation is pending, preload aborted.");
-		return false;
-	}
-	if (options.method !== "GET") {
-		debug.router("Cannot preload non-GET requests.");
-		return false;
-	}
-	debug.router(`Preloading response for [${url.toString()}]`);
-	try {
-		const response = await performHybridRequest(url, options);
-		if (!isHybridResponse(response)) {
-			debug.router("Preload result was invalid.");
-			return false;
-		}
-		storePreloadRequest(url, response);
-		return true;
-	} catch (error) {
-		debug.router("Preloading failed.");
-		return false;
-	}
-}
-//#endregion
 //#region src/router/router.ts
 /**
 * The hybridly router.
@@ -786,13 +1533,13 @@ async function performPreloadRequest(options) {
 * router.get('/posts/edit', { post })
 */
 const router = {
-	abort: async () => getRouterContext().pendingNavigation?.controller.abort(),
-	active: () => !!getRouterContext().pendingNavigation,
+	abort: () => cancelNavigationRequest(),
 	navigate: async (options) => await performHybridNavigation(options),
 	reload: async (options) => await performHybridNavigation({
 		preserveScroll: true,
 		preserveState: true,
 		replace: true,
+		mode: "async",
 		...options
 	}),
 	get: async (url, options = {}) => await performHybridNavigation({
@@ -825,11 +1572,6 @@ const router = {
 		method: "DELETE"
 	}),
 	local: async (url, options = {}) => await performLocalNavigation(url, options),
-	preload: async (url, options = {}) => await performPreloadRequest({
-		...options,
-		url,
-		method: "GET"
-	}),
 	external: (url, data = {}) => navigateToExternalUrl(url, data),
 	to: async (name, parameters, options) => {
 		const url = generateRouteFromName(name, parameters);
@@ -842,7 +1584,7 @@ const router = {
 	},
 	matches: (name, parameters) => currentRouteMatches(name, parameters),
 	current: () => getCurrentRouteName(),
-	dialog: { close: (options) => closeDialog(options) },
+	dialog: { close: (options = {}) => closeDialog(options) },
 	history: {
 		get: (key) => getHistoryMemo(key),
 		remember: (key, value) => remember(key, value)
@@ -853,274 +1595,6 @@ async function createRouter(options) {
 	await initializeContext(options);
 	return await initializeRouter();
 }
-/** Performs every action necessary to make a hybrid navigation. */
-async function performHybridNavigation(options) {
-	const navigationId = random();
-	const context = getRouterContext();
-	debug.router("Making a hybrid navigation:", {
-		context,
-		options,
-		navigationId
-	});
-	try {
-		if (!options.method) {
-			debug.router("Setting method to GET because none was provided.");
-			options.method = "GET";
-		}
-		options.method = options.method.toUpperCase();
-		if ((hasFiles(options.data) || options.useFormData) && !(options.data instanceof FormData)) {
-			options.data = objectToFormData(options.data);
-			debug.router("Converted data to FormData.", options.data);
-		}
-		if (!(options.data instanceof FormData) && options.method === "GET" && Object.keys(options.data ?? {}).length) {
-			debug.router("Transforming data to query parameters.", options.data);
-			options.url = makeUrl(options.url ?? context.url, { query: options.data });
-			options.data = {};
-		}
-		if ([
-			"PUT",
-			"PATCH",
-			"DELETE"
-		].includes(options.method) && options.spoof !== false) {
-			debug.router(`Automatically spoofing method ${options.method}.`);
-			if (options.data instanceof FormData) options.data.append("_method", options.method);
-			else if (typeof options.data === "undefined") options.data = { _method: options.method };
-			else if (options.data instanceof Object && Object.keys(options.data).length >= 0) Object.assign(options.data, { _method: options.method });
-			else debug.router("Could not spoof method because body type is not supported.", options.data);
-			options.method = "POST";
-		}
-		if (!await runHooks("before", options.hooks, options, context)) {
-			debug.router("\"before\" event returned false, aborting the navigation.");
-			throw new NavigationCancelledError("The navigation was cancelled by the \"before\" event.");
-		}
-		if (context.pendingNavigation) {
-			debug.router("Aborting current navigation.", context.pendingNavigation);
-			context.pendingNavigation?.controller?.abort();
-		}
-		saveScrollPositions();
-		const targetUrl = makeUrl(options.url ?? context.url, options.transformUrl);
-		const abortController = new AbortController();
-		setContext({ pendingNavigation: {
-			id: navigationId,
-			url: targetUrl,
-			controller: abortController,
-			status: "pending",
-			options
-		} });
-		await runHooks("start", options.hooks, context);
-		debug.router("Making request with axios.");
-		const response = await performHybridRequest(targetUrl, options, abortController);
-		if (await runHooks("data", options.hooks, response, context) === false) return { response };
-		if (isExternalResponse(response)) {
-			debug.router("The response is explicitely external.");
-			await performExternalNavigation({
-				url: fillHash(targetUrl, response.headers[EXTERNAL_NAVIGATION_HEADER]),
-				preserveScroll: options.preserveScroll === true,
-				target: response.headers[EXTERNAL_NAVIGATION_TARGET_HEADER] ?? "current"
-			});
-			return { response };
-		}
-		if (isDownloadResponse(response)) {
-			debug.router("The response returns a file to download.");
-			await handleDownloadResponse(response);
-			return { response };
-		}
-		if (!isHybridResponse(response)) throw new NotAHybridResponseError(response);
-		debug.router("The response respects the Hybridly protocol.");
-		const payload = response.data;
-		if (payload.view && (options.only?.length ?? options.except?.length) && payload.view.component === context.view.component) {
-			debug.router(`Merging ${options.only ? "\"only\"" : "\"except\""} properties.`, payload.view.properties);
-			const mergedPayloadProperties = merge(context.view.properties, payload.view.properties);
-			if (options.errorBag) mergedPayloadProperties.errors[options.errorBag] = payload.view.properties.errors[options.errorBag] ?? {};
-			else mergedPayloadProperties.errors = payload.view.properties.errors;
-			payload.view.properties = mergedPayloadProperties;
-			debug.router("Merged properties:", payload.view.properties);
-		}
-		await navigate({
-			type: "server",
-			payload: {
-				...payload,
-				url: fillHash(targetUrl, payload.url)
-			},
-			preserveScroll: options.preserveScroll,
-			preserveState: options.preserveState,
-			preserveUrl: options.preserveUrl,
-			replace: options.replace === true || options.preserveUrl || sameUrls(payload.url, window.location.href) && !sameHashes(payload.url, window.location.href)
-		});
-		if (Object.keys(context.view.properties.errors ?? {}).length > 0) {
-			const errors = (() => {
-				if (options.errorBag && typeof context.view.properties.errors === "object") return context.view.properties.errors[options.errorBag] ?? {};
-				return context.view.properties.errors;
-			})();
-			debug.router("The request returned validation errors.", errors);
-			setContext({ pendingNavigation: {
-				...context.pendingNavigation,
-				status: "error"
-			} });
-			await runHooks("error", options.hooks, errors, context);
-		} else {
-			setContext({ pendingNavigation: {
-				...context.pendingNavigation,
-				status: "success"
-			} });
-			await runHooks("success", options.hooks, payload, context);
-		}
-		return { response };
-	} catch (error) {
-		await match(error.constructor.name, {
-			NavigationCancelledError: async () => {
-				debug.router("The request was cancelled through the \"before\" hook.", error);
-				await runHooks("abort", options.hooks, context);
-			},
-			AbortError: async () => {
-				debug.router("The request was aborted.", error);
-				await runHooks("abort", options.hooks, context);
-			},
-			NotAHybridResponseError: async () => {
-				debug.router("The response was not hybrid.");
-				console.error(error);
-				await runHooks("invalid", options.hooks, error, context);
-				if (context.responseErrorModals) showResponseErrorModal(error.response.data);
-			},
-			default: async () => {
-				if (error?.name === "CanceledError") {
-					debug.router("The request was cancelled.", error);
-					await runHooks("abort", options.hooks, context);
-				} else {
-					debug.router("An unknown error occured.", error);
-					console.error(error);
-					await runHooks("exception", options.hooks, error, context);
-				}
-			}
-		});
-		await runHooks("fail", options.hooks, context);
-		return { error: {
-			type: error.constructor.name,
-			actual: error
-		} };
-	} finally {
-		debug.router("Ending navigation.");
-		await runHooks("after", options.hooks, context);
-		if (context.pendingNavigation?.id === navigationId) setContext({ pendingNavigation: void 0 });
-	}
-}
-/** Checks if the response contains a hybrid header. */
-function isHybridResponse(response) {
-	return !!response?.headers[HYBRIDLY_HEADER];
-}
-/**
-* Makes an internal navigation that swaps the view and updates the context.
-* @internal
-*/
-async function navigate(options) {
-	const context = getRouterContext();
-	options.hasDialog ??= !!options.payload?.dialog;
-	debug.router("Making an internal navigation:", {
-		context,
-		options
-	});
-	await runHooks("navigating", {}, options, context);
-	options.payload ??= payloadFromContext();
-	options.payload.view ??= payloadFromContext().view;
-	function evaluateConditionalOption(option) {
-		return typeof option === "function" ? option(options) : option;
-	}
-	const shouldPreserveState = evaluateConditionalOption(options.preserveState);
-	const shouldPreserveScroll = evaluateConditionalOption(options.preserveScroll);
-	const shouldReplaceHistory = evaluateConditionalOption(options.replace);
-	const shouldReplaceUrl = evaluateConditionalOption(options.preserveUrl);
-	const shouldPreserveView = !options.payload.view.component;
-	if (shouldPreserveState && getHistoryMemo() && options.payload.view.component === context.view.component) {
-		debug.history("Setting the memo from this history entry into the current context.");
-		setContext({ memo: getHistoryMemo() });
-	}
-	if (shouldReplaceUrl) {
-		debug.router(`Preserving the current URL (${context.url}) instead of navigating to ${options.payload.url}`);
-		options.payload.url = context.url;
-	}
-	setContext({
-		...shouldPreserveView ? {
-			view: {
-				component: context.view.component,
-				properties: merge(context.view.properties, options.payload.view.properties),
-				deferred: context.view.deferred
-			},
-			url: context.url,
-			version: options.payload.version,
-			dialog: context.dialog
-		} : options.payload,
-		memo: {}
-	});
-	if (options.updateHistoryState !== false) {
-		debug.router(`Target URL is ${context.url}, current window URL is ${window.location.href}.`, { shouldReplaceHistory });
-		setHistoryState({ replace: shouldReplaceHistory });
-	}
-	if (context.view.deferred?.length) {
-		debug.router("Request has deferred properties, queueing a partial reload:", context.view.deferred);
-		context.adapter.executeOnMounted(async () => {
-			await performHybridNavigation({
-				preserveScroll: true,
-				preserveState: true,
-				replace: true,
-				only: context.view.deferred
-			});
-		});
-	}
-	const viewComponent = !shouldPreserveView ? await context.adapter.resolveComponent(context.view.component) : void 0;
-	if (viewComponent) debug.router(`Component [${context.view.component}] resolved to:`, viewComponent);
-	await context.adapter.onViewSwap({
-		component: viewComponent,
-		dialog: context.dialog,
-		properties: options.payload?.view?.properties,
-		preserveState: shouldPreserveState,
-		onMounted: (hookOptions) => runHooks("mounted", {}, {
-			...options,
-			...hookOptions
-		}, context)
-	});
-	if (options.type === "back-forward") restoreScrollPositions();
-	else if (!shouldPreserveScroll) resetScrollPositions();
-	await runHooks("navigated", {}, options, context);
-}
-async function performHybridRequest(targetUrl, options, abortController) {
-	const context = getInternalRouterContext();
-	const preloaded = options.method === "GET" ? getPreloadedRequest(targetUrl) : false;
-	if (preloaded) {
-		debug.router(`Found a pre-loaded request for [${targetUrl}]`);
-		discardPreloadedRequest(targetUrl);
-		return preloaded;
-	}
-	return await context.axios.request({
-		url: targetUrl.toString(),
-		method: options.method,
-		data: options.method === "GET" ? {} : options.data,
-		params: options.method === "GET" ? options.data : {},
-		signal: abortController?.signal,
-		headers: {
-			...options.headers,
-			...context.dialog ? { [DIALOG_KEY_HEADER]: context.dialog.key } : {},
-			...context.dialog ? { [DIALOG_REDIRECT_HEADER]: context.dialog.redirectUrl ?? "" } : {},
-			...when(options.only !== void 0 || options.except !== void 0, {
-				[PARTIAL_COMPONENT_HEADER]: context.view.component,
-				...when(options.only, { [ONLY_DATA_HEADER]: JSON.stringify(options.only) }, {}),
-				...when(options.except, { [EXCEPT_DATA_HEADER]: JSON.stringify(options.except) }, {})
-			}, {}),
-			...when(options.errorBag, { [ERROR_BAG_HEADER]: options.errorBag }, {}),
-			...when(context.version, { [VERSION_HEADER]: context.version }, {}),
-			[HYBRIDLY_HEADER]: true,
-			"X-Requested-With": "XMLHttpRequest",
-			"Accept": "text/html, application/xhtml+xml"
-		},
-		responseType: "arraybuffer",
-		validateStatus: () => true,
-		onUploadProgress: async (event) => {
-			await runHooks("progress", options.hooks, {
-				event,
-				percentage: Math.round(event.loaded / (event.total ?? 0) * 100)
-			}, context);
-		}
-	});
-}
 /** Initializes the router by reading the context and registering events if necessary. */
 async function initializeRouter() {
 	const context = getRouterContext();
@@ -1139,25 +1613,6 @@ async function initializeRouter() {
 	await runHooks("ready", {}, context);
 	return context;
 }
-/** Performs a local navigation to the given component without a round-trip. */
-async function performLocalNavigation(targetUrl, options) {
-	const context = getRouterContext();
-	const url = normalizeUrl(targetUrl);
-	return await navigate({
-		...options,
-		type: "local",
-		payload: {
-			version: context.version,
-			dialog: options?.dialog === false ? void 0 : options?.dialog ?? context.dialog,
-			url,
-			view: {
-				component: options?.component ?? context.view.component,
-				properties: options?.properties ?? context.view.properties,
-				deferred: []
-			}
-		}
-	});
-}
 //#endregion
 //#region src/authorization.ts
 /**
@@ -1168,4 +1623,4 @@ function can(resource, action) {
 	return resource.authorization?.[action] ?? false;
 }
 //#endregion
-export { can, constants_exports as constants, createRouter, definePlugin, getRouterContext, makeUrl, registerHook, route, router, sameUrls };
+export { can, constants_exports as constants, createRouter, createXhrHttpClient, definePlugin, getRouterContext, isHttpAbortError, isHttpError, makeUrl, parseQueryString, registerHook, route, router, sameUrls, stringifyQueryString };