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

package/dist/hydrate2.mjs

@@ -1,5 +1,5 @@
 import { a as errorResult, i as errorMessage, n as createCodePlay, o as JS_SANDBOX_FLAGS, u as selectStream } from "./client.mjs";
-import { a as escapeHtml, p as resolveLanguage, t as decodePayload } from "./payload.mjs";
+import { a as escapeHtml, h as resolveLanguage, i as escapeAttribute, t as decodePayload } from "./payload.mjs";
 //#region src/hydrate-action.ts
 function readPlayPayload(encoded) {
 	try {
@@ -18,12 +18,39 @@ async function runPlayAction(input) {
 		input.setBusy(false);
 	}
 }
+function idleRunActionState() {
+	return { phase: "idle" };
+}
+function runningRunActionState(action, startedAtMs = Date.now()) {
+	return {
+		phase: "running",
+		action,
+		startedAtMs
+	};
+}
+function resultRunActionState(action, result, finishedAtMs = Date.now()) {
+	return {
+		phase: result.status === "offline" ? "offline" : result.status === "ok" || result.status === "cancelled" ? "result" : "error",
+		action,
+		result,
+		message: result.diagnostics[0]?.message,
+		finishedAtMs
+	};
+}
+function errorRunActionState(action, error, finishedAtMs = Date.now()) {
+	return {
+		phase: "error",
+		action,
+		message: errorMessage(error),
+		finishedAtMs
+	};
+}
 //#endregion
 //#region src/styles.ts
 const CODE_PLAY_STYLES = `
 .ox-code-play {
   border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));
-  border-radius: 12px;
+  border-radius: 8px;
   background: var(--octc-color-bg-alt, var(--octc-color-bg, Canvas));
   color: var(--octc-color-text, CanvasText);
   overflow: hidden;
@@ -37,22 +64,147 @@ const CODE_PLAY_STYLES = `
   padding: 0.6rem 0.8rem;
   border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 12%, transparent));
 }
+.ox-code-play__summary {
+  display: inline-flex;
+  flex: 1 1 12rem;
+  min-width: 9rem;
+  gap: 0.45rem;
+  align-items: baseline;
+}
 .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__title {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font: 500 0.78rem/1.25 ui-sans-serif, system-ui, sans-serif;
+  opacity: 0.72;
+}
+.ox-code-play__status {
+  min-width: 5.25rem;
+  text-align: center;
+  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));
+  border-radius: 6px;
+  padding: 0.18rem 0.5rem;
+  font: 650 0.68rem/1.25 ui-sans-serif, system-ui, sans-serif;
+  color: var(--octc-color-text, CanvasText);
+  background: var(--octc-color-bg, Canvas);
+}
+.ox-code-play[data-ox-run-state="running"] .ox-code-play__status {
+  color: var(--octc-color-primary, var(--octc-accent, #4f46e5));
+}
+.ox-code-play[data-ox-run-state="error"] .ox-code-play__status,
+.ox-code-play[data-ox-run-state="offline"] .ox-code-play__status {
+  color: var(--octc-danger, #b42318);
+}
 .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;
+  border-radius: 8px;
   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__toolbar button:focus-visible,
+.ox-code-play__tabs button:focus-visible,
+.ox-code-play__field input:focus-visible,
+.ox-code-play__field select:focus-visible,
+.ox-code-play__panel:focus-visible {
+  outline: 2px solid var(--octc-color-primary, var(--octc-accent, #4f46e5));
+  outline-offset: 2px;
+}
+.ox-code-play__runtime {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  align-items: center;
+  padding: 0.55rem 0.8rem;
+  border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 10%, transparent));
+  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 4%, transparent);
+}
+.ox-code-play__runtime-chip {
+  display: inline-grid;
+  gap: 0.1rem;
+  min-width: 7.5rem;
+  padding: 0.35rem 0.5rem;
+  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 14%, transparent));
+  border-radius: 6px;
+  background: var(--octc-color-bg, Canvas);
+}
+.ox-code-play__runtime-chip span {
+  font: 600 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.62;
+}
+.ox-code-play__runtime-chip strong {
+  font: 650 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;
+}
+.ox-code-play__runtime-chip--ok strong { color: var(--octc-color-primary, var(--octc-accent, #4f46e5)); }
+.ox-code-play__runtime-chip--warn strong { color: var(--octc-warning, #b54708); }
+.ox-code-play__runtime-chip--muted strong { opacity: 0.72; }
+.ox-code-play__project {
+  display: inline-flex;
+  flex: 1 1 18rem;
+  min-width: min(100%, 16rem);
+  gap: 0.45rem;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-left: auto;
+  padding: 0.35rem 0.5rem;
+  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 14%, transparent));
+  border-radius: 6px;
+  background: var(--octc-color-bg, Canvas);
+}
+.ox-code-play__project-main,
+.ox-code-play__project-entry {
+  display: inline-grid;
+  gap: 0.1rem;
+  min-width: 0;
+}
+.ox-code-play__project-main { flex: 1 1 8.5rem; }
+.ox-code-play__project-entry { flex: 999 1 9rem; }
+.ox-code-play__project-main span,
+.ox-code-play__project-entry span {
+  font: 600 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.62;
+}
+.ox-code-play__project-main strong,
+.ox-code-play__project-entry strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font: 650 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;
+}
+.ox-code-play__project-files,
+.ox-code-play__project-warning,
+.ox-code-play__project-link {
+  flex: 0 0 auto;
+  border-radius: 6px;
+  padding: 0.18rem 0.45rem;
+  font: 650 0.68rem/1.25 ui-sans-serif, system-ui, sans-serif;
+}
+.ox-code-play__project-files {
+  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 8%, transparent);
+}
+.ox-code-play__project-warning {
+  color: var(--octc-warning, #b54708);
+  background: color-mix(in srgb, var(--octc-warning, #b54708) 12%, transparent);
+}
+.ox-code-play__project-link {
+  color: var(--octc-color-primary, var(--octc-accent, #4f46e5));
+  background: color-mix(in srgb, var(--octc-color-primary, var(--octc-accent, #4f46e5)) 12%, transparent);
+  text-decoration: none;
+}
+.ox-code-play__project-link:focus-visible {
+  outline: 2px solid var(--octc-color-primary, var(--octc-accent, #4f46e5));
+  outline-offset: 2px;
+}
 .ox-code-play .ox-code { margin: 0; }
 .ox-code-play__source pre { margin: 0; border: 0; border-radius: 0; }
 .ox-code-play__tabs {
@@ -66,7 +218,7 @@ const CODE_PLAY_STYLES = `
   background: transparent;
   color: var(--octc-color-text, CanvasText);
   padding: 0.35rem 0.55rem;
-  border-radius: 8px 8px 0 0;
+  border-radius: 6px 6px 0 0;
   font: 600 0.75rem/1.2 ui-sans-serif, system-ui, sans-serif;
   cursor: pointer;
 }
@@ -93,7 +245,7 @@ const CODE_PLAY_STYLES = `
 .ox-code-play__field input, .ox-code-play__field select {
   font: inherit;
   padding: 0.3rem 0.45rem;
-  border-radius: 8px;
+  border-radius: 6px;
   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);
@@ -188,42 +340,141 @@ function renderPlayUi(state) {
 	if (preset === "headless") return "";
 	const panel = state.panel ?? "stdio";
 	const canTypecheck = state.payload.capabilities.typecheck;
+	const runState = state.runState ?? (state.busy ? {
+		phase: "running",
+		action: "execute"
+	} : idleRunActionState());
+	const isBusy = Boolean(state.busy) || runState.phase === "running";
 	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>
+	const label = widgetLabel(state.payload, definition);
+	return `<div class="ox-code-play ox-code-play--${preset}" data-ox-code-play-ui data-ox-run-state="${runState.phase}" role="region" aria-label="${escapeHtml(label)}" aria-busy="${isBusy ? "true" : "false"}">
   <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>
+    <span class="ox-code-play__summary"><span class="ox-code-play__lang">${escapeHtml(definition?.name ?? state.payload.language)}</span>${state.payload.title ? `<span class="ox-code-play__title">${escapeHtml(state.payload.title)}</span>` : ""}</span>
+    <span class="ox-code-play__status" data-ox-status role="status" aria-live="polite">${renderRunStatusText(runState)}</span>
+    <button type="button" data-ox-action="run" aria-label="${escapeHtml(`Run ${label}`)}"${actionButtonAttrs("run", Boolean(state.busy))}>Run</button>
+    ${canTypecheck ? `<button type="button" data-ox-action="typecheck" aria-label="${escapeHtml(`Typecheck ${label}`)}"${actionButtonAttrs("typecheck", Boolean(state.busy))}>Typecheck</button>` : ""}
+    <button type="button" data-ox-action="cancel" aria-label="${escapeHtml(`Cancel ${label}`)}"${actionButtonAttrs("cancel", Boolean(state.busy))}>Cancel</button>
   </div>
+  ${renderRuntimeStrip(state.payload, definition)}
   <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>
+  ${viewers.stdio ? renderPanel("stdio", "Stdio", panel, preset, `${renderDiagnosticsHtml(state.result)}${renderStdioHtml(state.result?.stdio ?? [])}`) : ""}
+  ${viewers.stderr ? renderPanel("stderr", "Stderr", panel, preset, renderStderrHtml(state.result)) : ""}
+  ${viewers.config ? renderPanel("config", "Config", panel, preset, renderConfigHtml(definition?.configSchema ?? [], state.payload.config)) : ""}
+  ${viewers.provenance ? renderPanel("provenance", "Provenance", panel, preset, renderProvenanceHtml(state.result?.provenance)) : ""}
+  ${viewers.timing ? renderPanel("timing", "Timing", panel, preset, renderTimingHtml(state.result?.timing)) : ""}
 </div>`;
 }
+function renderRunStatusText(state) {
+	if (state.phase === "running") return state.action === "typecheck" ? "Typechecking" : "Running";
+	if (state.phase === "offline") return "Offline";
+	if (state.phase === "error") {
+		if (state.result?.status === "timeout") return "Timed out";
+		if (state.result?.status === "unsupported") return "Unsupported";
+		return "Error";
+	}
+	if (state.phase === "result") {
+		if (state.result?.status === "cancelled") return "Cancelled";
+		return "Done";
+	}
+	return "Ready";
+}
+function renderRuntimeStrip(payload, definition) {
+	const runtime = runtimeLabel(payload, definition);
+	const executor = executorLabel(payload, definition);
+	const checks = payload.capabilities.typecheck ? "Typecheck ready" : "Run only";
+	return `<div class="ox-code-play__runtime" aria-label="Code Play runtime">${[
+		runtimeChip("Runtime", runtime.label, runtime.kind),
+		runtimeChip("Executor", executor.label, executor.kind),
+		runtimeChip("Checks", checks, payload.capabilities.typecheck ? "ok" : "muted")
+	].join("")}${renderProjectSandboxHtml(payload.project)}</div>`;
+}
+function runtimeLabel(payload, definition) {
+	switch (definition?.backend) {
+		case "javascript": return {
+			label: "Browser sandbox",
+			kind: "ok"
+		};
+		case "typescript": return {
+			label: "TypeScript sandbox",
+			kind: "ok"
+		};
+		case "framework": return {
+			label: `${definition.name} iframe preview`,
+			kind: "ok"
+		};
+		case "rust-playground": return {
+			label: "Rust Playground",
+			kind: payload.endpoints?.rust ? "ok" : "warn"
+		};
+		case "go-playground": return {
+			label: "Go Playground",
+			kind: payload.endpoints?.go ? "ok" : "warn"
+		};
+		case "remote": return payload.endpoint ? {
+			label: "Piston-compatible",
+			kind: "ok"
+		} : {
+			label: "Endpoint missing",
+			kind: "warn"
+		};
+		default: return {
+			label: definition?.name ?? payload.language,
+			kind: "muted"
+		};
+	}
+}
+function executorLabel(payload, definition) {
+	if (!payload.capabilities.execute) return {
+		label: "Disabled",
+		kind: "warn"
+	};
+	if (definition?.backend === "remote" && !payload.endpoint) return {
+		label: "Configure endpoint",
+		kind: "warn"
+	};
+	return {
+		label: "On demand",
+		kind: "ok"
+	};
+}
+function runtimeChip(label, value, kind) {
+	return `<span class="ox-code-play__runtime-chip ox-code-play__runtime-chip--${kind}"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></span>`;
+}
+function renderProjectSandboxHtml(project) {
+	if (!project) return "";
+	const fileCount = `${project.files.length} ${project.files.length === 1 ? "file" : "files"}`;
+	const target = project.target === "browser" ? "Browser project" : project.target === "node" ? "Node-like project" : "External project";
+	const url = project.openUrl ?? project.fallbackUrl;
+	const warnings = project.warnings?.length ? `<span class="ox-code-play__project-warning" title="${escapeAttribute(project.warnings.join("\n"))}">Warnings</span>` : "";
+	const link = url ? `<a class="ox-code-play__project-link" href="${escapeAttribute(url)}" target="_blank" rel="noopener noreferrer">Open</a>` : "";
+	return `<span class="ox-code-play__project" data-ox-project-provider="${escapeAttribute(project.provider)}">
+    <span class="ox-code-play__project-main"><span>${escapeHtml(project.label)}</span><strong>${escapeHtml(target)}</strong></span>
+    ${project.entry ? `<span class="ox-code-play__project-entry"><span>Entry</span><strong>${escapeHtml(project.entry)}</strong></span>` : ""}
+    <span class="ox-code-play__project-files">${escapeHtml(fileCount)}</span>
+    ${warnings}${link}
+  </span>`;
+}
 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) : ""
+		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>`;
+	const isSelected = selected === id;
+	return `<button type="button" role="tab" data-ox-panel="${id}" aria-selected="${isSelected ? "true" : "false"}" tabindex="${isSelected ? "0" : "-1"}">${label}</button>`;
 }
 function actionButtonAttrs(action, busy) {
 	const state = actionBusyState(action, busy);
-	return `${state.disabled ? " disabled" : ""}${state.hidden ? " hidden" : ""}`;
+	return `${state.disabled ? " disabled aria-disabled=\"true\"" : ""}${state.hidden ? " hidden" : ""}`;
 }
 function actionBusyState(action, busy) {
 	if (action === "cancel") return {
@@ -240,15 +491,30 @@ function applyActionBusy(root, busy) {
 		const state = actionBusyState(button.dataset.oxAction ?? "", busy);
 		button.disabled = state.disabled;
 		button.hidden = state.hidden;
+		button.setAttribute("aria-disabled", state.disabled ? "true" : "false");
 	}
+	for (const widget of queryPlayWidgets(root)) widget.setAttribute("aria-busy", busy ? "true" : "false");
+}
+function renderPanel(id, label, current, preset, html) {
+	return `<div class="ox-code-play__panel" role="tabpanel" tabindex="0" aria-label="${escapeHtml(label)}" data-panel="${id}"${hidden(current, id, preset)}>${html}</div>`;
 }
 function hidden(current, id, preset) {
 	if (preset === "compact" && (id === "stdio" || id === "stderr")) return "";
 	return current === id ? "" : " hidden";
 }
+function widgetLabel(payload, definition) {
+	const language = definition?.name ?? payload.language;
+	return payload.title ? `${payload.title} (${language})` : `${language} Code Play`;
+}
+function queryPlayWidgets(root) {
+	const widgets = [...root.querySelectorAll(".ox-code-play")];
+	if (typeof HTMLElement !== "undefined" && root instanceof HTMLElement && root.matches(".ox-code-play")) widgets.unshift(root);
+	return widgets;
+}
 //#endregion
 //#region src/hydrate.ts
 const STYLE_ID = "ox-code-play-styles";
+let widgetId = 0;
 function hydrateCodePlay(root = defaultRoot(), options = {}) {
 	ensureStyles();
 	const client = options.client ?? createCodePlayFromPayloads(root);
@@ -261,7 +527,7 @@ function mountCodePlay(element, options = {}) {
 	const payload = readPlayPayload(element.getAttribute("data-ox-code-play") ?? "");
 	if (!payload || payload.ui === "headless") return;
 	const client = options.client ?? createCodePlay({
-		languages: { [payload.language]: true },
+		languages: { [payload.language]: languageEnableFromPayload(payload) },
 		endpoints: payload.endpoints
 	});
 	const source = element.innerHTML;
@@ -273,14 +539,17 @@ function mountCodePlay(element, options = {}) {
 	if (sourceSlot) sourceSlot.innerHTML = source;
 	element.replaceChildren(widget);
 	element.dataset.oxCodePlayMounted = "true";
+	element.removeAttribute("inert");
 	bindWidget(element, payload, client);
+	prepareA11y(element);
 }
 function bindWidget(element, payload, client) {
 	let current = payload;
 	const session = client.createSession({
 		language: payload.language,
 		code: payload.code,
-		config: payload.config
+		config: payload.config,
+		project: payload.project
 	});
 	const runButton = element.querySelector("[data-ox-action=\"run\"]");
 	const checkButton = element.querySelector("[data-ox-action=\"typecheck\"]");
@@ -288,6 +557,9 @@ function bindWidget(element, payload, client) {
 	runButton?.addEventListener("click", () => void run("execute"));
 	checkButton?.addEventListener("click", () => void run("typecheck"));
 	cancelButton?.addEventListener("click", () => session.cancel());
+	element.addEventListener("keydown", (event) => {
+		if (event.target instanceof HTMLElement && event.target.matches("[role=\"tab\"]")) handleTabKeydown(element, event);
+	});
 	element.addEventListener("click", (event) => {
 		const target = event.target;
 		if (!(target instanceof HTMLElement)) return;
@@ -306,13 +578,20 @@ function bindWidget(element, payload, client) {
 	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)))
+			setBusy: (busy) => {
+				applyActionBusy(element, busy);
+				if (busy) paintRunState(element, runningRunActionState(action));
+			},
+			onResult: (result) => paintResult(element, current, result, action),
+			onError: (error) => {
+				paintRunState(element, errorRunActionState(action, error));
+				paintResult(element, current, errorResult(errorMessage(error)), action);
+			}
 		});
 	}
 }
-function paintResult(element, _payload, result) {
+function paintResult(element, _payload, result, action) {
+	paintRunState(element, resultRunActionState(action, result));
 	const stdio = element.querySelector("[data-panel=\"stdio\"]");
 	if (stdio) {
 		stdio.innerHTML = `${renderDiagnosticsHtml(result)}${renderStdioHtml(result.stdio)}`;
@@ -333,11 +612,27 @@ function paintResult(element, _payload, result) {
 	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");
+	showPanel(element, resultPanelToShow(result, Boolean(stderr)));
+}
+function paintRunState(element, state) {
+	const widget = element.querySelector(".ox-code-play");
+	widget?.setAttribute("data-ox-run-state", state.phase);
+	widget?.setAttribute("aria-busy", state.phase === "running" ? "true" : "false");
+	const status = element.querySelector("[data-ox-status]");
+	if (status) status.textContent = renderRunStatusText(state);
+}
+function resultPanelToShow(result, hasStderrPanel) {
+	if (!hasStderrPanel) return "stdio";
+	if (result.diagnostics.some((diagnostic) => diagnostic.severity === "error") || result.status !== "ok" && Boolean(result.stderr)) return "stderr";
+	return "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 tab of element.querySelectorAll("[data-ox-panel]")) {
+		const selected = tab.getAttribute("data-ox-panel") === panel;
+		tab.setAttribute("aria-selected", selected ? "true" : "false");
+		tab.tabIndex = selected ? 0 : -1;
+	}
 	for (const node of element.querySelectorAll(".ox-code-play__panel")) {
 		const id = node.dataset.panel;
 		if (compact && (id === "stdio" || id === "stderr")) {
@@ -347,6 +642,38 @@ function showPanel(element, panel) {
 		node.hidden = id !== panel;
 	}
 }
+function handleTabKeydown(element, event) {
+	if (![
+		"ArrowLeft",
+		"ArrowRight",
+		"Home",
+		"End"
+	].includes(event.key)) return;
+	const tabs = [...element.querySelectorAll("[data-ox-panel]")];
+	const current = tabs.indexOf(event.target);
+	if (current === -1) return;
+	event.preventDefault();
+	const next = tabs[event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : event.key === "ArrowRight" ? (current + 1) % tabs.length : (current - 1 + tabs.length) % tabs.length];
+	const panel = next?.dataset.oxPanel;
+	if (!next || !panel) return;
+	showPanel(element, panel);
+	next.focus();
+}
+function prepareA11y(element) {
+	const widget = element.querySelector(".ox-code-play");
+	if (!widget) return;
+	if (!widget.id) widget.id = `ox-code-play-${++widgetId}`;
+	for (const tab of element.querySelectorAll("[data-ox-panel]")) {
+		const panelName = tab.dataset.oxPanel;
+		const panel = panelName ? element.querySelector(`[data-panel="${panelName}"]`) : null;
+		if (!panelName || !panel) continue;
+		tab.id ||= `${widget.id}-${panelName}-tab`;
+		panel.id ||= `${widget.id}-${panelName}-panel`;
+		tab.setAttribute("aria-controls", panel.id);
+		panel.setAttribute("aria-labelledby", tab.id);
+		panel.removeAttribute("aria-label");
+	}
+}
 function readForm(form) {
 	const data = new FormData(form);
 	const config = {};
@@ -359,7 +686,7 @@ function createCodePlayFromPayloads(root) {
 	let endpoints;
 	for (const element of queryWidgets(root)) try {
 		const payload = decodePayload(element.getAttribute("data-ox-code-play") ?? "");
-		languages[payload.language] = true;
+		languages[payload.language] = languageEnableFromPayload(payload);
 		endpoints = payload.endpoints ?? endpoints;
 	} catch {}
 	return createCodePlay({
@@ -367,6 +694,15 @@ function createCodePlayFromPayloads(root) {
 		endpoints
 	});
 }
+function languageEnableFromPayload(payload) {
+	const enable = {
+		execute: payload.capabilities.execute,
+		typecheck: payload.capabilities.typecheck,
+		config: payload.config
+	};
+	if (payload.endpoint) enable.endpoint = payload.endpoint;
+	return enable;
+}
 function queryWidgets(root) {
 	return [...root.querySelectorAll("[data-ox-code-play]")];
 }
@@ -382,6 +718,6 @@ function defaultRoot() {
 	return document;
 }
 //#endregion
-export { renderDiagnosticsHtml as a, renderStdioHtml as c, renderConfigHtml as i, renderTimingHtml as l, mountCodePlay as n, renderProvenanceHtml as o, renderPlayUi as r, renderStderrHtml as s, hydrateCodePlay as t, CODE_PLAY_STYLES as u };
+export { resultRunActionState as _, renderProjectSandboxHtml as a, renderDiagnosticsHtml as c, renderStdioHtml as d, renderTimingHtml as f, readPlayPayload as g, idleRunActionState as h, renderPlayUi as i, renderProvenanceHtml as l, errorRunActionState as m, mountCodePlay as n, renderRunStatusText as o, CODE_PLAY_STYLES as p, resultPanelToShow as r, renderConfigHtml as s, hydrateCodePlay as t, renderStderrHtml as u, runPlayAction as v, runningRunActionState as y };
 
 //# sourceMappingURL=hydrate2.mjs.map