@mcp-b/interactive-components 0.2.0

package/dist/runners/ephemeral-indexeddb.js

@@ -0,0 +1,114 @@
+// PyScript's filesystem bridge instantiates IDBMap at module load for file
+// handle metadata. Opaque sandbox origins are intentionally denied browser
+// storage, so this implements only that IDBMap surface in runner-local memory.
+
+export function createEphemeralIndexedDB() {
+  const databases = new Map();
+
+  function clone(value) {
+    try {
+      return structuredClone(value);
+    } catch {
+      return value;
+    }
+  }
+
+  function resolvedRequest(result) {
+    const request = { result, error: null, onsuccess: null, onerror: null };
+    queueMicrotask(() => request.onsuccess?.({ target: request }));
+    return request;
+  }
+
+  function createObjectStore(entries) {
+    return {
+      count: () => resolvedRequest(entries.size),
+      clear: () => {
+        entries.clear();
+        return resolvedRequest(undefined);
+      },
+      delete: (key) => {
+        entries.delete(key);
+        return resolvedRequest(undefined);
+      },
+      get: (key) => resolvedRequest(entries.has(key) ? clone(entries.get(key)) : undefined),
+      getAllKeys: () => resolvedRequest(Array.from(entries.keys())),
+      getKey: (key) => resolvedRequest(entries.has(key) ? key : undefined),
+      put: (value, key) => {
+        entries.set(key, clone(value));
+        return resolvedRequest(key);
+      },
+    };
+  }
+
+  function createDatabase(stores) {
+    return {
+      objectStoreNames: {
+        get length() {
+          return stores.size;
+        },
+        contains: (name) => stores.has(name),
+      },
+      createObjectStore: (name) => {
+        const entries = new Map();
+        stores.set(name, entries);
+        return createObjectStore(entries);
+      },
+      transaction: (name) => ({
+        objectStore: () => {
+          const entries = stores.get(name);
+          if (!entries) throw new Error(`Object store does not exist: ${name}`);
+          return createObjectStore(entries);
+        },
+      }),
+      close: () => {},
+    };
+  }
+
+  return {
+    open(name) {
+      const request = {
+        result: null,
+        error: null,
+        transaction: null,
+        onupgradeneeded: null,
+        onsuccess: null,
+        onerror: null,
+      };
+      queueMicrotask(() => {
+        let stores = databases.get(name);
+        const isNew = !stores;
+        if (!stores) {
+          stores = new Map();
+          databases.set(name, stores);
+        }
+        const database = createDatabase(stores);
+        request.result = database;
+        if (isNew && request.onupgradeneeded) {
+          const upgrade = { oncomplete: null };
+          request.transaction = upgrade;
+          request.onupgradeneeded({ target: request });
+          queueMicrotask(() => {
+            upgrade.oncomplete?.({ target: upgrade });
+            request.onsuccess?.({ target: request });
+          });
+        } else {
+          request.onsuccess?.({ target: request });
+        }
+      });
+      return request;
+    },
+    deleteDatabase(name) {
+      databases.delete(name);
+      return resolvedRequest(undefined);
+    },
+  };
+}
+
+export function installEphemeralIndexedDB() {
+  const ephemeralIndexedDB = createEphemeralIndexedDB();
+  Object.defineProperty(globalThis, "indexedDB", {
+    configurable: true,
+    value: ephemeralIndexedDB,
+  });
+  return ephemeralIndexedDB;
+}

package/dist/runners/pglite-runner.js

@@ -0,0 +1,175 @@
+import { PGlite } from "./pglite/index.js";
+
+let db = null;
+
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function errorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+
+function post(message) {
+  self.postMessage(message);
+}
+
+async function initialize({ dbName, postgis }) {
+  if (db) return;
+  post({ __sigvelo_pglite_loading: true, message: "Initializing PostgreSQL..." });
+
+  try {
+    const options = { relaxedDurability: true };
+    if (dbName) options.dataDir = `idb://${dbName}`;
+    if (postgis) {
+      const { postgis: extension } = await import("./pglite-postgis/index.js");
+      options.extensions = { postgis: extension };
+    }
+
+    db = await PGlite.create(options);
+    if (postgis) {
+      post({ __sigvelo_pglite_loading: true, message: "Loading PostGIS extension..." });
+      await db.exec("CREATE EXTENSION IF NOT EXISTS postgis;");
+    }
+    post({ __sigvelo_pglite_ready: true });
+  } catch (error) {
+    post({
+      __sigvelo_pglite_error: true,
+      id: -1,
+      message: `Init failed: ${errorMessage(error)}`,
+    });
+  }
+}
+
+async function execute(sql, id) {
+  if (!db) {
+    post({
+      __sigvelo_pglite_error: true,
+      id,
+      message: "Database not initialized",
+    });
+    post({ __sigvelo_pglite_done: true });
+    return;
+  }
+
+  const start = performance.now();
+  try {
+    const results = await db.exec(sql);
+    const elapsed = performance.now() - start;
+    let result = results.at(-1);
+    for (let index = results.length - 1; index >= 0; index--) {
+      if (results[index].fields.length > 0) {
+        result = results[index];
+        break;
+      }
+    }
+    post({
+      __sigvelo_pglite_result: true,
+      id,
+      rows: result?.rows ?? [],
+      fields: result?.fields ?? [],
+      rowCount: result ? (result.affectedRows ?? result.rows.length) : 0,
+      executionTimeMs: Math.round(elapsed),
+    });
+  } catch (error) {
+    post({
+      __sigvelo_pglite_error: true,
+      id,
+      message: errorMessage(error),
+    });
+  }
+  post({ __sigvelo_pglite_done: true });
+}
+
+async function setup(sql) {
+  if (!db) return;
+  post({ __sigvelo_pglite_loading: true, message: "Loading dataset..." });
+  try {
+    await db.exec(sql);
+    post({ __sigvelo_pglite_setup_done: true });
+  } catch (error) {
+    post({
+      __sigvelo_pglite_error: true,
+      id: -1,
+      message: `Setup failed: ${errorMessage(error)}`,
+    });
+  }
+}
+
+async function sendSchema() {
+  if (!db) return;
+  try {
+    const result = await db.query(
+      "SELECT table_name, column_name, data_type, is_nullable " +
+        "FROM information_schema.columns " +
+        "WHERE table_schema = 'public' " +
+        "ORDER BY table_name, ordinal_position",
+    );
+    const tableMap = {};
+    for (const row of result.rows) {
+      tableMap[row.table_name] ??= [];
+      tableMap[row.table_name].push({
+        name: row.column_name,
+        type: row.data_type,
+        nullable: row.is_nullable === "YES",
+      });
+    }
+    const tables = Object.entries(tableMap).map(([name, columns]) => ({ name, columns }));
+    post({ __sigvelo_pglite_schema: true, tables });
+  } catch (error) {
+    post({
+      __sigvelo_pglite_error: true,
+      id: -1,
+      message: `Schema query failed: ${errorMessage(error)}`,
+    });
+  }
+}
+
+async function reset(setupSql) {
+  if (!db) return;
+  post({ __sigvelo_pglite_loading: true, message: "Resetting database..." });
+  try {
+    const result = await db.query("SELECT tablename FROM pg_tables WHERE schemaname = 'public'");
+    for (const row of result.rows) {
+      const tableName = String(row.tablename).replaceAll('"', '""');
+      await db.exec(`DROP TABLE IF EXISTS "${tableName}" CASCADE`);
+    }
+    if (setupSql) await db.exec(setupSql);
+    post({ __sigvelo_pglite_reset_done: true });
+  } catch (error) {
+    post({
+      __sigvelo_pglite_error: true,
+      id: -1,
+      message: `Reset failed: ${errorMessage(error)}`,
+    });
+  }
+}
+
+self.addEventListener("message", (event) => {
+  const data = event.data;
+  if (!isRecord(data) || typeof data.type !== "string") return;
+
+  switch (data.type) {
+    case "pglite-init":
+      if (typeof data.dbName === "string" && typeof data.postgis === "boolean") {
+        void initialize(data);
+      }
+      break;
+    case "pglite-setup":
+      if (typeof data.sql === "string") void setup(data.sql);
+      break;
+    case "pglite-exec":
+      if (typeof data.sql === "string" && Number.isInteger(data.id)) {
+        void execute(data.sql, data.id);
+      }
+      break;
+    case "pglite-schema":
+      void sendSchema();
+      break;
+    case "pglite-reset":
+      if (data.setupSql === undefined || typeof data.setupSql === "string") {
+        void reset(data.setupSql);
+      }
+      break;
+  }
+});

package/dist/runners/pyscript-runner.html

@@ -0,0 +1,189 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="referrer" content="no-referrer" />
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: system-ui, sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="pyscript-body"></div>
+    <script type="module">
+      import { installEphemeralIndexedDB } from "./ephemeral-indexeddb.js";
+
+      function isRecord(value) {
+        return typeof value === "object" && value !== null && !Array.isArray(value);
+      }
+
+      installEphemeralIndexedDB();
+
+      function createRunnerEndpoint(onMessage) {
+        var port = null;
+        var pending = [];
+        var params = new URLSearchParams(window.location.hash.slice(1));
+        var channelId = params.get("sigvelo-channel");
+        var parentOrigin = params.get("sigvelo-parent-origin");
+
+        function connect(event) {
+          if (
+            event.source !== window.parent ||
+            !parentOrigin ||
+            event.origin !== parentOrigin ||
+            !isRecord(event.data) ||
+            event.data.type !== "sigvelo-runner-connect-v1" ||
+            event.data.channelId !== channelId ||
+            event.data.parentOrigin !== parentOrigin ||
+            event.ports.length !== 1
+          )
+            return;
+
+          port = event.ports[0];
+          port.onmessage = function (message) {
+            onMessage(message.data);
+          };
+          port.start();
+          pending.splice(0).forEach(function (message) {
+            port.postMessage(message);
+          });
+          window.removeEventListener("message", connect);
+        }
+
+        window.addEventListener("message", connect);
+        return {
+          postMessage(message) {
+            if (port) port.postMessage(message);
+            else if (pending.length < 100) pending.push(message);
+          },
+        };
+      }
+
+      var runnerEndpoint = createRunnerEndpoint(handleRunnerMessage);
+
+      function postToParent(message) {
+        runnerEndpoint.postMessage(message);
+      }
+
+      // Console capture — forwards console calls to the parent frame.
+      (function () {
+        var _post = function (level, args) {
+          try {
+            postToParent({
+              __sigvelo_console: true,
+              level: level,
+              args: args.map(function (a) {
+                try {
+                  return typeof a === "object" ? JSON.stringify(a, null, 2) : String(a);
+                } catch (e) {
+                  return String(a);
+                }
+              }),
+              ts: Date.now(),
+            });
+          } catch (e) {}
+        };
+        ["log", "warn", "error", "info"].forEach(function (m) {
+          var orig = console[m];
+          console[m] = function () {
+            var args = Array.prototype.slice.call(arguments);
+            _post(m, args);
+            orig.apply(console, args);
+          };
+        });
+        window.addEventListener("error", function (e) {
+          _post("error", [e.message + " at " + e.filename + ":" + e.lineno]);
+        });
+      })();
+
+      function handleRunnerMessage(payload) {
+        if (
+          !isRecord(payload) ||
+          payload.type !== "pyscript-run" ||
+          typeof payload.code !== "string" ||
+          typeof payload.bodyHtml !== "string" ||
+          typeof payload.css !== "string" ||
+          (payload.config !== null && !isRecord(payload.config))
+        ) {
+          return;
+        }
+        var container = document.getElementById("pyscript-body");
+
+        // Clear previous run
+        container.replaceChildren();
+        var oldScripts = document.querySelectorAll(
+          'script[type="py"], py-config, link[data-pyscript], script[data-pyscript]',
+        );
+        oldScripts.forEach(function (el) {
+          el.remove();
+        });
+
+        // Inject body HTML (from index.html file in the editor)
+        if (payload.bodyHtml) {
+          var parsed = new DOMParser().parseFromString(payload.bodyHtml, "text/html");
+          container.replaceChildren(
+            ...Array.from(parsed.body.childNodes, function (node) {
+              return document.importNode(node, true);
+            }),
+          );
+        }
+
+        // Inject user CSS
+        if (payload.css) {
+          var style = document.createElement("style");
+          style.textContent = payload.css;
+          style.setAttribute("data-pyscript", "");
+          document.head.appendChild(style);
+        }
+
+        // Load PyScript if not already loaded.
+        // Uses the package-local copy from @pyscript/core.
+        if (!document.querySelector("script[data-pyscript-core]")) {
+          var cssLink = document.createElement("link");
+          cssLink.rel = "stylesheet";
+          cssLink.href = "./pyscript/core.css";
+          cssLink.setAttribute("data-pyscript-core", "");
+          document.head.appendChild(cssLink);
+
+          var coreScript = document.createElement("script");
+          coreScript.type = "module";
+          coreScript.src = "./pyscript/core.js";
+          coreScript.setAttribute("data-pyscript-core", "");
+          document.head.appendChild(coreScript);
+        }
+
+        // Inject py-config if provided
+        if (payload.config) {
+          var pyConfig = document.createElement("py-config");
+          pyConfig.textContent = JSON.stringify(payload.config);
+          container.appendChild(pyConfig);
+        }
+
+        // Wait briefly for PyScript to register, then inject the py script
+        function injectPy() {
+          var pyScript = document.createElement("script");
+          pyScript.type = "py";
+          pyScript.textContent = payload.code;
+          container.appendChild(pyScript);
+        }
+
+        // Give PyScript a moment to initialize on first load
+        if (document.querySelector("script[data-pyscript-core]")) {
+          setTimeout(injectPy, 500);
+        } else {
+          injectPy();
+        }
+      }
+
+      // Signal ready
+      postToParent({ __sigvelo_pyscript_ready: true });
+    </script>
+  </body>
+</html>