@cntrl-site/sdk-nextjs 0.14.2 → 0.14.4

package/lib/common/useCurrentLayout.js

@@ -24,12 +24,7 @@ const useCurrentLayout = () => {
     const getCurrentLayout = (0, react_1.useCallback)((articleWidth) => {
         return layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end).layoutId;
     }, [layoutRanges]);
-    const [layoutId, setLayoutId] = (0, react_1.useState)(getCurrentLayout(0));
-    (0, react_1.useEffect)(() => {
-        if (typeof window !== 'undefined') {
-            getCurrentLayout(window.innerWidth);
-        }
-    }, []);
+    const [layoutId, setLayoutId] = (0, react_1.useState)(undefined);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver)
             return;

package/lib/common/useKeyframeValue.js

@@ -7,9 +7,9 @@ exports.useKeyframeValue = void 0;
 const lodash_isequal_1 = __importDefault(require("lodash.isequal"));
 const react_1 = require("react");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
-const useCurrentLayout_1 = require("./useCurrentLayout");
 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 animatorGetterRef = (0, react_1.useRef)(animatorGetter);
@@ -17,7 +17,7 @@ const useKeyframeValue = (item, itemParamsGetter, animatorGetter, sectionId, dep
     animatorGetterRef.current = animatorGetter;
     itemParamsGetterRef.current = itemParamsGetter;
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    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 paramValue = (0, react_1.useMemo)(() => {

package/lib/components/Article.js

@@ -11,14 +11,15 @@ const Section_1 = require("./Section");
 const Item_1 = require("./Item");
 const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
+const ArticleWrapper_1 = require("./ArticleWrapper");
 const Article = ({ article, sectionData }) => {
     const articleRef = (0, react_1.useRef)(null);
     const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
     const id = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: [(0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => {
-                    const data = section.name ? sectionData[section.name] : {};
-                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id }, item.id))) }, section.id));
-                }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => {
+                        const data = section.name ? sectionData[section.name] : {};
+                        return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id }, item.id))) }, section.id));
+                    }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
             position: relative;
             overflow: clip;

package/lib/components/ArticleWrapper.js

@@ -0,0 +1,35 @@
+"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 = (0, useCurrentLayout_1.useCurrentLayout)();
+    (0, react_1.useEffect)(() => {
+        const onPageLoad = () => {
+            setIsPageLoaded(true);
+        };
+        if (document.readyState === 'complete') {
+            onPageLoad();
+        }
+        else {
+            window.addEventListener('load', onPageLoad);
+            return () => window.removeEventListener('load', onPageLoad);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(LayoutContext_1.LayoutContext.Provider, { value: layoutId, children: [(0, jsx_runtime_1.jsx)("div", { className: "article-wrapper", style: { opacity: layoutId && isPageLoaded ? 1 : 0 }, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .article-wrapper {
+          opacity: 1;
+          transition: opacity 0.2s ease; 
+        }
+      ` })] }));
+};
+exports.ArticleWrapper = ArticleWrapper;

package/lib/components/Item.js

@@ -18,7 +18,6 @@ const CustomItem_1 = require("./items/CustomItem");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
 const useItemPosition_1 = require("./useItemPosition");
 const useItemDimensions_1 = require("./useItemDimensions");
-const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const useItemScale_1 = require("./useItemScale");
 const ScaleAnchorMap_1 = require("../utils/ScaleAnchorMap");
 const useSectionHeightMap_1 = require("./useSectionHeightMap");
@@ -26,6 +25,7 @@ const HoverStyles_1 = require("../utils/HoverStyles/HoverStyles");
 const getItemTopStyle_1 = require("../utils/getItemTopStyle");
 const useStickyItemTop_1 = require("./items/useStickyItemTop");
 const getAnchoredItemTop_1 = require("../utils/getAnchoredItemTop");
+const useLayoutContext_1 = require("./useLayoutContext");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -39,12 +39,12 @@ const noop = () => null;
 const Item = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
     const { top, left } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
     const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionHeight, sectionId);
-    const layout = (0, useCurrentLayout_1.useCurrentLayout)();
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
     const layoutValues = [item.area, item.hidden, item.state.hover];
     const isInitialRef = (0, react_1.useRef)(true);
@@ -53,12 +53,14 @@ const Item = ({ item, sectionId }) => {
     if (item.layoutParams) {
         layoutValues.push(item.layoutParams);
     }
-    const sizing = isItemType(item, sdk_1.ArticleItemType.RichText)
+    const sizing = layout && isItemType(item, sdk_1.ArticleItemType.RichText)
         ? item.layoutParams[layout].sizing
         : undefined;
     const sizingAxis = parseSizing(sizing);
     const ItemComponent = itemsMap[item.type] || noop;
     const handleItemResize = (height) => {
+        if (!layout)
+            return;
         const sticky = item.sticky[layout];
         if (!sticky) {
             setWrapperHeight(undefined);
@@ -77,7 +79,7 @@ const Item = ({ item, sectionId }) => {
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
         top: stickyTop
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, style: { top, left, ...(wrapperHeight ? { 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)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, style: isInitialRef.current ? {} : { top, left, ...(wrapperHeight ? { 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)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`

package/lib/components/items/ImageItem.js

@@ -16,7 +16,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const ImageItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, style: {
@@ -24,7 +24,8 @@ const ImageItem = ({ item, sectionId }) => {
                         borderWidth: `${strokeWidth * 100}vw`,
                         opacity: `${opacity}`,
                         borderColor: `${borderColor.toCss()}`,
-                        transform: `rotate(${angle}deg)`
+                        transform: `rotate(${angle}deg)`,
+                        filter: `blur(${blur * 100}vw)`
                     }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", 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-wrapper-${item.id} {
@@ -50,10 +51,10 @@ const ImageItem = ({ item, sectionId }) => {
           ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`
               .image-wrapper-${item.id} {
-                transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)};
+                transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)};
               }
               .image-wrapper-${item.id}:hover {
-                ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)}
+                ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)}
               }
             `);
                     })}

package/lib/components/items/RectangleItem.js

@@ -16,7 +16,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const RectangleItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
+    const { fillColor, radius, strokeWidth, strokeColor, blur, backdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor), [fillColor]);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
@@ -25,7 +25,9 @@ const RectangleItem = ({ item, sectionId }) => {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         borderColor: `${borderColor.toCss()}`,
-                        transform: `rotate(${angle}deg)`
+                        transform: `rotate(${angle}deg)`,
+                        filter: blur !== 0 ? `blur(${blur * 100}vw)` : '',
+                        backdropFilter: backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : ''
                     } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {
@@ -43,10 +45,10 @@ const RectangleItem = ({ item, sectionId }) => {
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`
             .rectangle-${item.id} {
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor'], hoverParams)};
+              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'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)}
             }
           `);
                     })}

package/lib/components/items/RichTextItem.js

@@ -9,16 +9,16 @@ const react_1 = require("react");
 const sdk_1 = require("@cntrl-site/sdk");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
-const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
+const useRichTextItemValues_1 = require("./useRichTextItemValues");
 const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
-    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const className = preset ? `cntrl-preset-${preset.id}` : undefined;
+    const { angle, blur } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
     (0, react_1.useEffect)(() => {
         if (!ref || !onResize)
             return;
@@ -32,14 +32,15 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
         };
     }, [ref, onResize]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `${className} rich-text-wrapper-${item.id}`, style: {
-                    transform: `rotate(${angle}deg)`
+                    transform: `rotate(${angle}deg)`,
+                    filter: `blur(${blur * 100}vw)`
                 }, children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`
             .rich-text-wrapper-${item.id} {
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur'], hoverParams)};
             }
             .rich-text-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur'], hoverParams)}
             }
           `);
                     })}`] })] }));

package/lib/components/items/VideoItem.js

@@ -16,7 +16,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const VideoItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    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)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, style: {
@@ -24,7 +24,8 @@ const VideoItem = ({ item, sectionId }) => {
                     borderWidth: `${strokeWidth * 100}vw`,
                     opacity: `${opacity}`,
                     borderColor: `${borderColor.toCss()}`,
-                    transform: `rotate(${angle}deg)`
+                    transform: `rotate(${angle}deg)`,
+                    filter: `blur(${blur * 100}vw)`
                 }, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", 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-wrapper-${item.id} {
@@ -51,10 +52,10 @@ const VideoItem = ({ item, sectionId }) => {
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
             .video-wrapper-${item.id} {
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)};
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)};
             }
             .video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)}
             }
           `);
                 })}

package/lib/components/items/VimeoEmbed.js

@@ -17,7 +17,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const VimeoEmbedItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
     const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -38,7 +38,8 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
     const validUrl = getValidVimeoUrl(url);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
-                    transform: `rotate(${angle}deg)`
+                    transform: `rotate(${angle}deg)`,
+                    filter: `blur(${blur * 100}vw)`
                 }, onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
@@ -63,10 +64,10 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
       ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
           .embed-video-wrapper-${item.id} {
-            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius'], hoverParams)};
+            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius', 'blur'], hoverParams)};
           }
           .embed-video-wrapper-${item.id}:hover {
-            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius'], hoverParams)}
+            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius', 'blur'], hoverParams)}
           }
         `);
                 })}

package/lib/components/items/YoutubeEmbed.js

@@ -19,7 +19,7 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { play, controls, url } = item.commonParams;
-    const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
@@ -63,7 +63,8 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
                     player.pauseVideo();
                 }, ref: setDiv, style: {
                     borderRadius: `${radius * 100}vw`,
-                    transform: `rotate(${angle}deg)`
+                    transform: `rotate(${angle}deg)`,
+                    filter: `blur(${blur * 100}vw)`
                 } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id} {
           position: absolute;
@@ -80,10 +81,10 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
             .embed-youtube-video-wrapper-${item.id} {
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius'], hoverParams)};
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius', 'blur'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius', 'blur'], hoverParams)}
             }
           `);
                 })}

package/lib/components/items/useEmbedVideoItem.js

@@ -1,16 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEmbedVideoItem = void 0;
-const useCurrentLayout_1 = require("../../common/useCurrentLayout");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../useLayoutContext");
 const useEmbedVideoItem = (item, sectionId) => {
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
     }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
-    return { radius };
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    return { radius, blur };
 };
 exports.useEmbedVideoItem = useEmbedVideoItem;

package/lib/components/items/useFileItem.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFileItem = void 0;
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
-const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const useLayoutContext_1 = require("../useLayoutContext");
 const defaultColor = 'rgba(0, 0, 0, 1)';
 const useFileItem = (item, sectionId) => {
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;
@@ -30,6 +30,12 @@ const useFileItem = (item, sectionId) => {
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, sectionId);
-    return { radius, strokeWidth, opacity, strokeColor };
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId);
+    return { radius, strokeWidth, opacity, strokeColor, blur };
 };
 exports.useFileItem = useFileItem;

package/lib/components/items/useRectangleItem.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRectangleItem = void 0;
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
-const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const useLayoutContext_1 = require("../useLayoutContext");
 const defaultColor = 'rgba(0, 0, 0, 1)';
 const useRectangleItem = (item, sectionId) => {
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;
@@ -30,6 +30,18 @@ const useRectangleItem = (item, sectionId) => {
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, sectionId, [layoutId]);
-    return { fillColor, strokeWidth, radius, strokeColor };
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    const backdropBlur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'backdropBlur' in layoutParams ? layoutParams.backdropBlur : 0;
+    }, (animator, scroll, value) => animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur, sectionId, [layoutId]);
+    return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
 };
 exports.useRectangleItem = useRectangleItem;

package/lib/components/items/useRichTextItem.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRichTextItem = void 0;
-const useCurrentLayout_1 = require("../../common/useCurrentLayout");
 const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useLayoutContext_1 = require("../useLayoutContext");
 const richTextConv = new RichTextConverter_1.RichTextConverter();
 const useRichTextItem = (item) => {
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { layouts, typePresets } = (0, useCntrlContext_1.useCntrlContext)();
-    const presetId = item.layoutParams[layoutId].preset;
+    const presetId = layoutId ? item.layoutParams[layoutId].preset : null;
     const preset = presetId
         ? typePresets?.presets.find(p => p.id === presetId) ?? null
         : null;

package/lib/components/items/useRichTextItemValues.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextItemValues = void 0;
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../useLayoutContext");
+const useRichTextItemValues = (item, sectionId) => {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const angle = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll), sectionId);
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    return { angle, blur };
+};
+exports.useRichTextItemValues = useRichTextItemValues;

package/lib/components/items/useStickyItemTop.js

@@ -1,14 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStickyItemTop = void 0;
-const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const getAnchoredItemTop_1 = require("../../utils/getAnchoredItemTop");
+const useLayoutContext_1 = require("../useLayoutContext");
 function useStickyItemTop(item, sectionHeightMap, sectionId) {
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
-    const { top } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => item.area[layoutId], (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
-    const sticky = item.sticky[layoutId];
-    const sectionHeight = sectionHeightMap[layoutId];
-    return sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(top - sticky.from, sectionHeight, item.area[layoutId].anchorSide)}` : 0;
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const { top } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return { top: 0, left: 0 };
+        return item.area[layoutId];
+    }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
+    const sticky = layoutId ? item.sticky[layoutId] : undefined;
+    const sectionHeight = layoutId ? sectionHeightMap[layoutId] : '0vh';
+    const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
+    return sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(top - sticky.from, sectionHeight, anchorSide)}` : 0;
 }
 exports.useStickyItemTop = useStickyItemTop;

package/lib/components/useItemDimensions.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemDimensions = void 0;
-const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
+const useLayoutContext_1 = require("./useLayoutContext");
 const defaultArea = {
     left: 0,
     top: 0,
@@ -12,7 +12,7 @@ const defaultArea = {
     zIndex: 0
 };
 const useItemDimensions = (item, sectionId) => {
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { width, height } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea, (animator, scroll, value) => animator.getDimensions(value, scroll), sectionId, [layoutId]);
     return { width, height };
 };

package/lib/components/useItemPosition.js

@@ -1,14 +1,20 @@
 "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 useCurrentLayout_1 = require("../common/useCurrentLayout");
 const getItemTopStyle_1 = require("../utils/getItemTopStyle");
+const useLayoutContext_1 = require("./useLayoutContext");
 const useItemPosition = (item, sectionId) => {
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
-    const { top, left } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => item.area[layoutId], (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const { top, left } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return { top: 0, left: -10 };
+        return item.area[layoutId];
+    }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
+    const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
     return {
-        top: (0, getItemTopStyle_1.getItemTopStyle)(top, item.area[layoutId].anchorSide),
+        top: (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
         left: `${left * 100}vw`
     };
 };

package/lib/components/useItemScale.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemScale = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
-const useCurrentLayout_1 = require("../common/useCurrentLayout");
+const useLayoutContext_1 = require("./useLayoutContext");
 const useItemScale = (item, sectionId) => {
-    const layout = (0, useCurrentLayout_1.useCurrentLayout)();
-    const { scale } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }), (animator, scroll, value) => animator.getScale(value, scroll), sectionId);
-    const scaleAnchor = item.area[layout].scaleAnchor;
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const { scale } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }), (animator, scroll, value) => animator.getScale(value, scroll), sectionId, [layoutId]);
+    const scaleAnchor = layoutId ? item.area[layoutId].scaleAnchor : sdk_1.ScaleAnchor.MiddleCenter;
     return { scale, scaleAnchor };
 };
 exports.useItemScale = useItemScale;

package/lib/components/useLayoutContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayoutContext = void 0;
+const react_1 = require("react");
+const LayoutContext_1 = require("../provider/LayoutContext");
+function useLayoutContext() {
+    const layoutId = (0, react_1.useContext)(LayoutContext_1.LayoutContext);
+    return layoutId;
+}
+exports.useLayoutContext = useLayoutContext;

package/lib/components/useSectionColor.js

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSectionColor = void 0;
-const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const react_1 = require("react");
 const sdk_1 = require("@cntrl-site/sdk");
+const useLayoutContext_1 = require("./useLayoutContext");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 const useSectionColor = (colorData) => {
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     return (0, react_1.useMemo)(() => {
+        if (!layoutId)
+            return sdk_1.CntrlColor.parse(DEFAULT_COLOR);
         const layoutColor = colorData[layoutId];
         return sdk_1.CntrlColor.parse(!layoutColor
             ? DEFAULT_COLOR
             : layoutColor);
-    }, []);
+    }, [layoutId]);
 };
 exports.useSectionColor = useSectionColor;

package/lib/provider/LayoutContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutContext = void 0;
+const react_1 = require("react");
+exports.LayoutContext = (0, react_1.createContext)(undefined);