pptx-angular-viewer 1.1.15 → 1.1.16

package/fesm2022/pptx-angular-viewer.mjs

@@ -11833,6 +11833,1251 @@ function applyResize(start, handle, dx, dy, min = MIN_RESIZE) {
     return { x, y, width, height };
 }
 
+/**
+ * View-model builders for combo and stock chart kinds.
+ *
+ * Ported from:
+ *   packages/react/src/viewer/utils/chart-waterfall-combo.tsx  (renderComboChart)
+ *   packages/react/src/viewer/utils/chart-stock.tsx             (renderStockChart)
+ *
+ * All functions here are pure TypeScript with zero Angular dependencies.
+ * The component consumes a single `ChartViewModel` (same contract as the
+ * helpers in chart-renderer-helpers.ts) that is the projection of a
+ * `ChartPptxElement` -> SVG primitives.
+ *
+ * Combo charts:
+ *   series[0]   → bar/column rectangles  (one per category)
+ *   series[1…N] → line + dots            (one polyline + N circles per series)
+ *
+ * Stock charts (HLC / OHLC candlesticks):
+ *   3-series HLC  → series: High, Low, Close
+ *   4-series OHLC → series: Open, High, Low, Close
+ *   Per candle: a vertical wick line (high–low) + a body rect (open–close).
+ *   Body is green when close ≥ open, red otherwise.
+ *
+ * @module chart-combo-stock
+ */
+// ─────────────────────────────────────────────────────────────────────────────
+// Candle colours (stock chart)
+// ─────────────────────────────────────────────────────────────────────────────
+const CANDLE_UP_FILL = '#22c55e';
+const CANDLE_DOWN_FILL = '#ef4444';
+const CANDLE_WICK_COLOR = '#334155';
+// ─────────────────────────────────────────────────────────────────────────────
+// Combo chart
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Build a `ChartViewModel` for a combo chart (bar + line overlay).
+ *
+ * Convention (mirrors the React renderer):
+ *   - `chartData.series[0]`   → rendered as clustered bar columns
+ *   - `chartData.series[1…N]` → rendered as line series with dot markers
+ *
+ * A single shared value-axis range is computed across ALL series so that the
+ * bar and line series share the same Y scale.  The category-axis tick style is
+ * "bar" (evenly spaced groups with no extra edge padding).
+ *
+ * @param element        - The chart element providing width/height.
+ * @param chartData      - Parsed chart data including series and style.
+ * @param categoryLabels - Ordered category axis labels.
+ * @returns A fully assembled `ChartViewModel` ready for the template.
+ */
+function buildComboViewModel(element, chartData, categoryLabels) {
+    const layout = computePlotLayout(element.width, element.height, chartData, true);
+    const catCount = Math.max(categoryLabels.length, 1);
+    // Single shared range across all series so bar and line share Y scale.
+    const range = computeValueRange(chartData.series);
+    const { gridlines, axisLabels } = buildGridlinesAndLabels(range, layout);
+    const zeroLine = buildZeroLine(range, layout);
+    const catLabels = buildCategoryLabels(categoryLabels, layout, 'bar');
+    const legendPos = chartData.style?.legendPosition ?? 'b';
+    const { legend, legendX, legendY, legendAnchor } = buildLegend(chartData.series, chartData.colorPalette, layout.svgWidth, legendPos, layout.svgHeight, layout.plotTop);
+    const primitives = [];
+    const dataLabels = [];
+    // ── Bar series (series[0]) ──────────────────────────────────────────────
+    const barSeries = chartData.series.slice(0, 1);
+    if (barSeries.length > 0) {
+        const barRects = computeBarRects(barSeries, catCount, layout, range, chartData.colorPalette);
+        for (const r of barRects) {
+            primitives.push({
+                kind: 'rect',
+                x: r.x,
+                y: r.y,
+                w: r.w,
+                h: r.h,
+                fill: r.fill,
+                rx: 1,
+            });
+        }
+        if (chartData.style?.hasDataLabels && barSeries[0]) {
+            const barGroupWidth = layout.plotWidth / catCount;
+            const singleBarWidth = barGroupWidth * 0.7;
+            const groupOffset = (barGroupWidth - singleBarWidth) / 2;
+            barSeries[0].values.forEach((val, vi) => {
+                const x = layout.plotLeft + barGroupWidth * vi + groupOffset + singleBarWidth / 2;
+                const zeroY = valueToY(0, range, layout.plotTop, layout.plotBottom);
+                const valY = valueToY(val, range, layout.plotTop, layout.plotBottom);
+                const labelY = val >= 0 ? Math.min(zeroY, valY) - 4 : Math.max(zeroY, valY) + 10;
+                dataLabels.push({
+                    kind: 'text',
+                    x,
+                    y: labelY,
+                    text: formatAxisValue(val),
+                    fontSize: 7,
+                    fill: '#334155',
+                    textAnchor: 'middle',
+                });
+            });
+        }
+    }
+    // ── Line series (series[1…N]) ───────────────────────────────────────────
+    // Line X positions are centred within each bar group for visual alignment.
+    const barGroupWidth = layout.plotWidth / catCount;
+    const lineSeries = chartData.series.slice(1);
+    lineSeries.forEach((series, si) => {
+        if (series.values.length === 0) {
+            return;
+        }
+        const seriesIdx = si + 1; // offset past the bar series
+        const c = seriesColor(series, seriesIdx, chartData.colorPalette);
+        // Build points centred within each bar group to align with bar midpoints.
+        const pts = series.values.map((val, vi) => ({
+            x: layout.plotLeft + barGroupWidth * vi + barGroupWidth / 2,
+            y: valueToY(val, range, layout.plotTop, layout.plotBottom),
+        }));
+        const pointsStr = pts.map((p) => `${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' ');
+        primitives.push({
+            kind: 'polyline',
+            points: pointsStr,
+            stroke: c,
+            strokeWidth: 2.4,
+            fill: 'none',
+        });
+        for (const pt of pts) {
+            primitives.push({
+                kind: 'circle',
+                cx: pt.x,
+                cy: pt.y,
+                r: 2.5,
+                fill: c,
+            });
+        }
+        if (chartData.style?.hasDataLabels) {
+            series.values.forEach((val, vi) => {
+                const pt = pts[vi];
+                if (!pt) {
+                    return;
+                }
+                dataLabels.push({
+                    kind: 'text',
+                    x: pt.x,
+                    y: pt.y - 7,
+                    text: formatAxisValue(val),
+                    fontSize: 7,
+                    fill: '#334155',
+                    textAnchor: 'middle',
+                });
+            });
+        }
+    });
+    const title = chartData.style?.hasTitle && chartData.title ? chartData.title : undefined;
+    return {
+        svgWidth: layout.svgWidth,
+        svgHeight: layout.svgHeight,
+        title,
+        titleX: layout.svgWidth / 2,
+        titleY: 12,
+        gridlines,
+        axisLabels,
+        zeroLine,
+        categoryLabels: catLabels,
+        primitives,
+        dataLabels,
+        legend: chartData.style?.hasLegend ? legend : [],
+        legendX,
+        legendY,
+        legendAnchor,
+    };
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Stock chart
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Build a `ChartViewModel` for a stock (HLC / OHLC) candlestick chart.
+ *
+ * Series layout convention (mirrors the React renderer):
+ *   3-series: series[0] = High, series[1] = Low, series[2] = Close
+ *   4-series: series[0] = Open, series[1] = High, series[2] = Low, series[3] = Close
+ *
+ * Per data point the builder emits:
+ *   - An `SvgLine` for the high-to-low wick (vertical).
+ *   - An `SvgRect` for the open-to-close candle body.
+ *
+ * Candle body is green (#22c55e) when close ≥ open, red (#ef4444) otherwise.
+ * When no open series is present the close value is used as the open (HLC
+ * mode), causing all candles to show as a coloured body between close and the
+ * previously computed running close – but for simplicity, with no open we set
+ * open = low value, matching PowerPoint's own HLC rendering heuristic.
+ *
+ * @param element        - The chart element providing width/height.
+ * @param chartData      - Parsed chart data including series and style.
+ * @param categoryLabels - Ordered category axis labels.
+ * @returns A fully assembled `ChartViewModel` ready for the template.
+ */
+function buildStockViewModel(element, chartData, categoryLabels) {
+    const layout = computePlotLayout(element.width, element.height, chartData, true);
+    const catCount = Math.max(categoryLabels.length, 1);
+    const range = computeValueRange(chartData.series);
+    const { gridlines, axisLabels } = buildGridlinesAndLabels(range, layout);
+    const zeroLine = buildZeroLine(range, layout);
+    const catLabels = buildCategoryLabels(categoryLabels, layout, 'bar');
+    const legendPos = chartData.style?.legendPosition ?? 'b';
+    const { legend, legendX, legendY, legendAnchor } = buildLegend(chartData.series, chartData.colorPalette, layout.svgWidth, legendPos, layout.svgHeight, layout.plotTop);
+    // ── Resolve OHLC series slots ──────────────────────────────────────────
+    const hasFour = chartData.series.length >= 4;
+    const openSeries = hasFour ? chartData.series[0] : undefined;
+    const highSeries = chartData.series[hasFour ? 1 : 0];
+    const lowSeries = chartData.series[hasFour ? 2 : 1];
+    const closeSeries = chartData.series[hasFour ? 3 : 2];
+    const primitives = [];
+    const dataLabels = [];
+    if (highSeries && lowSeries && closeSeries) {
+        const barGroupWidth = layout.plotWidth / catCount;
+        const candleWidth = barGroupWidth * 0.5;
+        for (let ci = 0; ci < catCount; ci++) {
+            const high = highSeries.values[ci] ?? 0;
+            const low = lowSeries.values[ci] ?? 0;
+            const open = openSeries ? (openSeries.values[ci] ?? low) : low;
+            const close = closeSeries.values[ci] ?? high;
+            const isUp = close >= open;
+            const cx = layout.plotLeft + barGroupWidth * ci + barGroupWidth / 2;
+            const highY = valueToY(high, range, layout.plotTop, layout.plotBottom);
+            const lowY = valueToY(low, range, layout.plotTop, layout.plotBottom);
+            const openY = valueToY(open, range, layout.plotTop, layout.plotBottom);
+            const closeY = valueToY(close, range, layout.plotTop, layout.plotBottom);
+            // Wick: vertical line from high to low.
+            primitives.push({
+                kind: 'line',
+                x1: cx,
+                y1: highY,
+                x2: cx,
+                y2: lowY,
+                stroke: CANDLE_WICK_COLOR,
+                strokeWidth: 1,
+            });
+            // Body: rect from open to close.
+            const bodyTop = Math.min(openY, closeY);
+            const bodyHeight = Math.max(Math.abs(openY - closeY), 1);
+            primitives.push({
+                kind: 'rect',
+                x: cx - candleWidth / 2,
+                y: bodyTop,
+                w: candleWidth,
+                h: bodyHeight,
+                fill: isUp ? CANDLE_UP_FILL : CANDLE_DOWN_FILL,
+                rx: 1,
+            });
+            if (chartData.style?.hasDataLabels) {
+                dataLabels.push({
+                    kind: 'text',
+                    x: cx,
+                    y: highY - 4,
+                    text: formatAxisValue(close),
+                    fontSize: 7,
+                    fill: '#334155',
+                    textAnchor: 'middle',
+                });
+            }
+        }
+    }
+    const title = chartData.style?.hasTitle && chartData.title ? chartData.title : undefined;
+    return {
+        svgWidth: layout.svgWidth,
+        svgHeight: layout.svgHeight,
+        title,
+        titleX: layout.svgWidth / 2,
+        titleY: 12,
+        gridlines,
+        axisLabels,
+        zeroLine,
+        categoryLabels: catLabels,
+        primitives,
+        dataLabels,
+        legend: chartData.style?.hasLegend ? legend : [],
+        legendX,
+        legendY,
+        legendAnchor,
+    };
+}
+
+/**
+ * View-model builders for surface and treemap chart kinds.
+ *
+ * Ported from:
+ *   packages/react/src/viewer/utils/chart-surface-treemap.tsx  (surface + treemap)
+ *
+ * Produces a `ChartViewModel` (SVG primitives only, zero Angular dependencies)
+ * that the Angular ChartRendererComponent template iterates over.
+ *
+ * Surface – isometric projection when the grid has ≥2 series and ≥2 categories,
+ *            flat colour-mapped grid otherwise.
+ * Treemap  – slice-and-dice rectangles sorted largest-first with inline labels.
+ *
+ * @module chart-surface-treemap
+ */
+// ─────────────────────────────────────────────────────────────────────────────
+// Isometric projection constants (mirrors React's ISO_COS30 / ISO_SIN30)
+// ─────────────────────────────────────────────────────────────────────────────
+const ISO_COS30 = Math.cos(Math.PI / 6);
+const ISO_SIN30 = Math.sin(Math.PI / 6);
+/** Project a 3-D (x, y, z) grid coordinate to 2-D isometric screen space. */
+function isoProject(x, y, z) {
+    return {
+        screenX: (x - y) * ISO_COS30,
+        screenY: (x + y) * ISO_SIN30 - z,
+    };
+}
+/** Map a normalised value t in [0..1] to a surface colour ramp (blue→green→red). */
+function surfaceColor(t) {
+    return {
+        r: Math.round(30 + 200 * t),
+        g: Math.round(80 + 100 * (1 - Math.abs(t - 0.5) * 2)),
+        b: Math.round(200 * (1 - t) + 30),
+    };
+}
+/** Darken an rgb triplet by a factor in [0..1]. */
+function darkenRgb(r, g, b, factor) {
+    return `rgb(${Math.round(r * factor)},${Math.round(g * factor)},${Math.round(b * factor)})`;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Shared empty-chrome helper
+// ─────────────────────────────────────────────────────────────────────────────
+function emptyChrome() {
+    return {
+        gridlines: [],
+        axisLabels: [],
+        zeroLine: undefined,
+        categoryLabels: [],
+        dataLabels: [],
+    };
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Surface: isometric renderer (≥2 series, ≥2 categories)
+// ─────────────────────────────────────────────────────────────────────────────
+function buildIsometricSurfaceViewModel(element, chartData, categoryLabels) {
+    const layout = computePlotLayout(element.width, element.height, chartData, false);
+    const range = computeValueRange(chartData.series);
+    const catCount = Math.max(categoryLabels.length, 1);
+    const seriesCount = chartData.series.length;
+    // Grid cell count (vertices = cells + 1 in each dimension).
+    const cols = Math.max(catCount - 1, 1);
+    const rows = Math.max(seriesCount - 1, 1);
+    const gridSpan = cols + rows;
+    const cellByWidth = (layout.plotWidth * 0.9) / (gridSpan * ISO_COS30);
+    const cellByHeight = (layout.plotHeight * 0.65) / (gridSpan * ISO_SIN30);
+    const cellSize = Math.max(Math.min(cellByWidth, cellByHeight), 0.5);
+    const zHeadroom = layout.plotHeight * 0.3;
+    const zScale = range.span > 0 ? zHeadroom : 0;
+    const normValue = (r, c) => {
+        const ri = Math.min(r, seriesCount - 1);
+        const ci = Math.min(c, catCount - 1);
+        const val = chartData.series[ri]?.values[ci] ?? 0;
+        return range.span > 0 ? (val - range.min) / range.span : 0;
+    };
+    // Compute isometric bounding box to centre the projection.
+    const projectedPoints = [];
+    for (let r = 0; r <= rows; r++) {
+        for (let c = 0; c <= cols; c++) {
+            projectedPoints.push(isoProject(c * cellSize, r * cellSize, normValue(r, c) * zScale));
+        }
+    }
+    const minSX = Math.min(...projectedPoints.map((p) => p.screenX));
+    const maxSX = Math.max(...projectedPoints.map((p) => p.screenX));
+    const minSY = Math.min(...projectedPoints.map((p) => p.screenY));
+    const maxSY = Math.max(...projectedPoints.map((p) => p.screenY));
+    const projW = maxSX - minSX;
+    const projH = maxSY - minSY;
+    const offsetX = layout.plotLeft + layout.plotWidth / 2 - (minSX + projW / 2);
+    const offsetY = layout.plotTop + layout.plotHeight / 2 - (minSY + projH / 2);
+    const cells = [];
+    for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+            cells.push({ row: r, col: c, depth: r + c });
+        }
+    }
+    cells.sort((a, b) => a.depth - b.depth);
+    const primitives = [];
+    for (const { row, col } of cells) {
+        // Four corners of the isometric parallelogram.
+        const corners = [
+            [col, row],
+            [col + 1, row],
+            [col + 1, row + 1],
+            [col, row + 1],
+        ];
+        const verts = corners.map(([c, r]) => {
+            const nv = normValue(r, c);
+            return isoProject(c * cellSize, r * cellSize, nv * zScale);
+        });
+        const avgT = (normValue(row, col) +
+            normValue(row, col + 1) +
+            normValue(row + 1, col + 1) +
+            normValue(row + 1, col)) /
+            4;
+        const { r, g, b } = surfaceColor(avgT);
+        const points = verts
+            .map((v) => `${(v.screenX + offsetX).toFixed(2)},${(v.screenY + offsetY).toFixed(2)}`)
+            .join(' ');
+        // Face fill polygon.
+        primitives.push({
+            kind: 'polygon',
+            points,
+            fill: `rgb(${r},${g},${b})`,
+            stroke: 'none',
+            strokeWidth: 0,
+            opacity: 0.9,
+        });
+        // Subtle edge overlay for depth perception.
+        primitives.push({
+            kind: 'polygon',
+            points,
+            fill: 'none',
+            stroke: darkenRgb(r, g, b, 0.6),
+            strokeWidth: 0.5,
+            opacity: 0.7,
+        });
+    }
+    const legendPos = chartData.style?.legendPosition ?? 'b';
+    const { legend, legendX, legendY, legendAnchor } = buildLegend(chartData.series, chartData.colorPalette, layout.svgWidth, legendPos, layout.svgHeight, layout.plotTop);
+    const title = chartData.style?.hasTitle && chartData.title ? chartData.title : undefined;
+    return {
+        svgWidth: layout.svgWidth,
+        svgHeight: layout.svgHeight,
+        title,
+        titleX: layout.svgWidth / 2,
+        titleY: 14,
+        ...emptyChrome(),
+        primitives,
+        legend: chartData.style?.hasLegend ? legend : [],
+        legendX,
+        legendY,
+        legendAnchor,
+    };
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Surface: flat colour-mapped grid (fallback)
+// ─────────────────────────────────────────────────────────────────────────────
+function buildFlatSurfaceViewModel(element, chartData, categoryLabels) {
+    const layout = computePlotLayout(element.width, element.height, chartData, false);
+    const range = computeValueRange(chartData.series);
+    const catCount = Math.max(categoryLabels.length, 1);
+    const seriesCount = chartData.series.length;
+    const cellW = layout.plotWidth / Math.max(catCount - 1, 1);
+    const cellH = layout.plotHeight / Math.max(seriesCount - 1, 1);
+    const primitives = [];
+    for (let si = 0; si < seriesCount; si++) {
+        for (let ci = 0; ci < catCount; ci++) {
+            const val = chartData.series[si]?.values[ci] ?? 0;
+            const t = range.span > 0 ? (val - range.min) / range.span : 0;
+            const { r, g, b } = surfaceColor(t);
+            primitives.push({
+                kind: 'rect',
+                x: layout.plotLeft + ci * cellW,
+                y: layout.plotTop + si * cellH,
+                w: cellW + 0.5,
+                h: cellH + 0.5,
+                fill: `rgb(${r},${g},${b})`,
+                opacity: 0.85,
+            });
+        }
+    }
+    const legendPos = chartData.style?.legendPosition ?? 'b';
+    const { legend, legendX, legendY, legendAnchor } = buildLegend(chartData.series, chartData.colorPalette, layout.svgWidth, legendPos, layout.svgHeight, layout.plotTop);
+    const title = chartData.style?.hasTitle && chartData.title ? chartData.title : undefined;
+    return {
+        svgWidth: layout.svgWidth,
+        svgHeight: layout.svgHeight,
+        title,
+        titleX: layout.svgWidth / 2,
+        titleY: 14,
+        ...emptyChrome(),
+        primitives,
+        legend: chartData.style?.hasLegend ? legend : [],
+        legendX,
+        legendY,
+        legendAnchor,
+    };
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Public: buildSurfaceViewModel
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Build the view-model for a surface chart.
+ *
+ * Renders an isometric 3-D-like projection when the grid has ≥2 series and
+ * ≥2 categories; falls back to a flat colour-mapped grid otherwise.
+ * Mirrors `renderSurfaceChart` / `renderIsometricSurfaceFallback` in React's
+ * `chart-surface-treemap.tsx`.
+ */
+function buildSurfaceViewModel(element, chartData, categoryLabels) {
+    const catCount = Math.max(categoryLabels.length, 1);
+    const seriesCount = chartData.series.length;
+    if (seriesCount >= 2 && catCount >= 2) {
+        return buildIsometricSurfaceViewModel(element, chartData, categoryLabels);
+    }
+    return buildFlatSurfaceViewModel(element, chartData, categoryLabels);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Public: buildTreemapViewModel
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Build the view-model for a treemap chart.
+ *
+ * Uses a slice-and-dice layout (alternate horizontal/vertical splits) with
+ * items sorted largest-first.  Inline labels are added when the cell is wide
+ * enough.  Mirrors `renderTreemapChart` in React's `chart-surface-treemap.tsx`.
+ */
+function buildTreemapViewModel(element, chartData, categoryLabels) {
+    const layout = computePlotLayout(element.width, element.height, chartData, false);
+    const allValues = chartData.series.flatMap((s) => s.values);
+    const totalAbs = allValues.reduce((sum, v) => sum + Math.abs(v), 0) || 1;
+    const primitives = [];
+    let curX = layout.plotLeft;
+    let curY = layout.plotTop;
+    let remainW = layout.plotWidth;
+    let remainH = layout.plotHeight;
+    let remainTotal = totalAbs;
+    // Sort items largest-first then lay out in slice-and-dice order.
+    const items = allValues
+        .map((v, i) => ({ value: Math.abs(v), index: i }))
+        .sort((a, b) => b.value - a.value);
+    for (const item of items) {
+        const fraction = remainTotal > 0 ? item.value / remainTotal : 0;
+        const useWidth = remainW >= remainH;
+        const w = useWidth ? remainW * fraction : remainW;
+        const h = useWidth ? remainH : remainH * fraction;
+        const rw = Math.max(w - 1, 1);
+        const rh = Math.max(h - 1, 1);
+        primitives.push({
+            kind: 'rect',
+            x: curX,
+            y: curY,
+            w: rw,
+            h: rh,
+            fill: paletteColor(item.index, chartData.colorPalette),
+            rx: 2,
+            opacity: 0.85,
+        });
+        const label = categoryLabels[item.index] ?? String(item.index + 1);
+        if (rw > 30 && rh > 14) {
+            primitives.push({
+                kind: 'text',
+                x: curX + rw / 2,
+                y: curY + rh / 2,
+                text: label,
+                fontSize: Math.min(10, rh * 0.3),
+                fill: '#ffffff',
+                textAnchor: 'middle',
+                fontWeight: 'bold',
+                dominantBaseline: 'central',
+            });
+        }
+        if (useWidth) {
+            curX += w;
+            remainW -= w;
+        }
+        else {
+            curY += h;
+            remainH -= h;
+        }
+        remainTotal -= item.value;
+    }
+    // Legend: one entry per series (matching React: no per-item legend).
+    const legendPos = chartData.style?.legendPosition ?? 'b';
+    const { legend, legendX, legendY, legendAnchor } = buildLegend(chartData.series, chartData.colorPalette, layout.svgWidth, legendPos, layout.svgHeight, layout.plotTop);
+    // Build per-category legend entries mirroring the React treemap colour
+    // assignments: one swatch per category/value index.
+    const catLegend = categoryLabels.map((cat, i) => ({
+        color: paletteColor(i, chartData.colorPalette),
+        label: cat,
+    }));
+    const title = chartData.style?.hasTitle && chartData.title ? chartData.title : undefined;
+    return {
+        svgWidth: layout.svgWidth,
+        svgHeight: layout.svgHeight,
+        title,
+        titleX: layout.svgWidth / 2,
+        titleY: 14,
+        ...emptyChrome(),
+        primitives,
+        // Prefer per-category legend over per-series legend for treemap.
+        legend: chartData.style?.hasLegend ? (catLegend.length > 0 ? catLegend : legend) : [],
+        legendX,
+        legendY,
+        legendAnchor,
+    };
+}
+
+/**
+ * View-model builders for waterfall and regionMap chart kinds.
+ *
+ * Ported from:
+ *   packages/react/src/viewer/utils/chart-waterfall-combo.tsx  (waterfall only)
+ *   packages/react/src/viewer/utils/chart-map.tsx               (regionMap)
+ *
+ * Produces a `ChartViewModel` (SVG primitives only, zero Angular dependencies)
+ * that the Angular ChartRendererComponent template iterates over.
+ *
+ * Waterfall – running-total bars with positive/negative/total colouring and
+ *             dashed connector lines between bars.
+ * RegionMap  – choropleth SVG with simplified world region outlines coloured by
+ *              the first data series; unmatched regions fall back to a table.
+ *
+ * @module chart-waterfall-map
+ */
+// ─────────────────────────────────────────────────────────────────────────────
+// Waterfall colours (mirrors React renderWaterfallChart)
+// ─────────────────────────────────────────────────────────────────────────────
+const WF_COLOR_POSITIVE = '#22c55e';
+const WF_COLOR_NEGATIVE = '#ef4444';
+const WF_COLOR_TOTAL = '#6366f1';
+const WF_CONNECTOR_COLOR = '#94a3b8';
+// ─────────────────────────────────────────────────────────────────────────────
+// Public: buildWaterfallViewModel
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Build the view-model for a waterfall chart.
+ *
+ * Each bar starts from the running total of all previous values; the last bar
+ * shows the grand total (reset to 0 base).  Positive values get a green fill,
+ * negative values get a red fill, and the final total bar uses indigo.
+ * Dashed connector lines join adjacent bar tops/bottoms.
+ *
+ * Mirrors `renderWaterfallChart` in React's `chart-waterfall-combo.tsx`.
+ */
+function buildWaterfallViewModel(element, chartData, categoryLabels) {
+    const layout = computePlotLayout(element.width, element.height, chartData, true);
+    const values = chartData.series[0]?.values ?? [];
+    const range = computeValueRange(chartData.series);
+    const catCount = Math.max(categoryLabels.length, values.length, 1);
+    const barWidth = (layout.plotWidth / catCount) * 0.6;
+    const gap = (layout.plotWidth / catCount) * 0.2;
+    const primitives = [];
+    const dataLabels = [];
+    let runningTotal = 0;
+    for (let i = 0; i < values.length; i++) {
+        const val = values[i] ?? 0;
+        const isLast = i === values.length - 1;
+        const startVal = isLast ? 0 : runningTotal;
+        const endVal = runningTotal + val;
+        const barStartY = valueToY(startVal, range, layout.plotTop, layout.plotBottom);
+        const barEndY = valueToY(endVal, range, layout.plotTop, layout.plotBottom);
+        const x = layout.plotLeft + (layout.plotWidth / catCount) * i + gap;
+        const y = Math.min(barStartY, barEndY);
+        const h = Math.max(Math.abs(barEndY - barStartY), 1);
+        const barColor = isLast ? WF_COLOR_TOTAL : val >= 0 ? WF_COLOR_POSITIVE : WF_COLOR_NEGATIVE;
+        primitives.push({
+            kind: 'rect',
+            x,
+            y,
+            w: barWidth,
+            h,
+            fill: barColor,
+            rx: 1,
+        });
+        if (chartData.style?.hasDataLabels) {
+            dataLabels.push({
+                kind: 'text',
+                x: x + barWidth / 2,
+                y: y - 4,
+                text: formatAxisValue(isLast ? endVal : val),
+                fontSize: 7,
+                fill: '#334155',
+                textAnchor: 'middle',
+            });
+        }
+        // Connector line to the next bar (not drawn after the last bar).
+        if (!isLast && i < values.length - 1) {
+            const nextX = layout.plotLeft + (layout.plotWidth / catCount) * (i + 1) + gap;
+            primitives.push({
+                kind: 'line',
+                x1: x + barWidth,
+                y1: barEndY,
+                x2: nextX,
+                y2: barEndY,
+                stroke: WF_CONNECTOR_COLOR,
+                strokeWidth: 0.8,
+                dashArray: '3 2',
+            });
+        }
+        if (!isLast) {
+            runningTotal += val;
+        }
+    }
+    const { gridlines, axisLabels } = buildGridlinesAndLabels(range, layout);
+    const zeroLine = buildZeroLine(range, layout);
+    const catLabels = buildCategoryLabels(categoryLabels, layout, 'bar');
+    const legendPos = chartData.style?.legendPosition ?? 'b';
+    const { legend, legendX, legendY, legendAnchor } = buildLegend(chartData.series, chartData.colorPalette, layout.svgWidth, legendPos, layout.svgHeight, layout.plotTop);
+    const title = chartData.style?.hasTitle && chartData.title ? chartData.title : undefined;
+    return {
+        svgWidth: layout.svgWidth,
+        svgHeight: layout.svgHeight,
+        title,
+        titleX: layout.svgWidth / 2,
+        titleY: 12,
+        gridlines,
+        axisLabels,
+        zeroLine,
+        categoryLabels: catLabels,
+        primitives,
+        dataLabels,
+        legend: chartData.style?.hasLegend ? legend : [],
+        legendX,
+        legendY,
+        legendAnchor,
+    };
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// RegionMap: region alias lookup
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Mapping from common category label strings (country names, ISO codes) to
+ * internal region keys.  Case-insensitive lookup.
+ * Mirrors `REGION_ALIAS_MAP` from React's `chart-map.tsx`.
+ */
+const REGION_ALIAS_MAP = {
+    us: 'US',
+    usa: 'US',
+    'united states': 'US',
+    'united states of america': 'US',
+    ca: 'CA',
+    can: 'CA',
+    canada: 'CA',
+    br: 'BR',
+    bra: 'BR',
+    brazil: 'BR',
+    gb: 'GB',
+    gbr: 'GB',
+    uk: 'GB',
+    'united kingdom': 'GB',
+    fr: 'FR',
+    fra: 'FR',
+    france: 'FR',
+    de: 'DE',
+    deu: 'DE',
+    germany: 'DE',
+    it: 'IT',
+    ita: 'IT',
+    italy: 'IT',
+    es: 'ES',
+    esp: 'ES',
+    spain: 'ES',
+    ru: 'RU',
+    rus: 'RU',
+    russia: 'RU',
+    cn: 'CN',
+    chn: 'CN',
+    china: 'CN',
+    in: 'IN',
+    ind: 'IN',
+    india: 'IN',
+    jp: 'JP',
+    jpn: 'JP',
+    japan: 'JP',
+    kr: 'KR',
+    kor: 'KR',
+    'south korea': 'KR',
+    korea: 'KR',
+    au: 'AU',
+    aus: 'AU',
+    australia: 'AU',
+    mx: 'MX',
+    mex: 'MX',
+    mexico: 'MX',
+    id: 'ID',
+    idn: 'ID',
+    indonesia: 'ID',
+    tr: 'TR',
+    tur: 'TR',
+    turkey: 'TR',
+    sa: 'SA',
+    sau: 'SA',
+    'saudi arabia': 'SA',
+    za: 'ZA',
+    zaf: 'ZA',
+    'south africa': 'ZA',
+    ar: 'AR',
+    arg: 'AR',
+    argentina: 'AR',
+    ng: 'NG',
+    nga: 'NG',
+    nigeria: 'NG',
+    eg: 'EG',
+    egy: 'EG',
+    egypt: 'EG',
+};
+/** Resolve a category label to a region key (case-insensitive). */
+function resolveRegionCode(label) {
+    const normalized = label.trim().toLowerCase();
+    return REGION_ALIAS_MAP[normalized];
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// RegionMap: colour scale helpers
+// ─────────────────────────────────────────────────────────────────────────────
+/** Interpolate between two hex colours by ratio t in [0..1]. */
+function lerpColor(a, b, t) {
+    const clamp = (v) => Math.max(0, Math.min(255, Math.round(v)));
+    const ha = a.replace('#', '');
+    const hb = b.replace('#', '');
+    const r1 = parseInt(ha.substring(0, 2), 16);
+    const g1 = parseInt(ha.substring(2, 4), 16);
+    const b1 = parseInt(ha.substring(4, 6), 16);
+    const r2 = parseInt(hb.substring(0, 2), 16);
+    const g2 = parseInt(hb.substring(2, 4), 16);
+    const b2 = parseInt(hb.substring(4, 6), 16);
+    const r = clamp(r1 + (r2 - r1) * t);
+    const g = clamp(g1 + (g2 - g1) * t);
+    const bl = clamp(b1 + (b2 - b1) * t);
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(bl)}`;
+}
+/**
+ * 3-stop sequential colour scale: light (#dbeafe) → mid (#3b82f6) → dark (#1e3a5f).
+ * Mirrors `sequentialColorScale` in React's `chart-map.tsx`.
+ */
+function sequentialColorScale(t) {
+    const clamped = Math.max(0, Math.min(1, t));
+    if (clamped <= 0.5) {
+        return lerpColor('#dbeafe', '#3b82f6', clamped * 2);
+    }
+    return lerpColor('#3b82f6', '#1e3a5f', (clamped - 0.5) * 2);
+}
+/** Normalise a value to [0..1] within a min/max range. */
+function normalizeValue(value, min, max) {
+    if (max === min) {
+        return 0.5;
+    }
+    return (value - min) / (max - min);
+}
+/** Simplified world region outlines (mirrors `WORLD_REGIONS` in React's chart-map.tsx). */
+const WORLD_REGIONS = [
+    {
+        code: 'US',
+        name: 'United States',
+        path: 'M130,160 L250,155 265,170 270,190 260,210 230,215 200,220 170,215 145,205 130,195Z M280,175 L295,165 310,170 310,185 295,195 280,190Z',
+        labelXY: [200, 190],
+    },
+    {
+        code: 'CA',
+        name: 'Canada',
+        path: 'M120,90 L280,85 290,100 295,130 280,150 250,155 200,155 160,155 130,155 115,140 110,115Z',
+        labelXY: [200, 125],
+    },
+    {
+        code: 'MX',
+        name: 'Mexico',
+        path: 'M145,215 L200,220 210,235 200,255 185,265 165,260 150,245 140,230Z',
+        labelXY: [175, 240],
+    },
+    {
+        code: 'BR',
+        name: 'Brazil',
+        path: 'M270,300 L310,280 335,290 340,320 330,355 310,370 285,365 265,345 260,320Z',
+        labelXY: [300, 330],
+    },
+    {
+        code: 'AR',
+        name: 'Argentina',
+        path: 'M260,370 L280,365 290,380 285,410 275,435 260,445 250,425 248,395Z',
+        labelXY: [268, 410],
+    },
+    {
+        code: 'GB',
+        name: 'United Kingdom',
+        path: 'M440,120 L448,110 455,115 455,135 448,142 440,138Z',
+        labelXY: [448, 128],
+    },
+    {
+        code: 'FR',
+        name: 'France',
+        path: 'M450,145 L470,140 480,150 478,168 465,175 450,170 445,158Z',
+        labelXY: [463, 158],
+    },
+    {
+        code: 'DE',
+        name: 'Germany',
+        path: 'M478,125 L498,120 505,130 502,148 490,152 478,148 475,138Z',
+        labelXY: [490, 138],
+    },
+    {
+        code: 'IT',
+        name: 'Italy',
+        path: 'M490,155 L498,152 505,162 500,180 492,190 488,178 486,165Z',
+        labelXY: [495, 172],
+    },
+    {
+        code: 'ES',
+        name: 'Spain',
+        path: 'M432,168 L460,165 465,175 460,188 442,192 430,185 428,175Z',
+        labelXY: [448, 180],
+    },
+    {
+        code: 'RU',
+        name: 'Russia',
+        path: 'M510,60 L780,50 830,70 840,100 820,120 750,115 700,105 650,100 580,105 530,110 510,100 505,80Z',
+        labelXY: [670, 85],
+    },
+    {
+        code: 'TR',
+        name: 'Turkey',
+        path: 'M530,165 L570,160 585,170 580,182 555,185 530,180Z',
+        labelXY: [558, 175],
+    },
+    {
+        code: 'EG',
+        name: 'Egypt',
+        path: 'M530,200 L555,195 565,205 560,225 545,230 530,222Z',
+        labelXY: [548, 215],
+    },
+    {
+        code: 'NG',
+        name: 'Nigeria',
+        path: 'M475,275 L500,270 510,280 505,298 490,302 475,295Z',
+        labelXY: [492, 288],
+    },
+    {
+        code: 'ZA',
+        name: 'South Africa',
+        path: 'M520,380 L545,370 560,380 555,400 540,410 520,405 515,392Z',
+        labelXY: [538, 392],
+    },
+    {
+        code: 'SA',
+        name: 'Saudi Arabia',
+        path: 'M565,220 L600,210 615,225 610,250 590,258 570,250 560,238Z',
+        labelXY: [590, 238],
+    },
+    {
+        code: 'IN',
+        name: 'India',
+        path: 'M640,210 L665,195 685,210 688,240 678,268 660,278 645,265 635,240Z',
+        labelXY: [662, 240],
+    },
+    {
+        code: 'CN',
+        name: 'China',
+        path: 'M700,120 L775,115 800,130 805,160 790,180 760,185 730,180 710,168 695,150 690,135Z',
+        labelXY: [750, 155],
+    },
+    {
+        code: 'JP',
+        name: 'Japan',
+        path: 'M835,145 L845,135 852,140 850,158 842,165 835,160Z',
+        labelXY: [843, 152],
+    },
+    {
+        code: 'KR',
+        name: 'South Korea',
+        path: 'M815,158 L825,152 830,160 827,170 818,172 813,165Z',
+        labelXY: [822, 163],
+    },
+    {
+        code: 'ID',
+        name: 'Indonesia',
+        path: 'M740,295 L780,288 810,292 830,298 825,310 790,312 755,308 740,305Z',
+        labelXY: [785, 302],
+    },
+    {
+        code: 'AU',
+        name: 'Australia',
+        path: 'M790,350 L850,340 880,355 885,385 870,405 840,410 810,400 790,380Z',
+        labelXY: [838, 378],
+    },
+];
+// ─────────────────────────────────────────────────────────────────────────────
+// Public: buildRegionMapViewModel
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Build the view-model for a regionMap (choropleth) chart.
+ *
+ * Matches category labels against known world regions, colours them by the
+ * first series' values using a sequential blue colour scale, and renders a
+ * simple colour-legend bar below the map.  Unmatched regions are collected
+ * into a small fallback table rendered as SVG text rows.
+ *
+ * Mirrors `renderMapChart` in React's `chart-map.tsx`.
+ */
+function buildRegionMapViewModel(element, chartData, categoryLabels) {
+    const svgWidth = Math.max(element.width, 320);
+    const svgHeight = Math.max(element.height, 200);
+    const categories = categoryLabels.length > 0 ? categoryLabels : chartData.categories;
+    const values = chartData.series.length > 0 ? (chartData.series[0]?.values ?? []) : [];
+    const finiteVals = values.filter((v) => Number.isFinite(v));
+    const minVal = finiteVals.length > 0 ? Math.min(...finiteVals) : 0;
+    const maxVal = finiteVals.length > 0 ? Math.max(...finiteVals) : 1;
+    // Build region → value lookup.
+    const regionValueMap = new Map();
+    const unmatchedRows = [];
+    for (let i = 0; i < categories.length; i++) {
+        const cat = categories[i] ?? '';
+        const value = values[i] ?? 0;
+        const code = resolveRegionCode(cat);
+        if (code !== undefined) {
+            regionValueMap.set(code, { value, label: cat });
+        }
+        else {
+            unmatchedRows.push({ label: cat, value });
+        }
+    }
+    // Layout measurements.
+    const legendHeight = 30;
+    const fallbackRowH = 14;
+    const maxFallbackRows = Math.min(unmatchedRows.length, 5);
+    const fallbackTableH = unmatchedRows.length > 0 ? (maxFallbackRows + 1) * fallbackRowH + 8 : 0;
+    const titleH = chartData.title ? 22 : 0;
+    const mapAreaH = Math.max(svgHeight - titleH - legendHeight - fallbackTableH - 8, 80);
+    // Scale the 1000 x 500 region coordinate space into the available area.
+    const mapScale = Math.min((svgWidth - 20) / 1000, mapAreaH / 500);
+    const mapOffsetX = (svgWidth - 1000 * mapScale) / 2;
+    const mapOffsetY = titleH + 4;
+    const primitives = [];
+    // Background.
+    primitives.push({
+        kind: 'rect',
+        x: 0,
+        y: 0,
+        w: svgWidth,
+        h: svgHeight,
+        fill: '#f8fafc',
+        rx: 4,
+    });
+    // Title text.
+    const titlePrimitive = chartData.title
+        ? {
+            kind: 'text',
+            x: svgWidth / 2,
+            y: 16,
+            text: chartData.title,
+            fontSize: 12,
+            fill: '#334155',
+            textAnchor: 'middle',
+            fontWeight: 'bold',
+            dominantBaseline: 'auto',
+        }
+        : undefined;
+    // Region shape paths.
+    for (const region of WORLD_REGIONS) {
+        const entry = regionValueMap.get(region.code);
+        let fill = '#e2e8f0';
+        if (entry !== undefined) {
+            const t = normalizeValue(entry.value, minVal, maxVal);
+            fill = sequentialColorScale(t);
+        }
+        // Embed the transform in the path's d attribute via a manual coordinate
+        // scale+translate since SvgPath has no transform field.  We replicate
+        // React's `transform="translate(mapOffsetX,mapOffsetY) scale(mapScale)"`
+        // by pre-scaling every coordinate pair in the path string.
+        const scaledPath = scalePathD(region.path, mapScale, mapOffsetX, mapOffsetY);
+        primitives.push({
+            kind: 'path',
+            d: scaledPath,
+            fill,
+            stroke: '#94a3b8',
+            strokeWidth: Math.max(0.5 / mapScale, 0.3),
+        });
+        // Inline data label for matched regions.
+        if (entry !== undefined) {
+            const lx = region.labelXY[0] * mapScale + mapOffsetX;
+            const ly = region.labelXY[1] * mapScale + mapOffsetY + 4;
+            primitives.push({
+                kind: 'text',
+                x: lx,
+                y: ly,
+                text: formatAxisValue(entry.value),
+                fontSize: Math.max(6, 7 * mapScale),
+                fill: '#1e293b',
+                textAnchor: 'middle',
+                fontWeight: 'bold',
+                dominantBaseline: 'central',
+            });
+        }
+    }
+    // Colour legend bar (rendered as gradient approximation: three rect stops).
+    const legendY = mapOffsetY + mapAreaH + 4;
+    const barW = Math.min(svgWidth * 0.4, 160);
+    const barX = (svgWidth - barW) / 2;
+    // Approximate the gradient using three colour stops as adjacent rects.
+    const gradStops = [
+        { offset: 0, color: '#dbeafe' },
+        { offset: 0.5, color: '#3b82f6' },
+        { offset: 1, color: '#1e3a5f' },
+    ];
+    const stopCount = gradStops.length - 1;
+    for (let si = 0; si < stopCount; si++) {
+        const stopA = gradStops[si];
+        const stopB = gradStops[si + 1];
+        if (stopA === undefined || stopB === undefined) {
+            continue;
+        }
+        // Use the midpoint colour of each segment.
+        const midColor = lerpColor(stopA.color, stopB.color, 0.5);
+        primitives.push({
+            kind: 'rect',
+            x: barX + stopA.offset * barW,
+            y: legendY,
+            w: (stopB.offset - stopA.offset) * barW,
+            h: 8,
+            fill: midColor,
+            rx: si === 0 ? 4 : 0,
+        });
+    }
+    // Legend min/max labels.
+    primitives.push({
+        kind: 'text',
+        x: barX,
+        y: legendY + 18,
+        text: formatAxisValue(minVal),
+        fontSize: 7,
+        fill: '#64748b',
+        textAnchor: 'middle',
+    }, {
+        kind: 'text',
+        x: barX + barW,
+        y: legendY + 18,
+        text: formatAxisValue(maxVal),
+        fontSize: 7,
+        fill: '#64748b',
+        textAnchor: 'middle',
+    });
+    // Fallback table for unmatched regions.
+    if (unmatchedRows.length > 0) {
+        const tableY = legendY + 26;
+        const fontSize = Math.min(8, fallbackRowH * 0.7);
+        const colW = Math.min((svgWidth - 20) / 2, 120);
+        const tableX = (svgWidth - colW * 2) / 2;
+        primitives.push({
+            kind: 'text',
+            x: svgWidth / 2,
+            y: tableY,
+            text: 'Additional regions (not shown on map)',
+            fontSize: 7,
+            fill: '#94a3b8',
+            textAnchor: 'middle',
+        });
+        for (let i = 0; i < maxFallbackRows; i++) {
+            const row = unmatchedRows[i];
+            if (row === undefined) {
+                continue;
+            }
+            const ry = tableY + fallbackRowH * (i + 1);
+            if (ry + fallbackRowH > svgHeight) {
+                break;
+            }
+            if (i % 2 === 0) {
+                primitives.push({
+                    kind: 'rect',
+                    x: tableX,
+                    y: ry - fallbackRowH + 4,
+                    w: colW * 2,
+                    h: fallbackRowH,
+                    fill: '#f1f5f9',
+                    rx: 2,
+                });
+            }
+            primitives.push({
+                kind: 'text',
+                x: tableX + 4,
+                y: ry,
+                text: row.label,
+                fontSize,
+                fill: '#334155',
+                textAnchor: 'start',
+            }, {
+                kind: 'text',
+                x: tableX + colW + 4,
+                y: ry,
+                text: formatAxisValue(row.value),
+                fontSize,
+                fill: '#475569',
+                textAnchor: 'start',
+            });
+        }
+        if (unmatchedRows.length > 5) {
+            const moreY = tableY + fallbackRowH * 6;
+            primitives.push({
+                kind: 'text',
+                x: svgWidth / 2,
+                y: moreY,
+                text: `+${unmatchedRows.length - 5} more regions`,
+                fontSize: 6,
+                fill: '#94a3b8',
+                textAnchor: 'middle',
+            });
+        }
+    }
+    const dataLabels = titlePrimitive !== undefined ? [titlePrimitive] : [];
+    return {
+        svgWidth,
+        svgHeight,
+        title: undefined, // Rendered inline as a dataLabel text primitive above.
+        titleX: svgWidth / 2,
+        titleY: 14,
+        gridlines: [],
+        axisLabels: [],
+        zeroLine: undefined,
+        categoryLabels: [],
+        primitives,
+        dataLabels,
+        legend: [],
+        legendX: svgWidth / 2,
+        legendY: svgHeight - 8,
+        legendAnchor: 'middle',
+    };
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Internal: scale a simplified SVG path d string
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Pre-scale and translate each coordinate pair in a simple SVG path `d`
+ * attribute (M/L/Z commands only, space/comma delimited).
+ *
+ * This avoids needing a `transform` attribute on `SvgPath` which doesn't exist
+ * in the existing primitive schema.
+ */
+function scalePathD(d, scale, dx, dy) {
+    // Tokenise: split on whitespace, commas, and command letters while keeping
+    // command letters in the output.
+    const tokens = d.trim().split(/[\s,]+/u);
+    const out = [];
+    let i = 0;
+    while (i < tokens.length) {
+        const tok = tokens[i];
+        if (tok === undefined) {
+            i++;
+            continue;
+        }
+        // Command letter (M, L, Z, etc.)
+        if (/^[A-Za-z]$/u.test(tok)) {
+            out.push(tok);
+            i++;
+            continue;
+        }
+        // Coordinate pair: tok = x value, tokens[i+1] = y value.
+        const xRaw = parseFloat(tok);
+        const yRaw = parseFloat(tokens[i + 1] ?? '0');
+        if (!Number.isNaN(xRaw) && !Number.isNaN(yRaw)) {
+            out.push(`${(xRaw * scale + dx).toFixed(2)},${(yRaw * scale + dy).toFixed(2)}`);
+            i += 2;
+        }
+        else {
+            out.push(tok);
+            i++;
+        }
+    }
+    return out.join(' ');
+}
+
 /**
  * Pure, framework-agnostic helpers for chart rendering.
  *
@@ -11854,9 +13099,11 @@ function applyResize(start, handle, dx, dy, min = MIN_RESIZE) {
  *   area / area3D -> polygon fill + polyline
  *   pie / doughnut / pie3D / ofPie -> arc paths
  *   scatter -> circle dots
+ *   bubble -> circle dots sized by a 3rd series
+ *   radar / radar3D -> polar polygons + spokes
  *
  * Deferred (fallback box rendered instead):
- *   bubble, radar, stock, waterfall, combo, surface, treemap, sunburst,
+ *   stock, waterfall, combo, surface, treemap, sunburst,
  *   funnel, boxWhisker, histogram, regionMap, bar3D (complex 3-D shading),
  *   error bars, trendlines, secondary axes, data tables.
  *
@@ -12198,6 +13445,47 @@ function computeScatterDots(values, maxXIndex, layout, range) {
         cy: valueToY(val, range, layout.plotTop, layout.plotBottom),
     }));
 }
+// ─────────────────────────────────────────────────────────────────────────────
+// Bubble
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Radius of a bubble given its size value, the max size in the chart, and a
+ * median radius derived from the plot area. Mirrors `renderBubbleChart` in
+ * React's chart-scatter-bubble.tsx: when no size value is present the bubble
+ * uses the median radius; otherwise it scales from 0.5x to 2x the median.
+ */
+function computeBubbleRadius(sizeVal, maxBubble, medianRadius) {
+    if (sizeVal === undefined) {
+        return medianRadius;
+    }
+    const denom = maxBubble > 0 ? maxBubble : 1;
+    return medianRadius * 0.5 + (Math.abs(sizeVal) / denom) * medianRadius * 1.5;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Radar
+// ─────────────────────────────────────────────────────────────────────────────
+/** Angle (radians) of the i-th radar spoke; 0 points up (-90°), clockwise. */
+function radarAngle(index, catCount) {
+    const n = Math.max(catCount, 1);
+    return (Math.PI * 2 * index) / n - Math.PI / 2;
+}
+/** Project a series' values onto radar (polar) coordinates around (cx, cy). */
+function computeRadarPoints(values, maxVal, radius, cx, cy, catCount) {
+    const denom = maxVal > 0 ? maxVal : 1;
+    return values.slice(0, Math.max(catCount, 1)).map((val, i) => {
+        const angle = radarAngle(i, catCount);
+        const r = (Math.abs(val) / denom) * radius;
+        return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) };
+    });
+}
+/** Points string for a radar gridline ring at radius `rr`. */
+function radarRingPoints(cx, cy, rr, catCount) {
+    const n = Math.max(catCount, 1);
+    return Array.from({ length: n }, (_, i) => {
+        const angle = radarAngle(i, n);
+        return `${(cx + rr * Math.cos(angle)).toFixed(2)},${(cy + rr * Math.sin(angle)).toFixed(2)}`;
+    }).join(' ');
+}
 function resolveChartKind(chartType) {
     switch (chartType) {
         case 'bar':
@@ -12217,6 +13505,24 @@ function resolveChartKind(chartType) {
             return 'doughnut';
         case 'scatter':
             return 'scatter';
+        case 'bubble':
+            return 'bubble';
+        case 'radar':
+        case 'radar3D':
+            return 'radar';
+        case 'combo':
+            return 'combo';
+        case 'stock':
+            return 'stock';
+        case 'surface':
+        case 'surface3D':
+            return 'surface';
+        case 'treemap':
+            return 'treemap';
+        case 'waterfall':
+            return 'waterfall';
+        case 'regionMap':
+            return 'regionMap';
         default:
             return 'unsupported';
     }
@@ -12245,6 +13551,27 @@ function buildChartViewModel(element) {
     if (kind === 'pie' || kind === 'doughnut') {
         return buildPieViewModel(element, chartData, categoryLabels, kind === 'doughnut');
     }
+    if (kind === 'radar') {
+        return buildRadarViewModel(element, chartData, categoryLabels);
+    }
+    if (kind === 'combo') {
+        return buildComboViewModel(element, chartData, categoryLabels);
+    }
+    if (kind === 'stock') {
+        return buildStockViewModel(element, chartData, categoryLabels);
+    }
+    if (kind === 'surface') {
+        return buildSurfaceViewModel(element, chartData, categoryLabels);
+    }
+    if (kind === 'treemap') {
+        return buildTreemapViewModel(element, chartData, categoryLabels);
+    }
+    if (kind === 'waterfall') {
+        return buildWaterfallViewModel(element, chartData, categoryLabels);
+    }
+    if (kind === 'regionMap') {
+        return buildRegionMapViewModel(element, chartData, categoryLabels);
+    }
     return buildCartesianViewModel(element, chartData, categoryLabels, kind);
 }
 function buildFallbackViewModel(width, height, label) {
@@ -12361,7 +13688,7 @@ function buildCartesianViewModel(element, chartData, categoryLabels, kind) {
         : computeValueRange(chartData.series);
     const { gridlines, axisLabels } = buildGridlinesAndLabels(range, layout);
     const zeroLine = buildZeroLine(range, layout);
-    const catAxisStyle = kind === 'line' || kind === 'area' || kind === 'scatter' ? 'line' : 'bar';
+    const catAxisStyle = kind === 'line' || kind === 'area' || kind === 'scatter' || kind === 'bubble' ? 'line' : 'bar';
     const catLabels = buildCategoryLabels(categoryLabels, layout, catAxisStyle);
     const legendPos = chartData.style?.legendPosition ?? 'b';
     const { legend, legendX, legendY, legendAnchor } = buildLegend(chartData.series, chartData.colorPalette, layout.svgWidth, legendPos, layout.svgHeight, layout.plotTop);
@@ -12536,9 +13863,165 @@ function buildCartesianViewModel(element, chartData, categoryLabels, kind) {
                         textAnchor: 'middle',
                     });
                 });
-            }
+            }
+        }
+    }
+    else if (kind === 'bubble') {
+        // X = category index, Y = first/second series value, size = third series.
+        const allIndices = chartData.series.flatMap((s) => s.values.map((_, i) => i));
+        const maxXIndex = Math.max(1, ...allIndices);
+        const sizeSeries = chartData.series.length >= 3 ? chartData.series[2] : undefined;
+        const maxBubble = sizeSeries ? Math.max(1, ...sizeSeries.values.map((v) => Math.abs(v))) : 1;
+        const medianRadius = Math.min(layout.plotWidth, layout.plotHeight) * 0.04;
+        const pointSeries = chartData.series.slice(0, 2);
+        for (let si = 0; si < pointSeries.length; si++) {
+            const series = pointSeries[si];
+            const c = seriesColor(series, si, chartData.colorPalette);
+            const dots = computeScatterDots(series.values, maxXIndex, layout, range);
+            dots.forEach((dot, vi) => {
+                const r = computeBubbleRadius(sizeSeries?.values[vi], maxBubble, medianRadius);
+                primitives.push({
+                    kind: 'circle',
+                    cx: dot.cx,
+                    cy: dot.cy,
+                    r,
+                    fill: c,
+                    opacity: 0.6,
+                });
+            });
+            if (chartData.style?.hasDataLabels) {
+                series.values.forEach((val, vi) => {
+                    const dot = dots[vi];
+                    if (!dot) {
+                        return;
+                    }
+                    dataLabels.push({
+                        kind: 'text',
+                        x: dot.cx,
+                        y: dot.cy - 10,
+                        text: formatAxisValue(val),
+                        fontSize: 7,
+                        fill: '#334155',
+                        textAnchor: 'middle',
+                    });
+                });
+            }
+        }
+    }
+    const title = chartData.style?.hasTitle && chartData.title ? chartData.title : undefined;
+    return {
+        svgWidth: layout.svgWidth,
+        svgHeight: layout.svgHeight,
+        title,
+        titleX: layout.svgWidth / 2,
+        titleY: 12,
+        gridlines,
+        axisLabels,
+        zeroLine,
+        categoryLabels: catLabels,
+        primitives,
+        dataLabels,
+        legend: chartData.style?.hasLegend ? legend : [],
+        legendX,
+        legendY,
+        legendAnchor,
+    };
+}
+const RADAR_RINGS = 4;
+const RADAR_RING_COLOR = '#cbd5e1';
+const RADAR_SPOKE_COLOR = '#94a3b8';
+const RADAR_LABEL_COLOR = '#64748b';
+/**
+ * Build the view-model for a radar / spider chart. Polar, so it has no
+ * cartesian gridlines/axes; ring + spoke geometry and the data polygons all
+ * live in `primitives`, perimeter category labels in `categoryLabels`.
+ * Mirrors React's `renderRadarChart` (chart-radar.tsx).
+ */
+function buildRadarViewModel(element, chartData, categoryLabels) {
+    const layout = computePlotLayout(element.width, element.height, chartData, false);
+    const cx = layout.plotLeft + layout.plotWidth / 2;
+    const cy = layout.plotTop + layout.plotHeight / 2;
+    const radius = Math.max(Math.min(layout.plotWidth, layout.plotHeight) / 2 - 4, 1);
+    const catCount = Math.max(categoryLabels.length, 1);
+    const maxVal = Math.max(1, ...chartData.series.flatMap((s) => s.values.map((v) => Math.abs(v))));
+    const primitives = [];
+    const perimeterLabels = [];
+    // Concentric gridline rings (dashed except the outermost).
+    for (let r = 1; r <= RADAR_RINGS; r++) {
+        const rr = (radius * r) / RADAR_RINGS;
+        primitives.push({
+            kind: 'polygon',
+            points: radarRingPoints(cx, cy, rr, catCount),
+            fill: 'none',
+            stroke: RADAR_RING_COLOR,
+            strokeWidth: 0.5,
+            dashArray: r < RADAR_RINGS ? '3 2' : undefined,
+        });
+    }
+    // Axis spokes + perimeter category labels.
+    for (let i = 0; i < catCount; i++) {
+        const angle = radarAngle(i, catCount);
+        primitives.push({
+            kind: 'line',
+            x1: cx,
+            y1: cy,
+            x2: cx + radius * Math.cos(angle),
+            y2: cy + radius * Math.sin(angle),
+            stroke: RADAR_SPOKE_COLOR,
+            strokeWidth: 0.5,
+        });
+        const labelR = radius + 10;
+        perimeterLabels.push({
+            kind: 'text',
+            x: cx + labelR * Math.cos(angle),
+            y: cy + labelR * Math.sin(angle),
+            text: categoryLabels[i] ?? '',
+            fontSize: 8,
+            fill: RADAR_LABEL_COLOR,
+            textAnchor: 'middle',
+            dominantBaseline: 'central',
+        });
+    }
+    // Per-series data polygons + vertex dots.
+    const dataLabels = [];
+    chartData.series.forEach((series, si) => {
+        const c = seriesColor(series, si, chartData.colorPalette);
+        const pts = computeRadarPoints(series.values, maxVal, radius, cx, cy, catCount);
+        if (pts.length === 0) {
+            return;
+        }
+        const pointsStr = pts.map((p) => `${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' ');
+        primitives.push({
+            kind: 'polygon',
+            points: pointsStr,
+            fill: c,
+            opacity: 0.2,
+            stroke: c,
+            strokeWidth: 1.5,
+        });
+        for (const p of pts) {
+            primitives.push({ kind: 'circle', cx: p.x, cy: p.y, r: 3, fill: c });
+        }
+        if (chartData.style?.hasDataLabels) {
+            pts.forEach((p, vi) => {
+                const val = series.values[vi];
+                if (val === undefined) {
+                    return;
+                }
+                dataLabels.push({
+                    kind: 'text',
+                    x: p.x,
+                    y: p.y - 8,
+                    text: formatAxisValue(val),
+                    fontSize: 7,
+                    fill: '#334155',
+                    textAnchor: 'middle',
+                });
+            });
         }
-    }
+    });
+    const legendPos = chartData.style?.legendPosition ?? 'b';
+    const { legend, legendX, legendY, legendAnchor } = buildLegend(chartData.series, chartData.colorPalette, layout.svgWidth, legendPos, layout.svgHeight, layout.plotTop);
     const title = chartData.style?.hasTitle && chartData.title ? chartData.title : undefined;
     return {
         svgWidth: layout.svgWidth,
@@ -12546,10 +14029,10 @@ function buildCartesianViewModel(element, chartData, categoryLabels, kind) {
         title,
         titleX: layout.svgWidth / 2,
         titleY: 12,
-        gridlines,
-        axisLabels,
-        zeroLine,
-        categoryLabels: catLabels,
+        gridlines: [],
+        axisLabels: [],
+        zeroLine: undefined,
+        categoryLabels: perimeterLabels,
         primitives,
         dataLabels,
         legend: chartData.style?.hasLegend ? legend : [],
@@ -12569,9 +14052,11 @@ function buildCartesianViewModel(element, chartData, categoryLabels, kind) {
  *   area / area3D
  *   pie / doughnut / pie3D / ofPie
  *   scatter
+ *   bubble
+ *   radar / radar3D
  *
  * Deferred (labelled fallback box):
- *   bubble, radar, stock, waterfall, combo, surface, treemap, sunburst,
+ *   stock, waterfall, combo, surface, treemap, sunburst,
  *   funnel, boxWhisker, histogram, regionMap, bar3D (complex 3-D shading),
  *   error bars, trendlines, secondary axes, data tables.
  *
@@ -12616,6 +14101,9 @@ class ChartRendererComponent {
     asLine(p) {
         return p;
     }
+    asPolygon(p) {
+        return p;
+    }
     asText(p) {
         return p;
     }
@@ -12697,6 +14185,7 @@ class ChartRendererComponent {
 					[attr.text-anchor]="lbl.textAnchor"
 					[attr.font-size]="lbl.fontSize"
 					[attr.fill]="lbl.fill"
+					[attr.dominant-baseline]="lbl.dominantBaseline ?? 'auto'"
 				>
 					{{ lbl.text }}
 				</text>
@@ -12752,6 +14241,16 @@ class ChartRendererComponent {
 							[attr.stroke-width]="asLine(prim).strokeWidth"
 						/>
 					}
+					@case ('polygon') {
+						<polygon
+							[attr.points]="asPolygon(prim).points"
+							[attr.fill]="asPolygon(prim).fill"
+							[attr.stroke]="asPolygon(prim).stroke"
+							[attr.stroke-width]="asPolygon(prim).strokeWidth"
+							[attr.opacity]="asPolygon(prim).opacity ?? 1"
+							[attr.stroke-dasharray]="asPolygon(prim).dashArray ?? null"
+						/>
+					}
 				}
 			}
 
@@ -12875,6 +14374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					[attr.text-anchor]="lbl.textAnchor"
 					[attr.font-size]="lbl.fontSize"
 					[attr.fill]="lbl.fill"
+					[attr.dominant-baseline]="lbl.dominantBaseline ?? 'auto'"
 				>
 					{{ lbl.text }}
 				</text>
@@ -12930,6 +14430,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 							[attr.stroke-width]="asLine(prim).strokeWidth"
 						/>
 					}
+					@case ('polygon') {
+						<polygon
+							[attr.points]="asPolygon(prim).points"
+							[attr.fill]="asPolygon(prim).fill"
+							[attr.stroke]="asPolygon(prim).stroke"
+							[attr.stroke-width]="asPolygon(prim).strokeWidth"
+							[attr.opacity]="asPolygon(prim).opacity ?? 1"
+							[attr.stroke-dasharray]="asPolygon(prim).dashArray ?? null"
+						/>
+					}
 				}
 			}
 
@@ -12971,6 +14481,435 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 }]
         }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }] } });
 
+/**
+ * Pure, framework-agnostic A* orthogonal connector router.
+ *
+ * Angular port of the React connector-router suite:
+ *   packages/react/src/viewer/utils/connector-router.ts
+ *   packages/react/src/viewer/utils/connector-router-graph.ts
+ *   packages/react/src/viewer/utils/connector-router-astar.ts
+ *
+ * All logic is consolidated into this single file (no barrel split needed for
+ * an Angular helper module). Compatible with `connector-path.ts` / the
+ * `ConnectorRendererComponent`: pass the returned `Point[]` to
+ * `waypointsToPathD()` to obtain the SVG `d` attribute string that the
+ * component renders on a `<path>`.
+ *
+ * Constraints kept from the React source:
+ *  - No `any`.
+ *  - No `String.prototype.replaceAll` / named regex capture groups.
+ *  - No `Math.random` / `Date` — fully deterministic.
+ *  - No Angular / Vue / React imports.
+ */
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Default obstacle padding in pixels. */
+const ROUTING_PADDING_DEFAULT = 12;
+/** Safety cap on A* iterations to avoid O(n²) hangs on degenerate inputs. */
+const MAX_ASTAR_ITERATIONS = 2000;
+/** Sentinel canvas size when caller does not supply one. */
+const CANVAS_SENTINEL = 100_000;
+// ---------------------------------------------------------------------------
+// Geometry helpers (exported for tests)
+// ---------------------------------------------------------------------------
+/**
+ * Expand a rect by `pad` pixels on every side. Returns a new Rect.
+ */
+function inflateRect(r, pad) {
+    return {
+        x: r.x - pad,
+        y: r.y - pad,
+        width: r.width + pad * 2,
+        height: r.height + pad * 2,
+    };
+}
+/**
+ * Return true when point `p` lies strictly inside (or on the border of) `r`.
+ */
+function pointInRect(p, r) {
+    return p.x >= r.x && p.x <= r.x + r.width && p.y >= r.y && p.y <= r.y + r.height;
+}
+/**
+ * Return true when the axis-aligned segment `a→b` intersects rectangle `r`.
+ *
+ * Only horizontal and vertical segments are handled; diagonal segments are
+ * treated as intersecting (safe / conservative fallback).
+ */
+function segmentIntersectsRect(a, b, r) {
+    const minX = Math.min(a.x, b.x);
+    const maxX = Math.max(a.x, b.x);
+    const minY = Math.min(a.y, b.y);
+    const maxY = Math.max(a.y, b.y);
+    const rRight = r.x + r.width;
+    const rBottom = r.y + r.height;
+    // Quick reject: bounding boxes don't overlap.
+    if (maxX < r.x || minX > rRight || maxY < r.y || minY > rBottom) {
+        return false;
+    }
+    // Horizontal segment.
+    if (Math.abs(a.y - b.y) < 0.5) {
+        return a.y >= r.y && a.y <= rBottom && maxX >= r.x && minX <= rRight;
+    }
+    // Vertical segment.
+    if (Math.abs(a.x - b.x) < 0.5) {
+        return a.x >= r.x && a.x <= rRight && maxY >= r.y && minY <= rBottom;
+    }
+    // Diagonal — conservative: treat as intersecting.
+    return true;
+}
+/**
+ * Return true when the direct segment `start→end` is clear of all inflated
+ * obstacle rectangles.
+ */
+function directPathClear(start, end, inflated) {
+    for (const rect of inflated) {
+        if (segmentIntersectsRect(start, end, rect)) {
+            return false;
+        }
+    }
+    return true;
+}
+/** Manhattan-distance heuristic for A*. */
+function heuristic(a, b) {
+    return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+}
+/**
+ * Stable string key for a point (rounded to nearest pixel).
+ * Used as Map keys in A*.
+ */
+function pointKey(p) {
+    return `${Math.round(p.x)},${Math.round(p.y)}`;
+}
+// ---------------------------------------------------------------------------
+// Navigation graph construction
+// ---------------------------------------------------------------------------
+/**
+ * Build the set of candidate navigation nodes for A*:
+ * - Start and end points.
+ * - Corners of each inflated obstacle (with a small clearance margin).
+ * - Orthogonal projections of every node onto every other node's row/column.
+ *
+ * Nodes that fall inside an obstacle or outside the canvas are discarded.
+ */
+function buildGraphNodes(start, end, inflated, canvasWidth, canvasHeight) {
+    const cornerMargin = 4;
+    const nodes = [start, end];
+    for (const r of inflated) {
+        const corners = [
+            { x: r.x - cornerMargin, y: r.y - cornerMargin },
+            { x: r.x + r.width + cornerMargin, y: r.y - cornerMargin },
+            { x: r.x - cornerMargin, y: r.y + r.height + cornerMargin },
+            { x: r.x + r.width + cornerMargin, y: r.y + r.height + cornerMargin },
+        ];
+        for (const c of corners) {
+            if (c.x >= 0 && c.x <= canvasWidth && c.y >= 0 && c.y <= canvasHeight) {
+                let blocked = false;
+                for (const rect of inflated) {
+                    if (pointInRect(c, rect)) {
+                        blocked = true;
+                        break;
+                    }
+                }
+                if (!blocked) {
+                    nodes.push(c);
+                }
+            }
+        }
+    }
+    // Orthogonal projections: for every existing node, add axis-aligned
+    // intersection points with start and end rows/columns.
+    const projections = [];
+    for (const node of nodes) {
+        projections.push({ x: start.x, y: node.y });
+        projections.push({ x: node.x, y: start.y });
+        projections.push({ x: end.x, y: node.y });
+        projections.push({ x: node.x, y: end.y });
+    }
+    for (const p of projections) {
+        if (p.x >= 0 && p.x <= canvasWidth && p.y >= 0 && p.y <= canvasHeight) {
+            let blocked = false;
+            for (const rect of inflated) {
+                if (pointInRect(p, rect)) {
+                    blocked = true;
+                    break;
+                }
+            }
+            if (!blocked) {
+                nodes.push(p);
+            }
+        }
+    }
+    return nodes;
+}
+// ---------------------------------------------------------------------------
+// A* search
+// ---------------------------------------------------------------------------
+/**
+ * Run A* over the navigation graph to find the shortest orthogonal path
+ * from `start` to `end` that avoids all `inflated` obstacle rectangles.
+ *
+ * Returns an array of waypoints (possibly including intermediate bend points
+ * when L-shaped edges are taken). Falls back to `[start, end]` when no path
+ * is found within {@link MAX_ASTAR_ITERATIONS}.
+ */
+function aStarOrthogonal(nodes, start, end, inflated) {
+    const startKey = pointKey(start);
+    const endKey = pointKey(end);
+    /**
+     * Check whether two nodes can be directly connected (axis-aligned or
+     * L-shaped) without crossing an obstacle.
+     */
+    const canConnect = (a, b) => {
+        const isHoriz = Math.abs(a.y - b.y) < 1;
+        const isVert = Math.abs(a.x - b.x) < 1;
+        if (isHoriz || isVert) {
+            // Straight segment.
+            for (const rect of inflated) {
+                if (segmentIntersectsRect(a, b, rect)) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        // L-shaped: try both bend orientations.
+        const bend1 = { x: b.x, y: a.y };
+        const bend2 = { x: a.x, y: b.y };
+        let path1Clear = true;
+        let path2Clear = true;
+        for (const rect of inflated) {
+            if (path1Clear &&
+                (segmentIntersectsRect(a, bend1, rect) || segmentIntersectsRect(bend1, b, rect))) {
+                path1Clear = false;
+            }
+            if (path2Clear &&
+                (segmentIntersectsRect(a, bend2, rect) || segmentIntersectsRect(bend2, b, rect))) {
+                path2Clear = false;
+            }
+            if (!path1Clear && !path2Clear) {
+                break;
+            }
+        }
+        return path1Clear || path2Clear;
+    };
+    const gScore = new Map();
+    const fScore = new Map();
+    const cameFrom = new Map();
+    /** When an L-shaped edge was used to reach this node, the bend point. */
+    const bendPoint = new Map();
+    gScore.set(startKey, 0);
+    fScore.set(startKey, heuristic(start, end));
+    const openSet = new Set([startKey]);
+    const nodeMap = new Map();
+    for (const n of nodes) {
+        nodeMap.set(pointKey(n), n);
+    }
+    /** Pop the node with the lowest fScore from the open set. */
+    const getLowest = () => {
+        let best;
+        let bestScore = Infinity;
+        for (const key of openSet) {
+            const score = fScore.get(key) ?? Infinity;
+            if (score < bestScore) {
+                bestScore = score;
+                best = key;
+            }
+        }
+        return best;
+    };
+    let iterations = 0;
+    while (openSet.size > 0 && iterations < MAX_ASTAR_ITERATIONS) {
+        iterations++;
+        const currentKey = getLowest();
+        if (currentKey === undefined) {
+            break;
+        }
+        if (currentKey === endKey) {
+            // Reconstruct the path from cameFrom chain.
+            const path = [];
+            let key = endKey;
+            while (key !== undefined) {
+                const node = nodeMap.get(key);
+                if (node !== undefined) {
+                    const bp = bendPoint.get(key);
+                    if (bp !== undefined && bp !== null) {
+                        path.unshift(node);
+                        path.unshift(bp);
+                    }
+                    else {
+                        path.unshift(node);
+                    }
+                }
+                key = cameFrom.get(key);
+            }
+            return path;
+        }
+        openSet.delete(currentKey);
+        const current = nodeMap.get(currentKey);
+        if (current === undefined) {
+            continue;
+        }
+        for (const neighbor of nodes) {
+            const neighborKey = pointKey(neighbor);
+            if (neighborKey === currentKey) {
+                continue;
+            }
+            if (!canConnect(current, neighbor)) {
+                continue;
+            }
+            const isHoriz = Math.abs(current.y - neighbor.y) < 1;
+            const isVert = Math.abs(current.x - neighbor.x) < 1;
+            let dist;
+            let bp = null;
+            if (isHoriz || isVert) {
+                dist = heuristic(current, neighbor);
+            }
+            else {
+                // L-shaped: pick the shorter valid bend.
+                const bend1 = { x: neighbor.x, y: current.y };
+                const bend2 = { x: current.x, y: neighbor.y };
+                let use1 = true;
+                for (const rect of inflated) {
+                    if (segmentIntersectsRect(current, bend1, rect) ||
+                        segmentIntersectsRect(bend1, neighbor, rect)) {
+                        use1 = false;
+                        break;
+                    }
+                }
+                bp = use1 ? bend1 : bend2;
+                dist =
+                    Math.abs(current.x - bp.x) +
+                        Math.abs(current.y - bp.y) +
+                        Math.abs(bp.x - neighbor.x) +
+                        Math.abs(bp.y - neighbor.y);
+            }
+            const tentativeG = (gScore.get(currentKey) ?? Infinity) + dist;
+            if (tentativeG < (gScore.get(neighborKey) ?? Infinity)) {
+                cameFrom.set(neighborKey, currentKey);
+                bendPoint.set(neighborKey, bp);
+                gScore.set(neighborKey, tentativeG);
+                fScore.set(neighborKey, tentativeG + heuristic(neighbor, end));
+                openSet.add(neighborKey);
+            }
+        }
+    }
+    // No path found — fall back to a direct two-point path.
+    return [start, end];
+}
+// ---------------------------------------------------------------------------
+// Path simplification
+// ---------------------------------------------------------------------------
+/**
+ * Remove collinear intermediate waypoints from a path.
+ *
+ * A waypoint is dropped when the previous and next waypoints share the same
+ * axis as both flanking segments (i.e. three consecutive collinear points).
+ * This keeps the output minimal while preserving every directional change.
+ */
+function simplifyPath(points) {
+    if (points.length <= 2) {
+        return [...points];
+    }
+    const result = [points[0]];
+    for (let i = 1; i < points.length - 1; i++) {
+        const prev = result[result.length - 1];
+        const curr = points[i];
+        const next = points[i + 1];
+        const sameX = Math.abs(prev.x - curr.x) < 1 && Math.abs(curr.x - next.x) < 1;
+        const sameY = Math.abs(prev.y - curr.y) < 1 && Math.abs(curr.y - next.y) < 1;
+        // Drop only when strictly collinear on one axis.
+        if (!sameX && !sameY) {
+            result.push(curr);
+        }
+        else if (!sameX || !sameY) {
+            // One axis matches — still a direction change if the other doesn't.
+            if (!(sameX || sameY)) {
+                result.push(curr);
+            }
+        }
+        // else: fully collinear on both axes → drop.
+    }
+    result.push(points[points.length - 1]);
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Public routing API
+// ---------------------------------------------------------------------------
+/**
+ * Route an orthogonal connector between `start` and `end`, avoiding all
+ * `obstacles`. Returns a list of waypoints (including the start and end
+ * points) that form an axis-aligned polyline.
+ *
+ * Strategy (fast-path first, A* as fallback):
+ * 1. No obstacles → return `[start, end]` directly.
+ * 2. Direct line clear → return `[start, end]`.
+ * 3. Single horizontal elbow (`start → (end.x, start.y) → end`) clear → use it.
+ * 4. Single vertical elbow (`start → (start.x, end.y) → end`) clear → use it.
+ * 5. Full A* search on the navigation graph.
+ */
+function routeOrthogonalConnector(start, end, obstacles, opts) {
+    const padding = opts?.padding ?? ROUTING_PADDING_DEFAULT;
+    const canvasWidth = opts?.canvasWidth ?? CANVAS_SENTINEL;
+    const canvasHeight = opts?.canvasHeight ?? CANVAS_SENTINEL;
+    if (obstacles.length === 0) {
+        return [start, end];
+    }
+    const inflated = obstacles.map((r) => inflateRect(r, padding));
+    if (directPathClear(start, end, inflated)) {
+        return [start, end];
+    }
+    // Try single horizontal elbow.
+    const midH = { x: end.x, y: start.y };
+    const midV = { x: start.x, y: end.y };
+    let elbowHClear = true;
+    let elbowVClear = true;
+    for (const rect of inflated) {
+        if (elbowHClear &&
+            (segmentIntersectsRect(start, midH, rect) || segmentIntersectsRect(midH, end, rect))) {
+            elbowHClear = false;
+        }
+        if (elbowVClear &&
+            (segmentIntersectsRect(start, midV, rect) || segmentIntersectsRect(midV, end, rect))) {
+            elbowVClear = false;
+        }
+        if (!elbowHClear && !elbowVClear) {
+            break;
+        }
+    }
+    if (elbowHClear) {
+        return [start, midH, end];
+    }
+    if (elbowVClear) {
+        return [start, midV, end];
+    }
+    // Full A* search.
+    const nodes = buildGraphNodes(start, end, inflated, canvasWidth, canvasHeight);
+    const path = aStarOrthogonal(nodes, start, end, inflated);
+    return simplifyPath(path);
+}
+// ---------------------------------------------------------------------------
+// SVG path serialisation
+// ---------------------------------------------------------------------------
+/**
+ * Convert an array of waypoints to an SVG `path` `d` attribute string.
+ *
+ * Returns an empty string for an empty waypoint array, `"M x y"` for a
+ * single point, and `"M x y L x1 y1 …"` for a polyline.
+ *
+ * This output is compatible with the `pathD` field on `ConnectorGeometry`
+ * from `connector-path.ts` and can be bound directly to a `<path [attr.d]>`.
+ */
+function waypointsToPathD(waypoints) {
+    if (waypoints.length === 0) {
+        return '';
+    }
+    const parts = [`M${waypoints[0].x},${waypoints[0].y}`];
+    for (let i = 1; i < waypoints.length; i++) {
+        parts.push(`L${waypoints[i].x},${waypoints[i].y}`);
+    }
+    return parts.join(' ');
+}
+
 /**
  * Pure, framework-agnostic helpers for rendering connector elements.
  *
@@ -12990,7 +14929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * This is a pure function: no side-effects, no Angular/Vue/React imports.
  * The component calls this once per change-detection cycle inside a `computed()`.
  */
-function buildConnectorGeometry(element, zIndex) {
+function buildConnectorGeometry(element, zIndex, routing) {
     const ss = hasShapeProperties(element) ? element.shapeStyle : undefined;
     const strokeWidth = Math.max(0, ss?.strokeWidth ?? 2);
     const strokeColor = ss?.strokeColor ?? DEFAULT_STROKE_COLOR;
@@ -13003,7 +14942,26 @@ function buildConnectorGeometry(element, zIndex) {
     const x2 = element.flipHorizontal ? 0 : svgW;
     const y2 = element.flipVertical ? 0 : svgH;
     const shapeType = element.shapeType;
-    const pathD = buildConnectorPathD(shapeType, x1, y1, x2, y2, connectorBendFraction(element));
+    let pathD = buildConnectorPathD(shapeType, x1, y1, x2, y2, connectorBendFraction(element));
+    // Obstacle-avoiding A* routing for bent connectors. Routes in absolute slide
+    // coordinates (so it can detour outside the connector's own bounding box —
+    // the SVG uses `overflow: visible`), then translates waypoints back to
+    // element-local space for the path data.
+    if (routing &&
+        routing.obstacles.length > 0 &&
+        connectorKind(shapeType) === 'bent' &&
+        (element.width > 0 || element.height > 0)) {
+        const start = { x: element.x + x1, y: element.y + y1 };
+        const end = { x: element.x + x2, y: element.y + y2 };
+        const waypoints = routeOrthogonalConnector(start, end, routing.obstacles, {
+            canvasWidth: routing.canvasWidth,
+            canvasHeight: routing.canvasHeight,
+        });
+        if (waypoints.length > 2) {
+            const local = waypoints.map((p) => ({ x: p.x - element.x, y: p.y - element.y }));
+            pathD = waypointsToPathD(local);
+        }
+    }
     const markerSeed = element.id.replace(/[^a-zA-Z0-9_-]/gu, '_');
     const startMarkerId = `${markerSeed}-start`;
     const endMarkerId = `${markerSeed}-end`;
@@ -13162,6 +15120,200 @@ function buildWrapperStyle(element, zIndex) {
     return parts.join(';');
 }
 
+/**
+ * Connector text overlay — Angular port of the Vue `ConnectorTextOverlay.vue`
+ * (packages/vue/src/viewer/components/ConnectorTextOverlay.vue).
+ *
+ * Renders a connector's label text centred over the connector's bounding box.
+ * PowerPoint allows authors to attach a text run to a connector element
+ * (`<p:cxnSp>` with a non-empty `<p:txBody>`); the label is painted on top of
+ * the connector path, centred both horizontally and vertically within the
+ * element's bounding box.
+ *
+ * The overlay is an absolutely-positioned flex container rendered as a sibling
+ * of the SVG connector — NOT part of the SVG — so per-segment rich text
+ * renders with standard HTML text layout. It is `pointer-events: none` and
+ * never intercepts selection or hit-testing on the connector beneath it.
+ *
+ * ### Pure label-geometry helper
+ * All positioning / style math lives in the exported pure functions
+ * `buildOverlayContainerStyle`, `buildOverlayBlockStyle`, and `buildSegmentStyle`
+ * so they can be unit-tested without TestBed (see
+ * `connector-text-overlay.component.test.ts`).
+ */
+// ---------------------------------------------------------------------------
+// Pure exported helpers (tested independently, no Angular dependency)
+// ---------------------------------------------------------------------------
+/**
+ * Inline style string for the outer overlay container.
+ *
+ * The container fills the connector bounding box, uses flexbox to centre
+ * content, and is `pointer-events: none`.
+ *
+ * @param align - OOXML paragraph alignment token. Variants `justLow`, `dist`,
+ *   and `thaiDist` collapse to `justify`; every other value passes through;
+ *   absent → `center` (connector-label convention).
+ */
+function buildOverlayContainerStyle(align) {
+    let textAlign;
+    if (align === 'justLow' || align === 'dist' || align === 'thaiDist') {
+        textAlign = 'justify';
+    }
+    else if (align !== undefined) {
+        textAlign = align;
+    }
+    else {
+        textAlign = 'center';
+    }
+    return [
+        'position:absolute',
+        'inset:0',
+        'display:flex',
+        'align-items:center',
+        'justify-content:center',
+        'overflow:hidden',
+        'pointer-events:none',
+        `text-align:${textAlign}`,
+    ].join(';');
+}
+/**
+ * Inline style string for the inner text-block `<div>`.
+ *
+ * Applies paragraph-level defaults: font family, size, colour, weight, style,
+ * and decoration from `textStyle`, with sensible fall-backs for connector
+ * labels (10pt, black, normal).
+ */
+function buildOverlayBlockStyle(textStyle) {
+    const ts = textStyle;
+    const parts = [
+        `font-family:${ts?.fontFamily ?? 'inherit'}`,
+        `font-size:${ts?.fontSize !== undefined ? `${ts.fontSize}pt` : '10pt'}`,
+        `color:${ts?.color ?? '#000000'}`,
+        `font-weight:${ts?.bold ? 'bold' : 'normal'}`,
+        `font-style:${ts?.italic ? 'italic' : 'normal'}`,
+        `text-decoration:${ts?.underline ? 'underline' : 'none'}`,
+        'padding:0 4px',
+        'white-space:pre-wrap',
+        'line-height:1.2',
+        'max-width:100%',
+    ];
+    return parts.join(';');
+}
+/**
+ * Inline style string for a single text-run `<span>`.
+ *
+ * Run-level properties override paragraph-level properties where both are
+ * present. Falls back to `textStyle` (paragraph defaults) for each property.
+ */
+function buildSegmentStyle(segment, textStyle) {
+    const s = segment.style;
+    const ts = textStyle;
+    const parts = [
+        `font-family:${s?.fontFamily ?? ts?.fontFamily ?? 'inherit'}`,
+        `color:${s?.color ?? ts?.color ?? '#000000'}`,
+        `font-weight:${s?.bold ? 'bold' : ts?.bold ? 'bold' : 'normal'}`,
+        `font-style:${s?.italic ? 'italic' : ts?.italic ? 'italic' : 'normal'}`,
+        `text-decoration:${s?.underline ? 'underline' : 'none'}`,
+    ];
+    if (s?.fontSize !== undefined) {
+        parts.push(`font-size:${s.fontSize}pt`);
+    }
+    return parts.join(';');
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * `<pptx-connector-text-overlay>` — renders a connector's text label.
+ *
+ * **Usage** (inside `ConnectorRendererComponent`'s host wrapper `<div>`):
+ * ```html
+ * @if (hasLabel()) {
+ *   <pptx-connector-text-overlay
+ *     [text]="element().text"
+ *     [segments]="element().textSegments"
+ *     [textStyle]="element().textStyle"
+ *   />
+ * }
+ * ```
+ *
+ * All inputs are optional; the component renders nothing when `text` is falsy
+ * or `segments` is empty.
+ */
+class ConnectorTextOverlayComponent {
+    /**
+     * Trimmed plain-text label. When falsy the overlay is not rendered.
+     * This is the `text` property from `ConnectorPptxElement`.
+     */
+    text = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-run rich-text segments from `ConnectorPptxElement.textSegments`.
+     * When absent or empty the overlay is not rendered.
+     */
+    segments = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    /**
+     * Paragraph-level text style from `ConnectorPptxElement.textStyle`.
+     * Controls alignment, default font, colour, etc.
+     */
+    textStyle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textStyle" }] : /* istanbul ignore next */ []));
+    // -----------------------------------------------------------------------
+    // Derived signals
+    // -----------------------------------------------------------------------
+    /** True when there is a non-empty label to display. */
+    hasText = computed(() => Boolean(this.text()) && this.segments() !== undefined && (this.segments()?.length ?? 0) > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasText" }] : /* istanbul ignore next */ []));
+    /** Inline style for the outer flex container. */
+    containerStyle = computed(() => buildOverlayContainerStyle(this.textStyle()?.align), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerStyle" }] : /* istanbul ignore next */ []));
+    /** Inline style for the inner paragraph block. */
+    blockStyle = computed(() => buildOverlayBlockStyle(this.textStyle()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blockStyle" }] : /* istanbul ignore next */ []));
+    /** Pre-computed segments with their individual inline style strings. */
+    styledSegments = computed(() => {
+        const segs = this.segments() ?? [];
+        const ts = this.textStyle();
+        return segs
+            .filter((s) => !s.isParagraphBreak)
+            .map((s) => ({ text: s.text, style: buildSegmentStyle(s, ts) }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styledSegments" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ConnectorTextOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ConnectorTextOverlayComponent, isStandalone: true, selector: "pptx-connector-text-overlay", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, textStyle: { classPropertyName: "textStyle", publicName: "textStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		@if (hasText()) {
+			<div class="pptx-ng-connector-text" [style]="containerStyle()">
+				<div class="pptx-ng-connector-text__block" [style]="blockStyle()">
+					@for (seg of styledSegments(); track $index) {
+						<span class="pptx-ng-connector-text__run" [style]="seg.style">{{ seg.text }}</span>
+					}
+				</div>
+			</div>
+		}
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ConnectorTextOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pptx-connector-text-overlay',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [],
+                    template: `
+		@if (hasText()) {
+			<div class="pptx-ng-connector-text" [style]="containerStyle()">
+				<div class="pptx-ng-connector-text__block" [style]="blockStyle()">
+					@for (seg of styledSegments(); track $index) {
+						<span class="pptx-ng-connector-text__run" [style]="seg.style">{{ seg.text }}</span>
+					}
+				</div>
+			</div>
+		}
+	`,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], textStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "textStyle", required: false }] }] } });
+
 /**
  * ConnectorRendererComponent — Angular port of the Vue `ConnectorRenderer.vue`
  * (and the React `ConnectorElementRenderer`, basic subset).
@@ -13171,25 +15323,53 @@ function buildWrapperStyle(element, zIndex) {
  * is baked into the endpoints (not a CSS transform) so arrowheads point the
  * right way.
  *
- * All path/style math lives in `connector-path.ts` (pure TS, no Angular
- * dependency) so it can be unit-tested without TestBed.
+ * Renders straight (`<line>`), bent (elbow) and curved (Bézier) connectors via
+ * `connector-path.ts`. When obstacle rects are supplied (`obstacles` input,
+ * absolute slide coords), bent connectors are routed around them with an A*
+ * orthogonal router. A connector's optional text label is painted on top via
+ * `ConnectorTextOverlayComponent`.
+ *
+ * All path/style math lives in `connector-path.ts` / `connector-routing.ts`
+ * (pure TS, no Angular dependency) so it can be unit-tested without TestBed.
  *
- * Not yet ported (TODO, see PORTING.md): bent/curved connector routing
- * (`getConnectorPathGeometry`), compound lines, connector text overlay, line
- * shadows/glow. Bent/curved connectors currently fall back to a straight line.
+ * Not yet ported (TODO, see PORTING.md): compound (double/triple) lines, line
+ * shadows/glow.
  */
 class ConnectorRendererComponent {
     element = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
     zIndex = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    /** Obstacle rects (absolute slide coords) for A* routing of bent connectors. */
+    obstacles = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "obstacles" }] : /* istanbul ignore next */ []));
+    canvasWidth = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasWidth" }] : /* istanbul ignore next */ []));
+    canvasHeight = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasHeight" }] : /* istanbul ignore next */ []));
     /** All derived geometry, recomputed on every input change. */
-    geo = computed(() => buildConnectorGeometry(this.element(), this.zIndex()), /* @ts-ignore */
+    geo = computed(() => {
+        const obstacles = this.obstacles();
+        const routing = obstacles.length > 0
+            ? { obstacles, canvasWidth: this.canvasWidth(), canvasHeight: this.canvasHeight() }
+            : undefined;
+        return buildConnectorGeometry(this.element(), this.zIndex(), routing);
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "geo" }] : /* istanbul ignore next */ []));
     viewBox = computed(() => `0 0 ${this.geo().svgW} ${this.geo().svgH}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    // Connectors carry an optional text label (PptxTextProperties). Narrow the
+    // union once here so the template can bind the overlay inputs.
+    textProps = computed(() => this.element(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textProps" }] : /* istanbul ignore next */ []));
+    connectorText = computed(() => this.textProps().text, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectorText" }] : /* istanbul ignore next */ []));
+    connectorSegments = computed(() => this.textProps().textSegments, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectorSegments" }] : /* istanbul ignore next */ []));
+    connectorTextStyle = computed(() => this.textProps().textStyle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectorTextStyle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ConnectorRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ConnectorRendererComponent, isStandalone: true, selector: "pptx-connector-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ConnectorRendererComponent, isStandalone: true, selector: "pptx-connector-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, obstacles: { classPropertyName: "obstacles", publicName: "obstacles", isSignal: true, isRequired: false, transformFunction: null }, canvasWidth: { classPropertyName: "canvasWidth", publicName: "canvasWidth", isSignal: true, isRequired: false, transformFunction: null }, canvasHeight: { classPropertyName: "canvasHeight", publicName: "canvasHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<div
 			class="pptx-ng-element pptx-ng-connector"
 			[style]="geo().wrapperStyle"
@@ -13268,8 +15448,13 @@ class ConnectorRendererComponent {
 					/>
 				}
 			</svg>
+			<pptx-connector-text-overlay
+				[text]="connectorText()"
+				[segments]="connectorSegments()"
+				[textStyle]="connectorTextStyle()"
+			/>
 		</div>
-	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: ConnectorTextOverlayComponent, selector: "pptx-connector-text-overlay", inputs: ["text", "segments", "textStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ConnectorRendererComponent, decorators: [{
             type: Component,
@@ -13277,7 +15462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     selector: 'pptx-connector-renderer',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [],
+                    imports: [ConnectorTextOverlayComponent],
                     template: `
 		<div
 			class="pptx-ng-element pptx-ng-connector"
@@ -13357,10 +15542,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					/>
 				}
 			</svg>
+			<pptx-connector-text-overlay
+				[text]="connectorText()"
+				[segments]="connectorSegments()"
+				[textStyle]="connectorTextStyle()"
+			/>
 		</div>
 	`,
                 }]
-        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], obstacles: [{ type: i0.Input, args: [{ isSignal: true, alias: "obstacles", required: false }] }], canvasWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasWidth", required: false }] }], canvasHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasHeight", required: false }] }] } });
 
 /**
  * Scalar viewer defaults — shared across the React, Vue, and Angular bindings
@@ -18000,6 +20190,13 @@ class ElementRendererComponent {
     ...(ngDevMode ? [{ debugName: "mediaDataUrls" }] : /* istanbul ignore next */ []));
     zIndex = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    /** Obstacle rects (absolute slide coords) for connector A* routing. */
+    obstacles = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "obstacles" }] : /* istanbul ignore next */ []));
+    canvasWidth = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasWidth" }] : /* istanbul ignore next */ []));
+    canvasHeight = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasHeight" }] : /* istanbul ignore next */ []));
     containerStyle = computed(() => getContainerStyle(this.element(), this.zIndex()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "containerStyle" }] : /* istanbul ignore next */ []));
     shapeContainerStyle = computed(() => ({
@@ -18119,10 +20316,16 @@ class ElementRendererComponent {
         return style;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ElementRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ElementRendererComponent, isStandalone: true, selector: "pptx-element-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ElementRendererComponent, isStandalone: true, selector: "pptx-element-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, obstacles: { classPropertyName: "obstacles", publicName: "obstacles", isSignal: true, isRequired: false, transformFunction: null }, canvasWidth: { classPropertyName: "canvasWidth", publicName: "canvasWidth", isSignal: true, isRequired: false, transformFunction: null }, canvasHeight: { classPropertyName: "canvasHeight", publicName: "canvasHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		@switch (true) {
 			@case (element().type === 'connector') {
-				<pptx-connector-renderer [element]="element()" [zIndex]="zIndex()" />
+				<pptx-connector-renderer
+					[element]="element()"
+					[zIndex]="zIndex()"
+					[obstacles]="obstacles()"
+					[canvasWidth]="canvasWidth()"
+					[canvasHeight]="canvasHeight()"
+				/>
 			}
 			@case (element().type === 'ink') {
 				<pptx-ink-renderer
@@ -18277,7 +20480,7 @@ class ElementRendererComponent {
 				</div>
 			}
 		}
-	`, isInline: true, dependencies: [{ kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ConnectorRendererComponent, selector: "pptx-connector-renderer", inputs: ["element", "zIndex"] }, { kind: "component", type: TableRendererComponent, selector: "pptx-table-renderer", inputs: ["element"] }, { kind: "component", type: ChartRendererComponent, selector: "pptx-chart-renderer", inputs: ["element"] }, { kind: "component", type: SmartArtRendererComponent, selector: "pptx-smart-art-renderer", inputs: ["element", "zIndex"] }, { kind: "component", type: InkRendererComponent, selector: "pptx-ink-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: OleRendererComponent, selector: "pptx-ole-renderer", inputs: ["element", "zIndex"] }, { kind: "component", type: Model3DRendererComponent, selector: "pptx-model3d-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: ZoomRendererComponent, selector: "pptx-zoom-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: EquationRendererComponent, selector: "pptx-equation-renderer", inputs: ["equationXml", "equationNumber"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex", "obstacles", "canvasWidth", "canvasHeight"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ConnectorRendererComponent, selector: "pptx-connector-renderer", inputs: ["element", "zIndex", "obstacles", "canvasWidth", "canvasHeight"] }, { kind: "component", type: TableRendererComponent, selector: "pptx-table-renderer", inputs: ["element"] }, { kind: "component", type: ChartRendererComponent, selector: "pptx-chart-renderer", inputs: ["element"] }, { kind: "component", type: SmartArtRendererComponent, selector: "pptx-smart-art-renderer", inputs: ["element", "zIndex"] }, { kind: "component", type: InkRendererComponent, selector: "pptx-ink-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: OleRendererComponent, selector: "pptx-ole-renderer", inputs: ["element", "zIndex"] }, { kind: "component", type: Model3DRendererComponent, selector: "pptx-model3d-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: ZoomRendererComponent, selector: "pptx-zoom-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: EquationRendererComponent, selector: "pptx-equation-renderer", inputs: ["equationXml", "equationNumber"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ElementRendererComponent, decorators: [{
             type: Component,
@@ -18300,7 +20503,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     template: `
 		@switch (true) {
 			@case (element().type === 'connector') {
-				<pptx-connector-renderer [element]="element()" [zIndex]="zIndex()" />
+				<pptx-connector-renderer
+					[element]="element()"
+					[zIndex]="zIndex()"
+					[obstacles]="obstacles()"
+					[canvasWidth]="canvasWidth()"
+					[canvasHeight]="canvasHeight()"
+				/>
 			}
 			@case (element().type === 'ink') {
 				<pptx-ink-renderer
@@ -18457,7 +20666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 		}
 	`,
                 }]
-        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], obstacles: [{ type: i0.Input, args: [{ isSignal: true, alias: "obstacles", required: false }] }], canvasWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasWidth", required: false }] }], canvasHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasHeight", required: false }] }] } });
 
 /** Default slide stage colour when a slide carries no usable background. */
 const DEFAULT_SLIDE_BACKGROUND = '#ffffff';
@@ -18794,6 +21003,15 @@ class SlideCanvasComponent {
     }
     elements = computed(() => this.slide()?.elements ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
+    /**
+     * Obstacle rects (absolute slide coords) for connector A* routing: every
+     * non-connector element with a positive footprint. Bent connectors detour
+     * around these instead of cutting straight through neighbouring shapes.
+     */
+    connectorObstacles = computed(() => this.elements()
+        .filter((e) => e.type !== 'connector' && e.width > 0 && e.height > 0)
+        .map((e) => ({ x: e.x, y: e.y, width: e.width, height: e.height })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectorObstacles" }] : /* istanbul ignore next */ []));
     /** Bounding boxes (stage coords) for the selected elements. */
     selectionBoxes = computed(() => {
         const selected = new Set(this.selectedIds());
@@ -19158,6 +21376,9 @@ class SlideCanvasComponent {
 							[element]="element"
 							[mediaDataUrls]="mediaDataUrls()"
 							[zIndex]="i"
+							[obstacles]="connectorObstacles()"
+							[canvasWidth]="canvasSize().width"
+							[canvasHeight]="canvasSize().height"
 						/>
 					}
 					@for (box of selectionBoxes(); track box.id) {
@@ -19224,7 +21445,7 @@ class SlideCanvasComponent {
 				</div>
 			</div>
 		</div>
-	`, isInline: true, styles: [".pptx-ng-canvas-stage.is-editable{touch-action:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-canvas-stage.is-editable{touch-action:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex", "obstacles", "canvasWidth", "canvasHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SlideCanvasComponent, decorators: [{
             type: Component,
@@ -19247,6 +21468,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 							[element]="element"
 							[mediaDataUrls]="mediaDataUrls()"
 							[zIndex]="i"
+							[obstacles]="connectorObstacles()"
+							[canvasWidth]="canvasSize().width"
+							[canvasHeight]="canvasSize().height"
 						/>
 					}
 					@for (box of selectionBoxes(); track box.id) {
@@ -26030,5 +28254,5 @@ function cn(...values) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccessibilityPanelComponent, AccessibilityService, AnimationPanelComponent, AnimationPlaybackService, BroadcastDialogComponent, CURSOR_PALETTE, ChartRendererComponent, CollaborationCursorsComponent, CollaborationService, CommentsPanelComponent, CommentsService, ConnectorRendererComponent, DEFAULT_BROADCAST_SERVER_URL, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_PRINT_SETTINGS, DEFAULT_SLIDE_BACKGROUND, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR$1 as DEFAULT_TEXT_COLOR, EMBEDDED_FONTS_STYLE_ID, EditorContextMenuComponent, EditorHistory, EditorStateService, EditorToolbarComponent, ElementRendererComponent, EmbeddedFontsService, EquationRendererComponent, ExportService, FindBarComponent, HANDOUT_OPTIONS, HyperlinkDialogComponent, InkRendererComponent, InspectorPanelComponent, LoadContentService, ModalDialogComponent, Model3DRendererComponent, OleRendererComponent, PowerPointViewerComponent, PresentationOverlayComponent, PresentationTransitionOverlayComponent, PresenterViewComponent, PrintDialogComponent, PrintService, PrintSettingsPanelComponent, PropertiesDialogComponent, RESIZE_HANDLES, SEVERITY_GROUPS, SEVERITY_LABELS, SLIDE_TRANSITION_KEYFRAMES, ShareDialogComponent, SignaturesPanelComponent, SignaturesService, SlideCanvasComponent, SlideSorterOverlayComponent, SlidesPanelComponent, SmartArtRendererComponent, TYPE_LABELS$1 as TYPE_LABELS, TableRendererComponent, VIEWER_THEME, ZoomRendererComponent, addCommentToList, advanceStep, applyMove, applyResize, assignUserColor, bringForward, bringToFront, buildBroadcastConfig, buildBroadcastViewerUrl, buildClearHyperlinkPatch, buildClickGroups, buildCollaborationConfig, buildCssGradientFromShapeStyle, buildEmbeddedFontStyles, buildFontFaceRule, buildHyperlinkPatch, buildPatternFillCss, buildPrintDocument, buildPropertiesPatch, buildShareUrl, bulletIndentPx, canStartBroadcast, canStartShare, canUseClipboard, clampCursorPosition, clampNotesFontSize, clampStep, cn, collectAccessibilityIssues, collectElementText, collectSlideText, computeHandoutLayout, computePageCount, computeSlideIndices, computeTimerProgress, convertOmmlToMathMl, countAccessibilityIssues, defaultCssVars, defaultRadius, defaultThemeColors, deleteElementsByIds, derivePresenceList, duplicateElementById, durationOf, estimatePageCount, fontMimeForFormat, formatAutoNumber, formatCursorLabel, formatElapsed, formatPropertyDate, formatTime, generateBroadcastRoomId, generateCommentId, getContainerStyle, getImageSrc, getPatternSvg, getResolvedShapeClipPath, getResolvedShapeClipPathFor, getShapeFillStrokeStyle, getSlideBackgroundStyle, getSlideTransitionAnimations, getTextBlockStyle, groupIssuesBySeverity, hasExistingLink, headerLabel, isInjectableUrl, isPpactionUrl, isSigned, isUrlSafe, isValidRoomId, issueTrackKey, issueTypeLabel, moveElementBy, normalizeFontFormat, normalizeSlidesPerPage, ommlToMathml, overallStatus, pendingElementStyles, presenceToCursors, provideViewerTheme, removeCommentFromList, renderToCanvas, resizeElement, resolveFontVariant, resolveHyperlinkHref, resolveParagraphBullet, resolvePresenterNotes, resolveTransitionDuration, revealedElementStyles, sanitizeColor, sanitizeSlideIndex, sanitizeUserName, searchSlides, seedBroadcastFields, seedHyperlinkDraft, seedPropertiesDraft, seedShareFields, sendBackward, sendToBack, setElementPosition, signatureCountLabel, signatureKey, signatureTimestamp, signerName, statusKind, statusLabel, themeStyle, themeToCssVars, toggleCommentResolvedInList, updateElementById, validatePrintSettings, validateRoomId, worstStatus };
+export { AccessibilityPanelComponent, AccessibilityService, AnimationPanelComponent, AnimationPlaybackService, BroadcastDialogComponent, CURSOR_PALETTE, ChartRendererComponent, CollaborationCursorsComponent, CollaborationService, CommentsPanelComponent, CommentsService, ConnectorRendererComponent, ConnectorTextOverlayComponent, DEFAULT_BROADCAST_SERVER_URL, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_PRINT_SETTINGS, DEFAULT_SLIDE_BACKGROUND, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR$1 as DEFAULT_TEXT_COLOR, EMBEDDED_FONTS_STYLE_ID, EditorContextMenuComponent, EditorHistory, EditorStateService, EditorToolbarComponent, ElementRendererComponent, EmbeddedFontsService, EquationRendererComponent, ExportService, FindBarComponent, HANDOUT_OPTIONS, HyperlinkDialogComponent, InkRendererComponent, InspectorPanelComponent, LoadContentService, ModalDialogComponent, Model3DRendererComponent, OleRendererComponent, PowerPointViewerComponent, PresentationOverlayComponent, PresentationTransitionOverlayComponent, PresenterViewComponent, PrintDialogComponent, PrintService, PrintSettingsPanelComponent, PropertiesDialogComponent, RESIZE_HANDLES, SEVERITY_GROUPS, SEVERITY_LABELS, SLIDE_TRANSITION_KEYFRAMES, ShareDialogComponent, SignaturesPanelComponent, SignaturesService, SlideCanvasComponent, SlideSorterOverlayComponent, SlidesPanelComponent, SmartArtRendererComponent, TYPE_LABELS$1 as TYPE_LABELS, TableRendererComponent, VIEWER_THEME, ZoomRendererComponent, addCommentToList, advanceStep, applyMove, applyResize, assignUserColor, bringForward, bringToFront, buildBroadcastConfig, buildBroadcastViewerUrl, buildClearHyperlinkPatch, buildClickGroups, buildCollaborationConfig, buildCssGradientFromShapeStyle, buildEmbeddedFontStyles, buildFontFaceRule, buildHyperlinkPatch, buildPatternFillCss, buildPrintDocument, buildPropertiesPatch, buildShareUrl, bulletIndentPx, canStartBroadcast, canStartShare, canUseClipboard, clampCursorPosition, clampNotesFontSize, clampStep, cn, collectAccessibilityIssues, collectElementText, collectSlideText, computeHandoutLayout, computePageCount, computeSlideIndices, computeTimerProgress, convertOmmlToMathMl, countAccessibilityIssues, defaultCssVars, defaultRadius, defaultThemeColors, deleteElementsByIds, derivePresenceList, duplicateElementById, durationOf, estimatePageCount, fontMimeForFormat, formatAutoNumber, formatCursorLabel, formatElapsed, formatPropertyDate, formatTime, generateBroadcastRoomId, generateCommentId, getContainerStyle, getImageSrc, getPatternSvg, getResolvedShapeClipPath, getResolvedShapeClipPathFor, getShapeFillStrokeStyle, getSlideBackgroundStyle, getSlideTransitionAnimations, getTextBlockStyle, groupIssuesBySeverity, hasExistingLink, headerLabel, isInjectableUrl, isPpactionUrl, isSigned, isUrlSafe, isValidRoomId, issueTrackKey, issueTypeLabel, moveElementBy, normalizeFontFormat, normalizeSlidesPerPage, ommlToMathml, overallStatus, pendingElementStyles, presenceToCursors, provideViewerTheme, removeCommentFromList, renderToCanvas, resizeElement, resolveFontVariant, resolveHyperlinkHref, resolveParagraphBullet, resolvePresenterNotes, resolveTransitionDuration, revealedElementStyles, routeOrthogonalConnector, sanitizeColor, sanitizeSlideIndex, sanitizeUserName, searchSlides, seedBroadcastFields, seedHyperlinkDraft, seedPropertiesDraft, seedShareFields, sendBackward, sendToBack, setElementPosition, signatureCountLabel, signatureKey, signatureTimestamp, signerName, statusKind, statusLabel, themeStyle, themeToCssVars, toggleCommentResolvedInList, updateElementById, validatePrintSettings, validateRoomId, waypointsToPathD, worstStatus };
 //# sourceMappingURL=pptx-angular-viewer.mjs.map