pptx-react-viewer 1.25.3 → 1.25.5

package/dist/{chunk-DVM75RMN.mjs → chunk-FVQDRA5N.mjs}

@@ -1,4 +1,4 @@
-import { MIN_ELEMENT_SIZE, guideEmuToPx, THEME_COLOR_SCHEME_KEYS, hasShapeProperties, hasTextProperties, createChartElement, getShapeClipPath, getAdjustmentAwareShapeClipPath, getShapeClipPathFromPreset, getCloudPathForRendering, hslToRgb, PRESET_COLOR_MAP, isImageLikeElement, stripXmlOrderSuffix, orderedXmlKey, applyDrawingColorTransforms } from './chunk-DAI4KM5W.mjs';
+import { MIN_ELEMENT_SIZE, guideEmuToPx, THEME_COLOR_SCHEME_KEYS, hasShapeProperties, hasTextProperties, createChartElement, getShapeClipPath, getAdjustmentAwareShapeClipPath, getShapeClipPathFromPreset, getCloudPathForRendering, hslToRgb, PRESET_COLOR_MAP, isImageLikeElement, stripXmlOrderSuffix, orderedXmlKey, createBuiltinVariables, resolveCoordinate, applyDrawingColorTransforms } from './chunk-FOMF7POV.mjs';
 import DOMPurify from 'dompurify';
 
 var defaultThemeColors = {
@@ -556,7 +556,27 @@ function buildReflectedGradientStops(stops) {
   }));
   return [...forward, ...reversed];
 }
-function buildGradientCss(gradient) {
+function normalizeDegrees(deg) {
+  return (deg % 360 + 360) % 360;
+}
+function adjustLinearGradientAngle(angle, gradient, context) {
+  if (!context) {
+    return angle;
+  }
+  let result = angle;
+  const { width, height, rotation } = context;
+  if (gradient.fillGradientScaled !== false && typeof width === "number" && typeof height === "number" && width > 0 && height > 0 && width !== height) {
+    const rad = result * Math.PI / 180;
+    result = normalizeDegrees(
+      Math.atan2(height * Math.sin(rad), width * Math.cos(rad)) * 180 / Math.PI
+    );
+  }
+  if (gradient.fillGradientRotWithShape === false && typeof rotation === "number") {
+    result = normalizeDegrees(result - rotation);
+  }
+  return result;
+}
+function buildGradientCss(gradient, context) {
   if (!gradient || gradient.fillMode !== "gradient") {
     return void 0;
   }
@@ -578,9 +598,10 @@ function buildGradientCss(gradient) {
     return buildCirclePathGradient(stops, fp, ftr);
   }
   const normalizedAngle = typeof gradient.fillGradientAngle === "number" && Number.isFinite(gradient.fillGradientAngle) ? gradient.fillGradientAngle : 90;
+  const effectiveAngle = adjustLinearGradientAngle(normalizedAngle, gradient, context);
   const flip = gradient.fillGradientFlip;
   const linearStops = flip && flip !== "none" ? buildReflectedGradientStops(stops) : stops;
-  return `linear-gradient(${Math.round(normalizedAngle)}deg, ${linearStops.map(toCssGradientStop).join(", ")})`;
+  return `linear-gradient(${Math.round(effectiveAngle)}deg, ${linearStops.map(toCssGradientStop).join(", ")})`;
 }
 var buildCssGradientFromShapeStyle = buildGradientCss;
 function getPatternSvg(preset, fg, bg) {
@@ -4163,6 +4184,20 @@ function splitSeriesByAxis(series, axes) {
   }
   return { primary, secondary };
 }
+function findDataPoint(series, pointIndex) {
+  return series.dataPoints?.find((p) => p.idx === pointIndex);
+}
+function resolveDataPointFill(series, pointIndex, fallbackColor) {
+  const point = findDataPoint(series, pointIndex);
+  return point?.spPr?.fillColor ?? series.color ?? fallbackColor;
+}
+function resolveVaryColorFill(series, pointIndex, paletteColor3) {
+  return findDataPoint(series, pointIndex)?.spPr?.fillColor ?? paletteColor3;
+}
+function resolveDataPointExplosion(series, pointIndex) {
+  const point = findDataPoint(series, pointIndex);
+  return point?.explosion ?? series.explosion ?? 0;
+}
 function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -4535,34 +4570,59 @@ function categoryTotals(series, catCount) {
     (_, ci) => series.reduce((sum, s) => sum + Math.abs(s.values[ci] ?? 0), 0)
   );
 }
+function blendToWhite(color) {
+  const match = /^#?([0-9a-f]{6})$/iu.exec(color.trim());
+  if (!match) {
+    return color;
+  }
+  const value = Number.parseInt(match[1], 16);
+  const mix = (channel) => Math.round(channel + (255 - channel) * 0.5);
+  const r = mix(value >> 16 & 255);
+  const g = mix(value >> 8 & 255);
+  const b = mix(value & 255);
+  return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0").toUpperCase()}`;
+}
+function invertNegativeFill(series, pointIndex, value, baseFill) {
+  if (value >= 0) {
+    return baseFill;
+  }
+  const point = series.dataPoints?.find((p) => p.idx === pointIndex);
+  const invert = point?.invertIfNegative ?? series.invertIfNegative ?? false;
+  return invert ? blendToWhite(baseFill) : baseFill;
+}
 function buildBars(chartData, catCount, layout, primaryRange, secondaryRange, secondaryIdx, grouping, sourceIndices2) {
   const primitives = [];
   const dataLabels = [];
   const series = chartData.series;
   const palette = chartData.colorPalette;
   const showLabels = chartData.style?.hasDataLabels;
+  const varyColorsSingle = chartData.varyColors === true && series.length === 1;
   if (grouping === "clustered") {
     const seriesCount = Math.max(series.length, 1);
     const barGroupWidth2 = layout.plotWidth / Math.max(catCount, 1);
-    const singleBarWidth = barGroupWidth2 * 0.7 / seriesCount;
-    const groupOffset = (barGroupWidth2 - singleBarWidth * seriesCount) / 2;
+    const singleBarWidth = chartData.barGapWidth !== void 0 ? barGroupWidth2 / (seriesCount + Math.max(chartData.barGapWidth, 0) / 100) : barGroupWidth2 * 0.7 / seriesCount;
+    const overlap = chartData.barOverlap ?? 0;
+    const step = singleBarWidth * (1 - overlap / 100);
+    const clusterWidth = singleBarWidth + step * (seriesCount - 1);
+    const groupOffset = (barGroupWidth2 - clusterWidth) / 2;
     for (let displayIndex = 0; displayIndex < catCount; displayIndex++) {
       const sourceIndex = sourceIndices2[displayIndex] ?? displayIndex;
       for (let si = 0; si < series.length; si++) {
         const val2 = series[si].values[sourceIndex] ?? 0;
-        const x = layout.plotLeft + barGroupWidth2 * displayIndex + groupOffset + singleBarWidth * si;
+        const x = layout.plotLeft + barGroupWidth2 * displayIndex + groupOffset + step * si;
         const activeRange = secondaryIdx.has(si) && secondaryRange ? secondaryRange : primaryRange;
         const zeroY = valueToY2(0, activeRange, layout.plotTop, layout.plotBottom);
         const valY = valueToY2(val2, activeRange, layout.plotTop, layout.plotBottom);
         const y = Math.min(zeroY, valY);
         const h = Math.max(Math.abs(zeroY - valY), 1);
+        const baseFill = varyColorsSingle ? resolveVaryColorFill(series[si], sourceIndex, paletteColor2(sourceIndex, palette)) : resolveDataPointFill(series[si], sourceIndex, paletteColor2(si, palette)) ?? seriesColor2(series[si], si, palette);
         primitives.push({
           kind: "rect",
           x,
           y,
           w: singleBarWidth,
           h,
-          fill: seriesColor2(series[si], si, palette),
+          fill: invertNegativeFill(series[si], sourceIndex, val2, baseFill),
           rx: 1,
           part: { role: "dataPoint", seriesIndex: si, pointIndex: sourceIndex }
         });
@@ -4588,20 +4648,16 @@ function buildBars(chartData, catCount, layout, primaryRange, secondaryRange, se
     }));
     const rects = computeStackedBarRects(displaySeries2, catCount, layout, primaryRange, palette);
     for (const r of rects) {
-      primitives.push({
-        kind: "rect",
-        x: r.x,
-        y: r.y,
-        w: r.w,
-        h: r.h,
-        fill: r.fill,
-        rx: 1,
-        part: r.seriesIndex !== void 0 && r.pointIndex !== void 0 ? {
-          role: "dataPoint",
-          seriesIndex: r.seriesIndex,
-          pointIndex: sourceIndices2[r.pointIndex] ?? r.pointIndex
-        } : void 0
-      });
+      let fill = r.fill;
+      let part;
+      if (r.seriesIndex !== void 0 && r.pointIndex !== void 0) {
+        const sourcePointIndex = sourceIndices2[r.pointIndex] ?? r.pointIndex;
+        fill = resolveDataPointFill(series[r.seriesIndex], sourcePointIndex, r.fill) ?? r.fill;
+        const value = series[r.seriesIndex].values[sourcePointIndex] ?? 0;
+        fill = invertNegativeFill(series[r.seriesIndex], sourcePointIndex, value, fill);
+        part = { role: "dataPoint", seriesIndex: r.seriesIndex, pointIndex: sourcePointIndex };
+      }
+      primitives.push({ kind: "rect", x: r.x, y: r.y, w: r.w, h: r.h, fill, rx: 1, part });
     }
     if (showLabels) {
       pushClusteredStackedLabels(series, sourceIndices2, catCount, layout, primaryRange, dataLabels);
@@ -4632,13 +4688,14 @@ function buildBars(chartData, catCount, layout, primaryRange, secondaryRange, se
       const topY = valueToY2(top, primaryRange, layout.plotTop, layout.plotBottom);
       const y = Math.min(baseY, topY);
       const h = Math.max(Math.abs(baseY - topY), 0.5);
+      const pctBaseFill = resolveDataPointFill(series[si], sourceIndex, paletteColor2(si, palette)) ?? seriesColor2(series[si], si, palette);
       primitives.push({
         kind: "rect",
         x,
         y,
         w: barW,
         h,
-        fill: seriesColor2(series[si], si, palette),
+        fill: invertNegativeFill(series[si], sourceIndex, rawVal, pctBaseFill),
         part: { role: "dataPoint", seriesIndex: si, pointIndex: sourceIndex }
       });
       if (showLabels && Math.abs(val2) > 0) {
@@ -4687,6 +4744,139 @@ function pushClusteredStackedLabels(series, sourceIndices2, catCount, layout, ra
     }
   }
 }
+function smoothLinePath(points) {
+  if (points.length === 0) {
+    return "";
+  }
+  if (points.length === 1) {
+    return `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
+  }
+  if (points.length === 2) {
+    return `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)} L${points[1].x.toFixed(2)},${points[1].y.toFixed(2)}`;
+  }
+  let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i - 1] ?? points[i];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[i + 2] ?? p2;
+    const cp1x = p1.x + (p2.x - p0.x) / 6;
+    const cp1y = p1.y + (p2.y - p0.y) / 6;
+    const cp2x = p2.x - (p3.x - p1.x) / 6;
+    const cp2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(2)},${cp2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+  }
+  return d;
+}
+function markerRadius(size, defaultRadius2) {
+  if (size === void 0 || !Number.isFinite(size) || size <= 0) {
+    return defaultRadius2;
+  }
+  return size / 2;
+}
+function polygonPoints(vertices) {
+  return vertices.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+}
+function starVertices(cx, cy, r) {
+  const inner = r * 0.5;
+  const out = [];
+  for (let i = 0; i < 10; i++) {
+    const radius = i % 2 === 0 ? r : inner;
+    const angle = -Math.PI / 2 + Math.PI * i / 5;
+    out.push([cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]);
+  }
+  return out;
+}
+function buildMarkerPrimitive(input) {
+  const { symbol, cx, cy, fill, part } = input;
+  if (symbol === "none") {
+    return null;
+  }
+  const r = markerRadius(input.size, input.defaultRadius);
+  const stroke = fill;
+  switch (symbol) {
+    case "square":
+      return { kind: "rect", x: cx - r, y: cy - r, w: r * 2, h: r * 2, fill, part };
+    case "dash":
+      return { kind: "rect", x: cx - r, y: cy - r * 0.32, w: r * 2, h: r * 0.64, fill, part };
+    case "diamond":
+      return {
+        kind: "polygon",
+        points: polygonPoints([
+          [cx, cy - r],
+          [cx + r, cy],
+          [cx, cy + r],
+          [cx - r, cy]
+        ]),
+        fill,
+        stroke,
+        strokeWidth: 0,
+        part
+      };
+    case "triangle":
+      return {
+        kind: "polygon",
+        points: polygonPoints([
+          [cx, cy - r],
+          [cx + r * 0.9, cy + r * 0.75],
+          [cx - r * 0.9, cy + r * 0.75]
+        ]),
+        fill,
+        stroke,
+        strokeWidth: 0,
+        part
+      };
+    case "star":
+      return {
+        kind: "polygon",
+        points: polygonPoints(starVertices(cx, cy, r)),
+        fill,
+        stroke,
+        strokeWidth: 0,
+        part
+      };
+    case "plus":
+      return {
+        kind: "path",
+        d: `M${(cx - r).toFixed(2)},${cy.toFixed(2)} L${(cx + r).toFixed(2)},${cy.toFixed(2)} M${cx.toFixed(2)},${(cy - r).toFixed(2)} L${cx.toFixed(2)},${(cy + r).toFixed(2)}`,
+        fill: "none",
+        stroke,
+        strokeWidth: Math.max(1, r * 0.4),
+        part
+      };
+    case "x":
+      return {
+        kind: "path",
+        d: `M${(cx - r).toFixed(2)},${(cy - r).toFixed(2)} L${(cx + r).toFixed(2)},${(cy + r).toFixed(2)} M${(cx + r).toFixed(2)},${(cy - r).toFixed(2)} L${(cx - r).toFixed(2)},${(cy + r).toFixed(2)}`,
+        fill: "none",
+        stroke,
+        strokeWidth: Math.max(1, r * 0.4),
+        part
+      };
+    case "dot":
+      return { kind: "circle", cx, cy, r: Math.max(r * 0.6, 1), fill, part };
+    default:
+      return { kind: "circle", cx, cy, r, fill, part };
+  }
+}
+function pushMarker(out, series, cx, cy, fill, defaultRadius2, part, opacity) {
+  const m = buildMarkerPrimitive({
+    symbol: series.marker?.symbol,
+    size: series.marker?.size,
+    cx,
+    cy,
+    fill,
+    defaultRadius: defaultRadius2,
+    part
+  });
+  if (!m) {
+    return;
+  }
+  if (opacity !== void 0) {
+    m.opacity = opacity;
+  }
+  out.push(m);
+}
 function buildLines(chartData, catCount, layout, primaryRange, secondaryRange, secondaryIdx, sourceIndices2, xPositions) {
   const primitives = [];
   const dataLabels = [];
@@ -4705,24 +4895,36 @@ function buildLines(chartData, catCount, layout, primaryRange, secondaryRange, s
       })
     );
     const c = seriesColor2(series, si, chartData.colorPalette);
-    primitives.push({
-      kind: "polyline",
-      points: linePointsToSvgString(pts),
-      stroke: c,
-      strokeWidth: 2.4,
-      fill: "none",
-      part: { role: "series", seriesIndex: si }
-    });
+    const seriesPart = { role: "series", seriesIndex: si };
+    primitives.push(
+      series.smooth ? {
+        kind: "path",
+        d: smoothLinePath(pts),
+        stroke: c,
+        strokeWidth: 2.4,
+        fill: "none",
+        part: seriesPart
+      } : {
+        kind: "polyline",
+        points: linePointsToSvgString(pts),
+        stroke: c,
+        strokeWidth: 2.4,
+        fill: "none",
+        part: seriesPart
+      }
+    );
     pts.forEach((pt, displayIndex) => {
-      const sourceIndex = sourceIndices2[displayIndex] ?? displayIndex;
-      primitives.push({
-        kind: "circle",
-        cx: pt.x,
-        cy: pt.y,
-        r: 2.5,
-        fill: c,
-        part: { role: "dataPoint", seriesIndex: si, pointIndex: sourceIndex }
-      });
+      const idx = sourceIndices2[displayIndex] ?? displayIndex;
+      const part = { role: "dataPoint", seriesIndex: si, pointIndex: idx };
+      pushMarker(
+        primitives,
+        series,
+        pt.x,
+        pt.y,
+        resolveDataPointFill(series, idx, c) ?? c,
+        2.5,
+        part
+      );
     });
     if (showLabels) {
       displayValues.forEach((val2, displayIndex) => {
@@ -4783,18 +4985,17 @@ function buildAreas(chartData, catCount, layout, range, sourceIndices2, xPositio
       part: { role: "series", seriesIndex: si }
     });
     pts.forEach((pt, displayIndex) => {
-      primitives.push({
-        kind: "circle",
-        cx: pt.x,
-        cy: pt.y,
-        r: 2,
-        fill: c,
-        part: {
-          role: "dataPoint",
-          seriesIndex: si,
-          pointIndex: sourceIndices2[displayIndex] ?? displayIndex
-        }
-      });
+      const idx = sourceIndices2[displayIndex] ?? displayIndex;
+      const part = { role: "dataPoint", seriesIndex: si, pointIndex: idx };
+      pushMarker(
+        primitives,
+        series,
+        pt.x,
+        pt.y,
+        resolveDataPointFill(series, idx, c) ?? c,
+        2,
+        part
+      );
     });
     if (showLabels) {
       displayValues.forEach((val2, displayIndex) => {
@@ -4828,15 +5029,17 @@ function buildScatter(chartData, layout, range) {
     const c = seriesColor2(series, si, chartData.colorPalette);
     const dots = computeScatterDots(series.values, maxXIndex, layout, range, xValues);
     dots.forEach((dot, vi) => {
-      primitives.push({
-        kind: "circle",
-        cx: dot.cx,
-        cy: dot.cy,
-        r: 4,
-        fill: c,
-        opacity: 0.85,
-        part: { role: "dataPoint", seriesIndex: si, pointIndex: vi }
-      });
+      const part = { role: "dataPoint", seriesIndex: si, pointIndex: vi };
+      pushMarker(
+        primitives,
+        series,
+        dot.cx,
+        dot.cy,
+        resolveDataPointFill(series, vi, c) ?? c,
+        4,
+        part,
+        0.85
+      );
     });
     if (showLabels) {
       series.values.forEach((val2, vi) => {
@@ -4880,7 +5083,7 @@ function buildBubbles(chartData, layout, range) {
         cx: dot.cx,
         cy: dot.cy,
         r,
-        fill: c,
+        fill: resolveDataPointFill(series, vi, c) ?? c,
         opacity: 0.6,
         part: { role: "dataPoint", seriesIndex: si, pointIndex: vi }
       });
@@ -4905,7 +5108,124 @@ function buildBubbles(chartData, layout, range) {
   }
   return { primitives, dataLabels };
 }
-function categoryX(displayIndex, count, layout, spacing) {
+function categoryX(index, catCount, layout, options) {
+  const explicit = options.xPositions?.[index];
+  if (explicit !== void 0) {
+    return explicit;
+  }
+  if (options.mode === "bar") {
+    const slot = layout.plotWidth / Math.max(catCount, 1);
+    return layout.plotLeft + slot * index + slot / 2;
+  }
+  const maxIdx = Math.max(catCount - 1, 1);
+  return layout.plotLeft + index / maxIdx * layout.plotWidth;
+}
+function dashFor(dashStyle) {
+  if (!dashStyle || dashStyle === "solid") {
+    return void 0;
+  }
+  return dashStyle === "dot" || dashStyle === "sysDot" ? "1 2" : "4 3";
+}
+function computeDropLinePrimitives(chartData, layout, range, catCount, options) {
+  const style = chartData.dropLines;
+  if (!style) {
+    return [];
+  }
+  const baselineY = valueToY2(range.min, range, layout.plotTop, layout.plotBottom);
+  const dashArray2 = dashFor(style.dashStyle);
+  const out = [];
+  for (const series of chartData.series) {
+    series.values.forEach((val2, vi) => {
+      const x = categoryX(vi, catCount, layout, options);
+      out.push({
+        kind: "line",
+        x1: x,
+        y1: valueToY2(val2, range, layout.plotTop, layout.plotBottom),
+        x2: x,
+        y2: baselineY,
+        stroke: style.color ?? "#94a3b8",
+        strokeWidth: style.width ?? 0.8,
+        dashArray: dashArray2
+      });
+    });
+  }
+  return out;
+}
+function computeHiLowLinePrimitives(chartData, layout, range, catCount, options) {
+  const style = chartData.hiLowLines;
+  if (!style || chartData.series.length < 2) {
+    return [];
+  }
+  const dashArray2 = dashFor(style.dashStyle);
+  const out = [];
+  for (let vi = 0; vi < catCount; vi++) {
+    let high = Number.NEGATIVE_INFINITY;
+    let low = Number.POSITIVE_INFINITY;
+    for (const series of chartData.series) {
+      const v = series.values[vi];
+      if (v !== void 0) {
+        high = Math.max(high, v);
+        low = Math.min(low, v);
+      }
+    }
+    if (!Number.isFinite(high) || !Number.isFinite(low)) {
+      continue;
+    }
+    const x = categoryX(vi, catCount, layout, options);
+    out.push({
+      kind: "line",
+      x1: x,
+      y1: valueToY2(high, range, layout.plotTop, layout.plotBottom),
+      x2: x,
+      y2: valueToY2(low, range, layout.plotTop, layout.plotBottom),
+      stroke: style.color ?? "#334155",
+      strokeWidth: style.width ?? 1,
+      dashArray: dashArray2
+    });
+  }
+  return out;
+}
+function computeUpDownBarPrimitives(chartData, layout, range, catCount, options) {
+  const bars = chartData.upDownBars;
+  if (!bars || chartData.series.length < 2) {
+    return [];
+  }
+  const first = chartData.series[0];
+  const last = chartData.series[chartData.series.length - 1];
+  const slot = layout.plotWidth / Math.max(catCount, 1);
+  const gapWidth = bars.gapWidth ?? 150;
+  const barW = Math.max(slot / (1 + Math.max(gapWidth, 0) / 100), 1);
+  const upFill = bars.upBars?.fillColor ?? "#e2e8f0";
+  const downFill = bars.downBars?.fillColor ?? "#334155";
+  const out = [];
+  for (let vi = 0; vi < catCount; vi++) {
+    const firstVal = first.values[vi];
+    const lastVal = last.values[vi];
+    if (firstVal === void 0 || lastVal === void 0) {
+      continue;
+    }
+    const firstY = valueToY2(firstVal, range, layout.plotTop, layout.plotBottom);
+    const lastY = valueToY2(lastVal, range, layout.plotTop, layout.plotBottom);
+    const x = categoryX(vi, catCount, layout, options) - barW / 2;
+    out.push({
+      kind: "rect",
+      x,
+      y: Math.min(firstY, lastY),
+      w: barW,
+      h: Math.max(Math.abs(firstY - lastY), 1),
+      fill: lastVal >= firstVal ? upFill : downFill
+    });
+  }
+  return out;
+}
+function computeHelperLinePrimitives(chartData, layout, range, catCount, options) {
+  return [
+    ...computeUpDownBarPrimitives(chartData, layout, range, catCount, options),
+    ...computeDropLinePrimitives(chartData, layout, range, catCount, options),
+    ...computeHiLowLinePrimitives(chartData, layout, range, catCount, options)
+  ];
+}
+function categoryX2(displayIndex, count, layout, spacing) {
   if (spacing === "bar") {
     return layout.plotLeft + layout.plotWidth / Math.max(count, 1) * (displayIndex + 0.5);
   }
@@ -4936,8 +5256,8 @@ function buildMultiLevelCategoryLabels(categoryLabels, categoryLevels, sourceInd
       if (!group.text || group.start % skip !== 0) {
         return [];
       }
-      const startX = categoryX(group.start, sourceIndices2.length, layout, spacing);
-      const endX = categoryX(group.end, sourceIndices2.length, layout, spacing);
+      const startX = categoryX2(group.start, sourceIndices2.length, layout, spacing);
+      const endX = categoryX2(group.end, sourceIndices2.length, layout, spacing);
       return [
         {
           kind: "text",
@@ -4992,13 +5312,13 @@ function buildTickMarks(axis, sourceCount, layout, spacing, axisY) {
   }
   const majorSkip = Math.max(1, axis.tickMarkSkip ?? 1);
   for (let displayIndex = 0; displayIndex < sourceCount; displayIndex += majorSkip) {
-    const x = categoryX(displayIndex, sourceCount, layout, spacing);
+    const x = categoryX2(displayIndex, sourceCount, layout, spacing);
     const major = tickLine(x, y, axis.majorTickMark, topAxis, 4, axis);
     if (major) {
       result.push(major);
     }
     if (axis.minorTickMark !== void 0 && displayIndex + majorSkip < sourceCount) {
-      const nextX = categoryX(displayIndex + majorSkip, sourceCount, layout, spacing);
+      const nextX = categoryX2(displayIndex + majorSkip, sourceCount, layout, spacing);
       const minor = tickLine((x + nextX) / 2, y, axis.minorTickMark, topAxis, 2.5, axis);
       if (minor) {
         result.push(minor);
@@ -5276,7 +5596,7 @@ function buildCartesianHorizontalAxis(chartData, categoryLabels, layout, kind, p
     catAxisStyle,
     sourceIndices: sourceIndices2,
     xPositions: datePlan?.xPositions ?? categoryPlan?.sourceIndices.map(
-      (_sourceIndex, displayIndex) => categoryX(displayIndex, categoryPlan.sourceIndices.length, layout, catAxisStyle)
+      (_sourceIndex, displayIndex) => categoryX2(displayIndex, categoryPlan.sourceIndices.length, layout, catAxisStyle)
     ),
     labels: [
       ...datePlan?.labels ?? categoryPlan?.labels ?? buildCategoryLabels(categoryLabels, layout, catAxisStyle),
@@ -5291,7 +5611,7 @@ function buildCartesianHorizontalAxis(chartData, categoryLabels, layout, kind, p
 }
 var DEFAULT_COLOR3 = "#334155";
 var CAP_HALF_WIDTH = 4;
-function categoryX2(value, count, layout, mode) {
+function categoryX3(value, count, layout, mode) {
   if (mode === "bar") {
     const slot = layout.plotWidth / Math.max(count, 1);
     return layout.plotLeft + slot * value + slot / 2;
@@ -5398,7 +5718,7 @@ function computeErrorBarPrimitives(chartData, catCount, layout, range, mode = "l
         const categoryMapper = (value) => positionedCategoryX(
           value,
           options.xPositions,
-          (index) => categoryX2(index, indexes.length || catCount, layout, seriesMode)
+          (index) => categoryX3(index, indexes.length || catCount, layout, seriesMode)
         );
         const toPixel = xValues.numeric ? (value) => numericX(value, xRange, layout) : categoryMapper;
         const x = toPixel(baseXValue);
@@ -5972,7 +6292,15 @@ function buildCartesianViewModel(element, chartData, categoryLabels, kind) {
   } else {
     plot = buildBubbles(chartData, layout, primaryRange);
   }
-  const primitives = [...plot.primitives, ...horizontalAxis.tickMarks];
+  const helperLines = kind === "line" || kind === "area" ? computeHelperLinePrimitives(chartData, layout, primaryRange, catCount, {
+    mode: "line",
+    xPositions: horizontalAxis.xPositions
+  }) : [];
+  const primitives = [
+    ...helperLines,
+    ...plot.primitives,
+    ...horizontalAxis.tickMarks
+  ];
   const overlays = [
     ...computeTrendlinePrimitives(
       displayChartData,
@@ -6098,6 +6426,10 @@ function buildComboViewModel(element, chartData, categoryLabels) {
   );
   const primitives = [];
   const dataLabels = [];
+  const helperOpts = { mode: "line", xPositions: horizontalAxis.xPositions };
+  primitives.push(
+    ...computeHelperLinePrimitives(chartData, layout, primaryRange, catCount, helperOpts)
+  );
   const barSeries = chartData.series.slice(0, 1);
   if (barSeries[0]) {
     const barRange = rangeForSeries(0, primaryRange, secondaryRange, secondaryIndexes);
@@ -8505,16 +8837,30 @@ function computePieLayout(elementWidth, elementHeight, chartData, isDoughnut) {
   const cx = size / 2;
   const cy = titleOffset + (size - titleOffset - legendOffset) / 2;
   const outerR = Math.max((size - titleOffset - legendOffset) * 0.42, 0);
-  const innerR = isDoughnut ? outerR * 0.55 : 0;
+  const holeRatio = isDoughnut && chartData.doughnutHoleSize !== void 0 ? Math.min(Math.max(chartData.doughnutHoleSize, 10), 90) / 100 : 0.55;
+  const innerR = isDoughnut ? outerR * holeRatio : 0;
   return { cx, cy, outerR, innerR, size };
 }
-function computePieSlices(values, cx, cy, outerR, innerR) {
+function computePieSlices(values, cx, cy, outerR, innerR, options) {
   const total = values.reduce((s, v) => s + Math.abs(v), 0) || 1;
-  let cumAngle = -Math.PI / 2;
-  return values.map((val2) => {
+  let cumAngle = options?.startAngle ?? -Math.PI / 2;
+  return values.map((val2, i) => {
     const sliceAngle = Math.abs(val2) / total * Math.PI * 2;
     const startAngle = cumAngle;
     cumAngle += sliceAngle;
+    const explosion = options?.explosions?.[i] ?? 0;
+    if (explosion > 0) {
+      const mid = (startAngle + cumAngle) / 2;
+      const offset = outerR * (explosion / 100);
+      return computePieSlicePath(
+        cx + Math.cos(mid) * offset,
+        cy + Math.sin(mid) * offset,
+        outerR,
+        innerR,
+        startAngle,
+        cumAngle
+      );
+    }
     return computePieSlicePath(cx, cy, outerR, innerR, startAngle, cumAngle);
   });
 }
@@ -8707,13 +9053,18 @@ function buildPieViewModel(element, chartData, categoryLabels, isDoughnut) {
   );
   const svgWidth = Math.max(size, 100);
   const svgHeight = Math.max(size, 60);
-  const values = chartData.series[0]?.values ?? [];
-  const slices = computePieSlices(values, cx, cy, outerR, innerR);
+  const pieSeries = chartData.series[0];
+  const values = pieSeries?.values ?? [];
+  const startAngle = -Math.PI / 2 + (chartData.firstSliceAngle ?? 0) * Math.PI / 180;
+  const explosions = pieSeries ? values.map((_v, i) => resolveDataPointExplosion(pieSeries, i)) : void 0;
+  const slices = computePieSlices(values, cx, cy, outerR, innerR, { startAngle, explosions });
   const primitives = slices.map(
     ({ d }, i) => ({
       kind: "path",
       d,
-      fill: chartData.series[0]?.color ?? paletteColor2(i, chartData.colorPalette),
+      // Pie/doughnut vary colours per slice (c:varyColors defaults on), so each
+      // slice takes its palette colour, with a per-point c:dPt fill overriding.
+      fill: pieSeries ? resolveVaryColorFill(pieSeries, i, paletteColor2(i, chartData.colorPalette)) : paletteColor2(i, chartData.colorPalette),
       stroke: "#ffffff",
       strokeWidth: 1.5,
       part: { role: "dataPoint", seriesIndex: 0, pointIndex: i }
@@ -9039,6 +9390,21 @@ var PRESET_ID_TO_EFFECT = {
     26: "pulse"
   }
 };
+var FLY_SUBTYPE_TO_EDGE = {
+  1: "top",
+  2: "right",
+  4: "bottom",
+  8: "left",
+  // Corners -> nearest (horizontal) edge.
+  3: "right",
+  // top-right (1|2)
+  6: "right",
+  // bottom-right (4|2)
+  9: "left",
+  // top-left (8|1)
+  12: "left"
+  // bottom-left (8|4)
+};
 var KEYFRAME_DEFINITIONS = {
   // ---- Entrance effects ----
   appear: `@keyframes pptx-appear {
@@ -9410,16 +9776,31 @@ function resolveEffect(anim) {
     return void 0;
   }
   if (cls === "entr") {
-    return PRESET_ID_TO_EFFECT.entr[id];
+    return applyFlyDirection(PRESET_ID_TO_EFFECT.entr[id], anim.presetSubtype);
   }
   if (cls === "exit") {
-    return PRESET_ID_TO_EFFECT.exit[id];
+    return applyFlyDirection(PRESET_ID_TO_EFFECT.exit[id], anim.presetSubtype);
   }
   if (cls === "emph") {
     return PRESET_ID_TO_EFFECT.emph[id];
   }
   return void 0;
 }
+function applyFlyDirection(effect, subtype) {
+  if (effect !== "flyInBottom" && effect !== "flyOutBottom") {
+    return effect;
+  }
+  if (subtype === void 0) {
+    return effect;
+  }
+  const edge = FLY_SUBTYPE_TO_EDGE[subtype];
+  if (!edge) {
+    return effect;
+  }
+  const prefix = effect === "flyInBottom" ? "flyIn" : "flyOut";
+  const suffix = `${edge.charAt(0).toUpperCase()}${edge.slice(1)}`;
+  return `${prefix}${suffix}`;
+}
 function parseMotionPathPoints(motionPath) {
   const cmds = motionPath.replace(/\s+/gu, " ").trim().split(/(?=[MLCZ])/iu).filter(Boolean);
   const points = [];
@@ -9821,6 +10202,29 @@ function getAnimationInitialStyle(preset, nativeAnimation) {
   }
   return {};
 }
+function cssEasingForAnimation(anim) {
+  const hasAccel = anim.accel !== void 0 && anim.accel > 0;
+  const hasDecel = anim.decel !== void 0 && anim.decel > 0;
+  if (hasAccel && hasDecel) {
+    return "ease-in-out";
+  }
+  if (hasAccel) {
+    return "ease-in";
+  }
+  if (hasDecel) {
+    return "ease-out";
+  }
+  return "ease";
+}
+function fallbackEffectForClass(presetClass) {
+  if (presetClass === "entr") {
+    return "fadeIn";
+  }
+  if (presetClass === "exit") {
+    return "fadeOut";
+  }
+  return void 0;
+}
 function buildTimeline(nativeAnimations) {
   if (nativeAnimations.length === 0) {
     return {
@@ -9855,10 +10259,13 @@ function buildTimeline(nativeAnimations) {
   for (const anim of regularAnims) {
     const expandedSteps = expandIterateAnimation(anim);
     for (const singleAnim of expandedSteps) {
-      const effect = resolveEffect(singleAnim);
+      let effect = resolveEffect(singleAnim);
       const dynamic = effect ? void 0 : buildDynamicKeyframe(singleAnim, dynamicUid++);
       if (!effect && !dynamic) {
-        continue;
+        effect = fallbackEffectForClass(singleAnim.presetClass);
+        if (!effect) {
+          continue;
+        }
       }
       const keyframe = effect ? cssKeyframeName(effect) : dynamic.keyframeName;
       if (effect) {
@@ -9904,7 +10311,8 @@ function buildTimeline(nativeAnimations) {
         delayMs = animDelay + triggerDelay;
       }
       const iterStr = iterCount === Infinity ? "infinite" : String(iterCount);
-      const cssAnimation = `${keyframe} ${duration}ms ease ${delayMs}ms ${iterStr} ${direction} ${fill}`;
+      const easing = cssEasingForAnimation(singleAnim);
+      const cssAnimation = `${keyframe} ${duration}ms ${easing} ${delayMs}ms ${iterStr} ${direction} ${fill}`;
       currentGroup.push({
         elementId,
         cssAnimation,
@@ -9987,10 +10395,13 @@ function buildSequenceGroups(animsByKey, entranceIds, neededKeyframes, dynamicBl
     const seqGroups = [];
     let seqGroup = [];
     for (const anim of anims) {
-      const effect = resolveEffect(anim);
+      let effect = resolveEffect(anim);
       const dynamic = effect ? void 0 : buildDynamicKeyframe(anim, dynamicUid++);
       if (!effect && !dynamic) {
-        continue;
+        effect = fallbackEffectForClass(anim.presetClass);
+        if (!effect) {
+          continue;
+        }
       }
       const keyframe = effect ? cssKeyframeName(effect) : dynamic.keyframeName;
       if (effect) {
@@ -10027,7 +10438,8 @@ function buildSequenceGroups(animsByKey, entranceIds, neededKeyframes, dynamicBl
         delayMs = animDelay + triggerDelay;
       }
       const iterStr = iterCount === Infinity ? "infinite" : String(iterCount);
-      const cssAnimation = `${keyframe} ${duration}ms ease ${delayMs}ms ${iterStr} ${direction} ${fill}`;
+      const easing = cssEasingForAnimation(anim);
+      const cssAnimation = `${keyframe} ${duration}ms ${easing} ${delayMs}ms ${iterStr} ${direction} ${fill}`;
       seqGroup.push({
         elementId,
         cssAnimation,
@@ -14103,6 +14515,23 @@ function getConnectionSites(width, height) {
     // left center
   ];
 }
+function getShapeConnectionSites(shape) {
+  const geo = shape;
+  const cxn = geo.customGeometryConnectionSites;
+  if (!cxn || cxn.length === 0) {
+    return getConnectionSites(shape.width, shape.height);
+  }
+  const pathW = geo.pathWidth && geo.pathWidth > 0 ? geo.pathWidth : shape.width;
+  const pathH = geo.pathHeight && geo.pathHeight > 0 ? geo.pathHeight : shape.height;
+  const vars = createBuiltinVariables({ w: pathW, h: pathH });
+  const scaleX = pathW > 0 ? shape.width / pathW : 1;
+  const scaleY = pathH > 0 ? shape.height / pathH : 1;
+  return cxn.map((site, index) => ({
+    x: resolveCoordinate(site.posX, vars) * scaleX,
+    y: resolveCoordinate(site.posY, vars) * scaleY,
+    index
+  }));
+}
 function rerouteConnectorsForMovedElements(elements, movedElementIds) {
   if (movedElementIds.size === 0) {
     return [];
@@ -14146,7 +14575,7 @@ function computeConnectorGeometry(connector, startConn, endConn, elementMap) {
     if (!startShape) {
       return null;
     }
-    const sites = getConnectionSites(startShape.width, startShape.height);
+    const sites = getShapeConnectionSites(startShape);
     const siteIndex = startConn.connectionSiteIndex ?? 0;
     const site = sites[siteIndex] ?? sites[0];
     sx = startShape.x + site.x;
@@ -14162,7 +14591,7 @@ function computeConnectorGeometry(connector, startConn, endConn, elementMap) {
     if (!endShape) {
       return null;
     }
-    const sites = getConnectionSites(endShape.width, endShape.height);
+    const sites = getShapeConnectionSites(endShape);
     const siteIndex = endConn.connectionSiteIndex ?? 0;
     const site = sites[siteIndex] ?? sites[0];
     ex = endShape.x + site.x;
@@ -14171,12 +14600,16 @@ function computeConnectorGeometry(connector, startConn, endConn, elementMap) {
     ex = connector.x + connector.width;
     ey = connector.y + connector.height;
   }
+  const flipHorizontal = ex < sx;
+  const flipVertical = ey < sy;
   return {
     id: connector.id,
     x: Math.min(sx, ex),
     y: Math.min(sy, ey),
     width: Math.abs(ex - sx) || 1,
-    height: Math.abs(ey - sy) || 1
+    height: Math.abs(ey - sy) || 1,
+    flipHorizontal,
+    flipVertical
   };
 }
 function applyReroutedConnectors(elements, rerouted) {
@@ -14192,13 +14625,20 @@ function applyReroutedConnectors(elements, rerouted) {
     if (!update) {
       return el;
     }
-    return {
+    const next = {
       ...el,
       x: update.x,
       y: update.y,
       width: update.width,
       height: update.height
     };
+    if (update.flipHorizontal !== void 0) {
+      next.flipHorizontal = update.flipHorizontal;
+    }
+    if (update.flipVertical !== void 0) {
+      next.flipVertical = update.flipVertical;
+    }
+    return next;
   });
 }
 function getCompoundLineOffsets(compoundLine, strokeWidth) {
@@ -15732,7 +16172,308 @@ var INSTANT = {
 };
 var DEFAULT_TRANSITION_DURATION_MS = 1e3;
 var EASE = "ease-in-out";
-var SLIDE_TRANSITION_KEYFRAMES = `
+var P14_TRANSITION_KEYFRAMES = `
+/* \u2500\u2500 Conveyor (translate X with staggered timing) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-conveyor-in-from-right {
+	from { transform: translateX(100%) rotateY(-30deg); }
+	60%  { transform: translateX(20%) rotateY(-10deg); }
+	to   { transform: translateX(0) rotateY(0deg); }
+}
+@keyframes pptx-tr-conveyor-out-to-left {
+	from { transform: translateX(0) rotateY(0deg); }
+	40%  { transform: translateX(-20%) rotateY(10deg); }
+	to   { transform: translateX(-100%) rotateY(30deg); }
+}
+@keyframes pptx-tr-conveyor-in-from-left {
+	from { transform: translateX(-100%) rotateY(30deg); }
+	60%  { transform: translateX(-20%) rotateY(10deg); }
+	to   { transform: translateX(0) rotateY(0deg); }
+}
+@keyframes pptx-tr-conveyor-out-to-right {
+	from { transform: translateX(0) rotateY(0deg); }
+	40%  { transform: translateX(20%) rotateY(-10deg); }
+	to   { transform: translateX(100%) rotateY(-30deg); }
+}
+
+/* \u2500\u2500 Doors (clip-path from center split) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-doors-horz {
+	from { clip-path: inset(0 50%); }
+	to   { clip-path: inset(0 0); }
+}
+@keyframes pptx-tr-doors-vert {
+	from { clip-path: inset(50% 0); }
+	to   { clip-path: inset(0 0); }
+}
+
+/* \u2500\u2500 Ferris (rotate elements around center) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-ferris-in-from-right {
+	from { transform: translateX(80%) rotate(45deg) scale(0.6); opacity: 0; }
+	to   { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
+}
+@keyframes pptx-tr-ferris-out-to-left {
+	from { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
+	to   { transform: translateX(-80%) rotate(-45deg) scale(0.6); opacity: 0; }
+}
+@keyframes pptx-tr-ferris-in-from-left {
+	from { transform: translateX(-80%) rotate(-45deg) scale(0.6); opacity: 0; }
+	to   { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
+}
+@keyframes pptx-tr-ferris-out-to-right {
+	from { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
+	to   { transform: translateX(80%) rotate(45deg) scale(0.6); opacity: 0; }
+}
+
+/* \u2500\u2500 Flash (bright flash opacity burst) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-flash-white {
+	0%   { opacity: 1; }
+	30%  { opacity: 0; }
+	50%  { opacity: 0; }
+	100% { opacity: 1; }
+}
+@keyframes pptx-tr-flash-in {
+	0%   { opacity: 0; }
+	50%  { opacity: 0; }
+	70%  { opacity: 1; }
+	100% { opacity: 1; }
+}
+
+/* \u2500\u2500 Flythrough (scale + translate Z-axis feel) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-flythrough-in {
+	from { transform: scale(4) translateZ(200px); opacity: 0; filter: blur(8px); }
+	to   { transform: scale(1) translateZ(0); opacity: 1; filter: blur(0); }
+}
+@keyframes pptx-tr-flythrough-out {
+	from { transform: scale(1) translateZ(0); opacity: 1; filter: blur(0); }
+	to   { transform: scale(0.1) translateZ(-200px); opacity: 0; filter: blur(8px); }
+}
+@keyframes pptx-tr-flythrough-reverse-in {
+	from { transform: scale(0.1) translateZ(-200px); opacity: 0; filter: blur(8px); }
+	to   { transform: scale(1) translateZ(0); opacity: 1; filter: blur(0); }
+}
+@keyframes pptx-tr-flythrough-reverse-out {
+	from { transform: scale(1) translateZ(0); opacity: 1; filter: blur(0); }
+	to   { transform: scale(4) translateZ(200px); opacity: 0; filter: blur(8px); }
+}
+
+/* \u2500\u2500 Gallery (translate with perspective) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-gallery-in-from-right {
+	from { transform: perspective(800px) translateX(100%) rotateY(-45deg); opacity: 0.5; }
+	to   { transform: perspective(800px) translateX(0) rotateY(0deg); opacity: 1; }
+}
+@keyframes pptx-tr-gallery-out-to-left {
+	from { transform: perspective(800px) translateX(0) rotateY(0deg); opacity: 1; }
+	to   { transform: perspective(800px) translateX(-100%) rotateY(45deg); opacity: 0.5; }
+}
+@keyframes pptx-tr-gallery-in-from-left {
+	from { transform: perspective(800px) translateX(-100%) rotateY(45deg); opacity: 0.5; }
+	to   { transform: perspective(800px) translateX(0) rotateY(0deg); opacity: 1; }
+}
+@keyframes pptx-tr-gallery-out-to-right {
+	from { transform: perspective(800px) translateX(0) rotateY(0deg); opacity: 1; }
+	to   { transform: perspective(800px) translateX(100%) rotateY(-45deg); opacity: 0.5; }
+}
+
+/* \u2500\u2500 Glitter (particle dissolve effect) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-glitter-in {
+	from { opacity: 0; filter: brightness(1.5) contrast(1.3) blur(2px); }
+	60%  { opacity: 0.7; filter: brightness(1.2) contrast(1.1) blur(1px); }
+	to   { opacity: 1; filter: brightness(1) contrast(1) blur(0); }
+}
+
+/* \u2500\u2500 Honeycomb (hexagonal reveal) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-honeycomb-in {
+	from {
+		clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
+		opacity: 0;
+	}
+	to {
+		clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+		opacity: 1;
+	}
+}
+@keyframes pptx-tr-honeycomb-out {
+	from { opacity: 1; }
+	to   { opacity: 0; filter: blur(2px); }
+}
+
+/* \u2500\u2500 Pan (large-scale translate) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-pan-from-right {
+	from { transform: translateX(100%); }
+	to   { transform: translateX(0); }
+}
+@keyframes pptx-tr-pan-to-left {
+	from { transform: translateX(0); }
+	to   { transform: translateX(-100%); }
+}
+@keyframes pptx-tr-pan-from-left {
+	from { transform: translateX(-100%); }
+	to   { transform: translateX(0); }
+}
+@keyframes pptx-tr-pan-to-right {
+	from { transform: translateX(0); }
+	to   { transform: translateX(100%); }
+}
+@keyframes pptx-tr-pan-from-bottom {
+	from { transform: translateY(100%); }
+	to   { transform: translateY(0); }
+}
+@keyframes pptx-tr-pan-to-top {
+	from { transform: translateY(0); }
+	to   { transform: translateY(-100%); }
+}
+@keyframes pptx-tr-pan-from-top {
+	from { transform: translateY(-100%); }
+	to   { transform: translateY(0); }
+}
+@keyframes pptx-tr-pan-to-bottom {
+	from { transform: translateY(0); }
+	to   { transform: translateY(100%); }
+}
+`;
+var P14_TRANSITION_KEYFRAMES_2 = `
+/* \u2500\u2500 Prism (3D rotation via perspective transform) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-prism-in-from-right {
+	from { transform: perspective(800px) rotateY(-90deg) translateX(50%); opacity: 0; }
+	to   { transform: perspective(800px) rotateY(0deg) translateX(0); opacity: 1; }
+}
+@keyframes pptx-tr-prism-out-to-left {
+	from { transform: perspective(800px) rotateY(0deg) translateX(0); opacity: 1; }
+	to   { transform: perspective(800px) rotateY(90deg) translateX(-50%); opacity: 0; }
+}
+@keyframes pptx-tr-prism-in-from-left {
+	from { transform: perspective(800px) rotateY(90deg) translateX(-50%); opacity: 0; }
+	to   { transform: perspective(800px) rotateY(0deg) translateX(0); opacity: 1; }
+}
+@keyframes pptx-tr-prism-out-to-right {
+	from { transform: perspective(800px) rotateY(0deg) translateX(0); opacity: 1; }
+	to   { transform: perspective(800px) rotateY(-90deg) translateX(50%); opacity: 0; }
+}
+@keyframes pptx-tr-prism-in-from-bottom {
+	from { transform: perspective(800px) rotateX(90deg) translateY(50%); opacity: 0; }
+	to   { transform: perspective(800px) rotateX(0deg) translateY(0); opacity: 1; }
+}
+@keyframes pptx-tr-prism-out-to-top {
+	from { transform: perspective(800px) rotateX(0deg) translateY(0); opacity: 1; }
+	to   { transform: perspective(800px) rotateX(-90deg) translateY(-50%); opacity: 0; }
+}
+@keyframes pptx-tr-prism-in-from-top {
+	from { transform: perspective(800px) rotateX(-90deg) translateY(-50%); opacity: 0; }
+	to   { transform: perspective(800px) rotateX(0deg) translateY(0); opacity: 1; }
+}
+@keyframes pptx-tr-prism-out-to-bottom {
+	from { transform: perspective(800px) rotateX(0deg) translateY(0); opacity: 1; }
+	to   { transform: perspective(800px) rotateX(90deg) translateY(50%); opacity: 0; }
+}
+
+/* \u2500\u2500 Reveal (slide away reveal) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-reveal-out-to-right {
+	from { transform: translateX(0); }
+	to   { transform: translateX(100%); }
+}
+@keyframes pptx-tr-reveal-out-to-left {
+	from { transform: translateX(0); }
+	to   { transform: translateX(-100%); }
+}
+@keyframes pptx-tr-reveal-in {
+	from { opacity: 0.5; }
+	to   { opacity: 1; }
+}
+
+/* \u2500\u2500 Ripple (expanding ring clip-path) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-ripple-in {
+	from { clip-path: circle(0% at 50% 50%); opacity: 0.5; }
+	30%  { clip-path: circle(20% at 50% 50%); opacity: 0.7; }
+	60%  { clip-path: circle(50% at 50% 50%); opacity: 0.9; }
+	to   { clip-path: circle(75% at 50% 50%); opacity: 1; }
+}
+
+/* \u2500\u2500 Shred (fragmented clip-path pieces) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-shred-strips-in {
+	from { clip-path: inset(0 100% 0 0); opacity: 0; }
+	30%  { clip-path: inset(0 60% 0 0); opacity: 0.5; }
+	to   { clip-path: inset(0); opacity: 1; }
+}
+@keyframes pptx-tr-shred-rectangles-in {
+	from { clip-path: inset(50%); opacity: 0; }
+	40%  { clip-path: inset(20%); opacity: 0.6; }
+	to   { clip-path: inset(0); opacity: 1; }
+}
+@keyframes pptx-tr-shred-out {
+	from { opacity: 1; }
+	to   { opacity: 0; filter: blur(2px); }
+}
+
+/* \u2500\u2500 Switch (flip/rotate swap) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-switch-in-from-right {
+	from { transform: perspective(800px) rotateY(-180deg); opacity: 0; }
+	to   { transform: perspective(800px) rotateY(0deg); opacity: 1; }
+}
+@keyframes pptx-tr-switch-out-to-left {
+	from { transform: perspective(800px) rotateY(0deg); opacity: 1; }
+	to   { transform: perspective(800px) rotateY(180deg); opacity: 0; }
+}
+@keyframes pptx-tr-switch-in-from-left {
+	from { transform: perspective(800px) rotateY(180deg); opacity: 0; }
+	to   { transform: perspective(800px) rotateY(0deg); opacity: 1; }
+}
+@keyframes pptx-tr-switch-out-to-right {
+	from { transform: perspective(800px) rotateY(0deg); opacity: 1; }
+	to   { transform: perspective(800px) rotateY(-180deg); opacity: 0; }
+}
+
+/* \u2500\u2500 Vortex (rotate + scale spiral) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-vortex-in {
+	from { transform: rotate(720deg) scale(0); opacity: 0; }
+	to   { transform: rotate(0deg) scale(1); opacity: 1; }
+}
+@keyframes pptx-tr-vortex-out {
+	from { transform: rotate(0deg) scale(1); opacity: 1; }
+	to   { transform: rotate(-720deg) scale(0); opacity: 0; }
+}
+
+/* \u2500\u2500 Warp (skew distortion) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-warp-in {
+	from { transform: scale(0.3) skewX(30deg) skewY(15deg); opacity: 0; }
+	50%  { transform: scale(0.8) skewX(-5deg) skewY(-3deg); opacity: 0.7; }
+	to   { transform: scale(1) skewX(0deg) skewY(0deg); opacity: 1; }
+}
+@keyframes pptx-tr-warp-out {
+	from { transform: scale(1) skewX(0deg) skewY(0deg); opacity: 1; }
+	50%  { transform: scale(0.8) skewX(5deg) skewY(3deg); opacity: 0.7; }
+	to   { transform: scale(0.3) skewX(-30deg) skewY(-15deg); opacity: 0; }
+}
+@keyframes pptx-tr-warp-reverse-in {
+	from { transform: scale(3) skewX(-20deg) skewY(-10deg); opacity: 0; filter: blur(4px); }
+	to   { transform: scale(1) skewX(0deg) skewY(0deg); opacity: 1; filter: blur(0); }
+}
+@keyframes pptx-tr-warp-reverse-out {
+	from { transform: scale(1) skewX(0deg) skewY(0deg); opacity: 1; filter: blur(0); }
+	to   { transform: scale(3) skewX(20deg) skewY(10deg); opacity: 0; filter: blur(4px); }
+}
+
+/* \u2500\u2500 WheelReverse (reverse wheel rotation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-wheel-reverse-in {
+	from { clip-path: circle(0% at 50% 50%); transform: rotate(180deg); }
+	to   { clip-path: circle(75% at 50% 50%); transform: rotate(0deg); }
+}
+
+/* \u2500\u2500 Window (scale from center with border) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes pptx-tr-window-horz {
+	from { clip-path: inset(0 50%); }
+	to   { clip-path: inset(0 0); }
+}
+@keyframes pptx-tr-window-vert {
+	from { clip-path: inset(50% 0); }
+	to   { clip-path: inset(0 0); }
+}
+@keyframes pptx-tr-window-out {
+	from { opacity: 1; transform: scale(1); }
+	to   { opacity: 0; transform: scale(0.9); }
+}
+`;
+var P14_TRANSITION_KEYFRAMES_ALL = `${P14_TRANSITION_KEYFRAMES}
+${P14_TRANSITION_KEYFRAMES_2}`;
+var CORE_SLIDE_TRANSITION_KEYFRAMES = `
 /* \u2500\u2500 Fade \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 @keyframes pptx-tr-fade-in {
 	from { opacity: 0; }
@@ -15995,8 +16736,243 @@ var SLIDE_TRANSITION_KEYFRAMES = `
 	to   { clip-path: circle(75% at 50% 50%); transform: rotate(0deg); }
 }
 `;
+var SLIDE_TRANSITION_KEYFRAMES = `${CORE_SLIDE_TRANSITION_KEYFRAMES}
+${P14_TRANSITION_KEYFRAMES_ALL}`;
+function resolveLR(direction) {
+  if (direction === "l" || direction === "r") {
+    return direction;
+  }
+  return "l";
+}
+function resolveP14Orientation(direction, orient) {
+  if (orient === "horz" || orient === "vert") {
+    return orient;
+  }
+  if (direction === "horz" || direction === "vert") {
+    return direction;
+  }
+  return "horz";
+}
+function resolveCardinal(direction) {
+  switch (direction) {
+    case "l":
+      return "left";
+    case "r":
+      return "right";
+    case "u":
+      return "up";
+    case "d":
+      return "down";
+    default:
+      return "left";
+  }
+}
+function directionalPair(direction, prefix, dur, ease) {
+  const dir = resolveCardinal(direction);
+  const opposites = {
+    left: ["to-left", "from-right"],
+    right: ["to-right", "from-left"],
+    up: ["to-top", "from-bottom"],
+    down: ["to-bottom", "from-top"]
+  };
+  const [outSuffix, inSuffix] = opposites[dir];
+  return {
+    outgoing: `${prefix}-${outSuffix} ${dur} ${ease} forwards`,
+    incoming: `${prefix}-${inSuffix} ${dur} ${ease} forwards`,
+    outgoingOnTop: false
+  };
+}
+function cardinalOutInPair(direction, prefix, dur, ease) {
+  const dir = resolveCardinal(direction);
+  const map = {
+    left: ["out-to-left", "in-from-right"],
+    right: ["out-to-right", "in-from-left"],
+    up: ["out-to-top", "in-from-bottom"],
+    down: ["out-to-bottom", "in-from-top"]
+  };
+  const [outSuffix, inSuffix] = map[dir];
+  return {
+    outgoing: `${prefix}-${outSuffix} ${dur} ${ease} forwards`,
+    incoming: `${prefix}-${inSuffix} ${dur} ${ease} forwards`,
+    outgoingOnTop: false
+  };
+}
+function getP14TransitionAnimations(type, durationMs, direction, orient) {
+  const dur = `${durationMs}ms`;
+  const ease = EASE;
+  switch (type) {
+    case "conveyor": {
+      const lr = resolveLR(direction);
+      if (lr === "l") {
+        return {
+          outgoing: `pptx-tr-conveyor-out-to-left ${dur} ${ease} forwards`,
+          incoming: `pptx-tr-conveyor-in-from-right ${dur} ${ease} forwards`,
+          outgoingOnTop: false
+        };
+      }
+      return {
+        outgoing: `pptx-tr-conveyor-out-to-right ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-conveyor-in-from-left ${dur} ${ease} forwards`,
+        outgoingOnTop: false
+      };
+    }
+    case "doors": {
+      const o = resolveP14Orientation(direction, orient);
+      return {
+        outgoing: "none",
+        incoming: o === "vert" ? `pptx-tr-doors-vert ${dur} ${ease} forwards` : `pptx-tr-doors-horz ${dur} ${ease} forwards`,
+        outgoingOnTop: false
+      };
+    }
+    case "ferris": {
+      const lr = resolveLR(direction);
+      if (lr === "l") {
+        return {
+          outgoing: `pptx-tr-ferris-out-to-left ${dur} ${ease} forwards`,
+          incoming: `pptx-tr-ferris-in-from-right ${dur} ${ease} forwards`,
+          outgoingOnTop: false
+        };
+      }
+      return {
+        outgoing: `pptx-tr-ferris-out-to-right ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-ferris-in-from-left ${dur} ${ease} forwards`,
+        outgoingOnTop: false
+      };
+    }
+    case "flash":
+      return {
+        outgoing: `pptx-tr-flash-white ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-flash-in ${dur} ${ease} forwards`,
+        outgoingOnTop: true
+      };
+    case "flythrough": {
+      const isOut = direction === "out";
+      if (isOut) {
+        return {
+          outgoing: `pptx-tr-flythrough-reverse-out ${dur} ${ease} forwards`,
+          incoming: `pptx-tr-flythrough-reverse-in ${dur} ${ease} forwards`,
+          outgoingOnTop: true
+        };
+      }
+      return {
+        outgoing: `pptx-tr-flythrough-out ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-flythrough-in ${dur} ${ease} forwards`,
+        outgoingOnTop: true
+      };
+    }
+    case "gallery": {
+      const lr = resolveLR(direction);
+      if (lr === "l") {
+        return {
+          outgoing: `pptx-tr-gallery-out-to-left ${dur} ${ease} forwards`,
+          incoming: `pptx-tr-gallery-in-from-right ${dur} ${ease} forwards`,
+          outgoingOnTop: false
+        };
+      }
+      return {
+        outgoing: `pptx-tr-gallery-out-to-right ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-gallery-in-from-left ${dur} ${ease} forwards`,
+        outgoingOnTop: false
+      };
+    }
+    case "glitter":
+      return {
+        outgoing: `pptx-tr-fade-out ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-glitter-in ${dur} ${ease} forwards`,
+        outgoingOnTop: true
+      };
+    case "honeycomb":
+      return {
+        outgoing: `pptx-tr-honeycomb-out ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-honeycomb-in ${dur} ${ease} forwards`,
+        outgoingOnTop: true
+      };
+    case "pan":
+      return directionalPair(direction, "pptx-tr-pan", dur, ease);
+    case "prism":
+      return cardinalOutInPair(direction, "pptx-tr-prism", dur, ease);
+    case "reveal": {
+      const lr = resolveLR(direction);
+      return {
+        outgoing: lr === "l" ? `pptx-tr-reveal-out-to-left ${dur} ${ease} forwards` : `pptx-tr-reveal-out-to-right ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-reveal-in ${dur} ${ease} forwards`,
+        outgoingOnTop: true
+      };
+    }
+    case "ripple":
+      return {
+        outgoing: "none",
+        incoming: `pptx-tr-ripple-in ${dur} ${ease} forwards`,
+        outgoingOnTop: false
+      };
+    case "shred": {
+      const pattern = direction === "rectangles" ? "rectangles" : "strips";
+      return {
+        outgoing: `pptx-tr-shred-out ${dur} ${ease} forwards`,
+        incoming: pattern === "rectangles" ? `pptx-tr-shred-rectangles-in ${dur} ${ease} forwards` : `pptx-tr-shred-strips-in ${dur} ${ease} forwards`,
+        outgoingOnTop: true
+      };
+    }
+    case "switch": {
+      const lr = resolveLR(direction);
+      if (lr === "l") {
+        return {
+          outgoing: `pptx-tr-switch-out-to-left ${dur} ${ease} forwards`,
+          incoming: `pptx-tr-switch-in-from-right ${dur} ${ease} forwards`,
+          outgoingOnTop: false
+        };
+      }
+      return {
+        outgoing: `pptx-tr-switch-out-to-right ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-switch-in-from-left ${dur} ${ease} forwards`,
+        outgoingOnTop: false
+      };
+    }
+    case "vortex":
+      return {
+        outgoing: `pptx-tr-vortex-out ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-vortex-in ${dur} ${ease} forwards`,
+        outgoingOnTop: true
+      };
+    case "warp": {
+      const isOut = direction === "out";
+      if (isOut) {
+        return {
+          outgoing: `pptx-tr-warp-reverse-out ${dur} ${ease} forwards`,
+          incoming: `pptx-tr-warp-reverse-in ${dur} ${ease} forwards`,
+          outgoingOnTop: true
+        };
+      }
+      return {
+        outgoing: `pptx-tr-warp-out ${dur} ${ease} forwards`,
+        incoming: `pptx-tr-warp-in ${dur} ${ease} forwards`,
+        outgoingOnTop: true
+      };
+    }
+    case "wheelReverse":
+      return {
+        outgoing: "none",
+        incoming: `pptx-tr-wheel-reverse-in ${dur} ${ease} forwards`,
+        outgoingOnTop: false
+      };
+    case "window": {
+      const o = resolveP14Orientation(direction, orient);
+      return {
+        outgoing: `pptx-tr-window-out ${dur} ${ease} forwards`,
+        incoming: o === "vert" ? `pptx-tr-window-vert ${dur} ${ease} forwards` : `pptx-tr-window-horz ${dur} ${ease} forwards`,
+        outgoingOnTop: true
+      };
+    }
+    default:
+      return void 0;
+  }
+}
 function getSlideTransitionAnimations(type, durationMs, direction, orient, spokes) {
   const dur = `${durationMs}ms`;
+  const p14 = getP14TransitionAnimations(type, durationMs, direction, orient);
+  if (p14) {
+    return p14;
+  }
   switch (type) {
     case "none":
     case "cut":
@@ -16198,31 +17174,13 @@ function getSlideTransitionAnimations(type, durationMs, direction, orient, spoke
       const randomType = RANDOM_ELIGIBLE_TYPES[Math.floor(Math.random() * RANDOM_ELIGIBLE_TYPES.length)];
       return getSlideTransitionAnimations(randomType, durationMs, direction, orient);
     }
-    // ── Exotic / 3-D transitions — approximated with the closest well-tested
-    // 2-D CSS behaviour (delegates to an existing case rather than emitting a
-    // plain fade). A faithful per-effect keyframe set is available via
-    // `getP14TransitionAnimations`.
-    case "pan":
-    case "gallery":
-    case "conveyor":
-      return getSlideTransitionAnimations("push", durationMs, direction, orient);
-    case "reveal":
-      return getSlideTransitionAnimations("wipe", durationMs, direction, orient);
-    case "doors":
-      return getSlideTransitionAnimations("split", durationMs, direction, orient);
-    case "switch":
-    case "flythrough":
-    case "ferris":
-    case "prism":
-      return getSlideTransitionAnimations("zoom", durationMs, direction, orient);
-    case "ripple":
-    case "honeycomb":
-    case "glitter":
-    case "shred":
-      return getSlideTransitionAnimations("dissolve", durationMs, direction, orient);
-    case "flash":
-      return getSlideTransitionAnimations("fade", durationMs, direction, orient);
-    // Fallback (unknown / not-yet-mapped type) — symmetrical cross-fade.
+    // The exotic / 3-D transition family (conveyor/doors/ferris/flash/
+    // flythrough/gallery/glitter/honeycomb/pan/prism/reveal/ripple/shred/
+    // switch/vortex/warp/wheelReverse/window) is handled faithfully above via
+    // `getP14TransitionAnimations` and never reaches this switch.
+    // Fallback (unknown / not-yet-mapped type, e.g. the p15 cinematic set:
+    // cube/flip/rotate/orbit/fracture/peelOff/pageCurl*/airplane/origami)
+    // — symmetrical cross-fade.
     default:
       return {
         outgoing: `pptx-tr-fade-out ${dur} ${EASE} forwards`,
@@ -16947,30 +17905,46 @@ function computeTargetLayout(nodes, box, palette, style, elementId) {
     family: "target"
   };
 }
-function computeSmartArtLayout(nodes, box, palette, style, elementId, resolvedLayoutType, layout) {
+function interpolateSmartArtPalette(palette, count, method, hueDirection) {
+  if (count <= 0 || palette.length === 0) {
+    return [];
+  }
+  if (palette.length < 2 || count <= palette.length) {
+    return Array.from({ length: count }, (_, i) => palette[i % palette.length]);
+  }
+  const segments = palette.length - 1;
+  return Array.from({ length: count }, (_, i) => {
+    const pos = i / (count - 1) * segments;
+    const lower = Math.min(Math.floor(pos), segments - 1);
+    const frac = pos - lower;
+    return interpolateColor(palette[lower], palette[lower + 1], frac, "hsl", hueDirection);
+  });
+}
+function computeSmartArtLayout(nodes, box, palette, style, elementId, resolvedLayoutType, layout, interpolation) {
   const flat = flattenNodes(nodes);
   const family = resolveLayoutFamily(nodes, resolvedLayoutType, layout);
+  const pal = interpolation?.method === "span" ? interpolateSmartArtPalette(palette, flat.length, "span", interpolation.hueDirection) : palette;
   switch (family) {
     case "list":
-      return computeListLayout(flat, box, palette, style, elementId);
+      return computeListLayout(flat, box, pal, style, elementId);
     case "process":
-      return computeProcessLayout(flat, box, palette, style, elementId);
+      return computeProcessLayout(flat, box, pal, style, elementId);
     case "cycle":
-      return computeCycleLayout(flat, box, palette, style, elementId);
+      return computeCycleLayout(flat, box, pal, style, elementId);
     case "hierarchy":
-      return computeHierarchyLayout(nodes, box, palette, style, elementId);
+      return computeHierarchyLayout(nodes, box, pal, style, elementId);
     case "matrix":
-      return computeMatrixLayout(flat, box, palette, style, elementId);
+      return computeMatrixLayout(flat, box, pal, style, elementId);
     case "radial":
-      return computeRadialLayout(flat, box, palette, style, elementId);
+      return computeRadialLayout(flat, box, pal, style, elementId);
     case "pyramid":
-      return computePyramidLayout(flat, box, palette, style, elementId);
+      return computePyramidLayout(flat, box, pal, style, elementId);
     case "venn":
-      return computeVennLayout(flat, box, palette, style, elementId);
+      return computeVennLayout(flat, box, pal, style, elementId);
     case "funnel":
-      return computeFunnelLayout(flat, box, palette, style, elementId);
+      return computeFunnelLayout(flat, box, pal, style, elementId);
     case "target":
-      return computeTargetLayout(flat, box, palette, style, elementId);
+      return computeTargetLayout(flat, box, pal, style, elementId);
   }
 }
 function parseViewBox(viewBox) {