@mcp-b/interactive-components 0.2.0

package/dist/lib/runner-channel.d.ts

@@ -0,0 +1,25 @@
+//#region src/lib/runner-channel.d.ts
+declare const RUNNER_CONNECT_TYPE = "sigvelo-runner-connect-v1";
+declare const RUNNER_CHANNEL_PARAM = "sigvelo-channel";
+declare const RUNNER_PARENT_ORIGIN_PARAM = "sigvelo-parent-origin";
+/** Creates a 128-bit runner capability without requiring a secure context. */
+declare function createRunnerChannelId(): string;
+interface RunnerConsoleMessage {
+  __sigvelo_console: true;
+  level: "log" | "warn" | "error" | "info";
+  args: string[];
+  ts: number;
+}
+declare function isRecord(value: unknown): value is Record<string, unknown>;
+declare function parseRunnerConsoleMessage(value: unknown): RunnerConsoleMessage | null;
+declare function bindRunnerUrl(url: URL, channelId: string): URL;
+/**
+ * Gives one sandboxed runner a private channel. An opaque-origin iframe cannot
+ * be named by `targetOrigin`, so the one wildcard send is restricted to its
+ * exact WindowProxy and transfers only a fresh port. The runner validates the
+ * sender window, sender origin, protocol marker, and transferred port before
+ * accepting it; all subsequent traffic stays off the global `message` event.
+ */
+declare function connectRunner(iframe: HTMLIFrameElement, channelId: string, onMessage: (data: unknown) => void): MessagePort | null;
+//#endregion
+export { RUNNER_CHANNEL_PARAM, RUNNER_CONNECT_TYPE, RUNNER_PARENT_ORIGIN_PARAM, RunnerConsoleMessage, bindRunnerUrl, connectRunner, createRunnerChannelId, isRecord, parseRunnerConsoleMessage };

package/dist/lib/runner-channel.js

@@ -0,0 +1,55 @@
+//#region src/lib/runner-channel.ts
+const RUNNER_CONNECT_TYPE = "sigvelo-runner-connect-v1";
+const RUNNER_CHANNEL_PARAM = "sigvelo-channel";
+const RUNNER_PARENT_ORIGIN_PARAM = "sigvelo-parent-origin";
+/** Creates a 128-bit runner capability without requiring a secure context. */
+function createRunnerChannelId() {
+	const values = crypto.getRandomValues(/* @__PURE__ */ new Uint32Array(4));
+	return Array.from(values, (value) => value.toString(16).padStart(8, "0")).join("-");
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function parseRunnerConsoleMessage(value) {
+	if (!isRecord(value) || value.__sigvelo_console !== true) return null;
+	if (value.level !== "log" && value.level !== "warn" && value.level !== "error" && value.level !== "info") return null;
+	if (!Array.isArray(value.args) || !value.args.every((arg) => typeof arg === "string")) return null;
+	if (typeof value.ts !== "number" || !Number.isFinite(value.ts)) return null;
+	return {
+		__sigvelo_console: true,
+		level: value.level,
+		args: value.args,
+		ts: value.ts
+	};
+}
+function bindRunnerUrl(url, channelId) {
+	const fragment = new URLSearchParams(url.hash.slice(1));
+	fragment.set(RUNNER_CHANNEL_PARAM, channelId);
+	fragment.set(RUNNER_PARENT_ORIGIN_PARAM, window.location.origin);
+	url.hash = fragment.toString();
+	return url;
+}
+/**
+* Gives one sandboxed runner a private channel. An opaque-origin iframe cannot
+* be named by `targetOrigin`, so the one wildcard send is restricted to its
+* exact WindowProxy and transfers only a fresh port. The runner validates the
+* sender window, sender origin, protocol marker, and transferred port before
+* accepting it; all subsequent traffic stays off the global `message` event.
+*/
+function connectRunner(iframe, channelId, onMessage) {
+	const runnerWindow = iframe.contentWindow;
+	if (!runnerWindow) return null;
+	const channel = new MessageChannel();
+	channel.port1.addEventListener("message", (event) => {
+		onMessage(event.data);
+	});
+	channel.port1.start();
+	runnerWindow.postMessage({
+		type: RUNNER_CONNECT_TYPE,
+		channelId,
+		parentOrigin: window.location.origin
+	}, "*", [channel.port2]);
+	return channel.port1;
+}
+//#endregion
+export { RUNNER_CHANNEL_PARAM, RUNNER_CONNECT_TYPE, RUNNER_PARENT_ORIGIN_PARAM, bindRunnerUrl, connectRunner, createRunnerChannelId, isRecord, parseRunnerConsoleMessage };

package/dist/lib/runner-url.d.ts

@@ -0,0 +1,15 @@
+//#region src/lib/runner-url.d.ts
+type RunnerName = "pglite" | "pyscript" | "webr";
+/**
+ * Overrides the same-origin mount where the complete `dist/runners/` tree is served.
+ *
+ * Hosts must preserve the tree's relative paths and send
+ * `Access-Control-Allow-Origin: *`. The Python and R runners intentionally use
+ * opaque sandbox origins, so their module and runtime fetches require CORS. The
+ * PGlite module worker requires the mount to share the application's origin.
+ */
+declare function setRunnerBaseUrl(url: URL): void;
+/** Returns the runner shipped beside this package's compiled modules. */
+declare function getRunnerUrl(name: RunnerName): URL;
+//#endregion
+export { RunnerName, getRunnerUrl, setRunnerBaseUrl };

package/dist/lib/runner-url.js

@@ -0,0 +1,19 @@
+//#region src/lib/runner-url.ts
+let runnerBaseUrl = new URL("../runners/", import.meta.url);
+/**
+* Overrides the same-origin mount where the complete `dist/runners/` tree is served.
+*
+* Hosts must preserve the tree's relative paths and send
+* `Access-Control-Allow-Origin: *`. The Python and R runners intentionally use
+* opaque sandbox origins, so their module and runtime fetches require CORS. The
+* PGlite module worker requires the mount to share the application's origin.
+*/
+function setRunnerBaseUrl(url) {
+	runnerBaseUrl = new URL(url);
+}
+/** Returns the runner shipped beside this package's compiled modules. */
+function getRunnerUrl(name) {
+	return new URL(`${name}-runner.${name === "pglite" ? "js" : "html"}`, runnerBaseUrl);
+}
+//#endregion
+export { getRunnerUrl, setRunnerBaseUrl };

package/dist/lib/transform.d.ts

@@ -0,0 +1,2 @@
+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";
+export { EditorFile, FileLanguage, PyScriptRunPayload, buildHtmlPreview, buildModulePreview, buildPythonPayload, detectLanguage, needsTransform, rewriteNpmImports, transformCode };

package/dist/lib/transform.js

@@ -0,0 +1,210 @@
+//#region src/lib/transform.ts
+function detectLanguage(filename) {
+	return {
+		ts: "typescript",
+		tsx: "tsx",
+		jsx: "jsx",
+		html: "html",
+		htm: "html",
+		css: "css",
+		js: "javascript",
+		mjs: "javascript",
+		py: "python",
+		r: "r",
+		sql: "sql"
+	}[filename.split(".").pop()?.toLowerCase() ?? ""] ?? "javascript";
+}
+function needsTransform(lang) {
+	return lang === "typescript" || lang === "tsx" || lang === "jsx";
+}
+async function transformCode(code, filename) {
+	const res = await fetch("https://esm.sh/transform", {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({
+			code,
+			filename,
+			target: "es2022",
+			importMap: { imports: {} }
+		})
+	});
+	if (!res.ok) {
+		const text = await res.text();
+		throw new Error(`esm.sh transform failed (${res.status}): ${text}`);
+	}
+	return (await res.json()).code;
+}
+/** Rewrites bare npm specifiers (`from 'react'`) to esm.sh CDN URLs. */
+function rewriteNpmImports(code) {
+	return code.replace(/from\s+['"](?!https?:\/\/|\.\/|\.\.\/|\/)((?:@[^/'"]+\/[^'"]+|[^@.'"][^'"]*))['"];?/g, (_, pkg) => `from 'https://esm.sh/${pkg}';`);
+}
+/**
+* Builds a preview for HTML-entry projects. Inlines referenced CSS and JS
+* files, transforming TS/JSX as needed.
+*/
+async function buildHtmlPreview(files) {
+	const indexHtml = files.get("index.html");
+	if (!indexHtml) return "<html><body><p>No index.html found.</p></body></html>";
+	let doc = indexHtml.content;
+	doc = doc.replace(/<link\s[^>]*rel=["']stylesheet["'][^>]*href=["']([^"']+)["'][^>]*\/?>/gi, (match, href) => {
+		const file = files.get(href);
+		return file ? `<style>\n${file.content}\n</style>` : match;
+	});
+	const moduleFiles = /* @__PURE__ */ new Map();
+	for (const [name, file] of files) {
+		const lang = file.language ?? detectLanguage(name);
+		if (lang === "html" || lang === "css") continue;
+		let code = file.content;
+		if (needsTransform(lang)) code = await transformCode(code, file.name);
+		code = rewriteNpmImports(code);
+		moduleFiles.set(name, code);
+	}
+	const dataUriMap = /* @__PURE__ */ new Map();
+	if (moduleFiles.size > 0) {
+		for (const [name, code] of moduleFiles) dataUriMap.set(name, toJsDataUri(code));
+		for (let pass = 0; pass < moduleFiles.size; pass++) {
+			let changed = false;
+			for (const [name, code] of moduleFiles) {
+				const uri = toJsDataUri(patchRelativeImports(code, name, dataUriMap));
+				if (uri !== dataUriMap.get(name)) {
+					dataUriMap.set(name, uri);
+					changed = true;
+				}
+			}
+			if (!changed) break;
+		}
+	}
+	const scriptMatches = [];
+	for (const m of doc.matchAll(/<script\s[^>]*src=["']([^"']+)["'][^>]*><\/script>/gi)) scriptMatches.push({
+		match: m[0],
+		src: m[1]
+	});
+	for (const { match, src } of scriptMatches) {
+		const dataUri = dataUriMap.get(src);
+		if (dataUri) doc = doc.replace(match, `<script type="module" src="${dataUri}"><\/script>`);
+	}
+	return doc;
+}
+/**
+* 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.
+*/
+async function buildModulePreview(files, entryName) {
+	const blobUrls = [];
+	const transformed = /* @__PURE__ */ new Map();
+	for (const [name, file] of files) {
+		const lang = file.language ?? detectLanguage(name);
+		if (lang === "html" || lang === "css") continue;
+		let code = file.content;
+		if (needsTransform(lang)) code = await transformCode(code, file.name);
+		code = rewriteNpmImports(code);
+		transformed.set(name, code);
+	}
+	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" });
+		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);
+		}
+		let code = transformed.get(entryName);
+		code = patchRelativeImports(code, entryName, blobUrlMap);
+		const blob = new Blob([code], { type: "text/javascript" });
+		const url = URL.createObjectURL(blob);
+		blobUrlMap.set(entryName, url);
+		blobUrls.push(url);
+	}
+	const entryUrl = blobUrlMap.get(entryName) ?? "";
+	const entryLang = detectLanguage(entryName);
+	const isReact = entryLang === "tsx" || entryLang === "jsx";
+	return {
+		html: `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  ${cssChunks.length ? `<style>${cssChunks.join("\n")}</style>` : ""}
+  <style>body { margin: 0; padding: 0; font-family: system-ui, sans-serif; } * { box-sizing: border-box; }</style>
+</head>
+<body>
+  ${isReact ? "<div id=\"root\"></div>" : ""}
+  <script type="module" src="${entryUrl}"><\/script>
+</body>
+</html>`,
+		blobUrls
+	};
+}
+/**
+* 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.
+*/
+function buildPythonPayload(files, entryName) {
+	const entry = files.get(entryName);
+	const cssChunks = [];
+	for (const [, file] of files) if ((file.language ?? detectLanguage(file.name)) === "css") cssChunks.push(file.content);
+	let config = null;
+	const jsonFile = files.get("pyscript.json");
+	if (jsonFile) try {
+		config = JSON.parse(jsonFile.content);
+	} catch {}
+	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 {
+		type: "pyscript-run",
+		code: entry?.content ?? "",
+		bodyHtml,
+		css: cssChunks.join("\n"),
+		config
+	};
+}
+function toJsDataUri(code) {
+	return `data:text/javascript;charset=utf-8,${encodeURIComponent(code).replace(/'/g, "%27")}`;
+}
+function normalizePath(p) {
+	const parts = p.split("/");
+	const out = [];
+	for (const seg of parts) {
+		if (seg === "." || seg === "") continue;
+		if (seg === ".." && out.length > 0) out.pop();
+		else out.push(seg);
+	}
+	return out.join("/");
+}
+function patchRelativeImports(code, currentFile, blobUrlMap) {
+	return code.replace(/from\s+['"](\.[^'"]+)['"]/g, (match, relPath) => {
+		const resolved = normalizePath((currentFile.includes("/") ? currentFile.slice(0, currentFile.lastIndexOf("/") + 1) : "") + relPath);
+		const candidates = [
+			resolved,
+			resolved + ".js",
+			resolved + ".ts",
+			resolved + ".tsx",
+			resolved + ".jsx",
+			resolved.replace(/\.\w+$/, ".js"),
+			resolved.replace(/\.\w+$/, "")
+		];
+		for (const c of candidates) {
+			const url = blobUrlMap.get(c);
+			if (url) return `from '${url}'`;
+		}
+		return match;
+	});
+}
+//#endregion
+export { buildHtmlPreview, buildModulePreview, buildPythonPayload, detectLanguage, needsTransform, rewriteNpmImports, transformCode };