@cntrl-site/sdk-nextjs 0.29.6 → 0.30.0

package/lib/components/items/VideoItem.js

@@ -23,38 +23,23 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, strokeColor, opacity, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
+    const borderColor = (0, react_1.useMemo)(() => strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     const videoRef = (0, react_1.useRef)(null);
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const scrollPlayback = item.layoutParams[layoutId].scrollPlayback;
+    const scrollPlayback = layoutId ? item.layoutParams[layoutId].scrollPlayback : null;
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
     const hasScrollPlayback = scrollPlayback !== null;
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [hasScrollPlayback ? ((0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
-                    opacity: `${opacity}`,
+    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {}));
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
+                    opacity,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`,
-                    overflow: 'hidden'
-                }, children: (0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: {
-                        borderRadius: `${radius * 100}vw`,
-                        borderWidth: `${strokeWidth * 100}vw`,
-                        borderColor: `${borderColor.toCss()}`
-                    }, className: `video video-playback-wrapper video-${item.id}` }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
-                    opacity: `${opacity}`,
-                    transform: `rotate(${angle}deg)`,
-                    filter: `blur(${blur * 100}vw)`
-                }, children: (0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: {
-                        borderRadius: `${radius * 100}vw`,
-                        borderWidth: `${strokeWidth * 100}vw`,
-                        borderColor: `${borderColor.toCss()}`
-                    }, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) })), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        @supports not (color: oklch(42% 0.3 90 / 1)) {
-          .video-${item.id} {
-            border-color: ${borderColor.fmt('rgba')};
-          }
-        }
+                }, 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)("video", { 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;
@@ -76,19 +61,25 @@ const VideoItem = ({ item, sectionId, onResize }) => {
           display: flex;
           justify-content: center;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                     return (`
             .video-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .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;
               transition: ${(0, HoverStyles_1.getTransitions)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
             .video-wrapper-${item.id}:hover .video {
-              ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
           `);
                 })}

package/lib/components/items/VimeoEmbed.js

@@ -25,6 +25,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
     const [ref, setRef] = (0, react_1.useState)(null);
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
@@ -67,19 +68,23 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
         border: none;
         overflow: hidden;
       }
-      ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                     return (`
           .embed-video-wrapper-${item.id} {
+            opacity: ${layoutParams.opacity};
+            transform: rotate(${area.angle}deg);
+            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
             transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
           }
           .embed-video-wrapper-${item.id}:hover {
             ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
           }
           .embed-video-wrapper-${item.id} .embedVideo {
+            border-radius: ${layoutParams.radius * 100}vw;
             transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
           }
           .embed-video-wrapper-${item.id}:hover .embedVideo {
-            ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)}
+            ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
           }
         `);
                 })}

package/lib/components/items/YoutubeEmbed.js

@@ -26,6 +26,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
     const [player, setPlayer] = (0, react_1.useState)(undefined);
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
     (0, useRegisterResize_1.useRegisterResize)(div, onResize);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
@@ -68,7 +69,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
                     opacity: `${opacity}`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
-                }, children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: { borderRadius: `${radius * 100}vw` } }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;
@@ -84,19 +85,23 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
           z-index: 1;
           border: none;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                     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'};
               transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
+              border-radius: ${layoutParams.radius * 100}vw;
               transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
-              ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
             }
           `);
                 })}

package/lib/components/items/useCodeEmbedItem.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeEmbedItem = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const useLayoutContext_1 = require("../useLayoutContext");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useCodeEmbedItem = (item, sectionId) => {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {
+        if (!layoutId)
+            return 1;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
+    const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : sdk_1.AreaAnchor.TopLeft;
+    return { anchor, blur, opacity };
+};
+exports.useCodeEmbedItem = useCodeEmbedItem;

package/lib/components/items/useEmbedVideoItem.js

@@ -1,23 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEmbedVideoItem = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../useLayoutContext");
 const useEmbedVideoItem = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
     }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
-    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
     }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
-    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {
         if (!layoutId)
             return 1;
         const layoutParams = item.layoutParams[layoutId];

package/lib/components/items/useFileItem.js

@@ -1,36 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFileItem = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../useLayoutContext");
-const defaultColor = 'rgba(0, 0, 0, 1)';
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
 const useFileItem = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
     }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
-    const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderWidth, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
     }, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, sectionId, [layoutId]);
-    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return 1;
         const layoutParams = item.layoutParams[layoutId];
-        return 'opacity' in layoutParams ? layoutParams.opacity : 0;
+        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
-    const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderColor, (item, layoutId) => {
         if (!layoutId)
-            return defaultColor;
+            return DEFAULT_COLOR;
         const layoutParams = item.layoutParams[layoutId];
-        return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
+        return 'strokeColor' in layoutParams ? layoutParams.strokeColor : DEFAULT_COLOR;
     }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, sectionId);
-    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];

package/lib/components/items/useGroupItem.js

@@ -2,14 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGroupItem = void 0;
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const sdk_1 = require("@cntrl-site/sdk");
 const useLayoutContext_1 = require("../useLayoutContext");
 function useGroupItem(item, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return 1;
         const layoutParams = item.layoutParams[layoutId];
-        return 'opacity' in layoutParams ? layoutParams.opacity : 0;
+        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
     return { opacity };
 }

package/lib/components/items/useRectangleItem.js

@@ -1,42 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRectangleItem = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../useLayoutContext");
 const defaultColor = 'rgba(0, 0, 0, 1)';
 const useRectangleItem = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
     }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
-    const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderWidth, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
     }, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, sectionId, [layoutId]);
-    const fillColor = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const fillColor = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Color, (item, layoutId) => {
         if (!layoutId)
             return defaultColor;
         const layoutParams = item.layoutParams[layoutId];
         return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
     }, (animator, scroll, value) => animator.getColor({ color: value }, scroll).color, sectionId, [layoutId]);
-    const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderColor, (item, layoutId) => {
         if (!layoutId)
             return defaultColor;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, sectionId, [layoutId]);
-    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
     }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
-    const backdropBlur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const backdropBlur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BackdropBlur, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];

package/lib/components/items/useRichTextItemValues.js

@@ -2,35 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRichTextItemValues = void 0;
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const sdk_1 = require("@cntrl-site/sdk");
 const useLayoutContext_1 = require("../useLayoutContext");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
 const useRichTextItemValues = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const { angle } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll), sectionId);
-    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
     }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
-    const letterSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const letterSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.LetterSpacing, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'letterSpacing' in layoutParams ? layoutParams.letterSpacing : 0;
     }, (animator, scroll, value) => animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing, sectionId, [layoutId]);
-    const wordSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const wordSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.WordSpacing, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'wordSpacing' in layoutParams ? layoutParams.wordSpacing : 0;
     }, (animator, scroll, value) => animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing, sectionId, [layoutId]);
-    const color = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const color = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.TextColor, (item, layoutId) => {
         if (!layoutId)
             return DEFAULT_COLOR;
         const layoutParams = item.layoutParams[layoutId];
         return 'color' in layoutParams ? layoutParams.color : DEFAULT_COLOR;
     }, (animator, scroll, value) => animator.getTextColor({ color: value }, scroll).color, sectionId, [layoutId]);
-    return { angle, blur, letterSpacing, wordSpacing, color };
+    return { blur, letterSpacing, wordSpacing, color };
 };
 exports.useRichTextItemValues = useRichTextItemValues;

package/lib/components/items/useStickyItemTop.js

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStickyItemTop = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../useLayoutContext");
 function useStickyItemTop(item, sectionHeightMap, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const { top } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const data = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Position, (item, layoutId) => {
         if (!layoutId)
-            return { top: 0, left: 0 };
+            return;
         return item.area[layoutId];
-    }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
+    const top = data ? data.top : layoutId ? item.area[layoutId].top : 0;
     const sticky = layoutId ? item.sticky[layoutId] : undefined;
     return sticky ? top - sticky.from : 0;
 }

package/lib/components/useItemAngle.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemAngle = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
 const useItemAngle = (item, sectionId) => {
-    const { angle } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll), sectionId);
+    const angle = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Rotation, (item, layoutId) => layoutId ? item.area[layoutId].angle : 0, (animator, scroll, value) => animator.getRotation({ angle: value }, scroll).angle, sectionId);
     return angle;
 };
 exports.useItemAngle = useItemAngle;

package/lib/components/useItemDimensions.js

@@ -1,19 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemDimensions = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
 const useLayoutContext_1 = require("./useLayoutContext");
-const defaultArea = {
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0,
-    angle: 0,
-    zIndex: 0
-};
 const useItemDimensions = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const { width, height } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea, (animator, scroll, value) => animator.getDimensions(value, scroll), sectionId, [layoutId]);
-    return { width, height };
+    const dimensions = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Dimensions, (item, layoutId) => layoutId ? item.area[layoutId] : undefined, (animator, scroll, value) => value ? animator.getDimensions(value, scroll) : undefined, sectionId, [layoutId]);
+    return dimensions;
 };
 exports.useItemDimensions = useItemDimensions;

package/lib/components/useItemPosition.js

@@ -7,19 +7,19 @@ const getItemTopStyle_1 = require("../utils/getItemTopStyle");
 const useLayoutContext_1 = require("./useLayoutContext");
 const useItemPosition = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const { top, left } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+    const position = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Position, (item, layoutId) => {
         if (!layoutId)
-            return { top: 0, left: -10 };
+            return;
         return item.area[layoutId];
-    }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
+    }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
     const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
     const positionType = layoutId ? item.area[layoutId].positionType : sdk_1.PositionType.ScreenBased;
     // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
     const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
-    return {
-        bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
-        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
-        left: `${left * 100}vw`
-    };
+    return position ? {
+        bottom: isScreenBasedBottom ? `${-position.top * 100}vw` : 'unset',
+        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(position.top, anchorSide),
+        left: `${position.left * 100}vw`
+    } : undefined;
 };
 exports.useItemPosition = useItemPosition;

package/lib/components/useItemScale.js

@@ -6,8 +6,7 @@ const useKeyframeValue_1 = require("../common/useKeyframeValue");
 const useLayoutContext_1 = require("./useLayoutContext");
 const useItemScale = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const { scale } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }), (animator, scroll, value) => animator.getScale(value, scroll), sectionId, [layoutId]);
-    const scaleAnchor = layoutId ? item.area[layoutId].scaleAnchor : sdk_1.ScaleAnchor.MiddleCenter;
-    return { scale, scaleAnchor };
+    const scale = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Scale, (item, layoutId) => (layoutId ? item.area[layoutId].scale : undefined), (animator, scroll, value) => value !== undefined ? animator.getScale({ scale: value }, scroll).scale : undefined, sectionId, [layoutId]);
+    return scale;
 };
 exports.useItemScale = useItemScale;

package/lib/utils/ScaleAnchorMap.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScaleAnchorMap = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 exports.ScaleAnchorMap = {
-    [sdk_1.ScaleAnchor.TopLeft]: 'top left',
-    [sdk_1.ScaleAnchor.TopCenter]: 'top center',
-    [sdk_1.ScaleAnchor.TopRight]: 'top right',
-    [sdk_1.ScaleAnchor.MiddleLeft]: 'center left',
-    [sdk_1.ScaleAnchor.MiddleCenter]: 'center',
-    [sdk_1.ScaleAnchor.MiddleRight]: 'center right',
-    [sdk_1.ScaleAnchor.BottomLeft]: 'bottom left',
-    [sdk_1.ScaleAnchor.BottomCenter]: 'bottom center',
-    [sdk_1.ScaleAnchor.BottomRight]: 'bottom right'
+    [sdk_1.AreaAnchor.TopLeft]: 'top left',
+    [sdk_1.AreaAnchor.TopCenter]: 'top center',
+    [sdk_1.AreaAnchor.TopRight]: 'top right',
+    [sdk_1.AreaAnchor.MiddleLeft]: 'center left',
+    [sdk_1.AreaAnchor.MiddleCenter]: 'center',
+    [sdk_1.AreaAnchor.MiddleRight]: 'center right',
+    [sdk_1.AreaAnchor.BottomLeft]: 'bottom left',
+    [sdk_1.AreaAnchor.BottomCenter]: 'bottom center',
+    [sdk_1.AreaAnchor.BottomRight]: 'bottom right'
 };

package/lib/utils/effects/useImageFx.js

@@ -9,11 +9,11 @@ const PATTERN_2_URL = 'https://cdn.cntrl.site/client-app-files/bayer16.png';
 function useImageFx(canvas, enabled, { imageUrl, fragmentShader, cursor, controls }, width, height) {
     const mousePos = (0, react_1.useRef)([0.0, 0.0]);
     const imageFx = (0, react_1.useMemo)(() => {
-        if (!imageUrl || !cursor)
+        if (!imageUrl || !cursor || !enabled)
             return undefined;
         const { type, x, y } = cursor;
         return new effects_1.ImageEffect(imageUrl, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: type === 'mouse' ? mousePos.current : [x, y] }, controls), width, height);
-    }, [imageUrl, fragmentShader, width, height]);
+    }, [imageUrl, fragmentShader, width, height, enabled]);
     (0, react_1.useEffect)(() => {
         if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx)
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.29.6",
+  "version": "0.30.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.11.1",
+    "@cntrl-site/sdk": "^1.12.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/common/useKeyframeValue.ts

@@ -12,11 +12,12 @@ const emptyDeps: DependencyList = [];
 
 export const useKeyframeValue = <T>(
   item: ItemAny,
+  type: KeyframeType,
   itemParamsGetter: ItemParamGetter<T>,
   animatorGetter: AnimatorGetter<T>,
   sectionId: string,
   deps: DependencyList = emptyDeps
-) => {
+): T => {
   const animatorGetterRef = useRef(animatorGetter);
   const itemParamsGetterRef = useRef(itemParamsGetter);
 
@@ -26,7 +27,7 @@ export const useKeyframeValue = <T>(
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutId = useLayoutContext();
   const keyframesRepo = useContext(KeyframesContext);
-  const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id), [item.id, keyframesRepo]);
+  const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id).filter(kf => kf.type === type), [item.id, keyframesRepo, type]);
   const paramValue = useMemo<T>(() => {
     return itemParamsGetterRef.current(item, layoutId);
   }, [item, layoutId, ...deps]);

package/src/components/ArticleWrapper.tsx

@@ -4,21 +4,7 @@ import { useCurrentLayout } from '../common/useCurrentLayout';
 import { LayoutContext } from '../provider/LayoutContext';
 
 export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
-  const id = useId();
-  const [isPageLoaded, setIsPageLoaded] = useState(false);
   const { layoutId, layoutDeviation } = useCurrentLayout();
-
-  useEffect(() => {
-    const onPageLoad = () => {
-      setIsPageLoaded(true);
-    };
-    if (document.readyState === 'loading') {
-      window.addEventListener('DOMContentLoaded', onPageLoad);
-      return () => window.removeEventListener('DOMContentLoaded', onPageLoad);
-    } else {
-      onPageLoad();
-    }
-  }, []);
   const layoutDeviationStyle = {'--layout-deviation': layoutDeviation} as CSSProperties;
 
   return (
@@ -26,18 +12,11 @@ export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
       <div
         className="article-wrapper"
         style={{
-          opacity: layoutId && isPageLoaded ? 1 : 0,
           ...layoutDeviationStyle
         }}
       >
         {children}
       </div>
-      <JSXStyle id={id}>{`
-        .article-wrapper {
-          opacity: 1;
-          transition: opacity 0.2s ease; 
-        }
-      `}</JSXStyle>
     </LayoutContext.Provider>
   );
 };