@ox-content/code-play 3.0.0-alpha.1

package/dist/browser.mjs

@@ -0,0 +1,1846 @@
+//#region src/catalog.ts
+var rustSchema = [
+	{
+		key: "channel",
+		label: "Channel",
+		type: "select",
+		options: [
+			{
+				value: "stable",
+				label: "stable"
+			},
+			{
+				value: "beta",
+				label: "beta"
+			},
+			{
+				value: "nightly",
+				label: "nightly"
+			}
+		],
+		default: "stable"
+	},
+	{
+		key: "edition",
+		label: "Edition",
+		type: "select",
+		options: [
+			{
+				value: "2018",
+				label: "2018"
+			},
+			{
+				value: "2021",
+				label: "2021"
+			},
+			{
+				value: "2024",
+				label: "2024"
+			}
+		],
+		default: "2024"
+	},
+	{
+		key: "mode",
+		label: "Mode",
+		type: "select",
+		options: [{
+			value: "debug",
+			label: "debug"
+		}, {
+			value: "release",
+			label: "release"
+		}],
+		default: "debug"
+	},
+	{
+		key: "crateType",
+		label: "Crate type",
+		type: "select",
+		options: [
+			{
+				value: "auto",
+				label: "auto"
+			},
+			{
+				value: "bin",
+				label: "bin"
+			},
+			{
+				value: "lib",
+				label: "lib"
+			}
+		],
+		default: "auto"
+	}
+];
+var tsSchema = [
+	{
+		key: "strict",
+		label: "Strict",
+		type: "boolean",
+		default: true
+	},
+	{
+		key: "target",
+		label: "Target",
+		type: "select",
+		options: [
+			{
+				value: "ES2020",
+				label: "ES2020"
+			},
+			{
+				value: "ES2022",
+				label: "ES2022"
+			},
+			{
+				value: "ESNext",
+				label: "ESNext"
+			}
+		],
+		default: "ES2022"
+	},
+	{
+		key: "jsx",
+		label: "JSX",
+		type: "select",
+		options: [{
+			value: "react-jsx",
+			label: "react-jsx"
+		}, {
+			value: "preserve",
+			label: "preserve"
+		}],
+		default: "react-jsx"
+	}
+];
+function remote(id, name, aliases, pistonLanguage, extra = []) {
+	return {
+		id,
+		name,
+		aliases,
+		capabilities: {
+			execute: true,
+			typecheck: false
+		},
+		defaultConfig: { version: "*" },
+		configSchema: [{
+			key: "version",
+			label: "Runtime version",
+			type: "string",
+			default: "*"
+		}, ...extra],
+		backend: "remote",
+		remote: { pistonLanguage }
+	};
+}
+function framework(id, name, aliases) {
+	return {
+		id,
+		name,
+		aliases,
+		capabilities: {
+			execute: true,
+			typecheck: false
+		},
+		defaultConfig: {},
+		configSchema: [],
+		backend: "framework",
+		framework: id
+	};
+}
+var LANGUAGE_CATALOG = [
+	{
+		id: "typescript",
+		name: "TypeScript",
+		aliases: [
+			"ts",
+			"tsx",
+			"mts",
+			"cts"
+		],
+		capabilities: {
+			execute: true,
+			typecheck: true
+		},
+		defaultConfig: {
+			strict: true,
+			target: "ES2022",
+			jsx: "react-jsx"
+		},
+		configSchema: tsSchema,
+		backend: "typescript"
+	},
+	{
+		id: "javascript",
+		name: "JavaScript",
+		aliases: [
+			"js",
+			"jsx",
+			"mjs",
+			"cjs"
+		],
+		capabilities: {
+			execute: true,
+			typecheck: false
+		},
+		defaultConfig: {},
+		configSchema: [],
+		backend: "javascript"
+	},
+	{
+		id: "rust",
+		name: "Rust",
+		aliases: ["rs"],
+		capabilities: {
+			execute: true,
+			typecheck: true
+		},
+		defaultConfig: {
+			channel: "stable",
+			edition: "2024",
+			mode: "debug",
+			crateType: "auto"
+		},
+		configSchema: rustSchema,
+		backend: "rust-playground"
+	},
+	{
+		id: "go",
+		name: "Go",
+		aliases: ["golang"],
+		capabilities: {
+			execute: true,
+			typecheck: true
+		},
+		defaultConfig: { withVet: true },
+		configSchema: [{
+			key: "withVet",
+			label: "Run vet",
+			type: "boolean",
+			default: true
+		}],
+		backend: "go-playground"
+	},
+	framework("vue", "Vue", ["vue"]),
+	framework("react", "React", ["react"]),
+	framework("svelte", "Svelte", ["svelte"]),
+	framework("solid", "Solid", ["solid"]),
+	remote("python", "Python", ["py"], "python"),
+	remote("php", "PHP", [], "php"),
+	remote("ruby", "Ruby", ["rb"], "ruby"),
+	remote("sh", "sh", [
+		"bash",
+		"shell",
+		"zsh"
+	], "bash", [{
+		key: "shell",
+		label: "Shell",
+		type: "select",
+		options: [{
+			value: "bash",
+			label: "bash"
+		}, {
+			value: "sh",
+			label: "sh"
+		}],
+		default: "bash"
+	}]),
+	remote("java", "Java", [], "java"),
+	remote("swift", "Swift", [], "swift"),
+	remote("kotlin", "Kotlin", ["kt"], "kotlin"),
+	remote("c", "C", [], "c"),
+	remote("cpp", "C++", [
+		"c++",
+		"cc",
+		"cxx"
+	], "c++", [{
+		key: "std",
+		label: "Standard",
+		type: "select",
+		options: [
+			{
+				value: "c++17",
+				label: "C++17"
+			},
+			{
+				value: "c++20",
+				label: "C++20"
+			},
+			{
+				value: "c++23",
+				label: "C++23"
+			}
+		],
+		default: "c++20"
+	}]),
+	remote("zig", "Zig", [], "zig"),
+	remote("haskell", "Haskell", ["hs"], "haskell"),
+	remote("ocaml", "OCaml", ["ml"], "ocaml"),
+	remote("csharp", "C#", ["cs", "c#"], "csharp"),
+	remote("elixir", "Elixir", ["ex"], "elixir"),
+	remote("fsharp", "F#", ["fs", "f#"], "fsharp"),
+	remote("clojure", "Clojure", ["clj", "cloujure"], "clojure"),
+	remote("scheme", "Scheme", ["scm"], "scheme"),
+	remote("moonbit", "MoonBit", ["mbt"], "moonbit"),
+	remote("lean", "Lean", ["lean4"], "lean"),
+	remote("rocq", "Rocq", ["coq"], "coq")
+];
+var byId = new Map(LANGUAGE_CATALOG.map((language) => [language.id, language]));
+var byAlias = /* @__PURE__ */ new Map();
+for (const language of LANGUAGE_CATALOG) {
+	byAlias.set(language.id, language);
+	for (const alias of language.aliases) byAlias.set(alias.toLowerCase(), language);
+}
+function resolveLanguage(input) {
+	return byAlias.get(input.trim().toLowerCase()) ?? byId.get(input.trim().toLowerCase());
+}
+//#endregion
+//#region src/config.ts
+var DEFAULT_ENDPOINTS = {
+	rust: "https://play.rust-lang.org/execute",
+	go: "https://play.golang.org/compile"
+};
+var DEFAULT_VIEWERS = {
+	config: true,
+	stdio: true,
+	stderr: true,
+	provenance: true,
+	timing: true
+};
+function resolveCodePlayOptions(options = {}) {
+	return {
+		languages: resolveEnabledLanguages(options.languages ?? {}),
+		timeoutMs: options.timeoutMs ?? 1e4,
+		ui: options.ui ?? "default",
+		viewers: {
+			...DEFAULT_VIEWERS,
+			...options.viewers
+		},
+		endpoints: {
+			...DEFAULT_ENDPOINTS,
+			...options.endpoints
+		},
+		srcDir: options.srcDir,
+		outDir: options.outDir,
+		base: normalizeBase(options.base ?? "/"),
+		proxy: options.proxy ?? true
+	};
+}
+function resolveEnabledLanguages(languages) {
+	const resolved = /* @__PURE__ */ new Map();
+	for (const [key, enable] of Object.entries(languages)) {
+		if (enable === false) continue;
+		const definition = resolveLanguage(key);
+		if (!definition) throw new Error(`Unknown Code Play language: ${key}.`);
+		const explicit = enable === true ? {} : enable;
+		resolved.set(definition.id, {
+			id: definition.id,
+			execute: explicit.execute ?? definition.capabilities.execute,
+			typecheck: explicit.typecheck ?? definition.capabilities.typecheck,
+			endpoint: explicit.endpoint,
+			config: {
+				...definition.defaultConfig,
+				...explicit.config
+			}
+		});
+	}
+	return resolved;
+}
+function mergeConfig(languageId, enabled, override) {
+	return {
+		...resolveLanguage(languageId)?.defaultConfig,
+		...enabled?.config,
+		...override
+	};
+}
+function normalizeBase(base) {
+	if (base === "/" || base === "") return "/";
+	return base.endsWith("/") ? base : `${base}/`;
+}
+//#endregion
+//#region src/escape.ts
+function escapeHtml(value) {
+	return value.replace(/[&<>"']/g, (char) => {
+		switch (char) {
+			case "&": return "&amp;";
+			case "<": return "&lt;";
+			case ">": return "&gt;";
+			case "\"": return "&quot;";
+			default: return "&#39;";
+		}
+	});
+}
+//#endregion
+//#region src/timing.ts
+var PhaseTracker = class {
+	startedAt;
+	phases = [];
+	current;
+	constructor(now = nowMs) {
+		this.now = now;
+		this.startedAt = now();
+	}
+	now;
+	start(id, label) {
+		this.stop();
+		this.current = {
+			id,
+			label,
+			startMs: this.now() - this.startedAt
+		};
+	}
+	stop() {
+		if (!this.current) return;
+		const durationMs = Math.max(0, this.now() - this.startedAt - this.current.startMs);
+		this.phases.push({
+			id: this.current.id,
+			label: this.current.label,
+			startMs: this.current.startMs,
+			durationMs
+		});
+		this.current = void 0;
+	}
+	report() {
+		this.stop();
+		return {
+			totalMs: Math.max(0, this.now() - this.startedAt),
+			phases: this.phases.slice()
+		};
+	}
+};
+function nowMs() {
+	return typeof performance !== "undefined" ? performance.now() : Date.now();
+}
+function emptyTiming() {
+	return {
+		totalMs: 0,
+		phases: []
+	};
+}
+//#endregion
+//#region src/framework.ts
+var RUNTIMES = {
+	vue: {
+		specifier: "vue",
+		cdn: "https://esm.sh/vue@3"
+	},
+	react: {
+		specifier: "react",
+		cdn: "https://esm.sh/react@19"
+	},
+	svelte: {
+		specifier: "svelte",
+		cdn: "https://esm.sh/svelte@5"
+	},
+	solid: {
+		specifier: "solid-js",
+		cdn: "https://esm.sh/solid-js@1"
+	}
+};
+async function runFramework(request) {
+	const tracker = new PhaseTracker();
+	tracker.start("compile", "Compile preview");
+	const framework = request.definition.framework ?? "vue";
+	const html = buildPreviewDocument(framework, request.code);
+	tracker.stop();
+	return {
+		status: "ok",
+		stdio: [],
+		diagnostics: [],
+		provenance: {
+			compile: {
+				host: "local",
+				runtime: `${framework}-preview`
+			},
+			execute: {
+				host: "iframe",
+				runtime: framework,
+				sandbox: "srcdoc"
+			}
+		},
+		timing: tracker.report(),
+		preview: {
+			kind: "html",
+			html
+		}
+	};
+}
+function buildPreviewDocument(framework, code) {
+	const runtime = RUNTIMES[framework];
+	return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>${escapeHtml(framework)} preview</title>
+  <script type="importmap">${JSON.stringify({ imports: { [runtime.specifier]: runtime.cdn } })}<\/script>
+  <style>html,body{margin:0;padding:1rem;font:14px/1.5 system-ui,sans-serif;}</style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module">
+${indentPreview(code)}
+  <\/script>
+</body>
+</html>
+`;
+}
+function indentPreview(code) {
+	return code.replace(/<\/script/gi, "<\\/script").split("\n").map((line) => `    ${line}`).join("\n");
+}
+//#endregion
+//#region src/stdio.ts
+var StdioBuffer = class {
+	events = [];
+	startedAt;
+	constructor(startedAt = 0) {
+		this.startedAt = startedAt;
+	}
+	push(stream, text, timestampMs = elapsed(this.startedAt)) {
+		const event = {
+			stream,
+			text,
+			timestampMs
+		};
+		this.events.push(event);
+		return event;
+	}
+	snapshot() {
+		return this.events.slice();
+	}
+};
+function joinStream(events, stream) {
+	return events.filter((event) => event.stream === stream).map((event) => event.text).join("");
+}
+function selectStream(events, stream) {
+	return events.filter((event) => event.stream === stream);
+}
+function withStdioText(result) {
+	return {
+		...result,
+		stdout: joinStream(result.stdio, "stdout"),
+		stderr: joinStream(result.stdio, "stderr")
+	};
+}
+function formatConsoleArgs(args) {
+	return `${args.map(formatConsoleArg).join(" ")}\n`;
+}
+function formatConsoleArg(value) {
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return String(value);
+	if (value === void 0) return "undefined";
+	if (value === null) return "null";
+	try {
+		return JSON.stringify(value);
+	} catch {
+		return Object.prototype.toString.call(value);
+	}
+}
+function elapsed(startedAt) {
+	const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+	return Math.max(0, now - startedAt);
+}
+//#endregion
+//#region src/go.ts
+async function runGo(request, mode) {
+	const tracker = new PhaseTracker();
+	const stdio = new StdioBuffer(tracker.startedAt);
+	const params = new URLSearchParams({
+		version: "2",
+		body: request.code,
+		withVet: request.config.withVet === false ? "false" : "true"
+	});
+	tracker.start(mode === "typecheck" ? "typecheck" : "compile", mode === "typecheck" ? "Typecheck" : "Compile");
+	const response = await request.transport.request({
+		url: request.endpoints.go,
+		method: "POST",
+		headers: { "Content-Type": "application/x-www-form-urlencoded" },
+		body: params.toString(),
+		signal: request.signal
+	});
+	tracker.start("collect", "Collect output");
+	const parsed = parseResponse$2(response.text);
+	const diagnostics = [...parseGoErrors(parsed.Errors ?? "", "go"), ...parseGoErrors(parsed.VetErrors ?? "", "vet")];
+	for (const event of parsed.Events ?? []) {
+		const stream = event.Kind === "stderr" ? "stderr" : "stdout";
+		stdio.push(stream, event.Message ?? "");
+	}
+	if (parsed.Errors) stdio.push("stderr", parsed.Errors);
+	tracker.stop();
+	return {
+		status: diagnostics.some((item) => item.severity === "error") || !response.ok ? "error" : "ok",
+		stdio: stdio.snapshot(),
+		diagnostics,
+		provenance: {
+			compile: {
+				host: hostFromUrl$3(request.endpoints.go),
+				runtime: "go"
+			},
+			execute: mode === "execute" ? {
+				host: hostFromUrl$3(request.endpoints.go),
+				runtime: "go-playground",
+				sandbox: "playground"
+			} : void 0
+		},
+		timing: tracker.report()
+	};
+}
+function parseResponse$2(text) {
+	try {
+		return JSON.parse(text);
+	} catch {
+		return { Errors: text };
+	}
+}
+function parseGoErrors(output, source) {
+	if (!output.trim()) return [];
+	return output.split(/\r?\n/).map((line) => line.trim()).filter(Boolean).map((line) => {
+		const match = /^(?:prog\.go:)?(\d+)(?::(\d+))?:\s*(.*)$/.exec(line);
+		return {
+			message: match?.[3] ?? line,
+			severity: "error",
+			line: match?.[1] ? Number(match[1]) : void 0,
+			column: match?.[2] ? Number(match[2]) : void 0,
+			source
+		};
+	});
+}
+function hostFromUrl$3(url) {
+	try {
+		return new URL(url, "https://code-play.local").host || url;
+	} catch {
+		return url;
+	}
+}
+//#endregion
+//#region src/transport.ts
+function createFetchTransport(fetchImpl = fetch) {
+	return { async request(input) {
+		const response = await fetchImpl(input.url, {
+			method: input.method,
+			headers: input.headers,
+			body: input.body,
+			signal: input.signal
+		});
+		return {
+			ok: response.ok,
+			status: response.status,
+			text: await response.text()
+		};
+	} };
+}
+var MissingTransportError = class extends Error {
+	constructor(host) {
+		super(`No Code Play transport is configured for ${host}.`);
+		this.name = "MissingTransportError";
+	}
+};
+function abortError() {
+	const error = /* @__PURE__ */ new Error("The Code Play run was cancelled.");
+	error.name = "AbortError";
+	return error;
+}
+function isAbortError(error) {
+	return Boolean(error && typeof error === "object" && "name" in error && error.name === "AbortError");
+}
+function createUnavailableTransport() {
+	return { request(input) {
+		if (input.signal?.aborted) return Promise.reject(abortError());
+		return Promise.reject(new MissingTransportError(input.url));
+	} };
+}
+//#endregion
+//#region src/javascript-sandbox.ts
+var JS_SANDBOX_FLAGS = "allow-scripts";
+function embedJson(value) {
+	return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+function buildJavaScriptSandboxDocument(code, messageId) {
+	return `<!doctype html><html><head><meta charset="utf-8"></head><body><script>
+(function () {
+  var id = ${embedJson(messageId)};
+  var stdout = [];
+  var stderr = [];
+  function format(args) {
+    return Array.prototype.map.call(args, function (value) {
+      if (typeof value === "string") return value;
+      if (value === undefined) return "undefined";
+      if (value === null) return "null";
+      try { return JSON.stringify(value); } catch (error) { return String(value); }
+    }).join(" ") + "\\n";
+  }
+  var consoleLike = {
+    log: function () { stdout.push(format(arguments)); },
+    info: function () { stdout.push(format(arguments)); },
+    warn: function () { stderr.push(format(arguments)); },
+    error: function () { stderr.push(format(arguments)); }
+  };
+  try {
+    var run = new Function("console", ${embedJson(`"use strict";\n${code}`)});
+    var value = run(consoleLike);
+    parent.postMessage({
+      id: id,
+      stdout: stdout,
+      stderr: stderr,
+      value: value === undefined ? undefined : String(value)
+    }, "*");
+  } catch (error) {
+    var message = error && error.message ? String(error.message) : String(error);
+    parent.postMessage({ id: id, stdout: stdout, stderr: stderr, error: message }, "*");
+  }
+})();
+<\/script></body></html>`;
+}
+function applySandboxStreams(stdio, message) {
+	for (const text of message.stdout ?? []) stdio.push("stdout", text);
+	for (const text of message.stderr ?? []) stdio.push("stderr", text);
+}
+async function executeInSandboxIframe(code, timeoutMs, stdio, signal) {
+	if (typeof document === "undefined" || typeof window === "undefined") throw new Error("JavaScript sandbox iframe needs a document.");
+	if (signal?.aborted) throw abortError();
+	const messageId = `ox-code-play-${Math.random().toString(36).slice(2)}`;
+	return new Promise((resolve, reject) => {
+		const frame = document.createElement("iframe");
+		frame.setAttribute("sandbox", JS_SANDBOX_FLAGS);
+		frame.setAttribute("title", "Code Play JavaScript sandbox");
+		frame.hidden = true;
+		const cleanup = () => {
+			window.clearTimeout(timer);
+			window.removeEventListener("message", onMessage);
+			signal?.removeEventListener("abort", onAbort);
+			frame.remove();
+		};
+		const onAbort = () => {
+			cleanup();
+			reject(abortError());
+		};
+		const onMessage = (event) => {
+			if (event.source !== frame.contentWindow || event.data?.id !== messageId) return;
+			cleanup();
+			applySandboxStreams(stdio, event.data);
+			if (event.data.error) {
+				reject(new Error(event.data.error));
+				return;
+			}
+			resolve(event.data.value);
+		};
+		const timer = window.setTimeout(() => {
+			cleanup();
+			reject(Object.assign(/* @__PURE__ */ new Error("JavaScript execution timed out."), { code: "ERR_SCRIPT_EXECUTION_TIMEOUT" }));
+		}, timeoutMs);
+		window.addEventListener("message", onMessage);
+		signal?.addEventListener("abort", onAbort, { once: true });
+		frame.srcdoc = buildJavaScriptSandboxDocument(code, messageId);
+		document.body.append(frame);
+	});
+}
+//#endregion
+//#region src/runtime-host.ts
+/** True when the current isolate can load `node:vm`. */
+function hasNodeVm() {
+	return typeof process !== "undefined" && Boolean(process.versions?.node);
+}
+//#endregion
+//#region src/javascript.ts
+async function runJavaScript(request) {
+	const tracker = new PhaseTracker();
+	tracker.start("execute", "Execute");
+	const stdio = new StdioBuffer(tracker.startedAt);
+	const provenance = { execute: {
+		host: "local",
+		runtime: hasNodeVm() ? "node:vm" : "iframe",
+		sandbox: hasNodeVm() ? "vm" : "srcdoc"
+	} };
+	try {
+		const value = await executeScript(request.code, request.timeoutMs, stdio, request.signal);
+		tracker.stop();
+		return {
+			status: "ok",
+			stdio: stdio.snapshot(),
+			diagnostics: [],
+			provenance,
+			timing: tracker.report(),
+			value: value === void 0 ? void 0 : String(value)
+		};
+	} catch (error) {
+		if (isAbortError(error) || request.signal?.aborted) throw error;
+		tracker.stop();
+		const diagnostic = toDiagnostic(error);
+		stdio.push("stderr", `${diagnostic.message}\n`);
+		return {
+			status: isTimeout(error) ? "timeout" : "error",
+			stdio: stdio.snapshot(),
+			diagnostics: [diagnostic],
+			provenance,
+			timing: tracker.report()
+		};
+	}
+}
+async function executeScript(code, timeoutMs, stdio, signal) {
+	const consoleLike = {
+		log: (...args) => stdio.push("stdout", formatConsoleArgs(args)),
+		info: (...args) => stdio.push("stdout", formatConsoleArgs(args)),
+		warn: (...args) => stdio.push("stderr", formatConsoleArgs(args)),
+		error: (...args) => stdio.push("stderr", formatConsoleArgs(args))
+	};
+	if (signal?.aborted) throw abortError();
+	if (javascriptExecuteRuntime(hasNodeVm(), typeof document !== "undefined") === "vm") {
+		const vm = await import("node:vm");
+		const context = vm.createContext({ console: consoleLike });
+		return vm.runInContext(code, context, {
+			timeout: timeoutMs,
+			displayErrors: true
+		});
+	}
+	return executeInSandboxIframe(code, timeoutMs, stdio, signal);
+}
+function javascriptExecuteRuntime(hasVm, hasDocument) {
+	if (hasVm) return "vm";
+	if (hasDocument) return "iframe";
+	throw new Error("JavaScript execute needs node:vm or a document for the sandbox iframe.");
+}
+function isTimeout(error) {
+	return Boolean(error && typeof error === "object" && "code" in error && error.code === "ERR_SCRIPT_EXECUTION_TIMEOUT");
+}
+function toDiagnostic(error) {
+	if (isErrorLike(error)) return {
+		message: error.message,
+		severity: "error",
+		source: "javascript"
+	};
+	return {
+		message: String(error),
+		severity: "error",
+		source: "javascript"
+	};
+}
+function isErrorLike(error) {
+	return Boolean(error && typeof error === "object" && "message" in error && typeof error.message === "string" && error.message.length > 0);
+}
+//#endregion
+//#region src/remote.ts
+async function runRemote(request) {
+	const tracker = new PhaseTracker();
+	const stdio = new StdioBuffer(tracker.startedAt);
+	const endpoint = request.enabled.endpoint;
+	const language = request.definition.remote?.pistonLanguage ?? request.definition.id;
+	if (!endpoint) {
+		tracker.stop();
+		return {
+			status: "unsupported",
+			stdio: [],
+			diagnostics: [{
+				message: `${request.definition.name} execution needs a configured HTTP executor. Pass languages.${request.definition.id}.endpoint (Piston-compatible).`,
+				severity: "error",
+				source: "code-play"
+			}],
+			provenance: {},
+			timing: tracker.report()
+		};
+	}
+	tracker.start("queue", "Queue");
+	tracker.start("compile", "Compile / execute");
+	const response = await request.transport.request({
+		url: joinEndpoint(endpoint, "execute"),
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({
+			language,
+			version: request.config.version ?? request.definition.remote?.pistonVersion ?? "*",
+			files: [{ content: request.code }]
+		}),
+		signal: request.signal
+	});
+	tracker.start("collect", "Collect output");
+	const parsed = parseResponse$1(response.text);
+	if (parsed.compile?.stdout) stdio.push("stdout", parsed.compile.stdout);
+	if (parsed.compile?.stderr) stdio.push("stderr", parsed.compile.stderr);
+	if (parsed.run?.stdout) stdio.push("stdout", parsed.run.stdout);
+	if (parsed.run?.stderr) stdio.push("stderr", parsed.run.stderr);
+	if (parsed.message && !parsed.run && !parsed.compile) stdio.push("stderr", `${parsed.message}\n`);
+	const compileFailed = (parsed.compile?.code ?? 0) !== 0;
+	const runFailed = (parsed.run?.code ?? 0) !== 0 || Boolean(parsed.run?.signal);
+	const failed = !response.ok || compileFailed || runFailed || Boolean(parsed.message && !parsed.run);
+	tracker.stop();
+	return {
+		status: failed ? "error" : "ok",
+		stdio: stdio.snapshot(),
+		diagnostics: failed ? [{
+			message: parsed.message ?? parsed.run?.stderr ?? parsed.compile?.stderr ?? "Remote execution failed.",
+			severity: "error",
+			source: language
+		}] : [],
+		provenance: {
+			compile: parsed.compile ? {
+				host: hostFromUrl$2(endpoint),
+				runtime: language,
+				sandbox: "piston"
+			} : void 0,
+			execute: {
+				host: hostFromUrl$2(endpoint),
+				runtime: language,
+				sandbox: "piston"
+			}
+		},
+		timing: tracker.report()
+	};
+}
+function parseResponse$1(text) {
+	try {
+		return JSON.parse(text);
+	} catch {
+		return { message: text };
+	}
+}
+function joinEndpoint(endpoint, action) {
+	const trimmed = endpoint.replace(/\/+$/, "");
+	return trimmed.endsWith(action) ? trimmed : `${trimmed}/${action}`;
+}
+function hostFromUrl$2(url) {
+	try {
+		return new URL(url, "https://code-play.local").host || url;
+	} catch {
+		return url;
+	}
+}
+//#endregion
+//#region src/rust.ts
+async function runRust(request, mode) {
+	const tracker = new PhaseTracker();
+	const stdio = new StdioBuffer(tracker.startedAt);
+	const crateType = resolveCrateType(request.code, String(request.config.crateType ?? "auto"));
+	const body = {
+		channel: request.config.channel ?? "stable",
+		mode: request.config.mode ?? "debug",
+		edition: String(request.config.edition ?? "2024"),
+		crateType,
+		tests: false,
+		code: request.code,
+		backtrace: false
+	};
+	tracker.start(mode === "typecheck" ? "typecheck" : "compile", mode === "typecheck" ? "Typecheck" : "Compile");
+	const response = await request.transport.request({
+		url: request.endpoints.rust,
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(body),
+		signal: request.signal
+	});
+	tracker.start("collect", "Collect output");
+	const parsed = parseResponse(response.text);
+	const diagnostics = parseRustcDiagnostics(parsed.stderr ?? parsed.error ?? "");
+	if (parsed.stdout) stdio.push("stdout", parsed.stdout);
+	if (parsed.stderr) stdio.push("stderr", parsed.stderr);
+	if (parsed.error && !parsed.stderr) stdio.push("stderr", parsed.error);
+	const success = parsed.success === true && response.ok;
+	const compileFailed = diagnostics.some((item) => item.severity === "error") || !success;
+	tracker.stop();
+	return {
+		status: compileFailed ? "error" : "ok",
+		stdio: stdio.snapshot(),
+		diagnostics,
+		provenance: {
+			compile: {
+				host: hostFromUrl$1(request.endpoints.rust),
+				runtime: "rustc",
+				version: String(request.config.channel ?? "stable"),
+				target: crateType
+			},
+			execute: mode === "execute" ? {
+				host: hostFromUrl$1(request.endpoints.rust),
+				runtime: "rust-playground",
+				sandbox: "playground"
+			} : void 0
+		},
+		timing: tracker.report()
+	};
+}
+function resolveCrateType(code, configured) {
+	if (configured === "bin" || configured === "lib") return configured;
+	return /(?:^|\b)(?:async\s+)?fn\s+main\s*\(/.test(code) ? "bin" : "lib";
+}
+function parseResponse(text) {
+	try {
+		return JSON.parse(text);
+	} catch {
+		return {
+			success: false,
+			error: text
+		};
+	}
+}
+function parseRustcDiagnostics(stderr) {
+	const diagnostics = [];
+	for (const match of stderr.matchAll(/^(error|warning|note)(?:\[([^\]]+)\])?:\s+(.*)$/gm)) {
+		const severity = match[1] === "warning" ? "warning" : match[1] === "note" ? "info" : "error";
+		diagnostics.push({
+			message: match[3] ?? "",
+			severity,
+			source: match[2] ? `rustc ${match[2]}` : "rustc"
+		});
+	}
+	return diagnostics;
+}
+function hostFromUrl$1(url) {
+	try {
+		return new URL(url, "https://code-play.local").host || url;
+	} catch {
+		return url;
+	}
+}
+//#endregion
+//#region src/strip-typescript.ts
+/**
+* Conservative TypeScript-to-JavaScript stripper for documentation samples.
+* Full checking goes through tsgo; this path only needs to run the snippet.
+*/
+function stripTypeScript(code) {
+	return code.replace(/^\s*import\s+type\s+.*$/gm, "").replace(/^\s*export\s+type\s+\w[\s\S]*?;\s*$/gm, "").replace(/^\s*type\s+\w[\s\S]*?;\s*$/gm, "").replace(/^\s*(?:export\s+)?interface\s+\w[\s\S]*?\{[\s\S]*?\n\}\s*$/gm, "").replace(/\s+as\s+const\b/g, "").replace(/\s+as\s+[^=,;)\n]+/g, "").replace(/\s+satisfies\s+[^=,;)\n]+/g, "").replace(/\)\s*:\s*[^{;=\n]+/g, ")").replace(/([?]?)\s*:\s*[^,)=;{\n]+/g, "$1");
+}
+//#endregion
+//#region src/typescript.ts
+function resolveTypecheckBackend(hasVm, typecheckUrl) {
+	if (typecheckUrl && !hasVm) return "endpoint";
+	if (!hasVm) return "unavailable";
+	return "tsgo";
+}
+async function typecheckTypeScript(request) {
+	const tracker = new PhaseTracker();
+	tracker.start("typecheck", "Typecheck");
+	const backend = resolveTypecheckBackend(hasNodeVm(), request.endpoints.typecheck);
+	if (backend === "endpoint") return typecheckViaEndpoint(request, tracker);
+	if (backend === "unavailable") {
+		tracker.stop();
+		return {
+			status: "unsupported",
+			stdio: [],
+			diagnostics: [{
+				message: "Typecheck needs a reachable endpoints.typecheck. The Vite /__ox-code-play/typecheck proxy exists only during vite dev.",
+				severity: "error",
+				source: "tsgo"
+			}],
+			provenance: { compile: {
+				host: "local",
+				runtime: "tsgo"
+			} },
+			timing: tracker.report()
+		};
+	}
+	try {
+		const diagnostics = await typecheckWithTsgo(request.code, String(request.config.tsgoCommand ?? "tsgo"));
+		tracker.stop();
+		return {
+			status: diagnostics.some((item) => item.severity === "error") ? "error" : "ok",
+			stdio: [],
+			diagnostics,
+			provenance: { compile: {
+				host: "local",
+				runtime: "tsgo"
+			} },
+			timing: tracker.report()
+		};
+	} catch (error) {
+		if (isAbortError(error) || request.signal?.aborted) throw error;
+		tracker.stop();
+		const message = error instanceof Error ? error.message : String(error);
+		return {
+			status: message.includes("ENOENT") ? "unsupported" : "error",
+			stdio: [],
+			diagnostics: [{
+				message: message.includes("ENOENT") ? "tsgo is not available. Install @typescript/native-preview or set languages.typescript.config.tsgoCommand." : message,
+				severity: "error",
+				source: "tsgo"
+			}],
+			provenance: { compile: {
+				host: "local",
+				runtime: "tsgo"
+			} },
+			timing: tracker.report()
+		};
+	}
+}
+async function runTypeScript(request) {
+	const tracker = new PhaseTracker();
+	const stdio = new StdioBuffer(tracker.startedAt);
+	tracker.start("compile", "Strip types");
+	const javascript = stripTypeScript(request.code);
+	tracker.start("execute", "Execute");
+	try {
+		const value = await executeScript(javascript, request.timeoutMs, stdio, request.signal);
+		tracker.stop();
+		return {
+			status: "ok",
+			stdio: stdio.snapshot(),
+			diagnostics: [],
+			provenance: {
+				compile: {
+					host: "local",
+					runtime: "strip-types"
+				},
+				execute: {
+					host: "local",
+					runtime: hasNodeVm() ? "node:vm" : "iframe",
+					sandbox: hasNodeVm() ? "vm" : "srcdoc"
+				}
+			},
+			timing: tracker.report(),
+			value: value === void 0 ? void 0 : String(value)
+		};
+	} catch (error) {
+		if (isAbortError(error) || request.signal?.aborted) throw error;
+		tracker.stop();
+		const message = error instanceof Error ? error.message : String(error);
+		stdio.push("stderr", `${message}\n`);
+		return {
+			status: "error",
+			stdio: stdio.snapshot(),
+			diagnostics: [{
+				message,
+				severity: "error",
+				source: "javascript"
+			}],
+			provenance: {
+				compile: {
+					host: "local",
+					runtime: "strip-types"
+				},
+				execute: {
+					host: "local",
+					runtime: hasNodeVm() ? "node:vm" : "iframe",
+					sandbox: hasNodeVm() ? "vm" : "srcdoc"
+				}
+			},
+			timing: tracker.report()
+		};
+	}
+}
+async function typecheckViaEndpoint(request, tracker) {
+	const url = request.endpoints.typecheck ?? "";
+	const response = await request.transport.request({
+		url,
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({
+			language: "typescript",
+			code: request.code,
+			config: request.config
+		}),
+		signal: request.signal
+	});
+	tracker.stop();
+	return adapterResultFromTypecheckResponse(response, url, tracker);
+}
+function typecheckEndpointFailureMessage(status, text) {
+	if (status === 404 || status === 405) return "Typecheck needs a reachable endpoints.typecheck. The Vite /__ox-code-play/typecheck proxy exists only during vite dev.";
+	return text.trim() || "Typecheck endpoint failed.";
+}
+function adapterResultFromTypecheckResponse(response, url, tracker) {
+	if (!response.ok) return {
+		status: "error",
+		stdio: [],
+		diagnostics: [{
+			message: typecheckEndpointFailureMessage(response.status, response.text),
+			severity: "error",
+			source: "tsgo"
+		}],
+		provenance: { compile: {
+			host: hostFromUrl(url),
+			runtime: "tsgo"
+		} },
+		timing: tracker.report()
+	};
+	try {
+		return JSON.parse(response.text);
+	} catch {
+		return {
+			status: "error",
+			stdio: [],
+			diagnostics: [{
+				message: response.text || "Typecheck endpoint failed.",
+				severity: "error",
+				source: "tsgo"
+			}],
+			provenance: { compile: {
+				host: hostFromUrl(url),
+				runtime: "tsgo"
+			} },
+			timing: tracker.report()
+		};
+	}
+}
+async function typecheckWithTsgo(code, command = "tsgo") {
+	const [{ mkdtemp, rm, writeFile }, { tmpdir }, { join }, { execFile }, { promisify }] = await Promise.all([
+		import("node:fs/promises"),
+		import("node:os"),
+		import("node:path"),
+		import("node:child_process"),
+		import("node:util")
+	]);
+	const execFileAsync = promisify(execFile);
+	const dir = await mkdtemp(join(tmpdir(), "ox-code-play-"));
+	const file = join(dir, "snippet.ts");
+	await writeFile(file, code);
+	try {
+		await execFileAsync(command, [
+			"--noEmit",
+			"--pretty",
+			"false",
+			"--strict",
+			file
+		], {
+			cwd: dir,
+			maxBuffer: 1048576
+		});
+		return [];
+	} catch (error) {
+		const output = commandOutput(error);
+		if (error.code === "ENOENT") throw error;
+		return parseTsgoOutput(output);
+	} finally {
+		await rm(dir, {
+			recursive: true,
+			force: true
+		});
+	}
+}
+function parseTsgoOutput(output) {
+	const diagnostics = [];
+	for (const match of output.matchAll(/^(?:.*[\\/])?snippet\.ts\((\d+),(\d+)\):\s+(error|warning|info)\s+TS\d+:\s+(.*)$/gm)) diagnostics.push({
+		message: match[4] ?? output,
+		severity: match[3] === "warning" ? "warning" : match[3] === "info" ? "info" : "error",
+		line: Number(match[1]),
+		column: Number(match[2]),
+		source: "tsgo"
+	});
+	if (diagnostics.length === 0 && output.trim()) diagnostics.push({
+		message: output.trim(),
+		severity: "error",
+		source: "tsgo"
+	});
+	return diagnostics;
+}
+function commandOutput(error) {
+	if (!error || typeof error !== "object") return String(error);
+	const value = error;
+	return [
+		value.stdout,
+		value.stderr,
+		value.message
+	].filter((part) => typeof part === "string" && part.trim().length > 0).join("\n").trim();
+}
+function hostFromUrl(url) {
+	try {
+		return new URL(url, "https://code-play.local").host || url;
+	} catch {
+		return url;
+	}
+}
+//#endregion
+//#region src/adapters.ts
+async function executeAdapter(request) {
+	if (!request.enabled.execute) return capabilityDisabled(request, "execute");
+	switch (request.definition.backend) {
+		case "javascript": return runJavaScript(request);
+		case "typescript": return runTypeScript(request);
+		case "framework": return runFramework(request);
+		case "rust-playground": return runRust(request, "execute");
+		case "go-playground": return runGo(request, "execute");
+		case "remote": return runRemote(request);
+		default: return capabilityDisabled(request, "execute");
+	}
+}
+async function typecheckAdapter(request) {
+	if (!request.enabled.typecheck || !request.definition.capabilities.typecheck) return capabilityDisabled(request, "typecheck");
+	switch (request.definition.backend) {
+		case "typescript": return typecheckTypeScript(request);
+		case "rust-playground": return runRust(request, "typecheck");
+		case "go-playground": return runGo(request, "typecheck");
+		default: return capabilityDisabled(request, "typecheck");
+	}
+}
+function capabilityDisabled(request, action) {
+	return {
+		status: "unsupported",
+		stdio: [],
+		diagnostics: [{
+			message: `${request.definition.name} ${action} is not enabled.`,
+			severity: "error",
+			source: "code-play"
+		}],
+		provenance: {},
+		timing: {
+			totalMs: 0,
+			phases: []
+		}
+	};
+}
+//#endregion
+//#region src/result.ts
+function errorMessage(error) {
+	return error instanceof Error && error.message ? error.message : String(error);
+}
+function friendlyTransportMessage(error) {
+	const message = errorMessage(error);
+	if ((error instanceof TypeError || error instanceof Error && error.name === "TypeError") && /failed to fetch|networkerror|load failed|network request failed/i.test(message)) return "The executor could not be reached from this page (often CORS). Set endpoints to a host that allows browser POST, or use the Vite dev proxy.";
+	return message;
+}
+function errorResult(message, source = "code-play", status = "error") {
+	return withStdioText({
+		status,
+		stdio: [],
+		diagnostics: [{
+			message,
+			severity: status === "cancelled" ? "info" : "error",
+			source
+		}],
+		provenance: {},
+		timing: emptyTiming()
+	});
+}
+//#endregion
+//#region src/session.ts
+var CodePlaySession = class {
+	language;
+	code;
+	config;
+	lastResult;
+	/** Last run's concatenated stdout (same as `lastResult.stdout`). */
+	get stdout() {
+		return this.lastResult?.stdout ?? "";
+	}
+	/** Last run's concatenated stderr (same as `lastResult.stderr`). */
+	get stderr() {
+		return this.lastResult?.stderr ?? "";
+	}
+	enabled;
+	timeoutMs;
+	transport;
+	endpoints;
+	loadTypeScript;
+	listeners = /* @__PURE__ */ new Map();
+	abort;
+	constructor(input) {
+		this.language = input.definition;
+		this.enabled = input.enabled;
+		this.code = input.code;
+		this.config = mergeConfig(input.definition.id, input.enabled, input.config);
+		this.timeoutMs = input.timeoutMs;
+		this.transport = input.transport;
+		this.endpoints = input.endpoints;
+		this.loadTypeScript = input.loadTypeScript;
+	}
+	on(event, listener) {
+		const bucket = this.listeners.get(event) ?? /* @__PURE__ */ new Set();
+		bucket.add(listener);
+		this.listeners.set(event, bucket);
+		return () => bucket.delete(listener);
+	}
+	setCode(code) {
+		this.code = code;
+	}
+	setConfig(config) {
+		this.config = {
+			...this.config,
+			...config
+		};
+		this.emit("config", this.config);
+	}
+	async run() {
+		return this.dispatch("execute");
+	}
+	async typecheck() {
+		return this.dispatch("typecheck");
+	}
+	cancel() {
+		this.abort?.abort();
+	}
+	async dispatch(action) {
+		this.abort?.abort();
+		this.abort = new AbortController();
+		const { signal } = this.abort;
+		const request = {
+			definition: this.language,
+			enabled: this.enabled,
+			code: this.code,
+			config: this.config,
+			timeoutMs: this.timeoutMs,
+			transport: this.transport,
+			loadTypeScript: this.loadTypeScript,
+			endpoints: this.endpoints,
+			signal
+		};
+		try {
+			const result = withStdioText(action === "typecheck" ? await typecheckAdapter(request) : await executeAdapter(request));
+			return this.finish(result);
+		} catch (error) {
+			if (signal.aborted || isAbortError(error)) return this.finish(errorResult("Run cancelled.", "code-play", "cancelled"));
+			return this.finish(errorResult(friendlyTransportMessage(error)));
+		}
+	}
+	finish(result) {
+		this.lastResult = result;
+		for (const event of result.stdio) this.emit("stdio", event);
+		this.emit("result", result);
+		return result;
+	}
+	emit(event, value) {
+		for (const listener of this.listeners.get(event) ?? []) listener(value);
+	}
+};
+//#endregion
+//#region src/client.ts
+function createCodePlay(options = {}) {
+	const resolved = resolveCodePlayOptions(options);
+	const transport = options.transport ?? defaultTransport();
+	return {
+		options: resolved,
+		hasLanguage(language) {
+			const definition = resolveLanguage(language);
+			return Boolean(definition && resolved.languages.has(definition.id));
+		},
+		createSession(input) {
+			const definition = resolveLanguage(input.language);
+			if (!definition) throw new Error(`Unknown Code Play language: ${input.language}.`);
+			const enabled = resolved.languages.get(definition.id);
+			if (!enabled) throw new Error(`${definition.name} is not enabled. Pass languages.${definition.id}: true to createCodePlay().`);
+			return new CodePlaySession({
+				...input,
+				definition,
+				enabled,
+				timeoutMs: resolved.timeoutMs,
+				transport,
+				endpoints: resolved.endpoints,
+				loadTypeScript: options.loadTypeScript
+			});
+		}
+	};
+}
+function defaultTransport() {
+	if (typeof fetch === "function") return createFetchTransport();
+	return createUnavailableTransport();
+}
+//#endregion
+//#region src/payload.ts
+function decodePayload(value) {
+	const json = new TextDecoder().decode(base64ToBytes(value));
+	const parsed = JSON.parse(json);
+	if (!parsed || typeof parsed !== "object" || typeof parsed.language !== "string") throw new Error("Invalid Code Play payload.");
+	return {
+		...parsed,
+		viewers: {
+			...DEFAULT_VIEWERS,
+			...parsed.viewers
+		}
+	};
+}
+function base64ToBytes(value) {
+	if (typeof Buffer !== "undefined") return new Uint8Array(Buffer.from(value, "base64"));
+	const binary = atob(value);
+	const bytes = new Uint8Array(binary.length);
+	for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+	return bytes;
+}
+//#endregion
+//#region src/hydrate-action.ts
+function readPlayPayload(encoded) {
+	try {
+		return decodePayload(encoded);
+	} catch {
+		return;
+	}
+}
+async function runPlayAction(input) {
+	input.setBusy(true);
+	try {
+		input.onResult(await input.action());
+	} catch (error) {
+		input.onError(error);
+	} finally {
+		input.setBusy(false);
+	}
+}
+//#endregion
+//#region src/styles.ts
+var CODE_PLAY_STYLES = `
+.ox-code-play {
+  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));
+  border-radius: 12px;
+  background: var(--octc-color-bg-alt, var(--octc-color-bg, Canvas));
+  color: var(--octc-color-text, CanvasText);
+  overflow: hidden;
+  margin: 1.25rem 0;
+}
+.ox-code-play__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.6rem 0.8rem;
+  border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 12%, transparent));
+}
+.ox-code-play__lang {
+  font: 600 0.8rem/1.2 ui-sans-serif, system-ui, sans-serif;
+  margin-right: auto;
+  color: var(--octc-color-text, CanvasText);
+}
+.ox-code-play__toolbar button {
+  appearance: none;
+  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 20%, transparent));
+  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 8%, transparent);
+  color: var(--octc-color-text, CanvasText);
+  border-radius: 999px;
+  padding: 0.25rem 0.75rem;
+  font: 600 0.75rem/1.4 ui-sans-serif, system-ui, sans-serif;
+  cursor: pointer;
+}
+.ox-code-play__toolbar button:disabled { opacity: 0.55; cursor: progress; }
+.ox-code-play .ox-code { margin: 0; }
+.ox-code-play__source pre { margin: 0; border: 0; border-radius: 0; }
+.ox-code-play__tabs {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.4rem 0.7rem 0;
+}
+.ox-code-play__tabs button {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--octc-color-text, CanvasText);
+  padding: 0.35rem 0.55rem;
+  border-radius: 8px 8px 0 0;
+  font: 600 0.75rem/1.2 ui-sans-serif, system-ui, sans-serif;
+  cursor: pointer;
+}
+.ox-code-play__tabs button[aria-selected="true"] {
+  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 10%, transparent);
+}
+.ox-code-play__panel { padding: 0.7rem 0.8rem 0.9rem; color: var(--octc-color-text, CanvasText); }
+.ox-code-play__panel pre {
+  background: transparent !important;
+  color: inherit !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+}
+.ox-code-play__empty { margin: 0; opacity: 0.7; font-size: 0.85rem; }
+.ox-code-play__stdio { font: 12px/1.45 ui-monospace, SFMono-Regular, monospace; }
+.ox-code-play__stdio-line { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem; white-space: pre-wrap; }
+.ox-code-play__stdio-line--stderr { color: var(--octc-danger, #b42318); }
+.ox-code-play__stdio-line--stdin { opacity: 0.75; }
+.ox-code-play__stdio-meta { opacity: 0.6; }
+.ox-code-play__config { display: grid; gap: 0.55rem; }
+.ox-code-play__field { display: grid; gap: 0.25rem; font-size: 0.85rem; }
+.ox-code-play__field input, .ox-code-play__field select {
+  font: inherit;
+  padding: 0.3rem 0.45rem;
+  border-radius: 8px;
+  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 18%, transparent));
+  background: var(--octc-color-bg, Canvas);
+  color: var(--octc-color-text, CanvasText);
+}
+.ox-code-play__provenance { display: grid; gap: 0.6rem; margin: 0; }
+.ox-code-play__provenance dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; }
+.ox-code-play__provenance dd { margin: 0.15rem 0 0; }
+.ox-code-play__phase { margin: 0.45rem 0; }
+.ox-code-play__phase-meta { display: flex; justify-content: space-between; font-size: 0.8rem; }
+.ox-code-play__phase-bar {
+  height: 0.35rem;
+  margin-top: 0.25rem;
+  border-radius: 999px;
+  background: var(--octc-color-primary, var(--octc-accent, #4f46e5));
+}
+.ox-code-play__timing-total { margin: 0 0 0.4rem; font-weight: 600; }
+.ox-code-play__diags { margin: 0 0 0.6rem; padding-left: 1.1rem; }
+.ox-code-play__diag--error { color: var(--octc-danger, #b42318); }
+.ox-code-play__diag--warning { color: var(--octc-warning, #b54708); }
+.ox-code-play--compact .ox-code-play__tabs { display: none; }
+.ox-code-play--compact .ox-code-play__panel[data-panel]:not([data-panel="stdio"]):not([data-panel="stderr"]) { display: none; }
+`;
+//#endregion
+//#region src/viewers.ts
+function renderStdioHtml(events) {
+	if (events.length === 0) return `<p class="ox-code-play__stdio ox-code-play__empty">No stdio yet.</p>`;
+	return `<div class="ox-code-play__stdio" role="log">${events.map((event) => {
+		const time = event.timestampMs.toFixed(1);
+		return `<div class="ox-code-play__stdio-line ox-code-play__stdio-line--${event.stream}"><span class="ox-code-play__stdio-meta">${escapeHtml(event.stream)} +${escapeHtml(time)}ms</span><span class="ox-code-play__stdio-text">${escapeHtml(event.text)}</span></div>`;
+	}).join("")}</div>`;
+}
+/** Dedicated stderr viewer: stderr chunks plus error/warning diagnostics. */
+function renderStderrHtml(result) {
+	const chunks = selectStream(result?.stdio ?? [], "stderr");
+	const diagnostics = (result?.diagnostics ?? []).filter((diagnostic) => diagnostic.severity === "error" || diagnostic.severity === "warning");
+	if (chunks.length === 0 && diagnostics.length === 0) return `<p class="ox-code-play__empty">No stderr.</p>`;
+	const stream = chunks.length === 0 ? "" : renderStdioHtml(chunks);
+	if (diagnostics.length === 0) return stream;
+	return `${stream}<ul class="ox-code-play__diags">${diagnostics.map((diagnostic) => {
+		const place = diagnostic.line ? `:${diagnostic.line}${diagnostic.column ? `:${diagnostic.column}` : ""}` : "";
+		return `<li class="ox-code-play__diag ox-code-play__diag--${diagnostic.severity}">${escapeHtml(diagnostic.severity)}${escapeHtml(place)} ${escapeHtml(diagnostic.message)}</li>`;
+	}).join("")}</ul>`;
+}
+function renderConfigHtml(schema, config) {
+	if (schema.length === 0) return `<p class="ox-code-play__empty">This language has no editable config.</p>`;
+	return `<form class="ox-code-play__config">${schema.map((field) => {
+		const value = config[field.key] ?? field.default ?? "";
+		const label = `<label class="ox-code-play__field"><span>${escapeHtml(field.label)}</span>${renderField(field, value)}</label>`;
+		return field.description ? `${label}<p class="ox-code-play__field-help">${escapeHtml(field.description)}</p>` : label;
+	}).join("")}</form>`;
+}
+function renderProvenanceHtml(provenance) {
+	if (!provenance?.compile && !provenance?.execute) return `<p class="ox-code-play__empty">No provenance yet. Run or type-check a sample.</p>`;
+	return `<dl class="ox-code-play__provenance">${renderLocation("Compiled", provenance.compile)}${renderLocation("Executed", provenance.execute)}</dl>`;
+}
+function renderTimingHtml(timing) {
+	if (!timing || timing.phases.length === 0) return `<p class="ox-code-play__empty">No timing yet. Run or type-check a sample.</p>`;
+	const rows = timing.phases.map((phase) => {
+		const width = timing.totalMs > 0 ? Math.max(2, phase.durationMs / timing.totalMs * 100) : 0;
+		return `<div class="ox-code-play__phase"><div class="ox-code-play__phase-meta"><span>${escapeHtml(phase.label)}</span><span>${phase.durationMs.toFixed(1)}ms</span></div><div class="ox-code-play__phase-bar" style="width:${width.toFixed(1)}%"></div></div>`;
+	}).join("");
+	return `<div class="ox-code-play__timing"><p class="ox-code-play__timing-total">Total ${timing.totalMs.toFixed(1)}ms</p>${rows}</div>`;
+}
+function renderDiagnosticsHtml(result) {
+	if (!result?.diagnostics.length) return "";
+	return `<ul class="ox-code-play__diags">${result.diagnostics.map((diagnostic) => {
+		const place = diagnostic.line ? `:${diagnostic.line}${diagnostic.column ? `:${diagnostic.column}` : ""}` : "";
+		return `<li class="ox-code-play__diag ox-code-play__diag--${diagnostic.severity}">${escapeHtml(diagnostic.severity)}${escapeHtml(place)} ${escapeHtml(diagnostic.message)}</li>`;
+	}).join("")}</ul>`;
+}
+function renderField(field, value) {
+	const name = escapeHtml(field.key);
+	if (field.type === "boolean") return `<input type="checkbox" name="${name}" ${value ? "checked" : ""}>`;
+	if (field.type === "select") return `<select name="${name}">${(field.options ?? []).map((option) => `<option value="${escapeHtml(option.value)}" ${String(value) === option.value ? "selected" : ""}>${escapeHtml(option.label)}</option>`).join("")}</select>`;
+	return `<input type="${field.type === "number" ? "number" : "text"}" name="${name}" value="${escapeHtml(String(value))}">`;
+}
+function renderLocation(label, location) {
+	if (!location) return "";
+	const details = [
+		location.runtime,
+		location.version,
+		location.sandbox,
+		location.target
+	].filter(Boolean).join(" · ");
+	return `<div><dt>${escapeHtml(label)}</dt><dd><strong>${escapeHtml(location.host)}</strong>${details ? ` <span>${escapeHtml(details)}</span>` : ""}</dd></div>`;
+}
+//#endregion
+//#region src/ui.ts
+function renderPlayUi(state) {
+	const definition = resolveLanguage(state.payload.language);
+	const preset = state.payload.ui === "headless" ? "headless" : state.payload.ui;
+	if (preset === "headless") return "";
+	const panel = state.panel ?? "stdio";
+	const canTypecheck = state.payload.capabilities.typecheck;
+	const tabs = renderTabs(state, panel);
+	const viewers = state.payload.viewers;
+	return `<div class="ox-code-play ox-code-play--${preset}" data-ox-code-play-ui>
+  <div class="ox-code-play__toolbar">
+    <span class="ox-code-play__lang">${escapeHtml(definition?.name ?? state.payload.language)}</span>
+    <button type="button" data-ox-action="run"${actionButtonAttrs("run", Boolean(state.busy))}>Run</button>
+    ${canTypecheck ? `<button type="button" data-ox-action="typecheck"${actionButtonAttrs("typecheck", Boolean(state.busy))}>Typecheck</button>` : ""}
+    <button type="button" data-ox-action="cancel"${actionButtonAttrs("cancel", Boolean(state.busy))}>Cancel</button>
+  </div>
+  <div class="ox-code-play__source"></div>
+  ${tabs}
+  ${viewers.stdio ? `<div class="ox-code-play__panel" data-panel="stdio">${renderDiagnosticsHtml(state.result)}${renderStdioHtml(state.result?.stdio ?? [])}</div>` : ""}
+  ${viewers.stderr ? `<div class="ox-code-play__panel" data-panel="stderr"${hidden(panel, "stderr", preset)}>${renderStderrHtml(state.result)}</div>` : ""}
+  <div class="ox-code-play__panel" data-panel="config"${hidden(panel, "config", preset)}>${renderConfigHtml(definition?.configSchema ?? [], state.payload.config)}</div>
+  <div class="ox-code-play__panel" data-panel="provenance"${hidden(panel, "provenance", preset)}>${renderProvenanceHtml(state.result?.provenance)}</div>
+  <div class="ox-code-play__panel" data-panel="timing"${hidden(panel, "timing", preset)}>${renderTimingHtml(state.result?.timing)}</div>
+</div>`;
+}
+function renderTabs(state, panel) {
+	if (state.payload.ui === "compact") return "";
+	const viewers = state.payload.viewers;
+	const buttons = [
+		viewers.stdio ? tab("stdio", "stdio", panel) : "",
+		viewers.stderr ? tab("stderr", "stderr", panel) : "",
+		viewers.config ? tab("config", "config", panel) : "",
+		viewers.provenance ? tab("provenance", "provenance", panel) : "",
+		viewers.timing ? tab("timing", "timing", panel) : ""
+	].filter(Boolean).join("");
+	return buttons ? `<div class="ox-code-play__tabs" role="tablist">${buttons}</div>` : "";
+}
+function tab(id, label, selected) {
+	return `<button type="button" role="tab" data-ox-panel="${id}" aria-selected="${selected === id ? "true" : "false"}">${label}</button>`;
+}
+function actionButtonAttrs(action, busy) {
+	const state = actionBusyState(action, busy);
+	return `${state.disabled ? " disabled" : ""}${state.hidden ? " hidden" : ""}`;
+}
+function actionBusyState(action, busy) {
+	if (action === "cancel") return {
+		disabled: !busy,
+		hidden: !busy
+	};
+	return {
+		disabled: busy,
+		hidden: false
+	};
+}
+function applyActionBusy(root, busy) {
+	for (const button of root.querySelectorAll("button[data-ox-action]")) {
+		const state = actionBusyState(button.dataset.oxAction ?? "", busy);
+		button.disabled = state.disabled;
+		button.hidden = state.hidden;
+	}
+}
+function hidden(current, id, preset) {
+	if (preset === "compact" && (id === "stdio" || id === "stderr")) return "";
+	return current === id ? "" : " hidden";
+}
+//#endregion
+//#region src/hydrate.ts
+var STYLE_ID = "ox-code-play-styles";
+function hydrateCodePlay(root = defaultRoot(), options = {}) {
+	ensureStyles();
+	const client = options.client ?? createCodePlayFromPayloads(root);
+	for (const element of queryWidgets(root)) try {
+		mountCodePlay(element, { client });
+	} catch {}
+}
+function mountCodePlay(element, options = {}) {
+	if (!(element instanceof HTMLElement) || element.dataset.oxCodePlayMounted === "true") return;
+	const payload = readPlayPayload(element.getAttribute("data-ox-code-play") ?? "");
+	if (!payload || payload.ui === "headless") return;
+	const client = options.client ?? createCodePlay({
+		languages: { [payload.language]: true },
+		endpoints: payload.endpoints
+	});
+	const source = element.innerHTML;
+	const ui = document.createElement("div");
+	ui.innerHTML = renderPlayUi({ payload });
+	const widget = ui.firstElementChild;
+	if (!widget) return;
+	const sourceSlot = widget.querySelector(".ox-code-play__source");
+	if (sourceSlot) sourceSlot.innerHTML = source;
+	element.replaceChildren(widget);
+	element.dataset.oxCodePlayMounted = "true";
+	bindWidget(element, payload, client);
+}
+function bindWidget(element, payload, client) {
+	let current = payload;
+	const session = client.createSession({
+		language: payload.language,
+		code: payload.code,
+		config: payload.config
+	});
+	const runButton = element.querySelector("[data-ox-action=\"run\"]");
+	const checkButton = element.querySelector("[data-ox-action=\"typecheck\"]");
+	const cancelButton = element.querySelector("[data-ox-action=\"cancel\"]");
+	runButton?.addEventListener("click", () => void run("execute"));
+	checkButton?.addEventListener("click", () => void run("typecheck"));
+	cancelButton?.addEventListener("click", () => session.cancel());
+	element.addEventListener("click", (event) => {
+		const target = event.target;
+		if (!(target instanceof HTMLElement)) return;
+		const panel = target.dataset.oxPanel;
+		if (panel) showPanel(element, panel);
+	});
+	element.addEventListener("change", (event) => {
+		const form = event.target?.closest("form");
+		if (!form) return;
+		session.setConfig(readForm(form));
+		current = {
+			...current,
+			config: session.config
+		};
+	});
+	async function run(action) {
+		await runPlayAction({
+			action: () => action === "typecheck" ? session.typecheck() : session.run(),
+			setBusy: (busy) => applyActionBusy(element, busy),
+			onResult: (result) => paintResult(element, current, result),
+			onError: (error) => paintResult(element, current, errorResult(errorMessage(error)))
+		});
+	}
+}
+function paintResult(element, _payload, result) {
+	const stdio = element.querySelector("[data-panel=\"stdio\"]");
+	if (stdio) {
+		stdio.innerHTML = `${renderDiagnosticsHtml(result)}${renderStdioHtml(result.stdio)}`;
+		if (result.preview) {
+			const frame = document.createElement("iframe");
+			frame.setAttribute("sandbox", JS_SANDBOX_FLAGS);
+			frame.srcdoc = result.preview.html;
+			frame.title = "Code Play preview";
+			frame.style.width = "100%";
+			frame.style.minHeight = "12rem";
+			frame.style.border = "0";
+			stdio.append(frame);
+		}
+	}
+	const provenance = element.querySelector("[data-panel=\"provenance\"]");
+	if (provenance) provenance.innerHTML = renderProvenanceHtml(result.provenance);
+	const timing = element.querySelector("[data-panel=\"timing\"]");
+	if (timing) timing.innerHTML = renderTimingHtml(result.timing);
+	const stderr = element.querySelector("[data-panel=\"stderr\"]");
+	if (stderr) stderr.innerHTML = renderStderrHtml(result);
+	showPanel(element, Boolean(stderr) && (Boolean(result.stderr) || result.diagnostics.some((diagnostic) => diagnostic.severity === "error")) ? "stderr" : "stdio");
+}
+function showPanel(element, panel) {
+	const compact = Boolean(element.querySelector(".ox-code-play--compact"));
+	for (const tab of element.querySelectorAll("[data-ox-panel]")) tab.setAttribute("aria-selected", tab.getAttribute("data-ox-panel") === panel ? "true" : "false");
+	for (const node of element.querySelectorAll(".ox-code-play__panel")) {
+		const id = node.dataset.panel;
+		if (compact && (id === "stdio" || id === "stderr")) {
+			node.hidden = false;
+			continue;
+		}
+		node.hidden = id !== panel;
+	}
+}
+function readForm(form) {
+	const data = new FormData(form);
+	const config = {};
+	for (const [key, value] of data.entries()) config[key] = value === "on" ? true : value;
+	for (const input of form.querySelectorAll("input[type=\"checkbox\"]")) config[input.name] = input.checked;
+	return config;
+}
+function createCodePlayFromPayloads(root) {
+	const languages = {};
+	let endpoints;
+	for (const element of queryWidgets(root)) try {
+		const payload = decodePayload(element.getAttribute("data-ox-code-play") ?? "");
+		languages[payload.language] = true;
+		endpoints = payload.endpoints ?? endpoints;
+	} catch {}
+	return createCodePlay({
+		languages,
+		endpoints
+	});
+}
+function queryWidgets(root) {
+	return [...root.querySelectorAll("[data-ox-code-play]")];
+}
+function ensureStyles() {
+	if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = CODE_PLAY_STYLES;
+	document.head.append(style);
+}
+function defaultRoot() {
+	if (typeof document === "undefined") throw new Error("hydrateCodePlay() needs a DOM root.");
+	return document;
+}
+//#endregion
+//#region src/boot.ts
+/**
+* Mount every `[data-ox-code-play]` widget. The SSG client (`ox-code-play.js`)
+* calls this on load; apps that import `@ox-content/code-play/client` call it
+* themselves.
+*/
+function bootCodePlay(hydrate = hydrateCodePlay, doc = typeof document === "undefined" ? void 0 : document) {
+	if (!doc) return;
+	const run = () => hydrate();
+	if (doc.readyState === "loading") {
+		doc.addEventListener("DOMContentLoaded", run, { once: true });
+		return;
+	}
+	run();
+}
+//#endregion
+//#region src/browser.ts
+bootCodePlay();
+//#endregion
+export { bootCodePlay };