wgsl-play 0.0.39 → 0.0.40

package/dist/wgsl-play.js

@@ -75,338 +75,6 @@ async function hydrateBundle(path, registry, hydrated, fetcher) {
 	return placeholder;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/fflate@0.8.2/node_modules/fflate/esm/browser.js
-var u8 = Uint8Array, u16 = Uint16Array, i32 = Int32Array;
-var fleb = new u8([
-	0,
-	0,
-	0,
-	0,
-	0,
-	0,
-	0,
-	0,
-	1,
-	1,
-	1,
-	1,
-	2,
-	2,
-	2,
-	2,
-	3,
-	3,
-	3,
-	3,
-	4,
-	4,
-	4,
-	4,
-	5,
-	5,
-	5,
-	5,
-	0,
-	0,
-	0,
-	0
-]);
-var fdeb = new u8([
-	0,
-	0,
-	0,
-	0,
-	1,
-	1,
-	2,
-	2,
-	3,
-	3,
-	4,
-	4,
-	5,
-	5,
-	6,
-	6,
-	7,
-	7,
-	8,
-	8,
-	9,
-	9,
-	10,
-	10,
-	11,
-	11,
-	12,
-	12,
-	13,
-	13,
-	0,
-	0
-]);
-var clim = new u8([
-	16,
-	17,
-	18,
-	0,
-	8,
-	7,
-	9,
-	6,
-	10,
-	5,
-	11,
-	4,
-	12,
-	3,
-	13,
-	2,
-	14,
-	1,
-	15
-]);
-var freb = function(eb, start) {
-	var b = new u16(31);
-	for (var i = 0; i < 31; ++i) b[i] = start += 1 << eb[i - 1];
-	var r = new i32(b[30]);
-	for (var i = 1; i < 30; ++i) for (var j = b[i]; j < b[i + 1]; ++j) r[j] = j - b[i] << 5 | i;
-	return {
-		b,
-		r
-	};
-};
-var _a = freb(fleb, 2), fl = _a.b, revfl = _a.r;
-fl[28] = 258, revfl[258] = 28;
-var _b = freb(fdeb, 0), fd = _b.b;
-_b.r;
-var rev = new u16(32768);
-for (var i = 0; i < 32768; ++i) {
-	var x = (i & 43690) >> 1 | (i & 21845) << 1;
-	x = (x & 52428) >> 2 | (x & 13107) << 2;
-	x = (x & 61680) >> 4 | (x & 3855) << 4;
-	rev[i] = ((x & 65280) >> 8 | (x & 255) << 8) >> 1;
-}
-var hMap = (function(cd, mb, r) {
-	var s = cd.length;
-	var i = 0;
-	var l = new u16(mb);
-	for (; i < s; ++i) if (cd[i]) ++l[cd[i] - 1];
-	var le = new u16(mb);
-	for (i = 1; i < mb; ++i) le[i] = le[i - 1] + l[i - 1] << 1;
-	var co;
-	if (r) {
-		co = new u16(1 << mb);
-		var rvb = 15 - mb;
-		for (i = 0; i < s; ++i) if (cd[i]) {
-			var sv = i << 4 | cd[i];
-			var r_1 = mb - cd[i];
-			var v = le[cd[i] - 1]++ << r_1;
-			for (var m = v | (1 << r_1) - 1; v <= m; ++v) co[rev[v] >> rvb] = sv;
-		}
-	} else {
-		co = new u16(s);
-		for (i = 0; i < s; ++i) if (cd[i]) co[i] = rev[le[cd[i] - 1]++] >> 15 - cd[i];
-	}
-	return co;
-});
-var flt = new u8(288);
-for (var i = 0; i < 144; ++i) flt[i] = 8;
-for (var i = 144; i < 256; ++i) flt[i] = 9;
-for (var i = 256; i < 280; ++i) flt[i] = 7;
-for (var i = 280; i < 288; ++i) flt[i] = 8;
-var fdt = new u8(32);
-for (var i = 0; i < 32; ++i) fdt[i] = 5;
-var flrm = /* @__PURE__ */ hMap(flt, 9, 1), fdrm = /* @__PURE__ */ hMap(fdt, 5, 1);
-var max = function(a) {
-	var m = a[0];
-	for (var i = 1; i < a.length; ++i) if (a[i] > m) m = a[i];
-	return m;
-};
-var bits = function(d, p, m) {
-	var o = p / 8 | 0;
-	return (d[o] | d[o + 1] << 8) >> (p & 7) & m;
-};
-var bits16 = function(d, p) {
-	var o = p / 8 | 0;
-	return (d[o] | d[o + 1] << 8 | d[o + 2] << 16) >> (p & 7);
-};
-var shft = function(p) {
-	return (p + 7) / 8 | 0;
-};
-var slc = function(v, s, e) {
-	if (s == null || s < 0) s = 0;
-	if (e == null || e > v.length) e = v.length;
-	return new u8(v.subarray(s, e));
-};
-var ec = [
-	"unexpected EOF",
-	"invalid block type",
-	"invalid length/literal",
-	"invalid distance",
-	"stream finished",
-	"no stream handler",
-	,
-	"no callback",
-	"invalid UTF-8 data",
-	"extra field too long",
-	"date not in range 1980-2099",
-	"filename too long",
-	"stream finishing",
-	"invalid zip data"
-];
-var err = function(ind, msg, nt) {
-	var e = new Error(msg || ec[ind]);
-	e.code = ind;
-	if (Error.captureStackTrace) Error.captureStackTrace(e, err);
-	if (!nt) throw e;
-	return e;
-};
-var inflt = function(dat, st, buf, dict) {
-	var sl = dat.length, dl = dict ? dict.length : 0;
-	if (!sl || st.f && !st.l) return buf || new u8(0);
-	var noBuf = !buf;
-	var resize = noBuf || st.i != 2;
-	var noSt = st.i;
-	if (noBuf) buf = new u8(sl * 3);
-	var cbuf = function(l) {
-		var bl = buf.length;
-		if (l > bl) {
-			var nbuf = new u8(Math.max(bl * 2, l));
-			nbuf.set(buf);
-			buf = nbuf;
-		}
-	};
-	var final = st.f || 0, pos = st.p || 0, bt = st.b || 0, lm = st.l, dm = st.d, lbt = st.m, dbt = st.n;
-	var tbts = sl * 8;
-	do {
-		if (!lm) {
-			final = bits(dat, pos, 1);
-			var type = bits(dat, pos + 1, 3);
-			pos += 3;
-			if (!type) {
-				var s = shft(pos) + 4, l = dat[s - 4] | dat[s - 3] << 8, t = s + l;
-				if (t > sl) {
-					if (noSt) err(0);
-					break;
-				}
-				if (resize) cbuf(bt + l);
-				buf.set(dat.subarray(s, t), bt);
-				st.b = bt += l, st.p = pos = t * 8, st.f = final;
-				continue;
-			} else if (type == 1) lm = flrm, dm = fdrm, lbt = 9, dbt = 5;
-			else if (type == 2) {
-				var hLit = bits(dat, pos, 31) + 257, hcLen = bits(dat, pos + 10, 15) + 4;
-				var tl = hLit + bits(dat, pos + 5, 31) + 1;
-				pos += 14;
-				var ldt = new u8(tl);
-				var clt = new u8(19);
-				for (var i = 0; i < hcLen; ++i) clt[clim[i]] = bits(dat, pos + i * 3, 7);
-				pos += hcLen * 3;
-				var clb = max(clt), clbmsk = (1 << clb) - 1;
-				var clm = hMap(clt, clb, 1);
-				for (var i = 0; i < tl;) {
-					var r = clm[bits(dat, pos, clbmsk)];
-					pos += r & 15;
-					var s = r >> 4;
-					if (s < 16) ldt[i++] = s;
-					else {
-						var c = 0, n = 0;
-						if (s == 16) n = 3 + bits(dat, pos, 3), pos += 2, c = ldt[i - 1];
-						else if (s == 17) n = 3 + bits(dat, pos, 7), pos += 3;
-						else if (s == 18) n = 11 + bits(dat, pos, 127), pos += 7;
-						while (n--) ldt[i++] = c;
-					}
-				}
-				var lt = ldt.subarray(0, hLit), dt = ldt.subarray(hLit);
-				lbt = max(lt);
-				dbt = max(dt);
-				lm = hMap(lt, lbt, 1);
-				dm = hMap(dt, dbt, 1);
-			} else err(1);
-			if (pos > tbts) {
-				if (noSt) err(0);
-				break;
-			}
-		}
-		if (resize) cbuf(bt + 131072);
-		var lms = (1 << lbt) - 1, dms = (1 << dbt) - 1;
-		var lpos = pos;
-		for (;; lpos = pos) {
-			var c = lm[bits16(dat, pos) & lms], sym = c >> 4;
-			pos += c & 15;
-			if (pos > tbts) {
-				if (noSt) err(0);
-				break;
-			}
-			if (!c) err(2);
-			if (sym < 256) buf[bt++] = sym;
-			else if (sym == 256) {
-				lpos = pos, lm = null;
-				break;
-			} else {
-				var add = sym - 254;
-				if (sym > 264) {
-					var i = sym - 257, b = fleb[i];
-					add = bits(dat, pos, (1 << b) - 1) + fl[i];
-					pos += b;
-				}
-				var d = dm[bits16(dat, pos) & dms], dsym = d >> 4;
-				if (!d) err(3);
-				pos += d & 15;
-				var dt = fd[dsym];
-				if (dsym > 3) {
-					var b = fdeb[dsym];
-					dt += bits16(dat, pos) & (1 << b) - 1, pos += b;
-				}
-				if (pos > tbts) {
-					if (noSt) err(0);
-					break;
-				}
-				if (resize) cbuf(bt + 131072);
-				var end = bt + add;
-				if (bt < dt) {
-					var shift = dl - dt, dend = Math.min(dt, end);
-					if (shift + bt < 0) err(3);
-					for (; bt < dend; ++bt) buf[bt] = dict[shift + bt];
-				}
-				for (; bt < end; ++bt) buf[bt] = buf[bt - dt];
-			}
-		}
-		st.l = lm, st.p = lpos, st.b = bt, st.f = final;
-		if (lm) final = 1, st.m = lbt, st.d = dm, st.n = dbt;
-	} while (!final);
-	return bt != buf.length && noBuf ? slc(buf, 0, bt) : buf.subarray(0, bt);
-};
-var et = /* @__PURE__ */ new u8(0);
-var gzs = function(d) {
-	if (d[0] != 31 || d[1] != 139 || d[2] != 8) err(6, "invalid gzip data");
-	var flg = d[3];
-	var st = 10;
-	if (flg & 4) st += (d[10] | d[11] << 8) + 2;
-	for (var zs = (flg >> 3 & 1) + (flg >> 4 & 1); zs > 0; zs -= !d[st++]);
-	return st + (flg & 2);
-};
-var gzl = function(d) {
-	var l = d.length;
-	return (d[l - 4] | d[l - 3] << 8 | d[l - 2] << 16 | d[l - 1] << 24) >>> 0;
-};
-/**
-* Expands GZIP data
-* @param data The data to decompress
-* @param opts The decompression options
-* @returns The decompressed version of the data
-*/
-function gunzipSync(data, opts) {
-	var st = gzs(data);
-	if (st + 8 > data.length) err(6, "invalid gzip data");
-	return inflt(data.subarray(st, -8), { i: 2 }, opts && opts.out || new u8(gzl(data)), opts && opts.dictionary);
-}
-var td = typeof TextDecoder != "undefined" && /* @__PURE__ */ new TextDecoder();
-try {
-	td.decode(et, { stream: true });
-} catch (e) {}
-//#endregion
 //#region ../../node_modules/.pnpm/nanotar@0.2.0/node_modules/nanotar/dist/index.mjs
 const TAR_TYPE_FILE = 0;
 const TAR_TYPE_DIR = 5;
@@ -458,6 +126,13 @@ function parseTar(data, opts) {
 	}
 	return files;
 }
+async function parseTarGzip(data, opts = {}) {
+	const stream = new ReadableStream({ start(controller) {
+		controller.enqueue(new Uint8Array(data));
+		controller.close();
+	} }).pipeThrough(new DecompressionStream(opts.compression ?? "gzip"));
+	return parseTar(await new Response(stream).arrayBuffer(), opts);
+}
 function _readString(buffer, offset, size) {
 	const view = new Uint8Array(buffer, offset, size);
 	const i = view.indexOf(0);
@@ -521,7 +196,7 @@ function memoAsync(fn) {
 async function fetchAndExtractTgzRaw(tgzUrl) {
 	const response = await fetch(tgzUrl);
 	if (!response.ok) throw new Error(`Failed to fetch package: HTTP ${response.status}`);
-	return parseTar(gunzipSync(new Uint8Array(await response.arrayBuffer())));
+	return parseTarGzip(new Uint8Array(await response.arrayBuffer()));
 }
 async function npmPackageToUrlRaw(packageName) {
 	const metadataUrl = `https://registry.npmjs.org/${packageName}`;
@@ -771,12 +446,13 @@ const isBrowser = "document" in globalThis;
 /** Throw an error with an embedded source map so that browser users can
 *  click on the error in the browser debug console and see the wesl source code.  */
 function throwClickableError(params) {
-	const { url, text, lineNumber, lineColumn, length, error } = params;
+	const { url, text, lineNumber, lineColumn, length, offset, error } = params;
 	const weslLocation = {
 		file: url,
 		line: lineNumber,
 		column: lineColumn,
-		length
+		length,
+		offset
 	};
 	error.weslLocation = weslLocation;
 	if (!isBrowser) throw error;
@@ -837,6 +513,7 @@ function failIdentElem(identElem, msg = "") {
 		lineNumber,
 		lineColumn,
 		length: end - start,
+		offset: start,
 		error: new Error(detailedMessage)
 	});
 }
@@ -1112,7 +789,7 @@ function lowerAndEmitElem(e, ctx) {
 		case "let":
 		case "statement":
 		case "continuing":
-			emitStatement$1(e, ctx);
+			emitStatement(e, ctx);
 			return;
 		case "override":
 		case "const":
@@ -1150,7 +827,7 @@ function emitModule(e, ctx) {
 		lowerAndEmitElem(child, ctx);
 	}
 }
-function emitStatement$1(e, ctx) {
+function emitStatement(e, ctx) {
 	if (!(e.contents.length > 0 && e.contents[0].kind === "attribute")) emitAttributes(e.attributes, ctx);
 	emitContents(e, ctx);
 }
@@ -4529,20 +4206,13 @@ async function link(params) {
 }
 /** linker api for benchmarking */
 function _linkSync(params) {
-	const { weslSrc, libs = [], packageName, debugWeslRoot } = params;
-	const { resolver } = params;
-	const resolvers = [];
-	if (resolver) resolvers.push(resolver);
-	else if (weslSrc) resolvers.push(new RecordResolver(weslSrc, {
+	const { weslSrc, libs = [], packageName, debugWeslRoot, resolver } = params;
+	if (!resolver && !weslSrc) throw new Error("Either resolver or weslSrc must be provided");
+	const allResolvers = [resolver ?? new RecordResolver(weslSrc, {
 		packageName,
 		debugWeslRoot
-	}));
-	else throw new Error("Either resolver or weslSrc must be provided");
-	if (libs.length > 0) {
-		const libResolvers = createLibraryResolvers(libs, debugWeslRoot);
-		resolvers.push(...libResolvers);
-	}
-	const finalResolver = resolvers.length === 1 ? resolvers[0] : new CompositeResolver(resolvers);
+	}), ...createLibraryResolvers(libs, debugWeslRoot)];
+	const finalResolver = allResolvers.length === 1 ? allResolvers[0] : new CompositeResolver(allResolvers);
 	return linkRegistry({
 		...params,
 		resolver: finalResolver
@@ -4626,6 +4296,7 @@ function setupVirtualLibs(virtualLibs, constants) {
 	}
 	return libs && mapValues(libs, (fn) => ({ fn }));
 }
+/** Run registered transform plugins over the bound AST. */
 function applyTransformPlugins(rootModule, globalNames, config) {
 	const { moduleElem, srcModule } = rootModule;
 	const startAst = {
@@ -4638,53 +4309,38 @@ function applyTransformPlugins(rootModule, globalNames, config) {
 }
 /** Assemble WGSL output from prologue statements, root module, and imported declarations. */
 function emitWgsl(rootModuleElem, srcModule, newDecls, newStatements, conditions = {}) {
-	const prologueBuilders = newStatements.map((s) => emitStatement(s, conditions));
-	const rootBuilder = new SrcMapBuilder({
-		text: srcModule.src,
-		path: srcModule.debugFilePath
-	});
+	const prologueBuilders = newStatements.map((s) => emitElem(s.srcModule, s.elem, conditions, { addNl: true }));
+	const rootBuilder = builderFromModule(srcModule);
 	lowerAndEmit({
 		srcBuilder: rootBuilder,
 		rootElems: [rootModuleElem],
 		conditions,
 		extracting: false
 	});
-	const declBuilders = newDecls.map((decl) => emitDecl(decl, conditions));
+	const declBuilders = newDecls.map((decl) => emitElem(decl.srcModule, decl.declElem, conditions, { skipConditionalFiltering: true }));
 	return [
 		...prologueBuilders,
 		rootBuilder,
 		...declBuilders
 	];
 }
-function emitStatement(s, conditions) {
-	const { elem, srcModule } = s;
-	const { src: text, debugFilePath: path } = srcModule;
-	const builder = new SrcMapBuilder({
-		text,
-		path
-	});
+/** Emit a single element (prologue statement or imported declaration) into a SrcMapBuilder. */
+function emitElem(srcModule, elem, conditions, opts = {}) {
+	const builder = builderFromModule(srcModule);
 	lowerAndEmit({
 		srcBuilder: builder,
 		rootElems: [elem],
-		conditions
+		conditions,
+		skipConditionalFiltering: opts.skipConditionalFiltering
 	});
-	builder.addNl();
+	if (opts.addNl) builder.addNl();
 	return builder;
 }
-/** Skip conditional filtering because findValidRootDecls already validated these declarations */
-function emitDecl(decl, conditions) {
-	const { src: text, debugFilePath: path } = decl.srcModule;
-	const builder = new SrcMapBuilder({
-		text,
-		path
-	});
-	lowerAndEmit({
-		srcBuilder: builder,
-		rootElems: [decl.declElem],
-		conditions,
-		skipConditionalFiltering: true
+function builderFromModule(srcModule) {
+	return new SrcMapBuilder({
+		text: srcModule.src,
+		path: srcModule.debugFilePath
 	});
-	return builder;
 }
 matchOneOf(textureStorageTypes);
 matchOneOf(sampledTextureTypes);
@@ -4730,6 +4386,7 @@ function makeWeslDevice(device) {
 					lineNumber: message.lineNum,
 					lineColumn: message.linePos,
 					length: message.length,
+					offset: message.offset,
 					error: /* @__PURE__ */ new Error(message.type + ": " + message.message)
 				});
 				else console.error(ev.error.message);
@@ -5158,125 +4815,32 @@ 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 ../wesl-gpu/src/DeviceCache.ts
+//#region ../wesl-gpu/src/ErrorScopes.ts
 /**
-* WeakMap cache for GPUDevice-based caching
-*
-* GPUDevices are weakly held to avoid memory leaks.
+* Runs a function with WebGPU error scopes, automatically handling push/pop/check.
+* JS errors from `fn` propagate unchanged. GPU errors (validation, OOM, internal)
+* are rethrown as `Error` with the original `GPUError` preserved as `.cause`.
 */
-var DeviceCache = class {
-	cache = /* @__PURE__ */ new WeakMap();
-	get(device, key) {
-		return this.cache.get(device)?.get(key);
-	}
-	set(device, key, value) {
-		let deviceCache = this.cache.get(device);
-		if (!deviceCache) {
-			deviceCache = /* @__PURE__ */ new Map();
-			this.cache.set(device, deviceCache);
-		}
-		deviceCache.set(key, value);
+async function withErrorScopes(device, fn) {
+	device.pushErrorScope("internal");
+	device.pushErrorScope("out-of-memory");
+	device.pushErrorScope("validation");
+	let result;
+	let jsError;
+	try {
+		result = await fn();
+	} catch (e) {
+		jsError = e;
 	}
-};
-new DeviceCache();
-new DeviceCache();
-//#endregion
-//#region ../wesl-gpu/src/FullscreenVertex.ts
-/** Fullscreen triangle vertex shader that covers viewport with 3 vertices, no vertex buffer needed */
-const fullscreenTriangleVertex = `
-  @vertex
-  fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
-    // Covers viewport with 3 vertices, no vertex buffer needed
-    var pos: vec2f;
-    if (idx == 0u) {
-      pos = vec2f(-1.0, -1.0);
-    } else if (idx == 1u) {
-      pos = vec2f(3.0, -1.0);
-    } else {
-      pos = vec2f(-1.0, 3.0);
-    }
-    return vec4f(pos, 0.0, 1.0);
-  }`;
+	const validationError = await device.popErrorScope();
+	const oomError = await device.popErrorScope();
+	const internalError = await device.popErrorScope();
+	if (jsError) throw jsError;
+	if (validationError) throw new Error(`WebGPU validation error: ${validationError.message}`, { cause: validationError });
+	if (oomError) throw new Error(`WebGPU out-of-memory error: ${oomError.message}`, { cause: oomError });
+	if (internalError) throw new Error(`WebGPU internal error: ${internalError.message}`, { cause: internalError });
+	return result;
+}
 //#endregion
 //#region ../wesl-reflect/src/Annotations.ts
 /** Find a StandardAttribute by name on an element with attributes. */
@@ -5315,7 +4879,6 @@ function originalTypeName(typeRef) {
 }
 //#endregion
 //#region ../wesl-reflect/src/StructLayout.ts
-const roundUp = (align, n) => Math.ceil(n / align) * align;
 const typeTable = {
 	f32: scalar(4),
 	i32: scalar(4),
@@ -5354,16 +4917,69 @@ const typeTable = {
 };
 /** Compute byte offsets and buffer size for a bound WGSL struct.
 *  Nested structs resolved via refersTo links. Conditional members filtered when conditions provided. */
-function structLayout(struct, conditions) {
-	return membersLayout(conditions ? filterValidElements(struct.members, conditions) : struct.members, conditions);
+function structLayout(struct, conditions, structs) {
+	return membersLayout(conditions ? filterValidElements(struct.members, conditions) : struct.members, conditions, structs);
+}
+/** Build a StructRegistry from all top-level struct declarations in `ast`. */
+function buildStructRegistry(ast) {
+	const reg = /* @__PURE__ */ new Map();
+	for (const e of ast.moduleElem.contents) if (e.kind === "struct") reg.set(e.name.ident.originalName, e);
+	return reg;
+}
+/** Resolve alignment and size for any host-shareable typeRef (primitive, array, or nested struct). */
+function typeRefLayout(typeRef, conditions, structs) {
+	const name = originalTypeName(typeRef);
+	const primitive = typeTable[name];
+	if (primitive) return primitive;
+	if (name === "array") {
+		const params = typeRef.templateParams;
+		if (!params?.length) throw new Error("array type missing template parameters");
+		const elem = elemTypeInfo(params[0], conditions, structs);
+		const stride = roundUp(elem.alignment, elem.size);
+		const p = params[1];
+		const count = p && "value" in p ? Number(p.value) : 0;
+		return {
+			alignment: elem.alignment,
+			size: count * stride
+		};
+	}
+	const nested = resolveStructInfo(typeRef.name, conditions, structs, name);
+	if (nested) return nested;
+	throw new Error(`unsupported type for layout: '${name}'`);
+}
+/** Round `n` up to the next multiple of `align`. */
+function roundUp(align, n) {
+	return Math.ceil(n / align) * align;
+}
+function scalar(size) {
+	return {
+		alignment: size,
+		size
+	};
+}
+/** vec2: align=2*S, size=2*S; vec3: align=4*S, size=3*S; vec4: align=4*S, size=4*S */
+function vec(n, scalarSize) {
+	return {
+		alignment: (n === 3 ? 4 : n) * scalarSize,
+		size: n * scalarSize
+	};
+}
+/** matCxR<T>: C columns of vecR<T>, column stride = roundUp(colAlign, colSize) */
+function mat(cols, rows, scalarSize) {
+	const col = vec(rows, scalarSize);
+	const colStride = roundUp(col.alignment, col.size);
+	return {
+		alignment: col.alignment,
+		size: cols * colStride
+	};
 }
 /** Compute layout from a flat member list (used internally and for nested resolution). */
-function membersLayout(members, conditions) {
+function membersLayout(members, conditions, structs) {
 	let offset = 0;
 	let structAlign = 1;
 	const fields = [];
 	for (const m of members) {
-		let { alignment, size } = memberTypeInfo(m.typeRef, conditions);
+		let { alignment, size } = typeRefLayout(m.typeRef, conditions, structs);
 		const alignAttr = findAnnotation(m, "align");
 		if (alignAttr) {
 			const [n] = numericParams(alignAttr);
@@ -5389,73 +5005,38 @@ function membersLayout(members, conditions) {
 		alignment: structAlign
 	};
 }
-/** Resolve alignment and size for a member's type (primitive, array, or nested struct). */
-function memberTypeInfo(typeRef, conditions) {
-	const name = originalTypeName(typeRef);
-	const primitive = typeTable[name];
-	if (primitive) return primitive;
-	if (name === "array") {
-		const params = typeRef.templateParams;
-		if (!params?.length) throw new Error("array type missing template parameters");
-		const elem = elemTypeInfo(params[0], conditions);
-		const stride = roundUp(elem.alignment, elem.size);
-		const p = params[1];
-		const count = p && "value" in p ? Number(p.value) : 0;
-		return {
-			alignment: elem.alignment,
-			size: count * stride
-		};
-	}
-	const nested = resolveStructInfo(typeRef.name, conditions);
-	if (nested) return nested;
-	throw new Error(`unsupported type for layout: '${name}'`);
-}
 /** Extract type info from an array template param (TypeRefElem or RefIdentElem). */
-function elemTypeInfo(param, conditions) {
-	if (param.kind === "type") return memberTypeInfo(param, conditions);
-	const p = param;
-	const ident = p.ident;
-	const typeName = ident?.originalName ?? p.originalName;
+function elemTypeInfo(param, conditions, structs) {
+	if (param.kind === "type") return typeRefLayout(param, conditions, structs);
+	const ident = param.kind === "ref" ? param.ident : void 0;
+	const typeName = ident?.originalName;
 	if (!typeName) throw new Error("cannot resolve array element type");
 	const primitive = typeTable[typeName];
 	if (primitive) return primitive;
-	if (ident) {
-		const nested = resolveStructInfo(ident, conditions);
-		if (nested) return nested;
-	}
+	const nested = resolveStructInfo(ident, conditions, structs, typeName);
+	if (nested) return nested;
 	throw new Error(`unsupported type for layout: '${typeName}'`);
 }
-/** Follow refersTo links to resolve a RefIdent to a struct and compute its layout. */
-function resolveStructInfo(ident, conditions) {
-	const decl = ident.refersTo;
-	if (decl?.kind !== "decl") return void 0;
-	const elem = decl.declElem;
-	if (elem?.kind !== "struct") return void 0;
-	const inner = structLayout(elem, conditions);
+/** Resolve a struct typeRef via refersTo (bound) or struct registry (unbound). */
+function resolveStructInfo(ident, conditions, structs, fallbackName) {
+	const fromRefersTo = ident && structFromRefersTo(ident);
+	const name = ident?.originalName ?? fallbackName;
+	const fromRegistry = name ? structs?.get(name) : void 0;
+	const elem = fromRefersTo ?? fromRegistry;
+	if (!elem) return void 0;
+	const inner = structLayout(elem, conditions, structs);
 	return {
 		alignment: inner.alignment,
 		size: inner.bufferSize
 	};
 }
-function scalar(size) {
-	return {
-		alignment: size,
-		size
-	};
-}
-function vec(n, scalarSize) {
-	return {
-		alignment: (n === 3 ? 4 : n) * scalarSize,
-		size: n * scalarSize
-	};
-}
-function mat(cols, rows, scalarSize) {
-	const col = vec(rows, scalarSize);
-	const colStride = roundUp(col.alignment, col.size);
-	return {
-		alignment: col.alignment,
-		size: cols * colStride
-	};
+/** Walk a bound RefIdent's refersTo chain to find its StructElem, if any. */
+function structFromRefersTo(ident) {
+	const decl = ident.refersTo;
+	if (decl?.kind !== "decl") return void 0;
+	const elem = decl.declElem;
+	if (elem?.kind !== "struct") return void 0;
+	return elem;
 }
 //#endregion
 //#region ../wesl-reflect/src/UniformAnnotations.ts
@@ -5559,11 +5140,540 @@ function classifyMember(m, base) {
 	} };
 }
 //#endregion
-//#region ../wesl-gpu/src/UniformsVirtualLib.ts
-/** Default env:: module when no @uniforms struct is declared. */
-const defaultEnvSource = `
-  struct Uniforms {
-    resolution: vec2f,
+//#region ../wesl-reflect/src/TypeShape.ts
+const scalarTable = {
+	f32: "f32",
+	i32: "i32",
+	u32: "u32",
+	f16: "f16",
+	bool: "bool"
+};
+const vecTable = {
+	vec2f: {
+		n: 2,
+		component: "f32"
+	},
+	vec3f: {
+		n: 3,
+		component: "f32"
+	},
+	vec4f: {
+		n: 4,
+		component: "f32"
+	},
+	vec2i: {
+		n: 2,
+		component: "i32"
+	},
+	vec3i: {
+		n: 3,
+		component: "i32"
+	},
+	vec4i: {
+		n: 4,
+		component: "i32"
+	},
+	vec2u: {
+		n: 2,
+		component: "u32"
+	},
+	vec3u: {
+		n: 3,
+		component: "u32"
+	},
+	vec4u: {
+		n: 4,
+		component: "u32"
+	},
+	vec2h: {
+		n: 2,
+		component: "f16"
+	},
+	vec3h: {
+		n: 3,
+		component: "f16"
+	},
+	vec4h: {
+		n: 4,
+		component: "f16"
+	}
+};
+const matTable = {
+	mat2x2f: {
+		cols: 2,
+		rows: 2,
+		component: "f32"
+	},
+	mat3x2f: {
+		cols: 3,
+		rows: 2,
+		component: "f32"
+	},
+	mat4x2f: {
+		cols: 4,
+		rows: 2,
+		component: "f32"
+	},
+	mat2x3f: {
+		cols: 2,
+		rows: 3,
+		component: "f32"
+	},
+	mat3x3f: {
+		cols: 3,
+		rows: 3,
+		component: "f32"
+	},
+	mat4x3f: {
+		cols: 4,
+		rows: 3,
+		component: "f32"
+	},
+	mat2x4f: {
+		cols: 2,
+		rows: 4,
+		component: "f32"
+	},
+	mat3x4f: {
+		cols: 3,
+		rows: 4,
+		component: "f32"
+	},
+	mat4x4f: {
+		cols: 4,
+		rows: 4,
+		component: "f32"
+	},
+	mat2x2h: {
+		cols: 2,
+		rows: 2,
+		component: "f16"
+	},
+	mat3x2h: {
+		cols: 3,
+		rows: 2,
+		component: "f16"
+	},
+	mat4x2h: {
+		cols: 4,
+		rows: 2,
+		component: "f16"
+	},
+	mat2x3h: {
+		cols: 2,
+		rows: 3,
+		component: "f16"
+	},
+	mat3x3h: {
+		cols: 3,
+		rows: 3,
+		component: "f16"
+	},
+	mat4x3h: {
+		cols: 4,
+		rows: 3,
+		component: "f16"
+	},
+	mat2x4h: {
+		cols: 2,
+		rows: 4,
+		component: "f16"
+	},
+	mat3x4h: {
+		cols: 3,
+		rows: 4,
+		component: "f16"
+	},
+	mat4x4h: {
+		cols: 4,
+		rows: 4,
+		component: "f16"
+	}
+};
+const addressSpaces = [
+	"function",
+	"private",
+	"workgroup",
+	"uniform",
+	"storage",
+	"handle"
+];
+/** Thrown by varReflection / typeShape when a type cannot be reflected. */
+var TypeShapeError = class extends Error {
+	varName;
+	constructor(message, varName) {
+		super(message);
+		this.name = "TypeShapeError";
+		this.varName = varName;
+	}
+};
+/** Reflect a top-level `var` declaration: type tree, address space, access mode, and bindings. */
+function varReflection(ast, varName) {
+	const gvar = findGlobalVar(ast, varName);
+	if (!gvar) throw new TypeShapeError(`var '${varName}' not found`, varName);
+	const typeRef = gvar.name.typeRef;
+	if (!typeRef) throw new TypeShapeError(`var '${varName}' has no type`, varName);
+	const type = typeShape(typeRef, buildStructRegistry(ast), varName);
+	const declText = ast.srcModule.src.slice(gvar.start, gvar.end);
+	return {
+		varName,
+		addressSpace: parseAddressSpace(declText),
+		accessMode: parseAccessMode(declText),
+		group: numericAttr(gvar, "group"),
+		binding: numericAttr(gvar, "binding"),
+		type,
+		byteSize: type.size
+	};
+}
+/** Build a TypeShape from a TypeRefElem, with layout (size/alignment/offsets) populated. */
+function typeShape(typeRef, structs, varName) {
+	const name = originalTypeName(typeRef);
+	const primitive = primitiveShape(name);
+	if (primitive) return primitive;
+	if (name === "atomic") return atomicShape(typeRef, varName);
+	if (name === "array") return arrayShape(typeRef, structs, varName);
+	const struct = structs.get(name);
+	if (struct) return structShape(struct, structs, varName);
+	throw new TypeShapeError(`unsupported type '${name}'`, varName);
+}
+/** Byte size of a WGSL scalar: f16 is 2, all others (f32/i32/u32/bool) are 4. */
+function scalarSize(s) {
+	return s === "f16" ? 2 : 4;
+}
+function findGlobalVar(ast, varName) {
+	return ast.moduleElem.contents.find((e) => e.kind === "gvar" && e.name.decl.ident.originalName === varName);
+}
+function parseAddressSpace(declText) {
+	const m = declText.match(/var\s*<\s*([a-z_]+)/);
+	if (!m) return void 0;
+	const space = m[1];
+	return addressSpaces.includes(space) ? space : void 0;
+}
+function parseAccessMode(declText) {
+	if (/\bread_write\b/.test(declText)) return "read_write";
+	if (/var\s*<\s*storage\s*,\s*read\b/.test(declText)) return "read";
+}
+function numericAttr(gvar, name) {
+	const attr = findAnnotation(gvar, name);
+	if (!attr) return void 0;
+	const [n] = numericParams(attr);
+	return Number.isFinite(n) ? n : void 0;
+}
+/** Look up a scalar/vec/mat shape by WGSL primitive name. */
+function primitiveShape(name) {
+	const scalar = scalarTable[name];
+	if (scalar) return {
+		kind: "scalar",
+		type: scalar,
+		...scalarLayout(scalar)
+	};
+	const vec = vecTable[name];
+	if (vec) return {
+		kind: "vec",
+		...vec,
+		...vecLayout(vec.n, vec.component)
+	};
+	const mat = matTable[name];
+	if (mat) return {
+		kind: "mat",
+		...mat,
+		...matLayout(mat)
+	};
+}
+function atomicShape(typeRef, varName) {
+	const param = typeRef.templateParams?.[0];
+	const inner = param && elemTypeName(param);
+	if (inner !== "i32" && inner !== "u32") throw new TypeShapeError(`atomic must wrap i32 or u32`, varName);
+	return {
+		kind: "atomic",
+		component: inner,
+		...scalarLayout(inner)
+	};
+}
+function arrayShape(typeRef, structs, varName) {
+	const params = typeRef.templateParams;
+	if (!params?.length) throw new TypeShapeError(`array missing element type`, varName);
+	const elemRef = params[0];
+	const elem = elemRef.kind === "type" ? typeShape(elemRef, structs, varName) : namedTypeShape(elemTypeName(elemRef), structs, varName);
+	const stride = roundUp(elem.alignment, elem.size);
+	const lenExpr = params[1];
+	if (lenExpr === void 0) return {
+		kind: "array",
+		elem,
+		length: "runtime",
+		stride,
+		size: 0,
+		alignment: elem.alignment
+	};
+	const length = lenExpr.value !== void 0 ? Number(lenExpr.value) : NaN;
+	if (!Number.isFinite(length) || length <= 0) throw new TypeShapeError(`array length must be a positive literal`, varName);
+	return {
+		kind: "array",
+		elem,
+		length,
+		stride,
+		size: length * stride,
+		alignment: elem.alignment
+	};
+}
+function structShape(struct, structs, varName) {
+	let offset = 0;
+	let alignment = 1;
+	const fields = [];
+	for (const m of struct.members) {
+		const mShape = typeShape(m.typeRef, structs, varName);
+		let fieldAlign = mShape.alignment;
+		let fieldSize = mShape.size;
+		const alignAttr = findAnnotation(m, "align");
+		if (alignAttr) {
+			const [n] = numericParams(alignAttr);
+			if (n) fieldAlign = Math.max(n, fieldAlign);
+		}
+		const sizeAttr = findAnnotation(m, "size");
+		if (sizeAttr) {
+			const [n] = numericParams(sizeAttr);
+			if (n) fieldSize = n;
+		}
+		alignment = Math.max(alignment, fieldAlign);
+		offset = roundUp(fieldAlign, offset);
+		fields.push({
+			name: m.name.name,
+			offset,
+			size: fieldSize,
+			type: mShape
+		});
+		offset += fieldSize;
+	}
+	return {
+		kind: "struct",
+		name: struct.name.ident.originalName,
+		fields,
+		alignment,
+		size: roundUp(alignment, offset)
+	};
+}
+function scalarLayout(s) {
+	const n = scalarSize(s);
+	return {
+		size: n,
+		alignment: n
+	};
+}
+/** vecN<T> layout: size=N*S, align=N*S (vec3 pads alignment to 4*S). */
+function vecLayout(n, component) {
+	const s = scalarSize(component);
+	const alignN = n === 3 ? 4 : n;
+	return {
+		size: n * s,
+		alignment: alignN * s
+	};
+}
+/** matCxR<T>: C columns of vec<R,T>, column stride = roundUp(colAlign, colSize). */
+function matLayout(m) {
+	const col = vecLayout(m.rows, m.component);
+	const colStride = roundUp(col.alignment, col.size);
+	return {
+		size: m.cols * colStride,
+		alignment: col.alignment
+	};
+}
+/** Pull a type name out of a template parameter (TypeRef or RefIdent). */
+function elemTypeName(param) {
+	if (param.kind === "type") return originalTypeName(param);
+	if (param.kind === "ref") return param.ident?.originalName;
+}
+/** Resolve an array template-param identifier (e.g. `Particle` in `array<Particle, 4>`). */
+function namedTypeShape(name, structs, varName) {
+	if (!name) throw new TypeShapeError(`cannot resolve array element`, varName);
+	const primitive = primitiveShape(name);
+	if (primitive) return primitive;
+	const struct = structs.get(name);
+	if (struct) return structShape(struct, structs, varName);
+	throw new TypeShapeError(`unsupported type '${name}'`, varName);
+}
+//#endregion
+//#region ../wesl-reflect/src/AnnotatedResources.ts
+/** Find all @buffer, @test_texture, @sampler annotated global vars in a parsed WESL module. */
+function findAnnotatedResources(ast) {
+	const src = ast.srcModule.src;
+	const structs = buildStructRegistry(ast);
+	return ast.moduleElem.contents.filter((e) => e.kind === "gvar").flatMap((gvar) => discoverResource(gvar, src, structs));
+}
+/** Linker plugin that decorates @buffer/@test_texture/@sampler globals with
+*  @group(0) @binding(N) so they emit as bindable WGSL vars.
+*  The wgsl-test annotations themselves drop at emit (non-WGSL attributes).
+*  Throws if a target var already carries user-supplied @group/@binding. */
+function annotatedResourcesPlugin(resources, startBinding = 1) {
+	const bindingByName = new Map(resources.map((r, i) => [r.varName, startBinding + i]));
+	return { transform: (ast) => {
+		for (const elem of ast.moduleElem.contents) {
+			if (elem.kind !== "gvar") continue;
+			const varName = elem.name.decl.ident.originalName;
+			const binding = bindingByName.get(varName);
+			if (binding === void 0) continue;
+			assertNoUserBinding(elem, varName);
+			const anchor = annotationAnchor(elem);
+			const groupAttr = makeStandardAttr("group", 0, anchor);
+			const bindingAttr = makeStandardAttr("binding", binding, anchor);
+			elem.attributes = [
+				...elem.attributes ?? [],
+				groupAttr,
+				bindingAttr
+			];
+			elem.contents = [
+				groupAttr,
+				bindingAttr,
+				...elem.contents
+			];
+		}
+		return ast;
+	} };
+}
+/** Dispatch on which runtime annotation the gvar carries; returns [] if none. */
+function discoverResource(gvar, src, structs) {
+	if (findAnnotation(gvar, "buffer")) return [discoverBuffer(gvar, src, structs)];
+	const textureAttr = findAnnotation(gvar, "test_texture");
+	if (textureAttr) return [discoverTexture(gvar, textureAttr, src)];
+	const userTextureAttr = findAnnotation(gvar, "texture");
+	if (userTextureAttr) return [discoverUserTexture(gvar, userTextureAttr)];
+	const samplerAttr = findAnnotation(gvar, "sampler");
+	if (samplerAttr) return [discoverSampler(gvar, samplerAttr)];
+	return [];
+}
+/** Throw if the user has already put @group or @binding on an annotated var. */
+function assertNoUserBinding(gvar, varName) {
+	if (findAnnotation(gvar, "group") || findAnnotation(gvar, "binding")) throw new Error(`@buffer/@test_texture/@texture/@sampler on var '${varName}' cannot be combined with user-supplied @group/@binding — the runtime owns the binding for annotated resources.`);
+}
+/** Pick a source position to anchor synthetic attributes on, preferring the
+*  runtime annotation so error maps point to something meaningful. */
+function annotationAnchor(gvar) {
+	for (const name of [
+		"buffer",
+		"test_texture",
+		"texture",
+		"sampler"
+	]) {
+		const attr = gvar.attributes?.find((a) => a.attribute.kind === "@attribute" && a.attribute.name === name);
+		if (attr) return {
+			start: attr.start,
+			end: attr.end
+		};
+	}
+	return {
+		start: gvar.start,
+		end: gvar.start
+	};
+}
+/** Build a synthetic `@name(value)` standard attribute anchored at the given source span. */
+function makeStandardAttr(name, value, anchor) {
+	const { start, end } = anchor;
+	return {
+		kind: "attribute",
+		start,
+		end,
+		contents: [],
+		attribute: {
+			kind: "@attribute",
+			name,
+			params: [{
+				kind: "expression",
+				start,
+				end,
+				contents: [{
+					kind: "literal",
+					value: String(value),
+					start,
+					end
+				}]
+			}]
+		}
+	};
+}
+function discoverBuffer(gvar, src, structs) {
+	const varName = gvar.name.decl.ident.originalName;
+	const access = src.slice(gvar.start, gvar.end).includes("read_write") ? "read_write" : "read";
+	const { typeRef } = gvar.name;
+	return {
+		kind: "buffer",
+		varName,
+		access,
+		byteSize: typeRef ? typeShape(typeRef, structs, varName).size : 0
+	};
+}
+function discoverTexture(gvar, attr, src) {
+	const varName = gvar.name.decl.ident.originalName;
+	const params = attr.params ?? [];
+	return {
+		kind: "test_texture",
+		varName,
+		source: firstRefName(params[0]) ?? "",
+		params: params.slice(1).map((p) => Number.parseInt(src.slice(p.start, p.end).trim(), 10) || 0),
+		typeName: gvar.name.typeRef ? originalTypeName(gvar.name.typeRef) : ""
+	};
+}
+function discoverUserTexture(gvar, attr) {
+	return {
+		kind: "texture",
+		varName: gvar.name.decl.ident.originalName,
+		source: firstRefName(attr.params?.[0]) ?? "",
+		typeName: gvar.name.typeRef ? originalTypeName(gvar.name.typeRef) : ""
+	};
+}
+function discoverSampler(gvar, attr) {
+	return {
+		kind: "sampler",
+		varName: gvar.name.decl.ident.originalName,
+		filter: (firstRefName(attr.params?.[0]) ?? "linear") === "nearest" ? "nearest" : "linear"
+	};
+}
+/** Extract the originalName of the first `ref` expression in an attribute parameter. */
+function firstRefName(param) {
+	const ref = param?.contents.find((c) => c.kind === "ref");
+	return ref?.kind === "ref" ? ref.ident.originalName : void 0;
+}
+//#endregion
+//#region ../wesl-reflect/src/EntryPoints.ts
+const stageNames = [
+	"compute",
+	"fragment",
+	"vertex"
+];
+/** Classify all functions in a parsed WESL module by entry-point stage. */
+function classifyEntryPoints(ast) {
+	return ast.moduleElem.contents.filter((e) => e.kind === "fn").flatMap((fn) => entryPointFor(fn));
+}
+function entryPointFor(fn) {
+	const stage = stageNames.find((s) => findAnnotation(fn, s));
+	if (!stage) return [];
+	const fnName = fn.name.ident.originalName;
+	if (stage !== "compute") return [{
+		fnName,
+		stage
+	}];
+	return [{
+		fnName,
+		stage,
+		workgroupSize: parseWorkgroupSize(fn)
+	}];
+}
+function parseWorkgroupSize(fn) {
+	const attr = findAnnotation(fn, "workgroup_size");
+	if (!attr) return void 0;
+	const nums = numericParams(attr);
+	if (nums.length === 0) return void 0;
+	const [x, y = 1, z = 1] = nums.map((n) => Number.isFinite(n) ? n : 1);
+	return [
+		x,
+		y,
+		z
+	];
+}
+//#endregion
+//#region ../wesl-gpu/src/UniformsVirtualLib.ts
+/** Default env:: module when no @uniforms struct is declared. */
+const defaultEnvSource = `
+  struct Uniforms {
+    resolution: vec2f,
     time: f32,
   }
   @group(0) @binding(0) var<uniform> u: Uniforms;
@@ -5601,34 +5711,18 @@ function findUniformsStruct(src, modulePath) {
 	}).moduleElem.contents.filter((e) => e.kind === "struct").find(isUniformsStruct);
 }
 //#endregion
-//#region ../wesl-gpu/src/FragmentPipeline.ts
-/** Combined: link WESL source and create pipeline in one step. */
-async function linkAndCreatePipeline(params) {
-	const { device, format, layout } = params;
-	const { module } = await linkFragmentShader(params);
-	return createFragmentPipeline({
-		device,
-		module,
-		format,
-		layout
-	});
-}
-/**
-* Link a WESL/WGSL fragment shader to a shader module.
-* Adds:
-* - vertex shader that covers the viewport with a fullscreen triangle
-* - a virtual module containing a std uniform buffer (for size, etc.)
-*/
-async function linkFragmentShader(params) {
-	const { fragmentSource, conditions, constants, packageName, config } = params;
+//#region ../wesl-gpu/src/LinkWeslModule.ts
+/** Build the resolver chain, scan @uniforms, link, and compile the shader module.
+*  Shared by `linkFragmentShader` and `linkComputeShader`. */
+async function linkWeslModule(params) {
+	const { rootSource, scanSource, conditions, constants } = params;
 	const { device, resolver, libs = [], rootModuleName = "main" } = params;
-	const { weslSrc, virtualLibs } = params;
-	const fullSource = `${fragmentSource}\n\n${fullscreenTriangleVertex}`;
-	const resolvers = [new RecordResolver({ [rootModuleName]: fullSource }, { packageName })];
+	const { packageName, config, weslSrc, virtualLibs } = params;
+	const resolvers = [new RecordResolver({ [rootModuleName]: rootSource }, { packageName })];
 	if (weslSrc) resolvers.push(new RecordResolver(weslSrc, { packageName }));
 	let finalResolver = resolvers.length === 1 ? resolvers[0] : new CompositeResolver(resolvers);
 	if (resolver) finalResolver = new CompositeResolver([finalResolver, resolver]);
-	const scan = scanUniforms(fragmentSource, `${packageName ?? "package"}::${rootModuleName}`);
+	const scan = scanUniforms(scanSource, `${packageName ?? "package"}::${rootModuleName}`);
 	const mergedVirtualLibs = {
 		...scan.virtualLibs,
 		...virtualLibs
@@ -5647,6 +5741,156 @@ async function linkFragmentShader(params) {
 		layout: scan.layout
 	};
 }
+//#endregion
+//#region ../wesl-gpu/src/ComputePipeline.ts
+/** Link a WESL/WGSL compute shader into a GPU shader module.
+*  Mirrors `linkFragmentShader` without the synthetic vertex prelude. */
+async function linkComputeShader(params) {
+	const { computeSource } = params;
+	return linkWeslModule({
+		...params,
+		rootSource: computeSource,
+		scanSource: computeSource
+	});
+}
+/** Dispatch a compute shader and read back named storage buffers.
+*  Defaults to a (1,1,1) dispatch; override via `dispatchWorkgroups`. */
+async function runCompute(p) {
+	return withErrorScopes(p.device, () => dispatchAndReadback(p));
+}
+/** Clear each buffer to zeros so re-runs / re-tests see deterministic initial state. */
+function clearBuffers(device, buffers) {
+	const list = [...buffers];
+	if (list.length === 0) return;
+	const encoder = device.createCommandEncoder({ label: "clearBuffers" });
+	for (const buffer of list) encoder.clearBuffer(buffer);
+	device.queue.submit([encoder.finish()]);
+}
+/** Build the pipeline, dispatch, copy each readBuffer to a MAP_READ staging
+*  buffer, and return the mapped contents. */
+async function dispatchAndReadback(p) {
+	const { device, module, entryPoint, bindGroup, pipelineLayout } = p;
+	const dispatch = p.dispatchWorkgroups ?? 1;
+	const pipeline = device.createComputePipeline({
+		layout: pipelineLayout,
+		compute: {
+			module,
+			entryPoint
+		}
+	});
+	const stagingBuffers = /* @__PURE__ */ new Map();
+	for (const [name, src] of p.readBuffers) stagingBuffers.set(name, createStagingBuffer(device, src.size, name));
+	const encoder = device.createCommandEncoder();
+	const pass = encoder.beginComputePass();
+	pass.setPipeline(pipeline);
+	pass.setBindGroup(0, bindGroup);
+	if (typeof dispatch === "number") pass.dispatchWorkgroups(dispatch);
+	else pass.dispatchWorkgroups(...dispatch);
+	pass.end();
+	for (const [name, src] of p.readBuffers) {
+		const dst = stagingBuffers.get(name);
+		encoder.copyBufferToBuffer(src, 0, dst, 0, src.size);
+	}
+	device.queue.submit([encoder.finish()]);
+	const readbacks = /* @__PURE__ */ new Map();
+	for (const [name, staging] of stagingBuffers) {
+		await staging.mapAsync(GPUMapMode.READ);
+		readbacks.set(name, staging.getMappedRange().slice(0));
+		staging.unmap();
+		staging.destroy();
+	}
+	return { readbacks };
+}
+/** Allocate a MAP_READ + COPY_DST buffer for compute readback. */
+function createStagingBuffer(device, size, name) {
+	return device.createBuffer({
+		label: `compute-readback-${name}`,
+		size,
+		usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
+	});
+}
+//#endregion
+//#region ../wesl-gpu/src/DeviceCache.ts
+/**
+* WeakMap cache for GPUDevice-based caching
+*
+* GPUDevices are weakly held to avoid memory leaks.
+*/
+var DeviceCache = class {
+	cache = /* @__PURE__ */ new WeakMap();
+	get(device, key) {
+		return this.cache.get(device)?.get(key);
+	}
+	set(device, key, value) {
+		let deviceCache = this.cache.get(device);
+		if (!deviceCache) {
+			deviceCache = /* @__PURE__ */ new Map();
+			this.cache.set(device, deviceCache);
+		}
+		deviceCache.set(key, value);
+	}
+};
+new DeviceCache();
+const samplerCache = new DeviceCache();
+/** Create sampler. Default: linear filtering with clamp-to-edge. Internally cached. */
+function createSampler(device, options) {
+	const { addressMode = "clamp-to-edge", filterMode = "linear" } = options ?? {};
+	const cacheKey = `${addressMode}:${filterMode}`;
+	const cached = samplerCache.get(device, cacheKey);
+	if (cached) return cached;
+	const sampler = device.createSampler({
+		addressModeU: addressMode,
+		addressModeV: addressMode,
+		magFilter: filterMode,
+		minFilter: filterMode
+	});
+	samplerCache.set(device, cacheKey, sampler);
+	return sampler;
+}
+//#endregion
+//#region ../wesl-gpu/src/FullscreenVertex.ts
+/** Fullscreen triangle vertex shader that covers viewport with 3 vertices, no vertex buffer needed */
+const fullscreenTriangleVertex = `
+  @vertex
+  fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
+    // Covers viewport with 3 vertices, no vertex buffer needed
+    var pos: vec2f;
+    if (idx == 0u) {
+      pos = vec2f(-1.0, -1.0);
+    } else if (idx == 1u) {
+      pos = vec2f(3.0, -1.0);
+    } else {
+      pos = vec2f(-1.0, 3.0);
+    }
+    return vec4f(pos, 0.0, 1.0);
+  }`;
+//#endregion
+//#region ../wesl-gpu/src/FragmentPipeline.ts
+/** Combined: link WESL source and create pipeline in one step. */
+async function linkAndCreatePipeline(params) {
+	const { device, format, layout } = params;
+	const { module } = await linkFragmentShader(params);
+	return createFragmentPipeline({
+		device,
+		module,
+		format,
+		layout
+	});
+}
+/**
+* Link a WESL/WGSL fragment shader to a shader module.
+* Adds:
+* - vertex shader that covers the viewport with a fullscreen triangle
+* - a virtual module containing a std uniform buffer (for size, etc.)
+*/
+async function linkFragmentShader(params) {
+	const { fragmentSource } = params;
+	return linkWeslModule({
+		...params,
+		rootSource: `${fragmentSource}\n\n${fullscreenTriangleVertex}`,
+		scanSource: fragmentSource
+	});
+}
 /** Create fullscreen fragment render pipeline from a shader module. */
 function createFragmentPipeline(params) {
 	const { device, module, format, layout = "auto" } = params;
@@ -5683,6 +5927,152 @@ function renderFrame(params) {
 	pass.end();
 	device.queue.submit([encoder.finish()]);
 }
+//#endregion
+//#region ../wesl-gpu/src/ResourceSetup.ts
+/** Host-side resource failure (missing texture source, unsupported texture dim,
+*  test-only annotation in a non-test runtime). Distinguishes asset/configuration
+*  problems from shader compile/link errors. */
+var ResourceLoadError = class extends Error {
+	resourceSource;
+	constructor(message, resourceSource) {
+		super(message);
+		this.name = "ResourceLoadError";
+		this.resourceSource = resourceSource;
+	}
+};
+/** Create GPU resources for @buffer/@sampler/@texture vars. */
+async function createBindResources(p) {
+	const { device, resources, visibility, textureHandler, startBinding = 1 } = p;
+	const { minBufferBytes = 4, prefill } = p;
+	const entries = [];
+	const layoutEntries = [];
+	const buffers = [];
+	const textures = [];
+	for (const [i, resource] of resources.entries()) {
+		const binding = startBinding + i;
+		if (resource.kind === "buffer") {
+			const made = bufferEntry(device, resource, binding, visibility, {
+				minBufferBytes,
+				prefill
+			});
+			buffers.push(made.buffer);
+			entries.push(made.entry);
+			layoutEntries.push(made.layout);
+		} else if (resource.kind === "sampler") {
+			const made = samplerEntry(device, resource, binding, visibility);
+			entries.push(made.entry);
+			layoutEntries.push(made.layout);
+		} else {
+			const t = await textureHandler(device, resource);
+			const made = textureEntry(binding, visibility, t);
+			textures.push(t.texture);
+			entries.push(made.entry);
+			layoutEntries.push(made.layout);
+		}
+	}
+	return {
+		entries,
+		layoutEntries,
+		buffers,
+		textures
+	};
+}
+/** Allocate a storage buffer for an @buffer var. */
+function bufferEntry(device, r, binding, visibility, opts) {
+	const { STORAGE, COPY_SRC, COPY_DST } = GPUBufferUsage;
+	const { minBufferBytes, prefill } = opts;
+	const size = Math.max(r.byteSize, minBufferBytes);
+	const buffer = device.createBuffer({
+		label: `annotated-buffer-${r.varName}`,
+		size,
+		usage: STORAGE | COPY_SRC | COPY_DST,
+		mappedAtCreation: prefill !== void 0
+	});
+	if (prefill !== void 0) {
+		new Float32Array(buffer.getMappedRange()).fill(prefill);
+		buffer.unmap();
+	}
+	return {
+		buffer,
+		entry: {
+			binding,
+			resource: { buffer }
+		},
+		layout: {
+			binding,
+			visibility,
+			buffer: { type: r.access === "read_write" ? "storage" : "read-only-storage" }
+		}
+	};
+}
+/** Build a filtering sampler for an @sampler var. */
+function samplerEntry(device, r, binding, visibility) {
+	return {
+		entry: {
+			binding,
+			resource: createSampler(device, { filterMode: r.filter })
+		},
+		layout: {
+			binding,
+			visibility,
+			sampler: { type: "filtering" }
+		}
+	};
+}
+/** Wrap a TextureBinding into bind group + layout entries. */
+function textureEntry(binding, visibility, t) {
+	const texture = { sampleType: t.sampleType ?? "float" };
+	return {
+		entry: {
+			binding,
+			resource: t.texture.createView()
+		},
+		layout: {
+			binding,
+			visibility,
+			texture
+		}
+	};
+}
+//#endregion
+//#region ../wesl-gpu/src/PlayResourceSetup.ts
+/** Create GPU resources for @buffer/@sampler/@texture vars in a play context. */
+async function createPlayResources(params) {
+	const { resolveTexture, ...rest } = params;
+	const visibility = rest.visibility ?? GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT;
+	return createBindResources({
+		...rest,
+		visibility,
+		textureHandler
+	});
+	function textureHandler(dev, r) {
+		return loadUserTexture(dev, r, resolveTexture);
+	}
+}
+/** Resolve and upload a host image for an @texture var. */
+async function loadUserTexture(device, r, resolveTexture) {
+	if (r.kind === "test_texture") throw new ResourceLoadError(`@test_texture(${r.source}) is not available at runtime — use @texture(name) with a matching host element instead (var '${r.varName}')`, r.source);
+	if (r.kind !== "texture") throw new Error(`unexpected resource kind for play: ${r.kind}`);
+	if (r.typeName !== "texture_2d") throw new ResourceLoadError(`@texture(${r.source}): only texture_2d<f32> is supported; got '${r.typeName}' on var '${r.varName}'`, r.source);
+	const image = await resolveTexture(r.source);
+	if (!image) throw new ResourceLoadError(`@texture(${r.source}): no source element found for var '${r.varName}' (expected <img data-texture="${r.source}"> or <img id="${r.source}">)`, r.source);
+	const { width, height } = image;
+	const { TEXTURE_BINDING, COPY_DST, RENDER_ATTACHMENT } = GPUTextureUsage;
+	const texture = device.createTexture({
+		label: `annotated-texture-${r.varName}`,
+		format: "rgba8unorm",
+		size: {
+			width,
+			height
+		},
+		usage: TEXTURE_BINDING | COPY_DST | RENDER_ATTACHMENT
+	});
+	device.queue.copyExternalImageToTexture({ source: image }, { texture }, {
+		width,
+		height
+	});
+	return { texture };
+}
 "" + memoize((nesting) => {
 	return " ".repeat(nesting);
 })(23);
@@ -5932,79 +6322,256 @@ function defaultAnnotatedLayout() {
 	};
 }
 //#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({
+//#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,
-		format: presentationFormat,
-		alphaMode
+		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
 	});
-	const bindGroupLayout = device.createBindGroupLayout({ entries: [{
-		binding: 0,
-		visibility: GPUShaderStage.FRAGMENT,
-		buffer: {}
-	}] });
-	const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });
-	const uniformState = createUniformBuffer(device, null);
+	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 {
-		device,
-		canvas,
-		context,
-		presentationFormat,
-		bindGroupLayout,
-		pipelineLayout,
-		uniformState,
-		bindGroup: createBindGroup(device, bindGroupLayout, uniformState),
-		mouse: {
-			pos: [0, 0],
-			delta: [0, 0],
-			button: 0
-		},
-		pipeline: void 0,
-		frameCount: 0
+		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
 	};
 }
-/** Compile WESL fragment shader and create render pipeline.
-*  Recreates the uniform buffer and bind group based on @uniforms metadata. */
-async function createPipeline(state, fragmentSource, options) {
-	const scan = scanUniforms(fragmentSource, `${options?.packageName ?? "package"}::${options?.rootModuleName ?? "main"}`);
-	const { device, bindGroupLayout, presentationFormat, pipelineLayout } = state;
-	state.uniformState.buffer.destroy();
-	state.uniformState = createUniformBuffer(device, scan.layout);
-	state.bindGroup = createBindGroup(device, bindGroupLayout, state.uniformState);
-	device.pushErrorScope("validation");
-	let gpuError;
-	let jsError;
-	try {
-		state.pipeline = await linkAndCreatePipeline({
-			device,
-			fragmentSource,
-			format: presentationFormat,
-			layout: pipelineLayout,
-			...options
-		});
-	} catch (e) {
-		jsError = e;
-	} finally {
-		gpuError = await device.popErrorScope();
+//#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");
 	}
-	if (jsError || gpuError) {
-		state.pipeline = void 0;
-		throw jsError ?? gpuError;
+	get message() {
+		return this._message;
 	}
-	return scan.layout;
+};
+//#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;
-	doRender(state, playback);
+	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) {
@@ -6018,7 +6585,7 @@ function startRenderLoop(state, playback) {
 		const time = calculateTime(playback);
 		const delta_time = time - lastTime;
 		lastTime = time;
-		const { mouse, device, canvas, context, bindGroup } = state;
+		const { mouse, canvas } = state;
 		const auto = {
 			resolution: [canvas.width, canvas.height],
 			time,
@@ -6029,33 +6596,32 @@ function startRenderLoop(state, playback) {
 			mouse_button: mouse.button
 		};
 		mouse.delta = [0, 0];
-		writeUniforms(device, state.uniformState, auto);
-		const targetView = context.getCurrentTexture().createView();
-		renderFrame({
-			device,
-			pipeline: state.pipeline,
-			bindGroup,
-			targetView
-		});
-		state.frameCount++;
+		submitFrame(state, auto);
 		animationId = requestAnimationFrame(render);
 	}
 	animationId = requestAnimationFrame(render);
 	return () => cancelAnimationFrame(animationId);
 }
-/** Update uniforms and submit one GPU frame (one-shot, e.g. when paused). */
-function doRender(state, playback) {
-	const time = calculateTime(playback);
-	const { mouse, device, canvas, context, bindGroup } = state;
-	const auto = {
-		resolution: [canvas.width, canvas.height],
-		time,
-		delta_time: 0,
-		frame: state.frameCount,
-		mouse_pos: mouse.pos,
-		mouse_delta: [0, 0],
-		mouse_button: mouse.button
-	};
+/** 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({
@@ -6066,10 +6632,153 @@ function doRender(state, playback) {
 	});
 	state.frameCount++;
 }
-function calculateTime(playback) {
-	return ((playback.isPlaying ? performance.now() : playback.startTime + playback.pausedDuration) - playback.startTime) / 1e3;
+//#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 createBindGroup(device, layout, uniformState) {
+function createUniformBindGroup(device, layout, uniformState) {
 	return device.createBindGroup({
 		layout,
 		entries: [{
@@ -6078,6 +6787,186 @@ function createBindGroup(device, layout, uniformState) {
 		}]
 	});
 }
+/** 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. */
@@ -6185,12 +7074,12 @@ function hexToRgb(hex) {
 }
 //#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  bottom: 0;\n  right: 0;\n  width: 16px;\n  height: 16px;\n  cursor: nwse-resize;\n  z-index: 2;\n  touch-action: none;\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  bottom: 3px;\n  right: 3px;\n  width: 8px;\n  height: 8px;\n  border-right: 2px solid var(--controls-bg);\n  border-bottom: 2px solid var(--controls-bg);\n}\n\n:host([resizable]:hover) .resize-handle {\n  display: block;\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/* 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";
+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.  */
+/** <wgsl-play> web component for rendering WESL/WGSL fragment shaders. */
 var WgslPlay = class extends HTMLElement {
 	static observedAttributes = [
 		"src",
@@ -6208,11 +7097,14 @@ var WgslPlay = class extends HTMLElement {
 		"pixel-ratio"
 	];
 	canvas;
+	resultsPanel;
 	errorOverlay;
 	controls;
 	settings;
 	resizeObserver;
 	stopRenderLoop;
+	_currentMode = "fragment";
+	_rerunPending = false;
 	renderState;
 	pendingUniforms = /* @__PURE__ */ new Map();
 	playback = {
@@ -6235,7 +7127,8 @@ var WgslPlay = class extends HTMLElement {
 	_mediaQuery = null;
 	_onFullscreenChange = () => this.controls.setFullscreen(!!document.fullscreenElement);
 	_pointerCleanup;
-	_resizeCleanup;
+	_resizeCleanups = [];
+	_childObserver;
 	/** Get config overrides from element attributes. */
 	getConfigOverrides() {
 		const shaderRoot = this.getAttribute("shader-root");
@@ -6248,24 +7141,29 @@ var WgslPlay = class extends HTMLElement {
 		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));
-		this.controls = new PlaybackControls(shadow, () => this.play(), () => this.pause(), () => this.rewind(), () => this.toggleFullscreen());
+		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;
-			for (const entry of entries) {
-				const { width, height } = entry.contentRect;
-				if (width > 0 && height > 0) {
-					const ratio = this.pixelRatio;
-					this.canvas.width = Math.floor(width * ratio);
-					this.canvas.height = Math.floor(height * ratio);
-				}
+			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);
 			}
 		});
-		this.setupResizeHandle(shadow.querySelector(".resize-handle"));
+		const handles = shadow.querySelectorAll(".resize-handle");
+		for (const h of handles) this.setupResizeHandle(h, h.classList.contains("bl") ? "bl" : "br");
 	}
 	connectedCallback() {
-		this.resizeObserver.observe(this);
 		const themeAttr = this.getAttribute("theme");
 		if (themeAttr) this._theme = themeAttr;
 		this._mediaQuery = matchMedia("(prefers-color-scheme: dark)");
@@ -6277,33 +7175,50 @@ var WgslPlay = class extends HTMLElement {
 			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?.();
-		this._resizeCleanup?.();
+		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":
-				newValue !== null ? this.controls.hide() : this.controls.show();
+				if (newValue !== null) this.controls.hide();
+				else this.controls.show();
 				return;
 			case "no-settings":
-				newValue !== null ? this.settings.hide() : this.settings.show();
+				if (newValue !== null) this.settings.hide();
+				else this.settings.show();
 				return;
 			case "theme":
 				this._theme = newValue || "auto";
 				this.updateTheme();
 				return;
 			case "autoplay":
-				newValue === "false" ? this.pause() : this.play();
+				if (newValue === "false") this.pause();
+				else this.play();
 				return;
 			case "fetch-libs":
 				this._fetchLibs = newValue !== "false";
@@ -6316,8 +7231,6 @@ var WgslPlay = class extends HTMLElement {
 				return;
 			case "width":
 			case "height":
-				this.updateCanvasSize();
-				return;
 			case "pixel-ratio":
 				this.updateCanvasSize();
 				return;
@@ -6370,8 +7283,7 @@ var WgslPlay = class extends HTMLElement {
 	}
 	set fetchLibs(value) {
 		this._fetchLibs = value;
-		if (value) this.removeAttribute("fetch-libs");
-		else this.setAttribute("fetch-libs", "false");
+		this.setBoolAttr("fetch-libs", value);
 	}
 	/** Whether to fetch local .wesl source files via HTTP (default: true). */
 	get fetchSources() {
@@ -6379,16 +7291,15 @@ var WgslPlay = class extends HTMLElement {
 	}
 	set fetchSources(value) {
 		this._fetchSources = value;
-		if (value) this.removeAttribute("fetch-sources");
-		else this.setAttribute("fetch-sources", "false");
+		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) {
-		if (value !== false && value !== "false") this.removeAttribute("autoplay");
-		else this.setAttribute("autoplay", "false");
+		const enabled = value !== false && value !== "false";
+		this.setBoolAttr("autoplay", enabled);
 	}
 	/** Scale factor from CSS pixels to canvas pixels (default: devicePixelRatio). */
 	get pixelRatio() {
@@ -6430,9 +7341,7 @@ var WgslPlay = class extends HTMLElement {
 	pause() {
 		if (!this.playback.isPlaying) return;
 		this.playback.pausedDuration = performance.now() - this.playback.startTime;
-		this.stopRenderLoop?.();
-		this.setPlaying(false);
-		if (this.renderState) renderOnce(this.renderState, this.playback);
+		this.stopAndPresent();
 	}
 	setPlaying(playing) {
 		this.playback.isPlaying = playing;
@@ -6440,10 +7349,37 @@ var WgslPlay = class extends HTMLElement {
 		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);
@@ -6463,16 +7399,17 @@ var WgslPlay = class extends HTMLElement {
 		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 map = this.renderState?.uniformState.controlValues;
-		if (!map) return;
-		for (const [k, v] of this.pendingUniforms) map.set(k, v);
+		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 map = this.renderState?.uniformState.controlValues;
-		if (!map) return {};
-		return Object.fromEntries(map);
+		const controlValues = this.renderState?.uniformState.controlValues;
+		if (!controlValues) return {};
+		return Object.fromEntries(controlValues);
 	}
 	/** Toggle fullscreen on this element. */
 	toggleFullscreen() {
@@ -6508,52 +7445,65 @@ var WgslPlay = class extends HTMLElement {
 		};
 	}
 	/** Drag-to-resize via a custom handle (works on touch + mouse). */
-	setupResizeHandle(handle) {
+	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) => {
-			this.style.width = `${startW + e.clientX - startX}px`;
-			this.style.height = `${startH + e.clientY - startY}px`;
+			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._resizeCleanup = () => {
+		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 = Number(w);
-			this.canvas.height = Number(h);
-		} else {
-			const rect = this.getBoundingClientRect();
-			if (rect.width > 0 && rect.height > 0) {
-				const ratio = this.pixelRatio;
-				this.canvas.width = Math.floor(rect.width * ratio);
-				this.canvas.height = Math.floor(rect.height * ratio);
-			}
+			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);
@@ -6564,10 +7514,12 @@ var WgslPlay = class extends HTMLElement {
 		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);
@@ -6647,8 +7599,8 @@ var WgslPlay = class extends HTMLElement {
 			}
 			try {
 				this.errorOverlay.hide();
-				const layout = await this.buildPipeline(mainSource);
-				if (!this._dirty) this.applyBuild(layout);
+				const result = await this.buildPipeline(mainSource);
+				if (!this._dirty) this.applyBuild(result);
 			} catch (error) {
 				if (!this._dirty) this.handleCompileError(error);
 			}
@@ -6670,30 +7622,108 @@ var WgslPlay = class extends HTMLElement {
 			};
 			this._libs = dedupLibs(this._libs, libs);
 		}
-		return createPipeline(this.renderState, mainSource, {
+		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(layout) {
+	applyBuild(result) {
 		this.flushPendingUniforms();
 		const controls = this.renderState.uniformState.layout.controls;
 		this.settings.setControls(controls);
-		if (!this.playback.isPlaying) renderOnce(this.renderState, this.playback);
+		this.applyMode(result);
 		this.dispatchEvent(new CustomEvent("compile-success"));
-		this.dispatchEvent(new CustomEvent("uniforms-layout", { detail: layout }));
+		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. */
@@ -6701,37 +7731,30 @@ var WgslPlay = class extends HTMLElement {
 		const loc = error?.weslLocation;
 		if (loc) {
 			const message = error?.message ?? "";
+			const { file, line, column, length, offset } = loc;
 			return [{
-				file: loc.file,
-				line: loc.line,
-				column: loc.column - 1,
-				length: loc.length,
+				file,
+				line,
+				column: column - 1,
+				length,
+				offset,
 				severity: "error",
 				message
 			}];
 		}
 		const msgs = error?.compilationInfo?.messages;
-		if (msgs) {
-			const toSeverity = (t) => t === "warning" ? "warning" : t === "info" ? "info" : "error";
-			return msgs.map((m) => ({
-				file: m.module?.url,
-				line: m.lineNum,
-				column: m.linePos - 1,
-				length: m.length,
-				severity: toSeverity(m.type),
-				message: m.message
-			}));
-		}
+		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 getTemplate() {
-	if (!template) {
-		template = document.createElement("template");
-		template.innerHTML = `<canvas part="canvas"></canvas><div class="resize-handle"></div>`;
-	}
-	return template;
-}
 function getStyles() {
 	if (!styles) {
 		styles = new CSSStyleSheet();
@@ -6739,7 +7762,15 @@ function getStyles() {
 	}
 	return styles;
 }
-/** Absorb instance properties set before custom element upgrade. */
+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];
@@ -6747,19 +7778,68 @@ function upgradeProperty(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];
 }
-/** 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);
+/** 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
 //#region src/index.ts
 if (typeof customElements !== "undefined" && !customElements.get("wgsl-play")) customElements.define("wgsl-play", WgslPlay);
 //#endregion
-export { FetchingResolver, WgslPlay, bundleRegistry, clearHttpCache, defaults, fetchBundleFilesFromNpm, fetchDependencies, fetchPackagesByName, fetchPackagesFromHttp, getConfig, hydrateBundleRegistry, loadBundlesFromFiles, loadBundlesFromTgz, loadBundlesWithPackageName, loadShaderFromUrl, resetConfig };
+export { FetchingResolver, ResourceLoadError, WgslPlay, bundleRegistry, clearHttpCache, defaults, fetchBundleFilesFromNpm, fetchDependencies, fetchPackagesByName, fetchPackagesFromHttp, getConfig, hydrateBundleRegistry, loadBundlesFromFiles, loadBundlesFromTgz, loadBundlesWithPackageName, loadShaderFromUrl, resetConfig };