wgsl-play 0.0.32 → 0.0.34

package/README.md

@@ -18,12 +18,10 @@ That's it. The component auto-fetches dependencies and starts animating.
 accepts **fragment shaders**. Write a single `@fragment` function. 
 WESL extensions are supported (imports, conditional compilation).
 
-Standard uniforms are provided at binding 0:
+Standard uniforms are available via `env::u`:
 
 ```wgsl
-import test::Uniforms;
-
-@group(0) @binding(0) var<uniform> u: Uniforms;
+import env::u;
 
 @fragment fn main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
   let uv = pos.xy / u.resolution;
@@ -44,8 +42,7 @@ You can include shader code inline if you'd prefer. Use a `<script type="text/wg
 ```html
 <wgsl-play>
   <script type="text/wesl">
-    import test::Uniforms;
-    @group(0) @binding(0) var<uniform> u: Uniforms;
+    import env::u;
 
     @fragment fn fs_main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
       let uv = pos.xy / u.resolution;

package/dist/{WgslPlay-CrELe3mK.js → WgslPlay-Ben4VdsC.js}

@@ -1,4 +1,4 @@
-import { BundleResolver, CompositeResolver, RecordResolver, requestWeslDevice } from "wesl";
+import { requestWeslDevice } from "wesl";
 import { linkAndCreatePipeline, renderFrame, updateRenderUniforms } from "wesl-gpu";
 
 //#region src/Config.ts
@@ -153,26 +153,13 @@ async function initWebGPU(canvas, alphaMode = "opaque") {
 }
 /** Compile WESL fragment shader and create render pipeline. */
 async function createPipeline(state, fragmentSource, options) {
-	const { weslSrc, libs = [], conditions, constants } = options ?? {};
-	const { packageName, rootModuleName } = options ?? {};
-	let resolver;
-	if (weslSrc || libs.length > 0) {
-		const resolvers = [];
-		if (weslSrc) resolvers.push(new RecordResolver(weslSrc, { packageName }));
-		for (const bundle of libs) resolvers.push(new BundleResolver(bundle));
-		resolver = resolvers.length === 1 ? resolvers[0] : new CompositeResolver(resolvers);
-	}
 	state.device.pushErrorScope("validation");
 	const pipeline = await linkAndCreatePipeline({
 		device: state.device,
 		fragmentSource,
-		resolver,
 		format: state.presentationFormat,
 		layout: state.pipelineLayout,
-		conditions,
-		constants,
-		packageName,
-		rootModuleName
+		...options
 	});
 	const gpuError = await state.device.popErrorScope();
 	if (gpuError) {

package/dist/WgslPlay.js

@@ -1,4 +1,4 @@
-import { a as PlaybackControls, c as getConfig, i as startRenderLoop, l as resetConfig, n as createPipeline, o as ErrorOverlay, r as initWebGPU, s as defaults, t as WgslPlay_default } from "./WgslPlay-CrELe3mK.js";
+import { a as PlaybackControls, c as getConfig, i as startRenderLoop, l as resetConfig, n as createPipeline, o as ErrorOverlay, r as initWebGPU, s as defaults, t as WgslPlay_default } from "./WgslPlay-Ben4VdsC.js";
 import { fetchDependencies, loadShaderFromUrl } from "wesl-fetch";
 import { WeslParseError, fileToModulePath } from "wesl";
 
@@ -151,11 +151,12 @@ var WgslPlay = class extends HTMLElement {
 	}
 	/** Set sources from a full project with weslSrc. */
 	setProjectSources(weslSrc, rootModuleName) {
-		const entries = Object.entries(weslSrc).map(([k, v]) => [toModulePath(k), v]);
-		this._weslSrc = Object.fromEntries(entries);
-		this._rootModuleName = rootModuleName ? toModulePath(rootModuleName) : "package::main";
+		const pkg = this._linkOptions.packageName || "package";
+		const root = rootModuleName ?? "main";
+		this._weslSrc = toModulePaths(weslSrc, pkg);
+		this._rootModuleName = fileToModulePath(root, pkg, false);
 		this._fromFullProject = true;
-		this.discoverAndRebuild();
+		this.rebuildPipeline();
 	}
 	/** Whether to auto-fetch missing library packages from npm (default: true). */
 	get fetchLibs() {
@@ -285,16 +286,24 @@ var WgslPlay = class extends HTMLElement {
 			const source = el.source ?? el.textContent ?? "";
 			return { [this._rootModuleName]: source };
 		};
-		const conditions = el.conditions;
-		this.project = {
-			weslSrc: getSources(),
+		const { conditions, rootModuleName, libs } = el;
+		const root = rootModuleName ?? "main";
+		this._weslSrc = getSources();
+		this._rootModuleName = fileToModulePath(root, "package", false);
+		if (conditions) this._linkOptions = {
+			...this._linkOptions,
 			conditions
 		};
+		if (libs) this._libs = libs;
+		this._fromFullProject = false;
+		await this.discoverAndRebuild();
+		this._fromFullProject = true;
 		this._sourceListener = (e) => {
 			const detail = e.detail;
 			const fallback = { [this._rootModuleName]: detail?.source ?? "" };
 			this.project = {
 				weslSrc: detail?.sources ?? fallback,
+				rootModuleName: detail?.rootModuleName,
 				conditions: detail?.conditions
 			};
 		};
@@ -311,7 +320,10 @@ var WgslPlay = class extends HTMLElement {
 			this._fromFullProject = false;
 			if (rootModuleName) this._rootModuleName = rootModuleName;
 			const mainSource = weslSrc[this._rootModuleName];
-			if (!mainSource) return;
+			if (!mainSource) {
+				console.warn(`wgsl-play: root module "${this._rootModuleName}" not found in sources:`, Object.keys(weslSrc));
+				return;
+			}
 			await createPipeline(this.renderState, mainSource, {
 				...this._linkOptions,
 				weslSrc,
@@ -327,7 +339,10 @@ var WgslPlay = class extends HTMLElement {
 	async rebuildPipeline() {
 		if (!await this.initialize()) return;
 		const mainSource = this._weslSrc[this._rootModuleName];
-		if (!mainSource) return;
+		if (!mainSource) {
+			console.warn(`wgsl-play: root module "${this._rootModuleName}" not found in sources:`, Object.keys(this._weslSrc));
+			return;
+		}
 		try {
 			this.errorOverlay.hide();
 			await createPipeline(this.renderState, mainSource, {
@@ -345,7 +360,10 @@ var WgslPlay = class extends HTMLElement {
 	async discoverAndRebuild() {
 		if (!await this.initialize()) return;
 		const mainSource = this._weslSrc[this._rootModuleName];
-		if (!mainSource) return;
+		if (!mainSource) {
+			console.warn(`wgsl-play: root module "${this._rootModuleName}" not found in sources:`, Object.keys(this._weslSrc));
+			return;
+		}
 		try {
 			this.errorOverlay.hide();
 			const { weslSrc, libs } = await fetchDependencies(mainSource, {
@@ -424,9 +442,11 @@ function upgradeProperty(el, prop) {
 		el[prop] = value;
 	}
 }
-/** Convert file path to module path (e.g., "effects/main.wesl" -> "package::effects::main"). */
-function toModulePath(filePath) {
-	return fileToModulePath(filePath, "package", false);
+/** Normalize all keys in a weslSrc record to module paths. */
+function toModulePaths(weslSrc, pkg) {
+	const result = {};
+	for (const [key, value] of Object.entries(weslSrc)) result[fileToModulePath(key, pkg, false)] = value;
+	return result;
 }
 
 //#endregion

package/dist/index.js

@@ -1,4 +1,4 @@
-import { c as getConfig, l as resetConfig, s as defaults } from "./WgslPlay-CrELe3mK.js";
+import { c as getConfig, l as resetConfig, s as defaults } from "./WgslPlay-Ben4VdsC.js";
 import { WgslPlay } from "./WgslPlay.js";
 
 export * from "wesl-fetch"

package/dist/wgsl-play.js

@@ -970,11 +970,78 @@ function emptyScope(parent, kind = "scope") {
 }
 
 //#endregion
-//#region ../wesl/src/LowerAndEmit.ts
-/** Valid WGSL standard attributes (from spec). Non-WGSL attributes are stripped.
-* See: https://www.w3.org/TR/WGSL/#attributes
-* Note: @builtin, @diagnostic, @interpolate are parsed as separate attribute types. */
-const wgslStandardAttributes$1 = new Set([
+//#region ../wesl/src/StandardTypes.ts
+const stdFns = `bitcast all any select arrayLength 
+  abs acos acosh asin asinh atan atanh atan2 ceil clamp cos cosh 
+  countLeadingZeros countOneBits countTrailingZeros cross 
+  degrees determinant distance dot dot4U8Packed dot4I8Packed 
+  exp exp2 extractBits faceForward firstLeadingBit firstTrailingBit 
+  floor fma fract frexp insertBits inverseSqrt ldexp length log log2
+  max min mix modf normalize pow quantizeToF16 radians reflect refract
+  reverseBits round saturate sign sin sinh smoothstep sqrt step tan tanh
+  transpose trunc
+  dpdx dpdxCoarse dpdxFine dpdy dpdyCoarse dpdyFine fwidth 
+  fwidthCoarse fwidthFine
+  textureDimensions textureGather textureGatherCompare textureLoad
+  textureNumLayers textureNumLevels textureNumSamples
+  textureSample textureSampleBias textureSampleCompare textureSampleCompareLevel
+  textureSampleGrad textureSampleLevel textureSampleBaseClampToEdge
+  textureStore
+  atomicLoad atomicStore atomicAdd atomicSub atomicMax atomicMin
+  atomicAnd atomicOr atomicXor atomicExchange atomicCompareExchangeWeak
+  pack4x8snorm pack4x8unorm pack4xI8 pack4xU8 pack4xI8Clamp pack4xU8Clamp
+  pack2x16snorm pack2x16unorm pack2x16float
+  unpack4x8snorm unpack4x8unorm unpack4xI8 unpack4xU8 
+  unpack2x16snorm unpack2x16unorm unpack2x16float
+  storageBarrier textureBarrier workgroupBarrier workgroupUniformLoad
+  subgroupAdd subgroupAll subgroupAnd subgroupAny subgroupBallot 
+  subgroupBroadcast subgroupBroadcastFirst subgroupElect 
+  subgroupExclusiveAdd subgroupExclusiveMul subgroupInclusiveAdd 
+  subgroupInclusiveMul subgroupMax subgroupMin subgroupMul subgroupOr 
+  subgroupShuffle subgroupShuffleUp subgroupShuffleXor subgroupXor
+  quadBroadcast quadSwapDiagonal quadSwapX quadSwapY`.split(/\s+/);
+const sampledTextureTypes = `
+  texture_1d texture_2d texture_2d_array texture_3d 
+  texture_cube texture_cube_array
+`;
+const multisampledTextureTypes = `
+  texture_multisampled_2d texture_depth_multisampled_2d
+`;
+const textureStorageTypes = `
+  texture_storage_1d texture_storage_2d texture_storage_2d_array 
+  texture_storage_3d
+`;
+const stdTypes = `array atomic bool f16 f32 i32 
+  mat2x2 mat2x3 mat2x4 mat3x2 mat3x3 mat3x4 mat4x2 mat4x3 mat4x4
+  mat2x2f mat2x3f mat2x4f mat3x2f mat3x3f mat3x4f
+  mat4x2f mat4x3f mat4x4f
+  mat2x2h mat2x3h mat2x4h mat3x2h mat3x3h mat3x4h
+  mat4x2h mat4x3h mat4x4h
+  u32 vec2 vec3 vec4 ptr
+  vec2i vec3i vec4i vec2u vec3u vec4u
+  vec2f vec3f vec4f vec2h vec3h vec4h
+  ${sampledTextureTypes}
+  ${multisampledTextureTypes}
+  texture_external
+  ${textureStorageTypes}
+  texture_depth_2d texture_depth_2d_array texture_depth_cube
+  texture_depth_cube_array
+  sampler sampler_comparison
+  rgba8unorm rgba8snorm rgba8uint rgba8sint
+  rgba16uint rgba16sint rgba16float 
+  r32uint r32sint r32float rg32uint rg32sint rg32float
+  rgba32uint rgba32sint rgba32float
+  bgra8unorm`.split(/\s+/);
+/** https://www.w3.org/TR/WGSL/#predeclared-enumerants  */
+const stdEnumerants = `read write read_write 
+  function private workgroup uniform storage
+  rgba8unorm rgba8snorm rgba8uint rgba8sint 
+  rgba16uint rgba16sint rgba16float 
+  r32uint r32sint r32float rg32uint rg32sint rg32float
+  rgba32uint rgba32sint rgba32float bgra8unorm`.split(/\s+/);
+/** WGSL standard attributes whose params need binding (e.g., @workgroup_size).
+* See: https://www.w3.org/TR/WGSL/#attributes */
+const wgslStandardAttributes = new Set([
 	"align",
 	"binding",
 	"blend_src",
@@ -990,6 +1057,21 @@ const wgslStandardAttributes$1 = new Set([
 	"vertex",
 	"workgroup_size"
 ]);
+/** return true if the name is for a built in type (not a user struct) */
+function stdType(name) {
+	return stdTypes.includes(name);
+}
+/** return true if the name is for a built in fn (not a user function) */
+function stdFn(name) {
+	return stdFns.includes(name) || stdType(name);
+}
+/** return true if the name is for a built in enumerant */
+function stdEnumerant(name) {
+	return stdEnumerants.includes(name);
+}
+
+//#endregion
+//#region ../wesl/src/LowerAndEmit.ts
 /** Traverse the AST, starting from root elements, emitting WGSL for each. */
 function lowerAndEmit(params) {
 	const { srcBuilder, rootElems, conditions } = params;
@@ -1269,7 +1351,7 @@ function emitAttribute(e, ctx) {
 	const { kind } = e.attribute;
 	if (kind === "@if" || kind === "@elif" || kind === "@else") return false;
 	if (kind === "@attribute") {
-		if (!wgslStandardAttributes$1.has(e.attribute.name)) return false;
+		if (!wgslStandardAttributes.has(e.attribute.name)) return false;
 		emitStandardAttribute(e, ctx);
 		return true;
 	}
@@ -3750,115 +3832,16 @@ function flatImports(ast, conditions) {
 	return flat;
 }
 
-//#endregion
-//#region ../wesl/src/StandardTypes.ts
-const stdFns = `bitcast all any select arrayLength 
-  abs acos acosh asin asinh atan atanh atan2 ceil clamp cos cosh 
-  countLeadingZeros countOneBits countTrailingZeros cross 
-  degrees determinant distance dot dot4U8Packed dot4I8Packed 
-  exp exp2 extractBits faceForward firstLeadingBit firstTrailingBit 
-  floor fma fract frexp insertBits inverseSqrt ldexp length log log2
-  max min mix modf normalize pow quantizeToF16 radians reflect refract
-  reverseBits round saturate sign sin sinh smoothstep sqrt step tan tanh
-  transpose trunc
-  dpdx dpdxCoarse dpdxFine dpdy dpdyCoarse dpdyFine fwidth 
-  fwidthCoarse fwidthFine
-  textureDimensions textureGather textureGatherCompare textureLoad
-  textureNumLayers textureNumLevels textureNumSamples
-  textureSample textureSampleBias textureSampleCompare textureSampleCompareLevel
-  textureSampleGrad textureSampleLevel textureSampleBaseClampToEdge
-  textureStore
-  atomicLoad atomicStore atomicAdd atomicSub atomicMax atomicMin
-  atomicAnd atomicOr atomicXor atomicExchange atomicCompareExchangeWeak
-  pack4x8snorm pack4x8unorm pack4xI8 pack4xU8 pack4xI8Clamp pack4xU8Clamp
-  pack2x16snorm pack2x16unorm pack2x16float
-  unpack4x8snorm unpack4x8unorm unpack4xI8 unpack4xU8 
-  unpack2x16snorm unpack2x16unorm unpack2x16float
-  storageBarrier textureBarrier workgroupBarrier workgroupUniformLoad
-  subgroupAdd subgroupAll subgroupAnd subgroupAny subgroupBallot 
-  subgroupBroadcast subgroupBroadcastFirst subgroupElect 
-  subgroupExclusiveAdd subgroupExclusiveMul subgroupInclusiveAdd 
-  subgroupInclusiveMul subgroupMax subgroupMin subgroupMul subgroupOr 
-  subgroupShuffle subgroupShuffleUp subgroupShuffleXor subgroupXor
-  quadBroadcast quadSwapDiagonal quadSwapX quadSwapY`.split(/\s+/);
-const sampledTextureTypes = `
-  texture_1d texture_2d texture_2d_array texture_3d 
-  texture_cube texture_cube_array
-`;
-const multisampledTextureTypes = `
-  texture_multisampled_2d texture_depth_multisampled_2d
-`;
-const textureStorageTypes = `
-  texture_storage_1d texture_storage_2d texture_storage_2d_array 
-  texture_storage_3d
-`;
-const stdTypes = `array atomic bool f16 f32 i32 
-  mat2x2 mat2x3 mat2x4 mat3x2 mat3x3 mat3x4 mat4x2 mat4x3 mat4x4
-  mat2x2f mat2x3f mat2x4f mat3x2f mat3x3f mat3x4f
-  mat4x2f mat4x3f mat4x4f
-  mat2x2h mat2x3h mat2x4h mat3x2h mat3x3h mat3x4h
-  mat4x2h mat4x3h mat4x4h
-  u32 vec2 vec3 vec4 ptr
-  vec2i vec3i vec4i vec2u vec3u vec4u
-  vec2f vec3f vec4f vec2h vec3h vec4h
-  ${sampledTextureTypes}
-  ${multisampledTextureTypes}
-  texture_external
-  ${textureStorageTypes}
-  texture_depth_2d texture_depth_2d_array texture_depth_cube
-  texture_depth_cube_array
-  sampler sampler_comparison
-  rgba8unorm rgba8snorm rgba8uint rgba8sint
-  rgba16uint rgba16sint rgba16float 
-  r32uint r32sint r32float rg32uint rg32sint rg32float
-  rgba32uint rgba32sint rgba32float
-  bgra8unorm`.split(/\s+/);
-/** https://www.w3.org/TR/WGSL/#predeclared-enumerants  */
-const stdEnumerants = `read write read_write 
-  function private workgroup uniform storage
-  rgba8unorm rgba8snorm rgba8uint rgba8sint 
-  rgba16uint rgba16sint rgba16float 
-  r32uint r32sint r32float rg32uint rg32sint rg32float
-  rgba32uint rgba32sint rgba32float bgra8unorm`.split(/\s+/);
-/** return true if the name is for a built in type (not a user struct) */
-function stdType(name) {
-	return stdTypes.includes(name);
-}
-/** return true if the name is for a built in fn (not a user function) */
-function stdFn(name) {
-	return stdFns.includes(name) || stdType(name);
-}
-/** return true if the name is for a built in enumerant */
-function stdEnumerant(name) {
-	return stdEnumerants.includes(name);
-}
-
 //#endregion
 //#region ../wesl/src/BindIdents.ts
-/** WGSL standard attributes whose params need binding (e.g., @workgroup_size). */
-const wgslStandardAttributes = new Set([
-	"align",
-	"binding",
-	"blend_src",
-	"compute",
-	"const",
-	"fragment",
-	"group",
-	"id",
-	"invariant",
-	"location",
-	"must_use",
-	"size",
-	"vertex",
-	"workgroup_size"
-]);
 /** Bind ref idents to declarations and mangle global declaration names. */
 function bindIdents(params) {
 	const { rootAst, resolver, virtuals, accumulateUnbound } = params;
 	const { conditions = {}, mangler = minimalMangle } = params;
+	const { discoveryMode } = params;
 	const packageName = rootAst.srcModule.modulePath.split("::")[0];
-	const validRootDecls = findValidRootDecls(rootAst.rootScope, conditions);
-	const { globalNames, knownDecls } = initRootDecls(validRootDecls);
+	const rootDecls = discoveryMode ? findAllRootDecls(rootAst.rootScope) : findValidRootDecls(rootAst.rootScope, conditions);
+	const { globalNames, knownDecls } = initRootDecls(rootDecls);
 	const bindContext = {
 		resolver,
 		conditions,
@@ -3869,13 +3852,14 @@ function bindIdents(params) {
 		foundScopes: /* @__PURE__ */ new Set(),
 		globalNames,
 		globalStatements: /* @__PURE__ */ new Map(),
-		unbound: accumulateUnbound ? [] : void 0
+		unbound: accumulateUnbound ? [] : void 0,
+		discoveryMode
 	};
 	const liveDecls = {
-		decls: new Map(validRootDecls.map((d) => [d.originalName, d])),
+		decls: new Map(rootDecls.map((d) => [d.originalName, d])),
 		parent: null
 	};
-	const fromRootDecls = validRootDecls.flatMap((decl) => processDependentScope(decl, bindContext));
+	const fromRootDecls = rootDecls.flatMap((decl) => processDependentScope(decl, bindContext));
 	const fromRefs = bindIdentsRecursive(rootAst.rootScope, bindContext, liveDecls);
 	const newStatements = [...bindContext.globalStatements.values()];
 	return {
@@ -3911,17 +3895,11 @@ function* validItems(scope, conditions) {
 }
 /** Find all conditionally valid declarations at the root level. */
 function findValidRootDecls(rootScope, conditions) {
-	const found = [];
-	for (const item of validItems(rootScope, conditions)) if (item.kind === "decl") found.push(item);
-	else if (item.kind === "partial") collectDecls(item, found);
-	return found;
+	return collectDecls(validItems(rootScope, conditions));
 }
 /** Find all declarations at the root level, ignoring conditions. */
 function findAllRootDecls(rootScope) {
-	const found = [];
-	for (const item of rootScope.contents) if (item.kind === "decl") found.push(item);
-	else if (item.kind === "partial") collectDecls(item, found);
-	return found;
+	return collectDecls(rootScope.contents);
 }
 /** Find a public declaration with the given original name. */
 function publicDecl(scope, name, conditions) {
@@ -3989,10 +3967,11 @@ function handleRef(ident, liveDecls, bindContext) {
 	}
 	if (!bindContext.unbound) failIdent(ident, `unresolved identifier '${ident.originalName}'`);
 }
+/** Follow new global declarations into their dependent scopes. */
 function handleDecls(newGlobals, bindContext) {
 	return newGlobals.flatMap((decl) => processDependentScope(decl, bindContext));
 }
-/** If found declaration is new, mangle its name. Return if it's a global declaration. */
+/** If found declaration is new, mangle its name. @return the decl if it's global. */
 function handleNewDecl(refIdent, foundDecl, ctx) {
 	const { decl, moduleAst } = foundDecl;
 	const { knownDecls, globalNames, mangler, globalStatements } = ctx;
@@ -4019,7 +3998,8 @@ function findDeclInModule(ident, liveDecls) {
 /** Match a ref ident to a declaration in another module via import or qualified ident. */
 function findQualifiedImport(refIdent, ctx) {
 	const { conditions, unbound, discoveryMode } = ctx;
-	const flatImps = flatImports(refIdent.ast, discoveryMode ? void 0 : conditions);
+	const conds = discoveryMode ? void 0 : conditions;
+	const flatImps = flatImports(refIdent.ast, conds);
 	const identParts = refIdent.originalName.split("::");
 	const pathParts = matchingImport(identParts, flatImps) ?? qualifiedIdent(identParts);
 	if (!pathParts) {
@@ -4073,7 +4053,7 @@ function virtualModule(moduleName, ctx) {
 /** Get cached valid root declarations, computing on first access. */
 function getValidRootDecls(rootScope, conditions) {
 	const lexScope = rootScope;
-	if (!lexScope._validRootDecls) lexScope._validRootDecls = findValidRootDecls(rootScope, conditions);
+	lexScope._validRootDecls ??= findValidRootDecls(rootScope, conditions);
 	return lexScope._validRootDecls;
 }
 /** Given a global declIdent, return the liveDecls for its root scope. */
@@ -4102,13 +4082,167 @@ function setMangledName(proposedName, decl, globalNames, srcModule, mangler) {
 function stdWgsl(name) {
 	return stdType(name) || stdFn(name) || stdEnumerant(name);
 }
+/** @return identParts if it's a qualified path (has ::). */
 function qualifiedIdent(identParts) {
 	if (identParts.length > 1) return identParts;
 }
-/** Collect all declarations in a scope (used when scope is already validated). */
-function collectDecls(scope, found) {
-	for (const item of scope.contents) if (item.kind === "decl") found.push(item);
-	else if (item.kind === "partial") collectDecls(item, found);
+/** Collect all declarations from scope items, recursing into partial scopes. */
+function collectDecls(items) {
+	return [...items].flatMap((item) => {
+		const { kind } = item;
+		if (kind === "decl") return [item];
+		if (kind === "partial") return collectDecls(item.contents);
+		return [];
+	});
+}
+
+//#endregion
+//#region ../wesl/src/PathUtil.ts
+/** simplistic path manipulation utilities */
+/** return path with ./ and foo/.. elements removed */
+function normalize(path) {
+	const noDots = path.split("/").filter((s) => s !== ".");
+	const noDbl = [];
+	noDots.forEach((s) => {
+		if (s !== "") if (s === ".." && noDbl.length && noDbl[noDbl.length - 1] !== "..") noDbl.pop();
+		else noDbl.push(s);
+	});
+	return noDbl.join("/");
+}
+/** return path w/o a suffix.
+* e.g. /foo/bar.wgsl => /foo/bar */
+function noSuffix(path) {
+	const lastSlash = path.lastIndexOf("/");
+	const lastStart = lastSlash === -1 ? 0 : lastSlash + 1;
+	const suffix = path.indexOf(".", lastStart);
+	const suffixStart = suffix === -1 ? path.length : suffix;
+	return path.slice(0, suffixStart);
+}
+
+//#endregion
+//#region ../wesl/src/ModuleResolver.ts
+const libRegex = /^lib\.w[eg]sl$/i;
+/** Module resolver for in-memory source records. Lazy by default. */
+var RecordResolver = class {
+	astCache = /* @__PURE__ */ new Map();
+	sources;
+	packageName;
+	debugWeslRoot;
+	constructor(sources, options = {}) {
+		const { packageName = "package", debugWeslRoot } = options;
+		this.sources = sources;
+		this.packageName = packageName;
+		this.debugWeslRoot = normalizeDebugRoot(debugWeslRoot);
+	}
+	resolveModule(modulePath) {
+		const cached = this.astCache.get(modulePath);
+		if (cached) return cached;
+		const source = this.findSource(modulePath);
+		if (source === void 0) return void 0;
+		const ast = parseSrcModule({
+			modulePath,
+			debugFilePath: this.modulePathToDebugPath(modulePath),
+			src: source
+		});
+		this.astCache.set(modulePath, ast);
+		return ast;
+	}
+	findSource(modulePath) {
+		if (this.sources[modulePath] !== void 0) return this.sources[modulePath];
+		const filePath = this.moduleToFilePath(modulePath);
+		if (filePath === void 0) return void 0;
+		return findInVariants(this.sources, filePath);
+	}
+	/** Convert module path to file path, or undefined if not local. */
+	moduleToFilePath(modulePath) {
+		return moduleToRelativePath(modulePath, this.packageName);
+	}
+	modulePathToDebugPath(modulePath) {
+		const filePath = this.moduleToFilePath(modulePath) ?? modulePath;
+		return this.debugWeslRoot + filePath + ".wesl";
+	}
+	/** Parse all modules and return entries. */
+	allModules() {
+		for (const filePath of Object.keys(this.sources)) {
+			const treatLibAsRoot = this.packageName !== "package";
+			const modulePath = fileToModulePath(filePath, this.packageName, treatLibAsRoot);
+			this.resolveModule(modulePath);
+		}
+		return this.astCache.entries();
+	}
+};
+/** Composite resolver that tries each resolver in order until one succeeds. */
+var CompositeResolver = class {
+	resolvers;
+	constructor(resolvers) {
+		this.resolvers = resolvers;
+	}
+	resolveModule(modulePath) {
+		for (const resolver of this.resolvers) {
+			const ast = resolver.resolveModule(modulePath);
+			if (ast) return ast;
+		}
+	}
+};
+/** Lazy resolver for WeslBundle library modules. */
+var BundleResolver = class {
+	astCache = /* @__PURE__ */ new Map();
+	sources;
+	packageName;
+	debugWeslRoot;
+	constructor(bundle, debugWeslRoot) {
+		this.sources = bundle.modules;
+		this.packageName = bundle.name;
+		this.debugWeslRoot = normalizeDebugRoot(debugWeslRoot);
+	}
+	resolveModule(modulePath) {
+		const pkgPrefix = this.packageName + "::";
+		if (modulePath !== this.packageName && !modulePath.startsWith(pkgPrefix)) return;
+		const cached = this.astCache.get(modulePath);
+		if (cached) return cached;
+		const source = this.findSource(modulePath);
+		if (!source) return void 0;
+		const ast = parseSrcModule({
+			modulePath,
+			debugFilePath: this.modulePathToDebugPath(modulePath),
+			src: source
+		});
+		this.astCache.set(modulePath, ast);
+		return ast;
+	}
+	findSource(modulePath) {
+		const filePath = this.moduleToFilePath(modulePath);
+		if (modulePath === this.packageName) {
+			const libSrc = findInVariants(this.sources, "lib", ["wesl", "wgsl"]);
+			if (libSrc) return libSrc;
+		}
+		return findInVariants(this.sources, filePath);
+	}
+	moduleToFilePath(modulePath) {
+		return moduleToRelativePath(modulePath, this.packageName) ?? modulePath;
+	}
+	modulePathToDebugPath(modulePath) {
+		const filePath = this.moduleToFilePath(modulePath);
+		return this.debugWeslRoot + this.packageName + "/" + filePath + ".wesl";
+	}
+};
+/** Convert file path to module path (e.g., "foo/bar.wesl" to "package::foo::bar"). */
+function fileToModulePath(filePath, packageName, treatLibAsRoot) {
+	if (filePath.includes("::")) return filePath;
+	if (treatLibAsRoot && libRegex.test(filePath)) return packageName;
+	const moduleSuffix = noSuffix(normalize(filePath)).replaceAll("/", "::");
+	return packageName + "::" + moduleSuffix;
+}
+/** Try path variants with/without ./ prefix and extension suffixes. */
+function findInVariants(sources, basePath, extensions = ["wesl", "wgsl"]) {
+	for (const prefix of ["", "./"]) {
+		const path = prefix + basePath;
+		if (sources[path] !== void 0) return sources[path];
+		for (const ext of extensions) {
+			const withExt = `${path}.${ext}`;
+			if (sources[withExt] !== void 0) return sources[withExt];
+		}
+	}
 }
 
 //#endregion
@@ -4147,9 +4281,7 @@ function findUnboundRefs(resolver) {
 			decls: new Map(rootDecls.map((d) => [d.originalName, d])),
 			parent: null
 		};
-		filterMap(rootDecls, (decl) => decl.dependentScope).forEach((s) => {
-			bindIdentsRecursive(s, bindContext, makeLiveDecls(liveDecls));
-		});
+		for (const s of filterMap(rootDecls, (decl) => decl.dependentScope)) bindIdentsRecursive(s, bindContext, makeLiveDecls(liveDecls));
 		bindIdentsRecursive(ast.rootScope, bindContext, liveDecls);
 	}
 	return bindContext.unbound;
@@ -4292,155 +4424,6 @@ function compilationInfoToErrorMessage(compilationInfo, shaderModule) {
 	return result;
 }
 
-//#endregion
-//#region ../wesl/src/PathUtil.ts
-/** simplistic path manipulation utilities */
-/** return path with ./ and foo/.. elements removed */
-function normalize(path) {
-	const noDots = path.split("/").filter((s) => s !== ".");
-	const noDbl = [];
-	noDots.forEach((s) => {
-		if (s !== "") if (s === ".." && noDbl.length && noDbl[noDbl.length - 1] !== "..") noDbl.pop();
-		else noDbl.push(s);
-	});
-	return noDbl.join("/");
-}
-/** return path w/o a suffix.
-* e.g. /foo/bar.wgsl => /foo/bar */
-function noSuffix(path) {
-	const lastSlash = path.lastIndexOf("/");
-	const lastStart = lastSlash === -1 ? 0 : lastSlash + 1;
-	const suffix = path.indexOf(".", lastStart);
-	const suffixStart = suffix === -1 ? path.length : suffix;
-	return path.slice(0, suffixStart);
-}
-
-//#endregion
-//#region ../wesl/src/ModuleResolver.ts
-const libRegex = /^lib\.w[eg]sl$/i;
-/** Module resolver for in-memory source records. Lazy by default. */
-var RecordResolver = class {
-	astCache = /* @__PURE__ */ new Map();
-	sources;
-	packageName;
-	debugWeslRoot;
-	constructor(sources, options = {}) {
-		const { packageName = "package", debugWeslRoot } = options;
-		this.sources = sources;
-		this.packageName = packageName;
-		this.debugWeslRoot = normalizeDebugRoot(debugWeslRoot);
-	}
-	resolveModule(modulePath) {
-		const cached = this.astCache.get(modulePath);
-		if (cached) return cached;
-		const source = this.findSource(modulePath);
-		if (source === void 0) return void 0;
-		const ast = parseSrcModule({
-			modulePath,
-			debugFilePath: this.modulePathToDebugPath(modulePath),
-			src: source
-		});
-		this.astCache.set(modulePath, ast);
-		return ast;
-	}
-	findSource(modulePath) {
-		if (this.sources[modulePath] !== void 0) return this.sources[modulePath];
-		const filePath = this.moduleToFilePath(modulePath);
-		if (filePath === void 0) return void 0;
-		return findInVariants(this.sources, filePath);
-	}
-	/** Convert module path to file path, or undefined if not local. */
-	moduleToFilePath(modulePath) {
-		return moduleToRelativePath(modulePath, this.packageName);
-	}
-	modulePathToDebugPath(modulePath) {
-		const filePath = this.moduleToFilePath(modulePath) ?? modulePath;
-		return this.debugWeslRoot + filePath + ".wesl";
-	}
-	/** Parse all modules and return entries. */
-	allModules() {
-		for (const filePath of Object.keys(this.sources)) {
-			const treatLibAsRoot = this.packageName !== "package";
-			const modulePath = fileToModulePath(filePath, this.packageName, treatLibAsRoot);
-			this.resolveModule(modulePath);
-		}
-		return this.astCache.entries();
-	}
-};
-/** Composite resolver that tries each resolver in order until one succeeds. */
-var CompositeResolver = class {
-	resolvers;
-	constructor(resolvers) {
-		this.resolvers = resolvers;
-	}
-	resolveModule(modulePath) {
-		for (const resolver of this.resolvers) {
-			const ast = resolver.resolveModule(modulePath);
-			if (ast) return ast;
-		}
-	}
-};
-/** Lazy resolver for WeslBundle library modules. */
-var BundleResolver = class {
-	astCache = /* @__PURE__ */ new Map();
-	sources;
-	packageName;
-	debugWeslRoot;
-	constructor(bundle, debugWeslRoot) {
-		this.sources = bundle.modules;
-		this.packageName = bundle.name;
-		this.debugWeslRoot = normalizeDebugRoot(debugWeslRoot);
-	}
-	resolveModule(modulePath) {
-		const pkgPrefix = this.packageName + "::";
-		if (modulePath !== this.packageName && !modulePath.startsWith(pkgPrefix)) return;
-		const cached = this.astCache.get(modulePath);
-		if (cached) return cached;
-		const source = this.findSource(modulePath);
-		if (!source) return void 0;
-		const ast = parseSrcModule({
-			modulePath,
-			debugFilePath: this.modulePathToDebugPath(modulePath),
-			src: source
-		});
-		this.astCache.set(modulePath, ast);
-		return ast;
-	}
-	findSource(modulePath) {
-		const filePath = this.moduleToFilePath(modulePath);
-		if (modulePath === this.packageName) {
-			const libSrc = findInVariants(this.sources, "lib", ["wesl", "wgsl"]);
-			if (libSrc) return libSrc;
-		}
-		return findInVariants(this.sources, filePath);
-	}
-	moduleToFilePath(modulePath) {
-		return moduleToRelativePath(modulePath, this.packageName) ?? modulePath;
-	}
-	modulePathToDebugPath(modulePath) {
-		const filePath = this.moduleToFilePath(modulePath);
-		return this.debugWeslRoot + this.packageName + "/" + filePath + ".wesl";
-	}
-};
-/** Convert file path to module path (e.g., "foo/bar.wesl" to "package::foo::bar"). */
-function fileToModulePath(filePath, packageName, treatLibAsRoot) {
-	if (filePath.includes("::")) return filePath;
-	if (treatLibAsRoot && libRegex.test(filePath)) return packageName;
-	const moduleSuffix = noSuffix(normalize(filePath)).replaceAll("/", "::");
-	return packageName + "::" + moduleSuffix;
-}
-/** Try path variants with/without ./ prefix and extension suffixes. */
-function findInVariants(sources, basePath, extensions = ["wesl", "wgsl"]) {
-	for (const prefix of ["", "./"]) {
-		const path = prefix + basePath;
-		if (sources[path] !== void 0) return sources[path];
-		for (const ext of extensions) {
-			const withExt = `${path}.${ext}`;
-			if (sources[withExt] !== void 0) return sources[withExt];
-		}
-	}
-}
-
 //#endregion
 //#region ../wesl/src/SrcMap.ts
 /** map text ranges in multiple src texts to a single dest text */
@@ -5116,7 +5099,7 @@ function normalizeUrl(url) {
 
 //#endregion
 //#region ../wesl-fetch/src/PackageLoader.ts
-const virtualModules = ["constants", "test"];
+const virtualModules = ["constants", "env"];
 /** Resolve dependencies: internal modules via HTTP, external packages from npm. */
 async function fetchDependencies(rootModuleSource, options) {
 	const shaderRoot = options?.shaderRoot ?? "/shaders";
@@ -5400,18 +5383,16 @@ function updateRenderUniforms(buffer, device, resolution, time, mouse = [0, 0])
 	]);
 	device.queue.writeBuffer(buffer, 0, data);
 }
-/**
-* return the WGSL struct for use in shaders as test::Uniforms.
-*
-* @returns virtual library object for passing to compileShader()
-*/
+/** @returns virtual library providing env::u and env::Uniforms for shaders */
 function createUniformsVirtualLib() {
-	return { test: () => `
+	return { env: () => `
       struct Uniforms {
         resolution: vec2f,  // Output viewport dimensions
         time: f32,          // Elapsed time in seconds
         mouse: vec2f,       // Mouse position [0,1] normalized coords
       }
+
+      @group(0) @binding(0) var<uniform> u: Uniforms;
     ` };
 }
 
@@ -5659,26 +5640,13 @@ async function initWebGPU(canvas, alphaMode = "opaque") {
 }
 /** Compile WESL fragment shader and create render pipeline. */
 async function createPipeline(state, fragmentSource, options) {
-	const { weslSrc, libs = [], conditions, constants } = options ?? {};
-	const { packageName, rootModuleName } = options ?? {};
-	let resolver;
-	if (weslSrc || libs.length > 0) {
-		const resolvers = [];
-		if (weslSrc) resolvers.push(new RecordResolver(weslSrc, { packageName }));
-		for (const bundle of libs) resolvers.push(new BundleResolver(bundle));
-		resolver = resolvers.length === 1 ? resolvers[0] : new CompositeResolver(resolvers);
-	}
 	state.device.pushErrorScope("validation");
 	const pipeline = await linkAndCreatePipeline({
 		device: state.device,
 		fragmentSource,
-		resolver,
 		format: state.presentationFormat,
 		layout: state.pipelineLayout,
-		conditions,
-		constants,
-		packageName,
-		rootModuleName
+		...options
 	});
 	const gpuError = await state.device.popErrorScope();
 	if (gpuError) {
@@ -5868,11 +5836,12 @@ var WgslPlay = class extends HTMLElement {
 	}
 	/** Set sources from a full project with weslSrc. */
 	setProjectSources(weslSrc, rootModuleName) {
-		const entries = Object.entries(weslSrc).map(([k, v]) => [toModulePath(k), v]);
-		this._weslSrc = Object.fromEntries(entries);
-		this._rootModuleName = rootModuleName ? toModulePath(rootModuleName) : "package::main";
+		const pkg = this._linkOptions.packageName || "package";
+		const root = rootModuleName ?? "main";
+		this._weslSrc = toModulePaths(weslSrc, pkg);
+		this._rootModuleName = fileToModulePath(root, pkg, false);
 		this._fromFullProject = true;
-		this.discoverAndRebuild();
+		this.rebuildPipeline();
 	}
 	/** Whether to auto-fetch missing library packages from npm (default: true). */
 	get fetchLibs() {
@@ -6002,16 +5971,24 @@ var WgslPlay = class extends HTMLElement {
 			const source = el.source ?? el.textContent ?? "";
 			return { [this._rootModuleName]: source };
 		};
-		const conditions = el.conditions;
-		this.project = {
-			weslSrc: getSources(),
+		const { conditions, rootModuleName, libs } = el;
+		const root = rootModuleName ?? "main";
+		this._weslSrc = getSources();
+		this._rootModuleName = fileToModulePath(root, "package", false);
+		if (conditions) this._linkOptions = {
+			...this._linkOptions,
 			conditions
 		};
+		if (libs) this._libs = libs;
+		this._fromFullProject = false;
+		await this.discoverAndRebuild();
+		this._fromFullProject = true;
 		this._sourceListener = (e) => {
 			const detail = e.detail;
 			const fallback = { [this._rootModuleName]: detail?.source ?? "" };
 			this.project = {
 				weslSrc: detail?.sources ?? fallback,
+				rootModuleName: detail?.rootModuleName,
 				conditions: detail?.conditions
 			};
 		};
@@ -6028,7 +6005,10 @@ var WgslPlay = class extends HTMLElement {
 			this._fromFullProject = false;
 			if (rootModuleName) this._rootModuleName = rootModuleName;
 			const mainSource = weslSrc[this._rootModuleName];
-			if (!mainSource) return;
+			if (!mainSource) {
+				console.warn(`wgsl-play: root module "${this._rootModuleName}" not found in sources:`, Object.keys(weslSrc));
+				return;
+			}
 			await createPipeline(this.renderState, mainSource, {
 				...this._linkOptions,
 				weslSrc,
@@ -6044,7 +6024,10 @@ var WgslPlay = class extends HTMLElement {
 	async rebuildPipeline() {
 		if (!await this.initialize()) return;
 		const mainSource = this._weslSrc[this._rootModuleName];
-		if (!mainSource) return;
+		if (!mainSource) {
+			console.warn(`wgsl-play: root module "${this._rootModuleName}" not found in sources:`, Object.keys(this._weslSrc));
+			return;
+		}
 		try {
 			this.errorOverlay.hide();
 			await createPipeline(this.renderState, mainSource, {
@@ -6062,7 +6045,10 @@ var WgslPlay = class extends HTMLElement {
 	async discoverAndRebuild() {
 		if (!await this.initialize()) return;
 		const mainSource = this._weslSrc[this._rootModuleName];
-		if (!mainSource) return;
+		if (!mainSource) {
+			console.warn(`wgsl-play: root module "${this._rootModuleName}" not found in sources:`, Object.keys(this._weslSrc));
+			return;
+		}
 		try {
 			this.errorOverlay.hide();
 			const { weslSrc, libs } = await fetchDependencies(mainSource, {
@@ -6141,9 +6127,11 @@ function upgradeProperty(el, prop) {
 		el[prop] = value;
 	}
 }
-/** Convert file path to module path (e.g., "effects/main.wesl" -> "package::effects::main"). */
-function toModulePath(filePath) {
-	return fileToModulePath(filePath, "package", false);
+/** Normalize all keys in a weslSrc record to module paths. */
+function toModulePaths(weslSrc, pkg) {
+	const result = {};
+	for (const [key, value] of Object.entries(weslSrc)) result[fileToModulePath(key, pkg, false)] = value;
+	return result;
 }
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wgsl-play",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "type": "module",
   "files": [
     "dist",
@@ -22,9 +22,9 @@
     }
   },
   "dependencies": {
-    "wesl": "0.7.22",
-    "wesl-fetch": "0.0.10",
-    "wesl-gpu": "0.1.24"
+    "wesl": "0.7.23",
+    "wesl-gpu": "0.1.25",
+    "wesl-fetch": "0.0.11"
   },
   "devDependencies": {
     "@playwright/test": "^1.53.2",

package/src/Renderer.ts

@@ -1,10 +1,4 @@
-import type { ModuleResolver } from "wesl";
-import {
-  BundleResolver,
-  CompositeResolver,
-  RecordResolver,
-  requestWeslDevice,
-} from "wesl";
+import { requestWeslDevice } from "wesl";
 import {
   linkAndCreatePipeline,
   renderFrame,
@@ -89,30 +83,13 @@ export async function createPipeline(
   fragmentSource: string,
   options?: LinkOptions,
 ): Promise<void> {
-  const { weslSrc, libs = [], conditions, constants } = options ?? {};
-  const { packageName, rootModuleName } = options ?? {};
-
-  // Build resolver from weslSrc/libs if provided
-  let resolver: ModuleResolver | undefined;
-  if (weslSrc || libs.length > 0) {
-    const resolvers: ModuleResolver[] = [];
-    if (weslSrc) resolvers.push(new RecordResolver(weslSrc, { packageName }));
-    for (const bundle of libs) resolvers.push(new BundleResolver(bundle));
-    resolver =
-      resolvers.length === 1 ? resolvers[0] : new CompositeResolver(resolvers);
-  }
-
   state.device.pushErrorScope("validation");
   const pipeline = await linkAndCreatePipeline({
     device: state.device,
     fragmentSource,
-    resolver,
     format: state.presentationFormat,
     layout: state.pipelineLayout,
-    conditions,
-    constants,
-    packageName,
-    rootModuleName,
+    ...options,
   });
   const gpuError = await state.device.popErrorScope();
   if (gpuError) {

package/src/WgslPlay.ts

@@ -241,17 +241,12 @@ export class WgslPlay extends HTMLElement {
     weslSrc: Record<string, string>,
     rootModuleName?: string,
   ): void {
-    // Convert file paths to module paths if needed (for ?link imports)
-    const entries = Object.entries(weslSrc).map(([k, v]) => [
-      toModulePath(k),
-      v,
-    ]);
-    this._weslSrc = Object.fromEntries(entries);
-    this._rootModuleName = rootModuleName
-      ? toModulePath(rootModuleName)
-      : "package::main";
+    const pkg = this._linkOptions.packageName || "package";
+    const root = rootModuleName ?? "main";
+    this._weslSrc = toModulePaths(weslSrc, pkg);
+    this._rootModuleName = fileToModulePath(root, pkg, false);
     this._fromFullProject = true;
-    this.discoverAndRebuild();
+    this.rebuildPipeline();
   }
 
   /** Whether to auto-fetch missing library packages from npm (default: true). */
@@ -425,16 +420,25 @@ export class WgslPlay extends HTMLElement {
       return { [this._rootModuleName]: source };
     };
 
-    // Load initial sources and conditions
-    const conditions = (el as any).conditions;
-    this.project = { weslSrc: getSources(), conditions };
+    // Load initial sources, conditions, and libs from source element.
+    // Use discoverAndRebuild (not project setter) so external deps are fetched.
+    const { conditions, rootModuleName, libs } = el as any;
+    const root = rootModuleName ?? "main";
+    this._weslSrc = getSources();
+    this._rootModuleName = fileToModulePath(root, "package", false);
+    if (conditions) this._linkOptions = { ...this._linkOptions, conditions };
+    if (libs) this._libs = libs;
+    this._fromFullProject = false;
+    await this.discoverAndRebuild();
+    this._fromFullProject = true; // fast rebuilds on subsequent edits
 
-    // Listen for changes - handle both single and multi-file, plus conditions
+    // Listen for changes - rebuild with cached libs
     this._sourceListener = (e: Event) => {
       const detail = (e as CustomEvent).detail;
       const fallback = { [this._rootModuleName]: detail?.source ?? "" };
       this.project = {
         weslSrc: detail?.sources ?? fallback,
+        rootModuleName: detail?.rootModuleName,
         conditions: detail?.conditions,
       };
     };
@@ -457,7 +461,13 @@ export class WgslPlay extends HTMLElement {
       if (rootModuleName) this._rootModuleName = rootModuleName;
 
       const mainSource = weslSrc[this._rootModuleName];
-      if (!mainSource) return;
+      if (!mainSource) {
+        console.warn(
+          `wgsl-play: root module "${this._rootModuleName}" not found in sources:`,
+          Object.keys(weslSrc),
+        );
+        return;
+      }
 
       await createPipeline(this.renderState, mainSource, {
         ...this._linkOptions,
@@ -476,7 +486,13 @@ export class WgslPlay extends HTMLElement {
     if (!(await this.initialize())) return;
 
     const mainSource = this._weslSrc[this._rootModuleName];
-    if (!mainSource) return;
+    if (!mainSource) {
+      console.warn(
+        `wgsl-play: root module "${this._rootModuleName}" not found in sources:`,
+        Object.keys(this._weslSrc),
+      );
+      return;
+    }
 
     try {
       this.errorOverlay.hide();
@@ -497,7 +513,13 @@ export class WgslPlay extends HTMLElement {
     if (!(await this.initialize())) return;
 
     const mainSource = this._weslSrc[this._rootModuleName];
-    if (!mainSource) return;
+    if (!mainSource) {
+      console.warn(
+        `wgsl-play: root module "${this._rootModuleName}" not found in sources:`,
+        Object.keys(this._weslSrc),
+      );
+      return;
+    }
 
     try {
       this.errorOverlay.hide();
@@ -594,7 +616,13 @@ function upgradeProperty(el: HTMLElement, prop: string): void {
   }
 }
 
-/** Convert file path to module path (e.g., "effects/main.wesl" -> "package::effects::main"). */
-function toModulePath(filePath: string): string {
-  return fileToModulePath(filePath, "package", false);
+/** Normalize all keys in a weslSrc record to module paths. */
+function toModulePaths(
+  weslSrc: Record<string, string>,
+  pkg: string,
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const [key, value] of Object.entries(weslSrc))
+    result[fileToModulePath(key, pkg, false)] = value;
+  return result;
 }

package/src/test/WgslPlay.e2e.ts

@@ -185,6 +185,61 @@ test("project.conditions - shows green initially, red after setting RED", async
   await expectCanvasSnapshot(page, "#player7", "conditions-after-red.png");
 });
 
+test("connectToSource - multi-file from wgsl-edit renders", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await waitForFrame(page, "#player9");
+  await expectCanvasSnapshot(page, "#player9", "connect-source-multifile.png");
+});
+
+test("connectToSource - condition toggle re-renders", async ({ page }) => {
+  await page.goto("/");
+  await waitForFrame(page, "#player10");
+
+  // Initial: green (@else branch)
+  await expectCanvasSnapshot(page, "#player10", "connect-conditions-green.png");
+
+  // Toggle RED condition via editor
+  await page.click("#toggle-condition10");
+  await waitForNewFrame(page, "#player10");
+
+  // After: red (@if branch)
+  await expectCanvasSnapshot(page, "#player10", "connect-conditions-red.png");
+});
+
+test("connectToSource - external deps are fetched", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForLoadState("networkidle");
+  await waitForFrame(page, "#player11");
+
+  // If discoverAndRebuild wasn't called, this would show an error overlay
+  const hasError = await page.evaluate(
+    () => (document.querySelector("#player11") as any)?.hasError ?? true,
+  );
+  expect(hasError).toBe(false);
+  await expectCanvasSnapshot(page, "#player11", "connect-source-external.png");
+});
+
+test("editor.link() with virtualLibs resolves env:: module", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await waitForWgslPlay(page);
+
+  await page.click("#link-btn12");
+  await page.waitForFunction(
+    () =>
+      document.querySelector("#link-output12")?.textContent !==
+      "Not linked yet",
+  );
+
+  const output = await page.textContent("#link-output12");
+  expect(output).toContain("var<uniform>");
+  expect(output).toContain("fs_main");
+  expect(output).not.toContain("Error");
+});
+
 test("no critical console errors on basic load", async ({ page }) => {
   const errors: string[] = [];
   page.on("console", msg => {