@cntrl-site/sdk-nextjs 1.8.16 → 1.8.18-alpha.0

package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -128,34 +128,34 @@ 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: `
-        .embed-youtube-video-wrapper-${item.id},
-        .embed-${item.id} {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-        }
-        .embed-${item.id} {
-          overflow: hidden;
-        }
-        .embed-youtube-video-wrapper-${item.id} iframe {
-          width: 100%;
-          height: 100%;
-          z-index: 1;
-          border: none;
-        }
+                        }, 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: `
+        .embed-youtube-video-wrapper-${item.id},
+        .embed-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+        }
+        .embed-${item.id} {
+          overflow: hidden;
+        }
+        .embed-youtube-video-wrapper-${item.id} iframe {
+          width: 100%;
+          height: 100%;
+          z-index: 1;
+          border: none;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-            .embed-youtube-video-wrapper-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg) translateZ(0);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            }
-            .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
-              border-radius: ${layoutParams.radius * 100}vw;
-            }
+                    return (`
+            .embed-youtube-video-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg) translateZ(0);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+            }
+            .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
+              border-radius: ${layoutParams.radius * 100}vw;
+            }
           `);
-                })}
+                })}
       ` })] }));
 };
 exports.YoutubeEmbedItem = YoutubeEmbedItem;

package/lib/components/items/FileItem/ImageItem.js

@@ -67,46 +67,46 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     }, [isInteractive, onVisibilityChange]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.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(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { 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.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .image-wrapper-${item.id} {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-          display: flex;
-        }
-        .image {
-          width: 100%;
-          height: 100%;
-          opacity: 1;
-          object-fit: cover;
-          pointer-events: none;
-          border-style: solid;
-          overflow: hidden;
-          box-sizing: border-box;
-        }
-        .img-canvas {
-          border: solid;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          border-width: 0;
-          box-sizing: border-box;
-        }
+                        : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .image-wrapper-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          display: flex;
+        }
+        .image {
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+          object-fit: cover;
+          pointer-events: none;
+          border-style: solid;
+          overflow: hidden;
+          box-sizing: border-box;
+        }
+        .img-canvas {
+          border: solid;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          border-width: 0;
+          box-sizing: border-box;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                        return (`
-            .image-wrapper-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg) translateZ(0);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            }
-            .image-${item.id} {
-              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
-              border-radius: ${layoutParams.radius * 100}vw;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
-            }
+                        return (`
+            .image-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg) translateZ(0);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+            }
+            .image-${item.id} {
+              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
+            }
           `);
-                    })}
+                    })}
       ` })] }) }));
 };
 exports.ImageItem = ImageItem;

package/lib/components/items/FileItem/VideoItem.js

@@ -73,53 +73,53 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
                     ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` }))
                     : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: hasGLEffect && isFXAllowed
                             ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight }))
-                            : ((0, jsx_runtime_1.jsx)("video", { poster: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .video-wrapper-${item.id} {
-          position: absolute;
-          overflow: hidden;
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-          opacity: ${opacity};
-        }
-        .video {
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-          opacity: 1;
-          object-fit: cover;
-          overflow: hidden;
-          border-style: solid;
-        }
-        .video-${item.id} {
-          border-color: ${itemStrokeColor};
-        }
-        .video-playback-wrapper {
-          display: flex;
-          justify-content: center;
-        }
-        .video-canvas {
-          border: solid;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          border-width: 0;
-          box-sizing: border-box;
-        }
+                            : ((0, jsx_runtime_1.jsx)("video", { poster: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          opacity: ${opacity};
+        }
+        .video {
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          opacity: 1;
+          object-fit: cover;
+          overflow: hidden;
+          border-style: solid;
+        }
+        .video-${item.id} {
+          border-color: ${itemStrokeColor};
+        }
+        .video-playback-wrapper {
+          display: flex;
+          justify-content: center;
+        }
+        .video-canvas {
+          border: solid;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          border-width: 0;
+          box-sizing: border-box;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-            .video-wrapper-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg) translateZ(0);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            }
-            .video-${item.id} {
-              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
-              border-radius: ${layoutParams.radius * 100}vw;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
-            }
+                    return (`
+            .video-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg) translateZ(0);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+            }
+            .video-${item.id} {
+              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
+            }
           `);
-                })}
+                })}
     ` })] }));
 };
 exports.VideoItem = VideoItem;

package/lib/components/items/GroupItem/GroupItem.js

@@ -34,21 +34,21 @@ 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) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), 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%;
-          height: 100%;
-          box-sizing: border-box;
-        }
+    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) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), 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%;
+          height: 100%;
+          box-sizing: border-box;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                        return (`
-            .group-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg) translateZ(0);
-            }
+                        return (`
+            .group-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg) translateZ(0);
+            }
           `);
-                    })}
+                    })}
       ` })] }) }));
 };
 exports.GroupItem = GroupItem;

package/lib/components/items/Item.js

@@ -28,9 +28,9 @@ const useSizing_1 = require("./useSizing");
 const useItemPointerEvents_1 = require("./useItemPointerEvents");
 const useItemArea_1 = require("./useItemArea");
 const useDraggable_1 = require("./useDraggable");
-const stickyFix = `
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
+const stickyFix = `
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 `;
 const noop = () => null;
 const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
@@ -134,40 +134,40 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                                     ? 'grab'
                                     : hasClickTriggers
                                         ? 'pointer'
-                                        : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none', userSelect: isDraggable ? 'none' : 'unset', WebkitUserSelect: isDraggable ? 'none' : 'unset', MozUserSelect: isDraggable ? 'none' : 'unset', msUserSelect: isDraggable ? 'none' : 'unset' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                                        : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none', userSelect: isDraggable ? 'none' : 'unset', WebkitUserSelect: isDraggable ? 'none' : 'unset', MozUserSelect: isDraggable ? 'none' : 'unset', msUserSelect: isDraggable ? 'none' : 'unset' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     const scaleAnchor = area.scaleAnchor;
-                    return (`
-            .item-${item.id} {
-              position: ${sticky ? 'sticky' : 'absolute'};
-              top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
-              transition: opacity 0.2s linear 0.1s;
-              pointer-events: none;
-              display: ${hidden ? 'none' : 'block'};
-              height: fit-content;
-            }
-            .item-${item.id}-inner {
+                    return (`
+            .item-${item.id} {
+              position: ${sticky ? 'sticky' : 'absolute'};
+              top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
+              transition: opacity 0.2s linear 0.1s;
+              pointer-events: none;
+              display: ${hidden ? 'none' : 'block'};
+              height: fit-content;
+            }
+            .item-${item.id}-inner {
               width: ${sizingAxis.x === 'manual'
                         ? `${area.width * 100}vw`
-                        : 'max-content'};
-              height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
-              transform: scale(${area.scale});
-              position: relative;
-            }
-            .item-wrapper-${item.id} {
-              position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
-              z-index: ${area.zIndex};
-              ${!isInGroup && stickyFix}
-              pointer-events: none;
-              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
-              top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
-              left: ${area.left * 100}vw;
-            }
+                        : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
+              position: relative;
+            }
+            .item-wrapper-${item.id} {
+              position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
+              z-index: ${area.zIndex};
+              ${!isInGroup && stickyFix}
+              pointer-events: none;
+              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
+              top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
+              left: ${area.left * 100}vw;
+            }
           `);
-                })}
+                })}
       ` })] }));
 };
 exports.Item = Item;

package/lib/components/items/RectangleItem/RectangleItem.js

@@ -46,28 +46,28 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     }, [isInteractive, onVisibilityChange]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_b = item.link) === null || _b === void 0 ? void 0 : _b.url, target: (_c = item.link) === null || _c === void 0 ? void 0 : _c.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(Object.assign({}, (backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {})), (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (backdropFilterValue !== undefined
                         ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
-                        : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .rectangle-${item.id} {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          border-style: solid;
-          box-sizing: border-box;
-        }
+                        : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .rectangle-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border-style: solid;
+          box-sizing: border-box;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                        return (`
-            .rectangle-${item.id} {
-              background-color: ${color_1.CntrlColor.parse(layoutParams.fillColor).fmt('rgba')};
-              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
-              border-radius: ${layoutParams.radius * 100}vw;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
-              transform: rotate(${area.angle}deg) translateZ(0);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
-              -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
-            }
+                        return (`
+            .rectangle-${item.id} {
+              background-color: ${color_1.CntrlColor.parse(layoutParams.fillColor).fmt('rgba')};
+              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
+              transform: rotate(${area.angle}deg) translateZ(0);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+              -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+            }
           `);
-                    })}
+                    })}
       ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;

package/lib/components/items/RichTextItem/RichTextItem.js

@@ -55,27 +55,27 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     }, [isInteractive, onVisibilityChange]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                         const color = color_1.CntrlColor.parse(layoutParams.color);
-                        return (`
-            .rich-text-wrapper-${item.id} {
-              font-size: ${layoutParams.fontSize * 100}vw;
-              line-height: ${layoutParams.lineHeight * 100}vw;
-              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
-              word-spacing: ${layoutParams.wordSpacing * 100}vw;
-              font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
-              font-weight: ${layoutParams.fontWeight};
-              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
-              vertical-align: ${layoutParams.verticalAlign};
-              font-variant: ${layoutParams.fontVariant};
-              color: ${color.fmt('rgba')};
-              transform: rotate(${area.angle}deg) translateZ(0);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              text-transform: ${layoutParams.textTransform};
-            }
-            @supports not (color: oklch(42% 0.3 90 / 1)) {
-              .rich-text-wrapper-${item.id} {
-                color: ${color.fmt('rgba')};
-              }
-            }
+                        return (`
+            .rich-text-wrapper-${item.id} {
+              font-size: ${layoutParams.fontSize * 100}vw;
+              line-height: ${layoutParams.lineHeight * 100}vw;
+              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
+              word-spacing: ${layoutParams.wordSpacing * 100}vw;
+              font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
+              font-weight: ${layoutParams.fontWeight};
+              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
+              vertical-align: ${layoutParams.verticalAlign};
+              font-variant: ${layoutParams.fontVariant};
+              color: ${color.fmt('rgba')};
+              transform: rotate(${area.angle}deg) translateZ(0);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              text-transform: ${layoutParams.textTransform};
+            }
+            @supports not (color: oklch(42% 0.3 90 / 1)) {
+              .rich-text-wrapper-${item.id} {
+                color: ${color.fmt('rgba')};
+              }
+            }
           `);
                     })}`] })] }));
 };

package/lib/interactions/InteractionsRegistry.js

@@ -93,6 +93,8 @@ class InteractionsRegistry {
         for (const interaction of this.interactions) {
             const { triggers } = interaction;
             for (const trigger of triggers) {
+                if (!('itemId' in trigger))
+                    continue;
                 if (trigger.itemId !== itemId)
                     continue;
                 if (activeStates.includes(trigger.from)) {
@@ -102,12 +104,107 @@ class InteractionsRegistry {
         }
         return available;
     }
-    notifyTrigger(itemId, triggerType) {
+    notifyLoad() {
         var _a, _b;
         const timestamp = Date.now();
         for (const interaction of this.interactions) {
             const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const matchingTrigger = interaction.triggers.find((trigger) => trigger.itemId === itemId
+            const matchingTrigger = interaction.triggers.find(trigger => 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId);
+            if (!matchingTrigger)
+                continue;
+            const activeStateId = this.getActiveInteractionState(interaction.id);
+            const isNewStateActive = matchingTrigger.to === activeStateId;
+            this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
+            const transitioningItems = (_a = this.stateItemsIdsMap[activeStateId]) !== null && _a !== void 0 ? _a : [];
+            const state = interaction.states.find((state) => state.id === matchingTrigger.to);
+            const actions = (_b = state === null || state === void 0 ? void 0 : state.actions) !== null && _b !== void 0 ? _b : [];
+            for (const action of actions) {
+                const ctrl = this.ctrls.get(action.itemId);
+                if (!ctrl)
+                    continue;
+                ctrl.receiveAction(action.type);
+            }
+            this.itemsStages = this.itemsStages.map((stage) => {
+                if (stage.interactionId !== interaction.id)
+                    return stage;
+                return {
+                    itemId: stage.itemId,
+                    interactionId: stage.interactionId,
+                    type: 'transitioning',
+                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
+                    to: matchingTrigger.to,
+                    direction: isNewStateActive ? 'in' : 'out',
+                    updated: timestamp
+                };
+            });
+            const itemsToNotify = new Set(transitioningItems);
+            for (const trigger of interaction.triggers) {
+                if (!('itemId' in trigger))
+                    continue;
+                itemsToNotify.add(trigger.itemId);
+            }
+            this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+            this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+        }
+    }
+    notifyScrollTrigger(position) {
+        var _a, _b;
+        const timestamp = Date.now();
+        for (const interaction of this.interactions) {
+            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
+            const matchingTrigger = interaction.triggers.find((trigger) => {
+                if (!('position' in trigger) || trigger.position === 0)
+                    return false;
+                const isScrollingDown = trigger.position < position;
+                const relevantState = isScrollingDown ? trigger.from : trigger.to;
+                return relevantState === currentStateId;
+            });
+            if (!matchingTrigger || !('position' in matchingTrigger))
+                continue;
+            const activeStateId = this.getActiveInteractionState(interaction.id);
+            const targetStateId = matchingTrigger.position > position ? matchingTrigger.from : matchingTrigger.to;
+            const isNewStateActive = targetStateId === activeStateId;
+            this.setCurrentStateForInteraction(interaction.id, targetStateId !== null && targetStateId !== void 0 ? targetStateId : activeStateId);
+            const transitioningItems = (_a = this.stateItemsIdsMap[activeStateId]) !== null && _a !== void 0 ? _a : [];
+            const state = interaction.states.find((state) => state.id === targetStateId);
+            const actions = (_b = state === null || state === void 0 ? void 0 : state.actions) !== null && _b !== void 0 ? _b : [];
+            for (const action of actions) {
+                const ctrl = this.ctrls.get(action.itemId);
+                if (!ctrl)
+                    continue;
+                ctrl.receiveAction(action.type);
+            }
+            const itemsStages = this.itemsStages.map((stage) => {
+                if (stage.interactionId !== interaction.id)
+                    return stage;
+                return {
+                    itemId: stage.itemId,
+                    interactionId: stage.interactionId,
+                    type: 'transitioning',
+                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
+                    to: targetStateId,
+                    direction: isNewStateActive ? 'in' : 'out',
+                    updated: timestamp
+                };
+            });
+            this.itemsStages = itemsStages;
+            const itemsToNotify = new Set(transitioningItems);
+            for (const trigger of interaction.triggers) {
+                if (!('itemId' in trigger))
+                    continue;
+                itemsToNotify.add(trigger.itemId);
+            }
+            this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+            this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+        }
+    }
+    notifyItemTrigger(itemId, triggerType) {
+        var _a, _b;
+        const timestamp = Date.now();
+        for (const interaction of this.interactions) {
+            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
+            const matchingTrigger = interaction.triggers.find((trigger) => 'itemId' in trigger
+                && trigger.itemId === itemId
                 && trigger.from === currentStateId
                 && trigger.type === triggerType);
             if (!matchingTrigger)
@@ -139,6 +236,8 @@ class InteractionsRegistry {
             });
             const itemsToNotify = new Set(transitioningItems);
             for (const trigger of interaction.triggers) {
+                if (!('itemId' in trigger))
+                    continue;
                 itemsToNotify.add(trigger.itemId);
             }
             this.notifyItemCtrlsChange(Array.from(itemsToNotify));

package/lib/interactions/ItemInteractionCtrl.js

@@ -56,7 +56,7 @@ class ItemInteractionController {
         return triggers.has(triggerType);
     }
     sendTrigger(type) {
-        this.registry.notifyTrigger(this.itemId, type);
+        this.registry.notifyItemTrigger(this.itemId, type);
     }
     receiveAction(type) {
         var _a;

package/lib/provider/InteractionsContext.js

@@ -5,14 +5,35 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InteractionsRegistry_1 = require("../interactions/InteractionsRegistry");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
+const ArticleRectContext_1 = require("./ArticleRectContext");
 exports.InteractionsContext = (0, react_1.createContext)(undefined);
 const InteractionsProvider = ({ article, children }) => {
     const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const registry = (0, react_1.useMemo)(() => {
         if (!layoutId)
             return;
         return new InteractionsRegistry_1.InteractionsRegistry(article, layoutId);
     }, [layoutId]);
+    (0, react_1.useEffect)(() => {
+        if (!registry || !articleRectObserver)
+            return;
+        const handleScroll = () => {
+            const scrollY = window.scrollY;
+            registry.notifyScrollTrigger(scrollY);
+        };
+        return articleRectObserver.on('scroll', handleScroll);
+    }, [registry, articleRectObserver]);
+    (0, react_1.useEffect)(() => {
+        if (!registry)
+            return;
+        registry.notifyLoad();
+        const handleLoad = () => {
+            registry.notifyLoad();
+        };
+        window.addEventListener('load', handleLoad);
+        return () => window.removeEventListener('load', handleLoad);
+    }, [registry]);
     return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: registry, children: children }));
 };
 exports.InteractionsProvider = InteractionsProvider;