pptx-react-viewer 3.5.4 → 3.7.0

package/dist/{chunk-U52MKWVA.mjs → chunk-JANUSAEK.mjs}

@@ -1,8 +1,8 @@
-import { SHAPE_PRESET_DEFS, VIEWER_SHORTCUT_REFERENCE, STROKE_DASH_OPTIONS, getAnimationInitialStyle, cloneHistorySnapshot, hasShapeProperties, getImageFitStyle, getComputedFillStyle, isImageLikeElement, getCropShapeClipPath, getImageTilingStyle, mediaPlaybackAttributes, buildTextBlockStyle, hasTextProperties, toCssWritingMode, toCssTextOrientation, toCssVerticalDirection, buildTextBodyLayoutStyle, buildTextBody3DSceneStyle, buildParagraphs, colorWithOpacity, normalizeHexColor, hexToRgbUnit, build3DExtrusionData, getComputedEffectStyle, getComputedStrokeStyle, getAnimationColorBaseStyle, isStrokeOnlyPresetElement, resolveShapeGeometry, normalizeStrokeDashType, getSvgStrokeDasharray, buildSvgGradientDef, buildStrokeOutline, getPresetShapeVectorGeometry, isWedgeCalloutPresetShape, svgGradientFillRef, isCalloutShape, getCalloutLeaderLineGeometry, buildCalloutLeaderLineSvgPath, getCalloutViewBoxBounds, svgLineCap, getCompoundLineOffsets, getCompoundLineWidths, computeSelectionRect, DEFAULT_FONT_FAMILY, cellStyleToCss, rectToCells, isCellInRect, tableContainerCss, buildChartViewModel, resolveChartKind, chartPreserveAspectRatio, buildNotesPdfBytes, buildSlidesPdfBytes, buildPreviewAnimation, buildMotionPathPreview, mediaFallbackVisual, registerCrossSlideAudio, resolveAutoFitFontScale, resolveFontKerning, getSubstituteFontFamily, parsePanoseString, resolveScriptFontSet, hasDistinctScriptFonts, nestedTextDecorationStyle, pieceLetterSpacing, resolveMetricTrackingPx, hollowTextFillStyle, buildTabContext, TEXT_BUILD_ID_SEP, buildTextBuildSpec, textBuildSpanStyle, apply3dEffects, clampUnitInterval, customGeometryPathsToSvgSubpaths, buildSubpathPaints, computeColumnBoundaries, getTableCellBandStyle, parseDrawingColor, parseDrawingColorOpacity, getCellDiagonalBorders, cellRunStyle, getChartStylePalette, computeChartLegendLayout, mediaFallbackIcon, mediaFallbackLabelKey, MEDIA_CHROME_ATTRIBUTE, convertOmmlToMathMl, sanitizeMathMl, tableCellCss, computeResizedColumnWidths, computeResizedRowHeight, DEFAULT_ROW_HEIGHT, ooxmlGradientAngleToCssDegrees, buildRectPathGradient, buildRunTabLines, chartPartToAttrs, splitRunForMetrics, splitRunByScriptFont } from './chunk-NM652EZS.mjs';
-import { translationsEn } from './chunk-JCJ3EPG6.mjs';
+import { SHAPE_PRESET_DEFS, VIEWER_SHORTCUT_REFERENCE, STROKE_DASH_OPTIONS, getAnimationInitialStyle, cloneHistorySnapshot, hasShapeProperties, getImageFitStyle, getComputedFillStyle, isImageLikeElement, getCropShapeClipPath, getImageTilingStyle, mediaPlaybackAttributes, buildTextBlockStyle, hasTextProperties, toCssWritingMode, toCssTextOrientation, toCssVerticalDirection, buildTextBodyLayoutStyle, buildTextBody3DSceneStyle, buildParagraphs, colorWithOpacity, normalizeHexColor, hexToRgbUnit, build3DExtrusionData, getComputedEffectStyle, getComputedStrokeStyle, getAnimationColorBaseStyle, isStrokeOnlyPresetElement, resolveShapeGeometry, normalizeStrokeDashType, getSvgStrokeDasharray, buildSvgGradientDef, buildStrokeOutline, getPresetShapeVectorGeometry, isWedgeCalloutPresetShape, svgGradientFillRef, isCalloutShape, getCalloutLeaderLineGeometry, buildCalloutLeaderLineSvgPath, getCalloutViewBoxBounds, svgLineCap, getCompoundLineOffsets, getCompoundLineWidths, canDrillDown, computeSelectionRect, DEFAULT_FONT_FAMILY, cellStyleToCss, rectToCells, isCellInRect, tableContainerCss, buildChartViewModel, resolveChartKind, chartPreserveAspectRatio, buildNotesPdfBytes, buildSlidesPdfBytes, buildPreviewAnimation, buildMotionPathPreview, mediaFallbackVisual, scheduleMediaTrimAndFade, registerCrossSlideAudio, resolveAutoFitFontScale, resolveFontKerning, getSubstituteFontFamily, parsePanoseString, resolveScriptFontSet, hasDistinctScriptFonts, nestedTextDecorationStyle, pieceLetterSpacing, resolveMetricTrackingPx, hollowTextFillStyle, stripUnderlineDecoration, buildTabContext, TEXT_BUILD_ID_SEP, buildTextBuildSpec, textBuildSpanStyle, apply3dEffects, clampUnitInterval, customGeometryPathsToSvgSubpaths, buildSubpathPaints, computeColumnBoundaries, getTableCellBandStyle, parseDrawingColor, parseDrawingColorOpacity, getCellDiagonalBorders, cellRunStyle, getChartStylePalette, computeChartLegendLayout, mediaFallbackIcon, mediaFallbackLabelKey, MEDIA_CHROME_ATTRIBUTE, convertOmmlToMathMl, sanitizeMathMl, tableCellCss, computeResizedColumnWidths, computeResizedRowHeight, DEFAULT_ROW_HEIGHT, ooxmlGradientAngleToCssDegrees, buildRectPathGradient, buildRunTabLines, chartPartToAttrs, splitWordsForUnderline, splitRunForMetrics, splitRunByScriptFont } from './chunk-NV55GU5V.mjs';
+import { translationsEn } from './chunk-FGTMS7LR.mjs';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import React6, { useRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
+import React7, { useRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
 import { LuTriangle, LuPlus, LuMoveRight, LuMinus, LuDiamond, LuDatabase, LuCircle, LuSquare } from 'react-icons/lu';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
@@ -57,22 +57,6 @@ var TOOLBAR_SECTIONS = [
 ];
 var SHORTCUT_REFERENCE_ITEMS = VIEWER_SHORTCUT_REFERENCE;
 
-// src/viewer/constants/theme.ts
-var THEME_COLOR_SWATCHES = [
-  "#000000",
-  "#FFFFFF",
-  "#1F497D",
-  "#EEECE1",
-  "#4472C4",
-  "#ED7D31",
-  "#A5A5A5",
-  "#FFC000",
-  "#5B9BD5",
-  "#70AD47",
-  "#0563C1",
-  "#954F72"
-];
-
 // src/viewer/constants/transitions-animations.ts
 var ANIMATION_PRESET_OPTIONS = [
   { value: "fadeIn", label: "Fade In", i18nKey: "pptx.animation.preset.fadeIn" },
@@ -104,7 +88,7 @@ var SHAPE_PRESETS = SHAPE_PRESET_DEFS.map(
     type: def.type,
     label: def.label,
     i18nKey: def.i18nKey,
-    icon: React6.createElement(GLYPH_COMPONENTS[def.glyph], {
+    icon: React7.createElement(GLYPH_COMPONENTS[def.glyph], {
       className: def.glyphClass ? `w-3.5 h-3.5 ${def.glyphClass}` : "w-3.5 h-3.5"
     })
   })
@@ -330,20 +314,10 @@ function ensureArrayValue(value) {
 // src/viewer/utils/media-persistent-audio.tsx
 function buildTrimFragment(element) {
   const start = element.trimStartMs;
-  const end = element.trimEndMs;
-  if (start === void 0 && end === void 0) {
+  if (start === void 0 || start <= 0) {
     return "";
   }
-  const parts = [];
-  if (start !== void 0 && start > 0) {
-    parts.push((start / 1e3).toFixed(3));
-  } else {
-    parts.push("");
-  }
-  if (end !== void 0 && end > 0) {
-    parts.push((end / 1e3).toFixed(3));
-  }
-  return parts.length > 0 ? `#t=${parts.join(",")}` : "";
+  return `#t=${(start / 1e3).toFixed(3)}`;
 }
 function useMediaMetadataExtraction(mediaRef, element) {
   const [metadata, setMetadata] = useState(element.metadata);
@@ -484,25 +458,9 @@ function PresentationMediaController({
 }) {
   const { t } = useTranslation();
   const mediaRef = useRef(null);
-  const fadeTimerRef = useRef(null);
-  const trimTimerRef = useRef(null);
   const [isMediaPlaying, setIsMediaPlaying] = useState(false);
-  const volume = element.volume ?? 1;
-  const fadeIn = element.fadeInDuration ?? 0;
-  const fadeOut = element.fadeOutDuration ?? 0;
   const trimStartSec = element.trimStartMs !== void 0 ? element.trimStartMs / 1e3 : 0;
-  const trimEndSec = element.trimEndMs !== void 0 && element.trimEndMs > 0 ? element.trimEndMs / 1e3 : 0;
   const hideWhenNotPlaying = isPresentationMode && element.hideWhenNotPlaying === true;
-  useEffect(() => {
-    return () => {
-      if (fadeTimerRef.current !== null) {
-        cancelAnimationFrame(fadeTimerRef.current);
-      }
-      if (trimTimerRef.current !== null) {
-        window.clearTimeout(trimTimerRef.current);
-      }
-    };
-  }, []);
   const { volume: playbackVolume, playbackRate } = mediaPlaybackAttributes({
     loop: element.loop,
     volume: element.volume,
@@ -525,7 +483,7 @@ function PresentationMediaController({
     if (!el) {
       return;
     }
-    const handlePlay2 = () => {
+    const handlePlay = () => {
       setIsMediaPlaying(true);
       onPlayStateChange?.(true);
     };
@@ -537,101 +495,35 @@ function PresentationMediaController({
       setIsMediaPlaying(false);
       onPlayStateChange?.(false);
     };
-    el.addEventListener("play", handlePlay2);
+    el.addEventListener("play", handlePlay);
     el.addEventListener("pause", handlePause);
     el.addEventListener("ended", handleEnded);
     return () => {
-      el.removeEventListener("play", handlePlay2);
+      el.removeEventListener("play", handlePlay);
       el.removeEventListener("pause", handlePause);
       el.removeEventListener("ended", handleEnded);
     };
   }, [onPlayStateChange]);
-  const applyFadeIn = useCallback(() => {
-    const el = mediaRef.current;
-    if (!el || fadeIn <= 0) {
-      return;
-    }
-    const startTime = performance.now();
-    const durationMs = fadeIn * 1e3;
-    el.volume = 0;
-    const tick = () => {
-      const elapsed = performance.now() - startTime;
-      const progress = Math.min(1, elapsed / durationMs);
-      el.volume = progress * volume;
-      if (progress < 1) {
-        fadeTimerRef.current = requestAnimationFrame(tick);
-      }
-    };
-    fadeTimerRef.current = requestAnimationFrame(tick);
-  }, [fadeIn, volume]);
-  const handlePlay = useCallback(() => {
+  useEffect(() => {
     const el = mediaRef.current;
     if (!el || !isPresentationMode) {
       return;
     }
-    if (trimStartSec > 0 && el.currentTime < trimStartSec) {
-      el.currentTime = trimStartSec;
-    }
-    if (fadeIn > 0) {
-      applyFadeIn();
-    }
-    if (trimEndSec > 0) {
-      const remaining = trimEndSec - el.currentTime;
-      if (remaining > 0) {
-        const fadeOutStart = Math.max(0, (remaining - fadeOut) * 1e3);
-        if (fadeOut > 0) {
-          trimTimerRef.current = window.setTimeout(() => {
-            const fadeStartTime = performance.now();
-            const fadeMs = fadeOut * 1e3;
-            const startVol = el.volume;
-            const fadeOutTick = () => {
-              const elapsed = performance.now() - fadeStartTime;
-              const progress = Math.min(1, elapsed / fadeMs);
-              el.volume = startVol * (1 - progress);
-              if (progress < 1 && !el.paused) {
-                fadeTimerRef.current = requestAnimationFrame(fadeOutTick);
-              }
-            };
-            fadeTimerRef.current = requestAnimationFrame(fadeOutTick);
-          }, fadeOutStart);
-        }
-        const stopTimer = window.setTimeout(() => {
-          if (!el.paused) {
-            el.pause();
-            el.currentTime = trimEndSec;
-          }
-        }, remaining * 1e3);
-        const prevTimer = trimTimerRef.current;
-        trimTimerRef.current = stopTimer;
-        if (prevTimer !== null) {
-          window.clearTimeout(prevTimer);
-        }
-      }
-    } else if (fadeOut > 0) {
-      const handleTimeUpdate = () => {
-        if (!Number.isFinite(el.duration)) {
-          return;
-        }
-        const timeLeft = el.duration - el.currentTime;
-        if (timeLeft <= fadeOut && timeLeft > 0) {
-          el.removeEventListener("timeupdate", handleTimeUpdate);
-          const fadeStartTime = performance.now();
-          const fadeMs = timeLeft * 1e3;
-          const startVol = el.volume;
-          const fadeOutTick = () => {
-            const elapsed = performance.now() - fadeStartTime;
-            const progress = Math.min(1, elapsed / fadeMs);
-            el.volume = startVol * (1 - progress);
-            if (progress < 1 && !el.paused) {
-              fadeTimerRef.current = requestAnimationFrame(fadeOutTick);
-            }
-          };
-          fadeTimerRef.current = requestAnimationFrame(fadeOutTick);
-        }
-      };
-      el.addEventListener("timeupdate", handleTimeUpdate);
-    }
-  }, [applyFadeIn, fadeIn, fadeOut, isPresentationMode, trimEndSec, trimStartSec]);
+    return scheduleMediaTrimAndFade(el, {
+      trimStartMs: element.trimStartMs,
+      trimEndMs: element.trimEndMs,
+      fadeInDuration: element.fadeInDuration,
+      fadeOutDuration: element.fadeOutDuration,
+      volume: playbackVolume
+    });
+  }, [
+    isPresentationMode,
+    element.trimStartMs,
+    element.trimEndMs,
+    element.fadeInDuration,
+    element.fadeOutDuration,
+    playbackVolume
+  ]);
   useEffect(() => {
     if (!isPresentationMode || !shouldAutoPlay) {
       return;
@@ -666,8 +558,10 @@ function PresentationMediaController({
       el.pause();
     }
   }, []);
+  const noopOnPlay = useCallback(() => {
+  }, []);
   return /* @__PURE__ */ jsxs("div", { className: "w-full h-full", style: wrapperStyle, children: [
-    children({ mediaRef, onPlay: handlePlay, isMediaPlaying }),
+    children({ mediaRef, onPlay: noopOnPlay, isMediaPlaying }),
     isFullScreen && isPresentationMode && isMediaPlaying && /* @__PURE__ */ jsx(
       "button",
       {
@@ -1130,7 +1024,7 @@ function wrapWithTextBuildAnimation(elementId, paraIndex, renderedSegments, para
   return spec.spans.map((span, index) => {
     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}`);
+      return /* @__PURE__ */ jsx(React7.Fragment, { children: content }, `ws-${index}`);
     }
     return /* @__PURE__ */ jsx(
       "span",
@@ -1143,13 +1037,61 @@ function wrapWithTextBuildAnimation(elementId, paraIndex, renderedSegments, para
     );
   });
 }
-function renderTabbedLine(line, ctx, keyPrefix, renderPiece, nestedStyle) {
-  const [lineLayout] = buildRunTabLines(line, ctx, nestedStyle);
+function renderUnderlineWords(text, isUnderlineWords, wordDecoration, metric, keyPrefix, inner) {
+  if (!isUnderlineWords || !text) {
+    return inner(text, keyPrefix, metric);
+  }
+  const pieces = splitWordsForUnderline(text);
+  if (pieces.length === 0) {
+    return inner(text, keyPrefix, metric);
+  }
+  const gapMetric = metric ? {
+    ...metric,
+    nestedStyle: metric.nestedStyle ? stripUnderlineDecoration(metric.nestedStyle) : void 0
+  } : void 0;
+  return pieces.map((piece, i) => {
+    const key = `${keyPrefix}-u${i}`;
+    if (!piece.underline) {
+      return /* @__PURE__ */ jsx(React7.Fragment, { children: inner(piece.text, key, gapMetric) }, key);
+    }
+    return /* @__PURE__ */ jsx("span", { style: wordDecoration, children: inner(piece.text, key, metric) }, key);
+  });
+}
+function makeSegmentPieceRenderer(needsScriptFonts, scriptFonts, baseFontFamily, isUnderlineWords, wordDecoration, metric) {
+  return (text, key) => renderUnderlineWords(
+    text,
+    isUnderlineWords,
+    wordDecoration,
+    metric,
+    key,
+    (subText, subKey, subMetric) => renderMetricPieces(
+      subText,
+      subMetric,
+      subKey,
+      (pieceText, pieceKey) => renderScriptAwareText(
+        pieceText,
+        needsScriptFonts,
+        scriptFonts,
+        baseFontFamily,
+        pieceKey,
+        subMetric?.nestedStyle
+      )
+    )
+  );
+}
+function renderTabbedLine(line, ctx, keyPrefix, renderPiece, nestedStyle, underlineWords = false) {
+  const [lineLayout] = buildRunTabLines(
+    line,
+    ctx,
+    nestedStyle,
+    void 0,
+    underlineWords
+  );
   return /* @__PURE__ */ jsx("span", { style: { display: "inline-block", whiteSpace: "nowrap" }, children: lineLayout.pieces.map((piece, i) => {
     const key = `${keyPrefix}-tab-${i}`;
-    return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React7.Fragment, { children: [
       piece.leaderStyle ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: piece.leaderStyle, children: piece.leaderText }) : null,
-      /* @__PURE__ */ jsx("span", { style: piece.style, children: renderPiece(piece.text, key) })
+      piece.words ? piece.words.map((word, w) => /* @__PURE__ */ jsx("span", { style: word.style, children: renderPiece(word.text, `${key}-w${w}`) }, `${key}-w${w}`)) : /* @__PURE__ */ jsx("span", { style: piece.style, children: renderPiece(piece.text, key) })
     ] }, key);
   }) });
 }
@@ -1167,7 +1109,7 @@ function renderScriptAwareText(text, needsScriptFonts, scriptFonts, baseFontFami
     return text;
   }
   return pieces.map(
-    (piece, i) => piece.style ? /* @__PURE__ */ jsx("span", { style: piece.style, children: piece.text }, `${keyPrefix}-r${i}`) : /* @__PURE__ */ jsx(React6.Fragment, { children: piece.text }, `${keyPrefix}-r${i}`)
+    (piece, i) => piece.style ? /* @__PURE__ */ jsx("span", { style: piece.style, children: piece.text }, `${keyPrefix}-r${i}`) : /* @__PURE__ */ jsx(React7.Fragment, { children: piece.text }, `${keyPrefix}-r${i}`)
   );
 }
 function renderMetricPieces(text, metric, keyPrefix, inner) {
@@ -1190,26 +1132,28 @@ function renderMetricPieces(text, metric, keyPrefix, inner) {
     `${keyPrefix}-w${i}`
   ));
 }
-function renderSegmentContent(elementId, segmentIndex, textValue, lines, needsScriptFonts, scriptFonts, baseFontFamily, findHighlights, tabContext, metric) {
+function renderSegmentContent(elementId, segmentIndex, textValue, lines, needsScriptFonts, scriptFonts, baseFontFamily, findHighlights, tabContext, metric, isUnderlineWords = false, wordDecoration) {
   const segHl = findHighlights?.get(segmentIndex);
+  const renderLeaf = makeSegmentPieceRenderer(
+    needsScriptFonts,
+    scriptFonts,
+    baseFontFamily,
+    isUnderlineWords,
+    wordDecoration,
+    metric
+  );
   if (!segHl || segHl.length === 0) {
     return lines.map((line, lineIndex) => {
       const lineKey = `${elementId}-seg-${segmentIndex}-line-${lineIndex}`;
-      const renderPiece = (text, key) => renderMetricPieces(
-        text,
-        metric,
-        key,
-        (pieceText, pieceKey) => renderScriptAwareText(
-          pieceText,
-          needsScriptFonts,
-          scriptFonts,
-          baseFontFamily,
-          pieceKey,
-          metric?.nestedStyle
-        )
-      );
-      return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
-        tabContext && line.includes("	") ? renderTabbedLine(line, tabContext, lineKey, renderPiece, metric?.nestedStyle) : renderPiece(line, lineKey),
+      return /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+        tabContext && line.includes("	") ? renderTabbedLine(
+          line,
+          tabContext,
+          lineKey,
+          renderLeaf,
+          metric?.nestedStyle,
+          isUnderlineWords
+        ) : renderLeaf(line, lineKey),
         lineIndex < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
       ] }, lineKey);
     });
@@ -1239,19 +1183,6 @@ function renderSegmentContent(elementId, segmentIndex, textValue, lines, needsSc
       isCurrent: false
     });
   }
-  const renderChunk = (text, key) => renderMetricPieces(
-    text,
-    metric,
-    key,
-    (pieceText, pieceKey) => renderScriptAwareText(
-      pieceText,
-      needsScriptFonts,
-      scriptFonts,
-      baseFontFamily,
-      pieceKey,
-      metric?.nestedStyle
-    )
-  );
   return chunks.map((chunk, ci) => {
     const chunkKey = `${elementId}-seg-${segmentIndex}-hl-${ci}`;
     return chunk.highlighted ? /* @__PURE__ */ jsx(
@@ -1263,10 +1194,10 @@ function renderSegmentContent(elementId, segmentIndex, textValue, lines, needsSc
           color: "inherit",
           borderRadius: 2
         },
-        children: renderChunk(chunk.text, chunkKey)
+        children: renderLeaf(chunk.text, chunkKey)
       },
       chunkKey
-    ) : /* @__PURE__ */ jsx(React6.Fragment, { children: renderChunk(chunk.text, chunkKey) }, chunkKey);
+    ) : /* @__PURE__ */ jsx(React7.Fragment, { children: renderLeaf(chunk.text, chunkKey) }, chunkKey);
   });
 }
 function renderEquationSegment(elementId, segmentIndex, equationXml, equationNumber) {
@@ -1328,11 +1259,12 @@ function renderHyperlink(run, spanNode, key, ctx) {
   }
   const requireCtrlClick = ctx.requireCtrlClick;
   const displayUrl = url.startsWith("ppaction://") ? url.replace(/^ppaction:\/\//u, "").split("?")[0] : url;
+  const targetFrame = run.hyperlink?.target;
   const follow = (modified) => {
     if (requireCtrlClick && !modified) {
       return false;
     }
-    onHyperlinkClick(url);
+    onHyperlinkClick(url, targetFrame);
     return true;
   };
   return /* @__PURE__ */ jsxs(
@@ -1448,6 +1380,16 @@ function renderParagraphRun(run, segment, ctx, keySuffix = "") {
     spanStyle.direction = runRtl ? "rtl" : "ltr";
     spanStyle.unicodeBidi = runRtl !== ctx.paragraphRtl ? "bidi-override" : "embed";
   }
+  const isUnderlineWords = Boolean(segmentStyle.underline) && segmentStyle.underlineStyle === "words";
+  const wordDecoration = isUnderlineWords ? nestedStyle ?? run.underlineWordPieces?.find((piece) => piece.style)?.style : void 0;
+  if (isUnderlineWords) {
+    const stripped = stripUnderlineDecoration(spanStyle);
+    spanStyle.textDecoration = stripped.textDecoration;
+    delete spanStyle.textDecorationStyle;
+    delete spanStyle.textDecorationThickness;
+    delete spanStyle.textUnderlineOffset;
+    delete spanStyle.textDecorationColor;
+  }
   const baseContent = renderSegmentContent(
     element.id,
     segmentIndex,
@@ -1465,7 +1407,9 @@ function renderParagraphRun(run, segment, ctx, keySuffix = "") {
       Boolean(segmentStyle.bold),
       Boolean(segmentStyle.italic)
     ),
-    metricContext
+    metricContext,
+    isUnderlineWords,
+    wordDecoration
   );
   const spanNode = /* @__PURE__ */ jsx("span", { "data-seg-idx": segmentIndex, style: spanStyle, children: renderRubyOrText(run, baseContent) }, key);
   const reflectedNode = wrapWithTextReflection(run, key, spanNode, spanStyle, baseContent);
@@ -1570,7 +1514,7 @@ function renderParagraph(para, paraIndex, paraCount, segments, ctx, subElementAn
   );
   const needsWrapper = Object.keys(paraStyle).length > 0 || marker !== null;
   if (!needsWrapper) {
-    return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React7.Fragment, { children: [
       wrappedContent,
       paraIndex < paraCount - 1 ? /* @__PURE__ */ jsx("br", {}) : null
     ] }, `${element.id}-para-${paraIndex}`);
@@ -1959,6 +1903,34 @@ function renderConnectorMarker(markerId, arrowType, color, arrowWidth, arrowLeng
     }
   );
 }
+function renderSvgGradientDefs(gradient) {
+  if (!gradient) {
+    return null;
+  }
+  if (gradient.kind === "rectPath") {
+    return /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: gradient.id, patternUnits: "objectBoundingBox", width: 1, height: 1, children: /* @__PURE__ */ jsx("image", { href: gradient.href, x: 0, y: 0, width: 1, height: 1, preserveAspectRatio: "none" }) }) });
+  }
+  const stops = gradient.stops.map((stop, index) => /* @__PURE__ */ jsx(
+    "stop",
+    {
+      offset: stop.offset,
+      stopColor: stop.color,
+      stopOpacity: typeof stop.opacity === "number" ? stop.opacity : void 0
+    },
+    index
+  ));
+  return /* @__PURE__ */ jsx("defs", { children: gradient.kind === "radial" ? /* @__PURE__ */ jsx("radialGradient", { id: gradient.id, cx: gradient.cx, cy: gradient.cy, r: gradient.r, children: stops }) : /* @__PURE__ */ jsx(
+    "linearGradient",
+    {
+      id: gradient.id,
+      x1: gradient.x1,
+      y1: gradient.y1,
+      x2: gradient.x2,
+      y2: gradient.y2,
+      children: stops
+    }
+  ) });
+}
 function joinStyle(shapeStyle) {
   const lineJoin = shapeStyle?.lineJoin === "bevel" ? "bevel" : shapeStyle?.lineJoin === "miter" ? "miter" : "round";
   const miterLimit = lineJoin === "miter" && typeof shapeStyle?.miterLimit === "number" ? Math.max(shapeStyle.miterLimit / 1e5, 1) : void 0;
@@ -1995,31 +1967,6 @@ function strokeStrands(d, keyBase, ctx) {
     `${keyBase}-s${idx}`
   ));
 }
-function gradientDefs(gradient) {
-  if (!gradient) {
-    return null;
-  }
-  const stops = gradient.stops.map((stop, idx) => /* @__PURE__ */ jsx(
-    "stop",
-    {
-      offset: stop.offset,
-      stopColor: stop.color,
-      stopOpacity: typeof stop.opacity === "number" ? stop.opacity : void 0
-    },
-    idx
-  ));
-  return /* @__PURE__ */ jsx("defs", { children: gradient.kind === "radial" ? /* @__PURE__ */ jsx("radialGradient", { id: gradient.id, cx: gradient.cx, cy: gradient.cy, r: gradient.r, children: stops }) : /* @__PURE__ */ jsx(
-    "linearGradient",
-    {
-      id: gradient.id,
-      x1: gradient.x1,
-      y1: gradient.y1,
-      x2: gradient.x2,
-      y2: gradient.y2,
-      children: stops
-    }
-  ) });
-}
 function renderCustomGeometryVector(pathData, pathWidth, pathHeight, structuredPaths, shapeStyle, hasFill, fillColor, fillOpacity, strokePaint, strokeWidth, dashArray, animatesFill = false, gradient) {
   const ctx = strokeContext(shapeStyle, strokePaint, strokeWidth, dashArray);
   const subpaths = structuredPaths && structuredPaths.length > 0 ? customGeometryPathsToSvgSubpaths(structuredPaths, pathWidth, pathHeight) : void 0;
@@ -2075,29 +2022,12 @@ function renderCustomGeometryVector(pathData, pathWidth, pathHeight, structuredP
       className: "w-full h-full pointer-events-none",
       preserveAspectRatio: "none",
       children: [
-        animatesFill ? null : gradientDefs(gradient),
+        animatesFill ? null : renderSvgGradientDefs(gradient),
         nodes
       ]
     }
   );
 }
-function renderGradientDefs(gradient) {
-  if (!gradient) {
-    return null;
-  }
-  const stops = gradient.stops.map((stop, index) => /* @__PURE__ */ jsx("stop", { offset: stop.offset, stopColor: stop.color, stopOpacity: stop.opacity }, index));
-  return /* @__PURE__ */ jsx("defs", { children: gradient.kind === "radial" ? /* @__PURE__ */ jsx("radialGradient", { id: gradient.id, cx: gradient.cx, cy: gradient.cy, r: gradient.r, children: stops }) : /* @__PURE__ */ jsx(
-    "linearGradient",
-    {
-      id: gradient.id,
-      x1: gradient.x1,
-      y1: gradient.y1,
-      x2: gradient.x2,
-      y2: gradient.y2,
-      children: stops
-    }
-  ) });
-}
 function renderVectorShape(element, hasFill, fillColor, strokeWidth, strokeColor, animatesFill, animatesStroke) {
   if (!hasShapeProperties(element)) {
     return null;
@@ -2248,7 +2178,7 @@ function renderVectorShape(element, hasFill, fillColor, strokeWidth, strokeColor
             overflow: "visible"
           },
           children: [
-            animatesFill ? null : renderGradientDefs(gradient),
+            animatesFill ? null : renderSvgGradientDefs(gradient),
             /* @__PURE__ */ jsx(
               "path",
               {
@@ -3143,7 +3073,7 @@ function renderTableFromTableData(element, textStyle, options) {
   const rowCount = tableData.rows.length;
   const columnCount = tableData.columnWidths.length;
   const selectedCell = options?.selectedCell || null;
-  const isEditable = Boolean(options?.editable);
+  const isEditable = Boolean(options?.editable) && canDrillDown(element);
   const hasCellSelectionHandler = typeof options?.onSelectCell === "function";
   const sharedCtx = {
     tableStyleMap: options?.styleCtx?.tableStyleMap,
@@ -3308,7 +3238,7 @@ function renderTableElement(element, textStyle, options) {
     return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center text-[11px] text-white/80 pointer-events-none", children: translationsEn["pptx.table.title"] });
   }
   const selectedCell = options?.selectedCell || null;
-  const isEditable = Boolean(options?.editable);
+  const isEditable = Boolean(options?.editable) && canDrillDown(element);
   const hasCellSelectionHandler = typeof options?.onSelectCell === "function";
   const tableEl = element;
   const xmlSelectionRect = (() => {
@@ -3664,16 +3594,50 @@ function renderChartViewModel(elementId, vm, preserveAspectRatio = "none") {
       viewBox: `0 0 ${vm.svgWidth} ${vm.svgHeight}`,
       preserveAspectRatio,
       children: [
-        vm.areaFill && /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: vm.svgWidth, height: vm.svgHeight, fill: vm.areaFill }),
+        vm.defs && vm.defs.length > 0 && /* @__PURE__ */ jsx("defs", { children: vm.defs.map((def, i) => /* @__PURE__ */ jsx(
+          "pattern",
+          {
+            id: def.id,
+            patternUnits: def.patternUnits,
+            x: def.x,
+            y: def.y,
+            width: def.width,
+            height: def.height,
+            children: /* @__PURE__ */ jsx(
+              "image",
+              {
+                href: def.href,
+                x: 0,
+                y: 0,
+                width: def.width,
+                height: def.height,
+                preserveAspectRatio: def.preserveAspectRatio
+              }
+            )
+          },
+          `${elementId}-def-${i}`
+        )) }),
+        vm.areaFill && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: 0,
+            width: vm.svgWidth,
+            height: vm.svgHeight,
+            rx: vm.areaRadius,
+            fill: vm.areaFill
+          }
+        ),
         vm.title && /* @__PURE__ */ jsx(
           "text",
           {
             x: vm.titleX,
             y: vm.titleY,
             textAnchor: "middle",
-            fontSize: 12,
-            fontWeight: 600,
-            fill: "#1e293b",
+            fontSize: vm.titleStyle?.fontSize ?? 12,
+            fontWeight: vm.titleStyle?.fontWeight ?? 600,
+            fontFamily: vm.titleStyle?.fontFamily,
+            fill: vm.titleStyle?.fill ?? "#1e293b",
             "data-chart-part": "title",
             children: vm.title
           }
@@ -3867,4 +3831,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_SECTION_GROUP_ID, DEFAULT_STROKE_COLOR, DEFAULT_TABLE_COLUMNS, DEFAULT_TABLE_ROWS, DEFAULT_TEXT_COLOR, DEFAULT_TEXT_FONT_SIZE, GRID_SIZE, HYPERLINK_COLOR, MIN_ELEMENT_SIZE, SHAPE_PRESETS, SHORTCUT_REFERENCE_ITEMS, SLIDE_NAV_THUMBNAIL_WIDTH, STROKE_DASH_OPTIONS2 as 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, getAnimationInitialStyle2 as getAnimationInitialStyle, getConnectorPathGeometry, getCropShapeClipPath2 as getCropShapeClipPath, getDuotoneColors, getImageRenderStyle, getImageSurfaceMaskStyle, getImageSurfaceStyle, getImageTilingStyle2 as getImageTilingStyle, getShapeVisualStyle, getTextLayoutStyle, getTextStyleForElement, getTextWarpStyle, hasDagDuotoneEffect, isConnectorOrLineElement, 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_SECTION_GROUP_ID, DEFAULT_STROKE_COLOR, DEFAULT_TABLE_COLUMNS, DEFAULT_TABLE_ROWS, DEFAULT_TEXT_COLOR, DEFAULT_TEXT_FONT_SIZE, GRID_SIZE, HYPERLINK_COLOR, MIN_ELEMENT_SIZE, SHAPE_PRESETS, SHORTCUT_REFERENCE_ITEMS, SLIDE_NAV_THUMBNAIL_WIDTH, STROKE_DASH_OPTIONS2 as STROKE_DASH_OPTIONS, TOOLBAR_SECTIONS, UNGROUPED_SECTION_ID, ZOOM_TO_SELECTION_PADDING, build3DExtrusionData2 as build3DExtrusionData, buildLineGlowFilter, buildLineShadowCss, buildNotesPdf, buildPdfFromImageData, buildReactChartViewModel, buildTextBody3DSceneStyle2 as buildTextBody3DSceneStyle, cloneHistorySnapshot2 as cloneHistorySnapshot, cn, getAnimationInitialStyle2 as getAnimationInitialStyle, getConnectorPathGeometry, getCropShapeClipPath2 as getCropShapeClipPath, getDuotoneColors, getImageRenderStyle, getImageSurfaceMaskStyle, getImageSurfaceStyle, getImageTilingStyle2 as getImageTilingStyle, getShapeVisualStyle, getTextLayoutStyle, getTextStyleForElement, getTextWarpStyle, hasDagDuotoneEffect, isConnectorOrLineElement, renderChartElement, renderConnectorMarker, renderDagDuotoneSvgFilter, renderMediaElement, renderTableElement, renderTextSegments, renderVectorShape, shouldRenderFallbackLabel, startMotionPathPreview, startPreviewAnimation, stopPreviewAnimation };