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

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, 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,89 @@ 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 .ox-code { margin: 0; }
 .ox-code-play__source pre { margin: 0; border: 0; border-radius: 0; }
 .ox-code-play__tabs {
@@ -66,7 +160,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 +187,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 +282,127 @@ 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("")}</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 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 +419,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 +455,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,7 +467,9 @@ 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;
@@ -288,6 +484,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 +505,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 +539,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 +569,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 +613,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 +621,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 +645,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 { runPlayAction as _, renderRunStatusText as a, renderProvenanceHtml as c, renderTimingHtml as d, CODE_PLAY_STYLES as f, resultRunActionState as g, readPlayPayload as h, renderPlayUi as i, renderStderrHtml as l, idleRunActionState as m, mountCodePlay as n, renderConfigHtml as o, errorRunActionState as p, resultPanelToShow as r, renderDiagnosticsHtml as s, hydrateCodePlay as t, renderStdioHtml as u, runningRunActionState as v };
 
 //# sourceMappingURL=hydrate2.mjs.map