@cntrl-site/sdk-nextjs 0.14.3 → 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/useEmbedVideoItem.js

@@ -1,10 +1,10 @@
 "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;

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;

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;

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRichTextItemValues = void 0;
-const useCurrentLayout_1 = require("../../common/useCurrentLayout");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../useLayoutContext");
 const useRichTextItemValues = (item, sectionId) => {
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    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)

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/common/useCurrentLayout.ts

@@ -8,7 +8,7 @@ interface LayoutData {
   end: number;
 }
 
-export const useCurrentLayout = (): string => {
+export const useCurrentLayout = (): string | undefined => {
   const { layouts } = useCntrlContext();
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutRanges = useMemo(() => {
@@ -28,14 +28,7 @@ export const useCurrentLayout = (): string => {
   const getCurrentLayout = useCallback((articleWidth: number) => {
     return layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end)!.layoutId;
   }, [layoutRanges]);
-  const [layoutId, setLayoutId] = useState<string>(getCurrentLayout(0));
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      getCurrentLayout(window.innerWidth);
-    }
-  }, []);
-
+  const [layoutId, setLayoutId] = useState<string | undefined>(undefined);
   useEffect(() => {
     if (!articleRectObserver) return;
     return articleRectObserver.on('resize', () => {

package/src/common/useKeyframeValue.ts

@@ -2,12 +2,12 @@ import { KeyframeType, TArticleItemAny } from '@cntrl-site/sdk';
 import isEqual from 'lodash.isequal';
 import { DependencyList, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
-import { useCurrentLayout } from './useCurrentLayout';
 import { KeyframesContext } from '../provider/KeyframesContext';
 import { AnimationData, Animator } from '../utils/Animator/Animator';
+import { useLayoutContext } from '../components/useLayoutContext';
 
 export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
-type ItemParamGetter<T> = (item: TArticleItemAny, layoutId: string) => T;
+type ItemParamGetter<T> = (item: TArticleItemAny, layoutId: string | undefined) => T;
 const emptyDeps: DependencyList = [];
 
 export const useKeyframeValue = <T>(
@@ -24,7 +24,7 @@ export const useKeyframeValue = <T>(
   itemParamsGetterRef.current = itemParamsGetter;
 
   const articleRectObserver = useContext(ArticleRectContext);
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const keyframesRepo = useContext(KeyframesContext);
   const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id), [item.id, keyframesRepo]);
   const paramValue = useMemo<T>(() => {

package/src/components/Article.tsx

@@ -5,6 +5,7 @@ import { Section } from './Section';
 import { Item } from './Item';
 import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { ArticleWrapper } from './ArticleWrapper';
 
 interface Props {
   article: TArticle;
@@ -18,18 +19,20 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
 
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
-      <div className="article" ref={articleRef}>
-        {article.sections.map((section, i) => {
-          const data = section.name ? sectionData[section.name] : {};
-          return (
-            <Section section={section} key={section.id} data={data}>
-              {article.sections[i].items.map(item => (
-                <Item item={item} key={item.id} sectionId={section.id} />
-              ))}
-            </Section>
-          );
-        })}
-      </div>
+      <ArticleWrapper>
+        <div className="article" ref={articleRef}>
+          {article.sections.map((section, i) => {
+            const data = section.name ? sectionData[section.name] : {};
+            return (
+              <Section section={section} key={section.id} data={data}>
+                {article.sections[i].items.map(item => (
+                  <Item item={item} key={item.id} sectionId={section.id} />
+                ))}
+              </Section>
+            );
+          })}
+        </div>
+      </ArticleWrapper>
       <JSXStyle id={id}>{`
        .article {
             position: relative;

package/src/components/ArticleWrapper.tsx

@@ -0,0 +1,36 @@
+import React, { FC, PropsWithChildren, useEffect, useId, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+import { LayoutContext } from '../provider/LayoutContext';
+
+export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const id = useId();
+  const [isPageLoaded, setIsPageLoaded] = useState(false);
+  const layoutId = useCurrentLayout();
+
+  useEffect(() => {
+    const onPageLoad = () => {
+      setIsPageLoaded(true);
+    };
+    if (document.readyState === 'complete') {
+      onPageLoad();
+    } else {
+      window.addEventListener('load', onPageLoad);
+      return () => window.removeEventListener('load', onPageLoad);
+    }
+  }, []);
+
+  return (
+    <LayoutContext.Provider value={layoutId}>
+      <div className="article-wrapper" style={{ opacity: layoutId && isPageLoaded ? 1 : 0 }}>
+        {children}
+      </div>
+      <JSXStyle id={id}>{`
+        .article-wrapper {
+          opacity: 1;
+          transition: opacity 0.2s ease; 
+        }
+      `}</JSXStyle>
+    </LayoutContext.Provider>
+  );
+};

package/src/components/Item.tsx

@@ -20,7 +20,6 @@ import { CustomItem } from './items/CustomItem';
 import { useCntrlContext } from '../provider/useCntrlContext';
 import { useItemPosition } from './useItemPosition';
 import { useItemDimensions } from './useItemDimensions';
-import { useCurrentLayout } from '../common/useCurrentLayout';
 import { useItemScale } from './useItemScale';
 import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
 import { useSectionHeightData } from './useSectionHeightMap';
@@ -28,6 +27,7 @@ import { getHoverStyles, getTransitions } from '../utils/HoverStyles/HoverStyles
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useStickyItemTop } from './items/useStickyItemTop';
 import { getAnchoredItemTop } from '../utils/getAnchoredItemTop';
+import { useLayoutContext } from './useLayoutContext';
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
@@ -50,12 +50,12 @@ const noop = () => null;
 export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const id = useId();
   const { layouts } = useCntrlContext();
+  const layout = useLayoutContext();
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
   const { top, left } = useItemPosition(item, sectionId);
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
-  const layout = useCurrentLayout();
   const { width, height } = useItemDimensions(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state.hover];
   const isInitialRef = useRef(true);
@@ -65,13 +65,14 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
     layoutValues.push(item.layoutParams);
   }
 
-  const sizing = isItemType(item, ArticleItemType.RichText)
+  const sizing = layout && isItemType(item, ArticleItemType.RichText)
     ? item.layoutParams[layout].sizing
     : undefined;
   const sizingAxis = parseSizing(sizing);
   const ItemComponent = itemsMap[item.type] || noop;
 
   const handleItemResize = (height: number) => {
+    if (!layout) return;
     const sticky = item.sticky[layout];
     if (!sticky) {
       setWrapperHeight(undefined);
@@ -96,7 +97,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   return (
     <div
       className={`item-wrapper-${item.id}`}
-      style={{ top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }}
+      style={isInitialRef.current ? {} : { top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }}
     >
       <div
         suppressHydrationWarning={true}

package/src/components/items/useEmbedVideoItem.ts

@@ -1,9 +1,9 @@
 import { TVimeoEmbedItem, TYoutubeEmbedItem } from '@cntrl-site/core';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useLayoutContext } from '../useLayoutContext';
 
 export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem, sectionId: string) => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
     (item, layoutId) => {

package/src/components/items/useFileItem.ts

@@ -1,11 +1,11 @@
 import { TImageItem, TVideoItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { useLayoutContext } from '../useLayoutContext';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
 export const useFileItem = (item: TImageItem | TVideoItem, sectionId: string) => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
     (item, layoutId) => {

package/src/components/items/useRectangleItem.ts

@@ -1,11 +1,11 @@
 import { TRectangleItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { useLayoutContext } from '../useLayoutContext';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
 export const useRectangleItem = (item: TRectangleItem, sectionId: string) => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
     (item, layoutId) => {

package/src/components/items/useRichTextItem.ts

@@ -1,15 +1,15 @@
 import { TRichTextItem, TTypePresetEntry } from '@cntrl-site/sdk';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
 import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ReactNode } from 'react';
+import { useLayoutContext } from '../useLayoutContext';
 
 const richTextConv = new RichTextConverter();
 
 export const useRichTextItem = (item: TRichTextItem): [ReactNode[], string, TTypePresetEntry | null] => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const { layouts, typePresets } = 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/src/components/items/useRichTextItemValues.ts

@@ -1,10 +1,9 @@
-import { useCurrentLayout } from '../../common/useCurrentLayout';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { TRichTextItem } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../useLayoutContext';
 
 export const useRichTextItemValues = (item: TRichTextItem, sectionId: string) => {
-  const layoutId = useCurrentLayout();
-
+  const layoutId = useLayoutContext();
   const angle = useKeyframeValue(
     item,
     (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }),

package/src/components/items/useStickyItemTop.ts

@@ -1,18 +1,22 @@
-import { TArticleItemAny } from '@cntrl-site/sdk';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
+import { useLayoutContext } from '../useLayoutContext';
 
 export function useStickyItemTop(item: TArticleItemAny, sectionHeightMap: Record<string, string>, sectionId: string) {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const { top } = useKeyframeValue<{ top: number; left: number }>(
     item,
-    (item, layoutId) => item.area[layoutId],
+    (item, layoutId) => {
+      if (!layoutId) return { top: 0, left: 0 }
+      return item.area[layoutId];
+    },
     (animator, scroll, value) => animator.getPositions(value, scroll),
     sectionId,
     [layoutId]
   );
-  const sticky = item.sticky[layoutId];
-  const sectionHeight = sectionHeightMap[layoutId];
-  return sticky ? `${getAnchoredItemTop(top - sticky.from, sectionHeight, item.area[layoutId].anchorSide)}` : 0
+  const sticky = layoutId ? item.sticky[layoutId] : undefined;
+  const sectionHeight = layoutId ? sectionHeightMap[layoutId] : '0vh';
+  const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
+  return sticky ? `${getAnchoredItemTop(top - sticky.from, sectionHeight, anchorSide)}` : 0
 }

package/src/components/useItemDimensions.ts

@@ -1,6 +1,6 @@
 import { TArticleItemAny } from '@cntrl-site/sdk';
-import { useCurrentLayout } from '../common/useCurrentLayout';
 import { useKeyframeValue } from '../common/useKeyframeValue';
+import { useLayoutContext } from './useLayoutContext';
 
 const defaultArea = {
   left: 0,
@@ -12,7 +12,7 @@ const defaultArea = {
 };
 
 export const useItemDimensions = (item: TArticleItemAny, sectionId: string) => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const { width, height } = useKeyframeValue<{ width: number; height: number }>(
     item,
     (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea,

package/src/components/useItemPosition.ts

@@ -1,19 +1,23 @@
 import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
-import { useCurrentLayout } from '../common/useCurrentLayout';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
+import { useLayoutContext } from './useLayoutContext';
 
 export const useItemPosition = (item: TArticleItemAny, sectionId: string) => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const { top, left } = useKeyframeValue<{ top: number; left: number }>(
     item,
-    (item, layoutId) => item.area[layoutId],
+    (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 : AnchorSide.Top;
   return {
-    top:  getItemTopStyle(top, item.area[layoutId].anchorSide),
+    top:  getItemTopStyle(top, anchorSide),
     left: `${left * 100}vw`
   };
 };

package/src/components/useItemScale.ts

@@ -1,16 +1,17 @@
-import { TArticleItemAny } from '@cntrl-site/sdk';
+import { ScaleAnchor, TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
-import { useCurrentLayout } from '../common/useCurrentLayout';
+import { useLayoutContext } from './useLayoutContext';
 
 export const useItemScale = (item: TArticleItemAny, sectionId: string) => {
-  const layout = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const { scale } = useKeyframeValue(
     item,
     (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }),
     (animator, scroll, value) => animator.getScale(value, scroll),
-    sectionId
+    sectionId,
+    [layoutId]
   );
-  const scaleAnchor = item.area[layout].scaleAnchor;
+  const scaleAnchor = layoutId ? item.area[layoutId].scaleAnchor : ScaleAnchor.MiddleCenter;
 
   return { scale, scaleAnchor };
 };

package/src/components/useLayoutContext.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { LayoutContext } from '../provider/LayoutContext';
+
+export function useLayoutContext() {
+  const layoutId = useContext(LayoutContext);
+  return layoutId;
+}

package/src/components/useSectionColor.ts

@@ -1,18 +1,19 @@
-import { useCurrentLayout } from '../common/useCurrentLayout';
 import { useMemo } from 'react';
 import { CntrlColor } from '@cntrl-site/sdk';
+import { useLayoutContext } from './useLayoutContext';
 
 type LayoutIdentifier = string;
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 
 export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
    return useMemo(() => {
+     if (!layoutId) return CntrlColor.parse(DEFAULT_COLOR);
      const layoutColor = colorData[layoutId];
      return CntrlColor.parse(
        !layoutColor
          ? DEFAULT_COLOR
          : layoutColor
      );
-   }, []);
+   }, [layoutId]);
 };

package/src/provider/LayoutContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const LayoutContext = createContext<string | undefined>(undefined);

package/.idea/codeStyles/codeStyleConfig.xml

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