pptx-react-viewer 1.1.5 → 1.1.6

package/dist/index.mjs

@@ -5,7 +5,7 @@ import * as ReactDOM from 'react-dom/client';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { LuMessageSquare, LuEyeOff, LuSettings, LuX, LuCast, LuShieldCheck, LuPlus, LuPanelLeftClose, LuStickyNote, LuMonitor, LuColumns2, LuPresentation, LuMinus, LuClock, LuDownload, LuTrash2, LuCheck, LuLock, LuEye, LuFileText, LuType, LuLoader, LuShieldAlert, LuSignature, LuInfo, LuTriangleAlert, LuPrinter, LuPenTool, LuWifi, LuWifiOff, LuUsers, LuCopy, LuMonitorOff, LuChevronLeft, LuChevronRight, LuPlay, LuPause, LuPanelLeft, LuUndo, LuRedo, LuSearch, LuShare2, LuPanelRight, LuFolderOpen, LuVideo, LuImage, LuClipboardPaste, LuScissors, LuPaintbrush, LuChevronDown, LuSquare, LuDatabase, LuLayers, LuAArrowUp, LuAArrowDown, LuRemoveFormatting, LuHighlighter, LuList, LuListOrdered, LuIndentDecrease, LuIndentIncrease, LuChevronUp, LuPalette, LuPencil, LuPaintBucket, LuSparkles, LuCaptions, LuSpellCheck, LuGitCompare, LuPipette, LuCaseSensitive, LuReplace, LuTimer, LuMousePointer2, LuEraser, LuGripVertical, LuUpload, LuBold, LuItalic, LuUnderline, LuStrikethrough, LuLink, LuGrid2X2, LuCopyPlus, LuEllipsis, LuCircle, LuMoveRight, LuTriangle, LuDiamond, LuAlignLeft, LuAlignCenter, LuAlignRight, LuAlignJustify, LuSpline, LuSettings2, LuMove, LuRadio, LuArrowDown, LuArrowUp, LuArrowRight, LuArrowLeft, LuReply, LuRotateCw, LuBookmark } from 'react-icons/lu';
-import { hasShapeProperties, hasTextProperties, SWITCHABLE_LAYOUT_TYPES, isCalloutShape, getCalloutLeaderLineGeometry, buildCalloutLeaderLineSvgPath, getCalloutViewBoxBounds, isInkElement, getLinkedTextBoxSegments, isImageLikeElement, getSubstituteFontFamily, PptxHandler, EncryptedFileError, guidePxToEmu, guideEmuToPx, THEME_COLOR_SCHEME_KEYS, hslToRgb, PRESET_COLOR_MAP, elementActionToPptxAction, mergeShapes, SvgExporter, applyDrawingColorTransforms as applyDrawingColorTransforms$1, getPresetShapeClipPath, svgPathToPolygons, polygonsToSvgPath, EMU_PER_PX as EMU_PER_PX$1, chartDataChangeType, chartDataUpdatePoint, chartDataAddCategory, chartDataRemoveCategory, chartDataAddSeries, chartDataRemoveSeries, getOleObjectTypeLabel, pptxActionToElementAction, hasNonTrivialOverride, COLOR_MAP_ALIAS_KEYS, DEFAULT_COLOR_MAP, addSmartArtNodeAsChild, updateSmartArtNodeText, removeSmartArtNode, switchSmartArtLayout } from 'pptx-viewer-core';
+import { hasShapeProperties, hasTextProperties, SWITCHABLE_LAYOUT_TYPES, isCalloutShape, getCalloutLeaderLineGeometry, buildCalloutLeaderLineSvgPath, getCalloutViewBoxBounds, isInkElement, getLinkedTextBoxSegments, isImageLikeElement, getSubstituteFontFamily, getAdjustmentAwareShapeClipPath, getShapeClipPathFromPreset, getCloudPathForRendering, PptxHandler, EncryptedFileError, guidePxToEmu, guideEmuToPx, THEME_COLOR_SCHEME_KEYS, hslToRgb, PRESET_COLOR_MAP, elementActionToPptxAction, mergeShapes, SvgExporter, applyDrawingColorTransforms as applyDrawingColorTransforms$1, getPresetShapeClipPath, svgPathToPolygons, polygonsToSvgPath, EMU_PER_PX as EMU_PER_PX$1, chartDataChangeType, chartDataUpdatePoint, chartDataAddCategory, chartDataRemoveCategory, chartDataAddSeries, chartDataRemoveSeries, getOleObjectTypeLabel, pptxActionToElementAction, hasNonTrivialOverride, COLOR_MAP_ALIAS_KEYS, DEFAULT_COLOR_MAP, addSmartArtNodeAsChild, updateSmartArtNodeText, removeSmartArtNode, switchSmartArtLayout } from 'pptx-viewer-core';
 import DOMPurify from 'dompurify';
 import { useTranslation } from 'react-i18next';
 import html2canvasPro from 'html2canvas-pro';
@@ -171,7 +171,7 @@ function generateUUID() {
   const uuid = _lut[d0 & 255] + _lut[d0 >> 8 & 255] + _lut[d0 >> 16 & 255] + _lut[d0 >> 24 & 255] + "-" + _lut[d1 & 255] + _lut[d1 >> 8 & 255] + "-" + _lut[d1 >> 16 & 15 | 64] + _lut[d1 >> 24 & 255] + "-" + _lut[d2 & 63 | 128] + _lut[d2 >> 8 & 255] + "-" + _lut[d2 >> 16 & 255] + _lut[d2 >> 24 & 255] + _lut[d3 & 255] + _lut[d3 >> 8 & 255] + _lut[d3 >> 16 & 255] + _lut[d3 >> 24 & 255];
   return uuid.toLowerCase();
 }
-function clamp(value, min2, max2) {
+function clamp2(value, min2, max2) {
   return Math.max(min2, Math.min(max2, value));
 }
 function euclideanModulo(n, m2) {
@@ -546,7 +546,7 @@ function _generateTables() {
 }
 function toHalfFloat(val2) {
   if (Math.abs(val2) > 65504) warn("DataUtils.toHalfFloat(): Value out of range.");
-  val2 = clamp(val2, -65504, 65504);
+  val2 = clamp2(val2, -65504, 65504);
   _tables.floatView[0] = val2;
   const f = _tables.uint32View[0];
   const e2 = f >> 23 & 511;
@@ -2035,7 +2035,7 @@ var init_three_core = __esm({
        * @param {number} max - The max value.
        * @return {number} The clamped value.
        */
-      clamp,
+      clamp: clamp2,
       /**
        * Computes the Euclidean modulo of the given parameters that
        * is `( ( n % m ) + m ) % m`.
@@ -2562,8 +2562,8 @@ var init_three_core = __esm({
        * @return {Vector2} A reference to this vector.
        */
       clamp(min2, max2) {
-        this.x = clamp(this.x, min2.x, max2.x);
-        this.y = clamp(this.y, min2.y, max2.y);
+        this.x = clamp2(this.x, min2.x, max2.x);
+        this.y = clamp2(this.y, min2.y, max2.y);
         return this;
       }
       /**
@@ -2577,8 +2577,8 @@ var init_three_core = __esm({
        * @return {Vector2} A reference to this vector.
        */
       clampScalar(minVal, maxVal) {
-        this.x = clamp(this.x, minVal, maxVal);
-        this.y = clamp(this.y, minVal, maxVal);
+        this.x = clamp2(this.x, minVal, maxVal);
+        this.y = clamp2(this.y, minVal, maxVal);
         return this;
       }
       /**
@@ -2593,7 +2593,7 @@ var init_three_core = __esm({
        */
       clampLength(min2, max2) {
         const length2 = this.length();
-        return this.divideScalar(length2 || 1).multiplyScalar(clamp(length2, min2, max2));
+        return this.divideScalar(length2 || 1).multiplyScalar(clamp2(length2, min2, max2));
       }
       /**
        * The components of this vector are rounded down to the nearest integer value.
@@ -2718,7 +2718,7 @@ var init_three_core = __esm({
         const denominator = Math.sqrt(this.lengthSq() * v.lengthSq());
         if (denominator === 0) return Math.PI / 2;
         const theta = this.dot(v) / denominator;
-        return Math.acos(clamp(theta, -1, 1));
+        return Math.acos(clamp2(theta, -1, 1));
       }
       /**
        * Computes the distance from the given vector to this instance.
@@ -3205,7 +3205,7 @@ var init_three_core = __esm({
        * @return {number} The angle in radians.
        */
       angleTo(q) {
-        return 2 * Math.acos(Math.abs(clamp(this.dot(q), -1, 1)));
+        return 2 * Math.acos(Math.abs(clamp2(this.dot(q), -1, 1)));
       }
       /**
        * Rotates this quaternion by a given angular step to the given quaternion.
@@ -3911,9 +3911,9 @@ var init_three_core = __esm({
        * @return {Vector3} A reference to this vector.
        */
       clamp(min2, max2) {
-        this.x = clamp(this.x, min2.x, max2.x);
-        this.y = clamp(this.y, min2.y, max2.y);
-        this.z = clamp(this.z, min2.z, max2.z);
+        this.x = clamp2(this.x, min2.x, max2.x);
+        this.y = clamp2(this.y, min2.y, max2.y);
+        this.z = clamp2(this.z, min2.z, max2.z);
         return this;
       }
       /**
@@ -3927,9 +3927,9 @@ var init_three_core = __esm({
        * @return {Vector3} A reference to this vector.
        */
       clampScalar(minVal, maxVal) {
-        this.x = clamp(this.x, minVal, maxVal);
-        this.y = clamp(this.y, minVal, maxVal);
-        this.z = clamp(this.z, minVal, maxVal);
+        this.x = clamp2(this.x, minVal, maxVal);
+        this.y = clamp2(this.y, minVal, maxVal);
+        this.z = clamp2(this.z, minVal, maxVal);
         return this;
       }
       /**
@@ -3944,7 +3944,7 @@ var init_three_core = __esm({
        */
       clampLength(min2, max2) {
         const length2 = this.length();
-        return this.divideScalar(length2 || 1).multiplyScalar(clamp(length2, min2, max2));
+        return this.divideScalar(length2 || 1).multiplyScalar(clamp2(length2, min2, max2));
       }
       /**
        * The components of this vector are rounded down to the nearest integer value.
@@ -4154,7 +4154,7 @@ var init_three_core = __esm({
         const denominator = Math.sqrt(this.lengthSq() * v.lengthSq());
         if (denominator === 0) return Math.PI / 2;
         const theta = this.dot(v) / denominator;
-        return Math.acos(clamp(theta, -1, 1));
+        return Math.acos(clamp2(theta, -1, 1));
       }
       /**
        * Computes the distance from the given vector to this instance.
@@ -5843,10 +5843,10 @@ var init_three_core = __esm({
        * @return {Vector4} A reference to this vector.
        */
       clamp(min2, max2) {
-        this.x = clamp(this.x, min2.x, max2.x);
-        this.y = clamp(this.y, min2.y, max2.y);
-        this.z = clamp(this.z, min2.z, max2.z);
-        this.w = clamp(this.w, min2.w, max2.w);
+        this.x = clamp2(this.x, min2.x, max2.x);
+        this.y = clamp2(this.y, min2.y, max2.y);
+        this.z = clamp2(this.z, min2.z, max2.z);
+        this.w = clamp2(this.w, min2.w, max2.w);
         return this;
       }
       /**
@@ -5860,10 +5860,10 @@ var init_three_core = __esm({
        * @return {Vector4} A reference to this vector.
        */
       clampScalar(minVal, maxVal) {
-        this.x = clamp(this.x, minVal, maxVal);
-        this.y = clamp(this.y, minVal, maxVal);
-        this.z = clamp(this.z, minVal, maxVal);
-        this.w = clamp(this.w, minVal, maxVal);
+        this.x = clamp2(this.x, minVal, maxVal);
+        this.y = clamp2(this.y, minVal, maxVal);
+        this.z = clamp2(this.z, minVal, maxVal);
+        this.w = clamp2(this.w, minVal, maxVal);
         return this;
       }
       /**
@@ -5878,7 +5878,7 @@ var init_three_core = __esm({
        */
       clampLength(min2, max2) {
         const length2 = this.length();
-        return this.divideScalar(length2 || 1).multiplyScalar(clamp(length2, min2, max2));
+        return this.divideScalar(length2 || 1).multiplyScalar(clamp2(length2, min2, max2));
       }
       /**
        * The components of this vector are rounded down to the nearest integer value.
@@ -7661,7 +7661,7 @@ var init_three_core = __esm({
         const m31 = te[2], m32 = te[6], m33 = te[10];
         switch (order) {
           case "XYZ":
-            this._y = Math.asin(clamp(m13, -1, 1));
+            this._y = Math.asin(clamp2(m13, -1, 1));
             if (Math.abs(m13) < 0.9999999) {
               this._x = Math.atan2(-m23, m33);
               this._z = Math.atan2(-m12, m11);
@@ -7671,7 +7671,7 @@ var init_three_core = __esm({
             }
             break;
           case "YXZ":
-            this._x = Math.asin(-clamp(m23, -1, 1));
+            this._x = Math.asin(-clamp2(m23, -1, 1));
             if (Math.abs(m23) < 0.9999999) {
               this._y = Math.atan2(m13, m33);
               this._z = Math.atan2(m21, m22);
@@ -7681,7 +7681,7 @@ var init_three_core = __esm({
             }
             break;
           case "ZXY":
-            this._x = Math.asin(clamp(m32, -1, 1));
+            this._x = Math.asin(clamp2(m32, -1, 1));
             if (Math.abs(m32) < 0.9999999) {
               this._y = Math.atan2(-m31, m33);
               this._z = Math.atan2(-m12, m22);
@@ -7691,7 +7691,7 @@ var init_three_core = __esm({
             }
             break;
           case "ZYX":
-            this._y = Math.asin(-clamp(m31, -1, 1));
+            this._y = Math.asin(-clamp2(m31, -1, 1));
             if (Math.abs(m31) < 0.9999999) {
               this._x = Math.atan2(m32, m33);
               this._z = Math.atan2(m21, m11);
@@ -7701,7 +7701,7 @@ var init_three_core = __esm({
             }
             break;
           case "YZX":
-            this._z = Math.asin(clamp(m21, -1, 1));
+            this._z = Math.asin(clamp2(m21, -1, 1));
             if (Math.abs(m21) < 0.9999999) {
               this._x = Math.atan2(-m23, m22);
               this._y = Math.atan2(-m31, m11);
@@ -7711,7 +7711,7 @@ var init_three_core = __esm({
             }
             break;
           case "XZY":
-            this._z = Math.asin(-clamp(m12, -1, 1));
+            this._z = Math.asin(-clamp2(m12, -1, 1));
             if (Math.abs(m12) < 0.9999999) {
               this._x = Math.atan2(m32, m22);
               this._y = Math.atan2(m13, m11);
@@ -9335,8 +9335,8 @@ var init_three_core = __esm({
        */
       setHSL(h2, s, l2, colorSpace = ColorManagement.workingColorSpace) {
         h2 = euclideanModulo(h2, 1);
-        s = clamp(s, 0, 1);
-        l2 = clamp(l2, 0, 1);
+        s = clamp2(s, 0, 1);
+        l2 = clamp2(l2, 0, 1);
         if (s === 0) {
           this.r = this.g = this.b = l2;
         } else {
@@ -9522,7 +9522,7 @@ var init_three_core = __esm({
        */
       getHex(colorSpace = SRGBColorSpace) {
         ColorManagement.workingToColorSpace(_color.copy(this), colorSpace);
-        return Math.round(clamp(_color.r * 255, 0, 255)) * 65536 + Math.round(clamp(_color.g * 255, 0, 255)) * 256 + Math.round(clamp(_color.b * 255, 0, 255));
+        return Math.round(clamp2(_color.r * 255, 0, 255)) * 65536 + Math.round(clamp2(_color.g * 255, 0, 255)) * 256 + Math.round(clamp2(_color.b * 255, 0, 255));
       }
       /**
        * Returns the hexadecimal value of this color as a string (for example, 'FFFFFF').
@@ -18453,13 +18453,13 @@ var init_three_core = __esm({
           vec.crossVectors(tangents[i3 - 1], tangents[i3]);
           if (vec.length() > Number.EPSILON) {
             vec.normalize();
-            const theta = Math.acos(clamp(tangents[i3 - 1].dot(tangents[i3]), -1, 1));
+            const theta = Math.acos(clamp2(tangents[i3 - 1].dot(tangents[i3]), -1, 1));
             normals[i3].applyMatrix4(mat.makeRotationAxis(vec, theta));
           }
           binormals[i3].crossVectors(tangents[i3], normals[i3]);
         }
         if (closed === true) {
-          let theta = Math.acos(clamp(normals[0].dot(normals[segments]), -1, 1));
+          let theta = Math.acos(clamp2(normals[0].dot(normals[segments]), -1, 1));
           theta /= segments;
           if (tangents[0].dot(vec.crossVectors(normals[0], normals[segments])) > 0) {
             theta = -theta;
@@ -20248,7 +20248,7 @@ var init_three_core = __esm({
           phiLength
         };
         segments = Math.floor(segments);
-        phiLength = clamp(phiLength, 0, Math.PI * 2);
+        phiLength = clamp2(phiLength, 0, Math.PI * 2);
         const indices = [];
         const vertices = [];
         const uvs = [];
@@ -21464,7 +21464,7 @@ var init_three_core = __esm({
         this.ior = 1.5;
         Object.defineProperty(this, "reflectivity", {
           get: function() {
-            return clamp(2.5 * (this.ior - 1) / (this.ior + 1), 0, 1);
+            return clamp2(2.5 * (this.ior - 1) / (this.ior + 1), 0, 1);
           },
           set: function(reflectivity) {
             this.ior = (1 + 0.4 * reflectivity) / (1 - 0.4 * reflectivity);
@@ -29732,7 +29732,7 @@ var init_three_core = __esm({
        */
       makeSafe() {
         const EPS = 1e-6;
-        this.phi = clamp(this.phi, EPS, Math.PI - EPS);
+        this.phi = clamp2(this.phi, EPS, Math.PI - EPS);
         return this;
       }
       /**
@@ -29760,7 +29760,7 @@ var init_three_core = __esm({
           this.phi = 0;
         } else {
           this.theta = Math.atan2(x2, z);
-          this.phi = Math.acos(clamp(y / this.radius, -1, 1));
+          this.phi = Math.acos(clamp2(y / this.radius, -1, 1));
         }
         return this;
       }
@@ -30275,7 +30275,7 @@ var init_three_core = __esm({
         const startEnd_startP = _startEnd.dot(_startP);
         let t2 = startEnd_startP / startEnd2;
         if (clampToLine) {
-          t2 = clamp(t2, 0, 1);
+          t2 = clamp2(t2, 0, 1);
         }
         return t2;
       }
@@ -30321,27 +30321,27 @@ var init_three_core = __esm({
         if (a2 <= EPSILON) {
           s = 0;
           t2 = f / e2;
-          t2 = clamp(t2, 0, 1);
+          t2 = clamp2(t2, 0, 1);
         } else {
           const c3 = _d1.dot(_r);
           if (e2 <= EPSILON) {
             t2 = 0;
-            s = clamp(-c3 / a2, 0, 1);
+            s = clamp2(-c3 / a2, 0, 1);
           } else {
             const b2 = _d1.dot(_d2);
             const denom = a2 * e2 - b2 * b2;
             if (denom !== 0) {
-              s = clamp((b2 * f - c3 * e2) / denom, 0, 1);
+              s = clamp2((b2 * f - c3 * e2) / denom, 0, 1);
             } else {
               s = 0;
             }
             t2 = (b2 * s + f) / e2;
             if (t2 < 0) {
               t2 = 0;
-              s = clamp(-c3 / a2, 0, 1);
+              s = clamp2(-c3 / a2, 0, 1);
             } else if (t2 > 1) {
               t2 = 1;
-              s = clamp((b2 - c3) / a2, 0, 1);
+              s = clamp2((b2 - c3) / a2, 0, 1);
             }
           }
         }
@@ -70291,6 +70291,55 @@ var ACTION_BUTTON_PRESETS = [
     label: "Return",
     defaultAction: "prevSlide",
     iconPath: "M18 8 L18 14 L6 14 M6 14 L10 10 M6 14 L10 18"
+  },
+  {
+    shapeType: "actionButtonHome",
+    label: "Home",
+    defaultAction: "firstSlide",
+    // House: roof + body
+    iconPath: "M12 4 L20 11 L20 20 L14 20 L14 14 L10 14 L10 20 L4 20 L4 11 Z"
+  },
+  {
+    shapeType: "actionButtonHelp",
+    label: "Help",
+    defaultAction: "none",
+    // Question mark
+    iconPath: "M9 9 a3 3 0 1 1 4 2.8 c-1 0.4 -1 1.2 -1 2 M12 17 v0.5"
+  },
+  {
+    shapeType: "actionButtonInformation",
+    label: "Information",
+    defaultAction: "none",
+    // Lower-case "i": dot + body
+    iconPath: "M12 6 v0.01 M12 10 v8"
+  },
+  {
+    shapeType: "actionButtonDocument",
+    label: "Document",
+    defaultAction: "none",
+    // Document with folded corner
+    iconPath: "M6 4 L14 4 L18 8 L18 20 L6 20 Z M14 4 L14 8 L18 8"
+  },
+  {
+    shapeType: "actionButtonSound",
+    label: "Sound",
+    defaultAction: "none",
+    // Speaker cone + sound waves
+    iconPath: "M4 10 L4 14 L8 14 L12 18 L12 6 L8 10 Z M16 9 a4 4 0 0 1 0 6 M18 7 a7 7 0 0 1 0 10"
+  },
+  {
+    shapeType: "actionButtonMovie",
+    label: "Movie",
+    defaultAction: "none",
+    // Film strip with play triangle
+    iconPath: "M4 6 L20 6 L20 18 L4 18 Z M10 9 L15 12 L10 15 Z"
+  },
+  {
+    shapeType: "actionButtonBlank",
+    label: "Custom",
+    defaultAction: "none",
+    // No glyph — empty path. The button still renders as a rounded rect via clip-path.
+    iconPath: ""
   }
 ];
 Object.fromEntries(ACTION_BUTTON_PRESETS.map((p3) => [p3.shapeType, p3.defaultAction]));
@@ -72570,8 +72619,8 @@ function hexToRgb2(hex) {
   };
 }
 function rgbToHex(r2, g2, b2) {
-  const clamp2 = (v) => Math.max(0, Math.min(255, Math.round(v)));
-  return `#${clamp2(r2).toString(16).padStart(2, "0")}${clamp2(g2).toString(16).padStart(2, "0")}${clamp2(b2).toString(16).padStart(2, "0")}`;
+  const clamp3 = (v) => Math.max(0, Math.min(255, Math.round(v)));
+  return `#${clamp3(r2).toString(16).padStart(2, "0")}${clamp3(g2).toString(16).padStart(2, "0")}${clamp3(b2).toString(16).padStart(2, "0")}`;
 }
 function rgbToHsl(r2, g2, b2) {
   const rn = r2 / 255;
@@ -74781,6 +74830,11 @@ function getShapeClipPath(shapeType, adjustments, width, height) {
   }
   const normalized = shapeType.toLowerCase();
   if (normalized === "round1rect" || normalized === "round2samerect" || normalized === "round2diagrect" || normalized === "sniproundrect" || normalized === "snip1rect" || normalized === "snip2diagrect") {
+    if (adjustments?.adj !== void 0 && width && height) {
+      const ratio = Math.min(Math.max(adjustments.adj / 1e5, 0), 0.5);
+      const radiusPx = Math.round(Math.min(width, height) * ratio);
+      return `inset(0 round ${radiusPx}px)`;
+    }
     return "inset(0 round 18px)";
   }
   if (normalized === "can" || normalized === "cylinder") {
@@ -75427,6 +75481,128 @@ function mapDagBlendModeToCss(blend) {
       return void 0;
   }
 }
+function getImageAlphaFilterId(elementId) {
+  return `imgalpha-${elementId}`;
+}
+function hasAdvancedImageAlphaEffects(element2) {
+  if (!isImageLikeElement(element2)) {
+    return false;
+  }
+  const e2 = element2.imageEffects;
+  if (!e2) {
+    return false;
+  }
+  return Boolean(
+    typeof e2.alphaModFix === "number" || e2.alphaInv || e2.alphaCeiling || e2.alphaFloor || typeof e2.alphaRepl === "number" || typeof e2.alphaBiLevel === "number" || typeof e2.biLevel === "number" || e2.lum && (typeof e2.lum.bright === "number" || typeof e2.lum.contrast === "number") || e2.hsl && (typeof e2.hsl.sat === "number" || typeof e2.hsl.lum === "number") || e2.tint && typeof e2.tint.amt === "number" || e2.clrRepl
+  );
+}
+function renderImageAlphaSvgFilter(element2) {
+  if (!isImageLikeElement(element2)) {
+    return null;
+  }
+  const e2 = element2.imageEffects;
+  if (!e2 || !hasAdvancedImageAlphaEffects(element2)) {
+    return null;
+  }
+  const filterId = getImageAlphaFilterId(element2.id);
+  const primitives = [];
+  let resultIdx = 0;
+  let inputRef = "SourceGraphic";
+  const next = (jsx229) => {
+    const result = `r${resultIdx++}`;
+    primitives.push(jsx229(inputRef, result));
+    inputRef = result;
+  };
+  if (typeof e2.alphaModFix === "number") {
+    const mul = clamp(e2.alphaModFix / 100, 0, 1);
+    next((inp, out) => /* @__PURE__ */ jsx(
+      "feColorMatrix",
+      {
+        in: inp,
+        result: out,
+        type: "matrix",
+        values: `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${mul} 0`
+      },
+      out
+    ));
+  }
+  if (e2.alphaInv) {
+    next((inp, out) => /* @__PURE__ */ jsx("feComponentTransfer", { in: inp, result: out, children: /* @__PURE__ */ jsx("feFuncA", { type: "linear", slope: -1, intercept: 1 }) }, out));
+  }
+  if (e2.alphaCeiling) {
+    next((inp, out) => /* @__PURE__ */ jsx("feComponentTransfer", { in: inp, result: out, children: /* @__PURE__ */ jsx("feFuncA", { type: "discrete", tableValues: "0 1 1 1 1 1 1 1 1 1" }) }, out));
+  }
+  if (e2.alphaFloor) {
+    next((inp, out) => /* @__PURE__ */ jsx("feComponentTransfer", { in: inp, result: out, children: /* @__PURE__ */ jsx("feFuncA", { type: "discrete", tableValues: "0 0 0 0 0 0 0 0 0 1" }) }, out));
+  }
+  if (typeof e2.alphaRepl === "number") {
+    const a2 = clamp(e2.alphaRepl / 100, 0, 1);
+    next((inp, out) => /* @__PURE__ */ jsx("feComponentTransfer", { in: inp, result: out, children: /* @__PURE__ */ jsx("feFuncA", { type: "linear", slope: 0, intercept: a2 }) }, out));
+  }
+  if (typeof e2.alphaBiLevel === "number") {
+    const t2 = clamp(e2.alphaBiLevel / 100, 0, 1);
+    const table = Array.from({ length: 10 }, (_, i3) => i3 / 10 >= t2 ? "1" : "0").join(" ");
+    next((inp, out) => /* @__PURE__ */ jsx("feComponentTransfer", { in: inp, result: out, children: /* @__PURE__ */ jsx("feFuncA", { type: "discrete", tableValues: table }) }, out));
+  }
+  if (typeof e2.biLevel === "number") {
+    next((inp, out) => /* @__PURE__ */ jsx("feColorMatrix", { in: inp, result: out, type: "saturate", values: "0" }, out));
+    const t2 = clamp(e2.biLevel / 100, 0, 1);
+    const tbl = t2 < 0.5 ? "0 1" : "0 1";
+    next((inp, out) => /* @__PURE__ */ jsxs("feComponentTransfer", { in: inp, result: out, children: [
+      /* @__PURE__ */ jsx("feFuncR", { type: "discrete", tableValues: tbl }),
+      /* @__PURE__ */ jsx("feFuncG", { type: "discrete", tableValues: tbl }),
+      /* @__PURE__ */ jsx("feFuncB", { type: "discrete", tableValues: tbl })
+    ] }, out));
+  }
+  if (e2.lum && (typeof e2.lum.bright === "number" || typeof e2.lum.contrast === "number")) {
+    const b2 = (e2.lum.bright ?? 0) / 100;
+    const c2 = 1 + (e2.lum.contrast ?? 0) / 100;
+    const slope = c2;
+    const intercept = b2 + (1 - c2) / 2;
+    next((inp, out) => /* @__PURE__ */ jsxs("feComponentTransfer", { in: inp, result: out, children: [
+      /* @__PURE__ */ jsx("feFuncR", { type: "linear", slope, intercept }),
+      /* @__PURE__ */ jsx("feFuncG", { type: "linear", slope, intercept }),
+      /* @__PURE__ */ jsx("feFuncB", { type: "linear", slope, intercept })
+    ] }, out));
+  }
+  if (e2.hsl && typeof e2.hsl.sat === "number") {
+    const v = clamp(1 + e2.hsl.sat / 100, 0, 2);
+    next((inp, out) => /* @__PURE__ */ jsx("feColorMatrix", { in: inp, result: out, type: "saturate", values: String(v) }, out));
+  }
+  if (e2.tint && typeof e2.tint.amt === "number" && e2.tint.amt < 0) {
+    const v = clamp(1 + e2.tint.amt / 100, 0, 1);
+    next((inp, out) => /* @__PURE__ */ jsx("feColorMatrix", { in: inp, result: out, type: "saturate", values: String(v) }, out));
+  }
+  if (e2.clrRepl) {
+    const c2 = hexToRgbUnit(e2.clrRepl.color);
+    next((inp, out) => /* @__PURE__ */ jsx(
+      "feColorMatrix",
+      {
+        in: inp,
+        result: out,
+        type: "matrix",
+        values: `0 0 0 0 ${c2.r}  0 0 0 0 ${c2.g}  0 0 0 0 ${c2.b}  0 0 0 1 0`
+      },
+      out
+    ));
+  }
+  if (primitives.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 0,
+      height: 0,
+      style: { position: "absolute", overflow: "hidden" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: filterId, colorInterpolationFilters: "sRGB", children: primitives }) })
+    }
+  );
+}
+function clamp(v, lo, hi) {
+  return v < lo ? lo : v > hi ? hi : v;
+}
 function getDagDuotoneFilterId(elementId) {
   return `dag-duotone-${elementId}`;
 }
@@ -75510,6 +75686,9 @@ function getImageEffectsFilter(element2, options) {
     const filterId = getDuotoneFilterId(element2.id);
     filters.push(`url(#${filterId})`);
   }
+  if (hasAdvancedImageAlphaEffects(element2)) {
+    filters.push(`url(#${getImageAlphaFilterId(element2.id)})`);
+  }
   if (effects.artisticEffect) {
     const radius = effects.artisticRadius ?? 5;
     if (needsSvgArtisticFilter(effects.artisticEffect)) {
@@ -75683,6 +75862,39 @@ function getEffectDagCssFilter(style, elementId) {
   return filters.length > 0 ? filters.join(" ") : void 0;
 }
 var getEffectDagFilter = getEffectDagCssFilter;
+function getResolvedShapeClipPathFor(shapeType, width, height, adjustments) {
+  if (!shapeType) {
+    return void 0;
+  }
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    return getShapeClipPath(shapeType, adjustments, width, height);
+  }
+  if (adjustments && Object.keys(adjustments).length > 0) {
+    const adjusted = getAdjustmentAwareShapeClipPath(shapeType, width, height, adjustments);
+    if (adjusted !== void 0) {
+      return adjusted;
+    }
+  }
+  const fromPreset = getShapeClipPathFromPreset(shapeType, width, height, adjustments);
+  if (fromPreset !== void 0) {
+    return fromPreset;
+  }
+  const cloud = getCloudPathForRendering(shapeType, width, height);
+  if (cloud !== void 0) {
+    return cloud;
+  }
+  return getShapeClipPath(shapeType, adjustments, width, height);
+}
+function getResolvedShapeClipPath(element2, width, height) {
+  const shapeType = element2.shapeType;
+  if (!shapeType) {
+    return void 0;
+  }
+  const w = element2.width;
+  const h2 = element2.height;
+  const adjustments = element2.shapeAdjustments;
+  return getResolvedShapeClipPathFor(shapeType, w, h2, adjustments);
+}
 
 // src/viewer/utils/shape-round-rect.ts
 function localClampAdjustment(value) {
@@ -75754,6 +75966,27 @@ var MATERIAL_MAP = {
     filter: "brightness(1.1) contrast(0.85)",
     // Translucent powder: slight translucent glow
     backgroundImage: "radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 60%)"
+  },
+  // Legacy materials (PowerPoint 2007 / earlier). Render as muted variants
+  // of the modern equivalents so legacy decks still resemble the originals.
+  legacyMatte: {
+    filter: "brightness(0.92) saturate(0.85)",
+    backgroundImage: "linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.04) 100%)"
+  },
+  legacyPlastic: {
+    filter: "brightness(1.02) contrast(1.03)",
+    boxShadow: "inset -2px -2px 5px rgba(255,255,255,0.3)",
+    backgroundImage: "radial-gradient(ellipse 35% 25% at 25% 20%, rgba(255,255,255,0.15) 0%, transparent 70%)"
+  },
+  legacyMetal: {
+    filter: "brightness(1.05) contrast(1.1) saturate(1.1)",
+    boxShadow: "inset -2px -2px 6px rgba(255,255,255,0.35), inset 1px 1px 3px rgba(255,255,255,0.15)",
+    backgroundImage: "linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 25%, transparent 50%, rgba(0,0,0,0.05) 80%)"
+  },
+  legacyWireframe: {
+    filter: "brightness(1) contrast(1.4) saturate(0.6)",
+    // Wireframe: high contrast outline-emphasising look
+    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.4)"
   }
 };
 function getMaterialCssOverrides(material) {
@@ -76708,8 +76941,7 @@ function getShapeVisualStyle(element2, hasFill, fillColor, strokeWidth, strokeCo
     return {};
   }
   const normalizedShapeType = getShapeType(element2.shapeType);
-  const shapeType = element2.shapeType || normalizedShapeType;
-  const clipPath = getShapeClipPath(shapeType);
+  const clipPath = getResolvedShapeClipPath(element2);
   const fillOpacity = element2.shapeStyle?.fillOpacity;
   const strokeOpacity = element2.shapeStyle?.strokeOpacity;
   const strokeDash = normalizeStrokeDashType(element2.shapeStyle?.strokeDash);
@@ -77311,7 +77543,7 @@ function getImageMaskStyle(element2) {
   if (normalized === "can" || normalized === "cylinder") {
     return { borderRadius: "48% / 12%" };
   }
-  const clipPath = getShapeClipPath(shapeType);
+  const clipPath = getResolvedShapeClipPath(element2);
   if (!clipPath) {
     return void 0;
   }
@@ -77974,8 +78206,8 @@ function hexToRgb3(hex) {
   };
 }
 function rgbToHex2(r2, g2, b2) {
-  const clamp2 = (v) => Math.max(0, Math.min(255, Math.round(v)));
-  return `#${clamp2(r2).toString(16).padStart(2, "0").toUpperCase()}${clamp2(g2).toString(16).padStart(2, "0").toUpperCase()}${clamp2(b2).toString(16).padStart(2, "0").toUpperCase()}`;
+  const clamp3 = (v) => Math.max(0, Math.min(255, Math.round(v)));
+  return `#${clamp3(r2).toString(16).padStart(2, "0").toUpperCase()}${clamp3(g2).toString(16).padStart(2, "0").toUpperCase()}${clamp3(b2).toString(16).padStart(2, "0").toUpperCase()}`;
 }
 function tintColor(hex, tintFactor) {
   const { r: r2, g: g2, b: b2 } = hexToRgb3(hex);
@@ -78906,13 +79138,13 @@ function cellStyleToCss(style) {
   }
   if (style.textDirection) {
     switch (style.textDirection) {
-      case "vertical":
+      case "vert":
       case "eaVert":
       case "wordArtVert":
       case "wordArtVertRtl":
         css.writingMode = "vertical-rl";
         break;
-      case "vertical270":
+      case "vert270":
       case "mongolianVert":
         css.writingMode = "vertical-lr";
         break;
@@ -79439,8 +79671,8 @@ function hexToRgb4(hex) {
   ];
 }
 function rgbToHex3(r2, g2, b2) {
-  const clamp2 = (v) => Math.max(0, Math.min(255, Math.round(v)));
-  return `#${clamp2(r2).toString(16).padStart(2, "0")}${clamp2(g2).toString(16).padStart(2, "0")}${clamp2(b2).toString(16).padStart(2, "0")}`;
+  const clamp3 = (v) => Math.max(0, Math.min(255, Math.round(v)));
+  return `#${clamp3(r2).toString(16).padStart(2, "0")}${clamp3(g2).toString(16).padStart(2, "0")}${clamp3(b2).toString(16).padStart(2, "0")}`;
 }
 function tint(hex, amount) {
   const [r2, g2, b2] = hexToRgb4(hex);
@@ -81358,7 +81590,7 @@ function resolveRegionCode(label) {
   return REGION_ALIAS_MAP[normalized];
 }
 function lerpColor(a2, b2, t2) {
-  const clamp2 = (v) => Math.max(0, Math.min(255, Math.round(v)));
+  const clamp3 = (v) => Math.max(0, Math.min(255, Math.round(v)));
   const parse = (hex) => {
     const h2 = hex.replace("#", "");
     return [
@@ -81369,9 +81601,9 @@ function lerpColor(a2, b2, t2) {
   };
   const [r1, g1, b1] = parse(a2);
   const [r2, g2, b22] = parse(b2);
-  const r3 = clamp2(r1 + (r2 - r1) * t2);
-  const g3 = clamp2(g1 + (g2 - g1) * t2);
-  const bl = clamp2(b1 + (b22 - b1) * t2);
+  const r3 = clamp3(r1 + (r2 - r1) * t2);
+  const g3 = clamp3(g1 + (g2 - g1) * t2);
+  const bl = clamp3(b1 + (b22 - b1) * t2);
   return `#${r3.toString(16).padStart(2, "0")}${g3.toString(16).padStart(2, "0")}${bl.toString(16).padStart(2, "0")}`;
 }
 function sequentialColorScale(t2) {
@@ -88123,6 +88355,59 @@ function WarpedText({
     }
   );
 }
+var GLYPH_BY_SHAPE = Object.fromEntries(
+  ACTION_BUTTON_PRESETS.map((p3) => [p3.shapeType, p3.iconPath])
+);
+GLYPH_BY_SHAPE["actionButtonForwardOrNext"] = GLYPH_BY_SHAPE["actionButtonForwardNext"];
+GLYPH_BY_SHAPE["actionButtonBackOrPrevious"] = GLYPH_BY_SHAPE["actionButtonBackPrevious"];
+function isActionButtonShape(shapeType) {
+  return Boolean(shapeType && shapeType in GLYPH_BY_SHAPE);
+}
+function getActionButtonGlyphPath(shapeType) {
+  if (!shapeType) {
+    return void 0;
+  }
+  const path = GLYPH_BY_SHAPE[shapeType];
+  return path && path.length > 0 ? path : void 0;
+}
+function ActionButtonGlyphOverlay({
+  element: element2,
+  color
+}) {
+  const shapeType = "shapeType" in element2 ? element2.shapeType : void 0;
+  const path = getActionButtonGlyphPath(shapeType);
+  if (!path) {
+    return null;
+  }
+  const stroke = color ?? ("textStyle" in element2 && element2.textStyle?.color || "#ffffff");
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "100%",
+      height: "100%",
+      preserveAspectRatio: "xMidYMid meet",
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        padding: "20%"
+      },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: path,
+          fill: "none",
+          stroke,
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
 function ColorChangedImage({
   src,
   clrChange,
@@ -88393,6 +88678,7 @@ function renderImg(el, style, filter, alt, opacity) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       tileDuotoneColors && renderDuotoneSvgFilter(el.id, tileDuotoneColors.color1, tileDuotoneColors.color2),
       renderArtisticEffectSvgFilter(el.id, artisticEffectName, artisticRadius),
+      renderImageAlphaSvgFilter(el),
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -88414,6 +88700,7 @@ function renderImg(el, style, filter, alt, opacity) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     duotoneColors && !useDuotoneCanvas && renderDuotoneSvgFilter(el.id, duotoneColors.color1, duotoneColors.color2),
     renderArtisticEffectSvgFilter(el.id, artisticEffectName, artisticRadius),
+    renderImageAlphaSvgFilter(el),
     useDuotoneCanvas && duotoneColors ? /* @__PURE__ */ jsx(
       DuotoneImage,
       {
@@ -90922,8 +91209,11 @@ function renderBody(el, isImg, isEditing, editText, spellCheck, txtSE, txtS, vec
     ...scene3dStyle.perspective ? { perspective: scene3dStyle.perspective } : {},
     ...scene3dStyle.transformStyle ? { transformStyle: scene3dStyle.transformStyle } : {}
   } : void 0;
+  const shapeTypeForGlyph = "shapeType" in el ? el.shapeType : void 0;
+  const showActionButtonGlyph = isActionButtonShape(shapeTypeForGlyph);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     vecShape,
+    showActionButtonGlyph && /* @__PURE__ */ jsx(ActionButtonGlyphOverlay, { element: el }),
     isTxtEl ? useSvgWarp ? /* @__PURE__ */ jsx(
       "div",
       {