@mcp-b/interactive-components 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MCP-B contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# @mcp-b/interactive-components
+
+Interactive Lit components for browser code, SQL, R, and Python execution.
+
+## Components
+
+| Component                  | Tag                            | Description                                                             |
+| -------------------------- | ------------------------------ | ----------------------------------------------------------------------- |
+| `SigveloCodeEditor`        | `<sigvelo-code-editor>`        | CodeMirror 6 editor with syntax highlighting, folding, and autocomplete |
+| `SigveloCodePreview`       | `<sigvelo-code-preview>`       | Sandboxed iframe preview for HTML/JS/CSS/Python output                  |
+| `SigveloInteractiveEditor` | `<sigvelo-interactive-editor>` | Full playground: file explorer sidebar + editor + preview/console       |
+| `SigveloSqlEditor`         | `<sigvelo-sql-editor>`         | Isolated PGlite SQL editor with optional PostGIS and persistence        |
+| `SigveloREditor`           | `<sigvelo-r-editor>`           | Sandboxed WebR editor with plots, packages, and console output          |
+
+## Dependencies
+
+`@mcp-b/wc-support` and `@mcp-b/web-components` are installed runtime
+dependencies so every Lit package shares the same localization, icon, and
+scroll-lock registries. The consuming application provides these peer
+dependencies:
+
+```
+lit >= 3.0.0
+lit-html >= 3.0.0
+```
+
+Keeping Lit external avoids loading multiple component runtimes.
+
+## Usage
+
+```html
+<script type="module">
+  import "@mcp-b/interactive-components/themes/interactive.css";
+  import "@mcp-b/interactive-components/components/interactive-editor/interactive-editor.js";
+
+  const editor = document.querySelector("sigvelo-interactive-editor");
+  editor.files = [
+    { name: "index.html", content: "<h1>Hello</h1>" },
+    { name: "main.js", content: 'console.log("hi")' },
+  ];
+</script>
+
+<sigvelo-interactive-editor entry-file="index.html" layout="vertical"></sigvelo-interactive-editor>
+```
+
+## Runner assets
+
+The package keeps its publish artifact small: it ships the runner entry points,
+while PGlite, PyScript, and WebR remain normal runtime dependencies. Add the
+provided Vite plugin to copy the runners and their engine assets into the
+application output during development and production builds:
+
+```ts
+import { defineConfig } from "vite";
+import { interactiveRuntimeAssets } from "@mcp-b/interactive-components/vite";
+
+export default defineConfig({
+  plugins: [...interactiveRuntimeAssets()],
+});
+```
+
+Then configure that same-origin mount before creating an editor:
+
+```ts
+import { setRunnerBaseUrl } from "@mcp-b/interactive-components";
+
+setRunnerBaseUrl(new URL("/assets/sigvelo/runners/", window.location.origin));
+```
+
+The plugin preserves the required directory layout. Serve every runner response with the correct
+MIME type and `Access-Control-Allow-Origin: *`. Python and R run in opaque
+sandboxed frames (without `allow-same-origin`), so their runtime modules require
+CORS. WebR also needs `blob:` in the runner document's `worker-src` Content
+Security Policy because its trusted packaged worker is re-homed into the opaque frame. PGlite
+runs in a module worker, so its entry point must stay on the application's
+origin. Do not weaken the sandbox to work around a missing header or CSP rule.
+
+## Styling
+
+The component uses Sigvelo design tokens (`--sigvelo-*`) for all UI chrome (sidebar, buttons, console). Editor-specific tokens (`--sigvelo-interactive-editor-*`) control the code editing surface and syntax highlighting. See `src/themes/interactive.css` for the full list.
+
+The component has no `border-radius` or `box-shadow` on its host element, so it fills its parent container flush. The parent is responsible for visual framing (border, radius, shadow).
+
+### Customizable CSS properties
+
+| Property                                 | Default   | Description                   |
+| ---------------------------------------- | --------- | ----------------------------- |
+| `--sigvelo-interactive-editor-height`    | `480px`   | Height of the editor          |
+| `--sigvelo-interactive-editor-bg`        | `#f8f8f8` | Editor background             |
+| `--sigvelo-interactive-editor-gutter-bg` | `#f0f0f0` | Line number gutter background |
+
+## Development
+
+```bash
+pnpm dev          # Build + Storybook on port 6007
+pnpm build        # Production build (tsc + CEM + Vite)
+pnpm test         # Vitest
+pnpm storybook    # Storybook only
+```

package/dist/code-editor-B94tewLC.js

@@ -0,0 +1,425 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloChangeEvent } from "@mcp-b/wc-support/events/form";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers, rectangularSelection } from "@codemirror/view";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { HighlightStyle, StreamLanguage, bracketMatching, defaultHighlightStyle, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { javascript } from "@codemirror/lang-javascript";
+import { html as html$1 } from "@codemirror/lang-html";
+import { css as css$1 } from "@codemirror/lang-css";
+import { python } from "@codemirror/lang-python";
+import { r } from "@codemirror/legacy-modes/mode/r";
+import { PostgreSQL, sql } from "@codemirror/lang-sql";
+import { oneDark } from "@codemirror/theme-one-dark";
+//#region src/components/code-editor/code-editor.styles.ts
+var code_editor_styles_default = css`
+  :host {
+    display: block;
+    overflow: hidden;
+    font-family: var(
+      --sigvelo-font-mono,
+      "Fira Code",
+      "Cascadia Code",
+      "JetBrains Mono",
+      monospace
+    );
+    font-size: 13px;
+    background: var(--sigvelo-interactive-editor-bg, #f8f8f8);
+    height: 100%;
+  }
+
+  .cm-host {
+    height: 100%;
+    overflow: auto;
+  }
+
+  /* CodeMirror overrides that work inside Shadow DOM */
+  .cm-host .cm-editor {
+    height: 100%;
+    outline: none;
+  }
+
+  .cm-host .cm-scroller {
+    font-family: inherit;
+    font-size: 13px;
+    line-height: 1.6;
+  }
+
+  .cm-host .cm-gutters {
+    border-right: none;
+  }
+
+  /* Fold gutter markers — rendered via CSS pseudo-elements so axe
+     doesn't flag non-text characters as inconclusive contrast. */
+  .cm-host .cm-fold-open::after,
+  .cm-host .cm-fold-closed::after {
+    display: inline-block;
+    font-size: 10px;
+    line-height: 1;
+    opacity: 0.5;
+    cursor: pointer;
+  }
+  .cm-host .cm-fold-open::after {
+    content: "▾";
+  }
+  .cm-host .cm-fold-closed::after {
+    content: "▸";
+  }
+`;
+//#endregion
+//#region src/components/code-editor/code-editor.ts
+const lightHighlight = HighlightStyle.define([
+	{
+		tag: tags.keyword,
+		color: "#cf222e"
+	},
+	{
+		tag: tags.controlKeyword,
+		color: "#cf222e"
+	},
+	{
+		tag: tags.moduleKeyword,
+		color: "#cf222e"
+	},
+	{
+		tag: tags.operatorKeyword,
+		color: "#cf222e"
+	},
+	{
+		tag: tags.definitionKeyword,
+		color: "#cf222e"
+	},
+	{
+		tag: tags.operator,
+		color: "#24292f"
+	},
+	{
+		tag: tags.separator,
+		color: "#24292f"
+	},
+	{
+		tag: tags.punctuation,
+		color: "#24292f"
+	},
+	{
+		tag: tags.bracket,
+		color: "#24292f"
+	},
+	{
+		tag: tags.string,
+		color: "#0a3069"
+	},
+	{
+		tag: tags.regexp,
+		color: "#0a3069"
+	},
+	{
+		tag: [
+			tags.name,
+			tags.deleted,
+			tags.character
+		],
+		color: "#cf222e"
+	},
+	{
+		tag: [tags.propertyName, tags.macroName],
+		color: "#0550ae"
+	},
+	{
+		tag: [tags.function(tags.variableName), tags.labelName],
+		color: "#8250df"
+	},
+	{
+		tag: [
+			tags.color,
+			tags.constant(tags.name),
+			tags.standard(tags.name)
+		],
+		color: "#0550ae"
+	},
+	{
+		tag: [tags.definition(tags.name), tags.separator],
+		color: "#24292f"
+	},
+	{
+		tag: [
+			tags.typeName,
+			tags.className,
+			tags.number,
+			tags.changed,
+			tags.annotation,
+			tags.self,
+			tags.namespace
+		],
+		color: "#953800"
+	},
+	{
+		tag: tags.comment,
+		color: "#57606a",
+		fontStyle: "italic"
+	},
+	{
+		tag: tags.meta,
+		color: "#57606a"
+	},
+	{
+		tag: tags.tagName,
+		color: "#116329"
+	},
+	{
+		tag: tags.attributeName,
+		color: "#0550ae"
+	},
+	{
+		tag: tags.attributeValue,
+		color: "#0a3069"
+	},
+	{
+		tag: tags.processingInstruction,
+		color: "#57606a"
+	},
+	{
+		tag: tags.documentMeta,
+		color: "#57606a"
+	},
+	{
+		tag: tags.heading,
+		color: "#24292f",
+		fontWeight: "bold"
+	},
+	{
+		tag: tags.bool,
+		color: "#0550ae"
+	},
+	{
+		tag: tags.atom,
+		color: "#0550ae"
+	},
+	{
+		tag: tags.special(tags.variableName),
+		color: "#953800"
+	},
+	{
+		tag: tags.variableName,
+		color: "#24292f"
+	}
+]);
+const lightTheme = EditorView.theme({
+	"&": {
+		color: "#24292f",
+		backgroundColor: "#ffffff"
+	},
+	".cm-content": { caretColor: "#24292f" },
+	".cm-cursor": { borderLeftColor: "#24292f" },
+	"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection": { backgroundColor: "#dae9fd" },
+	".cm-activeLine": { backgroundColor: "#f6f8fa" },
+	".cm-gutters": {
+		backgroundColor: "#f6f8fa",
+		color: "#636c76",
+		borderRight: "none"
+	},
+	".cm-activeLineGutter": { backgroundColor: "#eaeef2" }
+}, { dark: false });
+const darkTheme = EditorView.theme({
+	".cm-gutters": { color: "#9da5b4" },
+	".cm-gutterElement": { color: "#9da5b4" },
+	".ͼw": { color: "#9da5b4 !important" },
+	".ͼq": { color: "#e5c07b !important" },
+	".ͼp": { color: "#d9a2e8 !important" }
+}, { dark: true });
+function getLanguageExtension(lang) {
+	switch (lang) {
+		case "javascript": return javascript();
+		case "typescript": return javascript({ typescript: true });
+		case "jsx": return javascript({ jsx: true });
+		case "tsx": return javascript({
+			typescript: true,
+			jsx: true
+		});
+		case "html": return html$1();
+		case "css": return css$1();
+		case "python": return python();
+		case "r": return StreamLanguage.define(r);
+		case "sql": return sql({ dialect: PostgreSQL });
+	}
+}
+/**
+* `<sigvelo-code-editor>`
+*
+* @summary A CodeMirror 6 wrapper that provides syntax-highlighted editing for
+* a single document. Supports JavaScript, TypeScript, JSX, TSX, HTML, and CSS.
+* Automatically detects dark mode from the `data-theme` attribute on the
+* document root and applies the One Dark CodeMirror theme accordingly.
+*
+* @tag sigvelo-code-editor
+* @status experimental
+* @since 0.1
+*
+* @event sigvelo-change - Fires when the document content changes. `event.detail.value` contains the new content.
+*/
+var SigveloCodeEditor = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.language = "javascript";
+		this.readonly = false;
+		this.editorLabel = "";
+		this._dark = false;
+		this._view = null;
+		this._langCompartment = new Compartment();
+		this._themeCompartment = new Compartment();
+		this._readonlyCompartment = new Compartment();
+		this._labelCompartment = new Compartment();
+		this._suppressExternalUpdate = false;
+		this._themeObserver = null;
+		this._systemTheme = null;
+		this._onSystemThemeChange = null;
+	}
+	static {
+		this.styles = [hostStyles, code_editor_styles_default];
+	}
+	/**
+	* The name exposed to assistive technology. CodeMirror renders a
+	* `role="textbox"` element, which must always be named, so an unset
+	* `editor-label` falls back to the language rather than leaving it anonymous.
+	*/
+	get accessibleLabel() {
+		return this.editorLabel || `${this.language} code editor`;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._dark = this._isDark();
+		this._observeTheme();
+	}
+	firstUpdated() {
+		this._createView();
+	}
+	updated(changed) {
+		if (!this._view) return;
+		const effects = [];
+		if (changed.has("language")) effects.push(this._langCompartment.reconfigure(getLanguageExtension(this.language)));
+		if (changed.has("_dark")) effects.push(this._themeCompartment.reconfigure(this._dark ? [oneDark, darkTheme] : [lightTheme, syntaxHighlighting(lightHighlight)]));
+		if (changed.has("readonly")) effects.push(this._readonlyCompartment.reconfigure(EditorState.readOnly.of(this.readonly)));
+		if (changed.has("editorLabel") || changed.has("language")) effects.push(this._labelCompartment.reconfigure(EditorView.contentAttributes.of({ "aria-label": this.accessibleLabel })));
+		if (effects.length) this._view.dispatch({ effects });
+		if (changed.has("value") && !this._suppressExternalUpdate) {
+			if (this._view.state.doc.toString() !== this.value) this._view.dispatch({ changes: {
+				from: 0,
+				to: this._view.state.doc.length,
+				insert: this.value
+			} });
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._themeObserver?.disconnect();
+		if (this._systemTheme && this._onSystemThemeChange) this._systemTheme.removeEventListener("change", this._onSystemThemeChange);
+		this._systemTheme = null;
+		this._onSystemThemeChange = null;
+		this._view?.destroy();
+		this._view = null;
+	}
+	_isDark() {
+		const theme = document.documentElement.dataset.theme;
+		if (theme === "dark") return true;
+		if (theme === "light") return false;
+		return window.matchMedia("(prefers-color-scheme: dark)").matches;
+	}
+	_observeTheme() {
+		this._themeObserver = new MutationObserver(() => {
+			this._dark = this._isDark();
+		});
+		this._themeObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-theme"]
+		});
+		this._systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
+		this._onSystemThemeChange = () => {
+			this._dark = this._isDark();
+		};
+		this._systemTheme.addEventListener("change", this._onSystemThemeChange);
+	}
+	_createView() {
+		if (!this._host) return;
+		const editorState = EditorState.create({
+			doc: this.value,
+			extensions: [
+				lineNumbers(),
+				highlightActiveLineGutter(),
+				history(),
+				foldGutter({ markerDOM(open) {
+					const span = document.createElement("span");
+					span.setAttribute("aria-hidden", "true");
+					span.className = open ? "cm-fold-open" : "cm-fold-closed";
+					return span;
+				} }),
+				drawSelection(),
+				dropCursor(),
+				indentOnInput(),
+				syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+				bracketMatching(),
+				closeBrackets(),
+				autocompletion(),
+				rectangularSelection(),
+				crosshairCursor(),
+				highlightActiveLine(),
+				highlightSelectionMatches(),
+				keymap.of([
+					...closeBracketsKeymap,
+					...defaultKeymap,
+					...searchKeymap,
+					...historyKeymap,
+					...foldKeymap,
+					...completionKeymap,
+					indentWithTab
+				]),
+				this._langCompartment.of(getLanguageExtension(this.language)),
+				this._themeCompartment.of(this._dark ? [oneDark, darkTheme] : [lightTheme, syntaxHighlighting(lightHighlight)]),
+				this._readonlyCompartment.of(EditorState.readOnly.of(this.readonly)),
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged) {
+						this._suppressExternalUpdate = true;
+						this.value = update.state.doc.toString();
+						this.dispatchEvent(new SigveloChangeEvent());
+						this._suppressExternalUpdate = false;
+					}
+				}),
+				this._labelCompartment.of(EditorView.contentAttributes.of({ "aria-label": this.accessibleLabel })),
+				EditorView.theme({
+					"&": { height: "100%" },
+					".cm-scroller": { overflow: "auto" }
+				})
+			]
+		});
+		this._view = new EditorView({
+			state: editorState,
+			parent: this._host,
+			root: this.shadowRoot ?? void 0
+		});
+		const scroller = this._view.scrollDOM;
+		if (scroller) scroller.tabIndex = 0;
+	}
+	/** Returns the underlying CodeMirror `EditorView`, or `null` if not yet created. */
+	getEditorView() {
+		return this._view;
+	}
+	render() {
+		return html` <div class="cm-host"></div> `;
+	}
+};
+__decorate([property()], SigveloCodeEditor.prototype, "value", void 0);
+__decorate([property()], SigveloCodeEditor.prototype, "language", void 0);
+__decorate([property({ type: Boolean })], SigveloCodeEditor.prototype, "readonly", void 0);
+__decorate([property({ attribute: "editor-label" })], SigveloCodeEditor.prototype, "editorLabel", void 0);
+__decorate([query(".cm-host")], SigveloCodeEditor.prototype, "_host", void 0);
+__decorate([state()], SigveloCodeEditor.prototype, "_dark", void 0);
+customElements.define("sigvelo-code-editor", SigveloCodeEditor);
+//#endregion
+export { SigveloCodeEditor as t };