From a4d5eca394b97cfee60d8470da5344474594b459 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 5 Jul 2023 15:44:41 +0200
Subject: [PATCH 01/22] feat: add dynamic image optimization

part of #241
closes #9787

This adds image optimization through a new $app/images import. It's deliberately low level: The only export is getImage which you pass an image src and it returns an object containing src and srcset (possibly more?) values which you spread on an img tag.

In order to use this you need to define a path to a loader in kit.config.images. The loader takes the original img src and a width and returns a URL pointing to the optimized image. You can also modify the number of sizes and trusted domains.
---
 packages/adapter-vercel/image-loader.d.ts |  4 ++
 packages/adapter-vercel/image-loader.js   | 49 +++++++++++++++++++++++
 packages/adapter-vercel/index.d.ts        | 11 ++++-
 packages/adapter-vercel/index.js          | 14 +++++++
 packages/adapter-vercel/package.json      |  4 ++
 packages/kit/scripts/generate-dts.js      |  1 +
 packages/kit/src/core/config/options.js   | 20 +++++++++
 packages/kit/src/exports/public.d.ts      | 25 ++++++++++++
 packages/kit/src/exports/vite/index.js    | 13 ++++++
 packages/kit/src/runtime/app/images.js    | 47 ++++++++++++++++++++++
 packages/kit/src/types/ambient.d.ts       |  7 ++++
 11 files changed, 194 insertions(+), 1 deletion(-)
 create mode 100644 packages/adapter-vercel/image-loader.d.ts
 create mode 100644 packages/adapter-vercel/image-loader.js
 create mode 100644 packages/kit/src/runtime/app/images.js

diff --git a/packages/adapter-vercel/image-loader.d.ts b/packages/adapter-vercel/image-loader.d.ts
new file mode 100644
index 000000000000..e07362d1a057
--- /dev/null
+++ b/packages/adapter-vercel/image-loader.d.ts
@@ -0,0 +1,4 @@
+/**
+ * https://vercel.com/docs/concepts/image-optimization
+ */
+export default function loader(src: string, width: number, options?: { quality?: number }): string;
diff --git a/packages/adapter-vercel/image-loader.js b/packages/adapter-vercel/image-loader.js
new file mode 100644
index 000000000000..44b055a64818
--- /dev/null
+++ b/packages/adapter-vercel/image-loader.js
@@ -0,0 +1,49 @@
+// https://vercel.com/docs/concepts/image-optimization
+
+/**
+ * @param {string} src
+ * @param {number} width
+ * @param {{ quality?: number }} [options]
+ */
+export default function loader(src, width, options) {
+	const url = new URL(src, 'http://n'); // If the base is a relative URL, we need to add a dummy host to the URL
+	if (url.pathname === '/_vercel/image') {
+		set_param(url, 'w', width);
+		set_param(url, 'q', options?.quality ?? 75, false);
+	} else {
+		url.pathname = `/_vercel/image`;
+		set_param(url, 'url', src);
+		set_param(url, 'w', width);
+		set_param(url, 'q', options?.quality ?? 75);
+	}
+	return src === url.href ? url.href : relative_url(url);
+}
+
+/**
+ * @param {URL} url
+ */
+function relative_url(url) {
+	const { pathname, search } = url;
+	return `${pathname}${search}`;
+}
+/**
+ * @param {URL} url
+ * @param {string} param
+ * @param {any} value
+ * @param {boolean} [override]
+ */
+function set_param(url, param, value, override = true) {
+	if (value === undefined) {
+		return;
+	}
+
+	if (value === null) {
+		if (override || url.searchParams.has(param)) {
+			url.searchParams.delete(param);
+		}
+	} else {
+		if (override || !url.searchParams.has(param)) {
+			url.searchParams.set(param, value);
+		}
+	}
+}
diff --git a/packages/adapter-vercel/index.d.ts b/packages/adapter-vercel/index.d.ts
index 634f90ed8db9..a376c390fc9b 100644
--- a/packages/adapter-vercel/index.d.ts
+++ b/packages/adapter-vercel/index.d.ts
@@ -1,7 +1,16 @@
 import { Adapter } from '@sveltejs/kit';
 import './ambient.js';
 
-export default function plugin(config?: Config): Adapter;
+export default function plugin(
+	config?: Config & {
+		/**
+		 * Enable or disable Vercel's image optimization. This is enabled by default if you have
+		 * defined the Vercel loader in your `svelte.config.js` file, else disabled by default.
+		 * https://vercel.com/docs/concepts/image-optimization
+		 */
+		images?: boolean;
+	}
+): Adapter;
 
 export interface ServerlessConfig {
 	/**
diff --git a/packages/adapter-vercel/index.js b/packages/adapter-vercel/index.js
index a46a953dd32f..144c5ce37f82 100644
--- a/packages/adapter-vercel/index.js
+++ b/packages/adapter-vercel/index.js
@@ -407,8 +407,22 @@ function static_vercel_config(builder) {
 		overrides[page.file] = { path: overrides_path };
 	}
 
+	/** @type {Record<string, any> | undefined} */
+	let images = undefined;
+	const img_config = builder.config.kit.images;
+	if (config.images || img_config.loader === '@sveltejs/adapter-vercel/image-loader') {
+		images = {
+			sizes: img_config.sizes,
+			domains: img_config.domains,
+			// TODO should we expose the following and some other optional options through the adapter?
+			formats: ['image/avif', 'image/webp'],
+			minimumCacheTTL: 300
+		};
+	}
+
 	return {
 		version: 3,
+		images,
 		routes: [
 			...prerendered_redirects,
 			{
diff --git a/packages/adapter-vercel/package.json b/packages/adapter-vercel/package.json
index 382c60de4206..f413d738846e 100644
--- a/packages/adapter-vercel/package.json
+++ b/packages/adapter-vercel/package.json
@@ -15,6 +15,10 @@
 			"types": "./index.d.ts",
 			"import": "./index.js"
 		},
+		"./image-loader": {
+			"types": "./image-loader.d.ts",
+			"import": "./image-loader.js"
+		},
 		"./package.json": "./package.json"
 	},
 	"types": "index.d.ts",
diff --git a/packages/kit/scripts/generate-dts.js b/packages/kit/scripts/generate-dts.js
index 8eeffb5b2f82..cc6b2f5c4c01 100644
--- a/packages/kit/scripts/generate-dts.js
+++ b/packages/kit/scripts/generate-dts.js
@@ -10,6 +10,7 @@ createBundle({
 		'@sveltejs/kit/vite': 'src/exports/vite/index.js',
 		'$app/environment': 'src/runtime/app/environment.js',
 		'$app/forms': 'src/runtime/app/forms.js',
+		'$app/images': 'src/runtime/app/images.js',
 		'$app/navigation': 'src/runtime/app/navigation.js',
 		'$app/paths': 'src/runtime/app/paths.js',
 		'$app/stores': 'src/runtime/app/stores.js'
diff --git a/packages/kit/src/core/config/options.js b/packages/kit/src/core/config/options.js
index 7d7351023e61..912dc62b8486 100644
--- a/packages/kit/src/core/config/options.js
+++ b/packages/kit/src/core/config/options.js
@@ -138,6 +138,12 @@ const options = object(
 				errorTemplate: string(join('src', 'error.html'))
 			}),
 
+			images: object({
+				domains: string_array([]),
+				loader: string(null),
+				sizes: number_array([640, 828, 1200, 1920, 3840])
+			}),
+
 			inlineStyleThreshold: number(0),
 
 			moduleExtensions: string_array(['.js', '.ts']),
@@ -354,6 +360,20 @@ function string(fallback, allow_empty = true) {
 	});
 }
 
+/**
+ * @param {number[] | undefined} [fallback]
+ * @returns {Validator}
+ */
+function number_array(fallback) {
+	return validate(fallback, (input, keypath) => {
+		if (!Array.isArray(input) || input.some((value) => typeof value !== 'number')) {
+			throw new Error(`${keypath} must be an array of numbers, if specified`);
+		}
+
+		return input;
+	});
+}
+
 /**
  * @param {string[] | undefined} [fallback]
  * @returns {Validator}
diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts
index 9e9fe3e8926f..64a83192cda9 100644
--- a/packages/kit/src/exports/public.d.ts
+++ b/packages/kit/src/exports/public.d.ts
@@ -430,6 +430,31 @@ export interface KitConfig {
 		 */
 		errorTemplate?: string;
 	};
+	/**
+	 * Image optimization configuration
+	 */
+	images?: {
+		/**
+		 * Path to a a file that contains a loader that will be used to generate the an image URL out of the given source and width.
+		 * It optionally also takes third parameter for options.
+		 *
+		 * ```js
+		 * export default function loader(src, width, opts) {
+		 *  return `https://example.com/${src}?w=${width}&q=${opts.quality || 75}`;
+		 * }
+		 * ```
+		 */
+		loader?: string;
+		/**
+		 * Which srcset sizes to generate
+		 * @default [640, 828, 1200, 1920, 3840]
+		 */
+		sizes?: number[];
+		/**
+		 * Which external domains to trust when optimizing images
+		 */
+		domains?: string[];
+	};
 	/**
 	 * Inline CSS inside a `<style>` block at the head of the HTML. This option is a number that specifies the maximum length of a CSS file to be inlined. All CSS files needed for the page and smaller than this value are merged and inlined in a `<style>` block.
 	 *
diff --git a/packages/kit/src/exports/vite/index.js b/packages/kit/src/exports/vite/index.js
index a26ca5ba3805..1e16b947c040 100644
--- a/packages/kit/src/exports/vite/index.js
+++ b/packages/kit/src/exports/vite/index.js
@@ -441,6 +441,19 @@ function kit({ svelte_config }) {
 						}
 					`;
 				}
+
+				case '\0__sveltekit/images': {
+					const { images } = svelte_config.kit;
+					const loader = images.loader
+						? `export { default as loader } from '${images.loader}';`
+						: 'export function loader(src) { console.warn("No image loader in kit.config.kit.images.loader set, images will not be optimized."); return src; }';
+
+					return dedent`
+						export const sizes = ${JSON.stringify(images.sizes)};
+						export const domains = ${JSON.stringify(images.domains)};
+						${loader}
+					`;
+				}
 			}
 		}
 	};
diff --git a/packages/kit/src/runtime/app/images.js b/packages/kit/src/runtime/app/images.js
new file mode 100644
index 000000000000..502ab153cde3
--- /dev/null
+++ b/packages/kit/src/runtime/app/images.js
@@ -0,0 +1,47 @@
+import { DEV } from 'esm-env';
+import { sizes, loader, domains } from '__sveltekit/images';
+
+/**
+ * @param {string} src
+ * @param {any} [options]
+ * @returns {{ src: string, srcset?: string }}
+ */
+export function getImage(src, options) {
+	if (DEV) {
+		if (!matches_domain(src)) {
+			console.warn(
+				`$app/images: Image src '${src}' does not match any of the allowed domains and will therefore not be optimized.`
+			);
+		}
+		return { srcset: src, src };
+	}
+
+	if (!matches_domain(src)) {
+		return { src };
+	}
+
+	const srcset = sizes
+		.map((size) => {
+			const url = loader(src, size, options);
+			const w = size + 'w';
+			return `${url} ${w}`;
+		})
+		.join(', ');
+	const _src = loader(src, sizes[sizes.length - 1], options);
+
+	// Order of attributes is important here as they are set in this order
+	// and having src before srcset would result in a flicker
+	return { srcset, src: _src };
+}
+
+/**
+ * @param {string} src
+ */
+function matches_domain(src) {
+	const url = new URL(src, 'http://n'); // if src is protocol relative, use dummy domain
+	if (url.href === src) {
+		return domains.some((domain) => url.hostname === domain);
+	} else {
+		return true; // relative urls are always ok
+	}
+}
diff --git a/packages/kit/src/types/ambient.d.ts b/packages/kit/src/types/ambient.d.ts
index b7331402a369..f7e9d3c5d7ce 100644
--- a/packages/kit/src/types/ambient.d.ts
+++ b/packages/kit/src/types/ambient.d.ts
@@ -106,3 +106,10 @@ declare module '__sveltekit/paths' {
 	export function override(paths: { base: string; assets: string }): void;
 	export function set_assets(path: string): void;
 }
+
+/** Internal version of $app/images */
+declare module '__sveltekit/images' {
+	export let sizes: number[];
+	export let loader: (url: string, size: number, opts?: any) => string;
+	export let domains: string[];
+}

From 3bf5d7fc6719905b37cbba3b4bdfacf1d2ca0bc0 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 5 Jul 2023 15:54:30 +0200
Subject: [PATCH 02/22] wording

---
 packages/adapter-vercel/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/adapter-vercel/index.d.ts b/packages/adapter-vercel/index.d.ts
index a376c390fc9b..0fae0770afd0 100644
--- a/packages/adapter-vercel/index.d.ts
+++ b/packages/adapter-vercel/index.d.ts
@@ -5,7 +5,7 @@ export default function plugin(
 	config?: Config & {
 		/**
 		 * Enable or disable Vercel's image optimization. This is enabled by default if you have
-		 * defined the Vercel loader in your `svelte.config.js` file, else disabled by default.
+		 * defined the Vercel loader in `kit.images.loader`, else disabled by default.
 		 * https://vercel.com/docs/concepts/image-optimization
 		 */
 		images?: boolean;

From 7e258fe6dbf76ee43b0d2e91e1d81a1c19a0a730 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 25 Sep 2023 21:53:07 -0700
Subject: [PATCH 03/22] Update packages/adapter-vercel/image-loader.js

---
 packages/adapter-vercel/image-loader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/adapter-vercel/image-loader.js b/packages/adapter-vercel/image-loader.js
index 44b055a64818..ba71a148a5d8 100644
--- a/packages/adapter-vercel/image-loader.js
+++ b/packages/adapter-vercel/image-loader.js
@@ -11,7 +11,7 @@ export default function loader(src, width, options) {
 		set_param(url, 'w', width);
 		set_param(url, 'q', options?.quality ?? 75, false);
 	} else {
-		url.pathname = `/_vercel/image`;
+		url.pathname = '_vercel/image';
 		set_param(url, 'url', src);
 		set_param(url, 'w', width);
 		set_param(url, 'q', options?.quality ?? 75);

From 1a9a9302437eaf57f37b86a4e273507cf2f02474 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 17 Nov 2023 18:10:47 +0100
Subject: [PATCH 04/22] overhaul - remove any image provider-specific stuff -
 rename sizes to widths

---
 .../{image-loader.d.ts => images/loader.d.ts} |   0
 .../{image-loader.js => images/loader.js}     |  18 ++-
 packages/adapter-vercel/images/options.d.ts   |   8 ++
 packages/adapter-vercel/images/options.js     |  17 +++
 packages/adapter-vercel/package.json          |  10 +-
 packages/kit/src/core/config/options.js       |   6 +-
 packages/kit/src/exports/public.d.ts          |  14 +--
 packages/kit/src/exports/vite/index.js        |   4 +-
 packages/kit/src/runtime/app/images.js        | 108 ++++++++++++++----
 packages/kit/src/types/ambient.d.ts           |  11 +-
 10 files changed, 151 insertions(+), 45 deletions(-)
 rename packages/adapter-vercel/{image-loader.d.ts => images/loader.d.ts} (100%)
 rename packages/adapter-vercel/{image-loader.js => images/loader.js} (63%)
 create mode 100644 packages/adapter-vercel/images/options.d.ts
 create mode 100644 packages/adapter-vercel/images/options.js

diff --git a/packages/adapter-vercel/image-loader.d.ts b/packages/adapter-vercel/images/loader.d.ts
similarity index 100%
rename from packages/adapter-vercel/image-loader.d.ts
rename to packages/adapter-vercel/images/loader.d.ts
diff --git a/packages/adapter-vercel/image-loader.js b/packages/adapter-vercel/images/loader.js
similarity index 63%
rename from packages/adapter-vercel/image-loader.js
rename to packages/adapter-vercel/images/loader.js
index ba71a148a5d8..2de724a9ff10 100644
--- a/packages/adapter-vercel/image-loader.js
+++ b/packages/adapter-vercel/images/loader.js
@@ -3,18 +3,28 @@
 /**
  * @param {string} src
  * @param {number} width
- * @param {{ quality?: number }} [options]
+ * @param {{ domains: string[] }} loader_options
+ * @param {{ quality?: number }} [image_options]
  */
-export default function loader(src, width, options) {
+export default function loader(src, width, loader_options, image_options) {
 	const url = new URL(src, 'http://n'); // If the base is a relative URL, we need to add a dummy host to the URL
+
+	if (url.href === src) {
+		// There's remotePatterns, too, but we don't implement it here to save bytes - people shouldn't be configuring this
+		// and then use it with the wrong URLs, anyway
+		if (!loader_options.domains.some((domain) => url.hostname === domain)) {
+			return src;
+		}
+	}
+
 	if (url.pathname === '/_vercel/image') {
 		set_param(url, 'w', width);
-		set_param(url, 'q', options?.quality ?? 75, false);
+		set_param(url, 'q', image_options?.quality ?? 100, false);
 	} else {
 		url.pathname = '_vercel/image';
 		set_param(url, 'url', src);
 		set_param(url, 'w', width);
-		set_param(url, 'q', options?.quality ?? 75);
+		set_param(url, 'q', image_options?.quality ?? 100);
 	}
 	return src === url.href ? url.href : relative_url(url);
 }
diff --git a/packages/adapter-vercel/images/options.d.ts b/packages/adapter-vercel/images/options.d.ts
new file mode 100644
index 000000000000..4afd7a7707e1
--- /dev/null
+++ b/packages/adapter-vercel/images/options.d.ts
@@ -0,0 +1,8 @@
+/**
+ * Convenience method to generate consistent image options for both Vercel and SvelteKit.
+ * See link for how to use.
+ */
+export function createImageOptions(options: any): {
+	vercel: any;
+	kit: import('@sveltejs/kit').KitConfig['images'];
+};
diff --git a/packages/adapter-vercel/images/options.js b/packages/adapter-vercel/images/options.js
new file mode 100644
index 000000000000..0c05bc53c572
--- /dev/null
+++ b/packages/adapter-vercel/images/options.js
@@ -0,0 +1,17 @@
+/**
+ * @param {Parameters<import('./options.js').createImageOptions>[0]} options
+ * @returns {ReturnType<import('./options.js').createImageOptions>}
+ */
+export function createImageOptions(options) {
+	// TODO: from one set of options, generate the correct build output API params as well as the correct loader options
+	return {
+		vercel: options,
+		kit: {
+			loader: '@adapter-vercel/images/loader',
+			widths: options.sizes,
+			loaderOptions: {
+				domains: options.domains
+			}
+		}
+	};
+}
diff --git a/packages/adapter-vercel/package.json b/packages/adapter-vercel/package.json
index dc1367053987..95e1ea9e4a8d 100644
--- a/packages/adapter-vercel/package.json
+++ b/packages/adapter-vercel/package.json
@@ -15,9 +15,13 @@
 			"types": "./index.d.ts",
 			"import": "./index.js"
 		},
-		"./image-loader": {
-			"types": "./image-loader.d.ts",
-			"import": "./image-loader.js"
+		"./images/loader": {
+			"types": "./image/loader.d.ts",
+			"import": "./image/loader.js"
+		},
+		"./images/options": {
+			"types": "./image/options.d.ts",
+			"import": "./image/options.js"
 		},
 		"./package.json": "./package.json"
 	},
diff --git a/packages/kit/src/core/config/options.js b/packages/kit/src/core/config/options.js
index 6497d6dedba1..7ec56b16b15b 100644
--- a/packages/kit/src/core/config/options.js
+++ b/packages/kit/src/core/config/options.js
@@ -139,9 +139,11 @@ const options = object(
 			}),
 
 			images: object({
-				domains: string_array([]),
 				loader: string(null),
-				sizes: number_array([640, 828, 1200, 1920, 3840])
+				loaderOptions: object({}, true),
+				widths: number_array([
+					48, 128, 256, 540, 768, 1080, 1366, 1536, 1920, 2560, 3000, 4096, 5120
+				])
 			}),
 
 			inlineStyleThreshold: number(0),
diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts
index f0b59cff6de4..6aa559069b60 100644
--- a/packages/kit/src/exports/public.d.ts
+++ b/packages/kit/src/exports/public.d.ts
@@ -435,8 +435,8 @@ export interface KitConfig {
 	 */
 	images?: {
 		/**
-		 * Path to a a file that contains a loader that will be used to generate the an image URL out of the given source and width.
-		 * It optionally also takes third parameter for options.
+		 * Path to a module that contains a loader that will be used to generate the an image URL out of the given source and width.
+		 * It optionally also takes third parameter for options. Can be either a relative path or a reference to an npm packe.
 		 *
 		 * ```js
 		 * export default function loader(src, width, opts) {
@@ -446,14 +446,14 @@ export interface KitConfig {
 		 */
 		loader?: string;
 		/**
-		 * Which srcset sizes to generate
-		 * @default [640, 828, 1200, 1920, 3840]
+		 * Specific options passed to the loader. Needs to be a JSON-stringifiable object.
 		 */
-		sizes?: number[];
+		loaderOptions?: Record<string, any>;
 		/**
-		 * Which external domains to trust when optimizing images
+		 * Which srcset sizes to generate
+		 * @default [48, 128, 256, 540, 768, 1080, 1366, 1536, 1920, 2560, 3000, 4096, 5120]
 		 */
-		domains?: string[];
+		widths?: number[];
 	};
 	/**
 	 * Inline CSS inside a `<style>` block at the head of the HTML. This option is a number that specifies the maximum length of a CSS file in UTF-16 code units, as specified by the [String.length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) property, to be inlined. All CSS files needed for the page and smaller than this value are merged and inlined in a `<style>` block.
diff --git a/packages/kit/src/exports/vite/index.js b/packages/kit/src/exports/vite/index.js
index 6fe80192da00..c403f624f006 100644
--- a/packages/kit/src/exports/vite/index.js
+++ b/packages/kit/src/exports/vite/index.js
@@ -449,8 +449,8 @@ function kit({ svelte_config }) {
 						: 'export function loader(src) { console.warn("No image loader in kit.config.kit.images.loader set, images will not be optimized."); return src; }';
 
 					return dedent`
-						export const sizes = ${JSON.stringify(images.sizes)};
-						export const domains = ${JSON.stringify(images.domains)};
+						export const widths = ${JSON.stringify(images.widths)};
+						export const loader_options = ${JSON.stringify(images.loaderOptions)};
 						${loader}
 					`;
 				}
diff --git a/packages/kit/src/runtime/app/images.js b/packages/kit/src/runtime/app/images.js
index 502ab153cde3..fb4a788b0c86 100644
--- a/packages/kit/src/runtime/app/images.js
+++ b/packages/kit/src/runtime/app/images.js
@@ -1,47 +1,107 @@
 import { DEV } from 'esm-env';
-import { sizes, loader, domains } from '__sveltekit/images';
+import { widths as default_widths, loader, loader_options } from '__sveltekit/images';
 
 /**
- * @param {string} src
- * @param {any} [options]
- * @returns {{ src: string, srcset?: string }}
+ * @typedef {{
+ *  src: string;
+ *  sizes?: string;
+ *  fetchpriority?: 'high' | 'low' | 'auto';
+ *  loading?: 'eager' | 'lazy';
+ *  style?: string;
+ *  class?: string;
+ *  options?: Record<string, any>;
+ *  } & ({ width: number; height: number } | { layout: 'fill' | 'custom', width?: number; height?: number })
+ * } ImageOptions
  */
-export function getImage(src, options) {
+
+/**
+ * @param {ImageOptions} payload
+ * @returns {{ src: string, srcset: string, sizes?: string, width?: number, height?: number, loading?: 'eager' | 'lazy', fetchpriority?: 'high' | 'low' | 'auto', style?: string, class?: string }}
+ */
+export function getImage(payload) {
+	const src = payload.src;
+
 	if (DEV) {
-		if (!matches_domain(src)) {
+		if (!('width' in payload) && !('layout' in payload)) {
 			console.warn(
-				`$app/images: Image src '${src}' does not match any of the allowed domains and will therefore not be optimized.`
+				`Missing 'width' or 'layout' for image ${src}. Provide one of them to prevent layout shift.`
 			);
 		}
 		return { srcset: src, src };
 	}
 
-	if (!matches_domain(src)) {
-		return { src };
-	}
-
-	const srcset = sizes
-		.map((size) => {
-			const url = loader(src, size, options);
-			const w = size + 'w';
+	const widths = get_widths(payload.width, payload.sizes);
+	let _src = src;
+	const srcset = widths.widths
+		.map((width) => {
+			const url = loader(src, width, loader_options, payload.options);
+			_src = url; // ensures that the largest one is set
+			const w = width + widths.kind;
 			return `${url} ${w}`;
 		})
 		.join(', ');
-	const _src = loader(src, sizes[sizes.length - 1], options);
+
+	let style = payload.style;
+	// @ts-expect-error
+	if (payload.layout === 'fill') {
+		style = 'object-fit:cover;object-position:0 0' + (style ? ';' + style : '');
+	}
 
 	// Order of attributes is important here as they are set in this order
 	// and having src before srcset would result in a flicker
-	return { srcset, src: _src };
+	return {
+		srcset,
+		src: _src,
+		sizes: payload.sizes,
+		loading: payload.loading,
+		fetchpriority: payload.fetchpriority,
+		style: payload.style,
+		class: payload.class,
+		width: payload.width,
+		height: payload.height
+	};
 }
 
 /**
- * @param {string} src
+ * Don't use any sizes lower than this for full-width images
  */
-function matches_domain(src) {
-	const url = new URL(src, 'http://n'); // if src is protocol relative, use dummy domain
-	if (url.href === src) {
-		return domains.some((domain) => url.hostname === domain);
-	} else {
-		return true; // relative urls are always ok
+const full_width_cutoff = 640;
+
+/**
+ * @param {number | undefined} width
+ * @param {string | undefined} sizes
+ * @returns {{ widths: number[]; kind: 'w' | 'x' }}
+ */
+function get_widths(width, sizes) {
+	// We don't really know what the user wants here. But if they have an image that's really big
+	// then we can probably assume they're always displaying it full viewport/breakpoint.
+	// If the user is displaying a responsive image then the size usually doesn't change that much
+	// Instead, the number of columns in the design may reduce and the image may take a greater
+	// fraction of the screen.
+	// Assume if they're bothering to specify sizes that it's going to take most of the screen
+	// as that's the case where an image may be rendered at very different sizes. Otherwise, it's
+	// probably a responsive image and a single size is okay (two when accounting for HiDPI).
+	if (sizes || !width) {
+		if (!sizes) {
+			sizes = '100vw';
+		}
+		let widths = default_widths;
+		if (sizes.trim() === '100vw') {
+			// Since this is a full-screen-width image, we can trim out small widths
+			widths = widths.filter((width) => width >= full_width_cutoff);
+		}
+		return { widths, kind: 'w' };
 	}
+
+	// Don't need more than 2x resolution. Note that due to this optimization, pixel density
+	// descriptors will often end up being cheaper as many mobile devices have pixel density ratios
+	// near 3 which would cause larger images to be chosen on mobile when using sizes.
+
+	// Most OLED screens that say they are 3x resolution, are actually 3x in the green color, but
+	// only 1.5x in the red and blue colors. Showing a 3x resolution image in the app vs a 2x
+	// resolution image will be visually the same, though the 3x image takes significantly more
+	// data. Even true 3x resolution screens are wasteful as the human eye cannot see that level of
+	// detail without something like a magnifying glass.
+	// https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
+	return { widths: [Math.round(width / 2), width], kind: 'x' };
 }
diff --git a/packages/kit/src/types/ambient.d.ts b/packages/kit/src/types/ambient.d.ts
index f7e9d3c5d7ce..ebe69b0a4038 100644
--- a/packages/kit/src/types/ambient.d.ts
+++ b/packages/kit/src/types/ambient.d.ts
@@ -109,7 +109,12 @@ declare module '__sveltekit/paths' {
 
 /** Internal version of $app/images */
 declare module '__sveltekit/images' {
-	export let sizes: number[];
-	export let loader: (url: string, size: number, opts?: any) => string;
-	export let domains: string[];
+	export let widths: number[];
+	export let loader: (
+		url: string,
+		size: number | undefined,
+		loader_options: Record<string, any>,
+		image_options?: Record<string, any>
+	) => string;
+	export let loader_options: Record<string, any>;
 }

From a22daf0374e6e361961189daf38ddbff9ef10ff6 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 17 Nov 2023 20:43:12 +0100
Subject: [PATCH 05/22] turn this around; the createOptions approach wouldn't
 work because of the JSON-stringify limitation

---
 packages/adapter-vercel/image-loader.d.ts       |  9 +++++++++
 .../{images/loader.js => image-loader.js}       |  0
 packages/adapter-vercel/images/loader.d.ts      |  4 ----
 packages/adapter-vercel/images/options.d.ts     |  8 --------
 packages/adapter-vercel/images/options.js       | 17 -----------------
 packages/adapter-vercel/index.js                |  9 ++++-----
 packages/adapter-vercel/package.json            | 10 +++-------
 7 files changed, 16 insertions(+), 41 deletions(-)
 create mode 100644 packages/adapter-vercel/image-loader.d.ts
 rename packages/adapter-vercel/{images/loader.js => image-loader.js} (100%)
 delete mode 100644 packages/adapter-vercel/images/loader.d.ts
 delete mode 100644 packages/adapter-vercel/images/options.d.ts
 delete mode 100644 packages/adapter-vercel/images/options.js

diff --git a/packages/adapter-vercel/image-loader.d.ts b/packages/adapter-vercel/image-loader.d.ts
new file mode 100644
index 000000000000..2be8b3eb39b1
--- /dev/null
+++ b/packages/adapter-vercel/image-loader.d.ts
@@ -0,0 +1,9 @@
+/**
+ * https://vercel.com/docs/concepts/image-optimization
+ */
+export default function loader(
+	src: string,
+	width: number,
+	loader_options: { domain: string[] },
+	image_options?: { quality: number }
+): string;
diff --git a/packages/adapter-vercel/images/loader.js b/packages/adapter-vercel/image-loader.js
similarity index 100%
rename from packages/adapter-vercel/images/loader.js
rename to packages/adapter-vercel/image-loader.js
diff --git a/packages/adapter-vercel/images/loader.d.ts b/packages/adapter-vercel/images/loader.d.ts
deleted file mode 100644
index e07362d1a057..000000000000
--- a/packages/adapter-vercel/images/loader.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * https://vercel.com/docs/concepts/image-optimization
- */
-export default function loader(src: string, width: number, options?: { quality?: number }): string;
diff --git a/packages/adapter-vercel/images/options.d.ts b/packages/adapter-vercel/images/options.d.ts
deleted file mode 100644
index 4afd7a7707e1..000000000000
--- a/packages/adapter-vercel/images/options.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Convenience method to generate consistent image options for both Vercel and SvelteKit.
- * See link for how to use.
- */
-export function createImageOptions(options: any): {
-	vercel: any;
-	kit: import('@sveltejs/kit').KitConfig['images'];
-};
diff --git a/packages/adapter-vercel/images/options.js b/packages/adapter-vercel/images/options.js
deleted file mode 100644
index 0c05bc53c572..000000000000
--- a/packages/adapter-vercel/images/options.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @param {Parameters<import('./options.js').createImageOptions>[0]} options
- * @returns {ReturnType<import('./options.js').createImageOptions>}
- */
-export function createImageOptions(options) {
-	// TODO: from one set of options, generate the correct build output API params as well as the correct loader options
-	return {
-		vercel: options,
-		kit: {
-			loader: '@adapter-vercel/images/loader',
-			widths: options.sizes,
-			loaderOptions: {
-				domains: options.domains
-			}
-		}
-	};
-}
diff --git a/packages/adapter-vercel/index.js b/packages/adapter-vercel/index.js
index 144c5ce37f82..1670acf6cc77 100644
--- a/packages/adapter-vercel/index.js
+++ b/packages/adapter-vercel/index.js
@@ -412,11 +412,10 @@ function static_vercel_config(builder) {
 	const img_config = builder.config.kit.images;
 	if (config.images || img_config.loader === '@sveltejs/adapter-vercel/image-loader') {
 		images = {
-			sizes: img_config.sizes,
-			domains: img_config.domains,
-			// TODO should we expose the following and some other optional options through the adapter?
-			formats: ['image/avif', 'image/webp'],
-			minimumCacheTTL: 300
+			...img_config.loaderOptions,
+			sizes: img_config.widths,
+			domains: img_config.loaderOptions?.domains ?? []
+			// TODO should we set some defaults?
 		};
 	}
 
diff --git a/packages/adapter-vercel/package.json b/packages/adapter-vercel/package.json
index 95e1ea9e4a8d..dc1367053987 100644
--- a/packages/adapter-vercel/package.json
+++ b/packages/adapter-vercel/package.json
@@ -15,13 +15,9 @@
 			"types": "./index.d.ts",
 			"import": "./index.js"
 		},
-		"./images/loader": {
-			"types": "./image/loader.d.ts",
-			"import": "./image/loader.js"
-		},
-		"./images/options": {
-			"types": "./image/options.d.ts",
-			"import": "./image/options.js"
+		"./image-loader": {
+			"types": "./image-loader.d.ts",
+			"import": "./image-loader.js"
 		},
 		"./package.json": "./package.json"
 	},

From a6fe421779aedadb99f126bd3bd6bf26b9eab327 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 17 Nov 2023 20:51:03 +0100
Subject: [PATCH 06/22] add loader options interface for the possibility of
 types LoaderOptions

---
 packages/adapter-vercel/image-loader.d.ts | 26 +++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/adapter-vercel/image-loader.d.ts b/packages/adapter-vercel/image-loader.d.ts
index 2be8b3eb39b1..07cb5665db6a 100644
--- a/packages/adapter-vercel/image-loader.d.ts
+++ b/packages/adapter-vercel/image-loader.d.ts
@@ -4,6 +4,28 @@
 export default function loader(
 	src: string,
 	width: number,
-	loader_options: { domain: string[] },
-	image_options?: { quality: number }
+	loader_options: { domains: string[] },
+	image_options?: { quality?: number }
 ): string;
+
+/**
+ * https://vercel.com/docs/concepts/image-optimization
+ */
+export interface LoaderOptions {
+	domains?: string[];
+	remotePatterns?: RemotePattern[];
+	minimumCacheTTL?: number;
+	formats?: ImageFormat[];
+	dangerouslyAllowSVG?: boolean;
+	contentSecurityPolicy?: string;
+	contentDispositionType?: string;
+}
+
+type ImageFormat = 'image/avif' | 'image/webp';
+
+type RemotePattern = {
+	protocol?: 'http' | 'https';
+	hostname: string;
+	port?: string;
+	pathname?: string;
+};

From 987eef703576e20a7a510004179982446d1392b6 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 17 Nov 2023 22:25:48 +0100
Subject: [PATCH 07/22] move build-time options to adapter

---
 packages/adapter-vercel/image-loader.d.ts | 24 +--------------------
 packages/adapter-vercel/image-loader.js   | 12 ++---------
 packages/adapter-vercel/index.d.ts        | 26 ++++++++++++++++++++++-
 packages/adapter-vercel/index.js          | 19 ++++++++++-------
 packages/kit/src/exports/public.d.ts      |  2 +-
 packages/kit/src/runtime/app/images.js    |  6 ++++--
 6 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/packages/adapter-vercel/image-loader.d.ts b/packages/adapter-vercel/image-loader.d.ts
index 07cb5665db6a..f8507ae9baa4 100644
--- a/packages/adapter-vercel/image-loader.d.ts
+++ b/packages/adapter-vercel/image-loader.d.ts
@@ -4,28 +4,6 @@
 export default function loader(
 	src: string,
 	width: number,
-	loader_options: { domains: string[] },
+	loader_options: any,
 	image_options?: { quality?: number }
 ): string;
-
-/**
- * https://vercel.com/docs/concepts/image-optimization
- */
-export interface LoaderOptions {
-	domains?: string[];
-	remotePatterns?: RemotePattern[];
-	minimumCacheTTL?: number;
-	formats?: ImageFormat[];
-	dangerouslyAllowSVG?: boolean;
-	contentSecurityPolicy?: string;
-	contentDispositionType?: string;
-}
-
-type ImageFormat = 'image/avif' | 'image/webp';
-
-type RemotePattern = {
-	protocol?: 'http' | 'https';
-	hostname: string;
-	port?: string;
-	pathname?: string;
-};
diff --git a/packages/adapter-vercel/image-loader.js b/packages/adapter-vercel/image-loader.js
index 2de724a9ff10..4c386704960d 100644
--- a/packages/adapter-vercel/image-loader.js
+++ b/packages/adapter-vercel/image-loader.js
@@ -3,20 +3,12 @@
 /**
  * @param {string} src
  * @param {number} width
- * @param {{ domains: string[] }} loader_options
+ * @param {any} _loader_options
  * @param {{ quality?: number }} [image_options]
  */
-export default function loader(src, width, loader_options, image_options) {
+export default function loader(src, width, _loader_options, image_options) {
 	const url = new URL(src, 'http://n'); // If the base is a relative URL, we need to add a dummy host to the URL
 
-	if (url.href === src) {
-		// There's remotePatterns, too, but we don't implement it here to save bytes - people shouldn't be configuring this
-		// and then use it with the wrong URLs, anyway
-		if (!loader_options.domains.some((domain) => url.hostname === domain)) {
-			return src;
-		}
-	}
-
 	if (url.pathname === '/_vercel/image') {
 		set_param(url, 'w', width);
 		set_param(url, 'q', image_options?.quality ?? 100, false);
diff --git a/packages/adapter-vercel/index.d.ts b/packages/adapter-vercel/index.d.ts
index 0fae0770afd0..16971cfa6c84 100644
--- a/packages/adapter-vercel/index.d.ts
+++ b/packages/adapter-vercel/index.d.ts
@@ -8,10 +8,34 @@ export default function plugin(
 		 * defined the Vercel loader in `kit.images.loader`, else disabled by default.
 		 * https://vercel.com/docs/concepts/image-optimization
 		 */
-		images?: boolean;
+		images?: ImageConfig;
 	}
 ): Adapter;
 
+/**
+ * https://vercel.com/docs/concepts/image-optimization
+ */
+export interface ImageConfig {
+	/** Only set this if you're not using SvelteKit's `getImage` from `$app/images` */
+	sizes?: number[];
+	domains?: string[];
+	remotePatterns?: RemotePattern[];
+	minimumCacheTTL?: number;
+	formats?: ImageFormat[];
+	dangerouslyAllowSVG?: boolean;
+	contentSecurityPolicy?: string;
+	contentDispositionType?: string;
+}
+
+type ImageFormat = 'image/avif' | 'image/webp';
+
+type RemotePattern = {
+	protocol?: 'http' | 'https';
+	hostname: string;
+	port?: string;
+	pathname?: string;
+};
+
 export interface ServerlessConfig {
 	/**
 	 * Whether to use [Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions) or [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions)
diff --git a/packages/adapter-vercel/index.js b/packages/adapter-vercel/index.js
index 1670acf6cc77..559af24be9ac 100644
--- a/packages/adapter-vercel/index.js
+++ b/packages/adapter-vercel/index.js
@@ -55,7 +55,7 @@ const plugin = function (defaults = {}) {
 				functions: `${dir}/functions`
 			};
 
-			const static_config = static_vercel_config(builder);
+			const static_config = static_vercel_config(builder, defaults.images);
 
 			builder.log.minor('Generating serverless function...');
 
@@ -367,9 +367,12 @@ function write(file, data) {
 	fs.writeFileSync(file, data);
 }
 
-// This function is duplicated in adapter-static
-/** @param {import('@sveltejs/kit').Builder} builder */
-function static_vercel_config(builder) {
+// This function is mostly duplicated in adapter-static
+/**
+ * @param {import('@sveltejs/kit').Builder} builder
+ * @param {import('./index.js').ImageConfig | undefined}
+ */
+function static_vercel_config(builder, image_config) {
 	/** @type {any[]} */
 	const prerendered_redirects = [];
 
@@ -410,11 +413,11 @@ function static_vercel_config(builder) {
 	/** @type {Record<string, any> | undefined} */
 	let images = undefined;
 	const img_config = builder.config.kit.images;
-	if (config.images || img_config.loader === '@sveltejs/adapter-vercel/image-loader') {
+	const is_vercel_loader = img_config.loader === '@sveltejs/adapter-vercel/image-loader';
+	if (image_config || is_vercel_loader) {
 		images = {
-			...img_config.loaderOptions,
-			sizes: img_config.widths,
-			domains: img_config.loaderOptions?.domains ?? []
+			...image_config,
+			sizes: is_vercel_loader ? img_config.widths : image_config?.sizes
 			// TODO should we set some defaults?
 		};
 	}
diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts
index 6aa559069b60..cf9d3bb0b253 100644
--- a/packages/kit/src/exports/public.d.ts
+++ b/packages/kit/src/exports/public.d.ts
@@ -444,7 +444,7 @@ export interface KitConfig {
 		 * }
 		 * ```
 		 */
-		loader?: string;
+		loader: string;
 		/**
 		 * Specific options passed to the loader. Needs to be a JSON-stringifiable object.
 		 */
diff --git a/packages/kit/src/runtime/app/images.js b/packages/kit/src/runtime/app/images.js
index fb4a788b0c86..a12fb1f94afc 100644
--- a/packages/kit/src/runtime/app/images.js
+++ b/packages/kit/src/runtime/app/images.js
@@ -9,6 +9,7 @@ import { widths as default_widths, loader, loader_options } from '__sveltekit/im
  *  loading?: 'eager' | 'lazy';
  *  style?: string;
  *  class?: string;
+ *  alt?: string;
  *  options?: Record<string, any>;
  *  } & ({ width: number; height: number } | { layout: 'fill' | 'custom', width?: number; height?: number })
  * } ImageOptions
@@ -16,7 +17,7 @@ import { widths as default_widths, loader, loader_options } from '__sveltekit/im
 
 /**
  * @param {ImageOptions} payload
- * @returns {{ src: string, srcset: string, sizes?: string, width?: number, height?: number, loading?: 'eager' | 'lazy', fetchpriority?: 'high' | 'low' | 'auto', style?: string, class?: string }}
+ * @returns {{ src: string, srcset: string, sizes?: string, width?: number, height?: number, loading?: 'eager' | 'lazy', fetchpriority?: 'high' | 'low' | 'auto', style?: string, class?: string, alt?: string }}
  */
 export function getImage(payload) {
 	const src = payload.src;
@@ -58,7 +59,8 @@ export function getImage(payload) {
 		style: payload.style,
 		class: payload.class,
 		width: payload.width,
-		height: payload.height
+		height: payload.height,
+		alt: payload.alt
 	};
 }
 

From c7617193080c953f953f5fceb74d836529ada771 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 17 Nov 2023 22:40:58 +0100
Subject: [PATCH 08/22] fixes

---
 packages/kit/src/exports/vite/index.js |  2 +-
 packages/kit/src/runtime/app/images.js | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/kit/src/exports/vite/index.js b/packages/kit/src/exports/vite/index.js
index c403f624f006..fc22cdc0e622 100644
--- a/packages/kit/src/exports/vite/index.js
+++ b/packages/kit/src/exports/vite/index.js
@@ -442,7 +442,7 @@ function kit({ svelte_config }) {
 					`;
 				}
 
-				case '\0__sveltekit/images': {
+				case '\0virtual:__sveltekit/images': {
 					const { images } = svelte_config.kit;
 					const loader = images.loader
 						? `export { default as loader } from '${images.loader}';`
diff --git a/packages/kit/src/runtime/app/images.js b/packages/kit/src/runtime/app/images.js
index a12fb1f94afc..2e71d631b42c 100644
--- a/packages/kit/src/runtime/app/images.js
+++ b/packages/kit/src/runtime/app/images.js
@@ -21,6 +21,7 @@ import { widths as default_widths, loader, loader_options } from '__sveltekit/im
  */
 export function getImage(payload) {
 	const src = payload.src;
+	const widths = get_widths(payload.width, payload.sizes);
 
 	if (DEV) {
 		if (!('width' in payload) && !('layout' in payload)) {
@@ -28,16 +29,14 @@ export function getImage(payload) {
 				`Missing 'width' or 'layout' for image ${src}. Provide one of them to prevent layout shift.`
 			);
 		}
-		return { srcset: src, src };
 	}
 
-	const widths = get_widths(payload.width, payload.sizes);
 	let _src = src;
 	const srcset = widths.widths
-		.map((width) => {
-			const url = loader(src, width, loader_options, payload.options);
+		.map((width, i) => {
+			const url = DEV ? src : loader(src, width, loader_options, payload.options);
 			_src = url; // ensures that the largest one is set
-			const w = width + widths.kind;
+			const w = widths.kind === 'x' ? `${i + 1}x` : `${width}w`;
 			return `${url} ${w}`;
 		})
 		.join(', ');
@@ -45,7 +44,7 @@ export function getImage(payload) {
 	let style = payload.style;
 	// @ts-expect-error
 	if (payload.layout === 'fill') {
-		style = 'object-fit:cover;object-position:0 0' + (style ? ';' + style : '');
+		style = 'position:absolute;width:100%;height:100%;inset:0px;' + (style || '');
 	}
 
 	// Order of attributes is important here as they are set in this order
@@ -56,7 +55,7 @@ export function getImage(payload) {
 		sizes: payload.sizes,
 		loading: payload.loading,
 		fetchpriority: payload.fetchpriority,
-		style: payload.style,
+		style,
 		class: payload.class,
 		width: payload.width,
 		height: payload.height,

From 30d1fd91f794e9c0bc2a20a7295c320fe72fe611 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 17 Nov 2023 23:06:00 +0100
Subject: [PATCH 09/22] fallback

---
 packages/adapter-vercel/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/adapter-vercel/index.js b/packages/adapter-vercel/index.js
index 559af24be9ac..3dd946bae4ea 100644
--- a/packages/adapter-vercel/index.js
+++ b/packages/adapter-vercel/index.js
@@ -417,7 +417,7 @@ function static_vercel_config(builder, image_config) {
 	if (image_config || is_vercel_loader) {
 		images = {
 			...image_config,
-			sizes: is_vercel_loader ? img_config.widths : image_config?.sizes
+			sizes: is_vercel_loader ? img_config.widths : image_config?.sizes ?? img_config.widths
 			// TODO should we set some defaults?
 		};
 	}

From e2a3ae63cdff0e0b0a2c129d378980af12d60052 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 20 Nov 2023 15:49:47 +0100
Subject: [PATCH 10/22] bump svelte

---
 package.json                                  |   2 +-
 packages/adapter-static/package.json          |   2 +-
 .../test/apps/prerendered/package.json        |   2 +-
 .../adapter-static/test/apps/spa/package.json |   2 +-
 packages/create-svelte/package.json           |   2 +-
 .../templates/default/package.json            |   2 +-
 packages/enhanced-img/package.json            |   2 +-
 packages/kit/package.json                     |   2 +-
 packages/kit/test/apps/amp/package.json       |   2 +-
 packages/kit/test/apps/basics/package.json    |   2 +-
 packages/kit/test/apps/dev-only/package.json  |   2 +-
 packages/kit/test/apps/embed/package.json     |   2 +-
 packages/kit/test/apps/options-2/package.json |   2 +-
 packages/kit/test/apps/options/package.json   |   2 +-
 packages/kit/test/apps/writes/package.json    |   2 +-
 .../package.json                              |   2 +-
 .../package.json                              |   2 +-
 .../package.json                              |   2 +-
 .../package.json                              |   2 +-
 .../apps/private-dynamic-env/package.json     |   2 +-
 .../package.json                              |   2 +-
 .../apps/private-static-env/package.json      |   2 +-
 .../package.json                              |   2 +-
 .../apps/server-only-folder/package.json      |   2 +-
 .../package.json                              |   2 +-
 .../apps/server-only-module/package.json      |   2 +-
 .../apps/syntax-error/package.json            |   2 +-
 .../kit/test/prerendering/basics/package.json |   2 +-
 .../test/prerendering/options/package.json    |   2 +-
 .../test/prerendering/paths-base/package.json |   2 +-
 packages/package/package.json                 |   2 +-
 playgrounds/basic/package.json                |   2 +-
 pnpm-lock.yaml                                | 316 +++++++++---------
 sites/kit.svelte.dev/package.json             |   2 +-
 34 files changed, 191 insertions(+), 191 deletions(-)

diff --git a/package.json b/package.json
index 73b097d75e9d..f5fd37739840 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
 		"playwright": "1.30.0",
 		"prettier": "^3.1.0",
 		"rollup": "^3.29.4",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"typescript": "^4.9.4"
 	},
 	"packageManager": "pnpm@8.10.2",
diff --git a/packages/adapter-static/package.json b/packages/adapter-static/package.json
index 05a10a8cdc3c..1a1ab9478510 100644
--- a/packages/adapter-static/package.json
+++ b/packages/adapter-static/package.json
@@ -34,7 +34,7 @@
 		"@sveltejs/kit": "workspace:^",
 		"@types/node": "^16.18.6",
 		"sirv": "^2.0.3",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
 	},
diff --git a/packages/adapter-static/test/apps/prerendered/package.json b/packages/adapter-static/test/apps/prerendered/package.json
index 36e63c85a411..782b53e3c746 100644
--- a/packages/adapter-static/test/apps/prerendered/package.json
+++ b/packages/adapter-static/test/apps/prerendered/package.json
@@ -11,7 +11,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
 		"sirv-cli": "^2.0.2",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"vite": "^4.4.9"
 	},
 	"type": "module"
diff --git a/packages/adapter-static/test/apps/spa/package.json b/packages/adapter-static/test/apps/spa/package.json
index 4b6230e448a8..d166f5828292 100644
--- a/packages/adapter-static/test/apps/spa/package.json
+++ b/packages/adapter-static/test/apps/spa/package.json
@@ -12,7 +12,7 @@
 		"@sveltejs/adapter-node": "workspace:^",
 		"@sveltejs/kit": "workspace:^",
 		"sirv-cli": "^2.0.2",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"vite": "^4.4.9"
 	},
 	"type": "module"
diff --git a/packages/create-svelte/package.json b/packages/create-svelte/package.json
index 431e2cf47fd0..4a230f26d2fc 100644
--- a/packages/create-svelte/package.json
+++ b/packages/create-svelte/package.json
@@ -22,7 +22,7 @@
 		"prettier": "^3.1.0",
 		"prettier-plugin-svelte": "^3.0.0",
 		"sucrase": "^3.29.0",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"tiny-glob": "^0.2.9",
 		"vitest": "^0.34.5"
 	},
diff --git a/packages/create-svelte/templates/default/package.json b/packages/create-svelte/templates/default/package.json
index 6fa4acfa75e2..48b47d940eb1 100644
--- a/packages/create-svelte/templates/default/package.json
+++ b/packages/create-svelte/templates/default/package.json
@@ -11,7 +11,7 @@
 		"@neoconfetti/svelte": "^1.0.0",
 		"@sveltejs/adapter-auto": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.9"
 	},
diff --git a/packages/enhanced-img/package.json b/packages/enhanced-img/package.json
index 08d9446079dd..36ca0e7dd325 100644
--- a/packages/enhanced-img/package.json
+++ b/packages/enhanced-img/package.json
@@ -34,7 +34,7 @@
 		"@types/estree": "^1.0.2",
 		"@types/node": "^16.18.6",
 		"estree-walker": "^3.0.3",
-		"svelte": "^4.0.5",
+		"svelte": "^4.2.7",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.2",
 		"vitest": "^0.34.0"
diff --git a/packages/kit/package.json b/packages/kit/package.json
index 096af04a83c2..1fda9be29140 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -33,7 +33,7 @@
 		"@types/set-cookie-parser": "^2.4.2",
 		"dts-buddy": "^0.2.4",
 		"rollup": "^3.29.4",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-preprocess": "^5.0.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9",
diff --git a/packages/kit/test/apps/amp/package.json b/packages/kit/test/apps/amp/package.json
index 868abf03f774..a1a6edbbfe3a 100644
--- a/packages/kit/test/apps/amp/package.json
+++ b/packages/kit/test/apps/amp/package.json
@@ -16,7 +16,7 @@
 		"@sveltejs/kit": "workspace:^",
 		"cross-env": "^7.0.3",
 		"dropcss": "^1.0.16",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/apps/basics/package.json b/packages/kit/test/apps/basics/package.json
index 93b2bdef667c..be6363a4c6da 100644
--- a/packages/kit/test/apps/basics/package.json
+++ b/packages/kit/test/apps/basics/package.json
@@ -17,7 +17,7 @@
 		"@sveltejs/kit": "workspace:^",
 		"cross-env": "^7.0.3",
 		"marked": "^10.0.0",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/apps/dev-only/package.json b/packages/kit/test/apps/dev-only/package.json
index 3246845cb201..7e39fe7cfe22 100644
--- a/packages/kit/test/apps/dev-only/package.json
+++ b/packages/kit/test/apps/dev-only/package.json
@@ -12,7 +12,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
 		"cross-env": "^7.0.3",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/apps/embed/package.json b/packages/kit/test/apps/embed/package.json
index 0d4e42529d78..149c4af374e3 100644
--- a/packages/kit/test/apps/embed/package.json
+++ b/packages/kit/test/apps/embed/package.json
@@ -14,7 +14,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
 		"cross-env": "^7.0.3",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/apps/options-2/package.json b/packages/kit/test/apps/options-2/package.json
index 4b42a07ce68a..8ff099252595 100644
--- a/packages/kit/test/apps/options-2/package.json
+++ b/packages/kit/test/apps/options-2/package.json
@@ -15,7 +15,7 @@
 		"@sveltejs/adapter-node": "workspace:^",
 		"@sveltejs/kit": "workspace:^",
 		"cross-env": "^7.0.3",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/apps/options/package.json b/packages/kit/test/apps/options/package.json
index e5015447a9f3..8c153d7b5545 100644
--- a/packages/kit/test/apps/options/package.json
+++ b/packages/kit/test/apps/options/package.json
@@ -14,7 +14,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
 		"cross-env": "^7.0.3",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/apps/writes/package.json b/packages/kit/test/apps/writes/package.json
index 826e99aa909b..9853d0796a92 100644
--- a/packages/kit/test/apps/writes/package.json
+++ b/packages/kit/test/apps/writes/package.json
@@ -14,7 +14,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
 		"cross-env": "^7.0.3",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/prerender-entry-generator-mismatch/package.json b/packages/kit/test/build-errors/apps/prerender-entry-generator-mismatch/package.json
index 112a56186745..b73f1b4fc918 100644
--- a/packages/kit/test/build-errors/apps/prerender-entry-generator-mismatch/package.json
+++ b/packages/kit/test/build-errors/apps/prerender-entry-generator-mismatch/package.json
@@ -11,7 +11,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "workspace:^",
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/prerenderable-incorrect-fragment/package.json b/packages/kit/test/build-errors/apps/prerenderable-incorrect-fragment/package.json
index 112a56186745..b73f1b4fc918 100644
--- a/packages/kit/test/build-errors/apps/prerenderable-incorrect-fragment/package.json
+++ b/packages/kit/test/build-errors/apps/prerenderable-incorrect-fragment/package.json
@@ -11,7 +11,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "workspace:^",
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/prerenderable-not-prerendered/package.json b/packages/kit/test/build-errors/apps/prerenderable-not-prerendered/package.json
index e96f1c08bb28..6f5202120a67 100644
--- a/packages/kit/test/build-errors/apps/prerenderable-not-prerendered/package.json
+++ b/packages/kit/test/build-errors/apps/prerenderable-not-prerendered/package.json
@@ -11,7 +11,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "workspace:^",
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/private-dynamic-env-dynamic-import/package.json b/packages/kit/test/build-errors/apps/private-dynamic-env-dynamic-import/package.json
index 214a74dc2e7a..734e8cd783ad 100644
--- a/packages/kit/test/build-errors/apps/private-dynamic-env-dynamic-import/package.json
+++ b/packages/kit/test/build-errors/apps/private-dynamic-env-dynamic-import/package.json
@@ -11,7 +11,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/private-dynamic-env/package.json b/packages/kit/test/build-errors/apps/private-dynamic-env/package.json
index 4d886f665aa6..ac095b19c257 100644
--- a/packages/kit/test/build-errors/apps/private-dynamic-env/package.json
+++ b/packages/kit/test/build-errors/apps/private-dynamic-env/package.json
@@ -11,7 +11,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/private-static-env-dynamic-import/package.json b/packages/kit/test/build-errors/apps/private-static-env-dynamic-import/package.json
index c6d833924e8b..296fabb5bbb6 100644
--- a/packages/kit/test/build-errors/apps/private-static-env-dynamic-import/package.json
+++ b/packages/kit/test/build-errors/apps/private-static-env-dynamic-import/package.json
@@ -11,7 +11,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/private-static-env/package.json b/packages/kit/test/build-errors/apps/private-static-env/package.json
index 3cbefeb919ee..704de0d38bc0 100644
--- a/packages/kit/test/build-errors/apps/private-static-env/package.json
+++ b/packages/kit/test/build-errors/apps/private-static-env/package.json
@@ -12,7 +12,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
 		"cross-env": "^7.0.3",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/server-only-folder-dynamic-import/package.json b/packages/kit/test/build-errors/apps/server-only-folder-dynamic-import/package.json
index 3531416c6a51..eba3d2c6a38e 100644
--- a/packages/kit/test/build-errors/apps/server-only-folder-dynamic-import/package.json
+++ b/packages/kit/test/build-errors/apps/server-only-folder-dynamic-import/package.json
@@ -11,7 +11,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/server-only-folder/package.json b/packages/kit/test/build-errors/apps/server-only-folder/package.json
index 013f66865e23..6e7ce6cf3045 100644
--- a/packages/kit/test/build-errors/apps/server-only-folder/package.json
+++ b/packages/kit/test/build-errors/apps/server-only-folder/package.json
@@ -11,7 +11,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/server-only-module-dynamic-import/package.json b/packages/kit/test/build-errors/apps/server-only-module-dynamic-import/package.json
index a8f22244271a..3c3b2ce1626a 100644
--- a/packages/kit/test/build-errors/apps/server-only-module-dynamic-import/package.json
+++ b/packages/kit/test/build-errors/apps/server-only-module-dynamic-import/package.json
@@ -11,7 +11,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/server-only-module/package.json b/packages/kit/test/build-errors/apps/server-only-module/package.json
index f25eaf7c3c6c..917800f07955 100644
--- a/packages/kit/test/build-errors/apps/server-only-module/package.json
+++ b/packages/kit/test/build-errors/apps/server-only-module/package.json
@@ -11,7 +11,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/build-errors/apps/syntax-error/package.json b/packages/kit/test/build-errors/apps/syntax-error/package.json
index 4d41e4efcb3a..4b9da3223c89 100644
--- a/packages/kit/test/build-errors/apps/syntax-error/package.json
+++ b/packages/kit/test/build-errors/apps/syntax-error/package.json
@@ -9,7 +9,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9"
diff --git a/packages/kit/test/prerendering/basics/package.json b/packages/kit/test/prerendering/basics/package.json
index 58e061990584..9b6f5fd84105 100644
--- a/packages/kit/test/prerendering/basics/package.json
+++ b/packages/kit/test/prerendering/basics/package.json
@@ -12,7 +12,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9",
diff --git a/packages/kit/test/prerendering/options/package.json b/packages/kit/test/prerendering/options/package.json
index 82f3a6061fb4..ba0eedf199e6 100644
--- a/packages/kit/test/prerendering/options/package.json
+++ b/packages/kit/test/prerendering/options/package.json
@@ -11,7 +11,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9",
diff --git a/packages/kit/test/prerendering/paths-base/package.json b/packages/kit/test/prerendering/paths-base/package.json
index 8a8430aaf9a9..31c852503882 100644
--- a/packages/kit/test/prerendering/paths-base/package.json
+++ b/packages/kit/test/prerendering/paths-base/package.json
@@ -11,7 +11,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",
 		"vite": "^4.4.9",
diff --git a/packages/package/package.json b/packages/package/package.json
index fc67a95a2de7..d88c3a25e539 100644
--- a/packages/package/package.json
+++ b/packages/package/package.json
@@ -20,7 +20,7 @@
 	"devDependencies": {
 		"@types/node": "^16.18.6",
 		"@types/semver": "^7.5.0",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"svelte-preprocess": "^5.0.4",
 		"typescript": "^4.9.4",
 		"uvu": "^0.5.6"
diff --git a/playgrounds/basic/package.json b/playgrounds/basic/package.json
index b46281b7ce15..e44c61f0dfad 100644
--- a/playgrounds/basic/package.json
+++ b/playgrounds/basic/package.json
@@ -10,7 +10,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.9"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 511fc40f0d5f..fc0500c3505b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,13 +22,13 @@ importers:
         version: 15.0.1(rollup@3.29.4)
       '@sveltejs/eslint-config':
         specifier: ^6.0.4
-        version: 6.0.4(@typescript-eslint/eslint-plugin@6.0.0)(@typescript-eslint/parser@6.10.0)(eslint-config-prettier@9.0.0)(eslint-plugin-svelte@2.31.0)(eslint-plugin-unicorn@49.0.0)(eslint@8.52.0)(typescript@4.9.4)
+        version: 6.0.4(@typescript-eslint/eslint-plugin@6.0.0)(@typescript-eslint/parser@6.11.0)(eslint-config-prettier@9.0.0)(eslint-plugin-svelte@2.31.0)(eslint-plugin-unicorn@49.0.0)(eslint@8.52.0)(typescript@4.9.4)
       '@svitejs/changesets-changelog-github-compact':
         specifier: ^1.1.0
         version: 1.1.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^6.0.0
-        version: 6.0.0(@typescript-eslint/parser@6.10.0)(eslint@8.52.0)(typescript@4.9.4)
+        version: 6.0.0(@typescript-eslint/parser@6.11.0)(eslint@8.52.0)(typescript@4.9.4)
       eslint:
         specifier: ^8.52.0
         version: 8.52.0
@@ -37,7 +37,7 @@ importers:
         version: 9.0.0(eslint@8.52.0)
       eslint-plugin-svelte:
         specifier: ^2.31.0
-        version: 2.31.0(eslint@8.52.0)(svelte@4.2.2)
+        version: 2.31.0(eslint@8.52.0)(svelte@4.2.7)
       eslint-plugin-unicorn:
         specifier: ^49.0.0
         version: 49.0.0(eslint@8.52.0)
@@ -51,8 +51,8 @@ importers:
         specifier: ^3.29.4
         version: 3.29.4
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -221,8 +221,8 @@ importers:
         specifier: ^2.0.3
         version: 2.0.3
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -239,8 +239,8 @@ importers:
         specifier: ^2.0.2
         version: 2.0.2
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       vite:
         specifier: ^4.4.9
         version: 4.4.9(@types/node@16.18.6)(lightningcss@1.21.8)
@@ -257,8 +257,8 @@ importers:
         specifier: ^2.0.2
         version: 2.0.2
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       vite:
         specifier: ^4.4.9
         version: 4.4.9(@types/node@16.18.6)(lightningcss@1.21.8)
@@ -314,13 +314,13 @@ importers:
         version: 3.1.0
       prettier-plugin-svelte:
         specifier: ^3.0.0
-        version: 3.0.3(prettier@3.1.0)(svelte@4.2.2)
+        version: 3.0.3(prettier@3.1.0)(svelte@4.2.7)
       sucrase:
         specifier: ^3.29.0
         version: 3.29.0
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -344,8 +344,8 @@ importers:
         specifier: workspace:*
         version: link:../../../kit
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       typescript:
         specifier: ^5.0.0
         version: 5.0.4
@@ -366,7 +366,7 @@ importers:
         version: 0.30.5
       svelte-parse-markup:
         specifier: ^0.1.1
-        version: 0.1.2(svelte@4.2.2)
+        version: 0.1.2(svelte@4.2.7)
       vite-imagetools:
         specifier: ^6.2.4
         version: 6.2.4(rollup@3.29.4)
@@ -381,8 +381,8 @@ importers:
         specifier: ^3.0.3
         version: 3.0.3
       svelte:
-        specifier: ^4.0.5
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -397,7 +397,7 @@ importers:
     dependencies:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^2.5.0
-        version: 2.5.0(svelte@4.2.2)(vite@4.4.9)
+        version: 2.5.0(svelte@4.2.7)(vite@4.4.9)
       '@types/cookie':
         specifier: ^0.5.1
         version: 0.5.1
@@ -457,11 +457,11 @@ importers:
         specifier: ^3.29.4
         version: 3.29.4
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-preprocess:
         specifier: ^5.0.4
-        version: 5.0.4(postcss@8.4.31)(svelte@4.2.2)(typescript@4.9.4)
+        version: 5.0.4(postcss@8.4.31)(svelte@4.2.7)(typescript@4.9.4)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -487,11 +487,11 @@ importers:
         specifier: ^1.0.16
         version: 1.0.16
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -511,11 +511,11 @@ importers:
         specifier: ^10.0.0
         version: 10.0.0
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -532,11 +532,11 @@ importers:
         specifier: ^7.0.3
         version: 7.0.3
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -553,11 +553,11 @@ importers:
         specifier: ^7.0.3
         version: 7.0.3
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -574,11 +574,11 @@ importers:
         specifier: ^7.0.3
         version: 7.0.3
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -598,11 +598,11 @@ importers:
         specifier: ^7.0.3
         version: 7.0.3
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -619,11 +619,11 @@ importers:
         specifier: ^7.0.3
         version: 7.0.3
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -646,11 +646,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -667,11 +667,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -688,11 +688,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -706,11 +706,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -724,11 +724,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -745,11 +745,11 @@ importers:
         specifier: ^7.0.3
         version: 7.0.3
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -763,11 +763,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -781,11 +781,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -799,11 +799,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -817,11 +817,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -835,11 +835,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -853,11 +853,11 @@ importers:
         specifier: workspace:^
         version: link:../../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -871,11 +871,11 @@ importers:
         specifier: workspace:^
         version: link:../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -892,11 +892,11 @@ importers:
         specifier: workspace:^
         version: link:../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -913,11 +913,11 @@ importers:
         specifier: workspace:^
         version: link:../../..
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-check:
         specifier: ^3.4.4
-        version: 3.4.4(postcss@8.4.31)(svelte@4.2.2)
+        version: 3.4.4(postcss@8.4.31)(svelte@4.2.7)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -984,7 +984,7 @@ importers:
         version: 7.5.3
       svelte2tsx:
         specifier: ~0.6.19
-        version: 0.6.19(svelte@4.2.2)(typescript@4.9.4)
+        version: 0.6.19(svelte@4.2.7)(typescript@4.9.4)
     devDependencies:
       '@types/node':
         specifier: ^16.18.6
@@ -993,11 +993,11 @@ importers:
         specifier: ^7.5.0
         version: 7.5.0
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       svelte-preprocess:
         specifier: ^5.0.4
-        version: 5.0.4(postcss@8.4.31)(svelte@4.2.2)(typescript@4.9.4)
+        version: 5.0.4(postcss@8.4.31)(svelte@4.2.7)(typescript@4.9.4)
       typescript:
         specifier: ^4.9.4
         version: 4.9.4
@@ -1014,8 +1014,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/kit
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       typescript:
         specifier: ^5.0.0
         version: 5.0.4
@@ -1049,7 +1049,7 @@ importers:
         version: link:../../packages/kit
       '@sveltejs/site-kit':
         specifier: 6.0.0-next.52
-        version: 6.0.0-next.52(@sveltejs/kit@packages+kit)(svelte@4.2.2)
+        version: 6.0.0-next.52(@sveltejs/kit@packages+kit)(svelte@4.2.7)
       '@types/d3-geo':
         specifier: ^3.0.4
         version: 3.0.4
@@ -1073,7 +1073,7 @@ importers:
         version: 3.1.0
       prettier-plugin-svelte:
         specifier: ^3.0.3
-        version: 3.0.3(prettier@3.1.0)(svelte@4.2.2)
+        version: 3.0.3(prettier@3.1.0)(svelte@4.2.7)
       prism-svelte:
         specifier: ^0.5.0
         version: 0.5.0
@@ -1084,8 +1084,8 @@ importers:
         specifier: ^3.1.2
         version: 3.1.2(typescript@5.0.4)
       svelte:
-        specifier: ^4.2.2
-        version: 4.2.2
+        specifier: ^4.2.7
+        version: 4.2.7
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -2034,7 +2034,7 @@ packages:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
 
-  /@sveltejs/eslint-config@6.0.4(@typescript-eslint/eslint-plugin@6.0.0)(@typescript-eslint/parser@6.10.0)(eslint-config-prettier@9.0.0)(eslint-plugin-svelte@2.31.0)(eslint-plugin-unicorn@49.0.0)(eslint@8.52.0)(typescript@4.9.4):
+  /@sveltejs/eslint-config@6.0.4(@typescript-eslint/eslint-plugin@6.0.0)(@typescript-eslint/parser@6.11.0)(eslint-config-prettier@9.0.0)(eslint-plugin-svelte@2.31.0)(eslint-plugin-unicorn@49.0.0)(eslint@8.52.0)(typescript@4.9.4):
     resolution: {integrity: sha512-U9pwmDs+DbmsnCgTfu6Bacdwqn0DuI1IQNSiQqTgzVyYfaaj+zy9ZoQCiJfxFBGXHkklyXuRHp0KMx346N0lcQ==}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': '>= 5'
@@ -2045,16 +2045,16 @@ packages:
       eslint-plugin-unicorn: '>= 47'
       typescript: '>= 4'
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.0.0(@typescript-eslint/parser@6.10.0)(eslint@8.52.0)(typescript@4.9.4)
-      '@typescript-eslint/parser': 6.10.0(eslint@8.52.0)(typescript@4.9.4)
+      '@typescript-eslint/eslint-plugin': 6.0.0(@typescript-eslint/parser@6.11.0)(eslint@8.52.0)(typescript@4.9.4)
+      '@typescript-eslint/parser': 6.11.0(eslint@8.52.0)(typescript@4.9.4)
       eslint: 8.52.0
       eslint-config-prettier: 9.0.0(eslint@8.52.0)
-      eslint-plugin-svelte: 2.31.0(eslint@8.52.0)(svelte@4.2.2)
+      eslint-plugin-svelte: 2.31.0(eslint@8.52.0)(svelte@4.2.7)
       eslint-plugin-unicorn: 49.0.0(eslint@8.52.0)
       typescript: 4.9.4
     dev: true
 
-  /@sveltejs/site-kit@6.0.0-next.52(@sveltejs/kit@packages+kit)(svelte@4.2.2):
+  /@sveltejs/site-kit@6.0.0-next.52(@sveltejs/kit@packages+kit)(svelte@4.2.7):
     resolution: {integrity: sha512-r/VoVllvrr9So9LcYT7XRXDK38Q6Fx062gosuTkDztENBw+qGp3hMq1vg9qSomJastmavRzze1cjJnQFgacWMw==}
     peerDependencies:
       '@sveltejs/kit': ^1.20.0
@@ -2062,11 +2062,11 @@ packages:
     dependencies:
       '@sveltejs/kit': link:packages/kit
       esm-env: 1.0.0
-      svelte: 4.2.2
-      svelte-local-storage-store: 0.6.0(svelte@4.2.2)
+      svelte: 4.2.7
+      svelte-local-storage-store: 0.6.0(svelte@4.2.7)
     dev: true
 
-  /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.0)(svelte@4.2.2)(vite@4.4.9):
+  /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.0)(svelte@4.2.7)(vite@4.4.9):
     resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
@@ -2074,28 +2074,28 @@ packages:
       svelte: ^3.54.0 || ^4.0.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.5.0(svelte@4.2.2)(vite@4.4.9)
+      '@sveltejs/vite-plugin-svelte': 2.5.0(svelte@4.2.7)(vite@4.4.9)
       debug: 4.3.4
-      svelte: 4.2.2
+      svelte: 4.2.7
       vite: 4.4.9(@types/node@16.18.6)(lightningcss@1.21.8)
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@sveltejs/vite-plugin-svelte@2.5.0(svelte@4.2.2)(vite@4.4.9):
+  /@sveltejs/vite-plugin-svelte@2.5.0(svelte@4.2.7)(vite@4.4.9):
     resolution: {integrity: sha512-FxLZLVfFA2soGw7ej8Ohuav7+AOsJILiPlL8FgY5MABDDmDqb637o8Xd/QGkrXLC1qXyG1bnteOw5Z5yrA2lHA==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
       svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.5.0)(svelte@4.2.2)(vite@4.4.9)
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.5.0)(svelte@4.2.7)(vite@4.4.9)
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.5
-      svelte: 4.2.2
-      svelte-hmr: 0.15.3(svelte@4.2.2)
+      svelte: 4.2.7
+      svelte-hmr: 0.15.3(svelte@4.2.7)
       vite: 4.4.9(@types/node@16.18.6)(lightningcss@1.21.8)
       vitefu: 0.2.4(vite@4.4.9)
     transitivePeerDependencies:
@@ -2226,7 +2226,7 @@ packages:
       '@types/node': 16.18.6
     dev: true
 
-  /@typescript-eslint/eslint-plugin@6.0.0(@typescript-eslint/parser@6.10.0)(eslint@8.52.0)(typescript@4.9.4):
+  /@typescript-eslint/eslint-plugin@6.0.0(@typescript-eslint/parser@6.11.0)(eslint@8.52.0)(typescript@4.9.4):
     resolution: {integrity: sha512-xuv6ghKGoiq856Bww/yVYnXGsKa588kY3M0XK7uUW/3fJNNULKRfZfSBkMTSpqGG/8ZCXCadfh8G/z/B4aqS/A==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -2238,7 +2238,7 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.6.2
-      '@typescript-eslint/parser': 6.10.0(eslint@8.52.0)(typescript@4.9.4)
+      '@typescript-eslint/parser': 6.11.0(eslint@8.52.0)(typescript@4.9.4)
       '@typescript-eslint/scope-manager': 6.0.0
       '@typescript-eslint/type-utils': 6.0.0(eslint@8.52.0)(typescript@4.9.4)
       '@typescript-eslint/utils': 6.0.0(eslint@8.52.0)(typescript@4.9.4)
@@ -2257,8 +2257,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.10.0(eslint@8.52.0)(typescript@4.9.4):
-    resolution: {integrity: sha512-+sZwIj+s+io9ozSxIWbNB5873OSdfeBEH/FR0re14WLI6BaKuSOnnwCJ2foUiu8uXf4dRp1UqHP0vrZ1zXGrog==}
+  /@typescript-eslint/parser@6.11.0(eslint@8.52.0)(typescript@4.9.4):
+    resolution: {integrity: sha512-+whEdjk+d5do5nxfxx73oanLL9ghKO3EwM9kBCkUtWMRwWuPaFv9ScuqlYfQ6pAD6ZiJhky7TZ2ZYhrMsfMxVQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -2267,10 +2267,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 6.10.0
-      '@typescript-eslint/types': 6.10.0
-      '@typescript-eslint/typescript-estree': 6.10.0(typescript@4.9.4)
-      '@typescript-eslint/visitor-keys': 6.10.0
+      '@typescript-eslint/scope-manager': 6.11.0
+      '@typescript-eslint/types': 6.11.0
+      '@typescript-eslint/typescript-estree': 6.11.0(typescript@4.9.4)
+      '@typescript-eslint/visitor-keys': 6.11.0
       debug: 4.3.4
       eslint: 8.52.0
       typescript: 4.9.4
@@ -2286,12 +2286,12 @@ packages:
       '@typescript-eslint/visitor-keys': 6.0.0
     dev: true
 
-  /@typescript-eslint/scope-manager@6.10.0:
-    resolution: {integrity: sha512-TN/plV7dzqqC2iPNf1KrxozDgZs53Gfgg5ZHyw8erd6jd5Ta/JIEcdCheXFt9b1NYb93a1wmIIVW/2gLkombDg==}
+  /@typescript-eslint/scope-manager@6.11.0:
+    resolution: {integrity: sha512-0A8KoVvIURG4uhxAdjSaxy8RdRE//HztaZdG8KiHLP8WOXSk0vlF7Pvogv+vlJA5Rnjj/wDcFENvDaHb+gKd1A==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.10.0
-      '@typescript-eslint/visitor-keys': 6.10.0
+      '@typescript-eslint/types': 6.11.0
+      '@typescript-eslint/visitor-keys': 6.11.0
     dev: true
 
   /@typescript-eslint/type-utils@6.0.0(eslint@8.52.0)(typescript@4.9.4):
@@ -2319,8 +2319,8 @@ packages:
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/types@6.10.0:
-    resolution: {integrity: sha512-36Fq1PWh9dusgo3vH7qmQAj5/AZqARky1Wi6WpINxB6SkQdY5vQoT2/7rW7uBIsPDcvvGCLi4r10p0OJ7ITAeg==}
+  /@typescript-eslint/types@6.11.0:
+    resolution: {integrity: sha512-ZbEzuD4DwEJxwPqhv3QULlRj8KYTAnNsXxmfuUXFCxZmO6CF2gM/y+ugBSAQhrqaJL3M+oe4owdWunaHM6beqA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
@@ -2345,8 +2345,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.10.0(typescript@4.9.4):
-    resolution: {integrity: sha512-ek0Eyuy6P15LJVeghbWhSrBCj/vJpPXXR+EpaRZqou7achUWL8IdYnMSC5WHAeTWswYQuP2hAZgij/bC9fanBg==}
+  /@typescript-eslint/typescript-estree@6.11.0(typescript@4.9.4):
+    resolution: {integrity: sha512-Aezzv1o2tWJwvZhedzvD5Yv7+Lpu1by/U1LZ5gLc4tCx8jUmuSCMioPFRjliN/6SJIvY6HpTtJIWubKuYYYesQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       typescript: '*'
@@ -2354,8 +2354,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 6.10.0
-      '@typescript-eslint/visitor-keys': 6.10.0
+      '@typescript-eslint/types': 6.11.0
+      '@typescript-eslint/visitor-keys': 6.11.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
@@ -2394,11 +2394,11 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@typescript-eslint/visitor-keys@6.10.0:
-    resolution: {integrity: sha512-xMGluxQIEtOM7bqFCo+rCMh5fqI+ZxV5RUUOa29iVPz1OgCZrtc7rFnz5cLUazlkPKYqX+75iuDq7m0HQ48nCg==}
+  /@typescript-eslint/visitor-keys@6.11.0:
+    resolution: {integrity: sha512-+SUN/W7WjBr05uRxPggJPSzyB8zUpaYo2hByKasWbqr3PM8AXfZt8UHdNpBS1v9SA62qnSSMF3380SwDqqprgQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.10.0
+      '@typescript-eslint/types': 6.11.0
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -3402,7 +3402,7 @@ packages:
       eslint: 8.52.0
     dev: true
 
-  /eslint-plugin-svelte@2.31.0(eslint@8.52.0)(svelte@4.2.2):
+  /eslint-plugin-svelte@2.31.0(eslint@8.52.0)(svelte@4.2.7):
     resolution: {integrity: sha512-Q70jPFRraTkc/giPSfY7yuatmJcb5fPelWNplevqd45gfaJDjc3qXRtWQ6m9U5tWVVYERU9dcdUod294vwD8Gw==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -3422,8 +3422,8 @@ packages:
       postcss-load-config: 3.1.4(postcss@8.4.31)
       postcss-safe-parser: 6.0.0(postcss@8.4.31)
       postcss-selector-parser: 6.0.13
-      svelte: 4.2.2
-      svelte-eslint-parser: 0.31.0(svelte@4.2.2)
+      svelte: 4.2.7
+      svelte-eslint-parser: 0.31.0(svelte@4.2.7)
     transitivePeerDependencies:
       - supports-color
       - ts-node
@@ -5110,14 +5110,14 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier-plugin-svelte@3.0.3(prettier@3.1.0)(svelte@4.2.2):
+  /prettier-plugin-svelte@3.0.3(prettier@3.1.0)(svelte@4.2.7):
     resolution: {integrity: sha512-dLhieh4obJEK1hnZ6koxF+tMUrZbV5YGvRpf2+OADyanjya5j0z1Llo8iGwiHmFWZVG/hLEw/AJD5chXd9r3XA==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0
     dependencies:
       prettier: 3.1.0
-      svelte: 4.2.2
+      svelte: 4.2.7
     dev: true
 
   /prettier@2.8.8:
@@ -5731,7 +5731,7 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /svelte-check@3.4.4(postcss@8.4.31)(svelte@4.2.2):
+  /svelte-check@3.4.4(postcss@8.4.31)(svelte@4.2.7):
     resolution: {integrity: sha512-Uys9+R65cj8TmP8f5UpS7B2xKpNLYNxEWJsA5ZoKcWq/uwvABFF7xS6iPQGLoa7hxz0DS6xU60YFpmq06E4JxA==}
     hasBin: true
     peerDependencies:
@@ -5743,8 +5743,8 @@ packages:
       import-fresh: 3.3.0
       picocolors: 1.0.0
       sade: 1.8.1
-      svelte: 4.2.2
-      svelte-preprocess: 5.0.4(postcss@8.4.31)(svelte@4.2.2)(typescript@5.0.4)
+      svelte: 4.2.7
+      svelte-preprocess: 5.0.4(postcss@8.4.31)(svelte@4.2.7)(typescript@5.0.4)
       typescript: 5.0.4
     transitivePeerDependencies:
       - '@babel/core'
@@ -5758,7 +5758,7 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-eslint-parser@0.31.0(svelte@4.2.2):
+  /svelte-eslint-parser@0.31.0(svelte@4.2.7):
     resolution: {integrity: sha512-/31RpBf/e3YjoFphjsyo3JRyN1r4UalGAGafXrZ6EJK4h4COOO0rbfBoen5byGsXnIJKsrlC1lkEd2Vzpq2IDg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5772,36 +5772,36 @@ packages:
       espree: 9.6.1
       postcss: 8.4.31
       postcss-scss: 4.0.6(postcss@8.4.31)
-      svelte: 4.2.2
+      svelte: 4.2.7
     dev: true
 
-  /svelte-hmr@0.15.3(svelte@4.2.2):
+  /svelte-hmr@0.15.3(svelte@4.2.7):
     resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
     dependencies:
-      svelte: 4.2.2
+      svelte: 4.2.7
     dev: false
 
-  /svelte-local-storage-store@0.6.0(svelte@4.2.2):
+  /svelte-local-storage-store@0.6.0(svelte@4.2.7):
     resolution: {integrity: sha512-UbCY/yT/YUadU5IX/gZkoRQnA+ebFZHKKQjlJvfWHnBj3CPe9sNn8ndxYz/xy4LUzGjuBLq8+wH5RYK54ba3wA==}
     engines: {node: '>=0.14'}
     peerDependencies:
       svelte: ^3.48.0 || ^4.0.0
     dependencies:
-      svelte: 4.2.2
+      svelte: 4.2.7
     dev: true
 
-  /svelte-parse-markup@0.1.2(svelte@4.2.2):
+  /svelte-parse-markup@0.1.2(svelte@4.2.7):
     resolution: {integrity: sha512-DycY7DJr7VqofiJ63ut1/NEG92HrWWL56VWITn/cJCu+LlZhMoBkBXT4opUitPEEwbq1nMQbv4vTKUfbOqIW1g==}
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0
     dependencies:
-      svelte: 4.2.2
+      svelte: 4.2.7
     dev: false
 
-  /svelte-preprocess@5.0.4(postcss@8.4.31)(svelte@4.2.2)(typescript@4.9.4):
+  /svelte-preprocess@5.0.4(postcss@8.4.31)(svelte@4.2.7)(typescript@4.9.4):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -5845,11 +5845,11 @@ packages:
       postcss: 8.4.31
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 4.2.2
+      svelte: 4.2.7
       typescript: 4.9.4
     dev: true
 
-  /svelte-preprocess@5.0.4(postcss@8.4.31)(svelte@4.2.2)(typescript@5.0.4):
+  /svelte-preprocess@5.0.4(postcss@8.4.31)(svelte@4.2.7)(typescript@5.0.4):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -5893,11 +5893,11 @@ packages:
       postcss: 8.4.31
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 4.2.2
+      svelte: 4.2.7
       typescript: 5.0.4
     dev: true
 
-  /svelte2tsx@0.6.19(svelte@4.2.2)(typescript@4.9.4):
+  /svelte2tsx@0.6.19(svelte@4.2.7)(typescript@4.9.4):
     resolution: {integrity: sha512-h3b5OtcO8zyVL/RiB2zsDwCopeo/UH+887uyhgb2mjnewOFwiTxu+4IGuVwrrlyuh2onM2ktfUemNrNmQwXONQ==}
     peerDependencies:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0
@@ -5905,12 +5905,12 @@ packages:
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 4.2.2
+      svelte: 4.2.7
       typescript: 4.9.4
     dev: false
 
-  /svelte@4.2.2:
-    resolution: {integrity: sha512-My2tytF2e2NnHSpn2M7/3VdXT4JdTglYVUuSuK/mXL2XtulPYbeBfl8Dm1QiaKRn0zoULRnL+EtfZHHP0k4H3A==}
+  /svelte@4.2.7:
+    resolution: {integrity: sha512-UExR1KS7raTdycsUrKLtStayu4hpdV3VZQgM0akX8XbXgLBlosdE/Sf3crOgyh9xIjqSYB3UEBuUlIQKRQX2hg==}
     engines: {node: '>=16'}
     dependencies:
       '@ampproject/remapping': 2.2.1
diff --git a/sites/kit.svelte.dev/package.json b/sites/kit.svelte.dev/package.json
index bdb395ad203a..1d9711a8d226 100644
--- a/sites/kit.svelte.dev/package.json
+++ b/sites/kit.svelte.dev/package.json
@@ -29,7 +29,7 @@
 		"prism-svelte": "^0.5.0",
 		"prismjs": "^1.29.0",
 		"shiki-twoslash": "^3.1.2",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.7",
 		"tiny-glob": "^0.2.9",
 		"typescript": "5.0.4",
 		"vite": "^4.4.9",

From d5b3f187d3022b7e0638a4b780cc7ae4e54c4f81 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 20 Nov 2023 16:59:20 +0100
Subject: [PATCH 11/22] fix test

---
 packages/kit/src/core/config/index.spec.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/kit/src/core/config/index.spec.js b/packages/kit/src/core/config/index.spec.js
index faaf138aebb3..1f9e9fb69e42 100644
--- a/packages/kit/src/core/config/index.spec.js
+++ b/packages/kit/src/core/config/index.spec.js
@@ -91,6 +91,11 @@ const get_defaults = (prefix = '') => ({
 			appTemplate: join(prefix, 'src/app.html'),
 			errorTemplate: join(prefix, 'src/error.html')
 		},
+		images: {
+			loader: null,
+			loaderOptions: {},
+			widths: [48, 128, 256, 540, 768, 1080, 1366, 1536, 1920, 2560, 3000, 4096, 5120]
+		},
 		inlineStyleThreshold: 0,
 		moduleExtensions: ['.js', '.ts'],
 		output: { preloadStrategy: 'modulepreload' },

From 5f4ae65611887c0827427ec677cfd0294d39e4b2 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 21 Nov 2023 17:01:41 +0100
Subject: [PATCH 12/22] fix types

---
 packages/kit/src/exports/public.d.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts
index cf9d3bb0b253..337b539d8a1f 100644
--- a/packages/kit/src/exports/public.d.ts
+++ b/packages/kit/src/exports/public.d.ts
@@ -438,8 +438,8 @@ export interface KitConfig {
 		 * Path to a module that contains a loader that will be used to generate the an image URL out of the given source and width.
 		 * It optionally also takes third parameter for options. Can be either a relative path or a reference to an npm packe.
 		 *
-		 * ```js
-		 * export default function loader(src, width, opts) {
+		 * ```ts
+		 * export default function loader(src: string, width: number, opts: any) {
 		 *  return `https://example.com/${src}?w=${width}&q=${opts.quality || 75}`;
 		 * }
 		 * ```

From 92851cebe90d47bcde5ea4276ea6382443fa7cfa Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 21 Nov 2023 17:19:53 +0100
Subject: [PATCH 13/22] resolve relative loader urls

---
 packages/kit/src/core/config/index.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/kit/src/core/config/index.js b/packages/kit/src/core/config/index.js
index a6e37d794277..f39553140d5c 100644
--- a/packages/kit/src/core/config/index.js
+++ b/packages/kit/src/core/config/index.js
@@ -2,6 +2,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import * as url from 'node:url';
 import options from './options.js';
+import { posixify } from '../../utils/filesystem.js';
 
 /**
  * Loads the template (src/app.html by default) and validates that it has the
@@ -91,6 +92,11 @@ function process_config(config, { cwd = process.cwd() } = {}) {
 		}
 	}
 
+	// Resolve relative loader urls
+	if (validated.kit.images.loader[0] === '.') {
+		validated.kit.images.loader = posixify(path.resolve(cwd, validated.kit.images.loader));
+	}
+
 	return validated;
 }
 

From 1ad9e806fcf73a344f1f02c10e81f69128097346 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 21 Nov 2023 17:25:23 +0100
Subject: [PATCH 14/22] use nearest width

---
 packages/kit/src/runtime/app/images.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/kit/src/runtime/app/images.js b/packages/kit/src/runtime/app/images.js
index 2e71d631b42c..7cbc5eb250da 100644
--- a/packages/kit/src/runtime/app/images.js
+++ b/packages/kit/src/runtime/app/images.js
@@ -104,5 +104,19 @@ function get_widths(width, sizes) {
 	// data. Even true 3x resolution screens are wasteful as the human eye cannot see that level of
 	// detail without something like a magnifying glass.
 	// https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
-	return { widths: [Math.round(width / 2), width], kind: 'x' };
+	return {
+		widths:
+			// We can't just use the provided width, we need to take one of the predefined ones because
+			// some image providers will throw a 400 error if the width is not one of the ones in the settings.
+			[nearest_width(Math.round(width / 2)), nearest_width(width)],
+		kind: 'x'
+	};
+}
+
+/** @param {number} width */
+function nearest_width(width) {
+	const widths = default_widths;
+	let i = 0;
+	while (i < widths.length - 1 && widths[i] < width) i += 1;
+	return widths[i];
 }

From 940cfaad73ed988e01c1d4cc3939560e75e4a7c9 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 21 Nov 2023 17:29:47 +0100
Subject: [PATCH 15/22] remove unnecessary loader options

---
 packages/adapter-vercel/image-loader.js    | 12 ++++++++----
 packages/kit/src/core/config/index.spec.js |  1 -
 packages/kit/src/core/config/options.js    |  1 -
 packages/kit/src/exports/public.d.ts       |  4 ----
 packages/kit/src/exports/vite/index.js     |  1 -
 packages/kit/src/runtime/app/images.js     |  4 ++--
 packages/kit/src/types/ambient.d.ts        |  2 --
 7 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/adapter-vercel/image-loader.js b/packages/adapter-vercel/image-loader.js
index 4c386704960d..c2bd7c0dc3bd 100644
--- a/packages/adapter-vercel/image-loader.js
+++ b/packages/adapter-vercel/image-loader.js
@@ -3,21 +3,25 @@
 /**
  * @param {string} src
  * @param {number} width
- * @param {any} _loader_options
  * @param {{ quality?: number }} [image_options]
  */
-export default function loader(src, width, _loader_options, image_options) {
+export default function loader(src, width, image_options) {
 	const url = new URL(src, 'http://n'); // If the base is a relative URL, we need to add a dummy host to the URL
 
 	if (url.pathname === '/_vercel/image') {
 		set_param(url, 'w', width);
-		set_param(url, 'q', image_options?.quality ?? 100, false);
+		if (image_options?.quality) {
+			set_param(url, 'q', image_options.quality, false);
+		}
 	} else {
 		url.pathname = '_vercel/image';
 		set_param(url, 'url', src);
 		set_param(url, 'w', width);
-		set_param(url, 'q', image_options?.quality ?? 100);
+		if (image_options?.quality) {
+			set_param(url, 'q', image_options.quality);
+		}
 	}
+
 	return src === url.href ? url.href : relative_url(url);
 }
 
diff --git a/packages/kit/src/core/config/index.spec.js b/packages/kit/src/core/config/index.spec.js
index 1f9e9fb69e42..4a70e27d9eda 100644
--- a/packages/kit/src/core/config/index.spec.js
+++ b/packages/kit/src/core/config/index.spec.js
@@ -93,7 +93,6 @@ const get_defaults = (prefix = '') => ({
 		},
 		images: {
 			loader: null,
-			loaderOptions: {},
 			widths: [48, 128, 256, 540, 768, 1080, 1366, 1536, 1920, 2560, 3000, 4096, 5120]
 		},
 		inlineStyleThreshold: 0,
diff --git a/packages/kit/src/core/config/options.js b/packages/kit/src/core/config/options.js
index 7ec56b16b15b..62bffa0bb7a5 100644
--- a/packages/kit/src/core/config/options.js
+++ b/packages/kit/src/core/config/options.js
@@ -140,7 +140,6 @@ const options = object(
 
 			images: object({
 				loader: string(null),
-				loaderOptions: object({}, true),
 				widths: number_array([
 					48, 128, 256, 540, 768, 1080, 1366, 1536, 1920, 2560, 3000, 4096, 5120
 				])
diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts
index 337b539d8a1f..4889e216bfde 100644
--- a/packages/kit/src/exports/public.d.ts
+++ b/packages/kit/src/exports/public.d.ts
@@ -445,10 +445,6 @@ export interface KitConfig {
 		 * ```
 		 */
 		loader: string;
-		/**
-		 * Specific options passed to the loader. Needs to be a JSON-stringifiable object.
-		 */
-		loaderOptions?: Record<string, any>;
 		/**
 		 * Which srcset sizes to generate
 		 * @default [48, 128, 256, 540, 768, 1080, 1366, 1536, 1920, 2560, 3000, 4096, 5120]
diff --git a/packages/kit/src/exports/vite/index.js b/packages/kit/src/exports/vite/index.js
index fc22cdc0e622..22d9b0dc04d3 100644
--- a/packages/kit/src/exports/vite/index.js
+++ b/packages/kit/src/exports/vite/index.js
@@ -450,7 +450,6 @@ function kit({ svelte_config }) {
 
 					return dedent`
 						export const widths = ${JSON.stringify(images.widths)};
-						export const loader_options = ${JSON.stringify(images.loaderOptions)};
 						${loader}
 					`;
 				}
diff --git a/packages/kit/src/runtime/app/images.js b/packages/kit/src/runtime/app/images.js
index 7cbc5eb250da..de27d656277e 100644
--- a/packages/kit/src/runtime/app/images.js
+++ b/packages/kit/src/runtime/app/images.js
@@ -1,5 +1,5 @@
 import { DEV } from 'esm-env';
-import { widths as default_widths, loader, loader_options } from '__sveltekit/images';
+import { widths as default_widths, loader } from '__sveltekit/images';
 
 /**
  * @typedef {{
@@ -34,7 +34,7 @@ export function getImage(payload) {
 	let _src = src;
 	const srcset = widths.widths
 		.map((width, i) => {
-			const url = DEV ? src : loader(src, width, loader_options, payload.options);
+			const url = DEV ? src : loader(src, width, payload.options);
 			_src = url; // ensures that the largest one is set
 			const w = widths.kind === 'x' ? `${i + 1}x` : `${width}w`;
 			return `${url} ${w}`;
diff --git a/packages/kit/src/types/ambient.d.ts b/packages/kit/src/types/ambient.d.ts
index ebe69b0a4038..73d69add78d6 100644
--- a/packages/kit/src/types/ambient.d.ts
+++ b/packages/kit/src/types/ambient.d.ts
@@ -113,8 +113,6 @@ declare module '__sveltekit/images' {
 	export let loader: (
 		url: string,
 		size: number | undefined,
-		loader_options: Record<string, any>,
 		image_options?: Record<string, any>
 	) => string;
-	export let loader_options: Record<string, any>;
 }

From 7cad3503843e2c63f8151507479021e1f6189945 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 21 Nov 2023 20:41:44 +0100
Subject: [PATCH 16/22] fix interface

---
 packages/adapter-vercel/image-loader.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/adapter-vercel/image-loader.d.ts b/packages/adapter-vercel/image-loader.d.ts
index f8507ae9baa4..894a467daced 100644
--- a/packages/adapter-vercel/image-loader.d.ts
+++ b/packages/adapter-vercel/image-loader.d.ts
@@ -4,6 +4,5 @@
 export default function loader(
 	src: string,
 	width: number,
-	loader_options: any,
 	image_options?: { quality?: number }
 ): string;

From 655953ae9f21c5dd8c698e67b8fbf3542ea10bc7 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 22 Nov 2023 13:19:12 +0100
Subject: [PATCH 17/22] fix default

---
 packages/kit/src/core/config/options.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kit/src/core/config/options.js b/packages/kit/src/core/config/options.js
index 62bffa0bb7a5..56a760b45451 100644
--- a/packages/kit/src/core/config/options.js
+++ b/packages/kit/src/core/config/options.js
@@ -139,7 +139,7 @@ const options = object(
 			}),
 
 			images: object({
-				loader: string(null),
+				loader: string(''),
 				widths: number_array([
 					48, 128, 256, 540, 768, 1080, 1366, 1536, 1920, 2560, 3000, 4096, 5120
 				])

From 906a19427403008a20c0781b91a2d758d729ded4 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 22 Nov 2023 14:18:11 +0100
Subject: [PATCH 18/22] docs

---
 documentation/docs/30-advanced/60-images.md | 75 +++++++++++++++++++--
 1 file changed, 71 insertions(+), 4 deletions(-)

diff --git a/documentation/docs/30-advanced/60-images.md b/documentation/docs/30-advanced/60-images.md
index 6471eb68b45e..b9c938904aee 100644
--- a/documentation/docs/30-advanced/60-images.md
+++ b/documentation/docs/30-advanced/60-images.md
@@ -133,13 +133,80 @@ By default, enhanced images will be transformed to more efficient formats. Howev
 
 [See the imagetools repo for the full list of directives](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md).
 
-## Loading images dynamically from a CDN
+## `$app/images`
 
-In some cases, the images may not be accessible at build time — e.g. they may live inside a content management system or elsewhere.
+In some cases, the images may not be accessible at build time — e.g. they may live inside a content management system or elsewhere. SvelteKit provides a helper through `$app/images` to make it possible to load these images using best practices. In its simplest form, you pass an image url and the intrinsic width and height of the image to `getImage` and spread the result onto an `img` tag:
 
-Using a content delivery network (CDN) can allow you to optimize these images dynamically, and provides more flexibility with regards to sizes, but it may involve some setup overhead and usage costs. Depending on caching strategy, the browser may not be able to use a cached copy of the asset until a [304 response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304) is received from the CDN. Building HTML to target CDNs may result in slightly smaller and simpler HTML because they can serve the appropriate file format for an `<img>` tag based on the `User-Agent` header whereas build-time optimizations must produce `<picture>` tags with multiple sources. Finally, some CDNs may generate images lazily, which could have a negative performance impact for sites with low traffic and frequently changing images.
+```svelte
+<script>
+	import { getImage } from '$app/images';
+</script>
+
+<img {...getImage({ src: '/path/to/image', width: 1000, height: 800 })} alt="An alt text" />
+```
+
+The result in this case will be generated `src` and `srcset` attributes. The `srcset` will contain two resolution variants and the browser decides based on the device's pixel density which image to load.
+
+If you provide the `size` property or set `layout: "fill"` instead of `width` and `height`, the `srcset` will instead contain a list of URLs for various device widths and the browser will choose the appropriate one.
+
+```svelte
+<script>
+	import { getImage } from '$app/images';
+</script>
+
+<img {...getImage({ src: '/path/to/image', width: 1000, height: 800, size: '100vw' })} alt="An alt text" />
+```
+
+Remember to give the largest image above the fold (i.e. the largest one that is immediately visible) a `fetchpriority` of `high` to ensure browsers download it earlier and set `loading: 'lazy'` for unimportant images, which both contributes to better web vital scores.
+
+```svelte
+<script>
+	import { getImage } from '$app/images';
+</script>
+
+<img {...getImage({ src: '/path/to/image', width: 1000, height: 800, size: '100vw', fetchpriority: 'high' })} alt="An alt text" />
+```
+
+Because `getImage` is just a simple function, you can wrap it in a function to set sensible defaults for your app, or use it as a base for a custom image component.
+
+### Configurating an image loader
+
+`getImage` calculates the variants for an image based on its input and the `kit.images.width` configuration, which contains an array of numbers corresponding to various screen widths. For each variant, the configured image loader is invoked when running in production - at dev time, the loader is not invoked to prevent accidental image CDN costs.
+
+By default, no loader is configured and as such the image url is handed back without any modifications. To configure an image loader, pass a string to `kit.images.loader` which represents a path to a file on disk (either a relative path, or referencing an npm package). Some adapters like [`adapter-vercel`](adapter-vercel) provide ready-made loaders. It's also very easy to create your own loader. Here's an example using [`unpic`](https://unpic.pics/lib/), which provides solutions for a wide range of image CDNs:
+
+```js
+/// file: custom-loader.js
+// @filename: ambient.d.ts
+declare module 'unpic' {
+	export function transformUrl(args: any): string;
+}
+
+// @filename: index.js
+// ---cut---
+import { transformUrl } from 'unpic';
+
+/**
+ * @param {string} url
+ * @param {number} width
+ */
+export default function loader(url, width) {
+	return transformUrl({
+		url,
+		width,
+		// specify which cdn to use; you can leave this out if unpic can infer this from the url itself
+		cdn: 'shopify'
+	});
+}
+```
+
+A loader optionally takes a third parameter which corresponds to the `options` property passed to `getImage`. This allows for more control over the image transformation process, if needed.
+
+### Other considerations
+
+Using a content delivery network (CDN) can allow you to optimize images dynamically, and provides more flexibility with regards to sizes, but it may involve some setup overhead and usage costs. Depending on caching strategy, the browser may not be able to use a cached copy of the asset until a [304 response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304) is received from the CDN. Building HTML to target CDNs may result in slightly smaller and simpler HTML because they can serve the appropriate file format for an `<img>` tag based on the `User-Agent` header whereas build-time optimizations must produce `<picture>` tags with multiple sources. Finally, some CDNs may generate images lazily, which could have a negative performance impact for sites with low traffic and frequently changing images.
 
-CDNs can generally be used without any need for a library. However, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://github.com/storyblok/storyblok-svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling.
+CDNs can generally be used without any need for a library, but calling the CDN and ensuring that smaller images are called for smaller screens is generally up to you. Besides using `$app/images`, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://github.com/storyblok/storyblok-svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling.
 
 ## Best practices
 

From 0252485ef47351bd8354a3618a3ab3fd24712cfc Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 22 Nov 2023 19:29:42 +0100
Subject: [PATCH 19/22] tweaks

---
 documentation/docs/30-advanced/60-images.md | 14 +++++---------
 packages/kit/src/types/ambient.d.ts         |  6 +-----
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/documentation/docs/30-advanced/60-images.md b/documentation/docs/30-advanced/60-images.md
index b9c938904aee..7c5abc21dc05 100644
--- a/documentation/docs/30-advanced/60-images.md
+++ b/documentation/docs/30-advanced/60-images.md
@@ -178,25 +178,21 @@ By default, no loader is configured and as such the image url is handed back wit
 ```js
 /// file: custom-loader.js
 // @filename: ambient.d.ts
-declare module 'unpic' {
-	export function transformUrl(args: any): string;
+declare module 'unpic/transformers/shopify' {
+	export function transform(args: any): string;
 }
 
 // @filename: index.js
 // ---cut---
-import { transformUrl } from 'unpic';
+// This example uses shopify as the target image CDN
+import { transform } from 'unpic/transformers/shopify';
 
 /**
  * @param {string} url
  * @param {number} width
  */
 export default function loader(url, width) {
-	return transformUrl({
-		url,
-		width,
-		// specify which cdn to use; you can leave this out if unpic can infer this from the url itself
-		cdn: 'shopify'
-	});
+	return transform({ url, width });
 }
 ```
 
diff --git a/packages/kit/src/types/ambient.d.ts b/packages/kit/src/types/ambient.d.ts
index 73d69add78d6..d671eb6e9810 100644
--- a/packages/kit/src/types/ambient.d.ts
+++ b/packages/kit/src/types/ambient.d.ts
@@ -110,9 +110,5 @@ declare module '__sveltekit/paths' {
 /** Internal version of $app/images */
 declare module '__sveltekit/images' {
 	export let widths: number[];
-	export let loader: (
-		url: string,
-		size: number | undefined,
-		image_options?: Record<string, any>
-	) => string;
+	export let loader: (url: string, width: number, image_options?: Record<string, any>) => string;
 }

From 4695a6eaf5ed7b6425b8ac93c08da8d9dc195483 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 22 Nov 2023 19:30:23 +0100
Subject: [PATCH 20/22] fix test

---
 packages/kit/src/core/config/index.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kit/src/core/config/index.spec.js b/packages/kit/src/core/config/index.spec.js
index 4a70e27d9eda..e4fa14c51a2f 100644
--- a/packages/kit/src/core/config/index.spec.js
+++ b/packages/kit/src/core/config/index.spec.js
@@ -92,7 +92,7 @@ const get_defaults = (prefix = '') => ({
 			errorTemplate: join(prefix, 'src/error.html')
 		},
 		images: {
-			loader: null,
+			loader: '',
 			widths: [48, 128, 256, 540, 768, 1080, 1366, 1536, 1920, 2560, 3000, 4096, 5120]
 		},
 		inlineStyleThreshold: 0,

From 3c2063e6bfd5b3442119fd74f522339909efe1f4 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 22 Nov 2023 20:04:42 +0100
Subject: [PATCH 21/22] sizes

---
 documentation/docs/30-advanced/60-images.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/documentation/docs/30-advanced/60-images.md b/documentation/docs/30-advanced/60-images.md
index 7c5abc21dc05..d3de5a0547bb 100644
--- a/documentation/docs/30-advanced/60-images.md
+++ b/documentation/docs/30-advanced/60-images.md
@@ -147,14 +147,14 @@ In some cases, the images may not be accessible at build time — e.g. they may
 
 The result in this case will be generated `src` and `srcset` attributes. The `srcset` will contain two resolution variants and the browser decides based on the device's pixel density which image to load.
 
-If you provide the `size` property or set `layout: "fill"` instead of `width` and `height`, the `srcset` will instead contain a list of URLs for various device widths and the browser will choose the appropriate one.
+If you provide the `sizes` property or set `layout: "fill"` instead of `width` and `height`, the `srcset` will instead contain a list of URLs for various device widths and the browser will choose the appropriate one.
 
 ```svelte
 <script>
 	import { getImage } from '$app/images';
 </script>
 
-<img {...getImage({ src: '/path/to/image', width: 1000, height: 800, size: '100vw' })} alt="An alt text" />
+<img {...getImage({ src: '/path/to/image', width: 1000, height: 800, sizes: '100vw' })} alt="An alt text" />
 ```
 
 Remember to give the largest image above the fold (i.e. the largest one that is immediately visible) a `fetchpriority` of `high` to ensure browsers download it earlier and set `loading: 'lazy'` for unimportant images, which both contributes to better web vital scores.
@@ -164,7 +164,7 @@ Remember to give the largest image above the fold (i.e. the largest one that is
 	import { getImage } from '$app/images';
 </script>
 
-<img {...getImage({ src: '/path/to/image', width: 1000, height: 800, size: '100vw', fetchpriority: 'high' })} alt="An alt text" />
+<img {...getImage({ src: '/path/to/image', width: 1000, height: 800, sizes: '100vw', fetchpriority: 'high' })} alt="An alt text" />
 ```
 
 Because `getImage` is just a simple function, you can wrap it in a function to set sensible defaults for your app, or use it as a base for a custom image component.

From eec30aef6302024f7d55424f8eb6feca69e73e34 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 22 Nov 2023 23:41:17 +0100
Subject: [PATCH 22/22] tweaks

---
 documentation/docs/30-advanced/60-images.md | 5 +++--
 packages/adapter-vercel/index.d.ts          | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/documentation/docs/30-advanced/60-images.md b/documentation/docs/30-advanced/60-images.md
index d3de5a0547bb..b5726f59ef55 100644
--- a/documentation/docs/30-advanced/60-images.md
+++ b/documentation/docs/30-advanced/60-images.md
@@ -190,9 +190,10 @@ import { transform } from 'unpic/transformers/shopify';
 /**
  * @param {string} url
  * @param {number} width
+ * @param {Record<string, any>} options
  */
-export default function loader(url, width) {
-	return transform({ url, width });
+export default function loader(url, width, options) {
+	return transform({ url, width, ...options });
 }
 ```
 
diff --git a/packages/adapter-vercel/index.d.ts b/packages/adapter-vercel/index.d.ts
index 1fbc688d324d..6b13e21ee243 100644
--- a/packages/adapter-vercel/index.d.ts
+++ b/packages/adapter-vercel/index.d.ts
@@ -13,7 +13,9 @@ export default function plugin(
 ): Adapter;
 
 /**
- * https://vercel.com/docs/concepts/image-optimization
+ * Define how Vercel should optimize your images. Links to the documentation:
+ * - https://vercel.com/docs/concepts/image-optimization
+ * - https://vercel.com/docs/build-output-api/v3/configuration#images
  */
 export interface ImageConfig {
 	/** Only set this if you're not using SvelteKit's `getImage` from `$app/images` */