@mcp-b/interactive-components 0.2.0

package/dist/themes/interactive.css

@@ -0,0 +1,79 @@
+/**
+ * Editor and syntax-highlighting tokens for the interactive editors.
+ *
+ * These are component tokens owned by this package, not design-system tokens:
+ * CodeMirror needs a named colour per syntax role, and the design system has no
+ * such vocabulary. Everything structural (surface, gutter, selection, cursor,
+ * text) is expressed in --sigvelo-* so the editors track the active theme, and
+ * only the syntax hues are literals — a hue ramp is the one thing that cannot
+ * be derived from a neutral-forward semantic palette.
+ *
+ * Theming follows the design system's contract rather than a class toggle: the
+ * document follows the OS by default and [data-theme] is an explicit override.
+ * Hues are held at the same tier in both modes so contrast against the editor
+ * 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);
+  --sigvelo-interactive-editor-gutter-bg: transparent;
+  --sigvelo-interactive-editor-gutter-text: var(--sigvelo-color-text-faint);
+  --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);
+  --sigvelo-interactive-editor-text: var(--sigvelo-color-text);
+  --sigvelo-interactive-preview-bg: var(--sigvelo-color-surface);
+
+  /* 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-function: #0550ae;
+  --sigvelo-interactive-syn-variable: #b3541e;
+  --sigvelo-interactive-syn-type: #0550ae;
+  --sigvelo-interactive-syn-tag: #0a6640;
+  --sigvelo-interactive-syn-attribute: #b3541e;
+  --sigvelo-interactive-syn-property: #0550ae;
+  --sigvelo-interactive-syn-punctuation: var(--sigvelo-color-text-muted);
+}
+
+/* Syntax hues, dark. Lightened so each role clears AA on the dark surface. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --sigvelo-interactive-syn-keyword: #d9a2e8;
+    --sigvelo-interactive-syn-string: #7ec699;
+    --sigvelo-interactive-syn-number: #c4a7ff;
+    --sigvelo-interactive-syn-function: #86baf5;
+    --sigvelo-interactive-syn-variable: #e8a87c;
+    --sigvelo-interactive-syn-type: #86baf5;
+    --sigvelo-interactive-syn-tag: #7ec699;
+    --sigvelo-interactive-syn-attribute: #e8a87c;
+    --sigvelo-interactive-syn-property: #86baf5;
+  }
+}
+
+[data-theme="light"] {
+  --sigvelo-interactive-syn-keyword: #a032a8;
+  --sigvelo-interactive-syn-string: #0a6640;
+  --sigvelo-interactive-syn-number: #7c4dff;
+  --sigvelo-interactive-syn-function: #0550ae;
+  --sigvelo-interactive-syn-variable: #b3541e;
+  --sigvelo-interactive-syn-type: #0550ae;
+  --sigvelo-interactive-syn-tag: #0a6640;
+  --sigvelo-interactive-syn-attribute: #b3541e;
+  --sigvelo-interactive-syn-property: #0550ae;
+}
+
+[data-theme="dark"] {
+  --sigvelo-interactive-syn-keyword: #d9a2e8;
+  --sigvelo-interactive-syn-string: #7ec699;
+  --sigvelo-interactive-syn-number: #c4a7ff;
+  --sigvelo-interactive-syn-function: #86baf5;
+  --sigvelo-interactive-syn-variable: #e8a87c;
+  --sigvelo-interactive-syn-type: #86baf5;
+  --sigvelo-interactive-syn-tag: #7ec699;
+  --sigvelo-interactive-syn-attribute: #e8a87c;
+  --sigvelo-interactive-syn-property: #86baf5;
+}

package/dist/transform-DWhHlnkw.d.ts

@@ -0,0 +1,53 @@
+//#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 { buildModulePreview as a, needsTransform as c, buildHtmlPreview as i, rewriteNpmImports as l, FileLanguage as n, buildPythonPayload as o, PyScriptRunPayload as r, detectLanguage as s, EditorFile as t, transformCode as u };

package/dist/vite.d.ts

@@ -0,0 +1,14 @@
+import { viteStaticCopy } from "vite-plugin-static-copy";
+
+//#region src/vite.d.ts
+interface InteractiveRuntimeAssetsOptions {
+  /** Output directory relative to Vite's public/build root. */
+  destination?: string;
+}
+/**
+ * Copies the sandbox runner entry points and installed engine assets into a
+ * Vite application's public output without embedding them in this package.
+ */
+declare function interactiveRuntimeAssets(options?: InteractiveRuntimeAssetsOptions): ReturnType<typeof viteStaticCopy>;
+//#endregion
+export { InteractiveRuntimeAssetsOptions, interactiveRuntimeAssets };

package/dist/vite.js

@@ -0,0 +1,62 @@
+import { createRequire } from "node:module";
+import { dirname, join, posix, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+//#region src/vite.ts
+const require = createRequire(import.meta.url);
+const runnerRoot = resolve(dirname(fileURLToPath(import.meta.url)), "runners");
+function packageRuntime(entrypoint, license) {
+	const dist = dirname(require.resolve(entrypoint));
+	return {
+		dist,
+		license: resolve(dist, "..", license)
+	};
+}
+function pyscriptRuntime() {
+	const root = dirname(require.resolve("@pyscript/core/package.json"));
+	return {
+		dist: resolve(root, "dist"),
+		license: resolve(root, "LICENSE")
+	};
+}
+/**
+* Copies the sandbox runner entry points and installed engine assets into a
+* Vite application's public output without embedding them in this package.
+*/
+function interactiveRuntimeAssets(options = {}) {
+	const destination = options.destination ?? "sigvelo-runners";
+	const runtimes = [
+		{
+			directory: "pglite",
+			...packageRuntime("@electric-sql/pglite", "LICENSE")
+		},
+		{
+			directory: "pglite-postgis",
+			...packageRuntime("@electric-sql/pglite-postgis", "LICENSE")
+		},
+		{
+			directory: "pyscript",
+			...pyscriptRuntime()
+		},
+		{
+			directory: "webr",
+			...packageRuntime("webr", "LICENSE.md")
+		}
+	];
+	return viteStaticCopy({ targets: [{
+		src: join(runnerRoot, "*.{html,js}"),
+		dest: destination
+	}, ...runtimes.flatMap(({ directory, dist, license }) => {
+		const runtimeDestination = posix.join(destination, directory);
+		return [{
+			src: dist,
+			dest: runtimeDestination,
+			rename: "."
+		}, {
+			src: license,
+			dest: runtimeDestination
+		}];
+	})] });
+}
+//#endregion
+export { interactiveRuntimeAssets };

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@mcp-b/interactive-components",
+  "version": "0.2.0",
+  "description": "Sigvelo interactive code editor components built with Lit.",
+  "keywords": [
+    "code-editor",
+    "codemirror",
+    "custom-elements",
+    "interactive",
+    "lit-element",
+    "typescript",
+    "web-components"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WebMCP-org/design-system.git",
+    "directory": "packages/interactive-components"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/*": "./dist/components/*",
+    "./runners/*": "./dist/runners/*",
+    "./themes/*": "./dist/themes/*",
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
+    },
+    "./custom-elements.json": "./dist/docs/custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.3",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-sql": "^6.8.0",
+    "@codemirror/language": "^6.11.0",
+    "@codemirror/legacy-modes": "^6.5.2",
+    "@codemirror/search": "^6.5.10",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.36.8",
+    "@electric-sql/pglite": "0.4.2",
+    "@electric-sql/pglite-postgis": "0.0.4",
+    "@lezer/highlight": "^1.2.1",
+    "@pyscript/core": "0.7.19",
+    "vite-plugin-static-copy": "^3.3.0",
+    "webr": "0.5.8",
+    "@mcp-b/wc-support": "0.2.0",
+    "@mcp-b/web-components": "0.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@storybook/addon-a11y": "^10.5.2",
+    "@storybook/addon-docs": "^10.5.2",
+    "@storybook/addon-vitest": "^10.5.2",
+    "@storybook/web-components-vite": "10.5.2",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
+    "playwright": "~1.61.0",
+    "storybook": "^10.5.2",
+    "tinyglobby": "^0.2.15",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plugin-static-copy": "^3.3.0",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "lit-html": "^3.0.0"
+  },
+  "customElements": "dist/docs/custom-elements.json",
+  "scripts": {
+    "analyze": "cem analyze --globs \"src/**/*.ts\" --exclude \"**/*.stories.ts\" --exclude \"**/*.test.ts\" --exclude \"**/*.styles.ts\" --outdir \"dist/docs\"",
+    "analyze:dev": "cem analyze --globs \"src/**/*.ts\" --exclude \"**/*.stories.ts\" --exclude \"**/*.test.ts\" --exclude \"**/*.styles.ts\" --outdir \"dist/docs\" --watch",
+    "build": "tsc -p tsconfig.prod.json && vp run build:lib && vp run analyze",
+    "build:lib": "vp pack && node scripts/copy-runner-entrypoints.mjs",
+    "lint": "cem analyze",
+    "storybook": "vp run @mcp-b/web-components#storybook",
+    "test": "vp run @mcp-b/web-components#test",
+    "typecheck": "tsc --noEmit"
+  }
+}