pptx-angular-viewer 1.3.1 → 1.4.0

package/fesm2022/pptx-angular-viewer.mjs

@@ -1,6 +1,6 @@
 import { NgStyle, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, input, output, computed, ChangeDetectionStrategy, Component, signal, Injectable, inject, DestroyRef, HostListener, effect, ElementRef, viewChild, afterNextRender, Injector } 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, setChartTitle, setChartLegend, setChartDataLabels, setChartAxis, setChartSeriesTrendline, setChartSeriesErrorBars, setChartDataPointLabel, setChartAxisLogScale, setChartAxisTitleStyle, setChartAxisGridlineStyle, setChartSeriesMarker, setChartSeriesChartType, setChartDataPointFill, setChartDataPointExplosion, chartDataAddSeries, chartDataRemoveSeries, chartDataAddCategory, chartDataRemoveCategory, chartDataUpdatePoint, chartDataChangeType, setSmartArtNodeStyle, updateSmartArtNodeText, addSmartArtNodeAsChild, removeSmartArtNode, promoteSmartArtNode, demoteSmartArtNode, reorderSmartArtNode, switchSmartArtLayout, SWITCHABLE_LAYOUT_TYPES, isInkElement, parseDataUrlToBytes, isZoomElement, THEME_PRESETS, applyThemeToData, getAnimationPresetInfo } from 'pptx-viewer-core';
 import DOMPurify from 'dompurify';
@@ -32137,6 +32137,194 @@ const MATERIAL_PRESETS = [
     { value: 'translucentPowder', label: 'Translucent Powder' },
 ];
 
+/**
+ * PowerPoint-style title bar: shared pure logic + Tailwind class tokens.
+ *
+ * The title bar is the top chrome row above the ribbon (AutoSave toggle,
+ * quick-access Save/Undo/Redo, file name + save-location status, centred
+ * search box). Every binding (React/Vue/Angular) renders its own thin view
+ * from these tokens so the three stay pixel-identical.
+ */
+/**
+ * Resolve the i18n key for the save-status text shown next to the file name
+ * (PowerPoint shows "Saved to this PC" there).
+ */
+function resolveTitleBarStatusKey(input) {
+    const { autosaveState, isDirty, autosaveEnabled } = input;
+    if (autosaveEnabled && autosaveState === 'saving') {
+        return 'pptx.autosave.saving';
+    }
+    if (autosaveEnabled && autosaveState === 'error') {
+        return 'pptx.autosave.error';
+    }
+    if (isDirty) {
+        return 'pptx.statusBar.unsavedChanges';
+    }
+    return 'pptx.titleBar.savedToThisPc';
+}
+/** Default document name shown when the host supplies no file name. */
+const TITLE_BAR_DEFAULT_FILE_KEY = 'pptx.titleBar.defaultFileName';
+// ---------------------------------------------------------------------------
+// Class tokens (Tailwind), shared verbatim by all three bindings
+// ---------------------------------------------------------------------------
+const TITLE_BAR_CLASSES = {
+    /** Outer row container. Hidden on mobile (the compact toolbar covers it). */
+    container: 'flex items-center gap-1 h-9 px-2 border-b border-border/60 bg-secondary/80 text-[11px] select-none max-md:hidden',
+    /** Small square app mark on the far left. */
+    logo: 'flex items-center justify-center w-5 h-5 rounded-sm bg-[#c43e1c] text-white text-[10px] font-bold shrink-0',
+    /** Wrapper for the AutoSave label + switch. */
+    autosaveGroup: 'flex items-center gap-1.5 pl-1.5 pr-0.5 shrink-0',
+    autosaveLabel: 'text-[11px] text-muted-foreground whitespace-nowrap',
+    /** Switch track, base classes; combine with on/off variant. */
+    toggleTrack: 'relative inline-flex items-center w-7 h-3.5 rounded-full transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed',
+    toggleTrackOn: 'bg-primary',
+    toggleTrackOff: 'bg-muted-foreground/40',
+    /** Switch knob, base classes; combine with on/off variant. */
+    toggleKnob: 'absolute w-2.5 h-2.5 rounded-full bg-white shadow-sm transition-transform',
+    toggleKnobOn: 'translate-x-[15px]',
+    toggleKnobOff: 'translate-x-0.5',
+    /** Quick-access icon button (Save / Undo / Redo). */
+    quickButton: 'p-1 rounded-sm transition-colors hover:bg-accent/60 text-muted-foreground disabled:opacity-40 disabled:cursor-not-allowed active:scale-90 active:opacity-70',
+    separator: 'w-px h-4 bg-border/60 mx-1 shrink-0',
+    /** File name + status wrapper (centred block in PowerPoint sits left of search). */
+    fileGroup: 'flex items-baseline gap-1.5 px-1 min-w-0 shrink',
+    fileName: 'text-[12px] font-medium text-foreground whitespace-nowrap overflow-hidden text-ellipsis max-w-[240px]',
+    statusDot: 'text-muted-foreground/70',
+    statusText: 'text-[11px] text-muted-foreground whitespace-nowrap',
+    statusError: 'text-red-400',
+    statusSaving: 'text-yellow-500',
+    /** Centred search area. */
+    searchWrap: 'flex-1 flex justify-center min-w-0 px-2',
+    searchBox: 'flex items-center gap-2 w-full max-w-md px-3 py-[3px] rounded-md bg-background/70 border border-border/60 text-muted-foreground hover:bg-background hover:text-foreground transition-colors',
+    searchIcon: 'w-3 h-3 shrink-0',
+    searchLabel: 'text-[11px] truncate',
+    /** Right-hand spacer mirroring the left block so search stays centred. */
+    rightSpacer: 'flex items-center justify-end gap-1 shrink-0',
+};
+/** Ribbon tab-row right-side actions (Record + Share live on the tab row). */
+const TAB_ROW_ACTION_CLASSES = {
+    record: 'inline-flex items-center gap-1.5 px-2.5 py-1 mr-1 rounded-sm text-[11px] font-medium text-foreground hover:bg-accent/60 transition-colors whitespace-nowrap',
+    recordDot: 'w-2 h-2 rounded-full bg-red-600 shrink-0',
+};
+
+/**
+ * IndexedDB-backed autosave recovery store, shared by every binding.
+ *
+ * Extracted from the React `useAutosave` hook so Vue/Angular reuse the same
+ * database (`pptx-viewer-autosave` / `recoveryVersions`) instead of each
+ * binding growing its own copy. Records are keyed by the host-supplied file
+ * path; on quota exhaustion the oldest record is evicted and the write is
+ * retried once.
+ */
+const AUTOSAVE_DB_NAME = 'pptx-viewer-autosave';
+const AUTOSAVE_DB_VERSION = 1;
+const AUTOSAVE_STORE_NAME = 'recoveryVersions';
+/** Default autosave interval in seconds. */
+const AUTOSAVE_DEFAULT_INTERVAL_SECONDS = 120;
+/** Minimum allowed autosave interval in seconds. */
+const AUTOSAVE_MIN_INTERVAL_SECONDS = 10;
+/** Clamp a user-supplied interval (seconds) and convert to milliseconds. */
+function autosaveIntervalMs(intervalSeconds) {
+    return Math.max(intervalSeconds, AUTOSAVE_MIN_INTERVAL_SECONDS) * 1000;
+}
+function openAutosaveDb$1() {
+    return new Promise((resolve, reject) => {
+        const req = indexedDB.open(AUTOSAVE_DB_NAME, AUTOSAVE_DB_VERSION);
+        req.onupgradeneeded = () => {
+            const db = req.result;
+            if (!db.objectStoreNames.contains(AUTOSAVE_STORE_NAME)) {
+                db.createObjectStore(AUTOSAVE_STORE_NAME, { keyPath: 'key' });
+            }
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+}
+/** Delete the oldest entry in the autosave store. Returns true if one was removed. */
+async function deleteOldestAutosaveEntry() {
+    const db = await openAutosaveDb$1();
+    return new Promise((resolve) => {
+        try {
+            const tx = db.transaction(AUTOSAVE_STORE_NAME, 'readwrite');
+            const store = tx.objectStore(AUTOSAVE_STORE_NAME);
+            let oldestKey = null;
+            let oldestTimestamp = Infinity;
+            const cursorReq = store.openCursor();
+            cursorReq.onsuccess = () => {
+                const cursor = cursorReq.result;
+                if (cursor) {
+                    const value = cursor.value;
+                    if (typeof value.timestamp === 'number' && value.timestamp < oldestTimestamp) {
+                        oldestTimestamp = value.timestamp;
+                        oldestKey = cursor.primaryKey;
+                    }
+                    cursor.continue();
+                }
+                else if (oldestKey !== null) {
+                    store.delete(oldestKey);
+                }
+            };
+            tx.oncomplete = () => {
+                db.close();
+                resolve(oldestKey !== null);
+            };
+            tx.onerror = () => {
+                db.close();
+                resolve(false);
+            };
+        }
+        catch {
+            try {
+                db.close();
+            }
+            catch {
+                // Ignore
+            }
+            resolve(false);
+        }
+    });
+}
+function putAutosaveRecord(filePath, data) {
+    return openAutosaveDb$1().then((db) => new Promise((resolve, reject) => {
+        const tx = db.transaction(AUTOSAVE_STORE_NAME, 'readwrite');
+        const store = tx.objectStore(AUTOSAVE_STORE_NAME);
+        store.put({
+            key: filePath,
+            data,
+            timestamp: Date.now(),
+            size: data.byteLength,
+        });
+        tx.oncomplete = () => {
+            db.close();
+            resolve(true);
+        };
+        tx.onerror = () => {
+            db.close();
+            reject(tx.error);
+        };
+    }));
+}
+/**
+ * Persist a recovery snapshot. On QuotaExceededError the oldest record is
+ * dropped and the write retried once.
+ */
+async function saveAutosaveSnapshot(filePath, data) {
+    try {
+        return await putAutosaveRecord(filePath, data);
+    }
+    catch (err) {
+        const errName = err instanceof Error || err instanceof DOMException ? err.name : '';
+        if (errName !== 'QuotaExceededError') {
+            throw err;
+        }
+        const deleted = await deleteOldestAutosaveEntry();
+        if (!deleted) {
+            throw err;
+        }
+        return putAutosaveRecord(filePath, data);
+    }
+}
+
 /**
  * Framework-agnostic rendering & editing helpers shared by the React, Vue, and
  * Angular `pptx-viewer` bindings. Pure TypeScript (no framework imports) — each
@@ -34902,6 +35090,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Injectable
         }] });
 
+/**
+ * autosave.service.ts: periodic recovery-snapshot autosave for the Angular
+ * editor, the counterpart of React's `useAutosave` hook.
+ *
+ * Every N seconds (default {@link AUTOSAVE_DEFAULT_INTERVAL_SECONDS}, clamped by
+ * the shared {@link autosaveIntervalMs}) it serialises the edited deck and writes
+ * it to the shared IndexedDB recovery store via {@link saveAutosaveSnapshot} when
+ * the document is dirty, a `filePath` key is set, autosave is enabled, and no
+ * save is already in flight. The IndexedDB store itself lives in
+ * `pptx-viewer-shared` so React/Vue/Angular share one recovery database.
+ *
+ * Provide it once on the viewer component (`providers: [AutosaveService]`). The
+ * component wires its reactive accessors via {@link bind}; the resulting
+ * {@link status} signal feeds both the title bar and the status bar.
+ */
+class AutosaveService {
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    /** Current autosave status, surfaced in the title bar and status bar. */
+    status = signal({ state: 'idle' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    host = null;
+    timer = null;
+    saving = false;
+    /**
+     * Wire the host accessors (called once from the component constructor). An
+     * effect re-establishes the interval whenever `enabled`, `filePath`, or the
+     * interval length changes, matching React's interval-effect dependencies.
+     */
+    bind(host) {
+        this.host = host;
+        this.destroyRef.onDestroy(() => this.clearTimer());
+        effect(() => {
+            const enabled = host.enabled();
+            const filePath = host.filePath();
+            const seconds = host.intervalSeconds?.() ?? AUTOSAVE_DEFAULT_INTERVAL_SECONDS;
+            this.clearTimer();
+            if (!enabled || !filePath) {
+                return;
+            }
+            this.timer = setInterval(() => {
+                void this.doAutosave();
+            }, autosaveIntervalMs(seconds));
+        }, { injector: this.injector });
+    }
+    /** Manually trigger an autosave right now (mirrors React's `triggerAutosave`). */
+    async triggerAutosave() {
+        await this.doAutosave();
+    }
+    async doAutosave() {
+        const host = this.host;
+        if (!host) {
+            return;
+        }
+        const filePath = host.filePath();
+        if (!filePath || !host.isDirty() || this.saving) {
+            return;
+        }
+        this.saving = true;
+        this.status.set({ state: 'saving' });
+        try {
+            const data = await host.serialize();
+            if (!data) {
+                this.status.set({ state: 'idle' });
+                return;
+            }
+            await saveAutosaveSnapshot(filePath, data);
+            this.status.set({ state: 'saved', timestamp: Date.now() });
+        }
+        catch (err) {
+            this.status.set({
+                state: 'error',
+                message: err instanceof Error ? err.message : 'Autosave failed',
+            });
+        }
+        finally {
+            this.saving = false;
+        }
+    }
+    clearTimer() {
+        if (this.timer !== null) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AutosaveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AutosaveService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AutosaveService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * broadcast-helpers.ts: thin re-export of the shared Broadcast-dialog helpers.
  *
@@ -69016,23 +69296,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * chrome, at parity with React's `toolbar/ToolbarPrimaryRow.tsx`.
  *
  * Layout (mirrors React):
- *   LEFT  : slides-pane toggle, Undo, Redo, Find
+ *   LEFT  : slides-pane toggle
  *   RIGHT : Comments (with count), Present split-button + dropdown
  *           (From Beginning / Presenter View / Broadcast), +Show (custom
- *           shows), Share, Inspector toggle, overflow "..." menu (exports /
- *           print / properties / accessibility / save).
+ *           shows), Inspector toggle, overflow "..." menu (exports / print /
+ *           properties / accessibility / save).
  *
- * Slide navigation and zoom intentionally live in the bottom status bar (see
- * {@link StatusBarComponent}), matching React. Undo/redo bind straight to the
- * shared {@link EditorStateService}; everything else is an `output()` the
- * {@link PowerPointViewerComponent} already handles.
+ * Undo/Redo/Find and Save moved up to the title bar; Record and Share moved to
+ * the ribbon tab row (both mirroring React). Slide navigation and zoom live in
+ * the bottom status bar (see {@link StatusBarComponent}). Everything here is an
+ * `output()` the {@link PowerPointViewerComponent} already handles.
  */
 class RibbonPrimaryRowComponent {
-    editor = inject(EditorStateService);
     slideCount = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "slideCount" }] : /* istanbul ignore next */ []));
-    canEdit = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
     sidebarCollapsed = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sidebarCollapsed" }] : /* istanbul ignore next */ []));
     inspectorOpen = input(false, /* @ts-ignore */
@@ -69041,20 +69318,12 @@ class RibbonPrimaryRowComponent {
     ...(ngDevMode ? [{ debugName: "commentsOpen" }] : /* istanbul ignore next */ []));
     commentCount = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "commentCount" }] : /* istanbul ignore next */ []));
-    findOpen = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "findOpen" }] : /* istanbul ignore next */ []));
-    collabConnected = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collabConnected" }] : /* istanbul ignore next */ []));
-    connectedCount = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "connectedCount" }] : /* istanbul ignore next */ []));
     toggleSidebar = output();
-    toggleFind = output();
     toggleComments = output();
     present = output();
     presenter = output();
     broadcast = output();
     openCustomShows = output();
-    share = output();
     toggleInspector = output();
     exportPng = output();
     exportPdf = output();
@@ -69112,9 +69381,9 @@ class RibbonPrimaryRowComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonPrimaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RibbonPrimaryRowComponent, isStandalone: true, selector: "pptx-ribbon-primary-row", inputs: { slideCount: { classPropertyName: "slideCount", publicName: "slideCount", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, inspectorOpen: { classPropertyName: "inspectorOpen", publicName: "inspectorOpen", isSignal: true, isRequired: false, transformFunction: null }, commentsOpen: { classPropertyName: "commentsOpen", publicName: "commentsOpen", isSignal: true, isRequired: false, transformFunction: null }, commentCount: { classPropertyName: "commentCount", publicName: "commentCount", isSignal: true, isRequired: false, transformFunction: null }, findOpen: { classPropertyName: "findOpen", publicName: "findOpen", isSignal: true, isRequired: false, transformFunction: null }, collabConnected: { classPropertyName: "collabConnected", publicName: "collabConnected", isSignal: true, isRequired: false, transformFunction: null }, connectedCount: { classPropertyName: "connectedCount", publicName: "connectedCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSidebar: "toggleSidebar", toggleFind: "toggleFind", toggleComments: "toggleComments", present: "present", presenter: "presenter", broadcast: "broadcast", openCustomShows: "openCustomShows", share: "share", toggleInspector: "toggleInspector", exportPng: "exportPng", exportPdf: "exportPdf", exportGif: "exportGif", exportVideo: "exportVideo", print: "print", info: "info", a11y: "a11y", save: "save" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RibbonPrimaryRowComponent, isStandalone: true, selector: "pptx-ribbon-primary-row", inputs: { slideCount: { classPropertyName: "slideCount", publicName: "slideCount", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, inspectorOpen: { classPropertyName: "inspectorOpen", publicName: "inspectorOpen", isSignal: true, isRequired: false, transformFunction: null }, commentsOpen: { classPropertyName: "commentsOpen", publicName: "commentsOpen", isSignal: true, isRequired: false, transformFunction: null }, commentCount: { classPropertyName: "commentCount", publicName: "commentCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSidebar: "toggleSidebar", toggleComments: "toggleComments", present: "present", presenter: "presenter", broadcast: "broadcast", openCustomShows: "openCustomShows", toggleInspector: "toggleInspector", exportPng: "exportPng", exportPdf: "exportPdf", exportGif: "exportGif", exportVideo: "exportVideo", print: "print", info: "info", a11y: "a11y", save: "save" }, ngImport: i0, template: `
 		<div class="flex items-center gap-0.5 px-1.5 py-0.5">
-			<!-- Left: slides pane toggle + undo/redo + find -->
+			<!-- Left: slides pane toggle (undo/redo/find moved to the title bar) -->
 			<button
 				type="button"
 				class="pptx-rb-icon"
@@ -69125,40 +69394,11 @@ class RibbonPrimaryRowComponent {
 			>
 				⫐
 			</button>
-			<span class="mx-1 h-5 w-px self-center bg-border/50"></span>
-			<button
-				type="button"
-				class="pptx-rb-icon"
-				[attr.aria-label]="'pptx.toolbar.undo' | translate"
-				[disabled]="!canEdit() || !editor.canUndo()"
-				(click)="editor.undo()"
-			>
-				↶
-			</button>
-			<button
-				type="button"
-				class="pptx-rb-icon"
-				[attr.aria-label]="'pptx.toolbar.redo' | translate"
-				[disabled]="!canEdit() || !editor.canRedo()"
-				(click)="editor.redo()"
-			>
-				↷
-			</button>
-			<button
-				type="button"
-				class="pptx-rb-icon"
-				[ngClass]="findOpen() ? 'text-foreground' : 'text-muted-foreground'"
-				[title]="'pptx.toolbar.findAndReplace' | translate"
-				[attr.aria-label]="'pptx.toolbar.findAndReplace' | translate"
-				(click)="toggleFind.emit()"
-			>
-				⌕
-			</button>
 
 			<!-- Center spacer -->
 			<div class="min-w-2 flex-1"></div>
 
-			<!-- Right: comments + present + show + share + inspector + overflow -->
+			<!-- Right: comments + present + show + inspector + overflow -->
 			<button
 				type="button"
 				class="pptx-rb-icon relative"
@@ -69239,24 +69479,6 @@ class RibbonPrimaryRowComponent {
 
 			<span class="mx-1 h-5 w-px self-center bg-border/50"></span>
 
-			<button
-				type="button"
-				class="inline-flex items-center gap-1 rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
-				[ngClass]="
-					collabConnected() ? 'bg-green-600 hover:bg-green-500' : 'bg-primary hover:bg-primary/90'
-				"
-				[title]="'pptx.ribbon.shareForCollaboration' | translate"
-				[attr.aria-label]="'pptx.toolbar.share' | translate"
-				(click)="share.emit()"
-			>
-				⇪
-				{{
-					collabConnected()
-						? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
-						: ('pptx.toolbar.share' | translate)
-				}}
-			</button>
-
 			<button
 				type="button"
 				class="pptx-rb-icon"
@@ -69313,7 +69535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     imports: [NgClass, TranslatePipe],
                     template: `
 		<div class="flex items-center gap-0.5 px-1.5 py-0.5">
-			<!-- Left: slides pane toggle + undo/redo + find -->
+			<!-- Left: slides pane toggle (undo/redo/find moved to the title bar) -->
 			<button
 				type="button"
 				class="pptx-rb-icon"
@@ -69324,40 +69546,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			>
 				⫐
 			</button>
-			<span class="mx-1 h-5 w-px self-center bg-border/50"></span>
-			<button
-				type="button"
-				class="pptx-rb-icon"
-				[attr.aria-label]="'pptx.toolbar.undo' | translate"
-				[disabled]="!canEdit() || !editor.canUndo()"
-				(click)="editor.undo()"
-			>
-				↶
-			</button>
-			<button
-				type="button"
-				class="pptx-rb-icon"
-				[attr.aria-label]="'pptx.toolbar.redo' | translate"
-				[disabled]="!canEdit() || !editor.canRedo()"
-				(click)="editor.redo()"
-			>
-				↷
-			</button>
-			<button
-				type="button"
-				class="pptx-rb-icon"
-				[ngClass]="findOpen() ? 'text-foreground' : 'text-muted-foreground'"
-				[title]="'pptx.toolbar.findAndReplace' | translate"
-				[attr.aria-label]="'pptx.toolbar.findAndReplace' | translate"
-				(click)="toggleFind.emit()"
-			>
-				⌕
-			</button>
 
 			<!-- Center spacer -->
 			<div class="min-w-2 flex-1"></div>
 
-			<!-- Right: comments + present + show + share + inspector + overflow -->
+			<!-- Right: comments + present + show + inspector + overflow -->
 			<button
 				type="button"
 				class="pptx-rb-icon relative"
@@ -69438,24 +69631,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 			<span class="mx-1 h-5 w-px self-center bg-border/50"></span>
 
-			<button
-				type="button"
-				class="inline-flex items-center gap-1 rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
-				[ngClass]="
-					collabConnected() ? 'bg-green-600 hover:bg-green-500' : 'bg-primary hover:bg-primary/90'
-				"
-				[title]="'pptx.ribbon.shareForCollaboration' | translate"
-				[attr.aria-label]="'pptx.toolbar.share' | translate"
-				(click)="share.emit()"
-			>
-				⇪
-				{{
-					collabConnected()
-						? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
-						: ('pptx.toolbar.share' | translate)
-				}}
-			</button>
-
 			<button
 				type="button"
 				class="pptx-rb-icon"
@@ -69503,7 +69678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 		</div>
 	`,
                 }]
-        }], propDecorators: { slideCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideCount", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], inspectorOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorOpen", required: false }] }], commentsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentsOpen", required: false }] }], commentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentCount", required: false }] }], findOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "findOpen", required: false }] }], collabConnected: [{ type: i0.Input, args: [{ isSignal: true, alias: "collabConnected", required: false }] }], connectedCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedCount", required: false }] }], toggleSidebar: [{ type: i0.Output, args: ["toggleSidebar"] }], toggleFind: [{ type: i0.Output, args: ["toggleFind"] }], toggleComments: [{ type: i0.Output, args: ["toggleComments"] }], present: [{ type: i0.Output, args: ["present"] }], presenter: [{ type: i0.Output, args: ["presenter"] }], broadcast: [{ type: i0.Output, args: ["broadcast"] }], openCustomShows: [{ type: i0.Output, args: ["openCustomShows"] }], share: [{ type: i0.Output, args: ["share"] }], toggleInspector: [{ type: i0.Output, args: ["toggleInspector"] }], exportPng: [{ type: i0.Output, args: ["exportPng"] }], exportPdf: [{ type: i0.Output, args: ["exportPdf"] }], exportGif: [{ type: i0.Output, args: ["exportGif"] }], exportVideo: [{ type: i0.Output, args: ["exportVideo"] }], print: [{ type: i0.Output, args: ["print"] }], info: [{ type: i0.Output, args: ["info"] }], a11y: [{ type: i0.Output, args: ["a11y"] }], save: [{ type: i0.Output, args: ["save"] }] } });
+        }], propDecorators: { slideCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideCount", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], inspectorOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorOpen", required: false }] }], commentsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentsOpen", required: false }] }], commentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentCount", required: false }] }], toggleSidebar: [{ type: i0.Output, args: ["toggleSidebar"] }], toggleComments: [{ type: i0.Output, args: ["toggleComments"] }], present: [{ type: i0.Output, args: ["present"] }], presenter: [{ type: i0.Output, args: ["presenter"] }], broadcast: [{ type: i0.Output, args: ["broadcast"] }], openCustomShows: [{ type: i0.Output, args: ["openCustomShows"] }], toggleInspector: [{ type: i0.Output, args: ["toggleInspector"] }], exportPng: [{ type: i0.Output, args: ["exportPng"] }], exportPdf: [{ type: i0.Output, args: ["exportPdf"] }], exportGif: [{ type: i0.Output, args: ["exportGif"] }], exportVideo: [{ type: i0.Output, args: ["exportVideo"] }], print: [{ type: i0.Output, args: ["print"] }], info: [{ type: i0.Output, args: ["info"] }], a11y: [{ type: i0.Output, args: ["a11y"] }], save: [{ type: i0.Output, args: ["save"] }] } });
 
 /**
  * ribbon-review-section.component.ts: the Review ribbon tab (Comments,
@@ -70209,6 +70384,8 @@ class RibbonComponent {
     find = output();
     present = output();
     presenter = output();
+    /** Emitted by the tab-row Record button (starts a slide-show run-through). */
+    record = output();
     share = output();
     broadcast = output();
     openFile = output();
@@ -70283,6 +70460,8 @@ class RibbonComponent {
     /** Emitted when the user clicks "Shortcuts" in the Help tab. */
     openShortcuts = output();
     tabs = TABS;
+    /** Shared class tokens for the tab-row Record button. */
+    tra = TAB_ROW_ACTION_CLASSES;
     activeTab = signal('home', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     /** Ribbon content expanded (true) vs collapsed to just the tab bar (false). */
@@ -70315,7 +70494,7 @@ class RibbonComponent {
         this.drawToolChange.emit(state);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RibbonComponent, isStandalone: true, selector: "pptx-ribbon", inputs: { slideIndex: { classPropertyName: "slideIndex", publicName: "slideIndex", isSignal: true, isRequired: false, transformFunction: null }, slideCount: { classPropertyName: "slideCount", publicName: "slideCount", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, selectedElement: { classPropertyName: "selectedElement", publicName: "selectedElement", isSignal: true, isRequired: false, transformFunction: null }, zoomPercent: { classPropertyName: "zoomPercent", publicName: "zoomPercent", isSignal: true, isRequired: false, transformFunction: null }, formatPainterActive: { classPropertyName: "formatPainterActive", publicName: "formatPainterActive", isSignal: true, isRequired: false, transformFunction: null }, canActivateFormatPainter: { classPropertyName: "canActivateFormatPainter", publicName: "canActivateFormatPainter", isSignal: true, isRequired: false, transformFunction: null }, exporting: { classPropertyName: "exporting", publicName: "exporting", 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 }, eyedropperActive: { classPropertyName: "eyedropperActive", publicName: "eyedropperActive", isSignal: true, isRequired: false, transformFunction: null }, themeGalleryOpen: { classPropertyName: "themeGalleryOpen", publicName: "themeGalleryOpen", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, inspectorOpen: { classPropertyName: "inspectorOpen", publicName: "inspectorOpen", isSignal: true, isRequired: false, transformFunction: null }, commentsOpen: { classPropertyName: "commentsOpen", publicName: "commentsOpen", isSignal: true, isRequired: false, transformFunction: null }, commentCount: { classPropertyName: "commentCount", publicName: "commentCount", isSignal: true, isRequired: false, transformFunction: null }, findOpen: { classPropertyName: "findOpen", publicName: "findOpen", isSignal: true, isRequired: false, transformFunction: null }, collabConnected: { classPropertyName: "collabConnected", publicName: "collabConnected", isSignal: true, isRequired: false, transformFunction: null }, connectedCount: { classPropertyName: "connectedCount", publicName: "connectedCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prev: "prev", next: "next", zoomIn: "zoomIn", zoomOut: "zoomOut", zoomReset: "zoomReset", find: "find", present: "present", presenter: "presenter", share: "share", broadcast: "broadcast", openFile: "openFile", save: "save", toggleSidebar: "toggleSidebar", signatures: "signatures", info: "info", print: "print", comments: "comments", a11y: "a11y", link: "link", openSorter: "openSorter", toggleNotes: "toggleNotes", toggleFormatPainter: "toggleFormatPainter", exportPng: "exportPng", exportPdf: "exportPdf", exportGif: "exportGif", exportVideo: "exportVideo", replace: "replace", toggleInspector: "toggleInspector", drawToolChange: "drawToolChange", toggleThemeGallery: "toggleThemeGallery", toggleGrid: "toggleGrid", toggleRulers: "toggleRulers", toggleGuides: "toggleGuides", toggleSelectionPane: "toggleSelectionPane", openCustomShows: "openCustomShows", toggleSnapToGrid: "toggleSnapToGrid", toggleEyedropper: "toggleEyedropper", openSmartArtDialog: "openSmartArtDialog", openEquationDialog: "openEquationDialog", openSetUpSlideShow: "openSetUpSlideShow", openCompare: "openCompare", openPassword: "openPassword", openFontEmbedding: "openFontEmbedding", openVersionHistory: "openVersionHistory", openShortcuts: "openShortcuts" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RibbonComponent, isStandalone: true, selector: "pptx-ribbon", inputs: { slideIndex: { classPropertyName: "slideIndex", publicName: "slideIndex", isSignal: true, isRequired: false, transformFunction: null }, slideCount: { classPropertyName: "slideCount", publicName: "slideCount", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, selectedElement: { classPropertyName: "selectedElement", publicName: "selectedElement", isSignal: true, isRequired: false, transformFunction: null }, zoomPercent: { classPropertyName: "zoomPercent", publicName: "zoomPercent", isSignal: true, isRequired: false, transformFunction: null }, formatPainterActive: { classPropertyName: "formatPainterActive", publicName: "formatPainterActive", isSignal: true, isRequired: false, transformFunction: null }, canActivateFormatPainter: { classPropertyName: "canActivateFormatPainter", publicName: "canActivateFormatPainter", isSignal: true, isRequired: false, transformFunction: null }, exporting: { classPropertyName: "exporting", publicName: "exporting", 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 }, eyedropperActive: { classPropertyName: "eyedropperActive", publicName: "eyedropperActive", isSignal: true, isRequired: false, transformFunction: null }, themeGalleryOpen: { classPropertyName: "themeGalleryOpen", publicName: "themeGalleryOpen", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, inspectorOpen: { classPropertyName: "inspectorOpen", publicName: "inspectorOpen", isSignal: true, isRequired: false, transformFunction: null }, commentsOpen: { classPropertyName: "commentsOpen", publicName: "commentsOpen", isSignal: true, isRequired: false, transformFunction: null }, commentCount: { classPropertyName: "commentCount", publicName: "commentCount", isSignal: true, isRequired: false, transformFunction: null }, findOpen: { classPropertyName: "findOpen", publicName: "findOpen", isSignal: true, isRequired: false, transformFunction: null }, collabConnected: { classPropertyName: "collabConnected", publicName: "collabConnected", isSignal: true, isRequired: false, transformFunction: null }, connectedCount: { classPropertyName: "connectedCount", publicName: "connectedCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prev: "prev", next: "next", zoomIn: "zoomIn", zoomOut: "zoomOut", zoomReset: "zoomReset", find: "find", present: "present", presenter: "presenter", record: "record", share: "share", broadcast: "broadcast", openFile: "openFile", save: "save", toggleSidebar: "toggleSidebar", signatures: "signatures", info: "info", print: "print", comments: "comments", a11y: "a11y", link: "link", openSorter: "openSorter", toggleNotes: "toggleNotes", toggleFormatPainter: "toggleFormatPainter", exportPng: "exportPng", exportPdf: "exportPdf", exportGif: "exportGif", exportVideo: "exportVideo", replace: "replace", toggleInspector: "toggleInspector", drawToolChange: "drawToolChange", toggleThemeGallery: "toggleThemeGallery", toggleGrid: "toggleGrid", toggleRulers: "toggleRulers", toggleGuides: "toggleGuides", toggleSelectionPane: "toggleSelectionPane", openCustomShows: "openCustomShows", toggleSnapToGrid: "toggleSnapToGrid", toggleEyedropper: "toggleEyedropper", openSmartArtDialog: "openSmartArtDialog", openEquationDialog: "openEquationDialog", openSetUpSlideShow: "openSetUpSlideShow", openCompare: "openCompare", openPassword: "openPassword", openFontEmbedding: "openFontEmbedding", openVersionHistory: "openVersionHistory", openShortcuts: "openShortcuts" }, ngImport: i0, template: `
 		<div
 			role="toolbar"
 			aria-label="Presentation toolbar"
@@ -70324,22 +70503,16 @@ class RibbonComponent {
 			<!-- ── Primary quick-access row (ToolbarPrimaryRow parity) ──── -->
 			<pptx-ribbon-primary-row
 				[slideCount]="slideCount()"
-				[canEdit]="canEdit()"
 				[sidebarCollapsed]="sidebarCollapsed()"
 				[inspectorOpen]="inspectorOpen()"
 				[commentsOpen]="commentsOpen()"
 				[commentCount]="commentCount()"
-				[findOpen]="findOpen()"
-				[collabConnected]="collabConnected()"
-				[connectedCount]="connectedCount()"
 				(toggleSidebar)="toggleSidebar.emit()"
-				(toggleFind)="replace.emit()"
 				(toggleComments)="comments.emit()"
 				(present)="present.emit()"
 				(presenter)="presenter.emit()"
 				(broadcast)="broadcast.emit()"
 				(openCustomShows)="openCustomShows.emit()"
-				(share)="share.emit()"
 				(toggleInspector)="toggleInspector.emit()"
 				(exportPng)="exportPng.emit()"
 				(exportPdf)="exportPdf.emit()"
@@ -70368,6 +70541,46 @@ class RibbonComponent {
 					</button>
 				}
 				<div class="flex-1"></div>
+
+				<!-- Tab-row right actions (Record + Share), mirroring React's TabRowActions -->
+				<div class="flex items-center gap-1 pr-1">
+					@if (canEdit()) {
+						<button
+							type="button"
+							[class]="tra.record"
+							[title]="'pptx.titleBar.record' | translate"
+							[attr.aria-label]="'pptx.titleBar.record' | translate"
+							(click)="record.emit()"
+						>
+							<span [class]="tra.recordDot" aria-hidden="true"></span>
+							<span>{{ 'pptx.titleBar.record' | translate }}</span>
+						</button>
+					}
+					<button
+						type="button"
+						class="relative inline-flex items-center gap-1 whitespace-nowrap rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
+						[ngClass]="
+							collabConnected()
+								? 'bg-green-600 hover:bg-green-500'
+								: 'bg-primary hover:bg-primary/90'
+						"
+						[title]="
+							collabConnected()
+								? ('pptx.toolbar.sharingUsers' | translate: { count: connectedCount() })
+								: ('pptx.toolbar.share' | translate)
+						"
+						[attr.aria-label]="'pptx.toolbar.share' | translate"
+						(click)="share.emit()"
+					>
+						⇪
+						<span>{{
+							collabConnected()
+								? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
+								: ('pptx.toolbar.share' | translate)
+						}}</span>
+					</button>
+				</div>
+
 				<button
 					type="button"
 					class="mr-1 rounded px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
@@ -70525,7 +70738,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", "canEdit", "sidebarCollapsed", "inspectorOpen", "commentsOpen", "commentCount", "findOpen", "collabConnected", "connectedCount"], outputs: ["toggleSidebar", "toggleFind", "toggleComments", "present", "presenter", "broadcast", "openCustomShows", "share", "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"] }, { 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", "a11y", "openCompare", "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: 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: 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"] }, { 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", "a11y", "openCompare", "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: 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,
@@ -70560,22 +70773,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			<!-- ── Primary quick-access row (ToolbarPrimaryRow parity) ──── -->
 			<pptx-ribbon-primary-row
 				[slideCount]="slideCount()"
-				[canEdit]="canEdit()"
 				[sidebarCollapsed]="sidebarCollapsed()"
 				[inspectorOpen]="inspectorOpen()"
 				[commentsOpen]="commentsOpen()"
 				[commentCount]="commentCount()"
-				[findOpen]="findOpen()"
-				[collabConnected]="collabConnected()"
-				[connectedCount]="connectedCount()"
 				(toggleSidebar)="toggleSidebar.emit()"
-				(toggleFind)="replace.emit()"
 				(toggleComments)="comments.emit()"
 				(present)="present.emit()"
 				(presenter)="presenter.emit()"
 				(broadcast)="broadcast.emit()"
 				(openCustomShows)="openCustomShows.emit()"
-				(share)="share.emit()"
 				(toggleInspector)="toggleInspector.emit()"
 				(exportPng)="exportPng.emit()"
 				(exportPdf)="exportPdf.emit()"
@@ -70604,6 +70811,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					</button>
 				}
 				<div class="flex-1"></div>
+
+				<!-- Tab-row right actions (Record + Share), mirroring React's TabRowActions -->
+				<div class="flex items-center gap-1 pr-1">
+					@if (canEdit()) {
+						<button
+							type="button"
+							[class]="tra.record"
+							[title]="'pptx.titleBar.record' | translate"
+							[attr.aria-label]="'pptx.titleBar.record' | translate"
+							(click)="record.emit()"
+						>
+							<span [class]="tra.recordDot" aria-hidden="true"></span>
+							<span>{{ 'pptx.titleBar.record' | translate }}</span>
+						</button>
+					}
+					<button
+						type="button"
+						class="relative inline-flex items-center gap-1 whitespace-nowrap rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
+						[ngClass]="
+							collabConnected()
+								? 'bg-green-600 hover:bg-green-500'
+								: 'bg-primary hover:bg-primary/90'
+						"
+						[title]="
+							collabConnected()
+								? ('pptx.toolbar.sharingUsers' | translate: { count: connectedCount() })
+								: ('pptx.toolbar.share' | translate)
+						"
+						[attr.aria-label]="'pptx.toolbar.share' | translate"
+						(click)="share.emit()"
+					>
+						⇪
+						<span>{{
+							collabConnected()
+								? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
+								: ('pptx.toolbar.share' | translate)
+						}}</span>
+					</button>
+				</div>
+
 				<button
 					type="button"
 					class="mr-1 rounded px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
@@ -70763,7 +71010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 		</div>
 	`,
                 }]
-        }], propDecorators: { slideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideIndex", required: false }] }], slideCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideCount", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], selectedElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedElement", required: false }] }], zoomPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomPercent", required: false }] }], formatPainterActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatPainterActive", required: false }] }], canActivateFormatPainter: [{ type: i0.Input, args: [{ isSignal: true, alias: "canActivateFormatPainter", required: false }] }], exporting: [{ type: i0.Input, args: [{ isSignal: true, alias: "exporting", 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 }] }], eyedropperActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyedropperActive", required: false }] }], themeGalleryOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeGalleryOpen", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], inspectorOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorOpen", required: false }] }], commentsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentsOpen", required: false }] }], commentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentCount", required: false }] }], findOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "findOpen", required: false }] }], collabConnected: [{ type: i0.Input, args: [{ isSignal: true, alias: "collabConnected", required: false }] }], connectedCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedCount", required: false }] }], prev: [{ type: i0.Output, args: ["prev"] }], next: [{ type: i0.Output, args: ["next"] }], zoomIn: [{ type: i0.Output, args: ["zoomIn"] }], zoomOut: [{ type: i0.Output, args: ["zoomOut"] }], zoomReset: [{ type: i0.Output, args: ["zoomReset"] }], find: [{ type: i0.Output, args: ["find"] }], present: [{ type: i0.Output, args: ["present"] }], presenter: [{ type: i0.Output, args: ["presenter"] }], share: [{ type: i0.Output, args: ["share"] }], broadcast: [{ type: i0.Output, args: ["broadcast"] }], openFile: [{ type: i0.Output, args: ["openFile"] }], save: [{ type: i0.Output, args: ["save"] }], toggleSidebar: [{ type: i0.Output, args: ["toggleSidebar"] }], signatures: [{ type: i0.Output, args: ["signatures"] }], info: [{ type: i0.Output, args: ["info"] }], print: [{ type: i0.Output, args: ["print"] }], comments: [{ type: i0.Output, args: ["comments"] }], a11y: [{ type: i0.Output, args: ["a11y"] }], link: [{ type: i0.Output, args: ["link"] }], openSorter: [{ type: i0.Output, args: ["openSorter"] }], toggleNotes: [{ type: i0.Output, args: ["toggleNotes"] }], toggleFormatPainter: [{ type: i0.Output, args: ["toggleFormatPainter"] }], exportPng: [{ type: i0.Output, args: ["exportPng"] }], exportPdf: [{ type: i0.Output, args: ["exportPdf"] }], exportGif: [{ type: i0.Output, args: ["exportGif"] }], exportVideo: [{ type: i0.Output, args: ["exportVideo"] }], replace: [{ type: i0.Output, args: ["replace"] }], toggleInspector: [{ type: i0.Output, args: ["toggleInspector"] }], drawToolChange: [{ type: i0.Output, args: ["drawToolChange"] }], toggleThemeGallery: [{ type: i0.Output, args: ["toggleThemeGallery"] }], toggleGrid: [{ type: i0.Output, args: ["toggleGrid"] }], toggleRulers: [{ type: i0.Output, args: ["toggleRulers"] }], toggleGuides: [{ type: i0.Output, args: ["toggleGuides"] }], toggleSelectionPane: [{ type: i0.Output, args: ["toggleSelectionPane"] }], openCustomShows: [{ type: i0.Output, args: ["openCustomShows"] }], toggleSnapToGrid: [{ type: i0.Output, args: ["toggleSnapToGrid"] }], toggleEyedropper: [{ type: i0.Output, args: ["toggleEyedropper"] }], openSmartArtDialog: [{ type: i0.Output, args: ["openSmartArtDialog"] }], openEquationDialog: [{ type: i0.Output, args: ["openEquationDialog"] }], openSetUpSlideShow: [{ type: i0.Output, args: ["openSetUpSlideShow"] }], openCompare: [{ type: i0.Output, args: ["openCompare"] }], openPassword: [{ type: i0.Output, args: ["openPassword"] }], openFontEmbedding: [{ type: i0.Output, args: ["openFontEmbedding"] }], openVersionHistory: [{ type: i0.Output, args: ["openVersionHistory"] }], openShortcuts: [{ type: i0.Output, args: ["openShortcuts"] }] } });
+        }], propDecorators: { slideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideIndex", required: false }] }], slideCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideCount", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], selectedElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedElement", required: false }] }], zoomPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomPercent", required: false }] }], formatPainterActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatPainterActive", required: false }] }], canActivateFormatPainter: [{ type: i0.Input, args: [{ isSignal: true, alias: "canActivateFormatPainter", required: false }] }], exporting: [{ type: i0.Input, args: [{ isSignal: true, alias: "exporting", 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 }] }], eyedropperActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyedropperActive", required: false }] }], themeGalleryOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeGalleryOpen", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], inspectorOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorOpen", required: false }] }], commentsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentsOpen", required: false }] }], commentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentCount", required: false }] }], findOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "findOpen", required: false }] }], collabConnected: [{ type: i0.Input, args: [{ isSignal: true, alias: "collabConnected", required: false }] }], connectedCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedCount", required: false }] }], prev: [{ type: i0.Output, args: ["prev"] }], next: [{ type: i0.Output, args: ["next"] }], zoomIn: [{ type: i0.Output, args: ["zoomIn"] }], zoomOut: [{ type: i0.Output, args: ["zoomOut"] }], zoomReset: [{ type: i0.Output, args: ["zoomReset"] }], find: [{ type: i0.Output, args: ["find"] }], present: [{ type: i0.Output, args: ["present"] }], presenter: [{ type: i0.Output, args: ["presenter"] }], record: [{ type: i0.Output, args: ["record"] }], share: [{ type: i0.Output, args: ["share"] }], broadcast: [{ type: i0.Output, args: ["broadcast"] }], openFile: [{ type: i0.Output, args: ["openFile"] }], save: [{ type: i0.Output, args: ["save"] }], toggleSidebar: [{ type: i0.Output, args: ["toggleSidebar"] }], signatures: [{ type: i0.Output, args: ["signatures"] }], info: [{ type: i0.Output, args: ["info"] }], print: [{ type: i0.Output, args: ["print"] }], comments: [{ type: i0.Output, args: ["comments"] }], a11y: [{ type: i0.Output, args: ["a11y"] }], link: [{ type: i0.Output, args: ["link"] }], openSorter: [{ type: i0.Output, args: ["openSorter"] }], toggleNotes: [{ type: i0.Output, args: ["toggleNotes"] }], toggleFormatPainter: [{ type: i0.Output, args: ["toggleFormatPainter"] }], exportPng: [{ type: i0.Output, args: ["exportPng"] }], exportPdf: [{ type: i0.Output, args: ["exportPdf"] }], exportGif: [{ type: i0.Output, args: ["exportGif"] }], exportVideo: [{ type: i0.Output, args: ["exportVideo"] }], replace: [{ type: i0.Output, args: ["replace"] }], toggleInspector: [{ type: i0.Output, args: ["toggleInspector"] }], drawToolChange: [{ type: i0.Output, args: ["drawToolChange"] }], toggleThemeGallery: [{ type: i0.Output, args: ["toggleThemeGallery"] }], toggleGrid: [{ type: i0.Output, args: ["toggleGrid"] }], toggleRulers: [{ type: i0.Output, args: ["toggleRulers"] }], toggleGuides: [{ type: i0.Output, args: ["toggleGuides"] }], toggleSelectionPane: [{ type: i0.Output, args: ["toggleSelectionPane"] }], openCustomShows: [{ type: i0.Output, args: ["openCustomShows"] }], toggleSnapToGrid: [{ type: i0.Output, args: ["toggleSnapToGrid"] }], toggleEyedropper: [{ type: i0.Output, args: ["toggleEyedropper"] }], openSmartArtDialog: [{ type: i0.Output, args: ["openSmartArtDialog"] }], openEquationDialog: [{ type: i0.Output, args: ["openEquationDialog"] }], openSetUpSlideShow: [{ type: i0.Output, args: ["openSetUpSlideShow"] }], openCompare: [{ type: i0.Output, args: ["openCompare"] }], openPassword: [{ type: i0.Output, args: ["openPassword"] }], openFontEmbedding: [{ type: i0.Output, args: ["openFontEmbedding"] }], openVersionHistory: [{ type: i0.Output, args: ["openVersionHistory"] }], openShortcuts: [{ type: i0.Output, args: ["openShortcuts"] }] } });
 
 /**
  * selection-pane.component.ts: Side panel listing all elements on the active slide.
@@ -72223,6 +72470,9 @@ class StatusBarComponent {
     ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
     dirty = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    /** Current autosave engine status; drives the save-state text + colour. */
+    autosaveStatus = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autosaveStatus" }] : /* istanbul ignore next */ []));
     notesOpen = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "notesOpen" }] : /* istanbul ignore next */ []));
     zoomPercent = input(100, /* @ts-ignore */
@@ -72240,6 +72490,7 @@ class StatusBarComponent {
     zoomIn = output();
     zoomOut = output();
     zoomReset = output();
+    translate = inject(TranslateService);
     /** "Normal" is active when neither the sorter nor the slideshow is showing. */
     isNormal() {
         return !this.sorterActive() && !this.presenting();
@@ -72247,8 +72498,50 @@ class StatusBarComponent {
     min(a, b) {
         return Math.min(a, b);
     }
+    /**
+     * Save-state text next to the slide counter, mirroring React's StatusBar:
+     * autosave saving/saved-time/error take precedence, then the dirty flag, then
+     * "All saved".
+     */
+    saveStatusText() {
+        const status = this.autosaveStatus();
+        if (status?.state === 'saving') {
+            return this.translate.instant('pptx.autosave.saving');
+        }
+        if (status?.state === 'saved') {
+            return this.translate.instant('pptx.autosave.saved', {
+                time: this.formatAutosaveAge(status.timestamp),
+            });
+        }
+        if (status?.state === 'error') {
+            return this.translate.instant('pptx.autosave.error');
+        }
+        return this.translate.instant(this.dirty() ? 'pptx.statusBar.unsavedChanges' : 'pptx.statusBar.allSaved');
+    }
+    /** Colour override for the save-state text while saving (yellow) / errored (red). */
+    saveStateClass() {
+        const state = this.autosaveStatus()?.state;
+        if (state === 'error') {
+            return 'text-red-400';
+        }
+        if (state === 'saving') {
+            return 'text-yellow-400';
+        }
+        return '';
+    }
+    /** Relative age label for a saved timestamp ("just now" / "N min ago"). */
+    formatAutosaveAge(timestamp) {
+        const minutes = Math.floor((Date.now() - timestamp) / 60_000);
+        if (minutes < 1) {
+            return this.translate.instant('pptx.autosave.justNow');
+        }
+        if (minutes === 1) {
+            return this.translate.instant('pptx.autosave.oneMinAgo');
+        }
+        return this.translate.instant('pptx.autosave.minutesAgo', { count: minutes });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StatusBarComponent, isStandalone: true, selector: "pptx-status-bar", inputs: { slideIndex: { classPropertyName: "slideIndex", publicName: "slideIndex", isSignal: true, isRequired: false, transformFunction: null }, slideCount: { classPropertyName: "slideCount", publicName: "slideCount", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, notesOpen: { classPropertyName: "notesOpen", publicName: "notesOpen", isSignal: true, isRequired: false, transformFunction: null }, zoomPercent: { classPropertyName: "zoomPercent", publicName: "zoomPercent", isSignal: true, isRequired: false, transformFunction: null }, sorterActive: { classPropertyName: "sorterActive", publicName: "sorterActive", isSignal: true, isRequired: false, transformFunction: null }, presenting: { classPropertyName: "presenting", publicName: "presenting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleNotes: "toggleNotes", normalView: "normalView", openSorter: "openSorter", slideShow: "slideShow", zoomIn: "zoomIn", zoomOut: "zoomOut", zoomReset: "zoomReset" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StatusBarComponent, isStandalone: true, selector: "pptx-status-bar", inputs: { slideIndex: { classPropertyName: "slideIndex", publicName: "slideIndex", isSignal: true, isRequired: false, transformFunction: null }, slideCount: { classPropertyName: "slideCount", publicName: "slideCount", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, autosaveStatus: { classPropertyName: "autosaveStatus", publicName: "autosaveStatus", isSignal: true, isRequired: false, transformFunction: null }, notesOpen: { classPropertyName: "notesOpen", publicName: "notesOpen", isSignal: true, isRequired: false, transformFunction: null }, zoomPercent: { classPropertyName: "zoomPercent", publicName: "zoomPercent", isSignal: true, isRequired: false, transformFunction: null }, sorterActive: { classPropertyName: "sorterActive", publicName: "sorterActive", isSignal: true, isRequired: false, transformFunction: null }, presenting: { classPropertyName: "presenting", publicName: "presenting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleNotes: "toggleNotes", normalView: "normalView", openSorter: "openSorter", slideShow: "slideShow", zoomIn: "zoomIn", zoomOut: "zoomOut", zoomReset: "zoomReset" }, ngImport: i0, 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"
 		>
@@ -72267,9 +72560,7 @@ class StatusBarComponent {
 
 			@if (canEdit()) {
 				<div class="mx-1 h-3 w-px bg-border/60"></div>
-				<span class="shrink-0">{{
-					(dirty() ? 'pptx.statusBar.unsavedChanges' : 'pptx.statusBar.allSaved') | translate
-				}}</span>
+				<span class="shrink-0" [ngClass]="saveStateClass()">{{ saveStatusText() }}</span>
 			}
 
 			<!-- Center spacer -->
@@ -72384,9 +72675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 			@if (canEdit()) {
 				<div class="mx-1 h-3 w-px bg-border/60"></div>
-				<span class="shrink-0">{{
-					(dirty() ? 'pptx.statusBar.unsavedChanges' : 'pptx.statusBar.allSaved') | translate
-				}}</span>
+				<span class="shrink-0" [ngClass]="saveStateClass()">{{ saveStatusText() }}</span>
 			}
 
 			<!-- Center spacer -->
@@ -72475,7 +72764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 		</div>
 	`,
                 }]
-        }], propDecorators: { slideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideIndex", required: false }] }], slideCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideCount", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], notesOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "notesOpen", required: false }] }], zoomPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomPercent", required: false }] }], sorterActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorterActive", required: false }] }], presenting: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenting", required: false }] }], toggleNotes: [{ type: i0.Output, args: ["toggleNotes"] }], normalView: [{ type: i0.Output, args: ["normalView"] }], openSorter: [{ type: i0.Output, args: ["openSorter"] }], slideShow: [{ type: i0.Output, args: ["slideShow"] }], zoomIn: [{ type: i0.Output, args: ["zoomIn"] }], zoomOut: [{ type: i0.Output, args: ["zoomOut"] }], zoomReset: [{ type: i0.Output, args: ["zoomReset"] }] } });
+        }], propDecorators: { slideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideIndex", required: false }] }], slideCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideCount", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], autosaveStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autosaveStatus", required: false }] }], notesOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "notesOpen", required: false }] }], zoomPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomPercent", required: false }] }], sorterActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorterActive", required: false }] }], presenting: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenting", required: false }] }], toggleNotes: [{ type: i0.Output, args: ["toggleNotes"] }], normalView: [{ type: i0.Output, args: ["normalView"] }], openSorter: [{ type: i0.Output, args: ["openSorter"] }], slideShow: [{ type: i0.Output, args: ["slideShow"] }], zoomIn: [{ type: i0.Output, args: ["zoomIn"] }], zoomOut: [{ type: i0.Output, args: ["zoomOut"] }], zoomReset: [{ type: i0.Output, args: ["zoomReset"] }] } });
 
 /**
  * theme-gallery-presets.ts: the exact theme set shown in the Design tab's
@@ -72871,6 +73160,292 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], activeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeName", required: false }] }], applyTheme: [{ type: i0.Output, args: ["applyTheme"] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
+/**
+ * title-bar.component.ts: PowerPoint-style top chrome row for the Angular
+ * editor, at parity with React's `viewer/components/toolbar/TitleBar.tsx`.
+ *
+ * Renders (left to right): the square "P" app mark, an AutoSave label + switch
+ * toggle + On/Off text, quick-access Save/Undo/Redo icon buttons, the open
+ * document's name + a save-location status (resolved via the shared
+ * {@link resolveTitleBarStatusKey}), and a centred search button that opens
+ * Find & Replace. Rendered ABOVE and OUTSIDE the ribbon's `role="toolbar"`
+ * container so the toolbar height stays measurable for the e2e parity spec.
+ *
+ * Purely presentational + `OnPush`: every action is an `output()` the
+ * {@link PowerPointViewerComponent} already has handlers for. Class tokens come
+ * verbatim from the shared {@link TITLE_BAR_CLASSES} so the three bindings stay
+ * pixel-identical. The host is a plain block (no `display:contents`) so the row
+ * renders as one 36px flex strip.
+ */
+class TitleBarComponent {
+    /** Whether the deck is editable (gates the autosave/quick-access/search chrome). */
+    canEdit = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    /** Display name of the open document (host-supplied). */
+    fileName = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
+    /** Whether the document has unsaved changes. */
+    isDirty = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDirty" }] : /* istanbul ignore next */ []));
+    /** Current autosave engine status (drives the save-location text). */
+    autosaveStatus = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autosaveStatus" }] : /* istanbul ignore next */ []));
+    /** Whether the AutoSave toggle is on. */
+    autosaveEnabled = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autosaveEnabled" }] : /* istanbul ignore next */ []));
+    canUndo = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+    canRedo = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+    undoLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "undoLabel" }] : /* istanbul ignore next */ []));
+    redoLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "redoLabel" }] : /* istanbul ignore next */ []));
+    /** Whether the Find & Replace panel is open (search-button active state). */
+    findReplaceOpen = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "findReplaceOpen" }] : /* istanbul ignore next */ []));
+    toggleAutosave = output();
+    /** Quick-access save (downloads the `.pptx`). */
+    save = output();
+    undo = output();
+    redo = output();
+    toggleFindReplace = output();
+    tb = TITLE_BAR_CLASSES;
+    defaultFileKey = TITLE_BAR_DEFAULT_FILE_KEY;
+    /** The i18n key for the save-location status text (next to the file name). */
+    statusKey = computed(() => resolveTitleBarStatusKey({
+        autosaveState: this.autosaveStatus()?.state ?? 'idle',
+        isDirty: this.isDirty(),
+        autosaveEnabled: this.autosaveEnabled(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusKey" }] : /* istanbul ignore next */ []));
+    /** Colour override for the status text on saving/error (when autosave is on). */
+    statusStateClass = computed(() => {
+        const state = this.autosaveStatus()?.state;
+        if (!this.autosaveEnabled()) {
+            return '';
+        }
+        if (state === 'error') {
+            return this.tb.statusError;
+        }
+        if (state === 'saving') {
+            return this.tb.statusSaving;
+        }
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusStateClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TitleBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TitleBarComponent, isStandalone: true, selector: "pptx-title-bar", inputs: { canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, isDirty: { classPropertyName: "isDirty", publicName: "isDirty", isSignal: true, isRequired: false, transformFunction: null }, autosaveStatus: { classPropertyName: "autosaveStatus", publicName: "autosaveStatus", isSignal: true, isRequired: false, transformFunction: null }, autosaveEnabled: { classPropertyName: "autosaveEnabled", publicName: "autosaveEnabled", isSignal: true, isRequired: false, transformFunction: null }, canUndo: { classPropertyName: "canUndo", publicName: "canUndo", isSignal: true, isRequired: false, transformFunction: null }, canRedo: { classPropertyName: "canRedo", publicName: "canRedo", isSignal: true, isRequired: false, transformFunction: null }, undoLabel: { classPropertyName: "undoLabel", publicName: "undoLabel", isSignal: true, isRequired: false, transformFunction: null }, redoLabel: { classPropertyName: "redoLabel", publicName: "redoLabel", isSignal: true, isRequired: false, transformFunction: null }, findReplaceOpen: { classPropertyName: "findReplaceOpen", publicName: "findReplaceOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleAutosave: "toggleAutosave", save: "save", undo: "undo", redo: "redo", toggleFindReplace: "toggleFindReplace" }, ngImport: i0, template: `
+		<div [class]="tb.container" data-pptx-title-bar>
+			<span [class]="tb.logo" aria-hidden="true">P</span>
+
+			@if (canEdit()) {
+				<span [class]="tb.autosaveGroup">
+					<span [class]="tb.autosaveLabel">{{ 'pptx.titleBar.autoSave' | translate }}</span>
+					<button
+						type="button"
+						role="switch"
+						[attr.aria-checked]="autosaveEnabled()"
+						[class]="tb.toggleTrack"
+						[ngClass]="autosaveEnabled() ? tb.toggleTrackOn : tb.toggleTrackOff"
+						[title]="'pptx.titleBar.toggleAutoSave' | translate"
+						[attr.aria-label]="'pptx.titleBar.toggleAutoSave' | translate"
+						(click)="toggleAutosave.emit()"
+					>
+						<span
+							[class]="tb.toggleKnob"
+							[ngClass]="autosaveEnabled() ? tb.toggleKnobOn : tb.toggleKnobOff"
+						></span>
+					</button>
+					<span [class]="tb.autosaveLabel">{{
+						(autosaveEnabled() ? 'pptx.titleBar.autoSaveOn' : 'pptx.titleBar.autoSaveOff')
+							| translate
+					}}</span>
+				</span>
+
+				<div [class]="tb.separator"></div>
+
+				<button
+					type="button"
+					[class]="tb.quickButton"
+					[title]="'pptx.titleBar.save' | translate"
+					[attr.aria-label]="'pptx.titleBar.save' | translate"
+					(click)="save.emit()"
+				>
+					💾
+				</button>
+				<button
+					type="button"
+					[class]="tb.quickButton"
+					[disabled]="!canUndo()"
+					[title]="
+						undoLabel()
+							? ('pptx.toolbar.undoAction' | translate: { action: undoLabel() })
+							: ('pptx.toolbar.undo' | translate)
+					"
+					[attr.aria-label]="'pptx.toolbar.undo' | translate"
+					(click)="undo.emit()"
+				>
+					↶
+				</button>
+				<button
+					type="button"
+					[class]="tb.quickButton"
+					[disabled]="!canRedo()"
+					[title]="
+						redoLabel()
+							? ('pptx.toolbar.redoAction' | translate: { action: redoLabel() })
+							: ('pptx.toolbar.redo' | translate)
+					"
+					[attr.aria-label]="'pptx.toolbar.redo' | translate"
+					(click)="redo.emit()"
+				>
+					↷
+				</button>
+
+				<div [class]="tb.separator"></div>
+			}
+
+			<span [class]="tb.fileGroup">
+				<span [class]="tb.fileName">{{ fileName() || (defaultFileKey | translate) }}</span>
+				@if (canEdit()) {
+					<span [class]="tb.statusDot" aria-hidden="true">&bull;</span>
+					<span [class]="tb.statusText" [ngClass]="statusStateClass()">{{
+						statusKey() | translate
+					}}</span>
+				}
+			</span>
+
+			<span [class]="tb.searchWrap">
+				@if (canEdit()) {
+					<button
+						type="button"
+						[class]="tb.searchBox"
+						[ngClass]="findReplaceOpen() ? 'text-foreground bg-background' : ''"
+						[title]="'pptx.findReplace.title' | translate"
+						[attr.aria-label]="'pptx.titleBar.search' | translate"
+						(click)="toggleFindReplace.emit()"
+					>
+						<span [class]="tb.searchIcon" aria-hidden="true">⌕</span>
+						<span [class]="tb.searchLabel">{{ 'pptx.titleBar.search' | translate }}</span>
+					</button>
+				}
+			</span>
+
+			<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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TitleBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pptx-title-bar',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgClass, TranslatePipe],
+                    template: `
+		<div [class]="tb.container" data-pptx-title-bar>
+			<span [class]="tb.logo" aria-hidden="true">P</span>
+
+			@if (canEdit()) {
+				<span [class]="tb.autosaveGroup">
+					<span [class]="tb.autosaveLabel">{{ 'pptx.titleBar.autoSave' | translate }}</span>
+					<button
+						type="button"
+						role="switch"
+						[attr.aria-checked]="autosaveEnabled()"
+						[class]="tb.toggleTrack"
+						[ngClass]="autosaveEnabled() ? tb.toggleTrackOn : tb.toggleTrackOff"
+						[title]="'pptx.titleBar.toggleAutoSave' | translate"
+						[attr.aria-label]="'pptx.titleBar.toggleAutoSave' | translate"
+						(click)="toggleAutosave.emit()"
+					>
+						<span
+							[class]="tb.toggleKnob"
+							[ngClass]="autosaveEnabled() ? tb.toggleKnobOn : tb.toggleKnobOff"
+						></span>
+					</button>
+					<span [class]="tb.autosaveLabel">{{
+						(autosaveEnabled() ? 'pptx.titleBar.autoSaveOn' : 'pptx.titleBar.autoSaveOff')
+							| translate
+					}}</span>
+				</span>
+
+				<div [class]="tb.separator"></div>
+
+				<button
+					type="button"
+					[class]="tb.quickButton"
+					[title]="'pptx.titleBar.save' | translate"
+					[attr.aria-label]="'pptx.titleBar.save' | translate"
+					(click)="save.emit()"
+				>
+					💾
+				</button>
+				<button
+					type="button"
+					[class]="tb.quickButton"
+					[disabled]="!canUndo()"
+					[title]="
+						undoLabel()
+							? ('pptx.toolbar.undoAction' | translate: { action: undoLabel() })
+							: ('pptx.toolbar.undo' | translate)
+					"
+					[attr.aria-label]="'pptx.toolbar.undo' | translate"
+					(click)="undo.emit()"
+				>
+					↶
+				</button>
+				<button
+					type="button"
+					[class]="tb.quickButton"
+					[disabled]="!canRedo()"
+					[title]="
+						redoLabel()
+							? ('pptx.toolbar.redoAction' | translate: { action: redoLabel() })
+							: ('pptx.toolbar.redo' | translate)
+					"
+					[attr.aria-label]="'pptx.toolbar.redo' | translate"
+					(click)="redo.emit()"
+				>
+					↷
+				</button>
+
+				<div [class]="tb.separator"></div>
+			}
+
+			<span [class]="tb.fileGroup">
+				<span [class]="tb.fileName">{{ fileName() || (defaultFileKey | translate) }}</span>
+				@if (canEdit()) {
+					<span [class]="tb.statusDot" aria-hidden="true">&bull;</span>
+					<span [class]="tb.statusText" [ngClass]="statusStateClass()">{{
+						statusKey() | translate
+					}}</span>
+				}
+			</span>
+
+			<span [class]="tb.searchWrap">
+				@if (canEdit()) {
+					<button
+						type="button"
+						[class]="tb.searchBox"
+						[ngClass]="findReplaceOpen() ? 'text-foreground bg-background' : ''"
+						[title]="'pptx.findReplace.title' | translate"
+						[attr.aria-label]="'pptx.titleBar.search' | translate"
+						(click)="toggleFindReplace.emit()"
+					>
+						<span [class]="tb.searchIcon" aria-hidden="true">⌕</span>
+						<span [class]="tb.searchLabel">{{ 'pptx.titleBar.search' | translate }}</span>
+					</button>
+				}
+			</span>
+
+			<span [class]="tb.rightSpacer"></span>
+		</div>
+	`,
+                }]
+        }], propDecorators: { canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], isDirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDirty", required: false }] }], autosaveStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autosaveStatus", required: false }] }], autosaveEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autosaveEnabled", required: false }] }], canUndo: [{ type: i0.Input, args: [{ isSignal: true, alias: "canUndo", required: false }] }], canRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "canRedo", required: false }] }], undoLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoLabel", required: false }] }], redoLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "redoLabel", required: false }] }], findReplaceOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "findReplaceOpen", required: false }] }], toggleAutosave: [{ type: i0.Output, args: ["toggleAutosave"] }], save: [{ type: i0.Output, args: ["save"] }], undo: [{ type: i0.Output, args: ["undo"] }], redo: [{ type: i0.Output, args: ["redo"] }], toggleFindReplace: [{ type: i0.Output, args: ["toggleFindReplace"] }] } });
+
 /**
  * viewer-dialogs.service.ts: Viewer-scoped open-state + light state for the
  * secondary dialogs and side panels (equation editor, set-up-slide-show,
@@ -78237,6 +78812,13 @@ class PowerPointViewerComponent {
      */
     filePath = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filePath" }] : /* istanbul ignore next */ []));
+    /**
+     * Display name of the open document, shown in the title bar next to the
+     * save-location status. Falls back to a localised "Presentation" when omitted.
+     * Mirrors React's `fileName` prop.
+     */
+    fileName = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
     /** Optional real-time collaboration config; when set, connects and shows remote cursors. */
     collaboration = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collaboration" }] : /* istanbul ignore next */ []));
@@ -78292,6 +78874,7 @@ class PowerPointViewerComponent {
     fonts = inject(EmbeddedFontsService);
     collab = inject(CollaborationService);
     accessibility = inject(AccessibilityService);
+    autosave = inject(AutosaveService);
     print = inject(PrintService);
     mobile = inject(IsMobileService);
     smartArt3DSvc = inject(SmartArt3DService);
@@ -78367,6 +78950,9 @@ class PowerPointViewerComponent {
     /** Whether the left slides panel is collapsed (top-bar sidebar toggle). */
     slidesPanelCollapsed = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "slidesPanelCollapsed" }] : /* istanbul ignore next */ []));
+    /** Whether periodic autosave is enabled (title-bar AutoSave toggle; default on). */
+    autosaveEnabled = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autosaveEnabled" }] : /* istanbul ignore next */ []));
     // ── Draw tool state (forwarded to slide-canvas) ───────────────────────────
     /** Active drawing tool (from the ribbon Draw tab). */
     activeDrawTool = signal('select', /* @ts-ignore */
@@ -78663,6 +79249,15 @@ class PowerPointViewerComponent {
             activeSlideIndex: () => this.activeSlideIndex(),
             emitPropertiesChange: (patch) => this.propertiesChange.emit(patch),
         });
+        // Hand the autosave engine the reactive accessors it reads (enabled toggle,
+        // file-path key, dirty flag) and a deck serialiser. It writes a recovery
+        // snapshot to the shared IndexedDB store every N seconds while dirty.
+        this.autosave.bind({
+            enabled: () => this.autosaveEnabled(),
+            filePath: () => this.filePath(),
+            isDirty: () => this.editor.dirty(),
+            serialize: () => this.serializeForAutosave(),
+        });
     }
     /**
      * Serialise the current presentation to `.pptx` bytes (imperative handle).
@@ -78683,6 +79278,27 @@ class PowerPointViewerComponent {
     goNext() {
         this.goTo(this.activeSlideIndex() + 1);
     }
+    /** Toggle the Find & Replace panel from the title-bar search button. */
+    toggleFindReplace() {
+        if (this.findReplace.showFindReplace()) {
+            this.findReplace.showFindReplace.set(false);
+            return;
+        }
+        this.findReplace.openFindReplace();
+    }
+    /**
+     * Serialise the edited deck (templates merged back) to `.pptx` bytes for an
+     * autosave recovery snapshot. Returns null when the deck is read-only so the
+     * autosave engine skips the write. Distinct from {@link getContent}, this does
+     * NOT emit `contentChange` (autosave is a background recovery write, not a
+     * host-visible save).
+     */
+    async serializeForAutosave() {
+        if (!this.canEdit()) {
+            return null;
+        }
+        return this.loader.saveSlides(buildSaveSlides(this.editor.slides(), this.editor.templateElementsBySlideId()));
+    }
     /** Review ▸ Compare: pick a `.pptx` and diff it against the current deck. */
     onOpenCompare() {
         this.compareSvc.startCompare();
@@ -78755,7 +79371,7 @@ class PowerPointViewerComponent {
         return (this.mainEl()?.nativeElement.querySelector('.pptx-ng-canvas-stage') ?? undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PowerPointViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PowerPointViewerComponent, isStandalone: true, selector: "pptx-viewer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, filePath: { classPropertyName: "filePath", publicName: "filePath", isSignal: true, isRequired: false, transformFunction: null }, collaboration: { classPropertyName: "collaboration", publicName: "collaboration", isSignal: true, isRequired: false, transformFunction: null }, authorName: { classPropertyName: "authorName", publicName: "authorName", isSignal: true, isRequired: false, transformFunction: null }, shareDefaults: { classPropertyName: "shareDefaults", publicName: "shareDefaults", isSignal: true, isRequired: false, transformFunction: null }, onOpenFile: { classPropertyName: "onOpenFile", publicName: "onOpenFile", isSignal: true, isRequired: false, transformFunction: null }, smartArt3D: { classPropertyName: "smartArt3D", publicName: "smartArt3D", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeSlideChange: "activeSlideChange", dirtyChange: "dirtyChange", contentChange: "contentChange", propertiesChange: "propertiesChange", startCollaboration: "startCollaboration", stopCollaboration: "stopCollaboration" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PowerPointViewerComponent, isStandalone: true, selector: "pptx-viewer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, filePath: { classPropertyName: "filePath", publicName: "filePath", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, collaboration: { classPropertyName: "collaboration", publicName: "collaboration", isSignal: true, isRequired: false, transformFunction: null }, authorName: { classPropertyName: "authorName", publicName: "authorName", isSignal: true, isRequired: false, transformFunction: null }, shareDefaults: { classPropertyName: "shareDefaults", publicName: "shareDefaults", isSignal: true, isRequired: false, transformFunction: null }, onOpenFile: { classPropertyName: "onOpenFile", publicName: "onOpenFile", isSignal: true, isRequired: false, transformFunction: null }, smartArt3D: { classPropertyName: "smartArt3D", publicName: "smartArt3D", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeSlideChange: "activeSlideChange", dirtyChange: "dirtyChange", contentChange: "contentChange", propertiesChange: "propertiesChange", startCollaboration: "startCollaboration", stopCollaboration: "stopCollaboration" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, providers: [
             LoadContentService,
             ExportService,
             EditorStateService,
@@ -78763,6 +79379,7 @@ class PowerPointViewerComponent {
             EmbeddedFontsService,
             CollaborationService,
             AccessibilityService,
+            AutosaveService,
             PrintService,
             IsMobileService,
             SmartArt3DService,
@@ -78804,6 +79421,23 @@ class PowerPointViewerComponent {
 				</div>
 			} @else {
 				@if (!mobile.isMobile()) {
+					<pptx-title-bar
+						[canEdit]="canEdit()"
+						[fileName]="fileName()"
+						[isDirty]="editor.dirty()"
+						[autosaveStatus]="autosave.status()"
+						[autosaveEnabled]="autosaveEnabled()"
+						[canUndo]="editor.canUndo()"
+						[canRedo]="editor.canRedo()"
+						[undoLabel]="editor.undoLabel()"
+						[redoLabel]="editor.redoLabel()"
+						[findReplaceOpen]="findReplace.showFind() || findReplace.showFindReplace()"
+						(toggleAutosave)="autosaveEnabled.update(v => !v)"
+						(save)="fileIO.saveAsPptx()"
+						(undo)="editor.undo()"
+						(redo)="editor.redo()"
+						(toggleFindReplace)="toggleFindReplace()"
+					/>
 					<pptx-ribbon
 					[slideIndex]="activeSlideIndex()"
 					[slideCount]="slideCount()"
@@ -78829,6 +79463,7 @@ class PowerPointViewerComponent {
 					(find)="findReplace.showFind.set(true)"
 					(present)="presentationMode.present()"
 					(presenter)="presentationMode.presentPresenter()"
+					(record)="presentationMode.present()"
 					(share)="session.showShare.set(true)"
 					(broadcast)="session.showBroadcast.set(true)"
 					(openFile)="fileIO.openFile()"
@@ -79080,6 +79715,7 @@ class PowerPointViewerComponent {
 						[slideCount]="slideCount()"
 						[canEdit]="canEdit()"
 						[dirty]="editor.dirty()"
+						[autosaveStatus]="autosave.status()"
 						[notesOpen]="mobileSheetSvc.showNotes()"
 						[zoomPercent]="zoomSvc.zoomPercent()"
 						[sorterActive]="showSorter()"
@@ -79353,7 +79989,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", "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"], outputs: ["update"] }, { 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", "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"] }, { 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", "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"], outputs: ["update"] }, { 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"] }, { 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"] }, { 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,
@@ -79369,6 +80005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         EmbeddedFontsService,
                         CollaborationService,
                         AccessibilityService,
+                        AutosaveService,
                         PrintService,
                         IsMobileService,
                         SmartArt3DService,
@@ -79426,6 +80063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         MobileToolbarComponent,
                         NotesPanelComponent,
                         RibbonComponent,
+                        TitleBarComponent,
                         ThemeGalleryComponent,
                         SelectionPaneComponent,
                         CustomShowsComponent,
@@ -79451,6 +80089,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				</div>
 			} @else {
 				@if (!mobile.isMobile()) {
+					<pptx-title-bar
+						[canEdit]="canEdit()"
+						[fileName]="fileName()"
+						[isDirty]="editor.dirty()"
+						[autosaveStatus]="autosave.status()"
+						[autosaveEnabled]="autosaveEnabled()"
+						[canUndo]="editor.canUndo()"
+						[canRedo]="editor.canRedo()"
+						[undoLabel]="editor.undoLabel()"
+						[redoLabel]="editor.redoLabel()"
+						[findReplaceOpen]="findReplace.showFind() || findReplace.showFindReplace()"
+						(toggleAutosave)="autosaveEnabled.update(v => !v)"
+						(save)="fileIO.saveAsPptx()"
+						(undo)="editor.undo()"
+						(redo)="editor.redo()"
+						(toggleFindReplace)="toggleFindReplace()"
+					/>
 					<pptx-ribbon
 					[slideIndex]="activeSlideIndex()"
 					[slideCount]="slideCount()"
@@ -79476,6 +80131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					(find)="findReplace.showFind.set(true)"
 					(present)="presentationMode.present()"
 					(presenter)="presentationMode.presentPresenter()"
+					(record)="presentationMode.present()"
 					(share)="session.showShare.set(true)"
 					(broadcast)="session.showBroadcast.set(true)"
 					(openFile)="fileIO.openFile()"
@@ -79727,6 +80383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[slideCount]="slideCount()"
 						[canEdit]="canEdit()"
 						[dirty]="editor.dirty()"
+						[autosaveStatus]="autosave.status()"
 						[notesOpen]="mobileSheetSvc.showNotes()"
 						[zoomPercent]="zoomSvc.zoomPercent()"
 						[sorterActive]="showSorter()"
@@ -80002,7 +80659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 		</div>
 	`,
                 }]
-        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], filePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "filePath", required: false }] }], collaboration: [{ type: i0.Input, args: [{ isSignal: true, alias: "collaboration", required: false }] }], authorName: [{ type: i0.Input, args: [{ isSignal: true, alias: "authorName", required: false }] }], shareDefaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareDefaults", required: false }] }], onOpenFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "onOpenFile", required: false }] }], smartArt3D: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartArt3D", required: false }] }], activeSlideChange: [{ type: i0.Output, args: ["activeSlideChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }], propertiesChange: [{ type: i0.Output, args: ["propertiesChange"] }], startCollaboration: [{ type: i0.Output, args: ["startCollaboration"] }], stopCollaboration: [{ type: i0.Output, args: ["stopCollaboration"] }], extraDialogs: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ViewerExtraDialogsComponent), { isSignal: true }] }], mainEl: [{ type: i0.ViewChild, args: ['mainEl', { isSignal: true }] }], onKeyDown: [{
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], filePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "filePath", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], collaboration: [{ type: i0.Input, args: [{ isSignal: true, alias: "collaboration", required: false }] }], authorName: [{ type: i0.Input, args: [{ isSignal: true, alias: "authorName", required: false }] }], shareDefaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareDefaults", required: false }] }], onOpenFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "onOpenFile", required: false }] }], smartArt3D: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartArt3D", required: false }] }], activeSlideChange: [{ type: i0.Output, args: ["activeSlideChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }], propertiesChange: [{ type: i0.Output, args: ["propertiesChange"] }], startCollaboration: [{ type: i0.Output, args: ["startCollaboration"] }], stopCollaboration: [{ type: i0.Output, args: ["stopCollaboration"] }], extraDialogs: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ViewerExtraDialogsComponent), { isSignal: true }] }], mainEl: [{ type: i0.ViewChild, args: ['mainEl', { isSignal: true }] }], onKeyDown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
@@ -80432,6 +81089,16 @@ const translationsEn = {
     'pptx.autosave.saveFailed': 'Save failed',
     'pptx.autosave.savedShort': 'Saved',
     'pptx.autosave.allChangesSaved': 'All changes saved',
+    // Title bar (PowerPoint-style top chrome row)
+    'pptx.titleBar.autoSave': 'AutoSave',
+    'pptx.titleBar.autoSaveOn': 'On',
+    'pptx.titleBar.autoSaveOff': 'Off',
+    'pptx.titleBar.toggleAutoSave': 'Toggle AutoSave',
+    'pptx.titleBar.save': 'Save',
+    'pptx.titleBar.savedToThisPc': 'Saved to this PC',
+    'pptx.titleBar.defaultFileName': 'Presentation',
+    'pptx.titleBar.search': 'Search',
+    'pptx.titleBar.record': 'Record',
     // Toolbar
     'pptx.toolbar.toggleSlidesPanel': 'Toggle slides panel',
     'pptx.toolbar.undo': 'Undo',