wasm-idle 0.4.0 → 0.4.1

package/dist/playground/sandbox.d.ts

@@ -1,4 +1,5 @@
 import type { CompilerDiagnostic, DebugCommand, DebugSessionEvent, SandboxExecutionOptions } from './options';
+import type { PlaygroundRuntimeAssets } from './assets';
 import type { Writable } from 'svelte/store';
 type ProgressLike = Writable<number> | {
     set?: (value: number) => void;
@@ -6,7 +7,7 @@ type ProgressLike = Writable<number> | {
 export interface Sandbox {
     constructor: any;
     eof: () => void;
-    load: (path: string, code?: string, log?: boolean, args?: string[], options?: SandboxExecutionOptions) => Promise<void>;
+    load: (runtimeAssets?: string | PlaygroundRuntimeAssets, code?: string, log?: boolean, args?: string[], options?: SandboxExecutionOptions, progress?: ProgressLike) => Promise<void>;
     run: (code: string, prepare: boolean, log?: boolean, prog?: ProgressLike, args?: string[], options?: SandboxExecutionOptions) => Promise<boolean | string>;
     terminate: () => void;
     clear: () => Promise<void>;

package/dist/playground/worker/assets.d.ts

@@ -0,0 +1,12 @@
+export interface WorkerRuntimeAssetConfig {
+    baseUrl: string;
+    useAssetBridge: boolean;
+}
+interface LoadedWorkerAsset {
+    bytes: Uint8Array;
+    mimeType?: string;
+}
+export declare function configureWorkerRuntimeAssets(config: WorkerRuntimeAssetConfig | null): void;
+export declare function handleWorkerAssetMessage(data: any): boolean;
+export declare function loadWorkerRuntimeAsset(asset: string): Promise<LoadedWorkerAsset>;
+export {};

package/dist/playground/worker/assets.js

@@ -0,0 +1,257 @@
+const decoder = new TextDecoder();
+const originalFetch = globalThis.fetch.bind(globalThis);
+const NativeXMLHttpRequest = globalThis.XMLHttpRequest;
+let activeConfig = null;
+let interceptorsInstalled = false;
+let nextAssetRequestId = 0;
+const pendingAssetRequests = new Map();
+const responseBuffer = (bytes) => {
+    const buffer = bytes.buffer;
+    return bytes.byteOffset === 0 && bytes.byteLength === buffer.byteLength
+        ? buffer
+        : buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+};
+const trackedAssetUrl = (input) => {
+    if (!activeConfig)
+        return null;
+    if (typeof input === 'string')
+        return new URL(input, activeConfig.baseUrl).href;
+    if (input instanceof URL)
+        return input.href;
+    return input.url;
+};
+const trackedAssetName = (url) => {
+    if (!activeConfig || !url.startsWith(activeConfig.baseUrl))
+        return null;
+    return url.slice(activeConfig.baseUrl.length);
+};
+const isTrackedAssetUrl = (url) => trackedAssetName(url) !== null;
+const loadAssetFromBridge = async (asset) => {
+    const id = ++nextAssetRequestId;
+    return await new Promise((resolve, reject) => {
+        pendingAssetRequests.set(id, { resolve, reject });
+        self.postMessage({
+            assetRequest: {
+                id,
+                asset
+            }
+        });
+    });
+};
+const loadAssetFromUrl = async (url, asset) => {
+    const response = await originalFetch(url);
+    if (!response.ok)
+        throw new Error(`Failed to load ${asset}: ${response.status}`);
+    const total = Number(response.headers.get('content-length') || 0) || undefined;
+    const mimeType = response.headers.get('content-type') || undefined;
+    if (!response.body) {
+        const bytes = new Uint8Array(await response.arrayBuffer());
+        self.postMessage({
+            assetProgress: {
+                asset,
+                loaded: bytes.byteLength,
+                total: total ?? bytes.byteLength
+            }
+        });
+        return { bytes, mimeType };
+    }
+    const reader = response.body.getReader();
+    let receivedLength = 0;
+    const chunks = [];
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done)
+            break;
+        if (!value)
+            continue;
+        const chunk = Uint8Array.from(value);
+        chunks.push(chunk);
+        receivedLength += chunk.byteLength;
+        self.postMessage({
+            assetProgress: {
+                asset,
+                loaded: receivedLength,
+                total
+            }
+        });
+    }
+    const bytes = new Uint8Array(receivedLength);
+    let position = 0;
+    for (const chunk of chunks) {
+        bytes.set(chunk, position);
+        position += chunk.byteLength;
+    }
+    self.postMessage({
+        assetProgress: {
+            asset,
+            loaded: receivedLength,
+            total: total ?? receivedLength
+        }
+    });
+    return { bytes, mimeType };
+};
+async function loadTrackedAsset(url) {
+    const asset = trackedAssetName(url);
+    if (!asset || !activeConfig)
+        throw new Error('Untracked runtime asset request');
+    return activeConfig.useAssetBridge
+        ? await loadAssetFromBridge(asset)
+        : await loadAssetFromUrl(url, asset);
+}
+function createTrackedResponse(asset) {
+    return new Response(responseBuffer(asset.bytes), {
+        status: 200,
+        headers: asset.mimeType ? { 'Content-Type': asset.mimeType } : undefined
+    });
+}
+function installTrackedFetch() {
+    if (typeof NativeXMLHttpRequest === 'undefined')
+        return;
+    class RuntimeAssetXMLHttpRequest {
+        responseType = '';
+        response = null;
+        responseText = '';
+        readyState = 0;
+        status = 0;
+        statusText = '';
+        timeout = 0;
+        withCredentials = false;
+        onload = null;
+        onerror = null;
+        onprogress = null;
+        onreadystatechange = null;
+        native = null;
+        url = '';
+        open(method, url) {
+            const resolvedUrl = trackedAssetUrl(url);
+            if (!resolvedUrl || !isTrackedAssetUrl(resolvedUrl)) {
+                const nativeUrl = resolvedUrl || (url instanceof URL ? url.href : String(url));
+                this.native = new NativeXMLHttpRequest();
+                this.native.responseType = this.responseType;
+                this.native.timeout = this.timeout;
+                this.native.withCredentials = this.withCredentials;
+                this.native.onload = (event) => {
+                    this.response = this.native?.response;
+                    this.responseText = this.native?.responseText || '';
+                    this.readyState = this.native?.readyState || 0;
+                    this.status = this.native?.status || 0;
+                    this.statusText = this.native?.statusText || '';
+                    this.onreadystatechange?.call(this, event);
+                    this.onload?.call(this, event);
+                };
+                this.native.onerror = (event) => {
+                    this.readyState = this.native?.readyState || 4;
+                    this.status = this.native?.status || 0;
+                    this.statusText = this.native?.statusText || '';
+                    this.onreadystatechange?.call(this, event);
+                    this.onerror?.call(this, event);
+                };
+                this.native.onprogress = (event) => {
+                    this.onprogress?.call(this, event);
+                };
+                this.native.onreadystatechange = (event) => {
+                    this.readyState = this.native?.readyState || 0;
+                    this.onreadystatechange?.call(this, event);
+                };
+                this.native.open(method, nativeUrl);
+                return;
+            }
+            this.url = resolvedUrl;
+            this.readyState = 1;
+            this.onreadystatechange?.call(this, new ProgressEvent('readystatechange'));
+        }
+        setRequestHeader(name, value) {
+            this.native?.setRequestHeader(name, value);
+        }
+        async send(body) {
+            if (this.native) {
+                this.native.send(body);
+                return;
+            }
+            try {
+                const loaded = await loadTrackedAsset(this.url);
+                const buffer = responseBuffer(loaded.bytes);
+                this.status = 200;
+                this.statusText = 'OK';
+                this.readyState = 4;
+                if (this.responseType === 'arraybuffer') {
+                    this.response = buffer;
+                }
+                else if (this.responseType === 'blob') {
+                    this.response = new Blob([buffer], {
+                        type: loaded.mimeType || 'application/octet-stream'
+                    });
+                }
+                else {
+                    const text = decoder.decode(loaded.bytes);
+                    this.responseText = text;
+                    this.response = text;
+                }
+                const progressEvent = new ProgressEvent('progress', {
+                    lengthComputable: true,
+                    loaded: loaded.bytes.byteLength,
+                    total: loaded.bytes.byteLength
+                });
+                this.onprogress?.call(this, progressEvent);
+                this.onreadystatechange?.call(this, new ProgressEvent('readystatechange'));
+                this.onload?.call(this, new ProgressEvent('load'));
+            }
+            catch (error) {
+                this.readyState = 4;
+                this.status = 0;
+                this.statusText = error instanceof Error ? error.message : String(error);
+                this.onreadystatechange?.call(this, new ProgressEvent('readystatechange'));
+                this.onerror?.call(this, new ProgressEvent('error'));
+            }
+        }
+        abort() {
+            this.native?.abort();
+        }
+        getAllResponseHeaders() {
+            return this.native?.getAllResponseHeaders() || '';
+        }
+        getResponseHeader(name) {
+            return this.native?.getResponseHeader(name) || null;
+        }
+    }
+    globalThis.XMLHttpRequest = RuntimeAssetXMLHttpRequest;
+}
+function installRuntimeAssetInterceptors() {
+    if (interceptorsInstalled)
+        return;
+    interceptorsInstalled = true;
+    globalThis.fetch = (async (input, init) => {
+        const resolvedUrl = trackedAssetUrl(input);
+        if (!resolvedUrl || !isTrackedAssetUrl(resolvedUrl))
+            return originalFetch(input, init);
+        return createTrackedResponse(await loadTrackedAsset(resolvedUrl));
+    });
+    installTrackedFetch();
+}
+export function configureWorkerRuntimeAssets(config) {
+    activeConfig = config;
+    installRuntimeAssetInterceptors();
+}
+export function handleWorkerAssetMessage(data) {
+    const response = data?.assetResponse;
+    if (!response)
+        return false;
+    const pending = pendingAssetRequests.get(response.id);
+    if (!pending)
+        return true;
+    pendingAssetRequests.delete(response.id);
+    if (!response.ok) {
+        pending.reject(new Error(response.error || 'Runtime asset request failed'));
+        return true;
+    }
+    pending.resolve({
+        bytes: new Uint8Array(response.bytes),
+        mimeType: response.mimeType || undefined
+    });
+    return true;
+}
+export async function loadWorkerRuntimeAsset(asset) {
+    if (!activeConfig)
+        throw new Error('Runtime asset config unavailable');
+    return await loadTrackedAsset(new URL(asset, activeConfig.baseUrl).href);
+}

package/dist/playground/worker/clang.js

@@ -17,7 +17,7 @@ async function loadClang(path, log) {
     });
 }
 self.onmessage = async (event) => {
-    const { code, buffer, debugBuffer, load, interrupt, log, path, prepare, args, debug, breakpoints, pauseOnEntry } = event.data;
+    const { code, buffer, debugBuffer, load, interrupt, log, path, prepare, language, compileArgs, programArgs, cppVersion, cVersion, debug, breakpoints, pauseOnEntry } = event.data;
     if (load) {
         await loadClang(path, log);
         postMessage({ load: true });
@@ -28,7 +28,11 @@ self.onmessage = async (event) => {
         interruptBufferClang = new Uint8Array(interrupt);
         try {
             await clang.compileLink(code, {
-                args,
+                language,
+                compileArgs,
+                programArgs,
+                cppVersion,
+                cVersion,
                 debug,
                 breakpoints,
                 pauseOnEntry,
@@ -48,7 +52,11 @@ self.onmessage = async (event) => {
         interruptBufferClang = new Uint8Array(interrupt);
         try {
             await clang.compileLinkRun(code, {
-                args,
+                language,
+                compileArgs,
+                programArgs,
+                cppVersion,
+                cVersion,
                 debug,
                 breakpoints,
                 pauseOnEntry,

package/dist/playground/worker/java.js

@@ -1,6 +1,6 @@
 import { prepareJavaStdinInjection } from '../javaStdin';
 import { waitForBufferedStdin } from '../stdinBuffer';
-import { resolveTeaVmAssetUrl } from '../teavmConfig';
+import { configureWorkerRuntimeAssets, handleWorkerAssetMessage, loadWorkerRuntimeAsset } from './assets';
 let compilerLib = null;
 let compiler = null;
 let runtimeLoad = null;
@@ -15,18 +15,8 @@ let compiledStdin = '';
 let compiledMainClass = '';
 let compiledWasm = null;
 let currentSourcePath = '';
-const isGzip = (bytes) => bytes.length >= 2 && bytes[0] === 0x1f && bytes[1] === 0x8b;
-const maybeDecompressWasm = async (bytes) => {
-    if (!isGzip(bytes))
-        return bytes;
-    if (typeof DecompressionStream === 'undefined') {
-        throw new Error('Generated WebAssembly is gzip-compressed, but DecompressionStream is unavailable');
-    }
-    const stream = new Blob([Uint8Array.from(bytes)])
-        .stream()
-        .pipeThrough(new DecompressionStream('gzip'));
-    return new Uint8Array(await new Response(stream).arrayBuffer());
-};
+const decoder = new TextDecoder();
+const toInt8Array = (bytes) => new Int8Array(bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength));
 const flushStdout = () => {
     if (!stdoutBuffer)
         return;
@@ -50,41 +40,31 @@ const pushStderr = (charCode) => {
         flushStderr();
 };
 self.addEventListener('message', async (event) => {
-    const { load, baseUrl, buffer, code, prepare, args = [], stdin = '' } = event.data;
+    if (handleWorkerAssetMessage(event.data))
+        return;
+    const { load, assets, buffer, code, prepare, args = [], stdin = '' } = event.data;
     try {
         if (load) {
+            const runtimeAssets = assets;
+            configureWorkerRuntimeAssets(runtimeAssets || null);
+            const baseUrl = runtimeAssets?.baseUrl || '';
             if (!compiler || loadedBaseUrl !== baseUrl) {
                 loadedBaseUrl = baseUrl;
-                const runtimeSource = await fetch(resolveTeaVmAssetUrl(baseUrl, 'compiler.wasm-runtime.js')).then((response) => {
-                    if (!response.ok)
-                        throw new Error(`Failed to load TeaVM compiler runtime: ${response.status}`);
-                    return response.text();
-                });
+                const runtimeSource = decoder.decode((await loadWorkerRuntimeAsset('compiler.wasm-runtime.js')).bytes);
                 const runtimeUrl = URL.createObjectURL(new Blob([runtimeSource], { type: 'text/javascript;charset=utf-8' }));
                 const runtimeModule = await import(/* @vite-ignore */ runtimeUrl);
+                URL.revokeObjectURL(runtimeUrl);
                 const runtimeLoadFn = runtimeModule.load;
                 runtimeLoad = runtimeLoadFn;
-                const compilerWasm = await fetch(resolveTeaVmAssetUrl(baseUrl, 'compiler.wasm')).then(async (response) => {
-                    if (!response.ok)
-                        throw new Error(`Failed to load TeaVM compiler wasm: ${response.status}`);
-                    return await maybeDecompressWasm(new Uint8Array(await response.arrayBuffer()));
-                });
+                const compilerWasm = (await loadWorkerRuntimeAsset('compiler.wasm')).bytes;
                 const compilerModule = await runtimeLoadFn(compilerWasm, {
                     stackDeobfuscator: { enabled: false }
                 });
                 compilerLib = compilerModule.exports;
                 compiler = compilerLib.createCompiler();
                 const [sdk, runtimeClasslib] = await Promise.all([
-                    fetch(resolveTeaVmAssetUrl(baseUrl, 'compile-classlib-teavm.bin')).then(async (response) => {
-                        if (!response.ok)
-                            throw new Error(`Failed to load TeaVM SDK: ${response.status}`);
-                        return new Int8Array(await response.arrayBuffer());
-                    }),
-                    fetch(resolveTeaVmAssetUrl(baseUrl, 'runtime-classlib-teavm.bin')).then(async (response) => {
-                        if (!response.ok)
-                            throw new Error(`Failed to load TeaVM runtime classlib: ${response.status}`);
-                        return new Int8Array(await response.arrayBuffer());
-                    })
+                    loadWorkerRuntimeAsset('compile-classlib-teavm.bin').then(({ bytes }) => toInt8Array(bytes)),
+                    loadWorkerRuntimeAsset('runtime-classlib-teavm.bin').then(({ bytes }) => toInt8Array(bytes))
                 ]);
                 compiler.setSdk(sdk);
                 compiler.setTeaVMClasslib(runtimeClasslib);
@@ -185,7 +165,7 @@ self.addEventListener('message', async (event) => {
             compiledCode = code;
             compiledStdin = stdinInjection.stdinCacheKey;
             compiledMainClass = mainClass;
-            compiledWasm = await maybeDecompressWasm(new Uint8Array(compiler.getWebAssemblyOutputFile('app.wasm')));
+            compiledWasm = new Uint8Array(compiler.getWebAssemblyOutputFile('app.wasm'));
         }
         if (prepare) {
             self.postMessage({ results: true });

package/dist/playground/worker/python.js

@@ -1,4 +1,5 @@
 import { flushQueuedStdin, readBufferedStdin, waitForBufferedStdin } from '../stdinBuffer';
+import { configureWorkerRuntimeAssets, handleWorkerAssetMessage } from './assets';
 self.document = {
     querySelector() {
         return null;
@@ -7,8 +8,7 @@ self.document = {
         return [];
     }
 };
-let stdinBufferPyodide, debugBufferPyodide, watchBufferPyodide, watchResultBufferPyodide, interruptBufferPyodide, pyodide, path = '', packageBaseUrl = '';
-let jungolRobotReady = false;
+let stdinBufferPyodide, debugBufferPyodide, watchBufferPyodide, watchResultBufferPyodide, interruptBufferPyodide, pyodide, baseUrl = '', packageBaseUrl = '';
 const imageHook = `
 if not globals().get("__wasm_idle_img_inited__", False):
     globals()["__wasm_idle_img_inited__"] = True
@@ -157,33 +157,12 @@ async function loadPyodide(path) {
     if (pyodide)
         return;
     const { loadPyodide } = await import('pyodide');
-    pyodide = await loadPyodide({ indexURL: path + '/pyodide' });
-    packageBaseUrl = path + '/pyodide';
+    pyodide = await loadPyodide({ indexURL: path });
+    packageBaseUrl = path;
     const setCdnUrl = pyodide?.setCdnUrl;
     if (typeof setCdnUrl === 'function')
         setCdnUrl(packageBaseUrl);
 }
-async function ensureRobotJungol() {
-    if (jungolRobotReady || !pyodide)
-        return;
-    try {
-        const res = await fetch(path + '/jungol-robot/jungol_robot.zip');
-        if (!res.ok)
-            throw new Error('jungol-robot zip not found');
-        const data = await res.arrayBuffer();
-        const siteRaw = pyodide.runPython('import site; site.getsitepackages()[0]');
-        const sitePath = typeof siteRaw === 'string' ? siteRaw : siteRaw.toString();
-        const unpackArchive = pyodide?.unpackArchive;
-        if (typeof unpackArchive !== 'function')
-            throw new Error('pyodide.unpackArchive unavailable');
-        unpackArchive(data, 'zip', sitePath);
-        pyodide.runPython('import importlib; importlib.invalidate_caches()');
-        jungolRobotReady = true;
-    }
-    catch (e) {
-        console.warn('jungol-robot preload failed', e);
-    }
-}
 async function loadPackages(code) {
     if (!code)
         return;
@@ -203,20 +182,22 @@ async function loadPackages(code) {
     }
 }
 self.onmessage = async (event) => {
-    const { code, buffer, debugBuffer, watchBuffer, watchResultBuffer, load, interrupt, path: _p, prepare, debug = false, breakpoints = [], pauseOnEntry = false } = event.data;
+    if (handleWorkerAssetMessage(event.data))
+        return;
+    const { code, buffer, debugBuffer, watchBuffer, watchResultBuffer, load, interrupt, assets, prepare, debug = false, breakpoints = [], pauseOnEntry = false } = event.data;
     if (load) {
-        path = _p;
+        const runtimeAssets = assets;
+        baseUrl = runtimeAssets?.baseUrl || baseUrl;
+        configureWorkerRuntimeAssets(runtimeAssets || null);
         postMessage({ output: 'Loading Pyodide...' });
-        await loadPyodide(path);
-        await ensureRobotJungol();
+        await loadPyodide(baseUrl);
         postMessage({ output: ' Done.\n\r' });
         postMessage({ load: true });
     }
     else if (prepare) {
         postMessage({ output: 'Loading packages...' });
         try {
-            await loadPyodide(path);
-            await ensureRobotJungol();
+            await loadPyodide(baseUrl);
             await loadPackages(code);
             postMessage({ output: ' Done.\n\r' });
             self.postMessage({ results: true });
@@ -226,8 +207,7 @@ self.onmessage = async (event) => {
         }
     }
     else if (code) {
-        await loadPyodide(path);
-        await ensureRobotJungol();
+        await loadPyodide(baseUrl);
         await loadPackages(code);
         const ts = Date.now();
         stdinBufferPyodide = new Int32Array(buffer);

package/dist/terminal/Terminal.svelte

@@ -5,6 +5,7 @@
 		DebugSessionEvent,
 		SandboxExecutionOptions
 	} from '../playground/options';
+	import type { PlaygroundRuntimeAssets } from '../playground/assets';
 	import type { Sandbox } from '../playground/sandbox';
 	import type { TerminalControl } from './types';
 	import { Theme, registerAllPlugins } from './';
@@ -16,6 +17,7 @@
 	interface Props {
 		dark?: boolean;
 		path?: string;
+		runtimeAssets?: string | PlaygroundRuntimeAssets;
 		font?: string;
 
 		onload?: () => void;
@@ -30,6 +32,7 @@
 	let {
 		dark = false,
 		path = '',
+		runtimeAssets = undefined,
 		font = "'D2 coding', monospace",
 		onload,
 		onfinish,
@@ -50,7 +53,22 @@
 		first = true,
 		tc = 0,
 		plugin = $state(),
-		ll: string | null = null;
+		ll: string | null = null,
+		stopRequested = false;
+
+	function phaseProgress(
+		progress: { set?: (value: number) => void } | undefined,
+		start: number,
+		end: number
+	) {
+		if (!progress) return undefined;
+		return {
+			set(value: number) {
+				const clamped = Number.isFinite(value) ? Math.min(Math.max(value, 0), 1) : 0;
+				progress.set?.(start + (end - start) * clamped);
+			}
+		};
+	}
 
 	function wait() {
 		return new Promise<void>((r) => {
@@ -88,10 +106,12 @@
 				return x;
 			})
 			.catch((msg) => {
+				if (stopRequested) return false;
 				term?.write(`\r\n\x1B[1;3;31m${msg}\u001B[?25l`);
 				return false;
 			})
 			.finally(() => {
+				stopRequested = false;
 				onfinish?.();
 				finish = true;
 				if (term) term.options.cursorBlink = false;
@@ -102,6 +122,7 @@
 		await wait();
 		if (!term) return;
 		term.options.cursorBlink = blink;
+		term.write('\u001B[?25h');
 		term.focus();
 
 		if (!first) term?.write(`\r\n\x1b[0m`);
@@ -146,11 +167,18 @@
 			args: string[] = [],
 			options: SandboxExecutionOptions = {}
 		) {
+			const loadProgress = phaseProgress(prog, 0, 0.85);
+			const prepareProgress = phaseProgress(prog, 0.85, 0.99);
 			await Promise.all([
-				initSandbox(language).then(() => sandbox.load(path, code, log, args, options)),
+				initSandbox(language).then(() =>
+					sandbox.load(runtimeAssets || path, code, log, args, options, loadProgress)
+				),
 				initTerm(false)
 			]);
-			return !!(await runSandbox(sandbox.run(code, true, log, prog, args, options)));
+			prepareProgress?.set?.(0);
+			return !!(await runSandbox(
+				sandbox.run(code, true, log, prepareProgress, args, options)
+			));
 		},
 		async run(
 			language: string,
@@ -161,7 +189,9 @@
 			options: SandboxExecutionOptions = {}
 		) {
 			await Promise.all([
-				initSandbox(language).then(() => sandbox.load(path, code, log, args, options)),
+				initSandbox(language).then(() =>
+					sandbox.load(runtimeAssets || path, code, log, args, options, prog)
+				),
 				initTerm()
 			]);
 			return await runSandbox(sandbox.run(code, false, log, prog, args, options));
@@ -171,6 +201,13 @@
 			term?.dispose();
 			if (sandbox) await sandbox.clear();
 		},
+		async stop() {
+			await wait();
+			stopRequested = true;
+			finish = true;
+			if (sandbox?.kill) sandbox.kill();
+			else sandbox?.terminate?.();
+		},
 		async debugCommand(command: DebugCommand) {
 			await wait();
 			sandbox.debugCommand?.(command);
@@ -233,12 +270,19 @@
 					) {
 						appendInputText(e.key);
 					}
-				} else if ((ev.ctrlKey || ev.metaKey) && ev.key === 'c') {
+				} else if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === 'c') {
+					if (term.hasSelection()) {
+						const selectedText = term.getSelection();
+						if (selectedText) {
+							navigator.clipboard.writeText(selectedText).catch(() => {});
+							return;
+						}
+					}
 					sandbox.kill?.();
-				} else if ((ev.ctrlKey || ev.metaKey) && ev.key === 'd') {
+				} else if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === 'd') {
 					if (input.length > 0) submitCurrentInput();
 					else sandbox.eof?.();
-				} else if ((ev.ctrlKey || ev.metaKey) && ev.key === 'v') {
+				} else if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === 'v') {
 					navigator.clipboard.readText().then((text) => {
 						applyPastedText(text);
 					});
@@ -272,4 +316,10 @@
 		width: 100%;
 		height: 100%;
 	}
+
+	:global(.xterm),
+	:global(.xterm .xterm-viewport),
+	:global(.xterm .composition-view) {
+		background-color: transparent;
+	}
 </style>

package/dist/terminal/Terminal.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { CompilerDiagnostic, DebugSessionEvent } from '../playground/options';
+import type { PlaygroundRuntimeAssets } from '../playground/assets';
 import type { TerminalControl } from './types';
 import '@xterm/xterm/css/xterm.css';
 interface Props {
     dark?: boolean;
     path?: string;
+    runtimeAssets?: string | PlaygroundRuntimeAssets;
     font?: string;
     onload?: () => void;
     onfinish?: () => void;

package/dist/terminal/theme.js

@@ -1,7 +1,7 @@
 const theme = {
     Tango_Dark: {
         foreground: '#eee',
-        background: '#111827',
+        background: 'transparent',
         cursor: '#FFFFFF',
         cursorAccent: '#ffffff',
         selection: '#ffffff44',
@@ -24,7 +24,7 @@ const theme = {
     },
     Tango_Light: {
         foreground: '#111',
-        background: '#FFFFFF',
+        background: 'rgba(0, 0, 0, 0)',
         cursor: '#000000',
         cursorAccent: '#000000',
         selection: '#00000044',