@motion-core/motion-gpu 0.4.2 → 0.5.0

package/dist/passes/PingPongComputePass.js

@@ -0,0 +1,132 @@
+import { assertComputeContract, extractWorkgroupSize } from "../core/compute-shader.js";
+//#region src/lib/passes/PingPongComputePass.ts
+/**
+* Ping-pong compute pass for iterative GPU simulations.
+*
+* Manages two texture buffers (A/B) and alternates between them each iteration,
+* enabling read-from-previous-write patterns commonly used in fluid simulations,
+* reaction-diffusion, and particle systems.
+*/
+var PingPongComputePass = class PingPongComputePass {
+	/**
+	* Enables/disables this pass without removing it from graph.
+	*/
+	enabled;
+	/**
+	* Discriminant flag for render graph to identify compute passes.
+	*/
+	isCompute = true;
+	/**
+	* Discriminant flag to identify ping-pong compute passes.
+	*/
+	isPingPong = true;
+	compute;
+	target;
+	iterations;
+	dispatch;
+	workgroupSize;
+	frameCount = 0;
+	constructor(options) {
+		assertComputeContract(options.compute);
+		const workgroupSize = extractWorkgroupSize(options.compute);
+		this.compute = options.compute;
+		this.target = options.target;
+		this.iterations = PingPongComputePass.assertIterations(options.iterations ?? 1);
+		this.dispatch = options.dispatch ?? "auto";
+		this.enabled = options.enabled ?? true;
+		this.workgroupSize = workgroupSize;
+	}
+	static assertIterations(count) {
+		if (!Number.isFinite(count) || count < 1 || !Number.isInteger(count)) throw new Error(`PingPongComputePass iterations must be a positive integer >= 1, got ${count}`);
+		return count;
+	}
+	/**
+	* Returns the texture key holding the latest result.
+	* Alternates between `{target}A` and `{target}B` based on total iteration parity.
+	*/
+	getCurrentOutput() {
+		return this.frameCount * this.iterations % 2 === 0 ? `${this.target}A` : `${this.target}B`;
+	}
+	/**
+	* Advances the internal frame counter (called by renderer after each frame's iterations).
+	*/
+	advanceFrame() {
+		this.frameCount += 1;
+	}
+	/**
+	* Replaces compute shader and updates workgroup size.
+	*/
+	setCompute(compute) {
+		assertComputeContract(compute);
+		const workgroupSize = extractWorkgroupSize(compute);
+		this.compute = compute;
+		this.workgroupSize = workgroupSize;
+	}
+	/**
+	* Updates iteration count.
+	*
+	* @param count - Must be >= 1.
+	*/
+	setIterations(count) {
+		this.iterations = PingPongComputePass.assertIterations(count);
+	}
+	/**
+	* Updates dispatch strategy.
+	*/
+	setDispatch(dispatch) {
+		this.dispatch = dispatch ?? "auto";
+	}
+	/**
+	* Returns the target texture key.
+	*/
+	getTarget() {
+		return this.target;
+	}
+	/**
+	* Returns the current iteration count.
+	*/
+	getIterations() {
+		return this.iterations;
+	}
+	/**
+	* Returns current compute shader source.
+	*/
+	getCompute() {
+		return this.compute;
+	}
+	/**
+	* Returns parsed workgroup size.
+	*/
+	getWorkgroupSize() {
+		return [...this.workgroupSize];
+	}
+	/**
+	* Resolves dispatch workgroup counts for current frame.
+	*/
+	resolveDispatch(ctx) {
+		if (this.dispatch === "auto") return [
+			Math.ceil(ctx.width / this.workgroupSize[0]),
+			Math.ceil(ctx.height / this.workgroupSize[1]),
+			Math.ceil(1 / this.workgroupSize[2])
+		];
+		if (typeof this.dispatch === "function") return this.dispatch(ctx);
+		if (Array.isArray(this.dispatch)) return [
+			this.dispatch[0],
+			this.dispatch[1] ?? 1,
+			this.dispatch[2] ?? 1
+		];
+		return [
+			1,
+			1,
+			1
+		];
+	}
+	/**
+	* Releases resources (no-op, GPU lifecycle is renderer-managed).
+	*/
+	dispose() {}
+};
+//#endregion
+export { PingPongComputePass };
+
+//# sourceMappingURL=PingPongComputePass.js.map

package/dist/passes/PingPongComputePass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PingPongComputePass.js","names":[],"sources":["../../src/lib/passes/PingPongComputePass.ts"],"sourcesContent":["import { assertComputeContract, extractWorkgroupSize } from '../core/compute-shader.js';\nimport type { ComputePassOptions, ComputeDispatchContext } from './ComputePass.js';\n\n/**\n * Options for constructing a `PingPongComputePass`.\n */\nexport interface PingPongComputePassOptions {\n\t/**\n\t * Compute shader WGSL source code.\n\t */\n\tcompute: string;\n\t/**\n\t * Target texture key from `material.textures`.\n\t * The engine will auto-generate `{target}A` and `{target}B` bindings.\n\t */\n\ttarget: string;\n\t/**\n\t * Number of compute iterations per frame. Default: 1.\n\t */\n\titerations?: number;\n\t/**\n\t * Dispatch workgroup counts (same as ComputePass).\n\t */\n\tdispatch?: ComputePassOptions['dispatch'];\n\t/**\n\t * Enables/disables this pass.\n\t */\n\tenabled?: boolean;\n}\n\n/**\n * Ping-pong compute pass for iterative GPU simulations.\n *\n * Manages two texture buffers (A/B) and alternates between them each iteration,\n * enabling read-from-previous-write patterns commonly used in fluid simulations,\n * reaction-diffusion, and particle systems.\n */\nexport class PingPongComputePass {\n\t/**\n\t * Enables/disables this pass without removing it from graph.\n\t */\n\tenabled: boolean;\n\n\t/**\n\t * Discriminant flag for render graph to identify compute passes.\n\t */\n\treadonly isCompute = true as const;\n\n\t/**\n\t * Discriminant flag to identify ping-pong compute passes.\n\t */\n\treadonly isPingPong = true as const;\n\n\tprivate compute: string;\n\tprivate target: string;\n\tprivate iterations: number;\n\tprivate dispatch: ComputePassOptions['dispatch'];\n\tprivate workgroupSize: [number, number, number];\n\tprivate frameCount: number = 0;\n\n\tconstructor(options: PingPongComputePassOptions) {\n\t\tassertComputeContract(options.compute);\n\t\tconst workgroupSize = extractWorkgroupSize(options.compute);\n\t\tthis.compute = options.compute;\n\t\tthis.target = options.target;\n\t\tthis.iterations = PingPongComputePass.assertIterations(options.iterations ?? 1);\n\t\tthis.dispatch = options.dispatch ?? 'auto';\n\t\tthis.enabled = options.enabled ?? true;\n\t\tthis.workgroupSize = workgroupSize;\n\t}\n\n\tprivate static assertIterations(count: number): number {\n\t\tif (!Number.isFinite(count) || count < 1 || !Number.isInteger(count)) {\n\t\t\tthrow new Error(\n\t\t\t\t`PingPongComputePass iterations must be a positive integer >= 1, got ${count}`\n\t\t\t);\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns the texture key holding the latest result.\n\t * Alternates between `{target}A` and `{target}B` based on total iteration parity.\n\t */\n\tgetCurrentOutput(): string {\n\t\tconst totalIterations = this.frameCount * this.iterations;\n\t\treturn totalIterations % 2 === 0 ? `${this.target}A` : `${this.target}B`;\n\t}\n\n\t/**\n\t * Advances the internal frame counter (called by renderer after each frame's iterations).\n\t */\n\tadvanceFrame(): void {\n\t\tthis.frameCount += 1;\n\t}\n\n\t/**\n\t * Replaces compute shader and updates workgroup size.\n\t */\n\tsetCompute(compute: string): void {\n\t\tassertComputeContract(compute);\n\t\tconst workgroupSize = extractWorkgroupSize(compute);\n\t\tthis.compute = compute;\n\t\tthis.workgroupSize = workgroupSize;\n\t}\n\n\t/**\n\t * Updates iteration count.\n\t *\n\t * @param count - Must be >= 1.\n\t */\n\tsetIterations(count: number): void {\n\t\tthis.iterations = PingPongComputePass.assertIterations(count);\n\t}\n\n\t/**\n\t * Updates dispatch strategy.\n\t */\n\tsetDispatch(dispatch: ComputePassOptions['dispatch']): void {\n\t\tthis.dispatch = dispatch ?? 'auto';\n\t}\n\n\t/**\n\t * Returns the target texture key.\n\t */\n\tgetTarget(): string {\n\t\treturn this.target;\n\t}\n\n\t/**\n\t * Returns the current iteration count.\n\t */\n\tgetIterations(): number {\n\t\treturn this.iterations;\n\t}\n\n\t/**\n\t * Returns current compute shader source.\n\t */\n\tgetCompute(): string {\n\t\treturn this.compute;\n\t}\n\n\t/**\n\t * Returns parsed workgroup size.\n\t */\n\tgetWorkgroupSize(): [number, number, number] {\n\t\treturn [...this.workgroupSize];\n\t}\n\n\t/**\n\t * Resolves dispatch workgroup counts for current frame.\n\t */\n\tresolveDispatch(ctx: ComputeDispatchContext): [number, number, number] {\n\t\tif (this.dispatch === 'auto') {\n\t\t\treturn [\n\t\t\t\tMath.ceil(ctx.width / this.workgroupSize[0]),\n\t\t\t\tMath.ceil(ctx.height / this.workgroupSize[1]),\n\t\t\t\tMath.ceil(1 / this.workgroupSize[2])\n\t\t\t];\n\t\t}\n\n\t\tif (typeof this.dispatch === 'function') {\n\t\t\treturn this.dispatch(ctx);\n\t\t}\n\n\t\tif (Array.isArray(this.dispatch)) {\n\t\t\treturn [this.dispatch[0], this.dispatch[1] ?? 1, this.dispatch[2] ?? 1];\n\t\t}\n\n\t\treturn [1, 1, 1];\n\t}\n\n\t/**\n\t * Releases resources (no-op, GPU lifecycle is renderer-managed).\n\t */\n\tdispose(): void {\n\t\t// No-op\n\t}\n}\n"],"mappings":";;;;;;;;;AAqCA,IAAa,sBAAb,MAAa,oBAAoB;;;;CAIhC;;;;CAKA,YAAqB;;;;CAKrB,aAAsB;CAEtB;CACA;CACA;CACA;CACA;CACA,aAA6B;CAE7B,YAAY,SAAqC;AAChD,wBAAsB,QAAQ,QAAQ;EACtC,MAAM,gBAAgB,qBAAqB,QAAQ,QAAQ;AAC3D,OAAK,UAAU,QAAQ;AACvB,OAAK,SAAS,QAAQ;AACtB,OAAK,aAAa,oBAAoB,iBAAiB,QAAQ,cAAc,EAAE;AAC/E,OAAK,WAAW,QAAQ,YAAY;AACpC,OAAK,UAAU,QAAQ,WAAW;AAClC,OAAK,gBAAgB;;CAGtB,OAAe,iBAAiB,OAAuB;AACtD,MAAI,CAAC,OAAO,SAAS,MAAM,IAAI,QAAQ,KAAK,CAAC,OAAO,UAAU,MAAM,CACnE,OAAM,IAAI,MACT,uEAAuE,QACvE;AAEF,SAAO;;;;;;CAOR,mBAA2B;AAE1B,SADwB,KAAK,aAAa,KAAK,aACtB,MAAM,IAAI,GAAG,KAAK,OAAO,KAAK,GAAG,KAAK,OAAO;;;;;CAMvE,eAAqB;AACpB,OAAK,cAAc;;;;;CAMpB,WAAW,SAAuB;AACjC,wBAAsB,QAAQ;EAC9B,MAAM,gBAAgB,qBAAqB,QAAQ;AACnD,OAAK,UAAU;AACf,OAAK,gBAAgB;;;;;;;CAQtB,cAAc,OAAqB;AAClC,OAAK,aAAa,oBAAoB,iBAAiB,MAAM;;;;;CAM9D,YAAY,UAAgD;AAC3D,OAAK,WAAW,YAAY;;;;;CAM7B,YAAoB;AACnB,SAAO,KAAK;;;;;CAMb,gBAAwB;AACvB,SAAO,KAAK;;;;;CAMb,aAAqB;AACpB,SAAO,KAAK;;;;;CAMb,mBAA6C;AAC5C,SAAO,CAAC,GAAG,KAAK,cAAc;;;;;CAM/B,gBAAgB,KAAuD;AACtE,MAAI,KAAK,aAAa,OACrB,QAAO;GACN,KAAK,KAAK,IAAI,QAAQ,KAAK,cAAc,GAAG;GAC5C,KAAK,KAAK,IAAI,SAAS,KAAK,cAAc,GAAG;GAC7C,KAAK,KAAK,IAAI,KAAK,cAAc,GAAG;GACpC;AAGF,MAAI,OAAO,KAAK,aAAa,WAC5B,QAAO,KAAK,SAAS,IAAI;AAG1B,MAAI,MAAM,QAAQ,KAAK,SAAS,CAC/B,QAAO;GAAC,KAAK,SAAS;GAAI,KAAK,SAAS,MAAM;GAAG,KAAK,SAAS,MAAM;GAAE;AAGxE,SAAO;GAAC;GAAG;GAAG;GAAE;;;;;CAMjB,UAAgB"}

package/dist/passes/ShaderPass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShaderPass.d.ts","sourceRoot":"","sources":["../../src/lib/passes/ShaderPass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAKjF,MAAM,WAAW,iBAAkB,SAAQ,qBAAqB;IAC/D,QAAQ,EAAE,MAAM,CAAC;CACjB;AA2CD;;GAEG;AACH,qBAAa,UAAW,SAAQ,cAAc;IAC7C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,OAAO,CAAS;gBAEZ,OAAO,EAAE,iBAAiB;IAMtC;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMnC,WAAW,IAAI,MAAM;IAIrB,SAAS,CAAC,UAAU,IAAI,MAAM;IAI9B,SAAS,CAAC,mBAAmB,IAAI,MAAM;IAIvC,SAAS,CAAC,qBAAqB,IAAI,MAAM;CAGzC"}
+{"version":3,"file":"ShaderPass.d.ts","sourceRoot":"","sources":["../../src/lib/passes/ShaderPass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAKjF,MAAM,WAAW,iBAAkB,SAAQ,qBAAqB;IAC/D,QAAQ,EAAE,MAAM,CAAC;CACjB;AA2CD;;GAEG;AACH,qBAAa,UAAW,SAAQ,cAAc;IAC7C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,OAAO,CAAS;gBAEZ,OAAO,EAAE,iBAAiB;IAMtC;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAOnC,WAAW,IAAI,MAAM;IAIrB,SAAS,CAAC,UAAU,IAAI,MAAM;IAI9B,SAAS,CAAC,mBAAmB,IAAI,MAAM;IAIvC,SAAS,CAAC,qBAAqB,IAAI,MAAM;CAGzC"}

package/dist/passes/ShaderPass.js

@@ -51,8 +51,9 @@ var ShaderPass = class extends FullscreenPass {
 	* Replaces current shader fragment and invalidates pipeline cache.
 	*/
 	setFragment(fragment) {
+		const nextProgram = buildShaderPassProgram(fragment);
 		this.fragment = fragment;
-		this.program = buildShaderPassProgram(fragment);
+		this.program = nextProgram;
 		this.invalidateFullscreenCache();
 	}
 	getFragment() {

package/dist/passes/ShaderPass.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShaderPass.js","names":[],"sources":["../../src/lib/passes/ShaderPass.ts"],"sourcesContent":["import { FullscreenPass, type FullscreenPassOptions } from './FullscreenPass.js';\n\nconst SHADER_PASS_CONTRACT =\n\t/\\bfn\\s+shade\\s*\\(\\s*inputColor\\s*:\\s*vec4f\\s*,\\s*uv\\s*:\\s*vec2f\\s*\\)\\s*->\\s*vec4f/;\n\nexport interface ShaderPassOptions extends FullscreenPassOptions {\n\tfragment: string;\n}\n\nfunction buildShaderPassProgram(fragment: string): string {\n\tif (!SHADER_PASS_CONTRACT.test(fragment)) {\n\t\tthrow new Error(\n\t\t\t'ShaderPass fragment must declare `fn shade(inputColor: vec4f, uv: vec2f) -> vec4f`.'\n\t\t);\n\t}\n\n\treturn `\nstruct MotionGPUVertexOut {\n\t@builtin(position) position: vec4f,\n\t@location(0) uv: vec2f,\n};\n\n@group(0) @binding(0) var motiongpuShaderPassSampler: sampler;\n@group(0) @binding(1) var motiongpuShaderPassTexture: texture_2d<f32>;\n\n@vertex\nfn motiongpuShaderPassVertex(@builtin(vertex_index) index: u32) -> MotionGPUVertexOut {\n\tvar positions = array<vec2f, 3>(\n\t\tvec2f(-1.0, -3.0),\n\t\tvec2f(-1.0, 1.0),\n\t\tvec2f(3.0, 1.0)\n\t);\n\n\tlet position = positions[index];\n\tvar out: MotionGPUVertexOut;\n\tout.position = vec4f(position, 0.0, 1.0);\n\tout.uv = (position + vec2f(1.0, 1.0)) * 0.5;\n\treturn out;\n}\n\n${fragment}\n\n@fragment\nfn motiongpuShaderPassFragment(in: MotionGPUVertexOut) -> @location(0) vec4f {\n\tlet inputColor = textureSample(motiongpuShaderPassTexture, motiongpuShaderPassSampler, in.uv);\n\treturn shade(inputColor, in.uv);\n}\n`;\n}\n\n/**\n * Fullscreen programmable shader pass.\n */\nexport class ShaderPass extends FullscreenPass {\n\tprivate fragment: string;\n\tprivate program: string;\n\n\tconstructor(options: ShaderPassOptions) {\n\t\tsuper(options);\n\t\tthis.fragment = options.fragment;\n\t\tthis.program = buildShaderPassProgram(options.fragment);\n\t}\n\n\t/**\n\t * Replaces current shader fragment and invalidates pipeline cache.\n\t */\n\tsetFragment(fragment: string): void {\n\t\tthis.fragment = fragment;\n\t\tthis.program = buildShaderPassProgram(fragment);\n\t\tthis.invalidateFullscreenCache();\n\t}\n\n\tgetFragment(): string {\n\t\treturn this.fragment;\n\t}\n\n\tprotected getProgram(): string {\n\t\treturn this.program;\n\t}\n\n\tprotected getVertexEntryPoint(): string {\n\t\treturn 'motiongpuShaderPassVertex';\n\t}\n\n\tprotected getFragmentEntryPoint(): string {\n\t\treturn 'motiongpuShaderPassFragment';\n\t}\n}\n"],"mappings":";;AAEA,IAAM,uBACL;AAMD,SAAS,uBAAuB,UAA0B;AACzD,KAAI,CAAC,qBAAqB,KAAK,SAAS,CACvC,OAAM,IAAI,MACT,sFACA;AAGF,QAAO;;;;;;;;;;;;;;;;;;;;;;;;EAwBN,SAAS;;;;;;;;;;;;AAaX,IAAa,aAAb,cAAgC,eAAe;CAC9C;CACA;CAEA,YAAY,SAA4B;AACvC,QAAM,QAAQ;AACd,OAAK,WAAW,QAAQ;AACxB,OAAK,UAAU,uBAAuB,QAAQ,SAAS;;;;;CAMxD,YAAY,UAAwB;AACnC,OAAK,WAAW;AAChB,OAAK,UAAU,uBAAuB,SAAS;AAC/C,OAAK,2BAA2B;;CAGjC,cAAsB;AACrB,SAAO,KAAK;;CAGb,aAA+B;AAC9B,SAAO,KAAK;;CAGb,sBAAwC;AACvC,SAAO;;CAGR,wBAA0C;AACzC,SAAO"}
+{"version":3,"file":"ShaderPass.js","names":[],"sources":["../../src/lib/passes/ShaderPass.ts"],"sourcesContent":["import { FullscreenPass, type FullscreenPassOptions } from './FullscreenPass.js';\n\nconst SHADER_PASS_CONTRACT =\n\t/\\bfn\\s+shade\\s*\\(\\s*inputColor\\s*:\\s*vec4f\\s*,\\s*uv\\s*:\\s*vec2f\\s*\\)\\s*->\\s*vec4f/;\n\nexport interface ShaderPassOptions extends FullscreenPassOptions {\n\tfragment: string;\n}\n\nfunction buildShaderPassProgram(fragment: string): string {\n\tif (!SHADER_PASS_CONTRACT.test(fragment)) {\n\t\tthrow new Error(\n\t\t\t'ShaderPass fragment must declare `fn shade(inputColor: vec4f, uv: vec2f) -> vec4f`.'\n\t\t);\n\t}\n\n\treturn `\nstruct MotionGPUVertexOut {\n\t@builtin(position) position: vec4f,\n\t@location(0) uv: vec2f,\n};\n\n@group(0) @binding(0) var motiongpuShaderPassSampler: sampler;\n@group(0) @binding(1) var motiongpuShaderPassTexture: texture_2d<f32>;\n\n@vertex\nfn motiongpuShaderPassVertex(@builtin(vertex_index) index: u32) -> MotionGPUVertexOut {\n\tvar positions = array<vec2f, 3>(\n\t\tvec2f(-1.0, -3.0),\n\t\tvec2f(-1.0, 1.0),\n\t\tvec2f(3.0, 1.0)\n\t);\n\n\tlet position = positions[index];\n\tvar out: MotionGPUVertexOut;\n\tout.position = vec4f(position, 0.0, 1.0);\n\tout.uv = (position + vec2f(1.0, 1.0)) * 0.5;\n\treturn out;\n}\n\n${fragment}\n\n@fragment\nfn motiongpuShaderPassFragment(in: MotionGPUVertexOut) -> @location(0) vec4f {\n\tlet inputColor = textureSample(motiongpuShaderPassTexture, motiongpuShaderPassSampler, in.uv);\n\treturn shade(inputColor, in.uv);\n}\n`;\n}\n\n/**\n * Fullscreen programmable shader pass.\n */\nexport class ShaderPass extends FullscreenPass {\n\tprivate fragment: string;\n\tprivate program: string;\n\n\tconstructor(options: ShaderPassOptions) {\n\t\tsuper(options);\n\t\tthis.fragment = options.fragment;\n\t\tthis.program = buildShaderPassProgram(options.fragment);\n\t}\n\n\t/**\n\t * Replaces current shader fragment and invalidates pipeline cache.\n\t */\n\tsetFragment(fragment: string): void {\n\t\tconst nextProgram = buildShaderPassProgram(fragment);\n\t\tthis.fragment = fragment;\n\t\tthis.program = nextProgram;\n\t\tthis.invalidateFullscreenCache();\n\t}\n\n\tgetFragment(): string {\n\t\treturn this.fragment;\n\t}\n\n\tprotected getProgram(): string {\n\t\treturn this.program;\n\t}\n\n\tprotected getVertexEntryPoint(): string {\n\t\treturn 'motiongpuShaderPassVertex';\n\t}\n\n\tprotected getFragmentEntryPoint(): string {\n\t\treturn 'motiongpuShaderPassFragment';\n\t}\n}\n"],"mappings":";;AAEA,IAAM,uBACL;AAMD,SAAS,uBAAuB,UAA0B;AACzD,KAAI,CAAC,qBAAqB,KAAK,SAAS,CACvC,OAAM,IAAI,MACT,sFACA;AAGF,QAAO;;;;;;;;;;;;;;;;;;;;;;;;EAwBN,SAAS;;;;;;;;;;;;AAaX,IAAa,aAAb,cAAgC,eAAe;CAC9C;CACA;CAEA,YAAY,SAA4B;AACvC,QAAM,QAAQ;AACd,OAAK,WAAW,QAAQ;AACxB,OAAK,UAAU,uBAAuB,QAAQ,SAAS;;;;;CAMxD,YAAY,UAAwB;EACnC,MAAM,cAAc,uBAAuB,SAAS;AACpD,OAAK,WAAW;AAChB,OAAK,UAAU;AACf,OAAK,2BAA2B;;CAGjC,cAAsB;AACrB,SAAO,KAAK;;CAGb,aAA+B;AAC9B,SAAO,KAAK;;CAGb,sBAAwC;AACvC,SAAO;;CAGR,wBAA0C;AACzC,SAAO"}

package/dist/passes/index.d.ts

@@ -1,4 +1,6 @@
 export { BlitPass, type BlitPassOptions } from './BlitPass.js';
 export { CopyPass, type CopyPassOptions } from './CopyPass.js';
 export { ShaderPass, type ShaderPassOptions } from './ShaderPass.js';
+export { ComputePass, type ComputePassOptions, type ComputeDispatchContext } from './ComputePass.js';
+export { PingPongComputePass, type PingPongComputePassOptions } from './PingPongComputePass.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/passes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/passes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/passes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EACN,WAAW,EACX,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,KAAK,0BAA0B,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/passes/index.js

@@ -1,4 +1,6 @@
 import { BlitPass } from "./BlitPass.js";
 import { CopyPass } from "./CopyPass.js";
 import { ShaderPass } from "./ShaderPass.js";
-export { BlitPass, CopyPass, ShaderPass };
+import { ComputePass } from "./ComputePass.js";
+import { PingPongComputePass } from "./PingPongComputePass.js";
+export { BlitPass, ComputePass, CopyPass, PingPongComputePass, ShaderPass };

package/dist/react/FragCanvas.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="@webgpu/types" />
 import { type MotionGPUErrorReport } from '../core/error-report.js';
 import type { FragMaterial } from '../core/material.js';
-import type { OutputColorSpace, RenderPass, RenderMode, RenderTargetDefinitionMap } from '../core/types.js';
+import type { AnyPass, OutputColorSpace, RenderMode, RenderTargetDefinitionMap } from '../core/types.js';
 import { type CSSProperties, type ReactNode } from 'react';
 export interface FragCanvasProps {
     material: FragMaterial;
     renderTargets?: RenderTargetDefinitionMap;
-    passes?: RenderPass[];
+    passes?: AnyPass[];
     clearColor?: [number, number, number, number];
     outputColorSpace?: OutputColorSpace;
     renderMode?: RenderMode;

package/dist/react/FragCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FragCanvas.d.ts","sourceRoot":"","sources":["../../src/lib/react/FragCanvas.tsx"],"names":[],"mappings":";AACA,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,KAAK,EACX,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,yBAAyB,EACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAA+B,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxF,MAAM,WAAW,eAAe;IAC/B,QAAQ,EAAE,YAAY,CAAC;IACvB,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,SAAS,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AA0HD,wBAAgB,UAAU,CAAC,EAC1B,QAAQ,EACR,aAAkB,EAClB,MAAW,EACX,UAAyB,EACzB,gBAAyB,EACzB,UAAqB,EACrB,UAAiB,EACjB,QAAc,EACd,cAA0B,EAC1B,gBAA4B,EAC5B,GAAqB,EACrB,gBAAuB,EACvB,aAAa,EACb,OAAmB,EACnB,iBAAqB,EACrB,cAA0B,EAC1B,SAAc,EACd,KAAK,EACL,QAAQ,EACR,EAAE,eAAe,2CAsKjB"}
+{"version":3,"file":"FragCanvas.d.ts","sourceRoot":"","sources":["../../src/lib/react/FragCanvas.tsx"],"names":[],"mappings":";AACA,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,KAAK,EACX,OAAO,EACP,gBAAgB,EAChB,UAAU,EACV,yBAAyB,EACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAA+B,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxF,MAAM,WAAW,eAAe;IAC/B,QAAQ,EAAE,YAAY,CAAC;IACvB,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,EAAE,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,SAAS,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AA0HD,wBAAgB,UAAU,CAAC,EAC1B,QAAQ,EACR,aAAkB,EAClB,MAAW,EACX,UAAyB,EACzB,gBAAyB,EACzB,UAAqB,EACrB,UAAiB,EACjB,QAAc,EACd,cAA0B,EAC1B,gBAA4B,EAC5B,GAAqB,EACrB,gBAAuB,EACvB,aAAa,EACb,OAAmB,EACnB,iBAAqB,EACrB,cAA0B,EAC1B,SAAc,EACd,KAAK,EACL,QAAQ,EACR,EAAE,eAAe,2CAsKjB"}

package/dist/react/FragCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"FragCanvas.js","names":[],"sources":["../../src/lib/react/FragCanvas.tsx"],"sourcesContent":["import { createCurrentWritable as currentWritable } from '../core/current-value.js';\nimport { toMotionGPUErrorReport, type MotionGPUErrorReport } from '../core/error-report.js';\nimport type { FragMaterial } from '../core/material.js';\nimport { createFrameRegistry } from '../core/frame-registry.js';\nimport { createMotionGPURuntimeLoop } from '../core/runtime-loop.js';\nimport type {\n\tOutputColorSpace,\n\tRenderPass,\n\tRenderMode,\n\tRenderTargetDefinitionMap\n} from '../core/types.js';\nimport { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';\nimport { FrameRegistryReactContext } from './frame-context.js';\nimport { MotionGPUErrorOverlay } from './MotionGPUErrorOverlay.js';\nimport { MotionGPUReactContext, type MotionGPUContext } from './motiongpu-context.js';\n\nexport interface FragCanvasProps {\n\tmaterial: FragMaterial;\n\trenderTargets?: RenderTargetDefinitionMap;\n\tpasses?: RenderPass[];\n\tclearColor?: [number, number, number, number];\n\toutputColorSpace?: OutputColorSpace;\n\trenderMode?: RenderMode;\n\tautoRender?: boolean;\n\tmaxDelta?: number;\n\tadapterOptions?: GPURequestAdapterOptions;\n\tdeviceDescriptor?: GPUDeviceDescriptor;\n\tdpr?: number;\n\tshowErrorOverlay?: boolean;\n\terrorRenderer?: (report: MotionGPUErrorReport) => ReactNode;\n\tonError?: (report: MotionGPUErrorReport) => void;\n\terrorHistoryLimit?: number;\n\tonErrorHistory?: (history: MotionGPUErrorReport[]) => void;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tchildren?: ReactNode;\n}\n\ninterface RuntimePropsSnapshot {\n\tmaterial: FragMaterial;\n\trenderTargets: RenderTargetDefinitionMap;\n\tpasses: RenderPass[];\n\tclearColor: [number, number, number, number];\n\toutputColorSpace: OutputColorSpace;\n\tadapterOptions: GPURequestAdapterOptions | undefined;\n\tdeviceDescriptor: GPUDeviceDescriptor | undefined;\n\tonError: ((report: MotionGPUErrorReport) => void) | undefined;\n\terrorHistoryLimit: number;\n\tonErrorHistory: ((history: MotionGPUErrorReport[]) => void) | undefined;\n}\n\ninterface FragCanvasRuntimeState {\n\tregistry: ReturnType<typeof createFrameRegistry>;\n\tcontext: MotionGPUContext;\n\tcanvasRef: { current: HTMLCanvasElement | undefined };\n\tsize: ReturnType<typeof currentWritable<{ width: number; height: number }>>;\n\tdprState: ReturnType<typeof currentWritable<number>>;\n\tmaxDeltaState: ReturnType<typeof currentWritable<number>>;\n\trenderModeState: ReturnType<typeof currentWritable<RenderMode>>;\n\tautoRenderState: ReturnType<typeof currentWritable<boolean>>;\n\trequestFrameSignalRef: { current: (() => void) | null };\n\trequestFrame: () => void;\n\tinvalidateFrame: () => void;\n\tadvanceFrame: () => void;\n}\n\nfunction getInitialDpr(): number {\n\tif (typeof window === 'undefined') {\n\t\treturn 1;\n\t}\n\n\treturn window.devicePixelRatio ?? 1;\n}\n\nfunction createRuntimeState(initialDpr: number): FragCanvasRuntimeState {\n\tconst registry = createFrameRegistry({ maxDelta: 0.1 });\n\tconst canvasRef = { current: undefined as HTMLCanvasElement | undefined };\n\tconst requestFrameSignalRef = { current: null as (() => void) | null };\n\tconst requestFrame = (): void => {\n\t\trequestFrameSignalRef.current?.();\n\t};\n\tconst invalidateFrame = (): void => {\n\t\tregistry.invalidate();\n\t\trequestFrame();\n\t};\n\tconst advanceFrame = (): void => {\n\t\tregistry.advance();\n\t\trequestFrame();\n\t};\n\n\tconst size = currentWritable({ width: 0, height: 0 });\n\tconst dprState = currentWritable(initialDpr, requestFrame);\n\tconst maxDeltaState = currentWritable(0.1, (value) => {\n\t\tregistry.setMaxDelta(value);\n\t\trequestFrame();\n\t});\n\tconst renderModeState = currentWritable<RenderMode>('always', (value) => {\n\t\tregistry.setRenderMode(value);\n\t\trequestFrame();\n\t});\n\tconst autoRenderState = currentWritable<boolean>(true, (value) => {\n\t\tregistry.setAutoRender(value);\n\t\trequestFrame();\n\t});\n\tconst userState = currentWritable<Record<string | symbol, unknown>>({});\n\n\tconst context: MotionGPUContext = {\n\t\tget canvas() {\n\t\t\treturn canvasRef.current;\n\t\t},\n\t\tsize,\n\t\tdpr: dprState,\n\t\tmaxDelta: maxDeltaState,\n\t\trenderMode: renderModeState,\n\t\tautoRender: autoRenderState,\n\t\tuser: userState,\n\t\tinvalidate: invalidateFrame,\n\t\tadvance: advanceFrame,\n\t\tscheduler: {\n\t\t\tcreateStage: registry.createStage,\n\t\t\tgetStage: registry.getStage,\n\t\t\tsetDiagnosticsEnabled: registry.setDiagnosticsEnabled,\n\t\t\tgetDiagnosticsEnabled: registry.getDiagnosticsEnabled,\n\t\t\tgetLastRunTimings: registry.getLastRunTimings,\n\t\t\tgetSchedule: registry.getSchedule,\n\t\t\tsetProfilingEnabled: registry.setProfilingEnabled,\n\t\t\tsetProfilingWindow: registry.setProfilingWindow,\n\t\t\tresetProfiling: registry.resetProfiling,\n\t\t\tgetProfilingEnabled: registry.getProfilingEnabled,\n\t\t\tgetProfilingWindow: registry.getProfilingWindow,\n\t\t\tgetProfilingSnapshot: registry.getProfilingSnapshot\n\t\t}\n\t};\n\n\treturn {\n\t\tregistry,\n\t\tcontext,\n\t\tcanvasRef,\n\t\tsize,\n\t\tdprState,\n\t\tmaxDeltaState,\n\t\trenderModeState,\n\t\tautoRenderState,\n\t\trequestFrameSignalRef,\n\t\trequestFrame,\n\t\tinvalidateFrame,\n\t\tadvanceFrame\n\t};\n}\n\nfunction getNormalizedErrorHistoryLimit(value: number): number {\n\tif (!Number.isFinite(value) || value <= 0) {\n\t\treturn 0;\n\t}\n\n\treturn Math.floor(value);\n}\n\nexport function FragCanvas({\n\tmaterial,\n\trenderTargets = {},\n\tpasses = [],\n\tclearColor = [0, 0, 0, 1],\n\toutputColorSpace = 'srgb',\n\trenderMode = 'always',\n\tautoRender = true,\n\tmaxDelta = 0.1,\n\tadapterOptions = undefined,\n\tdeviceDescriptor = undefined,\n\tdpr = getInitialDpr(),\n\tshowErrorOverlay = true,\n\terrorRenderer,\n\tonError = undefined,\n\terrorHistoryLimit = 0,\n\tonErrorHistory = undefined,\n\tclassName = '',\n\tstyle,\n\tchildren\n}: FragCanvasProps) {\n\tconst runtimeRef = useRef<FragCanvasRuntimeState | null>(null);\n\tif (!runtimeRef.current) {\n\t\truntimeRef.current = createRuntimeState(getInitialDpr());\n\t}\n\tconst runtime = runtimeRef.current;\n\n\tconst runtimePropsRef = useRef<RuntimePropsSnapshot>({\n\t\tmaterial,\n\t\trenderTargets,\n\t\tpasses,\n\t\tclearColor,\n\t\toutputColorSpace,\n\t\tadapterOptions,\n\t\tdeviceDescriptor,\n\t\tonError,\n\t\terrorHistoryLimit,\n\t\tonErrorHistory\n\t});\n\truntimePropsRef.current = {\n\t\tmaterial,\n\t\trenderTargets,\n\t\tpasses,\n\t\tclearColor,\n\t\toutputColorSpace,\n\t\tadapterOptions,\n\t\tdeviceDescriptor,\n\t\tonError,\n\t\terrorHistoryLimit,\n\t\tonErrorHistory\n\t};\n\n\tconst [errorReport, setErrorReport] = useState<MotionGPUErrorReport | null>(null);\n\tconst [errorHistory, setErrorHistory] = useState<MotionGPUErrorReport[]>([]);\n\n\tuseEffect(() => {\n\t\truntime.renderModeState.set(renderMode);\n\t}, [renderMode, runtime]);\n\n\tuseEffect(() => {\n\t\truntime.autoRenderState.set(autoRender);\n\t}, [autoRender, runtime]);\n\n\tuseEffect(() => {\n\t\truntime.maxDeltaState.set(maxDelta);\n\t}, [maxDelta, runtime]);\n\n\tuseEffect(() => {\n\t\truntime.dprState.set(dpr);\n\t}, [dpr, runtime]);\n\n\tuseEffect(() => {\n\t\tconst limit = getNormalizedErrorHistoryLimit(errorHistoryLimit);\n\t\tif (limit <= 0) {\n\t\t\tif (errorHistory.length === 0) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetErrorHistory([]);\n\t\t\tonErrorHistory?.([]);\n\t\t\treturn;\n\t\t}\n\n\t\tif (errorHistory.length <= limit) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst trimmed = errorHistory.slice(errorHistory.length - limit);\n\t\tsetErrorHistory(trimmed);\n\t\tonErrorHistory?.(trimmed);\n\t}, [errorHistory, errorHistoryLimit, onErrorHistory]);\n\n\tuseEffect(() => {\n\t\tconst canvas = runtime.canvasRef.current;\n\t\tif (!canvas) {\n\t\t\tconst report = toMotionGPUErrorReport(\n\t\t\t\tnew Error('Canvas element is not available'),\n\t\t\t\t'initialization'\n\t\t\t);\n\t\t\tsetErrorReport(report);\n\t\t\tconst historyLimit = getNormalizedErrorHistoryLimit(\n\t\t\t\truntimePropsRef.current.errorHistoryLimit\n\t\t\t);\n\t\t\tif (historyLimit > 0) {\n\t\t\t\tconst nextHistory = [report].slice(-historyLimit);\n\t\t\t\tsetErrorHistory(nextHistory);\n\t\t\t\truntimePropsRef.current.onErrorHistory?.(nextHistory);\n\t\t\t}\n\t\t\truntimePropsRef.current.onError?.(report);\n\t\t\treturn () => {\n\t\t\t\truntime.registry.clear();\n\t\t\t};\n\t\t}\n\n\t\tconst runtimeLoop = createMotionGPURuntimeLoop({\n\t\t\tcanvas,\n\t\t\tregistry: runtime.registry,\n\t\t\tsize: runtime.size,\n\t\t\tdpr: runtime.dprState,\n\t\t\tmaxDelta: runtime.maxDeltaState,\n\t\t\tgetMaterial: () => runtimePropsRef.current.material,\n\t\t\tgetRenderTargets: () => runtimePropsRef.current.renderTargets,\n\t\t\tgetPasses: () => runtimePropsRef.current.passes,\n\t\t\tgetClearColor: () => runtimePropsRef.current.clearColor,\n\t\t\tgetOutputColorSpace: () => runtimePropsRef.current.outputColorSpace,\n\t\t\tgetAdapterOptions: () => runtimePropsRef.current.adapterOptions,\n\t\t\tgetDeviceDescriptor: () => runtimePropsRef.current.deviceDescriptor,\n\t\t\tgetOnError: () => runtimePropsRef.current.onError,\n\t\t\tgetErrorHistoryLimit: () => runtimePropsRef.current.errorHistoryLimit,\n\t\t\tgetOnErrorHistory: () => runtimePropsRef.current.onErrorHistory,\n\t\t\treportErrorHistory: (history) => {\n\t\t\t\tsetErrorHistory(history);\n\t\t\t},\n\t\t\treportError: (report) => {\n\t\t\t\tsetErrorReport(report);\n\t\t\t}\n\t\t});\n\t\truntime.requestFrameSignalRef.current = runtimeLoop.requestFrame;\n\n\t\treturn () => {\n\t\t\truntime.requestFrameSignalRef.current = null;\n\t\t\truntimeLoop.destroy();\n\t\t};\n\t}, [runtime]);\n\n\tconst canvasStyle: CSSProperties = {\n\t\tposition: 'absolute',\n\t\tinset: 0,\n\t\tdisplay: 'block',\n\t\twidth: '100%',\n\t\theight: '100%',\n\t\t...style\n\t};\n\n\treturn (\n\t\t<FrameRegistryReactContext.Provider value={runtime.registry}>\n\t\t\t<MotionGPUReactContext.Provider value={runtime.context}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"motiongpu-canvas-wrap\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\tminHeight: 0,\n\t\t\t\t\t\toverflow: 'hidden'\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<canvas\n\t\t\t\t\t\tclassName={className}\n\t\t\t\t\t\tstyle={canvasStyle}\n\t\t\t\t\t\tref={(node) => {\n\t\t\t\t\t\t\truntime.canvasRef.current = node ?? undefined;\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t{showErrorOverlay && errorReport ? (\n\t\t\t\t\t\terrorRenderer ? (\n\t\t\t\t\t\t\terrorRenderer(errorReport)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<MotionGPUErrorOverlay report={errorReport} />\n\t\t\t\t\t\t)\n\t\t\t\t\t) : null}\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</MotionGPUReactContext.Provider>\n\t\t</FrameRegistryReactContext.Provider>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"FragCanvas.js","names":[],"sources":["../../src/lib/react/FragCanvas.tsx"],"sourcesContent":["import { createCurrentWritable as currentWritable } from '../core/current-value.js';\nimport { toMotionGPUErrorReport, type MotionGPUErrorReport } from '../core/error-report.js';\nimport type { FragMaterial } from '../core/material.js';\nimport { createFrameRegistry } from '../core/frame-registry.js';\nimport { createMotionGPURuntimeLoop } from '../core/runtime-loop.js';\nimport type {\n\tAnyPass,\n\tOutputColorSpace,\n\tRenderMode,\n\tRenderTargetDefinitionMap\n} from '../core/types.js';\nimport { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';\nimport { FrameRegistryReactContext } from './frame-context.js';\nimport { MotionGPUErrorOverlay } from './MotionGPUErrorOverlay.js';\nimport { MotionGPUReactContext, type MotionGPUContext } from './motiongpu-context.js';\n\nexport interface FragCanvasProps {\n\tmaterial: FragMaterial;\n\trenderTargets?: RenderTargetDefinitionMap;\n\tpasses?: AnyPass[];\n\tclearColor?: [number, number, number, number];\n\toutputColorSpace?: OutputColorSpace;\n\trenderMode?: RenderMode;\n\tautoRender?: boolean;\n\tmaxDelta?: number;\n\tadapterOptions?: GPURequestAdapterOptions;\n\tdeviceDescriptor?: GPUDeviceDescriptor;\n\tdpr?: number;\n\tshowErrorOverlay?: boolean;\n\terrorRenderer?: (report: MotionGPUErrorReport) => ReactNode;\n\tonError?: (report: MotionGPUErrorReport) => void;\n\terrorHistoryLimit?: number;\n\tonErrorHistory?: (history: MotionGPUErrorReport[]) => void;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tchildren?: ReactNode;\n}\n\ninterface RuntimePropsSnapshot {\n\tmaterial: FragMaterial;\n\trenderTargets: RenderTargetDefinitionMap;\n\tpasses: AnyPass[];\n\tclearColor: [number, number, number, number];\n\toutputColorSpace: OutputColorSpace;\n\tadapterOptions: GPURequestAdapterOptions | undefined;\n\tdeviceDescriptor: GPUDeviceDescriptor | undefined;\n\tonError: ((report: MotionGPUErrorReport) => void) | undefined;\n\terrorHistoryLimit: number;\n\tonErrorHistory: ((history: MotionGPUErrorReport[]) => void) | undefined;\n}\n\ninterface FragCanvasRuntimeState {\n\tregistry: ReturnType<typeof createFrameRegistry>;\n\tcontext: MotionGPUContext;\n\tcanvasRef: { current: HTMLCanvasElement | undefined };\n\tsize: ReturnType<typeof currentWritable<{ width: number; height: number }>>;\n\tdprState: ReturnType<typeof currentWritable<number>>;\n\tmaxDeltaState: ReturnType<typeof currentWritable<number>>;\n\trenderModeState: ReturnType<typeof currentWritable<RenderMode>>;\n\tautoRenderState: ReturnType<typeof currentWritable<boolean>>;\n\trequestFrameSignalRef: { current: (() => void) | null };\n\trequestFrame: () => void;\n\tinvalidateFrame: () => void;\n\tadvanceFrame: () => void;\n}\n\nfunction getInitialDpr(): number {\n\tif (typeof window === 'undefined') {\n\t\treturn 1;\n\t}\n\n\treturn window.devicePixelRatio ?? 1;\n}\n\nfunction createRuntimeState(initialDpr: number): FragCanvasRuntimeState {\n\tconst registry = createFrameRegistry({ maxDelta: 0.1 });\n\tconst canvasRef = { current: undefined as HTMLCanvasElement | undefined };\n\tconst requestFrameSignalRef = { current: null as (() => void) | null };\n\tconst requestFrame = (): void => {\n\t\trequestFrameSignalRef.current?.();\n\t};\n\tconst invalidateFrame = (): void => {\n\t\tregistry.invalidate();\n\t\trequestFrame();\n\t};\n\tconst advanceFrame = (): void => {\n\t\tregistry.advance();\n\t\trequestFrame();\n\t};\n\n\tconst size = currentWritable({ width: 0, height: 0 });\n\tconst dprState = currentWritable(initialDpr, requestFrame);\n\tconst maxDeltaState = currentWritable(0.1, (value) => {\n\t\tregistry.setMaxDelta(value);\n\t\trequestFrame();\n\t});\n\tconst renderModeState = currentWritable<RenderMode>('always', (value) => {\n\t\tregistry.setRenderMode(value);\n\t\trequestFrame();\n\t});\n\tconst autoRenderState = currentWritable<boolean>(true, (value) => {\n\t\tregistry.setAutoRender(value);\n\t\trequestFrame();\n\t});\n\tconst userState = currentWritable<Record<string | symbol, unknown>>({});\n\n\tconst context: MotionGPUContext = {\n\t\tget canvas() {\n\t\t\treturn canvasRef.current;\n\t\t},\n\t\tsize,\n\t\tdpr: dprState,\n\t\tmaxDelta: maxDeltaState,\n\t\trenderMode: renderModeState,\n\t\tautoRender: autoRenderState,\n\t\tuser: userState,\n\t\tinvalidate: invalidateFrame,\n\t\tadvance: advanceFrame,\n\t\tscheduler: {\n\t\t\tcreateStage: registry.createStage,\n\t\t\tgetStage: registry.getStage,\n\t\t\tsetDiagnosticsEnabled: registry.setDiagnosticsEnabled,\n\t\t\tgetDiagnosticsEnabled: registry.getDiagnosticsEnabled,\n\t\t\tgetLastRunTimings: registry.getLastRunTimings,\n\t\t\tgetSchedule: registry.getSchedule,\n\t\t\tsetProfilingEnabled: registry.setProfilingEnabled,\n\t\t\tsetProfilingWindow: registry.setProfilingWindow,\n\t\t\tresetProfiling: registry.resetProfiling,\n\t\t\tgetProfilingEnabled: registry.getProfilingEnabled,\n\t\t\tgetProfilingWindow: registry.getProfilingWindow,\n\t\t\tgetProfilingSnapshot: registry.getProfilingSnapshot\n\t\t}\n\t};\n\n\treturn {\n\t\tregistry,\n\t\tcontext,\n\t\tcanvasRef,\n\t\tsize,\n\t\tdprState,\n\t\tmaxDeltaState,\n\t\trenderModeState,\n\t\tautoRenderState,\n\t\trequestFrameSignalRef,\n\t\trequestFrame,\n\t\tinvalidateFrame,\n\t\tadvanceFrame\n\t};\n}\n\nfunction getNormalizedErrorHistoryLimit(value: number): number {\n\tif (!Number.isFinite(value) || value <= 0) {\n\t\treturn 0;\n\t}\n\n\treturn Math.floor(value);\n}\n\nexport function FragCanvas({\n\tmaterial,\n\trenderTargets = {},\n\tpasses = [],\n\tclearColor = [0, 0, 0, 1],\n\toutputColorSpace = 'srgb',\n\trenderMode = 'always',\n\tautoRender = true,\n\tmaxDelta = 0.1,\n\tadapterOptions = undefined,\n\tdeviceDescriptor = undefined,\n\tdpr = getInitialDpr(),\n\tshowErrorOverlay = true,\n\terrorRenderer,\n\tonError = undefined,\n\terrorHistoryLimit = 0,\n\tonErrorHistory = undefined,\n\tclassName = '',\n\tstyle,\n\tchildren\n}: FragCanvasProps) {\n\tconst runtimeRef = useRef<FragCanvasRuntimeState | null>(null);\n\tif (!runtimeRef.current) {\n\t\truntimeRef.current = createRuntimeState(getInitialDpr());\n\t}\n\tconst runtime = runtimeRef.current;\n\n\tconst runtimePropsRef = useRef<RuntimePropsSnapshot>({\n\t\tmaterial,\n\t\trenderTargets,\n\t\tpasses,\n\t\tclearColor,\n\t\toutputColorSpace,\n\t\tadapterOptions,\n\t\tdeviceDescriptor,\n\t\tonError,\n\t\terrorHistoryLimit,\n\t\tonErrorHistory\n\t});\n\truntimePropsRef.current = {\n\t\tmaterial,\n\t\trenderTargets,\n\t\tpasses,\n\t\tclearColor,\n\t\toutputColorSpace,\n\t\tadapterOptions,\n\t\tdeviceDescriptor,\n\t\tonError,\n\t\terrorHistoryLimit,\n\t\tonErrorHistory\n\t};\n\n\tconst [errorReport, setErrorReport] = useState<MotionGPUErrorReport | null>(null);\n\tconst [errorHistory, setErrorHistory] = useState<MotionGPUErrorReport[]>([]);\n\n\tuseEffect(() => {\n\t\truntime.renderModeState.set(renderMode);\n\t}, [renderMode, runtime]);\n\n\tuseEffect(() => {\n\t\truntime.autoRenderState.set(autoRender);\n\t}, [autoRender, runtime]);\n\n\tuseEffect(() => {\n\t\truntime.maxDeltaState.set(maxDelta);\n\t}, [maxDelta, runtime]);\n\n\tuseEffect(() => {\n\t\truntime.dprState.set(dpr);\n\t}, [dpr, runtime]);\n\n\tuseEffect(() => {\n\t\tconst limit = getNormalizedErrorHistoryLimit(errorHistoryLimit);\n\t\tif (limit <= 0) {\n\t\t\tif (errorHistory.length === 0) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetErrorHistory([]);\n\t\t\tonErrorHistory?.([]);\n\t\t\treturn;\n\t\t}\n\n\t\tif (errorHistory.length <= limit) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst trimmed = errorHistory.slice(errorHistory.length - limit);\n\t\tsetErrorHistory(trimmed);\n\t\tonErrorHistory?.(trimmed);\n\t}, [errorHistory, errorHistoryLimit, onErrorHistory]);\n\n\tuseEffect(() => {\n\t\tconst canvas = runtime.canvasRef.current;\n\t\tif (!canvas) {\n\t\t\tconst report = toMotionGPUErrorReport(\n\t\t\t\tnew Error('Canvas element is not available'),\n\t\t\t\t'initialization'\n\t\t\t);\n\t\t\tsetErrorReport(report);\n\t\t\tconst historyLimit = getNormalizedErrorHistoryLimit(\n\t\t\t\truntimePropsRef.current.errorHistoryLimit\n\t\t\t);\n\t\t\tif (historyLimit > 0) {\n\t\t\t\tconst nextHistory = [report].slice(-historyLimit);\n\t\t\t\tsetErrorHistory(nextHistory);\n\t\t\t\truntimePropsRef.current.onErrorHistory?.(nextHistory);\n\t\t\t}\n\t\t\truntimePropsRef.current.onError?.(report);\n\t\t\treturn () => {\n\t\t\t\truntime.registry.clear();\n\t\t\t};\n\t\t}\n\n\t\tconst runtimeLoop = createMotionGPURuntimeLoop({\n\t\t\tcanvas,\n\t\t\tregistry: runtime.registry,\n\t\t\tsize: runtime.size,\n\t\t\tdpr: runtime.dprState,\n\t\t\tmaxDelta: runtime.maxDeltaState,\n\t\t\tgetMaterial: () => runtimePropsRef.current.material,\n\t\t\tgetRenderTargets: () => runtimePropsRef.current.renderTargets,\n\t\t\tgetPasses: () => runtimePropsRef.current.passes,\n\t\t\tgetClearColor: () => runtimePropsRef.current.clearColor,\n\t\t\tgetOutputColorSpace: () => runtimePropsRef.current.outputColorSpace,\n\t\t\tgetAdapterOptions: () => runtimePropsRef.current.adapterOptions,\n\t\t\tgetDeviceDescriptor: () => runtimePropsRef.current.deviceDescriptor,\n\t\t\tgetOnError: () => runtimePropsRef.current.onError,\n\t\t\tgetErrorHistoryLimit: () => runtimePropsRef.current.errorHistoryLimit,\n\t\t\tgetOnErrorHistory: () => runtimePropsRef.current.onErrorHistory,\n\t\t\treportErrorHistory: (history) => {\n\t\t\t\tsetErrorHistory(history);\n\t\t\t},\n\t\t\treportError: (report) => {\n\t\t\t\tsetErrorReport(report);\n\t\t\t}\n\t\t});\n\t\truntime.requestFrameSignalRef.current = runtimeLoop.requestFrame;\n\n\t\treturn () => {\n\t\t\truntime.requestFrameSignalRef.current = null;\n\t\t\truntimeLoop.destroy();\n\t\t};\n\t}, [runtime]);\n\n\tconst canvasStyle: CSSProperties = {\n\t\tposition: 'absolute',\n\t\tinset: 0,\n\t\tdisplay: 'block',\n\t\twidth: '100%',\n\t\theight: '100%',\n\t\t...style\n\t};\n\n\treturn (\n\t\t<FrameRegistryReactContext.Provider value={runtime.registry}>\n\t\t\t<MotionGPUReactContext.Provider value={runtime.context}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"motiongpu-canvas-wrap\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\tminHeight: 0,\n\t\t\t\t\t\toverflow: 'hidden'\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<canvas\n\t\t\t\t\t\tclassName={className}\n\t\t\t\t\t\tstyle={canvasStyle}\n\t\t\t\t\t\tref={(node) => {\n\t\t\t\t\t\t\truntime.canvasRef.current = node ?? undefined;\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t{showErrorOverlay && errorReport ? (\n\t\t\t\t\t\terrorRenderer ? (\n\t\t\t\t\t\t\terrorRenderer(errorReport)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<MotionGPUErrorOverlay report={errorReport} />\n\t\t\t\t\t\t)\n\t\t\t\t\t) : null}\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</MotionGPUReactContext.Provider>\n\t\t</FrameRegistryReactContext.Provider>\n\t);\n}\n"],"mappings":"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"}

package/dist/react/MotionGPUErrorOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MotionGPUErrorOverlay.d.ts","sourceRoot":"","sources":["../../src/lib/react/MotionGPUErrorOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGpE,UAAU,0BAA0B;IACnC,MAAM,EAAE,oBAAoB,CAAC;CAC7B;AA8SD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,EAAE,0BAA0B,2CAoF3E"}
+{"version":3,"file":"MotionGPUErrorOverlay.d.ts","sourceRoot":"","sources":["../../src/lib/react/MotionGPUErrorOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGpE,UAAU,0BAA0B;IACnC,MAAM,EAAE,oBAAoB,CAAC;CAC7B;AA8ZD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,EAAE,0BAA0B,2CAwG3E"}

package/dist/react/MotionGPUErrorOverlay.js

@@ -71,6 +71,19 @@ var MOTIONGPU_ERROR_OVERLAY_STYLES = `
 	border-bottom: 1px solid var(--motiongpu-color-border);
 }
 
+.motiongpu-error-header-top {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.75rem;
+}
+
+.motiongpu-error-badges {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	flex-wrap: wrap;
+}
+
 .motiongpu-error-badge-wrap {
 	display: inline-flex;
 	align-items: center;
@@ -82,7 +95,7 @@ var MOTIONGPU_ERROR_OVERLAY_STYLES = `
 	background: var(--motiongpu-color-background-muted);
 }
 
-.motiongpu-error-phase {
+.motiongpu-error-badge {
 	display: inline-flex;
 	align-items: center;
 	margin: 0;
@@ -102,6 +115,20 @@ var MOTIONGPU_ERROR_OVERLAY_STYLES = `
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
 }
 
+.motiongpu-error-recoverable {
+	margin: 0;
+	font-size: 0.67rem;
+	line-height: 1.2;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--motiongpu-color-foreground-muted);
+}
+
+.motiongpu-error-recoverable span {
+	font-family: var(--motiongpu-font-mono);
+	color: var(--motiongpu-color-foreground);
+}
+
 .motiongpu-error-title {
 	margin: 0;
 	font-size: clamp(1.02rem, 1vw + 0.72rem, 1.32rem);
@@ -281,6 +308,11 @@ var MOTIONGPU_ERROR_OVERLAY_STYLES = `
 	.motiongpu-error-title {
 		font-size: 1.02rem;
 	}
+
+	.motiongpu-error-header-top {
+		flex-direction: column;
+		align-items: flex-start;
+	}
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -293,7 +325,52 @@ function normalizeErrorText(value) {
 	return value.trim().replace(/[.:!]+$/g, "").toLowerCase();
 }
 function shouldShowErrorMessage(value) {
-	return normalizeErrorText(value.message) !== normalizeErrorText(value.title);
+	return resolveDisplayMessage(value).length > 0;
+}
+function resolveDisplayMessage(value) {
+	const rawMessage = value.message.trim();
+	if (rawMessage.length === 0) return "";
+	if (normalizeErrorText(rawMessage) === normalizeErrorText(value.title)) return "";
+	const escapedTitle = value.title.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const prefixPattern = new RegExp(`^${escapedTitle}\\s*[:\\-|]\\s*`, "i");
+	const stripped = rawMessage.replace(prefixPattern, "").trim();
+	return stripped.length > 0 ? stripped : rawMessage;
+}
+function formatRuntimeContext(context) {
+	if (!context) return "";
+	const indentBlock = (value, spaces = 2) => {
+		const prefix = " ".repeat(spaces);
+		return value.split("\n").map((line) => `${prefix}${line}`).join("\n");
+	};
+	const formatMaterialSignature = (value) => {
+		const trimmed = value.trim();
+		if (trimmed.length === 0) return "<empty>";
+		try {
+			return JSON.stringify(JSON.parse(trimmed), null, 2);
+		} catch {
+			return trimmed;
+		}
+	};
+	const lines = [];
+	if (context.materialSignature) {
+		lines.push("materialSignature:");
+		lines.push(indentBlock(formatMaterialSignature(context.materialSignature)));
+	}
+	if (context.passGraph) {
+		lines.push("passGraph:");
+		lines.push(`  passCount: ${context.passGraph.passCount}`);
+		lines.push(`  enabledPassCount: ${context.passGraph.enabledPassCount}`);
+		lines.push("  inputs:");
+		if (context.passGraph.inputs.length === 0) lines.push("    - <none>");
+		else for (const input of context.passGraph.inputs) lines.push(`    - ${input}`);
+		lines.push("  outputs:");
+		if (context.passGraph.outputs.length === 0) lines.push("    - <none>");
+		else for (const output of context.passGraph.outputs) lines.push(`    - ${output}`);
+	}
+	lines.push("activeRenderTargets:");
+	if (context.activeRenderTargets.length === 0) lines.push("  - <none>");
+	else for (const target of context.activeRenderTargets) lines.push(`  - ${target}`);
+	return lines.join("\n");
 }
 function MotionGPUErrorOverlay({ report }) {
 	const detailsSummary = report.source ? "Additional diagnostics" : "Technical details";
@@ -309,22 +386,41 @@ function MotionGPUErrorOverlay({ report }) {
 			children: [
 				/* @__PURE__ */ jsxs("header", {
 					className: "motiongpu-error-header",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "motiongpu-error-badge-wrap",
-						children: /* @__PURE__ */ jsx("p", {
-							className: "motiongpu-error-phase",
-							children: report.phase
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "motiongpu-error-header-top",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "motiongpu-error-badges",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "motiongpu-error-badge-wrap",
+									children: /* @__PURE__ */ jsx("p", {
+										className: "motiongpu-error-badge motiongpu-error-badge-phase",
+										children: report.phase
+									})
+								}), /* @__PURE__ */ jsx("div", {
+									className: "motiongpu-error-badge-wrap",
+									children: /* @__PURE__ */ jsx("p", {
+										className: "motiongpu-error-badge motiongpu-error-badge-severity",
+										children: report.severity
+									})
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsx("h2", {
+							className: "motiongpu-error-title",
+							children: report.title
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "motiongpu-error-recoverable",
+							children: ["Recoverable: ", /* @__PURE__ */ jsx("span", { children: report.recoverable ? "yes" : "no" })]
 						})
-					}), /* @__PURE__ */ jsx("h2", {
-						className: "motiongpu-error-title",
-						children: report.title
-					})]
+					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "motiongpu-error-body",
 					children: [shouldShowErrorMessage(report) ? /* @__PURE__ */ jsx("p", {
 						className: "motiongpu-error-message",
-						children: report.message
+						children: resolveDisplayMessage(report)
 					}) : null, /* @__PURE__ */ jsx("p", {
 						className: "motiongpu-error-hint",
 						children: report.hint
@@ -369,14 +465,21 @@ function MotionGPUErrorOverlay({ report }) {
 				}) : null,
 				/* @__PURE__ */ jsxs("div", {
 					className: "motiongpu-error-sections",
-					children: [report.details.length > 0 ? /* @__PURE__ */ jsxs("details", {
-						className: "motiongpu-error-details",
-						open: true,
-						children: [/* @__PURE__ */ jsx("summary", { children: detailsSummary }), /* @__PURE__ */ jsx("pre", { children: report.details.join("\n") })]
-					}) : null, report.stack.length > 0 ? /* @__PURE__ */ jsxs("details", {
-						className: "motiongpu-error-details",
-						children: [/* @__PURE__ */ jsx("summary", { children: "Stack trace" }), /* @__PURE__ */ jsx("pre", { children: report.stack.join("\n") })]
-					}) : null]
+					children: [
+						report.details.length > 0 ? /* @__PURE__ */ jsxs("details", {
+							className: "motiongpu-error-details",
+							open: true,
+							children: [/* @__PURE__ */ jsx("summary", { children: detailsSummary }), /* @__PURE__ */ jsx("pre", { children: report.details.join("\n") })]
+						}) : null,
+						report.stack.length > 0 ? /* @__PURE__ */ jsxs("details", {
+							className: "motiongpu-error-details",
+							children: [/* @__PURE__ */ jsx("summary", { children: "Stack trace" }), /* @__PURE__ */ jsx("pre", { children: report.stack.join("\n") })]
+						}) : null,
+						report.context ? /* @__PURE__ */ jsxs("details", {
+							className: "motiongpu-error-details",
+							children: [/* @__PURE__ */ jsx("summary", { children: "Runtime context" }), /* @__PURE__ */ jsx("pre", { children: formatRuntimeContext(report.context) })]
+						}) : null
+					]
 				})
 			]
 		})

package/dist/react/MotionGPUErrorOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"MotionGPUErrorOverlay.js","names":[],"sources":["../../src/lib/react/MotionGPUErrorOverlay.tsx"],"sourcesContent":["import type { MotionGPUErrorReport } from '../core/error-report.js';\nimport { Portal } from './Portal.js';\n\ninterface MotionGPUErrorOverlayProps {\n\treport: MotionGPUErrorReport;\n}\n\nconst MOTIONGPU_ERROR_OVERLAY_STYLES = `\n.motiongpu-error-overlay {\n\t--motiongpu-base-hue: var(--base-hue, 265);\n\t--motiongpu-color-background: oklch(0.2178 0.0056 var(--motiongpu-base-hue));\n\t--motiongpu-color-background-muted: oklch(0.261 0.007 var(--motiongpu-base-hue));\n\t--motiongpu-color-foreground: oklch(1 0 0);\n\t--motiongpu-color-foreground-muted: oklch(0.6699 0.0081 var(--motiongpu-base-hue));\n\t--motiongpu-color-card: var(--motiongpu-color-background);\n\t--motiongpu-color-accent: oklch(0.6996 0.181959 44.4414);\n\t--motiongpu-color-accent-secondary: oklch(0.5096 0.131959 44.4414);\n\t--motiongpu-color-border: oklch(0.928 0.013 var(--motiongpu-base-hue) / 0.05);\n\t--motiongpu-color-white-fixed: oklch(1 0 0);\n\t--motiongpu-shadow-card: var(\n\t\t--shadow-2xl,\n\t\t0px 1px 1px -0.5px rgba(0, 0, 0, 0.06),\n\t\t0px 3px 3px -1.5px rgba(0, 0, 0, 0.06),\n\t\t0px 6px 6px -3px rgba(0, 0, 0, 0.06),\n\t\t0px 12px 12px -6px rgba(0, 0, 0, 0.06),\n\t\t0px 24px 24px -12px rgba(0, 0, 0, 0.05),\n\t\t0px 48px 48px -24px rgba(0, 0, 0, 0.06)\n\t);\n\t--motiongpu-radius-md: var(--radius-md, 0.5rem);\n\t--motiongpu-radius-lg: var(--radius-lg, 0.75rem);\n\t--motiongpu-radius-xl: var(--radius-xl, 1rem);\n\t--motiongpu-font-sans: var(\n\t\t--font-sans,\n\t\t'Inter',\n\t\t'Segoe UI',\n\t\t'Helvetica Neue',\n\t\tArial,\n\t\tsans-serif\n\t);\n\t--motiongpu-font-mono: var(--font-mono, 'SFMono-Regular', 'Menlo', 'Consolas', monospace);\n\tposition: fixed;\n\tinset: 0;\n\tdisplay: grid;\n\tplace-items: center;\n\tpadding: clamp(0.75rem, 1.4vw, 1.5rem);\n\tbackground: rgba(0, 0, 0, 0.8);\n\tbackdrop-filter: blur(10px);\n\tz-index: 2147483647;\n\tfont-family: var(--motiongpu-font-sans);\n\tcolor-scheme: dark;\n}\n\n.motiongpu-error-dialog {\n\twidth: min(52rem, calc(100vw - 1.5rem));\n\tmax-height: min(84vh, 44rem);\n\toverflow: auto;\n\tmargin: 0;\n\tpadding: 1.1rem;\n\tborder: 1px solid var(--motiongpu-color-border);\n\tborder-radius: var(--motiongpu-radius-xl);\n\tmax-width: calc(100vw - 1.5rem);\n\tbox-sizing: border-box;\n\tfont-size: 0.875rem;\n\tfont-weight: 400;\n\tline-height: 1.45;\n\tbackground: var(--motiongpu-color-card);\n\tcolor: var(--motiongpu-color-foreground);\n\tbox-shadow: var(--motiongpu-shadow-card);\n}\n\n.motiongpu-error-header {\n\tdisplay: grid;\n\tgap: 0.55rem;\n\tpadding-bottom: 0.9rem;\n\tborder-bottom: 1px solid var(--motiongpu-color-border);\n}\n\n.motiongpu-error-badge-wrap {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 0.4rem;\n\twidth: fit-content;\n\tpadding: 0.18rem;\n\tborder-radius: 999px;\n\tborder: 1px solid var(--motiongpu-color-border);\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-phase {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tmargin: 0;\n\tpadding: 0.22rem 0.56rem;\n\tborder-radius: 999px;\n\tfont-size: 0.66rem;\n\tletter-spacing: 0.08em;\n\tline-height: 1;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n\tcolor: var(--motiongpu-color-white-fixed);\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\tvar(--motiongpu-color-accent) 0%,\n\t\tvar(--motiongpu-color-accent-secondary) 100%\n\t);\n\tbox-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);\n}\n\n.motiongpu-error-title {\n\tmargin: 0;\n\tfont-size: clamp(1.02rem, 1vw + 0.72rem, 1.32rem);\n\tfont-weight: 500;\n\tline-height: 1.18;\n\tletter-spacing: -0.02em;\n\ttext-wrap: balance;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-body {\n\tdisplay: grid;\n\tgap: 0.62rem;\n\tmargin-top: 0.92rem;\n}\n\n.motiongpu-error-message {\n\tmargin: 0;\n\tpadding: 0.72rem 0.78rem;\n\tborder: 1px solid color-mix(in oklch, var(--motiongpu-color-accent) 28%, transparent);\n\tborder-radius: var(--motiongpu-radius-md);\n\tbackground: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);\n\tfont-size: 0.82rem;\n\tline-height: 1.4;\n\tfont-weight: 400;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-hint {\n\tmargin: 0;\n\tfont-size: 0.82rem;\n\tline-height: 1.45;\n\tfont-weight: 400;\n\tcolor: var(--motiongpu-color-foreground-muted);\n}\n\n.motiongpu-error-sections {\n\tdisplay: grid;\n\tgap: 0.62rem;\n\tmargin-top: 0.95rem;\n}\n\n.motiongpu-error-source {\n\tdisplay: grid;\n\tgap: 0.48rem;\n\tmargin-top: 0.96rem;\n}\n\n.motiongpu-error-source-title {\n\tmargin: 0;\n\tfont-size: 0.8rem;\n\tfont-weight: 500;\n\tline-height: 1.3;\n\tletter-spacing: 0.045em;\n\ttext-transform: uppercase;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-source-frame {\n\tborder: 1px solid var(--motiongpu-color-border);\n\tborder-radius: var(--motiongpu-radius-lg);\n\toverflow: hidden;\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-source-tabs {\n\tdisplay: flex;\n\talign-items: stretch;\n\tborder-bottom: 1px solid var(--motiongpu-color-border);\n\tbackground: var(--motiongpu-color-background);\n}\n\n.motiongpu-error-source-tab {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tpadding: 0.5rem 0.68rem;\n\tfont-size: 0.76rem;\n\tfont-weight: 400;\n\tline-height: 1.2;\n\tcolor: var(--motiongpu-color-foreground-muted);\n\tborder-right: 1px solid var(--motiongpu-color-border);\n}\n\n.motiongpu-error-source-tab-active {\n\tcolor: var(--motiongpu-color-foreground);\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-source-tab-spacer {\n\tflex: 1 1 auto;\n}\n\n.motiongpu-error-source-snippet {\n\tdisplay: grid;\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-source-row {\n\tdisplay: grid;\n\tgrid-template-columns: 2rem minmax(0, 1fr);\n\talign-items: start;\n\tgap: 0.42rem;\n\tpadding: 0.2rem 0.68rem;\n}\n\n.motiongpu-error-source-row-active {\n\tbackground: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);\n}\n\n.motiongpu-error-source-line {\n\tfont-family: var(--motiongpu-font-mono);\n\tfont-size: 0.77rem;\n\tfont-weight: 400;\n\tline-height: 1.3;\n\tfont-variant-numeric: tabular-nums;\n\tfont-feature-settings: 'tnum' 1;\n\tborder-right: 1px solid var(--motiongpu-color-border);\n\tcolor: var(--motiongpu-color-foreground-muted);\n\ttext-align: left;\n}\n\n.motiongpu-error-source-code {\n\tfont-family: var(--motiongpu-font-mono);\n\tfont-size: 0.77rem;\n\tfont-weight: 400;\n\tline-height: 1.3;\n\tcolor: var(--motiongpu-color-foreground);\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n}\n\n.motiongpu-error-details {\n\tborder: 1px solid var(--motiongpu-color-border);\n\tborder-radius: var(--motiongpu-radius-lg);\n\toverflow: hidden;\n\tbackground: var(--motiongpu-color-background);\n}\n\n.motiongpu-error-details summary {\n\tcursor: pointer;\n\tpadding: 0.56rem 0.68rem;\n\tfont-size: 0.7rem;\n\tletter-spacing: 0.07em;\n\tline-height: 1.2;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-details[open] summary {\n\tborder-bottom: 1px solid var(--motiongpu-color-border);\n}\n\n.motiongpu-error-details pre {\n\tmargin: 0;\n\tpadding: 0.62rem 0.68rem;\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n\toverflow: auto;\n\tbackground: var(--motiongpu-color-background-muted);\n\tfont-size: 0.74rem;\n\tline-height: 1.4;\n\tfont-weight: 400;\n\tcolor: var(--motiongpu-color-foreground);\n\tfont-family: var(--motiongpu-font-mono);\n}\n\n@media (max-width: 42rem) {\n\t.motiongpu-error-overlay {\n\t\tpadding: 0.62rem;\n\t}\n\n\t.motiongpu-error-dialog {\n\t\tpadding: 0.85rem;\n\t}\n\n\t.motiongpu-error-title {\n\t\tfont-size: 1.02rem;\n\t}\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.motiongpu-error-overlay {\n\t\tbackdrop-filter: none;\n\t}\n}\n`;\n\nfunction normalizeErrorText(value: string): string {\n\treturn value\n\t\t.trim()\n\t\t.replace(/[.:!]+$/g, '')\n\t\t.toLowerCase();\n}\n\nfunction shouldShowErrorMessage(value: MotionGPUErrorReport): boolean {\n\treturn normalizeErrorText(value.message) !== normalizeErrorText(value.title);\n}\n\nexport function MotionGPUErrorOverlay({ report }: MotionGPUErrorOverlayProps) {\n\tconst detailsSummary = report.source ? 'Additional diagnostics' : 'Technical details';\n\n\treturn (\n\t\t<Portal>\n\t\t\t<style>{MOTIONGPU_ERROR_OVERLAY_STYLES}</style>\n\t\t\t<div className=\"motiongpu-error-overlay\" role=\"presentation\">\n\t\t\t\t<section\n\t\t\t\t\tclassName=\"motiongpu-error-dialog\"\n\t\t\t\t\trole=\"alertdialog\"\n\t\t\t\t\taria-live=\"assertive\"\n\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\tdata-testid=\"motiongpu-error\"\n\t\t\t\t>\n\t\t\t\t\t<header className=\"motiongpu-error-header\">\n\t\t\t\t\t\t<div className=\"motiongpu-error-badge-wrap\">\n\t\t\t\t\t\t\t<p className=\"motiongpu-error-phase\">{report.phase}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<h2 className=\"motiongpu-error-title\">{report.title}</h2>\n\t\t\t\t\t</header>\n\t\t\t\t\t<div className=\"motiongpu-error-body\">\n\t\t\t\t\t\t{shouldShowErrorMessage(report) ? (\n\t\t\t\t\t\t\t<p className=\"motiongpu-error-message\">{report.message}</p>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<p className=\"motiongpu-error-hint\">{report.hint}</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{report.source ? (\n\t\t\t\t\t\t<section className=\"motiongpu-error-source\" aria-label=\"Source\">\n\t\t\t\t\t\t\t<h3 className=\"motiongpu-error-source-title\">Source</h3>\n\t\t\t\t\t\t\t<div className=\"motiongpu-error-source-frame\" role=\"presentation\">\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"motiongpu-error-source-tabs\"\n\t\t\t\t\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t\t\t\t\taria-label=\"Source files\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"motiongpu-error-source-tab motiongpu-error-source-tab-active\"\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\taria-selected=\"true\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{report.source.location}\n\t\t\t\t\t\t\t\t\t\t{report.source.column ? `, col ${report.source.column}` : ''}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"motiongpu-error-source-tab-spacer\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"motiongpu-error-source-snippet\">\n\t\t\t\t\t\t\t\t\t{report.source.snippet.map((snippetLine) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={`snippet-${snippetLine.number}`}\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tsnippetLine.highlight\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'motiongpu-error-source-row motiongpu-error-source-row-active'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'motiongpu-error-source-row'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"motiongpu-error-source-line\">{snippetLine.number}</span>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"motiongpu-error-source-code\">{snippetLine.code || ' '}</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</section>\n\t\t\t\t\t) : null}\n\n\t\t\t\t\t<div className=\"motiongpu-error-sections\">\n\t\t\t\t\t\t{report.details.length > 0 ? (\n\t\t\t\t\t\t\t<details className=\"motiongpu-error-details\" open>\n\t\t\t\t\t\t\t\t<summary>{detailsSummary}</summary>\n\t\t\t\t\t\t\t\t<pre>{report.details.join('\\n')}</pre>\n\t\t\t\t\t\t\t</details>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{report.stack.length > 0 ? (\n\t\t\t\t\t\t\t<details className=\"motiongpu-error-details\">\n\t\t\t\t\t\t\t\t<summary>Stack trace</summary>\n\t\t\t\t\t\t\t\t<pre>{report.stack.join('\\n')}</pre>\n\t\t\t\t\t\t\t</details>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</Portal>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"MotionGPUErrorOverlay.js","names":[],"sources":["../../src/lib/react/MotionGPUErrorOverlay.tsx"],"sourcesContent":["import type { MotionGPUErrorReport } from '../core/error-report.js';\nimport { Portal } from './Portal.js';\n\ninterface MotionGPUErrorOverlayProps {\n\treport: MotionGPUErrorReport;\n}\n\nconst MOTIONGPU_ERROR_OVERLAY_STYLES = `\n.motiongpu-error-overlay {\n\t--motiongpu-base-hue: var(--base-hue, 265);\n\t--motiongpu-color-background: oklch(0.2178 0.0056 var(--motiongpu-base-hue));\n\t--motiongpu-color-background-muted: oklch(0.261 0.007 var(--motiongpu-base-hue));\n\t--motiongpu-color-foreground: oklch(1 0 0);\n\t--motiongpu-color-foreground-muted: oklch(0.6699 0.0081 var(--motiongpu-base-hue));\n\t--motiongpu-color-card: var(--motiongpu-color-background);\n\t--motiongpu-color-accent: oklch(0.6996 0.181959 44.4414);\n\t--motiongpu-color-accent-secondary: oklch(0.5096 0.131959 44.4414);\n\t--motiongpu-color-border: oklch(0.928 0.013 var(--motiongpu-base-hue) / 0.05);\n\t--motiongpu-color-white-fixed: oklch(1 0 0);\n\t--motiongpu-shadow-card: var(\n\t\t--shadow-2xl,\n\t\t0px 1px 1px -0.5px rgba(0, 0, 0, 0.06),\n\t\t0px 3px 3px -1.5px rgba(0, 0, 0, 0.06),\n\t\t0px 6px 6px -3px rgba(0, 0, 0, 0.06),\n\t\t0px 12px 12px -6px rgba(0, 0, 0, 0.06),\n\t\t0px 24px 24px -12px rgba(0, 0, 0, 0.05),\n\t\t0px 48px 48px -24px rgba(0, 0, 0, 0.06)\n\t);\n\t--motiongpu-radius-md: var(--radius-md, 0.5rem);\n\t--motiongpu-radius-lg: var(--radius-lg, 0.75rem);\n\t--motiongpu-radius-xl: var(--radius-xl, 1rem);\n\t--motiongpu-font-sans: var(\n\t\t--font-sans,\n\t\t'Inter',\n\t\t'Segoe UI',\n\t\t'Helvetica Neue',\n\t\tArial,\n\t\tsans-serif\n\t);\n\t--motiongpu-font-mono: var(--font-mono, 'SFMono-Regular', 'Menlo', 'Consolas', monospace);\n\tposition: fixed;\n\tinset: 0;\n\tdisplay: grid;\n\tplace-items: center;\n\tpadding: clamp(0.75rem, 1.4vw, 1.5rem);\n\tbackground: rgba(0, 0, 0, 0.8);\n\tbackdrop-filter: blur(10px);\n\tz-index: 2147483647;\n\tfont-family: var(--motiongpu-font-sans);\n\tcolor-scheme: dark;\n}\n\n.motiongpu-error-dialog {\n\twidth: min(52rem, calc(100vw - 1.5rem));\n\tmax-height: min(84vh, 44rem);\n\toverflow: auto;\n\tmargin: 0;\n\tpadding: 1.1rem;\n\tborder: 1px solid var(--motiongpu-color-border);\n\tborder-radius: var(--motiongpu-radius-xl);\n\tmax-width: calc(100vw - 1.5rem);\n\tbox-sizing: border-box;\n\tfont-size: 0.875rem;\n\tfont-weight: 400;\n\tline-height: 1.45;\n\tbackground: var(--motiongpu-color-card);\n\tcolor: var(--motiongpu-color-foreground);\n\tbox-shadow: var(--motiongpu-shadow-card);\n}\n\n.motiongpu-error-header {\n\tdisplay: grid;\n\tgap: 0.55rem;\n\tpadding-bottom: 0.9rem;\n\tborder-bottom: 1px solid var(--motiongpu-color-border);\n}\n\n.motiongpu-error-header-top {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 0.75rem;\n}\n\n.motiongpu-error-badges {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 0.4rem;\n\tflex-wrap: wrap;\n}\n\n.motiongpu-error-badge-wrap {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 0.4rem;\n\twidth: fit-content;\n\tpadding: 0.18rem;\n\tborder-radius: 999px;\n\tborder: 1px solid var(--motiongpu-color-border);\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-badge {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tmargin: 0;\n\tpadding: 0.22rem 0.56rem;\n\tborder-radius: 999px;\n\tfont-size: 0.66rem;\n\tletter-spacing: 0.08em;\n\tline-height: 1;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n\tcolor: var(--motiongpu-color-white-fixed);\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\tvar(--motiongpu-color-accent) 0%,\n\t\tvar(--motiongpu-color-accent-secondary) 100%\n\t);\n\tbox-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);\n}\n\n.motiongpu-error-recoverable {\n\tmargin: 0;\n\tfont-size: 0.67rem;\n\tline-height: 1.2;\n\tletter-spacing: 0.06em;\n\ttext-transform: uppercase;\n\tcolor: var(--motiongpu-color-foreground-muted);\n}\n\n.motiongpu-error-recoverable span {\n\tfont-family: var(--motiongpu-font-mono);\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-title {\n\tmargin: 0;\n\tfont-size: clamp(1.02rem, 1vw + 0.72rem, 1.32rem);\n\tfont-weight: 500;\n\tline-height: 1.18;\n\tletter-spacing: -0.02em;\n\ttext-wrap: balance;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-body {\n\tdisplay: grid;\n\tgap: 0.62rem;\n\tmargin-top: 0.92rem;\n}\n\n.motiongpu-error-message {\n\tmargin: 0;\n\tpadding: 0.72rem 0.78rem;\n\tborder: 1px solid color-mix(in oklch, var(--motiongpu-color-accent) 28%, transparent);\n\tborder-radius: var(--motiongpu-radius-md);\n\tbackground: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);\n\tfont-size: 0.82rem;\n\tline-height: 1.4;\n\tfont-weight: 400;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-hint {\n\tmargin: 0;\n\tfont-size: 0.82rem;\n\tline-height: 1.45;\n\tfont-weight: 400;\n\tcolor: var(--motiongpu-color-foreground-muted);\n}\n\n.motiongpu-error-sections {\n\tdisplay: grid;\n\tgap: 0.62rem;\n\tmargin-top: 0.95rem;\n}\n\n.motiongpu-error-source {\n\tdisplay: grid;\n\tgap: 0.48rem;\n\tmargin-top: 0.96rem;\n}\n\n.motiongpu-error-source-title {\n\tmargin: 0;\n\tfont-size: 0.8rem;\n\tfont-weight: 500;\n\tline-height: 1.3;\n\tletter-spacing: 0.045em;\n\ttext-transform: uppercase;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-source-frame {\n\tborder: 1px solid var(--motiongpu-color-border);\n\tborder-radius: var(--motiongpu-radius-lg);\n\toverflow: hidden;\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-source-tabs {\n\tdisplay: flex;\n\talign-items: stretch;\n\tborder-bottom: 1px solid var(--motiongpu-color-border);\n\tbackground: var(--motiongpu-color-background);\n}\n\n.motiongpu-error-source-tab {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tpadding: 0.5rem 0.68rem;\n\tfont-size: 0.76rem;\n\tfont-weight: 400;\n\tline-height: 1.2;\n\tcolor: var(--motiongpu-color-foreground-muted);\n\tborder-right: 1px solid var(--motiongpu-color-border);\n}\n\n.motiongpu-error-source-tab-active {\n\tcolor: var(--motiongpu-color-foreground);\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-source-tab-spacer {\n\tflex: 1 1 auto;\n}\n\n.motiongpu-error-source-snippet {\n\tdisplay: grid;\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-source-row {\n\tdisplay: grid;\n\tgrid-template-columns: 2rem minmax(0, 1fr);\n\talign-items: start;\n\tgap: 0.42rem;\n\tpadding: 0.2rem 0.68rem;\n}\n\n.motiongpu-error-source-row-active {\n\tbackground: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);\n}\n\n.motiongpu-error-source-line {\n\tfont-family: var(--motiongpu-font-mono);\n\tfont-size: 0.77rem;\n\tfont-weight: 400;\n\tline-height: 1.3;\n\tfont-variant-numeric: tabular-nums;\n\tfont-feature-settings: 'tnum' 1;\n\tborder-right: 1px solid var(--motiongpu-color-border);\n\tcolor: var(--motiongpu-color-foreground-muted);\n\ttext-align: left;\n}\n\n.motiongpu-error-source-code {\n\tfont-family: var(--motiongpu-font-mono);\n\tfont-size: 0.77rem;\n\tfont-weight: 400;\n\tline-height: 1.3;\n\tcolor: var(--motiongpu-color-foreground);\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n}\n\n.motiongpu-error-details {\n\tborder: 1px solid var(--motiongpu-color-border);\n\tborder-radius: var(--motiongpu-radius-lg);\n\toverflow: hidden;\n\tbackground: var(--motiongpu-color-background);\n}\n\n.motiongpu-error-details summary {\n\tcursor: pointer;\n\tpadding: 0.56rem 0.68rem;\n\tfont-size: 0.7rem;\n\tletter-spacing: 0.07em;\n\tline-height: 1.2;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-details[open] summary {\n\tborder-bottom: 1px solid var(--motiongpu-color-border);\n}\n\n.motiongpu-error-details pre {\n\tmargin: 0;\n\tpadding: 0.62rem 0.68rem;\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n\toverflow: auto;\n\tbackground: var(--motiongpu-color-background-muted);\n\tfont-size: 0.74rem;\n\tline-height: 1.4;\n\tfont-weight: 400;\n\tcolor: var(--motiongpu-color-foreground);\n\tfont-family: var(--motiongpu-font-mono);\n}\n\n@media (max-width: 42rem) {\n\t.motiongpu-error-overlay {\n\t\tpadding: 0.62rem;\n\t}\n\n\t.motiongpu-error-dialog {\n\t\tpadding: 0.85rem;\n\t}\n\n\t.motiongpu-error-title {\n\t\tfont-size: 1.02rem;\n\t}\n\n\t.motiongpu-error-header-top {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t}\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.motiongpu-error-overlay {\n\t\tbackdrop-filter: none;\n\t}\n}\n`;\n\nfunction normalizeErrorText(value: string): string {\n\treturn value\n\t\t.trim()\n\t\t.replace(/[.:!]+$/g, '')\n\t\t.toLowerCase();\n}\n\nfunction shouldShowErrorMessage(value: MotionGPUErrorReport): boolean {\n\treturn resolveDisplayMessage(value).length > 0;\n}\n\nfunction resolveDisplayMessage(value: MotionGPUErrorReport): string {\n\tconst rawMessage = value.message.trim();\n\tif (rawMessage.length === 0) {\n\t\treturn '';\n\t}\n\n\tconst normalizedMessage = normalizeErrorText(rawMessage);\n\tconst normalizedTitle = normalizeErrorText(value.title);\n\tif (normalizedMessage === normalizedTitle) {\n\t\treturn '';\n\t}\n\n\tconst escapedTitle = value.title.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n\tconst prefixPattern = new RegExp(`^${escapedTitle}\\\\s*[:\\\\-|]\\\\s*`, 'i');\n\tconst stripped = rawMessage.replace(prefixPattern, '').trim();\n\treturn stripped.length > 0 ? stripped : rawMessage;\n}\n\nfunction formatRuntimeContext(context: MotionGPUErrorReport['context']): string {\n\tif (!context) {\n\t\treturn '';\n\t}\n\n\tconst indentBlock = (value: string, spaces = 2): string => {\n\t\tconst prefix = ' '.repeat(spaces);\n\t\treturn value\n\t\t\t.split('\\n')\n\t\t\t.map((line) => `${prefix}${line}`)\n\t\t\t.join('\\n');\n\t};\n\n\tconst formatMaterialSignature = (value: string): string => {\n\t\tconst trimmed = value.trim();\n\t\tif (trimmed.length === 0) {\n\t\t\treturn '<empty>';\n\t\t}\n\t\ttry {\n\t\t\treturn JSON.stringify(JSON.parse(trimmed), null, 2);\n\t\t} catch {\n\t\t\treturn trimmed;\n\t\t}\n\t};\n\n\tconst lines: string[] = [];\n\tif (context.materialSignature) {\n\t\tlines.push('materialSignature:');\n\t\tlines.push(indentBlock(formatMaterialSignature(context.materialSignature)));\n\t}\n\tif (context.passGraph) {\n\t\tlines.push('passGraph:');\n\t\tlines.push(`  passCount: ${context.passGraph.passCount}`);\n\t\tlines.push(`  enabledPassCount: ${context.passGraph.enabledPassCount}`);\n\t\tlines.push('  inputs:');\n\t\tif (context.passGraph.inputs.length === 0) {\n\t\t\tlines.push('    - <none>');\n\t\t} else {\n\t\t\tfor (const input of context.passGraph.inputs) {\n\t\t\t\tlines.push(`    - ${input}`);\n\t\t\t}\n\t\t}\n\t\tlines.push('  outputs:');\n\t\tif (context.passGraph.outputs.length === 0) {\n\t\t\tlines.push('    - <none>');\n\t\t} else {\n\t\t\tfor (const output of context.passGraph.outputs) {\n\t\t\t\tlines.push(`    - ${output}`);\n\t\t\t}\n\t\t}\n\t}\n\tlines.push('activeRenderTargets:');\n\tif (context.activeRenderTargets.length === 0) {\n\t\tlines.push('  - <none>');\n\t} else {\n\t\tfor (const target of context.activeRenderTargets) {\n\t\t\tlines.push(`  - ${target}`);\n\t\t}\n\t}\n\treturn lines.join('\\n');\n}\n\nexport function MotionGPUErrorOverlay({ report }: MotionGPUErrorOverlayProps) {\n\tconst detailsSummary = report.source ? 'Additional diagnostics' : 'Technical details';\n\n\treturn (\n\t\t<Portal>\n\t\t\t<style>{MOTIONGPU_ERROR_OVERLAY_STYLES}</style>\n\t\t\t<div className=\"motiongpu-error-overlay\" role=\"presentation\">\n\t\t\t\t<section\n\t\t\t\t\tclassName=\"motiongpu-error-dialog\"\n\t\t\t\t\trole=\"alertdialog\"\n\t\t\t\t\taria-live=\"assertive\"\n\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\tdata-testid=\"motiongpu-error\"\n\t\t\t\t>\n\t\t\t\t\t<header className=\"motiongpu-error-header\">\n\t\t\t\t\t\t<div className=\"motiongpu-error-header-top\">\n\t\t\t\t\t\t\t<div className=\"motiongpu-error-badges\">\n\t\t\t\t\t\t\t\t<div className=\"motiongpu-error-badge-wrap\">\n\t\t\t\t\t\t\t\t\t<p className=\"motiongpu-error-badge motiongpu-error-badge-phase\">\n\t\t\t\t\t\t\t\t\t\t{report.phase}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"motiongpu-error-badge-wrap\">\n\t\t\t\t\t\t\t\t\t<p className=\"motiongpu-error-badge motiongpu-error-badge-severity\">\n\t\t\t\t\t\t\t\t\t\t{report.severity}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<h2 className=\"motiongpu-error-title\">{report.title}</h2>\n\t\t\t\t\t\t<p className=\"motiongpu-error-recoverable\">\n\t\t\t\t\t\t\tRecoverable: <span>{report.recoverable ? 'yes' : 'no'}</span>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</header>\n\t\t\t\t\t<div className=\"motiongpu-error-body\">\n\t\t\t\t\t\t{shouldShowErrorMessage(report) ? (\n\t\t\t\t\t\t\t<p className=\"motiongpu-error-message\">{resolveDisplayMessage(report)}</p>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<p className=\"motiongpu-error-hint\">{report.hint}</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{report.source ? (\n\t\t\t\t\t\t<section className=\"motiongpu-error-source\" aria-label=\"Source\">\n\t\t\t\t\t\t\t<h3 className=\"motiongpu-error-source-title\">Source</h3>\n\t\t\t\t\t\t\t<div className=\"motiongpu-error-source-frame\" role=\"presentation\">\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"motiongpu-error-source-tabs\"\n\t\t\t\t\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t\t\t\t\taria-label=\"Source files\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"motiongpu-error-source-tab motiongpu-error-source-tab-active\"\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\taria-selected=\"true\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{report.source.location}\n\t\t\t\t\t\t\t\t\t\t{report.source.column ? `, col ${report.source.column}` : ''}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"motiongpu-error-source-tab-spacer\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"motiongpu-error-source-snippet\">\n\t\t\t\t\t\t\t\t\t{report.source.snippet.map((snippetLine) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={`snippet-${snippetLine.number}`}\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tsnippetLine.highlight\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'motiongpu-error-source-row motiongpu-error-source-row-active'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'motiongpu-error-source-row'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"motiongpu-error-source-line\">{snippetLine.number}</span>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"motiongpu-error-source-code\">{snippetLine.code || ' '}</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</section>\n\t\t\t\t\t) : null}\n\n\t\t\t\t\t<div className=\"motiongpu-error-sections\">\n\t\t\t\t\t\t{report.details.length > 0 ? (\n\t\t\t\t\t\t\t<details className=\"motiongpu-error-details\" open>\n\t\t\t\t\t\t\t\t<summary>{detailsSummary}</summary>\n\t\t\t\t\t\t\t\t<pre>{report.details.join('\\n')}</pre>\n\t\t\t\t\t\t\t</details>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{report.stack.length > 0 ? (\n\t\t\t\t\t\t\t<details className=\"motiongpu-error-details\">\n\t\t\t\t\t\t\t\t<summary>Stack trace</summary>\n\t\t\t\t\t\t\t\t<pre>{report.stack.join('\\n')}</pre>\n\t\t\t\t\t\t\t</details>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{report.context ? (\n\t\t\t\t\t\t\t<details className=\"motiongpu-error-details\">\n\t\t\t\t\t\t\t\t<summary>Runtime context</summary>\n\t\t\t\t\t\t\t\t<pre>{formatRuntimeContext(report.context)}</pre>\n\t\t\t\t\t\t\t</details>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</Portal>\n\t);\n}\n"],"mappings":"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"}

package/dist/react/advanced.js

@@ -2,6 +2,8 @@ import { defineMaterial } from "../core/material.js";
 import { BlitPass } from "../passes/BlitPass.js";
 import { CopyPass } from "../passes/CopyPass.js";
 import { ShaderPass } from "../passes/ShaderPass.js";
+import { ComputePass } from "../passes/ComputePass.js";
+import { PingPongComputePass } from "../passes/PingPongComputePass.js";
 import { applySchedulerPreset, captureSchedulerDebugSnapshot } from "../core/scheduler-helpers.js";
 import { useMotionGPU } from "./motiongpu-context.js";
 import { useFrame } from "./frame-context.js";
@@ -9,4 +11,4 @@ import { FragCanvas } from "./FragCanvas.js";
 import { useTexture } from "./use-texture.js";
 import "./index.js";
 import { setMotionGPUUserContext, useMotionGPUUserContext, useSetMotionGPUUserContext } from "./use-motiongpu-user-context.js";
-export { BlitPass, CopyPass, FragCanvas, ShaderPass, applySchedulerPreset, captureSchedulerDebugSnapshot, defineMaterial, setMotionGPUUserContext, useFrame, useMotionGPU, useMotionGPUUserContext, useSetMotionGPUUserContext, useTexture };
+export { BlitPass, ComputePass, CopyPass, FragCanvas, PingPongComputePass, ShaderPass, applySchedulerPreset, captureSchedulerDebugSnapshot, defineMaterial, setMotionGPUUserContext, useFrame, useMotionGPU, useMotionGPUUserContext, useSetMotionGPUUserContext, useTexture };

package/dist/react/index.d.ts

@@ -3,14 +3,17 @@
  */
 export { FragCanvas } from './FragCanvas.js';
 export { defineMaterial } from '../core/material.js';
-export { BlitPass, CopyPass, ShaderPass } from '../passes/index.js';
+export { BlitPass, CopyPass, ShaderPass, ComputePass, PingPongComputePass } from '../passes/index.js';
 export { useMotionGPU } from './motiongpu-context.js';
 export { useFrame } from './frame-context.js';
 export { useTexture } from './use-texture.js';
-export type { FrameInvalidationToken, FrameState, OutputColorSpace, RenderPass, RenderPassContext, RenderPassFlags, RenderPassInputSlot, RenderPassOutputSlot, RenderMode, RenderTarget, RenderTargetDefinition, RenderTargetDefinitionMap, TextureData, TextureDefinition, TextureDefinitionMap, TextureUpdateMode, TextureMap, TextureSource, TextureValue, TypedUniform, UniformMat4Value, UniformMap, UniformType, UniformValue } from '../core/types.js';
+export type { FrameInvalidationToken, FrameState, OutputColorSpace, AnyPass, ComputePassLike, RenderPass, RenderPassContext, RenderPassFlags, RenderPassInputSlot, RenderPassOutputSlot, RenderMode, RenderTarget, RenderTargetDefinition, RenderTargetDefinitionMap, TextureData, TextureDefinition, TextureDefinitionMap, TextureUpdateMode, TextureMap, TextureSource, TextureValue, TypedUniform, UniformMat4Value, UniformMap, UniformType, UniformValue } from '../core/types.js';
 export type { LoadedTexture, TextureDecodeOptions, TextureLoadOptions } from '../core/texture-loader.js';
 export type { FragMaterial, FragMaterialInput, MaterialIncludes, MaterialDefineValue, MaterialDefines, TypedMaterialDefineValue } from '../core/material.js';
 export type { MotionGPUContext } from './motiongpu-context.js';
 export type { UseFrameOptions, UseFrameResult } from './frame-context.js';
 export type { TextureUrlInput, UseTextureResult } from './use-texture.js';
+export type { StorageBufferAccess, StorageBufferDefinition, StorageBufferDefinitionMap, StorageBufferType, ComputePassContext } from '../core/types.js';
+export type { ComputePassOptions, ComputeDispatchContext } from '../passes/ComputePass.js';
+export type { PingPongComputePassOptions } from '../passes/PingPongComputePass.js';
 //# sourceMappingURL=index.d.ts.map