@gxpl/sdk 0.0.17 → 0.0.19

package/lib/sdk/schemas/article/ItemBase.schema.d.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import { AreaAnchor, DimensionMode } from '../../types/article/ItemArea';
-export declare const Link: z.ZodObject<{
+export declare const Link: z.ZodUnion<[z.ZodObject<{
     url: z.ZodString;
     target: z.ZodString;
 }, "strip", z.ZodTypeAny, {
@@ -9,7 +9,22 @@ export declare const Link: z.ZodObject<{
 }, {
     url: string;
     target: string;
-}>;
+}>, z.ZodObject<{
+    value: z.ZodString;
+    animation: z.ZodEnum<["fade", "slide", "reveal"]>;
+    duration: z.ZodNumber;
+    direction: z.ZodEnum<["north", "west", "south", "east"]>;
+}, "strip", z.ZodTypeAny, {
+    value: string;
+    duration: number;
+    animation: "slide" | "fade" | "reveal";
+    direction: "north" | "east" | "south" | "west";
+}, {
+    value: string;
+    duration: number;
+    animation: "slide" | "fade" | "reveal";
+    direction: "north" | "east" | "south" | "west";
+}>]>;
 export declare const CompoundSettingsSchema: z.ZodObject<{
     positionAnchor: z.ZodNativeEnum<typeof AreaAnchor>;
     widthMode: z.ZodNativeEnum<typeof DimensionMode>;
@@ -60,7 +75,7 @@ export declare const ItemBaseSchema: z.ZodObject<{
         anchorSide?: import("../../types/article/ItemArea").AnchorSide | undefined;
     }>;
     hidden: z.ZodBoolean;
-    link: z.ZodOptional<z.ZodObject<{
+    link: z.ZodOptional<z.ZodUnion<[z.ZodObject<{
         url: z.ZodString;
         target: z.ZodString;
     }, "strip", z.ZodTypeAny, {
@@ -69,7 +84,22 @@ export declare const ItemBaseSchema: z.ZodObject<{
     }, {
         url: string;
         target: string;
-    }>>;
+    }>, z.ZodObject<{
+        value: z.ZodString;
+        animation: z.ZodEnum<["fade", "slide", "reveal"]>;
+        duration: z.ZodNumber;
+        direction: z.ZodEnum<["north", "west", "south", "east"]>;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        duration: number;
+        animation: "slide" | "fade" | "reveal";
+        direction: "north" | "east" | "south" | "west";
+    }, {
+        value: string;
+        duration: number;
+        animation: "slide" | "fade" | "reveal";
+        direction: "north" | "east" | "south" | "west";
+    }>]>>;
     compoundSettings: z.ZodOptional<z.ZodObject<{
         positionAnchor: z.ZodNativeEnum<typeof AreaAnchor>;
         widthMode: z.ZodNativeEnum<typeof DimensionMode>;
@@ -101,6 +131,11 @@ export declare const ItemBaseSchema: z.ZodObject<{
     link?: {
         url: string;
         target: string;
+    } | {
+        value: string;
+        duration: number;
+        animation: "slide" | "fade" | "reveal";
+        direction: "north" | "east" | "south" | "west";
     } | undefined;
     compoundSettings?: {
         positionAnchor: AreaAnchor;
@@ -125,6 +160,11 @@ export declare const ItemBaseSchema: z.ZodObject<{
     link?: {
         url: string;
         target: string;
+    } | {
+        value: string;
+        duration: number;
+        animation: "slide" | "fade" | "reveal";
+        direction: "north" | "east" | "south" | "west";
     } | undefined;
     compoundSettings?: {
         positionAnchor: AreaAnchor;

package/lib/sdk/schemas/article/ItemBase.schema.js

@@ -4,10 +4,17 @@ exports.ItemBaseSchema = exports.CompoundSettingsSchema = exports.Link = void 0;
 const zod_1 = require("zod");
 const ItemArea_schema_1 = require("./ItemArea.schema");
 const ItemArea_1 = require("../../types/article/ItemArea");
-exports.Link = zod_1.z.object({
+const UrlLinkSchema = zod_1.z.object({
     url: zod_1.z.string().min(1),
     target: zod_1.z.string().min(1)
 });
+const ClickLinkSchema = zod_1.z.object({
+    value: zod_1.z.string().min(1),
+    animation: zod_1.z.enum(['fade', 'slide', 'reveal']),
+    duration: zod_1.z.number(),
+    direction: zod_1.z.enum(['north', 'west', 'south', 'east'])
+});
+exports.Link = zod_1.z.union([UrlLinkSchema, ClickLinkSchema]);
 exports.CompoundSettingsSchema = zod_1.z.object({
     positionAnchor: zod_1.z.nativeEnum(ItemArea_1.AreaAnchor),
     widthMode: zod_1.z.nativeEnum(ItemArea_1.DimensionMode),

package/lib/sdk/schemas/article/RichTextItem.schema.d.ts

@@ -71,7 +71,7 @@ export declare const RichTextItemSchema: z.ZodObject<{
         anchorSide?: import("../../..").AnchorSide | undefined;
     }>;
     hidden: z.ZodBoolean;
-    link: z.ZodOptional<z.ZodObject<{
+    link: z.ZodOptional<z.ZodUnion<[z.ZodObject<{
         url: z.ZodString;
         target: z.ZodString;
     }, "strip", z.ZodTypeAny, {
@@ -80,7 +80,22 @@ export declare const RichTextItemSchema: z.ZodObject<{
     }, {
         url: string;
         target: string;
-    }>>;
+    }>, z.ZodObject<{
+        value: z.ZodString;
+        animation: z.ZodEnum<["fade", "slide", "reveal"]>;
+        duration: z.ZodNumber;
+        direction: z.ZodEnum<["north", "west", "south", "east"]>;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        duration: number;
+        animation: "slide" | "fade" | "reveal";
+        direction: "north" | "east" | "south" | "west";
+    }, {
+        value: string;
+        duration: number;
+        animation: "slide" | "fade" | "reveal";
+        direction: "north" | "east" | "south" | "west";
+    }>]>>;
     compoundSettings: z.ZodOptional<z.ZodObject<{
         positionAnchor: z.ZodNativeEnum<typeof import("../../..").AreaAnchor>;
         widthMode: z.ZodNativeEnum<typeof import("../../..").DimensionMode>;
@@ -1168,6 +1183,11 @@ export declare const RichTextItemSchema: z.ZodObject<{
     link?: {
         url: string;
         target: string;
+    } | {
+        value: string;
+        duration: number;
+        animation: "slide" | "fade" | "reveal";
+        direction: "north" | "east" | "south" | "west";
     } | undefined;
     compoundSettings?: {
         positionAnchor: import("../../..").AreaAnchor;
@@ -1355,6 +1375,11 @@ export declare const RichTextItemSchema: z.ZodObject<{
     link?: {
         url: string;
         target: string;
+    } | {
+        value: string;
+        duration: number;
+        animation: "slide" | "fade" | "reveal";
+        direction: "north" | "east" | "south" | "west";
     } | undefined;
     compoundSettings?: {
         positionAnchor: import("../../..").AreaAnchor;

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

@@ -111,14 +111,14 @@ export declare const ProjectSchema: z.ZodObject<{
         direction: z.ZodEnum<["north", "east", "south", "west"]>;
     }, "strip", z.ZodTypeAny, {
         type: "slide" | "fade";
+        direction: "north" | "east" | "south" | "west";
         from: string;
         to: string;
-        direction: "north" | "east" | "south" | "west";
     }, {
         type: "slide" | "fade";
+        direction: "north" | "east" | "south" | "west";
         from: string;
         to: string;
-        direction: "north" | "east" | "south" | "west";
     }>, "many">;
 }, "strip", z.ZodTypeAny, {
     html: {
@@ -154,9 +154,9 @@ export declare const ProjectSchema: z.ZodObject<{
     };
     relations: {
         type: "slide" | "fade";
+        direction: "north" | "east" | "south" | "west";
         from: string;
         to: string;
-        direction: "north" | "east" | "south" | "west";
     }[];
 }, {
     html: {
@@ -192,8 +192,8 @@ export declare const ProjectSchema: z.ZodObject<{
     };
     relations: {
         type: "slide" | "fade";
+        direction: "north" | "east" | "south" | "west";
         from: string;
         to: string;
-        direction: "north" | "east" | "south" | "west";
     }[];
 }>;

package/lib/sdk/types/article/Item.d.ts

@@ -198,10 +198,6 @@ interface UrlLink {
     url: string;
     target: string;
 }
-interface UrlLink {
-    url: string;
-    target: string;
-}
 interface ClickLink {
     value: string;
     animation: 'fade' | 'slide' | 'reveal';

package/lib/sdk-nextjs/common/useKeyframeValue.js

@@ -49,8 +49,10 @@ function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionI
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !animator)
             return;
-        const scroll = articleRectObserver.getSectionScroll(sectionId);
-        handleKeyframeValue(scroll);
+        return articleRectObserver.on('init', () => {
+            const scroll = articleRectObserver.getSectionScroll(sectionId);
+            handleKeyframeValue(scroll);
+        });
     }, [articleRectObserver, handleKeyframeValue, animator]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !animator)
@@ -59,7 +61,7 @@ function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionI
             const scroll = articleRectObserver.getSectionScroll(sectionId);
             handleKeyframeValue(scroll);
         });
-    }, [handleKeyframeValue, articleRectObserver, animator]);
+    }, [articleRectObserver, handleKeyframeValue, animator]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !animator)
             return;
@@ -67,6 +69,6 @@ function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionI
             const scroll = articleRectObserver.getSectionScroll(sectionId);
             handleKeyframeValue(scroll);
         });
-    }, [handleKeyframeValue, articleRectObserver, animator]);
+    }, [articleRectObserver, handleKeyframeValue, animator]);
     return keyframes.length ? adjustedValue : paramValue;
 }

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

@@ -11,7 +11,7 @@ const Section_1 = require("./Section/Section");
 const Item_1 = require("./items/Item");
 const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
-const ArticleWrapper_1 = require("./ArticleWrapper");
+const Scene_1 = require("./Scene");
 const InteractionsContext_1 = require("../provider/InteractionsContext");
 const WebGLContextManagerContext_1 = require("../provider/WebGLContextManagerContext");
 const effects_1 = require("@cntrl-site/effects");
@@ -31,7 +31,7 @@ const Article = ({ article, styles, keyframes }) => {
         });
     }, [articleRectObserver]);
     const webglContextManager = (0, react_1.useMemo)(() => new effects_1.WebGLContextManager(), []);
-    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { id: article.id, styles: styles, children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
+    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Scene_1.Scene, { id: article.id, styles: styles, children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, 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));
                                 }) }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `

package/lib/sdk-nextjs/components/{ArticleWrapper.d.ts → Scene.d.ts}

@@ -9,5 +9,5 @@ interface Props {
         startY: number;
     } | undefined;
 }
-export declare const ArticleWrapper: FC<PropsWithChildren<Props>>;
+export declare const Scene: FC<PropsWithChildren<Props>>;
 export {};

package/lib/sdk-nextjs/components/{ArticleWrapper.js → Scene.js}

@@ -1,20 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArticleWrapper = void 0;
+exports.Scene = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const useLayoutDeviation_1 = require("../common/useLayoutDeviation");
 const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
-const ArticleWrapper = ({ children, id, styles: sceneStyles }) => {
+const Scene = ({ children, id, styles: sceneStyles }) => {
     var _a;
     const { layoutDeviation } = (0, useLayoutDeviation_1.useLayoutDeviation)();
     const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
     const sceneRef = (0, react_1.useRef)(null);
     const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
-    const { isControlledTransitioning, isSettling, isInstantTransitioning } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
+    const { isControlledTransitioning, isSettling, isInstantTransitioning, stateValue } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
         isControlledTransitioning: state.matches('transitioning'),
         isSettling: state.matches('settling'),
         isInstantTransitioning: state.matches('instant_transitioning'),
+        stateValue: state.value
     }));
     const type = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => {
         const { transition } = state.context;
@@ -136,9 +137,9 @@ const ArticleWrapper = ({ children, id, styles: sceneStyles }) => {
     }, [isTransitioning, actorRef, id]);
     const isFixed = isControlledTransitioning || isSettling || isInstantTransitioning;
     const transitionStyle = type === 'slide' ? 'transform' : 'opacity';
-    return ((0, jsx_runtime_1.jsx)("div", { ref: sceneRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: `translate3d(${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.x}px, ${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.y}px, 0)`, transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'auto', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1 }), children: children }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: sceneRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: `translate3d(${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.x}px, ${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.y}px, 0)`, transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1 }), children: children }) }));
 };
-exports.ArticleWrapper = ArticleWrapper;
+exports.Scene = Scene;
 function isTransitionDisabled(transitionReady) {
     return !transitionReady.north && !transitionReady.east && !transitionReady.south && !transitionReady.west;
 }
@@ -153,7 +154,7 @@ function canTransition(direction, el) {
         case 'north':
             return el.scrollTop === 0;
         case 'south': {
-            const isAllowed = el.scrollTop + el.clientHeight >= el.scrollHeight;
+            const isAllowed = el.scrollTop + el.clientHeight + 1 >= el.scrollHeight;
             return isAllowed;
         }
         case 'west':

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

@@ -35,24 +35,24 @@ const Section = ({ section, data, children }) => {
                                 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: `
-         .section-${section.id} {
-            height: ${getSectionHeight(height)};
-            position: relative;
-            display: ${hidden ? 'none' : 'block'};
-            background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
-         }
-         .section-background-overlay-${section.id} {
-            height: ${getSectionHeight(height)};
-            width: 100%;
-            position: relative;
-            overflow: clip;
-         }
-         .section-background-wrapper-${section.id} {
-            transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
-            position: relative;
-            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
-            width: 100%;
-         }
+        .section-${section.id} {
+          height: ${getSectionHeight(height)};
+          position: relative;
+          display: ${hidden ? 'none' : 'block'};
+          background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
+        }
+        .section-background-overlay-${section.id} {
+          height: ${getSectionHeight(height)};
+          width: 100%;
+          position: relative;
+          overflow: clip;
+        }
+        .section-background-wrapper-${section.id} {
+          transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
+          position: relative;
+          height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
+          width: 100%;
+        }
       ` })] }));
 };
 exports.Section = Section;

package/lib/sdk-nextjs/utils/ArticleRectManager/ArticleRectObserver.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../EventEmitter';
 interface EventMap {
+    'init': undefined;
     'scroll': undefined;
     'resize': DOMRect;
 }
@@ -11,6 +12,8 @@ export declare class ArticleRectObserver extends EventEmitter<EventMap> {
     private animationFrame;
     private parent;
     private sectionsScrollMap;
+    private previousParentWidth;
+    private isInitialized;
     constructor();
     get scroll(): number;
     getSectionScroll(sectionId: string): number;

package/lib/sdk-nextjs/utils/ArticleRectManager/ArticleRectObserver.js

@@ -9,12 +9,14 @@ const resize_observer_polyfill_1 = __importDefault(require("resize-observer-poly
 class ArticleRectObserver extends EventEmitter_1.EventEmitter {
     constructor() {
         super();
-        this.articleWidth = 0;
+        this.articleWidth = 1;
         this.registry = new Map();
         this.scrollPos = window.scrollY;
         this.animationFrame = NaN;
         this.parent = undefined;
         this.sectionsScrollMap = new Map();
+        this.previousParentWidth = null;
+        this.isInitialized = false;
         this.handleScroll = (scroll) => {
             this.setScroll(scroll / this.articleWidth);
         };
@@ -41,8 +43,17 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
     }
     init(parent) {
         this.parent = parent;
+        const scrollableParent = parent.parentElement;
+        const parentBoundary = parent.getBoundingClientRect();
+        if (!scrollableParent) {
+            throw new Error('Scrollable parent not found');
+        }
+        const articleWidth = parentBoundary.width;
+        this.articleWidth = articleWidth;
+        this.previousParentWidth = articleWidth;
+        this.setScroll(scrollableParent.scrollTop / articleWidth);
         const onScroll = () => {
-            this.handleScroll(window.scrollY);
+            this.handleScroll(scrollableParent.scrollTop);
             if (!isNaN(this.animationFrame))
                 return;
             this.animationFrame = window.requestAnimationFrame(() => {
@@ -50,10 +61,21 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
                 this.emit('scroll', undefined);
             });
         };
-        window.addEventListener('scroll', onScroll);
+        scrollableParent.addEventListener('scroll', onScroll);
+        for (const sectionId of this.registry.keys()) {
+            const el = this.registry.get(sectionId);
+            if (!el)
+                continue;
+            const rect = el.getBoundingClientRect();
+            this.sectionsScrollMap.set(sectionId, rect.top - parentBoundary.top);
+        }
+        this.isInitialized = true;
+        this.emit('init', undefined);
         return () => {
             this.parent = undefined;
-            window.removeEventListener('scroll', onScroll);
+            this.isInitialized = false;
+            this.previousParentWidth = null;
+            scrollableParent.removeEventListener('scroll', onScroll);
             if (!isNaN(this.animationFrame)) {
                 window.cancelAnimationFrame(this.animationFrame);
                 this.animationFrame = NaN;
@@ -72,7 +94,14 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
         if (!this.parent)
             return;
         const parentBoundary = this.parent.getBoundingClientRect();
-        this.articleWidth = parentBoundary.width;
+        const newWidth = parentBoundary.width;
+        if (!this.isInitialized || this.previousParentWidth === newWidth) {
+            this.articleWidth = newWidth;
+            this.previousParentWidth = newWidth;
+            return;
+        }
+        this.articleWidth = newWidth;
+        this.previousParentWidth = newWidth;
         this.setScroll(window.scrollY / this.articleWidth);
         this.emit('resize', parentBoundary);
         for (const sectionId of this.registry.keys()) {

package/package.json

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