pptx-react-viewer 1.1.5 → 1.1.7

package/dist/index.js

@@ -198,7 +198,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) {
@@ -573,7 +573,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;
@@ -2062,7 +2062,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`.
@@ -2589,8 +2589,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;
       }
       /**
@@ -2604,8 +2604,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;
       }
       /**
@@ -2620,7 +2620,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.
@@ -2745,7 +2745,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.
@@ -3232,7 +3232,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.
@@ -3938,9 +3938,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;
       }
       /**
@@ -3954,9 +3954,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;
       }
       /**
@@ -3971,7 +3971,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.
@@ -4181,7 +4181,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.
@@ -5870,10 +5870,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;
       }
       /**
@@ -5887,10 +5887,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;
       }
       /**
@@ -5905,7 +5905,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.
@@ -7688,7 +7688,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);
@@ -7698,7 +7698,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);
@@ -7708,7 +7708,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);
@@ -7718,7 +7718,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);
@@ -7728,7 +7728,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);
@@ -7738,7 +7738,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);
@@ -9362,8 +9362,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 {
@@ -9549,7 +9549,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').
@@ -18480,13 +18480,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;
@@ -20275,7 +20275,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 = [];
@@ -21491,7 +21491,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);
@@ -29759,7 +29759,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;
       }
       /**
@@ -29787,7 +29787,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;
       }
@@ -30302,7 +30302,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;
       }
@@ -30348,27 +30348,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);
             }
           }
         }
@@ -43598,7 +43598,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return x2 === y && (0 !== x2 || 1 / x2 === 1 / y) || x2 !== x2 && y !== y;
       }
       function useSyncExternalStore$2(subscribe3, getSnapshot2) {
-        didWarnOld18Alpha || void 0 === React100.startTransition || (didWarnOld18Alpha = true, console.error(
+        didWarnOld18Alpha || void 0 === React103.startTransition || (didWarnOld18Alpha = true, console.error(
           "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
         ));
         var value = getSnapshot2();
@@ -43608,7 +43608,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState86({
+        cachedValue = useState89({
           inst: { value, getSnapshot: getSnapshot2 }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -43620,7 +43620,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe3, value, getSnapshot2]
         );
-        useEffect72(
+        useEffect73(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe3(function() {
@@ -43646,8 +43646,8 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot2();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React100 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is2, useState86 = React100.useState, useEffect72 = React100.useEffect, useLayoutEffect7 = React100.useLayoutEffect, useDebugValue = React100.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
-      exports$1.useSyncExternalStore = void 0 !== React100.useSyncExternalStore ? React100.useSyncExternalStore : shim;
+      var React103 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is2, useState89 = React103.useState, useEffect73 = React103.useEffect, useLayoutEffect7 = React103.useLayoutEffect, useDebugValue = React103.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      exports$1.useSyncExternalStore = void 0 !== React103.useSyncExternalStore ? React103.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
   }
@@ -43670,9 +43670,9 @@ var require_with_selector_development = __commonJS({
         return x2 === y && (0 !== x2 || 1 / x2 === 1 / y) || x2 !== x2 && y !== y;
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React100 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is2, useSyncExternalStore3 = shim.useSyncExternalStore, useRef73 = React100.useRef, useEffect72 = React100.useEffect, useMemo41 = React100.useMemo, useDebugValue = React100.useDebugValue;
+      var React103 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is2, useSyncExternalStore3 = shim.useSyncExternalStore, useRef74 = React103.useRef, useEffect73 = React103.useEffect, useMemo41 = React103.useMemo, useDebugValue = React103.useDebugValue;
       exports$1.useSyncExternalStoreWithSelector = function(subscribe3, getSnapshot2, getServerSnapshot2, selector, isEqual) {
-        var instRef = useRef73(null);
+        var instRef = useRef74(null);
         if (null === instRef.current) {
           var inst = { hasValue: false, value: null };
           instRef.current = inst;
@@ -43713,7 +43713,7 @@ var require_with_selector_development = __commonJS({
           [getSnapshot2, getServerSnapshot2, selector, isEqual]
         );
         var value = useSyncExternalStore3(subscribe3, instRef[0], instRef[1]);
-        useEffect72(
+        useEffect73(
           function() {
             inst.hasValue = true;
             inst.value = value;
@@ -70318,6 +70318,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]));
@@ -72597,8 +72646,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;
@@ -74808,6 +74857,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") {
@@ -75454,6 +75508,128 @@ function mapDagBlendModeToCss(blend) {
       return void 0;
   }
 }
+function getImageAlphaFilterId(elementId) {
+  return `imgalpha-${elementId}`;
+}
+function hasAdvancedImageAlphaEffects(element2) {
+  if (!pptxViewerCore.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 (!pptxViewerCore.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 = (jsx235) => {
+    const result = `r${resultIdx++}`;
+    primitives.push(jsx235(inputRef, result));
+    inputRef = result;
+  };
+  if (typeof e2.alphaModFix === "number") {
+    const mul = clamp(e2.alphaModFix / 100, 0, 1);
+    next((inp, out) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("feComponentTransfer", { in: inp, result: out, children: /* @__PURE__ */ jsxRuntime.jsx("feFuncA", { type: "linear", slope: -1, intercept: 1 }) }, out));
+  }
+  if (e2.alphaCeiling) {
+    next((inp, out) => /* @__PURE__ */ jsxRuntime.jsx("feComponentTransfer", { in: inp, result: out, children: /* @__PURE__ */ jsxRuntime.jsx("feFuncA", { type: "discrete", tableValues: "0 1 1 1 1 1 1 1 1 1" }) }, out));
+  }
+  if (e2.alphaFloor) {
+    next((inp, out) => /* @__PURE__ */ jsxRuntime.jsx("feComponentTransfer", { in: inp, result: out, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("feComponentTransfer", { in: inp, result: out, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("feComponentTransfer", { in: inp, result: out, children: /* @__PURE__ */ jsxRuntime.jsx("feFuncA", { type: "discrete", tableValues: table }) }, out));
+  }
+  if (typeof e2.biLevel === "number") {
+    next((inp, out) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("feComponentTransfer", { in: inp, result: out, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("feFuncR", { type: "discrete", tableValues: tbl }),
+      /* @__PURE__ */ jsxRuntime.jsx("feFuncG", { type: "discrete", tableValues: tbl }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("feComponentTransfer", { in: inp, result: out, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("feFuncR", { type: "linear", slope, intercept }),
+      /* @__PURE__ */ jsxRuntime.jsx("feFuncG", { type: "linear", slope, intercept }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: 0,
+      height: 0,
+      style: { position: "absolute", overflow: "hidden" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.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}`;
 }
@@ -75537,6 +75713,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)) {
@@ -75710,6 +75889,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 = pptxViewerCore.getAdjustmentAwareShapeClipPath(shapeType, width, height, adjustments);
+    if (adjusted !== void 0) {
+      return adjusted;
+    }
+  }
+  const fromPreset = pptxViewerCore.getShapeClipPathFromPreset(shapeType, width, height, adjustments);
+  if (fromPreset !== void 0) {
+    return fromPreset;
+  }
+  const cloud = pptxViewerCore.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) {
@@ -75781,6 +75993,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) {
@@ -76735,8 +76968,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);
@@ -77338,7 +77570,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;
   }
@@ -78001,8 +78233,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);
@@ -78933,13 +79165,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;
@@ -79346,8 +79578,8 @@ function renderTableElement(element2, textStyle, options) {
                 {
                   style: rowHeight ? { height: rowHeight } : void 0,
                   children: cells.map((cell, cellIndex) => {
-                    const isHMerged = cell["@_hMerge"] === "1" || cell["@_hMerge"] === true;
-                    const isVMerged = cell["@_vMerge"] === "1" || cell["@_vMerge"] === true;
+                    const isHMerged = cell["@_hMerge"] === "1";
+                    const isVMerged = cell["@_vMerge"] === "1";
                     if (isHMerged || isVMerged) {
                       return null;
                     }
@@ -79466,8 +79698,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);
@@ -81385,7 +81617,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 [
@@ -81396,9 +81628,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) {
@@ -85356,6 +85588,15 @@ function copyFormatFromElement(element2) {
   }
   return result;
 }
+function definedEntries(obj) {
+  const out = {};
+  for (const key in obj) {
+    if (obj[key] !== void 0) {
+      out[key] = obj[key];
+    }
+  }
+  return out;
+}
 function applyFormatToElement(element2, format) {
   let updated = { ...element2 };
   if (format.shapeStyle && pptxViewerCore.hasShapeProperties(updated)) {
@@ -85363,7 +85604,7 @@ function applyFormatToElement(element2, format) {
       ...updated,
       shapeStyle: {
         ...updated.shapeStyle,
-        ...format.shapeStyle
+        ...definedEntries(format.shapeStyle)
       }
     };
   }
@@ -85372,12 +85613,18 @@ function applyFormatToElement(element2, format) {
       ...updated,
       textStyle: {
         ...updated.textStyle,
-        ...format.textStyle
+        ...definedEntries(format.textStyle)
       }
     };
   }
   return updated;
 }
+function hasCopyableFormat(element2) {
+  if (!element2) {
+    return false;
+  }
+  return pptxViewerCore.hasShapeProperties(element2) || pptxViewerCore.hasTextProperties(element2);
+}
 
 // src/viewer/utils/animation-preview.ts
 var PRESET_TO_EFFECT = {
@@ -86726,8 +86973,8 @@ function ThumbnailTable({
           {
             style: rowHeight ? { height: rowHeight } : void 0,
             children: cells.map((cell, ci) => {
-              const isHMerged = cell["@_hMerge"] === "1" || cell["@_hMerge"] === true;
-              const isVMerged = cell["@_vMerge"] === "1" || cell["@_vMerge"] === true;
+              const isHMerged = cell["@_hMerge"] === "1";
+              const isVMerged = cell["@_vMerge"] === "1";
               if (isHMerged || isVMerged) {
                 return null;
               }
@@ -88150,6 +88397,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: path,
+          fill: "none",
+          stroke,
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
 function ColorChangedImage({
   src,
   clrChange,
@@ -88420,6 +88720,7 @@ function renderImg(el, style, filter, alt, opacity) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       tileDuotoneColors && renderDuotoneSvgFilter(el.id, tileDuotoneColors.color1, tileDuotoneColors.color2),
       renderArtisticEffectSvgFilter(el.id, artisticEffectName, artisticRadius),
+      renderImageAlphaSvgFilter(el),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -88441,6 +88742,7 @@ function renderImg(el, style, filter, alt, opacity) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     duotoneColors && !useDuotoneCanvas && renderDuotoneSvgFilter(el.id, duotoneColors.color1, duotoneColors.color2),
     renderArtisticEffectSvgFilter(el.id, artisticEffectName, artisticRadius),
+    renderImageAlphaSvgFilter(el),
     useDuotoneCanvas && duotoneColors ? /* @__PURE__ */ jsxRuntime.jsx(
       DuotoneImage,
       {
@@ -90949,8 +91251,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     vecShape,
+    showActionButtonGlyph && /* @__PURE__ */ jsxRuntime.jsx(ActionButtonGlyphOverlay, { element: el }),
     isTxtEl ? useSvgWarp ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -91760,11 +92065,16 @@ function usePresenceTracking({
         if (cid === localClientId) {
           return;
         }
-        const raw = state2?.presence;
+        const stateRecord = state2;
+        const raw = stateRecord?.presence;
         if (!raw || typeof raw !== "object") {
           return;
         }
-        const sanitized = sanitizePresence({ ...raw, clientId: cid }, canvasWidth, canvasHeight);
+        const sanitized = sanitizePresence(
+          { ...raw, clientId: cid },
+          canvasWidth,
+          canvasHeight
+        );
         if (!sanitized) {
           return;
         }
@@ -91832,15 +92142,9 @@ function useYjsProvider({ config }) {
     try {
       const [Y, { WebsocketProvider: WebsocketProvider2 }] = await Promise.all([Promise.resolve().then(() => (init_yjs(), yjs_exports)), Promise.resolve().then(() => (init_y_websocket(), y_websocket_exports))]);
       const yDoc = new Y.Doc();
-      const provider = new WebsocketProvider2(
-        config.serverUrl,
-        roomId,
-        yDoc,
-        // eslint-disable-line @typescript-eslint/no-explicit-any
-        {
-          params: config.authToken ? { token: config.authToken } : void 0
-        }
-      );
+      const provider = new WebsocketProvider2(config.serverUrl, roomId, yDoc, {
+        params: config.authToken ? { token: config.authToken } : void 0
+      });
       let connected = false;
       const handleStatus = (event) => {
         if (event.status === "connected") {
@@ -95406,90 +95710,101 @@ var SlideNotesPanel = ({
   });
   const hasNotes = draft.trim().length > 0;
   const slideLabel = activeSlide ? t2("pptx.notes.slideN", { n: activeSlide.slideNumber }) : t2("pptx.notes.noSlide");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col border-t border-border/60 bg-background select-none", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onToggle,
-        className: "flex items-center gap-1.5 px-3 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-colors w-full text-left shrink-0",
-        "aria-expanded": isExpanded,
-        "aria-controls": "slide-notes-content",
-        children: [
-          "Notes",
-          !isExpanded && hasNotes && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/50 text-[10px]", children: "(has notes)" })
-        ]
-      }
-    ),
-    isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        id: "slide-notes-content",
-        className: "px-3 pb-2 overflow-y-auto",
-        style: { maxHeight: panelHeight ?? EXPANDED_MAX_HEIGHT + 40 },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-muted-foreground mb-1", children: slideLabel }),
-          canEdit ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NotesToolbar,
-              {
-                isRichEditEnabled,
-                showLinkPopover,
-                savedSelectionText: savedSelectionRef.current?.text ?? "",
-                hasAllSlides: allSlides !== void 0 && allSlides.length > 0,
-                onApplyRichCommand: applyRichCommand,
-                onToggleBulletList: toggleBulletList,
-                onToggleNumberedList: toggleNumberedList,
-                onIndent: handleIndent,
-                onOutdent: handleOutdent,
-                onLinkButtonClick: handleLinkButtonClick,
-                onInsertLink: handleInsertLink,
-                onCloseLinkPopover: () => setShowLinkPopover(false),
-                onPrintClick: () => setShowPrintDialog(true),
-                onToggleRichEdit: () => setIsRichEditEnabled((prev) => !prev)
-              }
-            ),
-            isRichEditEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                ref: richEditorRef,
-                contentEditable: true,
-                suppressContentEditableWarning: true,
-                onInput: handleRichInput,
-                onBlur: handleBlur,
-                onKeyDown: handleKeyDownRich,
-                onClick: handleEditorClick,
-                className: "w-full overflow-y-auto rounded-md border border-border/50 bg-muted/60 px-2.5 py-1.5 text-xs text-foreground focus:border-primary/50 focus:outline-none focus:ring-1 focus:ring-primary/30 transition-colors whitespace-pre-wrap",
-                style: { maxHeight: EXPANDED_MAX_HEIGHT - 8, minHeight: 72 }
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "textarea",
-              {
-                ref: textareaRef,
-                name: "slide-notes",
-                value: draft,
-                onChange: handlePlainChange,
-                onBlur: handleBlur,
-                onKeyDown: handleKeyDownPlain,
-                placeholder: t2("pptx.notes.clickToAddNotes"),
-                rows: 4,
-                className: "w-full resize-none rounded-md border border-border/50 bg-muted/60 px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus:border-primary/50 focus:outline-none focus:ring-1 focus:ring-primary/30 transition-colors",
-                style: { maxHeight: EXPANDED_MAX_HEIGHT - 8 }
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "w-full rounded-md border border-border/30 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground overflow-y-auto whitespace-pre-wrap",
-              style: { maxHeight: EXPANDED_MAX_HEIGHT - 32, minHeight: 60 },
-              children: hasNotes ? renderRichNotesSegments(draftSegments) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic text-muted-foreground", children: t2("pptx.notes.noNotes") })
-            }
-          )
-        ]
-      }
-    ),
-    showPrintDialog && allSlides && /* @__PURE__ */ jsxRuntime.jsx(NotesPrintDialog, { slides: allSlides, onClose: () => setShowPrintDialog(false) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col border-t border-border/60 bg-background select-none",
+        // On mobile, hide the entire notes strip when collapsed — the
+        // MobileBottomBar's Notes button is the entry point instead.
+        !isExpanded && "max-md:hidden"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onToggle,
+            className: "flex items-center gap-1.5 px-3 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-colors w-full text-left shrink-0 max-md:hidden",
+            "aria-expanded": isExpanded,
+            "aria-controls": "slide-notes-content",
+            children: [
+              "Notes",
+              !isExpanded && hasNotes && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/50 text-[10px]", children: "(has notes)" })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: "slide-notes-content",
+            className: "px-3 pb-2 overflow-y-auto",
+            style: { maxHeight: panelHeight ?? EXPANDED_MAX_HEIGHT + 40 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-muted-foreground mb-1", children: slideLabel }),
+              canEdit ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  NotesToolbar,
+                  {
+                    isRichEditEnabled,
+                    showLinkPopover,
+                    savedSelectionText: savedSelectionRef.current?.text ?? "",
+                    hasAllSlides: allSlides !== void 0 && allSlides.length > 0,
+                    onApplyRichCommand: applyRichCommand,
+                    onToggleBulletList: toggleBulletList,
+                    onToggleNumberedList: toggleNumberedList,
+                    onIndent: handleIndent,
+                    onOutdent: handleOutdent,
+                    onLinkButtonClick: handleLinkButtonClick,
+                    onInsertLink: handleInsertLink,
+                    onCloseLinkPopover: () => setShowLinkPopover(false),
+                    onPrintClick: () => setShowPrintDialog(true),
+                    onToggleRichEdit: () => setIsRichEditEnabled((prev) => !prev)
+                  }
+                ),
+                isRichEditEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: richEditorRef,
+                    contentEditable: true,
+                    suppressContentEditableWarning: true,
+                    onInput: handleRichInput,
+                    onBlur: handleBlur,
+                    onKeyDown: handleKeyDownRich,
+                    onClick: handleEditorClick,
+                    className: "w-full overflow-y-auto rounded-md border border-border/50 bg-muted/60 px-2.5 py-1.5 text-xs text-foreground focus:border-primary/50 focus:outline-none focus:ring-1 focus:ring-primary/30 transition-colors whitespace-pre-wrap",
+                    style: { maxHeight: EXPANDED_MAX_HEIGHT - 8, minHeight: 72 }
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "textarea",
+                  {
+                    ref: textareaRef,
+                    name: "slide-notes",
+                    value: draft,
+                    onChange: handlePlainChange,
+                    onBlur: handleBlur,
+                    onKeyDown: handleKeyDownPlain,
+                    placeholder: t2("pptx.notes.clickToAddNotes"),
+                    rows: 4,
+                    className: "w-full resize-none rounded-md border border-border/50 bg-muted/60 px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus:border-primary/50 focus:outline-none focus:ring-1 focus:ring-primary/30 transition-colors",
+                    style: { maxHeight: EXPANDED_MAX_HEIGHT - 8 }
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "w-full rounded-md border border-border/30 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground overflow-y-auto whitespace-pre-wrap",
+                  style: { maxHeight: EXPANDED_MAX_HEIGHT - 32, minHeight: 60 },
+                  children: hasNotes ? renderRichNotesSegments(draftSegments) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic text-muted-foreground", children: t2("pptx.notes.noNotes") })
+                }
+              )
+            ]
+          }
+        ),
+        showPrintDialog && allSlides && /* @__PURE__ */ jsxRuntime.jsx(NotesPrintDialog, { slides: allSlides, onClose: () => setShowPrintDialog(false) })
+      ]
+    }
+  );
 };
 var DB_NAME = "pptx-viewer-autosave";
 var DB_VERSION = 1;
@@ -98026,7 +98341,8 @@ function ArrangeSection(p3) {
       {
         type: "button",
         onClick: p3.onToggleFormatPainter,
-        disabled: !p3.canEdit,
+        disabled: !p3.canEdit || p3.canActivateFormatPainter === false && !p3.formatPainterActive,
+        "data-testid": "format-painter-toggle",
         className: cn(
           pill,
           p3.formatPainterActive ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
@@ -98478,7 +98794,8 @@ function HomeSection(p3) {
   const { fontFamily, fontSize } = extractFontInfo(p3.selectedElement);
   const handleNewSlide = React10.useCallback(() => {
     if (p3.layoutOptions.length > 0) {
-      p3.onInsertSlideFromLayout(p3.layoutOptions[0].path);
+      const first = p3.layoutOptions[0];
+      p3.onInsertSlideFromLayout(first.path, first.name);
     }
   }, [p3]);
   React10.useEffect(() => {
@@ -98565,7 +98882,8 @@ function HomeSection(p3) {
           {
             type: "button",
             onClick: p3.onToggleFormatPainter,
-            disabled: !p3.canEdit,
+            disabled: !p3.canEdit || p3.canActivateFormatPainter === false && !p3.formatPainterActive,
+            "data-testid": "format-painter-toggle",
             className: cn(
               gL,
               p3.formatPainterActive ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
@@ -98615,7 +98933,7 @@ function HomeSection(p3) {
             type: "button",
             className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors",
             onClick: () => {
-              p3.onInsertSlideFromLayout(lo.path);
+              p3.onInsertSlideFromLayout(lo.path, lo.name);
               setLayoutMenuOpen(false);
             },
             children: lo.name
@@ -99515,6 +99833,561 @@ function TextSection(p3) {
     ] })
   ] });
 }
+function ViewSection(p3) {
+  const { t: t2 } = reactI18next.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, title: "Normal view", children: "Normal" }),
+        p3.onToggleSlideSorter ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, onClick: p3.onToggleSlideSorter, title: "Slide Sorter view", children: "Slide Sorter" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, title: "Slide Sorter view", children: "Slide Sorter" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, title: "Reading View", children: "Reading View" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Presentation Views" })
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: p3.onEnterMasterView,
+          disabled: !p3.canEdit,
+          className: pill,
+          title: "Edit slide masters and layouts",
+          children: "Slide Master"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Master Views" })
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: p3.onZoomToFit && /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, onClick: p3.onZoomToFit, title: "Zoom to fit slide in window", children: "Zoom to Fit" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Zoom" })
+    ] }),
+    sep,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetEditTemplateMode(!p3.editTemplateMode),
+        disabled: !p3.canEdit,
+        className: cn(
+          pill,
+          p3.editTemplateMode ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
+        ),
+        title: "Toggle template/master element editing",
+        children: p3.editTemplateMode ? "Templates On" : "Templates Off"
+      }
+    ),
+    p3.onToggleSelectionPane && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: p3.onToggleSelectionPane,
+        className: cn(
+          pill,
+          p3.isSelectionPaneOpen ? "bg-primary hover:bg-primary/80 text-primary-foreground" : ""
+        ),
+        title: "Selection Pane",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuList, { className: ic2 }),
+          "Selection"
+        ]
+      }
+    ),
+    p3.onToggleEyedropper && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: p3.onToggleEyedropper,
+        disabled: !p3.canEdit,
+        className: cn(
+          pill,
+          p3.eyedropperActive ? "bg-purple-600 hover:bg-purple-500 text-purple-50" : ""
+        ),
+        title: "Eyedropper \u2014 sample a colour from the slide",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lu.LuPipette, { className: ic2 }),
+          "Eyedropper"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetShowGrid(!p3.showGrid),
+        className: cn(pill, p3.showGrid ? "bg-primary text-primary-foreground" : ""),
+        title: t2("pptx.grid.toggleGrid"),
+        children: t2("pptx.grid.grid")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetShowRulers(!p3.showRulers),
+        className: cn(pill, p3.showRulers ? "bg-primary text-primary-foreground" : ""),
+        title: t2("pptx.ruler.toggleRulers"),
+        children: t2("pptx.ruler.rulers")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetSnapToGrid(!p3.snapToGrid),
+        className: cn(pill, p3.snapToGrid ? "bg-primary text-primary-foreground" : ""),
+        title: t2("pptx.grid.snapToGrid"),
+        children: t2("pptx.grid.snapToGrid")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetSnapToShape(!p3.snapToShape),
+        className: cn(pill, p3.snapToShape ? "bg-primary text-primary-foreground" : ""),
+        title: t2("pptx.grid.snapToShape"),
+        children: t2("pptx.grid.snapToShape")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => p3.onAddGuide("h"), className: pill, title: "Add horizontal guide", children: "H Guide" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => p3.onAddGuide("v"), className: pill, title: "Add vertical guide", children: "V Guide" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => p3.onSetSpellCheckEnabled(!p3.spellCheckEnabled),
+        className: cn(pill, p3.spellCheckEnabled ? "bg-primary text-primary-foreground" : ""),
+        title: "Toggle spell check",
+        children: "Spell"
+      }
+    )
+  ] });
+}
+function MobileSheet({
+  open,
+  onClose,
+  title,
+  children,
+  heightFraction = 0.6,
+  fullScreen = false,
+  className,
+  headerRight
+}) {
+  const sheetRef = React10.useRef(null);
+  const [dragY, setDragY] = React10.useState(0);
+  const dragStartRef = React10.useRef(null);
+  const onPointerDown = React10.useCallback((e2) => {
+    dragStartRef.current = e2.clientY;
+    e2.target.setPointerCapture?.(e2.pointerId);
+  }, []);
+  const onPointerMove = React10.useCallback((e2) => {
+    if (dragStartRef.current === null) {
+      return;
+    }
+    const delta = e2.clientY - dragStartRef.current;
+    setDragY(Math.max(0, delta));
+  }, []);
+  const onPointerUp = React10.useCallback(
+    (e2) => {
+      if (dragStartRef.current === null) {
+        return;
+      }
+      const delta = e2.clientY - dragStartRef.current;
+      dragStartRef.current = null;
+      e2.target.releasePointerCapture?.(e2.pointerId);
+      if (delta > 120) {
+        onClose();
+      }
+      setDragY(0);
+    },
+    [onClose]
+  );
+  React10.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handleKey = (e2) => {
+      if (e2.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+  if (!open) {
+    return null;
+  }
+  const heightStyle = fullScreen ? { height: "calc(100dvh - env(safe-area-inset-top))" } : { height: `${Math.round(heightFraction * 100)}dvh` };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex flex-col justify-end md:hidden",
+      role: "dialog",
+      "aria-modal": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close",
+            className: "absolute inset-0 bg-black/40 backdrop-blur-[2px] animate-in fade-in duration-150",
+            onClick: onClose
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: sheetRef,
+            className: cn(
+              "relative bg-background border-t border-border rounded-t-2xl shadow-2xl flex flex-col overflow-hidden",
+              "animate-in slide-in-from-bottom duration-200",
+              className
+            ),
+            style: {
+              ...heightStyle,
+              transform: dragY > 0 ? `translateY(${dragY}px)` : void 0,
+              transition: dragStartRef.current === null ? "transform 150ms ease-out" : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flex items-center justify-center pt-2 pb-1 cursor-grab active:cursor-grabbing touch-none",
+                  onPointerDown,
+                  onPointerMove,
+                  onPointerUp,
+                  onPointerCancel: onPointerUp,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-10 rounded-full bg-muted-foreground/40" })
+                }
+              ),
+              (title || headerRight) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-4 pb-2 border-b border-border/60", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground truncate", children: title }),
+                headerRight
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto overscroll-contain", children })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var MENU_ITEMS = [
+  { key: "home", label: "Home", icon: lu.LuClipboardCopy },
+  { key: "insert", label: "Insert", icon: lu.LuPlus },
+  { key: "text", label: "Text", icon: lu.LuType },
+  { key: "draw", label: "Draw", icon: lu.LuPaintbrush },
+  { key: "arrange", label: "Arrange", icon: lu.LuShapes },
+  { key: "design", label: "Design", icon: lu.LuLayoutGrid },
+  { key: "transitions", label: "Transitions", icon: lu.LuSparkles },
+  { key: "animations", label: "Animations", icon: lu.LuWand },
+  { key: "slideShow", label: "Slide Show", icon: lu.LuPresentation },
+  { key: "review", label: "Review", icon: lu.LuTextCursorInput },
+  { key: "view", label: "View", icon: lu.LuSettings },
+  { key: "file", label: "File", icon: lu.LuFile }
+];
+function MobileMenuSheet(props) {
+  const { open, onClose } = props;
+  const [active, setActive] = React10.useState("home");
+  return /* @__PURE__ */ jsxRuntime.jsx(MobileSheet, { open, onClose, fullScreen: true, title: "Menu", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-background border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 overflow-x-auto px-3 py-2 scrollbar-none", children: MENU_ITEMS.map(({ key, label, icon: Icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActive(active === key ? null : key),
+        className: cn(
+          "inline-flex items-center gap-1.5 shrink-0 px-3 py-2 rounded-full text-[12px] font-medium border transition-colors min-h-[36px]",
+          active === key ? "bg-primary text-primary-foreground border-primary" : "border-border text-muted-foreground hover:text-foreground hover:bg-accent/40"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4" }),
+          label
+        ]
+      },
+      key
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsx(MobileSectionBody, { active, ...props }) })
+  ] }) });
+}
+function MobileSectionBody({
+  active,
+  ...p3
+}) {
+  const wrap = "flex flex-wrap items-center gap-2";
+  switch (active) {
+    case "home":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        HomeSection,
+        {
+          canEdit: p3.canEdit,
+          clipboardPayload: p3.clipboardPayload,
+          formatPainterActive: p3.formatPainterActive,
+          canActivateFormatPainter: p3.canActivateFormatPainter,
+          onCopy: p3.onCopy,
+          onCut: p3.onCut,
+          onPaste: p3.onPaste,
+          onToggleFormatPainter: p3.onToggleFormatPainter,
+          layoutOptions: p3.layoutOptions,
+          onInsertSlideFromLayout: p3.onInsertSlideFromLayout,
+          selectedElement: p3.selectedElement,
+          onUpdateTextStyle: p3.onUpdateTextStyle
+        }
+      ) });
+    case "insert":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        InsertSection,
+        {
+          canEdit: p3.canEdit,
+          newShapeType: p3.newShapeType,
+          onSetNewShapeType: p3.onSetNewShapeType,
+          onAddTextBox: p3.onAddTextBox,
+          onAddShape: p3.onAddShape,
+          onAddTable: p3.onAddTable,
+          onAddSmartArt: p3.onAddSmartArt,
+          onAddEquation: p3.onAddEquation,
+          onAddActionButton: p3.onAddActionButton,
+          onInsertField: p3.onInsertField,
+          onOpenImagePicker: p3.onOpenImagePicker,
+          onOpenMediaPicker: p3.onOpenMediaPicker
+        }
+      ) });
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TextSection,
+        {
+          canEdit: p3.canEdit,
+          selectedElement: p3.selectedElement,
+          tableEditorState: p3.tableEditorState,
+          onUpdateTextStyle: p3.onUpdateTextStyle
+        }
+      ) });
+    case "draw":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        DrawSection,
+        {
+          activeTool: p3.activeTool,
+          drawingColor: p3.drawingColor,
+          drawingWidth: p3.drawingWidth,
+          onSetActiveTool: p3.onSetActiveTool,
+          onSetDrawingColor: p3.onSetDrawingColor,
+          onSetDrawingWidth: p3.onSetDrawingWidth
+        }
+      ) });
+    case "arrange":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ArrangeSection,
+        {
+          canEdit: p3.canEdit,
+          selectedElement: p3.selectedElement,
+          clipboardPayload: p3.clipboardPayload,
+          onAlignElements: p3.onAlignElements,
+          onCopy: p3.onCopy,
+          onCut: p3.onCut,
+          onPaste: p3.onPaste,
+          onFlip: p3.onFlip,
+          onMoveLayer: p3.onMoveLayer,
+          onMoveLayerToEdge: p3.onMoveLayerToEdge,
+          onDuplicate: p3.onDuplicate,
+          onDelete: p3.onDelete,
+          formatPainterActive: p3.formatPainterActive,
+          onToggleFormatPainter: p3.onToggleFormatPainter,
+          canActivateFormatPainter: p3.canActivateFormatPainter
+        }
+      ) });
+    case "design":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        DesignSection,
+        {
+          canEdit: p3.canEdit,
+          onToggleThemeGallery: p3.onToggleThemeGallery,
+          isThemeGalleryOpen: p3.isThemeGalleryOpen,
+          onToggleThemeEditor: p3.onToggleThemeEditor,
+          isThemeEditorOpen: p3.isThemeEditorOpen,
+          onOpenDocumentProperties: p3.onOpenDocumentProperties,
+          onToggleInspector: p3.onToggleInspector,
+          isInspectorPaneOpen: p3.isInspectorPaneOpen
+        }
+      ) });
+    case "transitions":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TransitionsSection,
+        {
+          isInspectorPaneOpen: p3.isInspectorPaneOpen,
+          onToggleInspector: p3.onToggleInspector
+        }
+      ) });
+    case "animations":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        AnimationsSection,
+        {
+          canEdit: p3.canEdit,
+          selectedElement: p3.selectedElement,
+          isInspectorPaneOpen: p3.isInspectorPaneOpen,
+          onToggleInspector: p3.onToggleInspector,
+          onOpenAnimationPanel: p3.onOpenAnimationPanel,
+          onAddAnimation: p3.onAddAnimation,
+          onRemoveAnimation: p3.onRemoveAnimation
+        }
+      ) });
+    case "slideShow":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        SlideShowSection,
+        {
+          onPresent: () => p3.onSetMode("present"),
+          onEnterPresenterView: p3.onEnterPresenterView ?? (() => {
+          }),
+          onEnterRehearsalMode: p3.onEnterRehearsalMode ?? (() => {
+          }),
+          onOpenSetUpSlideShow: p3.onOpenSetUpSlideShow ?? (() => {
+          }),
+          onOpenBroadcastDialog: p3.onOpenBroadcastDialog ?? (() => {
+          }),
+          onToggleSubtitles: p3.onToggleSubtitles ?? (() => {
+          }),
+          showSubtitles: p3.showSubtitles ?? false,
+          onSetMode: p3.onSetMode
+        }
+      ) });
+    case "review":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ReviewSection,
+        {
+          canEdit: p3.canEdit,
+          spellCheckEnabled: p3.spellCheckEnabled,
+          onSetSpellCheckEnabled: p3.onSetSpellCheckEnabled,
+          onToggleComments: p3.onToggleComments,
+          isCommentsPanelOpen: p3.isCommentsPanelOpen,
+          slideCommentCount: p3.slideCommentCount,
+          onCompare: p3.onCompare
+        }
+      ) });
+    case "view":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ViewSection,
+        {
+          canEdit: p3.canEdit,
+          editTemplateMode: p3.editTemplateMode,
+          onSetEditTemplateMode: p3.onSetEditTemplateMode,
+          spellCheckEnabled: p3.spellCheckEnabled,
+          onSetSpellCheckEnabled: p3.onSetSpellCheckEnabled,
+          showGrid: p3.showGrid,
+          showRulers: p3.showRulers,
+          snapToGrid: p3.snapToGrid,
+          snapToShape: p3.snapToShape,
+          onSetShowGrid: p3.onSetShowGrid,
+          onSetShowRulers: p3.onSetShowRulers,
+          onSetSnapToGrid: p3.onSetSnapToGrid,
+          onSetSnapToShape: p3.onSetSnapToShape,
+          onAddGuide: p3.onAddGuide,
+          onEnterMasterView: p3.onEnterMasterView,
+          isSelectionPaneOpen: p3.isSelectionPaneOpen,
+          onToggleSelectionPane: p3.onToggleSelectionPane,
+          eyedropperActive: p3.eyedropperActive,
+          onToggleEyedropper: p3.onToggleEyedropper
+        }
+      ) });
+    case "file":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+        FileSection,
+        {
+          onExportPng: p3.onExportPng,
+          onExportPdf: p3.onExportPdf,
+          onExportVideo: p3.onExportVideo,
+          onExportGif: p3.onExportGif,
+          onPackageForSharing: p3.onPackageForSharing,
+          onSaveAsPptx: p3.onSaveAsPptx,
+          onSaveAsPpsx: p3.onSaveAsPpsx,
+          onSaveAsPptm: p3.onSaveAsPptm,
+          hasMacros: p3.hasMacros,
+          onCopySlideAsImage: p3.onCopySlideAsImage,
+          onPrint: p3.onPrint,
+          onOpenDocumentProperties: p3.onOpenDocumentProperties,
+          onOpenPasswordProtection: p3.onOpenPasswordProtection,
+          onOpenFontEmbedding: p3.onOpenFontEmbedding,
+          onOpenDigitalSignatures: p3.onOpenDigitalSignatures
+        }
+      ) });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-sm text-muted-foreground py-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronRight, { className: "w-5 h-5 inline-block opacity-50" }),
+        " Select a section above"
+      ] });
+  }
+}
+function MobileToolbar(props) {
+  const { t: t2 } = reactI18next.useTranslation();
+  const { mode, canUndo, canRedo, onUndo, onRedo, onSetMode } = props;
+  const [menuOpen, setMenuOpen] = React10.useState(false);
+  const showEdit = mode === "edit" || mode === "master";
+  const btn = "inline-flex items-center justify-center min-w-[44px] min-h-[44px] rounded-md text-foreground/80 hover:bg-accent/60 disabled:opacity-40 disabled:cursor-not-allowed active:scale-95 transition-transform";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Toolbar",
+      className: "relative z-20 flex items-center gap-1 px-2 py-1 border-b border-border bg-secondary/50 min-h-[52px] pt-[max(env(safe-area-inset-top),0px)]",
+      children: [
+        showEdit && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setMenuOpen(true),
+            className: btn,
+            title: "Menu",
+            "aria-label": "Menu",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuMenu, { className: "w-5 h-5" })
+          }
+        ),
+        showEdit && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onUndo,
+              disabled: !canUndo,
+              className: btn,
+              title: t2("pptx.toolbar.undo"),
+              "aria-label": t2("pptx.toolbar.undo"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuUndo, { className: "w-5 h-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRedo,
+              disabled: !canRedo,
+              className: btn,
+              title: t2("pptx.toolbar.redo"),
+              "aria-label": t2("pptx.toolbar.redo"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuRedo, { className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSetMode("present"),
+            className: cn(btn, "text-primary"),
+            title: t2("pptx.toolbar.present"),
+            "aria-label": t2("pptx.toolbar.present"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPresentation, { className: "w-5 h-5" })
+          }
+        ),
+        showEdit && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: props.onOpenShareDialog ?? props.onPackageForSharing,
+            className: cn(btn, "bg-primary text-primary-foreground hover:bg-primary/90 px-3"),
+            title: t2("pptx.toolbar.share"),
+            "aria-label": t2("pptx.toolbar.share"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuShare2, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(MobileMenuSheet, { open: menuOpen, onClose: () => setMenuOpen(false), ...props })
+      ]
+    }
+  );
+}
 function CustomShowsControls({
   customShows,
   activeCustomShowId,
@@ -99943,7 +100816,7 @@ function ToolbarPrimaryRow(p3) {
         onClick: p3.onToggleComments,
         className: cn(
           qab,
-          "max-md:hidden",
+          "relative max-md:hidden",
           p3.isCommentsPanelOpen ? "text-foreground" : "text-muted-foreground"
         ),
         title: t2("pptx.toolbar.comments"),
@@ -100059,134 +100932,11 @@ function ToolbarPrimaryRow(p3) {
     /* @__PURE__ */ jsxRuntime.jsx(OverflowMenu, { ...p3 })
   ] });
 }
-function ViewSection(p3) {
-  const { t: t2 } = reactI18next.useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, title: "Normal view", children: "Normal" }),
-        p3.onToggleSlideSorter ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, onClick: p3.onToggleSlideSorter, title: "Slide Sorter view", children: "Slide Sorter" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, title: "Slide Sorter view", children: "Slide Sorter" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, title: "Reading View", children: "Reading View" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Presentation Views" })
-    ] }),
-    sep,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: p3.onEnterMasterView,
-          disabled: !p3.canEdit,
-          className: pill,
-          title: "Edit slide masters and layouts",
-          children: "Slide Master"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Master Views" })
-    ] }),
-    sep,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: p3.onZoomToFit && /* @__PURE__ */ jsxRuntime.jsx("button", { className: pill, onClick: p3.onZoomToFit, title: "Zoom to fit slide in window", children: "Zoom to Fit" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-muted-foreground leading-none", children: "Zoom" })
-    ] }),
-    sep,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetEditTemplateMode(!p3.editTemplateMode),
-        disabled: !p3.canEdit,
-        className: cn(
-          pill,
-          p3.editTemplateMode ? "bg-amber-600 hover:bg-amber-500 text-amber-50" : ""
-        ),
-        title: "Toggle template/master element editing",
-        children: p3.editTemplateMode ? "Templates On" : "Templates Off"
-      }
-    ),
-    p3.onToggleSelectionPane && /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: p3.onToggleSelectionPane,
-        className: cn(
-          pill,
-          p3.isSelectionPaneOpen ? "bg-primary hover:bg-primary/80 text-primary-foreground" : ""
-        ),
-        title: "Selection Pane",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lu.LuList, { className: ic2 }),
-          "Selection"
-        ]
-      }
-    ),
-    p3.onToggleEyedropper && /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: p3.onToggleEyedropper,
-        disabled: !p3.canEdit,
-        className: cn(
-          pill,
-          p3.eyedropperActive ? "bg-purple-600 hover:bg-purple-500 text-purple-50" : ""
-        ),
-        title: "Eyedropper \u2014 sample a colour from the slide",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lu.LuPipette, { className: ic2 }),
-          "Eyedropper"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetShowGrid(!p3.showGrid),
-        className: cn(pill, p3.showGrid ? "bg-primary text-primary-foreground" : ""),
-        title: t2("pptx.grid.toggleGrid"),
-        children: t2("pptx.grid.grid")
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetShowRulers(!p3.showRulers),
-        className: cn(pill, p3.showRulers ? "bg-primary text-primary-foreground" : ""),
-        title: t2("pptx.ruler.toggleRulers"),
-        children: t2("pptx.ruler.rulers")
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetSnapToGrid(!p3.snapToGrid),
-        className: cn(pill, p3.snapToGrid ? "bg-primary text-primary-foreground" : ""),
-        title: t2("pptx.grid.snapToGrid"),
-        children: t2("pptx.grid.snapToGrid")
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetSnapToShape(!p3.snapToShape),
-        className: cn(pill, p3.snapToShape ? "bg-primary text-primary-foreground" : ""),
-        title: t2("pptx.grid.snapToShape"),
-        children: t2("pptx.grid.snapToShape")
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => p3.onAddGuide("h"), className: pill, title: "Add horizontal guide", children: "H Guide" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => p3.onAddGuide("v"), className: pill, title: "Add vertical guide", children: "V Guide" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => p3.onSetSpellCheckEnabled(!p3.spellCheckEnabled),
-        className: cn(pill, p3.spellCheckEnabled ? "bg-primary text-primary-foreground" : ""),
-        title: "Toggle spell check",
-        children: "Spell"
-      }
-    )
-  ] });
-}
 function Toolbar(p3) {
   const { mode, isNarrowViewport, isCompactToolbarOpen, toolbarSection, onSetToolbarSection } = p3;
+  if (isNarrowViewport && mode !== "present") {
+    return /* @__PURE__ */ jsxRuntime.jsx(MobileToolbar, { ...p3 });
+  }
   const sFil = toolbarSection === "file";
   const sHome = toolbarSection === "home";
   const sIns = toolbarSection === "insert";
@@ -100272,6 +101022,7 @@ function Toolbar(p3) {
                   canEdit: p3.canEdit,
                   clipboardPayload: p3.clipboardPayload,
                   formatPainterActive: p3.formatPainterActive,
+                  canActivateFormatPainter: p3.canActivateFormatPainter,
                   onCopy: p3.onCopy,
                   onCut: p3.onCut,
                   onPaste: p3.onPaste,
@@ -100335,7 +101086,8 @@ function Toolbar(p3) {
                   onDuplicate: p3.onDuplicate,
                   onDelete: p3.onDelete,
                   formatPainterActive: p3.formatPainterActive,
-                  onToggleFormatPainter: p3.onToggleFormatPainter
+                  onToggleFormatPainter: p3.onToggleFormatPainter,
+                  canActivateFormatPainter: p3.canActivateFormatPainter
                 }
               ),
               sDes && /* @__PURE__ */ jsxRuntime.jsx(
@@ -106048,181 +106800,194 @@ function InspectorPane(props) {
     const fallback = themeOptions[0]?.path ?? "";
     setSelectedThemePath((previous) => previous || fallback);
   }, [slideMasters, themeOptions]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        // Shared styles
-        "bg-background flex flex-col text-xs text-foreground shadow-xl",
-        // Mobile: absolute bottom sheet overlay
-        "max-md:fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:w-full max-md:max-h-[60vh] max-md:rounded-t-xl max-md:border-t max-md:border-border max-md:z-30",
-        "max-md:transition-transform max-md:duration-200 max-md:ease-in-out",
-        isOpen ? "max-md:translate-y-0" : "max-md:translate-y-full",
-        // Desktop: flow-based flex child (takes space from canvas)
-        "md:h-full md:border-l md:border-border",
-        !panelWidth && "md:w-72"
-      ),
-      style: panelWidth ? { width: panelWidth } : void 0,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 rounded bg-muted p-0.5", children: INSPECTOR_TABS.map(({ key, label, icon: Icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              title: label,
-              className: cn(
-                "flex items-center gap-1 px-2 py-1 rounded text-[11px] transition-colors",
-                activeTab === key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent"
-              ),
-              onClick: () => onSetActiveTab(key),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-3.5 h-3.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: label })
-              ]
-            },
-            key
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onClose,
-              title: t2("common.close"),
-              className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { className: "w-4 h-4" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-3 space-y-3", children: [
-          activeTab === "elements" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(HEADING, "mb-2"), children: t2("pptx.inspector.layerOrder") }),
-            activeSlide ? [...activeSlide.elements || []].reverse().map((el, ri) => {
-              const idx = (activeSlide.elements || []).length - 1 - ri;
-              const sel = selectedElement?.id === el.id || selectedElementIds.includes(el.id);
-              const label = (pptxViewerCore.hasTextProperties(el) ? (el.text || "").slice(0, 24) : void 0) || el.type;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  title: `${el.type} \u2014 ${el.id}`,
-                  className: cn(
-                    "flex items-center gap-2 px-2 py-1 rounded cursor-pointer transition-colors",
-                    sel ? "bg-primary/30 text-primary" : "hover:bg-muted text-foreground"
-                  ),
-                  onClick: () => onSelectElement(el.id),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground w-4 text-right", children: idx + 1 }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label })
-                  ]
-                },
-                el.id
-              );
-            }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground italic", children: t2("pptx.inspector.noSlideSelected") })
-          ] }),
-          activeTab === "properties" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: hasSelection && selectedElement ? /* @__PURE__ */ jsxRuntime.jsx(
-            ElementInspectorBody,
-            {
-              selectedElement,
-              canEdit,
-              slides,
-              tableEditorState,
-              mediaDataUrls,
-              onUpdateElement,
-              onUpdateElementStyle,
-              onUpdateTextStyle,
-              onMoveLayer
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": t2("common.close"),
+        onClick: onClose,
+        className: "md:hidden fixed inset-0 z-20 bg-black/40 backdrop-blur-[2px] animate-in fade-in duration-150"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          // Shared styles
+          "bg-background flex flex-col text-xs text-foreground shadow-xl",
+          // Mobile: absolute bottom sheet overlay sized via dvh so it
+          // adapts to the on-screen keyboard / dynamic browser chrome.
+          "max-md:fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:w-full max-md:max-h-[75dvh] max-md:rounded-t-2xl max-md:border-t max-md:border-border max-md:z-30 max-md:pb-[max(env(safe-area-inset-bottom),0px)]",
+          "max-md:transition-transform max-md:duration-200 max-md:ease-in-out",
+          isOpen ? "max-md:translate-y-0" : "max-md:translate-y-full",
+          // Desktop: flow-based flex child (takes space from canvas)
+          "md:h-full md:border-l md:border-border",
+          !panelWidth && "md:w-72"
+        ),
+        style: panelWidth ? { width: panelWidth } : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden flex items-center justify-center pt-2 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-10 rounded-full bg-muted-foreground/40" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 rounded bg-muted p-0.5", children: INSPECTOR_TABS.map(({ key, label, icon: Icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                title: label,
+                className: cn(
+                  "flex items-center gap-1 px-2 py-1 rounded text-[11px] transition-colors",
+                  activeTab === key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                ),
+                onClick: () => onSetActiveTab(key),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-3.5 h-3.5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: label })
+                ]
+              },
+              key
+            )) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              PresentationPropertiesPanel,
+              "button",
               {
-                canEdit,
-                canvasSize,
-                presentationProperties,
-                onUpdatePresentationProperties,
-                notesMaster,
-                handoutMaster,
-                notesCanvasSize,
-                coreProperties,
-                appProperties,
-                customProperties,
-                themeOptions,
-                selectedThemePath,
-                setSelectedThemePath,
-                onApplyTheme,
-                onUpdateCoreProperties,
-                onUpdateAppProperties,
-                onUpdateCustomProperties,
-                tagCollections,
-                onUpdateTagCollections,
-                onUpdateCanvasSize,
-                activeSlide,
-                theme,
-                onUpdateSlide
+                type: "button",
+                onClick: onClose,
+                title: t2("common.close"),
+                className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { className: "w-4 h-4" })
               }
-            ),
-            activeSlide && /* @__PURE__ */ jsxRuntime.jsx(
-              SlideBackgroundPanel,
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-3 space-y-3", children: [
+            activeTab === "elements" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(HEADING, "mb-2"), children: t2("pptx.inspector.layerOrder") }),
+              activeSlide ? [...activeSlide.elements || []].reverse().map((el, ri) => {
+                const idx = (activeSlide.elements || []).length - 1 - ri;
+                const sel = selectedElement?.id === el.id || selectedElementIds.includes(el.id);
+                const label = (pptxViewerCore.hasTextProperties(el) ? (el.text || "").slice(0, 24) : void 0) || el.type;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    title: `${el.type} \u2014 ${el.id}`,
+                    className: cn(
+                      "flex items-center gap-2 px-2 py-1 rounded cursor-pointer transition-colors",
+                      sel ? "bg-primary/30 text-primary" : "hover:bg-muted text-foreground"
+                    ),
+                    onClick: () => onSelectElement(el.id),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground w-4 text-right", children: idx + 1 }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label })
+                    ]
+                  },
+                  el.id
+                );
+              }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground italic", children: t2("pptx.inspector.noSlideSelected") })
+            ] }),
+            activeTab === "properties" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: hasSelection && selectedElement ? /* @__PURE__ */ jsxRuntime.jsx(
+              ElementInspectorBody,
               {
-                activeSlide,
+                selectedElement,
                 canEdit,
-                onUpdateSlide,
-                editTemplateMode,
-                slideMasters,
-                onSetTemplateBackground,
-                onGetTemplateBackgroundColor
+                slides,
+                tableEditorState,
+                mediaDataUrls,
+                onUpdateElement,
+                onUpdateElementStyle,
+                onUpdateTextStyle,
+                onMoveLayer
               }
-            )
-          ] }) }),
-          activeTab === "comments" && /* @__PURE__ */ jsxRuntime.jsx(
-            InspectorCommentsSection,
-            {
-              comments,
-              canEdit,
-              activeSlide,
-              selectedElement,
-              editingCommentId,
-              commentEditDraft,
-              commentDraft,
-              replyingToCommentId: replyingToCommentId ?? null,
-              replyDraftByCommentId: replyDraftByCommentId ?? {},
-              onSetCommentDraft,
-              onAddComment,
-              onDeleteComment,
-              onStartEditComment,
-              onSaveEditComment,
-              onCancelEditComment,
-              onSetCommentEditDraft,
-              onToggleCommentResolved,
-              onStartReply,
-              onCancelReply,
-              onReplyDraftChange,
-              onSubmitReply,
-              onSelectElement
-            }
-          )
-        ] }),
-        hasSelection && selectedElement && activeSlide && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, { direction: "vertical", onResize: onResizeAnim }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "border-t border-border p-3 overflow-y-auto flex-shrink-0",
-              style: { height: animPanelHeight },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                AnimationPanel,
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PresentationPropertiesPanel,
                 {
-                  selectedElement,
-                  activeSlide,
                   canEdit,
+                  canvasSize,
+                  presentationProperties,
+                  onUpdatePresentationProperties,
+                  notesMaster,
+                  handoutMaster,
+                  notesCanvasSize,
+                  coreProperties,
+                  appProperties,
+                  customProperties,
+                  themeOptions,
+                  selectedThemePath,
+                  setSelectedThemePath,
+                  onApplyTheme,
+                  onUpdateCoreProperties,
+                  onUpdateAppProperties,
+                  onUpdateCustomProperties,
+                  tagCollections,
+                  onUpdateTagCollections,
+                  onUpdateCanvasSize,
+                  activeSlide,
+                  theme,
                   onUpdateSlide
                 }
+              ),
+              activeSlide && /* @__PURE__ */ jsxRuntime.jsx(
+                SlideBackgroundPanel,
+                {
+                  activeSlide,
+                  canEdit,
+                  onUpdateSlide,
+                  editTemplateMode,
+                  slideMasters,
+                  onSetTemplateBackground,
+                  onGetTemplateBackgroundColor
+                }
               )
-            }
-          )
-        ] })
-      ]
-    }
-  );
+            ] }) }),
+            activeTab === "comments" && /* @__PURE__ */ jsxRuntime.jsx(
+              InspectorCommentsSection,
+              {
+                comments,
+                canEdit,
+                activeSlide,
+                selectedElement,
+                editingCommentId,
+                commentEditDraft,
+                commentDraft,
+                replyingToCommentId: replyingToCommentId ?? null,
+                replyDraftByCommentId: replyDraftByCommentId ?? {},
+                onSetCommentDraft,
+                onAddComment,
+                onDeleteComment,
+                onStartEditComment,
+                onSaveEditComment,
+                onCancelEditComment,
+                onSetCommentEditDraft,
+                onToggleCommentResolved,
+                onStartReply,
+                onCancelReply,
+                onReplyDraftChange,
+                onSubmitReply,
+                onSelectElement
+              }
+            )
+          ] }),
+          hasSelection && selectedElement && activeSlide && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, { direction: "vertical", onResize: onResizeAnim }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "border-t border-border p-3 overflow-y-auto flex-shrink-0",
+                style: { height: animPanelHeight },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  AnimationPanel,
+                  {
+                    selectedElement,
+                    activeSlide,
+                    canEdit,
+                    onUpdateSlide
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
 }
 function buildPathD(points) {
   if (points.length === 0) {
@@ -110356,7 +111121,8 @@ function ViewerBottomPanels({
   onZoomToFit,
   mode,
   onSetMode,
-  onToggleSlideSorter
+  onToggleSlideSorter,
+  hideStatusBar = false
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     onResizeBottom && !isSlideNotesCollapsed && /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, { direction: "vertical", onResize: onResizeBottom }),
@@ -110372,7 +111138,7 @@ function ViewerBottomPanels({
         panelHeight: notesPanelHeight
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    !hideStatusBar && /* @__PURE__ */ jsxRuntime.jsx(
       StatusBar,
       {
         slideCount,
@@ -110529,6 +111295,45 @@ function ViewerInspector({
     }
   );
 }
+
+// src/viewer/hooks/useScopedLayoutOptions.ts
+function scopeLayoutOptionsToActiveSlide(options, activeSlide) {
+  if (!activeSlide?.layoutPath) {
+    return options;
+  }
+  const hasAnyMasterInfo = options.some((o3) => o3.masterPath);
+  if (!hasAnyMasterInfo) {
+    return options;
+  }
+  const activeOption = options.find((o3) => o3.path === activeSlide.layoutPath);
+  const activeMaster = activeOption?.masterPath;
+  if (!activeMaster) {
+    return options;
+  }
+  const scoped = options.filter((o3) => o3.masterPath === activeMaster);
+  const seen = /* @__PURE__ */ new Map();
+  for (const opt of scoped) {
+    const isActive = opt.path === activeSlide.layoutPath;
+    const existing = seen.get(opt.name);
+    if (!existing || isActive) {
+      seen.set(opt.name, opt);
+    }
+  }
+  const chosen = new Set(Array.from(seen.values()).map((o3) => o3.path));
+  const result = [];
+  const usedNames = /* @__PURE__ */ new Set();
+  for (const opt of scoped) {
+    if (!chosen.has(opt.path)) {
+      continue;
+    }
+    if (usedNames.has(opt.name)) {
+      continue;
+    }
+    usedNames.add(opt.name);
+    result.push(opt);
+  }
+  return result;
+}
 function ViewerToolbarSection(props) {
   const {
     mode,
@@ -110598,6 +111403,10 @@ function ViewerToolbarSection(props) {
     },
     [activeSlide, propertyHandlers]
   );
+  const scopedLayoutOptions = React10__namespace.default.useMemo(
+    () => scopeLayoutOptionsToActiveSlide(s.layoutOptions, activeSlide),
+    [s.layoutOptions, activeSlide]
+  );
   const handleApplyTransitionToAll = React10.useCallback(() => {
     const transition = activeSlide?.transition;
     if (!transition) {
@@ -110704,7 +111513,7 @@ function ViewerToolbarSection(props) {
         onUpdateTextStyle: ops.updateSelectedTextStyle,
         isOverflowMenuOpen: s.isOverflowMenuOpen,
         onSetOverflowMenuOpen: s.setIsOverflowMenuOpen,
-        layoutOptions: s.layoutOptions,
+        layoutOptions: scopedLayoutOptions,
         onInsertSlideFromLayout: slideOps.handleInsertSlideFromLayout,
         customShows: s.customShows,
         activeCustomShowId: s.activeCustomShowId,
@@ -110737,6 +111546,7 @@ function ViewerToolbarSection(props) {
         isCommentsPanelOpen: s.isInspectorPaneOpen,
         slideCommentCount: activeSlide?.comments?.length ?? 0,
         formatPainterActive: s.formatPainterActive,
+        canActivateFormatPainter: hasCopyableFormat(selectedElement),
         onToggleFormatPainter: onToggleFormatPainterProp ?? (() => s.setFormatPainterActive((p3) => !p3)),
         isSelectionPaneOpen: s.isSelectionPaneOpen,
         onToggleSelectionPane: () => s.setIsSelectionPaneOpen((p3) => !p3),
@@ -113885,6 +114695,166 @@ function ViewerMainContent(props) {
     )
   ] });
 }
+function MobileBottomBar({
+  onOpenSlides,
+  onOpenInsert,
+  onOpenInspector,
+  onOpenComments,
+  onToggleNotes,
+  activeSheet,
+  commentCount
+}) {
+  const actions = [
+    {
+      key: "slides",
+      label: "Slides",
+      icon: lu.LuLayers,
+      onClick: onOpenSlides
+    },
+    {
+      key: "insert",
+      label: "Insert",
+      icon: lu.LuPlus,
+      onClick: onOpenInsert
+    },
+    {
+      key: "inspector",
+      label: "Format",
+      icon: lu.LuSettings2,
+      onClick: onOpenInspector
+    },
+    {
+      key: "comments",
+      label: "Comments",
+      icon: lu.LuMessageSquare,
+      onClick: onOpenComments,
+      badge: commentCount
+    },
+    {
+      key: "notes",
+      label: "Notes",
+      icon: lu.LuStickyNote,
+      onClick: onToggleNotes
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "aria-label": "Editor actions",
+      className: "md:hidden flex items-stretch justify-around border-t border-border bg-secondary/80 backdrop-blur supports-[backdrop-filter]:bg-secondary/60 pb-[max(env(safe-area-inset-bottom),0px)]",
+      children: actions.map(({ key, label, icon: Icon, onClick, badge }) => {
+        const active = activeSheet === key;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick,
+            className: cn(
+              "relative flex flex-col items-center justify-center gap-0.5 flex-1 min-h-[56px] py-1.5 text-[10px] font-medium transition-colors active:scale-95",
+              active ? "text-primary" : "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-pressed": active,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-5 h-5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+              badge !== void 0 && badge > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-1 right-1/4 flex items-center justify-center min-w-[16px] h-4 px-1 rounded-full bg-primary text-[9px] font-semibold text-primary-foreground", children: badge > 99 ? "99+" : badge }),
+              active && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-0 left-1/2 -translate-x-1/2 w-8 h-0.5 rounded-full bg-primary" })
+            ]
+          },
+          key
+        );
+      })
+    }
+  );
+}
+function MobileSlidesSheet({
+  open,
+  onClose,
+  ...sidebar
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MobileSheet, { open, onClose, heightFraction: 0.7, title: "Slides", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(SlidesPaneSidebar, { ...sidebar }) }) });
+}
+function MobileChromeOverlay(props) {
+  const {
+    state: s,
+    editorOps,
+    presentation,
+    slides,
+    activeSlideIndex,
+    canvasSize,
+    slideSectionGroups,
+    canEdit,
+    commentCount
+  } = props;
+  const activeSheet = s.isSlidesPaneOpen ? "slides" : s.isInspectorPaneOpen ? s.sidebarPanelMode === "comments" ? "comments" : "inspector" : !s.isSlideNotesCollapsed ? "notes" : null;
+  const closeAllSheets = () => {
+    s.setIsSlidesPaneOpen(false);
+    s.setIsInspectorPaneOpen(false);
+    s.setIsSlideNotesCollapsed(true);
+  };
+  const openSheet = (which) => {
+    closeAllSheets();
+    switch (which) {
+      case "slides":
+        s.setIsSlidesPaneOpen(true);
+        break;
+      case "inspector":
+        s.setSidebarPanelMode("properties");
+        s.setIsInspectorPaneOpen(true);
+        break;
+      case "comments":
+        s.setSidebarPanelMode("comments");
+        s.setIsInspectorPaneOpen(true);
+        break;
+      case "notes":
+        s.setIsSlideNotesCollapsed(false);
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileSlidesSheet,
+      {
+        open: s.isSlidesPaneOpen,
+        onClose: () => s.setIsSlidesPaneOpen(false),
+        slides,
+        activeSlideIndex,
+        canvasSize,
+        sectionGroups: slideSectionGroups,
+        isOpen: true,
+        canEdit,
+        onSelectSlide: (index) => {
+          s.setActiveSlideIndex(index);
+          s.setIsSlidesPaneOpen(false);
+        },
+        onSlideContextMenu: editorOps.slideOps.handleSlideContextMenu,
+        onMoveSlide: editorOps.slideOps.handleMoveSlide,
+        onAddSlide: editorOps.slideOps.handleAddSlide,
+        onCollapse: () => s.setIsSlidesPaneOpen(false),
+        onAddSection: editorOps.sectionOps.addSection,
+        onRenameSection: editorOps.sectionOps.renameSection,
+        onDeleteSection: editorOps.sectionOps.deleteSection,
+        onMoveSectionUp: editorOps.sectionOps.moveSectionUp,
+        onMoveSectionDown: editorOps.sectionOps.moveSectionDown,
+        rehearsalTimings: Object.keys(presentation.recordedTimings).length > 0 ? presentation.recordedTimings : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileBottomBar,
+      {
+        activeSheet,
+        commentCount,
+        onOpenSlides: () => s.isSlidesPaneOpen ? s.setIsSlidesPaneOpen(false) : openSheet("slides"),
+        onOpenInsert: () => {
+          editorOps.insertHandlers.handleAddTextBox();
+        },
+        onOpenInspector: () => s.isInspectorPaneOpen && s.sidebarPanelMode !== "comments" ? s.setIsInspectorPaneOpen(false) : openSheet("inspector"),
+        onOpenComments: () => s.isInspectorPaneOpen && s.sidebarPanelMode === "comments" ? s.setIsInspectorPaneOpen(false) : openSheet("comments"),
+        onToggleNotes: () => !s.isSlideNotesCollapsed ? s.setIsSlideNotesCollapsed(true) : openSheet("notes")
+      }
+    )
+  ] });
+}
 function ToggleSwitch({
   label,
   enabled,
@@ -114077,14 +115047,10 @@ function useYjsDocumentSync({
   const lastSyncedRef = React10.useRef("");
   const hasInitializedRef = React10.useRef(false);
   const getDocMap = React10.useCallback(() => {
-    if (!doc2 || typeof doc2 !== "object") {
+    if (!doc2) {
       return null;
     }
-    const d = doc2;
-    if (typeof d.getMap !== "function") {
-      return null;
-    }
-    return d.getMap("slides-data");
+    return doc2.getMap("slides-data");
   }, [doc2]);
   React10.useEffect(() => {
     if (!isConnected || !doc2) {
@@ -114105,10 +115071,9 @@ function useYjsDocumentSync({
       return;
     }
     lastSyncedRef.current = serialized;
-    const d = doc2;
-    d.transact(() => {
+    doc2.transact(() => {
       const currentCount = map3.get("count");
-      if (currentCount && currentCount > slides.length) {
+      if (typeof currentCount === "number" && currentCount > slides.length) {
         for (let i3 = slides.length; i3 < currentCount; i3++) {
           map3.delete(`slide-${i3}`);
         }
@@ -114133,13 +115098,13 @@ function useYjsDocumentSync({
     }
     const handleUpdate = () => {
       const count = map3.get("count");
-      if (!count || count === 0) {
+      if (typeof count !== "number" || count === 0) {
         return;
       }
       const remoteSlides = [];
       for (let i3 = 0; i3 < count; i3++) {
         const slideJson = map3.get(`slide-${i3}`);
-        if (slideJson) {
+        if (typeof slideJson === "string") {
           try {
             remoteSlides.push(JSON.parse(slideJson));
           } catch {
@@ -114164,7 +115129,7 @@ function useYjsDocumentSync({
     if (!hasInitializedRef.current) {
       hasInitializedRef.current = true;
       const count = map3.get("count");
-      if (count && count > 0) {
+      if (typeof count === "number" && count > 0) {
         handleUpdate();
       }
     }
@@ -114725,13 +115690,14 @@ function useCanvasInteractions(input) {
     if (e2.button !== 0) {
       return;
     }
-    if (!selectedElementIdSet.has(elementId)) {
+    const wasSelected = selectedElementIdSet.has(elementId);
+    if (!wasSelected) {
       ops.applySelection(elementId);
       justSelectedRef.current = true;
     } else {
       justSelectedRef.current = false;
     }
-    const ids = effectiveSelectedIds.length ? effectiveSelectedIds : [elementId];
+    const ids = !wasSelected ? [elementId] : effectiveSelectedIds.length ? effectiveSelectedIds : [elementId];
     const startPositions = {};
     const domEls = /* @__PURE__ */ new Map();
     for (const id2 of ids) {
@@ -116768,8 +117734,14 @@ function useSectionOperations(input) {
 }
 
 // src/viewer/hooks/useSlideManagement.ts
+function insertSlideFromLayoutUpdater(slides, activeIndex, draft) {
+  const next = [...slides];
+  const insertAt = Math.max(0, Math.min(activeIndex + 1, next.length));
+  next.splice(insertAt, 0, draft);
+  return next;
+}
 function useSlideManagement(input) {
-  const { slides, activeSlideIndex, setActiveSlideIndex, ops, history } = input;
+  const { slides, activeSlideIndex, setActiveSlideIndex, ops, history, handlerRef } = input;
   const handleAddSlide = () => {
     const newSlide = {
       id: `slide-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
@@ -116868,8 +117840,42 @@ function useSlideManagement(input) {
     });
     history.markDirty();
   };
-  const handleInsertSlideFromLayout = (_layoutPath) => {
-    handleAddSlide();
+  const handleInsertSlideFromLayout = (layoutPath, layoutName) => {
+    const insertAt = activeSlideIndex + 1;
+    const draft = {
+      id: `slide-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+      rId: "",
+      slideNumber: slides.length + 1,
+      elements: [],
+      layoutPath,
+      ...layoutName ? { layoutName } : {}
+    };
+    let inserted = [];
+    ops.updateSlides((prev) => {
+      inserted = insertSlideFromLayoutUpdater(prev, activeSlideIndex, draft);
+      return inserted;
+    });
+    setActiveSlideIndex(insertAt);
+    history.markDirty();
+    const handler = handlerRef?.current;
+    if (handler) {
+      void handler.applyLayoutToSlide(insertAt, layoutPath, inserted).then(
+        (updated) => {
+          ops.updateSlides((prev) => {
+            if (prev[insertAt]?.id !== draft.id) {
+              return prev;
+            }
+            const next = [...prev];
+            next[insertAt] = updated;
+            return next;
+          });
+          return void 0;
+        },
+        () => {
+          return void 0;
+        }
+      );
+    }
   };
   return {
     handleAddSlide,
@@ -117405,7 +118411,8 @@ function useEditorOperations(input) {
     canvasSize,
     dialogs,
     presentation,
-    userName
+    userName,
+    handlerRef
   } = input;
   const ops = useElementOperations({
     activeSlide,
@@ -117507,7 +118514,8 @@ function useEditorOperations(input) {
     activeSlideIndex,
     setActiveSlideIndex: state2.setActiveSlideIndex,
     ops,
-    history
+    history,
+    handlerRef
   });
   const tableOps = useTableOperations({
     selectedElement,
@@ -117536,21 +118544,34 @@ function useEditorOperations(input) {
   );
   const copiedFormatRef = React10.useRef(null);
   const prevFormatPainterRef = React10.useRef(false);
+  const { formatPainterActive, setFormatPainterActive, elementLookup } = state2;
   React10.useEffect(() => {
-    if (state2.formatPainterActive && !prevFormatPainterRef.current && selectedElement) {
+    if (formatPainterActive && !prevFormatPainterRef.current && selectedElement) {
       copiedFormatRef.current = copyFormatFromElement(selectedElement);
-    } else if (!state2.formatPainterActive) {
+    } else if (!formatPainterActive) {
       copiedFormatRef.current = null;
     }
-    prevFormatPainterRef.current = state2.formatPainterActive;
-  }, [state2.formatPainterActive, selectedElement]);
+    prevFormatPainterRef.current = formatPainterActive;
+  }, [formatPainterActive, selectedElement]);
+  React10.useEffect(() => {
+    if (!formatPainterActive) {
+      return;
+    }
+    const onKey = (e2) => {
+      if (e2.key === "Escape") {
+        setFormatPainterActive(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [formatPainterActive, setFormatPainterActive]);
   const formatPainterCanvasHandlers = React10.useMemo(
     () => ({
       ...canvasHandlers,
       handleElementClick: (elementId, e2) => {
-        if (state2.formatPainterActive && copiedFormatRef.current) {
+        if (formatPainterActive && copiedFormatRef.current) {
           e2.stopPropagation();
-          const element2 = state2.elementLookup.get(elementId);
+          const element2 = elementLookup.get(elementId);
           if (element2) {
             const updated = applyFormatToElement(element2, copiedFormatRef.current);
             const updates = {};
@@ -117563,14 +118584,21 @@ function useEditorOperations(input) {
             ops.updateElementById(elementId, updates);
           }
           copiedFormatRef.current = null;
-          state2.setFormatPainterActive(false);
+          setFormatPainterActive(false);
           ops.applySelection(elementId);
           return;
         }
         canvasHandlers.handleElementClick(elementId, e2);
+      },
+      handleCanvasMouseDown: (e2) => {
+        if (formatPainterActive) {
+          setFormatPainterActive(false);
+          return;
+        }
+        canvasHandlers.handleCanvasMouseDown(e2);
       }
     }),
-    [canvasHandlers, ops, state2]
+    [canvasHandlers, ops, formatPainterActive, setFormatPainterActive, elementLookup]
   );
   return {
     ops: combinedOps,
@@ -119709,21 +120737,35 @@ function useViewerDialogs(input) {
     null
   );
   const [embedFontsEnabled, setEmbedFontsEnabled] = React10.useState(false);
-  const [isNarrowViewport, setIsNarrowViewport] = React10.useState(false);
+  const [isNarrowViewport, setIsNarrowViewport] = React10.useState(
+    () => typeof window !== "undefined" ? window.innerWidth < 768 : false
+  );
   React10.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) {
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        setIsNarrowViewport(entry.contentRect.width < 768);
+    const handleWindow = () => setIsNarrowViewport(window.innerWidth < 768);
+    let observer = null;
+    let raf = 0;
+    const attach2 = () => {
+      const el = containerRef.current;
+      if (!el) {
+        raf = requestAnimationFrame(attach2);
+        return;
       }
-    });
-    observer.observe(el);
-    setIsNarrowViewport(el.clientWidth < 768);
-    return () => observer.disconnect();
+      observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+          setIsNarrowViewport(entry.contentRect.width < 768);
+        }
+      });
+      observer.observe(el);
+      setIsNarrowViewport(el.clientWidth < 768);
+    };
+    attach2();
+    window.addEventListener("resize", handleWindow);
+    return () => {
+      cancelAnimationFrame(raf);
+      observer?.disconnect();
+      window.removeEventListener("resize", handleWindow);
+    };
   }, []);
   React10.useEffect(() => {
     if (isDirty && hasDigitalSignatures && !signatureStripAcknowledgedRef.current) {
@@ -124195,7 +125237,9 @@ function useViewerCoreState(_input) {
 function useViewerUIState() {
   const [isCompactToolbarOpen, setIsCompactToolbarOpen] = React10.useState(false);
   const [toolbarSection, setToolbarSection] = React10.useState("home");
-  const [isSlidesPaneOpen, setIsSlidesPaneOpen] = React10.useState(true);
+  const [isSlidesPaneOpen, setIsSlidesPaneOpen] = React10.useState(
+    () => typeof window === "undefined" ? true : window.innerWidth >= 768
+  );
   const [isInspectorPaneOpen, setIsInspectorPaneOpen] = React10.useState(false);
   const [isSlideNotesCollapsed, setIsSlideNotesCollapsed] = React10.useState(true);
   const [isOverflowMenuOpen, setIsOverflowMenuOpen] = React10.useState(false);
@@ -124638,7 +125682,8 @@ var PowerPointViewer = React10.forwardRef(
       canvasSize,
       dialogs,
       presentation,
-      userName: authorName ?? collaboration?.userName
+      userName: authorName ?? collaboration?.userName,
+      handlerRef: actionSoundHandlerRef
     });
     const {
       exportHandlers,
@@ -124761,7 +125806,7 @@ var PowerPointViewer = React10.forwardRef(
             {
               activeSlide,
               allSlides: slides,
-              isSlideNotesCollapsed: isMobile || state2.isSlideNotesCollapsed,
+              isSlideNotesCollapsed: state2.isSlideNotesCollapsed,
               canEdit,
               slideCount: slides.length,
               activeSlideIndex,
@@ -124778,7 +125823,22 @@ var PowerPointViewer = React10.forwardRef(
               onZoomToFit: zoom.handleZoomToFit,
               mode,
               onSetMode: handleSetMode,
-              onToggleSlideSorter: () => state2.setShowSlideSorter((p3) => !p3)
+              onToggleSlideSorter: () => state2.setShowSlideSorter((p3) => !p3),
+              hideStatusBar: isMobile
+            }
+          ),
+          mode !== "present" && isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+            MobileChromeOverlay,
+            {
+              state: state2,
+              editorOps,
+              presentation,
+              slides,
+              activeSlideIndex,
+              canvasSize,
+              slideSectionGroups,
+              canEdit,
+              commentCount: activeSlide?.comments?.length ?? 0
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(