wgsl-edit 0.0.23 → 0.0.25

package/README.md

@@ -38,7 +38,7 @@ Multiple `<script>` tags create a multi-file editor with tabs.
 <wgsl-edit id="editor" theme="auto">
   <script type="text/wesl">/* shader code */</script>
 </wgsl-edit>
-<wgsl-play source="editor"></wgsl-play>
+<wgsl-play from="editor"></wgsl-play>
 ```
 
 The play component reads sources from the editor and live-previews the shader.
@@ -49,10 +49,6 @@ The play component reads sources from the editor and live-previews the shader.
 const editor = document.querySelector("wgsl-edit");
 
 editor.source = shaderCode;           // set active file content
-editor.sources = {                    // set all files
-  "package::main": mainCode,
-  "package::utils": utilsCode,
-};
 editor.addFile("helpers.wesl", code); // add a file
 editor.activeFile = "helpers.wesl";   // switch tabs
 
@@ -82,9 +78,8 @@ editor.project = {                    // load a full project
 ### Properties
 
 - `source: string` - Get/set active file content
-- `sources: Record<string, string>` - Get/set all files (keyed by module path)
 - `conditions: Record<string, boolean>` - Get/set conditions for conditional compilation (`@if`/`@elif`/`@else`)
-- `project: WeslProject` - Set full project (sources, conditions, packageName, etc.)
+- `project: WeslProject` - Get/set full project (weslSrc, conditions, constants, packageName, libs)
 - `activeFile: string` - Get/set active file name
 - `fileNames: string[]` - List all file names
 - `theme`, `tabs`, `lint`, `lineNumbers`, `readonly`, `shaderRoot`, `fetchLibs` - Mirror attributes
@@ -98,13 +93,13 @@ editor.project = {                    // load a full project
 
 ### Events
 
-- `change` - `{ source, sources, activeFile, conditions }` on edit or conditions change
+- `change` - `WeslProject` detail on edit or conditions change
 - `file-change` - `{ action, file }` on add/remove/rename
 
 ## Using with wesl-plugin
 
 For full project support (libraries, conditional compilation, constants),
-use [wesl-plugin](https://github.com/wgsl-tooling-wg/wesl-js/tree/main/tools/packages/wesl-plugin)
+use [wesl-plugin](https://github.com/wgsl-tooling-wg/wesl-js/tree/main/packages/wesl-plugin)
 to assemble shaders at build time and pass them to the editor via `project`.
 
 ```typescript

package/dist/GpuValidator-BZSULsmE.js

@@ -0,0 +1,48 @@
+//#region src/GpuValidator.ts
+/** Lazy-loaded GPU device singleton for shader validation. */
+let device = null;
+let initPromise = null;
+let warned = false;
+/** Get or initialize the shared GPU device, returning null if WebGPU is unavailable. */
+async function getDevice() {
+	if (device) return device;
+	if (initPromise) return initPromise;
+	if (typeof navigator === "undefined" || !navigator.gpu) {
+		if (!warned) console.warn("wgsl-edit: WebGPU unavailable, GPU lint disabled");
+		warned = true;
+		return null;
+	}
+	initPromise = (async () => {
+		try {
+			const adapter = await navigator.gpu.requestAdapter();
+			if (!adapter) {
+				console.warn("wgsl-edit: no GPU adapter, GPU lint disabled");
+				return null;
+			}
+			const dev = await adapter.requestDevice();
+			dev.lost.then(() => {
+				device = null;
+				initPromise = null;
+			});
+			device = dev;
+			return dev;
+		} catch (e) {
+			console.warn("wgsl-edit: GPU device request failed", e);
+			return null;
+		}
+	})();
+	return initPromise;
+}
+/** Validate WGSL code via WebGPU createShaderModule + getCompilationInfo. */
+async function validateWgsl(code) {
+	const dev = await getDevice();
+	if (!dev) return [];
+	return (await dev.createShaderModule({ code }).getCompilationInfo()).messages.filter((m) => m.type !== "info").map((m) => ({
+		offset: m.offset,
+		length: m.length,
+		message: m.message,
+		severity: m.type
+	}));
+}
+//#endregion
+export { validateWgsl };

package/dist/GpuValidator-D88-VTq9.js

@@ -0,0 +1,48 @@
+//#region src/GpuValidator.ts
+/** Lazy-loaded GPU device singleton for shader validation. */
+let device = null;
+let initPromise = null;
+let warned = false;
+/** Get or initialize the shared GPU device, returning null if WebGPU is unavailable. */
+async function getDevice() {
+	if (device) return device;
+	if (initPromise) return initPromise;
+	if (typeof navigator === "undefined" || !navigator.gpu) {
+		if (!warned) console.warn("wgsl-edit: WebGPU unavailable, GPU lint disabled");
+		warned = true;
+		return null;
+	}
+	initPromise = (async () => {
+		try {
+			const adapter = await navigator.gpu.requestAdapter();
+			if (!adapter) {
+				console.warn("wgsl-edit: no GPU adapter, GPU lint disabled");
+				return null;
+			}
+			const dev = await adapter.requestDevice();
+			dev.lost.then(() => {
+				device = null;
+				initPromise = null;
+			});
+			device = dev;
+			return dev;
+		} catch (e) {
+			console.warn("wgsl-edit: GPU device request failed", e);
+			return null;
+		}
+	})();
+	return initPromise;
+}
+/** Validate WGSL code via WebGPU createShaderModule + getCompilationInfo. */
+async function validateWgsl(code) {
+	const dev = await getDevice();
+	if (!dev) return [];
+	return (await dev.createShaderModule({ code }).getCompilationInfo()).messages.filter((m) => m.type !== "info").map((m) => ({
+		offset: m.offset,
+		length: m.length,
+		message: m.message,
+		severity: m.type
+	}));
+}
+//#endregion
+export { validateWgsl };

package/dist/Language.d.ts

@@ -21,10 +21,14 @@ interface WeslLintConfig {
   fetchLibs?: (packageNames: string[]) => Promise<WeslBundle[]>;
   /** Package names to ignore when checking unbound externals (e.g. virtual modules). */
   ignorePackages?: () => string[];
+  /** GPU validation of linked WGSL. Called after WESL lint passes with no errors. */
+  gpuValidate?: () => Promise<Diagnostic[]>;
 }
 declare const weslLanguage: LRLanguage;
 declare function wesl(): LanguageSupport;
 /** Create a linter that validates WESL using the canonical parser. */
 declare function createWeslLinter(config: WeslLintConfig): _codemirror_state0.Extension;
+/** Lint once, fetch missing externals if needed, re-lint with new libs. @internal */
+declare function lintAndFetch(config: WeslLintConfig): Promise<Diagnostic[]>;
 //#endregion
-export { WeslLintConfig, createWeslLinter, wesl, weslLanguage };
+export { WeslLintConfig, createWeslLinter, lintAndFetch, wesl, weslLanguage };

package/dist/Language.js

@@ -21,15 +21,33 @@ function wesl() {
 function createWeslLinter(config) {
 	return linter(async () => lintAndFetch(config), { delay: 300 });
 }
-/** Lint once, fetch missing externals if needed, re-lint with new libs. */
+/** Lint once, fetch missing externals if needed, re-lint with new libs. @internal */
 async function lintAndFetch(config) {
 	const libs = config.getLibs?.() ?? [];
 	const ignored = new Set(config.ignorePackages?.() ?? []);
-	const { diagnostics, externals } = lintPass(config, libs, ignored);
-	if (!config.fetchLibs || !externals.length) return diagnostics;
-	const newLibs = await config.fetchLibs(externals);
-	if (!newLibs.length) return diagnostics;
-	return lintPass(config, [...libs, ...newLibs], ignored).diagnostics;
+	let result = lintPass(config, libs, ignored);
+	let { diagnostics, externals, weslErrorCount } = result;
+	if (config.fetchLibs && externals.length) {
+		const newLibs = await config.fetchLibs(externals);
+		if (newLibs.length) {
+			result = lintPass(config, [...libs, ...newLibs], ignored);
+			({diagnostics, weslErrorCount} = result);
+		}
+	}
+	if (weslErrorCount === 0 && config.gpuValidate) try {
+		const gpuDiags = await config.gpuValidate();
+		diagnostics.push(...gpuDiags);
+	} catch (e) {
+		const msg = e instanceof Error ? e.message : "unknown error";
+		diagnostics.push({
+			from: 0,
+			to: 0,
+			severity: "warning",
+			message: `GPU validation skipped: ${msg}`,
+			source: "WebGPU"
+		});
+	}
+	return diagnostics;
 }
 /** Parse, bind, collect diagnostics and discover missing externals. */
 function lintPass(config, libs, ignored) {
@@ -37,82 +55,71 @@ function lintPass(config, libs, ignored) {
 	const rootModule = config.rootModule();
 	const diagnostics = [];
 	let externals = [];
+	let weslErrorCount = 0;
 	try {
 		const resolver = buildResolver(sources, libs, config.packageName?.());
 		const rootAst = resolver.resolveModule(rootModule);
 		if (rootAst) {
-			const result = runBind(config, resolver, rootAst);
-			diagnostics.push(...unboundDiagnostics(result, rootModule, ignored));
+			const result = bindIdents({
+				resolver,
+				rootAst,
+				conditions: config.conditions?.(),
+				accumulateUnbound: true
+			});
+			const unbound = unboundDiagnostics(result, rootModule, ignored);
+			diagnostics.push(...unbound);
+			weslErrorCount = unbound.length;
 			externals = findMissingPackages(rootAst, result, resolver, ignored, libs);
 		}
 	} catch (e) {
 		const diag = errorToDiagnostic(e);
-		if (diag) diagnostics.push(diag);
+		if (diag) {
+			diagnostics.push(diag);
+			weslErrorCount++;
+		}
 	}
 	diagnostics.push(...config.getExternalDiagnostics?.() ?? []);
 	return {
 		diagnostics,
-		externals
+		externals,
+		weslErrorCount
 	};
 }
-/** Build a resolver from sources and optional libs. */
 function buildResolver(sources, libs, packageName) {
 	const record = new RecordResolver(sources, { packageName });
 	if (libs.length === 0) return record;
 	return new CompositeResolver([record, ...libs.map((b) => new BundleResolver(b))]);
 }
-/** Parse and bind identifiers starting from a root module. */
-function runBind(config, resolver, rootAst) {
-	return bindIdents({
-		resolver,
-		rootAst,
-		conditions: config.conditions?.(),
-		accumulateUnbound: true
-	});
-}
 /** Convert unbound refs to diagnostics, skipping ignored packages. */
 function unboundDiagnostics(result, rootModule, ignored) {
-	const diagnostics = [];
-	for (const ref of result.unbound ?? []) {
-		if (ref.srcModule.modulePath !== rootModule) continue;
-		if (ref.path.length > 1 && ignored.has(ref.path[0])) continue;
-		diagnostics.push(unboundToDiagnostic(ref));
-	}
-	return diagnostics;
+	return (result.unbound ?? []).filter((ref) => ref.srcModule.modulePath === rootModule && !(ref.path.length > 1 && ignored.has(ref.path[0]))).map(unboundToDiagnostic);
 }
-/** Convert a WESL error to a CodeMirror diagnostic. */
 function errorToDiagnostic(e) {
-	if (e instanceof WeslParseError) {
-		const [from, to] = e.span;
-		return {
-			from,
-			to,
-			severity: "error",
-			message: e.cause?.message ?? e.message
-		};
-	}
+	if (!(e instanceof WeslParseError)) return void 0;
+	const [from, to] = e.span;
+	return {
+		from,
+		to,
+		severity: "error",
+		message: e.cause?.message ?? e.message
+	};
 }
 /** Find external package names not yet loaded, from unresolved imports and unbound refs. */
 function findMissingPackages(rootAst, result, resolver, ignored, libs) {
 	const loaded = new Set(libs.map((b) => b.name));
-	const pkgs = [];
-	for (const imp of rootAst.imports) {
+	const skip = (r) => !isExternalRoot(r) || ignored.has(r) || loaded.has(r);
+	const fromImports = rootAst.imports.filter((imp) => {
 		const root = imp.segments[0]?.name;
-		if (!root || !isExternalRoot(root) || ignored.has(root) || loaded.has(root)) continue;
+		if (!root || skip(root)) return false;
 		const modPath = imp.segments.map((s) => s.name).join("::");
-		if (!resolver.resolveModule(modPath)) pkgs.push(root);
-	}
-	for (const ref of result.unbound ?? []) {
-		const root = ref.path[0];
-		if (ref.path.length > 1 && isExternalRoot(root) && !ignored.has(root) && !loaded.has(root)) pkgs.push(root);
-	}
-	return [...new Set(pkgs)];
+		return !resolver.resolveModule(modPath);
+	}).map((imp) => imp.segments[0].name);
+	const fromUnbound = (result.unbound ?? []).filter((ref) => ref.path.length > 1 && !skip(ref.path[0])).map((ref) => ref.path[0]);
+	return [...new Set([...fromImports, ...fromUnbound])];
 }
-/** @return true if root is an external package name (not package/super). */
 function isExternalRoot(root) {
 	return root !== "package" && root !== "super";
 }
-/** Convert an unbound reference to a CodeMirror diagnostic. */
 function unboundToDiagnostic(ref) {
 	return {
 		from: ref.start,
@@ -122,4 +129,4 @@ function unboundToDiagnostic(ref) {
 	};
 }
 //#endregion
-export { createWeslLinter, wesl, weslLanguage };
+export { createWeslLinter, lintAndFetch, wesl, weslLanguage };

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

@@ -46,7 +46,8 @@ var WgslEdit = class extends HTMLElement {
 		"lint",
 		"lint-from",
 		"line-numbers",
-		"fetch-libs"
+		"fetch-libs",
+		"gpu-lint"
 	];
 	editorView = null;
 	editorContainer;
@@ -65,8 +66,10 @@ var WgslEdit = class extends HTMLElement {
 	_rootModuleName;
 	_tabs = true;
 	_lint = "on";
+	_gpuLint = true;
 	_fetchLibs = true;
 	_conditions = {};
+	_constants;
 	_packageName;
 	_libs = [];
 	_ignorePackages = ["constants", "env"];
@@ -123,6 +126,9 @@ var WgslEdit = class extends HTMLElement {
 		} else if (name === "fetch-libs") {
 			this._fetchLibs = value !== "false";
 			this.updateLint();
+		} else if (name === "gpu-lint") {
+			this._gpuLint = value !== "off";
+			this.updateLint();
 		}
 	}
 	/** Conditions for conditional compilation (@if/@elif/@else). */
@@ -177,10 +183,21 @@ var WgslEdit = class extends HTMLElement {
 		if (firstKey) this.switchToFile(toTabName(firstKey));
 		this.renderTabs();
 	}
-	/** Load a full project config (sources, conditions, packageName, etc.). */
+	get project() {
+		return {
+			weslSrc: this.sources,
+			rootModuleName: this._rootModuleName,
+			conditions: this._conditions,
+			constants: this._constants,
+			libs: this._libs,
+			packageName: this._packageName
+		};
+	}
 	set project(value) {
-		const { weslSrc, rootModuleName, conditions, packageName, libs } = value;
+		const { weslSrc, rootModuleName, conditions } = value;
+		const { constants, packageName, libs } = 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;
@@ -193,18 +210,22 @@ var WgslEdit = class extends HTMLElement {
 	}
 	/** Link/compile WESL sources into WGSL. Returns the compiled WGSL string. */
 	async link(options) {
-		const pkg = this._packageName ?? "package";
-		const rootModuleName = this._rootModuleName ?? fileToModulePath(this._activeFile, pkg, false);
 		return (await link({
+			...this.linkParams(),
+			...options
+		})).dest;
+	}
+	linkParams() {
+		const pkg = this._packageName ?? "package";
+		return {
 			weslSrc: this.sources,
-			rootModuleName,
+			rootModuleName: this._rootModuleName ?? fileToModulePath(this._activeFile, pkg, false),
 			conditions: this._conditions,
+			constants: this._constants,
 			libs: this._libs,
-			packageName: pkg,
-			...options
-		})).dest;
+			packageName: pkg
+		};
 	}
-	/** Library bundles for linking (set via project). */
 	get libs() {
 		return this._libs;
 	}
@@ -216,19 +237,15 @@ var WgslEdit = class extends HTMLElement {
 		this._rootModuleName = value;
 		this.dispatchChange();
 	}
-	/** Currently active file name (selected tab). */
 	get activeFile() {
 		return this._activeFile;
 	}
-	/** Switch to a file by name. */
 	set activeFile(name) {
 		this.switchToFile(name);
 	}
-	/** List of file names in order. */
 	get fileNames() {
 		return Array.from(this._files.keys());
 	}
-	/** Tab bar visibility. */
 	get tabs() {
 		return this._tabs;
 	}
@@ -253,6 +270,15 @@ var WgslEdit = class extends HTMLElement {
 		if (value) this.setAttribute("line-numbers", "true");
 		else this.removeAttribute("line-numbers");
 	}
+	/** GPU validation of linked WGSL (default: true). Set to false to disable. */
+	get gpuLint() {
+		return this._gpuLint;
+	}
+	set gpuLint(value) {
+		this._gpuLint = value;
+		if (!value) this.setAttribute("gpu-lint", "off");
+		else this.removeAttribute("gpu-lint");
+	}
 	/** Whether to auto-fetch missing library packages from npm (default: true). */
 	get fetchLibs() {
 		return this._fetchLibs;
@@ -262,7 +288,6 @@ var WgslEdit = class extends HTMLElement {
 		if (value) this.removeAttribute("fetch-libs");
 		else this.setAttribute("fetch-libs", "false");
 	}
-	/** Whether the editor is currently loading content. */
 	get loading() {
 		return this.snackbar.classList.contains("visible");
 	}
@@ -303,7 +328,6 @@ var WgslEdit = class extends HTMLElement {
 		if (value) this.setAttribute("shader-root", value);
 		else this.removeAttribute("shader-root");
 	}
-	/** Add a new file. */
 	addFile(name, content = "") {
 		if (this._files.has(name)) return;
 		this._files.set(name, { doc: Text.of(content.split("\n")) });
@@ -311,7 +335,6 @@ var WgslEdit = class extends HTMLElement {
 		this.renderTabs();
 		this.dispatchFileChange("add", name);
 	}
-	/** Remove a file. */
 	removeFile(name) {
 		if (!this._files.has(name) || this._files.size <= 1) return;
 		this._files.delete(name);
@@ -322,7 +345,6 @@ var WgslEdit = class extends HTMLElement {
 		this.renderTabs();
 		this.dispatchFileChange("remove", name);
 	}
-	/** Rename a file. */
 	renameFile(oldName, newName) {
 		const state = this._files.get(oldName);
 		if (!state || this._files.has(newName)) return;
@@ -353,32 +375,23 @@ var WgslEdit = class extends HTMLElement {
 		}
 		this.renderTabs();
 	}
-	/** Save current editor state to the active file. */
 	saveCurrentFileState() {
-		if (!this.editorView || !this._activeFile) return;
-		const state = this._files.get(this._activeFile);
-		if (state) {
-			state.doc = this.editorView.state.doc;
-			state.selection = this.editorView.state.selection;
-			state.scrollPos = this.editorView.scrollDOM.scrollTop;
-		}
+		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;
 	}
 	dispatchChange() {
-		const { source, sources, conditions, _rootModuleName: rootModuleName, libs } = this;
-		const detail = {
-			source,
-			sources,
-			rootModuleName,
-			conditions,
-			libs
-		};
-		this.dispatchEvent(new CustomEvent("change", { detail }));
+		this.dispatchEvent(new CustomEvent("change", { detail: this.project }));
 	}
 	dispatchFileChange(action, file) {
-		this.dispatchEvent(new CustomEvent("file-change", { detail: {
+		const detail = {
 			action,
 			file
-		} }));
+		};
+		this.dispatchEvent(new CustomEvent("file-change", { detail }));
 	}
 	initEditor() {
 		this.readInitialAttributes();
@@ -393,10 +406,11 @@ var WgslEdit = class extends HTMLElement {
 			this._files.set("main.wesl", { doc: Text.of(initialDoc.split("\n")) });
 			this._activeFile = "main.wesl";
 		}
+		const extensions = this.buildExtensions();
 		this.editorView = new EditorView({
 			state: EditorState.create({
 				doc: initialDoc,
-				extensions: this.buildExtensions()
+				extensions
 			}),
 			parent: this.editorContainer
 		});
@@ -471,11 +485,13 @@ var WgslEdit = class extends HTMLElement {
 		this.editorView?.dispatch({ effects: this.themeCompartment.reconfigure(this.resolveTheme()) });
 	}
 	updateReadonly() {
-		this.editorView?.dispatch({ effects: this.readonlyCompartment.reconfigure(EditorState.readOnly.of(this.readonly)) });
+		const ext = EditorState.readOnly.of(this.readonly);
+		this.editorView?.dispatch({ effects: this.readonlyCompartment.reconfigure(ext) });
 		this.renderTabs();
 	}
 	resolveLint() {
 		if (this._lint === "off") return [];
+		const useGpuLint = this._gpuLint && !this._lintFromEl;
 		return createWeslLinter({
 			getSources: () => this.sources,
 			rootModule: () => fileToModulePath(this._activeFile, this._packageName ?? "package", false),
@@ -484,12 +500,22 @@ var WgslEdit = class extends HTMLElement {
 			getExternalDiagnostics: () => this._externalDiagnostics,
 			getLibs: () => this._libs,
 			fetchLibs: this._fetchLibs ? (pkgs) => this.fetchLibsOnDemand(pkgs) : void 0,
-			ignorePackages: () => this._ignorePackages
+			ignorePackages: () => this._ignorePackages,
+			gpuValidate: useGpuLint ? () => this.gpuValidate() : void 0
 		});
 	}
+	/** 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);
+	}
 	/** Fetch missing library packages, deduplicating in-flight requests. */
-	async fetchLibsOnDemand(packageNames) {
-		const needed = packageNames.filter((n) => !this._fetchedPkgs.has(n) && !this._fetchingPkgs.has(n));
+	async fetchLibsOnDemand(names) {
+		const needed = names.filter((n) => !this._fetchedPkgs.has(n) && !this._fetchingPkgs.has(n));
 		if (needed.length === 0) return [];
 		for (const n of needed) this._fetchingPkgs.add(n);
 		this.showSnack(`Loading ${needed.join(", ")}…`);
@@ -516,18 +542,20 @@ var WgslEdit = class extends HTMLElement {
 	}
 	/** 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);
 			this._lintFromEl = null;
 		}
 		this._externalDiagnostics = [];
-		if (!id) return;
-		const el = document.getElementById(id);
-		if (!el) return;
-		this._lintFromEl = el;
-		el.addEventListener("compile-error", this._boundCompileError);
-		el.addEventListener("compile-success", this._boundCompileSuccess);
+		const el = id ? document.getElementById(id) : null;
+		if (el) {
+			this._lintFromEl = el;
+			el.addEventListener("compile-error", this._boundCompileError);
+			el.addEventListener("compile-success", this._boundCompileSuccess);
+		}
+		if (hadExternal !== !!this._lintFromEl) this.updateLint();
 	}
 	onCompileError(e) {
 		const detail = e.detail;
@@ -560,7 +588,8 @@ var WgslEdit = class extends HTMLElement {
 		return this._lineNumbers ? [] : EditorView.theme({ ".cm-gutters": { display: "none" } });
 	}
 	updateLineNumbers() {
-		this.editorView?.dispatch({ effects: this.lineNumbersCompartment.reconfigure(this.resolveLineNumbers()) });
+		const ext = this.resolveLineNumbers();
+		this.editorView?.dispatch({ effects: this.lineNumbersCompartment.reconfigure(ext) });
 	}
 	/** Parse script tags into _files. Supports single or multi-file via data-name. */
 	parseInlineContent() {
@@ -576,7 +605,6 @@ var WgslEdit = class extends HTMLElement {
 			this._files.set(name, { doc: Text.of(content.split("\n")) });
 		}
 	}
-	/** Render tab bar based on files and visibility mode. */
 	renderTabs() {
 		this.tabBar.style.display = this._tabs ? "flex" : "none";
 		if (!this._tabs) return;
@@ -584,7 +612,6 @@ var WgslEdit = class extends HTMLElement {
 		for (const name of this._files.keys()) this.tabBar.appendChild(this.createTab(name));
 		if (!this.readonly) this.tabBar.appendChild(this.createAddButton());
 	}
-	/** Create a tab button for a file. */
 	createTab(name) {
 		const tab = document.createElement("button");
 		tab.className = "tab" + (name === this._activeFile ? " active" : "");
@@ -608,7 +635,6 @@ var WgslEdit = class extends HTMLElement {
 		tab.addEventListener("click", () => this.switchToFile(name));
 		return tab;
 	}
-	/** Create the "+" button for adding new files. */
 	createAddButton() {
 		const btn = document.createElement("button");
 		btn.className = "tab-add";
@@ -621,7 +647,6 @@ var WgslEdit = class extends HTMLElement {
 		});
 		return btn;
 	}
-	/** Start inline rename of a tab. */
 	startRenameTab(tab, nameSpan, oldName) {
 		const input = document.createElement("input");
 		input.className = "tab-rename";
@@ -738,6 +763,24 @@ 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"
+		};
+	});
+}
 function getStyles() {
 	if (!cachedStyleSheet) {
 		cachedStyleSheet = new CSSStyleSheet();