@motion-core/motion-gpu 0.4.0 → 0.4.1

package/dist/core/render-targets.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@webgpu/types" />
 import type { RenderTargetDefinitionMap } from './types.js';
 /**
  * Concrete render target configuration resolved for current canvas size.

package/dist/core/runtime-loop.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@webgpu/types" />
 import type { CurrentReadable, CurrentWritable } from './current-value.js';
 import { type FragMaterial } from './material.js';
 import { type MotionGPUErrorReport } from './error-report.js';

package/dist/core/textures.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@webgpu/types" />
 import type { TextureData, TextureDefinition, TextureDefinitionMap, TextureUpdateMode, TextureValue } from './types.js';
 /**
  * Texture definition with defaults and normalized numeric limits applied.

package/dist/core/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@webgpu/types" />
 /**
  * Core runtime and API contracts used by MotionGPU's renderer, hooks and scheduler.
  */

package/dist/passes/CopyPass.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@webgpu/types" />
 import type { RenderPass, RenderPassContext, RenderPassFlags, RenderPassInputSlot, RenderPassOutputSlot } from '../core/types.js';
 export interface CopyPassOptions extends RenderPassFlags {
     enabled?: boolean;

package/dist/passes/FullscreenPass.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@webgpu/types" />
 import type { RenderPass, RenderPassContext, RenderPassFlags, RenderPassInputSlot, RenderPassOutputSlot } from '../core/types.js';
 export interface FullscreenPassOptions extends RenderPassFlags {
     enabled?: boolean;

package/dist/react/FragCanvas.d.ts

@@ -1,3 +1,4 @@
+/// <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';

package/dist/react/MotionGPUErrorOverlay.js

@@ -1,5 +1,293 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from './Portal.js';
+const MOTIONGPU_ERROR_OVERLAY_STYLES = `
+.motiongpu-error-overlay {
+	--motiongpu-base-hue: var(--base-hue, 265);
+	--motiongpu-color-background: oklch(0.2178 0.0056 var(--motiongpu-base-hue));
+	--motiongpu-color-background-muted: oklch(0.261 0.007 var(--motiongpu-base-hue));
+	--motiongpu-color-foreground: oklch(1 0 0);
+	--motiongpu-color-foreground-muted: oklch(0.6699 0.0081 var(--motiongpu-base-hue));
+	--motiongpu-color-card: var(--motiongpu-color-background);
+	--motiongpu-color-accent: oklch(0.6996 0.181959 44.4414);
+	--motiongpu-color-accent-secondary: oklch(0.5096 0.131959 44.4414);
+	--motiongpu-color-border: oklch(0.928 0.013 var(--motiongpu-base-hue) / 0.05);
+	--motiongpu-color-white-fixed: oklch(1 0 0);
+	--motiongpu-shadow-card: var(
+		--shadow-2xl,
+		0px 1px 1px -0.5px rgba(0, 0, 0, 0.06),
+		0px 3px 3px -1.5px rgba(0, 0, 0, 0.06),
+		0px 6px 6px -3px rgba(0, 0, 0, 0.06),
+		0px 12px 12px -6px rgba(0, 0, 0, 0.06),
+		0px 24px 24px -12px rgba(0, 0, 0, 0.05),
+		0px 48px 48px -24px rgba(0, 0, 0, 0.06)
+	);
+	--motiongpu-radius-md: var(--radius-md, 0.5rem);
+	--motiongpu-radius-lg: var(--radius-lg, 0.75rem);
+	--motiongpu-radius-xl: var(--radius-xl, 1rem);
+	--motiongpu-font-sans: var(
+		--font-sans,
+		'Inter',
+		'Segoe UI',
+		'Helvetica Neue',
+		Arial,
+		sans-serif
+	);
+	--motiongpu-font-mono: var(--font-mono, 'SFMono-Regular', 'Menlo', 'Consolas', monospace);
+	position: fixed;
+	inset: 0;
+	display: grid;
+	place-items: center;
+	padding: clamp(0.75rem, 1.4vw, 1.5rem);
+	background: rgba(0, 0, 0, 0.8);
+	backdrop-filter: blur(10px);
+	z-index: 2147483647;
+	font-family: var(--motiongpu-font-sans);
+	color-scheme: dark;
+}
+
+.motiongpu-error-dialog {
+	width: min(52rem, calc(100vw - 1.5rem));
+	max-height: min(84vh, 44rem);
+	overflow: auto;
+	margin: 0;
+	padding: 1.1rem;
+	border: 1px solid var(--motiongpu-color-border);
+	border-radius: var(--motiongpu-radius-xl);
+	max-width: calc(100vw - 1.5rem);
+	box-sizing: border-box;
+	font-size: 0.875rem;
+	font-weight: 400;
+	line-height: 1.45;
+	background: var(--motiongpu-color-card);
+	color: var(--motiongpu-color-foreground);
+	box-shadow: var(--motiongpu-shadow-card);
+}
+
+.motiongpu-error-header {
+	display: grid;
+	gap: 0.55rem;
+	padding-bottom: 0.9rem;
+	border-bottom: 1px solid var(--motiongpu-color-border);
+}
+
+.motiongpu-error-badge-wrap {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	width: fit-content;
+	padding: 0.18rem;
+	border-radius: 999px;
+	border: 1px solid var(--motiongpu-color-border);
+	background: var(--motiongpu-color-background-muted);
+}
+
+.motiongpu-error-phase {
+	display: inline-flex;
+	align-items: center;
+	margin: 0;
+	padding: 0.22rem 0.56rem;
+	border-radius: 999px;
+	font-size: 0.66rem;
+	letter-spacing: 0.08em;
+	line-height: 1;
+	font-weight: 500;
+	text-transform: uppercase;
+	color: var(--motiongpu-color-white-fixed);
+	background: linear-gradient(
+		180deg,
+		var(--motiongpu-color-accent) 0%,
+		var(--motiongpu-color-accent-secondary) 100%
+	);
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
+}
+
+.motiongpu-error-title {
+	margin: 0;
+	font-size: clamp(1.02rem, 1vw + 0.72rem, 1.32rem);
+	font-weight: 500;
+	line-height: 1.18;
+	letter-spacing: -0.02em;
+	text-wrap: balance;
+	color: var(--motiongpu-color-foreground);
+}
+
+.motiongpu-error-body {
+	display: grid;
+	gap: 0.62rem;
+	margin-top: 0.92rem;
+}
+
+.motiongpu-error-message {
+	margin: 0;
+	padding: 0.72rem 0.78rem;
+	border: 1px solid color-mix(in oklch, var(--motiongpu-color-accent) 28%, transparent);
+	border-radius: var(--motiongpu-radius-md);
+	background: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);
+	font-size: 0.82rem;
+	line-height: 1.4;
+	font-weight: 400;
+	color: var(--motiongpu-color-foreground);
+}
+
+.motiongpu-error-hint {
+	margin: 0;
+	font-size: 0.82rem;
+	line-height: 1.45;
+	font-weight: 400;
+	color: var(--motiongpu-color-foreground-muted);
+}
+
+.motiongpu-error-sections {
+	display: grid;
+	gap: 0.62rem;
+	margin-top: 0.95rem;
+}
+
+.motiongpu-error-source {
+	display: grid;
+	gap: 0.48rem;
+	margin-top: 0.96rem;
+}
+
+.motiongpu-error-source-title {
+	margin: 0;
+	font-size: 0.8rem;
+	font-weight: 500;
+	line-height: 1.3;
+	letter-spacing: 0.045em;
+	text-transform: uppercase;
+	color: var(--motiongpu-color-foreground);
+}
+
+.motiongpu-error-source-frame {
+	border: 1px solid var(--motiongpu-color-border);
+	border-radius: var(--motiongpu-radius-lg);
+	overflow: hidden;
+	background: var(--motiongpu-color-background-muted);
+}
+
+.motiongpu-error-source-tabs {
+	display: flex;
+	align-items: stretch;
+	border-bottom: 1px solid var(--motiongpu-color-border);
+	background: var(--motiongpu-color-background);
+}
+
+.motiongpu-error-source-tab {
+	display: inline-flex;
+	align-items: center;
+	padding: 0.5rem 0.68rem;
+	font-size: 0.76rem;
+	font-weight: 400;
+	line-height: 1.2;
+	color: var(--motiongpu-color-foreground-muted);
+	border-right: 1px solid var(--motiongpu-color-border);
+}
+
+.motiongpu-error-source-tab-active {
+	color: var(--motiongpu-color-foreground);
+	background: var(--motiongpu-color-background-muted);
+}
+
+.motiongpu-error-source-tab-spacer {
+	flex: 1 1 auto;
+}
+
+.motiongpu-error-source-snippet {
+	display: grid;
+	background: var(--motiongpu-color-background-muted);
+}
+
+.motiongpu-error-source-row {
+	display: grid;
+	grid-template-columns: 2rem minmax(0, 1fr);
+	align-items: start;
+	gap: 0.42rem;
+	padding: 0.2rem 0.68rem;
+}
+
+.motiongpu-error-source-row-active {
+	background: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);
+}
+
+.motiongpu-error-source-line {
+	font-family: var(--motiongpu-font-mono);
+	font-size: 0.77rem;
+	font-weight: 400;
+	line-height: 1.3;
+	font-variant-numeric: tabular-nums;
+	font-feature-settings: 'tnum' 1;
+	border-right: 1px solid var(--motiongpu-color-border);
+	color: var(--motiongpu-color-foreground-muted);
+	text-align: left;
+}
+
+.motiongpu-error-source-code {
+	font-family: var(--motiongpu-font-mono);
+	font-size: 0.77rem;
+	font-weight: 400;
+	line-height: 1.3;
+	color: var(--motiongpu-color-foreground);
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.motiongpu-error-details {
+	border: 1px solid var(--motiongpu-color-border);
+	border-radius: var(--motiongpu-radius-lg);
+	overflow: hidden;
+	background: var(--motiongpu-color-background);
+}
+
+.motiongpu-error-details summary {
+	cursor: pointer;
+	padding: 0.56rem 0.68rem;
+	font-size: 0.7rem;
+	letter-spacing: 0.07em;
+	line-height: 1.2;
+	font-weight: 500;
+	text-transform: uppercase;
+	color: var(--motiongpu-color-foreground);
+}
+
+.motiongpu-error-details[open] summary {
+	border-bottom: 1px solid var(--motiongpu-color-border);
+}
+
+.motiongpu-error-details pre {
+	margin: 0;
+	padding: 0.62rem 0.68rem;
+	white-space: pre-wrap;
+	word-break: break-word;
+	overflow: auto;
+	background: var(--motiongpu-color-background-muted);
+	font-size: 0.74rem;
+	line-height: 1.4;
+	font-weight: 400;
+	color: var(--motiongpu-color-foreground);
+	font-family: var(--motiongpu-font-mono);
+}
+
+@media (max-width: 42rem) {
+	.motiongpu-error-overlay {
+		padding: 0.62rem;
+	}
+
+	.motiongpu-error-dialog {
+		padding: 0.85rem;
+	}
+
+	.motiongpu-error-title {
+		font-size: 1.02rem;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.motiongpu-error-overlay {
+		backdrop-filter: none;
+	}
+}
+`;
 function normalizeErrorText(value) {
     return value
         .trim()
@@ -11,42 +299,7 @@ function shouldShowErrorMessage(value) {
 }
 export function MotionGPUErrorOverlay({ report }) {
     const detailsSummary = report.source ? 'Additional diagnostics' : 'Technical details';
-    return (_jsx(Portal, { children: _jsx("div", { className: "motiongpu-error-overlay", role: "presentation", style: {
-                position: 'fixed',
-                inset: 0,
-                display: 'grid',
-                placeItems: 'center',
-                padding: '1rem',
-                background: 'rgba(12, 12, 14, 0.38)',
-                backdropFilter: 'blur(10px)',
-                zIndex: 2147483647
-            }, children: _jsxs("section", { role: "alertdialog", "aria-live": "assertive", "aria-modal": "true", "data-testid": "motiongpu-error", style: {
-                    width: 'min(52rem, calc(100vw - 1.5rem))',
-                    maxHeight: 'min(84vh, 44rem)',
-                    overflow: 'auto',
-                    margin: 0,
-                    padding: '1rem',
-                    border: '1px solid rgba(107, 107, 107, 0.2)',
-                    borderRadius: '1rem',
-                    boxSizing: 'border-box',
-                    background: '#ffffff',
-                    color: '#262626',
-                    fontSize: '0.875rem',
-                    lineHeight: 1.45
-                }, children: [_jsxs("header", { style: { display: 'grid', gap: '0.5rem' }, children: [_jsx("p", { style: {
-                                    margin: 0,
-                                    fontSize: '0.66rem',
-                                    letterSpacing: '0.08em',
-                                    textTransform: 'uppercase',
-                                    color: '#5f6672'
-                                }, children: report.phase }), _jsx("h2", { style: { margin: 0, fontSize: '1.1rem', lineHeight: 1.2 }, children: report.title })] }), _jsxs("div", { style: { display: 'grid', gap: '0.5rem', marginTop: '0.75rem' }, children: [shouldShowErrorMessage(report) ? _jsx("p", { style: { margin: 0 }, children: report.message }) : null, _jsx("p", { style: { margin: 0, color: '#5f6672' }, children: report.hint })] }), report.source ? (_jsxs("section", { "aria-label": "Source", style: { marginTop: '0.75rem' }, children: [_jsx("h3", { style: { margin: 0, fontSize: '0.8rem', textTransform: 'uppercase' }, children: "Source" }), _jsxs("div", { style: { marginTop: '0.4rem', border: '1px solid rgba(107, 107, 107, 0.2)' }, children: [_jsx("div", { style: {
-                                            padding: '0.45rem 0.6rem',
-                                            borderBottom: '1px solid rgba(107, 107, 107, 0.2)'
-                                        }, children: _jsxs("span", { children: [report.source.location, report.source.column ? `, col ${report.source.column}` : ''] }) }), _jsx("div", { style: { display: 'grid' }, children: report.source.snippet.map((snippetLine) => (_jsxs("div", { style: {
-                                                display: 'grid',
-                                                gridTemplateColumns: '2rem minmax(0, 1fr)',
-                                                gap: '0.42rem',
-                                                padding: '0.2rem 0.5rem',
-                                                background: snippetLine.highlight ? 'rgba(255, 105, 0, 0.08)' : undefined
-                                            }, children: [_jsx("span", { children: snippetLine.number }), _jsx("span", { className: "motiongpu-error-source-code", children: snippetLine.code || ' ' })] }, `snippet-${snippetLine.number}`))) })] })] })) : null, report.details.length > 0 ? (_jsxs("details", { open: true, style: { marginTop: '0.75rem' }, children: [_jsx("summary", { children: detailsSummary }), _jsx("pre", { style: { whiteSpace: 'pre-wrap' }, children: report.details.join('\n') })] })) : null, report.stack.length > 0 ? (_jsxs("details", { style: { marginTop: '0.75rem' }, children: [_jsx("summary", { children: "Stack trace" }), _jsx("pre", { style: { whiteSpace: 'pre-wrap' }, children: report.stack.join('\n') })] })) : null] }) }) }));
+    return (_jsxs(Portal, { children: [_jsx("style", { children: MOTIONGPU_ERROR_OVERLAY_STYLES }), _jsx("div", { className: "motiongpu-error-overlay", role: "presentation", children: _jsxs("section", { className: "motiongpu-error-dialog", role: "alertdialog", "aria-live": "assertive", "aria-modal": "true", "data-testid": "motiongpu-error", children: [_jsxs("header", { className: "motiongpu-error-header", children: [_jsx("div", { className: "motiongpu-error-badge-wrap", children: _jsx("p", { className: "motiongpu-error-phase", children: report.phase }) }), _jsx("h2", { className: "motiongpu-error-title", children: report.title })] }), _jsxs("div", { className: "motiongpu-error-body", children: [shouldShowErrorMessage(report) ? (_jsx("p", { className: "motiongpu-error-message", children: report.message })) : null, _jsx("p", { className: "motiongpu-error-hint", children: report.hint })] }), report.source ? (_jsxs("section", { className: "motiongpu-error-source", "aria-label": "Source", children: [_jsx("h3", { className: "motiongpu-error-source-title", children: "Source" }), _jsxs("div", { className: "motiongpu-error-source-frame", role: "presentation", children: [_jsxs("div", { className: "motiongpu-error-source-tabs", role: "tablist", "aria-label": "Source files", children: [_jsxs("span", { className: "motiongpu-error-source-tab motiongpu-error-source-tab-active", role: "tab", "aria-selected": "true", children: [report.source.location, report.source.column ? `, col ${report.source.column}` : ''] }), _jsx("span", { className: "motiongpu-error-source-tab-spacer", "aria-hidden": "true" })] }), _jsx("div", { className: "motiongpu-error-source-snippet", children: report.source.snippet.map((snippetLine) => (_jsxs("div", { className: snippetLine.highlight
+                                                    ? 'motiongpu-error-source-row motiongpu-error-source-row-active'
+                                                    : 'motiongpu-error-source-row', children: [_jsx("span", { className: "motiongpu-error-source-line", children: snippetLine.number }), _jsx("span", { className: "motiongpu-error-source-code", children: snippetLine.code || ' ' })] }, `snippet-${snippetLine.number}`))) })] })] })) : null, _jsxs("div", { className: "motiongpu-error-sections", children: [report.details.length > 0 ? (_jsxs("details", { className: "motiongpu-error-details", open: true, children: [_jsx("summary", { children: detailsSummary }), _jsx("pre", { children: report.details.join('\n') })] })) : null, report.stack.length > 0 ? (_jsxs("details", { className: "motiongpu-error-details", children: [_jsx("summary", { children: "Stack trace" }), _jsx("pre", { children: report.stack.join('\n') })] })) : null] })] }) })] }));
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="@webgpu/types" />
 import type { Snippet } from 'svelte';
 import type { FragMaterial } from '../core/material';
 import { type MotionGPUErrorReport } from '../core/error-report';

package/dist/svelte/MotionGPUErrorOverlay.svelte

@@ -94,14 +94,16 @@
 
 <style>
 	.motiongpu-error-overlay {
-		--motiongpu-color-background: var(--color-background, #ffffff);
-		--motiongpu-color-background-muted: var(--color-background-inset, #f6f6f7);
-		--motiongpu-color-foreground: var(--color-foreground, #262626);
-		--motiongpu-color-foreground-muted: var(--color-foreground-muted, rgba(38, 38, 38, 0.64));
-		--motiongpu-color-card: var(--color-background, #ffffff);
-		--motiongpu-color-accent: var(--color-accent, #ff6900);
-		--motiongpu-color-accent-secondary: var(--color-accent-secondary, #bd4d00);
-		--motiongpu-color-border: var(--color-border, rgba(107, 107, 107, 0.2));
+		--motiongpu-base-hue: var(--base-hue, 265);
+		--motiongpu-color-background: oklch(0.2178 0.0056 var(--motiongpu-base-hue));
+		--motiongpu-color-background-muted: oklch(0.261 0.007 var(--motiongpu-base-hue));
+		--motiongpu-color-foreground: oklch(1 0 0);
+		--motiongpu-color-foreground-muted: oklch(0.6699 0.0081 var(--motiongpu-base-hue));
+		--motiongpu-color-card: var(--motiongpu-color-background);
+		--motiongpu-color-accent: oklch(0.6996 0.181959 44.4414);
+		--motiongpu-color-accent-secondary: oklch(0.5096 0.131959 44.4414);
+		--motiongpu-color-border: oklch(0.928 0.013 var(--motiongpu-base-hue) / 0.05);
+		--motiongpu-color-white-fixed: oklch(1 0 0);
 		--motiongpu-shadow-card: var(
 			--shadow-2xl,
 			0px 1px 1px -0.5px rgba(0, 0, 0, 0.06),
@@ -128,12 +130,11 @@
 		display: grid;
 		place-items: center;
 		padding: clamp(0.75rem, 1.4vw, 1.5rem);
-		background:
-			radial-gradient(125% 125% at 50% 0%, rgba(255, 105, 0, 0.12) 0%, rgba(255, 105, 0, 0) 56%),
-			rgba(12, 12, 14, 0.38);
+		background: rgba(0, 0, 0, 0.8);
 		backdrop-filter: blur(10px);
 		z-index: 2147483647;
 		font-family: var(--motiongpu-font-sans);
+		color-scheme: dark;
 	}
 
 	.motiongpu-error-dialog {
@@ -149,11 +150,7 @@
 		font-size: 0.875rem;
 		font-weight: 400;
 		line-height: 1.45;
-		background: linear-gradient(
-			180deg,
-			var(--motiongpu-color-card) 0%,
-			var(--motiongpu-color-background-muted) 100%
-		);
+		background: var(--motiongpu-color-card);
 		color: var(--motiongpu-color-foreground);
 		box-shadow: var(--motiongpu-shadow-card);
 	}
@@ -187,7 +184,7 @@
 		line-height: 1;
 		font-weight: 500;
 		text-transform: uppercase;
-		color: var(--motiongpu-color-background);
+		color: var(--motiongpu-color-white-fixed);
 		background: linear-gradient(
 			180deg,
 			var(--motiongpu-color-accent) 0%,
@@ -215,9 +212,9 @@
 	.motiongpu-error-message {
 		margin: 0;
 		padding: 0.72rem 0.78rem;
-		border: 1px solid color-mix(in srgb, var(--motiongpu-color-accent) 28%, transparent);
+		border: 1px solid color-mix(in oklch, var(--motiongpu-color-accent) 28%, transparent);
 		border-radius: var(--motiongpu-radius-md);
-		background: color-mix(in srgb, var(--motiongpu-color-accent) 9%, var(--motiongpu-color-card));
+		background: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);
 		font-size: 0.82rem;
 		line-height: 1.4;
 		font-weight: 400;
@@ -302,7 +299,7 @@
 	}
 
 	.motiongpu-error-source-row-active {
-		background: color-mix(in srgb, var(--motiongpu-color-accent) 10%, transparent);
+		background: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);
 	}
 
 	.motiongpu-error-source-line {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@motion-core/motion-gpu",
-	"version": "0.4.0",
+	"version": "0.4.1",
 	"description": "Framework-agnostic WebGPU runtime for fullscreen WGSL shaders with explicit Svelte and React adapter entrypoints.",
 	"keywords": [
 		"svelte",
@@ -69,7 +69,8 @@
 		"dist"
 	],
 	"scripts": {
-		"build": "svelte-package -i src/lib -o dist && node ./scripts/build/transpile-react-tsx.mjs",
+		"build": "svelte-package -i src/lib -o dist && node ./scripts/build/transpile-react-tsx.mjs && node ./scripts/build/patch-webgpu-types-dts.mjs",
+		"build:watch": "svelte-package -i src/lib -o dist -w --preserve-output",
 		"prepack": "bun run build",
 		"check": "svelte-check --tsconfig ./tsconfig.json && publint",
 		"test": "vitest run",
@@ -105,6 +106,9 @@
 			"optional": true
 		}
 	},
+	"dependencies": {
+		"@webgpu/types": "^0.1.66"
+	},
 	"devDependencies": {
 		"@eslint/compat": "^2.0.2",
 		"@eslint/js": "^10.0.1",
@@ -117,7 +121,6 @@
 		"@types/react-dom": "^19.2.2",
 		"@vitest/coverage-v8": "^4.0.18",
 		"@types/node": "^25.3.3",
-		"@webgpu/types": "^0.1.66",
 		"eslint": "^10.0.2",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.14.0",

package/dist/react/FragCanvas.tsx

@@ -1,345 +0,0 @@
-import { createCurrentWritable as currentWritable } from '../core/current-value.js';
-import { toMotionGPUErrorReport, type MotionGPUErrorReport } from '../core/error-report.js';
-import type { FragMaterial } from '../core/material.js';
-import { createFrameRegistry } from '../core/frame-registry.js';
-import { createMotionGPURuntimeLoop } from '../core/runtime-loop.js';
-import type {
-	OutputColorSpace,
-	RenderPass,
-	RenderMode,
-	RenderTargetDefinitionMap
-} from '../core/types.js';
-import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-import { FrameRegistryReactContext } from './frame-context.js';
-import { MotionGPUErrorOverlay } from './MotionGPUErrorOverlay.js';
-import { MotionGPUReactContext, type MotionGPUContext } from './motiongpu-context.js';
-
-export interface FragCanvasProps {
-	material: FragMaterial;
-	renderTargets?: RenderTargetDefinitionMap;
-	passes?: RenderPass[];
-	clearColor?: [number, number, number, number];
-	outputColorSpace?: OutputColorSpace;
-	renderMode?: RenderMode;
-	autoRender?: boolean;
-	maxDelta?: number;
-	adapterOptions?: GPURequestAdapterOptions;
-	deviceDescriptor?: GPUDeviceDescriptor;
-	dpr?: number;
-	showErrorOverlay?: boolean;
-	errorRenderer?: (report: MotionGPUErrorReport) => ReactNode;
-	onError?: (report: MotionGPUErrorReport) => void;
-	errorHistoryLimit?: number;
-	onErrorHistory?: (history: MotionGPUErrorReport[]) => void;
-	className?: string;
-	style?: CSSProperties;
-	children?: ReactNode;
-}
-
-interface RuntimePropsSnapshot {
-	material: FragMaterial;
-	renderTargets: RenderTargetDefinitionMap;
-	passes: RenderPass[];
-	clearColor: [number, number, number, number];
-	outputColorSpace: OutputColorSpace;
-	adapterOptions: GPURequestAdapterOptions | undefined;
-	deviceDescriptor: GPUDeviceDescriptor | undefined;
-	onError: ((report: MotionGPUErrorReport) => void) | undefined;
-	errorHistoryLimit: number;
-	onErrorHistory: ((history: MotionGPUErrorReport[]) => void) | undefined;
-}
-
-interface FragCanvasRuntimeState {
-	registry: ReturnType<typeof createFrameRegistry>;
-	context: MotionGPUContext;
-	canvasRef: { current: HTMLCanvasElement | undefined };
-	size: ReturnType<typeof currentWritable<{ width: number; height: number }>>;
-	dprState: ReturnType<typeof currentWritable<number>>;
-	maxDeltaState: ReturnType<typeof currentWritable<number>>;
-	renderModeState: ReturnType<typeof currentWritable<RenderMode>>;
-	autoRenderState: ReturnType<typeof currentWritable<boolean>>;
-	requestFrameSignalRef: { current: (() => void) | null };
-	requestFrame: () => void;
-	invalidateFrame: () => void;
-	advanceFrame: () => void;
-}
-
-function getInitialDpr(): number {
-	if (typeof window === 'undefined') {
-		return 1;
-	}
-
-	return window.devicePixelRatio ?? 1;
-}
-
-function createRuntimeState(initialDpr: number): FragCanvasRuntimeState {
-	const registry = createFrameRegistry({ maxDelta: 0.1 });
-	const canvasRef = { current: undefined as HTMLCanvasElement | undefined };
-	const requestFrameSignalRef = { current: null as (() => void) | null };
-	const requestFrame = (): void => {
-		requestFrameSignalRef.current?.();
-	};
-	const invalidateFrame = (): void => {
-		registry.invalidate();
-		requestFrame();
-	};
-	const advanceFrame = (): void => {
-		registry.advance();
-		requestFrame();
-	};
-
-	const size = currentWritable({ width: 0, height: 0 });
-	const dprState = currentWritable(initialDpr, requestFrame);
-	const maxDeltaState = currentWritable(0.1, (value) => {
-		registry.setMaxDelta(value);
-		requestFrame();
-	});
-	const renderModeState = currentWritable<RenderMode>('always', (value) => {
-		registry.setRenderMode(value);
-		requestFrame();
-	});
-	const autoRenderState = currentWritable<boolean>(true, (value) => {
-		registry.setAutoRender(value);
-		requestFrame();
-	});
-	const userState = currentWritable<Record<string | symbol, unknown>>({});
-
-	const context: MotionGPUContext = {
-		get canvas() {
-			return canvasRef.current;
-		},
-		size,
-		dpr: dprState,
-		maxDelta: maxDeltaState,
-		renderMode: renderModeState,
-		autoRender: autoRenderState,
-		user: userState,
-		invalidate: invalidateFrame,
-		advance: advanceFrame,
-		scheduler: {
-			createStage: registry.createStage,
-			getStage: registry.getStage,
-			setDiagnosticsEnabled: registry.setDiagnosticsEnabled,
-			getDiagnosticsEnabled: registry.getDiagnosticsEnabled,
-			getLastRunTimings: registry.getLastRunTimings,
-			getSchedule: registry.getSchedule,
-			setProfilingEnabled: registry.setProfilingEnabled,
-			setProfilingWindow: registry.setProfilingWindow,
-			resetProfiling: registry.resetProfiling,
-			getProfilingEnabled: registry.getProfilingEnabled,
-			getProfilingWindow: registry.getProfilingWindow,
-			getProfilingSnapshot: registry.getProfilingSnapshot
-		}
-	};
-
-	return {
-		registry,
-		context,
-		canvasRef,
-		size,
-		dprState,
-		maxDeltaState,
-		renderModeState,
-		autoRenderState,
-		requestFrameSignalRef,
-		requestFrame,
-		invalidateFrame,
-		advanceFrame
-	};
-}
-
-function getNormalizedErrorHistoryLimit(value: number): number {
-	if (!Number.isFinite(value) || value <= 0) {
-		return 0;
-	}
-
-	return Math.floor(value);
-}
-
-export function FragCanvas({
-	material,
-	renderTargets = {},
-	passes = [],
-	clearColor = [0, 0, 0, 1],
-	outputColorSpace = 'srgb',
-	renderMode = 'always',
-	autoRender = true,
-	maxDelta = 0.1,
-	adapterOptions = undefined,
-	deviceDescriptor = undefined,
-	dpr = getInitialDpr(),
-	showErrorOverlay = true,
-	errorRenderer,
-	onError = undefined,
-	errorHistoryLimit = 0,
-	onErrorHistory = undefined,
-	className = '',
-	style,
-	children
-}: FragCanvasProps) {
-	const runtimeRef = useRef<FragCanvasRuntimeState | null>(null);
-	if (!runtimeRef.current) {
-		runtimeRef.current = createRuntimeState(getInitialDpr());
-	}
-	const runtime = runtimeRef.current;
-
-	const runtimePropsRef = useRef<RuntimePropsSnapshot>({
-		material,
-		renderTargets,
-		passes,
-		clearColor,
-		outputColorSpace,
-		adapterOptions,
-		deviceDescriptor,
-		onError,
-		errorHistoryLimit,
-		onErrorHistory
-	});
-	runtimePropsRef.current = {
-		material,
-		renderTargets,
-		passes,
-		clearColor,
-		outputColorSpace,
-		adapterOptions,
-		deviceDescriptor,
-		onError,
-		errorHistoryLimit,
-		onErrorHistory
-	};
-
-	const [errorReport, setErrorReport] = useState<MotionGPUErrorReport | null>(null);
-	const [errorHistory, setErrorHistory] = useState<MotionGPUErrorReport[]>([]);
-
-	useEffect(() => {
-		runtime.renderModeState.set(renderMode);
-	}, [renderMode, runtime]);
-
-	useEffect(() => {
-		runtime.autoRenderState.set(autoRender);
-	}, [autoRender, runtime]);
-
-	useEffect(() => {
-		runtime.maxDeltaState.set(maxDelta);
-	}, [maxDelta, runtime]);
-
-	useEffect(() => {
-		runtime.dprState.set(dpr);
-	}, [dpr, runtime]);
-
-	useEffect(() => {
-		const limit = getNormalizedErrorHistoryLimit(errorHistoryLimit);
-		if (limit <= 0) {
-			if (errorHistory.length === 0) {
-				return;
-			}
-			setErrorHistory([]);
-			onErrorHistory?.([]);
-			return;
-		}
-
-		if (errorHistory.length <= limit) {
-			return;
-		}
-
-		const trimmed = errorHistory.slice(errorHistory.length - limit);
-		setErrorHistory(trimmed);
-		onErrorHistory?.(trimmed);
-	}, [errorHistory, errorHistoryLimit, onErrorHistory]);
-
-	useEffect(() => {
-		const canvas = runtime.canvasRef.current;
-		if (!canvas) {
-			const report = toMotionGPUErrorReport(
-				new Error('Canvas element is not available'),
-				'initialization'
-			);
-			setErrorReport(report);
-			const historyLimit = getNormalizedErrorHistoryLimit(
-				runtimePropsRef.current.errorHistoryLimit
-			);
-			if (historyLimit > 0) {
-				const nextHistory = [report].slice(-historyLimit);
-				setErrorHistory(nextHistory);
-				runtimePropsRef.current.onErrorHistory?.(nextHistory);
-			}
-			runtimePropsRef.current.onError?.(report);
-			return () => {
-				runtime.registry.clear();
-			};
-		}
-
-		const runtimeLoop = createMotionGPURuntimeLoop({
-			canvas,
-			registry: runtime.registry,
-			size: runtime.size,
-			dpr: runtime.dprState,
-			maxDelta: runtime.maxDeltaState,
-			getMaterial: () => runtimePropsRef.current.material,
-			getRenderTargets: () => runtimePropsRef.current.renderTargets,
-			getPasses: () => runtimePropsRef.current.passes,
-			getClearColor: () => runtimePropsRef.current.clearColor,
-			getOutputColorSpace: () => runtimePropsRef.current.outputColorSpace,
-			getAdapterOptions: () => runtimePropsRef.current.adapterOptions,
-			getDeviceDescriptor: () => runtimePropsRef.current.deviceDescriptor,
-			getOnError: () => runtimePropsRef.current.onError,
-			getErrorHistoryLimit: () => runtimePropsRef.current.errorHistoryLimit,
-			getOnErrorHistory: () => runtimePropsRef.current.onErrorHistory,
-			reportErrorHistory: (history) => {
-				setErrorHistory(history);
-			},
-			reportError: (report) => {
-				setErrorReport(report);
-			}
-		});
-		runtime.requestFrameSignalRef.current = runtimeLoop.requestFrame;
-
-		return () => {
-			runtime.requestFrameSignalRef.current = null;
-			runtimeLoop.destroy();
-		};
-	}, [runtime]);
-
-	const canvasStyle: CSSProperties = {
-		position: 'absolute',
-		inset: 0,
-		display: 'block',
-		width: '100%',
-		height: '100%',
-		...style
-	};
-
-	return (
-		<FrameRegistryReactContext.Provider value={runtime.registry}>
-			<MotionGPUReactContext.Provider value={runtime.context}>
-				<div
-					className="motiongpu-canvas-wrap"
-					style={{
-						position: 'relative',
-						width: '100%',
-						height: '100%',
-						minWidth: 0,
-						minHeight: 0,
-						overflow: 'hidden'
-					}}
-				>
-					<canvas
-						className={className}
-						style={canvasStyle}
-						ref={(node) => {
-							runtime.canvasRef.current = node ?? undefined;
-						}}
-					/>
-					{showErrorOverlay && errorReport ? (
-						errorRenderer ? (
-							errorRenderer(errorReport)
-						) : (
-							<MotionGPUErrorOverlay report={errorReport} />
-						)
-					) : null}
-					{children}
-				</div>
-			</MotionGPUReactContext.Provider>
-		</FrameRegistryReactContext.Provider>
-	);
-}

package/dist/react/MotionGPUErrorOverlay.tsx

@@ -1,129 +0,0 @@
-import type { MotionGPUErrorReport } from '../core/error-report.js';
-import { Portal } from './Portal.js';
-
-interface MotionGPUErrorOverlayProps {
-	report: MotionGPUErrorReport;
-}
-
-function normalizeErrorText(value: string): string {
-	return value
-		.trim()
-		.replace(/[.:!]+$/g, '')
-		.toLowerCase();
-}
-
-function shouldShowErrorMessage(value: MotionGPUErrorReport): boolean {
-	return normalizeErrorText(value.message) !== normalizeErrorText(value.title);
-}
-
-export function MotionGPUErrorOverlay({ report }: MotionGPUErrorOverlayProps) {
-	const detailsSummary = report.source ? 'Additional diagnostics' : 'Technical details';
-
-	return (
-		<Portal>
-			<div
-				className="motiongpu-error-overlay"
-				role="presentation"
-				style={{
-					position: 'fixed',
-					inset: 0,
-					display: 'grid',
-					placeItems: 'center',
-					padding: '1rem',
-					background: 'rgba(12, 12, 14, 0.38)',
-					backdropFilter: 'blur(10px)',
-					zIndex: 2147483647
-				}}
-			>
-				<section
-					role="alertdialog"
-					aria-live="assertive"
-					aria-modal="true"
-					data-testid="motiongpu-error"
-					style={{
-						width: 'min(52rem, calc(100vw - 1.5rem))',
-						maxHeight: 'min(84vh, 44rem)',
-						overflow: 'auto',
-						margin: 0,
-						padding: '1rem',
-						border: '1px solid rgba(107, 107, 107, 0.2)',
-						borderRadius: '1rem',
-						boxSizing: 'border-box',
-						background: '#ffffff',
-						color: '#262626',
-						fontSize: '0.875rem',
-						lineHeight: 1.45
-					}}
-				>
-					<header style={{ display: 'grid', gap: '0.5rem' }}>
-						<p
-							style={{
-								margin: 0,
-								fontSize: '0.66rem',
-								letterSpacing: '0.08em',
-								textTransform: 'uppercase',
-								color: '#5f6672'
-							}}
-						>
-							{report.phase}
-						</p>
-						<h2 style={{ margin: 0, fontSize: '1.1rem', lineHeight: 1.2 }}>{report.title}</h2>
-					</header>
-					<div style={{ display: 'grid', gap: '0.5rem', marginTop: '0.75rem' }}>
-						{shouldShowErrorMessage(report) ? <p style={{ margin: 0 }}>{report.message}</p> : null}
-						<p style={{ margin: 0, color: '#5f6672' }}>{report.hint}</p>
-					</div>
-
-					{report.source ? (
-						<section aria-label="Source" style={{ marginTop: '0.75rem' }}>
-							<h3 style={{ margin: 0, fontSize: '0.8rem', textTransform: 'uppercase' }}>Source</h3>
-							<div style={{ marginTop: '0.4rem', border: '1px solid rgba(107, 107, 107, 0.2)' }}>
-								<div
-									style={{
-										padding: '0.45rem 0.6rem',
-										borderBottom: '1px solid rgba(107, 107, 107, 0.2)'
-									}}
-								>
-									<span>
-										{report.source.location}
-										{report.source.column ? `, col ${report.source.column}` : ''}
-									</span>
-								</div>
-								<div style={{ display: 'grid' }}>
-									{report.source.snippet.map((snippetLine) => (
-										<div
-											key={`snippet-${snippetLine.number}`}
-											style={{
-												display: 'grid',
-												gridTemplateColumns: '2rem minmax(0, 1fr)',
-												gap: '0.42rem',
-												padding: '0.2rem 0.5rem',
-												background: snippetLine.highlight ? 'rgba(255, 105, 0, 0.08)' : undefined
-											}}
-										>
-											<span>{snippetLine.number}</span>
-											<span className="motiongpu-error-source-code">{snippetLine.code || ' '}</span>
-										</div>
-									))}
-								</div>
-							</div>
-						</section>
-					) : null}
-
-					{report.details.length > 0 ? (
-						<details open style={{ marginTop: '0.75rem' }}>
-							<summary>{detailsSummary}</summary>
-							<pre style={{ whiteSpace: 'pre-wrap' }}>{report.details.join('\n')}</pre>
-						</details>
-					) : null}
-					{report.stack.length > 0 ? (
-						<details style={{ marginTop: '0.75rem' }}>
-							<summary>Stack trace</summary>
-							<pre style={{ whiteSpace: 'pre-wrap' }}>{report.stack.join('\n')}</pre>
-						</details>
-					) : null}
-				</section>
-			</div>
-		</Portal>
-	);
-}

package/dist/react/Portal.tsx

@@ -1,34 +0,0 @@
-import { useEffect, useState, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-
-export interface PortalProps {
-	target?: string | HTMLElement | null;
-	children?: ReactNode;
-}
-
-function resolveTargetElement(input: string | HTMLElement | null | undefined): HTMLElement {
-	if (typeof document === 'undefined') {
-		throw new Error('Portal target resolution requires a browser environment');
-	}
-
-	return typeof input === 'string'
-		? (document.querySelector<HTMLElement>(input) ?? document.body)
-		: (input ?? document.body);
-}
-
-export function Portal({ target = 'body', children }: PortalProps) {
-	const [targetElement, setTargetElement] = useState<HTMLElement | null>(null);
-
-	useEffect(() => {
-		if (typeof document === 'undefined') {
-			return;
-		}
-		setTargetElement(resolveTargetElement(target));
-	}, [target]);
-
-	if (!targetElement) {
-		return null;
-	}
-
-	return createPortal(<div>{children ?? null}</div>, targetElement);
-}