@gxpl/sdk 0.0.7 → 0.0.9

package/lib/sdk-nextjs/components/items/FileItem/VideoItem.js

@@ -0,0 +1,216 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const LinkWrapper_1 = require("../LinkWrapper");
+const useFileItem_1 = require("./useFileItem");
+const useItemAngle_1 = require("../useItemAngle");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const ScrollPlaybackVideo_1 = require("../../ScrollPlaybackVideo");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const useVideoFx_1 = require("../../../utils/effects/useVideoFx");
+const useElementRect_1 = require("../../../utils/useElementRect");
+const useItemFXData_1 = require("../../../common/useItemFXData");
+const getFill_1 = require("../../../utils/getFill");
+const useExemplary_1 = require("../../../common/useExemplary");
+const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const id = (0, react_1.useId)();
+    const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const [isVideoPlaying, setIsVideoPlaying] = (0, react_1.useState)(false);
+    const isScrollPausedRef = (0, react_1.useRef)(false);
+    const [userPaused, setUserPaused] = (0, react_1.useState)(false);
+    const [isVideoInteracted, setIsVideoInteracted] = (0, react_1.useState)(false);
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    const [videoRef, setVideoRef] = (0, react_1.useState)(null);
+    const fxCanvas = (0, react_1.useRef)(null);
+    const { url, hasGLEffect } = item.params;
+    const isInitialRef = (0, react_1.useRef)(true);
+    const area = item.area;
+    const params = item.params;
+    const exemplary = (0, useExemplary_1.useExemplary)();
+    const width = area && exemplary ? area.width * exemplary : 0;
+    const height = area && exemplary ? area.height * exemplary : 0;
+    const { controlsValues, fragmentShader } = (0, useItemFXData_1.useItemFXData)(item, sectionId);
+    const rect = (0, useElementRect_1.useElementRect)(ref);
+    const rectWidth = Math.floor((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
+    const rectHeight = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0);
+    const scrollPlayback = params.scrollPlayback;
+    const hasScrollPlayback = scrollPlayback !== null;
+    const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
+    const videoStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius']);
+    const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
+    const stateStrokeFillLayers = (_c = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _c === void 0 ? void 0 : _c.strokeFill;
+    const strokeSolidTransition = (_d = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _d !== void 0 ? _d : 'none';
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _e === void 0 ? void 0 : _e.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.blur, itemBlur);
+    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.strokeWidth, itemStrokeWidth);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.radius, itemRadius);
+    const strokeValue = stateStrokeFillLayers
+        ? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
+        : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
+    const stroke = strokeValue
+        ? (_k = (0, getFill_1.getFill)(strokeValue)) !== null && _k !== void 0 ? _k : 'transparent'
+        : 'transparent';
+    (0, react_1.useEffect)(() => {
+        isInitialRef.current = false;
+    }, []);
+    const isFXAllowed = (0, useVideoFx_1.useVideoFx)(fxCanvas.current, !!(hasGLEffect && !isInitialRef.current), {
+        videoUrl: url,
+        fragmentShader,
+        controls: controlsValues
+    }, width, height);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const inlineStyles = {
+        borderRadius: `${radius * 100}vw`,
+        borderWidth: `${strokeWidth * 100}vw`,
+        transition: (_l = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _l !== void 0 ? _l : 'none'
+    };
+    const isInteractive = opacity !== 0;
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    (0, react_1.useEffect)(() => {
+        if (!videoRef || params.play !== 'on-click' || !ref)
+            return;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (userPaused || !isVideoInteracted)
+                return;
+            if (entry.isIntersecting) {
+                isScrollPausedRef.current = false;
+                videoRef.play();
+            }
+            else {
+                isScrollPausedRef.current = true;
+                videoRef.pause();
+            }
+        });
+        observer.observe(ref);
+        return () => observer.disconnect();
+    }, [videoRef, ref, userPaused, isVideoInteracted]);
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_m = item.link) === null || _m === void 0 ? void 0 : _m.url, target: (_o = item.link) === null || _o === void 0 ? void 0 : _o.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)`, filter: `blur(${blur * 100}vw)` }, (strokeValue ? Object.assign({ '--stroke-background': stroke }, (strokeValue.type === 'image' ? {
+                    '--stroke-background-position': 'center',
+                    '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                    '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                } : {})) : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_p = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _p !== void 0 ? _p : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.params.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_q = item.params.coverUrl) !== null && _q !== void 0 ? _q : '', ref: setVideoRef, autoPlay: params.play === 'auto', preload: "auto", onClick: () => {
+                                    setIsVideoInteracted(true);
+                                }, muted: params.muted, onPlay: () => {
+                                    setIsVideoPlaying(true);
+                                    setUserPaused(false);
+                                }, onPause: () => {
+                                    if (!isScrollPausedRef.current) {
+                                        setUserPaused(true);
+                                    }
+                                    setIsVideoPlaying(false);
+                                }, onMouseEnter: () => {
+                                    if (!videoRef || params.play !== 'on-hover')
+                                        return;
+                                    videoRef.play();
+                                }, onMouseLeave: () => {
+                                    if (!videoRef || params.play !== 'on-hover')
+                                        return;
+                                    videoRef.pause();
+                                }, loop: true, controls: params.controls, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.params.url }) }), (params.play === 'on-click' || params.play === 'on-hover') && item.params.coverUrl && !isVideoInteracted && ((0, jsx_runtime_1.jsx)("img", { onMouseEnter: () => {
+                                    if (!videoRef || params.play !== 'on-hover')
+                                        return;
+                                    setIsVideoInteracted(true);
+                                    videoRef.play();
+                                }, src: (_r = item.params.coverUrl) !== null && _r !== void 0 ? _r : '', className: `video-cover-${item.id}`, onClick: () => {
+                                    if (!videoRef)
+                                        return;
+                                    setIsVideoInteracted(true);
+                                    videoRef.play();
+                                } })), (params.play === 'on-click' && !params.controls && ((0, jsx_runtime_1.jsx)("div", { className: `video-overlay-${item.id}`, onClick: () => {
+                                    if (!videoRef)
+                                        return;
+                                    setIsVideoInteracted(true);
+                                    if (isVideoPlaying) {
+                                        videoRef.pause();
+                                    }
+                                    else {
+                                        videoRef.play();
+                                    }
+                                } })))] })), (0, jsx_runtime_1.jsx)("div", { className: `video-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
+                            backgroundPosition: 'center',
+                            backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                            backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                        } : {
+                            background: stroke,
+                        })) : { background: stroke })) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          opacity: ${params.opacity};
+          transform: rotate(${item.area.angle}deg);
+          filter: ${params.blur !== 0 ? `blur(${params.blur * 100}vw)` : 'unset'};
+          ${params.blur !== 0 ? 'will-change: transform;' : ''}
+        }
+        .video-overlay-${item.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          cursor: pointer;
+          width: 100%;
+          height: 100%;
+        }
+        .video-border-${item.id} {
+          position: absolute;
+          inset: 0;
+          border-radius: inherit;
+          pointer-events: none;
+          z-index: 2;
+          -webkit-mask:
+            linear-gradient(#fff 0 0) content-box,
+            linear-gradient(#fff 0 0);
+          -webkit-mask-composite: xor;
+          mask-composite: exclude;
+        }
+        .video-cover-${item.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          cursor: pointer;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        .video {
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          opacity: 1;
+          object-fit: cover;
+          overflow: hidden;
+          border-style: solid;
+        }
+        .video-${item.id} {
+          border: solid;
+          border-color: transparent;
+          border-width: ${params.strokeWidth * 100}vw;
+          border-radius: ${params.radius * 100}vw;
+        }
+        .video-playback-wrapper {
+          display: flex;
+          justify-content: center;
+        }
+        .video-canvas {
+          border: solid;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          border-width: 0;
+          box-sizing: border-box;
+        }
+    ` })] }));
+};
+exports.VideoItem = VideoItem;

package/lib/sdk-nextjs/components/items/FileItem/useFileItem.d.ts

@@ -0,0 +1,8 @@
+import { FillLayer, ImageItem, VideoItem } from '../../../../sdk/types/article/Item';
+export declare function useFileItem(item: ImageItem | VideoItem, sectionId: string): {
+    radius: number;
+    strokeWidth: number;
+    opacity: number;
+    strokeFill: FillLayer[];
+    blur: number;
+};

package/lib/sdk-nextjs/components/items/FileItem/useFileItem.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFileItem = useFileItem;
+const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
+const DEFAULT_FILL = [
+    {
+        id: 'default',
+        type: 'solid',
+        value: 'rgba(0, 0, 0, 1)',
+        blendMode: 'normal'
+    }
+];
+function useFileItem(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 opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Opacity, (item) => 'opacity' in item.params ? item.params.opacity : 1, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId);
+    const strokeFill = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.BorderFill, (item) => 'strokeFill' in item.params ? item.params.strokeFill : DEFAULT_FILL, (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);
+    return { radius, strokeWidth, opacity, strokeFill, blur };
+}

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

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Item_1 = require("../Item");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const LinkWrapper_1 = require("../LinkWrapper");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const useItemAngle_1 = require("../useItemAngle");
+const useGroupItem_1 = require("./useGroupItem");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const CompoundChild_1 = require("../CompoundItem/CompoundChild");
+const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const id = (0, react_1.useId)();
+    const { items } = item;
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { opacity: itemOpacity, blur: itemBlur } = (0, useGroupItem_1.useGroupItem)(item, sectionId);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle', 'blur']);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
+    const isInteractive = opacity !== 0 && opacity !== undefined;
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .group-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          opacity: ${item.params.opacity};
+          filter: ${item.params.blur !== 0 ? `blur(${item.params.blur * 100}vw)` : 'unset'};
+          transform: rotate(${item.area.angle}deg);
+        }
+      ` })] }) }));
+};
+exports.GroupItem = GroupItem;

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

@@ -1,5 +1,5 @@
 import { GroupItem } from '../../../../sdk/types/article/Item';
 export declare function useGroupItem(item: GroupItem, sectionId: string): {
-    opacity: number | undefined;
-    blur: number | undefined;
+    opacity: number;
+    blur: number;
 };

package/lib/sdk-nextjs/components/items/GroupItem/useGroupItem.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGroupItem = useGroupItem;
+const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
+function useGroupItem(item, sectionId) {
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Opacity, (item) => 'opacity' in item.params ? item.params.opacity : 1, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, 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);
+    return { opacity, blur };
+}

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

@@ -0,0 +1,150 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useItemScale_1 = require("./useItemScale");
+const ScaleAnchorMap_1 = require("../../utils/ScaleAnchorMap");
+const useSectionHeightMap_1 = require("../Section/useSectionHeightMap");
+const getItemTopStyle_1 = require("../../utils/getItemTopStyle");
+const useStickyItemTop_1 = require("./useStickyItemTop");
+const getAnchoredItemTop_1 = require("../../utils/getAnchoredItemTop");
+const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
+const useExemplary_1 = require("../../common/useExemplary");
+const useItemInteractionCtrl_1 = require("../../interactions/useItemInteractionCtrl");
+const isItemType_1 = require("../../utils/isItemType");
+const RichTextWrapper_1 = require("./RichTextWrapper");
+const itemsMap_1 = require("./itemsMap");
+const useItemTriggers_1 = require("./useItemTriggers");
+const useSizing_1 = require("./useSizing");
+const useItemPointerEvents_1 = require("./useItemPointerEvents");
+const useItemArea_1 = require("./useItemArea");
+const useDraggable_1 = require("./useDraggable");
+const ArticleItemType_1 = require("../../../sdk/types/article/ArticleItemType");
+const ItemArea_1 = require("../../../sdk/types/article/ItemArea");
+const stickyFix = `
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+`;
+const noop = () => null;
+const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const itemWrapperRef = (0, react_1.useRef)(null);
+    const itemInnerRef = (0, react_1.useRef)(null);
+    const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const id = (0, react_1.useId)();
+    const exemplary = (0, useExemplary_1.useExemplary)();
+    const { handleVisibilityChange, allowPointerEvents } = (0, useItemPointerEvents_1.useItemPointerEvents)((_a = item.params.pointerEvents) !== null && _a !== void 0 ? _a : 'when_visible', isParentVisible);
+    const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
+    const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
+    const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
+    const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
+    const triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
+    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']);
+    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,
+        width: (_d = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _d === void 0 ? void 0 : _d.width,
+        height: (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.height
+    });
+    const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
+    const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionId, (_f = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _f === void 0 ? void 0 : _f.top);
+    const sizingAxis = (0, useSizing_1.useSizing)(item);
+    const ItemComponent = itemsMap_1.itemsMap[item.type] || noop;
+    const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
+    const isDraggable = 'isDraggable' in item.params ? item.params.isDraggable : false;
+    (0, useDraggable_1.useDraggable)({ draggableRef: itemInnerRef.current, isEnabled: isDraggable !== null && isDraggable !== void 0 ? isDraggable : false }, ({ startX, startY, currentX, currentY, lastX, lastY, drag }) => {
+        const item = itemInnerRef.current;
+        if (!item)
+            return;
+        if (drag) {
+            setIsDraggingActive(true);
+            setPosition({
+                x: (currentX - startX) + lastX,
+                y: (currentY - startY) + lastY
+            });
+        }
+        else {
+            setIsDraggingActive(false);
+        }
+    });
+    const handleItemResize = (height) => {
+        const sticky = item.sticky;
+        if (!sticky || stickyTop === undefined || !articleHeight) {
+            setWrapperHeight(undefined);
+            return;
+        }
+        const itemArticleOffset = sectionTop / window.innerWidth + stickyTop;
+        const maxStickyTo = articleHeight - itemArticleOffset - height;
+        const end = sticky.to !== undefined
+            ? Math.min(maxStickyTo, sticky.to)
+            : articleHeight - itemArticleOffset - height;
+        const wrapperHeight = end - sticky.from + height;
+        setItemHeight(height);
+        setWrapperHeight(wrapperHeight);
+    };
+    const isRichText = (0, isItemType_1.isItemType)(item, ArticleItemType_1.ArticleItemType.RichText);
+    const anchorSide = (_g = item.area.anchorSide) !== null && _g !== void 0 ? _g : ItemArea_1.AnchorSide.Top;
+    const positionType = (_h = item.area.positionType) !== null && _h !== void 0 ? _h : ItemArea_1.PositionType.ScreenBased;
+    const isScreenBasedBottom = positionType === ItemArea_1.PositionType.ScreenBased && anchorSide === ItemArea_1.AnchorSide.Bottom;
+    const scale = (_k = (_j = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _j === void 0 ? void 0 : _j.scale) !== null && _k !== void 0 ? _k : itemScale;
+    const hasClickTriggers = (_l = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _l !== void 0 ? _l : false;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, onTransitionEnd: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
+        }, style: Object.assign(Object.assign({ top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide), left: `${left * 100}vw`, bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_m = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _m !== void 0 ? _m : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
+                    top: `${stickyTop * 100}vw`,
+                    height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset',
+                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({ top: `${position.y}px`, left: `${position.x}px` }, ((width !== undefined && height !== undefined)
+                            ? {
+                                width: `${sizingAxis.x === 'manual'
+                                    ? isRichText
+                                        ? `${width * exemplary}px`
+                                        : `${width * 100}vw`
+                                    : 'max-content'}`,
+                                height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
+                            }
+                            : {})), (scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {})), { transition: (_o = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _o !== void 0 ? _o : 'none', cursor: isDraggingActive
+                                ? 'grabbing'
+                                : isDraggable
+                                    ? 'grab'
+                                    : hasClickTriggers
+                                        ? 'pointer'
+                                        : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none', userSelect: isDraggable ? 'none' : 'unset', WebkitUserSelect: isDraggable ? 'none' : 'unset', MozUserSelect: isDraggable ? 'none' : 'unset', msUserSelect: isDraggable ? 'none' : 'unset' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+            .item-${item.id} {
+              position: ${item.sticky ? 'sticky' : 'absolute'};
+              top: ${item.sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(item.area.top - item.sticky.from, sectionHeight, item.area.anchorSide)}` : 0};
+              transition: opacity 0.2s linear 0.1s;
+              pointer-events: none;
+              display: ${item.hidden ? 'none' : 'block'};
+              height: fit-content;
+            }
+            .item-${item.id}-inner {
+              width: ${sizingAxis.x === 'manual'
+                    ? `${item.area.width * 100}vw`
+                    : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${item.area.height * 100}vw` : 'unset'};
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[item.area.scaleAnchor]};
+              transform: scale(${item.area.scale});
+              position: relative;
+            }
+            .item-wrapper-${item.id} {
+              position: ${item.area.positionType === ItemArea_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
+              z-index: ${item.area.zIndex};
+              ${!isInGroup && stickyFix}
+              pointer-events: none;
+              bottom: ${isScreenBasedBottom ? `${-item.area.top * 100}vw` : 'unset'};
+              top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(item.area.top, item.area.anchorSide)};
+              left: ${item.area.left * 100}vw;
+            }
+      ` })] }));
+};
+exports.Item = Item;

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

@@ -1,4 +1,4 @@
-import { default as React, ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 interface Props {
     url?: string;
     children: ReactElement | ReactNode[];

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LinkWrapper = ({ url, children, target }) => {
+    const validUrl = url && buildValidUrl(url);
+    const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
+    return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+};
+exports.LinkWrapper = LinkWrapper;
+function buildValidUrl(url) {
+    const prefixes = [
+        'http://',
+        'https://',
+        '/',
+        'mailto:',
+        'tel:',
+        'file:',
+        'ftp:',
+        'javascript',
+        '#'
+    ];
+    const protocolCheck = prefixes.some(prefix => url.startsWith(prefix));
+    if (protocolCheck)
+        return url;
+    return `//${url}`;
+}

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

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RectangleItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const LinkWrapper_1 = require("../LinkWrapper");
+const useRectangleItem_1 = require("./useRectangleItem");
+const useItemAngle_1 = require("../useItemAngle");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const getFill_1 = require("../../../utils/getFill");
+const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisible");
+const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const id = (0, react_1.useId)();
+    const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur']);
+    const stateFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['fill']);
+    const stateFillLayers = (_a = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.styles) === null || _a === void 0 ? void 0 : _a.fill;
+    const solidTransition = (_b = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.transition) !== null && _b !== void 0 ? _b : 'none';
+    const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
+    const stateStrokeFillLayers = (_c = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _c === void 0 ? void 0 : _c.strokeFill;
+    const strokeSolidTransition = (_d = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _d !== void 0 ? _d : 'none';
+    const styles = (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _e !== void 0 ? _e : {};
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const backdropBlur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.backdropBlur, itemBackdropBlur);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.radius, itemRadius);
+    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.strokeWidth, itemStrokeWidth);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.angle, itemAngle);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.blur, itemBlur);
+    const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
+    const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : []) || (strokeWidth !== 0 && (0, areFillsVisible_1.areFillsVisible)((_g = stateStrokeFillLayers !== null && stateStrokeFillLayers !== void 0 ? stateStrokeFillLayers : itemStrokeFill) !== null && _g !== void 0 ? _g : []));
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    const strokeValue = stateStrokeFillLayers
+        ? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
+        : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
+    const stroke = strokeValue
+        ? (_h = (0, getFill_1.getFill)(strokeValue)) !== null && _h !== void 0 ? _h : 'transparent'
+        : 'transparent';
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_j = item.link) === null || _j === void 0 ? void 0 : _j.url, target: (_k = item.link) === null || _k === void 0 ? void 0 : _k.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeValue ? Object.assign({ '--stroke-background': stroke }, (strokeValue.type === 'image' ? {
+                        backgroundPosition: 'center',
+                        backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                        backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                    } : {})) : {})), { borderRadius: `${radius * 100}vw` }), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
+                        ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
+                        : {})), { transition: (_l = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _l !== void 0 ? _l : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
+                                backgroundPosition: 'center',
+                                backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                                backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                            } : {
+                                background: stroke,
+                            })) : { background: stroke })) }), itemFill && itemFill.map((fill) => {
+                            var _a, _b;
+                            const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
+                            const value = stateFillLayer
+                                ? ((_a = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateFillLayer, fill)) !== null && _a !== void 0 ? _a : fill)
+                                : fill;
+                            const background = value
+                                ? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
+                                : 'transparent';
+                            return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition }));
+                        })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .rectangle-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          border-radius: ${item.params.radius * 100}vw
+          transform: rotate(${item.area.angle}deg);
+          filter: ${item.params.blur !== 0 ? `blur(${item.params.blur * 100}vw)` : 'unset'};
+          ${item.params.blur !== 0 ? 'will-change: transform;' : ''}
+          backdrop-filter: ${item.params.backdropBlur !== 0 ? `blur(${item.params.backdropBlur * 100}vw)` : 'unset'};
+          -webkit-backdrop-filter: ${item.params.backdropBlur !== 0 ? `blur(${item.params.backdropBlur * 100}vw)` : 'unset'};
+        },
+        .image-fill-${item.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          transform-origin: center center;
+          z-index: 1;
+          background-position: center;
+        },
+        .rectangle-border-${item.id} {
+          position: absolute;
+          inset: 0;
+          border-radius: inherit;
+          pointer-events: none;
+          z-index: 2;
+          -webkit-mask:
+          linear-gradient(#fff 0 0) content-box,
+          linear-gradient(#fff 0 0);
+          -webkit-mask-composite: xor;
+          mask-composite: exclude;
+        }
+      ` })] }) }));
+};
+exports.RectangleItem = RectangleItem;
+function Fill({ fill, itemId, background, solidTransition }) {
+    const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
+    return ((0, jsx_runtime_1.jsx)("div", { className: fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (fill.type === 'solid' ? { background, transition: solidTransition } : {})), (fill.type === 'image'
+            ? {
+                transform: `rotate(${fill.rotation}deg)`,
+                backgroundImage: `url(${fill.src})`,
+                backgroundSize: fill.behavior === 'repeat' ? `${fill.backgroundSize}%` : fill.behavior,
+                backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
+                opacity: fill.opacity
+            }
+            : { background })), { position: 'absolute', borderRadius: 'inherit', mixBlendMode: fill.blendMode, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fill.id));
+}
+;