@cntrl-site/sdk-nextjs 0.11.1 → 0.12.1

package/lib/common/useKeyframeValue.js

@@ -11,7 +11,7 @@ const useCurrentLayout_1 = require("./useCurrentLayout");
 const KeyframesContext_1 = require("../provider/KeyframesContext");
 const Animator_1 = require("../utils/Animator/Animator");
 const emptyDeps = [];
-const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDeps) => {
+const useKeyframeValue = (item, itemParamsGetter, animatorGetter, sectionId, deps = emptyDeps) => {
     const animatorGetterRef = (0, react_1.useRef)(animatorGetter);
     const itemParamsGetterRef = (0, react_1.useRef)(itemParamsGetter);
     animatorGetterRef.current = animatorGetter;
@@ -50,27 +50,27 @@ const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDe
         setAdjustedValue(paramValue);
     }, [paramValue]);
     (0, react_1.useEffect)(() => {
-        if (!articleRectObserver)
+        if (!articleRectObserver || !animator)
             return;
-        const scroll = articleRectObserver.scroll;
+        const scroll = articleRectObserver.getSectionScroll(sectionId);
         handleKeyframeValue(scroll);
-    }, [articleRectObserver, handleKeyframeValue]);
+    }, [articleRectObserver, handleKeyframeValue, animator]);
     (0, react_1.useEffect)(() => {
-        if (!articleRectObserver)
+        if (!articleRectObserver || !animator)
             return;
         return articleRectObserver.on('resize', () => {
-            const scroll = articleRectObserver.scroll;
+            const scroll = articleRectObserver.getSectionScroll(sectionId);
             handleKeyframeValue(scroll);
         });
-    }, [handleKeyframeValue, articleRectObserver]);
+    }, [handleKeyframeValue, articleRectObserver, animator]);
     (0, react_1.useEffect)(() => {
-        if (!articleRectObserver)
+        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;
 };
 exports.useKeyframeValue = useKeyframeValue;

package/lib/components/Article.js

@@ -17,7 +17,7 @@ const Article = ({ article, sectionData }) => {
     const id = (0, react_1.useId)();
     return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: [(0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => {
                     const data = section.name ? sectionData[section.name] : {};
-                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item }, item.id))) }, section.id));
+                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id }, item.id))) }, section.id));
                 }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
             position: relative;

package/lib/components/Item.js

@@ -19,7 +19,6 @@ const useCntrlContext_1 = require("../provider/useCntrlContext");
 const useItemPosition_1 = require("./useItemPosition");
 const useItemDimensions_1 = require("./useItemDimensions");
 const useItemSticky_1 = require("./items/useItemSticky");
-const castObject_1 = require("../utils/castObject");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const useItemScale_1 = require("./useItemScale");
 const ScaleAnchorMap_1 = require("../utils/ScaleAnchorMap");
@@ -33,16 +32,14 @@ const itemsMap = {
     [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem
 };
 const noop = () => null;
-const Item = ({ item }) => {
+const Item = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item);
-    const position = (0, useItemPosition_1.useItemPosition)(item);
+    const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
+    const position = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const layout = (0, useCurrentLayout_1.useCurrentLayout)();
-    const [ref, setRef] = (0, react_1.useState)(null);
-    const [parentOffsetTop, setParentOffsetTop] = (0, react_1.useState)(0);
-    const { top, isFixed } = (0, useItemSticky_1.useItemSticky)(position.top, parentOffsetTop, item);
-    const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item);
+    const { top, isFixed } = (0, useItemSticky_1.useItemSticky)(position.top, item, sectionId);
+    const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
     const layoutValues = [item.area];
     const isInitialRef = (0, react_1.useRef)(true);
     if (item.layoutParams) {
@@ -56,12 +53,6 @@ const Item = ({ item }) => {
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (!ref)
-            return;
-        const offsetParent = (0, castObject_1.castObject)(ref.offsetParent, HTMLElement);
-        setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
-    }, [ref]);
     const styles = {
         transform: `scale(${scale})`,
         transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor],
@@ -70,7 +61,7 @@ const Item = ({ item }) => {
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
         top
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, ref: setRef, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`

package/lib/components/Section.js

@@ -10,11 +10,14 @@ const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
 const useSectionColor_1 = require("./useSectionColor");
+const useSectionRegistry_1 = require("../utils/ArticleRectManager/useSectionRegistry");
 const Section = ({ section, data, children }) => {
     const id = (0, react_1.useId)();
+    const sectionRef = (0, react_1.useRef)(null);
     const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
     const backgroundColor = (0, useSectionColor_1.useSectionColor)(section.color);
     const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+    (0, useSectionRegistry_1.useSectionRegistry)(section.id, sectionRef.current);
     const getSectionVisibilityStyles = () => {
         return layouts
             .sort((a, b) => a.startsWith - b.startsWith)
@@ -33,7 +36,7 @@ const Section = ({ section, data, children }) => {
         return (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, style: {
                     backgroundColor: backgroundColor
-                }, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                }, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};

package/lib/components/items/ImageItem.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 ImageItem = ({ item }) => {
+const ImageItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
-    const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item);
-    const angle = (0, useItemAngle_1.useItemAngle)(item);
+    const { radius, strokeWidth, opacity, strokeColor } = (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.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, style: {
                         borderRadius: `${radius * 100}vw`,

package/lib/components/items/RectangleItem.js

@@ -11,26 +11,38 @@ const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useRectangleItem_1 = require("./useRectangleItem");
 const useItemAngle_1 = require("../useItemAngle");
-const RectangleItem = ({ item }) => {
+const RectangleItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
-    const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item);
-    const angle = (0, useItemAngle_1.useItemAngle)(item);
-    const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor).toCss(), [fillColor]);
-    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+    const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor), [fillColor]);
+    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("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)`
                     } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-         .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;
+        }
       ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;

package/lib/components/items/RichTextItem.js

@@ -8,9 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
 const useItemAngle_1 = require("../useItemAngle");
-const RichTextItem = ({ item }) => {
+const RichTextItem = ({ item, sectionId }) => {
     const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
-    const angle = (0, useItemAngle_1.useItemAngle)(item);
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const className = preset ? `cntrl-preset-${preset.id}` : undefined;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: className, style: {
                     transform: `rotate(${angle}deg)`

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/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.1",
+  "version": "0.12.1",
   "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.1",
+    "@cntrl-site/sdk": "^1.1.3",
     "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;
 };