@cntrl-site/sdk-nextjs 0.3.0 → 0.4.0

package/lib/common/useCurrentLayout.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentLayout = void 0;
+const useCntrlContext_1 = require("../provider/useCntrlContext");
+const react_1 = require("react");
+const ArticleRectContext_1 = require("../provider/ArticleRectContext");
+const useCurrentLayout = () => {
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const [initialLayout] = layouts;
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const layoutRanges = (0, react_1.useMemo)(() => {
+        const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
+        return sorted.reduce((acc, layout, i, layouts) => {
+            const next = layouts[i + 1];
+            return [
+                ...acc,
+                {
+                    layoutId: layout.id,
+                    start: layout.startsWith,
+                    end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
+                }
+            ];
+        }, []);
+    }, [layouts]);
+    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(isServer() ? 0 : window.innerWidth));
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver)
+            return;
+        return articleRectObserver.on('resize', () => {
+            const articleWidth = articleRectObserver.width;
+            setLayoutId(getCurrentLayout(articleWidth));
+        });
+    }, [articleRectObserver, getCurrentLayout]);
+    return layoutId;
+};
+exports.useCurrentLayout = useCurrentLayout;
+function isServer() {
+    return typeof window === 'undefined';
+}

package/lib/common/useKeyframeValue.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 emptyDeps = [];
+const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDeps) => {
+    const animatorGetterRef = (0, react_1.useRef)(animatorGetter);
+    const itemParamsGetterRef = (0, react_1.useRef)(itemParamsGetter);
+    animatorGetterRef.current = animatorGetter;
+    itemParamsGetterRef.current = itemParamsGetter;
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const keyframesRepo = (0, react_1.useContext)(KeyframesContext_1.KeyframesContext);
+    const keyframes = keyframesRepo.getItemKeyframes(item.id);
+    const paramValue = (0, react_1.useMemo)(() => {
+        return itemParamsGetterRef.current(item, layoutId);
+    }, [item, layoutId, ...deps]);
+    const [adjustedValue, setAdjustedValue] = (0, react_1.useState)(paramValue);
+    const adjustedValueRef = (0, react_1.useRef)(adjustedValue);
+    adjustedValueRef.current = adjustedValue;
+    const animator = (0, react_1.useMemo)(() => {
+        if (!layoutId || !keyframes.length)
+            return;
+        const animationData = keyframes
+            .filter(k => k.layoutId === layoutId)
+            .map(({ position, type, value }) => ({
+            position,
+            type,
+            value
+        }));
+        return new Animator_1.Animator(animationData);
+    }, [keyframes, layoutId]);
+    (0, react_1.useEffect)(() => {
+        setAdjustedValue(paramValue);
+    }, [paramValue]);
+    (0, react_1.useEffect)(() => {
+        if (!animator || !articleRectObserver)
+            return;
+        return articleRectObserver.on('resize', () => {
+            const scroll = articleRectObserver.scroll;
+            const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+            setAdjustedValue(newValue);
+        });
+    }, [animator, articleRectObserver]);
+    (0, react_1.useEffect)(() => {
+        if (!animator || !articleRectObserver)
+            return;
+        return articleRectObserver.on('scroll', () => {
+            const scroll = articleRectObserver.scroll;
+            const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+            if (!(0, lodash_isequal_1.default)(newValue, adjustedValueRef.current)) {
+                setAdjustedValue(newValue);
+            }
+        });
+    }, [animator, articleRectObserver]);
+    return adjustedValue;
+};
+exports.useKeyframeValue = useKeyframeValue;

package/lib/components/Article.js

@@ -2,10 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Article = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const Section_1 = require("./Section");
 const Item_1 = require("./Item");
+const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
+const ArticleRectContext_1 = require("../provider/ArticleRectContext");
 const Article = ({ article }) => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "article", children: article.sections.map((section, i) => ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item }, item.id))) }, section.id))) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+    const articleRef = (0, react_1.useRef)(null);
+    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
+    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) => ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item }, item.id))) }, section.id))) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
        .article {
             position: relative;
             overflow: hidden;

package/lib/components/Item.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const sdk_1 = require("@cntrl-site/sdk");
 const RectangleItem_1 = require("./items/RectangleItem");
 const ImageItem_1 = require("./items/ImageItem");
@@ -11,6 +12,9 @@ const VimeoEmbed_1 = require("./items/VimeoEmbed");
 const YoutubeEmbed_1 = require("./items/YoutubeEmbed");
 const CustomItem_1 = require("./items/CustomItem");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
+const useItemAngle_1 = require("./useItemAngle");
+const useItemPosition_1 = require("./useItemPosition");
+const useItemDimensions_1 = require("./useItemDimensions");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -23,17 +27,32 @@ const itemsMap = {
 const noop = () => null;
 const Item = ({ item }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const angle = (0, useItemAngle_1.useItemAngle)(item);
+    const { top, left } = (0, useItemPosition_1.useItemPosition)(item);
+    const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item);
     const layoutValues = [item.area];
+    const isInitialRef = (0, react_1.useRef)(true);
     if (item.layoutParams) {
         layoutValues.push(item.layoutParams);
     }
     const sizingAxis = parseSizing(item.commonParams.sizing);
     const ItemComponent = itemsMap[item.type] || noop;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-${item.id}`, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+    (0, react_1.useEffect)(() => {
+        isInitialRef.current = false;
+    }, []);
+    const styles = {
+        transform: `rotate(${angle}deg)`,
+        left: `${left * 100}vw`,
+        width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
+        height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+        top
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;
-              top: ${getItemTopStyle(area.top, area.anchorSide)};
+              z-index: ${area.zIndex};
+              top: ${(0, useItemPosition_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
               height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'unset'};
@@ -44,19 +63,6 @@ const Item = ({ item }) => {
       ` })] }));
 };
 exports.Item = Item;
-function getItemTopStyle(top, anchorSide) {
-    const defaultValue = `${top * 100}vw`;
-    if (!anchorSide)
-        return defaultValue;
-    switch (anchorSide) {
-        case sdk_1.AnchorSide.Top:
-            return defaultValue;
-        case sdk_1.AnchorSide.Center:
-            return `calc(50% + ${top * 100}vw)`;
-        case sdk_1.AnchorSide.Bottom:
-            return `calc(100% + ${top * 100}vw)`;
-    }
-}
 function parseSizing(sizing) {
     const axisSizing = sizing.split(' ');
     return {

package/lib/components/Page.js

@@ -5,15 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Page = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const html_react_parser_1 = __importDefault(require("html-react-parser"));
 const Article_1 = require("./Article");
+const KeyframesContext_1 = require("../provider/KeyframesContext");
 const Head_1 = require("./Head");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
 const generateTypePresetStyles_1 = require("../utils/generateTypePresetStyles/generateTypePresetStyles");
-const Page = ({ article, project, meta }) => {
+const Keyframes_1 = require("../provider/Keyframes");
+const Page = ({ article, project, meta, keyframes }) => {
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     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)(Article_1.Article, { article: article }), 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, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article }) }), 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/items/ImageItem.js

@@ -5,10 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useFileItem_1 = require("./useFileItem");
 const ImageItem = ({ item }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    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}`, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+    const { radius, strokeWidth } = (0, useFileItem_1.useFileItem)(item);
+    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: {
+                        borderRadius: `${radius * 100}vw`,
+                        borderWidth: `${strokeWidth * 100}vw`
+                    }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, opacity }]) => (`
            .image-wrapper-${item.id} {
               position: absolute;
               overflow: hidden;
@@ -17,9 +22,7 @@ const ImageItem = ({ item }) => {
               border-style: solid;
               box-sizing: border-box;
               border-color: ${strokeColor};
-              border-radius: ${radius * 100}vw;
               opacity: ${opacity};
-              border-width: ${strokeWidth * 100}vw;
             }`))}
         .image {
           width: 100%;

package/lib/components/items/RectangleItem.js

@@ -5,10 +5,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useRectangleItem_1 = require("./useRectangleItem");
 const RectangleItem = ({ item }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    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}` }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-      ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, fillColor, radius, strokeWidth }]) => (`
+    const { fillColor, radius, strokeWidth } = (0, useRectangleItem_1.useRectangleItem)(item);
+    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: {
+                        backgroundColor: `${fillColor}`,
+                        borderRadius: `${radius * 100}vw`,
+                        borderWidth: `${strokeWidth * 100}vw`
+                    } }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor }]) => (`
          .rectangle-${item.id} {
             position: absolute;
             width: 100%;
@@ -16,9 +22,6 @@ const RectangleItem = ({ item }) => {
             border-style: solid;
             box-sizing: border-box;
             border-color: ${strokeColor};
-            background-color: ${fillColor};
-            border-radius: ${radius * 100}vw;
-            border-width: ${strokeWidth * 100}vw;
           }`))}
       ` })] }) }));
 };

package/lib/components/items/VideoItem.js

@@ -5,10 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const LinkWrapper_1 = require("../LinkWrapper");
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useFileItem_1 = require("./useFileItem");
 const VideoItem = ({ item }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    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}`, 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", { jsx: true, children: `
-      ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+    const { radius, strokeWidth } = (0, useFileItem_1.useFileItem)(item);
+    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: {
+                    borderRadius: `${radius * 100}vw`,
+                    borderWidth: `${strokeWidth * 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", { jsx: true, children: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, opacity }]) => (`
          .video-wrapper-${item.id} {
             position: absolute;
             overflow: hidden;
@@ -17,8 +22,6 @@ const VideoItem = ({ item }) => {
             border-style: solid;
             box-sizing: border-box;
             border-color: ${strokeColor};
-            border-radius: ${radius * 100}vw;
-            border-width: ${strokeWidth * 100}vw;
             opacity: ${opacity};
           }`))}
       .video {

package/lib/components/items/VimeoEmbed.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VimeoEmbedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const VimeoEmbedItem = ({ item }) => {
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item);
     const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
@@ -22,18 +21,18 @@ const VimeoEmbedItem = ({ item }) => {
         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}`, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ radius }]) => (`
-          .embed-video-wrapper-${item.id} {
-            position: absolute;
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            border-radius: ${radius * 100}vw;
-          }`))}
+    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`
+                }, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+        .embed-video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
         .embedVideo {
           width: 100%;
           height: 100%;

package/lib/components/items/YoutubeEmbed.js

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.YoutubeEmbedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const YoutubeEmbedItem = ({ item }) => {
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { autoplay, controls, url } = item.commonParams;
+    const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item);
     const getValidYoutubeUrl = (url) => {
         const newUrl = new URL(url);
         const id = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
@@ -19,18 +18,18 @@ const YoutubeEmbedItem = ({ item }) => {
         return validUrl.href;
     };
     const validUrl = getValidYoutubeUrl(url);
-    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}`, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedYoutubeVideo", src: validUrl || '', allow: "accelerometer; autoplay; allowfullscreen;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ radius }]) => (`
-          .embed-youtube-video-wrapper-${item.id} {
-            position: absolute;
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            border-radius: ${radius * 100}vw;
-          }`))}
+    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}`, style: {
+                    borderRadius: `${radius * 100}vw`
+                }, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedYoutubeVideo", src: validUrl || '', allow: "accelerometer; autoplay; allowfullscreen;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+        .embed-youtube-video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
         .embedYoutubeVideo {
           width: 100%;
           height: 100%;

package/lib/components/items/useEmbedVideoItem.js

@@ -0,0 +1,16 @@
+"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 useEmbedVideoItem = (item) => {
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    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, [layoutId]);
+    return { radius };
+};
+exports.useEmbedVideoItem = useEmbedVideoItem;

package/lib/components/items/useFileItem.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFileItem = void 0;
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const useFileItem = (item) => {
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    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, [layoutId]);
+    const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
+    }, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, [layoutId]);
+    return { radius, strokeWidth };
+};
+exports.useFileItem = useFileItem;

package/lib/components/items/useRectangleItem.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRectangleItem = void 0;
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const defaultColor = 'rgba(0, 0, 0, 1)';
+const useRectangleItem = (item) => {
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    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, [layoutId]);
+    const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
+    }, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, [layoutId]);
+    const fillColor = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return defaultColor;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
+    }, (animator, scroll, value) => animator.getColor({ color: value }, scroll).color);
+    return { fillColor, strokeWidth, radius };
+};
+exports.useRectangleItem = useRectangleItem;

package/lib/components/useItemAngle.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemAngle = void 0;
+const useKeyframeValue_1 = require("../common/useKeyframeValue");
+const useItemAngle = (item) => {
+    const { angle } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll));
+    return angle;
+};
+exports.useItemAngle = useItemAngle;

package/lib/components/useItemDimensions.js

@@ -0,0 +1,19 @@
+"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 defaultArea = {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    angle: 0,
+    zIndex: 0
+};
+const useItemDimensions = (item) => {
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const { width, height } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea, (animator, scroll, value) => animator.getDimensions(value, scroll), [layoutId]);
+    return { width, height };
+};
+exports.useItemDimensions = useItemDimensions;

package/lib/components/useItemPosition.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemTopStyle = exports.useItemPosition = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const useKeyframeValue_1 = require("../common/useKeyframeValue");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+const defaultArea = {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    angle: 0,
+    zIndex: 0
+};
+const useItemPosition = (item) => {
+    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), [layoutId]);
+    return { top: getItemTopStyle(top, layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top), left };
+};
+exports.useItemPosition = useItemPosition;
+function getItemTopStyle(top, anchorSide) {
+    const defaultValue = `${top * 100}vw`;
+    if (!anchorSide)
+        return defaultValue;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Top:
+            return defaultValue;
+        case sdk_1.AnchorSide.Center:
+            return `calc(50% + ${top * 100}vw)`;
+        case sdk_1.AnchorSide.Bottom:
+            return `calc(100% + ${top * 100}vw)`;
+    }
+}
+exports.getItemTopStyle = getItemTopStyle;

package/lib/provider/ArticleRectContext.js

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

package/lib/provider/CntrlSdkContext.js

@@ -4,13 +4,19 @@ exports.CntrlSdkContext = void 0;
 class CntrlSdkContext {
     constructor(customItems) {
         this.customItems = customItems;
-        this.layouts = [];
+        this._layouts = [];
     }
     setTypePresets(typePresets) {
-        this.typePresets = typePresets;
+        this._typePresets = typePresets;
     }
     setLayouts(layouts) {
-        this.layouts = layouts;
+        this._layouts = layouts;
+    }
+    get layouts() {
+        return this._layouts;
+    }
+    get typePresets() {
+        return this._typePresets;
     }
 }
 exports.CntrlSdkContext = CntrlSdkContext;

package/lib/provider/Keyframes.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Keyframes = void 0;
+class Keyframes {
+    constructor(keyframes = []) {
+        this.keyframes = keyframes;
+    }
+    getItemKeyframes(itemId) {
+        return this.keyframes.filter(kf => kf.itemId === itemId);
+    }
+}
+exports.Keyframes = Keyframes;

package/lib/provider/KeyframesContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframesContext = void 0;
+const react_1 = require("react");
+const Keyframes_1 = require("./Keyframes");
+exports.KeyframesContext = (0, react_1.createContext)(new Keyframes_1.Keyframes());