first

frontend/node_modules/svelte/src/reactivity/create-subscriber.js

@@ -0,0 +1,95 @@
+import { get, tick, untrack } from '../internal/client/runtime.js';
+import { effect_tracking, render_effect } from '../internal/client/reactivity/effects.js';
+import { source, increment } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
+import { DEV } from 'esm-env';
+import { queue_micro_task } from '../internal/client/dom/task.js';
+
+/**
+ * Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.
+ * It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.
+ *
+ * If `subscribe` is called inside an effect (including indirectly, for example inside a getter),
+ * the `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.
+ *
+ * If `start` returns a cleanup function, it will be called when the effect is destroyed.
+ *
+ * If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
+ * are active, and the returned teardown function will only be called when all effects are destroyed.
+ *
+ * It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery):
+ *
+ * ```js
+ * import { createSubscriber } from 'svelte/reactivity';
+ * import { on } from 'svelte/events';
+ *
+ * export class MediaQuery {
+ * 	#query;
+ * 	#subscribe;
+ *
+ * 	constructor(query) {
+ * 		this.#query = window.matchMedia(`(${query})`);
+ *
+ * 		this.#subscribe = createSubscriber((update) => {
+ * 			// when the `change` event occurs, re-run any effects that read `this.current`
+ * 			const off = on(this.#query, 'change', update);
+ *
+ * 			// stop listening when all the effects are destroyed
+ * 			return () => off();
+ * 		});
+ * 	}
+ *
+ * 	get current() {
+ * 		// This makes the getter reactive, if read in an effect
+ * 		this.#subscribe();
+ *
+ * 		// Return the current state of the query, whether or not we're in an effect
+ * 		return this.#query.matches;
+ * 	}
+ * }
+ * ```
+ * @param {(update: () => void) => (() => void) | void} start
+ * @since 5.7.0
+ */
+export function createSubscriber(start) {
+	let subscribers = 0;
+	let version = source(0);
+	/** @type {(() => void) | void} */
+	let stop;
+
+	if (DEV) {
+		tag(version, 'createSubscriber version');
+	}
+
+	return () => {
+		if (effect_tracking()) {
+			get(version);
+
+			render_effect(() => {
+				if (subscribers === 0) {
+					stop = untrack(() => start(() => increment(version)));
+				}
+
+				subscribers += 1;
+
+				return () => {
+					queue_micro_task(() => {
+						// Only count down after a microtask, else we would reach 0 before our own render effect reruns,
+						// but reach 1 again when the tick callback of the prior teardown runs. That would mean we
+						// re-subcribe unnecessarily and create a memory leak because the old subscription is never cleaned up.
+						subscribers -= 1;
+
+						if (subscribers === 0) {
+							stop?.();
+							stop = undefined;
+							// Increment the version to ensure any dependent deriveds are marked dirty when the subscription is picked up again later.
+							// If we didn't do this then the comparison of write versions would determine that the derived has a later version than
+							// the subscriber, and it would not be re-run.
+							increment(version);
+						}
+					});
+				};
+			});
+		}
+	};
+}

frontend/node_modules/svelte/src/reactivity/date.js

@@ -0,0 +1,118 @@
+/** @import { Source } from '#client' */
+import { derived } from '../internal/client/index.js';
+import { set, state } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
+import { active_reaction, get, set_active_reaction } from '../internal/client/runtime.js';
+import { DEV } from 'esm-env';
+
+var inited = false;
+
+/**
+ * A reactive version of the built-in [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.
+ * Reading the date (whether with methods like `date.getTime()` or `date.toString()`, or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat))
+ * in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated when the value of the date changes.
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteDate } from 'svelte/reactivity';
+ *
+ * 	const date = new SvelteDate();
+ *
+ * 	const formatter = new Intl.DateTimeFormat(undefined, {
+ * 	  hour: 'numeric',
+ * 	  minute: 'numeric',
+ * 	  second: 'numeric'
+ * 	});
+ *
+ * 	$effect(() => {
+ * 		const interval = setInterval(() => {
+ * 			date.setTime(Date.now());
+ * 		}, 1000);
+ *
+ * 		return () => {
+ * 			clearInterval(interval);
+ * 		};
+ * 	});
+ * </script>
+ *
+ * <p>The time is {formatter.format(date)}</p>
+ * ```
+ */
+export class SvelteDate extends Date {
+	#time = state(super.getTime());
+
+	/** @type {Map<keyof Date, Source<unknown>>} */
+	#deriveds = new Map();
+
+	#reaction = active_reaction;
+
+	/** @param {any[]} params */
+	constructor(...params) {
+		// @ts-ignore
+		super(...params);
+
+		if (DEV) {
+			tag(this.#time, 'SvelteDate.#time');
+		}
+
+		if (!inited) this.#init();
+	}
+
+	#init() {
+		inited = true;
+
+		var proto = SvelteDate.prototype;
+		var date_proto = Date.prototype;
+
+		var methods = /** @type {Array<keyof Date & string>} */ (
+			Object.getOwnPropertyNames(date_proto)
+		);
+
+		for (const method of methods) {
+			if (method.startsWith('get') || method.startsWith('to') || method === 'valueOf') {
+				// @ts-ignore
+				proto[method] = function (...args) {
+					// don't memoize if there are arguments
+					// @ts-ignore
+					if (args.length > 0) {
+						get(this.#time);
+						// @ts-ignore
+						return date_proto[method].apply(this, args);
+					}
+
+					var d = this.#deriveds.get(method);
+
+					if (d === undefined) {
+						// lazily create the derived, but as though it were being
+						// created at the same time as the class instance
+						const reaction = active_reaction;
+						set_active_reaction(this.#reaction);
+
+						d = derived(() => {
+							get(this.#time);
+							// @ts-ignore
+							return date_proto[method].apply(this, args);
+						});
+
+						this.#deriveds.set(method, d);
+
+						set_active_reaction(reaction);
+					}
+
+					return get(d);
+				};
+			}
+
+			if (method.startsWith('set')) {
+				// @ts-ignore
+				proto[method] = function (...args) {
+					// @ts-ignore
+					var result = date_proto[method].apply(this, args);
+					set(this.#time, date_proto.getTime.call(this));
+					return result;
+				};
+			}
+		}
+	}
+}

frontend/node_modules/svelte/src/reactivity/index-client.js

@@ -0,0 +1,7 @@
+export { SvelteDate } from './date.js';
+export { SvelteSet } from './set.js';
+export { SvelteMap } from './map.js';
+export { SvelteURL } from './url.js';
+export { SvelteURLSearchParams } from './url-search-params.js';
+export { MediaQuery } from './media-query.js';
+export { createSubscriber } from './create-subscriber.js';

frontend/node_modules/svelte/src/reactivity/index-server.js

@@ -0,0 +1,23 @@
+export const SvelteDate = globalThis.Date;
+export const SvelteSet = globalThis.Set;
+export const SvelteMap = globalThis.Map;
+export const SvelteURL = globalThis.URL;
+export const SvelteURLSearchParams = globalThis.URLSearchParams;
+
+export class MediaQuery {
+	current;
+	/**
+	 * @param {string} query
+	 * @param {boolean} [matches]
+	 */
+	constructor(query, matches = false) {
+		this.current = matches;
+	}
+}
+
+/**
+ * @param {any} _
+ */
+export function createSubscriber(_) {
+	return () => {};
+}

frontend/node_modules/svelte/src/reactivity/map.js

@@ -0,0 +1,274 @@
+/** @import { Source } from '#client' */
+import { DEV } from 'esm-env';
+import { set, source, state, increment } from '../internal/client/reactivity/sources.js';
+import { label, tag } from '../internal/client/dev/tracing.js';
+import { get, update_version } from '../internal/client/runtime.js';
+
+/**
+ * A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
+ * Reading contents of the map (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](https://svelte.dev/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated as necessary when the map is updated.
+ *
+ * Note that values in a reactive map are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteMap } from 'svelte/reactivity';
+ * 	import { result } from './game.js';
+ *
+ * 	let board = new SvelteMap();
+ * 	let player = $state('x');
+ * 	let winner = $derived(result(board));
+ *
+ * 	function reset() {
+ * 		player = 'x';
+ * 		board.clear();
+ * 	}
+ * </script>
+ *
+ * <div class="board">
+ * 	{#each Array(9), i}
+ * 		<button
+ * 			disabled={board.has(i) || winner}
+ * 			onclick={() => {
+ * 				board.set(i, player);
+ * 				player = player === 'x' ? 'o' : 'x';
+ * 			}}
+ * 		>{board.get(i)}</button>
+ * 	{/each}
+ * </div>
+ *
+ * {#if winner}
+ * 	<p>{winner} wins!</p>
+ * 	<button onclick={reset}>reset</button>
+ * {:else}
+ * 	<p>{player} is next</p>
+ * {/if}
+ * ```
+ *
+ * @template K
+ * @template V
+ * @extends {Map<K, V>}
+ */
+export class SvelteMap extends Map {
+	/** @type {Map<K, Source<number>>} */
+	#sources = new Map();
+	#version = state(0);
+	#size = state(0);
+	#update_version = update_version || -1;
+
+	/**
+	 * @param {Iterable<readonly [K, V]> | null | undefined} [value]
+	 */
+	constructor(value) {
+		super();
+
+		if (DEV) {
+			// If the value is invalid then the native exception will fire here
+			value = new Map(value);
+
+			tag(this.#version, 'SvelteMap version');
+			tag(this.#size, 'SvelteMap.size');
+		}
+
+		if (value) {
+			for (var [key, v] of value) {
+				super.set(key, v);
+			}
+			this.#size.v = super.size;
+		}
+	}
+
+	/**
+	 * If the source is being created inside the same reaction as the SvelteMap instance,
+	 * we use `state` so that it will not be a dependency of the reaction. Otherwise we
+	 * use `source` so it will be.
+	 *
+	 * @template T
+	 * @param {T} value
+	 * @returns {Source<T>}
+	 */
+	#source(value) {
+		return update_version === this.#update_version ? state(value) : source(value);
+	}
+
+	/** @param {K} key */
+	has(key) {
+		var sources = this.#sources;
+		var s = sources.get(key);
+
+		if (s === undefined) {
+			if (super.has(key)) {
+				s = this.#source(0);
+
+				if (DEV) {
+					tag(s, `SvelteMap get(${label(key)})`);
+				}
+
+				sources.set(key, s);
+			} else {
+				// We should always track the version in case
+				// the Set ever gets this value in the future.
+				get(this.#version);
+				return false;
+			}
+		}
+
+		get(s);
+		return true;
+	}
+
+	/**
+	 * @param {(value: V, key: K, map: Map<K, V>) => void} callbackfn
+	 * @param {any} [this_arg]
+	 */
+	forEach(callbackfn, this_arg) {
+		this.#read_all();
+		super.forEach(callbackfn, this_arg);
+	}
+
+	/** @param {K} key */
+	get(key) {
+		var sources = this.#sources;
+		var s = sources.get(key);
+
+		if (s === undefined) {
+			if (super.has(key)) {
+				s = this.#source(0);
+
+				if (DEV) {
+					tag(s, `SvelteMap get(${label(key)})`);
+				}
+
+				sources.set(key, s);
+			} else {
+				// We should always track the version in case
+				// the Set ever gets this value in the future.
+				get(this.#version);
+				return undefined;
+			}
+		}
+
+		get(s);
+		return super.get(key);
+	}
+
+	/**
+	 * @param {K} key
+	 * @param {V} value
+	 * */
+	set(key, value) {
+		var sources = this.#sources;
+		var s = sources.get(key);
+		var prev_res = super.get(key);
+		var res = super.set(key, value);
+		var version = this.#version;
+
+		if (s === undefined) {
+			s = this.#source(0);
+
+			if (DEV) {
+				tag(s, `SvelteMap get(${label(key)})`);
+			}
+
+			sources.set(key, s);
+			set(this.#size, super.size);
+			increment(version);
+		} else if (prev_res !== value) {
+			increment(s);
+
+			// if not every reaction of s is a reaction of version we need to also include version
+			var v_reactions = version.reactions === null ? null : new Set(version.reactions);
+			var needs_version_increase =
+				v_reactions === null ||
+				!s.reactions?.every((r) =>
+					/** @type {NonNullable<typeof v_reactions>} */ (v_reactions).has(r)
+				);
+			if (needs_version_increase) {
+				increment(version);
+			}
+		}
+
+		return res;
+	}
+
+	/** @param {K} key */
+	delete(key) {
+		var sources = this.#sources;
+		var s = sources.get(key);
+		var res = super.delete(key);
+
+		if (s !== undefined) {
+			sources.delete(key);
+			set(s, -1);
+		}
+
+		if (res) {
+			set(this.#size, super.size);
+			increment(this.#version);
+		}
+
+		return res;
+	}
+
+	clear() {
+		if (super.size === 0) {
+			return;
+		}
+		// Clear first, so we get nice console.log outputs with $inspect
+		super.clear();
+		var sources = this.#sources;
+		set(this.#size, 0);
+		for (var s of sources.values()) {
+			set(s, -1);
+		}
+		increment(this.#version);
+		sources.clear();
+	}
+
+	#read_all() {
+		get(this.#version);
+
+		var sources = this.#sources;
+		if (this.#size.v !== sources.size) {
+			for (var key of super.keys()) {
+				if (!sources.has(key)) {
+					var s = this.#source(0);
+					if (DEV) {
+						tag(s, `SvelteMap get(${label(key)})`);
+					}
+
+					sources.set(key, s);
+				}
+			}
+		}
+
+		for ([, s] of this.#sources) {
+			get(s);
+		}
+	}
+
+	keys() {
+		get(this.#version);
+		return super.keys();
+	}
+
+	values() {
+		this.#read_all();
+		return super.values();
+	}
+
+	entries() {
+		this.#read_all();
+		return super.entries();
+	}
+
+	[Symbol.iterator]() {
+		return this.entries();
+	}
+
+	get size() {
+		get(this.#size);
+		return super.size;
+	}
+}

frontend/node_modules/svelte/src/reactivity/media-query.js

@@ -0,0 +1,55 @@
+import { on } from '../events/index.js';
+import { ReactiveValue } from './reactive-value.js';
+
+const parenthesis_regex = /\(.+\)/;
+
+// these keywords are valid media queries but they need to be without parenthesis
+//
+// eg: new MediaQuery('screen')
+//
+// however because of the auto-parenthesis logic in the constructor since there's no parenthesis
+// in the media query they'll be surrounded by parenthesis
+//
+// however we can check if the media query is only composed of these keywords
+// and skip the auto-parenthesis
+//
+// https://github.com/sveltejs/svelte/issues/15930
+const non_parenthesized_keywords = new Set(['all', 'print', 'screen', 'and', 'or', 'not', 'only']);
+
+/**
+ * Creates a media query and provides a `current` property that reflects whether or not it matches.
+ *
+ * Use it carefully — during server-side rendering, there is no way to know what the correct value should be, potentially causing content to change upon hydration.
+ * If you can use the media query in CSS to achieve the same effect, do that.
+ *
+ * ```svelte
+ * <script>
+ * 	import { MediaQuery } from 'svelte/reactivity';
+ *
+ * 	const large = new MediaQuery('min-width: 800px');
+ * </script>
+ *
+ * <h1>{large.current ? 'large screen' : 'small screen'}</h1>
+ * ```
+ * @extends {ReactiveValue<boolean>}
+ * @since 5.7.0
+ */
+export class MediaQuery extends ReactiveValue {
+	/**
+	 * @param {string} query A media query string
+	 * @param {boolean} [fallback] Fallback value for the server
+	 */
+	constructor(query, fallback) {
+		let final_query =
+			parenthesis_regex.test(query) ||
+			// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
+			query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
+				? query
+				: `(${query})`;
+		const q = window.matchMedia(final_query);
+		super(
+			() => q.matches,
+			(update) => on(q, 'change', update)
+		);
+	}
+}

frontend/node_modules/svelte/src/reactivity/reactive-value.js

@@ -0,0 +1,24 @@
+import { createSubscriber } from './create-subscriber.js';
+
+/**
+ * @template T
+ */
+export class ReactiveValue {
+	#fn;
+	#subscribe;
+
+	/**
+	 *
+	 * @param {() => T} fn
+	 * @param {(update: () => void) => void} onsubscribe
+	 */
+	constructor(fn, onsubscribe) {
+		this.#fn = fn;
+		this.#subscribe = createSubscriber(onsubscribe);
+	}
+
+	get current() {
+		this.#subscribe();
+		return this.#fn();
+	}
+}

frontend/node_modules/svelte/src/reactivity/set.js

@@ -0,0 +1,213 @@
+/** @import { Source } from '#client' */
+import { DEV } from 'esm-env';
+import { source, set, state, increment } from '../internal/client/reactivity/sources.js';
+import { label, tag } from '../internal/client/dev/tracing.js';
+import { get, update_version } from '../internal/client/runtime.js';
+
+var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf'];
+var set_like_methods = ['difference', 'intersection', 'symmetricDifference', 'union'];
+
+var inited = false;
+
+/**
+ * A reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object.
+ * Reading contents of the set (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](https://svelte.dev/playground/53438b51194b4882bcc18cddf9f96f15) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated as necessary when the set is updated.
+ *
+ * Note that values in a reactive set are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteSet } from 'svelte/reactivity';
+ * 	let monkeys = new SvelteSet();
+ *
+ * 	function toggle(monkey) {
+ * 		if (monkeys.has(monkey)) {
+ * 			monkeys.delete(monkey);
+ * 		} else {
+ * 			monkeys.add(monkey);
+ * 		}
+ * 	}
+ * </script>
+ *
+ * {#each ['🙈', '🙉', '🙊'] as monkey}
+ * 	<button onclick={() => toggle(monkey)}>{monkey}</button>
+ * {/each}
+ *
+ * <button onclick={() => monkeys.clear()}>clear</button>
+ *
+ * {#if monkeys.has('🙈')}<p>see no evil</p>{/if}
+ * {#if monkeys.has('🙉')}<p>hear no evil</p>{/if}
+ * {#if monkeys.has('🙊')}<p>speak no evil</p>{/if}
+ * ```
+ *
+ * @template T
+ * @extends {Set<T>}
+ */
+export class SvelteSet extends Set {
+	/** @type {Map<T, Source<boolean>>} */
+	#sources = new Map();
+	#version = state(0);
+	#size = state(0);
+	#update_version = update_version || -1;
+
+	/**
+	 * @param {Iterable<T> | null | undefined} [value]
+	 */
+	constructor(value) {
+		super();
+
+		if (DEV) {
+			// If the value is invalid then the native exception will fire here
+			value = new Set(value);
+
+			tag(this.#version, 'SvelteSet version');
+			tag(this.#size, 'SvelteSet.size');
+		}
+
+		if (value) {
+			for (var element of value) {
+				super.add(element);
+			}
+			this.#size.v = super.size;
+		}
+
+		if (!inited) this.#init();
+	}
+
+	/**
+	 * If the source is being created inside the same reaction as the SvelteSet instance,
+	 * we use `state` so that it will not be a dependency of the reaction. Otherwise we
+	 * use `source` so it will be.
+	 *
+	 * @template T
+	 * @param {T} value
+	 * @returns {Source<T>}
+	 */
+	#source(value) {
+		return update_version === this.#update_version ? state(value) : source(value);
+	}
+
+	// We init as part of the first instance so that we can treeshake this class
+	#init() {
+		inited = true;
+
+		var proto = SvelteSet.prototype;
+		var set_proto = Set.prototype;
+
+		for (const method of read_methods) {
+			// @ts-ignore
+			proto[method] = function (...v) {
+				get(this.#version);
+				// @ts-ignore
+				return set_proto[method].apply(this, v);
+			};
+		}
+
+		for (const method of set_like_methods) {
+			// @ts-ignore
+			proto[method] = function (...v) {
+				get(this.#version);
+				// @ts-ignore
+				var set = /** @type {Set<T>} */ (set_proto[method].apply(this, v));
+				return new SvelteSet(set);
+			};
+		}
+	}
+
+	/** @param {T} value */
+	has(value) {
+		var has = super.has(value);
+		var sources = this.#sources;
+		var s = sources.get(value);
+
+		if (s === undefined) {
+			if (!has) {
+				// If the value doesn't exist, track the version in case it's added later
+				// but don't create sources willy-nilly to track all possible values
+				get(this.#version);
+				return false;
+			}
+
+			s = this.#source(true);
+
+			if (DEV) {
+				tag(s, `SvelteSet has(${label(value)})`);
+			}
+
+			sources.set(value, s);
+		}
+
+		get(s);
+		return has;
+	}
+
+	/** @param {T} value */
+	add(value) {
+		if (!super.has(value)) {
+			super.add(value);
+			set(this.#size, super.size);
+			increment(this.#version);
+		}
+
+		return this;
+	}
+
+	/** @param {T} value */
+	delete(value) {
+		var deleted = super.delete(value);
+		var sources = this.#sources;
+		var s = sources.get(value);
+
+		if (s !== undefined) {
+			sources.delete(value);
+			set(s, false);
+		}
+
+		if (deleted) {
+			set(this.#size, super.size);
+			increment(this.#version);
+		}
+
+		return deleted;
+	}
+
+	clear() {
+		if (super.size === 0) {
+			return;
+		}
+		// Clear first, so we get nice console.log outputs with $inspect
+		super.clear();
+		var sources = this.#sources;
+
+		for (var s of sources.values()) {
+			set(s, false);
+		}
+
+		sources.clear();
+		set(this.#size, 0);
+		increment(this.#version);
+	}
+
+	keys() {
+		return this.values();
+	}
+
+	values() {
+		get(this.#version);
+		return super.values();
+	}
+
+	entries() {
+		get(this.#version);
+		return super.entries();
+	}
+
+	[Symbol.iterator]() {
+		return this.keys();
+	}
+
+	get size() {
+		return get(this.#size);
+	}
+}

frontend/node_modules/svelte/src/reactivity/url-search-params.js

@@ -0,0 +1,174 @@
+import { DEV } from 'esm-env';
+import { state, increment } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
+import { get } from '../internal/client/runtime.js';
+import { get_current_url } from './url.js';
+
+export const REPLACE = Symbol();
+
+/**
+ * A reactive version of the built-in [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object.
+ * Reading its contents (by iterating, or by calling `params.get(...)` or `params.getAll(...)` as in the [example](https://svelte.dev/playground/b3926c86c5384bab9f2cf993bc08c1c8) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated as necessary when the params are updated.
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteURLSearchParams } from 'svelte/reactivity';
+ *
+ * 	const params = new SvelteURLSearchParams('message=hello');
+ *
+ * 	let key = $state('key');
+ * 	let value = $state('value');
+ * </script>
+ *
+ * <input bind:value={key} />
+ * <input bind:value={value} />
+ * <button onclick={() => params.append(key, value)}>append</button>
+ *
+ * <p>?{params.toString()}</p>
+ *
+ * {#each params as [key, value]}
+ * 	<p>{key}: {value}</p>
+ * {/each}
+ * ```
+ */
+export class SvelteURLSearchParams extends URLSearchParams {
+	#version = DEV ? tag(state(0), 'SvelteURLSearchParams version') : state(0);
+	#url = get_current_url();
+
+	#updating = false;
+
+	#update_url() {
+		if (!this.#url || this.#updating) return;
+		this.#updating = true;
+
+		const search = this.toString();
+		this.#url.search = search && `?${search}`;
+
+		this.#updating = false;
+	}
+
+	/**
+	 * @param {URLSearchParams} params
+	 * @internal
+	 */
+	[REPLACE](params) {
+		if (this.#updating) return;
+		this.#updating = true;
+
+		for (const key of [...super.keys()]) {
+			super.delete(key);
+		}
+
+		for (const [key, value] of params) {
+			super.append(key, value);
+		}
+
+		increment(this.#version);
+		this.#updating = false;
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string} value
+	 * @returns {void}
+	 */
+	append(name, value) {
+		super.append(name, value);
+		this.#update_url();
+		increment(this.#version);
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string=} value
+	 * @returns {void}
+	 */
+	delete(name, value) {
+		var has_value = super.has(name, value);
+		super.delete(name, value);
+		if (has_value) {
+			this.#update_url();
+			increment(this.#version);
+		}
+	}
+
+	/**
+	 * @param {string} name
+	 * @returns {string|null}
+	 */
+	get(name) {
+		get(this.#version);
+		return super.get(name);
+	}
+
+	/**
+	 * @param {string} name
+	 * @returns {string[]}
+	 */
+	getAll(name) {
+		get(this.#version);
+		return super.getAll(name);
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string=} value
+	 * @returns {boolean}
+	 */
+	has(name, value) {
+		get(this.#version);
+		return super.has(name, value);
+	}
+
+	keys() {
+		get(this.#version);
+		return super.keys();
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string} value
+	 * @returns {void}
+	 */
+	set(name, value) {
+		var previous = super.getAll(name).join('');
+		super.set(name, value);
+		// can't use has(name, value), because for something like https://svelte.dev?foo=1&bar=2&foo=3
+		// if you set `foo` to 1, then foo=3 gets deleted whilst `has("foo", "1")` returns true
+		if (previous !== super.getAll(name).join('')) {
+			this.#update_url();
+			increment(this.#version);
+		}
+	}
+
+	sort() {
+		super.sort();
+		this.#update_url();
+		increment(this.#version);
+	}
+
+	toString() {
+		get(this.#version);
+		return super.toString();
+	}
+
+	values() {
+		get(this.#version);
+		return super.values();
+	}
+
+	entries() {
+		get(this.#version);
+		return super.entries();
+	}
+
+	[Symbol.iterator]() {
+		return this.entries();
+	}
+
+	get size() {
+		get(this.#version);
+		return super.size;
+	}
+}

frontend/node_modules/svelte/src/reactivity/url.js

@@ -0,0 +1,205 @@
+import { DEV } from 'esm-env';
+import { set, state } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
+import { get } from '../internal/client/runtime.js';
+import { REPLACE, SvelteURLSearchParams } from './url-search-params.js';
+
+/** @type {SvelteURL | null} */
+let current_url = null;
+
+export function get_current_url() {
+	// ideally we'd just export `current_url` directly, but it seems Vitest doesn't respect live bindings
+	return current_url;
+}
+
+/**
+ * A reactive version of the built-in [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.
+ * Reading properties of the URL (such as `url.href` or `url.pathname`) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated as necessary when the URL changes.
+ *
+ * The `searchParams` property is an instance of [SvelteURLSearchParams](https://svelte.dev/docs/svelte/svelte-reactivity#SvelteURLSearchParams).
+ *
+ * [Example](https://svelte.dev/playground/5a694758901b448c83dc40dc31c71f2a):
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteURL } from 'svelte/reactivity';
+ *
+ * 	const url = new SvelteURL('https://example.com/path');
+ * </script>
+ *
+ * <!-- changes to these... -->
+ * <input bind:value={url.protocol} />
+ * <input bind:value={url.hostname} />
+ * <input bind:value={url.pathname} />
+ *
+ * <hr />
+ *
+ * <!-- will update `href` and vice versa -->
+ * <input bind:value={url.href} size="65" />
+ * ```
+ */
+export class SvelteURL extends URL {
+	#protocol = state(super.protocol);
+	#username = state(super.username);
+	#password = state(super.password);
+	#hostname = state(super.hostname);
+	#port = state(super.port);
+	#pathname = state(super.pathname);
+	#hash = state(super.hash);
+	#search = state(super.search);
+	#searchParams;
+
+	/**
+	 * @param {string | URL} url
+	 * @param {string | URL} [base]
+	 */
+	constructor(url, base) {
+		url = new URL(url, base);
+		super(url);
+
+		if (DEV) {
+			tag(this.#protocol, 'SvelteURL.protocol');
+			tag(this.#username, 'SvelteURL.username');
+			tag(this.#password, 'SvelteURL.password');
+			tag(this.#hostname, 'SvelteURL.hostname');
+			tag(this.#port, 'SvelteURL.port');
+			tag(this.#pathname, 'SvelteURL.pathname');
+			tag(this.#hash, 'SvelteURL.hash');
+			tag(this.#search, 'SvelteURL.search');
+		}
+
+		current_url = this;
+		this.#searchParams = new SvelteURLSearchParams(url.searchParams);
+		current_url = null;
+	}
+
+	get hash() {
+		return get(this.#hash);
+	}
+
+	set hash(value) {
+		super.hash = value;
+		set(this.#hash, super.hash);
+	}
+
+	get host() {
+		get(this.#hostname);
+		get(this.#port);
+		return super.host;
+	}
+
+	set host(value) {
+		super.host = value;
+		set(this.#hostname, super.hostname);
+		set(this.#port, super.port);
+	}
+
+	get hostname() {
+		return get(this.#hostname);
+	}
+
+	set hostname(value) {
+		super.hostname = value;
+		set(this.#hostname, super.hostname);
+	}
+
+	get href() {
+		get(this.#protocol);
+		get(this.#username);
+		get(this.#password);
+		get(this.#hostname);
+		get(this.#port);
+		get(this.#pathname);
+		get(this.#hash);
+		get(this.#search);
+		return super.href;
+	}
+
+	set href(value) {
+		super.href = value;
+		set(this.#protocol, super.protocol);
+		set(this.#username, super.username);
+		set(this.#password, super.password);
+		set(this.#hostname, super.hostname);
+		set(this.#port, super.port);
+		set(this.#pathname, super.pathname);
+		set(this.#hash, super.hash);
+		set(this.#search, super.search);
+		this.#searchParams[REPLACE](super.searchParams);
+	}
+
+	get password() {
+		return get(this.#password);
+	}
+
+	set password(value) {
+		super.password = value;
+		set(this.#password, super.password);
+	}
+
+	get pathname() {
+		return get(this.#pathname);
+	}
+
+	set pathname(value) {
+		super.pathname = value;
+		set(this.#pathname, super.pathname);
+	}
+
+	get port() {
+		return get(this.#port);
+	}
+
+	set port(value) {
+		super.port = value;
+		set(this.#port, super.port);
+	}
+
+	get protocol() {
+		return get(this.#protocol);
+	}
+
+	set protocol(value) {
+		super.protocol = value;
+		set(this.#protocol, super.protocol);
+	}
+
+	get search() {
+		return get(this.#search);
+	}
+
+	set search(value) {
+		super.search = value;
+		set(this.#search, super.search);
+		this.#searchParams[REPLACE](super.searchParams);
+	}
+
+	get username() {
+		return get(this.#username);
+	}
+
+	set username(value) {
+		super.username = value;
+		set(this.#username, super.username);
+	}
+
+	get origin() {
+		get(this.#protocol);
+		get(this.#hostname);
+		get(this.#port);
+		return super.origin;
+	}
+
+	get searchParams() {
+		return this.#searchParams;
+	}
+
+	toString() {
+		return this.href;
+	}
+
+	toJSON() {
+		return this.href;
+	}
+}

frontend/node_modules/svelte/src/reactivity/window/index.js

@@ -0,0 +1,161 @@
+import { BROWSER, DEV } from 'esm-env';
+import { on } from '../../events/index.js';
+import { ReactiveValue } from '../reactive-value.js';
+import { get } from '../../internal/client/index.js';
+import { set, source } from '../../internal/client/reactivity/sources.js';
+import { tag } from '../../internal/client/dev/tracing.js';
+
+/**
+ * `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.
+ * @since 5.11.0
+ */
+export const scrollX = new ReactiveValue(
+	BROWSER ? () => window.scrollX : () => undefined,
+	(update) => on(window, 'scroll', update)
+);
+
+/**
+ * `scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`.
+ * @since 5.11.0
+ */
+export const scrollY = new ReactiveValue(
+	BROWSER ? () => window.scrollY : () => undefined,
+	(update) => on(window, 'scroll', update)
+);
+
+/**
+ * `innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`.
+ * @since 5.11.0
+ */
+export const innerWidth = new ReactiveValue(
+	BROWSER ? () => window.innerWidth : () => undefined,
+	(update) => on(window, 'resize', update)
+);
+
+/**
+ * `innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`.
+ * @since 5.11.0
+ */
+export const innerHeight = new ReactiveValue(
+	BROWSER ? () => window.innerHeight : () => undefined,
+	(update) => on(window, 'resize', update)
+);
+
+/**
+ * `outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`.
+ * @since 5.11.0
+ */
+export const outerWidth = new ReactiveValue(
+	BROWSER ? () => window.outerWidth : () => undefined,
+	(update) => on(window, 'resize', update)
+);
+
+/**
+ * `outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`.
+ * @since 5.11.0
+ */
+export const outerHeight = new ReactiveValue(
+	BROWSER ? () => window.outerHeight : () => undefined,
+	(update) => on(window, 'resize', update)
+);
+
+/**
+ * `screenLeft.current` is a reactive view of `window.screenLeft`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.
+ * @since 5.11.0
+ */
+export const screenLeft = new ReactiveValue(
+	BROWSER ? () => window.screenLeft : () => undefined,
+	(update) => {
+		let value = window.screenLeft;
+
+		let frame = requestAnimationFrame(function check() {
+			frame = requestAnimationFrame(check);
+
+			if (value !== (value = window.screenLeft)) {
+				update();
+			}
+		});
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	}
+);
+
+/**
+ * `screenTop.current` is a reactive view of `window.screenTop`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.
+ * @since 5.11.0
+ */
+export const screenTop = new ReactiveValue(
+	BROWSER ? () => window.screenTop : () => undefined,
+	(update) => {
+		let value = window.screenTop;
+
+		let frame = requestAnimationFrame(function check() {
+			frame = requestAnimationFrame(check);
+
+			if (value !== (value = window.screenTop)) {
+				update();
+			}
+		});
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	}
+);
+
+/**
+ * `online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`.
+ * @since 5.11.0
+ */
+export const online = new ReactiveValue(
+	BROWSER ? () => navigator.onLine : () => undefined,
+	(update) => {
+		const unsub_online = on(window, 'online', update);
+		const unsub_offline = on(window, 'offline', update);
+		return () => {
+			unsub_online();
+			unsub_offline();
+		};
+	}
+);
+
+/**
+ * `devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`.
+ * Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level,
+ * on Firefox and Safari it won't.
+ * @type {{ get current(): number | undefined }}
+ * @since 5.11.0
+ */
+export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio {
+	#dpr = source(BROWSER ? window.devicePixelRatio : undefined);
+
+	#update() {
+		const off = on(
+			window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`),
+			'change',
+			() => {
+				set(this.#dpr, window.devicePixelRatio);
+
+				off();
+				this.#update();
+			}
+		);
+	}
+
+	constructor() {
+		if (BROWSER) {
+			this.#update();
+		}
+
+		if (DEV) {
+			tag(this.#dpr, 'window.devicePixelRatio');
+		}
+	}
+
+	get current() {
+		get(this.#dpr);
+		return BROWSER ? window.devicePixelRatio : undefined;
+	}
+})();