@gxpl/sdk 0.0.7 → 0.0.8

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSizing = useSizing;
+exports.parseSizing = parseSizing;
+const ArticleItemType_1 = require("../../../sdk/types/article/ArticleItemType");
+const isItemType_1 = require("../../utils/isItemType");
+const useLayoutContext_1 = require("../useLayoutContext");
+function useSizing(item) {
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const sizing = layout && (0, isItemType_1.isItemType)(item, ArticleItemType_1.ArticleItemType.RichText)
+        ? item.layoutParams[layout].sizing
+        : undefined;
+    const sizingAxis = parseSizing(sizing);
+    return sizingAxis;
+}
+function parseSizing(sizing = 'manual') {
+    const axisSizing = sizing.split(' ');
+    return {
+        y: axisSizing[0],
+        x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
+    };
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStickyItemTop = useStickyItemTop;
+const Keyframe_1 = require("../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../useLayoutContext");
+function useStickyItemTop(item, sectionId, stateTop) {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const data = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Position, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        return item.area[layoutId];
+    }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
+    const top = data ? data.top : layoutId ? item.area[layoutId].top : 0;
+    const sticky = layoutId ? item.sticky[layoutId] : undefined;
+    return sticky ? (stateTop !== null && stateTop !== void 0 ? stateTop : top) - sticky.from : 0;
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayoutContext = useLayoutContext;
+const react_1 = require("react");
+const LayoutContext_1 = require("../provider/LayoutContext");
+function useLayoutContext() {
+    const layoutId = (0, react_1.useContext)(LayoutContext_1.LayoutContext);
+    return layoutId;
+}

package/{dist → lib}/sdk-nextjs/interactions/CSSPropertyNameMap.d.ts

@@ -1,4 +1,4 @@
-import { ArticleItemType } from '../../sdk/types/article/ArticleItemType';
-import { ItemState } from '../../sdk/types/article/ItemState';
+import { ArticleItemType } from "../../sdk/types/article/ArticleItemType";
+import { ItemState } from "../../sdk/types/article/ItemState";
 export declare const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string>;
 export declare function getStyleKeysFromCSSProperty(cssProp: string): string[];

package/lib/sdk-nextjs/interactions/CSSPropertyNameMap.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CSSPropertyNameMap = void 0;
+exports.getStyleKeysFromCSSProperty = getStyleKeysFromCSSProperty;
+exports.CSSPropertyNameMap = {
+    width: 'width',
+    height: 'height',
+    top: 'top',
+    left: 'left',
+    scale: 'transform',
+    angle: 'transform',
+    opacity: 'opacity',
+    radius: 'border-radius',
+    strokeWidth: 'border-width',
+    strokeFill: 'border-color',
+    fill: 'background',
+    blur: 'filter',
+    backdropBlur: 'backdrop-filter',
+    letterSpacing: 'letter-spacing',
+    wordSpacing: 'word-spacing',
+    color: 'color'
+};
+const PropertyNameCSSMap = {
+    'transform': ['angle', 'scale'],
+    'border-radius': ['radius'],
+    'border-width': ['strokeWidth'],
+    'border-color': ['strokeFill'],
+    'background': ['fill'],
+    'filter': ['blur'],
+    'backdrop-filter': ['backdrop-blur'],
+    'letter-spacing': ['letterSpacing'],
+    'word-spacing': ['wordSpacing'],
+};
+function getStyleKeysFromCSSProperty(cssProp) {
+    var _a;
+    const key = (_a = PropertyNameCSSMap[cssProp]) !== null && _a !== void 0 ? _a : [cssProp];
+    return key;
+}

package/lib/sdk-nextjs/interactions/InteractionsRegistry.js

@@ -0,0 +1,355 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractionsRegistry = void 0;
+const isItemType_1 = require("../utils/isItemType");
+const ArticleItemType_1 = require("../../sdk/types/article/ArticleItemType");
+class InteractionsRegistry {
+    constructor(article, layoutId) {
+        var _a;
+        this.ctrls = new Map();
+        this.items = this.unpackItems(article);
+        const interactions = (_a = article.interactions[layoutId]) !== null && _a !== void 0 ? _a : [];
+        const activeStatesIds = interactions.reduce((map, inter) => {
+            var _a;
+            const activeStateId = (_a = inter.states.find((state) => state.id !== inter.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
+            if (!activeStateId) {
+                throw new Error(`Failed to find active state for interaction w/ id="${inter.id}"`);
+            }
+            map.push(activeStateId);
+            return map;
+        }, []);
+        const interactionStateMap = interactions.reduce((map, { id, startStateId }) => {
+            map[id] = startStateId;
+            return map;
+        }, {});
+        this.activeStateIdInteractionIdMap = interactions.reduce((map, interaction) => {
+            const activeState = interaction.states.find((state) => state.id !== interaction.startStateId);
+            if (activeState) {
+                map[activeState.id] = interaction.id;
+            }
+            return map;
+        }, {});
+        const stateItemsIdsMap = activeStatesIds.reduce((map, stateId) => {
+            map[stateId] = this.items
+                .filter((item) => {
+                var _a;
+                const state = (_a = item.state[stateId]) !== null && _a !== void 0 ? _a : {};
+                const hasKeys = Object.keys(state).length !== 0;
+                return hasKeys;
+            })
+                .map((item) => item.id);
+            return map;
+        }, {});
+        this.interactions = interactions;
+        this.stateItemsIdsMap = stateItemsIdsMap;
+        this.interactionStateMap = interactionStateMap;
+        const itemStages = this.getDefaultItemStages();
+        this.itemsStages = itemStages;
+    }
+    register(itemId, ctrl) {
+        this.ctrls.set(itemId, ctrl);
+    }
+    getStatePropsForItem(itemId) {
+        var _a, _b, _c;
+        const { items } = this;
+        const item = items.find((item) => item.id === itemId);
+        const itemStages = this.itemsStages.filter((stage) => stage.itemId === itemId);
+        itemStages.sort((a, b) => a.updated - b.updated);
+        const itemStyles = {};
+        for (const stage of itemStages) {
+            if (stage.type === 'active') {
+                if (stage.isStartState)
+                    continue;
+                const params = (_a = item.state[stage.stateId]) !== null && _a !== void 0 ? _a : {};
+                for (const [key, stateDetails] of Object.entries(params)) {
+                    itemStyles[key] = {
+                        value: stateDetails.value
+                    };
+                }
+            }
+            if (stage.type === 'transitioning') {
+                const activeStateId = stage.direction === 'in' ? stage.to : stage.from;
+                const params = (_b = item.state[activeStateId]) !== null && _b !== void 0 ? _b : {};
+                for (const [key, stateDetails] of Object.entries(params)) {
+                    const transitionDetails = stateDetails[stage.direction];
+                    if (!transitionDetails)
+                        continue;
+                    itemStyles[key] = {
+                        value: stage.direction === 'in' ? stateDetails.value : (_c = itemStyles[key]) === null || _c === void 0 ? void 0 : _c.value,
+                        transition: {
+                            timing: transitionDetails.timing,
+                            duration: transitionDetails.duration,
+                            delay: transitionDetails.delay
+                        }
+                    };
+                }
+            }
+        }
+        return itemStyles;
+    }
+    getItemAvailableTriggers(itemId) {
+        const available = new Set();
+        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);
+                }
+            }
+        }
+        return available;
+    }
+    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) => 'itemId' in trigger
+                && trigger.itemId === itemId
+                && trigger.from === currentStateId
+                && trigger.type === triggerType);
+            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);
+        }
+    }
+    notifyTransitionStartForItems(itemsIds, activeStateId) {
+        var _a, _b;
+        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 : {});
+            (_b = ctrl === null || ctrl === void 0 ? void 0 : ctrl.handleTransitionStart) === null || _b === void 0 ? void 0 : _b.call(ctrl, keys);
+        }
+    }
+    notifyTransitionEnd(itemId) {
+        var _a;
+        const timestamp = Date.now();
+        this.itemsStages = this.itemsStages.map((stage) => {
+            if (stage.itemId !== itemId || stage.type !== 'transitioning')
+                return stage;
+            return {
+                itemId,
+                interactionId: stage.interactionId,
+                type: 'active',
+                stateId: stage.to,
+                isStartState: stage.direction === 'out',
+                updated: timestamp
+            };
+        });
+        (_a = this.ctrls.get(itemId)) === null || _a === void 0 ? void 0 : _a.receiveChange();
+    }
+    getCurrentStateByInteractionId(id) {
+        let state;
+        for (const interactionId of Object.keys(this.interactionStateMap)) {
+            if (id !== interactionId)
+                continue;
+            state = this.interactionStateMap[interactionId];
+        }
+        if (!state)
+            throw new Error(`Failed to find current state for interaction w/ id="${id}"`);
+        return state;
+    }
+    setCurrentStateForInteraction(interactionId, stateId) {
+        this.interactionStateMap = Object.assign(Object.assign({}, this.interactionStateMap), { [interactionId]: stateId });
+    }
+    getActiveInteractionState(interactionId) {
+        var _a;
+        const { interactions } = this;
+        const interaction = interactions.find((interaction) => interaction.id === interactionId);
+        const activeStateId = (_a = interaction.states.find(state => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
+        if (!activeStateId) {
+            throw new Error(`Failed to find active state for interaction w/ id="${interactionId}"`);
+        }
+        return activeStateId;
+    }
+    notifyItemCtrlsChange(itemsIds) {
+        var _a;
+        for (const itemId of itemsIds) {
+            (_a = this.ctrls.get(itemId)) === null || _a === void 0 ? void 0 : _a.receiveChange();
+        }
+    }
+    unpackItems(article) {
+        const itemsArr = [];
+        for (const section of article.sections) {
+            const items = this.getNestedItems(section.items);
+            itemsArr.push(...items);
+        }
+        return itemsArr;
+    }
+    getNestedItems(items) {
+        var _a;
+        const allItems = [];
+        for (const item of items) {
+            if ((0, isItemType_1.isItemType)(item, ArticleItemType_1.ArticleItemType.Group) || (0, isItemType_1.isItemType)(item, ArticleItemType_1.ArticleItemType.Compound)) {
+                const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
+                const nestedItems = this.getNestedItems(groupChildren);
+                allItems.push(...nestedItems);
+            }
+            allItems.push(item);
+        }
+        return allItems;
+    }
+    getDefaultItemStages() {
+        var _a;
+        const timestamp = Date.now();
+        const { items } = this;
+        const stages = [];
+        for (const item of items) {
+            const itemStatesMap = item.state;
+            if (!itemStatesMap)
+                continue;
+            for (const stateId of Object.keys(itemStatesMap)) {
+                const interactionId = this.activeStateIdInteractionIdMap[stateId];
+                if (!interactionId)
+                    continue;
+                stages.push({
+                    itemId: item.id,
+                    interactionId,
+                    type: 'active',
+                    isStartState: true,
+                    updated: timestamp,
+                    stateId: (_a = this.interactions.find((interaction) => interaction.id === interactionId)) === null || _a === void 0 ? void 0 : _a.startStateId
+                });
+            }
+        }
+        return stages;
+    }
+}
+exports.InteractionsRegistry = InteractionsRegistry;

package/lib/sdk-nextjs/interactions/ItemInteractionCtrl.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemInteractionController = void 0;
+const getTransition_1 = require("./getTransition");
+const CSSPropertyNameMap_1 = require("./CSSPropertyNameMap");
+class ItemInteractionController {
+    constructor(itemId, registry, onChange) {
+        this.itemId = itemId;
+        this.registry = registry;
+        this.onChange = onChange;
+        this.transitionsInProgress = new Set();
+        this.handleTransitionStart = (types) => {
+            this.transitionsInProgress.clear();
+            for (const type of types) {
+                this.transitionsInProgress.add(type);
+            }
+        };
+        this.handleTransitionEnd = (cssPropKey) => {
+            if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-radius')) {
+                cssPropKey = 'border-radius';
+            }
+            if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-width')) {
+                cssPropKey = 'border-width';
+            }
+            const styleKeys = (0, CSSPropertyNameMap_1.getStyleKeysFromCSSProperty)(cssPropKey);
+            for (const key of styleKeys) {
+                const found = this.transitionsInProgress.has(key);
+                if (!found)
+                    continue;
+                this.transitionsInProgress.delete(key);
+                break;
+            }
+            if (this.transitionsInProgress.size !== 0)
+                return;
+            this.registry.notifyTransitionEnd(this.itemId);
+        };
+        this.registry.register(itemId, this);
+    }
+    getState(keys) {
+        const stateProps = this.registry.getStatePropsForItem(this.itemId);
+        const styles = keys.reduce((map, styleKey) => {
+            const prop = stateProps[styleKey];
+            if ((prop === null || prop === void 0 ? void 0 : prop.value) === undefined)
+                return map;
+            map[styleKey] = prop.value;
+            return map;
+        }, {});
+        const transition = (0, getTransition_1.getTransition)(stateProps, keys);
+        return {
+            styles,
+            transition
+        };
+    }
+    getHasTrigger(itemId, triggerType) {
+        const triggers = this.registry.getItemAvailableTriggers(itemId);
+        return triggers.has(triggerType);
+    }
+    sendTrigger(type) {
+        this.registry.notifyItemTrigger(this.itemId, type);
+    }
+    receiveAction(type) {
+        var _a;
+        (_a = this.actionReceiver) === null || _a === void 0 ? void 0 : _a.call(this, type);
+    }
+    setActionReceiver(action) {
+        this.actionReceiver = action;
+    }
+    receiveChange() {
+        this.onChange();
+    }
+}
+exports.ItemInteractionController = ItemInteractionController;

package/lib/sdk-nextjs/interactions/getTransition.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTransition = getTransition;
+const CSSPropertyNameMap_1 = require("./CSSPropertyNameMap");
+function getTransition(state, keys) {
+    if (Object.keys(state).length === 0)
+        return 'none';
+    const transitions = [];
+    for (const [key, params] of Object.entries(state)) {
+        if (!keys.includes(key) || !params.transition)
+            continue;
+        const { transition: { duration, delay, timing } } = params;
+        const cssKey = CSSPropertyNameMap_1.CSSPropertyNameMap[key];
+        const nonZeroDuration = Math.max(duration, 0.01);
+        transitions.push(`${cssKey} ${nonZeroDuration}ms ${timing} ${delay}ms`);
+    }
+    return transitions.length > 0
+        ? transitions.join(', ')
+        : 'none';
+}

package/{dist → lib}/sdk-nextjs/interactions/types.d.ts

@@ -1,6 +1,6 @@
-import { ArticleItemType } from '../../sdk/types/article/ArticleItemType';
-import { InteractionItemTrigger } from '../../sdk/types/article/Interaction';
-import { ItemState } from '../../sdk/types/article/ItemState';
+import { ArticleItemType } from "../../sdk/types/article/ArticleItemType";
+import { InteractionItemTrigger } from "../../sdk/types/article/Interaction";
+import { ItemState } from "../../sdk/types/article/ItemState";
 export interface ItemInteractionCtrl {
     getState<T>(keys: string[]): StateCSSInfo<T>;
     getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean;

package/lib/sdk-nextjs/interactions/useItemInteractionCtrl.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemInteractionCtrl = useItemInteractionCtrl;
+const react_1 = require("react");
+const ItemInteractionCtrl_1 = require("./ItemInteractionCtrl");
+const InteractionsContext_1 = require("../provider/InteractionsContext");
+function useItemInteractionCtrl(itemId) {
+    const [_, triggerRender] = (0, react_1.useState)(0);
+    const registry = (0, InteractionsContext_1.useInteractionsRegistry)();
+    const ctrl = (0, react_1.useMemo)(() => {
+        if (!registry)
+            return;
+        return new ItemInteractionCtrl_1.ItemInteractionController(itemId, registry, () => triggerRender(prev => prev + 1));
+    }, [itemId, registry]);
+    return ctrl;
+}

package/{dist → lib}/sdk-nextjs/provider/ArticleRectContext.d.ts

@@ -1,2 +1,2 @@
 import { ArticleRectObserver } from '../utils/ArticleRectManager/ArticleRectObserver';
-export declare const ArticleRectContext: import('react').Context<ArticleRectObserver | null>;
+export declare const ArticleRectContext: import("react").Context<ArticleRectObserver | null>;

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

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

package/{dist → lib}/sdk-nextjs/provider/CntrlContext.d.ts

@@ -1,2 +1,2 @@
 import { CntrlSdkContext } from './CntrlSdkContext';
-export declare const CntrlContext: import('react').Context<CntrlSdkContext>;
+export declare const CntrlContext: import("react").Context<CntrlSdkContext>;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CntrlContext = void 0;
+const react_1 = require("react");
+const defaultContext_1 = require("./defaultContext");
+exports.CntrlContext = (0, react_1.createContext)(defaultContext_1.cntrlSdkContext);

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CntrlProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CntrlContext_1 = require("./CntrlContext");
+const defaultContext_1 = require("./defaultContext");
+const CntrlProvider = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(CntrlContext_1.CntrlContext.Provider, { value: defaultContext_1.cntrlSdkContext, children: children }));
+};
+exports.CntrlProvider = CntrlProvider;