@mcp-b/interactive-components 0.2.21 → 0.3.0

package/dist/docs/custom-elements.json

@@ -757,15 +757,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "_dark",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "_view",
@@ -790,12 +781,6 @@
               "privacy": "private",
               "default": "new Compartment()"
             },
-            {
-              "kind": "field",
-              "name": "_themeCompartment",
-              "privacy": "private",
-              "default": "new Compartment()"
-            },
             {
               "kind": "field",
               "name": "_readonlyCompartment",
@@ -817,41 +802,6 @@
               "privacy": "private",
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "_themeObserver",
-              "type": {
-                "text": "MutationObserver | null",
-                "references": [
-                  {
-                    "name": "MutationObserver",
-                    "package": "dom",
-                    "start": 0,
-                    "end": 16
-                  }
-                ]
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "_systemTheme",
-              "type": {
-                "text": "MediaQueryList | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "_onSystemThemeChange",
-              "type": {
-                "text": "(() => void) | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
             {
               "kind": "method",
               "name": "firstUpdated",
@@ -879,21 +829,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "_isDark",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_observeTheme",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "_createView",
@@ -940,7 +875,7 @@
               }
             },
             {
-              "description": "Fires when the document content changes. `event.detail.value` contains the new content.",
+              "description": "Fires when the document content changes. Read the new content from the element’s `value` property.",
               "name": "sigvelo-change"
             }
           ],
@@ -950,7 +885,7 @@
           },
           "tagName": "sigvelo-code-editor",
           "customElement": true,
-          "summary": "A CodeMirror 6 wrapper that provides syntax-highlighted editing for\na single document. Supports JavaScript, TypeScript, JSX, TSX, HTML, and CSS.\nAutomatically detects dark mode from the `data-theme` attribute on the\ndocument root and applies the One Dark CodeMirror theme accordingly."
+          "summary": "A CodeMirror 6 wrapper that provides syntax-highlighted editing for\na single document. Supports JavaScript, TypeScript, JSX, TSX, HTML, and CSS.\nUses the shared editor tokens, inheriting scoped `data-theme` overrides\nand the operating-system theme. Tab moves focus out of the editor."
         }
       ],
       "exports": [
@@ -1078,6 +1013,24 @@
               "privacy": "private",
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "_runId",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_hasRun",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_pendingPyPayload",
@@ -1549,7 +1502,7 @@
                 {
                   "name": "changed",
                   "type": {
-                    "text": "PropertyValues",
+                    "text": "PropertyValues<this>",
                     "references": [
                       {
                         "name": "PropertyValues",
@@ -1571,7 +1524,7 @@
                 {
                   "name": "changed",
                   "type": {
-                    "text": "PropertyValues",
+                    "text": "PropertyValues<this>",
                     "references": [
                       {
                         "name": "PropertyValues",
@@ -1619,7 +1572,23 @@
             {
               "kind": "method",
               "name": "_initFiles",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "previousFiles",
+                  "default": "[]",
+                  "type": {
+                    "text": "EditorFile[]",
+                    "references": [
+                      {
+                        "name": "EditorFile",
+                        "start": 0,
+                        "end": 10
+                      }
+                    ]
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -1701,6 +1670,27 @@
               "name": "_confirmAddFile",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_onNewFileNameInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event",
+                    "references": [
+                      {
+                        "name": "Event",
+                        "package": "dom",
+                        "start": 0,
+                        "end": 5
+                      }
+                    ]
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_dismissAddFile",

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { n as FileLanguage, s as detectLanguage, t as EditorFile } from "./transform-DWhHlnkw.js";
+import { EditorFile, FileLanguage, detectLanguage } from "./lib/transform.js";
 import { SigveloCodeEditor } from "./components/code-editor/code-editor.js";
 import { SigveloCodePreview } from "./components/code-preview/code-preview.js";
 import { SigveloInteractiveEditor } from "./components/interactive-editor/interactive-editor.js";

package/dist/index.js

@@ -1,8 +1,8 @@
-import { t as SigveloCodeEditor } from "./code-editor-B94tewLC.js";
+import { t as SigveloCodeEditor } from "./code-editor-hnbxw8Xk.js";
 import { detectLanguage } from "./lib/transform.js";
 import { getRunnerUrl, setRunnerBaseUrl } from "./lib/runner-url.js";
-import { t as SigveloCodePreview } from "./code-preview-gKk0nBKP.js";
-import { t as SigveloInteractiveEditor } from "./interactive-editor-WfTWxJGF.js";
-import { t as SigveloREditor } from "./r-editor-DwSyDo2i.js";
-import { t as SigveloSqlEditor } from "./sql-editor-CsNrjJ2_.js";
+import { t as SigveloCodePreview } from "./code-preview-Pq2CFfK9.js";
+import { t as SigveloInteractiveEditor } from "./interactive-editor-DQfrcGUo.js";
+import { t as SigveloREditor } from "./r-editor-BuoVoBdn.js";
+import { t as SigveloSqlEditor } from "./sql-editor-26vbWzLE.js";
 export { SigveloCodeEditor, SigveloCodePreview, SigveloInteractiveEditor, SigveloREditor, SigveloSqlEditor, detectLanguage, getRunnerUrl, setRunnerBaseUrl };

package/dist/{interactive-editor-WfTWxJGF.js → interactive-editor-DQfrcGUo.js}

@@ -1,7 +1,7 @@
-import "./code-editor-B94tewLC.js";
+import { t as SigveloCodeEditor } from "./code-editor-hnbxw8Xk.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
 import { detectLanguage } from "./lib/transform.js";
-import "./code-preview-gKk0nBKP.js";
+import "./code-preview-Pq2CFfK9.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
@@ -744,6 +744,7 @@ const FILE_DEFAULTS = {
 	sql: "-- SQL\n"
 };
 const COMPACT_BREAKPOINT = 560;
+const RUN_DEBOUNCE_MS = 800;
 const ICON_PLAY = html`
   <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="display: block">
     <path d="M5 3l14 9-14 9V3z" />
@@ -938,6 +939,7 @@ var SigveloInteractiveEditor = class extends SigveloElement {
 			}
 		});
 		this._resizeObserver.observe(this);
+		if (this.hasUpdated) this._runCode(false);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -946,7 +948,7 @@ var SigveloInteractiveEditor = class extends SigveloElement {
 	}
 	willUpdate(changed) {
 		if (changed.has("files")) {
-			this._initFiles();
+			this._initFiles(changed.get("files"));
 			this._consoleLogs = [];
 			this._unreadConsoleCount = 0;
 		}
@@ -955,8 +957,7 @@ var SigveloInteractiveEditor = class extends SigveloElement {
 		if (changed.has("files")) this._runCode(false);
 	}
 	_onConsoleMessage(e) {
-		const entry = e.detail;
-		this._consoleLogs = [...this._consoleLogs, entry];
+		this._consoleLogs = [...this._consoleLogs, e.detail].slice(-500);
 		if (this._rightPane !== "console" && !this._compact) this._unreadConsoleCount++;
 		if (this._compact && this._compactView !== "console") this._unreadConsoleCount++;
 	}
@@ -964,12 +965,13 @@ var SigveloInteractiveEditor = class extends SigveloElement {
 		this._consoleLogs = [];
 		this._unreadConsoleCount = 0;
 	}
-	_initFiles() {
+	_initFiles(previousFiles = []) {
 		const prev = this._fileContents;
+		const previousSources = new Map(previousFiles.map((file) => [file.name, file.content]));
 		this._fileContents = /* @__PURE__ */ new Map();
 		const folders = /* @__PURE__ */ new Set();
 		for (const f of this.files) {
-			this._fileContents.set(f.name, prev.get(f.name) ?? f.content);
+			this._fileContents.set(f.name, previousSources.get(f.name) === f.content ? prev.get(f.name) ?? f.content : f.content);
 			const parts = f.name.split("/");
 			for (let i = 1; i < parts.length; i++) folders.add(parts.slice(0, i).join("/"));
 		}
@@ -983,18 +985,18 @@ var SigveloInteractiveEditor = class extends SigveloElement {
 		return this.files.find((f) => f.name === this._activeFileName)?.language ?? detectLanguage(this._activeFileName);
 	}
 	_onEditorChange(e) {
-		const value = e.target.value;
+		if (!(e.target instanceof SigveloCodeEditor)) return;
 		this._fileContents = new Map(this._fileContents);
-		this._fileContents.set(this._activeFileName, value);
+		this._fileContents.set(this._activeFileName, e.target.value);
 		this._scheduleRun();
 	}
 	_scheduleRun() {
 		if (!this.autoRun) return;
 		if (this._runDebounce) clearTimeout(this._runDebounce);
-		this._runDebounce = setTimeout(() => void this._runCode(), 800);
+		this._runDebounce = setTimeout(() => void this._runCode(), RUN_DEBOUNCE_MS);
 	}
 	async _runCode(clearConsole = true) {
-		if (!this._preview) return;
+		if (!this.isConnected || !this._preview) return;
 		if (clearConsole) {
 			this._consoleLogs = [];
 			this._unreadConsoleCount = 0;
@@ -1062,6 +1064,11 @@ var SigveloInteractiveEditor = class extends SigveloElement {
 		this._dismissAddFile();
 		this._activeFileName = name;
 	}
+	_onNewFileNameInput(e) {
+		if (!(e.target instanceof HTMLInputElement)) return;
+		this._newFileName = e.target.value;
+		this._fileError = "";
+	}
 	_dismissAddFile() {
 		this._showAddFile = false;
 		this._newFileName = "";
@@ -1198,10 +1205,7 @@ var SigveloInteractiveEditor = class extends SigveloElement {
                         placeholder="src/App.tsx"
                         autofocus
                         .value=${this._newFileName}
-                        @input=${(e) => {
-			this._newFileName = e.target.value;
-			this._fileError = "";
-		}}
+                        @input=${this._onNewFileNameInput}
                         @keydown=${(e) => {
 			if (e.key === "Enter") this._confirmAddFile();
 			if (e.key === "Escape") this._dismissAddFile();
@@ -1362,10 +1366,7 @@ var SigveloInteractiveEditor = class extends SigveloElement {
                       type="text"
                       placeholder="filename.ts"
                       .value=${this._newFileName}
-                      @input=${(e) => {
-			this._newFileName = e.target.value;
-			this._fileError = "";
-		}}
+                      @input=${this._onNewFileNameInput}
                       @keydown=${(e) => {
 			if (e.key === "Enter") this._confirmAddFile();
 			if (e.key === "Escape") this._dismissAddFile();

package/dist/lib/transform.d.ts

@@ -1,2 +1,53 @@
-import { a as buildModulePreview, c as needsTransform, i as buildHtmlPreview, l as rewriteNpmImports, n as FileLanguage, o as buildPythonPayload, r as PyScriptRunPayload, s as detectLanguage, t as EditorFile, u as transformCode } from "../transform-DWhHlnkw.js";
+//#region src/lib/transform.d.ts
+/**
+ * In-browser code transformation and preview building.
+ *
+ * - esm.sh transform API for TS/TSX/JSX → ES module transpilation
+ * - Blob URLs for inter-file module resolution
+ * - Import rewriting for npm packages via esm.sh CDN
+ */
+type FileLanguage = "javascript" | "typescript" | "jsx" | "tsx" | "html" | "css" | "python" | "r" | "sql";
+interface EditorFile {
+  name: string;
+  content: string;
+  language?: FileLanguage;
+}
+declare function detectLanguage(filename: string): FileLanguage;
+declare function needsTransform(lang: FileLanguage): boolean;
+declare function transformCode(code: string, filename: string): Promise<string>;
+/** Rewrites bare npm specifiers (`from 'react'`) to esm.sh CDN URLs. */
+declare function rewriteNpmImports(code: string): string;
+/**
+ * Builds a preview for HTML-entry projects. Inlines referenced CSS and JS
+ * files, transforming TS/JSX as needed.
+ */
+declare function buildHtmlPreview(files: Map<string, EditorFile>): Promise<string>;
+/**
+ * Builds a preview for module-entry projects (TS/TSX/JS). Transforms each
+ * file, creates Blob URLs for inter-file imports, and wraps in HTML.
+ *
+ * Returns `{ html, blobUrls }` — caller should revoke blob URLs on cleanup.
+ */
+declare function buildModulePreview(files: Map<string, EditorFile>, entryName: string): Promise<{
+  html: string;
+  blobUrls: string[];
+}>;
+/** Payload sent to the pyscript-runner.html page via postMessage. */
+interface PyScriptRunPayload {
+  type: "pyscript-run";
+  code: string;
+  bodyHtml: string;
+  css: string;
+  config: Record<string, unknown> | null;
+}
+/**
+ * Builds a postMessage payload for the PyScript runner page.
+ *
+ * PyScript cannot run inside srcdoc or blob-URL iframes because it uses
+ * `new URL(m, location.href)` internally, and those iframe types have
+ * invalid base URLs. Instead, we load a static `pyscript-runner.html`
+ * page (served at a real HTTP URL) and send code to it via postMessage.
+ */
+declare function buildPythonPayload(files: Map<string, EditorFile>, entryName: string): PyScriptRunPayload;
+//#endregion
 export { EditorFile, FileLanguage, PyScriptRunPayload, buildHtmlPreview, buildModulePreview, buildPythonPayload, detectLanguage, needsTransform, rewriteNpmImports, transformCode };

package/dist/lib/transform.js

@@ -1,4 +1,12 @@
+import { isRecord } from "./runner-channel.js";
 //#region src/lib/transform.ts
+/**
+* In-browser code transformation and preview building.
+*
+* - esm.sh transform API for TS/TSX/JSX → ES module transpilation
+* - Blob URLs for inter-file module resolution
+* - Import rewriting for npm packages via esm.sh CDN
+*/
 function detectLanguage(filename) {
 	return {
 		ts: "typescript",
@@ -32,7 +40,9 @@ async function transformCode(code, filename) {
 		const text = await res.text();
 		throw new Error(`esm.sh transform failed (${res.status}): ${text}`);
 	}
-	return (await res.json()).code;
+	const payload = await res.json();
+	if (!isRecord(payload) || typeof payload.code !== "string") throw new Error(`esm.sh transform returned an unexpected payload for ${filename}`);
+	return payload.code;
 }
 /** Rewrites bare npm specifiers (`from 'react'`) to esm.sh CDN URLs. */
 function rewriteNpmImports(code) {
@@ -104,25 +114,21 @@ async function buildModulePreview(files, entryName) {
 	}
 	const cssChunks = [];
 	for (const [, file] of files) if ((file.language ?? detectLanguage(file.name)) === "css") cssChunks.push(file.content);
-	const fileNames = [...transformed.keys()];
 	const blobUrlMap = /* @__PURE__ */ new Map();
-	for (const name of fileNames) {
-		let code = transformed.get(name);
-		code = patchRelativeImports(code, name, blobUrlMap);
-		const blob = new Blob([code], { type: "text/javascript" });
+	for (const [name, source] of transformed) {
+		const blob = new Blob([patchRelativeImports(source, name, blobUrlMap)], { type: "text/javascript" });
 		const url = URL.createObjectURL(blob);
 		blobUrlMap.set(name, url);
 		blobUrls.push(url);
 	}
-	if (fileNames.length > 1) {
-		const entryUrl = blobUrlMap.get(entryName);
-		if (entryUrl) {
-			URL.revokeObjectURL(entryUrl);
-			blobUrls.splice(blobUrls.indexOf(entryUrl), 1);
+	const entrySource = transformed.get(entryName);
+	if (entrySource !== void 0 && transformed.size > 1) {
+		const staleEntryUrl = blobUrlMap.get(entryName);
+		if (staleEntryUrl) {
+			URL.revokeObjectURL(staleEntryUrl);
+			blobUrls.splice(blobUrls.indexOf(staleEntryUrl), 1);
 		}
-		let code = transformed.get(entryName);
-		code = patchRelativeImports(code, entryName, blobUrlMap);
-		const blob = new Blob([code], { type: "text/javascript" });
+		const blob = new Blob([patchRelativeImports(entrySource, entryName, blobUrlMap)], { type: "text/javascript" });
 		const url = URL.createObjectURL(blob);
 		blobUrlMap.set(entryName, url);
 		blobUrls.push(url);
@@ -163,7 +169,9 @@ function buildPythonPayload(files, entryName) {
 	const jsonFile = files.get("pyscript.json");
 	if (jsonFile) try {
 		config = JSON.parse(jsonFile.content);
-	} catch {}
+	} catch {
+		config = null;
+	}
 	const htmlFile = files.get("index.html");
 	const bodyHtml = htmlFile ? htmlFile.content.replace(/<!DOCTYPE[^>]*>/i, "").replace(/<\/?html[^>]*>/gi, "").replace(/<head[\s\S]*?<\/head>/i, "").replace(/<\/?body[^>]*>/gi, "") : "";
 	return {

package/dist/{r-editor-DwSyDo2i.js → r-editor-BuoVoBdn.js}

@@ -1,4 +1,4 @@
-import "./code-editor-B94tewLC.js";
+import { t as SigveloCodeEditor } from "./code-editor-hnbxw8Xk.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
 import { bindRunnerUrl, connectRunner, createRunnerChannelId, isRecord, parseRunnerConsoleMessage } from "./lib/runner-channel.js";
 import { getRunnerUrl } from "./lib/runner-url.js";
@@ -416,7 +416,8 @@ var SigveloREditor = class extends SigveloElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this._editedCode = this.code;
+		if (!this.hasUpdated) this._editedCode = this.code;
+		if (this.hasUpdated) this._initRunner();
 		this._resizeObserver = new ResizeObserver((entries) => {
 			for (const entry of entries) {
 				const compact = entry.contentRect.width < COMPACT_BREAKPOINT;
@@ -437,10 +438,16 @@ var SigveloREditor = class extends SigveloElement {
 		this._runnerIframe = null;
 	}
 	_initRunner() {
+		if (!this.isConnected || this._runnerIframe) return;
+		this._webRReady = false;
+		this._webRLoading = true;
+		this._loadingMessage = "Initializing WebR...";
+		this._running = false;
 		const iframe = document.createElement("iframe");
 		iframe.style.display = "none";
 		iframe.sandbox.add("allow-scripts");
 		iframe.addEventListener("load", () => {
+			if (!this.isConnected || this._runnerIframe !== iframe) return;
 			this._runnerPort?.close();
 			this._runnerPort = connectRunner(iframe, this._runnerChannelId, (data) => this._onMessage(data));
 		}, { once: true });
@@ -464,8 +471,7 @@ var SigveloREditor = class extends SigveloElement {
 		}
 		const consoleMessage = parseRunnerConsoleMessage(data);
 		if (consoleMessage) {
-			const entry = consoleMessage;
-			this._consoleLogs = [...this._consoleLogs, entry];
+			this._consoleLogs = [...this._consoleLogs, consoleMessage].slice(-500);
 			if (!this._compact && this._rightPane !== "console") this._unreadConsoleCount++;
 			if (this._compact && this._compactView !== "console") this._unreadConsoleCount++;
 			return;
@@ -500,6 +506,7 @@ var SigveloREditor = class extends SigveloElement {
 		});
 	}
 	_onEditorChange(e) {
+		if (!(e.target instanceof SigveloCodeEditor)) return;
 		this._editedCode = e.target.value;
 	}
 	_prevPlot() {

package/dist/{sql-editor-CsNrjJ2_.js → sql-editor-26vbWzLE.js}

@@ -1,4 +1,4 @@
-import "./code-editor-B94tewLC.js";
+import { t as SigveloCodeEditor } from "./code-editor-hnbxw8Xk.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
 import { isRecord } from "./lib/runner-channel.js";
 import { getRunnerUrl } from "./lib/runner-url.js";
@@ -435,6 +435,15 @@ var sql_editor_styles_default = css`
 `;
 //#endregion
 //#region src/components/sql-editor/sql-editor.ts
+function isResultField(value) {
+	return isRecord(value) && typeof value.name === "string" && typeof value.dataTypeID === "number";
+}
+function isSchemaColumn(value) {
+	return isRecord(value) && typeof value.name === "string" && typeof value.type === "string" && typeof value.nullable === "boolean";
+}
+function isSchemaTable(value) {
+	return isRecord(value) && typeof value.name === "string" && Array.isArray(value.columns) && value.columns.every(isSchemaColumn);
+}
 const ICON_PLAY = html`
   <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="display: block">
     <path d="M5 3l14 9-14 9V3z" />
@@ -483,8 +492,9 @@ const MAX_DISPLAY_ROWS = 1e3;
 function formatCell(value) {
 	if (value === null || value === void 0) return "";
 	if (typeof value === "string") return value;
-	if (typeof value === "object") return JSON.stringify(value) ?? "";
-	return typeof value === "symbol" ? value.toString() : `${value}`;
+	if (typeof value === "number" || typeof value === "bigint" || typeof value === "boolean") return String(value);
+	if (typeof value === "symbol") return value.toString();
+	return JSON.stringify(value) ?? "";
 }
 /**
 * `<sigvelo-sql-editor>`
@@ -533,7 +543,8 @@ var SigveloSqlEditor = class extends SigveloElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this._editedCode = this.code;
+		if (!this.hasUpdated) this._editedCode = this.code;
+		if (this.hasUpdated) this._initRunner();
 		this._resizeObserver = new ResizeObserver((entries) => {
 			for (const entry of entries) {
 				const compact = entry.contentRect.width < COMPACT_BREAKPOINT;
@@ -554,14 +565,20 @@ var SigveloSqlEditor = class extends SigveloElement {
 		this._runner = null;
 	}
 	_initRunner() {
+		if (!this.isConnected || this._runner) return;
+		this._pgliteReady = false;
+		this._pgliteLoading = true;
+		this._loadingMessage = "Initializing PostgreSQL...";
+		this._running = false;
 		const runner = new Worker(getRunnerUrl("pglite"), {
 			name: "sigvelo-pglite",
 			type: "module"
 		});
 		runner.addEventListener("message", (event) => {
-			this._onMessage(event.data);
+			if (this._runner === runner && this.isConnected) this._onMessage(event.data);
 		});
 		runner.addEventListener("error", (event) => {
+			if (this._runner !== runner || !this.isConnected) return;
 			this._pgliteLoading = false;
 			this._error = event.message || "PostgreSQL runner failed to load";
 		});
@@ -597,7 +614,7 @@ var SigveloSqlEditor = class extends SigveloElement {
 			this._requestSchema();
 			return;
 		}
-		if (data.__sigvelo_pglite_result === true && Array.isArray(data.fields) && data.fields.every((field) => isRecord(field) && typeof field.name === "string" && typeof field.dataTypeID === "number") && Array.isArray(data.rows) && data.rows.every(isRecord) && typeof data.rowCount === "number" && typeof data.executionTimeMs === "number") {
+		if (data.__sigvelo_pglite_result === true && Array.isArray(data.fields) && data.fields.every(isResultField) && Array.isArray(data.rows) && data.rows.every(isRecord) && typeof data.rowCount === "number" && typeof data.executionTimeMs === "number") {
 			this._resultFields = data.fields;
 			this._resultRows = data.rows;
 			this._rowCount = data.rowCount;
@@ -620,7 +637,7 @@ var SigveloSqlEditor = class extends SigveloElement {
 			this._pgliteLoading = false;
 			return;
 		}
-		if (data.__sigvelo_pglite_schema === true && Array.isArray(data.tables) && data.tables.every((table) => isRecord(table) && typeof table.name === "string" && Array.isArray(table.columns) && table.columns.every((column) => isRecord(column) && typeof column.name === "string" && typeof column.type === "string" && typeof column.nullable === "boolean"))) {
+		if (data.__sigvelo_pglite_schema === true && Array.isArray(data.tables) && data.tables.every(isSchemaTable)) {
 			this._schema = data.tables;
 			if (this._expandedTables.size === 0) this._expandedTables = new Set(this._schema.map((t) => t.name));
 			return;
@@ -655,6 +672,7 @@ var SigveloSqlEditor = class extends SigveloElement {
 		});
 	}
 	_onEditorChange(e) {
+		if (!(e.target instanceof SigveloCodeEditor)) return;
 		this._editedCode = e.target.value;
 	}
 	_resetDatabase() {

package/dist/themes/interactive.css

@@ -14,11 +14,12 @@
  * surface stays even.
  */
 
-:root {
-  /* Structure: derived, so the editor sits on the same surfaces as CodeBlock. */
-  --sigvelo-interactive-editor-bg: var(--sigvelo-color-neutral-bg-subtle);
+:root,
+[data-theme] {
+  /* An opaque surface keeps nested editor layers from compounding alpha and reducing contrast. */
+  --sigvelo-interactive-editor-bg: var(--sigvelo-color-surface-sunken);
   --sigvelo-interactive-editor-gutter-bg: transparent;
-  --sigvelo-interactive-editor-gutter-text: var(--sigvelo-color-text-faint);
+  --sigvelo-interactive-editor-gutter-text: var(--sigvelo-color-text-muted);
   --sigvelo-interactive-editor-selection: var(--sigvelo-color-primary-bg-muted);
   --sigvelo-interactive-editor-active-line: var(--sigvelo-color-neutral-bg-muted);
   --sigvelo-interactive-editor-cursor: var(--sigvelo-color-text);
@@ -28,13 +29,13 @@
   /* Syntax hues, light. */
   --sigvelo-interactive-syn-keyword: #a032a8;
   --sigvelo-interactive-syn-string: #0a6640;
-  --sigvelo-interactive-syn-comment: var(--sigvelo-color-text-subtle);
-  --sigvelo-interactive-syn-number: #7c4dff;
+  --sigvelo-interactive-syn-comment: var(--sigvelo-color-text-muted);
+  --sigvelo-interactive-syn-number: #663dcc;
   --sigvelo-interactive-syn-function: #0550ae;
-  --sigvelo-interactive-syn-variable: #b3541e;
+  --sigvelo-interactive-syn-variable: #934615;
   --sigvelo-interactive-syn-type: #0550ae;
   --sigvelo-interactive-syn-tag: #0a6640;
-  --sigvelo-interactive-syn-attribute: #b3541e;
+  --sigvelo-interactive-syn-attribute: #934615;
   --sigvelo-interactive-syn-property: #0550ae;
   --sigvelo-interactive-syn-punctuation: var(--sigvelo-color-text-muted);
 }
@@ -57,12 +58,12 @@
 [data-theme="light"] {
   --sigvelo-interactive-syn-keyword: #a032a8;
   --sigvelo-interactive-syn-string: #0a6640;
-  --sigvelo-interactive-syn-number: #7c4dff;
+  --sigvelo-interactive-syn-number: #663dcc;
   --sigvelo-interactive-syn-function: #0550ae;
-  --sigvelo-interactive-syn-variable: #b3541e;
+  --sigvelo-interactive-syn-variable: #934615;
   --sigvelo-interactive-syn-type: #0550ae;
   --sigvelo-interactive-syn-tag: #0a6640;
-  --sigvelo-interactive-syn-attribute: #b3541e;
+  --sigvelo-interactive-syn-attribute: #934615;
   --sigvelo-interactive-syn-property: #0550ae;
 }