@gxpl/sdk 0.0.39 → 0.0.41

package/lib/sdk/transitions/transitionMachine.d.ts

@@ -10,10 +10,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
     transition: "slide";
     to: string;
     direction: Direction;
+    duration: number;
 } | {
     type: "TRANSITION_TRIGGER";
     transition: "fade";
     to: string;
+    duration: number;
 } | {
     type: "SWIPE_START";
     direction: Direction;
@@ -84,10 +86,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
             transition: "slide";
             to: string;
             direction: Direction;
+            duration: number;
         } | {
             type: "TRANSITION_TRIGGER";
             transition: "fade";
             to: string;
+            duration: number;
         } | {
             type: "SWIPE_START";
             direction: Direction;
@@ -118,10 +122,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
             transition: "slide";
             to: string;
             direction: Direction;
+            duration: number;
         } | {
             type: "TRANSITION_TRIGGER";
             transition: "fade";
             to: string;
+            duration: number;
         } | {
             type: "SWIPE_START";
             direction: Direction;
@@ -175,10 +181,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
                         transition: "slide";
                         to: string;
                         direction: Direction;
+                        duration: number;
                     } | {
                         type: "TRANSITION_TRIGGER";
                         transition: "fade";
                         to: string;
+                        duration: number;
                     } | {
                         type: "SWIPE_START";
                         direction: Direction;
@@ -211,10 +219,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
                         transition: "slide";
                         to: string;
                         direction: Direction;
+                        duration: number;
                     } | {
                         type: "TRANSITION_TRIGGER";
                         transition: "fade";
                         to: string;
+                        duration: number;
                     }, {
                         type: "SWIPE_PREPARE";
                         touchData: {
@@ -226,10 +236,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
                         transition: "slide";
                         to: string;
                         direction: Direction;
+                        duration: number;
                     } | {
                         type: "TRANSITION_TRIGGER";
                         transition: "fade";
                         to: string;
+                        duration: number;
                     } | {
                         type: "SWIPE_START";
                         direction: Direction;
@@ -279,10 +291,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
                         transition: "slide";
                         to: string;
                         direction: Direction;
+                        duration: number;
                     } | {
                         type: "TRANSITION_TRIGGER";
                         transition: "fade";
                         to: string;
+                        duration: number;
                     } | {
                         type: "SWIPE_START";
                         direction: Direction;
@@ -323,10 +337,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
                         transition: "slide";
                         to: string;
                         direction: Direction;
+                        duration: number;
                     } | {
                         type: "TRANSITION_TRIGGER";
                         transition: "fade";
                         to: string;
+                        duration: number;
                     } | {
                         type: "SWIPE_START";
                         direction: Direction;
@@ -374,10 +390,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
                         transition: "slide";
                         to: string;
                         direction: Direction;
+                        duration: number;
                     } | {
                         type: "TRANSITION_TRIGGER";
                         transition: "fade";
                         to: string;
+                        duration: number;
                     } | {
                         type: "SWIPE_START";
                         direction: Direction;
@@ -418,10 +436,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
                         transition: "slide";
                         to: string;
                         direction: Direction;
+                        duration: number;
                     } | {
                         type: "TRANSITION_TRIGGER";
                         transition: "fade";
                         to: string;
+                        duration: number;
                     } | {
                         type: "SWIPE_START";
                         direction: Direction;
@@ -465,10 +485,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
                         transition: "slide";
                         to: string;
                         direction: Direction;
+                        duration: number;
                     } | {
                         type: "TRANSITION_TRIGGER";
                         transition: "fade";
                         to: string;
+                        duration: number;
                     } | {
                         type: "SWIPE_START";
                         direction: Direction;
@@ -513,10 +535,12 @@ export declare const transitionMachine: import("xstate").StateMachine<Transition
                         transition: "slide";
                         to: string;
                         direction: Direction;
+                        duration: number;
                     } | {
                         type: "TRANSITION_TRIGGER";
                         transition: "fade";
                         to: string;
+                        duration: number;
                     } | {
                         type: "SWIPE_START";
                         direction: Direction;
@@ -565,10 +589,12 @@ export type TransitionEvents = {
     transition: 'slide';
     to: string;
     direction: Direction;
+    duration: number;
 } | {
     type: 'TRANSITION_TRIGGER';
     transition: 'fade';
     to: string;
+    duration: number;
 } | {
     type: 'SWIPE_START';
     direction: Direction;
@@ -609,6 +635,7 @@ export type TransitionMachineInput = {
     startScene: string;
     scenes: Scene[];
     relations: Relation[];
+    previewWindow: Window | null;
 };
 type Scene = {
     id: string;

package/lib/sdk/transitions/transitionMachine.js

@@ -69,18 +69,18 @@ exports.transitionMachine = (0, xstate_1.setup)({
                                 throw new Error('Active scene not found');
                             }
                             const from = activeScene.id;
-                            return Object.assign(Object.assign({ stage: 'active', from,
+                            return Object.assign(Object.assign({ stage: 'active', duration: event.duration, from,
                                 to }, (transition === 'slide' ? { direction: event.direction } : {})), { type: transition });
                         },
                         scenes: ({ context, event }) => {
-                            const { scenes } = context;
+                            const { scenes, input: { previewWindow } } = context;
                             const activeScene = scenes[0];
                             if (!activeScene) {
                                 throw new Error('Active scene not found');
                             }
                             const { to, transition } = event;
                             const newScenes = transition === 'slide'
-                                ? (0, getScenesOnStart_1.getScenesOnSlideStart)({ from: activeScene.id, to }, { x: 0, y: 0 }, event.direction)
+                                ? (0, getScenesOnStart_1.getScenesOnSlideStart)({ from: activeScene.id, to }, { x: 0, y: 0 }, event.direction, previewWindow !== null && previewWindow !== void 0 ? previewWindow : window)
                                 : (0, getScenesOnStart_1.getScenesOnFadeStart)({ from: activeScene.id, to }, 0);
                             return newScenes;
                         }
@@ -120,13 +120,14 @@ exports.transitionMachine = (0, xstate_1.setup)({
                             const activeScene = scenes[0];
                             if (!activeScene)
                                 return context.scenes;
+                            const { previewWindow } = input;
                             const relation = (0, findRelation_1.findRelation)(input.relations, activeScene.id, direction);
                             if (!transition || !('startX' in transition) || !('startY' in transition))
                                 return context.scenes;
                             const start = { x: transition.startX, y: transition.startY };
-                            const { deltaX, deltaY, progress } = (0, getDeltaAndProgress_1.getDeltaAndProgress)(event.touchData, start, direction);
+                            const { deltaX, deltaY, progress } = (0, getDeltaAndProgress_1.getDeltaAndProgress)(event.touchData, start, direction, previewWindow !== null && previewWindow !== void 0 ? previewWindow : window);
                             const newScenes = relation.type === 'slide'
-                                ? (0, getScenesOnStart_1.getScenesOnSlideStart)(relation, { x: deltaX, y: deltaY }, direction)
+                                ? (0, getScenesOnStart_1.getScenesOnSlideStart)(relation, { x: deltaX, y: deltaY }, direction, window)
                                 : (0, getScenesOnStart_1.getScenesOnFadeStart)(relation, progress);
                             return newScenes;
                         }
@@ -151,11 +152,11 @@ exports.transitionMachine = (0, xstate_1.setup)({
                             return Object.assign(Object.assign({}, transition), { stage: 'active', currentX: event.touchData.x, currentY: event.touchData.y });
                         },
                         scenes: ({ context, event }) => {
-                            const { transition, scenes } = context;
+                            const { transition, scenes, input: { previewWindow } } = context;
                             if (!(0, isActiveSwipeTransition_1.isActiveSwipeTransition)(transition))
                                 return scenes;
                             const start = { x: transition.startX, y: transition.startY };
-                            const { deltaX, deltaY, progress } = (0, getDeltaAndProgress_1.getDeltaAndProgress)(event.touchData, start, transition.direction);
+                            const { deltaX, deltaY, progress } = (0, getDeltaAndProgress_1.getDeltaAndProgress)(event.touchData, start, transition.direction, previewWindow !== null && previewWindow !== void 0 ? previewWindow : window);
                             const newScenes = transition.type === 'slide'
                                 ? (0, getScenesOnProgressUpdate_1.getScenesOnSlideProgressUpdate)(scenes, { x: deltaX, y: deltaY })
                                 : (0, getScenesOnProgressUpdate_1.getScenesOnFadeProgressUpdate)(scenes, transition.to, progress);
@@ -201,24 +202,18 @@ exports.transitionMachine = (0, xstate_1.setup)({
                     target: 'settling',
                     actions: (0, xstate_1.assign)({
                         scenes: ({ context }) => {
-                            const { transition, scenes } = context;
+                            const { transition, scenes, input: { previewWindow } } = context;
                             if (!transition || transition.stage !== 'active' || !('type' in transition)) {
                                 return scenes;
                             }
-                            return (0, getScenesOnInstantTransition_1.getScenesOnInstantTransition)(scenes, transition);
+                            return (0, getScenesOnInstantTransition_1.getScenesOnInstantTransition)(scenes, transition, previewWindow !== null && previewWindow !== void 0 ? previewWindow : window);
                         },
                         transition: ({ context }) => {
                             const { transition } = context;
                             if (!transition || transition.stage !== 'active' || !('type' in transition)) {
                                 return null;
                             }
-                            return {
-                                stage: 'settling',
-                                success: true,
-                                type: transition.type,
-                                from: transition.from,
-                                to: transition.to,
-                            };
+                            return Object.assign({ stage: 'settling', success: true, type: transition.type, from: transition.from, to: transition.to }, (transition.duration ? { duration: transition.duration } : {}));
                         }
                     })
                 }

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

@@ -1,5 +1,5 @@
 import type { Direction } from './types';
-export declare function getDeltaAndProgress(current: Delta, start: Delta, direction: Direction): {
+export declare function getDeltaAndProgress(current: Delta, start: Delta, direction: Direction, window: Window): {
     deltaX: number;
     deltaY: number;
     progress: number;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDeltaAndProgress = getDeltaAndProgress;
 const getAxis_1 = require("./getAxis");
-function getDeltaAndProgress(current, start, direction) {
+function getDeltaAndProgress(current, start, direction, window) {
     const axis = (0, getAxis_1.getAxis)(direction);
     const deltaX = axis === 'horizontal' ? current.x - start.x : 0;
     const deltaY = axis === 'vertical' ? current.y - start.y : 0;

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

@@ -1,2 +1,2 @@
 import type { InstantTransition, TransitionScene } from './types';
-export declare function getScenesOnInstantTransition(scenes: TransitionScene[], transition: InstantTransition): TransitionScene[];
+export declare function getScenesOnInstantTransition(scenes: TransitionScene[], transition: InstantTransition, window: Window): TransitionScene[];

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

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getScenesOnInstantTransition = getScenesOnInstantTransition;
-function getScenesOnInstantTransition(scenes, transition) {
+function getScenesOnInstantTransition(scenes, transition, window) {
     const { type, to, direction } = transition;
     if (type === 'slide' && direction) {
-        return getScenesOnInstantSlideTransition(scenes, to, direction);
+        return getScenesOnInstantSlideTransition(scenes, to, direction, window);
     }
     else if (type === 'fade') {
         return getScenesOnInstantFadeTransition(scenes);
     }
     return scenes;
 }
-function getScenesOnInstantSlideTransition(scenes, to, direction) {
+function getScenesOnInstantSlideTransition(scenes, to, direction, window) {
     let fromFinalX = 0;
     let fromFinalY = 0;
     if (direction === 'east') {

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

@@ -9,7 +9,7 @@ export declare function getScenesOnFadeStart({ from, to }: FromTo, progress: num
         y: number;
     };
 }[];
-export declare function getScenesOnSlideStart({ from, to }: FromTo, delta: Delta, direction: Direction): TransitionScene[];
+export declare function getScenesOnSlideStart({ from, to }: FromTo, delta: Delta, direction: Direction, window: Window): TransitionScene[];
 type Delta = {
     x: number;
     y: number;

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

@@ -21,7 +21,7 @@ function getScenesOnFadeStart({ from, to }, progress) {
     };
     return [sceneFrom, sceneTo];
 }
-function getScenesOnSlideStart({ from, to }, delta, direction) {
+function getScenesOnSlideStart({ from, to }, delta, direction, window) {
     const common = {
         opacity: 1,
     };
@@ -29,8 +29,8 @@ function getScenesOnSlideStart({ from, to }, delta, direction) {
         id: from,
         styles: Object.assign(Object.assign({}, common), { startX: 0, startY: 0, x: delta.x, y: delta.y })
     };
-    const startX = getNextSceneSlideStartX(direction);
-    const startY = getNextSceneSlideStartY(direction);
+    const startX = getNextSceneSlideStartX(direction, window);
+    const startY = getNextSceneSlideStartY(direction, window);
     const sceneTo = {
         id: to,
         styles: Object.assign(Object.assign({}, common), { startX,
@@ -38,13 +38,13 @@ function getScenesOnSlideStart({ from, to }, delta, direction) {
     };
     return [sceneFrom, sceneTo];
 }
-function getNextSceneSlideStartX(direction) {
+function getNextSceneSlideStartX(direction, window) {
     const axis = (0, getAxis_1.getAxis)(direction);
     if (axis !== 'horizontal')
         return 0;
     return direction === 'east' ? window.innerWidth : -window.innerWidth;
 }
-function getNextSceneSlideStartY(direction) {
+function getNextSceneSlideStartY(direction, window) {
     const axis = (0, getAxis_1.getAxis)(direction);
     if (axis !== 'vertical')
         return 0;

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

@@ -14,6 +14,7 @@ export type PreparingTransition = {
 export type ActiveTransition = {
     stage: 'active';
     direction: Direction;
+    duration?: number;
     type: 'slide' | 'fade';
     from: string;
     to: string;
@@ -35,6 +36,7 @@ export type InstantTransition = {
     from: string;
     to: string;
     direction?: Direction;
+    duration?: number;
 };
 export type TransitionScene = {
     id: string;

package/lib/sdk/types/article/Interaction.d.ts

@@ -1,6 +1,6 @@
 export interface Interaction {
     id: string;
-    triggers: (InteractionItemTrigger | InteractionScrollTrigger)[];
+    triggers: (InteractionItemTrigger | InteractionScrollTrigger | SceneTransitionTrigger)[];
     states: InteractionState[];
     startStateId: string;
 }
@@ -10,6 +10,11 @@ export interface InteractionItemTrigger {
     from: StateId;
     to: StateId;
 }
+export interface SceneTransitionTrigger {
+    type: 'scene-transition';
+    from: StateId;
+    to: StateId;
+}
 export interface InteractionScrollTrigger {
     position: number;
     from: StateId;

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

@@ -7,12 +7,13 @@ exports.Page = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const html_react_parser_1 = __importDefault(require("html-react-parser"));
 const Head_1 = require("./Head");
-const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
 const Scenes_1 = require("./Scenes/Scenes");
 const FixedLayer_1 = require("./fixedLayers/FixedLayer");
 const PreviewWrapper_1 = require("./Preview/PreviewWrapper");
 const PreviewListener_1 = require("./Preview/PreviewListener");
 const AssetsCacheProvider_1 = require("../assets/AssetsCacheProvider");
+const InOutTransitionContext_1 = require("../provider/InOutTransitionContext");
+const TransitionMachineContextProvider_1 = require("../provider/TransitionMachineContextProvider");
 const Page = ({ project, articlesData }) => {
     var _a, _b;
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
@@ -20,12 +21,6 @@ const Page = ({ project, articlesData }) => {
     const startScene = (_b = (_a = project.pages.find(page => page.isStartScene)) === null || _a === void 0 ? void 0 : _a.articleId) !== null && _b !== void 0 ? _b : Object.keys(articlesData)[0];
     const scenes = Object.values(articlesData).map(({ article }) => ({ id: article.id }));
     const { relations, scenesAssets } = 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)(PreviewWrapper_1.PreviewWrapper, { relations: relations, startScene: startScene, children: (0, jsx_runtime_1.jsxs)(TransitionMachineContext_1.TransitionMachineContext.Provider, { options: {
-                        input: {
-                            startScene,
-                            relations,
-                            scenes,
-                        }
-                    }, children: [(0, jsx_runtime_1.jsx)(PreviewListener_1.PreviewListener, {}), (0, jsx_runtime_1.jsxs)(AssetsCacheProvider_1.AssetsCacheProvider, { assets: scenesAssets, children: [project.foreground && !project.foreground.hidden && (0, jsx_runtime_1.jsx)(FixedLayer_1.FixedLayer, { layer: project.foreground, type: "foreground" }), (0, jsx_runtime_1.jsx)(Scenes_1.Scenes, { articlesData: articlesData }), project.background && !project.background.hidden && (0, jsx_runtime_1.jsx)(FixedLayer_1.FixedLayer, { layer: project.background, type: "background" })] })] }) }), beforeBodyClose] }));
+    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)(PreviewWrapper_1.PreviewWrapper, { relations: relations, startScene: startScene, children: (0, jsx_runtime_1.jsx)(TransitionMachineContextProvider_1.TransitionMachineContextProvider, { startScene: startScene, relations: relations, scenes: scenes, children: (0, jsx_runtime_1.jsxs)(InOutTransitionContext_1.InOutTransitionProvider, { children: [(0, jsx_runtime_1.jsx)(PreviewListener_1.PreviewListener, {}), (0, jsx_runtime_1.jsxs)(AssetsCacheProvider_1.AssetsCacheProvider, { assets: scenesAssets, children: [project.foreground && !project.foreground.hidden && (0, jsx_runtime_1.jsx)(FixedLayer_1.FixedLayer, { layer: project.foreground, type: "foreground" }), (0, jsx_runtime_1.jsx)(Scenes_1.Scenes, { articlesData: articlesData }), project.background && !project.background.hidden && (0, jsx_runtime_1.jsx)(FixedLayer_1.FixedLayer, { layer: project.background, type: "background" })] })] }) }) }), beforeBodyClose] }));
 };
 exports.Page = Page;

package/lib/sdk-nextjs/components/Preview/PreviewListener.js

@@ -20,6 +20,7 @@ const PreviewListener = () => {
                 actorRef.send({
                     type: 'TRANSITION_TRIGGER',
                     transition: transitionType,
+                    duration: 250,
                     to,
                     direction
                 });

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

@@ -5,22 +5,32 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const useLayoutDeviation_1 = require("../common/useLayoutDeviation");
 const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
+const InteractionsContext_1 = require("../provider/InteractionsContext");
 const Scene = ({ children, id, styles: sceneStyles, elRef }) => {
     var _a;
     const { layoutDeviation } = (0, useLayoutDeviation_1.useLayoutDeviation)();
+    const interactionsRegistry = (0, InteractionsContext_1.useInteractionsRegistry)();
     const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
     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 { isControlledTransitioning, isSettling, isInstantTransitioning } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => {
+        return {
+            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 duration = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => {
+        const { transition } = state.context;
+        if (!transition || !('duration' in transition))
+            return undefined;
+        return transition.duration;
+    });
     const isTransitioningRef = (0, react_1.useRef)(false);
     const isTransitioning = isControlledTransitioning || isInstantTransitioning;
     const handleTouchStart = (0, react_1.useCallback)((e) => {
@@ -101,6 +111,8 @@ const Scene = ({ children, id, styles: sceneStyles, elRef }) => {
         if (!isSettling || !el)
             return;
         const handleTransitionEnd = (e) => {
+            if (e.target !== el)
+                return;
             const { context } = actorRef.getSnapshot();
             const { transition } = context;
             if (!transition || transition.stage !== 'settling') {
@@ -133,9 +145,33 @@ const Scene = ({ children, id, styles: sceneStyles, elRef }) => {
             scene.scrollTo({ top: scene.scrollHeight });
         }
     }, [isTransitioning, actorRef, id]);
+    (0, react_1.useEffect)(() => {
+        if (!interactionsRegistry || !actorRef)
+            return;
+        const { context } = actorRef.getSnapshot();
+        const { transition } = context;
+        if (!transition || transition.stage !== 'active')
+            return;
+        const { from, to } = transition;
+        if (from === id) {
+            interactionsRegistry.notifySceneOutTransition();
+        }
+        if (to === id) {
+            interactionsRegistry.notifySceneInTransition();
+        }
+    }, [interactionsRegistry, id, isTransitioning, actorRef]);
+    (0, react_1.useEffect)(() => {
+        if (isSettling && actorRef && interactionsRegistry) {
+            const { context } = actorRef.getSnapshot();
+            const { transition } = context;
+            if (!transition || transition.stage !== 'settling' || transition.success)
+                return;
+            interactionsRegistry.notifySceneOutTransitionCancel();
+        }
+    }, [isSettling, actorRef, interactionsRegistry]);
     const isFixed = isControlledTransitioning || isSettling || isInstantTransitioning;
     const transitionStyle = type === 'slide' ? 'transform' : 'opacity';
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: elRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', zIndex: 1, position: isFixed ? 'fixed' : 'absolute', transform: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', overflowX: 'clip', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1, 'WebkitOverflowScrolling': 'touch' // prevent glitch on Safari (fast scroll to top/bottom sides)
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: elRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', zIndex: 1, position: isFixed ? 'fixed' : 'absolute', transform: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', transition: isSettling || isInstantTransitioning ? `${transitionStyle} ${duration !== null && duration !== void 0 ? duration : 250}ms ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', overflowX: 'clip', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1, 'WebkitOverflowScrolling': 'touch' // prevent glitch on Safari (fast scroll to top/bottom sides)
              }), children: children }) }));
 };
 exports.Scene = Scene;

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

@@ -13,6 +13,7 @@ const LinkWrapper = ({ link, children }) => {
         actorRef.send({
             type: 'TRANSITION_TRIGGER',
             transition: link.animation,
+            duration: link.duration,
             to: link.value,
             direction: link.direction
         });

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

@@ -40,11 +40,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const stroke = strokeFill
         ? (_h = (0, getFill_1.getFill)(strokeFill)) !== null && _h !== void 0 ? _h : 'transparent'
         : 'transparent';
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeFill ? Object.assign({ borderColor: stroke, borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0, borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit', borderStyle: 'solid' }, (strokeFill.type === 'image' ? {
-                        backgroundPosition: 'center',
-                        backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
-                        backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                    } : {})) : {})), { borderRadius: `${radius * 100}vw` }), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
                         ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
                         : {})), { transition: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), children: itemFill && itemFill.map((fill, i) => {
                         var _a, _b;
@@ -55,7 +51,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, fillId: fill.id }, `fill-${i}-${fill.id}`));
+                        return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, transition: (stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) || '', solidTransition: solidTransition, radius: radius, strokeWidth: strokeWidth, fillId: fill.id, isHighest: i === itemFill.length - 1, borderColor: stroke }, `fill-${i}-${fill.id}`));
                     }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .rectangle-${item.id} {
           position: absolute;
@@ -82,16 +78,27 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
       ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;
-function Fill({ fillId, fill, itemId, background, solidTransition, radius, strokeWidth, }) {
+function Fill({ fillId, fill, itemId, background, transition, solidTransition, radius, strokeWidth, isHighest, borderColor, }) {
     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'
+    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(Object.assign(Object.assign({}, (fill.type === 'solid' ? {
+            background,
+            transition: transition && transition !== 'none' && transition.trim()
+                ? `${solidTransition}, ${transition}`
+                : solidTransition
+        } : {})), (fill.type === 'image'
             ? {
                 transform: `rotate(${fill.rotation}deg)`,
                 backgroundImage: `url(${fill.src})`,
                 backgroundSize: fill.behavior === 'repeat' ? `${fill.backgroundSize}%` : fill.behavior,
                 backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
+                backgroundOrigin: 'border-box',
                 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' } : {})) }, fillId));
+            : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, top: 0, left: 0, borderRadius: `${radius * 100}vw`, width: '100%', height: '100%', pointerEvents: 'none' }), (isHighest ? {
+            borderColor,
+            borderWidth: `${strokeWidth * 100}vw`,
+            borderStyle: 'solid',
+            boxSizing: 'border-box'
+        } : {})), (isRotatedImage ? { overflow: 'hidden' } : {})), (fill.type !== 'solid' ? { transition } : {})) }, fillId));
 }
 ;

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

@@ -48,6 +48,6 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
     const color = color_1.CntrlColor.parse(item.params.color);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign({ filter: `blur(${blur * 100}vw)` }, (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), { transform: `rotate(${angle}deg)`, letterSpacing: `${letterSpacing * exemplary}px`, wordSpacing: `${wordSpacing * exemplary}px`, fontSize: `${Math.round(fontSize * exemplary)}px`, lineHeight: `${lineHeight * exemplary}px`, willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', fontFamily: (0, getFontFamilyValue_1.getFontFamilyValue)(item.params.typeFace), fontWeight: item.params.fontWeight, fontStyle: item.params.fontStyle ? item.params.fontStyle : 'normal', verticalAlign: item.params.verticalAlign, fontVariant: item.params.fontVariant, color: color.fmt('rgba'), textTransform: item.params.textTransform, transition }), children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: styles })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign({ filter: `blur(${blur * 100}vw)` }, (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), { transform: `rotate(${angle}deg)`, letterSpacing: `${letterSpacing * exemplary}px`, wordSpacing: `${wordSpacing * exemplary}px`, fontSize: `${Math.round(fontSize * exemplary)}px`, lineHeight: `${lineHeight * exemplary}px`, willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', fontFamily: (0, getFontFamilyValue_1.getFontFamilyValue)(item.params.typeFace), fontWeight: item.params.fontWeight, fontStyle: item.params.fontStyle ? item.params.fontStyle : 'normal', verticalAlign: item.params.verticalAlign, fontVariant: item.params.fontVariant, textTransform: item.params.textTransform, transition }), children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: styles })] }));
 };
 exports.RichTextItem = RichTextItem;

package/lib/sdk-nextjs/fixedLayers/FixedLayerTransitionsRegistry.d.ts

@@ -19,7 +19,7 @@ export declare class FixedLayerTransitionsRegistry implements InteractionsRegist
     private getDefaultItemStages;
     notifyOnActiveSceneChange(sceneId: SceneId): void;
     setActiveTransition(to: SceneId): void;
-    notifyTransitionStartForItems(activeStateId: string): void;
+    notifyTransitionStartForItems(sceneId: string): void;
     notifyTransitionEnd(itemId: string): void;
     private notifyItemCtrlsChange;
 }

package/lib/sdk-nextjs/fixedLayers/FixedLayerTransitionsRegistry.js

@@ -127,13 +127,13 @@ class FixedLayerTransitionsRegistry {
     setActiveTransition(to) {
         this.activeTransition = this.transitions.find((transition) => transition.to === to && transition.from === this.activeSceneId);
     }
-    notifyTransitionStartForItems(activeStateId) {
+    notifyTransitionStartForItems(sceneId) {
         var _a, _b;
         const itemsIds = this.itemsStages.map((stage) => stage.itemId);
         for (const itemId of itemsIds) {
             const ctrl = this.ctrls.get(itemId);
             const item = this.items.find((item) => item.id === itemId);
-            const keys = Object.keys((_a = item.state[activeStateId]) !== null && _a !== void 0 ? _a : {});
+            const keys = Object.keys((_a = item.state[sceneId]) !== null && _a !== void 0 ? _a : {});
             (_b = ctrl === null || ctrl === void 0 ? void 0 : ctrl.handleTransitionStart) === null || _b === void 0 ? void 0 : _b.call(ctrl, keys);
         }
     }