@mcp-b/interactive-components 0.2.0

package/dist/r-editor-DwSyDo2i.js

@@ -0,0 +1,743 @@
+import "./code-editor-B94tewLC.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";
+import { css, html } from "lit";
+import { property, 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 "@mcp-b/web-components/components/spinner/spinner.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "@mcp-b/web-components/components/splitter/splitter.js";
+import "@mcp-b/web-components/components/button/button.js";
+import "@mcp-b/web-components/components/button-group/button-group.js";
+import "@mcp-b/web-components/components/tooltip/tooltip.js";
+//#region src/components/r-editor/r-editor.styles.ts
+var r_editor_styles_default = css`
+  /* ═══════════════════════════════════════════
+     HOST
+     ═══════════════════════════════════════════ */
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: var(--r-editor-height, 560px);
+    border: 1px solid var(--sigvelo-color-neutral-border-muted, #d1d5db);
+    border-radius: 8px;
+    overflow: hidden;
+    background: var(--sigvelo-color-surface, #fff);
+    font-family:
+      system-ui,
+      -apple-system,
+      sans-serif;
+    font-size: 13px;
+    color: var(--sigvelo-color-text, #1f2937);
+    position: relative;
+  }
+
+  /* ═══════════════════════════════════════════
+     CONTENT (desktop layout)
+     ═══════════════════════════════════════════ */
+
+  .content {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .content sigvelo-splitter {
+    flex: 1;
+  }
+
+  /* ═══════════════════════════════════════════
+     EDITOR PANE (left side)
+     ═══════════════════════════════════════════ */
+
+  .editor-pane {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    height: 100%;
+  }
+
+  .editor-pane__toolbar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e7eb);
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+    min-height: 32px;
+  }
+
+  .editor-pane__toolbar-title {
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--sigvelo-color-neutral-text, #6b7280);
+    margin-right: auto;
+  }
+
+  .editor-pane__code {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .editor-pane__code sigvelo-code-editor {
+    display: block;
+    height: 100%;
+  }
+
+  /* ═══════════════════════════════════════════
+     RIGHT PANE (plots + console)
+     ═══════════════════════════════════════════ */
+
+  .right-pane {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    height: 100%;
+  }
+
+  .right-pane__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e7eb);
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+    min-height: 32px;
+  }
+
+  .right-pane__header sigvelo-button-group {
+    margin-right: auto;
+  }
+
+  .right-pane__content {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  /* ═══════════════════════════════════════════
+     PLOT VIEWER
+     ═══════════════════════════════════════════ */
+
+  .plot-viewer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .plot-viewer__canvas {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 0;
+    overflow: auto;
+    background: #fff;
+    padding: 8px;
+  }
+
+  .plot-viewer__canvas img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 4px;
+  }
+
+  .plot-viewer__nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border-top: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e7eb);
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+    font-size: 12px;
+    color: var(--sigvelo-color-neutral-text, #6b7280);
+  }
+
+  .plot-viewer__counter {
+    min-width: 80px;
+    text-align: center;
+  }
+
+  .plot-viewer__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--sigvelo-color-neutral-text, #9ca3af);
+    font-size: 13px;
+    padding: 24px;
+    text-align: center;
+  }
+
+  /* ═══════════════════════════════════════════
+     CONSOLE VIEW
+     ═══════════════════════════════════════════ */
+
+  .console-view {
+    flex: 1;
+    overflow: auto;
+    padding: 8px 12px;
+    font-family: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+  }
+
+  .console-empty {
+    color: var(--sigvelo-color-neutral-text, #9ca3af);
+    font-style: italic;
+    padding: 16px 0;
+  }
+
+  .console-entry {
+    display: flex;
+    gap: 8px;
+    padding: 1px 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .console-entry--error {
+    color: var(--sigvelo-color-danger-text, #dc2626);
+  }
+
+  .console-entry--warn {
+    color: var(--sigvelo-color-warning-text, #d97706);
+  }
+
+  .console-entry__level {
+    flex-shrink: 0;
+    width: 16px;
+    text-align: center;
+    opacity: 0.5;
+    font-size: 10px;
+    line-height: 18px;
+  }
+
+  .console-entry__text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ═══════════════════════════════════════════
+     CONSOLE BADGE
+     ═══════════════════════════════════════════ */
+
+  .console-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: 8px;
+    background: var(--sigvelo-color-danger-bg, #ef4444);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    margin-left: 4px;
+  }
+
+  /* ═══════════════════════════════════════════
+     LOADING OVERLAY
+     ═══════════════════════════════════════════ */
+
+  .loading-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    background: color-mix(in srgb, var(--sigvelo-color-surface, #fff) 85%, transparent);
+    z-index: 10;
+    font-size: 13px;
+    color: var(--sigvelo-color-neutral-text, #6b7280);
+  }
+
+  .loading-overlay__message {
+    max-width: 280px;
+    text-align: center;
+    line-height: 1.4;
+  }
+
+  /* ═══════════════════════════════════════════
+     MOBILE / COMPACT LAYOUT
+     ═══════════════════════════════════════════ */
+
+  .mobile-nav {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e7eb);
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+  }
+
+  .mobile-nav sigvelo-button-group {
+    margin-right: auto;
+  }
+
+  .single-pane {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .single-pane .editor-pane {
+    flex: 1;
+  }
+
+  .single-pane .console-view {
+    flex: 1;
+  }
+
+  .single-pane .plot-viewer {
+    flex: 1;
+  }
+`;
+//#endregion
+//#region src/components/r-editor/r-editor.ts
+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" />
+  </svg>
+`;
+const ICON_TRASH = html`
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path
+      d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+    />
+  </svg>
+`;
+const ICON_CHEVRON_LEFT = html`
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path d="M15 18l-6-6 6-6" />
+  </svg>
+`;
+const ICON_CHEVRON_RIGHT = html`
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path d="M9 18l6-6-6-6" />
+  </svg>
+`;
+const ICON_DOWNLOAD = html`
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <polyline points="7 10 12 15 17 10" />
+    <line x1="12" y1="15" x2="12" y2="3" />
+  </svg>
+`;
+const COMPACT_BREAKPOINT = 560;
+/**
+* `<sigvelo-r-editor>`
+*
+* @summary A WebR-powered R code editor with integrated console output and plot
+* viewer. Runs R code in the browser via WebAssembly. The editor pane uses
+* CodeMirror with R syntax highlighting, while the right pane shows captured
+* plots and console output in separate tabs.
+*
+* @tag sigvelo-r-editor
+* @status experimental
+* @since 0.1
+*/
+var SigveloREditor = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.code = "";
+		this.packages = [];
+		this.editorLabel = "R code editor";
+		this._editedCode = "";
+		this._consoleLogs = [];
+		this._plots = [];
+		this._currentPlotIndex = 0;
+		this._webRReady = false;
+		this._webRLoading = true;
+		this._loadingMessage = "Initializing WebR...";
+		this._running = false;
+		this._compact = false;
+		this._compactView = "code";
+		this._rightPane = "console";
+		this._unreadConsoleCount = 0;
+		this._resizeObserver = null;
+		this._runnerIframe = null;
+		this._runnerPort = null;
+		this._runnerChannelId = createRunnerChannelId();
+	}
+	static {
+		this.styles = [hostStyles, r_editor_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._editedCode = this.code;
+		this._resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const compact = entry.contentRect.width < COMPACT_BREAKPOINT;
+				if (compact !== this._compact) this._compact = compact;
+			}
+		});
+		this._resizeObserver.observe(this);
+	}
+	firstUpdated() {
+		this._initRunner();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this._runnerPort?.close();
+		this._runnerPort = null;
+		this._runnerIframe?.remove();
+		this._runnerIframe = null;
+	}
+	_initRunner() {
+		const iframe = document.createElement("iframe");
+		iframe.style.display = "none";
+		iframe.sandbox.add("allow-scripts");
+		iframe.addEventListener("load", () => {
+			this._runnerPort?.close();
+			this._runnerPort = connectRunner(iframe, this._runnerChannelId, (data) => this._onMessage(data));
+		}, { once: true });
+		const runnerUrl = bindRunnerUrl(getRunnerUrl("webr"), this._runnerChannelId);
+		runnerUrl.searchParams.set("v", String(Date.now()));
+		iframe.src = runnerUrl.href;
+		this._runnerIframe = iframe;
+		document.body.appendChild(iframe);
+	}
+	_onMessage(data) {
+		if (!isRecord(data)) return;
+		if (data.__sigvelo_webr_ready === true) {
+			this._webRReady = true;
+			this._webRLoading = false;
+			return;
+		}
+		if (data.__sigvelo_webr_loading === true) {
+			this._loadingMessage = typeof data.message === "string" ? data.message : "Loading...";
+			this._webRLoading = true;
+			return;
+		}
+		const consoleMessage = parseRunnerConsoleMessage(data);
+		if (consoleMessage) {
+			const entry = consoleMessage;
+			this._consoleLogs = [...this._consoleLogs, entry];
+			if (!this._compact && this._rightPane !== "console") this._unreadConsoleCount++;
+			if (this._compact && this._compactView !== "console") this._unreadConsoleCount++;
+			return;
+		}
+		if (data.__sigvelo_plot === true && typeof data.dataUrl === "string" && typeof data.index === "number" && Number.isInteger(data.index)) {
+			const plot = {
+				dataUrl: data.dataUrl,
+				index: data.index
+			};
+			this._plots = [...this._plots, plot];
+			this._currentPlotIndex = this._plots.length - 1;
+			if (!this._compact) this._rightPane = "plots";
+			return;
+		}
+		if (data.__sigvelo_webr_done === true) {
+			this._running = false;
+			this._webRLoading = false;
+			return;
+		}
+	}
+	_runCode() {
+		if (!this._webRReady || !this._runnerPort) return;
+		this._running = true;
+		this._consoleLogs = [];
+		this._plots = [];
+		this._currentPlotIndex = 0;
+		this._unreadConsoleCount = 0;
+		this._runnerPort.postMessage({
+			type: "webr-run",
+			code: this._editedCode,
+			packages: this.packages
+		});
+	}
+	_onEditorChange(e) {
+		this._editedCode = e.target.value;
+	}
+	_prevPlot() {
+		if (this._currentPlotIndex > 0) this._currentPlotIndex--;
+	}
+	_nextPlot() {
+		if (this._currentPlotIndex < this._plots.length - 1) this._currentPlotIndex++;
+	}
+	_savePlot() {
+		const plot = this._plots[this._currentPlotIndex];
+		if (!plot) return;
+		const a = document.createElement("a");
+		a.href = plot.dataUrl;
+		a.download = `plot-${this._currentPlotIndex + 1}.png`;
+		a.click();
+	}
+	_clearPlots() {
+		this._plots = [];
+		this._currentPlotIndex = 0;
+	}
+	_clearConsole() {
+		this._consoleLogs = [];
+		this._unreadConsoleCount = 0;
+	}
+	_switchRightPane(pane) {
+		this._rightPane = pane;
+		if (pane === "console") this._unreadConsoleCount = 0;
+	}
+	_switchView(view) {
+		this._compactView = view;
+		if (view === "console") this._unreadConsoleCount = 0;
+	}
+	_renderEditorPane(slot) {
+		return html`
+      <div class="editor-pane" slot=${ifDefined(slot)}>
+        <div class="editor-pane__toolbar">
+          <span class="editor-pane__toolbar-title">R Script</span>
+          <sigvelo-button
+            size="xs"
+            color="primary"
+            ?disabled=${!this._webRReady || this._running}
+            @click=${() => this._runCode()}
+          >
+            ${ICON_PLAY} Run
+          </sigvelo-button>
+        </div>
+        <div class="editor-pane__code">
+          <sigvelo-code-editor
+            .value=${this._editedCode}
+            language="r"
+            editor-label=${this.editorLabel}
+            @sigvelo-change=${this._onEditorChange}
+          ></sigvelo-code-editor>
+        </div>
+      </div>
+    `;
+	}
+	_renderPlotViewer() {
+		if (this._plots.length === 0) return html`
+        <div class="plot-viewer">
+          <div class="plot-viewer__empty">
+            No plots yet. Run R code that creates a plot to see it here.
+          </div>
+        </div>
+      `;
+		return html`
+      <div class="plot-viewer">
+        <div class="plot-viewer__canvas">
+          <img src=${this._plots[this._currentPlotIndex]?.dataUrl ?? ""} alt="R plot ${this._currentPlotIndex + 1}" />
+        </div>
+        <div class="plot-viewer__nav">
+          <sigvelo-button
+            size="xs"
+            variant="ghost"
+            ?disabled=${this._currentPlotIndex <= 0}
+            icon-label="Previous plot"
+            @click=${() => this._prevPlot()}
+          >
+            ${ICON_CHEVRON_LEFT}
+          </sigvelo-button>
+          <span class="plot-viewer__counter">
+            ${this._currentPlotIndex + 1} / ${this._plots.length}
+          </span>
+          <sigvelo-button
+            size="xs"
+            variant="ghost"
+            ?disabled=${this._currentPlotIndex >= this._plots.length - 1}
+            icon-label="Next plot"
+            @click=${() => this._nextPlot()}
+          >
+            ${ICON_CHEVRON_RIGHT}
+          </sigvelo-button>
+          <sigvelo-button
+            size="xs"
+            variant="ghost"
+            icon-label="Save plot"
+            @click=${() => this._savePlot()}
+          >
+            ${ICON_DOWNLOAD}
+          </sigvelo-button>
+          <sigvelo-button
+            size="xs"
+            variant="ghost"
+            icon-label="Clear plots"
+            @click=${() => this._clearPlots()}
+          >
+            ${ICON_TRASH}
+          </sigvelo-button>
+        </div>
+      </div>
+    `;
+	}
+	_renderConsoleView() {
+		return html`
+      <div class="console-view">
+        ${this._consoleLogs.length === 0 ? html`<div class="console-empty">No console output yet.</div>` : this._consoleLogs.map((entry) => html`
+                <div class="console-entry console-entry--${entry.level}">
+                  <span class="console-entry__level"
+                    >${entry.level === "error" ? "E" : entry.level === "warn" ? "W" : ">"}</span
+                  >
+                  <span class="console-entry__text">${entry.args.join(" ")}</span>
+                </div>
+              `)}
+      </div>
+    `;
+	}
+	_renderRightPane(slot) {
+		const content = html`
+      <div class="right-pane__header">
+        <sigvelo-button-group label="Output toggle">
+          <sigvelo-button
+            size="xs"
+            variant=${this._rightPane === "plots" ? "normal" : "ghost"}
+            color=${this._rightPane === "plots" ? "primary" : "neutral"}
+            @click=${() => this._switchRightPane("plots")}
+          >
+            Plots${this._plots.length > 0 ? html` (${this._plots.length})` : ""}
+          </sigvelo-button>
+          <sigvelo-button
+            size="xs"
+            variant=${this._rightPane === "console" ? "normal" : "ghost"}
+            color=${this._rightPane === "console" ? "primary" : "neutral"}
+            @click=${() => this._switchRightPane("console")}
+          >
+            Console${this._unreadConsoleCount > 0 ? html`<span class="console-badge">${this._unreadConsoleCount}</span>` : ""}
+          </sigvelo-button>
+        </sigvelo-button-group>
+        ${this._rightPane === "console" ? html`
+              <sigvelo-button
+                size="xs"
+                variant="ghost"
+                icon-label="Clear console"
+                @click=${() => this._clearConsole()}
+              >
+                ${ICON_TRASH}
+              </sigvelo-button>
+            ` : ""}
+      </div>
+      <div class="right-pane__content">
+        ${this._rightPane === "plots" ? this._renderPlotViewer() : this._renderConsoleView()}
+      </div>
+    `;
+		return slot ? html`<div class="right-pane" slot=${slot}>${content}</div>` : html`<div class="right-pane">${content}</div>`;
+	}
+	_renderLoadingOverlay() {
+		if (!this._webRLoading) return "";
+		return html`
+      <div class="loading-overlay">
+        <sigvelo-spinner label="Loading WebR"></sigvelo-spinner>
+        <div class="loading-overlay__message">${this._loadingMessage}</div>
+      </div>
+    `;
+	}
+	_renderMobileNav() {
+		const btn = (view, label, badge) => html`
+      <sigvelo-button
+        size="xs"
+        variant=${this._compactView === view ? "normal" : "ghost"}
+        color=${this._compactView === view ? "primary" : "neutral"}
+        @click=${() => this._switchView(view)}
+      >
+        ${label}${badge && badge > 0 ? html`<span class="console-badge">${badge}</span>` : ""}
+      </sigvelo-button>
+    `;
+		return html`
+      <div class="mobile-nav">
+        <sigvelo-button-group label="View toggle">
+          ${btn("code", "Code")} ${btn("plots", "Plots")}
+          ${btn("console", "Console", this._unreadConsoleCount)}
+        </sigvelo-button-group>
+        <sigvelo-button
+          size="xs"
+          color="primary"
+          icon-label="Run"
+          ?disabled=${!this._webRReady || this._running}
+          @click=${() => this._runCode()}
+        >
+          ${ICON_PLAY}
+        </sigvelo-button>
+      </div>
+    `;
+	}
+	render() {
+		if (this._compact) return html`
+        ${this._renderLoadingOverlay()} ${this._renderMobileNav()}
+        <div class="single-pane">
+          ${this._compactView === "code" ? this._renderEditorPane() : this._compactView === "plots" ? this._renderPlotViewer() : this._renderConsoleView()}
+        </div>
+      `;
+		return html`
+      ${this._renderLoadingOverlay()}
+      <div class="content">
+        <sigvelo-splitter
+          orientation="vertical"
+          position="0.5"
+          style="--divider-min-position: 20%; --divider-max-position: 80%;"
+        >
+          ${this._renderEditorPane("start")} ${this._renderRightPane("end")}
+        </sigvelo-splitter>
+      </div>
+    `;
+	}
+};
+__decorate([property()], SigveloREditor.prototype, "code", void 0);
+__decorate([property({ type: Array })], SigveloREditor.prototype, "packages", void 0);
+__decorate([property({ attribute: "editor-label" })], SigveloREditor.prototype, "editorLabel", void 0);
+__decorate([state()], SigveloREditor.prototype, "_editedCode", void 0);
+__decorate([state()], SigveloREditor.prototype, "_consoleLogs", void 0);
+__decorate([state()], SigveloREditor.prototype, "_plots", void 0);
+__decorate([state()], SigveloREditor.prototype, "_currentPlotIndex", void 0);
+__decorate([state()], SigveloREditor.prototype, "_webRReady", void 0);
+__decorate([state()], SigveloREditor.prototype, "_webRLoading", void 0);
+__decorate([state()], SigveloREditor.prototype, "_loadingMessage", void 0);
+__decorate([state()], SigveloREditor.prototype, "_running", void 0);
+__decorate([state()], SigveloREditor.prototype, "_compact", void 0);
+__decorate([state()], SigveloREditor.prototype, "_compactView", void 0);
+__decorate([state()], SigveloREditor.prototype, "_rightPane", void 0);
+__decorate([state()], SigveloREditor.prototype, "_unreadConsoleCount", void 0);
+customElements.define("sigvelo-r-editor", SigveloREditor);
+//#endregion
+export { SigveloREditor as t };