phase 0.0.1-alpha.1 → 0.0.1

package/dist/react.js

@@ -0,0 +1,1079 @@
+"use client";
+import { clamp01, easeOutCubic } from "./ease.js";
+import { _ as missingContextError, a as subscribeDpr, c as createLoop, d as subscribeMediaQuery, f as createSight, h as invalidDurationError, i as readDpr, l as createLifecycle, n as prefersReducedMotion, o as createRenderState, r as whenIdle, s as createScrollProgress, t as REDUCED_MOTION_QUERY, u as readMediaQuery } from "./reduced-motion-CEJtegNG.js";
+import { createContext, use, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/use-synced-ref/index.ts
+/**
+* Ref whose `.current` is always the latest value, updated synchronously on
+* every render. Readable from any callback or effect without triggering re-render.
+*
+* @example
+* const propsRef = useSyncedRef(props);
+* useEffect(() => {
+*   // propsRef.current is always fresh
+* }, []);
+*/
+function useSyncedRef(value) {
+	"use no memo";
+	const ref = useRef(value);
+	ref.current = value;
+	return ref;
+}
+//#endregion
+//#region src/react/use-stable-callback/index.ts
+/**
+* Returns a function with **stable identity** that always calls the latest
+* version of `callback`. Safe in deps arrays and as a prop to `memo()`'d children.
+*
+* @example
+* const handleClick = useStableCallback((e: MouseEvent) => {
+*   console.log(latestValue); // always fresh
+* });
+*/
+function useStableCallback(callback) {
+	"use no memo";
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	return useCallback((...args) => callbackRef.current(...args), []);
+}
+//#endregion
+//#region src/react/_internal/degraded-config/index.ts
+/**
+* Map flat `degraded` / `degradedFps` hook options onto the loop's discriminated
+* union. `degradedFps` is only meaningful in `'throttle'` mode.
+*/
+function degradedConfig(degraded, degradedFps) {
+	if (degraded === "pause") return { degraded: "pause" };
+	if (degraded === "ignore") return { degraded: "ignore" };
+	return {
+		degraded: "throttle",
+		degradedFps
+	};
+}
+//#endregion
+//#region src/react/use-loop/index.ts
+const INITIAL_STATE$3 = {
+	phase: "idle",
+	phaseReason: "initial",
+	quality: "full",
+	qualityReason: void 0
+};
+/**
+* Ref-based animation loop that never triggers re-renders from the frame loop.
+*
+* @example
+* const { ref, phase } = useLoop({
+*   onTick: (frame) => {
+*     ref.current.style.transform = `translateX(${frame.elapsed * 0.1}px)`;
+*   },
+* });
+* return <div ref={ref} />;
+*/
+function useLoop(options) {
+	const { 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$3);
+	const loopRef = useRef(null);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element || !enabled) {
+			setState(INITIAL_STATE$3);
+			return;
+		}
+		const loop = createLoop({
+			element,
+			onTick: (frame) => onTickRef.current(frame),
+			fps,
+			reducedMotion,
+			intersectionOptions,
+			...degradedConfig(degraded, degradedFps),
+			onPhaseChange: (phase, reason) => {
+				const current = loopRef.current;
+				setState({
+					phase,
+					phaseReason: reason,
+					quality: current?.quality ?? "full",
+					qualityReason: current?.qualityReason
+				});
+			}
+		});
+		loopRef.current = loop;
+		return () => {
+			loop.stop();
+			loopRef.current = null;
+		};
+	}, [
+		enabled,
+		fps,
+		reducedMotion,
+		degraded,
+		degradedFps
+	]);
+	return {
+		ref,
+		...state
+	};
+}
+//#endregion
+//#region src/react/use-lifecycle/index.ts
+const INITIAL_STATE$2 = {
+	phase: "idle",
+	phaseReason: "initial"
+};
+/**
+* React binding for `createLifecycle`. The activation signal for loops you own.
+*
+* Returns `active` / `paused` so a consumer-owned render loop (WebGL, three.js, a
+* Web Worker) can pause when off-screen or under reduced motion. When `phase`
+* should drive the loop for you, use `useLoop` or `useCanvas` instead.
+*
+* @example
+* const { ref, isActive } = useLifecycle();
+* useEffect(() => {
+*   if (!isActive) return;
+*   const id = requestAnimationFrame(function render() {
+*     renderer.render();
+*     requestAnimationFrame(render);
+*   });
+*   return () => cancelAnimationFrame(id);
+* }, [isActive]);
+* return <canvas ref={ref} />;
+*/
+function useLifecycle(options) {
+	const { reducedMotion, intersectionOptions, enabled = true } = options ?? {};
+	const paused = options?.paused ?? false;
+	const onPhaseChangeRef = useSyncedRef(options?.onPhaseChange);
+	const internalRef = useRef(null);
+	const ref = options?.ref ?? internalRef;
+	const [state, setState] = useState(INITIAL_STATE$2);
+	const lifecycleRef = useRef(null);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element || !enabled) {
+			setState(INITIAL_STATE$2);
+			return;
+		}
+		const lifecycle = createLifecycle({
+			element,
+			reducedMotion,
+			intersectionOptions,
+			onPhaseChange: (phase, phaseReason) => {
+				onPhaseChangeRef.current?.(phase, phaseReason);
+				setState({
+					phase,
+					phaseReason
+				});
+			}
+		});
+		lifecycleRef.current = lifecycle;
+		if (paused) lifecycle.pause();
+		return () => {
+			lifecycle.stop();
+			lifecycleRef.current = null;
+		};
+	}, [enabled, reducedMotion]);
+	useEffect(() => {
+		const lifecycle = lifecycleRef.current;
+		if (!lifecycle) return;
+		if (paused) lifecycle.pause();
+		else lifecycle.resume();
+	}, [paused]);
+	return {
+		ref,
+		...state,
+		isActive: state.phase === "active"
+	};
+}
+//#endregion
+//#region src/react/use-device-pixel-ratio/index.ts
+/**
+* Reactive devicePixelRatio that updates when the user moves the window
+* between monitors with different DPR values.
+*
+* Returns `1` during SSR and initial hydration, then the live value.
+*/
+function useDevicePixelRatio() {
+	const [dpr, setDpr] = useState(1);
+	useEffect(() => {
+		setDpr(readDpr());
+		return subscribeDpr(setDpr);
+	}, []);
+	return dpr;
+}
+//#endregion
+//#region src/react/use-media/index.ts
+/**
+* Subscribe to a media query via the shared MQL pool.
+*
+* Returns `false` during SSR and initial hydration render,
+* then the live value from the first `useEffect`.
+*
+* @example
+* const isNarrow = useMediaQuery('(max-width: 600px)');
+*/
+function useMediaQuery(query) {
+	const [matches, setMatches] = useState(false);
+	useEffect(() => {
+		setMatches(readMediaQuery(query));
+		return subscribeMediaQuery(query, setMatches);
+	}, [query]);
+	return matches;
+}
+//#endregion
+//#region src/react/use-reduced-motion/index.ts
+/**
+* Reactive boolean that tracks the user's `prefers-reduced-motion` OS setting.
+*
+* Returns `false` during SSR and initial hydration, then the live value.
+* Re-renders only when the preference changes.
+*/
+function usePrefersReducedMotion() {
+	return useMediaQuery(REDUCED_MOTION_QUERY);
+}
+//#endregion
+//#region src/react/use-sight/index.ts
+const INITIAL_STATE$1 = {
+	phase: "unknown",
+	phaseReason: "initial"
+};
+/**
+* Intersection + document visibility as a phase.
+*
+* Returns `'unknown'` during SSR and before first observation.
+* `observe: 'once'` freezes at `'visible'` after first intersection and unobserves.
+*
+* @example
+* const { ref, phase } = useSight();
+* if (phase === 'visible') startAnimation();
+* return <div ref={ref} />;
+*/
+function useSight(options) {
+	const [state, setState] = useState(INITIAL_STATE$1);
+	const observe = options?.observe ?? "continuous";
+	const internalRef = useRef(null);
+	const ref = options?.ref ?? internalRef;
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		let frozen = false;
+		const sight = createSight({
+			element,
+			intersectionOptions: {
+				root: options?.root,
+				rootMargin: options?.rootMargin,
+				threshold: options?.threshold
+			},
+			onPhaseChange: (phase, reason) => {
+				if (frozen) return;
+				setState({
+					phase,
+					phaseReason: reason
+				});
+				if (observe === "once" && phase === "visible") {
+					frozen = true;
+					sight.stop();
+				}
+			}
+		});
+		return () => sight.stop();
+	}, [observe]);
+	return {
+		ref,
+		...state
+	};
+}
+//#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. RO takes zero constructor options.
+*
+* @returns Cleanup function that unobserves the element.
+*/
+function observeResize(element, callback) {
+	callbacks.set(element, callback);
+	getObserver().observe(element);
+	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
+/**
+* Element dimensions via the shared ResizeObserver singleton.
+*
+* `size` is `null` until the first observation. Never calls `getBoundingClientRect()`.
+* RO callbacks are compositor-aligned (once per frame), so no rAF coalescing needed.
+*
+* @example
+* const { ref, size } = useSize();
+* return <div ref={ref}>{size?.width}</div>;
+*/
+function useSize(options) {
+	const [size, setSize] = useState(null);
+	const prevWidth = useRef(null);
+	const prevHeight = useRef(null);
+	const internalRef = useRef(null);
+	const ref = options?.ref ?? internalRef;
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		return observeResize(element, (entry) => {
+			const box = entry.contentBoxSize[0];
+			if (!box) return;
+			const width = box.inlineSize;
+			const height = box.blockSize;
+			if (width === prevWidth.current && height === prevHeight.current) return;
+			prevWidth.current = width;
+			prevHeight.current = height;
+			setSize({
+				width,
+				height
+			});
+		});
+	}, []);
+	return {
+		ref,
+		size
+	};
+}
+//#endregion
+//#region src/react/use-container-query/index.ts
+/**
+* Returns whether an element matches a size-based container breakpoint.
+*
+* Unlike `useSize` (which re-renders on every pixel of resize), this hook only
+* re-renders when the match result changes, i.e. when the element crosses a
+* breakpoint boundary. Uses the shared ResizeObserver singleton.
+*
+* @example
+* const { ref, matches } = useContainerQuery({ minWidth: 600 });
+* return <div ref={ref}>{matches ? 'wide' : 'narrow'}</div>;
+*/
+function useContainerQuery(breakpoint, options) {
+	const [matches, setMatches] = useState(false);
+	const matchesRef = useRef(false);
+	const internalRef = useRef(null);
+	const ref = options?.ref ?? internalRef;
+	const { minWidth, maxWidth, minHeight, maxHeight } = breakpoint;
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		return observeResize(element, (entry) => {
+			const box = entry.contentBoxSize[0];
+			if (!box) return;
+			const width = box.inlineSize;
+			const height = box.blockSize;
+			const nowMatches = evaluateBreakpoint(width, height, minWidth, maxWidth, minHeight, maxHeight);
+			if (nowMatches !== matchesRef.current) {
+				matchesRef.current = nowMatches;
+				setMatches(nowMatches);
+			}
+		});
+	}, [
+		minWidth,
+		maxWidth,
+		minHeight,
+		maxHeight
+	]);
+	return {
+		ref,
+		matches
+	};
+}
+function evaluateBreakpoint(width, height, minWidth, maxWidth, minHeight, maxHeight) {
+	if (minWidth !== void 0 && width < minWidth) return false;
+	if (maxWidth !== void 0 && width > maxWidth) return false;
+	if (minHeight !== void 0 && height < minHeight) return false;
+	if (maxHeight !== void 0 && height > maxHeight) return false;
+	return true;
+}
+//#endregion
+//#region src/react/use-scroll-progress/index.ts
+/**
+* Element visibility ratio (0–1) via the shared IntersectionObserver pool.
+*
+* Reports the fraction of the element currently visible. Ideal for reveal/opacity
+* effects. Not a scroll-scrubbing engine: event-driven and quantized to `steps`.
+*
+* Re-renders only at threshold crossings (~20 per full viewport traversal).
+* `progress` is `0` before first observation and during SSR.
+*
+* @example
+* const { ref, progress } = useScrollProgress();
+* return <div ref={ref} style={{ opacity: progress }} />;
+*/
+function useScrollProgress(options) {
+	const [progress, setProgress] = useState(0);
+	const steps = options?.steps;
+	const rootMargin = options?.rootMargin;
+	const internalRef = useRef(null);
+	const ref = options?.ref ?? internalRef;
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const scrollProgress = createScrollProgress({
+			element,
+			onProgress: setProgress,
+			steps,
+			root: options?.root,
+			rootMargin
+		});
+		return () => scrollProgress.stop();
+	}, [steps, rootMargin]);
+	return {
+		ref,
+		progress
+	};
+}
+//#endregion
+//#region src/react/use-render-state/index.ts
+/**
+* Track whether the browser is rendering an element or skipping it under
+* `content-visibility` (e.g. a `Defer` subtree). Returns `'rendered'` until the
+* browser reports otherwise.
+*
+* Use it to pause raw, non-phase work (a hand-written rAF loop, `setInterval`)
+* when the subtree stops painting. phase loops self-pause off-screen already.
+* Has no layout effect. Safe for CLS.
+*
+* @example
+* const ref = useRef<HTMLDivElement>(null);
+* const phase = useRenderState(ref);
+* useEffect(() => {
+*   if (phase === 'skipped') clock.pause();
+*   else clock.resume();
+* }, [phase]);
+* return <Defer ref={ref}><Heavy /></Defer>;
+*/
+function useRenderState(ref) {
+	const [phase, setPhase] = useState("rendered");
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const render = createRenderState({
+			element,
+			onPhaseChange: setPhase
+		});
+		return () => render.stop();
+	}, []);
+	return phase;
+}
+//#endregion
+//#region src/react/use-idle/index.ts
+/**
+* Returns `false`, then `true` once the browser is idle after mount. Use it to
+* defer non-critical work or mounting until the main thread is free.
+*
+* SSR-safe: returns `false` on the server and during the first client render.
+*
+* @example
+* const idle = useIdle();
+* return idle ? <Analytics /> : null;
+*/
+function useIdle(options) {
+	const [idle, setIdle] = useState(false);
+	const timeout = options?.timeout;
+	useEffect(() => {
+		return whenIdle(() => setIdle(true), { timeout });
+	}, [timeout]);
+	return idle;
+}
+//#endregion
+//#region src/react/use-when-idle/index.ts
+/**
+* Run a callback once, when the browser is idle after mount. The effect-shaped
+* counterpart to `useIdle`. Use it for side effects (prefetching a chunk,
+* warming a cache, `import()`) rather than rendering.
+*
+* Cancels automatically on unmount, and always calls the latest `callback`
+* without re-subscribing. SSR-safe: nothing runs on the server.
+*
+* @example
+* // Prefetch a heavy panel during idle time so it opens instantly later.
+* useWhenIdle(() => void import('./chat-panel'));
+*/
+function useWhenIdle(callback, options) {
+	const callbackRef = useSyncedRef(callback);
+	const timeout = options?.timeout;
+	useEffect(() => {
+		return whenIdle(() => callbackRef.current(), { timeout });
+	}, [timeout]);
+}
+//#endregion
+//#region src/react/use-canvas/index.ts
+const INITIAL_STATE = {
+	phase: "idle",
+	phaseReason: "initial",
+	quality: "full",
+	qualityReason: void 0
+};
+/**
+* Canvas-specific animation with DPR-aware sizing, ResizeObserver coalescing,
+* context management, and GPU context loss recovery.
+*
+* @example
+* useCanvas({
+*   containerRef,
+*   canvasRef,
+*   draw: (ctx, frame, size) => {
+*     ctx.clearRect(0, 0, size.width, size.height);
+*     // render...
+*   },
+* });
+*/
+function useCanvas(options) {
+	const { containerRef, canvasRef, fps, enabled = true, reducedMotion, degraded, degradedFps } = options;
+	const drawRef = useSyncedRef(options.draw);
+	const [state, setState] = useState(INITIAL_STATE);
+	const [restartNonce, setRestartNonce] = useState(0);
+	const ctxRef = useRef(null);
+	const sizeRef = useRef({
+		width: 0,
+		height: 0
+	});
+	const qualityRef = useSyncedRef(state.quality);
+	useEffect(() => {
+		const container = containerRef.current;
+		const canvasEl = canvasRef.current;
+		if (!container || !canvasEl || !enabled) return;
+		const canvas = canvasEl;
+		const initialCtx = canvas.getContext("2d");
+		if (!initialCtx) return;
+		ctxRef.current = initialCtx;
+		let dpr = readDpr();
+		let contextLost = false;
+		function applySize(width, height, physicalBox) {
+			sizeRef.current = {
+				width,
+				height
+			};
+			const isDegraded = qualityRef.current === "degraded";
+			let bufferWidth;
+			let bufferHeight;
+			if (isDegraded) {
+				bufferWidth = width;
+				bufferHeight = height;
+			} else if (physicalBox) {
+				bufferWidth = physicalBox.inlineSize;
+				bufferHeight = physicalBox.blockSize;
+			} else {
+				bufferWidth = width * dpr;
+				bufferHeight = height * dpr;
+			}
+			canvas.width = bufferWidth;
+			canvas.height = bufferHeight;
+			canvas.style.width = width + "px";
+			canvas.style.height = height + "px";
+			const effectiveDpr = isDegraded ? 1 : dpr;
+			ctxRef.current?.setTransform(effectiveDpr, 0, 0, effectiveDpr, 0, 0);
+		}
+		const unsubDpr = subscribeDpr((newDpr) => {
+			dpr = newDpr;
+			applySize(sizeRef.current.width, sizeRef.current.height);
+		});
+		const unobserve = observeResize(container, (entry) => {
+			const box = entry.contentBoxSize[0];
+			if (!box) return;
+			const physicalBox = entry.devicePixelContentBoxSize?.[0];
+			applySize(box.inlineSize, box.blockSize, physicalBox);
+		});
+		function onContextLost(event) {
+			event.preventDefault();
+			contextLost = true;
+		}
+		function onContextRestored() {
+			const restoredCtx = canvas.getContext("2d");
+			if (!restoredCtx) return;
+			ctxRef.current = restoredCtx;
+			contextLost = false;
+			applySize(sizeRef.current.width, sizeRef.current.height);
+		}
+		canvas.addEventListener("contextlost", onContextLost);
+		canvas.addEventListener("contextrestored", onContextRestored);
+		let loopInstance = null;
+		const loop = createLoop({
+			element: container,
+			fps,
+			reducedMotion,
+			...degradedConfig(degraded, degradedFps),
+			onTick: (frame) => {
+				if (contextLost || !ctxRef.current) return;
+				drawRef.current(ctxRef.current, frame, sizeRef.current);
+			},
+			onPhaseChange: (phase, reason) => {
+				setState({
+					phase,
+					phaseReason: reason,
+					quality: loopInstance?.quality ?? "full",
+					qualityReason: loopInstance?.qualityReason
+				});
+			}
+		});
+		loopInstance = loop;
+		function teardown() {
+			loop.stop();
+			loopInstance = null;
+			unobserve();
+			unsubDpr();
+			canvas.removeEventListener("contextlost", onContextLost);
+			canvas.removeEventListener("contextrestored", onContextRestored);
+		}
+		return teardown;
+	}, [
+		enabled,
+		fps,
+		reducedMotion,
+		degraded,
+		degradedFps,
+		restartNonce
+	]);
+	return {
+		restart: useCallback(() => {
+			setRestartNonce((n) => n + 1);
+		}, []),
+		...state
+	};
+}
+//#endregion
+//#region src/react/use-tween/index.ts
+/**
+* Animate a value from its current position to `target` over `duration`.
+*
+* Uses `useState` per frame. Appropriate for cheap renders (counters, opacity,
+* progress bars). For batch animations, use `useLoop` with ref-based DOM writes.
+*
+* @remarks
+* Unlike `createTicker`/`createLoop`, `useTween` drives its own rAF rather than
+* the shared frame-locked clock. It's a finite, self-completing tween whose value
+* must land in React state, so it doesn't need cross-loop visual sync, strong
+* pause, or delta clamping. Routing it through the shared clock would add bundle
+* weight for no benefit.
+*
+* @example
+* const value = useTween({ target: 100, duration: 500 });
+*/
+function useTween(options) {
+	const { target, duration = 300, delay = 0, easing = easeOutCubic, enabled = true, reducedMotion = "complete" } = options;
+	const [value, setValue] = useState(target);
+	const fromRef = useRef(target);
+	const currentRef = useRef(target);
+	const isFirstRender = useRef(true);
+	useEffect(() => {
+		if (!Number.isFinite(duration) || duration <= 0) invalidDurationError("useTween", duration);
+		if (isFirstRender.current) {
+			isFirstRender.current = false;
+			jumpToTarget({
+				target,
+				fromRef,
+				currentRef,
+				setValue
+			});
+			return;
+		}
+		if (!enabled || reducedMotion !== "ignore" && prefersReducedMotion()) {
+			jumpToTarget({
+				target,
+				fromRef,
+				currentRef,
+				setValue
+			});
+			return;
+		}
+		const from = currentRef.current;
+		if (from === target) return;
+		let rafId;
+		let startTime = null;
+		function tick(now) {
+			if (startTime === null) startTime = now;
+			const elapsed = now - startTime - delay;
+			if (elapsed < 0) {
+				rafId = requestAnimationFrame(tick);
+				return;
+			}
+			const progress = clamp01(elapsed / duration);
+			const current = from + (target - from) * easing(progress);
+			currentRef.current = current;
+			setValue(current);
+			if (progress < 1) rafId = requestAnimationFrame(tick);
+			else fromRef.current = target;
+		}
+		rafId = requestAnimationFrame(tick);
+		return () => {
+			cancelAnimationFrame(rafId);
+			fromRef.current = currentRef.current;
+		};
+	}, [
+		target,
+		duration,
+		delay,
+		enabled,
+		reducedMotion
+	]);
+	return value;
+}
+function jumpToTarget(options) {
+	const { target, fromRef, currentRef, setValue } = options;
+	fromRef.current = target;
+	currentRef.current = target;
+	setValue(target);
+}
+//#endregion
+//#region src/react/_internal/use-update-effect/index.ts
+/**
+* Like `useEffect` but skips the first invocation on mount.
+* Used by Presence to distinguish initial render from subsequent `show` changes.
+*/
+function useUpdateEffect(effect, deps) {
+	const isMounted = useRef(false);
+	useEffect(() => {
+		if (!isMounted.current) {
+			isMounted.current = true;
+			return;
+		}
+		return effect();
+	}, deps);
+}
+//#endregion
+//#region src/react/use-presence/index.ts
+/**
+* Composable presence primitive for mount/unmount lifecycle with CSS transitions.
+*
+* Enter animations use CSS `@starting-style`, gated by `data-enter="animate"`.
+* Exit animations are JS-coordinated: waits for `transitionend`/`animationend`
+* before unmounting.
+*
+* @example
+* const { phase, ref, mounted, enter } = usePresence({ show: isOpen });
+* if (!mounted) return null;
+* return (
+*   <div ref={ref} data-phase={phase} data-enter={enter === 'animate' ? 'animate' : undefined}
+*     className="transition-opacity data-[enter=animate]:starting:opacity-0 data-[phase=exiting]:opacity-0" />
+* );
+*/
+function usePresence(options) {
+	const { show, mode = "mount", enter: enterOption = "animate", exitDuration = 5e3, reducedMotion = "respect" } = options;
+	const ref = useRef(null);
+	const [phase, setPhase] = useState(show ? "entered" : "idle");
+	const [reason, setReason] = useState("initial");
+	const exitTimerRef = useRef(null);
+	const exitCleanupRef = useRef(null);
+	const clearTimers = useCallback(() => {
+		if (exitTimerRef.current !== null) {
+			clearTimeout(exitTimerRef.current);
+			exitTimerRef.current = null;
+		}
+		if (exitCleanupRef.current) {
+			exitCleanupRef.current();
+			exitCleanupRef.current = null;
+		}
+	}, []);
+	useEffect(() => () => clearTimers(), [clearTimers]);
+	useUpdateEffect(() => {
+		clearTimers();
+		if (show) setPhase((prev) => {
+			setReason(prev === "exiting" ? "interrupted" : "show");
+			return "entered";
+		});
+		else if (reducedMotion === "respect" && prefersReducedMotion()) {
+			setPhase(mode === "reveal" ? "idle" : "exited");
+			setReason("animation-end");
+		} else handleExit(ref, mode, exitDuration, setPhase, setReason, clearTimers, exitTimerRef, exitCleanupRef);
+	}, [show]);
+	const mounted = phase !== "idle" && phase !== "exited";
+	const wantsAnimation = !(reason === "initial" && enterOption === "instant");
+	const motionAllowed = reducedMotion === "ignore" || !prefersReducedMotion();
+	return {
+		phase,
+		phaseReason: reason,
+		mounted,
+		ref,
+		enter: wantsAnimation && motionAllowed ? "animate" : "instant"
+	};
+}
+function handleExit(ref, mode, exitDuration, setPhase, setReason, clearTimers, exitTimerRef, exitCleanupRef) {
+	setPhase("exiting");
+	setReason("hide");
+	const exitTarget = mode === "reveal" ? "idle" : "exited";
+	const element = ref.current;
+	function completeExit() {
+		clearTimers();
+		setPhase((current) => {
+			if (current !== "exiting") return current;
+			setReason("animation-end");
+			return exitTarget;
+		});
+	}
+	function cleanup() {
+		if (element) {
+			element.removeEventListener("transitionend", completeExit);
+			element.removeEventListener("animationend", completeExit);
+		}
+		if (exitTimerRef.current !== null) {
+			clearTimeout(exitTimerRef.current);
+			exitTimerRef.current = null;
+		}
+		exitCleanupRef.current = null;
+	}
+	exitCleanupRef.current = cleanup;
+	if (element) {
+		element.addEventListener("transitionend", completeExit, { once: true });
+		element.addEventListener("animationend", completeExit, { once: true });
+	}
+	exitTimerRef.current = setTimeout(completeExit, exitDuration);
+}
+//#endregion
+//#region src/react/presence/index.tsx
+/**
+* Renders a `div` that manages its own mounting lifecycle.
+*
+* Stamps `data-phase` for exit animations and `data-enter="animate"` to gate
+* CSS `@starting-style` enter animations. Reduced motion is handled automatically.
+*
+* @example
+* <Presence
+*   show={isOpen}
+*   className="transition-opacity data-[enter=animate]:starting:opacity-0 data-[phase=exiting]:opacity-0"
+* >
+*   Modal content
+* </Presence>
+*/
+function Presence({ show, mode, enter: enterOption, exitDuration, reducedMotion, ref: forwardedRef, children, ...divProps }) {
+	const { phase, ref, mounted, enter } = usePresence({
+		show,
+		mode,
+		enter: enterOption,
+		exitDuration,
+		reducedMotion
+	});
+	useImperativeHandle(forwardedRef, () => ref.current);
+	if (!mounted && mode !== "reveal") return null;
+	return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		ref,
+		"data-phase": phase,
+		"data-enter": enter === "animate" ? "animate" : void 0,
+		children
+	});
+}
+//#endregion
+//#region src/react/when-visible/index.tsx
+/**
+* Mounts children when the element enters the viewport. One-shot (once
+* triggered, stays mounted).
+*
+* Enter animation uses CSS `@starting-style`, gated by `data-enter="animate"`.
+* Reduced motion is automatic: the attribute is not stamped when the user
+* prefers reduced motion.
+*
+* @example
+* <WhenVisible rootMargin="200px" className="transition-opacity data-[enter=animate]:starting:opacity-0">
+*   <HeavyChart />
+* </WhenVisible>
+*/
+function WhenVisible({ rootMargin = "200px", threshold, root, fallback, children, ref: forwardedRef, ...divProps }) {
+	const sentinelRef = useRef(null);
+	const { phase } = useSight({
+		ref: sentinelRef,
+		observe: "once",
+		rootMargin,
+		threshold,
+		root
+	});
+	const setRef = (node) => {
+		sentinelRef.current = node;
+		assignRef(forwardedRef, node);
+	};
+	if (phase !== "visible") return /* @__PURE__ */ jsx("div", {
+		ref: setRef,
+		...divProps,
+		children: fallback
+	});
+	const motionAllowed = !prefersReducedMotion();
+	return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		ref: setRef,
+		"data-phase": "entered",
+		"data-enter": motionAllowed ? "animate" : void 0,
+		children
+	});
+}
+function assignRef(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+//#endregion
+//#region src/react/when-idle/index.tsx
+/**
+* Mounts children once the browser is idle after first paint. One-shot (once
+* mounted, stays mounted). Use it to defer non-critical UI off the critical path.
+*
+* Children are not server-rendered (idle never fires during SSR), so reserve
+* this for non-critical content. For viewport-gated mounting use `WhenVisible`;
+* to keep content in the DOM but skip painting use `Defer`.
+*
+* Enter animation uses CSS `@starting-style`, gated by `data-enter="animate"`.
+* Reduced motion is automatic: the attribute is not stamped when the user
+* prefers reduced motion.
+*
+* @example
+* <WhenIdle fallback={<Skeleton />}>
+*   <SecondaryPanel />
+* </WhenIdle>
+*/
+function WhenIdle({ timeout, fallback, children, ref: forwardedRef, ...divProps }) {
+	if (!useIdle({ timeout })) return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		children: fallback
+	});
+	const motionAllowed = !prefersReducedMotion();
+	return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		ref: forwardedRef,
+		"data-phase": "entered",
+		"data-enter": motionAllowed ? "animate" : void 0,
+		children
+	});
+}
+//#endregion
+//#region src/react/defer/index.tsx
+/**
+* Skip the browser's rendering work (style, layout, paint) for off-screen
+* content via `content-visibility: auto`. Pure CSS, no JS, no observer.
+*
+* Children stay in the DOM and are server-rendered (SEO- and CLS-safe).
+* `contain-intrinsic-size: auto <estimatedHeight>` reserves space so the
+* scrollbar does not jump. Defers rendering only, not hydration or mounting.
+*
+* The render-skip styles are encapsulated and cannot be overridden. There is
+* no `style` prop. Style the wrapper with `className`; this keeps the
+* no-layout-shift guarantee intact.
+*
+* @example
+* <Defer estimatedHeight="600px" className="my-section">
+*   <ArticleSection />
+* </Defer>
+*
+* @remarks
+* Animations inside a `Defer` keep running while paint is skipped. phase loops
+* self-pause off-screen on their own; for raw rAF/interval work, gate it with
+* `useRenderState`.
+*/
+function Defer({ estimatedHeight = "1000px", children, ref, ...divProps }) {
+	const deferStyle = {
+		contentVisibility: "auto",
+		containIntrinsicSize: `auto ${estimatedHeight}`
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		ref,
+		style: deferStyle,
+		children
+	});
+}
+//#endregion
+//#region src/react/swap/index.tsx
+const SwapCtx = createContext(null);
+/**
+* Coordinated exit-then-enter transitions for N states.
+* Only one state is entering or exiting at a time (no overlap).
+*
+* The current state fully exits before the new state enters. Rapid changes
+* (A->B->C during A's exit) skip intermediate states and jump to the latest.
+*
+* @example
+* <Swap active={success ? 'success' : 'form'}>
+*   <Swap.State id="form" className="transition-all data-[phase=exiting]:opacity-0">
+*     <Form />
+*   </Swap.State>
+*   <Swap.State id="success" className="transition-all data-[enter=animate]:starting:opacity-0">
+*     <SuccessMessage />
+*   </Swap.State>
+* </Swap>
+*/
+function SwapRoot({ active, exitDuration = 5e3, children, ...divProps }) {
+	const [current, setCurrent] = useState(active);
+	const [hasSwapped, setHasSwapped] = useState(false);
+	const activeRef = useSyncedRef(active);
+	const onExited = useCallback((id) => {
+		setHasSwapped(true);
+		setCurrent((cur) => cur === id ? activeRef.current : cur);
+	}, [activeRef]);
+	const enter = hasSwapped ? "animate" : "instant";
+	const ctx = useMemo(() => ({
+		current,
+		active,
+		exitDuration,
+		enter,
+		onExited
+	}), [
+		current,
+		active,
+		exitDuration,
+		enter,
+		onExited
+	]);
+	return /* @__PURE__ */ jsx(SwapCtx.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			...divProps,
+			children
+		})
+	});
+}
+function SwapState({ id, ref: forwardedRef, children, ...divProps }) {
+	const ctx = use(SwapCtx);
+	if (!ctx) missingContextError("Swap.State", "Swap");
+	const isCurrent = ctx.current === id;
+	const show = isCurrent && ctx.active === id;
+	const { phase, ref, mounted, enter } = usePresence({
+		show,
+		mode: "mount",
+		enter: ctx.enter,
+		exitDuration: ctx.exitDuration
+	});
+	useImperativeHandle(forwardedRef, () => ref.current);
+	useEffect(() => {
+		if (isCurrent && !show && phase === "exited") ctx.onExited(id);
+	}, [
+		isCurrent,
+		show,
+		phase,
+		id,
+		ctx
+	]);
+	if (!isCurrent || !mounted) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		ref,
+		"data-phase": phase,
+		"data-enter": enter === "animate" ? "animate" : void 0,
+		children
+	});
+}
+const Swap = Object.assign(SwapRoot, { State: SwapState });
+//#endregion
+export { Defer, Presence, Swap, WhenIdle, WhenVisible, useCanvas, useContainerQuery, useDevicePixelRatio, useIdle, useLifecycle, useLoop, useMediaQuery, usePrefersReducedMotion, usePresence, useRenderState, useScrollProgress, useSight, useSize, useStableCallback, useSyncedRef, useTween, useWhenIdle };
+
+//# sourceMappingURL=react.js.map