@cntrl-site/sdk-nextjs 1.6.14 → 1.7.0-alpha.0

package/lib/components/Section/Section.js

@@ -83,25 +83,25 @@ const Section = ({ section, data, children }) => {
          }
          .section-background-wrapper-${section.id} {
             transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
-            left: 0;
             position: relative;
             height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)}};
             width: 100%;
          }
          .video-background-${section.id} {
             object-fit: ${(_a = media === null || media === void 0 ? void 0 : media.size) !== null && _a !== void 0 ? _a : 'cover'};
-            width: 100%;
+            width: ${(media === null || media === void 0 ? void 0 : media.offsetX) === null || (media === null || media === void 0 ? void 0 : media.size) === 'cover' ? '100%' : 'auto'};
             height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
             position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
             top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
-            left: 0;
+            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
          }
          .image-background-${section.id} {
             object-fit: ${media === null || media === void 0 ? void 0 : media.size};
-            width: 100%;
+            width: ${(media === null || media === void 0 ? void 0 : media.offsetX) === null ? '100%' : 'auto'};
             height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
             position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
             top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
+            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
          }
         `);
                 })}

package/lib/components/items/CodeEmbedItem/useCodeEmbedItem.js

@@ -4,7 +4,7 @@ exports.useCodeEmbedItem = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
-const useCodeEmbedItem = (item, sectionId) => {
+function useCodeEmbedItem(item, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
         if (!layoutId)
@@ -20,5 +20,5 @@ const useCodeEmbedItem = (item, sectionId) => {
     }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
     const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : sdk_1.AreaAnchor.TopLeft;
     return { anchor, blur, opacity };
-};
+}
 exports.useCodeEmbedItem = useCodeEmbedItem;

package/lib/components/items/ComponentItem/ComponentItem.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useComponentItem_1 = require("./useComponentItem");
+const useItemAngle_1 = require("../useItemAngle");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+    var _a, _b, _c;
+    const sdk = (0, useCntrlContext_1.useCntrlContext)();
+    const { layouts } = sdk;
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const layoutValues = [item.area, item.layoutParams];
+    const component = sdk.getComponent(item.commonParams.componentId);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    const { opacity: itemOpacity } = (0, useComponentItem_1.useComponentItem)(item, sectionId);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
+    if (!component || !layout)
+        return null;
+    const Element = component.element;
+    const parameters = item.layoutParams[layout].parameters;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: (0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters)) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
+          .custom-component-${item.id} {
+            width: 100%;
+            height: 100%;
+          }
+          ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                    return (`
+              .custom-component-${item.id} {
+                transform: rotate(${area.angle}deg);
+                opacity: ${layoutParams.opacity};
+              }
+            `);
+                })}
+        ` })] }));
+};
+exports.ComponentItem = ComponentItem;

package/lib/components/items/ComponentItem/useComponentItem.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponentItem = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../../useLayoutContext");
+function useComponentItem(item, sectionId) {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
+    return {
+        opacity
+    };
+}
+exports.useComponentItem = useComponentItem;

package/lib/components/items/itemsMap.js

@@ -12,6 +12,7 @@ const CustomItem_1 = require("./CustomItem/CustomItem");
 const GroupItem_1 = require("./GroupItem/GroupItem");
 const CodeEmbedItem_1 = require("./CodeEmbedItem/CodeEmbedItem");
 const CompoundItem_1 = require("./CompoundItem/CompoundItem");
+const ComponentItem_1 = require("./ComponentItem/ComponentItem");
 exports.itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -22,5 +23,6 @@ exports.itemsMap = {
     [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem,
     [sdk_1.ArticleItemType.Group]: GroupItem_1.GroupItem,
     [sdk_1.ArticleItemType.Compound]: CompoundItem_1.CompoundItem,
-    [sdk_1.ArticleItemType.CodeEmbed]: CodeEmbedItem_1.CodeEmbedItem
+    [sdk_1.ArticleItemType.CodeEmbed]: CodeEmbedItem_1.CodeEmbedItem,
+    [sdk_1.ArticleItemType.Component]: ComponentItem_1.ComponentItem
 };

package/lib/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cntrlSdkContext = exports.customSections = exports.customItems = exports.useCntrlContext = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = void 0;
+const defaultContext_1 = require("./provider/defaultContext");
 __exportStar(require("@cntrl-site/sdk"), exports);
 var RichTextConverter_1 = require("./utils/RichTextConverter/RichTextConverter");
 Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
@@ -42,7 +43,6 @@ var VimeoEmbed_1 = require("./components/items/EmbedVideoItem/VimeoEmbed");
 Object.defineProperty(exports, "VimeoEmbedItem", { enumerable: true, get: function () { return VimeoEmbed_1.VimeoEmbedItem; } });
 var YoutubeEmbed_1 = require("./components/items/EmbedVideoItem/YoutubeEmbed");
 Object.defineProperty(exports, "YoutubeEmbedItem", { enumerable: true, get: function () { return YoutubeEmbed_1.YoutubeEmbedItem; } });
-const defaultContext_1 = require("./provider/defaultContext");
 var CntrlProvider_1 = require("./provider/CntrlProvider");
 Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
 var useCntrlContext_1 = require("./provider/useCntrlContext");

package/lib/provider/CntrlSdkContext.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CntrlSdkContext = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
 class CntrlSdkContext {
     constructor(customItems, customSections) {
         this.customItems = customItems;
@@ -17,6 +18,7 @@ class CntrlSdkContext {
         this._layouts = [];
         this._fonts = undefined;
         this.sectionHeightMap = new Map();
+        this.components = new Map();
     }
     resolveSectionData(sections) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -34,12 +36,18 @@ class CntrlSdkContext {
     }
     init({ project, article }) {
         this.setLayouts(project.layouts);
+        this.setComponents(sdk_1.components);
         this.setFonts(project.fonts);
         this.setSectionsHeight(article.sections);
     }
     setLayouts(layouts) {
         this._layouts = layouts;
     }
+    setComponents(components) {
+        for (const component of components) {
+            this.components.set(component.id, component);
+        }
+    }
     setFonts(fonts) {
         this._fonts = fonts;
     }
@@ -58,6 +66,9 @@ class CntrlSdkContext {
     get fonts() {
         return this._fonts;
     }
+    getComponent(id) {
+        return this.components.get(id);
+    }
 }
 exports.CntrlSdkContext = CntrlSdkContext;
 function isDefined(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.6.14",
+  "version": "1.7.0-alpha.0",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.3.2",
-    "@cntrl-site/sdk": "^1.20.0",
+    "@cntrl-site/sdk": "^1.21.0-alpha.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/Section/Section.tsx

@@ -127,25 +127,25 @@ export const Section: FC<Props> = ({ section, data, children }) => {
          }
          .section-background-wrapper-${section.id} {
             transform: ${media?.position === 'fixed' ? 'translateY(-100vh)' : 'unset'};
-            left: 0;
             position: relative;
             height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)}};
             width: 100%;
          }
          .video-background-${section.id} {
             object-fit: ${media?.size ?? 'cover'};
-            width: 100%;
+            width: ${media?.offsetX === null || media?.size === 'cover' ? '100%' : 'auto'};
             height: ${media?.position === 'fixed' ? '100vh' : '100%'};
             position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
             top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
-            left: 0;
+            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
          }
          .image-background-${section.id} {
             object-fit: ${media?.size};
-            width: 100%;
+            width: ${media?.offsetX === null ? '100%' : 'auto'};
             height: ${media?.position === 'fixed' ? '100vh' : '100%'};
             position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
             top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
+            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
          }
         `
     ))

package/src/components/items/CodeEmbedItem/useCodeEmbedItem.ts

@@ -2,7 +2,7 @@ import { CodeEmbedItem, AreaAnchor, KeyframeType } from '@cntrl-site/sdk';
 import { useLayoutContext } from '../../useLayoutContext';
 import { useKeyframeValue } from '../../../common/useKeyframeValue';
 
-export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
+export function useCodeEmbedItem(item: CodeEmbedItem, sectionId: string) {
   const layoutId = useLayoutContext();
 
   const blur = useKeyframeValue(
@@ -33,4 +33,4 @@ export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
 
   const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : AreaAnchor.TopLeft;
   return { anchor, blur, opacity };
-};
+}

package/src/components/items/ComponentItem/ComponentItem.tsx

@@ -0,0 +1,62 @@
+import { ItemProps } from '../Item';
+import { ComponentItem as TComponentItem, getLayoutStyles } from '@cntrl-site/sdk';
+import { FC, useState } from 'react';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useComponentItem } from './useComponentItem';
+import { useItemAngle } from '../useItemAngle';
+import JSXStyle from 'styled-jsx/style';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { useLayoutContext } from '../../useLayoutContext';
+
+export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
+  const sdk = useCntrlContext();
+  const { layouts } = sdk;
+  const itemAngle = useItemAngle(item, sectionId);
+  const layout = useLayoutContext();
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const component = sdk.getComponent(item.commonParams.componentId);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  const { opacity: itemOpacity } = useComponentItem(item, sectionId);
+  useRegisterResize(ref, onResize);
+  const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
+  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
+  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
+  if (!component || !layout) return null;
+  const Element = component.element;
+  const parameters = item.layoutParams[layout].parameters;
+  return (
+    <>
+      <div
+        className={`custom-component-${item.id}`}
+        ref={setRef}
+        style={{
+          ...(opacity !== undefined ? { opacity } : {}),
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          transition: stateParams?.transition ?? 'none'
+        }}
+      >
+        <Element
+          content={item.commonParams.content}
+          {...parameters}
+        />
+      </div>
+      <JSXStyle id={item.id}>
+        {`
+          .custom-component-${item.id} {
+            width: 100%;
+            height: 100%;
+          }
+          ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+      return (`
+              .custom-component-${item.id} {
+                transform: rotate(${area.angle}deg);
+                opacity: ${layoutParams.opacity};
+              }
+            `);
+    })}
+        `}
+      </JSXStyle>
+    </>
+  );
+};

package/src/components/items/ComponentItem/useComponentItem.ts

@@ -0,0 +1,23 @@
+import { ComponentItem, KeyframeType } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+import { useLayoutContext } from '../../useLayoutContext';
+
+export function useComponentItem(item: ComponentItem, sectionId: string) {
+  const layoutId = useLayoutContext();
+  const opacity = useKeyframeValue(
+    item,
+    KeyframeType.Opacity,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  return {
+    opacity
+  };
+}

package/src/components/items/CustomItem/CustomItem.tsx

@@ -43,5 +43,6 @@ export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, section
           `);
         })}`}
       </JSXStyle>
-    </>);
+    </>
+  );
 };

package/src/components/items/Item.tsx

@@ -12,6 +12,7 @@ import {
   ArticleItemType,
   getLayoutStyles,
   ItemAny,
+  AreaAnchor,
   PositionType
 } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
@@ -24,7 +25,6 @@ import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
 import { useLayoutContext } from '../useLayoutContext';
 import { ArticleRectContext } from '../../provider/ArticleRectContext';
 import { useExemplary } from '../../common/useExemplary';
-import { AreaAnchor } from '@cntrl-site/sdk/src/types/article/ItemArea';
 import { KeyframesContext } from '../../provider/KeyframesContext';
 import { useItemInteractionCtrl } from '../../interactions/useItemInteractionCtrl';
 import { isItemType } from '../../utils/isItemType';

package/src/components/items/RectangleItem/RectangleItem.tsx

@@ -7,7 +7,7 @@ import { LinkWrapper } from '../LinkWrapper';
 import { useRectangleItem } from './useRectangleItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { useRegisterResize } from "../../../common/useRegisterResize";
+import { useRegisterResize } from '../../../common/useRegisterResize';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
@@ -40,7 +40,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const strokeWidth = getStyleFromItemStateAndParams(styles?.strokeWidth, itemStrokeWidth);
   const angle = getStyleFromItemStateAndParams(styles?.angle, itemAngle);
   const blur = getStyleFromItemStateAndParams(styles?.blur, itemBlur);
-  const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)`: undefined;
+  const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
   const isInteractive = backgroundColor?.getAlpha() !== 0 || (strokeWidth !== 0 && borderColor?.getAlpha() !== 0);
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
@@ -53,7 +53,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
           className={`rectangle-${item.id}`}
           ref={setRef}
           style={{
-            ...(backgroundColor ? { backgroundColor : `${backgroundColor.fmt('rgba')}` } : {}),
+            ...(backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {}),
             ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
             ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
             ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),

package/src/components/items/itemsMap.ts

@@ -11,6 +11,7 @@ import { GroupItem } from './GroupItem/GroupItem';
 import { CodeEmbedItem } from './CodeEmbedItem/CodeEmbedItem';
 import { ItemProps } from './Item';
 import { CompoundItem } from './CompoundItem/CompoundItem';
+import { ComponentItem } from './ComponentItem/ComponentItem';
 
 export const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
   [ArticleItemType.Rectangle]: RectangleItem,
@@ -22,5 +23,6 @@ export const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> =
   [ArticleItemType.Custom]: CustomItem,
   [ArticleItemType.Group]: GroupItem,
   [ArticleItemType.Compound]: CompoundItem,
-  [ArticleItemType.CodeEmbed]: CodeEmbedItem
+  [ArticleItemType.CodeEmbed]: CodeEmbedItem,
+  [ArticleItemType.Component]: ComponentItem
 };

package/src/index.ts

@@ -1,5 +1,6 @@
-export * from '@cntrl-site/sdk';
+import { cntrlSdkContext as sdk } from './provider/defaultContext';
 
+export * from '@cntrl-site/sdk';
 export { RichTextConverter } from './utils/RichTextConverter/RichTextConverter';
 export { Page } from './components/Page';
 export type { PageProps } from './components/Page';
@@ -15,7 +16,6 @@ export { LayoutStyle } from './components/LayoutStyle';
 export { VimeoEmbedItem } from './components/items/EmbedVideoItem/VimeoEmbed';
 export { YoutubeEmbedItem } from './components/items/EmbedVideoItem/YoutubeEmbed';
 
-import { cntrlSdkContext as sdk } from './provider/defaultContext';
 export { CntrlProvider } from './provider/CntrlProvider';
 export type { CustomItemComponent } from './provider/CustomItemTypes';
 export { useCntrlContext } from './provider/useCntrlContext';

package/src/provider/CntrlSdkContext.ts

@@ -1,6 +1,7 @@
 import { CustomItemRegistry } from './CustomItemRegistry';
-import { Article, Section, Layout, Project, SectionHeight } from '@cntrl-site/sdk';
+import { Article, Section, Layout, Project, SectionHeight, components, Component as TComponent } from '@cntrl-site/sdk';
 import { CustomSectionRegistry } from './CustomSectionRegistry';
+import { Component } from 'react';
 
 interface SdkContextInitProps {
   project: Project;
@@ -11,6 +12,8 @@ export class CntrlSdkContext {
   private _layouts: Layout[] = [];
   private _fonts?: Project['fonts'] = undefined;
   private sectionHeightMap: Map<string, Record<string, SectionHeight>> = new Map();
+  private components: Map<string, TComponent> = new Map();
+
   constructor(
     public readonly customItems: CustomItemRegistry,
     public readonly customSections: CustomSectionRegistry
@@ -32,6 +35,7 @@ export class CntrlSdkContext {
 
   init({ project, article }: SdkContextInitProps) {
     this.setLayouts(project.layouts);
+    this.setComponents(components);
     this.setFonts(project.fonts);
     this.setSectionsHeight(article.sections);
   }
@@ -40,6 +44,12 @@ export class CntrlSdkContext {
     this._layouts = layouts;
   }
 
+  private setComponents(components: TComponent[]) {
+    for (const component of components) {
+      this.components.set(component.id, component);
+    }
+  }
+
   private setFonts(fonts: Project['fonts']) {
     this._fonts = fonts;
   }
@@ -62,6 +72,10 @@ export class CntrlSdkContext {
   get fonts(): Project['fonts'] | undefined {
     return this._fonts;
   }
+
+  getComponent(id: string): TComponent | undefined {
+    return this.components.get(id);
+  }
 }
 
 function isDefined<T>(value: T): value is Exclude<T, undefined> {

package/src/utils/getCompoundBondaryStyles.ts

@@ -1,5 +1,5 @@
 import { AreaAnchor } from '@cntrl-site/sdk';
-import { DimensionMode } from '@cntrl-site/sdk/src/types/article/ItemArea';
+import { DimensionMode } from '@cntrl-site/sdk/dist/types/article/ItemArea';
 
 const positionMatrix: Record<AreaAnchor, [number, number]> = {
   [AreaAnchor.TopLeft]: [0, 0],

package/src/utils/isItemType.ts

@@ -1,5 +1,5 @@
 import { ArticleItemType, ItemAny } from '@cntrl-site/sdk';
-import { Item as TItem } from '@cntrl-site/sdk/src/types/article/Item';
+import { Item as TItem } from '@cntrl-site/sdk/dist/types/article/Item';
 
 export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
   return item.type === itemType;

package/.idea/codeStyles/codeStyleConfig.xml

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

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?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

@@ -1,12 +0,0 @@
-<?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

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