@gxpl/sdk 0.0.7 → 0.0.9

package/{dist → lib}/sdk/types/article/Item.d.ts

@@ -8,115 +8,109 @@ export type ItemAny = Item<ArticleItemType>;
 export interface Item<T extends ArticleItemType> {
     id: string;
     type: T;
-    area: Record<LayoutIdentifier, ItemArea>;
-    hidden: Record<LayoutIdentifier, boolean>;
+    area: ItemArea;
+    hidden: boolean;
     link?: Link;
     items?: T extends (ArticleItemType.Group | ArticleItemType.Compound) ? ItemAny[] : never;
-    sticky: Record<LayoutIdentifier, StickyParams | null>;
-    compoundSettings?: Record<LayoutIdentifier, CompoundSettings>;
-    commonParams: ItemCommonParamsMap[T];
+    sticky: StickyParams | null;
+    compoundSettings?: CompoundSettings;
     state: ItemState<T>;
-    layoutParams: Record<LayoutIdentifier, ItemLayoutParamsMap[T]>;
-}
-export interface ItemCommonParamsMap {
-    [ArticleItemType.Image]: ImageCommonParams;
-    [ArticleItemType.Video]: VideoCommonParams;
-    [ArticleItemType.RichText]: RichTextCommonParams;
-    [ArticleItemType.Rectangle]: RectangleCommonParams;
-    [ArticleItemType.VimeoEmbed]: VimeoEmbedCommonParams;
-    [ArticleItemType.YoutubeEmbed]: YoutubeEmbedCommonParams;
-    [ArticleItemType.Custom]: CustomCommonParams;
-    [ArticleItemType.Group]: GroupCommonParams;
-    [ArticleItemType.Compound]: CompoundCommonParams;
-    [ArticleItemType.CodeEmbed]: CodeEmbedCommonParams;
-    [ArticleItemType.Component]: ComponentCommonParams;
-}
-export interface ItemLayoutParamsMap {
-    [ArticleItemType.Image]: ImageLayoutParams;
-    [ArticleItemType.Video]: VideoLayoutParams;
-    [ArticleItemType.RichText]: RichTextLayoutParams;
-    [ArticleItemType.Rectangle]: RectangleLayoutParams;
-    [ArticleItemType.VimeoEmbed]: VimeoEmbedLayoutParams;
-    [ArticleItemType.YoutubeEmbed]: YoutubeEmbedLayoutParams;
-    [ArticleItemType.Custom]: CustomLayoutParams;
-    [ArticleItemType.Group]: GroupLayoutParams;
-    [ArticleItemType.Compound]: CompoundLayoutParams;
-    [ArticleItemType.CodeEmbed]: CodeEmbedLayoutParams;
-    [ArticleItemType.Component]: ComponentLayoutParams;
-}
-interface CommonParamsBase {
+    params: ItemParamsMap[T];
+}
+export interface ItemParamsMap {
+    [ArticleItemType.Image]: ImageParams;
+    [ArticleItemType.Video]: VideoParams;
+    [ArticleItemType.RichText]: RichTextParams;
+    [ArticleItemType.Rectangle]: RectangleParams;
+    [ArticleItemType.VimeoEmbed]: VimeoEmbedParams;
+    [ArticleItemType.YoutubeEmbed]: YoutubeEmbedParams;
+    [ArticleItemType.Custom]: CustomParams;
+    [ArticleItemType.Group]: GroupParams;
+    [ArticleItemType.Compound]: CompoundParams;
+    [ArticleItemType.CodeEmbed]: CodeEmbedParams;
+    [ArticleItemType.Component]: ComponentParams;
+}
+interface ParamsBase {
     pointerEvents?: 'never' | 'when_visible' | 'always';
 }
-interface MediaCommonParams extends CommonParamsBase {
+interface ImageParams extends MediaParams {
+}
+interface MediaParams extends ParamsBase {
     url: string;
     hasGLEffect?: boolean;
     fragmentShader: string | null;
     FXControls?: FXControlAny[];
+    opacity: number;
+    radius: number;
+    strokeWidth: number;
+    strokeFill: FillLayer[];
+    blur: number;
+    isDraggable?: boolean;
 }
-interface VideoCommonParams extends MediaCommonParams {
+interface VideoParams extends MediaParams {
     coverUrl: string | null;
+    play: 'on-hover' | 'on-click' | 'auto';
+    muted: boolean;
+    controls: boolean;
+    scrollPlayback: ScrollPlaybackParams | null;
 }
-interface ImageCommonParams extends MediaCommonParams {
-}
-interface RichTextCommonParams extends CommonParamsBase {
+interface RichTextParams extends ParamsBase {
     text: string;
     blocks?: RichTextBlock[];
+    rangeStyles?: RichTextStyle[];
+    textAlign: TextAlign;
+    sizing: string;
+    blur: number;
+    fontSize: number;
+    lineHeight: number;
+    letterSpacing: number;
+    wordSpacing: number;
+    textTransform: TextTransform;
+    verticalAlign: VerticalAlign;
+    color: string;
+    typeFace: string;
+    fontStyle: string;
+    fontWeight: number;
+    fontVariant: string;
+    isDraggable?: boolean;
 }
-interface RectangleCommonParams extends CommonParamsBase {
+interface RectangleParams extends ParamsBase {
     ratioLock: boolean;
-}
-interface CustomCommonParams extends CommonParamsBase {
-    name: string;
-}
-interface GroupCommonParams extends CommonParamsBase {
-}
-interface CompoundCommonParams extends CommonParamsBase {
-    overflow: 'hidden' | 'visible';
-}
-interface CodeEmbedCommonParams extends CommonParamsBase {
-    html: string;
-    scale: boolean;
-    iframe: boolean;
-}
-interface VimeoEmbedCommonParams extends CommonParamsBase {
-    url: string;
-    coverUrl: string | null;
-}
-interface YoutubeEmbedCommonParams extends CommonParamsBase {
-    url: string;
-    coverUrl: string | null;
-}
-interface ComponentCommonParams extends CommonParamsBase {
-    componentId: string;
-    content?: any;
-}
-interface MediaLayoutParams {
-    opacity: number;
     radius: number;
     strokeWidth: number;
+    fill: FillLayer[];
     strokeFill: FillLayer[];
     blur: number;
+    backdropBlur: number;
+    blurMode: 'default' | 'backdrop';
     isDraggable?: boolean;
 }
-interface CustomLayoutParams {
+interface CustomParams extends ParamsBase {
+    name: string;
     isDraggable?: boolean;
 }
-interface GroupLayoutParams {
+interface GroupParams extends ParamsBase {
     opacity: number;
     blur: number;
     isDraggable?: boolean;
 }
-interface CompoundLayoutParams {
+interface CompoundParams extends ParamsBase {
+    overflow: 'hidden' | 'visible';
     opacity: number;
     isDraggable?: boolean;
 }
-interface CodeEmbedLayoutParams {
+interface CodeEmbedParams extends ParamsBase {
+    html: string;
+    scale: boolean;
+    iframe: boolean;
     areaAnchor: AreaAnchor;
     opacity: number;
     blur: number;
     isDraggable?: boolean;
 }
-interface VimeoEmbedLayoutParams {
+interface VimeoEmbedParams extends ParamsBase {
+    url: string;
+    coverUrl: string | null;
     play: 'on-hover' | 'on-click' | 'auto';
     controls: boolean;
     loop: boolean;
@@ -126,7 +120,9 @@ interface VimeoEmbedLayoutParams {
     blur: number;
     opacity: number;
 }
-interface YoutubeEmbedLayoutParams {
+interface YoutubeEmbedParams extends ParamsBase {
+    url: string;
+    coverUrl: string | null;
     play: 'on-hover' | 'on-click' | 'auto';
     controls: boolean;
     loop: boolean;
@@ -134,41 +130,12 @@ interface YoutubeEmbedLayoutParams {
     blur: number;
     opacity: number;
 }
-interface ImageLayoutParams extends MediaLayoutParams {
-}
-interface VideoLayoutParams extends MediaLayoutParams {
-    play: 'on-hover' | 'on-click' | 'auto';
-    muted: boolean;
-    controls: boolean;
-    scrollPlayback: ScrollPlaybackParams | null;
-}
-interface RichTextLayoutParams {
-    rangeStyles?: RichTextStyle[];
-    textAlign: TextAlign;
-    sizing: string;
-    blur: number;
-    fontSize: number;
-    lineHeight: number;
-    letterSpacing: number;
-    wordSpacing: number;
-    textTransform: TextTransform;
-    verticalAlign: VerticalAlign;
-    color: string;
-    typeFace: string;
-    fontStyle: string;
-    fontWeight: number;
-    fontVariant: string;
-    isDraggable?: boolean;
-}
-interface RectangleLayoutParams {
-    radius: number;
-    strokeWidth: number;
-    fill: FillLayer[];
-    strokeFill: FillLayer[];
+interface ComponentParams extends ParamsBase {
+    componentId: string;
+    content?: any;
+    parameters?: any;
+    opacity: number;
     blur: number;
-    backdropBlur: number;
-    blurMode: 'default' | 'backdrop';
-    isDraggable?: boolean;
 }
 export type FillLayer = SolidFillLayer | LinearGradientFillLayer | RadialGradientFillLayer | ConicGradientFillLayer | ImageLayer;
 type ColorPoint = {
@@ -230,12 +197,6 @@ export interface Link {
     url: string;
     target: string;
 }
-type LayoutIdentifier = string;
-interface ComponentLayoutParams {
-    parameters?: any;
-    opacity: number;
-    blur: number;
-}
 export type VideoItem = Item<ArticleItemType.Video>;
 export type RectangleItem = Item<ArticleItemType.Rectangle>;
 export type ImageItem = Item<ArticleItemType.Image>;

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

@@ -28,10 +28,9 @@ export type SectionMedia = SectionVideo | SectionImage;
 export interface Section {
     id: string;
     name?: string;
-    height: Record<string, SectionHeight>;
-    hidden: Record<string, boolean>;
+    height: SectionHeight;
+    hidden: boolean;
     items: ItemAny[];
-    position: Record<string, number>;
-    color: Record<string, string | null>;
-    media?: Record<string, SectionMedia>;
+    color: string | null;
+    media?: SectionMedia;
 }

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

@@ -1,9 +1,8 @@
-import { FillLayer } from '../article/Item';
+import { FillLayer } from "../article/Item";
 export type KeyframeAny = Keyframe<KeyframeType>;
 export interface Keyframe<T extends KeyframeType> {
     id: string;
     type: T;
-    layoutId: string;
     itemId: string;
     position: number;
     value: KeyframeValueMap[T];

package/{dist → lib}/sdk/types/project/Project.d.ts

@@ -1,4 +1,3 @@
-import { Layout } from './Layout';
 import { Fonts } from './Fonts';
 import { Meta } from './Meta';
 import { Page } from './Page';
@@ -11,7 +10,7 @@ export interface Project {
     id: string;
     html: AdditionalHTML;
     meta: Meta;
-    layouts: Layout[];
+    exemplary: number;
     pages: Page[];
     fonts: Fonts;
 }

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

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

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExemplary = void 0;
+const useCntrlContext_1 = require("../provider/useCntrlContext");
+const useExemplary = () => {
+    const { exemplary } = (0, useCntrlContext_1.useCntrlContext)();
+    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.params;
+    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/{dist → lib}/sdk-nextjs/common/useKeyframeValue.d.ts

@@ -3,6 +3,6 @@ import { Animator } from '../utils/Animator/Animator';
 import { ItemAny } from '../../sdk/types/article/Item';
 import { KeyframeType } from '../../sdk/types/keyframe/Keyframe';
 export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
-type ItemParamGetter<T> = (item: ItemAny, layoutId: string | undefined) => T;
+type ItemParamGetter<T> = (item: ItemAny) => T;
 export declare function useKeyframeValue<T>(item: ItemAny, type: KeyframeType, itemParamsGetter: ItemParamGetter<T>, animatorGetter: AnimatorGetter<T>, sectionId: string, deps?: DependencyList): T;
 export {};

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

@@ -0,0 +1,72 @@
+"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 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 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);
+    }, [item, ...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 (!keyframes.length)
+            return;
+        const animationData = keyframes
+            .map(({ position, type, value }) => ({
+            position,
+            type,
+            value
+        }));
+        return new Animator_1.Animator(animationData);
+    }, [keyframes]);
+    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/useLayoutDeviation.d.ts

@@ -0,0 +1,5 @@
+type UseCurrentLayoutReturn = {
+    layoutDeviation: number;
+};
+export declare function useLayoutDeviation(): UseCurrentLayoutReturn;
+export {};

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayoutDeviation = useLayoutDeviation;
+const useCntrlContext_1 = require("../provider/useCntrlContext");
+const react_1 = require("react");
+const ArticleRectContext_1 = require("../provider/ArticleRectContext");
+function useLayoutDeviation() {
+    const { exemplary } = (0, useCntrlContext_1.useCntrlContext)();
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const [deviation, setDeviation] = (0, react_1.useState)(1);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver)
+            return;
+        return articleRectObserver.on('resize', () => {
+            const articleWidth = articleRectObserver.width;
+            setDeviation(articleWidth / exemplary);
+        });
+    }, [articleRectObserver, exemplary]);
+    return { layoutDeviation: deviation };
+}

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,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArticleWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useLayoutDeviation_1 = require("../common/useLayoutDeviation");
+const ArticleWrapper = ({ children }) => {
+    const { layoutDeviation } = (0, useLayoutDeviation_1.useLayoutDeviation)();
+    const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
+    return ((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));
+}