pptx-angular-viewer 1.1.57 → 1.1.59

package/fesm2022/pptx-angular-viewer.mjs

@@ -22501,117 +22501,22 @@ function asSelectionIds(value) {
 }
 
 /**
- * collaboration-sync.ts: Framework-agnostic CRDT sync utilities for the
- * pptx-viewer collaboration stack (Yjs backend).
+ * collaboration-text-codec.ts: TextSegment[] <-> Y.Text delta codec used by the
+ * collaboration sync layer. Split out of collaboration-sync.ts to keep both
+ * modules focused.
  *
  * Exports:
- *  - Structural Yjs interfaces (no hard yjs import - bindings pass live instances)
- *  - YjsFactories: factory interface bindings implement using `new Y.Map()` etc.
- *  - encodeTextBody / decodeTextBody: TextSegment[] <-> YTextLike delta
- *  - writeElementToYMap / readElementFromYMap: PptxElement <-> YMapLike
- *  - writeSlideToYMap / readSlideFromYMap: PptxSlide <-> YMapLike
- *  - writeSlidesToYDoc / readSlidesFromYDoc: PptxSlide[] <-> Y.Doc
- *  - observeYDocSlides: register a change listener on the pptx:slides array
- *
- * Y.Doc schema (matches pptx-codec.ts in packages/tools):
- *   pptx:slides  - Y.Array of slide Y.Maps
- *   Each slide Y.Map has scalar keys + `_`-prefixed JSON blobs + `elements`
- *   Each element Y.Map has scalar keys + `_`-prefixed JSON blobs + `textBody`
- *   textBody is a Y.Text with one delta-op per TextSegment
+ *  - DeltaOp / YTextLike: structural Yjs text interfaces (no yjs import)
+ *  - encodeTextBody: write TextSegment[] into a live YTextLike
+ *  - encodeSegmentsToDelta: pure simulation of the delta Y.Text would produce
+ *  - decodeDelta / decodeTextBody: delta -> TextSegment[]
+ *  - isYTextLike: runtime guard
  */
-// ---------------------------------------------------------------------------
-// Y.Doc schema constants (mirror of pptx-codec.ts)
-// ---------------------------------------------------------------------------
-const YDOC_SLIDES_KEY = 'pptx:slides';
-const YDOC_META_KEY = 'pptx:meta';
-const SCALAR_ELEMENT_KEYS = new Set([
-    'id',
-    'type',
-    'x',
-    'y',
-    'width',
-    'height',
-    'rotation',
-    'flipHorizontal',
-    'flipVertical',
-    'hidden',
-    'opacity',
-    'text',
-    'name',
-    'altText',
-    'shapeType',
-    'placeholder',
-    'imagePath',
-    'imageData',
-    'svgContent',
-    'inkSvg',
-    'sourceSlideId',
-    'mediaType',
-    'mediaPath',
-    'linkedTxbxId',
-    'linkedTxbxSeq',
-    'promptText',
-]);
-const COMPLEX_ELEMENT_FIELDS = {
-    textStyle: '_ts',
-    shapeStyle: '_ss',
-    shapeAdjustments: '_sa',
-    adjustmentHandles: '_ah',
-    tableData: '_td',
-    chartData: '_cd',
-    smartArtData: '_smad',
-    connectionStart: '_cs',
-    connectionEnd: '_ce',
-    animations: '_an',
-    nativeAnimations: '_na',
-    children: '_ch',
-    paragraphIndents: '_pi',
-    rawXml: '_rx',
-    actionClick: '_ac',
-    actionHover: '_av',
-    locks: '_lk',
-    imageEffects: '_ie',
-    cropShape: '_cr',
-    mediaBookmarks: '_mb',
-    captionTracks: '_ct',
-};
-const REV_COMPLEX_ELEMENT = Object.fromEntries(Object.entries(COMPLEX_ELEMENT_FIELDS).map(([k, v]) => [v, k]));
-const SCALAR_SLIDE_KEYS = new Set([
-    'id',
-    'rId',
-    'sourceSlideId',
-    'layoutPath',
-    'layoutName',
-    'slideNumber',
-    'hidden',
-    'sectionName',
-    'sectionId',
-    'backgroundColor',
-    'backgroundImage',
-    'backgroundGradient',
-    'notes',
-    'backgroundShowAnimation',
-    'showMasterShapes',
-    'isDirty',
-]);
-const COMPLEX_SLIDE_FIELDS = {
-    transition: '_tr',
-    animations: '_an',
-    nativeAnimations: '_na',
-    rawTiming: '_rt',
-    notesSegments: '_ns',
-    comments: '_cm',
-    warnings: '_wa',
-    rawXml: '_rx',
-    clrMapOverride: '_cm2',
-    guides: '_gu',
-    customerData: '_cu',
-    activeXControls: '_ax',
-};
-const REV_COMPLEX_SLIDE = Object.fromEntries(Object.entries(COMPLEX_SLIDE_FIELDS).map(([k, v]) => [v, k]));
-// ---------------------------------------------------------------------------
-// Text-body encode/decode (TextSegment[] <-> YTextLike delta)
-// ---------------------------------------------------------------------------
+function isYTextLike(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        typeof value.toDelta === 'function');
+}
 function buildSegmentAttrs(seg) {
     const a = {};
     const style = seg.style;
@@ -22668,29 +22573,56 @@ function buildSegmentAttrs(seg) {
     }
     return a;
 }
+/** Resolve the literal text a segment contributes to the Y.Text document. */
+function segmentInsertText(seg) {
+    if (seg.isParagraphBreak === true || seg.isLineBreak === true) {
+        return '\n';
+    }
+    if (typeof seg.text === 'string' && seg.text.length > 0) {
+        return seg.text;
+    }
+    // Empty non-break run: zero-width space holds the attributes.
+    return '​';
+}
 function encodeTextBody(segments, ytext) {
     let offset = 0;
     for (const raw of segments) {
         const seg = raw;
         const attrs = buildSegmentAttrs(seg);
-        const hasAttrs = Object.keys(attrs).length > 0;
-        if (seg.isParagraphBreak === true || seg.isLineBreak === true) {
-            ytext.insert(offset, '\n', hasAttrs ? attrs : undefined);
-            offset += 1;
-        }
-        else if (typeof seg.text === 'string' && seg.text.length > 0) {
-            ytext.insert(offset, seg.text, hasAttrs ? attrs : undefined);
-            offset += seg.text.length;
+        const text = segmentInsertText(seg);
+        // Always pass an explicit attrs object: Yjs makes attribute-less inserts
+        // inherit the preceding character's formatting, which bled styles and
+        // paragraph-break markers into unstyled runs.
+        ytext.insert(offset, text, attrs);
+        offset += text.length;
+    }
+}
+/**
+ * Pure simulation of the delta a Y.Text produces after `encodeTextBody`:
+ * adjacent runs with identical attribute maps merge into one op, matching
+ * Yjs run-merging. Used to compare desired segments against a live Y.Text
+ * without instantiating one.
+ */
+function encodeSegmentsToDelta(segments) {
+    const ops = [];
+    for (const raw of segments) {
+        const seg = raw;
+        const attrs = buildSegmentAttrs(seg);
+        const attributes = Object.keys(attrs).length > 0 ? attrs : undefined;
+        const text = segmentInsertText(seg);
+        const prev = ops[ops.length - 1];
+        if (prev &&
+            typeof prev.insert === 'string' &&
+            JSON.stringify(prev.attributes ?? null) === JSON.stringify(attributes ?? null)) {
+            prev.insert += text;
         }
         else {
-            // Empty non-break run: use zero-width space to hold attributes
-            ytext.insert(offset, '​', hasAttrs ? attrs : undefined);
-            offset += 1;
+            ops.push(attributes ? { insert: text, attributes } : { insert: text });
         }
     }
+    return ops;
 }
-function decodeTextBody(ytext) {
-    const delta = ytext.toDelta();
+function decodeDelta(delta) {
     const segments = [];
     for (const op of delta) {
         if (typeof op.insert !== 'string' || op.insert === '') {
@@ -22791,6 +22723,128 @@ function decodeTextBody(ytext) {
     }
     return segments;
 }
+function decodeTextBody(ytext) {
+    return decodeDelta(ytext.toDelta());
+}
+
+/**
+ * collaboration-sync.ts: Framework-agnostic CRDT sync utilities for the
+ * pptx-viewer collaboration stack (Yjs backend).
+ *
+ * Exports:
+ *  - Structural Yjs interfaces (no hard yjs import - bindings pass live instances)
+ *  - YjsFactories: factory interface bindings implement using `new Y.Map()` etc.
+ *  - writeElementToYMap / readElementFromYMap: PptxElement <-> YMapLike
+ *  - writeSlideToYMap / readSlideFromYMap: PptxSlide <-> YMapLike
+ *  - writeSlidesToYDoc / readSlidesFromYDoc: PptxSlide[] <-> Y.Doc
+ *  - observeYDocSlides: register a change listener on the pptx:slides array
+ *  - re-exports of the text codec (collaboration-text-codec.ts)
+ *
+ * Y.Doc schema:
+ *   pptx:slides  - Y.Array of slide Y.Maps
+ *   Each slide Y.Map has scalar keys + `_`-prefixed JSON blobs + `elements`
+ *   Each element Y.Map has scalar keys + `_`-prefixed JSON blobs + `textBody`
+ *   textBody is a Y.Text with one delta-op per TextSegment
+ *
+ * NOTE: packages/tools' pptx-codec.ts implements a similar schema but with
+ * different complex-field key prefixes (e.g. `_textStyle` vs `_ts` here); the
+ * two doc layouts are NOT interchangeable on the same Y.Doc.
+ *
+ * Prefer `reconcileSlidesInYDoc` (collaboration-reconcile.ts) over
+ * `writeSlidesToYDoc` for live editing: it updates only what changed instead
+ * of replacing the whole slides array, so concurrent edits merge per
+ * slide/element/field rather than colliding at document granularity.
+ */
+// ---------------------------------------------------------------------------
+// Y.Doc schema constants
+// ---------------------------------------------------------------------------
+const YDOC_SLIDES_KEY = 'pptx:slides';
+const YDOC_META_KEY = 'pptx:meta';
+const SCALAR_ELEMENT_KEYS = new Set([
+    'id',
+    'type',
+    'x',
+    'y',
+    'width',
+    'height',
+    'rotation',
+    'flipHorizontal',
+    'flipVertical',
+    'hidden',
+    'opacity',
+    'text',
+    'name',
+    'altText',
+    'shapeType',
+    'placeholder',
+    'imagePath',
+    'imageData',
+    'svgContent',
+    'inkSvg',
+    'sourceSlideId',
+    'mediaType',
+    'mediaPath',
+    'linkedTxbxId',
+    'linkedTxbxSeq',
+    'promptText',
+]);
+const COMPLEX_ELEMENT_FIELDS = {
+    textStyle: '_ts',
+    shapeStyle: '_ss',
+    shapeAdjustments: '_sa',
+    adjustmentHandles: '_ah',
+    tableData: '_td',
+    chartData: '_cd',
+    smartArtData: '_smad',
+    connectionStart: '_cs',
+    connectionEnd: '_ce',
+    animations: '_an',
+    nativeAnimations: '_na',
+    children: '_ch',
+    paragraphIndents: '_pi',
+    rawXml: '_rx',
+    actionClick: '_ac',
+    actionHover: '_av',
+    locks: '_lk',
+    imageEffects: '_ie',
+    cropShape: '_cr',
+    mediaBookmarks: '_mb',
+    captionTracks: '_ct',
+};
+const REV_COMPLEX_ELEMENT = Object.fromEntries(Object.entries(COMPLEX_ELEMENT_FIELDS).map(([k, v]) => [v, k]));
+const SCALAR_SLIDE_KEYS = new Set([
+    'id',
+    'rId',
+    'sourceSlideId',
+    'layoutPath',
+    'layoutName',
+    'slideNumber',
+    'hidden',
+    'sectionName',
+    'sectionId',
+    'backgroundColor',
+    'backgroundImage',
+    'backgroundGradient',
+    'notes',
+    'backgroundShowAnimation',
+    'showMasterShapes',
+    'isDirty',
+]);
+const COMPLEX_SLIDE_FIELDS = {
+    transition: '_tr',
+    animations: '_an',
+    nativeAnimations: '_na',
+    rawTiming: '_rt',
+    notesSegments: '_ns',
+    comments: '_cm',
+    warnings: '_wa',
+    rawXml: '_rx',
+    clrMapOverride: '_cm2',
+    guides: '_gu',
+    customerData: '_cu',
+    activeXControls: '_ax',
+};
+const REV_COMPLEX_SLIDE = Object.fromEntries(Object.entries(COMPLEX_SLIDE_FIELDS).map(([k, v]) => [v, k]));
 // ---------------------------------------------------------------------------
 // Element serialization
 // ---------------------------------------------------------------------------
@@ -22815,11 +22869,6 @@ function writeElementToYMap(element, ymap, factories) {
         }
     }
 }
-function isYTextLike(value) {
-    return (typeof value === 'object' &&
-        value !== null &&
-        typeof value.toDelta === 'function');
-}
 function readElementFromYMap(ymap) {
     const element = {};
     ymap.forEach((value, key) => {
@@ -22897,6 +22946,11 @@ function readSlideFromYMap(ymap) {
 // ---------------------------------------------------------------------------
 // Y.Doc-level helpers
 // ---------------------------------------------------------------------------
+/**
+ * Replace the full slides array in the Y.Doc. Coarse: prefer
+ * `reconcileSlidesInYDoc` for live editing; this remains suitable for
+ * one-shot seeding of an empty document.
+ */
 function writeSlidesToYDoc(slides, ydoc, factories, origin) {
     ydoc.transact(() => {
         const arr = ydoc.getArray(YDOC_SLIDES_KEY);
@@ -22918,12 +22972,208 @@ function readSlidesFromYDoc(ydoc) {
     }
     return slides;
 }
+/**
+ * Observe (deeply) the pptx:slides array. The handler receives the Yjs
+ * events plus the transaction, so callers can skip their own writes by
+ * checking `transaction.origin` (see LOCAL_SYNC_ORIGIN in
+ * collaboration-reconcile.ts).
+ */
 function observeYDocSlides(ydoc, onChange) {
     const arr = ydoc.getArray(YDOC_SLIDES_KEY);
     arr.observeDeep(onChange);
     return () => arr.unobserveDeep(onChange);
 }
 
+/**
+ * collaboration-reconcile.ts: Granular Y.Doc reconciliation for collaborative
+ * editing.
+ *
+ * `writeSlidesToYDoc` replaces the entire pptx:slides array on every write,
+ * which makes concurrent edits collide at document granularity (last writer
+ * wins for the whole deck). `reconcileSlidesInYDoc` instead diffs the desired
+ * slide state against the live Y.Doc and only mutates what changed:
+ *
+ *  - slides and elements are matched by `id`; unchanged ones keep their Y.Map
+ *    instance so concurrent field edits merge via Yjs
+ *  - scalar / complex fields are compared and only set when different
+ *  - textBody is only replaced when its canonical decoded form differs
+ *  - removed items are deleted, new ones inserted at their position; moves
+ *    are delete+reinsert (Yjs has no move primitive)
+ *
+ * All mutations run in a single transaction tagged with LOCAL_SYNC_ORIGIN (or
+ * a caller-supplied origin) so observers can ignore their own writes.
+ */
+/** Transaction origin used for local reconcile writes. */
+const LOCAL_SYNC_ORIGIN = 'pptx-viewer:local-sync';
+function jsonEqual(a, b) {
+    return a === b || JSON.stringify(a) === JSON.stringify(b);
+}
+function reconcileScalars(ymap, rec, keys) {
+    for (const key of keys) {
+        const next = rec[key];
+        const current = ymap.get(key);
+        if (next === undefined) {
+            if (current !== undefined) {
+                ymap.delete(key);
+            }
+        }
+        else if (!jsonEqual(current, next)) {
+            ymap.set(key, next);
+        }
+    }
+}
+function reconcileComplexFields(ymap, rec, fields) {
+    for (const [original, prefixed] of Object.entries(fields)) {
+        const next = rec[original] === undefined ? undefined : JSON.stringify(rec[original]);
+        const current = ymap.get(prefixed);
+        if (next === undefined) {
+            if (current !== undefined) {
+                ymap.delete(prefixed);
+            }
+        }
+        else if (current !== next) {
+            ymap.set(prefixed, next);
+        }
+    }
+}
+function reconcileTextBody(ymap, rec, factories) {
+    const segments = rec.textSegments;
+    const current = ymap.get('textBody');
+    if (!Array.isArray(segments)) {
+        if (current !== undefined) {
+            ymap.delete('textBody');
+        }
+        return;
+    }
+    const desired = decodeDelta(encodeSegmentsToDelta(segments));
+    const existing = isYTextLike(current) ? decodeDelta(current.toDelta()) : undefined;
+    if (existing !== undefined && jsonEqual(existing, desired)) {
+        return;
+    }
+    const ytext = factories.createText();
+    encodeTextBody(segments, ytext);
+    ymap.set('textBody', ytext);
+}
+function reconcileElementYMap(ymap, element, factories) {
+    const rec = element;
+    reconcileScalars(ymap, rec, SCALAR_ELEMENT_KEYS);
+    reconcileComplexFields(ymap, rec, COMPLEX_ELEMENT_FIELDS);
+    reconcileTextBody(ymap, rec, factories);
+}
+function mapIdAt(arr, index) {
+    const entry = arr.get(index);
+    if (!entry || typeof entry.get !== 'function') {
+        return undefined;
+    }
+    const id = entry.get('id');
+    return typeof id === 'string' ? id : undefined;
+}
+/**
+ * Reconcile a Y.Array of Y.Maps against a desired item list, matching by id.
+ * Items without a string id fall back to positional matching.
+ */
+function reconcileYArrayById(arr, items, adapter) {
+    const desiredIds = new Set();
+    for (const item of items) {
+        const id = adapter.idOf(item);
+        if (typeof id === 'string') {
+            desiredIds.add(id);
+        }
+    }
+    // Pass 1: delete maps whose id is gone (or duplicated); keep the last dup.
+    const seen = new Set();
+    for (let i = arr.length - 1; i >= 0; i--) {
+        const id = mapIdAt(arr, i);
+        if (id === undefined) {
+            continue;
+        }
+        if (!desiredIds.has(id) || seen.has(id)) {
+            arr.delete(i, 1);
+        }
+        else {
+            seen.add(id);
+        }
+    }
+    // Pass 2: walk desired order; update in place, move, or insert.
+    for (let pos = 0; pos < items.length; pos++) {
+        const item = items[pos];
+        const id = adapter.idOf(item);
+        const idAtPos = pos < arr.length ? mapIdAt(arr, pos) : undefined;
+        if (id === undefined) {
+            // Positional fallback for id-less items.
+            if (pos < arr.length && idAtPos === undefined) {
+                adapter.update(arr.get(pos), item);
+            }
+            else {
+                arr.insert(pos, [adapter.create(item)]);
+            }
+            continue;
+        }
+        if (idAtPos === id) {
+            adapter.update(arr.get(pos), item);
+            continue;
+        }
+        let foundAt = -1;
+        for (let j = pos + 1; j < arr.length; j++) {
+            if (mapIdAt(arr, j) === id) {
+                foundAt = j;
+                break;
+            }
+        }
+        if (foundAt >= 0) {
+            // Move: Yjs cannot re-insert an integrated type, so rebuild at pos.
+            arr.delete(foundAt, 1);
+        }
+        arr.insert(pos, [adapter.create(item)]);
+    }
+    // Pass 3: trim trailing leftovers.
+    if (arr.length > items.length) {
+        arr.delete(items.length, arr.length - items.length);
+    }
+}
+const isYArrayLike = (value) => typeof value === 'object' &&
+    value !== null &&
+    typeof value.insert === 'function' &&
+    typeof value.toArray === 'function';
+function reconcileSlideYMap(ymap, slide, factories) {
+    const rec = slide;
+    reconcileScalars(ymap, rec, SCALAR_SLIDE_KEYS);
+    reconcileComplexFields(ymap, rec, COMPLEX_SLIDE_FIELDS);
+    let elements = ymap.get('elements');
+    if (!isYArrayLike(elements)) {
+        elements = factories.createArray();
+        ymap.set('elements', elements);
+    }
+    reconcileYArrayById(elements, slide.elements, {
+        idOf: (el) => (typeof el.id === 'string' ? el.id : undefined),
+        create: (el) => {
+            const map = factories.createMap();
+            writeElementToYMap(el, map, factories);
+            return map;
+        },
+        update: (map, el) => reconcileElementYMap(map, el, factories),
+    });
+}
+/**
+ * Granular local -> Y.Doc sync: mutate only what changed, inside one
+ * transaction tagged with `origin` (default LOCAL_SYNC_ORIGIN) so the
+ * caller's own observer can skip the resulting events.
+ */
+function reconcileSlidesInYDoc(slides, ydoc, factories, origin = LOCAL_SYNC_ORIGIN) {
+    ydoc.transact(() => {
+        const arr = ydoc.getArray(YDOC_SLIDES_KEY);
+        reconcileYArrayById(arr, slides, {
+            idOf: (slide) => (typeof slide.id === 'string' ? slide.id : undefined),
+            create: (slide) => {
+                const map = factories.createMap();
+                writeSlideToYMap(slide, map, factories);
+                return map;
+            },
+            update: (map, slide) => reconcileSlideYMap(map, slide, factories),
+        });
+    }, origin);
+}
+
 // ---------------------------------------------------------------------------
 // Tuning constants (px tolerances for position / size changes)
 // ---------------------------------------------------------------------------
@@ -28777,6 +29027,15 @@ function formatRelativeTime(ts) {
  */
 /** Default y-websocket server URL used when no default is supplied. */
 const DEFAULT_BROADCAST_SERVER_URL = 'ws://localhost:1234';
+/**
+ * Resolve the transport implied by a server-URL form field: a blank server
+ * URL selects the serverless y-webrtc transport (peers meet via WebRTC
+ * signaling plus same-browser BroadcastChannel); anything else is a
+ * y-websocket server URL.
+ */
+function resolveTransportForServerUrl(serverUrl) {
+    return serverUrl.trim().length === 0 ? 'webrtc' : 'websocket';
+}
 /** Generate a fresh, broadcast-scoped room id (`broadcast-<suffix>`). */
 function generateBroadcastRoomId() {
     const suffix = Math.random().toString(36).slice(2, 10);
@@ -28792,30 +29051,44 @@ function seedBroadcastFields(defaults) {
         serverUrl: defaults?.serverUrl ?? DEFAULT_BROADCAST_SERVER_URL,
     };
 }
-/** Whether both required fields are non-blank (after trimming). */
+/**
+ * Whether the form can start: the room id is required; the server URL may be
+ * blank, which selects the serverless webrtc transport.
+ */
 function canStartBroadcast(fields) {
-    return fields.roomId.trim().length > 0 && fields.serverUrl.trim().length > 0;
+    return fields.roomId.trim().length > 0;
 }
 /**
  * Assemble a {@link BroadcastConfig} from the (trimmed) form fields, or `null`
- * when incomplete.
+ * when incomplete. A blank server URL yields `transport: 'webrtc'`.
  */
 function buildBroadcastConfig(fields) {
     if (!canStartBroadcast(fields)) {
         return null;
     }
-    return { roomId: fields.roomId.trim(), serverUrl: fields.serverUrl.trim() };
+    const serverUrl = fields.serverUrl.trim();
+    return {
+        roomId: fields.roomId.trim(),
+        serverUrl,
+        transport: resolveTransportForServerUrl(serverUrl),
+    };
 }
 /**
  * Build the shareable viewer follow-link for a broadcast. Returns just the
  * room id when no `origin`/`pathname` are available (non-browser environments).
+ * A blank server URL produces a `transport=webrtc` link instead of a
+ * `server=` parameter.
  */
 function buildBroadcastViewerUrl(roomId, serverUrl, location) {
     if (!location) {
         return roomId;
     }
     const room = encodeURIComponent(roomId);
-    const server = encodeURIComponent(serverUrl);
+    const trimmed = serverUrl.trim();
+    if (trimmed.length === 0) {
+        return `${location.origin}${location.pathname}?broadcast=${room}&transport=webrtc`;
+    }
+    const server = encodeURIComponent(trimmed);
     return `${location.origin}${location.pathname}?broadcast=${room}&server=${server}`;
 }
 /** Whether the runtime exposes a usable async clipboard write API. */
@@ -34830,6 +35103,9 @@ class BroadcastDialogComponent {
     /** The shareable follow link (shown while `active`). */
     viewerUrl = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "viewerUrl" }] : /* istanbul ignore next */ []));
+    /** Whether the active broadcast is peer-to-peer (serverless webrtc). */
+    p2p = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "p2p" }] : /* istanbul ignore next */ []));
     /** Fired when the presenter starts a broadcast. */
     start = output();
     /** Fired when the presenter stops the active broadcast. */
@@ -34844,6 +35120,9 @@ class BroadcastDialogComponent {
     ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
     canStart = computed(() => canStartBroadcast({ roomId: this.roomId(), serverUrl: this.serverUrl() }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canStart" }] : /* istanbul ignore next */ []));
+    /** Blank server URL selects the serverless peer-to-peer (webrtc) transport. */
+    isP2p = computed(() => this.serverUrl().trim().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isP2p" }] : /* istanbul ignore next */ []));
     broadcastingTitle = translate('pptx.broadcast.broadcastingTitle');
     startTitle = translate('pptx.broadcast.startTitle');
     dialogTitle = computed(() => this.active() ? this.broadcastingTitle() : this.startTitle(), /* @ts-ignore */
@@ -34893,7 +35172,7 @@ class BroadcastDialogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BroadcastDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: BroadcastDialogComponent, isStandalone: true, selector: "pptx-broadcast-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaults: { classPropertyName: "defaults", publicName: "defaults", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, connected: { classPropertyName: "connected", publicName: "connected", isSignal: true, isRequired: false, transformFunction: null }, viewerCount: { classPropertyName: "viewerCount", publicName: "viewerCount", isSignal: true, isRequired: false, transformFunction: null }, viewerUrl: { classPropertyName: "viewerUrl", publicName: "viewerUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { start: "start", stop: "stop", close: "close" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: BroadcastDialogComponent, isStandalone: true, selector: "pptx-broadcast-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaults: { classPropertyName: "defaults", publicName: "defaults", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, connected: { classPropertyName: "connected", publicName: "connected", isSignal: true, isRequired: false, transformFunction: null }, viewerCount: { classPropertyName: "viewerCount", publicName: "viewerCount", isSignal: true, isRequired: false, transformFunction: null }, viewerUrl: { classPropertyName: "viewerUrl", publicName: "viewerUrl", isSignal: true, isRequired: false, transformFunction: null }, p2p: { classPropertyName: "p2p", publicName: "p2p", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { start: "start", stop: "stop", close: "close" }, ngImport: i0, template: `
 		<pptx-modal-dialog [open]="open()" [title]="dialogTitle()" (close)="onClose()">
 			@if (active()) {
 				<!-- Active: share the follow link + stop control -->
@@ -34913,6 +35192,10 @@ class BroadcastDialogComponent {
 						</span>
 					</div>
 
+					@if (p2p()) {
+						<p class="pptx-ng-broadcast-hint">{{ 'pptx.broadcast.p2pServerValue' | translate }}</p>
+					}
+
 					<p class="pptx-ng-broadcast-desc">
 						{{ 'pptx.broadcast.liveDesc' | translate }}
 					</p>
@@ -34979,6 +35262,9 @@ class BroadcastDialogComponent {
 							[value]="serverUrl()"
 							(input)="serverUrl.set(asValue($event))"
 						/>
+						@if (isP2p()) {
+							<p class="pptx-ng-broadcast-hint">{{ 'pptx.broadcast.p2pHint' | translate }}</p>
+						}
 					</div>
 				</div>
 			}
@@ -35023,6 +35309,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						</span>
 					</div>
 
+					@if (p2p()) {
+						<p class="pptx-ng-broadcast-hint">{{ 'pptx.broadcast.p2pServerValue' | translate }}</p>
+					}
+
 					<p class="pptx-ng-broadcast-desc">
 						{{ 'pptx.broadcast.liveDesc' | translate }}
 					</p>
@@ -35089,6 +35379,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 							[value]="serverUrl()"
 							(input)="serverUrl.set(asValue($event))"
 						/>
+						@if (isP2p()) {
+							<p class="pptx-ng-broadcast-hint">{{ 'pptx.broadcast.p2pHint' | translate }}</p>
+						}
 					</div>
 				</div>
 			}
@@ -35110,7 +35403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			</div>
 		</pptx-modal-dialog>
 	`, styles: [".pptx-ng-broadcast{display:flex;flex-direction:column;gap:1rem}.pptx-ng-broadcast-desc{margin:0;font-size:.8125rem;line-height:1.5;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-broadcast-field{display:flex;flex-direction:column;gap:.375rem}.pptx-ng-broadcast-label{font-size:.75rem;font-weight:500;color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-broadcast-input{width:100%;padding:.375rem .75rem;border:1px solid var(--pptx-border, #374151);border-radius:.375rem;background:var(--pptx-background, #030712);color:var(--pptx-foreground, #f3f4f6);font-size:.8125rem}.pptx-ng-broadcast-input:focus{outline:none;border-color:var(--pptx-primary, #6366f1)}.pptx-ng-broadcast-link-row{display:flex;align-items:center;gap:.5rem}.pptx-ng-broadcast-hint{margin:0;font-size:.6875rem;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-broadcast-btn{padding:.375rem .75rem;border:1px solid var(--pptx-border, #374151);border-radius:.375rem;background:var(--pptx-card, #111827);color:var(--pptx-foreground, #f3f4f6);font-size:.75rem;cursor:pointer;white-space:nowrap;transition:background .15s ease}.pptx-ng-broadcast-btn:hover:not(:disabled){background:var(--pptx-border, #374151)}.pptx-ng-broadcast-btn:disabled{opacity:.4;cursor:not-allowed}.pptx-ng-broadcast-btn-primary{border-color:var(--pptx-primary, #6366f1);background:var(--pptx-primary, #6366f1);color:#fff}.pptx-ng-broadcast-btn-primary:hover:not(:disabled){background:var(--pptx-primary, #6366f1);filter:brightness(1.1)}.pptx-ng-broadcast-stop{width:100%;padding:.5rem .75rem;border:1px solid rgba(239,68,68,.3);border-radius:.375rem;background:#ef44441a;color:#f87171;font-size:.75rem;font-weight:500;cursor:pointer;transition:background .15s ease}.pptx-ng-broadcast-stop:hover{background:#ef444433}.pptx-ng-broadcast-status-row{display:flex;align-items:center;gap:.5rem;font-size:.8125rem}.pptx-ng-broadcast-status-dot{width:.5rem;height:.5rem;border-radius:9999px;background:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-broadcast-status-dot.is-on{background:#22c55e}.pptx-ng-broadcast-status-text{font-weight:500;color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-broadcast-count{margin-left:auto;color:var(--pptx-muted-foreground, #9ca3af)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaults", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], connected: [{ type: i0.Input, args: [{ isSignal: true, alias: "connected", required: false }] }], viewerCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerCount", required: false }] }], viewerUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerUrl", required: false }] }], start: [{ type: i0.Output, args: ["start"] }], stop: [{ type: i0.Output, args: ["stop"] }], close: [{ type: i0.Output, args: ["close"] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaults", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], connected: [{ type: i0.Input, args: [{ isSignal: true, alias: "connected", required: false }] }], viewerCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerCount", required: false }] }], viewerUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerUrl", required: false }] }], p2p: [{ type: i0.Input, args: [{ isSignal: true, alias: "p2p", required: false }] }], start: [{ type: i0.Output, args: ["start"] }], stop: [{ type: i0.Output, args: ["stop"] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
 /**
  * Thin re-export shim → vendored `pptx-viewer-shared`
@@ -35246,6 +35539,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 	`, styles: [":host{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:9999}.pptx-ng-collab-cursor{position:absolute;top:0;left:0;pointer-events:none;will-change:transform;transition:transform 90ms linear}.pptx-ng-collab-pointer{display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}.pptx-ng-collab-label{position:absolute;top:16px;left:12px;max-width:150px;padding:2px 6px;border-radius:4px;color:#fff;font-family:system-ui,sans-serif;font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 2px #0000004d}\n"] }]
         }], propDecorators: { cursors: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursors", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }] } });
 
+/**
+ * collaboration-local-presence.ts: publishes the local user's presence into a
+ * single awareness `presence` field.
+ *
+ * Cursor, selection, and active-slide updates all merge into one record so a
+ * later cursor move never clobbers the selection (or vice versa). The remote
+ * side reads this shape via the shared `derivePresenceList`.
+ */
+class LocalPresencePublisher {
+    awareness;
+    identity;
+    activeSlide = 0;
+    cursor = { x: 0, y: 0 };
+    selection;
+    constructor(awareness, identity) {
+        this.awareness = awareness;
+        this.identity = identity;
+    }
+    /** Re-emit the merged presence record (also used as a heartbeat). */
+    publish() {
+        this.awareness.setLocalStateField('presence', {
+            userName: this.identity.userName,
+            userColor: this.identity.userColor,
+            userAvatar: this.identity.userAvatar,
+            role: this.identity.role,
+            activeSlideIndex: this.activeSlide,
+            cursorX: this.cursor.x,
+            cursorY: this.cursor.y,
+            selectedElementId: this.selection,
+            lastUpdated: new Date().toISOString(),
+        });
+    }
+    setCursor(x, y, activeSlideIndex = this.activeSlide) {
+        this.cursor = { x, y };
+        this.activeSlide = activeSlideIndex;
+        // A bare `cursor` field mirrors the flat awareness shape some peers read.
+        this.awareness.setLocalStateField('cursor', { x, y });
+        this.publish();
+    }
+    setSelection(selectedElementId, activeSlideIndex = this.activeSlide) {
+        this.selection = selectedElementId;
+        this.activeSlide = activeSlideIndex;
+        this.publish();
+    }
+    setActiveSlide(index) {
+        this.activeSlide = Math.max(0, Math.floor(index));
+        this.publish();
+    }
+}
+
+/**
+ * collaboration-providers.ts: transport factories for the Angular
+ * collaboration service.
+ *
+ * Isolates the dynamic `yjs` / `y-websocket` / `y-webrtc` imports and provider
+ * construction so the service focuses on lifecycle + reactive state. The Yjs
+ * packages are dynamically imported so they are fully tree-shaken when
+ * collaboration is unused; each specifier is read from a variable so bundlers
+ * do not eagerly follow it (mirrors the historical `/* @vite-ignore *\/`
+ * pattern).
+ */
+async function createDoc() {
+    const yModule = 'yjs';
+    const Y = (await import(/* @vite-ignore */ yModule));
+    const doc = new Y.Doc();
+    const factories = {
+        createMap: () => new Y.Map(),
+        createArray: () => new Y.Array(),
+        createText: () => new Y.Text(),
+    };
+    return { doc, factories, Y };
+}
+/** Create a y-websocket transport bundle for `config`. */
+async function createWebsocketBundle(config) {
+    const wsSpecifier = 'y-websocket';
+    const [{ doc, factories }, yws] = await Promise.all([
+        createDoc(),
+        import(/* @vite-ignore */ wsSpecifier),
+    ]);
+    const provider = new yws.WebsocketProvider(config.serverUrl, config.roomId, doc, config.authToken ? { params: { token: config.authToken } } : undefined);
+    return { doc, provider, awareness: provider.awareness, factories };
+}
+/**
+ * Create a y-webrtc (peer-to-peer, serverless) transport bundle for `config`.
+ * Peers rendezvous through the configured `signaling` servers (or y-webrtc's
+ * public default) and same-browser tabs additionally sync via BroadcastChannel.
+ * `authToken` is passed as the room `password`.
+ */
+async function createWebrtcBundle(config) {
+    const rtcSpecifier = 'y-webrtc';
+    const [{ doc, factories }, yrtc] = await Promise.all([
+        createDoc(),
+        import(/* @vite-ignore */ rtcSpecifier),
+    ]);
+    const provider = new yrtc.WebrtcProvider(config.roomId, doc, {
+        signaling: config.signaling?.length ? config.signaling : undefined,
+        password: config.authToken || undefined,
+    });
+    return { doc, provider, awareness: provider.awareness, factories };
+}
+
 /**
  * Split inherited template (master/layout) elements out of each loaded slide.
  *
@@ -35309,31 +35703,110 @@ function showsTemplateAffordance(element, editTemplateMode) {
 }
 
 /**
- * CollaborationService: Angular port of the Vue `useCollaboration` composable.
+ * collaboration-writeback.ts: elected-writer serialization helper for the
+ * Angular collaboration service.
  *
- * Changes from the original:
- *  - Slide sync uses the granular `pptx:slides` Y.Array (structural CRDT) via
- *    the shared `writeSlidesToYDoc` / `readSlidesFromYDoc` / `observeYDocSlides`
- *    helpers, replacing the monolithic JSON blob in 'presentation'.
- *  - Elected-writer write-back: when role === 'owner', changes are debounced
- *    and `config.onWriteBack` receives serialized PPTX bytes for persistence.
+ * When the local user is the session `owner`, the service debounces Y.Doc
+ * changes and calls this to serialize the live document (templates re-merged)
+ * into `.pptx` bytes for `config.onWriteBack`. Kept out of the service so the
+ * service stays within the repo's per-file size budget.
+ */
+const WRITE_BACK_DEBOUNCE_MS = 5_000;
+/**
+ * Serialize the current Y.Doc slide state (with the separated master/layout
+ * template elements merged back) into `.pptx` bytes. `sourceBytes` seeds the
+ * handler so package parts the CRDT does not carry (media, fonts, rels) survive.
+ */
+async function serializeWriteBack(ydoc, sourceBytes, templateElements) {
+    const { PptxHandler } = await import('pptx-viewer-core');
+    const handler = new PptxHandler();
+    await handler.load(sourceBytes.buffer);
+    const slides = buildSaveSlides(readSlidesFromYDoc(ydoc), templateElements);
+    return handler.save(slides);
+}
+/**
+ * Debounced elected-writer write-back. Only the session `owner` with an
+ * `onWriteBack` callback schedules anything; each new change resets the timer,
+ * and on fire it serializes the live Y.Doc and hands the bytes to the host.
+ */
+class WriteBackScheduler {
+    timer = null;
+    schedule(config, ydoc, getSourceBytes, getTemplateElements) {
+        if (!config?.onWriteBack || config.role !== 'owner' || !ydoc) {
+            return;
+        }
+        this.cancel();
+        const ms = config.writeBackDebounceMs ?? WRITE_BACK_DEBOUNCE_MS;
+        this.timer = setTimeout(() => {
+            this.timer = null;
+            const bytes = getSourceBytes?.();
+            if (!bytes || !config.onWriteBack) {
+                return;
+            }
+            void serializeWriteBack(ydoc, bytes, getTemplateElements?.() ?? {})
+                .then((out) => config.onWriteBack?.(out))
+                .catch(() => {
+                /* non-fatal */
+            });
+        }, ms);
+    }
+    cancel() {
+        if (this.timer !== null) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+    }
+}
+
+/**
+ * CollaborationService: Angular real-time collaboration (Yjs) service.
+ *
+ * Owns the provider lifecycle and the reactive collaboration state consumed by
+ * the viewer component:
+ *  - Transport is `y-websocket` (default) or serverless `y-webrtc`
+ *    (`config.transport === 'webrtc'`), created via `./collaboration-providers`.
+ *  - Local edits sync via the granular `reconcileSlidesInYDoc` (only changed
+ *    slides/elements/fields mutate) in a transaction tagged `LOCAL_SYNC_ORIGIN`;
+ *    the remote observer skips its own local-origin writes.
+ *  - Websocket connections fail fast on mixed content and time out to `'error'`
+ *    after `CONNECTION_TIMEOUT_MS`; `retry()` reconnects with the last config.
+ *  - Elected-writer write-back (role === 'owner') via `WriteBackScheduler`.
  *
  * Provide at the component level: `@Component({ providers: [CollaborationService] })`.
  */
 const DEFAULT_CANVAS_BOUND = 100_000;
-const WRITE_BACK_DEBOUNCE_MS = 5_000;
 class CollaborationService {
     // Reactive state
-    connected = signal(false, /* @ts-ignore */
+    status = signal('disconnected', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    connected = computed(() => this.status() === 'connected', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "connected" }] : /* istanbul ignore next */ []));
     active = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Role of the local user in the active session, or undefined when idle. */
+    activeRole = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeRole" }] : /* istanbul ignore next */ []));
     presence = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "presence" }] : /* istanbul ignore next */ []));
     cursors = computed(() => presenceToCursors(this.presence()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cursors" }] : /* istanbul ignore next */ []));
     connectedCount = computed(() => this.presence().length + (this.active() ? 1 : 0), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "connectedCount" }] : /* istanbul ignore next */ []));
+    /** The client id the local user is currently following (null when free). */
+    followedClientId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "followedClientId" }] : /* istanbul ignore next */ []));
+    /** Active-slide index of the followed peer, or null when not following. */
+    followedSlideIndex = computed(() => {
+        const id = this.followedClientId();
+        if (id === null) {
+            return null;
+        }
+        return this.presence().find((p) => p.clientId === id)?.activeSlideIndex ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "followedSlideIndex" }] : /* istanbul ignore next */ []));
+    /** Active-slide index of the first `owner` peer (the broadcaster), or null. */
+    broadcasterSlideIndex = computed(() => this.presence().find((p) => p.role === 'owner')?.activeSlideIndex ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "broadcasterSlideIndex" }] : /* istanbul ignore next */ []));
     // Internal handles
     ydoc = null;
     provider = null;
@@ -35342,18 +35815,18 @@ class CollaborationService {
     applyingRemote = false;
     yFactories = null;
     lastSynced = '';
-    writeBackTimer = null;
+    connectTimer = null;
     unobserveSlides = null;
+    writeBack = new WriteBackScheduler();
     onRemoteSlides = null;
     canvasWidth = DEFAULT_CANVAS_BOUND;
     canvasHeight = DEFAULT_CANVAS_BOUND;
     getSourceBytes = null;
     getTemplateElements = null;
-    userName = 'Anonymous';
-    userColor = DEFAULT_CURSOR_COLOR;
-    userAvatar;
-    role;
     currentConfig = null;
+    lastConfig = null;
+    lastOptions = {};
+    localPresence = null;
     refreshPresence = () => {
         if (!this.awareness) {
             this.presence.set([]);
@@ -35366,10 +35839,19 @@ class CollaborationService {
     }
     async connect(config, options = {}) {
         this.disconnect();
+        this.lastConfig = config;
+        this.lastOptions = options;
         try {
             validateRoomId(config.roomId);
         }
         catch {
+            this.status.set('error');
+            return;
+        }
+        // Fail fast on mixed content (websocket only): an https page cannot open a
+        // ws:// socket, so surface the error rather than hanging until the timeout.
+        if (config.transport !== 'webrtc' && isMixedContentBlocked(config.serverUrl)) {
+            this.status.set('error');
             return;
         }
         this.onRemoteSlides = options.onRemoteSlides ?? null;
@@ -35377,60 +35859,104 @@ class CollaborationService {
         this.canvasHeight = options.canvasHeight ?? DEFAULT_CANVAS_BOUND;
         this.getSourceBytes = options.getSourceBytes ?? null;
         this.getTemplateElements = options.getTemplateElements ?? null;
-        this.userName = config.userName;
-        this.userColor = config.userColor ?? DEFAULT_CURSOR_COLOR;
-        this.userAvatar = config.userAvatar;
-        this.role = config.role;
         this.currentConfig = config;
+        this.activeRole.set(config.role);
+        this.status.set('connecting');
         try {
-            const wsModule = 'y-websocket';
-            const [Y, yws] = await Promise.all([
-                import('yjs'),
-                import(/* @vite-ignore */ wsModule),
-            ]);
-            const doc = new Y.Doc();
-            this.ydoc = doc;
-            this.yFactories = {
-                createMap: () => new Y.Map(),
-                createArray: () => new Y.Array(),
-                createText: () => new Y.Text(),
-            };
-            const wsProvider = new yws.WebsocketProvider(config.serverUrl, config.roomId, doc, config.authToken ? { params: { token: config.authToken } } : undefined);
-            this.provider = wsProvider;
-            this.awareness = wsProvider.awareness;
+            const bundle = config.transport === 'webrtc'
+                ? await createWebrtcBundle(config)
+                : await createWebsocketBundle(config);
+            this.ydoc = bundle.doc;
+            this.yFactories = bundle.factories;
+            this.provider = bundle.provider;
+            this.awareness = bundle.awareness;
             this.selfId = this.awareness.clientID ?? -1;
-            this._publishAwareness();
+            this.localPresence = new LocalPresencePublisher(this.awareness, {
+                userName: config.userName,
+                userColor: config.userColor ?? DEFAULT_CURSOR_COLOR,
+                userAvatar: config.userAvatar,
+                role: config.role,
+            });
+            this.localPresence.publish();
             this.awareness.on('change', this.refreshPresence);
             this.awareness.on('update', this.refreshPresence);
-            wsProvider.on('status', (payload) => {
-                this.connected.set(payload.status === 'connected');
-            });
-            // Observe remote slide changes
-            this.unobserveSlides = observeYDocSlides(doc, () => {
-                if (this.applyingRemote || !this.ydoc) {
-                    return;
-                }
-                const remote = readSlidesFromYDoc(this.ydoc);
-                if (remote.length === 0) {
-                    return;
-                }
-                this.applyingRemote = true;
-                this.onRemoteSlides?.(remote);
-                this.applyingRemote = false;
-                this._scheduleWriteBack();
-            });
+            this.wireStatus(config);
+            this.unobserveSlides = observeYDocSlides(this.ydoc, (_events, transaction) => this.onRemoteChange(transaction));
             this.active.set(true);
             this.refreshPresence();
         }
         catch {
             this.disconnect();
+            this.status.set('error');
         }
     }
-    disconnect() {
-        if (this.writeBackTimer !== null) {
-            clearTimeout(this.writeBackTimer);
-            this.writeBackTimer = null;
+    /** Reconnect using the configuration from the most recent {@link connect}. */
+    async retry() {
+        if (this.lastConfig) {
+            await this.connect(this.lastConfig, this.lastOptions);
+        }
+    }
+    /** Wire the provider status events + (websocket-only) connection timeout. */
+    wireStatus(config) {
+        const provider = this.provider;
+        if (!provider) {
+            return;
         }
+        if (config.transport === 'webrtc') {
+            // P2P: no server round-trip to wait on. Treat "created" as connected,
+            // and reflect explicit disconnect events.
+            this.status.set('connected');
+            provider.on('status', (payload) => {
+                if (payload.connected === false && this.active()) {
+                    this.status.set('disconnected');
+                }
+                else if (payload.connected === true) {
+                    this.status.set('connected');
+                }
+            });
+            return;
+        }
+        provider.on('status', (payload) => {
+            if (payload.status === 'connected') {
+                this.clearConnectTimer();
+                this.status.set('connected');
+            }
+            else if (payload.status === 'disconnected' && this.active()) {
+                this.status.set('disconnected');
+            }
+        });
+        if (provider.wsconnected) {
+            this.status.set('connected');
+            return;
+        }
+        this.connectTimer = setTimeout(() => {
+            this.connectTimer = null;
+            if (this.status() !== 'connected') {
+                this.disconnect();
+                this.status.set('error');
+            }
+        }, CONNECTION_TIMEOUT_MS);
+    }
+    /** Handle a remote Y.Doc change, skipping our own local-origin transactions. */
+    onRemoteChange(transaction) {
+        if (transaction?.origin === LOCAL_SYNC_ORIGIN || this.applyingRemote || !this.ydoc) {
+            return;
+        }
+        const remote = readSlidesFromYDoc(this.ydoc);
+        if (remote.length === 0) {
+            return;
+        }
+        // Suppress the echo: record what we just applied so the subsequent local
+        // broadcast (driven by the editor signal) is a no-op.
+        this.lastSynced = JSON.stringify(remote);
+        this.applyingRemote = true;
+        this.onRemoteSlides?.(remote);
+        this.applyingRemote = false;
+        this.scheduleWriteBack();
+    }
+    disconnect() {
+        this.clearConnectTimer();
+        this.writeBack.cancel();
         this.unobserveSlides?.();
         this.unobserveSlides = null;
         this.awareness?.off?.('change', this.refreshPresence);
@@ -35441,19 +35967,36 @@ class CollaborationService {
         this.provider = null;
         this.ydoc = null;
         this.awareness = null;
+        this.localPresence = null;
         this.selfId = -1;
         this.applyingRemote = false;
         this.yFactories = null;
         this.lastSynced = '';
         this.onRemoteSlides = null;
         this.currentConfig = null;
-        this.connected.set(false);
+        this.status.set('disconnected');
         this.active.set(false);
+        this.activeRole.set(undefined);
         this.presence.set([]);
+        this.followedClientId.set(null);
+    }
+    /**
+     * Broadcast the local slide set to peers, reconciling only what changed into
+     * the pptx:slides Y.Array. An empty deck is never written (so a late-joiner
+     * that has not yet received the doc cannot clobber it), and an unchanged deck
+     * is skipped.
+     */
+    /**
+     * Record the current local deck as the sync baseline so the first (unchanged)
+     * broadcast after connecting is suppressed. Call right after {@link connect}
+     * for a joiner whose local deck is a placeholder awaiting remote sync, so it
+     * never overwrites the shared document before receiving it.
+     */
+    seedBaseline(slides) {
+        this.lastSynced = JSON.stringify(slides);
     }
-    /** Broadcast the local slide set to peers via the pptx:slides Y.Array. */
     broadcastSlides(slides) {
-        if (!this.ydoc || !this.yFactories || this.applyingRemote) {
+        if (!this.ydoc || !this.yFactories || this.applyingRemote || slides.length === 0) {
             return;
         }
         const s = JSON.stringify(slides);
@@ -35461,68 +36004,31 @@ class CollaborationService {
             return;
         }
         this.lastSynced = s;
-        writeSlidesToYDoc([...slides], this.ydoc, this.yFactories);
-        this._scheduleWriteBack();
+        reconcileSlidesInYDoc([...slides], this.ydoc, this.yFactories, LOCAL_SYNC_ORIGIN);
+        this.scheduleWriteBack();
     }
-    setCursor(x, y, activeSlideIndex = 0) {
-        if (!this.awareness) {
-            return;
-        }
-        this.awareness.setLocalStateField('cursor', { x, y });
-        this._publishAwareness(activeSlideIndex, x, y);
+    setCursor(x, y, activeSlideIndex) {
+        this.localPresence?.setCursor(x, y, activeSlideIndex);
     }
-    setSelection(selectedElementId, activeSlideIndex = 0) {
-        if (!this.awareness) {
-            return;
-        }
-        this._publishAwareness(activeSlideIndex, undefined, undefined, selectedElementId);
-    }
-    _publishAwareness(activeSlideIndex = 0, cursorX = 0, cursorY = 0, selectedElementId) {
-        this.awareness?.setLocalStateField('presence', {
-            userName: this.userName,
-            userColor: this.userColor,
-            userAvatar: this.userAvatar,
-            role: this.role,
-            activeSlideIndex,
-            cursorX,
-            cursorY,
-            selectedElementId,
-            lastUpdated: new Date().toISOString(),
-        });
-        this.awareness?.setLocalStateField('user', { name: this.userName, color: this.userColor });
+    setSelection(selectedElementId, activeSlideIndex) {
+        this.localPresence?.setSelection(selectedElementId, activeSlideIndex);
     }
-    _scheduleWriteBack() {
-        const config = this.currentConfig;
-        if (!config?.onWriteBack || config.role !== 'owner' || !this.ydoc) {
-            return;
-        }
-        if (this.writeBackTimer !== null) {
-            clearTimeout(this.writeBackTimer);
+    /** Publish the local active-slide index (drives follow-along). */
+    setActiveSlide(index) {
+        this.localPresence?.setActiveSlide(index);
+    }
+    /** Follow the given peer's active slide, or `null` to stop following. */
+    followUser(clientId) {
+        this.followedClientId.set(clientId);
+    }
+    clearConnectTimer() {
+        if (this.connectTimer !== null) {
+            clearTimeout(this.connectTimer);
+            this.connectTimer = null;
         }
-        const ms = config.writeBackDebounceMs ?? WRITE_BACK_DEBOUNCE_MS;
-        this.writeBackTimer = setTimeout(async () => {
-            this.writeBackTimer = null;
-            if (!this.ydoc || !config.onWriteBack) {
-                return;
-            }
-            const sourceBytes = this.getSourceBytes?.();
-            if (!sourceBytes) {
-                return;
-            }
-            try {
-                const { PptxHandler } = await import('pptx-viewer-core');
-                const handler = new PptxHandler();
-                await handler.load(sourceBytes.buffer);
-                // Merge the editor's separated template (master/layout) elements back
-                // into the broadcast (template-free) slides so template edits persist.
-                const slides = buildSaveSlides(readSlidesFromYDoc(this.ydoc), this.getTemplateElements?.() ?? {});
-                const bytes = await handler.save(slides);
-                config.onWriteBack(bytes);
-            }
-            catch {
-                /* non-fatal */
-            }
-        }, ms);
+    }
+    scheduleWriteBack() {
+        this.writeBack.schedule(this.currentConfig, this.ydoc, this.getSourceBytes, this.getTemplateElements);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CollaborationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CollaborationService });
@@ -36388,6 +36894,16 @@ class EditorStateService {
         this.dirty.set(true);
         this.syncHistory();
     }
+    /**
+     * Apply a remote collaborator's slide set (already template-free, as broadcast
+     * over the CRDT) to the editable deck. Selection, history, and this peer's own
+     * separated template store are left untouched; remote edits are not local undo
+     * steps.
+     */
+    applyRemoteSlides(slides) {
+        this.slides.set(this.clone(slides));
+        this.dirty.set(true);
+    }
     // ── Snapshot (deck + template store) ─────────────────────────────────────
     /** Capture the current deck + template store as one undo/redo snapshot. */
     captureSnapshot() {
@@ -39728,6 +40244,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
+/**
+ * follow-mode-bar.component.ts: Angular port of the Vue `FollowModeBar.vue`.
+ *
+ * Selector: `pptx-follow-mode-bar`
+ *
+ * Lists the active remote peers and lets the local user follow one of them
+ * (mirroring that peer's active slide) or stop following. Purely presentational:
+ * the host supplies the reactive presence list and the currently-followed
+ * clientId (from `CollaborationService`) and reacts to the `follow` event to
+ * drive `followUser(clientId | null)`. Each peer chip shows an initials avatar
+ * in the peer's colour; the followed peer is highlighted with a "Stop" affordance.
+ */
+class FollowModeBarComponent {
+    /** Active remote collaborators (excludes self). */
+    presences = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presences" }] : /* istanbul ignore next */ []));
+    /** The clientId currently being followed, or null. */
+    followedClientId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "followedClientId" }] : /* istanbul ignore next */ []));
+    /** Follow the given peer, or `null` to stop following. */
+    follow = output();
+    chips = computed(() => {
+        const followed = this.followedClientId();
+        return this.presences().map((peer) => ({
+            clientId: peer.clientId,
+            userName: peer.userName,
+            color: peer.userColor,
+            initials: initialsOf(peer.userName),
+            following: peer.clientId === followed,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
+    followedName = computed(() => {
+        const id = this.followedClientId();
+        if (id === null) {
+            return null;
+        }
+        return this.presences().find((p) => p.clientId === id)?.userName ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "followedName" }] : /* istanbul ignore next */ []));
+    toggle(clientId) {
+        this.follow.emit(this.followedClientId() === clientId ? null : clientId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FollowModeBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FollowModeBarComponent, isStandalone: true, selector: "pptx-follow-mode-bar", inputs: { presences: { classPropertyName: "presences", publicName: "presences", isSignal: true, isRequired: false, transformFunction: null }, followedClientId: { classPropertyName: "followedClientId", publicName: "followedClientId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { follow: "follow" }, ngImport: i0, template: `
+		@if (chips().length > 0) {
+			<div class="pptx-ng-follow-bar" data-export-ignore="true">
+				<span class="pptx-ng-follow-status">
+					@if (followedName(); as name) {
+						{{ 'pptx.followMode.following' | translate }}
+						<strong>{{ name }}</strong>
+						<button
+							type="button"
+							class="pptx-ng-follow-stop"
+							[title]="'pptx.followMode.stopFollowing' | translate"
+							(click)="follow.emit(null)"
+						>
+							{{ 'pptx.followMode.stop' | translate }}
+						</button>
+					} @else {
+						{{ 'pptx.followMode.followCollaborator' | translate }}
+					}
+				</span>
+				<ul class="pptx-ng-follow-list">
+					@for (peer of chips(); track peer.clientId) {
+						<li>
+							<button
+								type="button"
+								class="pptx-ng-follow-peer"
+								[class.is-following]="peer.following"
+								[attr.data-client-id]="peer.clientId"
+								[attr.aria-pressed]="peer.following"
+								(click)="toggle(peer.clientId)"
+							>
+								<span class="pptx-ng-follow-avatar" [style.background-color]="peer.color">
+									{{ peer.initials }}
+								</span>
+								<span class="pptx-ng-follow-name">{{ peer.userName }}</span>
+							</button>
+						</li>
+					}
+				</ul>
+			</div>
+		}
+	`, isInline: true, styles: [":host{display:block}.pptx-ng-follow-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;border-radius:.5rem;background:var(--pptx-card, rgba(17, 24, 39, .95));padding:.375rem .625rem;font-size:.75rem;color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-follow-status{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-follow-stop{cursor:pointer;border-radius:.375rem;border:1px solid var(--pptx-border, #374151);background:transparent;padding:.125rem .5rem;font-size:11px;color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-follow-list{display:flex;align-items:center;gap:.375rem;margin:0;padding:0;list-style:none}.pptx-ng-follow-peer{display:inline-flex;cursor:pointer;align-items:center;gap:.375rem;border-radius:9999px;border:1px solid transparent;background:var(--pptx-muted, rgba(55, 65, 81, .6));padding:.125rem .5rem .125rem .125rem;color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-follow-peer.is-following{border-color:var(--pptx-primary, #6366f1);background:color-mix(in srgb,var(--pptx-primary, #6366f1) 30%,transparent)}.pptx-ng-follow-avatar{display:inline-flex;height:22px;width:22px;align-items:center;justify-content:center;border-radius:9999px;font-size:10px;font-weight:600;line-height:1;color:#fff}.pptx-ng-follow-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FollowModeBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-follow-mode-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe], template: `
+		@if (chips().length > 0) {
+			<div class="pptx-ng-follow-bar" data-export-ignore="true">
+				<span class="pptx-ng-follow-status">
+					@if (followedName(); as name) {
+						{{ 'pptx.followMode.following' | translate }}
+						<strong>{{ name }}</strong>
+						<button
+							type="button"
+							class="pptx-ng-follow-stop"
+							[title]="'pptx.followMode.stopFollowing' | translate"
+							(click)="follow.emit(null)"
+						>
+							{{ 'pptx.followMode.stop' | translate }}
+						</button>
+					} @else {
+						{{ 'pptx.followMode.followCollaborator' | translate }}
+					}
+				</span>
+				<ul class="pptx-ng-follow-list">
+					@for (peer of chips(); track peer.clientId) {
+						<li>
+							<button
+								type="button"
+								class="pptx-ng-follow-peer"
+								[class.is-following]="peer.following"
+								[attr.data-client-id]="peer.clientId"
+								[attr.aria-pressed]="peer.following"
+								(click)="toggle(peer.clientId)"
+							>
+								<span class="pptx-ng-follow-avatar" [style.background-color]="peer.color">
+									{{ peer.initials }}
+								</span>
+								<span class="pptx-ng-follow-name">{{ peer.userName }}</span>
+							</button>
+						</li>
+					}
+				</ul>
+			</div>
+		}
+	`, styles: [":host{display:block}.pptx-ng-follow-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;border-radius:.5rem;background:var(--pptx-card, rgba(17, 24, 39, .95));padding:.375rem .625rem;font-size:.75rem;color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-follow-status{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap;color:var(--pptx-muted-foreground, #9ca3af)}.pptx-ng-follow-stop{cursor:pointer;border-radius:.375rem;border:1px solid var(--pptx-border, #374151);background:transparent;padding:.125rem .5rem;font-size:11px;color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-follow-list{display:flex;align-items:center;gap:.375rem;margin:0;padding:0;list-style:none}.pptx-ng-follow-peer{display:inline-flex;cursor:pointer;align-items:center;gap:.375rem;border-radius:9999px;border:1px solid transparent;background:var(--pptx-muted, rgba(55, 65, 81, .6));padding:.125rem .5rem .125rem .125rem;color:var(--pptx-foreground, #f3f4f6)}.pptx-ng-follow-peer.is-following{border-color:var(--pptx-primary, #6366f1);background:color-mix(in srgb,var(--pptx-primary, #6366f1) 30%,transparent)}.pptx-ng-follow-avatar{display:inline-flex;height:22px;width:22px;align-items:center;justify-content:center;border-radius:9999px;font-size:10px;font-weight:600;line-height:1;color:#fff}.pptx-ng-follow-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], propDecorators: { presences: [{ type: i0.Input, args: [{ isSignal: true, alias: "presences", required: false }] }], followedClientId: [{ type: i0.Input, args: [{ isSignal: true, alias: "followedClientId", required: false }] }], follow: [{ type: i0.Output, args: ["follow"] }] } });
+/** First-letter / two-char initials for the avatar chip. */
+function initialsOf(name) {
+    const parts = name.trim().split(/\s+/u);
+    if (parts.length >= 2 && parts[0] && parts[parts.length - 1]) {
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    return name.slice(0, 2).toUpperCase() || '?';
+}
+
 /**
  * hyperlink-dialog.component.ts: Set or clear an element's click hyperlink.
  *
@@ -64622,6 +65277,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 	`, styles: [".pptx-ng-props-form{display:flex;flex-direction:column;gap:.75rem}.pptx-ng-props-field{display:flex;flex-direction:column;gap:.375rem}.pptx-ng-props-label{font-size:.75rem;font-weight:500;color:var(--pptx-foreground, #e5e5e5)}.pptx-ng-props-input{width:100%;padding:.375rem .75rem;border-radius:.375rem;border:1px solid var(--pptx-border, #2a2a2a);background:var(--pptx-background, #111);color:var(--pptx-foreground, #e5e5e5);font-size:.8125rem}.pptx-ng-props-input:focus{outline:none;border-color:var(--pptx-primary, #6366f1);box-shadow:0 0 0 1px var(--pptx-primary, #6366f1)}.pptx-ng-props-meta{display:flex;flex-direction:column;gap:.375rem;padding-top:.5rem;border-top:1px solid var(--pptx-border, #2a2a2a)}.pptx-ng-props-meta-row{display:flex;justify-content:space-between;font-size:.75rem}.pptx-ng-props-meta-label{color:var(--pptx-muted-foreground, #9a9a9a)}.pptx-ng-props-meta-value{color:var(--pptx-foreground, #e5e5e5)}.pptx-ng-props-btn{padding:.375rem .75rem;border:none;border-radius:.375rem;background:var(--pptx-muted, #2a2a2a);color:var(--pptx-foreground, #e5e5e5);font-size:.75rem;cursor:pointer}.pptx-ng-props-btn-primary{background:var(--pptx-primary, #6366f1);color:var(--pptx-primary-foreground, #fff)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: true }] }], save: [{ type: i0.Output, args: ["save"] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
+/**
+ * remote-selection-overlay.component.ts: Angular port of the Vue
+ * `RemoteSelectionOverlay.vue` / React `RemoteSelectionOverlay.tsx`.
+ *
+ * Selector: `pptx-remote-selection-overlay`
+ *
+ * Draws a coloured rectangle around each element a remote collaborator has
+ * selected, labelled with that peer's name in their colour (Google-Slides-style
+ * presence). Purely presentational: the host supplies the reactive presence
+ * list (from `CollaborationService.presence`), the elements on the active slide,
+ * the active slide index, and the current `zoom`. Only peers whose
+ * `activeSlideIndex` matches are drawn, and only for a selected id that resolves
+ * to an element on the slide.
+ *
+ * Element geometry is in unscaled slide coordinates (px); this component
+ * multiplies by `zoom` so it can mount inside the scaled slide stage. It sets
+ * `pointer-events: none` so it never intercepts canvas input.
+ */
+class RemoteSelectionOverlayComponent {
+    /** Remote collaborators' presence (cursor + selection + active slide). */
+    presences = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presences" }] : /* istanbul ignore next */ []));
+    /** Elements on the active slide (used to resolve selected ids -> geometry). */
+    elements = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
+    /** The current slide index: only peers on this slide are drawn. */
+    activeSlideIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeSlideIndex" }] : /* istanbul ignore next */ []));
+    /** Current canvas zoom factor; geometry scales by this. */
+    zoom = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    elementMap = computed(() => {
+        const map = new Map();
+        for (const el of this.elements()) {
+            map.set(el.id, el);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elementMap" }] : /* istanbul ignore next */ []));
+    boxes = computed(() => {
+        const slide = this.activeSlideIndex();
+        const z = this.zoom();
+        const lookup = this.elementMap();
+        const result = [];
+        for (const peer of this.presences()) {
+            if (peer.activeSlideIndex !== slide || !peer.selectedElementId) {
+                continue;
+            }
+            const el = lookup.get(peer.selectedElementId);
+            if (!el) {
+                continue;
+            }
+            result.push({
+                key: `${peer.clientId}-${peer.selectedElementId}`,
+                label: formatCursorLabel(peer.userName, MAX_LABEL_CHARS),
+                color: peer.userColor,
+                transform: `translate(${el.x * z}px, ${el.y * z}px)`,
+                width: el.width * z,
+                height: el.height * z,
+            });
+        }
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RemoteSelectionOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RemoteSelectionOverlayComponent, isStandalone: true, selector: "pptx-remote-selection-overlay", inputs: { presences: { classPropertyName: "presences", publicName: "presences", isSignal: true, isRequired: false, transformFunction: null }, elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: false, transformFunction: null }, activeSlideIndex: { classPropertyName: "activeSlideIndex", publicName: "activeSlideIndex", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<div aria-hidden="true" data-export-ignore="true">
+			@for (box of boxes(); track box.key) {
+				<div
+					class="pptx-ng-remote-selection"
+					[attr.data-element-id]="box.key"
+					[style.transform]="box.transform"
+					[style.width.px]="box.width"
+					[style.height.px]="box.height"
+					[style.color]="box.color"
+				>
+					<span class="pptx-ng-remote-selection-label" [style.background-color]="box.color">
+						{{ box.label }}
+					</span>
+				</div>
+			}
+		</div>
+	`, isInline: true, styles: [":host{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:9997}.pptx-ng-remote-selection{position:absolute;top:0;left:0;box-sizing:border-box;border:2px solid currentcolor;border-radius:2px;pointer-events:none;will-change:transform;transition:transform 90ms linear}.pptx-ng-remote-selection-label{position:absolute;top:-18px;left:-2px;max-width:150px;padding:1px 5px;border-radius:3px;color:#fff;font-family:system-ui,sans-serif;font-size:9px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RemoteSelectionOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-remote-selection-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		<div aria-hidden="true" data-export-ignore="true">
+			@for (box of boxes(); track box.key) {
+				<div
+					class="pptx-ng-remote-selection"
+					[attr.data-element-id]="box.key"
+					[style.transform]="box.transform"
+					[style.width.px]="box.width"
+					[style.height.px]="box.height"
+					[style.color]="box.color"
+				>
+					<span class="pptx-ng-remote-selection-label" [style.background-color]="box.color">
+						{{ box.label }}
+					</span>
+				</div>
+			}
+		</div>
+	`, styles: [":host{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:9997}.pptx-ng-remote-selection{position:absolute;top:0;left:0;box-sizing:border-box;border:2px solid currentcolor;border-radius:2px;pointer-events:none;will-change:transform;transition:transform 90ms linear}.pptx-ng-remote-selection-label{position:absolute;top:-18px;left:-2px;max-width:150px;padding:1px 5px;border-radius:3px;color:#fff;font-family:system-ui,sans-serif;font-size:9px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { presences: [{ type: i0.Input, args: [{ isSignal: true, alias: "presences", required: false }] }], elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: false }] }], activeSlideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSlideIndex", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }] } });
+
 /**
  * ribbon-animations-section.component.ts: the Animations ribbon tab (preview, the
  * Add Animation entrance/emphasis/exit gallery, Remove Animation, Animation
@@ -66140,7 +66901,7 @@ class RibbonFontControlsComponent {
         patchTextStyle(this.editor, this.slideIndex(), this.selectedElement(), patch);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonFontControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RibbonFontControlsComponent, isStandalone: true, selector: "pptx-ribbon-font-controls", inputs: { slideIndex: { classPropertyName: "slideIndex", publicName: "slideIndex", isSignal: true, isRequired: false, transformFunction: null }, selectedElement: { classPropertyName: "selectedElement", publicName: "selectedElement", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RibbonFontControlsComponent, isStandalone: true, selector: "pptx-ribbon-font-controls", inputs: { slideIndex: { classPropertyName: "slideIndex", publicName: "slideIndex", isSignal: true, isRequired: false, transformFunction: null }, selectedElement: { classPropertyName: "selectedElement", publicName: "selectedElement", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
 		<div class="flex items-center gap-1">
 			<select
 				class="pptx-rb-select w-28"
@@ -66274,6 +67035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: 'pptx-ribbon-font-controls',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'contents' },
                     imports: [NgClass, TranslatePipe, RibbonColorPopoverComponent],
                     template: `
 		<div class="flex items-center gap-1">
@@ -66747,10 +67509,12 @@ class RibbonHomeSectionComponent {
 		<span class="pptx-rb-sep"></span>
 		<!-- Paragraph -->
 		<div class="flex flex-col items-center gap-0.5">
-			<pptx-ribbon-paragraph-controls
-				[slideIndex]="slideIndex()"
-				[selectedElement]="selectedElement()"
-			/>
+			<div class="flex items-center gap-1">
+				<pptx-ribbon-paragraph-controls
+					[slideIndex]="slideIndex()"
+					[selectedElement]="selectedElement()"
+				/>
+			</div>
 			<span class="text-[9px] leading-none text-muted-foreground">
 				{{ 'pptx.ribbon.paragraph' | translate }}
 			</span>
@@ -66853,10 +67617,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 		<span class="pptx-rb-sep"></span>
 		<!-- Paragraph -->
 		<div class="flex flex-col items-center gap-0.5">
-			<pptx-ribbon-paragraph-controls
-				[slideIndex]="slideIndex()"
-				[selectedElement]="selectedElement()"
-			/>
+			<div class="flex items-center gap-1">
+				<pptx-ribbon-paragraph-controls
+					[slideIndex]="slideIndex()"
+					[selectedElement]="selectedElement()"
+				/>
+			</div>
 			<span class="text-[9px] leading-none text-muted-foreground">
 				{{ 'pptx.ribbon.paragraph' | translate }}
 			</span>
@@ -67023,7 +67789,7 @@ class RibbonInsertFieldsComponent {
         return this.previewDate().toLocaleString();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RibbonInsertFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RibbonInsertFieldsComponent, isStandalone: true, selector: "pptx-ribbon-insert-fields", inputs: { slideIndex: { classPropertyName: "slideIndex", publicName: "slideIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RibbonInsertFieldsComponent, isStandalone: true, selector: "pptx-ribbon-insert-fields", inputs: { slideIndex: { classPropertyName: "slideIndex", publicName: "slideIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
 		<!-- Action Buttons dropdown (hover-reveal, mirrors React/Vue) -->
 		<div class="group relative">
 			<button
@@ -67182,6 +67948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: 'pptx-ribbon-insert-fields',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'contents' },
                     imports: [TranslatePipe],
                     template: `
 		<!-- Action Buttons dropdown (hover-reveal, mirrors React/Vue) -->
@@ -69652,24 +70419,29 @@ function seedShareFields(defaults) {
         serverUrl: defaults?.serverUrl ?? '',
     };
 }
-/** Whether all three required fields are non-blank (after trimming). */
+/**
+ * Whether the required fields are non-blank (after trimming). The server URL is
+ * optional: a blank server selects the serverless (webrtc) peer-to-peer
+ * transport, so only the room id and display name are required.
+ */
 function canStartShare(fields) {
-    return (fields.roomId.trim().length > 0 &&
-        fields.userName.trim().length > 0 &&
-        fields.serverUrl.trim().length > 0);
+    return fields.roomId.trim().length > 0 && fields.userName.trim().length > 0;
 }
 /**
  * Assemble a {@link CollaborationConfig} from the (trimmed) form fields, or
- * `null` when the form is incomplete.
+ * `null` when the form is incomplete. A blank server URL yields
+ * `transport: 'webrtc'`; otherwise the default websocket transport is used.
  */
 function buildCollaborationConfig(fields) {
     if (!canStartShare(fields)) {
         return null;
     }
+    const serverUrl = fields.serverUrl.trim();
     return {
         roomId: fields.roomId.trim(),
         userName: fields.userName.trim(),
-        serverUrl: fields.serverUrl.trim(),
+        serverUrl,
+        transport: resolveTransportForServerUrl(serverUrl),
     };
 }
 /**
@@ -69681,7 +70453,11 @@ function buildShareUrl(roomId, serverUrl, location) {
         return roomId;
     }
     const room = encodeURIComponent(roomId);
-    const server = encodeURIComponent(serverUrl);
+    const trimmed = serverUrl.trim();
+    if (trimmed.length === 0) {
+        return `${location.origin}${location.pathname}?room=${room}&transport=webrtc`;
+    }
+    const server = encodeURIComponent(trimmed);
     return `${location.origin}${location.pathname}?room=${room}&server=${server}`;
 }
 
@@ -69717,6 +70493,9 @@ class ShareDialogComponent {
     /** Shareable join link surfaced while the session is active. */
     shareUrl = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shareUrl" }] : /* istanbul ignore next */ []));
+    /** Whether the active session is peer-to-peer (serverless webrtc). */
+    p2p = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "p2p" }] : /* istanbul ignore next */ []));
     /** Fired with the assembled config when the user starts sharing. */
     start = output();
     /** Fired when the user stops an active session. */
@@ -69737,6 +70516,9 @@ class ShareDialogComponent {
         serverUrl: this.serverUrl(),
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canStart" }] : /* istanbul ignore next */ []));
+    /** Blank server URL selects the serverless peer-to-peer (webrtc) transport. */
+    isP2p = computed(() => this.serverUrl().trim().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isP2p" }] : /* istanbul ignore next */ []));
     canCopy = computed(() => canUseClipboard(typeof navigator !== 'undefined' ? navigator : undefined), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canCopy" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -69783,7 +70565,7 @@ class ShareDialogComponent {
         this.stop.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShareDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ShareDialogComponent, isStandalone: true, selector: "pptx-share-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaults: { classPropertyName: "defaults", publicName: "defaults", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, connected: { classPropertyName: "connected", publicName: "connected", isSignal: true, isRequired: false, transformFunction: null }, userCount: { classPropertyName: "userCount", publicName: "userCount", isSignal: true, isRequired: false, transformFunction: null }, shareUrl: { classPropertyName: "shareUrl", publicName: "shareUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { start: "start", stop: "stop", close: "close" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ShareDialogComponent, isStandalone: true, selector: "pptx-share-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaults: { classPropertyName: "defaults", publicName: "defaults", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, connected: { classPropertyName: "connected", publicName: "connected", isSignal: true, isRequired: false, transformFunction: null }, userCount: { classPropertyName: "userCount", publicName: "userCount", isSignal: true, isRequired: false, transformFunction: null }, shareUrl: { classPropertyName: "shareUrl", publicName: "shareUrl", isSignal: true, isRequired: false, transformFunction: null }, p2p: { classPropertyName: "p2p", publicName: "p2p", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { start: "start", stop: "stop", close: "close" }, ngImport: i0, template: `
 		<pptx-modal-dialog
 			[open]="open()"
 			[title]="(active() ? 'pptx.share.activeTitle' : 'pptx.toolbar.share') | translate"
@@ -69810,6 +70592,14 @@ class ShareDialogComponent {
 						</span>
 					</div>
 
+					@if (p2p()) {
+						<div class="pptx-ng-share-status-row">
+							<span class="pptx-ng-share-count" style="margin-left: 0">
+								{{ 'pptx.share.p2pServerValue' | translate }}
+							</span>
+						</div>
+					}
+
 					@if (shareUrl()) {
 						<div class="pptx-ng-share-field">
 							<label class="pptx-ng-share-label">{{
@@ -69886,6 +70676,9 @@ class ShareDialogComponent {
 							[value]="serverUrl()"
 							(input)="serverUrl.set(asValue($event))"
 						/>
+						@if (isP2p()) {
+							<p class="pptx-ng-share-hint">{{ 'pptx.share.p2pHint' | translate }}</p>
+						}
 					</div>
 				</div>
 			}
@@ -69937,6 +70730,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						</span>
 					</div>
 
+					@if (p2p()) {
+						<div class="pptx-ng-share-status-row">
+							<span class="pptx-ng-share-count" style="margin-left: 0">
+								{{ 'pptx.share.p2pServerValue' | translate }}
+							</span>
+						</div>
+					}
+
 					@if (shareUrl()) {
 						<div class="pptx-ng-share-field">
 							<label class="pptx-ng-share-label">{{
@@ -70013,6 +70814,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 							[value]="serverUrl()"
 							(input)="serverUrl.set(asValue($event))"
 						/>
+						@if (isP2p()) {
+							<p class="pptx-ng-share-hint">{{ 'pptx.share.p2pHint' | translate }}</p>
+						}
 					</div>
 				</div>
 			}
@@ -70034,7 +70838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			</div>
 		</pptx-modal-dialog>
 	`, styles: [".pptx-ng-share-form,.pptx-ng-share-active{display:flex;flex-direction:column;gap:1rem}.pptx-ng-share-desc{margin:0;font-size:.8125rem;color:var(--pptx-muted-foreground, #9a9a9a)}.pptx-ng-share-field{display:flex;flex-direction:column;gap:.375rem}.pptx-ng-share-label{font-size:.75rem;font-weight:500;color:var(--pptx-foreground, #e5e5e5)}.pptx-ng-share-input{width:100%;padding:.375rem .75rem;border-radius:.375rem;border:1px solid var(--pptx-border, #2a2a2a);background:var(--pptx-background, #111);color:var(--pptx-foreground, #e5e5e5);font-size:.8125rem}.pptx-ng-share-input:focus{outline:none;border-color:var(--pptx-primary, #6366f1);box-shadow:0 0 0 1px var(--pptx-primary, #6366f1)}.pptx-ng-share-btn{padding:.375rem .75rem;border:none;border-radius:.375rem;background:var(--pptx-muted, #2a2a2a);color:var(--pptx-foreground, #e5e5e5);font-size:.75rem;cursor:pointer}.pptx-ng-share-btn-primary{background:var(--pptx-primary, #6366f1);color:var(--pptx-primary-foreground, #fff)}.pptx-ng-share-btn-primary:disabled{opacity:.4;cursor:not-allowed}.pptx-ng-share-stop{width:100%;padding:.5rem .75rem;border:1px solid rgba(239,68,68,.3);border-radius:.375rem;background:#ef44441a;color:#f87171;font-size:.75rem;font-weight:500;cursor:pointer}.pptx-ng-share-stop:hover{background:#ef444433}.pptx-ng-share-status-row{display:flex;align-items:center;gap:.5rem;font-size:.8125rem}.pptx-ng-share-status-dot{width:.5rem;height:.5rem;border-radius:9999px;background:var(--pptx-muted-foreground, #9a9a9a)}.pptx-ng-share-status-dot.is-on{background:#22c55e}.pptx-ng-share-status-text{font-weight:500;color:var(--pptx-foreground, #e5e5e5)}.pptx-ng-share-count{margin-left:auto;color:var(--pptx-muted-foreground, #9a9a9a)}.pptx-ng-share-link-row{display:flex;align-items:center;gap:.5rem}.pptx-ng-share-hint{margin:0;font-size:.6875rem;color:var(--pptx-muted-foreground, #9a9a9a)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaults", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], connected: [{ type: i0.Input, args: [{ isSignal: true, alias: "connected", required: false }] }], userCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "userCount", required: false }] }], shareUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareUrl", required: false }] }], start: [{ type: i0.Output, args: ["start"] }], stop: [{ type: i0.Output, args: ["stop"] }], close: [{ type: i0.Output, args: ["close"] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaults", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], connected: [{ type: i0.Input, args: [{ isSignal: true, alias: "connected", required: false }] }], userCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "userCount", required: false }] }], shareUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareUrl", required: false }] }], p2p: [{ type: i0.Input, args: [{ isSignal: true, alias: "p2p", required: false }] }], start: [{ type: i0.Output, args: ["start"] }], stop: [{ type: i0.Output, args: ["stop"] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
 /**
  * signatures-helpers.ts: Pure functions for digital-signature status
@@ -71556,6 +72360,34 @@ class ViewerCollaborationSessionService {
             : '';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "broadcastViewerUrl" }] : /* istanbul ignore next */ []));
+    /** Whether the active session is serverless (peer-to-peer / webrtc). */
+    activeSessionP2p = computed(() => (this.activeSession()?.serverUrl ?? '').trim().length === 0 && this.collab.active(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeSessionP2p" }] : /* istanbul ignore next */ []));
+    /**
+     * Assemble the {@link ConnectOptions} shared by every connect call site: apply
+     * remote slides to the editor, size the presence bounds to the canvas, and
+     * expose the source bytes + separated template elements for write-back.
+     */
+    connectOptions() {
+        const host = this.requireHost();
+        const size = host.canvasSize();
+        return {
+            onRemoteSlides: (slides) => host.applyRemoteSlides(slides),
+            canvasWidth: size.width,
+            canvasHeight: size.height,
+            getSourceBytes: () => host.getSourceBytes(),
+            getTemplateElements: () => host.getTemplateElements(),
+        };
+    }
+    /**
+     * Connect and immediately seed the sync baseline with the current deck, so a
+     * joiner whose deck is still a placeholder never broadcasts (and overwrites)
+     * the shared document before the first remote sync arrives.
+     */
+    connectWithBaseline(config) {
+        void this.collab.connect(config, this.connectOptions());
+        this.collab.seedBaseline(this.requireHost().currentSlides());
+    }
     /**
      * Seed values for the Share dialog: the host-supplied `shareDefaults`, with
      * `userName` falling back to `authorName` (then "You") so the local user's
@@ -71577,9 +72409,7 @@ class ViewerCollaborationSessionService {
     syncHostConfig(config) {
         if (config) {
             this.activeSession.set({ roomId: config.roomId, serverUrl: config.serverUrl });
-            void this.collab.connect(config, {
-                getTemplateElements: () => this.requireHost().getTemplateElements(),
-            });
+            this.connectWithBaseline(config);
         }
         else {
             this.collab.disconnect();
@@ -71599,9 +72429,7 @@ class ViewerCollaborationSessionService {
             roomId: collaboratorConfig.roomId,
             serverUrl: collaboratorConfig.serverUrl,
         });
-        void this.collab.connect(collaboratorConfig, {
-            getTemplateElements: () => host.getTemplateElements(),
-        });
+        this.connectWithBaseline(collaboratorConfig);
         host.emitStart(collaboratorConfig);
     }
     onShareStop() {
@@ -71615,13 +72443,12 @@ class ViewerCollaborationSessionService {
         const collabConfig = {
             roomId: config.roomId,
             serverUrl: config.serverUrl,
+            transport: config.transport,
             userName: host.authorName() ?? 'Presenter',
             role: 'owner',
         };
         this.activeSession.set({ roomId: config.roomId, serverUrl: config.serverUrl });
-        void this.collab.connect(collabConfig, {
-            getTemplateElements: () => host.getTemplateElements(),
-        });
+        this.connectWithBaseline(collabConfig);
         host.emitStart(collabConfig);
     }
     onBroadcastStop() {
@@ -76027,6 +76854,14 @@ class PowerPointViewerComponent {
     ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
     zoomPercent = computed(() => Math.round(this.zoom() * 100), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zoomPercent" }] : /* istanbul ignore next */ []));
+    /**
+     * Remote cursors filtered to the slide the local user is viewing, so peers'
+     * cursors only appear on the shared slide (mirrors React/Vue).
+     */
+    collabCursors = computed(() => presenceToCursors(this.collab.presence(), this.activeSlideIndex()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collabCursors" }] : /* istanbul ignore next */ []));
+    /** Timestamp of the last cursor broadcast (throttle gate). */
+    lastCursorBroadcast = 0;
     /** Fullscreen presentation-mode overlay visibility. */
     presenting = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "presenting" }] : /* istanbul ignore next */ []));
@@ -76291,6 +77126,47 @@ class PowerPointViewerComponent {
         effect(() => {
             this.session.syncHostConfig(this.collaboration());
         });
+        // Push local slide edits into the shared Y.Doc (reconcile-based; the
+        // service guards against echoing remote-applied changes and against
+        // clobbering with an empty deck). A broadcast `viewer` never writes, so a
+        // follow-along joiner cannot overwrite the presenter's deck.
+        effect(() => {
+            const slides = this.editor.slides();
+            if (this.collab.active() && this.collab.activeRole() !== 'viewer') {
+                this.collab.broadcastSlides(slides);
+            }
+        });
+        // Publish the local selection so peers can draw remote selection boxes.
+        effect(() => {
+            const ids = this.editor.selectedIds();
+            if (this.collab.active()) {
+                this.collab.setSelection(ids[0], this.activeSlideIndex());
+            }
+        });
+        // Publish the local active slide so followers navigate with us.
+        effect(() => {
+            const index = this.activeSlideIndex();
+            if (this.collab.active()) {
+                this.collab.setActiveSlide(index);
+            }
+        });
+        // Follow mode: mirror the followed peer's active slide.
+        effect(() => {
+            const target = this.collab.followedSlideIndex();
+            if (target !== null) {
+                this.goTo(target);
+            }
+        });
+        // Broadcast auto-follow: a `viewer` tracks the broadcaster (owner) peer.
+        effect(() => {
+            if (this.collab.activeRole() !== 'viewer') {
+                return;
+            }
+            const target = this.collab.broadcasterSlideIndex();
+            if (target !== null) {
+                this.goTo(target);
+            }
+        });
         // Hand the export/print orchestrator the live navigation signal + deck
         // accessors + stage resolver so it can flip the stage and capture slides.
         this.xport.bind({
@@ -76312,6 +77188,10 @@ class PowerPointViewerComponent {
             authorName: () => this.authorName(),
             shareDefaults: () => this.shareDefaults(),
             getTemplateElements: () => this.editor.templateElementsBySlideId(),
+            applyRemoteSlides: (slides) => this.editor.applyRemoteSlides(slides),
+            canvasSize: () => this.loader.canvasSize(),
+            getSourceBytes: () => this.currentSourceBytes(),
+            currentSlides: () => this.editor.slides(),
             emitStart: (config) => this.startCollaboration.emit(config),
             emitStop: () => this.stopCollaboration.emit(),
         });
@@ -76367,6 +77247,40 @@ class PowerPointViewerComponent {
     goNext() {
         this.goTo(this.activeSlideIndex() + 1);
     }
+    /**
+     * Publish the local cursor while the pointer moves over the canvas. Throttled
+     * to {@link BROADCAST_THROTTLE_MS}; coordinates are mapped from client space
+     * into unscaled slide space (dividing by zoom, matching the cursor overlay)
+     * and clamped to the canvas bounds.
+     */
+    onCollabPointerMove(event) {
+        if (!this.collab.active()) {
+            return;
+        }
+        const now = Date.now();
+        if (now - this.lastCursorBroadcast < BROADCAST_THROTTLE_MS) {
+            return;
+        }
+        this.lastCursorBroadcast = now;
+        const host = this.mainEl()?.nativeElement;
+        if (!host) {
+            return;
+        }
+        const rect = host.getBoundingClientRect();
+        const zoom = this.zoom() || 1;
+        const size = this.loader.canvasSize();
+        const x = clampCursorPosition((event.clientX - rect.left) / zoom, 0, size.width);
+        const y = clampCursorPosition((event.clientY - rect.top) / zoom, 0, size.height);
+        this.collab.setCursor(x, y, this.activeSlideIndex());
+    }
+    /** The loaded source `.pptx` bytes (for elected-writer write-back), if any. */
+    currentSourceBytes() {
+        const content = this.contentOverride() ?? this.content();
+        if (!content) {
+            return null;
+        }
+        return content instanceof Uint8Array ? content : new Uint8Array(content);
+    }
     // ── Theme gallery (Design tab) ─────────────────────────────────────────────
     /**
      * Apply a built-in theme preset to the whole deck.
@@ -77004,7 +77918,7 @@ class PowerPointViewerComponent {
 						</nav>
 					}
 
-					<main class="pptx-ng-main" #mainEl>
+					<main class="pptx-ng-main" #mainEl (pointermove)="onCollabPointerMove($event)">
 						<pptx-slide-canvas
 							[slide]="activeSlide()"
 							[canvasSize]="loader.canvasSize()"
@@ -77042,7 +77956,22 @@ class PowerPointViewerComponent {
 							(tableChange)="onTableChange($event)"
 						/>
 						@if (collab.connected()) {
-							<pptx-collaboration-cursors [cursors]="collab.cursors()" [zoom]="zoom()" />
+							<pptx-collaboration-cursors [cursors]="collabCursors()" [zoom]="zoom()" />
+							<pptx-remote-selection-overlay
+								[presences]="collab.presence()"
+								[elements]="activeSlide()?.elements ?? []"
+								[activeSlideIndex]="activeSlideIndex()"
+								[zoom]="zoom()"
+							/>
+						}
+						@if (collab.active() && collab.presence().length > 0) {
+							<div class="pptx-ng-collab-follow">
+								<pptx-follow-mode-bar
+									[presences]="collab.presence()"
+									[followedClientId]="collab.followedClientId()"
+									(follow)="collab.followUser($event)"
+								/>
+							</div>
 						}
 						@if (showNotes() && !mobile.isMobile()) {
 							<aside class="pptx-ng-notes" [attr.aria-label]="'pptx.notes.speakerNotes' | translate">
@@ -77308,6 +78237,7 @@ class PowerPointViewerComponent {
 				[connected]="collab.connected()"
 				[userCount]="collab.connectedCount()"
 				[shareUrl]="session.shareUrl()"
+				[p2p]="session.activeSessionP2p()"
 				[defaults]="session.shareDialogDefaults()"
 				(start)="session.onShareStart($event)"
 				(stop)="session.onShareStop()"
@@ -77320,6 +78250,7 @@ class PowerPointViewerComponent {
 				[connected]="collab.connected()"
 				[viewerCount]="collab.presence().length"
 				[viewerUrl]="session.broadcastViewerUrl()"
+				[p2p]="session.activeSessionP2p()"
 				[defaults]="{ serverUrl: shareDefaults()?.serverUrl }"
 				(start)="session.onBroadcastStart($event)"
 				(stop)="session.onBroadcastStop()"
@@ -77427,7 +78358,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: 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"], outputs: ["start", "stop", "close"] }, { kind: "component", type: BroadcastDialogComponent, selector: "pptx-broadcast-dialog", inputs: ["open", "defaults", "active", "connected", "viewerCount", "viewerUrl"], 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", "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PowerPointViewerComponent, decorators: [{
             type: Component,
@@ -77477,6 +78408,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         SignaturesPanelComponent,
                         AccessibilityPanelComponent,
                         CollaborationCursorsComponent,
+                        RemoteSelectionOverlayComponent,
+                        FollowModeBarComponent,
                         PropertiesDialogComponent,
                         HyperlinkDialogComponent,
                         PrintDialogComponent,
@@ -77621,7 +78554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						</nav>
 					}
 
-					<main class="pptx-ng-main" #mainEl>
+					<main class="pptx-ng-main" #mainEl (pointermove)="onCollabPointerMove($event)">
 						<pptx-slide-canvas
 							[slide]="activeSlide()"
 							[canvasSize]="loader.canvasSize()"
@@ -77659,7 +78592,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 							(tableChange)="onTableChange($event)"
 						/>
 						@if (collab.connected()) {
-							<pptx-collaboration-cursors [cursors]="collab.cursors()" [zoom]="zoom()" />
+							<pptx-collaboration-cursors [cursors]="collabCursors()" [zoom]="zoom()" />
+							<pptx-remote-selection-overlay
+								[presences]="collab.presence()"
+								[elements]="activeSlide()?.elements ?? []"
+								[activeSlideIndex]="activeSlideIndex()"
+								[zoom]="zoom()"
+							/>
+						}
+						@if (collab.active() && collab.presence().length > 0) {
+							<div class="pptx-ng-collab-follow">
+								<pptx-follow-mode-bar
+									[presences]="collab.presence()"
+									[followedClientId]="collab.followedClientId()"
+									(follow)="collab.followUser($event)"
+								/>
+							</div>
 						}
 						@if (showNotes() && !mobile.isMobile()) {
 							<aside class="pptx-ng-notes" [attr.aria-label]="'pptx.notes.speakerNotes' | translate">
@@ -77925,6 +78873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[connected]="collab.connected()"
 				[userCount]="collab.connectedCount()"
 				[shareUrl]="session.shareUrl()"
+				[p2p]="session.activeSessionP2p()"
 				[defaults]="session.shareDialogDefaults()"
 				(start)="session.onShareStart($event)"
 				(stop)="session.onShareStop()"
@@ -77937,6 +78886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				[connected]="collab.connected()"
 				[viewerCount]="collab.presence().length"
 				[viewerUrl]="session.broadcastViewerUrl()"
+				[p2p]="session.activeSessionP2p()"
 				[defaults]="{ serverUrl: shareDefaults()?.serverUrl }"
 				(start)="session.onBroadcastStart($event)"
 				(stop)="session.onBroadcastStop()"
@@ -78473,6 +79423,9 @@ const translationsEn = {
     'pptx.autosave.justNow': 'just now',
     'pptx.autosave.oneMinAgo': '1 min ago',
     'pptx.autosave.minutesAgo': '{{count}} min ago',
+    'pptx.autosave.saveFailed': 'Save failed',
+    'pptx.autosave.savedShort': 'Saved',
+    'pptx.autosave.allChangesSaved': 'All changes saved',
     // Toolbar
     'pptx.toolbar.toggleSlidesPanel': 'Toggle slides panel',
     'pptx.toolbar.undo': 'Undo',
@@ -78591,7 +79544,17 @@ const translationsEn = {
     'pptx.collaboration.youLabel': '{{name}} (you)',
     'pptx.collaboration.usersConnected': '{{count}} user(s) connected',
     'pptx.collaboration.moreUsers': '{{count}} more user(s)',
+    'pptx.collaboration.onePersonHere': '1 person here',
+    'pptx.collaboration.peopleHere': '{{count}} people here',
     'pptx.collaboration.retry': 'Retry',
+    'pptx.collaboration.retryConnection': 'Retry connection',
+    // Follow mode
+    'pptx.followMode.following': 'Following',
+    'pptx.followMode.stop': 'Stop',
+    'pptx.followMode.stopFollowing': 'Stop following',
+    'pptx.followMode.followCollaborator': 'Follow a collaborator',
+    'pptx.followMode.followUser': 'Follow {{name}}',
+    'pptx.followMode.stopFollowingUser': 'Stop following {{name}}',
     // Share dialog
     'pptx.share.title': 'Share Presentation',
     'pptx.share.collaborationActive': 'Collaboration Active',