@cntrl-site/sdk-nextjs 1.8.40-alpha.0 → 1.8.40

package/lib/utils/Animator/Animator.js

@@ -69,27 +69,35 @@ class Animator {
             top: (0, rangeMap_1.rangeMap)(pos, start.position, end.position, start.value.top, end.value.top, true)
         };
     }
-    getBorderFill(values, pos) {
-        const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderFill];
+    getColor(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Color];
         if (!keyframes || !keyframes.length)
             return values;
         if (keyframes.length === 1) {
             const [keyframe] = keyframes;
-            return keyframe.value;
+            return {
+                color: keyframe.value.color
+            };
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
-        return this.getRangeGradient(start, end, pos);
+        return {
+            color: this.getRangeColor(start, end, pos)
+        };
     }
-    getFill(values, pos) {
-        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Fill];
+    getBorderColor(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderColor];
         if (!keyframes || !keyframes.length)
             return values;
         if (keyframes.length === 1) {
             const [keyframe] = keyframes;
-            return keyframe.value;
+            return {
+                color: keyframe.value.color
+            };
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
-        return this.getRangeGradient(start, end, pos);
+        return {
+            color: this.getRangeColor(start, end, pos)
+        };
     }
     getRadius(values, pos) {
         const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderRadius];
@@ -260,166 +268,6 @@ 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() {
@@ -428,8 +276,9 @@ 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.BorderFill]: [],
+        [sdk_1.KeyframeType.BorderColor]: [],
         [sdk_1.KeyframeType.Opacity]: [],
         [sdk_1.KeyframeType.Scale]: [],
         [sdk_1.KeyframeType.Blur]: [],
@@ -437,7 +286,6 @@ function createKeyframesMap() {
         [sdk_1.KeyframeType.LetterSpacing]: [],
         [sdk_1.KeyframeType.WordSpacing]: [],
         [sdk_1.KeyframeType.TextColor]: [],
-        [sdk_1.KeyframeType.FXParams]: [],
-        [sdk_1.KeyframeType.Fill]: []
+        [sdk_1.KeyframeType.FXParams]: []
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.8.40-alpha.0",
+  "version": "1.8.40",
   "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.1-alpha.1",
+    "@cntrl-site/sdk": "^1.23.2",
     "@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<number>(['angle', 'blur', 'opacity']);
+  const stateParams = interactionCtrl?.getState(['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<number>(['opacity', 'angle', 'blur']);
+  const stateParams = interactionCtrl?.getState(['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<number>(['top', 'left', 'width', 'height']);
-  const innerStateProps = interactionCtrl?.getState<number>(['scale']);
+  const wrapperStateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height']);
+  const innerStateProps = interactionCtrl?.getState(['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<number>(['opacity', 'angle']);
+  const stateParams = interactionCtrl?.getState(['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<number>(['angle']);
+  const stateParams = interactionCtrl?.getState(['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<number>(['angle', 'blur', 'opacity']);
-  const frameStateParams = interactionCtrl?.getState<number>(['radius']);
+  const wrapperStateParams = interactionCtrl?.getState(['angle', 'blur', 'opacity']);
+  const frameStateParams = interactionCtrl?.getState(['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<number>(['angle', 'blur', 'opacity']);
-  const frameStateParams = interactionCtrl?.getState<number>(['radius']);
+  const wrapperStateParams = interactionCtrl?.getState(['angle', 'blur', 'opacity']);
+  const frameStateParams = interactionCtrl?.getState(['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,8 +13,6 @@ 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();
@@ -24,7 +22,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     radius: itemRadius,
     strokeWidth: itemStrokeWidth,
     opacity: itemOpacity,
-    strokeFill: itemStrokeFill,
+    strokeColor: itemStrokeColor,
     blur: itemBlur
   } = useFileItem(item, sectionId);
   const itemAngle = useItemAngle(item, sectionId);
@@ -40,11 +38,8 @@ 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<number>(['angle', 'opacity', 'blur']);
-  const imgStateParams = interactionCtrl?.getState<number>(['strokeWidth', 'radius']);
-  const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
-  const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
-  const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
+  const wrapperStateParams = interactionCtrl?.getState(['angle', 'opacity', 'blur']);
+  const imgStateParams = interactionCtrl?.getState(['strokeWidth', 'radius', 'strokeColor']);
 
   useEffect(() => {
     isInitialRef.current = false;
@@ -63,20 +58,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'
   };
   const isInteractive = opacity !== 0;
@@ -93,14 +87,6 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
             ...(opacity !== undefined ? { opacity } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
             ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
-            ...(strokeValue ? {
-              '--stroke-background': stroke,
-              ...(strokeValue.type === 'image' ? {
-                '--stroke-background-position': 'center',
-                '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-              } : {})
-            } : {}),
             willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
             transition: wrapperStateParams?.transition ?? 'none'
           }}
@@ -123,31 +109,6 @@ 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} {
@@ -184,19 +145,9 @@ 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;
-            }
-            .image-border-${item.id} {
-              position: absolute;
-              inset: 0;
-              border-radius: inherit;
-              pointer-events: none;
-              z-index: 2;
-              -webkit-mask:
-                linear-gradient(#fff 0 0) content-box,
-                linear-gradient(#fff 0 0);
-              -webkit-mask-composite: xor;
-              mask-composite: exclude;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
             }
           `);
     })}

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

@@ -14,8 +14,6 @@ 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();
@@ -24,7 +22,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const {
     radius: itemRadius,
     strokeWidth: itemStrokeWidth,
-    strokeFill: itemStrokeFill,
+    strokeColor: itemStrokeColor,
     opacity: itemOpacity,
     blur: itemBlur
   } = useFileItem(item, sectionId);
@@ -50,23 +48,17 @@ 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<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 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 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;
   }, []);
@@ -84,6 +76,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   useRegisterResize(ref, onResize);
   const inlineStyles = {
     ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
+    ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
+    ...(borderColor ? { borderColor: `${borderColor.toCss()}` } : {}),
     transition: videoStateParams?.transition ?? 'none'
   };
   const isInteractive = opacity !== 0;
@@ -118,14 +112,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           ...(opacity !== undefined ? { opacity } : {}),
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
           ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
-          ...(strokeValue ? {
-            '--stroke-background': stroke,
-            ...(strokeValue.type === 'image' ? {
-              '--stroke-background-position': 'center',
-              '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-              '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-            } : {})
-          } : {}),
           willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
           transition: wrapperStateParams?.transition ?? 'none'
         }}
@@ -217,31 +203,6 @@ 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} {
@@ -279,7 +240,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           border-style: solid;
         }
         .video-${item.id} {
-          border-radius: ${radius !== undefined ? `${radius * 100}vw` : '0'};
+          border-color: ${itemStrokeColor};
         }
         .video-playback-wrapper {
           display: flex;
@@ -302,19 +263,9 @@ 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;
-            }
-            .video-border-${item.id} {
-              position: absolute;
-              inset: 0;
-              border-radius: inherit;
-              pointer-events: none;
-              z-index: 2;
-              -webkit-mask:
-                linear-gradient(#fff 0 0) content-box,
-                linear-gradient(#fff 0 0);
-              -webkit-mask-composite: xor;
-              mask-composite: exclude;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
             }
           `);
     })}

package/src/components/items/FileItem/useFileItem.ts

@@ -2,15 +2,7 @@ import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../../common/useKeyframeValue';
 import { useLayoutContext } from '../../useLayoutContext';
 
-const DEFAULT_FILL = [
-  {
-    id: 'default',
-    type: 'solid' as const,
-    value: 'rgba(0, 0, 0, 1)',
-    blendMode: 'normal'
-  }
-];
-
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
 export function useFileItem(item: ImageItem | VideoItem, sectionId: string) {
   const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
@@ -51,15 +43,15 @@ export function useFileItem(item: ImageItem | VideoItem, sectionId: string) {
     [layoutId]
   );
 
-  const strokeFill = useKeyframeValue(
+  const strokeColor = useKeyframeValue(
     item,
-    KeyframeType.BorderFill,
+    KeyframeType.BorderColor,
     (item, layoutId) => {
       if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
-      return 'strokeFill' in layoutParams ? layoutParams.strokeFill : DEFAULT_FILL;
+      return 'strokeColor' in layoutParams ? layoutParams.strokeColor : DEFAULT_COLOR;
     },
-    (animator, scroll, value) => value ? animator.getBorderFill(value, scroll) : undefined,
+    (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined,
     sectionId,
     [layoutId]
   );
@@ -77,5 +69,5 @@ export function useFileItem(item: ImageItem | VideoItem, sectionId: string) {
     [layoutId]
   );
 
-  return { radius, strokeWidth, opacity, strokeFill, blur };
+  return { radius, strokeWidth, opacity, strokeColor, blur };
 }

package/src/components/items/GroupItem/GroupItem.tsx

@@ -19,7 +19,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle', 'blur']);
+  const stateParams = interactionCtrl?.getState(['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/Item.tsx

@@ -82,8 +82,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const triggers = useItemTriggers(interactionCtrl);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [isDraggingActive, setIsDraggingActive] = useState(false);
-  const wrapperStateProps = interactionCtrl?.getState<number>(['top', 'left']);
-  const innerStateProps = interactionCtrl?.getState<number>(['width', 'height', 'scale']);
+  const wrapperStateProps = interactionCtrl?.getState(['top', 'left']);
+  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale']);
   const { width, height, top, left } = useItemArea(item, sectionId, {
     top: wrapperStateProps?.styles?.top as number,
     left: wrapperStateProps?.styles?.left as number,