@motion-core/motion-gpu 0.4.2 → 0.6.0

package/src/lib/react/MotionGPUErrorOverlay.tsx

@@ -75,6 +75,19 @@ const 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;
@@ -86,7 +99,7 @@ const MOTIONGPU_ERROR_OVERLAY_STYLES = `
 	background: var(--motiongpu-color-background-muted);
 }
 
-.motiongpu-error-phase {
+.motiongpu-error-badge {
 	display: inline-flex;
 	align-items: center;
 	margin: 0;
@@ -106,6 +119,20 @@ const 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);
@@ -285,6 +312,11 @@ const 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) {
@@ -302,7 +334,87 @@ function normalizeErrorText(value: string): string {
 }
 
 function shouldShowErrorMessage(value: MotionGPUErrorReport): boolean {
-	return normalizeErrorText(value.message) !== normalizeErrorText(value.title);
+	return resolveDisplayMessage(value).length > 0;
+}
+
+function resolveDisplayMessage(value: MotionGPUErrorReport): string {
+	const rawMessage = value.message.trim();
+	if (rawMessage.length === 0) {
+		return '';
+	}
+
+	const normalizedMessage = normalizeErrorText(rawMessage);
+	const normalizedTitle = normalizeErrorText(value.title);
+	if (normalizedMessage === normalizedTitle) {
+		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: MotionGPUErrorReport['context']): string {
+	if (!context) {
+		return '';
+	}
+
+	const indentBlock = (value: string, spaces = 2): string => {
+		const prefix = ' '.repeat(spaces);
+		return value
+			.split('\n')
+			.map((line) => `${prefix}${line}`)
+			.join('\n');
+	};
+
+	const formatMaterialSignature = (value: string): string => {
+		const trimmed = value.trim();
+		if (trimmed.length === 0) {
+			return '<empty>';
+		}
+		try {
+			return JSON.stringify(JSON.parse(trimmed), null, 2);
+		} catch {
+			return trimmed;
+		}
+	};
+
+	const lines: string[] = [];
+	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');
 }
 
 export function MotionGPUErrorOverlay({ report }: MotionGPUErrorOverlayProps) {
@@ -320,14 +432,28 @@ export function MotionGPUErrorOverlay({ report }: MotionGPUErrorOverlayProps) {
 					data-testid="motiongpu-error"
 				>
 					<header className="motiongpu-error-header">
-						<div className="motiongpu-error-badge-wrap">
-							<p className="motiongpu-error-phase">{report.phase}</p>
+						<div className="motiongpu-error-header-top">
+							<div className="motiongpu-error-badges">
+								<div className="motiongpu-error-badge-wrap">
+									<p className="motiongpu-error-badge motiongpu-error-badge-phase">
+										{report.phase}
+									</p>
+								</div>
+								<div className="motiongpu-error-badge-wrap">
+									<p className="motiongpu-error-badge motiongpu-error-badge-severity">
+										{report.severity}
+									</p>
+								</div>
+							</div>
 						</div>
 						<h2 className="motiongpu-error-title">{report.title}</h2>
+						<p className="motiongpu-error-recoverable">
+							Recoverable: <span>{report.recoverable ? 'yes' : 'no'}</span>
+						</p>
 					</header>
 					<div className="motiongpu-error-body">
 						{shouldShowErrorMessage(report) ? (
-							<p className="motiongpu-error-message">{report.message}</p>
+							<p className="motiongpu-error-message">{resolveDisplayMessage(report)}</p>
 						) : null}
 						<p className="motiongpu-error-hint">{report.hint}</p>
 					</div>
@@ -384,6 +510,12 @@ export function MotionGPUErrorOverlay({ report }: MotionGPUErrorOverlayProps) {
 								<pre>{report.stack.join('\n')}</pre>
 							</details>
 						) : null}
+						{report.context ? (
+							<details className="motiongpu-error-details">
+								<summary>Runtime context</summary>
+								<pre>{formatRuntimeContext(report.context)}</pre>
+							</details>
+						) : null}
 					</div>
 				</section>
 			</div>

package/src/lib/react/index.ts

@@ -3,7 +3,13 @@
  */
 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';
@@ -11,6 +17,8 @@ export type {
 	FrameInvalidationToken,
 	FrameState,
 	OutputColorSpace,
+	AnyPass,
+	ComputePassLike,
 	RenderPass,
 	RenderPassContext,
 	RenderPassFlags,
@@ -49,3 +57,12 @@ export type {
 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';

package/src/lib/svelte/FragCanvas.svelte

@@ -7,9 +7,9 @@
 	import MotionGPUErrorOverlay from './MotionGPUErrorOverlay.svelte';
 	import { createMotionGPURuntimeLoop } from '../core/runtime-loop';
 	import type {
+		AnyPass,
 		FrameInvalidationToken,
 		OutputColorSpace,
-		RenderPass,
 		RenderMode,
 		RenderTargetDefinitionMap
 	} from '../core/types';
@@ -19,7 +19,7 @@
 	interface Props {
 		material: FragMaterial;
 		renderTargets?: RenderTargetDefinitionMap;
-		passes?: RenderPass[];
+		passes?: AnyPass[];
 		clearColor?: [number, number, number, number];
 		outputColorSpace?: OutputColorSpace;
 		renderMode?: RenderMode;

package/src/lib/svelte/MotionGPUErrorOverlay.svelte

@@ -16,7 +16,87 @@
 	};
 
 	const shouldShowErrorMessage = (value: MotionGPUErrorReport): boolean => {
-		return normalizeErrorText(value.message) !== normalizeErrorText(value.title);
+		return resolveDisplayMessage(value).length > 0;
+	};
+
+	const resolveDisplayMessage = (value: MotionGPUErrorReport): string => {
+		const rawMessage = value.message.trim();
+		if (rawMessage.length === 0) {
+			return '';
+		}
+
+		const normalizedMessage = normalizeErrorText(rawMessage);
+		const normalizedTitle = normalizeErrorText(value.title);
+		if (normalizedMessage === normalizedTitle) {
+			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;
+	};
+
+	const formatRuntimeContext = (context: MotionGPUErrorReport['context']): string => {
+		if (!context) {
+			return '';
+		}
+
+		const indentBlock = (value: string, spaces = 2): string => {
+			const prefix = ' '.repeat(spaces);
+			return value
+				.split('\n')
+				.map((line) => `${prefix}${line}`)
+				.join('\n');
+		};
+
+		const formatMaterialSignature = (value: string): string => {
+			const trimmed = value.trim();
+			if (trimmed.length === 0) {
+				return '<empty>';
+			}
+			try {
+				return JSON.stringify(JSON.parse(trimmed), null, 2);
+			} catch {
+				return trimmed;
+			}
+		};
+
+		const lines: string[] = [];
+		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');
 	};
 </script>
 
@@ -30,16 +110,28 @@
 			data-testid="motiongpu-error"
 		>
 			<header class="motiongpu-error-header">
-				<div class="motiongpu-error-badge-wrap">
-					<p class="motiongpu-error-phase">
-						{report.phase}
-					</p>
+				<div class="motiongpu-error-header-top">
+					<div class="motiongpu-error-badges">
+						<div class="motiongpu-error-badge-wrap">
+							<p class="motiongpu-error-badge motiongpu-error-badge-phase">
+								{report.phase}
+							</p>
+						</div>
+						<div class="motiongpu-error-badge-wrap">
+							<p class="motiongpu-error-badge motiongpu-error-badge-severity">
+								{report.severity}
+							</p>
+						</div>
+					</div>
 				</div>
 				<h2 class="motiongpu-error-title">{report.title}</h2>
+				<p class="motiongpu-error-recoverable">
+					Recoverable: <span>{report.recoverable ? 'yes' : 'no'}</span>
+				</p>
 			</header>
 			<div class="motiongpu-error-body">
 				{#if shouldShowErrorMessage(report)}
-					<p class="motiongpu-error-message">{report.message}</p>
+					<p class="motiongpu-error-message">{resolveDisplayMessage(report)}</p>
 				{/if}
 				<p class="motiongpu-error-hint">{report.hint}</p>
 			</div>
@@ -87,6 +179,12 @@
 						<pre>{report.stack.join('\n')}</pre>
 					</details>
 				{/if}
+				{#if report.context}
+					<details class="motiongpu-error-details">
+						<summary>Runtime context</summary>
+						<pre>{formatRuntimeContext(report.context)}</pre>
+					</details>
+				{/if}
 			</div>
 		</section>
 	</div>
@@ -162,6 +260,19 @@
 		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;
@@ -173,7 +284,7 @@
 		background: var(--motiongpu-color-background-muted);
 	}
 
-	.motiongpu-error-phase {
+	.motiongpu-error-badge {
 		display: inline-flex;
 		align-items: center;
 		margin: 0;
@@ -193,6 +304,20 @@
 		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);
@@ -372,6 +497,11 @@
 		.motiongpu-error-title {
 			font-size: 1.02rem;
 		}
+
+		.motiongpu-error-header-top {
+			flex-direction: column;
+			align-items: flex-start;
+		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/src/lib/svelte/index.ts

@@ -3,7 +3,13 @@
  */
 export { default as FragCanvas } from './FragCanvas.svelte';
 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';
@@ -11,6 +17,8 @@ export type {
 	FrameInvalidationToken,
 	FrameState,
 	OutputColorSpace,
+	AnyPass,
+	ComputePassLike,
 	RenderPass,
 	RenderPassContext,
 	RenderPassFlags,
@@ -49,3 +57,12 @@ export type {
 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';