npm - @ox-content/code-play - Versions diffs - 3.0.0-alpha.12 → 3.0.0-alpha.14 - Mend

@ox-content/code-play 3.0.0-alpha.12 → 3.0.0-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/browser.mjs CHANGED Viewed

@@ -1659,19 +1659,20 @@ function errorRunActionState(action, error, finishedAtMs = Date.now()) {
 var CODE_PLAY_STYLES = `
 .ox-code-play {
   border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));
-  border-radius: 8px;
-  background: var(--octc-color-bg-alt, var(--octc-color-bg, Canvas));
+  border-radius: 6px;
+  background: var(--octc-color-bg, Canvas);
   color: var(--octc-color-text, CanvasText);
   overflow: hidden;
-  margin: 1.25rem 0;
+  margin: 1rem 0;
 }
 .ox-code-play__toolbar {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.4rem;
   align-items: center;
-  padding: 0.6rem 0.8rem;
+  padding: 0.45rem 0.6rem;
   border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 12%, transparent));
+  background: color-mix(in srgb, var(--octc-color-bg-alt, var(--octc-color-bg, Canvas)) 64%, transparent);
 }
 .ox-code-play__summary {
   display: inline-flex;
@@ -1691,11 +1692,11 @@ var CODE_PLAY_STYLES = `
   opacity: 0.72;
 }
 .ox-code-play__status {
-  min-width: 5.25rem;
+  min-width: 4.6rem;
   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;
+  border-radius: 999px;
+  padding: 0.12rem 0.45rem;
   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);
@@ -1712,8 +1713,9 @@ var CODE_PLAY_STYLES = `
   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: 8px;
-  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+  min-height: 1.9rem;
+  padding: 0.18rem 0.62rem;
   font: 600 0.75rem/1.4 ui-sans-serif, system-ui, sans-serif;
   cursor: pointer;
 }
@@ -1729,29 +1731,29 @@ var CODE_PLAY_STYLES = `
 .ox-code-play__runtime {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.45rem;
+  gap: 0.4rem 0.7rem;
   align-items: center;
-  padding: 0.55rem 0.8rem;
+  padding: 0.38rem 0.6rem;
   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);
+  background: color-mix(in srgb, var(--octc-color-bg-alt, var(--octc-color-bg, Canvas)) 56%, 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);
+  display: inline-flex;
+  gap: 0.3rem;
+  align-items: baseline;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
 }
 .ox-code-play__runtime-chip span {
-  font: 600 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;
+  font: 650 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.03em;
   opacity: 0.62;
 }
 .ox-code-play__runtime-chip strong {
-  font: 650 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;
+  font: 650 0.72rem/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); }
@@ -1764,7 +1766,7 @@ var CODE_PLAY_STYLES = `
   align-items: center;
   flex-wrap: wrap;
   margin-left: auto;
-  padding: 0.35rem 0.5rem;
+  padding: 0.28rem 0.42rem;
   border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 14%, transparent));
   border-radius: 6px;
   background: var(--octc-color-bg, Canvas);
@@ -1815,26 +1817,31 @@ var CODE_PLAY_STYLES = `
   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__source pre {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 0.75rem 0.8rem;
+}
 .ox-code-play__tabs {
   display: flex;
-  gap: 0.25rem;
-  padding: 0.4rem 0.7rem 0;
+  gap: 0.15rem;
+  padding: 0.35rem 0.55rem 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: 6px 6px 0 0;
+  padding: 0.28rem 0.48rem;
+  border-radius: 5px 5px 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 { padding: 0.55rem 0.65rem 0.7rem; color: var(--octc-color-text, CanvasText); }
 .ox-code-play__panel pre {
   background: transparent !important;
   color: inherit !important;
@@ -1845,7 +1852,7 @@ var CODE_PLAY_STYLES = `
 }
 .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 { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.55rem; 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; }
@@ -1876,6 +1883,20 @@ var CODE_PLAY_STYLES = `
 .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; }
+@media (max-width: 640px) {
+  .ox-code-play__toolbar {
+    align-items: flex-start;
+  }
+  .ox-code-play__runtime,
+  .ox-code-play__tabs,
+  .ox-code-play__panel {
+    padding-inline: 0.55rem;
+  }
+  .ox-code-play__stdio-line {
+    grid-template-columns: 1fr;
+    gap: 0.15rem;
+  }
+}
 `;
 //#endregion
 //#region src/viewers.ts

package/dist/hydrate2.mjs CHANGED Viewed

@@ -50,19 +50,20 @@ function errorRunActionState(action, error, finishedAtMs = Date.now()) {
 const CODE_PLAY_STYLES = `
 .ox-code-play {
   border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));
-  border-radius: 8px;
-  background: var(--octc-color-bg-alt, var(--octc-color-bg, Canvas));
+  border-radius: 6px;
+  background: var(--octc-color-bg, Canvas);
   color: var(--octc-color-text, CanvasText);
   overflow: hidden;
-  margin: 1.25rem 0;
+  margin: 1rem 0;
 }
 .ox-code-play__toolbar {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.4rem;
   align-items: center;
-  padding: 0.6rem 0.8rem;
+  padding: 0.45rem 0.6rem;
   border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 12%, transparent));
+  background: color-mix(in srgb, var(--octc-color-bg-alt, var(--octc-color-bg, Canvas)) 64%, transparent);
 }
 .ox-code-play__summary {
   display: inline-flex;
@@ -82,11 +83,11 @@ const CODE_PLAY_STYLES = `
   opacity: 0.72;
 }
 .ox-code-play__status {
-  min-width: 5.25rem;
+  min-width: 4.6rem;
   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;
+  border-radius: 999px;
+  padding: 0.12rem 0.45rem;
   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);
@@ -103,8 +104,9 @@ const CODE_PLAY_STYLES = `
   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: 8px;
-  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+  min-height: 1.9rem;
+  padding: 0.18rem 0.62rem;
   font: 600 0.75rem/1.4 ui-sans-serif, system-ui, sans-serif;
   cursor: pointer;
 }
@@ -120,29 +122,29 @@ const CODE_PLAY_STYLES = `
 .ox-code-play__runtime {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.45rem;
+  gap: 0.4rem 0.7rem;
   align-items: center;
-  padding: 0.55rem 0.8rem;
+  padding: 0.38rem 0.6rem;
   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);
+  background: color-mix(in srgb, var(--octc-color-bg-alt, var(--octc-color-bg, Canvas)) 56%, 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);
+  display: inline-flex;
+  gap: 0.3rem;
+  align-items: baseline;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
 }
 .ox-code-play__runtime-chip span {
-  font: 600 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;
+  font: 650 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.03em;
   opacity: 0.62;
 }
 .ox-code-play__runtime-chip strong {
-  font: 650 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;
+  font: 650 0.72rem/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); }
@@ -155,7 +157,7 @@ const CODE_PLAY_STYLES = `
   align-items: center;
   flex-wrap: wrap;
   margin-left: auto;
-  padding: 0.35rem 0.5rem;
+  padding: 0.28rem 0.42rem;
   border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 14%, transparent));
   border-radius: 6px;
   background: var(--octc-color-bg, Canvas);
@@ -206,26 +208,31 @@ const CODE_PLAY_STYLES = `
   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__source pre {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 0.75rem 0.8rem;
+}
 .ox-code-play__tabs {
   display: flex;
-  gap: 0.25rem;
-  padding: 0.4rem 0.7rem 0;
+  gap: 0.15rem;
+  padding: 0.35rem 0.55rem 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: 6px 6px 0 0;
+  padding: 0.28rem 0.48rem;
+  border-radius: 5px 5px 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 { padding: 0.55rem 0.65rem 0.7rem; color: var(--octc-color-text, CanvasText); }
 .ox-code-play__panel pre {
   background: transparent !important;
   color: inherit !important;
@@ -236,7 +243,7 @@ const CODE_PLAY_STYLES = `
 }
 .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 { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.55rem; 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; }
@@ -267,6 +274,20 @@ const CODE_PLAY_STYLES = `
 .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; }
+@media (max-width: 640px) {
+  .ox-code-play__toolbar {
+    align-items: flex-start;
+  }
+  .ox-code-play__runtime,
+  .ox-code-play__tabs,
+  .ox-code-play__panel {
+    padding-inline: 0.55rem;
+  }
+  .ox-code-play__stdio-line {
+    grid-template-columns: 1fr;
+    gap: 0.15rem;
+  }
+}
 `;
 //#endregion
 //#region src/viewers.ts

package/dist/hydrate2.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hydrate2.mjs","names":[],"sources":["../src/hydrate-action.ts","../src/styles.ts","../src/viewers.ts","../src/ui.ts","../src/hydrate.ts"],"sourcesContent":["import { decodePayload } from \"./payload\";\nimport { errorMessage } from \"./result\";\nimport type { PlayPayload, RunAction, RunActionState, RunResult } from \"./types\";\n\nexport function readPlayPayload(encoded: string): PlayPayload \| undefined {\n try {\n return decodePayload(encoded);\n } catch {\n return undefined;\n }\n}\n\nexport async function runPlayAction(input: {\n action: () => Promise<RunResult>;\n setBusy: (busy: boolean) => void;\n onResult: (result: RunResult) => void;\n onError: (error: unknown) => void;\n}): Promise<void> {\n input.setBusy(true);\n try {\n input.onResult(await input.action());\n } catch (error) {\n input.onError(error);\n } finally {\n input.setBusy(false);\n }\n}\n\nexport function idleRunActionState(): RunActionState {\n return { phase: \"idle\" };\n}\n\nexport function runningRunActionState(action: RunAction, startedAtMs = Date.now()): RunActionState {\n return { phase: \"running\", action, startedAtMs };\n}\n\nexport function resultRunActionState(\n action: RunAction,\n result: RunResult,\n finishedAtMs = Date.now(),\n): RunActionState {\n const phase =\n result.status === \"offline\"\n ? \"offline\"\n : result.status === \"ok\" \|\| result.status === \"cancelled\"\n ? \"result\"\n : \"error\";\n return {\n phase,\n action,\n result,\n message: result.diagnostics[0]?.message,\n finishedAtMs,\n };\n}\n\nexport function errorRunActionState(\n action: RunAction,\n error: unknown,\n finishedAtMs = Date.now(),\n): RunActionState {\n return {\n phase: \"error\",\n action,\n message: errorMessage(error),\n finishedAtMs,\n };\n}\n","export const CODE_PLAY_STYLES = `\n.ox-code-play {\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));\n border-radius: 8px;\n background: var(--octc-color-bg-alt, var(--octc-color-bg, Canvas));\n color: var(--octc-color-text, CanvasText);\n overflow: hidden;\n margin: 1.25rem 0;\n}\n.ox-code-play__toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n align-items: center;\n padding: 0.6rem 0.8rem;\n border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 12%, transparent));\n}\n.ox-code-play__summary {\n display: inline-flex;\n flex: 1 1 12rem;\n min-width: 9rem;\n gap: 0.45rem;\n align-items: baseline;\n}\n.ox-code-play__lang {\n font: 600 0.8rem/1.2 ui-sans-serif, system-ui, sans-serif;\n color: var(--octc-color-text, CanvasText);\n}\n.ox-code-play__title {\n min-width: 0;\n overflow-wrap: anywhere;\n font: 500 0.78rem/1.25 ui-sans-serif, system-ui, sans-serif;\n opacity: 0.72;\n}\n.ox-code-play__status {\n min-width: 5.25rem;\n text-align: center;\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));\n border-radius: 6px;\n padding: 0.18rem 0.5rem;\n font: 650 0.68rem/1.25 ui-sans-serif, system-ui, sans-serif;\n color: var(--octc-color-text, CanvasText);\n background: var(--octc-color-bg, Canvas);\n}\n.ox-code-play[data-ox-run-state=\"running\"] .ox-code-play__status {\n color: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n}\n.ox-code-play[data-ox-run-state=\"error\"] .ox-code-play__status,\n.ox-code-play[data-ox-run-state=\"offline\"] .ox-code-play__status {\n color: var(--octc-danger, #b42318);\n}\n.ox-code-play__toolbar button {\n appearance: none;\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 20%, transparent));\n background: color-mix(in srgb, var(--octc-color-text, CanvasText) 8%, transparent);\n color: var(--octc-color-text, CanvasText);\n border-radius: 8px;\n padding: 0.25rem 0.75rem;\n font: 600 0.75rem/1.4 ui-sans-serif, system-ui, sans-serif;\n cursor: pointer;\n}\n.ox-code-play__toolbar button:disabled { opacity: 0.55; cursor: progress; }\n.ox-code-play__toolbar button:focus-visible,\n.ox-code-play__tabs button:focus-visible,\n.ox-code-play__field input:focus-visible,\n.ox-code-play__field select:focus-visible,\n.ox-code-play__panel:focus-visible {\n outline: 2px solid var(--octc-color-primary, var(--octc-accent, #4f46e5));\n outline-offset: 2px;\n}\n.ox-code-play__runtime {\n display: flex;\n flex-wrap: wrap;\n gap: 0.45rem;\n align-items: center;\n padding: 0.55rem 0.8rem;\n border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 10%, transparent));\n background: color-mix(in srgb, var(--octc-color-text, CanvasText) 4%, transparent);\n}\n.ox-code-play__runtime-chip {\n display: inline-grid;\n gap: 0.1rem;\n min-width: 7.5rem;\n padding: 0.35rem 0.5rem;\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 14%, transparent));\n border-radius: 6px;\n background: var(--octc-color-bg, Canvas);\n}\n.ox-code-play__runtime-chip span {\n font: 600 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n opacity: 0.62;\n}\n.ox-code-play__runtime-chip strong {\n font: 650 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__runtime-chip--ok strong { color: var(--octc-color-primary, var(--octc-accent, #4f46e5)); }\n.ox-code-play__runtime-chip--warn strong { color: var(--octc-warning, #b54708); }\n.ox-code-play__runtime-chip--muted strong { opacity: 0.72; }\n.ox-code-play__project {\n display: inline-flex;\n flex: 1 1 18rem;\n min-width: min(100%, 16rem);\n gap: 0.45rem;\n align-items: center;\n flex-wrap: wrap;\n margin-left: auto;\n padding: 0.35rem 0.5rem;\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 14%, transparent));\n border-radius: 6px;\n background: var(--octc-color-bg, Canvas);\n}\n.ox-code-play__project-main,\n.ox-code-play__project-entry {\n display: inline-grid;\n gap: 0.1rem;\n min-width: 0;\n}\n.ox-code-play__project-main { flex: 1 1 8.5rem; }\n.ox-code-play__project-entry { flex: 999 1 9rem; }\n.ox-code-play__project-main span,\n.ox-code-play__project-entry span {\n font: 600 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n opacity: 0.62;\n}\n.ox-code-play__project-main strong,\n.ox-code-play__project-entry strong {\n min-width: 0;\n overflow-wrap: anywhere;\n font: 650 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__project-files,\n.ox-code-play__project-warning,\n.ox-code-play__project-link {\n flex: 0 0 auto;\n border-radius: 6px;\n padding: 0.18rem 0.45rem;\n font: 650 0.68rem/1.25 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__project-files {\n background: color-mix(in srgb, var(--octc-color-text, CanvasText) 8%, transparent);\n}\n.ox-code-play__project-warning {\n color: var(--octc-warning, #b54708);\n background: color-mix(in srgb, var(--octc-warning, #b54708) 12%, transparent);\n}\n.ox-code-play__project-link {\n color: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n background: color-mix(in srgb, var(--octc-color-primary, var(--octc-accent, #4f46e5)) 12%, transparent);\n text-decoration: none;\n}\n.ox-code-play__project-link:focus-visible {\n outline: 2px solid var(--octc-color-primary, var(--octc-accent, #4f46e5));\n outline-offset: 2px;\n}\n.ox-code-play .ox-code { margin: 0; }\n.ox-code-play__source pre { margin: 0; border: 0; border-radius: 0; }\n.ox-code-play__tabs {\n display: flex;\n gap: 0.25rem;\n padding: 0.4rem 0.7rem 0;\n}\n.ox-code-play__tabs button {\n appearance: none;\n border: 0;\n background: transparent;\n color: var(--octc-color-text, CanvasText);\n padding: 0.35rem 0.55rem;\n border-radius: 6px 6px 0 0;\n font: 600 0.75rem/1.2 ui-sans-serif, system-ui, sans-serif;\n cursor: pointer;\n}\n.ox-code-play__tabs button[aria-selected=\"true\"] {\n background: color-mix(in srgb, var(--octc-color-text, CanvasText) 10%, transparent);\n}\n.ox-code-play__panel { padding: 0.7rem 0.8rem 0.9rem; color: var(--octc-color-text, CanvasText); }\n.ox-code-play__panel pre {\n background: transparent !important;\n color: inherit !important;\n padding: 0 !important;\n margin: 0 !important;\n border: 0 !important;\n border-radius: 0 !important;\n}\n.ox-code-play__empty { margin: 0; opacity: 0.7; font-size: 0.85rem; }\n.ox-code-play__stdio { font: 12px/1.45 ui-monospace, SFMono-Regular, monospace; }\n.ox-code-play__stdio-line { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem; white-space: pre-wrap; }\n.ox-code-play__stdio-line--stderr { color: var(--octc-danger, #b42318); }\n.ox-code-play__stdio-line--stdin { opacity: 0.75; }\n.ox-code-play__stdio-meta { opacity: 0.6; }\n.ox-code-play__config { display: grid; gap: 0.55rem; }\n.ox-code-play__field { display: grid; gap: 0.25rem; font-size: 0.85rem; }\n.ox-code-play__field input, .ox-code-play__field select {\n font: inherit;\n padding: 0.3rem 0.45rem;\n border-radius: 6px;\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 18%, transparent));\n background: var(--octc-color-bg, Canvas);\n color: var(--octc-color-text, CanvasText);\n}\n.ox-code-play__provenance { display: grid; gap: 0.6rem; margin: 0; }\n.ox-code-play__provenance dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; }\n.ox-code-play__provenance dd { margin: 0.15rem 0 0; }\n.ox-code-play__phase { margin: 0.45rem 0; }\n.ox-code-play__phase-meta { display: flex; justify-content: space-between; font-size: 0.8rem; }\n.ox-code-play__phase-bar {\n height: 0.35rem;\n margin-top: 0.25rem;\n border-radius: 999px;\n background: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n}\n.ox-code-play__timing-total { margin: 0 0 0.4rem; font-weight: 600; }\n.ox-code-play__diags { margin: 0 0 0.6rem; padding-left: 1.1rem; }\n.ox-code-play__diag--error { color: var(--octc-danger, #b42318); }\n.ox-code-play__diag--warning { color: var(--octc-warning, #b54708); }\n.ox-code-play--compact .ox-code-play__tabs { display: none; }\n.ox-code-play--compact .ox-code-play__panel[data-panel]:not([data-panel=\"stdio\"]):not([data-panel=\"stderr\"]) { display: none; }\n`;\n","import { escapeHtml } from \"./escape\";\nimport { selectStream } from \"./stdio\";\nimport type { ConfigField, Provenance, RunResult, StdioEvent, TimingReport } from \"./types\";\n\nexport function renderStdioHtml(events: StdioEvent[]): string {\n if (events.length === 0) {\n return `<p class=\"ox-code-play__stdio ox-code-play__empty\">No stdio yet.</p>`;\n }\n const lines = events\n .map((event) => {\n const time = event.timestampMs.toFixed(1);\n 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>`;\n })\n .join(\"\");\n return `<div class=\"ox-code-play__stdio\" role=\"log\">${lines}</div>`;\n}\n\n/** Dedicated stderr viewer: stderr chunks plus error/warning diagnostics. /\nexport function renderStderrHtml(result: RunResult \| undefined): string {\n const chunks = selectStream(result?.stdio ?? [], \"stderr\");\n const diagnostics = (result?.diagnostics ?? []).filter(\n (diagnostic) => diagnostic.severity === \"error\" \|\| diagnostic.severity === \"warning\",\n );\n if (chunks.length === 0 && diagnostics.length === 0) {\n return `<p class=\"ox-code-play__empty\">No stderr.</p>`;\n }\n const stream = chunks.length === 0 ? \"\" : renderStdioHtml(chunks);\n if (diagnostics.length === 0) {\n return stream;\n }\n const items = diagnostics\n .map((diagnostic) => {\n const place = diagnostic.line\n ? `:${diagnostic.line}${diagnostic.column ? `:${diagnostic.column}` : \"\"}`\n : \"\";\n return `<li class=\"ox-code-play__diag ox-code-play__diag--${diagnostic.severity}\">${escapeHtml(diagnostic.severity)}${escapeHtml(place)} ${escapeHtml(diagnostic.message)}</li>`;\n })\n .join(\"\");\n return `${stream}<ul class=\"ox-code-play__diags\">${items}</ul>`;\n}\n\nexport function renderConfigHtml(schema: ConfigField[], config: Record<string, unknown>): string {\n if (schema.length === 0) {\n return `<p class=\"ox-code-play__empty\">This language has no editable config.</p>`;\n }\n const fields = schema\n .map((field) => {\n const value = config[field.key] ?? field.default ?? \"\";\n const label = `<label class=\"ox-code-play__field\"><span>${escapeHtml(field.label)}</span>${renderField(field, value)}</label>`;\n return field.description\n ? `${label}<p class=\"ox-code-play__field-help\">${escapeHtml(field.description)}</p>`\n : label;\n })\n .join(\"\");\n return `<form class=\"ox-code-play__config\">${fields}</form>`;\n}\n\nexport function renderProvenanceHtml(provenance: Provenance \| undefined): string {\n if (!provenance?.compile && !provenance?.execute) {\n return `<p class=\"ox-code-play__empty\">No provenance yet. Run or type-check a sample.</p>`;\n }\n return `<dl class=\"ox-code-play__provenance\">${renderLocation(\"Compiled\", provenance.compile)}${renderLocation(\"Executed\", provenance.execute)}</dl>`;\n}\n\nexport function renderTimingHtml(timing: TimingReport \| undefined): string {\n if (!timing \|\| timing.phases.length === 0) {\n return `<p class=\"ox-code-play__empty\">No timing yet. Run or type-check a sample.</p>`;\n }\n const rows = timing.phases\n .map((phase) => {\n const width = timing.totalMs > 0 ? Math.max(2, (phase.durationMs / timing.totalMs) 100) : 0;\n 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>`;\n })\n .join(\"\");\n return `<div class=\"ox-code-play__timing\"><p class=\"ox-code-play__timing-total\">Total ${timing.totalMs.toFixed(1)}ms</p>${rows}</div>`;\n}\n\nexport function renderDiagnosticsHtml(result: RunResult \| undefined): string {\n if (!result?.diagnostics.length) {\n return \"\";\n }\n const items = result.diagnostics\n .map((diagnostic) => {\n const place = diagnostic.line\n ? `:${diagnostic.line}${diagnostic.column ? `:${diagnostic.column}` : \"\"}`\n : \"\";\n return `<li class=\"ox-code-play__diag ox-code-play__diag--${diagnostic.severity}\">${escapeHtml(diagnostic.severity)}${escapeHtml(place)} ${escapeHtml(diagnostic.message)}</li>`;\n })\n .join(\"\");\n return `<ul class=\"ox-code-play__diags\">${items}</ul>`;\n}\n\nfunction renderField(field: ConfigField, value: unknown): string {\n const name = escapeHtml(field.key);\n if (field.type === \"boolean\") {\n return `<input type=\"checkbox\" name=\"${name}\" ${value ? \"checked\" : \"\"}>`;\n }\n if (field.type === \"select\") {\n const options = (field.options ?? [])\n .map(\n (option) =>\n `<option value=\"${escapeHtml(option.value)}\" ${String(value) === option.value ? \"selected\" : \"\"}>${escapeHtml(option.label)}</option>`,\n )\n .join(\"\");\n return `<select name=\"${name}\">${options}</select>`;\n }\n const inputType = field.type === \"number\" ? \"number\" : \"text\";\n return `<input type=\"${inputType}\" name=\"${name}\" value=\"${escapeHtml(String(value))}\">`;\n}\n\nfunction renderLocation(label: string, location: Provenance[\"compile\"]): string {\n if (!location) {\n return \"\";\n }\n const details = [location.runtime, location.version, location.sandbox, location.target]\n .filter(Boolean)\n .join(\" · \");\n return `<div><dt>${escapeHtml(label)}</dt><dd><strong>${escapeHtml(location.host)}</strong>${details ? ` <span>${escapeHtml(details)}</span>` : \"\"}</dd></div>`;\n}\n","import { resolveLanguage } from \"./catalog\";\nimport { escapeAttribute, escapeHtml } from \"./escape\";\nimport { idleRunActionState } from \"./hydrate-action\";\nimport type {\n CodePlayPreset,\n LanguageDefinition,\n PlayPayload,\n ProjectSandbox,\n RunActionState,\n RunResult,\n} from \"./types\";\nimport {\n renderConfigHtml,\n renderDiagnosticsHtml,\n renderProvenanceHtml,\n renderStderrHtml,\n renderStdioHtml,\n renderTimingHtml,\n} from \"./viewers\";\n\nexport interface UiState {\n payload: PlayPayload;\n result?: RunResult;\n busy?: boolean;\n runState?: RunActionState;\n panel?: \"stdio\" \| \"stderr\" \| \"config\" \| \"provenance\" \| \"timing\";\n}\n\nexport function renderPlayUi(state: UiState): string {\n const definition = resolveLanguage(state.payload.language);\n const preset: CodePlayPreset = state.payload.ui === \"headless\" ? \"headless\" : state.payload.ui;\n if (preset === \"headless\") {\n return \"\";\n }\n const panel = state.panel ?? \"stdio\";\n const canTypecheck = state.payload.capabilities.typecheck;\n const runState =\n state.runState ??\n (state.busy ? { phase: \"running\" as const, action: \"execute\" as const } : idleRunActionState());\n const isBusy = Boolean(state.busy) \|\| runState.phase === \"running\";\n const tabs = renderTabs(state, panel);\n const viewers = state.payload.viewers;\n const label = widgetLabel(state.payload, definition);\n 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\"}\">\n <div class=\"ox-code-play__toolbar\">\n <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>\n <span class=\"ox-code-play__status\" data-ox-status role=\"status\" aria-live=\"polite\">${renderRunStatusText(runState)}</span>\n <button type=\"button\" data-ox-action=\"run\" aria-label=\"${escapeHtml(`Run ${label}`)}\"${actionButtonAttrs(\"run\", Boolean(state.busy))}>Run</button>\n ${canTypecheck ? `<button type=\"button\" data-ox-action=\"typecheck\" aria-label=\"${escapeHtml(`Typecheck ${label}`)}\"${actionButtonAttrs(\"typecheck\", Boolean(state.busy))}>Typecheck</button>` : \"\"}\n <button type=\"button\" data-ox-action=\"cancel\" aria-label=\"${escapeHtml(`Cancel ${label}`)}\"${actionButtonAttrs(\"cancel\", Boolean(state.busy))}>Cancel</button>\n </div>\n ${renderRuntimeStrip(state.payload, definition)}\n <div class=\"ox-code-play__source\"></div>\n ${tabs}\n ${viewers.stdio ? renderPanel(\"stdio\", \"Stdio\", panel, preset, `${renderDiagnosticsHtml(state.result)}${renderStdioHtml(state.result?.stdio ?? [])}`) : \"\"}\n ${viewers.stderr ? renderPanel(\"stderr\", \"Stderr\", panel, preset, renderStderrHtml(state.result)) : \"\"}\n ${viewers.config ? renderPanel(\"config\", \"Config\", panel, preset, renderConfigHtml(definition?.configSchema ?? [], state.payload.config)) : \"\"}\n ${viewers.provenance ? renderPanel(\"provenance\", \"Provenance\", panel, preset, renderProvenanceHtml(state.result?.provenance)) : \"\"}\n ${viewers.timing ? renderPanel(\"timing\", \"Timing\", panel, preset, renderTimingHtml(state.result?.timing)) : \"\"}\n</div>`;\n}\n\nexport function renderRunStatusText(state: RunActionState): string {\n if (state.phase === \"running\") {\n return state.action === \"typecheck\" ? \"Typechecking\" : \"Running\";\n }\n if (state.phase === \"offline\") {\n return \"Offline\";\n }\n if (state.phase === \"error\") {\n if (state.result?.status === \"timeout\") {\n return \"Timed out\";\n }\n if (state.result?.status === \"unsupported\") {\n return \"Unsupported\";\n }\n return \"Error\";\n }\n if (state.phase === \"result\") {\n if (state.result?.status === \"cancelled\") {\n return \"Cancelled\";\n }\n return \"Done\";\n }\n return \"Ready\";\n}\n\nfunction renderRuntimeStrip(\n payload: PlayPayload,\n definition: LanguageDefinition \| undefined,\n): string {\n const runtime = runtimeLabel(payload, definition);\n const executor = executorLabel(payload, definition);\n const checks = payload.capabilities.typecheck ? \"Typecheck ready\" : \"Run only\";\n const chips = [\n runtimeChip(\"Runtime\", runtime.label, runtime.kind),\n runtimeChip(\"Executor\", executor.label, executor.kind),\n runtimeChip(\"Checks\", checks, payload.capabilities.typecheck ? \"ok\" : \"muted\"),\n ].join(\"\");\n return `<div class=\"ox-code-play__runtime\" aria-label=\"Code Play runtime\">${chips}${renderProjectSandboxHtml(payload.project)}</div>`;\n}\n\nfunction runtimeLabel(\n payload: PlayPayload,\n definition: LanguageDefinition \| undefined,\n): { label: string; kind: \"ok\" \| \"warn\" \| \"muted\" } {\n switch (definition?.backend) {\n case \"javascript\":\n return { label: \"Browser sandbox\", kind: \"ok\" };\n case \"typescript\":\n return { label: \"TypeScript sandbox\", kind: \"ok\" };\n case \"framework\":\n return { label: `${definition.name} iframe preview`, kind: \"ok\" };\n case \"rust-playground\":\n return { label: \"Rust Playground\", kind: payload.endpoints?.rust ? \"ok\" : \"warn\" };\n case \"go-playground\":\n return { label: \"Go Playground\", kind: payload.endpoints?.go ? \"ok\" : \"warn\" };\n case \"remote\":\n return payload.endpoint\n ? { label: \"Piston-compatible\", kind: \"ok\" }\n : { label: \"Endpoint missing\", kind: \"warn\" };\n default:\n return { label: definition?.name ?? payload.language, kind: \"muted\" };\n }\n}\n\nfunction executorLabel(\n payload: PlayPayload,\n definition: LanguageDefinition \| undefined,\n): { label: string; kind: \"ok\" \| \"warn\" \| \"muted\" } {\n if (!payload.capabilities.execute) {\n return { label: \"Disabled\", kind: \"warn\" };\n }\n if (definition?.backend === \"remote\" && !payload.endpoint) {\n return { label: \"Configure endpoint\", kind: \"warn\" };\n }\n return { label: \"On demand\", kind: \"ok\" };\n}\n\nfunction runtimeChip(label: string, value: string, kind: \"ok\" \| \"warn\" \| \"muted\"): string {\n return `<span class=\"ox-code-play__runtime-chip ox-code-play__runtime-chip--${kind}\"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></span>`;\n}\n\nexport function renderProjectSandboxHtml(project: ProjectSandbox \| undefined): string {\n if (!project) {\n return \"\";\n }\n const fileCount = `${project.files.length} ${project.files.length === 1 ? \"file\" : \"files\"}`;\n const target =\n project.target === \"browser\"\n ? \"Browser project\"\n : project.target === \"node\"\n ? \"Node-like project\"\n : \"External project\";\n const url = project.openUrl ?? project.fallbackUrl;\n const warnings = project.warnings?.length\n ? `<span class=\"ox-code-play__project-warning\" title=\"${escapeAttribute(project.warnings.join(\"\\n\"))}\">Warnings</span>`\n : \"\";\n const link = url\n ? `<a class=\"ox-code-play__project-link\" href=\"${escapeAttribute(url)}\" target=\"_blank\" rel=\"noopener noreferrer\">Open</a>`\n : \"\";\n return `<span class=\"ox-code-play__project\" data-ox-project-provider=\"${escapeAttribute(project.provider)}\">\n <span class=\"ox-code-play__project-main\"><span>${escapeHtml(project.label)}</span><strong>${escapeHtml(target)}</strong></span>\n ${project.entry ? `<span class=\"ox-code-play__project-entry\"><span>Entry</span><strong>${escapeHtml(project.entry)}</strong></span>` : \"\"}\n <span class=\"ox-code-play__project-files\">${escapeHtml(fileCount)}</span>\n ${warnings}${link}\n </span>`;\n}\n\nfunction renderTabs(state: UiState, panel: string): string {\n if (state.payload.ui === \"compact\") {\n return \"\";\n }\n const viewers = state.payload.viewers;\n const buttons = [\n viewers.stdio ? tab(\"stdio\", \"Stdio\", panel) : \"\",\n viewers.stderr ? tab(\"stderr\", \"Stderr\", panel) : \"\",\n viewers.config ? tab(\"config\", \"Config\", panel) : \"\",\n viewers.provenance ? tab(\"provenance\", \"Provenance\", panel) : \"\",\n viewers.timing ? tab(\"timing\", \"Timing\", panel) : \"\",\n ]\n .filter(Boolean)\n .join(\"\");\n return buttons ? `<div class=\"ox-code-play__tabs\" role=\"tablist\">${buttons}</div>` : \"\";\n}\n\nfunction tab(id: string, label: string, selected: string): string {\n const isSelected = selected === id;\n return `<button type=\"button\" role=\"tab\" data-ox-panel=\"${id}\" aria-selected=\"${isSelected ? \"true\" : \"false\"}\" tabindex=\"${isSelected ? \"0\" : \"-1\"}\">${label}</button>`;\n}\n\nexport function actionButtonAttrs(action: string, busy: boolean): string {\n const state = actionBusyState(action, busy);\n return `${state.disabled ? ' disabled aria-disabled=\"true\"' : \"\"}${state.hidden ? \" hidden\" : \"\"}`;\n}\n\nexport function actionBusyState(\n action: string,\n busy: boolean,\n): { disabled: boolean; hidden: boolean } {\n if (action === \"cancel\") {\n return { disabled: !busy, hidden: !busy };\n }\n return { disabled: busy, hidden: false };\n}\n\nexport function applyActionBusy(root: ParentNode, busy: boolean): void {\n for (const button of root.querySelectorAll<HTMLButtonElement>(\"button[data-ox-action]\")) {\n const state = actionBusyState(button.dataset.oxAction ?? \"\", busy);\n button.disabled = state.disabled;\n button.hidden = state.hidden;\n button.setAttribute(\"aria-disabled\", state.disabled ? \"true\" : \"false\");\n }\n for (const widget of queryPlayWidgets(root)) {\n widget.setAttribute(\"aria-busy\", busy ? \"true\" : \"false\");\n }\n}\n\nfunction renderPanel(\n id: string,\n label: string,\n current: string,\n preset: CodePlayPreset,\n html: string,\n): string {\n return `<div class=\"ox-code-play__panel\" role=\"tabpanel\" tabindex=\"0\" aria-label=\"${escapeHtml(label)}\" data-panel=\"${id}\"${hidden(current, id, preset)}>${html}</div>`;\n}\n\nfunction hidden(current: string, id: string, preset: CodePlayPreset): string {\n if (preset === \"compact\" && (id === \"stdio\" \|\| id === \"stderr\")) {\n return \"\";\n }\n return current === id ? \"\" : \" hidden\";\n}\n\nfunction widgetLabel(payload: PlayPayload, definition: LanguageDefinition \| undefined): string {\n const language = definition?.name ?? payload.language;\n return payload.title ? `${payload.title} (${language})` : `${language} Code Play`;\n}\n\nfunction queryPlayWidgets(root: ParentNode): HTMLElement[] {\n const widgets = [...root.querySelectorAll<HTMLElement>(\".ox-code-play\")];\n if (\n typeof HTMLElement !== \"undefined\" &&\n root instanceof HTMLElement &&\n root.matches(\".ox-code-play\")\n ) {\n widgets.unshift(root);\n }\n return widgets;\n}\n","import { createCodePlay, type CodePlayClient } from \"./client\";\nimport {\n errorRunActionState,\n readPlayPayload,\n resultRunActionState,\n runningRunActionState,\n runPlayAction,\n} from \"./hydrate-action\";\nimport { decodePayload, encodePayload } from \"./payload\";\nimport { errorMessage, errorResult } from \"./result\";\nimport { CODE_PLAY_STYLES } from \"./styles\";\nimport { JS_SANDBOX_FLAGS } from \"./javascript-sandbox\";\nimport { applyActionBusy, renderPlayUi, renderRunStatusText } from \"./ui\";\nimport type {\n LanguageEnable,\n LanguageEnableOptions,\n PlayPayload,\n RunAction,\n RunActionState,\n RunResult,\n} from \"./types\";\nimport {\n renderDiagnosticsHtml,\n renderProvenanceHtml,\n renderStderrHtml,\n renderStdioHtml,\n renderTimingHtml,\n} from \"./viewers\";\n\nexport interface HydrateOptions {\n client?: CodePlayClient;\n root?: ParentNode;\n}\n\nconst STYLE_ID = \"ox-code-play-styles\";\nlet widgetId = 0;\n\nexport function hydrateCodePlay(\n root: ParentNode = defaultRoot(),\n options: HydrateOptions = {},\n): void {\n ensureStyles();\n const client = options.client ?? createCodePlayFromPayloads(root);\n for (const element of queryWidgets(root)) {\n try {\n mountCodePlay(element, { client });\n } catch {\n // One broken widget must not abort the rest of the page.\n }\n }\n}\n\nexport function mountCodePlay(element: Element, options: { client?: CodePlayClient } = {}): void {\n if (!(element instanceof HTMLElement) \|\| element.dataset.oxCodePlayMounted === \"true\") {\n return;\n }\n const payload = readPlayPayload(element.getAttribute(\"data-ox-code-play\") ?? \"\");\n if (!payload \|\| payload.ui === \"headless\") {\n return;\n }\n const client =\n options.client ??\n createCodePlay({\n languages: { [payload.language]: languageEnableFromPayload(payload) },\n endpoints: payload.endpoints,\n });\n const source = element.innerHTML;\n const ui = document.createElement(\"div\");\n ui.innerHTML = renderPlayUi({ payload });\n const widget = ui.firstElementChild;\n if (!widget) {\n return;\n }\n const sourceSlot = widget.querySelector(\".ox-code-play__source\");\n if (sourceSlot) {\n sourceSlot.innerHTML = source;\n }\n element.replaceChildren(widget);\n element.dataset.oxCodePlayMounted = \"true\";\n element.removeAttribute(\"inert\");\n bindWidget(element, payload, client);\n prepareA11y(element);\n}\n\nfunction bindWidget(element: HTMLElement, payload: PlayPayload, client: CodePlayClient): void {\n let current = payload;\n const session = client.createSession({\n language: payload.language,\n code: payload.code,\n config: payload.config,\n project: payload.project,\n });\n const runButton = element.querySelector<HTMLButtonElement>('[data-ox-action=\"run\"]');\n const checkButton = element.querySelector<HTMLButtonElement>('[data-ox-action=\"typecheck\"]');\n const cancelButton = element.querySelector<HTMLButtonElement>('[data-ox-action=\"cancel\"]');\n runButton?.addEventListener(\"click\", () => void run(\"execute\"));\n checkButton?.addEventListener(\"click\", () => void run(\"typecheck\"));\n cancelButton?.addEventListener(\"click\", () => session.cancel());\n element.addEventListener(\"keydown\", (event) => {\n if (event.target instanceof HTMLElement && event.target.matches('[role=\"tab\"]')) {\n handleTabKeydown(element, event);\n }\n });\n element.addEventListener(\"click\", (event) => {\n const target = event.target;\n if (!(target instanceof HTMLElement)) {\n return;\n }\n const panel = target.dataset.oxPanel;\n if (panel) {\n showPanel(element, panel);\n }\n });\n element.addEventListener(\"change\", (event) => {\n const form = (event.target as HTMLElement \| null)?.closest(\"form\");\n if (!form) {\n return;\n }\n session.setConfig(readForm(form));\n current = { ...current, config: session.config };\n });\n\n async function run(action: RunAction): Promise<void> {\n await runPlayAction({\n action: () => (action === \"typecheck\" ? session.typecheck() : session.run()),\n setBusy: (busy) => {\n applyActionBusy(element, busy);\n if (busy) {\n paintRunState(element, runningRunActionState(action));\n }\n },\n onResult: (result) => paintResult(element, current, result, action),\n onError: (error) => {\n paintRunState(element, errorRunActionState(action, error));\n paintResult(element, current, errorResult(errorMessage(error)), action);\n },\n });\n }\n}\n\nfunction paintResult(\n element: HTMLElement,\n _payload: PlayPayload,\n result: RunResult,\n action: RunAction,\n): void {\n paintRunState(element, resultRunActionState(action, result));\n const stdio = element.querySelector('[data-panel=\"stdio\"]');\n if (stdio) {\n stdio.innerHTML = `${renderDiagnosticsHtml(result)}${renderStdioHtml(result.stdio)}`;\n if (result.preview) {\n const frame = document.createElement(\"iframe\");\n frame.setAttribute(\"sandbox\", JS_SANDBOX_FLAGS);\n frame.srcdoc = result.preview.html;\n frame.title = \"Code Play preview\";\n frame.style.width = \"100%\";\n frame.style.minHeight = \"12rem\";\n frame.style.border = \"0\";\n stdio.append(frame);\n }\n }\n const provenance = element.querySelector('[data-panel=\"provenance\"]');\n if (provenance) {\n provenance.innerHTML = renderProvenanceHtml(result.provenance);\n }\n const timing = element.querySelector('[data-panel=\"timing\"]');\n if (timing) {\n timing.innerHTML = renderTimingHtml(result.timing);\n }\n const stderr = element.querySelector('[data-panel=\"stderr\"]');\n if (stderr) {\n stderr.innerHTML = renderStderrHtml(result);\n }\n showPanel(element, resultPanelToShow(result, Boolean(stderr)));\n}\n\nfunction paintRunState(element: HTMLElement, state: RunActionState): void {\n const widget = element.querySelector<HTMLElement>(\".ox-code-play\");\n widget?.setAttribute(\"data-ox-run-state\", state.phase);\n widget?.setAttribute(\"aria-busy\", state.phase === \"running\" ? \"true\" : \"false\");\n const status = element.querySelector<HTMLElement>(\"[data-ox-status]\");\n if (status) {\n status.textContent = renderRunStatusText(state);\n }\n}\n\nexport function resultPanelToShow(result: RunResult, hasStderrPanel: boolean): \"stderr\" \| \"stdio\" {\n if (!hasStderrPanel) {\n return \"stdio\";\n }\n const hasErrorDiagnostics = result.diagnostics.some(\n (diagnostic) => diagnostic.severity === \"error\",\n );\n if (hasErrorDiagnostics \|\| (result.status !== \"ok\" && Boolean(result.stderr))) {\n return \"stderr\";\n }\n return \"stdio\";\n}\n\nfunction showPanel(element: HTMLElement, panel: string): void {\n const compact = Boolean(element.querySelector(\".ox-code-play--compact\"));\n for (const tab of element.querySelectorAll(\"[data-ox-panel]\")) {\n const selected = tab.getAttribute(\"data-ox-panel\") === panel;\n tab.setAttribute(\"aria-selected\", selected ? \"true\" : \"false\");\n (tab as HTMLElement).tabIndex = selected ? 0 : -1;\n }\n for (const node of element.querySelectorAll<HTMLElement>(\".ox-code-play__panel\")) {\n const id = node.dataset.panel;\n if (compact && (id === \"stdio\" \|\| id === \"stderr\")) {\n node.hidden = false;\n continue;\n }\n node.hidden = id !== panel;\n }\n}\n\nfunction handleTabKeydown(element: HTMLElement, event: KeyboardEvent): void {\n if (![\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) {\n return;\n }\n const tabs = [...element.querySelectorAll<HTMLElement>(\"[data-ox-panel]\")];\n const current = tabs.indexOf(event.target as HTMLElement);\n if (current === -1) {\n return;\n }\n event.preventDefault();\n const nextIndex =\n event.key === \"Home\"\n ? 0\n : event.key === \"End\"\n ? tabs.length - 1\n : event.key === \"ArrowRight\"\n ? (current + 1) % tabs.length\n : (current - 1 + tabs.length) % tabs.length;\n const next = tabs[nextIndex];\n const panel = next?.dataset.oxPanel;\n if (!next \|\| !panel) {\n return;\n }\n showPanel(element, panel);\n next.focus();\n}\n\nfunction prepareA11y(element: HTMLElement): void {\n const widget = element.querySelector<HTMLElement>(\".ox-code-play\");\n if (!widget) {\n return;\n }\n if (!widget.id) {\n widget.id = `ox-code-play-${++widgetId}`;\n }\n for (const tab of element.querySelectorAll<HTMLElement>(\"[data-ox-panel]\")) {\n const panelName = tab.dataset.oxPanel;\n const panel = panelName\n ? element.querySelector<HTMLElement>(`[data-panel=\"${panelName}\"]`)\n : null;\n if (!panelName \|\| !panel) {\n continue;\n }\n tab.id \|\|= `${widget.id}-${panelName}-tab`;\n panel.id \|\|= `${widget.id}-${panelName}-panel`;\n tab.setAttribute(\"aria-controls\", panel.id);\n panel.setAttribute(\"aria-labelledby\", tab.id);\n panel.removeAttribute(\"aria-label\");\n }\n}\n\nfunction readForm(form: HTMLFormElement): Record<string, unknown> {\n const data = new FormData(form);\n const config: Record<string, unknown> = {};\n for (const [key, value] of data.entries()) {\n config[key] = value === \"on\" ? true : value;\n }\n for (const input of form.querySelectorAll<HTMLInputElement>('input[type=\"checkbox\"]')) {\n config[input.name] = input.checked;\n }\n return config;\n}\n\nfunction createCodePlayFromPayloads(root: ParentNode) {\n const languages: Record<string, LanguageEnable> = {};\n let endpoints;\n for (const element of queryWidgets(root)) {\n try {\n const payload = decodePayload(element.getAttribute(\"data-ox-code-play\") ?? \"\");\n languages[payload.language] = languageEnableFromPayload(payload);\n endpoints = payload.endpoints ?? endpoints;\n } catch {\n // Ignore malformed widgets so one bad payload cannot block the page.\n }\n }\n return createCodePlay({ languages, endpoints });\n}\n\nfunction languageEnableFromPayload(payload: PlayPayload): LanguageEnableOptions {\n const enable: LanguageEnableOptions = {\n execute: payload.capabilities.execute,\n typecheck: payload.capabilities.typecheck,\n config: payload.config,\n };\n if (payload.endpoint) {\n enable.endpoint = payload.endpoint;\n }\n return enable;\n}\n\nfunction queryWidgets(root: ParentNode): HTMLElement[] {\n return [...root.querySelectorAll<HTMLElement>(\"[data-ox-code-play]\")];\n}\n\nfunction ensureStyles(): void {\n if (typeof document === \"undefined\" \|\| document.getElementById(STYLE_ID)) {\n return;\n }\n const style = document.createElement(\"style\");\n style.id = STYLE_ID;\n style.textContent = CODE_PLAY_STYLES;\n document.head.append(style);\n}\n\nfunction defaultRoot(): ParentNode {\n if (typeof document === \"undefined\") {\n throw new Error(\"hydrateCodePlay() needs a DOM root.\");\n }\n return document;\n}\n\nexport { encodePayload, decodePayload };\n"],"mappings":";;;AAIA,SAAgB,gBAAgB,SAA0C;CACxE,IAAI;EACF,OAAO,cAAc,OAAO;CAC9B,QAAQ;EACN;CACF;AACF;AAEA,eAAsB,cAAc,OAKlB;CAChB,MAAM,QAAQ,IAAI;CAClB,IAAI;EACF,MAAM,SAAS,MAAM,MAAM,OAAO,CAAC;CACrC,SAAS,OAAO;EACd,MAAM,QAAQ,KAAK;CACrB,UAAU;EACR,MAAM,QAAQ,KAAK;CACrB;AACF;AAEA,SAAgB,qBAAqC;CACnD,OAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAgB,sBAAsB,QAAmB,cAAc,KAAK,IAAI,GAAmB;CACjG,OAAO;EAAE,OAAO;EAAW;EAAQ;CAAY;AACjD;AAEA,SAAgB,qBACd,QACA,QACA,eAAe,KAAK,IAAI,GACR;CAOhB,OAAO;EACL,OANA,OAAO,WAAW,YACd,YACA,OAAO,WAAW,QAAQ,OAAO,WAAW,cAC1C,WACA;EAGN;EACA;EACA,SAAS,OAAO,YAAY,EAAE,EAAE;EAChC;CACF;AACF;AAEA,SAAgB,oBACd,QACA,OACA,eAAe,KAAK,IAAI,GACR;CAChB,OAAO;EACL,OAAO;EACP;EACA,SAAS,aAAa,KAAK;EAC3B;CACF;AACF;;;ACnEA,MAAa,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACIhC,SAAgB,gBAAgB,QAA8B;CAC5D,IAAI,OAAO,WAAW,GACpB,OAAO;CAQT,OAAO,+CANO,OACX,KAAK,UAAU;EACd,MAAM,OAAO,MAAM,YAAY,QAAQ,CAAC;EACxC,OAAO,kEAAkE,MAAM,OAAO,2CAA2C,WAAW,MAAM,MAAM,EAAE,IAAI,WAAW,IAAI,EAAE,kDAAkD,WAAW,MAAM,IAAI,EAAE;CAC1P,CAAC,CAAC,CACD,KAAK,EACkD,EAAE;AAC9D;;AAGA,SAAgB,iBAAiB,QAAuC;CACtE,MAAM,SAAS,aAAa,QAAQ,SAAS,CAAC,GAAG,QAAQ;CACzD,MAAM,eAAe,QAAQ,eAAe,CAAC,EAAA,CAAG,QAC7C,eAAe,WAAW,aAAa,WAAW,WAAW,aAAa,SAC7E;CACA,IAAI,OAAO,WAAW,KAAK,YAAY,WAAW,GAChD,OAAO;CAET,MAAM,SAAS,OAAO,WAAW,IAAI,KAAK,gBAAgB,MAAM;CAChE,IAAI,YAAY,WAAW,GACzB,OAAO;CAUT,OAAO,GAAG,OAAO,kCARH,YACX,KAAK,eAAe;EACnB,MAAM,QAAQ,WAAW,OACrB,IAAI,WAAW,OAAO,WAAW,SAAS,IAAI,WAAW,WAAW,OACpE;EACJ,OAAO,qDAAqD,WAAW,SAAS,IAAI,WAAW,WAAW,QAAQ,IAAI,WAAW,KAAK,EAAE,GAAG,WAAW,WAAW,OAAO,EAAE;CAC5K,CAAC,CAAC,CACD,KAAK,EAC+C,EAAE;AAC3D;AAEA,SAAgB,iBAAiB,QAAuB,QAAyC;CAC/F,IAAI,OAAO,WAAW,GACpB,OAAO;CAWT,OAAO,sCATQ,OACZ,KAAK,UAAU;EACd,MAAM,QAAQ,OAAO,MAAM,QAAQ,MAAM,WAAW;EACpD,MAAM,QAAQ,4CAA4C,WAAW,MAAM,KAAK,EAAE,SAAS,YAAY,OAAO,KAAK,EAAE;EACrH,OAAO,MAAM,cACT,GAAG,MAAM,sCAAsC,WAAW,MAAM,WAAW,EAAE,QAC7E;CACN,CAAC,CAAC,CACD,KAAK,EAC0C,EAAE;AACtD;AAEA,SAAgB,qBAAqB,YAA4C;CAC/E,IAAI,CAAC,YAAY,WAAW,CAAC,YAAY,SACvC,OAAO;CAET,OAAO,wCAAwC,eAAe,YAAY,WAAW,OAAO,IAAI,eAAe,YAAY,WAAW,OAAO,EAAE;AACjJ;AAEA,SAAgB,iBAAiB,QAA0C;CACzE,IAAI,CAAC,UAAU,OAAO,OAAO,WAAW,GACtC,OAAO;CAET,MAAM,OAAO,OAAO,OACjB,KAAK,UAAU;EACd,MAAM,QAAQ,OAAO,UAAU,IAAI,KAAK,IAAI,GAAI,MAAM,aAAa,OAAO,UAAW,GAAG,IAAI;EAC5F,OAAO,gFAAgF,WAAW,MAAM,KAAK,EAAE,eAAe,MAAM,WAAW,QAAQ,CAAC,EAAE,mEAAmE,MAAM,QAAQ,CAAC,EAAE;CAChP,CAAC,CAAC,CACD,KAAK,EAAE;CACV,OAAO,iFAAiF,OAAO,QAAQ,QAAQ,CAAC,EAAE,QAAQ,KAAK;AACjI;AAEA,SAAgB,sBAAsB,QAAuC;CAC3E,IAAI,CAAC,QAAQ,YAAY,QACvB,OAAO;CAUT,OAAO,mCARO,OAAO,YAClB,KAAK,eAAe;EACnB,MAAM,QAAQ,WAAW,OACrB,IAAI,WAAW,OAAO,WAAW,SAAS,IAAI,WAAW,WAAW,OACpE;EACJ,OAAO,qDAAqD,WAAW,SAAS,IAAI,WAAW,WAAW,QAAQ,IAAI,WAAW,KAAK,EAAE,GAAG,WAAW,WAAW,OAAO,EAAE;CAC5K,CAAC,CAAC,CACD,KAAK,EACsC,EAAE;AAClD;AAEA,SAAS,YAAY,OAAoB,OAAwB;CAC/D,MAAM,OAAO,WAAW,MAAM,GAAG;CACjC,IAAI,MAAM,SAAS,WACjB,OAAO,gCAAgC,KAAK,IAAI,QAAQ,YAAY,GAAG;CAEzE,IAAI,MAAM,SAAS,UAOjB,OAAO,iBAAiB,KAAK,KANZ,MAAM,WAAW,CAAC,EAAA,CAChC,KACE,WACC,kBAAkB,WAAW,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,MAAM,OAAO,QAAQ,aAAa,GAAG,GAAG,WAAW,OAAO,KAAK,EAAE,UAChI,CAAC,CACA,KAAK,EAC+B,EAAE;CAG3C,OAAO,gBADW,MAAM,SAAS,WAAW,WAAW,OACtB,UAAU,KAAK,WAAW,WAAW,OAAO,KAAK,CAAC,EAAE;AACvF;AAEA,SAAS,eAAe,OAAe,UAAyC;CAC9E,IAAI,CAAC,UACH,OAAO;CAET,MAAM,UAAU;EAAC,SAAS;EAAS,SAAS;EAAS,SAAS;EAAS,SAAS;CAAM,CAAC,CACpF,OAAO,OAAO,CAAC,CACf,KAAK,KAAK;CACb,OAAO,YAAY,WAAW,KAAK,EAAE,mBAAmB,WAAW,SAAS,IAAI,EAAE,WAAW,UAAU,UAAU,WAAW,OAAO,EAAE,WAAW,GAAG;AACrJ;;;AC1FA,SAAgB,aAAa,OAAwB;CACnD,MAAM,aAAa,gBAAgB,MAAM,QAAQ,QAAQ;CACzD,MAAM,SAAyB,MAAM,QAAQ,OAAO,aAAa,aAAa,MAAM,QAAQ;CAC5F,IAAI,WAAW,YACb,OAAO;CAET,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,eAAe,MAAM,QAAQ,aAAa;CAChD,MAAM,WACJ,MAAM,aACL,MAAM,OAAO;EAAE,OAAO;EAAoB,QAAQ;CAAmB,IAAI,mBAAmB;CAC/F,MAAM,SAAS,QAAQ,MAAM,IAAI,KAAK,SAAS,UAAU;CACzD,MAAM,OAAO,WAAW,OAAO,KAAK;CACpC,MAAM,UAAU,MAAM,QAAQ;CAC9B,MAAM,QAAQ,YAAY,MAAM,SAAS,UAAU;CACnD,OAAO,0CAA0C,OAAO,4CAA4C,SAAS,MAAM,8BAA8B,WAAW,KAAK,EAAE,eAAe,SAAS,SAAS,QAAQ;;2EAEnI,WAAW,YAAY,QAAQ,MAAM,QAAQ,QAAQ,EAAE,SAAS,MAAM,QAAQ,QAAQ,qCAAqC,WAAW,MAAM,QAAQ,KAAK,EAAE,WAAW,GAAG;yFAC3J,oBAAoB,QAAQ,EAAE;6DAC1D,WAAW,OAAO,OAAO,EAAE,GAAG,kBAAkB,OAAO,QAAQ,MAAM,IAAI,CAAC,EAAE;MACnI,eAAe,gEAAgE,WAAW,aAAa,OAAO,EAAE,GAAG,kBAAkB,aAAa,QAAQ,MAAM,IAAI,CAAC,EAAE,uBAAuB,GAAG;gEACvI,WAAW,UAAU,OAAO,EAAE,GAAG,kBAAkB,UAAU,QAAQ,MAAM,IAAI,CAAC,EAAE;;IAE9I,mBAAmB,MAAM,SAAS,UAAU,EAAE;;IAE9C,KAAK;IACL,QAAQ,QAAQ,YAAY,SAAS,SAAS,OAAO,QAAQ,GAAG,sBAAsB,MAAM,MAAM,IAAI,gBAAgB,MAAM,QAAQ,SAAS,CAAC,CAAC,GAAG,IAAI,GAAG;IACzJ,QAAQ,SAAS,YAAY,UAAU,UAAU,OAAO,QAAQ,iBAAiB,MAAM,MAAM,CAAC,IAAI,GAAG;IACrG,QAAQ,SAAS,YAAY,UAAU,UAAU,OAAO,QAAQ,iBAAiB,YAAY,gBAAgB,CAAC,GAAG,MAAM,QAAQ,MAAM,CAAC,IAAI,GAAG;IAC7I,QAAQ,aAAa,YAAY,cAAc,cAAc,OAAO,QAAQ,qBAAqB,MAAM,QAAQ,UAAU,CAAC,IAAI,GAAG;IACjI,QAAQ,SAAS,YAAY,UAAU,UAAU,OAAO,QAAQ,iBAAiB,MAAM,QAAQ,MAAM,CAAC,IAAI,GAAG;;AAEjH;AAEA,SAAgB,oBAAoB,OAA+B;CACjE,IAAI,MAAM,UAAU,WAClB,OAAO,MAAM,WAAW,cAAc,iBAAiB;CAEzD,IAAI,MAAM,UAAU,WAClB,OAAO;CAET,IAAI,MAAM,UAAU,SAAS;EAC3B,IAAI,MAAM,QAAQ,WAAW,WAC3B,OAAO;EAET,IAAI,MAAM,QAAQ,WAAW,eAC3B,OAAO;EAET,OAAO;CACT;CACA,IAAI,MAAM,UAAU,UAAU;EAC5B,IAAI,MAAM,QAAQ,WAAW,aAC3B,OAAO;EAET,OAAO;CACT;CACA,OAAO;AACT;AAEA,SAAS,mBACP,SACA,YACQ;CACR,MAAM,UAAU,aAAa,SAAS,UAAU;CAChD,MAAM,WAAW,cAAc,SAAS,UAAU;CAClD,MAAM,SAAS,QAAQ,aAAa,YAAY,oBAAoB;CAMpE,OAAO,qEALO;EACZ,YAAY,WAAW,QAAQ,OAAO,QAAQ,IAAI;EAClD,YAAY,YAAY,SAAS,OAAO,SAAS,IAAI;EACrD,YAAY,UAAU,QAAQ,QAAQ,aAAa,YAAY,OAAO,OAAO;CAC/E,CAAC,CAAC,KAAK,EACyE,IAAI,yBAAyB,QAAQ,OAAO,EAAE;AAChI;AAEA,SAAS,aACP,SACA,YACkD;CAClD,QAAQ,YAAY,SAApB;EACE,KAAK,cACH,OAAO;GAAE,OAAO;GAAmB,MAAM;EAAK;EAChD,KAAK,cACH,OAAO;GAAE,OAAO;GAAsB,MAAM;EAAK;EACnD,KAAK,aACH,OAAO;GAAE,OAAO,GAAG,WAAW,KAAK;GAAkB,MAAM;EAAK;EAClE,KAAK,mBACH,OAAO;GAAE,OAAO;GAAmB,MAAM,QAAQ,WAAW,OAAO,OAAO;EAAO;EACnF,KAAK,iBACH,OAAO;GAAE,OAAO;GAAiB,MAAM,QAAQ,WAAW,KAAK,OAAO;EAAO;EAC/E,KAAK,UACH,OAAO,QAAQ,WACX;GAAE,OAAO;GAAqB,MAAM;EAAK,IACzC;GAAE,OAAO;GAAoB,MAAM;EAAO;EAChD,SACE,OAAO;GAAE,OAAO,YAAY,QAAQ,QAAQ;GAAU,MAAM;EAAQ;CACxE;AACF;AAEA,SAAS,cACP,SACA,YACkD;CAClD,IAAI,CAAC,QAAQ,aAAa,SACxB,OAAO;EAAE,OAAO;EAAY,MAAM;CAAO;CAE3C,IAAI,YAAY,YAAY,YAAY,CAAC,QAAQ,UAC/C,OAAO;EAAE,OAAO;EAAsB,MAAM;CAAO;CAErD,OAAO;EAAE,OAAO;EAAa,MAAM;CAAK;AAC1C;AAEA,SAAS,YAAY,OAAe,OAAe,MAAuC;CACxF,OAAO,uEAAuE,KAAK,UAAU,WAAW,KAAK,EAAE,iBAAiB,WAAW,KAAK,EAAE;AACpJ;AAEA,SAAgB,yBAAyB,SAA6C;CACpF,IAAI,CAAC,SACH,OAAO;CAET,MAAM,YAAY,GAAG,QAAQ,MAAM,OAAO,GAAG,QAAQ,MAAM,WAAW,IAAI,SAAS;CACnF,MAAM,SACJ,QAAQ,WAAW,YACf,oBACA,QAAQ,WAAW,SACjB,sBACA;CACR,MAAM,MAAM,QAAQ,WAAW,QAAQ;CACvC,MAAM,WAAW,QAAQ,UAAU,SAC/B,sDAAsD,gBAAgB,QAAQ,SAAS,KAAK,IAAI,CAAC,EAAE,qBACnG;CACJ,MAAM,OAAO,MACT,+CAA+C,gBAAgB,GAAG,EAAE,wDACpE;CACJ,OAAO,iEAAiE,gBAAgB,QAAQ,QAAQ,EAAE;qDACvD,WAAW,QAAQ,KAAK,EAAE,iBAAiB,WAAW,MAAM,EAAE;MAC7G,QAAQ,QAAQ,uEAAuE,WAAW,QAAQ,KAAK,EAAE,oBAAoB,GAAG;gDAC9F,WAAW,SAAS,EAAE;MAChE,WAAW,KAAK;;AAEtB;AAEA,SAAS,WAAW,OAAgB,OAAuB;CACzD,IAAI,MAAM,QAAQ,OAAO,WACvB,OAAO;CAET,MAAM,UAAU,MAAM,QAAQ;CAC9B,MAAM,UAAU;EACd,QAAQ,QAAQ,IAAI,SAAS,SAAS,KAAK,IAAI;EAC/C,QAAQ,SAAS,IAAI,UAAU,UAAU,KAAK,IAAI;EAClD,QAAQ,SAAS,IAAI,UAAU,UAAU,KAAK,IAAI;EAClD,QAAQ,aAAa,IAAI,cAAc,cAAc,KAAK,IAAI;EAC9D,QAAQ,SAAS,IAAI,UAAU,UAAU,KAAK,IAAI;CACpD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,EAAE;CACV,OAAO,UAAU,kDAAkD,QAAQ,UAAU;AACvF;AAEA,SAAS,IAAI,IAAY,OAAe,UAA0B;CAChE,MAAM,aAAa,aAAa;CAChC,OAAO,mDAAmD,GAAG,mBAAmB,aAAa,SAAS,QAAQ,cAAc,aAAa,MAAM,KAAK,IAAI,MAAM;AAChK;AAEA,SAAgB,kBAAkB,QAAgB,MAAuB;CACvE,MAAM,QAAQ,gBAAgB,QAAQ,IAAI;CAC1C,OAAO,GAAG,MAAM,WAAW,qCAAmC,KAAK,MAAM,SAAS,YAAY;AAChG;AAEA,SAAgB,gBACd,QACA,MACwC;CACxC,IAAI,WAAW,UACb,OAAO;EAAE,UAAU,CAAC;EAAM,QAAQ,CAAC;CAAK;CAE1C,OAAO;EAAE,UAAU;EAAM,QAAQ;CAAM;AACzC;AAEA,SAAgB,gBAAgB,MAAkB,MAAqB;CACrE,KAAK,MAAM,UAAU,KAAK,iBAAoC,wBAAwB,GAAG;EACvF,MAAM,QAAQ,gBAAgB,OAAO,QAAQ,YAAY,IAAI,IAAI;EACjE,OAAO,WAAW,MAAM;EACxB,OAAO,SAAS,MAAM;EACtB,OAAO,aAAa,iBAAiB,MAAM,WAAW,SAAS,OAAO;CACxE;CACA,KAAK,MAAM,UAAU,iBAAiB,IAAI,GACxC,OAAO,aAAa,aAAa,OAAO,SAAS,OAAO;AAE5D;AAEA,SAAS,YACP,IACA,OACA,SACA,QACA,MACQ;CACR,OAAO,6EAA6E,WAAW,KAAK,EAAE,gBAAgB,GAAG,GAAG,OAAO,SAAS,IAAI,MAAM,EAAE,GAAG,KAAK;AAClK;AAEA,SAAS,OAAO,SAAiB,IAAY,QAAgC;CAC3E,IAAI,WAAW,cAAc,OAAO,WAAW,OAAO,WACpD,OAAO;CAET,OAAO,YAAY,KAAK,KAAK;AAC/B;AAEA,SAAS,YAAY,SAAsB,YAAoD;CAC7F,MAAM,WAAW,YAAY,QAAQ,QAAQ;CAC7C,OAAO,QAAQ,QAAQ,GAAG,QAAQ,MAAM,IAAI,SAAS,KAAK,GAAG,SAAS;AACxE;AAEA,SAAS,iBAAiB,MAAiC;CACzD,MAAM,UAAU,CAAC,GAAG,KAAK,iBAA8B,eAAe,CAAC;CACvE,IACE,OAAO,gBAAgB,eACvB,gBAAgB,eAChB,KAAK,QAAQ,eAAe,GAE5B,QAAQ,QAAQ,IAAI;CAEtB,OAAO;AACT;;;ACxNA,MAAM,WAAW;AACjB,IAAI,WAAW;AAEf,SAAgB,gBACd,OAAmB,YAAY,GAC/B,UAA0B,CAAC,GACrB;CACN,aAAa;CACb,MAAM,SAAS,QAAQ,UAAU,2BAA2B,IAAI;CAChE,KAAK,MAAM,WAAW,aAAa,IAAI,GACrC,IAAI;EACF,cAAc,SAAS,EAAE,OAAO,CAAC;CACnC,QAAQ,CAER;AAEJ;AAEA,SAAgB,cAAc,SAAkB,UAAuC,CAAC,GAAS;CAC/F,IAAI,EAAE,mBAAmB,gBAAgB,QAAQ,QAAQ,sBAAsB,QAC7E;CAEF,MAAM,UAAU,gBAAgB,QAAQ,aAAa,mBAAmB,KAAK,EAAE;CAC/E,IAAI,CAAC,WAAW,QAAQ,OAAO,YAC7B;CAEF,MAAM,SACJ,QAAQ,UACR,eAAe;EACb,WAAW,GAAG,QAAQ,WAAW,0BAA0B,OAAO,EAAE;EACpE,WAAW,QAAQ;CACrB,CAAC;CACH,MAAM,SAAS,QAAQ;CACvB,MAAM,KAAK,SAAS,cAAc,KAAK;CACvC,GAAG,YAAY,aAAa,EAAE,QAAQ,CAAC;CACvC,MAAM,SAAS,GAAG;CAClB,IAAI,CAAC,QACH;CAEF,MAAM,aAAa,OAAO,cAAc,uBAAuB;CAC/D,IAAI,YACF,WAAW,YAAY;CAEzB,QAAQ,gBAAgB,MAAM;CAC9B,QAAQ,QAAQ,oBAAoB;CACpC,QAAQ,gBAAgB,OAAO;CAC/B,WAAW,SAAS,SAAS,MAAM;CACnC,YAAY,OAAO;AACrB;AAEA,SAAS,WAAW,SAAsB,SAAsB,QAA8B;CAC5F,IAAI,UAAU;CACd,MAAM,UAAU,OAAO,cAAc;EACnC,UAAU,QAAQ;EAClB,MAAM,QAAQ;EACd,QAAQ,QAAQ;EAChB,SAAS,QAAQ;CACnB,CAAC;CACD,MAAM,YAAY,QAAQ,cAAiC,0BAAwB;CACnF,MAAM,cAAc,QAAQ,cAAiC,gCAA8B;CAC3F,MAAM,eAAe,QAAQ,cAAiC,6BAA2B;CACzF,WAAW,iBAAiB,eAAe,KAAK,IAAI,SAAS,CAAC;CAC9D,aAAa,iBAAiB,eAAe,KAAK,IAAI,WAAW,CAAC;CAClE,cAAc,iBAAiB,eAAe,QAAQ,OAAO,CAAC;CAC9D,QAAQ,iBAAiB,YAAY,UAAU;EAC7C,IAAI,MAAM,kBAAkB,eAAe,MAAM,OAAO,QAAQ,gBAAc,GAC5E,iBAAiB,SAAS,KAAK;CAEnC,CAAC;CACD,QAAQ,iBAAiB,UAAU,UAAU;EAC3C,MAAM,SAAS,MAAM;EACrB,IAAI,EAAE,kBAAkB,cACtB;EAEF,MAAM,QAAQ,OAAO,QAAQ;EAC7B,IAAI,OACF,UAAU,SAAS,KAAK;CAE5B,CAAC;CACD,QAAQ,iBAAiB,WAAW,UAAU;EAC5C,MAAM,OAAQ,MAAM,QAA+B,QAAQ,MAAM;EACjE,IAAI,CAAC,MACH;EAEF,QAAQ,UAAU,SAAS,IAAI,CAAC;EAChC,UAAU;GAAE,GAAG;GAAS,QAAQ,QAAQ;EAAO;CACjD,CAAC;CAED,eAAe,IAAI,QAAkC;EACnD,MAAM,cAAc;GAClB,cAAe,WAAW,cAAc,QAAQ,UAAU,IAAI,QAAQ,IAAI;GAC1E,UAAU,SAAS;IACjB,gBAAgB,SAAS,IAAI;IAC7B,IAAI,MACF,cAAc,SAAS,sBAAsB,MAAM,CAAC;GAExD;GACA,WAAW,WAAW,YAAY,SAAS,SAAS,QAAQ,MAAM;GAClE,UAAU,UAAU;IAClB,cAAc,SAAS,oBAAoB,QAAQ,KAAK,CAAC;IACzD,YAAY,SAAS,SAAS,YAAY,aAAa,KAAK,CAAC,GAAG,MAAM;GACxE;EACF,CAAC;CACH;AACF;AAEA,SAAS,YACP,SACA,UACA,QACA,QACM;CACN,cAAc,SAAS,qBAAqB,QAAQ,MAAM,CAAC;CAC3D,MAAM,QAAQ,QAAQ,cAAc,wBAAsB;CAC1D,IAAI,OAAO;EACT,MAAM,YAAY,GAAG,sBAAsB,MAAM,IAAI,gBAAgB,OAAO,KAAK;EACjF,IAAI,OAAO,SAAS;GAClB,MAAM,QAAQ,SAAS,cAAc,QAAQ;GAC7C,MAAM,aAAa,WAAW,gBAAgB;GAC9C,MAAM,SAAS,OAAO,QAAQ;GAC9B,MAAM,QAAQ;GACd,MAAM,MAAM,QAAQ;GACpB,MAAM,MAAM,YAAY;GACxB,MAAM,MAAM,SAAS;GACrB,MAAM,OAAO,KAAK;EACpB;CACF;CACA,MAAM,aAAa,QAAQ,cAAc,6BAA2B;CACpE,IAAI,YACF,WAAW,YAAY,qBAAqB,OAAO,UAAU;CAE/D,MAAM,SAAS,QAAQ,cAAc,yBAAuB;CAC5D,IAAI,QACF,OAAO,YAAY,iBAAiB,OAAO,MAAM;CAEnD,MAAM,SAAS,QAAQ,cAAc,yBAAuB;CAC5D,IAAI,QACF,OAAO,YAAY,iBAAiB,MAAM;CAE5C,UAAU,SAAS,kBAAkB,QAAQ,QAAQ,MAAM,CAAC,CAAC;AAC/D;AAEA,SAAS,cAAc,SAAsB,OAA6B;CACxE,MAAM,SAAS,QAAQ,cAA2B,eAAe;CACjE,QAAQ,aAAa,qBAAqB,MAAM,KAAK;CACrD,QAAQ,aAAa,aAAa,MAAM,UAAU,YAAY,SAAS,OAAO;CAC9E,MAAM,SAAS,QAAQ,cAA2B,kBAAkB;CACpE,IAAI,QACF,OAAO,cAAc,oBAAoB,KAAK;AAElD;AAEA,SAAgB,kBAAkB,QAAmB,gBAA6C;CAChG,IAAI,CAAC,gBACH,OAAO;CAKT,IAH4B,OAAO,YAAY,MAC5C,eAAe,WAAW,aAAa,OAEpB,KAAM,OAAO,WAAW,QAAQ,QAAQ,OAAO,MAAM,GACzE,OAAO;CAET,OAAO;AACT;AAEA,SAAS,UAAU,SAAsB,OAAqB;CAC5D,MAAM,UAAU,QAAQ,QAAQ,cAAc,wBAAwB,CAAC;CACvE,KAAK,MAAM,OAAO,QAAQ,iBAAiB,iBAAiB,GAAG;EAC7D,MAAM,WAAW,IAAI,aAAa,eAAe,MAAM;EACvD,IAAI,aAAa,iBAAiB,WAAW,SAAS,OAAO;EAC7D,IAAqB,WAAW,WAAW,IAAI;CACjD;CACA,KAAK,MAAM,QAAQ,QAAQ,iBAA8B,sBAAsB,GAAG;EAChF,MAAM,KAAK,KAAK,QAAQ;EACxB,IAAI,YAAY,OAAO,WAAW,OAAO,WAAW;GAClD,KAAK,SAAS;GACd;EACF;EACA,KAAK,SAAS,OAAO;CACvB;AACF;AAEA,SAAS,iBAAiB,SAAsB,OAA4B;CAC1E,IAAI,CAAC;EAAC;EAAa;EAAc;EAAQ;CAAK,CAAC,CAAC,SAAS,MAAM,GAAG,GAChE;CAEF,MAAM,OAAO,CAAC,GAAG,QAAQ,iBAA8B,iBAAiB,CAAC;CACzE,MAAM,UAAU,KAAK,QAAQ,MAAM,MAAqB;CACxD,IAAI,YAAY,IACd;CAEF,MAAM,eAAe;CASrB,MAAM,OAAO,KAPX,MAAM,QAAQ,SACV,IACA,MAAM,QAAQ,QACZ,KAAK,SAAS,IACd,MAAM,QAAQ,gBACX,UAAU,KAAK,KAAK,UACpB,UAAU,IAAI,KAAK,UAAU,KAAK;CAE7C,MAAM,QAAQ,MAAM,QAAQ;CAC5B,IAAI,CAAC,QAAQ,CAAC,OACZ;CAEF,UAAU,SAAS,KAAK;CACxB,KAAK,MAAM;AACb;AAEA,SAAS,YAAY,SAA4B;CAC/C,MAAM,SAAS,QAAQ,cAA2B,eAAe;CACjE,IAAI,CAAC,QACH;CAEF,IAAI,CAAC,OAAO,IACV,OAAO,KAAK,gBAAgB,EAAE;CAEhC,KAAK,MAAM,OAAO,QAAQ,iBAA8B,iBAAiB,GAAG;EAC1E,MAAM,YAAY,IAAI,QAAQ;EAC9B,MAAM,QAAQ,YACV,QAAQ,cAA2B,gBAAgB,UAAU,GAAG,IAChE;EACJ,IAAI,CAAC,aAAa,CAAC,OACjB;EAEF,IAAI,OAAO,GAAG,OAAO,GAAG,GAAG,UAAU;EACrC,MAAM,OAAO,GAAG,OAAO,GAAG,GAAG,UAAU;EACvC,IAAI,aAAa,iBAAiB,MAAM,EAAE;EAC1C,MAAM,aAAa,mBAAmB,IAAI,EAAE;EAC5C,MAAM,gBAAgB,YAAY;CACpC;AACF;AAEA,SAAS,SAAS,MAAgD;CAChE,MAAM,OAAO,IAAI,SAAS,IAAI;CAC9B,MAAM,SAAkC,CAAC;CACzC,KAAK,MAAM,CAAC,KAAK,UAAU,KAAK,QAAQ,GACtC,OAAO,OAAO,UAAU,OAAO,OAAO;CAExC,KAAK,MAAM,SAAS,KAAK,iBAAmC,0BAAwB,GAClF,OAAO,MAAM,QAAQ,MAAM;CAE7B,OAAO;AACT;AAEA,SAAS,2BAA2B,MAAkB;CACpD,MAAM,YAA4C,CAAC;CACnD,IAAI;CACJ,KAAK,MAAM,WAAW,aAAa,IAAI,GACrC,IAAI;EACF,MAAM,UAAU,cAAc,QAAQ,aAAa,mBAAmB,KAAK,EAAE;EAC7E,UAAU,QAAQ,YAAY,0BAA0B,OAAO;EAC/D,YAAY,QAAQ,aAAa;CACnC,QAAQ,CAER;CAEF,OAAO,eAAe;EAAE;EAAW;CAAU,CAAC;AAChD;AAEA,SAAS,0BAA0B,SAA6C;CAC9E,MAAM,SAAgC;EACpC,SAAS,QAAQ,aAAa;EAC9B,WAAW,QAAQ,aAAa;EAChC,QAAQ,QAAQ;CAClB;CACA,IAAI,QAAQ,UACV,OAAO,WAAW,QAAQ;CAE5B,OAAO;AACT;AAEA,SAAS,aAAa,MAAiC;CACrD,OAAO,CAAC,GAAG,KAAK,iBAA8B,qBAAqB,CAAC;AACtE;AAEA,SAAS,eAAqB;CAC5B,IAAI,OAAO,aAAa,eAAe,SAAS,eAAe,QAAQ,GACrE;CAEF,MAAM,QAAQ,SAAS,cAAc,OAAO;CAC5C,MAAM,KAAK;CACX,MAAM,cAAc;CACpB,SAAS,KAAK,OAAO,KAAK;AAC5B;AAEA,SAAS,cAA0B;CACjC,IAAI,OAAO,aAAa,aACtB,MAAM,IAAI,MAAM,qCAAqC;CAEvD,OAAO;AACT"}
1	+ {"version":3,"file":"hydrate2.mjs","names":[],"sources":["../src/hydrate-action.ts","../src/styles.ts","../src/viewers.ts","../src/ui.ts","../src/hydrate.ts"],"sourcesContent":["import { decodePayload } from \"./payload\";\nimport { errorMessage } from \"./result\";\nimport type { PlayPayload, RunAction, RunActionState, RunResult } from \"./types\";\n\nexport function readPlayPayload(encoded: string): PlayPayload \| undefined {\n try {\n return decodePayload(encoded);\n } catch {\n return undefined;\n }\n}\n\nexport async function runPlayAction(input: {\n action: () => Promise<RunResult>;\n setBusy: (busy: boolean) => void;\n onResult: (result: RunResult) => void;\n onError: (error: unknown) => void;\n}): Promise<void> {\n input.setBusy(true);\n try {\n input.onResult(await input.action());\n } catch (error) {\n input.onError(error);\n } finally {\n input.setBusy(false);\n }\n}\n\nexport function idleRunActionState(): RunActionState {\n return { phase: \"idle\" };\n}\n\nexport function runningRunActionState(action: RunAction, startedAtMs = Date.now()): RunActionState {\n return { phase: \"running\", action, startedAtMs };\n}\n\nexport function resultRunActionState(\n action: RunAction,\n result: RunResult,\n finishedAtMs = Date.now(),\n): RunActionState {\n const phase =\n result.status === \"offline\"\n ? \"offline\"\n : result.status === \"ok\" \|\| result.status === \"cancelled\"\n ? \"result\"\n : \"error\";\n return {\n phase,\n action,\n result,\n message: result.diagnostics[0]?.message,\n finishedAtMs,\n };\n}\n\nexport function errorRunActionState(\n action: RunAction,\n error: unknown,\n finishedAtMs = Date.now(),\n): RunActionState {\n return {\n phase: \"error\",\n action,\n message: errorMessage(error),\n finishedAtMs,\n };\n}\n","export const CODE_PLAY_STYLES = `\n.ox-code-play {\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));\n border-radius: 6px;\n background: var(--octc-color-bg, Canvas);\n color: var(--octc-color-text, CanvasText);\n overflow: hidden;\n margin: 1rem 0;\n}\n.ox-code-play__toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: 0.4rem;\n align-items: center;\n padding: 0.45rem 0.6rem;\n border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 12%, transparent));\n background: color-mix(in srgb, var(--octc-color-bg-alt, var(--octc-color-bg, Canvas)) 64%, transparent);\n}\n.ox-code-play__summary {\n display: inline-flex;\n flex: 1 1 12rem;\n min-width: 9rem;\n gap: 0.45rem;\n align-items: baseline;\n}\n.ox-code-play__lang {\n font: 600 0.8rem/1.2 ui-sans-serif, system-ui, sans-serif;\n color: var(--octc-color-text, CanvasText);\n}\n.ox-code-play__title {\n min-width: 0;\n overflow-wrap: anywhere;\n font: 500 0.78rem/1.25 ui-sans-serif, system-ui, sans-serif;\n opacity: 0.72;\n}\n.ox-code-play__status {\n min-width: 4.6rem;\n text-align: center;\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));\n border-radius: 999px;\n padding: 0.12rem 0.45rem;\n font: 650 0.68rem/1.25 ui-sans-serif, system-ui, sans-serif;\n color: var(--octc-color-text, CanvasText);\n background: var(--octc-color-bg, Canvas);\n}\n.ox-code-play[data-ox-run-state=\"running\"] .ox-code-play__status {\n color: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n}\n.ox-code-play[data-ox-run-state=\"error\"] .ox-code-play__status,\n.ox-code-play[data-ox-run-state=\"offline\"] .ox-code-play__status {\n color: var(--octc-danger, #b42318);\n}\n.ox-code-play__toolbar button {\n appearance: none;\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 20%, transparent));\n background: color-mix(in srgb, var(--octc-color-text, CanvasText) 8%, transparent);\n color: var(--octc-color-text, CanvasText);\n border-radius: 6px;\n min-height: 1.9rem;\n padding: 0.18rem 0.62rem;\n font: 600 0.75rem/1.4 ui-sans-serif, system-ui, sans-serif;\n cursor: pointer;\n}\n.ox-code-play__toolbar button:disabled { opacity: 0.55; cursor: progress; }\n.ox-code-play__toolbar button:focus-visible,\n.ox-code-play__tabs button:focus-visible,\n.ox-code-play__field input:focus-visible,\n.ox-code-play__field select:focus-visible,\n.ox-code-play__panel:focus-visible {\n outline: 2px solid var(--octc-color-primary, var(--octc-accent, #4f46e5));\n outline-offset: 2px;\n}\n.ox-code-play__runtime {\n display: flex;\n flex-wrap: wrap;\n gap: 0.4rem 0.7rem;\n align-items: center;\n padding: 0.38rem 0.6rem;\n border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 10%, transparent));\n background: color-mix(in srgb, var(--octc-color-bg-alt, var(--octc-color-bg, Canvas)) 56%, transparent);\n}\n.ox-code-play__runtime-chip {\n display: inline-flex;\n gap: 0.3rem;\n align-items: baseline;\n min-width: 0;\n padding: 0;\n border: 0;\n background: transparent;\n}\n.ox-code-play__runtime-chip span {\n font: 650 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n opacity: 0.62;\n}\n.ox-code-play__runtime-chip strong {\n font: 650 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__runtime-chip--ok strong { color: var(--octc-color-primary, var(--octc-accent, #4f46e5)); }\n.ox-code-play__runtime-chip--warn strong { color: var(--octc-warning, #b54708); }\n.ox-code-play__runtime-chip--muted strong { opacity: 0.72; }\n.ox-code-play__project {\n display: inline-flex;\n flex: 1 1 18rem;\n min-width: min(100%, 16rem);\n gap: 0.45rem;\n align-items: center;\n flex-wrap: wrap;\n margin-left: auto;\n padding: 0.28rem 0.42rem;\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 14%, transparent));\n border-radius: 6px;\n background: var(--octc-color-bg, Canvas);\n}\n.ox-code-play__project-main,\n.ox-code-play__project-entry {\n display: inline-grid;\n gap: 0.1rem;\n min-width: 0;\n}\n.ox-code-play__project-main { flex: 1 1 8.5rem; }\n.ox-code-play__project-entry { flex: 999 1 9rem; }\n.ox-code-play__project-main span,\n.ox-code-play__project-entry span {\n font: 600 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n opacity: 0.62;\n}\n.ox-code-play__project-main strong,\n.ox-code-play__project-entry strong {\n min-width: 0;\n overflow-wrap: anywhere;\n font: 650 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__project-files,\n.ox-code-play__project-warning,\n.ox-code-play__project-link {\n flex: 0 0 auto;\n border-radius: 6px;\n padding: 0.18rem 0.45rem;\n font: 650 0.68rem/1.25 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__project-files {\n background: color-mix(in srgb, var(--octc-color-text, CanvasText) 8%, transparent);\n}\n.ox-code-play__project-warning {\n color: var(--octc-warning, #b54708);\n background: color-mix(in srgb, var(--octc-warning, #b54708) 12%, transparent);\n}\n.ox-code-play__project-link {\n color: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n background: color-mix(in srgb, var(--octc-color-primary, var(--octc-accent, #4f46e5)) 12%, transparent);\n text-decoration: none;\n}\n.ox-code-play__project-link:focus-visible {\n outline: 2px solid var(--octc-color-primary, var(--octc-accent, #4f46e5));\n outline-offset: 2px;\n}\n.ox-code-play .ox-code { margin: 0; }\n.ox-code-play__source pre {\n margin: 0;\n border: 0;\n border-radius: 0;\n padding: 0.75rem 0.8rem;\n}\n.ox-code-play__tabs {\n display: flex;\n gap: 0.15rem;\n padding: 0.35rem 0.55rem 0;\n}\n.ox-code-play__tabs button {\n appearance: none;\n border: 0;\n background: transparent;\n color: var(--octc-color-text, CanvasText);\n padding: 0.28rem 0.48rem;\n border-radius: 5px 5px 0 0;\n font: 600 0.75rem/1.2 ui-sans-serif, system-ui, sans-serif;\n cursor: pointer;\n}\n.ox-code-play__tabs button[aria-selected=\"true\"] {\n background: color-mix(in srgb, var(--octc-color-text, CanvasText) 10%, transparent);\n}\n.ox-code-play__panel { padding: 0.55rem 0.65rem 0.7rem; color: var(--octc-color-text, CanvasText); }\n.ox-code-play__panel pre {\n background: transparent !important;\n color: inherit !important;\n padding: 0 !important;\n margin: 0 !important;\n border: 0 !important;\n border-radius: 0 !important;\n}\n.ox-code-play__empty { margin: 0; opacity: 0.7; font-size: 0.85rem; }\n.ox-code-play__stdio { font: 12px/1.45 ui-monospace, SFMono-Regular, monospace; }\n.ox-code-play__stdio-line { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.55rem; white-space: pre-wrap; }\n.ox-code-play__stdio-line--stderr { color: var(--octc-danger, #b42318); }\n.ox-code-play__stdio-line--stdin { opacity: 0.75; }\n.ox-code-play__stdio-meta { opacity: 0.6; }\n.ox-code-play__config { display: grid; gap: 0.55rem; }\n.ox-code-play__field { display: grid; gap: 0.25rem; font-size: 0.85rem; }\n.ox-code-play__field input, .ox-code-play__field select {\n font: inherit;\n padding: 0.3rem 0.45rem;\n border-radius: 6px;\n border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 18%, transparent));\n background: var(--octc-color-bg, Canvas);\n color: var(--octc-color-text, CanvasText);\n}\n.ox-code-play__provenance { display: grid; gap: 0.6rem; margin: 0; }\n.ox-code-play__provenance dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; }\n.ox-code-play__provenance dd { margin: 0.15rem 0 0; }\n.ox-code-play__phase { margin: 0.45rem 0; }\n.ox-code-play__phase-meta { display: flex; justify-content: space-between; font-size: 0.8rem; }\n.ox-code-play__phase-bar {\n height: 0.35rem;\n margin-top: 0.25rem;\n border-radius: 999px;\n background: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n}\n.ox-code-play__timing-total { margin: 0 0 0.4rem; font-weight: 600; }\n.ox-code-play__diags { margin: 0 0 0.6rem; padding-left: 1.1rem; }\n.ox-code-play__diag--error { color: var(--octc-danger, #b42318); }\n.ox-code-play__diag--warning { color: var(--octc-warning, #b54708); }\n.ox-code-play--compact .ox-code-play__tabs { display: none; }\n.ox-code-play--compact .ox-code-play__panel[data-panel]:not([data-panel=\"stdio\"]):not([data-panel=\"stderr\"]) { display: none; }\n@media (max-width: 640px) {\n .ox-code-play__toolbar {\n align-items: flex-start;\n }\n .ox-code-play__runtime,\n .ox-code-play__tabs,\n .ox-code-play__panel {\n padding-inline: 0.55rem;\n }\n .ox-code-play__stdio-line {\n grid-template-columns: 1fr;\n gap: 0.15rem;\n }\n}\n`;\n","import { escapeHtml } from \"./escape\";\nimport { selectStream } from \"./stdio\";\nimport type { ConfigField, Provenance, RunResult, StdioEvent, TimingReport } from \"./types\";\n\nexport function renderStdioHtml(events: StdioEvent[]): string {\n if (events.length === 0) {\n return `<p class=\"ox-code-play__stdio ox-code-play__empty\">No stdio yet.</p>`;\n }\n const lines = events\n .map((event) => {\n const time = event.timestampMs.toFixed(1);\n 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>`;\n })\n .join(\"\");\n return `<div class=\"ox-code-play__stdio\" role=\"log\">${lines}</div>`;\n}\n\n/** Dedicated stderr viewer: stderr chunks plus error/warning diagnostics. /\nexport function renderStderrHtml(result: RunResult \| undefined): string {\n const chunks = selectStream(result?.stdio ?? [], \"stderr\");\n const diagnostics = (result?.diagnostics ?? []).filter(\n (diagnostic) => diagnostic.severity === \"error\" \|\| diagnostic.severity === \"warning\",\n );\n if (chunks.length === 0 && diagnostics.length === 0) {\n return `<p class=\"ox-code-play__empty\">No stderr.</p>`;\n }\n const stream = chunks.length === 0 ? \"\" : renderStdioHtml(chunks);\n if (diagnostics.length === 0) {\n return stream;\n }\n const items = diagnostics\n .map((diagnostic) => {\n const place = diagnostic.line\n ? `:${diagnostic.line}${diagnostic.column ? `:${diagnostic.column}` : \"\"}`\n : \"\";\n return `<li class=\"ox-code-play__diag ox-code-play__diag--${diagnostic.severity}\">${escapeHtml(diagnostic.severity)}${escapeHtml(place)} ${escapeHtml(diagnostic.message)}</li>`;\n })\n .join(\"\");\n return `${stream}<ul class=\"ox-code-play__diags\">${items}</ul>`;\n}\n\nexport function renderConfigHtml(schema: ConfigField[], config: Record<string, unknown>): string {\n if (schema.length === 0) {\n return `<p class=\"ox-code-play__empty\">This language has no editable config.</p>`;\n }\n const fields = schema\n .map((field) => {\n const value = config[field.key] ?? field.default ?? \"\";\n const label = `<label class=\"ox-code-play__field\"><span>${escapeHtml(field.label)}</span>${renderField(field, value)}</label>`;\n return field.description\n ? `${label}<p class=\"ox-code-play__field-help\">${escapeHtml(field.description)}</p>`\n : label;\n })\n .join(\"\");\n return `<form class=\"ox-code-play__config\">${fields}</form>`;\n}\n\nexport function renderProvenanceHtml(provenance: Provenance \| undefined): string {\n if (!provenance?.compile && !provenance?.execute) {\n return `<p class=\"ox-code-play__empty\">No provenance yet. Run or type-check a sample.</p>`;\n }\n return `<dl class=\"ox-code-play__provenance\">${renderLocation(\"Compiled\", provenance.compile)}${renderLocation(\"Executed\", provenance.execute)}</dl>`;\n}\n\nexport function renderTimingHtml(timing: TimingReport \| undefined): string {\n if (!timing \|\| timing.phases.length === 0) {\n return `<p class=\"ox-code-play__empty\">No timing yet. Run or type-check a sample.</p>`;\n }\n const rows = timing.phases\n .map((phase) => {\n const width = timing.totalMs > 0 ? Math.max(2, (phase.durationMs / timing.totalMs) 100) : 0;\n 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>`;\n })\n .join(\"\");\n return `<div class=\"ox-code-play__timing\"><p class=\"ox-code-play__timing-total\">Total ${timing.totalMs.toFixed(1)}ms</p>${rows}</div>`;\n}\n\nexport function renderDiagnosticsHtml(result: RunResult \| undefined): string {\n if (!result?.diagnostics.length) {\n return \"\";\n }\n const items = result.diagnostics\n .map((diagnostic) => {\n const place = diagnostic.line\n ? `:${diagnostic.line}${diagnostic.column ? `:${diagnostic.column}` : \"\"}`\n : \"\";\n return `<li class=\"ox-code-play__diag ox-code-play__diag--${diagnostic.severity}\">${escapeHtml(diagnostic.severity)}${escapeHtml(place)} ${escapeHtml(diagnostic.message)}</li>`;\n })\n .join(\"\");\n return `<ul class=\"ox-code-play__diags\">${items}</ul>`;\n}\n\nfunction renderField(field: ConfigField, value: unknown): string {\n const name = escapeHtml(field.key);\n if (field.type === \"boolean\") {\n return `<input type=\"checkbox\" name=\"${name}\" ${value ? \"checked\" : \"\"}>`;\n }\n if (field.type === \"select\") {\n const options = (field.options ?? [])\n .map(\n (option) =>\n `<option value=\"${escapeHtml(option.value)}\" ${String(value) === option.value ? \"selected\" : \"\"}>${escapeHtml(option.label)}</option>`,\n )\n .join(\"\");\n return `<select name=\"${name}\">${options}</select>`;\n }\n const inputType = field.type === \"number\" ? \"number\" : \"text\";\n return `<input type=\"${inputType}\" name=\"${name}\" value=\"${escapeHtml(String(value))}\">`;\n}\n\nfunction renderLocation(label: string, location: Provenance[\"compile\"]): string {\n if (!location) {\n return \"\";\n }\n const details = [location.runtime, location.version, location.sandbox, location.target]\n .filter(Boolean)\n .join(\" · \");\n return `<div><dt>${escapeHtml(label)}</dt><dd><strong>${escapeHtml(location.host)}</strong>${details ? ` <span>${escapeHtml(details)}</span>` : \"\"}</dd></div>`;\n}\n","import { resolveLanguage } from \"./catalog\";\nimport { escapeAttribute, escapeHtml } from \"./escape\";\nimport { idleRunActionState } from \"./hydrate-action\";\nimport type {\n CodePlayPreset,\n LanguageDefinition,\n PlayPayload,\n ProjectSandbox,\n RunActionState,\n RunResult,\n} from \"./types\";\nimport {\n renderConfigHtml,\n renderDiagnosticsHtml,\n renderProvenanceHtml,\n renderStderrHtml,\n renderStdioHtml,\n renderTimingHtml,\n} from \"./viewers\";\n\nexport interface UiState {\n payload: PlayPayload;\n result?: RunResult;\n busy?: boolean;\n runState?: RunActionState;\n panel?: \"stdio\" \| \"stderr\" \| \"config\" \| \"provenance\" \| \"timing\";\n}\n\nexport function renderPlayUi(state: UiState): string {\n const definition = resolveLanguage(state.payload.language);\n const preset: CodePlayPreset = state.payload.ui === \"headless\" ? \"headless\" : state.payload.ui;\n if (preset === \"headless\") {\n return \"\";\n }\n const panel = state.panel ?? \"stdio\";\n const canTypecheck = state.payload.capabilities.typecheck;\n const runState =\n state.runState ??\n (state.busy ? { phase: \"running\" as const, action: \"execute\" as const } : idleRunActionState());\n const isBusy = Boolean(state.busy) \|\| runState.phase === \"running\";\n const tabs = renderTabs(state, panel);\n const viewers = state.payload.viewers;\n const label = widgetLabel(state.payload, definition);\n 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\"}\">\n <div class=\"ox-code-play__toolbar\">\n <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>\n <span class=\"ox-code-play__status\" data-ox-status role=\"status\" aria-live=\"polite\">${renderRunStatusText(runState)}</span>\n <button type=\"button\" data-ox-action=\"run\" aria-label=\"${escapeHtml(`Run ${label}`)}\"${actionButtonAttrs(\"run\", Boolean(state.busy))}>Run</button>\n ${canTypecheck ? `<button type=\"button\" data-ox-action=\"typecheck\" aria-label=\"${escapeHtml(`Typecheck ${label}`)}\"${actionButtonAttrs(\"typecheck\", Boolean(state.busy))}>Typecheck</button>` : \"\"}\n <button type=\"button\" data-ox-action=\"cancel\" aria-label=\"${escapeHtml(`Cancel ${label}`)}\"${actionButtonAttrs(\"cancel\", Boolean(state.busy))}>Cancel</button>\n </div>\n ${renderRuntimeStrip(state.payload, definition)}\n <div class=\"ox-code-play__source\"></div>\n ${tabs}\n ${viewers.stdio ? renderPanel(\"stdio\", \"Stdio\", panel, preset, `${renderDiagnosticsHtml(state.result)}${renderStdioHtml(state.result?.stdio ?? [])}`) : \"\"}\n ${viewers.stderr ? renderPanel(\"stderr\", \"Stderr\", panel, preset, renderStderrHtml(state.result)) : \"\"}\n ${viewers.config ? renderPanel(\"config\", \"Config\", panel, preset, renderConfigHtml(definition?.configSchema ?? [], state.payload.config)) : \"\"}\n ${viewers.provenance ? renderPanel(\"provenance\", \"Provenance\", panel, preset, renderProvenanceHtml(state.result?.provenance)) : \"\"}\n ${viewers.timing ? renderPanel(\"timing\", \"Timing\", panel, preset, renderTimingHtml(state.result?.timing)) : \"\"}\n</div>`;\n}\n\nexport function renderRunStatusText(state: RunActionState): string {\n if (state.phase === \"running\") {\n return state.action === \"typecheck\" ? \"Typechecking\" : \"Running\";\n }\n if (state.phase === \"offline\") {\n return \"Offline\";\n }\n if (state.phase === \"error\") {\n if (state.result?.status === \"timeout\") {\n return \"Timed out\";\n }\n if (state.result?.status === \"unsupported\") {\n return \"Unsupported\";\n }\n return \"Error\";\n }\n if (state.phase === \"result\") {\n if (state.result?.status === \"cancelled\") {\n return \"Cancelled\";\n }\n return \"Done\";\n }\n return \"Ready\";\n}\n\nfunction renderRuntimeStrip(\n payload: PlayPayload,\n definition: LanguageDefinition \| undefined,\n): string {\n const runtime = runtimeLabel(payload, definition);\n const executor = executorLabel(payload, definition);\n const checks = payload.capabilities.typecheck ? \"Typecheck ready\" : \"Run only\";\n const chips = [\n runtimeChip(\"Runtime\", runtime.label, runtime.kind),\n runtimeChip(\"Executor\", executor.label, executor.kind),\n runtimeChip(\"Checks\", checks, payload.capabilities.typecheck ? \"ok\" : \"muted\"),\n ].join(\"\");\n return `<div class=\"ox-code-play__runtime\" aria-label=\"Code Play runtime\">${chips}${renderProjectSandboxHtml(payload.project)}</div>`;\n}\n\nfunction runtimeLabel(\n payload: PlayPayload,\n definition: LanguageDefinition \| undefined,\n): { label: string; kind: \"ok\" \| \"warn\" \| \"muted\" } {\n switch (definition?.backend) {\n case \"javascript\":\n return { label: \"Browser sandbox\", kind: \"ok\" };\n case \"typescript\":\n return { label: \"TypeScript sandbox\", kind: \"ok\" };\n case \"framework\":\n return { label: `${definition.name} iframe preview`, kind: \"ok\" };\n case \"rust-playground\":\n return { label: \"Rust Playground\", kind: payload.endpoints?.rust ? \"ok\" : \"warn\" };\n case \"go-playground\":\n return { label: \"Go Playground\", kind: payload.endpoints?.go ? \"ok\" : \"warn\" };\n case \"remote\":\n return payload.endpoint\n ? { label: \"Piston-compatible\", kind: \"ok\" }\n : { label: \"Endpoint missing\", kind: \"warn\" };\n default:\n return { label: definition?.name ?? payload.language, kind: \"muted\" };\n }\n}\n\nfunction executorLabel(\n payload: PlayPayload,\n definition: LanguageDefinition \| undefined,\n): { label: string; kind: \"ok\" \| \"warn\" \| \"muted\" } {\n if (!payload.capabilities.execute) {\n return { label: \"Disabled\", kind: \"warn\" };\n }\n if (definition?.backend === \"remote\" && !payload.endpoint) {\n return { label: \"Configure endpoint\", kind: \"warn\" };\n }\n return { label: \"On demand\", kind: \"ok\" };\n}\n\nfunction runtimeChip(label: string, value: string, kind: \"ok\" \| \"warn\" \| \"muted\"): string {\n return `<span class=\"ox-code-play__runtime-chip ox-code-play__runtime-chip--${kind}\"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></span>`;\n}\n\nexport function renderProjectSandboxHtml(project: ProjectSandbox \| undefined): string {\n if (!project) {\n return \"\";\n }\n const fileCount = `${project.files.length} ${project.files.length === 1 ? \"file\" : \"files\"}`;\n const target =\n project.target === \"browser\"\n ? \"Browser project\"\n : project.target === \"node\"\n ? \"Node-like project\"\n : \"External project\";\n const url = project.openUrl ?? project.fallbackUrl;\n const warnings = project.warnings?.length\n ? `<span class=\"ox-code-play__project-warning\" title=\"${escapeAttribute(project.warnings.join(\"\\n\"))}\">Warnings</span>`\n : \"\";\n const link = url\n ? `<a class=\"ox-code-play__project-link\" href=\"${escapeAttribute(url)}\" target=\"_blank\" rel=\"noopener noreferrer\">Open</a>`\n : \"\";\n return `<span class=\"ox-code-play__project\" data-ox-project-provider=\"${escapeAttribute(project.provider)}\">\n <span class=\"ox-code-play__project-main\"><span>${escapeHtml(project.label)}</span><strong>${escapeHtml(target)}</strong></span>\n ${project.entry ? `<span class=\"ox-code-play__project-entry\"><span>Entry</span><strong>${escapeHtml(project.entry)}</strong></span>` : \"\"}\n <span class=\"ox-code-play__project-files\">${escapeHtml(fileCount)}</span>\n ${warnings}${link}\n </span>`;\n}\n\nfunction renderTabs(state: UiState, panel: string): string {\n if (state.payload.ui === \"compact\") {\n return \"\";\n }\n const viewers = state.payload.viewers;\n const buttons = [\n viewers.stdio ? tab(\"stdio\", \"Stdio\", panel) : \"\",\n viewers.stderr ? tab(\"stderr\", \"Stderr\", panel) : \"\",\n viewers.config ? tab(\"config\", \"Config\", panel) : \"\",\n viewers.provenance ? tab(\"provenance\", \"Provenance\", panel) : \"\",\n viewers.timing ? tab(\"timing\", \"Timing\", panel) : \"\",\n ]\n .filter(Boolean)\n .join(\"\");\n return buttons ? `<div class=\"ox-code-play__tabs\" role=\"tablist\">${buttons}</div>` : \"\";\n}\n\nfunction tab(id: string, label: string, selected: string): string {\n const isSelected = selected === id;\n return `<button type=\"button\" role=\"tab\" data-ox-panel=\"${id}\" aria-selected=\"${isSelected ? \"true\" : \"false\"}\" tabindex=\"${isSelected ? \"0\" : \"-1\"}\">${label}</button>`;\n}\n\nexport function actionButtonAttrs(action: string, busy: boolean): string {\n const state = actionBusyState(action, busy);\n return `${state.disabled ? ' disabled aria-disabled=\"true\"' : \"\"}${state.hidden ? \" hidden\" : \"\"}`;\n}\n\nexport function actionBusyState(\n action: string,\n busy: boolean,\n): { disabled: boolean; hidden: boolean } {\n if (action === \"cancel\") {\n return { disabled: !busy, hidden: !busy };\n }\n return { disabled: busy, hidden: false };\n}\n\nexport function applyActionBusy(root: ParentNode, busy: boolean): void {\n for (const button of root.querySelectorAll<HTMLButtonElement>(\"button[data-ox-action]\")) {\n const state = actionBusyState(button.dataset.oxAction ?? \"\", busy);\n button.disabled = state.disabled;\n button.hidden = state.hidden;\n button.setAttribute(\"aria-disabled\", state.disabled ? \"true\" : \"false\");\n }\n for (const widget of queryPlayWidgets(root)) {\n widget.setAttribute(\"aria-busy\", busy ? \"true\" : \"false\");\n }\n}\n\nfunction renderPanel(\n id: string,\n label: string,\n current: string,\n preset: CodePlayPreset,\n html: string,\n): string {\n return `<div class=\"ox-code-play__panel\" role=\"tabpanel\" tabindex=\"0\" aria-label=\"${escapeHtml(label)}\" data-panel=\"${id}\"${hidden(current, id, preset)}>${html}</div>`;\n}\n\nfunction hidden(current: string, id: string, preset: CodePlayPreset): string {\n if (preset === \"compact\" && (id === \"stdio\" \|\| id === \"stderr\")) {\n return \"\";\n }\n return current === id ? \"\" : \" hidden\";\n}\n\nfunction widgetLabel(payload: PlayPayload, definition: LanguageDefinition \| undefined): string {\n const language = definition?.name ?? payload.language;\n return payload.title ? `${payload.title} (${language})` : `${language} Code Play`;\n}\n\nfunction queryPlayWidgets(root: ParentNode): HTMLElement[] {\n const widgets = [...root.querySelectorAll<HTMLElement>(\".ox-code-play\")];\n if (\n typeof HTMLElement !== \"undefined\" &&\n root instanceof HTMLElement &&\n root.matches(\".ox-code-play\")\n ) {\n widgets.unshift(root);\n }\n return widgets;\n}\n","import { createCodePlay, type CodePlayClient } from \"./client\";\nimport {\n errorRunActionState,\n readPlayPayload,\n resultRunActionState,\n runningRunActionState,\n runPlayAction,\n} from \"./hydrate-action\";\nimport { decodePayload, encodePayload } from \"./payload\";\nimport { errorMessage, errorResult } from \"./result\";\nimport { CODE_PLAY_STYLES } from \"./styles\";\nimport { JS_SANDBOX_FLAGS } from \"./javascript-sandbox\";\nimport { applyActionBusy, renderPlayUi, renderRunStatusText } from \"./ui\";\nimport type {\n LanguageEnable,\n LanguageEnableOptions,\n PlayPayload,\n RunAction,\n RunActionState,\n RunResult,\n} from \"./types\";\nimport {\n renderDiagnosticsHtml,\n renderProvenanceHtml,\n renderStderrHtml,\n renderStdioHtml,\n renderTimingHtml,\n} from \"./viewers\";\n\nexport interface HydrateOptions {\n client?: CodePlayClient;\n root?: ParentNode;\n}\n\nconst STYLE_ID = \"ox-code-play-styles\";\nlet widgetId = 0;\n\nexport function hydrateCodePlay(\n root: ParentNode = defaultRoot(),\n options: HydrateOptions = {},\n): void {\n ensureStyles();\n const client = options.client ?? createCodePlayFromPayloads(root);\n for (const element of queryWidgets(root)) {\n try {\n mountCodePlay(element, { client });\n } catch {\n // One broken widget must not abort the rest of the page.\n }\n }\n}\n\nexport function mountCodePlay(element: Element, options: { client?: CodePlayClient } = {}): void {\n if (!(element instanceof HTMLElement) \|\| element.dataset.oxCodePlayMounted === \"true\") {\n return;\n }\n const payload = readPlayPayload(element.getAttribute(\"data-ox-code-play\") ?? \"\");\n if (!payload \|\| payload.ui === \"headless\") {\n return;\n }\n const client =\n options.client ??\n createCodePlay({\n languages: { [payload.language]: languageEnableFromPayload(payload) },\n endpoints: payload.endpoints,\n });\n const source = element.innerHTML;\n const ui = document.createElement(\"div\");\n ui.innerHTML = renderPlayUi({ payload });\n const widget = ui.firstElementChild;\n if (!widget) {\n return;\n }\n const sourceSlot = widget.querySelector(\".ox-code-play__source\");\n if (sourceSlot) {\n sourceSlot.innerHTML = source;\n }\n element.replaceChildren(widget);\n element.dataset.oxCodePlayMounted = \"true\";\n element.removeAttribute(\"inert\");\n bindWidget(element, payload, client);\n prepareA11y(element);\n}\n\nfunction bindWidget(element: HTMLElement, payload: PlayPayload, client: CodePlayClient): void {\n let current = payload;\n const session = client.createSession({\n language: payload.language,\n code: payload.code,\n config: payload.config,\n project: payload.project,\n });\n const runButton = element.querySelector<HTMLButtonElement>('[data-ox-action=\"run\"]');\n const checkButton = element.querySelector<HTMLButtonElement>('[data-ox-action=\"typecheck\"]');\n const cancelButton = element.querySelector<HTMLButtonElement>('[data-ox-action=\"cancel\"]');\n runButton?.addEventListener(\"click\", () => void run(\"execute\"));\n checkButton?.addEventListener(\"click\", () => void run(\"typecheck\"));\n cancelButton?.addEventListener(\"click\", () => session.cancel());\n element.addEventListener(\"keydown\", (event) => {\n if (event.target instanceof HTMLElement && event.target.matches('[role=\"tab\"]')) {\n handleTabKeydown(element, event);\n }\n });\n element.addEventListener(\"click\", (event) => {\n const target = event.target;\n if (!(target instanceof HTMLElement)) {\n return;\n }\n const panel = target.dataset.oxPanel;\n if (panel) {\n showPanel(element, panel);\n }\n });\n element.addEventListener(\"change\", (event) => {\n const form = (event.target as HTMLElement \| null)?.closest(\"form\");\n if (!form) {\n return;\n }\n session.setConfig(readForm(form));\n current = { ...current, config: session.config };\n });\n\n async function run(action: RunAction): Promise<void> {\n await runPlayAction({\n action: () => (action === \"typecheck\" ? session.typecheck() : session.run()),\n setBusy: (busy) => {\n applyActionBusy(element, busy);\n if (busy) {\n paintRunState(element, runningRunActionState(action));\n }\n },\n onResult: (result) => paintResult(element, current, result, action),\n onError: (error) => {\n paintRunState(element, errorRunActionState(action, error));\n paintResult(element, current, errorResult(errorMessage(error)), action);\n },\n });\n }\n}\n\nfunction paintResult(\n element: HTMLElement,\n _payload: PlayPayload,\n result: RunResult,\n action: RunAction,\n): void {\n paintRunState(element, resultRunActionState(action, result));\n const stdio = element.querySelector('[data-panel=\"stdio\"]');\n if (stdio) {\n stdio.innerHTML = `${renderDiagnosticsHtml(result)}${renderStdioHtml(result.stdio)}`;\n if (result.preview) {\n const frame = document.createElement(\"iframe\");\n frame.setAttribute(\"sandbox\", JS_SANDBOX_FLAGS);\n frame.srcdoc = result.preview.html;\n frame.title = \"Code Play preview\";\n frame.style.width = \"100%\";\n frame.style.minHeight = \"12rem\";\n frame.style.border = \"0\";\n stdio.append(frame);\n }\n }\n const provenance = element.querySelector('[data-panel=\"provenance\"]');\n if (provenance) {\n provenance.innerHTML = renderProvenanceHtml(result.provenance);\n }\n const timing = element.querySelector('[data-panel=\"timing\"]');\n if (timing) {\n timing.innerHTML = renderTimingHtml(result.timing);\n }\n const stderr = element.querySelector('[data-panel=\"stderr\"]');\n if (stderr) {\n stderr.innerHTML = renderStderrHtml(result);\n }\n showPanel(element, resultPanelToShow(result, Boolean(stderr)));\n}\n\nfunction paintRunState(element: HTMLElement, state: RunActionState): void {\n const widget = element.querySelector<HTMLElement>(\".ox-code-play\");\n widget?.setAttribute(\"data-ox-run-state\", state.phase);\n widget?.setAttribute(\"aria-busy\", state.phase === \"running\" ? \"true\" : \"false\");\n const status = element.querySelector<HTMLElement>(\"[data-ox-status]\");\n if (status) {\n status.textContent = renderRunStatusText(state);\n }\n}\n\nexport function resultPanelToShow(result: RunResult, hasStderrPanel: boolean): \"stderr\" \| \"stdio\" {\n if (!hasStderrPanel) {\n return \"stdio\";\n }\n const hasErrorDiagnostics = result.diagnostics.some(\n (diagnostic) => diagnostic.severity === \"error\",\n );\n if (hasErrorDiagnostics \|\| (result.status !== \"ok\" && Boolean(result.stderr))) {\n return \"stderr\";\n }\n return \"stdio\";\n}\n\nfunction showPanel(element: HTMLElement, panel: string): void {\n const compact = Boolean(element.querySelector(\".ox-code-play--compact\"));\n for (const tab of element.querySelectorAll(\"[data-ox-panel]\")) {\n const selected = tab.getAttribute(\"data-ox-panel\") === panel;\n tab.setAttribute(\"aria-selected\", selected ? \"true\" : \"false\");\n (tab as HTMLElement).tabIndex = selected ? 0 : -1;\n }\n for (const node of element.querySelectorAll<HTMLElement>(\".ox-code-play__panel\")) {\n const id = node.dataset.panel;\n if (compact && (id === \"stdio\" \|\| id === \"stderr\")) {\n node.hidden = false;\n continue;\n }\n node.hidden = id !== panel;\n }\n}\n\nfunction handleTabKeydown(element: HTMLElement, event: KeyboardEvent): void {\n if (![\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) {\n return;\n }\n const tabs = [...element.querySelectorAll<HTMLElement>(\"[data-ox-panel]\")];\n const current = tabs.indexOf(event.target as HTMLElement);\n if (current === -1) {\n return;\n }\n event.preventDefault();\n const nextIndex =\n event.key === \"Home\"\n ? 0\n : event.key === \"End\"\n ? tabs.length - 1\n : event.key === \"ArrowRight\"\n ? (current + 1) % tabs.length\n : (current - 1 + tabs.length) % tabs.length;\n const next = tabs[nextIndex];\n const panel = next?.dataset.oxPanel;\n if (!next \|\| !panel) {\n return;\n }\n showPanel(element, panel);\n next.focus();\n}\n\nfunction prepareA11y(element: HTMLElement): void {\n const widget = element.querySelector<HTMLElement>(\".ox-code-play\");\n if (!widget) {\n return;\n }\n if (!widget.id) {\n widget.id = `ox-code-play-${++widgetId}`;\n }\n for (const tab of element.querySelectorAll<HTMLElement>(\"[data-ox-panel]\")) {\n const panelName = tab.dataset.oxPanel;\n const panel = panelName\n ? element.querySelector<HTMLElement>(`[data-panel=\"${panelName}\"]`)\n : null;\n if (!panelName \|\| !panel) {\n continue;\n }\n tab.id \|\|= `${widget.id}-${panelName}-tab`;\n panel.id \|\|= `${widget.id}-${panelName}-panel`;\n tab.setAttribute(\"aria-controls\", panel.id);\n panel.setAttribute(\"aria-labelledby\", tab.id);\n panel.removeAttribute(\"aria-label\");\n }\n}\n\nfunction readForm(form: HTMLFormElement): Record<string, unknown> {\n const data = new FormData(form);\n const config: Record<string, unknown> = {};\n for (const [key, value] of data.entries()) {\n config[key] = value === \"on\" ? true : value;\n }\n for (const input of form.querySelectorAll<HTMLInputElement>('input[type=\"checkbox\"]')) {\n config[input.name] = input.checked;\n }\n return config;\n}\n\nfunction createCodePlayFromPayloads(root: ParentNode) {\n const languages: Record<string, LanguageEnable> = {};\n let endpoints;\n for (const element of queryWidgets(root)) {\n try {\n const payload = decodePayload(element.getAttribute(\"data-ox-code-play\") ?? \"\");\n languages[payload.language] = languageEnableFromPayload(payload);\n endpoints = payload.endpoints ?? endpoints;\n } catch {\n // Ignore malformed widgets so one bad payload cannot block the page.\n }\n }\n return createCodePlay({ languages, endpoints });\n}\n\nfunction languageEnableFromPayload(payload: PlayPayload): LanguageEnableOptions {\n const enable: LanguageEnableOptions = {\n execute: payload.capabilities.execute,\n typecheck: payload.capabilities.typecheck,\n config: payload.config,\n };\n if (payload.endpoint) {\n enable.endpoint = payload.endpoint;\n }\n return enable;\n}\n\nfunction queryWidgets(root: ParentNode): HTMLElement[] {\n return [...root.querySelectorAll<HTMLElement>(\"[data-ox-code-play]\")];\n}\n\nfunction ensureStyles(): void {\n if (typeof document === \"undefined\" \|\| document.getElementById(STYLE_ID)) {\n return;\n }\n const style = document.createElement(\"style\");\n style.id = STYLE_ID;\n style.textContent = CODE_PLAY_STYLES;\n document.head.append(style);\n}\n\nfunction defaultRoot(): ParentNode {\n if (typeof document === \"undefined\") {\n throw new Error(\"hydrateCodePlay() needs a DOM root.\");\n }\n return document;\n}\n\nexport { encodePayload, decodePayload };\n"],"mappings":"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"}

package/dist/index.d.mts CHANGED Viewed

@@ -128,7 +128,7 @@ declare class PhaseTracker {
 }
 //#endregion
 //#region src/styles.d.ts
-declare const CODE_PLAY_STYLES = "\n.ox-code-play {\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));\n  border-radius: 8px;\n  background: var(--octc-color-bg-alt, var(--octc-color-bg, Canvas));\n  color: var(--octc-color-text, CanvasText);\n  overflow: hidden;\n  margin: 1.25rem 0;\n}\n.ox-code-play__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-items: center;\n  padding: 0.6rem 0.8rem;\n  border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 12%, transparent));\n}\n.ox-code-play__summary {\n  display: inline-flex;\n  flex: 1 1 12rem;\n  min-width: 9rem;\n  gap: 0.45rem;\n  align-items: baseline;\n}\n.ox-code-play__lang {\n  font: 600 0.8rem/1.2 ui-sans-serif, system-ui, sans-serif;\n  color: var(--octc-color-text, CanvasText);\n}\n.ox-code-play__title {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  font: 500 0.78rem/1.25 ui-sans-serif, system-ui, sans-serif;\n  opacity: 0.72;\n}\n.ox-code-play__status {\n  min-width: 5.25rem;\n  text-align: center;\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));\n  border-radius: 6px;\n  padding: 0.18rem 0.5rem;\n  font: 650 0.68rem/1.25 ui-sans-serif, system-ui, sans-serif;\n  color: var(--octc-color-text, CanvasText);\n  background: var(--octc-color-bg, Canvas);\n}\n.ox-code-play[data-ox-run-state=\"running\"] .ox-code-play__status {\n  color: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n}\n.ox-code-play[data-ox-run-state=\"error\"] .ox-code-play__status,\n.ox-code-play[data-ox-run-state=\"offline\"] .ox-code-play__status {\n  color: var(--octc-danger, #b42318);\n}\n.ox-code-play__toolbar button {\n  appearance: none;\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 20%, transparent));\n  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 8%, transparent);\n  color: var(--octc-color-text, CanvasText);\n  border-radius: 8px;\n  padding: 0.25rem 0.75rem;\n  font: 600 0.75rem/1.4 ui-sans-serif, system-ui, sans-serif;\n  cursor: pointer;\n}\n.ox-code-play__toolbar button:disabled { opacity: 0.55; cursor: progress; }\n.ox-code-play__toolbar button:focus-visible,\n.ox-code-play__tabs button:focus-visible,\n.ox-code-play__field input:focus-visible,\n.ox-code-play__field select:focus-visible,\n.ox-code-play__panel:focus-visible {\n  outline: 2px solid var(--octc-color-primary, var(--octc-accent, #4f46e5));\n  outline-offset: 2px;\n}\n.ox-code-play__runtime {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.45rem;\n  align-items: center;\n  padding: 0.55rem 0.8rem;\n  border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 10%, transparent));\n  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 4%, transparent);\n}\n.ox-code-play__runtime-chip {\n  display: inline-grid;\n  gap: 0.1rem;\n  min-width: 7.5rem;\n  padding: 0.35rem 0.5rem;\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 14%, transparent));\n  border-radius: 6px;\n  background: var(--octc-color-bg, Canvas);\n}\n.ox-code-play__runtime-chip span {\n  font: 600 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  opacity: 0.62;\n}\n.ox-code-play__runtime-chip strong {\n  font: 650 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__runtime-chip--ok strong { color: var(--octc-color-primary, var(--octc-accent, #4f46e5)); }\n.ox-code-play__runtime-chip--warn strong { color: var(--octc-warning, #b54708); }\n.ox-code-play__runtime-chip--muted strong { opacity: 0.72; }\n.ox-code-play__project {\n  display: inline-flex;\n  flex: 1 1 18rem;\n  min-width: min(100%, 16rem);\n  gap: 0.45rem;\n  align-items: center;\n  flex-wrap: wrap;\n  margin-left: auto;\n  padding: 0.35rem 0.5rem;\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 14%, transparent));\n  border-radius: 6px;\n  background: var(--octc-color-bg, Canvas);\n}\n.ox-code-play__project-main,\n.ox-code-play__project-entry {\n  display: inline-grid;\n  gap: 0.1rem;\n  min-width: 0;\n}\n.ox-code-play__project-main { flex: 1 1 8.5rem; }\n.ox-code-play__project-entry { flex: 999 1 9rem; }\n.ox-code-play__project-main span,\n.ox-code-play__project-entry span {\n  font: 600 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  opacity: 0.62;\n}\n.ox-code-play__project-main strong,\n.ox-code-play__project-entry strong {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  font: 650 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__project-files,\n.ox-code-play__project-warning,\n.ox-code-play__project-link {\n  flex: 0 0 auto;\n  border-radius: 6px;\n  padding: 0.18rem 0.45rem;\n  font: 650 0.68rem/1.25 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__project-files {\n  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 8%, transparent);\n}\n.ox-code-play__project-warning {\n  color: var(--octc-warning, #b54708);\n  background: color-mix(in srgb, var(--octc-warning, #b54708) 12%, transparent);\n}\n.ox-code-play__project-link {\n  color: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n  background: color-mix(in srgb, var(--octc-color-primary, var(--octc-accent, #4f46e5)) 12%, transparent);\n  text-decoration: none;\n}\n.ox-code-play__project-link:focus-visible {\n  outline: 2px solid var(--octc-color-primary, var(--octc-accent, #4f46e5));\n  outline-offset: 2px;\n}\n.ox-code-play .ox-code { margin: 0; }\n.ox-code-play__source pre { margin: 0; border: 0; border-radius: 0; }\n.ox-code-play__tabs {\n  display: flex;\n  gap: 0.25rem;\n  padding: 0.4rem 0.7rem 0;\n}\n.ox-code-play__tabs button {\n  appearance: none;\n  border: 0;\n  background: transparent;\n  color: var(--octc-color-text, CanvasText);\n  padding: 0.35rem 0.55rem;\n  border-radius: 6px 6px 0 0;\n  font: 600 0.75rem/1.2 ui-sans-serif, system-ui, sans-serif;\n  cursor: pointer;\n}\n.ox-code-play__tabs button[aria-selected=\"true\"] {\n  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 10%, transparent);\n}\n.ox-code-play__panel { padding: 0.7rem 0.8rem 0.9rem; color: var(--octc-color-text, CanvasText); }\n.ox-code-play__panel pre {\n  background: transparent !important;\n  color: inherit !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n}\n.ox-code-play__empty { margin: 0; opacity: 0.7; font-size: 0.85rem; }\n.ox-code-play__stdio { font: 12px/1.45 ui-monospace, SFMono-Regular, monospace; }\n.ox-code-play__stdio-line { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem; white-space: pre-wrap; }\n.ox-code-play__stdio-line--stderr { color: var(--octc-danger, #b42318); }\n.ox-code-play__stdio-line--stdin { opacity: 0.75; }\n.ox-code-play__stdio-meta { opacity: 0.6; }\n.ox-code-play__config { display: grid; gap: 0.55rem; }\n.ox-code-play__field { display: grid; gap: 0.25rem; font-size: 0.85rem; }\n.ox-code-play__field input, .ox-code-play__field select {\n  font: inherit;\n  padding: 0.3rem 0.45rem;\n  border-radius: 6px;\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 18%, transparent));\n  background: var(--octc-color-bg, Canvas);\n  color: var(--octc-color-text, CanvasText);\n}\n.ox-code-play__provenance { display: grid; gap: 0.6rem; margin: 0; }\n.ox-code-play__provenance dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; }\n.ox-code-play__provenance dd { margin: 0.15rem 0 0; }\n.ox-code-play__phase { margin: 0.45rem 0; }\n.ox-code-play__phase-meta { display: flex; justify-content: space-between; font-size: 0.8rem; }\n.ox-code-play__phase-bar {\n  height: 0.35rem;\n  margin-top: 0.25rem;\n  border-radius: 999px;\n  background: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n}\n.ox-code-play__timing-total { margin: 0 0 0.4rem; font-weight: 600; }\n.ox-code-play__diags { margin: 0 0 0.6rem; padding-left: 1.1rem; }\n.ox-code-play__diag--error { color: var(--octc-danger, #b42318); }\n.ox-code-play__diag--warning { color: var(--octc-warning, #b54708); }\n.ox-code-play--compact .ox-code-play__tabs { display: none; }\n.ox-code-play--compact .ox-code-play__panel[data-panel]:not([data-panel=\"stdio\"]):not([data-panel=\"stderr\"]) { display: none; }\n";
+declare const CODE_PLAY_STYLES = "\n.ox-code-play {\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));\n  border-radius: 6px;\n  background: var(--octc-color-bg, Canvas);\n  color: var(--octc-color-text, CanvasText);\n  overflow: hidden;\n  margin: 1rem 0;\n}\n.ox-code-play__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.4rem;\n  align-items: center;\n  padding: 0.45rem 0.6rem;\n  border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 12%, transparent));\n  background: color-mix(in srgb, var(--octc-color-bg-alt, var(--octc-color-bg, Canvas)) 64%, transparent);\n}\n.ox-code-play__summary {\n  display: inline-flex;\n  flex: 1 1 12rem;\n  min-width: 9rem;\n  gap: 0.45rem;\n  align-items: baseline;\n}\n.ox-code-play__lang {\n  font: 600 0.8rem/1.2 ui-sans-serif, system-ui, sans-serif;\n  color: var(--octc-color-text, CanvasText);\n}\n.ox-code-play__title {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  font: 500 0.78rem/1.25 ui-sans-serif, system-ui, sans-serif;\n  opacity: 0.72;\n}\n.ox-code-play__status {\n  min-width: 4.6rem;\n  text-align: center;\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 16%, transparent));\n  border-radius: 999px;\n  padding: 0.12rem 0.45rem;\n  font: 650 0.68rem/1.25 ui-sans-serif, system-ui, sans-serif;\n  color: var(--octc-color-text, CanvasText);\n  background: var(--octc-color-bg, Canvas);\n}\n.ox-code-play[data-ox-run-state=\"running\"] .ox-code-play__status {\n  color: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n}\n.ox-code-play[data-ox-run-state=\"error\"] .ox-code-play__status,\n.ox-code-play[data-ox-run-state=\"offline\"] .ox-code-play__status {\n  color: var(--octc-danger, #b42318);\n}\n.ox-code-play__toolbar button {\n  appearance: none;\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 20%, transparent));\n  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 8%, transparent);\n  color: var(--octc-color-text, CanvasText);\n  border-radius: 6px;\n  min-height: 1.9rem;\n  padding: 0.18rem 0.62rem;\n  font: 600 0.75rem/1.4 ui-sans-serif, system-ui, sans-serif;\n  cursor: pointer;\n}\n.ox-code-play__toolbar button:disabled { opacity: 0.55; cursor: progress; }\n.ox-code-play__toolbar button:focus-visible,\n.ox-code-play__tabs button:focus-visible,\n.ox-code-play__field input:focus-visible,\n.ox-code-play__field select:focus-visible,\n.ox-code-play__panel:focus-visible {\n  outline: 2px solid var(--octc-color-primary, var(--octc-accent, #4f46e5));\n  outline-offset: 2px;\n}\n.ox-code-play__runtime {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.4rem 0.7rem;\n  align-items: center;\n  padding: 0.38rem 0.6rem;\n  border-bottom: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 10%, transparent));\n  background: color-mix(in srgb, var(--octc-color-bg-alt, var(--octc-color-bg, Canvas)) 56%, transparent);\n}\n.ox-code-play__runtime-chip {\n  display: inline-flex;\n  gap: 0.3rem;\n  align-items: baseline;\n  min-width: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n}\n.ox-code-play__runtime-chip span {\n  font: 650 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  opacity: 0.62;\n}\n.ox-code-play__runtime-chip strong {\n  font: 650 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__runtime-chip--ok strong { color: var(--octc-color-primary, var(--octc-accent, #4f46e5)); }\n.ox-code-play__runtime-chip--warn strong { color: var(--octc-warning, #b54708); }\n.ox-code-play__runtime-chip--muted strong { opacity: 0.72; }\n.ox-code-play__project {\n  display: inline-flex;\n  flex: 1 1 18rem;\n  min-width: min(100%, 16rem);\n  gap: 0.45rem;\n  align-items: center;\n  flex-wrap: wrap;\n  margin-left: auto;\n  padding: 0.28rem 0.42rem;\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 14%, transparent));\n  border-radius: 6px;\n  background: var(--octc-color-bg, Canvas);\n}\n.ox-code-play__project-main,\n.ox-code-play__project-entry {\n  display: inline-grid;\n  gap: 0.1rem;\n  min-width: 0;\n}\n.ox-code-play__project-main { flex: 1 1 8.5rem; }\n.ox-code-play__project-entry { flex: 999 1 9rem; }\n.ox-code-play__project-main span,\n.ox-code-play__project-entry span {\n  font: 600 0.62rem/1.1 ui-sans-serif, system-ui, sans-serif;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  opacity: 0.62;\n}\n.ox-code-play__project-main strong,\n.ox-code-play__project-entry strong {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  font: 650 0.78rem/1.2 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__project-files,\n.ox-code-play__project-warning,\n.ox-code-play__project-link {\n  flex: 0 0 auto;\n  border-radius: 6px;\n  padding: 0.18rem 0.45rem;\n  font: 650 0.68rem/1.25 ui-sans-serif, system-ui, sans-serif;\n}\n.ox-code-play__project-files {\n  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 8%, transparent);\n}\n.ox-code-play__project-warning {\n  color: var(--octc-warning, #b54708);\n  background: color-mix(in srgb, var(--octc-warning, #b54708) 12%, transparent);\n}\n.ox-code-play__project-link {\n  color: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n  background: color-mix(in srgb, var(--octc-color-primary, var(--octc-accent, #4f46e5)) 12%, transparent);\n  text-decoration: none;\n}\n.ox-code-play__project-link:focus-visible {\n  outline: 2px solid var(--octc-color-primary, var(--octc-accent, #4f46e5));\n  outline-offset: 2px;\n}\n.ox-code-play .ox-code { margin: 0; }\n.ox-code-play__source pre {\n  margin: 0;\n  border: 0;\n  border-radius: 0;\n  padding: 0.75rem 0.8rem;\n}\n.ox-code-play__tabs {\n  display: flex;\n  gap: 0.15rem;\n  padding: 0.35rem 0.55rem 0;\n}\n.ox-code-play__tabs button {\n  appearance: none;\n  border: 0;\n  background: transparent;\n  color: var(--octc-color-text, CanvasText);\n  padding: 0.28rem 0.48rem;\n  border-radius: 5px 5px 0 0;\n  font: 600 0.75rem/1.2 ui-sans-serif, system-ui, sans-serif;\n  cursor: pointer;\n}\n.ox-code-play__tabs button[aria-selected=\"true\"] {\n  background: color-mix(in srgb, var(--octc-color-text, CanvasText) 10%, transparent);\n}\n.ox-code-play__panel { padding: 0.55rem 0.65rem 0.7rem; color: var(--octc-color-text, CanvasText); }\n.ox-code-play__panel pre {\n  background: transparent !important;\n  color: inherit !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n}\n.ox-code-play__empty { margin: 0; opacity: 0.7; font-size: 0.85rem; }\n.ox-code-play__stdio { font: 12px/1.45 ui-monospace, SFMono-Regular, monospace; }\n.ox-code-play__stdio-line { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.55rem; white-space: pre-wrap; }\n.ox-code-play__stdio-line--stderr { color: var(--octc-danger, #b42318); }\n.ox-code-play__stdio-line--stdin { opacity: 0.75; }\n.ox-code-play__stdio-meta { opacity: 0.6; }\n.ox-code-play__config { display: grid; gap: 0.55rem; }\n.ox-code-play__field { display: grid; gap: 0.25rem; font-size: 0.85rem; }\n.ox-code-play__field input, .ox-code-play__field select {\n  font: inherit;\n  padding: 0.3rem 0.45rem;\n  border-radius: 6px;\n  border: 1px solid var(--octc-color-border, color-mix(in srgb, currentColor 18%, transparent));\n  background: var(--octc-color-bg, Canvas);\n  color: var(--octc-color-text, CanvasText);\n}\n.ox-code-play__provenance { display: grid; gap: 0.6rem; margin: 0; }\n.ox-code-play__provenance dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; }\n.ox-code-play__provenance dd { margin: 0.15rem 0 0; }\n.ox-code-play__phase { margin: 0.45rem 0; }\n.ox-code-play__phase-meta { display: flex; justify-content: space-between; font-size: 0.8rem; }\n.ox-code-play__phase-bar {\n  height: 0.35rem;\n  margin-top: 0.25rem;\n  border-radius: 999px;\n  background: var(--octc-color-primary, var(--octc-accent, #4f46e5));\n}\n.ox-code-play__timing-total { margin: 0 0 0.4rem; font-weight: 600; }\n.ox-code-play__diags { margin: 0 0 0.6rem; padding-left: 1.1rem; }\n.ox-code-play__diag--error { color: var(--octc-danger, #b42318); }\n.ox-code-play__diag--warning { color: var(--octc-warning, #b54708); }\n.ox-code-play--compact .ox-code-play__tabs { display: none; }\n.ox-code-play--compact .ox-code-play__panel[data-panel]:not([data-panel=\"stdio\"]):not([data-panel=\"stderr\"]) { display: none; }\n@media (max-width: 640px) {\n  .ox-code-play__toolbar {\n    align-items: flex-start;\n  }\n  .ox-code-play__runtime,\n  .ox-code-play__tabs,\n  .ox-code-play__panel {\n    padding-inline: 0.55rem;\n  }\n  .ox-code-play__stdio-line {\n    grid-template-columns: 1fr;\n    gap: 0.15rem;\n  }\n}\n";
 //#endregion
 export { type AdapterResult, CODE_PLAY_STYLES, type CodePlayClient, type CodePlayClientOptions, type CodePlayPluginOptions, type CodePlayPreset, CodePlaySession, type ConfigField, DEFAULT_ENDPOINTS, DEFAULT_VIEWERS, type Diagnostic, LANGUAGE_CATALOG, type LanguageDefinition, type LanguageEnable, PROJECT_SANDBOX_ADAPTERS, PhaseTracker, type PlayPayload, type ProjectSandbox, type ProjectSandboxAdapter, type ProjectSandboxAdapterInput, type ProjectSandboxFile, type ProjectSandboxProvider, type ProjectSandboxTarget, type Provenance, type RawCodePlayOptions, type ResolvedCodePlayOptions, type RunAction, type RunActionPhase, type RunActionState, type RunResult, type RunStatus, type SessionInput, type StdioEvent, type TimingReport, type ViewerFlags, bootCodePlay, codePlay, createCodePlay, createFetchTransport, createMemoryTransport, decodePayload, encodePayload, enhanceGeneratedModule, enhancePlayHtml, errorRunActionState, hydrateCodePlay, idleRunActionState, joinStream, listLanguages, mountCodePlay, normalizeProjectPath, parseCodePlayTags, parsePlayFences, projectSandboxFromPayloadInput, projectSandboxProviderLabel, readPlayPayload, renderConfigHtml, renderDiagnosticsHtml, renderPlayUi, renderProjectSandboxHtml, renderProvenanceHtml, renderRunStatusText, renderStderrHtml, renderStdioHtml, renderTimingHtml, resolveCodePlayOptions, resolveLanguage, resultRunActionState, rewritePlayFences, runPlayAction, runningRunActionState, selectStream, stripPlayMeta, withStdioText };
 //# sourceMappingURL=index.d.mts.map

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ox-content/code-play",
-  "version": "3.0.0-alpha.12",
+  "version": "3.0.0-alpha.14",
   "description": "Opt-in Code Play plugin for on-demand documentation sample execution",
   "keywords": [
     "code-play",