diff --git a/docs/package.json b/docs/package.json
index cceb1a78e..11bbdf425 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -81,6 +81,7 @@
 		"globals": "^16.5.0",
 		"layerchart": "workspace:*",
 		"mdsx": "^0.0.7",
+		"paneforge": "^1.0.2",
 		"playwright": "^1.57.0",
 		"posthog-js": "^1.300.0",
 		"prettier": "^3.7.4",
@@ -110,6 +111,14 @@
 		"zod": "^4.1.13"
 	},
 	"dependencies": {
-		"@stackblitz/sdk": "^1.11.0"
+		"@codemirror/lang-css": "^6.3.1",
+		"@codemirror/lang-html": "^6.4.11",
+		"@codemirror/lang-javascript": "^6.2.4",
+		"@codemirror/state": "^6.5.2",
+		"@stackblitz/sdk": "^1.11.0",
+		"@uiw/codemirror-theme-github": "^4.25.3",
+		"@webcontainer/api": "^1.6.1",
+		"ansi_up": "^6.0.6",
+		"codemirror": "^6.0.2"
 	}
 }
diff --git a/docs/scripts/build-stackblitz-files.ts b/docs/scripts/build-stackblitz-files.ts
index 38434a1e5..b7b6e4428 100644
--- a/docs/scripts/build-stackblitz-files.ts
+++ b/docs/scripts/build-stackblitz-files.ts
@@ -18,6 +18,7 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { readAllFilesFromDirectory } from './stackblitz-utils.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -35,35 +36,9 @@ function readSource(sourcePath: string): string {
 	return fs.readFileSync(filePath, 'utf-8');
 }
 
-/**
- * Recursively read all files from a directory and return them as a flat object
- * with relative paths as keys and file contents as values
- */
-function readAllFilesFromDirectory(dir: string, baseDir: string = dir): Record<string, string> {
-	const files: Record<string, string> = {};
-
-	const entries = fs.readdirSync(dir, { withFileTypes: true });
-
-	for (const entry of entries) {
-		const fullPath = path.join(dir, entry.name);
-
-		if (entry.isDirectory()) {
-			// Recursively read subdirectories
-			Object.assign(files, readAllFilesFromDirectory(fullPath, baseDir));
-		} else if (entry.isFile()) {
-			// Skip README.md as it's documentation for the templates directory
-			if (entry.name === 'README.md') {
-				continue;
-			}
-
-			// Get relative path from base directory
-			const relativePath = path.relative(baseDir, fullPath);
-			files[relativePath] = fs.readFileSync(fullPath, 'utf-8');
-		}
-	}
-
-	return files;
-}
+// Suppress unused variable warnings - fs and path are used via the imported function
+void fs;
+void path;
 
 /**
  * Generate the base files object by reading from template files
diff --git a/docs/scripts/stackblitz-template/package.json b/docs/scripts/stackblitz-template/package.json
index 53047e081..b9ee8f2f7 100644
--- a/docs/scripts/stackblitz-template/package.json
+++ b/docs/scripts/stackblitz-template/package.json
@@ -18,7 +18,10 @@
 		"@tailwindcss/vite": "^4.1.16",
 		"@types/d3-geo": "^3.1.0",
 		"@types/topojson-client": "^3.1.5",
+		"d3-array": "^3.2.4",
 		"d3-geo": "^3.1.1",
+		"d3-random": "^3.0.1",
+		"d3-time": "^3.1.0",
 		"topojson-client": "^3.1.0",
 		"svelte": "^5.39.13",
 		"svelte-ux": "2.0.0-next.20",
diff --git a/docs/scripts/stackblitz-template/src/app.html b/docs/scripts/stackblitz-template/src/app.html
index 77a5ff52c..7e8d2402c 100644
--- a/docs/scripts/stackblitz-template/src/app.html
+++ b/docs/scripts/stackblitz-template/src/app.html
@@ -5,6 +5,47 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
+		<script>
+			// Intercept console methods and send to parent window
+			(function() {
+				const originalConsole = {
+					log: console.log,
+					warn: console.warn,
+					error: console.error,
+					info: console.info
+				};
+
+				['log', 'warn', 'error', 'info'].forEach(level => {
+					console[level] = function(...args) {
+						// Call original console method
+						originalConsole[level].apply(console, args);
+
+						// Send to parent window if in iframe
+						if (window.parent !== window) {
+							try {
+								window.parent.postMessage({
+									type: 'console',
+									level: level,
+									args: args.map(arg => {
+										// Handle objects/arrays
+										if (typeof arg === 'object' && arg !== null) {
+											try {
+												return JSON.parse(JSON.stringify(arg));
+											} catch (e) {
+												return String(arg);
+											}
+										}
+										return arg;
+									})
+								}, '*');
+							} catch (e) {
+								// Ignore errors posting message
+							}
+						}
+					};
+				});
+			})();
+		</script>
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
diff --git a/docs/scripts/stackblitz-utils.ts b/docs/scripts/stackblitz-utils.ts
new file mode 100644
index 000000000..428611bb2
--- /dev/null
+++ b/docs/scripts/stackblitz-utils.ts
@@ -0,0 +1,84 @@
+/**
+ * Shared utilities for StackBlitz and WebContainer file operations (Node.js/server-side only)
+ */
+
+import type { FileSystemTree } from '@webcontainer/api';
+
+// Node.js imports
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Recursively read all files from a directory and return them as a flat object
+ * with relative paths as keys and file contents as values
+ *
+ * Note: This is only available in Node.js context (build scripts)
+ */
+export function readAllFilesFromDirectory(dir: string, baseDir: string = dir): Record<string, string> {
+	const files: Record<string, string> = {};
+
+	const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+	for (const entry of entries) {
+		const fullPath = path.join(dir, entry.name);
+
+		if (entry.isDirectory()) {
+			// Recursively read subdirectories
+			Object.assign(files, readAllFilesFromDirectory(fullPath, baseDir));
+		} else if (entry.isFile()) {
+			// Skip README.md and .gitignore as they're not needed in the project
+			if (entry.name === 'README.md' || entry.name === '.gitignore') {
+				continue;
+			}
+
+			// Get relative path from base directory
+			const relativePath = path.relative(baseDir, fullPath);
+			files[relativePath] = fs.readFileSync(fullPath, 'utf-8');
+		}
+	}
+
+	return files;
+}
+
+/**
+ * Convert flat file paths to nested WebContainer directory structure
+ *
+ * Example:
+ * Input:  { 'src/app.html': '<html>...</html>' }
+ * Output: { src: { directory: { 'app.html': { file: { contents: '<html>...</html>' } } } } }
+ *
+ * @param files - Object with flat paths as keys (e.g., "src/app.html") and contents as values
+ * @returns WebContainer-compatible nested FileSystemTree structure
+ */
+export function buildWebContainerFiles(files: Record<string, string>): FileSystemTree {
+	const result: FileSystemTree = {};
+
+	for (const [path, contents] of Object.entries(files)) {
+		const parts = path.split('/');
+		let current: any = result;
+
+		for (let i = 0; i < parts.length; i++) {
+			const part = parts[i];
+			const isLastPart = i === parts.length - 1;
+
+			if (isLastPart) {
+				// It's a file
+				current[part] = {
+					file: {
+						contents
+					}
+				};
+			} else {
+				// It's a directory
+				if (!current[part]) {
+					current[part] = {
+						directory: {}
+					};
+				}
+				current = current[part].directory;
+			}
+		}
+	}
+
+	return result;
+}
diff --git a/docs/src/hooks.server.ts b/docs/src/hooks.server.ts
new file mode 100644
index 000000000..630ccfa01
--- /dev/null
+++ b/docs/src/hooks.server.ts
@@ -0,0 +1,14 @@
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const response = await resolve(event);
+
+	// Set Cross-Origin headers for WebContainer support (SharedArrayBuffer requirement)
+	// Only apply to the playground page to minimize impact
+	if (event.url.pathname.startsWith('/docs/playground')) {
+		response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
+		response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
+	}
+
+	return response;
+};
diff --git a/docs/src/lib/components/DocsMenu.svelte b/docs/src/lib/components/DocsMenu.svelte
index 88ea9816f..036e23e73 100644
--- a/docs/src/lib/components/DocsMenu.svelte
+++ b/docs/src/lib/components/DocsMenu.svelte
@@ -17,6 +17,7 @@
 	import LucideFileCode2 from '~icons/lucide/file-code-2';
 	import LucideCirclePlay from '~icons/lucide/circle-play';
 	import LucideParentheses from '~icons/lucide/parentheses';
+	import SimpleIconsStackblitz from '~icons/simple-icons/stackblitz';
 
 	let { onItemClick, class: className }: { onItemClick?: () => void; class?: string } = $props();
 
@@ -64,6 +65,11 @@
 			path: '/docs/examples',
 			icon: LucideFileCode2
 		})}
+		{@render navItem({
+			label: 'Playground',
+			path: '/docs/playground',
+			icon: SimpleIconsStackblitz
+		})}
 		{@render navItem({ label: 'Showcase', path: '/docs/showcase', icon: LucideGalleryVertical })}
 		{@render navItem({
 			label: 'Releases',
diff --git a/docs/src/routes/docs/playground/+page.server.ts b/docs/src/routes/docs/playground/+page.server.ts
new file mode 100644
index 000000000..faa6ec759
--- /dev/null
+++ b/docs/src/routes/docs/playground/+page.server.ts
@@ -0,0 +1,51 @@
+import type { PageServerLoad } from './$types';
+import { buildWebContainerFiles } from '../../../../scripts/stackblitz-utils.js';
+
+// Import custom page template
+import templatePageSvelte from './template/+page.svelte?raw';
+
+// Import source files for the playground examples
+import dataTs from '../../../lib/utils/data.ts?raw';
+
+// Dynamically import all template files using Vite's import.meta.glob
+const templateFiles = import.meta.glob('../../../../scripts/stackblitz-template/**/*', {
+	query: '?raw',
+	import: 'default',
+	eager: true
+});
+
+// Build flat file structure using imported template files
+function generatePlaygroundFiles(): Record<string, string> {
+	const files: Record<string, string> = {};
+
+	// Process all template files
+	for (const [path, content] of Object.entries(templateFiles)) {
+		// Extract relative path from the full import path
+		// Example: "../../../../scripts/stackblitz-template/package.json" -> "package.json"
+		const relativePath = path.replace('../../../../scripts/stackblitz-template/', '');
+
+		// Skip README.md and .gitignore as they're not needed in the project
+		if (relativePath === 'README.md' || relativePath === '.gitignore') {
+			continue;
+		}
+
+		files[relativePath] = content as string;
+	}
+
+	// Override/add custom files for the playground
+	files['src/routes/+page.svelte'] = templatePageSvelte;
+
+	// Add utility data file
+	files['src/lib/utils/data.ts'] = dataTs;
+
+	return files;
+}
+
+// Convert to WebContainer nested structure
+const templateProjectFiles = buildWebContainerFiles(generatePlaygroundFiles());
+
+export const load: PageServerLoad = () => {
+	return {
+		templateProjectFiles
+	};
+};
diff --git a/docs/src/routes/docs/playground/+page.svelte b/docs/src/routes/docs/playground/+page.svelte
new file mode 100644
index 000000000..2734112df
--- /dev/null
+++ b/docs/src/routes/docs/playground/+page.svelte
@@ -0,0 +1,395 @@
+<script lang="ts" module>
+	import { WebContainer } from '@webcontainer/api';
+	import { PaneGroup, Pane, PaneResizer } from 'paneforge';
+	import { Icon } from 'svelte-ux';
+	import SimpleIconsCss from '~icons/simple-icons/css';
+	import SimpleIconsJavascript from '~icons/simple-icons/javascript';
+	import SimpleIconsTypescript from '~icons/simple-icons/typescript';
+	import SimpleIconsTerminal from '~icons/simple-icons/windowsterminal';
+	import SimpleIconsSvelte from '~icons/simple-icons/svelte';
+	import RefreshCcwIcon from '~icons/lucide/refresh-ccw';
+	import TrashIcon from '~icons/lucide/trash';
+
+	// Singleton instance stored in globalThis to persist across hot reloads
+	const WEBCONTAINER_KEY = '__webcontainer_instance__';
+
+	declare global {
+		interface Window {
+			[WEBCONTAINER_KEY]?: Promise<WebContainer>;
+		}
+	}
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { PageData } from './$types';
+	import CodeEditor from './CodeEditor.svelte';
+	import { Overlay, ProgressCircle } from 'svelte-ux';
+	import { AnsiUp } from 'ansi_up';
+
+	let { data }: { data: PageData } = $props();
+	const ansiUp = new AnsiUp();
+
+	let iframeEl = $state<HTMLIFrameElement | null>(null);
+	let webcontainerInstance = $state<WebContainer | null>(null);
+
+	let consolePane: ReturnType<typeof Pane>;
+	let consoleCollapsed = $state(true);
+	let consoleOutput = $state('');
+
+	let fileIcon = $derived.by(() => {
+		if (selectedFile.endsWith('.svelte')) {
+			return SimpleIconsSvelte;
+		} else if (selectedFile.endsWith('.ts')) {
+			return SimpleIconsTypescript;
+		} else if (selectedFile.endsWith('.js')) {
+			return SimpleIconsJavascript;
+		} else if (selectedFile.endsWith('.css')) {
+			return SimpleIconsCss;
+		} else {
+			return SimpleIconsTerminal;
+		}
+	});
+
+	// File editing state
+	let selectedFile = $state<string>('src/routes/+page.svelte');
+	let fileContent = $state<string>('');
+	let editableFiles = $state<string[]>([]);
+	let isLoadingFile = $state(false);
+
+	// Loading state
+	let loadingStatus = $state<string | null>('Initializing WebContainer...');
+	let isReady = $state(false);
+	let viteConnected = $state(false);
+	let viteTimeoutId: number | null = null;
+
+	async function getWebContainerInstance() {
+		if (typeof window !== 'undefined') {
+			if (!window[WEBCONTAINER_KEY]) {
+				window[WEBCONTAINER_KEY] = WebContainer.boot();
+			}
+			return window[WEBCONTAINER_KEY];
+		}
+		throw new Error('WebContainer can only be initialized in browser');
+	}
+
+	// Get list of editable files from the template
+	function getEditableFiles(): string[] {
+		const files: string[] = [];
+		function traverse(obj: any, prefix = '') {
+			for (const [key, value] of Object.entries(obj)) {
+				if (value && typeof value === 'object') {
+					if ('file' in value) {
+						files.push(prefix + key);
+					} else if ('directory' in value) {
+						traverse(value.directory, prefix + key + '/');
+					}
+				}
+			}
+		}
+		traverse(data.templateProjectFiles);
+		return files.filter(
+			(f) => f.endsWith('.svelte') || f.endsWith('.ts') || f.endsWith('.js') || f.endsWith('.css')
+		);
+	}
+
+	// Load file content
+	async function loadFileContent(filepath: string) {
+		if (!webcontainerInstance) return;
+
+		isLoadingFile = true;
+		try {
+			const content = await webcontainerInstance.fs.readFile(filepath, 'utf-8');
+			fileContent = content;
+		} catch (err) {
+			console.error('Failed to read file:', err);
+			fileContent = '// Error loading file';
+		} finally {
+			isLoadingFile = false;
+		}
+	}
+
+	// Save file content
+	async function saveFileContent() {
+		if (!webcontainerInstance || !selectedFile) return;
+
+		try {
+			await webcontainerInstance.fs.writeFile(selectedFile, fileContent);
+		} catch (err) {
+			console.error('Failed to save file:', err);
+		}
+	}
+
+	// Handle file selection change
+	async function handleFileSelect(filepath: string) {
+		selectedFile = filepath;
+		await loadFileContent(filepath);
+	}
+
+	onMount(async () => {
+		try {
+			loadingStatus = 'Booting WebContainer...';
+			webcontainerInstance = await getWebContainerInstance();
+
+			if (!webcontainerInstance) {
+				throw new Error('Failed to boot WebContainer');
+			}
+
+			loadingStatus = 'Mounting project files...';
+			await webcontainerInstance.mount(data.templateProjectFiles);
+
+			// Get editable files list
+			editableFiles = getEditableFiles();
+
+			loadingStatus = 'Loading editor...';
+			await loadFileContent(selectedFile);
+
+			// Listen for messages from the iframe to detect Vite connection and console logs
+			const handleMessage = (event: MessageEvent) => {
+				// Only process messages from our iframe
+				if (event.source !== iframeEl?.contentWindow) return;
+
+				// Check if message is from Vite client
+				if (event.data && typeof event.data === 'object') {
+					const data = event.data;
+
+					// Handle console logs from iframe
+					if (data.type === 'console') {
+						const logType = data.level || 'log';
+						const args = data.args || [];
+						const logText = args.map((arg: any) => {
+							if (typeof arg === 'object') {
+								return JSON.stringify(arg, null, 2);
+							}
+							return String(arg);
+						}).join(' ');
+
+						const colorMap: Record<string, string> = {
+							log: '#e5e7eb',
+							warn: '#fbbf24',
+							error: '#ef4444',
+							info: '#3b82f6'
+						};
+						const color = colorMap[logType] || colorMap.log;
+
+						consoleOutput += `<span style="color: ${color}">[${logType}] ${logText}</span>\n`;
+					}
+
+					// Vite HMR sends various message types - we'll clear loading on any HMR activity
+					if (data.type && (data.type.includes('vite') || data.type === 'connected')) {
+						if (!viteConnected) {
+							viteConnected = true;
+							if (viteTimeoutId) {
+								clearTimeout(viteTimeoutId);
+								viteTimeoutId = null;
+							}
+							loadingStatus = null;
+							isReady = true;
+						}
+					}
+				}
+			};
+
+			window.addEventListener('message', handleMessage);
+
+			webcontainerInstance.on('server-ready', (port, url) => {
+				if (iframeEl) {
+					loadingStatus = 'Loading preview...';
+					iframeEl.src = url;
+				}
+			});
+
+			await startDevServer();
+		} catch (error) {
+			loadingStatus = 'Error: ' + (error instanceof Error ? error.message : 'Unknown error');
+		}
+	});
+
+	async function startDevServer() {
+		if (!webcontainerInstance) {
+			throw new Error('WebContainer instance not initialized');
+		}
+
+		// Install dependencies
+		loadingStatus = 'Installing dependencies...';
+		const installProcess = await webcontainerInstance.spawn('pnpm', ['install']);
+
+		// Capture install output
+		installProcess.output.pipeTo(
+			new WritableStream({
+				write(data) {
+					const text = data.toString();
+					console.log('[WebContainer install]:', text);
+					consoleOutput += ansiUp.ansi_to_html(text);
+				}
+			})
+		);
+
+		const installExitCode = await installProcess.exit;
+
+		if (installExitCode !== 0) {
+			throw new Error('Unable to run pnpm install');
+		}
+
+		// Start dev server
+		loadingStatus = 'Starting dev server...';
+		const devProcess = await webcontainerInstance.spawn('pnpm', ['run', 'dev']);
+
+		// Listen to output to detect when Vite is building
+		devProcess.output.pipeTo(
+			new WritableStream({
+				write(data) {
+					const text = data.toString();
+					console.log('[WebContainer]:', text);
+
+					// Append to console output (converting ANSI codes to HTML)
+					consoleOutput += ansiUp.ansi_to_html(text);
+
+					// Update status based on Vite output
+					if (text.includes('VITE') && text.includes('ready')) {
+						loadingStatus = 'Ready! Loading preview...';
+					} else if (text.includes('build started') || text.includes('building')) {
+						loadingStatus = 'Building application...';
+					}
+				}
+			})
+		);
+	}
+</script>
+
+<div class="h-screen -mx-6 -my-4 lg:-mx-20 lg:-my-8 flex bg-surface-100">
+	<!-- Editor Panel -->
+	<PaneGroup direction="horizontal">
+		<Pane defaultSize={50} minSize={5}>
+			<div class="flex flex-col h-full border-r border-surface-content/10">
+				<!-- File Selector -->
+				<div class="p-2 border-b border-surface-content/10 bg-surface-100 relative">
+					<select
+						bind:value={selectedFile}
+						onchange={() => handleFileSelect(selectedFile)}
+						class="w-full px-8 py-2 rounded border border-surface-content/20 bg-surface text-sm font-mono"
+					>
+						{#each editableFiles as file}
+							<option value={file}>{file}</option>
+						{/each}
+					</select>
+					<Icon
+						data={fileIcon}
+						class="absolute left-4 top-1/2 -translate-y-1/2 text-surface-content/50"
+					/>
+				</div>
+
+				<!-- Code Editor -->
+				<div class="flex-1 overflow-hidden">
+					{#if isLoadingFile}
+						<div class="flex items-center justify-center h-full">
+							<div class="text-surface-content/50">Loading...</div>
+						</div>
+					{:else}
+						<CodeEditor
+							bind:value={fileContent}
+							filename={selectedFile}
+							oninput={saveFileContent}
+						/>
+					{/if}
+				</div>
+			</div>
+		</Pane>
+
+		<PaneResizer
+			data-enabled={!isLoadingFile && !isReady}
+			class="w-1 hover:bg-surface-content/10"
+		/>
+
+		<!-- Preview Panel -->
+		<Pane defaultSize={50} minSize={5}>
+			<PaneGroup direction="vertical">
+				<Pane defaultSize={90}>
+					<div class="relative h-full bg-surface-100 pt-6">
+						{#if loadingStatus}
+							<Overlay class="flex flex-col gap-4 bg-surface-100/50" center>
+								<ProgressCircle width={2} />
+								<div class="text-lg font-medium">{loadingStatus}</div>
+							</Overlay>
+						{:else}
+							<button
+								class="absolute top-2 right-2"
+								onclick={() => {
+									window.location.reload();
+								}}
+							>
+								<Icon
+									data={RefreshCcwIcon}
+									class="text-surface-content/50 hover:text-primary absolute top-2 right-2"
+								/>
+							</button>
+						{/if}
+						<iframe
+							bind:this={iframeEl}
+							title="LayerChart Playground"
+							class="w-full h-full border-none"
+							allowfullscreen
+							onload={() => {
+								// Wait for Vite to connect before clearing loading status
+								if (iframeEl?.src && !viteConnected) {
+									loadingStatus = 'Connecting to Vite...';
+									// Fallback: clear after 3 seconds if Vite doesn't connect
+									viteTimeoutId = window.setTimeout(() => {
+										if (loadingStatus === 'Connecting to Vite...') {
+											loadingStatus = null;
+											isReady = true;
+											viteConnected = true;
+										}
+									}, 3000);
+								} else if (viteConnected) {
+									loadingStatus = null;
+									isReady = true;
+								}
+							}}
+						></iframe>
+					</div>
+				</Pane>
+
+				<PaneResizer
+					data-enabled={!isLoadingFile && !isReady}
+					class="h-1 hover:bg-surface-content/10"
+				/>
+
+				<!-- Console Panel -->
+				<Pane
+					bind:this={consolePane as Pane}
+					defaultSize={20}
+					collapsedSize={10}
+					minSize={10}
+					maxSize={50}
+					collapsible={true}
+					onCollapse={() => (consoleCollapsed = true)}
+					onExpand={() => (consoleCollapsed = false)}
+				>
+					<div class="h-full overflow-auto relative bg-surface-300">
+						<div class="flex justify-between items-center bg-primary/10 p-1">
+							<div class="flex-1">
+								<button
+									class="flex items-center justify-start gap-2 text-sm font-mono group w-full"
+									onclick={() =>
+										consolePane.isCollapsed() ? consolePane.expand() : consolePane.collapse()}
+								>
+									<Icon data={SimpleIconsTerminal} class=" text-surface-content/50" />
+									<span class="group-hover:underline">Console</span>
+								</button>
+							</div>
+							<button
+								class="text-xs font-mono relative py-1 px-2 outline outline-primary/10 rounded-sm flex items-center gap-2"
+								onclick={() => (consoleOutput = '')}
+								>Clear <Icon data={TrashIcon} class="text-surface-content/50" /></button
+							>
+						</div>
+						<div class="text-xs font-mono p-1 whitespace-pre-wrap">
+							{@html consoleOutput}
+						</div>
+					</div>
+				</Pane>
+			</PaneGroup>
+		</Pane>
+	</PaneGroup>
+</div>
diff --git a/docs/src/routes/docs/playground/CodeEditor.svelte b/docs/src/routes/docs/playground/CodeEditor.svelte
new file mode 100644
index 000000000..4659e112d
--- /dev/null
+++ b/docs/src/routes/docs/playground/CodeEditor.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { EditorView, basicSetup } from 'codemirror';
+	import { javascript } from '@codemirror/lang-javascript';
+	import { html } from '@codemirror/lang-html';
+	import { css } from '@codemirror/lang-css';
+	import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
+	import { EditorState, Compartment } from '@codemirror/state';
+	import { getSettings } from 'svelte-ux';
+
+	let {
+		value = $bindable(''),
+		filename = '',
+		oninput = () => {}
+	}: {
+		value?: string;
+		filename?: string;
+		oninput?: (value: string) => void;
+	} = $props();
+
+	let editorContainer: HTMLDivElement;
+	let editorView: EditorView | null = null;
+	let updating = false;
+
+	// Use Compartments for reconfigurable extensions
+	const languageCompartment = new Compartment();
+	const themeCompartment = new Compartment();
+
+	// Get current theme mode from svelte-ux settings
+	const { currentTheme } = getSettings();
+
+	// Determine language based on file extension
+	function getLanguageExtension(filename: string) {
+		if (filename.endsWith('.svelte') || filename.endsWith('.html')) {
+			return html();
+		} else if (filename.endsWith('.ts') || filename.endsWith('.js')) {
+			return javascript({ typescript: filename.endsWith('.ts') });
+		} else if (filename.endsWith('.css')) {
+			return css();
+		}
+		return javascript();
+	}
+
+	// Get theme based on current mode
+	function getCurrentTheme() {
+		// TODO: read from
+		console.log({ $currentTheme });
+		return $currentTheme.dark ? githubDark : githubLight;
+		// return githubDark;
+	}
+
+	onMount(() => {
+		const startState = EditorState.create({
+			doc: value,
+			extensions: [
+				basicSetup,
+				languageCompartment.of(getLanguageExtension(filename)),
+				themeCompartment.of(getCurrentTheme()),
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged && !updating) {
+						const newValue = update.state.doc.toString();
+						value = newValue;
+						oninput(newValue);
+					}
+				}),
+				EditorView.theme({
+					'&': {
+						height: '100%',
+						background: 'var(--color-surface-100)'
+					},
+					'.cm-scroller': {
+						overflow: 'auto'
+					},
+					'.cm-gutters': {
+						backgroundColor: 'var(--color-surface-300)',
+						color: 'var(--color-surface-content)',
+						border: 'none'
+					}
+				})
+			]
+		});
+
+		editorView = new EditorView({
+			state: startState,
+			parent: editorContainer
+		});
+	});
+
+	// Update editor when value changes externally
+	$effect(() => {
+		if (editorView && value !== editorView.state.doc.toString()) {
+			updating = true;
+			editorView.dispatch({
+				changes: {
+					from: 0,
+					to: editorView.state.doc.length,
+					insert: value
+				}
+			});
+			updating = false;
+		}
+	});
+
+	// Reconfigure language when filename changes
+	$effect(() => {
+		if (editorView && filename) {
+			editorView.dispatch({
+				effects: languageCompartment.reconfigure(getLanguageExtension(filename))
+			});
+		}
+	});
+
+	// Reconfigure theme when mode changes
+	$effect(() => {
+		if (editorView) {
+			// Access $currentTheme to create reactive dependency
+			const theme = $currentTheme;
+			editorView.dispatch({
+				effects: themeCompartment.reconfigure(getCurrentTheme())
+			});
+		}
+	});
+
+	onDestroy(() => {
+		if (editorView) {
+			editorView.destroy();
+		}
+	});
+</script>
+
+<div bind:this={editorContainer} class="h-full"></div>
diff --git a/docs/src/routes/docs/playground/template/+page.svelte b/docs/src/routes/docs/playground/template/+page.svelte
new file mode 100644
index 000000000..c2670ec79
--- /dev/null
+++ b/docs/src/routes/docs/playground/template/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { LineChart } from 'layerchart';
+	import { createDateSeries } from '$lib/utils/data.js';
+
+	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
+</script>
+
+<LineChart {data} x="date" y="value" height={300} />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 69d5186af..da12d6c6e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,9 +26,33 @@ importers:
 
   docs:
     dependencies:
+      '@codemirror/lang-css':
+        specifier: ^6.3.1
+        version: 6.3.1
+      '@codemirror/lang-html':
+        specifier: ^6.4.11
+        version: 6.4.11
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.4
+        version: 6.2.4
+      '@codemirror/state':
+        specifier: ^6.5.2
+        version: 6.5.2
       '@stackblitz/sdk':
         specifier: ^1.11.0
         version: 1.11.0
+      '@uiw/codemirror-theme-github':
+        specifier: ^4.25.3
+        version: 4.25.3(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.8)
+      '@webcontainer/api':
+        specifier: ^1.6.1
+        version: 1.6.1
+      ansi_up:
+        specifier: ^6.0.6
+        version: 6.0.6
+      codemirror:
+        specifier: ^6.0.2
+        version: 6.0.2
     devDependencies:
       '@content-collections/core':
         specifier: ^0.11.1
@@ -204,6 +228,9 @@ importers:
       mdsx:
         specifier: ^0.0.7
         version: 0.0.7(svelte@5.45.5)
+      paneforge:
+        specifier: ^1.0.2
+        version: 1.0.2(svelte@5.45.5)
       playwright:
         specifier: ^1.57.0
         version: 1.57.0
@@ -690,7 +717,7 @@ importers:
         version: 1.2.77
       '@rollup/plugin-dsv':
         specifier: ^3.0.5
-        version: 3.0.5(rollup@2.79.2)
+        version: 3.0.5(rollup@4.53.3)
       '@sveltejs/adapter-auto':
         specifier: ^7.0.0
         version: 7.0.0(@sveltejs/kit@2.49.1(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.5)(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.1)))(svelte@5.45.5)(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.1)))
@@ -798,7 +825,7 @@ importers:
         version: 6.0.0
       rollup-plugin-visualizer:
         specifier: ^6.0.5
-        version: 6.0.5(rollup@2.79.2)
+        version: 6.0.5(rollup@4.53.3)
       shapefile:
         specifier: ^0.6.6
         version: 0.6.6
@@ -977,6 +1004,36 @@ packages:
   '@cloudflare/workers-types@4.20251011.0':
     resolution: {integrity: sha512-gQpih+pbq3sP4uXltUeCSbPgZxTNp2gQd8639SaIbQMwgA6oJNHLhIART1fWy6DQACngiRzDVULA2x0ohmkGTQ==}
 
+  '@codemirror/autocomplete@6.20.0':
+    resolution: {integrity: sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==}
+
+  '@codemirror/commands@6.10.0':
+    resolution: {integrity: sha512-2xUIc5mHXQzT16JnyOFkh8PvfeXuIut3pslWGfsGOhxP/lpgRm9HOl/mpzLErgt5mXDovqA0d11P21gofRLb9w==}
+
+  '@codemirror/lang-css@6.3.1':
+    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
+
+  '@codemirror/lang-html@6.4.11':
+    resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==}
+
+  '@codemirror/lang-javascript@6.2.4':
+    resolution: {integrity: sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==}
+
+  '@codemirror/language@6.11.3':
+    resolution: {integrity: sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==}
+
+  '@codemirror/lint@6.9.2':
+    resolution: {integrity: sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==}
+
+  '@codemirror/search@6.5.11':
+    resolution: {integrity: sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==}
+
+  '@codemirror/state@6.5.2':
+    resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
+
+  '@codemirror/view@6.38.8':
+    resolution: {integrity: sha512-XcE9fcnkHCbWkjeKyi0lllwXmBLtyYb5dt89dJyx23I9+LSh5vZDIuk7OLG4VM1lgrXZQcY6cxyZyk5WVPRv/A==}
+
   '@content-collections/core@0.11.1':
     resolution: {integrity: sha512-4ZbjxOjaDAxnj7mIij1q1vxZgOJQkA20ThoNZ0CsnmhJmUp+IDqIRLUyDyZ+4ZAk+zQy6bKeOzWzyLg32vMgRQ==}
     peerDependencies:
@@ -1747,6 +1804,24 @@ packages:
   '@layerstack/utils@2.0.0-next.16':
     resolution: {integrity: sha512-V0aTlVpEylaVgwUOrVhMcEVAN8ysChP1Y4uPCcohl048Ocv+h37eW67pVxj81c+aLAavCd3BXt9IhJfELqTVmw==}
 
+  '@lezer/common@1.4.0':
+    resolution: {integrity: sha512-DVeMRoGrgn/k45oQNu189BoW4SZwgZFzJ1+1TV5j2NJ/KFC83oa/enRqZSGshyeMk5cPWMhsKs9nx+8o0unwGg==}
+
+  '@lezer/css@1.3.0':
+    resolution: {integrity: sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==}
+
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+
+  '@lezer/html@1.3.12':
+    resolution: {integrity: sha512-RJ7eRWdaJe3bsiiLLHjCFT1JMk8m1YP9kaUbvu2rMLEoOnke9mcTVDyfOslsln0LtujdWespjJ39w6zo+RsQYw==}
+
+  '@lezer/javascript@1.5.4':
+    resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
+
+  '@lezer/lr@1.4.4':
+    resolution: {integrity: sha512-LHL17Mq0OcFXm1pGQssuGTQFPPdxARjKM8f7GA5+sGtHi0K3R84YaSbmche0+RKWHnCsx9asEe5OWOI4FHfe4A==}
+
   '@lucide/svelte@0.534.0':
     resolution: {integrity: sha512-XqlT0ibiEEoEGcmZLdk0RNtq1OW77OjqxXZjJE/23Wabl+2d9Pxg9AAx7+6WFv8BSf8K6im73vz3cZKYEgY9Mw==}
     peerDependencies:
@@ -1773,6 +1848,9 @@ packages:
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -2397,6 +2475,16 @@ packages:
     resolution: {integrity: sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@uiw/codemirror-theme-github@4.25.3':
+    resolution: {integrity: sha512-KdmcO9VicsBgsDErNrNBqwMuTbJRIpeMl9oIjmrNx2iEfIDSOMBIKlX+BkgwTAU+VmhqYY/68/kmF1K8z2FxrQ==}
+
+  '@uiw/codemirror-themes@4.25.3':
+    resolution: {integrity: sha512-k7/B7Vf4jU/WcdewgJWP9tMFxbjB6UpUymZ3fx/TsbGwt2JXAouw0uyqCn1RlYBfr7YQnvEs3Ju9ECkd2sKzdg==}
+    peerDependencies:
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
@@ -2440,6 +2528,9 @@ packages:
   '@vitest/utils@4.0.15':
     resolution: {integrity: sha512-HXjPW2w5dxhTD0dLwtYHDnelK3j8sR8cWIaLxr22evTyY6q8pRCjZSmhRWVjBaOVXChQd6AwMzi9pucorXCPZA==}
 
+  '@webcontainer/api@1.6.1':
+    resolution: {integrity: sha512-2RS2KiIw32BY1Icf6M1DvqSmcon9XICZCDgS29QJb2NmF12ZY2V5Ia+949hMKB3Wno+P/Y8W+sPP59PZeXSELg==}
+
   '@zag-js/accordion@1.24.2':
     resolution: {integrity: sha512-sGNhbWR85oAiMyQLk+dliRhNQGP59T56M1gAkQ7bwJJZ7l++hFEQpYcr/FbAHJshXWpvUKm0wV18wHR/56Y30w==}
 
@@ -2704,6 +2795,9 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ansi_up@6.0.6:
+    resolution: {integrity: sha512-yIa1x3Ecf8jWP4UWEunNjqNX6gzE4vg2gGz+xqRGY+TBSucnYp6RRdPV4brmtg6bQ1ljD48mZ5iGSEj7QEpRKA==}
+
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -2817,6 +2911,9 @@ packages:
   code-red@1.0.4:
     resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
 
+  codemirror@6.0.2:
+    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2865,6 +2962,9 @@ packages:
   core-js@3.47.0:
     resolution: {integrity: sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -3921,6 +4021,11 @@ packages:
   package-manager-detector@1.5.0:
     resolution: {integrity: sha512-uBj69dVlYe/+wxj8JOpr97XfsxH/eumMt6HqjNTmJDf/6NO9s+0uxeOneIz3AsPt2m6y9PqzDzd3ATcU17MNfw==}
 
+  paneforge@1.0.2:
+    resolution: {integrity: sha512-KzmIXQH1wCfwZ4RsMohD/IUtEjVhteR+c+ulb/CHYJHX8SuDXoJmChtsc/Xs5Wl8NHS4L5Q7cxL8MG40gSU1bA==}
+    peerDependencies:
+      svelte: ^5.29.0
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -4306,6 +4411,11 @@ packages:
     peerDependencies:
       svelte: ^5.7.0
 
+  runed@0.29.2:
+    resolution: {integrity: sha512-0cq6cA6sYGZwl/FvVqjx9YN+1xEBu9sDDyuWdDW1yWX7JF2wmvmVKfH+hVCZs+csW+P3ARH92MjI3H9QTagOQA==}
+    peerDependencies:
+      svelte: ^5.7.0
+
   runed@0.31.1:
     resolution: {integrity: sha512-v3czcTnO+EJjiPvD4dwIqfTdHLZ8oH0zJheKqAHh9QMViY7Qb29UlAMRpX7ZtHh7AFqV60KmfxaJ9QMy+L1igQ==}
     peerDependencies:
@@ -4463,6 +4573,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
+
   style-to-object@1.0.14:
     resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
 
@@ -4556,6 +4669,12 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
+  svelte-toolbelt@0.9.3:
+    resolution: {integrity: sha512-HCSWxCtVmv+c6g1ACb8LTwHVbDqLKJvHpo6J8TaqwUme2hj9ATJCpjCPNISR1OCq2Q4U1KT41if9ON0isINQZw==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.30.2
+
   svelte-ux@2.0.0-next.17:
     resolution: {integrity: sha512-jKE/4baK3Q0SsdlHIH7o2kZDIPtktIdddlzFiqumME7hSafzGHW61HU/x2FhfaQoMBC5yyvtA6DcEh5UOylwhw==}
     peerDependencies:
@@ -4891,6 +5010,9 @@ packages:
       jsdom:
         optional: true
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
@@ -5217,6 +5339,82 @@ snapshots:
 
   '@cloudflare/workers-types@4.20251011.0': {}
 
+  '@codemirror/autocomplete@6.20.0':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.8
+      '@lezer/common': 1.4.0
+
+  '@codemirror/commands@6.10.0':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.8
+      '@lezer/common': 1.4.0
+
+  '@codemirror/lang-css@6.3.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.4.0
+      '@lezer/css': 1.3.0
+
+  '@codemirror/lang-html@6.4.11':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-javascript': 6.2.4
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.8
+      '@lezer/common': 1.4.0
+      '@lezer/css': 1.3.0
+      '@lezer/html': 1.3.12
+
+  '@codemirror/lang-javascript@6.2.4':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.11.3
+      '@codemirror/lint': 6.9.2
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.8
+      '@lezer/common': 1.4.0
+      '@lezer/javascript': 1.5.4
+
+  '@codemirror/language@6.11.3':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.8
+      '@lezer/common': 1.4.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.4
+      style-mod: 4.1.3
+
+  '@codemirror/lint@6.9.2':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.8
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.11':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.8
+      crelt: 1.0.6
+
+  '@codemirror/state@6.5.2':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/view@6.38.8':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      crelt: 1.0.6
+      style-mod: 4.1.3
+      w3c-keyname: 2.2.8
+
   '@content-collections/core@0.11.1(typescript@5.9.3)':
     dependencies:
       '@standard-schema/spec': 1.0.0
@@ -5809,6 +6007,34 @@ snapshots:
       d3-time-format: 4.1.0
       lodash-es: 4.17.21
 
+  '@lezer/common@1.4.0': {}
+
+  '@lezer/css@1.3.0':
+    dependencies:
+      '@lezer/common': 1.4.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.4
+
+  '@lezer/highlight@1.2.3':
+    dependencies:
+      '@lezer/common': 1.4.0
+
+  '@lezer/html@1.3.12':
+    dependencies:
+      '@lezer/common': 1.4.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.4
+
+  '@lezer/javascript@1.5.4':
+    dependencies:
+      '@lezer/common': 1.4.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.4
+
+  '@lezer/lr@1.4.4':
+    dependencies:
+      '@lezer/common': 1.4.0
+
   '@lucide/svelte@0.534.0(svelte@5.45.5)':
     dependencies:
       svelte: 5.45.5
@@ -5841,6 +6067,8 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
+  '@marijn/find-cluster-break@1.0.2': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -5875,15 +6103,15 @@ snapshots:
     dependencies:
       cross-spawn: 7.0.6
 
-  '@rollup/plugin-dsv@3.0.5(rollup@2.79.2)':
+  '@rollup/plugin-dsv@3.0.5(rollup@4.53.3)':
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@2.79.2)
+      '@rollup/pluginutils': 5.1.2(rollup@4.53.3)
       '@types/d3-dsv': 3.0.7
       d3-dsv: 2.0.0
       strip-bom: 4.0.0
       tosource: 2.0.0-alpha.3
     optionalDependencies:
-      rollup: 2.79.2
+      rollup: 4.53.3
 
   '@rollup/plugin-node-resolve@13.3.0(rollup@2.79.2)':
     dependencies:
@@ -5907,13 +6135,13 @@ snapshots:
       estree-walker: 2.0.2
       picomatch: 2.3.1
 
-  '@rollup/pluginutils@5.1.2(rollup@2.79.2)':
+  '@rollup/pluginutils@5.1.2(rollup@4.53.3)':
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
       picomatch: 2.3.1
     optionalDependencies:
-      rollup: 2.79.2
+      rollup: 4.53.3
 
   '@rollup/rollup-android-arm-eabi@4.53.3':
     optional: true
@@ -6531,6 +6759,20 @@ snapshots:
       '@typescript-eslint/types': 8.48.1
       eslint-visitor-keys: 4.2.1
 
+  '@uiw/codemirror-theme-github@4.25.3(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.8)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.25.3(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.8)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-themes@4.25.3(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.8)':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.8
+
   '@ungap/structured-clone@1.3.0': {}
 
   '@vitest/browser-playwright@4.0.15(playwright@1.57.0)(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.15)':
@@ -6602,6 +6844,8 @@ snapshots:
       '@vitest/pretty-format': 4.0.15
       tinyrainbow: 3.0.3
 
+  '@webcontainer/api@1.6.1': {}
+
   '@zag-js/accordion@1.24.2':
     dependencies:
       '@zag-js/anatomy': 1.24.2
@@ -7129,6 +7373,8 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  ansi_up@6.0.6: {}
+
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -7230,6 +7476,16 @@ snapshots:
       estree-walker: 3.0.3
       periscopic: 3.1.0
 
+  codemirror@6.0.2:
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/commands': 6.10.0
+      '@codemirror/language': 6.11.3
+      '@codemirror/lint': 6.9.2
+      '@codemirror/search': 6.5.11
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.8
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -7266,6 +7522,8 @@ snapshots:
 
   core-js@3.47.0: {}
 
+  crelt@1.0.6: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -8590,6 +8848,12 @@ snapshots:
 
   package-manager-detector@1.5.0: {}
 
+  paneforge@1.0.2(svelte@5.45.5):
+    dependencies:
+      runed: 0.23.4(svelte@5.45.5)
+      svelte: 5.45.5
+      svelte-toolbelt: 0.9.3(svelte@5.45.5)
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -8879,14 +9143,14 @@ snapshots:
       rollup: 2.79.2
       svelte: 4.2.20
 
-  rollup-plugin-visualizer@6.0.5(rollup@2.79.2):
+  rollup-plugin-visualizer@6.0.5(rollup@4.53.3):
     dependencies:
       open: 8.4.2
       picomatch: 4.0.3
       source-map: 0.7.6
       yargs: 17.7.2
     optionalDependencies:
-      rollup: 2.79.2
+      rollup: 4.53.3
 
   rollup@2.79.2:
     optionalDependencies:
@@ -8934,6 +9198,11 @@ snapshots:
       esm-env: 1.2.2
       svelte: 5.45.5
 
+  runed@0.29.2(svelte@5.45.5):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.45.5
+
   runed@0.31.1(svelte@5.45.5):
     dependencies:
       esm-env: 1.2.2
@@ -9099,6 +9368,8 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-mod@4.1.3: {}
+
   style-to-object@1.0.14:
     dependencies:
       inline-style-parser: 0.2.7
@@ -9189,6 +9460,13 @@ snapshots:
       style-to-object: 1.0.9
       svelte: 5.45.5
 
+  svelte-toolbelt@0.9.3(svelte@5.45.5):
+    dependencies:
+      clsx: 2.1.1
+      runed: 0.29.2(svelte@5.45.5)
+      style-to-object: 1.0.14
+      svelte: 5.45.5
+
   svelte-ux@2.0.0-next.17(postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0)(yaml@2.8.1))(postcss@8.5.6)(svelte@5.45.5):
     dependencies:
       '@floating-ui/dom': 1.7.3
@@ -9586,6 +9864,8 @@ snapshots:
       - tsx
       - yaml
 
+  w3c-keyname@2.2.8: {}
+
   web-namespaces@2.0.1: {}
 
   web-vitals@4.2.4: {}