@gxpl/sdk 0.0.8 → 0.0.9

package/lib/sdk-nextjs/components/items/ComponentItem/ComponentItem.js

@@ -12,16 +12,11 @@ const useComponentItem_1 = require("./useComponentItem");
 const useItemAngle_1 = require("../useItemAngle");
 const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
-const useLayoutContext_1 = require("../../useLayoutContext");
-const utils_1 = require("../../../../utils");
 const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     var _a, _b, _c, _d;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
-    const { layouts } = sdk;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const layout = (0, useLayoutContext_1.useLayoutContext)();
-    const layoutValues = [item.area, item.layoutParams];
-    const component = sdk.getComponent(item.commonParams.componentId);
+    const component = sdk.getComponent(item.params.componentId);
     const [ref, setRef] = (0, react_1.useState)(null);
     const { opacity: itemOpacity, blur: itemBlur } = (0, useComponentItem_1.useComponentItem)(item, sectionId);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
@@ -30,22 +25,17 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     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 blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
     const Element = component ? component.element : undefined;
-    const parameters = layout ? item.layoutParams[layout].parameters : undefined;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
-      .custom-component-${item.id} {
-        width: 100%;
-        height: 100%;
-        pointer-events: auto;
-      }
-      ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-          .custom-component-${item.id} {
-            transform: rotate(${area.angle}deg);
-            opacity: ${layoutParams.opacity};
-            filter: blur(${layoutParams.blur}vw);
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-        `);
-                })}` })] }));
+    const parameters = item.params.parameters;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.params.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
+        .custom-component-${item.id} {
+          width: 100%;
+          height: 100%;
+          pointer-events: auto;
+          transform: rotate(${item.area.angle}deg);
+          opacity: ${item.params.opacity};
+          filter: blur(${item.params.blur}vw);
+          ${item.params.blur !== 0 ? 'will-change: transform;' : ''}
+        }
+      ` })] }));
 };
 exports.ComponentItem = ComponentItem;

package/lib/sdk-nextjs/components/items/ComponentItem/useComponentItem.d.ts

@@ -1,5 +1,5 @@
 import { ComponentItem } from '../../../../sdk/types/article/Item';
 export declare function useComponentItem(item: ComponentItem, sectionId: string): {
-    opacity: number | undefined;
-    blur: number | undefined;
+    opacity: number;
+    blur: number;
 };

package/lib/sdk-nextjs/components/items/ComponentItem/useComponentItem.js

@@ -2,22 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useComponentItem = useComponentItem;
 const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
-const useLayoutContext_1 = require("../../useLayoutContext");
 const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
 function useComponentItem(item, sectionId) {
-    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_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]);
-    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item, layoutId) => {
-        if (!layoutId)
-            return;
-        const layoutParams = item.layoutParams[layoutId];
-        return 'blur' in layoutParams ? layoutParams.blur : 0;
-    }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Opacity, (item) => 'opacity' in item.params ? item.params.opacity : 1, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId);
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item) => 'blur' in item.params ? item.params.blur : 0, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId);
     return {
         opacity,
         blur

package/lib/sdk-nextjs/components/items/CompoundItem/CompoundChild.js

@@ -6,8 +6,6 @@ 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");
@@ -22,21 +20,18 @@ const useSizing_1 = require("../useSizing");
 const useItemPointerEvents_1 = require("../useItemPointerEvents");
 const useItemArea_1 = require("../useItemArea");
 const ArticleItemType_1 = require("../../../../sdk/types/article/ArticleItemType");
-const utils_1 = require("../../../../utils");
 const noop = () => null;
 const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     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 { handleVisibilityChange, allowPointerEvents } = (0, useItemPointerEvents_1.useItemPointerEvents)((_b = (_a = item.commonParams) === null || _a === void 0 ? void 0 : _a.pointerEvents) !== null && _b !== void 0 ? _b : 'when_visible', isParentVisible);
+    const { handleVisibilityChange, allowPointerEvents } = (0, useItemPointerEvents_1.useItemPointerEvents)((_b = (_a = item.params) === null || _a === void 0 ? void 0 : _a.pointerEvents) !== null && _b !== void 0 ? _b : 'when_visible', isParentVisible);
     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', 'width', 'height']);
     const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['scale']);
-    const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
+    const compoundSettings = item.compoundSettings;
     const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
         top: (_c = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _c === void 0 ? void 0 : _c.top,
         left: (_d = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _d === void 0 ? void 0 : _d.left,
@@ -53,50 +48,49 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
     const isRichText = (0, isItemType_1.isItemType)(item, ArticleItemType_1.ArticleItemType.RichText);
     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)
+    const scaleAnchor = item.area.scaleAnchor;
+    if (!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", 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({}, (top !== undefined && compoundSettings ? { top: (0, getCompoundBoundaryStyles_1.getCompoundTop)(compoundSettings, top) } : {})), (left !== undefined && compoundSettings ? { left: (0, getCompoundBoundaryStyles_1.getCompoundLeft)(compoundSettings, left) } : {})), (width !== undefined && compoundSettings
-            ? { width: `${sizingAxis.x === 'manual'
-                    ? (0, getCompoundBoundaryStyles_1.getCompoundWidth)(compoundSettings, width, isRichText, exemplary)
-                    : 'max-content'}` }
-            : {})), (height !== undefined && compoundSettings
-            ? { height: `${sizingAxis.y === 'manual'
-                    ? (0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, height)
-                    : 'unset'}` }
-            : {})), (compoundSettings ? { transform: `${(0, getCompoundBoundaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({ transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none' }, (scale !== undefined ? { transform: `scale(${scale})` } : {})), 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, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
-                    const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
-                    const scaleAnchor = area.scaleAnchor;
-                    return (`
-            .item-${item.id}-inner {
-              width: 100%;
-              height: 100%;
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
-              transform: scale(${area.scale});
-            }
-            .item-${item.id} {
-              position: absolute;
-              top: ${(0, getCompoundBoundaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
-              left: ${(0, getCompoundBoundaryStyles_1.getCompoundLeft)(compoundSettings, area.left)};
-              transition: opacity 0.2s linear 0.1s;
-              display: ${hidden ? 'none' : 'block'};
-              width: ${sizingAxis.x === 'manual'
-                        ? `${(0, getCompoundBoundaryStyles_1.getCompoundWidth)(compoundSettings, area.width, isRichText)}`
-                        : 'max-content'};
-              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
-              transform: ${(0, getCompoundBoundaryStyles_1.getCompoundTransform)(compoundSettings)};
-              z-index: ${area.zIndex};
-            }
-          `);
-                })}
+        }, style: {
+            top: (0, getCompoundBoundaryStyles_1.getCompoundTop)(compoundSettings, top),
+            left: (0, getCompoundBoundaryStyles_1.getCompoundLeft)(compoundSettings, left),
+            width: `${sizingAxis.x === 'manual'
+                ? (0, getCompoundBoundaryStyles_1.getCompoundWidth)(compoundSettings, width, isRichText, exemplary)
+                : 'max-content'}`,
+            height: `${sizingAxis.y === 'manual'
+                ? (0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, height)
+                : 'unset'}`,
+            transform: `${(0, getCompoundBoundaryStyles_1.getCompoundTransform)(compoundSettings)}`,
+            transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none',
+            cursor: hasClickTriggers ? 'pointer' : 'unset',
+            pointerEvents: allowPointerEvents ? 'auto' : 'none'
+        } }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
+                    transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none',
+                    transform: `scale(${scale})`,
+                }, 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, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .item-${item.id}-inner {
+          width: 100%;
+          height: 100%;
+          transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+          transform: scale(${item.area.scale});
+        }
+        .item-${item.id} {
+          position: absolute;
+          top: ${(0, getCompoundBoundaryStyles_1.getCompoundTop)(compoundSettings, item.area.top)};
+          left: ${(0, getCompoundBoundaryStyles_1.getCompoundLeft)(compoundSettings, item.area.left)};
+          transition: opacity 0.2s linear 0.1s;
+          display: ${item.hidden ? 'none' : 'block'};
+          width: ${sizingAxis.x === 'manual'
+                    ? `${(0, getCompoundBoundaryStyles_1.getCompoundWidth)(compoundSettings, item.area.width, isRichText)}`
+                    : 'max-content'};
+          height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, item.area.height)}` : 'unset'};
+          transform: ${(0, getCompoundBoundaryStyles_1.getCompoundTransform)(compoundSettings)};
+          z-index: ${item.area.zIndex};
+        }
       ` })] })));
 };
 exports.CompoundChild = CompoundChild;

package/lib/sdk-nextjs/components/items/CompoundItem/CompoundItem.js

@@ -7,22 +7,18 @@ 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 CompoundChild_1 = require("./CompoundChild");
 const useCompoundItem_1 = require("./useCompoundItem");
-const utils_1 = require("../../../../utils");
 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']);
@@ -32,22 +28,20 @@ const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     (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: `
+    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: {
+                        opacity,
+                        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} {
-          overflow: ${item.commonParams.overflow};
+          overflow: ${item.params.overflow};
           position: absolute;
           width: 100%;
           height: 100%;
           box-sizing: border-box;
+          opacity: ${item.params.opacity};
+          transform: rotate(${item.area.angle}deg);
         }
-        ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                        return (`
-            .compound-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg);
-            }
-          `);
-                    })}
       ` })] }) }));
 };
 exports.CompoundItem = CompoundItem;

package/lib/sdk-nextjs/components/items/CompoundItem/useCompoundItem.d.ts

@@ -1,4 +1,4 @@
 import { CompoundItem } from '../../../../sdk/types/article/Item';
 export declare function useCompoundItem(item: CompoundItem, sectionId: string): {
-    opacity: number | undefined;
+    opacity: number;
 };

package/lib/sdk-nextjs/components/items/CompoundItem/useCompoundItem.js

@@ -1,16 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCompoundItem = useCompoundItem;
-const useLayoutContext_1 = require("../../useLayoutContext");
 const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
 const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
 function useCompoundItem(item, sectionId) {
-    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_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]);
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Opacity, (item) => 'opacity' in item.params ? item.params.opacity : 1, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId);
     return { opacity };
 }

package/lib/sdk-nextjs/components/items/CustomItem/CustomItem.js

@@ -10,31 +10,26 @@ const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const useItemAngle_1 = require("../useItemAngle");
-const utils_1 = require("../../../../utils");
 const CustomItem = ({ item, onResize, sectionId, interactionCtrl }) => {
     var _a, _b, _c;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const component = sdk.customItems.get(item.commonParams.name);
-    const layoutValues = [item.area];
+    const component = sdk.customItems.get(item.params.name);
     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(['angle']);
     const angle = (_b = (_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : itemAngle;
     if (!component)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area]) => {
-                    return (`
-            .custom-component-${item.id} {
-              transform: rotate(${area.angle}deg);
-              height: 100%;
-              width: 100%;
-              position: absolute;
-              left: 0;
-              top: 0;
-            }
-          `);
-                })}` })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
+          .custom-component-${item.id} {
+            transform: rotate(${item.area.angle}deg);
+            height: 100%;
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+          }
+        ` })] }));
 };
 exports.CustomItem = CustomItem;

package/lib/sdk-nextjs/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -18,28 +18,22 @@ const player_1 = __importDefault(require("@vimeo/player"));
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useItemAngle_1 = require("../useItemAngle");
-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 useLayoutContext_1 = require("../../useLayoutContext");
-const utils_1 = require("../../../../utils");
 const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
-    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
     const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const { url } = item.commonParams;
-    const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
+    const { url } = item.params;
+    const params = item.params;
     const [ref, setRef] = (0, react_1.useState)(null);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
-    const layoutValues = [item.area, item.layoutParams];
     const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
     const frameStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['radius']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
@@ -48,24 +42,24 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
     const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const validUrl = (0, react_1.useMemo)(() => {
-        if (!layoutParams)
+        if (!params)
             return url;
         const validURL = new URL(url);
-        validURL.searchParams.append('controls', String(layoutParams.controls));
-        validURL.searchParams.append('autoplay', String(layoutParams.play === 'auto'));
-        validURL.searchParams.append('muted', String(layoutParams.muted));
-        validURL.searchParams.append('loop', String(layoutParams.loop));
-        validURL.searchParams.append('pip', String(layoutParams.pictureInPicture));
+        validURL.searchParams.append('controls', String(params.controls));
+        validURL.searchParams.append('autoplay', String(params.play === 'auto'));
+        validURL.searchParams.append('muted', String(params.muted));
+        validURL.searchParams.append('loop', String(params.loop));
+        validURL.searchParams.append('pip', String(params.pictureInPicture));
         validURL.searchParams.append('title', '0');
         validURL.searchParams.append('byline', '0');
         validURL.searchParams.append('portrait', '0');
         validURL.searchParams.append('autopause', 'false');
         return validURL.href;
-    }, [url, layoutParams]);
+    }, [url, params]);
     (0, react_1.useEffect)(() => {
-        if (!vimeoPlayer || !imgRef || !layoutParams)
+        if (!vimeoPlayer || !imgRef)
             return;
-        if (layoutParams.play === 'on-click') {
+        if (params.play === 'on-click') {
             setIsCoverVisible(true);
         }
         vimeoPlayer.on('pause', (e) => {
@@ -76,7 +70,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
         vimeoPlayer.on('ended', () => {
             setIsCoverVisible(true);
         });
-    }, [vimeoPlayer, imgRef, layoutParams]);
+    }, [vimeoPlayer, imgRef, params]);
     const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!vimeoPlayer)
             return;
@@ -116,15 +110,15 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
             }
         });
     }, [interactionCtrl, 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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
-                    if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
+    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({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
+                    if (!vimeoPlayer || params.play !== 'on-hover')
                         return;
                     vimeoPlayer.play();
                 }, onMouseLeave: () => {
-                    if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
+                    if (!vimeoPlayer || params.play !== 'on-hover')
                         return;
                     vimeoPlayer.pause();
-                }, children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
+                }, children: [params.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = params.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -133,17 +127,24 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, alt: "Cover img" })), layoutParams && (!layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
+                        }, alt: "Cover img" })), params && (!params.controls && (params.play === 'on-click' || params.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: {
+                            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%;
         height: 100%;
+        opacity: ${params.opacity};
+        transform: rotate(${item.area.angle}deg);
+        filter: ${params.blur !== 0 ? `blur(${params.blur * 100}vw)` : 'unset'};
+        ${params.blur !== 0 ? 'will-change: transform;' : ''}
       }
       .embed-video {
         width: 100%;
@@ -152,19 +153,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
         border: none;
         overflow: hidden;
       }
-      ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-          .embed-video-wrapper-${item.id} {
-            opacity: ${layoutParams.opacity};
-            transform: rotate(${area.angle}deg);
-            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-          .embed-video-wrapper-${item.id} .embed-video {
-            border-radius: ${layoutParams.radius * 100}vw;
-          }
-        `);
-                })}
+      .embed-video-wrapper-${item.id} .embed-video {
+        border-radius: ${params.radius * 100}vw;
+      }
     ` })] }));
 };
 exports.VimeoEmbedItem = VimeoEmbedItem;

package/lib/sdk-nextjs/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -11,19 +11,14 @@ const LinkWrapper_1 = require("../LinkWrapper");
 const getValidYoutubeUrl_1 = require("../../../utils/getValidYoutubeUrl");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
-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 useLayoutContext_1 = require("../../useLayoutContext");
-const utils_1 = require("../../../../utils");
 const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { url } = item.commonParams;
-    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
+    const { url } = item.params;
+    const params = item.params;
     const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
@@ -31,7 +26,6 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
     const [player, setPlayer] = (0, react_1.useState)(undefined);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
-    const layoutValues = [item.area, item.layoutParams];
     const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
     const frameStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['radius']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
@@ -46,9 +40,9 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
         const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
-        if (!YT || !videoId || !div || !layoutParams)
+        if (!YT || !videoId || !div)
             return;
-        const { play, controls } = layoutParams;
+        const { play, controls } = params;
         const placeholder = document.createElement('div');
         div.appendChild(placeholder);
         const player = new YT.Player(placeholder, {
@@ -82,7 +76,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
             player.destroy();
             (_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
         };
-    }, [YT, div, layoutParams]);
+    }, [YT, div, params]);
     const onCoverClick = () => {
         if (!player || !imgRef)
             return;
@@ -90,10 +84,10 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
         setIsCoverVisible(false);
     };
     (0, react_1.useEffect)(() => {
-        if (layoutParams && layoutParams.play === 'on-click' && !layoutParams.controls) {
+        if (params.play === 'on-click' && !params.controls) {
             setIsCoverVisible(true);
         }
-    }, [layoutParams]);
+    }, [params]);
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
         if (!isInteractive && player) {
@@ -115,14 +109,14 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
         });
     }, [interactionCtrl, player]);
     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-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
-                    if (!player || !layoutParams || layoutParams.play !== 'on-hover')
+                    if (!player || params.play !== 'on-hover')
                         return;
                     player.playVideo();
                 }, onMouseLeave: () => {
-                    if (!player || !layoutParams || layoutParams.play !== 'on-hover')
+                    if (!player || params.play !== 'on-hover')
                         return;
                     player.pauseVideo();
-                }, 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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
+                }, 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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [params.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = params.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -138,6 +132,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
           position: absolute;
           width: 100%;
           height: 100%;
+          border-radius: ${params.radius * 100}vw;
         }
         .embed-${item.id} {
           overflow: hidden;
@@ -148,19 +143,12 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
           z-index: 1;
           border: none;
         }
-        ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-            .embed-youtube-video-wrapper-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-            }
-            .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
-              border-radius: ${layoutParams.radius * 100}vw;
-            }
-          `);
-                })}
+        .embed-youtube-video-wrapper-${item.id} {
+          opacity: ${params.opacity};
+          transform: rotate(${item.area.angle}deg);
+          filter: ${params.blur !== 0 ? `blur(${params.blur * 100}vw)` : 'unset'};
+          ${params.blur !== 0 ? 'will-change: transform;' : ''}
+        }
       ` })] }));
 };
 exports.YoutubeEmbedItem = YoutubeEmbedItem;