@cntrl-site/sdk-nextjs 1.1.5-alpha.2 → 1.2.0

package/lib/components/items/RichTextWrapper.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RichTextWrapper = ({ isRichText, children, transformOrigin = 'top left' }) => {
+    if (!isRichText)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return ((0, jsx_runtime_1.jsx)("div", { style: { transformOrigin, transform: 'scale(var(--layout-deviation))' }, children: children }));
+};
+exports.RichTextWrapper = RichTextWrapper;

package/lib/components/items/itemsMap.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.itemsMap = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const RectangleItem_1 = require("./RectangleItem/RectangleItem");
+const ImageItem_1 = require("./FileItem/ImageItem");
+const VideoItem_1 = require("./FileItem/VideoItem");
+const RichTextItem_1 = require("./RichTextItem/RichTextItem");
+const YoutubeEmbed_1 = require("./EmbedVideoItem/YoutubeEmbed");
+const VimeoEmbed_1 = require("./EmbedVideoItem/VimeoEmbed");
+const CustomItem_1 = require("./CustomItem/CustomItem");
+const GroupItem_1 = require("./GroupItem/GroupItem");
+const CodeEmbedItem_1 = require("./CodeEmbedItem/CodeEmbedItem");
+const CompoundItem_1 = require("./CompoundItem/CompoundItem");
+exports.itemsMap = {
+    [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
+    [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
+    [sdk_1.ArticleItemType.Video]: VideoItem_1.VideoItem,
+    [sdk_1.ArticleItemType.RichText]: RichTextItem_1.RichTextItem,
+    [sdk_1.ArticleItemType.YoutubeEmbed]: YoutubeEmbed_1.YoutubeEmbedItem,
+    [sdk_1.ArticleItemType.VimeoEmbed]: VimeoEmbed_1.VimeoEmbedItem,
+    [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem,
+    [sdk_1.ArticleItemType.Group]: GroupItem_1.GroupItem,
+    [sdk_1.ArticleItemType.Compound]: CompoundItem_1.CompoundItem,
+    [sdk_1.ArticleItemType.CodeEmbed]: CodeEmbedItem_1.CodeEmbedItem
+};

package/lib/components/{useItemAngle.js → items/useItemAngle.js}

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemAngle = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
-const useKeyframeValue_1 = require("../common/useKeyframeValue");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useItemAngle = (item, sectionId) => {
     const angle = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Rotation, (item, layoutId) => layoutId ? item.area[layoutId].angle : undefined, (animator, scroll, value) => value !== undefined ? animator.getRotation({ angle: value }, scroll).angle : undefined, sectionId);
     return angle;

package/lib/components/{useItemDimensions.js → items/useItemDimensions.js}

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemDimensions = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
-const useKeyframeValue_1 = require("../common/useKeyframeValue");
-const useLayoutContext_1 = require("./useLayoutContext");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../useLayoutContext");
 const useItemDimensions = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const dimensions = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Dimensions, (item, layoutId) => layoutId ? item.area[layoutId] : undefined, (animator, scroll, value) => value ? animator.getDimensions(value, scroll) : undefined, sectionId, [layoutId]);

package/lib/components/{useItemPosition.js → items/useItemPosition.js}

@@ -2,9 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemPosition = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
-const useKeyframeValue_1 = require("../common/useKeyframeValue");
-const getItemTopStyle_1 = require("../utils/getItemTopStyle");
-const useLayoutContext_1 = require("./useLayoutContext");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../useLayoutContext");
 const useItemPosition = (item, sectionId, stateValues) => {
     var _a, _b;
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -13,18 +12,14 @@ const useItemPosition = (item, sectionId, stateValues) => {
             return;
         return item.area[layoutId];
     }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
-    const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
-    const positionType = layoutId ? item.area[layoutId].positionType : sdk_1.PositionType.ScreenBased;
     // to prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
-    const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
     if (!position)
         return undefined;
     const top = (_a = stateValues === null || stateValues === void 0 ? void 0 : stateValues.top) !== null && _a !== void 0 ? _a : position.top;
     const left = (_b = stateValues === null || stateValues === void 0 ? void 0 : stateValues.left) !== null && _b !== void 0 ? _b : position.left;
     return position ? {
-        bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
-        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
-        left: `${left * 100}vw`
+        top,
+        left
     } : undefined;
 };
 exports.useItemPosition = useItemPosition;

package/lib/components/{useItemScale.js → items/useItemScale.js}

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemScale = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
-const useKeyframeValue_1 = require("../common/useKeyframeValue");
-const useLayoutContext_1 = require("./useLayoutContext");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../useLayoutContext");
 const useItemScale = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const scale = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Scale, (item, layoutId) => (layoutId ? item.area[layoutId].scale : undefined), (animator, scroll, value) => value !== undefined ? animator.getScale({ scale: value }, scroll).scale : undefined, sectionId, [layoutId]);

package/lib/index.js

@@ -24,23 +24,23 @@ var Head_1 = require("./components/Head");
 Object.defineProperty(exports, "Head", { enumerable: true, get: function () { return Head_1.CNTRLHead; } });
 var Article_1 = require("./components/Article");
 Object.defineProperty(exports, "Article", { enumerable: true, get: function () { return Article_1.Article; } });
-var Section_1 = require("./components/Section");
+var Section_1 = require("./components/Section/Section");
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Section_1.Section; } });
-var Item_1 = require("./components/Item");
+var Item_1 = require("./components/items/Item");
 Object.defineProperty(exports, "Item", { enumerable: true, get: function () { return Item_1.Item; } });
-var ImageItem_1 = require("./components/items/ImageItem");
+var ImageItem_1 = require("./components/items/FileItem/ImageItem");
 Object.defineProperty(exports, "ImageItem", { enumerable: true, get: function () { return ImageItem_1.ImageItem; } });
-var RectangleItem_1 = require("./components/items/RectangleItem");
+var RectangleItem_1 = require("./components/items/RectangleItem/RectangleItem");
 Object.defineProperty(exports, "RectangleItem", { enumerable: true, get: function () { return RectangleItem_1.RectangleItem; } });
-var RichTextItem_1 = require("./components/items/RichTextItem");
+var RichTextItem_1 = require("./components/items/RichTextItem/RichTextItem");
 Object.defineProperty(exports, "RichTextItem", { enumerable: true, get: function () { return RichTextItem_1.RichTextItem; } });
-var VideoItem_1 = require("./components/items/VideoItem");
+var VideoItem_1 = require("./components/items/FileItem/VideoItem");
 Object.defineProperty(exports, "VideoItem", { enumerable: true, get: function () { return VideoItem_1.VideoItem; } });
 var LayoutStyle_1 = require("./components/LayoutStyle");
 Object.defineProperty(exports, "LayoutStyle", { enumerable: true, get: function () { return LayoutStyle_1.LayoutStyle; } });
-var VimeoEmbed_1 = require("./components/items/VimeoEmbed");
+var VimeoEmbed_1 = require("./components/items/EmbedVideoItem/VimeoEmbed");
 Object.defineProperty(exports, "VimeoEmbedItem", { enumerable: true, get: function () { return VimeoEmbed_1.VimeoEmbedItem; } });
-var YoutubeEmbed_1 = require("./components/items/YoutubeEmbed");
+var YoutubeEmbed_1 = require("./components/items/EmbedVideoItem/YoutubeEmbed");
 Object.defineProperty(exports, "YoutubeEmbedItem", { enumerable: true, get: function () { return YoutubeEmbed_1.YoutubeEmbedItem; } });
 const defaultContext_1 = require("./provider/defaultContext");
 var CntrlProvider_1 = require("./provider/CntrlProvider");

package/lib/interactions/InteractionsRegistry.js

@@ -13,13 +13,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InteractionsRegistry = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
-const Item_1 = require("../components/Item");
-const AudioPlayer_1 = require("./AudioPlayer");
+const isItemType_1 = require("../utils/isItemType");
 class InteractionsRegistry {
     constructor(article, layoutId) {
         this.layoutId = layoutId;
         this.ctrls = new Map();
-        this.audioPlayer = new AudioPlayer_1.AudioPlayer();
         const { interactions } = article;
         this.items = this.unpackItems(article);
         const activeStatesIds = interactions.reduce((map, inter) => {
@@ -141,9 +139,6 @@ class InteractionsRegistry {
             for (const trigger of interaction.triggers) {
                 itemsToNotify.add(trigger.itemId);
             }
-            if (triggerType === 'click') {
-                this.playClickSound();
-            }
             this.notifyItemCtrlsChange(Array.from(itemsToNotify));
             this.notifyTransitionStartForItems(transitioningItems, activeStateId);
         }
@@ -207,11 +202,11 @@ class InteractionsRegistry {
             for (const item of section.items) {
                 const { items } = item, itemWithoutChildren = __rest(item, ["items"]);
                 itemsArr.push(itemWithoutChildren);
-                if (!(0, Item_1.isItemType)(item, sdk_1.ArticleItemType.Group))
-                    continue;
-                const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
-                for (const child of groupChildren) {
-                    itemsArr.push(child);
+                if ((0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Group) || (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Compound)) {
+                    const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
+                    for (const child of groupChildren) {
+                        itemsArr.push(child);
+                    }
                 }
             }
         }
@@ -240,8 +235,5 @@ class InteractionsRegistry {
         }
         return stages;
     }
-    playClickSound() {
-        this.audioPlayer.play();
-    }
 }
 exports.InteractionsRegistry = InteractionsRegistry;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -4,7 +4,7 @@ exports.RichTextConverter = exports.FontStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
-const LinkWrapper_1 = require("../../components/LinkWrapper");
+const LinkWrapper_1 = require("../../components/items/LinkWrapper");
 const getFontFamilyValue_1 = require("../getFontFamilyValue");
 exports.FontStyles = {
     'normal': {},

package/lib/utils/getCompoundBondaryStyles.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompoundTransform = exports.getCompoundLeft = exports.getCompoundTop = exports.getCompoundWidth = exports.getCompoundHeight = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const positionMatrix = {
+    [sdk_1.AreaAnchor.TopLeft]: [0, 0],
+    [sdk_1.AreaAnchor.TopCenter]: [0, 0.5],
+    [sdk_1.AreaAnchor.TopRight]: [0, 1],
+    [sdk_1.AreaAnchor.MiddleLeft]: [0.5, 0],
+    [sdk_1.AreaAnchor.MiddleCenter]: [0.5, 0.5],
+    [sdk_1.AreaAnchor.MiddleRight]: [0.5, 1],
+    [sdk_1.AreaAnchor.BottomLeft]: [1, 0],
+    [sdk_1.AreaAnchor.BottomCenter]: [1, 0.5],
+    [sdk_1.AreaAnchor.BottomRight]: [1, 1]
+};
+function getCompoundHeight(compoundSettings, height) {
+    if (!height || !compoundSettings)
+        return;
+    if (compoundSettings.heightMode === 'relative') {
+        return `${height * 100}%`;
+    }
+    return `${height * 100}vw`;
+}
+exports.getCompoundHeight = getCompoundHeight;
+function getCompoundWidth(compoundSettings, width, isRichText, exemplary) {
+    if (!width || !compoundSettings)
+        return;
+    if (compoundSettings.widthMode === 'relative') {
+        return `${width * 100}%`;
+    }
+    return isRichText && exemplary ? `${width * exemplary}px` : `${width * 100}vw`;
+}
+exports.getCompoundWidth = getCompoundWidth;
+function getCompoundTop(compoundSettings, top) {
+    if (!top || !compoundSettings)
+        return;
+    if (compoundSettings.heightMode === 'relative') {
+        return `${top * 100}%`;
+    }
+    const [ky] = positionMatrix[compoundSettings.positionAnchor];
+    return `calc(${ky * 100}% + ${top * 100}vw)`;
+}
+exports.getCompoundTop = getCompoundTop;
+function getCompoundLeft(compoundSettings, left) {
+    if (!left || !compoundSettings)
+        return;
+    if (compoundSettings.widthMode === 'relative') {
+        return `${left * 100}%`;
+    }
+    const [_, kx] = positionMatrix[compoundSettings.positionAnchor];
+    return `calc(${kx * 100}% + ${left * 100}vw)`;
+}
+exports.getCompoundLeft = getCompoundLeft;
+function getCompoundTransform(compoundSettings) {
+    if (!compoundSettings)
+        return 'unset';
+    const areaAnchor = compoundSettings.positionAnchor;
+    const [ky, kx] = positionMatrix[areaAnchor];
+    return `translate(${kx * (-100)}%, ${ky * (-100)}%)`;
+}
+exports.getCompoundTransform = getCompoundTransform;

package/lib/utils/isItemType.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isItemType = void 0;
+function isItemType(item, itemType) {
+    return item.type === itemType;
+}
+exports.isItemType = isItemType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.1.5-alpha.2",
+  "version": "1.2.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,11 +23,9 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.13.0",
-    "@types/howler": "^2.2.12",
+    "@cntrl-site/sdk": "^1.14.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
-    "howler": "^2.2.4",
     "html-react-parser": "^3.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "styled-jsx": "^5.0.2"

package/src/components/Article.tsx

@@ -1,8 +1,8 @@
 import { FC, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { Article as TArticle } from '@cntrl-site/sdk';
-import { Section } from './Section';
-import { Item } from './Item';
+import { Section } from './Section/Section';
+import { Item } from './items/Item';
 import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
 import { ArticleWrapper } from './ArticleWrapper';

package/src/components/{Section.tsx → Section/Section.tsx}

@@ -7,8 +7,8 @@ import {
   SectionHeight,
   SectionHeightMode
 } from '@cntrl-site/sdk';
-import { useCntrlContext } from '../provider/useCntrlContext';
-import { useSectionRegistry } from '../utils/ArticleRectManager/useSectionRegistry';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
 import { CntrlColor } from '@cntrl-site/color';
 
 type SectionChild = ReactElement<any, any>;

package/src/components/{useSectionColor.ts → Section/useSectionColor.ts}

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { CntrlColor } from '@cntrl-site/color';
-import { useLayoutContext } from './useLayoutContext';
+import { useLayoutContext } from '../useLayoutContext';
 
 type LayoutIdentifier = string;
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';

package/src/components/{useSectionHeightMap.ts → Section/useSectionHeightMap.ts}

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { CntrlContext } from '../provider/CntrlContext';
+import { CntrlContext } from '../../provider/CntrlContext';
 import { Layout, SectionHeight } from '@cntrl-site/sdk';
 import { getSectionHeight } from './Section';
 

package/src/components/items/{CodeEmbedItem.tsx → CodeEmbedItem/CodeEmbedItem.tsx}

@@ -1,9 +1,9 @@
 import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
 import { FC, useEffect, useId, useState } from 'react';
-import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
-import { useRegisterResize } from "../../common/useRegisterResize";
+import { useRegisterResize } from "../../../common/useRegisterResize";
 import { useItemAngle } from '../useItemAngle';
 import { LinkWrapper } from '../LinkWrapper';
 import { useCodeEmbedItem } from './useCodeEmbedItem';

package/src/components/items/{useCodeEmbedItem.ts → CodeEmbedItem/useCodeEmbedItem.ts}

@@ -1,6 +1,6 @@
 import { CodeEmbedItem, AreaAnchor, KeyframeType } from '@cntrl-site/sdk';
-import { useLayoutContext } from '../useLayoutContext';
-import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
 
 export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
   const layoutId = useLayoutContext();

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

@@ -0,0 +1,160 @@
+import React, {
+  FC,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from 'react';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useExemplary } from '../../../common/useExemplary';
+import { useItemScale } from '../useItemScale';
+import { useItemInteractionCtrl } from '../../../interactions/useItemInteractionCtrl';
+import { useItemPosition } from '../useItemPosition';
+import { useItemDimensions } from '../useItemDimensions';
+import { ArticleItemType, getLayoutStyles, ItemAny, AreaAnchor } from '@cntrl-site/sdk';
+import JSXStyle from 'styled-jsx/style';
+import { ScaleAnchorMap } from '../../../utils/ScaleAnchorMap';
+import { isItemType } from '../../../utils/isItemType';
+import { RichTextWrapper } from '../RichTextWrapper';
+import { itemsMap } from '../itemsMap';
+import {
+  getCompoundHeight,
+  getCompoundLeft,
+  getCompoundTop, getCompoundTransform,
+  getCompoundWidth
+} from '../../../utils/getCompoundBondaryStyles';
+
+interface ChildItemProps {
+  item: ItemAny;
+  sectionId: string;
+  isParentVisible?: boolean;
+}
+
+const noop = () => null;
+
+export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVisible = true }) => {
+  const id = useId();
+  const { layouts } = useCntrlContext();
+  const layout = useLayoutContext();
+  const exemplary = useExemplary();
+  const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(isParentVisible);
+  const itemScale = useItemScale(item, sectionId);
+  const interactionCtrl = useItemInteractionCtrl(item.id);
+  const wrapperStateProps = interactionCtrl?.getState(['top', 'left']);
+  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale']);
+  const position = useItemPosition(item, sectionId, {
+    top: wrapperStateProps?.styles?.top as number,
+    left: wrapperStateProps?.styles?.left as number,
+  });
+  const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
+  const dimensions = useItemDimensions(item, sectionId);
+  const isInitialRef = useRef(true);
+  const sizing = layout && isItemType(item, ArticleItemType.RichText)
+    ? item.layoutParams[layout].sizing
+    : undefined;
+  const sizingAxis = parseSizing(sizing);
+  const ItemComponent = itemsMap[item.type] || noop;
+  const handleVisibilityChange = useCallback((isVisible: boolean) => {
+    if (!isParentVisible) return;
+    setAllowPointerEvents(isVisible);
+  }, [isParentVisible]);
+
+  useEffect(() => {
+    isInitialRef.current = false;
+  }, []);
+
+  const transformOrigin = compoundSettings ? ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
+  const isRichText = isItemType(item, ArticleItemType.RichText);
+  const width = (innerStateProps?.styles?.width ?? dimensions?.width) as number | undefined;
+  const height = (innerStateProps?.styles?.height ?? dimensions?.height) as number | undefined;
+  const scale = innerStateProps?.styles?.scale ?? itemScale;
+  const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
+  if (!item.compoundSettings) return null;
+  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.compoundSettings];
+  if (item.layoutParams) {
+    layoutValues.push(item.layoutParams);
+  }
+  return (
+    <div
+      className={`item-${item.id}`}
+      onTransitionEnd={(e) => {
+        e.stopPropagation();
+        interactionCtrl?.handleTransitionEnd?.(e.propertyName);
+      }}
+      style={{
+        ...(position && compoundSettings ? { top: getCompoundTop(compoundSettings, position.top) } : {}),
+        ...(position && compoundSettings ? { left: getCompoundLeft(compoundSettings, position.left) } : {}),
+        ...(width && compoundSettings
+          ? { width: `${sizingAxis.x === 'manual' 
+              ? getCompoundWidth(compoundSettings, width, isRichText, exemplary) 
+              : 'max-content'}` }
+          : {}),
+        ...(height && compoundSettings
+          ? { height: `${sizingAxis.y === 'manual' 
+              ? getCompoundHeight(compoundSettings, height) 
+              : 'unset'}` }
+          : {}),
+        ...(scale && compoundSettings ? { transform: `scale(${scale}) ${getCompoundTransform(compoundSettings)}` } : {}),
+        transition: innerStateProps?.transition ?? 'none',
+        cursor: hasClickTriggers ? 'pointer' : 'unset',
+        pointerEvents: allowPointerEvents ? 'auto' : 'none'
+      }}
+      onClick={() => {
+        interactionCtrl?.sendTrigger('click');
+      }}
+      onMouseEnter={() => {
+        interactionCtrl?.sendTrigger('hover-in');
+      }}
+      onMouseLeave={() => {
+        interactionCtrl?.sendTrigger('hover-out');
+      }}
+    >
+      <RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
+        <ItemComponent
+          item={item}
+          sectionId={sectionId}
+          interactionCtrl={interactionCtrl}
+          onVisibilityChange={handleVisibilityChange}
+        />
+      </RichTextWrapper>
+      <JSXStyle id={id}>{`
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
+          const sizingAxis = parseSizing(layoutParams.sizing);
+          const scaleAnchor = area.scaleAnchor as AreaAnchor;
+          return (`
+            .item-${item.id} {
+              position: absolute;
+              top: ${getCompoundTop(compoundSettings, area.top)};
+              left: ${getCompoundLeft(compoundSettings, area.left)};
+              transition: opacity 0.2s linear 0.1s;
+              display: ${hidden ? 'none' : 'block'};
+              width: ${sizingAxis.x === 'manual'
+                ? `${getCompoundWidth(compoundSettings, area.width, isRichText)}`
+                : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${getCompoundHeight(compoundSettings, area.height)}` : 'unset'};
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale}) ${getCompoundTransform(compoundSettings)};
+              z-index: ${area.zIndex};
+            }
+          `);
+      })}
+      `}</JSXStyle>
+    </div>
+  );
+};
+
+
+function parseSizing(sizing: string = 'manual'): Axis {
+  const axisSizing = sizing.split(' ');
+  return {
+    y: axisSizing[0],
+    x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
+  } as Axis;
+}
+
+interface Axis {
+  x: 'manual' | 'auto';
+  y: 'manual' | 'auto';
+}

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

@@ -0,0 +1,70 @@
+import React, { FC, useEffect, useId, useState } from 'react';
+import { useItemAngle } from '../useItemAngle';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { LinkWrapper } from '../LinkWrapper';
+import { ItemProps } from '../Item';
+import JSXStyle from 'styled-jsx/style';
+import { getLayoutStyles } from '@cntrl-site/sdk';
+import { CompoundItem as TCompoundItem } from '@cntrl-site/sdk';
+import { CompoundChild } from './CompoundChild';
+import { useCompoundItem } from './useCompoundItem';
+
+export const CompoundItem: FC<ItemProps<TCompoundItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+  const id = useId();
+  const { items } = item;
+  const itemAngle = useItemAngle(item, sectionId);
+  const { layouts } = useCntrlContext();
+  const { opacity: itemOpacity } = useCompoundItem(item, sectionId);
+  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 angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
+  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
+  const isInteractive = opacity !== 0 && opacity !== undefined;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
+  return (
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
+      <>
+        <div
+          className={`compound-${item.id}`}
+          ref={setRef}
+          style={{
+            ...(opacity !== undefined ? { opacity } : {}),
+            ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+            transition: stateParams?.transition ?? 'none'
+          }}
+        >
+          {items && items.map(item => (
+            <CompoundChild
+              item={item}
+              key={item.id}
+              sectionId={sectionId}
+              isParentVisible={isInteractive}
+            />
+          ))}
+        </div>
+        <JSXStyle id={id}>{`
+        .compound-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        }
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+          return (`
+            .compound-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+            }
+          `);
+        })}
+      `}</JSXStyle>
+      </>
+    </LinkWrapper>
+  );
+};

package/src/components/items/CompoundItem/useCompoundItem.ts

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

package/src/components/items/{CustomItem.tsx → CustomItem/CustomItem.tsx}

@@ -1,9 +1,9 @@
 import { getLayoutStyles, CustomItem as TCustomItem } from '@cntrl-site/sdk';
 import { FC, useState } from 'react';
-import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
-import { useRegisterResize } from '../../common/useRegisterResize';
+import { useRegisterResize } from '../../../common/useRegisterResize';
 import { useItemAngle } from '../useItemAngle';
 
 export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId, interactionCtrl }) => {