@cntrl-site/sdk-nextjs 0.29.7 → 0.30.1

package/lib/common/useKeyframeValue.js

@@ -11,7 +11,7 @@ const KeyframesContext_1 = require("../provider/KeyframesContext");
 const Animator_1 = require("../utils/Animator/Animator");
 const useLayoutContext_1 = require("../components/useLayoutContext");
 const emptyDeps = [];
-const useKeyframeValue = (item, itemParamsGetter, animatorGetter, sectionId, deps = emptyDeps) => {
+const useKeyframeValue = (item, type, itemParamsGetter, animatorGetter, sectionId, deps = emptyDeps) => {
     const animatorGetterRef = (0, react_1.useRef)(animatorGetter);
     const itemParamsGetterRef = (0, react_1.useRef)(itemParamsGetter);
     animatorGetterRef.current = animatorGetter;
@@ -19,7 +19,7 @@ const useKeyframeValue = (item, itemParamsGetter, animatorGetter, sectionId, dep
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const keyframesRepo = (0, react_1.useContext)(KeyframesContext_1.KeyframesContext);
-    const keyframes = (0, react_1.useMemo)(() => keyframesRepo.getItemKeyframes(item.id), [item.id, keyframesRepo]);
+    const keyframes = (0, react_1.useMemo)(() => keyframesRepo.getItemKeyframes(item.id).filter(kf => kf.type === type), [item.id, keyframesRepo, type]);
     const paramValue = (0, react_1.useMemo)(() => {
         return itemParamsGetterRef.current(item, layoutId);
     }, [item, layoutId, ...deps]);

package/lib/components/ArticleWrapper.js

@@ -1,36 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArticleWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const style_1 = __importDefault(require("styled-jsx/style"));
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const LayoutContext_1 = require("../provider/LayoutContext");
 const ArticleWrapper = ({ children }) => {
-    const id = (0, react_1.useId)();
-    const [isPageLoaded, setIsPageLoaded] = (0, react_1.useState)(false);
     const { layoutId, layoutDeviation } = (0, useCurrentLayout_1.useCurrentLayout)();
-    (0, react_1.useEffect)(() => {
-        const onPageLoad = () => {
-            setIsPageLoaded(true);
-        };
-        if (document.readyState === 'loading') {
-            window.addEventListener('DOMContentLoaded', onPageLoad);
-            return () => window.removeEventListener('DOMContentLoaded', onPageLoad);
-        }
-        else {
-            onPageLoad();
-        }
-    }, []);
     const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
-    return ((0, jsx_runtime_1.jsxs)(LayoutContext_1.LayoutContext.Provider, { value: layoutId, children: [(0, jsx_runtime_1.jsx)("div", { className: "article-wrapper", style: Object.assign({ opacity: layoutId && isPageLoaded ? 1 : 0 }, layoutDeviationStyle), children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .article-wrapper {
-          opacity: 1;
-          transition: opacity 0.2s ease; 
-        }
-      ` })] }));
+    return ((0, jsx_runtime_1.jsx)(LayoutContext_1.LayoutContext.Provider, { value: layoutId, children: (0, jsx_runtime_1.jsx)("div", { className: "article-wrapper", style: Object.assign({}, layoutDeviationStyle), children: children }) }));
 };
 exports.ArticleWrapper = ArticleWrapper;

package/lib/components/Item.js

@@ -29,6 +29,8 @@ const useLayoutContext_1 = require("./useLayoutContext");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
 const useExemplary_1 = require("../common/useExemplary");
 const GroupItem_1 = require("./items/GroupItem");
+const CodeEmbedItem_1 = require("./items/CodeEmbedItem");
+const KeyframesContext_1 = require("../provider/KeyframesContext");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -37,7 +39,8 @@ const itemsMap = {
     [sdk_1.ArticleItemType.YoutubeEmbed]: YoutubeEmbed_1.YoutubeEmbedItem,
     [sdk_1.ArticleItemType.VimeoEmbed]: VimeoEmbed_1.VimeoEmbedItem,
     [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem,
-    [sdk_1.ArticleItemType.Group]: GroupItem_1.GroupItem
+    [sdk_1.ArticleItemType.Group]: GroupItem_1.GroupItem,
+    [sdk_1.ArticleItemType.CodeEmbed]: CodeEmbedItem_1.CodeEmbedItem
 };
 const stickyFix = `
   -webkit-transform: translate3d(0, 0, 0);
@@ -52,17 +55,19 @@ const noop = () => null;
 const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
     const itemWrapperRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const keyframesRepo = (0, react_1.useContext)(KeyframesContext_1.KeyframesContext);
     const id = (0, react_1.useId)();
+    const keyframes = (0, react_1.useMemo)(() => keyframesRepo.getItemKeyframes(item.id), [keyframesRepo, item.id]);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
     const exemplary = (0, useExemplary_1.useExemplary)();
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
-    const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
-    const { top, left, bottom } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
+    const scale = (0, useItemScale_1.useItemScale)(item, sectionId);
+    const position = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
     const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionHeight, sectionId);
-    const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
+    const dimensions = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
     const layoutValues = [item.area, item.hidden, item.state.hover];
     const isInitialRef = (0, react_1.useRef)(true);
     layoutValues.push(item.sticky);
@@ -80,7 +85,7 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
         if (!layout)
             return;
         const sticky = item.sticky[layout];
-        if (!sticky) {
+        if (!sticky || stickyTop === undefined) {
             setWrapperHeight(undefined);
             return;
         }
@@ -97,40 +102,37 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
         isInitialRef.current = false;
     }, []);
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
-    if (!layout)
-        return null;
-    const styles = {
-        top: `${stickyTop * 100}vw`,
-        height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left, bottom }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: Object.assign({ opacity: (keyframes.length !== 0 && !layout) ? 0 : 1, top: `${stickyTop * 100}vw`, height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset' }, (scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, '-webkit-transform': `scale(${scale}) translateZ(0)` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (dimensions ? {
                             width: `${sizingAxis.x === 'manual'
                                 ? isRichText
-                                    ? `${width * exemplary}px`
-                                    : `${width * 100}vw`
+                                    ? `${dimensions.width * exemplary}px`
+                                    : `${dimensions.width * 100}vw`
                                 : 'max-content'}`,
-                            height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`,
-                            transform: `scale(${scale})`,
-                            transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]
-                        }, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
+                            height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}`
+                        } : {})), children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams], exemplary) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
+                    const scaleAnchor = area.scaleAnchor;
                     return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
               top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               pointer-events: auto;
+              transition: opacity 0.1s linear;
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
             }
             .item-${item.id}-inner {
               transition: ${(0, HoverStyles_1.getTransitions)(['width', 'height', 'scale'], hoverParams)};
-              width: ${sizingAxis.x === 'manual' ? `${area.width * 100}vw` : 'max-content'};
+              width: ${sizingAxis.x === 'manual'
+                        ? isRichText
+                            ? `${area.width * exemplary}px`
+                            : `${area.width * 100}vw`
+                        : 'max-content'};
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
-              transform: scale(${scale});
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
-              --webkit-backface-visibility: hidden;
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
@@ -143,10 +145,10 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
               transition: ${(0, HoverStyles_1.getTransitions)(['left', 'top'], hoverParams)};
             }
             .item-${item.id}-inner:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['width', 'height', 'scale'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['width', 'height', 'scale'], hoverParams)};
             }
             .item-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['left', 'top'], hoverParams, area.anchorSide)}
+              ${(0, HoverStyles_1.getHoverStyles)(['left', 'top'], hoverParams, area.anchorSide)};
             }
           `);
                 })}

package/lib/components/Section.js

@@ -9,13 +9,14 @@ 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 useSectionColor_1 = require("./useSectionColor");
 const useSectionRegistry_1 = require("../utils/ArticleRectManager/useSectionRegistry");
+const color_1 = require("@cntrl-site/color");
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 const Section = ({ section, data, children }) => {
     const id = (0, react_1.useId)();
     const sectionRef = (0, react_1.useRef)(null);
     const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
-    const backgroundColor = (0, useSectionColor_1.useSectionColor)(section.color);
+    const layoutValues = [section.height, section.color];
     const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
     (0, useSectionRegistry_1.useSectionRegistry)(section.id, sectionRef.current);
     const getSectionVisibilityStyles = () => {
@@ -34,13 +35,12 @@ const Section = ({ section, data, children }) => {
     };
     if (SectionComponent)
         return (0, jsx_runtime_1.jsx)("div", { ref: sectionRef, children: (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children }) });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, style: {
-                    backgroundColor: backgroundColor.fmt('rgba')
-                }, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};
             position: relative;
+            background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
          }`))}
       ${getSectionVisibilityStyles()}
     ` })] }));

package/lib/components/items/CodeEmbedItem.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeEmbedItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const useItemAngle_1 = require("../useItemAngle");
+const LinkWrapper_1 = require("../LinkWrapper");
+const useCodeEmbedItem_1 = require("./useCodeEmbedItem");
+const stylesMap = {
+    [sdk_1.AreaAnchor.TopLeft]: {},
+    [sdk_1.AreaAnchor.TopCenter]: { justifyContent: 'center' },
+    [sdk_1.AreaAnchor.TopRight]: { justifyContent: 'flex-end' },
+    [sdk_1.AreaAnchor.MiddleLeft]: { alignItems: 'center' },
+    [sdk_1.AreaAnchor.MiddleCenter]: { justifyContent: 'center', alignItems: 'center' },
+    [sdk_1.AreaAnchor.MiddleRight]: { justifyContent: 'flex-end', alignItems: 'center' },
+    [sdk_1.AreaAnchor.BottomLeft]: { alignItems: 'flex-end' },
+    [sdk_1.AreaAnchor.BottomCenter]: { justifyContent: 'center', alignItems: 'flex-end' },
+    [sdk_1.AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
+};
+const CodeEmbedItem = ({ item, sectionId, onResize }) => {
+    var _a, _b;
+    const id = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { anchor, blur, opacity } = (0, useCodeEmbedItem_1.useCodeEmbedItem)(item, sectionId);
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { html } = item.commonParams;
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const pos = stylesMap[anchor];
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign({ opacity: `${opacity}`, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)` }, pos), ref: setRef, children: (0, jsx_runtime_1.jsx)("div", { className: "embed", dangerouslySetInnerHTML: { __html: html } }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      .embed -wrapper-${item.id} {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .embed {
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        border: none;
+        overflow: hidden;
+      }
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+                    return (`
+          .embed-wrapper-${item.id} {
+            opacity: ${layoutParams.opacity};
+            transform: rotate(${area.angle}deg);
+            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
+          }
+          .embed-wrapper-${item.id}:hover {
+            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
+          }
+        `);
+                })}
+    ` })] }));
+};
+exports.CodeEmbedItem = CodeEmbedItem;

package/lib/components/items/CustomItem.js

@@ -11,17 +11,23 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRegisterResize_1 = require("../../common/useRegisterResize");
-const CustomItem = ({ item, onResize }) => {
+const useItemAngle_1 = require("../useItemAngle");
+const CustomItem = ({ item, onResize, sectionId }) => {
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const component = sdk.customItems.get(item.commonParams.name);
+    const layoutValues = [item.area, item.state.hover];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     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, children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+    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: {
+                    transform: `rotate(${angle}deg)`,
+                }, children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hoverParams]) => {
                     return (`
             .custom-component-${item.id} {
+              transform: rotate(${area.angle}deg);
               transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};
               height: 100%;
               width: 100%;

package/lib/components/items/GroupItem.js

@@ -22,6 +22,7 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { opacity } = (0, useGroupItem_1.useGroupItem)(item, sectionId);
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: {
@@ -34,13 +35,15 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
           height: 100%;
           box-sizing: border-box;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                         return (`
             .group-${item.id} {
-              transition: ${(0, HoverStyles_1.getTransitions)(['opacity'], hoverParams)};
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              transition: ${(0, HoverStyles_1.getTransitions)(['opacity', 'angle'], hoverParams)};
             }
             .group-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['opacity'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['opacity', 'angle'], hoverParams)};
             }
           `);
                     })}

package/lib/components/items/ImageItem.js

@@ -38,6 +38,7 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const { url, hasGLEffect, fragmentShader } = item.commonParams;
     const fxCanvas = (0, react_1.useRef)(null);
+    const isInitialRef = (0, react_1.useRef)(true);
     const controls = (_a = item.commonParams.FXControls) !== null && _a !== void 0 ? _a : [];
     const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
         .join('\n');
@@ -45,12 +46,16 @@ const ImageItem = ({ item, sectionId, onResize }) => {
         acc[control.shaderParam] = control.value;
         return acc;
     }, {});
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
     const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
     const area = layoutId ? item.area[layoutId] : null;
     const exemplary = (_b = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _b === void 0 ? void 0 : _b.exemplary;
     const width = area && exemplary ? area.width * exemplary : 0;
     const height = area && exemplary ? area.height * exemplary : 0;
-    (0, useImageFx_1.useImageFx)(fxCanvas.current, hasGLEffect !== null && hasGLEffect !== void 0 ? hasGLEffect : false, {
+    (0, react_1.useEffect)(() => {
+        isInitialRef.current = false;
+    }, []);
+    (0, useImageFx_1.useImageFx)(fxCanvas.current, !!(hasGLEffect && !isInitialRef.current), {
         imageUrl: url,
         fragmentShader: fullShaderCode,
         cursor: item.commonParams.FXCursor,
@@ -62,18 +67,13 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const inlineStyles = {
         borderRadius: `${radius * 100}vw`,
         borderWidth: `${strokeWidth * 100}vw`,
-        borderColor: `${borderColor.toCss()}`
+        borderColor: `${borderColor.fmt('rgba')}`
     };
     return ((0, jsx_runtime_1.jsx)(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)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setRef, style: {
                         opacity: `${opacity}`,
                         transform: `rotate(${angle}deg)`,
                         filter: `blur(${blur * 100}vw)`
-                    }, children: item.commonParams.hasGLEffect ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: "img-canvas", width: rectWidth, height: rectHeight })) : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        @supports not (color: oklch(42% 0.3 90 / 1)) {
-          .image-${item.id} {
-            border-color: ${borderColor.fmt('rgba')};
-          }
-        }
+                    }, children: item.commonParams.hasGLEffect ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight })) : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .image-wrapper-${item.id} {
           position: absolute;
           width: 100%;
@@ -99,19 +99,25 @@ const ImageItem = ({ item, sectionId, onResize }) => {
           border-width: 0;
           box-sizing: border-box;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                         return (`
             .image-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .image-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .image-${item.id} {
+              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
               transition: ${(0, HoverStyles_1.getTransitions)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
-            .image-wrapper-${item.id}:hover .image {
-              ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)}
+            .image-wrapper-${item.id}:hover .image, .image-wrapper-${item.id}:hover .img-canvas {
+              ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
           `);
                     })}

package/lib/components/items/RectangleItem.js

@@ -23,25 +23,20 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const backgroundColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(fillColor), [fillColor]);
     const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    const backdropFilterValue = backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset';
+    const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: {
-                        backgroundColor: `${backgroundColor.toCss()}`,
+                        backgroundColor: `${backgroundColor.fmt('rgba')}`,
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         borderColor: `${borderColor.toCss()}`,
                         transform: `rotate(${angle}deg)`,
-                        filter: blur !== 0 ? `blur(${blur * 100}vw)` : 'unset',
+                        filter: `blur(${blur * 100}vw)`,
                         backdropFilter: backdropFilterValue,
-                        WebkitBackdropFilter: backdropFilterValue,
+                        WebkitBackdropFilter: backdropFilterValue
                     } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        @supports not (color: oklch(42% 0.3 90 / 1)) {
-          .rectangle-${item.id} {
-            background-color: ${backgroundColor.fmt('rgba')};
-            border-color: ${borderColor.fmt('rgba')};
-          }
-        }
         .rectangle-${item.id} {
           position: absolute;
           width: 100%;
@@ -49,13 +44,21 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
           border-style: solid;
           box-sizing: border-box;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                         return (`
             .rectangle-${item.id} {
+              background-color: ${color_1.CntrlColor.parse(layoutParams.fillColor).fmt('rgba')};
+              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              -webkit-backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)};
             }
             .rectangle-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)};
             }
           `);
                     })}

package/lib/components/items/RichTextItem.js

@@ -16,13 +16,16 @@ const useRichTextItemValues_1 = require("./useRichTextItemValues");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const getFontFamilyValue_1 = require("../../utils/getFontFamilyValue");
 const useExemplary_1 = require("../../common/useExemplary");
+const useItemAngle_1 = require("../useItemAngle");
 const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { angle, blur, wordSpacing, letterSpacing, color } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { blur, wordSpacing, letterSpacing, color } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
     const textColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(color), [color]);
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
     const exemplary = (0, useExemplary_1.useExemplary)();
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
@@ -30,38 +33,35 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
                     filter: `blur(${blur * exemplary}px)`,
                     letterSpacing: `${letterSpacing * exemplary}px`,
                     wordSpacing: `${wordSpacing * exemplary}px`,
-                    color: `${textColor.toCss()}`
-                }, children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                    color: `${textColor.fmt('rgba')}`
+                }, children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
+                        const color = color_1.CntrlColor.parse(layoutParams.color);
                         return (`
             .rich-text-wrapper-${item.id} {
+              font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
+              line-height: ${layoutParams.lineHeight * exemplary}px;
+              letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
+              word-spacing: ${layoutParams.wordSpacing * exemplary}px;
+              font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
+              font-weight: ${layoutParams.fontWeight};
+              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
+              vertical-align: ${layoutParams.verticalAlign};
+              font-variant: ${layoutParams.fontVariant};
+              color: ${color.fmt('rgba')};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * exemplary}px)` : 'unset'};
+              text-transform: ${layoutParams.textTransform};
               transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
             }
             .rich-text-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)}
-            }
-          `);
-                    })}`, `${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([layoutParams], exemplary) => {
-                        const color = color_1.CntrlColor.parse(layoutParams.color);
-                        return (`
-            .rich-text-wrapper-${item.id} {
-                font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
-                line-height: ${layoutParams.lineHeight * exemplary}px;
-                letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
-                word-spacing: ${layoutParams.wordSpacing * exemplary}px;
-                font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
-                font-weight: ${layoutParams.fontWeight};
-                font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
-                vertical-align: ${layoutParams.verticalAlign};
-                font-variant: ${layoutParams.fontVariant};
-                color: ${color.toCss()};
-                text-transform: ${layoutParams.textTransform};
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
             }
             @supports not (color: oklch(42% 0.3 90 / 1)) {
               .rich-text-wrapper-${item.id} {
                 color: ${color.fmt('rgba')};
               }
             }
-            `);
+          `);
                     })}`] })] }));
 };
 exports.RichTextItem = RichTextItem;

package/lib/components/items/VideoItem.js

@@ -23,38 +23,23 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, strokeColor, opacity, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
+    const borderColor = (0, react_1.useMemo)(() => strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     const videoRef = (0, react_1.useRef)(null);
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const scrollPlayback = item.layoutParams[layoutId].scrollPlayback;
+    const scrollPlayback = layoutId ? item.layoutParams[layoutId].scrollPlayback : null;
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
     const hasScrollPlayback = scrollPlayback !== null;
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [hasScrollPlayback ? ((0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
-                    opacity: `${opacity}`,
+    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {}));
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
+                    opacity,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`,
-                    overflow: 'hidden'
-                }, children: (0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: {
-                        borderRadius: `${radius * 100}vw`,
-                        borderWidth: `${strokeWidth * 100}vw`,
-                        borderColor: `${borderColor.toCss()}`
-                    }, className: `video video-playback-wrapper video-${item.id}` }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
-                    opacity: `${opacity}`,
-                    transform: `rotate(${angle}deg)`,
-                    filter: `blur(${blur * 100}vw)`
-                }, children: (0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: {
-                        borderRadius: `${radius * 100}vw`,
-                        borderWidth: `${strokeWidth * 100}vw`,
-                        borderColor: `${borderColor.toCss()}`
-                    }, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) })), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        @supports not (color: oklch(42% 0.3 90 / 1)) {
-          .video-${item.id} {
-            border-color: ${borderColor.fmt('rgba')};
-          }
-        }
+                }, children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .video-wrapper-${item.id} {
           position: absolute;
+          overflow: hidden;
           width: 100%;
           height: 100%;
           box-sizing: border-box;
@@ -76,19 +61,25 @@ const VideoItem = ({ item, sectionId, onResize }) => {
           display: flex;
           justify-content: center;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                     return (`
             .video-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .video-${item.id} {
+              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
               transition: ${(0, HoverStyles_1.getTransitions)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
             .video-wrapper-${item.id}:hover .video {
-              ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
           `);
                 })}