@mcp-b/interactive-components 0.2.21 → 0.3.0

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

@@ -1,12 +1,12 @@
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
 import { css, html } from "lit";
-import { property, query, state } from "lit/decorators.js";
+import { property, query } 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 { defaultKeymap, history, historyKeymap } 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";
@@ -17,20 +17,13 @@ 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;
+    font-family: var(--sigvelo-font-mono);
+    font-size: var(--sigvelo-text-code);
     background: var(--sigvelo-interactive-editor-bg, #f8f8f8);
     height: 100%;
   }
@@ -43,13 +36,17 @@ var code_editor_styles_default = css`
   /* CodeMirror overrides that work inside Shadow DOM */
   .cm-host .cm-editor {
     height: 100%;
-    outline: none;
+  }
+
+  .cm-host .cm-editor:focus-within {
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: calc(-1 * var(--sigvelo-focus-width));
   }
 
   .cm-host .cm-scroller {
     font-family: inherit;
-    font-size: 13px;
-    line-height: 1.6;
+    font-size: var(--sigvelo-text-code);
+    line-height: var(--sigvelo-text-code-leading);
   }
 
   .cm-host .cm-gutters {
@@ -61,9 +58,8 @@ var code_editor_styles_default = css`
   .cm-host .cm-fold-open::after,
   .cm-host .cm-fold-closed::after {
     display: inline-block;
-    font-size: 10px;
-    line-height: 1;
-    opacity: 0.5;
+    font-size: var(--sigvelo-text-3xs);
+    line-height: var(--sigvelo-leading-none);
     cursor: pointer;
   }
   .cm-host .cm-fold-open::after {
@@ -75,165 +71,116 @@ var code_editor_styles_default = css`
 `;
 //#endregion
 //#region src/components/code-editor/code-editor.ts
-const lightHighlight = HighlightStyle.define([
+const highlight = 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"
+		color: "var(--sigvelo-interactive-syn-keyword)"
 	},
 	{
-		tag: tags.punctuation,
-		color: "#24292f"
+		tag: [tags.string, tags.regexp],
+		color: "var(--sigvelo-interactive-syn-string)"
 	},
 	{
-		tag: tags.bracket,
-		color: "#24292f"
-	},
-	{
-		tag: tags.string,
-		color: "#0a3069"
-	},
-	{
-		tag: tags.regexp,
-		color: "#0a3069"
+		tag: [tags.comment, tags.meta],
+		color: "var(--sigvelo-interactive-syn-comment)"
 	},
 	{
 		tag: [
-			tags.name,
-			tags.deleted,
-			tags.character
+			tags.number,
+			tags.bool,
+			tags.atom
 		],
-		color: "#cf222e"
+		color: "var(--sigvelo-interactive-syn-number)"
 	},
 	{
-		tag: [tags.propertyName, tags.macroName],
-		color: "#0550ae"
+		tag: tags.function(tags.variableName),
+		color: "var(--sigvelo-interactive-syn-function)"
 	},
 	{
-		tag: [tags.function(tags.variableName), tags.labelName],
-		color: "#8250df"
+		tag: tags.variableName,
+		color: "var(--sigvelo-interactive-syn-variable)"
 	},
 	{
-		tag: [
-			tags.color,
-			tags.constant(tags.name),
-			tags.standard(tags.name)
-		],
-		color: "#0550ae"
+		tag: [tags.typeName, tags.className],
+		color: "var(--sigvelo-interactive-syn-type)"
 	},
 	{
-		tag: [tags.definition(tags.name), tags.separator],
-		color: "#24292f"
+		tag: tags.tagName,
+		color: "var(--sigvelo-interactive-syn-tag)"
 	},
 	{
-		tag: [
-			tags.typeName,
-			tags.className,
-			tags.number,
-			tags.changed,
-			tags.annotation,
-			tags.self,
-			tags.namespace
-		],
-		color: "#953800"
+		tag: tags.attributeName,
+		color: "var(--sigvelo-interactive-syn-attribute)"
 	},
 	{
-		tag: tags.comment,
-		color: "#57606a",
-		fontStyle: "italic"
+		tag: tags.propertyName,
+		color: "var(--sigvelo-interactive-syn-property)"
 	},
 	{
-		tag: tags.meta,
-		color: "#57606a"
+		tag: [tags.punctuation, tags.operator],
+		color: "var(--sigvelo-interactive-syn-punctuation)"
+	}
+]);
+const theme = EditorView.theme({
+	"&": {
+		color: "var(--sigvelo-interactive-editor-text)",
+		backgroundColor: "var(--sigvelo-interactive-editor-bg)"
 	},
-	{
-		tag: tags.tagName,
-		color: "#116329"
+	".cm-content": { caretColor: "var(--sigvelo-interactive-editor-cursor)" },
+	".cm-cursor": { borderLeftColor: "var(--sigvelo-interactive-editor-cursor)" },
+	"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, ::selection": { backgroundColor: "var(--sigvelo-interactive-editor-selection)" },
+	".cm-activeLine, .cm-activeLineGutter": { backgroundColor: "var(--sigvelo-interactive-editor-active-line)" },
+	".cm-gutters": {
+		backgroundColor: "var(--sigvelo-interactive-editor-gutter-bg)",
+		color: "var(--sigvelo-interactive-editor-gutter-text)",
+		borderRight: "none"
 	},
-	{
-		tag: tags.attributeName,
-		color: "#0550ae"
+	".cm-tooltip, .cm-panels": {
+		backgroundColor: "var(--sigvelo-color-surface)",
+		color: "var(--sigvelo-color-text)",
+		borderColor: "var(--sigvelo-color-neutral-border-muted)"
 	},
-	{
-		tag: tags.attributeValue,
-		color: "#0a3069"
+	".cm-tooltip-autocomplete ul li[aria-selected]": {
+		backgroundColor: "var(--sigvelo-color-selection-bg)",
+		color: "var(--sigvelo-color-selection-text)"
 	},
-	{
-		tag: tags.processingInstruction,
-		color: "#57606a"
+	".cm-tooltip-autocomplete-disabled ul li[aria-selected], .cm-foldPlaceholder": {
+		backgroundColor: "var(--sigvelo-color-neutral-bg-muted)",
+		color: "var(--sigvelo-color-text)",
+		borderColor: "var(--sigvelo-color-neutral-border-muted)"
 	},
-	{
-		tag: tags.documentMeta,
-		color: "#57606a"
+	".cm-foldPlaceholder": { borderRadius: "var(--sigvelo-radius-sm)" },
+	".cm-selectionMatch, .cm-searchMatch": {
+		backgroundColor: "var(--sigvelo-color-neutral-bg-muted)",
+		color: "var(--sigvelo-color-text)"
 	},
-	{
-		tag: tags.heading,
-		color: "#24292f",
-		fontWeight: "bold"
+	".cm-searchMatch-selected": {
+		backgroundColor: "var(--sigvelo-color-selection-bg)",
+		color: "var(--sigvelo-color-selection-text)"
 	},
-	{
-		tag: tags.bool,
-		color: "#0550ae"
+	".cm-selectionMatch *, .cm-searchMatch *": { color: "inherit" },
+	".cm-textfield, .cm-button": {
+		color: "var(--sigvelo-color-text)",
+		borderColor: "var(--sigvelo-color-neutral-border-muted)",
+		borderRadius: "var(--sigvelo-radius-sm)"
 	},
-	{
-		tag: tags.atom,
-		color: "#0550ae"
+	".cm-textfield": { backgroundColor: "var(--sigvelo-color-surface)" },
+	".cm-textfield:hover": { borderColor: "var(--sigvelo-color-neutral-border)" },
+	".cm-button": {
+		backgroundImage: "none",
+		backgroundColor: "var(--sigvelo-color-neutral-bg-subtle)"
 	},
-	{
-		tag: tags.special(tags.variableName),
-		color: "#953800"
+	".cm-button:hover:not(:disabled)": { backgroundColor: "var(--sigvelo-color-neutral-bg-muted)" },
+	".cm-button:active:not(:disabled)": {
+		backgroundImage: "none",
+		backgroundColor: "var(--sigvelo-color-neutral-bg)",
+		color: "var(--sigvelo-color-neutral-text-on-bg)"
 	},
-	{
-		tag: tags.variableName,
-		color: "#24292f"
+	".cm-textfield:focus-visible, .cm-button:focus-visible": {
+		outline: "var(--sigvelo-focus-ring)",
+		outlineOffset: "var(--sigvelo-focus-offset)"
 	}
-]);
-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();
@@ -255,14 +202,14 @@ function getLanguageExtension(lang) {
 *
 * @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.
+* Uses the shared editor tokens, inheriting scoped `data-theme` overrides
+* and the operating-system theme. Tab moves focus out of the editor.
 *
 * @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.
+* @event sigvelo-change - Fires when the document content changes. Read the new content from the element’s `value` property.
 */
 var SigveloCodeEditor = class extends SigveloElement {
 	constructor(..._args) {
@@ -271,16 +218,11 @@ var SigveloCodeEditor = class extends SigveloElement {
 		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];
@@ -295,8 +237,7 @@ var SigveloCodeEditor = class extends SigveloElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this._dark = this._isDark();
-		this._observeTheme();
+		if (this.hasUpdated) this._createView();
 	}
 	firstUpdated() {
 		this._createView();
@@ -305,7 +246,6 @@ var SigveloCodeEditor = class extends SigveloElement {
 		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 });
@@ -319,35 +259,11 @@ var SigveloCodeEditor = class extends SigveloElement {
 	}
 	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;
+		if (!this.isConnected || !this._host || this._view) return;
 		const editorState = EditorState.create({
 			doc: this.value,
 			extensions: [
@@ -377,11 +293,11 @@ var SigveloCodeEditor = class extends SigveloElement {
 					...searchKeymap,
 					...historyKeymap,
 					...foldKeymap,
-					...completionKeymap,
-					indentWithTab
+					...completionKeymap
 				]),
 				this._langCompartment.of(getLanguageExtension(this.language)),
-				this._themeCompartment.of(this._dark ? [oneDark, darkTheme] : [lightTheme, syntaxHighlighting(lightHighlight)]),
+				theme,
+				syntaxHighlighting(highlight),
 				this._readonlyCompartment.of(EditorState.readOnly.of(this.readonly)),
 				EditorView.updateListener.of((update) => {
 					if (update.docChanged) {
@@ -403,8 +319,7 @@ var SigveloCodeEditor = class extends SigveloElement {
 			parent: this._host,
 			root: this.shadowRoot ?? void 0
 		});
-		const scroller = this._view.scrollDOM;
-		if (scroller) scroller.tabIndex = 0;
+		this._view.scrollDOM.tabIndex = 0;
 	}
 	/** Returns the underlying CodeMirror `EditorView`, or `null` if not yet created. */
 	getEditorView() {
@@ -419,7 +334,6 @@ __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 };

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

@@ -1,6 +1,6 @@
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import { buildHtmlPreview, buildModulePreview, buildPythonPayload, detectLanguage } from "./lib/transform.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";
 import { css, html } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -72,6 +72,8 @@ var SigveloCodePreview = class SigveloCodePreview extends SigveloElement {
 		this._error = null;
 		this._loading = false;
 		this._blobUrls = [];
+		this._runId = 0;
+		this._hasRun = false;
 		this._pendingPyPayload = null;
 		this._runnerPort = null;
 		this._runnerChannelId = createRunnerChannelId();
@@ -123,8 +125,14 @@ var SigveloCodePreview = class SigveloCodePreview extends SigveloElement {
 })();
 <\/script>`;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasUpdated && this._hasRun) this.run();
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this._runId++;
+		this._loading = false;
 		this._runnerPort?.close();
 		this._runnerPort = null;
 		this._revokeBlobUrls();
@@ -152,6 +160,8 @@ var SigveloCodePreview = class SigveloCodePreview extends SigveloElement {
 	}
 	/** Build and display the current file set. */
 	async run() {
+		const runId = ++this._runId;
+		this._hasRun = true;
 		this._revokeBlobUrls();
 		this._loading = true;
 		this._error = null;
@@ -172,11 +182,17 @@ var SigveloCodePreview = class SigveloCodePreview extends SigveloElement {
 				else this._pyRunnerSrc = runnerUrl;
 			} else if (entryLang === "html") {
 				this._pyRunnerSrc = "";
-				this._srcdoc = this._injectConsoleCapture(await buildHtmlPreview(fileMap));
+				const result = await buildHtmlPreview(fileMap);
+				if (runId !== this._runId) return;
+				this._srcdoc = this._injectConsoleCapture(result);
 				this._blobUrls = [];
 			} else {
 				this._pyRunnerSrc = "";
 				const result = await buildModulePreview(fileMap, entry);
+				if (runId !== this._runId) {
+					result.blobUrls.forEach((url) => URL.revokeObjectURL(url));
+					return;
+				}
 				this._srcdoc = this._injectConsoleCapture(result.html);
 				this._blobUrls = result.blobUrls;
 			}
@@ -185,6 +201,7 @@ var SigveloCodePreview = class SigveloCodePreview extends SigveloElement {
 				composed: true
 			}));
 		} catch (err) {
+			if (runId !== this._runId) return;
 			const message = err instanceof Error ? err.message : String(err);
 			this._error = message;
 			this.dispatchEvent(new CustomEvent("sigvelo-error", {
@@ -193,7 +210,7 @@ var SigveloCodePreview = class SigveloCodePreview extends SigveloElement {
 				detail: { message }
 			}));
 		} finally {
-			this._loading = false;
+			if (runId === this._runId) this._loading = false;
 		}
 	}
 	_resolveEntry(fileMap) {

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

@@ -1,4 +1,4 @@
-import { n as FileLanguage } from "../../transform-DWhHlnkw.js";
+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";
@@ -9,14 +9,14 @@ import { EditorView } from "@codemirror/view";
  *
  * @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.
+ * Uses the shared editor tokens, inheriting scoped `data-theme` overrides
+ * and the operating-system theme. Tab moves focus out of the editor.
  *
  * @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.
+ * @event sigvelo-change - Fires when the document content changes. Read the new content from the element’s `value` property.
  */
 declare class SigveloCodeEditor extends SigveloElement {
   static styles: CSSResultGroup;
@@ -35,22 +35,15 @@ declare class SigveloCodeEditor extends SigveloElement {
    */
   private get accessibleLabel();
   private _host;
-  private _dark;
   private _view;
   private _langCompartment;
-  private _themeCompartment;
   private _readonlyCompartment;
   private _labelCompartment;
   private _suppressExternalUpdate;
-  private _themeObserver;
-  private _systemTheme;
-  private _onSystemThemeChange;
   connectedCallback(): void;
   protected firstUpdated(): void;
   protected updated(changed: PropertyValues): void;
   disconnectedCallback(): void;
-  private _isDark;
-  private _observeTheme;
   private _createView;
   /** Returns the underlying CodeMirror `EditorView`, or `null` if not yet created. */
   getEditorView(): EditorView | null;

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

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

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

@@ -1,4 +1,4 @@
-import { t as EditorFile } from "../../transform-DWhHlnkw.js";
+import { EditorFile } from "../../lib/transform.js";
 import { CSSResultGroup } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
 //#region src/components/code-preview/code-preview.d.ts
@@ -33,10 +33,13 @@ declare class SigveloCodePreview extends SigveloElement {
   private _error;
   private _loading;
   private _blobUrls;
+  private _runId;
+  private _hasRun;
   private _pendingPyPayload;
   private _runnerPort;
   private readonly _runnerChannelId;
   private static readonly CONSOLE_CAPTURE_SCRIPT;
+  connectedCallback(): void;
   disconnectedCallback(): void;
   private _onRunnerMessage;
   private _postPyPayload;

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

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

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

@@ -1,4 +1,4 @@
-import { t as EditorFile } from "../../transform-DWhHlnkw.js";
+import { EditorFile } from "../../lib/transform.js";
 import { CSSResultGroup, PropertyValues } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
 //#region src/components/interactive-editor/interactive-editor.d.ts
@@ -39,8 +39,8 @@ declare class SigveloInteractiveEditor extends SigveloElement {
   private _resizeObserver;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  protected willUpdate(changed: PropertyValues): void;
-  protected updated(changed: PropertyValues): void;
+  protected willUpdate(changed: PropertyValues<this>): void;
+  protected updated(changed: PropertyValues<this>): void;
   private _onConsoleMessage;
   private _clearConsole;
   private _initFiles;
@@ -52,6 +52,7 @@ declare class SigveloInteractiveEditor extends SigveloElement {
   /** Returns the runtime language of the project ('python', 'r', or 'js'). */
   private _projectRuntime;
   private _confirmAddFile;
+  private _onNewFileNameInput;
   private _dismissAddFile;
   private _removeFile;
   private _switchView;

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

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

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

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

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

@@ -1,2 +1,2 @@
-import { t as SigveloSqlEditor } from "../../sql-editor-CsNrjJ2_.js";
+import { t as SigveloSqlEditor } from "../../sql-editor-26vbWzLE.js";
 export { SigveloSqlEditor };