@cntrl-site/sdk-nextjs 1.1.5 → 1.2.0

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

@@ -3,54 +3,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isItemType = exports.Item = void 0;
+exports.Item = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
-const RectangleItem_1 = require("./items/RectangleItem");
-const ImageItem_1 = require("./items/ImageItem");
-const VideoItem_1 = require("./items/VideoItem");
-const RichTextItem_1 = require("./items/RichTextItem");
-const VimeoEmbed_1 = require("./items/VimeoEmbed");
-const YoutubeEmbed_1 = require("./items/YoutubeEmbed");
-const CustomItem_1 = require("./items/CustomItem");
-const useCntrlContext_1 = require("../provider/useCntrlContext");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useItemPosition_1 = require("./useItemPosition");
 const useItemDimensions_1 = require("./useItemDimensions");
 const useItemScale_1 = require("./useItemScale");
-const ScaleAnchorMap_1 = require("../utils/ScaleAnchorMap");
-const useSectionHeightMap_1 = require("./useSectionHeightMap");
-const getItemTopStyle_1 = require("../utils/getItemTopStyle");
-const useStickyItemTop_1 = require("./items/useStickyItemTop");
-const getAnchoredItemTop_1 = require("../utils/getAnchoredItemTop");
-const useLayoutContext_1 = require("./useLayoutContext");
-const ArticleRectContext_1 = require("../provider/ArticleRectContext");
-const useExemplary_1 = require("../common/useExemplary");
-const GroupItem_1 = require("./items/GroupItem");
-const CodeEmbedItem_1 = require("./items/CodeEmbedItem");
-const KeyframesContext_1 = require("../provider/KeyframesContext");
-const useItemInteractionCtrl_1 = require("../interactions/useItemInteractionCtrl");
-const 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.CodeEmbed]: CodeEmbedItem_1.CodeEmbedItem
-};
+const ScaleAnchorMap_1 = require("../../utils/ScaleAnchorMap");
+const useSectionHeightMap_1 = require("../Section/useSectionHeightMap");
+const getItemTopStyle_1 = require("../../utils/getItemTopStyle");
+const useStickyItemTop_1 = require("./useStickyItemTop");
+const getAnchoredItemTop_1 = require("../../utils/getAnchoredItemTop");
+const useLayoutContext_1 = require("../useLayoutContext");
+const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
+const useExemplary_1 = require("../../common/useExemplary");
+const KeyframesContext_1 = require("../../provider/KeyframesContext");
+const useItemInteractionCtrl_1 = require("../../interactions/useItemInteractionCtrl");
+const isItemType_1 = require("../../utils/isItemType");
+const RichTextWrapper_1 = require("./RichTextWrapper");
+const itemsMap_1 = require("./itemsMap");
 const stickyFix = `
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 `;
-const RichTextWrapper = ({ isRichText, children }) => {
-    if (!isRichText)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-    return ((0, jsx_runtime_1.jsx)("div", { style: { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }, children: children }));
-};
 const noop = () => null;
 const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -84,17 +62,17 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     if (item.layoutParams) {
         layoutValues.push(item.layoutParams);
     }
-    const sizing = layout && isItemType(item, sdk_1.ArticleItemType.RichText)
+    const sizing = layout && (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText)
         ? item.layoutParams[layout].sizing
         : undefined;
     const sizingAxis = parseSizing(sizing);
-    const ItemComponent = itemsMap[item.type] || noop;
+    const ItemComponent = itemsMap_1.itemsMap[item.type] || noop;
     const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
     const handleItemResize = (height) => {
         if (!layout)
             return;
         const sticky = item.sticky[layout];
-        if (!sticky || stickyTop === undefined) {
+        if (!sticky || stickyTop === undefined || !articleHeight) {
             setWrapperHeight(undefined);
             return;
         }
@@ -115,20 +93,23 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
-    const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
+    const isRichText = (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText);
     const width = ((_d = (_c = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : dimensions === null || dimensions === void 0 ? void 0 : dimensions.width);
     const height = ((_f = (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : dimensions === null || dimensions === void 0 ? void 0 : dimensions.height);
+    const anchorSide = layout ? item.area[layout].anchorSide : sdk_1.AnchorSide.Top;
+    const positionType = layout ? item.area[layout].positionType : sdk_1.PositionType.ScreenBased;
+    const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
     const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
     const hasClickTriggers = (_j = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _j !== void 0 ? _j : false;
     return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, onTransitionEnd: (e) => {
             var _a;
             e.stopPropagation();
             (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
-        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
+        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(position.top, anchorSide) } : {})), (position ? { left: `${position.left * 100}vw` } : {})), (position ? { bottom: isScreenBasedBottom ? `${-position.top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
                     opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
                     top: `${stickyTop * 100}vw`,
                     height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
-                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, ref: itemInnerRef, onClick: () => {
+                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, ref: itemInnerRef, onClick: () => {
                             interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('click');
                         }, onMouseEnter: () => {
                             interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('hover-in');
@@ -184,7 +165,3 @@ function parseSizing(sizing = 'manual') {
         x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
     };
 }
-function isItemType(item, itemType) {
-    return item.type === itemType;
-}
-exports.isItemType = isItemType;

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

@@ -12,9 +12,9 @@ const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useRectangleItem_1 = require("./useRectangleItem");
 const useItemAngle_1 = require("../useItemAngle");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const useRegisterResize_1 = require("../../common/useRegisterResize");
-const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d;
     const id = (0, react_1.useId)();

package/lib/components/items/{useRectangleItem.js → RectangleItem/useRectangleItem.js}

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRectangleItem = 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 defaultColor = 'rgba(0, 0, 0, 1)';
 const useRectangleItem = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();

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

@@ -10,14 +10,14 @@ const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const useRichTextItemValues_1 = require("./useRichTextItemValues");
-const useRegisterResize_1 = require("../../common/useRegisterResize");
-const getFontFamilyValue_1 = require("../../utils/getFontFamilyValue");
-const useExemplary_1 = require("../../common/useExemplary");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useRichTextItemValues_1 = require("../useRichTextItemValues");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getFontFamilyValue_1 = require("../../../utils/getFontFamilyValue");
+const useExemplary_1 = require("../../../common/useExemplary");
 const useItemAngle_1 = require("../useItemAngle");
-const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
-const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const useCurrentLayout_1 = require("../../../common/useCurrentLayout");
 const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d;
     const id = (0, react_1.useId)();

package/lib/components/items/{useRichTextItem.js → RichTextItem/useRichTextItem.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRichTextItem = void 0;
-const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const RichTextConverter_1 = require("../../../utils/RichTextConverter/RichTextConverter");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const richTextConverter = new RichTextConverter_1.RichTextConverter();
 const useRichTextItem = (item) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();

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,7 +13,7 @@ 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 isItemType_1 = require("../utils/isItemType");
 class InteractionsRegistry {
     constructor(article, layoutId) {
         this.layoutId = layoutId;
@@ -202,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);
+                    }
                 }
             }
         }

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,17 +1,7 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "SDK for Next.js",
-  "author": "arsen@momdesign.nyc",
-  "license": "MIT",
-  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
-  },
-  "bugs": {
-    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
-  },
   "main": "lib/index.js",
   "types": "src/index.ts",
   "scripts": {
@@ -20,24 +10,33 @@
     "build": "tsc --project tsconfig.build.json",
     "prepublishOnly": "NODE_ENV=production npm run build"
   },
-  "peerDependencies": {
-    "@types/lodash.isequal": "^4.5.6",
-    "lodash.isequal": "^4.5.0",
-    "next": "^14.2.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
+  },
+  "author": "arsen@momdesign.nyc",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
   },
+  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.13.0",
+    "@cntrl-site/sdk": "^1.14.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "styled-jsx": "^5.0.2"
   },
+  "peerDependencies": {
+    "@types/lodash.isequal": "^4.5.6",
+    "lodash.isequal": "^4.5.0",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",

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();