@cntrl-site/sdk-nextjs 0.12.0 → 0.12.2

package/lib/components/Item.js

@@ -18,10 +18,10 @@ const CustomItem_1 = require("./items/CustomItem");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
 const useItemPosition_1 = require("./useItemPosition");
 const useItemDimensions_1 = require("./useItemDimensions");
-const useItemSticky_1 = require("./items/useItemSticky");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const useItemScale_1 = require("./useItemScale");
 const ScaleAnchorMap_1 = require("../utils/ScaleAnchorMap");
+const useSectionHeightMap_1 = require("./useSectionHeightMap");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -35,13 +35,16 @@ const noop = () => null;
 const Item = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
-    const position = (0, useItemPosition_1.useItemPosition)(item, sectionId);
+    const { top, left } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
+    const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
     const layout = (0, useCurrentLayout_1.useCurrentLayout)();
-    const { top, isFixed } = (0, useItemSticky_1.useItemSticky)(position.top, item, sectionId);
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
     const layoutValues = [item.area];
     const isInitialRef = (0, react_1.useRef)(true);
+    layoutValues.push(item.sticky);
+    layoutValues.push(sectionHeight);
     if (item.layoutParams) {
         layoutValues.push(item.layoutParams);
     }
@@ -50,37 +53,65 @@ const Item = ({ item, sectionId }) => {
         : undefined;
     const sizingAxis = parseSizing(sizing);
     const ItemComponent = itemsMap[item.type] || noop;
+    const handleItemResize = (height) => {
+        const sticky = item.sticky[layout];
+        if (!sticky) {
+            setWrapperHeight(undefined);
+            return;
+        }
+        const wrapperHeight = getStickyItemWrapperHeight(sticky, height);
+        setWrapperHeight(wrapperHeight);
+    };
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
     const styles = {
         transform: `scale(${scale})`,
         transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor],
-        left: `${position.left * 100}vw`,
         width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
-        top
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, style: { top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }, children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`
            .item-${item.id} {
-              position: absolute;
-              z-index: ${area.zIndex};
-              top: ${(0, useItemSticky_1.getItemTopStyle)(area.top, area.anchorSide)};
-              left: ${area.left * 100}vw;
+              position: ${sticky ? 'sticky' : 'absolute'};
               width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
-              height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'unset'};
-              z-index: ${area.zIndex};
+              height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `w${area.height * 100}vw` : 'unset'};
               transform: scale(${scale});
+              top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              pointer-events: auto;
+              --webkit-backface-visibility: hidden;
+            }
+            .item-wrapper-${item.id} {
+              position: absolute;
+              z-index: ${area.zIndex};
+              pointer-events: none;
+              top: ${(0, useItemPosition_1.getItemTopStyle)(area.top, area.anchorSide)};
+              left: ${area.left * 100}vw;
+              height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height) * 100}vw` : 'unset'};
             }
           `);
                 })}
       ` })] }));
 };
 exports.Item = Item;
+function getAnchoredItemTop(top, sectionHeight, anchorSide) {
+    const styleTop = `${top * 100}vw`;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Center: return `calc(${styleTop} + ${sectionHeight} / 2)`;
+        case sdk_1.AnchorSide.Bottom: return `calc(${styleTop} + ${sectionHeight})`;
+        case sdk_1.AnchorSide.Top:
+        default:
+            return styleTop;
+    }
+}
+function getStickyItemWrapperHeight(sticky, itemHeight) {
+    const end = sticky.to ?? 100;
+    return end - sticky.from + itemHeight;
+}
 function parseSizing(sizing = 'manual') {
     const axisSizing = sizing.split(' ');
     return {

package/lib/components/Section.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Section = void 0;
+exports.getSectionHeight = exports.Section = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
@@ -54,3 +54,4 @@ function getSectionHeight(heightData) {
         return `${units * 100}vw`;
     return '0';
 }
+exports.getSectionHeight = getSectionHeight;

package/lib/components/items/RectangleItem.js

@@ -15,22 +15,34 @@ const RectangleItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor).toCss(), [fillColor]);
-    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+    const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor), [fillColor]);
+    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, style: {
-                        backgroundColor: `${backgroundColor}`,
+                        backgroundColor: `${backgroundColor.toCss()}`,
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
-                        borderColor: `${borderColor}`,
+                        borderColor: `${borderColor.toCss()}`,
                         transform: `rotate(${angle}deg)`
                     } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-         .rectangle-${item.id} {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            border-style: solid;
-            box-sizing: border-box;
+        @supports (color: oklch(42% 0.3 90 / 1)) {
+          .rectangle-${item.id} {
+            background-color: ${backgroundColor.fmt('oklch')};
+            border-color: ${borderColor.fmt('oklch')};
           }
+        }
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .rectangle-${item.id} {
+            background-color: ${backgroundColor.fmt('rgba')};
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
+        .rectangle-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border-style: solid;
+          box-sizing: border-box;
+        }
       ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;

package/lib/components/items/RichTextItem.js

@@ -5,14 +5,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
 const useItemAngle_1 = require("../useItemAngle");
-const RichTextItem = ({ item, sectionId }) => {
+const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
+    const [ref, setRef] = (0, react_1.useState)(null);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const className = preset ? `cntrl-preset-${preset.id}` : undefined;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: className, style: {
+    (0, react_1.useEffect)(() => {
+        if (!ref || !onResize)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const [entry] = entries;
+            onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+        });
+        observer.observe(ref);
+        return () => {
+            observer.unobserve(ref);
+        };
+    }, [ref, onResize]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: className, style: {
                     transform: `rotate(${angle}deg)`
                 }, children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
 };

package/lib/components/useItemPosition.js

@@ -1,11 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useItemPosition = void 0;
+exports.getItemTopStyle = exports.useItemPosition = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const useItemPosition = (item, sectionId) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const { top, left } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => item.area[layoutId], (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
-    return { top, left };
+    return {
+        top: getItemTopStyle(top, item.area[layoutId].anchorSide),
+        left: `${left * 100}vw`
+    };
 };
 exports.useItemPosition = useItemPosition;
+function getItemTopStyle(top, anchorSide) {
+    const defaultValue = `${top * 100}vw`;
+    if (!anchorSide)
+        return defaultValue;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Top:
+            return defaultValue;
+        case sdk_1.AnchorSide.Center:
+            return `calc(50% + ${top * 100}vw)`;
+        case sdk_1.AnchorSide.Bottom:
+            return `calc(100% + ${top * 100}vw)`;
+    }
+}
+exports.getItemTopStyle = getItemTopStyle;

package/lib/components/useSectionHeightMap.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSectionHeightMap = exports.useSectionHeightData = void 0;
+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);
+};
+exports.useSectionHeightData = useSectionHeightData;
+function getSectionHeightMap(sectionHeight) {
+    return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, (0, Section_1.getSectionHeight)(heightData)]));
+}
+exports.getSectionHeightMap = getSectionHeightMap;
+function getDefaultHeightData(layouts) {
+    return layouts.reduce((acc, layout) => ({ ...acc, [layout.id]: '0' }), {});
+}

package/lib/provider/CntrlSdkContext.js

@@ -6,6 +6,7 @@ class CntrlSdkContext {
         this.customItems = customItems;
         this.customSections = customSections;
         this._layouts = [];
+        this.sectionHeightMap = new Map();
     }
     async resolveSectionData(sections) {
         const resolvers = sections.map(section => {
@@ -19,12 +20,26 @@ class CntrlSdkContext {
         }).filter(isDefined);
         return Object.fromEntries(await Promise.all(resolvers.map(async ({ name, resolver }) => [name, await resolver()])));
     }
+    init({ project, typePresets, article }) {
+        this.setTypePresets(typePresets);
+        this.setLayouts(project.layouts);
+        this.setSectionsHeight(article.sections);
+    }
     setTypePresets(typePresets) {
         this._typePresets = typePresets;
     }
     setLayouts(layouts) {
         this._layouts = layouts;
     }
+    setSectionsHeight(sections) {
+        for (const section of sections) {
+            this.sectionHeightMap.set(section.id, section.height);
+        }
+    }
+    getSectionHeightData(sectionId) {
+        const sectionHeightData = this.sectionHeightMap.get(sectionId);
+        return sectionHeightData;
+    }
     get layouts() {
         return this._layouts;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^1.1.1",
+    "@cntrl-site/sdk": "^1.1.3",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },

package/src/components/Item.tsx

@@ -1,11 +1,14 @@
-import { ComponentType, FC, useEffect, useId, useRef } from 'react';
+import { ComponentType, FC, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
+  AnchorSide,
   ArticleItemSizingType as SizingType,
   ArticleItemType,
   getLayoutStyles,
   TArticleItem,
-  TArticleItemAny
+  TStickyParams,
+  TArticleItemAny,
+
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
@@ -15,16 +18,17 @@ import { VimeoEmbedItem } from './items/VimeoEmbed';
 import { YoutubeEmbedItem } from './items/YoutubeEmbed';
 import { CustomItem } from './items/CustomItem';
 import { useCntrlContext } from '../provider/useCntrlContext';
-import { useItemPosition } from './useItemPosition';
+import { getItemTopStyle, useItemPosition } from './useItemPosition';
 import { useItemDimensions } from './useItemDimensions';
-import { getItemTopStyle, useItemSticky } from './items/useItemSticky';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 import { useItemScale } from './useItemScale';
 import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
+import { useSectionHeightData } from './useSectionHeightMap';
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
   sectionId: string;
+  onResize?: (height: number) => void;
 }
 
 const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
@@ -42,13 +46,16 @@ const noop = () => null;
 export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const id = useId();
   const { layouts } = useCntrlContext();
+  const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
-  const position = useItemPosition(item, sectionId);
+  const { top, left } = useItemPosition(item, sectionId);
+  const sectionHeight = useSectionHeightData(sectionId);
   const layout = useCurrentLayout();
-  const { top, isFixed } = useItemSticky(position.top, item, sectionId);
   const { width, height } = useItemDimensions(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area];
   const isInitialRef = useRef(true);
+  layoutValues.push(item.sticky);
+  layoutValues.push(sectionHeight);
   if (item.layoutParams) {
     layoutValues.push(item.layoutParams);
   }
@@ -59,6 +66,16 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const sizingAxis = parseSizing(sizing);
   const ItemComponent = itemsMap[item.type] || noop;
 
+  const handleItemResize = (height: number) => {
+    const sticky = item.sticky[layout];
+    if (!sticky) {
+      setWrapperHeight(undefined);
+      return;
+    }
+    const wrapperHeight = getStickyItemWrapperHeight(sticky, height)
+    setWrapperHeight(wrapperHeight);
+  };
+
   useEffect(() => {
     isInitialRef.current = false;
   }, []);
@@ -66,41 +83,66 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const styles = {
     transform: `scale(${scale})`,
     transformOrigin: ScaleAnchorMap[scaleAnchor],
-    left: `${position.left * 100}vw`,
     width: `${sizingAxis.x === SizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
     height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
-    top
   };
 
   return (
-    <div
-      suppressHydrationWarning={true}
-      className={`item-${item.id}`}
-      style={isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed': 'absolute' } }
+    <div className={`item-wrapper-${item.id}`}
+      style={{ top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }}
     >
-      <ItemComponent item={item} sectionId={sectionId} />
+      <div
+        suppressHydrationWarning={true}
+        className={`item-${item.id}`}
+        style={isInitialRef.current ? {} : styles }
+      >
+        <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
+      </div>
       <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-          const sizingAxis = parseSizing(layoutParams.sizing);
-          return (`
+        ${getLayoutStyles(layouts, layoutValues, ([area, sticky, sectionHeight, layoutParams]) => {
+        const sizingAxis = parseSizing(layoutParams.sizing);
+        return (`
            .item-${item.id} {
+              position: ${sticky ? 'sticky' : 'absolute'};
+              width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
+              height: ${sizingAxis.y === SizingType.Manual ? `w${area.height * 100}vw` : 'unset'};
+              transform: scale(${scale});
+              top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}`  : 0};
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              pointer-events: auto;
+              --webkit-backface-visibility: hidden;
+            }
+            .item-wrapper-${item.id} {
               position: absolute;
               z-index: ${area.zIndex};
+              pointer-events: none;
               top: ${getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
-              height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'unset'};
-              z-index: ${area.zIndex};
-              transform: scale(${scale});
-              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height) * 100}vw` : 'unset'};
             }
           `);
-        })}
+      })}
       `}</JSXStyle>
     </div>
   );
 };
 
+function getAnchoredItemTop(top: number, sectionHeight: string, anchorSide: AnchorSide) {
+  const styleTop = `${top * 100}vw`;
+  switch (anchorSide) {
+    case AnchorSide.Center: return `calc(${styleTop} + ${sectionHeight} / 2)`;
+    case AnchorSide.Bottom: return `calc(${styleTop} + ${sectionHeight})`;
+    case AnchorSide.Top:
+    default:
+      return styleTop;
+  }
+}
+
+function getStickyItemWrapperHeight(sticky: TStickyParams, itemHeight: number): number {
+  const end = sticky.to ?? 100;
+  return end - sticky.from + itemHeight;
+}
+
 function parseSizing(sizing: string = 'manual'): Axis {
   const axisSizing = sizing.split(' ');
   return {

package/src/components/Section.tsx

@@ -70,7 +70,7 @@ export const Section: FC<Props> = ({ section, data, children }) => {
   );
 };
 
-function getSectionHeight(heightData: TSectionHeight): string {
+export function getSectionHeight(heightData: TSectionHeight): string {
   const { units, vhUnits, mode } = heightData;
   if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
   if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;

package/src/components/items/RectangleItem.tsx

@@ -10,29 +10,41 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
   const id = useId();
   const { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
-  const backgroundColor = useMemo(() => CntrlColor.parse(fillColor).toCss(), [fillColor]);
-  const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+  const backgroundColor = useMemo(() => CntrlColor.parse(fillColor), [fillColor]);
+  const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
 
   return (
     <LinkWrapper url={item.link?.url}>
       <>
-        <div className={`rectangle-${item.id}`}
+        <div  className={`rectangle-${item.id}`}
           style={{
-            backgroundColor: `${backgroundColor}`,
+            backgroundColor: `${backgroundColor.toCss()}`,
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
-            borderColor: `${borderColor}`,
+            borderColor: `${borderColor.toCss()}`,
             transform: `rotate(${angle}deg)`
           }}
         />
         <JSXStyle id={id}>{`
-         .rectangle-${item.id} {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            border-style: solid;
-            box-sizing: border-box;
+        @supports (color: oklch(42% 0.3 90 / 1)) {
+          .rectangle-${item.id} {
+            background-color: ${backgroundColor.fmt('oklch')};
+            border-color: ${borderColor.fmt('oklch')};
           }
+        }
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .rectangle-${item.id} {
+            background-color: ${backgroundColor.fmt('rgba')};
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
+        .rectangle-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border-style: solid;
+          box-sizing: border-box;
+        }
       `}</JSXStyle>
       </>
     </LinkWrapper>

package/src/components/items/RichTextItem.tsx

@@ -1,17 +1,32 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
 import { useItemAngle } from '../useItemAngle';
 
-export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId }) => {
+export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles, preset] = useRichTextItem(item);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const angle = useItemAngle(item, sectionId);
   const className = preset ? `cntrl-preset-${preset.id}` : undefined;
+
+  useEffect(() => {
+    if (!ref || !onResize) return;
+    const observer = new ResizeObserver((entries) => {
+      const [entry] = entries;
+      onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+    });
+    observer.observe(ref);
+    return () => {
+      observer.unobserve(ref);
+    };
+  }, [ref, onResize]);
+
   return (
     <>
       <div
+        ref={setRef}
         className={className}
         style={{
           transform: `rotate(${angle}deg)`

package/src/components/useItemPosition.ts

@@ -1,4 +1,4 @@
-import { TArticleItemAny } from '@cntrl-site/sdk';
+import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 
@@ -11,6 +11,23 @@ export const useItemPosition = (item: TArticleItemAny, sectionId: string) => {
     sectionId,
     [layoutId]
   );
-  return { top, left };
+  return {
+    top:  getItemTopStyle(top, item.area[layoutId].anchorSide),
+    left: `${left * 100}vw`
+  };
 };
 
+export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
+  const defaultValue = `${top * 100}vw`;
+  if (!anchorSide) return defaultValue;
+  switch (anchorSide) {
+    case AnchorSide.Top:
+      return defaultValue;
+    case AnchorSide.Center:
+      return `calc(50% + ${top * 100}vw)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw)`;
+  }
+}
+
+

package/src/components/useSectionHeightMap.ts

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import { CntrlContext } from '../provider/CntrlContext';
+import { TLayout, TSectionHeight } from '@cntrl-site/sdk';
+import { getSectionHeight } from './Section';
+
+export const useSectionHeightData = (sectionId: string): Record<string, string> => {
+  const sectionHeightContext = useContext(CntrlContext);
+  const layouts = sectionHeightContext.layouts;
+  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
+  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
+};
+
+export function getSectionHeightMap(sectionHeight: Record<string, TSectionHeight>): Record<string, string> {
+  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
+}
+
+function getDefaultHeightData(layouts: TLayout[]) {
+  return layouts.reduce((acc, layout) => ({...acc, [layout.id]: '0'}), {});
+}

package/src/provider/CntrlSdkContext.ts

@@ -1,10 +1,17 @@
 import { CustomItemRegistry } from './CustomItemRegistry';
-import { TArticleSection, TLayout, TTypePresets } from '@cntrl-site/sdk';
+import { TArticle, TArticleSection, TLayout, TProject, TSectionHeight, TTypePresets } from '@cntrl-site/sdk';
 import { CustomSectionRegistry } from './CustomSectionRegistry';
 
+interface SdkContextInitProps {
+  typePresets: TTypePresets;
+  project: TProject;
+  article: TArticle;
+}
+
 export class CntrlSdkContext {
   private _typePresets?: TTypePresets;
   private _layouts: TLayout[] = [];
+  private sectionHeightMap: Map<string, Record<string, TSectionHeight>> = new Map();
   constructor(
     public readonly customItems: CustomItemRegistry,
     public readonly customSections: CustomSectionRegistry
@@ -24,6 +31,12 @@ export class CntrlSdkContext {
     );
   }
 
+  init({ project, typePresets, article }: SdkContextInitProps) {
+    this.setTypePresets(typePresets);
+    this.setLayouts(project.layouts);
+    this.setSectionsHeight(article.sections);
+  }
+
   setTypePresets(typePresets: TTypePresets) {
     this._typePresets = typePresets;
   }
@@ -32,6 +45,17 @@ export class CntrlSdkContext {
     this._layouts = layouts;
   }
 
+  setSectionsHeight(sections: TArticleSection[]) {
+    for (const section of sections) {
+      this.sectionHeightMap.set(section.id, section.height)
+    }
+  }
+
+  getSectionHeightData(sectionId: string) {
+    const sectionHeightData = this.sectionHeightMap.get(sectionId);
+    return sectionHeightData;
+  }
+
   get layouts(): TLayout[] {
     return this._layouts;
   }

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -71,7 +71,7 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     this.setScroll(scroll / this.articleWidth);
   };
 
-  private handleResize (){
+  private handleResize() {
     if (!this.parent) return;
     const parentBoundary = this.parent.getBoundingClientRect();
     this.articleWidth = parentBoundary.width;

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,10 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
-      <Languages>
-        <language minSize="304" name="TypeScript" />
-      </Languages>
-    </inspection_tool>
-  </profile>
-</component>

package/.idea/workspace.xml

@@ -1,427 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="AutoImportSettings">
-    <option name="autoReloadType" value="SELECTIVE" />
-  </component>
-  <component name="ChangeListManager">
-    <list default="true" id="daade3cc-2214-4d1b-a6ad-012b8ae407bf" name="Changes" comment="CNTRL-1039: code fix" />
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="Git.Settings">
-    <option name="RECENT_BRANCH_BY_REPOSITORY">
-      <map>
-        <entry key="$PROJECT_DIR$" value="main" />
-      </map>
-    </option>
-    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-  </component>
-  <component name="MarkdownSettingsMigration">
-    <option name="stateVersion" value="1" />
-  </component>
-  <component name="ProjectId" id="2H4nx2LrD2TTrbJMopYKifu02PK" />
-  <component name="ProjectViewState">
-    <option name="hideEmptyMiddlePackages" value="true" />
-    <option name="showLibraryContents" value="true" />
-  </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
-    &quot;last_opened_file_path&quot;: &quot;/Users/admin/Documents/CNTRL/sdk-nextjs&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;/Users/admin/Documents/CNTRL/sdk-nextjs/node_modules/typescript/lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
-  }
-}</component>
-  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="daade3cc-2214-4d1b-a6ad-012b8ae407bf" name="Changes" comment="" />
-      <created>1667553465933</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1667553465933</updated>
-      <workItem from="1667553467855" duration="59000" />
-      <workItem from="1667577252000" duration="8061000" />
-      <workItem from="1667926766782" duration="2182000" />
-      <workItem from="1668162212487" duration="28710000" />
-      <workItem from="1669397663981" duration="8121000" />
-      <workItem from="1669630429786" duration="5568000" />
-      <workItem from="1669712625667" duration="100000" />
-      <workItem from="1670846885306" duration="14667000" />
-      <workItem from="1670922174491" duration="24668000" />
-      <workItem from="1683273070032" duration="33669000" />
-      <workItem from="1685023468162" duration="174000" />
-      <workItem from="1685024252092" duration="9689000" />
-      <workItem from="1685346557713" duration="1029000" />
-      <workItem from="1685951123113" duration="73662000" />
-    </task>
-    <task id="LOCAL-00001" summary="CNTRL-484 - added embed vimeo video">
-      <created>1667586762678</created>
-      <option name="number" value="00001" />
-      <option name="presentableId" value="LOCAL-00001" />
-      <option name="project" value="LOCAL" />
-      <updated>1667586762678</updated>
-    </task>
-    <task id="LOCAL-00002" summary="CNTRL-484 - problem fix">
-      <created>1667587045426</created>
-      <option name="number" value="00002" />
-      <option name="presentableId" value="LOCAL-00002" />
-      <option name="project" value="LOCAL" />
-      <updated>1667587045426</updated>
-    </task>
-    <task id="LOCAL-00003" summary="CNTRL-484 - version bump">
-      <created>1667587257510</created>
-      <option name="number" value="00003" />
-      <option name="presentableId" value="LOCAL-00003" />
-      <option name="project" value="LOCAL" />
-      <updated>1667587257510</updated>
-    </task>
-    <task id="LOCAL-00004" summary="CNTRL-486 - added youtube item">
-      <created>1668184730139</created>
-      <option name="number" value="00004" />
-      <option name="presentableId" value="LOCAL-00004" />
-      <option name="project" value="LOCAL" />
-      <updated>1668184730139</updated>
-    </task>
-    <task id="LOCAL-00005" summary="CNTRL-486 - added youtube type">
-      <created>1668185842201</created>
-      <option name="number" value="00005" />
-      <option name="presentableId" value="LOCAL-00005" />
-      <option name="project" value="LOCAL" />
-      <updated>1668185842201</updated>
-    </task>
-    <task id="LOCAL-00006" summary="CNTRL-486 - youtube fixes">
-      <created>1668193338566</created>
-      <option name="number" value="00006" />
-      <option name="presentableId" value="LOCAL-00006" />
-      <option name="project" value="LOCAL" />
-      <updated>1668193338566</updated>
-    </task>
-    <task id="LOCAL-00007" summary="CNTRL-486 - added mute to video when autoplay On">
-      <created>1668504184323</created>
-      <option name="number" value="00007" />
-      <option name="presentableId" value="LOCAL-00007" />
-      <option name="project" value="LOCAL" />
-      <updated>1668504184323</updated>
-    </task>
-    <task id="LOCAL-00008" summary="CNTRL-486 - added search params to Url">
-      <created>1668506131079</created>
-      <option name="number" value="00008" />
-      <option name="presentableId" value="LOCAL-00008" />
-      <option name="project" value="LOCAL" />
-      <updated>1668506131079</updated>
-    </task>
-    <task id="LOCAL-00009" summary="CNTRL-486 - version update">
-      <created>1668508864371</created>
-      <option name="number" value="00009" />
-      <option name="presentableId" value="LOCAL-00009" />
-      <option name="project" value="LOCAL" />
-      <updated>1668508864371</updated>
-    </task>
-    <task id="LOCAL-00010" summary="CNTRL-486 - version bump">
-      <created>1668509275485</created>
-      <option name="number" value="00010" />
-      <option name="presentableId" value="LOCAL-00010" />
-      <option name="project" value="LOCAL" />
-      <updated>1668509275485</updated>
-    </task>
-    <task id="LOCAL-00011" summary="CNTRL-486 - version bump">
-      <created>1668509525445</created>
-      <option name="number" value="00011" />
-      <option name="presentableId" value="LOCAL-00011" />
-      <option name="project" value="LOCAL" />
-      <updated>1668509525445</updated>
-    </task>
-    <task id="LOCAL-00012" summary="CNTRL-486 - fixes">
-      <created>1669397733023</created>
-      <option name="number" value="00012" />
-      <option name="presentableId" value="LOCAL-00012" />
-      <option name="project" value="LOCAL" />
-      <updated>1669397733023</updated>
-    </task>
-    <task id="LOCAL-00013" summary="CNTRL-486 - fixes">
-      <created>1669402876183</created>
-      <option name="number" value="00013" />
-      <option name="presentableId" value="LOCAL-00013" />
-      <option name="project" value="LOCAL" />
-      <updated>1669402876183</updated>
-    </task>
-    <task id="LOCAL-00014" summary="CNTRL-486 - fixes">
-      <created>1669402893251</created>
-      <option name="number" value="00014" />
-      <option name="presentableId" value="LOCAL-00014" />
-      <option name="project" value="LOCAL" />
-      <updated>1669402893251</updated>
-    </task>
-    <task id="LOCAL-00015" summary="CNTRL-486 - fixes">
-      <created>1669405389296</created>
-      <option name="number" value="00015" />
-      <option name="presentableId" value="LOCAL-00015" />
-      <option name="project" value="LOCAL" />
-      <updated>1669405389296</updated>
-    </task>
-    <task id="LOCAL-00016" summary="CNTRL-486 - fixes">
-      <created>1669405966077</created>
-      <option name="number" value="00016" />
-      <option name="presentableId" value="LOCAL-00016" />
-      <option name="project" value="LOCAL" />
-      <updated>1669405966077</updated>
-    </task>
-    <task id="LOCAL-00017" summary="CNTRL-486 - version bump">
-      <created>1669408571358</created>
-      <option name="number" value="00017" />
-      <option name="presentableId" value="LOCAL-00017" />
-      <option name="project" value="LOCAL" />
-      <updated>1669408571358</updated>
-    </task>
-    <task id="LOCAL-00018" summary="CNTRL-617 Youtube anf vimeo videos Url update">
-      <created>1669635492235</created>
-      <option name="number" value="00018" />
-      <option name="presentableId" value="LOCAL-00018" />
-      <option name="project" value="LOCAL" />
-      <updated>1669635492235</updated>
-    </task>
-    <task id="LOCAL-00019" summary="CNTRL-617 Version bump">
-      <created>1669635593460</created>
-      <option name="number" value="00019" />
-      <option name="presentableId" value="LOCAL-00019" />
-      <option name="project" value="LOCAL" />
-      <updated>1669635593460</updated>
-    </task>
-    <task id="LOCAL-00020" summary="CNTRL-694 added valid url builder">
-      <created>1670861002829</created>
-      <option name="number" value="00020" />
-      <option name="presentableId" value="LOCAL-00020" />
-      <option name="project" value="LOCAL" />
-      <updated>1670861002829</updated>
-    </task>
-    <task id="LOCAL-00021" summary="CNTRL-694 added code styling and version bump">
-      <created>1670862883753</created>
-      <option name="number" value="00021" />
-      <option name="presentableId" value="LOCAL-00021" />
-      <option name="project" value="LOCAL" />
-      <updated>1670862883753</updated>
-    </task>
-    <task id="LOCAL-00022" summary="CNTRL-694 comments fix">
-      <created>1670864771128</created>
-      <option name="number" value="00022" />
-      <option name="presentableId" value="LOCAL-00022" />
-      <option name="project" value="LOCAL" />
-      <updated>1670864771128</updated>
-    </task>
-    <task id="LOCAL-00023" summary="CNTRL-694 undefined url fix">
-      <created>1670947749514</created>
-      <option name="number" value="00023" />
-      <option name="presentableId" value="LOCAL-00023" />
-      <option name="project" value="LOCAL" />
-      <updated>1670947749514</updated>
-    </task>
-    <task id="LOCAL-00024" summary="CNTRL-694 version bump">
-      <created>1670948708761</created>
-      <option name="number" value="00024" />
-      <option name="presentableId" value="LOCAL-00024" />
-      <option name="project" value="LOCAL" />
-      <updated>1670948708762</updated>
-    </task>
-    <task id="LOCAL-00025" summary="CNTRL-427: changed Item w and h params">
-      <created>1670952164829</created>
-      <option name="number" value="00025" />
-      <option name="presentableId" value="LOCAL-00025" />
-      <option name="project" value="LOCAL" />
-      <updated>1670952164829</updated>
-    </task>
-    <task id="LOCAL-00026" summary="CNTRL-427: changed white-space prop to normal for all text aligns">
-      <created>1671017859114</created>
-      <option name="number" value="00026" />
-      <option name="presentableId" value="LOCAL-00026" />
-      <option name="project" value="LOCAL" />
-      <updated>1671017859114</updated>
-    </task>
-    <task id="LOCAL-00027" summary="CNTRL-427: deleted unused import">
-      <created>1671017914825</created>
-      <option name="number" value="00027" />
-      <option name="presentableId" value="LOCAL-00027" />
-      <option name="project" value="LOCAL" />
-      <updated>1671017914825</updated>
-    </task>
-    <task id="LOCAL-00028" summary="CNTRL-427: version bump">
-      <created>1671097766100</created>
-      <option name="number" value="00028" />
-      <option name="presentableId" value="LOCAL-00028" />
-      <option name="project" value="LOCAL" />
-      <updated>1671097766100</updated>
-    </task>
-    <task id="LOCAL-00029" summary="CNTRL-861: added scale for item">
-      <created>1683462977817</created>
-      <option name="number" value="00029" />
-      <option name="presentableId" value="LOCAL-00029" />
-      <option name="project" value="LOCAL" />
-      <updated>1683462977817</updated>
-    </task>
-    <task id="LOCAL-00030" summary="CNTRL-861: added scale to cover div">
-      <created>1683464547773</created>
-      <option name="number" value="00030" />
-      <option name="presentableId" value="LOCAL-00030" />
-      <option name="project" value="LOCAL" />
-      <updated>1683464547774</updated>
-    </task>
-    <task id="LOCAL-00031" summary="CNTRL-861: fixes">
-      <created>1683464779856</created>
-      <option name="number" value="00031" />
-      <option name="presentableId" value="LOCAL-00031" />
-      <option name="project" value="LOCAL" />
-      <updated>1683464779856</updated>
-    </task>
-    <task id="LOCAL-00032" summary="CNTRL-861: added rotate to items">
-      <created>1683474659610</created>
-      <option name="number" value="00032" />
-      <option name="presentableId" value="LOCAL-00032" />
-      <option name="project" value="LOCAL" />
-      <updated>1683474659610</updated>
-    </task>
-    <task id="LOCAL-00033" summary="CNTRL-861: fixes">
-      <created>1683474875208</created>
-      <option name="number" value="00033" />
-      <option name="presentableId" value="LOCAL-00033" />
-      <option name="project" value="LOCAL" />
-      <updated>1683474875208</updated>
-    </task>
-    <task id="LOCAL-00034" summary="CNTRL-861: fixes">
-      <created>1683474899380</created>
-      <option name="number" value="00034" />
-      <option name="presentableId" value="LOCAL-00034" />
-      <option name="project" value="LOCAL" />
-      <updated>1683474899380</updated>
-    </task>
-    <task id="LOCAL-00035" summary="CNTRL-861: fixe">
-      <created>1683476057882</created>
-      <option name="number" value="00035" />
-      <option name="presentableId" value="LOCAL-00035" />
-      <option name="project" value="LOCAL" />
-      <updated>1683476057882</updated>
-    </task>
-    <task id="LOCAL-00036" summary="CNTRL-861: comment fix">
-      <created>1683477122292</created>
-      <option name="number" value="00036" />
-      <option name="presentableId" value="LOCAL-00036" />
-      <option name="project" value="LOCAL" />
-      <updated>1683477122292</updated>
-    </task>
-    <task id="LOCAL-00037" summary="CNTRL-1039: sdk version bump">
-      <created>1685957591389</created>
-      <option name="number" value="00037" />
-      <option name="presentableId" value="LOCAL-00037" />
-      <option name="project" value="LOCAL" />
-      <updated>1685957591389</updated>
-    </task>
-    <task id="LOCAL-00038" summary="CNTRL-1039: WIP: added section registry class and changed article rect observer">
-      <created>1686058816825</created>
-      <option name="number" value="00038" />
-      <option name="presentableId" value="LOCAL-00038" />
-      <option name="project" value="LOCAL" />
-      <updated>1686058816826</updated>
-    </task>
-    <task id="LOCAL-00039" summary="CNTRL-1039: added section base animations and sticky">
-      <created>1686240635490</created>
-      <option name="number" value="00039" />
-      <option name="presentableId" value="LOCAL-00039" />
-      <option name="project" value="LOCAL" />
-      <updated>1686240635490</updated>
-    </task>
-    <task id="LOCAL-00040" summary="CNTRL-1039: code fix">
-      <created>1686240730070</created>
-      <option name="number" value="00040" />
-      <option name="presentableId" value="LOCAL-00040" />
-      <option name="project" value="LOCAL" />
-      <updated>1686240730070</updated>
-    </task>
-    <task id="LOCAL-00041" summary="CNTRL-1039: code fix">
-      <created>1686298003197</created>
-      <option name="number" value="00041" />
-      <option name="presentableId" value="LOCAL-00041" />
-      <option name="project" value="LOCAL" />
-      <updated>1686298003197</updated>
-    </task>
-    <task id="LOCAL-00042" summary="CNTRL-1039: sdk version bump">
-      <created>1686299892024</created>
-      <option name="number" value="00042" />
-      <option name="presentableId" value="LOCAL-00042" />
-      <option name="project" value="LOCAL" />
-      <updated>1686299892024</updated>
-    </task>
-    <task id="LOCAL-00043" summary="CNTRL-1039: sdk version bump">
-      <created>1686301611042</created>
-      <option name="number" value="00043" />
-      <option name="presentableId" value="LOCAL-00043" />
-      <option name="project" value="LOCAL" />
-      <updated>1686301611042</updated>
-    </task>
-    <task id="LOCAL-00044" summary="CNTRL-1039: removed section geometry service">
-      <created>1686302079828</created>
-      <option name="number" value="00044" />
-      <option name="presentableId" value="LOCAL-00044" />
-      <option name="project" value="LOCAL" />
-      <updated>1686302079828</updated>
-    </task>
-    <task id="LOCAL-00045" summary="CNTRL-1039: code fix">
-      <created>1686302624003</created>
-      <option name="number" value="00045" />
-      <option name="presentableId" value="LOCAL-00045" />
-      <option name="project" value="LOCAL" />
-      <updated>1686302624004</updated>
-    </task>
-    <option name="localTasksCounter" value="46" />
-    <servers />
-  </component>
-  <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="3" />
-  </component>
-  <component name="Vcs.Log.Tabs.Properties">
-    <option name="TAB_STATES">
-      <map>
-        <entry key="MAIN">
-          <value>
-            <State />
-          </value>
-        </entry>
-      </map>
-    </option>
-  </component>
-  <component name="VcsManagerConfiguration">
-    <MESSAGE value="CNTRL-486 - version update" />
-    <MESSAGE value="CNTRL-486 - fixes" />
-    <MESSAGE value="CNTRL-486 - version bump" />
-    <MESSAGE value="CNTRL-617 Youtube anf vimeo videos Url update" />
-    <MESSAGE value="CNTRL-617 Version bump" />
-    <MESSAGE value="CNTRL-694 added valid url builder" />
-    <MESSAGE value="CNTRL-694 added code styling and version bump" />
-    <MESSAGE value="CNTRL-694 comments fix" />
-    <MESSAGE value="CNTRL-694 undefined url fix" />
-    <MESSAGE value="CNTRL-694 version bump" />
-    <MESSAGE value="CNTRL-427: changed Item w and h params" />
-    <MESSAGE value="CNTRL-427: changed white-space prop to normal for all text aligns" />
-    <MESSAGE value="CNTRL-427: deleted unused import" />
-    <MESSAGE value="CNTRL-427: version bump" />
-    <MESSAGE value="CNTRL-861: added scale for item" />
-    <MESSAGE value="CNTRL-861: added scale to cover div" />
-    <MESSAGE value="CNTRL-861: added rotate to items" />
-    <MESSAGE value="CNTRL-861: fixes" />
-    <MESSAGE value="CNTRL-861: fixe" />
-    <MESSAGE value="CNTRL-861: comment fix" />
-    <MESSAGE value="CNTRL-1039: WIP: added section registry class and changed article rect observer" />
-    <MESSAGE value="CNTRL-1039: added section base animations and sticky" />
-    <MESSAGE value="CNTRL-1039: sdk version bump" />
-    <MESSAGE value="CNTRL-1039: removed section geometry service" />
-    <MESSAGE value="CNTRL-1039: code fix" />
-    <option name="LAST_COMMIT_MESSAGE" value="CNTRL-1039: code fix" />
-  </component>
-</project>

package/lib/components/items/useItemSticky.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemTopStyle = exports.useItemSticky = void 0;
-const react_1 = require("react");
-const sdk_1 = require("@cntrl-site/sdk");
-const StickyManager_1 = require("../../utils/StickyManager/StickyManager");
-const useCurrentLayout_1 = require("../../common/useCurrentLayout");
-const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
-const useItemSticky = (top, item, sectionId) => {
-    const [isFixed, setIsFixed] = (0, react_1.useState)(false);
-    const [adjustedTop, setAdjustedTop] = (0, react_1.useState)(top);
-    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
-    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
-    const sticky = (0, react_1.useMemo)(() => item.sticky[layoutId], [layoutId]);
-    const stickyManager = (0, react_1.useMemo)(() => new StickyManager_1.StickyManager(sticky), [sticky]);
-    const handleSticky = (0, react_1.useCallback)((scroll) => {
-        setIsFixed(stickyManager.getIsSticky(scroll));
-        setAdjustedTop(stickyManager.getPosition(scroll, top));
-    }, [top, stickyManager]);
-    (0, react_1.useEffect)(() => {
-        if (!articleRectObserver)
-            return;
-        handleSticky(articleRectObserver.getSectionScroll(sectionId));
-    }, [handleSticky, articleRectObserver]);
-    (0, react_1.useEffect)(() => {
-        if (!articleRectObserver || !sticky)
-            return;
-        return articleRectObserver.on('scroll', () => {
-            handleSticky(articleRectObserver.getSectionScroll(sectionId));
-        });
-    }, [handleSticky, articleRectObserver, sticky]);
-    return {
-        isFixed,
-        top: sticky ? `${adjustedTop * 100}vw` : getItemTopStyle(adjustedTop, layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top)
-    };
-};
-exports.useItemSticky = useItemSticky;
-function getItemTopStyle(top, anchorSide) {
-    const defaultValue = `${top * 100}vw`;
-    if (!anchorSide)
-        return defaultValue;
-    switch (anchorSide) {
-        case sdk_1.AnchorSide.Top:
-            return defaultValue;
-        case sdk_1.AnchorSide.Center:
-            return `calc(50% + ${top * 100}vw)`;
-        case sdk_1.AnchorSide.Bottom:
-            return `calc(100% + ${top * 100}vw)`;
-    }
-}
-exports.getItemTopStyle = getItemTopStyle;

package/lib/utils/StickyManager/StickyManager.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StickyManager = void 0;
-class StickyManager {
-    constructor(sticky) {
-        this.sticky = sticky;
-    }
-    getIsSticky(scroll) {
-        if (!this.sticky)
-            return false;
-        return (this.sticky.from <= scroll) && (!this.sticky.to || this.sticky.to >= scroll);
-    }
-    getPosition(scroll, top) {
-        if (!this.sticky)
-            return top;
-        if (this.getIsSticky(scroll)) {
-            return top - this.sticky.from;
-        }
-        if (this.sticky.to !== undefined && this.sticky.to <= scroll) {
-            return top + this.sticky.to - this.sticky.from;
-        }
-        return top;
-    }
-}
-exports.StickyManager = StickyManager;

package/src/components/items/useItemSticky.ts

@@ -1,51 +0,0 @@
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
-import { StickyManager } from '../../utils/StickyManager/StickyManager';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
-import { ArticleRectContext } from '../../provider/ArticleRectContext';
-
-export const useItemSticky = (top: number, item: TArticleItemAny, sectionId: string) => {
-  const [isFixed, setIsFixed] = useState(false);
-  const [adjustedTop, setAdjustedTop] = useState(top);
-  const articleRectObserver = useContext(ArticleRectContext);
-  const layoutId = useCurrentLayout();
-  const sticky = useMemo(() => item.sticky[layoutId], [layoutId]);
-  const stickyManager = useMemo(() => new StickyManager(sticky), [sticky]);
-
-  const handleSticky = useCallback((scroll: number) => {
-    setIsFixed(stickyManager.getIsSticky(scroll));
-    setAdjustedTop(stickyManager.getPosition(
-      scroll,
-      top
-    ));
-  }, [top, stickyManager]);
-
-  useEffect(() => {
-    if (!articleRectObserver) return;
-      handleSticky(articleRectObserver.getSectionScroll(sectionId));
-  }, [handleSticky, articleRectObserver]);
-
-  useEffect(() => {
-    if (!articleRectObserver || !sticky) return;
-    return articleRectObserver.on('scroll', () => {
-      handleSticky(articleRectObserver.getSectionScroll(sectionId));
-    });
-  }, [handleSticky, articleRectObserver, sticky]);
-  return {
-    isFixed,
-    top: sticky ? `${adjustedTop * 100}vw` : getItemTopStyle(adjustedTop, layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top)
-  };
-};
-
-export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
-  const defaultValue = `${top * 100}vw`;
-  if (!anchorSide) return defaultValue;
-  switch (anchorSide) {
-    case AnchorSide.Top:
-      return defaultValue;
-    case AnchorSide.Center:
-      return `calc(50% + ${top * 100}vw)`;
-    case AnchorSide.Bottom:
-      return `calc(100% + ${top * 100}vw)`;
-  }
-}