@motion-core/motion-gpu 0.6.0 → 0.8.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/dist/vue/FragCanvas.js

@@ -0,0 +1,8 @@
+import FragCanvas_vue_vue_type_script_setup_true_lang_default from "./FragCanvas.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                           */
+//#region src/lib/vue/FragCanvas.vue
+var FragCanvas_default = FragCanvas_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FragCanvas_default as default };
+
+//# sourceMappingURL=FragCanvas.js.map

package/dist/vue/FragCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FragCanvas.js","names":[],"sources":["../../src/lib/vue/FragCanvas.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MotionGPUErrorReport } from '../core/error-report.js';\nimport type { FragMaterial } from '../core/material.js';\nimport type {\n\tAnyPass,\n\tOutputColorSpace,\n\tRenderMode,\n\tRenderTargetDefinitionMap\n} from '../core/types.js';\n\nexport interface FragCanvasProps {\n\tmaterial: FragMaterial;\n\trenderTargets?: RenderTargetDefinitionMap;\n\tpasses?: AnyPass[];\n\tclearColor?: [number, number, number, number];\n\toutputColorSpace?: OutputColorSpace;\n\trenderMode?: RenderMode;\n\tautoRender?: boolean;\n\tmaxDelta?: number;\n\tadapterOptions?: GPURequestAdapterOptions;\n\tdeviceDescriptor?: GPUDeviceDescriptor;\n\tdpr?: number;\n\tshowErrorOverlay?: boolean;\n\tonError?: (report: MotionGPUErrorReport) => void;\n\terrorHistoryLimit?: number;\n\tonErrorHistory?: (history: MotionGPUErrorReport[]) => void;\n\tcanvasClass?: string;\n\tcanvasStyle?: string | Record<string, string | number>;\n}\n\nconst initialDpr = typeof window === 'undefined' ? 1 : (window.devicePixelRatio ?? 1);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch } from 'vue';\nimport { createCurrentWritable as currentWritable } from '../core/current-value.js';\nimport { toMotionGPUErrorReport } from '../core/error-report.js';\nimport { createFrameRegistry } from '../core/frame-registry.js';\nimport { createMotionGPURuntimeLoop } from '../core/runtime-loop.js';\nimport { provideFrameRegistry } from './frame-context.js';\nimport { provideMotionGPUContext } from './motiongpu-context.js';\nimport MotionGPUErrorOverlay from './MotionGPUErrorOverlay.vue';\n\nconst props = withDefaults(defineProps<FragCanvasProps>(), {\n\trenderTargets: () => ({}),\n\tpasses: () => [],\n\tclearColor: () => [0, 0, 0, 1] as [number, number, number, number],\n\toutputColorSpace: 'srgb',\n\trenderMode: 'always',\n\tautoRender: true,\n\tmaxDelta: 0.1,\n\tdpr: () => initialDpr,\n\tshowErrorOverlay: true,\n\terrorHistoryLimit: 0,\n\tcanvasClass: ''\n});\n\nconst wrapperStyle = Object.freeze({\n\tposition: 'relative',\n\twidth: '100%',\n\theight: '100%',\n\tminWidth: '0',\n\tminHeight: '0',\n\toverflow: 'hidden'\n});\n\nconst baseCanvasStyle = Object.freeze({\n\tposition: 'absolute',\n\tinset: '0',\n\tdisplay: 'block',\n\twidth: '100%',\n\theight: '100%'\n});\n\nconst resolvedCanvasStyle = computed(() => [baseCanvasStyle, props.canvasStyle]);\n\ndefineSlots<{\n\tdefault(): unknown;\n\terrorRenderer(props: { report: MotionGPUErrorReport }): unknown;\n}>();\n\nconst canvasRef = useTemplateRef<HTMLCanvasElement>('canvasEl');\nconst errorReport = shallowRef<MotionGPUErrorReport | null>(null);\nconst errorHistory = shallowRef<MotionGPUErrorReport[]>([]);\n\nconst registry = createFrameRegistry({ maxDelta: 0.1 });\nprovideFrameRegistry(registry);\n\nlet requestFrameSignal: (() => void) | null = null;\nlet runtimeLoopHandle: ReturnType<typeof createMotionGPURuntimeLoop> | null = null;\nconst requestFrame = (): void => {\n\trequestFrameSignal?.();\n};\nconst invalidateFrame = (): void => {\n\tregistry.invalidate();\n\trequestFrame();\n};\nconst advanceFrame = (): void => {\n\tregistry.advance();\n\trequestFrame();\n};\n\nconst size = currentWritable({ width: 0, height: 0 });\nconst dprState = currentWritable<number>(initialDpr, requestFrame);\nconst maxDeltaState = currentWritable<number>(0.1, (value) => {\n\tregistry.setMaxDelta(value);\n\trequestFrame();\n});\nconst renderModeState = currentWritable<RenderMode>('always', (value) => {\n\tregistry.setRenderMode(value);\n\trequestFrame();\n});\nconst autoRenderState = currentWritable<boolean>(true, (value) => {\n\tregistry.setAutoRender(value);\n\trequestFrame();\n});\nconst userState = currentWritable<Record<string | symbol, unknown>>({});\n\nprovideMotionGPUContext({\n\tget canvas() {\n\t\treturn canvasRef.value ?? undefined;\n\t},\n\tsize,\n\tdpr: dprState,\n\tmaxDelta: maxDeltaState,\n\trenderMode: renderModeState,\n\tautoRender: autoRenderState,\n\tuser: userState,\n\tinvalidate: invalidateFrame,\n\tadvance: advanceFrame,\n\tscheduler: {\n\t\tcreateStage: registry.createStage,\n\t\tgetStage: registry.getStage,\n\t\tsetDiagnosticsEnabled: registry.setDiagnosticsEnabled,\n\t\tgetDiagnosticsEnabled: registry.getDiagnosticsEnabled,\n\t\tgetLastRunTimings: registry.getLastRunTimings,\n\t\tgetSchedule: registry.getSchedule,\n\t\tsetProfilingEnabled: registry.setProfilingEnabled,\n\t\tsetProfilingWindow: registry.setProfilingWindow,\n\t\tresetProfiling: registry.resetProfiling,\n\t\tgetProfilingEnabled: registry.getProfilingEnabled,\n\t\tgetProfilingWindow: registry.getProfilingWindow,\n\t\tgetProfilingSnapshot: registry.getProfilingSnapshot\n\t}\n});\n\n/**\n * Normalizes the user-supplied error history limit to a non-negative integer.\n */\nfunction getNormalizedErrorHistoryLimit(value: number): number {\n\tif (!Number.isFinite(value) || value <= 0) {\n\t\treturn 0;\n\t}\n\n\treturn Math.floor(value);\n}\n\nwatch(\n\t() => props.renderMode,\n\t(value) => {\n\t\trenderModeState.set(value);\n\t}\n);\n\nwatch(\n\t() => props.autoRender,\n\t(value) => {\n\t\tautoRenderState.set(value);\n\t}\n);\n\nwatch(\n\t() => props.maxDelta,\n\t(value) => {\n\t\tmaxDeltaState.set(value);\n\t}\n);\n\nwatch(\n\t() => props.dpr,\n\t(value) => {\n\t\tdprState.set(value);\n\t}\n);\n\nwatch([() => errorHistory.value, () => props.errorHistoryLimit], ([history, rawLimit]) => {\n\tconst limit = getNormalizedErrorHistoryLimit(rawLimit);\n\tif (limit <= 0) {\n\t\tif (history.length === 0) {\n\t\t\treturn;\n\t\t}\n\t\terrorHistory.value = [];\n\t\tprops.onErrorHistory?.([]);\n\t\treturn;\n\t}\n\n\tif (history.length <= limit) {\n\t\treturn;\n\t}\n\n\tconst trimmed = history.slice(history.length - limit);\n\terrorHistory.value = trimmed;\n\tprops.onErrorHistory?.(trimmed);\n});\n\nonMounted(() => {\n\trenderModeState.set(props.renderMode);\n\tautoRenderState.set(props.autoRender);\n\tmaxDeltaState.set(props.maxDelta);\n\tdprState.set(props.dpr);\n\trequestFrame();\n\n\tconst canvas = canvasRef.value;\n\tif (!canvas) {\n\t\tconst report = toMotionGPUErrorReport(\n\t\t\tnew Error('Canvas element is not available'),\n\t\t\t'initialization'\n\t\t);\n\t\terrorReport.value = report;\n\t\tconst historyLimit = getNormalizedErrorHistoryLimit(props.errorHistoryLimit);\n\t\tif (historyLimit > 0) {\n\t\t\tconst nextHistory = [report].slice(-historyLimit);\n\t\t\terrorHistory.value = nextHistory;\n\t\t\tprops.onErrorHistory?.(nextHistory);\n\t\t}\n\t\tprops.onError?.(report);\n\t\treturn;\n\t}\n\n\tconst runtimeLoop = createMotionGPURuntimeLoop({\n\t\tcanvas,\n\t\tregistry,\n\t\tsize,\n\t\tdpr: dprState,\n\t\tmaxDelta: maxDeltaState,\n\t\tgetMaterial: () => props.material,\n\t\tgetRenderTargets: () => props.renderTargets,\n\t\tgetPasses: () => props.passes,\n\t\tgetClearColor: () => props.clearColor,\n\t\tgetOutputColorSpace: () => props.outputColorSpace,\n\t\tgetAdapterOptions: () => props.adapterOptions,\n\t\tgetDeviceDescriptor: () => props.deviceDescriptor,\n\t\tgetOnError: () => props.onError,\n\t\tgetErrorHistoryLimit: () => props.errorHistoryLimit,\n\t\tgetOnErrorHistory: () => props.onErrorHistory,\n\t\treportErrorHistory: (history) => {\n\t\t\terrorHistory.value = history;\n\t\t},\n\t\treportError: (report) => {\n\t\t\terrorReport.value = report;\n\t\t}\n\t});\n\truntimeLoopHandle = runtimeLoop;\n\trequestFrameSignal = runtimeLoop.requestFrame;\n});\n\nonBeforeUnmount(() => {\n\trequestFrameSignal = null;\n\truntimeLoopHandle?.destroy();\n\truntimeLoopHandle = null;\n\tregistry.clear();\n});\n</script>\n\n<template>\n\t<div class=\"motiongpu-canvas-wrap\" :style=\"wrapperStyle\">\n\t\t<canvas ref=\"canvasEl\" :class=\"canvasClass\" :style=\"resolvedCanvasStyle\"></canvas>\n\t\t<template v-if=\"showErrorOverlay && errorReport\">\n\t\t\t<slot name=\"errorRenderer\" :report=\"errorReport\">\n\t\t\t\t<MotionGPUErrorOverlay :report=\"errorReport\" />\n\t\t\t</slot>\n\t\t</template>\n\t\t<slot />\n\t</div>\n</template>\n\n<style>\n.motiongpu-canvas-wrap {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n}\n\n.motiongpu-canvas-wrap > canvas {\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n}\n</style>\n"],"mappings":""}

package/dist/vue/FragCanvas.vue.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="@webgpu/types" />
+import type { MotionGPUErrorReport } from '../core/error-report.js';
+import type { FragMaterial } from '../core/material.js';
+import type { AnyPass, OutputColorSpace, RenderMode, RenderTargetDefinitionMap } from '../core/types.js';
+export interface FragCanvasProps {
+    material: FragMaterial;
+    renderTargets?: RenderTargetDefinitionMap;
+    passes?: AnyPass[];
+    clearColor?: [number, number, number, number];
+    outputColorSpace?: OutputColorSpace;
+    renderMode?: RenderMode;
+    autoRender?: boolean;
+    maxDelta?: number;
+    adapterOptions?: GPURequestAdapterOptions;
+    deviceDescriptor?: GPUDeviceDescriptor;
+    dpr?: number;
+    showErrorOverlay?: boolean;
+    onError?: (report: MotionGPUErrorReport) => void;
+    errorHistoryLimit?: number;
+    onErrorHistory?: (history: MotionGPUErrorReport[]) => void;
+    canvasClass?: string;
+    canvasStyle?: string | Record<string, string | number>;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FragCanvasProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FragCanvasProps> & Readonly<{}>, {
+    clearColor: [number, number, number, number];
+    renderMode: RenderMode;
+    renderTargets: RenderTargetDefinitionMap;
+    passes: AnyPass[];
+    outputColorSpace: OutputColorSpace;
+    autoRender: boolean;
+    maxDelta: number;
+    dpr: number;
+    showErrorOverlay: boolean;
+    errorHistoryLimit: number;
+    canvasClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default(): unknown;
+    errorRenderer(props: {
+        report: MotionGPUErrorReport;
+    }): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=FragCanvas.vue.d.ts.map

package/dist/vue/FragCanvas.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FragCanvas.vue.d.ts","sourceRoot":"","sources":["../../src/lib/vue/FragCanvas.vue"],"names":[],"mappings":";AAmTA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EACX,OAAO,EACP,gBAAgB,EAChB,UAAU,EACV,yBAAyB,EACzB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC/B,QAAQ,EAAE,YAAY,CAAC;IACvB,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,EAAE,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CACvD;wBAGoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;gBAlBJ,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;gBAEhC,UAAU;mBAJP,yBAAyB;YAChC,OAAO,EAAE;sBAEC,gBAAgB;gBAEtB,OAAO;cACT,MAAM;SAGX,MAAM;sBACO,OAAO;uBAEN,MAAM;iBAEZ,MAAM;;eA0CT,OAAO;yBACG;QAAE,MAAM,EAAE,oBAAoB,CAAA;KAAE,GAAG,OAAO;EA8P5D,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/vue/FragCanvas.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,228 @@
+import { toMotionGPUErrorReport } from "../core/error-report.js";
+import { createCurrentWritable } from "../core/current-value.js";
+import { createFrameRegistry } from "../core/frame-registry.js";
+import { createMotionGPURuntimeLoop } from "../core/runtime-loop.js";
+import { provideFrameRegistry } from "./frame-context.js";
+import { provideMotionGPUContext } from "./motiongpu-context.js";
+import MotionGPUErrorOverlay_default from "./MotionGPUErrorOverlay.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderSlot, shallowRef, unref, useTemplateRef, watch } from "vue";
+//#region src/lib/vue/FragCanvas.vue?vue&type=script&setup=true&lang.ts
+var initialDpr = typeof window === "undefined" ? 1 : window.devicePixelRatio ?? 1;
+var FragCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "FragCanvas",
+	props: {
+		material: {},
+		renderTargets: { default: () => ({}) },
+		passes: { default: () => [] },
+		clearColor: { default: () => [
+			0,
+			0,
+			0,
+			1
+		] },
+		outputColorSpace: { default: "srgb" },
+		renderMode: { default: "always" },
+		autoRender: {
+			type: Boolean,
+			default: true
+		},
+		maxDelta: { default: .1 },
+		adapterOptions: {},
+		deviceDescriptor: {},
+		dpr: { default: () => initialDpr },
+		showErrorOverlay: {
+			type: Boolean,
+			default: true
+		},
+		onError: {},
+		errorHistoryLimit: { default: 0 },
+		onErrorHistory: {},
+		canvasClass: { default: "" },
+		canvasStyle: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const wrapperStyle = Object.freeze({
+			position: "relative",
+			width: "100%",
+			height: "100%",
+			minWidth: "0",
+			minHeight: "0",
+			overflow: "hidden"
+		});
+		const baseCanvasStyle = Object.freeze({
+			position: "absolute",
+			inset: "0",
+			display: "block",
+			width: "100%",
+			height: "100%"
+		});
+		const resolvedCanvasStyle = computed(() => [baseCanvasStyle, props.canvasStyle]);
+		const canvasRef = useTemplateRef("canvasEl");
+		const errorReport = shallowRef(null);
+		const errorHistory = shallowRef([]);
+		const registry = createFrameRegistry({ maxDelta: .1 });
+		provideFrameRegistry(registry);
+		let requestFrameSignal = null;
+		let runtimeLoopHandle = null;
+		const requestFrame = () => {
+			requestFrameSignal?.();
+		};
+		const invalidateFrame = () => {
+			registry.invalidate();
+			requestFrame();
+		};
+		const advanceFrame = () => {
+			registry.advance();
+			requestFrame();
+		};
+		const size = createCurrentWritable({
+			width: 0,
+			height: 0
+		});
+		const dprState = createCurrentWritable(initialDpr, requestFrame);
+		const maxDeltaState = createCurrentWritable(.1, (value) => {
+			registry.setMaxDelta(value);
+			requestFrame();
+		});
+		const renderModeState = createCurrentWritable("always", (value) => {
+			registry.setRenderMode(value);
+			requestFrame();
+		});
+		const autoRenderState = createCurrentWritable(true, (value) => {
+			registry.setAutoRender(value);
+			requestFrame();
+		});
+		provideMotionGPUContext({
+			get canvas() {
+				return canvasRef.value ?? void 0;
+			},
+			size,
+			dpr: dprState,
+			maxDelta: maxDeltaState,
+			renderMode: renderModeState,
+			autoRender: autoRenderState,
+			user: createCurrentWritable({}),
+			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
+			}
+		});
+		/**
+		* Normalizes the user-supplied error history limit to a non-negative integer.
+		*/
+		function getNormalizedErrorHistoryLimit(value) {
+			if (!Number.isFinite(value) || value <= 0) return 0;
+			return Math.floor(value);
+		}
+		watch(() => props.renderMode, (value) => {
+			renderModeState.set(value);
+		});
+		watch(() => props.autoRender, (value) => {
+			autoRenderState.set(value);
+		});
+		watch(() => props.maxDelta, (value) => {
+			maxDeltaState.set(value);
+		});
+		watch(() => props.dpr, (value) => {
+			dprState.set(value);
+		});
+		watch([() => errorHistory.value, () => props.errorHistoryLimit], ([history, rawLimit]) => {
+			const limit = getNormalizedErrorHistoryLimit(rawLimit);
+			if (limit <= 0) {
+				if (history.length === 0) return;
+				errorHistory.value = [];
+				props.onErrorHistory?.([]);
+				return;
+			}
+			if (history.length <= limit) return;
+			const trimmed = history.slice(history.length - limit);
+			errorHistory.value = trimmed;
+			props.onErrorHistory?.(trimmed);
+		});
+		onMounted(() => {
+			renderModeState.set(props.renderMode);
+			autoRenderState.set(props.autoRender);
+			maxDeltaState.set(props.maxDelta);
+			dprState.set(props.dpr);
+			requestFrame();
+			const canvas = canvasRef.value;
+			if (!canvas) {
+				const report = toMotionGPUErrorReport(/* @__PURE__ */ new Error("Canvas element is not available"), "initialization");
+				errorReport.value = report;
+				const historyLimit = getNormalizedErrorHistoryLimit(props.errorHistoryLimit);
+				if (historyLimit > 0) {
+					const nextHistory = [report].slice(-historyLimit);
+					errorHistory.value = nextHistory;
+					props.onErrorHistory?.(nextHistory);
+				}
+				props.onError?.(report);
+				return;
+			}
+			const runtimeLoop = createMotionGPURuntimeLoop({
+				canvas,
+				registry,
+				size,
+				dpr: dprState,
+				maxDelta: maxDeltaState,
+				getMaterial: () => props.material,
+				getRenderTargets: () => props.renderTargets,
+				getPasses: () => props.passes,
+				getClearColor: () => props.clearColor,
+				getOutputColorSpace: () => props.outputColorSpace,
+				getAdapterOptions: () => props.adapterOptions,
+				getDeviceDescriptor: () => props.deviceDescriptor,
+				getOnError: () => props.onError,
+				getErrorHistoryLimit: () => props.errorHistoryLimit,
+				getOnErrorHistory: () => props.onErrorHistory,
+				reportErrorHistory: (history) => {
+					errorHistory.value = history;
+				},
+				reportError: (report) => {
+					errorReport.value = report;
+				}
+			});
+			runtimeLoopHandle = runtimeLoop;
+			requestFrameSignal = runtimeLoop.requestFrame;
+		});
+		onBeforeUnmount(() => {
+			requestFrameSignal = null;
+			runtimeLoopHandle?.destroy();
+			runtimeLoopHandle = null;
+			registry.clear();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "motiongpu-canvas-wrap",
+				style: normalizeStyle(unref(wrapperStyle))
+			}, [
+				createElementVNode("canvas", {
+					ref: "canvasEl",
+					class: normalizeClass(__props.canvasClass),
+					style: normalizeStyle(resolvedCanvasStyle.value)
+				}, null, 6),
+				__props.showErrorOverlay && errorReport.value ? renderSlot(_ctx.$slots, "errorRenderer", {
+					key: 0,
+					report: errorReport.value
+				}, () => [createVNode(MotionGPUErrorOverlay_default, { report: errorReport.value }, null, 8, ["report"])]) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "default")
+			], 4);
+		};
+	}
+});
+//#endregion
+export { FragCanvas_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=FragCanvas.vue_vue_type_script_setup_true_lang.js.map