@gxpl/sdk 0.0.6 → 0.0.8

package/{dist → lib}/sdk/schemas/article/RichTextItem.schema.d.ts

@@ -43,10 +43,10 @@ export declare const RichTextItemSchema: z.ZodObject<{
         height: z.ZodNumber;
         zIndex: z.ZodNumber;
         angle: z.ZodNumber;
-        anchorSide: z.ZodOptional<z.ZodNativeEnum<typeof import('../../..').AnchorSide>>;
+        anchorSide: z.ZodOptional<z.ZodNativeEnum<typeof import("../../..").AnchorSide>>;
         scale: z.ZodNumber;
-        positionType: z.ZodNativeEnum<typeof import('../../..').PositionType>;
-        scaleAnchor: z.ZodNativeEnum<typeof import('../../..').AreaAnchor>;
+        positionType: z.ZodNativeEnum<typeof import("../../..").PositionType>;
+        scaleAnchor: z.ZodNativeEnum<typeof import("../../..").AreaAnchor>;
     }, "strip", z.ZodTypeAny, {
         left: number;
         top: number;
@@ -55,9 +55,9 @@ export declare const RichTextItemSchema: z.ZodObject<{
         width: number;
         height: number;
         zIndex: number;
-        positionType: import('../../..').PositionType;
-        scaleAnchor: import('../../..').AreaAnchor;
-        anchorSide?: import('../../..').AnchorSide | undefined;
+        positionType: import("../../..").PositionType;
+        scaleAnchor: import("../../..").AreaAnchor;
+        anchorSide?: import("../../..").AnchorSide | undefined;
     }, {
         left: number;
         top: number;
@@ -66,9 +66,9 @@ export declare const RichTextItemSchema: z.ZodObject<{
         width: number;
         height: number;
         zIndex: number;
-        positionType: import('../../..').PositionType;
-        scaleAnchor: import('../../..').AreaAnchor;
-        anchorSide?: import('../../..').AnchorSide | undefined;
+        positionType: import("../../..").PositionType;
+        scaleAnchor: import("../../..").AreaAnchor;
+        anchorSide?: import("../../..").AnchorSide | undefined;
     }>>;
     hidden: z.ZodRecord<z.ZodString, z.ZodBoolean>;
     link: z.ZodOptional<z.ZodObject<{
@@ -82,17 +82,17 @@ export declare const RichTextItemSchema: z.ZodObject<{
         target: string;
     }>>;
     compoundSettings: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
-        positionAnchor: z.ZodNativeEnum<typeof import('../../..').AreaAnchor>;
-        widthMode: z.ZodNativeEnum<typeof import('../../..').DimensionMode>;
-        heightMode: z.ZodNativeEnum<typeof import('../../..').DimensionMode>;
+        positionAnchor: z.ZodNativeEnum<typeof import("../../..").AreaAnchor>;
+        widthMode: z.ZodNativeEnum<typeof import("../../..").DimensionMode>;
+        heightMode: z.ZodNativeEnum<typeof import("../../..").DimensionMode>;
     }, "strip", z.ZodTypeAny, {
-        positionAnchor: import('../../..').AreaAnchor;
-        widthMode: import('../../..').DimensionMode;
-        heightMode: import('../../..').DimensionMode;
+        positionAnchor: import("../../..").AreaAnchor;
+        widthMode: import("../../..").DimensionMode;
+        heightMode: import("../../..").DimensionMode;
     }, {
-        positionAnchor: import('../../..').AreaAnchor;
-        widthMode: import('../../..').DimensionMode;
-        heightMode: import('../../..').DimensionMode;
+        positionAnchor: import("../../..").AreaAnchor;
+        widthMode: import("../../..").DimensionMode;
+        heightMode: import("../../..").DimensionMode;
     }>>>;
 } & {
     type: z.ZodLiteral<ArticleItemType.RichText>;
@@ -1003,9 +1003,9 @@ export declare const RichTextItemSchema: z.ZodObject<{
         width: number;
         height: number;
         zIndex: number;
-        positionType: import('../../..').PositionType;
-        scaleAnchor: import('../../..').AreaAnchor;
-        anchorSide?: import('../../..').AnchorSide | undefined;
+        positionType: import("../../..").PositionType;
+        scaleAnchor: import("../../..").AreaAnchor;
+        anchorSide?: import("../../..").AnchorSide | undefined;
     }>;
     layoutParams: Record<string, {
         color: string;
@@ -1176,9 +1176,9 @@ export declare const RichTextItemSchema: z.ZodObject<{
         target: string;
     } | undefined;
     compoundSettings?: Record<string, {
-        positionAnchor: import('../../..').AreaAnchor;
-        widthMode: import('../../..').DimensionMode;
-        heightMode: import('../../..').DimensionMode;
+        positionAnchor: import("../../..").AreaAnchor;
+        widthMode: import("../../..").DimensionMode;
+        heightMode: import("../../..").DimensionMode;
     }> | undefined;
 }, {
     hidden: Record<string, boolean>;
@@ -1192,9 +1192,9 @@ export declare const RichTextItemSchema: z.ZodObject<{
         width: number;
         height: number;
         zIndex: number;
-        positionType: import('../../..').PositionType;
-        scaleAnchor: import('../../..').AreaAnchor;
-        anchorSide?: import('../../..').AnchorSide | undefined;
+        positionType: import("../../..").PositionType;
+        scaleAnchor: import("../../..").AreaAnchor;
+        anchorSide?: import("../../..").AnchorSide | undefined;
     }>;
     layoutParams: Record<string, {
         color: string;
@@ -1365,8 +1365,8 @@ export declare const RichTextItemSchema: z.ZodObject<{
         target: string;
     } | undefined;
     compoundSettings?: Record<string, {
-        positionAnchor: import('../../..').AreaAnchor;
-        widthMode: import('../../..').DimensionMode;
-        heightMode: import('../../..').DimensionMode;
+        positionAnchor: import("../../..").AreaAnchor;
+        widthMode: import("../../..").DimensionMode;
+        heightMode: import("../../..").DimensionMode;
     }> | undefined;
 }>;

package/{dist → lib}/sdk/schemas/article/Section.schema.d.ts

@@ -58,7 +58,7 @@ export declare const SectionMediaSchema: z.ZodDiscriminatedUnion<"type", [z.ZodO
 }>]>;
 export declare const SectionSchema: z.ZodObject<{
     id: z.ZodString;
-    items: z.ZodArray<z.ZodType<import('../../..').ItemAny, z.ZodTypeDef, import('../../..').ItemAny>, "many">;
+    items: z.ZodArray<z.ZodType<import("../../..").ItemAny, z.ZodTypeDef, import("../../..").ItemAny>, "many">;
     name: z.ZodOptional<z.ZodString>;
     height: z.ZodRecord<z.ZodString, z.ZodObject<{
         mode: z.ZodNativeEnum<typeof SectionHeightMode>;
@@ -129,7 +129,7 @@ export declare const SectionSchema: z.ZodObject<{
         units: number;
         vhUnits?: number | undefined;
     }>;
-    items: import('../../..').ItemAny[];
+    items: import("../../..").ItemAny[];
     name?: string | undefined;
     media?: Record<string, {
         url: string;
@@ -156,7 +156,7 @@ export declare const SectionSchema: z.ZodObject<{
         units: number;
         vhUnits?: number | undefined;
     }>;
-    items: import('../../..').ItemAny[];
+    items: import("../../..").ItemAny[];
     name?: string | undefined;
     media?: Record<string, {
         url: string;

package/{dist → lib}/sdk/types/component/Component.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export type Component = {
     element: (props: any) => React.ReactElement;
     id: string;

package/{dist → lib}/sdk/types/keyframe/Keyframe.d.ts

@@ -1,4 +1,4 @@
-import { FillLayer } from '../article/Item';
+import { FillLayer } from "../article/Item";
 export type KeyframeAny = Keyframe<KeyframeType>;
 export interface Keyframe<T extends KeyframeType> {
     id: string;

package/lib/sdk/types/project/Meta.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/sdk/types/project/Page.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/sdk/types/project/Project.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentLayout = useCurrentLayout;
+const useCntrlContext_1 = require("../provider/useCntrlContext");
+const react_1 = require("react");
+const ArticleRectContext_1 = require("../provider/ArticleRectContext");
+function useCurrentLayout() {
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const layoutRanges = (0, react_1.useMemo)(() => {
+        const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
+        return sorted.reduce((acc, layout, i, layouts) => {
+            const next = layouts[i + 1];
+            return [
+                ...acc,
+                {
+                    layoutId: layout.id,
+                    exemplary: layout.exemplary,
+                    start: layout.startsWith,
+                    end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
+                }
+            ];
+        }, []);
+    }, [layouts]);
+    const getCurrentLayout = (0, react_1.useCallback)((articleWidth) => {
+        const range = layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end);
+        return range;
+    }, [layoutRanges]);
+    const [layoutId, setLayoutId] = (0, react_1.useState)(undefined);
+    const [deviation, setDeviation] = (0, react_1.useState)(1);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver)
+            return;
+        return articleRectObserver.on('resize', () => {
+            const articleWidth = articleRectObserver.width;
+            const { layoutId, exemplary } = getCurrentLayout(articleWidth);
+            setLayoutId(layoutId);
+            setDeviation(articleWidth / exemplary);
+        });
+    }, [articleRectObserver, getCurrentLayout]);
+    return { layoutId, layoutDeviation: deviation };
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExemplary = void 0;
+const useCntrlContext_1 = require("../provider/useCntrlContext");
+const useLayoutContext_1 = require("../components/useLayoutContext");
+const useExemplary = () => {
+    var _a, _b;
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const exemplary = (_b = (_a = layouts.find(l => l.id === layout)) === null || _a === void 0 ? void 0 : _a.exemplary) !== null && _b !== void 0 ? _b : 1;
+    return exemplary;
+};
+exports.useExemplary = useExemplary;

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemFXData = useItemFXData;
+const Keyframe_1 = require("../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("./useKeyframeValue");
+const baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform sampler2D u_pattern;
+uniform vec2 u_imgDimensions;
+uniform vec2 u_patternDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
+varying vec2 v_texCoord;`;
+function useItemFXData(item, sectionId) {
+    const { fragmentShader: shaderBody, FXControls } = item.commonParams;
+    const controls = FXControls !== null && FXControls !== void 0 ? FXControls : [];
+    const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
+        .join('\n');
+    const fragmentShader = `${baseVariables}\n${controlsVariables}\n${shaderBody}`;
+    const controlsValues = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.FXParams, () => {
+        const defaultValue = controls.reduce((acc, control) => {
+            if (Array.isArray(control.value)) {
+                acc[control.shaderParam] = control.value[0];
+            }
+            else {
+                acc[control.shaderParam] = control.value;
+            }
+            return acc;
+        }, {});
+        return defaultValue;
+    }, (animator, scroll, value) => animator.getFXParams(value, scroll), sectionId);
+    return {
+        fragmentShader,
+        controlsValues
+    };
+}

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

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyframeValue = useKeyframeValue;
+const lodash_isequal_1 = __importDefault(require("lodash.isequal"));
+const react_1 = require("react");
+const ArticleRectContext_1 = require("../provider/ArticleRectContext");
+const KeyframesContext_1 = require("../provider/KeyframesContext");
+const Animator_1 = require("../utils/Animator/Animator");
+const useLayoutContext_1 = require("../components/useLayoutContext");
+const emptyDeps = [];
+function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionId, deps = emptyDeps) {
+    const animatorGetterRef = (0, react_1.useRef)(animatorGetter);
+    const itemParamsGetterRef = (0, react_1.useRef)(itemParamsGetter);
+    animatorGetterRef.current = animatorGetter;
+    itemParamsGetterRef.current = itemParamsGetter;
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const keyframesRepo = (0, react_1.useContext)(KeyframesContext_1.KeyframesContext);
+    const keyframes = (0, react_1.useMemo)(() => keyframesRepo.getItemKeyframes(item.id).filter(kf => kf.type === type), [item.id, keyframesRepo, type]);
+    const paramValue = (0, react_1.useMemo)(() => {
+        return itemParamsGetterRef.current(item, layoutId);
+    }, [item, layoutId, ...deps]);
+    const [adjustedValue, setAdjustedValue] = (0, react_1.useState)(paramValue);
+    const adjustedValueRef = (0, react_1.useRef)(adjustedValue);
+    adjustedValueRef.current = adjustedValue;
+    const animator = (0, react_1.useMemo)(() => {
+        if (!layoutId || !keyframes.length)
+            return;
+        const animationData = keyframes
+            .filter(k => k.layoutId === layoutId)
+            .map(({ position, type, value }) => ({
+            position,
+            type,
+            value
+        }));
+        return new Animator_1.Animator(animationData);
+    }, [keyframes, layoutId]);
+    const handleKeyframeValue = (0, react_1.useCallback)((scroll) => {
+        if (!animator)
+            return;
+        const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+        if (!(0, lodash_isequal_1.default)(newValue, adjustedValueRef.current)) {
+            setAdjustedValue(newValue);
+        }
+    }, [animator, paramValue]);
+    (0, react_1.useEffect)(() => {
+        setAdjustedValue(paramValue);
+    }, [paramValue]);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver || !animator)
+            return;
+        const scroll = articleRectObserver.getSectionScroll(sectionId);
+        handleKeyframeValue(scroll);
+    }, [articleRectObserver, handleKeyframeValue, animator]);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver || !animator)
+            return;
+        return articleRectObserver.on('resize', () => {
+            const scroll = articleRectObserver.getSectionScroll(sectionId);
+            handleKeyframeValue(scroll);
+        });
+    }, [handleKeyframeValue, articleRectObserver, animator]);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver || !animator)
+            return;
+        return articleRectObserver.on('scroll', () => {
+            const scroll = articleRectObserver.getSectionScroll(sectionId);
+            handleKeyframeValue(scroll);
+        });
+    }, [handleKeyframeValue, articleRectObserver, animator]);
+    return keyframes.length ? adjustedValue : paramValue;
+}

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRegisterResize = useRegisterResize;
+const react_1 = require("react");
+const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+function useRegisterResize(ref, onResize) {
+    (0, react_1.useEffect)(() => {
+        if (!ref || !onResize)
+            return;
+        const observer = new resize_observer_polyfill_1.default((entries) => {
+            const [entry] = entries;
+            onResize(entry.target.clientHeight / window.innerWidth);
+        });
+        observer.observe(ref);
+        return () => {
+            observer.unobserve(ref);
+        };
+    }, [ref, onResize]);
+}

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

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Article = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+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 InteractionsContext_1 = require("../provider/InteractionsContext");
+const WebGLContextManagerContext_1 = require("../provider/WebGLContextManagerContext");
+const effects_1 = require("@cntrl-site/effects");
+const Article = ({ article, sectionData }) => {
+    const articleRef = (0, react_1.useRef)(null);
+    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
+    const id = (0, react_1.useId)();
+    const [articleHeight, setArticleHeight] = (0, react_1.useState)(1);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver)
+            return;
+        return articleRectObserver.on('resize', (rect) => {
+            setArticleHeight(rect.height / rect.width);
+        });
+    }, [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)(ArticleWrapper_1.ArticleWrapper, { 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 = section.name ? sectionData[section.name] : {};
+                                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: `
+       .article {
+         position: relative;
+         overflow: clip;
+       }
+      ` })] }) }));
+};
+exports.Article = Article;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArticleWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+const LayoutContext_1 = require("../provider/LayoutContext");
+const ArticleWrapper = ({ children }) => {
+    const { layoutId, layoutDeviation } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
+    return ((0, jsx_runtime_1.jsx)(LayoutContext_1.LayoutContext.Provider, { value: layoutId, children: (0, jsx_runtime_1.jsx)("div", { className: "article-wrapper", style: Object.assign({}, layoutDeviationStyle), children: children }) }));
+};
+exports.ArticleWrapper = ArticleWrapper;

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CNTRLHead = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const html_react_parser_1 = __importDefault(require("html-react-parser"));
+const head_1 = __importDefault(require("next/head"));
+const FontFaceGenerator_1 = require("../../sdk/FontFaceGenerator/FontFaceGenerator");
+const CNTRLHead = ({ meta, project }) => {
+    const googleFonts = (0, html_react_parser_1.default)(project.fonts.google);
+    const adobeFonts = (0, html_react_parser_1.default)(project.fonts.adobe);
+    const parsedFonts = Object.assign(Object.assign({}, (typeof googleFonts === 'object' ? googleFonts : {})), (typeof adobeFonts === 'object' ? adobeFonts : {}));
+    const customFonts = project.fonts.custom;
+    const htmlHead = (0, html_react_parser_1.default)(project.html.head);
+    const ffGenerator = new FontFaceGenerator_1.FontFaceGenerator(customFonts);
+    const links = Object.values(parsedFonts).map((value) => {
+        var _a, _b;
+        if (!value)
+            return;
+        const rel = (value === null || value === void 0 ? void 0 : value.rel) || ((_a = value.props) === null || _a === void 0 ? void 0 : _a.rel);
+        const href = (value === null || value === void 0 ? void 0 : value.href) || ((_b = value.props) === null || _b === void 0 ? void 0 : _b.href);
+        if (!rel || !href)
+            return;
+        return ((0, jsx_runtime_1.jsx)("link", { rel: rel, href: href }, `link-${rel}-${href}`));
+    });
+    return ((0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("title", { children: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "keywords", content: meta.keywords }), (0, jsx_runtime_1.jsx)("meta", { name: "og:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "og:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { name: "og:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { property: "twitter:card", content: "summary_large_image" }), (0, jsx_runtime_1.jsx)("meta", { name: "generator", content: "https://cntrl.site" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: meta.favicon }), customFonts.length > 0 && ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
+                    __html: ffGenerator.generate()
+                } })), links, htmlHead] }));
+};
+exports.CNTRLHead = CNTRLHead;

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Page = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const html_react_parser_1 = __importDefault(require("html-react-parser"));
+const Article_1 = require("./Article");
+const KeyframesContext_1 = require("../provider/KeyframesContext");
+const Head_1 = require("./Head");
+const Keyframes_1 = require("../provider/Keyframes");
+const Page = ({ article, project, meta, keyframes, sectionData }) => {
+    const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
+    const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
+    const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }), beforeBodyClose] }));
+};
+exports.Page = Page;

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

@@ -1,4 +1,4 @@
-import { default as React, FC } from 'react';
+import React, { FC } from 'react';
 type PlaybackParams = {
     from: number;
     to: number;

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollPlaybackVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rangeMap_1 = require("../utils/rangeMap");
+const ArticleRectContext_1 = require("../provider/ArticleRectContext");
+const ScrollPlaybackVideoManager_1 = require("../../sdk/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager");
+const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className }) => {
+    const [containerElement, setContainerElement] = (0, react_1.useState)(null);
+    const [time, setTime] = (0, react_1.useState)(0);
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    (0, react_1.useEffect)(() => {
+        if (!playbackParams || !articleRectObserver)
+            return;
+        return articleRectObserver.on('scroll', () => {
+            const scrollPos = articleRectObserver.getSectionScroll(sectionId);
+            const time = (0, rangeMap_1.rangeMap)(scrollPos, playbackParams.from, playbackParams.to, 0, 1, true);
+            setTime(toFixed(time));
+        });
+    }, [playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.from, playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.to, time]);
+    const scrollVideoManager = (0, react_1.useMemo)(() => {
+        if (!containerElement)
+            return null;
+        const manager = new ScrollPlaybackVideoManager_1.ScrollPlaybackVideoManager({
+            src,
+            videoContainer: containerElement
+        });
+        return manager;
+    }, [containerElement, src]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            scrollVideoManager === null || scrollVideoManager === void 0 ? void 0 : scrollVideoManager.destroy();
+        };
+    }, [scrollVideoManager]);
+    (0, react_1.useEffect)(() => {
+        if (scrollVideoManager && time >= 0 && time <= 1) {
+            scrollVideoManager.setTargetTimePercent(time);
+        }
+    }, [time, scrollVideoManager]);
+    return (0, jsx_runtime_1.jsx)("div", { className: className, style: style, ref: setContainerElement });
+};
+exports.ScrollPlaybackVideo = ScrollPlaybackVideo;
+function toFixed(num) {
+    return Number(num.toFixed(3));
+}

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

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+exports.getSectionHeight = getSectionHeight;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useSectionRegistry_1 = require("../../utils/ArticleRectManager/useSectionRegistry");
+const color_1 = require("@cntrl-site/color");
+const useLayoutContext_1 = require("../useLayoutContext");
+const SectionVideo_1 = require("./SectionVideo");
+const SectionImage_1 = require("./SectionImage");
+const checkOverflowClipSupport_1 = require("../../utils/checkOverflowClipSupport");
+const Section_1 = require("../../../sdk/types/article/Section");
+const utils_1 = require("../../../utils");
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+const Section = ({ section, data, children }) => {
+    var _a;
+    const id = (0, react_1.useId)();
+    const sectionRef = (0, react_1.useRef)(null);
+    const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const layoutValues = [section.height, section.color, (_a = section.media) !== null && _a !== void 0 ? _a : {}];
+    const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+    (0, useSectionRegistry_1.useSectionRegistry)(section.id, sectionRef.current);
+    const sectionHeight = layout && section.height[layout] ? section.height[layout] : undefined;
+    const layoutMedia = layout && section.media && section.media[layout] ? section.media[layout] : undefined;
+    const media = (0, react_1.useMemo)(() => {
+        if (layoutMedia && !(0, checkOverflowClipSupport_1.isOverflowClipSupported)()) {
+            return Object.assign(Object.assign({}, layoutMedia), { position: 'local' });
+        }
+        return layoutMedia;
+    }, [layoutMedia]);
+    const getSectionVisibilityStyles = () => {
+        return layouts
+            .sort((a, b) => a.startsWith - b.startsWith)
+            .reduce((acc, layout) => {
+            const isHidden = section.hidden[layout.id];
+            return `
+          ${acc}
+          ${(0, utils_1.getLayoutMediaQuery)(layout.id, layouts)} {
+            .section-${section.id} {
+              display: ${isHidden ? 'none' : 'block'};
+            }
+          }`;
+        }, '');
+    };
+    if (SectionComponent)
+        return (0, jsx_runtime_1.jsx)("div", { ref: sectionRef, children: (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: 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: Object.assign({ transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset' }, (sectionHeight && { height: media.position === 'fixed' ? `calc(${getSectionHeight(sectionHeight)} + 200vh)` : getSectionHeight(sectionHeight) })), 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: `
+      ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => (`
+         .section-${section.id} {
+            height: ${getSectionHeight(height)};
+            position: relative;
+            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%;
+         }
+        `))}
+      ${getSectionVisibilityStyles()}
+    ` })] }));
+};
+exports.Section = Section;
+function getSectionHeight(heightData) {
+    const { units, vhUnits, mode } = heightData;
+    if (mode === Section_1.SectionHeightMode.ViewportHeightUnits)
+        return `${vhUnits}vh`;
+    if (mode === Section_1.SectionHeightMode.ControlUnits)
+        return `${units * 100}vw`;
+    return '0';
+}