react-hook-toolkit 4.0.0 → 5.0.0

package/dist/chunk1516/chunk1718.js

@@ -0,0 +1,783 @@
+import { useState, useEffect, useCallback, useRef, useLayoutEffect, useReducer } from 'react';
+// ─── useIsomorphicEffect ──────────────────────────────────────────────────────
+/**
+ * A drop-in replacement for useLayoutEffect that falls back to useEffect on
+ * the server (SSR), preventing the "useLayoutEffect does nothing on the server"
+ * warning in Next.js / Remix environments.
+ */
+export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+/**
+ * Manages a boolean state with explicit setTrue, setFalse, toggle, and set helpers.
+ */
+export function useBoolean(initialValue = false) {
+    const [value, setValue] = useState(initialValue);
+    const setTrue = useCallback(() => setValue(true), []);
+    const setFalse = useCallback(() => setValue(false), []);
+    const toggle = useCallback(() => setValue(v => !v), []);
+    const set = useCallback((v) => setValue(v), []);
+    return { value, setTrue, setFalse, toggle, set };
+}
+// ─── useForceUpdate ───────────────────────────────────────────────────────────
+/**
+ * Returns a function that, when called, forces the component to re-render.
+ * Useful when external mutable data changes outside of React state.
+ */
+export function useForceUpdate() {
+    const [, dispatch] = useReducer((x) => x + 1, 0);
+    return useCallback(() => dispatch(), []);
+}
+// ─── useClock ─────────────────────────────────────────────────────────────────
+/**
+ * Returns a Date that updates every `intervalMs` milliseconds (default 1000).
+ * Useful for displaying a live clock.
+ */
+export function useClock(intervalMs = 1000) {
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        const id = setInterval(() => setNow(new Date()), intervalMs);
+        return () => clearInterval(id);
+    }, [intervalMs]);
+    return now;
+}
+// ─── useDebouncedState ────────────────────────────────────────────────────────
+/**
+ * Like useState but the exposed value only updates after the setter hasn't
+ * been called for `delay` milliseconds.
+ * Returns [debouncedValue, setter, immediateValue].
+ */
+export function useDebouncedState(initialValue, delay) {
+    const [immediate, setImmediate] = useState(initialValue);
+    const [debounced, setDebounced] = useState(initialValue);
+    const timerRef = useRef();
+    const set = useCallback((value) => {
+        setImmediate(value);
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setDebounced(value), delay);
+    }, [delay]);
+    useEffect(() => () => clearTimeout(timerRef.current), []);
+    return [debounced, set, immediate];
+}
+/**
+ * Calls `callback` on every animation frame while running.
+ * The callback receives the elapsed time in milliseconds since start.
+ * Returns start/stop controls and an isRunning flag.
+ */
+export function useAnimationFrame(callback) {
+    const frameRef = useRef(0);
+    const startTimeRef = useRef(0);
+    const callbackRef = useRef(callback);
+    const [isRunning, setIsRunning] = useState(false);
+    useIsomorphicEffect(() => {
+        callbackRef.current = callback;
+    });
+    const stop = useCallback(() => {
+        cancelAnimationFrame(frameRef.current);
+        setIsRunning(false);
+    }, []);
+    const start = useCallback(() => {
+        cancelAnimationFrame(frameRef.current);
+        startTimeRef.current = performance.now();
+        setIsRunning(true);
+        const loop = (timestamp) => {
+            callbackRef.current(timestamp - startTimeRef.current);
+            frameRef.current = requestAnimationFrame(loop);
+        };
+        frameRef.current = requestAnimationFrame(loop);
+    }, []);
+    useEffect(() => () => cancelAnimationFrame(frameRef.current), []);
+    return { start, stop, isRunning };
+}
+/**
+ * Wraps an async function with loading (isPending), data, and error states.
+ * Unlike useAsync, this is imperative — it does NOT run on mount.
+ */
+export function useAsyncCallback(asyncFn) {
+    const [data, setData] = useState(null);
+    const [error, setError] = useState(null);
+    const [isPending, setIsPending] = useState(false);
+    const isMounted = useRef(true);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => { isMounted.current = false; };
+    }, []);
+    const execute = useCallback(async (...args) => {
+        setIsPending(true);
+        setError(null);
+        try {
+            const result = await asyncFn(...args);
+            if (isMounted.current)
+                setData(result);
+        }
+        catch (err) {
+            if (isMounted.current)
+                setError(err instanceof Error ? err : new Error(String(err)));
+        }
+        finally {
+            if (isMounted.current)
+                setIsPending(false);
+        }
+    }, [asyncFn]);
+    const reset = useCallback(() => {
+        setData(null);
+        setError(null);
+        setIsPending(false);
+    }, []);
+    return { execute, data, error, isPending, reset };
+}
+/**
+ * Uses the AnalyserNode API to capture and expose real-time audio frequency
+ * and time-domain data from the user's microphone.
+ */
+export function useAudioAnalyser(options = {}) {
+    const { fftSize = 256, smoothingTimeConstant = 0.8 } = options;
+    const [analyser, setAnalyser] = useState(null);
+    const [frequencyData, setFrequencyData] = useState(new Uint8Array(0));
+    const [timeDomainData, setTimeDomainData] = useState(new Uint8Array(0));
+    const [audioLevel, setAudioLevel] = useState(0);
+    const [isListening, setIsListening] = useState(false);
+    const [error, setError] = useState(null);
+    const contextRef = useRef(null);
+    const streamRef = useRef(null);
+    const frameRef = useRef(0);
+    const analyserRef = useRef(null);
+    const stop = useCallback(() => {
+        var _a, _b;
+        cancelAnimationFrame(frameRef.current);
+        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach(t => t.stop());
+        streamRef.current = null;
+        (_b = contextRef.current) === null || _b === void 0 ? void 0 : _b.close().catch(() => { });
+        contextRef.current = null;
+        analyserRef.current = null;
+        setAnalyser(null);
+        setAudioLevel(0);
+        setIsListening(false);
+    }, []);
+    const start = useCallback(async () => {
+        try {
+            setError(null);
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            streamRef.current = stream;
+            const ctx = new AudioContext();
+            contextRef.current = ctx;
+            const node = ctx.createAnalyser();
+            node.fftSize = fftSize;
+            node.smoothingTimeConstant = smoothingTimeConstant;
+            ctx.createMediaStreamSource(stream).connect(node);
+            analyserRef.current = node;
+            setAnalyser(node);
+            setIsListening(true);
+            const freqArr = new Uint8Array(node.frequencyBinCount);
+            const timeArr = new Uint8Array(node.fftSize);
+            const tick = () => {
+                if (!analyserRef.current)
+                    return;
+                analyserRef.current.getByteFrequencyData(freqArr);
+                analyserRef.current.getByteTimeDomainData(timeArr);
+                setFrequencyData(new Uint8Array(freqArr));
+                setTimeDomainData(new Uint8Array(timeArr));
+                const avg = freqArr.reduce((a, b) => a + b, 0) / freqArr.length;
+                setAudioLevel(Math.min(100, avg * 2));
+                frameRef.current = requestAnimationFrame(tick);
+            };
+            tick();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error('Failed to access microphone'));
+            setIsListening(false);
+        }
+    }, [fftSize, smoothingTimeConstant]);
+    useEffect(() => () => stop(), [stop]);
+    return { analyser, frequencyData, timeDomainData, audioLevel, isListening, start, stop, error };
+}
+/**
+ * Handles drag-and-drop interactions on a container element.
+ * Provides props for both the container and each draggable item.
+ * Calls onDrop(fromIndex, toIndex) when a drop completes.
+ */
+export function useDragAndDrop(onDrop) {
+    const [isDragging, setIsDragging] = useState(false);
+    const [isOver, setIsOver] = useState(false);
+    const [dragIndex, setDragIndex] = useState(null);
+    const [dropIndex, setDropIndex] = useState(null);
+    const dragIndexRef = useRef(null);
+    const containerProps = {
+        onDragOver: useCallback((e) => {
+            e.preventDefault();
+            setIsOver(true);
+        }, []),
+        onDragLeave: useCallback(() => setIsOver(false), []),
+        onDrop: useCallback((e) => {
+            e.preventDefault();
+            setIsOver(false);
+            setIsDragging(false);
+            const from = dragIndexRef.current;
+            if (from !== null && dropIndex !== null && from !== dropIndex) {
+                onDrop === null || onDrop === void 0 ? void 0 : onDrop(from, dropIndex);
+            }
+            setDragIndex(null);
+            setDropIndex(null);
+            dragIndexRef.current = null;
+        }, [dropIndex, onDrop]),
+    };
+    const draggableProps = useCallback((index) => ({
+        draggable: true,
+        onDragStart: (_e) => {
+            setIsDragging(true);
+            setDragIndex(index);
+            dragIndexRef.current = index;
+        },
+        onDragEnd: (_e) => {
+            setIsDragging(false);
+            setDragIndex(null);
+            dragIndexRef.current = null;
+        },
+    }), []);
+    return { containerProps, draggableProps, state: { isDragging, isOver }, dragIndex, dropIndex };
+}
+/**
+ * Handles file drag-drop and file-input selection on a drop area element.
+ * Validates file type and size before calling onDrop.
+ */
+export function useFileDropArea(options = {}) {
+    const { accept = [], maxSize, multiple = true, onDrop, onError } = options;
+    const [files, setFiles] = useState([]);
+    const [isOver, setIsOver] = useState(false);
+    const validateFiles = useCallback((rawFiles) => {
+        return rawFiles.filter(file => {
+            if (accept.length > 0) {
+                const ok = accept.some(type => {
+                    if (type.endsWith('/*'))
+                        return file.type.startsWith(type.slice(0, -2));
+                    if (type.startsWith('.'))
+                        return file.name.toLowerCase().endsWith(type.toLowerCase());
+                    return file.type === type;
+                });
+                if (!ok) {
+                    onError === null || onError === void 0 ? void 0 : onError(new Error(`File type not accepted: ${file.type}`));
+                    return false;
+                }
+            }
+            if (maxSize && file.size > maxSize) {
+                onError === null || onError === void 0 ? void 0 : onError(new Error(`File too large: ${file.name}`));
+                return false;
+            }
+            return true;
+        });
+    }, [accept, maxSize, onError]);
+    const handleFiles = useCallback((rawFiles) => {
+        if (!rawFiles)
+            return;
+        const arr = Array.from(rawFiles);
+        const valid = validateFiles(multiple ? arr : arr.slice(0, 1));
+        setFiles(prev => (multiple ? [...prev, ...valid] : valid));
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(valid);
+    }, [validateFiles, multiple, onDrop]);
+    const dropProps = {
+        onDragOver: useCallback((e) => { e.preventDefault(); setIsOver(true); }, []),
+        onDragLeave: useCallback(() => setIsOver(false), []),
+        onDrop: useCallback((e) => {
+            e.preventDefault();
+            setIsOver(false);
+            handleFiles(e.dataTransfer.files);
+        }, [handleFiles]),
+    };
+    const inputProps = {
+        type: 'file',
+        accept: accept.join(','),
+        multiple,
+        onChange: useCallback((e) => {
+            handleFiles(e.target.files);
+        }, [handleFiles]),
+        style: { display: 'none' },
+    };
+    const clear = useCallback(() => setFiles([]), []);
+    return { dropProps, inputProps, files, isOver, clear };
+}
+/**
+ * Handles Gamepad API connections, disconnections, and button/axis state.
+ * Polls gamepad state via requestAnimationFrame.
+ */
+export function useGamepad() {
+    const [gamepads, setGamepads] = useState([]);
+    const frameRef = useRef(0);
+    const isSupported = typeof navigator !== 'undefined' && 'getGamepads' in navigator;
+    useEffect(() => {
+        if (!isSupported)
+            return;
+        const poll = () => {
+            setGamepads(Array.from(navigator.getGamepads()));
+            frameRef.current = requestAnimationFrame(poll);
+        };
+        const onConnect = () => { frameRef.current = requestAnimationFrame(poll); };
+        const onDisconnect = () => setGamepads(Array.from(navigator.getGamepads()));
+        window.addEventListener('gamepadconnected', onConnect);
+        window.addEventListener('gamepaddisconnected', onDisconnect);
+        return () => {
+            cancelAnimationFrame(frameRef.current);
+            window.removeEventListener('gamepadconnected', onConnect);
+            window.removeEventListener('gamepaddisconnected', onDisconnect);
+        };
+    }, [isSupported]);
+    return { gamepads, isConnected: gamepads.some(g => g !== null) };
+}
+/**
+ * Tracks the number of CSS grid columns and rows of a ref'd element.
+ * Updates whenever the element resizes.
+ */
+export function useGridLayout(ref) {
+    const [info, setInfo] = useState({ columns: 0, rows: 0 });
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const update = () => {
+            const style = window.getComputedStyle(el);
+            const cols = style.getPropertyValue('grid-template-columns').split(' ').filter(Boolean).length;
+            const rows = style.getPropertyValue('grid-template-rows').split(' ').filter(Boolean).length;
+            setInfo({ columns: cols, rows });
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [ref]);
+    return info;
+}
+/**
+ * Convenience wrapper over IntersectionObserver that returns a [ref, inView] pair.
+ * When once is true, stops observing after the element enters the viewport.
+ */
+export function useInView(options = {}) {
+    const { once = false, threshold = 0, root = null, rootMargin = '0%' } = options;
+    const ref = useRef(null);
+    const [inView, setInView] = useState(false);
+    const [entry, setEntry] = useState();
+    const frozen = useRef(false);
+    useEffect(() => {
+        if (frozen.current || !ref.current)
+            return;
+        const observer = new IntersectionObserver(([e]) => {
+            setEntry(e);
+            setInView(e.isIntersecting);
+            if (e.isIntersecting && once) {
+                frozen.current = true;
+                observer.disconnect();
+            }
+        }, { threshold, root, rootMargin });
+        observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [threshold, root, rootMargin, once]);
+    return { ref, inView, entry };
+}
+/**
+ * Binds keyboard hotkeys to handler functions.
+ * Key format: 'ctrl+s', 'alt+shift+k', 'Escape', 'ArrowUp', etc.
+ */
+export function useKeyboard(bindings, element) {
+    const bindingsRef = useRef(bindings);
+    useIsomorphicEffect(() => { bindingsRef.current = bindings; });
+    useEffect(() => {
+        var _a;
+        const target = (_a = element === null || element === void 0 ? void 0 : element.current) !== null && _a !== void 0 ? _a : window;
+        const handler = (e) => {
+            for (const [combo, fn] of Object.entries(bindingsRef.current)) {
+                const parts = combo.toLowerCase().split('+');
+                const key = parts[parts.length - 1];
+                const needsCtrl = parts.includes('ctrl');
+                const needsAlt = parts.includes('alt');
+                const needsShift = parts.includes('shift');
+                const needsMeta = parts.includes('meta');
+                if (e.key.toLowerCase() === key &&
+                    e.ctrlKey === needsCtrl &&
+                    e.altKey === needsAlt &&
+                    e.shiftKey === needsShift &&
+                    e.metaKey === needsMeta) {
+                    e.preventDefault();
+                    fn(e);
+                }
+            }
+        };
+        target.addEventListener('keydown', handler);
+        return () => target.removeEventListener('keydown', handler);
+    }, [element]);
+}
+/**
+ * Provides access to the user's camera and microphone via getUserMedia.
+ * Enumerates available devices and exposes the active MediaStream.
+ */
+export function useMediaDevices() {
+    const [state, setState] = useState({
+        stream: null,
+        devices: [],
+        isLoading: false,
+        error: null,
+        hasCamera: false,
+        hasMicrophone: false,
+    });
+    const streamRef = useRef(null);
+    const stopStream = useCallback(() => {
+        var _a;
+        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach(t => t.stop());
+        streamRef.current = null;
+        setState(prev => (Object.assign(Object.assign({}, prev), { stream: null })));
+    }, []);
+    const requestAccess = useCallback(async (constraints = { audio: true, video: true }) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { isLoading: true, error: null })));
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia(constraints);
+            streamRef.current = stream;
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            setState({
+                stream,
+                devices,
+                isLoading: false,
+                error: null,
+                hasCamera: devices.some(d => d.kind === 'videoinput'),
+                hasMicrophone: devices.some(d => d.kind === 'audioinput'),
+            });
+        }
+        catch (err) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { isLoading: false, error: err instanceof Error ? err : new Error('Media access denied') })));
+        }
+    }, []);
+    useEffect(() => () => stopStream(), [stopStream]);
+    return Object.assign(Object.assign({}, state), { requestAccess, stopStream });
+}
+// ─── useMutationObserver ──────────────────────────────────────────────────────
+/**
+ * Observes DOM mutations on a ref'd element via MutationObserver.
+ * Calls the callback whenever the observed mutations are recorded.
+ */
+export function useMutationObserver(ref, callback, options = {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    characterData: true,
+}) {
+    const callbackRef = useRef(callback);
+    useIsomorphicEffect(() => { callbackRef.current = callback; });
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !('MutationObserver' in window))
+            return;
+        const observer = new MutationObserver((...args) => callbackRef.current(...args));
+        observer.observe(el, options);
+        return () => observer.disconnect();
+    }, [ref, options]);
+}
+/**
+ * Full NetworkInformation API integration.
+ * Returns online status plus detailed connection metadata when available.
+ * Tracks when the online status last changed via `since`.
+ */
+export function useNetworkState() {
+    const getConn = () => navigator.connection ||
+        navigator.mozConnection ||
+        navigator.webkitConnection;
+    const getState = () => {
+        var _a, _b, _c, _d, _f, _g;
+        const conn = getConn();
+        return {
+            isOnline: navigator.onLine,
+            effectiveType: (_a = conn === null || conn === void 0 ? void 0 : conn.effectiveType) !== null && _a !== void 0 ? _a : null,
+            downlink: (_b = conn === null || conn === void 0 ? void 0 : conn.downlink) !== null && _b !== void 0 ? _b : null,
+            downlinkMax: (_c = conn === null || conn === void 0 ? void 0 : conn.downlinkMax) !== null && _c !== void 0 ? _c : null,
+            rtt: (_d = conn === null || conn === void 0 ? void 0 : conn.rtt) !== null && _d !== void 0 ? _d : null,
+            saveData: (_f = conn === null || conn === void 0 ? void 0 : conn.saveData) !== null && _f !== void 0 ? _f : null,
+            type: (_g = conn === null || conn === void 0 ? void 0 : conn.type) !== null && _g !== void 0 ? _g : null,
+        };
+    };
+    const [state, setState] = useState(Object.assign(Object.assign({}, getState()), { since: null }));
+    useEffect(() => {
+        var _a;
+        const update = () => setState(Object.assign(Object.assign({}, getState()), { since: new Date() }));
+        window.addEventListener('online', update);
+        window.addEventListener('offline', update);
+        (_a = getConn()) === null || _a === void 0 ? void 0 : _a.addEventListener('change', update);
+        return () => {
+            var _a;
+            window.removeEventListener('online', update);
+            window.removeEventListener('offline', update);
+            (_a = getConn()) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', update);
+        };
+    }, []);
+    return state;
+}
+/**
+ * Tracks the device screen orientation type and angle.
+ * Uses the ScreenOrientation API with a matchMedia fallback.
+ */
+export function useOrientation() {
+    const getState = () => {
+        const o = screen.orientation;
+        if (o) {
+            return {
+                type: o.type,
+                angle: o.angle,
+                isPortrait: o.type.startsWith('portrait'),
+                isLandscape: o.type.startsWith('landscape'),
+            };
+        }
+        const portrait = window.matchMedia('(orientation: portrait)').matches;
+        return {
+            type: null,
+            angle: 0,
+            isPortrait: portrait,
+            isLandscape: !portrait,
+        };
+    };
+    const [state, setState] = useState(getState);
+    useEffect(() => {
+        var _a;
+        const update = () => setState(getState());
+        (_a = screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('change', update);
+        const mq = window.matchMedia('(orientation: portrait)');
+        mq.addEventListener('change', update);
+        return () => {
+            var _a;
+            (_a = screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', update);
+            mq.removeEventListener('change', update);
+        };
+    }, []);
+    return state;
+}
+// ─── usePageVisibility ────────────────────────────────────────────────────────
+/**
+ * Returns true when the current browser tab is visible to the user.
+ * Wraps the Page Visibility API (document.visibilityState).
+ */
+export function usePageVisibility() {
+    const [isVisible, setIsVisible] = useState(typeof document !== 'undefined' ? document.visibilityState === 'visible' : true);
+    useEffect(() => {
+        const onChange = () => setIsVisible(document.visibilityState === 'visible');
+        document.addEventListener('visibilitychange', onChange);
+        return () => document.removeEventListener('visibilitychange', onChange);
+    }, []);
+    return isVisible;
+}
+/**
+ * Handles all pointer events at once (mouse, touch, stylus).
+ * Tracks every active pointer by its pointerId.
+ */
+export function usePointers() {
+    const [pointers, setPointers] = useState(new Map());
+    const upsert = useCallback((e) => {
+        setPointers(prev => new Map(prev).set(e.pointerId, {
+            pointerId: e.pointerId,
+            x: e.clientX,
+            y: e.clientY,
+            pressure: e.pressure,
+            type: e.pointerType,
+        }));
+    }, []);
+    const remove = useCallback((e) => {
+        setPointers(prev => {
+            const next = new Map(prev);
+            next.delete(e.pointerId);
+            return next;
+        });
+    }, []);
+    const containerProps = {
+        onPointerDown: upsert,
+        onPointerMove: upsert,
+        onPointerUp: remove,
+        onPointerCancel: remove,
+        onPointerLeave: remove,
+    };
+    return { pointers, activeCount: pointers.size, containerProps };
+}
+// ─── useRect ──────────────────────────────────────────────────────────────────
+/**
+ * Tracks the full bounding DOMRect of a ref'd element reactively.
+ * Re-measures on scroll and resize using a ResizeObserver.
+ */
+export function useRect() {
+    const ref = useRef(null);
+    const [rect, setRect] = useState(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const measure = () => setRect(el.getBoundingClientRect());
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        window.addEventListener('scroll', measure, { passive: true });
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('scroll', measure);
+        };
+    });
+    return [ref, rect];
+}
+/**
+ * Uses the Screen Capture API (getDisplayMedia) to capture the screen,
+ * a specific window, or the current browser tab.
+ */
+export function useScreenCapture() {
+    const [stream, setStream] = useState(null);
+    const [isCapturing, setIsCapturing] = useState(false);
+    const [error, setError] = useState(null);
+    const streamRef = useRef(null);
+    const stop = useCallback(() => {
+        var _a;
+        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach(t => t.stop());
+        streamRef.current = null;
+        setStream(null);
+        setIsCapturing(false);
+    }, []);
+    const start = useCallback(async (options) => {
+        var _a;
+        setError(null);
+        try {
+            const s = await navigator.mediaDevices.getDisplayMedia(options !== null && options !== void 0 ? options : { video: true, audio: false });
+            streamRef.current = s;
+            setStream(s);
+            setIsCapturing(true);
+            (_a = s.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.addEventListener('ended', stop);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error('Screen capture failed'));
+        }
+    }, [stop]);
+    useEffect(() => () => stop(), [stop]);
+    return { stream, isCapturing, error, start, stop };
+}
+/**
+ * Returns true when the window (or a given element) has been scrolled
+ * past the specified pixel threshold.
+ */
+export function useScrollThreshold(options = {}) {
+    const { threshold = 100, element } = options;
+    const [isPast, setIsPast] = useState(false);
+    useEffect(() => {
+        var _a;
+        const target = (_a = element === null || element === void 0 ? void 0 : element.current) !== null && _a !== void 0 ? _a : window;
+        const check = () => {
+            const scrollY = (element === null || element === void 0 ? void 0 : element.current)
+                ? element.current.scrollTop
+                : window.scrollY;
+            setIsPast(scrollY > threshold);
+        };
+        check();
+        target.addEventListener('scroll', check, { passive: true });
+        return () => target.removeEventListener('scroll', check);
+    }, [threshold, element]);
+    return isPast;
+}
+/**
+ * Returns the currently selected text along with its bounding DOMRect.
+ * Updates whenever the user changes their text selection.
+ */
+export function useSelection(element) {
+    const [info, setInfo] = useState({ text: '', rect: null, isCollapsed: true });
+    useEffect(() => {
+        const update = () => {
+            const sel = window.getSelection();
+            if (!sel || sel.isCollapsed) {
+                setInfo({ text: '', rect: null, isCollapsed: true });
+                return;
+            }
+            if ((element === null || element === void 0 ? void 0 : element.current) && !element.current.contains(sel.anchorNode)) {
+                setInfo({ text: '', rect: null, isCollapsed: true });
+                return;
+            }
+            const range = sel.getRangeAt(0);
+            setInfo({
+                text: sel.toString(),
+                rect: range.getBoundingClientRect(),
+                isCollapsed: false,
+            });
+        };
+        document.addEventListener('selectionchange', update);
+        return () => document.removeEventListener('selectionchange', update);
+    }, [element]);
+    return info;
+}
+/**
+ * Detects swipe gestures (left/right/up/down) on a touch surface.
+ * Fires directional callbacks when the swipe exceeds the pixel threshold.
+ */
+export function useSwiping(options = {}) {
+    const { threshold = 50, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown } = options;
+    const startRef = useRef(null);
+    const [state, setState] = useState({
+        isSwiping: false,
+        direction: null,
+        deltaX: 0,
+        deltaY: 0,
+        distance: 0,
+    });
+    const handlers = {
+        onTouchStart: useCallback((e) => {
+            const t = e.touches[0];
+            startRef.current = { x: t.clientX, y: t.clientY };
+            setState({ isSwiping: false, direction: null, deltaX: 0, deltaY: 0, distance: 0 });
+        }, []),
+        onTouchMove: useCallback((e) => {
+            if (!startRef.current)
+                return;
+            const t = e.touches[0];
+            const dx = t.clientX - startRef.current.x;
+            const dy = t.clientY - startRef.current.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const direction = Math.abs(dx) > Math.abs(dy)
+                ? dx > 0 ? 'right' : 'left'
+                : dy > 0 ? 'down' : 'up';
+            setState({ isSwiping: true, direction, deltaX: dx, deltaY: dy, distance });
+        }, []),
+        onTouchEnd: useCallback((_e) => {
+            setState(prev => {
+                if (prev.distance >= threshold) {
+                    if (prev.direction === 'left')
+                        onSwipeLeft === null || onSwipeLeft === void 0 ? void 0 : onSwipeLeft();
+                    else if (prev.direction === 'right')
+                        onSwipeRight === null || onSwipeRight === void 0 ? void 0 : onSwipeRight();
+                    else if (prev.direction === 'up')
+                        onSwipeUp === null || onSwipeUp === void 0 ? void 0 : onSwipeUp();
+                    else if (prev.direction === 'down')
+                        onSwipeDown === null || onSwipeDown === void 0 ? void 0 : onSwipeDown();
+                }
+                return Object.assign(Object.assign({}, prev), { isSwiping: false });
+            });
+            startRef.current = null;
+        }, [threshold, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown]),
+    };
+    return { state, handlers };
+}
+/**
+ * Runs a function in a Web Worker. The workerFn is serialized and executed
+ * in a background thread. Pass data via postMessage; receive results via lastMessage.
+ *
+ * The workerFn receives a MessageEvent and should call postMessage() to send results back.
+ */
+export function useWorker(workerFn) {
+    const [lastMessage, setLastMessage] = useState(null);
+    const [error, setError] = useState(null);
+    const [isReady, setIsReady] = useState(false);
+    const workerRef = useRef(null);
+    useEffect(() => {
+        const blob = new Blob([`self.onmessage = ${workerFn.toString()}`], { type: 'application/javascript' });
+        const url = URL.createObjectURL(blob);
+        const worker = new Worker(url);
+        workerRef.current = worker;
+        setIsReady(true);
+        worker.onmessage = (e) => setLastMessage(e.data);
+        worker.onerror = (e) => setError(e);
+        return () => {
+            worker.terminate();
+            URL.revokeObjectURL(url);
+        };
+    }, []);
+    const postMessage = useCallback((data) => {
+        var _a;
+        (_a = workerRef.current) === null || _a === void 0 ? void 0 : _a.postMessage(data);
+    }, []);
+    const terminate = useCallback(() => {
+        var _a;
+        (_a = workerRef.current) === null || _a === void 0 ? void 0 : _a.terminate();
+        workerRef.current = null;
+        setIsReady(false);
+    }, []);
+    return { postMessage, lastMessage, error, isReady, terminate };
+}