@motion-core/motion-gpu 0.2.0 → 0.4.0

package/dist/svelte/MotionGPUErrorOverlay.svelte

@@ -53,9 +53,8 @@
 								class="motiongpu-error-source-tab motiongpu-error-source-tab-active"
 								role="tab"
 								aria-selected="true"
-								>{report.source.component} (fragment line {report.source
-									.line}{#if report.source.column}, col
-									{report.source.column}{/if})</span
+								>{report.source.location}{#if report.source.column}, col {report.source
+										.column}{/if}</span
 							>
 							<span class="motiongpu-error-source-tab-spacer" aria-hidden="true"></span>
 						</div>
@@ -117,21 +116,13 @@
 		--motiongpu-radius-xl: var(--radius-xl, 1rem);
 		--motiongpu-font-sans: var(
 			--font-sans,
-			'Aeonik Pro',
 			'Inter',
 			'Segoe UI',
 			'Helvetica Neue',
 			Arial,
 			sans-serif
 		);
-		--motiongpu-font-mono: var(
-			--font-mono,
-			'Aeonik font-mono',
-			'SFMono-Regular',
-			'Menlo',
-			'Consolas',
-			monospace
-		);
+		--motiongpu-font-mono: var(--font-mono, 'SFMono-Regular', 'Menlo', 'Consolas', monospace);
 		position: fixed;
 		inset: 0;
 		display: grid;
@@ -156,7 +147,7 @@
 		max-width: calc(100vw - 1.5rem);
 		box-sizing: border-box;
 		font-size: 0.875rem;
-		font-weight: 300;
+		font-weight: 400;
 		line-height: 1.45;
 		background: linear-gradient(
 			180deg,
@@ -229,7 +220,7 @@
 		background: color-mix(in srgb, var(--motiongpu-color-accent) 9%, var(--motiongpu-color-card));
 		font-size: 0.82rem;
 		line-height: 1.4;
-		font-weight: 300;
+		font-weight: 400;
 		color: var(--motiongpu-color-foreground);
 	}
 
@@ -237,7 +228,7 @@
 		margin: 0;
 		font-size: 0.82rem;
 		line-height: 1.45;
-		font-weight: 300;
+		font-weight: 400;
 		color: var(--motiongpu-color-foreground-muted);
 	}
 
@@ -282,7 +273,7 @@
 		align-items: center;
 		padding: 0.5rem 0.68rem;
 		font-size: 0.76rem;
-		font-weight: 300;
+		font-weight: 400;
 		line-height: 1.2;
 		color: var(--motiongpu-color-foreground-muted);
 		border-right: 1px solid var(--motiongpu-color-border);
@@ -317,7 +308,7 @@
 	.motiongpu-error-source-line {
 		font-family: var(--motiongpu-font-mono);
 		font-size: 0.77rem;
-		font-weight: 300;
+		font-weight: 400;
 		line-height: 1.3;
 		font-variant-numeric: tabular-nums;
 		font-feature-settings: 'tnum' 1;
@@ -329,7 +320,7 @@
 	.motiongpu-error-source-code {
 		font-family: var(--motiongpu-font-mono);
 		font-size: 0.77rem;
-		font-weight: 350;
+		font-weight: 400;
 		line-height: 1.3;
 		color: var(--motiongpu-color-foreground);
 		white-space: pre-wrap;
@@ -367,7 +358,7 @@
 		background: var(--motiongpu-color-background-muted);
 		font-size: 0.74rem;
 		line-height: 1.4;
-		font-weight: 300;
+		font-weight: 400;
 		color: var(--motiongpu-color-foreground);
 		font-family: var(--motiongpu-font-mono);
 	}

package/dist/svelte/Portal.svelte

@@ -14,33 +14,18 @@
 			: (input ?? document.body);
 	}
 
-	const portal = (node: HTMLDivElement, initialTarget: string | HTMLElement | null) => {
-		let targetElement = resolveTargetElement(initialTarget);
+	const portal = (node: HTMLDivElement) => {
+		const targetElement = resolveTargetElement(target);
 		targetElement.appendChild(node);
 
-		return {
-			update(nextTarget: string | HTMLElement | null) {
-				const nextTargetElement = resolveTargetElement(nextTarget);
-				if (nextTargetElement === targetElement) {
-					return;
-				}
-
-				if (node.parentNode === targetElement) {
-					targetElement.removeChild(node);
-				}
-
-				nextTargetElement.appendChild(node);
-				targetElement = nextTargetElement;
-			},
-			destroy() {
-				if (node.parentNode === targetElement) {
-					targetElement.removeChild(node);
-				}
+		return () => {
+			if (node.parentNode === targetElement) {
+				targetElement.removeChild(node);
 			}
 		};
 	};
 </script>
 
-<div use:portal={target}>
+<div {@attach portal}>
 	{@render children?.()}
 </div>

package/dist/svelte/use-motiongpu-user-context.d.ts

@@ -17,6 +17,14 @@ export interface SetMotionGPUUserContextOptions {
      * @default 'skip'
      */
     existing?: 'merge' | 'replace' | 'skip';
+    /**
+     * How function inputs should be interpreted:
+     * - `factory`: call function and store its return value
+     * - `value`: store function itself
+     *
+     * @default 'factory'
+     */
+    functionValue?: 'factory' | 'value';
 }
 /**
  * Returns a read-only view of the entire motiongpu user context store.
@@ -25,7 +33,7 @@ export declare function useMotionGPUUserContext<UC extends UserContextStore = Us
 /**
  * Reads a namespaced user context value as a reactive readable store.
  */
-export declare function useMotionGPUUserContext<UCT = unknown>(namespace: MotionGPUUserNamespace): CurrentReadable<UCT | undefined>;
+export declare function useMotionGPUUserContext<UC extends UserContextStore = UserContextStore, K extends keyof UC & MotionGPUUserNamespace = keyof UC & MotionGPUUserNamespace>(namespace: K): CurrentReadable<UC[K] | undefined>;
 /**
  * Sets a namespaced user context value with explicit write semantics.
  *

package/dist/svelte/use-motiongpu-user-context.js

@@ -43,6 +43,7 @@ export function useMotionGPUUserContext(namespace) {
 export function setMotionGPUUserContext(namespace, value, options) {
     const userStore = useMotionGPU().user;
     const mode = options?.existing ?? 'skip';
+    const functionValueMode = options?.functionValue ?? 'factory';
     let resolvedValue;
     userStore.update((context) => {
         const hasExisting = namespace in context;
@@ -50,7 +51,9 @@ export function setMotionGPUUserContext(namespace, value, options) {
             resolvedValue = context[namespace];
             return context;
         }
-        const nextValue = typeof value === 'function' ? value() : value;
+        const nextValue = typeof value === 'function' && functionValueMode === 'factory'
+            ? value()
+            : value;
         if (hasExisting && mode === 'merge') {
             const currentValue = context[namespace];
             if (isObjectEntry(currentValue) && isObjectEntry(nextValue)) {

package/dist/svelte/use-texture.d.ts

@@ -1,5 +1,6 @@
 import { type CurrentReadable } from '../core/current-value.js';
 import { type LoadedTexture, type TextureLoadOptions } from '../core/texture-loader.js';
+import { type MotionGPUErrorReport } from '../core/error-report.js';
 /**
  * Reactive state returned by {@link useTexture}.
  */
@@ -16,6 +17,10 @@ export interface UseTextureResult {
      * Last loading error.
      */
     error: CurrentReadable<Error | null>;
+    /**
+     * Last loading error normalized to MotionGPU diagnostics report shape.
+     */
+    errorReport: CurrentReadable<MotionGPUErrorReport | null>;
     /**
      * Reloads all textures using current URL input.
      */
@@ -25,11 +30,15 @@ export interface UseTextureResult {
  * Supported URL input variants for `useTexture`.
  */
 export type TextureUrlInput = string[] | (() => string[]);
+/**
+ * Supported options input variants for `useTexture`.
+ */
+export type TextureOptionsInput = TextureLoadOptions | (() => TextureLoadOptions);
 /**
  * Loads textures from URLs and exposes reactive loading/error state.
  *
  * @param urlInput - URLs array or lazy URL provider.
- * @param options - Loader options passed to URL fetch/decode pipeline.
+ * @param optionsInput - Loader options object or lazy options provider.
  * @returns Reactive texture loading state with reload support.
  */
-export declare function useTexture(urlInput: TextureUrlInput, options?: TextureLoadOptions): UseTextureResult;
+export declare function useTexture(urlInput: TextureUrlInput, optionsInput?: TextureOptionsInput): UseTextureResult;

package/dist/svelte/use-texture.js

@@ -1,6 +1,7 @@
 import { onDestroy } from 'svelte';
 import { createCurrentWritable as currentWritable } from '../core/current-value.js';
 import { isAbortError, loadTexturesFromUrls } from '../core/texture-loader.js';
+import { toMotionGPUErrorReport } from '../core/error-report.js';
 /**
  * Normalizes unknown thrown values to an `Error` instance.
  */
@@ -53,19 +54,23 @@ function mergeAbortSignals(primary, secondary) {
  * Loads textures from URLs and exposes reactive loading/error state.
  *
  * @param urlInput - URLs array or lazy URL provider.
- * @param options - Loader options passed to URL fetch/decode pipeline.
+ * @param optionsInput - Loader options object or lazy options provider.
  * @returns Reactive texture loading state with reload support.
  */
-export function useTexture(urlInput, options = {}) {
+export function useTexture(urlInput, optionsInput = {}) {
     const textures = currentWritable(null);
     const loading = currentWritable(true);
     const error = currentWritable(null);
+    const errorReport = currentWritable(null);
     let disposed = false;
     let requestVersion = 0;
     let activeController = null;
     let runningLoad = null;
     let reloadQueued = false;
     const getUrls = typeof urlInput === 'function' ? urlInput : () => urlInput;
+    const getOptions = typeof optionsInput === 'function'
+        ? optionsInput
+        : () => optionsInput;
     const executeLoad = async () => {
         if (disposed) {
             return;
@@ -75,7 +80,9 @@ export function useTexture(urlInput, options = {}) {
         activeController = controller;
         loading.set(true);
         error.set(null);
+        errorReport.set(null);
         const previous = textures.current;
+        const options = getOptions() ?? {};
         const mergedSignal = mergeAbortSignals(controller.signal, options.signal);
         try {
             const loaded = await loadTexturesFromUrls(getUrls(), {
@@ -98,7 +105,9 @@ export function useTexture(urlInput, options = {}) {
             }
             disposeTextures(previous);
             textures.set(null);
-            error.set(toError(nextError));
+            const normalizedError = toError(nextError);
+            error.set(normalizedError);
+            errorReport.set(toMotionGPUErrorReport(normalizedError, 'initialization'));
         }
         finally {
             if (!disposed && version === requestVersion) {
@@ -142,6 +151,7 @@ export function useTexture(urlInput, options = {}) {
         textures,
         loading,
         error,
+        errorReport,
         reload: load
     };
 }

package/package.json

@@ -1,10 +1,12 @@
 {
 	"name": "@motion-core/motion-gpu",
-	"version": "0.2.0",
-	"description": "Framework-agnostic WebGPU runtime for fullscreen WGSL shaders with explicit Svelte adapter entrypoints.",
+	"version": "0.4.0",
+	"description": "Framework-agnostic WebGPU runtime for fullscreen WGSL shaders with explicit Svelte and React adapter entrypoints.",
 	"keywords": [
 		"svelte",
 		"svelte5",
+		"react",
+		"react18",
 		"webgpu",
 		"wgsl",
 		"shader",
@@ -46,6 +48,14 @@
 			"svelte": "./dist/svelte/advanced.js",
 			"default": "./dist/svelte/advanced.js"
 		},
+		"./react": {
+			"types": "./dist/react/index.d.ts",
+			"default": "./dist/react/index.js"
+		},
+		"./react/advanced": {
+			"types": "./dist/react/advanced.d.ts",
+			"default": "./dist/react/advanced.js"
+		},
 		"./core": {
 			"types": "./dist/core/index.d.ts",
 			"default": "./dist/core/index.js"
@@ -59,7 +69,7 @@
 		"dist"
 	],
 	"scripts": {
-		"build": "svelte-package -i src/lib -o dist",
+		"build": "svelte-package -i src/lib -o dist && node ./scripts/build/transpile-react-tsx.mjs",
 		"prepack": "bun run build",
 		"check": "svelte-check --tsconfig ./tsconfig.json && publint",
 		"test": "vitest run",
@@ -68,6 +78,8 @@
 		"test:e2e": "playwright test",
 		"test:e2e:headed": "playwright test --headed",
 		"e2e:serve": "vite --config e2e/vite.config.ts",
+		"e2e:serve:svelte": "MOTION_GPU_E2E_FRAMEWORK=svelte vite --config e2e/vite.config.ts",
+		"e2e:serve:react": "MOTION_GPU_E2E_FRAMEWORK=react vite --config e2e/vite.config.ts",
 		"perf:core": "bun run ./scripts/perf/core-benchmark.ts",
 		"perf:core:check": "bun run ./scripts/perf/core-benchmark.ts --strict",
 		"perf:core:baseline": "bun run ./scripts/perf/core-benchmark.ts --update-baseline",
@@ -78,9 +90,17 @@
 		"format": "prettier --write ."
 	},
 	"peerDependencies": {
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0",
 		"svelte": "^5.0.0"
 	},
 	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		},
+		"react-dom": {
+			"optional": true
+		},
 		"svelte": {
 			"optional": true
 		}
@@ -91,7 +111,10 @@
 		"@playwright/test": "^1.58.2",
 		"@sveltejs/package": "^2.5.0",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@testing-library/react": "^16.3.0",
 		"@testing-library/svelte": "^5.2.8",
+		"@types/react": "^19.2.2",
+		"@types/react-dom": "^19.2.2",
 		"@vitest/coverage-v8": "^4.0.18",
 		"@types/node": "^25.3.3",
 		"@webgpu/types": "^0.1.66",
@@ -104,6 +127,8 @@
 		"prettier-plugin-svelte": "^3.4.1",
 		"prettier-plugin-tailwindcss": "^0.7.2",
 		"publint": "^0.3.15",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
 		"svelte": "^5.51.0",
 		"svelte-check": "^4.3.6",
 		"typescript": "^5.9.3",