@motion-core/motion-gpu 0.4.2 → 0.6.0

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,yBAAyB,EACzB,WAAW,EACX,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACX,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,yBAAyB,EACzB,WAAW,EACX,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACX,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EACX,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,EAC1B,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC3F,YAAY,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/react/index.js

@@ -2,9 +2,11 @@ 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 "../passes/index.js";
 import { useMotionGPU } from "./motiongpu-context.js";
 import { useFrame } from "./frame-context.js";
 import { FragCanvas } from "./FragCanvas.js";
 import { useTexture } from "./use-texture.js";
-export { BlitPass, CopyPass, FragCanvas, ShaderPass, defineMaterial, useFrame, useMotionGPU, useTexture };
+export { BlitPass, ComputePass, CopyPass, FragCanvas, PingPongComputePass, ShaderPass, defineMaterial, useFrame, useMotionGPU, useTexture };

package/dist/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/dist/svelte/FragCanvas.svelte.d.ts

@@ -2,11 +2,11 @@
 import type { Snippet } from 'svelte';
 import type { FragMaterial } from '../core/material';
 import { type MotionGPUErrorReport } from '../core/error-report';
-import type { OutputColorSpace, RenderPass, RenderMode, RenderTargetDefinitionMap } from '../core/types';
+import type { AnyPass, OutputColorSpace, RenderMode, RenderTargetDefinitionMap } from '../core/types';
 interface Props {
     material: FragMaterial;
     renderTargets?: RenderTargetDefinitionMap;
-    passes?: RenderPass[];
+    passes?: AnyPass[];
     clearColor?: [number, number, number, number];
     outputColorSpace?: OutputColorSpace;
     renderMode?: RenderMode;

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

@@ -1 +1 @@
-{"version":3,"file":"FragCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/svelte/FragCanvas.svelte"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGzF,OAAO,KAAK,EAEV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,yBAAyB,EACzB,MAAM,eAAe,CAAC;AAKvB,UAAU,KAAK;IACd,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,OAAO,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAChD,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAiNF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FragCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/svelte/FragCanvas.svelte"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGzF,OAAO,KAAK,EACV,OAAO,EAEP,gBAAgB,EAChB,UAAU,EACV,yBAAyB,EACzB,MAAM,eAAe,CAAC;AAKvB,UAAU,KAAK;IACd,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,OAAO,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAChD,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAiNF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/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/dist/svelte/MotionGPUErrorOverlay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MotionGPUErrorOverlay.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/svelte/MotionGPUErrorOverlay.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAIhE,UAAU,KAAK;IACd,MAAM,EAAE,oBAAoB,CAAC;CAC7B;AAkFF,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"MotionGPUErrorOverlay.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/svelte/MotionGPUErrorOverlay.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAIhE,UAAU,KAAK;IACd,MAAM,EAAE,oBAAoB,CAAC;CAC7B;AAoLF,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/advanced.js

@@ -2,10 +2,12 @@ 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";
 import { useTexture } from "./use-texture.js";
 import { FragCanvas } from "./index.js";
 import { setMotionGPUUserContext, useMotionGPUUserContext } from "./use-motiongpu-user-context.js";
-export { BlitPass, CopyPass, FragCanvas, ShaderPass, applySchedulerPreset, captureSchedulerDebugSnapshot, defineMaterial, setMotionGPUUserContext, useFrame, useMotionGPU, useMotionGPUUserContext, useTexture };
+export { BlitPass, ComputePass, CopyPass, FragCanvas, PingPongComputePass, ShaderPass, applySchedulerPreset, captureSchedulerDebugSnapshot, defineMaterial, setMotionGPUUserContext, useFrame, useMotionGPU, useMotionGPUUserContext, useTexture };

package/dist/svelte/index.d.ts

@@ -3,14 +3,17 @@
  */
 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';
-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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/svelte/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,yBAAyB,EACzB,WAAW,EACX,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACX,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/svelte/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,yBAAyB,EACzB,WAAW,EACX,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACX,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EACX,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,EAC1B,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC3F,YAAY,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC"}