@cntrl-site/sdk-nextjs 1.2.0 → 1.2.2

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.idea/inspectionProfiles/Project_Default.xml

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

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import antfu from '@antfu/eslint-config';
+
+export default antfu(
+  {
+    ignores: [],
+  },
+  {
+    rules: {
+      'import/order': 'off',
+      'style/semi': 'off',
+      'antfu/if-newline': 'off',
+      'style/comma-dangle': 'off',
+      'style/member-delimiter-style': 'off',
+      'semi': ['error', 'always'],
+      'no-alert': 'off',
+    },
+  },
+);

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

@@ -11,8 +11,6 @@ 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");
@@ -20,55 +18,50 @@ const isItemType_1 = require("../../../utils/isItemType");
 const RichTextWrapper_1 = require("../RichTextWrapper");
 const itemsMap_1 = require("../itemsMap");
 const getCompoundBondaryStyles_1 = require("../../../utils/getCompoundBondaryStyles");
+const useItemTriggers_1 = require("../useItemTriggers");
+const useSizing_1 = require("../useSizing");
+const useItemPointerEvents_1 = require("../useItemPointerEvents");
+const useItemArea_1 = require("../useItemArea");
 const noop = () => null;
 const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     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 { handleVisibilityChange, allowPointerEvents } = (0, useItemPointerEvents_1.useItemPointerEvents)(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 triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
+    const stateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left', 'width', 'height', 'scale']);
     const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
-    const dimensions = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
+    const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
+        top: (_a = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _a === void 0 ? void 0 : _a.top,
+        left: (_b = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _b === void 0 ? void 0 : _b.left,
+        width: (_c = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _c === void 0 ? void 0 : _c.width,
+        height: (_d = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _d === void 0 ? void 0 : _d.height
+    });
     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 sizingAxis = (0, useSizing_1.useSizing)(item);
     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;
+    const scale = (_f = (_e = stateProps === null || stateProps === void 0 ? void 0 : stateProps.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;
     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) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ 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
+        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top && compoundSettings ? { top: (0, getCompoundBondaryStyles_1.getCompoundTop)(compoundSettings, top) } : {})), (left && compoundSettings ? { left: (0, getCompoundBondaryStyles_1.getCompoundLeft)(compoundSettings, left) } : {})), (width && compoundSettings
             ? { width: `${sizingAxis.x === 'manual'
                     ? (0, getCompoundBondaryStyles_1.getCompoundWidth)(compoundSettings, width, isRichText, exemplary)
                     : 'max-content'}` }
@@ -76,15 +69,9 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
             ? { 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: `
+            : {})), (scale && compoundSettings ? { transform: `scale(${scale}) ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_h = stateProps === null || stateProps === void 0 ? void 0 : stateProps.transition) !== null && _h !== void 0 ? _h : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { 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 sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const scaleAnchor = area.scaleAnchor;
                     return (`
             .item-${item.id} {
@@ -103,13 +90,6 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
             }
           `);
                 })}
-      ` })] }));
+      ` })] })));
 };
 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/EmbedVideoItem/VimeoEmbed.js

@@ -14,16 +14,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VimeoEmbedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const sdk_1 = require("@cntrl-site/sdk");
 const player_1 = __importDefault(require("@vimeo/player"));
+const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
-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 useEmbedVideoItem_1 = require("./useEmbedVideoItem");
+const LinkWrapper_1 = require("../LinkWrapper");
 const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
@@ -48,7 +48,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
         const validURL = new URL(url);
         validURL.searchParams.append('controls', String(controls));
         validURL.searchParams.append('autoplay', String(play === 'auto'));
-        validURL.searchParams.append('muted', String(play !== 'on-click' ? true : muted));
+        validURL.searchParams.append('muted', String(muted));
         validURL.searchParams.append('loop', String(loop));
         validURL.searchParams.append('pip', String(pictureInPicture));
         validURL.searchParams.append('title', '0');
@@ -61,7 +61,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
     (0, react_1.useEffect)(() => {
         if (!vimeoPlayer || !imgRef)
             return;
-        if (play === 'on-click' && !controls) {
+        if (play === 'on-click') {
             setIsCoverVisible(true);
         }
         vimeoPlayer.on('pause', (e) => {
@@ -69,6 +69,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                 setIsCoverVisible(true);
             }
         });
+        vimeoPlayer.on('ended', () => {
+            setIsCoverVisible(true);
+        });
     }, [vimeoPlayer, imgRef]);
     const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!vimeoPlayer)
@@ -91,7 +94,10 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
     const isInteractive = opacity !== 0;
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
-    }, [isInteractive, onVisibilityChange]);
+        if (!isInteractive && vimeoPlayer) {
+            vimeoPlayer.pause();
+        }
+    }, [isInteractive, onVisibilityChange, vimeoPlayer]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
@@ -109,13 +115,13 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, alt: "Cover img" })), (!item.commonParams.controls && play === 'on-click') && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
+                        }, alt: "Cover img" })), (!item.commonParams.controls && (play === 'on-click' || play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
                             position: 'absolute',
                             height: '100%',
                             width: '100%',
                             top: '0',
                             left: '0'
-                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: `embed-video`, src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;
         width: 100%;

package/lib/components/items/Item.js

@@ -9,8 +9,6 @@ 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 useItemPosition_1 = require("./useItemPosition");
-const useItemDimensions_1 = require("./useItemDimensions");
 const useItemScale_1 = require("./useItemScale");
 const ScaleAnchorMap_1 = require("../../utils/ScaleAnchorMap");
 const useSectionHeightMap_1 = require("../Section/useSectionHeightMap");
@@ -25,13 +23,17 @@ const useItemInteractionCtrl_1 = require("../../interactions/useItemInteractionC
 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 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);
@@ -41,31 +43,29 @@ 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 && (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText)
-        ? item.layoutParams[layout].sizing
-        : undefined;
-    const sizingAxis = parseSizing(sizing);
+    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) => {
@@ -85,46 +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 = (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;
+    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: 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: {
+        }, 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_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');
-                        }, 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 (`
@@ -158,10 +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]
-    };
-}

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/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/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "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": {
@@ -10,17 +20,15 @@
     "build": "tsc --project tsconfig.build.json",
     "prepublishOnly": "NODE_ENV=production npm run build"
   },
-  "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"
+  "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"
   },
-  "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.14.0",
@@ -30,13 +38,6 @@
     "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/items/CompoundItem/CompoundChild.tsx

@@ -1,18 +1,14 @@
 import React, {
   FC,
-  useCallback,
   useEffect,
   useId,
   useRef,
-  useState
 } from 'react';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useLayoutContext } from '../../useLayoutContext';
 import { useExemplary } from '../../../common/useExemplary';
 import { useItemScale } from '../useItemScale';
 import { useItemInteractionCtrl } from '../../../interactions/useItemInteractionCtrl';
-import { useItemPosition } from '../useItemPosition';
-import { useItemDimensions } from '../useItemDimensions';
 import { ArticleItemType, getLayoutStyles, ItemAny, AreaAnchor } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ScaleAnchorMap } from '../../../utils/ScaleAnchorMap';
@@ -25,6 +21,10 @@ import {
   getCompoundTop, getCompoundTransform,
   getCompoundWidth
 } from '../../../utils/getCompoundBondaryStyles';
+import { useItemTriggers } from '../useItemTriggers';
+import { parseSizing, useSizing } from '../useSizing';
+import { useItemPointerEvents } from '../useItemPointerEvents';
+import { useItemArea } from '../useItemArea';
 
 interface ChildItemProps {
   item: ItemAny;
@@ -39,27 +39,21 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
   const exemplary = useExemplary();
-  const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(isParentVisible);
+  const { handleVisibilityChange, allowPointerEvents } = useItemPointerEvents(isParentVisible);
   const itemScale = useItemScale(item, sectionId);
   const interactionCtrl = useItemInteractionCtrl(item.id);
-  const wrapperStateProps = interactionCtrl?.getState(['top', 'left']);
-  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale']);
-  const position = useItemPosition(item, sectionId, {
-    top: wrapperStateProps?.styles?.top as number,
-    left: wrapperStateProps?.styles?.left as number,
-  });
+  const triggers = useItemTriggers(interactionCtrl);
+  const stateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height', 'scale']);
   const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
-  const dimensions = useItemDimensions(item, sectionId);
+  const { width, height, top, left } = useItemArea(item, sectionId, {
+    top: stateProps?.styles?.top as number,
+    left: stateProps?.styles?.left as number,
+    width: stateProps?.styles?.width as number,
+    height: stateProps?.styles?.height as number
+  });
   const isInitialRef = useRef(true);
-  const sizing = layout && isItemType(item, ArticleItemType.RichText)
-    ? item.layoutParams[layout].sizing
-    : undefined;
-  const sizingAxis = parseSizing(sizing);
+  const sizingAxis = useSizing(item);
   const ItemComponent = itemsMap[item.type] || noop;
-  const handleVisibilityChange = useCallback((isVisible: boolean) => {
-    if (!isParentVisible) return;
-    setAllowPointerEvents(isVisible);
-  }, [isParentVisible]);
 
   useEffect(() => {
     isInitialRef.current = false;
@@ -67,9 +61,7 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
 
   const transformOrigin = compoundSettings ? ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
   const isRichText = isItemType(item, ArticleItemType.RichText);
-  const width = (innerStateProps?.styles?.width ?? dimensions?.width) as number | undefined;
-  const height = (innerStateProps?.styles?.height ?? dimensions?.height) as number | undefined;
-  const scale = innerStateProps?.styles?.scale ?? itemScale;
+  const scale = stateProps?.styles?.scale ?? itemScale;
   const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
   if (!item.compoundSettings) return null;
   const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.compoundSettings];
@@ -84,8 +76,8 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
         interactionCtrl?.handleTransitionEnd?.(e.propertyName);
       }}
       style={{
-        ...(position && compoundSettings ? { top: getCompoundTop(compoundSettings, position.top) } : {}),
-        ...(position && compoundSettings ? { left: getCompoundLeft(compoundSettings, position.left) } : {}),
+        ...(top && compoundSettings ? { top: getCompoundTop(compoundSettings, top) } : {}),
+        ...(left && compoundSettings ? { left: getCompoundLeft(compoundSettings, left) } : {}),
         ...(width && compoundSettings
           ? { width: `${sizingAxis.x === 'manual' 
               ? getCompoundWidth(compoundSettings, width, isRichText, exemplary) 
@@ -97,19 +89,11 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
               : 'unset'}` }
           : {}),
         ...(scale && compoundSettings ? { transform: `scale(${scale}) ${getCompoundTransform(compoundSettings)}` } : {}),
-        transition: innerStateProps?.transition ?? 'none',
+        transition: stateProps?.transition ?? 'none',
         cursor: hasClickTriggers ? 'pointer' : 'unset',
         pointerEvents: allowPointerEvents ? 'auto' : 'none'
       }}
-      onClick={() => {
-        interactionCtrl?.sendTrigger('click');
-      }}
-      onMouseEnter={() => {
-        interactionCtrl?.sendTrigger('hover-in');
-      }}
-      onMouseLeave={() => {
-        interactionCtrl?.sendTrigger('hover-out');
-      }}
+      {...triggers}
     >
       <RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
         <ItemComponent
@@ -144,17 +128,3 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
     </div>
   );
 };
-
-
-function parseSizing(sizing: string = 'manual'): Axis {
-  const axisSizing = sizing.split(' ');
-  return {
-    y: axisSizing[0],
-    x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
-  } as Axis;
-}
-
-interface Axis {
-  x: 'manual' | 'auto';
-  y: 'manual' | 'auto';
-}

package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx

@@ -1,14 +1,16 @@
-import { FC, useEffect, useId, useMemo, useState } from 'react';
+import type { VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
+import { getLayoutStyles } from '@cntrl-site/sdk';
+import type { FC } from 'react';
+import type { ItemProps } from '../Item';
 import Player from '@vimeo/player';
+import { useEffect, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { ItemProps } from '../Item';
-import { LinkWrapper } from '../LinkWrapper';
-import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
-import { getLayoutStyles, VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useRegisterResize } from "../../../common/useRegisterResize";
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { useEmbedVideoItem } from './useEmbedVideoItem';
+import { LinkWrapper } from '../LinkWrapper';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -37,7 +39,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));
     validURL.searchParams.append('autoplay', String(play === 'auto'));
-    validURL.searchParams.append('muted', String(play !== 'on-click' ? true : muted));
+    validURL.searchParams.append('muted', String(muted));
     validURL.searchParams.append('loop', String(loop));
     validURL.searchParams.append('pip', String(pictureInPicture));
     validURL.searchParams.append('title', '0');
@@ -46,12 +48,12 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     validURL.searchParams.append('autopause', 'false');
 
     return validURL.href;
-  }
+  };
   const validUrl = getValidVimeoUrl(url);
 
   useEffect(() => {
     if (!vimeoPlayer || !imgRef) return;
-    if (play === 'on-click' && !controls) {
+    if (play === 'on-click') {
       setIsCoverVisible(true);
     }
     vimeoPlayer.on('pause', (e) => {
@@ -59,6 +61,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         setIsCoverVisible(true);
       }
     });
+    vimeoPlayer.on('ended', () => {
+      setIsCoverVisible(true);
+    });
   }, [vimeoPlayer, imgRef]);
 
   const handleClick = async () => {
@@ -67,7 +72,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     if (isPaused) {
       vimeoPlayer.play();
       setIsCoverVisible(false);
-    } else {
+    }
+    else {
       vimeoPlayer.pause();
     }
   };
@@ -77,10 +83,14 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     vimeoPlayer!.play();
     setIsCoverVisible(false);
   };
+
   const isInteractive = opacity !== 0;
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
-  }, [isInteractive, onVisibilityChange]);
+    if (!isInteractive && vimeoPlayer) {
+      vimeoPlayer.pause();
+    }
+  }, [isInteractive, onVisibilityChange, vimeoPlayer]);
 
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
@@ -97,7 +107,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
           if (!vimeoPlayer || play !== 'on-hover') return;
           vimeoPlayer.play();
         }}
-        onMouseLeave={() =>{
+        onMouseLeave={() => {
           if (!vimeoPlayer || play !== 'on-hover') return;
           vimeoPlayer.pause();
         }}
@@ -121,7 +131,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
           />
         )}
         {/* ↓ This is necessary to track clicks on an iframe. */}
-        {(!item.commonParams.controls && play === 'on-click') && (
+        {(!item.commonParams.controls && (play === 'on-click' || play === 'auto')) && (
           <div
             onClick={handleClick}
             style={{
@@ -135,17 +145,18 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         )}
         <iframe
           ref={setIframeRef}
-          className={`embed-video`}
+          className="embed-video"
           src={validUrl || ''}
           allow="autoplay; fullscreen; picture-in-picture;"
           allowFullScreen
           style={{
-            ...(radius !== undefined  ? { borderRadius: `${radius * 100}vw` } : {}),
+            ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
             transition: frameStateParams?.transition ?? 'none'
           }}
         />
       </div>
-      <JSXStyle id={id}>{`
+      <JSXStyle id={id}>
+        {`
       .embed-video-wrapper-${item.id} {
         position: absolute;
         width: 100%;
@@ -159,7 +170,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         overflow: hidden;
       }
       ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-        return (`
+      return (`
           .embed-video-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
@@ -169,8 +180,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
             border-radius: ${layoutParams.radius * 100}vw;
           }
         `);
-      })}
-    `}</JSXStyle>
+    })}
+    `}
+      </JSXStyle>
     </LinkWrapper>
   );
 };

package/src/components/items/Item.tsx

@@ -1,8 +1,6 @@
 import React, {
   FC,
-  useCallback,
   useContext,
-  useEffect,
   useId,
   useMemo,
   useRef,
@@ -17,8 +15,6 @@ import {
   PositionType
 } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useItemPosition } from './useItemPosition';
-import { useItemDimensions } from './useItemDimensions';
 import { useItemScale } from './useItemScale';
 import { ScaleAnchorMap } from '../../utils/ScaleAnchorMap';
 import { useSectionHeightData } from '../Section/useSectionHeightMap';
@@ -34,6 +30,10 @@ import { useItemInteractionCtrl } from '../../interactions/useItemInteractionCtr
 import { isItemType } from '../../utils/isItemType';
 import { RichTextWrapper } from './RichTextWrapper';
 import { itemsMap } from './itemsMap';
+import { useItemTriggers } from './useItemTriggers';
+import { parseSizing, useSizing } from './useSizing';
+import { useItemPointerEvents } from './useItemPointerEvents';
+import { useItemArea } from './useItemArea';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
@@ -69,31 +69,29 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
   const exemplary = useExemplary();
-  const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(isParentVisible);
+  const { handleVisibilityChange, allowPointerEvents } = useItemPointerEvents(isParentVisible);
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
   const itemScale = useItemScale(item, sectionId);
   const interactionCtrl = useItemInteractionCtrl(item.id);
+  const triggers = useItemTriggers(interactionCtrl);
   const wrapperStateProps = interactionCtrl?.getState(['top', 'left']);
-  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale']);
-  const position = useItemPosition(item, sectionId, {
+  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale', 'top', 'left']);
+  const { width, height, top, left } = useItemArea(item, sectionId, {
     top: wrapperStateProps?.styles?.top as number,
     left: wrapperStateProps?.styles?.left as number,
+    width: innerStateProps?.styles?.width as number,
+    height: innerStateProps?.styles?.height as number
   });
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
-  const dimensions = useItemDimensions(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.hidden];
-  const isInitialRef = useRef(true);
   layoutValues.push(item.sticky);
   layoutValues.push(sectionHeight);
   if (item.layoutParams) {
     layoutValues.push(item.layoutParams);
   }
-  const sizing = layout && isItemType(item, ArticleItemType.RichText)
-    ? item.layoutParams[layout].sizing
-    : undefined;
-  const sizingAxis = parseSizing(sizing);
+  const sizingAxis = useSizing(item);
   const ItemComponent = itemsMap[item.type] || noop;
   const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
 
@@ -114,18 +112,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
     setWrapperHeight(wrapperHeight);
   };
 
-  const handleVisibilityChange = useCallback((isVisible: boolean) => {
-    if (!isParentVisible) return;
-    setAllowPointerEvents(isVisible);
-  }, [isParentVisible]);
-
-  useEffect(() => {
-    isInitialRef.current = false;
-  }, []);
-
   const isRichText = isItemType(item, ArticleItemType.RichText);
-  const width = (innerStateProps?.styles?.width ?? dimensions?.width) as number | undefined;
-  const height = (innerStateProps?.styles?.height ?? dimensions?.height) as number | undefined;
   const anchorSide = layout ? item.area[layout].anchorSide : AnchorSide.Top;
   const positionType = layout ? item.area[layout].positionType : PositionType.ScreenBased;
   const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
@@ -140,9 +127,9 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
         interactionCtrl?.handleTransitionEnd?.(e.propertyName);
       }}
       style={{
-        ...(position ? { top: isScreenBasedBottom ? 'unset' : getItemTopStyle(position.top, anchorSide) } : {}),
-        ...(position ? { left: `${position.left * 100}vw` } : {}),
-        ...(position ? { bottom: isScreenBasedBottom ? `${-position.top * 100}vw` : 'unset' } : {}),
+        ...(top ? { top: isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide) } : {}),
+        ...(left ? { left: `${left * 100}vw` } : {}),
+        ...(top ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {}),
         ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}),
         transition: wrapperStateProps?.transition ?? 'none'
       }}
@@ -160,15 +147,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
           <div
             className={`item-${item.id}-inner`}
             ref={itemInnerRef}
-            onClick={() => {
-              interactionCtrl?.sendTrigger('click');
-            }}
-            onMouseEnter={() => {
-              interactionCtrl?.sendTrigger('hover-in');
-            }}
-            onMouseLeave={() => {
-              interactionCtrl?.sendTrigger('hover-out');
-            }}
             style={{
               ...((width && height) ? {
                 width: `${sizingAxis.x === 'manual'
@@ -182,6 +160,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
               cursor: hasClickTriggers ? 'pointer' : 'unset',
               pointerEvents: allowPointerEvents ? 'auto' : 'none'
             }}
+            {...triggers}
           >
             <ItemComponent
               item={item}
@@ -231,16 +210,3 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
     </div>
   );
 };
-
-function parseSizing(sizing: string = 'manual'): Axis {
-  const axisSizing = sizing.split(' ');
-  return {
-    y: axisSizing[0],
-    x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
-  } as Axis;
-}
-
-interface Axis {
-  x: 'manual' | 'auto';
-  y: 'manual' | 'auto';
-}

package/src/components/items/useItemArea.ts

@@ -0,0 +1,35 @@
+import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../useLayoutContext';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+
+export function useItemArea(
+  item: ItemAny,
+  sectionId: string,
+  stateValues: { top?: number; left?: number; width?: number; height?: number }
+) {
+  const layoutId = useLayoutContext();
+  const position = useKeyframeValue<{ top: number; left: number } | undefined>(
+    item,
+    KeyframeType.Position,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      return item.area[layoutId]
+    },
+    (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined,
+    sectionId,
+    [layoutId]
+  );
+  const dimensions = useKeyframeValue<{ width: number; height: number } | undefined>(
+    item,
+    KeyframeType.Dimensions,
+    (item, layoutId) => layoutId ? item.area[layoutId] : undefined,
+    (animator, scroll, value) => value ? animator.getDimensions(value, scroll) : undefined,
+    sectionId,
+    [layoutId]
+  );
+  const width = (stateValues.width ?? dimensions?.width) as number | undefined;
+  const height = (stateValues.height ?? dimensions?.height) as number | undefined;
+  const top = (stateValues.top ?? position?.top) as number | undefined;
+  const left = (stateValues.left ?? position?.left) as number | undefined;
+  return { width, height, top, left };
+}

package/src/components/items/useItemPointerEvents.ts

@@ -0,0 +1,10 @@
+import { useCallback, useState } from 'react';
+
+export function useItemPointerEvents(isParentVisible: boolean) {
+  const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(isParentVisible);
+  const handleVisibilityChange = useCallback((isVisible: boolean) => {
+    if (!isParentVisible) return;
+    setAllowPointerEvents(isVisible);
+  }, [isParentVisible]);
+  return { allowPointerEvents, handleVisibilityChange };
+}

package/src/components/items/useItemTriggers.ts

@@ -0,0 +1,15 @@
+import { ItemInteractionCtrl } from '../../interactions/types';
+
+export function useItemTriggers(interactionCtrl: ItemInteractionCtrl | undefined) {
+  return {
+    onClick: () => {
+      interactionCtrl?.sendTrigger('click');
+    },
+    onMouseEnter: () => {
+      interactionCtrl?.sendTrigger('hover-in');
+    },
+    onMouseLeave: () => {
+      interactionCtrl?.sendTrigger('hover-out');
+    }
+  };
+}

package/src/components/items/useSizing.ts

@@ -0,0 +1,25 @@
+import { isItemType } from '../../utils/isItemType';
+import { ArticleItemType, ItemAny } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../useLayoutContext';
+
+export function useSizing(item: ItemAny) {
+  const layout = useLayoutContext();
+  const sizing = layout && isItemType(item, ArticleItemType.RichText)
+    ? item.layoutParams[layout].sizing
+    : undefined;
+  const sizingAxis = parseSizing(sizing);
+  return sizingAxis;
+}
+
+export function parseSizing(sizing: string = 'manual'): Axis {
+  const axisSizing = sizing.split(' ');
+  return {
+    y: axisSizing[0],
+    x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
+  } as Axis;
+}
+
+interface Axis {
+  x: 'manual' | 'auto';
+  y: 'manual' | 'auto';
+}

package/lib/components/items/useItemDimensions.js

@@ -1,12 +0,0 @@
-"use strict";
-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 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]);
-    return dimensions;
-};
-exports.useItemDimensions = useItemDimensions;

package/lib/components/items/useItemPosition.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useItemPosition = void 0;
-const sdk_1 = require("@cntrl-site/sdk");
-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)();
-    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]);
-    // to prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
-    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 ? {
-        top,
-        left
-    } : undefined;
-};
-exports.useItemPosition = useItemPosition;

package/src/components/items/useItemDimensions.ts

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

package/src/components/items/useItemPosition.ts

@@ -1,34 +0,0 @@
-import { AnchorSide, ItemAny, KeyframeType, PositionType } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { getItemTopStyle } from '../../utils/getItemTopStyle';
-import { useLayoutContext } from '../useLayoutContext';
-
-export const useItemPosition = (
-  item: ItemAny,
-  sectionId: string,
-  stateValues: { top?: number; left?: number; }
-) => {
-  const layoutId = useLayoutContext();
-  const position = useKeyframeValue<{ top: number; left: number } | undefined>(
-    item,
-    KeyframeType.Position,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      return item.area[layoutId]
-    },
-    (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined,
-    sectionId,
-    [layoutId]
-  );
-  // to prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
-  if (!position) return undefined;
-  const top = stateValues?.top ?? position.top;
-  const left = stateValues?.left ?? position.left;
-  return position ? {
-    top,
-    left
-  } : undefined;
-
-};
-
-