phase 0.0.6 → 0.0.7

package/dist/react.js

@@ -1,6 +1,6 @@
 "use client";
 import { clamp01, easeOutCubic } from "./ease.js";
-import { _ as invalidDurationError, a as whenIdle, c as createRenderState, d as createLifecycle, f as readMediaQuery, i as prefersReducedMotion, l as createScrollProgress, m as createSight, n as createMutation, o as readDpr, p as subscribeMediaQuery, r as REDUCED_MOTION_QUERY, s as subscribeDpr, t as createPointer, u as createLoop, y as missingContextError } from "./pointer-D5F7_Jjs.js";
+import { a as REDUCED_MOTION_QUERY, c as readDpr, d as createScrollProgress, f as createLoop, g as createSight, h as subscribeMediaQuery, i as createMutation, l as subscribeDpr, m as readMediaQuery, n as observeResize, o as prefersReducedMotion, p as createLifecycle, r as createPointer, s as whenIdle, t as createScroll, u as createRenderState, x as missingContextError, y as invalidDurationError } from "./scroll-DZvWyPQE.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
@@ -53,7 +53,7 @@ function degradedConfig(degraded, degradedFps) {
 }
 //#endregion
 //#region src/react/use-loop/index.ts
-const INITIAL_STATE$5 = {
+const INITIAL_STATE$6 = {
 	phase: "idle",
 	phaseReason: "initial",
 	quality: "full",
@@ -75,12 +75,12 @@ function useLoop(options) {
 	const onTickRef = useSyncedRef(options.onTick);
 	const internalRef = useRef(null);
 	const ref = options.ref ?? internalRef;
-	const [state, setState] = useState(INITIAL_STATE$5);
+	const [state, setState] = useState(INITIAL_STATE$6);
 	const loopRef = useRef(null);
 	useEffect(() => {
 		const element = ref.current;
 		if (!element || !enabled) {
-			setState(INITIAL_STATE$5);
+			setState(INITIAL_STATE$6);
 			return;
 		}
 		const loop = createLoop({
@@ -119,7 +119,7 @@ function useLoop(options) {
 }
 //#endregion
 //#region src/react/use-lifecycle/index.ts
-const INITIAL_STATE$4 = {
+const INITIAL_STATE$5 = {
 	phase: "idle",
 	phaseReason: "initial"
 };
@@ -148,12 +148,12 @@ function useLifecycle(options) {
 	const onPhaseChangeRef = useSyncedRef(options?.onPhaseChange);
 	const internalRef = useRef(null);
 	const ref = options?.ref ?? internalRef;
-	const [state, setState] = useState(INITIAL_STATE$4);
+	const [state, setState] = useState(INITIAL_STATE$5);
 	const lifecycleRef = useRef(null);
 	useEffect(() => {
 		const element = ref.current;
 		if (!element || !enabled) {
-			setState(INITIAL_STATE$4);
+			setState(INITIAL_STATE$5);
 			return;
 		}
 		const lifecycle = createLifecycle({
@@ -235,12 +235,12 @@ function usePrefersReducedMotion() {
 }
 //#endregion
 //#region src/react/use-sight/index.ts
-const INITIAL_STATE$3 = {
+const INITIAL_STATE$4 = {
 	phase: "unknown",
 	phaseReason: "initial"
 };
 function useSight(options) {
-	const [state, setState] = useState(INITIAL_STATE$3);
+	const [state, setState] = useState(INITIAL_STATE$4);
 	const observe = options?.observe ?? "continuous";
 	const phaseRef = useRef("unknown");
 	const phaseReasonRef = useRef("initial");
@@ -283,40 +283,6 @@ function useSight(options) {
 	};
 }
 //#endregion
-//#region src/core/_internal/pool/ro-pool.ts
-let observer = null;
-const callbacks = /* @__PURE__ */ new Map();
-/**
-* Observe an element via a singleton ResizeObserver.
-* One RO instance for the entire page. Per-element `box` options are
-* forwarded to `ResizeObserver.observe()`.
-*
-* @returns Cleanup function that unobserves the element.
-*/
-function observeResize(element, callback, box) {
-	callbacks.set(element, callback);
-	getObserver().observe(element, box ? { box } : void 0);
-	let disposed = false;
-	return () => {
-		if (disposed) return;
-		disposed = true;
-		if (callbacks.get(element) === callback) {
-			callbacks.delete(element);
-			observer?.unobserve(element);
-		}
-	};
-}
-/** Lazy-created singleton. RO takes zero constructor options, so one instance can observe everything. */
-function getObserver() {
-	if (!observer) observer = new ResizeObserver((entries) => {
-		for (const entry of entries) {
-			const cb = callbacks.get(entry.target);
-			if (cb) cb(entry);
-		}
-	});
-	return observer;
-}
-//#endregion
 //#region src/react/use-size/index.ts
 function useSize(options) {
 	const [size, setSize] = useState(null);
@@ -512,7 +478,7 @@ function useWhenIdle(callback, options) {
 }
 //#endregion
 //#region src/react/use-canvas/index.ts
-const INITIAL_STATE$2 = {
+const INITIAL_STATE$3 = {
 	phase: "idle",
 	phaseReason: "initial",
 	quality: "full",
@@ -535,7 +501,7 @@ const INITIAL_STATE$2 = {
 function useCanvas(options) {
 	const { containerRef, canvasRef, fps, enabled = true, reducedMotion, degraded, degradedFps } = options;
 	const drawRef = useSyncedRef(options.draw);
-	const [state, setState] = useState(INITIAL_STATE$2);
+	const [state, setState] = useState(INITIAL_STATE$3);
 	const [restartNonce, setRestartNonce] = useState(0);
 	const ctxRef = useRef(null);
 	const sizeRef = useRef({
@@ -647,7 +613,7 @@ function useCanvas(options) {
 }
 //#endregion
 //#region src/react/use-mutation/index.ts
-const INITIAL_STATE$1 = {
+const INITIAL_STATE$2 = {
 	phase: "paused",
 	phaseReason: "initial"
 };
@@ -662,7 +628,7 @@ const INITIAL_STATE$1 = {
 * reactions, use the core `createMutation` primitive.
 */
 function useMutation(options) {
-	const [state, setState] = useState(INITIAL_STATE$1);
+	const [state, setState] = useState(INITIAL_STATE$2);
 	const { mutation: mutationInit, visibility = "pause", enabled = true, intersectionOptions } = options;
 	const phaseRef = useRef("paused");
 	const phaseReasonRef = useRef("initial");
@@ -672,7 +638,7 @@ function useMutation(options) {
 	useEffect(() => {
 		const element = ref.current;
 		if (!element || !enabled) {
-			setState(INITIAL_STATE$1);
+			setState(INITIAL_STATE$2);
 			phaseRef.current = "paused";
 			phaseReasonRef.current = "initial";
 			return;
@@ -703,7 +669,7 @@ function useMutation(options) {
 }
 //#endregion
 //#region src/react/use-pointer/index.ts
-const INITIAL_STATE = {
+const INITIAL_STATE$1 = {
 	phase: "idle",
 	phaseReason: "initial"
 };
@@ -719,7 +685,7 @@ const INITIAL_STATE = {
 * `createPointer` primitive.
 */
 function usePointer(options) {
-	const [state, setState] = useState(INITIAL_STATE);
+	const [state, setState] = useState(INITIAL_STATE$1);
 	const { visibility = "pause", enabled = true, intersectionOptions } = options;
 	const phaseRef = useRef("idle");
 	const phaseReasonRef = useRef("initial");
@@ -734,7 +700,7 @@ function usePointer(options) {
 	useEffect(() => {
 		const element = ref.current;
 		if (!element || !enabled) {
-			setState(INITIAL_STATE);
+			setState(INITIAL_STATE$1);
 			phaseRef.current = "idle";
 			phaseReasonRef.current = "initial";
 			stateRef.current = {
@@ -772,6 +738,89 @@ function usePointer(options) {
 	};
 }
 //#endregion
+//#region src/react/use-scroll/index.ts
+const INITIAL_STATE = {
+	phase: "paused",
+	phaseReason: "initial"
+};
+function initialState() {
+	return {
+		x: 0,
+		y: 0,
+		maxX: 0,
+		maxY: 0,
+		progressX: 0,
+		progressY: 0,
+		visibleX: 1,
+		visibleY: 1
+	};
+}
+/**
+* Lifecycle-aware scroll tracker. Scroll position is delivered imperatively via
+* `onScroll` (never state) and mirrored in `stateRef` for on-demand reads; only
+* the phase (tracking/paused) is reactive, since it flips rarely. This mirrors
+* `usePointer`. Auto-pauses off-screen and tears down on unmount.
+*
+* Reads `scrollLeft`/`scrollTop` once per rAF frame; the reflow-heavy geometry
+* (`scrollWidth`/`clientWidth`) is read only on resize or via `measure()`, never
+* on the scroll path. Call `measure()` after mutating scrollable content.
+*/
+function useScroll(options) {
+	const [state, setState] = useState(INITIAL_STATE);
+	const { visibility = "pause", enabled = true, intersectionOptions } = options;
+	const phaseRef = useRef("paused");
+	const phaseReasonRef = useRef("initial");
+	const stateRef = useRef(initialState());
+	const onScrollRef = useSyncedRef(options.onScroll);
+	const instanceRef = useRef(null);
+	const internalRef = useRef(null);
+	const ref = options.ref ?? internalRef;
+	const measure = useCallback(() => {
+		instanceRef.current?.measure();
+	}, []);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element || !enabled) {
+			instanceRef.current = null;
+			setState(INITIAL_STATE);
+			phaseRef.current = "paused";
+			phaseReasonRef.current = "initial";
+			stateRef.current = initialState();
+			return;
+		}
+		const instance = createScroll({
+			element,
+			onScroll: (scrollState) => {
+				stateRef.current = scrollState;
+				onScrollRef.current(scrollState);
+			},
+			onPhaseChange: (phase, reason) => {
+				phaseRef.current = phase;
+				phaseReasonRef.current = reason;
+				setState({
+					phase,
+					phaseReason: reason
+				});
+			},
+			visibility,
+			intersectionOptions
+		});
+		instanceRef.current = instance;
+		return () => {
+			instance.stop();
+			instanceRef.current = null;
+		};
+	}, [enabled, visibility]);
+	return {
+		ref,
+		...state,
+		phaseRef,
+		phaseReasonRef,
+		stateRef,
+		measure
+	};
+}
+//#endregion
 //#region src/react/use-tween/index.ts
 /**
 * Animate a value from its current position to `target` over `duration`.
@@ -1171,6 +1220,6 @@ function SwapState({ id, ref: forwardedRef, children, ...divProps }) {
 }
 const Swap = Object.assign(SwapRoot, { State: SwapState });
 //#endregion
-export { Defer, Presence, Swap, WhenIdle, WhenVisible, useCanvas, useContainerQuery, useDevicePixelRatio, useIdle, useLifecycle, useLoop, useMediaQuery, useMutation, usePointer, usePrefersReducedMotion, usePresence, useRenderState, useScrollProgress, useSight, useSize, useStableCallback, useSyncedRef, useTween, useWhenIdle };
+export { Defer, Presence, Swap, WhenIdle, WhenVisible, useCanvas, useContainerQuery, useDevicePixelRatio, useIdle, useLifecycle, useLoop, useMediaQuery, useMutation, usePointer, usePrefersReducedMotion, usePresence, useRenderState, useScroll, useScrollProgress, useSight, useSize, useStableCallback, useSyncedRef, useTween, useWhenIdle };
 
 //# sourceMappingURL=react.js.map