pptx-react-viewer 4.27.0 → 4.30.0

package/dist/chunk-ZIBAN7RL.mjs

@@ -0,0 +1,3888 @@
+import { __reExport } from './chunk-GDQSMJQZ.mjs';
+import { SHAPE_PRESET_DEFS, VIEWER_SHORTCUT_REFERENCE, STROKE_DASH_OPTIONS as STROKE_DASH_OPTIONS$1, getAnimationInitialStyle as getAnimationInitialStyle$1, cloneHistorySnapshot as cloneHistorySnapshot$1, getImageFitStyle, getImageFillCounterTransform, getComputedFillStyle, getCropShapeClipPath as getCropShapeClipPath$1, getImageTilingStyle as getImageTilingStyle$1, mediaPlaybackAttributes, getOnlineVideoEmbed, ONLINE_VIDEO_IFRAME_SANDBOX, ONLINE_VIDEO_IFRAME_ALLOW, buildTextBlockStyle, toCssWritingMode, toCssTextOrientation, toCssVerticalDirection, buildTextBodyLayoutStyle, buildTextBody3DSceneStyle as buildTextBody3DSceneStyle$1, buildParagraphs, followingText, colorWithOpacity, normalizeHexColor, hexToRgbUnit, build3DExtrusionData as build3DExtrusionData$1, getComputedEffectStyle, getComputedStrokeStyle, getAnimationColorBaseStyle, isStrokeOnlyPresetElement, resolveShapeGeometry, normalizeStrokeDashType, getSvgStrokeDasharray, buildSvgGradientDef, buildStrokeOutline, getPresetShapeVectorGeometry, isWedgeCalloutPresetShape, svgGradientFillRef, svgLineCap, getCompoundLineOffsets, getCompoundLineWidths, canDrillDown, computeSelectionRect, DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY$1, cellStyleToCss, TABLE_CELL_TEXT_DEFAULTS, rectToCells, isCellInRect, tableContainerCss, buildChartViewModel, resolveChartKind, chartPreserveAspectRatio, buildNotesPdfBytes, buildTiledSlidesPdfBytes, buildPreviewAnimation, measurePreviewGeometry, buildMotionPathPreview, mediaFallbackVisual, scheduleMediaTrimAndFade, registerCrossSlideAudio, shouldShowMediaFullscreenStopButton, withInlineListDecorationDefaults, segmentStyleToCss, resolveAutoFitFontScale, applyUnderlineVariant, nestedTextDecorationStyle, scaleFontSizeForAutoFit, resolveFontKerning, resolveScriptFontSet, hasDistinctScriptFonts, authoredLetterSpacingPx, eastAsianBreaksForRun, pieceLetterSpacing, resolveMetricTrackingPx, hollowTextFillStyle, splitsUnderlineIntoWords, stripUnderlineDecoration, buildTabContext, TEXT_BUILD_ID_SEP, buildTextBuildSpec, textBuildSpanStyle, apply3dEffects as apply3dEffects$1, buildSubpathPaints, computeColumnBoundaries, getTableCellBandStyle as getTableCellBandStyle$1, parseDrawingColor, parseDrawingColorOpacity, getCellDiagonalBorders as getCellDiagonalBorders$1, cellParagraphBlocks, resolveChartPalette, computeChartLegendLayout, resolveChartSvgDef, mediaFallbackIcon, mediaFallbackLabelKey, MEDIA_CHROME_ATTRIBUTE, convertOmmlToMathMl, sanitizeMathMl, tableCellCss, computeResizedColumnWidths, computeResizedRowHeight, DEFAULT_ROW_HEIGHT, buildRectPathGradient, cellRunStyle, buildRunTabLines, chartPartToAttrs, splitWordsForUnderline, splitRunForMetrics, splitEastAsianBreaks, splitRunByScriptFont } from 'ooxml-ui/pptx';
+export { ACTION_BUTTON_PRESETS, DEFAULT_COLOR_CHANGE_TOLERANCE, INK_REPLAY_KEYFRAMES, MAX_ZOOM_SCALE, MIN_ZOOM_SCALE, SHAPE_QUICK_STYLES, SLIDE_TRANSITION_OPTIONS, TABLE_STYLE_PRESETS, applyColorChange, applyFormatToElement, applyReroutedConnectors, buildCacheKey, buildContentPartStrokes, buildCssGradientFromShapeStyle, buildInkGroupStrokes, buildSaveSlides, canvasToJpegData, clampCropValue, cloneSlide, cloneTemplateElementsBySlideId, colorWithOpacity, comparePresentation, computeHandoutLayout, computeSnapToShape, copyFormatFromElement, formatCommentTimestamp, generateNoteLineCount, getAriaLabel, getAriaRole, getAriaRoleDescription, getCachedResult, getCompoundLineOffsets, getCompoundLineWidths, getContentPartReplayStyles, getElementLabel, getElementTransform, getElementTransformWithoutRotation, getImageEffectsFilter, getImageEffectsOpacity, getInkReplayStyles, getPatternSvg, getPrintableArea, getShapeAdjustmentHandleDescriptors, getSvgStrokeDasharray, getTextCompensationTransform, hasCopyableFormat, isEditableTextElement, isImageTiled, isPpactionUrl, isTemplateElementId, isUrlSafe, makeCloneId, mergeCells, normalizeHexColor, normalizeStrokeDashType, openNativeEyeDropper, parsePpactionUrl, partitionTemplateElements, rerouteConnectorsForMovedElements, safeOpenUrl, sanitizeGradientStops, setCachedResult, splitCell, stopAllPersistentAudio, substituteFieldText } from 'ooxml-ui/pptx';
+import * as pptx_star from 'ooxml-core/pptx';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import React8, { 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 { translationsEn } from 'ooxml-ui/pptx/i18n';
+import { useTranslation } from 'react-i18next';
+
+function getAnimationInitialStyle(preset, nativeAnimation) {
+  return getAnimationInitialStyle$1(preset, nativeAnimation);
+}
+
+// ../core/dist/index.mjs
+var dist_exports = {};
+__reExport(dist_exports, pptx_star);
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function cloneHistorySnapshot(snapshot) {
+  return cloneHistorySnapshot$1(snapshot);
+}
+var DEFAULT_CANVAS_WIDTH = 1280;
+var DEFAULT_CANVAS_HEIGHT = 720;
+var MIN_ELEMENT_SIZE = 12;
+var EMU_PER_PX = 9525;
+var DEFAULT_BODY_INSET_TB_PX = 45720 / 9525;
+var DEFAULT_TEXT_COLOR = "#111827";
+var DEFAULT_FILL_COLOR = "#3b82f6";
+var DEFAULT_STROKE_COLOR = "#1f2937";
+var DEFAULT_FONT_FAMILY = '"Segoe UI", "Helvetica Neue", Arial, sans-serif';
+var DEFAULT_TEXT_FONT_SIZE = 24;
+var HYPERLINK_COLOR = "#0563C1";
+var DEFAULT_TABLE_ROWS = 3;
+var DEFAULT_TABLE_COLUMNS = 3;
+var ZOOM_TO_SELECTION_PADDING = 96;
+var GRID_SIZE = 8;
+var SLIDE_NAV_THUMBNAIL_WIDTH = 156;
+var UNGROUPED_SECTION_ID = "__ungrouped__";
+var DEFAULT_SECTION_GROUP_ID = "default";
+var TOOLBAR_SECTIONS = [
+  { id: "file", labelKey: "pptx.ribbon.tab.file" },
+  { id: "home", labelKey: "pptx.ribbon.tab.home" },
+  { id: "insert", labelKey: "pptx.ribbon.tab.insert" },
+  { id: "draw", labelKey: "pptx.ribbon.tab.draw" },
+  { id: "design", labelKey: "pptx.ribbon.tab.design" },
+  { id: "transitions", labelKey: "pptx.ribbon.tab.transitions" },
+  { id: "animations", labelKey: "pptx.ribbon.tab.animations" },
+  { id: "slideShow", labelKey: "pptx.ribbon.tab.slideShow" },
+  { id: "record", labelKey: "pptx.ribbon.tab.record" },
+  { id: "review", labelKey: "pptx.ribbon.tab.review" },
+  { id: "view", labelKey: "pptx.ribbon.tab.view" },
+  { id: "help", labelKey: "pptx.ribbon.tab.help" }
+];
+var SHORTCUT_REFERENCE_ITEMS = VIEWER_SHORTCUT_REFERENCE;
+var ANIMATION_PRESET_OPTIONS = [
+  { value: "fadeIn", label: "Fade In", i18nKey: "pptx.animation.preset.fadeIn" },
+  { value: "flyIn", label: "Fly In", i18nKey: "pptx.animation.preset.flyIn" },
+  { value: "zoomIn", label: "Zoom In", i18nKey: "pptx.animation.preset.zoomIn" },
+  { value: "fadeOut", label: "Fade Out", i18nKey: "pptx.animation.preset.fadeOut" },
+  { value: "flyOut", label: "Fly Out", i18nKey: "pptx.animation.preset.flyOut" },
+  { value: "zoomOut", label: "Zoom Out", i18nKey: "pptx.animation.preset.zoomOut" },
+  { value: "spin", label: "Spin", i18nKey: "pptx.animation.preset.spin" },
+  { value: "pulse", label: "Pulse", i18nKey: "pptx.animation.preset.pulse" },
+  { value: "colorWave", label: "Color Wave", i18nKey: "pptx.animation.preset.colorWave" },
+  { value: "bounce", label: "Bounce", i18nKey: "pptx.animation.preset.bounce" },
+  { value: "flash", label: "Flash", i18nKey: "pptx.animation.preset.flash" },
+  { value: "growShrink", label: "Grow/Shrink", i18nKey: "pptx.animation.preset.growShrink" },
+  { value: "teeter", label: "Teeter", i18nKey: "pptx.animation.preset.teeter" }
+];
+var GLYPH_COMPONENTS = {
+  square: LuSquare,
+  circle: LuCircle,
+  database: LuDatabase,
+  diamond: LuDiamond,
+  minus: LuMinus,
+  moveRight: LuMoveRight,
+  plus: LuPlus,
+  triangle: LuTriangle
+};
+var SHAPE_PRESETS = SHAPE_PRESET_DEFS.map(
+  (def) => ({
+    type: def.type,
+    label: def.label,
+    i18nKey: def.i18nKey,
+    icon: React8.createElement(GLYPH_COMPONENTS[def.glyph], {
+      className: def.glyphClass ? `w-3.5 h-3.5 ${def.glyphClass}` : "w-3.5 h-3.5"
+    })
+  })
+);
+var CONNECTOR_ARROW_OPTIONS = [
+  { value: "none", label: "None", i18nKey: "pptx.arrowhead.none" },
+  { value: "triangle", label: "Triangle", i18nKey: "pptx.arrowhead.triangle" },
+  { value: "stealth", label: "Stealth", i18nKey: "pptx.arrowhead.stealth" },
+  { value: "diamond", label: "Diamond", i18nKey: "pptx.arrowhead.diamond" },
+  { value: "oval", label: "Oval", i18nKey: "pptx.arrowhead.oval" },
+  { value: "arrow", label: "Open Arrow", i18nKey: "pptx.arrowhead.openArrow" }
+];
+var ARROW_SIZE_OPTIONS = [
+  { value: "sm", label: "Small", i18nKey: "pptx.connectorOptions.sizeSmall" },
+  { value: "med", label: "Medium", i18nKey: "pptx.connectorOptions.sizeMedium" },
+  { value: "lg", label: "Large", i18nKey: "pptx.connectorOptions.sizeLarge" }
+];
+var STROKE_DASH_OPTIONS = STROKE_DASH_OPTIONS$1;
+
+// src/viewer/utils/shape-types.tsx
+function getShapeType(shapeType) {
+  if (!shapeType) {
+    return "rect";
+  }
+  const normalized = shapeType.toLowerCase();
+  if (normalized === "rect") {
+    return "rect";
+  }
+  if (normalized === "roundrect") {
+    return "roundRect";
+  }
+  if (normalized === "ellipse" || normalized === "oval") {
+    return "ellipse";
+  }
+  if (normalized === "cylinder" || normalized === "can") {
+    return "cylinder";
+  }
+  if (normalized === "triangle") {
+    return "triangle";
+  }
+  if (normalized === "rttriangle") {
+    return "rtTriangle";
+  }
+  if (normalized === "diamond") {
+    return "diamond";
+  }
+  if (normalized === "line") {
+    return "line";
+  }
+  if (normalized === "parallelogram") {
+    return "parallelogram";
+  }
+  if (normalized === "trapezoid") {
+    return "trapezoid";
+  }
+  if (normalized === "pentagon") {
+    return "pentagon";
+  }
+  if (normalized === "hexagon") {
+    return "hexagon";
+  }
+  if (normalized === "octagon") {
+    return "octagon";
+  }
+  if (normalized === "chevron") {
+    return "chevron";
+  }
+  if (normalized === "star5") {
+    return "star5";
+  }
+  if (normalized === "star6") {
+    return "star6";
+  }
+  if (normalized === "star8") {
+    return "star8";
+  }
+  if (normalized === "plus") {
+    return "plus";
+  }
+  if (normalized === "heart") {
+    return "heart";
+  }
+  if (normalized === "cloud") {
+    return "cloud";
+  }
+  if (normalized === "sun") {
+    return "sun";
+  }
+  if (normalized === "moon") {
+    return "moon";
+  }
+  if (normalized === "pie") {
+    return "pie";
+  }
+  if (normalized === "plaque") {
+    return "plaque";
+  }
+  if (normalized === "teardrop") {
+    return "teardrop";
+  }
+  if (normalized === "rtarrow" || normalized === "rightarrow") {
+    return "rtArrow";
+  }
+  if (normalized === "leftarrow") {
+    return "leftArrow";
+  }
+  if (normalized === "uparrow") {
+    return "upArrow";
+  }
+  if (normalized === "downarrow") {
+    return "downArrow";
+  }
+  if (normalized.includes("connector")) {
+    return "connector";
+  }
+  if (normalized === "connector") {
+    return "connector";
+  }
+  return "rect";
+}
+function isConnectorOrLineElement(element) {
+  if (element.type === "connector") {
+    return true;
+  }
+  if (!(0, dist_exports.hasShapeProperties)(element)) {
+    return false;
+  }
+  const st = getShapeType(element.shapeType);
+  return st === "connector" || st === "line" || element.shapeType === "line";
+}
+function getImageMaskStyle(element) {
+  if (!(0, dist_exports.hasShapeProperties)(element)) {
+    return void 0;
+  }
+  const geometry = resolveShapeGeometry(element);
+  if (geometry.kind === "borderRadius") {
+    return { borderRadius: geometry.radius };
+  }
+  return geometry.kind === "clipPath" ? { clipPath: geometry.clipPath } : void 0;
+}
+function getImageRenderStyle(element) {
+  const fit = getImageFitStyle(element);
+  const counterTransform = getImageFillCounterTransform(element, Boolean(fit.transform));
+  return {
+    // A translated/scaled crop, or a rotWithShape=false counter-transform,
+    // must be masked by the stationary wrapper, not by the moving/counter-
+    // transformed bitmap itself.
+    ...fit.transform || counterTransform ? {} : getImageMaskStyle(element) || {},
+    ...fit,
+    ...counterTransform ? { transform: counterTransform, transformOrigin: "center" } : {}
+  };
+}
+function getImageSurfaceMaskStyle(element) {
+  const mask = getImageMaskStyle(element);
+  return {
+    overflow: "hidden",
+    borderRadius: mask?.borderRadius,
+    clipPath: mask?.clipPath ?? getCropShapeClipPath(element)
+  };
+}
+function getImageSurfaceStyle(element) {
+  const fill = (0, dist_exports.hasShapeProperties)(element) ? getComputedFillStyle(element) : void 0;
+  return {
+    position: "absolute",
+    inset: 0,
+    ...getImageSurfaceMaskStyle(element),
+    backgroundColor: fill?.backgroundColor ?? "transparent",
+    backgroundImage: fill?.backgroundImage,
+    backgroundRepeat: fill?.backgroundRepeat,
+    backgroundSize: fill?.backgroundSize,
+    backgroundPosition: fill?.backgroundPosition
+  };
+}
+function getCropShapeClipPath(element) {
+  if (!(0, dist_exports.isImageLikeElement)(element)) {
+    return void 0;
+  }
+  return getCropShapeClipPath$1(element.cropShape, element.width, element.height);
+}
+function getImageTilingStyle(element, nativeSize) {
+  return getImageTilingStyle$1(element, nativeSize);
+}
+
+// src/viewer/utils/geometry-image.ts
+function shouldRenderFallbackLabel(element, isTextElement) {
+  if (isTextElement) {
+    return false;
+  }
+  if (element.type === "shape" || element.type === "connector") {
+    return false;
+  }
+  if (element.type === "picture" || element.type === "image") {
+    return false;
+  }
+  if (element.type === "table") {
+    return false;
+  }
+  if (element.type === "media") {
+    return false;
+  }
+  if (element.type === "contentPart") {
+    return false;
+  }
+  if (element.type === "model3d") {
+    return false;
+  }
+  if (element.type === "ole") {
+    const previewData = element.previewImageData ?? element.previewImage;
+    return !previewData;
+  }
+  return element.type === "chart" || element.type === "smartArt" || element.type === "unknown";
+}
+function ensureArrayValue(value) {
+  if (!value) {
+    return [];
+  }
+  return Array.isArray(value) ? value : [value];
+}
+function buildTrimFragment(element) {
+  const start = element.trimStartMs;
+  if (start === void 0 || start <= 0) {
+    return "";
+  }
+  return `#t=${(start / 1e3).toFixed(3)}`;
+}
+function useMediaMetadataExtraction(mediaRef, element) {
+  const [metadata, setMetadata] = useState(element.metadata);
+  useEffect(() => {
+    const el = mediaRef.current;
+    if (!el) {
+      return;
+    }
+    if (element.metadata?.duration !== void 0) {
+      setMetadata(element.metadata);
+      return;
+    }
+    const extract = () => {
+      if (!Number.isFinite(el.duration) || el.duration === 0) {
+        return;
+      }
+      const meta = {
+        duration: el.duration
+      };
+      if (el instanceof HTMLVideoElement) {
+        if (el.videoWidth > 0) {
+          meta.videoWidth = el.videoWidth;
+        }
+        if (el.videoHeight > 0) {
+          meta.videoHeight = el.videoHeight;
+        }
+      }
+      const sourceEl = el.querySelector("source");
+      if (sourceEl?.type) {
+        meta.codecInfo = sourceEl.type;
+      }
+      element.metadata = meta;
+      setMetadata(meta);
+    };
+    el.addEventListener("loadedmetadata", extract);
+    if (el.readyState >= 1) {
+      extract();
+    }
+    return () => {
+      el.removeEventListener("loadedmetadata", extract);
+    };
+  }, [mediaRef, element]);
+  return metadata;
+}
+function CaptionTrackRenderer({
+  captionTracks
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: captionTracks.map((track) => {
+    const trackSrc = track.src ?? (track.content ? `data:text/vtt;charset=utf-8,${encodeURIComponent(track.content)}` : void 0);
+    if (!trackSrc) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "track",
+      {
+        kind: track.kind,
+        label: track.label,
+        srcLang: track.language,
+        src: trackSrc,
+        default: track.isDefault
+      },
+      track.id
+    );
+  }) });
+}
+function VideoWithMetadata({
+  element,
+  mediaRef,
+  onPlay,
+  dataUrl,
+  trimFragment,
+  mediaMimeType,
+  posterUrl,
+  shouldLoop,
+  shouldAutoPlay,
+  isFullScreen,
+  isPresentationMode,
+  showTransport
+}) {
+  useMediaMetadataExtraction(mediaRef, element);
+  const captionTracks = element.captionTracks ?? [];
+  return /* @__PURE__ */ jsxs(
+    "video",
+    {
+      ref: mediaRef,
+      className: "w-full h-full pointer-events-auto",
+      style: isFullScreen ? { objectFit: "cover" } : getImageFitStyle(element),
+      controls: showTransport,
+      preload: "metadata",
+      playsInline: true,
+      autoPlay: shouldAutoPlay,
+      muted: shouldAutoPlay && !isPresentationMode,
+      poster: posterUrl,
+      loop: shouldLoop,
+      onPlay,
+      crossOrigin: captionTracks.length > 0 ? "anonymous" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("source", { src: `${dataUrl}${trimFragment}`, type: mediaMimeType || "video/mp4" }),
+        captionTracks.length > 0 && /* @__PURE__ */ jsx(CaptionTrackRenderer, { captionTracks })
+      ]
+    }
+  );
+}
+function AudioWithMetadata({
+  element,
+  mediaRef,
+  onPlay,
+  dataUrl,
+  trimFragment,
+  mediaMimeType,
+  shouldLoop,
+  shouldAutoPlay,
+  showTransport
+}) {
+  useMediaMetadataExtraction(mediaRef, element);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center p-2 pointer-events-auto", children: /* @__PURE__ */ jsx(
+    "audio",
+    {
+      ref: mediaRef,
+      className: "w-full",
+      controls: showTransport,
+      preload: "metadata",
+      autoPlay: shouldAutoPlay,
+      loop: shouldLoop,
+      onPlay,
+      children: /* @__PURE__ */ jsx("source", { src: `${dataUrl}${trimFragment}`, type: mediaMimeType || "audio/mpeg" })
+    }
+  ) });
+}
+function PresentationMediaController({
+  element,
+  isPresentationMode,
+  shouldAutoPlay,
+  resolvedDataUrl,
+  isFullScreen,
+  onPlayStateChange,
+  children
+}) {
+  const { t } = useTranslation();
+  const mediaRef = useRef(null);
+  const [isMediaPlaying, setIsMediaPlaying] = useState(false);
+  const trimStartSec = element.trimStartMs !== void 0 ? element.trimStartMs / 1e3 : 0;
+  const hideWhenNotPlaying = isPresentationMode && element.hideWhenNotPlaying === true;
+  const { volume: playbackVolume, playbackRate } = mediaPlaybackAttributes({
+    loop: element.loop,
+    volume: element.volume,
+    playbackSpeed: element.playbackSpeed
+  });
+  useEffect(() => {
+    const el = mediaRef.current;
+    if (el) {
+      el.volume = playbackVolume;
+    }
+  }, [playbackVolume]);
+  useEffect(() => {
+    const el = mediaRef.current;
+    if (el) {
+      el.playbackRate = playbackRate;
+    }
+  }, [playbackRate]);
+  useEffect(() => {
+    const el = mediaRef.current;
+    if (!el) {
+      return;
+    }
+    const handlePlay = () => {
+      setIsMediaPlaying(true);
+      onPlayStateChange?.(true);
+    };
+    const handlePause = () => {
+      setIsMediaPlaying(false);
+      onPlayStateChange?.(false);
+    };
+    const handleEnded = () => {
+      setIsMediaPlaying(false);
+      onPlayStateChange?.(false);
+    };
+    el.addEventListener("play", handlePlay);
+    el.addEventListener("pause", handlePause);
+    el.addEventListener("ended", handleEnded);
+    return () => {
+      el.removeEventListener("play", handlePlay);
+      el.removeEventListener("pause", handlePause);
+      el.removeEventListener("ended", handleEnded);
+    };
+  }, [onPlayStateChange]);
+  useEffect(() => {
+    const el = mediaRef.current;
+    if (!el || !isPresentationMode) {
+      return;
+    }
+    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;
+    }
+    if (element.playAcrossSlides && element.mediaType === "audio") {
+      const dataUrl = element.mediaData ?? resolvedDataUrl;
+      if (registerCrossSlideAudio(element, dataUrl)) {
+        return;
+      }
+    }
+    const el = mediaRef.current;
+    if (!el) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      if (trimStartSec > 0) {
+        el.currentTime = trimStartSec;
+      }
+      void el.play().catch(() => {
+      });
+    }, 100);
+    return () => window.clearTimeout(timer);
+  }, [isPresentationMode, shouldAutoPlay, element, resolvedDataUrl, trimStartSec]);
+  const wrapperStyle = hideWhenNotPlaying ? {
+    opacity: isMediaPlaying ? 1 : 0,
+    transition: "opacity 0.3s ease",
+    pointerEvents: isMediaPlaying ? "auto" : "none"
+  } : {};
+  const handleStopFullScreen = useCallback(() => {
+    const el = mediaRef.current;
+    if (el && !el.paused) {
+      el.pause();
+    }
+  }, []);
+  const noopOnPlay = useCallback(() => {
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full", style: wrapperStyle, children: [
+    children({ mediaRef, onPlay: noopOnPlay, isMediaPlaying }),
+    shouldShowMediaFullscreenStopButton({
+      fullScreen: isFullScreen,
+      presenting: isPresentationMode,
+      playing: isMediaPlaying
+    }) && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "absolute bottom-3 right-3 z-30 rounded-full bg-black/50 hover:bg-black/70 text-white/80 hover:text-white p-2 transition-colors pointer-events-auto",
+        onClick: handleStopFullScreen,
+        "aria-label": t("pptx.media.stopFullscreenAria"),
+        children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1" }) })
+      }
+    )
+  ] });
+}
+function label(key) {
+  return key === void 0 ? void 0 : translationsEn[key];
+}
+function FallbackIcon({
+  paths,
+  size,
+  className
+}) {
+  if (paths.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      className,
+      children: paths.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+    }
+  );
+}
+function Badge({
+  visual,
+  element
+}) {
+  if (visual.badge === "none") {
+    return null;
+  }
+  const isMissing = visual.badge === "missing";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `absolute inset-0 flex flex-col items-center justify-center ${isMissing ? "gap-1" : ""}`,
+      ...{ [MEDIA_CHROME_ATTRIBUTE]: visual.badge },
+      children: [
+        /* @__PURE__ */ jsx(
+          FallbackIcon,
+          {
+            paths: mediaFallbackIcon(visual, element.mediaType),
+            size: isMissing ? 32 : 48,
+            className: isMissing ? "text-white/60" : "text-white/80 drop-shadow-md"
+          }
+        ),
+        isMissing && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/60", children: label(mediaFallbackLabelKey(visual, element.mediaType)) })
+      ]
+    }
+  );
+}
+function Placeholder({
+  visual,
+  element
+}) {
+  if (visual.placeholder === "none") {
+    return null;
+  }
+  const isMissing = visual.placeholder === "missing";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `w-full h-full flex flex-col items-center justify-center gap-1 pointer-events-none rounded ${isMissing ? "bg-black/30 border border-dashed border-white/20" : element.mediaType === "audio" ? "bg-black/10" : "bg-black/20"}`,
+      ...{ [MEDIA_CHROME_ATTRIBUTE]: visual.placeholder },
+      children: [
+        /* @__PURE__ */ jsx(
+          FallbackIcon,
+          {
+            paths: mediaFallbackIcon(visual, element.mediaType),
+            size: isMissing ? 36 : element.mediaType === "audio" ? 24 : 32,
+            className: isMissing ? "text-white/50" : "text-white/70"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: `text-[10px] ${isMissing ? "text-white/50" : "text-white/70"}`, children: label(mediaFallbackLabelKey(visual, element.mediaType)) })
+      ]
+    }
+  );
+}
+function renderMediaFallback({
+  element,
+  posterUrl,
+  surface
+}) {
+  const visual = mediaFallbackVisual(surface, {
+    hasPoster: Boolean(posterUrl),
+    missing: element.mediaMissing === true
+  });
+  if (visual.poster && posterUrl) {
+    return /* @__PURE__ */ jsxs("div", { className: "w-full h-full relative pointer-events-none", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: posterUrl,
+          alt: visual.dimPoster ? translationsEn["pptx.media.posterAlt"] : translationsEn["pptx.media.videoPosterAlt"],
+          className: `w-full h-full${visual.dimPoster ? " opacity-50" : ""}`,
+          style: getImageFitStyle(element)
+        }
+      ),
+      /* @__PURE__ */ jsx(Badge, { visual, element })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Placeholder, { visual, element });
+}
+function renderMediaElement(element, mediaDataUrls, options) {
+  if (element.type !== "media") {
+    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.media.title"] });
+  }
+  const mediaType = element.mediaType;
+  const mediaPath = element.mediaPath;
+  const mediaMimeType = element.mediaMimeType;
+  const dataUrl = element.mediaData ?? (mediaPath ? mediaDataUrls.get(mediaPath) : void 0);
+  const trimFragment = buildTrimFragment(element);
+  const posterUrl = element.posterFrameData ?? void 0;
+  const shouldLoop = mediaPlaybackAttributes(element).loop;
+  const shouldAutoPlay = options?.autoPlay === true || element.autoPlay === true;
+  const isFullScreen = options?.fullScreen === true;
+  const isPresentationMode = options?.isPresentationMode === true;
+  const showTransport = options?.showTransport ?? !isPresentationMode;
+  const surface = {
+    presenting: isPresentationMode,
+    preview: options?.preview === true
+  };
+  if (element.mediaMissing) {
+    return renderMediaFallback({ element, posterUrl, surface });
+  }
+  if (mediaType === "video") {
+    const onlineVideo = getOnlineVideoEmbed(element);
+    if (onlineVideo) {
+      return /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src: onlineVideo.embedUrl,
+          title: translationsEn["pptx.media.onlineVideoTitle"],
+          className: "w-full h-full border-0 pointer-events-auto",
+          allow: ONLINE_VIDEO_IFRAME_ALLOW,
+          allowFullScreen: true,
+          sandbox: ONLINE_VIDEO_IFRAME_SANDBOX
+        }
+      );
+    }
+    if (dataUrl) {
+      return /* @__PURE__ */ jsx(
+        PresentationMediaController,
+        {
+          element,
+          isPresentationMode,
+          shouldAutoPlay,
+          resolvedDataUrl: dataUrl,
+          isFullScreen,
+          onPlayStateChange: options?.onPlayStateChange,
+          children: ({ mediaRef, onPlay }) => /* @__PURE__ */ jsx(
+            VideoWithMetadata,
+            {
+              element,
+              mediaRef,
+              onPlay,
+              dataUrl,
+              trimFragment,
+              mediaMimeType,
+              posterUrl,
+              shouldLoop,
+              shouldAutoPlay,
+              isFullScreen,
+              isPresentationMode,
+              showTransport
+            }
+          )
+        }
+      );
+    }
+    return renderMediaFallback({ element, posterUrl, surface });
+  }
+  if (mediaType === "audio") {
+    if (dataUrl) {
+      return /* @__PURE__ */ jsx(
+        PresentationMediaController,
+        {
+          element,
+          isPresentationMode,
+          shouldAutoPlay,
+          resolvedDataUrl: dataUrl,
+          isFullScreen: false,
+          onPlayStateChange: options?.onPlayStateChange,
+          children: ({ mediaRef, onPlay }) => /* @__PURE__ */ jsx(
+            AudioWithMetadata,
+            {
+              element,
+              mediaRef,
+              onPlay,
+              dataUrl,
+              trimFragment,
+              mediaMimeType,
+              shouldLoop,
+              shouldAutoPlay,
+              showTransport
+            }
+          )
+        }
+      );
+    }
+    return renderMediaFallback({ element, posterUrl, surface });
+  }
+  if (surface.presenting || surface.preview) {
+    return null;
+  }
+  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.media.title"] });
+}
+function getTextStyleForElement(element, fallbackColor) {
+  return buildTextBlockStyle(element, { fallbackColor });
+}
+function getTextLayoutStyle(element) {
+  if (!(0, dist_exports.hasTextProperties)(element)) {
+    return {};
+  }
+  const writingMode = toCssWritingMode(element.textStyle?.textDirection);
+  const textOrientation = toCssTextOrientation(element.textStyle?.textDirection);
+  const verticalDirection = toCssVerticalDirection(element.textStyle?.textDirection);
+  const textWrapNone = element.textStyle?.textWrap === "none";
+  const shapeAutoFitTextBox = element.textStyle?.autoFitMode === "shrink" && (element.type === "text" || element.locks?.txBox === true);
+  const hasParagraphIndents = (0, dist_exports.hasTextProperties)(element) && element.paragraphIndents && element.paragraphIndents.length > 0;
+  const paragraphMarginLeft = element.textStyle?.paragraphMarginLeft;
+  const paragraphIndent = element.textStyle?.paragraphIndent;
+  const marginLeft = !hasParagraphIndents && typeof paragraphMarginLeft === "number" && paragraphMarginLeft !== 0 ? paragraphMarginLeft : void 0;
+  const textIndent = !hasParagraphIndents && typeof paragraphIndent === "number" && paragraphIndent !== 0 ? paragraphIndent : void 0;
+  const bodyTop = element.textStyle?.bodyInsetTop ?? DEFAULT_BODY_INSET_TB_PX;
+  const bodyBottom = element.textStyle?.bodyInsetBottom ?? DEFAULT_BODY_INSET_TB_PX;
+  const bodyLayoutStyle = buildTextBodyLayoutStyle(element);
+  return {
+    ...bodyLayoutStyle,
+    // Body inset only. Paragraph spacing (spcBef/spcAft) is applied
+    // per-paragraph by the paragraph renderer, not collapsed here.
+    paddingTop: bodyTop,
+    paddingBottom: bodyBottom,
+    writingMode,
+    textOrientation,
+    direction: verticalDirection ?? bodyLayoutStyle.direction,
+    marginLeft: marginLeft ?? bodyLayoutStyle.marginLeft,
+    textIndent,
+    ...shapeAutoFitTextBox ? {
+      width: textWrapNone ? "max-content" : "100%",
+      minWidth: "100%",
+      height: "max-content",
+      minHeight: "100%",
+      whiteSpace: "pre-wrap",
+      wordBreak: textWrapNone ? "normal" : "break-word",
+      overflow: "visible"
+    } : {},
+    ...textWrapNone ? {
+      whiteSpace: "nowrap",
+      overflow: "visible"
+    } : {}
+  };
+}
+function buildTextBody3DSceneStyle(textStyle, elementSize) {
+  return buildTextBody3DSceneStyle$1(textStyle, elementSize);
+}
+
+// src/viewer/utils/text-warp-css.tsx
+function getTextWarpStyle(textStyle) {
+  const preset = textStyle?.textWarpPreset;
+  if (!preset || preset === "textNoShape" || preset === "textPlain") {
+    return void 0;
+  }
+  switch (preset) {
+    // Arch shapes
+    case "textArchUp":
+    case "textArchUpPour":
+      return {
+        transform: "perspective(400px) rotateX(-12deg)",
+        transformOrigin: "center bottom"
+      };
+    case "textArchDown":
+    case "textArchDownPour":
+      return {
+        transform: "perspective(400px) rotateX(12deg)",
+        transformOrigin: "center top"
+      };
+    // Button shapes (concave/convex)
+    case "textButton":
+    case "textButtonPour":
+      return {
+        transform: "perspective(500px) rotateX(8deg)",
+        transformOrigin: "center top"
+      };
+    // Chevron / arrow
+    case "textChevron":
+    case "textChevronInverted":
+      return {
+        transform: "perspective(600px) rotateY(6deg)",
+        transformOrigin: "center center"
+      };
+    // Circle
+    case "textCircle":
+    case "textCirclePour":
+      return {
+        transform: "perspective(350px) rotateX(-5deg) rotateY(5deg)",
+        borderRadius: "50%"
+      };
+    // Slant
+    case "textSlantUp":
+      return {
+        transform: "perspective(500px) rotateY(8deg) skewY(-4deg)",
+        transformOrigin: "left center"
+      };
+    case "textSlantDown":
+      return {
+        transform: "perspective(500px) rotateY(-8deg) skewY(4deg)",
+        transformOrigin: "right center"
+      };
+    // Fade
+    case "textFadeUp":
+      return {
+        transform: "perspective(400px) rotateX(-10deg)",
+        transformOrigin: "center bottom"
+      };
+    case "textFadeDown":
+      return {
+        transform: "perspective(400px) rotateX(10deg)",
+        transformOrigin: "center top"
+      };
+    case "textFadeLeft":
+      return {
+        transform: "perspective(400px) rotateY(10deg)",
+        transformOrigin: "right center"
+      };
+    case "textFadeRight":
+      return {
+        transform: "perspective(400px) rotateY(-10deg)",
+        transformOrigin: "left center"
+      };
+    // Inflate / Deflate
+    case "textInflate":
+    case "textInflateBottom":
+    case "textInflateTop":
+      return {
+        transform: "scaleY(1.15) scaleX(1.05)",
+        transformOrigin: "center center"
+      };
+    case "textDeflate":
+    case "textDeflateBottom":
+    case "textDeflateTop":
+      return {
+        transform: "scaleY(0.88) scaleX(0.95)",
+        transformOrigin: "center center"
+      };
+    // Wave
+    case "textWave1":
+    case "textWave2":
+    case "textWave4":
+      return {
+        transform: "perspective(600px) rotateX(-3deg) skewX(3deg)",
+        transformOrigin: "center center"
+      };
+    case "textDoubleWave1":
+      return {
+        transform: "perspective(600px) rotateX(-2deg) skewX(4deg)",
+        transformOrigin: "center center"
+      };
+    // Triangle / Trapezoid
+    case "textTriangle":
+    case "textTriangleInverted":
+      return {
+        transform: "perspective(500px) rotateX(-6deg)",
+        transformOrigin: "center bottom"
+      };
+    // Ring
+    case "textRingInside":
+    case "textRingOutside":
+      return {
+        transform: "perspective(350px) rotateX(-4deg) rotateY(4deg)",
+        transformOrigin: "center center"
+      };
+    // Can
+    case "textCanUp":
+    case "textCanDown":
+      return {
+        transform: "perspective(400px) rotateX(-6deg)",
+        transformOrigin: "center center"
+      };
+    // Cascade
+    case "textCascadeUp":
+      return {
+        transform: "skewY(-8deg)",
+        transformOrigin: "left top"
+      };
+    case "textCascadeDown":
+      return {
+        transform: "skewY(8deg)",
+        transformOrigin: "left top"
+      };
+    // Curve
+    case "textCurveUp":
+      return {
+        transform: "perspective(500px) rotateX(-8deg)",
+        transformOrigin: "center bottom"
+      };
+    case "textCurveDown":
+      return {
+        transform: "perspective(500px) rotateX(8deg)",
+        transformOrigin: "center top"
+      };
+    // Inflate/Deflate compound variants
+    case "textDeflateInflate":
+      return {
+        transform: "scaleY(0.92) scaleX(1.04)",
+        transformOrigin: "center center"
+      };
+    case "textDeflateInflateDeflate":
+      return {
+        transform: "scaleY(0.85) scaleX(1.06)",
+        transformOrigin: "center center"
+      };
+    // Stop / Octagon
+    case "textStop":
+      return {
+        transform: "scaleX(0.9) scaleY(0.9)",
+        transformOrigin: "center center"
+      };
+    default:
+      return void 0;
+  }
+}
+function buildAnimStyle(state) {
+  if (!state) {
+    return void 0;
+  }
+  const style = {};
+  if (state.visible === false) {
+    style.visibility = "hidden";
+  }
+  if (state.cssAnimation) {
+    style.animation = state.cssAnimation;
+  }
+  return Object.keys(style).length > 0 ? style : void 0;
+}
+function wrapWithTextBuildAnimation(elementId, paraIndex, renderedSegments, paraRuns, subElementAnimStates, renderPiece) {
+  if (!subElementAnimStates || subElementAnimStates.size === 0) {
+    return renderedSegments;
+  }
+  const paraKey = `${elementId}${TEXT_BUILD_ID_SEP}p${paraIndex}`;
+  const paraState = subElementAnimStates.get(paraKey);
+  if (paraState) {
+    const style = buildAnimStyle(paraState);
+    return /* @__PURE__ */ jsx("span", { "data-anim-id": paraKey, style: { display: "inline", ...style }, children: renderedSegments }, paraKey);
+  }
+  const spec = buildTextBuildSpec(
+    elementId,
+    paraIndex,
+    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, String(index)) : span.text;
+    if (!span.animId) {
+      return /* @__PURE__ */ jsx(React8.Fragment, { children: content }, `ws-${index}`);
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-anim-id": span.animId,
+        style: textBuildSpanStyle(span),
+        children: content
+      },
+      span.animId
+    );
+  });
+}
+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}`;
+    const following = followingText(pieces, i, metric?.following);
+    if (!piece.underline) {
+      return /* @__PURE__ */ jsx(React8.Fragment, { children: inner(piece.text, key, gapMetric && { ...gapMetric, following }) }, key);
+    }
+    return /* @__PURE__ */ jsx("span", { style: wordDecoration, children: inner(piece.text, key, metric && { ...metric, following }) }, key);
+  });
+}
+function makeSegmentPieceRenderer(needsScriptFonts, scriptFonts, baseFontFamily, isUnderlineWords, wordDecoration, metric) {
+  return (text, key, following) => renderUnderlineWords(
+    text,
+    isUnderlineWords,
+    wordDecoration,
+    metric && { ...metric, following },
+    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(React8.Fragment, { children: [
+      piece.leaderStyle ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: piece.leaderStyle, children: piece.leaderText }) : null,
+      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);
+  }) });
+}
+function renderEastAsianPieces(text, metric, keyPrefix, inner, baseStyle, following) {
+  const parts = splitEastAsianBreaks(text, metric.eastAsian, metric.font, following);
+  if (parts.length === 1 && !parts[0].style) {
+    return inner(parts[0].text, keyPrefix);
+  }
+  return parts.map((part, i) => {
+    const key = `${keyPrefix}-e${i}`;
+    return part.style ? /* @__PURE__ */ jsx("span", { style: { ...baseStyle ?? metric.nestedStyle, ...part.style }, children: inner(part.text, key) }, key) : /* @__PURE__ */ jsx(React8.Fragment, { children: inner(part.text, key) }, key);
+  });
+}
+function renderMetricPieces(text, metric, keyPrefix, inner) {
+  if (!metric || !text) {
+    return inner(text, keyPrefix);
+  }
+  const pieces = splitRunForMetrics(text, metric.font);
+  if (pieces.length <= 1) {
+    return renderEastAsianPieces(text, metric, keyPrefix, inner, void 0, metric.following);
+  }
+  return pieces.map((piece, i) => {
+    const key = `${keyPrefix}-w${i}`;
+    const style = {
+      ...metric.nestedStyle,
+      letterSpacing: pieceLetterSpacing(metric.authoredPx, piece.tracking)
+    };
+    return /* @__PURE__ */ jsx("span", { style, children: renderEastAsianPieces(
+      piece.text,
+      metric,
+      key,
+      inner,
+      style,
+      followingText(pieces, i, metric.following)
+    ) }, key);
+  });
+}
+function renderScriptAwareText(text, needsScriptFonts, scriptFonts, baseFontFamily, keyPrefix, nestedStyle) {
+  if (!needsScriptFonts || !text) {
+    return text;
+  }
+  const pieces = splitRunByScriptFont(
+    text,
+    scriptFonts,
+    baseFontFamily,
+    nestedStyle
+  );
+  if (!pieces) {
+    return text;
+  }
+  return pieces.map(
+    (piece, i) => piece.style ? /* @__PURE__ */ jsx("span", { style: piece.style, children: piece.text }, `${keyPrefix}-r${i}`) : /* @__PURE__ */ jsx(React8.Fragment, { children: piece.text }, `${keyPrefix}-r${i}`)
+  );
+}
+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}`;
+      return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+        tabContext && line.includes("	") ? renderTabbedLine(
+          line,
+          tabContext,
+          lineKey,
+          renderLeaf,
+          metric?.nestedStyle,
+          isUnderlineWords
+        ) : renderLeaf(line, lineKey, lineIndex < lines.length - 1 ? "\n" : metric?.following),
+        lineIndex < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
+      ] }, lineKey);
+    });
+  }
+  const sorted = [...segHl].sort((a, b) => a.startOffset - b.startOffset);
+  const chunks = [];
+  let cursor = 0;
+  for (const hl of sorted) {
+    if (hl.startOffset > cursor) {
+      chunks.push({
+        text: textValue.slice(cursor, hl.startOffset),
+        highlighted: false,
+        isCurrent: false
+      });
+    }
+    chunks.push({
+      text: textValue.slice(hl.startOffset, hl.startOffset + hl.length),
+      highlighted: true,
+      isCurrent: hl.isCurrent
+    });
+    cursor = hl.startOffset + hl.length;
+  }
+  if (cursor < textValue.length) {
+    chunks.push({
+      text: textValue.slice(cursor),
+      highlighted: false,
+      isCurrent: false
+    });
+  }
+  return chunks.map((chunk, ci) => {
+    const chunkKey = `${elementId}-seg-${segmentIndex}-hl-${ci}`;
+    return chunk.highlighted ? /* @__PURE__ */ jsx(
+      "mark",
+      {
+        style: {
+          ...metric?.nestedStyle,
+          backgroundColor: chunk.isCurrent ? "#f97316" : "#facc15",
+          color: "inherit",
+          borderRadius: 2
+        },
+        children: renderLeaf(chunk.text, chunkKey, followingText(chunks, ci, metric?.following))
+      },
+      chunkKey
+    ) : /* @__PURE__ */ jsx(React8.Fragment, { children: renderLeaf(chunk.text, chunkKey, followingText(chunks, ci, metric?.following)) }, chunkKey);
+  });
+}
+function renderEquationSegment(elementId, segmentIndex, equationXml, equationNumber, fontSize) {
+  const mathml = convertOmmlToMathMl(equationXml);
+  const safeMathml = mathml ? sanitizeMathMl(mathml) : "";
+  const equationContent = safeMathml ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-block align-middle",
+      style: {
+        fontFamily: '"Cambria Math", "STIX Two Math", serif'
+      },
+      dangerouslySetInnerHTML: { __html: safeMathml }
+    }
+  ) : /* @__PURE__ */ jsx("span", { className: "inline-block px-1 py-0.5 rounded text-xs bg-gray-200/20 text-gray-400 italic", children: translationsEn["pptx.textSegment.equationFallback"] });
+  if (equationNumber) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          width: "100%",
+          fontSize
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { style: { visibility: "hidden", whiteSpace: "nowrap" }, children: [
+            "(",
+            equationNumber,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: { textAlign: "center", flex: 1 }, children: equationContent }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                whiteSpace: "nowrap",
+                fontFamily: '"Cambria Math", "STIX Two Math", serif'
+              },
+              children: [
+                "(",
+                equationNumber,
+                ")"
+              ]
+            }
+          )
+        ]
+      },
+      `${elementId}-seg-${segmentIndex}`
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { style: fontSize ? { fontSize } : void 0, children: equationContent }, `${elementId}-seg-${segmentIndex}`);
+}
+function renderHyperlink(run, spanNode, key, ctx) {
+  const url = run.hyperlink?.url;
+  const onHyperlinkClick = ctx.onHyperlinkClick;
+  if (!url || !onHyperlinkClick) {
+    return spanNode;
+  }
+  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, targetFrame);
+    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: /* @__PURE__ */ jsx(FollowLinkHint, {}) })
+        ] }) })
+      ]
+    },
+    `${key}-link`
+  );
+}
+function FollowLinkHint() {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Fragment, { children: t("pptx.linkTooltip.followLink") });
+}
+function wrapWithTextReflection(run, key, spanNode, spanStyle, baseContent) {
+  if (!run.reflection) {
+    return spanNode;
+  }
+  return /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "inline-block" }, children: [
+    spanNode,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pptx-react-text-reflection",
+        style: run.reflection,
+        children: /* @__PURE__ */ jsx("span", { style: spanStyle, children: baseContent })
+      }
+    )
+  ] }, `${key}-reflwrap`);
+}
+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,
+      typeof run.style.fontSize === "string" ? run.style.fontSize : void 0
+    );
+  }
+  const segmentStyle = segment?.style ?? {};
+  const textValue = run.text;
+  const lines = textValue.split("\n");
+  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 ? BASELINE_FONT_SCALE : 1;
+  const rawFontSize = segmentStyle.fontSize || element.textStyle?.fontSize || DEFAULT_TEXT_FONT_SIZE;
+  const baseFontSize = scaleFontSizeForAutoFit(
+    rawFontSize,
+    resolveAutoFitFontScale(element.textStyle)
+  );
+  const baselineShift = baselineFraction !== 0 ? `${baselineFraction * baseFontSize}px` : void 0;
+  const fontKerning = resolveFontKerning(segmentStyle.kerning, baseFontSize);
+  const scriptFallbackWins = Boolean(
+    segmentStyle.scriptFallbackFont && segmentStyle.fontFamilyIsCascadeDefault
+  );
+  const rawFontFamily = segmentStyle.fontFamily || element.textStyle?.fontFamily;
+  const baseFontFamily = scriptFallbackWins ? (0, dist_exports.getSubstituteFontFamily)(segmentStyle.scriptFallbackFont) : rawFontFamily ? (0, dist_exports.getSubstituteFontFamily)(
+    rawFontFamily,
+    (0, dist_exports.parsePanoseString)(segmentStyle.latinFontPanose ?? element.textStyle?.latinFontPanose)
+  ) : DEFAULT_FONT_FAMILY;
+  const scriptFonts = resolveScriptFontSet(segmentStyle, element.textStyle, baseFontFamily);
+  const needsScriptFonts = hasDistinctScriptFonts(scriptFonts);
+  const authoredLetterSpacing = authoredLetterSpacingPx(segmentStyle);
+  const metricFont = {
+    fontFamily: baseFontFamily,
+    fontSizePx: baseFontSize * baselineFontScale,
+    bold: Boolean(segmentStyle.bold),
+    italic: Boolean(segmentStyle.italic)
+  };
+  const nestedStyle = nestedTextDecorationStyle(run.style);
+  const metricContext = {
+    font: metricFont,
+    authoredPx: authoredLetterSpacing,
+    nestedStyle,
+    // Resolved per run, so a Korean run keeps its Hangul words whole.
+    eastAsian: eastAsianBreaksForRun(ctx.eastAsianBreaks, segmentStyle.language),
+    following: ctx.eastAsianFollowing
+  };
+  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 hollow = hollowTextFillStyle(segmentStyle, {
+    color: resolvedSegmentColor,
+    textStroke: typeof spanStyle.WebkitTextStroke === "string" ? spanStyle.WebkitTextStroke : void 0
+  });
+  if (hollow) {
+    Object.assign(spanStyle, hollow);
+  }
+  const runRtl = segmentStyle.rtl;
+  if (runRtl !== void 0) {
+    spanStyle.direction = runRtl ? "rtl" : "ltr";
+    spanStyle.unicodeBidi = runRtl !== ctx.paragraphRtl ? "bidi-override" : "embed";
+  }
+  const isUnderlineWords = splitsUnderlineIntoWords(segmentStyle);
+  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,
+    textValue,
+    lines,
+    needsScriptFonts,
+    scriptFonts,
+    baseFontFamily,
+    findHighlights,
+    buildTabContext(
+      element.textStyle?.tabStops,
+      element.textStyle?.defaultTabSize,
+      baseFontSize,
+      baseFontFamily,
+      Boolean(segmentStyle.bold),
+      Boolean(segmentStyle.italic),
+      { language: segmentStyle.language, rtl: ctx.paragraphRtl === true }
+    ),
+    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);
+  return run.hyperlink && onHyperlinkClick ? renderHyperlink(run, reflectedNode, key, ctx) : reflectedNode;
+}
+function renderRubyOrText(run, baseContent) {
+  if (!run.ruby) {
+    return baseContent;
+  }
+  return /* @__PURE__ */ jsxs("ruby", { children: [
+    baseContent,
+    /* @__PURE__ */ jsx("rp", { children: "(" }),
+    /* @__PURE__ */ jsx("rt", { style: run.ruby.style, children: run.ruby.text }),
+    /* @__PURE__ */ jsx("rp", { children: ")" })
+  ] });
+}
+function renderSeededListRun(seed, runs, segments, context) {
+  const sourceRun = runs.find((candidate) => candidate.segmentIndex === seed.segmentIndex);
+  const segment = sourceRun ? segments[seed.segmentIndex] : { text: seed.text, style: seed.style };
+  const resolvedSegment = {
+    ...segment,
+    style: withInlineListDecorationDefaults(segment.style, context.element.textStyle)
+  };
+  const decorationCss = segmentStyleToCss(
+    resolvedSegment,
+    resolveAutoFitFontScale(context.element.textStyle)
+  );
+  applyUnderlineVariant(decorationCss, resolvedSegment);
+  const run = sourceRun ? { ...sourceRun, style: { ...sourceRun.style, ...nestedTextDecorationStyle(decorationCss) } } : {
+    text: seed.text,
+    style: decorationCss,
+    segmentIndex: seed.segmentIndex
+  };
+  const rendered = renderParagraphRun(run, resolvedSegment, context);
+  if (!React8.isValidElement(rendered)) {
+    return rendered;
+  }
+  return React8.cloneElement(rendered, {
+    "data-pptx-list-run": seed.token,
+    ...seed.text === "" ? { children: /* @__PURE__ */ jsx("br", {}) } : {}
+  });
+}
+function renderTextSegments(element, fallbackColor, emptyFallback, findHighlights, onHyperlinkClick, fieldContext, subElementAnimStates, segmentOverrides, requireCtrlClick, placeholderPrompt, inlineListSeed) {
+  if (!(0, dist_exports.hasTextProperties)(element)) {
+    return emptyFallback || null;
+  }
+  const segments = segmentOverrides ?? element.textSegments;
+  if (!segments || segments.length === 0) {
+    if (placeholderPrompt) {
+      return /* @__PURE__ */ jsx("span", { style: placeholderPrompt.style, children: placeholderPrompt.text });
+    }
+    return element.text || emptyFallback || "";
+  }
+  const paragraphs = buildParagraphs(element, fieldContext, segmentOverrides, {
+    preserveTrailingEmpty: inlineListSeed ? true : void 0,
+    eastAsianRunPieces: false
+  });
+  const ctx = {
+    element,
+    fallbackColor,
+    findHighlights,
+    onHyperlinkClick,
+    requireCtrlClick
+  };
+  return paragraphs.map(
+    (para, paraIndex) => renderParagraph(
+      para,
+      paraIndex,
+      paragraphs.length,
+      segments,
+      ctx,
+      subElementAnimStates,
+      inlineListSeed
+    )
+  );
+}
+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;
+    }
+    out.push({ ...run });
+  }
+  return out;
+}
+function renderParagraph(para, paraIndex, paraCount, segments, ctx, subElementAnimStates, inlineListSeed) {
+  const element = ctx.element;
+  const runCtx = {
+    ...ctx,
+    paragraphRtl: para.rtl,
+    eastAsianBreaks: para.eastAsianBreaks
+  };
+  const runs = joinRunsBySegment(para.runs);
+  const listParagraph = inlineListSeed?.paragraphs[paraIndex];
+  const renderedRuns = listParagraph ? listParagraph.runs.map((run) => renderSeededListRun(run, runs, segments, runCtx)) : runs.map(
+    (run, i) => renderParagraphRun(run, segments[run.segmentIndex ?? -1], {
+      ...runCtx,
+      eastAsianFollowing: para.eastAsianBreaks ? followingText(runs, i) : void 0
+    })
+  );
+  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;
+    }
+  }
+  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 = Boolean(listParagraph) || Object.keys(paraStyle).length > 0 || marker !== null;
+  if (!needsWrapper) {
+    return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+      wrappedContent,
+      paraIndex < paraCount - 1 ? /* @__PURE__ */ jsx("br", {}) : null
+    ] }, `${element.id}-para-${paraIndex}`);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: paraStyle,
+      "data-pptx-list-paragraph": listParagraph?.token,
+      children: [
+        marker,
+        para.isEmpty && !listParagraph ? /* @__PURE__ */ jsx("br", {}) : wrappedContent
+      ]
+    },
+    `${element.id}-para-${paraIndex}`
+  );
+}
+function renderBulletMarker(para, paraIndex, elementId) {
+  const picture = para.bulletPicture;
+  if (picture?.src) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        "data-pptx-bullet-marker": true,
+        contentEditable: false,
+        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`
+    );
+  }
+  if (para.bulletMarker === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "pptx-bullet",
+      "data-pptx-bullet-marker": true,
+      contentEditable: false,
+      style: para.bulletStyle,
+      "aria-label": picture?.accessibleLabel,
+      children: para.bulletMarker
+    },
+    `${elementId}-para-${paraIndex}-bullet`
+  );
+}
+function getDuotoneColors(element) {
+  if (!(0, dist_exports.isImageLikeElement)(element)) {
+    return void 0;
+  }
+  return element.imageEffects?.duotone;
+}
+function buildLineShadowCss(element) {
+  if (!(0, dist_exports.hasShapeProperties)(element)) {
+    return void 0;
+  }
+  const ss = element.shapeStyle;
+  if (!ss?.lineShadowColor || ss.lineShadowColor === "transparent") {
+    return void 0;
+  }
+  const offsetX = typeof ss.lineShadowOffsetX === "number" ? ss.lineShadowOffsetX : 2;
+  const offsetY = typeof ss.lineShadowOffsetY === "number" ? ss.lineShadowOffsetY : 2;
+  const blur = typeof ss.lineShadowBlur === "number" ? Math.max(0, ss.lineShadowBlur) : 4;
+  const opacity = typeof ss.lineShadowOpacity === "number" ? Math.max(0, Math.min(1, ss.lineShadowOpacity)) : 0.35;
+  return `${Math.round(offsetX)}px ${Math.round(offsetY)}px ${Math.round(blur)}px ${colorWithOpacity(
+    normalizeHexColor(ss.lineShadowColor, "#000000"),
+    opacity
+  )}`;
+}
+function buildLineGlowFilter(element) {
+  if (!(0, dist_exports.hasShapeProperties)(element)) {
+    return void 0;
+  }
+  const ss = element.shapeStyle;
+  if (!ss?.lineGlowColor || ss.lineGlowColor === "transparent" || !ss.lineGlowRadius) {
+    return void 0;
+  }
+  const glowOpacity = typeof ss.lineGlowOpacity === "number" ? ss.lineGlowOpacity : 0.75;
+  const glowRad = Math.round(Math.max(0, ss.lineGlowRadius));
+  const glowCol = colorWithOpacity(normalizeHexColor(ss.lineGlowColor, "#ffff00"), glowOpacity);
+  return `drop-shadow(0 0 ${glowRad}px ${glowCol})`;
+}
+function getDagDuotoneFilterId(elementId) {
+  return `dag-duotone-${elementId}`;
+}
+function hasDagDuotoneEffect(element) {
+  if (!(0, dist_exports.hasShapeProperties)(element)) {
+    return false;
+  }
+  return Boolean(element.shapeStyle?.dagDuotone);
+}
+function renderDagDuotoneSvgFilter(elementId, color1, color2) {
+  const filterId = getDagDuotoneFilterId(elementId);
+  const c1 = hexToRgbUnit(color1);
+  const c2 = hexToRgbUnit(color2);
+  const grayscaleMatrix = [
+    0.2126,
+    0.7152,
+    0.0722,
+    0,
+    0,
+    0.2126,
+    0.7152,
+    0.0722,
+    0,
+    0,
+    0.2126,
+    0.7152,
+    0.0722,
+    0,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0
+  ].join(" ");
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 0,
+      height: 0,
+      style: { position: "absolute", overflow: "hidden" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, colorInterpolationFilters: "sRGB", children: [
+        /* @__PURE__ */ jsx("feColorMatrix", { type: "matrix", values: grayscaleMatrix }),
+        /* @__PURE__ */ jsxs("feComponentTransfer", { children: [
+          /* @__PURE__ */ jsx("feFuncR", { type: "linear", slope: c2.r - c1.r, intercept: c1.r }),
+          /* @__PURE__ */ jsx("feFuncG", { type: "linear", slope: c2.g - c1.g, intercept: c1.g }),
+          /* @__PURE__ */ jsx("feFuncB", { type: "linear", slope: c2.b - c1.b, intercept: c1.b })
+        ] })
+      ] }) })
+    }
+  );
+}
+function build3DExtrusionData(shape3d, scene3d, fillColor, elementWidth, elementHeight) {
+  return build3DExtrusionData$1(
+    shape3d,
+    scene3d,
+    fillColor,
+    elementWidth,
+    elementHeight
+  );
+}
+function apply3dEffects(base, scene3d, shape3d, fillColorFallback, elementSize, elementId) {
+  apply3dEffects$1(
+    base,
+    scene3d,
+    shape3d,
+    fillColorFallback,
+    elementSize,
+    elementId
+  );
+}
+
+// src/viewer/utils/shape-visual-style.ts
+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 rendersWedgeCalloutVector(element) {
+  return element.type === "shape" && isWedgeCalloutPresetShape(element.shapeType);
+}
+function getShapeVisualStyle(element, _hasFill, fillColor, _strokeWidth, _strokeColor, animatesFill, animatesStroke, parentGroupFill) {
+  if (element.type === "group") {
+    const fx2 = getComputedEffectStyle(element);
+    const groupStyle = {};
+    if (fx2.filter) {
+      groupStyle.filter = fx2.filter;
+    }
+    if (fx2.overflowVisible) {
+      groupStyle.overflow = "visible";
+    }
+    return groupStyle;
+  }
+  if (!(0, dist_exports.hasShapeProperties)(element)) {
+    return {};
+  }
+  const ss = element.shapeStyle;
+  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 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",
+    boxShadow: fx.boxShadow,
+    // Reflection is no longer a single CSS property (`-webkit-box-reflect`
+    // never worked in Firefox): `ElementRenderer` renders a mirrored sibling
+    // node instead, using shared's `getReflectionWrapperStyle` directly (see
+    // `ReflectionOverlay`).
+    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
+  };
+  Object.assign(
+    base,
+    getAnimationColorBaseStyle(element, {
+      animatesFill,
+      animatesStroke,
+      parentGroupFill
+    })
+  );
+  if (element.type === "image" || element.type === "picture") {
+    base.borderWidth = 0;
+    base.borderColor = void 0;
+    base.borderStyle = void 0;
+  }
+  apply3dEffects(
+    base,
+    ss?.scene3d,
+    ss?.shape3d,
+    ss?.fillColor ?? fillColor,
+    {
+      width: element.width,
+      height: element.height
+    },
+    element.id
+  );
+  if (rendersCustomVectorPath(element) || rendersWedgeCalloutVector(element) || isStrokeOnlyPresetElement(element)) {
+    base.backgroundColor = "transparent";
+    base.backgroundImage = void 0;
+    base.borderWidth = void 0;
+    base.borderColor = void 0;
+    base.borderStyle = void 0;
+  }
+  if (animatesFill) {
+    base.backgroundColor = void 0;
+    base.backgroundImage = void 0;
+  }
+  if (rendersWedgeCalloutVector(element)) {
+    return base;
+  }
+  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;
+  }
+}
+function getConnectorPathGeometry(element) {
+  return (0, dist_exports.getConnectorPathGeometry)(element);
+}
+var ARROW_SIZE_SCALE = {
+  sm: 0.6,
+  med: 1,
+  lg: 1.5
+};
+function renderConnectorMarker(markerId, arrowType, color, arrowWidth, arrowLength) {
+  if (!arrowType || arrowType === "none") {
+    return null;
+  }
+  const wScale = ARROW_SIZE_SCALE[arrowWidth || "med"] ?? 1;
+  const lScale = ARROW_SIZE_SCALE[arrowLength || "med"] ?? 1;
+  const mw = Math.round(8 * lScale);
+  const mh = Math.round(8 * wScale);
+  return /* @__PURE__ */ jsx(
+    "marker",
+    {
+      id: markerId,
+      markerWidth: mw,
+      markerHeight: mh,
+      refX: 8,
+      refY: 5,
+      orient: "auto-start-reverse",
+      viewBox: "0 0 10 10",
+      markerUnits: "strokeWidth",
+      children: arrowType === "triangle" ? /* @__PURE__ */ jsx("polygon", { points: "0,0 10,5 0,10", fill: color }) : arrowType === "stealth" ? /* @__PURE__ */ jsx("polygon", { points: "0,0 10,5 0,10 3.4,5", fill: color }) : arrowType === "diamond" ? /* @__PURE__ */ jsx("polygon", { points: "0,5 5,0 10,5 5,10", fill: color }) : arrowType === "oval" ? /* @__PURE__ */ jsx("ellipse", { cx: 5, cy: 5, rx: 4, ry: 3.3, fill: color }) : /* @__PURE__ */ jsx("path", { d: "M0 0 L10 5 L0 10", fill: "none", stroke: color, strokeWidth: 1.6 })
+    }
+  );
+}
+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;
+  return { lineJoin, miterLimit };
+}
+function strokeContext(shapeStyle, strokePaint, strokeWidth, dashArray) {
+  const { lineJoin, miterLimit } = joinStyle(shapeStyle);
+  return {
+    strokePaint,
+    strokeWidth,
+    dashArray,
+    lineCap: svgLineCap(shapeStyle?.lineCap),
+    lineJoin,
+    miterLimit,
+    offsets: getCompoundLineOffsets(shapeStyle?.compoundLine, strokeWidth),
+    widths: getCompoundLineWidths(shapeStyle?.compoundLine, strokeWidth)
+  };
+}
+function strokeStrands(d, keyBase, ctx) {
+  return ctx.offsets.map((offset, idx) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d,
+      fill: "none",
+      stroke: ctx.strokePaint,
+      strokeWidth: Math.max(ctx.widths[idx] ?? ctx.strokeWidth, 1),
+      strokeDasharray: ctx.dashArray,
+      strokeLinecap: ctx.lineCap,
+      strokeLinejoin: ctx.lineJoin,
+      strokeMiterlimit: ctx.miterLimit,
+      vectorEffect: "non-scaling-stroke",
+      style: offset !== 0 ? { transform: `translate(0, ${offset}px)` } : void 0
+    },
+    `${keyBase}-s${idx}`
+  ));
+}
+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 ? (0, dist_exports.customGeometryPathsToSvgSubpaths)(structuredPaths, pathWidth, pathHeight) : void 0;
+  const needsPerSubpath = subpaths !== void 0 && subpaths.some((sp) => sp.fillMode && sp.fillMode !== "norm" || sp.stroke === false);
+  const gradientPaint = gradient ? svgGradientFillRef(gradient) : void 0;
+  const nodes = [];
+  if (subpaths && needsPerSubpath) {
+    const paints = buildSubpathPaints(subpaths, hasFill, fillColor, fillOpacity);
+    paints.forEach((paint, idx) => {
+      if (paint.fill !== "none") {
+        const mode = subpaths[idx]?.fillMode;
+        const useGradient = gradientPaint && (mode === void 0 || mode === "norm");
+        nodes.push(
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: paint.d,
+              fill: animatesFill ? "inherit" : useGradient ? gradientPaint : paint.fill,
+              stroke: "none",
+              vectorEffect: "non-scaling-stroke"
+            },
+            `f${idx}`
+          )
+        );
+      }
+      if (paint.stroked && strokeWidth > 0) {
+        nodes.push(...strokeStrands(paint.d, `p${idx}`, ctx));
+      }
+    });
+  } else {
+    if (hasFill) {
+      nodes.push(
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: pathData,
+            fill: animatesFill ? "inherit" : gradientPaint ?? colorWithOpacity(fillColor, fillOpacity),
+            stroke: "none",
+            vectorEffect: "non-scaling-stroke"
+          },
+          "fill"
+        )
+      );
+    }
+    if (strokeWidth > 0) {
+      nodes.push(...strokeStrands(pathData, "agg", ctx));
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${pathWidth} ${pathHeight}`,
+      className: "absolute inset-0 w-full h-full pointer-events-none",
+      preserveAspectRatio: "none",
+      children: [
+        animatesFill ? null : renderSvgGradientDefs(gradient),
+        nodes
+      ]
+    }
+  );
+}
+function renderVectorShape(element, hasFill, fillColor, strokeWidth, strokeColor, animatesFill, animatesStroke) {
+  if (!(0, dist_exports.hasShapeProperties)(element)) {
+    return null;
+  }
+  const normalizedType = (element.shapeType || "").toLowerCase();
+  const fillPaint = animatesFill ? "inherit" : colorWithOpacity(fillColor, element.shapeStyle?.fillOpacity);
+  const strokePaint = animatesStroke ? "inherit" : colorWithOpacity(strokeColor, element.shapeStyle?.strokeOpacity);
+  const dashType = normalizeStrokeDashType(element.shapeStyle?.strokeDash);
+  const dashArray = getSvgStrokeDasharray(
+    dashType,
+    Math.max(strokeWidth, 1),
+    element.shapeStyle?.customDashSegments
+  );
+  if (normalizedType === "can" || normalizedType === "cylinder") {
+    const width = Math.max(element.width, 1);
+    const height = Math.max(element.height, 1);
+    const rim = Math.max(Math.min(height * 0.16, 28), 6);
+    const stroke = Math.max(strokeWidth, 1);
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: `0 0 ${width} ${height}`,
+        className: "w-full h-full pointer-events-none",
+        preserveAspectRatio: "none",
+        children: [
+          /* @__PURE__ */ jsx(
+            "ellipse",
+            {
+              cx: width / 2,
+              cy: rim / 2,
+              rx: width / 2,
+              ry: rim / 2,
+              fill: hasFill ? fillPaint : "none",
+              stroke: strokeWidth > 0 ? strokePaint : "none",
+              strokeWidth: stroke,
+              strokeDasharray: dashArray,
+              vectorEffect: "non-scaling-stroke"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: 0,
+              y: rim / 2,
+              width,
+              height: Math.max(height - rim, 1),
+              fill: hasFill ? fillPaint : "none",
+              stroke: strokeWidth > 0 ? strokePaint : "none",
+              strokeWidth: stroke,
+              strokeDasharray: dashArray,
+              vectorEffect: "non-scaling-stroke"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "ellipse",
+            {
+              cx: width / 2,
+              cy: height - rim / 2,
+              rx: width / 2,
+              ry: rim / 2,
+              fill: hasFill ? fillPaint : "none",
+              stroke: strokeWidth > 0 ? strokePaint : "none",
+              strokeWidth: stroke,
+              strokeDasharray: dashArray,
+              vectorEffect: "non-scaling-stroke"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if ((element.type === "shape" || element.type === "image" || element.type === "picture") && element.pathData && element.pathWidth && element.pathHeight && element.pathWidth > 0 && element.pathHeight > 0) {
+    return renderCustomGeometryVector(
+      element.pathData,
+      element.pathWidth,
+      element.pathHeight,
+      element.customGeometryPaths,
+      element.shapeStyle,
+      hasFill,
+      fillColor,
+      element.shapeStyle?.fillOpacity,
+      strokePaint,
+      strokeWidth,
+      dashArray,
+      Boolean(animatesFill),
+      // A freeform's `a:gradFill` needs a real SVG paint server: the
+      // container's `background-image` is suppressed for custom geometry, so
+      // without this the shape fell back to the parser's representative solid
+      // and lost every fade (issue #132).
+      buildSvgGradientDef(element.shapeStyle, element.id)
+    );
+  }
+  if ((element.type === "image" || element.type === "picture") && strokeWidth > 0 && !buildStrokeOutline(element)) {
+    const width = Math.max(element.width, 1);
+    const height = Math.max(element.height, 1);
+    const geometry = getPresetShapeVectorGeometry(
+      element.shapeType || "rect",
+      width,
+      height,
+      element.shapeAdjustments
+    );
+    if (geometry) {
+      return /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: `${geometry.minX} ${geometry.minY} ${geometry.viewWidth} ${geometry.viewHeight}`,
+          className: "w-full h-full pointer-events-none",
+          preserveAspectRatio: "none",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: geometry.d,
+              fill: "none",
+              stroke: strokePaint,
+              strokeWidth: strokeWidth * 2,
+              strokeDasharray: dashArray,
+              vectorEffect: "non-scaling-stroke"
+            }
+          )
+        }
+      );
+    }
+  }
+  if (element.type === "shape" && isWedgeCalloutPresetShape(element.shapeType)) {
+    const width = Math.max(element.width, 1);
+    const height = Math.max(element.height, 1);
+    const geometry = getPresetShapeVectorGeometry(
+      element.shapeType,
+      width,
+      height,
+      element.shapeAdjustments
+    );
+    if (geometry) {
+      const gradient = buildSvgGradientDef(element.shapeStyle, element.id);
+      const gradientPaint = gradient ? svgGradientFillRef(gradient) : void 0;
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: `${geometry.minX} ${geometry.minY} ${geometry.viewWidth} ${geometry.viewHeight}`,
+          className: "pointer-events-none",
+          preserveAspectRatio: "none",
+          style: {
+            position: "absolute",
+            left: geometry.minX,
+            top: geometry.minY,
+            width: geometry.viewWidth,
+            height: geometry.viewHeight,
+            overflow: "visible"
+          },
+          children: [
+            animatesFill ? null : renderSvgGradientDefs(gradient),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: geometry.d,
+                fill: hasFill ? animatesFill ? "inherit" : gradientPaint ?? fillPaint : "none",
+                stroke: strokeWidth > 0 ? strokePaint : "none",
+                strokeWidth,
+                strokeDasharray: dashArray,
+                vectorEffect: "non-scaling-stroke"
+              }
+            )
+          ]
+        }
+      );
+    }
+  }
+  if ((0, dist_exports.isCalloutShape)(normalizedType)) {
+    const width = Math.max(element.width, 1);
+    const height = Math.max(element.height, 1);
+    const geometry = (0, dist_exports.getCalloutLeaderLineGeometry)(
+      normalizedType,
+      width,
+      height,
+      element.shapeAdjustments
+    );
+    if (geometry && geometry.points.length >= 2) {
+      const leaderPath = (0, dist_exports.buildCalloutLeaderLineSvgPath)(geometry);
+      const bounds = (0, dist_exports.getCalloutViewBoxBounds)(width, height, geometry);
+      const lineStroke = Math.max(strokeWidth, 1);
+      const offsetLeft = bounds.minX;
+      const offsetTop = bounds.minY;
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: `${bounds.minX} ${bounds.minY} ${bounds.viewWidth} ${bounds.viewHeight}`,
+          className: "pointer-events-none",
+          preserveAspectRatio: "none",
+          style: {
+            position: "absolute",
+            left: offsetLeft,
+            top: offsetTop,
+            width: bounds.viewWidth,
+            height: bounds.viewHeight,
+            overflow: "visible"
+          },
+          children: [
+            geometry.hasAccent && /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                y1: 0,
+                x2: width,
+                y2: 0,
+                stroke: strokePaint,
+                strokeWidth: lineStroke,
+                vectorEffect: "non-scaling-stroke"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: leaderPath,
+                fill: "none",
+                stroke: strokePaint,
+                strokeWidth: lineStroke,
+                strokeDasharray: dashArray,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                vectorEffect: "non-scaling-stroke"
+              }
+            )
+          ]
+        }
+      );
+    }
+  }
+  if (element.type === "connector" || getShapeType(element.shapeType) === "connector" || element.shapeType === "line") {
+    const viewWidth = Math.max(element.width, 1);
+    const viewHeight = Math.max(element.height, 1);
+    const { pathData } = getConnectorPathGeometry(element);
+    const markerSeed = element.id.replace(/[^a-zA-Z0-9_-]/gu, "_");
+    const startMarkerId = `${markerSeed}-start-arrow`;
+    const endMarkerId = `${markerSeed}-end-arrow`;
+    const startArrow = element.shapeStyle?.connectorStartArrow;
+    const endArrow = element.shapeStyle?.connectorEndArrow;
+    const startArrowW = element.shapeStyle?.connectorStartArrowWidth;
+    const startArrowL = element.shapeStyle?.connectorStartArrowLength;
+    const endArrowW = element.shapeStyle?.connectorEndArrowWidth;
+    const endArrowL = element.shapeStyle?.connectorEndArrowLength;
+    const compoundLine = element.shapeStyle?.compoundLine;
+    const connectorLineCap = svgLineCap(element.shapeStyle?.lineCap);
+    const hitTargetWidth = Math.max(strokeWidth * 3, 12);
+    const offsets = getCompoundLineOffsets(compoundLine, strokeWidth);
+    const widths = getCompoundLineWidths(compoundLine, strokeWidth);
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: `0 0 ${viewWidth} ${viewHeight}`,
+        className: "w-full h-full",
+        preserveAspectRatio: "none",
+        style: { overflow: "visible", pointerEvents: "none" },
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            renderConnectorMarker(startMarkerId, startArrow, strokePaint, startArrowW, startArrowL),
+            renderConnectorMarker(endMarkerId, endArrow, strokePaint, endArrowW, endArrowL)
+          ] }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: pathData,
+              fill: "none",
+              stroke: "transparent",
+              strokeWidth: hitTargetWidth,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              style: { pointerEvents: "stroke" }
+            }
+          ),
+          offsets.map((offset, idx) => /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: pathData,
+              fill: "none",
+              stroke: strokePaint,
+              strokeWidth: Math.max(widths[idx] ?? strokeWidth, 1),
+              strokeDasharray: dashArray,
+              strokeLinecap: connectorLineCap,
+              strokeLinejoin: "round",
+              markerStart: idx === 0 && startArrow && startArrow !== "none" ? `url(#${startMarkerId})` : void 0,
+              markerEnd: idx === offsets.length - 1 && endArrow && endArrow !== "none" ? `url(#${endMarkerId})` : void 0,
+              vectorEffect: "non-scaling-stroke",
+              style: {
+                pointerEvents: "none",
+                ...offset !== 0 ? { transform: `translate(0, ${offset}px)` } : {}
+              }
+            },
+            idx
+          ))
+        ]
+      }
+    );
+  }
+  return null;
+}
+
+// src/viewer/utils/table-cell-fill.tsx
+function parseGradientFillCss(gradFill) {
+  if (!gradFill) {
+    return void 0;
+  }
+  const gsLstRaw = gradFill["a:gsLst"];
+  if (!gsLstRaw) {
+    return void 0;
+  }
+  const stops = ensureArrayValue(gsLstRaw["a:gs"]);
+  if (stops.length === 0) {
+    return void 0;
+  }
+  const rawStops = stops.map((gs) => {
+    const pos = Number.parseInt(String(gs["@_pos"] || "0"), 10) / 1e3;
+    const color = parseDrawingColor(gs) ?? "#888888";
+    const opacity = parseDrawingColorOpacity(gs);
+    return { position: pos, color, opacity };
+  }).sort((a, b) => a.position - b.position);
+  const stopStrings = rawStops.map((s) => `${colorWithOpacity(s.color, s.opacity)} ${s.position.toFixed(1)}%`).join(", ");
+  const lin = gradFill["a:lin"];
+  if (lin) {
+    const angRaw = Number.parseInt(String(lin["@_ang"] || "0"), 10);
+    const angleDeg = Math.round((0, dist_exports.ooxmlGradientAngleToCssDegrees)(angRaw / 6e4));
+    return `linear-gradient(${angleDeg}deg, ${stopStrings})`;
+  }
+  const path = gradFill["a:path"];
+  if (path) {
+    const pathType = String(path["@_path"] || "circle");
+    const fillToRectXml = path["a:fillToRect"];
+    const fillToRect = fillToRectXml ? {
+      l: Number.parseInt(String(fillToRectXml["@_l"] || "0"), 10) / 1e5,
+      t: Number.parseInt(String(fillToRectXml["@_t"] || "0"), 10) / 1e5,
+      r: Number.parseInt(String(fillToRectXml["@_r"] || "0"), 10) / 1e5,
+      b: Number.parseInt(String(fillToRectXml["@_b"] || "0"), 10) / 1e5
+    } : void 0;
+    if (pathType === "rect") {
+      return buildRectPathGradient(rawStops, void 0, fillToRect);
+    }
+    let cx = 50;
+    let cy = 50;
+    if (fillToRect) {
+      const { l, t, r, b } = fillToRect;
+      cx = (l + (1 - r)) / 2 * 100;
+      cy = (t + (1 - b)) / 2 * 100;
+    }
+    const posX = `${Math.round(cx)}%`;
+    const posY = `${Math.round(cy)}%`;
+    if (pathType === "shape") {
+      return `radial-gradient(farthest-side at ${posX} ${posY}, ${stopStrings})`;
+    }
+    return `radial-gradient(circle at ${posX} ${posY}, ${stopStrings})`;
+  }
+  return `linear-gradient(180deg, ${stopStrings})`;
+}
+function parsePatternFillCss(pattFill) {
+  if (!pattFill) {
+    return void 0;
+  }
+  const fgColor = parseDrawingColor(pattFill["a:fgClr"]) ?? "#000000";
+  const bgColor = parseDrawingColor(pattFill["a:bgClr"]) ?? "#ffffff";
+  const preset = String(pattFill["@_prst"] || "ltDnDiag");
+  switch (preset) {
+    case "ltHorz":
+    case "horz":
+    case "narHorz":
+    case "dkHorz":
+    case "wdUpDiag":
+      return `repeating-linear-gradient(0deg, ${bgColor}, ${bgColor} 3px, ${fgColor} 3px, ${fgColor} 4px)`;
+    case "ltVert":
+    case "vert":
+    case "narVert":
+    case "dkVert":
+    case "wdDnDiag":
+      return `repeating-linear-gradient(90deg, ${bgColor}, ${bgColor} 3px, ${fgColor} 3px, ${fgColor} 4px)`;
+    case "ltDnDiag":
+    case "dnDiag":
+    case "dkDnDiag":
+      return `repeating-linear-gradient(135deg, ${bgColor}, ${bgColor} 3px, ${fgColor} 3px, ${fgColor} 4px)`;
+    case "ltUpDiag":
+    case "upDiag":
+    case "dkUpDiag":
+      return `repeating-linear-gradient(45deg, ${bgColor}, ${bgColor} 3px, ${fgColor} 3px, ${fgColor} 4px)`;
+    case "dashHorz":
+    case "dashVert":
+    case "dashDnDiag":
+    case "dashUpDiag":
+      return `repeating-linear-gradient(135deg, ${bgColor}, ${bgColor} 4px, ${fgColor} 4px, ${fgColor} 6px, ${bgColor} 6px, ${bgColor} 10px)`;
+    case "smCheck":
+    case "lgCheck":
+      return `repeating-conic-gradient(${fgColor} 0% 25%, ${bgColor} 0% 50%) 0 0 / 8px 8px`;
+    case "smGrid":
+    case "lgGrid":
+      return `repeating-linear-gradient(0deg, ${fgColor} 0px, ${fgColor} 1px, transparent 1px, transparent 6px), repeating-linear-gradient(90deg, ${fgColor} 0px, ${fgColor} 1px, transparent 1px, transparent 6px), ${bgColor}`;
+    case "dotGrid":
+    case "pct5":
+    case "pct10":
+    case "pct20":
+    case "pct25":
+    case "pct30":
+    case "pct40":
+    case "pct50":
+    case "pct60":
+    case "pct70":
+    case "pct75":
+    case "pct80":
+    case "pct90":
+      return `radial-gradient(${fgColor} 1px, ${bgColor} 1px) 0 0 / 4px 4px`;
+    case "smConfetti":
+    case "lgConfetti":
+    case "zigZag":
+    case "wave":
+    case "sphere":
+    case "divot":
+    case "shingle":
+    case "weave":
+    case "plaid":
+    case "trellis":
+      return `repeating-linear-gradient(45deg, ${bgColor}, ${bgColor} 2px, ${fgColor} 2px, ${fgColor} 3px)`;
+    case "solidDmnd":
+    case "openDmnd":
+      return `repeating-conic-gradient(${fgColor} 0% 25%, ${bgColor} 0% 50%) 0 0 / 10px 10px`;
+    default:
+      return `repeating-linear-gradient(135deg, ${bgColor}, ${bgColor} 3px, ${fgColor} 3px, ${fgColor} 4px)`;
+  }
+}
+function ooxmlDashToCss(dashVal) {
+  if (!dashVal) {
+    return "solid";
+  }
+  switch (dashVal) {
+    case "dot":
+    case "sysDot":
+      return "dotted";
+    case "dash":
+    case "sysDash":
+    case "lgDash":
+      return "dashed";
+    case "dashDot":
+    case "lgDashDot":
+    case "sysDashDot":
+    case "lgDashDotDot":
+    case "sysDashDotDot":
+      return "dashed";
+    case "solid":
+      return "solid";
+    default:
+      return "solid";
+  }
+}
+function parseCellBorders(cellProperties) {
+  if (!cellProperties) {
+    return {};
+  }
+  const borderStyle = {};
+  const edges = [
+    { xml: "a:lnL", prefix: "borderLeft" },
+    { xml: "a:lnR", prefix: "borderRight" },
+    { xml: "a:lnT", prefix: "borderTop" },
+    { xml: "a:lnB", prefix: "borderBottom" }
+  ];
+  for (const edge of edges) {
+    const ln = cellProperties[edge.xml];
+    if (!ln) {
+      continue;
+    }
+    const widthEmu = Number.parseInt(String(ln["@_w"] || "0"), 10);
+    const widthPx = Math.max(1, Math.round(widthEmu / 12700));
+    const prstDash = ln["a:prstDash"];
+    const dashVal = prstDash ? String(prstDash["@_val"] || "") : void 0;
+    const cssBorderStyle = ooxmlDashToCss(dashVal);
+    const color = parseDrawingColor(ln["a:solidFill"]);
+    if (color) {
+      const opacity = parseDrawingColorOpacity(ln["a:solidFill"]);
+      const key = `${edge.prefix}`;
+      borderStyle[key] = `${widthPx}px ${cssBorderStyle} ${colorWithOpacity(color, opacity)}`;
+    }
+  }
+  return borderStyle;
+}
+function parseCellTextEffects(runProps) {
+  const effectLst = runProps?.["a:effectLst"];
+  if (!effectLst) {
+    return void 0;
+  }
+  const textShadowParts = [];
+  const outerShdw = effectLst["a:outerShdw"];
+  if (outerShdw) {
+    const shdwColor = parseDrawingColor(outerShdw);
+    if (shdwColor) {
+      const blurRad = Number.parseInt(String(outerShdw["@_blurRad"] || "0"), 10);
+      const blurPx = blurRad > 0 ? Math.round(blurRad / 12700) : 0;
+      const distVal = Number.parseInt(String(outerShdw["@_dist"] || "0"), 10);
+      const dirVal = Number.parseInt(String(outerShdw["@_dir"] || "0"), 10);
+      let offX = 0;
+      let offY = 0;
+      if (distVal > 0) {
+        const angleRad = dirVal / 6e4 * (Math.PI / 180);
+        offX = Math.round(distVal * Math.cos(angleRad) / 12700);
+        offY = Math.round(distVal * Math.sin(angleRad) / 12700);
+      }
+      textShadowParts.push(`${offX}px ${offY}px ${blurPx}px ${shdwColor}`);
+    }
+  }
+  const glow = effectLst["a:glow"];
+  if (glow) {
+    const glowColor = parseDrawingColor(glow);
+    if (glowColor) {
+      const glowRad = Number.parseInt(String(glow["@_rad"] || "0"), 10);
+      const glowPx = glowRad > 0 ? Math.round(glowRad / 12700) : 2;
+      textShadowParts.push(`0px 0px ${glowPx}px ${glowColor}`);
+    }
+  }
+  return textShadowParts.length > 0 ? textShadowParts.join(", ") : void 0;
+}
+
+// src/viewer/utils/table-cell-style.tsx
+function extractCellText(cellXml) {
+  if (!cellXml) {
+    return "";
+  }
+  const txBody = cellXml["a:txBody"];
+  const paragraphs = ensureArrayValue(txBody?.["a:p"]);
+  const paragraphTexts = [];
+  paragraphs.forEach((paragraph) => {
+    const textParts = [];
+    const runs = ensureArrayValue(paragraph["a:r"]);
+    runs.forEach((run) => {
+      textParts.push((0, dist_exports.xmlText)(run["a:t"]) ?? "");
+    });
+    const fields = ensureArrayValue(paragraph["a:fld"]);
+    fields.forEach((field) => {
+      textParts.push((0, dist_exports.xmlText)(field["a:t"]) ?? "");
+    });
+    paragraphTexts.push(textParts.join(""));
+  });
+  return paragraphTexts.join("\n");
+}
+function parseParagraphAlignment(value) {
+  const alignment = String(value || "").toLowerCase();
+  if (alignment === "ctr") {
+    return "center";
+  }
+  if (alignment === "r") {
+    return "right";
+  }
+  if (alignment === "just" || alignment === "justify") {
+    return "justify";
+  }
+  return "left";
+}
+function extractTableCellStyle(cellXml, fallbackStyle, schemeColorOverrides) {
+  const { color: _fallbackColor, ...fallbackWithoutColor } = fallbackStyle;
+  const cellStyle = { ...fallbackWithoutColor };
+  const txBody = cellXml["a:txBody"];
+  const paragraphs = ensureArrayValue(txBody?.["a:p"]);
+  const firstParagraph = paragraphs[0];
+  const paragraphProperties = firstParagraph?.["a:pPr"];
+  const runs = ensureArrayValue(firstParagraph?.["a:r"]);
+  const firstRun = runs[0];
+  const runProps = firstRun?.["a:rPr"] || paragraphProperties?.["a:defRPr"];
+  if (runProps?.["@_sz"]) {
+    const pointSize = Number.parseInt(String(runProps["@_sz"]), 10) / 100;
+    if (Number.isFinite(pointSize) && pointSize > 0) {
+      cellStyle.fontSize = pointSize * (96 / 72);
+    }
+  }
+  if (runProps?.["@_b"] !== void 0) {
+    cellStyle.fontWeight = runProps["@_b"] === "1" ? 700 : 400;
+  }
+  if (runProps?.["@_i"] !== void 0) {
+    cellStyle.fontStyle = runProps["@_i"] === "1" ? "italic" : "normal";
+  }
+  if (runProps?.["@_u"] !== void 0) {
+    cellStyle.textDecorationLine = runProps["@_u"] === "sng" ? "underline" : "none";
+  }
+  const runColor = parseDrawingColor(runProps?.["a:solidFill"], schemeColorOverrides) || parseDrawingColor(runProps?.["a:highlight"], schemeColorOverrides);
+  if (runColor) {
+    const opacity = parseDrawingColorOpacity(runProps?.["a:solidFill"]);
+    cellStyle.color = colorWithOpacity(runColor, opacity);
+  }
+  const fontFamily = runProps?.["a:latin"]?.["@_typeface"] || runProps?.["a:ea"]?.["@_typeface"] || runProps?.["a:cs"]?.["@_typeface"];
+  if (fontFamily) {
+    cellStyle.fontFamily = fontFamily;
+  }
+  if (paragraphProperties?.["@_algn"]) {
+    cellStyle.textAlign = parseParagraphAlignment(paragraphProperties["@_algn"]);
+  }
+  const cellProperties = cellXml["a:tcPr"];
+  const cellFill = parseDrawingColor(
+    cellProperties?.["a:solidFill"],
+    schemeColorOverrides
+  );
+  if (cellFill) {
+    const opacity = parseDrawingColorOpacity(
+      cellProperties?.["a:solidFill"]
+    );
+    cellStyle.backgroundColor = colorWithOpacity(cellFill, opacity);
+  } else {
+    const gradCss = parseGradientFillCss(cellProperties?.["a:gradFill"]);
+    if (gradCss) {
+      cellStyle.background = gradCss;
+    } else {
+      const pattCss = parsePatternFillCss(cellProperties?.["a:pattFill"]);
+      if (pattCss) {
+        cellStyle.background = pattCss;
+      }
+    }
+  }
+  const edgeBorders = parseCellBorders(cellProperties);
+  Object.assign(cellStyle, edgeBorders);
+  if (!cellStyle.borderLeftColor && !cellStyle.borderRightColor && !cellStyle.borderTopColor && !cellStyle.borderBottomColor) {
+    const borderColor = parseDrawingColor(
+      cellProperties?.["a:lnL"]?.["a:solidFill"],
+      schemeColorOverrides
+    ) || parseDrawingColor(
+      cellProperties?.["a:lnR"]?.["a:solidFill"],
+      schemeColorOverrides
+    ) || parseDrawingColor(
+      cellProperties?.["a:lnT"]?.["a:solidFill"],
+      schemeColorOverrides
+    ) || parseDrawingColor(
+      cellProperties?.["a:lnB"]?.["a:solidFill"],
+      schemeColorOverrides
+    );
+    if (borderColor) {
+      cellStyle.borderColor = borderColor;
+    }
+  }
+  if (cellProperties) {
+    const margin = (key) => Number.parseInt(String(cellProperties[key] ?? ""), 10) / EMU_PER_PX;
+    const marL = margin("@_marL");
+    const marR = margin("@_marR");
+    const marT = margin("@_marT");
+    const marB = margin("@_marB");
+    if (marL >= 0) {
+      cellStyle.paddingLeft = marL;
+    }
+    if (marR >= 0) {
+      cellStyle.paddingRight = marR;
+    }
+    if (marT >= 0) {
+      cellStyle.paddingTop = marT;
+    }
+    if (marB >= 0) {
+      cellStyle.paddingBottom = marB;
+    }
+  }
+  if (cellProperties?.["@_anchor"]) {
+    const anchor = String(cellProperties["@_anchor"]);
+    if (anchor === "ctr") {
+      cellStyle.verticalAlign = "middle";
+    } else if (anchor === "b") {
+      cellStyle.verticalAlign = "bottom";
+    } else {
+      cellStyle.verticalAlign = "top";
+    }
+  }
+  if (cellProperties?.["@_vert"]) {
+    const vert = String(cellProperties["@_vert"]);
+    switch (vert) {
+      case "vert":
+      case "eaVert":
+      case "wordArtVert":
+      case "wordArtVertRtl":
+        cellStyle.writingMode = "vertical-rl";
+        break;
+      case "vert270":
+      case "mongolianVert":
+        cellStyle.writingMode = "vertical-lr";
+        break;
+    }
+    if (vert === "wordArtVert") {
+      cellStyle.textOrientation = "upright";
+    } else if (cellStyle.writingMode) {
+      cellStyle.textOrientation = "mixed";
+    }
+    if (vert === "wordArtVertRtl") {
+      cellStyle.direction = "rtl";
+    }
+  }
+  const textShadow = parseCellTextEffects(runProps);
+  if (textShadow) {
+    cellStyle.textShadow = textShadow;
+  }
+  return cellStyle;
+}
+function getTableCellBandStyle(element, rowIndex, cellIndex, rowCount, columnCount, styleCtx) {
+  if (element.type !== "table") {
+    return void 0;
+  }
+  return getTableCellBandStyle$1(element.tableData, rowIndex, cellIndex, rowCount, columnCount, {
+    tableStyleMap: styleCtx?.tableStyleMap,
+    colorScheme: styleCtx?.theme?.colorScheme,
+    fontScheme: styleCtx?.theme?.fontScheme
+  });
+}
+
+// src/viewer/utils/table-data-parse.tsx
+function getGraphicDataFromElement(element) {
+  return element.rawXml?.["a:graphic"]?.["a:graphicData"];
+}
+function getTableXmlFromElement(element) {
+  return getGraphicDataFromElement(element)?.["a:tbl"];
+}
+function parseTableElementData(element, fallbackTextStyle) {
+  const table = getTableXmlFromElement(element);
+  if (!table) {
+    return null;
+  }
+  const rows = ensureArrayValue(table["a:tr"]);
+  if (rows.length === 0) {
+    return null;
+  }
+  const tableGrid = table["a:tblGrid"];
+  const gridColumns = ensureArrayValue(
+    tableGrid?.["a:gridCol"]
+  );
+  const columnWidths = gridColumns.map((column) => {
+    const width = Number.parseInt(String(column?.["@_w"] || ""), 10);
+    return Number.isFinite(width) && width > 0 ? width : 0;
+  });
+  const totalColumnWidth = columnWidths.reduce((sum, width) => sum + width, 0);
+  let columnPercentages = totalColumnWidth > 0 ? columnWidths.map((width) => width / totalColumnWidth * 100) : [];
+  const modelWidths = element.type === "table" ? element.tableData?.columnWidths : void 0;
+  if (modelWidths?.length && modelWidths.length === gridColumns.length && modelWidths.every((width) => Number.isFinite(width) && width >= 0) && Math.abs(modelWidths.reduce((sum, width) => sum + width, 0) - 1) <= Number.EPSILON * modelWidths.length * 4) {
+    columnPercentages = modelWidths.map((width) => width * 100);
+  }
+  const cells = [];
+  rows.forEach((row, rowIndex) => {
+    const rowCells = ensureArrayValue(row["a:tc"]);
+    rowCells.forEach((cell, columnIndex) => {
+      cells.push({
+        rowIndex,
+        columnIndex,
+        text: extractCellText(cell),
+        style: extractTableCellStyle(cell, fallbackTextStyle),
+        rawCell: cell
+      });
+    });
+  });
+  const columnCount = Math.max(
+    columnPercentages.length,
+    rows.reduce((maxCount, row) => {
+      const rowCells = ensureArrayValue(row["a:tc"]);
+      return Math.max(maxCount, rowCells.length);
+    }, 0)
+  );
+  return {
+    rowCount: rows.length,
+    columnCount,
+    rows,
+    columnPercentages,
+    cells
+  };
+}
+function renderTableCellContent(cell, fallbackText) {
+  const blocks = cell ? cellParagraphBlocks(cell) : void 0;
+  if (blocks) {
+    return blocks.map((block, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { display: "block", ...block.css },
+        children: block.runs.map(renderRun)
+      },
+      `p-${index}`
+    ));
+  }
+  const runs = cell?.textRuns;
+  if (!runs || runs.length === 0) {
+    return fallbackText || " ";
+  }
+  return runs.map(
+    (run, index) => run.isParagraphBreak ? /* @__PURE__ */ jsx("div", { style: { display: "block", height: 0 } }, `p-${index}`) : renderRun(run, index)
+  );
+}
+function renderRun(run, 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 getCellDiagonalBorders(style, tableData, pos, styleCtx) {
+  return getCellDiagonalBorders$1(style, tableData, pos, {
+    tableStyleMap: styleCtx?.tableStyleMap,
+    colorScheme: styleCtx?.theme?.colorScheme,
+    fontScheme: styleCtx?.theme?.fontScheme
+  });
+}
+function TableCellDiagonalBorders({
+  diag
+}) {
+  const hasDown = Boolean(diag.diagDownColor && diag.diagDownWidth);
+  const hasUp = Boolean(diag.diagUpColor && diag.diagUpWidth);
+  if (!hasDown && !hasUp) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        overflow: "visible"
+      },
+      children: [
+        hasDown && /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: "0",
+            y1: "0",
+            x2: "100%",
+            y2: "100%",
+            stroke: diag.diagDownColor,
+            strokeWidth: diag.diagDownWidth
+          }
+        ),
+        hasUp && /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: "0",
+            y1: "100%",
+            x2: "100%",
+            y2: "0",
+            stroke: diag.diagUpColor,
+            strokeWidth: diag.diagUpWidth
+          }
+        )
+      ]
+    }
+  );
+}
+function TableCellInput({
+  initialText,
+  style,
+  onCommit,
+  onCancel
+}) {
+  const inputRef = useRef(null);
+  const committedRef = useRef(false);
+  const onCommitRef = useRef(onCommit);
+  onCommitRef.current = onCommit;
+  useEffect(() => {
+    const el = inputRef.current;
+    if (el) {
+      el.focus();
+      el.select();
+    }
+  }, []);
+  useEffect(() => {
+    const input = inputRef.current;
+    return () => {
+      if (!committedRef.current && input) {
+        onCommitRef.current(input.value);
+      }
+    };
+  }, []);
+  const doCommit = (text) => {
+    if (committedRef.current) {
+      return;
+    }
+    committedRef.current = true;
+    onCommit(text);
+  };
+  const doCancel = () => {
+    committedRef.current = true;
+    onCancel();
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      defaultValue: initialText,
+      className: "w-full bg-transparent outline-none",
+      style: {
+        ...style,
+        padding: 0,
+        margin: 0,
+        border: "none"
+      },
+      onPointerDown: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      onClick: (e) => e.stopPropagation(),
+      onDoubleClick: (e) => e.stopPropagation(),
+      onBlur: (e) => doCommit(e.currentTarget.value),
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (e.key === "Escape") {
+          e.preventDefault();
+          doCancel();
+        } else if (e.key === "Enter") {
+          e.preventDefault();
+          doCommit(e.currentTarget.value);
+        } else if (e.key === "Tab") {
+          e.preventDefault();
+          doCommit(e.currentTarget.value);
+        }
+      }
+    }
+  );
+}
+function TableResizeOverlay({
+  children,
+  columnWidths,
+  editable,
+  onResizeColumns,
+  onResizeRow
+}) {
+  const containerRef = useRef(null);
+  const [rowBounds, setRowBounds] = useState([]);
+  const dragRef = useRef(null);
+  const colBoundaries = useMemo(() => computeColumnBoundaries(columnWidths), [columnWidths]);
+  const measureRows = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const table = container.querySelector("table");
+    if (!table) {
+      return;
+    }
+    const trs = table.querySelectorAll("tbody > tr");
+    const bounds = [];
+    let cumHeight = 0;
+    trs.forEach((tr, i) => {
+      cumHeight += tr.offsetHeight;
+      if (i < trs.length - 1) {
+        bounds.push(cumHeight);
+      }
+    });
+    setRowBounds((prev) => {
+      if (prev.length === bounds.length && prev.every((v, i) => v === bounds[i])) {
+        return prev;
+      }
+      return bounds;
+    });
+  }, []);
+  useLayoutEffect(() => {
+    measureRows();
+  });
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      const drag = dragRef.current;
+      if (!drag) {
+        return;
+      }
+      e.preventDefault();
+      const delta = drag.type === "col" ? e.clientX - drag.startPos : e.clientY - drag.startPos;
+      drag.handleEl.style.transform = drag.type === "col" ? `translateX(${delta}px)` : `translateY(${delta}px)`;
+    };
+    const handleMouseUp = (e) => {
+      const drag = dragRef.current;
+      if (!drag || !containerRef.current) {
+        return;
+      }
+      const rect = containerRef.current.getBoundingClientRect();
+      if (e.clientX !== drag.startPos && drag.type === "col" && drag.initialWidths && onResizeColumns) {
+        const deltaProp = (e.clientX - drag.startPos) / rect.width;
+        onResizeColumns(computeResizedColumnWidths(drag.initialWidths, drag.index, deltaProp));
+      } else if (e.clientY !== drag.startPos && drag.type === "row" && onResizeRow) {
+        const deltaY = e.clientY - drag.startPos;
+        const newHeight = computeResizedRowHeight(
+          drag.initialRowHeight ?? DEFAULT_ROW_HEIGHT,
+          deltaY
+        );
+        onResizeRow(drag.index, newHeight);
+      }
+      drag.handleEl.style.transform = "";
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      dragRef.current = null;
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [onResizeColumns, onResizeRow]);
+  if (!editable) {
+    return children;
+  }
+  const startColDrag = (e, index) => {
+    e.preventDefault();
+    e.stopPropagation();
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    dragRef.current = {
+      type: "col",
+      index,
+      startPos: e.clientX,
+      handleEl: e.currentTarget,
+      initialWidths: [...columnWidths]
+    };
+  };
+  const startRowDrag = (e, index) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const table = containerRef.current?.querySelector("table");
+    const tr = table?.querySelectorAll("tbody > tr")[index];
+    const actualHeight = tr?.offsetHeight ?? DEFAULT_ROW_HEIGHT;
+    document.body.style.cursor = "row-resize";
+    document.body.style.userSelect = "none";
+    dragRef.current = {
+      type: "row",
+      index,
+      startPos: e.clientY,
+      handleEl: e.currentTarget,
+      initialRowHeight: actualHeight
+    };
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative w-full h-full", children: [
+    children,
+    colBoundaries.map((leftPct, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-0 bottom-0 w-[6px] cursor-col-resize z-10 pointer-events-auto group",
+        style: { left: `calc(${leftPct}% - 3px)` },
+        onMouseDown: (e) => startColDrag(e, i),
+        children: /* @__PURE__ */ jsx("div", { className: "w-px h-full mx-auto bg-transparent group-hover:bg-blue-400/60 transition-colors" })
+      },
+      `col-h-${i}`
+    )),
+    rowBounds.map((topPx, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute left-0 right-0 h-[6px] cursor-row-resize z-10 pointer-events-auto group",
+        style: { top: `${topPx - 3}px` },
+        onMouseDown: (e) => startRowDrag(e, i),
+        children: /* @__PURE__ */ jsx("div", { className: "h-px w-full my-auto bg-transparent group-hover:bg-blue-400/60 transition-colors" })
+      },
+      `row-h-${i}`
+    ))
+  ] });
+}
+function renderTableFromTableData(element, textStyle, options) {
+  const tableData = element.tableData;
+  const rowCount = tableData.rows.length;
+  const columnCount = tableData.columnWidths.length;
+  const selectedCell = options?.selectedCell || null;
+  const isEditable = Boolean(options?.editable) && canDrillDown(element);
+  const hasCellSelectionHandler = typeof options?.onSelectCell === "function";
+  const sharedCtx = {
+    tableStyleMap: options?.styleCtx?.tableStyleMap,
+    colorScheme: options?.styleCtx?.theme?.colorScheme,
+    fontScheme: options?.styleCtx?.theme?.fontScheme
+  };
+  const cellCss = (cell, rowIndex, cellIndex) => tableCellCss(
+    tableData,
+    cell,
+    { rowIndex, cellIndex, rowCount, columnCount },
+    sharedCtx,
+    textStyle
+  );
+  const selectionRect = (() => {
+    if (!selectedCell?.selectedCells || selectedCell.selectedCells.length < 2) {
+      return void 0;
+    }
+    const first = selectedCell.selectedCells[0];
+    const last = selectedCell.selectedCells[selectedCell.selectedCells.length - 1];
+    return computeSelectionRect(first.row, first.col, last.row, last.col, tableData);
+  })();
+  return /* @__PURE__ */ jsx(
+    TableResizeOverlay,
+    {
+      columnWidths: tableData.columnWidths,
+      editable: isEditable,
+      onResizeColumns: options?.onResizeColumns,
+      onResizeRow: options?.onResizeRow,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "w-full h-full overflow-hidden",
+            isEditable && hasCellSelectionHandler ? "pointer-events-auto" : "pointer-events-none"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            "table",
+            {
+              className: "w-full h-full border-collapse table-fixed",
+              style: {
+                fontFamily: DEFAULT_FONT_FAMILY$1,
+                // `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",
+                  {
+                    style: { width: `${(w * 100).toFixed(2)}%` }
+                  },
+                  `${element.id}-col-${ci}`
+                )) }),
+                /* @__PURE__ */ jsx("tbody", { children: tableData.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+                  "tr",
+                  {
+                    style: row.height ? { height: row.height } : void 0,
+                    children: row.cells.map((cell, cellIndex) => {
+                      if (cell.hMerge || cell.vMerge) {
+                        return null;
+                      }
+                      const isCellSelected = selectedCell?.rowIndex === rowIndex && selectedCell?.columnIndex === cellIndex;
+                      const isInMultiSelection = isCellInRect(rowIndex, cellIndex, selectionRect);
+                      const isCellEditing = isCellSelected && selectedCell?.isEditing;
+                      const diag = getCellDiagonalBorders(
+                        cell.style,
+                        tableData,
+                        { rowIndex, cellIndex, rowCount, columnCount },
+                        options?.styleCtx
+                      );
+                      return /* @__PURE__ */ jsxs(
+                        "td",
+                        {
+                          className: cn(
+                            "px-1 py-0.5 align-top",
+                            // No border of its own: a side the deck gives no border renders with
+                            // none, as PowerPoint does. Editing keeps a faint grid.
+                            isEditable && hasCellSelectionHandler ? "border border-blue-200/70 cursor-cell" : null,
+                            isCellSelected ? "ring-1 ring-inset ring-blue-500" : null,
+                            isInMultiSelection && !isCellSelected ? "bg-blue-500/15 ring-1 ring-inset ring-blue-400/50" : null
+                          ),
+                          colSpan: cell.gridSpan && cell.gridSpan > 1 ? cell.gridSpan : void 0,
+                          rowSpan: cell.rowSpan && cell.rowSpan > 1 ? cell.rowSpan : void 0,
+                          style: {
+                            ...cellCss(cell, rowIndex, cellIndex),
+                            ...diag ? { position: "relative" } : void 0
+                          },
+                          onClick: (event) => {
+                            if (!isEditable || !hasCellSelectionHandler) {
+                              return;
+                            }
+                            event.stopPropagation();
+                            if (event.shiftKey && selectedCell) {
+                              const rect = computeSelectionRect(
+                                selectedCell.rowIndex,
+                                selectedCell.columnIndex,
+                                rowIndex,
+                                cellIndex,
+                                tableData
+                              );
+                              options?.onSelectCell?.({
+                                rowIndex: selectedCell.rowIndex,
+                                columnIndex: selectedCell.columnIndex,
+                                selectedCells: rectToCells(rect)
+                              });
+                            } else {
+                              options?.onSelectCell?.({
+                                rowIndex,
+                                columnIndex: cellIndex
+                              });
+                            }
+                          },
+                          onDoubleClick: (event) => {
+                            if (!isEditable || !hasCellSelectionHandler) {
+                              return;
+                            }
+                            event.stopPropagation();
+                            options?.onSelectCell?.({
+                              rowIndex,
+                              columnIndex: cellIndex,
+                              isEditing: true
+                            });
+                          },
+                          children: [
+                            diag ? /* @__PURE__ */ jsx(TableCellDiagonalBorders, { diag }) : null,
+                            isCellEditing ? /* @__PURE__ */ jsx(
+                              TableCellInput,
+                              {
+                                initialText: cell.text ?? "",
+                                style: cellCss(cell, rowIndex, cellIndex),
+                                onCommit: (text) => {
+                                  options?.onCommitCellEdit?.(rowIndex, cellIndex, text);
+                                },
+                                onCancel: () => {
+                                  options?.onSelectCell?.({
+                                    rowIndex,
+                                    columnIndex: cellIndex
+                                  });
+                                }
+                              }
+                            ) : renderTableCellContent(cell, cell.text || "\xA0")
+                          ]
+                        },
+                        `${element.id}-cell-${rowIndex}-${cellIndex}`
+                      );
+                    })
+                  },
+                  `${element.id}-row-${rowIndex}`
+                )) })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function renderTableElement(element, textStyle, options) {
+  const parsedTable = parseTableElementData(element, textStyle);
+  if (!parsedTable) {
+    const tableEl2 = element;
+    if (tableEl2.tableData && tableEl2.tableData.rows.length > 0) {
+      return renderTableFromTableData(tableEl2, 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) && canDrillDown(element);
+  const hasCellSelectionHandler = typeof options?.onSelectCell === "function";
+  const tableEl = element;
+  const xmlSelectionRect = (() => {
+    if (!selectedCell?.selectedCells || selectedCell.selectedCells.length < 2) {
+      return void 0;
+    }
+    if (!tableEl.tableData) {
+      return void 0;
+    }
+    const first = selectedCell.selectedCells[0];
+    const last = selectedCell.selectedCells[selectedCell.selectedCells.length - 1];
+    return computeSelectionRect(first.row, first.col, last.row, last.col, tableEl.tableData);
+  })();
+  const schemeOverrides = options?.styleCtx?.theme?.colorScheme ? options.styleCtx.theme.colorScheme : void 0;
+  return /* @__PURE__ */ jsx(
+    TableResizeOverlay,
+    {
+      columnWidths: parsedTable.columnPercentages.map((p) => p / 100),
+      editable: isEditable,
+      onResizeColumns: options?.onResizeColumns,
+      onResizeRow: options?.onResizeRow,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "w-full h-full overflow-hidden",
+            isEditable && hasCellSelectionHandler ? "pointer-events-auto" : "pointer-events-none"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            "table",
+            {
+              className: "w-full h-full border-collapse table-fixed",
+              style: {
+                fontFamily: DEFAULT_FONT_FAMILY$1,
+                // `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",
+                  {
+                    style: { width: `${percentage.toFixed(2)}%` }
+                  },
+                  `${element.id}-col-${columnIndex}`
+                )) }) : null,
+                /* @__PURE__ */ jsx("tbody", { children: parsedTable.rows.map((row, rowIndex) => {
+                  const cells = ensureArrayValue(row["a:tc"]);
+                  const rowHeightRaw = Number.parseInt(String(row["@_h"] || ""), 10);
+                  const rowHeight = Number.isFinite(rowHeightRaw) && rowHeightRaw > 0 ? Math.max(16, rowHeightRaw / EMU_PER_PX) : void 0;
+                  return /* @__PURE__ */ jsx(
+                    "tr",
+                    {
+                      style: rowHeight ? { height: rowHeight } : void 0,
+                      children: cells.map((cell, cellIndex) => {
+                        const isHMerged = cell["@_hMerge"] === "1";
+                        const isVMerged = cell["@_vMerge"] === "1";
+                        if (isHMerged || isVMerged) {
+                          return null;
+                        }
+                        const gridSpanRaw = Number.parseInt(String(cell["@_gridSpan"] || ""), 10);
+                        const colSpan = Number.isFinite(gridSpanRaw) && gridSpanRaw > 1 ? gridSpanRaw : void 0;
+                        const rowSpanRaw = Number.parseInt(String(cell["@_rowSpan"] || ""), 10);
+                        const rSpan = Number.isFinite(rowSpanRaw) && rowSpanRaw > 1 ? rowSpanRaw : void 0;
+                        const bandStyle = getTableCellBandStyle(
+                          element,
+                          rowIndex,
+                          cellIndex,
+                          parsedTable.rowCount,
+                          parsedTable.columnCount,
+                          options?.styleCtx
+                        );
+                        const xmlCellStyle = extractTableCellStyle(cell, textStyle, schemeOverrides);
+                        const tdCellOverride = tableEl.tableData?.rows[rowIndex]?.cells[cellIndex]?.style;
+                        const diag = getCellDiagonalBorders(
+                          tdCellOverride,
+                          tableEl.tableData,
+                          {
+                            rowIndex,
+                            cellIndex,
+                            rowCount: parsedTable.rowCount,
+                            columnCount: parsedTable.columnCount
+                          },
+                          options?.styleCtx
+                        );
+                        const mergedStyle = {
+                          // Lowest-priority fallback: `xmlCellStyle` never carries a
+                          // `color` of its own (see `extractTableCellStyle`), so this
+                          // is the only source when neither the table style band nor
+                          // an explicit run/cell colour applies.
+                          color: textStyle.color,
+                          // PowerPoint's line spacing and default margins, as
+                          // `tableCellCss` gives the structured-model path.
+                          ...TABLE_CELL_TEXT_DEFAULTS,
+                          ...bandStyle,
+                          ...xmlCellStyle,
+                          ...tdCellOverride ? cellStyleToCss(tdCellOverride) : void 0,
+                          ...diag ? { position: "relative" } : void 0
+                        };
+                        return /* @__PURE__ */ jsxs(
+                          "td",
+                          {
+                            className: cn(
+                              "px-1 py-0.5 align-top",
+                              // No border of its own: a side the deck gives no border renders
+                              // with none, as PowerPoint does. Editing keeps a faint grid.
+                              isEditable && hasCellSelectionHandler ? "border border-blue-200/70 cursor-cell" : null,
+                              selectedCell?.rowIndex === rowIndex && selectedCell?.columnIndex === cellIndex ? "ring-1 ring-inset ring-blue-500" : null,
+                              isCellInRect(rowIndex, cellIndex, xmlSelectionRect) && !(selectedCell?.rowIndex === rowIndex && selectedCell?.columnIndex === cellIndex) ? "bg-blue-500/15 ring-1 ring-inset ring-blue-400/50" : null
+                            ),
+                            colSpan,
+                            rowSpan: rSpan,
+                            style: mergedStyle,
+                            onClick: (event) => {
+                              if (!isEditable || !hasCellSelectionHandler) {
+                                return;
+                              }
+                              event.stopPropagation();
+                              if (event.shiftKey && selectedCell && tableEl.tableData) {
+                                const rect = computeSelectionRect(
+                                  selectedCell.rowIndex,
+                                  selectedCell.columnIndex,
+                                  rowIndex,
+                                  cellIndex,
+                                  tableEl.tableData
+                                );
+                                options?.onSelectCell?.({
+                                  rowIndex: selectedCell.rowIndex,
+                                  columnIndex: selectedCell.columnIndex,
+                                  selectedCells: rectToCells(rect)
+                                });
+                              } else {
+                                options?.onSelectCell?.({
+                                  rowIndex,
+                                  columnIndex: cellIndex
+                                });
+                              }
+                            },
+                            onDoubleClick: (event) => {
+                              if (!isEditable || !hasCellSelectionHandler) {
+                                return;
+                              }
+                              event.stopPropagation();
+                              options?.onSelectCell?.({
+                                rowIndex,
+                                columnIndex: cellIndex,
+                                isEditing: true
+                              });
+                            },
+                            children: [
+                              diag ? /* @__PURE__ */ jsx(TableCellDiagonalBorders, { diag }) : null,
+                              selectedCell?.rowIndex === rowIndex && selectedCell?.columnIndex === cellIndex && selectedCell?.isEditing ? /* @__PURE__ */ jsx(
+                                TableCellInput,
+                                {
+                                  initialText: extractCellText(cell) ?? "",
+                                  style: mergedStyle,
+                                  onCommit: (text) => {
+                                    options?.onCommitCellEdit?.(rowIndex, cellIndex, text);
+                                  },
+                                  onCancel: () => {
+                                    options?.onSelectCell?.({
+                                      rowIndex,
+                                      columnIndex: cellIndex
+                                    });
+                                  }
+                                }
+                              ) : renderTableCellContent(
+                                tableEl.tableData?.rows[rowIndex]?.cells[cellIndex],
+                                extractCellText(cell) || "\xA0"
+                              )
+                            ]
+                          },
+                          `${element.id}-cell-${rowIndex}-${cellIndex}`
+                        );
+                      })
+                    },
+                    `${element.id}-row-${rowIndex}`
+                  );
+                }) })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function renderGradientStops(stops) {
+  return stops.map((stop, i) => /* @__PURE__ */ jsx("stop", { offset: stop.offset, stopColor: stop.color, stopOpacity: stop.opacity }, i));
+}
+function partAttrs(part) {
+  return part ? chartPartToAttrs(part) : void 0;
+}
+function resolveReactPalette(chartData) {
+  return resolveChartPalette(chartData);
+}
+function buildReactChartViewModel(element) {
+  if (element.type !== "chart" || !element.chartData) {
+    return buildChartViewModel(element);
+  }
+  const palette = resolveReactPalette(element.chartData), themedElement = {
+    ...element,
+    chartData: { ...element.chartData, colorPalette: palette }
+  };
+  return buildChartViewModel(themedElement);
+}
+function renderPrimitive(prim, key) {
+  switch (prim.kind) {
+    case "rect": {
+      const r = prim;
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: r.x,
+          y: r.y,
+          width: r.w,
+          height: r.h,
+          fill: r.fill,
+          rx: r.rx ?? 0,
+          opacity: r.opacity ?? 1,
+          ...partAttrs(r.part),
+          children: r.title !== void 0 ? /* @__PURE__ */ jsx("title", { children: r.title }) : null
+        },
+        key
+      );
+    }
+    case "path": {
+      const p = prim;
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: p.d,
+          fill: p.fill,
+          stroke: p.stroke ?? "none",
+          strokeWidth: p.strokeWidth ?? 0,
+          strokeDasharray: p.dashArray,
+          fillOpacity: p.opacity ?? 1,
+          ...partAttrs(p.part),
+          children: p.title !== void 0 ? /* @__PURE__ */ jsx("title", { children: p.title }) : null
+        },
+        key
+      );
+    }
+    case "polyline": {
+      const p = prim;
+      return /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          points: p.points,
+          stroke: p.stroke,
+          strokeWidth: p.strokeWidth,
+          strokeDasharray: p.dashArray,
+          fill: p.fill,
+          opacity: p.opacity ?? 1,
+          ...partAttrs(p.part),
+          children: p.title !== void 0 ? /* @__PURE__ */ jsx("title", { children: p.title }) : null
+        },
+        key
+      );
+    }
+    case "circle": {
+      const c = prim;
+      return /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: c.cx,
+          cy: c.cy,
+          r: c.r,
+          fill: c.fill,
+          stroke: c.stroke,
+          strokeWidth: c.strokeWidth,
+          opacity: c.opacity ?? 1,
+          ...partAttrs(c.part),
+          children: c.title !== void 0 ? /* @__PURE__ */ jsx("title", { children: c.title }) : null
+        },
+        key
+      );
+    }
+    case "line": {
+      const l = prim;
+      return /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: l.x1,
+          y1: l.y1,
+          x2: l.x2,
+          y2: l.y2,
+          stroke: l.stroke,
+          strokeWidth: l.strokeWidth,
+          strokeDasharray: l.dashArray,
+          opacity: l.opacity ?? 1,
+          transform: l.transform,
+          children: l.title !== void 0 ? /* @__PURE__ */ jsx("title", { children: l.title }) : null
+        },
+        key
+      );
+    }
+    case "polygon": {
+      const p = prim;
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: p.points,
+          fill: p.fill,
+          stroke: p.stroke,
+          strokeWidth: p.strokeWidth,
+          opacity: p.opacity ?? 1,
+          strokeDasharray: p.dashArray,
+          transform: p.transform,
+          ...partAttrs(p.part),
+          children: p.title !== void 0 ? /* @__PURE__ */ jsx("title", { children: p.title }) : null
+        },
+        key
+      );
+    }
+    case "text":
+      return renderText(prim, key);
+    default:
+      return null;
+  }
+}
+function renderText(t, key) {
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: t.x,
+      y: t.y,
+      textAnchor: t.textAnchor,
+      fontSize: t.fontSize,
+      fill: t.fill,
+      fontWeight: t.fontWeight ?? "normal",
+      fontStyle: t.fontStyle ?? "normal",
+      fontFamily: t.fontFamily,
+      dominantBaseline: t.dominantBaseline,
+      opacity: t.opacity ?? 1,
+      transform: t.transform,
+      children: t.text
+    },
+    key
+  );
+}
+function renderChartViewModel(elementId, vm, preserveAspectRatio = "none") {
+  const legendItems = computeChartLegendLayout(vm);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "w-full h-full pointer-events-none",
+      viewBox: `0 0 ${vm.svgWidth} ${vm.svgHeight}`,
+      preserveAspectRatio,
+      children: [
+        vm.defs && vm.defs.length > 0 && /* @__PURE__ */ jsx("defs", { children: vm.defs.map(resolveChartSvgDef).map(
+          (def, i) => def.kind === "linearGradient" ? /* @__PURE__ */ jsx(
+            "linearGradient",
+            {
+              id: def.id,
+              x1: def.x1,
+              y1: def.y1,
+              x2: def.x2,
+              y2: def.y2,
+              children: renderGradientStops(def.stops)
+            },
+            `${elementId}-def-${i}`
+          ) : def.kind === "radialGradient" ? /* @__PURE__ */ jsx(
+            "radialGradient",
+            {
+              id: def.id,
+              cx: def.cx,
+              cy: def.cy,
+              r: def.r,
+              children: renderGradientStops(def.stops)
+            },
+            `${elementId}-def-${i}`
+          ) : /* @__PURE__ */ jsx(
+            "pattern",
+            {
+              id: def.id,
+              patternUnits: def.patternUnits,
+              patternContentUnits: def.patternContentUnits,
+              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: vm.titleStyle?.fontSize ?? 12,
+            fontWeight: vm.titleStyle?.fontWeight ?? 600,
+            fontFamily: vm.titleStyle?.fontFamily,
+            fill: vm.titleStyle?.fill ?? "#1e293b",
+            "data-chart-part": "title",
+            children: vm.titleRunSpans && vm.titleRunSpans.length > 0 ? vm.titleRunSpans.map((run, i) => /* @__PURE__ */ jsx(
+              "tspan",
+              {
+                fontSize: run.fontSize,
+                fontWeight: run.fontWeight,
+                fontStyle: run.fontStyle,
+                fontFamily: run.fontFamily,
+                fill: run.fill,
+                children: run.text
+              },
+              `${elementId}-title-run-${i}`
+            )) : vm.title
+          }
+        ),
+        vm.gridlines.map((gl, i) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: gl.x1,
+            y1: gl.y1,
+            x2: gl.x2,
+            y2: gl.y2,
+            stroke: gl.stroke,
+            strokeWidth: gl.strokeWidth
+          },
+          `${elementId}-gl-${i}`
+        )),
+        (vm.secondaryGridlines ?? []).map((gl, i) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: gl.x1,
+            y1: gl.y1,
+            x2: gl.x2,
+            y2: gl.y2,
+            stroke: gl.stroke,
+            strokeWidth: gl.strokeWidth,
+            strokeDasharray: gl.dashArray,
+            opacity: gl.opacity ?? 1
+          },
+          `${elementId}-sgl-${i}`
+        )),
+        vm.axisLabels.map((lbl, i) => renderText(lbl, `${elementId}-al-${i}`)),
+        (vm.secondaryAxisLabels ?? []).map((lbl, i) => renderText(lbl, `${elementId}-sal-${i}`)),
+        vm.zeroLine && /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: vm.zeroLine.x1,
+            y1: vm.zeroLine.y1,
+            x2: vm.zeroLine.x2,
+            y2: vm.zeroLine.y2,
+            stroke: vm.zeroLine.stroke,
+            strokeWidth: vm.zeroLine.strokeWidth
+          }
+        ),
+        vm.categoryLabels.map((lbl, i) => renderText(lbl, `${elementId}-cl-${i}`)),
+        vm.primitives.map((prim, i) => renderPrimitive(prim, `${elementId}-p-${i}`)),
+        vm.dataLabels.map((dl, i) => renderText(dl, `${elementId}-dl-${i}`)),
+        legendItems.map((item, i) => /* @__PURE__ */ jsxs(
+          "g",
+          {
+            transform: `translate(${item.x.toFixed(1)},${item.y.toFixed(1)})`,
+            children: [
+              item.lineSwatch ? item.lineSwatch.primitives.map(
+                (prim, si) => renderPrimitive(prim, `${elementId}-lg-${i}-sw-${si}`)
+              ) : /* @__PURE__ */ jsx("rect", { x: 0, y: -7, width: 10, height: 10, rx: 2, fill: item.color }),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: 13,
+                  y: 3,
+                  fontSize: item.fontSize,
+                  fill: item.fill,
+                  fontWeight: item.fontWeight,
+                  fontStyle: item.fontStyle,
+                  fontFamily: item.fontFamily,
+                  children: item.label
+                }
+              )
+            ]
+          },
+          `${elementId}-lg-${i}`
+        ))
+      ]
+    }
+  );
+}
+function renderChartElement(element) {
+  if (element.type !== "chart") {
+    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.chart.heading"] });
+  }
+  const chartData = element.chartData;
+  if (!chartData || chartData.series.length === 0) {
+    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.chart.heading"] });
+  }
+  const kind = resolveChartKind(chartData.chartType ?? "bar");
+  return renderChartViewModel(
+    element.id,
+    buildReactChartViewModel(element),
+    chartPreserveAspectRatio(kind)
+  );
+}
+function buildNotesPdf(pages) {
+  const images = pages.map((page) => {
+    const dataUrl = page.canvas.toDataURL("image/jpeg", 0.92);
+    const base64 = dataUrl.split(",")[1] ?? "";
+    const raw = atob(base64);
+    const bytes2 = new Uint8Array(raw.length);
+    for (let i = 0; i < raw.length; i++) {
+      bytes2[i] = raw.charCodeAt(i);
+    }
+    return { bytes: bytes2, w: page.canvas.width, h: page.canvas.height };
+  });
+  const meta = pages.map((page) => ({
+    notes: page.notes,
+    slideNumber: page.slideNumber
+  }));
+  const bytes = buildNotesPdfBytes(images, meta);
+  const blob = new Blob([bytes], { type: "application/pdf" });
+  return URL.createObjectURL(blob);
+}
+function buildPdfFromTiledImageData(pages) {
+  const bytes = buildTiledSlidesPdfBytes(pages);
+  const blob = new Blob([bytes], { type: "application/pdf" });
+  return URL.createObjectURL(blob);
+}
+var activePreview = null;
+function startPreviewAnimation(elementId, preset, options) {
+  stopPreviewAnimation();
+  const domEl = document.querySelector(`[data-element-id="${elementId}"]`);
+  const descriptor = buildPreviewAnimation(preset, {
+    ...options,
+    geometry: domEl ? measurePreviewGeometry(domEl) : void 0
+  });
+  if (!descriptor) {
+    return;
+  }
+  playDescriptor(elementId, descriptor);
+}
+function startMotionPathPreview(elementId, path, options) {
+  stopPreviewAnimation();
+  const domEl = document.querySelector(`[data-element-id="${elementId}"]`);
+  if (!domEl) {
+    return;
+  }
+  const stage = domEl.offsetParent;
+  const descriptor = buildMotionPathPreview({
+    path,
+    slideWidth: stage?.offsetWidth || DEFAULT_PREVIEW_SLIDE_WIDTH,
+    slideHeight: stage?.offsetHeight || DEFAULT_PREVIEW_SLIDE_HEIGHT,
+    durationMs: options?.durationMs,
+    delayMs: options?.delayMs,
+    timingCurve: options?.timingCurve
+  });
+  if (!descriptor) {
+    return;
+  }
+  playDescriptor(elementId, descriptor);
+}
+var DEFAULT_PREVIEW_SLIDE_WIDTH = 1280;
+var DEFAULT_PREVIEW_SLIDE_HEIGHT = 720;
+function playDescriptor(elementId, descriptor) {
+  const domEl = document.querySelector(`[data-element-id="${elementId}"]`);
+  if (!domEl) {
+    return;
+  }
+  const styleEl = document.createElement("style");
+  styleEl.textContent = descriptor.keyframesCss;
+  document.head.appendChild(styleEl);
+  const originalAnimation = domEl.style.animation;
+  const originalVisibility = domEl.style.visibility;
+  domEl.style.visibility = "visible";
+  domEl.style.animation = descriptor.cssAnimation;
+  const timeoutId = setTimeout(() => {
+    domEl.style.animation = originalAnimation;
+    domEl.style.visibility = originalVisibility;
+    styleEl.remove();
+    if (activePreview?.elementId === elementId) {
+      activePreview = null;
+    }
+  }, descriptor.durationMs + 100);
+  activePreview = {
+    elementId,
+    timeoutId,
+    styleEl,
+    originalAnimation,
+    originalVisibility
+  };
+}
+function stopPreviewAnimation() {
+  if (!activePreview) {
+    return;
+  }
+  clearTimeout(activePreview.timeoutId);
+  activePreview.styleEl.remove();
+  const domEl = document.querySelector(
+    `[data-element-id="${activePreview.elementId}"]`
+  );
+  if (domEl) {
+    domEl.style.animation = activePreview.originalAnimation;
+    domEl.style.visibility = activePreview.originalVisibility;
+  }
+  activePreview = null;
+}
+
+export { ANIMATION_PRESET_OPTIONS, ARROW_SIZE_OPTIONS, CONNECTOR_ARROW_OPTIONS, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, 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_OPTIONS, TOOLBAR_SECTIONS, UNGROUPED_SECTION_ID, ZOOM_TO_SELECTION_PADDING, build3DExtrusionData, buildLineGlowFilter, buildLineShadowCss, buildNotesPdf, buildPdfFromTiledImageData, buildReactChartViewModel, buildTextBody3DSceneStyle, cloneHistorySnapshot, cn, dist_exports, getAnimationInitialStyle, getConnectorPathGeometry, getCropShapeClipPath, getDuotoneColors, getImageRenderStyle, getImageSurfaceMaskStyle, getImageSurfaceStyle, getImageTilingStyle, getShapeVisualStyle, getTextLayoutStyle, getTextStyleForElement, getTextWarpStyle, hasDagDuotoneEffect, isConnectorOrLineElement, renderChartElement, renderConnectorMarker, renderDagDuotoneSvgFilter, renderMediaElement, renderTableElement, renderTextSegments, renderVectorShape, shouldRenderFallbackLabel, startMotionPathPreview, startPreviewAnimation, stopPreviewAnimation };