wgsl-play 0.0.39 → 0.0.40

package/dist/WgslPlay-zK9mE5rV.js

@@ -0,0 +1,1544 @@
+import { fetchDependencies, loadShaderFromUrl } from "wesl-fetch";
+import { WeslParseError, fileToModulePath, parseSrcModule, requestWeslDevice } from "wesl";
+import { ResourceLoadError, ResourceLoadError as ResourceLoadError$1, clearBuffers, createPlayResources, createUniformBuffer, linkAndCreatePipeline, linkComputeShader, renderFrame, runCompute, scanUniforms, withErrorScopes, writeUniforms } from "wesl-gpu";
+import { TypeShapeError, annotatedResourcesPlugin, classifyEntryPoints, findAnnotatedResources, varReflection } from "wesl-reflect";
+//#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/CanvasSize.ts
+/** Device-pixel size of an observed element.
+*  Prefers `devicePixelContentBoxSize` (Chromium/Firefox) — integer, pixel-exact.
+*  Falls back to `contentBoxSize × ratio` on Safari and when a `pixel-ratio`
+*  override is set (the override is CSS-pixel-based by intent). */
+function entrySize(entry, pixelRatioOverride) {
+	if (pixelRatioOverride === null) {
+		const dp = entry.devicePixelContentBoxSize?.[0];
+		if (dp) return [dp.inlineSize, dp.blockSize];
+	}
+	const ratio = pixelRatioOverride !== null ? Number(pixelRatioOverride) : devicePixelRatio;
+	const css = entry.contentBoxSize?.[0];
+	if (css) return [css.inlineSize * ratio, css.blockSize * ratio];
+	const { width, height } = entry.contentRect;
+	return [width * ratio, height * ratio];
+}
+/** Floor and clamp to `[1, max]` so the canvas never exceeds the GPU's 2D limit.
+*  Pass `max = undefined` to skip the upper clamp (e.g. before the GPU device
+*  is available; device init will surface limit errors itself). */
+function clampCanvas(size, max) {
+	const floored = Math.max(1, Math.floor(size));
+	return max !== void 0 ? Math.min(floored, max) : floored;
+}
+//#endregion
+//#region src/RenderResources.ts
+/** Default allocation size (bytes) for runtime-sized `@buffer` arrays. The
+*  WGSL gives no element count, so the playground picks one. 1024 bytes covers
+*  256 f32s or 64 vec4f, enough for casual playground use. */
+const defaultRuntimeArrayBytes = 1024;
+/** Allocate user-declared resources, rebuild the uniform buffer to match the
+*  shader's uniform layout, and assemble the pipeline layout + bind group. */
+async function prepareResources(p) {
+	const { state, resources, resolveTexture } = p;
+	const { device } = state;
+	const scan = scanUniforms(p.shaderSource, `${p.pkg}::${p.root}`);
+	const playResources = await createPlayResources({
+		device,
+		resources,
+		startBinding: 1,
+		resolveTexture,
+		minBufferBytes: defaultRuntimeArrayBytes
+	});
+	state.uniformState.buffer.destroy();
+	state.uniformState = createUniformBuffer(device, scan.layout);
+	const bindGroupLayout = buildBindGroupLayout(device, playResources);
+	return {
+		playResources,
+		pipelineLayout: device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }),
+		bindGroup: buildBindGroup(device, bindGroupLayout, state.uniformState, playResources),
+		layout: scan.layout
+	};
+}
+/** Destroy all textures and buffers owned by a PlayResources bundle. */
+function destroyPlayResources(r) {
+	for (const t of r.textures) t.destroy();
+	for (const b of r.buffers) b.destroy();
+}
+/** Dispose GPU resources owned by the current compile (textures + storage buffers). */
+function disposeResources(state) {
+	for (const t of state.resourceTextures) t.destroy();
+	for (const b of state.resourceBuffers) b.destroy();
+	state.resourceTextures = [];
+	state.resourceBuffers = [];
+}
+/** Add the @buffer/@texture/@sampler plugin to the user-supplied config. */
+function mergeResourcePlugins(userConfig, resources) {
+	if (resources.length === 0) return userConfig;
+	const plugins = [...userConfig?.plugins ?? [], annotatedResourcesPlugin(resources, 1)];
+	return {
+		...userConfig,
+		plugins
+	};
+}
+function buildBindGroupLayout(device, resources) {
+	const visibility = GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT;
+	return device.createBindGroupLayout({ entries: [{
+		binding: 0,
+		visibility,
+		buffer: {}
+	}, ...resources.layoutEntries] });
+}
+function buildBindGroup(device, layout, uniformState, resources) {
+	return device.createBindGroup({
+		layout,
+		entries: [{
+			binding: 0,
+			resource: { buffer: uniformState.buffer }
+		}, ...resources.entries]
+	});
+}
+//#endregion
+//#region src/ComputeBuild.ts
+/** Build the compute pipeline, dispatch once, and return initial readback. */
+async function buildCompute(p) {
+	const { state, resources, playResources, ast, shaderSource } = p;
+	const { device } = state;
+	const compute = await linkComputeFor({
+		device,
+		shaderSource,
+		resources,
+		options: p.options
+	}).catch((err) => {
+		destroyPlayResources(playResources);
+		throw err;
+	});
+	const readBuffers = mapBuffersByName(resources, playResources);
+	const reflections = mapBufferReflections(ast, resources);
+	disposeResources(state);
+	state.pipeline = void 0;
+	state.bindGroup = p.bindGroup;
+	state.resourceTextures = playResources.textures;
+	state.resourceBuffers = playResources.buffers;
+	state.compute = {
+		pipelineLayout: p.pipelineLayout,
+		bindGroup: p.bindGroup,
+		module: compute.module,
+		entryPoint: p.entryPoint,
+		readBuffers,
+		reflections
+	};
+	const computeReadback = await dispatchComputeAndReadback(state);
+	return {
+		layout: p.layout,
+		mode: "compute",
+		computeReadback
+	};
+}
+/** Re-dispatch the compute pipeline against the current uniform state and
+*  return fresh BufferEntry[] for the panel. */
+async function rerunCompute(state) {
+	return dispatchComputeAndReadback(state);
+}
+/** Re-zero each readback buffer, dispatch, and read back. Used for both initial
+*  build and slider/refresh-driven re-runs in compute mode. */
+async function dispatchComputeAndReadback(state) {
+	const compute = state.compute;
+	if (!compute) return [];
+	writeUniforms(state.device, state.uniformState, computeAutoValues(state));
+	clearBuffers(state.device, compute.readBuffers.values());
+	const { readbacks } = await runCompute({
+		device: state.device,
+		module: compute.module,
+		entryPoint: compute.entryPoint,
+		bindGroup: compute.bindGroup,
+		pipelineLayout: compute.pipelineLayout,
+		readBuffers: compute.readBuffers
+	});
+	return [...readbacks].map(([varName, data]) => ({
+		reflection: compute.reflections.get(varName),
+		data
+	}));
+}
+async function linkComputeFor(p) {
+	const config = mergeResourcePlugins(p.options?.config, p.resources);
+	return withErrorScopes(p.device, () => linkComputeShader({
+		device: p.device,
+		computeSource: p.shaderSource,
+		...p.options,
+		config
+	}));
+}
+/** Map @buffer var name to its allocated GPU buffer (positional alignment). */
+function mapBuffersByName(resources, playResources) {
+	const bufferVars = resources.filter((r) => r.kind === "buffer");
+	return new Map(bufferVars.map((r, i) => [r.varName, playResources.buffers[i]]));
+}
+/** Map @buffer var name to its VarReflection (type tree, address space, etc.). */
+function mapBufferReflections(ast, resources) {
+	return new Map(resources.filter((r) => r.kind === "buffer").map((r) => [r.varName, varReflection(ast, r.varName)]));
+}
+function computeAutoValues(state) {
+	return {
+		resolution: [state.canvas.width, state.canvas.height],
+		time: 0,
+		delta_time: 0,
+		frame: 0,
+		mouse_pos: [0, 0],
+		mouse_delta: [0, 0],
+		mouse_button: 0
+	};
+}
+//#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/FragmentRender.ts
+/** Build the render pipeline and install it on state. */
+async function buildFragment(p) {
+	const newPipeline = await buildRenderPipeline({
+		device: p.state.device,
+		fragmentSource: p.shaderSource,
+		presentationFormat: p.state.presentationFormat,
+		pipelineLayout: p.pipelineLayout,
+		resources: p.resources,
+		options: p.options
+	}).catch((err) => {
+		destroyPlayResources(p.playResources);
+		p.state.pipeline = void 0;
+		throw err;
+	});
+	disposeResources(p.state);
+	p.state.pipeline = newPipeline;
+	p.state.bindGroup = p.bindGroup;
+	p.state.compute = void 0;
+	p.state.resourceTextures = p.playResources.textures;
+	p.state.resourceBuffers = p.playResources.buffers;
+	return {
+		layout: p.layout,
+		mode: "fragment"
+	};
+}
+/** Render a single frame (used when paused). */
+function renderOnce(state, playback) {
+	if (!state.pipeline) return;
+	const time = calculateTime(playback);
+	const { mouse, canvas } = state;
+	submitFrame(state, {
+		resolution: [canvas.width, canvas.height],
+		time,
+		delta_time: 0,
+		frame: state.frameCount,
+		mouse_pos: mouse.pos,
+		mouse_delta: [0, 0],
+		mouse_button: mouse.button
+	});
+}
+/** Start the render loop. Returns a stop function. */
+function startRenderLoop(state, playback) {
+	let animationId;
+	let lastTime = 0;
+	function render() {
+		if (!state.pipeline) {
+			animationId = requestAnimationFrame(render);
+			return;
+		}
+		const time = calculateTime(playback);
+		const delta_time = time - lastTime;
+		lastTime = time;
+		const { mouse, canvas } = state;
+		const auto = {
+			resolution: [canvas.width, canvas.height],
+			time,
+			delta_time,
+			frame: state.frameCount,
+			mouse_pos: mouse.pos,
+			mouse_delta: mouse.delta,
+			mouse_button: mouse.button
+		};
+		mouse.delta = [0, 0];
+		submitFrame(state, auto);
+		animationId = requestAnimationFrame(render);
+	}
+	animationId = requestAnimationFrame(render);
+	return () => cancelAnimationFrame(animationId);
+}
+/** Seconds elapsed since playback start, frozen while paused. */
+function calculateTime(playback) {
+	return ((playback.isPlaying ? performance.now() : playback.startTime + playback.pausedDuration) - playback.startTime) / 1e3;
+}
+/** Link the shader and create the render pipeline, surfacing both JS and GPU
+*  validation errors as a thrown rejection. */
+async function buildRenderPipeline(p) {
+	const config = mergeResourcePlugins(p.options?.config, p.resources);
+	return withErrorScopes(p.device, () => linkAndCreatePipeline({
+		device: p.device,
+		fragmentSource: p.fragmentSource,
+		format: p.presentationFormat,
+		layout: p.pipelineLayout,
+		...p.options,
+		config
+	}));
+}
+/** Write uniforms, render to the current swap-chain texture, and tick frameCount. */
+function submitFrame(state, auto) {
+	const { device, context, bindGroup } = state;
+	writeUniforms(device, state.uniformState, auto);
+	const targetView = context.getCurrentTexture().createView();
+	renderFrame({
+		device,
+		pipeline: state.pipeline,
+		bindGroup,
+		targetView
+	});
+	state.frameCount++;
+}
+//#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/refresh.svg?raw
+var refresh_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.66 17.66A8 8 0 1 1 19.45 9M19.95 4v5h-5\"/></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.
+*
+*  In "render" mode (default): play/pause + rewind + fullscreen.
+*  In "compute" mode: refresh (re-dispatch) + fullscreen — play/pause and
+*  rewind are hidden because compute mode is not animation-driven. */
+var PlaybackControls = class {
+	container;
+	playPauseBtn;
+	rewindBtn;
+	refreshBtn;
+	fullscreenBtn;
+	playing = true;
+	constructor(shadow, onPlay, onPause, onRewind, onFullscreen, onRefresh) {
+		this.container = document.createElement("div");
+		this.container.className = "controls";
+		this.fullscreenBtn = makeBtn(expand_default, onFullscreen);
+		this.rewindBtn = makeBtn(backToStart_default, onRewind);
+		this.playPauseBtn = makeBtn(pause_default, () => this.playing ? onPause() : onPlay());
+		this.refreshBtn = makeBtn(refresh_default, onRefresh);
+		this.refreshBtn.hidden = true;
+		this.container.append(this.fullscreenBtn, this.rewindBtn, this.playPauseBtn, this.refreshBtn);
+		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;
+	}
+	setMode(mode) {
+		const isCompute = mode === "compute";
+		this.rewindBtn.hidden = isCompute;
+		this.playPauseBtn.hidden = isCompute;
+		this.refreshBtn.hidden = !isCompute;
+	}
+	show() {
+		this.container.style.display = "";
+	}
+	hide() {
+		this.container.style.display = "none";
+	}
+};
+function makeBtn(html, handler) {
+	const btn = document.createElement("button");
+	btn.innerHTML = html;
+	btn.addEventListener("click", handler);
+	return btn;
+}
+//#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 uniformState = createUniformBuffer(device, null);
+	return {
+		device,
+		canvas,
+		context,
+		presentationFormat,
+		uniformState,
+		bindGroup: createUniformBindGroup(device, uniformOnlyLayout(device), uniformState),
+		mouse: {
+			pos: [0, 0],
+			delta: [0, 0],
+			button: 0
+		},
+		pipeline: void 0,
+		frameCount: 0,
+		resourceTextures: [],
+		resourceBuffers: []
+	};
+}
+/** Compile a WESL shader and configure pipelines + bindings.
+*  Auto-detects fragment vs compute mode based on entry-point attributes. */
+async function createPipeline(state, shaderSource, resolveTexture, options) {
+	const pkg = options?.packageName ?? "package";
+	const root = options?.rootModuleName ?? "main";
+	const ast = parseSrcModule({
+		modulePath: `${pkg}::${root}`,
+		debugFilePath: `./${root}.wesl`,
+		src: shaderSource
+	});
+	const resources = findAnnotatedResources(ast);
+	const entryPoints = classifyEntryPoints(ast);
+	const mode = detectMode(entryPoints);
+	if (mode === "compute") rejectComputeUnsupported(resources);
+	const branch = {
+		state,
+		resources,
+		shaderSource,
+		options,
+		...await prepareResources({
+			state,
+			shaderSource,
+			pkg,
+			root,
+			resources,
+			resolveTexture
+		})
+	};
+	if (mode === "compute") return buildCompute({
+		...branch,
+		ast,
+		entryPoint: entryPoints[0].fnName
+	});
+	return buildFragment(branch);
+}
+function uniformOnlyLayout(device) {
+	const visibility = GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT;
+	return device.createBindGroupLayout({ entries: [{
+		binding: 0,
+		visibility,
+		buffer: {}
+	}] });
+}
+function createUniformBindGroup(device, layout, uniformState) {
+	return device.createBindGroup({
+		layout,
+		entries: [{
+			binding: 0,
+			resource: { buffer: uniformState.buffer }
+		}]
+	});
+}
+/** Pick fragment vs compute mode from entry points; throws on mixed/multi-compute. */
+function detectMode(entryPoints) {
+	const compute = entryPoints.filter((e) => e.stage === "compute");
+	const fragment = entryPoints.filter((e) => e.stage === "fragment");
+	if (compute.length > 0 && fragment.length > 0) throw new Error("mixed compute and fragment entry points are not supported (use either, not both)");
+	if (compute.length > 1) throw new Error(`compute mode requires exactly one @compute entry point; found ${compute.length}`);
+	return compute.length === 1 ? "compute" : "fragment";
+}
+/** @sampler/@texture in compute mode are not yet implemented; throw early. */
+function rejectComputeUnsupported(resources) {
+	for (const r of resources) {
+		if (r.kind === "texture" || r.kind === "test_texture") throw new Error("@texture in compute mode is not yet supported");
+		if (r.kind === "sampler") throw new Error("@sampler in compute mode is not yet supported");
+	}
+}
+//#endregion
+//#region src/ResultsPanel.ts
+const truncationLimit = 256;
+/** Render compute-mode @buffer readbacks as one HTML table per buffer. */
+function renderResultsPanel(p) {
+	p.panel.replaceChildren(...p.entries.map(renderTable));
+}
+/** Build the structured table data for a single @buffer entry. Pure (no DOM). */
+function tableData(entry) {
+	const { reflection, data } = entry;
+	const { row, rowCount, stride } = rowShape(reflection, data.byteLength);
+	const visibleRows = Math.min(rowCount, truncationLimit);
+	const view = new DataView(data);
+	const td = {
+		caption: `${reflection.varName}: ${shapeLabel(reflection.type)}`,
+		headers: row.kind === "struct" ? ["", ...row.fields.map((f) => f.name)] : ["", "value"],
+		rows: buildRows(view, row, visibleRows, stride)
+	};
+	if (rowCount > truncationLimit) td.truncated = { totalRows: rowCount };
+	return td;
+}
+function renderTable(entry) {
+	const td = tableData(entry);
+	const section = document.createElement("section");
+	section.className = "result";
+	section.appendChild(makeCaption(td.caption));
+	const table = document.createElement("table");
+	table.appendChild(makeHeader(td.headers));
+	table.appendChild(makeBody(td.rows));
+	if (td.truncated) table.appendChild(makeShowAllFooter(table, entry, td.truncated.totalRows));
+	section.appendChild(table);
+	return section;
+}
+/** Resolve the per-row shape and stride for tabular display. Runtime-sized
+*  arrays derive rowCount from the readback's byteLength. Throws
+*  TypeShapeError if the element type isn't supported as a table cell. */
+function rowShape(reflection, byteLength) {
+	const t = reflection.type;
+	if (t.kind === "array") {
+		assertRenderable(t.elem, reflection.varName);
+		const rowCount = t.length === "runtime" ? Math.floor(byteLength / t.stride) : t.length;
+		return {
+			row: t.elem,
+			rowCount,
+			stride: t.stride
+		};
+	}
+	assertRenderable(t, reflection.varName);
+	return {
+		row: t,
+		rowCount: 1,
+		stride: t.size
+	};
+}
+function shapeLabel(t) {
+	if (t.kind === "array") {
+		const len = t.length === "runtime" ? "" : `, ${t.length}`;
+		return `array<${typeLabel(t.elem)}${len}>`;
+	}
+	return typeLabel(t);
+}
+/** Materialize `count` row-cell arrays at successive `stride` offsets. */
+function buildRows(view, row, count, stride) {
+	return Array.from({ length: count }, (_, i) => rowCells(view, row, i, i * stride));
+}
+function makeCaption(text) {
+	const caption = document.createElement("div");
+	caption.className = "result-caption";
+	caption.textContent = text;
+	return caption;
+}
+function makeHeader(headers) {
+	const thead = document.createElement("thead");
+	const tr = document.createElement("tr");
+	for (const h of headers) {
+		const th = document.createElement("th");
+		th.textContent = h;
+		tr.appendChild(th);
+	}
+	thead.appendChild(tr);
+	return thead;
+}
+function makeBody(rows) {
+	const tbody = document.createElement("tbody");
+	for (const row of rows) {
+		const tr = document.createElement("tr");
+		for (const cell of row) {
+			const td = document.createElement("td");
+			td.textContent = cell;
+			tr.appendChild(td);
+		}
+		tbody.appendChild(tr);
+	}
+	return tbody;
+}
+function makeShowAllFooter(table, entry, totalRows) {
+	const tfoot = document.createElement("tfoot");
+	const tr = document.createElement("tr");
+	const td = document.createElement("td");
+	const { row, stride } = rowShape(entry.reflection, entry.data.byteLength);
+	td.colSpan = row.kind === "struct" ? row.fields.length + 1 : 2;
+	const button = document.createElement("button");
+	button.textContent = `Show all ${totalRows} rows`;
+	button.addEventListener("click", () => {
+		const allRows = buildRows(new DataView(entry.data), row, totalRows, stride);
+		table.replaceChild(makeBody(allRows), table.tBodies[0]);
+		tfoot.remove();
+	});
+	td.appendChild(document.createTextNode(`Showing first ${truncationLimit} of ${totalRows} rows. `));
+	td.appendChild(button);
+	tr.appendChild(td);
+	tfoot.appendChild(tr);
+	return tfoot;
+}
+/** WgslPlay's compute-results table only renders f32/i32/u32 scalars, vectors of those, or structs of those. */
+function assertRenderable(t, varName) {
+	if (t.kind === "scalar") {
+		if (t.type === "f16") throw notRenderable("f16", varName);
+		return;
+	}
+	if (t.kind === "vec") {
+		if (t.component === "f16") throw notRenderable("vec<f16>", varName);
+		return;
+	}
+	if (t.kind === "struct") {
+		for (const f of t.fields) assertRenderable(f.type, varName);
+		return;
+	}
+	if (t.kind === "mat") throw new TypeShapeError(`matrices are not supported in the compute results table; use vecN<f32> instead`, varName);
+	if (t.kind === "atomic") throw new TypeShapeError(`atomic types are not supported in the compute results table`, varName);
+	throw new TypeShapeError(`unsupported element type for table`, varName);
+}
+function typeLabel(t) {
+	if (t.kind === "scalar") return t.type;
+	if (t.kind === "vec") return `vec${t.n}<${t.component}>`;
+	if (t.kind === "mat") return `mat${t.cols}x${t.rows}<${t.component}>`;
+	if (t.kind === "atomic") return `atomic<${t.component}>`;
+	if (t.kind === "struct") return t.name;
+	const len = t.length === "runtime" ? "" : `, ${t.length}`;
+	return `array<${typeLabel(t.elem)}${len}>`;
+}
+function rowCells(view, row, rowIndex, baseOffset) {
+	if (row.kind === "struct") return [String(rowIndex), ...row.fields.map((f) => formatElem(view, f.type, baseOffset + f.offset))];
+	return [String(rowIndex), formatElem(view, row, baseOffset)];
+}
+function notRenderable(typeName, varName) {
+	return new TypeShapeError(`${typeName} is not supported in the compute results table`, varName);
+}
+function formatElem(view, elem, offset) {
+	if (elem.kind === "scalar") return formatScalar(view, elem.type, offset);
+	if (elem.kind === "vec") return `(${Array.from({ length: elem.n }, (_, i) => formatScalar(view, elem.component, offset + i * 4)).join(", ")})`;
+	return `<${elem.kind}>`;
+}
+function formatScalar(view, type, offset) {
+	if (type === "f32") return formatF32(view.getFloat32(offset, true));
+	if (type === "i32") return String(view.getInt32(offset, true));
+	if (type === "u32") return String(view.getUint32(offset, true));
+	if (type === "bool") return view.getUint32(offset, true) !== 0 ? "true" : "false";
+	return "<f16>";
+}
+function formatF32(v) {
+	if (!Number.isFinite(v)) return String(v);
+	if (Number.isInteger(v)) return v.toFixed(1);
+	return Number.parseFloat(v.toPrecision(4)).toString();
+}
+//#endregion
+//#region src/UniformControls.ts
+/** Uniform controls panel for wgsl-play. Collapsed by default, toggle on hover. */
+var UniformControls = class {
+	container;
+	toggleBtn;
+	panel;
+	panelInner;
+	expanded = false;
+	onChange;
+	constructor(shadow, onChange) {
+		this.onChange = onChange;
+		this.container = document.createElement("div");
+		this.container.className = "settings";
+		this.toggleBtn = document.createElement("button");
+		this.toggleBtn.className = "uniform-toggle";
+		this.toggleBtn.innerHTML = chevronSvg;
+		this.toggleBtn.addEventListener("click", () => this.toggle());
+		this.panel = document.createElement("div");
+		this.panel.className = "uniform-panel";
+		this.panelInner = document.createElement("div");
+		this.panelInner.className = "uniform-panel-inner";
+		this.panel.appendChild(this.panelInner);
+		this.container.append(this.toggleBtn, this.panel);
+		shadow.appendChild(this.container);
+	}
+	/** Update controls from a new set of UniformControl descriptors. */
+	setControls(controls) {
+		this.panelInner.innerHTML = "";
+		if (controls.length === 0) {
+			this.container.classList.add("empty");
+			return;
+		}
+		this.container.classList.remove("empty");
+		for (const c of controls) this.panelInner.appendChild(this.buildControl(c));
+	}
+	/** Show/hide the controls container. */
+	show() {
+		this.container.style.display = "";
+	}
+	hide() {
+		this.container.style.display = "none";
+	}
+	toggle() {
+		this.expanded = !this.expanded;
+		this.container.classList.toggle("expanded", this.expanded);
+	}
+	/** Create a DOM input element (range slider, color picker, or checkbox) for a uniform. */
+	buildControl(c) {
+		const row = document.createElement("div");
+		row.className = "uniform-row";
+		const label = document.createElement("label");
+		label.textContent = c.name;
+		if (c.kind === "range") {
+			const input = document.createElement("input");
+			input.type = "range";
+			input.min = String(c.min);
+			input.max = String(c.max);
+			input.value = String(c.initial);
+			if (c.step) input.step = String(c.step);
+			else input.step = c.type === "i32" ? "1" : "0.01";
+			const valueSpan = document.createElement("span");
+			valueSpan.className = "uniform-value";
+			valueSpan.textContent = String(c.initial);
+			input.addEventListener("input", () => {
+				const v = Number(input.value);
+				valueSpan.textContent = input.value;
+				this.onChange(c.name, v);
+			});
+			row.append(label, input, valueSpan);
+		} else if (c.kind === "color") {
+			const input = document.createElement("input");
+			input.type = "color";
+			input.value = rgbToHex(c.initial);
+			input.addEventListener("input", () => {
+				this.onChange(c.name, hexToRgb(input.value));
+			});
+			row.append(label, input);
+		} else if (c.kind === "toggle") {
+			const input = document.createElement("input");
+			input.type = "checkbox";
+			input.checked = c.initial === 1;
+			input.addEventListener("change", () => {
+				this.onChange(c.name, input.checked ? 1 : 0);
+			});
+			row.append(label, input);
+		}
+		return row;
+	}
+};
+const chevronSvg = `<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+  <path d="M4.7 5.3L8 8.6l3.3-3.3.7.7L8 10 4 6l.7-.7z"/>
+</svg>`;
+function rgbToHex([r, g, b]) {
+	const toHex = (v) => Math.round(Math.max(0, Math.min(1, v)) * 255).toString(16).padStart(2, "0");
+	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function hexToRgb(hex) {
+	const n = Number.parseInt(hex.slice(1), 16);
+	return [
+		(n >> 16) / 255,
+		(n >> 8 & 255) / 255,
+		(n & 255) / 255
+	];
+}
+//#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.55);\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.resize-handle {\n  display: none;\n  position: absolute;\n  width: 22px;\n  height: 22px;\n  z-index: 2;\n  touch-action: none;\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n:host([resizable]) .resize-handle {\n  display: block;\n}\n\n.resize-handle.br {\n  bottom: 0;\n  right: 0;\n  cursor: nwse-resize;\n}\n\n.resize-handle.bl {\n  bottom: 0;\n  left: 0;\n  cursor: nesw-resize;\n}\n\n.resize-handle:hover,\n.resize-handle.dragging {\n  opacity: 1;\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  bottom: 3px;\n  width: 8px;\n  height: 8px;\n  border-bottom: 2px solid var(--controls-bg);\n}\n\n.resize-handle.br::before {\n  right: 3px;\n  border-right: 2px solid var(--controls-bg);\n}\n\n.resize-handle.bl::before {\n  left: 3px;\n  border-left: 2px solid var(--controls-bg);\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  left: 50%;\n  transform: translateX(-50%);\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.controls button[hidden] {\n  display: none;\n}\n\n/* Compute-mode results panel */\n.results-panel {\n  font-family: var(--code-font, monospace);\n  font-size: 0.85rem;\n  padding: 8px;\n  box-sizing: border-box;\n  color: var(--results-fg, currentColor);\n  background: var(--results-bg, transparent);\n}\n\n.results-panel[hidden] {\n  display: none;\n}\n\n.results-panel .result {\n  margin-bottom: 24px;\n}\n\n.results-panel .result-caption {\n  font-weight: bold;\n  padding-bottom: 8px;\n}\n\n.results-panel table {\n  border-collapse: collapse;\n}\n\n.results-panel th,\n.results-panel td {\n  padding: 2px 8px;\n  border: 1px solid var(--results-border, rgba(128, 128, 128, 0.3));\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n.results-panel tfoot td {\n  text-align: left;\n}\n\n.results-panel tfoot button {\n  margin-left: 6px;\n  cursor: pointer;\n}\n\n/* Settings panel */\n.settings {\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  z-index: 1;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n:host(:hover) .settings {\n  opacity: 1;\n}\n\n.settings.empty {\n  display: none;\n}\n\n.uniform-toggle {\n  border: none;\n  background: var(--controls-bg);\n  color: var(--controls-color);\n  cursor: pointer;\n  padding: 4px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  transition: background 0.15s;\n}\n\n.uniform-toggle:hover {\n  color: var(--controls-hover-color);\n  background: var(--controls-bg);\n}\n\n.uniform-toggle svg {\n  transform: rotate(-90deg);\n  transition: transform 0.25s linear;\n}\n\n.settings.expanded .uniform-toggle svg {\n  transform: rotate(0deg);\n}\n\n.uniform-panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  margin-top: 4px;\n  min-width: 180px;\n  transition: grid-template-rows 0.25s linear;\n}\n\n.settings.expanded .uniform-panel {\n  grid-template-rows: 1fr;\n}\n\n.uniform-panel-inner {\n  overflow: hidden;\n  background: var(--controls-bg);\n  border-radius: 6px;\n  padding: 0 10px;\n}\n\n.uniform-panel-inner > :first-child {\n  margin-top: 8px;\n}\n\n.uniform-panel-inner > :last-child {\n  margin-bottom: 8px;\n}\n\n.uniform-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 4px;\n  color: var(--controls-color);\n  font-family: monospace;\n  font-size: 0.75rem;\n}\n\n.uniform-row label {\n  min-width: 60px;\n  flex-shrink: 0;\n}\n\n.uniform-row input[type=\"range\"] {\n  flex: 1;\n  min-width: 80px;\n}\n\n.uniform-row input[type=\"color\"] {\n  width: 28px;\n  height: 20px;\n  border: none;\n  padding: 0;\n  background: none;\n  cursor: pointer;\n}\n\n.uniform-row input[type=\"checkbox\"] {\n  cursor: pointer;\n}\n\n.uniform-value {\n  min-width: 36px;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\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",
+		"no-settings",
+		"theme",
+		"autoplay",
+		"transparent",
+		"fetch-libs",
+		"fetch-sources",
+		"width",
+		"height",
+		"pixel-ratio"
+	];
+	canvas;
+	resultsPanel;
+	errorOverlay;
+	controls;
+	settings;
+	resizeObserver;
+	stopRenderLoop;
+	_currentMode = "fragment";
+	_rerunPending = false;
+	renderState;
+	pendingUniforms = /* @__PURE__ */ new Map();
+	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);
+	_pointerCleanup;
+	_resizeCleanups = [];
+	_childObserver;
+	/** 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.resultsPanel = shadow.querySelector(".results-panel");
+		this.errorOverlay = new ErrorOverlay(shadow);
+		this.settings = new UniformControls(shadow, (name, value) => {
+			this.setUniform(name, value);
+			if (this._currentMode === "compute") this.scheduleComputeRerun();
+		});
+		this.controls = new PlaybackControls(shadow, () => this.play(), () => this.pause(), () => this.rewind(), () => this.toggleFullscreen(), () => this.scheduleComputeRerun());
+		this.resizeObserver = new ResizeObserver((entries) => {
+			if (!this.renderState) return;
+			if (this.hasAttribute("width") && this.hasAttribute("height")) return;
+			const entry = entries.at(-1);
+			if (!entry) return;
+			const [width, height] = entrySize(entry, this.getAttribute("pixel-ratio"));
+			if (width > 0 && height > 0) {
+				const maxDim = this.renderState.device.limits.maxTextureDimension2D;
+				this.canvas.width = clampCanvas(width, maxDim);
+				this.canvas.height = clampCanvas(height, maxDim);
+			}
+		});
+		const handles = shadow.querySelectorAll(".resize-handle");
+		for (const h of handles) this.setupResizeHandle(h, h.classList.contains("bl") ? "bl" : "br");
+	}
+	connectedCallback() {
+		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();
+		this.observeLightDomChildren();
+		upgradeProperty(this, "conditions");
+		upgradeProperty(this, "shader");
+		upgradeProperty(this, "project");
+	}
+	/** Start watching element size. Deferred until after `initWebGPU` so the
+	*  observer has a real `maxTextureDimension2D` to clamp against. */
+	observeCanvasSize() {
+		try {
+			this.resizeObserver.observe(this, { box: "device-pixel-content-box" });
+		} catch {
+			this.resizeObserver.observe(this);
+		}
+	}
+	disconnectedCallback() {
+		this.resizeObserver.disconnect();
+		this._childObserver?.disconnect();
+		this._childObserver = void 0;
+		this.stopRenderLoop?.();
+		this._pointerCleanup?.();
+		for (const c of this._resizeCleanups) c();
+		this._resizeCleanups = [];
+		document.removeEventListener("fullscreenchange", this._onFullscreenChange);
+		if (this._sourceEl && this._sourceListener) this._sourceEl.removeEventListener("change", this._sourceListener);
+		if (this.renderState) disposeResources(this.renderState);
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue) return;
+		switch (name) {
+			case "no-controls":
+				if (newValue !== null) this.controls.hide();
+				else this.controls.show();
+				return;
+			case "no-settings":
+				if (newValue !== null) this.settings.hide();
+				else this.settings.show();
+				return;
+			case "theme":
+				this._theme = newValue || "auto";
+				this.updateTheme();
+				return;
+			case "autoplay":
+				if (newValue === "false") this.pause();
+				else this.play();
+				return;
+			case "fetch-libs":
+				this._fetchLibs = newValue !== "false";
+				return;
+			case "fetch-sources":
+				this._fetchSources = newValue !== "false";
+				return;
+			case "src":
+				if (newValue && this._initPromise) this.loadFromUrl(newValue);
+				return;
+			case "width":
+			case "height":
+			case "pixel-ratio":
+				this.updateCanvasSize();
+				return;
+		}
+	}
+	/** 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 } = value;
+		const { 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;
+		this.setBoolAttr("fetch-libs", value);
+	}
+	/** Whether to fetch local .wesl source files via HTTP (default: true). */
+	get fetchSources() {
+		return this._fetchSources;
+	}
+	set fetchSources(value) {
+		this._fetchSources = value;
+		this.setBoolAttr("fetch-sources", value);
+	}
+	/** Whether autoplay is enabled (default: true). Set autoplay="false" to start paused. */
+	get autoplay() {
+		return this.getAttribute("autoplay") !== "false";
+	}
+	set autoplay(value) {
+		const enabled = value !== false && value !== "false";
+		this.setBoolAttr("autoplay", enabled);
+	}
+	/** Scale factor from CSS pixels to canvas pixels (default: devicePixelRatio). */
+	get pixelRatio() {
+		const attr = this.getAttribute("pixel-ratio");
+		return attr !== null ? Number(attr) : devicePixelRatio;
+	}
+	set pixelRatio(value) {
+		this.setAttribute("pixel-ratio", String(value));
+	}
+	/** Whether the shader is currently playing. */
+	get isPlaying() {
+		return this.playback.isPlaying;
+	}
+	/** Current animation time in seconds. */
+	get time() {
+		return calculateTime(this.playback);
+	}
+	/** 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);
+		if (this.renderState) this.stopRenderLoop = startRenderLoop(this.renderState, this.playback);
+	}
+	/** Pause playback. */
+	pause() {
+		if (!this.playback.isPlaying) return;
+		this.playback.pausedDuration = performance.now() - this.playback.startTime;
+		this.stopAndPresent();
+	}
+	setPlaying(playing) {
+		this.playback.isPlaying = playing;
+		this.controls.setPlaying(playing);
+		const detail = { isPlaying: playing };
+		this.dispatchEvent(new CustomEvent("playback-change", { detail }));
+	}
+	/** Mirror a default-true setter onto its attribute: absent = on, "false" = off. */
+	setBoolAttr(name, on) {
+		if (on) this.removeAttribute(name);
+		else this.setAttribute(name, "false");
+	}
+	/** Wait for any in-flight build and render one frame to the canvas, resolving
+	*  once it has been presented. Read the canvas via
+	*  `element.shadowRoot.querySelector('canvas')`. */
+	async renderFrame() {
+		await this.awaitIdleBuild();
+		if (!this.renderState) throw new Error("renderFrame: not initialized");
+		if (this.errorOverlay.visible) throw new Error("renderFrame: shader has compile error");
+		if (this._currentMode === "compute") throw new Error("renderFrame: compute mode has no canvas output");
+		renderOnce(this.renderState, this.playback);
+		await new Promise((r) => requestAnimationFrame(() => r()));
+	}
+	/** Resolve once initialization and any pending build have settled. Yields via
+	*  setTimeout so async build steps (network fetch, GPU validation) get a
+	*  chance to advance between polls. */
+	async awaitIdleBuild() {
+		await this._initPromise;
+		while (this._building || this._dirty) await new Promise((r) => setTimeout(r, 0));
+	}
+	/** Reset animation to time 0 and pause. */
+	rewind() {
+		this.playback.startTime = performance.now();
+		this.playback.pausedDuration = 0;
+		this.stopAndPresent();
+	}
+	/** Stop the RAF loop, mark paused, and re-present the current frame. */
+	stopAndPresent() {
+		this.stopRenderLoop?.();
+		this.setPlaying(false);
+		if (this.renderState) renderOnce(this.renderState, this.playback);
+	}
+	/** Display error message in overlay. Pass empty string to clear. */
+	showError(message) {
+		if (!message) {
+			this.errorOverlay.hide();
+			return;
+		}
+		this.errorOverlay.show(message);
+		this.pause();
+	}
+	/** Set a uniform value by name. Works before or after compilation. */
+	setUniform(name, value) {
+		this.pendingUniforms.set(name, value);
+		this.renderState?.uniformState.controlValues.set(name, value);
+		if (this.renderState && !this.playback.isPlaying) renderOnce(this.renderState, this.playback);
+	}
+	/** Apply uniforms set before the pipeline existed. */
+	flushPendingUniforms() {
+		const controlValues = this.renderState?.uniformState.controlValues;
+		if (!controlValues) return;
+		for (const [name, value] of this.pendingUniforms) controlValues.set(name, value);
+	}
+	/** Current uniform control values (readable). */
+	get uniforms() {
+		const controlValues = this.renderState?.uniformState.controlValues;
+		if (!controlValues) return {};
+		return Object.fromEntries(controlValues);
+	}
+	/** Toggle fullscreen on this element. */
+	toggleFullscreen() {
+		if (document.fullscreenElement) document.exitFullscreen();
+		else this.requestFullscreen();
+	}
+	/** Track pointer events on canvas for mouse_pos @auto fields. */
+	setupMouseTracking() {
+		const mouse = this.renderState.mouse;
+		const canvas = this.canvas;
+		const onMove = (e) => {
+			const rect = canvas.getBoundingClientRect();
+			const x = (e.clientX - rect.left) * (canvas.width / rect.width);
+			const y = (e.clientY - rect.top) * (canvas.height / rect.height);
+			mouse.delta = [x - mouse.pos[0], y - mouse.pos[1]];
+			mouse.pos = [x, y];
+		};
+		const onDown = (e) => {
+			mouse.button = e.button + 1;
+		};
+		const onUp = () => {
+			mouse.button = 0;
+		};
+		canvas.addEventListener("pointermove", onMove);
+		canvas.addEventListener("pointerdown", onDown);
+		canvas.addEventListener("pointerup", onUp);
+		canvas.addEventListener("pointerleave", onUp);
+		this._pointerCleanup = () => {
+			canvas.removeEventListener("pointermove", onMove);
+			canvas.removeEventListener("pointerdown", onDown);
+			canvas.removeEventListener("pointerup", onUp);
+			canvas.removeEventListener("pointerleave", onUp);
+		};
+	}
+	/** Drag-to-resize via a custom handle (works on touch + mouse). */
+	setupResizeHandle(handle, corner) {
+		const xSign = corner === "bl" ? -1 : 1;
+		let startX = 0;
+		let startY = 0;
+		let startW = 0;
+		let startH = 0;
+		/** Numeric aspect ratio (w/h) sampled at drag start, or null if `auto`. */
+		let ratio = null;
+		const onMove = (e) => {
+			const dx = (e.clientX - startX) * xSign;
+			const dy = e.clientY - startY;
+			let w = startW + dx;
+			let h = startH + dy;
+			if (ratio !== null) if (Math.abs(dx) >= Math.abs(dy)) h = w / ratio;
+			else w = h * ratio;
+			this.style.width = `${Math.max(16, w)}px`;
+			this.style.height = `${Math.max(16, h)}px`;
+		};
+		const onUp = () => {
+			handle.classList.remove("dragging");
+			document.removeEventListener("pointermove", onMove);
+			document.removeEventListener("pointerup", onUp);
+		};
+		const onDown = (e) => {
+			e.preventDefault();
+			handle.setPointerCapture(e.pointerId);
+			handle.classList.add("dragging");
+			const rect = this.getBoundingClientRect();
+			startX = e.clientX;
+			startY = e.clientY;
+			startW = rect.width;
+			startH = rect.height;
+			ratio = parseAspectRatio(getComputedStyle(this).aspectRatio);
+			document.addEventListener("pointermove", onMove);
+			document.addEventListener("pointerup", onUp);
+		};
+		handle.addEventListener("pointerdown", onDown);
+		this._resizeCleanups.push(() => {
+			handle.removeEventListener("pointerdown", onDown);
+			onUp();
+		});
+	}
+	/** Recompute canvas resolution from attributes or CSS size. */
+	updateCanvasSize() {
+		const w = this.getAttribute("width");
+		const h = this.getAttribute("height");
+		const maxDim = this.renderState?.device.limits.maxTextureDimension2D;
+		if (w !== null && h !== null) {
+			this.canvas.width = clampCanvas(Number(w), maxDim);
+			this.canvas.height = clampCanvas(Number(h), maxDim);
+			return;
+		}
+		const rect = this.getBoundingClientRect();
+		if (rect.width <= 0 || rect.height <= 0) return;
+		const ratio = this.pixelRatio;
+		this.canvas.width = clampCanvas(rect.width * ratio, maxDim);
+		this.canvas.height = clampCanvas(rect.height * ratio, maxDim);
+	}
+	/** Toggle the `dark` class to match `theme` attr or system preference. */
+	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;
+	}
+	/** Init WebGPU, wire observers/listeners, and dispatch ready/init-error. */
+	async doInitialize() {
+		try {
+			const alphaMode = this.hasAttribute("transparent") ? "premultiplied" : "opaque";
+			this.renderState = await initWebGPU(this.canvas, alphaMode);
+			this.observeCanvasSize();
+			this.setupMouseTracking();
+			this.loadInitialContent();
+			if (this.playback.isPlaying) 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();
+			const detail = { message };
+			this.dispatchEvent(new CustomEvent("init-error", { detail }));
+			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;
+		if (this.id && !el.getAttribute("lint-from")) el.setAttribute("lint-from", this.id);
+		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 shaderRoot = this.getConfigOverrides()?.shaderRoot;
+			const { weslSrc, libs, rootModuleName } = await loadShaderFromUrl(url, 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();
+				const result = await this.buildPipeline(mainSource);
+				if (!this._dirty) this.applyBuild(result);
+			} catch (error) {
+				if (!this._dirty) this.handleCompileError(error);
+			}
+		}
+		this._building = false;
+	}
+	/** Fetch deps if needed and create the render pipeline. */
+	async buildPipeline(mainSource) {
+		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);
+		}
+		return createPipeline(this.renderState, mainSource, (source) => this.resolveHostTexture(source), {
+			...this._linkOptions,
+			weslSrc: this._weslSrc,
+			libs: this._libs,
+			rootModuleName: this._rootModuleName
+		});
+	}
+	/** Resolve a @texture(name) to a decoded image from light-DOM children.
+	*  Prefers [data-texture="name"], falls back to #id. */
+	resolveHostTexture = async (source) => {
+		const selector = `[data-texture="${cssEscape(source)}"], #${cssEscape(source)}`;
+		const el = this.querySelector(selector);
+		if (!el) return null;
+		if (el instanceof HTMLImageElement) return decodeImage(el, source);
+		if (el instanceof HTMLCanvasElement) return el;
+		throw new ResourceLoadError(`@texture(${source}): matched element is a <${el.tagName.toLowerCase()}>; expected <img> or <canvas>`, source);
+	};
+	/** Watch light-DOM for <img> add/remove/src changes and trigger a rebuild. */
+	observeLightDomChildren() {
+		if (this._childObserver) return;
+		this._childObserver = new MutationObserver((records) => {
+			for (const r of records) {
+				if (r.type === "attributes") {
+					this.requestBuild();
+					return;
+				}
+				for (const node of [...r.addedNodes, ...r.removedNodes]) if (node instanceof HTMLImageElement) {
+					this.requestBuild();
+					return;
+				}
+			}
+		});
+		this._childObserver.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [
+				"src",
+				"id",
+				"data-texture"
+			]
+		});
+	}
+	/** Apply a successful build: flush uniforms, update controls, render. */
+	applyBuild(result) {
+		this.flushPendingUniforms();
+		const controls = this.renderState.uniformState.layout.controls;
+		this.settings.setControls(controls);
+		this.applyMode(result);
+		this.dispatchEvent(new CustomEvent("compile-success"));
+		const detail = result.layout;
+		this.dispatchEvent(new CustomEvent("uniforms-layout", { detail }));
+	}
+	/** Show canvas vs results panel and (re-)render based on build mode. */
+	applyMode(result) {
+		this._currentMode = result.mode;
+		if (result.mode === "compute") {
+			this.canvas.hidden = true;
+			this.resultsPanel.hidden = false;
+			this.controls.setMode("compute");
+			const entries = result.computeReadback ?? [];
+			renderResultsPanel({
+				panel: this.resultsPanel,
+				entries
+			});
+			return;
+		}
+		this.canvas.hidden = false;
+		this.resultsPanel.hidden = true;
+		this.controls.setMode("render");
+		if (!this.playback.isPlaying) renderOnce(this.renderState, this.playback);
+	}
+	/** Coalesce rapid uniform/refresh events into a single re-dispatch. */
+	scheduleComputeRerun() {
+		if (this._rerunPending) return;
+		this._rerunPending = true;
+		queueMicrotask(async () => {
+			this._rerunPending = false;
+			if (this._currentMode !== "compute" || !this.renderState) return;
+			try {
+				this.flushPendingUniforms();
+				const entries = await rerunCompute(this.renderState);
+				renderResultsPanel({
+					panel: this.resultsPanel,
+					entries
+				});
+			} catch (error) {
+				this.handleCompileError(error);
+			}
+		});
+	}
+	/** Show the error overlay and dispatch a `compile-error` event. */
+	handleCompileError(error) {
+		const message = error?.message ?? String(error);
+		this.errorOverlay.show(message);
+		const detail = {
+			message,
+			source: error instanceof WeslParseError ? "wesl" : "webgpu",
+			kind: error instanceof ResourceLoadError ? "resource" : "shader",
+			locations: this.extractLocations(error)
+		};
+		if (error instanceof ResourceLoadError) detail.resourceSource = error.resourceSource;
+		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) {
+			const message = error?.message ?? "";
+			const { file, line, column, length, offset } = loc;
+			return [{
+				file,
+				line,
+				column: column - 1,
+				length,
+				offset,
+				severity: "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,
+			offset: m.offset,
+			severity: toSeverity(m.type),
+			message: m.message
+		}));
+		return [];
+	}
+};
+function getStyles() {
+	if (!styles) {
+		styles = new CSSStyleSheet();
+		styles.replaceSync(WgslPlay_default);
+	}
+	return styles;
+}
+function getTemplate() {
+	if (!template) {
+		template = document.createElement("template");
+		template.innerHTML = `<canvas part="canvas"></canvas><div class="results-panel" part="results-panel" hidden></div><div class="resize-handle br"></div><div class="resize-handle bl"></div>`;
+	}
+	return template;
+}
+/** Absorb instance properties set before custom element upgrade.
+*  Duplicated in WgslEdit.ts; extract to a shared package later. */
+function upgradeProperty(el, prop) {
+	if (Object.hasOwn(el, prop)) {
+		const value = el[prop];
+		delete el[prop];
+		el[prop] = value;
+	}
+}
+/** Normalize all keys in a weslSrc record to module paths. */
+function toModulePaths(weslSrc, pkg) {
+	const entries = Object.entries(weslSrc).map(([key, value]) => [fileToModulePath(key, pkg, false), value]);
+	return Object.fromEntries(entries);
+}
+/** Parse `getComputedStyle().aspectRatio` (`"auto"`, `"1"`, `"16 / 9"`) to w/h. */
+function parseAspectRatio(value) {
+	if (!value || value === "auto") return null;
+	const [w, h = "1"] = value.split("/").map((s) => s.trim());
+	const wNum = Number(w);
+	const hNum = Number(h);
+	if (!wNum || !hNum) return null;
+	return wNum / hNum;
+}
+/** 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];
+}
+/** Escape a value for safe use as an attribute-selector literal or id selector. */
+function cssEscape(value) {
+	if (typeof CSS !== "undefined" && CSS.escape) return CSS.escape(value);
+	return value.replace(/[^a-zA-Z0-9_-]/g, (ch) => `\\${ch}`);
+}
+/** Decode an <img> to an ImageBitmap with deterministic upload flags. */
+async function decodeImage(el, source) {
+	try {
+		if (!el.complete) await waitForImageLoad(el);
+		if (el.decode) await el.decode();
+		return await createImageBitmap(el, {
+			imageOrientation: "from-image",
+			premultiplyAlpha: "none",
+			colorSpaceConversion: "none"
+		});
+	} catch (err) {
+		const detail = err instanceof Error ? err.message : String(err);
+		throw new ResourceLoadError(`@texture(${source}): failed to decode <img src="${el.src}"> — ${detail}`, source);
+	}
+}
+/** Map a GPU compilation message `type` field to our severity enum. */
+function toSeverity(type) {
+	if (type === "warning") return "warning";
+	if (type === "info") return "info";
+	return "error";
+}
+function waitForImageLoad(el) {
+	return new Promise((resolve, reject) => {
+		const onLoad = () => {
+			el.removeEventListener("error", onError);
+			resolve();
+		};
+		const onError = () => {
+			el.removeEventListener("load", onLoad);
+			reject(/* @__PURE__ */ new Error("image load failed"));
+		};
+		el.addEventListener("load", onLoad, { once: true });
+		el.addEventListener("error", onError, { once: true });
+	});
+}
+//#endregion
+export { resetConfig as a, getConfig as i, WgslPlay as n, defaults as r, ResourceLoadError$1 as t };