@cntrl-site/sdk-nextjs 0.16.1 → 0.16.3

package/lib/common/useExemplary.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExemplary = void 0;
+const useCntrlContext_1 = require("../provider/useCntrlContext");
+const useLayoutContext_1 = require("../components/useLayoutContext");
+const useExemplary = () => {
+    var _a, _b;
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const exemplary = (_b = (_a = layouts.find(l => l.id === layout)) === null || _a === void 0 ? void 0 : _a.exemplary) !== null && _b !== void 0 ? _b : 1;
+    return exemplary;
+};
+exports.useExemplary = useExemplary;

package/lib/common/useRegisterResize.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRegisterResize = void 0;
+const react_1 = require("react");
+const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+const useRegisterResize = (ref, onResize) => {
+    (0, react_1.useEffect)(() => {
+        if (!ref || !onResize)
+            return;
+        const observer = new resize_observer_polyfill_1.default((entries) => {
+            const [entry] = entries;
+            onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+        });
+        observer.observe(ref);
+        return () => {
+            observer.unobserve(ref);
+        };
+    }, [ref, onResize]);
+};
+exports.useRegisterResize = useRegisterResize;

package/lib/components/Article.js

@@ -16,21 +16,21 @@ const Article = ({ article, sectionData }) => {
     const articleRef = (0, react_1.useRef)(null);
     const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
     const id = (0, react_1.useId)();
-    const [articleRatio, setArticleRatio] = (0, react_1.useState)(1);
+    const [articleHeight, setArticleHeight] = (0, react_1.useState)(1);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver)
             return;
         return articleRectObserver.on('resize', (rect) => {
-            setArticleRatio(rect.height / rect.width);
+            setArticleHeight(rect.height / rect.width);
         });
     }, [articleRectObserver]);
     return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, Object.assign({ value: articleRectObserver }, { children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ 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, Object.assign({ section: section, data: data }, { children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleRatio: articleRatio }, item.id))) }), section.id));
+                        return ((0, jsx_runtime_1.jsx)(Section_1.Section, Object.assign({ section: section, data: data }, { children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }), section.id));
                     }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
        .article {
             position: relative;
-            overflow: hidden;
+            overflow: clip;
           }
       ` }))] })));
 };

package/lib/components/Item.js

@@ -26,6 +26,8 @@ const getItemTopStyle_1 = require("../utils/getItemTopStyle");
 const useStickyItemTop_1 = require("./items/useStickyItemTop");
 const getAnchoredItemTop_1 = require("../utils/getAnchoredItemTop");
 const useLayoutContext_1 = require("./useLayoutContext");
+const ArticleRectContext_1 = require("../provider/ArticleRectContext");
+const useExemplary_1 = require("../common/useExemplary");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -41,12 +43,13 @@ const RichTextWrapper = ({ isRichText, children }) => {
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' } }, { children: children })));
 };
 const noop = () => null;
-const Item = ({ item, sectionId, articleRatio }) => {
-    var _a, _b;
+const Item = ({ item, sectionId, articleHeight }) => {
+    const itemWrapperRef = (0, react_1.useRef)(null);
+    const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
-    const exemplary = (_b = (_a = layouts.find(l => l.id === layout)) === null || _a === void 0 ? void 0 : _a.exemplary) !== null && _b !== void 0 ? _b : 1;
+    const exemplary = (0, useExemplary_1.useExemplary)();
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
@@ -66,7 +69,10 @@ const Item = ({ item, sectionId, articleRatio }) => {
         : undefined;
     const sizingAxis = parseSizing(sizing);
     const ItemComponent = itemsMap[item.type] || noop;
+    const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
     const handleItemResize = (height) => {
+        var _a, _b;
+        const itemSectionTop = (_b = (_a = itemWrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0;
         if (!layout)
             return;
         const sticky = item.sticky[layout];
@@ -74,7 +80,7 @@ const Item = ({ item, sectionId, articleRatio }) => {
             setWrapperHeight(undefined);
             return;
         }
-        const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleRatio);
+        const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleHeight, (sectionTop + itemSectionTop) / window.innerWidth);
         setItemHeight(height);
         setWrapperHeight(wrapperHeight);
     };
@@ -86,7 +92,7 @@ const Item = ({ item, sectionId, articleRatio }) => {
         top: stickyTop,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
                             width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
                                 ? isRichText
                                     ? `${width * exemplary}px`
@@ -123,7 +129,6 @@ const Item = ({ item, sectionId, articleRatio }) => {
               pointer-events: none;
               top: ${(0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height, articleRatio) * 100}vw` : 'unset'};
               transition: ${(0, HoverStyles_1.getTransitions)(['left', 'top'], hoverParams)};
             }
             .item-${item.id}-inner:hover {
@@ -137,9 +142,9 @@ const Item = ({ item, sectionId, articleRatio }) => {
       ` }))] })));
 };
 exports.Item = Item;
-function getStickyItemWrapperHeight(sticky, itemHeight, articleHeight) {
+function getStickyItemWrapperHeight(sticky, itemHeight, articleHeight, itemArticleOffset) {
     var _a;
-    const end = (_a = sticky.to) !== null && _a !== void 0 ? _a : articleHeight;
+    const end = (_a = sticky.to) !== null && _a !== void 0 ? _a : articleHeight - itemArticleOffset - itemHeight;
     return end - sticky.from + itemHeight;
 }
 function parseSizing(sizing = 'manual') {

package/lib/components/items/CustomItem.js

@@ -6,16 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const style_1 = __importDefault(require("styled-jsx/style"));
-const CustomItem = ({ item }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const CustomItem = ({ item, onResize }) => {
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const component = sdk.customItems.get(item.commonParams.name);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     if (!component)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `custom-component-${item.id}` }, { children: component({}) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: item.id }, { children: `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `custom-component-${item.id}`, ref: setRef }, { children: component({}) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: item.id }, { children: `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
             .custom-component-${item.id} {
               transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};

package/lib/components/items/ImageItem.js

@@ -13,14 +13,17 @@ const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
-const ImageItem = ({ item, sectionId }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const ImageItem = ({ item, sectionId, onResize }) => {
     var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, opacity, strokeColor, blur } = (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), [strokeColor]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, style: {
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         opacity: `${opacity}`,

package/lib/components/items/RectangleItem.js

@@ -13,7 +13,8 @@ const useRectangleItem_1 = require("./useRectangleItem");
 const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
-const RectangleItem = ({ item, sectionId }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const RectangleItem = ({ item, sectionId, onResize }) => {
     var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -21,16 +22,19 @@ const RectangleItem = ({ 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, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, style: {
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const backdropFilterValue = backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset';
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: {
                         backgroundColor: `${backgroundColor.toCss()}`,
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         borderColor: `${borderColor.toCss()}`,
                         transform: `rotate(${angle}deg)`,
                         filter: blur !== 0 ? `blur(${blur * 100}vw)` : 'unset',
-                        backdropFilter: backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset',
+                        backdropFilter: backdropFilterValue,
                         // @ts-ignore
-                        '-webkit-backdrop-filter': backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset',
+                        '-webkit-backdrop-filter': backdropFilterValue,
                     } }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {

package/lib/components/items/RichTextItem.js

@@ -12,25 +12,14 @@ const useRichTextItem_1 = require("./useRichTextItem");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRichTextItemValues_1 = require("./useRichTextItemValues");
-const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+const useRegisterResize_1 = require("../../common/useRegisterResize");
 const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { angle, blur } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
-    (0, react_1.useEffect)(() => {
-        if (!ref || !onResize)
-            return;
-        const observer = new resize_observer_polyfill_1.default((entries) => {
-            const [entry] = entries;
-            onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
-        });
-        observer.observe(ref);
-        return () => {
-            observer.unobserve(ref);
-        };
-    }, [ref, onResize]);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`

package/lib/components/items/VideoItem.js

@@ -13,14 +13,17 @@ const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
-const VideoItem = ({ item, sectionId }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const VideoItem = ({ item, sectionId, onResize }) => {
     var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, strokeColor, opacity, blur } = (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), [strokeColor]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, style: {
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, ref: setRef, style: {
                     borderRadius: `${radius * 100}vw`,
                     borderWidth: `${strokeWidth * 100}vw`,
                     opacity: `${opacity}`,

package/lib/components/items/VimeoEmbed.js

@@ -14,7 +14,8 @@ const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
-const VimeoEmbedItem = ({ item, sectionId }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -23,6 +24,8 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
     const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
         validURL.searchParams.append('controls', String(controls));
@@ -37,7 +40,7 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
         return validURL.href;
     };
     const validUrl = getValidVimeoUrl(url);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-video-wrapper-${item.id}`, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-video-wrapper-${item.id}`, ref: setRef, style: {
                     borderRadius: `${radius * 100}vw`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`

package/lib/components/items/YoutubeEmbed.js

@@ -15,7 +15,8 @@ const sdk_1 = require("@cntrl-site/sdk");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
-const YoutubeEmbedItem = ({ item, sectionId }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -25,12 +26,12 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
     const [player, setPlayer] = (0, react_1.useState)(undefined);
+    (0, useRegisterResize_1.useRegisterResize)(div, onResize);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
         const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
         if (!YT || !videoId || !div)
             return;
-        const divRect = div.getBoundingClientRect();
         const placeholder = document.createElement('div');
         div.appendChild(placeholder);
         const player = new YT.Player(placeholder, {

package/lib/utils/ArticleRectManager/ArticleRectObserver.js

@@ -29,6 +29,10 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
             return 0;
         return -(sectionTop / this.articleWidth - this.scrollPos);
     }
+    getSectionTop(sectionId) {
+        const sectionTop = this.sectionsScrollMap.get(sectionId);
+        return sectionTop !== null && sectionTop !== void 0 ? sectionTop : 0;
+    }
     get width() {
         return this.articleWidth;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.16.1",
+  "version": "0.16.3",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/common/useExemplary.ts

@@ -0,0 +1,9 @@
+import { useCntrlContext } from "../provider/useCntrlContext";
+import { useLayoutContext } from "../components/useLayoutContext";
+
+export const useExemplary = () => {
+  const { layouts } = useCntrlContext();
+  const layout = useLayoutContext();
+  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
+  return exemplary;
+};

package/src/common/useRegisterResize.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export const useRegisterResize = (ref: HTMLElement | null, onResize?: (height: number) => void) => {
+  useEffect(() => {
+    if (!ref || !onResize) return;
+    const observer = new ResizeObserver((entries) => {
+      const [entry] = entries;
+      onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+    });
+    observer.observe(ref);
+    return () => {
+      observer.unobserve(ref);
+    };
+  }, [ref, onResize]);
+};
+

package/src/components/Article.tsx

@@ -16,12 +16,12 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
   const articleRef = useRef<HTMLDivElement | null>(null);
   const articleRectObserver = useArticleRectObserver(articleRef.current);
   const id = useId();
-  const [articleRatio, setArticleRatio] = useState(1);
+  const [articleHeight, setArticleHeight] = useState(1);
 
   useEffect(() => {
     if (!articleRectObserver) return;
     return articleRectObserver.on('resize', (rect) => {
-      setArticleRatio(rect.height / rect.width);
+      setArticleHeight(rect.height / rect.width);
     });
   }, [articleRectObserver]);
 
@@ -42,7 +42,7 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
                     item={item}
                     key={item.id}
                     sectionId={section.id}
-                    articleRatio={articleRatio}
+                    articleHeight={articleHeight}
                   />
                 ))}
               </Section>
@@ -53,7 +53,7 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
       <JSXStyle id={id}>{`
        .article {
             position: relative;
-            overflow: hidden;
+            overflow: clip;
           }
       `}</JSXStyle>
     </ArticleRectContext.Provider>

package/src/components/Item.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC, PropsWithChildren, useEffect, useId, useRef, useState } from 'react';
+import { ComponentType, FC, PropsWithChildren, useContext, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   ArticleItemSizingType as SizingType,
@@ -26,6 +26,8 @@ import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useStickyItemTop } from './items/useStickyItemTop';
 import { getAnchoredItemTop } from '../utils/getAnchoredItemTop';
 import { useLayoutContext } from './useLayoutContext';
+import { ArticleRectContext } from "../provider/ArticleRectContext";
+import { useExemplary } from "../common/useExemplary";
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
@@ -34,7 +36,7 @@ export interface ItemProps<I extends TArticleItemAny> {
 }
 
 export interface ItemWrapperProps extends ItemProps<TArticleItemAny> {
-  articleRatio: number; // height / width
+  articleHeight: number;
 }
 
 const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
@@ -62,11 +64,13 @@ const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, ch
 
 const noop = () => null;
 
-export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) => {
+export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) => {
+  const itemWrapperRef = useRef<HTMLDivElement | null>(null);
+  const rectObserver = useContext(ArticleRectContext);
   const id = useId();
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
-  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
+  const exemplary = useExemplary();
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
@@ -87,15 +91,17 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) =>
     : undefined;
   const sizingAxis = parseSizing(sizing);
   const ItemComponent = itemsMap[item.type] || noop;
+  const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
 
   const handleItemResize = (height: number) => {
+    const itemSectionTop = itemWrapperRef.current?.offsetTop ?? 0;
     if (!layout) return;
     const sticky = item.sticky[layout];
     if (!sticky) {
       setWrapperHeight(undefined);
       return;
     }
-    const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleRatio);
+    const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleHeight, (sectionTop + itemSectionTop) / window.innerWidth);
     setItemHeight(height);
     setWrapperHeight(wrapperHeight);
   };
@@ -114,7 +120,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) =>
   return (
     <div
       className={`item-wrapper-${item.id}`}
-      style={isInitialRef.current ? {} : { top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }}
+      ref={itemWrapperRef}
+      style={isInitialRef.current ? {} : { top, left, ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}) }}
     >
       <div
         suppressHydrationWarning={true}
@@ -167,7 +174,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) =>
               pointer-events: none;
               top: ${getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height, articleRatio) * 100}vw` : 'unset'};
               transition: ${getTransitions(['left', 'top'], hoverParams)};
             }
             .item-${item.id}-inner:hover {
@@ -183,8 +189,13 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) =>
   );
 };
 
-function getStickyItemWrapperHeight(sticky: TStickyParams, itemHeight: number, articleHeight: number): number {
-  const end = sticky.to ?? articleHeight;
+function getStickyItemWrapperHeight(
+  sticky: TStickyParams,
+  itemHeight: number,
+  articleHeight: number,
+  itemArticleOffset: number,
+) {
+  const end = sticky.to ?? articleHeight - itemArticleOffset - itemHeight;
   return end - sticky.from + itemHeight;
 }
 

package/src/components/items/CustomItem.tsx

@@ -1,18 +1,21 @@
 import { ArticleItemType, getLayoutStyles, TCustomItem } from '@cntrl-site/sdk';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import JSXStyle from 'styled-jsx/style';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item }) => {
+export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize }) => {
   const sdk = useCntrlContext();
   const { layouts } = useCntrlContext();
   const component = sdk.customItems.get(item.commonParams.name);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
   if (!component) return null;
   return (
     <>
-      <div className={`custom-component-${item.id}`}>{component({})}</div>
+      <div className={`custom-component-${item.id}`} ref={setRef}>{component({})}</div>
       <JSXStyle id={item.id}>
         {`${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
           return (`

package/src/components/items/ImageItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo } from 'react';
+import { FC, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { ArticleItemType, CntrlColor, getLayoutStyles, TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
@@ -7,18 +7,22 @@ import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
+export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { radius, strokeWidth, opacity, strokeColor, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
   return (
     <LinkWrapper url={item.link?.url}>
       <>
         <div
           className={`image-wrapper-${item.id}`}
+          ref={setRef}
           style={{
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,

package/src/components/items/RectangleItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo } from 'react';
+import { FC, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { TRectangleItem, CntrlColor, getLayoutStyles, ArticleItemType } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
@@ -7,19 +7,25 @@ import { useRectangleItem } from './useRectangleItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }) => {
+export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { fillColor, radius, strokeWidth, strokeColor, blur, backdropBlur } = useRectangleItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const backgroundColor = useMemo(() => CntrlColor.parse(fillColor), [fillColor]);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+  const backdropFilterValue = backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)`: 'unset';
 
   return (
     <LinkWrapper url={item.link?.url}>
       <>
-        <div className={`rectangle-${item.id}`}
+        <div
+          className={`rectangle-${item.id}`}
+          ref={setRef}
           style={{
             backgroundColor: `${backgroundColor.toCss()}`,
             borderRadius: `${radius * 100}vw`,
@@ -27,9 +33,9 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
             borderColor: `${borderColor.toCss()}`,
             transform: `rotate(${angle}deg)`,
             filter: blur !== 0 ? `blur(${blur * 100}vw)` : 'unset',
-            backdropFilter: backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)`: 'unset',
+            backdropFilter: backdropFilterValue,
             // @ts-ignore
-            '-webkit-backdrop-filter': backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)`: 'unset',
+            '-webkit-backdrop-filter': backdropFilterValue,
           }}
         />
         <JSXStyle id={id}>{`

package/src/components/items/RichTextItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useId, useState } from 'react';
+import { FC, useId, useState } from 'react';
 import { ArticleItemType, CntrlColor, getLayoutStyles, TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
@@ -6,7 +6,7 @@ import { useRichTextItem } from './useRichTextItem';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRichTextItemValues } from './useRichTextItemValues';
-import ResizeObserver from 'resize-observer-polyfill';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles] = useRichTextItem(item);
@@ -14,18 +14,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { layouts } = useCntrlContext();
   const { angle, blur } = useRichTextItemValues(item, sectionId);
-
-  useEffect(() => {
-    if (!ref || !onResize) return;
-    const observer = new ResizeObserver((entries) => {
-      const [entry] = entries;
-      onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
-    });
-    observer.observe(ref);
-    return () => {
-      observer.unobserve(ref);
-    };
-  }, [ref, onResize]);
+  useRegisterResize(ref, onResize);
 
   return (
     <>

package/src/components/items/VideoItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo } from 'react';
+import { FC, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { ArticleItemType, CntrlColor, getLayoutStyles, TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
@@ -7,17 +7,21 @@ import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
+export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { radius, strokeWidth, strokeColor, opacity, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
   return (
     <LinkWrapper url={item.link?.url}>
       <div
         className={`video-wrapper-${item.id}`}
+        ref={setRef}
         style={{
           borderRadius: `${radius * 100}vw`,
           borderWidth: `${strokeWidth * 100}vw`,

package/src/components/items/VimeoEmbed.tsx

@@ -9,8 +9,9 @@ import { useItemAngle } from '../useItemAngle';
 import { ArticleItemType, getLayoutStyles } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId }) => {
+export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { radius, blur } = useEmbedVideoItem(item, sectionId);
@@ -18,6 +19,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const vimeoPlayer = useMemo(() => iframeRef ? new Player(iframeRef) : undefined, [iframeRef]);
   const angle = useItemAngle(item, sectionId);
   const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));
@@ -36,7 +39,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
 
   return (
     <LinkWrapper url={item.link?.url}>
-      <div className={`embed-video-wrapper-${item.id}`}
+      <div
+        className={`embed-video-wrapper-${item.id}`}
+        ref={setRef}
         style={{
           borderRadius: `${radius * 100}vw`,
           transform: `rotate(${angle}deg)`,

package/src/components/items/YoutubeEmbed.tsx

@@ -11,8 +11,9 @@ import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverSty
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useYouTubeIframeApi } from '../../utils/Youtube/useYouTubeIframeApi';
 import { YTPlayer } from '../../utils/Youtube/YoutubeIframeApi';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId }) => {
+export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { play, controls, url } = item.commonParams;
@@ -21,12 +22,12 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
   const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
+  useRegisterResize(div, onResize);
 
   useEffect(() => {
     const newUrl = new URL(url);
     const videoId = getYoutubeId(newUrl);
     if (!YT || !videoId || !div) return;
-    const divRect = div.getBoundingClientRect();
     const placeholder = document.createElement('div');
     div.appendChild(placeholder);
     const player = new YT.Player(placeholder, {
@@ -53,15 +54,16 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
 
   return (
     <LinkWrapper url={item.link?.url}>
-      <div className={`embed-youtube-video-wrapper-${item.id}`}
-         onMouseEnter={() => {
-           if (!player || play !== 'on-hover') return;
-           player.playVideo();
-         }}
-         onMouseLeave={() => {
-           if (!player || play !== 'on-hover') return;
-           player.pauseVideo();
-         }}
+      <div
+        className={`embed-youtube-video-wrapper-${item.id}`}
+        onMouseEnter={() => {
+          if (!player || play !== 'on-hover') return;
+          player.playVideo();
+        }}
+        onMouseLeave={() => {
+          if (!player || play !== 'on-hover') return;
+          player.pauseVideo();
+        }}
          ref={setDiv}
          style={{
            borderRadius: `${radius * 100}vw`,

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -30,6 +30,11 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     return - (sectionTop / this.articleWidth - this.scrollPos);
   }
 
+  getSectionTop(sectionId: string): number {
+    const sectionTop = this.sectionsScrollMap.get(sectionId);
+    return sectionTop ?? 0;
+  }
+
   get width(): number {
     return this.articleWidth;
   }