@cntrl-site/sdk-nextjs 0.15.2-beta.0 → 0.15.5-0

package/lib/components/Article.js

@@ -16,14 +16,14 @@ 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)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => {
+    return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, Object.assign({ value: articleRectObserver }, { children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ 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.jsx)(Section_1.Section, Object.assign({ 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, Object.assign({ id: id }, { children: `
        .article {
             position: relative;
             overflow: clip;
           }
-      ` })] }));
+      ` }))] })));
 };
 exports.Article = Article;

package/lib/components/ArticleWrapper.js

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

package/lib/components/Head.js

@@ -11,18 +11,16 @@ const sdk_1 = require("@cntrl-site/sdk");
 const CNTRLHead = ({ meta, project }) => {
     const googleFonts = (0, html_react_parser_1.default)(project.fonts.google);
     const adobeFonts = (0, html_react_parser_1.default)(project.fonts.adobe);
-    const parsedFonts = {
-        ...(typeof googleFonts === 'object' ? googleFonts : {}),
-        ...(typeof adobeFonts === 'object' ? adobeFonts : {})
-    };
+    const parsedFonts = Object.assign(Object.assign({}, (typeof googleFonts === 'object' ? googleFonts : {})), (typeof adobeFonts === 'object' ? adobeFonts : {}));
     const customFonts = project.fonts.custom;
     const htmlHead = (0, html_react_parser_1.default)(project.html.head);
     const ffGenerator = new sdk_1.FontFaceGenerator(customFonts);
     const links = Object.values(parsedFonts).map((value, i) => {
+        var _a, _b;
         if (!value)
             return;
-        const rel = value?.rel || value.props?.rel;
-        const href = value?.href || value.props?.href;
+        const rel = (value === null || value === void 0 ? void 0 : value.rel) || ((_a = value.props) === null || _a === void 0 ? void 0 : _a.rel);
+        const href = (value === null || value === void 0 ? void 0 : value.href) || ((_b = value.props) === null || _b === void 0 ? void 0 : _b.href);
         if (!rel || !href)
             return;
         return ((0, jsx_runtime_1.jsx)("link", { rel: rel, href: href }, `link-${rel}-${href}`));

package/lib/components/Item.js

@@ -37,10 +37,11 @@ const itemsMap = {
 };
 const noop = () => null;
 const Item = ({ item, sectionId }) => {
+    var _a, _b;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
-    const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
+    const exemplary = (_b = (_a = layouts.find(l => l.id === layout)) === null || _a === void 0 ? void 0 : _a.exemplary) !== null && _b !== void 0 ? _b : 1;
     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);
@@ -74,18 +75,20 @@ const Item = ({ item, sectionId }) => {
         isInitialRef.current = false;
     }, []);
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
-    const styles = {
-        transform: `scale(${scale})`,
-        transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor],
-        width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
-            ? isRichText
-                ? `${width * exemplary}px`
-                : `${width * 100}vw`
-            : 'max-content'}`,
-        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: 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: `
+    const scaleIfRichText = isRichText
+        ? { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }
+        : {};
+    const styles = Object.assign(Object.assign({}, scaleIfRichText), { top: stickyTop });
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
+                        width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
+                            ? isRichText
+                                ? `${width * exemplary}px`
+                                : `${width * 100}vw`
+                            : 'max-content'}`,
+                        height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.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 }) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`
@@ -121,11 +124,12 @@ const Item = ({ item, sectionId }) => {
             }
           `);
                 })}
-      ` })] }));
+      ` }))] })));
 };
 exports.Item = Item;
 function getStickyItemWrapperHeight(sticky, itemHeight) {
-    const end = sticky.to ?? 100;
+    var _a;
+    const end = (_a = sticky.to) !== null && _a !== void 0 ? _a : 100;
     return end - sticky.from + itemHeight;
 }
 function parseSizing(sizing = 'manual') {

package/lib/components/LayoutStyle.js

@@ -9,10 +9,10 @@ const sdk_1 = require("@cntrl-site/sdk");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const LayoutStyle = ({ id, layouts, layoutId, children }) => {
     const layout = layouts.find(l => l.id === layoutId);
-    return ((0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
       ${(0, sdk_1.getLayoutMediaQuery)(layoutId, layouts)} {
-        ${children?.(layout)}
+        ${children === null || children === void 0 ? void 0 : children(layout)}
       }
-    ` }));
+    ` })));
 };
 exports.LayoutStyle = LayoutStyle;

package/lib/components/LinkWrapper.js

@@ -4,7 +4,7 @@ exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const LinkWrapper = ({ url, children }) => {
     const validUrl = url && buildValidUrl(url);
-    return url ? ((0, jsx_runtime_1.jsx)("a", { href: validUrl, target: url.startsWith('/') || url.startsWith('#') ? '_self' : '_blank', rel: "noreferrer", children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+    return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl, target: url.startsWith('/') || url.startsWith('#') ? '_self' : '_blank', rel: "noreferrer" }, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
 };
 exports.LinkWrapper = LinkWrapper;
 function buildValidUrl(url) {

package/lib/components/Page.js

@@ -18,6 +18,6 @@ const Page = ({ article, project, meta, keyframes, sectionData }) => {
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
     const { typePresets, layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }), beforeBodyClose, typePresets && typePresets.presets.length > 0 && ((0, jsx_runtime_1.jsx)("style", { children: (0, generateTypePresetStyles_1.generateTypePresetStyles)(typePresets, layouts) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, Object.assign({ value: keyframesRepo }, { children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) })), beforeBodyClose, typePresets && typePresets.presets.length > 0 && ((0, jsx_runtime_1.jsx)("style", { children: (0, generateTypePresetStyles_1.generateTypePresetStyles)(typePresets, layouts) }))] }));
 };
 exports.Page = Page;

package/lib/components/Section.js

@@ -33,10 +33,10 @@ 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: {
+        return (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sectionRef }, { children: (0, jsx_runtime_1.jsx)(SectionComponent, Object.assign({ data: data }, { children: children })) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `section-${section.id}`, id: section.name, style: {
                     backgroundColor: backgroundColor.toCss()
-                }, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                }, ref: sectionRef }, { children: children })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};
@@ -48,7 +48,7 @@ const Section = ({ section, data, children }) => {
           background-color: ${backgroundColor.fmt('rgba')};
         }
       }
-    ` })] }));
+    ` }))] }));
 };
 exports.Section = Section;
 function getSectionHeight(heightData) {

package/lib/components/items/CustomItem.js

@@ -15,7 +15,7 @@ const CustomItem = ({ item }) => {
     const component = sdk.customItems.get(item.commonParams.name);
     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}`, 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", Object.assign({ className: `custom-component-${item.id}` }, { children: component({}) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: item.id }, { children: `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
             .custom-component-${item.id} {
               transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};
@@ -24,6 +24,6 @@ const CustomItem = ({ item }) => {
               ${(0, HoverStyles_1.getHoverStyles)(['angle'], hoverParams)}
             }
           `);
-                })}` })] }));
+                })}` }))] }));
 };
 exports.CustomItem = CustomItem;

package/lib/components/items/ImageItem.js

@@ -14,19 +14,20 @@ const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const ImageItem = ({ item, sectionId }) => {
+    var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     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: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, style: {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         opacity: `${opacity}`,
                         borderColor: `${borderColor.toCss()}`,
                         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: `
+                    } }, { children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .image-wrapper-${item.id} {
             border-color: ${borderColor.fmt('rgba')};
@@ -58,6 +59,6 @@ const ImageItem = ({ item, sectionId }) => {
               }
             `);
                     })}
-      ` })] }) }));
+      ` }))] }) })));
 };
 exports.ImageItem = ImageItem;

package/lib/components/items/RectangleItem.js

@@ -14,13 +14,14 @@ const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const RectangleItem = ({ item, sectionId }) => {
+    var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     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]);
-    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: `rectangle-${item.id}`, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, style: {
                         backgroundColor: `${backgroundColor.toCss()}`,
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
@@ -30,7 +31,7 @@ const RectangleItem = ({ item, sectionId }) => {
                         backdropFilter: backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset',
                         // @ts-ignore
                         '-webkit-backdrop-filter': backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset',
-                    } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                    } }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {
             background-color: ${backgroundColor.fmt('rgba')};
@@ -54,6 +55,6 @@ const RectangleItem = ({ item, sectionId }) => {
             }
           `);
                     })}
-      ` })] }) }));
+      ` }))] }) })));
 };
 exports.RectangleItem = RectangleItem;

package/lib/components/items/RichTextItem.js

@@ -12,6 +12,7 @@ const useRichTextItem_1 = require("./useRichTextItem");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRichTextItemValues_1 = require("./useRichTextItemValues");
+const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
 const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
@@ -22,7 +23,7 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
     (0, react_1.useEffect)(() => {
         if (!ref || !onResize)
             return;
-        const observer = new ResizeObserver((entries) => {
+        const observer = new resize_observer_polyfill_1.default((entries) => {
             const [entry] = entries;
             onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
         });
@@ -31,13 +32,13 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
             observer.unobserve(ref);
         };
     }, [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: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `${className} rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
-                }, children: (0, jsx_runtime_1.jsx)("div", { className: "rich-text-scale", style: {
-                        transformOrigin: 'top left',
-                        transform: 'scale(var(--layout-deviation))'
-                    }, children: content }) }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rich-text-scale", style: {
+                    // transformOrigin: 'top left',
+                    // transform: 'scale(var(--layout-deviation))'
+                    } }, { children: content })) })), (0, jsx_runtime_1.jsxs)(style_1.default, Object.assign({ 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', 'blur'], hoverParams)};
@@ -46,6 +47,6 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
               ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur'], hoverParams)}
             }
           `);
-                    })}`] })] }));
+                    })}`] }))] }));
 };
 exports.RichTextItem = RichTextItem;

package/lib/components/items/VideoItem.js

@@ -14,19 +14,20 @@ const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const VideoItem = ({ item, sectionId }) => {
+    var _a;
     const id = (0, react_1.useId)();
     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)(() => 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: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
                     borderWidth: `${strokeWidth * 100}vw`,
                     opacity: `${opacity}`,
                     borderColor: `${borderColor.toCss()}`,
                     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: `
+                } }, { children: (0, jsx_runtime_1.jsx)("video", Object.assign({ 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, Object.assign({ id: id }, { children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .video-wrapper-${item.id} {
             border-color: ${borderColor.fmt('rgba')};
@@ -59,6 +60,6 @@ const VideoItem = ({ item, sectionId }) => {
             }
           `);
                 })}
-    ` })] }));
+    ` }))] })));
 };
 exports.VideoItem = VideoItem;

package/lib/components/items/VimeoEmbed.js

@@ -15,6 +15,7 @@ const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const VimeoEmbedItem = ({ item, sectionId }) => {
+    var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
@@ -36,7 +37,7 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
         return validURL.href;
     };
     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: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
@@ -48,7 +49,7 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.pause();
-                }, children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                } }, { children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;
         overflow: hidden;
@@ -71,6 +72,6 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
           }
         `);
                 })}
-    ` })] }));
+    ` }))] })));
 };
 exports.VimeoEmbedItem = VimeoEmbedItem;

package/lib/components/items/YoutubeEmbed.js

@@ -16,6 +16,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
 const YoutubeEmbedItem = ({ item, sectionId }) => {
+    var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { play, controls, url } = item.commonParams;
@@ -48,12 +49,13 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
             }
         });
         return () => {
+            var _a;
             setPlayer(undefined);
             player.destroy();
-            placeholder.parentElement?.removeChild(placeholder);
+            (_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
         };
     }, [YT, div]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.playVideo();
@@ -65,7 +67,7 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
                     borderRadius: `${radius * 100}vw`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
-                } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                } }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         .embed-youtube-video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
@@ -88,6 +90,6 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
             }
           `);
                 })}
-      ` })] }));
+      ` }))] })));
 };
 exports.YoutubeEmbedItem = YoutubeEmbedItem;

package/lib/components/items/useRichTextItem.js

@@ -6,11 +6,12 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useLayoutContext_1 = require("../useLayoutContext");
 const richTextConv = new RichTextConverter_1.RichTextConverter();
 const useRichTextItem = (item) => {
+    var _a;
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { layouts, typePresets } = (0, useCntrlContext_1.useCntrlContext)();
     const presetId = layoutId ? item.layoutParams[layoutId].preset : null;
     const preset = presetId
-        ? typePresets?.presets.find(p => p.id === presetId) ?? null
+        ? (_a = typePresets === null || typePresets === void 0 ? void 0 : typePresets.presets.find(p => p.id === presetId)) !== null && _a !== void 0 ? _a : null
         : null;
     const [content, styles] = richTextConv.toHtml(item, layouts);
     return [content, styles, preset];

package/lib/components/useSectionHeightMap.js

@@ -16,5 +16,5 @@ function getSectionHeightMap(sectionHeight) {
 }
 exports.getSectionHeightMap = getSectionHeightMap;
 function getDefaultHeightData(layouts) {
-    return layouts.reduce((acc, layout) => ({ ...acc, [layout.id]: '0' }), {});
+    return layouts.reduce((acc, layout) => (Object.assign(Object.assign({}, acc), { [layout.id]: '0' })), {});
 }

package/lib/provider/CntrlProvider.js

@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const CntrlContext_1 = require("./CntrlContext");
 const defaultContext_1 = require("./defaultContext");
 const CntrlProvider = ({ children }) => {
-    return ((0, jsx_runtime_1.jsx)(CntrlContext_1.CntrlContext.Provider, { value: defaultContext_1.cntrlSdkContext, children: children }));
+    return ((0, jsx_runtime_1.jsx)(CntrlContext_1.CntrlContext.Provider, Object.assign({ value: defaultContext_1.cntrlSdkContext }, { children: children })));
 };
 exports.CntrlProvider = CntrlProvider;

package/lib/provider/CntrlSdkContext.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CntrlSdkContext = void 0;
 class CntrlSdkContext {
@@ -8,17 +17,19 @@ class CntrlSdkContext {
         this._layouts = [];
         this.sectionHeightMap = new Map();
     }
-    async resolveSectionData(sections) {
-        const resolvers = sections.map(section => {
-            const resolver = section.name ? this.customSections.getResolver(section.name) : undefined;
-            if (!resolver)
-                return;
-            return {
-                name: section.name,
-                resolver
-            };
-        }).filter(isDefined);
-        return Object.fromEntries(await Promise.all(resolvers.map(async ({ name, resolver }) => [name, await resolver()])));
+    resolveSectionData(sections) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const resolvers = sections.map(section => {
+                const resolver = section.name ? this.customSections.getResolver(section.name) : undefined;
+                if (!resolver)
+                    return;
+                return {
+                    name: section.name,
+                    resolver
+                };
+            }).filter(isDefined);
+            return Object.fromEntries(yield Promise.all(resolvers.map(({ name, resolver }) => __awaiter(this, void 0, void 0, function* () { return [name, yield resolver()]; }))));
+        });
     }
     init({ project, typePresets, article }) {
         this.setTypePresets(typePresets);

package/lib/provider/CustomSectionRegistry.js

@@ -10,10 +10,12 @@ class CustomSectionRegistry {
         return this;
     }
     getComponent(name) {
-        return this.definitions.get(name)?.component;
+        var _a;
+        return (_a = this.definitions.get(name)) === null || _a === void 0 ? void 0 : _a.component;
     }
     getResolver(name) {
-        return this.definitions.get(name)?.dataResolver;
+        var _a;
+        return (_a = this.definitions.get(name)) === null || _a === void 0 ? void 0 : _a.dataResolver;
     }
 }
 exports.CustomSectionRegistry = CustomSectionRegistry;

package/lib/utils/ArticleRectManager/ArticleRectObserver.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArticleRectObserver = void 0;
 const EventEmitter_1 = require("../EventEmitter");
+const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
 class ArticleRectObserver extends EventEmitter_1.EventEmitter {
     constructor() {
         super();
@@ -14,7 +18,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
         this.handleScroll = (scroll) => {
             this.setScroll(scroll / this.articleWidth);
         };
-        this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
+        this.resizeObserver = new resize_observer_polyfill_1.default(this.handleResize.bind(this));
     }
     get scroll() {
         return this.scrollPos;

package/lib/utils/EventEmitter.js

@@ -6,16 +6,18 @@ class EventEmitter {
         this.listeners = {};
     }
     on(event, listener) {
+        var _a;
         if (!Array.isArray(this.listeners[event])) {
             this.listeners[event] = [];
         }
-        this.listeners[event]?.push(listener);
+        (_a = this.listeners[event]) === null || _a === void 0 ? void 0 : _a.push(listener);
         return () => {
             this.off(event, listener);
         };
     }
     off(event, listener) {
-        const filtered = this.listeners[event]?.filter(l => l !== listener);
+        var _a;
+        const filtered = (_a = this.listeners[event]) === null || _a === void 0 ? void 0 : _a.filter(l => l !== listener);
         this.listeners[event] = filtered && filtered.length > 0 ? filtered : undefined;
     }
     emit(event, payload) {

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -11,6 +11,7 @@ exports.FontStyles = {
 };
 class RichTextConverter {
     toHtml(richText, layouts) {
+        var _a, _b, _c;
         const { text, blocks = [] } = richText.commonParams;
         const root = [];
         const styleRules = layouts.reduce((rec, layout) => {
@@ -18,16 +19,17 @@ class RichTextConverter {
             return rec;
         }, {});
         let currentLineHeight = layouts.reduce((rec, layout) => {
+            var _a, _b;
             const styles = richText.layoutParams[layout.id].styles;
-            rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value ?? '0';
+            rec[layout.id] = (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.find(s => s.style === 'LINEHEIGHT')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '0';
             return rec;
         }, {});
         for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
             const block = blocks[blockIndex];
             const content = text.slice(block.start, block.end);
-            const entities = block.entities.sort((a, b) => a.start - b.start) ?? [];
+            const entities = (_a = block.entities.sort((a, b) => a.start - b.start)) !== null && _a !== void 0 ? _a : [];
             if (content.length === 0) {
-                root.push((0, jsx_runtime_1.jsx)("div", { className: `rt_${richText.id}_br_${blockIndex}`, children: (0, jsx_runtime_1.jsx)("br", {}) }));
+                root.push((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rt_${richText.id}_br_${blockIndex}` }, { children: (0, jsx_runtime_1.jsx)("br", {}) })));
                 layouts.forEach(l => {
                     const lh = RichTextConverter.fromDraftToInline({
                         name: 'LINEHEIGHT',
@@ -41,13 +43,13 @@ class RichTextConverter {
                 const params = richText.layoutParams[layoutId];
                 const styles = params.styles
                     .filter(s => s.start >= block.start && s.end <= block.end)
-                    .map(s => ({ ...s, start: s.start - block.start, end: s.end - block.start }));
+                    .map(s => (Object.assign(Object.assign({}, s), { start: s.start - block.start, end: s.end - block.start })));
                 return ({
                     layout: layoutId,
                     styles: this.normalizeStyles(styles, entities)
                 });
             });
-            const sameLayouts = groupBy(newStylesGroup, (item) => this.serializeRanges(item.styles ?? []));
+            const sameLayouts = groupBy(newStylesGroup, (item) => { var _a; return this.serializeRanges((_a = item.styles) !== null && _a !== void 0 ? _a : []); });
             for (const group of Object.values(sameLayouts)) {
                 const blockClass = `rt_${richText.id}-b${blockIndex}_${layouts.map(l => group.some(g => g.layout === l.id) ? '1' : '0').join('')}`;
                 const kids = [];
@@ -64,7 +66,7 @@ class RichTextConverter {
           `);
                 });
                 const item = group[0];
-                const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
+                const entitiesGroups = (_b = this.groupEntities(entities, item.styles)) !== null && _b !== void 0 ? _b : [];
                 let offset = 0;
                 for (const entity of entitiesGroups) {
                     const entityKids = [];
@@ -76,7 +78,7 @@ class RichTextConverter {
                         if (offset < style.start) {
                             entityKids.push(sliceSymbols(content, offset, style.start));
                         }
-                        entityKids.push((0, jsx_runtime_1.jsx)("span", { className: `s-${style.start}-${style.end}`, children: sliceSymbols(content, style.start, style.end) }, style.start));
+                        entityKids.push((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `s-${style.start}-${style.end}` }, { children: sliceSymbols(content, style.start, style.end) }), style.start));
                         offset = style.end;
                     }
                     if (offset < entity.end) {
@@ -84,7 +86,7 @@ class RichTextConverter {
                         offset = entity.end;
                     }
                     if (entity.link) {
-                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: entity.link, children: entityKids }, entity.start));
+                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: entity.link }, { children: entityKids }), entity.start));
                         continue;
                     }
                     kids.push(...entityKids);
@@ -94,14 +96,14 @@ class RichTextConverter {
                 }
                 for (const item of group) {
                     const { exemplary } = layouts.find(l => l.id === item.layout);
-                    const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
+                    const entitiesGroups = (_c = this.groupEntities(entities, item.styles)) !== null && _c !== void 0 ? _c : [];
                     for (const entitiesGroup of entitiesGroups) {
                         if (!entitiesGroup.stylesGroup)
                             continue;
                         for (const styleGroup of entitiesGroup.stylesGroup) {
                             const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
                             const color = styleGroup.styles.find(s => s.name === 'COLOR');
-                            if (lineHeight?.value) {
+                            if (lineHeight === null || lineHeight === void 0 ? void 0 : lineHeight.value) {
                                 currentLineHeight[item.layout] = lineHeight.value;
                             }
                             styleRules[item.layout].push(`
@@ -121,7 +123,7 @@ class RichTextConverter {
                         }
                     }
                 }
-                root.push((0, jsx_runtime_1.jsx)("div", { className: blockClass, children: kids }, blockClass));
+                root.push((0, jsx_runtime_1.jsx)("div", Object.assign({ className: blockClass }, { children: kids }), blockClass));
             }
         }
         const styles = layouts.map(l => `
@@ -185,12 +187,8 @@ class RichTextConverter {
             const start = entityDividers[i];
             const end = entityDividers[i + 1];
             const entity = entities.find(e => e.start === start);
-            entitiesGroups.push({
-                stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end),
-                start,
-                end,
-                ...(entity && { link: entity.data.url })
-            });
+            entitiesGroups.push(Object.assign({ stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end), start,
+                end }, (entity && { link: entity.data.url })));
         }
         return entitiesGroups;
     }
@@ -199,7 +197,7 @@ class RichTextConverter {
         const map = {
             'COLOR': { 'color': getResolvedValue(value, name) },
             'TYPEFACE': { 'font-family': `${value}` },
-            'FONTSTYLE': value ? { ...exports.FontStyles[value] } : {},
+            'FONTSTYLE': value ? Object.assign({}, exports.FontStyles[value]) : {},
             'FONTWEIGHT': { 'font-weight': value },
             'FONTSIZE': { 'font-size': `${parseFloat(value) * exemplary}px` },
             'LINEHEIGHT': { 'line-height': `${parseFloat(value) * exemplary}px` },

package/lib/utils/Youtube/YouTubeIframeApiLoader.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.captureStackTrace = exports.YouTubeIframeApiLoader = void 0;
 const YT_IFRAME_API_URL = 'https://www.youtube.com/iframe_api';
@@ -12,12 +21,14 @@ class YouTubeIframeApiLoader {
     constructor() {
         this.loadingPromise = this.loadApi();
     }
-    async getApi() {
-        await this.loadingPromise;
-        if (!window.YT) {
-            throw new Error('YouTube IFrame API is not loaded');
-        }
-        return window.YT;
+    getApi() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.loadingPromise;
+            if (!window.YT) {
+                throw new Error('YouTube IFrame API is not loaded');
+            }
+            return window.YT;
+        });
     }
     loadApi() {
         return new Promise((resolve, reject) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.15.2-beta.0",
+  "version": "0.15.5-0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -21,16 +21,17 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^1.1.9",
+    "@cntrl-site/sdk": "^1.1.10",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
+    "resize-observer-polyfill": "^1.5.1",
     "styled-jsx": "^5.0.2"
   },
   "peerDependencies": {
     "@types/lodash.isequal": "^4.5.6",
     "lodash.isequal": "^4.5.0",
-    "next": "^13.4.2",
+    "next": "^13.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/components/ArticleWrapper.tsx

@@ -12,11 +12,11 @@ export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
     const onPageLoad = () => {
       setIsPageLoaded(true);
     };
-    if (document.readyState === 'complete') {
-      onPageLoad();
+    if (document.readyState === 'loading') {
+      window.addEventListener('DOMContentLoaded', onPageLoad);
+      return () => window.removeEventListener('DOMContentLoaded', onPageLoad);
     } else {
-      window.addEventListener('load', onPageLoad);
-      return () => window.removeEventListener('load', onPageLoad);
+      onPageLoad();
     }
   }, []);
   const layoutDeviationStyle = {'--layout-deviation': layoutDeviation} as CSSProperties;

package/src/components/Item.tsx

@@ -88,16 +88,12 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   }, []);
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
+  const scaleIfRichText = isRichText
+    ? { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }
+    : {};
 
   const styles = {
-    transform: `scale(${scale})`,
-    transformOrigin: ScaleAnchorMap[scaleAnchor],
-    width: `${sizingAxis.x === SizingType.Manual
-      ? isRichText
-        ? `${width * exemplary}px`
-        : `${width * 100}vw`
-      : 'max-content'}`,
-    height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+    ...scaleIfRichText,
     top: stickyTop
   };
 
@@ -111,7 +107,18 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
         className={`item-${item.id}`}
         style={isInitialRef.current ? {} : styles }
       >
-        <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
+        <div style={{
+          width: `${sizingAxis.x === SizingType.Manual
+            ? isRichText
+              ? `${width * exemplary}px`
+              : `${width * 100}vw`
+            : 'max-content'}`,
+          height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+          transform: `scale(${scale})`,
+          transformOrigin: ScaleAnchorMap[scaleAnchor]
+        }}>
+          <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
+        </div>
       </div>
       <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {

package/src/components/items/RichTextItem.tsx

@@ -6,6 +6,7 @@ import { useRichTextItem } from './useRichTextItem';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRichTextItemValues } from './useRichTextItemValues';
+import ResizeObserver from 'resize-observer-polyfill';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles, preset] = useRichTextItem(item);
@@ -38,8 +39,8 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         }}
       >
         <div className="rich-text-scale" style={{
-          transformOrigin: 'top left',
-          transform: 'scale(var(--layout-deviation))'
+          // transformOrigin: 'top left',
+          // transform: 'scale(var(--layout-deviation))'
         }}>
           {content}
         </div>

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../EventEmitter';
+import ResizeObserver from 'resize-observer-polyfill';
 
 interface EventMap {
   'scroll': undefined;