@mcp-b/interactive-components 0.3.12 → 0.4.0

package/dist/{code-editor-hnbxw8Xk.js → code-editor-De07yhYp.js}

@@ -1,4 +1,4 @@
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
 import { css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";

package/dist/{code-preview-Pq2CFfK9.js → code-preview-B6HCxIaD.js}

@@ -1,4 +1,4 @@
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
 import { RUNNER_CONNECT_TYPE, bindRunnerUrl, connectRunner, createRunnerChannelId, isRecord, parseRunnerConsoleMessage } from "./lib/runner-channel.js";
 import { buildHtmlPreview, buildModulePreview, buildPythonPayload, detectLanguage } from "./lib/transform.js";
 import { getRunnerUrl } from "./lib/runner-url.js";
@@ -246,28 +246,29 @@ var SigveloCodePreview = class SigveloCodePreview extends SigveloElement {
 		return html`
       ${this._loading ? html` <div class="loading"><sigvelo-spinner label="Building…"></sigvelo-spinner></div> ` : ""}
       ${this._error ? html`
-            <div class="error">
-              <sigvelo-callout color="destructive">
-                <sigvelo-icon slot="icon" name="alert-triangle"></sigvelo-icon>
-                <pre style="margin:0; white-space:pre-wrap; word-break:break-word; font-size:12px;">
-${this._error}</pre
-                >
-              </sigvelo-callout>
-            </div>
-          ` : ""}
+              <div class="error">
+                <sigvelo-callout color="destructive">
+                  <sigvelo-icon slot="icon" name="alert-triangle"></sigvelo-icon>
+                  <pre
+                    style="margin:0; white-space:pre-wrap; word-break:break-word; font-size:12px;"
+                  >
+${this._error}</pre>
+                </sigvelo-callout>
+              </div>
+            ` : ""}
       ${this._pyRunnerSrc ? html`<iframe
-            class="preview-iframe"
-            sandbox="allow-scripts allow-modals allow-forms"
-            title="Code preview"
-            .src=${this._pyRunnerSrc}
-            @load=${this._connectRunner}
-          ></iframe>` : html`<iframe
-            class="preview-iframe"
-            sandbox="allow-scripts allow-modals allow-forms"
-            title="Code preview"
-            .srcdoc=${this._srcdoc}
-            @load=${this._connectRunner}
-          ></iframe>`}
+              class="preview-iframe"
+              sandbox="allow-scripts allow-modals allow-forms"
+              title="Code preview"
+              .src=${this._pyRunnerSrc}
+              @load=${this._connectRunner}
+            ></iframe>` : html`<iframe
+              class="preview-iframe"
+              sandbox="allow-scripts allow-modals allow-forms"
+              title="Code preview"
+              .srcdoc=${this._srcdoc}
+              @load=${this._connectRunner}
+            ></iframe>`}
     `;
 	}
 };

package/dist/components/code-editor/code-editor.d.ts

@@ -2,7 +2,6 @@ import { FileLanguage } from "../../lib/transform.js";
 import { CSSResultGroup, PropertyValues } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
 import { EditorView } from "@codemirror/view";
-
 //#region src/components/code-editor/code-editor.d.ts
 /**
  * `<sigvelo-code-editor>`
@@ -18,7 +17,7 @@ import { EditorView } from "@codemirror/view";
  *
  * @event sigvelo-change - Fires when the document content changes. Read the new content from the element’s `value` property.
  */
-declare class SigveloCodeEditor extends SigveloElement {
+export declare class SigveloCodeEditor extends SigveloElement {
   static styles: CSSResultGroup;
   /** The document content. */
   value: string;
@@ -54,5 +53,4 @@ declare global {
     "sigvelo-code-editor": SigveloCodeEditor;
   }
 }
-//#endregion
-export { SigveloCodeEditor };
+//#endregion

package/dist/components/code-editor/code-editor.js

@@ -1,2 +1,2 @@
-import { t as SigveloCodeEditor } from "../../code-editor-hnbxw8Xk.js";
+import { t as SigveloCodeEditor } from "../../code-editor-De07yhYp.js";
 export { SigveloCodeEditor };

package/dist/components/code-preview/code-preview.d.ts

@@ -1,6 +1,8 @@
 import { EditorFile } from "../../lib/transform.js";
 import { CSSResultGroup } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import "@mcp-b/web-components/components/callout/callout.js";
+import "@mcp-b/web-components/components/spinner/spinner.js";
 //#region src/components/code-preview/code-preview.d.ts
 /**
  * `<sigvelo-code-preview>`
@@ -17,7 +19,7 @@ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
  * @event sigvelo-error - Fires when a build or runtime error occurs. `event.detail.message` has the error text.
  * @event sigvelo-console - Fires for validated console output from the isolated preview.
  */
-declare class SigveloCodePreview extends SigveloElement {
+export declare class SigveloCodePreview extends SigveloElement {
   static styles: CSSResultGroup;
   /** The file set to render. */
   files: EditorFile[];
@@ -57,5 +59,4 @@ declare global {
     "sigvelo-code-preview": SigveloCodePreview;
   }
 }
-//#endregion
-export { SigveloCodePreview };
+//#endregion

package/dist/components/code-preview/code-preview.js

@@ -1,3 +1,3 @@
 import "../../lib/transform.js";
-import { t as SigveloCodePreview } from "../../code-preview-Pq2CFfK9.js";
+import { t as SigveloCodePreview } from "../../code-preview-B6HCxIaD.js";
 export { SigveloCodePreview };

package/dist/components/interactive-editor/interactive-editor.d.ts

@@ -1,6 +1,11 @@
 import { EditorFile } from "../../lib/transform.js";
+import "../code-preview/code-preview.js";
 import { CSSResultGroup, PropertyValues } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+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/interactive-editor/interactive-editor.d.ts
 /**
  * `<sigvelo-interactive-editor>`
@@ -14,7 +19,7 @@ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
  * @since 0.1
  * @cssproperty [--sigvelo-interactive-editor-height=30rem] - The editor's block size.
  */
-declare class SigveloInteractiveEditor extends SigveloElement {
+export declare class SigveloInteractiveEditor extends SigveloElement {
   static styles: CSSResultGroup;
   files: EditorFile[];
   entryFile: string;
@@ -74,5 +79,4 @@ declare global {
     "sigvelo-interactive-editor": SigveloInteractiveEditor;
   }
 }
-//#endregion
-export { SigveloInteractiveEditor };
+//#endregion

package/dist/components/interactive-editor/interactive-editor.js

@@ -1,3 +1,3 @@
 import "../../lib/transform.js";
-import { t as SigveloInteractiveEditor } from "../../interactive-editor-DQfrcGUo.js";
+import { t as SigveloInteractiveEditor } from "../../interactive-editor-ZCU39FQY.js";
 export { SigveloInteractiveEditor };

package/dist/components/r-editor/r-editor.d.ts

@@ -1,5 +1,10 @@
 import { CSSResultGroup } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import "@mcp-b/web-components/components/spinner/spinner.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.d.ts
 /**
  * `<sigvelo-r-editor>`
@@ -13,7 +18,7 @@ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
  * @status experimental
  * @since 0.1
  */
-declare class SigveloREditor extends SigveloElement {
+export declare class SigveloREditor extends SigveloElement {
   static styles: CSSResultGroup;
   /** Initial R code to display in the editor. */
   code: string;
@@ -64,5 +69,4 @@ declare global {
     "sigvelo-r-editor": SigveloREditor;
   }
 }
-//#endregion
-export { SigveloREditor };
+//#endregion

package/dist/components/r-editor/r-editor.js

@@ -1,2 +1,2 @@
-import { t as SigveloREditor } from "../../r-editor-CkKexaUb.js";
+import { t as SigveloREditor } from "../../r-editor-B9tPupAX.js";
 export { SigveloREditor };

package/dist/components/sql-editor/sql-editor.d.ts

@@ -1,5 +1,10 @@
 import { CSSResultGroup } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import "@mcp-b/web-components/components/spinner/spinner.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/sql-editor/sql-editor.d.ts
 /**
  * `<sigvelo-sql-editor>`
@@ -13,7 +18,7 @@ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
  * @status experimental
  * @since 0.1
  */
-declare class SigveloSqlEditor extends SigveloElement {
+export declare class SigveloSqlEditor extends SigveloElement {
   static styles: CSSResultGroup;
   /** SQL to execute on database initialization (CREATE TABLE, INSERT, etc.). */
   setupSql: string;
@@ -74,5 +79,4 @@ declare global {
     "sigvelo-sql-editor": SigveloSqlEditor;
   }
 }
-//#endregion
-export { SigveloSqlEditor };
+//#endregion

package/dist/components/sql-editor/sql-editor.js

@@ -1,2 +1,2 @@
-import { t as SigveloSqlEditor } from "../../sql-editor-Az-vOWO0.js";
+import { t as SigveloSqlEditor } from "../../sql-editor-CTGDNBns.js";
 export { SigveloSqlEditor };

package/dist/{decorate-DcF3lt7P.js → decorate-BkO8ArQg.js}

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/index.js

@@ -1,8 +1,8 @@
-import { t as SigveloCodeEditor } from "./code-editor-hnbxw8Xk.js";
+import { t as SigveloCodeEditor } from "./code-editor-De07yhYp.js";
 import { detectLanguage } from "./lib/transform.js";
 import { getRunnerUrl, setRunnerBaseUrl } from "./lib/runner-url.js";
-import { t as SigveloCodePreview } from "./code-preview-Pq2CFfK9.js";
-import { t as SigveloInteractiveEditor } from "./interactive-editor-DQfrcGUo.js";
-import { t as SigveloREditor } from "./r-editor-CkKexaUb.js";
-import { t as SigveloSqlEditor } from "./sql-editor-Az-vOWO0.js";
+import { t as SigveloCodePreview } from "./code-preview-B6HCxIaD.js";
+import { t as SigveloInteractiveEditor } from "./interactive-editor-ZCU39FQY.js";
+import { t as SigveloREditor } from "./r-editor-B9tPupAX.js";
+import { t as SigveloSqlEditor } from "./sql-editor-CTGDNBns.js";
 export { SigveloCodeEditor, SigveloCodePreview, SigveloInteractiveEditor, SigveloREditor, SigveloSqlEditor, detectLanguage, getRunnerUrl, setRunnerBaseUrl };

package/dist/{interactive-editor-DQfrcGUo.js → interactive-editor-ZCU39FQY.js}

@@ -1,7 +1,7 @@
-import { t as SigveloCodeEditor } from "./code-editor-hnbxw8Xk.js";
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { t as SigveloCodeEditor } from "./code-editor-De07yhYp.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
 import { detectLanguage } from "./lib/transform.js";
-import "./code-preview-Pq2CFfK9.js";
+import "./code-preview-B6HCxIaD.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
@@ -1119,10 +1119,10 @@ var SigveloInteractiveEditor = class extends SigveloElement {
             <span class="sidebar__item-name">${node.name}</span>
           </button>
           ${expanded ? html`
-                <ul class="sidebar__subtree">
-                  ${this._renderTreeNodes(node.children, depth + 1)}
-                </ul>
-              ` : ""}
+                  <ul class="sidebar__subtree">
+                    ${this._renderTreeNodes(node.children, depth + 1)}
+                  </ul>
+                ` : ""}
         </li>`;
 			}
 			const lang = node.file?.language ?? detectLanguage(node.fullPath);
@@ -1145,15 +1145,15 @@ var SigveloInteractiveEditor = class extends SigveloElement {
           <span class="sidebar__item-name">${node.name}</span>
         </button>
         ${this.files.length > 1 ? html`
-              <button
-                class="sidebar__item-remove"
-                type="button"
-                aria-label="Remove ${node.name}"
-                @click=${() => this._removeFile(node.fullPath)}
-              >
-                &times;
-              </button>
-            ` : ""}
+                <button
+                  class="sidebar__item-remove"
+                  type="button"
+                  aria-label="Remove ${node.name}"
+                  @click=${() => this._removeFile(node.fullPath)}
+                >
+                  &times;
+                </button>
+              ` : ""}
       </li>`;
 		});
 	}
@@ -1167,66 +1167,68 @@ var SigveloInteractiveEditor = class extends SigveloElement {
 		})}
       >
         ${this._sidebarOpen ? html`
-              <div class="sidebar__header">
-                <span class="sidebar__title">Files</span>
-                <button
-                  class="sidebar__icon-btn"
-                  aria-label="New file"
-                  @click=${() => {
+                <div class="sidebar__header">
+                  <span class="sidebar__title">Files</span>
+                  <button
+                    class="sidebar__icon-btn"
+                    aria-label="New file"
+                    @click=${() => {
 			this._showAddFile = !this._showAddFile;
 			this._fileError = "";
 		}}
-                >
-                  ${ICON_PLUS}
-                </button>
-                <button
-                  class="sidebar__icon-btn sidebar__collapse-btn"
-                  aria-label="Collapse sidebar"
-                  @click=${() => {
+                  >
+                    ${ICON_PLUS}
+                  </button>
+                  <button
+                    class="sidebar__icon-btn sidebar__collapse-btn"
+                    aria-label="Collapse sidebar"
+                    @click=${() => {
 			this._sidebarOpen = false;
 		}}
-                >
-                  ${ICON_CHEVRON_LEFT}
-                </button>
-              </div>
+                  >
+                    ${ICON_CHEVRON_LEFT}
+                  </button>
+                </div>
 
-              <ul class="sidebar__list">
-                ${this._renderTreeNodes(tree, 0)}
-              </ul>
+                <ul class="sidebar__list">
+                  ${this._renderTreeNodes(tree, 0)}
+                </ul>
 
-              ${this._showAddFile ? html`
-                    <div class="sidebar__add-form">
-                      <input
-                        class=${classMap({
+                ${this._showAddFile ? html`
+                        <div class="sidebar__add-form">
+                          <input
+                            class=${classMap({
 			"sidebar__add-input": true,
 			"sidebar__add-input--error": !!this._fileError
 		})}
-                        type="text"
-                        placeholder="src/App.tsx"
-                        autofocus
-                        .value=${this._newFileName}
-                        @input=${this._onNewFileNameInput}
-                        @keydown=${(e) => {
+                            type="text"
+                            placeholder="src/App.tsx"
+                            autofocus
+                            .value=${this._newFileName}
+                            @input=${this._onNewFileNameInput}
+                            @keydown=${(e) => {
 			if (e.key === "Enter") this._confirmAddFile();
 			if (e.key === "Escape") this._dismissAddFile();
 		}}
-                      />
-                      ${this._fileError ? html`<div class="sidebar__add-error">${this._fileError}</div>` : ""}
-                    </div>
-                  ` : ""}
-            ` : html`
-              <button
-                id="sidebar-expand-btn"
-                class="sidebar__expand-btn"
-                aria-label="Expand file explorer"
-                @click=${() => {
+                          />
+                          ${this._fileError ? html`<div class="sidebar__add-error">${this._fileError}</div>` : ""}
+                        </div>
+                      ` : ""}
+              ` : html`
+                <button
+                  id="sidebar-expand-btn"
+                  class="sidebar__expand-btn"
+                  aria-label="Expand file explorer"
+                  @click=${() => {
 			this._sidebarOpen = true;
 		}}
-              >
-                ${ICON_FOLDER}
-              </button>
-              <sigvelo-tooltip for="sidebar-expand-btn" placement="right"> Files </sigvelo-tooltip>
-            `}
+                >
+                  ${ICON_FOLDER}
+                </button>
+                <sigvelo-tooltip for="sidebar-expand-btn" placement="right">
+                  Files
+                </sigvelo-tooltip>
+              `}
       </div>
     `;
 	}
@@ -1264,25 +1266,25 @@ var SigveloInteractiveEditor = class extends SigveloElement {
           >
         </sigvelo-button-group>
         ${this._rightPane === "console" ? html` <sigvelo-button
-              size="xs"
-              variant="ghost"
-              icon-label="Clear console"
-              @click=${() => this._clearConsole()}
-            >
-              ${ICON_TRASH}
-            </sigvelo-button>` : ""}
+                size="xs"
+                variant="ghost"
+                icon-label="Clear console"
+                @click=${() => this._clearConsole()}
+              >
+                ${ICON_TRASH}
+              </sigvelo-button>` : ""}
         ${!this.hidePreview ? html` <sigvelo-button size="xs" color="primary" @click=${() => void this._runCode()}>
-              ${ICON_PLAY} Run
-            </sigvelo-button>` : ""}
+                ${ICON_PLAY} Run
+              </sigvelo-button>` : ""}
       </div>
       ${this._rightPane === "preview" ? html`
-            <div class="preview-pane__content">
-              <sigvelo-code-preview
-                capture-console
-                @sigvelo-console=${this._onConsoleMessage}
-              ></sigvelo-code-preview>
-            </div>
-          ` : this._renderConsoleView()}
+              <div class="preview-pane__content">
+                <sigvelo-code-preview
+                  capture-console
+                  @sigvelo-console=${this._onConsoleMessage}
+                ></sigvelo-code-preview>
+              </div>
+            ` : this._renderConsoleView()}
     `;
 		return slot ? html`<div class="preview-pane" slot=${slot}>${content}</div>` : html`<div class="preview-pane">${content}</div>`;
 	}
@@ -1290,11 +1292,11 @@ var SigveloInteractiveEditor = class extends SigveloElement {
 		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}</span>
-                  <span class="console-entry__text">${entry.args.join(" ")}</span>
-                </div>
-              `)}
+                  <div class="console-entry console-entry--${entry.level}">
+                    <span class="console-entry__level">${entry.level}</span>
+                    <span class="console-entry__text">${entry.args.join(" ")}</span>
+                  </div>
+                `)}
       </div>
     `;
 	}
@@ -1314,13 +1316,13 @@ var SigveloInteractiveEditor = class extends SigveloElement {
           ${!this.hidePreview ? btn("console", "Console", this._unreadConsoleCount) : ""}
         </sigvelo-button-group>
         ${!this.hidePreview ? html` <sigvelo-button
-              size="xs"
-              color="primary"
-              icon-label="Run"
-              @click=${() => void this._runCode()}
-            >
-              ${ICON_PLAY}
-            </sigvelo-button>` : ""}
+                size="xs"
+                color="primary"
+                icon-label="Run"
+                @click=${() => void this._runCode()}
+              >
+                ${ICON_PLAY}
+              </sigvelo-button>` : ""}
       </div>
     `;
 	}
@@ -1348,44 +1350,47 @@ var SigveloInteractiveEditor = class extends SigveloElement {
                 <span class="mobile-file__name">${f.name}</span>
               </button>
               ${this.files.length > 1 ? html`<button
-                    class="mobile-file__close"
-                    type="button"
-                    aria-label="Remove ${f.name}"
-                    @click=${() => this._removeFile(f.name)}
-                  >
-                    &times;
-                  </button>` : ""}
+                      class="mobile-file__close"
+                      type="button"
+                      aria-label="Remove ${f.name}"
+                      @click=${() => this._removeFile(f.name)}
+                    >
+                      &times;
+                    </button>` : ""}
             </li>`;
 		})}
         <li>
           ${this._showAddFile ? html`<div style="padding: 6px;">
-                <div class="add-file-form">
-                  <div class="add-file-row">
-                    <input
-                      class="add-file-input ${this._fileError ? "add-file-input--error" : ""}"
-                      type="text"
-                      placeholder="filename.ts"
-                      .value=${this._newFileName}
-                      @input=${this._onNewFileNameInput}
-                      @keydown=${(e) => {
+                  <div class="add-file-form">
+                    <div class="add-file-row">
+                      <input
+                        class="add-file-input ${this._fileError ? "add-file-input--error" : ""}"
+                        type="text"
+                        placeholder="filename.ts"
+                        .value=${this._newFileName}
+                        @input=${this._onNewFileNameInput}
+                        @keydown=${(e) => {
 			if (e.key === "Enter") this._confirmAddFile();
 			if (e.key === "Escape") this._dismissAddFile();
 		}}
-                    />
-                    <sigvelo-button size="xs" color="primary" @click=${() => this._confirmAddFile()}
-                      >Add</sigvelo-button
-                    >
+                      />
+                      <sigvelo-button
+                        size="xs"
+                        color="primary"
+                        @click=${() => this._confirmAddFile()}
+                        >Add</sigvelo-button
+                      >
+                    </div>
+                    ${this._fileError ? html`<div class="add-file-error">${this._fileError}</div>` : ""}
                   </div>
-                  ${this._fileError ? html`<div class="add-file-error">${this._fileError}</div>` : ""}
-                </div>
-              </div>` : html`<button
-                class="mobile-add-btn"
-                @click=${() => {
+                </div>` : html`<button
+                  class="mobile-add-btn"
+                  @click=${() => {
 			this._showAddFile = true;
 		}}
-              >
-                + New file
-              </button>`}
+                >
+                  + New file
+                </button>`}
         </li>
       </ul>
     `;
@@ -1406,15 +1411,15 @@ var SigveloInteractiveEditor = class extends SigveloElement {
         ${this._renderMobileNav()}
         <div class="single-pane">
           ${this._compactView === "files" ? this._renderMobileFileList() : this._compactView === "code" ? this._renderEditorPane() : this._compactView === "console" ? this._renderConsoleView() : html`
-                    <div class="preview-pane">
-                      <div class="preview-pane__content">
-                        <sigvelo-code-preview
-                          capture-console
-                          @sigvelo-console=${this._onConsoleMessage}
-                        ></sigvelo-code-preview>
+                      <div class="preview-pane">
+                        <div class="preview-pane__content">
+                          <sigvelo-code-preview
+                            capture-console
+                            @sigvelo-console=${this._onConsoleMessage}
+                          ></sigvelo-code-preview>
+                        </div>
                       </div>
-                    </div>
-                  `}
+                    `}
         </div>
       `;
 		return html` <div class="content">${this._renderContent()}</div> `;

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

@@ -1,18 +1,18 @@
 //#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";
+export declare const RUNNER_CONNECT_TYPE = "sigvelo-runner-connect-v1";
+export declare const RUNNER_CHANNEL_PARAM = "sigvelo-channel";
+export 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 {
+export declare function createRunnerChannelId(): string;
+export 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;
+export declare function isRecord(value: unknown): value is Record<string, unknown>;
+export declare function parseRunnerConsoleMessage(value: unknown): RunnerConsoleMessage | null;
+export 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
@@ -20,6 +20,5 @@ declare function bindRunnerUrl(url: URL, channelId: string): URL;
  * 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 };
+export declare function connectRunner(iframe: HTMLIFrameElement, channelId: string, onMessage: (data: unknown) => void): MessagePort | null;
+//#endregion

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

@@ -1,5 +1,5 @@
 //#region src/lib/runner-url.d.ts
-type RunnerName = "pglite" | "pyscript" | "webr";
+export type RunnerName = "pglite" | "pyscript" | "webr";
 /**
  * Overrides the same-origin mount where the complete `dist/runners/` tree is served.
  *
@@ -8,8 +8,7 @@ type RunnerName = "pglite" | "pyscript" | "webr";
  * 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;
+export 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 };
+export declare function getRunnerUrl(name: RunnerName): URL;
+//#endregion

package/dist/lib/transform.d.ts

@@ -6,34 +6,34 @@
  * - 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 {
+export type FileLanguage = "javascript" | "typescript" | "jsx" | "tsx" | "html" | "css" | "python" | "r" | "sql";
+export 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>;
+export declare function detectLanguage(filename: string): FileLanguage;
+export declare function needsTransform(lang: FileLanguage): boolean;
+export 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;
+export 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>;
+export 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<{
+export 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 {
+export interface PyScriptRunPayload {
   type: "pyscript-run";
   code: string;
   bodyHtml: string;
@@ -48,6 +48,5 @@ interface PyScriptRunPayload {
  * 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 { EditorFile, FileLanguage, PyScriptRunPayload, buildHtmlPreview, buildModulePreview, buildPythonPayload, detectLanguage, needsTransform, rewriteNpmImports, transformCode };
+export declare function buildPythonPayload(files: Map<string, EditorFile>, entryName: string): PyScriptRunPayload;
+//#endregion

package/dist/{r-editor-CkKexaUb.js → r-editor-B9tPupAX.js}

@@ -1,5 +1,5 @@
-import { t as SigveloCodeEditor } from "./code-editor-hnbxw8Xk.js";
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { t as SigveloCodeEditor } from "./code-editor-De07yhYp.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
 import { bindRunnerUrl, connectRunner, createRunnerChannelId, isRecord, parseRunnerConsoleMessage } from "./lib/runner-channel.js";
 import { getRunnerUrl } from "./lib/runner-url.js";
 import { css, html } from "lit";
@@ -572,10 +572,11 @@ var SigveloREditor = class extends SigveloElement {
           </div>
         </div>
       `;
+		const plot = this._plots[this._currentPlotIndex];
 		return html`
       <div class="plot-viewer">
         <div class="plot-viewer__canvas">
-          <img src=${this._plots[this._currentPlotIndex]?.dataUrl ?? ""} alt="R plot ${this._currentPlotIndex + 1}" />
+          <img src=${plot?.dataUrl ?? ""} alt="R plot ${this._currentPlotIndex + 1}" />
         </div>
         <div class="plot-viewer__nav">
           <sigvelo-button
@@ -623,13 +624,13 @@ var SigveloREditor = class extends SigveloElement {
 		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 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>
     `;
 	}
@@ -655,15 +656,15 @@ var SigveloREditor = class extends SigveloElement {
           </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>
-            ` : ""}
+                <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()}

package/dist/{sql-editor-Az-vOWO0.js → sql-editor-CTGDNBns.js}

@@ -1,5 +1,5 @@
-import { t as SigveloCodeEditor } from "./code-editor-hnbxw8Xk.js";
-import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { t as SigveloCodeEditor } from "./code-editor-De07yhYp.js";
+import { t as __decorate } from "./decorate-BkO8ArQg.js";
 import { isRecord } from "./lib/runner-channel.js";
 import { getRunnerUrl } from "./lib/runner-url.js";
 import { css, html, nothing } from "lit";
@@ -781,8 +781,8 @@ var SigveloSqlEditor = class extends SigveloElement {
                         @click=${() => this._toggleSort(f.name)}
                       >
                         ${f.name}${this._sortColumn === f.name ? html`<span class="sort-indicator" aria-hidden="true"
-                              >${this._sortDirection === "asc" ? "▲" : "▼"}</span
-                            >` : nothing}
+                                >${this._sortDirection === "asc" ? "▲" : "▼"}</span
+                              >` : nothing}
                       </button>
                     </th>
                   `)}
@@ -843,15 +843,15 @@ var SigveloSqlEditor = class extends SigveloElement {
                 </button>
               </div>
               ${expanded ? html`
-                    <div class="schema-columns">
-                      ${table.columns.map((col) => html`
-                          <div class="schema-column">
-                            <span class="schema-column__name">${col.name}</span>
-                            <span class="schema-column__type">${col.type}</span>
-                          </div>
-                        `)}
-                    </div>
-                  ` : nothing}
+                      <div class="schema-columns">
+                        ${table.columns.map((col) => html`
+                            <div class="schema-column">
+                              <span class="schema-column__name">${col.name}</span>
+                              <span class="schema-column__type">${col.type}</span>
+                            </div>
+                          `)}
+                      </div>
+                    ` : nothing}
             </div>
           `;
 		})}

package/dist/vite.d.ts

@@ -1,7 +1,6 @@
 import { viteStaticCopy } from "vite-plugin-static-copy";
-
 //#region src/vite.d.ts
-interface InteractiveRuntimeAssetsOptions {
+export interface InteractiveRuntimeAssetsOptions {
   /** Output directory relative to Vite's public/build root. */
   destination?: string;
 }
@@ -9,6 +8,5 @@ interface InteractiveRuntimeAssetsOptions {
  * 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 };
+export declare function interactiveRuntimeAssets(options?: InteractiveRuntimeAssetsOptions): ReturnType<typeof viteStaticCopy>;
+//#endregion

package/dist/vite.js

@@ -1,5 +1,5 @@
 import { createRequire } from "node:module";
-import { dirname, join, posix, resolve } from "node:path";
+import { dirname, join, posix, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { viteStaticCopy } from "vite-plugin-static-copy";
 //#region src/vite.ts
@@ -43,20 +43,26 @@ function interactiveRuntimeAssets(options = {}) {
 			...packageRuntime("webr", "LICENSE.md")
 		}
 	];
-	return viteStaticCopy({ targets: [{
+	const targets = [{
 		src: join(runnerRoot, "*.{html,js}"),
-		dest: destination
+		dest: destination,
+		rename: { stripBase: true }
 	}, ...runtimes.flatMap(({ directory, dist, license }) => {
 		const runtimeDestination = posix.join(destination, directory);
 		return [{
 			src: dist,
 			dest: runtimeDestination,
-			rename: "."
+			rename: (_name, _extension, fullPath) => ({
+				stripBase: true,
+				name: relative(dist, fullPath)
+			})
 		}, {
 			src: license,
-			dest: runtimeDestination
+			dest: runtimeDestination,
+			rename: { stripBase: true }
 		}];
-	})] });
+	})];
+	return viteStaticCopy({ targets });
 }
 //#endregion
 export { interactiveRuntimeAssets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/interactive-components",
-  "version": "0.3.12",
+  "version": "0.4.0",
   "description": "Sigvelo interactive code editor components built with Lit.",
   "keywords": [
     "code-editor",
@@ -41,41 +41,41 @@
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",
-    "@codemirror/commands": "^6.10.4",
+    "@codemirror/commands": "^6.11.0",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.12",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lang-python": "^6.2.1",
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/language": "^6.12.4",
-    "@codemirror/legacy-modes": "^6.5.3",
-    "@codemirror/search": "^6.7.1",
-    "@codemirror/state": "^6.7.1",
-    "@codemirror/view": "^6.43.8",
-    "@electric-sql/pglite": "0.4.2",
-    "@electric-sql/pglite-postgis": "0.0.4",
+    "@codemirror/legacy-modes": "^6.5.4",
+    "@codemirror/search": "^6.7.2",
+    "@codemirror/state": "^6.7.4",
+    "@codemirror/view": "^6.43.11",
+    "@electric-sql/pglite": "0.5.8",
+    "@electric-sql/pglite-postgis": "0.2.8",
     "@lezer/highlight": "^1.2.3",
-    "@pyscript/core": "0.7.19",
-    "vite-plugin-static-copy": "^3.4.0",
-    "webr": "0.5.8",
-    "@mcp-b/wc-support": "0.3.12",
-    "@mcp-b/web-components": "0.3.12"
+    "@pyscript/core": "0.7.31",
+    "vite-plugin-static-copy": "^4.1.1",
+    "webr": "0.6.0",
+    "@mcp-b/wc-support": "0.3.13",
+    "@mcp-b/web-components": "0.4.0"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.10.10",
-    "@storybook/addon-a11y": "^10.5.7",
-    "@storybook/addon-docs": "^10.5.7",
-    "@storybook/addon-vitest": "^10.5.7",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@storybook/addon-a11y": "10.5.7",
+    "@storybook/addon-docs": "10.5.7",
+    "@storybook/addon-vitest": "10.5.7",
     "@storybook/web-components-vite": "10.5.7",
-    "@vitest/browser-playwright": "^4.1.10",
-    "@vitest/coverage-v8": "^4.1.10",
-    "playwright": "~1.61.1",
-    "storybook": "^10.5.7",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
+    "playwright": "1.61.1",
+    "storybook": "10.5.7",
     "tinyglobby": "^0.2.17",
     "typescript": "^6.0.3",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
-    "vite-plugin-static-copy": "^3.4.0",
-    "vitest": "^4.1.10"
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.1",
+    "vite-plugin-static-copy": "^4.1.1",
+    "vitest": "^4.1.11"
   },
   "peerDependencies": {
     "lit": "^3.0.0",