npm - @cntrl-site/sdk-nextjs - Versions diffs - 1.9.8 → 1.9.10 - Mend

@cntrl-site/sdk-nextjs 1.9.8 → 1.9.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/.idea/codeStyles/codeStyleConfig.xml +5 -0
package/.idea/modules.xml +8 -0
package/.idea/sdk-nextjs.iml +12 -0
package/.idea/vcs.xml +6 -0
package/lib/components/items/EmbedVideoItem/VimeoEmbed.js +12 -4
package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js +9 -4
package/lib/components/items/FileItem/ImageItem.js +23 -43
package/lib/components/items/FileItem/VideoItem.js +21 -41
package/lib/components/items/RectangleItem/RectangleItem.js +22 -45
package/package.json +1 -1
package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +11 -3
package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +8 -3
package/src/components/items/FileItem/ImageItem.tsx +14 -60
package/src/components/items/FileItem/VideoItem.tsx +14 -60
package/src/components/items/Item.tsx +1 -1
package/src/components/items/RectangleItem/RectangleItem.tsx +24 -57
package/cntrl-site-sdk-nextjs-1.9.8.tgz +0 -0

package/.idea/codeStyles/codeStyleConfig.xml ADDED Viewed

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.idea/modules.xml ADDED Viewed

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml ADDED Viewed

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml ADDED Viewed

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

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

@@ -38,7 +38,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
     const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
     const [ref, setRef] = (0, react_1.useState)(null);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
-    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
+    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(item.commonParams.coverUrl !== null);
     const layoutValues = [item.area, item.layoutParams];
     const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
     const frameStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['radius']);
@@ -68,6 +68,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
         if (layoutParams.play === 'on-click') {
             setIsCoverVisible(true);
         }
+        if (layoutParams.play === 'auto') {
+            setIsCoverVisible(false);
+        }
         vimeoPlayer.on('pause', (e) => {
             if (e.seconds === 0) {
                 setIsCoverVisible(true);
@@ -117,14 +120,19 @@ 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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
-                    if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
+                    if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible)
                         return;
                     vimeoPlayer.play();
                 }, onMouseLeave: () => {
                     if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
                         return;
                     vimeoPlayer.pause();
-                }, 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: {
+                }, children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", Object.assign({ ref: setImgRef }, ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-click' ? { onClick: () => onCoverClick() } : {}), ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover' ? { onMouseEnter: () => {
+                            if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
+                                return;
+                            setIsCoverVisible(false);
+                            vimeoPlayer.play();
+                        } } : {}), { src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -133,7 +141,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, alt: "Cover img" })), layoutParams && (!layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
+                        }, alt: "Cover img" }))), layoutParams && (!layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
                             position: 'absolute',
                             height: '100%',
                             width: '100%',

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

@@ -29,7 +29,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
     const [player, setPlayer] = (0, react_1.useState)(undefined);
-    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
+    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(item.commonParams.coverUrl !== null);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
     const layoutValues = [item.area, item.layoutParams];
     const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
@@ -115,14 +115,19 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
         });
     }, [interactionCtrl, player]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
-                    if (!player || !layoutParams || layoutParams.play !== 'on-hover')
+                    if (!player || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible)
                         return;
                     player.playVideo();
                 }, onMouseLeave: () => {
                     if (!player || !layoutParams || layoutParams.play !== 'on-hover')
                         return;
                     player.pauseVideo();
-                }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [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)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", Object.assign({ ref: setImgRef }, ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-click' ? { onClick: () => onCoverClick() } : {}), ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover' ? { onMouseEnter: () => {
+                            if (!player || !layoutParams || layoutParams.play !== 'on-hover')
+                                return;
+                            setIsCoverVisible(false);
+                            player.playVideo();
+                        } } : {}), { src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -132,7 +137,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
                             top: '0',
                             left: '0',
                             zIndex: 1
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" }))), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_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;

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

@@ -20,7 +20,7 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
 const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -38,10 +38,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const width = area && exemplary ? area.width * exemplary : 0;
     const height = area && exemplary ? area.height * exemplary : 0;
     const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
-    const imgStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius']);
-    const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
-    const stateStrokeFillLayers = (_b = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _b === void 0 ? void 0 : _b.strokeFill;
-    const strokeSolidTransition = (_c = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _c !== void 0 ? _c : 'none';
+    const imgStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius', 'strokeFill']);
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
@@ -51,35 +48,30 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         controlsValues
     }, width, height);
     const rect = (0, useElementRect_1.useElementRect)(wrapperRef);
-    const rectWidth = Math.floor((_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0);
-    const rectHeight = Math.floor((_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0);
-    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _f === void 0 ? void 0 : _f.radius, itemRadius);
-    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _g === void 0 ? void 0 : _g.strokeWidth, itemStrokeWidth);
-    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.angle, itemAngle);
-    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.opacity, itemOpacity);
-    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _k === void 0 ? void 0 : _k.blur, itemBlur);
-    const strokeValue = stateStrokeFillLayers
-        ? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
-        : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
-    const stroke = strokeValue
-        ? (_l = (0, getFill_1.getFill)(strokeValue)) !== null && _l !== void 0 ? _l : 'transparent'
+    const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);
+    const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
+    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _e === void 0 ? void 0 : _e.strokeWidth, itemStrokeWidth);
+    const strokeFill = (_h = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = (_f = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _f === void 0 ? void 0 : _f.strokeFill) === null || _g === void 0 ? void 0 : _g[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _h !== void 0 ? _h : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _k === void 0 ? void 0 : _k.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_l = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _l === void 0 ? void 0 : _l.blur, itemBlur);
+    const stroke = strokeFill
+        ? (_m = (0, getFill_1.getFill)(strokeFill)) !== null && _m !== void 0 ? _m : 'transparent'
         : 'transparent';
-    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), { transition: (_m = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
+    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? {
+        borderColor: stroke,
+        borderWidth: `${strokeWidth * 100}vw`,
+        borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
+        borderStyle: 'solid',
+    } : {})), { transition: (_o = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _o !== void 0 ? _o : 'none' });
     const isInteractive = opacity !== 0;
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (strokeValue ? Object.assign({ '--stroke-background': stroke }, (strokeValue.type === 'image' ? {
-                        '--stroke-background-position': 'center',
-                        '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                        '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                    } : {})) : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none' }), children: [hasGLEffect && isFXAllowed
-                            ? ((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 })), strokeWidth !== 0 && strokeValue && ((0, jsx_runtime_1.jsx)("div", { className: `image-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
-                                backgroundPosition: 'center',
-                                backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                                backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                            } : { background: stroke })) : {})) }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_p = item.link) === null || _p === void 0 ? void 0 : _p.url, target: (_q = item.link) === null || _q === void 0 ? void 0 : _q.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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_r = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _r !== void 0 ? _r : '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%;
@@ -115,21 +107,9 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
             }
             .image-${item.id} {
               border: solid;
-              border-color: transparent;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
+              border-color: ${stroke};
               border-radius: ${layoutParams.radius * 100}vw;
-            }
-            .image-border-${item.id} {
-              position: absolute;
-              inset: 0;
-              border-radius: inherit;
-              pointer-events: none;
-              z-index: 2;
-              -webkit-mask:
-                linear-gradient(#fff 0 0) content-box,
-                linear-gradient(#fff 0 0);
-              -webkit-mask-composite: xor;
-              mask-composite: exclude;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
             }
           `);
                     })}

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

@@ -21,7 +21,7 @@ const useElementRect_1 = require("../../../utils/useElementRect");
 const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
 const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -49,20 +49,15 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const layoutValues = [item.area, item.layoutParams];
     const hasScrollPlayback = scrollPlayback !== null;
     const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
-    const videoStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius']);
-    const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
-    const stateStrokeFillLayers = (_d = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _d === void 0 ? void 0 : _d.strokeFill;
-    const strokeSolidTransition = (_e = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _e !== void 0 ? _e : 'none';
-    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.angle, itemAngle);
-    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.opacity, itemOpacity);
-    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.blur, itemBlur);
-    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.strokeWidth, itemStrokeWidth);
-    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _k === void 0 ? void 0 : _k.radius, itemRadius);
-    const strokeValue = stateStrokeFillLayers
-        ? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
-        : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
-    const stroke = strokeValue
-        ? (_l = (0, getFill_1.getFill)(strokeValue)) !== null && _l !== void 0 ? _l : 'transparent'
+    const videoStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius', 'strokeFill']);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _d === void 0 ? void 0 : _d.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _e === void 0 ? void 0 : _e.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.blur, itemBlur);
+    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.strokeWidth, itemStrokeWidth);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.radius, itemRadius);
+    const strokeFill = (_l = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = (_j = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.styles) === null || _j === void 0 ? void 0 : _j.strokeFill) === null || _k === void 0 ? void 0 : _k[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _l !== void 0 ? _l : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
+    const stroke = strokeFill
+        ? (_m = (0, getFill_1.getFill)(strokeFill)) !== null && _m !== void 0 ? _m : 'transparent'
         : 'transparent';
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
@@ -73,7 +68,12 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         controls: controlsValues
     }, width, height);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), { transition: (_m = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
+    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? {
+        borderWidth: `${strokeWidth * 100}vw`,
+        borderColor: stroke,
+        borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
+        borderStyle: 'solid'
+    } : {})), { transition: (_o = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _o !== void 0 ? _o : 'none' });
     const isInteractive = opacity !== 0;
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
@@ -96,11 +96,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         observer.observe(ref);
         return () => observer.disconnect();
     }, [layoutParams, videoRef, ref, userPaused, isVideoInteracted]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (strokeValue ? Object.assign({ '--stroke-background': stroke }, (strokeValue.type === 'image' ? {
-                    '--stroke-background-position': 'center',
-                    '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                    '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                } : {})) : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_r = item.commonParams.coverUrl) !== null && _r !== void 0 ? _r : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_p = item.link) === null || _p === void 0 ? void 0 : _p.url, target: (_q = item.link) === null || _q === void 0 ? void 0 : _q.target, children: [(0, jsx_runtime_1.jsxs)("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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_r = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _r !== void 0 ? _r : '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}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_s = item.commonParams.coverUrl) !== null && _s !== void 0 ? _s : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
                                     setIsVideoInteracted(true);
                                 }, muted: layoutParams.muted, onPlay: () => {
                                     setIsVideoPlaying(true);
@@ -123,7 +119,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
                                         return;
                                     setIsVideoInteracted(true);
                                     videoRef.play();
-                                }, src: (_s = item.commonParams.coverUrl) !== null && _s !== void 0 ? _s : '', className: `video-cover-${item.id}`, onClick: () => {
+                                }, src: (_t = item.commonParams.coverUrl) !== null && _t !== void 0 ? _t : '', className: `video-cover-${item.id}`, onClick: () => {
                                     if (!videoRef)
                                         return;
                                     setIsVideoInteracted(true);
@@ -138,11 +134,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
                                     else {
                                         videoRef.play();
                                     }
-                                } })))] })), strokeWidth !== 0 && strokeValue && ((0, jsx_runtime_1.jsx)("div", { className: `video-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
-                            backgroundPosition: 'center',
-                            backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                            backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                        } : { background: stroke })) : {})) }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                                } })))] }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
@@ -202,21 +194,9 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
             }
             .video-${item.id} {
               border: solid;
-              border-color: transparent;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
+              border-color: ${stroke};
               border-radius: ${layoutParams.radius * 100}vw;
-            }
-            .video-border-${item.id} {
-              position: absolute;
-              inset: 0;
-              border-radius: inherit;
-              pointer-events: none;
-              z-index: 2;
-              -webkit-mask:
-                linear-gradient(#fff 0 0) content-box,
-                linear-gradient(#fff 0 0);
-              -webkit-mask-composite: xor;
-              mask-composite: exclude;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
             }
           `);
                 })}

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

@@ -22,56 +22,45 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur']);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur', 'strokeFill']);
     const stateFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['fill']);
     const stateFillLayers = (_a = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.styles) === null || _a === void 0 ? void 0 : _a.fill;
     const solidTransition = (_b = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.transition) !== null && _b !== void 0 ? _b : 'none';
-    const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
-    const stateStrokeFillLayers = (_c = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _c === void 0 ? void 0 : _c.strokeFill;
-    const strokeSolidTransition = (_d = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _d !== void 0 ? _d : 'none';
-    const styles = (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _e !== void 0 ? _e : {};
+    const styles = (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _c !== void 0 ? _c : {};
     const layoutValues = [item.area, item.layoutParams];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const backdropBlur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.backdropBlur, itemBackdropBlur);
     const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.radius, itemRadius);
     const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.strokeWidth, itemStrokeWidth);
+    const strokeFill = (_e = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = styles === null || styles === void 0 ? void 0 : styles.strokeFill) === null || _d === void 0 ? void 0 : _d[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _e !== void 0 ? _e : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.angle, itemAngle);
     const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.blur, itemBlur);
     const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
-    const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : []) || (strokeWidth !== 0 && (0, areFillsVisible_1.areFillsVisible)((_g = stateStrokeFillLayers !== null && stateStrokeFillLayers !== void 0 ? stateStrokeFillLayers : itemStrokeFill) !== null && _g !== void 0 ? _g : []));
+    const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : []) || (strokeWidth !== 0 && (0, areFillsVisible_1.areFillsVisible)((_g = strokeFill !== null && strokeFill !== void 0 ? strokeFill : itemStrokeFill) !== null && _g !== void 0 ? _g : []));
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    const strokeValue = stateStrokeFillLayers
-        ? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
-        : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
-    const stroke = strokeValue
-        ? (_h = (0, getFill_1.getFill)(strokeValue)) !== null && _h !== void 0 ? _h : 'transparent'
+    const stroke = strokeFill
+        ? (_h = (0, getFill_1.getFill)(strokeFill)) !== null && _h !== void 0 ? _h : 'transparent'
         : 'transparent';
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_j = item.link) === null || _j === void 0 ? void 0 : _j.url, target: (_k = item.link) === null || _k === void 0 ? void 0 : _k.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeValue ? Object.assign({ '--stroke-background': stroke }, (strokeValue.type === 'image' ? {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_j = item.link) === null || _j === void 0 ? void 0 : _j.url, target: (_k = item.link) === null || _k === void 0 ? void 0 : _k.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeFill ? Object.assign({ borderColor: stroke, borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0, borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit', borderStyle: 'solid' }, (strokeFill.type === 'image' ? {
                         backgroundPosition: 'center',
-                        backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                        backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                        backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
+                        backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
                     } : {})) : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
                         ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
-                        : {})), { transition: (_l = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _l !== void 0 ? _l : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
-                                backgroundPosition: 'center',
-                                backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                                backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                            } : {
-                                background: stroke,
-                            })) : { background: stroke })) }), itemFill && itemFill.map((fill) => {
-                            var _a, _b;
-                            const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
-                            const value = stateFillLayer
-                                ? ((_a = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateFillLayer, fill)) !== null && _a !== void 0 ? _a : fill)
-                                : fill;
-                            const background = value
-                                ? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
-                                : 'transparent';
-                            return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition }));
-                        })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        : {})), { transition: (_l = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _l !== void 0 ? _l : 'none' }), children: itemFill && itemFill.map((fill) => {
+                        var _a, _b;
+                        const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
+                        const value = stateFillLayer
+                            ? ((_a = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateFillLayer, fill)) !== null && _a !== void 0 ? _a : fill)
+                            : fill;
+                        const background = value
+                            ? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
+                            : 'transparent';
+                        return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition, radius: radius, strokeWidth: strokeWidth }));
+                    }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .rectangle-${item.id} {
           position: absolute;
           width: 100%;
@@ -97,25 +86,13 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
               ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
               backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
               -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
-            },
-            .rectangle-border-${item.id} {
-              position: absolute;
-              inset: 0;
-              border-radius: inherit;
-              pointer-events: none;
-              z-index: 2;
-              -webkit-mask:
-                linear-gradient(#fff 0 0) content-box,
-                linear-gradient(#fff 0 0);
-              -webkit-mask-composite: xor;
-              mask-composite: exclude;
             }
           `);
                     })}
       ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;
-function Fill({ fill, itemId, background, solidTransition }) {
+function Fill({ fill, itemId, background, solidTransition, radius, strokeWidth }) {
     const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
     return ((0, jsx_runtime_1.jsx)("div", { className: fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (fill.type === 'solid' ? { background, transition: solidTransition } : {})), (fill.type === 'image'
             ? {
@@ -125,6 +102,6 @@ function Fill({ fill, itemId, background, solidTransition }) {
                 backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
                 opacity: fill.opacity
             }
-            : { background })), { position: 'absolute', borderRadius: 'inherit', mixBlendMode: fill.blendMode, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fill.id));
+            : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, borderRadius: `calc(${radius * 100}vw - ${strokeWidth * 100}vw)`, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fill.id));
 }
 ;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.8",
+  "version": "1.9.10",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx CHANGED Viewed

@@ -29,7 +29,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
-  const [isCoverVisible, setIsCoverVisible] = useState(false);
+  const [isCoverVisible, setIsCoverVisible] = useState(item.commonParams.coverUrl !== null);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
   const frameStateParams = interactionCtrl?.getState<number>(['radius']);
@@ -58,6 +58,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     if (layoutParams.play === 'on-click') {
       setIsCoverVisible(true);
     }
+    if (layoutParams.play === 'auto') {
+      setIsCoverVisible(false);
+    }
     vimeoPlayer.on('pause', (e) => {
       if (e.seconds === 0) {
         setIsCoverVisible(true);
@@ -121,7 +124,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
           transition: wrapperStateParams?.transition ?? 'none'
         }}
         onMouseEnter={() => {
-          if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover') return;
+          if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible) return;
           vimeoPlayer.play();
         }}
         onMouseLeave={() => {
@@ -132,7 +135,12 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         {item.commonParams.coverUrl && (
           <img
             ref={setImgRef}
-            onClick={() => onCoverClick()}
+            {...(layoutParams?.play === 'on-click' ? { onClick: () => onCoverClick() } : {})}
+            {...(layoutParams?.play === 'on-hover' ? { onMouseEnter: () => {
+              if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover') return;
+              setIsCoverVisible(false);
+              vimeoPlayer.play();
+            } } : {})}
             src={item.commonParams.coverUrl ?? ''}
             style={{
               display: isCoverVisible ? 'block' : 'none',

package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
   const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
-  const [isCoverVisible, setIsCoverVisible] = useState(false);
+  const [isCoverVisible, setIsCoverVisible] = useState(item.commonParams.coverUrl !== null);
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
@@ -114,7 +114,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
       <div
         className={`embed-youtube-video-wrapper-${item.id}`}
         onMouseEnter={() => {
-          if (!player || !layoutParams || layoutParams.play !== 'on-hover') return;
+          if (!player || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible) return;
           player.playVideo();
         }}
         onMouseLeave={() => {
@@ -132,7 +132,12 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
         {item.commonParams.coverUrl && (
           <img
             ref={setImgRef}
-            onClick={() => onCoverClick()}
+            {...(layoutParams?.play === 'on-click' ? { onClick: () => onCoverClick() } : {})}
+            {...(layoutParams?.play === 'on-hover' ? { onMouseEnter: () => {
+              if (!player || !layoutParams || layoutParams.play !== 'on-hover') return;
+              setIsCoverVisible(false);
+              player.playVideo();
+            } } : {})}
             src={item.commonParams.coverUrl ?? ''}
             style={{
               display: isCoverVisible ? 'block' : 'none',

package/src/components/items/FileItem/ImageItem.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
-import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { FC, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { CntrlColor } from '@cntrl-site/color';
-import { getLayoutStyles, ImageItem as TImageItem, FillLayer } from '@cntrl-site/sdk';
+import { getLayoutStyles, ImageItem as TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
@@ -40,11 +39,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const width = area && exemplary ? area.width * exemplary : 0;
   const height = area && exemplary ? area.height * exemplary : 0;
   const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'opacity', 'blur']);
-  const imgStateParams = interactionCtrl?.getState<number>(['strokeWidth', 'radius']);
-  const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
-  const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
-  const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
+  const imgStateParams = interactionCtrl?.getState<any>(['strokeWidth', 'radius', 'strokeFill']);
   useEffect(() => {
     isInitialRef.current = false;
   }, []);
@@ -64,19 +59,22 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const rectHeight = Math.floor(rect?.height ?? 0);
   const radius = getStyleFromItemStateAndParams(imgStateParams?.styles?.radius, itemRadius);
   const strokeWidth = getStyleFromItemStateAndParams(imgStateParams?.styles?.strokeWidth, itemStrokeWidth);
+  const strokeFill = getStyleFromItemStateAndParams(imgStateParams?.styles?.strokeFill?.[0], itemStrokeFill?.[0]) ?? itemStrokeFill?.[0];
   const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);
   const blur = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.blur, itemBlur);
-  const strokeValue = stateStrokeFillLayers
-    ? getStyleFromItemStateAndParams<FillLayer>(stateStrokeFillLayers[0], itemStrokeFill?.[0])
-    : itemStrokeFill?.[0];
-  const stroke = strokeValue
-    ? getFill(strokeValue) ?? 'transparent'
+  const stroke = strokeFill
+    ? getFill(strokeFill) ?? 'transparent'
     : 'transparent';
   const inlineStyles = {
     ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
-    ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
+    ...(strokeWidth !== undefined ? {
+      borderColor: stroke,
+      borderWidth: `${strokeWidth * 100}vw`,
+      borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
+      borderStyle: 'solid',
+    } : {}),
     transition: imgStateParams?.transition ?? 'none'
   };
   const isInteractive = opacity !== 0;
@@ -93,14 +91,6 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
             ...(opacity !== undefined ? { opacity } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
             ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
-            ...(strokeValue ? {
-              '--stroke-background': stroke,
-              ...(strokeValue.type === 'image' ? {
-                '--stroke-background-position': 'center',
-                '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-              } : {})
-            } : {}),
             willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
             transition: wrapperStateParams?.transition ?? 'none'
           }}
@@ -123,30 +113,6 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
                   src={item.commonParams.url}
                 />
               )}
-          {strokeWidth !== 0 && strokeValue && (
-            <div
-              className={`image-border-${item.id}`}
-              style={{
-                position: 'absolute',
-                inset: 0,
-                borderRadius: 'inherit',
-                pointerEvents: 'none',
-                zIndex: 2,
-                WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-                WebkitMaskComposite: 'xor',
-                maskComposite: 'exclude',
-                ...(strokeWidth !== 0 && strokeValue ? {
-                  ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
-                  ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
-                  ...(strokeValue.type === 'image' ? {
-                    backgroundPosition: 'center',
-                    backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                    backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                  } : { background: stroke })
-                } : {}),
-              }}
-            />
-          )}
         </div>
         <JSXStyle id={id}>{`
         .image-wrapper-${item.id} {
@@ -184,21 +150,9 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
             }
             .image-${item.id} {
               border: solid;
-              border-color: transparent;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
+              border-color: ${stroke};
               border-radius: ${layoutParams.radius * 100}vw;
-            }
-            .image-border-${item.id} {
-              position: absolute;
-              inset: 0;
-              border-radius: inherit;
-              pointer-events: none;
-              z-index: 2;
-              -webkit-mask:
-                linear-gradient(#fff 0 0) content-box,
-                linear-gradient(#fff 0 0);
-              -webkit-mask-composite: xor;
-              mask-composite: exclude;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
             }
           `);
     })}

package/src/components/items/FileItem/VideoItem.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
-import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { FC, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { CntrlColor } from '@cntrl-site/color';
-import { getLayoutStyles, VideoItem as TVideoItem, FillLayer } from '@cntrl-site/sdk';
+import { getLayoutStyles, VideoItem as TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
@@ -50,21 +49,15 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const hasScrollPlayback = scrollPlayback !== null;
   const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'opacity', 'blur']);
-  const videoStateParams = interactionCtrl?.getState<number>(['strokeWidth', 'radius']);
-  const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
-  const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
-  const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
+  const videoStateParams = interactionCtrl?.getState<any>(['strokeWidth', 'radius', 'strokeFill']);
   const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);
   const blur = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.blur, itemBlur);
   const strokeWidth = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.strokeWidth, itemStrokeWidth);
   const radius = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.radius, itemRadius);
-  const strokeValue = stateStrokeFillLayers
-    ? getStyleFromItemStateAndParams<FillLayer>(stateStrokeFillLayers[0], itemStrokeFill?.[0])
-    : itemStrokeFill?.[0];
-  const stroke = strokeValue
-    ? getFill(strokeValue) ?? 'transparent'
+  const strokeFill = getStyleFromItemStateAndParams(videoStateParams?.styles?.strokeFill?.[0], itemStrokeFill?.[0]) ?? itemStrokeFill?.[0];
+  const stroke = strokeFill
+    ? getFill(strokeFill) ?? 'transparent'
     : 'transparent';
   useEffect(() => {
     isInitialRef.current = false;
@@ -83,7 +76,12 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   useRegisterResize(ref, onResize);
   const inlineStyles = {
     ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
-    ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
+    ...(strokeWidth !== undefined ? {
+      borderWidth: `${strokeWidth * 100}vw`,
+      borderColor: stroke,
+      borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
+      borderStyle: 'solid'
+    } : {}),
     transition: videoStateParams?.transition ?? 'none'
   };
   const isInteractive = opacity !== 0;
@@ -118,14 +116,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           ...(opacity !== undefined ? { opacity } : {}),
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
           ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
-          ...(strokeValue ? {
-            '--stroke-background': stroke,
-            ...(strokeValue.type === 'image' ? {
-              '--stroke-background-position': 'center',
-              '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-              '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-            } : {})
-          } : {}),
           willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
           transition: wrapperStateParams?.transition ?? 'none'
         }}
@@ -217,30 +207,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             ))}
           </>
         )}
-        {strokeWidth !== 0 && strokeValue && (
-          <div
-            className={`video-border-${item.id}`}
-            style={{
-              position: 'absolute',
-              inset: 0,
-              borderRadius: 'inherit',
-              pointerEvents: 'none',
-              zIndex: 2,
-              WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-              WebkitMaskComposite: 'xor',
-              maskComposite: 'exclude',
-              ...(strokeWidth !== 0 && strokeValue ? {
-                ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
-                ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
-                ...(strokeValue.type === 'image' ? {
-                  backgroundPosition: 'center',
-                  backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                  backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                } : { background: stroke })
-              } : {}),
-            }}
-          />
-        )}
       </div>
       <JSXStyle id={id}>{`
         .video-wrapper-${item.id} {
@@ -302,21 +268,9 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             }
             .video-${item.id} {
               border: solid;
-              border-color: transparent;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
+              border-color: ${stroke};
               border-radius: ${layoutParams.radius * 100}vw;
-            }
-            .video-border-${item.id} {
-              position: absolute;
-              inset: 0;
-              border-radius: inherit;
-              pointer-events: none;
-              z-index: 2;
-              -webkit-mask:
-                linear-gradient(#fff 0 0) content-box,
-                linear-gradient(#fff 0 0);
-              -webkit-mask-composite: xor;
-              mask-composite: exclude;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
             }
           `);
     })}

package/src/components/items/Item.tsx CHANGED Viewed

@@ -163,7 +163,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
         className={`item-${item.id}`}
         style={{
           opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
-          top: sticky ?getAnchoredItemTop(stickyTop, sectionHeight, anchorSide) : 0,
+          top: sticky ? getAnchoredItemTop(stickyTop, sectionHeight, anchorSide) : 0,
           height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
         }}
       >

package/src/components/items/RectangleItem/RectangleItem.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
-import { FC, useEffect, useId, useMemo, useState } from 'react';
+import { FC, useEffect, useId, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { CntrlColor } from '@cntrl-site/color';
 import { RectangleItem as TRectangleItem, getLayoutStyles, FillLayer } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
@@ -24,13 +23,10 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
     backdropBlur: itemBackdropBlur
   } = useRectangleItem(item, sectionId);
   const itemAngle = useItemAngle(item, sectionId);
-  const stateParams = interactionCtrl?.getState<number>(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur']);
+  const stateParams = interactionCtrl?.getState<any>(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur', 'strokeFill']);
   const stateFillParams = interactionCtrl?.getState<FillLayer[]>(['fill']);
   const stateFillLayers = stateFillParams?.styles?.fill;
   const solidTransition = stateFillParams?.transition ?? 'none';
-  const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
-  const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
-  const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
   const styles = stateParams?.styles ?? {};
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
@@ -38,19 +34,17 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const backdropBlur = getStyleFromItemStateAndParams(styles?.backdropBlur, itemBackdropBlur);
   const radius = getStyleFromItemStateAndParams(styles?.radius, itemRadius);
   const strokeWidth = getStyleFromItemStateAndParams(styles?.strokeWidth, itemStrokeWidth);
+  const strokeFill = getStyleFromItemStateAndParams(styles?.strokeFill?.[0], itemStrokeFill?.[0]) ?? itemStrokeFill?.[0];
   const angle = getStyleFromItemStateAndParams(styles?.angle, itemAngle);
   const blur = getStyleFromItemStateAndParams(styles?.blur, itemBlur);
   const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
-  const isInteractive = areFillsVisible(stateFillLayers ?? itemFill ?? []) || (strokeWidth !== 0 && areFillsVisible(stateStrokeFillLayers ?? itemStrokeFill ?? []));
+  const isInteractive = areFillsVisible(stateFillLayers ?? itemFill ?? []) || (strokeWidth !== 0 && areFillsVisible(strokeFill ?? itemStrokeFill ?? []));
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
   }, [isInteractive, onVisibilityChange]);
-  const strokeValue = stateStrokeFillLayers
-    ? getStyleFromItemStateAndParams<FillLayer>(stateStrokeFillLayers[0], itemStrokeFill?.[0])
-    : itemStrokeFill?.[0];
-  const stroke = strokeValue
-    ? getFill(strokeValue) ?? 'transparent'
+  const stroke = strokeFill
+    ? getFill(strokeFill) ?? 'transparent'
     : 'transparent';
   return (
@@ -60,12 +54,15 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
           className={`rectangle-${item.id}`}
           ref={setRef}
           style={{
-            ...(strokeValue ? {
-              '--stroke-background': stroke,
-              ...(strokeValue.type === 'image' ? {
+            ...(strokeFill ? {
+              borderColor: stroke,
+              borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0,
+              borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
+              borderStyle: 'solid',
+              ...(strokeFill.type === 'image' ? {
                 backgroundPosition: 'center',
-                backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
+                backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
               } : {})
             } : {}),
             ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
@@ -79,31 +76,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
             transition: stateParams?.transition ?? 'none'
           }}
         >
-          <div
-            className={`rectangle-border-${item.id}`}
-            style={{
-              position: 'absolute',
-              inset: 0,
-              borderRadius: 'inherit',
-              pointerEvents: 'none',
-              zIndex: 2,
-              WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-              WebkitMaskComposite: 'xor',
-              maskComposite: 'exclude',
-              ...(strokeWidth !== 0 && strokeValue ? {
-                ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
-                ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
-                ...(strokeValue.type === 'image' ? {
-                  backgroundPosition: 'center',
-                  backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                  backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                } : {
-                  background: stroke,
-                }
-                )
-              } : { background: stroke }),
-            }}
-          />
           {itemFill && itemFill.map((fill) => {
             const stateFillLayer = stateFillLayers?.find((layer) => layer.id === fill.id);
             const value = stateFillLayer
@@ -114,7 +86,14 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
               : 'transparent';
             return (
-              <Fill fill={value} itemId={item.id} background={background} solidTransition={solidTransition} />
+              <Fill
+                fill={value}
+                itemId={item.id}
+                background={background}
+                solidTransition={solidTransition}
+                radius={radius}
+                strokeWidth={strokeWidth}
+              />
             );
           })}
         </div>
@@ -144,18 +123,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
               ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
               backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
               -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
-            },
-            .rectangle-border-${item.id} {
-              position: absolute;
-              inset: 0;
-              border-radius: inherit;
-              pointer-events: none;
-              z-index: 2;
-              -webkit-mask:
-                linear-gradient(#fff 0 0) content-box,
-                linear-gradient(#fff 0 0);
-              -webkit-mask-composite: xor;
-              mask-composite: exclude;
             }
           `);
     })}
@@ -165,7 +132,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   );
 };
-function Fill({ fill, itemId, background, solidTransition }: { fill: FillLayer; itemId: string; background: string; solidTransition: string; }) {
+function Fill({ fill, itemId, background, solidTransition, radius, strokeWidth }: { fill: FillLayer; itemId: string; background: string; solidTransition: string; radius: number; strokeWidth: number; }) {
   const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
   return (
@@ -184,8 +151,8 @@ function Fill({ fill, itemId, background, solidTransition }: { fill: FillLayer;
             }
           : { background }),
         position: 'absolute',
-        borderRadius: 'inherit',
         mixBlendMode: fill.blendMode as any,
+        borderRadius: `calc(${radius * 100}vw - ${strokeWidth * 100}vw)`,
         top: 0,
         left: 0,
         width: '100%',

package/cntrl-site-sdk-nextjs-1.9.8.tgz DELETED Viewed

Binary file