@gxpl/sdk 0.0.7 → 0.0.9

package/lib/sdk-nextjs/components/items/RectangleItem/useRectangleItem.d.ts

@@ -0,0 +1,9 @@
+import { FillLayer, RectangleItem } from '../../../../sdk/types/article/Item';
+export declare function useRectangleItem(item: RectangleItem, sectionId: string): {
+    fill: FillLayer[];
+    strokeWidth: number;
+    radius: number;
+    strokeFill: FillLayer[];
+    blur: number;
+    backdropBlur: number;
+};

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRectangleItem = useRectangleItem;
+const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
+const defaultFill = [
+    {
+        id: 'default',
+        type: 'solid',
+        value: 'rgba(0, 0, 0, 1)',
+        blendMode: 'normal'
+    }
+];
+function useRectangleItem(item, sectionId) {
+    const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.BorderRadius, (item) => 'radius' in item.params ? item.params.radius : 0, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId);
+    const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.BorderWidth, (item) => 'strokeWidth' in item.params ? item.params.strokeWidth : 0, (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth, sectionId);
+    const fill = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Fill, (item) => 'fill' in item.params ? item.params.fill : defaultFill, (animator, scroll, value) => animator.getFill(value, scroll), sectionId);
+    const strokeFill = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.BorderFill, (item) => 'strokeFill' in item.params ? item.params.strokeFill : defaultFill, (animator, scroll, value) => animator.getBorderFill(value, scroll), sectionId);
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item) => 'blur' in item.params ? item.params.blur : 0, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId);
+    const backdropBlur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.BackdropBlur, (item) => 'backdropBlur' in item.params ? item.params.backdropBlur : 0, (animator, scroll, value) => animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur, sectionId);
+    return { fill, strokeWidth, radius, strokeFill, blur, backdropBlur };
+}

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

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const color_1 = require("@cntrl-site/color");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useRichTextItem_1 = require("./useRichTextItem");
+const useRichTextItemValues_1 = require("../useRichTextItemValues");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getFontFamilyValue_1 = require("../../../utils/getFontFamilyValue");
+const useExemplary_1 = require("../../../common/useExemplary");
+const useItemAngle_1 = require("../useItemAngle");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c;
+    const id = (0, react_1.useId)();
+    const [ref, setRef] = (0, react_1.useState)(null);
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { blur: itemBlur, wordSpacing: itemWordSpacing, letterSpacing: itemLetterSpacing, color: itemColor, fontSize, lineHeight } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
+    const exemplary = (0, useExemplary_1.useExemplary)();
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
+    const stateStyles = (_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _a !== void 0 ? _a : {};
+    const transition = (_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _b !== void 0 ? _b : 'none';
+    const textColor = (0, react_1.useMemo)(() => {
+        var _a;
+        const color = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.color, itemColor);
+        return color ? color_1.CntrlColor.parse(color) : undefined;
+    }, [itemColor, stateStyles.color]);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.angle, itemAngle);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.blur, itemBlur);
+    const letterSpacing = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.letterSpacing, itemLetterSpacing);
+    const wordSpacing = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.wordSpacing, itemWordSpacing);
+    const colorAlpha = textColor === null || textColor === void 0 ? void 0 : textColor.getAlpha();
+    const rangeStyles = (_c = item.params.rangeStyles) !== null && _c !== void 0 ? _c : [];
+    const rangeColors = rangeStyles.filter((style) => style.style === 'COLOR');
+    const hasVisibleRangeColors = rangeColors.some((color) => {
+        const alpha = color_1.CntrlColor.parse(color.value).getAlpha();
+        return alpha > 0;
+    });
+    const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
+    const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
+    (0, react_1.useEffect)(() => {
+        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', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `
+          .rich-text-wrapper-${item.id} {
+            font-size: ${item.params.fontSize * 100}vw;
+            line-height: ${item.params.lineHeight * 100}vw;
+            letter-spacing: ${item.params.letterSpacing * 100}vw;
+            word-spacing: ${item.params.wordSpacing * 100}vw;
+            font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(item.params.typeFace)};
+            font-weight: ${item.params.fontWeight};
+            font-style: ${item.params.fontStyle ? item.params.fontStyle : 'normal'};
+            vertical-align: ${item.params.verticalAlign};
+            font-variant: ${item.params.fontVariant};
+            color: ${color.fmt('rgba')};
+            transform: rotate(${item.area.angle}deg);
+            filter: ${item.params.blur !== 0 ? `blur(${item.params.blur * 100}vw)` : 'unset'};
+            text-transform: ${item.params.textTransform};
+            ${item.params.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+          @supports not (color: oklch(42% 0.3 90 / 1)) {
+            .rich-text-wrapper-${item.id} {
+              color: ${color.fmt('rgba')};
+            }
+          }
+        `] })] }));
+};
+exports.RichTextItem = RichTextItem;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextItem = void 0;
+const RichTextConverter_1 = require("../../../utils/RichTextConverter/RichTextConverter");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const richTextConverter = new RichTextConverter_1.RichTextConverter();
+const useRichTextItem = (item) => {
+    const { exemplary } = (0, useCntrlContext_1.useCntrlContext)();
+    const [content, styles] = richTextConverter.toHtml(item, exemplary);
+    return [content, styles];
+};
+exports.useRichTextItem = useRichTextItem;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RichTextWrapper = ({ isRichText, children, transformOrigin = 'top left' }) => {
+    if (!isRichText)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return ((0, jsx_runtime_1.jsx)("div", { style: { transformOrigin, transform: 'scale(var(--layout-deviation))' }, children: children }));
+};
+exports.RichTextWrapper = RichTextWrapper;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.itemsMap = void 0;
+const RectangleItem_1 = require("./RectangleItem/RectangleItem");
+const ImageItem_1 = require("./FileItem/ImageItem");
+const VideoItem_1 = require("./FileItem/VideoItem");
+const RichTextItem_1 = require("./RichTextItem/RichTextItem");
+const YoutubeEmbed_1 = require("./EmbedVideoItem/YoutubeEmbed");
+const VimeoEmbed_1 = require("./EmbedVideoItem/VimeoEmbed");
+const CustomItem_1 = require("./CustomItem/CustomItem");
+const GroupItem_1 = require("./GroupItem/GroupItem");
+const CodeEmbedItem_1 = require("./CodeEmbedItem/CodeEmbedItem");
+const CompoundItem_1 = require("./CompoundItem/CompoundItem");
+const ComponentItem_1 = require("./ComponentItem/ComponentItem");
+const ArticleItemType_1 = require("../../../sdk/types/article/ArticleItemType");
+exports.itemsMap = {
+    [ArticleItemType_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
+    [ArticleItemType_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
+    [ArticleItemType_1.ArticleItemType.Video]: VideoItem_1.VideoItem,
+    [ArticleItemType_1.ArticleItemType.RichText]: RichTextItem_1.RichTextItem,
+    [ArticleItemType_1.ArticleItemType.YoutubeEmbed]: YoutubeEmbed_1.YoutubeEmbedItem,
+    [ArticleItemType_1.ArticleItemType.VimeoEmbed]: VimeoEmbed_1.VimeoEmbedItem,
+    [ArticleItemType_1.ArticleItemType.Custom]: CustomItem_1.CustomItem,
+    [ArticleItemType_1.ArticleItemType.Group]: GroupItem_1.GroupItem,
+    [ArticleItemType_1.ArticleItemType.Compound]: CompoundItem_1.CompoundItem,
+    [ArticleItemType_1.ArticleItemType.CodeEmbed]: CodeEmbedItem_1.CodeEmbedItem,
+    [ArticleItemType_1.ArticleItemType.Component]: ComponentItem_1.ComponentItem
+};

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

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraggable = useDraggable;
+const react_1 = require("react");
+const INITIAL_STATE = {
+    drag: false,
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+    pivotX: 0,
+    pivotY: 0,
+    lastX: 0,
+    lastY: 0
+};
+function useDraggable(data, dragHandler, preventDragOnChildren = false) {
+    const dragStateRef = (0, react_1.useRef)(INITIAL_STATE);
+    const prevDragStateRef = (0, react_1.useRef)();
+    const dragHandlerRef = (0, react_1.useRef)();
+    const untrackMouseMoveRef = (0, react_1.useRef)();
+    const animationFrameRef = (0, react_1.useRef)();
+    dragHandlerRef.current = dragHandler;
+    const setDragState = (0, react_1.useCallback)(action => {
+        const state = isStateGetter(action)
+            ? action(dragStateRef.current)
+            : action;
+        if (!prevDragStateRef.current) {
+            prevDragStateRef.current = dragStateRef.current;
+        }
+        dragStateRef.current = state;
+        if (animationFrameRef.current !== undefined)
+            return;
+        animationFrameRef.current = window.requestAnimationFrame(() => {
+            var _a;
+            animationFrameRef.current = undefined;
+            (_a = dragHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(dragHandlerRef, dragStateRef.current, prevDragStateRef.current);
+            prevDragStateRef.current = dragStateRef.current;
+        });
+    }, []);
+    const handleMouseMove = (0, react_1.useCallback)(event => {
+        event.stopPropagation();
+        const el = event.target;
+        if (!(el instanceof HTMLElement))
+            return;
+        setDragState(state => {
+            if (!state.drag) {
+                const clientRect = el.getBoundingClientRect();
+                return {
+                    drag: true,
+                    startX: event.clientX,
+                    startY: event.clientY,
+                    currentX: event.clientX,
+                    currentY: event.clientY,
+                    pivotX: event.clientX - clientRect.x,
+                    pivotY: event.clientY - clientRect.y,
+                    lastX: state.lastX,
+                    lastY: state.lastY
+                };
+            }
+            return Object.assign(Object.assign({}, state), { currentX: state.currentX + event.movementX, currentY: state.currentY + event.movementY });
+        });
+    }, [setDragState, data.draggableRef, preventDragOnChildren]);
+    const handleMouseUp = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        setDragState(state => (Object.assign(Object.assign({}, state), { drag: false, lastX: state.currentX - state.startX + state.lastX, lastY: state.currentY - state.startY + state.lastY })));
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+    }, [setDragState]);
+    const handleScroll = (0, react_1.useCallback)(() => {
+        setDragState(state => state);
+    }, [setDragState]);
+    const trackMouseMove = (0, react_1.useCallback)(() => {
+        window.addEventListener('mousemove', handleMouseMove, { capture: true });
+        window.addEventListener('mouseup', handleMouseUp, { capture: true });
+        window.addEventListener('scroll', handleScroll, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove, { capture: true });
+            window.removeEventListener('mouseup', handleMouseUp, { capture: true });
+            window.removeEventListener('scroll', handleScroll, { capture: true });
+        };
+    }, [handleMouseMove, handleMouseUp, handleScroll]);
+    const handleMouseDown = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        if (preventDragOnChildren && event.target instanceof Node && data.draggableRef instanceof Node) {
+            if (event.target !== data.draggableRef && data.draggableRef.contains(event.target))
+                return;
+        }
+        if (event.button !== 0)
+            return;
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+        untrackMouseMoveRef.current = trackMouseMove();
+    }, [trackMouseMove]);
+    const handleTouchMove = (0, react_1.useCallback)(event => {
+        event.stopPropagation();
+        event.preventDefault();
+        const touch = event.touches[0];
+        const el = event.target;
+        if (!(el instanceof HTMLElement))
+            return;
+        setDragState(state => {
+            if (!state.drag) {
+                const clientRect = el.getBoundingClientRect();
+                return {
+                    drag: true,
+                    startX: touch.clientX,
+                    startY: touch.clientY,
+                    currentX: touch.clientX,
+                    currentY: touch.clientY,
+                    pivotX: touch.clientX - clientRect.x,
+                    pivotY: touch.clientY - clientRect.y,
+                    lastX: state.lastX,
+                    lastY: state.lastY
+                };
+            }
+            const movementX = touch.clientX - state.currentX;
+            const movementY = touch.clientY - state.currentY;
+            return Object.assign(Object.assign({}, state), { currentX: state.currentX + movementX, currentY: state.currentY + movementY });
+        });
+    }, [setDragState]);
+    const handleTouchEnd = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        document.body.style.overflow = '';
+        document.documentElement.style.overflow = '';
+        setDragState(state => (Object.assign(Object.assign({}, state), { drag: false, lastX: state.currentX - state.startX + state.lastX, lastY: state.currentY - state.startY + state.lastY })));
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+    }, [setDragState]);
+    const trackTouchMove = (0, react_1.useCallback)(() => {
+        window.addEventListener('touchmove', handleTouchMove, { capture: true, passive: false });
+        window.addEventListener('touchend', handleTouchEnd, { capture: true });
+        window.addEventListener('touchcancel', handleTouchEnd, { capture: true });
+        return () => {
+            window.removeEventListener('touchmove', handleTouchMove, { capture: true });
+            window.removeEventListener('touchend', handleTouchEnd, { capture: true });
+            window.removeEventListener('touchcancel', handleTouchEnd, { capture: true });
+        };
+    }, [handleTouchMove, handleTouchEnd]);
+    const handleTouchStart = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        if (preventDragOnChildren && event.target instanceof Node && data.draggableRef instanceof Node) {
+            if (event.target !== data.draggableRef && data.draggableRef.contains(event.target))
+                return;
+        }
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
+        const selection = document.getSelection();
+        if (selection) {
+            selection.removeAllRanges();
+        }
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+        untrackMouseMoveRef.current = trackTouchMove();
+    }, [trackTouchMove]);
+    (0, react_1.useEffect)(() => {
+        if (!data.draggableRef || !data.isEnabled)
+            return;
+        const mouseHandler = handleMouseDown;
+        const touchHandler = handleTouchStart;
+        data.draggableRef.addEventListener('mousedown', mouseHandler);
+        data.draggableRef.addEventListener('touchstart', touchHandler);
+        return () => {
+            var _a, _b, _c;
+            (_a = data.draggableRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', mouseHandler);
+            (_b = data.draggableRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchstart', touchHandler);
+            (_c = untrackMouseMoveRef.current) === null || _c === void 0 ? void 0 : _c.call(untrackMouseMoveRef);
+            if (animationFrameRef.current !== undefined) {
+                window.cancelAnimationFrame(animationFrameRef.current);
+            }
+            document.body.style.overflow = '';
+            document.documentElement.style.overflow = '';
+        };
+    }, [data.draggableRef, data.isEnabled, handleMouseDown, handleTouchStart]);
+}
+function isStateGetter(action) {
+    return typeof action === 'function';
+}

package/{dist → lib}/sdk-nextjs/components/items/useItemAngle.d.ts

@@ -1,2 +1,2 @@
 import { ItemAny } from '../../../sdk/types/article/Item';
-export declare const useItemAngle: (item: ItemAny, sectionId: string) => number | undefined;
+export declare const useItemAngle: (item: ItemAny, sectionId: string) => number;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemAngle = void 0;
+const Keyframe_1 = require("../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useItemAngle = (item, sectionId) => {
+    const angle = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Rotation, (item) => item.area.angle, (animator, scroll, value) => animator.getRotation({ angle: value }, scroll).angle, sectionId);
+    return angle;
+};
+exports.useItemAngle = useItemAngle;

package/{dist → lib}/sdk-nextjs/components/items/useItemArea.d.ts

@@ -5,8 +5,8 @@ export declare function useItemArea(item: ItemAny, sectionId: string, stateValue
     width?: number;
     height?: number;
 }): {
-    width: number | undefined;
-    height: number | undefined;
-    top: number | undefined;
-    left: number | undefined;
+    width: number;
+    height: number;
+    top: number;
+    left: number;
 };

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemArea = useItemArea;
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const Keyframe_1 = require("../../../sdk/types/keyframe/Keyframe");
+function useItemArea(item, sectionId, stateValues) {
+    var _a, _b, _c, _d;
+    const position = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Position, (item) => item.area, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId);
+    const dimensions = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Dimensions, (item) => item.area, (animator, scroll, value) => animator.getDimensions(value, scroll), sectionId);
+    const width = ((_a = stateValues.width) !== null && _a !== void 0 ? _a : dimensions === null || dimensions === void 0 ? void 0 : dimensions.width);
+    const height = ((_b = stateValues.height) !== null && _b !== void 0 ? _b : dimensions === null || dimensions === void 0 ? void 0 : dimensions.height);
+    const top = ((_c = stateValues.top) !== null && _c !== void 0 ? _c : position === null || position === void 0 ? void 0 : position.top);
+    const left = ((_d = stateValues.left) !== null && _d !== void 0 ? _d : position === null || position === void 0 ? void 0 : position.left);
+    return { width, height, top, left };
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemPointerEvents = useItemPointerEvents;
+const react_1 = require("react");
+function useItemPointerEvents(pointerEvents, isParentVisible) {
+    const getAllowPointerEvents = () => {
+        switch (pointerEvents) {
+            case 'never':
+                return false;
+            case 'when_visible':
+                return isParentVisible;
+            case 'always':
+                return true;
+        }
+    };
+    const [allowPointerEvents, setAllowPointerEvents] = (0, react_1.useState)(getAllowPointerEvents());
+    const handleVisibilityChange = (0, react_1.useCallback)((isVisible) => {
+        if (!isParentVisible || pointerEvents !== 'when_visible')
+            return;
+        setAllowPointerEvents(isVisible);
+    }, [isParentVisible, pointerEvents]);
+    return { allowPointerEvents, handleVisibilityChange };
+}

package/{dist → lib}/sdk-nextjs/components/items/useItemScale.d.ts

@@ -1,2 +1,2 @@
 import { ItemAny } from '../../../sdk/types/article/Item';
-export declare const useItemScale: (item: ItemAny, sectionId: string) => number | undefined;
+export declare const useItemScale: (item: ItemAny, sectionId: string) => number;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemScale = void 0;
+const Keyframe_1 = require("../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useItemScale = (item, sectionId) => {
+    const scale = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Scale, (item) => item.area.scale, (animator, scroll, value) => animator.getScale({ scale: value }, scroll).scale, sectionId);
+    return scale;
+};
+exports.useItemScale = useItemScale;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemTriggers = useItemTriggers;
+function useItemTriggers(interactionCtrl) {
+    return {
+        onClick: () => {
+            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('click');
+        },
+        onMouseEnter: () => {
+            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('hover-in');
+        },
+        onMouseLeave: () => {
+            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('hover-out');
+        }
+    };
+}

package/lib/sdk-nextjs/components/items/useRichTextItemValues.d.ts

@@ -0,0 +1,9 @@
+import { RichTextItem } from '../../../sdk/types/article/Item';
+export declare const useRichTextItemValues: (item: RichTextItem, sectionId: string) => {
+    blur: number;
+    letterSpacing: number;
+    wordSpacing: number;
+    color: string;
+    fontSize: number;
+    lineHeight: number;
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextItemValues = void 0;
+const Keyframe_1 = require("../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
+const useRichTextItemValues = (item, sectionId) => {
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item) => 'blur' in item.params ? item.params.blur : 0, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId);
+    const letterSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.LetterSpacing, (item) => 'letterSpacing' in item.params ? item.params.letterSpacing : 0, (animator, scroll, value) => animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing, sectionId);
+    const wordSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.WordSpacing, (item) => 'wordSpacing' in item.params ? item.params.wordSpacing : 0, (animator, scroll, value) => animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing, sectionId);
+    const color = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.TextColor, (item) => 'color' in item.params ? item.params.color : DEFAULT_COLOR, (animator, scroll, value) => animator.getTextColor({ color: value }, scroll).color, sectionId);
+    const fontSize = item.params.fontSize;
+    const lineHeight = item.params.lineHeight;
+    return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };
+};
+exports.useRichTextItemValues = useRichTextItemValues;

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

@@ -0,0 +1,20 @@
+"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");
+function useSizing(item) {
+    const sizing = (0, isItemType_1.isItemType)(item, ArticleItemType_1.ArticleItemType.RichText)
+        ? item.params.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,11 @@
+"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");
+function useStickyItemTop(item, sectionId, stateTop) {
+    const data = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Position, (item) => item.area, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId);
+    const top = data.top;
+    const sticky = item.sticky;
+    return sticky ? (stateTop !== null && stateTop !== void 0 ? stateTop : top) - sticky.from : 0;
+}

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/{dist → lib}/sdk-nextjs/interactions/InteractionsRegistry.d.ts

@@ -9,7 +9,7 @@ export declare class InteractionsRegistry implements InteractionsRegistryPort {
     private interactionStateMap;
     private itemsStages;
     private activeStateIdInteractionIdMap;
-    constructor(article: Article, layoutId: string);
+    constructor(article: Article);
     register(itemId: ItemId, ctrl: ItemInteractionCtrl): void;
     getStatePropsForItem(itemId: string): StateProps;
     getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;