@motion-core/motion-gpu 0.5.0 → 0.7.0

package/dist/svelte/use-pointer.js

@@ -0,0 +1,292 @@
+import { createCurrentWritable } from "../core/current-value.js";
+import { createInitialPointerState, getPointerCoordinates, getPointerNowSeconds, normalizePointerKind, resolvePointerFrameRequestMode } from "../core/pointer.js";
+import { useMotionGPU } from "./motiongpu-context.js";
+import { onMount } from "svelte";
+//#region src/lib/svelte/use-pointer.ts
+/**
+* Normalizes click button configuration with a primary-button fallback.
+*/
+function normalizeClickButtons(buttons) {
+	const source = buttons && buttons.length > 0 ? buttons : [0];
+	return new Set(source);
+}
+/**
+* Resolves a valid click duration threshold in milliseconds.
+*/
+function resolveClickMaxDurationMs(value) {
+	if (typeof value !== "number" || Number.isNaN(value) || value <= 0) return 350;
+	return value;
+}
+/**
+* Resolves a valid click travel threshold in pixels.
+*/
+function resolveClickMaxMovePx(value) {
+	if (typeof value !== "number" || Number.isNaN(value) || value < 0) return 8;
+	return value;
+}
+/**
+* Tracks normalized pointer coordinates and click/tap snapshots for the active `FragCanvas`.
+*/
+function usePointer(options = {}) {
+	const motiongpu = useMotionGPU();
+	const pointerState = createCurrentWritable(createInitialPointerState());
+	const lastClick = createCurrentWritable(null);
+	const enabled = options.enabled ?? true;
+	const requestFrameMode = options.requestFrame ?? "auto";
+	const capturePointer = options.capturePointer ?? true;
+	const trackOutside = options.trackWhilePressedOutsideCanvas ?? true;
+	const clickEnabled = options.clickEnabled ?? true;
+	const clickMaxDurationMs = resolveClickMaxDurationMs(options.clickMaxDurationMs);
+	const clickMaxMovePx = resolveClickMaxMovePx(options.clickMaxMovePx);
+	const clickButtons = normalizeClickButtons(options.clickButtons);
+	let activePointerId = null;
+	let downSnapshot = null;
+	let clickCounter = 0;
+	let previousPx = null;
+	let previousUv = null;
+	let previousTimeSeconds = 0;
+	const requestFrame = () => {
+		const mode = resolvePointerFrameRequestMode(requestFrameMode, motiongpu.renderMode.current);
+		if (mode === "invalidate") {
+			motiongpu.invalidate();
+			return;
+		}
+		if (mode === "advance") motiongpu.advance();
+	};
+	/**
+	* Commits a full pointer state snapshot with computed delta and velocity vectors.
+	*/
+	const updatePointerState = (input) => {
+		const nowSeconds = getPointerNowSeconds();
+		const dt = previousTimeSeconds > 0 ? Math.max(nowSeconds - previousTimeSeconds, 1e-6) : 0;
+		const deltaPx = input.resetDelta || !previousPx ? [0, 0] : [input.point.px[0] - previousPx[0], input.point.px[1] - previousPx[1]];
+		const deltaUv = input.resetDelta || !previousUv ? [0, 0] : [input.point.uv[0] - previousUv[0], input.point.uv[1] - previousUv[1]];
+		const velocityPx = dt > 0 ? [deltaPx[0] / dt, deltaPx[1] / dt] : [0, 0];
+		const velocityUv = dt > 0 ? [deltaUv[0] / dt, deltaUv[1] / dt] : [0, 0];
+		const nextState = {
+			px: input.point.px,
+			uv: input.point.uv,
+			ndc: input.point.ndc,
+			inside: input.inside,
+			pressed: input.pressed,
+			dragging: input.dragging,
+			pointerType: input.pointerType,
+			pointerId: input.pointerId,
+			button: input.button,
+			buttons: input.buttons,
+			time: nowSeconds,
+			downPx: input.downPx,
+			downUv: input.downUv,
+			deltaPx,
+			deltaUv,
+			velocityPx,
+			velocityUv
+		};
+		pointerState.set(nextState);
+		previousPx = input.point.px;
+		previousUv = input.point.uv;
+		previousTimeSeconds = nowSeconds;
+		requestFrame();
+		return nextState;
+	};
+	/**
+	* Updates only the `inside` flag while keeping the latest pointer coordinates.
+	*/
+	const updateInsideState = (inside) => {
+		const nextState = {
+			...pointerState.current,
+			inside,
+			time: getPointerNowSeconds(),
+			deltaPx: [0, 0],
+			deltaUv: [0, 0],
+			velocityPx: [0, 0],
+			velocityUv: [0, 0]
+		};
+		pointerState.set(nextState);
+		requestFrame();
+		return nextState;
+	};
+	/**
+	* Checks whether an event belongs to the active tracked pointer.
+	*/
+	const isTrackedPointer = (event) => activePointerId === null || event.pointerId === activePointerId;
+	onMount(() => {
+		if (!enabled) return;
+		const canvas = motiongpu.canvas;
+		if (!canvas) return;
+		const handlePointerDown = (event) => {
+			const point = getPointerCoordinates(event.clientX, event.clientY, canvas.getBoundingClientRect());
+			const pointerType = normalizePointerKind(event.pointerType);
+			activePointerId = event.pointerId;
+			downSnapshot = {
+				pointerId: event.pointerId,
+				pointerType,
+				button: event.button,
+				timeMs: getPointerNowSeconds() * 1e3,
+				px: point.px,
+				uv: point.uv,
+				inside: point.inside
+			};
+			if (capturePointer) try {
+				canvas.setPointerCapture(event.pointerId);
+			} catch {}
+			const nextState = updatePointerState({
+				point,
+				inside: point.inside,
+				pressed: true,
+				dragging: false,
+				pointerType,
+				pointerId: event.pointerId,
+				button: event.button,
+				buttons: event.buttons,
+				downPx: point.px,
+				downUv: point.uv,
+				resetDelta: true
+			});
+			options.onDown?.(nextState, event);
+		};
+		const handleMove = (event) => {
+			if (!isTrackedPointer(event)) return;
+			const point = getPointerCoordinates(event.clientX, event.clientY, canvas.getBoundingClientRect());
+			const pressed = activePointerId !== null && event.pointerId === activePointerId;
+			const downPx = pressed ? downSnapshot?.px ?? point.px : null;
+			const downUv = pressed ? downSnapshot?.uv ?? point.uv : null;
+			let dragging = false;
+			if (pressed && downPx) {
+				const dx = point.px[0] - downPx[0];
+				const dy = point.px[1] - downPx[1];
+				dragging = Math.hypot(dx, dy) > 0;
+			}
+			const nextState = updatePointerState({
+				point,
+				inside: point.inside,
+				pressed,
+				dragging,
+				pointerType: normalizePointerKind(event.pointerType),
+				pointerId: event.pointerId,
+				button: pressed ? downSnapshot?.button ?? event.button : null,
+				buttons: event.buttons,
+				downPx,
+				downUv
+			});
+			options.onMove?.(nextState, event);
+		};
+		const handleWindowMove = (event) => {
+			if (!trackOutside || activePointerId === null || event.pointerId !== activePointerId) return;
+			const point = getPointerCoordinates(event.clientX, event.clientY, canvas.getBoundingClientRect());
+			if (point.inside) return;
+			const downPx = downSnapshot?.px ?? point.px;
+			const downUv = downSnapshot?.uv ?? point.uv;
+			const dx = point.px[0] - downPx[0];
+			const dy = point.px[1] - downPx[1];
+			const nextState = updatePointerState({
+				point,
+				inside: false,
+				pressed: true,
+				dragging: Math.hypot(dx, dy) > 0,
+				pointerType: downSnapshot?.pointerType ?? normalizePointerKind(event.pointerType),
+				pointerId: event.pointerId,
+				button: downSnapshot?.button ?? event.button,
+				buttons: event.buttons,
+				downPx,
+				downUv
+			});
+			options.onMove?.(nextState, event);
+		};
+		const releasePointer = (event, emitClick) => {
+			if (activePointerId === null || event.pointerId !== activePointerId) return;
+			const point = getPointerCoordinates(event.clientX, event.clientY, canvas.getBoundingClientRect());
+			const pointerType = downSnapshot?.pointerType ?? normalizePointerKind(event.pointerType);
+			const previous = downSnapshot;
+			const nextState = updatePointerState({
+				point,
+				inside: point.inside,
+				pressed: false,
+				dragging: false,
+				pointerType,
+				pointerId: null,
+				button: null,
+				buttons: event.buttons,
+				downPx: null,
+				downUv: null
+			});
+			options.onUp?.(nextState, event);
+			if (capturePointer && canvas.hasPointerCapture(event.pointerId)) try {
+				canvas.releasePointerCapture(event.pointerId);
+			} catch {}
+			if (emitClick && clickEnabled && previous && clickButtons.has(previous.button)) {
+				const durationMs = getPointerNowSeconds() * 1e3 - previous.timeMs;
+				const dx = point.px[0] - previous.px[0];
+				const dy = point.px[1] - previous.px[1];
+				const moveDistance = Math.hypot(dx, dy);
+				if (previous.inside && point.inside && durationMs <= clickMaxDurationMs && moveDistance <= clickMaxMovePx) {
+					clickCounter += 1;
+					const click = {
+						id: clickCounter,
+						time: getPointerNowSeconds(),
+						pointerType,
+						pointerId: event.pointerId,
+						button: previous.button,
+						modifiers: {
+							alt: event.altKey,
+							ctrl: event.ctrlKey,
+							shift: event.shiftKey,
+							meta: event.metaKey
+						},
+						px: point.px,
+						uv: point.uv,
+						ndc: point.ndc
+					};
+					lastClick.set(click);
+					options.onClick?.(click, nextState, event);
+					requestFrame();
+				}
+			}
+			activePointerId = null;
+			downSnapshot = null;
+		};
+		const handlePointerUp = (event) => {
+			releasePointer(event, true);
+		};
+		const handlePointerCancel = (event) => {
+			releasePointer(event, false);
+		};
+		const handlePointerLeave = () => {
+			if (activePointerId !== null) return;
+			updateInsideState(false);
+		};
+		canvas.addEventListener("pointerdown", handlePointerDown);
+		canvas.addEventListener("pointermove", handleMove);
+		canvas.addEventListener("pointerup", handlePointerUp);
+		canvas.addEventListener("pointercancel", handlePointerCancel);
+		canvas.addEventListener("pointerleave", handlePointerLeave);
+		if (trackOutside) {
+			window.addEventListener("pointermove", handleWindowMove);
+			window.addEventListener("pointerup", handlePointerUp);
+			window.addEventListener("pointercancel", handlePointerCancel);
+		}
+		return () => {
+			canvas.removeEventListener("pointerdown", handlePointerDown);
+			canvas.removeEventListener("pointermove", handleMove);
+			canvas.removeEventListener("pointerup", handlePointerUp);
+			canvas.removeEventListener("pointercancel", handlePointerCancel);
+			canvas.removeEventListener("pointerleave", handlePointerLeave);
+			if (trackOutside) {
+				window.removeEventListener("pointermove", handleWindowMove);
+				window.removeEventListener("pointerup", handlePointerUp);
+				window.removeEventListener("pointercancel", handlePointerCancel);
+			}
+		};
+	});
+	return {
+		state: pointerState,
+		lastClick,
+		resetClick: () => {
+			lastClick.set(null);
+		}
+	};
+}
+//#endregion
+export { usePointer };
+
+//# sourceMappingURL=use-pointer.js.map

package/dist/svelte/use-pointer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pointer.js","names":[],"sources":["../../src/lib/svelte/use-pointer.ts"],"sourcesContent":["import { onMount } from 'svelte';\nimport {\n\tcreateCurrentWritable as currentWritable,\n\ttype CurrentReadable\n} from '../core/current-value.js';\nimport {\n\tcreateInitialPointerState,\n\tgetPointerCoordinates,\n\tgetPointerNowSeconds,\n\tnormalizePointerKind,\n\tresolvePointerFrameRequestMode,\n\ttype PointerClick,\n\ttype PointerFrameRequestMode,\n\ttype PointerState,\n\ttype PointerVec2\n} from '../core/pointer.js';\nimport { useMotionGPU } from './motiongpu-context.js';\n\nexport type {\n\tPointerClick,\n\tPointerFrameRequestMode,\n\tPointerKind,\n\tPointerPoint,\n\tPointerState\n} from '../core/pointer.js';\n\n/**\n * Configuration for pointer input handling in `usePointer`.\n */\nexport interface UsePointerOptions {\n\t/**\n\t * Enables pointer listeners.\n\t *\n\t * @default true\n\t */\n\tenabled?: boolean;\n\t/**\n\t * Frame wake-up strategy for pointer-driven state changes.\n\t *\n\t * @default 'auto'\n\t */\n\trequestFrame?: PointerFrameRequestMode;\n\t/**\n\t * Requests pointer capture on pointer down.\n\t *\n\t * @default true\n\t */\n\tcapturePointer?: boolean;\n\t/**\n\t * Tracks pointer move/up outside canvas while pointer is pressed.\n\t *\n\t * @default true\n\t */\n\ttrackWhilePressedOutsideCanvas?: boolean;\n\t/**\n\t * Enables click/tap synthesis on pointer up.\n\t *\n\t * @default true\n\t */\n\tclickEnabled?: boolean;\n\t/**\n\t * Maximum press duration to consider pointer up a click (milliseconds).\n\t *\n\t * @default 350\n\t */\n\tclickMaxDurationMs?: number;\n\t/**\n\t * Maximum pointer travel from down to up to consider pointer up a click (pixels).\n\t *\n\t * @default 8\n\t */\n\tclickMaxMovePx?: number;\n\t/**\n\t * Allowed pointer buttons for click synthesis.\n\t *\n\t * @default [0]\n\t */\n\tclickButtons?: number[];\n\t/**\n\t * Called after pointer move state update.\n\t */\n\tonMove?: (state: PointerState, event: PointerEvent) => void;\n\t/**\n\t * Called after pointer down state update.\n\t */\n\tonDown?: (state: PointerState, event: PointerEvent) => void;\n\t/**\n\t * Called after pointer up/cancel state update.\n\t */\n\tonUp?: (state: PointerState, event: PointerEvent) => void;\n\t/**\n\t * Called when click/tap is synthesized.\n\t */\n\tonClick?: (click: PointerClick, state: PointerState, event: PointerEvent) => void;\n}\n\n/**\n * Reactive state returned by `usePointer`.\n */\nexport interface UsePointerResult {\n\t/**\n\t * Current pointer state.\n\t */\n\tstate: CurrentReadable<PointerState>;\n\t/**\n\t * Last synthesized click/tap event.\n\t */\n\tlastClick: CurrentReadable<PointerClick | null>;\n\t/**\n\t * Clears last click snapshot.\n\t */\n\tresetClick: () => void;\n}\n\ninterface PointerDownSnapshot {\n\tbutton: number;\n\tinside: boolean;\n\tpointerId: number;\n\tpointerType: 'mouse' | 'pen' | 'touch';\n\tpx: PointerVec2;\n\ttimeMs: number;\n\tuv: PointerVec2;\n}\n\n/**\n * Normalizes click button configuration with a primary-button fallback.\n */\nfunction normalizeClickButtons(buttons: number[] | undefined): Set<number> {\n\tconst source = buttons && buttons.length > 0 ? buttons : [0];\n\treturn new Set(source);\n}\n\n/**\n * Resolves a valid click duration threshold in milliseconds.\n */\nfunction resolveClickMaxDurationMs(value: number | undefined): number {\n\tif (typeof value !== 'number' || Number.isNaN(value) || value <= 0) {\n\t\treturn 350;\n\t}\n\n\treturn value;\n}\n\n/**\n * Resolves a valid click travel threshold in pixels.\n */\nfunction resolveClickMaxMovePx(value: number | undefined): number {\n\tif (typeof value !== 'number' || Number.isNaN(value) || value < 0) {\n\t\treturn 8;\n\t}\n\n\treturn value;\n}\n\n/**\n * Tracks normalized pointer coordinates and click/tap snapshots for the active `FragCanvas`.\n */\nexport function usePointer(options: UsePointerOptions = {}): UsePointerResult {\n\tconst motiongpu = useMotionGPU();\n\tconst pointerState = currentWritable<PointerState>(createInitialPointerState());\n\tconst lastClick = currentWritable<PointerClick | null>(null);\n\tconst enabled = options.enabled ?? true;\n\tconst requestFrameMode = options.requestFrame ?? 'auto';\n\tconst capturePointer = options.capturePointer ?? true;\n\tconst trackOutside = options.trackWhilePressedOutsideCanvas ?? true;\n\tconst clickEnabled = options.clickEnabled ?? true;\n\tconst clickMaxDurationMs = resolveClickMaxDurationMs(options.clickMaxDurationMs);\n\tconst clickMaxMovePx = resolveClickMaxMovePx(options.clickMaxMovePx);\n\tconst clickButtons = normalizeClickButtons(options.clickButtons);\n\tlet activePointerId: number | null = null;\n\tlet downSnapshot: PointerDownSnapshot | null = null;\n\tlet clickCounter = 0;\n\tlet previousPx: PointerVec2 | null = null;\n\tlet previousUv: PointerVec2 | null = null;\n\tlet previousTimeSeconds = 0;\n\n\tconst requestFrame = (): void => {\n\t\tconst mode = resolvePointerFrameRequestMode(requestFrameMode, motiongpu.renderMode.current);\n\t\tif (mode === 'invalidate') {\n\t\t\tmotiongpu.invalidate();\n\t\t\treturn;\n\t\t}\n\t\tif (mode === 'advance') {\n\t\t\tmotiongpu.advance();\n\t\t}\n\t};\n\n\t/**\n\t * Commits a full pointer state snapshot with computed delta and velocity vectors.\n\t */\n\tconst updatePointerState = (input: {\n\t\tbutton: number | null;\n\t\tbuttons: number;\n\t\tdownPx: PointerVec2 | null;\n\t\tdownUv: PointerVec2 | null;\n\t\tdragging: boolean;\n\t\tinside: boolean;\n\t\tpointerId: number | null;\n\t\tpointerType: 'mouse' | 'pen' | 'touch' | null;\n\t\tpressed: boolean;\n\t\tpoint: {\n\t\t\tndc: PointerVec2;\n\t\t\tpx: PointerVec2;\n\t\t\tuv: PointerVec2;\n\t\t};\n\t\tresetDelta?: boolean;\n\t}): PointerState => {\n\t\tconst nowSeconds = getPointerNowSeconds();\n\t\tconst dt = previousTimeSeconds > 0 ? Math.max(nowSeconds - previousTimeSeconds, 1e-6) : 0;\n\t\tconst deltaPx: PointerVec2 =\n\t\t\tinput.resetDelta || !previousPx\n\t\t\t\t? [0, 0]\n\t\t\t\t: [input.point.px[0] - previousPx[0], input.point.px[1] - previousPx[1]];\n\t\tconst deltaUv: PointerVec2 =\n\t\t\tinput.resetDelta || !previousUv\n\t\t\t\t? [0, 0]\n\t\t\t\t: [input.point.uv[0] - previousUv[0], input.point.uv[1] - previousUv[1]];\n\t\tconst velocityPx: PointerVec2 = dt > 0 ? [deltaPx[0] / dt, deltaPx[1] / dt] : [0, 0];\n\t\tconst velocityUv: PointerVec2 = dt > 0 ? [deltaUv[0] / dt, deltaUv[1] / dt] : [0, 0];\n\t\tconst nextState: PointerState = {\n\t\t\tpx: input.point.px,\n\t\t\tuv: input.point.uv,\n\t\t\tndc: input.point.ndc,\n\t\t\tinside: input.inside,\n\t\t\tpressed: input.pressed,\n\t\t\tdragging: input.dragging,\n\t\t\tpointerType: input.pointerType,\n\t\t\tpointerId: input.pointerId,\n\t\t\tbutton: input.button,\n\t\t\tbuttons: input.buttons,\n\t\t\ttime: nowSeconds,\n\t\t\tdownPx: input.downPx,\n\t\t\tdownUv: input.downUv,\n\t\t\tdeltaPx,\n\t\t\tdeltaUv,\n\t\t\tvelocityPx,\n\t\t\tvelocityUv\n\t\t};\n\t\tpointerState.set(nextState);\n\t\tpreviousPx = input.point.px;\n\t\tpreviousUv = input.point.uv;\n\t\tpreviousTimeSeconds = nowSeconds;\n\t\trequestFrame();\n\t\treturn nextState;\n\t};\n\n\t/**\n\t * Updates only the `inside` flag while keeping the latest pointer coordinates.\n\t */\n\tconst updateInsideState = (inside: boolean): PointerState => {\n\t\tconst current = pointerState.current;\n\t\tconst nextState: PointerState = {\n\t\t\t...current,\n\t\t\tinside,\n\t\t\ttime: getPointerNowSeconds(),\n\t\t\tdeltaPx: [0, 0],\n\t\t\tdeltaUv: [0, 0],\n\t\t\tvelocityPx: [0, 0],\n\t\t\tvelocityUv: [0, 0]\n\t\t};\n\t\tpointerState.set(nextState);\n\t\trequestFrame();\n\t\treturn nextState;\n\t};\n\n\t/**\n\t * Checks whether an event belongs to the active tracked pointer.\n\t */\n\tconst isTrackedPointer = (event: PointerEvent): boolean =>\n\t\tactivePointerId === null || event.pointerId === activePointerId;\n\n\tonMount(() => {\n\t\tif (!enabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst canvas = motiongpu.canvas;\n\t\tif (!canvas) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handlePointerDown = (event: PointerEvent): void => {\n\t\t\tconst point = getPointerCoordinates(\n\t\t\t\tevent.clientX,\n\t\t\t\tevent.clientY,\n\t\t\t\tcanvas.getBoundingClientRect()\n\t\t\t);\n\t\t\tconst pointerType = normalizePointerKind(event.pointerType);\n\t\t\tactivePointerId = event.pointerId;\n\t\t\tdownSnapshot = {\n\t\t\t\tpointerId: event.pointerId,\n\t\t\t\tpointerType,\n\t\t\t\tbutton: event.button,\n\t\t\t\ttimeMs: getPointerNowSeconds() * 1000,\n\t\t\t\tpx: point.px,\n\t\t\t\tuv: point.uv,\n\t\t\t\tinside: point.inside\n\t\t\t};\n\t\t\tif (capturePointer) {\n\t\t\t\ttry {\n\t\t\t\t\tcanvas.setPointerCapture(event.pointerId);\n\t\t\t\t} catch {\n\t\t\t\t\t// Browser rejected capture (e.g. unsupported pointer state).\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst nextState = updatePointerState({\n\t\t\t\tpoint,\n\t\t\t\tinside: point.inside,\n\t\t\t\tpressed: true,\n\t\t\t\tdragging: false,\n\t\t\t\tpointerType,\n\t\t\t\tpointerId: event.pointerId,\n\t\t\t\tbutton: event.button,\n\t\t\t\tbuttons: event.buttons,\n\t\t\t\tdownPx: point.px,\n\t\t\t\tdownUv: point.uv,\n\t\t\t\tresetDelta: true\n\t\t\t});\n\t\t\toptions.onDown?.(nextState, event);\n\t\t};\n\n\t\tconst handleMove = (event: PointerEvent): void => {\n\t\t\tif (!isTrackedPointer(event)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst point = getPointerCoordinates(\n\t\t\t\tevent.clientX,\n\t\t\t\tevent.clientY,\n\t\t\t\tcanvas.getBoundingClientRect()\n\t\t\t);\n\t\t\tconst pressed = activePointerId !== null && event.pointerId === activePointerId;\n\t\t\tconst downPx = pressed ? (downSnapshot?.px ?? point.px) : null;\n\t\t\tconst downUv = pressed ? (downSnapshot?.uv ?? point.uv) : null;\n\t\t\tlet dragging = false;\n\t\t\tif (pressed && downPx) {\n\t\t\t\tconst dx = point.px[0] - downPx[0];\n\t\t\t\tconst dy = point.px[1] - downPx[1];\n\t\t\t\tdragging = Math.hypot(dx, dy) > 0;\n\t\t\t}\n\t\t\tconst nextState = updatePointerState({\n\t\t\t\tpoint,\n\t\t\t\tinside: point.inside,\n\t\t\t\tpressed,\n\t\t\t\tdragging,\n\t\t\t\tpointerType: normalizePointerKind(event.pointerType),\n\t\t\t\tpointerId: event.pointerId,\n\t\t\t\tbutton: pressed ? (downSnapshot?.button ?? event.button) : null,\n\t\t\t\tbuttons: event.buttons,\n\t\t\t\tdownPx,\n\t\t\t\tdownUv\n\t\t\t});\n\t\t\toptions.onMove?.(nextState, event);\n\t\t};\n\n\t\tconst handleWindowMove = (event: PointerEvent): void => {\n\t\t\tif (!trackOutside || activePointerId === null || event.pointerId !== activePointerId) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst point = getPointerCoordinates(\n\t\t\t\tevent.clientX,\n\t\t\t\tevent.clientY,\n\t\t\t\tcanvas.getBoundingClientRect()\n\t\t\t);\n\t\t\tif (point.inside) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst downPx = downSnapshot?.px ?? point.px;\n\t\t\tconst downUv = downSnapshot?.uv ?? point.uv;\n\t\t\tconst dx = point.px[0] - downPx[0];\n\t\t\tconst dy = point.px[1] - downPx[1];\n\t\t\tconst nextState = updatePointerState({\n\t\t\t\tpoint,\n\t\t\t\tinside: false,\n\t\t\t\tpressed: true,\n\t\t\t\tdragging: Math.hypot(dx, dy) > 0,\n\t\t\t\tpointerType: downSnapshot?.pointerType ?? normalizePointerKind(event.pointerType),\n\t\t\t\tpointerId: event.pointerId,\n\t\t\t\tbutton: downSnapshot?.button ?? event.button,\n\t\t\t\tbuttons: event.buttons,\n\t\t\t\tdownPx,\n\t\t\t\tdownUv\n\t\t\t});\n\t\t\toptions.onMove?.(nextState, event);\n\t\t};\n\n\t\tconst releasePointer = (event: PointerEvent, emitClick: boolean): void => {\n\t\t\tif (activePointerId === null || event.pointerId !== activePointerId) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst point = getPointerCoordinates(\n\t\t\t\tevent.clientX,\n\t\t\t\tevent.clientY,\n\t\t\t\tcanvas.getBoundingClientRect()\n\t\t\t);\n\t\t\tconst pointerType = downSnapshot?.pointerType ?? normalizePointerKind(event.pointerType);\n\t\t\tconst previous = downSnapshot;\n\t\t\tconst nextState = updatePointerState({\n\t\t\t\tpoint,\n\t\t\t\tinside: point.inside,\n\t\t\t\tpressed: false,\n\t\t\t\tdragging: false,\n\t\t\t\tpointerType,\n\t\t\t\tpointerId: null,\n\t\t\t\tbutton: null,\n\t\t\t\tbuttons: event.buttons,\n\t\t\t\tdownPx: null,\n\t\t\t\tdownUv: null\n\t\t\t});\n\t\t\toptions.onUp?.(nextState, event);\n\n\t\t\tif (capturePointer && canvas.hasPointerCapture(event.pointerId)) {\n\t\t\t\ttry {\n\t\t\t\t\tcanvas.releasePointerCapture(event.pointerId);\n\t\t\t\t} catch {\n\t\t\t\t\t// Browser rejected release for this pointer id.\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (emitClick && clickEnabled && previous && clickButtons.has(previous.button)) {\n\t\t\t\tconst durationMs = getPointerNowSeconds() * 1000 - previous.timeMs;\n\t\t\t\tconst dx = point.px[0] - previous.px[0];\n\t\t\t\tconst dy = point.px[1] - previous.px[1];\n\t\t\t\tconst moveDistance = Math.hypot(dx, dy);\n\t\t\t\tif (\n\t\t\t\t\tprevious.inside &&\n\t\t\t\t\tpoint.inside &&\n\t\t\t\t\tdurationMs <= clickMaxDurationMs &&\n\t\t\t\t\tmoveDistance <= clickMaxMovePx\n\t\t\t\t) {\n\t\t\t\t\tclickCounter += 1;\n\t\t\t\t\tconst click: PointerClick = {\n\t\t\t\t\t\tid: clickCounter,\n\t\t\t\t\t\ttime: getPointerNowSeconds(),\n\t\t\t\t\t\tpointerType,\n\t\t\t\t\t\tpointerId: event.pointerId,\n\t\t\t\t\t\tbutton: previous.button,\n\t\t\t\t\t\tmodifiers: {\n\t\t\t\t\t\t\talt: event.altKey,\n\t\t\t\t\t\t\tctrl: event.ctrlKey,\n\t\t\t\t\t\t\tshift: event.shiftKey,\n\t\t\t\t\t\t\tmeta: event.metaKey\n\t\t\t\t\t\t},\n\t\t\t\t\t\tpx: point.px,\n\t\t\t\t\t\tuv: point.uv,\n\t\t\t\t\t\tndc: point.ndc\n\t\t\t\t\t};\n\t\t\t\t\tlastClick.set(click);\n\t\t\t\t\toptions.onClick?.(click, nextState, event);\n\t\t\t\t\trequestFrame();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tactivePointerId = null;\n\t\t\tdownSnapshot = null;\n\t\t};\n\n\t\tconst handlePointerUp = (event: PointerEvent): void => {\n\t\t\treleasePointer(event, true);\n\t\t};\n\n\t\tconst handlePointerCancel = (event: PointerEvent): void => {\n\t\t\treleasePointer(event, false);\n\t\t};\n\n\t\tconst handlePointerLeave = (): void => {\n\t\t\tif (activePointerId !== null) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tupdateInsideState(false);\n\t\t};\n\n\t\tcanvas.addEventListener('pointerdown', handlePointerDown);\n\t\tcanvas.addEventListener('pointermove', handleMove);\n\t\tcanvas.addEventListener('pointerup', handlePointerUp);\n\t\tcanvas.addEventListener('pointercancel', handlePointerCancel);\n\t\tcanvas.addEventListener('pointerleave', handlePointerLeave);\n\t\tif (trackOutside) {\n\t\t\twindow.addEventListener('pointermove', handleWindowMove);\n\t\t\twindow.addEventListener('pointerup', handlePointerUp);\n\t\t\twindow.addEventListener('pointercancel', handlePointerCancel);\n\t\t}\n\n\t\treturn () => {\n\t\t\tcanvas.removeEventListener('pointerdown', handlePointerDown);\n\t\t\tcanvas.removeEventListener('pointermove', handleMove);\n\t\t\tcanvas.removeEventListener('pointerup', handlePointerUp);\n\t\t\tcanvas.removeEventListener('pointercancel', handlePointerCancel);\n\t\t\tcanvas.removeEventListener('pointerleave', handlePointerLeave);\n\t\t\tif (trackOutside) {\n\t\t\t\twindow.removeEventListener('pointermove', handleWindowMove);\n\t\t\t\twindow.removeEventListener('pointerup', handlePointerUp);\n\t\t\t\twindow.removeEventListener('pointercancel', handlePointerCancel);\n\t\t\t}\n\t\t};\n\t});\n\n\treturn {\n\t\tstate: pointerState,\n\t\tlastClick,\n\t\tresetClick: () => {\n\t\t\tlastClick.set(null);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@motion-core/motion-gpu",
-	"version": "0.5.0",
+	"version": "0.7.0",
 	"description": "Framework-agnostic WebGPU runtime for fullscreen WGSL shaders with explicit Svelte and React adapter entrypoints.",
 	"keywords": [
 		"svelte",

package/src/lib/core/compute-bindgroup-cache.ts

@@ -0,0 +1,73 @@
+export interface ComputeStorageBindGroupCacheRequest {
+	topologyKey: string;
+	layoutEntries: GPUBindGroupLayoutEntry[];
+	bindGroupEntries: GPUBindGroupEntry[];
+	resourceRefs: readonly unknown[];
+}
+
+export interface ComputeStorageBindGroupCache {
+	getOrCreate: (request: ComputeStorageBindGroupCacheRequest) => GPUBindGroup | null;
+	reset: () => void;
+}
+
+function equalResourceRefs(previous: readonly unknown[], next: readonly unknown[]): boolean {
+	if (previous.length !== next.length) {
+		return false;
+	}
+
+	for (let index = 0; index < previous.length; index += 1) {
+		if (!Object.is(previous[index], next[index])) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export function createComputeStorageBindGroupCache(
+	device: GPUDevice
+): ComputeStorageBindGroupCache {
+	let cachedTopologyKey: string | null = null;
+	let cachedLayout: GPUBindGroupLayout | null = null;
+	let cachedBindGroup: GPUBindGroup | null = null;
+	let cachedResourceRefs: readonly unknown[] = [];
+
+	const reset = (): void => {
+		cachedTopologyKey = null;
+		cachedLayout = null;
+		cachedBindGroup = null;
+		cachedResourceRefs = [];
+	};
+
+	return {
+		getOrCreate(request) {
+			if (request.layoutEntries.length === 0) {
+				reset();
+				return null;
+			}
+
+			if (cachedTopologyKey !== request.topologyKey) {
+				cachedTopologyKey = request.topologyKey;
+				cachedLayout = device.createBindGroupLayout({ entries: request.layoutEntries });
+				cachedBindGroup = null;
+				cachedResourceRefs = [];
+			}
+
+			if (!cachedLayout) {
+				throw new Error('Compute storage bind group cache is missing a layout.');
+			}
+
+			if (cachedBindGroup && equalResourceRefs(cachedResourceRefs, request.resourceRefs)) {
+				return cachedBindGroup;
+			}
+
+			cachedBindGroup = device.createBindGroup({
+				layout: cachedLayout,
+				entries: request.bindGroupEntries
+			});
+			cachedResourceRefs = [...request.resourceRefs];
+			return cachedBindGroup;
+		},
+		reset
+	};
+}

package/src/lib/core/compute-shader.ts

@@ -277,6 +277,27 @@ ${options.compute}
 `;
 }
 
+/**
+ * Source location for generated compute shader lines.
+ */
+export interface ComputeShaderSourceLocation {
+	kind: 'compute';
+	line: number;
+}
+
+/**
+ * 1-based line map from generated compute WGSL to user compute source.
+ */
+export type ComputeShaderLineMap = Array<ComputeShaderSourceLocation | null>;
+
+/**
+ * Result of compute shader source generation with line mapping metadata.
+ */
+export interface BuiltComputeShaderSource {
+	code: string;
+	lineMap: ComputeShaderLineMap;
+}
+
 /**
  * Assembles full compute shader WGSL with preamble.
  *
@@ -324,3 +345,68 @@ ${storageTextureBindings ? '\n' + storageTextureBindings : ''}
 ${options.compute}
 `;
 }
+
+function buildComputeLineMap(
+	generatedCode: string,
+	userComputeSource: string
+): ComputeShaderLineMap {
+	const lineCount = generatedCode.split('\n').length;
+	const lineMap: ComputeShaderLineMap = new Array(lineCount + 1).fill(null);
+	const computeStartIndex = generatedCode.indexOf(userComputeSource);
+	if (computeStartIndex === -1) {
+		return lineMap;
+	}
+
+	const computeStartLine = generatedCode.slice(0, computeStartIndex).split('\n').length;
+	const computeLineCount = userComputeSource.split('\n').length;
+	for (let line = 0; line < computeLineCount; line += 1) {
+		lineMap[computeStartLine + line] = {
+			kind: 'compute',
+			line: line + 1
+		};
+	}
+
+	return lineMap;
+}
+
+/**
+ * Assembles full compute shader WGSL with source line mapping metadata.
+ */
+export function buildComputeShaderSourceWithMap(options: {
+	compute: string;
+	uniformLayout: UniformLayout;
+	storageBufferKeys: string[];
+	storageBufferDefinitions: Record<
+		string,
+		{ type: StorageBufferType; access: StorageBufferAccess }
+	>;
+	storageTextureKeys: string[];
+	storageTextureDefinitions: Record<string, { format: GPUTextureFormat }>;
+}): BuiltComputeShaderSource {
+	const code = buildComputeShaderSource(options);
+	return {
+		code,
+		lineMap: buildComputeLineMap(code, options.compute)
+	};
+}
+
+/**
+ * Assembles ping-pong compute shader WGSL with source line mapping metadata.
+ */
+export function buildPingPongComputeShaderSourceWithMap(options: {
+	compute: string;
+	uniformLayout: UniformLayout;
+	storageBufferKeys: string[];
+	storageBufferDefinitions: Record<
+		string,
+		{ type: StorageBufferType; access: StorageBufferAccess }
+	>;
+	target: string;
+	targetFormat: GPUTextureFormat;
+}): BuiltComputeShaderSource {
+	const code = buildPingPongComputeShaderSource(options);
+	return {
+		code,
+		lineMap: buildComputeLineMap(code, options.compute)
+	};
+}

package/src/lib/core/error-diagnostics.ts

@@ -11,6 +11,13 @@ export interface MaterialSourceMetadata {
 	functionName?: string;
 }
 
+export interface ComputeSourceLocation {
+	kind: 'compute';
+	line: number;
+}
+
+export type ShaderSourceLocation = MaterialSourceLocation | ComputeSourceLocation;
+
 /**
  * One WGSL compiler diagnostic enriched with source-location metadata.
  */
@@ -19,7 +26,7 @@ export interface ShaderCompilationDiagnostic {
 	message: string;
 	linePos?: number;
 	lineLength?: number;
-	sourceLocation: MaterialSourceLocation | null;
+	sourceLocation: ShaderSourceLocation | null;
 }
 
 /**
@@ -41,8 +48,10 @@ export interface ShaderCompilationRuntimeContext {
  */
 export interface ShaderCompilationDiagnosticsPayload {
 	kind: 'shader-compilation';
+	shaderStage?: 'fragment' | 'compute';
 	diagnostics: ShaderCompilationDiagnostic[];
 	fragmentSource: string;
+	computeSource?: string;
 	includeSources: Record<string, string>;
 	defineBlockSource?: string;
 	materialSource: MaterialSourceMetadata | null;
@@ -78,7 +87,7 @@ function isMaterialSourceMetadata(value: unknown): value is MaterialSourceMetada
 	return true;
 }
 
-function isMaterialSourceLocation(value: unknown): value is MaterialSourceLocation | null {
+function isShaderSourceLocation(value: unknown): value is ShaderSourceLocation | null {
 	if (value === null) {
 		return true;
 	}
@@ -89,7 +98,7 @@ function isMaterialSourceLocation(value: unknown): value is MaterialSourceLocati
 
 	const record = value as Record<string, unknown>;
 	const kind = record.kind;
-	if (kind !== 'fragment' && kind !== 'include' && kind !== 'define') {
+	if (kind !== 'fragment' && kind !== 'include' && kind !== 'define' && kind !== 'compute') {
 		return false;
 	}
 
@@ -114,7 +123,7 @@ function isShaderCompilationDiagnostic(value: unknown): value is ShaderCompilati
 	if (record.lineLength !== undefined && typeof record.lineLength !== 'number') {
 		return false;
 	}
-	if (!isMaterialSourceLocation(record.sourceLocation)) {
+	if (!isShaderSourceLocation(record.sourceLocation)) {
 		return false;
 	}
 
@@ -191,6 +200,13 @@ export function getShaderCompilationDiagnostics(
 	if (record.kind !== 'shader-compilation') {
 		return null;
 	}
+	if (
+		record.shaderStage !== undefined &&
+		record.shaderStage !== 'fragment' &&
+		record.shaderStage !== 'compute'
+	) {
+		return null;
+	}
 	if (
 		!Array.isArray(record.diagnostics) ||
 		!record.diagnostics.every(isShaderCompilationDiagnostic)
@@ -200,6 +216,9 @@ export function getShaderCompilationDiagnostics(
 	if (typeof record.fragmentSource !== 'string') {
 		return null;
 	}
+	if (record.computeSource !== undefined && typeof record.computeSource !== 'string') {
+		return null;
+	}
 	if (record.defineBlockSource !== undefined && typeof record.defineBlockSource !== 'string') {
 		return null;
 	}
@@ -222,8 +241,14 @@ export function getShaderCompilationDiagnostics(
 
 	return {
 		kind: 'shader-compilation',
+		...(record.shaderStage !== undefined
+			? { shaderStage: record.shaderStage as 'fragment' | 'compute' }
+			: {}),
 		diagnostics: record.diagnostics as ShaderCompilationDiagnostic[],
 		fragmentSource: record.fragmentSource,
+		...(record.computeSource !== undefined
+			? { computeSource: record.computeSource as string }
+			: {}),
 		includeSources: includeSources as Record<string, string>,
 		...(record.defineBlockSource !== undefined
 			? { defineBlockSource: record.defineBlockSource as string }

package/src/lib/core/error-report.ts

@@ -211,6 +211,19 @@ function buildSourceFromDiagnostics(error: unknown): MotionGPUErrorSource | null
 		};
 	}
 
+	if (location.kind === 'compute') {
+		const computeSource = diagnostics.computeSource ?? diagnostics.fragmentSource;
+		const component = 'Compute shader';
+		const locationLabel = formatShaderSourceLocation(location) ?? `compute line ${location.line}`;
+		return {
+			component,
+			location: `${component} (${locationLabel})`,
+			line: location.line,
+			...(column !== undefined ? { column } : {}),
+			snippet: toSnippet(computeSource, location.line)
+		};
+	}
+
 	const defineName = location.define ?? 'unknown';
 	const defineLine = Math.max(1, location.line);
 	const component = `#define ${defineName}`;
@@ -516,7 +529,19 @@ export function toMotionGPUErrorReport(
 		error instanceof Error && error.stack
 			? splitLines(error.stack).filter((line) => line !== message)
 			: [];
-	const classification = classifyErrorMessage(rawMessage);
+	let classification = classifyErrorMessage(rawMessage);
+	if (
+		shaderDiagnostics?.shaderStage === 'compute' &&
+		classification.code === 'WGSL_COMPILATION_FAILED'
+	) {
+		classification = {
+			code: 'COMPUTE_COMPILATION_FAILED',
+			severity: 'error',
+			recoverable: true,
+			title: 'Compute shader compilation failed',
+			hint: 'Check WGSL compute shader sources below and verify storage bindings.'
+		};
+	}
 
 	return {
 		code: classification.code,

package/src/lib/core/material.ts

@@ -542,7 +542,8 @@ function buildTextureConfigSignature<TTextureKey extends string>(
 			normalized.anisotropy,
 			normalized.filter,
 			normalized.addressModeU,
-			normalized.addressModeV
+			normalized.addressModeV,
+			normalized.fragmentVisible ? '1' : '0'
 		].join(':');
 	}