@cntrl-site/sdk-nextjs 0.11.0 → 0.12.0

package/lib/components/items/VideoItem.js

@@ -11,10 +11,10 @@ const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
-const VideoItem = ({ item }) => {
+const VideoItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
-    const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item);
-    const angle = (0, useItemAngle_1.useItemAngle)(item);
+    const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,

package/lib/components/items/VimeoEmbed.js

@@ -10,10 +10,10 @@ const style_1 = __importDefault(require("styled-jsx/style"));
 const LinkWrapper_1 = require("../LinkWrapper");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
-const VimeoEmbedItem = ({ item }) => {
+const VimeoEmbedItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
-    const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item);
-    const angle = (0, useItemAngle_1.useItemAngle)(item);
+    const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);

package/lib/components/items/YoutubeEmbed.js

@@ -11,11 +11,11 @@ const LinkWrapper_1 = require("../LinkWrapper");
 const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
-const YoutubeEmbedItem = ({ item }) => {
+const YoutubeEmbedItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { autoplay, controls, url } = item.commonParams;
-    const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item);
-    const angle = (0, useItemAngle_1.useItemAngle)(item);
+    const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const getValidYoutubeUrl = (url) => {
         const newUrl = new URL(url);
         const id = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);

package/lib/components/items/useEmbedVideoItem.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEmbedVideoItem = void 0;
 const useCurrentLayout_1 = require("../../common/useCurrentLayout");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
-const useEmbedVideoItem = (item) => {
+const useEmbedVideoItem = (item, sectionId) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
-    }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, [layoutId]);
+    }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
     return { radius };
 };
 exports.useEmbedVideoItem = useEmbedVideoItem;

package/lib/components/items/useFileItem.js

@@ -4,32 +4,32 @@ exports.useFileItem = void 0;
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useCurrentLayout_1 = require("../../common/useCurrentLayout");
 const defaultColor = 'rgba(0, 0, 0, 1)';
-const useFileItem = (item) => {
+const useFileItem = (item, sectionId) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
-    }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, [layoutId]);
+    }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
     const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
-    }, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, [layoutId]);
+    }, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, sectionId, [layoutId]);
     const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'opacity' in layoutParams ? layoutParams.opacity : 0;
-    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, [layoutId]);
+    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
     const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return defaultColor;
         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 };
 };
 exports.useFileItem = useFileItem;

package/lib/components/items/useItemSticky.js

@@ -6,7 +6,7 @@ const sdk_1 = require("@cntrl-site/sdk");
 const StickyManager_1 = require("../../utils/StickyManager/StickyManager");
 const useCurrentLayout_1 = require("../../common/useCurrentLayout");
 const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
-const useItemSticky = (top, parentOffsetTop, item) => {
+const useItemSticky = (top, item, sectionId) => {
     const [isFixed, setIsFixed] = (0, react_1.useState)(false);
     const [adjustedTop, setAdjustedTop] = (0, react_1.useState)(top);
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
@@ -15,18 +15,18 @@ const useItemSticky = (top, parentOffsetTop, item) => {
     const stickyManager = (0, react_1.useMemo)(() => new StickyManager_1.StickyManager(sticky), [sticky]);
     const handleSticky = (0, react_1.useCallback)((scroll) => {
         setIsFixed(stickyManager.getIsSticky(scroll));
-        setAdjustedTop(stickyManager.getPosition(scroll, top, parentOffsetTop));
-    }, [top, stickyManager, parentOffsetTop]);
+        setAdjustedTop(stickyManager.getPosition(scroll, top));
+    }, [top, stickyManager]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver)
             return;
-        handleSticky(articleRectObserver.scroll);
+        handleSticky(articleRectObserver.getSectionScroll(sectionId));
     }, [handleSticky, articleRectObserver]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !sticky)
             return;
         return articleRectObserver.on('scroll', () => {
-            handleSticky(articleRectObserver.scroll);
+            handleSticky(articleRectObserver.getSectionScroll(sectionId));
         });
     }, [handleSticky, articleRectObserver, sticky]);
     return {

package/lib/components/items/useRectangleItem.js

@@ -4,32 +4,32 @@ exports.useRectangleItem = void 0;
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useCurrentLayout_1 = require("../../common/useCurrentLayout");
 const defaultColor = 'rgba(0, 0, 0, 1)';
-const useRectangleItem = (item) => {
+const useRectangleItem = (item, sectionId) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
-    }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, [layoutId]);
+    }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
     const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
-    }, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, [layoutId]);
+    }, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, sectionId, [layoutId]);
     const fillColor = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return defaultColor;
         const layoutParams = item.layoutParams[layoutId];
         return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
-    }, (animator, scroll, value) => animator.getColor({ color: value }, scroll).color, [layoutId]);
+    }, (animator, scroll, value) => animator.getColor({ color: value }, scroll).color, sectionId, [layoutId]);
     const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return defaultColor;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
-    }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, [layoutId]);
+    }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, sectionId, [layoutId]);
     return { fillColor, strokeWidth, radius, strokeColor };
 };
 exports.useRectangleItem = useRectangleItem;

package/lib/components/useItemAngle.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemAngle = void 0;
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
-const useItemAngle = (item) => {
-    const { angle } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll));
+const useItemAngle = (item, sectionId) => {
+    const { angle } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll), sectionId);
     return angle;
 };
 exports.useItemAngle = useItemAngle;

package/lib/components/useItemDimensions.js

@@ -11,9 +11,9 @@ const defaultArea = {
     angle: 0,
     zIndex: 0
 };
-const useItemDimensions = (item) => {
+const useItemDimensions = (item, sectionId) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
-    const { width, height } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea, (animator, scroll, value) => animator.getDimensions(value, scroll), [layoutId]);
+    const { width, height } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea, (animator, scroll, value) => animator.getDimensions(value, scroll), sectionId, [layoutId]);
     return { width, height };
 };
 exports.useItemDimensions = useItemDimensions;

package/lib/components/useItemPosition.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemPosition = void 0;
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
-const useItemPosition = (item) => {
+const useItemPosition = (item, sectionId) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
-    const { top, left } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => item.area[layoutId], (animator, scroll, value) => animator.getPositions(value, scroll), [layoutId]);
+    const { top, left } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => item.area[layoutId], (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
     return { top, left };
 };
 exports.useItemPosition = useItemPosition;

package/lib/components/useItemScale.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemScale = void 0;
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
-const useItemScale = (item) => {
+const useItemScale = (item, sectionId) => {
     const layout = (0, useCurrentLayout_1.useCurrentLayout)();
-    const { scale } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }), (animator, scroll, value) => animator.getScale(value, scroll));
+    const { scale } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }), (animator, scroll, value) => animator.getScale(value, scroll), sectionId);
     const scaleAnchor = item.area[layout].scaleAnchor;
     return { scale, scaleAnchor };
 };

package/lib/index.js

@@ -14,9 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCntrlContext = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = exports.cntrlSdkContext = void 0;
-var defaultContext_1 = require("./provider/defaultContext");
-Object.defineProperty(exports, "cntrlSdkContext", { enumerable: true, get: function () { return defaultContext_1.cntrlSdkContext; } });
+exports.cntrlSdkContext = exports.customSections = exports.customItems = exports.useCntrlContext = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = void 0;
 __exportStar(require("@cntrl-site/sdk"), exports);
 var RichTextConverter_1 = require("./utils/RichTextConverter/RichTextConverter");
 Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
@@ -44,8 +42,11 @@ var VimeoEmbed_1 = require("./components/items/VimeoEmbed");
 Object.defineProperty(exports, "VimeoEmbedItem", { enumerable: true, get: function () { return VimeoEmbed_1.VimeoEmbedItem; } });
 var YoutubeEmbed_1 = require("./components/items/YoutubeEmbed");
 Object.defineProperty(exports, "YoutubeEmbedItem", { enumerable: true, get: function () { return YoutubeEmbed_1.YoutubeEmbedItem; } });
-// custom items
+const defaultContext_1 = require("./provider/defaultContext");
 var CntrlProvider_1 = require("./provider/CntrlProvider");
 Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
 var useCntrlContext_1 = require("./provider/useCntrlContext");
 Object.defineProperty(exports, "useCntrlContext", { enumerable: true, get: function () { return useCntrlContext_1.useCntrlContext; } });
+exports.customItems = defaultContext_1.cntrlSdkContext.customItems;
+exports.customSections = defaultContext_1.cntrlSdkContext.customSections;
+exports.cntrlSdkContext = defaultContext_1.cntrlSdkContext;

package/lib/provider/CntrlSdkContext.js

@@ -7,6 +7,18 @@ class CntrlSdkContext {
         this.customSections = customSections;
         this._layouts = [];
     }
+    async resolveSectionData(sections) {
+        const resolvers = sections.map(section => {
+            const resolver = section.name ? this.customSections.getResolver(section.name) : undefined;
+            if (!resolver)
+                return;
+            return {
+                name: section.name,
+                resolver
+            };
+        }).filter(isDefined);
+        return Object.fromEntries(await Promise.all(resolvers.map(async ({ name, resolver }) => [name, await resolver()])));
+    }
     setTypePresets(typePresets) {
         this._typePresets = typePresets;
     }
@@ -21,3 +33,6 @@ class CntrlSdkContext {
     }
 }
 exports.CntrlSdkContext = CntrlSdkContext;
+function isDefined(value) {
+    return value !== undefined;
+}

package/lib/utils/ArticleRectManager/ArticleRectObserver.js

@@ -6,35 +6,33 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
     constructor() {
         super();
         this.articleWidth = 0;
+        this.registry = new Map();
         this.scrollPos = window.scrollY;
         this.animationFrame = NaN;
+        this.parent = undefined;
+        this.sectionsScrollMap = new Map();
         this.handleScroll = (scroll) => {
             this.setScroll(scroll / this.articleWidth);
         };
-        this.handleResize = (entries) => {
-            const [entry] = entries;
-            if (!entry)
-                return;
-            const element = entry.target;
-            if (!(element instanceof HTMLElement))
-                return;
-            this.notify(element);
-            this.setScroll(window.scrollY / this.articleWidth);
-            this.emit('resize', undefined);
-        };
-        this.resizeObserver = new ResizeObserver(this.handleResize);
+        this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
     }
     get scroll() {
         return this.scrollPos;
     }
+    getSectionScroll(sectionId) {
+        const sectionTop = this.sectionsScrollMap.get(sectionId);
+        if (sectionTop === undefined)
+            return 0;
+        return -(sectionTop / this.articleWidth - this.scrollPos);
+    }
     get width() {
         return this.articleWidth;
     }
     setScroll(scroll) {
         this.scrollPos = scroll;
     }
-    start(el) {
-        this.resizeObserver.observe(el);
+    init(parent) {
+        this.parent = parent;
         const onScroll = () => {
             this.handleScroll(window.scrollY);
             if (!isNaN(this.animationFrame))
@@ -46,7 +44,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
         };
         window.addEventListener('scroll', onScroll);
         return () => {
-            this.resizeObserver.unobserve(el);
+            this.parent = undefined;
             window.removeEventListener('scroll', onScroll);
             if (!isNaN(this.animationFrame)) {
                 window.cancelAnimationFrame(this.animationFrame);
@@ -54,9 +52,29 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
             }
         };
     }
-    notify(el) {
-        const elBoundary = el.getBoundingClientRect();
-        this.articleWidth = elBoundary.width;
+    register(el, sectionId) {
+        this.registry.set(sectionId, el);
+        this.resizeObserver.observe(el);
+        return () => {
+            this.registry.delete(sectionId);
+            this.resizeObserver.unobserve(el);
+        };
+    }
+    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);
+        }
     }
+    ;
 }
 exports.ArticleRectObserver = ArticleRectObserver;

package/lib/utils/ArticleRectManager/useArticleRectObserver.js

@@ -11,7 +11,7 @@ const useArticleRectObserver = (el) => {
     (0, react_1.useEffect)(() => {
         if (!el || !articleRectObserver)
             return;
-        return articleRectObserver.start(el);
+        return articleRectObserver.init(el);
     }, [el, articleRectObserver]);
     return articleRectObserver;
 };

package/lib/utils/ArticleRectManager/useSectionRegistry.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSectionRegistry = void 0;
+const react_1 = require("react");
+const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
+const useSectionRegistry = (sectionId, el) => {
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    (0, react_1.useEffect)(() => {
+        if (!el || !articleRectObserver)
+            return;
+        return articleRectObserver.register(el, sectionId);
+    }, [el, articleRectObserver]);
+};
+exports.useSectionRegistry = useSectionRegistry;

package/lib/utils/StickyManager/StickyManager.js

@@ -10,11 +10,11 @@ class StickyManager {
             return false;
         return (this.sticky.from <= scroll) && (!this.sticky.to || this.sticky.to >= scroll);
     }
-    getPosition(scroll, top, offsetTop) {
+    getPosition(scroll, top) {
         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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^1.1.0",
+    "@cntrl-site/sdk": "^1.1.1",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },

package/src/common/useKeyframeValue.ts

@@ -14,6 +14,7 @@ export const useKeyframeValue = <T>(
   item: TArticleItemAny,
   itemParamsGetter: ItemParamGetter<T>,
   animatorGetter: AnimatorGetter<T>,
+  sectionId: string,
   deps: DependencyList = emptyDeps
 ) => {
   const animatorGetterRef = useRef(animatorGetter);
@@ -59,26 +60,26 @@ export const useKeyframeValue = <T>(
   }, [paramValue]);
 
   useEffect(() => {
-    if (!articleRectObserver) return;
-    const scroll = articleRectObserver.scroll;
+    if (!articleRectObserver || !animator) return;
+    const scroll = articleRectObserver.getSectionScroll(sectionId);
     handleKeyframeValue(scroll);
-  }, [articleRectObserver, handleKeyframeValue])
+  }, [articleRectObserver, handleKeyframeValue, animator])
 
   useEffect(() => {
-    if (!articleRectObserver) return;
+    if (!articleRectObserver || !animator) return;
     return articleRectObserver.on('resize', () => {
-      const scroll = articleRectObserver.scroll;
+      const scroll = articleRectObserver.getSectionScroll(sectionId);
       handleKeyframeValue(scroll);
     });
-  }, [handleKeyframeValue, articleRectObserver]);
+  }, [handleKeyframeValue, articleRectObserver, animator]);
 
   useEffect(() => {
-    if (!articleRectObserver) return;
+    if (!articleRectObserver || !animator) return;
     return articleRectObserver.on('scroll', () => {
-      const scroll = articleRectObserver.scroll;
+      const scroll = articleRectObserver.getSectionScroll(sectionId);
       handleKeyframeValue(scroll);
     });
-  }, [handleKeyframeValue, articleRectObserver]);
+  }, [handleKeyframeValue, articleRectObserver, animator]);
   return adjustedValue;
 };
 

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,10 +6,10 @@ 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 { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
   const backgroundColor = useMemo(() => CntrlColor.parse(fillColor).toCss(), [fillColor]);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
 

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 (
     <>