@gxpl/sdk 0.0.15 → 0.0.18

package/lib/sdk/types/article/Item.d.ts

@@ -193,10 +193,21 @@ export interface StickyParams {
     from: number;
     to?: number;
 }
-export interface Link {
+export type Link = UrlLink | ClickLink;
+interface UrlLink {
     url: string;
     target: string;
 }
+interface UrlLink {
+    url: string;
+    target: string;
+}
+interface ClickLink {
+    value: string;
+    animation: 'fade' | 'slide' | 'reveal';
+    duration: number;
+    direction: 'north' | 'west' | 'south' | 'east';
+}
 export type VideoItem = Item<ArticleItemType.Video>;
 export type RectangleItem = Item<ArticleItemType.Rectangle>;
 export type ImageItem = Item<ArticleItemType.Image>;

package/lib/sdk-nextjs/common/useKeyframeValue.js

@@ -49,8 +49,10 @@ function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionI
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !animator)
             return;
-        const scroll = articleRectObserver.getSectionScroll(sectionId);
-        handleKeyframeValue(scroll);
+        return articleRectObserver.on('init', () => {
+            const scroll = articleRectObserver.getSectionScroll(sectionId);
+            handleKeyframeValue(scroll);
+        });
     }, [articleRectObserver, handleKeyframeValue, animator]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !animator)
@@ -59,7 +61,7 @@ function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionI
             const scroll = articleRectObserver.getSectionScroll(sectionId);
             handleKeyframeValue(scroll);
         });
-    }, [handleKeyframeValue, articleRectObserver, animator]);
+    }, [articleRectObserver, handleKeyframeValue, animator]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !animator)
             return;
@@ -67,6 +69,6 @@ function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionI
             const scroll = articleRectObserver.getSectionScroll(sectionId);
             handleKeyframeValue(scroll);
         });
-    }, [handleKeyframeValue, articleRectObserver, animator]);
+    }, [articleRectObserver, handleKeyframeValue, animator]);
     return keyframes.length ? adjustedValue : paramValue;
 }

package/lib/sdk-nextjs/components/Article.js

@@ -11,7 +11,7 @@ const Section_1 = require("./Section/Section");
 const Item_1 = require("./items/Item");
 const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
-const ArticleWrapper_1 = require("./ArticleWrapper");
+const Scene_1 = require("./Scene");
 const InteractionsContext_1 = require("../provider/InteractionsContext");
 const WebGLContextManagerContext_1 = require("../provider/WebGLContextManagerContext");
 const effects_1 = require("@cntrl-site/effects");
@@ -31,7 +31,7 @@ const Article = ({ article, styles, keyframes }) => {
         });
     }, [articleRectObserver]);
     const webglContextManager = (0, react_1.useMemo)(() => new effects_1.WebGLContextManager(), []);
-    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { id: article.id, styles: styles, children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
+    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Scene_1.Scene, { id: article.id, styles: styles, children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
                                     const data = {};
                                     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, articleHeight: articleHeight }, item.id))) }, section.id));
                                 }) }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `

package/lib/sdk-nextjs/components/{ArticleWrapper.d.ts → Scene.d.ts}

@@ -9,5 +9,5 @@ interface Props {
         startY: number;
     } | undefined;
 }
-export declare const ArticleWrapper: FC<PropsWithChildren<Props>>;
+export declare const Scene: FC<PropsWithChildren<Props>>;
 export {};

package/lib/sdk-nextjs/components/{ArticleWrapper.js → Scene.js}

@@ -1,20 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArticleWrapper = void 0;
+exports.Scene = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const useLayoutDeviation_1 = require("../common/useLayoutDeviation");
 const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
-const ArticleWrapper = ({ children, id, styles: sceneStyles }) => {
+const Scene = ({ children, id, styles: sceneStyles }) => {
     var _a;
     const { layoutDeviation } = (0, useLayoutDeviation_1.useLayoutDeviation)();
     const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
     const sceneRef = (0, react_1.useRef)(null);
     const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
-    const { isControlledTransitioning, isSettling, isInstantTransitioning } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
+    const { isControlledTransitioning, isSettling, isInstantTransitioning, stateValue } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
         isControlledTransitioning: state.matches('transitioning'),
         isSettling: state.matches('settling'),
         isInstantTransitioning: state.matches('instant_transitioning'),
+        stateValue: state.value
     }));
     const type = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => {
         const { transition } = state.context;
@@ -136,9 +137,9 @@ const ArticleWrapper = ({ children, id, styles: sceneStyles }) => {
     }, [isTransitioning, actorRef, id]);
     const isFixed = isControlledTransitioning || isSettling || isInstantTransitioning;
     const transitionStyle = type === 'slide' ? 'transform' : 'opacity';
-    return ((0, jsx_runtime_1.jsx)("div", { ref: sceneRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: `translate3d(${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.x}px, ${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.y}px, 0)`, transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'auto', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1 }), children: children }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: sceneRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: `translate3d(${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.x}px, ${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.y}px, 0)`, transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1 }), children: children }) }));
 };
-exports.ArticleWrapper = ArticleWrapper;
+exports.Scene = Scene;
 function isTransitionDisabled(transitionReady) {
     return !transitionReady.north && !transitionReady.east && !transitionReady.south && !transitionReady.west;
 }
@@ -153,7 +154,7 @@ function canTransition(direction, el) {
         case 'north':
             return el.scrollTop === 0;
         case 'south': {
-            const isAllowed = el.scrollTop + el.clientHeight >= el.scrollHeight;
+            const isAllowed = el.scrollTop + el.clientHeight + 1 >= el.scrollHeight;
             return isAllowed;
         }
         case 'west':

package/lib/sdk-nextjs/components/Section/Section.js

@@ -35,24 +35,24 @@ const Section = ({ section, data, children }) => {
                                 transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset',
                                 height: media.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)
                             }, children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-         .section-${section.id} {
-            height: ${getSectionHeight(height)};
-            position: relative;
-            display: ${hidden ? 'none' : 'block'};
-            background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
-         }
-         .section-background-overlay-${section.id} {
-            height: ${getSectionHeight(height)};
-            width: 100%;
-            position: relative;
-            overflow: clip;
-         }
-         .section-background-wrapper-${section.id} {
-            transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
-            position: relative;
-            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
-            width: 100%;
-         }
+        .section-${section.id} {
+          height: ${getSectionHeight(height)};
+          position: relative;
+          display: ${hidden ? 'none' : 'block'};
+          background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
+        }
+        .section-background-overlay-${section.id} {
+          height: ${getSectionHeight(height)};
+          width: 100%;
+          position: relative;
+          overflow: clip;
+        }
+        .section-background-wrapper-${section.id} {
+          transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
+          position: relative;
+          height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
+          width: 100%;
+        }
       ` })] }));
 };
 exports.Section = Section;

package/lib/sdk-nextjs/components/items/CodeEmbedItem/CodeEmbedItem.js

@@ -16,7 +16,7 @@ const useCodeEmbedItem_1 = require("./useCodeEmbedItem");
 const FontFaceGenerator_1 = require("../../../../sdk/FontFaceGenerator/FontFaceGenerator");
 const useExemplary_1 = require("../../../common/useExemplary");
 const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const id = (0, react_1.useId)();
     const { fonts } = (0, useCntrlContext_1.useCntrlContext)();
     const fontGoogleTags = fonts === null || fonts === void 0 ? void 0 : fonts.google;
@@ -71,7 +71,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign({ transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.params.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { link: item.link, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign({ transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_h = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _h !== void 0 ? _h : 'none' }), ref: setRef, children: item.params.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: {
                         border: 'unset'
                     } })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-wrapper-${item.id} {

package/lib/sdk-nextjs/components/items/CompoundItem/CompoundItem.js

@@ -14,7 +14,7 @@ const style_1 = __importDefault(require("styled-jsx/style"));
 const CompoundChild_1 = require("./CompoundChild");
 const useCompoundItem_1 = require("./useCompoundItem");
 const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     const id = (0, react_1.useId)();
     const { items } = item;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -28,10 +28,10 @@ const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: {
                         opacity,
                         transform: `rotate(${angle}deg)`,
-                        transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none'
+                        transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none'
                     }, children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .compound-${item.id} {
           overflow: ${item.params.overflow};

package/lib/sdk-nextjs/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -23,7 +23,7 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const LinkWrapper_1 = require("../LinkWrapper");
 const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     const id = (0, react_1.useId)();
     const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
@@ -110,7 +110,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
             }
         });
     }, [interactionCtrl, vimeoPlayer]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { link: item.link, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), onMouseEnter: () => {
                     if (!vimeoPlayer || params.play !== 'on-hover')
                         return;
                     vimeoPlayer.play();
@@ -118,7 +118,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                     if (!vimeoPlayer || params.play !== 'on-hover')
                         return;
                     vimeoPlayer.pause();
-                }, children: [params.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = params.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
+                }, children: [params.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_f = params.coverUrl) !== null && _f !== void 0 ? _f : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -135,7 +135,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             left: '0'
                         } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: {
                             borderRadius: `${radius * 100}vw`,
-                            transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none'
+                            transition: (_g = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _g !== void 0 ? _g : 'none'
                         } })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;

package/lib/sdk-nextjs/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -15,7 +15,7 @@ const useYouTubeIframeApi_1 = require("../../../utils/Youtube/useYouTubeIframeAp
 const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     const id = (0, react_1.useId)();
     const { url } = item.params;
     const params = item.params;
@@ -108,7 +108,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
             }
         });
     }, [interactionCtrl, player]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { link: item.link, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
                     if (!player || params.play !== 'on-hover')
                         return;
                     player.playVideo();
@@ -116,7 +116,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
                     if (!player || params.play !== 'on-hover')
                         return;
                     player.pauseVideo();
-                }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [params.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = params.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
+                }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: [params.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_f = params.coverUrl) !== null && _f !== void 0 ? _f : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -126,7 +126,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
                             top: '0',
                             left: '0',
                             zIndex: 1
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_g = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;

package/lib/sdk-nextjs/components/items/FileItem/ImageItem.js

@@ -18,7 +18,7 @@ const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
 const useExemplary_1 = require("../../../common/useExemplary");
 const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const id = (0, react_1.useId)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, opacity: itemOpacity, strokeFill: itemStrokeFill, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -65,7 +65,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none' }), children: hasGLEffect && isFXAllowed
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasGLEffect && isFXAllowed
                         ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
                         : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.params.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .image-wrapper-${item.id} {

package/lib/sdk-nextjs/components/items/FileItem/VideoItem.js

@@ -19,7 +19,7 @@ const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
 const useExemplary_1 = require("../../../common/useExemplary");
 const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const id = (0, react_1.useId)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const [isVideoPlaying, setIsVideoPlaying] = (0, react_1.useState)(false);
@@ -91,13 +91,13 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         observer.observe(ref);
         return () => observer.disconnect();
     }, [videoRef, ref, userPaused, isVideoInteracted]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { link: item.link, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
                     opacity,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`,
                     willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
-                    transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none'
-                }, children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.params.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_r = item.params.coverUrl) !== null && _r !== void 0 ? _r : '', ref: setVideoRef, autoPlay: params.play === 'auto', preload: "auto", onClick: () => {
+                    transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none'
+                }, children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.params.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_p = item.params.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideoRef, autoPlay: params.play === 'auto', preload: "auto", onClick: () => {
                                     setIsVideoInteracted(true);
                                 }, muted: params.muted, onPlay: () => {
                                     setIsVideoPlaying(true);
@@ -120,7 +120,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
                                         return;
                                     setIsVideoInteracted(true);
                                     videoRef.play();
-                                }, src: (_s = item.params.coverUrl) !== null && _s !== void 0 ? _s : '', className: `video-cover-${item.id}`, onClick: () => {
+                                }, src: (_q = item.params.coverUrl) !== null && _q !== void 0 ? _q : '', className: `video-cover-${item.id}`, onClick: () => {
                                     if (!videoRef)
                                         return;
                                     setIsVideoInteracted(true);

package/lib/sdk-nextjs/components/items/GroupItem/GroupItem.js

@@ -15,7 +15,7 @@ const useGroupItem_1 = require("./useGroupItem");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const CompoundChild_1 = require("../CompoundItem/CompoundChild");
 const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const id = (0, react_1.useId)();
     const { items } = item;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -30,7 +30,7 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;

package/lib/sdk-nextjs/components/items/LinkWrapper.d.ts

@@ -1,8 +1,8 @@
 import React, { ReactElement, ReactNode } from 'react';
+import { Link } from '../../../sdk/types/article/Item';
 interface Props {
-    url?: string;
     children: ReactElement | ReactNode[];
-    target?: string;
+    link?: Link;
 }
 export declare const LinkWrapper: React.FC<Props>;
 export {};

package/lib/sdk-nextjs/components/items/LinkWrapper.js

@@ -2,10 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const LinkWrapper = ({ url, children, target }) => {
-    const validUrl = url && buildValidUrl(url);
-    const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
-    return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+const TransitionMachineContext_1 = require("../../provider/TransitionMachineContext");
+const LinkWrapper = ({ link, children }) => {
+    const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
+    const validUrl = link && 'url' in link ? buildValidUrl(link.url) : 'javascript:void(0)';
+    const targetParams = link && 'target' in link && link.target === '_blank' ? { target: link.target, rel: 'noreferrer' } : {};
+    const handleGoToScene = () => {
+        if (!actorRef || !link || !('value' in link))
+            return;
+        actorRef.send({
+            type: 'TRANSITION_TRIGGER',
+            transition: link.animation,
+            to: link.value,
+            direction: link.direction
+        });
+    };
+    if (validUrl) {
+        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { children: children })));
+    }
+    if (link && 'value' in link) {
+        return ((0, jsx_runtime_1.jsx)("a", { onClick: handleGoToScene, role: "button", children: children }));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.LinkWrapper = LinkWrapper;
 function buildValidUrl(url) {

package/lib/sdk-nextjs/components/items/RectangleItem/RectangleItem.js

@@ -15,7 +15,7 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const getFill_1 = require("../../../utils/getFill");
 const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisible");
 const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
     const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -40,13 +40,13 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const stroke = strokeFill
         ? (_h = (0, getFill_1.getFill)(strokeFill)) !== null && _h !== void 0 ? _h : 'transparent'
         : 'transparent';
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_j = item.link) === null || _j === void 0 ? void 0 : _j.url, target: (_k = item.link) === null || _k === void 0 ? void 0 : _k.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeFill ? Object.assign({ borderColor: stroke, borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0, borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit', borderStyle: 'solid' }, (strokeFill.type === 'image' ? {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeFill ? Object.assign({ borderColor: stroke, borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0, borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit', borderStyle: 'solid' }, (strokeFill.type === 'image' ? {
                         backgroundPosition: 'center',
                         backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
                         backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
                     } : {})) : {})), { borderRadius: `${radius * 100}vw` }), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
                         ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
-                        : {})), { transition: (_l = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _l !== void 0 ? _l : 'none' }), children: itemFill && itemFill.map((fill, i) => {
+                        : {})), { transition: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), children: itemFill && itemFill.map((fill, i) => {
                         var _a, _b;
                         const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
                         const value = stateFillLayer

package/lib/sdk-nextjs/utils/ArticleRectManager/ArticleRectObserver.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../EventEmitter';
 interface EventMap {
+    'init': undefined;
     'scroll': undefined;
     'resize': DOMRect;
 }
@@ -11,6 +12,8 @@ export declare class ArticleRectObserver extends EventEmitter<EventMap> {
     private animationFrame;
     private parent;
     private sectionsScrollMap;
+    private previousParentWidth;
+    private isInitialized;
     constructor();
     get scroll(): number;
     getSectionScroll(sectionId: string): number;

package/lib/sdk-nextjs/utils/ArticleRectManager/ArticleRectObserver.js

@@ -9,12 +9,14 @@ const resize_observer_polyfill_1 = __importDefault(require("resize-observer-poly
 class ArticleRectObserver extends EventEmitter_1.EventEmitter {
     constructor() {
         super();
-        this.articleWidth = 0;
+        this.articleWidth = 1;
         this.registry = new Map();
         this.scrollPos = window.scrollY;
         this.animationFrame = NaN;
         this.parent = undefined;
         this.sectionsScrollMap = new Map();
+        this.previousParentWidth = null;
+        this.isInitialized = false;
         this.handleScroll = (scroll) => {
             this.setScroll(scroll / this.articleWidth);
         };
@@ -41,8 +43,17 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
     }
     init(parent) {
         this.parent = parent;
+        const scrollableParent = parent.parentElement;
+        const parentBoundary = parent.getBoundingClientRect();
+        if (!scrollableParent) {
+            throw new Error('Scrollable parent not found');
+        }
+        const articleWidth = parentBoundary.width;
+        this.articleWidth = articleWidth;
+        this.previousParentWidth = articleWidth;
+        this.setScroll(scrollableParent.scrollTop / articleWidth);
         const onScroll = () => {
-            this.handleScroll(window.scrollY);
+            this.handleScroll(scrollableParent.scrollTop);
             if (!isNaN(this.animationFrame))
                 return;
             this.animationFrame = window.requestAnimationFrame(() => {
@@ -50,10 +61,21 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
                 this.emit('scroll', undefined);
             });
         };
-        window.addEventListener('scroll', onScroll);
+        scrollableParent.addEventListener('scroll', onScroll);
+        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);
+        }
+        this.isInitialized = true;
+        this.emit('init', undefined);
         return () => {
             this.parent = undefined;
-            window.removeEventListener('scroll', onScroll);
+            this.isInitialized = false;
+            this.previousParentWidth = null;
+            scrollableParent.removeEventListener('scroll', onScroll);
             if (!isNaN(this.animationFrame)) {
                 window.cancelAnimationFrame(this.animationFrame);
                 this.animationFrame = NaN;
@@ -72,7 +94,14 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
         if (!this.parent)
             return;
         const parentBoundary = this.parent.getBoundingClientRect();
-        this.articleWidth = parentBoundary.width;
+        const newWidth = parentBoundary.width;
+        if (!this.isInitialized || this.previousParentWidth === newWidth) {
+            this.articleWidth = newWidth;
+            this.previousParentWidth = newWidth;
+            return;
+        }
+        this.articleWidth = newWidth;
+        this.previousParentWidth = newWidth;
         this.setScroll(window.scrollY / this.articleWidth);
         this.emit('resize', parentBoundary);
         for (const sectionId of this.registry.keys()) {

package/lib/sdk-nextjs/utils/RichTextConverter/RichTextConverter.js

@@ -13,7 +13,7 @@ exports.FontStyles = {
 };
 class RichTextConverter {
     toHtml(richText, exemplary) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const { text, blocks = [] } = richText.params;
         const root = [];
         const styleRules = [];
@@ -72,7 +72,7 @@ class RichTextConverter {
                         offset = entity.end;
                     }
                     if (entity.link) {
-                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: entity.link, target: entity.target, children: entityKids }, entity.start));
+                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: { url: entity.link, target: (_e = entity.target) !== null && _e !== void 0 ? _e : '_self', animation: (_f = entity.animation) !== null && _f !== void 0 ? _f : 'fade', direction: (_g = entity.direction) !== null && _g !== void 0 ? _g : 'north' }, children: entityKids }, entity.start));
                         continue;
                     }
                     kids.push(...entityKids);
@@ -81,7 +81,7 @@ class RichTextConverter {
                     kids.push(sliceSymbols(content, offset));
                 }
                 for (const styles of group) {
-                    const entitiesGroups = (_e = this.groupEntities(entities, styles)) !== null && _e !== void 0 ? _e : [];
+                    const entitiesGroups = (_h = this.groupEntities(entities, styles)) !== null && _h !== void 0 ? _h : [];
                     for (const entitiesGroup of entitiesGroups) {
                         if (!entitiesGroup.stylesGroup)
                             continue;
@@ -147,7 +147,7 @@ class RichTextConverter {
         return styleGroups;
     }
     groupEntities(entities, styleGroups) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const entitiesGroups = [];
         if (!entities.length && !styleGroups)
             return;
@@ -167,7 +167,7 @@ class RichTextConverter {
                 const end = dividers[i + 1];
                 const entity = entities.find(e => e.start === start);
                 entitiesGroups.push(Object.assign({ stylesGroup: [], start,
-                    end }, (entity && { link: (_b = (_a = entity.data) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '', target: (_d = (_c = entity.data) === null || _c === void 0 ? void 0 : _c.target) !== null && _d !== void 0 ? _d : '_self' })));
+                    end }, (entity && { link: (_b = (_a = entity.data) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '', target: (_d = (_c = entity.data) === null || _c === void 0 ? void 0 : _c.target) !== null && _d !== void 0 ? _d : '_self', animation: (_f = (_e = entity.data) === null || _e === void 0 ? void 0 : _e.animation) !== null && _f !== void 0 ? _f : 'fade', direction: (_h = (_g = entity.data) === null || _g === void 0 ? void 0 : _g.direction) !== null && _h !== void 0 ? _h : 'north' })));
             }
             return entitiesGroups;
         }
@@ -194,7 +194,7 @@ class RichTextConverter {
             const end = entityDividers[i + 1];
             const entity = entities.find(e => e.start === start);
             entitiesGroups.push(Object.assign({ stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end), start,
-                end }, (entity && { link: (_f = (_e = entity.data) === null || _e === void 0 ? void 0 : _e.url) !== null && _f !== void 0 ? _f : '', target: (_h = (_g = entity.data) === null || _g === void 0 ? void 0 : _g.target) !== null && _h !== void 0 ? _h : '_self' })));
+                end }, (entity && { link: (_k = (_j = entity.data) === null || _j === void 0 ? void 0 : _j.url) !== null && _k !== void 0 ? _k : '', target: (_m = (_l = entity.data) === null || _l === void 0 ? void 0 : _l.target) !== null && _m !== void 0 ? _m : '_self', animation: (_p = (_o = entity.data) === null || _o === void 0 ? void 0 : _o.animation) !== null && _p !== void 0 ? _p : 'fade', direction: (_r = (_q = entity.data) === null || _q === void 0 ? void 0 : _q.direction) !== null && _r !== void 0 ? _r : 'north' })));
         }
         return entitiesGroups;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.15",
+  "version": "0.0.18",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",