@hh.ru/magritte-ui-nav-bar 1.0.2 → 1.0.3

package/public/LayoutStage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutStage.js","sources":["../../src/public/LayoutStage.tsx"],"sourcesContent":["import {\n    createContext,\n    createRef,\n    useContext,\n    useRef,\n    type FC,\n    type MutableRefObject,\n    type PropsWithChildren,\n} from 'react';\nimport classNames from 'classnames';\nimport { HTMLMotionProps, motion, useMotionValue } from 'motion/react';\n\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport {\n    MetricsProvider,\n    useMeasureManual,\n    useRemeasureAllManual,\n} from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { MorphStoreProvider, useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport {\n    EnvironmentFingerprintNode,\n    useEnvironmentFingerprint,\n} from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\nexport const CONTAINER_START_KEY = '#container-start';\nexport const CONTAINER_END_KEY = '#container-end';\n\nexport type AnimationStage = 'start' | 'end' | 'progress';\n\nexport const AnimationStageContext = createContext<MutableRefObject<AnimationStage | null>>(createRef());\n\nconst stageClasses = {\n    start: 'nav-bar-layout-animation-stage-start',\n    end: 'nav-bar-layout-animation-stage-end',\n    progress: styles.animationStageProgress,\n} as const;\n\nconst CombinedStageAnimationMeasurementManager: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({\n    children,\n    ...rest\n}) => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const animationStageRef = useContext(AnimationStageContext);\n    const morphStore = useMorphStore();\n    const currentClassRef = useRef<string>(stageClasses.start);\n    const paneStore = usePaneStore();\n    const forceMeasure = useRemeasureAllManual();\n    const setStage = useInitOnce(() => (stage: AnimationStage) => {\n        if (!wrapperRef.current) {\n            return;\n        }\n\n        for (const animClasses of Object.entries(stageClasses)) {\n            wrapperRef.current.classList.toggle(animClasses[1], stage === animClasses[0]);\n        }\n        currentClassRef.current = stageClasses[stage];\n        animationStageRef.current = stage;\n    });\n    const measureSubtree = useInitOnce(() => () => {\n        setStage('start');\n        forceMeasure();\n        setStage('end');\n        forceMeasure();\n        setStage('progress');\n    });\n\n    const height = useMotionValue<number | 'auto'>('auto');\n\n    useMeasureManual(wrapperRef, (rect) => {\n        if (animationStageRef.current === 'start') {\n            height.set(rect.height);\n            // height из MotionValue применится к DOM асинхронно, поэтому применяем высоту синхронно\n            // чтобы не триггерить ResizeObserver когда сбросим у элементов position в absolute\n            if (wrapperRef.current) {\n                wrapperRef.current.style.height = `${rect.height}px`;\n            }\n            paneStore.set({ top: rect.top, startHeight: rect.height });\n            morphStore.set(CONTAINER_START_KEY, rect);\n        } else {\n            paneStore.set({ endHeight: rect.height });\n            morphStore.set(CONTAINER_END_KEY, rect);\n        }\n    });\n\n    useEnvironmentFingerprint(measureSubtree);\n    useWhenFontLoaded(() => height.get() !== 'auto' && measureSubtree());\n\n    return (\n        <motion.div\n            ref={wrapperRef}\n            {...rest}\n            className={classNames(styles.layoutAnimationContainer, currentClassRef.current)}\n            style={{ height }}\n        >\n            {children}\n        </motion.div>\n    );\n};\n\nexport const LayoutStage: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({ children, ...rest }) => {\n    const stageRef = useRef<AnimationStage | null>('start');\n\n    return (\n        <EnvironmentFingerprintNode style={{ pointerEvents: 'auto' }}>\n            <MorphStoreProvider>\n                <AnimationStageContext.Provider value={stageRef}>\n                    <MetricsProvider>\n                        <CombinedStageAnimationMeasurementManager {...rest}>\n                            {children}\n                        </CombinedStageAnimationMeasurementManager>\n                    </MetricsProvider>\n                </AnimationStageContext.Provider>\n            </MorphStoreProvider>\n        </EnvironmentFingerprintNode>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"LayoutStage.js","sources":["../../src/public/LayoutStage.tsx"],"sourcesContent":["import {\n    createContext,\n    createRef,\n    useContext,\n    useRef,\n    type FC,\n    type MutableRefObject,\n    type PropsWithChildren,\n} from 'react';\nimport classNames from 'classnames';\nimport { HTMLMotionProps, motion, useMotionValue } from 'motion/react';\n\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport {\n    MetricsProvider,\n    useMeasureManual,\n    useRemeasureAllManual,\n} from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { MorphStoreProvider, useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport {\n    EnvironmentFingerprintNode,\n    useEnvironmentFingerprint,\n} from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\nexport const CONTAINER_START_KEY = '#container-start';\nexport const CONTAINER_END_KEY = '#container-end';\n\nexport type AnimationStage = 'start' | 'end' | 'progress';\n\nexport const AnimationStageContext = createContext<MutableRefObject<AnimationStage | null>>(createRef());\n\nconst stageClasses = {\n    start: 'nav-bar-layout-animation-stage-start',\n    end: 'nav-bar-layout-animation-stage-end',\n    progress: styles.animationStageProgress,\n} as const;\n\nconst CombinedStageAnimationMeasurementManager: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({\n    children,\n    ...rest\n}) => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const animationStageRef = useContext(AnimationStageContext);\n    const morphStore = useMorphStore();\n    const currentClassRef = useRef<string>(stageClasses.start);\n    const paneStore = usePaneStore();\n    const forceMeasure = useRemeasureAllManual();\n    const setStage = useInitOnce(() => (stage: AnimationStage) => {\n        if (!wrapperRef.current) {\n            return;\n        }\n\n        for (const animClasses of Object.entries(stageClasses)) {\n            wrapperRef.current.classList.toggle(animClasses[1], stage === animClasses[0]);\n        }\n        currentClassRef.current = stageClasses[stage];\n        animationStageRef.current = stage;\n    });\n    const measureSubtree = useInitOnce(() => () => {\n        setStage('start');\n        forceMeasure();\n        setStage('end');\n        forceMeasure();\n        setStage('progress');\n    });\n\n    const height = useMotionValue<number | 'auto'>('auto');\n\n    useMeasureManual(wrapperRef, (rect) => {\n        if (animationStageRef.current === 'start') {\n            height.set(rect.height);\n            // height из MotionValue применится к DOM асинхронно, поэтому применяем высоту синхронно\n            // чтобы не триггерить ResizeObserver когда сбросим у элементов position в absolute\n            if (wrapperRef.current) {\n                wrapperRef.current.style.height = `${rect.height}px`;\n            }\n            paneStore.set({ top: rect.top, startHeight: rect.height });\n            morphStore.set(CONTAINER_START_KEY, rect);\n        } else {\n            paneStore.set({ endHeight: rect.height });\n            morphStore.set(CONTAINER_END_KEY, rect);\n        }\n    });\n\n    useEnvironmentFingerprint(measureSubtree);\n    useWhenFontLoaded(() => height.get() !== 'auto' && measureSubtree());\n\n    return (\n        <motion.div\n            ref={wrapperRef}\n            {...rest}\n            className={classNames(styles.layoutAnimationContainer, currentClassRef.current)}\n            style={{ height }}\n        >\n            {children}\n        </motion.div>\n    );\n};\n\nexport const LayoutStage: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({ children, ...rest }) => {\n    const stageRef = useRef<AnimationStage | null>('start');\n\n    return (\n        <EnvironmentFingerprintNode style={{ pointerEvents: 'none' }}>\n            <MorphStoreProvider>\n                <AnimationStageContext.Provider value={stageRef}>\n                    <MetricsProvider>\n                        <CombinedStageAnimationMeasurementManager {...rest}>\n                            {children}\n                        </CombinedStageAnimationMeasurementManager>\n                    </MetricsProvider>\n                </AnimationStageContext.Provider>\n            </MorphStoreProvider>\n        </EnvironmentFingerprintNode>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/public/Morph.js

@@ -9,12 +9,12 @@ import { usePaneStore } from '../internal/PaneStore.js';
 import { useStoreSyncedTransform, calcMorphParams, lerp } from '../internal/utils.js';
 import { useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
 import { useAnimationStage } from './Stage.js';
-import { s as styles } from '../NavBar-BM6rmKUJ.js';
+import { s as styles } from '../NavBar-C_bLkCSc.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
+import '../internal/useInert.js';
 import '@hh.ru/magritte-ui-divider';
 import '@hh.ru/magritte-ui-layer';
-import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
 import '../internal/useNavBarMetrics.js';

package/public/NavBar.d.ts

@@ -27,10 +27,6 @@ export interface NavBarProps {
      * высоты навбара в процессе анимации и позиции триггера начала анмиации.
      */
     endTriggerPosition?: RefObject<HTMLElement | null>;
-    /**
-     * Включает progressive blur. Эффект может не работать в некоторых вариантах верстки.
-     */
-    progressiveBlur?: boolean;
     /**
      * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.
      */

package/public/NavBar.js

@@ -6,7 +6,6 @@ import 'motion/react';
 import '@hh.ru/magritte-ui-divider';
 import '@hh.ru/magritte-ui-layer';
 import '../internal/MetricsProvider.js';
-import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
 import '../internal/useNavBarMetrics.js';
@@ -15,6 +14,6 @@ import '../internal/useScrollAdapter.js';
 import '../internal/useSnapScroll.js';
 import '../internal/useSyncMotionValue.js';
 import '../internal/utils.js';
-export { N as NavBar, u as useNavBarContext } from '../NavBar-BM6rmKUJ.js';
+export { N as NavBar, u as useNavBarContext } from '../NavBar-C_bLkCSc.js';
 import '@hh.ru/magritte-internal-custom-scroll';
 //# sourceMappingURL=NavBar.js.map

package/public/NavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NavBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/public/Pane.js

@@ -9,15 +9,15 @@ import { useInitOnce, useStoreSyncedTransform, lerp } from '../internal/utils.js
 import { EnvironmentFingerprintProvider } from './EnvironmentFingerprintNode.js';
 import { LayoutStage } from './LayoutStage.js';
 import { Stage } from './Stage.js';
-import { s as styles } from '../NavBar-BM6rmKUJ.js';
+import { s as styles } from '../NavBar-C_bLkCSc.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
 import '../internal/MetricsProvider.js';
 import 'classnames';
 import '@hh.ru/magritte-common-use-when-font-loaded';
+import '../internal/useInert.js';
 import '@hh.ru/magritte-ui-divider';
 import '@hh.ru/magritte-ui-layer';
-import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
 import '../internal/useNavBarMetrics.js';
@@ -65,7 +65,7 @@ const Pane = ({ children, nextPane, foldable, animationProgress }) => {
         backgroundY.set(-shift);
         backgroundScale.set(height.start === 0 ? 1 : lerp(height.start, foldable ? 0 : height.end, progress) / height.start);
     });
-    return (jsxs(motion.div, { className: styles.pane, style: { y: foldable ? y : 0 }, children: [jsx(EnvironmentFingerprintProvider, { children: jsxs(motion.div, { className: styles.paneContent, style: { height: contentHeight }, children: [jsx(PaneContext.Provider, { value: paneStore, children: jsx(MorphStoreProvider, { children: renderPaneChilds(children, !!foldable) }) }), jsx(motion.div, { className: styles.paneBackground, "data-foldable": foldable, style: { scaleY: backgroundScale, y: backgroundY } })] }) }), !!nextPane && (jsx(motion.div, { className: styles.nextPane, 
+    return (jsxs(motion.div, { className: styles.pane, style: { y: foldable ? y : 0 }, children: [jsx(EnvironmentFingerprintProvider, { children: jsxs(motion.div, { className: styles.paneContent, style: { height: contentHeight }, children: [jsx(PaneContext.Provider, { value: paneStore, children: jsx(MorphStoreProvider, { children: renderPaneChilds(children, !!foldable) }) }), jsx(motion.div, { className: styles.paneBackground, "data-foldable": foldable, style: { scaleY: backgroundScale, y: backgroundY, pointerEvents: 'auto' } })] }) }), !!nextPane && (jsx(motion.div, { className: styles.nextPane, 
                 // если foldable уезжаем под контент, если нет то надо быть над контентом панели идущей перед
                 // т.к. если контент сверху становится меньше, то во время фейда следующая панель
                 // должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока

package/public/Pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pane.js","sources":["../../src/public/Pane.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    isValidElement,\n    type FC,\n    type ReactNode,\n    type JSXElementConstructor,\n    type PropsWithChildren,\n    type ReactElement,\n} from 'react';\nimport { useMotionValue, motion, type MotionValue } from 'motion/react';\n\nimport { MorphStoreProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { PaneContext, usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { lerp, useInitOnce, useStoreSyncedTransform } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { EnvironmentFingerprintProvider } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { LayoutStage } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\nimport { Stage, type StageProps } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport type InternalPaneProps = PropsWithChildren<{\n    foldable?: boolean;\n    nextPane?: ReactElement<InternalPaneProps, JSXElementConstructor<InternalPaneProps>> | null;\n    animationProgress?: MotionValue<number>;\n}>;\nexport type ExternalPaneProps = PropsWithChildren<{\n    /**\n     * Включает режим когда панель \"схлопывается\" под стоящую над ней панель.\n     */\n    foldable?: boolean;\n    /**\n     * Принимает MotionValue значение которого будет обновляться синхронно с анимацией панели.\n     * Прогресс анимации представляется в виде числа 0..1\n     * Предназначен для синхронизации внешних анимаций с анимацией панели.\n     */\n    animationProgress?: MotionValue<number>;\n}>;\n\nexport type PaneElement = ReactElement<ExternalPaneProps, JSXElementConstructor<ExternalPaneProps>>;\n\nconst renderPaneChilds = (children: ReactNode, foldable: boolean) => {\n    const items = Children.toArray(children);\n    const stageContainers = items.filter((child) => isValidElement(child) && child.type === Stage) as ReactElement<\n        StageProps,\n        JSXElementConstructor<StageProps>\n    >[];\n    const layoutStageContainers = items.filter(\n        (child) => isValidElement(child) && child.type === LayoutStage\n    ) as ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>>[];\n\n    if ((stageContainers.length === 0 && layoutStageContainers.length === 0) || foldable) {\n        return <Stage animationStage=\"only\">{children}</Stage>;\n    }\n\n    if (layoutStageContainers.length > 0) {\n        return cloneElement(layoutStageContainers[0]);\n    }\n\n    stageContainers.length = Math.min(stageContainers.length, 2);\n\n    return stageContainers.map((child, index) => {\n        return cloneElement(child, {\n            ...child.props,\n            animationStage: stageContainers.length === 1 ? 'only' : (['start', 'end'] as const)[index],\n        });\n    });\n};\n\nexport const Pane: FC<InternalPaneProps> = ({ children, nextPane, foldable, animationProgress }) => {\n    const paneStore = usePaneStore();\n\n    const y = useMotionValue(0);\n    const nextPaneY = useMotionValue(0);\n    const backgroundScale = useMotionValue(1);\n    const backgroundY = useMotionValue(0);\n    useSyncMotionValue(paneStore.get('motionValue'), animationProgress);\n\n    const contentHeight = useMotionValue<number | 'auto'>('auto');\n    useInitOnce(() =>\n        paneStore.onChange('startHeight', () => contentHeight.set(paneStore.get('startHeight') ?? 'auto'))\n    );\n\n    paneStore.set({ foldable });\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        paneStore,\n        ['startHeight', 'endHeight'],\n        () => ({\n            start: paneStore.get('startHeight') ?? 0,\n            end: paneStore.get('endHeight') ?? paneStore.get('startHeight') ?? 0,\n        }),\n        (height, progress) => {\n            const heightDiff = height.end - height.start;\n            const shift = foldable ? progress * -height.start : 0;\n            y.set(shift);\n            nextPaneY.set(progress * heightDiff);\n            backgroundY.set(-shift);\n            backgroundScale.set(\n                height.start === 0 ? 1 : lerp(height.start, foldable ? 0 : height.end, progress) / height.start\n            );\n        }\n    );\n\n    return (\n        <motion.div className={styles.pane} style={{ y: foldable ? y : 0 }}>\n            <EnvironmentFingerprintProvider>\n                <motion.div className={styles.paneContent} style={{ height: contentHeight }}>\n                    <PaneContext.Provider value={paneStore}>\n                        <MorphStoreProvider>{renderPaneChilds(children, !!foldable)}</MorphStoreProvider>\n                    </PaneContext.Provider>\n                    <motion.div\n                        className={styles.paneBackground}\n                        data-foldable={foldable}\n                        style={{ scaleY: backgroundScale, y: backgroundY }}\n                    />\n                </motion.div>\n            </EnvironmentFingerprintProvider>\n\n            {!!nextPane && (\n                <motion.div\n                    className={styles.nextPane}\n                    // если foldable уезжаем под контент, если нет то надо быть над контентом панели идущей перед\n                    // т.к. если контент сверху становится меньше, то во время фейда следующая панель\n                    // должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока\n                    // не дойдем до конечной точки анимации, выглядит некрасиво\n                    style={{ y: nextPaneY, zIndex: nextPane.props.foldable ? 0 : 3 }}\n                >\n                    {nextPane}\n                </motion.div>\n            )}\n        </motion.div>\n    );\n};\n\nexport const ExternalPane = Pane as FC<PropsWithChildren<ExternalPaneProps>>;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Pane.js","sources":["../../src/public/Pane.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    isValidElement,\n    type FC,\n    type ReactNode,\n    type JSXElementConstructor,\n    type PropsWithChildren,\n    type ReactElement,\n} from 'react';\nimport { useMotionValue, motion, type MotionValue } from 'motion/react';\n\nimport { MorphStoreProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { PaneContext, usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { lerp, useInitOnce, useStoreSyncedTransform } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { EnvironmentFingerprintProvider } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { LayoutStage } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\nimport { Stage, type StageProps } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport type InternalPaneProps = PropsWithChildren<{\n    foldable?: boolean;\n    nextPane?: ReactElement<InternalPaneProps, JSXElementConstructor<InternalPaneProps>> | null;\n    animationProgress?: MotionValue<number>;\n}>;\nexport type ExternalPaneProps = PropsWithChildren<{\n    /**\n     * Включает режим когда панель \"схлопывается\" под стоящую над ней панель.\n     */\n    foldable?: boolean;\n    /**\n     * Принимает MotionValue значение которого будет обновляться синхронно с анимацией панели.\n     * Прогресс анимации представляется в виде числа 0..1\n     * Предназначен для синхронизации внешних анимаций с анимацией панели.\n     */\n    animationProgress?: MotionValue<number>;\n}>;\n\nexport type PaneElement = ReactElement<ExternalPaneProps, JSXElementConstructor<ExternalPaneProps>>;\n\nconst renderPaneChilds = (children: ReactNode, foldable: boolean) => {\n    const items = Children.toArray(children);\n    const stageContainers = items.filter((child) => isValidElement(child) && child.type === Stage) as ReactElement<\n        StageProps,\n        JSXElementConstructor<StageProps>\n    >[];\n    const layoutStageContainers = items.filter(\n        (child) => isValidElement(child) && child.type === LayoutStage\n    ) as ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>>[];\n\n    if ((stageContainers.length === 0 && layoutStageContainers.length === 0) || foldable) {\n        return <Stage animationStage=\"only\">{children}</Stage>;\n    }\n\n    if (layoutStageContainers.length > 0) {\n        return cloneElement(layoutStageContainers[0]);\n    }\n\n    stageContainers.length = Math.min(stageContainers.length, 2);\n\n    return stageContainers.map((child, index) => {\n        return cloneElement(child, {\n            ...child.props,\n            animationStage: stageContainers.length === 1 ? 'only' : (['start', 'end'] as const)[index],\n        });\n    });\n};\n\nexport const Pane: FC<InternalPaneProps> = ({ children, nextPane, foldable, animationProgress }) => {\n    const paneStore = usePaneStore();\n\n    const y = useMotionValue(0);\n    const nextPaneY = useMotionValue(0);\n    const backgroundScale = useMotionValue(1);\n    const backgroundY = useMotionValue(0);\n    useSyncMotionValue(paneStore.get('motionValue'), animationProgress);\n\n    const contentHeight = useMotionValue<number | 'auto'>('auto');\n    useInitOnce(() =>\n        paneStore.onChange('startHeight', () => contentHeight.set(paneStore.get('startHeight') ?? 'auto'))\n    );\n\n    paneStore.set({ foldable });\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        paneStore,\n        ['startHeight', 'endHeight'],\n        () => ({\n            start: paneStore.get('startHeight') ?? 0,\n            end: paneStore.get('endHeight') ?? paneStore.get('startHeight') ?? 0,\n        }),\n        (height, progress) => {\n            const heightDiff = height.end - height.start;\n            const shift = foldable ? progress * -height.start : 0;\n            y.set(shift);\n            nextPaneY.set(progress * heightDiff);\n            backgroundY.set(-shift);\n            backgroundScale.set(\n                height.start === 0 ? 1 : lerp(height.start, foldable ? 0 : height.end, progress) / height.start\n            );\n        }\n    );\n\n    return (\n        <motion.div className={styles.pane} style={{ y: foldable ? y : 0 }}>\n            <EnvironmentFingerprintProvider>\n                <motion.div className={styles.paneContent} style={{ height: contentHeight }}>\n                    <PaneContext.Provider value={paneStore}>\n                        <MorphStoreProvider>{renderPaneChilds(children, !!foldable)}</MorphStoreProvider>\n                    </PaneContext.Provider>\n                    <motion.div\n                        className={styles.paneBackground}\n                        data-foldable={foldable}\n                        style={{ scaleY: backgroundScale, y: backgroundY, pointerEvents: 'auto' }}\n                    />\n                </motion.div>\n            </EnvironmentFingerprintProvider>\n\n            {!!nextPane && (\n                <motion.div\n                    className={styles.nextPane}\n                    // если foldable уезжаем под контент, если нет то надо быть над контентом панели идущей перед\n                    // т.к. если контент сверху становится меньше, то во время фейда следующая панель\n                    // должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока\n                    // не дойдем до конечной точки анимации, выглядит некрасиво\n                    style={{ y: nextPaneY, zIndex: nextPane.props.foldable ? 0 : 3 }}\n                >\n                    {nextPane}\n                </motion.div>\n            )}\n        </motion.div>\n    );\n};\n\nexport const ExternalPane = Pane as FC<PropsWithChildren<ExternalPaneProps>>;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/public/Stage.js

@@ -5,14 +5,14 @@ import classNames from 'classnames';
 import { useTransform, motion } from 'motion/react';
 import { useMeasureAuto } from '../internal/MetricsProvider.js';
 import { usePaneStore } from '../internal/PaneStore.js';
+import { useInert } from '../internal/useInert.js';
 import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
-import { s as styles } from '../NavBar-BM6rmKUJ.js';
+import { s as styles } from '../NavBar-C_bLkCSc.js';
 import '../internal/utils.js';
 import 'motion';
 import '../internal/KeyedSubscriptions.js';
 import '@hh.ru/magritte-ui-divider';
 import '@hh.ru/magritte-ui-layer';
-import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
 import '../internal/useNavBarMetrics.js';
@@ -32,9 +32,14 @@ const Stage = ({ children, animationStage = 'only', ...rest }) => {
     const isOnly = animationStage === 'only';
     const motionValue = paneStore.get('motionValue');
     const opacity = useTransform(motionValue, [0, 1], isStartState ? [1, 0] : [0, 1]);
-    const pointerEvents = useTransform(motionValue, (value) => (isStartState && value === 0) || (isEndState && value === 1) ? 'auto' : 'none');
+    const [refCb, setInert] = useInert();
+    const pointerEvents = useTransform(motionValue, (value) => {
+        const pointerEvents = (isStartState && value === 0) || (isEndState && value === 1) ? 'auto' : 'none';
+        setInert(pointerEvents === 'none');
+        return pointerEvents;
+    });
     useMeasureAuto(rootRef, (rect) => paneStore.set({ top: rect.top, [isStartState ? 'startHeight' : 'endHeight']: rect.height }), [animationStage, paneStore]);
-    return (jsx(motion.div, { ...rest, className: isStartState ? styles.startStateContainer : styles.endStateContainer, style: isOnly && !paneStore.get('foldable') ? {} : { opacity, pointerEvents }, children: jsx(EnvironmentFingerprintNode, { ref: rootRef, className: classNames(styles.contentContainer, styles.navBarStage), children: jsx(AnimationStageContext.Provider, { value: animationStage ?? 'only', children: children }) }) }));
+    return (jsx(motion.div, { ...rest, ref: refCb, className: isStartState ? styles.startStateContainer : styles.endStateContainer, style: isOnly && !paneStore.get('foldable') ? {} : { opacity, pointerEvents }, children: jsx(EnvironmentFingerprintNode, { ref: rootRef, className: classNames(styles.contentContainer, styles.navBarStage), children: jsx(AnimationStageContext.Provider, { value: animationStage ?? 'only', children: children }) }) }));
 };
 const ExternalStage = Stage;
 

package/public/Stage.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stage.js","sources":["../../src/public/Stage.tsx"],"sourcesContent":["import { createContext, useContext, useRef, type FC, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { useTransform, motion, HTMLMotionProps } from 'motion/react';\n\nimport { useMeasureAuto } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { EnvironmentFingerprintNode } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\ntype AnimationStage = 'start' | 'end' | 'only';\n\nconst AnimationStageContext = createContext<AnimationStage>('only');\n\nexport const useAnimationStage = (): AnimationStage => useContext(AnimationStageContext);\n\nexport type StageProps = PropsWithChildren<{ animationStage?: AnimationStage } & HTMLMotionProps<'div'>>;\n\nexport const Stage: FC<StageProps> = ({ children, animationStage = 'only', ...rest }) => {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const paneStore = usePaneStore();\n    const isStartState = animationStage === 'start' || animationStage === 'only';\n    const isEndState = animationStage === 'end' || animationStage === 'only';\n    const isOnly = animationStage === 'only';\n    const motionValue = paneStore.get('motionValue');\n    const opacity = useTransform(motionValue, [0, 1], isStartState ? [1, 0] : [0, 1]);\n    const pointerEvents = useTransform(motionValue, (value) =>\n        (isStartState && value === 0) || (isEndState && value === 1) ? 'auto' : 'none'\n    );\n\n    useMeasureAuto(\n        rootRef,\n        (rect) => paneStore.set({ top: rect.top, [isStartState ? 'startHeight' : 'endHeight']: rect.height }),\n        [animationStage, paneStore]\n    );\n\n    return (\n        <motion.div\n            {...rest}\n            className={isStartState ? styles.startStateContainer : styles.endStateContainer}\n            style={isOnly && !paneStore.get('foldable') ? {} : { opacity, pointerEvents }}\n        >\n            <EnvironmentFingerprintNode\n                ref={rootRef}\n                className={classNames(styles.contentContainer, styles.navBarStage)}\n            >\n                <AnimationStageContext.Provider value={animationStage ?? 'only'}>\n                    {children}\n                </AnimationStageContext.Provider>\n            </EnvironmentFingerprintNode>\n        </motion.div>\n    );\n};\n\nexport const ExternalStage = Stage as FC<PropsWithChildren>;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,qBAAqB,GAAG,aAAa,CAAiB,MAAM,CAAC,CAAC;AAEvD,MAAA,iBAAiB,GAAG,MAAsB,UAAU,CAAC,qBAAqB,EAAE;AAI5E,MAAA,KAAK,GAAmB,CAAC,EAAE,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,GAAG,IAAI,EAAE,KAAI;AACpF,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM,CAAC;IAC7E,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM,CAAC;AACzE,IAAA,MAAM,MAAM,GAAG,cAAc,KAAK,MAAM,CAAC;IACzC,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AACjD,IAAA,MAAM,OAAO,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAClF,IAAA,MAAM,aAAa,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,KAAK,KAClD,CAAC,YAAY,IAAI,KAAK,KAAK,CAAC,MAAM,UAAU,IAAI,KAAK,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,CACjF,CAAC;AAEF,IAAA,cAAc,CACV,OAAO,EACP,CAAC,IAAI,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,YAAY,GAAG,aAAa,GAAG,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EACrG,CAAC,cAAc,EAAE,SAAS,CAAC,CAC9B,CAAC;AAEF,IAAA,QACIA,GAAC,CAAA,MAAM,CAAC,GAAG,EAAA,EAAA,GACH,IAAI,EACR,SAAS,EAAE,YAAY,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,iBAAiB,EAC/E,KAAK,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,aAAa,EAAE,YAE7EA,GAAC,CAAA,0BAA0B,IACvB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,WAAW,CAAC,EAElE,QAAA,EAAAA,GAAA,CAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,IAAI,MAAM,EAC1D,QAAA,EAAA,QAAQ,GACoB,EACR,CAAA,EAAA,CACpB,EACf;AACN,EAAE;AAEK,MAAM,aAAa,GAAG;;;;"}
+{"version":3,"file":"Stage.js","sources":["../../src/public/Stage.tsx"],"sourcesContent":["import { createContext, useContext, useRef, type FC, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { useTransform, motion, HTMLMotionProps } from 'motion/react';\n\nimport { useMeasureAuto } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useInert } from '@hh.ru/magritte-ui-nav-bar/internal/useInert';\nimport { EnvironmentFingerprintNode } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\ntype AnimationStage = 'start' | 'end' | 'only';\n\nconst AnimationStageContext = createContext<AnimationStage>('only');\n\nexport const useAnimationStage = (): AnimationStage => useContext(AnimationStageContext);\n\nexport type StageProps = PropsWithChildren<{ animationStage?: AnimationStage } & HTMLMotionProps<'div'>>;\n\nexport const Stage: FC<StageProps> = ({ children, animationStage = 'only', ...rest }) => {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const paneStore = usePaneStore();\n    const isStartState = animationStage === 'start' || animationStage === 'only';\n    const isEndState = animationStage === 'end' || animationStage === 'only';\n    const isOnly = animationStage === 'only';\n    const motionValue = paneStore.get('motionValue');\n    const opacity = useTransform(motionValue, [0, 1], isStartState ? [1, 0] : [0, 1]);\n    const [refCb, setInert] = useInert();\n    const pointerEvents = useTransform(motionValue, (value) => {\n        const pointerEvents = (isStartState && value === 0) || (isEndState && value === 1) ? 'auto' : 'none';\n        setInert(pointerEvents === 'none');\n        return pointerEvents;\n    });\n\n    useMeasureAuto(\n        rootRef,\n        (rect) => paneStore.set({ top: rect.top, [isStartState ? 'startHeight' : 'endHeight']: rect.height }),\n        [animationStage, paneStore]\n    );\n\n    return (\n        <motion.div\n            {...rest}\n            ref={refCb}\n            className={isStartState ? styles.startStateContainer : styles.endStateContainer}\n            style={isOnly && !paneStore.get('foldable') ? {} : { opacity, pointerEvents }}\n        >\n            <EnvironmentFingerprintNode\n                ref={rootRef}\n                className={classNames(styles.contentContainer, styles.navBarStage)}\n            >\n                <AnimationStageContext.Provider value={animationStage ?? 'only'}>\n                    {children}\n                </AnimationStageContext.Provider>\n            </EnvironmentFingerprintNode>\n        </motion.div>\n    );\n};\n\nexport const ExternalStage = Stage as FC<PropsWithChildren>;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,qBAAqB,GAAG,aAAa,CAAiB,MAAM,CAAC,CAAC;AAEvD,MAAA,iBAAiB,GAAG,MAAsB,UAAU,CAAC,qBAAqB,EAAE;AAI5E,MAAA,KAAK,GAAmB,CAAC,EAAE,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,GAAG,IAAI,EAAE,KAAI;AACpF,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM,CAAC;IAC7E,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM,CAAC;AACzE,IAAA,MAAM,MAAM,GAAG,cAAc,KAAK,MAAM,CAAC;IACzC,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AACjD,IAAA,MAAM,OAAO,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAClF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAE,CAAC;IACrC,MAAM,aAAa,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,KAAK,KAAI;QACtD,MAAM,aAAa,GAAG,CAAC,YAAY,IAAI,KAAK,KAAK,CAAC,MAAM,UAAU,IAAI,KAAK,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;AACrG,QAAA,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC;AACnC,QAAA,OAAO,aAAa,CAAC;AACzB,KAAC,CAAC,CAAC;AAEH,IAAA,cAAc,CACV,OAAO,EACP,CAAC,IAAI,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,YAAY,GAAG,aAAa,GAAG,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EACrG,CAAC,cAAc,EAAE,SAAS,CAAC,CAC9B,CAAC;AAEF,IAAA,QACIA,GAAC,CAAA,MAAM,CAAC,GAAG,EAAA,EAAA,GACH,IAAI,EACR,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,YAAY,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,iBAAiB,EAC/E,KAAK,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,aAAa,EAAE,EAAA,QAAA,EAE7EA,IAAC,0BAA0B,EAAA,EACvB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,WAAW,CAAC,EAAA,QAAA,EAElEA,IAAC,qBAAqB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,cAAc,IAAI,MAAM,EAC1D,QAAA,EAAA,QAAQ,GACoB,EACR,CAAA,EAAA,CACpB,EACf;AACN,EAAE;AAEK,MAAM,aAAa,GAAG;;;;"}

package/public/TitleContainer.js

@@ -2,7 +2,7 @@ import './../index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { Morph } from './Morph.js';
-import { s as styles } from '../NavBar-BM6rmKUJ.js';
+import { s as styles } from '../NavBar-C_bLkCSc.js';
 import 'react';
 import 'motion/react';
 import '../internal/MetricsProvider.js';
@@ -13,9 +13,9 @@ import '../internal/PaneStore.js';
 import 'motion';
 import './EnvironmentFingerprintNode.js';
 import './Stage.js';
+import '../internal/useInert.js';
 import '@hh.ru/magritte-ui-divider';
 import '@hh.ru/magritte-ui-layer';
-import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
 import '../internal/useNavBarMetrics.js';

package/NavBar-BM6rmKUJ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavBar-BM6rmKUJ.js","sources":["../src/public/NavBar.tsx"],"sourcesContent":["import React, { createContext, type RefObject, useContext, useLayoutEffect, useRef, type FC } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValue, motion, type MotionStyle, MotionValue, frame } from 'motion/react';\n\nimport { Divider, type ShowDivider } from '@hh.ru/magritte-ui-divider';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { MetricsProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { ProgressiveBlur } from '@hh.ru/magritte-ui-nav-bar/internal/ProgressiveBlur';\nimport { useAnimationRanges } from '@hh.ru/magritte-ui-nav-bar/internal/useAnimationRanges';\nimport { useBindScrollToAnimationProgress } from '@hh.ru/magritte-ui-nav-bar/internal/useBindScrollToAnimationProgress';\nimport { useNavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { useResetFocus } from '@hh.ru/magritte-ui-nav-bar/internal/useResetFocus';\nimport { useScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { useSnapScroll } from '@hh.ru/magritte-ui-nav-bar/internal/useSnapScroll';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { lerp, remap, scheduleMicro, scheduleMacro, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { type PaneElement, type InternalPaneProps } from '@hh.ru/magritte-ui-nav-bar/public/Pane';\n\nimport styles from './nav-bar.less';\n\ntype PaneStoreContextValue = ((store: PaneStore) => VoidFunction) | null;\nconst NavBarContext = createContext<PaneStoreContextValue>(null);\n\nexport const useNavBarContext = (): PaneStoreContextValue => useContext(NavBarContext);\n\nexport interface NavBarProps {\n    /**\n     * В качестве потомков могут передаваться только компоненты <Pane />\n     */\n    children: PaneElement | PaneElement[];\n    /**\n     * Управляет режимом прозрачности:\n     * -- Прозрачность отключена (`false`)\n     * -- Прозрачный всегда (`true`)\n     * -- Прозрачный в начале анимации (`start`)\n     * -- Прозрачный в конце анимации (`end`)\n     */\n    transparent?: 'start' | 'end' | boolean;\n    /**\n     * Управляет позицией триггера начала анимации\n     */\n    startTriggerPosition?: 'start' | 'full-area' | RefObject<HTMLElement | null>;\n    /**\n     * Управляет позицией триггера конца анимации. Если не передан вычисляется автоматически на основе изменения\n     * высоты навбара в процессе анимации и позиции триггера начала анмиации.\n     */\n    endTriggerPosition?: RefObject<HTMLElement | null>;\n    /**\n     * Включает progressive blur. Эффект может не работать в некоторых вариантах верстки.\n     */\n    progressiveBlur?: boolean;\n    /**\n     * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.\n     */\n    overlay?: boolean;\n    /**\n     * Управляет режимом автодоскролла. По умолчанию включен.\n     */\n    snapScroll?: boolean;\n    /**\n     * Управляет режимом отображения дивайдера:\n     * - `false` дивайдер отключен\n     * - `always` дивайдер отображается постоянно\n     * - `with-scroll` дивайдер отображается только когда контент подскроллен под NavBar\n     */\n    showDivider?: ShowDivider;\n    /**\n     * Принимает MotionValue значение которого будет обновляться синхронно с анимацией всего NavBar.\n     * Прогресс анимации представляется в виде числа 0..1\n     * Предназначен для синхронизации внешних анимаций с анимациями NavBar.\n     */\n    animationProgress?: MotionValue<number>;\n}\n\nexport const NavBar: FC<NavBarProps> = ({\n    children,\n    transparent = false,\n    startTriggerPosition = 'start',\n    endTriggerPosition,\n    progressiveBlur = false,\n    overlay = false,\n    snapScroll: scrollSnapping = true,\n    showDivider = false,\n    animationProgress,\n}) => {\n    const blurScaleY = useMotionValue(1);\n    const paneStoreRegistry = useInitOnce(() => new Set<PaneStore>());\n    const prevFullHeight = useRef<null | number>(0);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const [scrollAdapter, scrollPosition] = useScrollAdapter(rootRef);\n    const [getMetrics, invalidateMetrics] = useNavBarMetrics(paneStoreRegistry, rootRef, scrollAdapter);\n    const [getAnimationRanges, invalidateAnimationRanges] = useAnimationRanges(paneStoreRegistry);\n    const [bindScrollToAnimation, getClosestStops, totalAnimationProgress, dividerStyle] =\n        useBindScrollToAnimationProgress(\n            scrollPosition,\n            getMetrics,\n            getAnimationRanges,\n            scrollAdapter,\n            startTriggerPosition,\n            endTriggerPosition\n        );\n    const snapScroll = useSnapScroll(\n        scrollPosition,\n        totalAnimationProgress,\n        scrollAdapter,\n        getClosestStops,\n        scrollSnapping\n    );\n\n    // При получении размеров важно дождаться применения MotionValue к DOM, поэтому используем frame.render\n    const bindScrollToAnimationScheduled = useInitOnce(() => scheduleMicro(() => frame.render(bindScrollToAnimation)));\n    useResetFocus(rootRef, scrollPosition);\n    useSyncMotionValue(totalAnimationProgress, animationProgress);\n\n    const dividerVisibility =\n        // eslint-disable-next-line no-nested-ternary\n        showDivider === 'with-scroll' ? dividerStyle.visibility : showDivider ? 'visible' : 'hidden';\n\n    const registerPaneStore = useInitOnce(() => {\n        const subscriptions: VoidFunction[] = [];\n\n        const updateAnimationParams = () => {\n            subscriptions.length = 0;\n            invalidateMetrics();\n            invalidateAnimationRanges();\n            bindScrollToAnimationScheduled();\n            const navBarMetrics = getMetrics();\n            const fullPanesStartHeight = navBarMetrics.bottom - navBarMetrics.top;\n\n            let scroll = scrollAdapter.getScrollTop();\n            if (prevFullHeight.current !== null && scroll !== 0) {\n                const heightDelta = fullPanesStartHeight - prevFullHeight.current;\n                scroll += heightDelta;\n\n                requestAnimationFrame(() => {\n                    scrollPosition.jump(scrollAdapter.getScrollTop() - 1);\n                    scrollPosition.jump(scrollAdapter.getScrollTop());\n                });\n            }\n\n            const animationRanges = getAnimationRanges();\n            [...paneStoreRegistry.values()].forEach((paneStore) => {\n                const range = animationRanges.get(paneStore.get('id'));\n                if (!range) {\n                    return;\n                }\n                const remapFn = remap(\n                    range[0] === 0 && range[1] === 0\n                        ? [0, 1]\n                        : [range[0] / navBarMetrics.heightDelta, range[1] / navBarMetrics.heightDelta],\n                    [0, 1]\n                );\n                const motionValue = paneStore.get('motionValue');\n                motionValue.set(remapFn(totalAnimationProgress.get()));\n                subscriptions.push(totalAnimationProgress.on('change', (value) => motionValue.set(remapFn(value))));\n            });\n\n            subscriptions.push(\n                totalAnimationProgress.on('change', (value) =>\n                    blurScaleY.set(lerp(1, 1 - navBarMetrics.heightDelta / fullPanesStartHeight, value))\n                )\n            );\n            prevFullHeight.current = fullPanesStartHeight;\n        };\n\n        // основной триггер запуска updateAnimationParams это изменения размеров, обработка которых происходит\n        // в очереди микрозадач, поэтому откладываем запуск функции до перехдоа к макрозадачам, чтобы сократить\n        // количество вызовов при массовых изменениях\n        const onChange = scheduleMacro(updateAnimationParams);\n\n        return (paneStore: PaneStore) => {\n            const unsubscribe = paneStore.onChange(['startHeight', 'endHeight', 'top', 'foldable'], onChange);\n            paneStoreRegistry.add(paneStore);\n            return () => {\n                paneStoreRegistry.delete(paneStore);\n                unsubscribe();\n            };\n        };\n    });\n\n    useLayoutEffect(() => {\n        bindScrollToAnimation();\n        snapScroll();\n        if (!rootRef.current || (typeof startTriggerPosition === 'string' && !endTriggerPosition)) {\n            return void 0;\n        }\n        return scrollAdapter.onResize(bindScrollToAnimationScheduled);\n    }, [\n        startTriggerPosition,\n        endTriggerPosition,\n        bindScrollToAnimation,\n        bindScrollToAnimationScheduled,\n        snapScroll,\n        scrollAdapter,\n    ]);\n\n    // Вкладываем панели друг в друга через проп nextPane\n    const items = React.Children.toArray(children) as PaneElement[];\n\n    const nested = items.reduceRight<PaneElement | null>((acc, child) => {\n        return React.cloneElement<InternalPaneProps>(child, {\n            ...child.props,\n            nextPane: acc,\n        }) as PaneElement;\n    }, null);\n\n    return (\n        <Layer layer=\"navigation-bar\">\n            <MetricsProvider\n                className={classNames(styles.navBar, {\n                    [styles.navbarTransparentStart]: transparent === 'start',\n                    [styles.navbarTransparentEnd]: transparent === 'end',\n                    [styles.navbarNotTransparent]: !transparent,\n                    [styles.navBarOverlay]: overlay,\n                })}\n                ref={rootRef}\n                measureClassName={styles.metricsMode}\n            >\n                <div className={styles.navBarOverlayWrapper}>\n                    <div className={styles.navBarContentContainer}>\n                        <motion.div\n                            style={{ '--magritte-ui-navbar-animation-progress': totalAnimationProgress } as MotionStyle}\n                            className={styles.navBarPanesContainer}\n                        >\n                            <NavBarContext.Provider value={registerPaneStore}>{nested}</NavBarContext.Provider>\n                        </motion.div>\n                        {progressiveBlur && (\n                            <ProgressiveBlur\n                                className={styles.navBarProgressiveBlur}\n                                detail={4}\n                                blurAmount={3}\n                                blurHeight={100}\n                                style={{ scaleY: blurScaleY }}\n                            />\n                        )}\n                        <motion.div\n                            className={styles.dividerContainer}\n                            style={{ ...dividerStyle, visibility: dividerVisibility }}\n                        >\n                            <Divider />\n                        </motion.div>\n                    </div>\n                </div>\n            </MetricsProvider>\n        </Layer>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,MAAM,aAAa,GAAG,aAAa,CAAwB,IAAI,CAAC,CAAC;AAEpD,MAAA,gBAAgB,GAAG,MAA6B,UAAU,CAAC,aAAa,EAAE;AAmD1E,MAAA,MAAM,GAAoB,CAAC,EACpC,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,oBAAoB,GAAG,OAAO,EAC9B,kBAAkB,EAClB,eAAe,GAAG,KAAK,EACvB,OAAO,GAAG,KAAK,EACf,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,WAAW,GAAG,KAAK,EACnB,iBAAiB,GACpB,KAAI;AACD,IAAA,MAAM,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,IAAI,GAAG,EAAa,CAAC,CAAC;AAClE,IAAA,MAAM,cAAc,GAAG,MAAM,CAAgB,CAAC,CAAC,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,MAAM,CAAC,aAAa,EAAE,cAAc,CAAC,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAClE,IAAA,MAAM,CAAC,UAAU,EAAE,iBAAiB,CAAC,GAAG,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;IACpG,MAAM,CAAC,kBAAkB,EAAE,yBAAyB,CAAC,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IAC9F,MAAM,CAAC,qBAAqB,EAAE,eAAe,EAAE,sBAAsB,EAAE,YAAY,CAAC,GAChF,gCAAgC,CAC5B,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,oBAAoB,EACpB,kBAAkB,CACrB,CAAC;AACN,IAAA,MAAM,UAAU,GAAG,aAAa,CAC5B,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,cAAc,CACjB,CAAC;;IAGF,MAAM,8BAA8B,GAAG,WAAW,CAAC,MAAM,aAAa,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;AACnH,IAAA,aAAa,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;AACvC,IAAA,kBAAkB,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;AAE9D,IAAA,MAAM,iBAAiB;;IAEnB,WAAW,KAAK,aAAa,GAAG,YAAY,CAAC,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEjG,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;QACvC,MAAM,aAAa,GAAmB,EAAE,CAAC;QAEzC,MAAM,qBAAqB,GAAG,MAAK;AAC/B,YAAA,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;AACzB,YAAA,iBAAiB,EAAE,CAAC;AACpB,YAAA,yBAAyB,EAAE,CAAC;AAC5B,YAAA,8BAA8B,EAAE,CAAC;AACjC,YAAA,MAAM,aAAa,GAAG,UAAU,EAAE,CAAC;YACnC,MAAM,oBAAoB,GAAG,aAAa,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC;AAEtE,YAAA,IAAI,MAAM,GAAG,aAAa,CAAC,YAAY,EAAE,CAAC;YAC1C,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI,IAAI,MAAM,KAAK,CAAC,EAAE;AACjD,gBAAA,MAAM,WAAW,GAAG,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;gBAClE,MAAM,IAAI,WAAW,CAAC;gBAEtB,qBAAqB,CAAC,MAAK;oBACvB,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC;oBACtD,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC,CAAC;AACtD,iBAAC,CAAC,CAAC;aACN;AAED,YAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;AAC7C,YAAA,CAAC,GAAG,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,KAAI;AAClD,gBAAA,MAAM,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;gBACvD,IAAI,CAAC,KAAK,EAAE;oBACR,OAAO;iBACV;AACD,gBAAA,MAAM,OAAO,GAAG,KAAK,CACjB,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;AAC5B,sBAAE,CAAC,CAAC,EAAE,CAAC,CAAC;sBACN,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,EAClF,CAAC,CAAC,EAAE,CAAC,CAAC,CACT,CAAC;gBACF,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;gBACjD,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,sBAAsB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;gBACvD,aAAa,CAAC,IAAI,CAAC,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAK,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACxG,aAAC,CAAC,CAAC;AAEH,YAAA,aAAa,CAAC,IAAI,CACd,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,KACtC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,WAAW,GAAG,oBAAoB,EAAE,KAAK,CAAC,CAAC,CACvF,CACJ,CAAC;AACF,YAAA,cAAc,CAAC,OAAO,GAAG,oBAAoB,CAAC;AAClD,SAAC,CAAC;;;;AAKF,QAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAEtD,OAAO,CAAC,SAAoB,KAAI;AAC5B,YAAA,MAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,QAAQ,CAAC,CAAC;AAClG,YAAA,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AACjC,YAAA,OAAO,MAAK;AACR,gBAAA,iBAAiB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACpC,gBAAA,WAAW,EAAE,CAAC;AAClB,aAAC,CAAC;AACN,SAAC,CAAC;AACN,KAAC,CAAC,CAAC;IAEH,eAAe,CAAC,MAAK;AACjB,QAAA,qBAAqB,EAAE,CAAC;AACxB,QAAA,UAAU,EAAE,CAAC;AACb,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,KAAK,OAAO,oBAAoB,KAAK,QAAQ,IAAI,CAAC,kBAAkB,CAAC,EAAE;YACvF,OAAO,KAAK,CAAC,CAAC;SACjB;AACD,QAAA,OAAO,aAAa,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CAAC;AAClE,KAAC,EAAE;QACC,oBAAoB;QACpB,kBAAkB;QAClB,qBAAqB;QACrB,8BAA8B;QAC9B,UAAU;QACV,aAAa;AAChB,KAAA,CAAC,CAAC;;IAGH,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAkB,CAAC;IAEhE,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAqB,CAAC,GAAG,EAAE,KAAK,KAAI;AAChE,QAAA,OAAO,KAAK,CAAC,YAAY,CAAoB,KAAK,EAAE;YAChD,GAAG,KAAK,CAAC,KAAK;AACd,YAAA,QAAQ,EAAE,GAAG;AAChB,SAAA,CAAgB,CAAC;KACrB,EAAE,IAAI,CAAC,CAAC;AAET,IAAA,QACIA,GAAC,CAAA,KAAK,IAAC,KAAK,EAAC,gBAAgB,EACzB,QAAA,EAAAA,GAAA,CAAC,eAAe,EAAA,EACZ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;AACjC,gBAAA,CAAC,MAAM,CAAC,sBAAsB,GAAG,WAAW,KAAK,OAAO;AACxD,gBAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,WAAW,KAAK,KAAK;AACpD,gBAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,CAAC,WAAW;AAC3C,gBAAA,CAAC,MAAM,CAAC,aAAa,GAAG,OAAO;aAClC,CAAC,EACF,GAAG,EAAE,OAAO,EACZ,gBAAgB,EAAE,MAAM,CAAC,WAAW,EAAA,QAAA,EAEpCA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,oBAAoB,EACvC,QAAA,EAAAC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,EAAA,QAAA,EAAA,CACzCD,GAAC,CAAA,MAAM,CAAC,GAAG,EACP,EAAA,KAAK,EAAE,EAAE,yCAAyC,EAAE,sBAAsB,EAAiB,EAC3F,SAAS,EAAE,MAAM,CAAC,oBAAoB,EAEtC,QAAA,EAAAA,GAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,iBAAiB,EAAA,QAAA,EAAG,MAAM,EAAA,CAA0B,EAC1E,CAAA,EACZ,eAAe,KACZA,GAAA,CAAC,eAAe,EACZ,EAAA,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,MAAM,EAAE,CAAC,EACT,UAAU,EAAE,CAAC,EACb,UAAU,EAAE,GAAG,EACf,KAAK,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EAC/B,CAAA,CACL,EACDA,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACP,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAClC,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,iBAAiB,EAAE,EAEzD,QAAA,EAAAA,GAAA,CAAC,OAAO,EAAA,EAAA,CAAG,EACF,CAAA,CAAA,EAAA,CACX,EACJ,CAAA,EAAA,CACQ,EACd,CAAA,EACV;AACN;;;;"}

package/internal/ProgressiveBlur.d.ts

@@ -1,7 +0,0 @@
-import { type FC } from 'react';
-import { type HTMLMotionProps } from 'motion/react';
-export declare const ProgressiveBlur: FC<{
-    detail: number;
-    blurAmount: number;
-    blurHeight: number;
-} & HTMLMotionProps<'div'>>;

package/internal/ProgressiveBlur.js

@@ -1,43 +0,0 @@
-import './../index.css';
-import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { motion } from 'motion/react';
-
-const colorByStopIndex = ['rgba(0, 0, 0, 0)', 'rgb(0, 0, 0)', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 0)'];
-const ProgressiveBlur = ({ detail, blurAmount, blurHeight, ...rest }) => {
-    const [maskImageParams, blurAmountParams] = useMemo(() => {
-        const maskParams = [];
-        const blurAmountParams = [];
-        const stops = [0];
-        const stepSize = blurHeight / detail;
-        for (let i = 0; i < detail; i++) {
-            stops.push(stepSize * (i + 1));
-            if (stops.length > 4) {
-                stops.shift();
-            }
-            maskParams.push(stops
-                .map((percent, index) => {
-                const shift = colorByStopIndex.length - stops.length;
-                const color = colorByStopIndex[shift + index];
-                return `${color} ${percent.toFixed(3)}%`;
-            })
-                .join(', '));
-        }
-        let lastBlur = blurAmount;
-        for (let i = maskParams.length; i > 0; i--) {
-            blurAmountParams[i - 1] = lastBlur;
-            lastBlur *= 2;
-        }
-        return [maskParams, blurAmountParams];
-    }, [detail, blurAmount, blurHeight]);
-    return (jsx(motion.div, { ...rest, children: maskImageParams.map((maskParams, index) => (jsx("div", { style: {
-                position: 'absolute',
-                inset: 0,
-                zIndex: maskImageParams.length - index,
-                backdropFilter: `blur(${blurAmountParams[index]}px)`,
-                mask: `linear-gradient(${maskParams})`,
-            } }, index))) }));
-};
-
-export { ProgressiveBlur };
-//# sourceMappingURL=ProgressiveBlur.js.map

package/internal/ProgressiveBlur.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProgressiveBlur.js","sources":["../../src/internal/ProgressiveBlur.tsx"],"sourcesContent":["import { useMemo, type FC } from 'react';\nimport { type HTMLMotionProps, motion } from 'motion/react';\n\nconst colorByStopIndex = ['rgba(0, 0, 0, 0)', 'rgb(0, 0, 0)', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 0)'];\n\nexport const ProgressiveBlur: FC<\n    {\n        detail: number;\n        blurAmount: number;\n        blurHeight: number;\n    } & HTMLMotionProps<'div'>\n> = ({ detail, blurAmount, blurHeight, ...rest }) => {\n    const [maskImageParams, blurAmountParams] = useMemo(() => {\n        const maskParams: string[] = [];\n        const blurAmountParams: number[] = [];\n        const stops: number[] = [0];\n        const stepSize = blurHeight / detail;\n        for (let i = 0; i < detail; i++) {\n            stops.push(stepSize * (i + 1));\n            if (stops.length > 4) {\n                stops.shift();\n            }\n            maskParams.push(\n                stops\n                    .map((percent, index) => {\n                        const shift = colorByStopIndex.length - stops.length;\n                        const color = colorByStopIndex[shift + index];\n                        return `${color} ${percent.toFixed(3)}%`;\n                    })\n                    .join(', ')\n            );\n        }\n        let lastBlur = blurAmount;\n        for (let i = maskParams.length; i > 0; i--) {\n            blurAmountParams[i - 1] = lastBlur;\n            lastBlur *= 2;\n        }\n\n        return [maskParams, blurAmountParams];\n    }, [detail, blurAmount, blurHeight]);\n\n    return (\n        <motion.div {...rest}>\n            {maskImageParams.map((maskParams, index) => (\n                <div\n                    key={index}\n                    style={{\n                        position: 'absolute',\n                        inset: 0,\n                        zIndex: maskImageParams.length - index,\n                        backdropFilter: `blur(${blurAmountParams[index]}px)`,\n                        mask: `linear-gradient(${maskParams})`,\n                    }}\n                />\n            ))}\n        </motion.div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;AAGA,MAAM,gBAAgB,GAAG,CAAC,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,kBAAkB,CAAC,CAAC;AAErF,MAAA,eAAe,GAMxB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,KAAI;IAChD,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,GAAG,OAAO,CAAC,MAAK;QACrD,MAAM,UAAU,GAAa,EAAE,CAAC;QAChC,MAAM,gBAAgB,GAAa,EAAE,CAAC;AACtC,QAAA,MAAM,KAAK,GAAa,CAAC,CAAC,CAAC,CAAC;AAC5B,QAAA,MAAM,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AACrC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;YAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC/B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAClB,KAAK,CAAC,KAAK,EAAE,CAAC;aACjB;YACD,UAAU,CAAC,IAAI,CACX,KAAK;AACA,iBAAA,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,KAAI;gBACpB,MAAM,KAAK,GAAG,gBAAgB,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;gBACrD,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC;gBAC9C,OAAO,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA,CAAG,CAAC;AAC7C,aAAC,CAAC;AACD,iBAAA,IAAI,CAAC,IAAI,CAAC,CAClB,CAAC;SACL;QACD,IAAI,QAAQ,GAAG,UAAU,CAAC;AAC1B,QAAA,KAAK,IAAI,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;AACxC,YAAA,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC;YACnC,QAAQ,IAAI,CAAC,CAAC;SACjB;AAED,QAAA,OAAO,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;KACzC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;IAErC,QACIA,IAAC,MAAM,CAAC,GAAG,EAAK,EAAA,GAAA,IAAI,EACf,QAAA,EAAA,eAAe,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,MACnCA,GAEI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACH,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,KAAK,EAAE,CAAC;AACR,gBAAA,MAAM,EAAE,eAAe,CAAC,MAAM,GAAG,KAAK;AACtC,gBAAA,cAAc,EAAE,CAAQ,KAAA,EAAA,gBAAgB,CAAC,KAAK,CAAC,CAAK,GAAA,CAAA;gBACpD,IAAI,EAAE,CAAmB,gBAAA,EAAA,UAAU,CAAG,CAAA,CAAA;AACzC,aAAA,EAAA,EAPI,KAAK,CAQZ,CACL,CAAC,EAAA,CACO,EACf;AACN;;;;"}