@gxpl/sdk 0.0.13 → 0.0.14

package/lib/sdk/transitions/utils/types.d.ts

@@ -0,0 +1,49 @@
+export type Relation = {
+    type: 'slide' | 'fade';
+    from: string;
+    to: string;
+    direction: Direction;
+};
+export type Direction = 'north' | 'east' | 'south' | 'west';
+export type Transition = PreparingTransition | ActiveTransition | InstantTransition | SettlingTransition;
+export type PreparingTransition = {
+    stage: 'preparing';
+    startX: number;
+    startY: number;
+};
+export type ActiveTransition = {
+    stage: 'active';
+    direction: Direction;
+    type: 'slide' | 'fade';
+    from: string;
+    to: string;
+    startX: number;
+    startY: number;
+    currentX: number;
+    currentY: number;
+};
+export type SettlingTransition = {
+    stage: 'settling';
+    type: 'slide' | 'fade';
+    success: boolean;
+    from: string;
+    to: string;
+};
+export type InstantTransition = {
+    stage: 'active';
+    type: 'slide' | 'fade';
+    from: string;
+    to: string;
+    direction?: Direction;
+};
+export type TransitionScene = {
+    id: string;
+    styles: TransitionSceneStyle;
+};
+export type TransitionSceneStyle = {
+    startX: number;
+    startY: number;
+    x: number;
+    y: number;
+    opacity: number;
+};

package/lib/sdk/transitions/utils/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/sdk/types/project/Page.d.ts

@@ -1,11 +1,4 @@
-import { GenericMeta } from './Meta';
-export interface PageMeta extends GenericMeta {
-    enabled?: boolean;
-}
 export interface Page {
     id: string;
-    title: string;
     articleId: string;
-    slug: string;
-    meta?: PageMeta;
 }

package/lib/sdk/types/project/Project.d.ts

@@ -1,3 +1,4 @@
+import { Relation } from './Relation';
 import { Fonts } from './Fonts';
 import { Meta } from './Meta';
 import { Page } from './Page';
@@ -13,4 +14,5 @@ export interface Project {
     exemplary: number;
     pages: Page[];
     fonts: Fonts;
+    relations: Relation[];
 }

package/lib/sdk/types/project/Relation.d.ts

@@ -0,0 +1,8 @@
+export interface Relation {
+    from: ArticleId;
+    to: ArticleId;
+    type: 'slide' | 'fade';
+    direction: 'north' | 'east' | 'south' | 'west';
+}
+type ArticleId = string;
+export {};

package/lib/sdk/types/project/Relation.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/sdk-nextjs/components/Article.d.ts

@@ -1,9 +1,16 @@
 import { FC } from 'react';
 import { Article as TArticle } from '../../sdk/types/article/Article';
+import { KeyframeAny } from '../../sdk/types/keyframe/Keyframe';
 interface Props {
     article: TArticle;
-    sectionData: Record<SectionName, any>;
+    keyframes: KeyframeAny[];
+    styles: {
+        x: number;
+        y: number;
+        opacity: number;
+        startX: number;
+        startY: number;
+    } | undefined;
 }
 export declare const Article: FC<Props>;
-type SectionName = string;
 export {};

package/lib/sdk-nextjs/components/Article.js

@@ -15,11 +15,14 @@ const ArticleWrapper_1 = require("./ArticleWrapper");
 const InteractionsContext_1 = require("../provider/InteractionsContext");
 const WebGLContextManagerContext_1 = require("../provider/WebGLContextManagerContext");
 const effects_1 = require("@cntrl-site/effects");
-const Article = ({ article, sectionData }) => {
+const KeyframesContext_1 = require("../provider/KeyframesContext");
+const Keyframes_1 = require("../provider/Keyframes");
+const Article = ({ article, styles, keyframes }) => {
     const articleRef = (0, react_1.useRef)(null);
     const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
     const id = (0, react_1.useId)();
     const [articleHeight, setArticleHeight] = (0, react_1.useState)(1);
+    const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver)
             return;
@@ -28,10 +31,10 @@ const Article = ({ article, sectionData }) => {
         });
     }, [articleRectObserver]);
     const webglContextManager = (0, react_1.useMemo)(() => new effects_1.WebGLContextManager(), []);
-    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, 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, articleHeight: articleHeight }, item.id))) }, section.id));
-                            }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { id: article.id, styles: styles, children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
+                                    const data = {};
+                                    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, articleHeight: articleHeight }, item.id))) }, section.id));
+                                }) }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
          position: relative;
          overflow: clip;

package/lib/sdk-nextjs/components/ArticleWrapper.d.ts

@@ -1,2 +1,13 @@
 import { FC, PropsWithChildren } from 'react';
-export declare const ArticleWrapper: FC<PropsWithChildren<{}>>;
+interface Props {
+    id: string;
+    styles: {
+        x: number;
+        y: number;
+        opacity: number;
+        startX: number;
+        startY: number;
+    } | undefined;
+}
+export declare const ArticleWrapper: FC<PropsWithChildren<Props>>;
+export {};

package/lib/sdk-nextjs/components/ArticleWrapper.js

@@ -2,10 +2,163 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArticleWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const useLayoutDeviation_1 = require("../common/useLayoutDeviation");
-const ArticleWrapper = ({ children }) => {
+const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
+const ArticleWrapper = ({ children, id, styles: sceneStyles }) => {
+    var _a;
     const { layoutDeviation } = (0, useLayoutDeviation_1.useLayoutDeviation)();
     const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "article-wrapper", style: Object.assign({}, layoutDeviationStyle), children: children }));
+    const sceneRef = (0, react_1.useRef)(null);
+    const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
+    const { isControlledTransitioning, isSettling, isInstantTransitioning } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
+        isControlledTransitioning: state.matches('transitioning'),
+        isSettling: state.matches('settling'),
+        isInstantTransitioning: state.matches('instant_transitioning'),
+    }));
+    const type = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => {
+        const { transition } = state.context;
+        if (!transition || !('type' in transition))
+            return undefined;
+        return transition.type;
+    });
+    const isTransitioningRef = (0, react_1.useRef)(false);
+    const isTransitioning = isControlledTransitioning || isInstantTransitioning;
+    const handleTouchStart = (0, react_1.useCallback)((e) => {
+        const { context } = actorRef.getSnapshot();
+        const { transitionReady } = context;
+        if (isTransitionDisabled(transitionReady))
+            return;
+        const touch = e.touches[0];
+        actorRef.send({
+            type: 'SWIPE_PREPARE',
+            touchData: {
+                startX: touch.clientX,
+                startY: touch.clientY,
+            }
+        });
+    }, [actorRef]);
+    const handleTouchMove = (0, react_1.useCallback)((e) => {
+        const touch = e.touches[0];
+        const { context } = actorRef.getSnapshot();
+        const { transition, transitionReady } = context;
+        const el = sceneRef.current;
+        if (!el || !transition || !('startX' in transition) || !('startY' in transition))
+            return;
+        const deltaX = touch.clientX - transition.startX;
+        const deltaY = touch.clientY - transition.startY;
+        const direction = getDirectionFromDelta(deltaX, deltaY);
+        const isTransitionAllowed = canTransition(direction, el);
+        if ((!transitionReady[direction] && transition.stage === 'preparing') || !isTransitionAllowed) {
+            actorRef.send({ type: 'SWIPE_CANCEL' });
+            return;
+        }
+        if (transition.stage === 'preparing') {
+            actorRef.send({
+                type: 'SWIPE_START',
+                direction,
+                touchData: {
+                    x: touch.clientX,
+                    y: touch.clientY,
+                }
+            });
+        }
+        else if (transition.stage === 'active') {
+            actorRef.send({
+                type: 'SWIPE_PROGRESS_UPDATE',
+                touchData: {
+                    x: touch.clientX,
+                    y: touch.clientY,
+                }
+            });
+        }
+    }, [actorRef]);
+    const handleTouchEnd = (0, react_1.useCallback)(() => {
+        const { context } = actorRef.getSnapshot();
+        const { transition } = context;
+        if (!transition || transition.stage !== 'active') {
+            actorRef.send({ type: 'SWIPE_CANCEL' });
+            return;
+        }
+        actorRef.send({
+            type: 'SWIPE_END',
+        });
+    }, [actorRef]);
+    (0, react_1.useEffect)(() => {
+        const el = sceneRef.current;
+        if (!el)
+            return;
+        el.addEventListener('touchstart', handleTouchStart, { passive: true });
+        el.addEventListener('touchmove', handleTouchMove, { passive: true });
+        el.addEventListener('touchend', handleTouchEnd);
+        return () => {
+            el.removeEventListener('touchstart', handleTouchStart);
+            el.removeEventListener('touchmove', handleTouchMove);
+            el.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [handleTouchStart, handleTouchMove, handleTouchEnd]);
+    (0, react_1.useEffect)(() => {
+        const el = sceneRef.current;
+        if (!isSettling || !el)
+            return;
+        const handleTransitionEnd = (e) => {
+            const { context } = actorRef.getSnapshot();
+            const { transition } = context;
+            if (!transition || transition.stage !== 'settling') {
+                throw new Error('Transition not found');
+            }
+            const { type } = transition;
+            const propType = type === 'slide' ? 'transform' : 'opacity';
+            if (e.propertyName !== propType)
+                return;
+            actorRef.send({
+                type: 'SETTLE_END',
+            });
+        };
+        el.addEventListener('transitionend', handleTransitionEnd);
+        return () => {
+            el.removeEventListener('transitionend', handleTransitionEnd);
+        };
+    }, [actorRef, isSettling]);
+    (0, react_1.useEffect)(() => {
+        const scene = sceneRef.current;
+        if (!isTransitioning || isTransitioningRef.current || !scene)
+            return;
+        isTransitioningRef.current = true;
+        const { context } = actorRef.getSnapshot();
+        const { transition } = context;
+        if (!transition || transition.stage !== 'active')
+            return;
+        const { to, direction } = transition;
+        if (direction === 'north' && to === id) {
+            scene.scrollTo({ top: scene.scrollHeight });
+        }
+    }, [isTransitioning, actorRef, id]);
+    const isFixed = isControlledTransitioning || isSettling || isInstantTransitioning;
+    const transitionStyle = type === 'slide' ? 'transform' : 'opacity';
+    return ((0, jsx_runtime_1.jsx)("div", { ref: sceneRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: `translate3d(${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.x}px, ${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.y}px, 0)`, transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'auto', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1 }), children: children }));
 };
 exports.ArticleWrapper = ArticleWrapper;
+function isTransitionDisabled(transitionReady) {
+    return !transitionReady.north && !transitionReady.east && !transitionReady.south && !transitionReady.west;
+}
+function getDirectionFromDelta(deltaX, deltaY) {
+    if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        return deltaX > 0 ? 'west' : 'east';
+    }
+    return deltaY > 0 ? 'north' : 'south';
+}
+function canTransition(direction, el) {
+    switch (direction) {
+        case 'north':
+            return el.scrollTop === 0;
+        case 'south': {
+            const isAllowed = el.scrollTop + el.clientHeight >= el.scrollHeight;
+            return isAllowed;
+        }
+        case 'west':
+            return el.scrollLeft === 0;
+        case 'east':
+            return el.scrollLeft + el.clientWidth === el.scrollWidth;
+    }
+}

package/lib/sdk-nextjs/components/Head.d.ts

@@ -1,9 +1,7 @@
 import { FC } from 'react';
-import { Meta } from '../../sdk/types/project/Meta';
 import { Project } from '../../sdk/types/project/Project';
 interface Props {
     project: Project;
-    meta: Meta;
 }
 export declare const CNTRLHead: FC<Props>;
 export {};

package/lib/sdk-nextjs/components/Head.js

@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const html_react_parser_1 = __importDefault(require("html-react-parser"));
 const head_1 = __importDefault(require("next/head"));
 const FontFaceGenerator_1 = require("../../sdk/FontFaceGenerator/FontFaceGenerator");
-const CNTRLHead = ({ meta, project }) => {
+const CNTRLHead = ({ 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 = Object.assign(Object.assign({}, (typeof googleFonts === 'object' ? googleFonts : {})), (typeof adobeFonts === 'object' ? adobeFonts : {}));
@@ -25,6 +25,7 @@ const CNTRLHead = ({ meta, project }) => {
             return;
         return ((0, jsx_runtime_1.jsx)("link", { rel: rel, href: href }, `link-${rel}-${href}`));
     });
+    const { meta } = project;
     return ((0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("title", { children: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "keywords", content: meta.keywords }), (0, jsx_runtime_1.jsx)("meta", { name: "og:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "og:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { name: "og:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { property: "twitter:card", content: "summary_large_image" }), (0, jsx_runtime_1.jsx)("meta", { name: "generator", content: "https://cntrl.site" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: meta.favicon }), customFonts.length > 0 && ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
                     __html: ffGenerator.generate()
                 } })), links, htmlHead] }));

package/lib/sdk-nextjs/components/Page.d.ts

@@ -1,15 +1,12 @@
 import { FC } from 'react';
 import { Project } from '../../sdk/types/project/Project';
 import { Article as TArticle } from '../../sdk/types/article/Article';
-import { Meta } from '../../sdk/types/project/Meta';
 import { KeyframeAny } from '../../sdk/types/keyframe/Keyframe';
 export interface PageProps {
-    article: TArticle;
     project: Project;
-    meta: Meta;
-    keyframes: KeyframeAny[];
-    sectionData: Record<SectionName, any>;
+    articlesData: Record<string, {
+        article: TArticle;
+        keyframes: KeyframeAny[];
+    }>;
 }
 export declare const Page: FC<PageProps>;
-type SectionName = string;
-export {};

package/lib/sdk-nextjs/components/Page.js

@@ -5,16 +5,22 @@ 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 Keyframes_1 = require("../provider/Keyframes");
-const Page = ({ article, project, meta, keyframes, sectionData }) => {
+const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
+const Scenes_1 = require("./Scenes/Scenes");
+const Page = ({ project, articlesData }) => {
     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]);
-    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] }));
+    const startScene = Object.keys(articlesData)[0];
+    const scenes = Object.values(articlesData).map(({ article }) => ({ id: article.id }));
+    const { relations } = project;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project }), afterBodyOpen, (0, jsx_runtime_1.jsx)(TransitionMachineContext_1.TransitionMachineContext.Provider, { options: {
+                    input: {
+                        startScene,
+                        relations,
+                        scenes,
+                    }
+                }, children: (0, jsx_runtime_1.jsx)(Scenes_1.Scenes, { articlesData: articlesData }) }), beforeBodyClose] }));
 };
 exports.Page = Page;

package/lib/sdk-nextjs/components/Scenes/Scenes.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Article as TArticle } from '../../../sdk/types/article/Article';
+import { KeyframeAny } from '../../../sdk/types/keyframe/Keyframe';
+interface Props {
+    articlesData: Record<string, {
+        article: TArticle;
+        keyframes: KeyframeAny[];
+    }>;
+}
+export declare const Scenes: FC<Props>;
+export {};

package/lib/sdk-nextjs/components/Scenes/Scenes.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scenes = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TransitionMachineContext_1 = require("../../provider/TransitionMachineContext");
+const Article_1 = require("../Article");
+const Scenes = ({ articlesData }) => {
+    const scenes = TransitionMachineContext_1.TransitionMachineContext.useSelector(({ context }) => context.scenes);
+    return ((0, jsx_runtime_1.jsx)("div", { children: scenes.map((scene) => {
+            const { article, keyframes } = articlesData[scene.id];
+            if (!article || !keyframes)
+                return null;
+            return ((0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, keyframes: keyframes, styles: scene.styles }, article.id));
+        }) }));
+};
+exports.Scenes = Scenes;

package/lib/sdk-nextjs/components/items/RectangleItem/RectangleItem.js

@@ -55,7 +55,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
                         const background = value
                             ? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
                             : 'transparent';
-                        return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition, radius: radius, strokeWidth: strokeWidth }, `fill-${i}-${fill.id}`));
+                        return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition, radius: radius, strokeWidth: strokeWidth, fillId: fill.id }, `fill-${i}-${fill.id}`));
                     }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .rectangle-${item.id} {
           position: absolute;
@@ -82,7 +82,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
       ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;
-function Fill({ fill, itemId, background, solidTransition, radius, strokeWidth, key }) {
+function Fill({ fillId, fill, itemId, background, solidTransition, radius, strokeWidth, }) {
     const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
     return ((0, jsx_runtime_1.jsx)("div", { className: fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (fill.type === 'solid' ? { background, transition: solidTransition } : {})), (fill.type === 'image'
             ? {
@@ -92,6 +92,6 @@ function Fill({ fill, itemId, background, solidTransition, radius, strokeWidth,
                 backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
                 opacity: fill.opacity
             }
-            : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, top: 0, left: 0, borderRadius: `calc(${radius * 100}vw - ${strokeWidth * 100}vw)`, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, key));
+            : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, top: 0, left: 0, borderRadius: `calc(${radius * 100}vw - ${strokeWidth * 100}vw)`, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fillId));
 }
 ;

package/lib/sdk-nextjs/provider/CntrlSdkContext.d.ts

@@ -6,7 +6,7 @@ import { CustomSectionRegistry } from './CustomSectionRegistry';
 import { Component as TComponent } from '@cntrl-site/components';
 interface SdkContextInitProps {
     project: Project;
-    article: Article;
+    articles: Article[];
 }
 export declare class CntrlSdkContext {
     readonly customItems: CustomItemRegistry;
@@ -17,7 +17,7 @@ export declare class CntrlSdkContext {
     private components;
     constructor(customItems: CustomItemRegistry, customSections: CustomSectionRegistry);
     resolveSectionData(sections: Section[]): Promise<Record<string, any>>;
-    init({ project, article }: SdkContextInitProps): void;
+    init({ project, articles }: SdkContextInitProps): void;
     private setExemplary;
     private setComponents;
     private setFonts;

package/lib/sdk-nextjs/provider/CntrlSdkContext.js

@@ -34,11 +34,13 @@ class CntrlSdkContext {
             return Object.fromEntries(yield Promise.all(resolvers.map((_a) => __awaiter(this, [_a], void 0, function* ({ name, resolver }) { return [name, yield resolver()]; }))));
         });
     }
-    init({ project, article }) {
+    init({ project, articles }) {
         this.setComponents(components_1.components);
         this.setExemplary(project.exemplary);
         this.setFonts(project.fonts);
-        this.setSectionsHeight(article.sections);
+        for (const article of articles) {
+            this.setSectionsHeight(article.sections);
+        }
     }
     setExemplary(exemplary) {
         this._exemplary = exemplary;