@gxpl/sdk 0.0.8 → 0.0.9

package/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/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/lib/sdk/types/keyframe/Keyframe.d.ts

@@ -3,7 +3,6 @@ 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/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-nextjs/common/useExemplary.js

@@ -2,12 +2,8 @@
 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;
+    const { exemplary } = (0, useCntrlContext_1.useCntrlContext)();
     return exemplary;
 };
 exports.useExemplary = useExemplary;

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

@@ -12,7 +12,7 @@ uniform float u_time;
 uniform vec2 u_cursor;
 varying vec2 v_texCoord;`;
 function useItemFXData(item, sectionId) {
-    const { fragmentShader: shaderBody, FXControls } = item.commonParams;
+    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');

package/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

@@ -9,7 +9,6 @@ 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);
@@ -17,27 +16,25 @@ function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionI
     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]);
+        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 (!layoutId || !keyframes.length)
+        if (!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]);
+    }, [keyframes]);
     const handleKeyframeValue = (0, react_1.useCallback)((scroll) => {
         if (!animator)
             return;

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/components/ArticleWrapper.js

@@ -2,11 +2,10 @@
 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 useLayoutDeviation_1 = require("../common/useLayoutDeviation");
 const ArticleWrapper = ({ children }) => {
-    const { layoutId, layoutDeviation } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const { layoutDeviation } = (0, useLayoutDeviation_1.useLayoutDeviation)();
     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 }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "article-wrapper", style: Object.assign({}, layoutDeviationStyle), children: children }));
 };
 exports.ArticleWrapper = ArticleWrapper;

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

@@ -11,51 +11,34 @@ 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 { customSections } = (0, useCntrlContext_1.useCntrlContext)();
+    const { height, color, hidden } = section;
     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' });
+        if (section.media && !(0, checkOverflowClipSupport_1.isOverflowClipSupported)()) {
+            return Object.assign(Object.assign({}, section.media), { 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'};
-            }
-          }`;
-        }, '');
-    };
+        return section.media;
+    }, [section.media]);
     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]) => (`
+    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: `
          .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} {
@@ -70,9 +53,7 @@ const Section = ({ section, data, children }) => {
             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) {

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

@@ -1,3 +1 @@
-import { SectionHeight } from '../../../sdk/types/article/Section';
-export declare const useSectionHeightData: (sectionId: string) => Record<string, string>;
-export declare function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string>;
+export declare const useSectionHeightData: (sectionId: string) => string;

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

@@ -1,20 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSectionHeightData = void 0;
-exports.getSectionHeightMap = getSectionHeightMap;
 const react_1 = require("react");
 const CntrlContext_1 = require("../../provider/CntrlContext");
 const Section_1 = require("./Section");
 const useSectionHeightData = (sectionId) => {
     const sectionHeightContext = (0, react_1.useContext)(CntrlContext_1.CntrlContext);
-    const layouts = sectionHeightContext.layouts;
     const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
-    return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
+    return sectionHeightData ? (0, Section_1.getSectionHeight)(sectionHeightData) : '0';
 };
 exports.useSectionHeightData = useSectionHeightData;
-function getSectionHeightMap(sectionHeight) {
-    return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, (0, Section_1.getSectionHeight)(heightData)]));
-}
-function getDefaultHeightData(layouts) {
-    return layouts.reduce((acc, layout) => (Object.assign(Object.assign({}, acc), { [layout.id]: '0' })), {});
-}

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

@@ -13,34 +13,21 @@ const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const useItemAngle_1 = require("../useItemAngle");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useCodeEmbedItem_1 = require("./useCodeEmbedItem");
-const ItemArea_1 = require("../../../../sdk/types/article/ItemArea");
-const utils_1 = require("../../../../utils");
 const FontFaceGenerator_1 = require("../../../../sdk/FontFaceGenerator/FontFaceGenerator");
-const stylesMap = {
-    [ItemArea_1.AreaAnchor.TopLeft]: {},
-    [ItemArea_1.AreaAnchor.TopCenter]: { justifyContent: 'center' },
-    [ItemArea_1.AreaAnchor.TopRight]: { justifyContent: 'flex-end' },
-    [ItemArea_1.AreaAnchor.MiddleLeft]: { alignItems: 'center' },
-    [ItemArea_1.AreaAnchor.MiddleCenter]: { justifyContent: 'center', alignItems: 'center' },
-    [ItemArea_1.AreaAnchor.MiddleRight]: { justifyContent: 'flex-end', alignItems: 'center' },
-    [ItemArea_1.AreaAnchor.BottomLeft]: { alignItems: 'flex-end' },
-    [ItemArea_1.AreaAnchor.BottomCenter]: { justifyContent: 'center', alignItems: 'flex-end' },
-    [ItemArea_1.AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
-};
+const useExemplary_1 = require("../../../common/useExemplary");
 const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const id = (0, react_1.useId)();
-    const { layouts, fonts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { fonts } = (0, useCntrlContext_1.useCntrlContext)();
     const fontGoogleTags = fonts === null || fonts === void 0 ? void 0 : fonts.google;
     const fontAdobeTags = fonts === null || fonts === void 0 ? void 0 : fonts.adobe;
     const fontCustomTags = new FontFaceGenerator_1.FontFaceGenerator((_a = fonts === null || fonts === void 0 ? void 0 : fonts.custom) !== null && _a !== void 0 ? _a : []).generate();
-    const { anchor, blur: itemBlur, opacity: itemOpacity } = (0, useCodeEmbedItem_1.useCodeEmbedItem)(item, sectionId);
+    const { blur: itemBlur, opacity: itemOpacity } = (0, useCodeEmbedItem_1.useCodeEmbedItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const html = decodeBase64(item.commonParams.html);
+    const html = decodeBase64(item.params.html);
+    const exemplary = (0, useExemplary_1.useExemplary)();
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    const pos = stylesMap[anchor];
-    const layoutValues = [item.area, item.layoutParams];
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
     const blur = ((_c = (_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.blur) !== null && _c !== void 0 ? _c : itemBlur);
     const opacity = (_e = (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _d === void 0 ? void 0 : _d.opacity) !== null && _e !== void 0 ? _e : itemOpacity;
@@ -79,37 +66,31 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
       ${html}
     `;
         iframe.srcdoc = htmlWithStyles;
-    }, [html, item.commonParams.iframe, ref]);
+    }, [html, item.params.iframe, ref]);
     const isInteractive = opacity !== 0;
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign({ transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.params.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: {
+                        border: 'unset'
+                    } })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-wrapper-${item.id} {
         position: absolute;
         width: 100%;
         height: 100%;
+        opacity: ${item.params.opacity};
+        transform: rotate(${item.area.angle}deg);
+        filter: ${item.params.blur !== 0 ? `blur(${item.params.blur * 100}vw)` : 'unset'};
+        ${item.params.blur !== 0 ? 'will-change: transform;' : ''}
       }
       .embed-${item.id} {
-        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
+        transform: ${item.params.scale ? 'scale(var(--layout-deviation))' : 'none'};
         transform-origin: top left;
         z-index: 1;
         border: none;
+        width: ${item.params.scale ? `${item.area.width * exemplary}px` : '100%'};
+        height: ${item.params.scale ? `${item.area.height * exemplary}px` : '100%'};
       }
-      ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams], exemplary) => {
-                    return (`
-          .embed-wrapper-${item.id} {
-            opacity: ${layoutParams.opacity};
-            transform: rotate(${area.angle}deg);
-            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-          .embed-${item.id} {
-            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
-            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
-          }
-        `);
-                })}
     ` })] }));
 };
 exports.CodeEmbedItem = CodeEmbedItem;

package/lib/sdk-nextjs/components/items/CodeEmbedItem/useCodeEmbedItem.d.ts

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

package/lib/sdk-nextjs/components/items/CodeEmbedItem/useCodeEmbedItem.js

@@ -1,24 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeEmbedItem = useCodeEmbedItem;
-const useLayoutContext_1 = require("../../useLayoutContext");
 const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
 const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
-const ItemArea_1 = require("../../../../sdk/types/article/ItemArea");
 function useCodeEmbedItem(item, sectionId) {
-    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item, layoutId) => {
-        if (!layoutId)
-            return;
-        const layoutParams = item.layoutParams[layoutId];
-        return 'blur' in layoutParams ? layoutParams.blur : 0;
-    }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
-    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Opacity, (item, layoutId) => {
-        if (!layoutId)
-            return;
-        const layoutParams = item.layoutParams[layoutId];
-        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
-    }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
-    const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : ItemArea_1.AreaAnchor.TopLeft;
-    return { anchor, blur, opacity };
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item) => 'blur' in item.params ? item.params.blur : 0, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId);
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Opacity, (item) => 'opacity' in item.params ? item.params.opacity : 1, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId);
+    return { blur, opacity };
 }