@cntrl-site/sdk-nextjs 0.17.1 → 0.18.0

package/lib/common/useRegisterResize.js

@@ -12,7 +12,7 @@ const useRegisterResize = (ref, onResize) => {
             return;
         const observer = new resize_observer_polyfill_1.default((entries) => {
             const [entry] = entries;
-            onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+            onResize(entry.target.clientHeight / window.innerWidth);
         });
         observer.observe(ref);
         return () => {

package/lib/components/Head.js

@@ -15,7 +15,7 @@ const CNTRLHead = ({ meta, project }) => {
     const customFonts = project.fonts.custom;
     const htmlHead = (0, html_react_parser_1.default)(project.html.head);
     const ffGenerator = new sdk_1.FontFaceGenerator(customFonts);
-    const links = Object.values(parsedFonts).map((value, i) => {
+    const links = Object.values(parsedFonts).map((value) => {
         var _a, _b;
         if (!value)
             return;

package/lib/components/Item.js

@@ -71,8 +71,6 @@ const Item = ({ item, sectionId, articleHeight }) => {
     const ItemComponent = itemsMap[item.type] || noop;
     const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
     const handleItemResize = (height) => {
-        var _a, _b;
-        const itemSectionTop = (_b = (_a = itemWrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0;
         if (!layout)
             return;
         const sticky = item.sticky[layout];
@@ -80,7 +78,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
             setWrapperHeight(undefined);
             return;
         }
-        const itemArticleOffset = (sectionTop + itemSectionTop) / window.innerWidth;
+        const itemArticleOffset = sectionTop / window.innerWidth + stickyTop;
         const maxStickyTo = articleHeight - itemArticleOffset - height;
         const end = sticky.to
             ? Math.min(maxStickyTo, sticky.to)
@@ -93,17 +91,19 @@ const Item = ({ item, sectionId, articleHeight }) => {
         isInitialRef.current = false;
     }, []);
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
+    if (!layout)
+        return null;
     const styles = {
-        top: stickyTop,
+        top: `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight[layout], item.area[layout].anchorSide)}`,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
-                            width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
+                            width: `${sizingAxis.x === 'manual'
                                 ? isRichText
                                     ? `${width * exemplary}px`
                                     : `${width * 100}vw`
                                 : 'max-content'}`,
-                            height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+                            height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`,
                             transform: `scale(${scale})`,
                             transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]
                         } }, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) })) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
@@ -120,8 +120,8 @@ const Item = ({ item, sectionId, articleHeight }) => {
             }
             .item-${item.id}-inner {
               transition: ${(0, HoverStyles_1.getTransitions)(['width', 'height', 'scale'], hoverParams)};
-              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'};
+              width: ${sizingAxis.x === 'manual' ? `${area.width * 100}vw` : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
               transform: scale(${scale});
               transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
               --webkit-backface-visibility: hidden;

package/lib/components/Page.js

@@ -10,14 +10,11 @@ const html_react_parser_1 = __importDefault(require("html-react-parser"));
 const Article_1 = require("./Article");
 const KeyframesContext_1 = require("../provider/KeyframesContext");
 const Head_1 = require("./Head");
-const useCntrlContext_1 = require("../provider/useCntrlContext");
-const generateTypePresetStyles_1 = require("../utils/generateTypePresetStyles/generateTypePresetStyles");
 const Keyframes_1 = require("../provider/Keyframes");
 const Page = ({ article, project, meta, keyframes, sectionData }) => {
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
-    const { typePresets, layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, Object.assign({ value: keyframesRepo }, { children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) })), beforeBodyClose, typePresets && typePresets.presets.length > 0 && ((0, jsx_runtime_1.jsx)("style", { children: (0, generateTypePresetStyles_1.generateTypePresetStyles)(typePresets, layouts) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, Object.assign({ value: keyframesRepo }, { children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) })), beforeBodyClose] }));
 };
 exports.Page = Page;

package/lib/components/items/ImageItem.js

@@ -7,6 +7,7 @@ exports.ImageItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
+const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
@@ -20,7 +21,7 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
+    const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {

package/lib/components/items/RectangleItem.js

@@ -7,6 +7,7 @@ exports.RectangleItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
+const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useRectangleItem_1 = require("./useRectangleItem");
@@ -20,8 +21,8 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { fillColor, radius, strokeWidth, strokeColor, blur, backdropBlur } = (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), [fillColor]);
-    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
+    const backgroundColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(fillColor), [fillColor]);
+    const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const backdropFilterValue = backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset';

package/lib/components/items/RichTextItem.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
@@ -20,7 +21,7 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { angle, blur, wordSpacing, letterSpacing, color } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
-    const textColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(color), [color]);
+    const textColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(color), [color]);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`,
@@ -38,7 +39,7 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
             }
           `);
                     })}`, `${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([layoutParams], exemplary) => {
-                        const color = sdk_1.CntrlColor.parse(layoutParams.color);
+                        const color = color_1.CntrlColor.parse(layoutParams.color);
                         return (`
             .rich-text-wrapper-${item.id} {
                 font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;

package/lib/components/items/VideoItem.js

@@ -7,6 +7,7 @@ exports.VideoItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
+const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
@@ -20,7 +21,7 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, strokeColor, opacity, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
+    const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, ref: setRef, style: {

package/lib/components/items/useRichTextItem.js

@@ -3,17 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRichTextItem = void 0;
 const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const useLayoutContext_1 = require("../useLayoutContext");
 const richTextConverter = new RichTextConverter_1.RichTextConverter();
 const useRichTextItem = (item) => {
-    var _a;
-    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const { layouts, typePresets } = (0, useCntrlContext_1.useCntrlContext)();
-    const presetId = layoutId ? item.layoutParams[layoutId].preset : null;
-    const preset = presetId
-        ? (_a = typePresets === null || typePresets === void 0 ? void 0 : typePresets.presets.find(p => p.id === presetId)) !== null && _a !== void 0 ? _a : null
-        : null;
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const [content, styles] = richTextConverter.toHtml(item, layouts);
-    return [content, styles, preset];
+    return [content, styles];
 };
 exports.useRichTextItem = useRichTextItem;

package/lib/components/items/useStickyItemTop.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStickyItemTop = void 0;
-const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
-const getAnchoredItemTop_1 = require("../../utils/getAnchoredItemTop");
 const useLayoutContext_1 = require("../useLayoutContext");
 function useStickyItemTop(item, sectionHeightMap, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -13,8 +11,6 @@ function useStickyItemTop(item, sectionHeightMap, sectionId) {
         return item.area[layoutId];
     }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
     const sticky = layoutId ? item.sticky[layoutId] : undefined;
-    const sectionHeight = layoutId ? sectionHeightMap[layoutId] : '0vh';
-    const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
-    return sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(top - sticky.from, sectionHeight, anchorSide)}` : 0;
+    return sticky ? top - sticky.from : 0;
 }
 exports.useStickyItemTop = useStickyItemTop;

package/lib/components/useSectionColor.js

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSectionColor = void 0;
 const react_1 = require("react");
-const sdk_1 = require("@cntrl-site/sdk");
+const color_1 = require("@cntrl-site/color");
 const useLayoutContext_1 = require("./useLayoutContext");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 const useSectionColor = (colorData) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     return (0, react_1.useMemo)(() => {
         if (!layoutId)
-            return sdk_1.CntrlColor.parse(DEFAULT_COLOR);
+            return color_1.CntrlColor.parse(DEFAULT_COLOR);
         const layoutColor = colorData[layoutId];
-        return sdk_1.CntrlColor.parse(!layoutColor
+        return color_1.CntrlColor.parse(!layoutColor
             ? DEFAULT_COLOR
             : layoutColor);
     }, [layoutId]);

package/lib/provider/CntrlSdkContext.js

@@ -31,14 +31,10 @@ class CntrlSdkContext {
             return Object.fromEntries(yield Promise.all(resolvers.map(({ name, resolver }) => __awaiter(this, void 0, void 0, function* () { return [name, yield resolver()]; }))));
         });
     }
-    init({ project, typePresets, article }) {
-        this.setTypePresets(typePresets);
+    init({ project, article }) {
         this.setLayouts(project.layouts);
         this.setSectionsHeight(article.sections);
     }
-    setTypePresets(typePresets) {
-        this._typePresets = typePresets;
-    }
     setLayouts(layouts) {
         this._layouts = layouts;
     }
@@ -54,9 +50,6 @@ class CntrlSdkContext {
     get layouts() {
         return this._layouts;
     }
-    get typePresets() {
-        return this._typePresets;
-    }
 }
 exports.CntrlSdkContext = CntrlSdkContext;
 function isDefined(value) {

package/lib/utils/Animator/Animator.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Animator = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
+const color_1 = require("@cntrl-site/color");
 const binSearchInsertAt_1 = require("../binSearchInsertAt");
 const compare = (lhs, rhs) => lhs.position - rhs.position;
 const insertBin = (0, binSearchInsertAt_1.createInsert)(binSearchInsertAt_1.binSearchInsertAt, compare);
@@ -242,8 +243,8 @@ class Animator {
     }
     getRangeColor(start, end, position) {
         const rangeAmount = rangeMap(position, start.position, end.position, 0, 1, true);
-        const startColor = sdk_1.CntrlColor.parse(start.value.color);
-        const endColor = sdk_1.CntrlColor.parse(end.value.color);
+        const startColor = color_1.CntrlColor.parse(start.value.color);
+        const endColor = color_1.CntrlColor.parse(end.value.color);
         const mixedColor = startColor.mix(endColor, rangeAmount);
         return mixedColor.fmt('oklch');
     }

package/lib/utils/HoverStyles/HoverStyles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getHoverStyles = exports.getTransitions = void 0;
-const sdk_1 = require("@cntrl-site/sdk");
+const color_1 = require("@cntrl-site/color");
 const getItemTopStyle_1 = require("../getItemTopStyle");
 const hoverTransformationMap = {
     'width': (width) => `width: ${width * 100}vw !important;`,
@@ -13,11 +13,11 @@ const hoverTransformationMap = {
     'opacity': (opacity) => `opacity: ${opacity} !important;`,
     'radius': (radius) => `border-radius: ${radius * 100}vw !important;`,
     'strokeWidth': (strokeWidth) => `border-width: ${strokeWidth * 100}vw !important;`,
-    'strokeColor': (strokeColor) => `border-color: ${sdk_1.CntrlColor.parse(strokeColor).toCss()} !important;`,
-    'fillColor': (fillColor) => `background-color: ${sdk_1.CntrlColor.parse(fillColor).toCss()} !important;`,
+    'strokeColor': (strokeColor) => `border-color: ${color_1.CntrlColor.parse(strokeColor).toCss()} !important;`,
+    'fillColor': (fillColor) => `background-color: ${color_1.CntrlColor.parse(fillColor).toCss()} !important;`,
     'blur': (blur) => `filter: blur(${blur * 100}vw) !important;`,
     'backdropBlur': (backdropBlur) => `backdrop-filter: blur(${backdropBlur * 100}vw) !important;`,
-    'color': (color) => `color: ${sdk_1.CntrlColor.parse(color).toCss()} !important;`,
+    'color': (color) => `color: ${color_1.CntrlColor.parse(color).toCss()} !important;`,
     'letterSpacing': (letterSpacing) => `letter-spacing: ${letterSpacing * 100}vw !important;`,
     'wordSpacing': (wordSpacing) => `word-spacing: ${wordSpacing * 100}vw !important;`
 };

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextConverter = exports.FontStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const color_1 = require("@cntrl-site/color");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../../components/LinkWrapper");
 const getFontFamilyValue_1 = require("../getFontFamilyValue");
@@ -119,7 +120,7 @@ class RichTextConverter {
                                 styleRules[item.layout].push(`
                 @supports not (color: oklch(42% 0.3 90 / 1)) {
                   .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                    color: ${sdk_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
+                    color: ${color_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
                   }
                 }
               `);
@@ -250,7 +251,7 @@ function groupBy(items, getKey) {
 function getResolvedValue(value, name) {
     if (name !== 'COLOR')
         return value;
-    return value ? sdk_1.CntrlColor.parse(value).toCss() : value;
+    return value ? color_1.CntrlColor.parse(value).toCss() : value;
 }
 function sliceSymbols(text, start, end = NaN) {
     let startOffset = NaN;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -21,7 +21,8 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^1.2.3",
+    "@cntrl-site/color": "^1.0.0",
+    "@cntrl-site/sdk": "^1.3.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/common/useKeyframeValue.ts

@@ -1,4 +1,4 @@
-import { KeyframeType, TArticleItemAny } from '@cntrl-site/sdk';
+import { KeyframeType, ItemAny } from '@cntrl-site/sdk';
 import isEqual from 'lodash.isequal';
 import { DependencyList, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
@@ -7,11 +7,11 @@ import { AnimationData, Animator } from '../utils/Animator/Animator';
 import { useLayoutContext } from '../components/useLayoutContext';
 
 export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
-type ItemParamGetter<T> = (item: TArticleItemAny, layoutId: string | undefined) => T;
+type ItemParamGetter<T> = (item: ItemAny, layoutId: string | undefined) => T;
 const emptyDeps: DependencyList = [];
 
 export const useKeyframeValue = <T>(
-  item: TArticleItemAny,
+  item: ItemAny,
   itemParamsGetter: ItemParamGetter<T>,
   animatorGetter: AnimatorGetter<T>,
   sectionId: string,

package/src/common/useRegisterResize.ts

@@ -6,7 +6,7 @@ export const useRegisterResize = (ref: HTMLElement | null, onResize?: (height: n
     if (!ref || !onResize) return;
     const observer = new ResizeObserver((entries) => {
       const [entry] = entries;
-      onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+      onResize(entry.target.clientHeight / window.innerWidth);
     });
     observer.observe(ref);
     return () => {

package/src/components/Article.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { TArticle } from '@cntrl-site/sdk';
+import { Article as TArticle } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
 import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';

package/src/components/Head.tsx

@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 import HTMLReactParser, { domToReact } from 'html-react-parser';
 import Head from 'next/head';
-import { FontFaceGenerator, TMeta, TProject } from '@cntrl-site/sdk';
+import { FontFaceGenerator, Meta, Project } from '@cntrl-site/sdk';
 
 interface Props {
-  project: TProject;
-  meta: TMeta;
+  project: Project;
+  meta: Meta;
 }
 
 export const CNTRLHead: FC<Props> = ({ meta, project }) => {
@@ -18,7 +18,7 @@ export const CNTRLHead: FC<Props> = ({ meta, project }) => {
   const customFonts = project.fonts.custom;
   const htmlHead = HTMLReactParser(project.html.head);
   const ffGenerator = new FontFaceGenerator(customFonts);
-  const links = Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value, i) => {
+  const links = Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value) => {
     if (!value) return;
     const rel = value?.rel || value.props?.rel;
     const href = value?.href || value.props?.href;

package/src/components/Item.tsx

@@ -1,12 +1,10 @@
 import { ComponentType, FC, PropsWithChildren, useContext, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
-  ArticleItemSizingType as SizingType,
   ArticleItemType,
   getLayoutStyles,
-  TArticleItem,
-  TStickyParams,
-  TArticleItemAny,
+  Item as TItem,
+  ItemAny,
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
@@ -29,13 +27,13 @@ import { useLayoutContext } from './useLayoutContext';
 import { ArticleRectContext } from "../provider/ArticleRectContext";
 import { useExemplary } from "../common/useExemplary";
 
-export interface ItemProps<I extends TArticleItemAny> {
+export interface ItemProps<I extends ItemAny> {
   item: I;
   sectionId: string;
   onResize?: (height: number) => void;
 }
 
-export interface ItemWrapperProps extends ItemProps<TArticleItemAny> {
+export interface ItemWrapperProps extends ItemProps<ItemAny> {
   articleHeight: number;
 }
 
@@ -94,14 +92,13 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
   const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
 
   const handleItemResize = (height: number) => {
-    const itemSectionTop = itemWrapperRef.current?.offsetTop ?? 0;
     if (!layout) return;
     const sticky = item.sticky[layout];
     if (!sticky) {
       setWrapperHeight(undefined);
       return;
     }
-    const itemArticleOffset = (sectionTop + itemSectionTop) / window.innerWidth;
+    const itemArticleOffset = sectionTop / window.innerWidth + stickyTop;
     const maxStickyTo = articleHeight - itemArticleOffset - height;
     const end = sticky.to
       ? Math.min(maxStickyTo, sticky.to)
@@ -117,8 +114,10 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
 
+  if (!layout) return null;
+
   const styles = {
-    top: stickyTop,
+    top: `${getAnchoredItemTop(stickyTop, sectionHeight[layout], item.area[layout].anchorSide)}`,
     height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
   };
 
@@ -137,12 +136,12 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
           <div
             className={`item-${item.id}-inner`}
             style={{
-              width: `${sizingAxis.x === SizingType.Manual
+              width: `${sizingAxis.x === 'manual'
                 ? isRichText
                   ? `${width * exemplary}px`
                   : `${width * 100}vw`
                 : 'max-content'}`,
-              height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+              height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`,
               transform: `scale(${scale})`,
               transformOrigin: ScaleAnchorMap[scaleAnchor]
             }}
@@ -165,8 +164,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
             }
             .item-${item.id}-inner {
               transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
-              width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
-              height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'unset'};
+              width: ${sizingAxis.x === 'manual' ? `${area.width * 100}vw` : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
               transform: scale(${scale});
               transform-origin: ${ScaleAnchorMap[scaleAnchor]};
               --webkit-backface-visibility: hidden;
@@ -203,10 +202,10 @@ function parseSizing(sizing: string = 'manual'): Axis {
 }
 
 interface Axis {
-  x: SizingType;
-  y: SizingType;
+  x: 'manual' | 'auto';
+  y: 'manual' | 'auto';
 }
 
-export function isItemType<T extends ArticleItemType>(item: TArticleItemAny, itemType: T): item is TArticleItem<T> {
+export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
   return item.type === itemType;
 }

package/src/components/LayoutStyle.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
-import { getLayoutMediaQuery, TLayout } from '@cntrl-site/sdk';
+import { getLayoutMediaQuery, Layout } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 
 export interface LayoutStyleProps {
   id: string;
-  layouts: TLayout[];
+  layouts: Layout[];
   layoutId: string;
-  children?: (layout: TLayout) => string;
+  children?: (layout: Layout) => string;
 }
 
 export const LayoutStyle: FC<LayoutStyleProps> = ({ id, layouts, layoutId, children }) => {

package/src/components/Page.tsx

@@ -1,18 +1,16 @@
 import React, { FC, useMemo } from 'react';
 import HTMLReactParser from 'html-react-parser';
-import { TArticle, TProject, TMeta, TKeyframeAny } from '@cntrl-site/sdk';
+import { Article as TArticle, Project, Meta, KeyframeAny } from '@cntrl-site/sdk';
 import { Article } from './Article';
 import { KeyframesContext } from '../provider/KeyframesContext';
 import { CNTRLHead } from './Head';
-import { useCntrlContext } from '../provider/useCntrlContext';
-import { generateTypePresetStyles } from '../utils/generateTypePresetStyles/generateTypePresetStyles';
 import { Keyframes } from '../provider/Keyframes';
 
 export interface PageProps {
   article: TArticle;
-  project: TProject;
-  meta: TMeta;
-  keyframes: TKeyframeAny[];
+  project: Project;
+  meta: Meta;
+  keyframes: KeyframeAny[];
   sectionData: Record<SectionName, any>;
 }
 
@@ -20,7 +18,6 @@ export const Page: FC<PageProps> = ({ article, project, meta, keyframes, section
   const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
   const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
   const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
-  const { typePresets, layouts } = useCntrlContext();
   return (
     <>
       <CNTRLHead project={project} meta={meta} />
@@ -29,9 +26,6 @@ export const Page: FC<PageProps> = ({ article, project, meta, keyframes, section
         <Article article={article} sectionData={sectionData} />
       </KeyframesContext.Provider>
       {beforeBodyClose}
-      {typePresets && typePresets.presets.length > 0 && (
-        <style>{generateTypePresetStyles(typePresets, layouts)}</style>
-      )}
     </>
   );
 };

package/src/components/Section.tsx

@@ -3,8 +3,8 @@ import JSXStyle from 'styled-jsx/style';
 import {
   getLayoutMediaQuery,
   getLayoutStyles,
-  TArticleSection,
-  TSectionHeight,
+  Section as TSection,
+  SectionHeight,
   SectionHeightMode
 } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../provider/useCntrlContext';
@@ -14,7 +14,7 @@ import { useSectionRegistry } from '../utils/ArticleRectManager/useSectionRegist
 type SectionChild = ReactElement<any, any>;
 
 interface Props {
-  section: TArticleSection;
+  section: TSection;
   children: SectionChild[];
   data?: any;
 }
@@ -75,7 +75,7 @@ export const Section: FC<Props> = ({ section, data, children }) => {
   );
 };
 
-export function getSectionHeight(heightData: TSectionHeight): string {
+export function getSectionHeight(heightData: SectionHeight): 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/CustomItem.tsx

@@ -1,4 +1,4 @@
-import { ArticleItemType, getLayoutStyles, TCustomItem } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, CustomItem as TCustomItem } from '@cntrl-site/sdk';
 import { FC, useState } from 'react';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ItemProps } from '../Item';

package/src/components/items/ImageItem.tsx

@@ -1,6 +1,7 @@
 import { FC, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { ArticleItemType, CntrlColor, getLayoutStyles, TImageItem } from '@cntrl-site/sdk';
+import { CntrlColor } from '@cntrl-site/color';
+import { ArticleItemType, getLayoutStyles, ImageItem as TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';

package/src/components/items/RectangleItem.tsx

@@ -1,6 +1,7 @@
 import { FC, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { TRectangleItem, CntrlColor, getLayoutStyles, ArticleItemType } from '@cntrl-site/sdk';
+import { CntrlColor } from '@cntrl-site/color';
+import { RectangleItem as TRectangleItem, getLayoutStyles, ArticleItemType } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useRectangleItem } from './useRectangleItem';