pptx-angular-viewer 1.1.59 → 1.1.60

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project are documented here.
 This file is generated from [Conventional Commits](https://www.conventionalcommits.org)
 by [git-cliff](https://git-cliff.org); do not edit it by hand.
 
+## [1.1.59](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.1.59) - 2026-07-03
+
+### Features
+
+- **angular:** Wire collaboration end-to-end (by @ChristopherVR) ([0498cea](https://github.com/ChristopherVR/pptx-viewer/commit/0498cea40ac10e08069f560be0a1cea6f92a8721))
+
+### Dependencies
+
+- **deps:** Declare yjs, y-websocket, and y-webrtc across bindings (by @ChristopherVR) ([27a2849](https://github.com/ChristopherVR/pptx-viewer/commit/27a2849da755a0902296dcd59557c1329a1cbadf))
+
 ## [1.1.57](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.1.57) - 2026-07-03
 
 ### Features

package/fesm2022/pptx-angular-viewer.mjs

@@ -22215,6 +22215,14 @@ function getDraggedShapeAdjustmentValue(state, deltaX) {
  */
 /** Maximum time (ms) to wait for an initial WebSocket connection before giving up. */
 const CONNECTION_TIMEOUT_MS = 30_000;
+/**
+ * Grace period (ms) before the first local doc write when the provider has not
+ * signalled initial sync. Websocket providers emit 'synced' reliably; webrtc
+ * only syncs once a peer is present, so a lone (fresh-room) peer seeds the doc
+ * after this delay instead. Gating the first write prevents a late joiner's
+ * bootstrap deck from merging into a room whose real content has not arrived.
+ */
+const INITIAL_SYNC_GRACE_MS = 3_000;
 /** Heartbeat interval (ms): re-publish presence so peers don't time us out. */
 const PRESENCE_HEARTBEAT_MS = 10_000;
 /** Minimum interval (ms) between outgoing presence broadcasts (rate limiting). */
@@ -23174,6 +23182,58 @@ function reconcileSlidesInYDoc(slides, ydoc, factories, origin = LOCAL_SYNC_ORIG
     }, origin);
 }
 
+/**
+ * collaboration-sync-gate.ts: first-write gate for collaborative sessions.
+ *
+ * Until a provider confirms its initial document sync, local state must not
+ * be written into the shared doc: a late joiner bootstrapped with a
+ * placeholder deck would otherwise merge that placeholder into the room's
+ * real content. Websocket providers emit a reliable 'synced' event; y-webrtc
+ * only syncs when a peer is present, so a lone fresh-room peer opens the gate
+ * after {@link INITIAL_SYNC_GRACE_MS} instead and seeds the empty doc.
+ *
+ * Usage per binding: create the gate with an `onOpen` callback that performs
+ * the deferred first write, call `arm()` when the provider is created (and on
+ * (re)connect), `open()` from the provider's sync event, gate local writes on
+ * `isOpen()`, and `reset()` on session teardown.
+ */
+/**
+ * Create a first-write gate. `onOpen` fires exactly once per session (until
+ * `reset()`), from either the provider sync signal or the grace timer.
+ */
+function createSyncGate(onOpen, graceMs = INITIAL_SYNC_GRACE_MS) {
+    let opened = false;
+    let timer = null;
+    const clear = () => {
+        if (timer !== null) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    };
+    const open = () => {
+        clear();
+        if (opened) {
+            return;
+        }
+        opened = true;
+        onOpen();
+    };
+    return {
+        isOpen: () => opened,
+        arm: () => {
+            clear();
+            if (!opened) {
+                timer = setTimeout(open, graceMs);
+            }
+        },
+        open,
+        reset: () => {
+            clear();
+            opened = false;
+        },
+    };
+}
+
 // ---------------------------------------------------------------------------
 // Tuning constants (px tolerances for position / size changes)
 // ---------------------------------------------------------------------------
@@ -35818,6 +35878,14 @@ class CollaborationService {
     connectTimer = null;
     unobserveSlides = null;
     writeBack = new WriteBackScheduler();
+    /**
+     * First-write gate: local broadcasts are suppressed (captured as pending)
+     * until the provider confirms its initial sync or the grace period lifts
+     * the gate, so a late joiner never seeds its placeholder deck into a room
+     * whose real content has not arrived yet.
+     */
+    syncGate = createSyncGate(() => this.flushPendingBroadcast());
+    pendingBroadcast = null;
     onRemoteSlides = null;
     canvasWidth = DEFAULT_CANVAS_BOUND;
     canvasHeight = DEFAULT_CANVAS_BOUND;
@@ -35881,6 +35949,8 @@ class CollaborationService {
             this.awareness.on('change', this.refreshPresence);
             this.awareness.on('update', this.refreshPresence);
             this.wireStatus(config);
+            this.syncGate.reset();
+            this.wireSynced();
             this.unobserveSlides = observeYDocSlides(this.ydoc, (_events, transaction) => this.onRemoteChange(transaction));
             this.active.set(true);
             this.refreshPresence();
@@ -35937,6 +36007,50 @@ class CollaborationService {
             }
         }, CONNECTION_TIMEOUT_MS);
     }
+    /**
+     * Open the first-write gate on the provider's initial-sync confirmation.
+     * y-websocket emits 'sync' with a boolean; y-webrtc emits 'synced' with an
+     * object carrying a `synced` flag (and only once a peer syncs, hence the
+     * grace timer). Listen to both; opening is idempotent.
+     */
+    wireSynced() {
+        const provider = this.provider;
+        if (!provider) {
+            return;
+        }
+        const handle = (payload) => {
+            const flag = payload;
+            const isSynced = typeof flag === 'boolean' ? flag : flag?.synced !== false;
+            if (isSynced) {
+                this.syncGate.open();
+            }
+        };
+        provider.on('sync', handle);
+        provider.on('synced', handle);
+        if (provider.synced === true) {
+            this.syncGate.open();
+        }
+        else {
+            this.syncGate.arm();
+        }
+    }
+    /**
+     * Perform the deferred first broadcast once the gate opens. When the doc is
+     * still empty (fresh room, or nobody else present), clear the baseline so
+     * the pending deck actually seeds it; when remote content already arrived,
+     * the pending deck matches the applied baseline and the write is a no-op.
+     */
+    flushPendingBroadcast() {
+        const pending = this.pendingBroadcast;
+        this.pendingBroadcast = null;
+        if (!pending || !this.ydoc || !this.yFactories) {
+            return;
+        }
+        if (this.ydoc.getArray(YDOC_SLIDES_KEY).length === 0) {
+            this.lastSynced = '';
+        }
+        this.broadcastSlides(pending);
+    }
     /** Handle a remote Y.Doc change, skipping our own local-origin transactions. */
     onRemoteChange(transaction) {
         if (transaction?.origin === LOCAL_SYNC_ORIGIN || this.applyingRemote || !this.ydoc) {
@@ -35956,6 +36070,8 @@ class CollaborationService {
     }
     disconnect() {
         this.clearConnectTimer();
+        this.syncGate.reset();
+        this.pendingBroadcast = null;
         this.writeBack.cancel();
         this.unobserveSlides?.();
         this.unobserveSlides = null;
@@ -35999,6 +36115,12 @@ class CollaborationService {
         if (!this.ydoc || !this.yFactories || this.applyingRemote || slides.length === 0) {
             return;
         }
+        if (!this.syncGate.isOpen()) {
+            // Defer until the initial sync confirms; the gate flushes the latest
+            // pending deck when it opens.
+            this.pendingBroadcast = slides;
+            return;
+        }
         const s = JSON.stringify(slides);
         if (s === this.lastSynced) {
             return;
@@ -57243,7 +57365,7 @@ class ElementRendererComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholderLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ElementRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ElementRendererComponent, isStandalone: true, selector: "pptx-element-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, obstacles: { classPropertyName: "obstacles", publicName: "obstacles", isSignal: true, isRequired: false, transformFunction: null }, canvasWidth: { classPropertyName: "canvasWidth", publicName: "canvasWidth", isSignal: true, isRequired: false, transformFunction: null }, canvasHeight: { classPropertyName: "canvasHeight", publicName: "canvasHeight", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, fieldContext: { classPropertyName: "fieldContext", publicName: "fieldContext", isSignal: true, isRequired: false, transformFunction: null }, editTemplateMode: { classPropertyName: "editTemplateMode", publicName: "editTemplateMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellCommit: "cellCommit", tableChange: "tableChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ElementRendererComponent, isStandalone: true, selector: "pptx-element-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, obstacles: { classPropertyName: "obstacles", publicName: "obstacles", isSignal: true, isRequired: false, transformFunction: null }, canvasWidth: { classPropertyName: "canvasWidth", publicName: "canvasWidth", isSignal: true, isRequired: false, transformFunction: null }, canvasHeight: { classPropertyName: "canvasHeight", publicName: "canvasHeight", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, fieldContext: { classPropertyName: "fieldContext", publicName: "fieldContext", isSignal: true, isRequired: false, transformFunction: null }, editTemplateMode: { classPropertyName: "editTemplateMode", publicName: "editTemplateMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellCommit: "cellCommit", tableChange: "tableChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
 		@switch (true) {
 			@case (element().type === 'connector') {
 				<pptx-connector-renderer
@@ -57517,6 +57639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: 'pptx-element-renderer',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'contents' },
                     imports: [
                         NgStyle,
                         ConnectorRendererComponent,
@@ -74119,7 +74242,7 @@ class FontEmbeddingListComponent {
     missingCount = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "missingCount" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FontEmbeddingListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FontEmbeddingListComponent, isStandalone: true, selector: "pptx-font-embedding-list", inputs: { usedFontFamilies: { classPropertyName: "usedFontFamilies", publicName: "usedFontFamilies", isSignal: true, isRequired: false, transformFunction: null }, availableFamilies: { classPropertyName: "availableFamilies", publicName: "availableFamilies", isSignal: true, isRequired: false, transformFunction: null }, embeddedSet: { classPropertyName: "embeddedSet", publicName: "embeddedSet", isSignal: true, isRequired: false, transformFunction: null }, scanning: { classPropertyName: "scanning", publicName: "scanning", isSignal: true, isRequired: false, transformFunction: null }, missingCount: { classPropertyName: "missingCount", publicName: "missingCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FontEmbeddingListComponent, isStandalone: true, selector: "pptx-font-embedding-list", inputs: { usedFontFamilies: { classPropertyName: "usedFontFamilies", publicName: "usedFontFamilies", isSignal: true, isRequired: false, transformFunction: null }, availableFamilies: { classPropertyName: "availableFamilies", publicName: "availableFamilies", isSignal: true, isRequired: false, transformFunction: null }, embeddedSet: { classPropertyName: "embeddedSet", publicName: "embeddedSet", isSignal: true, isRequired: false, transformFunction: null }, scanning: { classPropertyName: "scanning", publicName: "scanning", isSignal: true, isRequired: false, transformFunction: null }, missingCount: { classPropertyName: "missingCount", publicName: "missingCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
 		<div class="pptx-ng-fonts-section">
 			<h3 class="pptx-ng-fonts-section-title">
 				{{ 'pptx.fontEmbedding.usedFonts' | translate: { count: usedFontFamilies().length } }}
@@ -74168,7 +74291,7 @@ class FontEmbeddingListComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FontEmbeddingListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-font-embedding-list', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'pptx-font-embedding-list', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'contents' }, template: `
 		<div class="pptx-ng-fonts-section">
 			<h3 class="pptx-ng-fonts-section-title">
 				{{ 'pptx.fontEmbedding.usedFonts' | translate: { count: usedFontFamilies().length } }}
@@ -76039,7 +76162,7 @@ class ViewerExtraDialogsComponent {
         this.svc.showPassword.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerExtraDialogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ViewerExtraDialogsComponent, isStandalone: true, selector: "pptx-viewer-extra-dialogs", inputs: { activeSlideIndex: { classPropertyName: "activeSlideIndex", publicName: "activeSlideIndex", isSignal: true, isRequired: false, transformFunction: null }, selectedElementId: { classPropertyName: "selectedElementId", publicName: "selectedElementId", isSignal: true, isRequired: false, transformFunction: null }, filePath: { classPropertyName: "filePath", publicName: "filePath", isSignal: true, isRequired: false, transformFunction: null }, customShows: { classPropertyName: "customShows", publicName: "customShows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { restoreContent: "restoreContent" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ViewerExtraDialogsComponent, isStandalone: true, selector: "pptx-viewer-extra-dialogs", inputs: { activeSlideIndex: { classPropertyName: "activeSlideIndex", publicName: "activeSlideIndex", isSignal: true, isRequired: false, transformFunction: null }, selectedElementId: { classPropertyName: "selectedElementId", publicName: "selectedElementId", isSignal: true, isRequired: false, transformFunction: null }, filePath: { classPropertyName: "filePath", publicName: "filePath", isSignal: true, isRequired: false, transformFunction: null }, customShows: { classPropertyName: "customShows", publicName: "customShows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { restoreContent: "restoreContent" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
 		<pptx-equation-editor-dialog
 			[open]="svc.showEquation()"
 			[existingOmml]="svc.editingEquationOmml()"
@@ -76120,6 +76243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: 'pptx-viewer-extra-dialogs',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'contents' },
                     imports: [
                         EquationEditorDialogComponent,
                         SetUpSlideShowDialogComponent,