pptx-react-viewer 2.16.9 → 2.17.0

package/dist/{chunk-VHME5BE6.mjs → chunk-MQHC5TXI.mjs}

@@ -1,5 +1,5 @@
-import { translationsEn } from './chunk-5IUEPQTK.mjs';
-import { SHAPE_PRESET_DEFS, computeValueRangeForChart, VIEWER_SHORTCUT_REFERENCE, getAnimationInitialStyle, cloneHistorySnapshot, hasShapeProperties, getImageFitStyle, isImageLikeElement, runMediaCommand, findMediaElementByElementId, mediaPlaybackAttributes, buildTextBlockStyle, hasTextProperties, toCssWritingMode, toCssTextOrientation, toCssVerticalDirection, getKinsokuLineBreakStyles, buildTextBody3DSceneStyle, resolveParagraphRtl, resolveParagraphAlign, resolveCssTextAlign, resolveParagraphSpacing, resolveParagraphStrutFontSize, colorWithOpacity, normalizeHexColor, build3DExtrusionData, isIdentityRectClip, getResolvedShapeClipPath, isStrokeOnlyPresetElement, normalizeStrokeDashType, buildCssGradientFromShapeStyle, buildShadowCssFromShapeStyle, buildInnerShadowCssFromShapeStyle, suppressesCssBorder, buildMultiLayerShadowCss, buildGlowBoxShadow, getCompoundLineBoxShadow, getSoftEdgeFilterId, getEffectDagFilter, buildPatternFillCss, buildReflectionCss, getCssBorderDashStyle, getCompoundLineBorderWidth, getSvgStrokeDasharray, buildSvgGradientDef, isCalloutShape, getCalloutLeaderLineGeometry, buildCalloutLeaderLineSvgPath, getCalloutViewBoxBounds, svgLineCap, getCompoundLineOffsets, getCompoundLineWidths, computeSelectionRect, DEFAULT_FONT_FAMILY, cellStyleToCss, rectToCells, isCellInRect, buildChartViewModel, buildNotesPdfBytes, buildSlidesPdfBytes, buildPreviewAnimation, buildMotionPathPreview, getRoundRectRadiusPx2, mediaFallbackVisual, registerPersistentAudio, substituteFieldText, resolveUnderlineDecorationStyle, resolveAutoFitFontScale, getSubstituteFontFamily, parsePanoseString, hasDistinctScriptFonts, pieceLetterSpacing, resolveMetricTrackingPx, buildTextReflectionCss, getTextAlphaOpacity, buildTextRunFilterChain, buildTextShadowCss, TEXT_BUILD_ID_SEP, buildTextBuildSpec, textBuildSpanStyle, sanitizeGradientStops, getGradientTileFlipCss, getGradientTileRectCss, apply3dEffects, clampUnitInterval, customGeometryPathsToSvgSubpaths, svgGradientFillRef, computeColumnBoundaries, getTableCellBandStyle, parseDrawingColor, parseDrawingColorOpacity, getCellDiagonalBorders, getChartStylePalette, chartAreaFill, computeLayout, valueToY, formatAxisValue, computeLayoutOptions, splitSeriesByAxis, computeValueRange, getSecondaryValueAxis, seriesColor, paletteColor, resolveRegionCode, normalizeValue, sequentialColorScale, mediaFallbackIcon, mediaFallbackLabelKey, MEDIA_CHROME_ATTRIBUTE, convertOmmlToMathMl, sanitizeMathMl, buildTextFillCss, resolvePictureBullet, computeResizedColumnWidths, computeResizedRowHeight, DEFAULT_ROW_HEIGHT, ooxmlGradientAngleToCssDegrees, generateLogTicks, formatAxisValueWithUnits, getDisplayUnitLabel, splitRunForMetrics, hexToRgbChannels, chartPartToAttrs, segmentByScript, resolveFontForScript } from './chunk-YWKUIUQX.mjs';
+import { translationsEn } from './chunk-S64T7C4V.mjs';
+import { SHAPE_PRESET_DEFS, computeValueRangeForChart, VIEWER_SHORTCUT_REFERENCE, getAnimationInitialStyle, cloneHistorySnapshot, hasShapeProperties, getImageFitStyle, isImageLikeElement, getImageTilingStyle, runMediaCommand, findMediaElementByElementId, mediaPlaybackAttributes, buildTextBlockStyle, hasTextProperties, toCssWritingMode, toCssTextOrientation, toCssVerticalDirection, getKinsokuLineBreakStyles, buildTextBody3DSceneStyle, buildParagraphs, colorWithOpacity, normalizeHexColor, build3DExtrusionData, getComputedFillStyle, getComputedEffectStyle, getComputedStrokeStyle, isStrokeOnlyPresetElement, resolveShapeGeometry, normalizeStrokeDashType, getSvgStrokeDasharray, buildSvgGradientDef, isCalloutShape, getCalloutLeaderLineGeometry, buildCalloutLeaderLineSvgPath, getCalloutViewBoxBounds, svgLineCap, getCompoundLineOffsets, getCompoundLineWidths, computeSelectionRect, DEFAULT_FONT_FAMILY, cellStyleToCss, rectToCells, isCellInRect, tableContainerCss, buildChartViewModel, buildNotesPdfBytes, buildSlidesPdfBytes, buildPreviewAnimation, buildMotionPathPreview, getRoundRectRadiusPx2, getResolvedShapeClipPath, mediaFallbackVisual, registerPersistentAudio, resolveAutoFitFontScale, getSubstituteFontFamily, parsePanoseString, hasDistinctScriptFonts, pieceLetterSpacing, resolveMetricTrackingPx, TEXT_BUILD_ID_SEP, buildTextBuildSpec, textBuildSpanStyle, apply3dEffects, clampUnitInterval, customGeometryPathsToSvgSubpaths, svgGradientFillRef, computeColumnBoundaries, getTableCellBandStyle, parseDrawingColor, parseDrawingColorOpacity, getCellDiagonalBorders, cellRunStyle, getChartStylePalette, chartAreaFill, computeLayout, valueToY, formatAxisValue, computeLayoutOptions, splitSeriesByAxis, computeValueRange, getSecondaryValueAxis, seriesColor, paletteColor, resolveRegionCode, normalizeValue, sequentialColorScale, mediaFallbackIcon, mediaFallbackLabelKey, MEDIA_CHROME_ATTRIBUTE, convertOmmlToMathMl, sanitizeMathMl, computeResizedColumnWidths, computeResizedRowHeight, DEFAULT_ROW_HEIGHT, ooxmlGradientAngleToCssDegrees, generateLogTicks, formatAxisValueWithUnits, getDisplayUnitLabel, splitRunForMetrics, hexToRgbChannels, chartPartToAttrs, segmentByScript, resolveFontForScript } from './chunk-K2QU73KB.mjs';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import React6, { useState, useEffect, useMemo, Suspense, useRef, useCallback, useLayoutEffect } from 'react';
@@ -34,9 +34,6 @@ var DEFAULT_TEXT_FONT_SIZE = 24;
 var HYPERLINK_COLOR = "#0563C1";
 var DEFAULT_TABLE_ROWS = 3;
 var DEFAULT_TABLE_COLUMNS = 3;
-var SHAPE_ADJUSTMENT_MIN = 0;
-var SHAPE_ADJUSTMENT_MAX = 5e4;
-var DEFAULT_ROUND_RECT_ADJUSTMENT = 16667;
 var ZOOM_TO_SELECTION_PADDING = 96;
 var GRID_SIZE = 8;
 var SLIDE_NAV_THUMBNAIL_WIDTH = 156;
@@ -321,86 +318,8 @@ function getCropShapeClipPath(element) {
   }
   return CROP_SHAPE_CLIP_PATHS[shape];
 }
-function isImageTiled(element) {
-  if (!isImageLikeElement(element)) {
-    return false;
-  }
-  return typeof element.tileScaleX === "number" || typeof element.tileScaleY === "number";
-}
-function tileAlignmentToCssPosition(alignment) {
-  switch (alignment) {
-    case "tl":
-      return "top left";
-    case "t":
-      return "top center";
-    case "tr":
-      return "top right";
-    case "l":
-      return "center left";
-    case "ctr":
-      return "center center";
-    case "r":
-      return "center right";
-    case "bl":
-      return "bottom left";
-    case "b":
-      return "bottom center";
-    case "br":
-      return "bottom right";
-    default:
-      return void 0;
-  }
-}
-function buildMirrorTiledBackground(src, flip, scaleX, scaleY) {
-  if (!src.startsWith("data:")) {
-    return void 0;
-  }
-  const flipX = flip === "x" || flip === "xy";
-  const flipY = flip === "y" || flip === "xy";
-  const cols = flipX ? 2 : 1;
-  const rows = flipY ? 2 : 1;
-  const images = [];
-  for (let cy = 0; cy < rows; cy++) {
-    for (let cx = 0; cx < cols; cx++) {
-      const mirrorX = flipX && cx % 2 === 1;
-      const mirrorY = flipY && cy % 2 === 1;
-      const sx = mirrorX ? -1 : 1;
-      const sy = mirrorY ? -1 : 1;
-      const tx = cx + (mirrorX ? 1 : 0);
-      const ty = cy + (mirrorY ? 1 : 0);
-      images.push(
-        `<image href="${src}" x="0" y="0" width="1" height="1" preserveAspectRatio="none" transform="translate(${tx},${ty}) scale(${sx},${sy})"/>`
-      );
-    }
-  }
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${cols} ${rows}" width="${cols}" height="${rows}">${images.join("")}</svg>`;
-  return {
-    backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(svg)}")`,
-    backgroundSize: `${scaleX * cols}% ${scaleY * rows}%`
-  };
-}
-function getImageTilingStyle(element) {
-  if (!isImageLikeElement(element) || !isImageTiled(element)) {
-    return void 0;
-  }
-  const scaleX = typeof element.tileScaleX === "number" ? element.tileScaleX * 100 : 100;
-  const scaleY = typeof element.tileScaleY === "number" ? element.tileScaleY * 100 : 100;
-  const offsetX = typeof element.tileOffsetX === "number" ? element.tileOffsetX : 0;
-  const offsetY = typeof element.tileOffsetY === "number" ? element.tileOffsetY : 0;
-  const alignmentPosition = tileAlignmentToCssPosition(element.tileAlignment);
-  const hasExplicitOffset = offsetX !== 0 || offsetY !== 0;
-  const bgPosition = hasExplicitOffset ? `${offsetX}px ${offsetY}px` : alignmentPosition || `${offsetX}px ${offsetY}px`;
-  const src = element.svgData || element.imageData;
-  const flip = element.tileFlip;
-  const mirror = src && flip && flip !== "none" ? buildMirrorTiledBackground(src, flip, scaleX, scaleY) : void 0;
-  return {
-    backgroundImage: mirror ? mirror.backgroundImage : src ? `url(${src})` : void 0,
-    backgroundRepeat: "repeat",
-    backgroundSize: mirror ? mirror.backgroundSize : `${scaleX}% ${scaleY}%`,
-    backgroundPosition: bgPosition,
-    width: "100%",
-    height: "100%"
-  };
+function getImageTilingStyle2(element) {
+  return getImageTilingStyle(element);
 }
 
 // src/viewer/utils/geometry-image.ts
@@ -1133,9 +1052,6 @@ function getTextLayoutStyle(element) {
 }
 
 // src/viewer/utils/text-effects.tsx
-function buildTextFillCss2(style) {
-  return buildTextFillCss(style);
-}
 function buildTextBody3DSceneStyle2(textStyle) {
   return buildTextBody3DSceneStyle(textStyle);
 }
@@ -1318,7 +1234,7 @@ function buildAnimStyle(state) {
   }
   return Object.keys(style).length > 0 ? style : void 0;
 }
-function wrapWithTextBuildAnimation(elementId, paraIndex, renderedSegments, paraSegments, subElementAnimStates, renderPiece) {
+function wrapWithTextBuildAnimation(elementId, paraIndex, renderedSegments, paraRuns, subElementAnimStates, renderPiece) {
   if (!subElementAnimStates || subElementAnimStates.size === 0) {
     return renderedSegments;
   }
@@ -1331,14 +1247,14 @@ function wrapWithTextBuildAnimation(elementId, paraIndex, renderedSegments, para
   const spec = buildTextBuildSpec(
     elementId,
     paraIndex,
-    paraSegments.map((entry) => ({ text: entry.segment.text, style: entry })),
+    paraRuns.map((run) => ({ text: run.text, style: run })),
     subElementAnimStates
   );
   if (!spec?.spans) {
     return renderedSegments;
   }
   return spec.spans.map((span, index) => {
-    const content = span.style && renderPiece ? renderPiece(span.style, span.text) : span.text;
+    const content = span.style && renderPiece ? renderPiece(span.style, span.text, String(index)) : span.text;
     if (!span.animId) {
       return /* @__PURE__ */ jsx(React6.Fragment, { children: content }, `ws-${index}`);
     }
@@ -1640,81 +1556,26 @@ function renderEquationSegment(elementId, segmentIndex, equationXml, equationNum
   }
   return /* @__PURE__ */ jsx("span", { children: equationContent }, `${elementId}-seg-${segmentIndex}`);
 }
-function renderPictureBullet(elementId, segmentIndex, bulletInfo, baseFontSize) {
-  const picture = resolvePictureBullet(bulletInfo, baseFontSize) ?? {
-    sizePx: baseFontSize,
-    fallbackMarker: "\u2022",
-    accessibleLabel: "Bullet"
-  };
-  if (!picture.src) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        style: {
-          fontSize: picture.sizePx,
-          display: "inline-block",
-          verticalAlign: "middle",
-          marginInlineEnd: 4,
-          color: bulletInfo.color || void 0,
-          fontFamily: bulletInfo.fontFamily || void 0
-        },
-        "aria-label": picture.accessibleLabel,
-        children: `${picture.fallbackMarker} `
-      },
-      `${elementId}-seg-${segmentIndex}-bullet-fallback`
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: picture.src,
-      alt: picture.accessibleLabel,
-      style: {
-        width: picture.sizePx,
-        height: picture.sizePx,
-        display: "inline-block",
-        verticalAlign: "middle",
-        marginInlineEnd: 4,
-        objectFit: "contain"
-      }
-    },
-    `${elementId}-seg-${segmentIndex}-bullet-img`
-  );
-}
-function renderSingleSegment(element, segment, segmentIndex, fallbackColor, findHighlights, bulletInfo, onHyperlinkClick, fieldContext, paragraphRtl, requireCtrlClick, bulletHangPx) {
-  if (segment.equationXml) {
-    return renderEquationSegment(
-      element.id,
-      segmentIndex,
-      segment.equationXml,
-      segment.equationNumber
-    );
+var BASELINE_FONT_SCALE = 0.65;
+function renderParagraphRun(run, segment, ctx, keySuffix = "") {
+  const { element, fallbackColor, findHighlights, onHyperlinkClick } = ctx;
+  const segmentIndex = run.segmentIndex ?? 0;
+  const key = `${element.id}-seg-${segmentIndex}${keySuffix}`;
+  if (run.equation) {
+    return renderEquationSegment(element.id, segmentIndex, run.equation.xml, run.equation.number);
   }
-  const segmentStyle = segment.style || {};
-  const rawText = bulletInfo && typeof bulletHangPx === "number" ? (segment.text || "").trimEnd() : segment.text || "";
-  const textValue = substituteFieldText(rawText, segment.fieldType, fieldContext);
+  const segmentStyle = segment?.style ?? {};
+  const textValue = run.text;
   const lines = textValue.split("\n");
-  const textDecorationTokens = [];
-  if (segmentStyle.underline || segmentStyle.hyperlink) {
-    textDecorationTokens.push("underline");
-  }
-  if (segmentStyle.strikethrough) {
-    textDecorationTokens.push("line-through");
-  }
-  const isDoubleStrike = segmentStyle.strikethrough && segmentStyle.strikeType === "dblStrike";
-  const resolvedSegmentColor = segmentStyle.hyperlink ? normalizeHexColor(segmentStyle.color || element.textStyle?.color, HYPERLINK_COLOR) : normalizeHexColor(segmentStyle.color || element.textStyle?.color, fallbackColor);
-  const underlineDecoration = resolveUnderlineDecorationStyle(
-    Boolean(isDoubleStrike),
-    segmentStyle.underlineStyle
+  const resolvedSegmentColor = normalizeHexColor(
+    segmentStyle.color || element.textStyle?.color,
+    run.hyperlink ? HYPERLINK_COLOR : fallbackColor
   );
   const rawBaseline = typeof segmentStyle.baseline === "number" ? segmentStyle.baseline : 0;
   const baselineFraction = rawBaseline === 0 ? 0 : Math.abs(rawBaseline) >= 1e3 ? rawBaseline / 1e5 : rawBaseline / 100;
-  const baselineFontScale = baselineFraction !== 0 ? 0.65 : 1;
-  const authoredLetterSpacing = typeof segmentStyle.characterSpacing === "number" && segmentStyle.characterSpacing !== 0 ? segmentStyle.characterSpacing / 100 * (96 / 72) : 0;
-  const textFillStyles = buildTextFillCss2(segmentStyle);
+  const baselineFontScale = baselineFraction !== 0 ? BASELINE_FONT_SCALE : 1;
   const rawFontSize = segmentStyle.fontSize || element.textStyle?.fontSize || DEFAULT_TEXT_FONT_SIZE;
-  const autoFitScale = resolveAutoFitFontScale(element.textStyle);
-  const baseFontSize = rawFontSize * autoFitScale;
+  const baseFontSize = rawFontSize * resolveAutoFitFontScale(element.textStyle);
   const baselineShift = baselineFraction !== 0 ? `${baselineFraction * baseFontSize}px` : void 0;
   const baseFontSizePt = baseFontSize * (72 / 96);
   const fontKerning = typeof segmentStyle.kerning === "number" ? segmentStyle.kerning === 0 ? "none" : baseFontSizePt >= segmentStyle.kerning / 100 ? "normal" : "none" : void 0;
@@ -1740,6 +1601,7 @@ function renderSingleSegment(element, segment, segmentIndex, fallbackColor, find
     )
   };
   const needsScriptFonts = hasDistinctScriptFonts(scriptFonts);
+  const authoredLetterSpacing = typeof segmentStyle.characterSpacing === "number" && segmentStyle.characterSpacing !== 0 ? segmentStyle.characterSpacing / 100 * (96 / 72) : 0;
   const metricFont = {
     fontFamily: baseFontFamily,
     fontSizePx: baseFontSize * baselineFontScale,
@@ -1747,73 +1609,21 @@ function renderSingleSegment(element, segment, segmentIndex, fallbackColor, find
     italic: Boolean(segmentStyle.italic)
   };
   const metricContext = { font: metricFont, authoredPx: authoredLetterSpacing };
-  const letterSpacing = pieceLetterSpacing(
+  const spanStyle = { ...run.style };
+  spanStyle.color = resolvedSegmentColor;
+  spanStyle.fontSize = baseFontSize * baselineFontScale;
+  spanStyle.fontFamily = baseFontFamily;
+  spanStyle.verticalAlign = baselineShift;
+  spanStyle.fontKerning = fontKerning;
+  spanStyle.letterSpacing = pieceLetterSpacing(
     authoredLetterSpacing,
     resolveMetricTrackingPx(textValue, metricFont)
   );
-  const spanStyle = {
-    color: resolvedSegmentColor,
-    fontSize: baseFontSize * baselineFontScale,
-    fontWeight: segmentStyle.bold ? 700 : 400,
-    fontStyle: segmentStyle.italic ? "italic" : "normal",
-    textDecorationLine: textDecorationTokens.length > 0 ? textDecorationTokens.join(" ") : "none",
-    textDecorationStyle: underlineDecoration?.textDecorationStyle,
-    textDecorationThickness: underlineDecoration?.textDecorationThickness,
-    textUnderlineOffset: underlineDecoration?.textUnderlineOffset,
-    fontFamily: baseFontFamily,
-    verticalAlign: baselineShift,
-    // Text capitalization (a:rPr/@cap): all -> force uppercase glyphs;
-    // small -> render lowercase as small caps.
-    textTransform: segmentStyle.textCaps === "all" ? "uppercase" : void 0,
-    fontVariantCaps: segmentStyle.textCaps === "small" ? "small-caps" : void 0,
-    letterSpacing,
-    fontKerning,
-    backgroundColor: textFillStyles ? void 0 : segmentStyle.highlightColor ? normalizeHexColor(segmentStyle.highlightColor, "transparent") : void 0,
-    ...textFillStyles,
-    textDecorationColor: segmentStyle.underlineColor ? normalizeHexColor(segmentStyle.underlineColor, void 0) : void 0,
-    WebkitTextStroke: segmentStyle.textOutlineWidth && segmentStyle.textOutlineColor ? `${segmentStyle.textOutlineWidth}px ${normalizeHexColor(segmentStyle.textOutlineColor, "#000000")}` : segmentStyle.textOutlineWidth ? `${segmentStyle.textOutlineWidth}px currentColor` : void 0,
-    paintOrder: segmentStyle.textOutlineWidth ? "stroke fill" : void 0,
-    textShadow: buildTextShadowCss(segmentStyle),
-    filter: buildTextRunFilterChain(segmentStyle),
-    opacity: getTextAlphaOpacity(segmentStyle),
-    WebkitBoxReflect: buildTextReflectionCss(segmentStyle)
-  };
   const runRtl = segmentStyle.rtl;
-  if (runRtl !== void 0 && runRtl !== paragraphRtl) {
+  if (runRtl !== void 0) {
     spanStyle.direction = runRtl ? "rtl" : "ltr";
-    spanStyle.unicodeBidi = "bidi-override";
-  } else if (runRtl !== void 0 && runRtl === paragraphRtl) {
-    spanStyle.direction = runRtl ? "rtl" : "ltr";
-    spanStyle.unicodeBidi = "embed";
+    spanStyle.unicodeBidi = runRtl !== ctx.paragraphRtl ? "bidi-override" : "embed";
   }
-  if (bulletInfo) {
-    if (bulletInfo.fontFamily) {
-      spanStyle.fontFamily = bulletInfo.fontFamily;
-    }
-    if (typeof bulletInfo.sizePts === "number") {
-      spanStyle.fontSize = bulletInfo.sizePts * baselineFontScale;
-    } else if (typeof bulletInfo.sizePercent === "number") {
-      spanStyle.fontSize = baseFontSize * (bulletInfo.sizePercent / 100) * baselineFontScale;
-    }
-    if (bulletInfo.color) {
-      spanStyle.color = normalizeHexColor(bulletInfo.color, resolvedSegmentColor);
-    }
-    if (typeof bulletHangPx === "number" && bulletHangPx > 0) {
-      spanStyle.display = "inline-block";
-      spanStyle.minWidth = bulletHangPx;
-      spanStyle.textIndent = 0;
-    }
-  }
-  if (bulletInfo?.imageDataUrl || bulletInfo?.imageRelId) {
-    return renderPictureBullet(element.id, segmentIndex, bulletInfo, baseFontSize);
-  }
-  let hyperlinkUrl = segmentStyle.hyperlink || segment.hyperlink;
-  if (hyperlinkUrl && typeof segmentStyle.hyperlinkTargetSlideIndex === "number" && hyperlinkUrl.toLowerCase().startsWith("ppaction://")) {
-    const separator = hyperlinkUrl.includes("?") ? "&" : "?";
-    hyperlinkUrl = `${hyperlinkUrl}${separator}slideIndex=${segmentStyle.hyperlinkTargetSlideIndex}`;
-  }
-  const rubyText = segment.rubyText;
-  const hasRuby = typeof rubyText === "string" && rubyText.length > 0;
   const baseContent = renderSegmentContent(
     element.id,
     segmentIndex,
@@ -1833,232 +1643,211 @@ function renderSingleSegment(element, segment, segmentIndex, fallbackColor, find
     ),
     metricContext
   );
-  let innerContent;
-  if (hasRuby) {
-    const rubyFs = segment.rubyFontSize ?? baseFontSize * 0.5;
-    const rubyStyle = {
-      fontSize: rubyFs,
-      fontFamily: segment.rubyStyle?.fontFamily ?? baseFontFamily,
-      textAlign: segment.rubyAlignment === "l" ? "left" : segment.rubyAlignment === "r" ? "right" : segment.rubyAlignment === "dist" || segment.rubyAlignment === "distCat" || segment.rubyAlignment === "distLetter" ? "justify" : "center"
-    };
-    if (segment.rubyStyle?.color) {
-      rubyStyle.color = normalizeHexColor(segment.rubyStyle.color, resolvedSegmentColor);
-    }
-    innerContent = /* @__PURE__ */ jsxs("ruby", { children: [
-      baseContent,
-      /* @__PURE__ */ jsx("rp", { children: "(" }),
-      /* @__PURE__ */ jsx("rt", { style: rubyStyle, children: rubyText }),
-      /* @__PURE__ */ jsx("rp", { children: ")" })
-    ] });
-  } else {
-    innerContent = baseContent;
-  }
-  const spanNode = /* @__PURE__ */ jsx("span", { "data-seg-idx": segmentIndex, style: spanStyle, children: innerContent }, `${element.id}-seg-${segmentIndex}`);
-  if (hyperlinkUrl && onHyperlinkClick) {
-    const displayUrl = hyperlinkUrl.startsWith("ppaction://") ? hyperlinkUrl.replace(/^ppaction:\/\//u, "").split("?")[0] : hyperlinkUrl;
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        role: "link",
-        tabIndex: 0,
-        className: requireCtrlClick ? "group/link relative" : void 0,
-        style: { cursor: requireCtrlClick ? void 0 : "pointer", pointerEvents: "auto" },
-        onClick: (e) => {
-          if (requireCtrlClick && !e.ctrlKey && !e.metaKey) {
-            return;
-          }
-          e.stopPropagation();
-          e.preventDefault();
-          onHyperlinkClick(hyperlinkUrl);
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            if (requireCtrlClick && !e.ctrlKey && !e.metaKey) {
-              return;
-            }
-            e.preventDefault();
-            e.stopPropagation();
-            onHyperlinkClick(hyperlinkUrl);
-          }
-        },
-        children: [
-          spanNode,
-          requireCtrlClick && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-0 top-full z-[9999] mt-1 max-w-64 opacity-0 transition-opacity duration-150 group-hover/link:opacity-100", children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col rounded border border-border bg-popover px-2.5 py-1.5 shadow-lg", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-foreground", children: displayUrl }),
-            /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[10px] text-muted-foreground", children: "Ctrl+Click to follow link" })
-          ] }) })
-        ]
-      },
-      `${element.id}-seg-${segmentIndex}-link`
-    );
-  }
-  return spanNode;
+  const spanNode = /* @__PURE__ */ jsx("span", { "data-seg-idx": segmentIndex, style: spanStyle, children: renderRubyOrText(segment, baseContent, baseFontSize, baseFontFamily, resolvedSegmentColor) }, key);
+  return run.hyperlink && onHyperlinkClick ? renderHyperlink(run, spanNode, key, ctx) : spanNode;
+}
+function renderRubyOrText(segment, baseContent, baseFontSize, baseFontFamily, resolvedColor) {
+  const rubyText = segment?.rubyText;
+  if (typeof rubyText !== "string" || rubyText.length === 0) {
+    return baseContent;
+  }
+  const rubyStyle = {
+    fontSize: segment?.rubyFontSize ?? baseFontSize * 0.5,
+    fontFamily: segment?.rubyStyle?.fontFamily ?? baseFontFamily,
+    textAlign: segment?.rubyAlignment === "l" ? "left" : segment?.rubyAlignment === "r" ? "right" : segment?.rubyAlignment === "dist" || segment?.rubyAlignment === "distCat" || segment?.rubyAlignment === "distLetter" ? "justify" : "center"
+  };
+  if (segment?.rubyStyle?.color) {
+    rubyStyle.color = normalizeHexColor(segment.rubyStyle.color, resolvedColor);
+  }
+  return /* @__PURE__ */ jsxs("ruby", { children: [
+    baseContent,
+    /* @__PURE__ */ jsx("rp", { children: "(" }),
+    /* @__PURE__ */ jsx("rt", { style: rubyStyle, children: rubyText }),
+    /* @__PURE__ */ jsx("rp", { children: ")" })
+  ] });
 }
-function groupSegmentsIntoParagraphs(segments) {
-  const paragraphs = [];
-  let current = [];
-  for (let i = 0; i < segments.length; i++) {
-    const seg = segments[i];
-    if (seg.text === "\n") {
-      paragraphs.push({ entries: current, terminator: seg });
-      current = [];
-    } else {
-      current.push({ segment: seg, globalIndex: i });
-    }
-  }
-  if (current.length > 0 || paragraphs.length === 0) {
-    paragraphs.push({ entries: current });
+function renderHyperlink(run, spanNode, key, ctx) {
+  const url = run.hyperlink?.url;
+  const onHyperlinkClick = ctx.onHyperlinkClick;
+  if (!url || !onHyperlinkClick) {
+    return spanNode;
   }
-  return paragraphs;
+  const requireCtrlClick = ctx.requireCtrlClick;
+  const displayUrl = url.startsWith("ppaction://") ? url.replace(/^ppaction:\/\//u, "").split("?")[0] : url;
+  const follow = (modified) => {
+    if (requireCtrlClick && !modified) {
+      return false;
+    }
+    onHyperlinkClick(url);
+    return true;
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "link",
+      tabIndex: 0,
+      className: requireCtrlClick ? "group/link relative" : void 0,
+      style: { cursor: requireCtrlClick ? void 0 : "pointer", pointerEvents: "auto" },
+      title: run.hyperlink?.tooltip,
+      onClick: (e) => {
+        if (!follow(e.ctrlKey || e.metaKey)) {
+          return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      onKeyDown: (e) => {
+        if (e.key !== "Enter" && e.key !== " ") {
+          return;
+        }
+        if (!follow(e.ctrlKey || e.metaKey)) {
+          return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      children: [
+        spanNode,
+        requireCtrlClick && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-0 top-full z-[9999] mt-1 max-w-64 opacity-0 transition-opacity duration-150 group-hover/link:opacity-100", children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col rounded border border-border bg-popover px-2.5 py-1.5 shadow-lg", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-foreground", children: displayUrl }),
+          /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[10px] text-muted-foreground", children: "Ctrl+Click to follow link" })
+        ] }) })
+      ]
+    },
+    `${key}-link`
+  );
 }
 function renderTextSegments(element, fallbackColor, emptyFallback, findHighlights, onHyperlinkClick, fieldContext, subElementAnimStates, segmentOverrides, requireCtrlClick) {
   if (!hasTextProperties(element)) {
     return emptyFallback || null;
   }
-  const effectiveSegments = segmentOverrides ?? element.textSegments;
-  if (!effectiveSegments || effectiveSegments.length === 0) {
+  const segments = segmentOverrides ?? element.textSegments;
+  if (!segments || segments.length === 0) {
     if (!element.text && element.promptText) {
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          style: {
-            opacity: 0.5,
-            color: "#888888",
-            pointerEvents: "none"
-          },
-          children: element.promptText
-        }
-      );
+      return /* @__PURE__ */ jsx("span", { style: { opacity: 0.5, color: "#888888", pointerEvents: "none" }, children: element.promptText });
     }
     return element.text || emptyFallback || "";
   }
-  const paragraphs = groupSegmentsIntoParagraphs(effectiveSegments);
-  const paragraphIndents = hasTextProperties(element) ? element.paragraphIndents : void 0;
-  const elementRtl = hasTextProperties(element) ? element.textStyle?.rtl : void 0;
-  const elementAlign = hasTextProperties(element) ? element.textStyle?.align : void 0;
-  const bodyStyle = hasTextProperties(element) ? element.textStyle : void 0;
-  const spaceFirstLast = bodyStyle?.spaceFirstLastParagraph !== false;
-  return paragraphs.map(({ entries: paraSegments, terminator }, paraIndex) => {
-    const paraIndent = paragraphIndents?.[paraIndex];
-    const rawMarginLeft = typeof paraIndent?.marginLeft === "number" && paraIndent.marginLeft !== 0 ? paraIndent.marginLeft : void 0;
-    const rawTextIndent = typeof paraIndent?.indent === "number" && paraIndent.indent !== 0 ? paraIndent.indent : void 0;
-    const firstSeg = paraSegments[0];
-    const bulletInfo = firstSeg?.segment.bulletInfo;
-    const hasVisibleTextContent = paraSegments.some(({ segment }) => {
-      if (segment.bulletInfo) {
-        return false;
-      }
-      return Boolean(segment.text) && segment.text.trim().length > 0;
-    });
-    const hasBullet = bulletInfo && !bulletInfo.none && hasVisibleTextContent;
-    const paraRtl = resolveParagraphRtl(paraSegments, elementRtl);
-    const isRtlParagraph = paraRtl === true;
-    const paraAlign = resolveParagraphAlign(paraSegments, elementAlign);
-    const cssTextAlign = resolveCssTextAlign(paraAlign, isRtlParagraph);
-    const paraMarginLeft = isRtlParagraph ? void 0 : rawMarginLeft;
-    const paraMarginRight = isRtlParagraph ? rawMarginLeft : void 0;
-    const paraTextIndent = rawTextIndent;
-    const paraKinsokuStyle = getKinsokuLineBreakStyles(firstSeg?.segment.style);
-    const hasParaKinsoku = Object.keys(paraKinsokuStyle).length > 0;
-    const paraProps = effectiveSegments[firstSeg?.globalIndex ?? -1]?.paragraphProperties ?? (paraSegments.length === 0 ? terminator?.paragraphProperties : void 0);
-    const spacing = resolveParagraphSpacing({
-      paraProps,
-      bodyStyle,
-      isFirst: paraIndex === 0,
-      isLast: paraIndex === paragraphs.length - 1,
-      spaceFirstLast
-    });
-    const strutFontSize = resolveParagraphStrutFontSize(
-      paraSegments.length > 0 ? paraSegments.map(({ segment }) => segment) : terminator ? [terminator] : [],
-      bodyStyle?.fontSize
-    );
-    const hasParaSpacing = spacing.spaceBeforePx !== void 0 || spacing.spaceAfterPx !== void 0 || spacing.lineHeight !== void 0;
-    const paraStyle = {
-      ...paraKinsokuStyle
-    };
-    if (strutFontSize !== void 0) {
-      paraStyle.fontSize = strutFontSize;
-    }
-    if (spacing.spaceBeforePx !== void 0) {
-      paraStyle.marginTop = spacing.spaceBeforePx;
-    }
-    if (spacing.spaceAfterPx !== void 0) {
-      paraStyle.marginBottom = spacing.spaceAfterPx;
-    }
-    if (spacing.lineHeight !== void 0) {
-      paraStyle.lineHeight = spacing.lineHeight;
-    }
-    if (paraMarginLeft !== void 0) {
-      paraStyle.marginLeft = paraMarginLeft;
-    }
-    if (paraMarginRight !== void 0) {
-      paraStyle.marginRight = paraMarginRight;
-    }
-    if (paraTextIndent !== void 0) {
-      paraStyle.textIndent = paraTextIndent;
-    }
-    if (paraRtl !== void 0) {
-      paraStyle.direction = paraRtl ? "rtl" : "ltr";
-      paraStyle.unicodeBidi = "embed";
+  const paragraphs = buildParagraphs(element, fieldContext, segmentOverrides);
+  const ctx = {
+    element,
+    fallbackColor,
+    findHighlights,
+    onHyperlinkClick,
+    requireCtrlClick
+  };
+  return paragraphs.map(
+    (para, paraIndex) => renderParagraph(para, paraIndex, paragraphs.length, segments, ctx, subElementAnimStates)
+  );
+}
+function joinRunsBySegment(runs) {
+  const out = [];
+  for (const run of runs) {
+    const last = out[out.length - 1];
+    if (last && run.segmentIndex !== void 0 && last.segmentIndex === run.segmentIndex && !last.equation && !run.equation) {
+      last.text += run.text;
+      continue;
     }
-    if (cssTextAlign !== void 0) {
-      paraStyle.textAlign = cssTextAlign;
+    out.push({ ...run });
+  }
+  return out;
+}
+function renderParagraph(para, paraIndex, paraCount, segments, ctx, subElementAnimStates) {
+  const element = ctx.element;
+  const runCtx = { ...ctx, paragraphRtl: para.rtl };
+  const runs = joinRunsBySegment(para.runs);
+  const renderedRuns = runs.map(
+    (run) => renderParagraphRun(run, segments[run.segmentIndex ?? -1], runCtx)
+  );
+  const paraStyle = {
+    // `text-align`, BiDi `direction` / `unicode-bidi` and the kinsoku
+    // line-break rules, resolved by shared from this paragraph's own `a:pPr`.
+    ...para.paragraphStyle
+  };
+  if (para.strutFontSizePx !== void 0) {
+    paraStyle.fontSize = para.strutFontSizePx;
+  }
+  if (para.spaceBeforePx !== void 0) {
+    paraStyle.marginTop = para.spaceBeforePx;
+  }
+  if (para.spaceAfterPx !== void 0) {
+    paraStyle.marginBottom = para.spaceAfterPx;
+  }
+  if (para.lineHeight !== void 0) {
+    paraStyle.lineHeight = para.lineHeight;
+  }
+  if (para.marginLeftPx !== void 0) {
+    if (para.rtl === true) {
+      paraStyle.marginRight = para.marginLeftPx;
+    } else {
+      paraStyle.marginLeft = para.marginLeftPx;
     }
-    const needsWrapper = paraMarginLeft !== void 0 || paraMarginRight !== void 0 || paraTextIndent !== void 0 || hasBullet || paraRtl !== void 0 || cssTextAlign !== void 0 || hasParaKinsoku || hasParaSpacing || strutFontSize !== void 0;
-    const renderedSegments = paraSegments.filter(({ segment }) => {
-      if (!hasBullet && segment.bulletInfo) {
-        return false;
-      }
-      return true;
-    }).map(
-      ({ segment, globalIndex }) => renderSingleSegment(
-        element,
-        segment,
-        globalIndex,
-        fallbackColor,
-        findHighlights,
-        hasBullet && globalIndex === firstSeg.globalIndex ? bulletInfo : void 0,
-        onHyperlinkClick,
-        fieldContext,
-        paraRtl,
-        requireCtrlClick,
-        // Marker box = the hanging distance, so the first line's text
-        // lands on the indent stop (see `bulletHangPx` in
-        // `renderSingleSegment`).
-        hasBullet && globalIndex === firstSeg.globalIndex && typeof paraTextIndent === "number" && paraTextIndent < 0 ? -paraTextIndent : void 0
-      )
-    );
-    const wrappedContent = wrapWithTextBuildAnimation(
-      element.id,
-      paraIndex,
-      renderedSegments,
-      paraSegments,
-      subElementAnimStates,
-      // A staged build splits the paragraph but must not flatten it: each
-      // piece is re-rendered through the SAME segment renderer, so it keeps
-      // its run's font, size, colour and decoration while it animates.
-      ({ segment, globalIndex }, text) => renderSingleSegment(
-        element,
-        { ...segment, text },
-        globalIndex,
-        fallbackColor,
-        findHighlights,
-        void 0,
-        onHyperlinkClick,
-        fieldContext,
-        paraRtl,
-        requireCtrlClick
-      )
+  }
+  if (para.textIndentPx !== void 0) {
+    paraStyle.textIndent = para.textIndentPx;
+  }
+  const marker = renderBulletMarker(para, paraIndex, element.id);
+  const wrappedContent = wrapWithTextBuildAnimation(
+    element.id,
+    paraIndex,
+    renderedRuns,
+    runs,
+    subElementAnimStates,
+    // A staged build splits the paragraph but must not flatten it: each piece
+    // is re-rendered through the SAME run renderer, so it keeps its run's
+    // font, size, colour and decoration while it animates.
+    (run, text, pieceKey) => renderParagraphRun(
+      { ...run, text },
+      segments[run.segmentIndex ?? -1],
+      runCtx,
+      `-build-${pieceKey}`
+    )
+  );
+  const needsWrapper = Object.keys(paraStyle).length > 0 || marker !== null;
+  if (!needsWrapper) {
+    return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+      wrappedContent,
+      paraIndex < paraCount - 1 ? /* @__PURE__ */ jsx("br", {}) : null
+    ] }, `${element.id}-para-${paraIndex}`);
+  }
+  return /* @__PURE__ */ jsxs("div", { style: paraStyle, children: [
+    marker,
+    para.isEmpty ? /* @__PURE__ */ jsx("br", {}) : wrappedContent
+  ] }, `${element.id}-para-${paraIndex}`);
+}
+function renderBulletMarker(para, paraIndex, elementId) {
+  const picture = para.bulletPicture;
+  if (picture?.src) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: picture.src,
+        alt: picture.accessibleLabel,
+        style: {
+          width: picture.sizePx,
+          height: picture.sizePx,
+          display: "inline-block",
+          verticalAlign: "middle",
+          marginInlineEnd: 4,
+          objectFit: "contain"
+        }
+      },
+      `${elementId}-para-${paraIndex}-bullet-img`
     );
-    const isBlankParagraph = renderedSegments.length === 0;
-    if (!needsWrapper) {
-      return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
-        wrappedContent,
-        paraIndex < paragraphs.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
-      ] }, `${element.id}-para-${paraIndex}`);
-    }
-    return /* @__PURE__ */ jsx("div", { style: paraStyle, children: isBlankParagraph ? /* @__PURE__ */ jsx("br", {}) : wrappedContent }, `${element.id}-para-${paraIndex}`);
-  });
+  }
+  if (para.bulletMarker === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "pptx-bullet",
+      style: para.bulletStyle,
+      "aria-label": picture?.accessibleLabel,
+      children: para.bulletMarker
+    },
+    `${elementId}-para-${paraIndex}-bullet`
+  );
 }
 function hexToRgbUnit(hex) {
   const clean = hex.replace("#", "");
@@ -2107,23 +1896,6 @@ function buildLineGlowFilter(element) {
   const glowCol = colorWithOpacity(normalizeHexColor(ss.lineGlowColor, "#ffff00"), glowOpacity);
   return `drop-shadow(0 0 ${glowRad}px ${glowCol})`;
 }
-function mapDagBlendModeToCss(blend) {
-  if (!blend) {
-    return void 0;
-  }
-  switch (blend) {
-    case "mult":
-      return "multiply";
-    case "screen":
-      return "screen";
-    case "darken":
-      return "darken";
-    case "lighten":
-      return "lighten";
-    default:
-      return void 0;
-  }
-}
 function getDagDuotoneFilterId(elementId) {
   return `dag-duotone-${elementId}`;
 }
@@ -2178,17 +1950,6 @@ function renderDagDuotoneSvgFilter(elementId, color1, color2) {
   );
 }
 
-// src/viewer/utils/shape-round-rect.ts
-function localClampAdjustment(value) {
-  return Math.max(SHAPE_ADJUSTMENT_MIN, Math.min(SHAPE_ADJUSTMENT_MAX, Math.round(value)));
-}
-function getRoundRectRadiusPx(element) {
-  const adjustment = element.shapeAdjustments?.adj;
-  const adjValue = typeof adjustment === "number" && Number.isFinite(adjustment) ? localClampAdjustment(adjustment) : DEFAULT_ROUND_RECT_ADJUSTMENT;
-  const normalizedAdjustment = adjValue / SHAPE_ADJUSTMENT_MAX;
-  return Math.min(Math.max(element.width, 1), Math.max(element.height, 1)) * 0.5 * normalizedAdjustment;
-}
-
 // src/viewer/utils/shape-visual-3d.ts
 function build3DExtrusionData2(shape3d, scene3d, fillColor, elementWidth, elementHeight) {
   return build3DExtrusionData(
@@ -2204,162 +1965,52 @@ function apply3dEffects2(base, scene3d, shape3d, fillColorFallback) {
 }
 
 // src/viewer/utils/shape-visual-style.ts
-function getGradientTilingCss(style) {
-  if (!style || style.fillMode !== "gradient") {
-    return void 0;
-  }
-  const isStructuredLinear = (style.fillGradientType || "linear") === "linear" && sanitizeGradientStops(style.fillGradientStops).length > 0;
-  if (isStructuredLinear) {
-    const flip = getGradientTileFlipCss(style.fillGradientFlip);
-    if (flip) {
-      return flip;
-    }
-  }
-  return getGradientTileRectCss(style.fillGradientTileRect);
+function rendersCustomVectorPath(element) {
+  return (element.type === "shape" || element.type === "image" || element.type === "picture") && Boolean(element.pathData) && typeof element.pathWidth === "number" && element.pathWidth > 0 && typeof element.pathHeight === "number" && element.pathHeight > 0;
 }
-function getShapeVisualStyle(element, hasFill, fillColor, strokeWidth, strokeColor, animatesFill, animatesStroke) {
+function getShapeVisualStyle(element, _hasFill, fillColor, _strokeWidth, _strokeColor, animatesFill, animatesStroke, parentGroupFill) {
   if (!hasShapeProperties(element)) {
     return {};
   }
-  const normalizedShapeType = getShapeType(element.shapeType);
-  const clipPath = isIdentityRectClip(element) ? void 0 : getResolvedShapeClipPath(element);
-  const rendersCustomVectorPath = (element.type === "shape" || element.type === "image" || element.type === "picture") && Boolean(element.pathData) && typeof element.pathWidth === "number" && element.pathWidth > 0 && typeof element.pathHeight === "number" && element.pathHeight > 0;
-  const rendersStrokeOnlyPreset = isStrokeOnlyPresetElement(element);
-  const fillOpacity = element.shapeStyle?.fillOpacity;
-  const strokeOpacity = element.shapeStyle?.strokeOpacity;
-  const strokeDash = normalizeStrokeDashType(element.shapeStyle?.strokeDash);
-  const fillGradient = buildCssGradientFromShapeStyle(element.shapeStyle, {
-    rotation: element.rotation,
-    width: element.width,
-    height: element.height
-  }) || element.shapeStyle?.fillGradient;
-  const shadowCss = buildShadowCssFromShapeStyle(element.shapeStyle);
-  const innerShadowCss = buildInnerShadowCssFromShapeStyle(element.shapeStyle);
-  const resolvedFillColor = colorWithOpacity(fillColor, fillOpacity);
-  const resolvedStrokeColor = colorWithOpacity(strokeColor, strokeOpacity);
   const ss = element.shapeStyle;
-  const gradientTiling = getGradientTilingCss(ss);
-  const paintsGradientOutline = suppressesCssBorder(element);
-  const hasFillOverlayColor = Boolean(
-    ss?.dagFillOverlayColor && ss.dagFillOverlayColor !== "transparent"
-  );
-  const combinedShadowParts = [];
-  const multiLayerShadow = buildMultiLayerShadowCss(element.shapeStyle);
-  if (multiLayerShadow) {
-    combinedShadowParts.push(multiLayerShadow);
-  } else if (shadowCss) {
-    combinedShadowParts.push(shadowCss);
-  }
-  if (innerShadowCss) {
-    combinedShadowParts.push(innerShadowCss);
-  }
-  const glowBoxShadow = buildGlowBoxShadow(ss?.glowColor, ss?.glowRadius, ss?.glowOpacity);
-  if (glowBoxShadow) {
-    combinedShadowParts.push(glowBoxShadow);
-  }
-  const lineShadow = buildLineShadowCss(element);
-  if (lineShadow) {
-    combinedShadowParts.push(lineShadow);
-  }
-  const compoundLineShadow = getCompoundLineBoxShadow(
-    element.shapeStyle?.compoundLine,
-    strokeWidth,
-    resolvedStrokeColor
-  );
-  if (compoundLineShadow) {
-    combinedShadowParts.push(compoundLineShadow);
-  }
-  const combinedBoxShadow = combinedShadowParts.length > 0 ? combinedShadowParts.join(", ") : void 0;
-  const filterParts = [];
-  if (ss?.glowColor && ss.glowColor !== "transparent" && ss.glowRadius) {
-    const glowOpacity = typeof ss.glowOpacity === "number" ? ss.glowOpacity : 0.75;
-    const glowRad = Math.round(Math.max(0, ss.glowRadius));
-    const glowCol = colorWithOpacity(normalizeHexColor(ss.glowColor, "#ffff00"), glowOpacity);
-    filterParts.push(`drop-shadow(0 0 ${glowRad}px ${glowCol})`);
-  }
-  if (typeof ss?.softEdgeRadius === "number" && ss.softEdgeRadius > 0) {
-    filterParts.push(`url(#${getSoftEdgeFilterId(element.id)})`);
-  }
-  if (typeof ss?.blurRadius === "number" && ss.blurRadius > 0) {
-    filterParts.push(`blur(${Math.round(ss.blurRadius)}px)`);
-  }
-  const lineGlowCss = buildLineGlowFilter(element);
-  if (lineGlowCss) {
-    filterParts.push(lineGlowCss);
-  }
-  const dagFilter = getEffectDagFilter(ss, element.id);
-  if (dagFilter) {
-    filterParts.push(dagFilter);
-  }
-  const lineJoinCss = ss?.lineJoin === "round" ? "round" : ss?.lineJoin === "bevel" ? "bevel" : ss?.lineJoin === "miter" ? "miter" : void 0;
-  const miterLimitCss = ss?.lineJoin === "miter" && typeof ss?.miterLimit === "number" ? Math.max(ss.miterLimit / 1e5, 1) : void 0;
-  const patternFill = buildPatternFillCss(element.shapeStyle);
-  const imageFillUrl = ss?.fillMode === "image" && ss.fillImageUrl ? ss.fillImageUrl : void 0;
-  const imageFillMode = ss?.fillImageMode || "stretch";
-  let reflectCss;
-  if (ss) {
-    const hasReflection = typeof ss.reflectionStartOpacity === "number" && ss.reflectionStartOpacity > 0 || typeof ss.reflectionDistance === "number" && ss.reflectionDistance > 0 || typeof ss.reflectionBlurRadius === "number" && ss.reflectionBlurRadius > 0;
-    if (hasReflection) {
-      const distance = ss.reflectionDistance ?? 0;
-      const startOpacity = typeof ss.reflectionStartOpacity === "number" ? ss.reflectionStartOpacity : 0.5;
-      const endOpacity = typeof ss.reflectionEndOpacity === "number" ? ss.reflectionEndOpacity : 0;
-      const fadeLength = typeof ss.reflectionEndPosition === "number" ? Math.round(ss.reflectionEndPosition * Math.max(element.height, 1)) : 100;
-      const blurRadius = typeof ss.reflectionBlurRadius === "number" ? ss.reflectionBlurRadius : 0;
-      reflectCss = buildReflectionCss(distance, startOpacity, endOpacity, fadeLength, blurRadius);
-    }
-  }
+  const fill = animatesFill ? void 0 : getComputedFillStyle(element, parentGroupFill);
+  const fx = getComputedEffectStyle(element);
+  const stroke = getComputedStrokeStyle(element);
   const base = {
-    // A gradient fill REPLACES the solid fill, it does not sit on top of it.
-    // The parser also records a representative `fillColor`/`fillOpacity` for a
-    // `a:gradFill` (used by thumbnails and the inspector), and painting that as
-    // a `backgroundColor` under the gradient washed the whole shape: wherever
-    // the gradient's own stops were transparent the solid still showed, so a
-    // fade-to-transparent overlay dimmed everything behind it and its edge read
-    // as a hard line. Mirrors the fill precedence in shared's
-    // `getComputedFillStyle` (image -> gradient -> pattern -> solid).
-    backgroundColor: imageFillUrl ? "transparent" : patternFill ? patternFill.backgroundColor : hasFill && !fillGradient ? resolvedFillColor : "transparent",
-    backgroundImage: imageFillUrl ? `url(${imageFillUrl})` : patternFill ? patternFill.backgroundImage : hasFill && fillGradient ? fillGradient : void 0,
-    backgroundRepeat: imageFillUrl ? imageFillMode === "tile" ? "repeat" : "no-repeat" : patternFill ? "repeat" : hasFill && fillGradient ? gradientTiling?.backgroundRepeat ?? "no-repeat" : void 0,
-    backgroundSize: imageFillUrl ? imageFillMode === "tile" ? "auto" : "100% 100%" : patternFill ? "auto" : hasFill && fillGradient ? gradientTiling?.backgroundSize ?? "100% 100%" : void 0,
-    // The container always carries a 1px border (transparent unless the shape
-    // has a stroke or is hovered) and `box-sizing: border-box`, so the default
-    // `background-origin: padding-box` sizes the paint 2px smaller than the
-    // shape. Combined with the default `background-repeat: repeat` that made a
-    // gradient tile wrap, painting a 1px sliver of its opposite end along the
-    // edge - a fade-to-transparent overlay grew a hard opaque line down its
-    // side. Paint from the border box so the fill matches the shape outline.
+    // A gradient fill REPLACES the solid fill, it does not sit on top of it;
+    // the whole precedence lives in shared's `getComputedFillStyle`.
+    backgroundColor: fill?.backgroundColor ?? "transparent",
+    backgroundImage: fill?.backgroundImage,
+    backgroundRepeat: fill?.backgroundRepeat,
+    backgroundSize: fill?.backgroundSize,
+    backgroundPosition: fill?.backgroundPosition,
+    // The container always carries `box-sizing: border-box`, so the default
+    // `background-origin: padding-box` would size the paint 2px smaller than
+    // the shape and make a gradient tile wrap, painting a 1px sliver of its
+    // opposite end along the edge. Paint from the border box instead.
     backgroundOrigin: "border-box",
-    backgroundPosition: imageFillUrl ? "center" : hasFill && fillGradient ? gradientTiling?.backgroundPosition : void 0,
-    boxShadow: combinedBoxShadow,
-    WebkitBoxReflect: reflectCss,
-    filter: filterParts.length > 0 ? filterParts.join(" ") : void 0,
-    opacity: typeof ss?.dagAlphaModFix === "number" ? Math.max(0, Math.min(1, ss.dagAlphaModFix / 100)) : void 0,
-    // Only proxy the DAG blend onto the whole element for the legacy
-    // blend-only case (no overlay colour parsed). When a fill-overlay colour
-    // is present, `ShapeEffectOverlay` paints a separate blended tint layer so
-    // the colour is actually rendered (and text/children are not tinted).
-    mixBlendMode: hasFillOverlayColor ? void 0 : mapDagBlendModeToCss(ss?.dagFillOverlayBlend),
-    // An unstroked element must occupy EXACTLY its authored box. The
-    // container class carries a 1px (transparent) border for the
-    // selection/hover affordance and `box-sizing: border-box`, which
-    // silently shrank every unstroked element's content by 2px and shifted
-    // it 1px down-right. On a 40x40 icon that is a visible 5% shrink, and
-    // two adjacent 40px buttons rendered with a 2px gap PowerPoint does not
-    // draw. The affordance is an `outline` instead (see `ElementRenderer`),
-    // which paints in the same place without taking part in layout.
-    // A gradient outline is painted by `ShapeEffectOverlay` as a stroked SVG
-    // path following the shape's geometry, because a CSS border can only take
-    // one colour. Keeping the border too would draw the parser's averaged
-    // solid underneath the gradient.
-    borderWidth: strokeWidth > 0 && !paintsGradientOutline ? getCompoundLineBorderWidth(ss?.compoundLine, strokeWidth) : 0,
-    borderColor: strokeWidth > 0 && !paintsGradientOutline ? resolvedStrokeColor : void 0,
-    borderStyle: strokeWidth > 0 && !paintsGradientOutline ? getCssBorderDashStyle(strokeDash, ss?.compoundLine) : void 0,
-    strokeLinejoin: lineJoinCss,
-    strokeMiterlimit: miterLimitCss,
-    strokeLinecap: ss?.lineCap === "rnd" ? "round" : ss?.lineCap === "sq" ? "square" : ss?.lineCap === "flat" ? "butt" : void 0
+    boxShadow: fx.boxShadow,
+    WebkitBoxReflect: fx.webkitBoxReflect,
+    filter: fx.filter,
+    opacity: fx.opacity,
+    // Only proxy the DAG blend onto the whole element for the blend-only case:
+    // with an overlay colour, `ShapeEffectOverlay` paints a separate blended
+    // tint layer (shared decides which, and returns only one of the two).
+    mixBlendMode: fx.mixBlendMode,
+    // An unstroked element must occupy EXACTLY its authored box, so the
+    // selection/hover affordance is an `outline` (see `ElementRenderer`) and
+    // the border collapses to 0 rather than to a transparent 1px.
+    borderWidth: stroke.borderWidth,
+    borderColor: animatesStroke ? void 0 : stroke.borderColor,
+    borderStyle: stroke.borderStyle,
+    // Inherited SVG presentation properties: written on the container so the
+    // freeform `<path>` and the stroke overlay both pick them up.
+    strokeLinejoin: stroke.strokeLinejoin,
+    strokeMiterlimit: stroke.strokeMiterlimit,
+    strokeLinecap: stroke.strokeLinecap
   };
   apply3dEffects2(base, ss?.scene3d, ss?.shape3d, ss?.fillColor ?? fillColor);
-  if (rendersCustomVectorPath || rendersStrokeOnlyPreset) {
+  if (rendersCustomVectorPath(element) || isStrokeOnlyPresetElement(element)) {
     base.backgroundColor = "transparent";
     base.backgroundImage = void 0;
     base.borderWidth = void 0;
@@ -2370,59 +2021,28 @@ function getShapeVisualStyle(element, hasFill, fillColor, strokeWidth, strokeCol
     base.backgroundColor = void 0;
     base.backgroundImage = void 0;
   }
-  if (animatesStroke) {
-    base.borderColor = void 0;
-  }
-  if (element.type === "connector" || normalizedShapeType === "connector") {
-    return {
-      backgroundColor: "transparent",
-      borderWidth: 0,
-      borderStyle: "none"
-    };
-  }
-  if (normalizedShapeType === "roundRect") {
-    const radiusPx = getRoundRectRadiusPx(element);
-    if (radiusPx <= 0.01) {
+  const geometry = resolveShapeGeometry(element);
+  switch (geometry.kind) {
+    case "bare":
+      return { backgroundColor: "transparent", borderWidth: 0, borderStyle: "none" };
+    case "strokeOnly":
+      return { ...base, backgroundColor: "transparent", backgroundImage: void 0 };
+    case "borderRadius":
+      return { ...base, borderRadius: geometry.radius };
+    case "clipPath":
+      return { ...base, clipPath: geometry.clipPath };
+    case "lineEdge":
+      return {
+        ...base,
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        borderTopWidth: geometry.strokeWidth,
+        borderTopColor: stroke.borderColor,
+        borderTopStyle: stroke.borderStyle ?? "solid"
+      };
+    default:
       return base;
-    }
-    return {
-      ...base,
-      borderRadius: radiusPx
-    };
-  }
-  if (normalizedShapeType === "ellipse") {
-    return {
-      ...base,
-      // `50%`, not a huge px value: CSS clamps over-large radii by scaling
-      // them all down uniformly, so `9999px` on a non-square box collapses to
-      // half the SHORT side on every corner - a pill with flat long edges,
-      // not an ellipse. `50%` resolves per-axis and inscribes correctly.
-      borderRadius: "50%"
-    };
-  }
-  if (clipPath && !rendersStrokeOnlyPreset) {
-    return {
-      ...base,
-      clipPath
-    };
   }
-  if (normalizedShapeType === "line" && !rendersStrokeOnlyPreset) {
-    return {
-      ...base,
-      backgroundColor: "transparent",
-      borderWidth: 0,
-      borderTopWidth: Math.max(strokeWidth, 2),
-      borderTopColor: resolvedStrokeColor,
-      borderTopStyle: getCssBorderDashStyle(strokeDash)
-    };
-  }
-  if (normalizedShapeType === "cylinder") {
-    return {
-      ...base,
-      borderRadius: "48% / 12%"
-    };
-  }
-  return base;
 }
 function getConnectorAdjustment(element, key, fallback) {
   const direct = element.shapeAdjustments?.[key];
@@ -3402,6 +3022,28 @@ function parseTableElementData(element, fallbackTextStyle) {
     cells
   };
 }
+function renderTableCellContent(cell, fallbackText) {
+  const runs = cell?.textRuns;
+  if (!runs || runs.length === 0) {
+    return fallbackText || "\xA0";
+  }
+  return runs.map((run, index) => {
+    if (run.isParagraphBreak) {
+      return /* @__PURE__ */ jsx("div", { style: { display: "block", height: 0 } }, `p-${index}`);
+    }
+    if (run.isLineBreak) {
+      return /* @__PURE__ */ jsx("br", {}, `br-${index}`);
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: { position: "relative", ...cellRunStyle(run) },
+        children: run.text
+      },
+      `r-${index}`
+    );
+  });
+}
 function getCellDiagonalBorders2(style, tableData, pos, styleCtx) {
   return getCellDiagonalBorders(style, tableData, pos, {
     tableStyleMap: styleCtx?.tableStyleMap,
@@ -3693,7 +3335,11 @@ function renderTableFromTableData(element, textStyle, options) {
             "table",
             {
               className: "w-full h-full border-collapse table-fixed",
-              style: { fontFamily: DEFAULT_FONT_FAMILY },
+              style: {
+                fontFamily: DEFAULT_FONT_FAMILY,
+                // `a:tblPr@rtl` mirrors the column order for RTL decks.
+                ...tableContainerCss(tableData)
+              },
               children: [
                 tableData.columnWidths.length > 0 && /* @__PURE__ */ jsx("colgroup", { children: tableData.columnWidths.map((w, ci) => /* @__PURE__ */ jsx(
                   "col",
@@ -3791,7 +3437,7 @@ function renderTableFromTableData(element, textStyle, options) {
                                   });
                                 }
                               }
-                            ) : cell.text || "\xA0"
+                            ) : renderTableCellContent(cell, cell.text || "\xA0")
                           ]
                         },
                         `${element.id}-cell-${rowIndex}-${cellIndex}`
@@ -3851,7 +3497,11 @@ function renderTableElement(element, textStyle, options) {
             "table",
             {
               className: "w-full h-full border-collapse table-fixed",
-              style: { fontFamily: DEFAULT_FONT_FAMILY },
+              style: {
+                fontFamily: DEFAULT_FONT_FAMILY,
+                // `a:tblPr@rtl` mirrors the column order for RTL decks.
+                ...tableContainerCss(tableEl.tableData)
+              },
               children: [
                 parsedTable.columnPercentages.length > 0 ? /* @__PURE__ */ jsx("colgroup", { children: parsedTable.columnPercentages.map((percentage, columnIndex) => /* @__PURE__ */ jsx(
                   "col",
@@ -3970,7 +3620,10 @@ function renderTableElement(element, textStyle, options) {
                                     });
                                   }
                                 }
-                              ) : extractCellText(cell) || "\xA0"
+                              ) : renderTableCellContent(
+                                tableEl.tableData?.rows[rowIndex]?.cells[cellIndex],
+                                extractCellText(cell) || "\xA0"
+                              )
                             ]
                           },
                           `${element.id}-cell-${rowIndex}-${cellIndex}`
@@ -5819,7 +5472,7 @@ function FailedToLoad() {
 var LazySurfaceChart3DScene = React6.lazy(
   async () => {
     try {
-      return await import('./SurfaceChart3DScene-Q47OEJXS.mjs');
+      return await import('./SurfaceChart3DScene-DEQP5O3U.mjs');
     } catch {
       return { default: FailedToLoad };
     }
@@ -6599,4 +6252,4 @@ function stopPreviewAnimation() {
   activePreview = null;
 }
 
-export { ANIMATION_PRESET_OPTIONS, ARROW_SIZE_OPTIONS, CONNECTOR_ARROW_OPTIONS, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_FONT_FAMILY2 as DEFAULT_FONT_FAMILY, DEFAULT_STROKE_COLOR, DEFAULT_TABLE_COLUMNS, DEFAULT_TABLE_ROWS, DEFAULT_TEXT_COLOR, DEFAULT_TEXT_FONT_SIZE, EMU_PER_PX, GRID_SIZE, HYPERLINK_COLOR, MIN_ELEMENT_SIZE, SHAPE_PRESETS, SHORTCUT_REFERENCE_ITEMS, SLIDE_NAV_THUMBNAIL_WIDTH, STROKE_DASH_OPTIONS, THEME_COLOR_SWATCHES, TOOLBAR_SECTIONS, UNGROUPED_SECTION_ID, ZOOM_TO_SELECTION_PADDING, build3DExtrusionData2 as build3DExtrusionData, buildLineGlowFilter, buildLineShadowCss, buildNotesPdf, buildPdfFromImageData, buildReactChartViewModel, buildTextBody3DSceneStyle2 as buildTextBody3DSceneStyle, cloneHistorySnapshot2 as cloneHistorySnapshot, cn, executeMediaCommand, getAnimationInitialStyle2 as getAnimationInitialStyle, getConnectorPathGeometry, getCropShapeClipPath, getDuotoneColors, getImageRenderStyle, getImageTilingStyle, getShapeVisualStyle, getTextLayoutStyle, getTextStyleForElement, getTextWarpStyle, hasDagDuotoneEffect, isConnectorOrLineElement, isImageTiled, renderChartElement, renderConnectorMarker, renderDagDuotoneSvgFilter, renderMediaElement, renderTableElement, renderTextSegments, renderVectorShape, shouldRenderFallbackLabel, startMotionPathPreview, startPreviewAnimation, stopPreviewAnimation };
+export { ANIMATION_PRESET_OPTIONS, ARROW_SIZE_OPTIONS, CONNECTOR_ARROW_OPTIONS, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_FONT_FAMILY2 as DEFAULT_FONT_FAMILY, DEFAULT_STROKE_COLOR, DEFAULT_TABLE_COLUMNS, DEFAULT_TABLE_ROWS, DEFAULT_TEXT_COLOR, DEFAULT_TEXT_FONT_SIZE, EMU_PER_PX, GRID_SIZE, HYPERLINK_COLOR, MIN_ELEMENT_SIZE, SHAPE_PRESETS, SHORTCUT_REFERENCE_ITEMS, SLIDE_NAV_THUMBNAIL_WIDTH, STROKE_DASH_OPTIONS, THEME_COLOR_SWATCHES, TOOLBAR_SECTIONS, UNGROUPED_SECTION_ID, ZOOM_TO_SELECTION_PADDING, build3DExtrusionData2 as build3DExtrusionData, buildLineGlowFilter, buildLineShadowCss, buildNotesPdf, buildPdfFromImageData, buildReactChartViewModel, buildTextBody3DSceneStyle2 as buildTextBody3DSceneStyle, cloneHistorySnapshot2 as cloneHistorySnapshot, cn, executeMediaCommand, getAnimationInitialStyle2 as getAnimationInitialStyle, getConnectorPathGeometry, getCropShapeClipPath, getDuotoneColors, getImageRenderStyle, getImageTilingStyle2 as getImageTilingStyle, getShapeVisualStyle, getTextLayoutStyle, getTextStyleForElement, getTextWarpStyle, hasDagDuotoneEffect, isConnectorOrLineElement, renderChartElement, renderConnectorMarker, renderDagDuotoneSvgFilter, renderMediaElement, renderTableElement, renderTextSegments, renderVectorShape, shouldRenderFallbackLabel, startMotionPathPreview, startPreviewAnimation, stopPreviewAnimation };