@visactor/vchart-extension 2.1.0-alpha.15 → 2.1.0-alpha.17

package/build/index.js

@@ -5880,33 +5880,49 @@
             case 'portrait':
                 centers = lineCenters(count, center.x, inner.y + block.height / 2, center.x, inner.y + inner.height - block.height / 2);
                 break;
-            case 'up-ladder':
-                centers = lineCenters(count, inner.x + block.width / 2, inner.y + inner.height - block.height / 2, inner.x + inner.width - block.width / 2, inner.y + block.height / 2);
-                break;
-            case 'down-ladder':
-                centers = lineCenters(count, inner.x + block.width / 2, inner.y + block.height / 2, inner.x + inner.width - block.width / 2, inner.y + inner.height - block.height / 2);
-                break;
-            case 'pulse':
-                centers = alternatingHorizontalCenters(count, inner, block, gap);
+            case 'ladder': {
+                const isDown = layout.direction === 'down';
+                const x0 = inner.x + block.width / 2;
+                const x1 = inner.x + inner.width - block.width / 2;
+                const yTop = inner.y + block.height / 2;
+                const yBot = inner.y + inner.height - block.height / 2;
+                const y0 = isDown ? yTop : yBot;
+                const y1 = isDown ? yBot : yTop;
+                const anchors = lineCenters(count, x0, y0, x1, y1);
+                const dx = x1 - x0;
+                const dy = y1 - y0;
+                const len = Math.hypot(dx, dy) || 1;
+                const nx = -dy / len;
+                const ny = dx / len;
+                const headlineFontSize = Math.max(80, Math.min(240, Math.round(inner.height * 0.42)));
+                const offset = headlineFontSize * 1.2;
+                centers = anchors.map((p, i) => {
+                    const sign = i % 2 === 0 ? 1 : -1;
+                    return {
+                        x: p.x + nx * offset * sign,
+                        y: p.y + ny * offset * sign
+                    };
+                });
                 break;
+            }
             case 'spiral':
                 centers = alternatingVerticalCenters(count, inner, block, gap);
                 break;
             case 'clock':
                 centers = circularCenters(count, viewBox, block, padding, layout);
                 break;
-            case 'bowl':
-                centers = arcCenters(count, inner, block, layout, 200, 340);
-                break;
-            case 'dome':
-                centers = arcCenters(count, inner, block, layout, 160, 20);
+            case 'arc': {
+                const isDown = layout.direction === 'down';
+                const [s, e] = isDown ? [20, 160] : [200, 340];
+                centers = arcCenters(count, inner, block, layout, s, e);
                 break;
-            case 'left-wing':
-                centers = arcCenters(count, inner, block, layout, 250, 110);
-                break;
-            case 'right-wing':
-                centers = arcCenters(count, inner, block, layout, -70, 70);
+            }
+            case 'wing': {
+                const direction = layout.direction === 'right' ? 'right' : 'left';
+                const [s, e] = direction === 'right' ? [110, 250] : [-70, 70];
+                centers = arcCenters(count, inner, block, layout, s, e);
                 break;
+            }
             case 'landscape':
             default:
                 centers = lineCenters(count, inner.x + block.width / 2, center.y, inner.x + inner.width - block.width / 2, center.y);
@@ -5938,15 +5954,6 @@
             };
         });
     };
-    const alternatingHorizontalCenters = (count, inner, block, gap) => {
-        const baseY = inner.y + inner.height / 2;
-        const offset = Math.min(Math.max(block.height * 0.65 + gap / 2, 0), Math.max((inner.height - block.height) / 2, 0));
-        const points = lineCenters(count, inner.x + block.width / 2, baseY, inner.x + inner.width - block.width / 2, baseY);
-        return points.map((point, index) => ({
-            x: point.x,
-            y: point.y + (index % 2 === 0 ? -offset : offset)
-        }));
-    };
     const alternatingVerticalCenters = (count, inner, block, gap) => {
         const baseX = inner.x + inner.width / 2;
         const offset = Math.min(Math.max(block.width * 0.65 + gap / 2, 0), Math.max((inner.width - block.width) / 2, 0));
@@ -6066,8 +6073,9 @@
     const isLandscape = (spec) => normalizeLayout(spec.layout).type === 'landscape';
     const isPortrait = (spec) => normalizeLayout(spec.layout).type === 'portrait';
     const isClock = (spec) => normalizeLayout(spec.layout).type === 'clock';
-    const isDome = (spec) => normalizeLayout(spec.layout).type === 'dome';
-    const isBowl = (spec) => normalizeLayout(spec.layout).type === 'bowl';
+    const isArc = (spec) => normalizeLayout(spec.layout).type === 'arc';
+    const isWing = (spec) => normalizeLayout(spec.layout).type === 'wing';
+    const isLadder = (spec) => normalizeLayout(spec.layout).type === 'ladder';
     const getThemeColor = (spec) => { var _a; return (_a = spec.themeColor) !== null && _a !== void 0 ? _a : DEFAULT_THEME_COLOR; };
     const withAlpha = (color, alpha) => {
         const safeAlpha = Math.max(0, Math.min(1, alpha));
@@ -6282,8 +6290,8 @@
     const CLOCK_LEAD_LINE_GAP = 6;
     const CLOCK_TEXT_GAP_FROM_LEAD = 8;
     const CLOCK_ORBIT_DASH = [4, 4];
-    const CLOCK_TITLE_FONT_SIZE = 13;
-    const CLOCK_TITLE_LINE_HEIGHT = 18;
+    const CLOCK_TITLE_FONT_SIZE = 18;
+    const CLOCK_TITLE_LINE_HEIGHT = 24;
     const CLOCK_CONTENT_FONT_SIZE = 11;
     const CLOCK_CONTENT_LINE_HEIGHT = 15;
     const getClockGeometry = (spec, ctx) => {
@@ -6344,7 +6352,24 @@
                             }, y: (_d, ctx) => {
                                 const g = getClockGeometry(spec, ctx);
                                 return g.cy - g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO;
-                            }, width: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, height: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style)
+                            }, width: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, height: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', anchor: (_d, ctx) => {
+                                const g = getClockGeometry(spec, ctx);
+                                return [g.cx, g.cy];
+                            }, dx: (_d, ctx) => {
+                                var _a, _b;
+                                const g = getClockGeometry(spec, ctx);
+                                const rectW = g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2;
+                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
+                                const w = typeof userWidth === 'number' ? userWidth : rectW;
+                                return (rectW - w) / 2;
+                            }, dy: (_d, ctx) => {
+                                var _a, _b;
+                                const g = getClockGeometry(spec, ctx);
+                                const rectH = g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2;
+                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
+                                const h = typeof userHeight === 'number' ? userHeight : rectH;
+                                return (rectH - h) / 2;
+                            } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style)
                     }
                     : {
                         type: 'symbol',
@@ -6465,13 +6490,10 @@
                         width: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter,
                         height: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter,
                         image: block.image,
-                        cornerRadius: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter / 2,
                         repeatX: 'no-repeat',
                         repeatY: 'no-repeat',
                         imageMode: 'cover',
-                        imagePosition: 'center',
-                        stroke: themeColor,
-                        lineWidth: 2
+                        imagePosition: 'center'
                     }
                 }
                 : {
@@ -6489,7 +6511,7 @@
                     }
                 },
             block.title
-                ? Object.assign(Object.assign({ type: 'text', name: `storyline-clock-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getClockTextRect(spec, ctx, index).x, y: (_d, ctx) => getClockTextRect(spec, ctx, index).anchorY - CLOCK_TITLE_LINE_HEIGHT, text: block.title, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, fontSize: CLOCK_TITLE_FONT_SIZE, lineHeight: CLOCK_TITLE_LINE_HEIGHT, fontWeight: 'bold', fill: themeColor, textAlign: (_d, ctx) => getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left', textBaseline: 'top' }, (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) })
+                ? Object.assign(Object.assign({ type: 'text', name: `storyline-clock-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getClockTextRect(spec, ctx, index).x, y: (_d, ctx) => getClockTextRect(spec, ctx, index).anchorY - CLOCK_TITLE_LINE_HEIGHT, text: block.title, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, fontSize: CLOCK_TITLE_FONT_SIZE, lineHeight: CLOCK_TITLE_LINE_HEIGHT, fontWeight: 'bold', fill: themeColor, stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: (_d, ctx) => getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left', textBaseline: 'top' }, (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) })
                 : null,
             contentText.length
                 ? Object.assign(Object.assign({ type: 'text', name: `storyline-clock-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getClockTextRect(spec, ctx, index).x, y: (_d, ctx) => getClockTextRect(spec, ctx, index).anchorY + 4, width: (_d, ctx) => getClockTextRect(spec, ctx, index).width, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, text: buildRichContent(contentText, spec), fontSize: CLOCK_CONTENT_FONT_SIZE, lineHeight: CLOCK_CONTENT_LINE_HEIGHT, fill: '#3a3f4d', textAlign: (_d, ctx) => getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left', textBaseline: 'top', wordBreak: 'break-word' }, (_b = spec.content) === null || _b === void 0 ? void 0 : _b.style) })
@@ -6535,7 +6557,7 @@
         const imageHeight = (_h = (_g = spec.image) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : DEFAULT_IMAGE_HEIGHT;
         const imageGap = (_k = (_j = spec.image) === null || _j === void 0 ? void 0 : _j.gap) !== null && _k !== void 0 ? _k : DEFAULT_IMAGE_GAP;
         const hasImage = !!((_m = (_l = spec.data) === null || _l === void 0 ? void 0 : _l[index]) === null || _m === void 0 ? void 0 : _m.image);
-        const titleFontSize = Number((_q = (_p = (_o = spec.title) === null || _o === void 0 ? void 0 : _o.style) === null || _p === void 0 ? void 0 : _p.fontSize) !== null && _q !== void 0 ? _q : 14);
+        const titleFontSize = Number((_q = (_p = (_o = spec.title) === null || _o === void 0 ? void 0 : _o.style) === null || _p === void 0 ? void 0 : _p.fontSize) !== null && _q !== void 0 ? _q : 18);
         const titleLineHeight = Number((_t = (_s = (_r = spec.title) === null || _r === void 0 ? void 0 : _r.style) === null || _s === void 0 ? void 0 : _s.lineHeight) !== null && _t !== void 0 ? _t : Math.round(titleFontSize * 1.35));
         const titleHeight = ((_v = (_u = spec.data) === null || _u === void 0 ? void 0 : _u[index]) === null || _v === void 0 ? void 0 : _v.title) ? titleLineHeight : 0;
         const blockWidth = (_w = block === null || block === void 0 ? void 0 : block.width) !== null && _w !== void 0 ? _w : resolveBlockWidth(spec, 0);
@@ -6560,7 +6582,7 @@
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
+        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 18);
         const titleLineHeight = Number((_f = (_e = (_d = spec.title) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.lineHeight) !== null && _f !== void 0 ? _f : Math.round(titleFontSize * 1.35));
         return {
             type: 'group',
@@ -6581,10 +6603,10 @@
                     style: Object.assign({ x: 0, y: 0, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.width, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.height, cornerRadius: 8, fill: '#ffffff', stroke: '#d7dce5', lineWidth: 1, shadowBlur: 6, shadowColor: 'rgba(0, 0, 0, 0.08)' }, (_h = spec.block) === null || _h === void 0 ? void 0 : _h.style)
                 },
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.y, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.width, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.height, image: block.image, cornerRadius: 6 }, (_j = spec.image) === null || _j === void 0 ? void 0 : _j.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.y, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.width, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.height, image: block.image }, (_j = spec.image) === null || _j === void 0 ? void 0 : _j.style) })
                     : null,
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', textAlign: 'left', textBaseline: 'top' }, (_k = spec.title) === null || _k === void 0 ? void 0 : _k.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_k = spec.title) === null || _k === void 0 ? void 0 : _k.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).contentBox.y, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, text: buildRichContent(contentText, spec), maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, fontSize: 12, lineHeight: 18, heightLimit: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).contentBox.height, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) })
@@ -6710,7 +6732,7 @@
     const getLandscapeMetrics = (spec, blockWidth, blockHeight, index) => {
         var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         const padding = normalizePadding((_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding) !== null && _b !== void 0 ? _b : 12);
-        const titleFontSize = Number((_f = (_e = (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) === null || _e === void 0 ? void 0 : _e.fontSize) !== null && _f !== void 0 ? _f : 14);
+        const titleFontSize = Number((_f = (_e = (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) === null || _e === void 0 ? void 0 : _e.fontSize) !== null && _f !== void 0 ? _f : 18);
         const titleLineHeight = Number((_j = (_h = (_g = spec.title) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.lineHeight) !== null && _j !== void 0 ? _j : Math.max(LANDSCAPE_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
         const contentFontSize = Number((_m = (_l = (_k = spec.content) === null || _k === void 0 ? void 0 : _k.style) === null || _l === void 0 ? void 0 : _l.fontSize) !== null && _m !== void 0 ? _m : LANDSCAPE_CONTENT_FONT_SIZE);
         const contentLineHeight = Number((_q = (_p = (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style) === null || _p === void 0 ? void 0 : _p.lineHeight) !== null && _q !== void 0 ? _q : LANDSCAPE_CONTENT_LINE_HEIGHT);
@@ -6785,7 +6807,7 @@
         var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
+        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 18);
         const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.round(titleFontSize * 1.35));
         const getMetrics = (ctx) => {
             var _a, _b, _c, _e;
@@ -6831,7 +6853,7 @@
                     style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, cornerRadius: 8, fill: '#ffffff', stroke: themeColor, lineWidth: 2 }, blockStyle)
                 },
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, image: block.image, cornerRadius: 8, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_r = spec.image) === null || _r === void 0 ? void 0 : _r.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_r = spec.image) === null || _r === void 0 ? void 0 : _r.style) })
                     : null,
                 {
                     type: 'path',
@@ -6857,7 +6879,7 @@
                     }
                 },
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', textAlign: 'left', textBaseline: 'top' }, (_s = spec.title) === null || _s === void 0 ? void 0 : _s.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_s = spec.title) === null || _s === void 0 ? void 0 : _s.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).contentBox.x, y: (_d, ctx) => getMetrics(ctx).contentBox.y, width: (_d, ctx) => getMetrics(ctx).contentBox.width, height: (_d, ctx) => getMetrics(ctx).contentBox.height, maxLineWidth: (_d, ctx) => getMetrics(ctx).contentBox.width, heightLimit: (_d, ctx) => getMetrics(ctx).contentBox.height, text: buildRichContent(contentText, spec), fontSize: LANDSCAPE_CONTENT_FONT_SIZE, lineHeight: LANDSCAPE_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_t = spec.content) === null || _t === void 0 ? void 0 : _t.style) })
@@ -6871,9 +6893,9 @@
     const PORTRAIT_IMAGE_WIDTH = 180;
     const PORTRAIT_IMAGE_HEIGHT = 110;
     const PORTRAIT_IMAGE_GAP_FROM_AXIS = 24;
-    const PORTRAIT_SHADOW_OFFSET_X = 36;
-    const PORTRAIT_SHADOW_OFFSET_Y = 20;
-    const PORTRAIT_SHADOW_SCALE = 1.12;
+    const PORTRAIT_SHADOW_OFFSET_X = 24;
+    const PORTRAIT_SHADOW_OFFSET_Y = 16;
+    const PORTRAIT_SHADOW_SCALE = 1;
     const PORTRAIT_TEXT_GAP_FROM_IMAGE = 8;
     const PORTRAIT_CONTENT_LINES = 3;
     const PORTRAIT_TITLE_LINE_HEIGHT = 19;
@@ -6937,7 +6959,7 @@
     };
     const getPortraitMetrics = (spec, blockWidth, _blockHeight, index) => {
         var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
+        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 18);
         const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(PORTRAIT_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
         const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : PORTRAIT_CONTENT_FONT_SIZE);
         const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : PORTRAIT_CONTENT_LINE_HEIGHT);
@@ -6987,11 +7009,13 @@
         };
     };
     const buildPortraitBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         const hasImage = !!block.image;
+        const hasSubImage = !!block.subImage;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
+        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 18);
         const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(PORTRAIT_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
+        const showBackground = ((_h = spec.image) === null || _h === void 0 ? void 0 : _h.showBackground) === true;
         const getMetrics = (ctx) => {
             var _a, _b, _c, _e;
             const lb = getLayout(spec, ctx).blocks[index];
@@ -7000,10 +7024,10 @@
             return getPortraitMetrics(spec, w, h, index);
         };
         const themeColor = getThemeColor(spec);
-        const blockStyle = (_j = (_h = spec.block) === null || _h === void 0 ? void 0 : _h.style) !== null && _j !== void 0 ? _j : {};
+        const blockStyle = (_k = (_j = spec.block) === null || _j === void 0 ? void 0 : _j.style) !== null && _k !== void 0 ? _k : {};
         return {
             type: 'group',
-            id: `storyline-block-${(_k = block.id) !== null && _k !== void 0 ? _k : index}`,
+            id: `storyline-block-${(_l = block.id) !== null && _l !== void 0 ? _l : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             style: {
@@ -7019,7 +7043,7 @@
                 }
             },
             children: [
-                hasImage
+                hasSubImage && showBackground
                     ? {
                         type: 'image',
                         name: `storyline-block-shadow-image-${index}`,
@@ -7029,8 +7053,7 @@
                             y: (_d, ctx) => getMetrics(ctx).shadowBox.y,
                             width: (_d, ctx) => getMetrics(ctx).shadowBox.width,
                             height: (_d, ctx) => getMetrics(ctx).shadowBox.height,
-                            image: block.image,
-                            cornerRadius: 8,
+                            image: block.subImage,
                             repeatX: 'no-repeat',
                             repeatY: 'no-repeat',
                             imageMode: 'cover',
@@ -7038,33 +7061,6 @@
                         }
                     }
                     : null,
-                hasImage
-                    ? {
-                        type: 'rect',
-                        name: `storyline-block-shadow-mask-${index}`,
-                        interactive: false,
-                        style: {
-                            x: (_d, ctx) => getMetrics(ctx).shadowBox.x,
-                            y: (_d, ctx) => getMetrics(ctx).shadowBox.y,
-                            width: (_d, ctx) => getMetrics(ctx).shadowBox.width,
-                            height: (_d, ctx) => getMetrics(ctx).shadowBox.height,
-                            cornerRadius: 8,
-                            stroke: false,
-                            lineWidth: 0,
-                            fill: {
-                                gradient: 'linear',
-                                x0: 0,
-                                y0: 0,
-                                x1: 0,
-                                y1: 1,
-                                stops: [
-                                    { offset: 0, color: withAlpha(themeColor, 0.2) },
-                                    { offset: 1, color: withAlpha(themeColor, 1) }
-                                ]
-                            }
-                        }
-                    }
-                    : null,
                 {
                     type: 'rect',
                     name: `storyline-block-image-bg-${index}`,
@@ -7072,59 +7068,76 @@
                     style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, cornerRadius: 8, fill: '#ffffff', stroke: themeColor, lineWidth: 2 }, blockStyle)
                 },
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, image: block.image, cornerRadius: 8, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_l = spec.image) === null || _l === void 0 ? void 0 : _l.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_m = spec.image) === null || _m === void 0 ? void 0 : _m.style) })
                     : null,
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', textAlign: 'left', textBaseline: 'top' }, (_m = spec.title) === null || _m === void 0 ? void 0 : _m.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_o = spec.title) === null || _o === void 0 ? void 0 : _o.style) })
                     : null,
                 contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).contentBox.x, y: (_d, ctx) => getMetrics(ctx).contentBox.y, width: (_d, ctx) => getMetrics(ctx).contentBox.width, height: (_d, ctx) => getMetrics(ctx).contentBox.height, maxLineWidth: (_d, ctx) => getMetrics(ctx).contentBox.width, heightLimit: (_d, ctx) => getMetrics(ctx).contentBox.height, text: buildRichContent(contentText, spec), fontSize: PORTRAIT_CONTENT_FONT_SIZE, lineHeight: PORTRAIT_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).contentBox.x, y: (_d, ctx) => getMetrics(ctx).contentBox.y, width: (_d, ctx) => getMetrics(ctx).contentBox.width, height: (_d, ctx) => getMetrics(ctx).contentBox.height, maxLineWidth: (_d, ctx) => getMetrics(ctx).contentBox.width, heightLimit: (_d, ctx) => getMetrics(ctx).contentBox.height, text: buildRichContent(contentText, spec), fontSize: PORTRAIT_CONTENT_FONT_SIZE, lineHeight: PORTRAIT_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_p = spec.content) === null || _p === void 0 ? void 0 : _p.style) })
                     : null
             ].filter(Boolean)
         };
     };
 
-    const DOME_BLOCK_IMAGE_SIZE = 140;
-    const DOME_TEXT_GAP_FROM_IMAGE = 10;
-    const DOME_TITLE_LINE_HEIGHT = 19;
-    const DOME_CONTENT_LINE_HEIGHT = 17;
-    const DOME_CONTENT_FONT_SIZE = 12;
-    const DOME_TEXT_BOX_HEIGHT = 300;
-    const DOME_TITLE_TO_CONTENT_GAP = 4;
-    const DOME_TEXT_LEFT_PADDING = 20;
-    const DOME_CENTER_IMAGE_WIDTH_RATIO = 0.32;
-    const DOME_CENTER_IMAGE_HEIGHT_RATIO = 0.32;
-    const DOME_ARC_TOP_GAP_FROM_CENTER_IMAGE = 300;
-    const getDomeCenterImageRect = (spec, ctx) => {
+    const ARC_BLOCK_IMAGE_SIZE = 140;
+    const ARC_TEXT_GAP_FROM_IMAGE = 10;
+    const ARC_TITLE_LINE_HEIGHT = 19;
+    const ARC_CONTENT_LINE_HEIGHT = 17;
+    const ARC_CONTENT_FONT_SIZE = 12;
+    const ARC_TEXT_BOX_HEIGHT = 240;
+    const ARC_TITLE_TO_CONTENT_GAP = 4;
+    const ARC_TEXT_LEFT_PADDING = 20;
+    const ARC_TEXT_BOX_MIN_WIDTH = 200;
+    const ARC_CENTER_IMAGE_SIZE_RATIO = 0.4;
+    const ARC_GAP_FROM_CENTER_IMAGE = 200;
+    const isDownArc = (spec) => normalizeLayout(spec.layout).direction === 'down';
+    const getArcCenterImageRect = (spec, ctx) => {
         var _a, _b, _c, _e, _f;
         const { width, height, startX, startY } = getRegionGeometry(ctx);
         const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
         const innerWidth = Math.max(width - padding.left - padding.right, 1);
         const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
-        const w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : innerWidth * DOME_CENTER_IMAGE_WIDTH_RATIO, 80);
-        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : innerHeight * DOME_CENTER_IMAGE_HEIGHT_RATIO, 60);
+        const baseSize = Math.min(innerWidth, innerHeight) * ARC_CENTER_IMAGE_SIZE_RATIO;
+        const w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : baseSize, 80);
+        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : baseSize, 80);
         const cx = startX + padding.left + innerWidth / 2;
-        const top = startY + padding.top + innerHeight - h;
+        const isDown = isDownArc(spec);
+        const top = isDown
+            ?
+                startY + padding.top
+            :
+                startY + padding.top + innerHeight - h;
         return { x: cx - w / 2, y: top, width: w, height: h };
     };
-    const getDomeArcGeometry = (spec, ctx) => {
+    const getArcGeometry = (spec, ctx) => {
         var _a, _b, _c, _e;
         const { width, startX } = getRegionGeometry(ctx);
         const blockPadding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
         const innerWidth = Math.max(width - blockPadding.left - blockPadding.right, 1);
         const blockWidth = resolveBlockWidth(spec, width);
         const layoutOpt = normalizeLayout(spec.layout);
-        const startAngle = (_b = layoutOpt.startAngle) !== null && _b !== void 0 ? _b : 200;
-        const endAngle = (_c = layoutOpt.endAngle) !== null && _c !== void 0 ? _c : 340;
+        const isDown = layoutOpt.direction === 'down';
+        const startAngle = (_b = layoutOpt.startAngle) !== null && _b !== void 0 ? _b : (isDown ? 20 : 200);
+        const endAngle = (_c = layoutOpt.endAngle) !== null && _c !== void 0 ? _c : (isDown ? 160 : 340);
         const ratio = (_e = layoutOpt.radiusRatio) !== null && _e !== void 0 ? _e : 0.88;
         const rx = Math.max((innerWidth - blockWidth) / 2, 1) * ratio;
-        const centerRect = getDomeCenterImageRect(spec, ctx);
+        const centerRect = getArcCenterImageRect(spec, ctx);
         const centerTop = centerRect.y;
         const centerBottom = centerRect.y + centerRect.height;
         const sinStart = Math.sin((startAngle / 180) * Math.PI);
-        const denom = Math.max(1 + sinStart, 0.05);
-        const ry = (centerRect.height + DOME_ARC_TOP_GAP_FROM_CENTER_IMAGE) / denom;
-        const cy = centerBottom - ry * sinStart;
+        let cy;
+        let ry;
+        if (isDown) {
+            const denom = Math.max(1 - sinStart, 0.05);
+            ry = (centerRect.height + ARC_GAP_FROM_CENTER_IMAGE) / denom;
+            cy = centerTop - ry * sinStart;
+        }
+        else {
+            const denom = Math.max(1 + sinStart, 0.05);
+            ry = (centerRect.height + ARC_GAP_FROM_CENTER_IMAGE) / denom;
+            cy = centerBottom - ry * sinStart;
+        }
         return {
             cx: startX + blockPadding.left + innerWidth / 2,
             cy,
@@ -7136,9 +7149,9 @@
             centerBottom
         };
     };
-    const getDomeBlockCenter = (spec, ctx, index) => {
+    const getArcBlockCenter = (spec, ctx, index) => {
         var _a, _b, _c, _e;
-        const arc = getDomeArcGeometry(spec, ctx);
+        const arc = getArcGeometry(spec, ctx);
         const count = (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
         if (count <= 0) {
             return { x: arc.cx, y: arc.cy };
@@ -7152,11 +7165,11 @@
         const nLen = Math.hypot(nxRaw, nyRaw) || 1;
         const nx = nxRaw / nLen;
         const ny = nyRaw / nLen;
-        const imageHeight = (_e = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : DOME_BLOCK_IMAGE_SIZE;
+        const imageHeight = (_e = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : ARC_BLOCK_IMAGE_SIZE;
         const offset = imageHeight / 2;
         return { x: px + nx * offset, y: py + ny * offset };
     };
-    const buildDomeArcMark = (spec) => {
+    const buildArcMark = (spec) => {
         var _a;
         if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) !== true) {
             return null;
@@ -7164,12 +7177,12 @@
         const themeColor = getThemeColor(spec);
         return {
             type: 'group',
-            name: 'storyline-dome-arc',
+            name: 'storyline-arc',
             zIndex: vchart.LayoutZIndex.Mark,
             children: [
                 {
                     type: 'path',
-                    name: 'storyline-dome-arc-path',
+                    name: 'storyline-arc-path',
                     interactive: false,
                     style: {
                         stroke: themeColor,
@@ -7178,7 +7191,7 @@
                         fill: 'transparent',
                         fillOpacity: 0,
                         path: (_d, ctx) => {
-                            const arc = getDomeArcGeometry(spec, ctx);
+                            const arc = getArcGeometry(spec, ctx);
                             const span = arc.endAngle - arc.startAngle;
                             const samples = 64;
                             const segments = [];
@@ -7196,7 +7209,7 @@
             ]
         };
     };
-    const buildDomeCenterImageMark = (spec) => {
+    const buildArcCenterImageMark = (spec) => {
         var _a, _b, _c, _e;
         const visible = ((_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.visible) !== false;
         if (!visible) {
@@ -7217,24 +7230,24 @@
         };
         return {
             type: 'group',
-            name: 'storyline-dome-center',
+            name: 'storyline-arc-center',
             zIndex: vchart.LayoutZIndex.Mark,
             children: [
                 {
                     type: 'symbol',
-                    name: 'storyline-dome-center-symbol',
+                    name: 'storyline-arc-center-symbol',
                     interactive: false,
                     style: {
                         x: (_d, ctx) => {
-                            const r = getDomeCenterImageRect(spec, ctx);
+                            const r = getArcCenterImageRect(spec, ctx);
                             return r.x + r.width / 2;
                         },
                         y: (_d, ctx) => {
-                            const r = getDomeCenterImageRect(spec, ctx);
+                            const r = getArcCenterImageRect(spec, ctx);
                             return r.y + r.height / 2;
                         },
                         size: (_d, ctx) => {
-                            const r = getDomeCenterImageRect(spec, ctx);
+                            const r = getArcCenterImageRect(spec, ctx);
                             return Math.max(r.width, r.height) * 1.1;
                         },
                         symbolType: 'circle',
@@ -7243,48 +7256,50 @@
                         lineWidth: 2
                     }
                 },
-                {
-                    type: 'rect',
-                    name: 'storyline-dome-center-rect',
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => getDomeCenterImageRect(spec, ctx).x,
-                        y: (_d, ctx) => getDomeCenterImageRect(spec, ctx).y,
-                        width: (_d, ctx) => getDomeCenterImageRect(spec, ctx).width,
-                        height: (_d, ctx) => getDomeCenterImageRect(spec, ctx).height,
-                        cornerRadius: 12,
-                        fill: '#ffffff',
-                        stroke: themeColor,
-                        lineWidth: 2
-                    }
-                },
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-dome-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => getDomeCenterImageRect(spec, ctx).x, y: (_d, ctx) => getDomeCenterImageRect(spec, ctx).y, width: (_d, ctx) => getDomeCenterImageRect(spec, ctx).width, height: (_d, ctx) => getDomeCenterImageRect(spec, ctx).height, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: 12, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-arc-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => getArcCenterImageRect(spec, ctx).x, y: (_d, ctx) => getArcCenterImageRect(spec, ctx).y, width: (_d, ctx) => getArcCenterImageRect(spec, ctx).width, height: (_d, ctx) => getArcCenterImageRect(spec, ctx).height, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', anchor: (_d, ctx) => {
+                                const r = getArcCenterImageRect(spec, ctx);
+                                return [r.x + r.width / 2, r.y + r.height / 2];
+                            }, dx: (_d, ctx) => {
+                                var _a, _b;
+                                const r = getArcCenterImageRect(spec, ctx);
+                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
+                                const w = typeof userWidth === 'number' ? userWidth : r.width;
+                                return (r.width - w) / 2;
+                            }, dy: (_d, ctx) => {
+                                var _a, _b;
+                                const r = getArcCenterImageRect(spec, ctx);
+                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
+                                const h = typeof userHeight === 'number' ? userHeight : r.height;
+                                return (r.height - h) / 2;
+                            } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
     };
-    const getDomeBlockMetrics = (spec) => {
+    const getArcBlockMetrics = (spec) => {
         var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(DOME_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
-        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : DOME_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : DOME_CONTENT_LINE_HEIGHT);
-        const titleToContentGap = DOME_TITLE_TO_CONTENT_GAP;
-        const textHeight = DOME_TEXT_BOX_HEIGHT;
+        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 18);
+        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(ARC_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
+        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : ARC_CONTENT_FONT_SIZE);
+        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : ARC_CONTENT_LINE_HEIGHT);
+        const titleToContentGap = ARC_TITLE_TO_CONTENT_GAP;
+        const textHeight = ARC_TEXT_BOX_HEIGHT;
         const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
-        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : DOME_BLOCK_IMAGE_SIZE;
-        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : DOME_BLOCK_IMAGE_SIZE;
+        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : ARC_BLOCK_IMAGE_SIZE;
+        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : ARC_BLOCK_IMAGE_SIZE;
+        const isDown = isDownArc(spec);
         const imageBox = {
             x: -imageWidth / 2,
             y: -imageHeight / 2,
             width: imageWidth,
             height: imageHeight
         };
+        const textBoxWidth = Math.max(imageWidth - ARC_TEXT_LEFT_PADDING, ARC_TEXT_BOX_MIN_WIDTH);
         const textBox = {
-            x: -imageWidth / 2 + DOME_TEXT_LEFT_PADDING,
-            y: imageBox.y - DOME_TEXT_GAP_FROM_IMAGE - textHeight,
-            width: imageWidth - DOME_TEXT_LEFT_PADDING,
+            x: -imageWidth / 2 + ARC_TEXT_LEFT_PADDING,
+            y: isDown ? imageBox.y + imageHeight + ARC_TEXT_GAP_FROM_IMAGE : imageBox.y - ARC_TEXT_GAP_FROM_IMAGE - textHeight,
+            width: textBoxWidth,
             height: textHeight
         };
         const contentBox = {
@@ -7300,23 +7315,28 @@
             contentLineHeight,
             imageBox,
             textBox,
-            contentBox
+            contentBox,
+            isDown
         };
     };
-    const buildDomeBlockMark = (spec, block, index) => {
+    const buildArcBlockMark = (spec, block, index) => {
         var _a, _b, _c, _e;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const themeColor = getThemeColor(spec);
-        const metrics = getDomeBlockMetrics(spec);
+        const metrics = getArcBlockMetrics(spec);
+        const connectorY = metrics.isDown ? metrics.imageBox.y + metrics.imageBox.height : metrics.textBox.y;
+        const connectorHeight = metrics.isDown
+            ? Math.max(metrics.textBox.y + metrics.textBox.height - (metrics.imageBox.y + metrics.imageBox.height), 0)
+            : Math.max(metrics.imageBox.y - metrics.textBox.y, 0);
         return {
             type: 'group',
             id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             style: {
-                x: (_d, ctx) => getDomeBlockCenter(spec, ctx, index).x,
-                y: (_d, ctx) => getDomeBlockCenter(spec, ctx, index).y
+                x: (_d, ctx) => getArcBlockCenter(spec, ctx, index).x,
+                y: (_d, ctx) => getArcBlockCenter(spec, ctx, index).y
             },
             children: [
                 {
@@ -7325,15 +7345,15 @@
                     interactive: false,
                     style: {
                         x: metrics.imageBox.x,
-                        y: metrics.textBox.y,
+                        y: connectorY,
                         width: 2,
-                        height: Math.max(metrics.imageBox.y - metrics.textBox.y, 0),
+                        height: connectorHeight,
                         fill: themeColor,
                         fillOpacity: 0.6
                     }
                 },
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, image: block.image, cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', stroke: themeColor, lineWidth: 2 }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
                     : {
                         type: 'rect',
                         name: `storyline-block-image-bg-${index}`,
@@ -7350,120 +7370,123 @@
                         }
                     },
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: '#1f2430', textAlign: 'left', textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
                     : null,
                 contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: metrics.contentBox.x, y: metrics.contentBox.y, width: metrics.contentBox.width, height: metrics.contentBox.height, maxLineWidth: metrics.contentBox.width, heightLimit: metrics.contentBox.height, text: buildRichContent(contentText, spec), fontSize: DOME_CONTENT_FONT_SIZE, lineHeight: DOME_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: metrics.contentBox.x, y: metrics.contentBox.y, width: metrics.contentBox.width, height: metrics.contentBox.height, maxLineWidth: metrics.contentBox.width, heightLimit: metrics.contentBox.height, text: buildRichContent(contentText, spec), fontSize: ARC_CONTENT_FONT_SIZE, lineHeight: ARC_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
     };
 
-    const BOWL_BLOCK_IMAGE_SIZE = 140;
-    const BOWL_TEXT_GAP_FROM_IMAGE = 10;
-    const BOWL_TITLE_LINE_HEIGHT = 19;
-    const BOWL_CONTENT_LINE_HEIGHT = 17;
-    const BOWL_CONTENT_FONT_SIZE = 12;
-    const BOWL_TEXT_BOX_HEIGHT = 300;
-    const BOWL_TITLE_TO_CONTENT_GAP = 4;
-    const BOWL_TEXT_LEFT_PADDING = 20;
-    const BOWL_CENTER_IMAGE_WIDTH_RATIO = 0.32;
-    const BOWL_CENTER_IMAGE_HEIGHT_RATIO = 0.32;
-    const BOWL_ARC_BOTTOM_GAP_FROM_CENTER_IMAGE = 300;
-    const getBowlCenterImageRect = (spec, ctx) => {
-        var _a, _b, _c, _e, _f;
+    const WING_BLOCK_IMAGE_SIZE = 96;
+    const WING_TEXT_GAP_FROM_IMAGE = 14;
+    const WING_TITLE_LINE_HEIGHT = 30;
+    const WING_TITLE_FONT_SIZE = 22;
+    const WING_CONTENT_LINE_HEIGHT = 17;
+    const WING_CONTENT_FONT_SIZE = 12;
+    const WING_TEXT_BOX_WIDTH = 240;
+    const WING_TEXT_BOX_HEIGHT = 110;
+    const WING_TITLE_TO_CONTENT_GAP = 4;
+    const getWingDirection = (spec) => {
+        var _a;
+        return (_a = normalizeLayout(spec.layout).direction) !== null && _a !== void 0 ? _a : 'left';
+    };
+    const getWingArcGeometry = (spec, ctx) => {
+        var _a, _b, _c, _e;
         const { width, height, startX, startY } = getRegionGeometry(ctx);
         const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
         const innerWidth = Math.max(width - padding.left - padding.right, 1);
         const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
-        const w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : innerWidth * BOWL_CENTER_IMAGE_WIDTH_RATIO, 80);
-        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : innerHeight * BOWL_CENTER_IMAGE_HEIGHT_RATIO, 60);
-        const cx = startX + padding.left + innerWidth / 2;
-        const top = startY + padding.top;
-        return { x: cx - w / 2, y: top, width: w, height: h };
-    };
-    const getBowlArcGeometry = (spec, ctx) => {
-        var _a, _b, _c, _e;
-        const { width, startX } = getRegionGeometry(ctx);
-        const blockPadding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
-        const innerWidth = Math.max(width - blockPadding.left - blockPadding.right, 1);
-        const blockWidth = resolveBlockWidth(spec, width);
         const layoutOpt = normalizeLayout(spec.layout);
-        const startAngle = (_b = layoutOpt.startAngle) !== null && _b !== void 0 ? _b : 20;
-        const endAngle = (_c = layoutOpt.endAngle) !== null && _c !== void 0 ? _c : 160;
-        const ratio = (_e = layoutOpt.radiusRatio) !== null && _e !== void 0 ? _e : 0.88;
-        const rx = Math.max((innerWidth - blockWidth) / 2, 1) * ratio;
-        const centerRect = getBowlCenterImageRect(spec, ctx);
-        const centerTop = centerRect.y;
-        const centerBottom = centerRect.y + centerRect.height;
-        const sinStart = Math.sin((startAngle / 180) * Math.PI);
-        const denom = Math.max(1 - sinStart, 0.05);
-        const ry = (centerRect.height + BOWL_ARC_BOTTOM_GAP_FROM_CENTER_IMAGE) / denom;
-        const cy = centerTop - ry * sinStart;
-        return {
-            cx: startX + blockPadding.left + innerWidth / 2,
-            cy,
-            rx,
-            ry,
-            startAngle,
-            endAngle,
-            centerTop,
-            centerBottom
-        };
+        const direction = getWingDirection(spec);
+        const defaultStart = direction === 'right' ? 110 : -70;
+        const defaultEnd = direction === 'right' ? 250 : 70;
+        const startAngle = (_b = layoutOpt.startAngle) !== null && _b !== void 0 ? _b : defaultStart;
+        const endAngle = (_c = layoutOpt.endAngle) !== null && _c !== void 0 ? _c : defaultEnd;
+        const ratio = (_e = layoutOpt.radiusRatio) !== null && _e !== void 0 ? _e : 0.92;
+        const ry = (innerHeight / 2) * ratio;
+        const rx = innerWidth * 0.6 * ratio;
+        const cx = direction === 'right' ? startX + padding.left + innerWidth - rx * 0.1 : startX + padding.left + rx * 0.1;
+        const cy = startY + padding.top + innerHeight / 2;
+        return { cx, cy, rx, ry, startAngle, endAngle };
     };
-    const getBowlBlockCenter = (spec, ctx, index) => {
-        var _a, _b, _c, _e;
-        const arc = getBowlArcGeometry(spec, ctx);
+    const getWingBlockCenter = (spec, ctx, index) => {
+        var _a, _b;
+        const arc = getWingArcGeometry(spec, ctx);
         const count = (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
         if (count <= 0) {
             return { x: arc.cx, y: arc.cy };
         }
         const t = count === 1 ? 0.5 : index / (count - 1);
         const angle = ((arc.startAngle + (arc.endAngle - arc.startAngle) * t) / 180) * Math.PI;
-        const px = arc.cx + Math.cos(angle) * arc.rx;
-        const py = arc.cy + Math.sin(angle) * arc.ry;
-        const nxRaw = Math.cos(angle) / arc.rx;
-        const nyRaw = Math.sin(angle) / arc.ry;
-        const nLen = Math.hypot(nxRaw, nyRaw) || 1;
-        const nx = nxRaw / nLen;
-        const ny = nyRaw / nLen;
-        const imageHeight = (_e = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : BOWL_BLOCK_IMAGE_SIZE;
-        const offset = imageHeight / 2;
-        return { x: px + nx * offset, y: py + ny * offset };
+        return {
+            x: arc.cx + Math.cos(angle) * arc.rx,
+            y: arc.cy + Math.sin(angle) * arc.ry
+        };
     };
-    const buildBowlArcMark = (spec) => {
-        var _a;
-        if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) !== true) {
+    const isTextOnLeft = (spec, index) => {
+        const direction = getWingDirection(spec);
+        return direction === 'right' ? index % 2 === 1 : index % 2 === 0;
+    };
+    const buildWingArcMark = (spec) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j;
+        if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) === false) {
             return null;
         }
         const themeColor = getThemeColor(spec);
+        const lineStyle = ((_c = (_b = spec.line) === null || _b === void 0 ? void 0 : _b.style) !== null && _c !== void 0 ? _c : {});
+        const startWidth = Math.max(Number((_e = lineStyle.startWidth) !== null && _e !== void 0 ? _e : 2), 0.5);
+        const endWidth = Math.max(Number((_g = (_f = lineStyle.endWidth) !== null && _f !== void 0 ? _f : lineStyle.lineWidth) !== null && _g !== void 0 ? _g : 18), startWidth);
         return {
             type: 'group',
-            name: 'storyline-bowl-arc',
+            name: 'storyline-wing-arc',
             zIndex: vchart.LayoutZIndex.Mark,
             children: [
                 {
                     type: 'path',
-                    name: 'storyline-bowl-arc-path',
+                    name: 'storyline-wing-arc-path',
                     interactive: false,
                     style: {
-                        stroke: themeColor,
-                        lineWidth: 2,
-                        lineCap: 'round',
-                        fill: 'transparent',
-                        fillOpacity: 0,
+                        stroke: false,
+                        lineWidth: 0,
+                        fill: (_j = (_h = lineStyle.fill) !== null && _h !== void 0 ? _h : lineStyle.stroke) !== null && _j !== void 0 ? _j : themeColor,
+                        opacity: 0.95,
                         path: (_d, ctx) => {
-                            const arc = getBowlArcGeometry(spec, ctx);
+                            const arc = getWingArcGeometry(spec, ctx);
                             const span = arc.endAngle - arc.startAngle;
-                            const samples = 64;
-                            const segments = [];
+                            const samples = 96;
+                            const pts = [];
                             for (let i = 0; i <= samples; i++) {
                                 const t = i / samples;
                                 const angle = ((arc.startAngle + span * t) / 180) * Math.PI;
-                                const x = arc.cx + Math.cos(angle) * arc.rx;
-                                const y = arc.cy + Math.sin(angle) * arc.ry;
+                                const cx = arc.cx + Math.cos(angle) * arc.rx;
+                                const cy = arc.cy + Math.sin(angle) * arc.ry;
+                                const nxRaw = Math.cos(angle) / arc.rx;
+                                const nyRaw = Math.sin(angle) / arc.ry;
+                                const nLen = Math.hypot(nxRaw, nyRaw) || 1;
+                                pts.push({
+                                    x: cx,
+                                    y: cy,
+                                    nx: nxRaw / nLen,
+                                    ny: nyRaw / nLen,
+                                    w: startWidth + (endWidth - startWidth) * t
+                                });
+                            }
+                            const segments = [];
+                            for (let i = 0; i < pts.length; i++) {
+                                const p = pts[i];
+                                const x = p.x + p.nx * (p.w / 2);
+                                const y = p.y + p.ny * (p.w / 2);
                                 segments.push(`${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`);
                             }
+                            for (let i = pts.length - 1; i >= 0; i--) {
+                                const p = pts[i];
+                                const x = p.x - p.nx * (p.w / 2);
+                                const y = p.y - p.ny * (p.w / 2);
+                                segments.push(`L ${x.toFixed(2)} ${y.toFixed(2)}`);
+                            }
+                            segments.push('Z');
                             return segments.join(' ');
                         }
                     }
@@ -7471,104 +7494,38 @@
             ]
         };
     };
-    const buildBowlCenterImageMark = (spec) => {
-        var _a, _b, _c, _e;
-        const visible = ((_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.visible) !== false;
-        if (!visible) {
-            return null;
-        }
-        const themeColor = getThemeColor(spec);
-        const hasImage = !!((_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.image);
-        const symbolGradient = {
-            gradient: 'linear',
-            x0: 0.5,
-            y0: 0,
-            x1: 0.5,
-            y1: 1,
-            stops: [
-                { offset: 0, color: withAlpha(themeColor, 0.15) },
-                { offset: 1, color: themeColor }
-            ]
-        };
-        return {
-            type: 'group',
-            name: 'storyline-bowl-center',
-            zIndex: vchart.LayoutZIndex.Mark,
-            children: [
-                {
-                    type: 'symbol',
-                    name: 'storyline-bowl-center-symbol',
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => {
-                            const r = getBowlCenterImageRect(spec, ctx);
-                            return r.x + r.width / 2;
-                        },
-                        y: (_d, ctx) => {
-                            const r = getBowlCenterImageRect(spec, ctx);
-                            return r.y + r.height / 2;
-                        },
-                        size: (_d, ctx) => {
-                            const r = getBowlCenterImageRect(spec, ctx);
-                            return Math.max(r.width, r.height) * 1.1;
-                        },
-                        symbolType: 'circle',
-                        fill: symbolGradient,
-                        stroke: themeColor,
-                        lineWidth: 2
-                    }
-                },
-                {
-                    type: 'rect',
-                    name: 'storyline-bowl-center-rect',
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => getBowlCenterImageRect(spec, ctx).x,
-                        y: (_d, ctx) => getBowlCenterImageRect(spec, ctx).y,
-                        width: (_d, ctx) => getBowlCenterImageRect(spec, ctx).width,
-                        height: (_d, ctx) => getBowlCenterImageRect(spec, ctx).height,
-                        cornerRadius: 12,
-                        fill: '#ffffff',
-                        stroke: themeColor,
-                        lineWidth: 2
-                    }
-                },
-                hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-bowl-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => getBowlCenterImageRect(spec, ctx).x, y: (_d, ctx) => getBowlCenterImageRect(spec, ctx).y, width: (_d, ctx) => getBowlCenterImageRect(spec, ctx).width, height: (_d, ctx) => getBowlCenterImageRect(spec, ctx).height, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: 12, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-    const getBowlBlockMetrics = (spec) => {
+    const getWingBlockMetrics = (spec, index) => {
         var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(BOWL_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
-        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : BOWL_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : BOWL_CONTENT_LINE_HEIGHT);
-        const titleToContentGap = BOWL_TITLE_TO_CONTENT_GAP;
-        const textHeight = BOWL_TEXT_BOX_HEIGHT;
+        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : WING_TITLE_FONT_SIZE);
+        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(WING_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.3)));
+        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : WING_CONTENT_FONT_SIZE);
+        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : WING_CONTENT_LINE_HEIGHT);
+        const titleToContentGap = WING_TITLE_TO_CONTENT_GAP;
+        const textHeight = WING_TEXT_BOX_HEIGHT;
         const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
-        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : BOWL_BLOCK_IMAGE_SIZE;
-        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : BOWL_BLOCK_IMAGE_SIZE;
+        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : WING_BLOCK_IMAGE_SIZE;
+        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : WING_BLOCK_IMAGE_SIZE;
         const imageBox = {
             x: -imageWidth / 2,
             y: -imageHeight / 2,
             width: imageWidth,
             height: imageHeight
         };
-        const textBox = {
-            x: -imageWidth / 2 + BOWL_TEXT_LEFT_PADDING,
-            y: imageBox.y + imageHeight + BOWL_TEXT_GAP_FROM_IMAGE,
-            width: imageWidth - BOWL_TEXT_LEFT_PADDING,
-            height: textHeight
-        };
+        const onLeft = isTextOnLeft(spec, index);
+        const textWidth = WING_TEXT_BOX_WIDTH;
+        const textX = onLeft
+            ? -imageWidth / 2 - WING_TEXT_GAP_FROM_IMAGE - textWidth
+            : imageWidth / 2 + WING_TEXT_GAP_FROM_IMAGE;
+        const textY = -textHeight / 2;
+        const textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
         const contentBox = {
-            x: textBox.x,
-            y: textBox.y + titleLineHeight + titleToContentGap,
-            width: textBox.width,
+            x: textX,
+            y: textY + titleLineHeight + titleToContentGap,
+            width: textWidth,
             height: contentHeight
         };
         return {
+            onLeft,
             titleFontSize,
             titleLineHeight,
             contentFontSize,
@@ -7578,37 +7535,41 @@
             contentBox
         };
     };
-    const buildBowlBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e;
+    const buildWingBlockMark = (spec, block, index) => {
+        var _a, _b, _c, _e, _f;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const themeColor = getThemeColor(spec);
-        const metrics = getBowlBlockMetrics(spec);
+        const metrics = getWingBlockMetrics(spec, index);
+        const showBackground = ((_a = spec.image) === null || _a === void 0 ? void 0 : _a.showBackground) === true;
         return {
             type: 'group',
-            id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
+            id: `storyline-block-${(_b = block.id) !== null && _b !== void 0 ? _b : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             style: {
-                x: (_d, ctx) => getBowlBlockCenter(spec, ctx, index).x,
-                y: (_d, ctx) => getBowlBlockCenter(spec, ctx, index).y
+                x: (_d, ctx) => getWingBlockCenter(spec, ctx, index).x,
+                y: (_d, ctx) => getWingBlockCenter(spec, ctx, index).y
             },
             children: [
-                {
-                    type: 'rect',
-                    name: `storyline-block-connector-${index}`,
-                    interactive: false,
-                    style: {
-                        x: metrics.imageBox.x,
-                        y: metrics.imageBox.y + metrics.imageBox.height,
-                        width: 2,
-                        height: Math.max(metrics.textBox.y + metrics.textBox.height - (metrics.imageBox.y + metrics.imageBox.height), 0),
-                        fill: themeColor,
-                        fillOpacity: 0.6
+                showBackground
+                    ? {
+                        type: 'symbol',
+                        name: `storyline-block-image-halo-${index}`,
+                        interactive: false,
+                        style: {
+                            x: 0,
+                            y: 0,
+                            size: Math.max(metrics.imageBox.width, metrics.imageBox.height) + 12,
+                            symbolType: 'circle',
+                            fill: withAlpha(themeColor, 0.18),
+                            stroke: themeColor,
+                            lineWidth: 1.5
+                        }
                     }
-                },
+                    : null,
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, image: block.image, cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', stroke: themeColor, lineWidth: 2 }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_c = spec.image) === null || _c === void 0 ? void 0 : _c.style) })
                     : {
                         type: 'rect',
                         name: `storyline-block-image-bg-${index}`,
@@ -7625,10 +7586,188 @@
                         }
                     },
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: '#1f2430', textAlign: 'left', textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.title), { style: Object.assign({ x: metrics.onLeft ? metrics.textBox.x + metrics.textBox.width : metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: themeColor, stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: metrics.onLeft ? 'right' : 'left', textBaseline: 'top' }, (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) })
                     : null,
                 contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: metrics.contentBox.x, y: metrics.contentBox.y, width: metrics.contentBox.width, height: metrics.contentBox.height, maxLineWidth: metrics.contentBox.width, heightLimit: metrics.contentBox.height, text: buildRichContent(contentText, spec), fontSize: BOWL_CONTENT_FONT_SIZE, lineHeight: BOWL_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.content), { textType: 'rich', style: Object.assign({ x: metrics.onLeft ? metrics.contentBox.x + metrics.contentBox.width : metrics.contentBox.x, y: metrics.contentBox.y, width: metrics.contentBox.width, height: metrics.contentBox.height, maxLineWidth: metrics.contentBox.width, heightLimit: metrics.contentBox.height, text: buildRichContent(contentText, spec), fontSize: WING_CONTENT_FONT_SIZE, lineHeight: WING_CONTENT_LINE_HEIGHT, textAlign: metrics.onLeft ? 'right' : 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#1f2430' }, (_f = spec.content) === null || _f === void 0 ? void 0 : _f.style) })
+                    : null
+            ].filter(Boolean)
+        };
+    };
+
+    const LADDER_HEADLINE_FONT_RATIO = 0.42;
+    const LADDER_HEADLINE_FONT_MIN = 80;
+    const LADDER_HEADLINE_FONT_MAX = 240;
+    const LADDER_DIAGONAL_LINE_WIDTH = 2;
+    const LADDER_DIAGONAL_DASH = [12, 8];
+    const LADDER_BLOCK_IMAGE_SIZE = 96;
+    const LADDER_TITLE_FONT_SIZE = 28;
+    const LADDER_TITLE_LINE_HEIGHT = 36;
+    const LADDER_CONTENT_FONT_SIZE = 16;
+    const LADDER_CONTENT_LINE_HEIGHT = 24;
+    const isDownLadder = (spec) => normalizeLayout(spec.layout).direction === 'down';
+    const getLadderDiagonalGeometry = (spec, ctx) => {
+        var _a;
+        const { width, height, startX, startY } = getRegionGeometry(ctx);
+        const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
+        const innerX = startX + padding.left;
+        const innerY = startY + padding.top;
+        const innerW = Math.max(width - padding.left - padding.right, 1);
+        const innerH = Math.max(height - padding.top - padding.bottom, 1);
+        const isDown = isDownLadder(spec);
+        const x0 = innerX;
+        const x1 = innerX + innerW;
+        const y0 = isDown ? innerY : innerY + innerH;
+        const y1 = isDown ? innerY + innerH : innerY;
+        const cx = (x0 + x1) / 2;
+        const cy = (y0 + y1) / 2;
+        const dx = x1 - x0;
+        const dy = y1 - y0;
+        const angleRad = (Math.atan2(dy, dx) / Math.PI) * 180;
+        const fontSize = Math.max(LADDER_HEADLINE_FONT_MIN, Math.min(LADDER_HEADLINE_FONT_MAX, Math.round(innerH * LADDER_HEADLINE_FONT_RATIO)));
+        return { x0, y0, x1, y1, cx, cy, angleRad, fontSize };
+    };
+    const getLadderHeadlineText = (spec) => {
+        var _a, _b;
+        const layoutOpt = normalizeLayout(spec.layout);
+        if (typeof layoutOpt.headline === 'string' && layoutOpt.headline.length > 0) {
+            return layoutOpt.headline;
+        }
+        const title = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.text;
+        if (typeof title === 'string' && title.length > 0) {
+            return title;
+        }
+        return 'storyline';
+    };
+    const buildLadderDiagonalMark = (spec) => {
+        const themeColor = getThemeColor(spec);
+        return {
+            type: 'group',
+            name: 'storyline-ladder-diagonal',
+            zIndex: vchart.LayoutZIndex.Mark - 1,
+            children: [
+                {
+                    type: 'path',
+                    name: 'storyline-ladder-diagonal-line',
+                    interactive: false,
+                    style: {
+                        path: (_d, ctx) => {
+                            const g = getLadderDiagonalGeometry(spec, ctx);
+                            return `M ${g.x0} ${g.y0} L ${g.x1} ${g.y1}`;
+                        },
+                        stroke: withAlpha(themeColor, 0.85),
+                        lineWidth: LADDER_DIAGONAL_LINE_WIDTH,
+                        lineDash: LADDER_DIAGONAL_DASH,
+                        fill: 'transparent'
+                    }
+                }
+            ]
+        };
+    };
+    const buildLadderHeadlineMark = (spec) => {
+        const text = getLadderHeadlineText(spec);
+        if (!text) {
+            return null;
+        }
+        const themeColor = getThemeColor(spec);
+        return {
+            type: 'group',
+            name: 'storyline-ladder-headline',
+            zIndex: vchart.LayoutZIndex.Mark,
+            style: {
+                x: (_d, ctx) => getLadderDiagonalGeometry(spec, ctx).cx,
+                y: (_d, ctx) => getLadderDiagonalGeometry(spec, ctx).cy,
+                angle: (_d, ctx) => getLadderDiagonalGeometry(spec, ctx).angleRad
+            },
+            children: [
+                {
+                    type: 'text',
+                    name: 'storyline-ladder-headline-text',
+                    interactive: false,
+                    style: {
+                        x: 0,
+                        y: 0,
+                        text,
+                        fontSize: (_d, ctx) => getLadderDiagonalGeometry(spec, ctx).fontSize,
+                        fontWeight: 900,
+                        fontFamily: 'Impact, "Arial Black", sans-serif',
+                        fill: withAlpha(themeColor, 0.92),
+                        textAlign: 'center',
+                        textBaseline: 'middle'
+                    }
+                }
+            ]
+        };
+    };
+    const isOnLeft = (index) => index % 2 === 1;
+    const getLadderBlockMetrics = (spec, ctx, index) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        const block = getLayout(spec, ctx).blocks[index];
+        const padding = normalizePadding((_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding) !== null && _b !== void 0 ? _b : 12);
+        const imagePosition = isOnLeft(index) ? 'right' : 'left';
+        const imageWidth = (_e = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.width) !== null && _e !== void 0 ? _e : LADDER_BLOCK_IMAGE_SIZE;
+        const imageHeight = (_g = (_f = spec.image) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : LADDER_BLOCK_IMAGE_SIZE;
+        const imageGap = (_j = (_h = spec.image) === null || _h === void 0 ? void 0 : _h.gap) !== null && _j !== void 0 ? _j : DEFAULT_IMAGE_GAP;
+        const hasImage = !!((_l = (_k = spec.data) === null || _k === void 0 ? void 0 : _k[index]) === null || _l === void 0 ? void 0 : _l.image);
+        const titleFontSize = Number((_p = (_o = (_m = spec.title) === null || _m === void 0 ? void 0 : _m.style) === null || _o === void 0 ? void 0 : _o.fontSize) !== null && _p !== void 0 ? _p : LADDER_TITLE_FONT_SIZE);
+        const titleLineHeight = Number((_s = (_r = (_q = spec.title) === null || _q === void 0 ? void 0 : _q.style) === null || _r === void 0 ? void 0 : _r.lineHeight) !== null && _s !== void 0 ? _s : Math.round(titleFontSize * (LADDER_TITLE_LINE_HEIGHT / LADDER_TITLE_FONT_SIZE)));
+        const titleHeight = ((_u = (_t = spec.data) === null || _t === void 0 ? void 0 : _t[index]) === null || _u === void 0 ? void 0 : _u.title) ? titleLineHeight : 0;
+        const blockWidth = (_v = block === null || block === void 0 ? void 0 : block.width) !== null && _v !== void 0 ? _v : resolveBlockWidth(spec, 0);
+        const blockHeight = (_y = (_w = block === null || block === void 0 ? void 0 : block.height) !== null && _w !== void 0 ? _w : (_x = spec.block) === null || _x === void 0 ? void 0 : _x.height) !== null && _y !== void 0 ? _y : DEFAULT_BLOCK_HEIGHT;
+        const imageBox = getImageBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
+        const textBox = getTextBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
+        const contentGap = ((_0 = (_z = spec.data) === null || _z === void 0 ? void 0 : _z[index]) === null || _0 === void 0 ? void 0 : _0.title) ? 8 : 0;
+        return {
+            block: { width: blockWidth, height: blockHeight },
+            imageBox,
+            textBox,
+            contentBox: {
+                y: textBox.y + titleHeight + contentGap,
+                height: Math.max(0, textBox.height - titleHeight - contentGap)
+            }
+        };
+    };
+    const buildLadderBlockMark = (spec, block, index) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const hasImage = !!block.image;
+        const onLeft = isOnLeft(index);
+        const align = onLeft ? 'right' : 'left';
+        const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
+        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : LADDER_TITLE_FONT_SIZE);
+        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.round(titleFontSize * (LADDER_TITLE_LINE_HEIGHT / LADDER_TITLE_FONT_SIZE)));
+        const showBackground = ((_h = spec.block) === null || _h === void 0 ? void 0 : _h.showBackground) === true;
+        const getTitleX = (ctx) => {
+            const m = getLadderBlockMetrics(spec, ctx, index);
+            return align === 'right' ? m.textBox.x + m.textBox.width : m.textBox.x;
+        };
+        return {
+            type: 'group',
+            id: `storyline-block-${(_j = block.id) !== null && _j !== void 0 ? _j : index}`,
+            name: `storyline-block-${index}`,
+            zIndex: vchart.LayoutZIndex.Mark + 1,
+            style: {
+                x: (_d, ctx) => { var _a, _b; return (_b = (_a = getLayout(spec, ctx).blocks[index]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0; },
+                y: (_d, ctx) => { var _a, _b; return (_b = (_a = getLayout(spec, ctx).blocks[index]) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0; },
+                width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.width,
+                height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.height
+            },
+            children: [
+                showBackground
+                    ? {
+                        type: 'rect',
+                        name: `storyline-block-bg-${index}`,
+                        interactive: false,
+                        style: Object.assign({ x: 0, y: 0, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.height, cornerRadius: 8, fill: '#ffffff', stroke: '#d7dce5', lineWidth: 1, shadowBlur: 6, shadowColor: 'rgba(0, 0, 0, 0.08)' }, (_k = spec.block) === null || _k === void 0 ? void 0 : _k.style)
+                    }
+                    : null,
+                hasImage
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.height, image: block.image }, (_l = spec.image) === null || _l === void 0 ? void 0 : _l.style) })
+                    : null,
+                block.title
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign(Object.assign({ x: (_d, ctx) => getTitleX(ctx), y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textBaseline: 'top' }, (_m = spec.title) === null || _m === void 0 ? void 0 : _m.style), { textAlign: align }) })
+                    : null,
+                contentText.length
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign(Object.assign({ x: (_d, ctx) => getTitleX(ctx), y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, text: buildRichContent(contentText, spec), maxLineWidth: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, fontSize: LADDER_CONTENT_FONT_SIZE, lineHeight: LADDER_CONTENT_LINE_HEIGHT, heightLimit: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.height, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style), { textAlign: align }) })
                     : null
             ].filter(Boolean)
         };
@@ -7651,28 +7790,70 @@
     }
     const applyDefaultPadding = (spec) => {
         var _a, _b, _c, _d;
-        const DEFAULT_BOTTOM = 100;
-        const DEFAULT_OTHER = 20;
+        const LARGE = 100;
+        const SMALL = 20;
+        const TEXT_RESERVE = 280;
+        const PORTRAIT_BOTTOM_RESERVE = 160;
+        const arc = isArc(spec);
+        const arcDown = arc && normalizeLayout(spec.layout).direction === 'down';
+        const arcUp = arc && !arcDown;
+        const portrait = isPortrait(spec);
+        const ladder = isLadder(spec);
+        const ladderHorizontalPadding = (() => {
+            var _a, _b, _c, _d, _e, _f;
+            if (!ladder) {
+                return 0;
+            }
+            const blockWidth = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : resolveBlockWidth(spec, 0);
+            const imageWidth = (_d = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 96;
+            const imageGap = (_f = (_e = spec.image) === null || _e === void 0 ? void 0 : _e.gap) !== null && _f !== void 0 ? _f : DEFAULT_IMAGE_GAP;
+            const innerPadding = 12 * 2;
+            const contentWidth = Math.max(blockWidth - imageWidth - imageGap - innerPadding, DEFAULT_BLOCK_WIDTH * 0.5);
+            return Math.round(contentWidth * 2);
+        })();
+        const ladderVerticalPadding = (() => {
+            var _a, _b;
+            if (!ladder) {
+                return 0;
+            }
+            const blockHeight = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 132;
+            return Math.round(blockHeight * 3);
+        })();
+        const defaultTop = ladder ? ladderVerticalPadding : arcDown ? LARGE : arcUp ? TEXT_RESERVE : SMALL;
+        const defaultBottom = ladder
+            ? ladderVerticalPadding
+            : arcDown
+                ? TEXT_RESERVE
+                : portrait
+                    ? PORTRAIT_BOTTOM_RESERVE
+                    : LARGE;
+        const defaultLeft = ladder ? ladderHorizontalPadding : SMALL;
+        const defaultRight = ladder ? ladderHorizontalPadding : SMALL;
         const p = spec.padding;
         if (p === undefined || p === null) {
-            spec.padding = [DEFAULT_OTHER, DEFAULT_OTHER, DEFAULT_BOTTOM, DEFAULT_OTHER];
+            spec.padding = [defaultTop, defaultRight, defaultBottom, defaultLeft];
             return;
         }
         if (typeof p === 'number') {
-            spec.padding = [p, p, Math.max(p, DEFAULT_BOTTOM), p];
+            spec.padding = [
+                Math.max(p, defaultTop),
+                Math.max(p, defaultRight),
+                Math.max(p, defaultBottom),
+                Math.max(p, defaultLeft)
+            ];
             return;
         }
         if (Array.isArray(p)) {
-            const [t = DEFAULT_OTHER, r = DEFAULT_OTHER, b, l = DEFAULT_OTHER] = p;
-            spec.padding = [t, r, b !== null && b !== void 0 ? b : DEFAULT_BOTTOM, l];
+            const [t, r = defaultRight, b, l = defaultLeft] = p;
+            spec.padding = [t !== null && t !== void 0 ? t : defaultTop, r, b !== null && b !== void 0 ? b : defaultBottom, l];
             return;
         }
         if (typeof p === 'object') {
             spec.padding = {
-                top: (_a = p.top) !== null && _a !== void 0 ? _a : DEFAULT_OTHER,
-                right: (_b = p.right) !== null && _b !== void 0 ? _b : DEFAULT_OTHER,
-                bottom: (_c = p.bottom) !== null && _c !== void 0 ? _c : DEFAULT_BOTTOM,
-                left: (_d = p.left) !== null && _d !== void 0 ? _d : DEFAULT_OTHER
+                top: (_a = p.top) !== null && _a !== void 0 ? _a : defaultTop,
+                right: (_b = p.right) !== null && _b !== void 0 ? _b : defaultRight,
+                bottom: (_c = p.bottom) !== null && _c !== void 0 ? _c : defaultBottom,
+                left: (_d = p.left) !== null && _d !== void 0 ? _d : defaultLeft
             };
         }
     };
@@ -7686,14 +7867,9 @@
         if (isPortrait(spec)) {
             return [lineMark, ...blockMarks].filter(Boolean);
         }
-        if (isDome(spec)) {
-            const centerImageMark = buildDomeCenterImageMark(spec);
-            const arcMark = buildDomeArcMark(spec);
-            return [centerImageMark, arcMark, ...blockMarks].filter(Boolean);
-        }
-        if (isBowl(spec)) {
-            const centerImageMark = buildBowlCenterImageMark(spec);
-            const arcMark = buildBowlArcMark(spec);
+        if (isArc(spec)) {
+            const centerImageMark = buildArcCenterImageMark(spec);
+            const arcMark = buildArcMark(spec);
             return [centerImageMark, arcMark, ...blockMarks].filter(Boolean);
         }
         if (isClock(spec)) {
@@ -7701,6 +7877,15 @@
             const centerImageMark = buildClockCenterImageMark(spec);
             return [ringsMark, ...blockMarks, centerImageMark].filter(Boolean);
         }
+        if (isWing(spec)) {
+            const arcMark = buildWingArcMark(spec);
+            return [arcMark, ...blockMarks].filter(Boolean);
+        }
+        if (isLadder(spec)) {
+            const diagonalMark = buildLadderDiagonalMark(spec);
+            const headlineMark = buildLadderHeadlineMark(spec);
+            return [diagonalMark, headlineMark, ...blockMarks].filter(Boolean);
+        }
         return [lineMark, ...blockMarks].filter(Boolean);
     };
     const buildLineMark = (spec) => {
@@ -7723,15 +7908,18 @@
         if (isPortrait(spec)) {
             return buildPortraitBlockMark(spec, block, index);
         }
-        if (isDome(spec)) {
-            return buildDomeBlockMark(spec, block, index);
-        }
-        if (isBowl(spec)) {
-            return buildBowlBlockMark(spec, block, index);
+        if (isArc(spec)) {
+            return buildArcBlockMark(spec, block, index);
         }
         if (isClock(spec)) {
             return buildClockBlockMark(spec, block, index);
         }
+        if (isWing(spec)) {
+            return buildWingBlockMark(spec, block, index);
+        }
+        if (isLadder(spec)) {
+            return buildLadderBlockMark(spec, block, index);
+        }
         return buildDefaultBlockMark(spec, block, index);
     };