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

package/mobile/src/components/ParagraphBlock/ParagraphBlock.tsx

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { ParagraphBlockContent } from './ParagraphBlockContent';
+
+interface ParagraphBlockProps extends ParagraphBlockContent, UniBlockProps {}
+
+export const ParagraphBlock = JSX<ParagraphBlockProps>((props) => {
+  const { className, text, size, color, align, font, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <Paragraph size={size} color={color} align={align} font={font}>
+        {text}
+      </Paragraph>
+    </BlockWrapper>
+  );
+});

package/mobile/src/components/ParagraphBlock/ParagraphBlock.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/ParagraphBlock/ParagraphBlockContent.ts

@@ -0,0 +1,9 @@
+import type { ParagraphProps } from '../../ui-kit/Paragraph/ParagraphProps';
+
+/**
+ * @title Параграф
+ */
+export interface ParagraphBlockContent extends ParagraphProps {
+  /** @title Текст */
+  text?: string;
+}

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -1,20 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
-import type { ProductGalleryContent, ProductGalleryNav } from './ProductGalleryContent';
+import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-interface RenderNavButtonProps {
-  slide?: ProductGalleryNav;
+interface NavButtonProps {
+  slide?: HeadlineCommonProps;
   i: number;
-  activeSlideIndex?: number;
+  isActive: boolean;
   onClick: () => void;
   version: BlockVersion;
 }
@@ -34,10 +35,11 @@ export const ProductGallery = JSX<ProductGalleryProps>(
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
 
     return (
       <BlockWrapper
-        className={`box-border pt-[50px] overflow-hidden relative font-sans w-100 mb-6 ${className}
+        className={`box-border pt-12 overflow-hidden relative font-sans w-100 mb-6 ${className}
         ${VersionStyleMap[version]}`}
         {...rest}
       >
@@ -54,8 +56,8 @@ export const ProductGallery = JSX<ProductGalleryProps>(
             renderNavButton({
               slide,
               i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
+              isActive: Boolean(i === activeSlideIndex),
+              onClick: () => handleActiveSlideIndex(i),
               version,
             }),
           )}
@@ -77,7 +79,7 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
     >
       <div className="flex grow">
         <ProductBlockInner
-          className={`pl-[50px] z-10 ${additionalClass}`}
+          className={`pl-12 z-10 ${additionalClass}`}
           textBlockClassName="mb-[154px]"
           headlineVersion="XXL"
           {...block}
@@ -87,17 +89,15 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
   );
 }
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick, version }: RenderNavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
+function renderNavButton({ slide, i, isActive, onClick, version }: NavButtonProps) {
+  const btnClassName = isActive
     ? 'bg-white shadow-dark-blue/42 min-w-[350px] border-none p-6'
     : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
       ${VersionStyleMap[version]}`;
-  const btnTitleClassName = isActiveBtn
+  const btnTitleClassName = isActive
     ? 'text-primary-text !text-h6 p-2'
     : `text-l pb-1 ${productBlockStyleMap[version].title}`;
-  const btnDescClassName = isActiveBtn
+  const btnDescClassName = isActive
     ? 'text-secondary-text text-l-light'
     : `text-m-light ${productBlockStyleMap[version].text}`;
 

package/mobile/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -20,31 +20,29 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     branches = [],
     selectedBranch,
     onSelectedBranch,
-  }) => {
-    return (
-      <div className="flex justify-between gap-4 mb-6">
-        <div className="max-w-[396px] w-1/2">
-          <WrapperSelect
-            data={regions}
-            fieldValue="code"
-            fieldLabel="name"
-            selected={selectedRegion}
-            setSelected={onSelectedRegion}
-            label="Регион"
-          />
-        </div>
-        <div className="max-w-[396px] w-1/2">
-          <WrapperSelect
-            data={branches}
-            fieldValue="branchCode"
-            fieldLabel="address"
-            selected={selectedBranch}
-            setSelected={onSelectedBranch}
-            label="Отделение"
-            placeholder="Выберите отделение"
-          />
-        </div>
+  }) => (
+    <div className="flex justify-between gap-4 mb-6">
+      <div className="max-w-[396px] w-1/2">
+        <WrapperSelect
+          data={regions}
+          fieldValue="code"
+          fieldLabel="name"
+          selected={selectedRegion}
+          setSelected={onSelectedRegion}
+          label="Регион"
+        />
       </div>
-    );
-  },
+      <div className="max-w-[396px] w-1/2">
+        <WrapperSelect
+          data={branches}
+          fieldValue="branchCode"
+          fieldLabel="address"
+          selected={selectedBranch}
+          setSelected={onSelectedBranch}
+          label="Отделение"
+          placeholder="Выберите отделение"
+        />
+      </div>
+    </div>
+  ),
 );

package/mobile/src/components/SafeDepositRental/RenderRadioButtons.tsx

@@ -1,11 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks/core';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks/core';
 import { Radio } from '../../ui-kit/Radio/Radio';
 
 export const RenderRadioButtons = JSX(() => {
   const [selectedOption, setSelectedOption] = useState('option2');
-
-  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelectedOption(_.target.value);
+  const onChange = useCallback((_: string) => setSelectedOption(_), []);
 
   return (
     <div>

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -18,6 +18,7 @@ const DEFAULT_DAYS = 26;
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
   ({ title, footnote, className = '', ...rest }) => {
     const [showMap, setShowMap] = useState<boolean>(false);
+    const handleShowMap = useCallback(() => setShowMap((_) => !_), []);
     const [safeDepositState, setStateDepositState] = useState<SafeDepositRentalState>({
       selectedRegion: '',
       selectedBranch: '',
@@ -37,10 +38,6 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
       [setStateDepositState],
     );
 
-    const onShowMapToggle = () => {
-      setShowMap(!showMap);
-    };
-
     const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
 
     return (
@@ -58,7 +55,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
             regions={regions}
             branches={branches}
             data={{ ...safeDepositState, selectedRegion }}
-            onShowMapToggle={onShowMapToggle}
+            onClick={handleShowMap}
             onChange={handleChangeSafeDepositState}
           />
           {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}

package/mobile/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -13,7 +13,7 @@ export interface SafeDepositRentalFieldsProps extends SafeDepositRentalState {
   safeBoxCases?: SafeBoxCase[];
   caseVolumes?: SafeBoxCaseVolume[];
   branches?: Branch[];
-  onShowMapToggle: () => void;
+  onClick: () => void;
   onChange: HandleChangeState;
 }
 
@@ -29,7 +29,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     safeBoxCases,
     caseVolumes,
     onChange,
-    onShowMapToggle,
+    onClick,
   }) => {
     return (
       <div className="flex-1 mr-9">
@@ -53,7 +53,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
         <span className="text-secondary-text text-l-light">Тип договора</span>
         <div className="flex justify-between items-center mt-5">
           <RenderRadioButtons />
-          <Button text="Офисы на карте" version="primary" onClick={onShowMapToggle} />
+          <Button text="Офисы на карте" version="primary" onClick={onClick} />
         </div>
       </div>
     );

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -11,12 +11,12 @@ export interface SafeDepositRentalFormProps {
   regions: Region[];
   branches: Branch[];
   data: SafeDepositRentalState;
-  onShowMapToggle: () => void;
+  onClick: () => void;
   onChange: (data: Partial<SafeDepositRentalState>) => void;
 }
 
 export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) => {
-  const { regions, data, branches, onChange, onShowMapToggle } = props;
+  const { regions, data, branches, onChange, onClick } = props;
 
   useEffect(() => {
     onChange({
@@ -41,7 +41,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
       <SafeDepositRentalFields
         {...data}
         regions={regions}
-        onShowMapToggle={onShowMapToggle}
+        onClick={onClick}
         branches={branches}
         caseVolumes={caseVolumes}
         safeBoxCases={safeBoxCases}

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -13,12 +13,12 @@ export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
   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: Record<SizeVersion, string> = {
   normal: 'min-h-[70px]',
-  small: 'min-h-[50px]',
+  small: 'min-h-12',
 };
 
 export const StepsBlock = JSX<StepsBlockProps>(
@@ -72,7 +72,7 @@ const renderStepTitle =
             {renderIconArea(size, version)(step, i)}
             {isLastStep ? null : (
               <div
-                className={`min-h-8 h-full w-[2px] ${
+                className={`min-h-8 h-full w-0.5 ${
                   showLines ? styleMap.iconConnector : ''
                 } ${margin}`}
               />

package/mobile/src/components/Tabs/LinkTab.tsx

@@ -1,6 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { EventBus } from '../../EventBus/EventBus';
 import { useLink } from '../../hooks/useLink';
 import {
   ACTIVE_LINK_CLASSES,
@@ -15,20 +13,14 @@ import type { LinkTabData, TabData } from './TabsContent';
 interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
-  onClick?: (tab: TabData) => void;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab, onClick } = props;
+  const { tab, currentTab } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
-  const handleClick = useCallback(() => {
-    onClick && onClick(tab);
-    EventBus.inst.fire('anchorClick', { isScrolling: true, label: tab.href });
-  }, [tab, onClick]);
-
   const link = useLink();
-  const adjustedProps = link({ ...tab, onClick: handleClick });
+  const adjustedProps = link(tab);
 
   return (
     <a

package/mobile/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -11,11 +11,6 @@ export interface TabActivationEvent {
   label?: string;
 }
 
-export interface AnchorClickScrollingEvent {
-  isScrolling?: boolean;
-  label?: string;
-}
-
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
@@ -26,10 +21,7 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
   useEffect(
     () =>
       EventBus.inst.subscribe('tab', (event) => {
-        if (!tabs) {
-          return;
-        }
-        const tab = tabs.find(checkTab(event));
+        const tab = tabs?.find(checkTab(event));
         if (event.type === 'link' && tab) {
           setCurrentTab(tab);
         }
@@ -37,20 +29,20 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
     [tabs],
   );
 
-  useEffect(() => {
-    if (currentTab?.type === 'group') {
-      return EventBus.inst.subject('tab', { label: currentTab.ref });
-    }
-
-    return undefined;
-  }, [currentTab]);
+  useEffect(
+    () =>
+      currentTab?.type === 'group'
+        ? EventBus.inst.subject('tab', { label: currentTab.ref })
+        : undefined,
+    [currentTab],
+  );
 
-  const handleClick = (selectedTab: TabData) => {
+  const handleClick = useCallback((selectedTab: TabData) => {
     if (selectedTab?.type === 'group') {
       EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
     }
     setCurrentTab(selectedTab);
-  };
+  }, []);
 
   return (
     <BlockWrapper

package/mobile/src/components/TariffsTable/TableTileHeader.tsx

@@ -3,13 +3,11 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableRowHeader } from './TariffsTableContent';
 
-export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => {
-  return (
-    <div className="flex gap-2.5 mb-2">
-      {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
-      {icon ? (
-        <Img className="ml-auto max-w-6 max-h-6" image={icon} width="24px" height="24px" />
-      ) : null}
-    </div>
-  );
-});
+export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => (
+  <div className="flex gap-2.5 mb-2">
+    {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
+    {icon ? (
+      <Img className="ml-auto max-w-6 max-h-6" image={icon} width="24px" height="24px" />
+    ) : null}
+  </div>
+));

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
@@ -19,8 +19,15 @@ export interface TariffsTableRowProps extends UniBlockProps {
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
   ({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
     const [tableInner, setTableInner] = useState<TariffsTableInnerContent | undefined>(undefined);
+    const handleSetTableInner = useCallback(
+      (_: TariffsTableInnerContent | undefined) => setTableInner(_),
+      [],
+    );
     const [openTableInnerIdx, setOpenTableInnerIdx] = useState<number | undefined>(undefined);
-
+    const handleOpenTableInnerIdx = useCallback(
+      (_: number | undefined) => setOpenTableInnerIdx(_),
+      [],
+    );
     const onHideContentClick = () => setTableInner(undefined);
 
     return (
@@ -33,7 +40,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
           <div className="flex items-center text-primary-text" role="cell">
             {header?.icon ? (
               <Img
-                className="mr-[14px] max-w-6 max-h-6"
+                className="mr-3.5 max-w-6 max-h-6"
                 image={getIconWithVersion(header.icon)}
                 width="24px"
                 height="24px"
@@ -55,10 +62,10 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 cells={cells}
                 rowIdx={rowIdx}
                 cellIdx={i}
-                setTableInner={setTableInner}
+                setTableInner={handleSetTableInner}
                 tableInner={tableInner}
                 openTableInnerIdx={openTableInnerIdx}
-                setOpenTableInnerIdx={setOpenTableInnerIdx}
+                setOpenTableInnerIdx={handleOpenTableInnerIdx}
                 {...rest}
               />
             ))}

package/mobile/src/components/Video/VideoContent.ts

@@ -1,6 +1,7 @@
 import type { TitleProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 
+/** @title Блок Видео */
 export interface VideoContent extends TitleProps {
   /** @title URL */
   src?: string;

package/mobile/src/hooks/useLink.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../model/LinkProps';
+import { useBlockRouter } from '../services/BlockRouter/useBlockRouter';
 import { adjustHref } from '../utils/adjustHref';
 import { isHash, isURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
@@ -12,6 +13,7 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
   props: L,
 ) => L & ClickHandler {
   const router = useRouter();
+  const blockRouter = useBlockRouter();
 
   return (props) => {
     const href = adjustHref(props.href, router);
@@ -22,10 +24,19 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
       'aria-label': props.text,
       onClick: handlerDecorator((ev?: { preventDefault: () => void }) => {
         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),

package/mobile/src/services/BlockRouter/BlockIntersection.ts

@@ -0,0 +1,3 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export type BlockIntersection = [BlockDef, IntersectionObserverEntry];

package/mobile/src/services/BlockRouter/BlockRouter.ts

@@ -0,0 +1,51 @@
+import { EventBus } from '../../EventBus/EventBus';
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export interface GotoAnchorEvent {
+  anchor: string;
+}
+
+export interface BlockIntersectionEvent {
+  block: BlockDef;
+  intersection: IntersectionObserverEntry;
+}
+
+interface EventMap {
+  goto: GotoAnchorEvent;
+  intersection: BlockIntersectionEvent;
+}
+
+const normalizeAnchor = (rawAnchor?: string) => rawAnchor?.replace('#', '');
+
+export class BlockRouter {
+  public static readonly inst = new BlockRouter();
+
+  readonly eventBus = new EventBus<EventMap>();
+
+  constructor() {
+    const anchor = normalizeAnchor(globalThis.location?.hash);
+    if (anchor) {
+      this.eventBus.subject('goto', { anchor });
+    }
+  }
+
+  goto(rawAnchor: string) {
+    const anchor = normalizeAnchor(rawAnchor);
+    if (anchor) {
+      this.push(anchor);
+      this.eventBus.fire('goto', { anchor });
+    }
+  }
+
+  push(rawAnchor: string) {
+    globalThis.history?.pushState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+  }
+
+  replace(rawAnchor: string) {
+    globalThis.history?.replaceState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+  }
+
+  reset() {
+    globalThis.history?.replaceState(null, '', '#');
+  }
+}

package/mobile/src/services/BlockRouter/findActiveBlock.ts

@@ -0,0 +1,20 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+import { minBy } from '../../utils/minBy';
+import type { BlockIntersection } from './BlockIntersection';
+
+const SPECIAL_BLOCK_TYPES = ['Header', 'Footer'];
+const EPS = 0.01;
+
+const topLineDelta = ([, { target }]: BlockIntersection) =>
+  Math.abs(target.getBoundingClientRect().top);
+
+export function findActiveBlock(intersections: BlockIntersection[]): BlockDef | undefined {
+  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;
+}

package/mobile/src/services/BlockRouter/useBlockIntersectionObserver.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { BlockRouter } from './BlockRouter';
+
+export function useBlockIntersectionObserver(
+  block?: BlockDef,
+  router: BlockRouter = BlockRouter.inst,
+) {
+  const observerCallback = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      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;
+}

package/mobile/src/services/BlockRouter/useBlockRouter.ts

@@ -0,0 +1,5 @@
+import { BlockRouter } from './BlockRouter';
+
+export function useBlockRouter(): BlockRouter {
+  return BlockRouter.inst;
+}