@cntrl-site/sdk-nextjs 1.6.11 → 1.6.13

package/.idea/codeStyles/codeStyleConfig.xml

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

package/lib/components/Section/Section.js

@@ -11,13 +11,22 @@ const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useSectionRegistry_1 = require("../../utils/ArticleRectManager/useSectionRegistry");
 const color_1 = require("@cntrl-site/color");
+const useLayoutContext_1 = require("../useLayoutContext");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+function isVideoUrl(url) {
+    const videoExtensions = ['.mp4', '.webm', '.ogg'];
+    return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
+}
 const Section = ({ section, data, children }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const id = (0, react_1.useId)();
     const sectionRef = (0, react_1.useRef)(null);
     const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
-    const layoutValues = [section.height, section.color];
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const layoutValues = [section.height, section.color, (_a = section.media) !== null && _a !== void 0 ? _a : {}];
     const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+    const isVideo = layout && ((_c = (_b = section.media) === null || _b === void 0 ? void 0 : _b[layout]) === null || _c === void 0 ? void 0 : _c.url) ? isVideoUrl(String((_e = (_d = section.media) === null || _d === void 0 ? void 0 : _d[layout]) === null || _e === void 0 ? void 0 : _e.url)) : false;
+    const videoRef = (0, react_1.useRef)(null);
     (0, useSectionRegistry_1.useSectionRegistry)(section.id, sectionRef.current);
     const getSectionVisibilityStyles = () => {
         return layouts
@@ -33,15 +42,69 @@ const Section = ({ section, data, children }) => {
           }`;
         }, '');
     };
+    (0, react_1.useEffect)(() => {
+        if (!isVideo || !sectionRef.current || !videoRef.current)
+            return;
+        const video = videoRef.current;
+        const section = sectionRef.current;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                video.style.display = 'block';
+                video.play().catch(() => { });
+            }
+            else {
+                video.style.display = 'none';
+                video.pause();
+            }
+        }, {
+            root: null,
+            rootMargin: '50px',
+            threshold: 0
+        });
+        observer.observe(section);
+        return () => observer.disconnect();
+    }, [isVideo]);
     if (SectionComponent)
         return (0, jsx_runtime_1.jsx)("div", { ref: sectionRef, children: (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children }) });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color]) => (`
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: [layout && ((_g = (_f = section.media) === null || _f === void 0 ? void 0 : _f[layout]) === null || _g === void 0 ? void 0 : _g.url) && ((_j = (_h = section.media) === null || _h === void 0 ? void 0 : _h[layout]) === null || _j === void 0 ? void 0 : _j.size) !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsx)("div", { className: `section-background-wrapper-${section.id}`, children: isVideo ? ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, preload: "auto", className: `video-background-${section.id}`, children: (0, jsx_runtime_1.jsx)("source", { src: (_m = (_l = (_k = section.media) === null || _k === void 0 ? void 0 : _k[layout]) === null || _l === void 0 ? void 0 : _l.url) !== null && _m !== void 0 ? _m : '' }) })) : ((0, jsx_runtime_1.jsx)("img", { src: (_q = (_p = (_o = section.media) === null || _o === void 0 ? void 0 : _o[layout]) === null || _p === void 0 ? void 0 : _p.url) !== null && _q !== void 0 ? _q : '', className: `image-background-${section.id}` })) }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => {
+                    var _a;
+                    return (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};
             position: relative;
             background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
-         }`))}
+         }
+         .section-background-overlay-${section.id} {
+            height: ${getSectionHeight(height)};
+            width: 100%;
+            position: relative;
+            overflow: clip;
+         }
+         .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%;
+            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;
+         }
+         .image-background-${section.id} {
+            object-fit: ${media === null || media === void 0 ? void 0 : media.size};
+            width: 100%;
+            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'};
+         }
+        `);
+                })}
       ${getSectionVisibilityStyles()}
     ` })] }));
 };

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

@@ -25,9 +25,12 @@ const stylesMap = {
     [sdk_1.AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
 };
 const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const id = (0, react_1.useId)();
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { layouts, fonts } = (0, useCntrlContext_1.useCntrlContext)();
+    const fontGoogleTags = fonts === null || fonts === void 0 ? void 0 : fonts.google;
+    const fontAdobeTags = fonts === null || fonts === void 0 ? void 0 : fonts.adobe;
+    const fontCustomTags = new sdk_1.FontFaceGenerator((_a = fonts === null || fonts === void 0 ? void 0 : fonts.custom) !== null && _a !== void 0 ? _a : []).generate();
     const { anchor, blur: itemBlur, opacity: itemOpacity } = (0, useCodeEmbedItem_1.useCodeEmbedItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { html } = item.commonParams;
@@ -36,9 +39,9 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const pos = stylesMap[anchor];
     const layoutValues = [item.area, item.layoutParams];
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
-    const blur = ((_b = (_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.blur) !== null && _b !== void 0 ? _b : itemBlur);
-    const opacity = (_d = (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity) !== null && _d !== void 0 ? _d : itemOpacity;
-    const angle = (_f = (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _e === void 0 ? void 0 : _e.angle) !== null && _f !== void 0 ? _f : itemAngle;
+    const blur = ((_c = (_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.blur) !== null && _c !== void 0 ? _c : itemBlur);
+    const opacity = (_e = (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _d === void 0 ? void 0 : _d.opacity) !== null && _e !== void 0 ? _e : itemOpacity;
+    const angle = (_g = (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _f === void 0 ? void 0 : _f.angle) !== null && _g !== void 0 ? _g : itemAngle;
     (0, react_1.useEffect)(() => {
         if (!ref)
             return;
@@ -59,13 +62,21 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
         const iframe = ref.querySelector(`[data-embed="${item.id}"]`);
         if (!iframe)
             return;
-        iframe.srcdoc = item.commonParams.html;
+        const htmlWithStyles = `
+      ${fontGoogleTags}
+      ${fontAdobeTags}
+      <style>
+        ${fontCustomTags}
+      </style>
+      ${item.commonParams.html}
+    `;
+        iframe.srcdoc = htmlWithStyles;
     }, [item.commonParams.html, item.commonParams.iframe, ref]);
     const isInteractive = opacity !== 0;
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_g = item.link) === null || _g === void 0 ? void 0 : _g.url, target: (_h = item.link) === null || _h === void 0 ? void 0 : _h.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { transition: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-wrapper-${item.id} {
         position: absolute;
         width: 100%;

package/lib/provider/CntrlSdkContext.js

@@ -15,6 +15,7 @@ class CntrlSdkContext {
         this.customItems = customItems;
         this.customSections = customSections;
         this._layouts = [];
+        this._fonts = undefined;
         this.sectionHeightMap = new Map();
     }
     resolveSectionData(sections) {
@@ -33,11 +34,15 @@ class CntrlSdkContext {
     }
     init({ project, article }) {
         this.setLayouts(project.layouts);
+        this.setFonts(project.fonts);
         this.setSectionsHeight(article.sections);
     }
     setLayouts(layouts) {
         this._layouts = layouts;
     }
+    setFonts(fonts) {
+        this._fonts = fonts;
+    }
     setSectionsHeight(sections) {
         for (const section of sections) {
             this.sectionHeightMap.set(section.id, section.height);
@@ -50,6 +55,9 @@ class CntrlSdkContext {
     get layouts() {
         return this._layouts;
     }
+    get fonts() {
+        return this._fonts;
+    }
 }
 exports.CntrlSdkContext = CntrlSdkContext;
 function isDefined(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.6.11",
+  "version": "1.6.13",
   "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.19.4",
+    "@cntrl-site/sdk": "^1.19.6",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/Section/Section.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, useId, useRef } from 'react';
+import { FC, ReactElement, useEffect, useId, useRef, useState, useContext } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   getLayoutMediaQuery,
@@ -10,6 +10,7 @@ import {
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
 import { CntrlColor } from '@cntrl-site/color';
+import { useLayoutContext } from '../useLayoutContext';
 
 type SectionChild = ReactElement<any, any>;
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
@@ -20,13 +21,22 @@ interface Props {
   data?: any;
 }
 
+function isVideoUrl(url: string): boolean {
+  const videoExtensions = ['.mp4', '.webm', '.ogg'];
+  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
+}
+
 export const Section: FC<Props> = ({ section, data, children }) => {
   const id = useId();
   const sectionRef = useRef<HTMLDivElement | null>(null);
   const { layouts, customSections } = useCntrlContext();
-  const layoutValues: Record<string, any>[] = [section.height, section.color];
+  const layout = useLayoutContext();
+  const layoutValues: Record<string, any>[] = [section.height, section.color, section.media ?? {}];
   const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+  const isVideo = layout && section.media?.[layout]?.url ? isVideoUrl(String(section.media?.[layout]?.url)) : false;
+  const videoRef = useRef<HTMLVideoElement | null>(null);
   useSectionRegistry(section.id, sectionRef.current);
+
   const getSectionVisibilityStyles = () => {
     return layouts
       .sort((a, b) => a.startsWith - b.startsWith)
@@ -36,33 +46,110 @@ export const Section: FC<Props> = ({ section, data, children }) => {
           ${acc}
           ${getLayoutMediaQuery(layout.id, layouts)} {
             .section-${section.id} {
-              display: ${isHidden ? 'none': 'block'};
+              display: ${isHidden ? 'none' : 'block'};
             }
           }`;
       }, '');
   };
 
+  useEffect(() => {
+    if (!isVideo || !sectionRef.current || !videoRef.current) return;
+    const video = videoRef.current;
+    const section = sectionRef.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          video.style.display = 'block';
+          video.play().catch(() => {});
+        } else {
+          video.style.display = 'none';
+          video.pause();
+        }
+      },
+      {
+        root: null,
+        rootMargin: '50px',
+        threshold: 0
+      }
+    );
+    observer.observe(section);
+    return () => observer.disconnect();
+  }, [isVideo]);
+
   if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
 
- return (
+  return (
     <>
       <div
         className={`section-${section.id}`}
         id={section.name}
         ref={sectionRef}
       >
+        {layout && section.media?.[layout]?.url && section.media?.[layout]?.size !== 'none' && sectionRef.current && (
+          <div className={`section-background-overlay-${section.id}`}>
+            <div
+              key={`section-background-wrapper-${section.id}`}
+              className={`section-background-wrapper-${section.id}`}
+            >
+              {isVideo ? (
+                <video
+                  ref={videoRef}
+                  autoPlay
+                  loop
+                  muted
+                  playsInline
+                  preload="auto"
+                  className={`video-background-${section.id}`}
+                >
+                  <source src={section.media?.[layout]?.url ?? ''} />
+                </video>
+              ) : (
+                <img src={section.media?.[layout]?.url ?? ''} className={`image-background-${section.id}`} />
+              )}
+            </div>
+          </div>
+        )}
         {children}
       </div>
       <JSXStyle id={id}>{`
       ${
-        getLayoutStyles(layouts, layoutValues, ([height, color]) => (`
+    getLayoutStyles(layouts, layoutValues, ([height, color, media]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};
             position: relative;
             background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
-         }`
-        ))
-      }
+         }
+         .section-background-overlay-${section.id} {
+            height: ${getSectionHeight(height)};
+            width: 100%;
+            position: relative;
+            overflow: clip;
+         }
+         .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%;
+            height: ${media?.position === 'fixed' ? '100vh' : '100%'};
+            position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
+            top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
+            left: 0;
+         }
+         .image-background-${section.id} {
+            object-fit: ${media?.size};
+            width: 100%;
+            height: ${media?.position === 'fixed' ? '100vh' : '100%'};
+            position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
+            top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
+         }
+        `
+    ))
+    }
       ${getSectionVisibilityStyles()}
     `}</JSXStyle>
     </>

package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx

@@ -1,9 +1,9 @@
-import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
+import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor, FontFaceGenerator } from '@cntrl-site/sdk';
 import { FC, useEffect, useId, useState } from 'react';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
-import { useRegisterResize } from "../../../common/useRegisterResize";
+import { useRegisterResize } from '../../../common/useRegisterResize';
 import { useItemAngle } from '../useItemAngle';
 import { LinkWrapper } from '../LinkWrapper';
 import { useCodeEmbedItem } from './useCodeEmbedItem';
@@ -22,7 +22,10 @@ const stylesMap = {
 
 export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
-  const { layouts } = useCntrlContext();
+  const { layouts, fonts } = useCntrlContext();
+  const fontGoogleTags = fonts?.google;
+  const fontAdobeTags = fonts?.adobe;
+  const fontCustomTags = new FontFaceGenerator(fonts?.custom ?? []).generate();
   const { anchor, blur: itemBlur, opacity: itemOpacity } = useCodeEmbedItem(item, sectionId);
   const itemAngle = useItemAngle(item, sectionId);
   const { html } = item.commonParams;
@@ -47,14 +50,23 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
       script.parentNode!.removeChild(script);
       ref.appendChild(newScript);
     }
-  }, [item.commonParams.html])
+  }, [item.commonParams.html]);
 
   useEffect(() => {
     if (!ref) return;
     const iframe: HTMLIFrameElement | null = ref.querySelector(`[data-embed="${item.id}"]`);
     if (!iframe) return;
-    iframe.srcdoc = item.commonParams.html;
+    const htmlWithStyles = `
+      ${fontGoogleTags}
+      ${fontAdobeTags}
+      <style>
+        ${fontCustomTags}
+      </style>
+      ${item.commonParams.html}
+    `;
+    iframe.srcdoc = htmlWithStyles;
   }, [item.commonParams.html, item.commonParams.iframe, ref]);
+
   const isInteractive = opacity !== 0;
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
@@ -69,7 +81,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
           ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
           ...(opacity !== undefined ? { opacity } : {}),
           transition: stateParams?.transition ?? 'none'
-      }}
+        }}
         ref={setRef}
       >
         {item.commonParams.iframe ? (
@@ -102,7 +114,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
         border: none;
       }
       ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams], exemplary) => {
-        return (`
+      return (`
           .embed-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
@@ -113,7 +125,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
             height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
           }
         `);
-      })}
+    })}
     `}</JSXStyle>
     </LinkWrapper>
   );

package/src/provider/CntrlSdkContext.ts

@@ -9,6 +9,7 @@ interface SdkContextInitProps {
 
 export class CntrlSdkContext {
   private _layouts: Layout[] = [];
+  private _fonts?: Project['fonts'] = undefined;
   private sectionHeightMap: Map<string, Record<string, SectionHeight>> = new Map();
   constructor(
     public readonly customItems: CustomItemRegistry,
@@ -31,6 +32,7 @@ export class CntrlSdkContext {
 
   init({ project, article }: SdkContextInitProps) {
     this.setLayouts(project.layouts);
+    this.setFonts(project.fonts);
     this.setSectionsHeight(article.sections);
   }
 
@@ -38,9 +40,13 @@ export class CntrlSdkContext {
     this._layouts = layouts;
   }
 
+  private setFonts(fonts: Project['fonts']) {
+    this._fonts = fonts;
+  }
+
   setSectionsHeight(sections: Section[]) {
     for (const section of sections) {
-      this.sectionHeightMap.set(section.id, section.height)
+      this.sectionHeightMap.set(section.id, section.height);
     }
   }
 
@@ -52,6 +58,10 @@ export class CntrlSdkContext {
   get layouts(): Layout[] {
     return this._layouts;
   }
+
+  get fonts(): Project['fonts'] | undefined {
+    return this._fonts;
+  }
 }
 
 function isDefined<T>(value: T): value is Exclude<T, undefined> {

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -27,7 +27,7 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
   getSectionScroll(sectionId: string): number {
     const sectionTop = this.sectionsScrollMap.get(sectionId);
     if (sectionTop === undefined) return 0;
-    return - (sectionTop / this.articleWidth - this.scrollPos);
+    return -(sectionTop / this.articleWidth - this.scrollPos);
   }
 
   getSectionTop(sectionId: string): number {

package/src/utils/getCompoundBondaryStyles.ts

@@ -54,7 +54,6 @@ export function getCompoundTransform(compoundSettings: CompoundSettings | undefi
   return `translate(${kx * (-100)}%, ${ky * (-100)}%)`;
 }
 
-
 type CompoundSettings = {
   positionAnchor: AreaAnchor;
   widthMode: DimensionMode;