@motion-core/motion-gpu 0.3.0 → 0.4.0

package/dist/react/FragCanvas.tsx

@@ -0,0 +1,345 @@
+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.d.ts

@@ -0,0 +1,6 @@
+import type { MotionGPUErrorReport } from '../core/error-report.js';
+interface MotionGPUErrorOverlayProps {
+    report: MotionGPUErrorReport;
+}
+export declare function MotionGPUErrorOverlay({ report }: MotionGPUErrorOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/MotionGPUErrorOverlay.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from './Portal.js';
+function normalizeErrorText(value) {
+    return value
+        .trim()
+        .replace(/[.:!]+$/g, '')
+        .toLowerCase();
+}
+function shouldShowErrorMessage(value) {
+    return normalizeErrorText(value.message) !== normalizeErrorText(value.title);
+}
+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] }) }) }));
+}

package/dist/react/MotionGPUErrorOverlay.tsx

@@ -0,0 +1,129 @@
+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.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export interface PortalProps {
+    target?: string | HTMLElement | null;
+    children?: ReactNode;
+}
+export declare function Portal({ target, children }: PortalProps): import("react").ReactPortal | null;

package/dist/react/Portal.js

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

package/dist/react/Portal.tsx

@@ -0,0 +1,34 @@
+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);
+}

package/dist/react/advanced.d.ts

@@ -0,0 +1,11 @@
+/**
+ * React adapter advanced entrypoint for MotionGPU.
+ */
+export * from './index.js';
+export { applySchedulerPreset, captureSchedulerDebugSnapshot } from '../core/scheduler-helpers.js';
+export { setMotionGPUUserContext, useMotionGPUUserContext, useSetMotionGPUUserContext } from './use-motiongpu-user-context.js';
+export type { ApplySchedulerPresetOptions, SchedulerDebugSnapshot, SchedulerPreset, SchedulerPresetConfig } from '../core/scheduler-helpers.js';
+export type { MotionGPUUserContext, MotionGPUUserNamespace } from './motiongpu-context.js';
+export type { FrameProfilingSnapshot, FrameKey, FrameTaskInvalidation, FrameTaskInvalidationToken, FrameRunTimings, FrameScheduleSnapshot, FrameStage, FrameStageCallback, FrameTimingStats, FrameTask } from '../core/frame-registry.js';
+export type { SetMotionGPUUserContextOptions } from './use-motiongpu-user-context.js';
+export type { RenderPassContext, RenderTarget, UniformLayout, UniformLayoutEntry } from '../core/types.js';

package/dist/react/advanced.js

@@ -0,0 +1,6 @@
+/**
+ * React adapter advanced entrypoint for MotionGPU.
+ */
+export * from './index.js';
+export { applySchedulerPreset, captureSchedulerDebugSnapshot } from '../core/scheduler-helpers.js';
+export { setMotionGPUUserContext, useMotionGPUUserContext, useSetMotionGPUUserContext } from './use-motiongpu-user-context.js';

package/dist/react/frame-context.d.ts

@@ -0,0 +1,14 @@
+import type { FrameCallback, FrameKey, FrameProfilingSnapshot, FrameRegistry, FrameRunTimings, FrameScheduleSnapshot, FrameStage, FrameStageCallback, FrameTask, FrameTaskInvalidation, FrameTaskInvalidationToken, UseFrameOptions, UseFrameResult } from '../core/frame-registry.js';
+/**
+ * React context container for the active frame registry.
+ */
+export declare const FrameRegistryReactContext: import("react").Context<FrameRegistry | null>;
+export type { FrameCallback, FrameKey, FrameProfilingSnapshot, FrameRegistry, FrameRunTimings, FrameScheduleSnapshot, FrameStage, FrameStageCallback, FrameTask, FrameTaskInvalidation, FrameTaskInvalidationToken, UseFrameOptions, UseFrameResult };
+/**
+ * Registers a frame callback using an auto-generated task key.
+ */
+export declare function useFrame(callback: FrameCallback, options?: UseFrameOptions): UseFrameResult;
+/**
+ * Registers a frame callback with an explicit task key.
+ */
+export declare function useFrame(key: FrameKey, callback: FrameCallback, options?: UseFrameOptions): UseFrameResult;