@redneckz/wildless-cms-uni-blocks 0.6.37 → 0.6.38

package/mobile/bundle/bundle.umd.js

@@ -85,6 +85,9 @@
         get CDN() {
             return this._.CDN;
         }
+        get BASE_PATH() {
+            return this._.BASE_PATH;
+        }
         get YANDEX_MAP_API_KEY() {
             return this._.YANDEX_MAP_API_KEY;
         }
@@ -283,8 +286,7 @@
         subscribers = {};
         subjectsStateMap = {};
         subscribe(type, listener) {
-            this.subscribers[type] ||= [];
-            this.subscribers[type]?.push(listener);
+            this.subscribers[type] = (this.subscribers[type] || []).concat(listener);
             const latestEvent = this.subjectsStateMap[type];
             if (latestEvent) {
                 listener(latestEvent);
@@ -297,7 +299,10 @@
             this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
         }
         fire(type, event) {
-            this.subjectsStateMap[type] = event;
+            const isSubjectDeclared = type in this.subjectsStateMap;
+            if (isSubjectDeclared) {
+                this.subjectsStateMap[type] = event;
+            }
             this.subscribers[type]?.forEach((s) => s(event));
         }
         subject(type, event) {
@@ -329,51 +334,71 @@
             .concat(1);
     }
 
-    const changeHashOnObserve = ({ anchor, anchorClickRef }) => (entries) => {
-        if (!entries?.length) {
-            return;
+    const normalizeAnchor = (rawAnchor) => rawAnchor?.replace('#', '');
+    class BlockRouter {
+        static inst = new BlockRouter();
+        eventBus = new EventBus();
+        constructor() {
+            const anchor = normalizeAnchor(globalThis.location?.hash);
+            if (anchor) {
+                this.eventBus.subject('goto', { anchor });
+            }
         }
-        const [entry] = entries;
-        if (!entry.isIntersecting || entry.boundingClientRect.top > 150) {
-            return;
+        goto(rawAnchor) {
+            const anchor = normalizeAnchor(rawAnchor);
+            if (anchor) {
+                this.push(anchor);
+                this.eventBus.fire('goto', { anchor });
+            }
         }
-        if (anchorClickRef?.current?.isScrolling && anchorClickRef.current.label === `#${anchor}`) {
-            EventBus.inst.fire('anchorClick', { isScrolling: false, label: undefined });
-            EventBus.inst.fire('tab', { type: 'link', label: anchor });
+        push(rawAnchor) {
+            globalThis.history?.pushState(null, '', `#${normalizeAnchor(rawAnchor)}`);
         }
-        else if (!anchorClickRef?.current?.isScrolling) {
-            EventBus.inst.fire('tab', { type: 'link', label: anchor });
+        replace(rawAnchor) {
+            globalThis.history?.replaceState(null, '', `#${normalizeAnchor(rawAnchor)}`);
         }
-    };
+        reset() {
+            globalThis.history?.replaceState(null, '', '#');
+        }
+    }
+
+    function useBlockIntersectionObserver(block, router = BlockRouter.inst) {
+        const observerCallback = useCallback((entries) => {
+            if (!block || !entries?.length) {
+                return;
+            }
+            const intersection = entries[entries.length - 1];
+            router.eventBus.fire('intersection', { block, intersection });
+        }, [block, router]);
+        const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
+        useEffect(() => {
+            if (!ref.current) {
+                return undefined;
+            }
+            return router.eventBus.subscribe('goto', ({ anchor }) => {
+                if (ref.current && block?.anchor === anchor) {
+                    ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+            });
+        }, [block, router]);
+        return ref;
+    }
 
     const BlockWrapper = JSX(({ className, block, tag = 'section', role, children }) => {
         const Tag = tag;
-        const { anchor, labels } = block || {};
+        const ref = useBlockIntersectionObserver(block);
         const [isVisible, setVisible] = useState(true);
-        const anchorClickRef = useRef({});
-        const observerCallback = useMemo(() => changeHashOnObserve({ anchor, anchorClickRef }), [anchor]);
-        const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
-        useEffect(() => EventBus.inst.subscribe('anchorClick', (e) => {
-            setVisible(true);
-            anchorClickRef.current = e;
-        }), []);
         useEffect(() => EventBus.inst.subscribe('tab', (event) => {
             if (event.type === 'group') {
-                const hasSettings = labels?.length || block?.anchor;
-                setVisible(event.label ? !hasSettings || Boolean(labels?.includes(event.label)) : true);
+                const hasSettings = block?.labels?.length || block?.anchor;
+                setVisible(event.label ? !hasSettings || Boolean(block?.labels?.includes(event.label)) : true);
             }
             else {
-                changeHash(event.label);
                 setVisible(true);
             }
-        }), []);
-        return isVisible ? (jsx(Tag, { className: className, role: role, ...(anchor ? { id: anchor, ref } : {}), children: children })) : null;
+        }), [block]);
+        return isVisible ? (jsx(Tag, { className: className, role: role, ...(block?.anchor ? { id: block.anchor, ref } : {}), children: children })) : null;
     });
-    function changeHash(label) {
-        if (label) {
-            globalThis.document.location.hash = label;
-        }
-    }
 
     const HeadingClass = {
         h0: 'text-m-title',
@@ -516,7 +541,7 @@
     const icons = ['PlusIcon', 'MinusIcon'];
     const AccordionItem = JSX(({ className = '', label = '', labelIcon, isExpanded, ...rest }) => {
         const { bordered } = getParentBlockContent(rest.options, {});
-        return (jsx("li", { className: `${bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'} border-solid border-main-divider ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton, { className: bordered ? '' : 'py-[14px] px-0', label: label, icon: icons[Number(isUnfolded)], primaryIcon: labelIcon, onClick: onToggle })) }) }));
+        return (jsx("li", { className: `${bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'} border-solid border-main-divider ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton, { className: bordered ? '' : 'py-3.5 px-0', label: label, icon: icons[Number(isUnfolded)], primaryIcon: labelIcon, onClick: onToggle })) }) }));
     });
     AccordionItem.childrenTypes = [];
     const FoldButton = JSX(({ className, icon, label, primaryIcon, onClick }) => (jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text group cursor-pointer ${className}`, onClick: onClick, children: [jsxs("div", { className: "flex group-hover:text-primary-main", children: [primaryIcon ? (jsx(Img, { image: getIconWithVersion(primaryIcon), className: "mr-3 flex-shrink-0", width: "24", height: "24", asSVG: true })) : null, jsx(Text, { size: "text-m-title-xs", font: "font-medium", children: label })] }), jsx(Img, { className: "flex-shrink-0", image: getIconWithVersion({ icon: icon }), width: "24", height: "24", asSVG: true })] })));
@@ -663,6 +688,10 @@
         return (jsxs("div", { className: className, children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount })) : null] }));
     });
 
+    function useBlockRouter() {
+        return BlockRouter.inst;
+    }
+
     const isURL = (href) => href?.includes('//');
     const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
     const getOrigin = (href) => {
@@ -697,9 +726,10 @@
         if (!href) {
             return href;
         }
+        const hrefWithBasePath = `${projectSettings.BASE_PATH || ''}${href}`;
         const origin = getOrigin(router?.href);
         // Relative URL
-        return origin ? href.replace(origin, '') || '/' : href;
+        return origin ? hrefWithBasePath.replace(origin, '') || '/' : hrefWithBasePath;
     };
 
     /* eslint-disable @typescript-eslint/ban-types */
@@ -731,6 +761,7 @@
 
     function useLink() {
         const router = useRouter();
+        const blockRouter = useBlockRouter();
         return (props) => {
             const href = adjustHref(props.href, router);
             return {
@@ -741,8 +772,15 @@
                     props.onClick && props.onClick(ev);
                     const isLocalHref = href && !isURL(href);
                     const isLocalTarget = !props.target || props.target === '_self';
-                    if (isLocalHref && isLocalTarget && !isHash(href)) {
-                        ev?.preventDefault();
+                    if (!isLocalHref || !isLocalTarget) {
+                        // Default handle
+                        return;
+                    }
+                    ev?.preventDefault();
+                    if (isHash(href)) {
+                        blockRouter.goto(href);
+                    }
+                    else {
                         router.push(href);
                     }
                 }, props),
@@ -958,7 +996,7 @@
 
     const SearchBar = JSX((props) => (jsx(SearchBarInner, { ...props, isMobile: true })));
 
-    const LinkList = JSX(({ className = '', documents, ...rest }) => (jsx(BlockWrapper, { className: `font-sans bg-white mt-[10px] ${className}`, ...rest, children: jsx("ul", { className: "flex flex-col text-s text-secondary-text p-0", children: documents?.length ? renderLinkListItem(documents) : null }) })));
+    const LinkList = JSX(({ className = '', documents, ...rest }) => (jsx(BlockWrapper, { className: `font-sans bg-white mt-2.5 ${className}`, ...rest, children: jsx("ul", { className: "flex flex-col text-s text-secondary-text p-0", children: documents?.length ? renderLinkListItem(documents) : null }) })));
     const renderLinkListItem = (documents) => {
         return documents.map((doc, i) => {
             const { text, ...linkProps } = doc;
@@ -983,7 +1021,7 @@
     });
 
     const MobileAppTile = JSX(({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
-        return (jsx("div", { className: `col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light font-sans ${className}`, children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]", children: jsx(Logo, { className: "w-8", bgColor: "transparent", showTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-s font-medium mb-[3px]", children: title }), jsx("div", { className: "text-s text-secondary-text", children: description })] })] })) : null }));
+        return (jsx("div", { className: `col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light font-sans ${className}`, children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-12 h-12", children: jsx(Logo, { className: "w-8", bgColor: "transparent", showTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-s font-medium mb-[3px]", children: title }), jsx("div", { className: "text-s text-secondary-text", children: description })] })] })) : null }));
     });
 
     const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
@@ -1047,7 +1085,7 @@
         }
         const classes = version === 'secondary'
             ? 'bg-white hover:bg-secondary-hover'
-            : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
+            : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
         const isPrimary = version === 'primary';
         return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: icon ? (jsx(Img, { image: getIconWithVersion(icon), imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
     });
@@ -1085,7 +1123,7 @@
         return (jsxs("section", { className: `relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`, children: [jsxs("div", { className: "flex flex-col items-center mb-5", children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${headingClassName}`, title: title })) : null, description ? (jsx("div", { className: "text-m max-w-[600px] text-center mb-5", children: description })) : null] }), renderCardsLayout(orientation, cards)] }));
     });
     function renderCardsLayout(orientation, cards) {
-        return orientation === 'horizontal' ? (jsx(SwipeListControl, { children: cards?.map(renderCard) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard) }));
+        return orientation === 'horizontal' ? (jsx(SwipeListControl, { children: cards?.map(renderCard) })) : (jsx("div", { className: "grid gap-3.5", children: cards?.map(renderCard) }));
     }
     function renderCard(card, key) {
         return (jsxs("div", { className: `w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-main-stroke p-4
@@ -1127,7 +1165,7 @@
         checkIsHrefSameOrigin(topItem.href, router);
 
     const TEXT_CLASSES = 'font-sans text-s';
-    const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
+    const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
     const HeaderItem = JSX(({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
         return (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, onClick: onClick, children: [jsx("span", { className: getTextClasses(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] }));
     });
@@ -1170,7 +1208,7 @@
         return (jsxs("a", { href: href, className: "flex text-s mb-4 hover:text-primary-main", children: [icon ? (jsx(Img, { className: "text-primary-main pr-1", image: icon, width: "24", height: "24", asSVG: true })) : null, jsx("span", { className: "font-medium pl-0.5", children: text })] }, `headerSubMenu-${i}`));
     };
 
-    const HeaderTop = JSX(({ onClick, bgColor }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-[50px]", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pl-0 pr-4 border-0 bg-transparent cursor-pointer", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Img, { image: { icon: 'BurgerIcon', iconVersion: bgColor === 'bg-white' ? 'black' : 'white' }, className: "text-primary-text w-6 h-6", width: "24", height: "24", asSVG: true }) }), jsx(Logo, { className: "mr-8", bgColor: bgColor })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-s border-0 bg-transparent cursor-pointer`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
+    const HeaderTop = JSX(({ onClick, bgColor }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-12", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pl-0 pr-4 border-0 bg-transparent cursor-pointer", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Img, { image: { icon: 'BurgerIcon', iconVersion: bgColor === 'bg-white' ? 'black' : 'white' }, className: "text-primary-text w-6 h-6", width: "24", height: "24", asSVG: true }) }), jsx(Logo, { className: "mr-8", bgColor: bgColor })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-s border-0 bg-transparent cursor-pointer`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
 
     const Header = JSX(({ className = '', bgColor = 'bg-white', ...rest }) => {
         const router = useRouter();
@@ -1181,7 +1219,7 @@
         const activeSubItem = findActiveSubItem(router)(subItems);
         const [burgerMenuShow, setBurgerMenuShow] = useState(false);
         const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
-        return (jsxs("header", { className: `${bgColor} ${className}`, children: [jsxs("div", { className: "container px-4 py-0 box-border", children: [jsx(HeaderTop, { onClick: handleBurgerMenuShow, bgColor: bgColor }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]", children: jsx("div", { className: "flex no-scrollbar horizontal-list h-full items-center", children: subItems?.map((_, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-s", active: _ === activeSubItem, bgColor: bgColor, ..._ }, String(i)))) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { onClick: handleBurgerMenuShow, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx(AccordionItemsList, { children: topItems?.map((item, i) => (jsx(AccordionItem, { label: item.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }) })) : null] }));
+        return (jsxs("header", { className: `${bgColor} ${className}`, children: [jsxs("div", { className: "container px-4 py-0 box-border", children: [jsx(HeaderTop, { onClick: handleBurgerMenuShow, bgColor: bgColor }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-12", children: jsx("div", { className: "flex no-scrollbar horizontal-list h-full items-center", children: subItems?.map((_, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-s", active: _ === activeSubItem, bgColor: bgColor, ..._ }, String(i)))) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { onClick: handleBurgerMenuShow, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx(AccordionItemsList, { children: topItems?.map((item, i) => (jsx(AccordionItem, { label: item.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }) })) : null] }));
     });
 
     const AlignText = {
@@ -1377,7 +1415,7 @@
         else if (benefitsVersion === 'normal') {
             bgColorStyle = 'bg-secondary-light text-primary-main';
         }
-        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
+        return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
     }
 
     const renderBenefit = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
@@ -1424,11 +1462,11 @@
 
     const STEPS_SIZE_MAP = {
         normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
-        small: 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]',
+        small: 'h-12 w-12 min-w-12 min-h-12',
     };
     const STEPS_TILE_DESCRIPTION_HEIGHT_MAP = {
         normal: 'min-h-[70px]',
-        small: 'min-h-[50px]',
+        small: 'min-h-12',
     };
     const StepsBlock = JSX(({ className, title, description, showLines = true, steps, size = 'normal', version = 'primary', }) => {
         const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
@@ -1439,7 +1477,7 @@
         const isLastStep = steps.length - 1 === i;
         const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
         const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
-        return (jsx("div", { children: jsxs("div", { className: "flex flex-row text-center relative", children: [jsxs("div", { className: "overflow-hidden flex-shrink-0", children: [renderIconArea(size, version)(step, i), isLastStep ? null : (jsx("div", { className: `min-h-8 h-full w-[2px] ${showLines ? styleMap.iconConnector : ''} ${margin}` }))] }), jsxs("div", { className: `flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`, children: [step.label ? (jsx("div", { className: "text-m-title-xs font-medium m-0 text-left mb-1", children: step.label })) : null, step.description ? (jsx("div", { className: `text-s ${styleMap.description} text-left`, children: step.description })) : null] })] }) }, String(i)));
+        return (jsx("div", { children: jsxs("div", { className: "flex flex-row text-center relative", children: [jsxs("div", { className: "overflow-hidden flex-shrink-0", children: [renderIconArea(size, version)(step, i), isLastStep ? null : (jsx("div", { className: `min-h-8 h-full w-0.5 ${showLines ? styleMap.iconConnector : ''} ${margin}` }))] }), jsxs("div", { className: `flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`, children: [step.label ? (jsx("div", { className: "text-m-title-xs font-medium m-0 text-left mb-1", children: step.label })) : null, step.description ? (jsx("div", { className: `text-s ${styleMap.description} text-left`, children: step.description })) : null] })] }) }, String(i)));
     };
     const renderIconArea = (size, version) => (step, i) => {
         const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
@@ -1546,6 +1584,63 @@
         Placeholder,
     };
 
+    const debounce = (fn, delay = 600) => {
+        let timerId;
+        const debouncedCallback = (...args) => {
+            debouncedCallback.dispose();
+            timerId = setTimeout(() => {
+                fn(...args);
+            }, delay);
+        };
+        debouncedCallback.dispose = () => {
+            if (timerId) {
+                clearTimeout(timerId);
+            }
+        };
+        return debouncedCallback;
+    };
+
+    const SPECIAL_BLOCK_TYPES = ['Header', 'Footer'];
+    const EPS = 0.01;
+    const topLineDelta = ([, { target }]) => Math.abs(target.getBoundingClientRect().top);
+    function findActiveBlock(intersections) {
+        const visibleIntersections = intersections
+            .filter(([block]) => !SPECIAL_BLOCK_TYPES.includes(block.type || ''))
+            .filter(([, { intersectionRatio }]) => intersectionRatio > EPS);
+        const [activeBlock] = visibleIntersections.length > 0 ? minBy(topLineDelta)(visibleIntersections) : [];
+        return activeBlock;
+    }
+
+    const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
+    function useBlockRouterProvider(router = BlockRouter.inst, scrollTarget = globalThis) {
+        const intersectionsMapRef = useRef(new Map());
+        useEffect(() => router.eventBus.subscribe('intersection', ({ block, intersection }) => {
+            if (intersectionsMapRef.current) {
+                intersectionsMapRef.current.set(block, intersection);
+            }
+        }), [router]);
+        useEffect(() => {
+            const handleScroll = debounce(() => {
+                if (!isScrolledEnough()) {
+                    router.reset();
+                    return;
+                }
+                const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
+                if (activeBlock?.anchor) {
+                    router.replace(activeBlock.anchor);
+                }
+                else if (!activeBlock) {
+                    router.reset();
+                }
+            }, 100);
+            scrollTarget.addEventListener('scroll', handleScroll);
+            return () => {
+                handleScroll.dispose();
+                scrollTarget.removeEventListener('scroll', handleScroll);
+            };
+        }, [router, scrollTarget]);
+    }
+
     const api = LikeAPI();
     function useLikeService(pagePath) {
         const [likeCount, setLikeCount] = useState(0);
@@ -1597,6 +1692,7 @@
             blockDecorator,
             parent: data,
         };
+        useBlockRouterProvider();
         return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
                         ...options,
                         slotName: 'header',
@@ -1617,7 +1713,7 @@
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
 
-    const packageVersion = "0.6.37";
+    const packageVersion = "0.6.38";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;