wgsl-play 0.0.31 → 0.0.33

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;
@@ -83,6 +80,7 @@ The `?raw` suffix imports the file as a string. This keeps shaders alongside you
 - `shader-root` - Root path for internal imports (default: `/shaders`)
 - `autoplay` - Start animating on load (default: `true`). Set `autoplay="false"` to start paused
 - `transparent` - Use premultiplied alpha for transparent backgrounds (default: opaque)
+- `fetch-libs` - Auto-fetch missing libraries from npm (default: `true`). Set `fetch-libs="false"` to disable
 
 ### Properties
 - `source: string` - Get/set shader source

package/dist/Config-BV15Y2ZJ.d.ts

@@ -0,0 +1,14 @@
+//#region src/Config.d.ts
+/** Configuration for wgsl-play. */
+interface WgslPlayConfig {
+  /** Root path for internal imports (package::, super::). Default: "/shaders" */
+  shaderRoot: string;
+}
+/** Set global defaults for all wgsl-play instances. */
+declare function defaults(config: Partial<WgslPlayConfig>): void;
+/** Get resolved config, merging element overrides with global defaults. */
+declare function getConfig(overrides?: Partial<WgslPlayConfig>): WgslPlayConfig;
+/** Reset config to defaults (useful for testing). */
+declare function resetConfig(): void;
+//#endregion
+export { resetConfig as i, defaults as n, getConfig as r, WgslPlayConfig as t };

package/dist/WgslPlay-Ben4VdsC.js

@@ -0,0 +1,203 @@
+import { requestWeslDevice } from "wesl";
+import { linkAndCreatePipeline, renderFrame, updateRenderUniforms } from "wesl-gpu";
+
+//#region src/Config.ts
+const defaultConfig = { shaderRoot: "/shaders" };
+let globalConfig = { ...defaultConfig };
+/** Set global defaults for all wgsl-play instances. */
+function defaults(config) {
+	globalConfig = {
+		...globalConfig,
+		...config
+	};
+}
+/** Get resolved config, merging element overrides with global defaults. */
+function getConfig(overrides) {
+	return {
+		...globalConfig,
+		...overrides
+	};
+}
+/** Reset config to defaults (useful for testing). */
+function resetConfig() {
+	globalConfig = { ...defaultConfig };
+}
+
+//#endregion
+//#region src/ErrorOverlay.ts
+/** Manages an error overlay element within a shadow DOM. */
+var ErrorOverlay = class {
+	el;
+	_message = null;
+	constructor(container) {
+		this.el = document.createElement("div");
+		this.el.className = "error-overlay";
+		container.appendChild(this.el);
+	}
+	show(message) {
+		this._message = message;
+		this.el.textContent = message;
+		this.el.classList.add("visible");
+		console.error("[wgsl-play]", message);
+	}
+	hide() {
+		this._message = null;
+		this.el.classList.remove("visible");
+	}
+	get visible() {
+		return this.el.classList.contains("visible");
+	}
+	get message() {
+		return this._message;
+	}
+};
+
+//#endregion
+//#region src/icons/backToStart.svg?raw
+var backToStart_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><rect x=\"4\" y=\"4\" width=\"3\" height=\"16\" fill=\"currentColor\"/><polygon points=\"20,4 9,12 20,20\" fill=\"currentColor\"/></svg>\n";
+
+//#endregion
+//#region src/icons/expand.svg?raw
+var expand_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><path d=\"M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 4h-4v2h6v-6h-2v4z\" fill=\"currentColor\"/></svg>\n";
+
+//#endregion
+//#region src/icons/pause.svg?raw
+var pause_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><rect x=\"5\" y=\"4\" width=\"4\" height=\"16\" fill=\"currentColor\"/><rect x=\"15\" y=\"4\" width=\"4\" height=\"16\" fill=\"currentColor\"/></svg>\n";
+
+//#endregion
+//#region src/icons/play.svg?raw
+var play_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><polygon points=\"6,4 20,12 6,20\" fill=\"currentColor\"/></svg>\n";
+
+//#endregion
+//#region src/icons/shrink.svg?raw
+var shrink_default = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><path d=\"M9 3v6H3v-2h4V3h2zm6 0h2v4h4v2h-6V3zM3 15h6v6H7v-4H3v-2zm12 0h6v2h-4v4h-2v-6z\" fill=\"currentColor\"/></svg>\n";
+
+//#endregion
+//#region src/PlaybackControls.ts
+/** Playback controls overlay for wgsl-play. */
+var PlaybackControls = class {
+	container;
+	playPauseBtn;
+	fullscreenBtn;
+	playing = true;
+	constructor(shadow, onPlay, onPause, onRewind, onFullscreen) {
+		this.container = document.createElement("div");
+		this.container.className = "controls";
+		this.fullscreenBtn = document.createElement("button");
+		this.fullscreenBtn.innerHTML = expand_default;
+		this.fullscreenBtn.addEventListener("click", onFullscreen);
+		const rewindBtn = document.createElement("button");
+		rewindBtn.innerHTML = backToStart_default;
+		rewindBtn.addEventListener("click", onRewind);
+		this.playPauseBtn = document.createElement("button");
+		this.playPauseBtn.innerHTML = pause_default;
+		this.playPauseBtn.addEventListener("click", () => this.playing ? onPause() : onPlay());
+		this.container.append(this.fullscreenBtn, rewindBtn, this.playPauseBtn);
+		shadow.appendChild(this.container);
+	}
+	setPlaying(playing) {
+		this.playing = playing;
+		this.playPauseBtn.innerHTML = playing ? pause_default : play_default;
+	}
+	setFullscreen(isFullscreen) {
+		this.fullscreenBtn.innerHTML = isFullscreen ? shrink_default : expand_default;
+	}
+	show() {
+		this.container.style.display = "";
+	}
+	hide() {
+		this.container.style.display = "none";
+	}
+};
+
+//#endregion
+//#region src/Renderer.ts
+/** Initialize WebGPU for a canvas element. */
+async function initWebGPU(canvas, alphaMode = "opaque") {
+	const adapter = await navigator.gpu.requestAdapter();
+	if (!adapter) throw new Error("WebGPU adapter not available");
+	const device = await requestWeslDevice(adapter);
+	const context = canvas.getContext("webgpu");
+	if (!context) throw new Error("WebGPU context not available");
+	const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+	context.configure({
+		device,
+		format: presentationFormat,
+		alphaMode
+	});
+	const uniformBuffer = device.createBuffer({
+		size: 32,
+		usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+	});
+	const bindGroupLayout = device.createBindGroupLayout({ entries: [{
+		binding: 0,
+		visibility: GPUShaderStage.FRAGMENT,
+		buffer: {}
+	}] });
+	return {
+		device,
+		canvas,
+		context,
+		presentationFormat,
+		uniformBuffer,
+		pipelineLayout: device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }),
+		bindGroup: device.createBindGroup({
+			layout: bindGroupLayout,
+			entries: [{
+				binding: 0,
+				resource: { buffer: uniformBuffer }
+			}]
+		}),
+		frameCount: 0
+	};
+}
+/** Compile WESL fragment shader and create render pipeline. */
+async function createPipeline(state, fragmentSource, options) {
+	state.device.pushErrorScope("validation");
+	const pipeline = await linkAndCreatePipeline({
+		device: state.device,
+		fragmentSource,
+		format: state.presentationFormat,
+		layout: state.pipelineLayout,
+		...options
+	});
+	const gpuError = await state.device.popErrorScope();
+	if (gpuError) {
+		state.pipeline = void 0;
+		throw gpuError;
+	}
+	state.pipeline = pipeline;
+}
+/** Start the render loop. Returns a stop function. */
+function startRenderLoop(state, playback) {
+	let animationId;
+	function render() {
+		if (!state.pipeline) {
+			animationId = requestAnimationFrame(render);
+			return;
+		}
+		const time = calculateTime(playback);
+		const resolution = [state.canvas.width, state.canvas.height];
+		updateRenderUniforms(state.uniformBuffer, state.device, resolution, time, [0, 0]);
+		renderFrame({
+			device: state.device,
+			pipeline: state.pipeline,
+			bindGroup: state.bindGroup,
+			targetView: state.context.getCurrentTexture().createView()
+		});
+		state.frameCount++;
+		animationId = requestAnimationFrame(render);
+	}
+	animationId = requestAnimationFrame(render);
+	return () => cancelAnimationFrame(animationId);
+}
+function calculateTime(playback) {
+	return ((playback.isPlaying ? performance.now() : playback.startTime + playback.pausedDuration) - playback.startTime) / 1e3;
+}
+
+//#endregion
+//#region src/WgslPlay.css?inline
+var WgslPlay_default = ":host {\n  --error-bg: rgba(220, 102, 18, 0.8);\n  --error-color: white;\n  --controls-bg: rgba(0, 0, 0, 0.4);\n  --controls-color: rgba(255, 255, 255, 0.8);\n  --controls-hover-color: white;\n  --controls-hover-bg: rgba(255, 255, 255, 0.15);\n\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\n:host(.dark) {\n  --error-bg: rgba(180, 60, 10, 0.85);\n  --controls-bg: rgba(0, 0, 0, 0.5);\n}\n\ncanvas {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.controls {\n  background: var(--controls-bg);\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  display: flex;\n  gap: 20px;\n  border-radius: 6px;\n  padding: 2px;\n  opacity: 0;\n  transition: opacity 0.2s;\n  z-index: 1;\n}\n\n:host(:hover) .controls {\n  opacity: 1;\n}\n\n.controls button {\n  border: none;\n  background: none;\n  color: var(--controls-color);\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.controls button:hover {\n  color: var(--controls-hover-color);\n  background: var(--controls-hover-bg);\n}\n\n.error-overlay {\n  position: absolute;\n  inset: 0;\n  background: var(--error-bg);\n  color: var(--error-color);\n  padding: 1rem;\n  font-family: monospace;\n  font-size: 0.875rem;\n  white-space: pre-wrap;\n  overflow: auto;\n  display: none;\n}\n\n.error-overlay.visible {\n  display: block;\n}\n";
+
+//#endregion
+export { PlaybackControls as a, getConfig as c, startRenderLoop as i, resetConfig as l, createPipeline as n, ErrorOverlay as o, initWebGPU as r, defaults as s, WgslPlay_default as t };

package/dist/WgslPlay.d.ts

@@ -1,2 +1,107 @@
-import { c as resetConfig, i as WgslPlay, n as CompileErrorLocation, o as defaults, r as WeslProject, s as getConfig, t as CompileErrorDetail } from "./WgslPlay-BUiSUZem.js";
+import { i as resetConfig, n as defaults, r as getConfig } from "./Config-BV15Y2ZJ.js";
+import { Conditions, LinkParams } from "wesl";
+
+//#region src/WgslPlay.d.ts
+/** Project configuration for multi-file shaders (subset of wesl link() API). */
+type WeslProject = Pick<LinkParams, "weslSrc" | "rootModuleName" | "conditions" | "constants" | "libs" | "packageName">;
+/** One source location within a compile error. */
+interface CompileErrorLocation {
+  file?: string;
+  line: number;
+  column: number;
+  length?: number;
+  severity: "error" | "warning" | "info";
+  message: string;
+}
+/** Compile error detail for events. */
+interface CompileErrorDetail {
+  message: string;
+  source: "wesl" | "webgpu";
+  locations: CompileErrorLocation[];
+}
+/** <wgsl-play> web component for rendering WESL/WGSL fragment shaders.  */
+declare class WgslPlay extends HTMLElement {
+  static observedAttributes: string[];
+  private canvas;
+  private errorOverlay;
+  private controls;
+  private resizeObserver;
+  private stopRenderLoop?;
+  private renderState?;
+  private playback;
+  private _weslSrc;
+  private _rootModuleName;
+  private _libs?;
+  private _linkOptions;
+  private _fromFullProject;
+  private _initPromise?;
+  private _sourceEl;
+  private _sourceListener;
+  private _fetchLibs;
+  private _theme;
+  private _mediaQuery;
+  private _onFullscreenChange;
+  /** Get config overrides from element attributes. */
+  private getConfigOverrides;
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+  /** Current shader source code (main module). */
+  get source(): string;
+  /** Set shader source directly. */
+  set source(value: string);
+  /** Conditions for conditional compilation (@if/@elif/@else). */
+  get conditions(): Conditions;
+  set conditions(value: Conditions);
+  /** Set project configuration (mirrors wesl link() API). */
+  set project(value: WeslProject);
+  /** Set sources from a full project with weslSrc. */
+  private setProjectSources;
+  /** Whether to auto-fetch missing library packages from npm (default: true). */
+  get fetchLibs(): boolean;
+  set fetchLibs(value: boolean);
+  /** Whether autoplay is enabled (default: true). Set autoplay="false" to start paused. */
+  get autoplay(): boolean;
+  set autoplay(value: boolean | string);
+  /** Whether the shader is currently playing. */
+  get isPlaying(): boolean;
+  /** Current animation time in seconds. */
+  get time(): number;
+  /** Number of frames rendered (for testing/debugging). */
+  get frameCount(): number;
+  /** Whether there's a compilation error. */
+  get hasError(): boolean;
+  /** Current error message, or null if no error. */
+  get errorMessage(): string | null;
+  /** Start playback. */
+  play(): void;
+  /** Pause playback. */
+  pause(): void;
+  private setPlaying;
+  /** Reset animation to time 0 and pause. */
+  rewind(): void;
+  /** Display error message in overlay. Pass empty string to clear. */
+  showError(message: string): void;
+  /** Toggle fullscreen on this element. */
+  toggleFullscreen(): void;
+  private updateTheme;
+  /** Set up WebGPU and load initial shader. Returns true if successful. */
+  private initialize;
+  private doInitialize;
+  /** Load from source element, src URL, script child, or inline textContent. */
+  private loadInitialContent;
+  /** Connect to a source provider element (e.g., wgsl-edit). */
+  private connectToSource;
+  /** Fetch shader from URL, auto-fetching any imported dependencies. */
+  private loadFromUrl;
+  /** Rebuild GPU pipeline using stored state. For full projects with all sources. */
+  private rebuildPipeline;
+  /** Discover dependencies and rebuild. For HTTP/inline sources that may need fetching. */
+  private discoverAndRebuild;
+  private handleCompileError;
+  /** Extract source locations from a WESL parse error or GPU compilation error. */
+  private extractLocations;
+}
+//#endregion
 export { CompileErrorDetail, CompileErrorLocation, WeslProject, WgslPlay, defaults, getConfig, resetConfig };