npm - @cntrl-site/sdk-nextjs - Versions diffs - 1.9.54 → 1.9.55-2 - Mend

@cntrl-site/sdk-nextjs 1.9.54 → 1.9.55-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/lib/components/ScrollPlaybackVideo.js +5 -3
package/lib/components/items/ComponentItem/ComponentItem.js +13 -6
package/lib/components/items/FileItem/VideoItem.js +13 -12
package/lib/index.js +4 -1
package/lib/provider/CntrlSdkContext.js +26 -1
package/lib/utils/evaluateComponentBundle.js +92 -0
package/package.json +4 -3
package/src/components/Page.tsx +6 -0
package/src/components/ScrollPlaybackVideo.tsx +5 -3
package/src/components/items/ComponentItem/ComponentItem.tsx +12 -2
package/src/components/items/FileItem/VideoItem.tsx +2 -1
package/src/index.ts +2 -1
package/src/provider/CntrlSdkContext.ts +31 -2
package/src/types/components-utils.d.ts +7 -0
package/src/utils/evaluateComponentBundle.ts +83 -0

package/lib/components/ScrollPlaybackVideo.js CHANGED Viewed

@@ -19,12 +19,14 @@ const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className,
     (0, react_1.useEffect)(() => {
         if (!playbackParams || !articleRectObserver)
             return;
+        const from = playbackParams.from;
+        const to = playbackParams.to;
         return articleRectObserver.on('scroll', () => {
             const scrollPos = articleRectObserver.getSectionScroll(sectionId);
-            const time = (0, rangeMap_1.rangeMap)(scrollPos, playbackParams.from, playbackParams.to, 0, 1, true);
-            setTime(toFixed(time));
+            const nextTime = (0, rangeMap_1.rangeMap)(scrollPos, from, to, 0, 1, true);
+            setTime(toFixed(nextTime));
         });
-    }, [playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.from, playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.to, time, articleRectObserver]);
+    }, [sectionId, playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.from, playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.to, articleRectObserver]);
     const scrollVideoManager = (0, react_1.useMemo)(() => {
         if (!containerElement)
             return null;

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

@@ -16,11 +16,13 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const useLayoutContext_1 = require("../../useLayoutContext");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
     const { layouts } = sdk;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const fallbackLayout = (_a = layouts[0]) === null || _a === void 0 ? void 0 : _a.id;
+    const effectiveLayout = layout !== null && layout !== void 0 ? layout : fallbackLayout;
     const layoutValues = [item.area, item.layoutParams];
     const component = sdk.getComponent(item.commonParams.componentId);
     const [ref, setRef] = (0, react_1.useState)(null);
@@ -28,12 +30,17 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle', 'blur']);
-    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);
-    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _d === void 0 ? void 0 : _d.blur, itemBlur);
     const Element = component ? component.element : undefined;
-    const parameters = layout ? item.layoutParams[layout].parameters : undefined;
-    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(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: { itemId: item.id }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
+    const layoutParameters = effectiveLayout ? (_e = item.layoutParams[effectiveLayout]) === null || _e === void 0 ? void 0 : _e.parameters : undefined;
+    const commonParameters = item.commonParams.parameters;
+    const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: Object.assign(Object.assign({}, layoutParameters.settings), commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
+                        itemId: item.id,
+                        submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
+                    }, portalId: "component-portal", 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%;

package/lib/components/items/FileItem/VideoItem.js CHANGED Viewed

@@ -22,7 +22,7 @@ const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const reactId = (0, react_1.useId)();
     const id = `${reactId}-video-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -49,17 +49,18 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
     const scrollPlayback = layoutParams ? layoutParams.scrollPlayback : null;
     const layoutValues = [item.area, item.layoutParams];
-    const hasScrollPlayback = scrollPlayback !== null;
+    const isHiddenOnLayout = layoutId ? ((_d = item.hidden[layoutId]) !== null && _d !== void 0 ? _d : false) : false;
+    const hasScrollPlayback = scrollPlayback !== null && !isHiddenOnLayout;
     const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
     const videoStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius', 'strokeFill']);
-    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _d === void 0 ? void 0 : _d.angle, itemAngle);
-    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _e === void 0 ? void 0 : _e.opacity, itemOpacity);
-    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.blur, itemBlur);
-    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.strokeWidth, itemStrokeWidth);
-    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.radius, itemRadius);
-    const strokeFill = (_l = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = (_j = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.styles) === null || _j === void 0 ? void 0 : _j.strokeFill) === null || _k === void 0 ? void 0 : _k[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _l !== void 0 ? _l : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _e === void 0 ? void 0 : _e.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.blur, itemBlur);
+    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.strokeWidth, itemStrokeWidth);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.radius, itemRadius);
+    const strokeFill = (_m = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_l = (_k = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.styles) === null || _k === void 0 ? void 0 : _k.strokeFill) === null || _l === void 0 ? void 0 : _l[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _m !== void 0 ? _m : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
     const stroke = strokeFill
-        ? (_m = (0, getFill_1.getFill)(strokeFill)) !== null && _m !== void 0 ? _m : 'transparent'
+        ? (_o = (0, getFill_1.getFill)(strokeFill)) !== null && _o !== void 0 ? _o : 'transparent'
         : 'transparent';
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
@@ -76,7 +77,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         borderColor: stroke,
         borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
         borderStyle: 'solid'
-    } : {})), { transition: (_o = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _o !== void 0 ? _o : 'none' });
+    } : {})), { transition: (_p = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _p !== void 0 ? _p : 'none' });
     const isInteractive = opacity !== 0;
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
@@ -99,7 +100,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         observer.observe(ref);
         return () => observer.disconnect();
     }, [layoutParams, videoRef, ref, userPaused, isVideoInteracted]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_p = item.link) === null || _p === void 0 ? void 0 : _p.url, target: (_q = item.link) === null || _q === void 0 ? void 0 : _q.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_r = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _r !== void 0 ? _r : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}`, scrollPlaybackFrameData: item.commonParams.scrollPlaybackFrameData, frameBaseUrl: (_s = item.commonParams.scrollPlaybackFrameData) === null || _s === void 0 ? void 0 : _s.framesUrl })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_t = item.commonParams.coverUrl) !== null && _t !== void 0 ? _t : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_q = item.link) === null || _q === void 0 ? void 0 : _q.url, target: (_r = item.link) === null || _r === void 0 ? void 0 : _r.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_s = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _s !== void 0 ? _s : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}`, scrollPlaybackFrameData: item.commonParams.scrollPlaybackFrameData, frameBaseUrl: (_t = item.commonParams.scrollPlaybackFrameData) === null || _t === void 0 ? void 0 : _t.framesUrl })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_u = item.commonParams.coverUrl) !== null && _u !== void 0 ? _u : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
                                     setIsVideoInteracted(true);
                                 }, muted: layoutParams.muted, onPlay: () => {
                                     setIsVideoPlaying(true);
@@ -122,7 +123,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
                                         return;
                                     setIsVideoInteracted(true);
                                     videoRef.play();
-                                }, src: (_u = item.commonParams.coverUrl) !== null && _u !== void 0 ? _u : '', className: `video-cover-${item.id}`, onClick: () => {
+                                }, src: (_v = item.commonParams.coverUrl) !== null && _v !== void 0 ? _v : '', className: `video-cover-${item.id}`, onClick: () => {
                                     if (!videoRef)
                                         return;
                                     setIsVideoInteracted(true);

package/lib/index.js CHANGED Viewed

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 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;
+exports.cntrlSdkContext = exports.customSections = exports.customItems = exports.resolveCustomComponents = exports.evaluateComponentBundle = 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");
@@ -47,6 +47,9 @@ var CntrlProvider_1 = require("./provider/CntrlProvider");
 Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
 var useCntrlContext_1 = require("./provider/useCntrlContext");
 Object.defineProperty(exports, "useCntrlContext", { enumerable: true, get: function () { return useCntrlContext_1.useCntrlContext; } });
+var evaluateComponentBundle_1 = require("./utils/evaluateComponentBundle");
+Object.defineProperty(exports, "evaluateComponentBundle", { enumerable: true, get: function () { return evaluateComponentBundle_1.evaluateComponentBundle; } });
+Object.defineProperty(exports, "resolveCustomComponents", { enumerable: true, get: function () { return evaluateComponentBundle_1.resolveCustomComponents; } });
 exports.customItems = defaultContext_1.cntrlSdkContext.customItems;
 exports.customSections = defaultContext_1.cntrlSdkContext.customSections;
 exports.cntrlSdkContext = defaultContext_1.cntrlSdkContext;

package/lib/provider/CntrlSdkContext.js CHANGED Viewed

@@ -17,6 +17,8 @@ class CntrlSdkContext {
         this.customSections = customSections;
         this._layouts = [];
         this._fonts = undefined;
+        this._projectId = undefined;
+        this._publicApiBase = undefined;
         this.sectionHeightMap = new Map();
         this.components = new Map();
     }
@@ -34,12 +36,30 @@ 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, article }) {
+    init({ project, article, customComponents }) {
+        this._projectId = project.id;
         this.setLayouts(project.layouts);
         this.setComponents(components_1.components);
+        if (customComponents) {
+            this.setCustomComponents(customComponents);
+        }
         this.setFonts(project.fonts);
         this.setSectionsHeight(article.sections);
     }
+    setPublicApiBase(url) {
+        this._publicApiBase = url;
+    }
+    get projectId() {
+        return this._projectId;
+    }
+    get publicApiBase() {
+        return this._publicApiBase;
+    }
+    getSubmitUrl(pluginConfigId) {
+        if (!this._publicApiBase || !this._projectId || !pluginConfigId)
+            return undefined;
+        return `${this._publicApiBase}/projects/${this._projectId}/forms/${pluginConfigId}/submit`;
+    }
     setLayouts(layouts) {
         this._layouts = layouts;
     }
@@ -48,6 +68,11 @@ class CntrlSdkContext {
             this.components.set(component.id, component);
         }
     }
+    setCustomComponents(customComponents) {
+        for (const [id, component] of customComponents) {
+            this.components.set(id, component);
+        }
+    }
     setFonts(fonts) {
         this._fonts = fonts;
     }

package/lib/utils/evaluateComponentBundle.js ADDED Viewed

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveCustomComponents = exports.evaluateComponentBundle = void 0;
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const jsxRuntime = __importStar(require("react/jsx-runtime"));
+const componentUtils = __importStar(require("@cntrl-site/components/utils"));
+let globalsInitialized = false;
+function ensureGlobals() {
+    if (globalsInitialized)
+        return;
+    globalThis.__CNTRL_REACT__ = react_1.default;
+    globalThis.__CNTRL_REACT_DOM__ = react_dom_1.default;
+    globalThis.__CNTRL_JSX_RUNTIME__ = jsxRuntime;
+    globalThis.__CNTRL_COMPONENT_UTILS__ = componentUtils;
+    globalsInitialized = true;
+}
+function transformEsmToEvaluatable(code) {
+    let transformed = code;
+    let hasDefault = false;
+    transformed = transformed.replace(/export\s*\{\s*(\w+)\s+as\s+default\s*\}\s*;?/g, (_, name) => { hasDefault = true; return `var __cntrl_default_export__ = ${name};`; });
+    transformed = transformed.replace(/export\s+default\s+/g, () => { hasDefault = true; return 'var __cntrl_default_export__ = '; });
+    transformed = transformed.replace(/export\s*\{\s*([^}]*)\}\s*;?/g, (_, names) => {
+        if (!hasDefault) {
+            const firstName = names.split(',')[0].trim().split(/\s+/)[0];
+            if (firstName) {
+                hasDefault = true;
+                return `var __cntrl_default_export__ = ${firstName};`;
+            }
+        }
+        return '';
+    });
+    return `${transformed}\nreturn __cntrl_default_export__;`;
+}
+function evaluateComponentBundle(bundleCode) {
+    ensureGlobals();
+    const evaluatable = transformEsmToEvaluatable(bundleCode);
+    const fn = new Function(evaluatable);
+    return fn();
+}
+exports.evaluateComponentBundle = evaluateComponentBundle;
+const resolvedCache = new Map();
+function resolveCustomComponents(bundles, schemas) {
+    var _a;
+    const result = new Map();
+    for (const [id, code] of Object.entries(bundles)) {
+        try {
+            let element = resolvedCache.get(id);
+            if (!element) {
+                element = evaluateComponentBundle(code);
+                resolvedCache.set(id, element);
+            }
+            result.set(id, {
+                id,
+                name: id,
+                element,
+                schema: (_a = schemas === null || schemas === void 0 ? void 0 : schemas[id]) !== null && _a !== void 0 ? _a : {}
+            });
+        }
+        catch (err) {
+            console.error(`Failed to evaluate custom component bundle "${id}":`, err);
+        }
+    }
+    return result;
+}
+exports.resolveCustomComponents = resolveCustomComponents;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.54",
+  "version": "1.9.55-2",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,9 +31,9 @@
   "dependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^0.1.34",
+    "@cntrl-site/components": "^1.0.1-alpha.16",
     "@cntrl-site/effects": "^1.4.0",
-    "@cntrl-site/sdk": "^1.25.12",
+    "@cntrl-site/sdk": "^1.26.1",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",
@@ -48,6 +48,7 @@
     "@types/jest": "^29.5.12",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.3.7",
     "cross-env": "^10.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package/src/components/Page.tsx CHANGED Viewed

@@ -8,12 +8,18 @@ import { Keyframes } from '../provider/Keyframes';
 import { ItemGeometryContext } from '../ItemGeometry/ItemGeometryContext';
 import { ItemGeometryService } from '../ItemGeometry/ItemGeometryService';
+export interface CustomComponentBundlesData {
+  bundles: Record<string, string>;
+  schemas: Record<string, Record<string, unknown>>;
+}
 export interface PageProps {
   article: TArticle;
   project: Project;
   meta: Meta;
   keyframes: KeyframeAny[];
   sectionData: Record<SectionName, any>;
+  customComponentBundles?: CustomComponentBundlesData;
 }
 export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData }) => {

package/src/components/ScrollPlaybackVideo.tsx CHANGED Viewed

@@ -28,12 +28,14 @@ export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams,
   useEffect(() => {
     if (!playbackParams || !articleRectObserver) return;
+    const from = playbackParams.from;
+    const to = playbackParams.to;
     return articleRectObserver.on('scroll', () => {
       const scrollPos = articleRectObserver.getSectionScroll(sectionId);
-      const time = rangeMap(scrollPos, playbackParams.from, playbackParams.to, 0, 1, true);
-      setTime(toFixed(time));
+      const nextTime = rangeMap(scrollPos, from, to, 0, 1, true);
+      setTime(toFixed(nextTime));
     });
-  }, [playbackParams?.from, playbackParams?.to, time, articleRectObserver]);
+  }, [sectionId, playbackParams?.from, playbackParams?.to, articleRectObserver]);
   const scrollVideoManager = useMemo<ScrollPlaybackVideoManager | null>(() => {
     if (!containerElement) return null;

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

@@ -15,6 +15,8 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
   const { layouts } = sdk;
   const itemAngle = useItemAngle(item, sectionId);
   const layout = useLayoutContext();
+  const fallbackLayout = layouts[0]?.id;
+  const effectiveLayout = layout ?? fallbackLayout;
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const component = sdk.getComponent(item.commonParams.componentId);
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
@@ -26,7 +28,12 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
   const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);
   const Element = component ? component.element : undefined;
-  const parameters = layout ? item.layoutParams[layout].parameters : undefined;
+  const layoutParameters = effectiveLayout ? item.layoutParams[effectiveLayout]?.parameters : undefined;
+  const commonParameters = (item.commonParams as any).parameters;
+  const parameters = layoutParameters ? {
+    ...layoutParameters,
+    settings: { ...layoutParameters.settings, ...commonParameters?.settings }
+  } : undefined;
   return (
     <>
@@ -43,7 +50,10 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
       >
         {parameters && Element && (
           <Element
-            metadata={{ itemId: item.id }}
+            metadata={{
+              itemId: item.id,
+              submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
+            }}
             portalId="component-portal"
             content={item.commonParams.content}
             {...parameters}

package/src/components/items/FileItem/VideoItem.tsx CHANGED Viewed

@@ -49,7 +49,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const rectHeight = Math.floor(rect?.height ?? 0);
   const scrollPlayback = layoutParams ? layoutParams.scrollPlayback : null;
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const hasScrollPlayback = scrollPlayback !== null;
+  const isHiddenOnLayout = layoutId ? (item.hidden[layoutId] ?? false) : false;
+  const hasScrollPlayback = scrollPlayback !== null && !isHiddenOnLayout;
   const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'opacity', 'blur']);
   const videoStateParams = interactionCtrl?.getState<any>(['strokeWidth', 'radius', 'strokeFill']);
   const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);

package/src/index.ts CHANGED Viewed

@@ -3,7 +3,7 @@ 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';
+export type { PageProps, CustomComponentBundlesData } from './components/Page';
 export { CNTRLHead as Head } from './components/Head';
 export { Article } from './components/Article';
 export { Section } from './components/Section/Section';
@@ -19,6 +19,7 @@ export { YoutubeEmbedItem } from './components/items/EmbedVideoItem/YoutubeEmbed
 export { CntrlProvider } from './provider/CntrlProvider';
 export type { CustomItemComponent } from './provider/CustomItemTypes';
 export { useCntrlContext } from './provider/useCntrlContext';
+export { evaluateComponentBundle, resolveCustomComponents } from './utils/evaluateComponentBundle';
 export const customItems = sdk.customItems;
 export const customSections = sdk.customSections;
 export const cntrlSdkContext = sdk;

package/src/provider/CntrlSdkContext.ts CHANGED Viewed

@@ -2,16 +2,18 @@ import { CustomItemRegistry } from './CustomItemRegistry';
 import { Article, Section, Layout, Project, SectionHeight } from '@cntrl-site/sdk';
 import { components, Component as TComponent } from '@cntrl-site/components';
 import { CustomSectionRegistry } from './CustomSectionRegistry';
-import { Component } from 'react';
 interface SdkContextInitProps {
   project: Project;
   article: Article;
+  customComponents?: Map<string, TComponent>;
 }
 export class CntrlSdkContext {
   private _layouts: Layout[] = [];
   private _fonts?: Project['fonts'] = undefined;
+  private _projectId?: string = undefined;
+  private _publicApiBase?: string = undefined;
   private sectionHeightMap: Map<string, Record<string, SectionHeight>> = new Map();
   private components: Map<string, TComponent> = new Map();
@@ -34,13 +36,34 @@ export class CntrlSdkContext {
     );
   }
-  init({ project, article }: SdkContextInitProps) {
+  init({ project, article, customComponents }: SdkContextInitProps) {
+    this._projectId = project.id;
     this.setLayouts(project.layouts);
     this.setComponents(components);
+    if (customComponents) {
+      this.setCustomComponents(customComponents);
+    }
     this.setFonts(project.fonts);
     this.setSectionsHeight(article.sections);
   }
+  setPublicApiBase(url: string) {
+    this._publicApiBase = url;
+  }
+  get projectId(): string | undefined {
+    return this._projectId;
+  }
+  get publicApiBase(): string | undefined {
+    return this._publicApiBase;
+  }
+  getSubmitUrl(pluginConfigId: string | undefined): string | undefined {
+    if (!this._publicApiBase || !this._projectId || !pluginConfigId) return undefined;
+    return `${this._publicApiBase}/projects/${this._projectId}/forms/${pluginConfigId}/submit`;
+  }
   setLayouts(layouts: Layout[]) {
     this._layouts = layouts;
   }
@@ -51,6 +74,12 @@ export class CntrlSdkContext {
     }
   }
+  setCustomComponents(customComponents: Map<string, TComponent>) {
+    for (const [id, component] of customComponents) {
+      this.components.set(id, component);
+    }
+  }
   private setFonts(fonts: Project['fonts']) {
     this._fonts = fonts;
   }

package/src/types/components-utils.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+declare module '@cntrl-site/components/utils' {
+  export function scalingValue(value: number, isEditor?: boolean): string;
+  export function useScopedStyles(): { prefix: string; cls: (name: string) => string };
+  export function getColorAlpha(color: string): number;
+  export function getPositionStyles(position: any): Record<string, any>;
+  export function getImageRect(rect: any): Record<string, any>;
+}

package/src/utils/evaluateComponentBundle.ts ADDED Viewed

@@ -0,0 +1,83 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import * as jsxRuntime from 'react/jsx-runtime';
+import { Component as TComponent } from '@cntrl-site/components';
+import * as componentUtils from '@cntrl-site/components/utils';
+let globalsInitialized = false;
+function ensureGlobals() {
+  if (globalsInitialized) return;
+  (globalThis as any).__CNTRL_REACT__ = React;
+  (globalThis as any).__CNTRL_REACT_DOM__ = ReactDOM;
+  (globalThis as any).__CNTRL_JSX_RUNTIME__ = jsxRuntime;
+  (globalThis as any).__CNTRL_COMPONENT_UTILS__ = componentUtils;
+  globalsInitialized = true;
+}
+function transformEsmToEvaluatable(code: string): string {
+  let transformed = code;
+  let hasDefault = false;
+  transformed = transformed.replace(
+    /export\s*\{\s*(\w+)\s+as\s+default\s*\}\s*;?/g,
+    (_, name) => { hasDefault = true; return `var __cntrl_default_export__ = ${name};`; }
+  );
+  transformed = transformed.replace(
+    /export\s+default\s+/g,
+    () => { hasDefault = true; return 'var __cntrl_default_export__ = '; }
+  );
+  transformed = transformed.replace(
+    /export\s*\{\s*([^}]*)\}\s*;?/g,
+    (_, names) => {
+      if (!hasDefault) {
+        const firstName = names.split(',')[0].trim().split(/\s+/)[0];
+        if (firstName) {
+          hasDefault = true;
+          return `var __cntrl_default_export__ = ${firstName};`;
+        }
+      }
+      return '';
+    }
+  );
+  return `${transformed}\nreturn __cntrl_default_export__;`;
+}
+export function evaluateComponentBundle(
+  bundleCode: string
+): (props: any) => React.ReactElement {
+  ensureGlobals();
+  const evaluatable = transformEsmToEvaluatable(bundleCode);
+  const fn = new Function(evaluatable);
+  return fn();
+}
+const resolvedCache = new Map<string, (props: any) => React.ReactElement>();
+export function resolveCustomComponents(
+  bundles: Record<string, string>,
+  schemas?: Record<string, Record<string, unknown>>
+): Map<string, TComponent> {
+  const result = new Map<string, TComponent>();
+  for (const [id, code] of Object.entries(bundles)) {
+    try {
+      let element = resolvedCache.get(id);
+      if (!element) {
+        element = evaluateComponentBundle(code);
+        resolvedCache.set(id, element);
+      }
+      result.set(id, {
+        id,
+        name: id,
+        element,
+        schema: schemas?.[id] ?? {}
+      } as TComponent);
+    } catch (err) {
+      console.error(`Failed to evaluate custom component bundle "${id}":`, err);
+    }
+  }
+  return result;
+}