@cntrl-site/sdk-nextjs 1.8.40 → 1.9.1

package/lib/components/items/Item.js

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

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

@@ -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: `
-        .rectangle-${item.id} {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          border-style: solid;
-          box-sizing: border-box;
-        }
+                        : {})), { 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%;
+          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;
-              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'};
-            }
+                        return (`
+            .rectangle-${item.id} {
+              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/components/items/RichTextItem/RichTextItem.js

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

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'],

package/lib/utils/Animator/Animator.js

@@ -69,35 +69,27 @@ class Animator {
             top: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.top, end.value.top, true)
         };
     }
-    getColor(values, pos) {
-        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Color];
+    getBorderFill(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderFill];
         if (!keyframes || !keyframes.length)
             return values;
         if (keyframes.length === 1) {
             const [keyframe] = keyframes;
-            return {
-                color: keyframe.value.color
-            };
+            return keyframe.value;
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
-        return {
-            color: this.getRangeColor(start, end, pos)
-        };
+        return this.getRangeGradient(start, end, pos);
     }
-    getBorderColor(values, pos) {
-        const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderColor];
+    getFill(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Fill];
         if (!keyframes || !keyframes.length)
             return values;
         if (keyframes.length === 1) {
             const [keyframe] = keyframes;
-            return {
-                color: keyframe.value.color
-            };
+            return keyframe.value;
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
-        return {
-            color: this.getRangeColor(start, end, pos)
-        };
+        return this.getRangeGradient(start, end, pos);
     }
     getRadius(values, pos) {
         const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderRadius];
@@ -268,6 +260,166 @@ class Animator {
         const mixedColor = startColor.mix(endColor, rangeAmount);
         return mixedColor.fmt('oklch');
     }
+    getRangeGradient(start, end, position) {
+        const rangeAmount = (0, rangeMap_1.rangeMap)(position, start.position, end.position, 0, 1, true);
+        const allLayerIds = new Set([
+            ...start.value.map(layer => layer.id),
+            ...end.value.map(layer => layer.id)
+        ]);
+        const result = [];
+        for (const layerId of allLayerIds) {
+            const startLayers = start.value.find(layer => layer.id === layerId);
+            const endLayers = end.value.find(layer => layer.id === layerId);
+            const startLayersArray = Array.isArray(startLayers) ? startLayers : startLayers ? [startLayers] : [];
+            const endLayersArray = Array.isArray(endLayers) ? endLayers : endLayers ? [endLayers] : [];
+            if (startLayersArray.length > 0 && endLayersArray.length === 0) {
+                result.push(...startLayersArray);
+                continue;
+            }
+            if (startLayersArray.length === 0 && endLayersArray.length > 0) {
+                result.push(...endLayersArray);
+                continue;
+            }
+            if (startLayersArray.length > 0 && endLayersArray.length > 0) {
+                result.push(...this.interpolateFillLayerArray(startLayersArray, endLayersArray, rangeAmount));
+            }
+        }
+        return result;
+    }
+    interpolateFillLayerArray(startLayers, endLayers, rangeAmount) {
+        const startLayerMap = new Map(startLayers.map(layer => [layer.id, layer]));
+        const endLayerMap = new Map(endLayers.map(layer => [layer.id, layer]));
+        const allLayerIds = new Set([
+            ...startLayers.map(layer => layer.id),
+            ...endLayers.map(layer => layer.id)
+        ]);
+        const interpolatedLayers = [];
+        for (const layerId of allLayerIds) {
+            const startLayer = startLayerMap.get(layerId);
+            const endLayer = endLayerMap.get(layerId);
+            if (startLayer && !endLayer) {
+                interpolatedLayers.push(startLayer);
+                continue;
+            }
+            if (!startLayer && endLayer) {
+                interpolatedLayers.push(endLayer);
+                continue;
+            }
+            if (startLayer && endLayer) {
+                interpolatedLayers.push(this.interpolateFillLayer(startLayer, endLayer, rangeAmount));
+            }
+        }
+        const result = [];
+        for (const startLayer of startLayers) {
+            const interpolatedLayer = interpolatedLayers.find(layer => layer.id === startLayer.id);
+            if (interpolatedLayer) {
+                result.push(interpolatedLayer);
+            }
+        }
+        for (const endLayer of endLayers) {
+            if (!startLayerMap.has(endLayer.id)) {
+                const interpolatedLayer = interpolatedLayers.find(layer => layer.id === endLayer.id);
+                if (interpolatedLayer) {
+                    result.push(interpolatedLayer);
+                }
+            }
+        }
+        return result;
+    }
+    interpolateFillLayer(startLayer, endLayer, rangeAmount) {
+        if (startLayer.type !== endLayer.type) {
+            return startLayer;
+        }
+        switch (startLayer.type) {
+            case 'solid': {
+                const endSolidLayer = endLayer;
+                const startColor = color_1.CntrlColor.parse(startLayer.value);
+                const endColor = color_1.CntrlColor.parse(endSolidLayer.value);
+                const mixedColor = startColor.mix(endColor, rangeAmount);
+                return Object.assign(Object.assign({}, startLayer), { value: mixedColor.fmt('oklch') });
+            }
+            case 'linear-gradient': {
+                const endLinearLayer = endLayer;
+                const interpolatedColors = this.interpolateColorStops(startLayer.colors, endLinearLayer.colors, rangeAmount);
+                const angle = startLayer.angle + (endLinearLayer.angle - startLayer.angle) * rangeAmount;
+                const startPoint = [
+                    startLayer.start[0] + (endLinearLayer.start[0] - startLayer.start[0]) * rangeAmount,
+                    startLayer.start[1] + (endLinearLayer.start[1] - startLayer.start[1]) * rangeAmount
+                ];
+                const endPoint = [
+                    startLayer.end[0] + (endLinearLayer.end[0] - startLayer.end[0]) * rangeAmount,
+                    startLayer.end[1] + (endLinearLayer.end[1] - startLayer.end[1]) * rangeAmount
+                ];
+                return Object.assign(Object.assign({}, startLayer), { colors: interpolatedColors, angle, start: startPoint, end: endPoint });
+            }
+            case 'radial-gradient': {
+                const endRadialLayer = endLayer;
+                const interpolatedColors = this.interpolateColorStops(startLayer.colors, endRadialLayer.colors, rangeAmount);
+                const angle = startLayer.angle + (endRadialLayer.angle - startLayer.angle) * rangeAmount;
+                const center = [
+                    startLayer.center[0] + (endRadialLayer.center[0] - startLayer.center[0]) * rangeAmount,
+                    startLayer.center[1] + (endRadialLayer.center[1] - startLayer.center[1]) * rangeAmount
+                ];
+                const diameter = startLayer.diameter + (endRadialLayer.diameter - startLayer.diameter) * rangeAmount;
+                return Object.assign(Object.assign({}, startLayer), { colors: interpolatedColors, angle,
+                    center,
+                    diameter });
+            }
+            case 'conic-gradient': {
+                const endConicLayer = endLayer;
+                const interpolatedColors = this.interpolateColorStops(startLayer.colors, endConicLayer.colors, rangeAmount);
+                const angle = startLayer.angle + (endConicLayer.angle - startLayer.angle) * rangeAmount;
+                const center = [
+                    startLayer.center[0] + (endConicLayer.center[0] - startLayer.center[0]) * rangeAmount,
+                    startLayer.center[1] + (endConicLayer.center[1] - startLayer.center[1]) * rangeAmount
+                ];
+                return Object.assign(Object.assign({}, startLayer), { colors: interpolatedColors, angle,
+                    center });
+            }
+            case 'image': {
+                const endImageLayer = endLayer;
+                const opacity = startLayer.opacity + (endImageLayer.opacity - startLayer.opacity) * rangeAmount;
+                const backgroundSize = startLayer.backgroundSize + (endImageLayer.backgroundSize - startLayer.backgroundSize) * rangeAmount;
+                return Object.assign(Object.assign({}, startLayer), { opacity,
+                    backgroundSize });
+            }
+            default:
+                return startLayer;
+        }
+    }
+    interpolateColorStops(startColors, endColors, rangeAmount) {
+        const startColorMap = new Map(startColors.map(stop => [stop.id, stop]));
+        const endColorMap = new Map(endColors.map(stop => [stop.id, stop]));
+        const allStopIds = new Set([
+            ...startColors.map(stop => stop.id),
+            ...endColors.map(stop => stop.id)
+        ]);
+        const interpolatedStops = [];
+        for (const stopId of allStopIds) {
+            const startStop = startColorMap.get(stopId);
+            const endStop = endColorMap.get(stopId);
+            if (startStop && !endStop) {
+                interpolatedStops.push(startStop);
+                continue;
+            }
+            if (!startStop && endStop) {
+                interpolatedStops.push(endStop);
+                continue;
+            }
+            if (startStop && endStop) {
+                const startColor = color_1.CntrlColor.parse(startStop.value);
+                const endColor = color_1.CntrlColor.parse(endStop.value);
+                const mixedColor = startColor.mix(endColor, rangeAmount);
+                const position = startStop.position + (endStop.position - startStop.position) * rangeAmount;
+                interpolatedStops.push({
+                    id: stopId,
+                    value: mixedColor.fmt('oklch'),
+                    position
+                });
+            }
+        }
+        return interpolatedStops.sort((a, b) => a.position - b.position);
+    }
 }
 exports.Animator = Animator;
 function createKeyframesMap() {
@@ -276,9 +428,8 @@ function createKeyframesMap() {
         [sdk_1.KeyframeType.Position]: [],
         [sdk_1.KeyframeType.BorderWidth]: [],
         [sdk_1.KeyframeType.BorderRadius]: [],
-        [sdk_1.KeyframeType.Color]: [],
         [sdk_1.KeyframeType.Rotation]: [],
-        [sdk_1.KeyframeType.BorderColor]: [],
+        [sdk_1.KeyframeType.BorderFill]: [],
         [sdk_1.KeyframeType.Opacity]: [],
         [sdk_1.KeyframeType.Scale]: [],
         [sdk_1.KeyframeType.Blur]: [],
@@ -286,6 +437,7 @@ function createKeyframesMap() {
         [sdk_1.KeyframeType.LetterSpacing]: [],
         [sdk_1.KeyframeType.WordSpacing]: [],
         [sdk_1.KeyframeType.TextColor]: [],
-        [sdk_1.KeyframeType.FXParams]: []
+        [sdk_1.KeyframeType.FXParams]: [],
+        [sdk_1.KeyframeType.Fill]: []
     };
 }