@cntrl-site/sdk-nextjs 1.9.72 → 1.9.74-alpha.0

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/lib/components/Article.js

@@ -8,7 +8,6 @@ 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");
@@ -31,8 +30,8 @@ const Article = ({ article, sectionData }) => {
     const sectionsLength = article.sections.length;
     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.jsxs)("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, zIndex: sectionsLength - i, 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)("div", { id: "component-portal" })] }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { articleHeight: articleHeight, section: section, data: data, zIndex: sectionsLength - i }, section.id));
+                                }) }), (0, jsx_runtime_1.jsx)("div", { id: "component-portal" }), (0, jsx_runtime_1.jsx)("div", { id: "grid-component-lightbox-portal" })] }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
          position: relative;
          overflow: clip;

package/lib/components/Section/Section.js

@@ -15,18 +15,24 @@ const useLayoutContext_1 = require("../useLayoutContext");
 const SectionVideo_1 = require("./SectionVideo");
 const SectionImage_1 = require("./SectionImage");
 const checkOverflowClipSupport_1 = require("../../utils/checkOverflowClipSupport");
+const StructuredContent_1 = require("../StructuredContent/StructuredContent");
+const Item_1 = require("../items/Item");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-const Section = ({ section, data, children, zIndex }) => {
+const Section = ({ section, data, zIndex, articleHeight }) => {
     var _a;
     const reactId = (0, react_1.useId)();
     const id = `${reactId}-section-${section.id}`;
     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 [sectionHeight, setSectionHeight] = (0, react_1.useState)(0);
+    const layoutValues = [
+        section.minHeight,
+        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)()) {
@@ -48,19 +54,31 @@ const Section = ({ section, data, children, zIndex }) => {
           }`;
         }, '');
     };
+    (0, react_1.useEffect)(() => {
+        if (!sectionRef.current)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const [entry] = entries;
+            const height = entry.contentRect.height;
+            setSectionHeight(height);
+        });
+        observer.observe(sectionRef.current);
+        return () => observer.disconnect();
+    }, []);
+    const children = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StructuredContent_1.StructuredContent, { section: section }), section.items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { sectionHeight: sectionHeight, item: item, sectionId: section.id, articleHeight: articleHeight }, item.id)))] }));
     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, style: { zIndex }, 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: `
+    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, style: { zIndex }, 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(${sectionHeight}px + 200vh)` : `${sectionHeight}px` })), 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, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => (`
          .section-${section.id} {
-            height: ${getSectionHeight(height)};
+            min-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)};
+            height: 100%;
             width: 100%;
-            position: relative;
+            position: absolute;
             overflow: clip;
          }
          .section-background-wrapper-${section.id} {

package/lib/components/StructuredBlockItem/StructuredBlockItem.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredBlockItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useSizing_1 = require("../items/useSizing");
+const StructuredComponent_1 = require("./StructuredComponent/StructuredComponent");
+const noop = () => null;
+const itemsMap = {
+    [sdk_1.StructuredBlockType.Component]: StructuredComponent_1.StructuredComponent,
+    [sdk_1.StructuredBlockType.RichText]: noop,
+    [sdk_1.StructuredBlockType.Image]: noop,
+    [sdk_1.StructuredBlockType.VimeoEmbed]: noop,
+    [sdk_1.StructuredBlockType.YoutubeEmbed]: noop,
+};
+const StructuredBlockItem = ({ block, maxWidthMap }) => {
+    var _a;
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-item-${block.id}`;
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layoutValues = [block.area, block.layoutParams, (_a = block.hidden) !== null && _a !== void 0 ? _a : {}, maxWidthMap];
+    const ItemComponent = itemsMap[block.type] || noop;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-block-item-${block.id}`, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { block: block }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hidden, maxWidth]) => {
+                    var _a, _b;
+                    const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
+                    return (`
+                .structured-block-item-${block.id} {
+                  display: ${hidden ? 'none' : 'block'};
+                  align-self: ${getAlignSelf((_a = area.alignment) !== null && _a !== void 0 ? _a : 'center')};
+                  width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth !== null && maxWidth !== void 0 ? maxWidth : 'max-content'};
+                  height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
+                  padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
+                  outline: none;
+                  left: ${((_b = area.horizontalOffset) !== null && _b !== void 0 ? _b : 0) * 100}vw;
+                  position: relative;
+                }
+              `);
+                })}
+        ` })] }));
+};
+exports.StructuredBlockItem = StructuredBlockItem;
+function getAlignSelf(alignment) {
+    switch (alignment) {
+        case 'left':
+            return 'start';
+        case 'right':
+            return 'end';
+        default:
+            return 'center';
+    }
+}

package/lib/components/StructuredBlockItem/StructuredComponent/StructuredComponent.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const StructuredComponent = ({ block }) => {
+    var _a, _b;
+    const sdk = (0, useCntrlContext_1.useCntrlContext)();
+    const { layouts } = sdk;
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const fallbackLayout = (_a = layouts[0]) === null || _a === void 0 ? void 0 : _a.id;
+    const effectiveLayout = layout !== null && layout !== void 0 ? layout : fallbackLayout;
+    const layoutValues = [block.layoutParams];
+    const component = sdk.getComponent(block.commonParams.componentId);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
+    const Element = component ? component.element : undefined;
+    const layoutParameters = effectiveLayout ? (_b = block.layoutParams[effectiveLayout]) === null || _b === void 0 ? void 0 : _b.parameters : undefined;
+    const commonParameters = block.commonParams.parameters;
+    const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: Object.assign(Object.assign({}, layoutParameters.settings), commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${block.id}`, ref: setRef, children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
+                        itemId: block.id,
+                        submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
+                    }, portalId: "component-portal", content: block.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: block.id, children: `
+      .custom-component-${block.id} {
+        width: 100%;
+        height: 100%;
+        pointer-events: auto;
+      }
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([layoutParams]) => {
+                    return (`
+          .custom-component-${block.id} {
+            opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+        `);
+                })}` })] }));
+};
+exports.StructuredComponent = StructuredComponent;

package/lib/components/StructuredContent/StructuredContent.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const StructuredBlockItem_1 = require("../StructuredBlockItem/StructuredBlockItem");
+const StructuredContent = ({ section }) => {
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-structured-content-${section.id}`;
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const structuredContentLength = section.structuredContent.length;
+    const defaultWidthRecord = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
+    const layoutValues = [section.structuredContentSettings.paddingBottom, defaultWidthRecord];
+    if (structuredContentLength === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-content-${section.id}`, children: [section.structuredContent.map(block => ((0, jsx_runtime_1.jsx)(StructuredBlockItem_1.StructuredBlockItem, { block: block, maxWidthMap: defaultWidthRecord }, block.id))), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+          ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([paddingBottom, defaultWidth]) => {
+                    return (`
+              .structured-content-${section.id} {
+                padding-bottom: ${paddingBottom * 100}vw;
+                max-width: ${defaultWidth < 1 ? `${defaultWidth * 100}vw` : 'unset'};
+                display: flex;
+                flex-direction: column;
+                margin: 0 auto;
+                width: 100%;
+              }
+            `);
+                })}
+        ` })] }));
+};
+exports.StructuredContent = StructuredContent;

package/lib/components/items/Item.js

@@ -34,7 +34,7 @@ const stickyFix = `
   transform: translate3d(0, 0, 0);
 `;
 const noop = () => null;
-const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
+const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false, sectionHeight = 0 }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const itemWrapperRef = (0, react_1.useRef)(null);
     const itemInnerRef = (0, react_1.useRef)(null);
@@ -69,7 +69,6 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
         height: (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.height
     });
     const sectionHeightLayoutMap = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
-    const sectionHeight = layout && sectionHeightLayoutMap[layout] ? sectionHeightLayoutMap[layout] : '0';
     const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionId, (_f = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _f === void 0 ? void 0 : _f.top);
     const layoutValues = [item.area, item.hidden];
     layoutValues.push(item.sticky);
@@ -131,7 +130,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
             (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
         }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined ? { top: isScreenBasedBottom ? 'unset' : isContainItem ? (0, getItemTopStyle_1.getPercentageBasedTopStyle)(top, height, anchorSide) : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left !== undefined ? { left: `${left * 100}vw` } : {})), (top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), (blendMode && { mixBlendMode: blendMode })), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
                     opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
-                    top: sticky ? (0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight, anchorSide) : 0,
+                    top: sticky ? (0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, `${sectionHeight}px`, anchorSide) : 0,
                     height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
                 }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({ top: `${position.y}px`, left: `${position.x}px` }, ((width !== undefined && height !== undefined)
                             ? {

package/lib/provider/CntrlSdkContext.js

@@ -78,7 +78,7 @@ class CntrlSdkContext {
     }
     setSectionsHeight(sections) {
         for (const section of sections) {
-            this.sectionHeightMap.set(section.id, section.height);
+            this.sectionHeightMap.set(section.id, section.minHeight);
         }
     }
     getSectionHeightData(sectionId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.72",
+  "version": "1.9.74-alpha.0",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,9 +31,9 @@
   "dependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^1.0.9",
+    "@cntrl-site/components": "^1.0.13-alpha.0",
     "@cntrl-site/effects": "^1.4.2",
-    "@cntrl-site/sdk": "^1.27.2",
+    "@cntrl-site/sdk": "^1.28.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/Article.tsx

@@ -9,6 +9,7 @@ import { ArticleWrapper } from './ArticleWrapper';
 import { InteractionsProvider } from '../provider/InteractionsContext';
 import { WebglContextManagerContext } from '../provider/WebGLContextManagerContext';
 import { WebGLContextManager } from '@cntrl-site/effects';
+import { StructuredContent } from './StructuredContent/StructuredContent';
 
 interface Props {
   article: TArticle;
@@ -41,24 +42,17 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
                 const data = section.name ? sectionData[section.name] : {};
                 return (
                   <Section
+                    articleHeight={articleHeight}
                     section={section}
                     key={section.id}
                     data={data}
                     zIndex={sectionsLength - i}
-                  >
-                    {article.sections[i].items.map(item => (
-                      <Item
-                        item={item}
-                        key={item.id}
-                        sectionId={section.id}
-                        articleHeight={articleHeight}
-                      />
-                    ))}
-                  </Section>
+                  />
                 );
               })}
             </WebglContextManagerContext.Provider>
             <div id="component-portal" />
+            <div id="grid-component-lightbox-portal" />
           </div>
         </ArticleWrapper>
         <JSXStyle id={id}>{`

package/src/components/Section/Section.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement, useId, useRef, useMemo } from 'react';
+import React, { FC, ReactElement, useId, useRef, useMemo, useState, useEffect, PropsWithChildren } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   getLayoutMediaQuery,
@@ -14,27 +14,33 @@ import { useLayoutContext } from '../useLayoutContext';
 import { SectionVideo } from './SectionVideo';
 import { SectionImage } from './SectionImage';
 import { isOverflowClipSupported } from '../../utils/checkOverflowClipSupport';
+import { StructuredContent } from '../StructuredContent/StructuredContent';
+import { Item } from '../items/Item';
 
-type SectionChild = ReactElement<any, any>;
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 
 interface Props {
   section: TSection;
-  children: SectionChild[];
   zIndex: number;
   data?: any;
+  articleHeight: number;
 }
 
-export const Section: FC<Props> = ({ section, data, children, zIndex }) => {
+export const Section: FC<PropsWithChildren<Props>> = ({ section, data, zIndex, articleHeight }) => {
   const reactId = useId();
   const id = `${reactId}-section-${section.id}`;
   const sectionRef = useRef<HTMLDivElement | null>(null);
   const { layouts, customSections } = useCntrlContext();
   const layout = useLayoutContext();
-  const layoutValues: Record<string, any>[] = [section.height, section.color, section.media ?? {}];
+  const [sectionHeight, setSectionHeight] = useState(0);
+  const layoutValues: Record<string, any>[] = [
+    section.minHeight,
+    section.color,
+    section.media ?? {}
+  ];
+
   const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
   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 = useMemo(() => {
@@ -62,6 +68,32 @@ export const Section: FC<Props> = ({ section, data, children, zIndex }) => {
       }, '');
   };
 
+  useEffect(() => {
+    if (!sectionRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      const [entry] = entries;
+      const height = entry.contentRect.height;
+      setSectionHeight(height);
+    });
+    observer.observe(sectionRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  const children = (
+    <>
+      <StructuredContent section={section} />
+      {section.items.map(item => (
+        <Item
+          sectionHeight={sectionHeight}
+          item={item}
+          key={item.id}
+          sectionId={section.id}
+          articleHeight={articleHeight}
+        />
+      ))}
+    </>
+  );
+
   if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
 
   return (
@@ -79,7 +111,7 @@ export const Section: FC<Props> = ({ section, data, children, zIndex }) => {
               className={`section-background-wrapper-${section.id}`}
               style={{
                 transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset',
-                ...(sectionHeight && { height: media.position === 'fixed' ? `calc(${getSectionHeight(sectionHeight)} + 200vh)` : getSectionHeight(sectionHeight) })
+                ...(sectionHeight && { height: media.position === 'fixed' ? `calc(${sectionHeight}px + 200vh)` : `${sectionHeight}px` })
               }}
             >
               {media.type === 'video' && (
@@ -97,14 +129,14 @@ export const Section: FC<Props> = ({ section, data, children, zIndex }) => {
       ${
     getLayoutStyles(layouts, layoutValues, ([height, color, media]) => (`
          .section-${section.id} {
-            height: ${getSectionHeight(height)};
+            min-height: ${getSectionHeight(height)};
             position: relative;
             background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
          }
          .section-background-overlay-${section.id} {
-            height: ${getSectionHeight(height)};
+            height: 100%;
             width: 100%;
-            position: relative;
+            position: absolute;
             overflow: clip;
          }
          .section-background-wrapper-${section.id} {

package/src/components/StructuredBlockItem/StructuredBlockItem.tsx

@@ -0,0 +1,69 @@
+import { getLayoutStyles, StructuredBlockAny, StructuredBlockType } from '@cntrl-site/sdk';
+import { ComponentType, FC, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { parseSizing } from '../items/useSizing';
+import { StructuredComponent } from './StructuredComponent/StructuredComponent';
+
+export interface StructuredBlockItemProps<I extends StructuredBlockAny> {
+  block: I;
+}
+
+interface Props {
+  block: StructuredBlockAny;
+  maxWidthMap: Record<string, number>;
+}
+
+const noop = () => null;
+
+const itemsMap: Record<StructuredBlockType, ComponentType<StructuredBlockItemProps<any>>> = {
+  [StructuredBlockType.Component]: StructuredComponent,
+  [StructuredBlockType.RichText]: noop,
+  [StructuredBlockType.Image]: noop,
+  [StructuredBlockType.VimeoEmbed]: noop,
+  [StructuredBlockType.YoutubeEmbed]: noop,
+};
+
+export const StructuredBlockItem: FC<Props> = ({ block, maxWidthMap }) => {
+  const reactId = useId();
+  const id = `${reactId}-item-${block.id}`;
+  const { layouts } = useCntrlContext();
+  const layoutValues: Record<string, any>[] = [block.area, block.layoutParams, block.hidden ?? {}, maxWidthMap];
+  const ItemComponent = itemsMap[block.type] || noop;
+  return (
+    <div
+      className={`structured-block-item-${block.id}`}
+    >
+      <ItemComponent block={block} />
+      <JSXStyle id={id}>{`
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hidden, maxWidth]) => {
+          const sizingAxis = parseSizing(layoutParams.sizing);
+          return (`
+                .structured-block-item-${block.id} {
+                  display: ${hidden ? 'none' : 'block'};
+                  align-self: ${getAlignSelf(area.alignment ?? 'center')};
+                  width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth ?? 'max-content'};
+                  height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
+                  padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
+                  outline: none;
+                  left: ${(area.horizontalOffset ?? 0) * 100}vw;
+                  position: relative;
+                }
+              `);
+          })}
+        `}
+      </JSXStyle>
+    </div>
+  );
+};
+
+function getAlignSelf(alignment: 'left' | 'center' | 'right') {
+  switch (alignment) {
+    case 'left':
+      return 'start';
+    case 'right':
+      return 'end';
+    default:
+      return 'center';
+  }
+}

package/src/components/StructuredBlockItem/StructuredComponent/StructuredComponent.tsx

@@ -0,0 +1,66 @@
+import JSXStyle from 'styled-jsx/style';
+import { StructuredBlock, StructuredBlockType, getLayoutStyles } from '@cntrl-site/sdk';
+import { FC, useState } from 'react';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+
+interface Props {
+  block: StructuredBlock<StructuredBlockType.Component>;
+}
+
+export const StructuredComponent: FC<Props> = ({ block }) => {
+  const sdk = useCntrlContext();
+  const { layouts } = sdk;
+  const layout = useLayoutContext();
+  const fallbackLayout = layouts[0]?.id;
+  const effectiveLayout = layout ?? fallbackLayout;
+  const layoutValues: Record<string, any>[] = [block.layoutParams];
+  const component = sdk.getComponent(block.commonParams.componentId);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useItemGeometry(block.id, ref);
+  const Element = component ? component.element : undefined;
+  const layoutParameters = effectiveLayout ? block.layoutParams[effectiveLayout]?.parameters : undefined;
+  const commonParameters = block.commonParams.parameters;
+  const parameters = layoutParameters ? {
+    ...layoutParameters,
+    settings: { ...layoutParameters.settings, ...commonParameters?.settings }
+  } : undefined;
+
+  return (
+    <>
+      <div
+        className={`custom-component-${block.id}`}
+        ref={setRef}
+      >
+        {parameters && Element && (
+          <Element
+            metadata={{
+              itemId: block.id,
+              submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
+            }}
+            portalId="component-portal"
+            content={block.commonParams.content}
+            {...parameters}
+          />
+        )}
+      </div>
+      <JSXStyle id={block.id}>{`
+      .custom-component-${block.id} {
+        width: 100%;
+        height: 100%;
+        pointer-events: auto;
+      }
+      ${getLayoutStyles(layouts, layoutValues, ([layoutParams]) => {
+      return (`
+          .custom-component-${block.id} {
+            opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+        `);
+    })}`}
+      </JSXStyle>
+    </>
+  );
+};

package/src/components/StructuredContent/StructuredContent.tsx

@@ -0,0 +1,42 @@
+import { getLayoutStyles, Section } from '@cntrl-site/sdk';
+import { FC, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { StructuredBlockItem } from '../StructuredBlockItem/StructuredBlockItem';
+
+interface Props {
+  section: Section;
+}
+
+export const StructuredContent: FC<Props> = ({ section }) => {
+  const reactId = useId();
+  const id = `${reactId}-structured-content-${section.id}`;
+  const { layouts } = useCntrlContext();
+  const structuredContentLength = section.structuredContent.length;
+  const defaultWidthRecord = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
+  const layoutValues: Record<string, any>[] = [section.structuredContentSettings.paddingBottom, defaultWidthRecord];
+  if (structuredContentLength === 0) return null;
+  return (
+    <div className={`structured-content-${section.id}`}>
+      {section.structuredContent.map(block => (
+        <StructuredBlockItem block={block} key={block.id} maxWidthMap={defaultWidthRecord} />
+      ))}
+      <JSXStyle id={id}>
+        {`
+          ${getLayoutStyles(layouts, layoutValues, ([paddingBottom, defaultWidth]) => {
+            return (`
+              .structured-content-${section.id} {
+                padding-bottom: ${paddingBottom * 100}vw;
+                max-width: ${defaultWidth < 1 ? `${defaultWidth * 100}vw` : 'unset'};
+                display: flex;
+                flex-direction: column;
+                margin: 0 auto;
+                width: 100%;
+              }
+            `);
+          })}
+        `}
+      </JSXStyle>
+    </div>
+  );
+};

package/src/components/items/Item.tsx

@@ -52,6 +52,7 @@ export interface ItemWrapperProps {
   item: ItemAny;
   sectionId: string;
   articleHeight?: number;
+  sectionHeight?: number;
   isInGroup?: boolean;
   isParentVisible?: boolean;
 }
@@ -63,7 +64,7 @@ const stickyFix = `
 
 const noop = () => null;
 
-export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
+export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false, sectionHeight = 0 }) => {
   const itemWrapperRef = useRef<HTMLDivElement | null>(null);
   const itemInnerRef = useRef<HTMLDivElement | null>(null);
   const rectObserver = useContext(ArticleRectContext);
@@ -100,7 +101,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
     height: innerStateProps?.styles?.height as number
   });
   const sectionHeightLayoutMap = useSectionHeightData(sectionId);
-  const sectionHeight = layout && sectionHeightLayoutMap[layout] ? sectionHeightLayoutMap[layout] : '0';
   const stickyTop = useStickyItemTop(item, sectionId, wrapperStateProps?.styles?.top as number);
   const layoutValues: Record<string, any>[] = [item.area, item.hidden];
   layoutValues.push(item.sticky);
@@ -177,7 +177,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
         className={`item-${item.id}`}
         style={{
           opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
-          top: sticky ? getAnchoredItemTop(stickyTop, sectionHeight, anchorSide) : 0,
+          top: sticky ? getAnchoredItemTop(stickyTop, `${sectionHeight}px`, anchorSide) : 0,
           height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
         }}
       >

package/src/interactions/InteractionsRegistry.ts

@@ -5,9 +5,10 @@ import {
   Interaction,
   InteractionItemTrigger,
   ItemAny,
+  InteractionItemScrollTrigger,
+  InteractionScrollTrigger,
 } from '@cntrl-site/sdk';
 import { isItemType } from '../utils/isItemType';
-import { InteractionItemScrollTrigger, InteractionScrollTrigger } from '@cntrl-site/sdk/lib/types/article/Interaction';
 import { ItemGeometryService } from '../ItemGeometry/ItemGeometryService';
 
 export class InteractionsRegistry implements InteractionsRegistryPort {

package/src/provider/CntrlSdkContext.ts

@@ -86,7 +86,7 @@ export class CntrlSdkContext {
 
   setSectionsHeight(sections: Section[]) {
     for (const section of sections) {
-      this.sectionHeightMap.set(section.id, section.height);
+      this.sectionHeightMap.set(section.id, section.minHeight);
     }
   }