@cntrl-site/sdk-nextjs 1.9.53 → 1.9.55-1

package/lib/components/ScrollPlaybackVideo.js

@@ -6,10 +6,16 @@ const react_1 = require("react");
 const rangeMap_1 = require("../utils/rangeMap");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
 const sdk_1 = require("@cntrl-site/sdk");
-const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className }) => {
+const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className, scrollPlaybackFrameData, frameBaseUrl }) => {
     const [containerElement, setContainerElement] = (0, react_1.useState)(null);
     const [time, setTime] = (0, react_1.useState)(0);
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const hasServerFrames = (scrollPlaybackFrameData === null || scrollPlaybackFrameData === void 0 ? void 0 : scrollPlaybackFrameData.status) === 'ready'
+        && scrollPlaybackFrameData.batchId
+        && scrollPlaybackFrameData.frameCount
+        && scrollPlaybackFrameData.frameRate
+        && scrollPlaybackFrameData.frameFormat
+        && frameBaseUrl;
     (0, react_1.useEffect)(() => {
         if (!playbackParams || !articleRectObserver)
             return;
@@ -24,12 +30,17 @@ const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className
     const scrollVideoManager = (0, react_1.useMemo)(() => {
         if (!containerElement)
             return null;
-        const manager = new sdk_1.ScrollPlaybackVideoManager({
-            src,
-            videoContainer: containerElement
-        });
+        const manager = new sdk_1.ScrollPlaybackVideoManager(Object.assign({ src, videoContainer: containerElement }, (hasServerFrames ? {
+            frameData: {
+                batchId: scrollPlaybackFrameData.batchId,
+                frameCount: scrollPlaybackFrameData.frameCount,
+                frameRate: scrollPlaybackFrameData.frameRate,
+                frameFormat: scrollPlaybackFrameData.frameFormat
+            },
+            frameBaseUrl
+        } : {})));
         return manager;
-    }, [containerElement, src]);
+    }, [containerElement, src, hasServerFrames, frameBaseUrl]);
     (0, react_1.useEffect)(() => {
         return () => {
             scrollVideoManager === null || scrollVideoManager === void 0 ? void 0 : scrollVideoManager.destroy();

package/lib/components/Section/Section.js

@@ -18,7 +18,8 @@ const checkOverflowClipSupport_1 = require("../../utils/checkOverflowClipSupport
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 const Section = ({ section, data, children, zIndex }) => {
     var _a;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-section-${section.id}`;
     const sectionRef = (0, react_1.useRef)(null);
     const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();

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

@@ -27,7 +27,8 @@ const stylesMap = {
 };
 const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-codeembed-${item.id}`;
     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;

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

@@ -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/CompoundItem/CompoundChild.js

@@ -25,7 +25,8 @@ const useItemArea_1 = require("../useItemArea");
 const noop = () => null;
 const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-compound-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
     const exemplary = (0, useExemplary_1.useExemplary)();

package/lib/components/items/CompoundItem/CompoundItem.js

@@ -19,7 +19,8 @@ const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const ItemGeometryContext_1 = require("../../../ItemGeometry/ItemGeometryContext");
 const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-compounditem-${item.id}`;
     const { items } = item;
     const itemIds = items ? items.map(item => item.id) : [];
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);

package/lib/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -28,7 +28,8 @@ const useLayoutContext_1 = require("../../useLayoutContext");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-vimeo-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();

package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -20,7 +20,8 @@ const useLayoutContext_1 = require("../../useLayoutContext");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-youtube-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { url } = item.commonParams;
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();

package/lib/components/items/FileItem/ImageItem.js

@@ -22,7 +22,8 @@ const getFill_1 = require("../../../utils/getFill");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-image-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, opacity: itemOpacity, strokeFill: itemStrokeFill, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);

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

@@ -22,8 +22,9 @@ 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;
-    const id = (0, react_1.useId)();
+    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)();
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
@@ -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: (_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}` })), 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/components/items/GroupItem/GroupItem.js

@@ -20,7 +20,8 @@ const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const ItemGeometryContext_1 = require("../../../ItemGeometry/ItemGeometryContext");
 const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
     var _a, _b, _c, _d, _e, _f;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-group-${item.id}`;
     const { items } = item;
     const itemIds = items ? items.map(item => item.id) : [];
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);

package/lib/components/items/Item.js

@@ -40,7 +40,8 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const itemInnerRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const keyframesRepo = (0, react_1.useContext)(KeyframesContext_1.KeyframesContext);
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-item-${item.id}`;
     const keyframes = (0, react_1.useMemo)(() => keyframesRepo.getItemKeyframes(item.id), [keyframesRepo, item.id]);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();

package/lib/components/items/RectangleItem/RectangleItem.js

@@ -20,7 +20,8 @@ const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisibl
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-rect-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);

package/lib/components/items/RichTextItem/RichTextItem.js

@@ -22,7 +22,8 @@ const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const RichTextGeometryController_1 = require("../../../ItemGeometry/RichTextGeometryController");
 const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-richtext-${item.id}`;
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);

package/lib/index.js

@@ -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

@@ -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

@@ -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

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.53",
+  "version": "1.9.55-1",
   "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.15",
     "@cntrl-site/effects": "^1.4.0",
-    "@cntrl-site/sdk": "^1.25.11",
+    "@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

@@ -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

@@ -1,7 +1,7 @@
 import React, { FC, useContext, useEffect, useMemo, useState } from 'react';
 import { rangeMap } from '../utils/rangeMap';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
-import { ScrollPlaybackVideoManager } from '@cntrl-site/sdk';
+import { ScrollPlaybackVideoManager, ScrollPlaybackFrameData } from '@cntrl-site/sdk';
 
 type PlaybackParams = { from: number, to: number };
 
@@ -11,12 +11,20 @@ interface Props {
   playbackParams: PlaybackParams | null;
   style?: React.CSSProperties;
   className: string;
+  scrollPlaybackFrameData?: ScrollPlaybackFrameData | null;
+  frameBaseUrl?: string;
 }
 
-export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams, style, className }) => {
+export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams, style, className, scrollPlaybackFrameData, frameBaseUrl }) => {
   const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
   const [time, setTime] = useState(0);
   const articleRectObserver = useContext(ArticleRectContext);
+  const hasServerFrames = scrollPlaybackFrameData?.status === 'ready'
+    && scrollPlaybackFrameData.batchId
+    && scrollPlaybackFrameData.frameCount
+    && scrollPlaybackFrameData.frameRate
+    && scrollPlaybackFrameData.frameFormat
+    && frameBaseUrl;
 
   useEffect(() => {
     if (!playbackParams || !articleRectObserver) return;
@@ -33,10 +41,19 @@ export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams,
     if (!containerElement) return null;
     const manager = new ScrollPlaybackVideoManager({
       src,
-      videoContainer: containerElement
+      videoContainer: containerElement,
+      ...(hasServerFrames ? {
+        frameData: {
+          batchId: scrollPlaybackFrameData.batchId!,
+          frameCount: scrollPlaybackFrameData.frameCount!,
+          frameRate: scrollPlaybackFrameData.frameRate!,
+          frameFormat: scrollPlaybackFrameData.frameFormat!
+        },
+        frameBaseUrl
+      } : {})
     });
     return manager;
-  }, [containerElement, src]);
+  }, [containerElement, src, hasServerFrames, frameBaseUrl]);
 
   useEffect(() => {
     return () => {

package/src/components/Section/Section.tsx

@@ -26,7 +26,8 @@ interface Props {
 }
 
 export const Section: FC<Props> = ({ section, data, children, zIndex }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-section-${section.id}`;
   const sectionRef = useRef<HTMLDivElement | null>(null);
   const { layouts, customSections } = useCntrlContext();
   const layout = useLayoutContext();

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

@@ -22,7 +22,8 @@ const stylesMap = {
 };
 
 export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-codeembed-${item.id}`;
   const { layouts, fonts } = useCntrlContext();
   const fontGoogleTags = fonts?.google;
   const fontAdobeTags = fonts?.adobe;

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

@@ -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/CompoundItem/CompoundChild.tsx

@@ -36,7 +36,8 @@ interface ChildItemProps {
 const noop = () => null;
 
 export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVisible = true }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-compound-${item.id}`;
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
   const exemplary = useExemplary();

package/src/components/items/CompoundItem/CompoundItem.tsx

@@ -13,7 +13,8 @@ import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 import { ItemGeometryContext } from '../../../ItemGeometry/ItemGeometryContext';
 
 export const CompoundItem: FC<ItemProps<TCompoundItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-compounditem-${item.id}`;
   const { items } = item;
   const itemIds = items ? items.map(item => item.id) : [];
   const itemAngle = useItemAngle(item, sectionId);

package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx

@@ -15,7 +15,8 @@ import { useLayoutContext } from '../../useLayoutContext';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-vimeo-${item.id}`;
   const { layouts } = useCntrlContext();
   const {
     radius: itemRadius,

package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx

@@ -15,7 +15,8 @@ import { useLayoutContext } from '../../useLayoutContext';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-youtube-${item.id}`;
   const { layouts } = useCntrlContext();
   const { url } = item.commonParams;
   const layoutId = useLayoutContext();

package/src/components/items/FileItem/ImageItem.tsx

@@ -16,7 +16,8 @@ import { getFill } from '../../../utils/getFill';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-image-${item.id}`;
   const { layouts } = useCntrlContext();
   const layoutId = useLayoutContext();
   const {

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

@@ -17,7 +17,8 @@ import { getFill } from '../../../utils/getFill';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-video-${item.id}`;
   const { layouts } = useCntrlContext();
   const layoutId = useLayoutContext();
   const {
@@ -130,6 +131,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             playbackParams={scrollPlayback}
             style={inlineStyles}
             className={`video video-playback-wrapper video-${item.id}`}
+            scrollPlaybackFrameData={item.commonParams.scrollPlaybackFrameData}
+            frameBaseUrl={item.commonParams.scrollPlaybackFrameData?.framesUrl}
           />
         )}
         {hasGLEffect && isFXAllowed && (

package/src/components/items/GroupItem/GroupItem.tsx

@@ -13,7 +13,8 @@ import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 import { ItemGeometryContext } from '../../../ItemGeometry/ItemGeometryContext';
 
 export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-group-${item.id}`;
   const { items } = item;
   const itemIds = items ? items.map(item => item.id) : [];
   const itemAngle = useItemAngle(item, sectionId);

package/src/components/items/Item.tsx

@@ -68,7 +68,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const itemInnerRef = useRef<HTMLDivElement | null>(null);
   const rectObserver = useContext(ArticleRectContext);
   const keyframesRepo = useContext(KeyframesContext);
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-item-${item.id}`;
   const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id), [keyframesRepo, item.id]);
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();

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

@@ -14,7 +14,8 @@ import { areFillsVisible } from '../../../utils/areFillsVisible/areFillsVisible'
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-rect-${item.id}`;
   const { layouts } = useCntrlContext();
   const {
     fill: itemFill,

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -16,7 +16,8 @@ import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 import { RichTextGeometryController } from '../../../ItemGeometry/RichTextGeometryController';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-richtext-${item.id}`;
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { layouts } = useCntrlContext();
   const itemAngle = useItemAngle(item, sectionId);

package/src/index.ts

@@ -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

@@ -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

@@ -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

@@ -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;
+}