@cntrl-site/sdk-nextjs 1.10.9 → 1.11.0-0

package/lib/components/StructuredBlockItem/StructuredVideo/StructuredVideo.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const useLayoutContext_1 = require("../../useLayoutContext");
+/**
+ * A video at its own proportions, playing on its own, once pointed at, or once clicked, as the
+ * layout says; its cover shows until it first plays. It takes the 16:9 of a video until its own
+ * proportions are known.
+ */
+const StructuredVideo = ({ block }) => {
+    const reactId = (0, react_1.useId)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const [ref, setRef] = (0, react_1.useState)(null);
+    const [video, setVideo] = (0, react_1.useState)(null);
+    const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
+    const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
+    const [hasPlayed, setHasPlayed] = (0, react_1.useState)(false);
+    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
+    const { url, coverUrl } = block.commonParams;
+    const layoutParams = layoutId ? block.layoutParams[layoutId] : undefined;
+    const play = layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play;
+    const start = () => {
+        if (!video)
+            return;
+        setHasPlayed(true);
+        video.play();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: setRef, className: `structured-video-${block.id}${isLoaded ? '' : ` structured-video-loading-${block.id}`}`, children: [layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { ref: setVideo, className: `structured-video-el-${block.id}`, src: url, autoPlay: play === 'auto', muted: layoutParams.muted, controls: layoutParams.controls, loop: true, playsInline: true, preload: "auto", onLoadedMetadata: () => setIsLoaded(true), onPlay: () => {
+                            setIsPlaying(true);
+                            setHasPlayed(true);
+                        }, onPause: () => setIsPlaying(false), onMouseEnter: () => {
+                            if (play === 'on-hover')
+                                start();
+                        }, onMouseLeave: () => {
+                            if (play === 'on-hover')
+                                video === null || video === void 0 ? void 0 : video.pause();
+                        } }, layoutId), coverUrl && play !== 'auto' && !hasPlayed && ((0, jsx_runtime_1.jsx)("img", { className: `structured-video-cover-${block.id}`, src: coverUrl, alt: "", onMouseEnter: () => {
+                            if (play === 'on-hover')
+                                start();
+                        }, onClick: start })), play === 'on-click' && !layoutParams.controls && ((0, jsx_runtime_1.jsx)("div", { className: `structured-video-overlay-${block.id}`, onClick: () => (isPlaying ? video === null || video === void 0 ? void 0 : video.pause() : start()) }))] })), (0, jsx_runtime_1.jsx)(style_1.default, { id: `${reactId}-video-${block.id}`, children: `
+        .structured-video-${block.id} {
+          position: relative;
+          width: 100%;
+        }
+        .structured-video-loading-${block.id} {
+          aspect-ratio: 16 / 9;
+        }
+        .structured-video-el-${block.id} {
+          display: block;
+          width: 100%;
+          height: auto;
+        }
+        .structured-video-cover-${block.id},
+        .structured-video-overlay-${block.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          cursor: pointer;
+        }
+        .structured-video-cover-${block.id} {
+          object-fit: cover;
+        }
+      ` })] }));
+};
+exports.StructuredVideo = StructuredVideo;

package/lib/components/StructuredBlockItem/blockPlacement.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockPlacement = void 0;
+const useSizing_1 = require("../items/useSizing");
+/**
+ * Where a block sits in a column of blocks, as CSS declarations: on the content grid where it is
+ * drawn from a preset, the area then carrying its `left` and its inner paddings; anywhere else sized
+ * and aligned by itself.
+ */
+function blockPlacement(area, layoutParams) {
+    var _a, _b, _c, _d, _e;
+    const sizing = (0, useSizing_1.parseSizing)('sizing' in layoutParams ? layoutParams.sizing : undefined);
+    const height = sizing.y === 'manual' && area.height !== undefined ? `${area.height * 100}vw` : 'auto';
+    if (area.left !== undefined) {
+        return `
+      align-self: flex-start;
+      left: ${area.left * 100}vw;
+      width: ${((_a = area.width) !== null && _a !== void 0 ? _a : 1) * 100}vw;
+      height: ${height};
+      padding-top: ${((_b = area.innerPaddingTop) !== null && _b !== void 0 ? _b : 0) * 100}vw;
+      padding-bottom: ${((_c = area.innerPaddingBottom) !== null && _c !== void 0 ? _c : 0) * 100}vw;
+    `;
+    }
+    return `
+    align-self: ${getAlignSelf((_d = area.alignment) !== null && _d !== void 0 ? _d : 'center')};
+    left: ${((_e = area.horizontalOffset) !== null && _e !== void 0 ? _e : 0) * 100}vw;
+    width: ${sizing.x === 'manual' && area.width ? `${area.width * 100}vw` : 'max-content'};
+    height: ${height};
+  `;
+}
+exports.blockPlacement = blockPlacement;
+function getAlignSelf(alignment) {
+    switch (alignment) {
+        case 'left':
+            return 'flex-start';
+        case 'right':
+            return 'flex-end';
+        default:
+            return 'center';
+    }
+}

package/lib/components/StructuredBlockItem/blocksMap.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blocksMap = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const StructuredComponent_1 = require("./StructuredComponent/StructuredComponent");
+const StructuredRichText_1 = require("./StructuredRichText/StructuredRichText");
+const StructuredImage_1 = require("./StructuredImage/StructuredImage");
+const StructuredHeaderImage_1 = require("./StructuredHeaderImage/StructuredHeaderImage");
+const StructuredVideo_1 = require("./StructuredVideo/StructuredVideo");
+const StructuredDivider_1 = require("./StructuredDivider/StructuredDivider");
+const StructuredCode_1 = require("./StructuredCode/StructuredCode");
+const StructuredVimeoEmbed_1 = require("./StructuredEmbed/StructuredVimeoEmbed");
+const StructuredYoutubeEmbed_1 = require("./StructuredEmbed/StructuredYoutubeEmbed");
+const noop = () => null;
+exports.blocksMap = {
+    [sdk_1.StructuredBlockType.Component]: StructuredComponent_1.StructuredComponent,
+    [sdk_1.StructuredBlockType.RichText]: StructuredRichText_1.StructuredRichText,
+    [sdk_1.StructuredBlockType.Quote]: StructuredRichText_1.StructuredRichText,
+    [sdk_1.StructuredBlockType.Date]: StructuredRichText_1.StructuredRichText,
+    [sdk_1.StructuredBlockType.Image]: StructuredImage_1.StructuredImage,
+    [sdk_1.StructuredBlockType.HeaderImage]: StructuredHeaderImage_1.StructuredHeaderImage,
+    [sdk_1.StructuredBlockType.Video]: StructuredVideo_1.StructuredVideo,
+    [sdk_1.StructuredBlockType.Divider]: StructuredDivider_1.StructuredDivider,
+    [sdk_1.StructuredBlockType.Code]: StructuredCode_1.StructuredCode,
+    [sdk_1.StructuredBlockType.VimeoEmbed]: StructuredVimeoEmbed_1.StructuredVimeoEmbed,
+    [sdk_1.StructuredBlockType.YoutubeEmbed]: StructuredYoutubeEmbed_1.StructuredYoutubeEmbed,
+    // a section's header is drawn by its section, never in the stack
+    [sdk_1.StructuredBlockType.Header]: noop
+};

package/lib/components/StructuredBlockItem/textStylesRule.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorRule = exports.textStylesRule = void 0;
+const color_1 = require("@cntrl-site/color");
+const getFontFamilyValue_1 = require("../../utils/getFontFamilyValue");
+/** A block's text styles as a CSS rule for `selector`, its lengths in viewport units as the block's own. */
+function textStylesRule(selector, styles) {
+    const color = color_1.CntrlColor.parse(styles.color);
+    return `
+    ${selector} {
+      font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(styles.typeFace)};
+      font-size: ${styles.fontSize * 100}vw;
+      line-height: ${styles.lineHeight * 100}vw;
+      letter-spacing: ${styles.letterSpacing * 100}vw;
+      word-spacing: ${styles.wordSpacing * 100}vw;
+      font-weight: ${styles.fontWeight};
+      font-style: ${styles.fontStyle || 'normal'};
+      font-variant: ${styles.fontVariant};
+      text-transform: ${styles.textTransform};
+      vertical-align: ${styles.verticalAlign};
+      text-align: ${styles.textAlign};
+      color: ${color.fmt('oklch')};
+    }
+    @supports not (color: oklch(42% 0.3 90 / 1)) {
+      ${selector} {
+        color: ${color.fmt('rgba')};
+      }
+    }
+  `;
+}
+exports.textStylesRule = textStylesRule;
+/** A colour of the palette as CSS for `property`, with a fallback where oklch is not supported. */
+function colorRule(selector, property, value) {
+    const color = color_1.CntrlColor.parse(value);
+    return `
+    ${selector} {
+      ${property}: ${color.fmt('oklch')};
+    }
+    @supports not (color: oklch(42% 0.3 90 / 1)) {
+      ${selector} {
+        ${property}: ${color.fmt('rgba')};
+      }
+    }
+  `;
+}
+exports.colorRule = colorRule;

package/lib/components/StructuredContent/StructuredContent.js

@@ -10,28 +10,35 @@ const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const StructuredBlockItem_1 = require("../StructuredBlockItem/StructuredBlockItem");
+const StructuredHeader_1 = require("./StructuredHeader");
+/**
+ * A section's blocks, one under another across the section's whole width: a block drawn from a
+ * preset is placed on the content grid by its own area. A content-based section's header comes
+ * first, drawing the blocks it points at, which the stack leaves out.
+ */
 const StructuredContent = ({ section }) => {
     const reactId = (0, react_1.useId)();
     const id = `${reactId}-structured-content-${section.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const structuredContentLength = section.structuredContent.length;
-    const defaultWidthRecord = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
-    const layoutValues = [section.structuredContentSettings.paddingBottom, defaultWidthRecord];
-    if (structuredContentLength === 0)
+    const header = section.type === 'content-based' ? section.header : undefined;
+    const headerElementIds = header ? Object.values(header.commonParams) : [];
+    const readingWidth = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
+    const layoutValues = [section.structuredContentSettings.paddingBottom];
+    if (section.structuredContent.length === 0 && !header)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-content-${section.id}`, children: [section.structuredContent.map(block => ((0, jsx_runtime_1.jsx)(StructuredBlockItem_1.StructuredBlockItem, { block: block, maxWidthMap: defaultWidthRecord }, block.id))), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-          ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([paddingBottom, defaultWidth]) => {
-                    return (`
-              .structured-content-${section.id} {
-                padding-bottom: ${paddingBottom * 100}vw;
-                max-width: ${defaultWidth < 1 ? `${defaultWidth * 100}vw` : 'unset'};
-                display: flex;
-                flex-direction: column;
-                margin: 0 auto;
-                width: 100%;
-              }
-            `);
-                })}
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-content-${section.id}`, children: [header && (0, jsx_runtime_1.jsx)(StructuredHeader_1.StructuredHeader, { header: header, blocks: section.structuredContent, readingWidth: readingWidth }), section.structuredContent
+                .filter(block => !headerElementIds.includes(block.id))
+                .map(block => (0, jsx_runtime_1.jsx)(StructuredBlockItem_1.StructuredBlockItem, { block: block, readingWidth: readingWidth }, block.id)), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+          .structured-content-${section.id} {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+          }
+          ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([paddingBottom]) => (`
+            .structured-content-${section.id} {
+              padding-bottom: ${(paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : 0) * 100}vw;
+            }
+          `))}
         ` })] }));
 };
 exports.StructuredContent = StructuredContent;

package/lib/components/StructuredContent/StructuredHeader.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const blockPlacement_1 = require("../StructuredBlockItem/blockPlacement");
+const blocksMap_1 = require("../StructuredBlockItem/blocksMap");
+const TEXT_KINDS = ['title', 'subtitle', 'date'];
+/**
+ * A content-based section's header, drawn first. Variant A draws the key image full width with the
+ * other elements on its bottom edge, the image covering a share of the viewport's height if set to;
+ * variant B flows the shown elements in order, each placed as in the stack. The variant, the order
+ * and what is shown are a layout's, so every element is drawn once and arranged per layout.
+ */
+const StructuredHeader = ({ header, blocks, readingWidth }) => {
+    const reactId = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const elementOf = (kind) => blocks.find(block => block.id === header.commonParams[kind]);
+    const image = elementOf('image');
+    const hasImage = (image === null || image === void 0 ? void 0 : image.type) === sdk_1.StructuredBlockType.HeaderImage && Boolean(image.commonParams.url);
+    const texts = TEXT_KINDS.flatMap((kind) => {
+        const block = elementOf(kind);
+        return block ? [{ kind, block }] : [];
+    });
+    const headerClass = `structured-header-${header.id}`;
+    const stackClass = `structured-header-stack-${header.id}`;
+    const elementClass = (block) => `structured-header-element-${block.id}`;
+    const renderElement = (block) => {
+        const BlockComponent = blocksMap_1.blocksMap[block.type];
+        return ((0, jsx_runtime_1.jsx)("div", { className: elementClass(block), children: (0, jsx_runtime_1.jsx)(BlockComponent, { block: block, readingWidth: readingWidth }) }, block.id));
+    };
+    const elementStyles = (kind, block) => (0, sdk_1.getLayoutStyles)(layouts, [header.layoutParams, block.area, block.layoutParams], ([layoutParams, area, blockLayoutParams]) => {
+        const isBackdrop = kind === 'image' && layoutParams.variant === 'A';
+        const isHidden = !isBackdrop && layoutParams.hiddenElements.includes(kind);
+        const isCover = isBackdrop && layoutParams.imageFit === 'cover';
+        return (`
+        .${elementClass(block)} {
+          display: ${isHidden ? 'none' : 'block'};
+          position: relative;
+          order: ${layoutParams.order.indexOf(kind)};
+          ${isBackdrop
+            ? `width: 100%; left: 0; height: ${isCover ? '100%' : 'auto'}; padding: 0;`
+            : (0, blockPlacement_1.blockPlacement)(area, blockLayoutParams)}
+        }
+        ${isBackdrop ? `
+          .${elementClass(block)} .structured-caption-${block.id} {
+            display: none;
+          }
+        ` : ''}
+        ${isCover ? `
+          .${elementClass(block)} .structured-header-image-${block.id},
+          .${elementClass(block)} .structured-header-picture-${block.id} {
+            height: 100%;
+          }
+          .${elementClass(block)} .structured-header-picture-${block.id} {
+            object-fit: cover;
+          }
+        ` : ''}
+      `);
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: headerClass, children: [image && renderElement(image), (0, jsx_runtime_1.jsx)("div", { className: stackClass, children: texts.map(({ block }) => renderElement(block)) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: `${reactId}-header-${header.id}`, children: `
+        .${headerClass} {
+          position: relative;
+          width: 100%;
+        }
+        ${(0, sdk_1.getLayoutStyles)(layouts, [header.layoutParams, header.area], ([layoutParams, area]) => {
+                    var _a;
+                    const isA = layoutParams.variant === 'A';
+                    const isCover = isA && layoutParams.imageFit === 'cover';
+                    return (`
+            .${headerClass} {
+              display: ${isA ? 'block' : 'flex'};
+              flex-direction: column;
+              z-index: ${(_a = area === null || area === void 0 ? void 0 : area.zIndex) !== null && _a !== void 0 ? _a : 0};
+              height: ${isCover ? `${layoutParams.coverHeight * 100}vh` : 'auto'};
+              height: ${isCover ? `${layoutParams.coverHeight * 100}svh` : 'auto'};
+            }
+            .${stackClass} {
+              ${isA
+                        ? `display: flex; flex-direction: column; position: ${hasImage ? 'absolute' : 'relative'}; left: 0; right: 0; bottom: 0;`
+                        : 'display: contents;'}
+            }
+          `);
+                })}
+        ${image ? elementStyles('image', image) : ''}
+        ${texts.map(({ kind, block }) => elementStyles(kind, block)).join('\n')}
+      ` })] }));
+};
+exports.StructuredHeader = StructuredHeader;

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

@@ -26,6 +26,7 @@ const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const getVimeoEmbedUrl_1 = require("../../../utils/getVimeoEmbedUrl");
 const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const reactId = (0, react_1.useId)();
@@ -50,21 +51,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
     const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
-    const validUrl = (0, react_1.useMemo)(() => {
-        if (!layoutParams)
-            return url;
-        const validURL = new URL(url);
-        validURL.searchParams.append('controls', String(layoutParams.controls));
-        validURL.searchParams.append('autoplay', String(layoutParams.play === 'auto'));
-        validURL.searchParams.append('muted', String(layoutParams.muted));
-        validURL.searchParams.append('loop', String(layoutParams.loop));
-        validURL.searchParams.append('pip', String(layoutParams.pictureInPicture));
-        validURL.searchParams.append('title', '0');
-        validURL.searchParams.append('byline', '0');
-        validURL.searchParams.append('portrait', '0');
-        validURL.searchParams.append('autopause', 'false');
-        return validURL.href;
-    }, [url, layoutParams]);
+    const validUrl = (0, react_1.useMemo)(() => (layoutParams ? (0, getVimeoEmbedUrl_1.getVimeoEmbedUrl)(url, layoutParams) : url), [url, layoutParams]);
     (0, react_1.useEffect)(() => {
         if (!vimeoPlayer || !imgRef || !layoutParams)
             return;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -13,10 +13,42 @@ exports.FontStyles = {
 };
 exports.RICH_TEXT_LAYOUT_PENDING_CLASS = 'rich-text-layout-pending';
 const SCALING_STYLES = new Set(['FONTSIZE', 'LINEHEIGHT', 'LETTERSPACING', 'WORDSPACING']);
+const LIST_ITEM_CLASSES = {
+    'unordered-list-item': 'rt-unordered-list-item',
+    'ordered-list-item': 'rt-ordered-list-item'
+};
+// a list item's marker hangs before its first line; a numbered run restarts after anything else
+const LIST_STYLES = `
+  .rt-unordered-list-item,
+  .rt-ordered-list-item {
+    padding-left: 1.5em;
+    text-indent: -1.5em;
+  }
+  .rt-unordered-list-item::before,
+  .rt-ordered-list-item::before {
+    display: inline-block;
+    width: 1.5em;
+    text-indent: 0;
+  }
+  .rt-unordered-list-item::before {
+    content: '•';
+  }
+  .rt-paragraph,
+  .rt-unordered-list-item {
+    counter-reset: cntrl-list;
+  }
+  .rt-ordered-list-item {
+    counter-increment: cntrl-list;
+  }
+  .rt-ordered-list-item::before {
+    content: counter(cntrl-list) '.';
+  }
+`;
 class RichTextConverter {
-    toHtml(richText, layouts) {
-        var _a, _b, _c;
+    toHtml(richText, layouts, { isScaledToViewport = true } = {}) {
+        var _a, _b, _c, _d;
         const { text, blocks = [] } = richText.commonParams;
+        const hasLists = blocks.some(block => block.type in LIST_ITEM_CLASSES);
         const root = [];
         const styleRules = layouts.reduce((rec, layout) => {
             rec[layout.id] = [];
@@ -32,17 +64,20 @@ class RichTextConverter {
             const block = blocks[blockIndex];
             const content = text.slice(block.start, block.end + 1);
             const entities = (_a = block.entities.sort((a, b) => a.start - b.start)) !== null && _a !== void 0 ? _a : [];
+            const typeClass = hasLists ? ` ${(_b = LIST_ITEM_CLASSES[block.type]) !== null && _b !== void 0 ? _b : 'rt-paragraph'}` : '';
             if (content.length === 1) {
                 const id = `rt_${richText.id}_br_${blockIndex}`;
-                root.push((0, jsx_runtime_1.jsx)("div", { className: id, children: (0, jsx_runtime_1.jsx)("br", {}) }, id));
+                root.push((0, jsx_runtime_1.jsx)("div", { className: `${id}${typeClass}`, children: (0, jsx_runtime_1.jsx)("br", {}) }, id));
                 layouts.forEach(l => {
                     const lhForLayout = currentLineHeight[l.id];
                     if (lhForLayout === undefined)
                         return;
                     const lineHeightStyle = { name: 'LINEHEIGHT', value: lhForLayout };
-                    const lh = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, true);
-                    const lhPending = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, false);
+                    const lh = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, isScaledToViewport);
                     styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
+                    if (!isScaledToViewport)
+                        return;
+                    const lhPending = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, false);
                     styleRules[l.id].push(`.${exports.RICH_TEXT_LAYOUT_PENDING_CLASS} .rt_${richText.id}_br_${blockIndex} {${lhPending}}`);
                 });
                 continue;
@@ -73,7 +108,7 @@ class RichTextConverter {
           `);
                 });
                 const item = group[0];
-                const entitiesGroups = (_b = this.groupEntities(entities, item.styles)) !== null && _b !== void 0 ? _b : [];
+                const entitiesGroups = (_c = this.groupEntities(entities, item.styles)) !== null && _c !== void 0 ? _c : [];
                 let offset = 0;
                 for (const entity of entitiesGroups) {
                     const entityKids = [];
@@ -103,34 +138,36 @@ class RichTextConverter {
                 }
                 for (const item of group) {
                     const { exemplary } = layouts.find(l => l.id === item.layout);
-                    const entitiesGroups = (_c = this.groupEntities(entities, item.styles)) !== null && _c !== void 0 ? _c : [];
+                    const entitiesGroups = (_d = this.groupEntities(entities, item.styles)) !== null && _d !== void 0 ? _d : [];
                     for (const entitiesGroup of entitiesGroups) {
                         if (!entitiesGroup.stylesGroup)
                             continue;
                         for (const styleGroup of entitiesGroup.stylesGroup) {
                             const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
                             const color = styleGroup.styles.find(s => s.name === 'COLOR');
+                            const highlight = styleGroup.styles.find(s => s.name === 'HIGHLIGHT');
                             if (lineHeight === null || lineHeight === void 0 ? void 0 : lineHeight.value) {
                                 currentLineHeight[item.layout] = lineHeight.value;
                             }
                             styleRules[item.layout].push(`
                 .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary, true)).join('\n')}
+                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary, isScaledToViewport)).join('\n')}
                 }
               `);
                             const lengthStyles = styleGroup.styles.filter(s => SCALING_STYLES.has(s.name));
-                            if (lengthStyles.length !== 0) {
+                            if (isScaledToViewport && lengthStyles.length !== 0) {
                                 styleRules[item.layout].push(`
                 .${exports.RICH_TEXT_LAYOUT_PENDING_CLASS} .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
                   ${lengthStyles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary, false)).join('\n')}
                 }
               `);
                             }
-                            if (color) {
+                            if ((color === null || color === void 0 ? void 0 : color.value) || (highlight === null || highlight === void 0 ? void 0 : highlight.value)) {
                                 styleRules[item.layout].push(`
                 @supports not (color: oklch(42% 0.3 90 / 1)) {
                   .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                    color: ${color_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
+                    ${(color === null || color === void 0 ? void 0 : color.value) ? `color: ${color_1.CntrlColor.parse(color.value).fmt('rgba')};` : ''}
+                    ${(highlight === null || highlight === void 0 ? void 0 : highlight.value) ? `background-color: ${color_1.CntrlColor.parse(highlight.value).fmt('rgba')};` : ''}
                   }
                 }
               `);
@@ -138,14 +175,14 @@ class RichTextConverter {
                         }
                     }
                 }
-                root.push((0, jsx_runtime_1.jsx)("div", { className: blockClass, children: kids }, blockClass));
+                root.push((0, jsx_runtime_1.jsx)("div", { className: `${blockClass}${typeClass}`, children: kids }, blockClass));
             }
         }
         const styles = layouts.map(l => `
       ${(0, sdk_1.getLayoutMediaQuery)(l.id, layouts)} {
         ${styleRules[l.id].join('\n')}
       }
-    `).join('\n');
+    `).join('\n') + (hasLists ? LIST_STYLES : '');
         return [
             root,
             styles
@@ -234,6 +271,7 @@ class RichTextConverter {
         const { value, name } = draftStyle;
         const map = {
             COLOR: { color: getResolvedValue(value, name) },
+            HIGHLIGHT: { 'background-color': getResolvedValue(value, name) },
             TYPEFACE: { 'font-family': `${(0, getFontFamilyValue_1.getFontFamilyValue)(value)}` },
             FONTSTYLE: value ? Object.assign({}, exports.FontStyles[value]) : {},
             FONTWEIGHT: { 'font-weight': value },
@@ -270,7 +308,7 @@ function getScaledValue(value, exemplary, isLayoutDefined) {
     return !isLayoutDefined ? `${ratio * 100}vw` : `${ratio * exemplary}px`;
 }
 function getResolvedValue(value, name) {
-    if (name !== 'COLOR')
+    if (name !== 'COLOR' && name !== 'HIGHLIGHT')
         return value;
     return value ? color_1.CntrlColor.parse(value).toCss() : value;
 }

package/lib/utils/getVimeoEmbedUrl.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVimeoEmbedUrl = void 0;
+/** The player's url with how the layout plays the video, and none of Vimeo's own title, byline or portrait. */
+function getVimeoEmbedUrl(url, layoutParams) {
+    const validURL = new URL(url);
+    validURL.searchParams.append('controls', String(layoutParams.controls));
+    validURL.searchParams.append('autoplay', String(layoutParams.play === 'auto'));
+    validURL.searchParams.append('muted', String(layoutParams.muted));
+    validURL.searchParams.append('loop', String(layoutParams.loop));
+    validURL.searchParams.append('pip', String(layoutParams.pictureInPicture));
+    validURL.searchParams.append('title', '0');
+    validURL.searchParams.append('byline', '0');
+    validURL.searchParams.append('portrait', '0');
+    validURL.searchParams.append('autopause', 'false');
+    return validURL.href;
+}
+exports.getVimeoEmbedUrl = getVimeoEmbedUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.10.9",
+  "version": "1.11.0-0",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/components": "^1.0.95",
     "@cntrl-site/effects": "^1.4.2",
-    "@cntrl-site/sdk": "^1.28.10",
+    "@cntrl-site/sdk": "^1.29.0-0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "franc-min": "^5.0.0",

package/src/components/StructuredBlockItem/BlockCaption/BlockCaption.tsx

@@ -0,0 +1,42 @@
+import { getLayoutStyles, ImageStructuredBlock } from '@cntrl-site/sdk';
+import { FC, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { textStylesRule } from '../textStylesRule';
+
+interface Props {
+  blockId: string;
+  caption: string;
+  layoutParams: ImageStructuredBlock['layoutParams'];
+  readingWidth: Record<string, number>;
+}
+
+const CAPTION_GAP_PX = 5;
+
+/** The caption under an image: as wide as the reading column, or as the image where it is narrower, and centered under it. */
+export const BlockCaption: FC<Props> = ({ blockId, caption, layoutParams, readingWidth }) => {
+  const reactId = useId();
+  const { layouts } = useCntrlContext();
+  const layoutValues: Record<string, any>[] = [layoutParams, readingWidth];
+  return (
+    <>
+      <div className={`structured-caption-${blockId}`}>{caption}</div>
+      <JSXStyle id={`${reactId}-caption-${blockId}`}>{`
+        .structured-caption-${blockId} {
+          margin-left: auto;
+          margin-right: auto;
+          white-space: pre-wrap;
+          overflow-wrap: break-word;
+        }
+        ${getLayoutStyles(layouts, layoutValues, ([params, width], exemplary) => (`
+          .structured-caption-${blockId} {
+            width: ${width !== undefined ? `min(${width * 100}vw, 100%)` : '100%'};
+            margin-top: ${CAPTION_GAP_PX / exemplary * 100}vw;
+          }
+          ${params?.captionStyles ? textStylesRule(`.structured-caption-${blockId}`, params.captionStyles) : ''}
+        `))}
+      `}
+      </JSXStyle>
+    </>
+  );
+};