From c35f0c16af0426b829882be8efe6ac9f7684aa5f Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 14 Mar 2024 13:49:42 +0100
Subject: [PATCH 01/26] fix: deduplicate module declaration, adjust type
 (#10801)

- the `component` parameter expects a component constructor type, not an instance type
- use `import('svelte')` instead of relative paths to not inline all types that are already present in the sibiling module declaration
---
 packages/svelte/src/legacy/legacy-client.js |  12 +-
 packages/svelte/tests/types/component.ts    |   2 +-
 packages/svelte/types/index.d.ts            | 173 +-------------------
 3 files changed, 11 insertions(+), 176 deletions(-)

diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index 09f122e370..12c6c61b39 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -11,13 +11,13 @@ import * as $ from '../internal/index.js';
  * @template {Record<string, any>} Events
  * @template {Record<string, any>} Slots
  *
- * @param {import('../main/public.js').ComponentConstructorOptions<Props> & {
- * 	component: import('../main/public.js').SvelteComponent<Props, Events, Slots>;
+ * @param {import('svelte').ComponentConstructorOptions<Props> & {
+ * 	component: import('svelte').ComponentType<import('svelte').SvelteComponent<Props, Events, Slots>>;
  * 	immutable?: boolean;
  * 	hydrate?: boolean;
  * 	recover?: boolean;
  * }} options
- * @returns {import('../main/public.js').SvelteComponent<Props, Events, Slots> & Exports}
+ * @returns {import('svelte').SvelteComponent<Props, Events, Slots> & Exports}
  */
 export function createClassComponent(options) {
 	// @ts-expect-error $$prop_def etc are not actually defined
@@ -34,8 +34,8 @@ export function createClassComponent(options) {
  * @template {Record<string, any>} Events
  * @template {Record<string, any>} Slots
  *
- * @param {import('../main/public.js').SvelteComponent<Props, Events, Slots>} component
- * @returns {import('../main/public.js').ComponentType<import('../main/public.js').SvelteComponent<Props, Events, Slots> & Exports>}
+ * @param {import('svelte').SvelteComponent<Props, Events, Slots>} component
+ * @returns {import('svelte').ComponentType<import('svelte').SvelteComponent<Props, Events, Slots> & Exports>}
  */
 export function asClassComponent(component) {
 	// @ts-expect-error $$prop_def etc are not actually defined
@@ -58,7 +58,7 @@ class Svelte4Component {
 	#instance;
 
 	/**
-	 * @param {import('../main/public.js').ComponentConstructorOptions & {
+	 * @param {import('svelte').ComponentConstructorOptions & {
 	 *  component: any;
 	 * 	immutable?: boolean;
 	 * 	hydrate?: boolean;
diff --git a/packages/svelte/tests/types/component.ts b/packages/svelte/tests/types/component.ts
index e2fc094bab..8ef5274016 100644
--- a/packages/svelte/tests/types/component.ts
+++ b/packages/svelte/tests/types/component.ts
@@ -170,5 +170,5 @@ asLegacyComponent.anExport;
 const x: typeof asLegacyComponent = createClassComponent({
 	target: null as any,
 	hydrate: true,
-	component: newComponent
+	component: NewComponent
 });
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 567f0b0dcf..f3325cfad0 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1728,184 +1728,19 @@ declare module 'svelte/legacy' {
 	 * @deprecated Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
 	 *
 	 * */
-	export function createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {
-		component: SvelteComponent<Props, Events, Slots>;
+	export function createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: import("svelte").ComponentConstructorOptions<Props> & {
+		component: import("svelte").ComponentType<import("svelte").SvelteComponent<Props, Events, Slots>>;
 		immutable?: boolean | undefined;
 		hydrate?: boolean | undefined;
 		recover?: boolean | undefined;
-	}): SvelteComponent<Props, Events, Slots> & Exports;
+	}): import("svelte").SvelteComponent<Props, Events, Slots> & Exports;
 	/**
 	 * Takes the component function and returns a Svelte 4 compatible component constructor.
 	 *
 	 * @deprecated Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
 	 *
 	 * */
-	export function asClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(component: SvelteComponent<Props, Events, Slots>): ComponentType<SvelteComponent<Props, Events, Slots> & Exports>;
-	// This should contain all the public interfaces (not all of them are actually importable, check current Svelte for which ones are).
-
-	/**
-	 * @deprecated Svelte components were classes in Svelte 4. In Svelte 5, thy are not anymore.
-	 * Use `mount` or `createRoot` instead to instantiate components.
-	 * See [breaking changes](https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes)
-	 * for more info.
-	 */
-	interface ComponentConstructorOptions<
-		Props extends Record<string, any> = Record<string, any>
-	> {
-		target: Element | Document | ShadowRoot;
-		anchor?: Element;
-		props?: Props;
-		context?: Map<any, any>;
-		hydrate?: boolean;
-		intro?: boolean;
-		$$inline?: boolean;
-	}
-
-	// Utility type for ensuring backwards compatibility on a type level: If there's a default slot, add 'children' to the props if it doesn't exist there already
-	type PropsWithChildren<Props, Slots> = Props &
-		(Props extends { children?: any }
-			? {}
-			: Slots extends { default: any }
-				? { children?: Snippet }
-				: {});
-
-	/**
-	 * Can be used to create strongly typed Svelte components.
-	 *
-	 * #### Example:
-	 *
-	 * You have component library on npm called `component-library`, from which
-	 * you export a component called `MyComponent`. For Svelte+TypeScript users,
-	 * you want to provide typings. Therefore you create a `index.d.ts`:
-	 * ```ts
-	 * import { SvelteComponent } from "svelte";
-	 * export class MyComponent extends SvelteComponent<{foo: string}> {}
-	 * ```
-	 * Typing this makes it possible for IDEs like VS Code with the Svelte extension
-	 * to provide intellisense and to use the component like this in a Svelte file
-	 * with TypeScript:
-	 * ```svelte
-	 * <script lang="ts">
-	 * 	import { MyComponent } from "component-library";
-	 * </script>
-	 * <MyComponent foo={'bar'} />
-	 * ```
-	 *
-	 * This was the base class for Svelte components in Svelte 4. Svelte 5+ components
-	 * are completely different under the hood. You should only use this type for typing,
-	 * not actually instantiate components with `new` - use `mount` or `createRoot` instead.
-	 * See [breaking changes](https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes)
-	 * for more info.
-	 */
-	class SvelteComponent<
-		Props extends Record<string, any> = any,
-		Events extends Record<string, any> = any,
-		Slots extends Record<string, any> = any
-	> {
-		[prop: string]: any;
-		/**
-		 * @deprecated This constructor only exists when using the `asClassComponent` compatibility helper, which
-		 * is a stop-gap solution. Migrate towards using `mount` or `createRoot` instead. See
-		 * https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more info.
-		 */
-		constructor(options: ComponentConstructorOptions<PropsWithChildren<Props, Slots>>);
-		/**
-		 * For type checking capabilities only.
-		 * Does not exist at runtime.
-		 * ### DO NOT USE!
-		 * */
-		$$prop_def: PropsWithChildren<Props, Slots>;
-		/**
-		 * For type checking capabilities only.
-		 * Does not exist at runtime.
-		 * ### DO NOT USE!
-		 *
-		 * */
-		$$events_def: Events;
-		/**
-		 * For type checking capabilities only.
-		 * Does not exist at runtime.
-		 * ### DO NOT USE!
-		 *
-		 * */
-		$$slot_def: Slots;
-
-		/**
-		 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-		 * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
-		 * for more info.
-		 */
-		$destroy(): void;
-
-		/**
-		 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-		 * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
-		 * for more info.
-		 */
-		$on<K extends Extract<keyof Events, string>>(
-			type: K,
-			callback: (e: Events[K]) => void
-		): () => void;
-
-		/**
-		 * @deprecated This method only exists when using one of the legacy compatibility helpers, which
-		 * is a stop-gap solution. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes
-		 * for more info.
-		 */
-		$set(props: Partial<Props>): void;
-	}
-
-	/**
-	 * Convenience type to get the type of a Svelte component. Useful for example in combination with
-	 * dynamic components using `<svelte:component>`.
-	 *
-	 * Example:
-	 * ```html
-	 * <script lang="ts">
-	 * 	import type { ComponentType, SvelteComponent } from 'svelte';
-	 * 	import Component1 from './Component1.svelte';
-	 * 	import Component2 from './Component2.svelte';
-	 *
-	 * 	const component: ComponentType = someLogic() ? Component1 : Component2;
-	 * 	const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
-	 * </script>
-	 *
-	 * <svelte:component this={component} />
-	 * <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />
-	 * ```
-	 */
-	type ComponentType<Comp extends SvelteComponent = SvelteComponent> = (new (
-		options: ComponentConstructorOptions<
-			Comp extends SvelteComponent<infer Props> ? Props : Record<string, any>
-		>
-	) => Comp) & {
-		/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
-		element?: typeof HTMLElement;
-	};
-
-	const SnippetReturn: unique symbol;
-
-	/**
-	 * The type of a `#snippet` block. You can use it to (for example) express that your component expects a snippet of a certain type:
-	 * ```ts
-	 * let { banner }: { banner: Snippet<{ text: string }> } = $props();
-	 * ```
-	 * You can only call a snippet through the `{@render ...}` tag.
-	 */
-	type Snippet<T extends unknown[] = []> =
-		// this conditional allows tuples but not arrays. Arrays would indicate a
-		// rest parameter type, which is not supported. If rest parameters are added
-		// in the future, the condition can be removed.
-		number extends T['length']
-			? never
-			: {
-					(
-						this: void,
-						...args: T
-					): typeof SnippetReturn & {
-						_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
-					};
-				};
+	export function asClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(component: import("svelte").SvelteComponent<Props, Events, Slots>): import("svelte").ComponentType<import("svelte").SvelteComponent<Props, Events, Slots> & Exports>;
 }
 
 declare module 'svelte/motion' {

From fe3b3b463c2f9e290fc9d35b3b5983211f843546 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 14 Mar 2024 19:22:16 +0000
Subject: [PATCH 02/26] feat: adds reactive Map class to svelte/reactivity
 (#10803)

* feat: adds reactive Map class to svelte/reactivity

* add docs

* add docs

* add test case

* types

* make reactive set better

* address feedback

* fix typo

* more efficient initialisation

* this is incorrect, it would fail if given a map for example

* increase consistency (with e.g. proxy.js)

* tidy up

* Revert "more efficient initialisation"

This reverts commit 29d4a8078b790f814d1884063b3536117b971fac.

* efficient initialization, without bugs this time

* convention

* delete make_iterable

* update changeset

* efficient initialization

* avoid generator functions

* Update sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
---
 .changeset/fuzzy-bags-camp.md                 |   5 +
 packages/svelte/src/internal/client/proxy.js  |   1 -
 packages/svelte/src/reactivity/index.js       |   1 +
 packages/svelte/src/reactivity/map.js         | 157 ++++++++++++++++++
 packages/svelte/src/reactivity/map.test.ts    | 151 +++++++++++++++++
 packages/svelte/src/reactivity/set.js         | 105 +++++-------
 packages/svelte/src/reactivity/utils.js       |  24 +++
 .../samples/reactive-map/_config.js           |  50 ++++++
 .../samples/reactive-map/main.svelte          |  21 +++
 .../routes/docs/content/01-api/02-runes.md    |  19 +++
 10 files changed, 466 insertions(+), 68 deletions(-)
 create mode 100644 .changeset/fuzzy-bags-camp.md
 create mode 100644 packages/svelte/src/reactivity/map.js
 create mode 100644 packages/svelte/src/reactivity/map.test.ts
 create mode 100644 packages/svelte/src/reactivity/utils.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/reactive-map/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/reactive-map/main.svelte

diff --git a/.changeset/fuzzy-bags-camp.md b/.changeset/fuzzy-bags-camp.md
new file mode 100644
index 0000000000..eafc09cf27
--- /dev/null
+++ b/.changeset/fuzzy-bags-camp.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: add reactive Map class to svelte/reactivity
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index 801cd5c15e..198e16f939 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -48,7 +48,6 @@ export function proxy(value, immutable = true, owners) {
 
 		const prototype = get_prototype_of(value);
 
-		// TODO handle Map and Set as well
 		if (prototype === object_prototype || prototype === array_prototype) {
 			const proxy = new Proxy(value, state_proxy_handler);
 
diff --git a/packages/svelte/src/reactivity/index.js b/packages/svelte/src/reactivity/index.js
index 67c4279fce..38c7d91885 100644
--- a/packages/svelte/src/reactivity/index.js
+++ b/packages/svelte/src/reactivity/index.js
@@ -1,2 +1,3 @@
 export { ReactiveDate as Date } from './date.js';
 export { ReactiveSet as Set } from './set.js';
+export { ReactiveMap as Map } from './map.js';
diff --git a/packages/svelte/src/reactivity/map.js b/packages/svelte/src/reactivity/map.js
new file mode 100644
index 0000000000..f57f52e7b7
--- /dev/null
+++ b/packages/svelte/src/reactivity/map.js
@@ -0,0 +1,157 @@
+import { DEV } from 'esm-env';
+import { source, set } from '../internal/client/reactivity/sources.js';
+import { get } from '../internal/client/runtime.js';
+import { UNINITIALIZED } from '../internal/client/constants.js';
+import { map } from './utils.js';
+
+/**
+ * @template K
+ * @template V
+ */
+export class ReactiveMap extends Map {
+	/** @type {Map<K, import('#client').Source<V>>} */
+	#sources = new Map();
+	#version = source(0);
+	#size = source(0);
+
+	/**
+	 * @param {Iterable<readonly [K, V]> | null | undefined} [value]
+	 */
+	constructor(value) {
+		super();
+
+		// If the value is invalid then the native exception will fire here
+		if (DEV) new Map(value);
+
+		if (value) {
+			var sources = this.#sources;
+
+			for (var [key, v] of value) {
+				sources.set(key, source(v));
+				super.set(key, v);
+			}
+
+			this.#size.v = sources.size;
+		}
+	}
+
+	#increment_version() {
+		set(this.#version, this.#version.v + 1);
+	}
+
+	/** @param {K} key */
+	has(key) {
+		var s = this.#sources.get(key);
+
+		if (s === undefined) {
+			// 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) {
+		get(this.#version);
+
+		return super.forEach(callbackfn, this_arg);
+	}
+
+	/** @param {K} key */
+	get(key) {
+		var s = this.#sources.get(key);
+
+		if (s === undefined) {
+			// We should always track the version in case
+			// the Set ever gets this value in the future.
+			get(this.#version);
+
+			return undefined;
+		}
+
+		return get(s);
+	}
+
+	/**
+	 * @param {K} key
+	 * @param {V} value
+	 * */
+	set(key, value) {
+		var sources = this.#sources;
+		var s = sources.get(key);
+
+		if (s === undefined) {
+			sources.set(key, source(value));
+			set(this.#size, sources.size);
+			this.#increment_version();
+		} else {
+			set(s, value);
+		}
+
+		return super.set(key, value);
+	}
+
+	/** @param {K} key */
+	delete(key) {
+		var sources = this.#sources;
+		var s = sources.get(key);
+
+		if (s !== undefined) {
+			sources.delete(key);
+			set(this.#size, sources.size);
+			set(s, /** @type {V} */ (UNINITIALIZED));
+			this.#increment_version();
+		}
+
+		return super.delete(key);
+	}
+
+	clear() {
+		var sources = this.#sources;
+
+		if (sources.size !== 0) {
+			set(this.#size, 0);
+			for (var s of sources.values()) {
+				set(s, /** @type {V} */ (UNINITIALIZED));
+			}
+			this.#increment_version();
+		}
+
+		sources.clear();
+		super.clear();
+	}
+
+	keys() {
+		get(this.#version);
+		return this.#sources.keys();
+	}
+
+	values() {
+		get(this.#version);
+		return map(this.#sources.values(), get);
+	}
+
+	entries() {
+		get(this.#version);
+		return map(
+			this.#sources.entries(),
+			([key, source]) => /** @type {[K, V]} */ ([key, get(source)])
+		);
+	}
+
+	[Symbol.iterator]() {
+		return this.entries();
+	}
+
+	get size() {
+		return get(this.#size);
+	}
+}
diff --git a/packages/svelte/src/reactivity/map.test.ts b/packages/svelte/src/reactivity/map.test.ts
new file mode 100644
index 0000000000..fbbb11e340
--- /dev/null
+++ b/packages/svelte/src/reactivity/map.test.ts
@@ -0,0 +1,151 @@
+import { pre_effect, user_root_effect } from '../internal/client/reactivity/effects.js';
+import { flushSync } from '../main/main-client.js';
+import { ReactiveMap } from './map.js';
+import { assert, test } from 'vitest';
+
+test('map.values()', () => {
+	const map = new ReactiveMap([
+		[1, 1],
+		[2, 2],
+		[3, 3],
+		[4, 4],
+		[5, 5]
+	]);
+
+	const log: any = [];
+
+	const cleanup = user_root_effect(() => {
+		pre_effect(() => {
+			log.push(map.size);
+		});
+
+		pre_effect(() => {
+			log.push(map.has(3));
+		});
+
+		pre_effect(() => {
+			log.push(Array.from(map.values()));
+		});
+	});
+
+	flushSync(() => {
+		map.delete(3);
+	});
+
+	flushSync(() => {
+		map.clear();
+	});
+
+	assert.deepEqual(log, [5, true, [1, 2, 3, 4, 5], 4, false, [1, 2, 4, 5], 0, [], false]); // TODO update when we fix effect ordering bug
+
+	cleanup();
+});
+
+test('map.get(...)', () => {
+	const map = new ReactiveMap([
+		[1, 1],
+		[2, 2],
+		[3, 3]
+	]);
+
+	const log: any = [];
+
+	const cleanup = user_root_effect(() => {
+		pre_effect(() => {
+			log.push('get 1', map.get(1));
+		});
+
+		pre_effect(() => {
+			log.push('get 2', map.get(2));
+		});
+
+		pre_effect(() => {
+			log.push('get 3', map.get(3));
+		});
+	});
+
+	flushSync(() => {
+		map.delete(2);
+	});
+
+	flushSync(() => {
+		map.set(2, 2);
+	});
+
+	assert.deepEqual(log, ['get 1', 1, 'get 2', 2, 'get 3', 3, 'get 2', undefined, 'get 2', 2]);
+
+	cleanup();
+});
+
+test('map.has(...)', () => {
+	const map = new ReactiveMap([
+		[1, 1],
+		[2, 2],
+		[3, 3]
+	]);
+
+	const log: any = [];
+
+	const cleanup = user_root_effect(() => {
+		pre_effect(() => {
+			log.push('has 1', map.has(1));
+		});
+
+		pre_effect(() => {
+			log.push('has 2', map.has(2));
+		});
+
+		pre_effect(() => {
+			log.push('has 3', map.has(3));
+		});
+	});
+
+	flushSync(() => {
+		map.delete(2);
+	});
+
+	flushSync(() => {
+		map.set(2, 2);
+	});
+
+	assert.deepEqual(log, [
+		'has 1',
+		true,
+		'has 2',
+		true,
+		'has 3',
+		true,
+		'has 2',
+		false,
+		'has 2',
+		true
+	]);
+
+	cleanup();
+});
+
+test('map handling of undefined values', () => {
+	const map = new ReactiveMap();
+
+	const log: any = [];
+
+	const cleanup = user_root_effect(() => {
+		map.set(1, undefined);
+
+		pre_effect(() => {
+			log.push(map.get(1));
+		});
+
+		flushSync(() => {
+			map.delete(1);
+		});
+
+		flushSync(() => {
+			map.set(1, 1);
+		});
+	});
+
+	assert.deepEqual(log, [undefined, undefined, 1]);
+
+	cleanup();
+});
diff --git a/packages/svelte/src/reactivity/set.js b/packages/svelte/src/reactivity/set.js
index 173c0095a0..ca969bea9c 100644
--- a/packages/svelte/src/reactivity/set.js
+++ b/packages/svelte/src/reactivity/set.js
@@ -1,33 +1,10 @@
 import { DEV } from 'esm-env';
 import { source, set } from '../internal/client/reactivity/sources.js';
 import { get } from '../internal/client/runtime.js';
+import { map } from './utils.js';
 
-var read = [
-	'difference',
-	'forEach',
-	'intersection',
-	'isDisjointFrom',
-	'isSubsetOf',
-	'isSupersetOf',
-	'symmetricDifference',
-	'union'
-];
-
-/**
- * @template T
- * @param {IterableIterator<T>} iterator
- */
-function make_iterable(iterator) {
-	iterator[Symbol.iterator] = get_self;
-	return iterator;
-}
-
-/**
- * @this {any}
- */
-function get_self() {
-	return this;
-}
+var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf'];
+var set_like_methods = ['difference', 'intersection', 'symmetricDifference', 'union'];
 
 var inited = false;
 
@@ -41,7 +18,7 @@ export class ReactiveSet extends Set {
 	#size = source(0);
 
 	/**
-	 * @param {Iterable<T> | null | undefined} value
+	 * @param {Iterable<T> | null | undefined} [value]
 	 */
 	constructor(value) {
 		super();
@@ -50,9 +27,14 @@ export class ReactiveSet extends Set {
 		if (DEV) new Set(value);
 
 		if (value) {
+			var sources = this.#sources;
+
 			for (var element of value) {
-				this.add(element);
+				sources.set(element, source(true));
+				super.add(element);
 			}
+
+			this.#size.v = sources.size;
 		}
 
 		if (!inited) this.#init();
@@ -65,7 +47,10 @@ export class ReactiveSet extends Set {
 		var proto = ReactiveSet.prototype;
 		var set_proto = Set.prototype;
 
-		for (var method of read) {
+		/** @type {string} */
+		var method;
+
+		for (method of read_methods) {
 			// @ts-ignore
 			proto[method] = function (...v) {
 				get(this.#version);
@@ -73,6 +58,17 @@ export class ReactiveSet extends Set {
 				return set_proto[method].apply(this, v);
 			};
 		}
+
+		for (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 ReactiveSet(set);
+			};
+		}
 	}
 
 	#increment_version() {
@@ -81,9 +77,9 @@ export class ReactiveSet extends Set {
 
 	/** @param {T} value */
 	has(value) {
-		var source = this.#sources.get(value);
+		var s = this.#sources.get(value);
 
-		if (source === undefined) {
+		if (s === undefined) {
 			// We should always track the version in case
 			// the Set ever gets this value in the future.
 			get(this.#version);
@@ -91,7 +87,7 @@ export class ReactiveSet extends Set {
 			return false;
 		}
 
-		return get(source);
+		return get(s);
 	}
 
 	/** @param {T} value */
@@ -110,12 +106,12 @@ export class ReactiveSet extends Set {
 	/** @param {T} value */
 	delete(value) {
 		var sources = this.#sources;
-		var source = sources.get(value);
+		var s = sources.get(value);
 
-		if (source !== undefined) {
+		if (s !== undefined) {
 			sources.delete(value);
 			set(this.#size, sources.size);
-			set(source, false);
+			set(s, false);
 			this.#increment_version();
 		}
 
@@ -127,8 +123,8 @@ export class ReactiveSet extends Set {
 
 		if (sources.size !== 0) {
 			set(this.#size, 0);
-			for (var source of sources.values()) {
-				set(source, false);
+			for (var s of sources.values()) {
+				set(s, false);
 			}
 			this.#increment_version();
 		}
@@ -138,45 +134,20 @@ export class ReactiveSet extends Set {
 	}
 
 	keys() {
-		return this.values();
+		get(this.#version);
+		return this.#sources.keys();
 	}
 
 	values() {
-		get(this.#version);
-
-		var iterator = this.#sources.keys();
-
-		return make_iterable(
-			/** @type {IterableIterator<T>} */ ({
-				next() {
-					for (var value of iterator) {
-						return { value, done: false };
-					}
-
-					return { done: true };
-				}
-			})
-		);
+		return this.keys();
 	}
 
 	entries() {
-		var iterator = this.values();
-
-		return make_iterable(
-			/** @type {IterableIterator<[T, T]>} */ ({
-				next() {
-					for (var value of iterator) {
-						return { value: [value, value], done: false };
-					}
-
-					return { done: true };
-				}
-			})
-		);
+		return map(this.keys(), (key) => /** @type {[T, T]} */ ([key, key]));
 	}
 
 	[Symbol.iterator]() {
-		return this.values();
+		return this.keys();
 	}
 
 	get size() {
diff --git a/packages/svelte/src/reactivity/utils.js b/packages/svelte/src/reactivity/utils.js
new file mode 100644
index 0000000000..6c5e573858
--- /dev/null
+++ b/packages/svelte/src/reactivity/utils.js
@@ -0,0 +1,24 @@
+/**
+ * @template T
+ * @template U
+ * @param {Iterable<T>} iterable
+ * @param {(value: T) => U} fn
+ * @returns {IterableIterator<U>}
+ */
+export function map(iterable, fn) {
+	return {
+		[Symbol.iterator]: get_this,
+		next() {
+			for (const value of iterable) {
+				return { done: false, value: fn(value) };
+			}
+
+			return { done: true, value: undefined };
+		}
+	};
+}
+
+/** @this {any} */
+function get_this() {
+	return this;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-map/_config.js b/packages/svelte/tests/runtime-runes/samples/reactive-map/_config.js
new file mode 100644
index 0000000000..45f72a95e2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/reactive-map/_config.js
@@ -0,0 +1,50 @@
+import { flushSync } from '../../../../src/main/main-client';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>add</button><button>delete</button><button>clear</button>`,
+
+	test({ assert, target }) {
+		const [btn, btn2, btn3] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add</button><button>delete</button><button>clear</button><div>1:1</div>`
+		);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add</button><button>delete</button><button>clear</button><div>1:1</div><div>2:2</div><div>3:3</div>`
+		);
+
+		flushSync(() => {
+			btn2?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add</button><button>delete</button><button>clear</button><div>1:1</div><div>2:2</div>`
+		);
+
+		flushSync(() => {
+			btn3?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add</button><button>delete</button><button>clear</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-map/main.svelte b/packages/svelte/tests/runtime-runes/samples/reactive-map/main.svelte
new file mode 100644
index 0000000000..703ef4cf99
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/reactive-map/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import {Map} from 'svelte/reactivity';
+
+	let state = new Map();
+</script>
+
+<button onclick={() => {
+	state.set(state.size + 1, state.size + 1);
+}}>add</button>
+
+<button onclick={() => {
+	state.delete(state.size);
+}}>delete</button>
+
+<button onclick={() => {
+	state.clear();
+}}>clear</button>
+
+{#each state as [key, value]}
+	<div>{key}:{value}</div>
+{/each}
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 7cb20245ff..94de0eaff0 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -93,6 +93,25 @@ This can improve performance with large arrays and objects that you weren't plan
 
 > Objects and arrays passed to `$state.frozen` will be shallowly frozen using `Object.freeze()`. If you don't want this, pass in a clone of the object or array instead.
 
+### Reactive Map, Set and Date
+
+Svelte provides reactive `Map`, `Set` and `Date` classes. These can be imported from `svelte/reactivity` and used just like their native counterparts.
+
+```svelte
+<script>
+	import { Map } from 'svelte/reactivity';
+
+	const map = new Map();
+	map.set('message', 'hello');
+
+	function update_message() {
+		map.set('message', 'goodbye');
+	}
+</script>
+
+<p>{map.get('message')}</p>
+```
+
 ## `$derived`
 
 Derived state is declared with the `$derived` rune:

From afc2eea382a009c690e1fc8d64b5a5ea4ad90803 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 14 Mar 2024 19:43:40 +0000
Subject: [PATCH 03/26] Version Packages (next) (#10806)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 1 +
 packages/svelte/CHANGELOG.md   | 6 ++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 186efbdf21..d6ed883ca0 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -98,6 +98,7 @@
     "friendly-candles-relate",
     "friendly-lies-camp",
     "funny-wombats-argue",
+    "fuzzy-bags-camp",
     "gentle-dolls-juggle",
     "gentle-sheep-hug",
     "gentle-spies-happen",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b9ab526514..3065736a23 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.0.0-next.79
+
+### Patch Changes
+
+- feat: add reactive Map class to svelte/reactivity ([#10803](https://github.com/sveltejs/svelte/pull/10803))
+
 ## 5.0.0-next.78
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index c26b6fc988..748b64ac6d 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.78",
+  "version": "5.0.0-next.79",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index be54549ae6..66e866b3b4 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.78';
+export const VERSION = '5.0.0-next.79';
 export const PUBLIC_VERSION = '5';

From 474fc7ebe0cfc475444c84a77f580a47afecb459 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Fri, 15 Mar 2024 17:17:14 +0000
Subject: [PATCH 04/26] fix: ensure arguments are supported on all reactive
 Date methods (#10813)

---
 .changeset/wise-dodos-tell.md          | 5 +++++
 packages/svelte/src/reactivity/date.js | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/wise-dodos-tell.md

diff --git a/.changeset/wise-dodos-tell.md b/.changeset/wise-dodos-tell.md
new file mode 100644
index 0000000000..55e477c9fc
--- /dev/null
+++ b/.changeset/wise-dodos-tell.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure arguments are supported on all reactive Date methods
diff --git a/packages/svelte/src/reactivity/date.js b/packages/svelte/src/reactivity/date.js
index eb1e72fcc9..8f55cf0ef8 100644
--- a/packages/svelte/src/reactivity/date.js
+++ b/packages/svelte/src/reactivity/date.js
@@ -68,16 +68,16 @@ export class ReactiveDate extends Date {
 
 			for (const method of read) {
 				// @ts-ignore
-				proto[method] = function () {
+				proto[method] = function (...args) {
 					get(this.#raw_time);
 					// @ts-ignore
-					return date_proto[method].call(this);
+					return date_proto[method].apply(this, args);
 				};
 			}
 
 			for (const method of write) {
 				// @ts-ignore
-				proto[method] = function (/** @type {any} */ ...args) {
+				proto[method] = function (...args) {
 					// @ts-ignore
 					const v = date_proto[method].apply(this, args);
 					const time = date_proto.getTime.call(this);

From d921fb97bd199eed8370f44eff7e3e8756fb3419 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Fri, 15 Mar 2024 16:42:24 -0400
Subject: [PATCH 05/26] fix: add types for svelte/reactivity (#10817)

* fix: add types for svelte/reactivity - closes #10816

* simplify

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/serious-needles-joke.md        |  5 +++
 packages/svelte/scripts/generate-types.js |  1 +
 packages/svelte/src/reactivity/date.js    |  7 ++--
 packages/svelte/types/index.d.ts          | 42 +++++++++++++++++++++++
 4 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/serious-needles-joke.md

diff --git a/.changeset/serious-needles-joke.md b/.changeset/serious-needles-joke.md
new file mode 100644
index 0000000000..1091bcf329
--- /dev/null
+++ b/.changeset/serious-needles-joke.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add types for svelte/reactivity
diff --git a/packages/svelte/scripts/generate-types.js b/packages/svelte/scripts/generate-types.js
index 5c0b042cf6..703180a143 100644
--- a/packages/svelte/scripts/generate-types.js
+++ b/packages/svelte/scripts/generate-types.js
@@ -29,6 +29,7 @@ await createBundle({
 		[`${pkg.name}/easing`]: `${dir}/src/easing/index.js`,
 		[`${pkg.name}/legacy`]: `${dir}/src/legacy/legacy-client.js`,
 		[`${pkg.name}/motion`]: `${dir}/src/motion/public.d.ts`,
+		[`${pkg.name}/reactivity`]: `${dir}/src/reactivity/index.js`,
 		[`${pkg.name}/server`]: `${dir}/src/server/index.js`,
 		[`${pkg.name}/store`]: `${dir}/src/store/public.d.ts`,
 		[`${pkg.name}/transition`]: `${dir}/src/transition/public.d.ts`,
diff --git a/packages/svelte/src/reactivity/date.js b/packages/svelte/src/reactivity/date.js
index 8f55cf0ef8..cf43dfe4ab 100644
--- a/packages/svelte/src/reactivity/date.js
+++ b/packages/svelte/src/reactivity/date.js
@@ -55,14 +55,15 @@ const write = [
 	'setYear'
 ];
 
+var inited = false;
+
 export class ReactiveDate extends Date {
 	#raw_time = source(super.getTime());
-	static #inited = false;
 
 	// We init as part of the first instance so that we can treeshake this class
 	#init() {
-		if (!ReactiveDate.#inited) {
-			ReactiveDate.#inited = true;
+		if (!inited) {
+			inited = true;
 			const proto = ReactiveDate.prototype;
 			const date_proto = Date.prototype;
 
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index f3325cfad0..c2b1c1ad5b 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1806,6 +1806,48 @@ declare module 'svelte/motion' {
 	export function tweened<T>(value?: T | undefined, defaults?: TweenedOptions<T> | undefined): Tweened<T>;
 }
 
+declare module 'svelte/reactivity' {
+	export class Date extends Date {
+		
+		constructor(...values: any[]);
+		#private;
+	}
+	export class Set<T> extends Set<any> {
+		
+		constructor(value?: Iterable<T> | null | undefined);
+		
+		has(value: T): boolean;
+		
+		add(value: T): this;
+		
+		delete(value: T): boolean;
+		keys(): IterableIterator<T>;
+		values(): IterableIterator<T>;
+		entries(): IterableIterator<[T, T]>;
+		[Symbol.iterator](): IterableIterator<T>;
+		#private;
+	}
+	export class Map<K, V> extends Map<any, any> {
+		
+		constructor(value?: Iterable<readonly [K, V]> | null | undefined);
+		
+		has(key: K): boolean;
+		
+		forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void, this_arg?: any): void;
+		
+		get(key: K): V | undefined;
+		
+		set(key: K, value: V): this;
+		
+		delete(key: K): boolean;
+		keys(): IterableIterator<K>;
+		values(): IterableIterator<V>;
+		entries(): IterableIterator<[K, V]>;
+		[Symbol.iterator](): IterableIterator<[K, V]>;
+		#private;
+	}
+}
+
 declare module 'svelte/server' {
 	export function render(component: (...args: any[]) => void, options: {
 		props: Record<string, any>;

From 1bfafe935b3b5868ad85381133949a11ceebd76b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 15 Mar 2024 21:30:08 +0000
Subject: [PATCH 06/26] Version Packages (next) (#10814)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index d6ed883ca0..35159be8ee 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -235,6 +235,7 @@
     "selfish-dragons-knock",
     "selfish-tools-hide",
     "serious-kids-deliver",
+    "serious-needles-joke",
     "serious-socks-cover",
     "serious-zebras-scream",
     "seven-deers-jam",
@@ -345,6 +346,7 @@
     "wild-foxes-wonder",
     "wise-apples-care",
     "wise-dancers-hang",
+    "wise-dodos-tell",
     "wise-donkeys-marry",
     "wise-jobs-admire",
     "wise-radios-exercise",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 3065736a23..051d4cd970 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.80
+
+### Patch Changes
+
+- fix: add types for svelte/reactivity ([#10817](https://github.com/sveltejs/svelte/pull/10817))
+
+- fix: ensure arguments are supported on all reactive Date methods ([#10813](https://github.com/sveltejs/svelte/pull/10813))
+
 ## 5.0.0-next.79
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 748b64ac6d..befcdd03ae 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.79",
+  "version": "5.0.0-next.80",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 66e866b3b4..cdd49a7d21 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.79';
+export const VERSION = '5.0.0-next.80';
 export const PUBLIC_VERSION = '5';

From 9ff8029fb22275da74fe55a43f617b6e37a9371a Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 16 Mar 2024 14:47:43 -0400
Subject: [PATCH 07/26] docs: replace out-of-date info (#10822)

---
 .../src/routes/docs/content/03-appendix/01-faq.md  | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/01-faq.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/01-faq.md
index d8d85ba86b..49239beb9d 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/01-faq.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/01-faq.md
@@ -103,7 +103,17 @@ No. You can do the migration towards runes incrementally when Svelte 5 comes out
 
 ### When can I `npm install` the Svelte 5 preview?
 
-We plan to publish a pre-release version with enough time for brave souls to try it out in their apps and give us feedback on what breaks. Watch this space.
+Right now!
+
+```bash
+npm install svelte@next
+```
+
+You can also opt into Svelte 5 when creating a new SvelteKit project:
+
+```bash
+npm create svelte@latest
+```
 
 ### What's left to do?
 
@@ -119,7 +129,7 @@ We know that some of you are very keen on certain feature ideas, and we are too.
 
 ### I want to help. How do I contribute?
 
-We appreciate your enthusiasm! Right now it's not possible to accept contributions, but once we enter public beta, everything will be available on the Svelte GitHub repository.
+We appreciate your enthusiasm! We welcome issues on the [sveltejs/svelte](https://github.com/sveltejs/svelte) repo. Pull requests are a little dicier right now since many things are in flux, so we recommended starting with an issue.
 
 ### How can I share feedback or cool examples of what this enables?
 

From f8c85d525d313e7de074fd272b80e67b3894ba75 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 18 Mar 2024 11:19:53 +0100
Subject: [PATCH 08/26] fix: ensure capture events don't call delegated events
 (#10831)

fixes #10821
---
 .changeset/ten-eels-move.md                      |  5 +++++
 .../src/internal/client/dom/elements/events.js   |  5 ++++-
 .../event-attribute-delegation-7/_config.js      | 16 ++++++++++++++++
 .../samples/event-attribute-delegation-7/log.js  |  2 ++
 .../event-attribute-delegation-7/main.svelte     |  7 +++++++
 5 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/ten-eels-move.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/log.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/main.svelte

diff --git a/.changeset/ten-eels-move.md b/.changeset/ten-eels-move.md
new file mode 100644
index 0000000000..dfada3b8b2
--- /dev/null
+++ b/.changeset/ten-eels-move.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure capture events don't call delegated events
diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index bd5a77dffb..330bcc2661 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -17,7 +17,10 @@ export function event(event_name, dom, handler, capture, passive) {
 	 * @this {EventTarget}
 	 */
 	function target_handler(/** @type {Event} */ event) {
-		handle_event_propagation(dom, event);
+		if (!capture) {
+			// Only call in the bubble phase, else delegated events would be called before the capturing events
+			handle_event_propagation(dom, event);
+		}
 		if (!event.cancelBubble) {
 			return handler.call(this, event);
 		}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/_config.js
new file mode 100644
index 0000000000..69f1788171
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+import { log } from './log.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		await Promise.resolve();
+		assert.deepEqual(log, ['div onclickcapture', 'button onclick']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/log.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/log.js
new file mode 100644
index 0000000000..d3df521f4d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/log.js
@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/main.svelte
new file mode 100644
index 0000000000..b79cc9008f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { log } from "./log";
+</script>
+
+<div onclickcapture={() => log.push('div onclickcapture')}>
+	<button onclick={() => log.push('button onclick')}>main</button>
+</div>

From 1fc41730a1417aef3ef70bdfaaa851c7fa75dfa5 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 18 Mar 2024 12:19:49 +0100
Subject: [PATCH 09/26] fix: don't override instance methods during legacy
 class creation (#10834)

fixes #10805
---
 .changeset/dull-pots-add.md                 | 5 +++++
 packages/svelte/src/legacy/legacy-client.js | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/dull-pots-add.md

diff --git a/.changeset/dull-pots-add.md b/.changeset/dull-pots-add.md
new file mode 100644
index 0000000000..c993f2532b
--- /dev/null
+++ b/.changeset/dull-pots-add.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: don't override instance methods during legacy class creation
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index 12c6c61b39..775a9e1517 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -79,6 +79,7 @@ class Svelte4Component {
 		});
 
 		for (const key of Object.keys(this.#instance)) {
+			if (key === '$set' || key === '$destroy' || key === '$on') continue;
 			define_property(this, key, {
 				get() {
 					return this.#instance[key];

From 117082b0395f7b066b7396a04a3201e50638c667 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 19 Mar 2024 16:28:22 +0000
Subject: [PATCH 10/26] fix: improve handling of unowned derived signals
 (#10842)

---
 .changeset/olive-mice-fix.md                  |  5 ++
 .../internal/client/reactivity/deriveds.js    |  2 +-
 .../samples/derived-unowned-3/_config.js      | 30 ++++++++++++
 .../samples/derived-unowned-3/main.svelte     | 49 +++++++++++++++++++
 4 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/olive-mice-fix.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-unowned-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-unowned-3/main.svelte

diff --git a/.changeset/olive-mice-fix.md b/.changeset/olive-mice-fix.md
new file mode 100644
index 0000000000..b3548bd11f
--- /dev/null
+++ b/.changeset/olive-mice-fix.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve handling of unowned derived signals
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index 24806084ae..b258e486ba 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -41,7 +41,7 @@ export function derived(fn) {
 		/** @type {import('#client').DerivedDebug} */ (signal).inspect = new Set();
 	}
 
-	if (current_reaction !== null) {
+	if (current_reaction !== null && (current_reaction.f & DERIVED) !== 0) {
 		if (current_reaction.deriveds === null) {
 			current_reaction.deriveds = [signal];
 		} else {
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-3/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-unowned-3/_config.js
new file mode 100644
index 0000000000..3c1f70999f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-3/_config.js
@@ -0,0 +1,30 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		let [btn1, btn2] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		flushSync(() => {
+			btn2.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Activate</button><button>Toggle</button>\nneighba\nneighba`
+		);
+
+		flushSync(() => {
+			btn2.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Activate</button><button>Toggle</button>\nzeeba\nzeeba`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-unowned-3/main.svelte
new file mode 100644
index 0000000000..7c32ed0513
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-3/main.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { untrack } from 'svelte';
+
+  class Model {
+    data = $state();
+
+    constructor(data) {
+      this.data = data;
+    }
+
+    name = $derived(this.data?.name);
+    source = $derived(this.data?.source);
+
+    toggle() {
+      this.data.name = this.data.name === 'zeeba' ? 'neighba' : 'zeeba';
+    }
+  }
+
+	let model = $state(new Model({ name: 'zeeba', source: 'initial' }));
+
+  let setModel = (source) => {
+		let next = new Model({ name: 'zeeba', source });
+		model = next;
+  }
+
+  let needsSet = $state(false);
+
+  $effect(() => {
+    if(needsSet) {
+      setModel('effect');
+      untrack(() => {
+        needsSet = false;
+      });
+    }
+  });
+
+  let setWithEffect = () => {
+    needsSet = true;
+  };
+
+  let toggle = () => {
+    model.toggle();
+  }
+</script>
+
+<button onclick={setWithEffect}>Activate</button>
+<button onclick={toggle}>Toggle</button>
+{model.name}
+{model.data.name}

From 682f4a651351d4c0c492be1806bfb119b6bb76a7 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 19 Mar 2024 19:25:40 +0100
Subject: [PATCH 11/26] fix: adjust scope parent for named slots (#10843)

fixes #10802
---
 .changeset/mighty-cooks-scream.md                    |  5 +++++
 packages/svelte/src/compiler/phases/scope.js         |  6 +++---
 .../samples/component-slot-let-scope-4/Nested.svelte |  1 +
 .../component-slot-let-scope-4/Nested2.svelte        |  9 +++++++++
 .../samples/component-slot-let-scope-4/_config.js    |  7 +++++++
 .../samples/component-slot-let-scope-4/main.svelte   | 12 ++++++++++++
 6 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/mighty-cooks-scream.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/Nested.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/Nested2.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/main.svelte

diff --git a/.changeset/mighty-cooks-scream.md b/.changeset/mighty-cooks-scream.md
new file mode 100644
index 0000000000..3d3e662fce
--- /dev/null
+++ b/.changeset/mighty-cooks-scream.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: adjust scope parent for named slots
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index cecd52bda8..9b0d3e7dcb 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -400,9 +400,9 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 						(attribute) => attribute.type === 'Attribute' && attribute.name === 'slot'
 					)
 				) {
-					// <div slot="..."> inherits the scope above the component, because slots are hella weird
-					scopes.set(child, state.scope);
-					visit(child);
+					// <div slot="..."> inherits the scope above the component unless the component is a named slot itself, because slots are hella weird
+					scopes.set(child, is_default_slot ? state.scope : scope);
+					visit(child, { scope: is_default_slot ? state.scope : scope });
 				} else {
 					if (child.type === 'ExpressionTag') {
 						// expression tag is a special case — we don't visit it directly, but via process_children,
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/Nested.svelte
new file mode 100644
index 0000000000..5811f40c6a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/Nested.svelte
@@ -0,0 +1 @@
+<slot name="inner" text="hello world" />
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/Nested2.svelte b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/Nested2.svelte
new file mode 100644
index 0000000000..f4575dc01c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/Nested2.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let text;
+</script>
+
+<div>
+	{text}
+	<hr />
+	<slot name="footer" />
+</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/_config.js b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/_config.js
new file mode 100644
index 0000000000..18dd268ada
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+	<div>hello world <hr> <div slot="footer">hello world</div></div>
+	`
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/main.svelte b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/main.svelte
new file mode 100644
index 0000000000..12d231dbbe
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-scope-4/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Nested from "./Nested.svelte"
+	import Nested2 from "./Nested2.svelte"
+</script>
+
+<Nested>
+	<Nested2 slot="inner" let:text {text}>
+		<div slot="footer">
+			{text}
+		</div>
+	</Nested2>
+</Nested>
\ No newline at end of file

From c564c771992708060b0b03715e42246407f916b7 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 19 Mar 2024 21:33:32 +0000
Subject: [PATCH 12/26] fix: ensure select value is updated upon select element
 removal (#10846)

* fix: ensure select value is updated upon select element removal

* lint

* lol
---
 .changeset/smart-turkeys-tell.md              |  5 +++
 .../client/dom/elements/bindings/select.js    | 22 ++++++++++++
 .../binding-select-unmatched-3/_config.js     | 34 +++++++++++++++++++
 .../binding-select-unmatched-3/main.svelte    | 12 +++++++
 4 files changed, 73 insertions(+)
 create mode 100644 .changeset/smart-turkeys-tell.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/main.svelte

diff --git a/.changeset/smart-turkeys-tell.md b/.changeset/smart-turkeys-tell.md
new file mode 100644
index 0000000000..b4598ca14b
--- /dev/null
+++ b/.changeset/smart-turkeys-tell.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure select value is updated upon select element removal
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
index 5e6241f8cd..8c0f535cd1 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -91,6 +91,28 @@ export function bind_select_value(select, get_value, update) {
 		select.__value = value;
 		mounting = false;
 	});
+
+	// If one of the options gets removed from the DOM, the value might have changed
+	effect(() => {
+		var observer = new MutationObserver(() => {
+			// @ts-ignore
+			var value = select.__value;
+			select_option(select, value, mounting);
+			/** @type {HTMLOptionElement | null} */
+			var selected_option = select.querySelector(':checked');
+			if (selected_option === null || get_option_value(selected_option) !== value) {
+				update('');
+			}
+		});
+
+		observer.observe(select, {
+			childList: true
+		});
+
+		return () => {
+			observer.disconnect();
+		};
+	});
 }
 
 /**
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js
new file mode 100644
index 0000000000..7c73cec9a2
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js
@@ -0,0 +1,34 @@
+import { ok, test } from '../../test';
+
+// test select binding behavior when a selected option is removed
+export default test({
+	skip_if_ssr: 'permanent',
+
+	html: `<p>selected: a</p><select><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>`,
+
+	async test({ assert, component, target }) {
+		const select = target.querySelector('select');
+		ok(select);
+		const options = target.querySelectorAll('option');
+
+		// first option should be selected by default since no value was bound
+		assert.equal(component.selected, 'a');
+		assert.equal(select.value, 'a');
+		assert.ok(options[0].selected);
+
+		// remove the selected item, so the bound value no longer matches anything
+		component.items = ['b', 'c'];
+
+		// There's a MutationObserver
+		await Promise.resolve();
+
+		// now no option should be selected
+		assert.equal(select.value, '');
+		assert.equal(select.selectedIndex, -1);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<p>selected:</p><select><option value="b">b</option><option value="c">c</option></select>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/main.svelte
new file mode 100644
index 0000000000..9cc18fa83b
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let selected;
+	export let items = ['a', 'b', 'c'];
+</script>
+
+<p>selected: {selected}</p>
+
+<select bind:value={selected}>
+	{#each items as letter}
+		<option>{letter}</option>
+	{/each}
+</select>

From f5f9465edccb6c498964eb9f9b29f2914ef6713d Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 19 Mar 2024 22:23:09 +0000
Subject: [PATCH 13/26] feat: add support for webkitdirectory DOM boolean
 attribute (#10847)

* feat: add support for webkitdirectory DOM boolean attribute

* add to types

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/beige-cobras-smoke.md | 5 +++++
 packages/svelte/elements.d.ts    | 1 +
 packages/svelte/src/constants.js | 3 ++-
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/beige-cobras-smoke.md

diff --git a/.changeset/beige-cobras-smoke.md b/.changeset/beige-cobras-smoke.md
new file mode 100644
index 0000000000..c3ec1ac04a
--- /dev/null
+++ b/.changeset/beige-cobras-smoke.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: add support for webkitdirectory DOM boolean attribute
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 2dff32045d..6883aa0205 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -1056,6 +1056,7 @@ export interface HTMLInputAttributes extends HTMLAttributes<HTMLInputElement> {
 	type?: HTMLInputTypeAttribute | undefined | null;
 	value?: any;
 	width?: number | string | undefined | null;
+	webkitdirectory?: boolean | undefined | null;
 
 	'on:change'?: ChangeEventHandler<HTMLInputElement> | undefined | null;
 	onchange?: ChangeEventHandler<HTMLInputElement> | undefined | null;
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 7996e3b2fa..1e7279c885 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -83,7 +83,8 @@ export const DOMBooleanAttributes = [
 	'required',
 	'reversed',
 	'seamless',
-	'selected'
+	'selected',
+	'webkitdirectory'
 ];
 
 export const namespace_svg = 'http://www.w3.org/2000/svg';

From efe85fcce0c1066a03f69e64799ce514cd638839 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:15:19 +0000
Subject: [PATCH 14/26] fix: more robust select element logic (#10848)

* follow up to 10846

* lint

* simplify

* don't update value

* rework logic, rely more on mutation observer, fix bug related to select multiple

* fix lazy select options bug


---------

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: brunnerh <brunnerh@users.noreply.github.com>
---
 .changeset/smart-turkeys-tell.md              |   2 +-
 .../3-transform/client/visitors/template.js   | 204 +++++++++---------
 .../client/dom/elements/bindings/select.js    |  74 +++----
 .../samples/binding-select-late-2/_config.js  |   4 +-
 .../samples/binding-select-late-3/_config.js  |   4 +-
 .../binding-select-unmatched-3/_config.js     |   3 +-
 .../samples/select-lazy-options/_config.js    |  16 ++
 .../samples/select-lazy-options/main.svelte   |  33 +++
 .../_config.js                                |  21 ++
 .../main.svelte                               |   9 +
 10 files changed, 228 insertions(+), 142 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/select-lazy-options/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/select-lazy-options/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/select-one-way-bind-object-multiple/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/select-one-way-bind-object-multiple/main.svelte

diff --git a/.changeset/smart-turkeys-tell.md b/.changeset/smart-turkeys-tell.md
index b4598ca14b..e864cd19df 100644
--- a/.changeset/smart-turkeys-tell.md
+++ b/.changeset/smart-turkeys-tell.md
@@ -2,4 +2,4 @@
 "svelte": patch
 ---
 
-fix: ensure select value is updated upon select element removal
+fix: ensure select value is updated upon select option removal
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index e5302a3a7c..0d6f13aa18 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -158,26 +158,6 @@ function serialize_class_directives(class_directives, element_id, context, is_at
 	}
 }
 
-/**
- *
- * @param {string | null} spread_id
- * @param {import('#compiler').RegularElement} node
- * @param {import('../types.js').ComponentContext} context
- * @param {import('estree').Identifier} node_id
- */
-function add_select_to_spread_update(spread_id, node, context, node_id) {
-	if (spread_id !== null && node.name === 'select') {
-		context.state.update.push({
-			grouped: b.if(
-				b.binary('in', b.literal('value'), b.id(spread_id)),
-				b.block([
-					b.stmt(b.call('$.select_option', node_id, b.member(b.id(spread_id), b.id('value'))))
-				])
-			)
-		});
-	}
-}
-
 /**
  * @param {import('#compiler').Binding[]} references
  * @param {import('../types.js').ComponentContext} context
@@ -223,6 +203,8 @@ function collect_transitive_dependencies(binding, seen = new Set()) {
  * @param {import('../types.js').ComponentContext} context
  */
 function setup_select_synchronization(value_binding, context) {
+	if (context.state.analysis.runes) return;
+
 	let bound = value_binding.expression;
 	while (bound.type === 'MemberExpression') {
 		bound = /** @type {import('estree').Identifier | import('estree').MemberExpression} */ (
@@ -243,59 +225,49 @@ function setup_select_synchronization(value_binding, context) {
 		}
 	}
 
-	if (!context.state.analysis.runes) {
-		const invalidator = b.call(
-			'$.invalidate_inner_signals',
-			b.thunk(
-				b.block(
-					names.map((name) => {
-						const serialized = serialize_get_binding(b.id(name), context.state);
-						return b.stmt(serialized);
-					})
-				)
+	const invalidator = b.call(
+		'$.invalidate_inner_signals',
+		b.thunk(
+			b.block(
+				names.map((name) => {
+					const serialized = serialize_get_binding(b.id(name), context.state);
+					return b.stmt(serialized);
+				})
 			)
-		);
+		)
+	);
 
-		context.state.init.push(
-			b.stmt(
-				b.call(
-					'$.invalidate_effect',
-					b.thunk(
-						b.block([
-							b.stmt(
-								/** @type {import('estree').Expression} */ (context.visit(value_binding.expression))
-							),
-							b.stmt(invalidator)
-						])
-					)
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.invalidate_effect',
+				b.thunk(
+					b.block([
+						b.stmt(
+							/** @type {import('estree').Expression} */ (context.visit(value_binding.expression))
+						),
+						b.stmt(invalidator)
+					])
 				)
 			)
-		);
-	}
+		)
+	);
 }
 
 /**
- * Serializes element attribute assignments that contain spreads to either only
- * the init or the the init and update arrays, depending on whether or not the value is dynamic.
- * Resulting code for static looks something like this:
- * ```js
- * $.spread_attributes(element, null, [...]);
- * ```
- * Resulting code for dynamic looks something like this:
- * ```js
- * let value;
- * $.render_effect(() => {
- * 	value = $.spread_attributes(element, value, [...])
- * });
- * ```
- * Returns the id of the spread_attribute variable if spread isn't isolated, `null` otherwise.
  * @param {Array<import('#compiler').Attribute | import('#compiler').SpreadAttribute>} attributes
  * @param {import('../types.js').ComponentContext} context
  * @param {import('#compiler').RegularElement} element
  * @param {import('estree').Identifier} element_id
- * @returns {string | null}
+ * @param {boolean} needs_select_handling
  */
-function serialize_element_spread_attributes(attributes, context, element, element_id) {
+function serialize_element_spread_attributes(
+	attributes,
+	context,
+	element,
+	element_id,
+	needs_select_handling
+) {
 	let needs_isolation = false;
 
 	/** @type {import('estree').Expression[]} */
@@ -317,8 +289,9 @@ function serialize_element_spread_attributes(attributes, context, element, eleme
 
 	const lowercase_attributes =
 		element.metadata.svg || is_custom_element_node(element) ? b.false : b.true;
+	const id = context.state.scope.generate('spread_attributes');
 
-	const isolated = b.stmt(
+	const standalone = b.stmt(
 		b.call(
 			'$.spread_attributes_effect',
 			element_id,
@@ -327,32 +300,57 @@ function serialize_element_spread_attributes(attributes, context, element, eleme
 			b.literal(context.state.analysis.css.hash)
 		)
 	);
+	const inside_effect = b.stmt(
+		b.assignment(
+			'=',
+			b.id(id),
+			b.call(
+				'$.spread_attributes',
+				element_id,
+				b.id(id),
+				b.array(values),
+				lowercase_attributes,
+				b.literal(context.state.analysis.css.hash)
+			)
+		)
+	);
+
+	if (!needs_isolation || needs_select_handling) {
+		context.state.init.push(b.let(id));
+	}
 
 	// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
 	if (needs_isolation) {
-		context.state.update_effects.push(isolated);
-		return null;
+		if (needs_select_handling) {
+			context.state.update_effects.push(
+				b.stmt(b.call('$.render_effect', b.arrow([], b.block([inside_effect]))))
+			);
+		} else {
+			context.state.update_effects.push(standalone);
+		}
 	} else {
-		const id = context.state.scope.generate('spread_attributes');
-		context.state.init.push(b.let(id));
 		context.state.update.push({
-			singular: isolated,
-			grouped: b.stmt(
-				b.assignment(
-					'=',
-					b.id(id),
-					b.call(
-						'$.spread_attributes',
-						element_id,
-						b.id(id),
-						b.array(values),
-						lowercase_attributes,
-						b.literal(context.state.analysis.css.hash)
-					)
-				)
+			singular: needs_select_handling ? undefined : standalone,
+			grouped: inside_effect
+		});
+	}
+
+	if (needs_select_handling) {
+		context.state.init.push(
+			b.stmt(b.call('$.init_select', element_id, b.thunk(b.member(b.id(id), b.id('value')))))
+		);
+		context.state.update.push({
+			grouped: b.if(
+				b.binary('in', b.literal('value'), b.id(id)),
+				b.block([
+					// This ensures a one-way street to the DOM in case it's <select {value}>
+					// and not <select bind:value>. We need it in addition to $.init_select
+					// because the select value is not reflected as an attribute, so the
+					// mutation observer wouldn't notice.
+					b.stmt(b.call('$.select_option', element_id, b.member(b.id(id), b.id('value'))))
+				])
 			)
 		});
-		return id;
 	}
 }
 
@@ -644,27 +642,27 @@ function serialize_element_special_value_attribute(element, node_id, attribute,
 		)
 	);
 	const is_reactive = attribute.metadata.dynamic;
-	const needs_selected_call =
-		element === 'option' && (is_reactive || collect_parent_each_blocks(context).length > 0);
-	const needs_option_call = element === 'select' && is_reactive;
+	const is_select_with_value =
+		// attribute.metadata.dynamic would give false negatives because even if the value does not change,
+		// the inner options could still change, so we need to always treat it as reactive
+		element === 'select' && attribute.value !== true && !is_text_attribute(attribute);
 	const assignment = b.stmt(
-		needs_selected_call
+		is_select_with_value
 			? b.sequence([
 					inner_assignment,
-					// This ensures things stay in sync with the select binding
-					// in case of updates to the option value or new values appearing
-					b.call('$.selected', node_id)
+					// This ensures a one-way street to the DOM in case it's <select {value}>
+					// and not <select bind:value>. We need it in addition to $.init_select
+					// because the select value is not reflected as an attribute, so the
+					// mutation observer wouldn't notice.
+					b.call('$.select_option', node_id, value)
 				])
-			: needs_option_call
-				? b.sequence([
-						inner_assignment,
-						// This ensures a one-way street to the DOM in case it's <select {value}>
-						// and not <select bind:value>
-						b.call('$.select_option', node_id, value)
-					])
-				: inner_assignment
+			: inner_assignment
 	);
 
+	if (is_select_with_value) {
+		state.init.push(b.stmt(b.call('$.init_select', node_id, b.thunk(value))));
+	}
+
 	if (is_reactive) {
 		const id = state.scope.generate(`${node_id.name}_value`);
 		serialize_update_assignment(
@@ -2082,11 +2080,15 @@ export const template_visitors = {
 		// Then do attributes
 		let is_attributes_reactive = false;
 		if (node.metadata.has_spread) {
-			const spread_id = serialize_element_spread_attributes(attributes, context, node, node_id);
-			if (child_metadata.namespace !== 'foreign') {
-				add_select_to_spread_update(spread_id, node, context, node_id);
-			}
-			is_attributes_reactive = spread_id !== null;
+			serialize_element_spread_attributes(
+				attributes,
+				context,
+				node,
+				node_id,
+				// If value binding exists, that one takes care of calling $.init_select
+				value_binding === null && node.name === 'select' && child_metadata.namespace !== 'foreign'
+			);
+			is_attributes_reactive = true;
 		} else {
 			for (const attribute of /** @type {import('#compiler').Attribute[]} */ (attributes)) {
 				if (is_event_attribute(attribute)) {
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
index 8c0f535cd1..6ee497f02b 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -1,4 +1,5 @@
 import { effect } from '../../../reactivity/effects.js';
+import { untrack } from '../../../runtime.js';
 
 /**
  * Selects the correct option(s) (depending on whether this is a multiple select)
@@ -26,26 +27,43 @@ export function select_option(select, value, mounting) {
 }
 
 /**
- * Finds the containing `<select>` element and potentially updates its `selected` state.
- * @param {HTMLOptionElement} option
- * @returns {void}
+ * Selects the correct option(s) if `value` is given,
+ * and then sets up a mutation observer to sync the
+ * current selection to the dom when it changes. Such
+ * changes could for example occur when options are
+ * inside an `#each` block.
+ * @template V
+ * @param {HTMLSelectElement} select
+ * @param {() => V} [get_value]
  */
-export function selected(option) {
-	// Inside an effect because the element might not be connected
-	// to the parent <select> yet when this is called
+export function init_select(select, get_value) {
 	effect(() => {
-		var select = option.parentNode;
-
-		while (select != null) {
-			if (select.nodeName === 'SELECT') break;
-			select = select.parentNode;
+		if (get_value) {
+			select_option(select, untrack(get_value));
 		}
 
-		// @ts-ignore
-		if (select != null && option.__value === select.__value) {
-			// never set to false, since this causes browser to select default option
-			option.selected = true;
-		}
+		var observer = new MutationObserver(() => {
+			// @ts-ignore
+			var value = select.__value;
+			select_option(select, value);
+			// Deliberately don't update the potential binding value,
+			// the model should be preserved unless explicitly changed
+		});
+
+		observer.observe(select, {
+			// Listen to option element changes
+			childList: true,
+			subtree: true, // because of <optgroup>
+			// Listen to option element value attribute changes
+			// (doesn't get notified of select value changes,
+			// because that property is not reflected as an attribute)
+			attributes: true,
+			attributeFilter: ['value']
+		});
+
+		return () => {
+			observer.disconnect();
+		};
 	});
 }
 
@@ -78,6 +96,7 @@ export function bind_select_value(select, get_value, update) {
 		var value = get_value();
 		select_option(select, value, mounting);
 
+		// Mounting and value undefined -> take selection from dom
 		if (mounting && value === undefined) {
 			/** @type {HTMLOptionElement | null} */
 			var selected_option = select.querySelector(':checked');
@@ -92,27 +111,8 @@ export function bind_select_value(select, get_value, update) {
 		mounting = false;
 	});
 
-	// If one of the options gets removed from the DOM, the value might have changed
-	effect(() => {
-		var observer = new MutationObserver(() => {
-			// @ts-ignore
-			var value = select.__value;
-			select_option(select, value, mounting);
-			/** @type {HTMLOptionElement | null} */
-			var selected_option = select.querySelector(':checked');
-			if (selected_option === null || get_option_value(selected_option) !== value) {
-				update('');
-			}
-		});
-
-		observer.observe(select, {
-			childList: true
-		});
-
-		return () => {
-			observer.disconnect();
-		};
-	});
+	// don't pass get_value, we already initialize it in the effect above
+	init_select(select);
 }
 
 /**
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-late-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-2/_config.js
index 15d0008fb6..ab2db4b07d 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-late-2/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-2/_config.js
@@ -14,9 +14,11 @@ export default test({
 		<p>selected: two</p>
 	`,
 
-	test({ assert, component, target }) {
+	async test({ assert, component, target }) {
 		component.items = ['one', 'two', 'three'];
 
+		await Promise.resolve(); // mutation observer
+
 		const options = target.querySelectorAll('option');
 		assert.ok(!options[0].selected);
 		assert.ok(options[1].selected);
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-late-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-3/_config.js
index 1eec4b7dba..54773bea0a 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-late-3/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-3/_config.js
@@ -19,9 +19,11 @@ export default test({
 		<p>selected: two</p>
 	`,
 
-	test({ assert, component, target }) {
+	async test({ assert, component, target }) {
 		component.items = ['one', 'two', 'three'];
 
+		await Promise.resolve(); // mutation observer
+
 		const options = target.querySelectorAll('option');
 		assert.ok(!options[0].selected);
 		assert.ok(options[1].selected);
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js
index 7c73cec9a2..05b485a066 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js
@@ -26,9 +26,10 @@ export default test({
 		assert.equal(select.value, '');
 		assert.equal(select.selectedIndex, -1);
 
+		// model of selected value should be kept around, even if it is not in the list
 		assert.htmlEqual(
 			target.innerHTML,
-			`<p>selected:</p><select><option value="b">b</option><option value="c">c</option></select>`
+			`<p>selected: a</p><select><option value="b">b</option><option value="c">c</option></select>`
 		);
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/select-lazy-options/_config.js b/packages/svelte/tests/runtime-legacy/samples/select-lazy-options/_config.js
new file mode 100644
index 0000000000..03714f0875
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/select-lazy-options/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await target.querySelector('button')?.click();
+		await Promise.resolve();
+
+		const options = target.querySelectorAll('option');
+		assert.equal(options[0].selected, false);
+		assert.equal(options[1].selected, true);
+		assert.equal(options[2].selected, false);
+		assert.equal(options[3].selected, false);
+		assert.equal(options[4].selected, true);
+		assert.equal(options[5].selected, false);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/select-lazy-options/main.svelte b/packages/svelte/tests/runtime-legacy/samples/select-lazy-options/main.svelte
new file mode 100644
index 0000000000..5d4b51c371
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/select-lazy-options/main.svelte
@@ -0,0 +1,33 @@
+<script>
+	let value = 'bar';
+	let value_bound = 'bar';
+	let options = {};
+
+	function loadOptions() {
+		options = {
+			foo: 'Foo',
+			bar: 'Bar',
+			baz: 'Baz',
+		};
+	}
+</script>
+
+<select {value}>
+	{#each Object.entries(options) as [key, value] (key)}
+		<option value={key}>
+			{value}
+		</option>
+	{/each}
+</select>
+
+<select bind:value={value_bound}>
+	{#each Object.entries(options) as [key, value] (key)}
+		<option value={key}>
+			{value}
+		</option>
+	{/each}
+</select>
+
+<button on:click={loadOptions}>
+	Load options
+</button>
diff --git a/packages/svelte/tests/runtime-legacy/samples/select-one-way-bind-object-multiple/_config.js b/packages/svelte/tests/runtime-legacy/samples/select-one-way-bind-object-multiple/_config.js
new file mode 100644
index 0000000000..b737d42061
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/select-one-way-bind-object-multiple/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+const items = [{ id: 'a' }, { id: 'b' }];
+
+export default test({
+	get props() {
+		return { foo: [items[0]], items };
+	},
+
+	test({ assert, component, target }) {
+		const options = target.querySelectorAll('option');
+
+		assert.equal(options[0].selected, true);
+		assert.equal(options[1].selected, false);
+
+		component.foo = [component.items[1]];
+
+		assert.equal(options[0].selected, false);
+		assert.equal(options[1].selected, true);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/select-one-way-bind-object-multiple/main.svelte b/packages/svelte/tests/runtime-legacy/samples/select-one-way-bind-object-multiple/main.svelte
new file mode 100644
index 0000000000..830e1e74d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/select-one-way-bind-object-multiple/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+	export let items;
+</script>
+
+<select value="{foo}" multiple>
+	<option value='{items[0]}'>a</option>
+	<option value='{items[1]}'>b</option>
+</select>

From 86c57f96dec3587f6e5bc7e630349cec2e38c4bb Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 20 Mar 2024 22:29:50 +0100
Subject: [PATCH 15/26] fix: better await block scope analysis (#10849)

The await block scope analysis was flawed because it did not set the scope for the value/error field before visiting those nodes, resulting in the wrong scopes getting references
As a byproduct, this fixes #8141
---
 packages/svelte/src/compiler/phases/scope.js  | 42 ++++++++++++-------
 .../samples/binding-select-late-4/_config.js  | 12 ++++++
 .../samples/binding-select-late-4/main.svelte | 19 +++++++++
 3 files changed, 58 insertions(+), 15 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/binding-select-late-4/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/binding-select-late-4/main.svelte

diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 9b0d3e7dcb..ad4fc2ee9e 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -599,26 +599,38 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		},
 
 		AwaitBlock(node, context) {
-			context.next();
+			context.visit(node.expression);
+
+			if (node.pending) {
+				context.visit(node.pending);
+			}
 
-			if (node.then && node.value !== null) {
-				const then_scope = /** @type {Scope} */ (scopes.get(node.then));
-				const value_scope = context.state.scope.child();
-				for (const id of extract_identifiers(node.value)) {
-					then_scope.declare(id, 'normal', 'const');
-					value_scope.declare(id, 'normal', 'const');
+			if (node.then) {
+				context.visit(node.then);
+				if (node.value) {
+					const then_scope = /** @type {Scope} */ (scopes.get(node.then));
+					const value_scope = context.state.scope.child();
+					scopes.set(node.value, value_scope);
+					context.visit(node.value, { scope: value_scope });
+					for (const id of extract_identifiers(node.value)) {
+						then_scope.declare(id, 'normal', 'const');
+						value_scope.declare(id, 'normal', 'const');
+					}
 				}
-				scopes.set(node.value, value_scope);
 			}
 
-			if (node.catch && node.error !== null) {
-				const catch_scope = /** @type {Scope} */ (scopes.get(node.catch));
-				const error_scope = context.state.scope.child();
-				for (const id of extract_identifiers(node.error)) {
-					catch_scope.declare(id, 'normal', 'const');
-					error_scope.declare(id, 'normal', 'const');
+			if (node.catch) {
+				context.visit(node.catch);
+				if (node.error) {
+					const catch_scope = /** @type {Scope} */ (scopes.get(node.catch));
+					const error_scope = context.state.scope.child();
+					scopes.set(node.error, error_scope);
+					context.visit(node.error, { scope: error_scope });
+					for (const id of extract_identifiers(node.error)) {
+						catch_scope.declare(id, 'normal', 'const');
+						error_scope.declare(id, 'normal', 'const');
+					}
 				}
-				scopes.set(node.error, error_scope);
 			}
 		},
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-late-4/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-4/_config.js
new file mode 100644
index 0000000000..9893a7c716
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-4/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await new Promise((r) => setTimeout(r, 200)); // wait for await block to resolve
+
+		const options = target.querySelectorAll('option');
+		assert.ok(!options[0].selected);
+		assert.ok(options[1].selected);
+		assert.ok(!options[2].selected);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-late-4/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-4/main.svelte
new file mode 100644
index 0000000000..7702927e5b
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-4/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let promise = getNumbers();
+	let selected = 2;
+
+	async function getNumbers() {
+		await new Promise(resolve => setTimeout(resolve, 100));
+		return [1, 2, 3];
+	}
+</script>
+
+<select bind:value={selected}>
+	{#await promise}
+		<option>-1</option>
+	{:then numbers}
+		{#each numbers as number}
+			<option>{number}</option>
+		{/each}
+	{/await}
+</select>

From 8c2f6039c6ca8203bc0ee2420e9c992404b33eea Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 21 Mar 2024 13:39:29 +0000
Subject: [PATCH 16/26] fix: improve element class attribute behaviour (#10856)

* fix: improve element class attribute behaviour

* Update packages/svelte/src/internal/client/dom/elements/class.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/selfish-spies-help.md              |  5 ++
 .../3-transform/client/visitors/template.js   | 13 +++--
 .../src/internal/client/dom/elements/class.js | 49 +++++++++++++++++--
 .../element-attribute-removed/_before.html    |  2 +-
 .../element-attribute-removed/main.svelte     |  4 +-
 .../component-binding-infinite-loop/C.svelte  |  4 +-
 6 files changed, 66 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/selfish-spies-help.md

diff --git a/.changeset/selfish-spies-help.md b/.changeset/selfish-spies-help.md
new file mode 100644
index 0000000000..2a06251e1a
--- /dev/null
+++ b/.changeset/selfish-spies-help.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve element class attribute behaviour
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 0d6f13aa18..b2ccd60251 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -473,6 +473,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
 function serialize_element_attribute_update_assignment(element, node_id, attribute, context) {
 	const state = context.state;
 	const name = get_attribute_name(element, attribute, context);
+	const is_svg = context.state.metadata.namespace === 'svg';
 	let [contains_call_expression, value] = serialize_attribute_value(attribute.value, context);
 
 	// The foreign namespace doesn't have any special handling, everything goes through the attr function
@@ -507,13 +508,19 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 		if (name === 'class') {
 			if (singular) {
 				return {
-					singular: b.stmt(b.call('$.class_name_effect', node_id, b.thunk(singular))),
-					grouped: b.stmt(b.call('$.class_name', node_id, singular)),
+					singular: b.stmt(
+						b.call(
+							is_svg ? '$.svg_class_name_effect' : '$.class_name_effect',
+							node_id,
+							b.thunk(singular)
+						)
+					),
+					grouped: b.stmt(b.call(is_svg ? '$.svg_class_name' : '$.class_name', node_id, singular)),
 					skip_condition: true
 				};
 			}
 			return {
-				grouped: b.stmt(b.call('$.class_name', node_id, value)),
+				grouped: b.stmt(b.call(is_svg ? '$.svg_class_name' : '$.class_name', node_id, value)),
 				skip_condition: true
 			};
 		} else if (!DOMProperties.includes(name)) {
diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js
index 84466e8058..ffb4f5bea1 100644
--- a/packages/svelte/src/internal/client/dom/elements/class.js
+++ b/packages/svelte/src/internal/client/dom/elements/class.js
@@ -3,7 +3,7 @@ import { set_class_name } from '../operations.js';
 import { render_effect } from '../../reactivity/effects.js';
 
 /**
- * @param {Element} dom
+ * @param {HTMLElement} dom
  * @param {() => string} value
  * @returns {void}
  */
@@ -14,7 +14,47 @@ export function class_name_effect(dom, value) {
 }
 
 /**
- * @param {Element} dom
+ * @param {SVGElement} dom
+ * @param {() => string} value
+ * @returns {void}
+ */
+export function svg_class_name_effect(dom, value) {
+	render_effect(() => {
+		svg_class_name(dom, value());
+	});
+}
+
+/**
+ * @param {SVGElement} dom
+ * @param {string} value
+ * @returns {void}
+ */
+export function svg_class_name(dom, value) {
+	// @ts-expect-error need to add __className to patched prototype
+	var prev_class_name = dom.__className;
+	var next_class_name = to_class(value);
+
+	if (hydrating && dom.getAttribute('class') === next_class_name) {
+		// In case of hydration don't reset the class as it's already correct.
+		// @ts-expect-error need to add __className to patched prototype
+		dom.__className = next_class_name;
+	} else if (
+		prev_class_name !== next_class_name ||
+		(hydrating && dom.getAttribute('class') !== next_class_name)
+	) {
+		if (next_class_name === '') {
+			dom.removeAttribute('class');
+		} else {
+			dom.setAttribute('class', next_class_name);
+		}
+
+		// @ts-expect-error need to add __className to patched prototype
+		dom.__className = next_class_name;
+	}
+}
+
+/**
+ * @param {HTMLElement} dom
  * @param {string} value
  * @returns {void}
  */
@@ -31,7 +71,10 @@ export function class_name(dom, value) {
 		prev_class_name !== next_class_name ||
 		(hydrating && dom.className !== next_class_name)
 	) {
-		if (next_class_name === '') {
+		// Removing the attribute when the value is only an empty string causes
+		// peformance issues vs simply making the className an empty string. So
+		// we should only remove the class if the the value is nullish.
+		if (value == null) {
 			dom.removeAttribute('class');
 		} else {
 			set_class_name(dom, next_class_name);
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-removed/_before.html b/packages/svelte/tests/hydration/samples/element-attribute-removed/_before.html
index fec75ee427..4bb2d47ff3 100644
--- a/packages/svelte/tests/hydration/samples/element-attribute-removed/_before.html
+++ b/packages/svelte/tests/hydration/samples/element-attribute-removed/_before.html
@@ -1 +1 @@
-<!--ssr:0--><div class="foo"></div><!--ssr:0-->
+<!--ssr:0--><div id="foo"></div><!--ssr:0-->
diff --git a/packages/svelte/tests/hydration/samples/element-attribute-removed/main.svelte b/packages/svelte/tests/hydration/samples/element-attribute-removed/main.svelte
index c33bc0981c..959352e727 100644
--- a/packages/svelte/tests/hydration/samples/element-attribute-removed/main.svelte
+++ b/packages/svelte/tests/hydration/samples/element-attribute-removed/main.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let className;
+	export let id;
 </script>
 
-<div class={className}></div>
\ No newline at end of file
+<div id={id}></div>
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-binding-infinite-loop/C.svelte b/packages/svelte/tests/runtime-legacy/samples/component-binding-infinite-loop/C.svelte
index 0bfc2f1d4e..8226de6d71 100644
--- a/packages/svelte/tests/runtime-legacy/samples/component-binding-infinite-loop/C.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/component-binding-infinite-loop/C.svelte
@@ -13,7 +13,7 @@
 
 <span
 	on:click="{toggle}"
-	class="{isCurrentlySelected ? 'selected' : ''}"
+	class="{isCurrentlySelected ? 'selected' : null}"
 >
 	<slot></slot>
-</span>
\ No newline at end of file
+</span>

From c60f2e38a36261882b7dbe1be0c0ab029b693e97 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 21 Mar 2024 13:44:58 +0000
Subject: [PATCH 17/26] Version Packages (next) (#10832)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  7 +++++++
 packages/svelte/CHANGELOG.md   | 18 ++++++++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 35159be8ee..0921244615 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -13,6 +13,7 @@
     "afraid-moose-matter",
     "angry-books-jam",
     "angry-plums-punch",
+    "beige-cobras-smoke",
     "beige-flies-wash",
     "beige-mirrors-listen",
     "beige-rabbits-shave",
@@ -63,6 +64,7 @@
     "dry-eggs-retire",
     "dull-coins-vanish",
     "dull-mangos-wave",
+    "dull-pots-add",
     "dull-roses-relate",
     "early-ads-tie",
     "eight-steaks-shout",
@@ -166,6 +168,7 @@
     "lucky-schools-hang",
     "lucky-toes-begin",
     "many-trees-fix",
+    "mighty-cooks-scream",
     "mighty-files-hammer",
     "moody-carrots-lay",
     "moody-frogs-exist",
@@ -192,6 +195,7 @@
     "old-mails-sneeze",
     "old-oranges-compete",
     "olive-kangaroos-brake",
+    "olive-mice-fix",
     "olive-seals-sell",
     "olive-shirts-complain",
     "olive-socks-kick",
@@ -233,6 +237,7 @@
     "rotten-rules-invite",
     "rude-ghosts-tickle",
     "selfish-dragons-knock",
+    "selfish-spies-help",
     "selfish-tools-hide",
     "serious-kids-deliver",
     "serious-needles-joke",
@@ -265,6 +270,7 @@
     "small-papayas-laugh",
     "small-sheep-type",
     "smart-parents-swim",
+    "smart-turkeys-tell",
     "smart-zebras-pay",
     "smooth-rings-rush",
     "soft-clocks-remember",
@@ -306,6 +312,7 @@
     "tasty-cheetahs-appear",
     "tasty-numbers-perform",
     "tasty-steaks-smile",
+    "ten-eels-move",
     "ten-foxes-repeat",
     "ten-jokes-divide",
     "ten-peaches-sleep",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 051d4cd970..56ef4d3af2 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,23 @@
 # svelte
 
+## 5.0.0-next.81
+
+### Patch Changes
+
+- feat: add support for webkitdirectory DOM boolean attribute ([#10847](https://github.com/sveltejs/svelte/pull/10847))
+
+- fix: don't override instance methods during legacy class creation ([#10834](https://github.com/sveltejs/svelte/pull/10834))
+
+- fix: adjust scope parent for named slots ([#10843](https://github.com/sveltejs/svelte/pull/10843))
+
+- fix: improve handling of unowned derived signals ([#10842](https://github.com/sveltejs/svelte/pull/10842))
+
+- fix: improve element class attribute behaviour ([#10856](https://github.com/sveltejs/svelte/pull/10856))
+
+- fix: ensure select value is updated upon select option removal ([#10846](https://github.com/sveltejs/svelte/pull/10846))
+
+- fix: ensure capture events don't call delegated events ([#10831](https://github.com/sveltejs/svelte/pull/10831))
+
 ## 5.0.0-next.80
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index befcdd03ae..c7c2f1af04 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.80",
+  "version": "5.0.0-next.81",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index cdd49a7d21..89fd02424a 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.80';
+export const VERSION = '5.0.0-next.81';
 export const PUBLIC_VERSION = '5';

From aec4958e4ff465fd40569867912e39041def7d1b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 21 Mar 2024 14:47:59 -0400
Subject: [PATCH 18/26] check treeshakeability in CI (#10861)

* check treeshakeability in CI

* copy-paste oops
---
 .github/workflows/ci.yml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 45e754b35d..06a1c08522 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -60,3 +60,18 @@ jobs:
       - name: build and check generated types
         if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail
         run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally and commit the changes after you have reviewed them"; git diff; exit 1); }
+
+  Treeshaking:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+      - name: install
+        run: pnpm install --frozen-lockfile
+      - name: check
+        run: cd packages/svelte && node scripts/check-treeshakeability.js

From 392f7d223ab1d4449fd96307a90c2af60c68aab4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 21 Mar 2024 15:15:55 -0400
Subject: [PATCH 19/26] chore: fix treeshaking check (#10862)

---
 packages/svelte/scripts/check-treeshakeability.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/svelte/scripts/check-treeshakeability.js b/packages/svelte/scripts/check-treeshakeability.js
index a6164c462b..21f33ab6f0 100644
--- a/packages/svelte/scripts/check-treeshakeability.js
+++ b/packages/svelte/scripts/check-treeshakeability.js
@@ -12,6 +12,15 @@ async function bundle_code(entry) {
 			virtual({
 				__entry__: entry
 			}),
+			{
+				name: 'resolve-svelte',
+				resolveId(importee) {
+					if (importee.startsWith('svelte')) {
+						const entry = pkg.exports[importee.replace('svelte', '.')];
+						return path.resolve(entry.browser ?? entry.default);
+					}
+				}
+			},
 			nodeResolve({
 				exportConditions: ['production', 'import', 'browser', 'default']
 			})
@@ -99,6 +108,7 @@ const without_hydration = await bundle_code(
 		{ filename: 'App.svelte' }
 	).js.code
 );
+
 if (!without_hydration.includes('current_hydration_fragment')) {
 	// eslint-disable-next-line no-console
 	console.error(`✅ Hydration code treeshakeable`);

From 86b3ea8c23a17af9af9ffb156565fcd5e0fe81fd Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 21 Mar 2024 22:08:17 +0100
Subject: [PATCH 20/26] chore: failing test for out-of-order `$:` execution
 (#10864)

pre effects, which also contain `$:` statements, are more controlled in legacy mode and should only run once per tick, in their defined order. Flushing them out of order can result in bugs. Related to #10795 and #10787
---
 .../samples/reactive-statement-store/_config.js  | 13 +++++++++++++
 .../samples/reactive-statement-store/main.svelte | 16 ++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/reactive-statement-store/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/reactive-statement-store/main.svelte

diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-statement-store/_config.js b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-store/_config.js
new file mode 100644
index 0000000000..0b705cc4f1
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-store/_config.js
@@ -0,0 +1,13 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // failing test for https://github.com/sveltejs/svelte/issues/10787
+	html: `<button>3</button>`,
+	async test({ assert, target }) {
+		target.querySelector('button')?.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<button>1</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-statement-store/main.svelte b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-store/main.svelte
new file mode 100644
index 0000000000..62a06751d3
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-store/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let x = 1;
+	let y = true;
+	$: array = y ? [1, 2] : [1];
+	$: count = array.length === 2 && x ? 1 : 0;
+	$: sum = count + array.length;
+</script>
+
+<button
+	on:click={() => {
+		// order is important here: x must be updated before y
+		// in order to test that $: still runs in the correct order
+		x = 2;
+		y = false;
+	}}>{sum}</button
+>

From c87c2f452e7c732e37efb5caf77d635218683a5c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 21 Mar 2024 18:10:39 -0400
Subject: [PATCH 21/26] Revert "check treeshakeability in CI (#10861)" (#10863)

This reverts commit aec4958e4ff465fd40569867912e39041def7d1b.
---
 .github/workflows/ci.yml | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 06a1c08522..45e754b35d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -60,18 +60,3 @@ jobs:
       - name: build and check generated types
         if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail
         run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally and commit the changes after you have reviewed them"; git diff; exit 1); }
-
-  Treeshaking:
-    runs-on: ubuntu-latest
-    timeout-minutes: 5
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2.2.4
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: pnpm
-      - name: install
-        run: pnpm install --frozen-lockfile
-      - name: check
-        run: cd packages/svelte && node scripts/check-treeshakeability.js

From f6eca83b7c7de2f68752917b7562e2d71fbb5cb0 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 21 Mar 2024 23:12:39 +0100
Subject: [PATCH 22/26] fix: no static-state-reference warning in legacy mode
 (#10865)

Doesn't make any sense there
---
 packages/svelte/src/compiler/phases/2-analyze/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 3ddb68237c..20d4cc4644 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1072,6 +1072,7 @@ const common_visitors = {
 			}
 
 			if (
+				context.state.analysis.runes &&
 				node !== binding.node &&
 				// If we have $state that can be proxied or frozen and isn't re-assigned, then that means
 				// it's likely not using a primitive value and thus this warning isn't that helpful.

From e8ce41815a734b296aac0f03d9df99abea209c8a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 21 Mar 2024 19:13:15 -0400
Subject: [PATCH 23/26] chore: simplify transitions (#10798)

* replace transition code

* get rid of some stuff

* simplify

* remove some junk

* not sure how we solved this before, but i guess this makes sense

* oh hey i don't think we need this

* make elseif transparent for transition purposes

* oops

* edge case

* fix

* do not want

* rename

* transition out ecah blocks when emptying

* baby steps

* hydration fix

* tidy up

* tidy up

* tidy up

* fallbacks

* man i love deleting code

* tidy up

* note to self

* why was this an effect

* tidy up

* tidy up

* key blocks

* temporary

* fix

* WIP

* fix

* simplify

* emit events

* delete delete delete

* destroy child effects

* simplify helper

* simplify helper

* fix

* remove commented out code

* fix wonky test

* fix test

* fix test

* fix test

* dynamic components

* fix test

* await

* tidy up

* fix

* fix

* fix test

* tidy up

* we dont need to reconcile during hydration

* simplify

* tidy up

* fix

* reduce indentation

* simplify

* remove some junk

* remove some junk

* simplify

* tidy up

* prefer while over do-while (this appears to have the same behaviour)

* group fast paths

* rename

* unused import

* unused exports

* try this

* simplify

* simplify

* simplify

* simplify

* tidy up

* simplify

* simplify

* tidy up

* simplify

* simplify

* more compact names

* simplify

* better comments

* simplify

* tidy up

* we don't actually gain anything from this

* fix binding group order bug (revealed by previous commit, but exists separately from it)

* tidy up

* simplify

* tidy up

* remove some junk

* simplify

* note to self

* tidy up

* revert this bit

* tidy up

* simplify

* simplify

* simplify

* symmetry

* tidy up

* var

* rename some stuff

* tidy up

* simplify

* keyed each transitions

* make elements inert

* deferred transitions

* fix

* fix test

* fix some tests

* simplify

* fix

* fix test

* fix

* eh that'll do for now

* fix

* revert all these random changes

* fix

* fix

* simplify

* tidy up

* simplify

* simplify

* tidy up

* tidy up

* tidy up

* WIP

* WIP

* working

* tidy up

* fix

* tidy up

* tidy up

* lerp

* tidy up

* rename

* rename

* almost everything working

* tidy up

* ALL TESTS PASSING

* fix treeshaking

* Apply suggestions from code review

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* comment

* explain elseif locality

* explain flushSync

* comments

* this is accounted for

* add some comments

* remove outdated comment

* add comment

* add comments

* rename

* a few naming tweaks

* explain each_item_block stuff

* remove unused arg

* optimise

* add some comments

* fix test post-optimisation

* explicit comparisons

* some docs

* fix intro events

* move effect.ran into the bitmask

* docs

* rename run_transitions to should_intro, add explanatory jsdoc

* add some more docs

* remove animation before measuring

* only animate blocks that persist

* note to self

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 packages/svelte/.gitignore                    |    2 +
 .../svelte/scripts/check-treeshakeability.js  |    8 +-
 .../3-transform/client/visitors/template.js   |  107 +-
 packages/svelte/src/constants.js              |    4 +
 .../svelte/src/internal/client/constants.js   |   13 +-
 .../src/internal/client/dom/blocks/await.js   |  270 ++---
 .../internal/client/dom/blocks/css-props.js   |    4 +-
 .../src/internal/client/dom/blocks/each.js    | 1054 ++++++-----------
 .../src/internal/client/dom/blocks/if.js      |  264 ++---
 .../src/internal/client/dom/blocks/key.js     |  170 +--
 .../src/internal/client/dom/blocks/snippet.js |    7 +-
 .../client/dom/blocks/svelte-component.js     |  170 +--
 .../client/dom/blocks/svelte-element.js       |  191 +--
 .../internal/client/dom/blocks/svelte-head.js |    7 +-
 .../client/dom/elements/bindings/input.js     |    7 +-
 .../client/dom/elements/transitions.js        |  942 ++++-----------
 .../src/internal/client/dom/hydration.js      |   39 +-
 .../src/internal/client/dom/reconciler.js     |   27 +-
 .../src/internal/client/dom/template.js       |   12 +-
 packages/svelte/src/internal/client/loop.js   |   21 +-
 .../src/internal/client/reactivity/effects.js |  159 ++-
 .../src/internal/client/reactivity/types.d.ts |    9 +-
 packages/svelte/src/internal/client/render.js |   33 +-
 .../svelte/src/internal/client/runtime.js     |   37 +-
 packages/svelte/src/internal/client/timing.js |    3 +-
 .../svelte/src/internal/client/types.d.ts     |  166 +--
 packages/svelte/tests/animation-helpers.js    |  168 +--
 .../Component.svelte                          |   10 +-
 .../main.svelte                               |    6 +-
 .../class-shortcut-with-transition/_config.js |    2 +-
 .../dynamic-element-animation/_config.js      |   11 +-
 .../dynamic-element-animation/main.svelte     |    4 +-
 .../dynamic-element-transition/_config.js     |    5 +-
 .../_config.js                                |   11 +-
 .../transition-css-duration/_config.js        |   10 +-
 .../samples/transition-css-iframe/Foo.svelte  |    2 +-
 .../samples/transition-css-iframe/_config.js  |    9 +-
 .../transition-css-in-out-in/_config.js       |   13 +-
 .../transition-css-in-out-in/main.svelte      |    6 +-
 .../samples/transition-inert/_config.js       |   19 +-
 .../_config.js                                |    8 +-
 .../_config.js                                |   42 -
 .../transition-js-await-block/_config.js      |    6 +-
 .../_config.js                                |    6 +-
 .../_config.js                                |    2 +-
 .../dynamic-component-transition/_config.js   |    2 +-
 .../_config.js                                |    2 +-
 47 files changed, 1608 insertions(+), 2462 deletions(-)

diff --git a/packages/svelte/.gitignore b/packages/svelte/.gitignore
index e4925570e5..8b3d7652a1 100644
--- a/packages/svelte/.gitignore
+++ b/packages/svelte/.gitignore
@@ -11,3 +11,5 @@
 /motion.d.ts
 /store.d.ts
 /transition.d.ts
+
+/scripts/_bundle.js
diff --git a/packages/svelte/scripts/check-treeshakeability.js b/packages/svelte/scripts/check-treeshakeability.js
index 21f33ab6f0..9ded247b2b 100644
--- a/packages/svelte/scripts/check-treeshakeability.js
+++ b/packages/svelte/scripts/check-treeshakeability.js
@@ -74,7 +74,7 @@ for (const key in pkg.exports) {
 }
 
 const client_main = path.resolve(pkg.exports['.'].browser);
-const without_hydration = await bundle_code(
+const bundle = await bundle_code(
 	// Use all features which contain hydration code to ensure it's treeshakeable
 	compile(
 		`
@@ -109,15 +109,17 @@ const without_hydration = await bundle_code(
 	).js.code
 );
 
-if (!without_hydration.includes('current_hydration_fragment')) {
+if (!bundle.includes('current_hydration_fragment')) {
 	// eslint-disable-next-line no-console
 	console.error(`✅ Hydration code treeshakeable`);
 } else {
 	// eslint-disable-next-line no-console
-	console.error(without_hydration);
+	console.error(bundle);
 	// eslint-disable-next-line no-console
 	console.error(`❌ Hydration code not treeshakeable`);
 	failed = true;
+
+	fs.writeFileSync('scripts/_bundle.js', bundle);
 }
 
 // eslint-disable-next-line no-console
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index b2ccd60251..6f956a230d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -28,10 +28,14 @@ import {
 	AttributeAliases,
 	DOMBooleanAttributes,
 	EACH_INDEX_REACTIVE,
+	EACH_IS_ANIMATED,
 	EACH_IS_CONTROLLED,
 	EACH_IS_STRICT_EQUALS,
 	EACH_ITEM_REACTIVE,
-	EACH_KEYED
+	EACH_KEYED,
+	TRANSITION_GLOBAL,
+	TRANSITION_IN,
+	TRANSITION_OUT
 } from '../../../../../constants.js';
 import { regex_is_valid_identifier } from '../../../patterns.js';
 import { javascript_visitors_runes } from './javascript-runes.js';
@@ -1922,7 +1926,7 @@ export const template_visitors = {
 		state.init.push(
 			b.stmt(
 				b.call(
-					'$.animate',
+					'$.animation',
 					state.node,
 					b.thunk(
 						/** @type {import('estree').Expression} */ (visit(parse_directive_name(node.name)))
@@ -1939,25 +1943,21 @@ export const template_visitors = {
 		error(node, 'INTERNAL', 'Node should have been handled elsewhere');
 	},
 	TransitionDirective(node, { state, visit }) {
-		const type = node.intro && node.outro ? '$.transition' : node.intro ? '$.in' : '$.out';
-		const expression =
-			node.expression === null
-				? b.literal(null)
-				: b.thunk(/** @type {import('estree').Expression} */ (visit(node.expression)));
+		let flags = node.modifiers.includes('global') ? TRANSITION_GLOBAL : 0;
+		if (node.intro) flags |= TRANSITION_IN;
+		if (node.outro) flags |= TRANSITION_OUT;
 
-		state.init.push(
-			b.stmt(
-				b.call(
-					type,
-					state.node,
-					b.thunk(
-						/** @type {import('estree').Expression} */ (visit(parse_directive_name(node.name)))
-					),
-					expression,
-					node.modifiers.includes('global') ? b.true : b.false
-				)
-			)
-		);
+		const args = [
+			b.literal(flags),
+			state.node,
+			b.thunk(/** @type {import('estree').Expression} */ (visit(parse_directive_name(node.name))))
+		];
+
+		if (node.expression) {
+			args.push(b.thunk(/** @type {import('estree').Expression} */ (visit(node.expression))));
+		}
+
+		state.init.push(b.stmt(b.call('$.transition', ...args)));
 	},
 	RegularElement(node, context) {
 		if (node.name === 'noscript') {
@@ -2345,6 +2345,19 @@ export const template_visitors = {
 			each_type |= EACH_ITEM_REACTIVE;
 		}
 
+		// Since `animate:` can only appear on elements that are the sole child of a keyed each block,
+		// we can determine at compile time whether the each block is animated or not (in which
+		// case it should measure animated elements before and after reconciliation).
+		if (
+			node.key &&
+			node.body.nodes.some((child) => {
+				if (child.type !== 'RegularElement' && child.type !== 'SvelteElement') return false;
+				return child.attributes.some((attr) => attr.type === 'AnimateDirective');
+			})
+		) {
+			each_type |= EACH_IS_ANIMATED;
+		}
+
 		if (each_node_meta.is_controlled) {
 			each_type |= EACH_IS_CONTROLLED;
 		}
@@ -2557,22 +2570,44 @@ export const template_visitors = {
 			context.visit(node.consequent)
 		);
 
-		context.state.after_update.push(
-			b.stmt(
-				b.call(
-					'$.if',
-					context.state.node,
-					b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.test))),
-					b.arrow([b.id('$$anchor')], consequent),
-					node.alternate
-						? b.arrow(
-								[b.id('$$anchor')],
-								/** @type {import('estree').BlockStatement} */ (context.visit(node.alternate))
-							)
-						: b.literal(null)
-				)
-			)
-		);
+		const args = [
+			context.state.node,
+			b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.test))),
+			b.arrow([b.id('$$anchor')], consequent),
+			node.alternate
+				? b.arrow(
+						[b.id('$$anchor')],
+						/** @type {import('estree').BlockStatement} */ (context.visit(node.alternate))
+					)
+				: b.literal(null)
+		];
+
+		if (node.elseif) {
+			// We treat this...
+			//
+			//   {#if x}
+			//     ...
+			//   {:else}
+			//     {#if y}
+			//       <div transition:foo>...</div>
+			//     {/if}
+			//   {/if}
+			//
+			// ...slightly differently to this...
+			//
+			//   {#if x}
+			//     ...
+			//   {:else if y}
+			//     <div transition:foo>...</div>
+			//   {/if}
+			//
+			// ...even though they're logically equivalent. In the first case, the
+			// transition will only play when `y` changes, but in the second it
+			// should play when `x` or `y` change — both are considered 'local'
+			args.push(b.literal(true));
+		}
+
+		context.state.after_update.push(b.stmt(b.call('$.if', ...args)));
 	},
 	AwaitBlock(node, context) {
 		context.state.template.push('<!>');
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 1e7279c885..f26a567506 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -12,6 +12,10 @@ export const PROPS_IS_RUNES = 1 << 1;
 export const PROPS_IS_UPDATED = 1 << 2;
 export const PROPS_IS_LAZY_INITIAL = 1 << 3;
 
+export const TRANSITION_IN = 1;
+export const TRANSITION_OUT = 1 << 1;
+export const TRANSITION_GLOBAL = 1 << 2;
+
 /** List of Element events that will be delegated */
 export const DelegatedEvents = [
 	'beforeinput',
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index 794a04ebb8..17917d848a 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -9,17 +9,8 @@ export const DIRTY = 1 << 9;
 export const MAYBE_DIRTY = 1 << 10;
 export const INERT = 1 << 11;
 export const DESTROYED = 1 << 12;
-
-export const ROOT_BLOCK = 0;
-export const IF_BLOCK = 1;
-export const EACH_BLOCK = 2;
-export const EACH_ITEM_BLOCK = 3;
-export const AWAIT_BLOCK = 4;
-export const KEY_BLOCK = 5;
-export const HEAD_BLOCK = 6;
-export const DYNAMIC_COMPONENT_BLOCK = 7;
-export const DYNAMIC_ELEMENT_BLOCK = 8;
-export const SNIPPET_BLOCK = 9;
+export const IS_ELSEIF = 1 << 13;
+export const EFFECT_RAN = 1 << 14;
 
 export const UNINITIALIZED = Symbol();
 export const STATE_SYMBOL = Symbol('$state');
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index 1a12eb4b3e..d6820c058f 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -1,10 +1,16 @@
 import { is_promise } from '../../../common.js';
 import { hydrate_block_anchor } from '../hydration.js';
 import { remove } from '../reconciler.js';
-import { current_block, execute_effect, flushSync } from '../../runtime.js';
-import { destroy_effect, render_effect } from '../../reactivity/effects.js';
-import { trigger_transitions } from '../elements/transitions.js';
-import { AWAIT_BLOCK, UNINITIALIZED } from '../../constants.js';
+import {
+	current_block,
+	current_component_context,
+	flushSync,
+	set_current_component_context,
+	set_current_effect,
+	set_current_reaction
+} from '../../runtime.js';
+import { destroy_effect, pause_effect, render_effect } from '../../reactivity/effects.js';
+import { DESTROYED, INERT } from '../../constants.js';
 
 /** @returns {import('../../types.js').AwaitBlock} */
 export function create_await_block() {
@@ -16,179 +22,125 @@ export function create_await_block() {
 		// parent
 		p: /** @type {import('../../types.js').Block} */ (current_block),
 		// pending
-		n: true,
-		// transition
-		r: null,
-		// type
-		t: AWAIT_BLOCK
+		n: true
 	};
 }
 
 /**
  * @template V
- * @param {Comment} anchor_node
- * @param {(() => Promise<V>)} input
+ * @param {Comment} anchor
+ * @param {(() => Promise<V>)} get_input
  * @param {null | ((anchor: Node) => void)} pending_fn
  * @param {null | ((anchor: Node, value: V) => void)} then_fn
  * @param {null | ((anchor: Node, error: unknown) => void)} catch_fn
  * @returns {void}
  */
-export function await_block(anchor_node, input, pending_fn, then_fn, catch_fn) {
+export function await_block(anchor, get_input, pending_fn, then_fn, catch_fn) {
 	const block = create_await_block();
 
-	/** @type {null | import('../../types.js').Render} */
-	let current_render = null;
-	hydrate_block_anchor(anchor_node);
-
-	/** @type {{}} */
-	let latest_token;
-
-	/** @type {typeof UNINITIALIZED | V} */
-	let resolved_value = UNINITIALIZED;
-
-	/** @type {unknown} */
-	let error = UNINITIALIZED;
-	let pending = false;
-	block.r =
-		/**
-		 * @param {import('../../types.js').Transition} transition
-		 * @returns {void}
-		 */
-		(transition) => {
-			const render = /** @type {import('../../types.js').Render} */ (current_render);
-			const transitions = render.s;
-			transitions.add(transition);
-			transition.f(() => {
-				transitions.delete(transition);
-				if (transitions.size === 0) {
-					// If the current render has changed since, then we can remove the old render
-					// effect as it's stale.
-					if (current_render !== render && render.e !== null) {
-						if (render.d !== null) {
-							remove(render.d);
-							render.d = null;
-						}
-						destroy_effect(render.e);
-						render.e = null;
-					}
-				}
-			});
-		};
-	const create_render_effect = () => {
-		/** @type {import('../../types.js').Render} */
-		const render = {
-			d: null,
-			e: null,
-			s: new Set(),
-			p: current_render
-		};
-		const effect = render_effect(
-			() => {
-				if (error === UNINITIALIZED) {
-					if (resolved_value === UNINITIALIZED) {
-						// pending = true
-						block.n = true;
-						if (pending_fn !== null) {
-							pending_fn(anchor_node);
-						}
-					} else if (then_fn !== null) {
-						// pending = false
-						block.n = false;
-						then_fn(anchor_node, resolved_value);
-					}
-				} else if (catch_fn !== null) {
-					// pending = false
-					block.n = false;
-					catch_fn(anchor_node, error);
+	const component_context = current_component_context;
+
+	hydrate_block_anchor(anchor);
+
+	/** @type {any} */
+	let input;
+
+	/** @type {import('#client').Effect | null} */
+	let pending_effect;
+
+	/** @type {import('#client').Effect | null} */
+	let then_effect;
+
+	/** @type {import('#client').Effect | null} */
+	let catch_effect;
+
+	/**
+	 * @param {(anchor: Comment, value: any) => void} fn
+	 * @param {any} value
+	 */
+	function create_effect(fn, value) {
+		set_current_effect(branch);
+		set_current_reaction(branch); // TODO do we need both?
+		set_current_component_context(component_context);
+		var effect = render_effect(() => fn(anchor, value), {}, true);
+		set_current_component_context(null);
+		set_current_reaction(null);
+		set_current_effect(null);
+
+		// without this, the DOM does not update until two ticks after the promise,
+		// resolves which is unexpected behaviour (and somewhat irksome to test)
+		flushSync();
+
+		return effect;
+	}
+
+	/** @param {import('#client').Effect} effect */
+	function pause(effect) {
+		if ((effect.f & DESTROYED) !== 0) return;
+		const block = effect.block;
+
+		pause_effect(effect, () => {
+			// TODO make this unnecessary
+			const dom = block?.d;
+			if (dom) remove(dom);
+		});
+	}
+
+	const branch = render_effect(() => {
+		if (input === (input = get_input())) return;
+
+		if (is_promise(input)) {
+			const promise = /** @type {Promise<any>} */ (input);
+
+			if (pending_fn) {
+				if (pending_effect && (pending_effect.f & INERT) === 0) {
+					if (pending_effect.block?.d) remove(pending_effect.block.d);
+					destroy_effect(pending_effect);
 				}
-				render.d = block.d;
-				block.d = null;
-			},
-			block,
-			true,
-			true
-		);
-		render.e = effect;
-		current_render = render;
-	};
-	const render = () => {
-		const render = current_render;
-		if (render === null) {
-			create_render_effect();
-			return;
-		}
-		const transitions = render.s;
-		if (transitions.size === 0) {
-			if (render.d !== null) {
-				remove(render.d);
-				render.d = null;
-			}
-			if (render.e) {
-				execute_effect(render.e);
-			} else {
-				create_render_effect();
+
+				pending_effect = render_effect(() => pending_fn(anchor), {}, true);
 			}
-		} else {
-			create_render_effect();
-			trigger_transitions(transitions, 'out');
-		}
-	};
-	const await_effect = render_effect(
-		() => {
-			const token = {};
-			latest_token = token;
-			const promise = input();
-			if (is_promise(promise)) {
-				promise.then(
-					/** @param {V} v */
-					(v) => {
-						if (latest_token === token) {
-							// Ensure UI is in sync before resolving value.
-							flushSync();
-							resolved_value = v;
-							pending = false;
-							render();
-						}
-					},
-					/** @param {unknown} _error */
-					(_error) => {
-						error = _error;
-						pending = false;
-						render();
+
+			if (then_effect) pause(then_effect);
+			if (catch_effect) pause(catch_effect);
+
+			promise.then(
+				(value) => {
+					if (promise !== input) return;
+					if (pending_effect) pause(pending_effect);
+
+					if (then_fn) {
+						then_effect = create_effect(then_fn, value);
+					}
+				},
+				(error) => {
+					if (promise !== input) return;
+					if (pending_effect) pause(pending_effect);
+
+					if (catch_fn) {
+						catch_effect = create_effect(catch_fn, error);
 					}
-				);
-				if (resolved_value !== UNINITIALIZED || error !== UNINITIALIZED) {
-					error = UNINITIALIZED;
-					resolved_value = UNINITIALIZED;
 				}
-				if (!pending) {
-					pending = true;
-					render();
+			);
+		} else {
+			if (pending_effect) pause(pending_effect);
+			if (catch_effect) pause(catch_effect);
+
+			if (then_fn) {
+				if (then_effect) {
+					if (then_effect.block?.d) remove(then_effect.block.d);
+					destroy_effect(then_effect);
 				}
-			} else {
-				error = UNINITIALIZED;
-				resolved_value = promise;
-				pending = false;
-				render();
-			}
-		},
-		block,
-		false
-	);
-	await_effect.ondestroy = () => {
-		let render = current_render;
-		latest_token = {};
-		while (render !== null) {
-			const dom = render.d;
-			if (dom !== null) {
-				remove(dom);
-			}
-			const effect = render.e;
-			if (effect !== null) {
-				destroy_effect(effect);
+
+				then_effect = render_effect(() => then_fn(anchor, input), {}, true);
 			}
-			render = render.p;
 		}
+	}, block);
+
+	branch.ondestroy = () => {
+		// TODO this sucks, tidy it up
+		if (pending_effect?.block?.d) remove(pending_effect.block.d);
+		if (then_effect?.block?.d) remove(then_effect.block.d);
+		if (catch_effect?.block?.d) remove(catch_effect.block.d);
 	};
-	block.e = await_effect;
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/css-props.js b/packages/svelte/src/internal/client/dom/blocks/css-props.js
index aee98617d7..5bfb41dd91 100644
--- a/packages/svelte/src/internal/client/dom/blocks/css-props.js
+++ b/packages/svelte/src/internal/client/dom/blocks/css-props.js
@@ -2,7 +2,7 @@ import { namespace_svg } from '../../../../constants.js';
 import { current_hydration_fragment, hydrate_block_anchor, hydrating } from '../hydration.js';
 import { empty } from '../operations.js';
 import { render_effect } from '../../reactivity/effects.js';
-import { insert, remove } from '../reconciler.js';
+import { remove } from '../reconciler.js';
 
 /**
  * @param {Element | Text | Comment} anchor
@@ -33,7 +33,7 @@ export function css_props(anchor, is_html, props, component) {
 			tag = document.createElementNS(namespace_svg, 'g');
 		}
 
-		insert(tag, null, anchor);
+		anchor.before(tag);
 		component_anchor = empty();
 		tag.appendChild(component_anchor);
 	}
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index fd3cf82ae3..b815fdc8b0 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -6,7 +6,6 @@ import {
 	EACH_ITEM_REACTIVE,
 	EACH_KEYED
 } from '../../../../constants.js';
-import { noop } from '../../../common.js';
 import {
 	current_hydration_fragment,
 	get_hydration_fragment,
@@ -14,419 +13,297 @@ import {
 	hydrating,
 	set_current_hydration_fragment
 } from '../hydration.js';
-import { clear_text_content, empty } from '../operations.js';
+import { empty } from '../operations.js';
 import { insert, remove } from '../reconciler.js';
-import { current_block, execute_effect } from '../../runtime.js';
-import { destroy_effect, render_effect } from '../../reactivity/effects.js';
+import { current_block, untrack } from '../../runtime.js';
+import {
+	destroy_effect,
+	pause_effect,
+	render_effect,
+	resume_effect,
+	user_effect
+} from '../../reactivity/effects.js';
 import { source, mutable_source, set } from '../../reactivity/sources.js';
-import { trigger_transitions } from '../elements/transitions.js';
 import { is_array, is_frozen, map_get, map_set } from '../../utils.js';
-import { EACH_BLOCK, EACH_ITEM_BLOCK, STATE_SYMBOL } from '../../constants.js';
+import { STATE_SYMBOL } from '../../constants.js';
 
-const NEW_BLOCK = -1;
-const MOVED_BLOCK = 99999999;
-const LIS_BLOCK = -2;
+var NEW_BLOCK = -1;
+var LIS_BLOCK = -2;
 
 /**
- * @param {number} flags
- * @param {Element | Comment} anchor
- * @returns {import('../../types.js').EachBlock}
+ * The row of a keyed each block that is currently updating. We track this
+ * so that `animate:` directives have something to attach themselves to
+ * @type {import('#client').EachItemBlock | null}
  */
-export function create_each_block(flags, anchor) {
-	return {
-		// anchor
-		a: anchor,
-		// dom
-		d: null,
-		// flags
-		f: flags,
-		// items
-		v: [],
-		// effect
-		e: null,
-		p: /** @type {import('../../types.js').Block} */ (current_block),
-		// transition
-		r: null,
-		// transitions
-		s: [],
-		// type
-		t: EACH_BLOCK
-	};
-}
+export let current_each_item_block = null;
 
-/**
- * @param {any | import('../../types.js').Value<any>} item
- * @param {number | import('../../types.js').Value<number>} index
- * @param {null | unknown} key
- * @returns {import('../../types.js').EachItemBlock}
- */
-export function create_each_item_block(item, index, key) {
-	return {
-		// animate transition
-		a: null,
-		// dom
-		d: null,
-		// effect
-		e: null,
-		// index
-		i: index,
-		// key
-		k: key,
-		// item
-		v: item,
-		// parent
-		p: /** @type {import('../../types.js').EachBlock} */ (current_block),
-		// transition
-		r: null,
-		// transitions
-		s: null,
-		// type
-		t: EACH_ITEM_BLOCK
-	};
+/** @param {import('#client').EachItemBlock | null} block */
+export function set_current_each_item_block(block) {
+	current_each_item_block = block;
 }
 
 /**
  * @template V
- * @param {Element | Comment} anchor_node
- * @param {() => V[]} collection
+ * @param {Element | Comment} anchor The next sibling node, or the parent node if this is a 'controlled' block
+ * @param {() => V[]} get_collection
  * @param {number} flags
- * @param {null | ((item: V) => string)} key_fn
+ * @param {null | ((item: V) => string)} get_key
  * @param {(anchor: null, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
  * @param {null | ((anchor: Node) => void)} fallback_fn
  * @param {typeof reconcile_indexed_array | reconcile_tracked_array} reconcile_fn
  * @returns {void}
  */
-function each(anchor_node, collection, flags, key_fn, render_fn, fallback_fn, reconcile_fn) {
-	const is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
-	const block = create_each_block(flags, anchor_node);
-
-	/** @type {null | import('../../types.js').Render} */
-	let current_fallback = null;
-	hydrate_block_anchor(anchor_node, is_controlled);
-
-	/** @type {V[]} */
-	let array;
-
-	/** @type {Array<string> | null} */
-	let keys = null;
-
-	/** @type {null | import('../../types.js').Effect} */
-	let render = null;
-
-	/**
-	 * Whether or not there was a "rendered fallback but want to render items" (or vice versa) hydration mismatch.
-	 * Needs to be a `let` or else it isn't treeshaken out
-	 */
-	let mismatch = false;
-
-	block.r =
-		/** @param {import('../../types.js').Transition} transition */
-		(transition) => {
-			const fallback = /** @type {import('../../types.js').Render} */ (current_fallback);
-			const transitions = fallback.s;
-			transitions.add(transition);
-			transition.f(() => {
-				transitions.delete(transition);
-				if (transitions.size === 0) {
-					if (fallback.e !== null) {
-						if (fallback.d !== null) {
-							remove(fallback.d);
-							fallback.d = null;
-						}
-						destroy_effect(fallback.e);
-						fallback.e = null;
-					}
-				}
-			});
-		};
-
-	const create_fallback_effect = () => {
-		/** @type {import('../../types.js').Render} */
-		const fallback = {
-			d: null,
-			e: null,
-			s: new Set(),
-			p: current_fallback
-		};
-		// Managed effect
-		const effect = render_effect(
-			() => {
-				const dom = block.d;
-				if (dom !== null) {
-					remove(dom);
-					block.d = null;
-				}
-				let anchor = block.a;
-				const is_controlled = (block.f & EACH_IS_CONTROLLED) !== 0;
-				if (is_controlled) {
-					// If the each block is controlled, then the anchor node will be the surrounding
-					// element in which the each block is rendered, which requires certain handling
-					// depending on whether we're in hydration mode or not
-					if (!hydrating) {
-						// Create a new anchor on the fly because there's none due to the optimization
-						anchor = empty();
-						block.a.appendChild(anchor);
-					} else {
-						// In case of hydration the anchor will be the first child of the surrounding element
-						anchor = /** @type {Comment} */ (anchor.firstChild);
-					}
-				}
-				/** @type {(anchor: Node) => void} */ (fallback_fn)(anchor);
-				fallback.d = block.d;
-				block.d = null;
-			},
-			block,
-			true
-		);
-		fallback.e = effect;
-		current_fallback = fallback;
+function each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, reconcile_fn) {
+	/** @type {import('#client').EachBlock} */
+	var block = {
+		// dom
+		d: null,
+		// flags
+		f: flags,
+		// items
+		v: [],
+		// effect
+		e: null,
+		p: /** @type {import('#client').Block} */ (current_block)
 	};
 
-	/** @param {import('../../types.js').EachBlock} block */
-	const render_each = (block) => {
-		const flags = block.f;
-		const is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
-		const anchor_node = block.a;
-		reconcile_fn(array, block, anchor_node, is_controlled, render_fn, flags, true, keys);
-	};
+	var is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
+	hydrate_block_anchor(is_controlled ? /** @type {Node} */ (anchor.firstChild) : anchor);
 
-	const each = render_effect(
+	if (is_controlled) {
+		var parent_node = /** @type {Element} */ (anchor);
+		parent_node.append((anchor = empty()));
+	}
+
+	/** @type {import('#client').Effect | null} */
+	var fallback = null;
+
+	var effect = render_effect(
 		() => {
-			/** @type {V[]} */
-			const maybe_array = collection();
-			array = is_array(maybe_array)
-				? maybe_array
-				: maybe_array == null
+			var collection = get_collection();
+
+			var array = is_array(collection)
+				? collection
+				: collection == null
 					? []
-					: Array.from(maybe_array);
+					: Array.from(collection);
+
+			var keys = get_key === null ? array : array.map(get_key);
+
+			var length = array.length;
+
+			// If we are working with an array that isn't proxied or frozen, then remove strict equality and ensure the items
+			// are treated as reactive, so they get wrapped in a signal.
+			var flags = block.f;
+			if ((flags & EACH_IS_STRICT_EQUALS) !== 0 && !is_frozen(array) && !(STATE_SYMBOL in array)) {
+				flags ^= EACH_IS_STRICT_EQUALS;
 
-			if (key_fn !== null) {
-				keys = array.map(key_fn);
-			} else if ((flags & EACH_KEYED) === 0) {
-				array.map(noop);
+				// Additionally if we're in an keyed each block, we'll need ensure the items are all wrapped in signals.
+				if ((flags & EACH_KEYED) !== 0 && (flags & EACH_ITEM_REACTIVE) === 0) {
+					flags ^= EACH_ITEM_REACTIVE;
+				}
 			}
 
-			const length = array.length;
+			/** `true` if there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
+			let mismatch = false;
 
 			if (hydrating) {
-				const is_each_else_comment =
+				var is_else =
 					/** @type {Comment} */ (current_hydration_fragment?.[0])?.data === 'ssr:each_else';
-				// Check for hydration mismatch which can happen if the server renders the each fallback
-				// but the client has items, or vice versa. If so, remove everything inside the anchor and start fresh.
-				if ((is_each_else_comment && length) || (!is_each_else_comment && !length)) {
+
+				if (is_else !== (length === 0)) {
+					// hydration mismatch — remove the server-rendered DOM and start over
 					remove(current_hydration_fragment);
 					set_current_hydration_fragment(null);
 					mismatch = true;
-				} else if (is_each_else_comment) {
+				} else if (is_else) {
 					// Remove the each_else comment node or else it will confuse the subsequent hydration algorithm
-					/** @type {import('../../types.js').TemplateNode[]} */ (
-						current_hydration_fragment
-					).shift();
+					/** @type {import('#client').TemplateNode[]} */ (current_hydration_fragment).shift();
+				}
+			}
+
+			// this is separate to the previous block because `hydrating` might change
+			if (hydrating) {
+				var b_blocks = [];
+
+				// Hydrate block
+				var hydration_list = /** @type {import('#client').TemplateNode[]} */ (
+					current_hydration_fragment
+				);
+				var hydrating_node = hydration_list[0];
+
+				for (var i = 0; i < length; i++) {
+					var fragment = get_hydration_fragment(hydrating_node);
+					set_current_hydration_fragment(fragment);
+					if (!fragment) {
+						// If fragment is null, then that means that the server rendered less items than what
+						// the client code specifies -> break out and continue with client-side node creation
+						mismatch = true;
+						break;
+					}
+
+					b_blocks[i] = create_block(array[i], keys?.[i], i, render_fn, flags);
+
+					// TODO helperise this
+					hydrating_node = /** @type {import('#client').TemplateNode} */ (
+						/** @type {Node} */ (
+							/** @type {Node} */ (fragment[fragment.length - 1] || hydrating_node).nextSibling
+						).nextSibling
+					);
 				}
+
+				remove_excess_hydration_nodes(hydration_list, hydrating_node);
+
+				block.v = b_blocks;
+			}
+
+			if (!hydrating) {
+				// TODO add 'empty controlled block' optimisation here
+				reconcile_fn(array, block, anchor, render_fn, flags, keys);
 			}
 
 			if (fallback_fn !== null) {
 				if (length === 0) {
-					if (block.v.length !== 0 || render === null) {
-						render_each(block);
-						create_fallback_effect();
-						return;
-					}
-				} else if (block.v.length === 0 && current_fallback !== null) {
-					const fallback = current_fallback;
-					const transitions = fallback.s;
-					if (transitions.size === 0) {
-						if (fallback.d !== null) {
-							remove(fallback.d);
-							fallback.d = null;
-						}
+					if (fallback) {
+						resume_effect(fallback);
 					} else {
-						trigger_transitions(transitions, 'out');
+						fallback = render_effect(
+							() => {
+								fallback_fn(anchor);
+								var dom = block.d; // TODO would be nice if this was just returned from the managed effect function...
+
+								return () => {
+									if (dom !== null) {
+										remove(dom);
+										dom = null;
+									}
+								};
+							},
+							block,
+							true
+						);
 					}
+				} else if (fallback !== null) {
+					pause_effect(fallback, () => {
+						fallback = null;
+					});
 				}
 			}
 
-			if (render !== null) {
-				execute_effect(render);
+			if (mismatch) {
+				// Set a fragment so that Svelte continues to operate in hydration mode
+				set_current_hydration_fragment([]);
 			}
 		},
 		block,
 		false
 	);
 
-	render = render_effect(render_each, block, true);
-
-	if (mismatch) {
-		// Set a fragment so that Svelte continues to operate in hydration mode
-		set_current_hydration_fragment([]);
-	}
-
-	each.ondestroy = () => {
-		const flags = block.f;
-		const anchor_node = block.a;
-		const is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
-		let fallback = current_fallback;
-		while (fallback !== null) {
-			const dom = fallback.d;
-			if (dom !== null) {
-				remove(dom);
-			}
-			const effect = fallback.e;
-			if (effect !== null) {
-				destroy_effect(effect);
+	effect.ondestroy = () => {
+		for (var b of block.v) {
+			if (b.d !== null) {
+				destroy_effect(b.e);
+				remove(b.d);
 			}
-			fallback = fallback.p;
 		}
-		// Clear the array
-		reconcile_fn([], block, anchor_node, is_controlled, render_fn, flags, false, keys);
-		destroy_effect(/** @type {import('#client').Effect} */ (render));
+
+		if (fallback) destroy_effect(fallback);
 	};
 
-	block.e = each;
+	block.e = effect;
 }
 
 /**
  * @template V
- * @param {Element | Comment} anchor_node
- * @param {() => V[]} collection
+ * @param {Element | Comment} anchor
+ * @param {() => V[]} get_collection
  * @param {number} flags
- * @param {null | ((item: V) => string)} key_fn
+ * @param {null | ((item: V) => string)} get_key
  * @param {(anchor: null, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
  * @param {null | ((anchor: Node) => void)} fallback_fn
  * @returns {void}
  */
-export function each_keyed(anchor_node, collection, flags, key_fn, render_fn, fallback_fn) {
-	each(anchor_node, collection, flags, key_fn, render_fn, fallback_fn, reconcile_tracked_array);
+export function each_keyed(anchor, get_collection, flags, get_key, render_fn, fallback_fn) {
+	each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, reconcile_tracked_array);
 }
 
 /**
  * @template V
- * @param {Element | Comment} anchor_node
- * @param {() => V[]} collection
+ * @param {Element | Comment} anchor
+ * @param {() => V[]} get_collection
  * @param {number} flags
  * @param {(anchor: null, item: V, index: import('#client').MaybeSource<number>) => void} render_fn
  * @param {null | ((anchor: Node) => void)} fallback_fn
  * @returns {void}
  */
-export function each_indexed(anchor_node, collection, flags, render_fn, fallback_fn) {
-	each(anchor_node, collection, flags, null, render_fn, fallback_fn, reconcile_indexed_array);
+export function each_indexed(anchor, get_collection, flags, render_fn, fallback_fn) {
+	each(anchor, get_collection, flags, null, render_fn, fallback_fn, reconcile_indexed_array);
 }
 
 /**
  * @template V
  * @param {Array<V>} array
- * @param {import('../../types.js').EachBlock} each_block
- * @param {Element | Comment | Text} dom
- * @param {boolean} is_controlled
- * @param {(anchor: null, item: V, index: number | import('../../types.js').Source<number>) => void} render_fn
+ * @param {import('#client').EachBlock} each_block
+ * @param {Element | Comment | Text} anchor
+ * @param {(anchor: null, item: V, index: number | import('#client').Source<number>) => void} render_fn
  * @param {number} flags
- * @param {boolean} apply_transitions
  * @returns {void}
  */
-function reconcile_indexed_array(
-	array,
-	each_block,
-	dom,
-	is_controlled,
-	render_fn,
-	flags,
-	apply_transitions
-) {
-	// If we are working with an array that isn't proxied or frozen, then remove strict equality and ensure the items
-	// are treated as reactive, so they get wrapped in a signal.
-	if ((flags & EACH_IS_STRICT_EQUALS) !== 0 && !is_frozen(array) && !(STATE_SYMBOL in array)) {
-		flags ^= EACH_IS_STRICT_EQUALS;
-	}
+function reconcile_indexed_array(array, each_block, anchor, render_fn, flags) {
 	var a_blocks = each_block.v;
-	var active_transitions = each_block.s;
 
-	/** @type {number | void} */
 	var a = a_blocks.length;
-
-	/** @type {number} */
 	var b = array.length;
-	var length = Math.max(a, b);
-	var index = 0;
+	var min = Math.min(a, b);
 
-	/** @type {Array<import('../../types.js').EachItemBlock>} */
-	var b_blocks;
-	var block;
+	/** @type {typeof a_blocks} */
+	var b_blocks = Array(b);
 
-	if (active_transitions.length !== 0) {
-		destroy_active_transition_blocks(active_transitions);
+	var block;
+	var item;
+
+	// update items
+	for (var i = 0; i < min; i += 1) {
+		item = array[i];
+		block = a_blocks[i];
+		b_blocks[i] = block;
+		update_block(block, item, i, flags);
+		resume_effect(block.e);
 	}
 
-	if (b === 0) {
-		b_blocks = [];
-		// Remove old blocks
-		if (is_controlled && a !== 0) {
-			clear_text_content(dom);
-		}
-		while (index < length) {
-			block = a_blocks[index++];
-			destroy_each_item_block(block, active_transitions, apply_transitions, is_controlled);
+	if (b > a) {
+		// add items
+		for (; i < b; i += 1) {
+			item = array[i];
+			block = create_block(item, null, i, render_fn, flags);
+			b_blocks[i] = block;
+			insert_block(block, anchor);
 		}
-	} else {
-		var item;
-		/** `true` if there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
-		let mismatch = false;
-		b_blocks = Array(b);
-		if (hydrating) {
-			// Hydrate block
-			var hydration_list = /** @type {import('../../types.js').TemplateNode[]} */ (
-				current_hydration_fragment
-			);
-			var hydrating_node = hydration_list[0];
-			for (; index < length; index++) {
-				var fragment = get_hydration_fragment(hydrating_node);
-				set_current_hydration_fragment(fragment);
-				if (!fragment) {
-					// If fragment is null, then that means that the server rendered less items than what
-					// the client code specifies -> break out and continue with client-side node creation
-					mismatch = true;
-					break;
-				}
 
-				item = array[index];
-				block = each_item_block(item, null, index, render_fn, flags);
-				b_blocks[index] = block;
+		each_block.v = b_blocks;
+	} else if (a > b) {
+		// remove items
+		var remaining = a - b;
 
-				hydrating_node = /** @type {import('../../types.js').TemplateNode} */ (
-					/** @type {Node} */ (/** @type {Node} */ (fragment[fragment.length - 1]).nextSibling)
-						.nextSibling
-				);
+		var clear = () => {
+			for (var i = b; i < a; i += 1) {
+				var block = a_blocks[i];
+				if (block.d) remove(block.d);
 			}
 
-			remove_excess_hydration_nodes(hydration_list, hydrating_node);
-		}
+			each_block.v = each_block.v.slice(0, b);
+		};
 
-		for (; index < length; index++) {
-			if (index >= a) {
-				// Add block
-				item = array[index];
-				block = each_item_block(item, null, index, render_fn, flags);
-				b_blocks[index] = block;
-				insert_each_item_block(block, dom, is_controlled, null);
-			} else if (index >= b) {
-				// Remove block
-				block = a_blocks[index];
-				destroy_each_item_block(block, active_transitions, apply_transitions);
-			} else {
-				// Update block
-				item = array[index];
-				block = a_blocks[index];
-				b_blocks[index] = block;
-				update_each_item_block(block, item, index, flags);
+		var check = () => {
+			if (--remaining === 0) {
+				clear();
 			}
-		}
+		};
 
-		if (mismatch) {
-			// Server rendered less nodes than the client -> set empty array so that Svelte continues to operate in hydration mode
-			set_current_hydration_fragment([]);
+		for (; i < a; i += 1) {
+			pause_effect(a_blocks[i].e, check);
 		}
 	}
-
-	each_block.v = b_blocks;
 }
 
 /**
@@ -435,252 +312,193 @@ function reconcile_indexed_array(
  * https://github.com/localvoid/ivi/blob/9f1bd0918f487da5b131941228604763c5d8ef56/packages/ivi/src/client/core.ts#L968
  * @template V
  * @param {Array<V>} array
- * @param {import('../../types.js').EachBlock} each_block
- * @param {Element | Comment | Text} dom
- * @param {boolean} is_controlled
- * @param {(anchor: null, item: V, index: number | import('../../types.js').Source<number>) => void} render_fn
+ * @param {import('#client').EachBlock} each_block
+ * @param {Element | Comment | Text} anchor
+ * @param {(anchor: null, item: V, index: number | import('#client').Source<number>) => void} render_fn
  * @param {number} flags
- * @param {boolean} apply_transitions
- * @param {Array<string> | null} keys
+ * @param {any[]} keys
  * @returns {void}
  */
-function reconcile_tracked_array(
-	array,
-	each_block,
-	dom,
-	is_controlled,
-	render_fn,
-	flags,
-	apply_transitions,
-	keys
-) {
-	// If we are working with an array that isn't proxied or frozen, then remove strict equality and ensure the items
-	// are treated as reactive, so they get wrapped in a signal.
-	if ((flags & EACH_IS_STRICT_EQUALS) !== 0 && !is_frozen(array) && !(STATE_SYMBOL in array)) {
-		flags ^= EACH_IS_STRICT_EQUALS;
-		// Additionally as we're in an keyed each block, we'll need ensure the itens are all wrapped in signals.
-		if ((flags & EACH_ITEM_REACTIVE) === 0) {
-			flags ^= EACH_ITEM_REACTIVE;
-		}
-	}
+function reconcile_tracked_array(array, each_block, anchor, render_fn, flags, keys) {
 	var a_blocks = each_block.v;
-	const is_computed_key = keys !== null;
-	var active_transitions = each_block.s;
 
-	/** @type {number | void} */
 	var a = a_blocks.length;
-
-	/** @type {number} */
 	var b = array.length;
 
-	/** @type {Array<import('../../types.js').EachItemBlock>} */
-	var b_blocks;
+	/** @type {Array<import('#client').EachItemBlock>} */
+	var b_blocks = Array(b);
+
+	var is_animated = (flags & EACH_IS_ANIMATED) !== 0;
+	var should_update = (flags & (EACH_ITEM_REACTIVE | EACH_INDEX_REACTIVE)) !== 0;
+	var start = 0;
 	var block;
 
-	if (active_transitions.length !== 0) {
-		destroy_active_transition_blocks(active_transitions);
-	}
+	/** @type {Array<import('#client').EachItemBlock>} */
+	var to_destroy = [];
 
-	if (b === 0) {
-		b_blocks = [];
-		// Remove old blocks
-		if (is_controlled && a !== 0) {
-			clear_text_content(dom);
+	// Step 1 — trim common suffix
+	while (a > 0 && b > 0 && a_blocks[a - 1].k === keys[b - 1]) {
+		block = b_blocks[--b] = a_blocks[--a];
+		anchor = get_first_child(block);
+
+		resume_effect(block.e);
+
+		if (should_update) {
+			update_block(block, array[b], b, flags);
 		}
-		while (a > 0) {
-			block = a_blocks[--a];
-			destroy_each_item_block(block, active_transitions, apply_transitions, is_controlled);
+	}
+
+	// Step 2 — trim common prefix
+	while (start < a && start < b && a_blocks[start].k === keys[start]) {
+		block = b_blocks[start] = a_blocks[start];
+
+		resume_effect(block.e);
+
+		if (should_update) {
+			update_block(block, array[start], start, flags);
 		}
-	} else {
-		var a_end = a - 1;
-		var b_end = b - 1;
-		var key;
-		var item;
-		var idx;
-		/** `true` if there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
-		let mismatch = false;
-		b_blocks = Array(b);
-		if (hydrating) {
-			// Hydrate block
-			var fragment;
-			var hydration_list = /** @type {import('../../types.js').TemplateNode[]} */ (
-				current_hydration_fragment
-			);
-			var hydrating_node = hydration_list[0];
-			while (b > 0) {
-				fragment = get_hydration_fragment(hydrating_node);
-				set_current_hydration_fragment(fragment);
-				if (!fragment) {
-					// If fragment is null, then that means that the server rendered less items than what
-					// the client code specifies -> break out and continue with client-side node creation
-					mismatch = true;
-					break;
-				}
 
-				idx = b_end - --b;
-				item = array[idx];
-				key = is_computed_key ? keys[idx] : item;
-				block = each_item_block(item, key, idx, render_fn, flags);
-				b_blocks[idx] = block;
-
-				// Get the <!--ssr:..--> tag of the next item in the list
-				// The fragment array can be empty if each block has no content
-				hydrating_node = /** @type {import('../../types.js').TemplateNode} */ (
-					/** @type {Node} */ ((fragment[fragment.length - 1] || hydrating_node).nextSibling)
-						.nextSibling
-				);
-			}
+		start += 1;
+	}
 
-			remove_excess_hydration_nodes(hydration_list, hydrating_node);
+	// Step 3 — update
+	if (start === a) {
+		// add only
+		while (start < b) {
+			block = create_block(array[start], keys[start], start, render_fn, flags);
+			b_blocks[start++] = block;
+			insert_block(block, anchor);
+		}
+	} else if (start === b) {
+		// remove only
+		while (start < a) {
+			to_destroy.push(a_blocks[start++]);
+		}
+	} else {
+		// reconcile
+		var moved = false;
+		var sources = new Int32Array(b - start);
+		var indexes = new Map();
+		var i;
+		var index;
+		var last_block;
+		var last_sibling;
+
+		// store the indexes of each block in the new world
+		for (i = start; i < b; i += 1) {
+			sources[i - start] = NEW_BLOCK;
+			map_set(indexes, keys[i], i);
 		}
 
-		if (a === 0) {
-			// Create new blocks
-			while (b > 0) {
-				idx = b_end - --b;
-				item = array[idx];
-				key = is_computed_key ? keys[idx] : item;
-				block = each_item_block(item, key, idx, render_fn, flags);
-				b_blocks[idx] = block;
-				insert_each_item_block(block, dom, is_controlled, null);
-			}
-		} else {
-			var is_animated = (flags & EACH_IS_ANIMATED) !== 0;
-			var should_update_block =
-				(flags & (EACH_ITEM_REACTIVE | EACH_INDEX_REACTIVE)) !== 0 || is_animated;
-			var start = 0;
-
-			/** @type {null | Text | Element | Comment} */
-			var sibling = null;
-			item = array[b_end];
-			key = is_computed_key ? keys[b_end] : item;
-			// Step 1
-			outer: while (true) {
-				// From the end
-				while (a_blocks[a_end].k === key) {
-					block = a_blocks[a_end--];
-					item = array[b_end];
-					if (should_update_block) {
-						update_each_item_block(block, item, b_end, flags);
-					}
-					sibling = get_first_child(block);
-					b_blocks[b_end] = block;
-					if (start > --b_end || start > a_end) {
-						break outer;
-					}
-					key = is_computed_key ? keys[b_end] : item;
-				}
-				item = array[start];
-				key = is_computed_key ? keys[start] : item;
-				// At the start
-				while (start <= a_end && start <= b_end && a_blocks[start].k === key) {
-					item = array[start];
-					block = a_blocks[start];
-					if (should_update_block) {
-						update_each_item_block(block, item, start, flags);
-					}
-					b_blocks[start] = block;
-					++start;
-					key = is_computed_key ? keys[start] : array[start];
+		/** @type {Array<import('#client').EachItemBlock>} */
+		var to_animate = [];
+		if (is_animated) {
+			// for all blocks that were in both the old and the new list,
+			// measure them and store them in `to_animate` so we can
+			// apply animations once the DOM has been updated
+			for (i = 0; i < a_blocks.length; i += 1) {
+				block = a_blocks[i];
+				if (indexes.has(block.k)) {
+					block.a?.measure();
+					to_animate.push(block);
 				}
-				break;
 			}
-			// Step 2
-			if (start > a_end) {
-				while (b_end >= start) {
-					item = array[b_end];
-					key = is_computed_key ? keys[b_end] : item;
-					block = each_item_block(item, key, b_end, render_fn, flags);
-					b_blocks[b_end--] = block;
-					sibling = insert_each_item_block(block, dom, is_controlled, sibling);
-				}
-			} else if (start > b_end) {
-				b = start;
-				do {
-					if ((block = a_blocks[b++]) !== null) {
-						destroy_each_item_block(block, active_transitions, apply_transitions);
-					}
-				} while (b <= a_end);
+		}
+
+		// populate the `sources` array for each old block with
+		// its new index, so that we can calculate moves
+		for (i = start; i < a; i += 1) {
+			block = a_blocks[i];
+			index = map_get(indexes, block.k);
+
+			resume_effect(block.e);
+
+			if (index === undefined) {
+				to_destroy.push(block);
 			} else {
-				// Step 3
-				var pos = 0;
-				var b_length = b_end - start + 1;
-				var sources = new Int32Array(b_length);
-				var item_index = new Map();
-				for (b = 0; b < b_length; ++b) {
-					a = b + start;
-					sources[b] = NEW_BLOCK;
-					item = array[a];
-					key = is_computed_key ? keys[a] : item;
-					map_set(item_index, key, a);
-				}
-				// If keys are animated, we need to do updates before actual moves
+				moved = true;
+				sources[index - start] = i;
+				b_blocks[index] = block;
+
 				if (is_animated) {
-					for (b = start; b <= a_end; ++b) {
-						a = map_get(item_index, /** @type {V} */ (a_blocks[b].k));
-						if (a !== undefined) {
-							item = array[a];
-							block = a_blocks[b];
-							update_each_item_block(block, item, a, flags);
-						}
-					}
+					to_animate.push(block);
 				}
-				for (b = start; b <= a_end; ++b) {
-					a = map_get(item_index, /** @type {V} */ (a_blocks[b].k));
-					block = a_blocks[b];
-					if (a !== undefined) {
-						pos = pos < a ? a : MOVED_BLOCK;
-						sources[a - start] = b;
-						b_blocks[a] = block;
-					} else if (block !== null) {
-						destroy_each_item_block(block, active_transitions, apply_transitions);
-					}
-				}
-				// Step 4
-				if (pos === MOVED_BLOCK) {
-					mark_lis(sources);
-				}
-				var last_block;
-				var last_sibling;
-				var should_create;
-				while (b_length-- > 0) {
-					b_end = b_length + start;
-					a = sources[b_length];
-					should_create = a === -1;
-					item = array[b_end];
-					if (should_create) {
-						key = is_computed_key ? keys[b_end] : item;
-						block = each_item_block(item, key, b_end, render_fn, flags);
-					} else {
-						block = b_blocks[b_end];
-						if (!is_animated && should_update_block) {
-							update_each_item_block(block, item, b_end, flags);
-						}
-					}
-					if (should_create || (pos === MOVED_BLOCK && a !== LIS_BLOCK)) {
-						last_sibling = last_block === undefined ? sibling : get_first_child(last_block);
-						sibling = insert_each_item_block(block, dom, is_controlled, last_sibling);
-					}
-					b_blocks[b_end] = block;
-					last_block = block;
+			}
+		}
+
+		// if we need to move blocks (as opposed to just adding/removing),
+		// figure out how to do so efficiently (I would be lying if I said
+		// I fully understand this part)
+		if (moved) {
+			mark_lis(sources);
+		}
+
+		// working from the back, insert new or moved blocks
+		while (b-- > start) {
+			index = sources[b - start];
+			var insert = index === NEW_BLOCK;
+
+			if (insert) {
+				block = create_block(array[b], keys[b], b, render_fn, flags);
+			} else {
+				block = b_blocks[b];
+				if (should_update) {
+					update_block(block, array[b], b, flags);
 				}
 			}
+
+			if (insert || (moved && index !== LIS_BLOCK)) {
+				last_sibling = last_block === undefined ? anchor : get_first_child(last_block);
+				anchor = insert_block(block, last_sibling);
+			}
+
+			last_block = b_blocks[b] = block;
 		}
 
-		if (mismatch) {
-			// Server rendered less nodes than the client -> set empty array so that Svelte continues to operate in hydration mode
-			set_current_hydration_fragment([]);
+		if (to_animate.length > 0) {
+			// TODO we need to briefly take any outroing elements out of the flow, so that
+			// we can figure out the eventual destination of the animating elements
+			// - https://github.com/sveltejs/svelte/pull/10798#issuecomment-2013681778
+			// - https://svelte.dev/repl/6e891305e9644a7ca7065fa95c79d2d2?version=4.2.9
+			user_effect(() => {
+				untrack(() => {
+					for (block of to_animate) {
+						block.a?.apply();
+					}
+				});
+			});
 		}
 	}
 
-	each_block.v = b_blocks;
+	var remaining = to_destroy.length;
+	if (remaining > 0) {
+		var clear = () => {
+			for (block of to_destroy) {
+				if (block.d) remove(block.d);
+			}
+
+			each_block.v = b_blocks;
+		};
+
+		var check = () => {
+			if (--remaining === 0) {
+				clear();
+			}
+		};
+
+		for (block of to_destroy) {
+			pause_effect(block.e, check);
+		}
+	} else {
+		each_block.v = b_blocks;
+	}
 }
 
 /**
  * The server could have rendered more list items than the client specifies.
  * In that case, we need to remove the remaining server-rendered nodes.
- * @param {import('../../types.js').TemplateNode[]} hydration_list
- * @param {import('../../types.js').TemplateNode | null} next_node
+ * @param {import('#client').TemplateNode[]} hydration_list
+ * @param {import('#client').TemplateNode | null} next_node
  */
 function remove_excess_hydration_nodes(hydration_list, next_node) {
 	if (next_node === null) return;
@@ -764,28 +582,17 @@ function mark_lis(a) {
 }
 
 /**
- * @param {import('../../types.js').Block} block
- * @param {Element | Comment | Text} dom
- * @param {boolean} is_controlled
- * @param {null | Text | Element | Comment} sibling
+ * @param {import('#client').Block} block
+ * @param {Text | Element | Comment} sibling
  * @returns {Text | Element | Comment}
  */
-function insert_each_item_block(block, dom, is_controlled, sibling) {
-	var current = /** @type {import('../../types.js').TemplateNode} */ (block.d);
-
-	if (sibling === null) {
-		if (is_controlled) {
-			return insert(current, /** @type {Element} */ (dom), null);
-		} else {
-			return insert(current, /** @type {Element} */ (dom.parentNode), dom);
-		}
-	}
-
-	return insert(current, null, sibling);
+function insert_block(block, sibling) {
+	var current = /** @type {import('#client').TemplateNode} */ (block.d);
+	return insert(current, sibling);
 }
 
 /**
- * @param {import('../../types.js').Block} block
+ * @param {import('#client').Block} block
  * @returns {Text | Element | Comment}
  */
 function get_first_child(block) {
@@ -799,144 +606,73 @@ function get_first_child(block) {
 }
 
 /**
- * @param {Array<import('../../types.js').EachItemBlock>} active_transitions
- * @returns {void}
- */
-function destroy_active_transition_blocks(active_transitions) {
-	var length = active_transitions.length;
-
-	if (length > 0) {
-		var i = 0;
-		var block;
-		var transition;
-
-		for (; i < length; i++) {
-			block = active_transitions[i];
-			transition = block.r;
-			if (transition !== null) {
-				block.r = null;
-				destroy_each_item_block(block, null, false);
-			}
-		}
-
-		active_transitions.length = 0;
-	}
-}
-
-/**
- * @param {import('../../types.js').Block} block
- * @returns {Text | Element | Comment}
- */
-export function get_first_element(block) {
-	const current = block.d;
-
-	if (is_array(current)) {
-		for (let i = 0; i < current.length; i++) {
-			const node = current[i];
-			if (node.nodeType !== 8) {
-				return node;
-			}
-		}
-	}
-
-	return /** @type {Text | Element | Comment} */ (current);
-}
-
-/**
- * @param {import('../../types.js').EachItemBlock} block
+ * @param {import('#client').EachItemBlock} block
  * @param {any} item
  * @param {number} index
  * @param {number} type
  * @returns {void}
  */
-function update_each_item_block(block, item, index, type) {
-	const block_v = block.v;
+function update_block(block, item, index, type) {
 	if ((type & EACH_ITEM_REACTIVE) !== 0) {
-		set(block_v, item);
-	}
-	const transitions = block.s;
-	const index_is_reactive = (type & EACH_INDEX_REACTIVE) !== 0;
-	// Handle each item animations
-	const each_animation = block.a;
-	if (transitions !== null && (type & EACH_KEYED) !== 0 && each_animation !== null) {
-		each_animation(block, transitions);
+		set(block.v, item);
 	}
-	if (index_is_reactive) {
-		set(/** @type {import('../../types.js').Value<number>} */ (block.i), index);
+
+	if ((type & EACH_INDEX_REACTIVE) !== 0) {
+		set(/** @type {import('#client').Value<number>} */ (block.i), index);
 	} else {
 		block.i = index;
 	}
 }
 
-/**
- * @param {import('../../types.js').EachItemBlock} block
- * @param {null | Array<import('../../types.js').Block>} transition_block
- * @param {boolean} apply_transitions
- * @param {any} controlled
- * @returns {void}
- */
-export function destroy_each_item_block(
-	block,
-	transition_block,
-	apply_transitions,
-	controlled = false
-) {
-	const transitions = block.s;
-
-	if (apply_transitions && transitions !== null) {
-		// We might have pending key transitions, if so remove them first
-		for (let other of transitions) {
-			if (other.r === 'key') {
-				transitions.delete(other);
-			}
-		}
-		if (transitions.size === 0) {
-			block.s = null;
-		} else {
-			trigger_transitions(transitions, 'out');
-			if (transition_block !== null) {
-				transition_block.push(block);
-			}
-			return;
-		}
-	}
-	const dom = block.d;
-	if (!controlled && dom !== null) {
-		remove(dom);
-	}
-	destroy_effect(/** @type {import('#client').Effect} */ (block.e));
-}
-
 /**
  * @template V
  * @param {V} item
  * @param {unknown} key
  * @param {number} index
- * @param {(anchor: null, item: V, index: number | import('../../types.js').Value<number>) => void} render_fn
+ * @param {(anchor: null, item: V, index: number | import('#client').Value<number>) => void} render_fn
  * @param {number} flags
- * @returns {import('../../types.js').EachItemBlock}
+ * @returns {import('#client').EachItemBlock}
  */
-function each_item_block(item, key, index, render_fn, flags) {
-	const each_item_not_reactive = (flags & EACH_ITEM_REACTIVE) === 0;
+function create_block(item, key, index, render_fn, flags) {
+	var each_item_not_reactive = (flags & EACH_ITEM_REACTIVE) === 0;
 
-	const item_value = each_item_not_reactive
+	var item_value = each_item_not_reactive
 		? item
 		: (flags & EACH_IS_STRICT_EQUALS) !== 0
 			? source(item)
 			: mutable_source(item);
 
-	const index_value = (flags & EACH_INDEX_REACTIVE) === 0 ? index : source(index);
-	const block = create_each_item_block(item_value, index_value, key);
+	/** @type {import('#client').EachItemBlock} */
+	var block = {
+		a: null,
+		// dom
+		d: null,
+		// effect
+		// @ts-expect-error
+		e: null,
+		// index
+		i: (flags & EACH_INDEX_REACTIVE) === 0 ? index : source(index),
+		// key
+		k: key,
+		// item
+		v: item_value
+	};
 
-	const effect = render_effect(
-		/** @param {import('../../types.js').EachItemBlock} block */
-		(block) => {
-			render_fn(null, block.v, block.i);
-		},
-		block,
-		true
-	);
+	var previous_each_item_block = current_each_item_block;
 
-	block.e = effect;
-	return block;
+	try {
+		current_each_item_block = block;
+
+		block.e = render_effect(
+			() => {
+				render_fn(null, block.v, block.i);
+			},
+			block,
+			true
+		);
+
+		return block;
+	} finally {
+		current_each_item_block = previous_each_item_block;
+	}
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js
index a8292a9f02..82677d0bc4 100644
--- a/packages/svelte/src/internal/client/dom/blocks/if.js
+++ b/packages/svelte/src/internal/client/dom/blocks/if.js
@@ -1,4 +1,4 @@
-import { IF_BLOCK } from '../../constants.js';
+import { IS_ELSEIF } from '../../constants.js';
 import {
 	current_hydration_fragment,
 	hydrate_block_anchor,
@@ -6,50 +6,40 @@ import {
 	set_current_hydration_fragment
 } from '../hydration.js';
 import { remove } from '../reconciler.js';
-import { current_block, execute_effect } from '../../runtime.js';
-import { destroy_effect, render_effect } from '../../reactivity/effects.js';
-import { trigger_transitions } from '../elements/transitions.js';
+import { current_block } from '../../runtime.js';
+import {
+	destroy_effect,
+	pause_effect,
+	render_effect,
+	resume_effect
+} from '../../reactivity/effects.js';
 
 /** @returns {import('#client').IfBlock} */
 function create_if_block() {
 	return {
-		// alternate transitions
-		a: null,
-		// alternate effect
-		ae: null,
-		// consequent transitions
-		c: null,
-		// consequent effect
-		ce: null,
 		// dom
 		d: null,
 		// effect
 		e: null,
 		// parent
 		p: /** @type {import('#client').Block} */ (current_block),
-		// transition
-		r: null,
-		// type
-		t: IF_BLOCK,
 		// value
 		v: false
 	};
 }
 
 /**
- * @param {Comment} anchor_node
- * @param {() => boolean} condition_fn
+ * @param {Comment} anchor
+ * @param {() => boolean} get_condition
  * @param {(anchor: Node) => void} consequent_fn
  * @param {null | ((anchor: Node) => void)} alternate_fn
+ * @param {boolean} [elseif] True if this is an `{:else if ...}` block rather than an `{#if ...}`, as that affects which transitions are considered 'local'
  * @returns {void}
  */
-export function if_block(anchor_node, condition_fn, consequent_fn, alternate_fn) {
+export function if_block(anchor, get_condition, consequent_fn, alternate_fn, elseif = false) {
 	const block = create_if_block();
 
-	hydrate_block_anchor(anchor_node);
-
-	/** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
-	let mismatch = false;
+	hydrate_block_anchor(anchor);
 
 	/** @type {null | import('#client').TemplateNode | Array<import('#client').TemplateNode>} */
 	let consequent_dom = null;
@@ -57,134 +47,118 @@ export function if_block(anchor_node, condition_fn, consequent_fn, alternate_fn)
 	/** @type {null | import('#client').TemplateNode | Array<import('#client').TemplateNode>} */
 	let alternate_dom = null;
 
-	let has_mounted = false;
+	/** @type {import('#client').Effect | null} */
+	let consequent_effect = null;
 
-	/**
-	 * @type {import('#client').Effect | null}
-	 */
-	let current_branch_effect = null;
+	/** @type {import('#client').Effect | null} */
+	let alternate_effect = null;
 
-	/** @type {import('#client').Effect} */
-	let consequent_effect;
-
-	/** @type {import('#client').Effect} */
-	let alternate_effect;
+	/** @type {boolean | null} */
+	let condition = null;
 
 	const if_effect = render_effect(() => {
-		const result = !!condition_fn();
-
-		if (block.v !== result || !has_mounted) {
-			block.v = result;
-
-			if (has_mounted) {
-				const consequent_transitions = block.c;
-				const alternate_transitions = block.a;
-
-				if (result) {
-					if (alternate_transitions === null || alternate_transitions.size === 0) {
-						execute_effect(alternate_effect);
-					} else {
-						trigger_transitions(alternate_transitions, 'out');
-					}
-
-					if (consequent_transitions === null || consequent_transitions.size === 0) {
-						execute_effect(consequent_effect);
-					} else {
-						trigger_transitions(consequent_transitions, 'in');
-					}
-				} else {
-					if (consequent_transitions === null || consequent_transitions.size === 0) {
-						execute_effect(consequent_effect);
-					} else {
-						trigger_transitions(consequent_transitions, 'out');
-					}
-
-					if (alternate_transitions === null || alternate_transitions.size === 0) {
-						execute_effect(alternate_effect);
-					} else {
-						trigger_transitions(alternate_transitions, 'in');
-					}
-				}
-			} else if (hydrating) {
-				const comment_text = /** @type {Comment} */ (current_hydration_fragment?.[0])?.data;
-
-				if (
-					!comment_text ||
-					(comment_text === 'ssr:if:true' && !result) ||
-					(comment_text === 'ssr:if:false' && result)
-				) {
-					// Hydration mismatch: remove everything inside the anchor and start fresh.
-					// This could happen using when `{#if browser} .. {/if}` in SvelteKit.
-					remove(current_hydration_fragment);
-					set_current_hydration_fragment(null);
-					mismatch = true;
-				} else {
-					// Remove the ssr:if comment node or else it will confuse the subsequent hydration algorithm
-					current_hydration_fragment.shift();
-				}
+		if (condition === (condition = !!get_condition())) return;
+
+		/** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
+		let mismatch = false;
+
+		if (hydrating) {
+			const comment_text = /** @type {Comment} */ (current_hydration_fragment?.[0])?.data;
+
+			if (
+				!comment_text ||
+				(comment_text === 'ssr:if:true' && !condition) ||
+				(comment_text === 'ssr:if:false' && condition)
+			) {
+				// Hydration mismatch: remove everything inside the anchor and start fresh.
+				// This could happen using when `{#if browser} .. {/if}` in SvelteKit.
+				remove(current_hydration_fragment);
+				set_current_hydration_fragment(null);
+				mismatch = true;
+			} else {
+				// Remove the ssr:if comment node or else it will confuse the subsequent hydration algorithm
+				current_hydration_fragment.shift();
 			}
-
-			has_mounted = true;
 		}
 
-		// create these here so they have the correct parent/child relationship
-		consequent_effect ??= render_effect(
-			(/** @type {any} */ _, /** @type {import('#client').Effect | null} */ consequent_effect) => {
-				const result = block.v;
-
-				if (!result && consequent_dom !== null) {
-					remove(consequent_dom);
-					consequent_dom = null;
-				}
-
-				if (result && current_branch_effect !== consequent_effect) {
-					consequent_fn(anchor_node);
-					if (mismatch && current_branch_effect === null) {
-						// Set fragment so that Svelte continues to operate in hydration mode
-						set_current_hydration_fragment([]);
-					}
-					current_branch_effect = consequent_effect;
-					consequent_dom = block.d;
-				}
-
-				block.d = null;
-			},
-			block,
-			true
-		);
-		block.ce = consequent_effect;
-
-		alternate_effect ??= render_effect(
-			(/** @type {any} */ _, /** @type {import('#client').Effect | null} */ alternate_effect) => {
-				const result = block.v;
-
-				if (result && alternate_dom !== null) {
-					remove(alternate_dom);
-					alternate_dom = null;
-				}
-
-				if (!result && current_branch_effect !== alternate_effect) {
-					if (alternate_fn !== null) {
-						alternate_fn(anchor_node);
-					}
-
-					if (mismatch && current_branch_effect === null) {
-						// Set fragment so that Svelte continues to operate in hydration mode
-						set_current_hydration_fragment([]);
-					}
-
-					current_branch_effect = alternate_effect;
-					alternate_dom = block.d;
-				}
-				block.d = null;
-			},
-			block,
-			true
-		);
-		block.ae = alternate_effect;
+		if (condition) {
+			if (consequent_effect) {
+				resume_effect(consequent_effect);
+			} else {
+				consequent_effect = render_effect(
+					() => {
+						consequent_fn(anchor);
+						consequent_dom = block.d;
+
+						if (mismatch) {
+							// Set fragment so that Svelte continues to operate in hydration mode
+							set_current_hydration_fragment([]);
+						}
+
+						return () => {
+							// TODO make this unnecessary by linking the dom to the effect,
+							// and removing automatically on teardown
+							if (consequent_dom !== null) {
+								remove(consequent_dom);
+								consequent_dom = null;
+							}
+						};
+					},
+					block,
+					true
+				);
+			}
+
+			if (alternate_effect) {
+				pause_effect(alternate_effect, () => {
+					alternate_effect = null;
+					if (alternate_dom) remove(alternate_dom);
+				});
+			}
+		} else {
+			if (alternate_effect) {
+				resume_effect(alternate_effect);
+			} else if (alternate_fn) {
+				alternate_effect = render_effect(
+					() => {
+						alternate_fn(anchor);
+						alternate_dom = block.d;
+
+						if (mismatch) {
+							// Set fragment so that Svelte continues to operate in hydration mode
+							set_current_hydration_fragment([]);
+						}
+
+						return () => {
+							// TODO make this unnecessary by linking the dom to the effect,
+							// and removing automatically on teardown
+							if (alternate_dom !== null) {
+								remove(alternate_dom);
+								alternate_dom = null;
+							}
+						};
+					},
+					block,
+					true
+				);
+			}
+
+			if (consequent_effect) {
+				pause_effect(consequent_effect, () => {
+					consequent_effect = null;
+					if (consequent_dom) remove(consequent_dom);
+				});
+			}
+		}
 	}, block);
 
+	if (elseif) {
+		if_effect.f |= IS_ELSEIF;
+	}
+
 	if_effect.ondestroy = () => {
+		// TODO make this unnecessary by linking the dom to the effect,
+		// and removing automatically on teardown
 		if (consequent_dom !== null) {
 			remove(consequent_dom);
 		}
@@ -193,8 +167,12 @@ export function if_block(anchor_node, condition_fn, consequent_fn, alternate_fn)
 			remove(alternate_dom);
 		}
 
-		destroy_effect(consequent_effect);
-		destroy_effect(alternate_effect);
+		if (consequent_effect) {
+			destroy_effect(consequent_effect);
+		}
+		if (alternate_effect) {
+			destroy_effect(alternate_effect);
+		}
 	};
 
 	block.e = if_effect;
diff --git a/packages/svelte/src/internal/client/dom/blocks/key.js b/packages/svelte/src/internal/client/dom/blocks/key.js
index 4267b96546..7410c5b640 100644
--- a/packages/svelte/src/internal/client/dom/blocks/key.js
+++ b/packages/svelte/src/internal/client/dom/blocks/key.js
@@ -1,140 +1,76 @@
-import { UNINITIALIZED, KEY_BLOCK } from '../../constants.js';
+import { UNINITIALIZED } from '../../constants.js';
 import { hydrate_block_anchor } from '../hydration.js';
 import { remove } from '../reconciler.js';
-import { current_block, execute_effect } from '../../runtime.js';
-import { destroy_effect, render_effect } from '../../reactivity/effects.js';
-import { trigger_transitions } from '../elements/transitions.js';
+import { pause_effect, render_effect } from '../../reactivity/effects.js';
 import { safe_not_equal } from '../../reactivity/equality.js';
 
-/** @returns {import('../../types.js').KeyBlock} */
-function create_key_block() {
-	return {
-		// dom
-		d: null,
-		// effect
-		e: null,
-		// parent
-		p: /** @type {import('../../types.js').Block} */ (current_block),
-		// transition
-		r: null,
-		// type
-		t: KEY_BLOCK
-	};
-}
-
 /**
  * @template V
- * @param {Comment} anchor_node
- * @param {() => V} key
+ * @param {Comment} anchor
+ * @param {() => V} get_key
  * @param {(anchor: Node) => void} render_fn
  * @returns {void}
  */
-export function key_block(anchor_node, key, render_fn) {
-	const block = create_key_block();
+export function key_block(anchor, get_key, render_fn) {
+	const block = {};
 
-	/** @type {null | import('../../types.js').Render} */
-	let current_render = null;
-	hydrate_block_anchor(anchor_node);
+	hydrate_block_anchor(anchor);
 
 	/** @type {V | typeof UNINITIALIZED} */
-	let key_value = UNINITIALIZED;
-	let mounted = false;
-	block.r =
-		/**
-		 * @param {import('../../types.js').Transition} transition
-		 * @returns {void}
-		 */
-		(transition) => {
-			const render = /** @type {import('../../types.js').Render} */ (current_render);
-			const transitions = render.s;
-			transitions.add(transition);
-			transition.f(() => {
-				transitions.delete(transition);
-				if (transitions.size === 0) {
-					// If the current render has changed since, then we can remove the old render
-					// effect as it's stale.
-					if (current_render !== render && render.e !== null) {
-						if (render.d !== null) {
-							remove(render.d);
-							render.d = null;
-						}
-						destroy_effect(render.e);
-						render.e = null;
-					}
-				}
-			});
-		};
-	const create_render_effect = () => {
-		/** @type {import('../../types.js').Render} */
-		const render = {
-			d: null,
-			e: null,
-			s: new Set(),
-			p: current_render
-		};
-		const effect = render_effect(
-			() => {
-				render_fn(anchor_node);
-				render.d = block.d;
-				block.d = null;
-			},
-			block,
-			true,
-			true
-		);
-		render.e = effect;
-		current_render = render;
-	};
-	const render = () => {
-		const render = current_render;
-		if (render === null) {
-			create_render_effect();
-			return;
-		}
-		const transitions = render.s;
-		if (transitions.size === 0) {
-			if (render.d !== null) {
-				remove(render.d);
-				render.d = null;
-			}
-			if (render.e) {
-				execute_effect(render.e);
-			} else {
-				create_render_effect();
-			}
-		} else {
-			trigger_transitions(transitions, 'out');
-			create_render_effect();
-		}
-	};
+	let key = UNINITIALIZED;
+
+	/** @type {import('#client').Effect} */
+	let effect;
+
+	/**
+	 * Every time `key` changes, we create a new effect. Old effects are
+	 * removed from this set when they have fully transitioned out
+	 * @type {Set<import('#client').Effect>}
+	 */
+	let effects = new Set();
+
 	const key_effect = render_effect(
 		() => {
-			const prev_key_value = key_value;
-			key_value = key();
-			if (mounted && safe_not_equal(prev_key_value, key_value)) {
-				render();
+			if (safe_not_equal(key, (key = get_key()))) {
+				if (effect) {
+					var e = effect;
+					pause_effect(e, () => {
+						effects.delete(e);
+					});
+				}
+
+				effect = render_effect(
+					() => {
+						render_fn(anchor);
+
+						// @ts-expect-error TODO this should be unnecessary
+						const dom = block.d;
+
+						return () => {
+							if (dom !== null) {
+								remove(dom);
+							}
+						};
+					},
+					block,
+					true,
+					true
+				);
+
+				// @ts-expect-error TODO tidy up
+				effect.d = block.d;
+
+				effects.add(effect);
 			}
 		},
 		block,
 		false
 	);
-	// To ensure topological ordering of the key effect to the render effect,
-	// we trigger the effect after.
-	render();
-	mounted = true;
+
 	key_effect.ondestroy = () => {
-		let render = current_render;
-		while (render !== null) {
-			const dom = render.d;
-			if (dom !== null) {
-				remove(dom);
-			}
-			const effect = render.e;
-			if (effect !== null) {
-				destroy_effect(effect);
-			}
-			render = render.p;
+		for (const e of effects) {
+			// @ts-expect-error TODO tidy up. ondestroy should be totally unnecessary
+			if (e.d) remove(e.d);
 		}
 	};
-	block.e = key_effect;
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
index c07eca4d44..27d3011668 100644
--- a/packages/svelte/src/internal/client/dom/blocks/snippet.js
+++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -1,4 +1,3 @@
-import { SNIPPET_BLOCK } from '../../constants.js';
 import { render_effect } from '../../reactivity/effects.js';
 import { remove } from '../reconciler.js';
 import { current_block, untrack } from '../../runtime.js';
@@ -17,11 +16,7 @@ export function snippet(get_snippet, node, ...args) {
 		// parent
 		p: /** @type {import('#client').Block} */ (current_block),
 		// effect
-		e: null,
-		// transition
-		r: null,
-		// type
-		t: SNIPPET_BLOCK
+		e: null
 	};
 
 	render_effect(() => {
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
index 3f170462ef..a99eb4ce43 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
@@ -1,127 +1,69 @@
-import { DYNAMIC_COMPONENT_BLOCK } from '../../constants.js';
 import { hydrate_block_anchor } from '../hydration.js';
-import { destroy_effect, render_effect } from '../../reactivity/effects.js';
+import { pause_effect, render_effect } from '../../reactivity/effects.js';
 import { remove } from '../reconciler.js';
-import { current_block, execute_effect } from '../../runtime.js';
-import { trigger_transitions } from '../elements/transitions.js';
+
+// TODO this is very similar to `key`, can we deduplicate?
 
 /**
  * @template P
- * @param {Comment} anchor_node
- * @param {() => (props: P) => void} component_fn
- * @param {(component: (props: P) => void) => void} render_fn
+ * @template {(props: P) => void} C
+ * @param {Comment} anchor
+ * @param {() => C} get_component
+ * @param {(component: C) => void} render_fn
  * @returns {void}
  */
-export function component(anchor_node, component_fn, render_fn) {
-	/** @type {import('#client').DynamicComponentBlock} */
-	const block = {
-		// dom
-		d: null,
-		// effect
-		e: null,
-		// parent
-		p: /** @type {import('#client').Block} */ (current_block),
-		// transition
-		r: null,
-		// type
-		t: DYNAMIC_COMPONENT_BLOCK
-	};
+export function component(anchor, get_component, render_fn) {
+	const block = {};
 
-	/** @type {null | import('#client').Render} */
-	let current_render = null;
-	hydrate_block_anchor(anchor_node);
+	hydrate_block_anchor(anchor);
 
-	/** @type {null | ((props: P) => void)} */
-	let component = null;
+	/** @type {C} */
+	let component;
 
-	block.r =
-		/**
-		 * @param {import('#client').Transition} transition
-		 * @returns {void}
-		 */
-		(transition) => {
-			const render = /** @type {import('#client').Render} */ (current_render);
-			const transitions = render.s;
-			transitions.add(transition);
-			transition.f(() => {
-				transitions.delete(transition);
-				if (transitions.size === 0) {
-					// If the current render has changed since, then we can remove the old render
-					// effect as it's stale.
-					if (current_render !== render && render.e !== null) {
-						if (render.d !== null) {
-							remove(render.d);
-							render.d = null;
-						}
-						destroy_effect(render.e);
-						render.e = null;
-					}
-				}
-			});
-		};
+	/** @type {import('#client').Effect} */
+	let effect;
 
-	const create_render_effect = () => {
-		/** @type {import('#client').Render} */
-		const render = {
-			d: null,
-			e: null,
-			s: new Set(),
-			p: current_render
-		};
+	/**
+	 * Every time `component` changes, we create a new effect. Old effects are
+	 * removed from this set when they have fully transitioned out
+	 * @type {Set<import('#client').Effect>}
+	 */
+	let effects = new Set();
 
-		// Managed effect
-		render.e = render_effect(
-			() => {
-				const current = block.d;
-				if (current !== null) {
-					remove(current);
-					block.d = null;
-				}
-				if (component) {
-					render_fn(component);
-				}
-				render.d = block.d;
-				block.d = null;
-			},
-			block,
-			true
-		);
+	const component_effect = render_effect(
+		() => {
+			if (component === (component = get_component())) return;
 
-		current_render = render;
-	};
+			if (effect) {
+				var e = effect;
+				pause_effect(e, () => {
+					effects.delete(e);
+				});
+			}
 
-	const render = () => {
-		const render = current_render;
+			if (component) {
+				effect = render_effect(
+					() => {
+						render_fn(component);
 
-		if (render === null) {
-			create_render_effect();
-			return;
-		}
+						// @ts-expect-error TODO this should be unnecessary
+						const dom = block.d;
 
-		const transitions = render.s;
+						return () => {
+							if (dom !== null) {
+								remove(dom);
+							}
+						};
+					},
+					block,
+					true,
+					true
+				);
 
-		if (transitions.size === 0) {
-			if (render.d !== null) {
-				remove(render.d);
-				render.d = null;
-			}
-			if (render.e) {
-				execute_effect(render.e);
-			} else {
-				create_render_effect();
-			}
-		} else {
-			create_render_effect();
-			trigger_transitions(transitions, 'out');
-		}
-	};
+				// @ts-expect-error TODO tidy up
+				effect.d = block.d;
 
-	const component_effect = render_effect(
-		() => {
-			const next_component = component_fn();
-			if (component !== next_component) {
-				component = next_component;
-				render();
+				effects.add(effect);
 			}
 		},
 		block,
@@ -129,19 +71,9 @@ export function component(anchor_node, component_fn, render_fn) {
 	);
 
 	component_effect.ondestroy = () => {
-		let render = current_render;
-		while (render !== null) {
-			const dom = render.d;
-			if (dom !== null) {
-				remove(dom);
-			}
-			const effect = render.e;
-			if (effect !== null) {
-				destroy_effect(effect);
-			}
-			render = render.p;
+		for (const e of effects) {
+			// @ts-expect-error TODO tidy up. ondestroy should be totally unnecessary
+			if (e.d) remove(e.d);
 		}
 	};
-
-	block.e = component_effect;
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index 98950fd317..8e63fcc61b 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -1,11 +1,17 @@
 import { namespace_svg } from '../../../../constants.js';
-import { DYNAMIC_ELEMENT_BLOCK } from '../../constants.js';
 import { current_hydration_fragment, hydrate_block_anchor, hydrating } from '../hydration.js';
 import { empty } from '../operations.js';
-import { destroy_effect, render_effect } from '../../reactivity/effects.js';
-import { insert, remove } from '../reconciler.js';
-import { current_block, execute_effect } from '../../runtime.js';
+import {
+	destroy_effect,
+	pause_effect,
+	render_effect,
+	resume_effect
+} from '../../reactivity/effects.js';
+import { remove } from '../reconciler.js';
+import { current_block } from '../../runtime.js';
 import { is_array } from '../../utils.js';
+import { set_should_intro } from '../../render.js';
+import { current_each_item_block, set_current_each_item_block } from './each.js';
 
 /**
  * @param {import('#client').Block} block
@@ -28,13 +34,13 @@ function swap_block_dom(block, from, to) {
 }
 
 /**
- * @param {Comment} anchor_node
- * @param {() => string} tag_fn
+ * @param {Comment} anchor
+ * @param {() => string} get_tag
  * @param {boolean | null} is_svg `null` == not statically known
  * @param {undefined | ((element: Element, anchor: Node) => void)} render_fn
  * @returns {void}
  */
-export function element(anchor_node, tag_fn, is_svg, render_fn) {
+export function element(anchor, get_tag, is_svg, render_fn) {
 	/** @type {import('#client').DynamicElementBlock} */
 	const block = {
 		// dom
@@ -42,98 +48,119 @@ export function element(anchor_node, tag_fn, is_svg, render_fn) {
 		// effect
 		e: null,
 		// parent
-		p: /** @type {import('#client').Block} */ (current_block),
-		// transition
-		r: null,
-		// type
-		t: DYNAMIC_ELEMENT_BLOCK
+		p: /** @type {import('#client').Block} */ (current_block)
 	};
 
-	hydrate_block_anchor(anchor_node);
-	let has_mounted = false;
+	hydrate_block_anchor(anchor);
 
-	/** @type {string} */
+	/** @type {string | null} */
 	let tag;
 
+	/** @type {string | null} */
+	let current_tag;
+
 	/** @type {null | Element} */
 	let element = null;
 
-	const element_effect = render_effect(
-		() => {
-			tag = tag_fn();
-			if (has_mounted) {
-				execute_effect(render_effect_signal);
-			}
-			has_mounted = true;
-		},
-		block,
-		false
-	);
-
-	// Managed effect
-	const render_effect_signal = render_effect(
-		() => {
-			// We try our best infering the namespace in case it's not possible to determine statically,
-			// but on the first render on the client (without hydration) the parent will be undefined,
-			// since the anchor is not attached to its parent / the dom yet.
-			const ns =
-				is_svg || tag === 'svg'
-					? namespace_svg
-					: is_svg === false || anchor_node.parentElement?.tagName === 'foreignObject'
-						? null
-						: anchor_node.parentElement?.namespaceURI ?? null;
-
-			const next_element = tag
-				? hydrating
-					? /** @type {Element} */ (current_hydration_fragment[0])
-					: ns
-						? document.createElementNS(ns, tag)
-						: document.createElement(tag)
-				: null;
-
-			const prev_element = element;
-			if (prev_element !== null) {
-				block.d = null;
-			}
+	/** @type {import('#client').Effect | null} */
+	let effect;
 
-			element = next_element;
-			if (element !== null && render_fn !== undefined) {
-				let anchor;
-				if (hydrating) {
-					// Use the existing ssr comment as the anchor so that the inner open and close
-					// methods can pick up the existing nodes correctly
-					anchor = /** @type {Comment} */ (element.firstChild);
-				} else {
-					anchor = empty();
-					element.appendChild(anchor);
-				}
-				render_fn(element, anchor);
-			}
+	/**
+	 * The keyed `{#each ...}` item block, if any, that this element is inside.
+	 * We track this so we can set it when changing the element, allowing any
+	 * `animate:` directive to bind itself to the correct block
+	 */
+	let each_item_block = current_each_item_block;
 
-			const has_prev_element = prev_element !== null;
-			if (has_prev_element) {
-				remove(prev_element);
-			}
-			if (element !== null) {
-				insert(element, null, anchor_node);
-				if (has_prev_element) {
-					const parent_block = block.p;
-					swap_block_dom(parent_block, prev_element, element);
-				}
+	const wrapper = render_effect(() => {
+		const next_tag = get_tag() || null;
+		if (next_tag === tag) return;
+
+		// See explanation of `each_item_block` above
+		var previous_each_item_block = current_each_item_block;
+		set_current_each_item_block(each_item_block);
+
+		// We try our best infering the namespace in case it's not possible to determine statically,
+		// but on the first render on the client (without hydration) the parent will be undefined,
+		// since the anchor is not attached to its parent / the dom yet.
+		const ns =
+			is_svg || next_tag === 'svg'
+				? namespace_svg
+				: is_svg === false || anchor.parentElement?.tagName === 'foreignObject'
+					? null
+					: anchor.parentElement?.namespaceURI ?? null;
+
+		if (effect) {
+			if (next_tag === null) {
+				// start outro
+				pause_effect(effect, () => {
+					effect = null;
+					current_tag = null;
+					element?.remove(); // TODO this should be unnecessary
+				});
+			} else if (next_tag === current_tag) {
+				// same tag as is currently rendered — abort outro
+				resume_effect(effect);
+			} else {
+				// tag is changing — destroy immediately, render contents without intro transitions
+				destroy_effect(effect);
+				set_should_intro(false);
 			}
-		},
-		block,
-		true
-	);
+		}
 
-	element_effect.ondestroy = () => {
+		if (next_tag && next_tag !== current_tag) {
+			effect = render_effect(
+				() => {
+					const prev_element = element;
+					element = hydrating
+						? /** @type {Element} */ (current_hydration_fragment[0])
+						: ns
+							? document.createElementNS(ns, next_tag)
+							: document.createElement(next_tag);
+
+					if (render_fn) {
+						let anchor;
+						if (hydrating) {
+							// Use the existing ssr comment as the anchor so that the inner open and close
+							// methods can pick up the existing nodes correctly
+							anchor = /** @type {Comment} */ (element.firstChild);
+						} else {
+							anchor = empty();
+							element.appendChild(anchor);
+						}
+						render_fn(element, anchor);
+					}
+
+					anchor.before(element);
+
+					if (prev_element) {
+						swap_block_dom(block.p, prev_element, element);
+						prev_element.remove();
+					}
+				},
+				block,
+				true
+			);
+		}
+
+		tag = next_tag;
+		if (tag) current_tag = tag;
+		set_should_intro(true);
+
+		set_current_each_item_block(previous_each_item_block);
+	}, block);
+
+	wrapper.ondestroy = () => {
 		if (element !== null) {
 			remove(element);
 			block.d = null;
 			element = null;
 		}
-		destroy_effect(render_effect_signal);
+
+		if (effect) {
+			destroy_effect(effect);
+		}
 	};
 
-	block.e = element_effect;
+	block.e = wrapper;
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
index 0147a5fe88..c0916e7a29 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -1,4 +1,3 @@
-import { HEAD_BLOCK } from '../../constants.js';
 import {
 	current_hydration_fragment,
 	get_hydration_fragment,
@@ -22,11 +21,7 @@ export function head(render_fn) {
 		// effect
 		e: null,
 		// parent
-		p: /** @type {import('#client').Block} */ (current_block),
-		// transition
-		r: null,
-		// type
-		t: HEAD_BLOCK
+		p: /** @type {import('#client').Block} */ (current_block)
 	};
 
 	// The head function may be called after the first hydration pass and ssr comment nodes may still be present,
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index fcf56b7e89..86d75948ee 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -1,5 +1,5 @@
 import { DEV } from 'esm-env';
-import { render_effect } from '../../../reactivity/effects.js';
+import { render_effect, user_effect } from '../../../reactivity/effects.js';
 import { stringify } from '../../../render.js';
 
 /**
@@ -96,6 +96,11 @@ export function bind_group(inputs, group_index, input, get_value, update) {
 		}
 	});
 
+	user_effect(() => {
+		// necessary to maintain binding group order in all insertion scenarios. TODO optimise
+		binding_group.sort((a, b) => (a.compareDocumentPosition(b) === 4 ? -1 : 1));
+	});
+
 	render_effect(() => {
 		return () => {
 			var index = binding_group.indexOf(input);
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index 4a9615d387..387089f262 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -1,85 +1,13 @@
-import { EACH_IS_ANIMATED, EACH_IS_CONTROLLED } from '../../../../constants.js';
-import { run_all } from '../../../common.js';
-import {
-	AWAIT_BLOCK,
-	DYNAMIC_COMPONENT_BLOCK,
-	EACH_BLOCK,
-	EACH_ITEM_BLOCK,
-	IF_BLOCK,
-	KEY_BLOCK,
-	ROOT_BLOCK
-} from '../../constants.js';
-import { destroy_each_item_block, get_first_element } from '../blocks/each.js';
-import { schedule_raf_task } from '../task.js';
-import { append_child, empty } from '../operations.js';
-import {
-	destroy_effect,
-	effect,
-	managed_effect,
-	managed_pre_effect
-} from '../../reactivity/effects.js';
-import {
-	current_block,
-	current_effect,
-	execute_effect,
-	mark_subtree_inert,
-	untrack
-} from '../../runtime.js';
+import { noop } from '../../../common.js';
+import { user_effect } from '../../reactivity/effects.js';
+import { current_effect, untrack } from '../../runtime.js';
 import { raf } from '../../timing.js';
-
-const active_tick_animations = new Set();
-const DELAY_NEXT_TICK = Number.MIN_SAFE_INTEGER;
-
-/** @type {undefined | number} */
-let active_tick_ref = undefined;
-
-/**
- * @template P
- * @param {HTMLElement} dom
- * @param {() => import('#client').TransitionFn<P | undefined>} get_transition_fn
- * @param {(() => P) | null} props
- * @param {any} global
- * @returns {void}
- */
-export function transition(dom, get_transition_fn, props, global = false) {
-	bind_transition(dom, get_transition_fn, props, 'both', global);
-}
-
-/**
- * @template P
- * @param {HTMLElement} dom
- * @param {() => import('#client').TransitionFn<P | undefined>} get_transition_fn
- * @param {(() => P) | null} props
- * @returns {void}
- */
-export function animate(dom, get_transition_fn, props) {
-	bind_transition(dom, get_transition_fn, props, 'key', false);
-}
-
-/**
- * @template P
- * @param {HTMLElement} dom
- * @param {() => import('#client').TransitionFn<P | undefined>} get_transition_fn
- * @param {(() => P) | null} props
- * @param {any} global
- * @returns {void}
- */
-function in_fn(dom, get_transition_fn, props, global = false) {
-	bind_transition(dom, get_transition_fn, props, 'in', global);
-}
-export { in_fn as in };
-
-/**
- * @template P
- * @param {HTMLElement} dom
- * @param {() => import('#client').TransitionFn<P | undefined>} get_transition_fn
- * @param {(() => P) | null} props
- * @param {any} global
- * @returns {void}
- */
-export function out(dom, get_transition_fn, props, global = false) {
-	bind_transition(dom, get_transition_fn, props, 'out', global);
-}
+import { loop } from '../../loop.js';
+import { should_intro } from '../../render.js';
+import { is_function } from '../../utils.js';
+import { current_each_item_block } from '../blocks/each.js';
+import { TRANSITION_GLOBAL, TRANSITION_IN, TRANSITION_OUT } from '../../../../constants.js';
+import { EFFECT_RAN } from '../../constants.js';
 
 /**
  * @template T
@@ -95,7 +23,7 @@ function custom_event(type, detail, { bubbles = false, cancelable = false } = {}
 }
 
 /**
- * @param {HTMLElement} dom
+ * @param {Element} dom
  * @param {'introstart' | 'introend' | 'outrostart' | 'outroend'} type
  * @returns {void}
  */
@@ -137,685 +65,281 @@ function css_to_keyframe(css) {
 	return keyframe;
 }
 
-class TickAnimation {
-	/** @type {null | (() => void)} */
-	onfinish;
-
-	/** @type {(t: number, u: number) => string} */
-	#tick_fn;
-
-	/** @type {number} */
-	#duration;
-
-	/** @type {number} */
-	#current;
-
-	/** @type {number} */
-	#delay;
-
-	/** @type {number} */
-	#previous;
-
-	/** @type {boolean} */
-	paused;
-
-	/** @type {boolean} */
-	#reversed;
-
-	/** @type {number} */
-	#delay_current;
-
-	/** @type {boolean} */
-	#delayed_reverse;
-
-	/**
-	 * @param {(t: number, u: number) => string} tick_fn
-	 * @param {number} duration
-	 * @param {number} delay
-	 * @param {boolean} out
-	 */
-	constructor(tick_fn, duration, delay, out) {
-		this.#duration = duration;
-		this.#delay = delay;
-		this.paused = false;
-		this.#tick_fn = tick_fn;
-		this.#reversed = out;
-		this.#delay_current = delay;
-		this.#current = out ? duration : 0;
-		this.#previous = 0;
-		this.#delayed_reverse = false;
-		this.onfinish = null;
-		if (this.#delay) {
-			if (!out) {
-				this.#tick_fn(0, 1);
-			}
-		}
-	}
-
-	pause() {
-		this.paused = true;
-	}
-
-	play() {
-		this.paused = false;
-		if (!active_tick_animations.has(this)) {
-			this.#previous = raf.now();
-			if (active_tick_ref === undefined) {
-				active_tick_ref = raf.tick(handle_raf);
-			}
-			active_tick_animations.add(this);
-		}
-	}
-
-	#reverse() {
-		this.#reversed = !this.#reversed;
-		if (this.paused) {
-			if (this.#current === 0) {
-				this.#current = this.#duration;
-			}
-			this.play();
-		}
-	}
-
-	reverse() {
-		if (this.#delay === 0) {
-			this.#reverse();
-		} else {
-			this.#delay_current = this.#delay;
-			this.#delayed_reverse = true;
-		}
-	}
+/** @param {number} t */
+const linear = (t) => t;
 
-	cancel() {
-		active_tick_animations.delete(this);
-		const current = this.#current / this.#duration;
-		if (current > 0 && current < 1) {
-			const t = this.#reversed ? 1 : 0;
-			this.#tick_fn(t, 1 - t);
-		}
-	}
+/**
+ * Called inside keyed `{#each ...}` blocks (as `$.animation(...)`). This creates an animation manager
+ * and attaches it to the block, so that moves can be animated following reconciliation.
+ * @template P
+ * @param {Element} element
+ * @param {() => import('#client').AnimateFn<P | undefined>} get_fn
+ * @param {(() => P) | null} get_params
+ */
+export function animation(element, get_fn, get_params) {
+	var block = /** @type {import('#client').EachItemBlock} */ (current_each_item_block);
 
-	finish() {
-		active_tick_animations.delete(this);
-		if (this.onfinish) {
-			this.onfinish();
-		}
-	}
+	/** @type {DOMRect} */
+	var from;
 
-	/** @param {number} time */
-	_update(time) {
-		let diff = time - this.#previous;
-		this.#previous = time;
-		if (this.#delay_current !== 0) {
-			const is_delayed = this.#delay_current === DELAY_NEXT_TICK;
-			let cancel = !this.#delayed_reverse;
-			this.#delay_current -= diff;
-			if (this.#delay_current < 0 || is_delayed || (this.#delay_current === 0 && this.#reversed)) {
-				const delay_diff = is_delayed ? 0 : -this.#delay_current;
-				this.#delay_current = 0;
-
-				if (this.#delayed_reverse) {
-					this.#delayed_reverse = false;
-					this.#reverse();
-				} else if (delay_diff !== 0 || this.#reversed) {
-					diff = delay_diff;
-				}
-				cancel = false;
-			} else if (this.#delay_current === 0) {
-				this.#delay_current = DELAY_NEXT_TICK;
-			}
-			if (cancel) {
-				return;
-			}
-		}
-		this.#current += this.#reversed ? -diff : diff;
-		let t = this.#current / this.#duration;
+	/** @type {DOMRect} */
+	var to;
 
-		if (t < 0) {
-			t = 0;
-		} else if (t > 1) {
-			t = 1;
-		}
+	/** @type {import('#client').Animation | undefined} */
+	var animation;
 
-		if ((this.#reversed && t <= 0) || (!this.#reversed && t >= 1)) {
-			t = this.#reversed ? 0 : 1;
-			if (this.#delay_current === 0) {
-				active_tick_animations.delete(this);
-				if (this.onfinish) {
-					this.paused = true;
-					this.onfinish();
-				}
+	block.a ??= {
+		element,
+		measure() {
+			from = this.element.getBoundingClientRect();
+		},
+		apply() {
+			animation?.abort();
+
+			to = this.element.getBoundingClientRect();
+
+			const options = get_fn()(this.element, { from, to }, get_params?.());
+
+			if (
+				from.left !== to.left ||
+				from.right !== to.right ||
+				from.top !== to.top ||
+				from.bottom !== to.bottom
+			) {
+				animation = animate(this.element, options, undefined, 1, () => {
+					animation?.abort();
+					animation = undefined;
+				});
 			}
 		}
-		this.#tick_fn(t, 1 - t);
-	}
-}
+	};
 
-/** @param {number} time */
-function handle_raf(time) {
-	for (const animation of active_tick_animations) {
-		if (!animation.paused) {
-			animation._update(time);
-		}
-	}
-	if (active_tick_animations.size !== 0) {
-		active_tick_ref = raf.tick(handle_raf);
-	} else {
-		active_tick_ref = undefined;
-	}
+	// in the case of a `<svelte:element>`, it's possible for `$.animation(...)` to be called
+	// when an animation manager already exists, if the tag changes. in that case, we need to
+	// swap out the element rather than creating a new manager, in case it happened at the same
+	// moment as a reconciliation
+	block.a.element = element;
 }
 
 /**
- * @param {{(t: number): number;(t: number): number;(arg0: number): any;}} easing_fn
- * @param {((t: number, u: number) => string)} css_fn
- * @param {number} duration
- * @param {string} direction
- * @param {boolean} reverse
+ * Called inside block effects as `$.transition(...)`. This creates a transition manager and
+ * attaches it to the current effect — later, inside `pause_effect` and `resume_effect`, we
+ * use this to create `intro` and `outro` transitions.
+ * @template P
+ * @param {number} flags
+ * @param {HTMLElement} element
+ * @param {() => import('#client').TransitionFn<P | undefined>} get_fn
+ * @param {(() => P) | null} get_params
+ * @returns {void}
  */
-function create_keyframes(easing_fn, css_fn, duration, direction, reverse) {
-	/** @type {Keyframe[]} */
-	const keyframes = [];
-	// We need at least two frames
-	const frame_time = 16.666;
-	const max_duration = Math.max(duration, frame_time);
-	// Have a keyframe every fame for 60 FPS
-	for (let i = 0; i <= max_duration; i += frame_time) {
-		let time;
-		if (i + frame_time > max_duration) {
-			time = 1;
-		} else if (i === 0) {
-			time = 0;
-		} else {
-			time = i / max_duration;
-		}
-		let t = easing_fn(time);
-		if (reverse) {
-			t = 1 - t;
-		}
-		keyframes.push(css_to_keyframe(css_fn(t, 1 - t)));
-	}
-	if (direction === 'out' || reverse) {
-		keyframes.reverse();
-	}
-	return keyframes;
-}
+export function transition(flags, element, get_fn, get_params) {
+	var is_intro = (flags & TRANSITION_IN) !== 0;
+	var is_outro = (flags & TRANSITION_OUT) !== 0;
+	var is_global = (flags & TRANSITION_GLOBAL) !== 0;
 
-/** @param {number} t */
-const linear = (t) => t;
+	/** @type {'in' | 'out' | 'both'} */
+	var direction = is_intro && is_outro ? 'both' : is_intro ? 'in' : 'out';
 
-/**
- * @param {HTMLElement} dom
- * @param {() => import('../../types.js').TransitionPayload} init
- * @param {'in' | 'out' | 'both' | 'key'} direction
- * @param {import('../../types.js').Effect} effect
- * @returns {import('../../types.js').Transition}
- */
-function create_transition(dom, init, direction, effect) {
-	let curr_direction = 'in';
+	/** @type {import('#client').AnimationConfig | ((opts: { direction: 'in' | 'out' }) => import('#client').AnimationConfig) | undefined} */
+	var current_options;
 
-	/** @type {Array<() => void>} */
-	let subs = [];
+	var inert = element.inert;
 
-	/** @type {null | Animation | TickAnimation} */
-	let animation = null;
-	let cancelled = false;
+	/** @type {import('#client').Animation | undefined} */
+	var intro;
 
-	const create_animation = () => {
-		let payload = /** @type {import('../../types.js').TransitionPayload} */ (transition.p);
-		if (typeof payload === 'function') {
-			// @ts-ignore
-			payload = payload({ direction: curr_direction });
-		}
-		if (payload == null) {
-			return;
-		}
-		const duration = payload.duration ?? 300;
-		const delay = payload.delay ?? 0;
-		const css_fn = payload.css;
-		const tick_fn = payload.tick;
-		const easing_fn = payload.easing || linear;
-
-		if (typeof tick_fn === 'function') {
-			animation = new TickAnimation(tick_fn, duration, delay, direction === 'out');
-		} else {
-			const keyframes =
-				typeof css_fn === 'function'
-					? create_keyframes(easing_fn, css_fn, duration, direction, false)
-					: [];
-			animation = dom.animate(keyframes, {
-				duration,
-				endDelay: delay,
-				delay,
-				fill: 'both'
-			});
-		}
-		animation.pause();
+	/** @type {import('#client').Animation | undefined} */
+	var outro;
 
-		animation.onfinish = () => {
-			const is_outro = curr_direction === 'out';
-			/** @type {Animation | TickAnimation} */ (animation).cancel();
-			if (is_outro) {
-				run_all(subs);
-				subs = [];
-			}
-			dispatch_event(dom, is_outro ? 'outroend' : 'introend');
-		};
-	};
+	/** @type {(() => void) | undefined} */
+	var reset;
 
-	/** @type {import('../../types.js').Transition} */
-	const transition = {
-		e: effect,
-		i: init,
-		// payload
-		p: null,
-
-		// finished
-		/** @param {() => void} fn */
-		f(fn) {
-			subs.push(fn);
-		},
+	function get_options() {
+		// If a transition is still ongoing, we use the existing options rather than generating
+		// new ones. This ensures that reversible transitions reverse smoothly, rather than
+		// jumping to a new spot because (for example) a different `duration` was used
+		return (current_options ??= get_fn()(element, get_params?.(), { direction }));
+	}
+
+	/** @type {import('#client').TransitionManager} */
+	var transition = {
+		is_global,
 		in() {
-			const needs_reverse = curr_direction !== 'in';
-			curr_direction = 'in';
-			if (animation === null || cancelled) {
-				cancelled = false;
-				create_animation();
-			}
-			if (animation === null) {
-				transition.x();
+			element.inert = inert;
+
+			if (is_intro) {
+				dispatch_event(element, 'introstart');
+				intro = animate(element, get_options(), outro, 1, () => {
+					dispatch_event(element, 'introend');
+					intro = current_options = undefined;
+				});
 			} else {
-				dispatch_event(dom, 'introstart');
-				if (needs_reverse) {
-					/** @type {Animation | TickAnimation} */ (animation).reverse();
-				}
-				/** @type {Animation | TickAnimation} */ (animation).play();
+				outro?.abort();
+				reset?.();
 			}
 		},
-		// out
-		o() {
-			// @ts-ignore
-			const has_keyed_transition = dom.__animate;
-			// If we're outroing an element that has an animation, then we need to fix
-			// its position to ensure it behaves nicely without causing layout shift.
-			if (has_keyed_transition) {
-				const style = getComputedStyle(dom);
-				const position = style.position;
-
-				if (position !== 'absolute' && position !== 'fixed') {
-					const { width, height } = style;
-					const a = dom.getBoundingClientRect();
-					dom.style.position = 'absolute';
-
-					dom.style.width = width;
-					dom.style.height = height;
-					const b = dom.getBoundingClientRect();
-					if (a.left !== b.left || a.top !== b.top) {
-						const translate = `translate(${a.left - b.left}px, ${a.top - b.top}px)`;
-						const existing_transform = style.transform;
-						if (existing_transform === 'none') {
-							dom.style.transform = translate;
-						} else {
-							// Previously, in the Svelte 4, we'd just apply the transform the the DOM element. However,
-							// because we're now using Web Animations, we can't do that as it won't work properly if the
-							// animation is also making use of the same transformations. So instead, we apply an
-							// instantaneous animation and pause it on the first frame, just applying the same behavior.
-							// We also need to take into consideration matrix transforms and how they might combine with
-							// an existing behavior that is already in progress (such as scale).
-							// > Follow the white rabbit.
-							const transform = existing_transform.startsWith('matrix(1,')
-								? translate
-								: `matrix(1,0,0,1,0,0)`;
-							const frame = {
-								transform
-							};
-							const animation = dom.animate([frame, frame], { duration: 1 });
-							animation.pause();
-						}
-					}
-				}
-			}
-			const needs_reverse = direction === 'both' && curr_direction !== 'out';
-			curr_direction = 'out';
-			if (animation === null || cancelled) {
-				cancelled = false;
-				create_animation();
-			}
-			if (animation === null) {
-				transition.x();
+		out(fn) {
+			if (is_outro) {
+				element.inert = true;
+
+				dispatch_event(element, 'outrostart');
+				outro = animate(element, get_options(), intro, 0, () => {
+					dispatch_event(element, 'outroend');
+					outro = current_options = undefined;
+					fn?.();
+				});
+
+				// TODO arguably the outro should never null itself out until _all_ outros for this effect have completed...
+				// in that case we wouldn't need to store `reset` separately
+				reset = outro.reset;
 			} else {
-				dispatch_event(dom, 'outrostart');
-				if (needs_reverse) {
-					const payload = transition.p;
-					const current_animation = /** @type {Animation} */ (animation);
-					// If we are working with CSS animations, then before we call reverse, we also need to ensure
-					// that we reverse the easing logic. To do this we need to re-create the keyframes so they're
-					// in reverse with easing properly reversed too.
-					if (
-						payload !== null &&
-						payload.css !== undefined &&
-						current_animation.playState === 'idle'
-					) {
-						const duration = payload.duration ?? 300;
-						const css_fn = payload.css;
-						const easing_fn = payload.easing || linear;
-						const keyframes = create_keyframes(easing_fn, css_fn, duration, direction, true);
-						const effect = current_animation.effect;
-						if (effect !== null) {
-							// @ts-ignore
-							effect.setKeyframes(keyframes);
-						}
-					}
-					/** @type {Animation | TickAnimation} */ (animation).reverse();
-				} else {
-					/** @type {Animation | TickAnimation} */ (animation).play();
-				}
+				fn?.();
 			}
 		},
-		// cancel
-		c() {
-			if (animation !== null) {
-				/** @type {Animation | TickAnimation} */ (animation).cancel();
-			}
-			cancelled = true;
-		},
-		// cleanup
-		x() {
-			run_all(subs);
-			subs = [];
-		},
-		r: direction,
-		d: dom
+		stop: () => {
+			intro?.abort();
+			outro?.abort();
+		}
 	};
-	return transition;
-}
 
-/**
- * @param {import('../../types.js').Block} block
- * @returns {boolean}
- */
-function is_transition_block(block) {
-	const type = block.t;
-	return (
-		type === IF_BLOCK ||
-		type === EACH_ITEM_BLOCK ||
-		type === KEY_BLOCK ||
-		type === AWAIT_BLOCK ||
-		type === DYNAMIC_COMPONENT_BLOCK ||
-		(type === EACH_BLOCK && block.v.length === 0)
-	);
+	var effect = /** @type {import('#client').Effect} */ (current_effect);
+
+	(effect.transitions ??= []).push(transition);
+
+	// if this is a local transition, we only want to run it if the parent (block) effect's
+	// parent (branch) effect is where the state change happened. we can determine that by
+	// looking at whether the branch effect is currently initializing
+	if (is_intro && should_intro) {
+		var parent = /** @type {import('#client').Effect} */ (effect.parent);
+
+		if (is_global || (parent.f & EFFECT_RAN) !== 0) {
+			user_effect(() => {
+				untrack(() => transition.in());
+			});
+		}
+	}
 }
 
 /**
- * @template P
- * @param {HTMLElement} dom
- * @param {() => import('../../types.js').TransitionFn<P | undefined> | import('../../types.js').AnimateFn<P | undefined>} get_transition_fn
- * @param {(() => P) | null} props_fn
- * @param {'in' | 'out' | 'both' | 'key'} direction
- * @param {boolean} global
- * @returns {void}
+ * Animates an element, according to the provided configuration
+ * @param {Element} element
+ * @param {import('#client').AnimationConfig | ((opts: { direction: 'in' | 'out' }) => import('#client').AnimationConfig)} options
+ * @param {import('#client').Animation | undefined} counterpart The corresponding intro/outro to this outro/intro
+ * @param {number} t2 The target `t` value — `1` for intro, `0` for outro
+ * @param {(() => void) | undefined} callback
+ * @returns {import('#client').Animation}
  */
-function bind_transition(dom, get_transition_fn, props_fn, direction, global) {
-	const transition_effect = /** @type {import('../../types.js').Effect} */ (current_effect);
-	const block = current_block;
-	const is_keyed_transition = direction === 'key';
-
-	let can_show_intro_on_mount = true;
-	let can_apply_lazy_transitions = false;
+function animate(element, options, counterpart, t2, callback) {
+	if (is_function(options)) {
+		// In the case of a deferred transition (such as `crossfade`), `option` will be
+		// a function rather than an `AnimationConfig`. We need to call this function
+		// once DOM has been updated...
+		/** @type {import('#client').Animation} */
+		var a;
+
+		user_effect(() => {
+			var o = untrack(() => options({ direction: t2 === 1 ? 'in' : 'out' }));
+			a = animate(element, o, counterpart, t2, callback);
+		});
 
-	if (is_keyed_transition) {
-		// @ts-ignore
-		dom.__animate = true;
+		// ...but we want to do so without using `async`/`await` everywhere, so
+		// we return a facade that allows everything to remain synchronous
+		return {
+			abort: () => a.abort(),
+			deactivate: () => a.deactivate(),
+			reset: () => a.reset(),
+			t: (now) => a.t(now)
+		};
 	}
-	/** @type {import('../../types.js').Block | null} */
-	let transition_block = block;
-	main: while (transition_block !== null) {
-		if (is_transition_block(transition_block)) {
-			if (transition_block.t === EACH_ITEM_BLOCK) {
-				// Lazily apply the each block transition
-				transition_block.r = each_item_transition;
-				transition_block.a = each_item_animate;
-				transition_block = transition_block.p;
-			} else if (transition_block.t === AWAIT_BLOCK && transition_block.n /* pending */) {
-				can_show_intro_on_mount = true;
-			} else if (transition_block.t === IF_BLOCK) {
-				transition_block.r = if_block_transition;
-				if (can_show_intro_on_mount) {
-					/** @type {import('../../types.js').Block | null} */
-					let if_block = transition_block;
-					while (if_block.t === IF_BLOCK) {
-						// If we have an if block parent that is currently falsy then
-						// we can show the intro on mount as long as that block is mounted
-						if (if_block.e !== null && !if_block.v) {
-							can_show_intro_on_mount = true;
-							break main;
-						}
-						if_block = if_block.p;
-					}
-				}
-			}
-			if (!can_apply_lazy_transitions && can_show_intro_on_mount) {
-				can_show_intro_on_mount = transition_block.e !== null;
-			}
-			if (can_show_intro_on_mount || !global) {
-				can_apply_lazy_transitions = true;
-			}
-		} else if (transition_block.t === ROOT_BLOCK && !can_apply_lazy_transitions) {
-			can_show_intro_on_mount = transition_block.e !== null || transition_block.i;
-		}
-		transition_block = transition_block.p;
+
+	counterpart?.deactivate();
+
+	if (!options?.duration) {
+		callback?.();
+		return {
+			abort: noop,
+			deactivate: noop,
+			reset: noop,
+			t: () => t2
+		};
 	}
 
-	/** @type {import('../../types.js').Transition} */
-	let transition;
+	var { delay = 0, duration, css, tick, easing = linear } = options;
 
-	effect(() => {
-		let already_mounted = false;
-		if (transition !== undefined) {
-			already_mounted = true;
-			// Destroy any existing transitions first
-			transition.x();
-		}
-		const transition_fn = get_transition_fn();
-		/** @param {DOMRect} [from] */
-		const init = (from) =>
-			untrack(() => {
-				const props = props_fn === null ? {} : props_fn();
-				return is_keyed_transition
-					? /** @type {import('../../types.js').AnimateFn<any>} */ (transition_fn)(
-							dom,
-							{ from: /** @type {DOMRect} */ (from), to: dom.getBoundingClientRect() },
-							props,
-							{}
-						)
-					: /** @type {import('../../types.js').TransitionFn<any>} */ (transition_fn)(dom, props, {
-							direction
-						});
-			});
+	var start = raf.now() + delay;
+	var t1 = counterpart?.t(start) ?? 1 - t2;
+	var delta = t2 - t1;
 
-		transition = create_transition(dom, init, direction, transition_effect);
-		const is_intro = direction === 'in';
-		const show_intro = can_show_intro_on_mount && (is_intro || direction === 'both');
+	duration *= Math.abs(delta);
+	var end = start + duration;
 
-		if (show_intro && !already_mounted) {
-			transition.p = transition.i();
-		}
+	/** @type {Animation} */
+	var animation;
 
-		const effect = managed_pre_effect(() => {
-			destroy_effect(effect);
-			dom.inert = false;
+	/** @type {import('#client').Task} */
+	var task;
 
-			if (show_intro && !already_mounted) {
-				transition.in();
-			}
+	if (css) {
+		// WAAPI
+		var keyframes = [];
+		var n = duration / (1000 / 60);
 
-			/** @type {import('../../types.js').Block | null} */
-			let transition_block = block;
-			while (!is_intro && transition_block !== null) {
-				const parent = transition_block.p;
-				if (is_transition_block(transition_block)) {
-					if (transition_block.r !== null) {
-						transition_block.r(transition);
-					}
-					if (
-						parent === null ||
-						(!global && (transition_block.t !== IF_BLOCK || parent.t !== IF_BLOCK || parent.v))
-					) {
-						break;
-					}
-				}
-				transition_block = parent;
-			}
-		});
-	});
+		for (var i = 0; i <= n; i += 1) {
+			var t = t1 + delta * easing(i / n);
+			var styles = css(t, 1 - t);
+			keyframes.push(css_to_keyframe(styles));
+		}
 
-	if (direction === 'key') {
-		effect(() => {
-			return () => {
-				transition.x();
-			};
+		animation = element.animate(keyframes, {
+			delay,
+			duration,
+			easing: 'linear',
+			fill: 'forwards'
 		});
-	}
-}
 
-/**
- * @param {Set<import('../../types.js').Transition>} transitions
- * @param {'in' | 'out' | 'key'} target_direction
- * @param {DOMRect} [from]
- * @returns {void}
- */
-export function trigger_transitions(transitions, target_direction, from) {
-	/** @type {Array<() => void>} */
-	const outros = [];
-	for (const transition of transitions) {
-		const direction = transition.r;
-		const effect = transition.e;
-		if (target_direction === 'in') {
-			if (direction === 'in' || direction === 'both') {
-				transition.in();
-			} else {
-				transition.c();
-			}
-			transition.d.inert = false;
-			mark_subtree_inert(effect, false);
-		} else if (target_direction === 'key') {
-			if (direction === 'key') {
-				if (!transition.p) {
-					transition.p = transition.i(/** @type {DOMRect} */ (from));
-				}
-				transition.in();
-			}
-		} else {
-			if (direction === 'out' || direction === 'both') {
-				if (!transition.p) {
-					transition.p = transition.i();
-				}
-				outros.push(transition.o);
-			}
-			transition.d.inert = true;
-			mark_subtree_inert(effect, true);
+		animation.finished
+			.then(() => {
+				callback?.();
+			})
+			.catch(noop);
+	} else {
+		// Timer
+		if (t1 === 0) {
+			tick?.(0, 1); // TODO put in nested effect, to avoid interleaved reads/writes?
 		}
-	}
-	if (outros.length > 0) {
-		// Defer the outros to a microtask
-		const e = managed_pre_effect(() => {
-			destroy_effect(e);
-			const e2 = managed_effect(() => {
-				destroy_effect(e2);
-				run_all(outros);
-			});
-		});
-	}
-}
 
-/**
- * @this {import('../../types.js').IfBlock}
- * @param {import('../../types.js').Transition} transition
- * @returns {void}
- */
-function if_block_transition(transition) {
-	const block = this;
-	// block.value === true
-	if (block.v) {
-		const consequent_transitions = (block.c ??= new Set());
-		consequent_transitions.add(transition);
-		transition.f(() => {
-			const c = /** @type {Set<import('../../types.js').Transition>} */ (consequent_transitions);
-			c.delete(transition);
-			// If the block has changed to falsy and has transitions
-			if (!block.v && c.size === 0) {
-				const consequent_effect = block.ce;
-				execute_effect(/** @type {import('../../types.js').Effect} */ (consequent_effect));
+		task = loop((now) => {
+			if (now >= end) {
+				tick?.(t2, 1 - t2);
+				callback?.();
+				return false;
 			}
-		});
-	} else {
-		const alternate_transitions = (block.a ??= new Set());
-		alternate_transitions.add(transition);
-		transition.f(() => {
-			const a = /** @type {Set<import('../../types.js').Transition>} */ (alternate_transitions);
-			a.delete(transition);
-			// If the block has changed to truthy and has transitions
-			if (block.v && a.size === 0) {
-				const alternate_effect = block.ae;
-				execute_effect(/** @type {import('../../types.js').Effect} */ (alternate_effect));
+
+			if (now >= start) {
+				var p = t1 + delta * easing((now - start) / duration);
+				tick?.(p, 1 - p);
 			}
+
+			return true;
 		});
 	}
-}
 
-/**
- * @this {import('../../types.js').EachItemBlock}
- * @param {import('../../types.js').Transition} transition
- * @returns {void}
- */
-function each_item_transition(transition) {
-	const block = this;
-	const each_block = block.p;
-	const is_controlled = (each_block.f & EACH_IS_CONTROLLED) !== 0;
-	// Disable optimization
-	if (is_controlled) {
-		const anchor = empty();
-		each_block.f ^= EACH_IS_CONTROLLED;
-		append_child(/** @type {Element} */ (each_block.a), anchor);
-		each_block.a = anchor;
-	}
-	if (transition.r === 'key' && (each_block.f & EACH_IS_ANIMATED) === 0) {
-		each_block.f |= EACH_IS_ANIMATED;
-	}
-	const transitions = (block.s ??= new Set());
-	transition.f(() => {
-		transitions.delete(transition);
-		if (transition.r !== 'key') {
-			for (let other of transitions) {
-				const type = other.r;
-				if (type === 'key' || type === 'in') {
-					transitions.delete(other);
-				}
-			}
-			if (transitions.size === 0) {
-				block.s = null;
-				destroy_each_item_block(block, null, true);
+	return {
+		abort: () => {
+			animation?.cancel();
+			task?.abort();
+		},
+		deactivate: () => {
+			callback = undefined;
+		},
+		reset: () => {
+			if (t2 === 0) {
+				tick?.(1, 0);
 			}
+		},
+		t: (now) => {
+			var t = t1 + delta * easing((now - start) / duration);
+			return Math.min(1, Math.max(0, t));
 		}
-	});
-	transitions.add(transition);
-}
-
-/**
- *
- * @param {import('../../types.js').EachItemBlock} block
- * @param {Set<import('../../types.js').Transition>} transitions
- */
-function each_item_animate(block, transitions) {
-	const from_dom = /** @type {Element} */ (get_first_element(block));
-	const from = from_dom.getBoundingClientRect();
-	// Cancel any existing key transitions
-	for (const transition of transitions) {
-		const type = transition.r;
-		if (type === 'key') {
-			transition.c();
-		}
-	}
-	schedule_raf_task(() => {
-		trigger_transitions(transitions, 'key', from);
-	});
+	};
 }
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
index 1b15a9ddbb..c896454659 100644
--- a/packages/svelte/src/internal/client/dom/hydration.js
+++ b/packages/svelte/src/internal/client/dom/hydration.js
@@ -73,33 +73,26 @@ export function get_hydration_fragment(node, insert_text = false) {
 }
 
 /**
- * @param {Text | Comment | Element} anchor_node
- * @param {boolean} [is_controlled]
+ * @param {Node} node
  * @returns {void}
  */
-export function hydrate_block_anchor(anchor_node, is_controlled) {
-	if (hydrating) {
-		/** @type {Node} */
-		let target_node = anchor_node;
+export function hydrate_block_anchor(node) {
+	if (!hydrating) return;
 
-		if (is_controlled) {
-			target_node = /** @type {Node} */ (target_node.firstChild);
-		}
-		if (target_node.nodeType === 8) {
-			// @ts-ignore
-			let fragment = target_node.$$fragment;
-			if (fragment === undefined) {
-				fragment = get_hydration_fragment(target_node);
-			} else {
-				schedule_task(() => {
-					// @ts-expect-error clean up memory
-					target_node.$$fragment = undefined;
-				});
-			}
-			set_current_hydration_fragment(fragment);
+	if (node.nodeType === 8) {
+		// @ts-ignore
+		let fragment = node.$$fragment;
+		if (fragment === undefined) {
+			fragment = get_hydration_fragment(node);
 		} else {
-			const first_child = /** @type {Element | null} */ (target_node.firstChild);
-			set_current_hydration_fragment(first_child === null ? [] : [first_child]);
+			schedule_task(() => {
+				// @ts-expect-error clean up memory
+				node.$$fragment = undefined;
+			});
 		}
+		set_current_hydration_fragment(fragment);
+	} else {
+		const first_child = /** @type {Element | null} */ (node.firstChild);
+		set_current_hydration_fragment(first_child === null ? [] : [first_child]);
 	}
 }
diff --git a/packages/svelte/src/internal/client/dom/reconciler.js b/packages/svelte/src/internal/client/dom/reconciler.js
index becdac20d9..ebd06796bf 100644
--- a/packages/svelte/src/internal/client/dom/reconciler.js
+++ b/packages/svelte/src/internal/client/dom/reconciler.js
@@ -30,30 +30,21 @@ export function create_fragment_with_script_from_html(html) {
 
 /**
  * @param {Array<import('../types.js').TemplateNode> | import('../types.js').TemplateNode} current
- * @param {null | Element} parent_element
- * @param {null | Text | Element | Comment} sibling
+ * @param {Text | Element | Comment} sibling
  * @returns {Text | Element | Comment}
  */
-export function insert(current, parent_element, sibling) {
+export function insert(current, sibling) {
+	if (!current) return sibling;
+
 	if (is_array(current)) {
-		var i = 0;
-		var node;
-		for (; i < current.length; i++) {
-			node = current[i];
-			if (sibling === null) {
-				append_child(/** @type {Element} */ (parent_element), /** @type {Node} */ (node));
-			} else {
-				sibling.before(/** @type {Node} */ (node));
-			}
+		for (var i = 0; i < current.length; i++) {
+			sibling.before(/** @type {Node} */ (current[i]));
 		}
+
 		return current[0];
-	} else if (current !== null) {
-		if (sibling === null) {
-			append_child(/** @type {Element} */ (parent_element), /** @type {Node} */ (current));
-		} else {
-			sibling.before(/** @type {Node} */ (current));
-		}
 	}
+
+	sibling.before(/** @type {Node} */ (current));
 	return /** @type {Text | Element | Comment} */ (current);
 }
 
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 6ec040a317..24a0ebb6e0 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -90,7 +90,7 @@ export function svg_template_with_script(svg, return_fragment) {
 function open_template(is_fragment, use_clone_node, anchor, template_element_fn) {
 	if (hydrating) {
 		if (anchor !== null) {
-			hydrate_block_anchor(anchor, false);
+			hydrate_block_anchor(anchor);
 		}
 		// In ssr+hydration optimization mode, we might remove the template_element,
 		// so we need to is_fragment flag to properly handle hydrated content accordingly.
@@ -181,18 +181,18 @@ export function comment(anchor) {
  * @returns {void}
  */
 function close_template(dom, is_fragment, anchor) {
-	const block = /** @type {import('#client').Block} */ (current_block);
-
 	/** @type {import('#client').TemplateNode | Array<import('#client').TemplateNode>} */
-	const current = is_fragment
+	var current = is_fragment
 		? is_array(dom)
 			? dom
 			: /** @type {import('#client').TemplateNode[]} */ (Array.from(dom.childNodes))
 		: dom;
+
 	if (!hydrating && anchor !== null) {
-		insert(current, null, anchor);
+		insert(current, anchor);
 	}
-	block.d = current;
+
+	/** @type {import('#client').Block} */ (current_block).d = current;
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/loop.js b/packages/svelte/src/internal/client/loop.js
index 26bd3bece3..1d3aec1be4 100644
--- a/packages/svelte/src/internal/client/loop.js
+++ b/packages/svelte/src/internal/client/loop.js
@@ -1,19 +1,22 @@
 import { raf } from './timing.js';
 
-const tasks = new Set();
+// TODO move this into timing.js where it probably belongs
 
 /**
  * @param {number} now
  * @returns {void}
  */
 function run_tasks(now) {
-	tasks.forEach((task) => {
+	raf.tasks.forEach((task) => {
 		if (!task.c(now)) {
-			tasks.delete(task);
+			raf.tasks.delete(task);
 			task.f();
 		}
 	});
-	if (tasks.size !== 0) raf.tick(run_tasks);
+
+	if (raf.tasks.size !== 0) {
+		raf.tick(run_tasks);
+	}
 }
 
 /**
@@ -25,13 +28,17 @@ function run_tasks(now) {
 export function loop(callback) {
 	/** @type {import('./types.js').TaskEntry} */
 	let task;
-	if (tasks.size === 0) raf.tick(run_tasks);
+
+	if (raf.tasks.size === 0) {
+		raf.tick(run_tasks);
+	}
+
 	return {
 		promise: new Promise((fulfill) => {
-			tasks.add((task = { c: callback, f: fulfill }));
+			raf.tasks.add((task = { c: callback, f: fulfill }));
 		}),
 		abort() {
-			tasks.delete(task);
+			raf.tasks.delete(task);
 		}
 	};
 }
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 4aef848b32..ebe1a422cb 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -1,22 +1,34 @@
 import { DEV } from 'esm-env';
 import {
+	check_dirtiness,
 	current_block,
 	current_component_context,
 	current_effect,
 	current_reaction,
 	destroy_children,
+	execute_effect,
 	get,
 	remove_reactions,
 	schedule_effect,
 	set_signal_status,
 	untrack
 } from '../runtime.js';
-import { DIRTY, MANAGED, RENDER_EFFECT, EFFECT, PRE_EFFECT, DESTROYED } from '../constants.js';
+import {
+	DIRTY,
+	MANAGED,
+	RENDER_EFFECT,
+	EFFECT,
+	PRE_EFFECT,
+	DESTROYED,
+	INERT,
+	IS_ELSEIF
+} from '../constants.js';
 import { set } from './sources.js';
+import { noop } from '../../common.js';
 
 /**
  * @param {import('./types.js').EffectType} type
- * @param {(() => void | (() => void)) | ((b: import('#client').Block) => void | (() => void))} fn
+ * @param {(() => void | (() => void))} fn
  * @param {boolean} sync
  * @param {null | import('#client').Block} block
  * @param {boolean} init
@@ -25,6 +37,7 @@ import { set } from './sources.js';
 function create_effect(type, fn, sync, block = current_block, init = true) {
 	/** @type {import('#client').Effect} */
 	const signal = {
+		parent: current_effect,
 		block,
 		deps: null,
 		f: type | DIRTY,
@@ -34,7 +47,8 @@ function create_effect(type, fn, sync, block = current_block, init = true) {
 		deriveds: null,
 		teardown: null,
 		ctx: current_component_context,
-		ondestroy: null
+		ondestroy: null,
+		transitions: null
 	};
 
 	if (current_effect !== null) {
@@ -201,8 +215,7 @@ export function invalidate_effect(fn) {
 }
 
 /**
- * @template {import('#client').Block} B
- * @param {(block: B) => void | (() => void)} fn
+ * @param {(() => void)} fn
  * @param {any} block
  * @param {any} managed
  * @param {any} sync
@@ -217,22 +230,128 @@ export function render_effect(fn, block = current_block, managed = false, sync =
 }
 
 /**
- * @param {import('#client').Effect} signal
+ * @param {import('#client').Effect} effect
  * @returns {void}
  */
-export function destroy_effect(signal) {
-	destroy_children(signal);
-	remove_reactions(signal, 0);
-	set_signal_status(signal, DESTROYED);
-
-	signal.teardown?.();
-	signal.ondestroy?.();
-	signal.fn =
-		signal.effects =
-		signal.teardown =
-		signal.ondestroy =
-		signal.ctx =
-		signal.block =
-		signal.deps =
+export function destroy_effect(effect) {
+	destroy_children(effect);
+	remove_reactions(effect, 0);
+	set_signal_status(effect, DESTROYED);
+
+	if (effect.transitions) {
+		for (const transition of effect.transitions) {
+			transition.stop();
+		}
+	}
+
+	effect.teardown?.();
+	effect.ondestroy?.();
+
+	// @ts-expect-error
+	effect.fn =
+		effect.effects =
+		effect.teardown =
+		effect.ondestroy =
+		effect.ctx =
+		effect.block =
+		effect.deps =
 			null;
 }
+
+/**
+ * When a block effect is removed, we don't immediately destroy it or yank it
+ * out of the DOM, because it might have transitions. Instead, we 'pause' it.
+ * It stays around (in memory, and in the DOM) until outro transitions have
+ * completed, and if the state change is reversed then we _resume_ it.
+ * A paused effect does not update, and the DOM subtree becomes inert.
+ * @param {import('#client').Effect} effect
+ * @param {() => void} callback
+ */
+export function pause_effect(effect, callback = noop) {
+	/** @type {import('#client').TransitionManager[]} */
+	const transitions = [];
+
+	pause_children(effect, transitions, true);
+
+	let remaining = transitions.length;
+
+	if (remaining > 0) {
+		const check = () => {
+			if (!--remaining) {
+				destroy_effect(effect);
+				callback();
+			}
+		};
+
+		for (const transition of transitions) {
+			transition.out(check);
+		}
+	} else {
+		destroy_effect(effect);
+		callback();
+	}
+}
+
+/**
+ * @param {import('#client').Effect} effect
+ * @param {import('#client').TransitionManager[]} transitions
+ * @param {boolean} local
+ */
+function pause_children(effect, transitions, local) {
+	if ((effect.f & INERT) !== 0) return;
+	effect.f ^= INERT;
+
+	if (effect.transitions !== null) {
+		for (const transition of effect.transitions) {
+			if (transition.is_global || local) {
+				transitions.push(transition);
+			}
+		}
+	}
+
+	if (effect.effects !== null) {
+		for (const child of effect.effects) {
+			var transparent = (child.f & IS_ELSEIF) !== 0 || (child.f & MANAGED) !== 0;
+			pause_children(child, transitions, transparent ? local : false);
+		}
+	}
+}
+
+/**
+ * The opposite of `pause_effect`. We call this if (for example)
+ * `x` becomes falsy then truthy: `{#if x}...{/if}`
+ * @param {import('#client').Effect} effect
+ */
+export function resume_effect(effect) {
+	resume_children(effect, true);
+}
+
+/**
+ * @param {import('#client').Effect} effect
+ * @param {boolean} local
+ */
+function resume_children(effect, local) {
+	if ((effect.f & INERT) === 0) return;
+	effect.f ^= INERT;
+
+	// If a dependency of this effect changed while it was paused,
+	// apply the change now
+	if (check_dirtiness(effect)) {
+		execute_effect(effect);
+	}
+
+	if (effect.effects !== null) {
+		for (const child of effect.effects) {
+			var transparent = (child.f & IS_ELSEIF) !== 0 || (child.f & MANAGED) !== 0;
+			resume_children(child, transparent ? local : false);
+		}
+	}
+
+	if (effect.transitions !== null) {
+		for (const transition of effect.transitions) {
+			if (transition.is_global || local) {
+				transition.in();
+			}
+		}
+	}
+}
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 7006a7a71f..c0aceff874 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -1,4 +1,4 @@
-import type { Block, ComponentContext, Equals } from '#client';
+import type { Block, ComponentContext, Equals, TransitionManager } from '#client';
 import type { EFFECT, PRE_EFFECT, RENDER_EFFECT } from '../constants';
 
 export type EffectType = typeof EFFECT | typeof PRE_EFFECT | typeof RENDER_EFFECT;
@@ -21,7 +21,7 @@ export interface Value<V = unknown> extends Signal {
 
 export interface Reaction extends Signal {
 	/** The reaction function */
-	fn: null | Function;
+	fn: Function;
 	/** Signals that this signal reads from */
 	deps: null | Value[];
 	/** Effects created inside this signal */
@@ -36,6 +36,7 @@ export interface Derived<V = unknown> extends Value<V>, Reaction {
 }
 
 export interface Effect extends Reaction {
+	parent: Effect | null;
 	/** The block associated with this effect */
 	block: null | Block;
 	/** The associated component context */
@@ -43,11 +44,13 @@ export interface Effect extends Reaction {
 	/** Stuff to do when the effect is destroyed */
 	ondestroy: null | (() => void);
 	/** The effect function */
-	fn: null | (() => void | (() => void)) | ((b: Block, s: Signal) => void | (() => void));
+	fn: () => void | (() => void);
 	/** The teardown function returned from the effect function */
 	teardown: null | (() => void);
 	/** The depth from the root signal, used for ordering render/pre-effects topologically **/
 	l: number;
+	/** Transition managers created with `$.transition` */
+	transitions: null | TransitionManager[];
 }
 
 export interface ValueDebug<V = unknown> extends Value<V> {
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index 70d8ba31a1..c6d20d4be7 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -12,7 +12,6 @@ import {
 	set_current_hydration_fragment
 } from './dom/hydration.js';
 import { array_from } from './utils.js';
-import { ROOT_BLOCK } from './constants.js';
 import { handle_event_propagation } from './dom/elements/events.js';
 
 /** @type {Set<string>} */
@@ -21,6 +20,18 @@ export const all_registered_events = new Set();
 /** @type {Set<(events: Array<string>) => void>} */
 export const root_event_handles = new Set();
 
+/**
+ * This is normally true — block effects should run their intro transitions —
+ * but is false during hydration and mounting (unless `options.intro` is `true`)
+ * and when creating the children of a `<svelte:element>` that just changed tag
+ */
+export let should_intro = true;
+
+/** @param {boolean} value */
+export function set_should_intro(value) {
+	should_intro = value;
+}
+
 /**
  * @param {Element} dom
  * @param {() => string} value
@@ -51,19 +62,19 @@ export function text(dom, value) {
 }
 
 /**
- * @param {Comment} anchor_node
+ * @param {Comment} anchor
  * @param {void | ((anchor: Comment, slot_props: Record<string, unknown>) => void)} slot_fn
  * @param {Record<string, unknown>} slot_props
  * @param {null | ((anchor: Comment) => void)} fallback_fn
  */
-export function slot(anchor_node, slot_fn, slot_props, fallback_fn) {
-	hydrate_block_anchor(anchor_node);
+export function slot(anchor, slot_fn, slot_props, fallback_fn) {
+	hydrate_block_anchor(anchor);
 	if (slot_fn === undefined) {
 		if (fallback_fn !== null) {
-			fallback_fn(anchor_node);
+			fallback_fn(anchor);
 		}
 	} else {
-		slot_fn(anchor_node, slot_props);
+		slot_fn(anchor, slot_props);
 	}
 }
 
@@ -198,6 +209,8 @@ function _mount(Component, options) {
 	const registered_events = new Set();
 	const container = options.target;
 
+	should_intro = options.intro ?? false;
+
 	/** @type {import('#client').RootBlock} */
 	const block = {
 		// dom
@@ -207,11 +220,7 @@ function _mount(Component, options) {
 		// intro
 		i: options.intro || false,
 		// parent
-		p: null,
-		// transition
-		r: null,
-		// type
-		t: ROOT_BLOCK
+		p: null
 	};
 
 	/** @type {Exports} */
@@ -246,6 +255,8 @@ function _mount(Component, options) {
 	const bound_event_listener = handle_event_propagation.bind(null, container);
 	const bound_document_event_listener = handle_event_propagation.bind(null, document);
 
+	should_intro = true;
+
 	/** @param {Array<string>} events */
 	const event_handle = (events) => {
 		for (let i = 0; i < events.length; i++) {
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 745342bf6e..fe2c323c32 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -21,7 +21,8 @@ import {
 	DESTROYED,
 	INERT,
 	MANAGED,
-	STATE_SYMBOL
+	STATE_SYMBOL,
+	EFFECT_RAN
 } from './constants.js';
 import { flush_tasks } from './dom/task.js';
 import { add_owner } from './dev/ownership.js';
@@ -54,9 +55,19 @@ let flush_count = 0;
 /** @type {null | import('./types.js').Reaction} */
 export let current_reaction = null;
 
+/** @param {null | import('./types.js').Reaction} reaction */
+export function set_current_reaction(reaction) {
+	current_reaction = reaction;
+}
+
 /** @type {null | import('./types.js').Effect} */
 export let current_effect = null;
 
+/** @param {null | import('./types.js').Effect} effect */
+export function set_current_effect(effect) {
+	current_effect = effect;
+}
+
 /** @type {null | import('./types.js').Value[]} */
 export let current_dependencies = null;
 let current_dependencies_index = 0;
@@ -104,6 +115,11 @@ export let current_block = null;
 /** @type {import('./types.js').ComponentContext | null} */
 export let current_component_context = null;
 
+/** @param {import('./types.js').ComponentContext | null} context */
+export function set_current_component_context(context) {
+	current_component_context = context;
+}
+
 /** @returns {boolean} */
 export function is_runes() {
 	return current_component_context !== null && current_component_context.r;
@@ -147,7 +163,7 @@ export function batch_inspect(target, prop, receiver) {
  * @param {import('./types.js').Reaction} reaction
  * @returns {boolean}
  */
-function check_dirtiness(reaction) {
+export function check_dirtiness(reaction) {
 	var flags = reaction.f;
 
 	if ((flags & DIRTY) !== 0) {
@@ -200,7 +216,6 @@ function check_dirtiness(reaction) {
 export function execute_reaction_fn(signal) {
 	const fn = signal.fn;
 	const flags = signal.f;
-	const is_render_effect = (flags & RENDER_EFFECT) !== 0;
 
 	const previous_dependencies = current_dependencies;
 	const previous_dependencies_index = current_dependencies_index;
@@ -217,19 +232,7 @@ export function execute_reaction_fn(signal) {
 	current_untracking = false;
 
 	try {
-		let res;
-		if (is_render_effect) {
-			res = /** @type {(block: import('#client').Block, signal: import('#client').Signal) => V} */ (
-				fn
-			)(
-				/** @type {import('#client').Block} */ (
-					/** @type {import('#client').Effect} */ (signal).block
-				),
-				/** @type {import('#client').Signal} */ (signal)
-			);
-		} else {
-			res = /** @type {() => V} */ (fn)();
-		}
+		let res = fn();
 		let dependencies = /** @type {import('./types.js').Value<unknown>[]} **/ (signal.deps);
 		if (current_dependencies !== null) {
 			let i;
@@ -548,6 +551,8 @@ export function schedule_effect(signal, sync) {
 			}
 		}
 	}
+
+	signal.f |= EFFECT_RAN;
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/timing.js b/packages/svelte/src/internal/client/timing.js
index 161e92a733..241fdcec73 100644
--- a/packages/svelte/src/internal/client/timing.js
+++ b/packages/svelte/src/internal/client/timing.js
@@ -9,5 +9,6 @@ const now = is_client ? () => performance.now() : () => Date.now();
 /** @type {import('./types.js').Raf} */
 export const raf = {
 	tick: /** @param {any} _ */ (_) => request_animation_frame(_),
-	now: () => now()
+	now: () => now(),
+	tasks: new Set()
 };
diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts
index e4f776715a..489f786b23 100644
--- a/packages/svelte/src/internal/client/types.d.ts
+++ b/packages/svelte/src/internal/client/types.d.ts
@@ -1,16 +1,4 @@
-import {
-	ROOT_BLOCK,
-	EACH_BLOCK,
-	EACH_ITEM_BLOCK,
-	IF_BLOCK,
-	AWAIT_BLOCK,
-	KEY_BLOCK,
-	HEAD_BLOCK,
-	DYNAMIC_COMPONENT_BLOCK,
-	DYNAMIC_ELEMENT_BLOCK,
-	SNIPPET_BLOCK,
-	STATE_SYMBOL
-} from './constants.js';
+import { STATE_SYMBOL } from './constants.js';
 import type { Effect, Source, Value } from './reactivity/types.js';
 
 type EventCallback = (event: Event) => boolean;
@@ -59,42 +47,8 @@ export type ComponentContext = {
 
 export type Equals = (this: Value, value: unknown) => boolean;
 
-export type BlockType =
-	| typeof ROOT_BLOCK
-	| typeof EACH_BLOCK
-	| typeof EACH_ITEM_BLOCK
-	| typeof IF_BLOCK
-	| typeof AWAIT_BLOCK
-	| typeof KEY_BLOCK
-	| typeof SNIPPET_BLOCK
-	| typeof HEAD_BLOCK
-	| typeof DYNAMIC_COMPONENT_BLOCK
-	| typeof DYNAMIC_ELEMENT_BLOCK;
-
 export type TemplateNode = Text | Element | Comment;
 
-export type Transition = {
-	/** effect */
-	e: Effect;
-	/** payload */
-	p: null | TransitionPayload;
-	/** init */
-	i: (from?: DOMRect) => TransitionPayload;
-	/** finished */
-	f: (fn: () => void) => void;
-	in: () => void;
-	/** out */
-	o: () => void;
-	/** cancel */
-	c: () => void;
-	/** cleanup */
-	x: () => void;
-	/** direction */
-	r: 'in' | 'out' | 'both' | 'key';
-	/** dom */
-	d: HTMLElement;
-};
-
 export type RootBlock = {
 	/** dom */
 	d: null | TemplateNode | Array<TemplateNode>;
@@ -104,10 +58,6 @@ export type RootBlock = {
 	i: boolean;
 	/** parent */
 	p: null;
-	/** transition */
-	r: null | ((transition: Transition) => void);
-	/** type */
-	t: typeof ROOT_BLOCK;
 };
 
 export type IfBlock = {
@@ -119,31 +69,6 @@ export type IfBlock = {
 	e: null | Effect;
 	/** parent */
 	p: Block;
-	/** transition */
-	r: null | ((transition: Transition) => void);
-	/** consequent transitions */
-	c: null | Set<Transition>;
-	/** alternate transitions */
-	a: null | Set<Transition>;
-	/** effect */
-	ce: null | Effect;
-	/** effect */
-	ae: null | Effect;
-	/** type */
-	t: typeof IF_BLOCK;
-};
-
-export type KeyBlock = {
-	/** dom */
-	d: null | TemplateNode | Array<TemplateNode>;
-	/** effect */
-	e: null | Effect;
-	/** parent */
-	p: Block;
-	/** transition */
-	r: null | ((transition: Transition) => void);
-	/** type */
-	t: typeof KEY_BLOCK;
 };
 
 export type HeadBlock = {
@@ -153,10 +78,6 @@ export type HeadBlock = {
 	e: null | Effect;
 	/** parent */
 	p: Block;
-	/** transition */
-	r: null | ((transition: Transition) => void);
-	/** type */
-	t: typeof HEAD_BLOCK;
 };
 
 export type DynamicElementBlock = {
@@ -166,10 +87,6 @@ export type DynamicElementBlock = {
 	e: null | Effect;
 	/** parent */
 	p: Block;
-	/** transition */
-	r: null | ((transition: Transition) => void);
-	/** type */
-	t: typeof DYNAMIC_ELEMENT_BLOCK;
 };
 
 export type DynamicComponentBlock = {
@@ -179,10 +96,6 @@ export type DynamicComponentBlock = {
 	e: null | Effect;
 	/** parent */
 	p: Block;
-	/** transition */
-	r: null | ((transition: Transition) => void);
-	/** type */
-	t: typeof DYNAMIC_COMPONENT_BLOCK;
 };
 
 export type AwaitBlock = {
@@ -194,15 +107,9 @@ export type AwaitBlock = {
 	p: Block;
 	/** pending */
 	n: boolean;
-	/** transition */
-	r: null | ((transition: Transition) => void);
-	/** type */
-	t: typeof AWAIT_BLOCK;
 };
 
 export type EachBlock = {
-	/** anchor */
-	a: Element | Comment;
 	/** flags */
 	f: number;
 	/** dom */
@@ -213,35 +120,21 @@ export type EachBlock = {
 	e: null | Effect;
 	/** parent */
 	p: Block;
-	/** transition */
-	r: null | ((transition: Transition) => void);
-	/** transitions */
-	s: Array<EachItemBlock>;
-	/** type */
-	t: typeof EACH_BLOCK;
 };
 
 export type EachItemBlock = {
-	/** transition */
-	a: null | ((block: EachItemBlock, transitions: Set<Transition>) => void);
+	/** animation manager */
+	a: AnimationManager | null;
 	/** dom */
 	d: null | TemplateNode | Array<TemplateNode>;
 	/** effect */
-	e: null | Effect;
+	e: Effect;
 	/** item */
 	v: any | Source<any>;
 	/** index */
 	i: number | Source<number>;
 	/** key */
 	k: unknown;
-	/** parent */
-	p: EachBlock;
-	/** transition */
-	r: null | ((transition: Transition) => void);
-	/** transitions */
-	s: null | Set<Transition>;
-	/** type */
-	t: typeof EACH_ITEM_BLOCK;
 };
 
 export type SnippetBlock = {
@@ -251,10 +144,6 @@ export type SnippetBlock = {
 	p: Block;
 	/** effect */
 	e: null | Effect;
-	/** transition */
-	r: null;
-	/** type */
-	t: typeof SNIPPET_BLOCK;
 };
 
 export type Block =
@@ -264,25 +153,54 @@ export type Block =
 	| DynamicElementBlock
 	| DynamicComponentBlock
 	| HeadBlock
-	| KeyBlock
 	| EachBlock
 	| EachItemBlock
 	| SnippetBlock;
 
+export interface TransitionManager {
+	/** Whether the `global` modifier was used (i.e. `transition:fade|global`) */
+	is_global: boolean;
+	/** Called inside `resume_effect` */
+	in: () => void;
+	/** Called inside `pause_effect` */
+	out: (callback?: () => void) => void;
+	/** Called inside `destroy_effect` */
+	stop: () => void;
+}
+
+export interface AnimationManager {
+	/** An element with an `animate:` directive */
+	element: Element;
+	/** Called during keyed each block reconciliation, before updates */
+	measure: () => void;
+	/** Called during keyed each block reconciliation, after updates — this triggers the animation */
+	apply: () => void;
+}
+
+export interface Animation {
+	/** Abort the animation */
+	abort: () => void;
+	/** Allow the animation to continue running, but remove any callback. This prevents the removal of an outroing block if the corresponding intro has a `delay` */
+	deactivate: () => void;
+	/** Resets an animation to its starting state, if it uses `tick`. Exposed as a separate method so that an aborted `out:` can still reset even if the `outro` had already completed */
+	reset: () => void;
+	/** Get the `t` value (between `0` and `1`) of the animation, so that its counterpart can start from the right place */
+	t: (now: number) => number;
+}
+
 export type TransitionFn<P> = (
 	element: Element,
 	props: P,
 	options: { direction?: 'in' | 'out' | 'both' }
-) => TransitionPayload;
+) => AnimationConfig | ((options: { direction?: 'in' | 'out' }) => AnimationConfig);
 
 export type AnimateFn<P> = (
 	element: Element,
 	rects: { from: DOMRect; to: DOMRect },
-	props: P,
-	options: {}
-) => TransitionPayload;
+	props: P
+) => AnimationConfig;
 
-export type TransitionPayload = {
+export type AnimationConfig = {
 	delay?: number;
 	duration?: number;
 	easing?: (t: number) => number;
@@ -307,15 +225,17 @@ export type Render = {
 	d: null | TemplateNode | Array<TemplateNode>;
 	/** effect */
 	e: null | Effect;
-	/** transitions */
-	s: Set<Transition>;
 	/** prev */
 	p: Render | null;
 };
 
 export type Raf = {
+	/** Alias for `requestAnimationFrame`, exposed in such a way that we can override in tests */
 	tick: (callback: (time: DOMHighResTimeStamp) => void) => any;
+	/** Alias for `performance.now()`, exposed in such a way that we can override in tests */
 	now: () => number;
+	/** A set of tasks that will run to completion, unless aborted */
+	tasks: Set<TaskEntry>;
 };
 
 export interface Task {
diff --git a/packages/svelte/tests/animation-helpers.js b/packages/svelte/tests/animation-helpers.js
index 94bb1839a0..a941a643cc 100644
--- a/packages/svelte/tests/animation-helpers.js
+++ b/packages/svelte/tests/animation-helpers.js
@@ -14,6 +14,7 @@ export const raf = {
 			raf.ticks.add(f);
 		};
 		svelte_raf.now = () => raf.time;
+		svelte_raf.tasks.clear();
 	}
 };
 
@@ -31,125 +32,144 @@ function tick(time) {
 }
 
 class Animation {
+	#target;
 	#keyframes;
 	#duration;
-	#timeline_offset;
-	#reversed;
-	#target;
-	#paused;
+
+	#offset = raf.time;
+
+	#finished = () => {};
+	#cancelled = () => {};
+
+	currentTime = 0;
 
 	/**
 	 * @param {HTMLElement} target
 	 * @param {Keyframe[]} keyframes
-	 * @param {{duration?: number}} options
+	 * @param {{ duration: number }} options // TODO add delay
 	 */
-	constructor(target, keyframes, options = {}) {
+	constructor(target, keyframes, { duration }) {
 		this.#target = target;
 		this.#keyframes = keyframes;
-		this.#duration = options.duration || 0;
-		this.#timeline_offset = 0;
-		this.#reversed = false;
-		this.#paused = false;
-		this.onfinish = () => {};
-		this.pending = true;
-		this.currentTime = 0;
-		this.playState = 'running';
-		this.effect = {
-			setKeyframes: (/** @type {Keyframe[]} */ keyframes) => {
-				this.#keyframes = keyframes;
+		this.#duration = duration;
+
+		// Promise-like semantics, but call callbacks immediately on raf.tick
+		this.finished = {
+			/** @param {() => void} callback */
+			then: (callback) => {
+				this.#finished = callback;
+
+				return {
+					/** @param {() => void} callback */
+					catch: (callback) => {
+						this.#cancelled = callback;
+					}
+				};
 			}
 		};
-	}
 
-	play() {
-		this.#paused = false;
-		raf.animations.add(this);
-		this.playState = 'running';
 		this._update();
 	}
 
 	_update() {
-		if (this.#reversed) {
-			if (this.#timeline_offset === 0) {
-				this.currentTime = this.#duration - raf.time;
-			} else {
-				this.currentTime = this.#timeline_offset + (this.#timeline_offset - raf.time);
-			}
-		} else {
-			this.currentTime = raf.time - this.#timeline_offset;
-		}
+		this.currentTime = raf.time - this.#offset;
 		const target_frame = this.currentTime / this.#duration;
-		this._applyKeyFrame(target_frame);
+		this.#apply_keyframe(target_frame);
+
+		if (this.currentTime >= this.#duration) {
+			this.#finished();
+			raf.animations.delete(this);
+		}
 	}
 
 	/**
-	 * @param {number} target_frame
+	 * @param {number} t
 	 */
-	_applyKeyFrame(target_frame) {
-		const keyframes = this.#keyframes;
-		const keyframes_size = keyframes.length - 1;
-		const frame = keyframes[Math.min(keyframes_size, Math.floor(keyframes.length * target_frame))];
+	#apply_keyframe(t) {
+		const n = Math.min(1, Math.max(0, t)) * (this.#keyframes.length - 1);
+
+		const lower = this.#keyframes[Math.floor(n)];
+		const upper = this.#keyframes[Math.ceil(n)];
+
+		let frame = lower;
+		if (lower !== upper) {
+			frame = {};
+
+			for (const key in lower) {
+				frame[key] = interpolate(
+					/** @type {string} */ (lower[key]),
+					/** @type {string} */ (upper[key]),
+					n % 1
+				);
+			}
+		}
+
 		for (let prop in frame) {
 			// @ts-ignore
 			this.#target.style[prop] = frame[prop];
 		}
-		if (this.#reversed) {
-			if (this.currentTime <= 0) {
-				this.finish();
-				for (let prop in frame) {
-					// @ts-ignore
-					this.#target.style[prop] = null;
-				}
-			}
-		} else {
-			if (this.currentTime >= this.#duration) {
-				this.finish();
-				for (let prop in frame) {
-					// @ts-ignore
-					this.#target.style[prop] = null;
-				}
-			}
-		}
-	}
 
-	finish() {
-		this.onfinish();
-		this.currentTime = this.#reversed ? 0 : this.#duration;
-		if (this.#reversed) {
-			raf.animations.delete(this);
+		if (this.currentTime >= this.#duration) {
+			this.currentTime = this.#duration;
+			for (let prop in frame) {
+				// @ts-ignore
+				this.#target.style[prop] = null;
+			}
 		}
-		this.playState = 'idle';
 	}
 
 	cancel() {
-		this.#paused = true;
 		if (this.currentTime > 0 && this.currentTime < this.#duration) {
-			this._applyKeyFrame(this.#reversed ? this.#keyframes.length - 1 : 0);
+			this.#apply_keyframe(0);
 		}
-	}
 
-	pause() {
-		this.#paused = true;
-		this.playState = 'paused';
+		this.#cancelled();
+		raf.animations.delete(this);
 	}
+}
+
+/**
+ * @param {string} a
+ * @param {string} b
+ * @param {number} p
+ */
+function interpolate(a, b, p) {
+	if (a === b) return a;
+
+	const fallback = p < 0.5 ? a : b;
+
+	const a_match = a.match(/[\d.]+|[^\d.]+/g);
+	const b_match = b.match(/[\d.]+|[^\d.]+/g);
+
+	if (!a_match || !b_match) return fallback;
+	if (a_match.length !== b_match.length) return fallback;
 
-	reverse() {
-		if (this.#paused && !raf.animations.has(this)) {
-			raf.animations.add(this);
+	let result = '';
+
+	for (let i = 0; i < a_match.length; i += 2) {
+		const a_num = parseFloat(a_match[i]);
+		const b_num = parseFloat(b_match[i]);
+		result += a_num + (b_num - a_num) * p;
+
+		if (a_match[i + 1] !== b_match[i + 1]) {
+			// bail
+			return fallback;
 		}
-		this.#timeline_offset = this.currentTime;
-		this.#reversed = !this.#reversed;
-		this.playState = 'running';
+
+		result += a_match[i + 1] ?? '';
 	}
+
+	return result;
 }
 
 /**
  * @param {Keyframe[]} keyframes
- * @param {{duration?: number}} options
+ * @param {{duration: number}} options
  * @returns {globalThis.Animation}
  */
 HTMLElement.prototype.animate = function (keyframes, options) {
 	const animation = new Animation(this, keyframes, options);
+	raf.animations.add(animation);
 	// @ts-ignore
 	return animation;
 };
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/Component.svelte b/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/Component.svelte
index be0c7e36b0..f1f5971a06 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/Component.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/Component.svelte
@@ -1,11 +1,13 @@
 <script>
 	import { onMount } from 'svelte';
-  export let logs;
-  export let state;
+
+	export let logs;
+	export let state;
+
 	onMount(() => {
-    logs.push(`mount ${state}`);
+		logs.push(`mount ${state}`);
 		return () => {
-      logs.push(`unmount ${state}`);
+			logs.push(`unmount ${state}`);
 		};
 	});
 </script>
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/main.svelte b/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/main.svelte
index 245304be83..d8dc75288b 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/main.svelte
@@ -6,7 +6,7 @@
 	let resolve;
 	let value = 0;
 	export let logs = [];
-	
+
 	async function new_promise() {
 		promise = new Promise(r => {
 			resolve = r;
@@ -20,7 +20,7 @@
 
 	export async function test() {
 		resolve_promise();
-		await Promise.resolve();
+		await tick();
 		new_promise();
 		resolve_promise();
 		return tick();
@@ -33,4 +33,4 @@
 	Loading...
 {:then state}
 	<Component {state} {logs} />
-{/await}
\ No newline at end of file
+{/await}
diff --git a/packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js b/packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js
index 3df138e99a..6e3f7a3cb7 100644
--- a/packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js
@@ -18,7 +18,7 @@ export default test({
 		raf.tick(150);
 		assert.htmlEqual(
 			target.innerHTML,
-			'<p>foo</p><p class="red svelte-1yszte8 border" style="overflow: hidden; opacity: 0; border-top-width: 0.5000600024000317px; border-bottom-width: 0.5000600024000317px;">bar</p>'
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="overflow: hidden; opacity: 0; border-top-width: 0.5px; border-bottom-width: 0.5px;">bar</p>'
 		);
 		component.open = true;
 		raf.tick(250);
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/_config.js b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/_config.js
index 6315a32d86..3d127f1375 100644
--- a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/_config.js
@@ -23,7 +23,6 @@ export default test({
 	`,
 
 	test({ assert, component, target, raf }) {
-		raf.tick(0);
 		component.tag = 'p';
 		assert.equal(target.querySelectorAll('p').length, 5);
 
@@ -52,11 +51,11 @@ export default test({
 		];
 
 		divs = target.querySelectorAll('div');
-		assert.ok(~divs[0].style.transform);
-		assert.equal(divs[1].style.transform, 'translate(1px, 0px)');
-		assert.equal(divs[2].style.transform, 'translate(1px, 0px)');
-		assert.equal(divs[3].style.transform, 'translate(1px, 0px)');
-		assert.ok(~divs[4].style.transform);
+		assert.equal(divs[0].style.transform, 'translate(0px, 120px)');
+		assert.equal(divs[1].style.transform, '');
+		assert.equal(divs[2].style.transform, '');
+		assert.equal(divs[3].style.transform, '');
+		assert.equal(divs[4].style.transform, 'translate(0px, -120px)');
 
 		raf.tick(100);
 		assert.deepEqual([divs[0].style.transform, divs[4].style.transform], ['', '']);
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/main.svelte b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/main.svelte
index 596d12c77a..0fa9fecf30 100644
--- a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/main.svelte
@@ -8,11 +8,11 @@
 
 		return {
 			duration: 100,
-			css: (t, u) => `transform: translate(${u + dx}px, ${u * dy}px)`
+			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px)`
 		};
 	}
 </script>
 
 {#each things as thing (thing.id)}
 	<svelte:element this={tag} animate:flip>{thing.name}</svelte:element>
-{/each}
\ No newline at end of file
+{/each}
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-transition/_config.js b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-transition/_config.js
index 842a3f8f5f..6b55bcf44c 100644
--- a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-transition/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-transition/_config.js
@@ -15,8 +15,9 @@ export default test({
 		assert.equal(h1.style.opacity, '');
 		assert.equal(h2.style.opacity, '');
 
-		raf.tick(50);
+		raf.tick(200);
 		component.visible = false;
-		assert.equal(h2.style.opacity, '0.49998000000000004');
+		raf.tick(250);
+		assert.equal(h2.style.opacity, '0.5');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-css-deferred-removal/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-css-deferred-removal/_config.js
index 99f60053d4..909c93d969 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-css-deferred-removal/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-css-deferred-removal/_config.js
@@ -1,4 +1,4 @@
-import { ok, test } from '../../test';
+import { test } from '../../test';
 
 export default test({
 	get props() {
@@ -8,14 +8,11 @@ export default test({
 	test({ assert, component, target, raf }) {
 		component.visible = false;
 
+		raf.tick(150);
+
 		const outer = /** @type {HTMLSpanElement} */ (target.querySelector('.outer'));
 		const inner = /** @type {HTMLSpanElement} */ (target.querySelector('.inner'));
 
-		raf.tick(150);
-
-		assert.deepEqual(
-			[outer.style.cssText, inner.style.cssText],
-			['opacity: 0.24999000000000002;', '']
-		);
+		assert.deepEqual([outer.style.cssText, inner.style.cssText], ['opacity: 0.25;', '']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-css-duration/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-css-duration/_config.js
index d681f74c7c..6567c552e1 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-css-duration/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-css-duration/_config.js
@@ -6,14 +6,12 @@ export default test({
 		const div = target.querySelector('div');
 		ok(div);
 
-		raf.tick(25);
-
-		assert.equal(div.style.opacity, '0.16666');
+		raf.tick(50);
+		assert.equal(div.style.opacity, '0.5');
 
 		component.visible = false;
 
-		raf.tick(40);
-
-		assert.ok(div.style.opacity === '0');
+		raf.tick(75);
+		assert.equal(div.style.opacity, '0.25');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/Foo.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/Foo.svelte
index c79672f21b..bca4e93daa 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/Foo.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/Foo.svelte
@@ -13,4 +13,4 @@
 
 {#if visible}
 	<div transition:foo></div>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/_config.js
index 271ae50883..255de7dca7 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/_config.js
@@ -5,6 +5,7 @@ export default test({
 	async test({ assert, component, target, raf }) {
 		const frame = /** @type {HTMLIFrameElement} */ (target.querySelector('iframe'));
 		await tick();
+		await tick(); // TODO investigate why this second tick is necessary. without it, `Foo.svelte` initializes with `visible = true`, incorrectly
 
 		component.visible = true;
 		const div = frame.contentDocument?.querySelector('div');
@@ -14,8 +15,10 @@ export default test({
 
 		component.visible = false;
 
-		raf.tick(26);
-		// The exact number doesn't matter here, this test is about ensuring that transitions work in iframes
-		assert.equal(Number(div.style.opacity).toFixed(4), '0.8333');
+		raf.tick(25);
+		assert.equal(div.style.opacity, '0.25');
+
+		raf.tick(35);
+		assert.equal(div.style.opacity, '0.18333333333333335');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/_config.js
index 7a48af8b5b..3d87dc6e10 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/_config.js
@@ -6,18 +6,27 @@ export default test({
 		const div = target.querySelector('div');
 		ok(div);
 
-		assert.equal(div.style.opacity, '0');
+		assert.equal(div.style.scale, '0');
 
 		raf.tick(50);
 		component.visible = false;
 
 		// both in and out styles
-		assert.equal(div.style.opacity, '0.49998000000000004');
+		assert.equal(div.style.scale, '0.5');
+		assert.equal(div.style.opacity, '1');
+		assert.equal(div.style.rotate, '360deg');
 
 		raf.tick(75);
+
+		assert.equal(div.style.scale, '0.75'); // intro continues while outro plays
+		assert.equal(div.style.opacity, '0.75');
+		assert.equal(div.style.rotate, '270deg');
+
 		component.visible = true;
 
 		// reset original styles
+		assert.equal(div.style.scale, '0');
 		assert.equal(div.style.opacity, '1');
+		assert.equal(div.style.rotate, '360deg');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/main.svelte
index 5108452a39..b82c6da774 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/main.svelte
@@ -5,7 +5,7 @@
 		return {
 			duration: 100,
 			css: t => {
-				return `opacity: ${t}`;
+				return `scale: ${t}`;
 			}
 		};
 	}
@@ -14,7 +14,7 @@
 		return {
 			duration: 100,
 			css: t => {
-				return `opacity: ${t}`;
+				return `rotate: ${t * 360}deg; opacity: ${t}`;
 			}
 		};
 	}
@@ -22,4 +22,4 @@
 
 {#if visible}
 	<div in:foo out:bar></div>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-inert/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-inert/_config.js
index 8679b2fe7f..a474fae9d4 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-inert/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-inert/_config.js
@@ -6,29 +6,26 @@ export default test({
 		const b = target.querySelector('button.b');
 		ok(a);
 		ok(b);
-		// jsdom doesn't set the inert attribute, and the transition checks if it exists, so set it manually to trigger the inert logic
-		a.inert = false;
-		b.inert = false;
 
 		// check and abort halfway through the outro transition
 		component.visible = false;
 		raf.tick(50);
-		assert.strictEqual(target.querySelector('button.a')?.inert, true);
-		assert.strictEqual(target.querySelector('button.b')?.inert, true);
+		assert.ok(target.querySelector('button.a')?.inert);
+		assert.ok(target.querySelector('button.b')?.inert);
 
 		component.visible = true;
-		assert.strictEqual(target.querySelector('button.a')?.inert, false);
-		assert.strictEqual(target.querySelector('button.b')?.inert, false);
+		assert.ok(!target.querySelector('button.a')?.inert);
+		assert.ok(!target.querySelector('button.b')?.inert);
 
 		// let it transition out completely and then back in
 		component.visible = false;
 		raf.tick(101);
 		component.visible = true;
 		raf.tick(150);
-		assert.strictEqual(target.querySelector('button.a')?.inert, false);
-		assert.strictEqual(target.querySelector('button.b')?.inert, false);
+		assert.ok(!target.querySelector('button.a')?.inert);
+		assert.ok(!target.querySelector('button.b')?.inert);
 		raf.tick(151);
-		assert.strictEqual(target.querySelector('button.a')?.inert, false);
-		assert.strictEqual(target.querySelector('button.b')?.inert, false);
+		assert.ok(!target.querySelector('button.a')?.inert);
+		assert.ok(!target.querySelector('button.b')?.inert);
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-aborted-outro-in-each/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-aborted-outro-in-each/_config.js
index a333fe2da5..3216f2a898 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-js-aborted-outro-in-each/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-aborted-outro-in-each/_config.js
@@ -23,8 +23,6 @@ export default test({
 		assert.equal(spans[1].foo, 0.25);
 		assert.equal(spans[2].foo, 0.75);
 
-		raf.tick(7);
-
 		component.things = things;
 
 		raf.tick(225);
@@ -42,8 +40,8 @@ export default test({
 			target.querySelectorAll('span')
 		);
 
-		assert.equal(spans[0].foo, undefined);
-		assert.equal(spans[1].foo, undefined);
-		assert.equal(spans[2].foo, undefined);
+		assert.equal(spans[0].foo, 1);
+		assert.equal(spans[1].foo, 1);
+		assert.equal(spans[2].foo, 1);
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block-outros/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block-outros/_config.js
index b578ef1431..29537d6ff5 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block-outros/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block-outros/_config.js
@@ -14,8 +14,6 @@ export default test({
 	intro: true,
 
 	async test({ assert, target, component, raf }) {
-		raf.tick(0);
-
 		assert.htmlEqual(target.innerHTML, '<p class="pending" foo="0.0">loading...</p>');
 
 		let time = 0;
@@ -24,10 +22,6 @@ export default test({
 		assert.htmlEqual(target.innerHTML, '<p class="pending" foo="0.5">loading...</p>');
 
 		await fulfil(42);
-		await Promise.resolve();
-		await Promise.resolve();
-
-		raf.tick(time);
 
 		assert.htmlEqual(
 			target.innerHTML,
@@ -61,9 +55,6 @@ export default test({
 			fulfil = f;
 		});
 		await Promise.resolve();
-		await Promise.resolve();
-
-		raf.tick(time);
 
 		assert.htmlEqual(
 			target.innerHTML,
@@ -83,11 +74,6 @@ export default test({
 		);
 
 		await fulfil(43);
-		await Promise.resolve();
-		await Promise.resolve();
-
-		raf.tick(time);
-
 		assert.htmlEqual(
 			target.innerHTML,
 			`
@@ -109,9 +95,6 @@ export default test({
 			fulfil = f;
 		});
 		await Promise.resolve();
-		await Promise.resolve();
-
-		raf.tick(time);
 
 		assert.htmlEqual(
 			target.innerHTML,
@@ -132,11 +115,6 @@ export default test({
 		);
 
 		await fulfil(44);
-		await Promise.resolve();
-		await Promise.resolve();
-
-		raf.tick(time);
-
 		assert.htmlEqual(
 			target.innerHTML,
 			`
@@ -159,10 +137,6 @@ export default test({
 			fulfil = f;
 		});
 		await Promise.resolve();
-		await Promise.resolve();
-
-		raf.tick(time);
-
 		assert.htmlEqual(
 			target.innerHTML,
 			`
@@ -172,7 +146,6 @@ export default test({
 		);
 
 		raf.tick((time += 40));
-
 		assert.htmlEqual(
 			target.innerHTML,
 			`
@@ -182,10 +155,6 @@ export default test({
 		);
 
 		await fulfil(45);
-		await Promise.resolve();
-		await Promise.resolve();
-
-		raf.tick(time);
 
 		assert.htmlEqual(
 			target.innerHTML,
@@ -197,7 +166,6 @@ export default test({
 		);
 
 		raf.tick((time += 20));
-
 		assert.htmlEqual(
 			target.innerHTML,
 			`
@@ -211,9 +179,6 @@ export default test({
 			fulfil = f;
 		});
 		await Promise.resolve();
-		await Promise.resolve();
-
-		raf.tick(time);
 
 		assert.htmlEqual(
 			target.innerHTML,
@@ -238,10 +203,6 @@ export default test({
 		);
 
 		await fulfil(46);
-		await Promise.resolve();
-		await Promise.resolve();
-
-		raf.tick(time);
 
 		assert.htmlEqual(
 			target.innerHTML,
@@ -255,7 +216,6 @@ export default test({
 		);
 
 		raf.tick((time += 10));
-
 		assert.htmlEqual(
 			target.innerHTML,
 			`
@@ -265,7 +225,6 @@ export default test({
 		);
 
 		raf.tick((time += 20));
-
 		assert.htmlEqual(
 			target.innerHTML,
 			`
@@ -274,7 +233,6 @@ export default test({
 		);
 
 		raf.tick((time += 70));
-
 		assert.htmlEqual(
 			target.innerHTML,
 			`
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block/_config.js
index 9ec5ba476b..706b306ebb 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block/_config.js
@@ -1,4 +1,4 @@
-import { ok, test } from '../../test';
+import { test } from '../../test';
 
 /** @type {(value: any) => void} */
 let fulfil;
@@ -36,8 +36,8 @@ export default test({
 			);
 			assert.equal(ps[0].className, 'pending');
 			assert.equal(ps[1].className, 'then');
-			assert.equal(ps[0].foo, 0.8);
-			assert.equal(ps[1].foo, undefined);
+			assert.equal(ps[0].foo, 0.2);
+			assert.equal(ps[1].foo, 0.3);
 			raf.tick(100);
 		});
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro-outro/_config.js
index 144dcf03bc..58de002579 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro-outro/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro-outro/_config.js
@@ -35,9 +35,9 @@ export default test({
 		component.visible = true;
 
 		raf.tick(100);
-		assert.equal(divs[0].foo, 1);
-		assert.equal(divs[1].foo, 1);
-		assert.equal(divs[2].foo, 1);
+		assert.equal(divs[0].foo, 0.3);
+		assert.equal(divs[1].foo, 0.3);
+		assert.equal(divs[2].foo, 0.3);
 
 		assert.equal(divs[0].bar, 1);
 		assert.equal(divs[1].bar, 1);
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-intro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-intro/_config.js
index 130cfb9dde..0e8d3022d3 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-intro/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-intro/_config.js
@@ -15,7 +15,7 @@ export default test({
 		raf.tick(500);
 		component.x = true;
 		assert.equal(component.no, null);
-		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.yes.foo, 0);
 
 		raf.tick(700);
 		assert.equal(component.yes.foo, 0.5);
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js
index f80737e8eb..9c741d2b8c 100644
--- a/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js
@@ -11,7 +11,7 @@ export default test({
 			btn?.click();
 		});
 
-		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1><button>Hide</button>`);
+		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1><button style="opacity: 0;">Hide</button>`);
 
 		raf.tick(100);
 
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js
index f80737e8eb..9c741d2b8c 100644
--- a/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js
@@ -11,7 +11,7 @@ export default test({
 			btn?.click();
 		});
 
-		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1><button>Hide</button>`);
+		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1><button style="opacity: 0;">Hide</button>`);
 
 		raf.tick(100);
 

From a339c28bb7a49330032eb423e6e3dcf24cab0c90 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 22 Mar 2024 03:39:01 +0100
Subject: [PATCH 24/26] breaking: apply fallback value every time in runes mode
 (#10797)

* breaking: apply fallback value every time in runes mode

closes #9948

* apply fallback value in setter

* encapsulate fallback logic

* we should keep this logic out of b.set, since it's very specific to accessors

* oops

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/small-spiders-fail.md              |  5 ++
 .../3-transform/client/transform-client.js    | 21 ++++++--
 .../svelte/src/compiler/utils/builders.js     |  9 ++--
 .../src/internal/client/reactivity/props.js   | 45 +++++++++++------
 .../props-default-value-behavior/_config.js   | 10 ++--
 .../_config.js                                | 29 +++++++++++
 .../main.svelte                               | 29 +++++++++++
 .../props-default-value-lazy/_config.js       | 37 +++++++-------
 .../props-default-value-lazy/main.svelte      | 48 ++++++++-----------
 .../props-default-value-lazy/sub.svelte       | 29 +++++++++++
 .../samples/props-spread-fallback/_config.js  |  2 +-
 11 files changed, 191 insertions(+), 73 deletions(-)
 create mode 100644 .changeset/small-spiders-fail.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/sub.svelte

diff --git a/.changeset/small-spiders-fail.md b/.changeset/small-spiders-fail.md
new file mode 100644
index 0000000000..fc7f3a5843
--- /dev/null
+++ b/.changeset/small-spiders-fail.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+breaking: apply fallback value every time in runes mode
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 3d378df563..b13ec8e627 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -255,10 +255,23 @@ export function client_component(source, analysis, options) {
 
 			const key = binding.prop_alias ?? name;
 
-			properties.push(
-				b.get(key, [b.return(b.call(b.id(name)))]),
-				b.set(key, [b.stmt(b.call(b.id(name), b.id('$$value'))), b.stmt(b.call('$.flushSync'))])
-			);
+			const getter = b.get(key, [b.return(b.call(b.id(name)))]);
+
+			const setter = b.set(key, [
+				b.stmt(b.call(b.id(name), b.id('$$value'))),
+				b.stmt(b.call('$.flushSync'))
+			]);
+
+			if (analysis.runes && binding.initial) {
+				// turn `set foo($$value)` into `set foo($$value = expression)`
+				setter.value.params[0] = {
+					type: 'AssignmentPattern',
+					left: b.id('$$value'),
+					right: /** @type {import('estree').Expression} */ (binding.initial)
+				};
+			}
+
+			properties.push(getter, setter);
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js
index bc6df3a8f0..0b837d5daf 100644
--- a/packages/svelte/src/compiler/utils/builders.js
+++ b/packages/svelte/src/compiler/utils/builders.js
@@ -210,7 +210,7 @@ export function function_declaration(id, params, body) {
 /**
  * @param {string} name
  * @param {import('estree').Statement[]} body
- * @returns {import('estree').Property}
+ * @returns {import('estree').Property & { value: import('estree').FunctionExpression}}}
  */
 export function get(name, body) {
 	return prop('get', key(name), function_builder(null, [], block(body)));
@@ -305,11 +305,12 @@ export function object_pattern(properties) {
 }
 
 /**
+ * @template {import('estree').Expression} Value
  * @param {'init' | 'get' | 'set'} kind
  * @param {import('estree').Expression} key
- * @param {import('estree').Expression} value
+ * @param {Value} value
  * @param {boolean} computed
- * @returns {import('estree').Property}
+ * @returns {import('estree').Property & { value: Value }}
  */
 export function prop(kind, key, value, computed = false) {
 	return { type: 'Property', kind, key, value, method: false, shorthand: false, computed };
@@ -355,7 +356,7 @@ export function sequence(expressions) {
 /**
  * @param {string} name
  * @param {import('estree').Statement[]} body
- * @returns {import('estree').Property}
+ * @returns {import('estree').Property & { value: import('estree').FunctionExpression}}
  */
 export function set(name, body) {
 	return prop('set', key(name), function_builder(null, [id('$$value')], block(body)));
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index 586f0e64b1..8cfd5c266a 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -8,7 +8,7 @@ import {
 import { get_descriptor, is_function } from '../utils.js';
 import { mutable_source, set } from './sources.js';
 import { derived } from './deriveds.js';
-import { get, inspect_fn, is_signals_recorded } from '../runtime.js';
+import { get, inspect_fn, is_signals_recorded, untrack } from '../runtime.js';
 import { safe_equals, safe_not_equal } from './equality.js';
 
 /**
@@ -133,16 +133,30 @@ export function spread_props(...props) {
  * @param {Record<string, unknown>} props
  * @param {string} key
  * @param {number} flags
- * @param {V | (() => V)} [initial]
+ * @param {V | (() => V)} [fallback]
  * @returns {(() => V | ((arg: V) => V) | ((arg: V, mutation: boolean) => V))}
  */
-export function prop(props, key, flags, initial) {
+export function prop(props, key, flags, fallback) {
 	var immutable = (flags & PROPS_IS_IMMUTABLE) !== 0;
 	var runes = (flags & PROPS_IS_RUNES) !== 0;
+	var lazy = (flags & PROPS_IS_LAZY_INITIAL) !== 0;
+
 	var prop_value = /** @type {V} */ (props[key]);
 	var setter = get_descriptor(props, key)?.set;
 
-	if (prop_value === undefined && initial !== undefined) {
+	var fallback_value = /** @type {V} */ (fallback);
+	var fallback_dirty = true;
+
+	var get_fallback = () => {
+		if (lazy && fallback_dirty) {
+			fallback_dirty = false;
+			fallback_value = untrack(/** @type {() => V} */ (fallback));
+		}
+
+		return fallback_value;
+	};
+
+	if (prop_value === undefined && fallback !== undefined) {
 		if (setter && runes) {
 			// TODO consolidate all these random runtime errors
 			throw new Error(
@@ -153,19 +167,22 @@ export function prop(props, key, flags, initial) {
 			);
 		}
 
-		// @ts-expect-error would need a cumbersome method overload to type this
-		if ((flags & PROPS_IS_LAZY_INITIAL) !== 0) initial = initial();
-
-		prop_value = /** @type {V} */ (initial);
-
+		prop_value = get_fallback();
 		if (setter) setter(prop_value);
 	}
 
-	var getter = () => {
-		var value = /** @type {V} */ (props[key]);
-		if (value !== undefined) initial = undefined;
-		return value === undefined ? /** @type {V} */ (initial) : value;
-	};
+	var getter = runes
+		? () => {
+				var value = /** @type {V} */ (props[key]);
+				if (value === undefined) return get_fallback();
+				fallback_dirty = true;
+				return value;
+			}
+		: () => {
+				var value = /** @type {V} */ (props[key]);
+				if (value !== undefined) fallback_value = /** @type {V} */ (undefined);
+				return value === undefined ? fallback_value : value;
+			};
 
 	// easy mode — prop is never written to
 	if ((flags & PROPS_IS_UPDATED) === 0) {
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/_config.js b/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/_config.js
index f4b1f09ec9..47f48b5c20 100644
--- a/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/_config.js
@@ -1,6 +1,6 @@
 import { test } from '../../test';
 
-// Tests that default values apply only initially and that they propagate back correctly for bindings
+// Tests that default values apply every time and that they propagate back correctly for bindings
 export default test({
 	// set accessors to false so that $.prop() is also created
 	accessors: false,
@@ -267,7 +267,7 @@ export default test({
 			<p>props undefined:</p>
 			<p>
 				readonly:
-				readonlyWithDefault:
+				readonlyWithDefault: 1
 				binding:
 			</p>
 			<button>set bindings to 5</button>
@@ -276,7 +276,7 @@ export default test({
 			<p>props defined:</p>
 			<p>
 				readonly:
-				readonlyWithDefault:
+				readonlyWithDefault: 1
 				binding:
 			</p>
 			<button>set bindings to 5</button>
@@ -285,7 +285,7 @@ export default test({
 			<p>bindings undefined:</p>
 			<p>
 				readonly:
-				readonlyWithDefault:
+				readonlyWithDefault: 1
 				binding:
 			</p>
 			<button>set bindings to 5</button>
@@ -294,7 +294,7 @@ export default test({
 			<p>bindings defined:</p>
 			<p>
 				readonly:
-				readonlyWithDefault:
+				readonlyWithDefault: 1
 				binding:
 			</p>
 			<button>set bindings to 5</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/_config.js b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/_config.js
new file mode 100644
index 0000000000..0919bdfca9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/_config.js
@@ -0,0 +1,29 @@
+import { test } from '../../test';
+
+// Tests that default values only fire lazily when the prop is undefined, and every time
+export default test({
+	props: {
+		p0: 0,
+		p1: 0,
+		p2: 0,
+		p3: 0
+	},
+	html: `<p>props: 0 0 0 0 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn`,
+	async test({ assert, target, component }) {
+		component.p0 = undefined;
+		component.p1 = undefined;
+		component.p2 = undefined;
+		component.p3 = undefined;
+		// Nuance: these are already undefined in the props, but we're setting them to undefined again,
+		// which calls the fallback value again, even if it will result in the same value. There's no way
+		// to prevent this, and in practise it won't matter - and you shouldn't use accessors in runes mode anyway.
+		component.p4 = undefined;
+		component.p5 = undefined;
+		component.p6 = undefined;
+		component.p7 = undefined;
+		assert.htmlEqual(
+			target.innerHTML,
+			`<p>props: 1 1 1 1 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte
new file mode 100644
index 0000000000..fe2ac37bd3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	let log = $state([]);
+
+	const fallback_value = 1;
+	const nested = {
+		get fallback_value() {
+			log.push('nested.fallback_value');
+			return fallback_value;
+		}
+	}
+	const fallback_fn = () => {
+		log.push('fallback_fn');
+		return fallback_value;
+	}
+
+	const {
+		p0 = 1,
+		p1 = fallback_value,
+		p2 = nested.fallback_value,
+		p3 = fallback_fn(),
+		p4 = 1,
+		p5 = fallback_value,
+		p6 = nested.fallback_value,
+		p7 = fallback_fn()
+	} = $props();
+</script>
+
+<p>props: {p0} {p1} {p2} {p3} {p4} {p5} {p6} {p7}</p>
+<p>log: {log}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/_config.js b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/_config.js
index 7d2e74101b..5016418004 100644
--- a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/_config.js
@@ -1,23 +1,24 @@
+import { tick } from 'svelte';
 import { test } from '../../test';
 
-// Tests that default values only fire lazily when the prop is undefined, and only initially
+// Tests that default values only fire lazily when the prop is undefined, and every time
 export default test({
-	props: {
-		p0: 0,
-		p1: 0,
-		p2: 0,
-		p3: 0
-	},
-	html: `<p>props: 0 0 0 0 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn`,
-	async test({ assert, target, component }) {
-		component.p0 = undefined;
-		component.p1 = undefined;
-		component.p2 = undefined;
-		component.p3 = undefined;
-		component.p4 = undefined;
-		component.p5 = undefined;
-		component.p6 = undefined;
-		component.p7 = undefined;
-		assert.htmlEqual(target.innerHTML, `<p>props: </p><p>log: nested.fallback_value,fallback_fn`);
+	html: `
+	<p>props: 0 0 0 0 1 1 1 1</p>
+	<p>log: nested.fallback_value,fallback_fn</p>
+	<button>Set all to undefined</button>
+	`,
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		btn?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>props: 1 1 1 1 1 1 1 1</p>
+			<p>log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn</p>
+			<button>Set all to undefined</button>
+			`
+		);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/main.svelte
index 9f74c327e0..6e0b9b5894 100644
--- a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/main.svelte
@@ -1,31 +1,25 @@
 <script>
-	let log = $state([]);
+	import Sub from "./sub.svelte";
 
-	const fallback_value = 1;
-	const nested = {
-		get fallback_value() {
-			log.push('nested.fallback_value');
-			log = log;
-			return fallback_value;
-		}
-	}
-	const fallback_fn = () => {
-		log.push('fallback_fn');
-			log = log;
-		return fallback_value;
-	}
-
-	const {
-		p0 = 1,
-		p1 = fallback_value,
-		p2 = nested.fallback_value,
-		p3 = fallback_fn(),
-		p4 = 1,
-		p5 = fallback_value,
-		p6 = nested.fallback_value,
-		p7 = fallback_fn()
-	} = $props();
+	let p0 = $state(0);
+	let p1 = $state(0);
+	let p2 = $state(0);
+	let p3 = $state(0);
+	let p4 = $state();
+	let p5 = $state();
+	let p6 = $state();
+	let p7 = $state();
 </script>
 
-<p>props: {p0} {p1} {p2} {p3} {p4} {p5} {p6} {p7}</p>
-<p>log: {log}</p>
+<Sub {p0} {p1} {p2} {p3} {p4} {p5} {p6} {p7} />
+
+<button onclick={() => {
+  p0 = undefined;
+  p1 = undefined;
+  p2 = undefined;
+  p3 = undefined;
+  p4 = undefined;
+  p5 = undefined;
+  p6 = undefined;
+  p7 = undefined;
+}}>Set all to undefined</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/sub.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/sub.svelte
new file mode 100644
index 0000000000..fe2ac37bd3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/sub.svelte
@@ -0,0 +1,29 @@
+<script>
+	let log = $state([]);
+
+	const fallback_value = 1;
+	const nested = {
+		get fallback_value() {
+			log.push('nested.fallback_value');
+			return fallback_value;
+		}
+	}
+	const fallback_fn = () => {
+		log.push('fallback_fn');
+		return fallback_value;
+	}
+
+	const {
+		p0 = 1,
+		p1 = fallback_value,
+		p2 = nested.fallback_value,
+		p3 = fallback_fn(),
+		p4 = 1,
+		p5 = fallback_value,
+		p6 = nested.fallback_value,
+		p7 = fallback_fn()
+	} = $props();
+</script>
+
+<p>props: {p0} {p1} {p2} {p3} {p4} {p5} {p6} {p7}</p>
+<p>log: {log}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/props-spread-fallback/_config.js b/packages/svelte/tests/runtime-runes/samples/props-spread-fallback/_config.js
index f6be4fbae4..40ad73aa87 100644
--- a/packages/svelte/tests/runtime-runes/samples/props-spread-fallback/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/props-spread-fallback/_config.js
@@ -48,7 +48,7 @@ export default test({
 			`
 				<button>change propA</button>
 				<button>change propB</button>
-				<p>true</p>
+				<p>true fallback</p>
 			`
 		);
 	}

From b91392e5bd756c716e87cbf6b3f4b8924105769f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 22 Mar 2024 10:14:29 -0400
Subject: [PATCH 25/26] chore: tidy up (#10870)

* chore: simplify remove()

* deduplicate
---
 .../svelte/src/internal/client/dom/blocks/if.js   | 15 +++++----------
 .../svelte/src/internal/client/dom/reconciler.js  | 12 ++----------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js
index 82677d0bc4..729fc862d2 100644
--- a/packages/svelte/src/internal/client/dom/blocks/if.js
+++ b/packages/svelte/src/internal/client/dom/blocks/if.js
@@ -90,11 +90,6 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els
 						consequent_fn(anchor);
 						consequent_dom = block.d;
 
-						if (mismatch) {
-							// Set fragment so that Svelte continues to operate in hydration mode
-							set_current_hydration_fragment([]);
-						}
-
 						return () => {
 							// TODO make this unnecessary by linking the dom to the effect,
 							// and removing automatically on teardown
@@ -124,11 +119,6 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els
 						alternate_fn(anchor);
 						alternate_dom = block.d;
 
-						if (mismatch) {
-							// Set fragment so that Svelte continues to operate in hydration mode
-							set_current_hydration_fragment([]);
-						}
-
 						return () => {
 							// TODO make this unnecessary by linking the dom to the effect,
 							// and removing automatically on teardown
@@ -150,6 +140,11 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els
 				});
 			}
 		}
+
+		if (mismatch) {
+			// Set fragment so that Svelte continues to operate in hydration mode
+			set_current_hydration_fragment([]);
+		}
 	}, block);
 
 	if (elseif) {
diff --git a/packages/svelte/src/internal/client/dom/reconciler.js b/packages/svelte/src/internal/client/dom/reconciler.js
index ebd06796bf..81b03bbd2f 100644
--- a/packages/svelte/src/internal/client/dom/reconciler.js
+++ b/packages/svelte/src/internal/client/dom/reconciler.js
@@ -50,18 +50,11 @@ export function insert(current, sibling) {
 
 /**
  * @param {Array<import('../types.js').TemplateNode> | import('../types.js').TemplateNode} current
- * @returns {Element | Comment | Text}
  */
 export function remove(current) {
-	var first_node = current;
 	if (is_array(current)) {
-		var i = 0;
-		var node;
-		for (; i < current.length; i++) {
-			node = current[i];
-			if (i === 0) {
-				first_node = node;
-			}
+		for (var i = 0; i < current.length; i++) {
+			var node = current[i];
 			if (node.isConnected) {
 				node.remove();
 			}
@@ -69,7 +62,6 @@ export function remove(current) {
 	} else if (current.isConnected) {
 		current.remove();
 	}
-	return /** @type {Element | Comment | Text} */ (first_node);
 }
 
 /**

From 04879c53e9ee07edfff4103384d37a207ea7356f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 22 Mar 2024 11:08:13 -0400
Subject: [PATCH 26/26] chore: simplify blocks (#10873)

* reduce some indirection

* update tests

* unify blocks before we kill them

* refactor types, rename some stuff

* simplify

* remove block.e
---
 .../3-transform/client/visitors/template.js   |   6 +
 .../src/internal/client/dom/blocks/await.js   |  18 +--
 .../src/internal/client/dom/blocks/each.js    | 127 ++++++++----------
 .../src/internal/client/dom/blocks/if.js      |  51 +++----
 .../src/internal/client/dom/blocks/key.js     |   4 +-
 .../src/internal/client/dom/blocks/snippet.js |  13 +-
 .../client/dom/blocks/svelte-component.js     |   4 +-
 .../client/dom/blocks/svelte-element.js       |  18 +--
 .../internal/client/dom/blocks/svelte-head.js |  14 +-
 .../src/internal/client/dom/blocks/utils.js   |   7 +
 .../client/dom/elements/transitions.js        |   2 +-
 .../src/internal/client/dom/template.js       |  10 +-
 packages/svelte/src/internal/client/render.js |  14 +-
 .../svelte/src/internal/client/types.d.ts     |  93 +------------
 .../_expected/client/index.svelte.js          |   4 +-
 .../_expected/client/index.svelte.js          |   4 +-
 16 files changed, 125 insertions(+), 264 deletions(-)
 create mode 100644 packages/svelte/src/internal/client/dom/blocks/utils.js

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 6f956a230d..265b09591c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -1282,6 +1282,12 @@ function create_block(parent, name, nodes, context) {
 		// It's important that close is the last statement in the block, as any previous statements
 		// could contain element insertions into the template, which the close statement needs to
 		// know of when constructing the list of current inner elements.
+
+		if (context.path.length > 0) {
+			// this is a block — return DOM so it can be attached directly to the effect
+			close = b.return(close.expression);
+		}
+
 		body.push(close);
 	}
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index d6820c058f..5dcf52d914 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -2,7 +2,6 @@ import { is_promise } from '../../../common.js';
 import { hydrate_block_anchor } from '../hydration.js';
 import { remove } from '../reconciler.js';
 import {
-	current_block,
 	current_component_context,
 	flushSync,
 	set_current_component_context,
@@ -11,20 +10,7 @@ import {
 } from '../../runtime.js';
 import { destroy_effect, pause_effect, render_effect } from '../../reactivity/effects.js';
 import { DESTROYED, INERT } from '../../constants.js';
-
-/** @returns {import('../../types.js').AwaitBlock} */
-export function create_await_block() {
-	return {
-		// dom
-		d: null,
-		// effect
-		e: null,
-		// parent
-		p: /** @type {import('../../types.js').Block} */ (current_block),
-		// pending
-		n: true
-	};
-}
+import { create_block } from './utils.js';
 
 /**
  * @template V
@@ -36,7 +22,7 @@ export function create_await_block() {
  * @returns {void}
  */
 export function await_block(anchor, get_input, pending_fn, then_fn, catch_fn) {
-	const block = create_await_block();
+	const block = create_block();
 
 	const component_context = current_component_context;
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index b815fdc8b0..bc0f035378 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -15,7 +15,7 @@ import {
 } from '../hydration.js';
 import { empty } from '../operations.js';
 import { insert, remove } from '../reconciler.js';
-import { current_block, untrack } from '../../runtime.js';
+import { untrack } from '../../runtime.js';
 import {
 	destroy_effect,
 	pause_effect,
@@ -26,6 +26,7 @@ import {
 import { source, mutable_source, set } from '../../reactivity/sources.js';
 import { is_array, is_frozen, map_get, map_set } from '../../utils.js';
 import { STATE_SYMBOL } from '../../constants.js';
+import { create_block } from './utils.js';
 
 var NEW_BLOCK = -1;
 var LIS_BLOCK = -2;
@@ -33,11 +34,11 @@ var LIS_BLOCK = -2;
 /**
  * The row of a keyed each block that is currently updating. We track this
  * so that `animate:` directives have something to attach themselves to
- * @type {import('#client').EachItemBlock | null}
+ * @type {import('#client').EachItem | null}
  */
 export let current_each_item_block = null;
 
-/** @param {import('#client').EachItemBlock | null} block */
+/** @param {import('#client').EachItem | null} block */
 export function set_current_each_item_block(block) {
 	current_each_item_block = block;
 }
@@ -54,18 +55,10 @@ export function set_current_each_item_block(block) {
  * @returns {void}
  */
 function each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, reconcile_fn) {
-	/** @type {import('#client').EachBlock} */
-	var block = {
-		// dom
-		d: null,
-		// flags
-		f: flags,
-		// items
-		v: [],
-		// effect
-		e: null,
-		p: /** @type {import('#client').Block} */ (current_block)
-	};
+	var block = create_block();
+
+	/** @type {import('#client').EachState} */
+	var state = { flags, items: [] };
 
 	var is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
 	hydrate_block_anchor(is_controlled ? /** @type {Node} */ (anchor.firstChild) : anchor);
@@ -94,7 +87,7 @@ function each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, re
 
 			// If we are working with an array that isn't proxied or frozen, then remove strict equality and ensure the items
 			// are treated as reactive, so they get wrapped in a signal.
-			var flags = block.f;
+			var flags = state.flags;
 			if ((flags & EACH_IS_STRICT_EQUALS) !== 0 && !is_frozen(array) && !(STATE_SYMBOL in array)) {
 				flags ^= EACH_IS_STRICT_EQUALS;
 
@@ -142,7 +135,7 @@ function each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, re
 						break;
 					}
 
-					b_blocks[i] = create_block(array[i], keys?.[i], i, render_fn, flags);
+					b_blocks[i] = create_item(array[i], keys?.[i], i, render_fn, flags);
 
 					// TODO helperise this
 					hydrating_node = /** @type {import('#client').TemplateNode} */ (
@@ -154,12 +147,12 @@ function each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, re
 
 				remove_excess_hydration_nodes(hydration_list, hydrating_node);
 
-				block.v = b_blocks;
+				state.items = b_blocks;
 			}
 
 			if (!hydrating) {
 				// TODO add 'empty controlled block' optimisation here
-				reconcile_fn(array, block, anchor, render_fn, flags, keys);
+				reconcile_fn(array, state, anchor, render_fn, flags, keys);
 			}
 
 			if (fallback_fn !== null) {
@@ -200,17 +193,15 @@ function each(anchor, get_collection, flags, get_key, render_fn, fallback_fn, re
 	);
 
 	effect.ondestroy = () => {
-		for (var b of block.v) {
-			if (b.d !== null) {
-				destroy_effect(b.e);
-				remove(b.d);
+		for (var item of state.items) {
+			if (item.d !== null) {
+				destroy_effect(item.e);
+				remove(item.d);
 			}
 		}
 
 		if (fallback) destroy_effect(fallback);
 	};
-
-	block.e = effect;
 }
 
 /**
@@ -243,55 +234,55 @@ export function each_indexed(anchor, get_collection, flags, render_fn, fallback_
 /**
  * @template V
  * @param {Array<V>} array
- * @param {import('#client').EachBlock} each_block
+ * @param {import('#client').EachState} state
  * @param {Element | Comment | Text} anchor
  * @param {(anchor: null, item: V, index: number | import('#client').Source<number>) => void} render_fn
  * @param {number} flags
  * @returns {void}
  */
-function reconcile_indexed_array(array, each_block, anchor, render_fn, flags) {
-	var a_blocks = each_block.v;
+function reconcile_indexed_array(array, state, anchor, render_fn, flags) {
+	var a_items = state.items;
 
-	var a = a_blocks.length;
+	var a = a_items.length;
 	var b = array.length;
 	var min = Math.min(a, b);
 
-	/** @type {typeof a_blocks} */
-	var b_blocks = Array(b);
+	/** @type {typeof a_items} */
+	var b_items = Array(b);
 
-	var block;
 	var item;
+	var value;
 
 	// update items
 	for (var i = 0; i < min; i += 1) {
-		item = array[i];
-		block = a_blocks[i];
-		b_blocks[i] = block;
-		update_block(block, item, i, flags);
-		resume_effect(block.e);
+		value = array[i];
+		item = a_items[i];
+		b_items[i] = item;
+		update_item(item, value, i, flags);
+		resume_effect(item.e);
 	}
 
 	if (b > a) {
 		// add items
 		for (; i < b; i += 1) {
-			item = array[i];
-			block = create_block(item, null, i, render_fn, flags);
-			b_blocks[i] = block;
-			insert_block(block, anchor);
+			value = array[i];
+			item = create_item(value, null, i, render_fn, flags);
+			b_items[i] = item;
+			insert_item(item, anchor);
 		}
 
-		each_block.v = b_blocks;
+		state.items = b_items;
 	} else if (a > b) {
 		// remove items
 		var remaining = a - b;
 
 		var clear = () => {
 			for (var i = b; i < a; i += 1) {
-				var block = a_blocks[i];
+				var block = a_items[i];
 				if (block.d) remove(block.d);
 			}
 
-			each_block.v = each_block.v.slice(0, b);
+			state.items.length = b;
 		};
 
 		var check = () => {
@@ -301,7 +292,7 @@ function reconcile_indexed_array(array, each_block, anchor, render_fn, flags) {
 		};
 
 		for (; i < a; i += 1) {
-			pause_effect(a_blocks[i].e, check);
+			pause_effect(a_items[i].e, check);
 		}
 	}
 }
@@ -312,20 +303,20 @@ function reconcile_indexed_array(array, each_block, anchor, render_fn, flags) {
  * https://github.com/localvoid/ivi/blob/9f1bd0918f487da5b131941228604763c5d8ef56/packages/ivi/src/client/core.ts#L968
  * @template V
  * @param {Array<V>} array
- * @param {import('#client').EachBlock} each_block
+ * @param {import('#client').EachState} state
  * @param {Element | Comment | Text} anchor
  * @param {(anchor: null, item: V, index: number | import('#client').Source<number>) => void} render_fn
  * @param {number} flags
  * @param {any[]} keys
  * @returns {void}
  */
-function reconcile_tracked_array(array, each_block, anchor, render_fn, flags, keys) {
-	var a_blocks = each_block.v;
+function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
+	var a_blocks = state.items;
 
 	var a = a_blocks.length;
 	var b = array.length;
 
-	/** @type {Array<import('#client').EachItemBlock>} */
+	/** @type {Array<import('#client').EachItem>} */
 	var b_blocks = Array(b);
 
 	var is_animated = (flags & EACH_IS_ANIMATED) !== 0;
@@ -333,7 +324,7 @@ function reconcile_tracked_array(array, each_block, anchor, render_fn, flags, ke
 	var start = 0;
 	var block;
 
-	/** @type {Array<import('#client').EachItemBlock>} */
+	/** @type {Array<import('#client').EachItem>} */
 	var to_destroy = [];
 
 	// Step 1 — trim common suffix
@@ -344,7 +335,7 @@ function reconcile_tracked_array(array, each_block, anchor, render_fn, flags, ke
 		resume_effect(block.e);
 
 		if (should_update) {
-			update_block(block, array[b], b, flags);
+			update_item(block, array[b], b, flags);
 		}
 	}
 
@@ -355,7 +346,7 @@ function reconcile_tracked_array(array, each_block, anchor, render_fn, flags, ke
 		resume_effect(block.e);
 
 		if (should_update) {
-			update_block(block, array[start], start, flags);
+			update_item(block, array[start], start, flags);
 		}
 
 		start += 1;
@@ -365,9 +356,9 @@ function reconcile_tracked_array(array, each_block, anchor, render_fn, flags, ke
 	if (start === a) {
 		// add only
 		while (start < b) {
-			block = create_block(array[start], keys[start], start, render_fn, flags);
+			block = create_item(array[start], keys[start], start, render_fn, flags);
 			b_blocks[start++] = block;
-			insert_block(block, anchor);
+			insert_item(block, anchor);
 		}
 	} else if (start === b) {
 		// remove only
@@ -390,7 +381,7 @@ function reconcile_tracked_array(array, each_block, anchor, render_fn, flags, ke
 			map_set(indexes, keys[i], i);
 		}
 
-		/** @type {Array<import('#client').EachItemBlock>} */
+		/** @type {Array<import('#client').EachItem>} */
 		var to_animate = [];
 		if (is_animated) {
 			// for all blocks that were in both the old and the new list,
@@ -439,17 +430,17 @@ function reconcile_tracked_array(array, each_block, anchor, render_fn, flags, ke
 			var insert = index === NEW_BLOCK;
 
 			if (insert) {
-				block = create_block(array[b], keys[b], b, render_fn, flags);
+				block = create_item(array[b], keys[b], b, render_fn, flags);
 			} else {
 				block = b_blocks[b];
 				if (should_update) {
-					update_block(block, array[b], b, flags);
+					update_item(block, array[b], b, flags);
 				}
 			}
 
 			if (insert || (moved && index !== LIS_BLOCK)) {
 				last_sibling = last_block === undefined ? anchor : get_first_child(last_block);
-				anchor = insert_block(block, last_sibling);
+				anchor = insert_item(block, last_sibling);
 			}
 
 			last_block = b_blocks[b] = block;
@@ -477,7 +468,7 @@ function reconcile_tracked_array(array, each_block, anchor, render_fn, flags, ke
 				if (block.d) remove(block.d);
 			}
 
-			each_block.v = b_blocks;
+			state.items = b_blocks;
 		};
 
 		var check = () => {
@@ -490,7 +481,7 @@ function reconcile_tracked_array(array, each_block, anchor, render_fn, flags, ke
 			pause_effect(block.e, check);
 		}
 	} else {
-		each_block.v = b_blocks;
+		state.items = b_blocks;
 	}
 }
 
@@ -582,17 +573,17 @@ function mark_lis(a) {
 }
 
 /**
- * @param {import('#client').Block} block
+ * @param {import('#client').EachItem} block
  * @param {Text | Element | Comment} sibling
  * @returns {Text | Element | Comment}
  */
-function insert_block(block, sibling) {
+function insert_item(block, sibling) {
 	var current = /** @type {import('#client').TemplateNode} */ (block.d);
 	return insert(current, sibling);
 }
 
 /**
- * @param {import('#client').Block} block
+ * @param {import('#client').EachItem} block
  * @returns {Text | Element | Comment}
  */
 function get_first_child(block) {
@@ -606,13 +597,13 @@ function get_first_child(block) {
 }
 
 /**
- * @param {import('#client').EachItemBlock} block
+ * @param {import('#client').EachItem} block
  * @param {any} item
  * @param {number} index
  * @param {number} type
  * @returns {void}
  */
-function update_block(block, item, index, type) {
+function update_item(block, item, index, type) {
 	if ((type & EACH_ITEM_REACTIVE) !== 0) {
 		set(block.v, item);
 	}
@@ -631,9 +622,9 @@ function update_block(block, item, index, type) {
  * @param {number} index
  * @param {(anchor: null, item: V, index: number | import('#client').Value<number>) => void} render_fn
  * @param {number} flags
- * @returns {import('#client').EachItemBlock}
+ * @returns {import('#client').EachItem}
  */
-function create_block(item, key, index, render_fn, flags) {
+function create_item(item, key, index, render_fn, flags) {
 	var each_item_not_reactive = (flags & EACH_ITEM_REACTIVE) === 0;
 
 	var item_value = each_item_not_reactive
@@ -642,7 +633,7 @@ function create_block(item, key, index, render_fn, flags) {
 			? source(item)
 			: mutable_source(item);
 
-	/** @type {import('#client').EachItemBlock} */
+	/** @type {import('#client').EachItem} */
 	var block = {
 		a: null,
 		// dom
diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js
index 729fc862d2..e03c4dc5af 100644
--- a/packages/svelte/src/internal/client/dom/blocks/if.js
+++ b/packages/svelte/src/internal/client/dom/blocks/if.js
@@ -6,46 +6,32 @@ import {
 	set_current_hydration_fragment
 } from '../hydration.js';
 import { remove } from '../reconciler.js';
-import { current_block } from '../../runtime.js';
 import {
 	destroy_effect,
 	pause_effect,
 	render_effect,
 	resume_effect
 } from '../../reactivity/effects.js';
-
-/** @returns {import('#client').IfBlock} */
-function create_if_block() {
-	return {
-		// dom
-		d: null,
-		// effect
-		e: null,
-		// parent
-		p: /** @type {import('#client').Block} */ (current_block),
-		// value
-		v: false
-	};
-}
+import { create_block } from './utils.js';
 
 /**
  * @param {Comment} anchor
  * @param {() => boolean} get_condition
- * @param {(anchor: Node) => void} consequent_fn
- * @param {null | ((anchor: Node) => void)} alternate_fn
+ * @param {(anchor: Node) => import('#client').TemplateNode | import('#client').TemplateNode[]} consequent_fn
+ * @param {null | ((anchor: Node) => import('#client').TemplateNode | import('#client').TemplateNode[])} alternate_fn
  * @param {boolean} [elseif] True if this is an `{:else if ...}` block rather than an `{#if ...}`, as that affects which transitions are considered 'local'
  * @returns {void}
  */
 export function if_block(anchor, get_condition, consequent_fn, alternate_fn, elseif = false) {
-	const block = create_if_block();
+	const block = create_block();
 
 	hydrate_block_anchor(anchor);
 
-	/** @type {null | import('#client').TemplateNode | Array<import('#client').TemplateNode>} */
-	let consequent_dom = null;
+	/** @type {undefined | import('#client').TemplateNode | Array<import('#client').TemplateNode>} */
+	let consequent_dom;
 
-	/** @type {null | import('#client').TemplateNode | Array<import('#client').TemplateNode>} */
-	let alternate_dom = null;
+	/** @type {undefined | import('#client').TemplateNode | Array<import('#client').TemplateNode>} */
+	let alternate_dom;
 
 	/** @type {import('#client').Effect | null} */
 	let consequent_effect = null;
@@ -87,15 +73,14 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els
 			} else {
 				consequent_effect = render_effect(
 					() => {
-						consequent_fn(anchor);
-						consequent_dom = block.d;
+						consequent_dom = consequent_fn(anchor);
 
 						return () => {
 							// TODO make this unnecessary by linking the dom to the effect,
 							// and removing automatically on teardown
-							if (consequent_dom !== null) {
+							if (consequent_dom !== undefined) {
 								remove(consequent_dom);
-								consequent_dom = null;
+								consequent_dom = undefined;
 							}
 						};
 					},
@@ -116,15 +101,14 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els
 			} else if (alternate_fn) {
 				alternate_effect = render_effect(
 					() => {
-						alternate_fn(anchor);
-						alternate_dom = block.d;
+						alternate_dom = alternate_fn(anchor);
 
 						return () => {
 							// TODO make this unnecessary by linking the dom to the effect,
 							// and removing automatically on teardown
-							if (alternate_dom !== null) {
+							if (alternate_dom !== undefined) {
 								remove(alternate_dom);
-								alternate_dom = null;
+								alternate_dom = undefined;
 							}
 						};
 					},
@@ -154,21 +138,20 @@ export function if_block(anchor, get_condition, consequent_fn, alternate_fn, els
 	if_effect.ondestroy = () => {
 		// TODO make this unnecessary by linking the dom to the effect,
 		// and removing automatically on teardown
-		if (consequent_dom !== null) {
+		if (consequent_dom !== undefined) {
 			remove(consequent_dom);
 		}
 
-		if (alternate_dom !== null) {
+		if (alternate_dom !== undefined) {
 			remove(alternate_dom);
 		}
 
 		if (consequent_effect) {
 			destroy_effect(consequent_effect);
 		}
+
 		if (alternate_effect) {
 			destroy_effect(alternate_effect);
 		}
 	};
-
-	block.e = if_effect;
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/key.js b/packages/svelte/src/internal/client/dom/blocks/key.js
index 7410c5b640..f7cb9c6dee 100644
--- a/packages/svelte/src/internal/client/dom/blocks/key.js
+++ b/packages/svelte/src/internal/client/dom/blocks/key.js
@@ -3,6 +3,7 @@ import { hydrate_block_anchor } from '../hydration.js';
 import { remove } from '../reconciler.js';
 import { pause_effect, render_effect } from '../../reactivity/effects.js';
 import { safe_not_equal } from '../../reactivity/equality.js';
+import { create_block } from './utils.js';
 
 /**
  * @template V
@@ -12,7 +13,7 @@ import { safe_not_equal } from '../../reactivity/equality.js';
  * @returns {void}
  */
 export function key_block(anchor, get_key, render_fn) {
-	const block = {};
+	const block = create_block();
 
 	hydrate_block_anchor(anchor);
 
@@ -43,7 +44,6 @@ export function key_block(anchor, get_key, render_fn) {
 					() => {
 						render_fn(anchor);
 
-						// @ts-expect-error TODO this should be unnecessary
 						const dom = block.d;
 
 						return () => {
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
index 27d3011668..ac45cb6981 100644
--- a/packages/svelte/src/internal/client/dom/blocks/snippet.js
+++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -1,6 +1,7 @@
 import { render_effect } from '../../reactivity/effects.js';
 import { remove } from '../reconciler.js';
-import { current_block, untrack } from '../../runtime.js';
+import { untrack } from '../../runtime.js';
+import { create_block } from './utils.js';
 
 /**
  * @param {() => Function | null | undefined} get_snippet
@@ -9,15 +10,7 @@ import { current_block, untrack } from '../../runtime.js';
  * @returns {void}
  */
 export function snippet(get_snippet, node, ...args) {
-	/** @type {import('#client').SnippetBlock} */
-	const block = {
-		// dom
-		d: null,
-		// parent
-		p: /** @type {import('#client').Block} */ (current_block),
-		// effect
-		e: null
-	};
+	const block = create_block();
 
 	render_effect(() => {
 		// Only rerender when the snippet function itself changes,
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
index a99eb4ce43..86fc548f04 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
@@ -1,6 +1,7 @@
 import { hydrate_block_anchor } from '../hydration.js';
 import { pause_effect, render_effect } from '../../reactivity/effects.js';
 import { remove } from '../reconciler.js';
+import { create_block } from './utils.js';
 
 // TODO this is very similar to `key`, can we deduplicate?
 
@@ -13,7 +14,7 @@ import { remove } from '../reconciler.js';
  * @returns {void}
  */
 export function component(anchor, get_component, render_fn) {
-	const block = {};
+	const block = create_block();
 
 	hydrate_block_anchor(anchor);
 
@@ -46,7 +47,6 @@ export function component(anchor, get_component, render_fn) {
 					() => {
 						render_fn(component);
 
-						// @ts-expect-error TODO this should be unnecessary
 						const dom = block.d;
 
 						return () => {
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index 8e63fcc61b..bfaa47e844 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -8,10 +8,11 @@ import {
 	resume_effect
 } from '../../reactivity/effects.js';
 import { remove } from '../reconciler.js';
-import { current_block } from '../../runtime.js';
 import { is_array } from '../../utils.js';
 import { set_should_intro } from '../../render.js';
 import { current_each_item_block, set_current_each_item_block } from './each.js';
+import { create_block } from './utils.js';
+import { current_block } from '../../runtime.js';
 
 /**
  * @param {import('#client').Block} block
@@ -41,15 +42,8 @@ function swap_block_dom(block, from, to) {
  * @returns {void}
  */
 export function element(anchor, get_tag, is_svg, render_fn) {
-	/** @type {import('#client').DynamicElementBlock} */
-	const block = {
-		// dom
-		d: null,
-		// effect
-		e: null,
-		// parent
-		p: /** @type {import('#client').Block} */ (current_block)
-	};
+	const parent_block = /** @type {import('#client').Block} */ (current_block);
+	const block = create_block();
 
 	hydrate_block_anchor(anchor);
 
@@ -134,7 +128,7 @@ export function element(anchor, get_tag, is_svg, render_fn) {
 					anchor.before(element);
 
 					if (prev_element) {
-						swap_block_dom(block.p, prev_element, element);
+						swap_block_dom(parent_block, prev_element, element);
 						prev_element.remove();
 					}
 				},
@@ -161,6 +155,4 @@ export function element(anchor, get_tag, is_svg, render_fn) {
 			destroy_effect(effect);
 		}
 	};
-
-	block.e = wrapper;
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
index c0916e7a29..bf70cd3e98 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -7,22 +7,14 @@ import {
 import { empty } from '../operations.js';
 import { render_effect } from '../../reactivity/effects.js';
 import { remove } from '../reconciler.js';
-import { current_block } from '../../runtime.js';
+import { create_block } from './utils.js';
 
 /**
  * @param {(anchor: Node | null) => void} render_fn
  * @returns {void}
  */
 export function head(render_fn) {
-	/** @type {import('#client').HeadBlock} */
-	const block = {
-		// dom
-		d: null,
-		// effect
-		e: null,
-		// parent
-		p: /** @type {import('#client').Block} */ (current_block)
-	};
+	const block = create_block();
 
 	// The head function may be called after the first hydration pass and ssr comment nodes may still be present,
 	// therefore we need to skip that when we detect that we're not in hydration mode.
@@ -61,8 +53,6 @@ export function head(render_fn) {
 				remove(current);
 			}
 		};
-
-		block.e = head_effect;
 	} finally {
 		if (is_hydrating) {
 			set_current_hydration_fragment(previous_hydration_fragment);
diff --git a/packages/svelte/src/internal/client/dom/blocks/utils.js b/packages/svelte/src/internal/client/dom/blocks/utils.js
new file mode 100644
index 0000000000..f1214ab68c
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/blocks/utils.js
@@ -0,0 +1,7 @@
+/** @returns {import('#client').Block} */
+export function create_block() {
+	return {
+		// dom
+		d: null
+	};
+}
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index 387089f262..8461122a69 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -77,7 +77,7 @@ const linear = (t) => t;
  * @param {(() => P) | null} get_params
  */
 export function animation(element, get_fn, get_params) {
-	var block = /** @type {import('#client').EachItemBlock} */ (current_each_item_block);
+	var block = /** @type {import('#client').EachItem} */ (current_each_item_block);
 
 	/** @type {DOMRect} */
 	var from;
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 24a0ebb6e0..97a8652c7a 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -178,7 +178,7 @@ export function comment(anchor) {
  * @param {Element | Text} dom
  * @param {boolean} is_fragment
  * @param {null | Text | Comment | Element} anchor
- * @returns {void}
+ * @returns {import('#client').TemplateNode | import('#client').TemplateNode[]}
  */
 function close_template(dom, is_fragment, anchor) {
 	/** @type {import('#client').TemplateNode | Array<import('#client').TemplateNode>} */
@@ -193,22 +193,22 @@ function close_template(dom, is_fragment, anchor) {
 	}
 
 	/** @type {import('#client').Block} */ (current_block).d = current;
+
+	return current;
 }
 
 /**
  * @param {null | Text | Comment | Element} anchor
  * @param {Element | Text} dom
- * @returns {void}
  */
 export function close(anchor, dom) {
-	close_template(dom, false, anchor);
+	return close_template(dom, false, anchor);
 }
 
 /**
  * @param {null | Text | Comment | Element} anchor
  * @param {Element | Text} dom
- * @returns {void}
  */
 export function close_frag(anchor, dom) {
-	close_template(dom, true, anchor);
+	return close_template(dom, true, anchor);
 }
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index c6d20d4be7..7b7f939154 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -211,16 +211,10 @@ function _mount(Component, options) {
 
 	should_intro = options.intro ?? false;
 
-	/** @type {import('#client').RootBlock} */
+	/** @type {import('#client').Block} */
 	const block = {
 		// dom
-		d: null,
-		// effect
-		e: null,
-		// intro
-		i: options.intro || false,
-		// parent
-		p: null
+		d: null
 	};
 
 	/** @type {Exports} */
@@ -251,7 +245,7 @@ function _mount(Component, options) {
 		block,
 		true
 	);
-	block.e = effect;
+
 	const bound_event_listener = handle_event_propagation.bind(null, container);
 	const bound_document_event_listener = handle_event_propagation.bind(null, document);
 
@@ -301,7 +295,7 @@ function _mount(Component, options) {
 		if (dom !== null) {
 			remove(dom);
 		}
-		destroy_effect(/** @type {import('./types.js').Effect} */ (block.e));
+		destroy_effect(effect);
 	});
 
 	return component;
diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts
index 489f786b23..68025ce99a 100644
--- a/packages/svelte/src/internal/client/types.d.ts
+++ b/packages/svelte/src/internal/client/types.d.ts
@@ -49,80 +49,19 @@ export type Equals = (this: Value, value: unknown) => boolean;
 
 export type TemplateNode = Text | Element | Comment;
 
-export type RootBlock = {
+export interface Block {
 	/** dom */
 	d: null | TemplateNode | Array<TemplateNode>;
-	/** effect */
-	e: null | Effect;
-	/** intro */
-	i: boolean;
-	/** parent */
-	p: null;
-};
-
-export type IfBlock = {
-	/** value */
-	v: boolean;
-	/** dom */
-	d: null | TemplateNode | Array<TemplateNode>;
-	/** effect */
-	e: null | Effect;
-	/** parent */
-	p: Block;
-};
-
-export type HeadBlock = {
-	/** dom */
-	d: null | TemplateNode | Array<TemplateNode>;
-	/** effect */
-	e: null | Effect;
-	/** parent */
-	p: Block;
-};
-
-export type DynamicElementBlock = {
-	/** dom */
-	d: null | TemplateNode | Array<TemplateNode>;
-	/** effect */
-	e: null | Effect;
-	/** parent */
-	p: Block;
-};
-
-export type DynamicComponentBlock = {
-	/** dom */
-	d: null | TemplateNode | Array<TemplateNode>;
-	/** effect */
-	e: null | Effect;
-	/** parent */
-	p: Block;
-};
-
-export type AwaitBlock = {
-	/** dom */
-	d: null | TemplateNode | Array<TemplateNode>;
-	/** effect */
-	e: null | Effect;
-	/** parent */
-	p: Block;
-	/** pending */
-	n: boolean;
-};
+}
 
-export type EachBlock = {
+export type EachState = {
 	/** flags */
-	f: number;
-	/** dom */
-	d: null | TemplateNode | Array<TemplateNode>;
+	flags: number;
 	/** items */
-	v: EachItemBlock[];
-	/** effewct */
-	e: null | Effect;
-	/** parent */
-	p: Block;
+	items: EachItem[];
 };
 
-export type EachItemBlock = {
+export type EachItem = {
 	/** animation manager */
 	a: AnimationManager | null;
 	/** dom */
@@ -137,26 +76,6 @@ export type EachItemBlock = {
 	k: unknown;
 };
 
-export type SnippetBlock = {
-	/** dom */
-	d: null | TemplateNode | Array<TemplateNode>;
-	/** parent */
-	p: Block;
-	/** effect */
-	e: null | Effect;
-};
-
-export type Block =
-	| RootBlock
-	| IfBlock
-	| AwaitBlock
-	| DynamicElementBlock
-	| DynamicComponentBlock
-	| HeadBlock
-	| EachBlock
-	| EachItemBlock
-	| SnippetBlock;
-
 export interface TransitionManager {
 	/** Whether the `global` modifier was used (i.e. `transition:fade|global`) */
 	is_global: boolean;
diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
index effa734e1d..3a88121a38 100644
--- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
@@ -21,11 +21,11 @@ export default function Each_string_template($$anchor, $$props) {
 
 			/* Update */
 			$.text_effect(text, () => `${$.stringify($.unwrap(thing))}, `);
-			$.close($$anchor, text);
+			return $.close($$anchor, text);
 		},
 		null
 	);
 
 	$.close_frag($$anchor, fragment);
 	$.pop();
-}
\ No newline at end of file
+}
diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
index f34a4933a3..cbe02d18ad 100644
--- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
@@ -27,10 +27,10 @@ export default function Function_prop_no_getter($$anchor, $$props) {
 
 			/* Update */
 			$.text_effect(text, () => `clicks: ${$.stringify($.get(count))}`);
-			$.close($$anchor, text);
+			return $.close($$anchor, text);
 		}
 	});
 
 	$.close_frag($$anchor, fragment);
 	$.pop();
-}
\ No newline at end of file
+}