@gxpl/sdk 0.0.7 → 0.0.8

package/lib/sdk-nextjs/components/items/RectangleItem/RectangleItem.js

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RectangleItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const LinkWrapper_1 = require("../LinkWrapper");
+const useRectangleItem_1 = require("./useRectangleItem");
+const useItemAngle_1 = require("../useItemAngle");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const getFill_1 = require("../../../utils/getFill");
+const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisible");
+const utils_1 = require("../../../../utils");
+const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const id = (0, react_1.useId)();
+    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);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur']);
+    const stateFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['fill']);
+    const stateFillLayers = (_a = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.styles) === null || _a === void 0 ? void 0 : _a.fill;
+    const solidTransition = (_b = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.transition) !== null && _b !== void 0 ? _b : 'none';
+    const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
+    const stateStrokeFillLayers = (_c = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _c === void 0 ? void 0 : _c.strokeFill;
+    const strokeSolidTransition = (_d = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _d !== void 0 ? _d : 'none';
+    const styles = (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _e !== void 0 ? _e : {};
+    const layoutValues = [item.area, item.layoutParams];
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const backdropBlur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.backdropBlur, itemBackdropBlur);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.radius, itemRadius);
+    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.strokeWidth, itemStrokeWidth);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.angle, itemAngle);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.blur, itemBlur);
+    const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
+    const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : []) || (strokeWidth !== 0 && (0, areFillsVisible_1.areFillsVisible)((_g = stateStrokeFillLayers !== null && stateStrokeFillLayers !== void 0 ? stateStrokeFillLayers : itemStrokeFill) !== null && _g !== void 0 ? _g : []));
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    const strokeValue = stateStrokeFillLayers
+        ? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
+        : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
+    const stroke = strokeValue
+        ? (_h = (0, getFill_1.getFill)(strokeValue)) !== null && _h !== void 0 ? _h : 'transparent'
+        : 'transparent';
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_j = item.link) === null || _j === void 0 ? void 0 : _j.url, target: (_k = item.link) === null || _k === void 0 ? void 0 : _k.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeValue ? Object.assign({ '--stroke-background': stroke }, (strokeValue.type === 'image' ? {
+                        backgroundPosition: 'center',
+                        backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                        backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                    } : {})) : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
+                        ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
+                        : {})), { transition: (_l = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _l !== void 0 ? _l : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
+                                backgroundPosition: 'center',
+                                backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                                backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                            } : {
+                                background: stroke,
+                            })) : { background: stroke })) }), itemFill && itemFill.map((fill) => {
+                            var _a, _b;
+                            const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
+                            const value = stateFillLayer
+                                ? ((_a = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateFillLayer, fill)) !== null && _a !== void 0 ? _a : fill)
+                                : fill;
+                            const background = value
+                                ? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
+                                : 'transparent';
+                            return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition }));
+                        })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .rectangle-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        },
+        .image-fill-${item.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          transform-origin: center center;
+          z-index: 1;
+          background-position: center;
+        },
+        ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                        return (`
+            .rectangle-${item.id} {
+              border-radius: ${layoutParams.radius * 100}vw
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+              backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+              -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+            },
+            .rectangle-border-${item.id} {
+              position: absolute;
+              inset: 0;
+              border-radius: inherit;
+              pointer-events: none;
+              z-index: 2;
+              -webkit-mask:
+                linear-gradient(#fff 0 0) content-box,
+                linear-gradient(#fff 0 0);
+              -webkit-mask-composite: xor;
+              mask-composite: exclude;
+            }
+          `);
+                    })}
+      ` })] }) }));
+};
+exports.RectangleItem = RectangleItem;
+function Fill({ fill, itemId, background, solidTransition }) {
+    const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
+    return ((0, jsx_runtime_1.jsx)("div", { className: fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (fill.type === 'solid' ? { background, transition: solidTransition } : {})), (fill.type === 'image'
+            ? {
+                transform: `rotate(${fill.rotation}deg)`,
+                backgroundImage: `url(${fill.src})`,
+                backgroundSize: fill.behavior === 'repeat' ? `${fill.backgroundSize}%` : fill.behavior,
+                backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
+                opacity: fill.opacity
+            }
+            : { background })), { position: 'absolute', borderRadius: 'inherit', mixBlendMode: fill.blendMode, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fill.id));
+}
+;

package/lib/sdk-nextjs/components/items/RectangleItem/useRectangleItem.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRectangleItem = useRectangleItem;
+const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const defaultFill = [
+    {
+        id: 'default',
+        type: 'solid',
+        value: 'rgba(0, 0, 0, 1)',
+        blendMode: 'normal'
+    }
+];
+function useRectangleItem(item, sectionId) {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.BorderRadius, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'radius' in layoutParams ? layoutParams.radius : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getRadius({ radius: value }, scroll).radius : undefined, sectionId, [layoutId]);
+    const strokeWidth = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.BorderWidth, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth : undefined, sectionId, [layoutId]);
+    const fill = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Fill, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'fill' in layoutParams ? layoutParams.fill : defaultFill;
+    }, (animator, scroll, value) => value ? animator.getFill(value, scroll) : undefined, sectionId, [layoutId]);
+    const strokeFill = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.BorderFill, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'strokeFill' in layoutParams ? layoutParams.strokeFill : defaultFill;
+    }, (animator, scroll, value) => value ? animator.getBorderFill(value, scroll) : undefined, sectionId, [layoutId]);
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
+    const backdropBlur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.BackdropBlur, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'backdropBlur' in layoutParams ? layoutParams.backdropBlur : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur : undefined, sectionId, [layoutId]);
+    return { fill, strokeWidth, radius, strokeFill, blur, backdropBlur };
+}

package/lib/sdk-nextjs/components/items/RichTextItem/RichTextItem.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const color_1 = require("@cntrl-site/color");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useRichTextItem_1 = require("./useRichTextItem");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useRichTextItemValues_1 = require("../useRichTextItemValues");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getFontFamilyValue_1 = require("../../../utils/getFontFamilyValue");
+const useExemplary_1 = require("../../../common/useExemplary");
+const useItemAngle_1 = require("../useItemAngle");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const useCurrentLayout_1 = require("../../../common/useCurrentLayout");
+const utils_1 = require("../../../../utils");
+const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d;
+    const id = (0, react_1.useId)();
+    const [ref, setRef] = (0, react_1.useState)(null);
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { blur: itemBlur, wordSpacing: itemWordSpacing, letterSpacing: itemLetterSpacing, color: itemColor, fontSize, lineHeight } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
+    const layoutValues = [item.area, item.layoutParams];
+    const exemplary = (0, useExemplary_1.useExemplary)();
+    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
+    const stateStyles = (_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _a !== void 0 ? _a : {};
+    const transition = (_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _b !== void 0 ? _b : 'none';
+    const textColor = (0, react_1.useMemo)(() => {
+        var _a;
+        const color = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.color, itemColor);
+        return color ? color_1.CntrlColor.parse(color) : undefined;
+    }, [itemColor, stateStyles.color]);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.angle, itemAngle);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.blur, itemBlur);
+    const letterSpacing = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.letterSpacing, itemLetterSpacing);
+    const wordSpacing = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.wordSpacing, itemWordSpacing);
+    const colorAlpha = textColor === null || textColor === void 0 ? void 0 : textColor.getAlpha();
+    const rangeStyles = layoutId ? (_d = (_c = item.layoutParams[layoutId]) === null || _c === void 0 ? void 0 : _c.rangeStyles) !== null && _d !== void 0 ? _d : [] : [];
+    const rangeColors = rangeStyles.filter((style) => style.style === 'COLOR');
+    const hasVisibleRangeColors = rangeColors.some((color) => {
+        const alpha = color_1.CntrlColor.parse(color.value).getAlpha();
+        return alpha > 0;
+    });
+    const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
+    const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                        const color = color_1.CntrlColor.parse(layoutParams.color);
+                        return (`
+            .rich-text-wrapper-${item.id} {
+              font-size: ${layoutParams.fontSize * 100}vw;
+              line-height: ${layoutParams.lineHeight * 100}vw;
+              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
+              word-spacing: ${layoutParams.wordSpacing * 100}vw;
+              font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
+              font-weight: ${layoutParams.fontWeight};
+              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
+              vertical-align: ${layoutParams.verticalAlign};
+              font-variant: ${layoutParams.fontVariant};
+              color: ${color.fmt('rgba')};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              text-transform: ${layoutParams.textTransform};
+              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+            }
+            @supports not (color: oklch(42% 0.3 90 / 1)) {
+              .rich-text-wrapper-${item.id} {
+                color: ${color.fmt('rgba')};
+              }
+            }
+          `);
+                    })}`] })] }));
+};
+exports.RichTextItem = RichTextItem;

package/lib/sdk-nextjs/components/items/RichTextItem/useRichTextItem.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextItem = void 0;
+const RichTextConverter_1 = require("../../../utils/RichTextConverter/RichTextConverter");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const richTextConverter = new RichTextConverter_1.RichTextConverter();
+const useRichTextItem = (item) => {
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const [content, styles] = richTextConverter.toHtml(item, layouts);
+    return [content, styles];
+};
+exports.useRichTextItem = useRichTextItem;

package/lib/sdk-nextjs/components/items/RichTextWrapper.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RichTextWrapper = ({ isRichText, children, transformOrigin = 'top left' }) => {
+    if (!isRichText)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return ((0, jsx_runtime_1.jsx)("div", { style: { transformOrigin, transform: 'scale(var(--layout-deviation))' }, children: children }));
+};
+exports.RichTextWrapper = RichTextWrapper;

package/lib/sdk-nextjs/components/items/itemsMap.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.itemsMap = void 0;
+const RectangleItem_1 = require("./RectangleItem/RectangleItem");
+const ImageItem_1 = require("./FileItem/ImageItem");
+const VideoItem_1 = require("./FileItem/VideoItem");
+const RichTextItem_1 = require("./RichTextItem/RichTextItem");
+const YoutubeEmbed_1 = require("./EmbedVideoItem/YoutubeEmbed");
+const VimeoEmbed_1 = require("./EmbedVideoItem/VimeoEmbed");
+const CustomItem_1 = require("./CustomItem/CustomItem");
+const GroupItem_1 = require("./GroupItem/GroupItem");
+const CodeEmbedItem_1 = require("./CodeEmbedItem/CodeEmbedItem");
+const CompoundItem_1 = require("./CompoundItem/CompoundItem");
+const ComponentItem_1 = require("./ComponentItem/ComponentItem");
+const ArticleItemType_1 = require("../../../sdk/types/article/ArticleItemType");
+exports.itemsMap = {
+    [ArticleItemType_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
+    [ArticleItemType_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
+    [ArticleItemType_1.ArticleItemType.Video]: VideoItem_1.VideoItem,
+    [ArticleItemType_1.ArticleItemType.RichText]: RichTextItem_1.RichTextItem,
+    [ArticleItemType_1.ArticleItemType.YoutubeEmbed]: YoutubeEmbed_1.YoutubeEmbedItem,
+    [ArticleItemType_1.ArticleItemType.VimeoEmbed]: VimeoEmbed_1.VimeoEmbedItem,
+    [ArticleItemType_1.ArticleItemType.Custom]: CustomItem_1.CustomItem,
+    [ArticleItemType_1.ArticleItemType.Group]: GroupItem_1.GroupItem,
+    [ArticleItemType_1.ArticleItemType.Compound]: CompoundItem_1.CompoundItem,
+    [ArticleItemType_1.ArticleItemType.CodeEmbed]: CodeEmbedItem_1.CodeEmbedItem,
+    [ArticleItemType_1.ArticleItemType.Component]: ComponentItem_1.ComponentItem
+};

package/lib/sdk-nextjs/components/items/useDraggable.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraggable = useDraggable;
+const react_1 = require("react");
+const INITIAL_STATE = {
+    drag: false,
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+    pivotX: 0,
+    pivotY: 0,
+    lastX: 0,
+    lastY: 0
+};
+function useDraggable(data, dragHandler, preventDragOnChildren = false) {
+    const dragStateRef = (0, react_1.useRef)(INITIAL_STATE);
+    const prevDragStateRef = (0, react_1.useRef)();
+    const dragHandlerRef = (0, react_1.useRef)();
+    const untrackMouseMoveRef = (0, react_1.useRef)();
+    const animationFrameRef = (0, react_1.useRef)();
+    dragHandlerRef.current = dragHandler;
+    const setDragState = (0, react_1.useCallback)(action => {
+        const state = isStateGetter(action)
+            ? action(dragStateRef.current)
+            : action;
+        if (!prevDragStateRef.current) {
+            prevDragStateRef.current = dragStateRef.current;
+        }
+        dragStateRef.current = state;
+        if (animationFrameRef.current !== undefined)
+            return;
+        animationFrameRef.current = window.requestAnimationFrame(() => {
+            var _a;
+            animationFrameRef.current = undefined;
+            (_a = dragHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(dragHandlerRef, dragStateRef.current, prevDragStateRef.current);
+            prevDragStateRef.current = dragStateRef.current;
+        });
+    }, []);
+    const handleMouseMove = (0, react_1.useCallback)(event => {
+        event.stopPropagation();
+        const el = event.target;
+        if (!(el instanceof HTMLElement))
+            return;
+        setDragState(state => {
+            if (!state.drag) {
+                const clientRect = el.getBoundingClientRect();
+                return {
+                    drag: true,
+                    startX: event.clientX,
+                    startY: event.clientY,
+                    currentX: event.clientX,
+                    currentY: event.clientY,
+                    pivotX: event.clientX - clientRect.x,
+                    pivotY: event.clientY - clientRect.y,
+                    lastX: state.lastX,
+                    lastY: state.lastY
+                };
+            }
+            return Object.assign(Object.assign({}, state), { currentX: state.currentX + event.movementX, currentY: state.currentY + event.movementY });
+        });
+    }, [setDragState, data.draggableRef, preventDragOnChildren]);
+    const handleMouseUp = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        setDragState(state => (Object.assign(Object.assign({}, state), { drag: false, lastX: state.currentX - state.startX + state.lastX, lastY: state.currentY - state.startY + state.lastY })));
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+    }, [setDragState]);
+    const handleScroll = (0, react_1.useCallback)(() => {
+        setDragState(state => state);
+    }, [setDragState]);
+    const trackMouseMove = (0, react_1.useCallback)(() => {
+        window.addEventListener('mousemove', handleMouseMove, { capture: true });
+        window.addEventListener('mouseup', handleMouseUp, { capture: true });
+        window.addEventListener('scroll', handleScroll, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove, { capture: true });
+            window.removeEventListener('mouseup', handleMouseUp, { capture: true });
+            window.removeEventListener('scroll', handleScroll, { capture: true });
+        };
+    }, [handleMouseMove, handleMouseUp, handleScroll]);
+    const handleMouseDown = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        if (preventDragOnChildren && event.target instanceof Node && data.draggableRef instanceof Node) {
+            if (event.target !== data.draggableRef && data.draggableRef.contains(event.target))
+                return;
+        }
+        if (event.button !== 0)
+            return;
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+        untrackMouseMoveRef.current = trackMouseMove();
+    }, [trackMouseMove]);
+    const handleTouchMove = (0, react_1.useCallback)(event => {
+        event.stopPropagation();
+        event.preventDefault();
+        const touch = event.touches[0];
+        const el = event.target;
+        if (!(el instanceof HTMLElement))
+            return;
+        setDragState(state => {
+            if (!state.drag) {
+                const clientRect = el.getBoundingClientRect();
+                return {
+                    drag: true,
+                    startX: touch.clientX,
+                    startY: touch.clientY,
+                    currentX: touch.clientX,
+                    currentY: touch.clientY,
+                    pivotX: touch.clientX - clientRect.x,
+                    pivotY: touch.clientY - clientRect.y,
+                    lastX: state.lastX,
+                    lastY: state.lastY
+                };
+            }
+            const movementX = touch.clientX - state.currentX;
+            const movementY = touch.clientY - state.currentY;
+            return Object.assign(Object.assign({}, state), { currentX: state.currentX + movementX, currentY: state.currentY + movementY });
+        });
+    }, [setDragState]);
+    const handleTouchEnd = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        document.body.style.overflow = '';
+        document.documentElement.style.overflow = '';
+        setDragState(state => (Object.assign(Object.assign({}, state), { drag: false, lastX: state.currentX - state.startX + state.lastX, lastY: state.currentY - state.startY + state.lastY })));
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+    }, [setDragState]);
+    const trackTouchMove = (0, react_1.useCallback)(() => {
+        window.addEventListener('touchmove', handleTouchMove, { capture: true, passive: false });
+        window.addEventListener('touchend', handleTouchEnd, { capture: true });
+        window.addEventListener('touchcancel', handleTouchEnd, { capture: true });
+        return () => {
+            window.removeEventListener('touchmove', handleTouchMove, { capture: true });
+            window.removeEventListener('touchend', handleTouchEnd, { capture: true });
+            window.removeEventListener('touchcancel', handleTouchEnd, { capture: true });
+        };
+    }, [handleTouchMove, handleTouchEnd]);
+    const handleTouchStart = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        if (preventDragOnChildren && event.target instanceof Node && data.draggableRef instanceof Node) {
+            if (event.target !== data.draggableRef && data.draggableRef.contains(event.target))
+                return;
+        }
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
+        const selection = document.getSelection();
+        if (selection) {
+            selection.removeAllRanges();
+        }
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+        untrackMouseMoveRef.current = trackTouchMove();
+    }, [trackTouchMove]);
+    (0, react_1.useEffect)(() => {
+        if (!data.draggableRef || !data.isEnabled)
+            return;
+        const mouseHandler = handleMouseDown;
+        const touchHandler = handleTouchStart;
+        data.draggableRef.addEventListener('mousedown', mouseHandler);
+        data.draggableRef.addEventListener('touchstart', touchHandler);
+        return () => {
+            var _a, _b, _c;
+            (_a = data.draggableRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', mouseHandler);
+            (_b = data.draggableRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchstart', touchHandler);
+            (_c = untrackMouseMoveRef.current) === null || _c === void 0 ? void 0 : _c.call(untrackMouseMoveRef);
+            if (animationFrameRef.current !== undefined) {
+                window.cancelAnimationFrame(animationFrameRef.current);
+            }
+            document.body.style.overflow = '';
+            document.documentElement.style.overflow = '';
+        };
+    }, [data.draggableRef, data.isEnabled, handleMouseDown, handleTouchStart]);
+}
+function isStateGetter(action) {
+    return typeof action === 'function';
+}

package/lib/sdk-nextjs/components/items/useItemAngle.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemAngle = void 0;
+const Keyframe_1 = require("../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useItemAngle = (item, sectionId) => {
+    const angle = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Rotation, (item, layoutId) => layoutId ? item.area[layoutId].angle : undefined, (animator, scroll, value) => value !== undefined ? animator.getRotation({ angle: value }, scroll).angle : undefined, sectionId);
+    return angle;
+};
+exports.useItemAngle = useItemAngle;

package/lib/sdk-nextjs/components/items/useItemArea.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemArea = useItemArea;
+const useLayoutContext_1 = require("../useLayoutContext");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const Keyframe_1 = require("../../../sdk/types/keyframe/Keyframe");
+function useItemArea(item, sectionId, stateValues) {
+    var _a, _b, _c, _d;
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const position = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Position, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        return item.area[layoutId];
+    }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
+    const dimensions = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Dimensions, (item, layoutId) => layoutId ? item.area[layoutId] : undefined, (animator, scroll, value) => value ? animator.getDimensions(value, scroll) : undefined, sectionId, [layoutId]);
+    const width = ((_a = stateValues.width) !== null && _a !== void 0 ? _a : dimensions === null || dimensions === void 0 ? void 0 : dimensions.width);
+    const height = ((_b = stateValues.height) !== null && _b !== void 0 ? _b : dimensions === null || dimensions === void 0 ? void 0 : dimensions.height);
+    const top = ((_c = stateValues.top) !== null && _c !== void 0 ? _c : position === null || position === void 0 ? void 0 : position.top);
+    const left = ((_d = stateValues.left) !== null && _d !== void 0 ? _d : position === null || position === void 0 ? void 0 : position.left);
+    return { width, height, top, left };
+}

package/lib/sdk-nextjs/components/items/useItemPointerEvents.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemPointerEvents = useItemPointerEvents;
+const react_1 = require("react");
+function useItemPointerEvents(pointerEvents, isParentVisible) {
+    const getAllowPointerEvents = () => {
+        switch (pointerEvents) {
+            case 'never':
+                return false;
+            case 'when_visible':
+                return isParentVisible;
+            case 'always':
+                return true;
+        }
+    };
+    const [allowPointerEvents, setAllowPointerEvents] = (0, react_1.useState)(getAllowPointerEvents());
+    const handleVisibilityChange = (0, react_1.useCallback)((isVisible) => {
+        if (!isParentVisible || pointerEvents !== 'when_visible')
+            return;
+        setAllowPointerEvents(isVisible);
+    }, [isParentVisible, pointerEvents]);
+    return { allowPointerEvents, handleVisibilityChange };
+}

package/lib/sdk-nextjs/components/items/useItemScale.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemScale = void 0;
+const Keyframe_1 = require("../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../useLayoutContext");
+const useItemScale = (item, sectionId) => {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const scale = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Scale, (item, layoutId) => (layoutId ? item.area[layoutId].scale : undefined), (animator, scroll, value) => value !== undefined ? animator.getScale({ scale: value }, scroll).scale : undefined, sectionId, [layoutId]);
+    return scale;
+};
+exports.useItemScale = useItemScale;

package/lib/sdk-nextjs/components/items/useItemTriggers.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemTriggers = useItemTriggers;
+function useItemTriggers(interactionCtrl) {
+    return {
+        onClick: () => {
+            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('click');
+        },
+        onMouseEnter: () => {
+            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('hover-in');
+        },
+        onMouseLeave: () => {
+            interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.sendTrigger('hover-out');
+        }
+    };
+}

package/lib/sdk-nextjs/components/items/useRichTextItemValues.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextItemValues = void 0;
+const Keyframe_1 = require("../../../sdk/types/keyframe/Keyframe");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../useLayoutContext");
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
+const useRichTextItemValues = (item, sectionId) => {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
+    const letterSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.LetterSpacing, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'letterSpacing' in layoutParams ? layoutParams.letterSpacing : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing : undefined, sectionId, [layoutId]);
+    const wordSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.WordSpacing, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'wordSpacing' in layoutParams ? layoutParams.wordSpacing : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing : undefined, sectionId, [layoutId]);
+    const color = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.TextColor, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'color' in layoutParams ? layoutParams.color : DEFAULT_COLOR;
+    }, (animator, scroll, value) => value ? animator.getTextColor({ color: value }, scroll).color : undefined, sectionId, [layoutId]);
+    const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
+    const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
+    return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };
+};
+exports.useRichTextItemValues = useRichTextItemValues;