wgsl-play 0.0.36 → 0.0.38

package/README.md

@@ -56,7 +56,7 @@ You can include shader code inline if you'd prefer. Use a `<script type="text/wg
 
 ```typescript
 const player = document.querySelector("wgsl-play");
-player.source = shaderCode;
+player.shader = shaderCode;
 player.pause();
 player.rewind();
 player.play();
@@ -68,7 +68,7 @@ player.play();
 import shader from './examples/noise.wesl?raw';
 
 const player = document.querySelector("wgsl-play");
-player.source = shader;
+player.shader = shader;
 ```
 
 The `?raw` suffix imports the file as a string. This keeps shaders alongside your source files with HMR support.
@@ -80,12 +80,14 @@ The `?raw` suffix imports the file as a string. This keeps shaders alongside you
 - `shader-root` - Root path for internal imports (default: `/shaders`)
 - `autoplay` - Start animating on load (default: `true`). Set `autoplay="false"` to start paused
 - `transparent` - Use premultiplied alpha for transparent backgrounds (default: opaque)
+- `from` - Element ID of a source provider (e.g., wgsl-edit) to connect to
 - `fetch-libs` - Auto-fetch missing libraries from npm (default: `true`). Set `fetch-libs="false"` to disable
+- `fetch-sources` - Auto-fetch local .wesl source files via HTTP (default: `true`). Set `fetch-sources="false"` to disable
 
 ### Properties
-- `source: string` - Get/set shader source
+- `shader: string` - Get/set shader source (single-file convenience)
 - `conditions: Record<string, boolean>` - Get/set conditions for conditional compilation (`@if`/`@elif`/`@else`)
-- `project: WeslProject` - Set full project config (weslSrc, libs, conditions, constants)
+- `project: WeslProject` - Get/set full project config (weslSrc, libs, conditions, constants)
 - `isPlaying: boolean` - Playback state (readonly)
 - `time: number` - Animation time in seconds (readonly)
 - `hasError: boolean` - Compilation error state (readonly)
@@ -147,7 +149,7 @@ import super::common::tint;
 
 ## Using with wesl-plugin
 
-For more control, use the [wesl-plugin](https://github.com/wgsl-tooling-wg/wesl-js/tree/main/tools/packages/wesl-plugin) to
+For more control, use the [wesl-plugin](https://github.com/wgsl-tooling-wg/wesl-js/tree/main/packages/wesl-plugin) to
 assemble shaders and libraries at build time and provide
 them wgsl-play in JavaScript or TypeScript.
 - provides full support for Hot Module Reloading during development

package/dist/WgslPlay-BuIuE3cB.js

@@ -0,0 +1,620 @@
+import { fetchDependencies, loadShaderFromUrl } from "wesl-fetch";
+import { WeslParseError, fileToModulePath, requestWeslDevice } from "wesl";
+import { linkAndCreatePipeline, renderFrame, updateRenderUniforms } from "wesl-gpu";
+//#region src/Config.ts
+const defaultConfig = { shaderRoot: "/shaders" };
+let globalConfig = { ...defaultConfig };
+/** Set global defaults for all wgsl-play instances. */
+function defaults(config) {
+	globalConfig = {
+		...globalConfig,
+		...config
+	};
+}
+/** Get resolved config, merging element overrides with global defaults. */
+function getConfig(overrides) {
+	return {
+		...globalConfig,
+		...overrides
+	};
+}
+/** Reset config to defaults (useful for testing). */
+function resetConfig() {
+	globalConfig = { ...defaultConfig };
+}
+//#endregion
+//#region src/ErrorOverlay.ts
+/** Manages an error overlay element within a shadow DOM. */
+var ErrorOverlay = class {
+	el;
+	_message = null;
+	constructor(container) {
+		this.el = document.createElement("div");
+		this.el.className = "error-overlay";
+		container.appendChild(this.el);
+	}
+	show(message) {
+		this._message = message;
+		this.el.textContent = message;
+		this.el.classList.add("visible");
+		console.error("[wgsl-play]", message);
+	}
+	hide() {
+		this._message = null;
+		this.el.classList.remove("visible");
+	}
+	get visible() {
+		return this.el.classList.contains("visible");
+	}
+	get message() {
+		return this._message;
+	}
+};
+//#endregion
+//#region src/icons/backToStart.svg?raw
+var backToStart_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><rect x=\"4\" y=\"4\" width=\"3\" height=\"16\" fill=\"currentColor\"/><polygon points=\"20,4 9,12 20,20\" fill=\"currentColor\"/></svg>\n";
+//#endregion
+//#region src/icons/expand.svg?raw
+var expand_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><path d=\"M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 4h-4v2h6v-6h-2v4z\" fill=\"currentColor\"/></svg>\n";
+//#endregion
+//#region src/icons/pause.svg?raw
+var pause_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><rect x=\"5\" y=\"4\" width=\"4\" height=\"16\" fill=\"currentColor\"/><rect x=\"15\" y=\"4\" width=\"4\" height=\"16\" fill=\"currentColor\"/></svg>\n";
+//#endregion
+//#region src/icons/play.svg?raw
+var play_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><polygon points=\"6,4 20,12 6,20\" fill=\"currentColor\"/></svg>\n";
+//#endregion
+//#region src/icons/shrink.svg?raw
+var shrink_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><path d=\"M9 3v6H3v-2h4V3h2zm6 0h2v4h4v2h-6V3zM3 15h6v6H7v-4H3v-2zm12 0h6v2h-4v4h-2v-6z\" fill=\"currentColor\"/></svg>\n";
+//#endregion
+//#region src/PlaybackControls.ts
+/** Playback controls overlay for wgsl-play. */
+var PlaybackControls = class {
+	container;
+	playPauseBtn;
+	fullscreenBtn;
+	playing = true;
+	constructor(shadow, onPlay, onPause, onRewind, onFullscreen) {
+		this.container = document.createElement("div");
+		this.container.className = "controls";
+		this.fullscreenBtn = document.createElement("button");
+		this.fullscreenBtn.innerHTML = expand_default;
+		this.fullscreenBtn.addEventListener("click", onFullscreen);
+		const rewindBtn = document.createElement("button");
+		rewindBtn.innerHTML = backToStart_default;
+		rewindBtn.addEventListener("click", onRewind);
+		this.playPauseBtn = document.createElement("button");
+		this.playPauseBtn.innerHTML = pause_default;
+		this.playPauseBtn.addEventListener("click", () => this.playing ? onPause() : onPlay());
+		this.container.append(this.fullscreenBtn, rewindBtn, this.playPauseBtn);
+		shadow.appendChild(this.container);
+	}
+	setPlaying(playing) {
+		this.playing = playing;
+		this.playPauseBtn.innerHTML = playing ? pause_default : play_default;
+	}
+	setFullscreen(isFullscreen) {
+		this.fullscreenBtn.innerHTML = isFullscreen ? shrink_default : expand_default;
+	}
+	show() {
+		this.container.style.display = "";
+	}
+	hide() {
+		this.container.style.display = "none";
+	}
+};
+//#endregion
+//#region src/Renderer.ts
+/** Initialize WebGPU for a canvas element. */
+async function initWebGPU(canvas, alphaMode = "opaque") {
+	const adapter = await navigator.gpu.requestAdapter();
+	if (!adapter) throw new Error("WebGPU adapter not available");
+	const device = await requestWeslDevice(adapter);
+	const context = canvas.getContext("webgpu");
+	if (!context) throw new Error("WebGPU context not available");
+	const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+	context.configure({
+		device,
+		format: presentationFormat,
+		alphaMode
+	});
+	const uniformBuffer = device.createBuffer({
+		size: 32,
+		usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+	});
+	const bindGroupLayout = device.createBindGroupLayout({ entries: [{
+		binding: 0,
+		visibility: GPUShaderStage.FRAGMENT,
+		buffer: {}
+	}] });
+	return {
+		device,
+		canvas,
+		context,
+		presentationFormat,
+		uniformBuffer,
+		pipelineLayout: device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }),
+		bindGroup: device.createBindGroup({
+			layout: bindGroupLayout,
+			entries: [{
+				binding: 0,
+				resource: { buffer: uniformBuffer }
+			}]
+		}),
+		frameCount: 0
+	};
+}
+/** Compile WESL fragment shader and create render pipeline. */
+async function createPipeline(state, fragmentSource, options) {
+	state.device.pushErrorScope("validation");
+	let gpuError;
+	let jsError;
+	try {
+		state.pipeline = await linkAndCreatePipeline({
+			device: state.device,
+			fragmentSource,
+			format: state.presentationFormat,
+			layout: state.pipelineLayout,
+			...options
+		});
+	} catch (e) {
+		jsError = e;
+	} finally {
+		gpuError = await state.device.popErrorScope();
+	}
+	if (jsError || gpuError) {
+		state.pipeline = void 0;
+		throw jsError ?? gpuError;
+	}
+}
+/** Start the render loop. Returns a stop function. */
+function startRenderLoop(state, playback) {
+	let animationId;
+	function render() {
+		if (!state.pipeline) {
+			animationId = requestAnimationFrame(render);
+			return;
+		}
+		const time = calculateTime(playback);
+		const resolution = [state.canvas.width, state.canvas.height];
+		updateRenderUniforms(state.uniformBuffer, state.device, resolution, time, [0, 0]);
+		renderFrame({
+			device: state.device,
+			pipeline: state.pipeline,
+			bindGroup: state.bindGroup,
+			targetView: state.context.getCurrentTexture().createView()
+		});
+		state.frameCount++;
+		animationId = requestAnimationFrame(render);
+	}
+	animationId = requestAnimationFrame(render);
+	return () => cancelAnimationFrame(animationId);
+}
+function calculateTime(playback) {
+	return ((playback.isPlaying ? performance.now() : playback.startTime + playback.pausedDuration) - playback.startTime) / 1e3;
+}
+//#endregion
+//#region src/WgslPlay.css?inline
+var WgslPlay_default = ":host {\n  --error-bg: rgba(220, 102, 18, 0.8);\n  --error-color: white;\n  --controls-bg: rgba(0, 0, 0, 0.4);\n  --controls-color: rgba(255, 255, 255, 0.8);\n  --controls-hover-color: white;\n  --controls-hover-bg: rgba(255, 255, 255, 0.15);\n\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\n:host(.dark) {\n  --error-bg: rgba(180, 60, 10, 0.85);\n  --controls-bg: rgba(0, 0, 0, 0.5);\n}\n\ncanvas {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.controls {\n  background: var(--controls-bg);\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  display: flex;\n  gap: 20px;\n  border-radius: 6px;\n  padding: 2px;\n  opacity: 0;\n  transition: opacity 0.2s;\n  z-index: 1;\n}\n\n:host(:hover) .controls {\n  opacity: 1;\n}\n\n.controls button {\n  border: none;\n  background: none;\n  color: var(--controls-color);\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.controls button:hover {\n  color: var(--controls-hover-color);\n  background: var(--controls-hover-bg);\n}\n\n.error-overlay {\n  position: absolute;\n  inset: 0;\n  background: var(--error-bg);\n  color: var(--error-color);\n  padding: 1rem;\n  font-family: monospace;\n  font-size: 0.875rem;\n  white-space: pre-wrap;\n  overflow: auto;\n  display: none;\n}\n\n.error-overlay.visible {\n  display: block;\n}\n";
+//#endregion
+//#region src/WgslPlay.ts
+let styles = null;
+let template = null;
+/** <wgsl-play> web component for rendering WESL/WGSL fragment shaders.  */
+var WgslPlay = class extends HTMLElement {
+	static observedAttributes = [
+		"src",
+		"shader-root",
+		"from",
+		"no-controls",
+		"theme",
+		"autoplay",
+		"transparent",
+		"fetch-libs",
+		"fetch-sources"
+	];
+	canvas;
+	errorOverlay;
+	controls;
+	resizeObserver;
+	stopRenderLoop;
+	renderState;
+	playback = {
+		isPlaying: true,
+		startTime: performance.now(),
+		pausedDuration: 0
+	};
+	_weslSrc = {};
+	_rootModuleName = "package::main";
+	_libs;
+	_linkOptions = {};
+	_fetchSources = true;
+	_initPromise;
+	_sourceEl = null;
+	_sourceListener = null;
+	_fetchLibs = true;
+	_dirty = false;
+	_building = false;
+	_theme = "auto";
+	_mediaQuery = null;
+	_onFullscreenChange = () => this.controls.setFullscreen(!!document.fullscreenElement);
+	/** Get config overrides from element attributes. */
+	getConfigOverrides() {
+		const shaderRoot = this.getAttribute("shader-root");
+		if (!shaderRoot) return void 0;
+		return { shaderRoot };
+	}
+	constructor() {
+		super();
+		const shadow = this.attachShadow({ mode: "open" });
+		shadow.adoptedStyleSheets = [getStyles()];
+		shadow.appendChild(getTemplate().content.cloneNode(true));
+		this.canvas = shadow.querySelector("canvas");
+		this.errorOverlay = new ErrorOverlay(shadow);
+		this.controls = new PlaybackControls(shadow, () => this.play(), () => this.pause(), () => this.rewind(), () => this.toggleFullscreen());
+		this.resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				if (width > 0 && height > 0) {
+					this.canvas.width = Math.floor(width * devicePixelRatio);
+					this.canvas.height = Math.floor(height * devicePixelRatio);
+				}
+			}
+		});
+	}
+	connectedCallback() {
+		this.resizeObserver.observe(this);
+		const themeAttr = this.getAttribute("theme");
+		if (themeAttr) this._theme = themeAttr;
+		this._mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+		this._mediaQuery.addEventListener("change", () => this.updateTheme());
+		this.updateTheme();
+		document.addEventListener("fullscreenchange", this._onFullscreenChange);
+		if (!this.autoplay) {
+			this.playback.isPlaying = false;
+			this.controls.setPlaying(false);
+		}
+		this.initialize();
+		upgradeProperty(this, "conditions");
+		upgradeProperty(this, "shader");
+		upgradeProperty(this, "project");
+	}
+	disconnectedCallback() {
+		this.resizeObserver.disconnect();
+		this.stopRenderLoop?.();
+		document.removeEventListener("fullscreenchange", this._onFullscreenChange);
+		if (this._sourceEl && this._sourceListener) this._sourceEl.removeEventListener("change", this._sourceListener);
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue) return;
+		if (name === "no-controls") {
+			newValue !== null ? this.controls.hide() : this.controls.show();
+			return;
+		}
+		if (name === "theme") {
+			this._theme = newValue || "auto";
+			this.updateTheme();
+			return;
+		}
+		if (name === "autoplay") {
+			newValue === "false" ? this.pause() : this.play();
+			return;
+		}
+		if (name === "fetch-libs") {
+			this._fetchLibs = newValue !== "false";
+			return;
+		}
+		if (name === "fetch-sources") {
+			this._fetchSources = newValue !== "false";
+			return;
+		}
+		if (name === "src" && newValue && this._initPromise) this.loadFromUrl(newValue);
+	}
+	/** Current shader source code (main module). */
+	get shader() {
+		return this._weslSrc[this._rootModuleName] ?? "";
+	}
+	/** Set shader source directly (single-file convenience). */
+	set shader(value) {
+		this._weslSrc = { [this._rootModuleName]: value };
+		this._libs = void 0;
+		this.requestBuild();
+	}
+	/** Conditions for conditional compilation (@if/@elif/@else). */
+	get conditions() {
+		return this._linkOptions.conditions ?? {};
+	}
+	set conditions(value) {
+		this._linkOptions = {
+			...this._linkOptions,
+			conditions: value
+		};
+		if (Object.keys(this._weslSrc).length === 0) return;
+		this.requestBuild();
+	}
+	/** Set project configuration (mirrors wesl link() API). */
+	set project(value) {
+		const { weslSrc, rootModuleName, libs, packageName, conditions, constants } = value;
+		if (packageName !== void 0) this._linkOptions.packageName = packageName;
+		if (conditions !== void 0) this._linkOptions.conditions = conditions;
+		if (constants !== void 0) this._linkOptions.constants = constants;
+		if (libs) this._libs = libs;
+		if (weslSrc) {
+			const pkg = this._linkOptions.packageName || "package";
+			const root = rootModuleName ?? "main";
+			this._weslSrc = toModulePaths(weslSrc, pkg);
+			this._rootModuleName = fileToModulePath(root, pkg, false);
+			this.requestBuild();
+			return;
+		}
+		if (Object.keys(this._weslSrc).length === 0) return;
+		this.requestBuild();
+	}
+	/** Whether to auto-fetch missing library packages from npm (default: true). */
+	get fetchLibs() {
+		return this._fetchLibs;
+	}
+	set fetchLibs(value) {
+		this._fetchLibs = value;
+		if (value) this.removeAttribute("fetch-libs");
+		else this.setAttribute("fetch-libs", "false");
+	}
+	/** Whether to fetch local .wesl source files via HTTP (default: true). */
+	get fetchSources() {
+		return this._fetchSources;
+	}
+	set fetchSources(value) {
+		this._fetchSources = value;
+		if (value) this.removeAttribute("fetch-sources");
+		else this.setAttribute("fetch-sources", "false");
+	}
+	/** Whether autoplay is enabled (default: true). Set autoplay="false" to start paused. */
+	get autoplay() {
+		return this.getAttribute("autoplay") !== "false";
+	}
+	set autoplay(value) {
+		if (value !== false && value !== "false") this.removeAttribute("autoplay");
+		else this.setAttribute("autoplay", "false");
+	}
+	/** Whether the shader is currently playing. */
+	get isPlaying() {
+		return this.playback.isPlaying;
+	}
+	/** Current animation time in seconds. */
+	get time() {
+		const { isPlaying, startTime, pausedDuration } = this.playback;
+		return ((isPlaying ? performance.now() : startTime + pausedDuration) - startTime) / 1e3;
+	}
+	/** Number of frames rendered (for testing/debugging). */
+	get frameCount() {
+		return this.renderState?.frameCount ?? 0;
+	}
+	/** Whether there's a compilation error. */
+	get hasError() {
+		return this.errorOverlay.visible;
+	}
+	/** Current error message, or null if no error. */
+	get errorMessage() {
+		return this.errorOverlay.message;
+	}
+	/** Start playback. */
+	play() {
+		const { isPlaying, pausedDuration } = this.playback;
+		if (isPlaying) return;
+		this.playback.startTime = performance.now() - pausedDuration;
+		this.setPlaying(true);
+	}
+	/** Pause playback. */
+	pause() {
+		if (!this.playback.isPlaying) return;
+		this.playback.pausedDuration = performance.now() - this.playback.startTime;
+		this.setPlaying(false);
+	}
+	setPlaying(playing) {
+		this.playback.isPlaying = playing;
+		this.controls.setPlaying(playing);
+		this.dispatchEvent(new CustomEvent("playback-change", { detail: { isPlaying: playing } }));
+	}
+	/** Reset animation to time 0 and pause. */
+	rewind() {
+		this.playback.startTime = performance.now();
+		this.playback.pausedDuration = 0;
+		this.setPlaying(false);
+	}
+	/** Display error message in overlay. Pass empty string to clear. */
+	showError(message) {
+		if (!message) {
+			this.errorOverlay.hide();
+			return;
+		}
+		this.errorOverlay.show(message);
+		this.pause();
+	}
+	/** Toggle fullscreen on this element. */
+	toggleFullscreen() {
+		if (document.fullscreenElement) document.exitFullscreen();
+		else this.requestFullscreen();
+	}
+	updateTheme() {
+		const isDark = this._theme === "dark" || this._theme === "auto" && matchMedia("(prefers-color-scheme: dark)").matches;
+		this.classList.toggle("dark", isDark);
+	}
+	/** Set up WebGPU and load initial shader. Returns true if successful. */
+	initialize() {
+		if (this.renderState) return Promise.resolve(true);
+		if (!this._initPromise) this._initPromise = this.doInitialize();
+		return this._initPromise;
+	}
+	async doInitialize() {
+		try {
+			const alphaMode = this.hasAttribute("transparent") ? "premultiplied" : "opaque";
+			this.renderState = await initWebGPU(this.canvas, alphaMode);
+			this.loadInitialContent();
+			this.stopRenderLoop = startRenderLoop(this.renderState, this.playback);
+			this.dispatchEvent(new CustomEvent("ready"));
+			return true;
+		} catch (error) {
+			const message = !navigator.gpu ? "WebGPU is not supported in this browser.\nTry Chrome 113+, Edge 113+, or Safari 18+." : `WebGPU initialization failed: ${error}`;
+			this.errorOverlay.show(message);
+			this.pause();
+			this.dispatchEvent(new CustomEvent("init-error", { detail: { message } }));
+			return false;
+		}
+	}
+	/** Load from source element, src URL, script child, or inline textContent. */
+	loadInitialContent() {
+		const fromId = this.getAttribute("from");
+		if (fromId) {
+			this.connectFrom(fromId);
+			return;
+		}
+		const src = this.getAttribute("src");
+		if (src) {
+			this.loadFromUrl(src);
+			return;
+		}
+		const inlineSource = this.querySelector("script[type=\"text/wgsl\"], script[type=\"text/wesl\"]")?.textContent?.trim() ?? this.textContent?.trim();
+		if (!inlineSource) return;
+		this._weslSrc = { [this._rootModuleName]: inlineSource };
+		this.requestBuild();
+	}
+	/** Connect to a source provider element (e.g., wgsl-edit). */
+	connectFrom(id) {
+		const el = document.getElementById(id);
+		if (!el) {
+			console.error(`wgsl-play: source element "${id}" not found`);
+			return;
+		}
+		this._sourceEl = el;
+		const p = el.project;
+		if (p) this.project = p;
+		this._sourceListener = (e) => {
+			const detail = e.detail;
+			if (detail) this.project = detail;
+		};
+		el.addEventListener("change", this._sourceListener);
+	}
+	/** Fetch shader from URL, then trigger a build. */
+	async loadFromUrl(url) {
+		try {
+			const { weslSrc, libs, rootModuleName } = await loadShaderFromUrl(url, this.getConfigOverrides()?.shaderRoot);
+			this._weslSrc = weslSrc;
+			this._libs = libs;
+			if (rootModuleName) this._rootModuleName = rootModuleName;
+			this.requestBuild();
+		} catch (error) {
+			this.handleCompileError(error);
+		}
+	}
+	/** Mark build as needed. Coalesces rapid requests into a single build. */
+	requestBuild() {
+		this._dirty = true;
+		if (!this._building) this.runBuild();
+	}
+	/** Run builds until no longer dirty. Only one instance runs at a time. */
+	async runBuild() {
+		this._building = true;
+		while (this._dirty) {
+			this._dirty = false;
+			if (!await this.initialize()) break;
+			const mainSource = this._weslSrc[this._rootModuleName];
+			if (!mainSource) {
+				console.warn(`wgsl-play: root module "${this._rootModuleName}" not found in sources:`, Object.keys(this._weslSrc));
+				continue;
+			}
+			try {
+				this.errorOverlay.hide();
+				if (this._fetchSources || this._fetchLibs) {
+					const { weslSrc, libs } = await fetchDependencies(mainSource, {
+						shaderRoot: this.getConfigOverrides()?.shaderRoot,
+						existingSources: this._weslSrc,
+						fetchLibs: this._fetchLibs,
+						fetchSources: this._fetchSources
+					});
+					this._weslSrc = {
+						...this._weslSrc,
+						...weslSrc
+					};
+					this._libs = dedupLibs(this._libs, libs);
+				}
+				await createPipeline(this.renderState, mainSource, {
+					...this._linkOptions,
+					weslSrc: this._weslSrc,
+					libs: this._libs,
+					rootModuleName: this._rootModuleName
+				});
+				if (!this._dirty) this.dispatchEvent(new CustomEvent("compile-success"));
+			} catch (error) {
+				if (!this._dirty) this.handleCompileError(error);
+			}
+		}
+		this._building = false;
+	}
+	handleCompileError(error) {
+		const message = error?.message ?? String(error);
+		this.errorOverlay.show(message);
+		const detail = {
+			message,
+			source: error instanceof WeslParseError ? "wesl" : "webgpu",
+			locations: this.extractLocations(error)
+		};
+		this.dispatchEvent(new CustomEvent("compile-error", { detail }));
+	}
+	/** Extract source locations from a WESL parse error or GPU compilation error. */
+	extractLocations(error) {
+		const loc = error?.weslLocation;
+		if (loc) return [{
+			file: loc.file,
+			line: loc.line,
+			column: loc.column - 1,
+			length: loc.length,
+			severity: "error",
+			message: error?.message ?? ""
+		}];
+		const msgs = error?.compilationInfo?.messages;
+		if (msgs) return msgs.map((m) => ({
+			file: m.module?.url,
+			line: m.lineNum,
+			column: m.linePos - 1,
+			length: m.length,
+			severity: m.type === "warning" ? "warning" : m.type === "info" ? "info" : "error",
+			message: m.message
+		}));
+		return [];
+	}
+};
+function getTemplate() {
+	if (!template) {
+		template = document.createElement("template");
+		template.innerHTML = `<canvas part="canvas"></canvas>`;
+	}
+	return template;
+}
+function getStyles() {
+	if (!styles) {
+		styles = new CSSStyleSheet();
+		styles.replaceSync(WgslPlay_default);
+	}
+	return styles;
+}
+/** Absorb instance properties set before custom element upgrade. */
+function upgradeProperty(el, prop) {
+	if (Object.hasOwn(el, prop)) {
+		const value = el[prop];
+		delete el[prop];
+		el[prop] = value;
+	}
+}
+/** Merge new libs, deduplicating by bundle name. */
+function dedupLibs(existing, newLibs) {
+	if (!existing || newLibs.length === 0) return [...existing ?? [], ...newLibs];
+	const names = new Set(newLibs.map((b) => b.name));
+	return [...existing.filter((b) => !names.has(b.name)), ...newLibs];
+}
+/** Normalize all keys in a weslSrc record to module paths. */
+function toModulePaths(weslSrc, pkg) {
+	const result = {};
+	for (const [key, value] of Object.entries(weslSrc)) result[fileToModulePath(key, pkg, false)] = value;
+	return result;
+}
+//#endregion
+export { resetConfig as i, defaults as n, getConfig as r, WgslPlay as t };