pptx-angular-viewer 1.1.22 → 1.1.23

package/fesm2022/pptx-angular-viewer.mjs

@@ -12554,6 +12554,98 @@ function replaceInSlides(slides, query, replacement, opts = {}) {
     return applyFindReplacements(slides, results, replacement);
 }
 
+/** Copy the paintable shape + text style off an element. */
+function copyFormatFromElement(element) {
+    const result = {};
+    if (hasShapeProperties(element) && element.shapeStyle) {
+        const s = element.shapeStyle;
+        result.shapeStyle = {
+            fillColor: s.fillColor,
+            fillMode: s.fillMode,
+            fillGradient: s.fillGradient,
+            fillGradientStops: s.fillGradientStops ? [...s.fillGradientStops] : undefined,
+            fillGradientAngle: s.fillGradientAngle,
+            fillGradientType: s.fillGradientType,
+            fillOpacity: s.fillOpacity,
+            fillPatternPreset: s.fillPatternPreset,
+            fillPatternBackgroundColor: s.fillPatternBackgroundColor,
+            strokeColor: s.strokeColor,
+            strokeWidth: s.strokeWidth,
+            strokeOpacity: s.strokeOpacity,
+            strokeDash: s.strokeDash,
+            lineJoin: s.lineJoin,
+            lineCap: s.lineCap,
+            shadowColor: s.shadowColor,
+            shadowBlur: s.shadowBlur,
+            shadowOffsetX: s.shadowOffsetX,
+            shadowOffsetY: s.shadowOffsetY,
+            shadowOpacity: s.shadowOpacity,
+            glowColor: s.glowColor,
+            glowRadius: s.glowRadius,
+            glowOpacity: s.glowOpacity,
+            softEdgeRadius: s.softEdgeRadius,
+        };
+    }
+    if (hasTextProperties(element) && element.textStyle) {
+        const t = element.textStyle;
+        result.textStyle = {
+            fontFamily: t.fontFamily,
+            fontSize: t.fontSize,
+            bold: t.bold,
+            italic: t.italic,
+            underline: t.underline,
+            underlineStyle: t.underlineStyle,
+            strikethrough: t.strikethrough,
+            color: t.color,
+            align: t.align,
+            lineSpacing: t.lineSpacing,
+            paragraphSpacingBefore: t.paragraphSpacingBefore,
+            paragraphSpacingAfter: t.paragraphSpacingAfter,
+            textCaps: t.textCaps,
+        };
+    }
+    return result;
+}
+function definedEntries(obj) {
+    const out = {};
+    for (const key in obj) {
+        if (obj[key] !== undefined) {
+            out[key] = obj[key];
+        }
+    }
+    return out;
+}
+/** Merge a copied format onto a target element (only defined fields win). */
+function applyFormatToElement(element, format) {
+    let updated = { ...element };
+    if (format.shapeStyle && hasShapeProperties(updated)) {
+        updated = {
+            ...updated,
+            shapeStyle: {
+                ...updated.shapeStyle,
+                ...definedEntries(format.shapeStyle),
+            },
+        };
+    }
+    if (format.textStyle && hasTextProperties(updated)) {
+        updated = {
+            ...updated,
+            textStyle: {
+                ...updated.textStyle,
+                ...definedEntries(format.textStyle),
+            },
+        };
+    }
+    return updated;
+}
+/** True when an element exposes formatting fields the painter can copy. */
+function hasCopyableFormat(element) {
+    if (!element) {
+        return false;
+    }
+    return hasShapeProperties(element) || hasTextProperties(element);
+}
+
 /**
  * Hyperlink resolution + URL safety for the viewer.
  *
@@ -18643,6 +18735,9 @@ class MobileBottomBarComponent {
     /** Whether the slides thumbnail sheet is currently open. */
     slidesOpen = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "slidesOpen" }] : /* istanbul ignore next */ []));
+    /** Whether the speaker-notes sheet is currently open (highlights the button). */
+    notesOpen = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "notesOpen" }] : /* istanbul ignore next */ []));
     // ── Outputs ───────────────────────────────────────────────────────────────
     /** User tapped the previous-slide button. */
     prev = output();
@@ -18654,6 +18749,8 @@ class MobileBottomBarComponent {
     openSorter = output();
     /** User tapped the Find button. */
     openFind = output();
+    /** User tapped the Notes button. */
+    notes = output();
     /** User tapped the Slides thumbnail strip button. */
     openSlides = output();
     /** User tapped the menu (⋯) button. */
@@ -18696,6 +18793,15 @@ class MobileBottomBarComponent {
                 disabled: !this.canPresent() || count === 0,
                 emit: () => this.present.emit(),
             },
+            {
+                key: 'notes',
+                label: 'Notes',
+                // Note / document-text icon
+                svgPath: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M8 13h8 M8 17h5',
+                disabled: count === 0,
+                active: this.notesOpen(),
+                emit: () => this.notes.emit(),
+            },
             {
                 key: 'menu',
                 label: 'More',
@@ -18717,7 +18823,7 @@ class MobileBottomBarComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MobileBottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MobileBottomBarComponent, isStandalone: true, selector: "pptx-mobile-bottom-bar", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, slideCount: { classPropertyName: "slideCount", publicName: "slideCount", isSignal: true, isRequired: false, transformFunction: null }, canPresent: { classPropertyName: "canPresent", publicName: "canPresent", isSignal: true, isRequired: false, transformFunction: null }, menuOpen: { classPropertyName: "menuOpen", publicName: "menuOpen", isSignal: true, isRequired: false, transformFunction: null }, slidesOpen: { classPropertyName: "slidesOpen", publicName: "slidesOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prev: "prev", next: "next", present: "present", openSorter: "openSorter", openFind: "openFind", openSlides: "openSlides", toggleMenu: "toggleMenu" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MobileBottomBarComponent, isStandalone: true, selector: "pptx-mobile-bottom-bar", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, slideCount: { classPropertyName: "slideCount", publicName: "slideCount", isSignal: true, isRequired: false, transformFunction: null }, canPresent: { classPropertyName: "canPresent", publicName: "canPresent", isSignal: true, isRequired: false, transformFunction: null }, menuOpen: { classPropertyName: "menuOpen", publicName: "menuOpen", isSignal: true, isRequired: false, transformFunction: null }, slidesOpen: { classPropertyName: "slidesOpen", publicName: "slidesOpen", isSignal: true, isRequired: false, transformFunction: null }, notesOpen: { classPropertyName: "notesOpen", publicName: "notesOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prev: "prev", next: "next", present: "present", openSorter: "openSorter", openFind: "openFind", notes: "notes", openSlides: "openSlides", toggleMenu: "toggleMenu" }, ngImport: i0, template: `
 		<nav class="pptx-ng-mbar" aria-label="Mobile navigation">
 			@for (action of actions(); track action.key) {
 				<button
@@ -18796,7 +18902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 			}
 		</nav>
 	`, styles: [":host{display:block}.pptx-ng-mbar{display:flex;align-items:stretch;justify-content:space-around;background:#1a1a1aeb;border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-bottom:max(env(safe-area-inset-bottom,0px),0px)}.pptx-ng-mbar-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;flex:1;min-height:56px;padding:.375rem .25rem;border:none;background:transparent;color:#ffffff8c;font-size:.625rem;font-weight:500;cursor:pointer;touch-action:manipulation;transition:color .12s,transform .08s;-webkit-tap-highlight-color:transparent}.pptx-ng-mbar-btn:active:not([disabled]){transform:scale(.92)}.pptx-ng-mbar-btn.is-active{color:#3b82f6}.pptx-ng-mbar-btn:hover:not([disabled]):not(.is-active){color:#e5e5e5}.pptx-ng-mbar-btn[disabled]{opacity:.35;cursor:not-allowed}.pptx-ng-mbar-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.pptx-ng-mbar-label{line-height:1;white-space:nowrap}.pptx-ng-mbar-badge{position:absolute;top:.25rem;right:calc(50% - 1.25rem);display:flex;align-items:center;justify-content:center;min-width:1rem;height:1rem;padding:0 .25rem;border-radius:9999px;background:#ef4444;color:#fff;font-size:.5625rem;font-weight:600;line-height:1}.pptx-ng-mbar-indicator{position:absolute;top:0;left:50%;transform:translate(-50%);width:2rem;height:.1875rem;border-radius:9999px;background:#3b82f6}\n"] }]
-        }], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], slideCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideCount", required: false }] }], canPresent: [{ type: i0.Input, args: [{ isSignal: true, alias: "canPresent", required: false }] }], menuOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOpen", required: false }] }], slidesOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesOpen", required: false }] }], prev: [{ type: i0.Output, args: ["prev"] }], next: [{ type: i0.Output, args: ["next"] }], present: [{ type: i0.Output, args: ["present"] }], openSorter: [{ type: i0.Output, args: ["openSorter"] }], openFind: [{ type: i0.Output, args: ["openFind"] }], openSlides: [{ type: i0.Output, args: ["openSlides"] }], toggleMenu: [{ type: i0.Output, args: ["toggleMenu"] }] } });
+        }], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], slideCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideCount", required: false }] }], canPresent: [{ type: i0.Input, args: [{ isSignal: true, alias: "canPresent", required: false }] }], menuOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOpen", required: false }] }], slidesOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesOpen", required: false }] }], notesOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "notesOpen", required: false }] }], prev: [{ type: i0.Output, args: ["prev"] }], next: [{ type: i0.Output, args: ["next"] }], present: [{ type: i0.Output, args: ["present"] }], openSorter: [{ type: i0.Output, args: ["openSorter"] }], openFind: [{ type: i0.Output, args: ["openFind"] }], notes: [{ type: i0.Output, args: ["notes"] }], openSlides: [{ type: i0.Output, args: ["openSlides"] }], toggleMenu: [{ type: i0.Output, args: ["toggleMenu"] }] } });
 
 /**
  * mobile-sheet.component.ts — Reusable slide-up bottom sheet for mobile.
@@ -23631,6 +23737,7 @@ class ConnectorRendererComponent {
 			class="pptx-ng-element pptx-ng-connector"
 			[style]="geo().wrapperStyle"
 			[attr.data-element-id]="element().id"
+			data-pptx-element="true"
 		>
 			<svg
 				[attr.width]="geo().svgW"
@@ -23725,6 +23832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 			class="pptx-ng-element pptx-ng-connector"
 			[style]="geo().wrapperStyle"
 			[attr.data-element-id]="element().id"
+			data-pptx-element="true"
 		>
 			<svg
 				[attr.width]="geo().svgW"
@@ -29626,6 +29734,7 @@ class ElementRendererComponent {
 					class="pptx-ng-element pptx-ng-smartart"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					<pptx-smart-art-renderer [element]="element()" [zIndex]="zIndex()" />
 				</div>
@@ -29635,6 +29744,7 @@ class ElementRendererComponent {
 					class="pptx-ng-element pptx-ng-ole"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					<pptx-ole-renderer [element]="element()" [zIndex]="zIndex()" />
 				</div>
@@ -29644,6 +29754,7 @@ class ElementRendererComponent {
 					class="pptx-ng-element pptx-ng-chart"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					<pptx-chart-renderer [element]="element()" />
 				</div>
@@ -29653,6 +29764,7 @@ class ElementRendererComponent {
 					class="pptx-ng-element pptx-ng-table"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					<pptx-table-renderer [element]="element()" />
 				</div>
@@ -29662,6 +29774,7 @@ class ElementRendererComponent {
 					class="pptx-ng-element pptx-ng-group"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					@for (child of children(); track child.id) {
 						<pptx-element-renderer
@@ -29677,6 +29790,7 @@ class ElementRendererComponent {
 					class="pptx-ng-element pptx-ng-image"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					@if (imageSrc()) {
 						<img [src]="imageSrc()" alt="" class="pptx-ng-img" />
@@ -29688,6 +29802,7 @@ class ElementRendererComponent {
 					class="pptx-ng-element pptx-ng-media"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					@if (imageSrc()) {
 						<img [src]="imageSrc()" alt="" class="pptx-ng-img" />
@@ -29701,6 +29816,7 @@ class ElementRendererComponent {
 					class="pptx-ng-element pptx-ng-shape"
 					[ngStyle]="shapeContainerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					@if (pathWarp(); as warp) {
 						<svg
@@ -29785,6 +29901,7 @@ class ElementRendererComponent {
 					class="pptx-ng-element pptx-ng-unsupported"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					<div class="pptx-ng-placeholder">{{ placeholderLabel() }}</div>
 				</div>
@@ -29880,6 +29997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					class="pptx-ng-element pptx-ng-smartart"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					<pptx-smart-art-renderer [element]="element()" [zIndex]="zIndex()" />
 				</div>
@@ -29889,6 +30007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					class="pptx-ng-element pptx-ng-ole"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					<pptx-ole-renderer [element]="element()" [zIndex]="zIndex()" />
 				</div>
@@ -29898,6 +30017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					class="pptx-ng-element pptx-ng-chart"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					<pptx-chart-renderer [element]="element()" />
 				</div>
@@ -29907,6 +30027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					class="pptx-ng-element pptx-ng-table"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					<pptx-table-renderer [element]="element()" />
 				</div>
@@ -29916,6 +30037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					class="pptx-ng-element pptx-ng-group"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					@for (child of children(); track child.id) {
 						<pptx-element-renderer
@@ -29931,6 +30053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					class="pptx-ng-element pptx-ng-image"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					@if (imageSrc()) {
 						<img [src]="imageSrc()" alt="" class="pptx-ng-img" />
@@ -29942,6 +30065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					class="pptx-ng-element pptx-ng-media"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					@if (imageSrc()) {
 						<img [src]="imageSrc()" alt="" class="pptx-ng-img" />
@@ -29955,6 +30079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					class="pptx-ng-element pptx-ng-shape"
 					[ngStyle]="shapeContainerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					@if (pathWarp(); as warp) {
 						<svg
@@ -30039,6 +30164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					class="pptx-ng-element pptx-ng-unsupported"
 					[ngStyle]="containerStyle()"
 					[attr.data-element-id]="element().id"
+					data-pptx-element="true"
 				>
 					<div class="pptx-ng-placeholder">{{ placeholderLabel() }}</div>
 				</div>
@@ -30292,6 +30418,15 @@ class SlideCanvasComponent {
     /** When true, elements are selectable and drag/resize handles are shown. */
     editable = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    /**
+     * When true (default), the stage auto-fits the slide to the scroll viewport so
+     * the user's `zoom` is relative to "fit". Thumbnail consumers (slides panel,
+     * slide sorter) pass an explicit fit-to-width `zoom` and set this `false`, so
+     * their `zoom` is the sole scale — otherwise the two scales compound and the
+     * thumbnail shrinks to near-invisible.
+     */
+    autoFit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoFit" }] : /* istanbul ignore next */ []));
     /** Ids of currently-selected elements (drawn with a selection outline). */
     selectedIds = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
@@ -30399,6 +30534,12 @@ class SlideCanvasComponent {
      * reserving the 1rem gutter + drop shadow. Sets fitScale to 1 when unmeasured.
      */
     recomputeFit() {
+        // Thumbnail consumers manage their own scale via `zoom` — keep fit at 1 so
+        // the two scales don't compound.
+        if (!this.autoFit()) {
+            this.fitScale.set(1);
+            return;
+        }
         const el = this.viewportRef()?.nativeElement;
         const size = this.canvasSize();
         if (!el || !size.width || !size.height) {
@@ -30778,8 +30919,8 @@ class SlideCanvasComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stageStyle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SlideCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SlideCanvasComponent, isStandalone: true, selector: "pptx-slide-canvas", inputs: { slide: { classPropertyName: "slide", publicName: "slide", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, editingId: { classPropertyName: "editingId", publicName: "editingId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementSelect: "elementSelect", backgroundClick: "backgroundClick", transformStart: "transformStart", transformUpdate: "transformUpdate", contextMenu: "contextMenu", textEditStart: "textEditStart", textCommit: "textCommit", textCancel: "textCancel", rotateUpdate: "rotateUpdate", marqueeSelect: "marqueeSelect" }, host: { listeners: { "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp()" } }, viewQueries: [{ propertyName: "textEditor", first: true, predicate: ["textEditor"], descendants: true, isSignal: true }, { propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true, isSignal: true }, { propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
-		<div #viewport class="pptx-ng-canvas-viewport">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SlideCanvasComponent, isStandalone: true, selector: "pptx-slide-canvas", inputs: { slide: { classPropertyName: "slide", publicName: "slide", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, autoFit: { classPropertyName: "autoFit", publicName: "autoFit", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, editingId: { classPropertyName: "editingId", publicName: "editingId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementSelect: "elementSelect", backgroundClick: "backgroundClick", transformStart: "transformStart", transformUpdate: "transformUpdate", contextMenu: "contextMenu", textEditStart: "textEditStart", textCommit: "textCommit", textCancel: "textCancel", rotateUpdate: "rotateUpdate", marqueeSelect: "marqueeSelect" }, host: { listeners: { "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp()" } }, viewQueries: [{ propertyName: "textEditor", first: true, predicate: ["textEditor"], descendants: true, isSignal: true }, { propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true, isSignal: true }, { propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<div #viewport class="pptx-ng-canvas-viewport" data-pptx-viewport>
 			<div class="pptx-ng-canvas-wrapper" [ngStyle]="wrapperStyle()">
 				<div
 					#stage
@@ -30843,6 +30984,8 @@ class SlideCanvasComponent {
 					@if (rotateHandle(); as rh) {
 						<div
 							class="pptx-ng-rotate-handle"
+							role="button"
+							aria-label="Adjust shape"
 							[style.left.px]="rh.left"
 							[style.top.px]="rh.top"
 							[style.width.px]="rh.size"
@@ -30853,6 +30996,7 @@ class SlideCanvasComponent {
 					@if (editingBox(); as eb) {
 						<textarea
 							#textEditor
+							data-inline-editor
 							class="pptx-ng-text-editor"
 							[style.left.px]="eb.x"
 							[style.top.px]="eb.y"
@@ -30871,7 +31015,7 @@ class SlideCanvasComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SlideCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pptx-slide-canvas', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, ElementRendererComponent], template: `
-		<div #viewport class="pptx-ng-canvas-viewport">
+		<div #viewport class="pptx-ng-canvas-viewport" data-pptx-viewport>
 			<div class="pptx-ng-canvas-wrapper" [ngStyle]="wrapperStyle()">
 				<div
 					#stage
@@ -30935,6 +31079,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					@if (rotateHandle(); as rh) {
 						<div
 							class="pptx-ng-rotate-handle"
+							role="button"
+							aria-label="Adjust shape"
 							[style.left.px]="rh.left"
 							[style.top.px]="rh.top"
 							[style.width.px]="rh.size"
@@ -30945,6 +31091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					@if (editingBox(); as eb) {
 						<textarea
 							#textEditor
+							data-inline-editor
 							class="pptx-ng-text-editor"
 							[style.left.px]="eb.x"
 							[style.top.px]="eb.y"
@@ -30959,7 +31106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 			</div>
 		</div>
 	`, styles: [".pptx-ng-canvas-stage.is-editable{touch-action:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { slide: [{ type: i0.Input, args: [{ isSignal: true, alias: "slide", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], editingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingId", required: false }] }], elementSelect: [{ type: i0.Output, args: ["elementSelect"] }], backgroundClick: [{ type: i0.Output, args: ["backgroundClick"] }], transformStart: [{ type: i0.Output, args: ["transformStart"] }], transformUpdate: [{ type: i0.Output, args: ["transformUpdate"] }], contextMenu: [{ type: i0.Output, args: ["contextMenu"] }], textEditStart: [{ type: i0.Output, args: ["textEditStart"] }], textCommit: [{ type: i0.Output, args: ["textCommit"] }], textCancel: [{ type: i0.Output, args: ["textCancel"] }], rotateUpdate: [{ type: i0.Output, args: ["rotateUpdate"] }], marqueeSelect: [{ type: i0.Output, args: ["marqueeSelect"] }], textEditor: [{ type: i0.ViewChild, args: ['textEditor', { isSignal: true }] }], stageRef: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], onPointerMove: [{
+        }], ctorParameters: () => [], propDecorators: { slide: [{ type: i0.Input, args: [{ isSignal: true, alias: "slide", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], autoFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFit", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], editingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingId", required: false }] }], elementSelect: [{ type: i0.Output, args: ["elementSelect"] }], backgroundClick: [{ type: i0.Output, args: ["backgroundClick"] }], transformStart: [{ type: i0.Output, args: ["transformStart"] }], transformUpdate: [{ type: i0.Output, args: ["transformUpdate"] }], contextMenu: [{ type: i0.Output, args: ["contextMenu"] }], textEditStart: [{ type: i0.Output, args: ["textEditStart"] }], textCommit: [{ type: i0.Output, args: ["textCommit"] }], textCancel: [{ type: i0.Output, args: ["textCancel"] }], rotateUpdate: [{ type: i0.Output, args: ["rotateUpdate"] }], marqueeSelect: [{ type: i0.Output, args: ["marqueeSelect"] }], textEditor: [{ type: i0.ViewChild, args: ['textEditor', { isSignal: true }] }], stageRef: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], onPointerMove: [{
                 type: HostListener,
                 args: ['document:pointermove', ['$event']]
             }], onPointerUp: [{
@@ -31116,6 +31263,7 @@ class MobileSlidesSheetComponent {
 								[mediaDataUrls]="mediaDataUrls()"
 								[zoom]="thumbZoom()"
 								[editable]="false"
+								[autoFit]="false"
 							/>
 						</div>
 
@@ -31125,7 +31273,7 @@ class MobileSlidesSheetComponent {
 				}
 			</div>
 		</pptx-mobile-sheet>
-	`, isInline: true, styles: [":host{display:contents}.pptx-ng-mslides-count{margin:0;padding:.5rem 1rem .25rem;font-size:.75rem;color:#ffffff73}.pptx-ng-mslides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;padding:.75rem .875rem 1.5rem}.pptx-ng-mslides-cell{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.375rem;border:2px solid transparent;border-radius:.5rem;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .12s,background .12s}.pptx-ng-mslides-cell:hover{background:#ffffff0d;border-color:#ffffff26}.pptx-ng-mslides-cell:active{background:#ffffff1a}.pptx-ng-mslides-cell.is-active{border-color:#3b82f6;background:#3b82f61a}.pptx-ng-mslides-clip{overflow:hidden;border-radius:.25rem;width:100%}.pptx-ng-mslides-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-mslides-num{display:block;font-size:.625rem;color:#fff6;line-height:1.4;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MobileSheetComponent, selector: "pptx-mobile-sheet", inputs: ["open", "title", "heightFraction", "fullScreen"], outputs: ["closed"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [":host{display:contents}.pptx-ng-mslides-count{margin:0;padding:.5rem 1rem .25rem;font-size:.75rem;color:#ffffff73}.pptx-ng-mslides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;padding:.75rem .875rem 1.5rem}.pptx-ng-mslides-cell{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.375rem;border:2px solid transparent;border-radius:.5rem;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .12s,background .12s}.pptx-ng-mslides-cell:hover{background:#ffffff0d;border-color:#ffffff26}.pptx-ng-mslides-cell:active{background:#ffffff1a}.pptx-ng-mslides-cell.is-active{border-color:#3b82f6;background:#3b82f61a}.pptx-ng-mslides-clip{overflow:hidden;border-radius:.25rem;width:100%}.pptx-ng-mslides-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-mslides-num{display:block;font-size:.625rem;color:#fff6;line-height:1.4;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MobileSheetComponent, selector: "pptx-mobile-sheet", inputs: ["open", "title", "heightFraction", "fullScreen"], outputs: ["closed"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "autoFit", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MobileSlidesSheetComponent, decorators: [{
             type: Component,
@@ -31162,6 +31310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 								[mediaDataUrls]="mediaDataUrls()"
 								[zoom]="thumbZoom()"
 								[editable]="false"
+								[autoFit]="false"
 							/>
 						</div>
 
@@ -31174,6 +31323,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 	`, styles: [":host{display:contents}.pptx-ng-mslides-count{margin:0;padding:.5rem 1rem .25rem;font-size:.75rem;color:#ffffff73}.pptx-ng-mslides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;padding:.75rem .875rem 1.5rem}.pptx-ng-mslides-cell{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.375rem;border:2px solid transparent;border-radius:.5rem;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .12s,background .12s}.pptx-ng-mslides-cell:hover{background:#ffffff0d;border-color:#ffffff26}.pptx-ng-mslides-cell:active{background:#ffffff1a}.pptx-ng-mslides-cell.is-active{border-color:#3b82f6;background:#3b82f61a}.pptx-ng-mslides-clip{overflow:hidden;border-radius:.25rem;width:100%}.pptx-ng-mslides-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-mslides-num{display:block;font-size:.625rem;color:#fff6;line-height:1.4;-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], jumpToSlide: [{ type: i0.Output, args: ["jumpToSlide"] }] } });
 
+/**
+ * notes-panel.component.ts — collapsible, editable speaker-notes panel.
+ *
+ * Ported from: packages/vue/src/viewer/components/NotesPanel.vue
+ * (itself the Vue mirror of the React `SlideNotesPanel`).
+ *
+ * Renders the active slide's speaker notes in an editable `<textarea>`. Reads the
+ * real core field `PptxSlide.notes` (populated during parse and preserved through
+ * `LoadContentService` / `EditorStateService`). The host writes the edited text
+ * back via a history-aware update when {@link update} is emitted.
+ *
+ * Framework-neutral e2e contract
+ * ------------------------------
+ * The body wrapper carries `id="slide-notes-content"` and the editor is a
+ * `textarea[name="slide-notes"]`, matching the React/Vue viewers so the shared
+ * Playwright specs (`e2e/mobile-notes.spec.ts`) run unchanged against Angular.
+ *
+ * Touch / focus correctness
+ * -------------------------
+ * The textarea is UNCONTROLLED: its value is seeded imperatively via a view-child
+ * ref exactly once per slide and never re-bound while the user types. Re-binding
+ * `value` to a signal the host mutated on every keystroke would dismiss the
+ * on-screen keyboard and jump the caret — so the DOM owns the text during an edit
+ * and we only commit on `change` / `blur` (one history entry per edit).
+ */
+class NotesPanelComponent {
+    /** The active slide whose notes are shown / edited. */
+    slide = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slide" }] : /* istanbul ignore next */ []));
+    /** Emits the new notes text on commit (change / blur). */
+    update = output();
+    /** Whether the panel body is collapsed (notes hidden). */
+    collapsed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    textarea = viewChild('textarea', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textarea" }] : /* istanbul ignore next */ []));
+    /** The slide id we've already seeded the textarea for. */
+    seededId = null;
+    constructor() {
+        // Seed (and re-seed) the uncontrolled textarea exactly once per slide.
+        // Keying on the slide id means we never overwrite in-progress typed text on
+        // an unrelated change-detection pass (which would steal focus on touch).
+        effect(() => {
+            const el = this.textarea()?.nativeElement;
+            const slide = this.slide();
+            if (!el) {
+                return;
+            }
+            const id = slide?.id ?? null;
+            if (this.seededId === id) {
+                return;
+            }
+            this.seededId = id;
+            el.value = slide?.notes ?? '';
+        });
+        afterNextRender(() => {
+            const el = this.textarea()?.nativeElement;
+            if (el && this.seededId === null) {
+                this.seededId = this.slide()?.id ?? null;
+                el.value = this.slide()?.notes ?? '';
+            }
+        });
+    }
+    /** Toggle the collapsed state. */
+    toggle() {
+        this.collapsed.update((v) => !v);
+    }
+    /** Commit the edited notes text to the host. */
+    onCommit(event) {
+        this.update.emit(event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NotesPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: NotesPanelComponent, isStandalone: true, selector: "pptx-notes-panel", inputs: { slide: { classPropertyName: "slide", publicName: "slide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { update: "update" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<section class="pptx-ng-notes-panel" [attr.data-collapsed]="collapsed()">
+			<button
+				type="button"
+				class="pptx-ng-notes-header"
+				[attr.aria-expanded]="!collapsed()"
+				(click)="toggle()"
+			>
+				<span class="pptx-ng-notes-label">Speaker notes</span>
+				<span class="pptx-ng-notes-chevron" aria-hidden="true">{{ collapsed() ? '▸' : '▾' }}</span>
+			</button>
+
+			@if (!collapsed()) {
+				<div id="slide-notes-content" class="pptx-ng-notes-body">
+					<textarea
+						#textarea
+						name="slide-notes"
+						class="pptx-ng-notes-textarea"
+						[disabled]="!slide()"
+						[attr.placeholder]="slide() ? 'Add speaker notes…' : 'No slide selected'"
+						aria-label="Speaker notes"
+						spellcheck="true"
+						(change)="onCommit($event)"
+						(blur)="onCommit($event)"
+					></textarea>
+				</div>
+			}
+		</section>
+	`, isInline: true, styles: [":host{display:block}.pptx-ng-notes-panel{display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.1);background:#fff;color:#111827}.pptx-ng-notes-header{display:flex;width:100%;align-items:center;justify-content:space-between;padding:.5rem .75rem;border:none;background:transparent;font-size:.8125rem;font-weight:600;color:#6b7280;cursor:pointer}.pptx-ng-notes-header:hover{color:#111827}.pptx-ng-notes-body{padding:0 .75rem .75rem}.pptx-ng-notes-textarea{box-sizing:border-box;width:100%;min-height:5rem;resize:vertical;padding:.5rem;border:1px solid rgba(0,0,0,.15);border-radius:.375rem;background:#00000008;font:inherit;font-size:.8125rem;line-height:1.5;color:#111827}.pptx-ng-notes-textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 1px #6366f14d}.pptx-ng-notes-textarea:disabled{cursor:not-allowed;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NotesPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-notes-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		<section class="pptx-ng-notes-panel" [attr.data-collapsed]="collapsed()">
+			<button
+				type="button"
+				class="pptx-ng-notes-header"
+				[attr.aria-expanded]="!collapsed()"
+				(click)="toggle()"
+			>
+				<span class="pptx-ng-notes-label">Speaker notes</span>
+				<span class="pptx-ng-notes-chevron" aria-hidden="true">{{ collapsed() ? '▸' : '▾' }}</span>
+			</button>
+
+			@if (!collapsed()) {
+				<div id="slide-notes-content" class="pptx-ng-notes-body">
+					<textarea
+						#textarea
+						name="slide-notes"
+						class="pptx-ng-notes-textarea"
+						[disabled]="!slide()"
+						[attr.placeholder]="slide() ? 'Add speaker notes…' : 'No slide selected'"
+						aria-label="Speaker notes"
+						spellcheck="true"
+						(change)="onCommit($event)"
+						(blur)="onCommit($event)"
+					></textarea>
+				</div>
+			}
+		</section>
+	`, styles: [":host{display:block}.pptx-ng-notes-panel{display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.1);background:#fff;color:#111827}.pptx-ng-notes-header{display:flex;width:100%;align-items:center;justify-content:space-between;padding:.5rem .75rem;border:none;background:transparent;font-size:.8125rem;font-weight:600;color:#6b7280;cursor:pointer}.pptx-ng-notes-header:hover{color:#111827}.pptx-ng-notes-body{padding:0 .75rem .75rem}.pptx-ng-notes-textarea{box-sizing:border-box;width:100%;min-height:5rem;resize:vertical;padding:.5rem;border:1px solid rgba(0,0,0,.15);border-radius:.375rem;background:#00000008;font:inherit;font-size:.8125rem;line-height:1.5;color:#111827}.pptx-ng-notes-textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 1px #6366f14d}.pptx-ng-notes-textarea:disabled{cursor:not-allowed;opacity:.6}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { slide: [{ type: i0.Input, args: [{ isSignal: true, alias: "slide", required: false }] }], update: [{ type: i0.Output, args: ["update"] }], textarea: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }] } });
+
 /**
  * animation-playback-helpers.ts
  *
@@ -33378,7 +33662,7 @@ class PresentationTransitionOverlayComponent {
 				/>
 			</div>
 		</div>
-	`, isInline: true, styles: [":host{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none}.pptx-ng-transition-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [":host{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none}.pptx-ng-transition-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "autoFit", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PresentationTransitionOverlayComponent, decorators: [{
             type: Component,
@@ -33866,6 +34150,7 @@ class PresentationOverlayComponent {
 					[canvasSize]="canvasSize()"
 					[mediaDataUrls]="mediaDataUrls()"
 					[zoom]="zoom()"
+					[autoFit]="false"
 				/>
 
 				@if (activeTransition(); as t) {
@@ -33971,7 +34256,7 @@ class PresentationOverlayComponent {
 				{{ counterLabel() }}
 			</span>
 		</div>
-	`, isInline: true, styles: [":host{display:block;position:fixed;inset:0;z-index:10000;background:#000;cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-presentation-root{position:absolute;inset:0;touch-action:pan-y}.pptx-ng-presentation-close:hover,.pptx-ng-presentation-nav:hover{background:#000000bf}.pptx-ng-presentation-tools{position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:.25rem;padding:.25rem;border-radius:.5rem;background:#0000008c;z-index:80}.pptx-ng-presentation-tools button{width:2rem;height:2rem;border:none;border-radius:.35rem;background:transparent;color:#fff;font-size:1rem;cursor:pointer}.pptx-ng-presentation-tools button:hover{background:#ffffff26}.pptx-ng-presentation-tools button.is-active{background:#ffffff4d}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }, { kind: "component", type: PresentationTransitionOverlayComponent, selector: "pptx-presentation-transition-overlay", inputs: ["outgoingSlide", "canvasSize", "transition", "templateElements", "mediaDataUrls", "durationMs"], outputs: ["complete"] }, { kind: "component", type: PresentationAnnotationOverlayComponent, selector: "pptx-presentation-annotation-overlay", inputs: ["canvasSize", "zoom"] }, { kind: "component", type: PresentationSubtitleBarComponent, selector: "pptx-presentation-subtitle-bar", inputs: ["visible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [":host{display:block;position:fixed;inset:0;z-index:10000;background:#000;cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-presentation-root{position:absolute;inset:0;touch-action:pan-y}.pptx-ng-presentation-close:hover,.pptx-ng-presentation-nav:hover{background:#000000bf}.pptx-ng-presentation-tools{position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));left:1rem;display:flex;gap:.25rem;padding:.25rem;border-radius:.5rem;background:#0000008c;z-index:80}.pptx-ng-presentation-tools button{width:2rem;height:2rem;border:none;border-radius:.35rem;background:transparent;color:#fff;font-size:1rem;cursor:pointer}.pptx-ng-presentation-tools button:hover{background:#ffffff26}.pptx-ng-presentation-tools button.is-active{background:#ffffff4d}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "autoFit", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }, { kind: "component", type: PresentationTransitionOverlayComponent, selector: "pptx-presentation-transition-overlay", inputs: ["outgoingSlide", "canvasSize", "transition", "templateElements", "mediaDataUrls", "durationMs"], outputs: ["complete"] }, { kind: "component", type: PresentationAnnotationOverlayComponent, selector: "pptx-presentation-annotation-overlay", inputs: ["canvasSize", "zoom"] }, { kind: "component", type: PresentationSubtitleBarComponent, selector: "pptx-presentation-subtitle-bar", inputs: ["visible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PresentationOverlayComponent, decorators: [{
             type: Component,
@@ -33999,6 +34284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					[canvasSize]="canvasSize()"
 					[mediaDataUrls]="mediaDataUrls()"
 					[zoom]="zoom()"
+					[autoFit]="false"
 				/>
 
 				@if (activeTransition(); as t) {
@@ -34104,7 +34390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 				{{ counterLabel() }}
 			</span>
 		</div>
-	`, styles: [":host{display:block;position:fixed;inset:0;z-index:10000;background:#000;cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-presentation-root{position:absolute;inset:0;touch-action:pan-y}.pptx-ng-presentation-close:hover,.pptx-ng-presentation-nav:hover{background:#000000bf}.pptx-ng-presentation-tools{position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:.25rem;padding:.25rem;border-radius:.5rem;background:#0000008c;z-index:80}.pptx-ng-presentation-tools button{width:2rem;height:2rem;border:none;border-radius:.35rem;background:transparent;color:#fff;font-size:1rem;cursor:pointer}.pptx-ng-presentation-tools button:hover{background:#ffffff26}.pptx-ng-presentation-tools button.is-active{background:#ffffff4d}\n"] }]
+	`, styles: [":host{display:block;position:fixed;inset:0;z-index:10000;background:#000;cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-presentation-root{position:absolute;inset:0;touch-action:pan-y}.pptx-ng-presentation-close:hover,.pptx-ng-presentation-nav:hover{background:#000000bf}.pptx-ng-presentation-tools{position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));left:1rem;display:flex;gap:.25rem;padding:.25rem;border-radius:.5rem;background:#0000008c;z-index:80}.pptx-ng-presentation-tools button{width:2rem;height:2rem;border:none;border-radius:.35rem;background:transparent;color:#fff;font-size:1rem;cursor:pointer}.pptx-ng-presentation-tools button:hover{background:#ffffff26}.pptx-ng-presentation-tools button.is-active{background:#ffffff4d}\n"] }]
         }], ctorParameters: () => [], propDecorators: { slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: true }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], startIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIndex", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], stageRef: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -34577,7 +34863,7 @@ class PresenterViewComponent {
 		} @else {
 			<div class="pptx-ng-presenter-empty">No slides to present.</div>
 		}
-	`, isInline: true, styles: [":host{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;background:#0b0b0c;color:#f5f5f5;font-family:system-ui,sans-serif}.pptx-ng-presenter-body{display:flex;flex:1 1 auto;min-height:0}.pptx-ng-presenter-current{flex:7 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;padding:1rem;min-width:0}.pptx-ng-presenter-preview-stage{width:100%;max-width:100%;min-height:0}.pptx-ng-presenter-slide-badge{margin-top:.5rem;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.75rem;color:#ffffff80;-webkit-user-select:none;user-select:none}.pptx-ng-presenter-side{flex:3 1 0;display:flex;flex-direction:column;background:#18181b;border-left:1px solid rgba(255,255,255,.12);min-width:260px;max-width:440px}.pptx-ng-presenter-header,.pptx-ng-presenter-nav,.pptx-ng-presenter-next{padding:.5rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}.pptx-ng-presenter-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.pptx-ng-presenter-label{font-size:.625rem;text-transform:uppercase;letter-spacing:.06em;color:#ffffff8c}.pptx-ng-presenter-clock{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:1.125rem}.pptx-ng-presenter-elapsed{color:#6ea8fe}.pptx-ng-presenter-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:6px;background:transparent;color:#ffffffb3;cursor:pointer;font-size:1rem;line-height:1}.pptx-ng-presenter-iconbtn:hover{background:#ffffff1a;color:#fff}.pptx-ng-presenter-iconbtn:disabled{opacity:.3;cursor:not-allowed}.pptx-ng-presenter-nav{display:flex;align-items:center;justify-content:space-between}.pptx-ng-presenter-navbtn{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:none;border-radius:6px;background:#ffffff14;color:#f5f5f5;cursor:pointer;font-size:.75rem}.pptx-ng-presenter-navbtn:hover:not(:disabled){background:#ffffff29}.pptx-ng-presenter-navbtn:disabled{opacity:.4;cursor:not-allowed}.pptx-ng-presenter-counter{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.875rem}.pptx-ng-presenter-next-empty{display:flex;align-items:center;justify-content:center;height:4rem;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:#ffffff0a;font-size:.75rem;font-style:italic;color:#ffffff80}.pptx-ng-presenter-notes{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:.75rem 1rem}.pptx-ng-presenter-notes-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.pptx-ng-presenter-notes-size{display:flex;align-items:center;gap:.25rem}.pptx-ng-presenter-notes-size-value{min-width:28px;text-align:center;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.625rem;color:#ffffff8c;-webkit-user-select:none;user-select:none}.pptx-ng-presenter-notes-body{flex:1 1 auto;overflow-y:auto;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:#ffffff0a;padding:.5rem .75rem;white-space:pre-wrap;line-height:1.5}.pptx-ng-presenter-notes-empty{font-style:italic;color:#ffffff80}.pptx-ng-presenter-progress{height:6px;width:100%;background:#ffffff1f;flex:0 0 auto}.pptx-ng-presenter-progress-fill{height:100%;background:#6ea8fe;transition:width 1s linear}.pptx-ng-presenter-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff9}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [":host{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;background:#0b0b0c;color:#f5f5f5;font-family:system-ui,sans-serif}.pptx-ng-presenter-body{display:flex;flex:1 1 auto;min-height:0}.pptx-ng-presenter-current{flex:7 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;padding:1rem;min-width:0}.pptx-ng-presenter-preview-stage{width:100%;max-width:100%;min-height:0}.pptx-ng-presenter-slide-badge{margin-top:.5rem;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.75rem;color:#ffffff80;-webkit-user-select:none;user-select:none}.pptx-ng-presenter-side{flex:3 1 0;display:flex;flex-direction:column;background:#18181b;border-left:1px solid rgba(255,255,255,.12);min-width:260px;max-width:440px}.pptx-ng-presenter-header,.pptx-ng-presenter-nav,.pptx-ng-presenter-next{padding:.5rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}.pptx-ng-presenter-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.pptx-ng-presenter-label{font-size:.625rem;text-transform:uppercase;letter-spacing:.06em;color:#ffffff8c}.pptx-ng-presenter-clock{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:1.125rem}.pptx-ng-presenter-elapsed{color:#6ea8fe}.pptx-ng-presenter-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:6px;background:transparent;color:#ffffffb3;cursor:pointer;font-size:1rem;line-height:1}.pptx-ng-presenter-iconbtn:hover{background:#ffffff1a;color:#fff}.pptx-ng-presenter-iconbtn:disabled{opacity:.3;cursor:not-allowed}.pptx-ng-presenter-nav{display:flex;align-items:center;justify-content:space-between}.pptx-ng-presenter-navbtn{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:none;border-radius:6px;background:#ffffff14;color:#f5f5f5;cursor:pointer;font-size:.75rem}.pptx-ng-presenter-navbtn:hover:not(:disabled){background:#ffffff29}.pptx-ng-presenter-navbtn:disabled{opacity:.4;cursor:not-allowed}.pptx-ng-presenter-counter{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.875rem}.pptx-ng-presenter-next-empty{display:flex;align-items:center;justify-content:center;height:4rem;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:#ffffff0a;font-size:.75rem;font-style:italic;color:#ffffff80}.pptx-ng-presenter-notes{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:.75rem 1rem}.pptx-ng-presenter-notes-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.pptx-ng-presenter-notes-size{display:flex;align-items:center;gap:.25rem}.pptx-ng-presenter-notes-size-value{min-width:28px;text-align:center;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.625rem;color:#ffffff8c;-webkit-user-select:none;user-select:none}.pptx-ng-presenter-notes-body{flex:1 1 auto;overflow-y:auto;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:#ffffff0a;padding:.5rem .75rem;white-space:pre-wrap;line-height:1.5}.pptx-ng-presenter-notes-empty{font-style:italic;color:#ffffff80}.pptx-ng-presenter-progress{height:6px;width:100%;background:#ffffff1f;flex:0 0 auto}.pptx-ng-presenter-progress-fill{height:100%;background:#6ea8fe;transition:width 1s linear}.pptx-ng-presenter-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff9}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "autoFit", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PresenterViewComponent, decorators: [{
             type: Component,
@@ -36877,6 +37163,7 @@ class SlideSorterOverlayComponent {
 										[canvasSize]="canvasSize()"
 										[mediaDataUrls]="mediaDataUrls()"
 										[zoom]="thumbZoom()"
+										[autoFit]="false"
 									/>
 								</div>
 								<!-- Slide number badge -->
@@ -36887,7 +37174,7 @@ class SlideSorterOverlayComponent {
 				</div>
 			</div>
 		</div>
-	`, isInline: true, styles: [":host{display:contents}.pptx-ng-sorter-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.pptx-ng-sorter-panel{display:flex;flex-direction:column;width:min(96vw,1200px);max-height:90vh;border-radius:.5rem;background:#1a1a1a;color:#e5e5e5;box-shadow:0 24px 64px #0009;overflow:hidden}.pptx-ng-sorter-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.pptx-ng-sorter-title{margin:0;font-size:.875rem;font-weight:500}.pptx-ng-sorter-count{font-size:.75rem;color:#ffffff80;flex:1}.pptx-ng-sorter-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:none;border-radius:50%;background:#ffffff1a;color:#e5e5e5;cursor:pointer;transition:background .15s;flex-shrink:0;touch-action:manipulation}.pptx-ng-sorter-close:hover{background:#fff3}.pptx-ng-sorter-grid-scroll{flex:1;overflow-y:auto;padding:1.25rem}.pptx-ng-sorter-grid{display:grid;gap:1rem}.pptx-ng-sorter-cell{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem;border:2px solid transparent;border-radius:.375rem;background:transparent;cursor:pointer;transition:border-color .15s,background .15s;color:inherit}.pptx-ng-sorter-cell:hover{background:#ffffff0f;border-color:#fff3}.pptx-ng-sorter-cell.is-active{border-color:#3b82f6;background:#3b82f61a}.pptx-ng-sorter-cell.is-hidden{opacity:.4}.pptx-ng-sorter-thumb-clip{overflow:hidden;border-radius:2px}.pptx-ng-sorter-thumb-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-sorter-index{font-size:.6875rem;color:#ffffff8c;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [":host{display:contents}.pptx-ng-sorter-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.pptx-ng-sorter-panel{display:flex;flex-direction:column;width:min(96vw,1200px);max-height:90vh;border-radius:.5rem;background:#1a1a1a;color:#e5e5e5;box-shadow:0 24px 64px #0009;overflow:hidden}.pptx-ng-sorter-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.pptx-ng-sorter-title{margin:0;font-size:.875rem;font-weight:500}.pptx-ng-sorter-count{font-size:.75rem;color:#ffffff80;flex:1}.pptx-ng-sorter-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:none;border-radius:50%;background:#ffffff1a;color:#e5e5e5;cursor:pointer;transition:background .15s;flex-shrink:0;touch-action:manipulation}.pptx-ng-sorter-close:hover{background:#fff3}.pptx-ng-sorter-grid-scroll{flex:1;overflow-y:auto;padding:1.25rem}.pptx-ng-sorter-grid{display:grid;gap:1rem}.pptx-ng-sorter-cell{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem;border:2px solid transparent;border-radius:.375rem;background:transparent;cursor:pointer;transition:border-color .15s,background .15s;color:inherit}.pptx-ng-sorter-cell:hover{background:#ffffff0f;border-color:#fff3}.pptx-ng-sorter-cell.is-active{border-color:#3b82f6;background:#3b82f61a}.pptx-ng-sorter-cell.is-hidden{opacity:.4}.pptx-ng-sorter-thumb-clip{overflow:hidden;border-radius:2px}.pptx-ng-sorter-thumb-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-sorter-index{font-size:.6875rem;color:#ffffff8c;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "autoFit", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SlideSorterOverlayComponent, decorators: [{
             type: Component,
@@ -36944,6 +37231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 										[canvasSize]="canvasSize()"
 										[mediaDataUrls]="mediaDataUrls()"
 										[zoom]="thumbZoom()"
+										[autoFit]="false"
 									/>
 								</div>
 								<!-- Slide number badge -->
@@ -37052,6 +37340,7 @@ class SlidesPanelComponent {
 									[mediaDataUrls]="mediaDataUrls()"
 									[zoom]="thumbZoom()"
 									[editable]="false"
+									[autoFit]="false"
 								/>
 							</div>
 						</button>
@@ -37121,7 +37410,7 @@ class SlidesPanelComponent {
 				</button>
 			</footer>
 		</div>
-	`, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.pptx-ng-spanel{display:flex;flex-direction:column;height:100%;background:#1e1e1e;color:#e5e5e5;border-right:1px solid rgba(255,255,255,.08);overflow:hidden}.pptx-ng-spanel-scroll{flex:1;overflow-y:auto;padding:.5rem .375rem;display:flex;flex-direction:column;gap:.375rem}.pptx-ng-spanel-card{position:relative;border-radius:.375rem;border:2px solid transparent;background:transparent;transition:border-color .15s,background .15s}.pptx-ng-spanel-card:hover,.pptx-ng-spanel-card:focus-within{background:#ffffff0d;border-color:#ffffff26}.pptx-ng-spanel-card.is-active{border-color:#3b82f6;background:#3b82f61a}.pptx-ng-spanel-thumb-btn{display:block;width:100%;padding:.375rem .375rem 0;border:none;background:transparent;cursor:pointer;color:inherit;line-height:0}.pptx-ng-spanel-thumb-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.25rem}.pptx-ng-spanel-clip{overflow:hidden;border-radius:2px}.pptx-ng-spanel-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-spanel-num{display:block;text-align:center;font-size:.625rem;line-height:1.6;color:#ffffff73;-webkit-user-select:none;user-select:none;padding-bottom:.25rem}.pptx-ng-spanel-actions{position:absolute;top:.25rem;right:.25rem;display:flex;flex-direction:column;gap:.125rem;opacity:0;pointer-events:none;transition:opacity .12s}.pptx-ng-spanel-card:hover .pptx-ng-spanel-actions,.pptx-ng-spanel-card:focus-within .pptx-ng-spanel-actions{opacity:1;pointer-events:auto}.pptx-ng-spanel-action{display:flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;padding:0;border:none;border-radius:.25rem;background:#1e1e1ed9;color:#e5e5e5;font-size:.6875rem;cursor:pointer;transition:background .12s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pptx-ng-spanel-action:hover:not([disabled]){background:#3b82f6bf}.pptx-ng-spanel-action[disabled]{opacity:.3;cursor:not-allowed}.pptx-ng-spanel-footer{flex-shrink:0;padding:.5rem .375rem;border-top:1px solid rgba(255,255,255,.08)}.pptx-ng-spanel-add{display:block;width:100%;padding:.4375rem 0;border:1px dashed rgba(255,255,255,.2);border-radius:.375rem;background:transparent;color:#fff9;font-size:.75rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.pptx-ng-spanel-add:hover{background:#3b82f626;border-color:#3b82f6;color:#e5e5e5}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.pptx-ng-spanel{display:flex;flex-direction:column;height:100%;background:#1e1e1e;color:#e5e5e5;border-right:1px solid rgba(255,255,255,.08);overflow:hidden}.pptx-ng-spanel-scroll{flex:1;overflow-y:auto;padding:.5rem .375rem;display:flex;flex-direction:column;gap:.375rem}.pptx-ng-spanel-card{position:relative;border-radius:.375rem;border:2px solid transparent;background:transparent;transition:border-color .15s,background .15s}.pptx-ng-spanel-card:hover,.pptx-ng-spanel-card:focus-within{background:#ffffff0d;border-color:#ffffff26}.pptx-ng-spanel-card.is-active{border-color:#3b82f6;background:#3b82f61a}.pptx-ng-spanel-thumb-btn{display:block;width:100%;padding:.375rem .375rem 0;border:none;background:transparent;cursor:pointer;color:inherit;line-height:0}.pptx-ng-spanel-thumb-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.25rem}.pptx-ng-spanel-clip{overflow:hidden;border-radius:2px}.pptx-ng-spanel-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-spanel-num{display:block;text-align:center;font-size:.625rem;line-height:1.6;color:#ffffff73;-webkit-user-select:none;user-select:none;padding-bottom:.25rem}.pptx-ng-spanel-actions{position:absolute;top:.25rem;right:.25rem;display:flex;flex-direction:column;gap:.125rem;opacity:0;pointer-events:none;transition:opacity .12s}.pptx-ng-spanel-card:hover .pptx-ng-spanel-actions,.pptx-ng-spanel-card:focus-within .pptx-ng-spanel-actions{opacity:1;pointer-events:auto}.pptx-ng-spanel-action{display:flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;padding:0;border:none;border-radius:.25rem;background:#1e1e1ed9;color:#e5e5e5;font-size:.6875rem;cursor:pointer;transition:background .12s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pptx-ng-spanel-action:hover:not([disabled]){background:#3b82f6bf}.pptx-ng-spanel-action[disabled]{opacity:.3;cursor:not-allowed}.pptx-ng-spanel-footer{flex-shrink:0;padding:.5rem .375rem;border-top:1px solid rgba(255,255,255,.08)}.pptx-ng-spanel-add{display:block;width:100%;padding:.4375rem 0;border:1px dashed rgba(255,255,255,.2);border-radius:.375rem;background:transparent;color:#fff9;font-size:.75rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.pptx-ng-spanel-add:hover{background:#3b82f626;border-color:#3b82f6;color:#e5e5e5}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "autoFit", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SlidesPanelComponent, decorators: [{
             type: Component,
@@ -37152,6 +37441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 									[mediaDataUrls]="mediaDataUrls()"
 									[zoom]="thumbZoom()"
 									[editable]="false"
+									[autoFit]="false"
 								/>
 							</div>
 						</button>
@@ -37362,9 +37652,6 @@ class PowerPointViewerComponent {
     /** Id of the element being inline text-edited, or null. */
     editingId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "editingId" }] : /* istanbul ignore next */ []));
-    /** Notes for the active slide, if any. */
-    activeNotes = computed(() => this.activeSlide()?.notes?.trim() || '', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeNotes" }] : /* istanbul ignore next */ []));
     /**
      * Stable, always-truthy key for the slide-properties form. Changes only when
      * the active slide changes, so the `@if` recreates (and reseeds) the
@@ -37382,6 +37669,17 @@ class PowerPointViewerComponent {
         return this.activeSlide()?.elements.find((e) => e.id === ids[0]) ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedElement" }] : /* istanbul ignore next */ []));
+    // ── Format painter ─────────────────────────────────────────────────────
+    // Arm by copying the selected element's format; the next element click applies
+    // it. Escape or an empty-canvas click cancels (mirrors React/Vue).
+    /** True while the painter is armed (next element click applies the copied format). */
+    formatPainterActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatPainterActive" }] : /* istanbul ignore next */ []));
+    /** Format copied from the source element when the painter was armed. */
+    copiedFormat = null;
+    /** Whether the painter can be armed: exactly one selected element with copyable format. */
+    canActivateFormatPainter = computed(() => hasCopyableFormat(this.selectedElement()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canActivateFormatPainter" }] : /* istanbul ignore next */ []));
     constructor() {
         // Load whenever the `content` input changes.
         effect(() => {
@@ -37685,6 +37983,13 @@ class PowerPointViewerComponent {
      * already was, so a subsequent drag works).
      */
     onElementSelect(event) {
+        // The armed format painter intercepts the next element click: apply the
+        // copied format to the target, then disarm (no selection change).
+        if (this.formatPainterActive()) {
+            this.applyFormatToTarget(event.id);
+            this.cancelFormatPainter();
+            return;
+        }
         if (event.additive) {
             this.editor.toggleSelect(event.id, true);
         }
@@ -37692,6 +37997,51 @@ class PowerPointViewerComponent {
             this.editor.select([event.id]);
         }
     }
+    /** Empty-stage press: disarm the painter if armed, else clear the selection. */
+    onBackgroundClick() {
+        if (this.formatPainterActive()) {
+            this.cancelFormatPainter();
+            return;
+        }
+        this.editor.clearSelection();
+    }
+    /** Toggle the format painter: arm from the current selection, or disarm. */
+    toggleFormatPainter() {
+        if (this.formatPainterActive()) {
+            this.cancelFormatPainter();
+            return;
+        }
+        const source = this.selectedElement();
+        if (!source || !hasCopyableFormat(source)) {
+            return;
+        }
+        this.copiedFormat = copyFormatFromElement(source);
+        this.formatPainterActive.set(true);
+    }
+    /** Disarm the painter and drop the copied format. */
+    cancelFormatPainter() {
+        this.formatPainterActive.set(false);
+        this.copiedFormat = null;
+    }
+    /** Apply the copied format to a target element (shape/text style only; one history entry). */
+    applyFormatToTarget(id) {
+        const format = this.copiedFormat;
+        const target = this.activeSlide()?.elements.find((e) => e.id === id);
+        if (!format || !target) {
+            return;
+        }
+        const updated = applyFormatToElement(target, format);
+        const patch = {};
+        if (format.shapeStyle && updated['shapeStyle'] !== undefined) {
+            patch['shapeStyle'] = updated['shapeStyle'];
+        }
+        if (format.textStyle && updated['textStyle'] !== undefined) {
+            patch['textStyle'] = updated['textStyle'];
+        }
+        if (Object.keys(patch).length > 0) {
+            this.editor.updateElement(this.activeSlideIndex(), id, patch);
+        }
+    }
     /** Right-click: select the element under the cursor and open the menu. */
     onContextMenu(event) {
         if (event.id && !this.editor.isSelected(event.id)) {
@@ -37711,6 +38061,10 @@ class PowerPointViewerComponent {
             notes: event.target.value,
         });
     }
+    /** Update the active slide's speaker notes from the editable NotesPanel. */
+    onNotesUpdate(notes) {
+        this.editor.updateSlide(this.activeSlideIndex(), { notes });
+    }
     /** Commit an inline text edit: replace the element's text (one history entry). */
     onTextCommit(event) {
         this.editor.updateElement(this.activeSlideIndex(), event.id, {
@@ -37733,6 +38087,12 @@ class PowerPointViewerComponent {
         if (tag === 'INPUT' || tag === 'TEXTAREA' || target?.isContentEditable) {
             return;
         }
+        // Escape disarms the format painter first (mirrors React/Vue).
+        if (event.key === 'Escape' && this.formatPainterActive()) {
+            event.preventDefault();
+            this.cancelFormatPainter();
+            return;
+        }
         const mod = event.ctrlKey || event.metaKey;
         const idx = this.activeSlideIndex();
         if (mod && (event.key === 'z' || event.key === 'Z')) {
@@ -38030,6 +38390,18 @@ class PowerPointViewerComponent {
 							>
 								Comments
 							</button>
+							<button
+								type="button"
+								data-testid="format-painter-toggle"
+								[class.is-active]="formatPainterActive()"
+								[attr.data-active]="formatPainterActive() ? 'true' : 'false'"
+								[attr.aria-pressed]="formatPainterActive()"
+								[disabled]="!canActivateFormatPainter() && !formatPainterActive()"
+								(click)="toggleFormatPainter()"
+								aria-label="Format painter"
+							>
+								Format Painter
+							</button>
 							@if (selectedElement(); as el) {
 								<button type="button" (click)="showHyperlink.set(true)" aria-label="Edit hyperlink">
 									Link
@@ -38050,7 +38422,7 @@ class PowerPointViewerComponent {
 						<button
 							type="button"
 							[class.is-active]="showNotes()"
-							[disabled]="!activeNotes()"
+							[disabled]="slideCount() === 0"
 							(click)="toggleNotes()"
 							aria-label="Speaker notes"
 						>
@@ -38155,7 +38527,7 @@ class PowerPointViewerComponent {
 							[editable]="canEdit()"
 							[selectedIds]="editor.selectedIds()"
 							(elementSelect)="onElementSelect($event)"
-							(backgroundClick)="editor.clearSelection()"
+							(backgroundClick)="onBackgroundClick()"
 							(marqueeSelect)="editor.select($event)"
 							(transformStart)="editor.beginTransform($event.label)"
 							(transformUpdate)="editor.applyTransform(activeSlideIndex(), $event.id, $event.box)"
@@ -38171,10 +38543,12 @@ class PowerPointViewerComponent {
 						@if (collab.connected()) {
 							<pptx-collaboration-cursors [cursors]="collab.cursors()" [zoom]="zoom()" />
 						}
-						@if (showNotes() && activeNotes()) {
+						@if (showNotes() && !mobile.isMobile()) {
 							<aside class="pptx-ng-notes" aria-label="Speaker notes">
-								<h2 class="pptx-ng-notes-title">Notes</h2>
-								<p class="pptx-ng-notes-body">{{ activeNotes() }}</p>
+								<pptx-notes-panel
+									[slide]="activeSlide()"
+									(update)="onNotesUpdate($event)"
+								/>
 							</aside>
 						}
 					</main>
@@ -38380,19 +38754,31 @@ class PowerPointViewerComponent {
 					[activeIndex]="activeSlideIndex()"
 					[slideCount]="slideCount()"
 					[canPresent]="slideCount() > 0"
+					[notesOpen]="showNotes()"
 					[slidesOpen]="mobileSheet() === 'slides'"
 					[menuOpen]="mobileSheet() === 'menu'"
 					(prev)="goPrev()"
 					(next)="goNext()"
 					(present)="present()"
+					(notes)="toggleNotes()"
 					(openSorter)="showSorter.set(true)"
 					(openFind)="showFind.set(true)"
 					(openSlides)="mobileSheet.set(mobileSheet() === 'slides' ? null : 'slides')"
 					(toggleMenu)="mobileSheet.set(mobileSheet() === 'menu' ? null : 'menu')"
 				/>
+
+				<!-- Mobile speaker-notes sheet (toggled from the bottom bar). Rendered
+				     inside the isMobile() gate so it stays mounted when the on-screen
+				     keyboard shrinks the viewport (coarse pointer keeps isMobile true) —
+				     mirrors the Vue mobile notes sheet. -->
+				@if (showNotes()) {
+					<div class="pptx-ng-mobile-notes-sheet">
+						<pptx-notes-panel [slide]="activeSlide()" (update)="onNotesUpdate($event)" />
+					</div>
+				}
 			}
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }, { kind: "component", type: PresentationOverlayComponent, selector: "pptx-presentation-overlay", inputs: ["slides", "canvasSize", "mediaDataUrls", "startIndex"], outputs: ["indexChange", "closed"] }, { kind: "component", type: PresenterViewComponent, selector: "pptx-presenter-view", inputs: ["slides", "currentSlideIndex", "canvasSize", "templateElements", "mediaDataUrls", "presentationStartTime", "isAudienceWindowOpen"], outputs: ["movePresentationSlide", "exit", "openAudienceWindow", "closeAudienceWindow"] }, { kind: "component", type: SlideSorterOverlayComponent, selector: "pptx-slide-sorter-overlay", inputs: ["slides", "canvasSize", "mediaDataUrls", "activeIndex"], outputs: ["select", "closed"] }, { kind: "component", type: FindBarComponent, selector: "pptx-find-bar", inputs: ["slides"], outputs: ["navigate", "closed"] }, { kind: "component", type: FindReplaceBarComponent, selector: "pptx-find-replace-bar", inputs: ["matchCount", "matchIndex"], outputs: ["find", "navigate", "replaceOne", "replaceAll", "close"] }, { kind: "component", type: InspectorPanelComponent, selector: "pptx-inspector-panel", inputs: ["element", "slideIndex"] }, { kind: "component", type: SlidesPanelComponent, selector: "pptx-slides-panel", inputs: ["canvasSize", "mediaDataUrls", "activeIndex"], outputs: ["select"] }, { kind: "component", type: EditorToolbarComponent, selector: "pptx-editor-toolbar", inputs: ["slideIndex"] }, { kind: "component", type: EditorContextMenuComponent, selector: "pptx-editor-context-menu", inputs: ["x", "y", "slideIndex"], outputs: ["closed"] }, { kind: "component", type: CommentsPanelComponent, selector: "pptx-comments-panel", inputs: ["comments", "authorName"], outputs: ["add", "remove", "resolve"] }, { kind: "component", type: SignaturesPanelComponent, selector: "pptx-signatures-panel", inputs: ["signatures"] }, { kind: "component", type: AccessibilityPanelComponent, selector: "pptx-accessibility-panel", inputs: ["issues"], outputs: ["selectSlide"] }, { kind: "component", type: CollaborationCursorsComponent, selector: "pptx-collaboration-cursors", inputs: ["cursors", "zoom"] }, { kind: "component", type: PropertiesDialogComponent, selector: "pptx-properties-dialog", inputs: ["open", "properties"], outputs: ["save", "close"] }, { kind: "component", type: HyperlinkDialogComponent, selector: "pptx-hyperlink-dialog", inputs: ["open", "element"], outputs: ["save", "close"] }, { kind: "component", type: PrintDialogComponent, selector: "pptx-print-dialog", inputs: ["slides", "activeSlideIndex", "defaultSlidesPerPage", "defaultFrameSlides"], outputs: ["print", "cancel"] }, { kind: "component", type: ShareDialogComponent, selector: "pptx-share-dialog", inputs: ["open", "defaults", "active"], outputs: ["start", "stop", "close"] }, { kind: "component", type: BroadcastDialogComponent, selector: "pptx-broadcast-dialog", inputs: ["open", "defaults", "active", "viewerUrl"], outputs: ["start", "stop", "close"] }, { kind: "component", type: MobileBottomBarComponent, selector: "pptx-mobile-bottom-bar", inputs: ["activeIndex", "slideCount", "canPresent", "menuOpen", "slidesOpen"], outputs: ["prev", "next", "present", "openSorter", "openFind", "openSlides", "toggleMenu"] }, { kind: "component", type: MobileMenuSheetComponent, selector: "pptx-mobile-menu-sheet", inputs: ["open", "slideCount", "exporting", "showNotes", "canEdit"], outputs: ["closed", "openFind", "openSorter", "toggleNotes", "present", "exportPng", "exportPdf", "exportGif", "exportVideo", "print"] }, { kind: "component", type: MobileSlidesSheetComponent, selector: "pptx-mobile-slides-sheet", inputs: ["open", "slides", "canvasSize", "mediaDataUrls", "activeIndex"], outputs: ["closed", "jumpToSlide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "autoFit", "selectedIds", "editingId"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "rotateUpdate", "marqueeSelect"] }, { kind: "component", type: PresentationOverlayComponent, selector: "pptx-presentation-overlay", inputs: ["slides", "canvasSize", "mediaDataUrls", "startIndex"], outputs: ["indexChange", "closed"] }, { kind: "component", type: PresenterViewComponent, selector: "pptx-presenter-view", inputs: ["slides", "currentSlideIndex", "canvasSize", "templateElements", "mediaDataUrls", "presentationStartTime", "isAudienceWindowOpen"], outputs: ["movePresentationSlide", "exit", "openAudienceWindow", "closeAudienceWindow"] }, { kind: "component", type: SlideSorterOverlayComponent, selector: "pptx-slide-sorter-overlay", inputs: ["slides", "canvasSize", "mediaDataUrls", "activeIndex"], outputs: ["select", "closed"] }, { kind: "component", type: FindBarComponent, selector: "pptx-find-bar", inputs: ["slides"], outputs: ["navigate", "closed"] }, { kind: "component", type: FindReplaceBarComponent, selector: "pptx-find-replace-bar", inputs: ["matchCount", "matchIndex"], outputs: ["find", "navigate", "replaceOne", "replaceAll", "close"] }, { kind: "component", type: InspectorPanelComponent, selector: "pptx-inspector-panel", inputs: ["element", "slideIndex"] }, { kind: "component", type: SlidesPanelComponent, selector: "pptx-slides-panel", inputs: ["canvasSize", "mediaDataUrls", "activeIndex"], outputs: ["select"] }, { kind: "component", type: EditorToolbarComponent, selector: "pptx-editor-toolbar", inputs: ["slideIndex"] }, { kind: "component", type: EditorContextMenuComponent, selector: "pptx-editor-context-menu", inputs: ["x", "y", "slideIndex"], outputs: ["closed"] }, { kind: "component", type: CommentsPanelComponent, selector: "pptx-comments-panel", inputs: ["comments", "authorName"], outputs: ["add", "remove", "resolve"] }, { kind: "component", type: SignaturesPanelComponent, selector: "pptx-signatures-panel", inputs: ["signatures"] }, { kind: "component", type: AccessibilityPanelComponent, selector: "pptx-accessibility-panel", inputs: ["issues"], outputs: ["selectSlide"] }, { kind: "component", type: CollaborationCursorsComponent, selector: "pptx-collaboration-cursors", inputs: ["cursors", "zoom"] }, { kind: "component", type: PropertiesDialogComponent, selector: "pptx-properties-dialog", inputs: ["open", "properties"], outputs: ["save", "close"] }, { kind: "component", type: HyperlinkDialogComponent, selector: "pptx-hyperlink-dialog", inputs: ["open", "element"], outputs: ["save", "close"] }, { kind: "component", type: PrintDialogComponent, selector: "pptx-print-dialog", inputs: ["slides", "activeSlideIndex", "defaultSlidesPerPage", "defaultFrameSlides"], outputs: ["print", "cancel"] }, { kind: "component", type: ShareDialogComponent, selector: "pptx-share-dialog", inputs: ["open", "defaults", "active"], outputs: ["start", "stop", "close"] }, { kind: "component", type: BroadcastDialogComponent, selector: "pptx-broadcast-dialog", inputs: ["open", "defaults", "active", "viewerUrl"], outputs: ["start", "stop", "close"] }, { kind: "component", type: MobileBottomBarComponent, selector: "pptx-mobile-bottom-bar", inputs: ["activeIndex", "slideCount", "canPresent", "menuOpen", "slidesOpen", "notesOpen"], outputs: ["prev", "next", "present", "openSorter", "openFind", "notes", "openSlides", "toggleMenu"] }, { kind: "component", type: MobileMenuSheetComponent, selector: "pptx-mobile-menu-sheet", inputs: ["open", "slideCount", "exporting", "showNotes", "canEdit"], outputs: ["closed", "openFind", "openSorter", "toggleNotes", "present", "exportPng", "exportPdf", "exportGif", "exportVideo", "print"] }, { kind: "component", type: MobileSlidesSheetComponent, selector: "pptx-mobile-slides-sheet", inputs: ["open", "slides", "canvasSize", "mediaDataUrls", "activeIndex"], outputs: ["closed", "jumpToSlide"] }, { kind: "component", type: NotesPanelComponent, selector: "pptx-notes-panel", inputs: ["slide"], outputs: ["update"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PowerPointViewerComponent, decorators: [{
             type: Component,
@@ -38435,6 +38821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         MobileBottomBarComponent,
                         MobileMenuSheetComponent,
                         MobileSlidesSheetComponent,
+                        NotesPanelComponent,
                     ],
                     template: `
 		<div class="pptx-ng-viewer" [ngClass]="class()" [ngStyle]="rootStyle()">
@@ -38540,6 +38927,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 							>
 								Comments
 							</button>
+							<button
+								type="button"
+								data-testid="format-painter-toggle"
+								[class.is-active]="formatPainterActive()"
+								[attr.data-active]="formatPainterActive() ? 'true' : 'false'"
+								[attr.aria-pressed]="formatPainterActive()"
+								[disabled]="!canActivateFormatPainter() && !formatPainterActive()"
+								(click)="toggleFormatPainter()"
+								aria-label="Format painter"
+							>
+								Format Painter
+							</button>
 							@if (selectedElement(); as el) {
 								<button type="button" (click)="showHyperlink.set(true)" aria-label="Edit hyperlink">
 									Link
@@ -38560,7 +38959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 						<button
 							type="button"
 							[class.is-active]="showNotes()"
-							[disabled]="!activeNotes()"
+							[disabled]="slideCount() === 0"
 							(click)="toggleNotes()"
 							aria-label="Speaker notes"
 						>
@@ -38665,7 +39064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 							[editable]="canEdit()"
 							[selectedIds]="editor.selectedIds()"
 							(elementSelect)="onElementSelect($event)"
-							(backgroundClick)="editor.clearSelection()"
+							(backgroundClick)="onBackgroundClick()"
 							(marqueeSelect)="editor.select($event)"
 							(transformStart)="editor.beginTransform($event.label)"
 							(transformUpdate)="editor.applyTransform(activeSlideIndex(), $event.id, $event.box)"
@@ -38681,10 +39080,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 						@if (collab.connected()) {
 							<pptx-collaboration-cursors [cursors]="collab.cursors()" [zoom]="zoom()" />
 						}
-						@if (showNotes() && activeNotes()) {
+						@if (showNotes() && !mobile.isMobile()) {
 							<aside class="pptx-ng-notes" aria-label="Speaker notes">
-								<h2 class="pptx-ng-notes-title">Notes</h2>
-								<p class="pptx-ng-notes-body">{{ activeNotes() }}</p>
+								<pptx-notes-panel
+									[slide]="activeSlide()"
+									(update)="onNotesUpdate($event)"
+								/>
 							</aside>
 						}
 					</main>
@@ -38890,16 +39291,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 					[activeIndex]="activeSlideIndex()"
 					[slideCount]="slideCount()"
 					[canPresent]="slideCount() > 0"
+					[notesOpen]="showNotes()"
 					[slidesOpen]="mobileSheet() === 'slides'"
 					[menuOpen]="mobileSheet() === 'menu'"
 					(prev)="goPrev()"
 					(next)="goNext()"
 					(present)="present()"
+					(notes)="toggleNotes()"
 					(openSorter)="showSorter.set(true)"
 					(openFind)="showFind.set(true)"
 					(openSlides)="mobileSheet.set(mobileSheet() === 'slides' ? null : 'slides')"
 					(toggleMenu)="mobileSheet.set(mobileSheet() === 'menu' ? null : 'menu')"
 				/>
+
+				<!-- Mobile speaker-notes sheet (toggled from the bottom bar). Rendered
+				     inside the isMobile() gate so it stays mounted when the on-screen
+				     keyboard shrinks the viewport (coarse pointer keeps isMobile true) —
+				     mirrors the Vue mobile notes sheet. -->
+				@if (showNotes()) {
+					<div class="pptx-ng-mobile-notes-sheet">
+						<pptx-notes-panel [slide]="activeSlide()" (update)="onNotesUpdate($event)" />
+					</div>
+				}
 			}
 		</div>
 	`,
@@ -39298,5 +39711,5 @@ function cn(...values) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccessibilityPanelComponent, AccessibilityService, AnimationAuthorPanelComponent, AnimationPanelComponent, AnimationPlaybackService, BroadcastDialogComponent, CURSOR_PALETTE, ChartDataEditorComponent, ChartRendererComponent, CollaborationCursorsComponent, CollaborationService, CommentsPanelComponent, CommentsService, ConnectorRendererComponent, ConnectorTextOverlayComponent, DEFAULT_BROADCAST_SERVER_URL, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_PRINT_SETTINGS, DEFAULT_SLIDE_BACKGROUND, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR$1 as DEFAULT_TEXT_COLOR, EMBEDDED_FONTS_STYLE_ID, EditorContextMenuComponent, EditorHistory, EditorStateService, EditorToolbarComponent, EffectsPanelComponent, ElementRendererComponent, EmbeddedFontsService, EquationRendererComponent, ExportService, FindBarComponent, FindReplaceBarComponent, GradientPickerComponent, HANDOUT_OPTIONS, HyperlinkDialogComponent, InkRendererComponent, InspectorPanelComponent, IsMobileService, LoadContentService, MobileBottomBarComponent, MobileMenuSheetComponent, MobileSheetComponent, MobileSlidesSheetComponent, ModalDialogComponent, Model3DRendererComponent, OleRendererComponent, PowerPointViewerComponent, PresentationAnnotationOverlayComponent, PresentationAnnotationsService, PresentationOverlayComponent, PresentationSubtitleBarComponent, PresentationTransitionOverlayComponent, PresenterViewComponent, PrintDialogComponent, PrintService, PrintSettingsPanelComponent, PropertiesDialogComponent, RESIZE_HANDLES, SEVERITY_GROUPS, SEVERITY_LABELS, SLIDE_TRANSITION_KEYFRAMES, SVG_WARP_PRESETS, ShareDialogComponent, SignaturesPanelComponent, SignaturesService, SlideCanvasComponent, SlideSorterOverlayComponent, SlidesPanelComponent, SmartArtRendererComponent, TYPE_LABELS$1 as TYPE_LABELS, TableDataEditorComponent, TableRendererComponent, TextAdvancedPanelComponent, VIEWER_THEME, WEBM_MIME_CANDIDATES, ZoomRendererComponent, addCommentToList, advanceStep, applyFindReplacements, applyMove, applyResize, assignUserColor, bringForward, bringToFront, buildBroadcastConfig, buildBroadcastViewerUrl, buildClearHyperlinkPatch, buildClickGroups, buildCollaborationConfig, buildCssGradientFromShapeStyle, buildDuotoneFilter, buildDuotoneFilterId, buildEmbeddedFontStyles, buildFontFaceRule, buildHyperlinkPatch, buildPatternFillCss, buildPrintDocument, buildPropertiesPatch, buildShareUrl, bulletIndentPx, canStartBroadcast, canStartShare, canUseClipboard, clampCursorPosition, clampGifDimensions, clampNotesFontSize, clampStep, cn, collectAccessibilityIssues, collectElementText, collectSlideText, computeHandoutLayout, computeIsMobile, computeIsTablet, computePageCount, computeSlideIndices, computeTimerProgress, convertOmmlToMathMl, countAccessibilityIssues, defaultCssVars, defaultRadius, defaultThemeColors, deleteElementsByIds, derivePresenceList, duplicateElementById, durationOf, encodeGif, estimatePageCount, findInSlides, fontMimeForFormat, formatAutoNumber, formatCursorLabel, formatElapsed, formatPropertyDate, formatTime, fpsToFrameIntervalMs, generateBroadcastRoomId, generateCommentId, getContainerStyle, getDuotoneFilterDef, getImageSrc, getPatternSvg, getResolvedShapeClipPath, getResolvedShapeClipPathFor, getShapeFillStrokeStyle, getSlideBackgroundStyle, getSlideTransitionAnimations, getTextBlockStyle, getTextWarp, getWarpCategory, getWarpPath, groupIssuesBySeverity, hasExistingLink, headerLabel, isInjectableUrl, isPpactionUrl, isSigned, isUrlSafe, isValidRoomId, issueTrackKey, issueTypeLabel, moveElementBy, msToFrameDelayCs, normalizeFontFormat, normalizeSlidesPerPage, ommlToMathml, overallStatus, pendingElementStyles, pickSupportedMimeType, planGifFrames, planVideoSegments, presenceToCursors, provideViewerTheme, recordWebm, removeCommentFromList, renderToCanvas, replaceInSlides, replaceMatch, resizeElement, resolveFontVariant, resolveHyperlinkHref, resolveParagraphBullet, resolvePresenterNotes, resolveTransitionDuration, revealedElementStyles, routeOrthogonalConnector, sanitizeColor, sanitizeSlideIndex, sanitizeUserName, searchSlides, seedBroadcastFields, seedHyperlinkDraft, seedPropertiesDraft, seedShareFields, segmentFrameCount, sendBackward, sendToBack, setElementPosition, shouldUseSvgWarp, signatureCountLabel, signatureKey, signatureTimestamp, signerName, statusKind, statusLabel, themeStyle, themeToCssVars, toggleCommentResolvedInList, updateElementById, validatePrintSettings, validateRoomId, waypointsToPathD, worstStatus };
+export { AccessibilityPanelComponent, AccessibilityService, AnimationAuthorPanelComponent, AnimationPanelComponent, AnimationPlaybackService, BroadcastDialogComponent, CURSOR_PALETTE, ChartDataEditorComponent, ChartRendererComponent, CollaborationCursorsComponent, CollaborationService, CommentsPanelComponent, CommentsService, ConnectorRendererComponent, ConnectorTextOverlayComponent, DEFAULT_BROADCAST_SERVER_URL, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_PRINT_SETTINGS, DEFAULT_SLIDE_BACKGROUND, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR$1 as DEFAULT_TEXT_COLOR, EMBEDDED_FONTS_STYLE_ID, EditorContextMenuComponent, EditorHistory, EditorStateService, EditorToolbarComponent, EffectsPanelComponent, ElementRendererComponent, EmbeddedFontsService, EquationRendererComponent, ExportService, FindBarComponent, FindReplaceBarComponent, GradientPickerComponent, HANDOUT_OPTIONS, HyperlinkDialogComponent, InkRendererComponent, InspectorPanelComponent, IsMobileService, LoadContentService, MobileBottomBarComponent, MobileMenuSheetComponent, MobileSheetComponent, MobileSlidesSheetComponent, ModalDialogComponent, Model3DRendererComponent, NotesPanelComponent, OleRendererComponent, PowerPointViewerComponent, PresentationAnnotationOverlayComponent, PresentationAnnotationsService, PresentationOverlayComponent, PresentationSubtitleBarComponent, PresentationTransitionOverlayComponent, PresenterViewComponent, PrintDialogComponent, PrintService, PrintSettingsPanelComponent, PropertiesDialogComponent, RESIZE_HANDLES, SEVERITY_GROUPS, SEVERITY_LABELS, SLIDE_TRANSITION_KEYFRAMES, SVG_WARP_PRESETS, ShareDialogComponent, SignaturesPanelComponent, SignaturesService, SlideCanvasComponent, SlideSorterOverlayComponent, SlidesPanelComponent, SmartArtRendererComponent, TYPE_LABELS$1 as TYPE_LABELS, TableDataEditorComponent, TableRendererComponent, TextAdvancedPanelComponent, VIEWER_THEME, WEBM_MIME_CANDIDATES, ZoomRendererComponent, addCommentToList, advanceStep, applyFindReplacements, applyFormatToElement, applyMove, applyResize, assignUserColor, bringForward, bringToFront, buildBroadcastConfig, buildBroadcastViewerUrl, buildClearHyperlinkPatch, buildClickGroups, buildCollaborationConfig, buildCssGradientFromShapeStyle, buildDuotoneFilter, buildDuotoneFilterId, buildEmbeddedFontStyles, buildFontFaceRule, buildHyperlinkPatch, buildPatternFillCss, buildPrintDocument, buildPropertiesPatch, buildShareUrl, bulletIndentPx, canStartBroadcast, canStartShare, canUseClipboard, clampCursorPosition, clampGifDimensions, clampNotesFontSize, clampStep, cn, collectAccessibilityIssues, collectElementText, collectSlideText, computeHandoutLayout, computeIsMobile, computeIsTablet, computePageCount, computeSlideIndices, computeTimerProgress, convertOmmlToMathMl, copyFormatFromElement, countAccessibilityIssues, defaultCssVars, defaultRadius, defaultThemeColors, deleteElementsByIds, derivePresenceList, duplicateElementById, durationOf, encodeGif, estimatePageCount, findInSlides, fontMimeForFormat, formatAutoNumber, formatCursorLabel, formatElapsed, formatPropertyDate, formatTime, fpsToFrameIntervalMs, generateBroadcastRoomId, generateCommentId, getContainerStyle, getDuotoneFilterDef, getImageSrc, getPatternSvg, getResolvedShapeClipPath, getResolvedShapeClipPathFor, getShapeFillStrokeStyle, getSlideBackgroundStyle, getSlideTransitionAnimations, getTextBlockStyle, getTextWarp, getWarpCategory, getWarpPath, groupIssuesBySeverity, hasCopyableFormat, hasExistingLink, headerLabel, isInjectableUrl, isPpactionUrl, isSigned, isUrlSafe, isValidRoomId, issueTrackKey, issueTypeLabel, moveElementBy, msToFrameDelayCs, normalizeFontFormat, normalizeSlidesPerPage, ommlToMathml, overallStatus, pendingElementStyles, pickSupportedMimeType, planGifFrames, planVideoSegments, presenceToCursors, provideViewerTheme, recordWebm, removeCommentFromList, renderToCanvas, replaceInSlides, replaceMatch, resizeElement, resolveFontVariant, resolveHyperlinkHref, resolveParagraphBullet, resolvePresenterNotes, resolveTransitionDuration, revealedElementStyles, routeOrthogonalConnector, sanitizeColor, sanitizeSlideIndex, sanitizeUserName, searchSlides, seedBroadcastFields, seedHyperlinkDraft, seedPropertiesDraft, seedShareFields, segmentFrameCount, sendBackward, sendToBack, setElementPosition, shouldUseSvgWarp, signatureCountLabel, signatureKey, signatureTimestamp, signerName, statusKind, statusLabel, themeStyle, themeToCssVars, toggleCommentResolvedInList, updateElementById, validatePrintSettings, validateRoomId, waypointsToPathD, worstStatus };
 //# sourceMappingURL=pptx-angular-viewer.mjs.map