@cntrl-site/sdk-nextjs 1.8.40 → 1.9.0

package/.idea/codeStyles/codeStyleConfig.xml

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

package/.idea/modules.xml

@@ -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

@@ -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

@@ -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/FileItem/ImageItem.js

@@ -7,7 +7,6 @@ exports.ImageItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
-const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
@@ -19,12 +18,13 @@ const useElementRect_1 = require("../../../utils/useElementRect");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const { radius: itemRadius, strokeWidth: itemStrokeWidth, opacity: itemOpacity, strokeColor: itemStrokeColor, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const { radius: itemRadius, strokeWidth: itemStrokeWidth, opacity: itemOpacity, strokeFill: itemStrokeFill, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(wrapperRef, onResize);
@@ -38,7 +38,10 @@ 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', 'strokeColor']);
+    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';
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
@@ -48,26 +51,37 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         controlsValues
     }, width, height);
     const rect = (0, useElementRect_1.useElementRect)(wrapperRef);
-    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 borderColor = (0, react_1.useMemo)(() => {
-        var _a;
-        const borderColor = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _a === void 0 ? void 0 : _a.strokeColor, itemStrokeColor);
-        return borderColor ? color_1.CntrlColor.parse(borderColor) : undefined;
-    }, [itemStrokeColor, (_d = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _d === void 0 ? void 0 : _d.strokeColor]);
-    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _e === void 0 ? void 0 : _e.radius, itemRadius);
-    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _f === void 0 ? void 0 : _f.strokeWidth, itemStrokeWidth);
-    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.angle, itemAngle);
-    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.opacity, itemOpacity);
-    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.blur, itemBlur);
-    const inlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), { transition: (_k = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _k !== void 0 ? _k : 'none' });
+    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'
+        : '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 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: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasGLEffect && isFXAllowed
-                        ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
-                        : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    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 })), (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,
+                            })) : { background: stroke })) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .image-wrapper-${item.id} {
           position: absolute;
           width: 100%;
@@ -102,9 +116,22 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
               ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
             }
             .image-${item.id} {
-              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
-              border-radius: ${layoutParams.radius * 100}vw;
+              border: solid;
+              border-color: transparent;
               border-width: ${layoutParams.strokeWidth * 100}vw;
+              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;
             }
           `);
                     })}

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

@@ -7,7 +7,6 @@ exports.VideoItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
-const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
@@ -20,12 +19,13 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const useVideoFx_1 = require("../../../utils/effects/useVideoFx");
 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeColor: itemStrokeColor, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const [isVideoPlaying, setIsVideoPlaying] = (0, react_1.useState)(false);
     const isScrollPausedRef = (0, react_1.useRef)(false);
     const [userPaused, setUserPaused] = (0, react_1.useState)(false);
@@ -49,17 +49,21 @@ 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', 'strokeColor']);
-    const borderColor = (0, react_1.useMemo)(() => {
-        var _a;
-        const strokeColor = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.styles) === null || _a === void 0 ? void 0 : _a.color, itemStrokeColor);
-        return strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined;
-    }, [(_d = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.styles) === null || _d === void 0 ? void 0 : _d.color, itemStrokeColor]);
-    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _e === void 0 ? void 0 : _e.angle, itemAngle);
-    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.opacity, itemOpacity);
-    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.blur, itemBlur);
-    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.strokeWidth, itemStrokeWidth);
-    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.radius, itemRadius);
+    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'
+        : 'transparent';
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
@@ -69,7 +73,7 @@ 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(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {})), { transition: (_k = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _k !== void 0 ? _k : 'none' });
+    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 isInteractive = opacity !== 0;
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
@@ -92,7 +96,11 @@ 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: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: [(0, jsx_runtime_1.jsxs)("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: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), 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: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
+    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: () => {
                                     setIsVideoInteracted(true);
                                 }, muted: layoutParams.muted, onPlay: () => {
                                     setIsVideoPlaying(true);
@@ -115,7 +123,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
                                         return;
                                     setIsVideoInteracted(true);
                                     videoRef.play();
-                                }, src: (_q = item.commonParams.coverUrl) !== null && _q !== void 0 ? _q : '', className: `video-cover-${item.id}`, onClick: () => {
+                                }, src: (_s = item.commonParams.coverUrl) !== null && _s !== void 0 ? _s : '', className: `video-cover-${item.id}`, onClick: () => {
                                     if (!videoRef)
                                         return;
                                     setIsVideoInteracted(true);
@@ -130,7 +138,13 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
                                     else {
                                         videoRef.play();
                                     }
-                                } })))] }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                                } })))] })), (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,
+                        })) : { background: stroke })) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
@@ -166,7 +180,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
           border-style: solid;
         }
         .video-${item.id} {
-          border-color: ${itemStrokeColor};
+          border-radius: ${radius !== undefined ? `${radius * 100}vw` : '0'};
         }
         .video-playback-wrapper {
           display: flex;
@@ -189,9 +203,22 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
               ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
             }
             .video-${item.id} {
-              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
-              border-radius: ${layoutParams.radius * 100}vw;
+              border: solid;
+              border-color: transparent;
               border-width: ${layoutParams.strokeWidth * 100}vw;
+              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;
             }
           `);
                 })}

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

@@ -4,7 +4,14 @@ exports.useFileItem = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../../useLayoutContext");
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
+const DEFAULT_FILL = [
+    {
+        id: 'default',
+        type: 'solid',
+        value: 'rgba(0, 0, 0, 1)',
+        blendMode: 'normal'
+    }
+];
 function useFileItem(item, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {
@@ -25,18 +32,18 @@ function useFileItem(item, sectionId) {
         const layoutParams = item.layoutParams[layoutId];
         return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
-    const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderColor, (item, layoutId) => {
+    const strokeFill = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderFill, (item, layoutId) => {
         if (!layoutId)
             return;
         const layoutParams = item.layoutParams[layoutId];
-        return 'strokeColor' in layoutParams ? layoutParams.strokeColor : DEFAULT_COLOR;
-    }, (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined, sectionId, [layoutId]);
+        return 'strokeFill' in layoutParams ? layoutParams.strokeFill : DEFAULT_FILL;
+    }, (animator, scroll, value) => value ? animator.getBorderFill(value, scroll) : undefined, sectionId, [layoutId]);
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
             return;
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
     }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
-    return { radius, strokeWidth, opacity, strokeColor, blur };
+    return { radius, strokeWidth, opacity, strokeFill, blur };
 }
 exports.useFileItem = useFileItem;

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

@@ -7,7 +7,6 @@ exports.RectangleItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
-const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useRectangleItem_1 = require("./useRectangleItem");
@@ -15,22 +14,22 @@ const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const getFill_1 = require("../../../utils/getFill");
+const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisible");
 const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { fillColor: itemFillColor, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeColor: itemStrokeColor, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
+    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', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur']);
-    const styles = (_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _a !== void 0 ? _a : {};
-    const backgroundColor = (0, react_1.useMemo)(() => {
-        const fillColor = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.fillColor, itemFillColor);
-        return fillColor ? color_1.CntrlColor.parse(fillColor) : undefined;
-    }, [itemFillColor, styles === null || styles === void 0 ? void 0 : styles.fillColor]);
-    const borderColor = (0, react_1.useMemo)(() => {
-        const strokeColor = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.strokeColor, itemStrokeColor);
-        return strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined;
-    }, [itemStrokeColor, styles === null || styles === void 0 ? void 0 : styles.strokeColor]);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur']);
+    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 layoutValues = [item.area, item.layoutParams];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
@@ -40,35 +39,92 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     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 = (backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.getAlpha()) !== 0 || (strokeWidth !== 0 && (borderColor === null || borderColor === void 0 ? void 0 : borderColor.getAlpha()) !== 0);
+    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 : []));
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_b = item.link) === null || _b === void 0 ? void 0 : _b.url, target: (_c = item.link) === null || _c === void 0 ? void 0 : _c.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {})), (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
+    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'
+        : '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' ? {
+                        backgroundPosition: 'center',
+                        backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                        backgroundRepeat: strokeValue.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: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        : {})), { 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: `
         .rectangle-${item.id} {
           position: absolute;
           width: 100%;
           height: 100%;
-          border-style: solid;
           box-sizing: border-box;
-        }
+        },
+        .image-fill-${item.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          transform-origin: center center;
+          z-index: 1;
+          background-position: center;
+        },
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                         return (`
             .rectangle-${item.id} {
-              background-color: ${color_1.CntrlColor.parse(layoutParams.fillColor).fmt('rgba')};
-              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
-              border-radius: ${layoutParams.radius * 100}vw;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
+              border-radius: ${layoutParams.radius * 100}vw
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               ${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 }) {
+    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'
+            ? {
+                transform: `rotate(${fill.rotation}deg)`,
+                backgroundImage: `url(${fill.src})`,
+                backgroundSize: fill.behavior === 'repeat' ? `${fill.backgroundSize}%` : fill.behavior,
+                backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
+                opacity: fill.opacity
+            }
+            : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fill.id));
+}
+;

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

@@ -4,7 +4,14 @@ 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 defaultFill = [
+    {
+        id: 'default',
+        type: 'solid',
+        value: 'rgba(0, 0, 0, 1)',
+        blendMode: 'normal'
+    }
+];
 function useRectangleItem(item, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {
@@ -19,18 +26,18 @@ function useRectangleItem(item, sectionId) {
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
     }, (animator, scroll, value) => value !== undefined ? animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth : undefined, sectionId, [layoutId]);
-    const fillColor = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Color, (item, layoutId) => {
+    const fill = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Fill, (item, layoutId) => {
         if (!layoutId)
             return;
         const layoutParams = item.layoutParams[layoutId];
-        return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
-    }, (animator, scroll, value) => value ? animator.getColor({ color: value }, scroll).color : undefined, sectionId, [layoutId]);
-    const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderColor, (item, layoutId) => {
+        return 'fill' in layoutParams ? layoutParams.fill : defaultFill;
+    }, (animator, scroll, value) => value ? animator.getFill(value, scroll) : undefined, sectionId, [layoutId]);
+    const strokeFill = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderFill, (item, layoutId) => {
         if (!layoutId)
             return;
         const layoutParams = item.layoutParams[layoutId];
-        return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
-    }, (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined, sectionId, [layoutId]);
+        return 'strokeFill' in layoutParams ? layoutParams.strokeFill : defaultFill;
+    }, (animator, scroll, value) => value ? animator.getBorderFill(value, scroll) : undefined, sectionId, [layoutId]);
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
             return;
@@ -43,6 +50,6 @@ function useRectangleItem(item, sectionId) {
         const layoutParams = item.layoutParams[layoutId];
         return 'backdropBlur' in layoutParams ? layoutParams.backdropBlur : 0;
     }, (animator, scroll, value) => value !== undefined ? animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur : undefined, sectionId, [layoutId]);
-    return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
+    return { fill, strokeWidth, radius, strokeFill, blur, backdropBlur };
 }
 exports.useRectangleItem = useRectangleItem;

package/lib/interactions/CSSPropertyNameMap.js

@@ -2,29 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyleKeysFromCSSProperty = exports.CSSPropertyNameMap = void 0;
 exports.CSSPropertyNameMap = {
-    'width': 'width',
-    'height': 'height',
-    'top': 'top',
-    'left': 'left',
-    'scale': 'transform',
-    'angle': 'transform',
-    'opacity': 'opacity',
-    'radius': 'border-radius',
-    'strokeWidth': 'border-width',
-    'strokeColor': 'border-color',
-    'fillColor': 'background-color',
-    'blur': 'filter',
-    'backdropBlur': 'backdrop-filter',
-    'letterSpacing': 'letter-spacing',
-    'wordSpacing': 'word-spacing',
-    'color': 'color'
+    width: 'width',
+    height: 'height',
+    top: 'top',
+    left: 'left',
+    scale: 'transform',
+    angle: 'transform',
+    opacity: 'opacity',
+    radius: 'border-radius',
+    strokeWidth: 'border-width',
+    strokeFill: 'border-color',
+    fill: 'background',
+    blur: 'filter',
+    backdropBlur: 'backdrop-filter',
+    letterSpacing: 'letter-spacing',
+    wordSpacing: 'word-spacing',
+    color: 'color'
 };
 const PropertyNameCSSMap = {
     'transform': ['angle', 'scale'],
     'border-radius': ['radius'],
     'border-width': ['strokeWidth'],
-    'border-color': ['strokeColor'],
-    'background-color': ['fillColor'],
+    'border-color': ['strokeFill'],
+    'background': ['fill'],
     'filter': ['blur'],
     'backdrop-filter': ['backdrop-blur'],
     'letter-spacing': ['letterSpacing'],