@motion-core/motion-gpu 0.3.0 → 0.4.1

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/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

@@ -30,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

@@ -54,10 +54,10 @@ 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);
@@ -68,6 +68,9 @@ export function useTexture(urlInput, options = {}) {
     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;
@@ -79,6 +82,7 @@ export function useTexture(urlInput, options = {}) {
         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(), {

package/package.json

@@ -1,10 +1,12 @@
 {
 	"name": "@motion-core/motion-gpu",
-	"version": "0.3.0",
-	"description": "Framework-agnostic WebGPU runtime for fullscreen WGSL shaders with explicit Svelte adapter entrypoints.",
+	"version": "0.4.1",
+	"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,8 @@
 		"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 && 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",
@@ -68,6 +79,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,23 +91,36 @@
 		"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
 		}
 	},
+	"dependencies": {
+		"@webgpu/types": "^0.1.66"
+	},
 	"devDependencies": {
 		"@eslint/compat": "^2.0.2",
 		"@eslint/js": "^10.0.1",
 		"@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",
 		"eslint": "^10.0.2",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.14.0",
@@ -104,6 +130,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",