@cntrl-site/sdk-nextjs 0.11.1 → 0.12.1

package/src/components/Article.tsx

@@ -24,7 +24,7 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
           return (
             <Section section={section} key={section.id} data={data}>
               {article.sections[i].items.map(item => (
-                <Item item={item} key={item.id} />
+                <Item item={item} key={item.id} sectionId={section.id} />
               ))}
             </Section>
           );

package/src/components/Item.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC, useEffect, useId, useRef, useState } from 'react';
+import { ComponentType, FC, useEffect, useId, useRef } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   ArticleItemSizingType as SizingType,
@@ -18,13 +18,13 @@ import { useCntrlContext } from '../provider/useCntrlContext';
 import { useItemPosition } from './useItemPosition';
 import { useItemDimensions } from './useItemDimensions';
 import { getItemTopStyle, useItemSticky } from './items/useItemSticky';
-import { castObject } from '../utils/castObject';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 import { useItemScale } from './useItemScale';
 import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
+  sectionId: string;
 }
 
 const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
@@ -39,16 +39,14 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
 
 const noop = () => null;
 
-export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
+export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const { scale, scaleAnchor } = useItemScale(item);
-  const position = useItemPosition(item);
+  const { scale, scaleAnchor } = useItemScale(item, sectionId);
+  const position = useItemPosition(item, sectionId);
   const layout = useCurrentLayout();
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  const [parentOffsetTop, setParentOffsetTop] = useState(0);
-  const { top, isFixed } = useItemSticky(position.top, parentOffsetTop, item);
-  const { width, height } = useItemDimensions(item);
+  const { top, isFixed } = useItemSticky(position.top, item, sectionId);
+  const { width, height } = useItemDimensions(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area];
   const isInitialRef = useRef(true);
   if (item.layoutParams) {
@@ -65,12 +63,6 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
     isInitialRef.current = false;
   }, []);
 
-  useEffect(() => {
-    if (!ref) return;
-    const offsetParent = castObject(ref.offsetParent, HTMLElement);
-    setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
-  }, [ref]);
-
   const styles = {
     transform: `scale(${scale})`,
     transformOrigin: ScaleAnchorMap[scaleAnchor],
@@ -84,10 +76,9 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
     <div
       suppressHydrationWarning={true}
       className={`item-${item.id}`}
-      ref={setRef}
       style={isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed': 'absolute' } }
     >
-      <ItemComponent item={item} />
+      <ItemComponent item={item} sectionId={sectionId} />
       <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
           const sizingAxis = parseSizing(layoutParams.sizing);

package/src/components/Section.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, useId } from 'react';
+import { FC, ReactElement, useId, useRef } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   getLayoutMediaQuery,
@@ -9,6 +9,7 @@ import {
 } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../provider/useCntrlContext';
 import { useSectionColor } from './useSectionColor';
+import { useSectionRegistry } from '../utils/ArticleRectManager/useSectionRegistry';
 
 type SectionChild = ReactElement<any, any>;
 
@@ -20,9 +21,11 @@ interface Props {
 
 export const Section: FC<Props> = ({ section, data, children }) => {
   const id = useId();
+  const sectionRef = useRef<HTMLDivElement | null>(null);
   const { layouts, customSections } = useCntrlContext();
   const backgroundColor = useSectionColor(section.color);
   const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+  useSectionRegistry(section.id, sectionRef.current);
   const getSectionVisibilityStyles = () => {
     return layouts
       .sort((a, b) => a.startsWith - b.startsWith)
@@ -48,6 +51,7 @@ export const Section: FC<Props> = ({ section, data, children }) => {
         style={{
           backgroundColor: backgroundColor
         }}
+        ref={sectionRef}
       >
         {children}
       </div>

package/src/components/items/ImageItem.tsx

@@ -6,10 +6,10 @@ import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 
-export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
+export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
   const id = useId();
-  const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item);
-  const angle = useItemAngle(item);
+  const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>

package/src/components/items/RectangleItem.tsx

@@ -6,33 +6,45 @@ import { LinkWrapper } from '../LinkWrapper';
 import { useRectangleItem } from './useRectangleItem';
 import { useItemAngle } from '../useItemAngle';
 
-export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
+export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }) => {
   const id = useId();
-  const { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item);
-  const angle = useItemAngle(item);
-  const backgroundColor = useMemo(() => CntrlColor.parse(fillColor).toCss(), [fillColor]);
-  const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+  const { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
+  const backgroundColor = useMemo(() => CntrlColor.parse(fillColor), [fillColor]);
+  const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
 
   return (
     <LinkWrapper url={item.link?.url}>
       <>
-        <div className={`rectangle-${item.id}`}
+        <div  className={`rectangle-${item.id}`}
           style={{
-            backgroundColor: `${backgroundColor}`,
+            backgroundColor: `${backgroundColor.toCss()}`,
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
-            borderColor: `${borderColor}`,
+            borderColor: `${borderColor.toCss()}`,
             transform: `rotate(${angle}deg)`
           }}
         />
         <JSXStyle id={id}>{`
-         .rectangle-${item.id} {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            border-style: solid;
-            box-sizing: border-box;
+        @supports (color: oklch(42% 0.3 90 / 1)) {
+          .rectangle-${item.id} {
+            background-color: ${backgroundColor.fmt('oklch')};
+            border-color: ${borderColor.fmt('oklch')};
           }
+        }
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .rectangle-${item.id} {
+            background-color: ${backgroundColor.fmt('rgba')};
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
+        .rectangle-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border-style: solid;
+          box-sizing: border-box;
+        }
       `}</JSXStyle>
       </>
     </LinkWrapper>

package/src/components/items/RichTextItem.tsx

@@ -5,9 +5,9 @@ import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
 import { useItemAngle } from '../useItemAngle';
 
-export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item }) => {
+export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId }) => {
   const [content, styles, preset] = useRichTextItem(item);
-  const angle = useItemAngle(item);
+  const angle = useItemAngle(item, sectionId);
   const className = preset ? `cntrl-preset-${preset.id}` : undefined;
   return (
     <>

package/src/components/items/VideoItem.tsx

@@ -6,10 +6,10 @@ import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 
-export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
+export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
   const id = useId();
-  const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item);
-  const angle = useItemAngle(item);
+  const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>

package/src/components/items/VimeoEmbed.tsx

@@ -6,10 +6,10 @@ import { LinkWrapper } from '../LinkWrapper';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
 
-export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
+export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId }) => {
   const id = useId();
-  const { radius } = useEmbedVideoItem(item);
-  const angle = useItemAngle(item);
+  const { radius } = useEmbedVideoItem(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
   const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);

package/src/components/items/YoutubeEmbed.tsx

@@ -7,11 +7,11 @@ import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
 
-export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) => {
+export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId }) => {
   const id = useId();
   const { autoplay, controls, url } = item.commonParams;
-  const { radius } = useEmbedVideoItem(item);
-  const angle = useItemAngle(item);
+  const { radius } = useEmbedVideoItem(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
 
   const getValidYoutubeUrl = (url: string): string => {
     const newUrl = new URL(url);

package/src/components/items/useEmbedVideoItem.ts

@@ -2,7 +2,7 @@ import { TVimeoEmbedItem, TYoutubeEmbedItem } from '@cntrl-site/core';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 
-export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem) => {
+export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem, sectionId: string) => {
   const layoutId = useCurrentLayout();
   const radius = useKeyframeValue(
     item,
@@ -12,6 +12,7 @@ export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem) =>
       return  'radius' in layoutParams ? layoutParams.radius : 0;
     },
     (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    sectionId,
     [layoutId]
   );
 

package/src/components/items/useFileItem.ts

@@ -1,10 +1,10 @@
-import { CntrlColor, TImageItem, TVideoItem } from '@cntrl-site/sdk';
+import { TImageItem, TVideoItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
-export const useFileItem = (item: TImageItem | TVideoItem) => {
+export const useFileItem = (item: TImageItem | TVideoItem, sectionId: string) => {
   const layoutId = useCurrentLayout();
   const radius = useKeyframeValue(
     item,
@@ -14,6 +14,7 @@ export const useFileItem = (item: TImageItem | TVideoItem) => {
       return  'radius' in layoutParams ? layoutParams.radius : 0;
     },
     (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    sectionId,
     [layoutId]
   );
   const strokeWidth = useKeyframeValue(
@@ -24,6 +25,7 @@ export const useFileItem = (item: TImageItem | TVideoItem) => {
       return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
     },
     (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth,
+    sectionId,
     [layoutId]
   );
 
@@ -35,6 +37,7 @@ export const useFileItem = (item: TImageItem | TVideoItem) => {
       return 'opacity' in layoutParams ? layoutParams.opacity : 0;
     },
     (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    sectionId,
     [layoutId]
   );
 
@@ -45,7 +48,8 @@ export const useFileItem = (item: TImageItem | TVideoItem) => {
       const layoutParams = item.layoutParams[layoutId];
       return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     },
-    (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color
+    (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color,
+    sectionId
   );
 
   return { radius, strokeWidth, opacity, strokeColor };

package/src/components/items/useItemSticky.ts

@@ -4,7 +4,7 @@ import { StickyManager } from '../../utils/StickyManager/StickyManager';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 import { ArticleRectContext } from '../../provider/ArticleRectContext';
 
-export const useItemSticky = (top: number, parentOffsetTop: number, item: TArticleItemAny) => {
+export const useItemSticky = (top: number, item: TArticleItemAny, sectionId: string) => {
   const [isFixed, setIsFixed] = useState(false);
   const [adjustedTop, setAdjustedTop] = useState(top);
   const articleRectObserver = useContext(ArticleRectContext);
@@ -16,20 +16,19 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
     setIsFixed(stickyManager.getIsSticky(scroll));
     setAdjustedTop(stickyManager.getPosition(
       scroll,
-      top,
-      parentOffsetTop
+      top
     ));
-  }, [top, stickyManager, parentOffsetTop]);
+  }, [top, stickyManager]);
 
   useEffect(() => {
     if (!articleRectObserver) return;
-      handleSticky(articleRectObserver.scroll);
+      handleSticky(articleRectObserver.getSectionScroll(sectionId));
   }, [handleSticky, articleRectObserver]);
 
   useEffect(() => {
     if (!articleRectObserver || !sticky) return;
     return articleRectObserver.on('scroll', () => {
-      handleSticky(articleRectObserver.scroll);
+      handleSticky(articleRectObserver.getSectionScroll(sectionId));
     });
   }, [handleSticky, articleRectObserver, sticky]);
   return {

package/src/components/items/useRectangleItem.ts

@@ -1,10 +1,10 @@
-import { CntrlColor, TRectangleItem } from '@cntrl-site/sdk';
+import { TRectangleItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
-export const useRectangleItem = (item: TRectangleItem) => {
+export const useRectangleItem = (item: TRectangleItem, sectionId: string) => {
   const layoutId = useCurrentLayout();
   const radius = useKeyframeValue(
     item,
@@ -14,6 +14,7 @@ export const useRectangleItem = (item: TRectangleItem) => {
       return  'radius' in layoutParams ? layoutParams.radius : 0;
     },
     (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    sectionId,
     [layoutId]
   );
   const strokeWidth = useKeyframeValue(
@@ -24,6 +25,7 @@ export const useRectangleItem = (item: TRectangleItem) => {
       return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
     },
     (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth,
+    sectionId,
     [layoutId]
   );
   const fillColor = useKeyframeValue(
@@ -34,6 +36,7 @@ export const useRectangleItem = (item: TRectangleItem) => {
       return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
     },
     (animator, scroll, value) => animator.getColor({ color: value }, scroll).color,
+    sectionId,
     [layoutId]
   );
   const strokeColor = useKeyframeValue(
@@ -44,6 +47,7 @@ export const useRectangleItem = (item: TRectangleItem) => {
       return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     },
     (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color,
+    sectionId,
     [layoutId]
   );
   return { fillColor, strokeWidth, radius, strokeColor };

package/src/components/useItemAngle.ts

@@ -1,11 +1,12 @@
 import { TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 
-export const useItemAngle = (item: TArticleItemAny) => {
+export const useItemAngle = (item: TArticleItemAny, sectionId: string) => {
   const { angle } = useKeyframeValue(
     item,
     (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }),
-    (animator, scroll, value) => animator.getRotation(value, scroll)
+    (animator, scroll, value) => animator.getRotation(value, scroll),
+    sectionId
   );
   return angle;
 };

package/src/components/useItemDimensions.ts

@@ -11,12 +11,13 @@ const defaultArea = {
   zIndex: 0
 };
 
-export const useItemDimensions = (item: TArticleItemAny) => {
+export const useItemDimensions = (item: TArticleItemAny, sectionId: string) => {
   const layoutId = useCurrentLayout();
   const { width, height } = useKeyframeValue<{ width: number; height: number }>(
     item,
     (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea,
     (animator, scroll, value) => animator.getDimensions(value, scroll),
+    sectionId,
     [layoutId]
   );
   return { width, height };

package/src/components/useItemPosition.ts

@@ -2,12 +2,13 @@ import { TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 
-export const useItemPosition = (item: TArticleItemAny) => {
+export const useItemPosition = (item: TArticleItemAny, sectionId: string) => {
   const layoutId = useCurrentLayout();
   const { top, left } = useKeyframeValue<{ top: number; left: number }>(
     item,
     (item, layoutId) => item.area[layoutId],
     (animator, scroll, value) => animator.getPositions(value, scroll),
+    sectionId,
     [layoutId]
   );
   return { top, left };

package/src/components/useItemScale.ts

@@ -2,12 +2,13 @@ import { TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 
-export const useItemScale = (item: TArticleItemAny) => {
+export const useItemScale = (item: TArticleItemAny, sectionId: string) => {
   const layout = useCurrentLayout();
   const { scale } = useKeyframeValue(
     item,
     (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }),
-    (animator, scroll, value) => animator.getScale(value, scroll)
+    (animator, scroll, value) => animator.getScale(value, scroll),
+    sectionId
   );
   const scaleAnchor = item.area[layout].scaleAnchor;
 

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -8,18 +8,27 @@ interface EventMap {
 export class ArticleRectObserver extends EventEmitter<EventMap> {
   private resizeObserver: ResizeObserver;
   private articleWidth: number = 0;
+  private registry: Map<string, HTMLElement> = new Map();
   private scrollPos: number = window.scrollY;
   private animationFrame: number = NaN;
+  private parent: HTMLElement | undefined = undefined;
+  private sectionsScrollMap: Map<string, number> = new Map();
 
   constructor() {
     super();
-    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
   }
 
   get scroll(): number {
     return this.scrollPos;
   }
 
+  getSectionScroll(sectionId: string): number {
+    const sectionTop = this.sectionsScrollMap.get(sectionId);
+    if (sectionTop === undefined) return 0;
+    return - (sectionTop / this.articleWidth - this.scrollPos);
+  }
+
   get width(): number {
     return this.articleWidth;
   }
@@ -28,8 +37,8 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     this.scrollPos = scroll;
   }
 
-  start(el: HTMLElement) {
-    this.resizeObserver.observe(el);
+  init(parent: HTMLElement) {
+    this.parent = parent;
     const onScroll = () => {
       this.handleScroll(window.scrollY);
       if (!isNaN(this.animationFrame)) return;
@@ -40,7 +49,7 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     };
     window.addEventListener('scroll', onScroll);
     return () => {
-      this.resizeObserver.unobserve(el);
+      this.parent = undefined;
       window.removeEventListener('scroll', onScroll);
       if (!isNaN(this.animationFrame)) {
         window.cancelAnimationFrame(this.animationFrame);
@@ -49,22 +58,30 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     };
   }
 
+  register(el: HTMLElement, sectionId: string) {
+    this.registry.set(sectionId, el);
+    this.resizeObserver.observe(el);
+    return () => {
+      this.registry.delete(sectionId);
+      this.resizeObserver.unobserve(el);
+    };
+  }
+
   private handleScroll = (scroll: number) => {
     this.setScroll(scroll / this.articleWidth);
   };
 
-  private handleResize: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
-    const [entry] = entries;
-    if (!entry) return;
-    const element = entry.target;
-    if (!(element instanceof HTMLElement)) return;
-    this.notify(element);
+  private handleResize() {
+    if (!this.parent) return;
+    const parentBoundary = this.parent.getBoundingClientRect();
+    this.articleWidth = parentBoundary.width;
     this.setScroll(window.scrollY / this.articleWidth);
     this.emit('resize', undefined);
+    for (const sectionId of this.registry.keys()) {
+      const el = this.registry.get(sectionId);
+      if (!el) continue;
+      const rect = el.getBoundingClientRect();
+      this.sectionsScrollMap.set(sectionId, rect.top - parentBoundary.top);
+    }
   };
-
-  private notify(el: HTMLElement) {
-    const elBoundary = el.getBoundingClientRect();
-    this.articleWidth = elBoundary.width;
-  }
 }

package/src/utils/ArticleRectManager/useArticleRectObserver.ts

@@ -10,7 +10,7 @@ export const useArticleRectObserver = (el?: HTMLElement | null) => {
 
   useEffect(() => {
     if (!el || !articleRectObserver) return;
-    return articleRectObserver.start(el);
+    return articleRectObserver.init(el);
   }, [el, articleRectObserver]);
 
   return articleRectObserver;

package/src/utils/ArticleRectManager/useSectionRegistry.ts

@@ -0,0 +1,11 @@
+import { useContext, useEffect } from 'react';
+import { ArticleRectContext } from '../../provider/ArticleRectContext';
+
+export const useSectionRegistry = ( sectionId: string, el?: HTMLElement | null) => {
+  const articleRectObserver = useContext(ArticleRectContext);
+
+  useEffect(() => {
+    if (!el || !articleRectObserver) return;
+    return articleRectObserver.register(el, sectionId);
+  }, [el, articleRectObserver]);
+};

package/src/utils/StickyManager/StickyManager.ts

@@ -10,10 +10,10 @@ export class StickyManager {
     return (this.sticky.from <= scroll) && (!this.sticky.to || this.sticky.to >= scroll);
   }
 
-  getPosition(scroll: number, top: number, offsetTop: number): number {
+  getPosition(scroll: number, top: number): number {
     if (!this.sticky) return top;
     if (this.getIsSticky(scroll)) {
-      return top - this.sticky.from + offsetTop;
+      return top - this.sticky.from;
     }
     if (this.sticky.to !== undefined && this.sticky.to <= scroll) {
       return top + this.sticky.to - this.sticky.from;

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>

package/lib/utils/castObject.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.castObject = void 0;
-function castObject(value, ctor) {
-    if (value instanceof ctor) {
-        return value;
-    }
-    throw new TypeError(`passed value "${String(value)}" is not instance of ${ctor.name}`);
-}
-exports.castObject = castObject;