wgsl-edit 0.0.25 → 0.0.26

package/dist/{WgslEdit-ByXfb3R9.js → WgslEdit-CNK80480.js}

@@ -5,10 +5,14 @@ import { fileToModulePath, link } from "wesl";
 import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { searchKeymap } from "@codemirror/search";
-import { Compartment, EditorState, Text } from "@codemirror/state";
+import { Compartment, EditorState, Text, Transaction } from "@codemirror/state";
 import { EditorView, crosshairCursor, drawSelection, dropCursor, gutters, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers, rectangularSelection } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 import { fetchPackagesByName } from "wesl-fetch";
+//#region src/SaveEndpoint.ts
+/** Shared between client (WgslEdit) and server (SaveMiddleware) so they can't drift. */
+const saveEndpoint = "/__wgsl-edit/save";
+//#endregion
 //#region src/WgslEdit.css?inline
 var WgslEdit_default = ":host {\n  --tab-bar-bg: transparent;\n  --tab-border: #ccc;\n  --tab-color: #999;\n  --tab-active-bg: #fff;\n  --tab-active-color: #222;\n  --tab-accent: #5f61d8;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-height: 100px;\n}\n\n:host(.dark) {\n  --tab-bar-bg: transparent;\n  --tab-border: #555;\n  --tab-color: #999;\n  --tab-active-bg: #1e1e1e;\n  --tab-active-color: #fff;\n}\n\n.tab-bar {\n  --bar-v: 6px;\n  --bar-h: 8px;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: var(--bar-v) var(--bar-h);\n  background: var(--tab-bar-bg);\n  flex-shrink: 0;\n  position: relative;\n}\n\n.tab-bar::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: var(--tab-border);\n}\n\n.tab {\n  --tab-v: 5px;\n  --tab-h: 12px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: var(--tab-v) var(--tab-h);\n  background: transparent;\n  border: none;\n  border-radius: 0;\n  color: var(--tab-color);\n  cursor: pointer;\n  position: relative;\n  font-size: 15px;\n  font-family: system-ui, sans-serif;\n}\n\n.tab.active {\n  color: var(--tab-accent);\n  font-weight: 600;\n  padding-bottom: calc(var(--tab-v) + var(--bar-v) + 0.5px);\n  margin-bottom: calc(-1 * (var(--bar-v) + 0.5px));\n  position: relative;\n  z-index: 1;\n  border-bottom: 2px solid var(--tab-accent);\n}\n\n.tab.active:first-child {\n  margin-left: calc(-1 * var(--bar-h));\n  padding-left: calc(var(--tab-h) + var(--bar-h));\n}\n\n.tab-close {\n  position: absolute;\n  right: -8px;\n  /* top: 2px; */\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  opacity: 0;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.tab:hover .tab-close {\n  opacity: 0.6;\n}\n\n.tab-close:hover {\n  opacity: 1;\n}\n\n.tab-rename {\n  background: var(--tab-active-bg);\n  border: 1px solid var(--tab-border);\n  border-radius: 4px;\n  color: var(--tab-active-color);\n  font-size: 15px;\n  font-family: system-ui, sans-serif;\n  padding: 0 4px;\n  outline: none;\n}\n\n.tab-add {\n  padding: 0 10px;\n  background: transparent;\n  border: none;\n  color: var(--tab-color);\n  cursor: pointer;\n  font-size: 25px;\n  line-height: 1;\n}\n\n.tab-add:hover {\n  color: var(--tab-active-color);\n}\n\n.editor-container {\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  padding: var(--editor-padding, 16px 0 0);\n}\n\n.cm-editor {\n  height: 100%;\n  font-size: var(--editor-font-size, 14px);\n}\n\n.cm-scroller {\n  overflow: auto;\n}\n\n.snackbar {\n  position: absolute;\n  bottom: 16px;\n  left: 16px;\n  background: #e8e8e8;\n  color: #333;\n  padding: 10px 20px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-family: system-ui, sans-serif;\n  line-height: 1.4;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s;\n  z-index: 10;\n}\n\n:host(.dark) .snackbar {\n  background: #3a3a3a;\n  color: #e0e0e0;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n}\n\n.snackbar.visible {\n  opacity: 1;\n}\n";
 //#endregion
@@ -47,7 +51,8 @@ var WgslEdit = class extends HTMLElement {
 		"lint-from",
 		"line-numbers",
 		"fetch-libs",
-		"gpu-lint"
+		"gpu-lint",
+		"autosave"
 	];
 	editorView = null;
 	editorContainer;
@@ -76,6 +81,10 @@ var WgslEdit = class extends HTMLElement {
 	_fetchingPkgs = /* @__PURE__ */ new Set();
 	_fetchedPkgs = /* @__PURE__ */ new Set();
 	_snackTimer;
+	_devSaveListener = null;
+	_saveTimer;
+	_dirtyFiles = /* @__PURE__ */ new Set();
+	_switchingFile = false;
 	_externalDiagnostics = [];
 	_lintFromEl = null;
 	/** Bound listeners for lint-from element's compile events. */
@@ -99,10 +108,13 @@ var WgslEdit = class extends HTMLElement {
 	connectedCallback() {
 		this.initEditor();
 		this.loadInitialContent();
-		upgradeProperty(this, "conditions");
-		upgradeProperty(this, "source");
-		upgradeProperty(this, "sources");
-		upgradeProperty(this, "project");
+		for (const p of [
+			"conditions",
+			"source",
+			"sources",
+			"project",
+			"autosave"
+		]) upgradeProperty(this, p);
 	}
 	disconnectedCallback() {
 		this.connectLintSource(null);
@@ -110,25 +122,43 @@ var WgslEdit = class extends HTMLElement {
 		this.editorView = null;
 	}
 	attributeChangedCallback(name, _old, value) {
-		if (name === "src" && value && this.editorView) this.loadFromUrl(value);
-		else if (name === "readonly") this.updateReadonly();
-		else if (name === "theme") this.theme = value || "auto";
-		else if (name === "tabs") {
-			this._tabs = value !== "false";
-			this.renderTabs();
-		} else if (name === "lint") {
-			this._lint = value || "on";
-			this.updateLint();
-		} else if (name === "lint-from") this.connectLintSource(value);
-		else if (name === "line-numbers") {
-			this._lineNumbers = value === "true";
-			this.updateLineNumbers();
-		} else if (name === "fetch-libs") {
-			this._fetchLibs = value !== "false";
-			this.updateLint();
-		} else if (name === "gpu-lint") {
-			this._gpuLint = value !== "off";
-			this.updateLint();
+		switch (name) {
+			case "src":
+				if (value && this.editorView) this.loadFromUrl(value);
+				break;
+			case "readonly":
+				this.updateReadonly();
+				break;
+			case "theme":
+				this.theme = value || "auto";
+				break;
+			case "tabs":
+				this._tabs = value !== "false";
+				this.renderTabs();
+				break;
+			case "lint":
+				this._lint = value || "on";
+				this.updateLint();
+				break;
+			case "lint-from":
+				this.connectLintSource(value);
+				break;
+			case "line-numbers":
+				this._lineNumbers = value === "true";
+				this.updateLineNumbers();
+				break;
+			case "fetch-libs":
+				this._fetchLibs = value !== "false";
+				this.updateLint();
+				break;
+			case "gpu-lint":
+				this._gpuLint = value !== "off";
+				this.updateLint();
+				break;
+			case "autosave":
+				if (value !== null && value !== "false") this.enableDevSave();
+				else this.disableDevSave();
+				break;
 		}
 	}
 	/** Conditions for conditional compilation (@if/@elif/@else). */
@@ -140,6 +170,10 @@ var WgslEdit = class extends HTMLElement {
 		this.updateLint();
 		this.dispatchChange();
 	}
+	/** Reconfigure a compartment via the active editor view (no-op if unmounted). */
+	reconfigure(comp, ext) {
+		this.editorView?.dispatch({ effects: comp.reconfigure(ext) });
+	}
 	/** Active file content (single-file API). */
 	get source() {
 		return this.editorView?.state.doc.toString() ?? this._pendingSource ?? "";
@@ -147,27 +181,30 @@ var WgslEdit = class extends HTMLElement {
 	/** Set active file content (single-file API). Auto-creates a default file entry. */
 	set source(value) {
 		if (!this._activeFile && this._files.size === 0) {
-			this._files.set("main.wesl", { doc: Text.of(value.split("\n")) });
+			this._files.set("main.wesl", { doc: toDoc(value) });
 			this._activeFile = "main.wesl";
 			this.renderTabs();
 		}
 		if (this.editorView) {
-			const to = this.editorView.state.doc.length;
-			this.editorView.dispatch({ changes: {
-				from: 0,
-				to,
-				insert: value
-			} });
+			const docLength = this.editorView.state.doc.length;
+			this.editorView.dispatch({
+				changes: {
+					from: 0,
+					to: docLength,
+					insert: value
+				},
+				annotations: Transaction.addToHistory.of(false)
+			});
 		} else {
 			this._pendingSource = value;
 			const entry = this._files.get(this._activeFile);
-			if (entry) entry.doc = Text.of(value.split("\n"));
+			if (entry) entry.doc = toDoc(value);
 		}
 	}
 	/** All file contents keyed by module path (e.g., "package::main"). */
 	get sources() {
 		this.saveCurrentFileState();
-		const pkg = this._packageName ?? "package";
+		const pkg = this.pkgName();
 		const result = {};
 		for (const [tabName, state] of this._files) result[fileToModulePath(tabName, pkg, false)] = state.doc.toString();
 		return result;
@@ -177,12 +214,13 @@ var WgslEdit = class extends HTMLElement {
 		this._files.clear();
 		for (const [key, content] of Object.entries(value)) {
 			const tabName = toTabName(key);
-			this._files.set(tabName, { doc: Text.of(content.split("\n")) });
+			this._files.set(tabName, { doc: toDoc(content) });
 		}
 		const firstKey = Object.keys(value)[0];
 		if (firstKey) this.switchToFile(toTabName(firstKey));
 		this.renderTabs();
 	}
+	/** Snapshot of all editor state needed to link: sources, conditions, libs, root module. */
 	get project() {
 		return {
 			weslSrc: this.sources,
@@ -190,20 +228,22 @@ var WgslEdit = class extends HTMLElement {
 			conditions: this._conditions,
 			constants: this._constants,
 			libs: this._libs,
-			packageName: this._packageName
+			packageName: this._packageName,
+			shaderRoot: this.shaderRoot ?? void 0
 		};
 	}
 	set project(value) {
 		const { weslSrc, rootModuleName, conditions } = value;
-		const { constants, packageName, libs } = value;
+		const { constants, packageName, libs, shaderRoot } = value;
 		if (conditions !== void 0) this._conditions = conditions;
 		if (constants !== void 0) this._constants = constants;
 		if (packageName !== void 0) this._packageName = packageName;
 		if (libs !== void 0) this._libs = libs;
 		if (rootModuleName !== void 0) this._rootModuleName = rootModuleName;
+		if (shaderRoot !== void 0 && !this.hasAttribute("shader-root")) this.shaderRoot = shaderRoot;
 		if (weslSrc) {
 			this.sources = weslSrc;
-			const tab = toTabName(rootModuleName ?? this._rootModuleName ?? "");
+			const tab = toTabName(this._rootModuleName ?? "");
 			if (tab) this.activeFile = tab;
 		}
 		this.updateLint();
@@ -216,14 +256,13 @@ var WgslEdit = class extends HTMLElement {
 		})).dest;
 	}
 	linkParams() {
-		const pkg = this._packageName ?? "package";
 		return {
 			weslSrc: this.sources,
-			rootModuleName: this._rootModuleName ?? fileToModulePath(this._activeFile, pkg, false),
+			rootModuleName: this._rootModuleName ?? this.activeModulePath(),
 			conditions: this._conditions,
 			constants: this._constants,
 			libs: this._libs,
-			packageName: pkg
+			packageName: this.pkgName()
 		};
 	}
 	get libs() {
@@ -279,6 +318,20 @@ var WgslEdit = class extends HTMLElement {
 		if (!value) this.setAttribute("gpu-lint", "off");
 		else this.removeAttribute("gpu-lint");
 	}
+	/** Persist edits to disk via the dev-server save endpoint.
+	*  Requires `wgslEditAutosave()` to be installed in vite.config.ts. */
+	get autosave() {
+		return this._devSaveListener !== null;
+	}
+	set autosave(value) {
+		if (value) {
+			this.enableDevSave();
+			this.setAttribute("autosave", "");
+		} else {
+			this.disableDevSave();
+			this.removeAttribute("autosave");
+		}
+	}
 	/** Whether to auto-fetch missing library packages from npm (default: true). */
 	get fetchLibs() {
 		return this._fetchLibs;
@@ -328,13 +381,15 @@ var WgslEdit = class extends HTMLElement {
 		if (value) this.setAttribute("shader-root", value);
 		else this.removeAttribute("shader-root");
 	}
+	/** Add a new file and switch to it. No-op if `name` already exists. */
 	addFile(name, content = "") {
 		if (this._files.has(name)) return;
-		this._files.set(name, { doc: Text.of(content.split("\n")) });
+		this._files.set(name, { doc: toDoc(content) });
 		this.switchToFile(name);
 		this.renderTabs();
 		this.dispatchFileChange("add", name);
 	}
+	/** Remove a file. No-op if it is missing or is the last remaining file. */
 	removeFile(name) {
 		if (!this._files.has(name) || this._files.size <= 1) return;
 		this._files.delete(name);
@@ -345,6 +400,7 @@ var WgslEdit = class extends HTMLElement {
 		this.renderTabs();
 		this.dispatchFileChange("remove", name);
 	}
+	/** Rename a file, preserving its document and editor state. No-op on collision. */
 	renameFile(oldName, newName) {
 		const state = this._files.get(oldName);
 		if (!state || this._files.has(newName)) return;
@@ -360,28 +416,36 @@ var WgslEdit = class extends HTMLElement {
 		this.saveCurrentFileState();
 		this._activeFile = name;
 		const fileState = this._files.get(name);
-		if (this.editorView) {
-			const changes = {
-				from: 0,
-				to: this.editorView.state.doc.length,
-				insert: fileState.doc.toString()
-			};
-			const effects = EditorView.scrollIntoView(fileState.scrollPos ?? 0);
-			this.editorView.dispatch({
-				changes,
-				selection: fileState.selection,
-				effects
-			});
+		const view = this.editorView;
+		if (view) {
+			const state = fileState.state ?? this.createFileState(fileState.doc);
+			fileState.state = state;
+			view.setState(state);
+			if (fileState.scrollPos != null) view.scrollDOM.scrollTop = fileState.scrollPos;
 		}
 		this.renderTabs();
 	}
+	/** Build a fresh EditorState seeded with `doc` and the current extension set. */
+	createFileState(doc) {
+		return EditorState.create({
+			doc,
+			extensions: this.buildExtensions()
+		});
+	}
 	saveCurrentFileState() {
 		const view = this.editorView;
-		const state = this._activeFile ? this._files.get(this._activeFile) : void 0;
-		if (!view || !state) return;
-		state.doc = view.state.doc;
-		state.selection = view.state.selection;
-		state.scrollPos = view.scrollDOM.scrollTop;
+		const fileState = this._activeFile ? this._files.get(this._activeFile) : void 0;
+		if (!view || !fileState) return;
+		fileState.state = view.state;
+		fileState.doc = view.state.doc;
+		fileState.selection = view.state.selection;
+		fileState.scrollPos = view.scrollDOM.scrollTop;
+	}
+	pkgName() {
+		return this._packageName ?? "package";
+	}
+	activeModulePath() {
+		return fileToModulePath(this._activeFile, this.pkgName(), false);
 	}
 	dispatchChange() {
 		this.dispatchEvent(new CustomEvent("change", { detail: this.project }));
@@ -393,25 +457,86 @@ var WgslEdit = class extends HTMLElement {
 		};
 		this.dispatchEvent(new CustomEvent("file-change", { detail }));
 	}
+	scheduleAutosave() {
+		this._dirtyFiles.add(this._activeFile);
+		clearTimeout(this._saveTimer);
+		this._saveTimer = setTimeout(() => this.fireAutosave(), 500);
+	}
+	/** Dispatch an `autosave` event with a fresh project snapshot and the dirty-file list. */
+	fireAutosave() {
+		const dirty = [...this._dirtyFiles];
+		this._dirtyFiles.clear();
+		const detail = {
+			project: this.project,
+			dirty
+		};
+		this.dispatchEvent(new CustomEvent("autosave", { detail }));
+	}
+	enableDevSave() {
+		if (this._devSaveListener) return;
+		this._devSaveListener = (e) => this.devSave(e);
+		this.addEventListener("autosave", this._devSaveListener);
+	}
+	disableDevSave() {
+		if (!this._devSaveListener) return;
+		this.removeEventListener("autosave", this._devSaveListener);
+		this._devSaveListener = null;
+	}
+	/** Built-in `autosave` listener: POST each dirty file to the dev-server save endpoint. */
+	async devSave(e) {
+		const root = this.shaderRoot;
+		if (!root) return;
+		const { project, dirty } = e.detail;
+		const weslSrc = project.weslSrc;
+		if (!weslSrc) return;
+		const pkg = this.pkgName();
+		for (const file of dirty) {
+			const content = weslSrc[fileToModulePath(file, pkg, false)];
+			if (content === void 0) continue;
+			try {
+				const res = await fetch(saveEndpoint, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({
+						root,
+						file,
+						content
+					})
+				});
+				if (!res.ok) return this.devSaveFailed(`HTTP ${res.status}`);
+			} catch (err) {
+				return this.devSaveFailed(err instanceof Error ? err.message : String(err));
+			}
+		}
+	}
+	/** One-shot disable on first failure: avoids spamming the console on every keystroke. */
+	devSaveFailed(reason) {
+		this.disableDevSave();
+		console.error(`wgsl-edit: autosave disabled (${reason}). Make sure wgslEditAutosave() is installed in vite.config.ts.`);
+	}
+	/** First-time setup: read attributes, parse inline content, mount the EditorView. */
 	initEditor() {
 		this.readInitialAttributes();
 		this.parseInlineContent();
 		this._mediaQuery = matchMedia("(prefers-color-scheme: dark)");
 		this._mediaQuery.addEventListener("change", () => this.updateTheme());
 		const firstFile = this._files.keys().next().value;
-		const initialDoc = this._pendingSource ?? (firstFile ? this._files.get(firstFile).doc.toString() : "");
+		const firstDoc = firstFile && this._files.get(firstFile).doc.toString();
+		const initialDoc = this._pendingSource ?? firstDoc ?? "";
 		this._pendingSource = null;
 		if (firstFile) this._activeFile = firstFile;
 		else if (initialDoc) {
-			this._files.set("main.wesl", { doc: Text.of(initialDoc.split("\n")) });
+			this._files.set("main.wesl", { doc: toDoc(initialDoc) });
 			this._activeFile = "main.wesl";
 		}
-		const extensions = this.buildExtensions();
+		const state = this.createFileState(initialDoc);
+		const active = this._activeFile ? this._files.get(this._activeFile) : null;
+		if (active) {
+			active.state = state;
+			active.doc = state.doc;
+		}
 		this.editorView = new EditorView({
-			state: EditorState.create({
-				doc: initialDoc,
-				extensions
-			}),
+			state,
 			parent: this.editorContainer
 		});
 		this.renderTabs();
@@ -428,6 +553,7 @@ var WgslEdit = class extends HTMLElement {
 		const lintFromAttr = this.getAttribute("lint-from");
 		if (lintFromAttr) this.connectLintSource(lintFromAttr);
 	}
+	/** Assemble the full CodeMirror extension set for a fresh EditorState. */
 	buildExtensions() {
 		const baseTheme = EditorView.theme({
 			".cm-content": { padding: "0" },
@@ -472,6 +598,7 @@ var WgslEdit = class extends HTMLElement {
 					this._externalDiagnostics = [];
 					this.saveCurrentFileState();
 					this.dispatchChange();
+					if (!this._switchingFile) this.scheduleAutosave();
 				}
 			})
 		];
@@ -482,11 +609,11 @@ var WgslEdit = class extends HTMLElement {
 		return [EditorView.theme({}, { dark: isDark }), isDark ? darkColors : lightColors];
 	}
 	updateTheme() {
-		this.editorView?.dispatch({ effects: this.themeCompartment.reconfigure(this.resolveTheme()) });
+		this.reconfigure(this.themeCompartment, this.resolveTheme());
 	}
 	updateReadonly() {
 		const ext = EditorState.readOnly.of(this.readonly);
-		this.editorView?.dispatch({ effects: this.readonlyCompartment.reconfigure(ext) });
+		this.reconfigure(this.readonlyCompartment, ext);
 		this.renderTabs();
 	}
 	resolveLint() {
@@ -494,7 +621,7 @@ var WgslEdit = class extends HTMLElement {
 		const useGpuLint = this._gpuLint && !this._lintFromEl;
 		return createWeslLinter({
 			getSources: () => this.sources,
-			rootModule: () => fileToModulePath(this._activeFile, this._packageName ?? "package", false),
+			rootModule: () => this.activeModulePath(),
 			conditions: () => this._conditions,
 			packageName: () => this._packageName,
 			getExternalDiagnostics: () => this._externalDiagnostics,
@@ -507,11 +634,8 @@ var WgslEdit = class extends HTMLElement {
 	/** Link WESL->WGSL and validate via WebGPU, returning CodeMirror diagnostics. */
 	async gpuValidate() {
 		const { validateWgsl } = await import("./GpuValidator-BZSULsmE.js");
-		const params = this.linkParams();
-		const linked = await link(params);
-		const messages = await validateWgsl(linked.dest);
-		const pkg = params.packageName ?? "package";
-		return mapGpuDiagnostics(messages, linked, this._activeFile, pkg);
+		const linked = await link(this.linkParams());
+		return mapGpuDiagnostics(await validateWgsl(linked.dest), linked, this._activeFile, this.pkgName());
 	}
 	/** Fetch missing library packages, deduplicating in-flight requests. */
 	async fetchLibsOnDemand(names) {
@@ -538,14 +662,15 @@ var WgslEdit = class extends HTMLElement {
 		}
 	}
 	updateLint() {
-		this.editorView?.dispatch({ effects: this.lintCompartment.reconfigure(this.resolveLint()) });
+		this.reconfigure(this.lintCompartment, this.resolveLint());
 	}
 	/** Listen for compile-error/compile-success events from a lint source element. */
 	connectLintSource(id) {
 		const hadExternal = !!this._lintFromEl;
-		if (this._lintFromEl) {
-			this._lintFromEl.removeEventListener("compile-error", this._boundCompileError);
-			this._lintFromEl.removeEventListener("compile-success", this._boundCompileSuccess);
+		const prev = this._lintFromEl;
+		if (prev) {
+			prev.removeEventListener("compile-error", this._boundCompileError);
+			prev.removeEventListener("compile-success", this._boundCompileSuccess);
 			this._lintFromEl = null;
 		}
 		this._externalDiagnostics = [];
@@ -557,23 +682,24 @@ var WgslEdit = class extends HTMLElement {
 		}
 		if (hadExternal !== !!this._lintFromEl) this.updateLint();
 	}
+	/** Convert external compile-error locations into CodeMirror diagnostics for the active file. */
 	onCompileError(e) {
 		const detail = e.detail;
 		if (!this.editorView || detail.source === "wesl") return;
 		const doc = this.editorView.state.doc;
-		const pkg = this._packageName ?? "package";
-		const activeModule = fileToModulePath(this._activeFile, pkg, false);
-		this._externalDiagnostics = detail.locations.filter((loc) => {
-			if (!loc.file) return true;
-			return fileToModulePath(loc.file, pkg, false) === activeModule;
-		}).map((loc) => {
+		const pkg = this.pkgName();
+		const activeModule = this.activeModulePath();
+		const inActiveFile = (loc) => !loc.file || fileToModulePath(loc.file, pkg, false) === activeModule;
+		this._externalDiagnostics = detail.locations.filter(inActiveFile).map((loc) => {
 			const line = doc.line(Math.max(1, Math.min(loc.line, doc.lines)));
 			const from = Math.min(line.from + (loc.column ?? 0), doc.length);
+			const to = Math.min(from + (loc.length ?? 1), doc.length);
+			const { severity, message } = loc;
 			return {
 				from,
-				to: Math.min(from + (loc.length ?? 1), doc.length),
-				severity: loc.severity,
-				message: loc.message,
+				to,
+				severity,
+				message,
 				source: "WebGPU"
 			};
 		});
@@ -588,21 +714,20 @@ var WgslEdit = class extends HTMLElement {
 		return this._lineNumbers ? [] : EditorView.theme({ ".cm-gutters": { display: "none" } });
 	}
 	updateLineNumbers() {
-		const ext = this.resolveLineNumbers();
-		this.editorView?.dispatch({ effects: this.lineNumbersCompartment.reconfigure(ext) });
+		this.reconfigure(this.lineNumbersCompartment, this.resolveLineNumbers());
 	}
 	/** Parse script tags into _files. Supports single or multi-file via data-name. */
 	parseInlineContent() {
 		const scripts = Array.from(this.querySelectorAll("script[type=\"text/wgsl\"], script[type=\"text/wesl\"]"));
 		if (scripts.length === 0) {
 			const content = this.textContent?.trim() ?? "";
-			if (content) this._files.set("main.wesl", { doc: Text.of(content.split("\n")) });
+			if (content) this._files.set("main.wesl", { doc: toDoc(content) });
 			return;
 		}
 		for (const script of scripts) {
 			const name = script.getAttribute("data-name") || "main.wesl";
 			const content = script.textContent?.trim() ?? "";
-			this._files.set(name, { doc: Text.of(content.split("\n")) });
+			this._files.set(name, { doc: toDoc(content) });
 		}
 	}
 	renderTabs() {
@@ -647,28 +772,27 @@ var WgslEdit = class extends HTMLElement {
 		});
 		return btn;
 	}
+	/** Replace the tab name span with an editable input; commit on Enter/blur, cancel on Escape. */
 	startRenameTab(tab, nameSpan, oldName) {
 		const input = document.createElement("input");
 		input.className = "tab-rename";
 		input.value = oldName;
 		input.size = Math.max(oldName.length, 8);
+		const cancelRename = () => {
+			nameSpan.style.display = "";
+			input.remove();
+		};
 		const finishRename = () => {
 			const newName = input.value.trim() || oldName;
 			if (newName !== oldName && !this._files.has(newName)) this.renameFile(oldName, newName);
-			else {
-				nameSpan.style.display = "";
-				input.remove();
-			}
+			else cancelRename();
 		};
 		input.addEventListener("keydown", (e) => {
 			if (e.key === "Enter") {
 				e.preventDefault();
 				finishRename();
 			}
-			if (e.key === "Escape") {
-				nameSpan.style.display = "";
-				input.remove();
-			}
+			if (e.key === "Escape") cancelRename();
 		});
 		input.addEventListener("blur", finishRename);
 		input.addEventListener("input", () => {
@@ -696,6 +820,7 @@ var WgslEdit = class extends HTMLElement {
 		if (src) this.loadFromUrl(src);
 	}
 };
+/** Build a CodeMirror highlight style from a WESL color palette. */
 function weslColors(c) {
 	return syntaxHighlighting(HighlightStyle.define([
 		{
@@ -763,24 +888,7 @@ function weslColors(c) {
 		fontStyle: "normal"
 	} }));
 }
-/** Map GPU validation messages back to source positions via the source map. */
-function mapGpuDiagnostics(messages, linked, activeFile, pkg) {
-	const { sourceMap } = linked;
-	const active = fileToModulePath(activeFile, pkg, false);
-	return messages.flatMap((msg) => {
-		const srcPos = sourceMap.destToSrc(msg.offset);
-		if ((srcPos.src.path ? fileToModulePath(srcPos.src.path, pkg, false) : null) !== active) return [];
-		const endPos = sourceMap.destToSrc(msg.offset + msg.length);
-		const from = srcPos.position;
-		return {
-			from,
-			to: endPos.position > from ? endPos.position : from + 1,
-			severity: msg.severity,
-			message: msg.message,
-			source: "WebGPU"
-		};
-	});
-}
+/** Lazily build and cache the shared component stylesheet. */
 function getStyles() {
 	if (!cachedStyleSheet) {
 		cachedStyleSheet = new CSSStyleSheet();
@@ -788,7 +896,8 @@ function getStyles() {
 	}
 	return cachedStyleSheet;
 }
-/** Absorb instance properties set before custom element upgrade. */
+/** Absorb instance properties set before custom element upgrade.
+* Duplicated in WgslPlay.ts. Later, extract to a shared package. */
 function upgradeProperty(el, prop) {
 	if (Object.hasOwn(el, prop)) {
 		const value = el[prop];
@@ -796,10 +905,35 @@ function upgradeProperty(el, prop) {
 		el[prop] = value;
 	}
 }
+/** Build a CodeMirror Text doc from a string. */
+function toDoc(s) {
+	return Text.of(s.split("\n"));
+}
 /** Convert a module path or file path to a tab name: "package::main" -> "main", "main.wesl" -> "main.wesl" */
 function toTabName(key) {
 	if (key.includes("::")) return key.replace(/^[^:]+::/, "").replaceAll("::", "/");
 	return key.replace(/^\.\//, "");
 }
+/** Map GPU validation messages back to source positions via the source map. */
+function mapGpuDiagnostics(messages, linked, activeFile, pkg) {
+	const { sourceMap } = linked;
+	const active = fileToModulePath(activeFile, pkg, false);
+	return messages.flatMap((msg) => {
+		const srcPos = sourceMap.destToSrc(msg.offset);
+		const path = srcPos.src.path;
+		if ((path ? fileToModulePath(path, pkg, false) : null) !== active) return [];
+		const endPos = sourceMap.destToSrc(msg.offset + msg.length);
+		const from = srcPos.position;
+		const to = endPos.position > from ? endPos.position : from + 1;
+		const { severity, message } = msg;
+		return {
+			from,
+			to,
+			severity,
+			message,
+			source: "WebGPU"
+		};
+	});
+}
 //#endregion
 export { WgslEdit as t };