@hh.ru/magritte-ui-nav-bar 1.0.1

package/internal/useScrollAdapter.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+import { type MotionValue } from 'motion/react';
+export interface ScrollAdapter {
+    getMaxScrollTop: () => number;
+    getScrollTop: () => number;
+    setScrollTop: (pos: number) => void;
+    onScroll: (cb: VoidFunction) => VoidFunction;
+    onTouchStart: (cb: VoidFunction) => VoidFunction;
+    onTouchEnd: (cb: VoidFunction) => VoidFunction;
+    onResize: (cb: VoidFunction) => VoidFunction;
+    scrollContainer: RefObject<Element>;
+    hasTouchSupport: () => boolean;
+    breakScrollSession: VoidFunction;
+}
+export declare const useScrollAdapter: (elementRef: RefObject<HTMLElement>) => [ScrollAdapter, MotionValue<number>];

package/internal/useScrollAdapter.js

@@ -0,0 +1,116 @@
+import './../index.css';
+import { useRef, useEffect, useLayoutEffect } from 'react';
+import { useMotionValue } from 'motion/react';
+import { useScrollContext } from '@hh.ru/magritte-internal-custom-scroll';
+import { useInitOnce, findScrollContainer } from './utils.js';
+
+const createSubFn = (store) => (handler) => {
+    store.add(handler);
+    return () => store.delete(handler);
+};
+const useScrollAdapter = (elementRef) => {
+    const scrollContext = useScrollContext();
+    const scrollContainerRef = useRef();
+    const scrollPosition = useMotionValue(0);
+    const mediaQueryRef = useRef(null);
+    const scrollContainerElRef = useRef(null);
+    const [subscriptionsManager, notifier] = useInitOnce(() => {
+        const touchStartHandlers = new Set();
+        const touchEndHandlers = new Set();
+        const scrollHandlers = new Set();
+        const resizeHandlers = new Set();
+        const subscriptionsManager = {
+            onTouchStart: createSubFn(touchStartHandlers),
+            onTouchEnd: createSubFn(touchEndHandlers),
+            onScroll: createSubFn(scrollHandlers),
+            onResize: createSubFn(resizeHandlers),
+        };
+        const notifier = {
+            notifyTouchStart: () => touchStartHandlers.forEach((fn) => fn()),
+            notifyTouchEnd: () => touchEndHandlers.forEach((fn) => fn()),
+            notifyScroll: () => scrollHandlers.forEach((fn) => fn()),
+            notifyResize: () => resizeHandlers.forEach((fn) => fn()),
+        };
+        return [subscriptionsManager, notifier];
+    });
+    useEffect(() => {
+        if (window && 'matchMedia' in window) {
+            mediaQueryRef.current = window.matchMedia('(pointer:coarse)');
+        }
+    }, []);
+    const scrollAdapter = useInitOnce(() => {
+        const hasTouchSupport = () => mediaQueryRef.current?.matches ?? false;
+        if (scrollContext) {
+            const subscriptions = [
+                scrollContext.onTouchStart(notifier.notifyTouchStart),
+                scrollContext.onTouchEnd(notifier.notifyTouchEnd),
+                scrollContext.onScroll(notifier.notifyScroll),
+            ];
+            return {
+                ...scrollContext,
+                scrollContainer: scrollContext.wrapperRef,
+                ...subscriptionsManager,
+                unsubscribe: () => subscriptions.forEach((fn) => fn()),
+                hasTouchSupport,
+                // не нужно для ненативного скролла
+                breakScrollSession: () => void 0,
+            };
+        }
+        return {
+            getMaxScrollTop: () => {
+                if (!scrollContainerRef.current) {
+                    return 0;
+                }
+                const height = scrollContainerRef.current.mode === 'window'
+                    ? scrollContainerRef.current.infoProvider.clientHeight
+                    : scrollContainerRef.current.infoProvider.offsetHeight;
+                return scrollContainerRef.current.infoProvider.scrollHeight - height;
+            },
+            getScrollTop: () => scrollContainerRef.current ? Math.max(scrollContainerRef.current.infoProvider.scrollTop, 0) : 0,
+            setScrollTop: (pos) => {
+                if (scrollContainerRef.current) {
+                    scrollContainerRef.current.infoProvider.scrollTop = pos;
+                }
+            },
+            scrollContainer: scrollContainerElRef,
+            ...subscriptionsManager,
+            unsubscribe: () => void 0,
+            breakScrollSession: () => {
+                if (scrollContainerRef.current?.mode !== 'element' || !scrollContainerElRef.current) {
+                    return;
+                }
+                const element = scrollContainerElRef.current;
+                const overflowY = element.style.overflowY;
+                element.style.overflowY = 'hidden';
+                // force layout
+                void element.offsetHeight;
+                element.style.overflowY = overflowY;
+            },
+            hasTouchSupport,
+        };
+    });
+    useLayoutEffect(() => {
+        const subscriptions = [];
+        if (!scrollContext && elementRef.current) {
+            scrollContainerRef.current = findScrollContainer(elementRef.current);
+            const subscriptionsController = new AbortController();
+            const signal = subscriptionsController.signal;
+            const eventsProvider = scrollContainerRef.current.eventsProvider;
+            eventsProvider.addEventListener('scroll', notifier.notifyScroll, { passive: true, signal });
+            eventsProvider.addEventListener('touchstart', notifier.notifyTouchStart, { passive: true, signal });
+            eventsProvider.addEventListener('touchend', notifier.notifyTouchEnd, { passive: true, signal });
+            scrollContainerElRef.current = scrollContainerRef.current.infoProvider;
+            subscriptions.push(() => subscriptionsController.abort());
+        }
+        if (scrollAdapter.scrollContainer.current) {
+            const observer = new ResizeObserver(notifier.notifyResize);
+            observer.observe(scrollAdapter.scrollContainer.current);
+            subscriptions.push(() => observer.disconnect());
+        }
+        return () => subscriptions.forEach((fn) => fn());
+    }, [notifier, elementRef, scrollContext, scrollAdapter, scrollPosition]);
+    return [scrollAdapter, scrollPosition];
+};
+
+export { useScrollAdapter };
+//# sourceMappingURL=useScrollAdapter.js.map

package/internal/useScrollAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollAdapter.js","sources":["../../src/internal/useScrollAdapter.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useLayoutEffect, useRef, type RefObject } from 'react';\nimport { type MotionValue, useMotionValue } from 'motion/react';\n\nimport { useScrollContext } from '@hh.ru/magritte-internal-custom-scroll';\nimport { findScrollContainer, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\nconst createSubFn = (store: Set<VoidFunction>) => (handler: VoidFunction) => {\n    store.add(handler);\n    return () => store.delete(handler);\n};\n\nexport interface ScrollAdapter {\n    getMaxScrollTop: () => number;\n    getScrollTop: () => number;\n    setScrollTop: (pos: number) => void;\n    onScroll: (cb: VoidFunction) => VoidFunction;\n    onTouchStart: (cb: VoidFunction) => VoidFunction;\n    onTouchEnd: (cb: VoidFunction) => VoidFunction;\n    onResize: (cb: VoidFunction) => VoidFunction;\n    scrollContainer: RefObject<Element>;\n    hasTouchSupport: () => boolean;\n    breakScrollSession: VoidFunction;\n}\n\nexport const useScrollAdapter = (elementRef: RefObject<HTMLElement>): [ScrollAdapter, MotionValue<number>] => {\n    const scrollContext = useScrollContext();\n    const scrollContainerRef = useRef<ReturnType<typeof findScrollContainer>>();\n    const scrollPosition = useMotionValue(0);\n    const mediaQueryRef: MutableRefObject<MediaQueryList | null> = useRef(null);\n    const scrollContainerElRef: MutableRefObject<null | Element> = useRef(null);\n\n    const [subscriptionsManager, notifier] = useInitOnce(() => {\n        const touchStartHandlers = new Set<VoidFunction>();\n        const touchEndHandlers = new Set<VoidFunction>();\n        const scrollHandlers = new Set<VoidFunction>();\n        const resizeHandlers = new Set<VoidFunction>();\n        const subscriptionsManager = {\n            onTouchStart: createSubFn(touchStartHandlers),\n            onTouchEnd: createSubFn(touchEndHandlers),\n            onScroll: createSubFn(scrollHandlers),\n            onResize: createSubFn(resizeHandlers),\n        };\n\n        const notifier = {\n            notifyTouchStart: () => touchStartHandlers.forEach((fn) => fn()),\n            notifyTouchEnd: () => touchEndHandlers.forEach((fn) => fn()),\n            notifyScroll: () => scrollHandlers.forEach((fn) => fn()),\n            notifyResize: () => resizeHandlers.forEach((fn) => fn()),\n        };\n\n        return [subscriptionsManager, notifier];\n    });\n\n    useEffect(() => {\n        if (window && 'matchMedia' in window) {\n            mediaQueryRef.current = window.matchMedia('(pointer:coarse)');\n        }\n    }, []);\n\n    const scrollAdapter = useInitOnce(() => {\n        const hasTouchSupport = () => mediaQueryRef.current?.matches ?? false;\n        if (scrollContext) {\n            const subscriptions = [\n                scrollContext.onTouchStart(notifier.notifyTouchStart),\n                scrollContext.onTouchEnd(notifier.notifyTouchEnd),\n                scrollContext.onScroll(notifier.notifyScroll),\n            ];\n            return {\n                ...scrollContext,\n                scrollContainer: scrollContext.wrapperRef,\n                ...subscriptionsManager,\n                unsubscribe: () => subscriptions.forEach((fn) => fn()),\n                hasTouchSupport,\n                // не нужно для ненативного скролла\n                breakScrollSession: (): void => void 0,\n            };\n        }\n        return {\n            getMaxScrollTop: () => {\n                if (!scrollContainerRef.current) {\n                    return 0;\n                }\n\n                const height =\n                    scrollContainerRef.current.mode === 'window'\n                        ? scrollContainerRef.current.infoProvider.clientHeight\n                        : scrollContainerRef.current.infoProvider.offsetHeight;\n                return scrollContainerRef.current.infoProvider.scrollHeight - height;\n            },\n            getScrollTop: () =>\n                scrollContainerRef.current ? Math.max(scrollContainerRef.current.infoProvider.scrollTop, 0) : 0,\n            setScrollTop: (pos: number) => {\n                if (scrollContainerRef.current) {\n                    scrollContainerRef.current.infoProvider.scrollTop = pos;\n                }\n            },\n            scrollContainer: scrollContainerElRef,\n            ...subscriptionsManager,\n            unsubscribe: (): void => void 0,\n            breakScrollSession: () => {\n                if (scrollContainerRef.current?.mode !== 'element' || !scrollContainerElRef.current) {\n                    return;\n                }\n\n                const element = scrollContainerElRef.current as HTMLElement;\n                const overflowY = element.style.overflowY;\n                element.style.overflowY = 'hidden';\n                // force layout\n                void element.offsetHeight;\n                element.style.overflowY = overflowY;\n            },\n            hasTouchSupport,\n        };\n    }) satisfies ScrollAdapter;\n\n    useLayoutEffect(() => {\n        const subscriptions: VoidFunction[] = [];\n        if (!scrollContext && elementRef.current) {\n            scrollContainerRef.current = findScrollContainer(elementRef.current);\n            const subscriptionsController = new AbortController();\n            const signal = subscriptionsController.signal;\n            const eventsProvider = scrollContainerRef.current.eventsProvider;\n            eventsProvider.addEventListener('scroll', notifier.notifyScroll, { passive: true, signal });\n            eventsProvider.addEventListener('touchstart', notifier.notifyTouchStart, { passive: true, signal });\n            eventsProvider.addEventListener('touchend', notifier.notifyTouchEnd, { passive: true, signal });\n            scrollContainerElRef.current = scrollContainerRef.current.infoProvider;\n            subscriptions.push(() => subscriptionsController.abort());\n        }\n\n        if (scrollAdapter.scrollContainer.current) {\n            const observer = new ResizeObserver(notifier.notifyResize);\n            observer.observe(scrollAdapter.scrollContainer.current);\n            subscriptions.push(() => observer.disconnect());\n        }\n\n        return () => subscriptions.forEach((fn) => fn());\n    }, [notifier, elementRef, scrollContext, scrollAdapter, scrollPosition]);\n\n    return [scrollAdapter, scrollPosition];\n};\n"],"names":[],"mappings":"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"}

package/internal/useSnapScroll.d.ts

@@ -0,0 +1,6 @@
+import { type MotionValue } from 'motion/react';
+import { type ScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';
+export declare const useSnapScroll: (scrollPosition: MotionValue<number>, totalAnimationProgress: MotionValue<number>, scrollAdapter: ScrollAdapter, getAnimationStops: () => {
+    top: number;
+    bottom: number;
+}, enableScrollSnap: boolean) => VoidFunction;

package/internal/useSnapScroll.js

@@ -0,0 +1,148 @@
+import './../index.css';
+import { useRef, useEffect } from 'react';
+import { useMotionValue, animate } from 'motion/react';
+import { useActualRef, useInitOnce } from './utils.js';
+
+const AUTOSCROLL_SPEED = 1600; // px/sec
+const SETTLE_FRAMES_COUNT = 10;
+const useSnapScroll = (scrollPosition, totalAnimationProgress, scrollAdapter, getAnimationStops, enableScrollSnap) => {
+    const scrollAnimationController = useMotionValue(scrollPosition.get());
+    const prevStopRef = useRef(scrollAdapter.getScrollTop() === getAnimationStops().top ? 'top' : 'bottom');
+    const touchedRef = useRef(false);
+    const lastDirectionRef = useRef(null);
+    const animationControlsRef = useRef(null);
+    const enableScrollSnapRef = useActualRef(enableScrollSnap);
+    const prevScrollPositionRef = useRef(0);
+    const stopAnimation = useInitOnce(() => () => {
+        if (animationControlsRef.current) {
+            animationControlsRef.current.stop();
+            animationControlsRef.current = null;
+        }
+    });
+    const snapScroll = useInitOnce(() => () => {
+        if (touchedRef.current || animationControlsRef.current || !enableScrollSnapRef.current) {
+            return;
+        }
+        const stops = getAnimationStops();
+        const target = lastDirectionRef.current === null ? prevStopRef.current : lastDirectionRef.current;
+        const targetPos = stops[target];
+        const currentPos = scrollAdapter.getScrollTop();
+        // за границами анимации навбара, т.е. он или полностью раскрыт или схлопнут
+        if (currentPos >= stops.top || currentPos <= stops.bottom) {
+            return;
+        }
+        // ios safari не предоставляет достаточно данных чтобы точно определить что пользователь перестал
+        // взаимодействовать со страницей, поэтому мы принимаем решение о запуске анимации скролла по косвенному
+        // признаку - отсутствие события скролл в течение SETTLE_FRAMES_COUNT.
+        // Однако в случае если пользователь поскроллил страницу и задержал палец на экране анимация тоже будет
+        // запущена. Если после этого положение пальца на экране изменится скролл моментально вернется к положению
+        // которое было до анимации, после чего снова будет запущена анимация и так по кругу.
+        // Единственное что тут можно сделать - после запуска анимации прекратить "скролл сессию", чтобы при движении
+        // пальца позиция скролла не менялась до начала слежующей скролл сессии. К сожалению это работает только
+        // если скролл происходит в каком то контейнере. Если же скроллится вся страница, то скролл сессию нельзя
+        // разорвать без видимых для пользователя изменений в лейауте.
+        scrollAdapter.breakScrollSession();
+        scrollAnimationController.jump(currentPos);
+        prevScrollPositionRef.current = currentPos;
+        const controls = animate(scrollAnimationController, targetPos, {
+            duration: Math.abs(scrollAnimationController.get() - targetPos) / AUTOSCROLL_SPEED,
+            ease: 'easeOut',
+        });
+        animationControlsRef.current = controls;
+        controls
+            .then(() => {
+            lastDirectionRef.current = null;
+            prevStopRef.current = target;
+            animationControlsRef.current = null;
+        })
+            .catch(() => {
+            prevStopRef.current = target;
+            animationControlsRef.current = null;
+        });
+    });
+    const checkSettled = useInitOnce(() => {
+        let frames = 0;
+        let run = false;
+        return () => {
+            frames = SETTLE_FRAMES_COUNT;
+            if (run) {
+                return;
+            }
+            run = true;
+            const step = () => {
+                frames -= 1;
+                if (frames === 0) {
+                    run = false;
+                    snapScroll();
+                    return;
+                }
+                requestAnimationFrame(step);
+            };
+            requestAnimationFrame(step);
+        };
+    });
+    const onTouchEnd = useInitOnce(() => () => {
+        touchedRef.current = false;
+        stopAnimation();
+        checkSettled();
+    });
+    useEffect(() => {
+        const subscriptions = [
+            scrollAdapter.onTouchStart(() => {
+                stopAnimation();
+                touchedRef.current = true;
+            }),
+            scrollAdapter.onTouchEnd(onTouchEnd),
+            scrollAdapter.onScroll(() => {
+                const scrollTop = scrollAdapter.getScrollTop();
+                const dir = Math.sign(scrollTop - prevScrollPositionRef.current);
+                if (animationControlsRef.current) {
+                    // ios safari шлет только первый touchstart/touchend в случае скролла который происходит
+                    // в несколько жестов. Т.е. на ios мы не можем положиться на touchedRef для прерывания анимации.
+                    // Вместо этого мы проверяем не изменилось ли направление скролла и не "перескочил" ли скролл
+                    // значение анимируемой переменной в направлении скролла. Оба этих факта говорят о вмешательстве
+                    // пользователя в процесс скролла, а значит надо прервать анимацию. Можно было бы сделать
+                    // проще и проверять расстояние между значением анимируемой переменной и фактическим положением
+                    // скролла, но сафари после установки scrollTop может прислать событие со старым значением
+                    // scrollTop, и только потом с новым, что делает такой подход неприменимым.
+                    const isDirChanged = dir !== 0 &&
+                        lastDirectionRef.current &&
+                        (lastDirectionRef.current === 'top' ? dir < 0 : dir > 0);
+                    const isOutOfRange = lastDirectionRef.current &&
+                        (lastDirectionRef.current === 'top'
+                            ? scrollTop > scrollAnimationController.get() + 1
+                            : scrollTop < scrollAnimationController.get() - 1);
+                    if (isDirChanged || isOutOfRange) {
+                        stopAnimation();
+                    }
+                }
+                prevScrollPositionRef.current = scrollTop;
+                // Не обновляем MotionValue вместе со скроллом если происходит анимация скролла
+                // потому что ios safari шлет события скролла с низкой частотой, из-за чего вся анимация может
+                // выглядеть дерганно. Вместо этого ниже есть прямая связь scrollAnimationController -> scrollPosition
+                !animationControlsRef.current && scrollPosition.set(scrollTop);
+                if (dir !== 0) {
+                    lastDirectionRef.current = dir > 0 ? 'top' : 'bottom';
+                }
+            }),
+            totalAnimationProgress.on('change', checkSettled),
+            scrollAnimationController.on('change', (value) => {
+                scrollAdapter.setScrollTop(value);
+                scrollPosition.set(value);
+            }),
+        ];
+        return () => subscriptions.forEach((unsubscribe) => unsubscribe());
+    }, [
+        checkSettled,
+        scrollAdapter,
+        scrollPosition,
+        onTouchEnd,
+        scrollAnimationController,
+        stopAnimation,
+        totalAnimationProgress,
+    ]);
+    return snapScroll;
+};
+
+export { useSnapScroll };
+//# sourceMappingURL=useSnapScroll.js.map

package/internal/useSnapScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnapScroll.js","sources":["../../src/internal/useSnapScroll.ts"],"sourcesContent":["import { type MutableRefObject, useEffect, useRef } from 'react';\nimport { useMotionValue, animate, type MotionValue, AnimationPlaybackControlsWithThen } from 'motion/react';\n\nimport { type ScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { useActualRef, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\nconst AUTOSCROLL_SPEED = 1600; // px/sec\nconst SETTLE_FRAMES_COUNT = 10;\n\nexport const useSnapScroll = (\n    scrollPosition: MotionValue<number>,\n    totalAnimationProgress: MotionValue<number>,\n    scrollAdapter: ScrollAdapter,\n    getAnimationStops: () => { top: number; bottom: number },\n    enableScrollSnap: boolean\n): VoidFunction => {\n    const scrollAnimationController = useMotionValue(scrollPosition.get());\n    const prevStopRef = useRef<'top' | 'bottom'>(\n        scrollAdapter.getScrollTop() === getAnimationStops().top ? 'top' : 'bottom'\n    );\n    const touchedRef = useRef(false);\n    const lastDirectionRef: MutableRefObject<'top' | 'bottom' | null> = useRef(null);\n    const animationControlsRef: MutableRefObject<AnimationPlaybackControlsWithThen | null> = useRef(null);\n    const enableScrollSnapRef = useActualRef(enableScrollSnap);\n    const prevScrollPositionRef = useRef(0);\n\n    const stopAnimation = useInitOnce(() => () => {\n        if (animationControlsRef.current) {\n            animationControlsRef.current.stop();\n            animationControlsRef.current = null;\n        }\n    });\n\n    const snapScroll = useInitOnce(() => () => {\n        if (touchedRef.current || animationControlsRef.current || !enableScrollSnapRef.current) {\n            return;\n        }\n\n        const stops = getAnimationStops();\n        const target = lastDirectionRef.current === null ? prevStopRef.current : lastDirectionRef.current;\n        const targetPos = stops[target];\n        const currentPos = scrollAdapter.getScrollTop();\n\n        // за границами анимации навбара, т.е. он или полностью раскрыт или схлопнут\n        if (currentPos >= stops.top || currentPos <= stops.bottom) {\n            return;\n        }\n\n        // ios safari не предоставляет достаточно данных чтобы точно определить что пользователь перестал\n        // взаимодействовать со страницей, поэтому мы принимаем решение о запуске анимации скролла по косвенному\n        // признаку - отсутствие события скролл в течение SETTLE_FRAMES_COUNT.\n        // Однако в случае если пользователь поскроллил страницу и задержал палец на экране анимация тоже будет\n        // запущена. Если после этого положение пальца на экране изменится скролл моментально вернется к положению\n        // которое было до анимации, после чего снова будет запущена анимация и так по кругу.\n        // Единственное что тут можно сделать - после запуска анимации прекратить \"скролл сессию\", чтобы при движении\n        // пальца позиция скролла не менялась до начала слежующей скролл сессии. К сожалению это работает только\n        // если скролл происходит в каком то контейнере. Если же скроллится вся страница, то скролл сессию нельзя\n        // разорвать без видимых для пользователя изменений в лейауте.\n        scrollAdapter.breakScrollSession();\n        scrollAnimationController.jump(currentPos);\n        prevScrollPositionRef.current = currentPos;\n        const controls = animate(scrollAnimationController, targetPos, {\n            duration: Math.abs(scrollAnimationController.get() - targetPos) / AUTOSCROLL_SPEED,\n            ease: 'easeOut',\n        });\n        animationControlsRef.current = controls;\n        controls\n            .then(() => {\n                lastDirectionRef.current = null;\n                prevStopRef.current = target;\n                animationControlsRef.current = null;\n            })\n            .catch(() => {\n                prevStopRef.current = target;\n                animationControlsRef.current = null;\n            });\n    });\n\n    const checkSettled = useInitOnce(() => {\n        let frames = 0;\n        let run = false;\n        return () => {\n            frames = SETTLE_FRAMES_COUNT;\n            if (run) {\n                return;\n            }\n\n            run = true;\n            const step = () => {\n                frames -= 1;\n                if (frames === 0) {\n                    run = false;\n                    snapScroll();\n                    return;\n                }\n\n                requestAnimationFrame(step);\n            };\n\n            requestAnimationFrame(step);\n        };\n    });\n\n    const onTouchEnd = useInitOnce(() => () => {\n        touchedRef.current = false;\n        stopAnimation();\n        checkSettled();\n    });\n\n    useEffect(() => {\n        const subscriptions = [\n            scrollAdapter.onTouchStart(() => {\n                stopAnimation();\n                touchedRef.current = true;\n            }),\n            scrollAdapter.onTouchEnd(onTouchEnd),\n            scrollAdapter.onScroll(() => {\n                const scrollTop = scrollAdapter.getScrollTop();\n                const dir = Math.sign(scrollTop - prevScrollPositionRef.current);\n                if (animationControlsRef.current) {\n                    // ios safari шлет только первый touchstart/touchend в случае скролла который происходит\n                    // в несколько жестов. Т.е. на ios мы не можем положиться на touchedRef для прерывания анимации.\n                    // Вместо этого мы проверяем не изменилось ли направление скролла и не \"перескочил\" ли скролл\n                    // значение анимируемой переменной в направлении скролла. Оба этих факта говорят о вмешательстве\n                    // пользователя в процесс скролла, а значит надо прервать анимацию. Можно было бы сделать\n                    // проще и проверять расстояние между значением анимируемой переменной и фактическим положением\n                    // скролла, но сафари после установки scrollTop может прислать событие со старым значением\n                    // scrollTop, и только потом с новым, что делает такой подход неприменимым.\n                    const isDirChanged =\n                        dir !== 0 &&\n                        lastDirectionRef.current &&\n                        (lastDirectionRef.current === 'top' ? dir < 0 : dir > 0);\n                    const isOutOfRange =\n                        lastDirectionRef.current &&\n                        (lastDirectionRef.current === 'top'\n                            ? scrollTop > scrollAnimationController.get() + 1\n                            : scrollTop < scrollAnimationController.get() - 1);\n                    if (isDirChanged || isOutOfRange) {\n                        stopAnimation();\n                    }\n                }\n                prevScrollPositionRef.current = scrollTop;\n                // Не обновляем MotionValue вместе со скроллом если происходит анимация скролла\n                // потому что ios safari шлет события скролла с низкой частотой, из-за чего вся анимация может\n                // выглядеть дерганно. Вместо этого ниже есть прямая связь scrollAnimationController -> scrollPosition\n                !animationControlsRef.current && scrollPosition.set(scrollTop);\n                if (dir !== 0) {\n                    lastDirectionRef.current = dir > 0 ? 'top' : 'bottom';\n                }\n            }),\n            totalAnimationProgress.on('change', checkSettled),\n            scrollAnimationController.on('change', (value) => {\n                scrollAdapter.setScrollTop(value);\n                scrollPosition.set(value);\n            }),\n        ];\n\n        return () => subscriptions.forEach((unsubscribe) => unsubscribe());\n    }, [\n        checkSettled,\n        scrollAdapter,\n        scrollPosition,\n        onTouchEnd,\n        scrollAnimationController,\n        stopAnimation,\n        totalAnimationProgress,\n    ]);\n\n    return snapScroll;\n};\n"],"names":[],"mappings":"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"}

package/internal/useSyncMotionValue.d.ts

@@ -0,0 +1,2 @@
+import { type MotionValue } from 'motion/react';
+export declare const useSyncMotionValue: (source: MotionValue<number>, destination?: MotionValue<number>) => void;

package/internal/useSyncMotionValue.js

@@ -0,0 +1,9 @@
+import './../index.css';
+import { useEffect } from 'react';
+
+const useSyncMotionValue = (source, destination) => {
+    useEffect(() => (destination ? source.on('change', (value) => destination.set(value)) : void 0), [source, destination]);
+};
+
+export { useSyncMotionValue };
+//# sourceMappingURL=useSyncMotionValue.js.map

package/internal/useSyncMotionValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSyncMotionValue.js","sources":["../../src/internal/useSyncMotionValue.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { type MotionValue } from 'motion/react';\n\nexport const useSyncMotionValue = (source: MotionValue<number>, destination?: MotionValue<number>): void => {\n    useEffect(\n        () => (destination ? source.on('change', (value) => destination.set(value)) : void 0),\n        [source, destination]\n    );\n};\n"],"names":[],"mappings":";;MAGa,kBAAkB,GAAG,CAAC,MAA2B,EAAE,WAAiC,KAAU;AACvG,IAAA,SAAS,CACL,OAAO,WAAW,GAAG,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAK,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EACrF,CAAC,MAAM,EAAE,WAAW,CAAC,CACxB,CAAC;AACN;;;;"}

package/internal/utils.d.ts

@@ -0,0 +1,207 @@
+import { type MutableRefObject } from 'react';
+import type { MotionValue } from 'motion';
+import { KeyedSubscriptions } from '@hh.ru/magritte-ui-nav-bar/internal/KeyedSubscriptions';
+import { ScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';
+export declare const lerp: (from: number, to: number, progress: number) => number;
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Создаёт функцию преобразования значений из одного числового интервала (домен) в другой (образ).
+ *
+ * @param domain Интервал входных значений [min, max].
+ * @param image Интервал выходных значений [min, max].
+ *
+ * @returns Функция, принимающая число из диапазона `domain`, преобразующая его в диапазон `image`
+ *          с линейной интерполяцией.
+ */
+export declare const remap: (domain: [number, number], image: [number, number]) => (value: number) => number;
+export declare const useInitOnce: <T>(fn: () => T) => T;
+/**
+ * Возвращает «одноразовый» планировщик, который выполнит `fn` в следующем
+ * тике **микрозадач** (через `Promise.resolve().then(...)`). Повторные вызовы
+ * до момента выполнения схлопываются в один запуск.
+ *
+ * Семантика:
+ * - Первый вызов ставит `fn` в очередь микрозадач; последующие вызовы до
+ *   выполнения игнорируются.
+ * - После выполнения `fn` «засов» снимается — можно планировать снова.
+ * - Ошибки из `fn` перебрасываются в следующий макротик (через `setTimeout`),
+ *   чтобы они были видны в DevTools и не превращались в «unhandled rejection».
+ *
+ * Когда использовать:
+ * - Нужно объединить множество синхронных триггеров в одно действие,
+ *   выполнив его **раньше таймеров/`requestAnimationFrame`**.
+ * - Не требуется ожидать стабилизации DOM/лейаута (микрозадачи идут до кадра).
+ *
+ * @param fn — колбэк, который будет выполнен в следующем тике микрозадач.
+ * @returns Функция-триггер: вызов ставит `fn` в очередь 1 раз на тик микрозадач.
+ *
+ * @example
+ * const trigger = scheduleMicro(recompute);
+ * trigger(); // запланирован один запуск
+ * trigger(); // проигнорирован (уже запланировано)
+ * // `recompute` выполнится один раз на следующем тике микрозадач
+ */
+export declare const scheduleMicro: (fn: VoidFunction) => () => void;
+/**
+ * Возвращает «одноразовый» планировщик, который выполнит `fn` в следующем
+ * тике **макрозадач** (через `setTimeout(0)`). Повторные вызовы до момента
+ * выполнения схлопываются в один запуск.
+ *
+ * Семантика:
+ * - Первый вызов ставит `fn` в `setTimeout`; последующие вызовы до выполнения
+ *   игнорируются.
+ * - После выполнения `fn` «засов» снимается — можно планировать снова.
+ * - Ошибки из `fn` всплывут как непойманные ошибки из обработчика таймера.
+ *
+ * Когда использовать:
+ * - Нужно отложить выполнение **после** опустошения очереди микрозадач
+ *   (т.е. позже, чем `scheduleMicro`), часто позволяя браузеру между делом
+ *   подготовить кадр/перерисовку.
+ *
+ * @param fn — колбэк, который будет выполнен в следующем тике макрозадач.
+ * @returns Функция-триггер: вызов ставит `fn` в очередь 1 раз на тик таймера.
+ *
+ * @example
+ * const trigger = scheduleMacro(flushQueue);
+ * trigger(); // запланирован один таймер
+ * trigger(); // проигнорирован до выполнения `flushQueue`
+ */
+export declare const scheduleMacro: (fn: VoidFunction) => VoidFunction;
+/**
+ * Планировщик для «сбора метрик» на основе микрозадач: откладывает выполнение `fn`
+ * до момента, когда серия частых вызовов завершится, и запускает `fn` ровно один раз.
+ *
+ * Идея:
+ * - Первый вызов добавляет «запас» из двух тиков микрозадач; каждый следующий
+ *   в ту же серию добавляет ещё +1.
+ * - Единый «дренирующий» цикл (один на серию) уменьшает счётчик на каждом тике
+ *   микрозадач; когда счётчик достигает нуля — выполняется `fn`.
+ * - Повторные вызовы не создают параллельных циклов; `fn` не вызывается несколько раз.
+ * - Ошибки из `fn` перебрасываются в макрозадачу (`setTimeout`), чтобы их было видно
+ *   в DevTools и они не становились unhandled rejection.
+ *
+ * Когда использовать:
+ * - Нужна коалесценция множественных триггеров (Promises, ResizeObserver и т.п.)
+ *   с запуском «после того, как всё успокоилось», чтобы измерить DOM/пересчитать
+ *   лейаут/агрегировать состояние один раз.
+ *
+ * Гарантии и нюансы:
+ * - Гарантируется минимум два тика микрозадач после первого вызова (даёт времени
+ *   промисам/микроочереди завершиться).
+ * - Работает как эвристика «дождаться затишья» на уровне микрозадач, без перехода
+ *   в макрозадачи/таймеры (сам `fn` всё равно выполняется в микрозадаче).
+ *
+ * @param fn — колбэк, который будет выполнен один раз после завершения серии вызовов.
+ * @returns Триггер; его можно вызывать многократно — `fn` запустится один раз,
+ *          когда внутренний счётчик дойдёт до нуля.
+ */
+export declare const scheduleGatherMetrics: (fn: VoidFunction) => VoidFunction;
+/**
+ * Хук для получения "живой" ссылки (`ref`) на актуальное значение.
+ *
+ * В отличие от обычного `useRef(initialValue)`, где `.current` инициализируется
+ * только один раз и далее меняется вручную, `useActualRef` автоматически
+ * обновляет `.current` при каждом рендере на основе переданного `value`.
+ *
+ * Зачем это нужно:
+ * - Когда в коллбэках или подписках нужно иметь доступ к самому свежему значению
+ *   пропса или состояния, но при этом не хочется пересоздавать замыкания.
+ * - Позволяет избежать проблем со "старыми" значениями внутри `useCallback`,
+ *   `useEffect` и обработчиков событий.
+ *
+ * @param value Актуальное значение, которое должно быть доступно через `.current`.
+ *
+ * @returns `ref`-объект (`MutableRefObject<T>`), чьё свойство `.current` всегда
+ *          указывает на последнее переданное `value`.
+ */
+export declare const useActualRef: <T>(value: T) => MutableRefObject<T>;
+/**
+ * Подписывает трансформацию на изменения исходного `MotionValue` **и** внешнего хранилища ключевых подписок.
+ *
+ * В отличие от `useTransform` из motion, этот хук не создает новый `MotionValue`.
+ * Вместо этого он вызывает пользовательскую `transformFn(arg, value)` при любом изменении:
+ *  - исходного `originalValue`, и/или
+ *  - значений во внешнем хранилище `store` по указанным `keys`.
+ *
+ * `transformFn` обычно внутри делает `.set(...)` у одного или нескольких целевых `MotionValue`.
+ *
+ * @template T Тип значения исходного `MotionValue`.
+ * @template K Тип ключей внешнего хранилища (строка | число | символ).
+ * @template V Тип агрегированного значения, извлекаемого из хранилища и передаваемого в `transformFn`.
+ *
+ * @param {MotionValue<T>} originalValue
+ * Исходный `MotionValue`, изменения которого инициируют трансформацию.
+ *
+ * @param {KeyedSubscriptions<K> | (() => KeyedSubscriptions<K>)} store
+ * Внешнее хранилище с подписками. Может быть самим объектом или фабрикой.
+ * Если передана функция, хук пересоздает подписки при событии `onDestroy`.
+ *
+ * @param {K[]} keys
+ * Набор ключей хранилища, на изменения которых нужно реагировать.
+ * Равенство `keys` проверяется по количеству и составу; изменение порядка не важно.
+ * Изменение этого набора вызывает пересоздание подписок подписок.
+ *
+ * @param {() => V} valueExtractor
+ * Функция, синхронно извлекающая/агрегирующая данные из хранилища
+ * для передачи первым аргументом в `transformFn`.
+ *
+ * @param {(arg: V, value: T) => void} transformFn
+ * Функция-трансформация. Вызывается при каждом триггере с
+ * `arg = valueExtractor()` и `value = originalValue.get()`. Обычно внутри вызывает `someMotionValue.set(...)`.
+ *
+ * @example
+ * ```tsx
+ * import { motion, useMotionValue } from "motion/react";
+ *
+ * const store: KeyedSubscriptions<"width" | "height"> = createKeyedStore();
+ *
+ * export function Example() {
+ *   const x = useMotionValue(0);          // исходный драйвер
+ *   const y = useMotionValue(0);          // целевой MotionValue
+ *
+ *   useStoreSyncedTransform(
+ *     x,
+ *     store,
+ *     ["width", "height"],
+ *     () => ({
+ *       w: store.get("width"),
+ *       h: store.get("height"),
+ *     }),
+ *     ({ w, h }, xVal) => {
+ *       // пример простой зависимости
+ *       const mapped = (xVal / Math.max(w, 1)) * h;
+ *       y.set(mapped);
+ *     }
+ *   );
+ *
+ *   return <motion.div style={{ x, y }} />;
+ * }
+ * ```
+ */
+export declare const useStoreSyncedTransform: <T, K extends PropertyKey, V>(originalValue: MotionValue<T>, store: KeyedSubscriptions<K>, keys: K[], valueExtractor: () => V, transformFn: (arg: V, value: T) => void) => void;
+export declare const findScrollContainer: (element: HTMLElement) => {
+    eventsProvider: HTMLElement;
+    infoProvider: HTMLElement;
+    mode: "element";
+} | {
+    eventsProvider: Window;
+    infoProvider: Element;
+    mode: "window";
+};
+export declare const isDOMRectsEqual: (a: DOMRectReadOnly | null, b: DOMRectReadOnly | null) => boolean;
+export interface MorphSetup {
+    start: DOMRectReadOnly;
+    end: DOMRectReadOnly;
+    containerStart: DOMRectReadOnly;
+    containerEnd: DOMRectReadOnly;
+}
+export type SizeAxis = 'vertical' | 'horizontal' | 'both' | 'auto';
+export type HorizontalAlign = 'left' | 'right' | 'center';
+export type VerticalAlign = 'top' | 'bottom' | 'center';
+export declare const calcMorphParams: (start: DOMRectReadOnly | null, end: DOMRectReadOnly | null, sizeAxis: SizeAxis, horizontalPositionAlign: HorizontalAlign, verticalPositionAlign: VerticalAlign) => {
+    deltaX: number;
+    deltaY: number;
+    scaleX: number;
+    scaleY: number;
+};
+export declare const getRelativeOffset: (scrollAdapter: ScrollAdapter, element: HTMLElement | null) => number;