@cntrl-site/sdk-nextjs 0.29.6 → 0.30.0

package/src/components/items/VideoItem.tsx

@@ -17,50 +17,40 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const { layouts } = useCntrlContext();
   const { radius, strokeWidth, strokeColor, opacity, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
-  const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
+  const borderColor = useMemo(() => strokeColor ? CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const layoutId = useLayoutContext();
-  const scrollPlayback = item.layoutParams[layoutId!].scrollPlayback;
+  const scrollPlayback = layoutId ? item.layoutParams[layoutId].scrollPlayback : null;
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const hasScrollPlayback = scrollPlayback !== null;
-
   useRegisterResize(ref, onResize);
+  const inlineStyles = {
+    ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
+    ...(strokeWidth !== undefined  ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
+    ...(borderColor ? { borderColor: `${borderColor.toCss()}` } : {})
+  };
 
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
-      {hasScrollPlayback ? (
-        <div
-          className={`video-wrapper-${item.id}`}
-          ref={setRef}
-          style={{
-            opacity: `${opacity}`,
-            transform: `rotate(${angle}deg)`,
-            filter: `blur(${blur * 100}vw)`,
-            overflow: 'hidden'
-          }}
-        >
+      <div
+        className={`video-wrapper-${item.id}`}
+        ref={setRef}
+        style={{
+          opacity,
+          transform: `rotate(${angle}deg)`,
+          filter: `blur(${blur * 100}vw)`,
+        }}
+      >
+        {hasScrollPlayback ? (
           <ScrollPlaybackVideo
             sectionId={sectionId}
             src={item.commonParams.url}
             playbackParams={scrollPlayback}
-            style={{
-              borderRadius: `${radius * 100}vw`,
-              borderWidth: `${strokeWidth * 100}vw`,
-              borderColor: `${borderColor.toCss()}`
-            }}
+            style={inlineStyles}
             className={`video video-playback-wrapper video-${item.id}`}
           />
-        </div>
-      ) : (
-        <div
-          className={`video-wrapper-${item.id}`}
-          ref={setRef}
-          style={{
-            opacity: `${opacity}`,
-            transform: `rotate(${angle}deg)`,
-            filter: `blur(${blur * 100}vw)`
-          }}
-        >
+          ) : (
           <video
             ref={videoRef}
             autoPlay
@@ -68,24 +58,16 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             loop
             playsInline
             className={`video video-${item.id}`}
-            style={{
-              borderRadius: `${radius * 100}vw`,
-              borderWidth: `${strokeWidth * 100}vw`,
-              borderColor: `${borderColor.toCss()}`
-            }}
+            style={inlineStyles}
           >
             <source src={item.commonParams.url} />
           </video>
-        </div>
-      )}
+        )}
+      </div>
       <JSXStyle id={id}>{`
-        @supports not (color: oklch(42% 0.3 90 / 1)) {
-          .video-${item.id} {
-            border-color: ${borderColor.fmt('rgba')};
-          }
-        }
         .video-wrapper-${item.id} {
           position: absolute;
+          overflow: hidden;
           width: 100%;
           height: 100%;
           box-sizing: border-box;
@@ -107,19 +89,25 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           display: flex;
           justify-content: center;
         }
-        ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           return (`
             .video-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               transition: ${getTransitions<ArticleItemType.Video>(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .video-wrapper-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.Video>(['angle', 'opacity', 'blur'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.Video>(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .video-${item.id} {
+              border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
               transition: ${getTransitions<ArticleItemType.Video>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
             .video-wrapper-${item.id}:hover .video {
-              ${getHoverStyles<ArticleItemType.Video>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.Video>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
           `);
         })}

package/src/components/items/VimeoEmbed.tsx

@@ -19,6 +19,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const angle = useItemAngle(item, sectionId);
   const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   useRegisterResize(ref, onResize);
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
@@ -79,19 +80,23 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         border: none;
         overflow: hidden;
       }
-      ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
         return (`
           .embed-video-wrapper-${item.id} {
+            opacity: ${layoutParams.opacity};
+            transform: rotate(${area.angle}deg);
+            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
             transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
           }
           .embed-video-wrapper-${item.id}:hover {
             ${getHoverStyles<ArticleItemType.VimeoEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
           }
           .embed-video-wrapper-${item.id} .embedVideo {
+            border-radius: ${layoutParams.radius * 100}vw;
             transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['radius'], hoverParams)};
           }
           .embed-video-wrapper-${item.id}:hover .embedVideo {
-            ${getHoverStyles<ArticleItemType.VimeoEmbed>(['radius'], hoverParams)}
+            ${getHoverStyles<ArticleItemType.VimeoEmbed>(['radius'], hoverParams)};
           }
         `);
       })}

package/src/components/items/YoutubeEmbed.tsx

@@ -21,6 +21,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
   const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   useRegisterResize(div, onResize);
 
   useEffect(() => {
@@ -72,7 +73,9 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
         <div
           className={`embed-${item.id}`}
           ref={setDiv}
-          style={{ borderRadius: `${radius * 100}vw` }}
+          style={{
+            ...(radius !== undefined  ? { borderRadius: `${radius * 100}vw` } : {})
+          }}
         />
       </div>
       <JSXStyle id={id}>{`
@@ -91,19 +94,23 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
           z-index: 1;
           border: none;
         }
-        ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           return (`
             .embed-youtube-video-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
+              border-radius: ${layoutParams.radius * 100}vw;
               transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
-              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)};
             }
           `);
       })}

package/src/components/items/useCodeEmbedItem.ts

@@ -0,0 +1,36 @@
+import { CodeEmbedItem, AreaAnchor, KeyframeType } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../useLayoutContext';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+
+export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
+  const layoutId = useLayoutContext();
+
+  const blur = useKeyframeValue(
+    item,
+    KeyframeType.Blur,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur,
+    sectionId,
+    [layoutId]
+  );
+
+  const opacity = useKeyframeValue(
+    item,
+    KeyframeType.Opacity,
+    (item, layoutId) => {
+      if (!layoutId) return 1;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    },
+    (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    sectionId,
+    [layoutId]
+  );
+
+  const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : AreaAnchor.TopLeft;
+  return { anchor, blur, opacity };
+};

package/src/components/items/useEmbedVideoItem.ts

@@ -1,4 +1,4 @@
-import { VimeoEmbedItem, YoutubeEmbedItem } from '@cntrl-site/sdk';
+import { KeyframeType, VimeoEmbedItem, YoutubeEmbedItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useLayoutContext } from '../useLayoutContext';
 
@@ -6,6 +6,7 @@ export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, secti
   const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
+    KeyframeType.BorderRadius,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
@@ -17,6 +18,7 @@ export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, secti
   );
   const blur = useKeyframeValue(
     item,
+    KeyframeType.Blur,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
@@ -29,6 +31,7 @@ export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, secti
 
   const opacity = useKeyframeValue(
     item,
+    KeyframeType.Opacity,
     (item, layoutId) => {
       if (!layoutId) return 1;
       const layoutParams = item.layoutParams[layoutId];

package/src/components/items/useFileItem.ts

@@ -1,13 +1,13 @@
-import { ImageItem, VideoItem } from '@cntrl-site/sdk';
+import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useLayoutContext } from '../useLayoutContext';
 
-const defaultColor = 'rgba(0, 0, 0, 1)';
-
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
 export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
   const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
+    KeyframeType.BorderRadius,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
@@ -19,6 +19,7 @@ export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
   );
   const strokeWidth = useKeyframeValue(
     item,
+    KeyframeType.BorderWidth,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
@@ -31,10 +32,11 @@ export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
 
   const opacity = useKeyframeValue(
     item,
+    KeyframeType.Opacity,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return 1;
       const layoutParams = item.layoutParams[layoutId];
-      return 'opacity' in layoutParams ? layoutParams.opacity : 0;
+      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     },
     (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
     sectionId,
@@ -43,10 +45,11 @@ export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
 
   const strokeColor = useKeyframeValue(
     item,
+    KeyframeType.BorderColor,
     (item, layoutId) => {
-      if (!layoutId) return defaultColor;
+      if (!layoutId) return DEFAULT_COLOR;
       const layoutParams = item.layoutParams[layoutId];
-      return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
+      return 'strokeColor' in layoutParams ? layoutParams.strokeColor : DEFAULT_COLOR;
     },
     (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color,
     sectionId
@@ -54,6 +57,7 @@ export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
 
   const blur = useKeyframeValue(
     item,
+    KeyframeType.Blur,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];

package/src/components/items/useGroupItem.ts

@@ -1,15 +1,16 @@
 import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { GroupItem } from '@cntrl-site/sdk';
+import { GroupItem, KeyframeType } from '@cntrl-site/sdk';
 import { useLayoutContext } from '../useLayoutContext';
 
 export function useGroupItem(item: GroupItem, sectionId: string) {
   const layoutId = useLayoutContext();
   const opacity = useKeyframeValue(
     item,
+    KeyframeType.Opacity,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return 1;
       const layoutParams = item.layoutParams[layoutId];
-      return 'opacity' in layoutParams ? layoutParams.opacity : 0;
+      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     },
     (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
     sectionId,

package/src/components/items/useRectangleItem.ts

@@ -1,4 +1,4 @@
-import { RectangleItem } from '@cntrl-site/sdk';
+import { KeyframeType, RectangleItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useLayoutContext } from '../useLayoutContext';
 
@@ -8,6 +8,7 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
   const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
+    KeyframeType.BorderRadius,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
@@ -19,6 +20,7 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
   );
   const strokeWidth = useKeyframeValue(
     item,
+    KeyframeType.BorderWidth,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
@@ -30,6 +32,7 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
   );
   const fillColor = useKeyframeValue(
     item,
+    KeyframeType.Color,
     (item, layoutId) => {
       if (!layoutId) return defaultColor;
       const layoutParams = item.layoutParams[layoutId];
@@ -41,6 +44,7 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
   );
   const strokeColor = useKeyframeValue(
     item,
+    KeyframeType.BorderColor,
     (item, layoutId) => {
       if (!layoutId) return defaultColor;
       const layoutParams = item.layoutParams[layoutId];
@@ -52,6 +56,7 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
   );
   const blur = useKeyframeValue(
     item,
+    KeyframeType.Blur,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
@@ -63,6 +68,7 @@ export const useRectangleItem = (item: RectangleItem, sectionId: string) => {
   );
   const backdropBlur = useKeyframeValue(
     item,
+    KeyframeType.BackdropBlur,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];

package/src/components/items/useRichTextItemValues.ts

@@ -1,20 +1,14 @@
 import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { RichTextItem } from '@cntrl-site/sdk';
+import { KeyframeType, RichTextItem } from '@cntrl-site/sdk';
 import { useLayoutContext } from '../useLayoutContext';
 
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
 
 export const useRichTextItemValues = (item: RichTextItem, sectionId: string) => {
   const layoutId = useLayoutContext();
-  const { angle } = useKeyframeValue(
-    item,
-    (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }),
-    (animator, scroll, value) => animator.getRotation(value, scroll),
-    sectionId
-  );
-
   const blur = useKeyframeValue(
     item,
+    KeyframeType.Blur,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
@@ -27,6 +21,7 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
 
   const letterSpacing = useKeyframeValue(
     item,
+    KeyframeType.LetterSpacing,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
@@ -39,6 +34,7 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
 
   const wordSpacing = useKeyframeValue(
     item,
+    KeyframeType.WordSpacing,
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
@@ -51,6 +47,7 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
 
   const color = useKeyframeValue(
     item,
+    KeyframeType.TextColor,
     (item, layoutId) => {
       if (!layoutId) return DEFAULT_COLOR;
       const layoutParams = item.layoutParams[layoutId];
@@ -61,5 +58,5 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
     [layoutId]
   );
 
-  return { angle, blur, letterSpacing, wordSpacing, color };
+  return { blur, letterSpacing, wordSpacing, color };
 };

package/src/components/items/useStickyItemTop.ts

@@ -1,19 +1,21 @@
-import { ItemAny } from '@cntrl-site/sdk';
+import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useLayoutContext } from '../useLayoutContext';
 
 export function useStickyItemTop(item: ItemAny, sectionHeightMap: Record<string, string>, sectionId: string) {
   const layoutId = useLayoutContext();
-  const { top } = useKeyframeValue<{ top: number; left: number }>(
+  const data = useKeyframeValue<{ top: number; left: number } | undefined>(
     item,
+    KeyframeType.Position,
     (item, layoutId) => {
-      if (!layoutId) return { top: 0, left: 0 }
+      if (!layoutId) return;
       return item.area[layoutId];
     },
-    (animator, scroll, value) => animator.getPositions(value, scroll),
+    (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined,
     sectionId,
     [layoutId]
   );
+  const top = data ? data.top : layoutId ? item.area[layoutId].top : 0;
   const sticky = layoutId ? item.sticky[layoutId] : undefined;
-  return sticky ? top - sticky.from : 0
+  return sticky ? top - sticky.from : 0;
 }

package/src/components/useItemAngle.ts

@@ -1,11 +1,12 @@
-import { ItemAny } from '@cntrl-site/sdk';
+import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 
 export const useItemAngle = (item: ItemAny, sectionId: string) => {
-  const { angle } = useKeyframeValue(
+  const angle = useKeyframeValue(
     item,
-    (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }),
-    (animator, scroll, value) => animator.getRotation(value, scroll),
+    KeyframeType.Rotation,
+    (item, layoutId) => layoutId ? item.area[layoutId].angle : 0,
+    (animator, scroll, value) => animator.getRotation({ angle: value }, scroll).angle,
     sectionId
   );
   return angle;

package/src/components/useItemDimensions.ts

@@ -1,24 +1,16 @@
-import { ItemAny } from '@cntrl-site/sdk';
+import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useLayoutContext } from './useLayoutContext';
 
-const defaultArea = {
-  left: 0,
-  top: 0,
-  width: 0,
-  height: 0,
-  angle: 0,
-  zIndex: 0
-};
-
 export const useItemDimensions = (item: ItemAny, sectionId: string) => {
   const layoutId = useLayoutContext();
-  const { width, height } = useKeyframeValue<{ width: number; height: number }>(
+  const dimensions = useKeyframeValue<{ width: number; height: number } | undefined>(
     item,
-    (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea,
-    (animator, scroll, value) => animator.getDimensions(value, scroll),
+    KeyframeType.Dimensions,
+    (item, layoutId) => layoutId ? item.area[layoutId] : undefined,
+    (animator, scroll, value) => value ? animator.getDimensions(value, scroll) : undefined,
     sectionId,
     [layoutId]
   );
-  return { width, height };
+  return dimensions;
 };

package/src/components/useItemPosition.ts

@@ -1,17 +1,18 @@
-import { AnchorSide, ItemAny, PositionType } from '@cntrl-site/sdk';
+import { AnchorSide, ItemAny, KeyframeType, PositionType } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useLayoutContext } from './useLayoutContext';
 
 export const useItemPosition = (item: ItemAny, sectionId: string) => {
   const layoutId = useLayoutContext();
-  const { top, left } = useKeyframeValue<{ top: number; left: number }>(
+  const position = useKeyframeValue<{ top: number; left: number } | undefined>(
     item,
+    KeyframeType.Position,
     (item, layoutId) => {
-      if (!layoutId) return { top: 0, left: -10 };
+      if (!layoutId) return;
       return item.area[layoutId]
     },
-    (animator, scroll, value) => animator.getPositions(value, scroll),
+    (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined,
     sectionId,
     [layoutId]
   );
@@ -19,11 +20,11 @@ export const useItemPosition = (item: ItemAny, sectionId: string) => {
   const positionType = layoutId ? item.area[layoutId].positionType : PositionType.ScreenBased;
   // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
   const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
-  return {
-    bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
-    top:  isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide),
-    left: `${left * 100}vw`
-  };
+  return position ? {
+    bottom: isScreenBasedBottom ? `${-position.top * 100}vw` : 'unset',
+    top:  isScreenBasedBottom ? 'unset' : getItemTopStyle(position.top, anchorSide),
+    left: `${position.left * 100}vw`
+  } : undefined;
 };
 
 

package/src/components/useItemScale.ts

@@ -1,17 +1,17 @@
-import { ScaleAnchor, ItemAny } from '@cntrl-site/sdk';
+import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useLayoutContext } from './useLayoutContext';
 
 export const useItemScale = (item: ItemAny, sectionId: string) => {
   const layoutId = useLayoutContext();
-  const { scale } = useKeyframeValue(
+  const scale = useKeyframeValue(
     item,
-    (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }),
-    (animator, scroll, value) => animator.getScale(value, scroll),
+    KeyframeType.Scale,
+    (item, layoutId) => (layoutId ? item.area[layoutId].scale : undefined),
+    (animator, scroll, value) => value !== undefined ? animator.getScale({ scale: value }, scroll).scale : undefined,
     sectionId,
     [layoutId]
   );
-  const scaleAnchor = layoutId ? item.area[layoutId].scaleAnchor : ScaleAnchor.MiddleCenter;
 
-  return { scale, scaleAnchor };
+  return scale;
 };

package/src/utils/ScaleAnchorMap.ts

@@ -1,4 +1,4 @@
-import { ScaleAnchor } from '@cntrl-site/sdk';
+import { AreaAnchor as ScaleAnchor } from '@cntrl-site/sdk';
 
 export const ScaleAnchorMap = {
   [ScaleAnchor.TopLeft]: 'top left',

package/src/utils/effects/useImageFx.ts

@@ -33,7 +33,7 @@ export function useImageFx(
 ): void {
   const mousePos = useRef<[number, number]>([0.0, 0.0]);
   const imageFx = useMemo<ImageEffect | undefined>(() => {
-    if (!imageUrl || !cursor) return undefined;
+    if (!imageUrl || !cursor || !enabled) return undefined;
     const { type, x, y } = cursor;
     return new ImageEffect(
       imageUrl,
@@ -48,7 +48,7 @@ export function useImageFx(
       width,
       height
     );
-  }, [imageUrl, fragmentShader, width, height]);
+  }, [imageUrl, fragmentShader, width, height, enabled]);
 
   useEffect(() => {
     if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx) return;

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>