@cntrl-site/sdk-nextjs 1.8.13 → 1.8.15

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

@@ -112,7 +112,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(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { 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, { 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(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.play();
@@ -135,31 +135,31 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             width: '100%',
                             top: '0',
                             left: '0'
-                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, 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-video-wrapper-${item.id} {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-      .embed-video {
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        border: none;
-        overflow: hidden;
-      }
+                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, 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-video-wrapper-${item.id} {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .embed-video {
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        border: none;
+        overflow: hidden;
+      }
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-          .embed-video-wrapper-${item.id} {
-            opacity: ${layoutParams.opacity};
-            transform: rotate(${area.angle}deg);
-            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-          }
-          .embed-video-wrapper-${item.id} .embed-video {
-            border-radius: ${layoutParams.radius * 100}vw;
-          }
+                    return (`
+          .embed-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-video-wrapper-${item.id} .embed-video {
+            border-radius: ${layoutParams.radius * 100}vw;
+          }
         `);
-                })}
+                })}
     ` })] }));
 };
 exports.VimeoEmbedItem = VimeoEmbedItem;

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

@@ -118,7 +118,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
                     if (!player || 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)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.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) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -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);
-              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

@@ -65,48 +65,48 @@ 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: (_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)` } : {})), (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
+    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);
-              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

@@ -69,57 +69,57 @@ const VideoItem = ({ 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.jsxs)(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.jsx)("div", { className: `video-wrapper-${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: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasScrollPlayback
+    return ((0, jsx_runtime_1.jsxs)(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.jsx)("div", { className: `video-wrapper-${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: (_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.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);
-              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)` } : {})), (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);
-            }
+                        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

@@ -44,30 +44,30 @@ const RectangleItem = ({ 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.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)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (backdropFilterValue !== undefined
+    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);
-              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

@@ -53,29 +53,29 @@ const RichTextItem = ({ 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.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)` } : {})), (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]) => {
+    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);
-              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/provider/WebGLContextManagerContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebglContextManagerContext = void 0;
+const effects_1 = require("@cntrl-site/effects");
+const react_1 = require("react");
+exports.WebglContextManagerContext = (0, react_1.createContext)(new effects_1.WebGLContextManager());