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

package/lib/components/Article.js

@@ -7,8 +7,8 @@ exports.Article = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
-const Section_1 = require("./Section");
-const Item_1 = require("./Item");
+const Section_1 = require("./Section/Section");
+const Item_1 = require("./items/Item");
 const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
 const ArticleWrapper_1 = require("./ArticleWrapper");

package/lib/components/{Section.js → Section/Section.js}

@@ -8,8 +8,8 @@ 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 useCntrlContext_1 = require("../provider/useCntrlContext");
-const useSectionRegistry_1 = require("../utils/ArticleRectManager/useSectionRegistry");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useSectionRegistry_1 = require("../../utils/ArticleRectManager/useSectionRegistry");
 const color_1 = require("@cntrl-site/color");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 const Section = ({ section, data, children }) => {

package/lib/components/{useSectionHeightMap.js → Section/useSectionHeightMap.js}

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSectionHeightMap = exports.useSectionHeightData = void 0;
 const react_1 = require("react");
-const CntrlContext_1 = require("../provider/CntrlContext");
+const CntrlContext_1 = require("../../provider/CntrlContext");
 const Section_1 = require("./Section");
 const useSectionHeightData = (sectionId) => {
     const sectionHeightContext = (0, react_1.useContext)(CntrlContext_1.CntrlContext);

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

@@ -7,9 +7,9 @@ exports.CodeEmbedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
 const react_1 = require("react");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const style_1 = __importDefault(require("styled-jsx/style"));
-const useRegisterResize_1 = require("../../common/useRegisterResize");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const useItemAngle_1 = require("../useItemAngle");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useCodeEmbedItem_1 = require("./useCodeEmbedItem");

package/lib/components/items/{useCodeEmbedItem.js → CodeEmbedItem/useCodeEmbedItem.js}

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeEmbedItem = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
-const useLayoutContext_1 = require("../useLayoutContext");
-const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
 const useCodeEmbedItem = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {

package/lib/components/items/CompoundItem/CompoundChild.js

@@ -0,0 +1,115 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompoundChild = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const useExemplary_1 = require("../../../common/useExemplary");
+const useItemScale_1 = require("../useItemScale");
+const useItemInteractionCtrl_1 = require("../../../interactions/useItemInteractionCtrl");
+const useItemPosition_1 = require("../useItemPosition");
+const useItemDimensions_1 = require("../useItemDimensions");
+const sdk_1 = require("@cntrl-site/sdk");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const ScaleAnchorMap_1 = require("../../../utils/ScaleAnchorMap");
+const isItemType_1 = require("../../../utils/isItemType");
+const RichTextWrapper_1 = require("../RichTextWrapper");
+const itemsMap_1 = require("../itemsMap");
+const getCompoundBondaryStyles_1 = require("../../../utils/getCompoundBondaryStyles");
+const noop = () => null;
+const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const id = (0, react_1.useId)();
+    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 itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
+    const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
+    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, {
+        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,
+    });
+    const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
+    const dimensions = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
+    const isInitialRef = (0, react_1.useRef)(true);
+    const sizing = layout && (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText)
+        ? item.layoutParams[layout].sizing
+        : undefined;
+    const sizingAxis = parseSizing(sizing);
+    const ItemComponent = itemsMap_1.itemsMap[item.type] || noop;
+    const handleVisibilityChange = (0, react_1.useCallback)((isVisible) => {
+        if (!isParentVisible)
+            return;
+        setAllowPointerEvents(isVisible);
+    }, [isParentVisible]);
+    (0, react_1.useEffect)(() => {
+        isInitialRef.current = false;
+    }, []);
+    const transformOrigin = compoundSettings ? ScaleAnchorMap_1.ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
+    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 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;
+    if (!item.compoundSettings)
+        return null;
+    const layoutValues = [item.area, item.hidden, item.compoundSettings];
+    if (item.layoutParams) {
+        layoutValues.push(item.layoutParams);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-${item.id}`, 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(Object.assign({}, (position && compoundSettings ? { top: (0, getCompoundBondaryStyles_1.getCompoundTop)(compoundSettings, position.top) } : {})), (position && compoundSettings ? { left: (0, getCompoundBondaryStyles_1.getCompoundLeft)(compoundSettings, position.left) } : {})), (width && compoundSettings
+            ? { width: `${sizingAxis.x === 'manual'
+                    ? (0, getCompoundBondaryStyles_1.getCompoundWidth)(compoundSettings, width, isRichText, exemplary)
+                    : 'max-content'}` }
+            : {})), (height && compoundSettings
+            ? { height: `${sizingAxis.y === 'manual'
+                    ? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
+                    : 'unset'}` }
+            : {})), (scale && compoundSettings ? { transform: `scale(${scale}) ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }), 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');
+        }, children: [(0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
+                    const sizingAxis = parseSizing(layoutParams.sizing);
+                    const scaleAnchor = area.scaleAnchor;
+                    return (`
+            .item-${item.id} {
+              position: absolute;
+              top: ${(0, getCompoundBondaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
+              left: ${(0, getCompoundBondaryStyles_1.getCompoundLeft)(compoundSettings, area.left)};
+              transition: opacity 0.2s linear 0.1s;
+              display: ${hidden ? 'none' : 'block'};
+              width: ${sizingAxis.x === 'manual'
+                        ? `${(0, getCompoundBondaryStyles_1.getCompoundWidth)(compoundSettings, area.width, isRichText)}`
+                        : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale}) ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)};
+              z-index: ${area.zIndex};
+            }
+          `);
+                })}
+      ` })] }));
+};
+exports.CompoundChild = CompoundChild;
+function parseSizing(sizing = 'manual') {
+    const axisSizing = sizing.split(' ');
+    return {
+        y: axisSizing[0],
+        x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
+    };
+}

package/lib/components/items/CompoundItem/CompoundItem.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompoundItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useItemAngle_1 = require("../useItemAngle");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const LinkWrapper_1 = require("../LinkWrapper");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const sdk_1 = require("@cntrl-site/sdk");
+const CompoundChild_1 = require("./CompoundChild");
+const useCompoundItem_1 = require("./useCompoundItem");
+const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e;
+    const id = (0, react_1.useId)();
+    const { items } = item;
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { opacity: itemOpacity } = (0, useCompoundItem_1.useCompoundItem)(item, sectionId);
+    const layoutValues = [item.area, item.layoutParams];
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
+    const isInteractive = opacity !== 0 && opacity !== undefined;
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .compound-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        }
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                        return (`
+            .compound-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+            }
+          `);
+                    })}
+      ` })] }) }));
+};
+exports.CompoundItem = CompoundItem;

package/lib/components/items/CompoundItem/useCompoundItem.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCompoundItem = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
+function useCompoundItem(item, sectionId) {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.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 };
+}
+exports.useCompoundItem = useCompoundItem;

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

@@ -7,9 +7,9 @@ exports.CustomItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
 const react_1 = require("react");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const style_1 = __importDefault(require("styled-jsx/style"));
-const useRegisterResize_1 = require("../../common/useRegisterResize");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const useItemAngle_1 = require("../useItemAngle");
 const CustomItem = ({ item, onResize, sectionId, interactionCtrl }) => {
     var _a, _b, _c;

package/lib/components/items/{VimeoEmbed.js → EmbedVideoItem/VimeoEmbed.js}

@@ -21,9 +21,9 @@ const LinkWrapper_1 = require("../LinkWrapper");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
-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 VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
@@ -61,7 +61,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
     (0, react_1.useEffect)(() => {
         if (!vimeoPlayer || !imgRef)
             return;
-        if (play === 'on-click') {
+        if (play === 'on-click' && !controls) {
             setIsCoverVisible(true);
         }
         vimeoPlayer.on('pause', (e) => {

package/lib/components/items/{YoutubeEmbed.js → EmbedVideoItem/YoutubeEmbed.js}

@@ -8,14 +8,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const LinkWrapper_1 = require("../LinkWrapper");
-const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
+const getValidYoutubeUrl_1 = require("../../../utils/getValidYoutubeUrl");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
-const useRegisterResize_1 = require("../../common/useRegisterResize");
-const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useYouTubeIframeApi_1 = require("../../../utils/Youtube/useYouTubeIframeApi");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();

package/lib/components/items/{useEmbedVideoItem.js → EmbedVideoItem/useEmbedVideoItem.js}

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEmbedVideoItem = 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 useEmbedVideoItem = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {

package/lib/components/items/{ImageItem.js → FileItem/ImageItem.js}

@@ -12,12 +12,12 @@ const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const useRegisterResize_1 = require("../../common/useRegisterResize");
-const useImageFx_1 = require("../../utils/effects/useImageFx");
-const useElementRect_1 = require("../../utils/useElementRect");
-const useLayoutContext_1 = require("../useLayoutContext");
-const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const useImageFx_1 = require("../../../utils/effects/useImageFx");
+const useElementRect_1 = require("../../../utils/useElementRect");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const baseVariables = `precision mediump float;
 uniform sampler2D u_image;
 uniform sampler2D u_pattern;

package/lib/components/items/{VideoItem.js → FileItem/VideoItem.js}

@@ -12,11 +12,11 @@ const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const useRegisterResize_1 = require("../../common/useRegisterResize");
-const useLayoutContext_1 = require("../useLayoutContext");
-const ScrollPlaybackVideo_1 = require("../ScrollPlaybackVideo");
-const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const ScrollPlaybackVideo_1 = require("../../ScrollPlaybackVideo");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const id = (0, react_1.useId)();

package/lib/components/items/{useFileItem.js → FileItem/useFileItem.js}

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

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

@@ -10,12 +10,12 @@ const Item_1 = require("../Item");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
-const useRegisterResize_1 = require("../../common/useRegisterResize");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const useItemAngle_1 = require("../useItemAngle");
 const useGroupItem_1 = require("./useGroupItem");
-const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
-const GroupItem = ({ item, sectionId, onResize, articleHeight, interactionCtrl, onVisibilityChange }) => {
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e;
     const id = (0, react_1.useId)();
     const { items } = item;
@@ -32,7 +32,7 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight, interactionCtrl,
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;

package/lib/components/items/{useGroupItem.js → GroupItem/useGroupItem.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGroupItem = void 0;
-const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
 const sdk_1 = require("@cntrl-site/sdk");
-const useLayoutContext_1 = require("../useLayoutContext");
+const useLayoutContext_1 = require("../../useLayoutContext");
 function useGroupItem(item, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {

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