@cntrl-site/sdk-nextjs 1.8.40 → 1.9.0

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]: []
     };
 }

package/lib/utils/areFillsVisible/areFillsVisible.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.areFillsVisible = void 0;
+const color_1 = require("@cntrl-site/color");
+function areFillsVisible(fills) {
+    return fills.some(fill => {
+        switch (fill.type) {
+            case 'solid':
+                return color_1.CntrlColor.parse(fill.value).getAlpha() !== 0;
+            case 'linear-gradient':
+                return fill.colors.some(color => color_1.CntrlColor.parse(color.value).getAlpha() !== 0);
+            case 'radial-gradient':
+                return fill.colors.some(color => color_1.CntrlColor.parse(color.value).getAlpha() !== 0);
+            case 'conic-gradient':
+                return fill.colors.some(color => color_1.CntrlColor.parse(color.value).getAlpha() !== 0);
+            case 'image':
+                return fill.opacity !== 0;
+            default:
+                return true;
+        }
+    });
+}
+exports.areFillsVisible = areFillsVisible;

package/lib/utils/getFill.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFill = void 0;
+function getFill(fill) {
+    var _a;
+    if (fill.type === 'linear-gradient' && Array.isArray(fill.colors)) {
+        return `linear-gradient(${fill.angle}deg, ${fill.colors
+            .map(c => `${c.value} ${c.position}%`)
+            .join(', ')})`;
+    }
+    if (fill.type === 'radial-gradient' && Array.isArray(fill.colors)) {
+        const center = fill.center
+            ? `${fill.center[0] * 100}% ${fill.center[1] * 100}%`
+            : '50% 50%';
+        const diameter = fill.diameter;
+        return `radial-gradient(circle ${diameter * 100} at ${center}, ${fill.colors
+            .map(c => `${c.value} ${c.position}%`)
+            .join(', ')})`;
+    }
+    if (fill.type === 'conic-gradient' && Array.isArray(fill.colors)) {
+        const center = fill.center
+            ? `${fill.center[0] * 100}% ${fill.center[1] * 100}%`
+            : '50% 50%';
+        const angle = ((_a = fill.angle) !== null && _a !== void 0 ? _a : 0);
+        const hasMultipleStops = fill.colors.length > 1;
+        const lastStop = fill.colors[fill.colors.length - 1];
+        const shouldAppendWrapStop = hasMultipleStops && typeof lastStop.position === 'number' && lastStop.position < 100;
+        const colorsWithWrap = shouldAppendWrapStop
+            ? [...fill.colors, { value: fill.colors[0].value, position: 100 }]
+            : fill.colors;
+        return `conic-gradient(from ${angle + 90}deg at ${center}, ${colorsWithWrap
+            .map(c => `${c.value} ${c.position}%`)
+            .join(', ')})`;
+    }
+    if (fill.type === 'image' && fill.src) {
+        return `url(${fill.src})`;
+    }
+    if (fill.type === 'solid') {
+        return fill.value;
+    }
+    return 'transparent';
+}
+exports.getFill = getFill;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.8.40",
+  "version": "1.9.0",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.4.0",
-    "@cntrl-site/sdk": "^1.23.2",
+    "@cntrl-site/sdk": "^1.24.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx

@@ -33,7 +33,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
   useRegisterResize(ref, onResize);
   const pos = stylesMap[anchor];
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const stateParams = interactionCtrl?.getState(['angle', 'blur', 'opacity']);
+  const stateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
   const blur = (stateParams?.styles?.blur ?? itemBlur) as number;
   const opacity = stateParams?.styles?.opacity ?? itemOpacity;
   const angle = stateParams?.styles?.angle ?? itemAngle;

package/src/components/items/ComponentItem/ComponentItem.tsx

@@ -19,7 +19,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { opacity: itemOpacity, blur: itemBlur } = useComponentItem(item, sectionId);
   useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState(['opacity', 'angle', 'blur']);
+  const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle', 'blur']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
   const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);

package/src/components/items/CompoundItem/CompoundChild.tsx

@@ -47,8 +47,8 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
   const itemScale = useItemScale(item, sectionId);
   const interactionCtrl = useItemInteractionCtrl(item.id);
   const triggers = useItemTriggers(interactionCtrl);
-  const wrapperStateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height']);
-  const innerStateProps = interactionCtrl?.getState(['scale']);
+  const wrapperStateProps = interactionCtrl?.getState<number>(['top', 'left', 'width', 'height']);
+  const innerStateProps = interactionCtrl?.getState<number>(['scale']);
   const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
   const { width, height, top, left } = useItemArea(item, sectionId, {
     top: wrapperStateProps?.styles?.top as number,

package/src/components/items/CompoundItem/CompoundItem.tsx

@@ -19,7 +19,7 @@ export const CompoundItem: FC<ItemProps<TCompoundItem>> = ({ item, sectionId, on
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
+  const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
   const isInteractive = opacity !== 0 && opacity !== undefined;

package/src/components/items/CustomItem/CustomItem.tsx

@@ -14,7 +14,7 @@ export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, section
   const layoutValues: Record<string, any>[] = [item.area];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState(['angle']);
+  const stateParams = interactionCtrl?.getState<number>(['angle']);
   const angle = stateParams?.styles?.angle ?? itemAngle;
   if (!component) return null;
   return (

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

@@ -31,8 +31,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
   const [isCoverVisible, setIsCoverVisible] = useState(false);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const wrapperStateParams = interactionCtrl?.getState(['angle', 'blur', 'opacity']);
-  const frameStateParams = interactionCtrl?.getState(['radius']);
+  const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
+  const frameStateParams = interactionCtrl?.getState<number>(['radius']);
   const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);
   const blur = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.blur, itemBlur);
   const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);

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

@@ -27,8 +27,8 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const [isCoverVisible, setIsCoverVisible] = useState(false);
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const wrapperStateParams = interactionCtrl?.getState(['angle', 'blur', 'opacity']);
-  const frameStateParams = interactionCtrl?.getState(['radius']);
+  const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
+  const frameStateParams = interactionCtrl?.getState<number>(['radius']);
   const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);
   const blur = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.blur, itemBlur);
   const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);

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

@@ -13,6 +13,8 @@ import { useElementRect } from '../../../utils/useElementRect';
 import { useLayoutContext } from '../../useLayoutContext';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { useItemFXData } from '../../../common/useItemFXData';
+import { getFill } from '../../../utils/getFill';
+import { FillLayer } from '@cntrl-site/sdk/dist/types/article/Item';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -22,7 +24,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     radius: itemRadius,
     strokeWidth: itemStrokeWidth,
     opacity: itemOpacity,
-    strokeColor: itemStrokeColor,
+    strokeFill: itemStrokeFill,
     blur: itemBlur
   } = useFileItem(item, sectionId);
   const itemAngle = useItemAngle(item, sectionId);
@@ -38,8 +40,11 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const exemplary = layouts?.find(l => l.id === layoutId)?.exemplary;
   const width = area && exemplary ? area.width * exemplary : 0;
   const height = area && exemplary ? area.height * exemplary : 0;
-  const wrapperStateParams = interactionCtrl?.getState(['angle', 'opacity', 'blur']);
-  const imgStateParams = interactionCtrl?.getState(['strokeWidth', 'radius', 'strokeColor']);
+  const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'opacity', 'blur']);
+  const imgStateParams = interactionCtrl?.getState<number>(['strokeWidth', 'radius']);
+  const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
+  const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
+  const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
 
   useEffect(() => {
     isInitialRef.current = false;
@@ -58,17 +63,19 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const rect = useElementRect(wrapperRef);
   const rectWidth = Math.floor(rect?.width ?? 0);
   const rectHeight = Math.floor(rect?.height ?? 0);
-  const borderColor = useMemo(() => {
-    const borderColor = getStyleFromItemStateAndParams(imgStateParams?.styles?.strokeColor, itemStrokeColor);
-    return borderColor ? CntrlColor.parse(borderColor) : undefined;
-  }, [itemStrokeColor, imgStateParams?.styles?.strokeColor]);
   const radius = getStyleFromItemStateAndParams(imgStateParams?.styles?.radius, itemRadius);
   const strokeWidth = getStyleFromItemStateAndParams(imgStateParams?.styles?.strokeWidth, itemStrokeWidth);
   const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);
   const blur = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.blur, itemBlur);
+
+  const strokeValue = stateStrokeFillLayers
+    ? getStyleFromItemStateAndParams<FillLayer>(stateStrokeFillLayers[0], itemStrokeFill?.[0])
+    : itemStrokeFill?.[0];
+  const stroke = strokeValue
+    ? getFill(strokeValue) ?? 'transparent'
+    : 'transparent';
   const inlineStyles = {
-    ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
     ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
     ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
     transition: imgStateParams?.transition ?? 'none'
@@ -87,6 +94,14 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
             ...(opacity !== undefined ? { opacity } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
             ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+            ...(strokeValue ? {
+              '--stroke-background': stroke,
+              ...(strokeValue.type === 'image' ? {
+                '--stroke-background-position': 'center',
+                '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+              } : {})
+            } : {}),
             willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
             transition: wrapperStateParams?.transition ?? 'none'
           }}
@@ -109,6 +124,31 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
                   src={item.commonParams.url}
                 />
               )}
+          <div
+            className={`image-border-${item.id}`}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: 'inherit',
+              pointerEvents: 'none',
+              zIndex: 2,
+              WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+              WebkitMaskComposite: 'xor',
+              maskComposite: 'exclude',
+              ...(strokeWidth !== 0 && strokeValue ? {
+                ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
+                ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
+                ...(strokeValue.type === 'image' ? {
+                  backgroundPosition: 'center',
+                  backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                  backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                } : {
+                  background: stroke,
+                }
+                )
+              } : { background: stroke }),
+            }}
+          />
         </div>
         <JSXStyle id={id}>{`
         .image-wrapper-${item.id} {
@@ -145,9 +185,22 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
               ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
             }
             .image-${item.id} {
-              border-color: ${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/src/components/items/FileItem/VideoItem.tsx

@@ -14,6 +14,8 @@ import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemS
 import { useVideoFx } from '../../../utils/effects/useVideoFx';
 import { useElementRect } from '../../../utils/useElementRect';
 import { useItemFXData } from '../../../common/useItemFXData';
+import { getFill } from '../../../utils/getFill';
+import { FillLayer } from '@cntrl-site/sdk/dist/types/article/Item';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -22,7 +24,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const {
     radius: itemRadius,
     strokeWidth: itemStrokeWidth,
-    strokeColor: itemStrokeColor,
+    strokeFill: itemStrokeFill,
     opacity: itemOpacity,
     blur: itemBlur
   } = useFileItem(item, sectionId);
@@ -48,17 +50,23 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const scrollPlayback = layoutParams ? layoutParams.scrollPlayback : null;
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const hasScrollPlayback = scrollPlayback !== null;
-  const wrapperStateParams = interactionCtrl?.getState(['angle', 'opacity', 'blur']);
-  const videoStateParams = interactionCtrl?.getState(['strokeWidth', 'radius', 'strokeColor']);
-  const borderColor = useMemo(() => {
-    const strokeColor = getStyleFromItemStateAndParams(videoStateParams?.styles?.color, itemStrokeColor);
-    return strokeColor ? CntrlColor.parse(strokeColor) : undefined;
-  }, [videoStateParams?.styles?.color, itemStrokeColor]);
+  const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'opacity', 'blur']);
+  const videoStateParams = interactionCtrl?.getState<number>(['strokeWidth', 'radius']);
+  const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
+  const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
+  const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
   const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);
   const blur = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.blur, itemBlur);
   const strokeWidth = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.strokeWidth, itemStrokeWidth);
   const radius = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.radius, itemRadius);
+
+  const strokeValue = stateStrokeFillLayers
+    ? getStyleFromItemStateAndParams<FillLayer>(stateStrokeFillLayers[0], itemStrokeFill?.[0])
+    : itemStrokeFill?.[0];
+  const stroke = strokeValue
+    ? getFill(strokeValue) ?? 'transparent'
+    : 'transparent';
   useEffect(() => {
     isInitialRef.current = false;
   }, []);
@@ -77,7 +85,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const inlineStyles = {
     ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
     ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
-    ...(borderColor ? { borderColor: `${borderColor.toCss()}` } : {}),
     transition: videoStateParams?.transition ?? 'none'
   };
   const isInteractive = opacity !== 0;
@@ -112,6 +119,14 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           ...(opacity !== undefined ? { opacity } : {}),
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
           ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+          ...(strokeValue ? {
+            '--stroke-background': stroke,
+            ...(strokeValue.type === 'image' ? {
+              '--stroke-background-position': 'center',
+              '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+              '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+            } : {})
+          } : {}),
           willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
           transition: wrapperStateParams?.transition ?? 'none'
         }}
@@ -203,6 +218,31 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             ))}
           </>
         )}
+        <div
+          className={`video-border-${item.id}`}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            borderRadius: 'inherit',
+            pointerEvents: 'none',
+            zIndex: 2,
+            WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+            WebkitMaskComposite: 'xor',
+            maskComposite: 'exclude',
+            ...(strokeWidth !== 0 && strokeValue ? {
+              ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
+              ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
+              ...(strokeValue.type === 'image' ? {
+                backgroundPosition: 'center',
+                backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+              } : {
+                background: stroke,
+              }
+              )
+            } : { background: stroke }),
+          }}
+        />
       </div>
       <JSXStyle id={id}>{`
         .video-wrapper-${item.id} {
@@ -240,7 +280,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           border-style: solid;
         }
         .video-${item.id} {
-          border-color: ${itemStrokeColor};
+          border-radius: ${radius !== undefined ? `${radius * 100}vw` : '0'};
         }
         .video-playback-wrapper {
           display: flex;
@@ -263,9 +303,22 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
               ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
             }
             .video-${item.id} {
-              border-color: ${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;
             }
           `);
     })}