@cntrl-site/sdk-nextjs 1.1.5 → 1.2.1

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

@@ -3,57 +3,37 @@ 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 useItemPosition_1 = require("./useItemPosition");
-const useItemDimensions_1 = require("./useItemDimensions");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
 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 useItemTriggers_1 = require("./useItemTriggers");
+const useSizing_1 = require("./useSizing");
+const useItemPointerEvents_1 = require("./useItemPointerEvents");
+const useItemArea_1 = require("./useItemArea");
 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const itemWrapperRef = (0, react_1.useRef)(null);
     const itemInnerRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
@@ -63,38 +43,36 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
     const exemplary = (0, useExemplary_1.useExemplary)();
-    const [allowPointerEvents, setAllowPointerEvents] = (0, react_1.useState)(isParentVisible);
+    const { handleVisibilityChange, allowPointerEvents } = (0, useItemPointerEvents_1.useItemPointerEvents)(isParentVisible);
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
     const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
     const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
+    const triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
     const wrapperStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left']);
-    const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['width', 'height', 'scale']);
-    const position = (0, useItemPosition_1.useItemPosition)(item, sectionId, {
+    const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['width', 'height', 'scale', 'top', 'left']);
+    const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
         top: (_a = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _a === void 0 ? void 0 : _a.top,
         left: (_b = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _b === void 0 ? void 0 : _b.left,
+        width: (_c = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _c === void 0 ? void 0 : _c.width,
+        height: (_d = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _d === void 0 ? void 0 : _d.height
     });
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
     const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionHeight, sectionId);
-    const dimensions = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
     const layoutValues = [item.area, item.hidden];
-    const isInitialRef = (0, react_1.useRef)(true);
     layoutValues.push(item.sticky);
     layoutValues.push(sectionHeight);
     if (item.layoutParams) {
         layoutValues.push(item.layoutParams);
     }
-    const sizing = layout && isItemType(item, sdk_1.ArticleItemType.RichText)
-        ? item.layoutParams[layout].sizing
-        : undefined;
-    const sizingAxis = parseSizing(sizing);
-    const ItemComponent = itemsMap[item.type] || noop;
+    const sizingAxis = (0, useSizing_1.useSizing)(item);
+    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;
         }
@@ -107,43 +85,30 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
         setItemHeight(height);
         setWrapperHeight(wrapperHeight);
     };
-    const handleVisibilityChange = (0, react_1.useCallback)((isVisible) => {
-        if (!isParentVisible)
-            return;
-        setAllowPointerEvents(isVisible);
-    }, [isParentVisible]);
-    (0, react_1.useEffect)(() => {
-        isInitialRef.current = false;
-    }, []);
-    const isRichText = 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 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;
+    const isRichText = (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText);
+    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 = (_f = (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.scale) !== null && _f !== void 0 ? _f : itemScale;
+    const hasClickTriggers = (_g = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _g !== void 0 ? _g : 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({}, (top ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left ? { left: `${left * 100}vw` } : {})), (top ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_h = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _h !== void 0 ? _h : '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: () => {
-                            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('click');
-                        }, onMouseEnter: () => {
-                            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('hover-in');
-                        }, onMouseLeave: () => {
-                            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('hover-out');
-                        }, style: Object.assign(Object.assign(Object.assign({}, ((width && height) ? {
+                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({}, ((width && height) ? {
                             width: `${sizingAxis.x === 'manual'
                                 ? isRichText
                                     ? `${width * exemplary}px`
                                     : `${width * 100}vw`
                                 : 'max-content'}`,
                             height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
-                        } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }), children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_j = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _j !== void 0 ? _j : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
-                    const sizingAxis = parseSizing(layoutParams.sizing);
+                    const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     const scaleAnchor = area.scaleAnchor;
                     return (`
@@ -177,14 +142,3 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
       ` })] }));
 };
 exports.Item = Item;
-function parseSizing(sizing = 'manual') {
-    const axisSizing = sizing.split(' ');
-    return {
-        y: axisSizing[0],
-        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/items/useItemArea.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemArea = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const useLayoutContext_1 = require("../useLayoutContext");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+function useItemArea(item, sectionId, stateValues) {
+    var _a, _b, _c, _d;
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const position = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Position, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        return item.area[layoutId];
+    }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
+    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]);
+    const width = ((_a = stateValues.width) !== null && _a !== void 0 ? _a : dimensions === null || dimensions === void 0 ? void 0 : dimensions.width);
+    const height = ((_b = stateValues.height) !== null && _b !== void 0 ? _b : dimensions === null || dimensions === void 0 ? void 0 : dimensions.height);
+    const top = ((_c = stateValues.top) !== null && _c !== void 0 ? _c : position === null || position === void 0 ? void 0 : position.top);
+    const left = ((_d = stateValues.left) !== null && _d !== void 0 ? _d : position === null || position === void 0 ? void 0 : position.left);
+    return { width, height, top, left };
+}
+exports.useItemArea = useItemArea;

package/lib/components/items/useItemPointerEvents.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemPointerEvents = void 0;
+const react_1 = require("react");
+function useItemPointerEvents(isParentVisible) {
+    const [allowPointerEvents, setAllowPointerEvents] = (0, react_1.useState)(isParentVisible);
+    const handleVisibilityChange = (0, react_1.useCallback)((isVisible) => {
+        if (!isParentVisible)
+            return;
+        setAllowPointerEvents(isVisible);
+    }, [isParentVisible]);
+    return { allowPointerEvents, handleVisibilityChange };
+}
+exports.useItemPointerEvents = useItemPointerEvents;

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/components/items/useItemTriggers.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemTriggers = void 0;
+function useItemTriggers(interactionCtrl) {
+    return {
+        onClick: () => {
+            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('click');
+        },
+        onMouseEnter: () => {
+            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('hover-in');
+        },
+        onMouseLeave: () => {
+            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('hover-out');
+        }
+    };
+}
+exports.useItemTriggers = useItemTriggers;

package/lib/components/items/useSizing.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseSizing = exports.useSizing = void 0;
+const isItemType_1 = require("../../utils/isItemType");
+const sdk_1 = require("@cntrl-site/sdk");
+const useLayoutContext_1 = require("../useLayoutContext");
+function useSizing(item) {
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const sizing = layout && (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText)
+        ? item.layoutParams[layout].sizing
+        : undefined;
+    const sizingAxis = parseSizing(sizing);
+    return sizingAxis;
+}
+exports.useSizing = useSizing;
+function parseSizing(sizing = 'manual') {
+    const axisSizing = sizing.split(' ');
+    return {
+        y: axisSizing[0],
+        x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
+    };
+}
+exports.parseSizing = parseSizing;

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,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.1.5",
+  "version": "1.2.1",
   "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.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",

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';