diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 2ca1ad0e5a..963eb36f93 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -20,7 +20,7 @@
 		"@lezer/common": "^1.0.4",
 		"@lezer/javascript": "^1.4.7",
 		"@lezer/lr": "^1.3.10",
-		"@rich_harris/svelte-split-pane": "^1.1.3",
+		"@rich_harris/svelte-split-pane": "^2.0.0",
 		"@shikijs/twoslash": "^1.22.0",
 		"@sveltejs/amp": "^1.1.4",
 		"@sveltejs/repl": "workspace:*",
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 2e8332ef6c..571b9e30d8 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -262,19 +262,21 @@
 
 	<div class="top" class:offset={show_editor}>
 		<SplitPane id="main" type="horizontal" min="360px" max="50%" pos="33%">
-			<section slot="a" class="content">
-				<Sidebar
-					bind:sidebar
-					exercise={data.exercise}
-					on:select={(e) => {
-						navigate_to_file(e.detail.file);
-					}}
-				/>
-			</section>
-
-			<section slot="b">
+			{#snippet a()}
+				<section class="content">
+					<Sidebar
+						bind:sidebar
+						exercise={data.exercise}
+						on:select={(e) => {
+							navigate_to_file(e.detail.file);
+						}}
+					/>
+				</section>
+			{/snippet}
+
+			{#snippet b()}
 				<SplitPane type="vertical" min="100px" max="-4.1rem" pos="50%">
-					<section slot="a">
+					{#snippet a()}
 						<SplitPane
 							id="editor"
 							type={mobile ? 'vertical' : 'horizontal'}
@@ -282,51 +284,57 @@
 							max="300px"
 							pos="200px"
 						>
-							<section slot="a" class="navigator">
-								{#if mobile}
-									<button class="file" onclick={() => (show_filetree = !show_filetree)}>
-										{workspace.current.name.replace(
-											data.exercise.scope.prefix,
-											data.exercise.scope.name + '/'
-										) ?? 'Files'}
-									</button>
-								{:else}
-									<Filetree exercise={data.exercise} {workspace} />
-								{/if}
-							</section>
-
-							<section slot="b" class="editor-container">
-								<Editor
-									{workspace}
-									autocomplete_filter={(file) => {
-										return (
-											file.name.startsWith('/src') &&
-											file.name.startsWith(data.exercise.scope.prefix) &&
-											file.name !== '/src/__client.js' &&
-											file.name !== '/src/app.html'
-										);
-									}}
-								/>
-								<ImageViewer selected={workspace.current} />
-
-								{#if mobile && show_filetree}
-									<div class="mobile-filetree">
-										<Filetree mobile exercise={data.exercise} {workspace} />
-									</div>
-								{/if}
-							</section>
+							{#snippet a()}
+								<section class="navigator">
+									{#if mobile}
+										<button class="file" onclick={() => (show_filetree = !show_filetree)}>
+											{workspace.current.name.replace(
+												data.exercise.scope.prefix,
+												data.exercise.scope.name + '/'
+											) ?? 'Files'}
+										</button>
+									{:else}
+										<Filetree exercise={data.exercise} {workspace} />
+									{/if}
+								</section>
+							{/snippet}
+
+							{#snippet b()}
+								<section class="editor-container">
+									<Editor
+										{workspace}
+										autocomplete_filter={(file) => {
+											return (
+												file.name.startsWith('/src') &&
+												file.name.startsWith(data.exercise.scope.prefix) &&
+												file.name !== '/src/__client.js' &&
+												file.name !== '/src/app.html'
+											);
+										}}
+									/>
+									<ImageViewer selected={workspace.current} />
+
+									{#if mobile && show_filetree}
+										<div class="mobile-filetree">
+											<Filetree mobile exercise={data.exercise} {workspace} />
+										</div>
+									{/if}
+								</section>
+							{/snippet}
 						</SplitPane>
-					</section>
-
-					<section slot="b" class="preview">
-						{#if needs_webcontainers(page.data.exercise)}
-							<Output exercise={data.exercise} {paused} {workspace} />
-						{:else}
-							<OutputRollup />
-						{/if}
-					</section>
+					{/snippet}
+
+					{#snippet b()}
+						<section class="preview">
+							{#if needs_webcontainers(page.data.exercise)}
+								<Output exercise={data.exercise} {paused} {workspace} />
+							{:else}
+								<OutputRollup />
+							{/if}
+						</section>
+					{/snippet}
 				</SplitPane>
-			</section>
+			{/snippet}
 		</SplitPane>
 	</div>
 
@@ -446,7 +454,7 @@
 			--pos: 5.4rem !important;
 		}
 
-		:global([data-pane]) :global(.divider) {
+		:global([data-pane]) :global(svelte-split-pane-divider) {
 			cursor: default;
 		}
 	}
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 82480d76cd..99d8b8185d 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -75,7 +75,7 @@
 		"@jridgewell/sourcemap-codec": "^1.4.15",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
-		"@rich_harris/svelte-split-pane": "^1.1.3",
+		"@rich_harris/svelte-split-pane": "^2.0.0",
 		"@rollup/browser": "^4.17.2",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/svelte-json-tree": "^2.2.1",
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 1340f0340f..61a8694d03 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -112,7 +112,7 @@
 	{#if embedded}
 		<Editor workspace={js_workspace} />
 	{:else}
-		<PaneWithPanel pos="50%" panel="Compiler options">
+		<PaneWithPanel pos="50%" max="-4.2rem" panel="Compiler options">
 			<div slot="main">
 				<Editor workspace={js_workspace} />
 			</div>
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index f4831419d9..a5cd9cc634 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
 	import { spring } from 'svelte/motion';
-	import { SplitPane } from '@rich_harris/svelte-split-pane';
-	import type { ComponentProps } from 'svelte';
+	import { SplitPane, type Length } from '@rich_harris/svelte-split-pane';
 
 	const UNIT_REGEX = /(\d+)(?:(px|rem|%|em))/i;
 
 	export let panel: string;
 
-	export let pos: Exclude<ComponentProps<SplitPane>['pos'], undefined> = '90%';
+	export let pos: Length = '90%';
 
 	$: previous_pos = Math.min(+pos.replace(UNIT_REGEX, '$1'), 70);
 
-	let max: Exclude<ComponentProps<SplitPane>['max'], undefined> = '90%';
+	export let max: Length = '90%';
 
 	// we can't bind to the spring itself, but we
 	// can still use the spring to drive `pos`
@@ -32,26 +31,30 @@
 			driver.set(previous_pos);
 		} else {
 			previous_pos = numeric_pos;
-			driver.set(+max.replace(UNIT_REGEX, '$1'));
+			driver.set(100);
 		}
 	};
 </script>
 
-<SplitPane {max} min="10%" type="vertical" bind:pos priority="max">
-	<section slot="a">
-		<slot name="main" />
-	</section>
-
-	<section slot="b">
-		<div class="panel-header">
-			<button class="panel-heading" on:click={toggle}>{panel}</button>
-			<slot name="panel-header" />
-		</div>
-
-		<div class="panel-body">
-			<slot name="panel-body" />
-		</div>
-	</section>
+<SplitPane {max} min="10%" type="vertical" bind:pos>
+	{#snippet a()}
+		<section>
+			<slot name="main" />
+		</section>
+	{/snippet}
+
+	{#snippet b()}
+		<section>
+			<div class="panel-header">
+				<button class="panel-heading" on:click={toggle}>{panel}</button>
+				<slot name="panel-header" />
+			</div>
+
+			<div class="panel-body">
+				<slot name="panel-body" />
+			</div>
+		</section>
+	{/snippet}
 </SplitPane>
 
 <style>
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 9b7ad4c321..a55d3e77b7 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -295,7 +295,7 @@
 
 <div class="iframe-container">
 	{#if !onLog}
-		<PaneWithPanel pos="90%" panel="Console">
+		<PaneWithPanel pos="100%" max="-4.2rem" panel="Console">
 			<div slot="main">
 				{@render main()}
 			</div>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 65619ad316..b290af60a4 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -175,25 +175,29 @@
 			min="100px"
 			max="-4.1rem"
 		>
-			<section slot="a">
-				<ComponentSelector {runes} {onchange} {workspace} {can_migrate} />
-
-				<Editor {workspace} />
-			</section>
-
-			<section slot="b" style="height: 100%;">
-				<Output
-					status={status_visible ? status : null}
-					{embedded}
-					{relaxed}
-					{can_escape}
-					{injectedJS}
-					{injectedCSS}
-					{previewTheme}
-					{workspace}
-					runtimeError={status_visible ? runtime_error : null}
-				/>
-			</section>
+			{#snippet a()}
+				<section>
+					<ComponentSelector {runes} {onchange} {workspace} {can_migrate} />
+
+					<Editor {workspace} />
+				</section>
+			{/snippet}
+
+			{#snippet b()}
+				<section>
+					<Output
+						status={status_visible ? status : null}
+						{embedded}
+						{relaxed}
+						{can_escape}
+						{injectedJS}
+						{injectedCSS}
+						{previewTheme}
+						{workspace}
+						runtimeError={status_visible ? runtime_error : null}
+					/>
+				</section>
+			{/snippet}
 		</SplitPane>
 	</div>
 
@@ -237,7 +241,7 @@
 				}
 			}
 
-			[data-pane='main'] > .divider::after {
+			[data-pane='main'] > svelte-split-pane-divider::after {
 				height: calc(100% - var(--sk-pane-controls-height));
 				top: var(--sk-pane-controls-height);
 			}
@@ -269,7 +273,7 @@
 				--pos: 5.4rem !important;
 			}
 
-			[data-pane] .divider {
+			[data-pane] svelte-split-pane-divider {
 				cursor: default;
 			}
 		}
diff --git a/packages/site-kit/src/lib/styles/utils/dividers.css b/packages/site-kit/src/lib/styles/utils/dividers.css
index d080d2158c..fbcfa5e0cb 100644
--- a/packages/site-kit/src/lib/styles/utils/dividers.css
+++ b/packages/site-kit/src/lib/styles/utils/dividers.css
@@ -1,4 +1,4 @@
-.divider {
+svelte-split-pane-divider {
 	z-index: 2;
 	&::after {
 		background-color: var(--sk-border) !important;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ecdf0397cf..bc127e1957 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,8 +27,8 @@ importers:
         specifier: ^1.3.10
         version: 1.4.1
       '@rich_harris/svelte-split-pane':
-        specifier: ^1.1.3
-        version: 1.1.3(svelte@5.14.0)
+        specifier: ^2.0.0
+        version: 2.0.0(svelte@5.14.0)
       '@shikijs/twoslash':
         specifier: ^1.22.0
         version: 1.22.0(typescript@5.5.4)
@@ -335,8 +335,8 @@ importers:
         specifier: ^6.0.14
         version: 6.2.1(@codemirror/commands@6.5.0)(@codemirror/language@6.10.3)(@codemirror/search@6.5.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)
       '@rich_harris/svelte-split-pane':
-        specifier: ^1.1.3
-        version: 1.1.3(svelte@5.14.0)
+        specifier: ^2.0.0
+        version: 2.0.0(svelte@5.14.0)
       '@rollup/browser':
         specifier: ^4.17.2
         version: 4.17.2
@@ -1451,10 +1451,10 @@ packages:
     resolution: {integrity: sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==}
     engines: {node: '>= 10'}
 
-  '@rich_harris/svelte-split-pane@1.1.3':
-    resolution: {integrity: sha512-eziKez1ncDfLqJQsViwLG2rYNfMEa3pYBKFUBfNTChgT5lUnofm5IDHxupAKklKvRpTXCVhQXb1MxLUfj5UgFQ==}
+  '@rich_harris/svelte-split-pane@2.0.0':
+    resolution: {integrity: sha512-mwdBUw59nlozluhoU3fbMO11YZlJ6IM48ZT6jxen8hAJbGbjTZMDKpMwD1neuK8gxgBM1QKAHJLZN7DpSY+hjA==}
     peerDependencies:
-      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
+      svelte: ^5
 
   '@rollup/browser@4.17.2':
     resolution: {integrity: sha512-a+efgpgQ7qODC0ltFcap0iPKT4hTmYUb6S7h8lXek2XVvfWJ5OmVI8FpbgZ5SJkTOk5G6lvP6vYC35xzhDy+ag==}
@@ -4274,7 +4274,7 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
       '@resvg/resvg-js-win32-x64-msvc': 2.6.2
 
-  '@rich_harris/svelte-split-pane@1.1.3(svelte@5.14.0)':
+  '@rich_harris/svelte-split-pane@2.0.0(svelte@5.14.0)':
     dependencies:
       svelte: 5.14.0