@cntrl-site/sdk-nextjs 1.8.36-alpha.0 → 1.8.36

package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js

@@ -85,6 +85,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
       .embed-wrapper-${item.id} {
         position: absolute;
         width: 100%;
+        will-change: transform;
         height: 100%;
       }
       .embed-${item.id} {

package/lib/components/items/ComponentItem/ComponentItem.js

@@ -36,6 +36,7 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
         width: 100%;
         height: 100%;
         pointer-events: auto;
+        will-change: transform;
       }
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                     return (`

package/lib/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -144,6 +144,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
         position: absolute;
         width: 100%;
         height: 100%;
+        will-change: transform;
       }
       .embed-video {
         width: 100%;

package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -136,6 +136,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;
+          will-change: transform;
           width: 100%;
           height: 100%;
         }

package/lib/components/items/FileItem/ImageItem.js

@@ -72,6 +72,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
           position: absolute;
           width: 100%;
           height: 100%;
+          will-change: transform;
           box-sizing: border-box;
           display: flex;
         }

package/lib/components/items/FileItem/VideoItem.js

@@ -138,6 +138,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
           height: 100%;
           box-sizing: border-box;
           opacity: ${opacity};
+          will-change: transform;
         }
         .video-overlay-${item.id} {
           position: absolute;

package/lib/components/items/GroupItem/GroupItem.js

@@ -40,6 +40,7 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
           width: 100%;
           height: 100%;
           box-sizing: border-box;
+          will-change: transform;
         }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                         return (`

package/lib/components/items/Item.js

@@ -53,7 +53,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const [position, setPosition] = (0, react_1.useState)({ x: 0, y: 0 });
     const [isDraggingActive, setIsDraggingActive] = (0, react_1.useState)(false);
     const wrapperStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left']);
-    const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['width', 'height', 'scale', 'top', 'left']);
+    const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['width', 'height', 'scale']);
     const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
         top: (_b = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _b === void 0 ? void 0 : _b.top,
         left: (_c = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _c === void 0 ? void 0 : _c.left,

package/lib/components/items/RectangleItem/RectangleItem.js

@@ -62,6 +62,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
               border-radius: ${layoutParams.radius * 100}vw;
               border-width: ${layoutParams.strokeWidth * 100}vw;
               transform: rotate(${area.angle}deg);
+              will-change: transform;
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
               -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};

package/lib/components/items/RichTextItem/RichTextItem.js

@@ -68,6 +68,7 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
               font-variant: ${layoutParams.fontVariant};
               color: ${color.fmt('rgba')};
               transform: rotate(${area.angle}deg);
+              will-change: transform;
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               text-transform: ${layoutParams.textTransform};
             }

package/lib/interactions/InteractionsRegistry.js

@@ -29,7 +29,6 @@ class InteractionsRegistry {
             }
             return map;
         }, {});
-        const itemStages = this.getDefaultItemStages();
         const stateItemsIdsMap = activeStatesIds.reduce((map, stateId) => {
             map[stateId] = this.items
                 .filter((item) => {
@@ -42,9 +41,10 @@ class InteractionsRegistry {
             return map;
         }, {});
         this.interactions = interactions;
-        this.itemsStages = itemStages;
         this.stateItemsIdsMap = stateItemsIdsMap;
         this.interactionStateMap = interactionStateMap;
+        const itemStages = this.getDefaultItemStages();
+        this.itemsStages = itemStages;
     }
     register(itemId, ctrl) {
         this.ctrls.set(itemId, ctrl);
@@ -93,6 +93,8 @@ class InteractionsRegistry {
         for (const interaction of this.interactions) {
             const { triggers } = interaction;
             for (const trigger of triggers) {
+                if (!('itemId' in trigger))
+                    continue;
                 if (trigger.itemId !== itemId)
                     continue;
                 if (activeStates.includes(trigger.from)) {
@@ -102,12 +104,112 @@ class InteractionsRegistry {
         }
         return available;
     }
-    notifyTrigger(itemId, triggerType) {
+    notifyLoad() {
+        var _a, _b;
+        const timestamp = Date.now();
+        for (const interaction of this.interactions) {
+            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
+            const matchingTrigger = interaction.triggers.find(trigger => 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId);
+            if (!matchingTrigger)
+                continue;
+            const activeStateId = this.getActiveInteractionState(interaction.id);
+            const isNewStateActive = matchingTrigger.to === activeStateId;
+            this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
+            const transitioningItems = (_a = this.stateItemsIdsMap[activeStateId]) !== null && _a !== void 0 ? _a : [];
+            const state = interaction.states.find((state) => state.id === matchingTrigger.to);
+            const actions = (_b = state === null || state === void 0 ? void 0 : state.actions) !== null && _b !== void 0 ? _b : [];
+            for (const action of actions) {
+                const ctrl = this.ctrls.get(action.itemId);
+                if (!ctrl)
+                    continue;
+                ctrl.receiveAction(action.type);
+            }
+            this.itemsStages = this.itemsStages.map((stage) => {
+                if (stage.interactionId !== interaction.id)
+                    return stage;
+                return {
+                    itemId: stage.itemId,
+                    interactionId: stage.interactionId,
+                    type: 'transitioning',
+                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
+                    to: matchingTrigger.to,
+                    direction: isNewStateActive ? 'in' : 'out',
+                    updated: timestamp
+                };
+            });
+            const itemsToNotify = new Set(transitioningItems);
+            for (const trigger of interaction.triggers) {
+                if (!('itemId' in trigger))
+                    continue;
+                itemsToNotify.add(trigger.itemId);
+            }
+            this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+            this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+        }
+    }
+    notifyScroll(position) {
+        var _a, _b, _c;
+        const timestamp = Date.now();
+        for (const interaction of this.interactions) {
+            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
+            const activeStateId = (_a = interaction.states.find((state) => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
+            const matchingTrigger = interaction.triggers.find((trigger) => {
+                if (!('position' in trigger) || trigger.position === 0)
+                    return false;
+                const triggerPosition = trigger.position * window.innerWidth;
+                const isScrolledPastTrigger = triggerPosition < position;
+                if (!isScrolledPastTrigger && !trigger.isReverse)
+                    return false;
+                const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
+                return stateId === currentStateId;
+            });
+            if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId)
+                continue;
+            const triggerPosition = matchingTrigger.position * window.innerWidth;
+            const isScrolledPastTrigger = triggerPosition < position;
+            const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
+            this.setCurrentStateForInteraction(interaction.id, targetStateId);
+            const transitioningItems = (_b = this.stateItemsIdsMap[activeStateId]) !== null && _b !== void 0 ? _b : [];
+            const state = interaction.states.find((state) => state.id === targetStateId);
+            const actions = (_c = state === null || state === void 0 ? void 0 : state.actions) !== null && _c !== void 0 ? _c : [];
+            for (const action of actions) {
+                const ctrl = this.ctrls.get(action.itemId);
+                if (!ctrl)
+                    continue;
+                ctrl.receiveAction(action.type);
+            }
+            const itemsStages = this.itemsStages.map((stage) => {
+                if (stage.interactionId !== interaction.id)
+                    return stage;
+                const newStage = {
+                    itemId: stage.itemId,
+                    interactionId: stage.interactionId,
+                    type: 'transitioning',
+                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
+                    to: targetStateId,
+                    direction: targetStateId === activeStateId ? 'in' : 'out',
+                    updated: timestamp
+                };
+                return newStage;
+            });
+            this.itemsStages = itemsStages;
+            const itemsToNotify = new Set(transitioningItems);
+            for (const trigger of interaction.triggers) {
+                if (!('itemId' in trigger))
+                    continue;
+                itemsToNotify.add(trigger.itemId);
+            }
+            this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+            this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+        }
+    }
+    notifyItemTrigger(itemId, triggerType) {
         var _a, _b;
         const timestamp = Date.now();
         for (const interaction of this.interactions) {
             const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const matchingTrigger = interaction.triggers.find((trigger) => trigger.itemId === itemId
+            const matchingTrigger = interaction.triggers.find((trigger) => 'itemId' in trigger
+                && trigger.itemId === itemId
                 && trigger.from === currentStateId
                 && trigger.type === triggerType);
             if (!matchingTrigger)
@@ -139,6 +241,8 @@ class InteractionsRegistry {
             });
             const itemsToNotify = new Set(transitioningItems);
             for (const trigger of interaction.triggers) {
+                if (!('itemId' in trigger))
+                    continue;
                 itemsToNotify.add(trigger.itemId);
             }
             this.notifyItemCtrlsChange(Array.from(itemsToNotify));
@@ -223,6 +327,7 @@ class InteractionsRegistry {
         return allItems;
     }
     getDefaultItemStages() {
+        var _a;
         const timestamp = Date.now();
         const { items } = this;
         const stages = [];
@@ -239,7 +344,8 @@ class InteractionsRegistry {
                     interactionId,
                     type: 'active',
                     isStartState: true,
-                    updated: timestamp
+                    updated: timestamp,
+                    stateId: (_a = this.interactions.find((interaction) => interaction.id === interactionId)) === null || _a === void 0 ? void 0 : _a.startStateId
                 });
             }
         }

package/lib/interactions/ItemInteractionCtrl.js

@@ -56,7 +56,7 @@ class ItemInteractionController {
         return triggers.has(triggerType);
     }
     sendTrigger(type) {
-        this.registry.notifyTrigger(this.itemId, type);
+        this.registry.notifyItemTrigger(this.itemId, type);
     }
     receiveAction(type) {
         var _a;

package/lib/provider/InteractionsContext.js

@@ -5,14 +5,33 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InteractionsRegistry_1 = require("../interactions/InteractionsRegistry");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
+const ArticleRectContext_1 = require("./ArticleRectContext");
 exports.InteractionsContext = (0, react_1.createContext)(undefined);
 const InteractionsProvider = ({ article, children }) => {
     const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const registry = (0, react_1.useMemo)(() => {
         if (!layoutId)
             return;
         return new InteractionsRegistry_1.InteractionsRegistry(article, layoutId);
     }, [layoutId]);
+    (0, react_1.useEffect)(() => {
+        if (!registry || !articleRectObserver)
+            return;
+        const handleScroll = () => {
+            const scrollY = window.scrollY;
+            registry.notifyScroll(scrollY);
+        };
+        return articleRectObserver.on('scroll', handleScroll);
+    }, [registry, articleRectObserver]);
+    const notifyLoad = (0, react_1.useCallback)(() => {
+        if (!registry)
+            return;
+        registry.notifyLoad();
+    }, [registry]);
+    (0, react_1.useEffect)(() => {
+        notifyLoad();
+    }, [notifyLoad]);
     return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: registry, children: children }));
 };
 exports.InteractionsProvider = InteractionsProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.8.36-alpha.0",
+  "version": "1.8.36",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.4.0",
-    "@cntrl-site/sdk": "^1.22.21",
+    "@cntrl-site/sdk": "^1.23.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/ScrollPlaybackVideo.tsx

@@ -24,7 +24,7 @@ export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams,
       const scrollPos = articleRectObserver.getSectionScroll(sectionId);
       const time = rangeMap(scrollPos, playbackParams.from, playbackParams.to, 0, 1, true);
       setTime(toFixed(time));
-    })
+    });
   }, [playbackParams?.from, playbackParams?.to, time]);
 
   const scrollVideoManager = useMemo<ScrollPlaybackVideoManager | null>(() => {

package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx

@@ -110,6 +110,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
       .embed-wrapper-${item.id} {
         position: absolute;
         width: 100%;
+        will-change: transform;
         height: 100%;
       }
       .embed-${item.id} {

package/src/components/items/ComponentItem/ComponentItem.tsx

@@ -49,6 +49,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
         width: 100%;
         height: 100%;
         pointer-events: auto;
+        will-change: transform;
       }
       ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
       return (`

package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx

@@ -177,6 +177,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         position: absolute;
         width: 100%;
         height: 100%;
+        will-change: transform;
       }
       .embed-video {
         width: 100%;

package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx

@@ -160,6 +160,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;
+          will-change: transform;
           width: 100%;
           height: 100%;
         }

package/src/components/items/FileItem/ImageItem.tsx

@@ -114,6 +114,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
           position: absolute;
           width: 100%;
           height: 100%;
+          will-change: transform;
           box-sizing: border-box;
           display: flex;
         }

package/src/components/items/FileItem/VideoItem.tsx

@@ -211,6 +211,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           height: 100%;
           box-sizing: border-box;
           opacity: ${opacity};
+          will-change: transform;
         }
         .video-overlay-${item.id} {
           position: absolute;

package/src/components/items/GroupItem/GroupItem.tsx

@@ -63,6 +63,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
           width: 100%;
           height: 100%;
           box-sizing: border-box;
+          will-change: transform;
         }
         ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
       return (`

package/src/components/items/Item.tsx

@@ -83,7 +83,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [isDraggingActive, setIsDraggingActive] = useState(false);
   const wrapperStateProps = interactionCtrl?.getState(['top', 'left']);
-  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale', 'top', 'left']);
+  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale']);
   const { width, height, top, left } = useItemArea(item, sectionId, {
     top: wrapperStateProps?.styles?.top as number,
     left: wrapperStateProps?.styles?.left as number,

package/src/components/items/RectangleItem/RectangleItem.tsx

@@ -82,6 +82,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
               border-radius: ${layoutParams.radius * 100}vw;
               border-width: ${layoutParams.strokeWidth * 100}vw;
               transform: rotate(${area.angle}deg);
+              will-change: transform;
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
               -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -89,6 +89,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
               font-variant: ${layoutParams.fontVariant};
               color: ${color.fmt('rgba')};
               transform: rotate(${area.angle}deg);
+              will-change: transform;
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               text-transform: ${layoutParams.textTransform};
             }

package/src/interactions/InteractionsRegistry.ts

@@ -3,7 +3,7 @@ import {
   Article,
   ArticleItemType,
   Interaction,
-  InteractionTrigger,
+  InteractionItemTrigger,
   ItemAny,
 } from '@cntrl-site/sdk';
 import { isItemType } from '../utils/isItemType';
@@ -39,7 +39,6 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       }
       return map;
     }, {});
-    const itemStages = this.getDefaultItemStages();
     const stateItemsIdsMap = activeStatesIds.reduce<StateItemsIdsMap>((map, stateId) => {
       map[stateId] = this.items
         .filter((item) => {
@@ -51,9 +50,10 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       return map;
     }, {});
     this.interactions = interactions;
-    this.itemsStages = itemStages;
     this.stateItemsIdsMap = stateItemsIdsMap;
     this.interactionStateMap = interactionStateMap;
+    const itemStages = this.getDefaultItemStages();
+    this.itemsStages = itemStages;
   }
 
   register(itemId: ItemId, ctrl: ItemInteractionCtrl) {
@@ -96,12 +96,13 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     return itemStyles;
   }
 
-  getItemAvailableTriggers(itemId: string): Set<InteractionTrigger['type']> {
-    const available = new Set<InteractionTrigger['type']>();
+  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']> {
+    const available = new Set<InteractionItemTrigger['type']>();
     const activeStates = Object.values(this.interactionStateMap);
     for (const interaction of this.interactions) {
       const { triggers } = interaction;
       for (const trigger of triggers) {
+        if (!('itemId' in trigger)) continue;
         if (trigger.itemId !== itemId) continue;
         if (activeStates.includes(trigger.from)) {
           available.add(trigger.type);
@@ -111,12 +112,106 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     return available;
   }
 
-  notifyTrigger(itemId: string, triggerType: TriggerType): void {
+  notifyLoad() {
+    const timestamp = Date.now();
+    for (const interaction of this.interactions) {
+      const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
+      const matchingTrigger = interaction.triggers.find(trigger =>
+        'position' in trigger && trigger.position === 0 && trigger.from === currentStateId
+      );
+      if (!matchingTrigger) continue;
+      const activeStateId = this.getActiveInteractionState(interaction.id);
+      const isNewStateActive = matchingTrigger.to === activeStateId;
+      this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
+      const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
+      const state = interaction.states.find((state) => state.id === matchingTrigger.to);
+      const actions = state?.actions ?? [];
+      for (const action of actions) {
+        const ctrl = this.ctrls.get(action.itemId);
+        if (!ctrl) continue;
+        ctrl.receiveAction(action.type);
+      }
+
+      this.itemsStages = this.itemsStages.map((stage) => {
+        if (stage.interactionId !== interaction.id) return stage;
+        return {
+          itemId: stage.itemId,
+          interactionId: stage.interactionId,
+          type: 'transitioning',
+          from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
+          to: matchingTrigger.to,
+          direction: isNewStateActive ? 'in' : 'out',
+          updated: timestamp
+        };
+      });
+
+      const itemsToNotify = new Set<ItemId>(transitioningItems);
+      for (const trigger of interaction.triggers) {
+        if (!('itemId' in trigger)) continue;
+        itemsToNotify.add(trigger.itemId);
+      }
+      this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+      this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+    }
+  }
+
+  notifyScroll(position: number) {
+    const timestamp = Date.now();
+    for (const interaction of this.interactions) {
+      const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
+      const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
+      const matchingTrigger = interaction.triggers.find((trigger) => {
+        if (!('position' in trigger) || trigger.position === 0) return false;
+        const triggerPosition = trigger.position * window.innerWidth;
+        const isScrolledPastTrigger = triggerPosition < position;
+        if (!isScrolledPastTrigger && !trigger.isReverse) return false;
+        const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
+        return stateId === currentStateId;
+      });
+      if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId) continue;
+      const triggerPosition = matchingTrigger.position * window.innerWidth;
+      const isScrolledPastTrigger = triggerPosition < position;
+      const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
+      this.setCurrentStateForInteraction(interaction.id, targetStateId);
+      const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
+      const state = interaction.states.find((state) => state.id === targetStateId);
+      const actions = state?.actions ?? [];
+      for (const action of actions) {
+        const ctrl = this.ctrls.get(action.itemId);
+        if (!ctrl) continue;
+        ctrl.receiveAction(action.type);
+      }
+      const itemsStages = this.itemsStages.map((stage) => {
+        if (stage.interactionId !== interaction.id) return stage;
+        const newStage = {
+          itemId: stage.itemId,
+          interactionId: stage.interactionId,
+          type: 'transitioning' as const,
+          from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
+          to: targetStateId,
+          direction: targetStateId === activeStateId ? 'in' as const : 'out' as const,
+          updated: timestamp
+        };
+        return newStage;
+      });
+      this.itemsStages = itemsStages;
+      const itemsToNotify = new Set<ItemId>(transitioningItems);
+      for (const trigger of interaction.triggers) {
+        if (!('itemId' in trigger)) continue;
+        itemsToNotify.add(trigger.itemId);
+      }
+      this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+      this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+    }
+  }
+
+  notifyItemTrigger(itemId: string, triggerType: TriggerType): void {
     const timestamp = Date.now();
     for (const interaction of this.interactions) {
       const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
       const matchingTrigger = interaction.triggers.find((trigger) =>
-        trigger.itemId === itemId
+        'itemId' in trigger
+        && trigger.itemId === itemId
         && trigger.from === currentStateId
         && trigger.type === triggerType
       );
@@ -146,6 +241,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       });
       const itemsToNotify = new Set<ItemId>(transitioningItems);
       for (const trigger of interaction.triggers) {
+        if (!('itemId' in trigger)) continue;
         itemsToNotify.add(trigger.itemId);
       }
       this.notifyItemCtrlsChange(Array.from(itemsToNotify));
@@ -248,7 +344,8 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
           interactionId,
           type: 'active',
           isStartState: true,
-          updated: timestamp
+          updated: timestamp,
+          stateId: this.interactions.find((interaction) => interaction.id === interactionId)?.startStateId
         });
       }
     }
@@ -269,7 +366,7 @@ type TransitioningStage = {
 type ActiveStage = { type: 'active'; itemId: string; interactionId: string; stateId?: string; isStartState: boolean; updated: number; };
 type InteractionStateMap = Record<InteractionId, StateId>;
 type StateItemsIdsMap = Record<StateId, ItemId[]>;
-type TriggerType = InteractionTrigger['type'];
+type TriggerType = InteractionItemTrigger['type'];
 type InteractionId = string;
 type StateId = string;
 type ItemId = string;

package/src/interactions/ItemInteractionCtrl.ts

@@ -1,11 +1,12 @@
 import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
 import { getTransition } from './getTransition';
 import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
-import { InteractionTrigger } from '@cntrl-site/sdk';
+import { InteractionItemTrigger } from '@cntrl-site/sdk';
 
 export class ItemInteractionController implements ItemInteractionCtrl {
   private transitionsInProgress: Set<string> = new Set();
   private actionReceiver: ((type: 'play' | 'pause') => void) | undefined;
+
   constructor(
     private itemId: string,
     private registry: InteractionsRegistryPort,
@@ -29,13 +30,13 @@ export class ItemInteractionController implements ItemInteractionCtrl {
     };
   }
 
-  getHasTrigger(itemId: string, triggerType: InteractionTrigger['type']): boolean {
+  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean {
     const triggers = this.registry.getItemAvailableTriggers(itemId);
     return triggers.has(triggerType);
   }
 
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out') {
-    this.registry.notifyTrigger(this.itemId, type);
+    this.registry.notifyItemTrigger(this.itemId, type);
   }
 
   receiveAction(type: 'play' | 'pause') {

package/src/interactions/types.ts

@@ -1,8 +1,8 @@
-import { ArticleItemType, InteractionTrigger, ItemState } from '@cntrl-site/sdk';
+import { ArticleItemType, InteractionItemTrigger, ItemState } from '@cntrl-site/sdk';
 
 export interface ItemInteractionCtrl {
   getState(keys: string[]): StateCSSInfo;
-  getHasTrigger(itemId: string, triggerType: InteractionTrigger['type']): boolean;
+  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean;
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
   handleTransitionEnd?: (styleKey: string) => void;
   handleTransitionStart?: (styleKeys: string[]) => void;
@@ -14,8 +14,8 @@ export interface ItemInteractionCtrl {
 export interface InteractionsRegistryPort {
   register(itemId: string, ctrl: ItemInteractionCtrl): void;
   getStatePropsForItem(itemId: string): StateProps;
-  getItemAvailableTriggers(itemId: string): Set<InteractionTrigger['type']>;
-  notifyTrigger(itemId: string, type: TriggerType): void;
+  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
+  notifyItemTrigger(itemId: string, type: TriggerType): void;
   notifyTransitionEnd(itemId: string): void;
 }
 

package/src/provider/InteractionsContext.tsx

@@ -1,7 +1,8 @@
-import { createContext, FC, PropsWithChildren, useContext, useMemo } from 'react';
+import { createContext, FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo } from 'react';
 import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
 import { Article } from '@cntrl-site/sdk';
 import { useCurrentLayout } from '../common/useCurrentLayout';
+import { ArticleRectContext } from './ArticleRectContext';
 
 export const InteractionsContext = createContext<InteractionsRegistry | undefined>(undefined);
 
@@ -11,10 +12,30 @@ interface Props {
 
 export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, children }) => {
   const { layoutId } = useCurrentLayout();
+  const articleRectObserver = useContext(ArticleRectContext);
   const registry = useMemo(() => {
     if (!layoutId) return;
     return new InteractionsRegistry(article, layoutId);
   }, [layoutId]);
+
+  useEffect(() => {
+    if (!registry || !articleRectObserver) return;
+    const handleScroll = () => {
+      const scrollY = window.scrollY;
+      registry.notifyScroll(scrollY);
+    };
+    return articleRectObserver.on('scroll', handleScroll);
+  }, [registry, articleRectObserver]);
+
+  const notifyLoad = useCallback(() => {
+    if (!registry) return;
+    registry.notifyLoad();
+  }, [registry]);
+
+  useEffect(() => {
+    notifyLoad();
+  }, [notifyLoad]);
+
   return (
     <InteractionsContext.Provider value={registry}>
       {children}