@gxpl/sdk 0.0.51 → 0.0.53

package/lib/sdk/schemas/project/Project.schema.d.ts

@@ -404,12 +404,15 @@ export declare const ProjectSchema: z.ZodObject<{
     scenesAssets: z.ZodArray<z.ZodObject<{
         url: z.ZodString;
         id: z.ZodString;
+        articleId: z.ZodString;
     }, "strip", z.ZodTypeAny, {
         url: string;
         id: string;
+        articleId: string;
     }, {
         url: string;
         id: string;
+        articleId: string;
     }>, "many">;
     relations: z.ZodArray<z.ZodObject<{
         from: z.ZodString;
@@ -1051,6 +1054,7 @@ export declare const ProjectSchema: z.ZodObject<{
     scenesAssets: {
         url: string;
         id: string;
+        articleId: string;
     }[];
     relations: {
         type: "slide" | "fade";
@@ -1202,6 +1206,7 @@ export declare const ProjectSchema: z.ZodObject<{
     scenesAssets: {
         url: string;
         id: string;
+        articleId: string;
     }[];
     relations: {
         type: "slide" | "fade";

package/lib/sdk/schemas/project/Project.schema.js

@@ -61,7 +61,8 @@ exports.ProjectSchema = zod_1.z.object({
     }),
     scenesAssets: zod_1.z.array(zod_1.z.object({
         url: zod_1.z.string(),
-        id: zod_1.z.string()
+        id: zod_1.z.string(),
+        articleId: zod_1.z.string()
     })),
     relations: zod_1.z.array(zod_1.z.object({
         from: zod_1.z.string().min(1),

package/lib/sdk/types/project/Project.d.ts

@@ -19,6 +19,7 @@ export interface Project {
     scenesAssets: {
         url: string;
         id: string;
+        articleId: string;
     }[];
     foreground: TFixedLayer;
     background: TFixedLayer;

package/lib/sdk-nextjs/assets/AssetsCacheProvider.d.ts

@@ -7,6 +7,7 @@ interface Props {
     assets: {
         url: string;
         id: string;
+        articleId: string;
     }[];
 }
 export declare const AssetsCacheProvider: FC<PropsWithChildren<Props>>;

package/lib/sdk-nextjs/assets/AssetsCacheProvider.js

@@ -9,15 +9,15 @@ const AssetsCacheProvider = ({ children, assets }) => {
     const [videoCache, setVideoCache] = (0, react_1.useState)(new Map());
     const [imageCache, setImageCache] = (0, react_1.useState)(new Map());
     (0, react_1.useEffect)(() => {
-        assets.forEach(({ url, id }) => {
+        assets.forEach(({ url, id, articleId }) => {
             if (isVideoAsset(url)) {
                 const video = getVideo(url);
-                setVideoCache(prev => prev.set((0, getCacheAssetKey_1.getCacheAssetKey)(url, id), video));
+                setVideoCache(prev => prev.set((0, getCacheAssetKey_1.getCacheAssetKey)(url, id, articleId), video));
             }
             if (isImageAsset(url)) {
                 const img = new Image();
                 img.src = url;
-                setImageCache(prev => prev.set((0, getCacheAssetKey_1.getCacheAssetKey)(url, id), img));
+                setImageCache(prev => prev.set((0, getCacheAssetKey_1.getCacheAssetKey)(url, id, articleId), img));
             }
         });
     }, [assets]);

package/lib/sdk-nextjs/assets/getCacheAssetKey.d.ts

@@ -1 +1 @@
-export declare function getCacheAssetKey(url: string, id: string): string;
+export declare function getCacheAssetKey(url: string, id: string, articleId: string): string;

package/lib/sdk-nextjs/assets/getCacheAssetKey.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCacheAssetKey = getCacheAssetKey;
-function getCacheAssetKey(url, id) {
-    return `${url}-${id}`;
+function getCacheAssetKey(url, id, articleId) {
+    return `${url}-${id}-${articleId}`;
 }

package/lib/sdk-nextjs/components/Section/Section.d.ts

@@ -5,6 +5,7 @@ interface Props {
     section: TSection;
     children: SectionChild[];
     data?: any;
+    articleId: string;
 }
 export declare const Section: FC<Props>;
 export declare function getSectionHeight(heightData: SectionHeight): string;

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

@@ -16,7 +16,7 @@ const SectionImage_1 = require("./SectionImage");
 const checkOverflowClipSupport_1 = require("../../utils/checkOverflowClipSupport");
 const Section_1 = require("../../../sdk/types/article/Section");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-const Section = ({ section, data, children }) => {
+const Section = ({ section, data, children, articleId }) => {
     const id = (0, react_1.useId)();
     const sectionRef = (0, react_1.useRef)(null);
     const { customSections } = (0, useCntrlContext_1.useCntrlContext)();
@@ -34,7 +34,7 @@ const Section = ({ section, data, children }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: [media && media.size !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `section-background-wrapper-${section.id}`, style: {
                                 transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset',
                                 height: media.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)
-                            }, children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                            }, children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media, articleId: articleId })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id, articleId: articleId }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .section-${section.id} {
           height: ${getSectionHeight(height)};
           position: relative;

package/lib/sdk-nextjs/components/Section/SectionImage.d.ts

@@ -9,6 +9,7 @@ export type TSectionImage = {
 interface Props {
     media: TSectionImage;
     sectionId: string;
+    articleId: string;
 }
 export declare const SectionImage: FC<Props>;
 export {};

package/lib/sdk-nextjs/components/Section/SectionImage.js

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const useCacheImage_1 = require("../../assets/useCacheImage");
 const getCacheAssetKey_1 = require("../../assets/getCacheAssetKey");
-const SectionImage = ({ media, sectionId }) => {
+const SectionImage = ({ media, sectionId, articleId }) => {
     const { url, size, position, offsetX } = media;
-    const key = (0, getCacheAssetKey_1.getCacheAssetKey)(url, sectionId);
+    const key = (0, getCacheAssetKey_1.getCacheAssetKey)(url, sectionId, articleId);
     const [container, setContainer] = (0, react_1.useState)(null);
     const isContainHeight = size === 'contain-height';
     const hasOffsetX = offsetX !== null;

package/lib/sdk-nextjs/components/Section/SectionVideo.d.ts

@@ -12,6 +12,7 @@ interface Props {
     container: HTMLDivElement;
     sectionId: string;
     media: TSectionVideo;
+    articleId: string;
 }
 export declare const SectionVideo: FC<Props>;
 export {};

package/lib/sdk-nextjs/components/Section/SectionVideo.js

@@ -6,14 +6,14 @@ const react_1 = require("react");
 const useCacheVideo_1 = require("../../assets/useCacheVideo");
 const useCacheImage_1 = require("../../assets/useCacheImage");
 const getCacheAssetKey_1 = require("../../assets/getCacheAssetKey");
-const SectionVideo = ({ container, sectionId, media }) => {
+const SectionVideo = ({ container, sectionId, media, articleId }) => {
     const [video, setVideo] = (0, react_1.useState)(null);
     const [videoWrapper, setVideoWrapper] = (0, react_1.useState)(null);
     const [coverImageWrapper, setCoverImageWrapper] = (0, react_1.useState)(null);
     const [isVideoWidthOverflow, setIsVideoWidthOverflow] = (0, react_1.useState)(false);
     const { url, size, position, offsetX, coverUrl, play } = media;
-    const key = (0, getCacheAssetKey_1.getCacheAssetKey)(url, sectionId);
-    const coverKey = coverUrl ? (0, getCacheAssetKey_1.getCacheAssetKey)(coverUrl, sectionId) : null;
+    const key = (0, getCacheAssetKey_1.getCacheAssetKey)(url, sectionId, articleId);
+    const coverKey = coverUrl ? (0, getCacheAssetKey_1.getCacheAssetKey)(coverUrl, sectionId, articleId) : null;
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
     const [userPaused, setUserPaused] = (0, react_1.useState)(false);
     const [isClickedOnCover, setIsClickedOnCover] = (0, react_1.useState)(false);

package/lib/sdk-nextjs/components/Section/Sections.js

@@ -25,7 +25,7 @@ const Sections = ({ article, container }) => {
     }, [articleRectObserver, container]);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: article.sections.map((section, i) => {
             const data = {};
-            return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
+            return ((0, jsx_runtime_1.jsx)(Section_1.Section, { articleId: article.id, section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, articleId: article.id, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
         }) }));
 };
 exports.Sections = Sections;

package/lib/sdk-nextjs/components/items/CompoundItem/CompoundChild.d.ts

@@ -5,6 +5,7 @@ interface ChildItemProps {
     sectionId: string;
     isParentVisible?: boolean;
     isInFixedLayer?: boolean;
+    articleId?: string;
 }
 export declare const CompoundChild: FC<ChildItemProps>;
 export {};

package/lib/sdk-nextjs/components/items/CompoundItem/CompoundChild.js

@@ -21,7 +21,7 @@ const useItemPointerEvents_1 = require("../useItemPointerEvents");
 const useItemArea_1 = require("../useItemArea");
 const ArticleItemType_1 = require("../../../../sdk/types/article/ArticleItemType");
 const noop = () => null;
-const CompoundChild = ({ item, sectionId, isParentVisible = true, isInFixedLayer = false }) => {
+const CompoundChild = ({ item, sectionId, isParentVisible = true, isInFixedLayer = false, articleId }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const id = (0, react_1.useId)();
     const exemplary = (0, useExemplary_1.useExemplary)();
@@ -71,7 +71,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true, isInFixedLayer
         } }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
                     transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none',
                     transform: `scale(${scale})`,
-                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { isInFixedLayer: isInFixedLayer, item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { articleId: articleId, isInFixedLayer: isInFixedLayer, item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .item-${item.id}-inner {
           width: 100%;
           height: 100%;

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

@@ -13,7 +13,7 @@ const LinkWrapper_1 = require("../LinkWrapper");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const CompoundChild_1 = require("./CompoundChild");
 const useCompoundItem_1 = require("./useCompoundItem");
-const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, articleId }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
     const { items } = item;
@@ -32,7 +32,7 @@ const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
                         opacity,
                         transform: `rotate(${angle}deg)`,
                         transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none'
-                    }, children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                    }, children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, articleId: articleId, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .compound-${item.id} {
           overflow: ${item.params.overflow};
           position: absolute;

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

@@ -20,7 +20,7 @@ const useExemplary_1 = require("../../../common/useExemplary");
 const AssetsCacheProvider_1 = require("../../../assets/AssetsCacheProvider");
 const useCacheImage_1 = require("../../../assets/useCacheImage");
 const getCacheAssetKey_1 = require("../../../assets/getCacheAssetKey");
-const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, articleId }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const id = (0, react_1.useId)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, opacity: itemOpacity, strokeFill: itemStrokeFill, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
@@ -29,7 +29,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(wrapperRef, onResize);
     const { url, hasGLEffect } = item.params;
-    const cacheKey = (0, getCacheAssetKey_1.getCacheAssetKey)(url, item.id);
+    const cacheKey = (0, getCacheAssetKey_1.getCacheAssetKey)(url, item.id, articleId !== null && articleId !== void 0 ? articleId : '');
     const fxCanvas = (0, react_1.useRef)(null);
     const isInitialRef = (0, react_1.useRef)(true);
     const { controlsValues, fragmentShader } = (0, useItemFXData_1.useItemFXData)(item, sectionId);

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

@@ -22,14 +22,14 @@ const AssetsCacheProvider_1 = require("../../../assets/AssetsCacheProvider");
 const useCacheVideo_1 = require("../../../assets/useCacheVideo");
 const useCacheImage_1 = require("../../../assets/useCacheImage");
 const getCacheAssetKey_1 = require("../../../assets/getCacheAssetKey");
-const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, articleId }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const id = (0, react_1.useId)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const { videoCache, imageCache } = (0, react_1.useContext)(AssetsCacheProvider_1.AssetsCacheContext);
     const [isVideoPlaying, setIsVideoPlaying] = (0, react_1.useState)(false);
-    const videoCacheKey = (0, getCacheAssetKey_1.getCacheAssetKey)(item.params.url, item.id);
-    const coverCacheKey = item.params.coverUrl ? (0, getCacheAssetKey_1.getCacheAssetKey)(item.params.coverUrl, item.id) : null;
+    const videoCacheKey = (0, getCacheAssetKey_1.getCacheAssetKey)(item.params.url, item.id, articleId !== null && articleId !== void 0 ? articleId : '');
+    const coverCacheKey = item.params.coverUrl ? (0, getCacheAssetKey_1.getCacheAssetKey)(item.params.coverUrl, item.id, articleId !== null && articleId !== void 0 ? articleId : '') : null;
     const isScrollPausedRef = (0, react_1.useRef)(false);
     const [userPaused, setUserPaused] = (0, react_1.useState)(false);
     const [isVideoInteracted, setIsVideoInteracted] = (0, react_1.useState)(false);

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

@@ -14,7 +14,7 @@ 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, isInFixedLayer }) => {
+const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound, isInFixedLayer, articleId }) => {
     var _a, _b, _c, _d;
     const id = (0, react_1.useId)();
     const { items } = item;
@@ -30,7 +30,7 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `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: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { isInFixedLayer: isInFixedLayer, item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, isInFixedLayer: isInFixedLayer, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `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: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { isInFixedLayer: isInFixedLayer, item: item, articleId: articleId, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { articleId: articleId, item: item, isInFixedLayer: isInFixedLayer, 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%;

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

@@ -5,6 +5,7 @@ export interface ItemProps<I extends ItemAny> {
     item: I;
     sectionId: string;
     articleHeight?: number;
+    articleId?: string;
     onResize?: (height: number) => void;
     interactionCtrl?: ReturnType<typeof useItemInteractionCtrl>;
     onVisibilityChange: (isVisible: boolean) => void;
@@ -14,6 +15,7 @@ export interface ItemProps<I extends ItemAny> {
 export interface ItemWrapperProps {
     item: ItemAny;
     sectionId: string;
+    articleId?: string;
     articleHeight?: number;
     isInGroup?: boolean;
     isInFixedLayer?: boolean;

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

@@ -32,8 +32,8 @@ const stickyFix = `
   transform: translate3d(0, 0, 0);
 `;
 const noop = () => null;
-const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false, isInFixedLayer = false }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false, isInFixedLayer = false, articleId }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const itemWrapperRef = (0, react_1.useRef)(null);
     const itemInnerRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
@@ -94,10 +94,8 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     };
     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;
+    const scale = (_j = (_h = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _h === void 0 ? void 0 : _h.scale) !== null && _j !== void 0 ? _j : itemScale;
+    const hasClickTriggers = (_k = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _k !== void 0 ? _k : false;
     const scroll = rectObserver === null || rectObserver === void 0 ? void 0 : rectObserver.scroll;
     const realTop = item.area.positionType === ItemArea_1.PositionType.ScreenBased && isSceneTransitioning && scroll !== undefined
         ? top + scroll
@@ -106,7 +104,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
             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)(realTop, anchorSide), left: `${left * 100}vw`, bottom: isScreenBasedBottom ? `${-realTop * 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: {
+        }, style: Object.assign(Object.assign({ top: (0, getItemTopStyle_1.getItemTopStyle)(realTop, anchorSide), left: `${left * 100}vw` }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_l = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _l !== void 0 ? _l : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
                     top: item.sticky ? (0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight, anchorSide) : 0,
                     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)
@@ -118,13 +116,13 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                                     : '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
+                            : {})), (scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {})), { transition: (_m = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _m !== void 0 ? _m : '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, isInFixedLayer: isInFixedLayer, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                                        : '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, { articleId: articleId, item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, isInFixedLayer: isInFixedLayer, 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};
@@ -147,8 +145,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
               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)};
+              top: ${(0, getItemTopStyle_1.getItemTopStyle)(item.area.top, item.area.anchorSide)};
               left: ${item.area.left * 100}vw;
             }
       ` })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",