phase 0.1.0 → 0.3.0

package/dist/react.js

@@ -1,6 +1,6 @@
 "use client";
 import { clamp01, easeOutCubic } from "./ease.js";
-import { C as missingContextError, _ as subscribeMediaQuery, a as createPointer, c as prefersReducedMotion, d as subscribeDpr, f as createRenderState, g as readMediaQuery, h as createLifecycle, i as observeResize, l as whenIdle, m as createLoop, n as createThrottle, o as createMutation, p as createScrollProgress, r as createScroll, s as REDUCED_MOTION_QUERY, t as createDebounce, u as readDpr, v as createSight, x as invalidDurationError } from "./debounce-BX3NrBak.js";
+import { S as invalidDurationError, _ as subscribeMediaQuery, a as createPointer, c as prefersReducedMotion, d as subscribeDpr, f as createRenderState, g as readMediaQuery, h as createLifecycle, i as observeResize, l as whenIdle, m as createLoop, n as createThrottle, o as createMutation, p as createScrollProgress, r as createScroll, s as REDUCED_MOTION_QUERY, t as createDebounce, u as readDpr, v as createSight, w as missingContextError, x as conflictingTargetError } from "./debounce-BA-WszUy.js";
 import { createContext, createElement, use, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/use-synced-ref/index.ts
@@ -71,20 +71,21 @@ const INITIAL_STATE$6 = {
 * return <div ref={ref} />;
 */
 function useLoop(options) {
-	const { fps, enabled = true, reducedMotion, degraded, degradedFps, intersectionOptions } = options;
+	const { target, fps, enabled = true, reducedMotion, degraded, degradedFps, intersectionOptions } = options;
 	const onTickRef = useSyncedRef(options.onTick);
 	const internalRef = useRef(null);
 	const ref = options.ref ?? internalRef;
 	const [state, setState] = useState(INITIAL_STATE$6);
 	const loopRef = useRef(null);
 	useEffect(() => {
-		const element = ref.current;
-		if (!element || !enabled) {
+		if (target && options.ref) conflictingTargetError("useLoop");
+		const anchor = target === "page" ? document : ref.current;
+		if (!anchor || !enabled) {
 			setState(INITIAL_STATE$6);
 			return;
 		}
 		const loop = createLoop({
-			target: element,
+			target: anchor,
 			onTick: (frame) => onTickRef.current(frame),
 			fps,
 			reducedMotion,
@@ -110,7 +111,8 @@ function useLoop(options) {
 		fps,
 		reducedMotion,
 		degraded,
-		degradedFps
+		degradedFps,
+		target
 	]);
 	return {
 		ref,
@@ -143,7 +145,7 @@ const INITIAL_STATE$5 = {
 * return <canvas ref={ref} />;
 */
 function useLifecycle(options) {
-	const { reducedMotion, intersectionOptions, enabled = true } = options ?? {};
+	const { target, reducedMotion, intersectionOptions, enabled = true } = options ?? {};
 	const paused = options?.paused ?? false;
 	const onPhaseChangeRef = useSyncedRef(options?.onPhaseChange);
 	const internalRef = useRef(null);
@@ -151,13 +153,14 @@ function useLifecycle(options) {
 	const [state, setState] = useState(INITIAL_STATE$5);
 	const lifecycleRef = useRef(null);
 	useEffect(() => {
-		const element = ref.current;
-		if (!element || !enabled) {
+		if (target && options?.ref) conflictingTargetError("useLifecycle");
+		const anchor = target === "page" ? document : ref.current;
+		if (!anchor || !enabled) {
 			setState(INITIAL_STATE$5);
 			return;
 		}
 		const lifecycle = createLifecycle({
-			target: element,
+			target: anchor,
 			reducedMotion,
 			intersectionOptions,
 			onPhaseChange: (phase, phaseReason) => {
@@ -174,7 +177,11 @@ function useLifecycle(options) {
 			lifecycle.stop();
 			lifecycleRef.current = null;
 		};
-	}, [enabled, reducedMotion]);
+	}, [
+		enabled,
+		reducedMotion,
+		target
+	]);
 	useEffect(() => {
 		const lifecycle = lifecycleRef.current;
 		if (!lifecycle) return;
@@ -245,14 +252,17 @@ function useSight(options) {
 	const phaseRef = useRef("unknown");
 	const phaseReasonRef = useRef("initial");
 	const onVisibilityChangeRef = useSyncedRef(options?.onVisibilityChange);
+	const target = options?.target;
 	const internalRef = useRef(null);
 	const ref = options?.ref ?? internalRef;
 	useEffect(() => {
-		const element = ref.current;
-		if (!element) return;
+		if (target && options?.ref) conflictingTargetError("useSight");
+		const anchor = target === "page" ? document : ref.current;
+		if (!anchor) return;
 		let frozen = false;
+		let instance = null;
 		const sight = createSight({
-			target: element,
+			target: anchor,
 			intersectionOptions: {
 				root: options?.root,
 				rootMargin: options?.rootMargin,
@@ -269,12 +279,14 @@ function useSight(options) {
 				});
 				if (observe === "once" && phase === "visible") {
 					frozen = true;
-					sight.stop();
+					instance?.stop();
 				}
 			}
 		});
+		instance = sight;
+		if (frozen) sight.stop();
 		return () => sight.stop();
-	}, [observe]);
+	}, [observe, target]);
 	return {
 		ref,
 		...state,
@@ -767,7 +779,7 @@ function initialState() {
 */
 function useScroll(options) {
 	const [state, setState] = useState(INITIAL_STATE);
-	const { visibility = "pause", enabled = true, intersectionOptions } = options;
+	const { target, visibility = "pause", enabled = true, intersectionOptions } = options;
 	const phaseRef = useRef("paused");
 	const phaseReasonRef = useRef("initial");
 	const stateRef = useRef(initialState());
@@ -779,8 +791,9 @@ function useScroll(options) {
 		instanceRef.current?.measure();
 	}, []);
 	useEffect(() => {
-		const element = ref.current;
-		if (!element || !enabled) {
+		if (target && options.ref) conflictingTargetError("useScroll");
+		const anchor = target === "page" ? document : ref.current;
+		if (!anchor || !enabled) {
 			instanceRef.current = null;
 			setState(INITIAL_STATE);
 			phaseRef.current = "paused";
@@ -789,7 +802,7 @@ function useScroll(options) {
 			return;
 		}
 		const instance = createScroll({
-			target: element,
+			target: anchor,
 			onScroll: (scrollState) => {
 				stateRef.current = scrollState;
 				onScrollRef.current(scrollState);
@@ -810,7 +823,11 @@ function useScroll(options) {
 			instance.stop();
 			instanceRef.current = null;
 		};
-	}, [enabled, visibility]);
+	}, [
+		enabled,
+		visibility,
+		target
+	]);
 	return {
 		ref,
 		...state,