pptx-react-viewer 3.5.4 → 3.6.0

package/dist/{chunk-U52MKWVA.mjs → chunk-WX7AFFBZ.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-ZUSYUWOV.mjs';
+import { translationsEn } from './chunk-TGCSZXOG.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';
@@ -104,7 +104,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 +330,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 +474,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 +499,7 @@ function PresentationMediaController({
     if (!el) {
       return;
     }
-    const handlePlay2 = () => {
+    const handlePlay = () => {
       setIsMediaPlaying(true);
       onPlayStateChange?.(true);
     };
@@ -537,101 +511,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 +574,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 +1040,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,11 +1053,53 @@ function wrapWithTextBuildAnimation(elementId, paraIndex, renderedSegments, para
     );
   });
 }
+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) {
   const [lineLayout] = buildRunTabLines(line, ctx, nestedStyle);
   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) })
     ] }, key);
@@ -1167,7 +1119,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 +1142,21 @@ 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) : renderLeaf(line, lineKey),
         lineIndex < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
       ] }, lineKey);
     });
@@ -1239,19 +1186,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 +1197,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 +1262,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 +1383,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 : 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 +1410,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 +1517,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}`);
@@ -3143,7 +3090,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 +3255,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 +3611,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
           }