npm - pptx-angular-viewer - Versions diffs - 1.10.0 → 1.11.1 - Mend

pptx-angular-viewer 1.10.0 → 1.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md +8 -0
package/fesm2022/pptx-angular-viewer.mjs +1014 -400
package/fesm2022/pptx-angular-viewer.mjs.map +1 -1
package/package.json +3 -2
package/pptx-angular-viewer.css +1 -1
package/types/pptx-angular-viewer.d.ts +81 -8

package/fesm2022/pptx-angular-viewer.mjs CHANGED Viewed

@@ -2,8 +2,9 @@ import { NgStyle, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, input, output, computed, ChangeDetectionStrategy, Component, signal, Injectable, inject, Injector, DestroyRef, effect, HostListener, ElementRef, viewChild, afterNextRender } from '@angular/core';
 import { TranslatePipe, translate, TranslateService } from '@ngx-translate/core';
-import { guideEmuToPx, getShapeClipPath, getAdjustmentAwareShapeClipPath, getShapeClipPathFromPreset, getCloudPathForRendering, hasShapeProperties, applyDrawingColorTransforms as applyDrawingColorTransforms$1, hslToRgb as hslToRgb$1, PRESET_COLOR_MAP, isImageLikeElement, hasTextProperties, MIN_ELEMENT_SIZE as MIN_ELEMENT_SIZE$2, THEME_COLOR_SCHEME_KEYS, getLinkedTextBoxSegments, svgPathToPolygons, deobfuscateFont, detectFontFormat, getSubstituteFontFamily, checkMissingAltText, checkMissingSlideTitle, checkLowContrast, checkComplexTables, checkBlankSlide, checkDuplicateTitles, createChartElement, formatCommentTimestamp as formatCommentTimestamp$1, PptxHandler, EncryptedFileError, parseSignatureXml, updateSmartArtNodeText, setSmartArtNodeStyle, setChartTitle, setChartLegend, setChartDataLabels, setChartAxis, setChartSeriesTrendline, setChartSeriesErrorBars, setChartDataPointLabel, setChartAxisLogScale, setChartAxisTitleStyle, setChartAxisGridlineStyle, setChartSeriesMarker, setChartSeriesChartType, setChartDataPointFill, setChartDataPointExplosion, chartDataAddSeries, chartDataRemoveSeries, chartDataAddCategory, chartDataRemoveCategory, chartDataUpdatePoint, chartDataChangeType, addSmartArtNodeAsChild, removeSmartArtNode, promoteSmartArtNode, demoteSmartArtNode, reorderSmartArtNode, switchSmartArtLayout, SWITCHABLE_LAYOUT_TYPES, isInkElement, parseDataUrlToBytes, isZoomElement, THEME_PRESETS, applyThemeToData, getAnimationPresetInfo } from 'pptx-viewer-core';
+import { guideEmuToPx, getShapeClipPath, getAdjustmentAwareShapeClipPath, getShapeClipPathFromPreset, getCloudPathForRendering, hasShapeProperties, applyDrawingColorTransforms as applyDrawingColorTransforms$1, hslToRgb as hslToRgb$1, PRESET_COLOR_MAP, isImageLikeElement, hasTextProperties, MIN_ELEMENT_SIZE as MIN_ELEMENT_SIZE$2, THEME_COLOR_SCHEME_KEYS, getLinkedTextBoxSegments, svgPathToPolygons, deobfuscateFont, detectFontFormat, getSubstituteFontFamily, checkMissingAltText, checkMissingSlideTitle, checkLowContrast, checkComplexTables, checkBlankSlide, checkDuplicateTitles, createChartElement, formatCommentTimestamp as formatCommentTimestamp$1, cloneSlide as cloneSlide$1, cloneTemplateElementsBySlideId as cloneTemplateElementsBySlideId$1, cloneElement as cloneElement$1, PptxHandler, EncryptedFileError, parseSignatureXml, updateSmartArtNodeText, setSmartArtNodeStyle, setChartTitle, setChartLegend, setChartDataLabels, setChartAxis, setChartSeriesTrendline, setChartSeriesErrorBars, setChartDataPointLabel, setChartAxisLogScale, setChartAxisTitleStyle, setChartAxisGridlineStyle, setChartSeriesMarker, setChartSeriesChartType, setChartDataPointFill, setChartDataPointExplosion, chartDataAddSeries, chartDataRemoveSeries, chartDataAddCategory, chartDataRemoveCategory, chartDataUpdatePoint, chartDataChangeType, addSmartArtNodeAsChild, removeSmartArtNode, promoteSmartArtNode, demoteSmartArtNode, reorderSmartArtNode, switchSmartArtLayout, SWITCHABLE_LAYOUT_TYPES, isInkElement, parseDataUrlToBytes, isZoomElement, THEME_PRESETS, applyThemeToData, getAnimationPresetInfo } from 'pptx-viewer-core';
 import DOMPurify from 'dompurify';
+import { LucideX, LucideSquare, LucideCircle, LucideSlash, LucideCopy, LucideTrash2, LucideChevronsUp, LucideChevronsDown, LucideArrowUp, LucideArrowDown, LucideGroup, LucideUngroup, LucideTextAlignStart, LucideTextAlignCenter, LucideTextAlignEnd, LucideChevronUp, LucideChevronDown, LucideAlignHorizontalSpaceAround, LucideAlignVerticalSpaceAround, LucideChevronRight, LucidePenTool, LucideHighlighter, LucideEraser, LucideMousePointer2, LucideChevronLeft, LucidePlay, LucideSparkles, LucidePanelRight, LucideMoveRight, LucidePencil, LucideType, LucideMinus, LucideSpline, LucideAArrowUp, LucideAArrowDown, LucideRemoveFormatting, LucideList, LucideListOrdered, LucideListIndentDecrease, LucideListIndentIncrease, LucideTextAlignJustify, LucidePlus, LucideImage, LucideVideo, LucideDatabase, LucideLayers, LucidePanelLeft, LucideMessageSquare, LucideEllipsis, LucideShare2, LucideEye, LucideEyeOff, LucideStickyNote, LucideMonitor, LucideColumns2, LucidePresentation, LucideCheck, LucideSave, LucideUndo, LucideRedo, LucideSearch } from '@lucide/angular';
 import { jsPDF } from 'jspdf';
 import html2canvasPro from 'html2canvas-pro';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -31863,6 +31864,37 @@ function rebuildDrawingShapesIfCleared(smartArtData, layout, palette, style, ele
     };
 }
+/**
+ * Presentation-mode media autoplay.
+ *
+ * When present mode makes a slide the active, visible surface, any media on it
+ * should begin playing without a manual click (matching PowerPoint's slideshow
+ * behaviour). Browsers only honour a fresh `.play()` call, not an `autoplay`
+ * attribute added retroactively to an already-mounted node, so each binding
+ * calls this once the media element is mounted and its slide is live.
+ *
+ * `play()` can reject when the browser blocks autoplay-with-sound without a
+ * prior user gesture; the rejection is swallowed so it never surfaces as an
+ * unhandled promise (the element simply stays paused until the user interacts).
+ */
+function startMediaAutoplay(el, options) {
+    const trimStartMs = options?.trimStartMs;
+    if (trimStartMs !== undefined && trimStartMs > 0) {
+        try {
+            el.currentTime = trimStartMs / 1000;
+        }
+        catch {
+            /* seeking before metadata is loaded can throw in some browsers; ignore */
+        }
+    }
+    const result = el.play();
+    if (result && typeof result.catch === 'function') {
+        void result.catch(() => {
+            /* autoplay blocked (e.g. sound without a user gesture) */
+        });
+    }
+}
 /**
  * Artistic image-effect presets for the image inspector's "Artistic Effects"
  * gallery. Each entry is a tuple `[effectName, i18nKey, cssFilter]`:
@@ -32698,6 +32730,13 @@ async function saveAutosaveSnapshot(filePath, data) {
 const FALLBACK_DOWNLOAD_NAME = 'presentation.pptx';
 /** Revoke delay (ms) after triggering a download click. */
 const REVOKE_DELAY_MS = 200;
+/**
+ * Revoke delay (ms) after opening a payload in a new tab. Longer than the
+ * download delay: the new document may still be fetching the object URL (a PDF
+ * viewer, an image) well after the current task finishes, so we keep the URL
+ * alive for a minute before releasing it.
+ */
+const OPEN_REVOKE_DELAY_MS = 60_000;
 /**
  * Strip control characters, filesystem-reserved characters, and path-traversal
  * sequences from a user-supplied download filename. CR/LF in particular can
@@ -32775,6 +32814,69 @@ function downloadDataUrl(dataUrl, filename) {
         anchor.remove();
     }, REVOKE_DELAY_MS);
 }
+/**
+ * Convert a `data:` URL into a {@link Blob}, preserving its MIME type. Handles
+ * both base64 and percent-encoded payloads. Returns `undefined` for a non-data
+ * URL or a payload that cannot be decoded, so callers can fall back gracefully.
+ *
+ * @param dataUrl - A `data:` URL string.
+ */
+function dataUrlToBlob(dataUrl) {
+    const match = /^data:(?<mime>[^;,]*)(?<base64>;base64)?,(?<payload>[\s\S]*)$/u.exec(dataUrl);
+    if (!match?.groups) {
+        return undefined;
+    }
+    const mime = match.groups.mime || 'application/octet-stream';
+    const isBase64 = Boolean(match.groups.base64);
+    const payload = match.groups.payload ?? '';
+    try {
+        if (isBase64) {
+            const binary = atob(payload);
+            const bytes = new Uint8Array(binary.length);
+            for (let i = 0; i < binary.length; i++) {
+                bytes[i] = binary.charCodeAt(i);
+            }
+            return new Blob([bytes], { type: mime });
+        }
+        return new Blob([decodeURIComponent(payload)], { type: mime });
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * Open a payload in a new browser tab. Chromium (and other browsers) silently
+ * refuse to navigate a new top-level browsing context straight to a `data:`
+ * URL, so a data URL is first converted to a Blob object URL - which browsers
+ * do allow a new tab to open - and revoked after {@link OPEN_REVOKE_DELAY_MS}
+ * once the new document has had time to fetch it. Non-`data:` URLs (http(s),
+ * blob) are opened as-is.
+ *
+ * @param url - The payload URL (typically a recovered `data:` URL).
+ */
+function openUrlInNewTab(url) {
+    const blob = url.startsWith('data:') ? dataUrlToBlob(url) : undefined;
+    const target = blob ? URL.createObjectURL(blob) : url;
+    // NB: no `noopener` here. A `blob:` object URL is resolved from the opener's
+    // origin-partitioned blob store, and Chromium refuses to resolve it in the
+    // disconnected browsing context `noopener` creates (the new tab lands on an
+    // empty document). We instead sever the child's back-reference to us
+    // afterwards, which mitigates reverse-tabnabbing without breaking the blob.
+    const opened = window.open(target, '_blank');
+    if (opened) {
+        try {
+            opened.opener = null;
+        }
+        catch {
+            // Some browsers disallow reassigning `opener`; best-effort only.
+        }
+    }
+    if (blob) {
+        setTimeout(() => {
+            URL.revokeObjectURL(target);
+        }, OPEN_REVOKE_DELAY_MS);
+    }
+}
 /**
  * Canvas -> JPEG byte extraction shared by every binding's PDF export. This is
@@ -37356,7 +37458,7 @@ class CustomShowsComponent {
 						[attr.aria-label]="'pptx.customShows.closeDialog' | translate"
 						(click)="close.emit()"
 					>
-						✕
+						<svg lucideX class="h-4 w-4"></svg>
 					</button>
 				</header>
@@ -37519,11 +37621,11 @@ class CustomShowsComponent {
 				</footer>
 			</div>
 		}
-	`, isInline: true, styles: [":host{display:contents}.pptx-ng-cs-backdrop{position:fixed;inset:0;background:#00000080;z-index:200}.pptx-ng-cs-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:201;width:min(540px,94vw);max-height:80vh;display:flex;flex-direction:column;background:var(--pptx-card, #111827);color:var(--pptx-foreground, #f3f4f6);border:1px solid var(--pptx-border, #374151);border-radius:12px;box-shadow:0 20px 60px #0009;font-family:system-ui,sans-serif}.pptx-ng-cs-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--pptx-border, #374151);flex-shrink:0}.pptx-ng-cs-title{margin:0;font-size:15px;font-weight:600}.pptx-ng-cs-close{background:transparent;border:none;color:var(--pptx-muted-foreground, #9ca3af);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px}.pptx-ng-cs-close:hover{background:var(--pptx-accent, #1f2937);color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-cs-body{flex:1 1 auto;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:20px;min-height:0}.pptx-ng-cs-section{display:flex;flex-direction:column;gap:10px}.pptx-ng-cs-section-title{margin:0;font-size:13px;font-weight:600;color:var(--pptx-muted-foreground, #9ca3af);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px}.pptx-ng-cs-badge{background:var(--pptx-primary, #6366f1);color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700}.pptx-ng-cs-show-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.pptx-ng-cs-show-row{padding:10px 12px;border:1px solid var(--pptx-border, #374151);border-radius:8px;display:flex;flex-direction:column;gap:8px}.pptx-ng-cs-show-row--active{border-color:var(--pptx-primary, #6366f1);background:color-mix(in srgb,var(--pptx-primary, #6366f1) 10%,transparent)}.pptx-ng-cs-show-info{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.pptx-ng-cs-show-name{font-size:13px;font-weight:600}.pptx-ng-cs-show-meta{font-size:11px;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-cs-show-actions{display:flex;gap:6px;flex-wrap:wrap}.pptx-ng-cs-edit-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.pptx-ng-cs-input{flex:1 1 auto;min-width:120px;padding:6px 10px;border-radius:6px;border:1px solid var(--pptx-border, #374151);background:var(--pptx-background, #030712);color:inherit;font:inherit;font-size:13px}.pptx-ng-cs-slide-picker{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow-y:auto;padding:6px 8px;border:1px solid var(--pptx-border, #374151);border-radius:6px;background:var(--pptx-background, #030712)}.pptx-ng-cs-slide-option{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:2px 0}.pptx-ng-cs-empty{font-size:13px;color:var(--pptx-muted-foreground, #9ca3af);margin:0}.pptx-ng-cs-create-form{display:flex;flex-direction:column;gap:10px}.pptx-ng-cs-btn{font-size:12px;padding:5px 12px;border-radius:6px;border:1px solid var(--pptx-border, #374151);background:transparent;color:inherit;cursor:pointer;white-space:nowrap}.pptx-ng-cs-btn:hover{background:var(--pptx-accent, #1f2937)}.pptx-ng-cs-btn--primary{background:var(--pptx-primary, #6366f1);border-color:var(--pptx-primary, #6366f1);color:#fff;align-self:flex-start}.pptx-ng-cs-btn--primary:hover:not(:disabled){opacity:.9}.pptx-ng-cs-btn--primary:disabled{opacity:.5;cursor:not-allowed}.pptx-ng-cs-btn--danger{color:#f87171;border-color:#f87171}.pptx-ng-cs-btn--danger:hover{background:#f871711a}.pptx-ng-cs-btn--active{background:color-mix(in srgb,var(--pptx-primary, #6366f1) 20%,transparent);border-color:var(--pptx-primary, #6366f1);color:var(--pptx-primary, #6366f1)}.pptx-ng-cs-btn:disabled{opacity:.5;cursor:not-allowed}.pptx-ng-cs-footer{display:flex;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--pptx-border, #374151);flex-shrink:0}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [":host{display:contents}.pptx-ng-cs-backdrop{position:fixed;inset:0;background:#00000080;z-index:200}.pptx-ng-cs-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:201;width:min(540px,94vw);max-height:80vh;display:flex;flex-direction:column;background:var(--pptx-card, #111827);color:var(--pptx-foreground, #f3f4f6);border:1px solid var(--pptx-border, #374151);border-radius:12px;box-shadow:0 20px 60px #0009;font-family:system-ui,sans-serif}.pptx-ng-cs-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--pptx-border, #374151);flex-shrink:0}.pptx-ng-cs-title{margin:0;font-size:15px;font-weight:600}.pptx-ng-cs-close{background:transparent;border:none;color:var(--pptx-muted-foreground, #9ca3af);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px}.pptx-ng-cs-close:hover{background:var(--pptx-accent, #1f2937);color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-cs-body{flex:1 1 auto;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:20px;min-height:0}.pptx-ng-cs-section{display:flex;flex-direction:column;gap:10px}.pptx-ng-cs-section-title{margin:0;font-size:13px;font-weight:600;color:var(--pptx-muted-foreground, #9ca3af);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px}.pptx-ng-cs-badge{background:var(--pptx-primary, #6366f1);color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700}.pptx-ng-cs-show-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.pptx-ng-cs-show-row{padding:10px 12px;border:1px solid var(--pptx-border, #374151);border-radius:8px;display:flex;flex-direction:column;gap:8px}.pptx-ng-cs-show-row--active{border-color:var(--pptx-primary, #6366f1);background:color-mix(in srgb,var(--pptx-primary, #6366f1) 10%,transparent)}.pptx-ng-cs-show-info{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.pptx-ng-cs-show-name{font-size:13px;font-weight:600}.pptx-ng-cs-show-meta{font-size:11px;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-cs-show-actions{display:flex;gap:6px;flex-wrap:wrap}.pptx-ng-cs-edit-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.pptx-ng-cs-input{flex:1 1 auto;min-width:120px;padding:6px 10px;border-radius:6px;border:1px solid var(--pptx-border, #374151);background:var(--pptx-background, #030712);color:inherit;font:inherit;font-size:13px}.pptx-ng-cs-slide-picker{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow-y:auto;padding:6px 8px;border:1px solid var(--pptx-border, #374151);border-radius:6px;background:var(--pptx-background, #030712)}.pptx-ng-cs-slide-option{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:2px 0}.pptx-ng-cs-empty{font-size:13px;color:var(--pptx-muted-foreground, #9ca3af);margin:0}.pptx-ng-cs-create-form{display:flex;flex-direction:column;gap:10px}.pptx-ng-cs-btn{font-size:12px;padding:5px 12px;border-radius:6px;border:1px solid var(--pptx-border, #374151);background:transparent;color:inherit;cursor:pointer;white-space:nowrap}.pptx-ng-cs-btn:hover{background:var(--pptx-accent, #1f2937)}.pptx-ng-cs-btn--primary{background:var(--pptx-primary, #6366f1);border-color:var(--pptx-primary, #6366f1);color:#fff;align-self:flex-start}.pptx-ng-cs-btn--primary:hover:not(:disabled){opacity:.9}.pptx-ng-cs-btn--primary:disabled{opacity:.5;cursor:not-allowed}.pptx-ng-cs-btn--danger{color:#f87171;border-color:#f87171}.pptx-ng-cs-btn--danger:hover{background:#f871711a}.pptx-ng-cs-btn--active{background:color-mix(in srgb,var(--pptx-primary, #6366f1) 20%,transparent);border-color:var(--pptx-primary, #6366f1);color:var(--pptx-primary, #6366f1)}.pptx-ng-cs-btn:disabled{opacity:.5;cursor:not-allowed}.pptx-ng-cs-footer{display:flex;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--pptx-border, #374151);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CustomShowsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-custom-shows', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe], template: `
+            args: [{ selector: 'pptx-custom-shows', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe, LucideX], template: `
 		@if (open()) {
 			<!-- Backdrop -->
 			<div class="pptx-ng-cs-backdrop" aria-hidden="true" (click)="close.emit()"></div>
@@ -37545,7 +37647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[attr.aria-label]="'pptx.customShows.closeDialog' | translate"
 						(click)="close.emit()"
 					>
-						✕
+						<svg lucideX class="h-4 w-4"></svg>
 					</button>
 				</header>
@@ -37814,7 +37916,7 @@ class EditorStateService {
      * layer and re-merged on save.
      */
     setSlides(slides) {
-        const partitioned = partitionSlides(this.clone(slides));
+        const partitioned = partitionSlides(slides.map(cloneSlide$1));
         this.slides.set(partitioned.slides);
         this.templateElementsBySlideId.set(partitioned.templateElementsBySlideId);
         this.selectedIds.set([]);
@@ -37824,7 +37926,7 @@ class EditorStateService {
     }
     /** Current editable (template-free) slides as a fresh (cloned) array. */
     snapshot() {
-        return this.clone(this.slides());
+        return this.slides().map(cloneSlide$1);
     }
     /**
      * Replace the whole deck with pre-computed slides (e.g. a find/replace
@@ -37833,7 +37935,7 @@ class EditorStateService {
      */
     applyReplacement(newSlides, label = 'Replace') {
         this.history.record(this.captureSnapshot(), label);
-        this.slides.set(this.clone(newSlides));
+        this.slides.set(newSlides.map(cloneSlide$1));
         this.dirty.set(true);
         this.syncHistory();
     }
@@ -37844,15 +37946,15 @@ class EditorStateService {
      * steps.
      */
     applyRemoteSlides(slides) {
-        this.slides.set(this.clone(slides));
+        this.slides.set(slides.map(cloneSlide$1));
         this.dirty.set(true);
     }
     // ── Snapshot (deck + template store) ─────────────────────────────────────
     /** Capture the current deck + template store as one undo/redo snapshot. */
     captureSnapshot() {
         return {
-            slides: this.clone(this.slides()),
-            templateElementsBySlideId: this.clone(this.templateElementsBySlideId()),
+            slides: this.slides().map(cloneSlide$1),
+            templateElementsBySlideId: cloneTemplateElementsBySlideId$1(this.templateElementsBySlideId()),
         };
     }
     /** Restore both the deck and the template store from a snapshot. */
@@ -38102,7 +38204,7 @@ class EditorStateService {
         if (picked.length === 0) {
             return;
         }
-        this.clipboard = this.clone(picked);
+        this.clipboard = picked.map(cloneElement$1);
         this.hasClipboard.set(true);
     }
     /** Copy then delete the selected elements. */
@@ -38124,7 +38226,7 @@ class EditorStateService {
         const additions = this.clipboard.map((el) => {
             const id = this.newId();
             newIds.push(id);
-            return { ...this.clone(el), id, x: el.x + 12, y: el.y + 12 };
+            return { ...cloneElement$1(el), id, x: el.x + 12, y: el.y + 12 };
         });
         this.slides.set(slides.map((slide, i) => i === slideIndex ? { ...slide, elements: [...slide.elements, ...additions] } : slide));
         this.selectedIds.set(newIds);
@@ -38190,7 +38292,7 @@ class EditorStateService {
         }
         this.history.record(this.captureSnapshot(), 'Duplicate slide');
         const id = this.newId();
-        const copy = { ...this.clone(slides[index]), id, rId: id };
+        const copy = { ...cloneSlide$1(slides[index]), id, rId: id };
         const next = [...slides];
         next.splice(index + 1, 0, copy);
         this.slides.set(this.renumber(next));
@@ -38249,9 +38351,6 @@ class EditorStateService {
         this.undoLabel.set(this.history.undoLabel);
         this.redoLabel.set(this.history.redoLabel);
     }
-    clone(value) {
-        return structuredClone(value);
-    }
     newId() {
         const c = globalThis.crypto;
         if (c && typeof c.randomUUID === 'function') {
@@ -39124,7 +39223,7 @@ class EditorToolbarComponent {
 					[title]="'pptx.editorToolbar.insertRectangle' | translate"
 					(click)="onInsertShape('rect')"
 				>
-					▭
+					<svg lucideSquare class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39133,7 +39232,7 @@ class EditorToolbarComponent {
 					[title]="'pptx.editorToolbar.insertEllipse' | translate"
 					(click)="onInsertShape('ellipse')"
 				>
-					⬭
+					<svg lucideCircle class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39142,7 +39241,7 @@ class EditorToolbarComponent {
 					[title]="'pptx.editorToolbar.insertLine' | translate"
 					(click)="onInsertShape('line')"
 				>
-					╱
+					<svg lucideSlash class="h-4 w-4"></svg>
 				</button>
 			</div>
@@ -39166,7 +39265,7 @@ class EditorToolbarComponent {
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.duplicateSelected(slideIndex())"
 				>
-					⧉
+					<svg lucideCopy class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39176,7 +39275,7 @@ class EditorToolbarComponent {
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.deleteSelected(slideIndex())"
 				>
-					✕
+					<svg lucideTrash2 class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39186,7 +39285,7 @@ class EditorToolbarComponent {
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.bringSelectedToFront(slideIndex())"
 				>
-					⤒
+					<svg lucideChevronsUp class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39196,7 +39295,7 @@ class EditorToolbarComponent {
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.sendSelectedToBack(slideIndex())"
 				>
-					⤓
+					<svg lucideChevronsDown class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39206,7 +39305,7 @@ class EditorToolbarComponent {
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.bringSelectedForward(slideIndex())"
 				>
-					↑
+					<svg lucideArrowUp class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39216,7 +39315,7 @@ class EditorToolbarComponent {
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.sendSelectedBackward(slideIndex())"
 				>
-					↓
+					<svg lucideArrowDown class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39225,7 +39324,7 @@ class EditorToolbarComponent {
 					[disabled]="!canGroup()"
 					(click)="editor.groupSelected(slideIndex())"
 				>
-					⊡
+					<svg lucideGroup class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39234,7 +39333,7 @@ class EditorToolbarComponent {
 					[disabled]="!canUngroup()"
 					(click)="editor.ungroupSelected(slideIndex())"
 				>
-					⊠
+					<svg lucideUngroup class="h-4 w-4"></svg>
 				</button>
 			</div>
@@ -39255,7 +39354,7 @@ class EditorToolbarComponent {
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'left')"
 				>
-					⊣
+					<svg lucideTextAlignStart class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39264,7 +39363,7 @@ class EditorToolbarComponent {
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'centerH')"
 				>
-					⊟
+					<svg lucideTextAlignCenter class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39273,7 +39372,7 @@ class EditorToolbarComponent {
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'right')"
 				>
-					⊢
+					<svg lucideTextAlignEnd class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39282,7 +39381,7 @@ class EditorToolbarComponent {
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'top')"
 				>
-					⊤
+					<svg lucideChevronUp class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39291,7 +39390,7 @@ class EditorToolbarComponent {
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'middle')"
 				>
-					⊞
+					<svg lucideTextAlignCenter class="h-4 w-4 rotate-90"></svg>
 				</button>
 				<button
 					type="button"
@@ -39300,7 +39399,7 @@ class EditorToolbarComponent {
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'bottom')"
 				>
-					⊥
+					<svg lucideChevronDown class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39309,7 +39408,7 @@ class EditorToolbarComponent {
 					[disabled]="!canDistribute()"
 					(click)="editor.distributeSelected(slideIndex(), 'horizontal')"
 				>
-					↔
+					<svg lucideAlignHorizontalSpaceAround class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39318,15 +39417,35 @@ class EditorToolbarComponent {
 					[disabled]="!canDistribute()"
 					(click)="editor.distributeSelected(slideIndex(), 'vertical')"
 				>
-					↕
+					<svg lucideAlignVerticalSpaceAround class="h-4 w-4"></svg>
 				</button>
 			</div>
 		</div>
-	`, isInline: true, styles: [".pptx-ng-toolbar{display:flex;flex-direction:row;align-items:center;gap:0;padding:4px 8px;background:var(--pptx-toolbar-bg, #1e1e1e);color:var(--pptx-toolbar-fg, #e0e0e0);border-bottom:1px solid var(--pptx-toolbar-border, #333);min-height:36px;-webkit-user-select:none;user-select:none}.pptx-ng-toolbar__group{display:flex;flex-direction:row;align-items:center;gap:4px}.pptx-ng-toolbar__group-label{font-size:10px;color:var(--pptx-toolbar-muted, #888);text-transform:uppercase;letter-spacing:.05em;padding:0 6px 0 4px;flex-shrink:0}.pptx-ng-toolbar__divider{width:1px;height:20px;background:var(--pptx-toolbar-border, #444);margin:0 4px;flex-shrink:0}.pptx-ng-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:2px 8px;background:transparent;border:1px solid transparent;border-radius:4px;color:inherit;font-size:14px;cursor:pointer;transition:background .1s;flex-shrink:0}.pptx-ng-toolbar__btn:hover:not(:disabled){background:var(--pptx-toolbar-hover, #3a3a3a)}.pptx-ng-toolbar__btn:active:not(:disabled){background:var(--pptx-toolbar-active-bg, #2a2a2a);transform:scale(.95);opacity:.8}.pptx-ng-toolbar__btn:disabled{opacity:.4;cursor:not-allowed}.pptx-ng-toolbar__btn--danger:not(:disabled){color:var(--pptx-toolbar-danger, #f47c7c)}.pptx-ng-toolbar__btn--danger:hover:not(:disabled){background:var(--pptx-toolbar-danger-hover, #4a1a1a)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-toolbar{display:flex;flex-direction:row;align-items:center;gap:0;padding:4px 8px;background:var(--pptx-toolbar-bg, #1e1e1e);color:var(--pptx-toolbar-fg, #e0e0e0);border-bottom:1px solid var(--pptx-toolbar-border, #333);min-height:36px;-webkit-user-select:none;user-select:none}.pptx-ng-toolbar__group{display:flex;flex-direction:row;align-items:center;gap:4px}.pptx-ng-toolbar__group-label{font-size:10px;color:var(--pptx-toolbar-muted, #888);text-transform:uppercase;letter-spacing:.05em;padding:0 6px 0 4px;flex-shrink:0}.pptx-ng-toolbar__divider{width:1px;height:20px;background:var(--pptx-toolbar-border, #444);margin:0 4px;flex-shrink:0}.pptx-ng-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:2px 8px;background:transparent;border:1px solid transparent;border-radius:4px;color:inherit;font-size:14px;cursor:pointer;transition:background .1s;flex-shrink:0}.pptx-ng-toolbar__btn:hover:not(:disabled){background:var(--pptx-toolbar-hover, #3a3a3a)}.pptx-ng-toolbar__btn:active:not(:disabled){background:var(--pptx-toolbar-active-bg, #2a2a2a);transform:scale(.95);opacity:.8}.pptx-ng-toolbar__btn:disabled{opacity:.4;cursor:not-allowed}.pptx-ng-toolbar__btn--danger:not(:disabled){color:var(--pptx-toolbar-danger, #f47c7c)}.pptx-ng-toolbar__btn--danger:hover:not(:disabled){background:var(--pptx-toolbar-danger-hover, #4a1a1a)}\n"], dependencies: [{ kind: "component", type: LucideSquare, selector: "svg[lucideSquare]" }, { kind: "component", type: LucideCircle, selector: "svg[lucideCircle]" }, { kind: "component", type: LucideSlash, selector: "svg[lucideSlash]" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideChevronsUp, selector: "svg[lucideChevronsUp]" }, { kind: "component", type: LucideChevronsDown, selector: "svg[lucideChevronsDown]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucideGroup, selector: "svg[lucideGroup]" }, { kind: "component", type: LucideUngroup, selector: "svg[lucideUngroup]" }, { kind: "component", type: LucideTextAlignStart, selector: "svg[lucideTextAlignStart], svg[lucideText], svg[lucideAlignLeft]" }, { kind: "component", type: LucideTextAlignCenter, selector: "svg[lucideTextAlignCenter], svg[lucideAlignCenter]" }, { kind: "component", type: LucideTextAlignEnd, selector: "svg[lucideTextAlignEnd], svg[lucideAlignRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideAlignHorizontalSpaceAround, selector: "svg[lucideAlignHorizontalSpaceAround]" }, { kind: "component", type: LucideAlignVerticalSpaceAround, selector: "svg[lucideAlignVerticalSpaceAround]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EditorToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-editor-toolbar', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'pptx-editor-toolbar', standalone: true, imports: [
+                        TranslatePipe,
+                        LucideSquare,
+                        LucideCircle,
+                        LucideSlash,
+                        LucideCopy,
+                        LucideTrash2,
+                        LucideChevronsUp,
+                        LucideChevronsDown,
+                        LucideArrowUp,
+                        LucideArrowDown,
+                        LucideGroup,
+                        LucideUngroup,
+                        LucideTextAlignStart,
+                        LucideTextAlignCenter,
+                        LucideTextAlignEnd,
+                        LucideChevronUp,
+                        LucideChevronDown,
+                        LucideAlignHorizontalSpaceAround,
+                        LucideAlignVerticalSpaceAround,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
 		<div
 			class="pptx-ng-toolbar"
 			role="toolbar"
@@ -39357,7 +39476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[title]="'pptx.editorToolbar.insertRectangle' | translate"
 					(click)="onInsertShape('rect')"
 				>
-					▭
+					<svg lucideSquare class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39366,7 +39485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[title]="'pptx.editorToolbar.insertEllipse' | translate"
 					(click)="onInsertShape('ellipse')"
 				>
-					⬭
+					<svg lucideCircle class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39375,7 +39494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[title]="'pptx.editorToolbar.insertLine' | translate"
 					(click)="onInsertShape('line')"
 				>
-					╱
+					<svg lucideSlash class="h-4 w-4"></svg>
 				</button>
 			</div>
@@ -39399,7 +39518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.duplicateSelected(slideIndex())"
 				>
-					⧉
+					<svg lucideCopy class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39409,7 +39528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.deleteSelected(slideIndex())"
 				>
-					✕
+					<svg lucideTrash2 class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39419,7 +39538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.bringSelectedToFront(slideIndex())"
 				>
-					⤒
+					<svg lucideChevronsUp class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39429,7 +39548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.sendSelectedToBack(slideIndex())"
 				>
-					⤓
+					<svg lucideChevronsDown class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39439,7 +39558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.bringSelectedForward(slideIndex())"
 				>
-					↑
+					<svg lucideArrowUp class="h-4 w-4"></svg>
 				</button>
 				<button
@@ -39449,7 +39568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!editor.hasSelection()"
 					(click)="editor.sendSelectedBackward(slideIndex())"
 				>
-					↓
+					<svg lucideArrowDown class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39458,7 +39577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!canGroup()"
 					(click)="editor.groupSelected(slideIndex())"
 				>
-					⊡
+					<svg lucideGroup class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39467,7 +39586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!canUngroup()"
 					(click)="editor.ungroupSelected(slideIndex())"
 				>
-					⊠
+					<svg lucideUngroup class="h-4 w-4"></svg>
 				</button>
 			</div>
@@ -39488,7 +39607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'left')"
 				>
-					⊣
+					<svg lucideTextAlignStart class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39497,7 +39616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'centerH')"
 				>
-					⊟
+					<svg lucideTextAlignCenter class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39506,7 +39625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'right')"
 				>
-					⊢
+					<svg lucideTextAlignEnd class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39515,7 +39634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'top')"
 				>
-					⊤
+					<svg lucideChevronUp class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39524,7 +39643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'middle')"
 				>
-					⊞
+					<svg lucideTextAlignCenter class="h-4 w-4 rotate-90"></svg>
 				</button>
 				<button
 					type="button"
@@ -39533,7 +39652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!canAlign()"
 					(click)="editor.alignSelected(slideIndex(), 'bottom')"
 				>
-					⊥
+					<svg lucideChevronDown class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39542,7 +39661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!canDistribute()"
 					(click)="editor.distributeSelected(slideIndex(), 'horizontal')"
 				>
-					↔
+					<svg lucideAlignHorizontalSpaceAround class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -39551,7 +39670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="!canDistribute()"
 					(click)="editor.distributeSelected(slideIndex(), 'vertical')"
 				>
-					↕
+					<svg lucideAlignVerticalSpaceAround class="h-4 w-4"></svg>
 				</button>
 			</div>
 		</div>
@@ -42613,6 +42732,7 @@ class SmartArtRendererComponent {
 				} @else if (hasDrawingShapes()) {
 					<svg
 						class="pptx-ng-smartart-svg"
+						data-testid="smartart-drawing-shapes"
 						[attr.viewBox]="svgViewBox()"
 						preserveAspectRatio="xMidYMid meet"
 					>
@@ -42669,6 +42789,7 @@ class SmartArtRendererComponent {
 				} @else if (hasLayout()) {
 					<svg
 						class="pptx-ng-smartart-svg"
+						[attr.data-testid]="'smartart-' + layout().family"
 						[attr.viewBox]="layout().viewBox"
 						preserveAspectRatio="xMidYMid meet"
 						[attr.data-layout-family]="layout().family"
@@ -42847,6 +42968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				} @else if (hasDrawingShapes()) {
 					<svg
 						class="pptx-ng-smartart-svg"
+						data-testid="smartart-drawing-shapes"
 						[attr.viewBox]="svgViewBox()"
 						preserveAspectRatio="xMidYMid meet"
 					>
@@ -42903,6 +43025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				} @else if (hasLayout()) {
 					<svg
 						class="pptx-ng-smartart-svg"
+						[attr.data-testid]="'smartart-' + layout().family"
 						[attr.viewBox]="layout().viewBox"
 						preserveAspectRatio="xMidYMid meet"
 						[attr.data-layout-family]="layout().family"
@@ -43742,11 +43865,11 @@ class AnimationAuthorPanelComponent {
 				@if (currentHasAnimation()) {
 					<button
 						type="button"
-						class="pptx-ng-anim__remove-btn"
+						class="pptx-ng-anim__remove-btn inline-flex items-center gap-1"
 						[title]="'pptx.animations.removeFromElement' | translate"
 						(click)="onRemove()"
 					>
-						✕ {{ 'pptx.animations.remove' | translate }}
+						<svg lucideX class="h-3.5 w-3.5"></svg> {{ 'pptx.animations.remove' | translate }}
 					</button>
 				}
 			</div>
@@ -44004,32 +44127,34 @@ class AnimationAuthorPanelComponent {
 					<div class="pptx-ng-anim__row">
 						<button
 							type="button"
-							class="pptx-ng-anim__order-btn"
+							class="pptx-ng-anim__order-btn inline-flex items-center gap-1"
 							[disabled]="!canEdit()"
 							[title]="'pptx.animations.moveEarlier' | translate"
 							(click)="onMoveUp()"
 						>
-							↑ {{ 'pptx.animations.earlier' | translate }}
+							<svg lucideArrowUp class="h-3.5 w-3.5"></svg>
+							{{ 'pptx.animations.earlier' | translate }}
 						</button>
 						<button
 							type="button"
-							class="pptx-ng-anim__order-btn"
+							class="pptx-ng-anim__order-btn inline-flex items-center gap-1"
 							[disabled]="!canEdit()"
 							[title]="'pptx.animations.moveLater' | translate"
 							(click)="onMoveDown()"
 						>
-							↓ {{ 'pptx.animations.later' | translate }}
+							<svg lucideArrowDown class="h-3.5 w-3.5"></svg>
+							{{ 'pptx.animations.later' | translate }}
 						</button>
 					</div>
 				</section>
 			}
 			<!-- end @if (currentHasAnimation()) -->
 		</aside>
-	`, isInline: true, styles: [".pptx-ng-anim{display:flex;flex-direction:column;gap:0;padding:.5rem;background:var(--pptx-inspector-bg, #1e1e1e);color:var(--pptx-inspector-fg, #e0e0e0);font-size:12px;min-width:220px;overflow-y:auto}.pptx-ng-anim__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.4rem;border-bottom:1px solid var(--pptx-inspector-border, #333);margin-bottom:.35rem}.pptx-ng-anim__title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888)}.pptx-ng-anim__subheading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);padding:.4rem 0 .2rem;border-top:1px solid var(--pptx-inspector-border, #333);margin-top:.2rem}.pptx-ng-anim__section{padding:.25rem 0;border-bottom:1px solid var(--pptx-inspector-border, #2a2a2a)}.pptx-ng-anim__section:last-child{border-bottom:none}.pptx-ng-anim__label{display:block;font-size:10px;color:var(--pptx-inspector-muted, #888);margin-bottom:.2rem}.pptx-ng-anim__select,.pptx-ng-anim__input{width:100%;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:3px 6px;font-size:12px;box-sizing:border-box}.pptx-ng-anim__select:disabled,.pptx-ng-anim__input:disabled{opacity:.5;cursor:not-allowed}.pptx-ng-anim__direction-grid{display:flex;flex-wrap:wrap;gap:.25rem}.pptx-ng-anim__dir-btn{width:30px;height:30px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.pptx-ng-anim__dir-btn.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-ng-anim__dir-btn:disabled{opacity:.5;cursor:not-allowed}.pptx-ng-anim__row{display:flex;gap:.35rem}.pptx-ng-anim__order-btn{flex:1;padding:3px 6px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:11px;white-space:nowrap}.pptx-ng-anim__order-btn:hover:not(:disabled){background:var(--pptx-inspector-hover, #3a3a3a)}.pptx-ng-anim__order-btn:disabled{opacity:.5;cursor:not-allowed}.pptx-ng-anim__remove-btn{padding:2px 6px;background:transparent;border:1px solid var(--pptx-inspector-danger-border, #6b2a2a);color:var(--pptx-inspector-danger, #f47c7c);border-radius:3px;cursor:pointer;font-size:10px}.pptx-ng-anim__remove-btn:hover{background:var(--pptx-inspector-danger-hover, #4a1a1a)}@media(pointer:coarse),(max-width:640px){.pptx-ng-anim{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-anim__select,.pptx-ng-anim__input{min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-anim__dir-btn{width:40px;height:40px}.pptx-ng-anim__order-btn{min-height:40px;font-size:13px}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-anim{display:flex;flex-direction:column;gap:0;padding:.5rem;background:var(--pptx-inspector-bg, #1e1e1e);color:var(--pptx-inspector-fg, #e0e0e0);font-size:12px;min-width:220px;overflow-y:auto}.pptx-ng-anim__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.4rem;border-bottom:1px solid var(--pptx-inspector-border, #333);margin-bottom:.35rem}.pptx-ng-anim__title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888)}.pptx-ng-anim__subheading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);padding:.4rem 0 .2rem;border-top:1px solid var(--pptx-inspector-border, #333);margin-top:.2rem}.pptx-ng-anim__section{padding:.25rem 0;border-bottom:1px solid var(--pptx-inspector-border, #2a2a2a)}.pptx-ng-anim__section:last-child{border-bottom:none}.pptx-ng-anim__label{display:block;font-size:10px;color:var(--pptx-inspector-muted, #888);margin-bottom:.2rem}.pptx-ng-anim__select,.pptx-ng-anim__input{width:100%;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:3px 6px;font-size:12px;box-sizing:border-box}.pptx-ng-anim__select:disabled,.pptx-ng-anim__input:disabled{opacity:.5;cursor:not-allowed}.pptx-ng-anim__direction-grid{display:flex;flex-wrap:wrap;gap:.25rem}.pptx-ng-anim__dir-btn{width:30px;height:30px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.pptx-ng-anim__dir-btn.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-ng-anim__dir-btn:disabled{opacity:.5;cursor:not-allowed}.pptx-ng-anim__row{display:flex;gap:.35rem}.pptx-ng-anim__order-btn{flex:1;padding:3px 6px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:11px;white-space:nowrap}.pptx-ng-anim__order-btn:hover:not(:disabled){background:var(--pptx-inspector-hover, #3a3a3a)}.pptx-ng-anim__order-btn:disabled{opacity:.5;cursor:not-allowed}.pptx-ng-anim__remove-btn{padding:2px 6px;background:transparent;border:1px solid var(--pptx-inspector-danger-border, #6b2a2a);color:var(--pptx-inspector-danger, #f47c7c);border-radius:3px;cursor:pointer;font-size:10px}.pptx-ng-anim__remove-btn:hover{background:var(--pptx-inspector-danger-hover, #4a1a1a)}@media(pointer:coarse),(max-width:640px){.pptx-ng-anim{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-anim__select,.pptx-ng-anim__input{min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-anim__dir-btn{width:40px;height:40px}.pptx-ng-anim__order-btn{min-height:40px;font-size:13px}}\n"], dependencies: [{ kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AnimationAuthorPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-animation-author-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe], template: `
+            args: [{ selector: 'pptx-animation-author-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe, LucideX, LucideArrowUp, LucideArrowDown], template: `
 		<aside class="pptx-ng-anim" [attr.aria-label]="'pptx.animations.propertiesLabel' | translate">
 			<!-- ── Header ───────────────────────────────────────────────────── -->
 			<div class="pptx-ng-anim__header">
@@ -44037,11 +44162,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				@if (currentHasAnimation()) {
 					<button
 						type="button"
-						class="pptx-ng-anim__remove-btn"
+						class="pptx-ng-anim__remove-btn inline-flex items-center gap-1"
 						[title]="'pptx.animations.removeFromElement' | translate"
 						(click)="onRemove()"
 					>
-						✕ {{ 'pptx.animations.remove' | translate }}
+						<svg lucideX class="h-3.5 w-3.5"></svg> {{ 'pptx.animations.remove' | translate }}
 					</button>
 				}
 			</div>
@@ -44299,21 +44424,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					<div class="pptx-ng-anim__row">
 						<button
 							type="button"
-							class="pptx-ng-anim__order-btn"
+							class="pptx-ng-anim__order-btn inline-flex items-center gap-1"
 							[disabled]="!canEdit()"
 							[title]="'pptx.animations.moveEarlier' | translate"
 							(click)="onMoveUp()"
 						>
-							↑ {{ 'pptx.animations.earlier' | translate }}
+							<svg lucideArrowUp class="h-3.5 w-3.5"></svg>
+							{{ 'pptx.animations.earlier' | translate }}
 						</button>
 						<button
 							type="button"
-							class="pptx-ng-anim__order-btn"
+							class="pptx-ng-anim__order-btn inline-flex items-center gap-1"
 							[disabled]="!canEdit()"
 							[title]="'pptx.animations.moveLater' | translate"
 							(click)="onMoveDown()"
 						>
-							↓ {{ 'pptx.animations.later' | translate }}
+							<svg lucideArrowDown class="h-3.5 w-3.5"></svg>
+							{{ 'pptx.animations.later' | translate }}
 						</button>
 					</div>
 				</section>
@@ -51896,7 +52023,7 @@ class InspectorPanelComponent {
 						[title]="'pptx.contextMenu.bringForward' | translate"
 						(click)="editor.bringSelectedForward(slideIndex())"
 					>
-						↑
+						<svg lucideArrowUp class="h-3.5 w-3.5"></svg>
 					</button>
 					<button
 						type="button"
@@ -51904,7 +52031,7 @@ class InspectorPanelComponent {
 						[title]="'pptx.contextMenu.sendBackward' | translate"
 						(click)="editor.sendSelectedBackward(slideIndex())"
 					>
-						↓
+						<svg lucideArrowDown class="h-3.5 w-3.5"></svg>
 					</button>
 				</div>
 			</section>
@@ -52016,7 +52143,7 @@ class InspectorPanelComponent {
 				</div>
 			</section>
 		</aside>
-	`, isInline: true, styles: [".pptx-ng-inspector{display:flex;flex-direction:column;gap:0;padding:.5rem;background:var(--pptx-inspector-bg, #1e1e1e);color:var(--pptx-inspector-fg, #e0e0e0);font-size:12px;min-width:220px;overflow-y:auto}.pptx-ng-inspector__section{padding:.5rem 0;border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__section:last-child{border-bottom:none}.pptx-ng-inspector__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0 0 .35rem}.pptx-ng-inspector__details{border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__summary{padding:.5rem 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-inspector__row{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}.pptx-ng-inspector__row:last-child{margin-bottom:0}.pptx-ng-inspector__row--toggles{gap:.25rem}.pptx-ng-inspector__label{font-size:10px;color:var(--pptx-inspector-muted, #888);min-width:32px;text-align:right;flex-shrink:0}.pptx-ng-inspector__input{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:12px}.pptx-ng-inspector__input--number{width:62px;text-align:right}.pptx-ng-inspector__color{width:32px;height:22px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;padding:1px;cursor:pointer;background:transparent;flex-shrink:0}.pptx-ng-inspector__toggle{width:26px;height:22px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}.pptx-ng-inspector.is-mobile{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}@media(pointer:coarse),(max-width:767px){.pptx-ng-inspector{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}}.pptx-ng-inspector__toggle.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-ng-inspector__btn{flex:1;padding:3px 6px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:11px;white-space:nowrap}.pptx-ng-inspector__btn:hover{background:var(--pptx-inspector-hover, #3a3a3a)}.pptx-ng-inspector__btn--danger{color:var(--pptx-inspector-danger, #f47c7c);border-color:var(--pptx-inspector-danger-border, #6b2a2a)}.pptx-ng-inspector__btn--danger:hover{background:var(--pptx-inspector-danger-hover, #4a1a1a)}\n"], dependencies: [{ kind: "component", type: GradientPickerComponent, selector: "pptx-gradient-picker", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: EffectsPanelComponent, selector: "pptx-effects-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TextAdvancedPanelComponent, selector: "pptx-text-advanced-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TableDataEditorComponent, selector: "pptx-table-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: TablePropertiesComponent, selector: "pptx-table-properties", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: TableCellFormattingComponent, selector: "pptx-table-cell-formatting", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartDataEditorComponent, selector: "pptx-chart-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: SmartArtPropertiesComponent, selector: "pptx-smart-art-properties", inputs: ["smartArtData", "canEdit"], outputs: ["smartArtDataChange"] }, { kind: "component", type: AnimationAuthorPanelComponent, selector: "pptx-animation-author-panel", inputs: ["element", "slideIndex", "animations", "canEdit"], outputs: ["animationsChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-inspector{display:flex;flex-direction:column;gap:0;padding:.5rem;background:var(--pptx-inspector-bg, #1e1e1e);color:var(--pptx-inspector-fg, #e0e0e0);font-size:12px;min-width:220px;overflow-y:auto}.pptx-ng-inspector__section{padding:.5rem 0;border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__section:last-child{border-bottom:none}.pptx-ng-inspector__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0 0 .35rem}.pptx-ng-inspector__details{border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__summary{padding:.5rem 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-inspector__row{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}.pptx-ng-inspector__row:last-child{margin-bottom:0}.pptx-ng-inspector__row--toggles{gap:.25rem}.pptx-ng-inspector__label{font-size:10px;color:var(--pptx-inspector-muted, #888);min-width:32px;text-align:right;flex-shrink:0}.pptx-ng-inspector__input{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:12px}.pptx-ng-inspector__input--number{width:62px;text-align:right}.pptx-ng-inspector__color{width:32px;height:22px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;padding:1px;cursor:pointer;background:transparent;flex-shrink:0}.pptx-ng-inspector__toggle{width:26px;height:22px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}.pptx-ng-inspector.is-mobile{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}@media(pointer:coarse),(max-width:767px){.pptx-ng-inspector{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}}.pptx-ng-inspector__toggle.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-ng-inspector__btn{flex:1;padding:3px 6px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:11px;white-space:nowrap}.pptx-ng-inspector__btn:hover{background:var(--pptx-inspector-hover, #3a3a3a)}.pptx-ng-inspector__btn--danger{color:var(--pptx-inspector-danger, #f47c7c);border-color:var(--pptx-inspector-danger-border, #6b2a2a)}.pptx-ng-inspector__btn--danger:hover{background:var(--pptx-inspector-danger-hover, #4a1a1a)}\n"], dependencies: [{ kind: "component", type: GradientPickerComponent, selector: "pptx-gradient-picker", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: EffectsPanelComponent, selector: "pptx-effects-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TextAdvancedPanelComponent, selector: "pptx-text-advanced-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TableDataEditorComponent, selector: "pptx-table-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: TablePropertiesComponent, selector: "pptx-table-properties", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: TableCellFormattingComponent, selector: "pptx-table-cell-formatting", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartDataEditorComponent, selector: "pptx-chart-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: SmartArtPropertiesComponent, selector: "pptx-smart-art-properties", inputs: ["smartArtData", "canEdit"], outputs: ["smartArtDataChange"] }, { kind: "component", type: AnimationAuthorPanelComponent, selector: "pptx-animation-author-panel", inputs: ["element", "slideIndex", "animations", "canEdit"], outputs: ["animationsChange"] }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InspectorPanelComponent, decorators: [{
             type: Component,
@@ -52031,6 +52158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         SmartArtPropertiesComponent,
                         AnimationAuthorPanelComponent,
                         TranslatePipe,
+                        LucideArrowUp,
+                        LucideArrowDown,
                     ], providers: [IsMobileService], template: `
 		<!--
 			NOTE (mobile-safe inputs): every numeric / colour input is keyed on the
@@ -52272,7 +52401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[title]="'pptx.contextMenu.bringForward' | translate"
 						(click)="editor.bringSelectedForward(slideIndex())"
 					>
-						↑
+						<svg lucideArrowUp class="h-3.5 w-3.5"></svg>
 					</button>
 					<button
 						type="button"
@@ -52280,7 +52409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[title]="'pptx.contextMenu.sendBackward' | translate"
 						(click)="editor.sendSelectedBackward(slideIndex())"
 					>
-						↓
+						<svg lucideArrowDown class="h-3.5 w-3.5"></svg>
 					</button>
 				</div>
 			</section>
@@ -54992,9 +55121,40 @@ class MediaRendererComponent {
     ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
     interactive = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /**
+     * True only on the live presentation stage. When set, the media element
+     * starts playing on its own once mounted (as PowerPoint does when a slide
+     * with media becomes active) instead of waiting for a manual click; the
+     * thumbnail / sorter / editor canvases leave it false so their media is quiet.
+     */
+    presenting = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presenting" }] : /* istanbul ignore next */ []));
     /** Fallback text shown when neither a source nor a poster is available. */
     placeholderLabel = input('Media', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholderLabel" }] : /* istanbul ignore next */ []));
+    /** The live `<video>`/`<audio>` node (only one is mounted at a time). */
+    mediaElRef = viewChild('mediaEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaElRef" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Presentation autoplay: once the media node is in the DOM and this is the
+        // live stage, start playback; pause again if it leaves present mode. Reads
+        // mediaSrc so a source swap re-evaluates. The shared helper owns the
+        // `.play()` + blocked-autoplay handling so all three bindings match.
+        effect(() => {
+            const el = this.mediaElRef()?.nativeElement;
+            const presenting = this.presenting();
+            this.mediaSrc();
+            if (!el) {
+                return;
+            }
+            if (presenting) {
+                startMediaAutoplay(el, { trimStartMs: asMediaElement(this.element())?.trimStartMs });
+            }
+            else if (!el.paused) {
+                el.pause();
+            }
+        });
+    }
     containerStyle = computed(() => getContainerStyle(this.element(), this.zIndex()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "containerStyle" }] : /* istanbul ignore next */ []));
     /** Poster / preview frame data-URL (also used as the `<video poster>`). */
@@ -55020,7 +55180,7 @@ class MediaRendererComponent {
     clrChangeParams = computed(() => getClrChangeParams(this.element()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "clrChangeParams" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MediaRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MediaRendererComponent, isStandalone: true, selector: "pptx-media-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, placeholderLabel: { classPropertyName: "placeholderLabel", publicName: "placeholderLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MediaRendererComponent, isStandalone: true, selector: "pptx-media-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, presenting: { classPropertyName: "presenting", publicName: "presenting", isSignal: true, isRequired: false, transformFunction: null }, placeholderLabel: { classPropertyName: "placeholderLabel", publicName: "placeholderLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mediaElRef", first: true, predicate: ["mediaEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div
 			class="pptx-ng-element pptx-ng-media"
 			[ngStyle]="containerStyle()"
@@ -55030,6 +55190,7 @@ class MediaRendererComponent {
 			@if (mediaSrc(); as src) {
 				@if (mediaKind() === 'audio') {
 					<audio
+						#mediaEl
 						class="pptx-ng-media-el pptx-ng-media-audio"
 						[class.pptx-ng-media-inert]="interactive()"
 						[src]="src + trimFragment()"
@@ -55039,6 +55200,7 @@ class MediaRendererComponent {
 					></audio>
 				} @else {
 					<video
+						#mediaEl
 						class="pptx-ng-media-el pptx-ng-media-video"
 						[class.pptx-ng-media-inert]="interactive()"
 						[src]="src + trimFragment()"
@@ -55088,6 +55250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			@if (mediaSrc(); as src) {
 				@if (mediaKind() === 'audio') {
 					<audio
+						#mediaEl
 						class="pptx-ng-media-el pptx-ng-media-audio"
 						[class.pptx-ng-media-inert]="interactive()"
 						[src]="src + trimFragment()"
@@ -55097,6 +55260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					></audio>
 				} @else {
 					<video
+						#mediaEl
 						class="pptx-ng-media-el pptx-ng-media-video"
 						[class.pptx-ng-media-inert]="interactive()"
 						[src]="src + trimFragment()"
@@ -55133,7 +55297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			}
 		</div>
 	`, styles: [".pptx-ng-media-el{display:block;pointer-events:auto}.pptx-ng-media-video{width:100%;height:100%;object-fit:contain}.pptx-ng-media-audio{width:100%}.pptx-ng-media-inert{pointer-events:none}.pptx-ng-img{width:100%;height:100%;object-fit:contain;display:block}\n"] }]
-        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], placeholderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderLabel", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], presenting: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenting", required: false }] }], placeholderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderLabel", required: false }] }], mediaElRef: [{ type: i0.ViewChild, args: ['mediaEl', { isSignal: true }] }] } });
 /**
  * Pure helpers for `Model3DRendererComponent`.
@@ -55576,6 +55740,18 @@ class OleRendererComponent {
         return rows.map((row) => `${row.label}: ${row.value}`).join(', ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "infoTitle" }] : /* istanbul ignore next */ []));
+    /**
+     * Open the recovered embedded payload in a new browser tab. Routes through
+     * the shared {@link openUrlInNewTab} helper, which converts the `data:` URL to
+     * a Blob object URL first: browsers silently refuse to navigate a new
+     * top-level tab straight to a `data:` URL.
+     */
+    openEmbedded() {
+        const href = this.actions().downloadHref;
+        if (href) {
+            openUrlInNewTab(href);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OleRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OleRendererComponent, isStandalone: true, selector: "pptx-ole-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<div
@@ -55853,18 +56029,16 @@ class OleRendererComponent {
 						{{ 'pptx.ole.download' | translate }}
 					</a>
 					@if (actions().canOpen) {
-						<a
+						<button
+							type="button"
 							class="pptx-ng-ole-action"
-							[href]="actions().downloadHref"
-							target="_blank"
-							rel="noopener noreferrer"
 							[attr.aria-label]="
 								'pptx.ole.openFileAria' | translate: { file: actions().downloadFileName }
 							"
-							(click)="$event.stopPropagation()"
+							(click)="$event.stopPropagation(); openEmbedded()"
 						>
 							{{ 'pptx.ole.open' | translate }}
-						</a>
+						</button>
 					}
 				</div>
 			}
@@ -56149,18 +56323,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						{{ 'pptx.ole.download' | translate }}
 					</a>
 					@if (actions().canOpen) {
-						<a
+						<button
+							type="button"
 							class="pptx-ng-ole-action"
-							[href]="actions().downloadHref"
-							target="_blank"
-							rel="noopener noreferrer"
 							[attr.aria-label]="
 								'pptx.ole.openFileAria' | translate: { file: actions().downloadFileName }
 							"
-							(click)="$event.stopPropagation()"
+							(click)="$event.stopPropagation(); openEmbedded()"
 						>
 							{{ 'pptx.ole.open' | translate }}
-						</a>
+						</button>
 					}
 				</div>
 			}
@@ -57888,6 +58060,13 @@ class ElementRendererComponent {
      */
     interactive = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /**
+     * True only on the live presentation stage; threaded to the media renderer so
+     * a slide's media autoplays when the slide becomes active (and to group
+     * children so nested media autoplays too). False everywhere else.
+     */
+    presenting = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presenting" }] : /* istanbul ignore next */ []));
     /** Whether inline editing (e.g. table-cell text input) is enabled. */
     editable = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
@@ -58075,7 +58254,7 @@ class ElementRendererComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholderLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ElementRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ElementRendererComponent, isStandalone: true, selector: "pptx-element-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, obstacles: { classPropertyName: "obstacles", publicName: "obstacles", isSignal: true, isRequired: false, transformFunction: null }, canvasWidth: { classPropertyName: "canvasWidth", publicName: "canvasWidth", isSignal: true, isRequired: false, transformFunction: null }, canvasHeight: { classPropertyName: "canvasHeight", publicName: "canvasHeight", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, fieldContext: { classPropertyName: "fieldContext", publicName: "fieldContext", isSignal: true, isRequired: false, transformFunction: null }, editTemplateMode: { classPropertyName: "editTemplateMode", publicName: "editTemplateMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellCommit: "cellCommit", tableChange: "tableChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ElementRendererComponent, isStandalone: true, selector: "pptx-element-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, obstacles: { classPropertyName: "obstacles", publicName: "obstacles", isSignal: true, isRequired: false, transformFunction: null }, canvasWidth: { classPropertyName: "canvasWidth", publicName: "canvasWidth", isSignal: true, isRequired: false, transformFunction: null }, canvasHeight: { classPropertyName: "canvasHeight", publicName: "canvasHeight", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, presenting: { classPropertyName: "presenting", publicName: "presenting", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, fieldContext: { classPropertyName: "fieldContext", publicName: "fieldContext", isSignal: true, isRequired: false, transformFunction: null }, editTemplateMode: { classPropertyName: "editTemplateMode", publicName: "editTemplateMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellCommit: "cellCommit", tableChange: "tableChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
 		@switch (true) {
 			@case (element().type === 'connector') {
 				<pptx-connector-renderer
@@ -58177,6 +58356,7 @@ class ElementRendererComponent {
 							[mediaDataUrls]="mediaDataUrls()"
 							[zIndex]="$index"
 							[interactive]="interactive()"
+							[presenting]="presenting()"
 							[fieldContext]="fieldContext()"
 						/>
 					}
@@ -58209,6 +58389,7 @@ class ElementRendererComponent {
 					[mediaDataUrls]="mediaDataUrls()"
 					[zIndex]="zIndex()"
 					[interactive]="interactive()"
+					[presenting]="presenting()"
 					[placeholderLabel]="placeholderLabel()"
 				/>
 			}
@@ -58341,7 +58522,7 @@ class ElementRendererComponent {
 				</defs>
 			</svg>
 		}
-	`, isInline: true, dependencies: [{ kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex", "obstacles", "canvasWidth", "canvasHeight", "interactive", "editable", "fieldContext", "editTemplateMode"], outputs: ["cellCommit", "tableChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ConnectorRendererComponent, selector: "pptx-connector-renderer", inputs: ["element", "zIndex", "obstacles", "canvasWidth", "canvasHeight", "interactive"] }, { kind: "component", type: TableRendererComponent, selector: "pptx-table-renderer", inputs: ["element", "editable"], outputs: ["cellCommit", "tableChange"] }, { kind: "component", type: ChartRendererComponent, selector: "pptx-chart-renderer", inputs: ["element"] }, { kind: "component", type: SmartArtRendererComponent, selector: "pptx-smart-art-renderer", inputs: ["element", "zIndex", "editable"] }, { kind: "component", type: SmartArt3DRendererComponent, selector: "pptx-smart-art-3d-renderer", inputs: ["element", "zIndex", "canEdit"] }, { kind: "component", type: InkRendererComponent, selector: "pptx-ink-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: MediaRendererComponent, selector: "pptx-media-renderer", inputs: ["element", "mediaDataUrls", "zIndex", "interactive", "placeholderLabel"] }, { kind: "component", type: OleRendererComponent, selector: "pptx-ole-renderer", inputs: ["element", "zIndex"] }, { kind: "component", type: Model3DRendererComponent, selector: "pptx-model3d-renderer", inputs: ["element", "zIndex", "mediaDataUrls", "interactive"] }, { kind: "component", type: ZoomRendererComponent, selector: "pptx-zoom-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: EquationRendererComponent, selector: "pptx-equation-renderer", inputs: ["equationXml", "equationNumber"] }, { kind: "component", type: ColorChangedImageComponent, selector: "pptx-color-changed-image", inputs: ["src", "clrChange", "alt", "imgClass", "imgStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex", "obstacles", "canvasWidth", "canvasHeight", "interactive", "presenting", "editable", "fieldContext", "editTemplateMode"], outputs: ["cellCommit", "tableChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ConnectorRendererComponent, selector: "pptx-connector-renderer", inputs: ["element", "zIndex", "obstacles", "canvasWidth", "canvasHeight", "interactive"] }, { kind: "component", type: TableRendererComponent, selector: "pptx-table-renderer", inputs: ["element", "editable"], outputs: ["cellCommit", "tableChange"] }, { kind: "component", type: ChartRendererComponent, selector: "pptx-chart-renderer", inputs: ["element"] }, { kind: "component", type: SmartArtRendererComponent, selector: "pptx-smart-art-renderer", inputs: ["element", "zIndex", "editable"] }, { kind: "component", type: SmartArt3DRendererComponent, selector: "pptx-smart-art-3d-renderer", inputs: ["element", "zIndex", "canEdit"] }, { kind: "component", type: InkRendererComponent, selector: "pptx-ink-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: MediaRendererComponent, selector: "pptx-media-renderer", inputs: ["element", "mediaDataUrls", "zIndex", "interactive", "presenting", "placeholderLabel"] }, { kind: "component", type: OleRendererComponent, selector: "pptx-ole-renderer", inputs: ["element", "zIndex"] }, { kind: "component", type: Model3DRendererComponent, selector: "pptx-model3d-renderer", inputs: ["element", "zIndex", "mediaDataUrls", "interactive"] }, { kind: "component", type: ZoomRendererComponent, selector: "pptx-zoom-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: EquationRendererComponent, selector: "pptx-equation-renderer", inputs: ["equationXml", "equationNumber"] }, { kind: "component", type: ColorChangedImageComponent, selector: "pptx-color-changed-image", inputs: ["src", "clrChange", "alt", "imgClass", "imgStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ElementRendererComponent, decorators: [{
             type: Component,
@@ -58467,6 +58648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 							[mediaDataUrls]="mediaDataUrls()"
 							[zIndex]="$index"
 							[interactive]="interactive()"
+							[presenting]="presenting()"
 							[fieldContext]="fieldContext()"
 						/>
 					}
@@ -58499,6 +58681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[mediaDataUrls]="mediaDataUrls()"
 					[zIndex]="zIndex()"
 					[interactive]="interactive()"
+					[presenting]="presenting()"
 					[placeholderLabel]="placeholderLabel()"
 				/>
 			}
@@ -58633,7 +58816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 		}
 	`,
                 }]
-        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], obstacles: [{ type: i0.Input, args: [{ isSignal: true, alias: "obstacles", required: false }] }], canvasWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasWidth", required: false }] }], canvasHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasHeight", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], fieldContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldContext", required: false }] }], editTemplateMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editTemplateMode", required: false }] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], tableChange: [{ type: i0.Output, args: ["tableChange"] }] } });
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], obstacles: [{ type: i0.Input, args: [{ isSignal: true, alias: "obstacles", required: false }] }], canvasWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasWidth", required: false }] }], canvasHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasHeight", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], presenting: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenting", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], fieldContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldContext", required: false }] }], editTemplateMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editTemplateMode", required: false }] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], tableChange: [{ type: i0.Output, args: ["tableChange"] }] } });
 /**
  * ink-drawing.service.ts: Pen/highlighter/freeform/eraser drawing state +
@@ -59140,6 +59323,13 @@ class SlideCanvasComponent {
      */
     interactive = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /**
+     * True only for the live presentation stage: slide-content media autoplays.
+     * Left false for thumbnails, the sorter and the editor canvas so their media
+     * stays quiet (the template layer never autoplays regardless).
+     */
+    presenting = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presenting" }] : /* istanbul ignore next */ []));
     /** Ids of currently-selected elements (drawn with a selection outline). */
     selectedIds = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
@@ -59805,7 +59995,7 @@ class SlideCanvasComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stageStyle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SlideCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showRulers: { classPropertyName: "showRulers", publicName: "showRulers", isSignal: true, isRequired: false, transformFunction: null }, showGuides: { classPropertyName: "showGuides", publicName: "showGuides", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, snapToGuides: { classPropertyName: "snapToGuides", publicName: "snapToGuides", isSignal: true, isRequired: false, transformFunction: null }, autoFit: { classPropertyName: "autoFit", publicName: "autoFit", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", 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 }, editTemplateMode: { classPropertyName: "editTemplateMode", publicName: "editTemplateMode", isSignal: true, isRequired: false, transformFunction: null }, templateElements: { classPropertyName: "templateElements", publicName: "templateElements", isSignal: true, isRequired: false, transformFunction: null }, drawTool: { classPropertyName: "drawTool", publicName: "drawTool", isSignal: true, isRequired: false, transformFunction: null }, drawColor: { classPropertyName: "drawColor", publicName: "drawColor", isSignal: true, isRequired: false, transformFunction: null }, drawWidth: { classPropertyName: "drawWidth", publicName: "drawWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementSelect: "elementSelect", backgroundClick: "backgroundClick", transformStart: "transformStart", transformUpdate: "transformUpdate", contextMenu: "contextMenu", textEditStart: "textEditStart", textCommit: "textCommit", textCancel: "textCancel", textFormat: "textFormat", rotateUpdate: "rotateUpdate", marqueeSelect: "marqueeSelect", inkStrokeComplete: "inkStrokeComplete", eraserHit: "eraserHit", cellCommit: "cellCommit", tableChange: "tableChange" }, host: { listeners: { "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp()" } }, providers: [CanvasFitService, InkDrawingService, RulerGuidesService], 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showRulers: { classPropertyName: "showRulers", publicName: "showRulers", isSignal: true, isRequired: false, transformFunction: null }, showGuides: { classPropertyName: "showGuides", publicName: "showGuides", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, snapToGuides: { classPropertyName: "snapToGuides", publicName: "snapToGuides", isSignal: true, isRequired: false, transformFunction: null }, autoFit: { classPropertyName: "autoFit", publicName: "autoFit", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, presenting: { classPropertyName: "presenting", publicName: "presenting", 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 }, editTemplateMode: { classPropertyName: "editTemplateMode", publicName: "editTemplateMode", isSignal: true, isRequired: false, transformFunction: null }, templateElements: { classPropertyName: "templateElements", publicName: "templateElements", isSignal: true, isRequired: false, transformFunction: null }, drawTool: { classPropertyName: "drawTool", publicName: "drawTool", isSignal: true, isRequired: false, transformFunction: null }, drawColor: { classPropertyName: "drawColor", publicName: "drawColor", isSignal: true, isRequired: false, transformFunction: null }, drawWidth: { classPropertyName: "drawWidth", publicName: "drawWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementSelect: "elementSelect", backgroundClick: "backgroundClick", transformStart: "transformStart", transformUpdate: "transformUpdate", contextMenu: "contextMenu", textEditStart: "textEditStart", textCommit: "textCommit", textCancel: "textCancel", textFormat: "textFormat", rotateUpdate: "rotateUpdate", marqueeSelect: "marqueeSelect", inkStrokeComplete: "inkStrokeComplete", eraserHit: "eraserHit", cellCommit: "cellCommit", tableChange: "tableChange" }, host: { listeners: { "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp()" } }, providers: [CanvasFitService, InkDrawingService, RulerGuidesService], 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"
@@ -59856,6 +60046,7 @@ class SlideCanvasComponent {
 							[canvasWidth]="canvasSize().width"
 							[canvasHeight]="canvasSize().height"
 							[interactive]="interactive()"
+							[presenting]="presenting()"
 							[editable]="editable()"
 							[fieldContext]="fieldContext()"
 							[editTemplateMode]="false"
@@ -60175,7 +60366,7 @@ class SlideCanvasComponent {
 				}
 			</div>
 		</div>
-	`, isInline: true, styles: [".pptx-ng-canvas-stage.is-editable{touch-action:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex", "obstacles", "canvasWidth", "canvasHeight", "interactive", "editable", "fieldContext", "editTemplateMode"], outputs: ["cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-canvas-stage.is-editable{touch-action:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex", "obstacles", "canvasWidth", "canvasHeight", "interactive", "presenting", "editable", "fieldContext", "editTemplateMode"], outputs: ["cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SlideCanvasComponent, decorators: [{
             type: Component,
@@ -60230,6 +60421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 							[canvasWidth]="canvasSize().width"
 							[canvasHeight]="canvasSize().height"
 							[interactive]="interactive()"
+							[presenting]="presenting()"
 							[editable]="editable()"
 							[fieldContext]="fieldContext()"
 							[editTemplateMode]="false"
@@ -60550,7 +60742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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 }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showRulers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRulers", required: false }] }], showGuides: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGuides", required: false }] }], snapToGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGrid", required: false }] }], snapToGuides: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGuides", required: false }] }], autoFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFit", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], editingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingId", required: false }] }], editTemplateMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editTemplateMode", required: false }] }], templateElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateElements", required: false }] }], drawTool: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawTool", required: false }] }], drawColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawColor", required: false }] }], drawWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawWidth", 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"] }], textFormat: [{ type: i0.Output, args: ["textFormat"] }], rotateUpdate: [{ type: i0.Output, args: ["rotateUpdate"] }], marqueeSelect: [{ type: i0.Output, args: ["marqueeSelect"] }], inkStrokeComplete: [{ type: i0.Output, args: ["inkStrokeComplete"] }], eraserHit: [{ type: i0.Output, args: ["eraserHit"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], tableChange: [{ type: i0.Output, args: ["tableChange"] }], 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 }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showRulers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRulers", required: false }] }], showGuides: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGuides", required: false }] }], snapToGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGrid", required: false }] }], snapToGuides: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGuides", required: false }] }], autoFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFit", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], presenting: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenting", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], editingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingId", required: false }] }], editTemplateMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editTemplateMode", required: false }] }], templateElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateElements", required: false }] }], drawTool: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawTool", required: false }] }], drawColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawColor", required: false }] }], drawWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawWidth", 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"] }], textFormat: [{ type: i0.Output, args: ["textFormat"] }], rotateUpdate: [{ type: i0.Output, args: ["rotateUpdate"] }], marqueeSelect: [{ type: i0.Output, args: ["marqueeSelect"] }], inkStrokeComplete: [{ type: i0.Output, args: ["inkStrokeComplete"] }], eraserHit: [{ type: i0.Output, args: ["eraserHit"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], tableChange: [{ type: i0.Output, args: ["tableChange"] }], 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: [{
@@ -60755,7 +60947,7 @@ class MobilePresenterViewComponent {
 		} @else {
 			<div class="pptx-ng-mpresenter-empty">{{ 'pptx.presenter.noSlides' | translate }}</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;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.pptx-ng-mpresenter-header,.pptx-ng-mpresenter-next,.pptx-ng-mpresenter-ctl{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem}.pptx-ng-mpresenter-header{justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}.pptx-ng-mpresenter-label{font-size:.625rem;text-transform:uppercase;letter-spacing:.06em;color:#ffffff8c}.pptx-ng-mpresenter-elapsed{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:1.125rem;color:#6ea8fe}.pptx-ng-mpresenter-counter{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.875rem}.pptx-ng-mpresenter-exit{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;border:none;border-radius:6px;background:transparent;color:#ffffffbf;cursor:pointer;font-size:1.25rem;line-height:1}.pptx-ng-mpresenter-exit:hover{background:#ffffff1f;color:#fff}.pptx-ng-mpresenter-main{display:flex;align-items:center;justify-content:center;background:#000;padding:.75rem}.pptx-ng-mpresenter-main-stage{width:100%;max-width:640px}.pptx-ng-mpresenter-next{border-bottom:1px solid rgba(255,255,255,.08)}.pptx-ng-mpresenter-thumb{flex:0 0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:4px}.pptx-ng-mpresenter-next-empty{display:flex;flex:1 1 auto;align-items:center;justify-content:center;height:3rem;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#ffffff0a;font-size:.625rem;font-style:italic;color:#ffffff80}.pptx-ng-mpresenter-notes{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:.5rem 1rem}.pptx-ng-mpresenter-notes-body{flex:1 1 auto;overflow-y:auto;margin-top:.25rem;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:#ffffff0a;padding:.5rem .75rem;white-space:pre-wrap;line-height:1.5;font-size:15px}.pptx-ng-mpresenter-notes-empty{font-style:italic;color:#ffffff80}.pptx-ng-mpresenter-ctl{justify-content:space-between;border-top:1px solid rgba(255,255,255,.08)}.pptx-ng-mpresenter-navbtn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;height:44px;border:none;border-radius:6px;background:#ffffff14;color:#f5f5f5;cursor:pointer;font-size:.9rem}.pptx-ng-mpresenter-navbtn:hover:not(:disabled){background:#ffffff29}.pptx-ng-mpresenter-navbtn:disabled{opacity:.4;cursor:not-allowed}.pptx-ng-mpresenter-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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], 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;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.pptx-ng-mpresenter-header,.pptx-ng-mpresenter-next,.pptx-ng-mpresenter-ctl{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem}.pptx-ng-mpresenter-header{justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}.pptx-ng-mpresenter-label{font-size:.625rem;text-transform:uppercase;letter-spacing:.06em;color:#ffffff8c}.pptx-ng-mpresenter-elapsed{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:1.125rem;color:#6ea8fe}.pptx-ng-mpresenter-counter{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.875rem}.pptx-ng-mpresenter-exit{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;border:none;border-radius:6px;background:transparent;color:#ffffffbf;cursor:pointer;font-size:1.25rem;line-height:1}.pptx-ng-mpresenter-exit:hover{background:#ffffff1f;color:#fff}.pptx-ng-mpresenter-main{display:flex;align-items:center;justify-content:center;background:#000;padding:.75rem}.pptx-ng-mpresenter-main-stage{width:100%;max-width:640px}.pptx-ng-mpresenter-next{border-bottom:1px solid rgba(255,255,255,.08)}.pptx-ng-mpresenter-thumb{flex:0 0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:4px}.pptx-ng-mpresenter-next-empty{display:flex;flex:1 1 auto;align-items:center;justify-content:center;height:3rem;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#ffffff0a;font-size:.625rem;font-style:italic;color:#ffffff80}.pptx-ng-mpresenter-notes{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:.5rem 1rem}.pptx-ng-mpresenter-notes-body{flex:1 1 auto;overflow-y:auto;margin-top:.25rem;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:#ffffff0a;padding:.5rem .75rem;white-space:pre-wrap;line-height:1.5;font-size:15px}.pptx-ng-mpresenter-notes-empty{font-style:italic;color:#ffffff80}.pptx-ng-mpresenter-ctl{justify-content:space-between;border-top:1px solid rgba(255,255,255,.08)}.pptx-ng-mpresenter-navbtn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;height:44px;border:none;border-radius:6px;background:#ffffff14;color:#f5f5f5;cursor:pointer;font-size:.9rem}.pptx-ng-mpresenter-navbtn:hover:not(:disabled){background:#ffffff29}.pptx-ng-mpresenter-navbtn:disabled{opacity:.4;cursor:not-allowed}.pptx-ng-mpresenter-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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MobilePresenterViewComponent, decorators: [{
             type: Component,
@@ -61031,7 +61223,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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], 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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MobileSlidesSheetComponent, decorators: [{
             type: Component,
@@ -61930,7 +62122,13 @@ class NotesPanelComponent {
 				(click)="toggle()"
 			>
 				<span class="pptx-ng-notes-label">{{ 'pptx.notes.speakerNotes' | translate }}</span>
-				<span class="pptx-ng-notes-chevron" aria-hidden="true">{{ collapsed() ? '▸' : '▾' }}</span>
+				<span class="pptx-ng-notes-chevron" aria-hidden="true">
+					@if (collapsed()) {
+						<svg lucideChevronRight class="h-4 w-4"></svg>
+					} @else {
+						<svg lucideChevronDown class="h-4 w-4"></svg>
+					}
+				</span>
 			</button>
 			@if (!collapsed()) {
@@ -61954,7 +62152,7 @@ class NotesPanelComponent {
 						#richEditor
 						class="pptx-ng-notes-rich"
 						[hidden]="!showRich()"
-						[attr.contenteditable]="slide() ? 'true' : 'false'"
+						[attr.contenteditable]="showRich() ? 'true' : 'false'"
 						role="textbox"
 						aria-multiline="true"
 						[attr.aria-label]="'pptx.notes.speakerNotes' | translate"
@@ -61981,11 +62179,11 @@ class NotesPanelComponent {
 				</div>
 			}
 		</section>
-	`, isInline: true, styles: [":host{display:block}.pptx-ng-notes-panel{display:flex;flex-direction:column;border-top:1px solid var(--pptx-border, rgba(0, 0, 0, .1));background:var(--pptx-background, #ffffff);color:var(--pptx-foreground, #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:var(--pptx-muted-foreground, #6b7280);cursor:pointer}.pptx-ng-notes-header:hover{color:var(--pptx-foreground, #111827)}.pptx-ng-notes-body{padding:0 .75rem .75rem}.pptx-ng-notes-rich,.pptx-ng-notes-textarea{box-sizing:border-box;width:100%;min-height:5rem;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-rich{overflow:auto;resize:vertical}.pptx-ng-notes-textarea{resize:vertical}.pptx-ng-notes-rich:focus,.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"], dependencies: [{ kind: "component", type: NotesToolbarComponent, selector: "pptx-notes-toolbar", inputs: ["isRichEnabled", "showLinkPopover", "savedSelectionText"], outputs: ["inline", "paragraph", "linkButtonClick", "insertLink", "closeLinkPopover", "print", "toggleRich"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [":host{display:block}.pptx-ng-notes-panel{display:flex;flex-direction:column;border-top:1px solid var(--pptx-border, rgba(0, 0, 0, .1));background:var(--pptx-background, #ffffff);color:var(--pptx-foreground, #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:var(--pptx-muted-foreground, #6b7280);cursor:pointer}.pptx-ng-notes-header:hover{color:var(--pptx-foreground, #111827)}.pptx-ng-notes-body{padding:0 .75rem .75rem}.pptx-ng-notes-rich,.pptx-ng-notes-textarea{box-sizing:border-box;width:100%;min-height:5rem;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-rich{overflow:auto;resize:vertical}.pptx-ng-notes-textarea{resize:vertical}.pptx-ng-notes-rich:focus,.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"], dependencies: [{ kind: "component", type: NotesToolbarComponent, selector: "pptx-notes-toolbar", inputs: ["isRichEnabled", "showLinkPopover", "savedSelectionText"], outputs: ["inline", "paragraph", "linkButtonClick", "insertLink", "closeLinkPopover", "print", "toggleRich"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NotesPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-notes-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NotesToolbarComponent, TranslatePipe], template: `
+            args: [{ selector: 'pptx-notes-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NotesToolbarComponent, TranslatePipe, LucideChevronRight, LucideChevronDown], template: `
 		<section class="pptx-ng-notes-panel" [attr.data-collapsed]="collapsed()">
 			<button
 				type="button"
@@ -61994,7 +62192,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				(click)="toggle()"
 			>
 				<span class="pptx-ng-notes-label">{{ 'pptx.notes.speakerNotes' | translate }}</span>
-				<span class="pptx-ng-notes-chevron" aria-hidden="true">{{ collapsed() ? '▸' : '▾' }}</span>
+				<span class="pptx-ng-notes-chevron" aria-hidden="true">
+					@if (collapsed()) {
+						<svg lucideChevronRight class="h-4 w-4"></svg>
+					} @else {
+						<svg lucideChevronDown class="h-4 w-4"></svg>
+					}
+				</span>
 			</button>
 			@if (!collapsed()) {
@@ -62018,7 +62222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						#richEditor
 						class="pptx-ng-notes-rich"
 						[hidden]="!showRich()"
-						[attr.contenteditable]="slide() ? 'true' : 'false'"
+						[attr.contenteditable]="showRich() ? 'true' : 'false'"
 						role="textbox"
 						aria-multiline="true"
 						[attr.aria-label]="'pptx.notes.speakerNotes' | translate"
@@ -63002,6 +63206,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 	`, styles: [":host{display:block;position:absolute;inset:0;pointer-events:none}.pptx-ng-anno-wrapper{position:absolute;inset:0}.pptx-ng-anno-svg{position:absolute;top:0;left:0;transform-origin:top left;overflow:visible}.pptx-ng-laser-dot{position:absolute;border-radius:50%;pointer-events:none;background:#ff0000d9;box-shadow:0 0 12px 6px #ff000080,0 0 24px 12px #ff000040;filter:drop-shadow(0 0 8px rgba(255,0,0,.7))}\n"] }]
         }], propDecorators: { canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: true }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], svgRef: [{ type: i0.ViewChild, args: ['svg', { isSignal: true }] }] } });
+/**
+ * presentation-fullscreen.ts
+ *
+ * DOM-only helpers that drive the real browser Fullscreen API for the
+ * presentation overlay. Kept Angular-free so they can be unit-tested without
+ * TestBed (mirrors `presentation-overlay-helpers.ts`).
+ *
+ * Mirrors the React (`usePresentationMode.ts`) and Vue (`PresentationMode.vue`)
+ * implementations: request fullscreen on the overlay's own root element when it
+ * mounts, exit fullscreen when it unmounts, and feature-detect throughout so
+ * browsers/environments without full Fullscreen API support (iOS Safari's
+ * partial support, jsdom in tests, etc.) degrade silently to the CSS-fixed
+ * overlay rather than throwing.
+ */
+/**
+ * Request fullscreen on `element` if the Fullscreen API is available.
+ * No-ops (rather than throwing) when the element is missing, the API is
+ * unsupported, or the browser rejects the request (no active user gesture,
+ * permission denied, etc.).
+ */
+function requestPresentationFullscreen(element) {
+    if (!element) {
+        return;
+    }
+    const el = element;
+    if (typeof el.requestFullscreen !== 'function') {
+        return;
+    }
+    try {
+        void el.requestFullscreen().catch(() => {
+            /* ignore: denied, unsupported, or no active user gesture */
+        });
+    }
+    catch {
+        /* ignore: some environments throw synchronously instead of rejecting */
+    }
+}
+/**
+ * Exit fullscreen if the given document is currently in it and the Fullscreen
+ * API is available. No-ops otherwise.
+ */
+function exitPresentationFullscreen(doc) {
+    if (!doc) {
+        return;
+    }
+    const d = doc;
+    if (!d.fullscreenElement || typeof d.exitFullscreen !== 'function') {
+        return;
+    }
+    try {
+        void d.exitFullscreen().catch(() => {
+            /* ignore */
+        });
+    }
+    catch {
+        /* ignore */
+    }
+}
+/**
+ * Whether `doc` is currently NOT in fullscreen (i.e. fullscreen was just
+ * exited, or was never entered, e.g. because the API is unsupported).
+ *
+ * Fed a `fullscreenchange` event on `document`; combined with the overlay's
+ * own "did I just cause this?" guard, distinguishes an external exit (Esc
+ * consumed by the browser before reaching the overlay's own keydown handler,
+ * the Android back gesture, swiping away on iOS) from our own close flow.
+ */
+function hasExitedFullscreen(doc) {
+    const d = doc;
+    return !d?.fullscreenElement;
+}
 /**
  * Clamp `index` to the valid range [0, count - 1].
  * Returns 0 when `count` is 0 to avoid -1 states.
@@ -63519,7 +63795,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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }], 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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PresentationTransitionOverlayComponent, decorators: [{
             type: Component,
@@ -63628,6 +63904,17 @@ function attachTouchGestures(element, config) {
  *   Horizontal swipe                    → left → next, right → previous
  *
  * Click on the overlay body → advance to next visible slide.
+ *
+ * Fullscreen (mirrors the React `usePresentationMode` / Vue `PresentationMode.vue`
+ * behavior, on top of the CSS-fixed full-viewport overlay above): the real
+ * Fullscreen API is requested on this component's root element once it mounts,
+ * and released again on destroy, so the browser chrome (address bar, etc.) gets
+ * out of the way on mobile the same way it does for React/Vue. A
+ * `fullscreenchange` listener syncs back to `closed` when fullscreen is exited
+ * from outside this component's own close/Escape handling (browser UI, the
+ * Android back gesture, etc.). Environments without Fullscreen API support
+ * (iOS Safari's partial support, `jsdom` in tests) degrade silently to the
+ * plain CSS overlay.
  */
 class PresentationOverlayComponent {
     // ------------------------------------------------------------------
@@ -63679,11 +63966,23 @@ class PresentationOverlayComponent {
     /** The slide stage root; animation styles are applied to its elements. */
     stageRef = viewChild('stage', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stageRef" }] : /* istanbul ignore next */ []));
-    /** The overlay root; the shared touch-gesture recogniser attaches here. */
+    /**
+     * The overlay root; the shared touch-gesture recogniser attaches here, and
+     * it is the element the real Fullscreen API is requested on (see
+     * {@link setupFullscreen}).
+     */
     rootRef = viewChild('root', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rootRef" }] : /* istanbul ignore next */ []));
+    /**
+     * Guards against handling the same exit twice: e.g. Escape both reaches our
+     * own `keydown` handler AND causes the browser to natively exit fullscreen
+     * (firing `fullscreenchange`), or the close button's `click` and `touchend`
+     * both fire for one tap.
+     */
+    closing = false;
     constructor() {
         this.setupTouchGestures();
+        this.setupFullscreen();
         // Wire the zoom-navigation context to this overlay's slide navigation so a
         // descendant zoom tile can jump to its target slide on click.
         this.zoomNavigation.setHandler((index) => this.goToSlide(index));
@@ -63881,6 +64180,39 @@ class PresentationOverlayComponent {
         });
     }
     // ------------------------------------------------------------------
+    // Real Fullscreen API (layered on top of the CSS-fixed overlay)
+    // ------------------------------------------------------------------
+    /**
+     * Request real fullscreen on the overlay root once it mounts, and release
+     * it again when the overlay is destroyed (`presenting` flips back to
+     * false, closing this `@if` block). Mirrors Vue's `onMounted` /
+     * `onBeforeUnmount` pair on its own overlay root; feature-detected so
+     * unsupported environments just keep the CSS overlay.
+     */
+    setupFullscreen() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            requestPresentationFullscreen(this.rootRef()?.nativeElement);
+        });
+        destroyRef.onDestroy(() => {
+            exitPresentationFullscreen(typeof document === 'undefined' ? null : document);
+        });
+    }
+    /**
+     * Sync back to `closed` when fullscreen is exited from OUTSIDE this
+     * component's own close/Escape handling: the browser's native Esc handling
+     * can beat (or replace) our `keydown` listener, and mobile back
+     * gestures/browser-UI exits never reach it at all. Without this, `presenting`
+     * would stay stuck true while the app has silently fallen back to the plain
+     * CSS overlay. `emitClosed()` is itself guarded against double-firing, so it
+     * is safe if our own close flow *also* triggers this event.
+     */
+    onFullscreenChange() {
+        if (hasExitedFullscreen(typeof document === 'undefined' ? null : document)) {
+            this.emitClosed();
+        }
+    }
+    // ------------------------------------------------------------------
     // Lifecycle
     // ------------------------------------------------------------------
     ngOnInit() {
@@ -64060,13 +64392,17 @@ class PresentationOverlayComponent {
         this.indexChange.emit(next);
     }
     emitClosed() {
+        if (this.closing) {
+            return;
+        }
+        this.closing = true;
         if (this.annotations.hasAnyAnnotations()) {
             this.annotationsExit.emit(this.annotations.getAllSlideAnnotations());
         }
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PresentationOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PresentationOverlayComponent, isStandalone: true, selector: "pptx-presentation-overlay", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: true, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", closed: "closed", annotationsExit: "annotationsExit" }, host: { listeners: { "window:resize": "onWindowResize()", "document:keydown": "onKeyDown($event)" } }, providers: [AnimationPlaybackService, PresentationAnnotationsService, ZoomNavigationService], viewQueries: [{ propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true, isSignal: true }, { propertyName: "rootRef", first: true, predicate: ["root"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PresentationOverlayComponent, isStandalone: true, selector: "pptx-presentation-overlay", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: true, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", closed: "closed", annotationsExit: "annotationsExit" }, host: { listeners: { "document:fullscreenchange": "onFullscreenChange()", "window:resize": "onWindowResize()", "document:keydown": "onKeyDown($event)" } }, providers: [AnimationPlaybackService, PresentationAnnotationsService, ZoomNavigationService], viewQueries: [{ propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true, isSignal: true }, { propertyName: "rootRef", first: true, predicate: ["root"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div #root class="pptx-ng-presentation-root">
 			<!--
 				Slide counter, rendered first in DOM (before slide content) so a
@@ -64092,6 +64428,7 @@ class PresentationOverlayComponent {
 					[zoom]="zoom()"
 					[autoFit]="false"
 					[interactive]="false"
+					[presenting]="true"
 				/>
 				@if (activeTransition(); as t) {
@@ -64123,7 +64460,7 @@ class PresentationOverlayComponent {
 					(click)="selectTool('pen')"
 					[attr.aria-label]="'pptx.presentation.pen' | translate"
 				>
-					✎
+					<svg lucidePenTool class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -64131,7 +64468,7 @@ class PresentationOverlayComponent {
 					(click)="selectTool('highlighter')"
 					[attr.aria-label]="'pptx.presentation.highlighter' | translate"
 				>
-					▭
+					<svg lucideHighlighter class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -64139,7 +64476,7 @@ class PresentationOverlayComponent {
 					(click)="selectTool('eraser')"
 					[attr.aria-label]="'pptx.presentation.eraser' | translate"
 				>
-					⌫
+					<svg lucideEraser class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -64147,14 +64484,14 @@ class PresentationOverlayComponent {
 					(click)="selectTool('laser')"
 					[attr.aria-label]="'pptx.presentation.laserPointer' | translate"
 				>
-					•
+					<svg lucideMousePointer2 class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
 					(click)="annotations.clearAnnotations()"
 					[attr.aria-label]="'pptx.presentation.clearAnnotations' | translate"
 				>
-					🗑
+					<svg lucideTrash2 class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -64175,7 +64512,7 @@ class PresentationOverlayComponent {
 				(touchend)="onCloseTouch($event)"
 				[attr.aria-label]="'pptx.presenter.endPresentation' | translate"
 			>
-				&#x2715;
+				<svg lucideX class="h-5 w-5"></svg>
 			</button>
 			<!-- Edge navigation buttons (vertically centred, touch-friendly). -->
@@ -64187,7 +64524,7 @@ class PresentationOverlayComponent {
 				(touchend)="onPrevTouch($event)"
 				[attr.aria-label]="'pptx.presenter.previousSlide' | translate"
 			>
-				&#x2039;
+				<svg lucideChevronLeft class="h-6 w-6"></svg>
 			</button>
 			<button
 				type="button"
@@ -64197,10 +64534,10 @@ class PresentationOverlayComponent {
 				(touchend)="onNextTouch($event)"
 				[attr.aria-label]="'pptx.presenter.nextSlide' | translate"
 			>
-				&#x203A;
+				<svg lucideChevronRight class="h-6 w-6"></svg>
 			</button>
 		</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: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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], 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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { 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"] }, { kind: "component", type: LucidePenTool, selector: "svg[lucidePenTool]" }, { kind: "component", type: LucideHighlighter, selector: "svg[lucideHighlighter]" }, { kind: "component", type: LucideEraser, selector: "svg[lucideEraser]" }, { kind: "component", type: LucideMousePointer2, selector: "svg[lucideMousePointer2]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PresentationOverlayComponent, decorators: [{
             type: Component,
@@ -64211,6 +64548,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         PresentationAnnotationOverlayComponent,
                         PresentationSubtitleBarComponent,
                         TranslatePipe,
+                        LucidePenTool,
+                        LucideHighlighter,
+                        LucideEraser,
+                        LucideMousePointer2,
+                        LucideTrash2,
+                        LucideX,
+                        LucideChevronLeft,
+                        LucideChevronRight,
                     ], providers: [AnimationPlaybackService, PresentationAnnotationsService, ZoomNavigationService], template: `
 		<div #root class="pptx-ng-presentation-root">
 			<!--
@@ -64237,6 +64582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[zoom]="zoom()"
 					[autoFit]="false"
 					[interactive]="false"
+					[presenting]="true"
 				/>
 				@if (activeTransition(); as t) {
@@ -64268,7 +64614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					(click)="selectTool('pen')"
 					[attr.aria-label]="'pptx.presentation.pen' | translate"
 				>
-					✎
+					<svg lucidePenTool class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -64276,7 +64622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					(click)="selectTool('highlighter')"
 					[attr.aria-label]="'pptx.presentation.highlighter' | translate"
 				>
-					▭
+					<svg lucideHighlighter class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -64284,7 +64630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					(click)="selectTool('eraser')"
 					[attr.aria-label]="'pptx.presentation.eraser' | translate"
 				>
-					⌫
+					<svg lucideEraser class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -64292,14 +64638,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					(click)="selectTool('laser')"
 					[attr.aria-label]="'pptx.presentation.laserPointer' | translate"
 				>
-					•
+					<svg lucideMousePointer2 class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
 					(click)="annotations.clearAnnotations()"
 					[attr.aria-label]="'pptx.presentation.clearAnnotations' | translate"
 				>
-					🗑
+					<svg lucideTrash2 class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -64320,7 +64666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				(touchend)="onCloseTouch($event)"
 				[attr.aria-label]="'pptx.presenter.endPresentation' | translate"
 			>
-				&#x2715;
+				<svg lucideX class="h-5 w-5"></svg>
 			</button>
 			<!-- Edge navigation buttons (vertically centred, touch-friendly). -->
@@ -64332,7 +64678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				(touchend)="onPrevTouch($event)"
 				[attr.aria-label]="'pptx.presenter.previousSlide' | translate"
 			>
-				&#x2039;
+				<svg lucideChevronLeft class="h-6 w-6"></svg>
 			</button>
 			<button
 				type="button"
@@ -64342,11 +64688,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				(touchend)="onNextTouch($event)"
 				[attr.aria-label]="'pptx.presenter.nextSlide' | translate"
 			>
-				&#x203A;
+				<svg lucideChevronRight class="h-6 w-6"></svg>
 			</button>
 		</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: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"] }], annotationsExit: [{ type: i0.Output, args: ["annotationsExit"] }], stageRef: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], rootRef: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], onWindowResize: [{
+        }], 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"] }], annotationsExit: [{ type: i0.Output, args: ["annotationsExit"] }], stageRef: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], rootRef: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], onFullscreenChange: [{
+                type: HostListener,
+                args: ['document:fullscreenchange']
+            }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }], onKeyDown: [{
@@ -64667,7 +65016,7 @@ class PresenterViewComponent {
 		} @else {
 			<div class="pptx-ng-presenter-empty">{{ 'pptx.presenter.noSlides' | translate }}</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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], 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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PresenterViewComponent, decorators: [{
             type: Component,
@@ -66443,7 +66792,7 @@ class RibbonAnimationsSectionComponent {
 			[title]="'pptx.animations.previewTooltip' | translate"
 			(click)="present.emit()"
 		>
-			▶ {{ 'pptx.animations.preview' | translate }}
+			<svg lucidePlay class="h-4 w-4"></svg> {{ 'pptx.animations.preview' | translate }}
 		</button>
 		<span class="pptx-rb-sep"></span>
 		<!-- Add Animation dropdown (hover-reveal, mirrors React pattern) -->
@@ -66454,7 +66803,9 @@ class RibbonAnimationsSectionComponent {
 				[disabled]="!hasSel()"
 				[title]="'pptx.animations.addTooltip' | translate"
 			>
-				✨ {{ 'pptx.animations.addAnimation' | translate }} ▾
+				<svg lucideSparkles class="h-4 w-4"></svg>
+				{{ 'pptx.animations.addAnimation' | translate }}
+				<svg lucideChevronDown class="h-3 w-3"></svg>
 			</button>
 			<!-- Dropdown panel: shown on group hover -->
 			<div class="absolute left-0 top-full z-50 hidden w-44 pt-1 group-hover:block">
@@ -66522,7 +66873,7 @@ class RibbonAnimationsSectionComponent {
 			[title]="'pptx.animations.removeTooltip' | translate"
 			(click)="removeAnim()"
 		>
-			✕ {{ 'pptx.ribbon.removeAnimation' | translate }}
+			<svg lucideTrash2 class="h-4 w-4"></svg> {{ 'pptx.ribbon.removeAnimation' | translate }}
 		</button>
 		<span class="pptx-rb-sep"></span>
 		<!-- Animation Panel -->
@@ -66532,9 +66883,10 @@ class RibbonAnimationsSectionComponent {
 			[title]="'pptx.animations.openPanelTooltip' | translate"
 			(click)="toggleInspector.emit()"
 		>
-			▤ {{ 'pptx.animations.animationPanel' | translate }}
+			<svg lucidePanelRight class="h-4 w-4"></svg>
+			{{ 'pptx.animations.animationPanel' | translate }}
 		</button>
-	`, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: LucidePlay, selector: "svg[lucidePlay]" }, { kind: "component", type: LucideSparkles, selector: "svg[lucideSparkles], svg[lucideStars]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucidePanelRight, selector: "svg[lucidePanelRight]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonAnimationsSectionComponent, decorators: [{
             type: Component,
@@ -66543,7 +66895,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'contents' },
-                    imports: [TranslatePipe],
+                    imports: [
+                        TranslatePipe,
+                        LucidePlay,
+                        LucideSparkles,
+                        LucideChevronDown,
+                        LucideTrash2,
+                        LucidePanelRight,
+                    ],
                     template: `
 		<!-- Preview: plays presentation from this slide; no element-only preview API yet -->
 		<button
@@ -66553,7 +66912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			[title]="'pptx.animations.previewTooltip' | translate"
 			(click)="present.emit()"
 		>
-			▶ {{ 'pptx.animations.preview' | translate }}
+			<svg lucidePlay class="h-4 w-4"></svg> {{ 'pptx.animations.preview' | translate }}
 		</button>
 		<span class="pptx-rb-sep"></span>
 		<!-- Add Animation dropdown (hover-reveal, mirrors React pattern) -->
@@ -66564,7 +66923,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[disabled]="!hasSel()"
 				[title]="'pptx.animations.addTooltip' | translate"
 			>
-				✨ {{ 'pptx.animations.addAnimation' | translate }} ▾
+				<svg lucideSparkles class="h-4 w-4"></svg>
+				{{ 'pptx.animations.addAnimation' | translate }}
+				<svg lucideChevronDown class="h-3 w-3"></svg>
 			</button>
 			<!-- Dropdown panel: shown on group hover -->
 			<div class="absolute left-0 top-full z-50 hidden w-44 pt-1 group-hover:block">
@@ -66632,7 +66993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			[title]="'pptx.animations.removeTooltip' | translate"
 			(click)="removeAnim()"
 		>
-			✕ {{ 'pptx.ribbon.removeAnimation' | translate }}
+			<svg lucideTrash2 class="h-4 w-4"></svg> {{ 'pptx.ribbon.removeAnimation' | translate }}
 		</button>
 		<span class="pptx-rb-sep"></span>
 		<!-- Animation Panel -->
@@ -66642,7 +67003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			[title]="'pptx.animations.openPanelTooltip' | translate"
 			(click)="toggleInspector.emit()"
 		>
-			▤ {{ 'pptx.animations.animationPanel' | translate }}
+			<svg lucidePanelRight class="h-4 w-4"></svg>
+			{{ 'pptx.animations.animationPanel' | translate }}
 		</button>
 	`,
                 }]
@@ -66738,7 +67100,7 @@ class RibbonArrangeSectionComponent {
 				[title]="'pptx.ribbon.alignLeft' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'left')"
 			>
-				⇤
+				<svg lucideTextAlignStart class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -66747,7 +67109,7 @@ class RibbonArrangeSectionComponent {
 				[title]="'pptx.ribbon.alignCenter' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'centerH')"
 			>
-				⇔
+				<svg lucideTextAlignCenter class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -66756,7 +67118,7 @@ class RibbonArrangeSectionComponent {
 				[title]="'pptx.ribbon.alignRight' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'right')"
 			>
-				⇥
+				<svg lucideTextAlignEnd class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -66765,7 +67127,7 @@ class RibbonArrangeSectionComponent {
 				[title]="'pptx.ribbon.alignTop' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'top')"
 			>
-				⤒
+				<svg lucideChevronUp class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -66774,7 +67136,7 @@ class RibbonArrangeSectionComponent {
 				[title]="'pptx.ribbon.alignMiddle' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'middle')"
 			>
-				⇕
+				<svg lucideTextAlignCenter class="h-4 w-4 rotate-90"></svg>
 			</button>
 			<button
 				type="button"
@@ -66783,7 +67145,7 @@ class RibbonArrangeSectionComponent {
 				[title]="'pptx.ribbon.alignBottom' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'bottom')"
 			>
-				⤓
+				<svg lucideChevronDown class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<span class="pptx-rb-sep"></span>
@@ -66796,7 +67158,7 @@ class RibbonArrangeSectionComponent {
 				[title]="'pptx.ribbon.distributeHorizontally' | translate"
 				(click)="editor.distributeSelected(slideIndex(), 'horizontal')"
 			>
-				&#x2194; H
+				<svg lucideAlignHorizontalSpaceAround class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -66805,7 +67167,7 @@ class RibbonArrangeSectionComponent {
 				[title]="'pptx.ribbon.distributeVertically' | translate"
 				(click)="editor.distributeSelected(slideIndex(), 'vertical')"
 			>
-				&#x2195; V
+				<svg lucideAlignVerticalSpaceAround class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<span class="pptx-rb-sep"></span>
@@ -66912,7 +67274,7 @@ class RibbonArrangeSectionComponent {
 				{{ 'pptx.arrange.delete' | translate }}
 			</button>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideTextAlignStart, selector: "svg[lucideTextAlignStart], svg[lucideText], svg[lucideAlignLeft]" }, { kind: "component", type: LucideTextAlignCenter, selector: "svg[lucideTextAlignCenter], svg[lucideAlignCenter]" }, { kind: "component", type: LucideTextAlignEnd, selector: "svg[lucideTextAlignEnd], svg[lucideAlignRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideAlignHorizontalSpaceAround, selector: "svg[lucideAlignHorizontalSpaceAround]" }, { kind: "component", type: LucideAlignVerticalSpaceAround, selector: "svg[lucideAlignVerticalSpaceAround]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonArrangeSectionComponent, decorators: [{
             type: Component,
@@ -66921,7 +67283,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'contents' },
-                    imports: [NgClass, TranslatePipe],
+                    imports: [
+                        NgClass,
+                        TranslatePipe,
+                        LucideTextAlignStart,
+                        LucideTextAlignCenter,
+                        LucideTextAlignEnd,
+                        LucideChevronUp,
+                        LucideChevronDown,
+                        LucideAlignHorizontalSpaceAround,
+                        LucideAlignVerticalSpaceAround,
+                    ],
                     template: `
 		<!-- Order -->
 		<div class="pptx-rb-grp">
@@ -66972,7 +67344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.alignLeft' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'left')"
 			>
-				⇤
+				<svg lucideTextAlignStart class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -66981,7 +67353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.alignCenter' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'centerH')"
 			>
-				⇔
+				<svg lucideTextAlignCenter class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -66990,7 +67362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.alignRight' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'right')"
 			>
-				⇥
+				<svg lucideTextAlignEnd class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -66999,7 +67371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.alignTop' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'top')"
 			>
-				⤒
+				<svg lucideChevronUp class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -67008,7 +67380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.alignMiddle' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'middle')"
 			>
-				⇕
+				<svg lucideTextAlignCenter class="h-4 w-4 rotate-90"></svg>
 			</button>
 			<button
 				type="button"
@@ -67017,7 +67389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.alignBottom' | translate"
 				(click)="editor.alignSelected(slideIndex(), 'bottom')"
 			>
-				⤓
+				<svg lucideChevronDown class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<span class="pptx-rb-sep"></span>
@@ -67030,7 +67402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.distributeHorizontally' | translate"
 				(click)="editor.distributeSelected(slideIndex(), 'horizontal')"
 			>
-				&#x2194; H
+				<svg lucideAlignHorizontalSpaceAround class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -67039,7 +67411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.distributeVertically' | translate"
 				(click)="editor.distributeSelected(slideIndex(), 'vertical')"
 			>
-				&#x2195; V
+				<svg lucideAlignVerticalSpaceAround class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<span class="pptx-rb-sep"></span>
@@ -67260,11 +67632,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * {@link DrawToolState} the parent re-broadcasts as `drawToolChange`.
  */
 const DRAW_TOOLS = [
-    { id: 'select', labelKey: 'pptx.ribbon.tool.select', icon: '↖' },
-    { id: 'pen', labelKey: 'pptx.ribbon.tool.pen', icon: '✏' },
-    { id: 'highlighter', labelKey: 'pptx.ribbon.tool.highlighter', icon: 'Hl' },
-    { id: 'eraser', labelKey: 'pptx.ribbon.tool.eraser', icon: '⌫' },
-    { id: 'freeform', labelKey: 'pptx.ribbon.tool.freeform', icon: '∿' },
+    { id: 'select', labelKey: 'pptx.ribbon.tool.select' },
+    { id: 'pen', labelKey: 'pptx.ribbon.tool.pen' },
+    { id: 'highlighter', labelKey: 'pptx.ribbon.tool.highlighter' },
+    { id: 'eraser', labelKey: 'pptx.ribbon.tool.eraser' },
+    { id: 'freeform', labelKey: 'pptx.ribbon.tool.freeform' },
 ];
 class RibbonDrawSectionComponent {
     activeTool = input('select', /* @ts-ignore */
@@ -67304,7 +67676,23 @@ class RibbonDrawSectionComponent {
 					[title]="tool.labelKey | translate"
 					(click)="selectTool(tool.id)"
 				>
-					{{ tool.icon }}
+					@switch (tool.id) {
+						@case ('select') {
+							<svg lucideMoveRight class="h-4 w-4"></svg>
+						}
+						@case ('pen') {
+							<svg lucidePencil class="h-4 w-4"></svg>
+						}
+						@case ('highlighter') {
+							<svg lucideType class="h-4 w-4"></svg>
+						}
+						@case ('eraser') {
+							<svg lucideMinus class="h-4 w-4"></svg>
+						}
+						@case ('freeform') {
+							<svg lucideSpline class="h-4 w-4"></svg>
+						}
+					}
 				</button>
 			}
 		</div>
@@ -67338,7 +67726,7 @@ class RibbonDrawSectionComponent {
 			/>
 			<span class="w-4 text-right text-foreground">{{ drawingWidth() }}</span>
 		</label>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideMoveRight, selector: "svg[lucideMoveRight]" }, { kind: "component", type: LucidePencil, selector: "svg[lucidePencil]" }, { kind: "component", type: LucideType, selector: "svg[lucideType]" }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucideSpline, selector: "svg[lucideSpline]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonDrawSectionComponent, decorators: [{
             type: Component,
@@ -67347,7 +67735,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'contents' },
-                    imports: [NgClass, TranslatePipe],
+                    imports: [
+                        NgClass,
+                        TranslatePipe,
+                        LucideMoveRight,
+                        LucidePencil,
+                        LucideType,
+                        LucideMinus,
+                        LucideSpline,
+                    ],
                     template: `
 		<!--
 			Draw tool state is held in the parent ribbon and pushed up via
@@ -67365,7 +67761,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[title]="tool.labelKey | translate"
 					(click)="selectTool(tool.id)"
 				>
-					{{ tool.icon }}
+					@switch (tool.id) {
+						@case ('select') {
+							<svg lucideMoveRight class="h-4 w-4"></svg>
+						}
+						@case ('pen') {
+							<svg lucidePencil class="h-4 w-4"></svg>
+						}
+						@case ('highlighter') {
+							<svg lucideType class="h-4 w-4"></svg>
+						}
+						@case ('eraser') {
+							<svg lucideMinus class="h-4 w-4"></svg>
+						}
+						@case ('freeform') {
+							<svg lucideSpline class="h-4 w-4"></svg>
+						}
+					}
 				</button>
 			}
 		</div>
@@ -67452,12 +67864,12 @@ class RibbonDrawingGroupComponent {
 				<div class="relative">
 					<button
 						type="button"
-						class="pptx-rb-gb"
+						class="pptx-rb-gb gap-1.5"
 						[disabled]="!canEdit()"
 						[title]="'pptx.ribbon.shapes' | translate"
 						(click)="shapesOpen.set(!shapesOpen())"
 					>
-						{{ 'pptx.ribbon.shapes' | translate }} ▾
+						{{ 'pptx.ribbon.shapes' | translate }} <svg lucideChevronDown class="h-3 w-3"></svg>
 					</button>
 					@if (shapesOpen()) {
 						<div
@@ -67479,12 +67891,12 @@ class RibbonDrawingGroupComponent {
 				<div class="relative">
 					<button
 						type="button"
-						class="pptx-rb-gb"
+						class="pptx-rb-gb gap-1.5"
 						[disabled]="!canEdit()"
 						[title]="'pptx.arrange.arrange' | translate"
 						(click)="arrangeOpen.set(!arrangeOpen())"
 					>
-						{{ 'pptx.arrange.arrange' | translate }} ▾
+						{{ 'pptx.arrange.arrange' | translate }} <svg lucideChevronDown class="h-3 w-3"></svg>
 					</button>
 					@if (arrangeOpen()) {
 						<div
@@ -67544,7 +67956,7 @@ class RibbonDrawingGroupComponent {
 				{{ 'pptx.ribbon.shapeStyles' | translate }}
 			</span>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonDrawingGroupComponent, decorators: [{
             type: Component,
@@ -67553,7 +67965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'contents' },
-                    imports: [TranslatePipe],
+                    imports: [TranslatePipe, LucideChevronDown],
                     template: `
 		<!-- Shapes -->
 		<div class="flex flex-col items-center gap-0.5">
@@ -67561,12 +67973,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				<div class="relative">
 					<button
 						type="button"
-						class="pptx-rb-gb"
+						class="pptx-rb-gb gap-1.5"
 						[disabled]="!canEdit()"
 						[title]="'pptx.ribbon.shapes' | translate"
 						(click)="shapesOpen.set(!shapesOpen())"
 					>
-						{{ 'pptx.ribbon.shapes' | translate }} ▾
+						{{ 'pptx.ribbon.shapes' | translate }} <svg lucideChevronDown class="h-3 w-3"></svg>
 					</button>
 					@if (shapesOpen()) {
 						<div
@@ -67588,12 +68000,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				<div class="relative">
 					<button
 						type="button"
-						class="pptx-rb-gb"
+						class="pptx-rb-gb gap-1.5"
 						[disabled]="!canEdit()"
 						[title]="'pptx.arrange.arrange' | translate"
 						(click)="arrangeOpen.set(!arrangeOpen())"
 					>
-						{{ 'pptx.arrange.arrange' | translate }} ▾
+						{{ 'pptx.arrange.arrange' | translate }} <svg lucideChevronDown class="h-3 w-3"></svg>
 					</button>
 					@if (arrangeOpen()) {
 						<div
@@ -68208,7 +68620,7 @@ class RibbonFontControlsComponent {
 				[title]="'pptx.ribbon.growFont' | translate"
 				(click)="stepFontSize(1)"
 			>
-				A▴
+				<svg lucideAArrowUp class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68217,7 +68629,7 @@ class RibbonFontControlsComponent {
 				[title]="'pptx.ribbon.shrinkFont' | translate"
 				(click)="stepFontSize(-1)"
 			>
-				A▾
+				<svg lucideAArrowDown class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68226,7 +68638,7 @@ class RibbonFontControlsComponent {
 				[title]="'pptx.ribbon.clearFormatting' | translate"
 				(click)="clearFormatting()"
 			>
-				⌫
+				<svg lucideRemoveFormatting class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<div class="pptx-rb-grp">
@@ -68337,9 +68749,9 @@ class RibbonFontControlsComponent {
 			swatchAriaKey="pptx.ribbon.highlightColourValue"
 			(pick)="setHighlight($event)"
 		>
-			<span class="font-bold">🖍</span>
+			<svg lucideHighlighter class="h-3.5 w-3.5"></svg>
 		</pptx-ribbon-color-popover>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RibbonColorPopoverComponent, selector: "pptx-ribbon-color-popover", inputs: ["current", "presets", "disabled", "titleKey", "swatchAriaKey"], outputs: ["pick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RibbonColorPopoverComponent, selector: "pptx-ribbon-color-popover", inputs: ["current", "presets", "disabled", "titleKey", "swatchAriaKey"], outputs: ["pick"] }, { kind: "component", type: LucideAArrowUp, selector: "svg[lucideAArrowUp]" }, { kind: "component", type: LucideAArrowDown, selector: "svg[lucideAArrowDown]" }, { kind: "component", type: LucideRemoveFormatting, selector: "svg[lucideRemoveFormatting]" }, { kind: "component", type: LucideHighlighter, selector: "svg[lucideHighlighter]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonFontControlsComponent, decorators: [{
             type: Component,
@@ -68348,7 +68760,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'contents' },
-                    imports: [NgClass, TranslatePipe, RibbonColorPopoverComponent],
+                    imports: [
+                        NgClass,
+                        TranslatePipe,
+                        RibbonColorPopoverComponent,
+                        LucideAArrowUp,
+                        LucideAArrowDown,
+                        LucideRemoveFormatting,
+                        LucideHighlighter,
+                    ],
                     template: `
 		<div class="flex items-center gap-1">
 			<select
@@ -68380,7 +68800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.growFont' | translate"
 				(click)="stepFontSize(1)"
 			>
-				A▴
+				<svg lucideAArrowUp class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68389,7 +68809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.shrinkFont' | translate"
 				(click)="stepFontSize(-1)"
 			>
-				A▾
+				<svg lucideAArrowDown class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68398,7 +68818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.clearFormatting' | translate"
 				(click)="clearFormatting()"
 			>
-				⌫
+				<svg lucideRemoveFormatting class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<div class="pptx-rb-grp">
@@ -68509,7 +68929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			swatchAriaKey="pptx.ribbon.highlightColourValue"
 			(pick)="setHighlight($event)"
 		>
-			<span class="font-bold">🖍</span>
+			<svg lucideHighlighter class="h-3.5 w-3.5"></svg>
 		</pptx-ribbon-color-popover>
 	`,
                 }]
@@ -68672,7 +69092,7 @@ class RibbonParagraphControlsComponent {
 				[title]="'pptx.ribbon.bulletList' | translate"
 				(click)="toggleList('bullet')"
 			>
-				•≡
+				<svg lucideList class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68682,7 +69102,7 @@ class RibbonParagraphControlsComponent {
 				[title]="'pptx.notes.numberedList' | translate"
 				(click)="toggleList('numbered')"
 			>
-				1.≡
+				<svg lucideListOrdered class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<!-- Indent: outdent + indent -->
@@ -68694,7 +69114,7 @@ class RibbonParagraphControlsComponent {
 				[title]="'pptx.notes.outdent' | translate"
 				(click)="changeIndent(-24)"
 			>
-				⇤
+				<svg lucideListIndentDecrease class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68703,7 +69123,7 @@ class RibbonParagraphControlsComponent {
 				[title]="'pptx.notes.indent' | translate"
 				(click)="changeIndent(24)"
 			>
-				⇥
+				<svg lucideListIndentIncrease class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<!-- Alignment -->
@@ -68716,7 +69136,7 @@ class RibbonParagraphControlsComponent {
 				[title]="'pptx.ribbon.alignLeft' | translate"
 				(click)="setAlign('left')"
 			>
-				⯇
+				<svg lucideTextAlignStart class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68726,7 +69146,7 @@ class RibbonParagraphControlsComponent {
 				[title]="'pptx.ribbon.alignCenter' | translate"
 				(click)="setAlign('center')"
 			>
-				≡
+				<svg lucideTextAlignCenter class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68736,7 +69156,7 @@ class RibbonParagraphControlsComponent {
 				[title]="'pptx.ribbon.alignRight' | translate"
 				(click)="setAlign('right')"
 			>
-				⯈
+				<svg lucideTextAlignEnd class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68746,7 +69166,7 @@ class RibbonParagraphControlsComponent {
 				[title]="'pptx.ribbon.justify' | translate"
 				(click)="setAlign('justify')"
 			>
-				☰
+				<svg lucideTextAlignJustify class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<!-- Line Spacing -->
@@ -68784,7 +69204,7 @@ class RibbonParagraphControlsComponent {
 				<option [value]="c" [selected]="c === curColumns()">{{ c }}</option>
 			}
 		</select>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideList, selector: "svg[lucideList]" }, { kind: "component", type: LucideListOrdered, selector: "svg[lucideListOrdered]" }, { kind: "component", type: LucideListIndentDecrease, selector: "svg[lucideListIndentDecrease], svg[lucideOutdent], svg[lucideIndentDecrease]" }, { kind: "component", type: LucideListIndentIncrease, selector: "svg[lucideListIndentIncrease], svg[lucideIndent], svg[lucideIndentIncrease]" }, { kind: "component", type: LucideTextAlignStart, selector: "svg[lucideTextAlignStart], svg[lucideText], svg[lucideAlignLeft]" }, { kind: "component", type: LucideTextAlignCenter, selector: "svg[lucideTextAlignCenter], svg[lucideAlignCenter]" }, { kind: "component", type: LucideTextAlignEnd, selector: "svg[lucideTextAlignEnd], svg[lucideAlignRight]" }, { kind: "component", type: LucideTextAlignJustify, selector: "svg[lucideTextAlignJustify], svg[lucideAlignJustify]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonParagraphControlsComponent, decorators: [{
             type: Component,
@@ -68793,7 +69213,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'contents' },
-                    imports: [NgClass, TranslatePipe],
+                    imports: [
+                        NgClass,
+                        TranslatePipe,
+                        LucideList,
+                        LucideListOrdered,
+                        LucideListIndentDecrease,
+                        LucideListIndentIncrease,
+                        LucideTextAlignStart,
+                        LucideTextAlignCenter,
+                        LucideTextAlignEnd,
+                        LucideTextAlignJustify,
+                    ],
                     template: `
 		<!-- List style: bullets + numbering -->
 		<div class="pptx-rb-grp">
@@ -68805,7 +69236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.bulletList' | translate"
 				(click)="toggleList('bullet')"
 			>
-				•≡
+				<svg lucideList class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68815,7 +69246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.notes.numberedList' | translate"
 				(click)="toggleList('numbered')"
 			>
-				1.≡
+				<svg lucideListOrdered class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<!-- Indent: outdent + indent -->
@@ -68827,7 +69258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.notes.outdent' | translate"
 				(click)="changeIndent(-24)"
 			>
-				⇤
+				<svg lucideListIndentDecrease class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68836,7 +69267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.notes.indent' | translate"
 				(click)="changeIndent(24)"
 			>
-				⇥
+				<svg lucideListIndentIncrease class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<!-- Alignment -->
@@ -68849,7 +69280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.alignLeft' | translate"
 				(click)="setAlign('left')"
 			>
-				⯇
+				<svg lucideTextAlignStart class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68859,7 +69290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.alignCenter' | translate"
 				(click)="setAlign('center')"
 			>
-				≡
+				<svg lucideTextAlignCenter class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68869,7 +69300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.alignRight' | translate"
 				(click)="setAlign('right')"
 			>
-				⯈
+				<svg lucideTextAlignEnd class="h-4 w-4"></svg>
 			</button>
 			<button
 				type="button"
@@ -68879,7 +69310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[title]="'pptx.ribbon.justify' | translate"
 				(click)="setAlign('justify')"
 			>
-				☰
+				<svg lucideTextAlignJustify class="h-4 w-4"></svg>
 			</button>
 		</div>
 		<!-- Line Spacing -->
@@ -69011,11 +69442,11 @@ class RibbonHomeSectionComponent {
 			<div class="pptx-rb-grp">
 				<button
 					type="button"
-					class="pptx-rb-gb"
+					class="pptx-rb-gb gap-1.5"
 					[title]="'pptx.ribbon.newSlide' | translate"
 					(click)="editor.addSlide(slideIndex())"
 				>
-					＋ {{ 'pptx.ribbon.slide' | translate }}
+					<svg lucidePlus class="h-4 w-4"></svg> {{ 'pptx.ribbon.slide' | translate }}
 				</button>
 				<button
 					type="button"
@@ -69091,7 +69522,7 @@ class RibbonHomeSectionComponent {
 				{{ 'pptx.ribbon.editing' | translate }}
 			</span>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RibbonFontControlsComponent, selector: "pptx-ribbon-font-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonParagraphControlsComponent, selector: "pptx-ribbon-paragraph-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonEditingSectionComponent, selector: "pptx-ribbon-editing-section", outputs: ["toggleFindReplace", "selectAll"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: RibbonFontControlsComponent, selector: "pptx-ribbon-font-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonParagraphControlsComponent, selector: "pptx-ribbon-paragraph-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonEditingSectionComponent, selector: "pptx-ribbon-editing-section", outputs: ["toggleFindReplace", "selectAll"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonHomeSectionComponent, decorators: [{
             type: Component,
@@ -69103,6 +69534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     imports: [
                         NgClass,
                         TranslatePipe,
+                        LucidePlus,
                         RibbonFontControlsComponent,
                         RibbonParagraphControlsComponent,
                         RibbonEditingSectionComponent,
@@ -69160,11 +69592,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			<div class="pptx-rb-grp">
 				<button
 					type="button"
-					class="pptx-rb-gb"
+					class="pptx-rb-gb gap-1.5"
 					[title]="'pptx.ribbon.newSlide' | translate"
 					(click)="editor.addSlide(slideIndex())"
 				>
-					＋ {{ 'pptx.ribbon.slide' | translate }}
+					<svg lucidePlus class="h-4 w-4"></svg> {{ 'pptx.ribbon.slide' | translate }}
 				</button>
 				<button
 					type="button"
@@ -69422,7 +69854,7 @@ class RibbonInsertFieldsComponent {
 					<rect x="3" y="3" width="18" height="18" rx="2" />
 					<path d="M13 7l4 5-4 5" />
 				</svg>
-				{{ 'pptx.ribbon.action' | translate }} ▾
+				{{ 'pptx.ribbon.action' | translate }} <svg lucideChevronDown class="h-3 w-3"></svg>
 			</button>
 			<div class="absolute left-0 top-full z-50 hidden w-44 pt-1 group-hover:block">
 				<div class="rounded-lg border border-border bg-card py-1 shadow-2xl">
@@ -69466,7 +69898,7 @@ class RibbonInsertFieldsComponent {
 					<path d="M4 7h16M4 12h10M4 17h12" />
 					<circle cx="19" cy="15" r="3" />
 				</svg>
-				{{ 'pptx.field.field' | translate }} ▾
+				{{ 'pptx.field.field' | translate }} <svg lucideChevronDown class="h-3 w-3"></svg>
 			</button>
 			<div class="absolute left-0 top-full z-50 hidden w-44 pt-1 group-hover:block">
 				<div class="rounded-lg border border-border bg-card py-1 shadow-2xl">
@@ -69553,7 +69985,7 @@ class RibbonInsertFieldsComponent {
 				</div>
 			</div>
 		}
-	`, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonInsertFieldsComponent, decorators: [{
             type: Component,
@@ -69562,7 +69994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'contents' },
-                    imports: [TranslatePipe],
+                    imports: [TranslatePipe, LucideChevronDown],
                     template: `
 		<!-- Action Buttons dropdown (hover-reveal, mirrors React/Vue) -->
 		<div class="group relative">
@@ -69583,7 +70015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					<rect x="3" y="3" width="18" height="18" rx="2" />
 					<path d="M13 7l4 5-4 5" />
 				</svg>
-				{{ 'pptx.ribbon.action' | translate }} ▾
+				{{ 'pptx.ribbon.action' | translate }} <svg lucideChevronDown class="h-3 w-3"></svg>
 			</button>
 			<div class="absolute left-0 top-full z-50 hidden w-44 pt-1 group-hover:block">
 				<div class="rounded-lg border border-border bg-card py-1 shadow-2xl">
@@ -69627,7 +70059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					<path d="M4 7h16M4 12h10M4 17h12" />
 					<circle cx="19" cy="15" r="3" />
 				</svg>
-				{{ 'pptx.field.field' | translate }} ▾
+				{{ 'pptx.field.field' | translate }} <svg lucideChevronDown class="h-3 w-3"></svg>
 			</button>
 			<div class="absolute left-0 top-full z-50 hidden w-44 pt-1 group-hover:block">
 				<div class="rounded-lg border border-border bg-card py-1 shadow-2xl">
@@ -69854,43 +70286,43 @@ class RibbonInsertSectionComponent {
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertShape('rect')"
 				[title]="'pptx.ribbon.rectangle' | translate"
 			>
-				▭ {{ 'pptx.ribbon.rect' | translate }}
+				<svg lucideSquare class="h-4 w-4"></svg> {{ 'pptx.ribbon.rect' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertShape('ellipse')"
 				[title]="'pptx.ribbon.ellipse' | translate"
 			>
-				◯ {{ 'pptx.ribbon.ellipse' | translate }}
+				<svg lucideCircle class="h-4 w-4"></svg> {{ 'pptx.ribbon.ellipse' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertShape('line')"
 				[title]="'pptx.ribbon.line' | translate"
 			>
-				／ {{ 'pptx.ribbon.line' | translate }}
+				<svg lucideSlash class="h-4 w-4"></svg> {{ 'pptx.ribbon.line' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertImage()"
 				[title]="'pptx.ribbon.insertImage' | translate"
 			>
-				🖼 {{ 'pptx.ribbon.image' | translate }}
+				<svg lucideImage class="h-4 w-4"></svg> {{ 'pptx.ribbon.image' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gl"
+				class="pptx-rb-gl gap-1.5"
 				(click)="insertMedia()"
 				[title]="'pptx.ribbon.insertMedia' | translate"
 			>
-				🎬 {{ 'pptx.ribbon.media' | translate }}
+				<svg lucideVideo class="h-4 w-4"></svg> {{ 'pptx.ribbon.media' | translate }}
 			</button>
 		</div>
 		<span class="pptx-rb-sep"></span>
@@ -69898,19 +70330,19 @@ class RibbonInsertSectionComponent {
 		<div class="pptx-rb-grp">
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertTable()"
 				[title]="'pptx.ribbon.insertTable' | translate"
 			>
-				⊞ {{ 'pptx.ribbon.table' | translate }}
+				<svg lucideDatabase class="h-4 w-4"></svg> {{ 'pptx.ribbon.table' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="openSmartArtDialog.emit()"
 				[title]="'pptx.ribbon.insertSmartArt' | translate"
 			>
-				◈ {{ 'pptx.ribbon.smartArt' | translate }}
+				<svg lucideLayers class="h-4 w-4"></svg> {{ 'pptx.ribbon.smartArt' | translate }}
 			</button>
 			<select
 				class="pptx-rb-gl"
@@ -69924,25 +70356,50 @@ class RibbonInsertSectionComponent {
 			</select>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertChart()"
 				[title]="'pptx.ribbon.insertChart' | translate"
 			>
-				▥ {{ 'pptx.ribbon.chart' | translate }}
+				<svg
+					class="h-4 w-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M3 3v18h18" />
+					<rect x="7" y="11" width="3" height="6" />
+					<rect x="12" y="7" width="3" height="10" />
+					<rect x="17" y="13" width="3" height="4" />
+				</svg>
+				{{ 'pptx.ribbon.chart' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gl"
+				class="pptx-rb-gl gap-1.5"
 				(click)="openEquationDialog.emit()"
 				[title]="'pptx.ribbon.insertEquation' | translate"
 			>
-				∑ {{ 'pptx.ribbon.equation' | translate }}
+				<svg
+					class="h-4 w-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M4 17h6M7 14v6M14 7l4.5 10M15.5 14h5" />
+				</svg>
+				{{ 'pptx.ribbon.equation' | translate }}
 			</button>
 		</div>
 		<span class="pptx-rb-sep"></span>
 		<!-- Action button + Field dropdowns -->
 		<pptx-ribbon-insert-fields [slideIndex]="slideIndex()" />
-	`, isInline: true, dependencies: [{ kind: "component", type: RibbonInsertFieldsComponent, selector: "pptx-ribbon-insert-fields", inputs: ["slideIndex"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: RibbonInsertFieldsComponent, selector: "pptx-ribbon-insert-fields", inputs: ["slideIndex"] }, { kind: "component", type: LucideSquare, selector: "svg[lucideSquare]" }, { kind: "component", type: LucideCircle, selector: "svg[lucideCircle]" }, { kind: "component", type: LucideSlash, selector: "svg[lucideSlash]" }, { kind: "component", type: LucideImage, selector: "svg[lucideImage]" }, { kind: "component", type: LucideVideo, selector: "svg[lucideVideo]" }, { kind: "component", type: LucideDatabase, selector: "svg[lucideDatabase]" }, { kind: "component", type: LucideLayers, selector: "svg[lucideLayers], svg[lucideLayers3]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonInsertSectionComponent, decorators: [{
             type: Component,
@@ -69951,7 +70408,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'contents' },
-                    imports: [TranslatePipe, RibbonInsertFieldsComponent],
+                    imports: [
+                        TranslatePipe,
+                        RibbonInsertFieldsComponent,
+                        LucideSquare,
+                        LucideCircle,
+                        LucideSlash,
+                        LucideImage,
+                        LucideVideo,
+                        LucideDatabase,
+                        LucideLayers,
+                    ],
                     template: `
 		<!-- Shapes group -->
 		<div class="pptx-rb-grp">
@@ -69965,43 +70432,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertShape('rect')"
 				[title]="'pptx.ribbon.rectangle' | translate"
 			>
-				▭ {{ 'pptx.ribbon.rect' | translate }}
+				<svg lucideSquare class="h-4 w-4"></svg> {{ 'pptx.ribbon.rect' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertShape('ellipse')"
 				[title]="'pptx.ribbon.ellipse' | translate"
 			>
-				◯ {{ 'pptx.ribbon.ellipse' | translate }}
+				<svg lucideCircle class="h-4 w-4"></svg> {{ 'pptx.ribbon.ellipse' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertShape('line')"
 				[title]="'pptx.ribbon.line' | translate"
 			>
-				／ {{ 'pptx.ribbon.line' | translate }}
+				<svg lucideSlash class="h-4 w-4"></svg> {{ 'pptx.ribbon.line' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertImage()"
 				[title]="'pptx.ribbon.insertImage' | translate"
 			>
-				🖼 {{ 'pptx.ribbon.image' | translate }}
+				<svg lucideImage class="h-4 w-4"></svg> {{ 'pptx.ribbon.image' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gl"
+				class="pptx-rb-gl gap-1.5"
 				(click)="insertMedia()"
 				[title]="'pptx.ribbon.insertMedia' | translate"
 			>
-				🎬 {{ 'pptx.ribbon.media' | translate }}
+				<svg lucideVideo class="h-4 w-4"></svg> {{ 'pptx.ribbon.media' | translate }}
 			</button>
 		</div>
 		<span class="pptx-rb-sep"></span>
@@ -70009,19 +70476,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 		<div class="pptx-rb-grp">
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertTable()"
 				[title]="'pptx.ribbon.insertTable' | translate"
 			>
-				⊞ {{ 'pptx.ribbon.table' | translate }}
+				<svg lucideDatabase class="h-4 w-4"></svg> {{ 'pptx.ribbon.table' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="openSmartArtDialog.emit()"
 				[title]="'pptx.ribbon.insertSmartArt' | translate"
 			>
-				◈ {{ 'pptx.ribbon.smartArt' | translate }}
+				<svg lucideLayers class="h-4 w-4"></svg> {{ 'pptx.ribbon.smartArt' | translate }}
 			</button>
 			<select
 				class="pptx-rb-gl"
@@ -70035,19 +70502,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			</select>
 			<button
 				type="button"
-				class="pptx-rb-gb"
+				class="pptx-rb-gb gap-1.5"
 				(click)="insertChart()"
 				[title]="'pptx.ribbon.insertChart' | translate"
 			>
-				▥ {{ 'pptx.ribbon.chart' | translate }}
+				<svg
+					class="h-4 w-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M3 3v18h18" />
+					<rect x="7" y="11" width="3" height="6" />
+					<rect x="12" y="7" width="3" height="10" />
+					<rect x="17" y="13" width="3" height="4" />
+				</svg>
+				{{ 'pptx.ribbon.chart' | translate }}
 			</button>
 			<button
 				type="button"
-				class="pptx-rb-gl"
+				class="pptx-rb-gl gap-1.5"
 				(click)="openEquationDialog.emit()"
 				[title]="'pptx.ribbon.insertEquation' | translate"
 			>
-				∑ {{ 'pptx.ribbon.equation' | translate }}
+				<svg
+					class="h-4 w-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M4 17h6M7 14v6M14 7l4.5 10M15.5 14h5" />
+				</svg>
+				{{ 'pptx.ribbon.equation' | translate }}
 			</button>
 		</div>
 		<span class="pptx-rb-sep"></span>
@@ -70158,7 +70650,7 @@ class RibbonPrimaryRowComponent {
 				[attr.aria-label]="'pptx.toolbar.toggleSlidesPanel' | translate"
 				(click)="toggleSidebar.emit()"
 			>
-				⫐
+				<svg lucidePanelLeft class="h-4 w-4"></svg>
 			</button>
 			<!-- Center spacer -->
@@ -70173,7 +70665,7 @@ class RibbonPrimaryRowComponent {
 				[attr.aria-label]="'pptx.toolbar.comments' | translate"
 				(click)="toggleComments.emit()"
 			>
-				💬
+				<svg lucideMessageSquare class="h-3.5 w-3.5"></svg>
 				@if (commentCount() > 0) {
 					<span
 						class="absolute -right-0.5 -top-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-primary text-[8px] leading-none text-white"
@@ -70190,7 +70682,7 @@ class RibbonPrimaryRowComponent {
 					[disabled]="slideCount() === 0"
 					(click)="present.emit()"
 				>
-					▶ {{ 'pptx.toolbar.present' | translate }}
+					<svg lucidePlay class="h-3.5 w-3.5"></svg> {{ 'pptx.toolbar.present' | translate }}
 				</button>
 				<button
 					type="button"
@@ -70200,7 +70692,7 @@ class RibbonPrimaryRowComponent {
 					[attr.aria-label]="'pptx.ribbon.slideShowOptions' | translate"
 					(click)="presentMenuOpen.set(!presentMenuOpen())"
 				>
-					▾
+					<svg lucideChevronDown class="h-3 w-3"></svg>
 				</button>
 				@if (presentMenuOpen()) {
 					<div class="absolute right-0 top-full z-50 w-48 pt-1">
@@ -70240,7 +70732,7 @@ class RibbonPrimaryRowComponent {
 				[attr.aria-label]="'pptx.ribbon.customShows' | translate"
 				(click)="openCustomShows.emit()"
 			>
-				＋ {{ 'pptx.ribbon.show' | translate }}
+				<svg lucidePlus class="h-3.5 w-3.5"></svg> {{ 'pptx.ribbon.show' | translate }}
 			</button>
 			<span class="mx-1 h-5 w-px self-center bg-border/50"></span>
@@ -70253,7 +70745,7 @@ class RibbonPrimaryRowComponent {
 				[attr.aria-label]="'pptx.toolbar.toggleInspector' | translate"
 				(click)="toggleInspector.emit()"
 			>
-				⫏
+				<svg lucidePanelRight class="h-4 w-4"></svg>
 			</button>
 			<!-- Overflow menu -->
@@ -70266,7 +70758,7 @@ class RibbonPrimaryRowComponent {
 					[attr.aria-label]="'pptx.ribbon.moreActions' | translate"
 					(click)="overflowOpen.set(!overflowOpen())"
 				>
-					⋯
+					<svg lucideEllipsis class="h-3.5 w-3.5"></svg>
 				</button>
 				@if (overflowOpen()) {
 					<div class="absolute right-0 top-full z-50 w-52 pt-1">
@@ -70290,7 +70782,7 @@ class RibbonPrimaryRowComponent {
 				}
 			</div>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucidePanelLeft, selector: "svg[lucidePanelLeft], svg[lucideSidebar]" }, { kind: "component", type: LucidePanelRight, selector: "svg[lucidePanelRight]" }, { kind: "component", type: LucideMessageSquare, selector: "svg[lucideMessageSquare]" }, { kind: "component", type: LucidePlay, selector: "svg[lucidePlay]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonPrimaryRowComponent, decorators: [{
             type: Component,
@@ -70298,7 +70790,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: 'pptx-ribbon-primary-row',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, TranslatePipe],
+                    imports: [
+                        NgClass,
+                        TranslatePipe,
+                        LucidePanelLeft,
+                        LucidePanelRight,
+                        LucideMessageSquare,
+                        LucidePlay,
+                        LucideChevronDown,
+                        LucidePlus,
+                        LucideEllipsis,
+                    ],
                     template: `
 		<div class="flex items-center gap-0.5 px-1.5 py-0.5">
 			<!-- Left: slides pane toggle (undo/redo/find moved to the title bar) -->
@@ -70310,7 +70812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[attr.aria-label]="'pptx.toolbar.toggleSlidesPanel' | translate"
 				(click)="toggleSidebar.emit()"
 			>
-				⫐
+				<svg lucidePanelLeft class="h-4 w-4"></svg>
 			</button>
 			<!-- Center spacer -->
@@ -70325,7 +70827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[attr.aria-label]="'pptx.toolbar.comments' | translate"
 				(click)="toggleComments.emit()"
 			>
-				💬
+				<svg lucideMessageSquare class="h-3.5 w-3.5"></svg>
 				@if (commentCount() > 0) {
 					<span
 						class="absolute -right-0.5 -top-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-primary text-[8px] leading-none text-white"
@@ -70342,7 +70844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[disabled]="slideCount() === 0"
 					(click)="present.emit()"
 				>
-					▶ {{ 'pptx.toolbar.present' | translate }}
+					<svg lucidePlay class="h-3.5 w-3.5"></svg> {{ 'pptx.toolbar.present' | translate }}
 				</button>
 				<button
 					type="button"
@@ -70352,7 +70854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.ribbon.slideShowOptions' | translate"
 					(click)="presentMenuOpen.set(!presentMenuOpen())"
 				>
-					▾
+					<svg lucideChevronDown class="h-3 w-3"></svg>
 				</button>
 				@if (presentMenuOpen()) {
 					<div class="absolute right-0 top-full z-50 w-48 pt-1">
@@ -70392,7 +70894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[attr.aria-label]="'pptx.ribbon.customShows' | translate"
 				(click)="openCustomShows.emit()"
 			>
-				＋ {{ 'pptx.ribbon.show' | translate }}
+				<svg lucidePlus class="h-3.5 w-3.5"></svg> {{ 'pptx.ribbon.show' | translate }}
 			</button>
 			<span class="mx-1 h-5 w-px self-center bg-border/50"></span>
@@ -70405,7 +70907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[attr.aria-label]="'pptx.toolbar.toggleInspector' | translate"
 				(click)="toggleInspector.emit()"
 			>
-				⫏
+				<svg lucidePanelRight class="h-4 w-4"></svg>
 			</button>
 			<!-- Overflow menu -->
@@ -70418,7 +70920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.ribbon.moreActions' | translate"
 					(click)="overflowOpen.set(!overflowOpen())"
 				>
-					⋯
+					<svg lucideEllipsis class="h-3.5 w-3.5"></svg>
 				</button>
 				@if (overflowOpen()) {
 					<div class="absolute right-0 top-full z-50 w-52 pt-1">
@@ -70737,7 +71239,7 @@ class RibbonTransitionsSectionComponent {
 			[title]="'pptx.ribbon.previewTransition' | translate"
 			(click)="present.emit()"
 		>
-			▶ {{ 'pptx.ribbon.preview' | translate }}
+			<svg lucidePlay class="h-4 w-4"></svg> {{ 'pptx.ribbon.preview' | translate }}
 		</button>
 		<span class="pptx-rb-sep"></span>
 		<!-- Preset gallery -->
@@ -70833,9 +71335,9 @@ class RibbonTransitionsSectionComponent {
 			[title]="'pptx.ribbon.openInspectorTransitions' | translate"
 			(click)="toggleInspector.emit()"
 		>
-			▤ {{ 'pptx.ribbon.inspector' | translate }}
+			<svg lucidePanelRight class="h-4 w-4"></svg> {{ 'pptx.ribbon.inspector' | translate }}
 		</button>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucidePlay, selector: "svg[lucidePlay]" }, { kind: "component", type: LucidePanelRight, selector: "svg[lucidePanelRight]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonTransitionsSectionComponent, decorators: [{
             type: Component,
@@ -70844,7 +71346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'contents' },
-                    imports: [NgClass, TranslatePipe],
+                    imports: [NgClass, TranslatePipe, LucidePlay, LucidePanelRight],
                     template: `
 		<!-- Preview (fires existing presentation present path; no separate preview API yet) -->
 		<button
@@ -70853,7 +71355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			[title]="'pptx.ribbon.previewTransition' | translate"
 			(click)="present.emit()"
 		>
-			▶ {{ 'pptx.ribbon.preview' | translate }}
+			<svg lucidePlay class="h-4 w-4"></svg> {{ 'pptx.ribbon.preview' | translate }}
 		</button>
 		<span class="pptx-rb-sep"></span>
 		<!-- Preset gallery -->
@@ -70949,7 +71451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			[title]="'pptx.ribbon.openInspectorTransitions' | translate"
 			(click)="toggleInspector.emit()"
 		>
-			▤ {{ 'pptx.ribbon.inspector' | translate }}
+			<svg lucidePanelRight class="h-4 w-4"></svg> {{ 'pptx.ribbon.inspector' | translate }}
 		</button>
 	`,
                 }]
@@ -71431,24 +71933,28 @@ class RibbonComponent {
 			<!-- ── Tab bar ───────────────────────────────────────────────────── -->
 			<div class="flex items-center border-b border-border/60 px-1">
-				@for (t of tabs; track t.id) {
-					<button
-						type="button"
-						(click)="activeTab.set(t.id)"
-						class="relative whitespace-nowrap px-3.5 py-2 text-[12px] font-medium transition-colors"
-						[ngClass]="
-							activeTab() === t.id
-								? 'text-foreground after:absolute after:-bottom-px after:left-0 after:right-0 after:h-[2.5px] after:bg-primary'
-								: 'text-muted-foreground hover:bg-accent/30 hover:text-foreground'
-						"
-					>
-						{{ t.labelKey | translate }}
-					</button>
-				}
-				<div class="flex-1"></div>
+				<!-- Scrollable tab strip: on narrow widths the tabs scroll instead of
+				     clipping (mirrors React's max-md:overflow-x-auto scrollbar-none),
+				     while the Record/Share actions and collapse toggle stay pinned. -->
+				<div class="flex min-w-0 flex-1 items-center overflow-x-auto pptx-scrollbar-none">
+					@for (t of tabs; track t.id) {
+						<button
+							type="button"
+							(click)="activeTab.set(t.id)"
+							class="relative whitespace-nowrap px-3.5 py-2 text-[12px] font-medium transition-colors"
+							[ngClass]="
+								activeTab() === t.id
+									? 'text-foreground after:absolute after:-bottom-px after:left-0 after:right-0 after:h-[2.5px] after:bg-primary'
+									: 'text-muted-foreground hover:bg-accent/30 hover:text-foreground'
+							"
+						>
+							{{ t.labelKey | translate }}
+						</button>
+					}
+				</div>
 				<!-- Tab-row right actions (Record + Share), mirroring React's TabRowActions -->
-				<div class="flex items-center gap-1 pr-1">
+				<div class="flex shrink-0 items-center gap-1 pr-1">
 					@if (canEdit()) {
 						<button
 							type="button"
@@ -71477,7 +71983,7 @@ class RibbonComponent {
 						[attr.aria-label]="'pptx.toolbar.share' | translate"
 						(click)="share.emit()"
 					>
-						⇪
+						<svg lucideShare2 class="h-3.5 w-3.5"></svg>
 						<span>{{
 							collabConnected()
 								? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
@@ -71488,7 +71994,7 @@ class RibbonComponent {
 				<button
 					type="button"
-					class="mr-1 rounded px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
+					class="mr-1 shrink-0 rounded px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
 					[attr.aria-pressed]="!ribbonExpanded()"
 					[title]="
 						(ribbonExpanded() ? 'pptx.ribbon.collapseRibbon' : 'pptx.ribbon.expandRibbon')
@@ -71496,7 +72002,11 @@ class RibbonComponent {
 					"
 					(click)="ribbonExpanded.set(!ribbonExpanded())"
 				>
-					{{ ribbonExpanded() ? '▴' : '▾' }}
+					@if (ribbonExpanded()) {
+						<svg lucideChevronUp class="h-3.5 w-3.5"></svg>
+					} @else {
+						<svg lucideChevronDown class="h-3.5 w-3.5"></svg>
+					}
 				</button>
 			</div>
@@ -71667,7 +72177,7 @@ class RibbonComponent {
 				}
 			</div>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RibbonPrimaryRowComponent, selector: "pptx-ribbon-primary-row", inputs: ["slideCount", "sidebarCollapsed", "inspectorOpen", "commentsOpen", "commentCount"], outputs: ["toggleSidebar", "toggleComments", "present", "presenter", "broadcast", "openCustomShows", "toggleInspector", "exportPng", "exportPdf", "exportGif", "exportVideo", "print", "info", "a11y", "save"] }, { kind: "component", type: RibbonFileSectionComponent, selector: "pptx-ribbon-file-section", inputs: ["slideCount", "exporting"], outputs: ["openFile", "save", "exportPng", "exportPdf", "exportGif", "exportVideo", "print", "info", "signatures", "replace", "openPassword", "openFontEmbedding", "openVersionHistory"] }, { kind: "component", type: RibbonHomeSectionComponent, selector: "pptx-ribbon-home-section", inputs: ["slideIndex", "selectedElement", "formatPainterActive", "canActivateFormatPainter"], outputs: ["toggleFormatPainter", "findReplace", "applyLayout", "resetSlide", "addSection"] }, { kind: "component", type: RibbonInsertSectionComponent, selector: "pptx-ribbon-insert-section", inputs: ["slideIndex", "newChartType"], outputs: ["openSmartArtDialog", "openEquationDialog", "chartTypeChange"] }, { kind: "component", type: RibbonFontControlsComponent, selector: "pptx-ribbon-font-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonParagraphControlsComponent, selector: "pptx-ribbon-paragraph-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonArrangeSectionComponent, selector: "pptx-ribbon-arrange-section", inputs: ["slideIndex", "formatPainterActive", "canActivateFormatPainter"], outputs: ["toggleFormatPainter"] }, { kind: "component", type: RibbonSlideshowSectionComponent, selector: "pptx-ribbon-slideshow-section", inputs: ["slideCount"], outputs: ["present", "presenter", "broadcast", "openCustomShows", "openSetUpSlideShow"] }, { kind: "component", type: RibbonReviewSectionComponent, selector: "pptx-ribbon-review-section", outputs: ["comments", "spelling", "a11y", "openCompare", "language", "link"] }, { kind: "component", type: RibbonViewSectionComponent, selector: "pptx-ribbon-view-section", inputs: ["canEdit", "showGrid", "showRulers", "showGuides", "snapToGrid", "eyedropperActive"], outputs: ["openSorter", "toggleNotes", "print", "openShortcuts", "toggleGrid", "toggleRulers", "toggleGuides", "toggleSelectionPane", "toggleSnapToGrid", "toggleEyedropper"] }, { kind: "component", type: RibbonDrawSectionComponent, selector: "pptx-ribbon-draw-section", inputs: ["activeTool", "drawingColor", "drawingWidth"], outputs: ["drawToolChange"] }, { kind: "component", type: RibbonDrawingGroupComponent, selector: "pptx-ribbon-drawing-group", inputs: ["canEdit"], outputs: ["shapeInsert", "moveLayer", "moveLayerToEdge"] }, { kind: "component", type: RibbonDesignSectionComponent, selector: "pptx-ribbon-design-section", inputs: ["themeGalleryOpen"], outputs: ["toggleThemeGallery", "info", "toggleInspector"] }, { kind: "component", type: RibbonTransitionsSectionComponent, selector: "pptx-ribbon-transitions-section", inputs: ["slideIndex", "selectedTransition", "transitionDurationSec"], outputs: ["present", "toggleInspector", "transitionChange", "durationChange"] }, { kind: "component", type: RibbonAnimationsSectionComponent, selector: "pptx-ribbon-animations-section", inputs: ["slideIndex", "selectedElement"], outputs: ["present", "toggleInspector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideShare2, selector: "svg[lucideShare2]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: RibbonPrimaryRowComponent, selector: "pptx-ribbon-primary-row", inputs: ["slideCount", "sidebarCollapsed", "inspectorOpen", "commentsOpen", "commentCount"], outputs: ["toggleSidebar", "toggleComments", "present", "presenter", "broadcast", "openCustomShows", "toggleInspector", "exportPng", "exportPdf", "exportGif", "exportVideo", "print", "info", "a11y", "save"] }, { kind: "component", type: RibbonFileSectionComponent, selector: "pptx-ribbon-file-section", inputs: ["slideCount", "exporting"], outputs: ["openFile", "save", "exportPng", "exportPdf", "exportGif", "exportVideo", "print", "info", "signatures", "replace", "openPassword", "openFontEmbedding", "openVersionHistory"] }, { kind: "component", type: RibbonHomeSectionComponent, selector: "pptx-ribbon-home-section", inputs: ["slideIndex", "selectedElement", "formatPainterActive", "canActivateFormatPainter"], outputs: ["toggleFormatPainter", "findReplace", "applyLayout", "resetSlide", "addSection"] }, { kind: "component", type: RibbonInsertSectionComponent, selector: "pptx-ribbon-insert-section", inputs: ["slideIndex", "newChartType"], outputs: ["openSmartArtDialog", "openEquationDialog", "chartTypeChange"] }, { kind: "component", type: RibbonFontControlsComponent, selector: "pptx-ribbon-font-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonParagraphControlsComponent, selector: "pptx-ribbon-paragraph-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonArrangeSectionComponent, selector: "pptx-ribbon-arrange-section", inputs: ["slideIndex", "formatPainterActive", "canActivateFormatPainter"], outputs: ["toggleFormatPainter"] }, { kind: "component", type: RibbonSlideshowSectionComponent, selector: "pptx-ribbon-slideshow-section", inputs: ["slideCount"], outputs: ["present", "presenter", "broadcast", "openCustomShows", "openSetUpSlideShow"] }, { kind: "component", type: RibbonReviewSectionComponent, selector: "pptx-ribbon-review-section", outputs: ["comments", "spelling", "a11y", "openCompare", "language", "link"] }, { kind: "component", type: RibbonViewSectionComponent, selector: "pptx-ribbon-view-section", inputs: ["canEdit", "showGrid", "showRulers", "showGuides", "snapToGrid", "eyedropperActive"], outputs: ["openSorter", "toggleNotes", "print", "openShortcuts", "toggleGrid", "toggleRulers", "toggleGuides", "toggleSelectionPane", "toggleSnapToGrid", "toggleEyedropper"] }, { kind: "component", type: RibbonDrawSectionComponent, selector: "pptx-ribbon-draw-section", inputs: ["activeTool", "drawingColor", "drawingWidth"], outputs: ["drawToolChange"] }, { kind: "component", type: RibbonDrawingGroupComponent, selector: "pptx-ribbon-drawing-group", inputs: ["canEdit"], outputs: ["shapeInsert", "moveLayer", "moveLayerToEdge"] }, { kind: "component", type: RibbonDesignSectionComponent, selector: "pptx-ribbon-design-section", inputs: ["themeGalleryOpen"], outputs: ["toggleThemeGallery", "info", "toggleInspector"] }, { kind: "component", type: RibbonTransitionsSectionComponent, selector: "pptx-ribbon-transitions-section", inputs: ["slideIndex", "selectedTransition", "transitionDurationSec"], outputs: ["present", "toggleInspector", "transitionChange", "durationChange"] }, { kind: "component", type: RibbonAnimationsSectionComponent, selector: "pptx-ribbon-animations-section", inputs: ["slideIndex", "selectedElement"], outputs: ["present", "toggleInspector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonComponent, decorators: [{
             type: Component,
@@ -71678,6 +72188,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     imports: [
                         NgClass,
                         TranslatePipe,
+                        LucideShare2,
+                        LucideChevronUp,
+                        LucideChevronDown,
                         RibbonPrimaryRowComponent,
                         RibbonFileSectionComponent,
                         RibbonHomeSectionComponent,
@@ -71726,24 +72239,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			<!-- ── Tab bar ───────────────────────────────────────────────────── -->
 			<div class="flex items-center border-b border-border/60 px-1">
-				@for (t of tabs; track t.id) {
-					<button
-						type="button"
-						(click)="activeTab.set(t.id)"
-						class="relative whitespace-nowrap px-3.5 py-2 text-[12px] font-medium transition-colors"
-						[ngClass]="
-							activeTab() === t.id
-								? 'text-foreground after:absolute after:-bottom-px after:left-0 after:right-0 after:h-[2.5px] after:bg-primary'
-								: 'text-muted-foreground hover:bg-accent/30 hover:text-foreground'
-						"
-					>
-						{{ t.labelKey | translate }}
-					</button>
-				}
-				<div class="flex-1"></div>
+				<!-- Scrollable tab strip: on narrow widths the tabs scroll instead of
+				     clipping (mirrors React's max-md:overflow-x-auto scrollbar-none),
+				     while the Record/Share actions and collapse toggle stay pinned. -->
+				<div class="flex min-w-0 flex-1 items-center overflow-x-auto pptx-scrollbar-none">
+					@for (t of tabs; track t.id) {
+						<button
+							type="button"
+							(click)="activeTab.set(t.id)"
+							class="relative whitespace-nowrap px-3.5 py-2 text-[12px] font-medium transition-colors"
+							[ngClass]="
+								activeTab() === t.id
+									? 'text-foreground after:absolute after:-bottom-px after:left-0 after:right-0 after:h-[2.5px] after:bg-primary'
+									: 'text-muted-foreground hover:bg-accent/30 hover:text-foreground'
+							"
+						>
+							{{ t.labelKey | translate }}
+						</button>
+					}
+				</div>
 				<!-- Tab-row right actions (Record + Share), mirroring React's TabRowActions -->
-				<div class="flex items-center gap-1 pr-1">
+				<div class="flex shrink-0 items-center gap-1 pr-1">
 					@if (canEdit()) {
 						<button
 							type="button"
@@ -71772,7 +72289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[attr.aria-label]="'pptx.toolbar.share' | translate"
 						(click)="share.emit()"
 					>
-						⇪
+						<svg lucideShare2 class="h-3.5 w-3.5"></svg>
 						<span>{{
 							collabConnected()
 								? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
@@ -71783,7 +72300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				<button
 					type="button"
-					class="mr-1 rounded px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
+					class="mr-1 shrink-0 rounded px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
 					[attr.aria-pressed]="!ribbonExpanded()"
 					[title]="
 						(ribbonExpanded() ? 'pptx.ribbon.collapseRibbon' : 'pptx.ribbon.expandRibbon')
@@ -71791,7 +72308,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					"
 					(click)="ribbonExpanded.set(!ribbonExpanded())"
 				>
-					{{ ribbonExpanded() ? '▴' : '▾' }}
+					@if (ribbonExpanded()) {
+						<svg lucideChevronUp class="h-3.5 w-3.5"></svg>
+					} @else {
+						<svg lucideChevronDown class="h-3.5 w-3.5"></svg>
+					}
 				</button>
 			</div>
@@ -72068,7 +72589,11 @@ class SelectionPaneComponent {
 									"
 									(click)="toggleHidden.emit(el.id)"
 								>
-									{{ el.hidden ? '🙈' : '👁' }}
+									@if (el.hidden) {
+										<svg lucideEyeOff class="h-3.5 w-3.5"></svg>
+									} @else {
+										<svg lucideEye class="h-3.5 w-3.5"></svg>
+									}
 								</button>
 								<button
 									type="button"
@@ -72077,7 +72602,7 @@ class SelectionPaneComponent {
 									[title]="'pptx.arrange.bringForward' | translate"
 									(click)="bringForward.emit(el.id)"
 								>
-									↑
+									<svg lucideArrowUp class="h-3.5 w-3.5"></svg>
 								</button>
 								<button
 									type="button"
@@ -72086,7 +72611,7 @@ class SelectionPaneComponent {
 									[title]="'pptx.arrange.sendBackward' | translate"
 									(click)="sendBackward.emit(el.id)"
 								>
-									↓
+									<svg lucideArrowDown class="h-3.5 w-3.5"></svg>
 								</button>
 							</div>
 						</li>
@@ -72096,11 +72621,11 @@ class SelectionPaneComponent {
 				<p class="pptx-ng-sel-pane__empty">{{ 'pptx.selectionPane.empty' | translate }}</p>
 			}
 		</aside>
-	`, isInline: true, styles: [":host{display:block;height:100%;width:100%}.pptx-ng-sel-pane{display:flex;flex-direction:column;min-height:0;height:100%;width:100%;background:var(--pptx-card, #111827);color:var(--pptx-foreground, #f3f4f6);border-left:1px solid var(--pptx-border, #374151);font-family:system-ui,sans-serif}.pptx-ng-sel-pane__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--pptx-border, #374151);flex-shrink:0}.pptx-ng-sel-pane__title{margin:0;font-size:14px;font-weight:600}.pptx-ng-sel-pane__count{font-size:12px;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-sel-pane__list{list-style:none;margin:0;padding:8px;overflow-y:auto;flex:1 1 auto;min-height:0}.pptx-ng-sel-pane__row{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;border:1px solid transparent;cursor:pointer;margin-bottom:2px;transition:background .1s;-webkit-user-select:none;user-select:none}.pptx-ng-sel-pane__row:hover{background:var(--pptx-accent, #1f2937)}.pptx-ng-sel-pane__row--selected{border-color:var(--pptx-primary, #6366f1);background:color-mix(in srgb,var(--pptx-primary, #6366f1) 15%,transparent)}.pptx-ng-sel-pane__row--hidden{opacity:.5}.pptx-ng-sel-pane__icon{flex-shrink:0;width:20px;text-align:center;font-size:12px;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-sel-pane__label{flex:1 1 auto;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.pptx-ng-sel-pane__actions{display:flex;gap:2px;flex-shrink:0}.pptx-ng-sel-pane__btn{background:transparent;border:1px solid var(--pptx-border, #374151);color:inherit;border-radius:4px;padding:2px 5px;font-size:11px;cursor:pointer;line-height:1.2}.pptx-ng-sel-pane__btn:hover{background:var(--pptx-accent, #1f2937)}.pptx-ng-sel-pane__empty{padding:16px;font-size:13px;color:var(--pptx-muted-foreground, #9ca3af)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [":host{display:block;height:100%;width:100%}.pptx-ng-sel-pane{display:flex;flex-direction:column;min-height:0;height:100%;width:100%;background:var(--pptx-card, #111827);color:var(--pptx-foreground, #f3f4f6);border-left:1px solid var(--pptx-border, #374151);font-family:system-ui,sans-serif}.pptx-ng-sel-pane__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--pptx-border, #374151);flex-shrink:0}.pptx-ng-sel-pane__title{margin:0;font-size:14px;font-weight:600}.pptx-ng-sel-pane__count{font-size:12px;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-sel-pane__list{list-style:none;margin:0;padding:8px;overflow-y:auto;flex:1 1 auto;min-height:0}.pptx-ng-sel-pane__row{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;border:1px solid transparent;cursor:pointer;margin-bottom:2px;transition:background .1s;-webkit-user-select:none;user-select:none}.pptx-ng-sel-pane__row:hover{background:var(--pptx-accent, #1f2937)}.pptx-ng-sel-pane__row--selected{border-color:var(--pptx-primary, #6366f1);background:color-mix(in srgb,var(--pptx-primary, #6366f1) 15%,transparent)}.pptx-ng-sel-pane__row--hidden{opacity:.5}.pptx-ng-sel-pane__icon{flex-shrink:0;width:20px;text-align:center;font-size:12px;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-sel-pane__label{flex:1 1 auto;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.pptx-ng-sel-pane__actions{display:flex;gap:2px;flex-shrink:0}.pptx-ng-sel-pane__btn{background:transparent;border:1px solid var(--pptx-border, #374151);color:inherit;border-radius:4px;padding:2px 5px;font-size:11px;cursor:pointer;line-height:1.2}.pptx-ng-sel-pane__btn:hover{background:var(--pptx-accent, #1f2937)}.pptx-ng-sel-pane__empty{padding:16px;font-size:13px;color:var(--pptx-muted-foreground, #9ca3af)}\n"], dependencies: [{ kind: "component", type: LucideEye, selector: "svg[lucideEye]" }, { kind: "component", type: LucideEyeOff, selector: "svg[lucideEyeOff]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectionPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-selection-pane', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe], template: `
+            args: [{ selector: 'pptx-selection-pane', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe, LucideEye, LucideEyeOff, LucideArrowUp, LucideArrowDown], template: `
 		<aside class="pptx-ng-sel-pane" [attr.aria-label]="'pptx.selectionPane.title' | translate">
 			<header class="pptx-ng-sel-pane__header">
 				<h2 class="pptx-ng-sel-pane__title">{{ 'pptx.selectionPane.title' | translate }}</h2>
@@ -72139,7 +72664,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 									"
 									(click)="toggleHidden.emit(el.id)"
 								>
-									{{ el.hidden ? '🙈' : '👁' }}
+									@if (el.hidden) {
+										<svg lucideEyeOff class="h-3.5 w-3.5"></svg>
+									} @else {
+										<svg lucideEye class="h-3.5 w-3.5"></svg>
+									}
 								</button>
 								<button
 									type="button"
@@ -72148,7 +72677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 									[title]="'pptx.arrange.bringForward' | translate"
 									(click)="bringForward.emit(el.id)"
 								>
-									↑
+									<svg lucideArrowUp class="h-3.5 w-3.5"></svg>
 								</button>
 								<button
 									type="button"
@@ -72157,7 +72686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 									[title]="'pptx.arrange.sendBackward' | translate"
 									(click)="sendBackward.emit(el.id)"
 								>
-									↓
+									<svg lucideArrowDown class="h-3.5 w-3.5"></svg>
 								</button>
 							</div>
 						</li>
@@ -73060,7 +73589,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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], 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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SlideSorterOverlayComponent, decorators: [{
             type: Component,
@@ -73256,7 +73785,7 @@ class SlidesPanelComponent {
 								[attr.aria-label]="'pptx.arrange.duplicate' | translate"
 								(click)="onDuplicate(i)"
 							>
-								⧉
+								<svg lucideCopy class="h-3.5 w-3.5"></svg>
 							</button>
 							<button
 								type="button"
@@ -73266,7 +73795,7 @@ class SlidesPanelComponent {
 								[disabled]="editor.slides().length <= 1"
 								(click)="onDelete(i)"
 							>
-								✕
+								<svg lucideTrash2 class="h-3.5 w-3.5"></svg>
 							</button>
 							<button
 								type="button"
@@ -73276,7 +73805,7 @@ class SlidesPanelComponent {
 								[disabled]="i === 0"
 								(click)="onMoveUp(i)"
 							>
-								↑
+								<svg lucideArrowUp class="h-3.5 w-3.5"></svg>
 							</button>
 							<button
 								type="button"
@@ -73286,7 +73815,7 @@ class SlidesPanelComponent {
 								[disabled]="i === editor.slides().length - 1"
 								(click)="onMoveDown(i)"
 							>
-								↓
+								<svg lucideArrowDown class="h-3.5 w-3.5"></svg>
 							</button>
 						</div>
 					</div>
@@ -73301,15 +73830,24 @@ class SlidesPanelComponent {
 					[attr.aria-label]="'pptx.sections.addSlide' | translate"
 					(click)="onAddSlide()"
 				>
-					＋ {{ 'pptx.sections.addSlide' | translate }}
+					<svg lucidePlus class="h-3.5 w-3.5"></svg> {{ 'pptx.sections.addSlide' | translate }}
 				</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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], 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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SlidesPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-slides-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, SlideCanvasComponent, TranslatePipe], template: `
+            args: [{ selector: 'pptx-slides-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgStyle,
+                        SlideCanvasComponent,
+                        TranslatePipe,
+                        LucideCopy,
+                        LucideTrash2,
+                        LucideArrowUp,
+                        LucideArrowDown,
+                        LucidePlus,
+                    ], template: `
 		<div class="pptx-ng-spanel">
 			<!-- Scrollable slide list -->
 			<div
@@ -73363,7 +73901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 								[attr.aria-label]="'pptx.arrange.duplicate' | translate"
 								(click)="onDuplicate(i)"
 							>
-								⧉
+								<svg lucideCopy class="h-3.5 w-3.5"></svg>
 							</button>
 							<button
 								type="button"
@@ -73373,7 +73911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 								[disabled]="editor.slides().length <= 1"
 								(click)="onDelete(i)"
 							>
-								✕
+								<svg lucideTrash2 class="h-3.5 w-3.5"></svg>
 							</button>
 							<button
 								type="button"
@@ -73383,7 +73921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 								[disabled]="i === 0"
 								(click)="onMoveUp(i)"
 							>
-								↑
+								<svg lucideArrowUp class="h-3.5 w-3.5"></svg>
 							</button>
 							<button
 								type="button"
@@ -73393,7 +73931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 								[disabled]="i === editor.slides().length - 1"
 								(click)="onMoveDown(i)"
 							>
-								↓
+								<svg lucideArrowDown class="h-3.5 w-3.5"></svg>
 							</button>
 						</div>
 					</div>
@@ -73408,7 +73946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.sections.addSlide' | translate"
 					(click)="onAddSlide()"
 				>
-					＋ {{ 'pptx.sections.addSlide' | translate }}
+					<svg lucidePlus class="h-3.5 w-3.5"></svg> {{ 'pptx.sections.addSlide' | translate }}
 				</button>
 			</footer>
 		</div>
@@ -73529,7 +74067,7 @@ class StatusBarComponent {
 				[attr.aria-label]="'pptx.statusBar.toggleNotes' | translate"
 				(click)="toggleNotes.emit()"
 			>
-				<span aria-hidden="true">🗒</span>
+				<svg lucideStickyNote class="h-3 w-3"></svg>
 				<span>{{ 'pptx.notes.title' | translate }}</span>
 			</button>
@@ -73545,7 +74083,7 @@ class StatusBarComponent {
 					[attr.aria-label]="'pptx.statusBar.normalView' | translate"
 					(click)="normalView.emit()"
 				>
-					<span aria-hidden="true">🖵</span>
+					<svg lucideMonitor class="h-3.5 w-3.5"></svg>
 				</button>
 				<button
 					type="button"
@@ -73555,7 +74093,7 @@ class StatusBarComponent {
 					[attr.aria-label]="'pptx.statusBar.slideSorter' | translate"
 					(click)="openSorter.emit()"
 				>
-					<span aria-hidden="true">▦</span>
+					<svg lucideColumns2 class="h-3.5 w-3.5"></svg>
 				</button>
 				<button
 					type="button"
@@ -73566,7 +74104,7 @@ class StatusBarComponent {
 					[attr.aria-label]="'pptx.statusBar.slideShow' | translate"
 					(click)="slideShow.emit()"
 				>
-					<span aria-hidden="true">▶</span>
+					<svg lucidePresentation class="h-3.5 w-3.5"></svg>
 				</button>
 			</div>
@@ -73580,7 +74118,7 @@ class StatusBarComponent {
 					[attr.aria-label]="'pptx.statusBar.zoomOut' | translate"
 					(click)="zoomOut.emit()"
 				>
-					<span aria-hidden="true">−</span>
+					<svg lucideMinus class="h-3 w-3"></svg>
 				</button>
 				<button
 					type="button"
@@ -73597,11 +74135,11 @@ class StatusBarComponent {
 					[attr.aria-label]="'pptx.statusBar.zoomIn' | translate"
 					(click)="zoomIn.emit()"
 				>
-					<span aria-hidden="true">+</span>
+					<svg lucidePlus class="h-3 w-3"></svg>
 				</button>
 			</div>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideStickyNote, selector: "svg[lucideStickyNote]" }, { kind: "component", type: LucideMonitor, selector: "svg[lucideMonitor]" }, { kind: "component", type: LucideColumns2, selector: "svg[lucideColumns2], svg[lucideColumns]" }, { kind: "component", type: LucidePresentation, selector: "svg[lucidePresentation]" }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatusBarComponent, decorators: [{
             type: Component,
@@ -73609,7 +74147,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: 'pptx-status-bar',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, TranslatePipe],
+                    imports: [
+                        NgClass,
+                        TranslatePipe,
+                        LucideStickyNote,
+                        LucideMonitor,
+                        LucideColumns2,
+                        LucidePresentation,
+                        LucideMinus,
+                        LucidePlus,
+                    ],
                     template: `
 		<div
 			class="flex w-full items-center gap-1 border-t border-border bg-secondary/50 px-2 py-0.5 text-[10px] text-muted-foreground"
@@ -73644,7 +74191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[attr.aria-label]="'pptx.statusBar.toggleNotes' | translate"
 				(click)="toggleNotes.emit()"
 			>
-				<span aria-hidden="true">🗒</span>
+				<svg lucideStickyNote class="h-3 w-3"></svg>
 				<span>{{ 'pptx.notes.title' | translate }}</span>
 			</button>
@@ -73660,7 +74207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.statusBar.normalView' | translate"
 					(click)="normalView.emit()"
 				>
-					<span aria-hidden="true">🖵</span>
+					<svg lucideMonitor class="h-3.5 w-3.5"></svg>
 				</button>
 				<button
 					type="button"
@@ -73670,7 +74217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.statusBar.slideSorter' | translate"
 					(click)="openSorter.emit()"
 				>
-					<span aria-hidden="true">▦</span>
+					<svg lucideColumns2 class="h-3.5 w-3.5"></svg>
 				</button>
 				<button
 					type="button"
@@ -73681,7 +74228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.statusBar.slideShow' | translate"
 					(click)="slideShow.emit()"
 				>
-					<span aria-hidden="true">▶</span>
+					<svg lucidePresentation class="h-3.5 w-3.5"></svg>
 				</button>
 			</div>
@@ -73695,7 +74242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.statusBar.zoomOut' | translate"
 					(click)="zoomOut.emit()"
 				>
-					<span aria-hidden="true">−</span>
+					<svg lucideMinus class="h-3 w-3"></svg>
 				</button>
 				<button
 					type="button"
@@ -73712,7 +74259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.statusBar.zoomIn' | translate"
 					(click)="zoomIn.emit()"
 				>
-					<span aria-hidden="true">+</span>
+					<svg lucidePlus class="h-3 w-3"></svg>
 				</button>
 			</div>
 		</div>
@@ -73930,7 +74477,7 @@ class ThemeGalleryComponent {
 							(click)="close.emit()"
 							aria-label="Close theme gallery"
 						>
-							✕
+							<svg lucideX class="h-4 w-4"></svg>
 						</button>
 					</div>
@@ -73980,8 +74527,8 @@ class ThemeGalleryComponent {
 									<span
 										class="absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-white"
 										aria-label="Selected theme"
-										>✓</span
-									>
+										><svg lucideCheck class="h-2.5 w-2.5"></svg
+									></span>
 								}
 							</button>
 						}
@@ -74002,7 +74549,7 @@ class ThemeGalleryComponent {
 				</div>
 			</div>
 		}
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeGalleryComponent, decorators: [{
             type: Component,
@@ -74010,7 +74557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: 'pptx-theme-gallery',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass],
+                    imports: [NgClass, LucideX, LucideCheck],
                     template: `
 		@if (open()) {
 			<!-- Backdrop -->
@@ -74038,7 +74585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 							(click)="close.emit()"
 							aria-label="Close theme gallery"
 						>
-							✕
+							<svg lucideX class="h-4 w-4"></svg>
 						</button>
 					</div>
@@ -74088,8 +74635,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 									<span
 										class="absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-white"
 										aria-label="Selected theme"
-										>✓</span
-									>
+										><svg lucideCheck class="h-2.5 w-2.5"></svg
+									></span>
 								}
 							</button>
 						}
@@ -74266,7 +74813,7 @@ class TitleBarComponent {
 					[attr.aria-label]="'pptx.titleBar.save' | translate"
 					(click)="save.emit()"
 				>
-					💾
+					<svg lucideSave class="h-3.5 w-3.5"></svg>
 				</button>
 				<button
 					type="button"
@@ -74280,7 +74827,7 @@ class TitleBarComponent {
 					[attr.aria-label]="'pptx.toolbar.undo' | translate"
 					(click)="undo.emit()"
 				>
-					↶
+					<svg lucideUndo class="h-3.5 w-3.5"></svg>
 				</button>
 				<button
 					type="button"
@@ -74294,7 +74841,7 @@ class TitleBarComponent {
 					[attr.aria-label]="'pptx.toolbar.redo' | translate"
 					(click)="redo.emit()"
 				>
-					↷
+					<svg lucideRedo class="h-3.5 w-3.5"></svg>
 				</button>
 				<div [class]="tb.separator"></div>
@@ -74319,7 +74866,9 @@ class TitleBarComponent {
 								searchFocused() || findReplaceOpen() ? 'text-foreground bg-background' : ''
 							"
 						>
-							<span [class]="tb.searchIcon" aria-hidden="true">⌕</span>
+							<span [class]="tb.searchIcon" aria-hidden="true"
+								><svg lucideSearch class="h-3.5 w-3.5"></svg
+							></span>
 							<input
 								type="text"
 								[value]="searchQuery()"
@@ -74365,7 +74914,7 @@ class TitleBarComponent {
 										class="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-accent transition-colors"
 										(mousedown)="openFindReplace()"
 									>
-										<span aria-hidden="true">⌕</span>
+										<svg lucideSearch class="h-3.5 w-3.5"></svg>
 										<span
 											>{{ 'pptx.titleBar.searchContent' | translate }} &ldquo;{{
 												searchQuery()
@@ -74381,7 +74930,7 @@ class TitleBarComponent {
 			<span [class]="tb.rightSpacer"></span>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideSave, selector: "svg[lucideSave]" }, { kind: "component", type: LucideUndo, selector: "svg[lucideUndo]" }, { kind: "component", type: LucideRedo, selector: "svg[lucideRedo]" }, { kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TitleBarComponent, decorators: [{
             type: Component,
@@ -74389,7 +74938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: 'pptx-title-bar',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, TranslatePipe],
+                    imports: [NgClass, TranslatePipe, LucideSave, LucideUndo, LucideRedo, LucideSearch],
                     template: `
 		<div [class]="tb.container" data-pptx-title-bar>
 			<span [class]="tb.logo" aria-hidden="true">P</span>
@@ -74427,7 +74976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.titleBar.save' | translate"
 					(click)="save.emit()"
 				>
-					💾
+					<svg lucideSave class="h-3.5 w-3.5"></svg>
 				</button>
 				<button
 					type="button"
@@ -74441,7 +74990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.toolbar.undo' | translate"
 					(click)="undo.emit()"
 				>
-					↶
+					<svg lucideUndo class="h-3.5 w-3.5"></svg>
 				</button>
 				<button
 					type="button"
@@ -74455,7 +75004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[attr.aria-label]="'pptx.toolbar.redo' | translate"
 					(click)="redo.emit()"
 				>
-					↷
+					<svg lucideRedo class="h-3.5 w-3.5"></svg>
 				</button>
 				<div [class]="tb.separator"></div>
@@ -74480,7 +75029,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 								searchFocused() || findReplaceOpen() ? 'text-foreground bg-background' : ''
 							"
 						>
-							<span [class]="tb.searchIcon" aria-hidden="true">⌕</span>
+							<span [class]="tb.searchIcon" aria-hidden="true"
+								><svg lucideSearch class="h-3.5 w-3.5"></svg
+							></span>
 							<input
 								type="text"
 								[value]="searchQuery()"
@@ -74526,7 +75077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 										class="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-accent transition-colors"
 										(mousedown)="openFindReplace()"
 									>
-										<span aria-hidden="true">⌕</span>
+										<svg lucideSearch class="h-3.5 w-3.5"></svg>
 										<span
 											>{{ 'pptx.titleBar.searchContent' | translate }} &ldquo;{{
 												searchQuery()
@@ -75562,9 +76113,18 @@ class ViewerCustomShowsService {
     ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
     /** Active-slide index of the host viewer (bound from the component). */
     activeSlideIndex = () => 0;
-    /** Wire the host's active-slide-index accessor (called once from the constructor). */
-    bind(activeSlideIndex) {
-        this.activeSlideIndex = activeSlideIndex;
+    /**
+     * The viewer's LIVE (edited) slides accessor, bound from the component. The
+     * presentation overlay must reflect in-session edits (inserted media, moved
+     * shapes, etc.), so it reads these rather than the pristine loaded deck
+     * (`loader.slides()`), mirroring React/Vue where present mode shows the
+     * working set. Defaults to the loaded slides until bound.
+     */
+    liveSlides = () => this.loader.slides();
+    /** Wire the host's active-slide-index + live-slides accessors (called once from the constructor). */
+    bind(accessors) {
+        this.activeSlideIndex = accessors.activeSlideIndex;
+        this.liveSlides = accessors.liveSlides;
     }
     /** Custom shows mapped to the core shape consumed by set-up-slide-show. */
     pptxCustomShows = computed(() => this.shows().map((show) => ({
@@ -75573,8 +76133,8 @@ class ViewerCustomShowsService {
         slideRIds: [...show.slideIds],
     })), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pptxCustomShows" }] : /* istanbul ignore next */ []));
-    /** Slides shown in presentation mode: the active custom show, else the full deck. */
-    presentationSlides = computed(() => this.resolveActiveShowSlides() ?? [...this.loader.slides()], /* @ts-ignore */
+    /** Slides shown in presentation mode: the active custom show, else the full (live) deck. */
+    presentationSlides = computed(() => this.resolveActiveShowSlides() ?? [...this.liveSlides()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "presentationSlides" }] : /* istanbul ignore next */ []));
     /** Start index into {@link presentationSlides}: first slide of a custom show, else the active slide. */
     presentationStartIndex = computed(() => this.resolveActiveShowSlides() ? 0 : this.activeSlideIndex(), /* @ts-ignore */
@@ -75604,7 +76164,7 @@ class ViewerCustomShowsService {
         if (!show || show.slideIds.length === 0) {
             return null;
         }
-        const byId = new Map(this.loader.slides().map((s) => [s.id, s]));
+        const byId = new Map(this.liveSlides().map((s) => [s.id, s]));
         const picked = show.slideIds
             .map((sid) => byId.get(sid))
             .filter((s) => s !== undefined);
@@ -76076,7 +76636,7 @@ class SlideDiffThumbnailsComponent {
 				</div>
 			}
 		</div>
-	`, isInline: true, styles: [".pptx-ng-diff-thumbs{display:flex;gap:.5rem}.pptx-ng-diff-thumb-col{flex:1}.pptx-ng-diff-thumb-label{margin-bottom:.25rem;font-size:.625rem;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-diff-thumb-clip{overflow:hidden;border:1px solid var(--pptx-border, #374151);border-radius:.25rem}.pptx-ng-diff-thumb-clip[data-status=added]{border-color:#15803d99}.pptx-ng-diff-thumb-clip[data-status=changed]{border-color:#b4530999}.pptx-ng-diff-thumb-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}\n"], dependencies: [{ kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-diff-thumbs{display:flex;gap:.5rem}.pptx-ng-diff-thumb-col{flex:1}.pptx-ng-diff-thumb-label{margin-bottom:.25rem;font-size:.625rem;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-diff-thumb-clip{overflow:hidden;border:1px solid var(--pptx-border, #374151);border-radius:.25rem}.pptx-ng-diff-thumb-clip[data-status=added]{border-color:#15803d99}.pptx-ng-diff-thumb-clip[data-status=changed]{border-color:#b4530999}.pptx-ng-diff-thumb-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}\n"], dependencies: [{ kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SlideDiffThumbnailsComponent, decorators: [{
             type: Component,
@@ -76183,7 +76743,13 @@ class SlideDiffRowComponent {
 			<div class="pptx-ng-diff-row" [class.is-resolved]="isResolved()">
 				<!-- Header (toggles expand) -->
 				<button type="button" class="pptx-ng-diff-head" (click)="toggle()">
-					<span class="pptx-ng-diff-chevron">{{ expanded() ? '▾' : '▸' }}</span>
+					<span class="pptx-ng-diff-chevron inline-flex items-center">
+						@if (expanded()) {
+							<svg lucideChevronDown class="h-3.5 w-3.5"></svg>
+						} @else {
+							<svg lucideChevronRight class="h-3.5 w-3.5"></svg>
+						}
+					</span>
 					<span class="pptx-ng-diff-slide">{{
 						'pptx.compare.slideNumber' | translate: { number: slideNumber() }
 					}}</span>
@@ -76218,17 +76784,18 @@ class SlideDiffRowComponent {
 							<div class="pptx-ng-diff-actions">
 								<button
 									type="button"
-									class="pptx-ng-diff-btn is-accept"
+									class="pptx-ng-diff-btn is-accept inline-flex items-center gap-1"
 									(click)="accept.emit(diffIndex())"
 								>
-									✓ {{ 'pptx.compare.accept' | translate }}
+									<svg lucideCheck class="h-3.5 w-3.5"></svg>
+									{{ 'pptx.compare.accept' | translate }}
 								</button>
 								<button
 									type="button"
-									class="pptx-ng-diff-btn is-reject"
+									class="pptx-ng-diff-btn is-reject inline-flex items-center gap-1"
 									(click)="reject.emit(diffIndex())"
 								>
-									✕ {{ 'pptx.compare.reject' | translate }}
+									<svg lucideX class="h-3.5 w-3.5"></svg> {{ 'pptx.compare.reject' | translate }}
 								</button>
 							</div>
 						}
@@ -76236,16 +76803,30 @@ class SlideDiffRowComponent {
 				}
 			</div>
 		}
-	`, isInline: true, styles: [".pptx-ng-diff-row{border:1px solid var(--pptx-border, #374151);border-radius:.5rem;background:var(--pptx-background, #030712)}.pptx-ng-diff-row.is-resolved{opacity:.6;background:var(--pptx-card, #111827)}.pptx-ng-diff-head{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;text-align:left;border:none;background:transparent;color:var(--pptx-foreground, #f3f4f6);cursor:pointer}.pptx-ng-diff-chevron{flex-shrink:0;color:var(--pptx-muted-foreground, #9ca3af);font-size:.75rem}.pptx-ng-diff-slide{font-size:.75rem}.pptx-ng-diff-pill{border-radius:9999px;padding:.0625rem .5rem;font-size:.625rem;font-weight:500;color:var(--pptx-muted-foreground, #9ca3af);background:#6b728033}.pptx-ng-diff-pill[data-status=added]{color:#4ade80;background:#14532d4d}.pptx-ng-diff-pill[data-status=removed]{color:#f87171;background:#7f1d1d4d}.pptx-ng-diff-pill[data-status=changed]{color:#fbbf24;background:#78350f4d}.pptx-ng-diff-count{font-size:.625rem;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-diff-spacer{flex:1}.pptx-ng-diff-tag{font-size:.625rem;font-weight:500;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-diff-tag.is-accepted{color:#4ade80}.pptx-ng-diff-body{display:flex;flex-direction:column;gap:.5rem;padding:0 .75rem .75rem}.pptx-ng-diff-actions{display:flex;gap:.5rem;padding-top:.25rem}.pptx-ng-diff-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .625rem;border:none;border-radius:.25rem;font-size:.6875rem;cursor:pointer}.pptx-ng-diff-btn.is-accept{background:#15803dcc;color:#f0fdf4}.pptx-ng-diff-btn.is-accept:hover{background:#16a34a}.pptx-ng-diff-btn.is-reject{background:var(--pptx-card, #111827);color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-diff-btn.is-reject:hover{filter:brightness(1.2)}\n"], dependencies: [{ kind: "component", type: SlideDiffThumbnailsComponent, selector: "pptx-slide-diff-thumbnails", inputs: ["diff", "canvasSize", "mediaDataUrls"] }, { kind: "component", type: SlideDiffChangesComponent, selector: "pptx-slide-diff-changes", inputs: ["changes"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-diff-row{border:1px solid var(--pptx-border, #374151);border-radius:.5rem;background:var(--pptx-background, #030712)}.pptx-ng-diff-row.is-resolved{opacity:.6;background:var(--pptx-card, #111827)}.pptx-ng-diff-head{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;text-align:left;border:none;background:transparent;color:var(--pptx-foreground, #f3f4f6);cursor:pointer}.pptx-ng-diff-chevron{flex-shrink:0;color:var(--pptx-muted-foreground, #9ca3af);font-size:.75rem}.pptx-ng-diff-slide{font-size:.75rem}.pptx-ng-diff-pill{border-radius:9999px;padding:.0625rem .5rem;font-size:.625rem;font-weight:500;color:var(--pptx-muted-foreground, #9ca3af);background:#6b728033}.pptx-ng-diff-pill[data-status=added]{color:#4ade80;background:#14532d4d}.pptx-ng-diff-pill[data-status=removed]{color:#f87171;background:#7f1d1d4d}.pptx-ng-diff-pill[data-status=changed]{color:#fbbf24;background:#78350f4d}.pptx-ng-diff-count{font-size:.625rem;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-diff-spacer{flex:1}.pptx-ng-diff-tag{font-size:.625rem;font-weight:500;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-diff-tag.is-accepted{color:#4ade80}.pptx-ng-diff-body{display:flex;flex-direction:column;gap:.5rem;padding:0 .75rem .75rem}.pptx-ng-diff-actions{display:flex;gap:.5rem;padding-top:.25rem}.pptx-ng-diff-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .625rem;border:none;border-radius:.25rem;font-size:.6875rem;cursor:pointer}.pptx-ng-diff-btn.is-accept{background:#15803dcc;color:#f0fdf4}.pptx-ng-diff-btn.is-accept:hover{background:#16a34a}.pptx-ng-diff-btn.is-reject{background:var(--pptx-card, #111827);color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-diff-btn.is-reject:hover{filter:brightness(1.2)}\n"], dependencies: [{ kind: "component", type: SlideDiffThumbnailsComponent, selector: "pptx-slide-diff-thumbnails", inputs: ["diff", "canvasSize", "mediaDataUrls"] }, { kind: "component", type: SlideDiffChangesComponent, selector: "pptx-slide-diff-changes", inputs: ["changes"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SlideDiffRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-slide-diff-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SlideDiffThumbnailsComponent, SlideDiffChangesComponent, TranslatePipe], template: `
+            args: [{ selector: 'pptx-slide-diff-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        SlideDiffThumbnailsComponent,
+                        SlideDiffChangesComponent,
+                        TranslatePipe,
+                        LucideChevronDown,
+                        LucideChevronRight,
+                        LucideCheck,
+                        LucideX,
+                    ], template: `
 		@if (diff().status !== 'unchanged') {
 			<div class="pptx-ng-diff-row" [class.is-resolved]="isResolved()">
 				<!-- Header (toggles expand) -->
 				<button type="button" class="pptx-ng-diff-head" (click)="toggle()">
-					<span class="pptx-ng-diff-chevron">{{ expanded() ? '▾' : '▸' }}</span>
+					<span class="pptx-ng-diff-chevron inline-flex items-center">
+						@if (expanded()) {
+							<svg lucideChevronDown class="h-3.5 w-3.5"></svg>
+						} @else {
+							<svg lucideChevronRight class="h-3.5 w-3.5"></svg>
+						}
+					</span>
 					<span class="pptx-ng-diff-slide">{{
 						'pptx.compare.slideNumber' | translate: { number: slideNumber() }
 					}}</span>
@@ -76280,17 +76861,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 							<div class="pptx-ng-diff-actions">
 								<button
 									type="button"
-									class="pptx-ng-diff-btn is-accept"
+									class="pptx-ng-diff-btn is-accept inline-flex items-center gap-1"
 									(click)="accept.emit(diffIndex())"
 								>
-									✓ {{ 'pptx.compare.accept' | translate }}
+									<svg lucideCheck class="h-3.5 w-3.5"></svg>
+									{{ 'pptx.compare.accept' | translate }}
 								</button>
 								<button
 									type="button"
-									class="pptx-ng-diff-btn is-reject"
+									class="pptx-ng-diff-btn is-reject inline-flex items-center gap-1"
 									(click)="reject.emit(diffIndex())"
 								>
-									✕ {{ 'pptx.compare.reject' | translate }}
+									<svg lucideX class="h-3.5 w-3.5"></svg> {{ 'pptx.compare.reject' | translate }}
 								</button>
 							</div>
 						}
@@ -76402,15 +76984,19 @@ class ComparePanelComponent {
 						[attr.aria-label]="'pptx.compare.closePanel' | translate"
 						(click)="close.emit()"
 					>
-						✕
+						<svg lucideX class="h-4 w-4"></svg>
 					</button>
 				</div>
 				<!-- Accept all -->
 				@if (nonTrivialCount() > 0) {
 					<div class="pptx-ng-compare-acceptall">
-						<button type="button" class="pptx-ng-compare-acceptall-btn" (click)="handleAcceptAll()">
-							✓ {{ 'pptx.compare.acceptAll' | translate }}
+						<button
+							type="button"
+							class="pptx-ng-compare-acceptall-btn inline-flex items-center gap-1"
+							(click)="handleAcceptAll()"
+						>
+							<svg lucideCheck class="h-3.5 w-3.5"></svg> {{ 'pptx.compare.acceptAll' | translate }}
 						</button>
 					</div>
 				}
@@ -76436,11 +77022,11 @@ class ComparePanelComponent {
 				</div>
 			</div>
 		}
-	`, isInline: true, styles: [".pptx-ng-compare{position:fixed;inset-block:0;right:0;z-index:50;display:flex;flex-direction:column;width:440px;max-width:100%;border-left:1px solid var(--pptx-border, #374151);background:var(--pptx-popover, #0b1220);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:-12px 0 40px #00000080}.pptx-ng-compare-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--pptx-border, #374151)}.pptx-ng-compare-title{margin:0;font-size:.875rem;font-weight:500;color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-compare-summary{margin:.125rem 0 0;font-size:.6875rem;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-compare-close{padding:.375rem;border:none;border-radius:.25rem;background:transparent;color:var(--pptx-muted-foreground, #9ca3af);cursor:pointer;transition:background .15s ease}.pptx-ng-compare-close:hover{background:var(--pptx-muted, #1f2937);color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-compare-acceptall{padding:.5rem 1rem;border-bottom:1px solid var(--pptx-border, #374151)}.pptx-ng-compare-acceptall-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:none;border-radius:.25rem;background:#15803dcc;color:#f0fdf4;font-size:.75rem;cursor:pointer;transition:background .15s ease}.pptx-ng-compare-acceptall-btn:hover{background:#16a34a}.pptx-ng-compare-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:.75rem}.pptx-ng-compare-empty{padding:2rem 0;text-align:center;font-size:.75rem;color:var(--pptx-muted-foreground, #9ca3af)}\n"], dependencies: [{ kind: "component", type: SlideDiffRowComponent, selector: "pptx-slide-diff-row", inputs: ["diff", "diffIndex", "canvasSize", "mediaDataUrls", "accepted", "rejected"], outputs: ["accept", "reject"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-compare{position:fixed;inset-block:0;right:0;z-index:50;display:flex;flex-direction:column;width:440px;max-width:100%;border-left:1px solid var(--pptx-border, #374151);background:var(--pptx-popover, #0b1220);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:-12px 0 40px #00000080}.pptx-ng-compare-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--pptx-border, #374151)}.pptx-ng-compare-title{margin:0;font-size:.875rem;font-weight:500;color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-compare-summary{margin:.125rem 0 0;font-size:.6875rem;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-compare-close{padding:.375rem;border:none;border-radius:.25rem;background:transparent;color:var(--pptx-muted-foreground, #9ca3af);cursor:pointer;transition:background .15s ease}.pptx-ng-compare-close:hover{background:var(--pptx-muted, #1f2937);color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-compare-acceptall{padding:.5rem 1rem;border-bottom:1px solid var(--pptx-border, #374151)}.pptx-ng-compare-acceptall-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:none;border-radius:.25rem;background:#15803dcc;color:#f0fdf4;font-size:.75rem;cursor:pointer;transition:background .15s ease}.pptx-ng-compare-acceptall-btn:hover{background:#16a34a}.pptx-ng-compare-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:.75rem}.pptx-ng-compare-empty{padding:2rem 0;text-align:center;font-size:.75rem;color:var(--pptx-muted-foreground, #9ca3af)}\n"], dependencies: [{ kind: "component", type: SlideDiffRowComponent, selector: "pptx-slide-diff-row", inputs: ["diff", "diffIndex", "canvasSize", "mediaDataUrls", "accepted", "rejected"], outputs: ["accept", "reject"] }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ComparePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-compare-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SlideDiffRowComponent, TranslatePipe], template: `
+            args: [{ selector: 'pptx-compare-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SlideDiffRowComponent, TranslatePipe, LucideCheck, LucideX], template: `
 		@if (open() && compareResult(); as result) {
 			<div class="pptx-ng-compare">
 				<!-- Header -->
@@ -76466,15 +77052,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[attr.aria-label]="'pptx.compare.closePanel' | translate"
 						(click)="close.emit()"
 					>
-						✕
+						<svg lucideX class="h-4 w-4"></svg>
 					</button>
 				</div>
 				<!-- Accept all -->
 				@if (nonTrivialCount() > 0) {
 					<div class="pptx-ng-compare-acceptall">
-						<button type="button" class="pptx-ng-compare-acceptall-btn" (click)="handleAcceptAll()">
-							✓ {{ 'pptx.compare.acceptAll' | translate }}
+						<button
+							type="button"
+							class="pptx-ng-compare-acceptall-btn inline-flex items-center gap-1"
+							(click)="handleAcceptAll()"
+						>
+							<svg lucideCheck class="h-3.5 w-3.5"></svg> {{ 'pptx.compare.acceptAll' | translate }}
 						</button>
 					</div>
 				}
@@ -79627,6 +80217,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * prompt trigger) via {@link bind}; the template reads the signals / invokes the
  * handlers off the injected instance directly (same pattern as `session`/`xport`).
  *
+ * This service owns no DOM node, so the real browser Fullscreen API request/exit
+ * (mirroring React's `usePresentationMode` / Vue's `PresentationMode.vue`) is
+ * driven by `PresentationOverlayComponent` itself off this `presenting` signal's
+ * mount/unmount, not from here; see that component for the fullscreen wiring.
+ *
  * Provide it once on the viewer component (`providers: [ViewerPresentationModeService]`).
  */
 class ViewerPresentationModeService {
@@ -79653,7 +80248,11 @@ class ViewerPresentationModeService {
         }
         return this.host;
     }
-    /** Open the fullscreen presentation overlay from the current slide. */
+    /**
+     * Open the presentation overlay from the current slide. The overlay itself
+     * (`PresentationOverlayComponent`) requests real browser fullscreen once it
+     * mounts as a result of `presenting` flipping true.
+     */
     present() {
         const host = this.requireHost();
         if (host.slideCount() > 0) {
@@ -80277,9 +80876,14 @@ class PowerPointViewerComponent {
         // Hand the find/replace controller a slide-navigation callback so a match
         // can scroll its slide into view.
         this.findReplace.bind((index) => this.goTo(index));
-        // Hand the custom-shows controller the active-slide-index accessor so a
-        // normal (non-custom) show starts at the current slide.
-        this.customShowsCtl.bind(() => this.activeSlideIndex());
+        // Hand the custom-shows controller the active-slide-index accessor (so a
+        // normal show starts at the current slide) and the LIVE edited-slides
+        // accessor (so present mode reflects in-session edits like inserted media,
+        // mirroring React/Vue) rather than the pristine loaded deck.
+        this.customShowsCtl.bind({
+            activeSlideIndex: () => this.activeSlideIndex(),
+            liveSlides: () => this.displaySlidesMut(),
+        });
         // Hand the collaboration-session controller the host inputs it cannot own
         // (author name, share defaults, template-element supplier) and the
         // start/stop output emitters.
@@ -81380,7 +81984,12 @@ class PowerPointViewerComponent {
 						>
 							<div class="pptx-ng-mnotes-handle"></div>
 						</div>
-						<pptx-notes-panel [slide]="activeSlide()" (update)="canvasEditing.onNotesUpdate($event)" />
+						<pptx-notes-panel
+							[slide]="activeSlide()"
+							[expanded]="true"
+							(update)="canvasEditing.onNotesUpdate($event)"
+							(notesToggle)="mobileSheetSvc.toggleNotes()"
+						/>
 					</div>
 				}
@@ -81402,7 +82011,7 @@ class PowerPointViewerComponent {
 				/>
 			}
 		</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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "component", type: PresentationOverlayComponent, selector: "pptx-presentation-overlay", inputs: ["slides", "canvasSize", "mediaDataUrls", "startIndex"], outputs: ["indexChange", "closed", "annotationsExit"] }, { kind: "component", type: PresenterViewComponent, selector: "pptx-presenter-view", inputs: ["slides", "currentSlideIndex", "canvasSize", "templateElements", "mediaDataUrls", "presentationStartTime", "isAudienceWindowOpen"], outputs: ["movePresentationSlide", "exit", "openAudienceWindow", "closeAudienceWindow"] }, { kind: "component", type: MobilePresenterViewComponent, selector: "pptx-mobile-presenter-view", inputs: ["slides", "currentSlideIndex", "canvasSize", "templateElements", "mediaDataUrls", "presentationStartTime"], outputs: ["movePresentationSlide", "exit"] }, { 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: StatusBarComponent, selector: "pptx-status-bar", inputs: ["slideIndex", "slideCount", "canEdit", "dirty", "autosaveStatus", "notesOpen", "zoomPercent", "sorterActive", "presenting"], outputs: ["toggleNotes", "normalView", "openSorter", "slideShow", "zoomIn", "zoomOut", "zoomReset"] }, { kind: "component", type: EditorContextMenuComponent, selector: "pptx-editor-context-menu", inputs: ["x", "y", "slideIndex"], outputs: ["closed"] }, { kind: "component", type: ExportProgressModalComponent, selector: "pptx-export-progress-modal", inputs: ["open", "title", "progress", "statusMessage"], outputs: ["cancel"] }, { 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: RemoteSelectionOverlayComponent, selector: "pptx-remote-selection-overlay", inputs: ["presences", "elements", "activeSlideIndex", "zoom"] }, { kind: "component", type: FollowModeBarComponent, selector: "pptx-follow-mode-bar", inputs: ["presences", "followedClientId"], outputs: ["follow"] }, { 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", "connected", "userCount", "shareUrl", "p2p"], outputs: ["start", "stop", "close"] }, { kind: "component", type: BroadcastDialogComponent, selector: "pptx-broadcast-dialog", inputs: ["open", "defaults", "active", "connected", "viewerCount", "viewerUrl", "p2p"], outputs: ["start", "stop", "close"] }, { kind: "component", type: MobileBottomBarComponent, selector: "pptx-mobile-bottom-bar", inputs: ["slideCount", "commentCount", "activeSheet"], outputs: ["openSlides", "insert", "openFormat", "openComments", "notes"] }, { kind: "component", type: MobileMenuSheetComponent, selector: "pptx-mobile-menu-sheet", inputs: ["open", "slideCount", "exporting", "showNotes", "canEdit"], outputs: ["closed", "openFind", "openSorter", "toggleNotes", "insertText", "present", "openFile", "savePptx", "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: MobileToolbarComponent, selector: "pptx-mobile-toolbar", inputs: ["canUndo", "canRedo", "canPresent", "canEdit", "menuOpen"], outputs: ["toggleMenu", "undo", "redo", "save", "present"] }, { kind: "component", type: NotesPanelComponent, selector: "pptx-notes-panel", inputs: ["slide", "expanded"], outputs: ["update", "notesToggle"] }, { kind: "component", type: RibbonComponent, selector: "pptx-ribbon", inputs: ["slideIndex", "slideCount", "canEdit", "selectedElement", "zoomPercent", "formatPainterActive", "canActivateFormatPainter", "exporting", "showGrid", "showRulers", "showGuides", "snapToGrid", "eyedropperActive", "themeGalleryOpen", "sidebarCollapsed", "inspectorOpen", "commentsOpen", "commentCount", "findOpen", "collabConnected", "connectedCount"], outputs: ["prev", "next", "zoomIn", "zoomOut", "zoomReset", "find", "present", "presenter", "record", "share", "broadcast", "openFile", "save", "toggleSidebar", "signatures", "info", "print", "comments", "a11y", "link", "openSorter", "toggleNotes", "toggleFormatPainter", "exportPng", "exportPdf", "exportGif", "exportVideo", "replace", "toggleInspector", "drawToolChange", "toggleThemeGallery", "toggleGrid", "toggleRulers", "toggleGuides", "toggleSelectionPane", "openCustomShows", "toggleSnapToGrid", "toggleEyedropper", "openSmartArtDialog", "openEquationDialog", "openSetUpSlideShow", "openCompare", "openPassword", "openFontEmbedding", "openVersionHistory", "openShortcuts", "shapeInsert", "moveLayer", "moveLayerToEdge"] }, { kind: "component", type: TitleBarComponent, selector: "pptx-title-bar", inputs: ["canEdit", "fileName", "isDirty", "autosaveStatus", "autosaveEnabled", "canUndo", "canRedo", "undoLabel", "redoLabel", "findReplaceOpen"], outputs: ["toggleAutosave", "save", "undo", "redo", "toggleFindReplace", "commandSearch"] }, { kind: "component", type: ThemeGalleryComponent, selector: "pptx-theme-gallery", inputs: ["open", "activeName"], outputs: ["applyTheme", "close"] }, { kind: "component", type: SelectionPaneComponent, selector: "pptx-selection-pane", inputs: ["elements", "selectedIds"], outputs: ["selectElement", "bringForward", "sendBackward", "toggleHidden"] }, { kind: "component", type: CustomShowsComponent, selector: "pptx-custom-shows", inputs: ["open", "slides", "customShows", "activeCustomShowId"], outputs: ["create", "remove", "update", "setActive", "close"] }, { kind: "component", type: InsertSmartArtDialogComponent, selector: "pptx-insert-smart-art-dialog", inputs: ["open"], outputs: ["close", "insert"] }, { kind: "component", type: ViewerExtraDialogsComponent, selector: "pptx-viewer-extra-dialogs", inputs: ["activeSlideIndex", "selectedElementId", "filePath", "customShows"], outputs: ["restoreContent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], 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", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "component", type: PresentationOverlayComponent, selector: "pptx-presentation-overlay", inputs: ["slides", "canvasSize", "mediaDataUrls", "startIndex"], outputs: ["indexChange", "closed", "annotationsExit"] }, { kind: "component", type: PresenterViewComponent, selector: "pptx-presenter-view", inputs: ["slides", "currentSlideIndex", "canvasSize", "templateElements", "mediaDataUrls", "presentationStartTime", "isAudienceWindowOpen"], outputs: ["movePresentationSlide", "exit", "openAudienceWindow", "closeAudienceWindow"] }, { kind: "component", type: MobilePresenterViewComponent, selector: "pptx-mobile-presenter-view", inputs: ["slides", "currentSlideIndex", "canvasSize", "templateElements", "mediaDataUrls", "presentationStartTime"], outputs: ["movePresentationSlide", "exit"] }, { 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: StatusBarComponent, selector: "pptx-status-bar", inputs: ["slideIndex", "slideCount", "canEdit", "dirty", "autosaveStatus", "notesOpen", "zoomPercent", "sorterActive", "presenting"], outputs: ["toggleNotes", "normalView", "openSorter", "slideShow", "zoomIn", "zoomOut", "zoomReset"] }, { kind: "component", type: EditorContextMenuComponent, selector: "pptx-editor-context-menu", inputs: ["x", "y", "slideIndex"], outputs: ["closed"] }, { kind: "component", type: ExportProgressModalComponent, selector: "pptx-export-progress-modal", inputs: ["open", "title", "progress", "statusMessage"], outputs: ["cancel"] }, { 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: RemoteSelectionOverlayComponent, selector: "pptx-remote-selection-overlay", inputs: ["presences", "elements", "activeSlideIndex", "zoom"] }, { kind: "component", type: FollowModeBarComponent, selector: "pptx-follow-mode-bar", inputs: ["presences", "followedClientId"], outputs: ["follow"] }, { 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", "connected", "userCount", "shareUrl", "p2p"], outputs: ["start", "stop", "close"] }, { kind: "component", type: BroadcastDialogComponent, selector: "pptx-broadcast-dialog", inputs: ["open", "defaults", "active", "connected", "viewerCount", "viewerUrl", "p2p"], outputs: ["start", "stop", "close"] }, { kind: "component", type: MobileBottomBarComponent, selector: "pptx-mobile-bottom-bar", inputs: ["slideCount", "commentCount", "activeSheet"], outputs: ["openSlides", "insert", "openFormat", "openComments", "notes"] }, { kind: "component", type: MobileMenuSheetComponent, selector: "pptx-mobile-menu-sheet", inputs: ["open", "slideCount", "exporting", "showNotes", "canEdit"], outputs: ["closed", "openFind", "openSorter", "toggleNotes", "insertText", "present", "openFile", "savePptx", "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: MobileToolbarComponent, selector: "pptx-mobile-toolbar", inputs: ["canUndo", "canRedo", "canPresent", "canEdit", "menuOpen"], outputs: ["toggleMenu", "undo", "redo", "save", "present"] }, { kind: "component", type: NotesPanelComponent, selector: "pptx-notes-panel", inputs: ["slide", "expanded"], outputs: ["update", "notesToggle"] }, { kind: "component", type: RibbonComponent, selector: "pptx-ribbon", inputs: ["slideIndex", "slideCount", "canEdit", "selectedElement", "zoomPercent", "formatPainterActive", "canActivateFormatPainter", "exporting", "showGrid", "showRulers", "showGuides", "snapToGrid", "eyedropperActive", "themeGalleryOpen", "sidebarCollapsed", "inspectorOpen", "commentsOpen", "commentCount", "findOpen", "collabConnected", "connectedCount"], outputs: ["prev", "next", "zoomIn", "zoomOut", "zoomReset", "find", "present", "presenter", "record", "share", "broadcast", "openFile", "save", "toggleSidebar", "signatures", "info", "print", "comments", "a11y", "link", "openSorter", "toggleNotes", "toggleFormatPainter", "exportPng", "exportPdf", "exportGif", "exportVideo", "replace", "toggleInspector", "drawToolChange", "toggleThemeGallery", "toggleGrid", "toggleRulers", "toggleGuides", "toggleSelectionPane", "openCustomShows", "toggleSnapToGrid", "toggleEyedropper", "openSmartArtDialog", "openEquationDialog", "openSetUpSlideShow", "openCompare", "openPassword", "openFontEmbedding", "openVersionHistory", "openShortcuts", "shapeInsert", "moveLayer", "moveLayerToEdge"] }, { kind: "component", type: TitleBarComponent, selector: "pptx-title-bar", inputs: ["canEdit", "fileName", "isDirty", "autosaveStatus", "autosaveEnabled", "canUndo", "canRedo", "undoLabel", "redoLabel", "findReplaceOpen"], outputs: ["toggleAutosave", "save", "undo", "redo", "toggleFindReplace", "commandSearch"] }, { kind: "component", type: ThemeGalleryComponent, selector: "pptx-theme-gallery", inputs: ["open", "activeName"], outputs: ["applyTheme", "close"] }, { kind: "component", type: SelectionPaneComponent, selector: "pptx-selection-pane", inputs: ["elements", "selectedIds"], outputs: ["selectElement", "bringForward", "sendBackward", "toggleHidden"] }, { kind: "component", type: CustomShowsComponent, selector: "pptx-custom-shows", inputs: ["open", "slides", "customShows", "activeCustomShowId"], outputs: ["create", "remove", "update", "setActive", "close"] }, { kind: "component", type: InsertSmartArtDialogComponent, selector: "pptx-insert-smart-art-dialog", inputs: ["open"], outputs: ["close", "insert"] }, { kind: "component", type: ViewerExtraDialogsComponent, selector: "pptx-viewer-extra-dialogs", inputs: ["activeSlideIndex", "selectedElementId", "filePath", "customShows"], outputs: ["restoreContent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PowerPointViewerComponent, decorators: [{
             type: Component,
@@ -82051,7 +82660,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						>
 							<div class="pptx-ng-mnotes-handle"></div>
 						</div>
-						<pptx-notes-panel [slide]="activeSlide()" (update)="canvasEditing.onNotesUpdate($event)" />
+						<pptx-notes-panel
+							[slide]="activeSlide()"
+							[expanded]="true"
+							(update)="canvasEditing.onNotesUpdate($event)"
+							(notesToggle)="mobileSheetSvc.toggleNotes()"
+						/>
 					</div>
 				}