pptx-angular-viewer 1.1.62 → 1.1.64

package/fesm2022/pptx-angular-viewer.mjs

@@ -21862,7 +21862,7 @@ function connectorBendFraction(element) {
  * for straight connectors (which render as a `<line>`). Endpoints are already
  * flip-adjusted by the caller.
  *
- * Viewer-first approximation (full A* routing is a TODO, see PORTING.md):
+ * Viewer-first approximation (full A* routing is a TODO):
  *  - **bent**: orthogonal elbow polyline. `bentConnector2` is a single L-bend;
  *    `bentConnector3..5` route through a vertical mid-axis at `bend`.
  *  - **curved**: `curvedConnector2` is a quadratic Bezier; `curvedConnector3..5`
@@ -34589,10 +34589,9 @@ function segmentFrameCount(durationMs, fps) {
  *   - loader:    load-pipeline helpers (media/image collection, guides).
  *   - types:     CanvasSize, CollaborationConfig, CollaborationRole.
  *   - constants: scalar viewer defaults (canvas size, fallback colours).
- *
- * Roadmap (see packages/angular/PORTING.md and packages/vue/PORTING.md):
- *   color resolution, geometry/clip-paths, connector routing, animation
- *   timeline engine, table-merge math, morph matching, export data helpers.
+ *   - render:    the bulk of the shared logic (colour/geometry/connector/
+ *                animation/table/chart/text/effects/collaboration/i18n).
+ *   - export:    export data helpers.
  */
 
 /**
@@ -39467,10 +39466,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Provide it at the component level so its lifetime tracks the host viewer:
  * `@Component({ providers: [LoadContentService] })`.
  *
- * This is the viewer-first subset; the React hook also populated ~25 extra
- * pieces of presentation metadata (sections, custom shows, embedded fonts,
- * digital signatures, …). Those are tracked in PORTING.md and added here as
- * the corresponding features are ported.
+ * Originally the viewer-first subset of the React hook; the extra pieces of
+ * presentation metadata (sections, custom shows, embedded fonts, digital
+ * signatures, …) were added alongside the corresponding features.
  */
 class LoadContentService {
     /** Parsed slides (with image Blob URLs patched in). */
@@ -40881,7 +40879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * building the SmartArt element payload from a chosen preset, hierarchy
  * parenting) is delegated to the pure functions below so they can be unit-tested
  * in plain vitest (the Angular package's vitest setup has no Angular compiler,
- * so component / TestBed tests are not available - see PORTING.md).
+ * so component / TestBed tests are not available).
  *
  * The preset catalogue itself is the framework-agnostic, vendored
  * `pptx-viewer-shared` source of truth (`render/smart-art-presets`), consumed
@@ -41495,15 +41493,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 	`, styles: [".pptx-sa-insert{display:flex;gap:0;min-width:min(86vw,560px)}.pptx-sa-insert__sidebar{display:flex;flex-direction:column;width:9rem;flex-shrink:0;border-right:1px solid var(--pptx-border, #e5e7eb);padding:.25rem 0}.pptx-sa-insert__cat{text-align:left;padding:.35rem .75rem;font-size:12px;background:transparent;border:none;color:inherit;cursor:pointer}.pptx-sa-insert__cat:hover{background:var(--pptx-accent, #f1f5f9)}.pptx-sa-insert__cat.is-active{background:var(--pptx-primary, #2563eb);color:#fff}.pptx-sa-insert__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem;padding:.5rem}.pptx-sa-insert__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-height:16rem;overflow-y:auto}.pptx-sa-insert__cell{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.4rem;border:1px solid var(--pptx-border, #e5e7eb);border-radius:4px;background:transparent;color:inherit;cursor:pointer}.pptx-sa-insert__cell:hover{background:var(--pptx-accent, #f1f5f9)}.pptx-sa-insert__cell.is-selected{border-color:var(--pptx-primary, #2563eb);background:color-mix(in srgb,var(--pptx-primary, #2563eb) 18%,transparent)}.pptx-sa-insert__thumb{width:4rem;height:3rem;display:flex;align-items:center;justify-content:center;background:var(--pptx-muted, #f1f5f9);border-radius:4px}.pptx-sa-insert__cell-label{font-size:10px;text-align:center;line-height:1.15}.pptx-sa-insert__text{display:flex;flex-direction:column;gap:.2rem}.pptx-sa-insert__text-label{font-size:10px;color:var(--pptx-muted-foreground, #6b7280)}.pptx-sa-insert__textarea{width:100%;box-sizing:border-box;resize:vertical;font-size:12px;padding:.35rem .5rem;border:1px solid var(--pptx-border, #e5e7eb);border-radius:4px;background:var(--pptx-input, #fff);color:inherit}.pptx-sa-insert__footer{display:flex;gap:.5rem;justify-content:flex-end}.pptx-sa-insert__btn{padding:.35rem .85rem;font-size:12px;border:1px solid var(--pptx-border, #e5e7eb);border-radius:4px;background:var(--pptx-muted, #f1f5f9);color:inherit;cursor:pointer}.pptx-sa-insert__btn--primary{background:var(--pptx-primary, #2563eb);border-color:var(--pptx-primary, #2563eb);color:#fff}.pptx-sa-insert__btn:disabled{opacity:.45;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], insert: [{ type: i0.Output, args: ["insert"] }] } });
 
-/**
- * Thin re-export shim → vendored `pptx-viewer-shared`
- * (`render/inspector-helpers`).
- *
- * The pure inspector-panel value readers + shapeStyle/textStyle patch builders
- * were extracted to shared and are consumed by every binding. This shim
- * preserves the historical Angular import surface.
- */
-
 /**
  * animation-author-helpers.ts: Angular shim over the shared element-animation
  * authoring model.
@@ -46564,6 +46553,15 @@ function stringFromEvent$2(event) {
     return val.length > 0 ? val : null;
 }
 
+/**
+ * Thin re-export shim → vendored `pptx-viewer-shared`
+ * (`render/inspector-helpers`).
+ *
+ * The pure inspector-panel value readers + shapeStyle/textStyle patch builders
+ * were extracted to shared and are consumed by every binding. This shim
+ * preserves the historical Angular import surface.
+ */
+
 /**
  * smart-art-node-style-helpers.ts: pure logic for per-node SmartArt style
  * editing + node-count boundary constraints in the Angular inspector.
@@ -46680,7 +46678,7 @@ function describeSmartArtBounds(layout) {
  * `editor-insert.ts` (sourced from `pptx-viewer-core`). Keeping this logic out of
  * the component lets it be unit-tested in plain vitest (the Angular package's
  * vitest setup has no Angular compiler, so TestBed component tests are not
- * available - see PORTING.md).
+ * available).
  *
  * Mirrors the React inspector:
  *   packages/react/src/viewer/components/inspector/SmartArtPropertiesPanel.tsx
@@ -51390,6 +51388,72 @@ function resolvePresenterNotes(slide) {
     };
 }
 
+/**
+ * canvas-fit.service.ts: Auto-fit scale measurement for `SlideCanvasComponent`.
+ * Computes the largest scale (<= 1) at which the whole slide fits its scroll
+ * viewport, reserving the 1rem gutter + drop shadow, so the parent's `zoom`
+ * input means "100% of fit" rather than "100% of the authored slide size".
+ * Thumbnail consumers (slides panel, slide sorter) set `autoFit` false and
+ * manage their own scale via `zoom` instead.
+ *
+ * Extracted from {@link SlideCanvasComponent}. Provided per canvas instance
+ * (`providers: [CanvasFitService]` on `SlideCanvasComponent`), so each
+ * canvas (main editor, thumbnails, presentation overlay, ...) measures its
+ * own viewport independently. The component wires the ResizeObserver /
+ * `afterNextRender` lifecycle (both require the component's injection
+ * context) and calls {@link recompute}; this service only owns the
+ * measurement math and the resulting signal.
+ */
+class CanvasFitService {
+    /**
+     * Auto-fit scale (<= 1): how much the fixed-size slide must shrink to fit
+     * the scroll viewport. The authored slide is e.g. 1280x720, which overflows
+     * a phone; without this it renders off-screen at `zoom=1`.
+     */
+    fitScale = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fitScale" }] : /* istanbul ignore next */ []));
+    host = null;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    /**
+     * Recompute {@link fitScale} from the current viewport size. Call after the
+     * view renders and whenever the viewport or slide size may have changed
+     * (ResizeObserver, `canvasSize` change).
+     */
+    recompute() {
+        if (!this.host) {
+            return;
+        }
+        // Thumbnail consumers manage their own scale via `zoom`; keep fit at 1 so
+        // the two scales don't compound.
+        if (!this.host.autoFit()) {
+            this.fitScale.set(1);
+            return;
+        }
+        const el = this.host.viewportElement();
+        const size = this.host.canvasSize();
+        if (!el || !size.width || !size.height) {
+            this.fitScale.set(1);
+            return;
+        }
+        const availW = Math.max(el.clientWidth - 16, 0);
+        const availH = Math.max(el.clientHeight - 32, 0);
+        if (!availW || !availH) {
+            this.fitScale.set(1);
+            return;
+        }
+        const fit = Math.min(availW / size.width, availH / size.height, 1);
+        this.fitScale.set(fit > 0 ? fit : 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CanvasFitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CanvasFitService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CanvasFitService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Pure geometry for interactive element drag/resize.
  *
@@ -52369,7 +52433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Compound (double/triple) lines render as parallel strands and line caps map
  * from `a:ln/@cap`; both derive from the shared connector geometry.
  *
- * Not yet ported (TODO, see PORTING.md): line shadows/glow.
+ * Not yet ported (TODO): line shadows/glow.
  */
 class ConnectorRendererComponent {
     element = input.required(/* @ts-ignore */
@@ -52796,7 +52860,8 @@ function buildDuotoneFilter(element) {
  * and paint text boxes, basic preset shapes, images, and image/gradient fills
  * (the latter via the parser's prebuilt CSS gradient string). Advanced visuals
  * (the structured gradient builder, pattern fills, custom geometry clip-paths,
- * shadows, 3D, image effects, text warp) are tracked in PORTING.md.
+ * shadows, 3D, image effects, text warp) are handled by the shared render
+ * modules (`pptx-viewer-shared`) consumed from the renderer components.
  *
  * Long term the *logic* here is a shared-extraction candidate; only the
  * return type (CSS map shape) differs per framework, so a future refactor
@@ -53234,7 +53299,7 @@ function buildInkContainerStyle(element, zIndex) {
  * radii follow the per-point pressure, matching React's `renderInk`. Strokes
  * without pressure variation degrade to a plain constant-width `<path>`.
  *
- * Not ported (TODO, see PORTING.md): ink replay animation and the
+ * Not ported (TODO): ink replay animation and the
  * highlighter/eraser tool blend modes.
  *
  * All non-trivial pure computation lives in `ink-renderer-helpers.ts` (no
@@ -54629,7 +54694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * its text directly on the diagram. Everything that can be expressed as a pure
  * function lives here so it can be unit-tested in plain vitest (the Angular
  * package's vitest setup has no Angular compiler, so component/TestBed tests are
- * not available - see PORTING.md). The component
+ * not available). The component
  * (`smart-art-renderer.component.ts`) stays thin: it owns only the edit-state
  * signal, the positioned `<textarea>`, and the call into the existing commit
  * path (`EditorStateService.updateElement`, the same channel the inspector's
@@ -57294,8 +57359,7 @@ function runStyleFromSegment(seg) {
  * ElementRendererComponent: Angular port of the React `ElementRenderer.tsx`
  * and the Vue `ElementRenderer.vue`.
  *
- * Renders a single slide element by its `type` discriminant (viewer-first
- * subset):
+ * Renders a single slide element by its `type` discriminant:
  *  - `text` / `shape`    → positioned box with fill/stroke + rich text + effects
  *  - `connector`         → SVG straight/bent/curved connector
  *  - `chart`             → inline-SVG chart (bar/line/area/pie/scatter)
@@ -57303,14 +57367,13 @@ function runStyleFromSegment(seg) {
  *  - `smartArt`          → SVG drawing-shapes / node-text fallback
  *  - `ink`               → SVG ink strokes
  *  - `ole`               → embedded-object preview / icon
- *  - `model3d`           → poster / placeholder (no three.js)
+ *  - `model3d`           → interactive three.js scene when the optional
+ *                          `three` peer is present, else poster / placeholder
  *  - `zoom`              → slide/section zoom thumbnail
  *  - `picture` / `image` → `<img>`
  *  - `media`             → native `<video>`/`<audio>` playback, poster fallback
  *  - `group`             → recursive children (self-referencing selector)
- *  - everything else     → labelled placeholder (TODO, see PORTING.md)
- *
- * Interaction (selection, resize, inline editing) is not yet ported.
+ *  - everything else     → labelled placeholder (defensive fallback)
  */
 class ElementRendererComponent {
     element = input.required(/* @ts-ignore */
@@ -58091,6 +58154,372 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], obstacles: [{ type: i0.Input, args: [{ isSignal: true, alias: "obstacles", required: false }] }], canvasWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasWidth", required: false }] }], canvasHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasHeight", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], fieldContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldContext", required: false }] }], editTemplateMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editTemplateMode", required: false }] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], tableChange: [{ type: i0.Output, args: ["tableChange"] }] } });
 
+/**
+ * ink-drawing.service.ts: Pen/highlighter/freeform/eraser drawing state +
+ * logic for `SlideCanvasComponent`'s "draw" branch: capturing a live stroke's
+ * points, the SVG preview path, eraser hit-testing against ink elements, and
+ * finalising a completed stroke into an `InkPptxElement`.
+ *
+ * Extracted from {@link SlideCanvasComponent}. Provided per canvas instance
+ * (`providers: [InkDrawingService]`), so each canvas has its own in-progress
+ * stroke. The component's pointerdown/move/up handlers dispatch to this
+ * service FIRST (draw tools take over all pointer gestures), falling through
+ * to the select/marquee/drag path only when {@link isDrawToolActive} is false
+ * (down) or the move/up delegate methods return `false` (no stroke in
+ * progress).
+ */
+/** Bounding-box hit-test radius (px, stage coords) for the eraser tool. */
+const ERASER_HIT_RADIUS = 15;
+class InkDrawingService {
+    /** Whether a freehand stroke is in progress. Signal for template reactivity. */
+    active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** SVG path `d` for the live stroke preview (updated on every pointer move). */
+    liveInkPath = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liveInkPath" }] : /* istanbul ignore next */ []));
+    /** Accumulated points for the stroke currently being drawn. */
+    points = [];
+    host = null;
+    /** Wire the host accessors/emitters (called once from the component constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    requireHost() {
+        if (!this.host) {
+            throw new Error('InkDrawingService.bind() was not called');
+        }
+        return this.host;
+    }
+    /** True when a draw tool (anything but 'select') should own the current gesture. */
+    isDrawToolActive() {
+        return this.requireHost().drawTool() !== 'select';
+    }
+    /**
+     * Handle a stage pointerdown while a draw tool is active: eraser hit-tests
+     * against ink elements (topmost wins); pen/highlighter/freeform begin a new
+     * stroke.
+     */
+    handleStagePointerDown(event) {
+        const host = this.requireHost();
+        const stage = host.stageElement();
+        if (!stage) {
+            return;
+        }
+        const rect = stage.getBoundingClientRect();
+        const zoom = host.effectiveScale() || 1;
+        const pt = {
+            x: (event.clientX - rect.left) / zoom,
+            y: (event.clientY - rect.top) / zoom,
+        };
+        if (host.drawTool() === 'eraser') {
+            // Find ink elements whose bounding box (+ hit radius) contains the
+            // pointer. Iterate in reverse so the topmost element wins.
+            const allElements = host.elements();
+            for (let i = allElements.length - 1; i >= 0; i--) {
+                const el = allElements[i];
+                if (el.type !== 'ink') {
+                    continue;
+                }
+                if (pt.x >= el.x - ERASER_HIT_RADIUS &&
+                    pt.x <= el.x + el.width + ERASER_HIT_RADIUS &&
+                    pt.y >= el.y - ERASER_HIT_RADIUS &&
+                    pt.y <= el.y + el.height + ERASER_HIT_RADIUS) {
+                    host.emitEraserHit(el.id);
+                    break;
+                }
+            }
+            return;
+        }
+        // pen / highlighter / freeform: begin stroke
+        event.preventDefault();
+        event.target?.setPointerCapture?.(event.pointerId);
+        this.points = [pt];
+        this.active.set(true);
+        this.liveInkPath.set(pointsToSvgPathD(this.points));
+    }
+    /** Append a point to the in-progress stroke. Returns false when no stroke is active (caller should fall through). */
+    handlePointerMove(event) {
+        if (!this.active()) {
+            return false;
+        }
+        const host = this.requireHost();
+        const stage = host.stageElement();
+        if (!stage) {
+            return true;
+        }
+        const rect = stage.getBoundingClientRect();
+        const zoom = host.effectiveScale() || 1;
+        const pt = {
+            x: (event.clientX - rect.left) / zoom,
+            y: (event.clientY - rect.top) / zoom,
+        };
+        this.points.push(pt);
+        this.liveInkPath.set(pointsToSvgPathD(this.points));
+        return true;
+    }
+    /** Finalise the in-progress stroke and emit it. Returns false when no stroke was active (caller should fall through). */
+    handlePointerUp() {
+        if (!this.active()) {
+            return false;
+        }
+        const host = this.requireHost();
+        this.active.set(false);
+        const tool = host.drawTool();
+        const resolvedTool = tool === 'highlighter' ? 'highlighter' : tool === 'freeform' ? 'freeform' : 'pen';
+        const ink = strokeToInkElement({
+            points: this.points,
+            color: host.drawColor(),
+            width: host.drawWidth(),
+            tool: resolvedTool,
+        });
+        if (ink) {
+            host.emitInkStrokeComplete(ink);
+        }
+        this.points = [];
+        this.liveInkPath.set('');
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InkDrawingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InkDrawingService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InkDrawingService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * ruler-guides.service.ts: User-created ruler guide-line state + logic for
+ * `SlideCanvasComponent`: dragging a new guide off a ruler strip, dragging an
+ * existing guide, and removing one (double-click its handle).
+ *
+ * Extracted from {@link SlideCanvasComponent}. Provided per canvas instance
+ * (`providers: [RulerGuidesService]`), so each canvas keeps its own set of
+ * guides. The component's shared pointermove/pointerup handlers check
+ * {@link isDragging} / call {@link handlePointerMove} / {@link handlePointerUp}
+ * FIRST (a guide drag takes over the gesture entirely), falling through to the
+ * draw/marquee/drag path only when no guide drag is in progress. The general
+ * move-drag's guide-snap math stays on the component (it needs the drag's
+ * live `box`), reading {@link rulerGuides} directly.
+ */
+class RulerGuidesService {
+    /**
+     * User-created guide lines (dragged from rulers or added from toolbar).
+     * axis:'x' -> vertical line at x=pos; axis:'y' -> horizontal line at y=pos.
+     */
+    rulerGuides = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rulerGuides" }] : /* istanbul ignore next */ []));
+    /** Active guide-drag state (id + axis only), or null when nothing is being dragged. */
+    guideDrag = null;
+    host = null;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    requireHost() {
+        if (!this.host) {
+            throw new Error('RulerGuidesService.bind() was not called');
+        }
+        return this.host;
+    }
+    /** True while an existing or just-created guide is being dragged. */
+    isDragging() {
+        return this.guideDrag !== null;
+    }
+    /** Begin dragging an existing guide. Called from the guide handle pointerdown. */
+    onGuidePointerDown(event, id, axis) {
+        event.stopPropagation();
+        event.target?.setPointerCapture?.(event.pointerId);
+        this.guideDrag = { id, axis };
+    }
+    /** Remove a guide (called on guide handle double-click). */
+    onGuideDoubleClick(event, id) {
+        event.stopPropagation();
+        this.rulerGuides.update((gs) => gs.filter((g) => g.id !== id));
+    }
+    /** Drag from the horizontal ruler to create a new horizontal guide (axis:'y'). */
+    onHRulerPointerDown(event) {
+        const host = this.requireHost();
+        if (!host.editable()) {
+            return;
+        }
+        const stage = host.stageElement();
+        if (!stage) {
+            return;
+        }
+        event.preventDefault();
+        event.target?.setPointerCapture?.(event.pointerId);
+        const rect = stage.getBoundingClientRect();
+        const z = host.effectiveScale() || 1;
+        const pos = (event.clientY - rect.top) / z;
+        const id = `guide-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+        this.rulerGuides.update((gs) => [...gs, { id, axis: 'y', pos: Math.max(0, pos) }]);
+        this.guideDrag = { id, axis: 'y' };
+    }
+    /** Drag from the vertical ruler to create a new vertical guide (axis:'x'). */
+    onVRulerPointerDown(event) {
+        const host = this.requireHost();
+        if (!host.editable()) {
+            return;
+        }
+        const stage = host.stageElement();
+        if (!stage) {
+            return;
+        }
+        event.preventDefault();
+        event.target?.setPointerCapture?.(event.pointerId);
+        const rect = stage.getBoundingClientRect();
+        const z = host.effectiveScale() || 1;
+        const pos = (event.clientX - rect.left) / z;
+        const id = `guide-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+        this.rulerGuides.update((gs) => [...gs, { id, axis: 'x', pos: Math.max(0, pos) }]);
+        this.guideDrag = { id, axis: 'x' };
+    }
+    /** Update the dragged guide's position. Returns false when no guide drag is in progress (caller should fall through). */
+    handlePointerMove(event) {
+        if (!this.guideDrag) {
+            return false;
+        }
+        const host = this.requireHost();
+        const stage = host.stageElement();
+        if (stage) {
+            const rect = stage.getBoundingClientRect();
+            const z = host.effectiveScale() || 1;
+            const guides = this.rulerGuides();
+            const { id, axis } = this.guideDrag;
+            const rawPos = axis === 'x' ? (event.clientX - rect.left) / z : (event.clientY - rect.top) / z;
+            const canvasSize = host.canvasSize();
+            const clampMax = axis === 'x' ? canvasSize.width : canvasSize.height;
+            const pos = Math.max(0, Math.min(clampMax, rawPos));
+            this.rulerGuides.set(guides.map((g) => (g.id === id ? { ...g, pos } : g)));
+        }
+        return true;
+    }
+    /** End the guide drag. Returns false when no guide drag was in progress (caller should fall through). */
+    handlePointerUp() {
+        if (!this.guideDrag) {
+            return false;
+        }
+        this.guideDrag = null;
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RulerGuidesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RulerGuidesService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RulerGuidesService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * ruler-ticks.ts: Pure tick-mark generation for the slide canvas's horizontal
+ * and vertical ruler strips. No Angular/DOM dependency so it is trivially
+ * unit-testable in isolation from `SlideCanvasComponent`.
+ */
+/** Height/width (px) of the ruler strips: mirrors React's RULER_THICKNESS. */
+const RULER_THICKNESS = 20;
+/** Pixels per inch on the slide canvas (PPTX slides are 10" wide = 960 px). */
+const SLIDE_PX_PER_INCH = 96;
+/**
+ * Generate ruler tick marks for a given slide dimension and scale.
+ * Produces ticks every 1/4 inch (minor) and every inch (major).
+ */
+function generateRulerTicks(slidePx, scale) {
+    const scaledLength = slidePx * scale;
+    const quarterInchPx = (SLIDE_PX_PER_INCH / 4) * scale;
+    if (quarterInchPx < 2) {
+        return [];
+    }
+    const ticks = [];
+    let pos = 0;
+    let inchIndex = 0;
+    while (pos <= scaledLength + 0.5) {
+        const isMajor = inchIndex % 4 === 0;
+        ticks.push({
+            position: pos,
+            isMajor,
+            label: isMajor && inchIndex > 0 ? String(inchIndex / 4) : null,
+        });
+        pos += quarterInchPx;
+        inchIndex++;
+    }
+    return ticks;
+}
+
+/**
+ * selection-geometry.ts: Pure geometry helpers for `SlideCanvasComponent`'s
+ * selection outline, resize/rotate/adjust handles, and the
+ * pointer-target-to-interactive-element resolution. No Angular dependency, so
+ * these are trivially unit-testable and reusable outside the component.
+ */
+/** Bounding boxes (stage coords) for the given selected element ids. */
+function computeSelectionBoxes(elements, selectedIds) {
+    const selected = new Set(selectedIds);
+    if (selected.size === 0) {
+        return [];
+    }
+    return elements
+        .filter((el) => selected.has(el.id))
+        .map((el) => ({ id: el.id, x: el.x, y: el.y, width: el.width, height: el.height }));
+}
+/** The single selected element's box, or null when 0 or >1 are selected. */
+function computeSingleSelected(elements, selectedIds) {
+    if (selectedIds.length !== 1) {
+        return null;
+    }
+    const el = elements.find((e) => e.id === selectedIds[0]);
+    return el ? { id: el.id, x: el.x, y: el.y, width: el.width, height: el.height } : null;
+}
+/** Resize-handle render boxes (stage coords) for the single selection. */
+function computeHandleBoxes(box, editable, handleScreenPx, zoom) {
+    if (!editable || !box) {
+        return [];
+    }
+    const size = handleScreenPx / (zoom || 1);
+    return RESIZE_HANDLES.map((handle) => {
+        const { fx, fy } = handleAnchor(handle);
+        return {
+            handle,
+            left: box.x + fx * box.width - size / 2,
+            top: box.y + fy * box.height - size / 2,
+            size,
+            cursor: handleCursor(handle),
+        };
+    });
+}
+/**
+ * A corner handle box (rotate or shape-adjust) offset above/outside the
+ * single selection's box by `offsetPx` (screen pixels, scaled by zoom).
+ */
+function computeCornerHandle(box, editable, handleScreenPx, offsetPx, zoom, corner) {
+    if (!editable || !box) {
+        return null;
+    }
+    const z = zoom || 1;
+    const size = handleScreenPx / z;
+    const offset = offsetPx / z;
+    if (corner === 'top-center') {
+        return { left: box.x + box.width / 2 - size / 2, top: box.y - offset - size / 2, size };
+    }
+    return { left: box.x - offset - size / 2, top: box.y - offset - size / 2, size };
+}
+/**
+ * Resolve the id of the interactive element under a pointer target, or null.
+ * An element host carries `data-element-id`, but template (master/layout)
+ * elements are only interactive while `editTemplateMode` is on; when off they
+ * are reported as null so the canvas treats them as background (no
+ * select/drag/context-menu/inline-edit).
+ */
+function resolveInteractiveElementId(target, allElements, editTemplateMode) {
+    const host = target?.closest('[data-element-id]');
+    const id = host?.getAttribute('data-element-id');
+    if (!id) {
+        return null;
+    }
+    const el = allElements.find((e) => e.id === id);
+    if (!el) {
+        return null;
+    }
+    return isElementInteractive(el, true, editTemplateMode) ? id : null;
+}
+
 /**
  * Thin re-export shim -> vendored `pptx-viewer-shared`.
  *
@@ -58133,36 +58562,6 @@ function isViewportBackgroundPressTarget(target, currentTarget) {
 
 /** Pixels (screen-space) a pointer must move before a click becomes a drag. */
 const DRAG_THRESHOLD = 3;
-// ── Ruler constants ───────────────────────────────────────────────────────────
-/** Height/width (px) of the ruler strips: mirrors React's RULER_THICKNESS. */
-const RULER_THICKNESS = 20;
-/** Pixels per inch on the slide canvas (PPTX slides are 10" wide = 960 px). */
-const SLIDE_PX_PER_INCH = 96;
-/**
- * Generate ruler tick marks for a given slide dimension and scale.
- * Produces ticks every 1/4 inch (minor) and every inch (major).
- */
-function generateRulerTicks(slidePx, scale) {
-    const scaledLength = slidePx * scale;
-    const quarterInchPx = (SLIDE_PX_PER_INCH / 4) * scale;
-    if (quarterInchPx < 2) {
-        return [];
-    }
-    const ticks = [];
-    let pos = 0;
-    let inchIndex = 0;
-    while (pos <= scaledLength + 0.5) {
-        const isMajor = inchIndex % 4 === 0;
-        ticks.push({
-            position: pos,
-            isMajor,
-            label: isMajor && inchIndex > 0 ? String(inchIndex / 4) : null,
-        });
-        pos += quarterInchPx;
-        inchIndex++;
-    }
-    return ticks;
-}
 /** Handle size in screen pixels (fine pointer: mouse/trackpad). */
 const HANDLE_SCREEN_PX_FINE = 9;
 /** Handle size in screen pixels (coarse pointer: touch); larger hit target. */
@@ -58196,8 +58595,8 @@ function plainText(el) {
  * Renders the active slide as a fixed-size stage scaled by `zoom`, with each
  * element absolutely positioned. When `editable`, supports click-to-select
  * (event delegation), selection outlines, and pointer drag-to-move / resize
- * handles. Rulers, grid, guides, marquee, and collaboration overlays are
- * tracked in PORTING.md.
+ * handles, plus the rulers, grid, guides, marquee, and collaboration
+ * overlays.
  */
 class SlideCanvasComponent {
     slide = input(undefined, /* @ts-ignore */
@@ -58323,8 +58722,6 @@ class SlideCanvasComponent {
     tableChange = output();
     drag = null;
     editCancelled = false;
-    /** Active guide-drag state (id + axis only), or null when nothing is being dragged. */
-    guideDrag = null;
     marquee = null;
     /** Live marquee rectangle (stage coords) while rubber-band selecting. */
     marqueeRect = signal(null, /* @ts-ignore */
@@ -58332,42 +58729,24 @@ class SlideCanvasComponent {
     /** Live alignment-snap guide lines (stage coords) during a move. */
     snapGuides = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "snapGuides" }] : /* istanbul ignore next */ []));
-    /**
-     * User-created guide lines (dragged from rulers or added from toolbar).
-     * axis:'x' → vertical line at x=pos; axis:'y' → horizontal line at y=pos.
-     */
-    rulerGuides = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rulerGuides" }] : /* istanbul ignore next */ []));
-    // ── Ink drawing state ─────────────────────────────────────────────────────
-    /** Accumulated points for the stroke currently being drawn. */
-    inkPoints = [];
-    /** Whether a freehand stroke is in progress. Signal for template reactivity. */
-    inkActiveSignal = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inkActiveSignal" }] : /* istanbul ignore next */ []));
-    /** SVG path `d` for the live stroke preview (updated on every pointer move). */
-    liveInkPath = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "liveInkPath" }] : /* istanbul ignore next */ []));
+    /** Per-instance pen/highlighter/freeform/eraser drawing controller. */
+    inkDrawing = inject(InkDrawingService);
+    /** Per-instance user-created ruler-guide controller. */
+    rulerGuidesSvc = inject(RulerGuidesService);
     textEditor = viewChild('textEditor', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "textEditor" }] : /* istanbul ignore next */ []));
     stageRef = viewChild('stage', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stageRef" }] : /* istanbul ignore next */ []));
     viewportRef = viewChild('viewport', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewportRef" }] : /* istanbul ignore next */ []));
-    /**
-     * Auto-fit scale (≤ 1): how much the fixed-size slide must shrink to fit the
-     * scroll viewport. The authored slide is e.g. 1280×720, which overflows a
-     * phone; without this it renders off-screen at `zoom=1`. Mirrors the React
-     * viewer's `fitScale * scale` model (useZoomViewport.ts) so "100%" means "fit
-     * to viewport". Measured from the viewport via ResizeObserver below.
-     */
-    fitScale = signal(1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fitScale" }] : /* istanbul ignore next */ []));
+    /** Per-instance auto-fit scale measurement (see {@link CanvasFitService}). */
+    canvasFit = inject(CanvasFitService);
     /**
      * The on-screen scale used for ALL rendering and pointer→stage coordinate
      * math: the user's zoom folded with the auto-fit. The parent keeps showing the
      * raw user zoom as the percentage, so this stays internal to the canvas.
      */
-    effectiveScale = computed(() => this.fitScale() * this.zoom(), /* @ts-ignore */
+    effectiveScale = computed(() => this.canvasFit.fitScale() * this.zoom(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveScale" }] : /* istanbul ignore next */ []));
     /** The editing id we've already initialised the textarea for, to avoid re-seeding its value mid-edit. */
     seededEditId = null;
@@ -58400,48 +58779,50 @@ class SlideCanvasComponent {
             const end = editor.nativeElement.value.length;
             editor.nativeElement.setSelectionRange(end, end);
         });
+        // Wire the fit-scale measurement accessors (viewport element, autoFit,
+        // canvasSize all live on this component).
+        this.canvasFit.bind({
+            autoFit: () => this.autoFit(),
+            viewportElement: () => this.viewportRef()?.nativeElement,
+            canvasSize: () => this.canvasSize(),
+        });
         // Re-fit whenever the authored slide size changes (e.g. switching decks).
         effect(() => {
             this.canvasSize();
-            this.recomputeFit();
+            this.canvasFit.recompute();
         });
         // Observe the viewport so the slide re-fits on container resize / rotation.
         const destroyRef = inject(DestroyRef);
         afterNextRender(() => {
-            this.recomputeFit();
+            this.canvasFit.recompute();
             const el = this.viewportRef()?.nativeElement;
             if (typeof ResizeObserver !== 'undefined' && el) {
-                const observer = new ResizeObserver(() => this.recomputeFit());
+                const observer = new ResizeObserver(() => this.canvasFit.recompute());
                 observer.observe(el);
                 destroyRef.onDestroy(() => observer.disconnect());
             }
         });
-    }
-    /**
-     * Compute the largest scale (≤ 1) at which the whole slide fits the viewport,
-     * reserving the 1rem gutter + drop shadow. Sets fitScale to 1 when unmeasured.
-     */
-    recomputeFit() {
-        // Thumbnail consumers manage their own scale via `zoom`; keep fit at 1 so
-        // the two scales don't compound.
-        if (!this.autoFit()) {
-            this.fitScale.set(1);
-            return;
-        }
-        const el = this.viewportRef()?.nativeElement;
-        const size = this.canvasSize();
-        if (!el || !size.width || !size.height) {
-            this.fitScale.set(1);
-            return;
-        }
-        const availW = Math.max(el.clientWidth - 16, 0);
-        const availH = Math.max(el.clientHeight - 32, 0);
-        if (!availW || !availH) {
-            this.fitScale.set(1);
-            return;
-        }
-        const fit = Math.min(availW / size.width, availH / size.height, 1);
-        this.fitScale.set(fit > 0 ? fit : 1);
+        // Wire the ink-drawing controller's accessors + emitters (the stage
+        // element, effective scale, and all-elements accessors, plus the two
+        // outputs it completes, all live on this component).
+        this.inkDrawing.bind({
+            stageElement: () => this.stageRef()?.nativeElement,
+            effectiveScale: () => this.effectiveScale(),
+            elements: () => this.elements(),
+            drawTool: () => this.drawTool(),
+            drawColor: () => this.drawColor(),
+            drawWidth: () => this.drawWidth(),
+            emitInkStrokeComplete: (ink) => this.inkStrokeComplete.emit(ink),
+            emitEraserHit: (id) => this.eraserHit.emit(id),
+        });
+        // Wire the ruler-guides controller's accessors (editable, stage element,
+        // effective scale, canvas size all live on this component).
+        this.rulerGuidesSvc.bind({
+            editable: () => this.editable(),
+            stageElement: () => this.stageRef()?.nativeElement,
+            effectiveScale: () => this.effectiveScale(),
+            canvasSize: () => this.canvasSize(),
+        });
     }
     elements = computed(() => this.slide()?.elements ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
@@ -58474,62 +58855,16 @@ class SlideCanvasComponent {
         .map((e) => ({ x: e.x, y: e.y, width: e.width, height: e.height })), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "connectorObstacles" }] : /* istanbul ignore next */ []));
     /** Bounding boxes (stage coords) for the selected elements. */
-    selectionBoxes = computed(() => {
-        const selected = new Set(this.selectedIds());
-        if (selected.size === 0) {
-            return [];
-        }
-        return this.allElements()
-            .filter((el) => selected.has(el.id))
-            .map((el) => ({ id: el.id, x: el.x, y: el.y, width: el.width, height: el.height }));
-    }, /* @ts-ignore */
+    selectionBoxes = computed(() => computeSelectionBoxes(this.allElements(), this.selectedIds()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectionBoxes" }] : /* istanbul ignore next */ []));
     /** The single selected element's box, or null when 0 or >1 are selected. */
-    singleSelected = computed(() => {
-        const ids = this.selectedIds();
-        if (ids.length !== 1) {
-            return null;
-        }
-        const el = this.allElements().find((e) => e.id === ids[0]);
-        return el ? { id: el.id, x: el.x, y: el.y, width: el.width, height: el.height } : null;
-    }, /* @ts-ignore */
+    singleSelected = computed(() => computeSingleSelected(this.allElements(), this.selectedIds()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "singleSelected" }] : /* istanbul ignore next */ []));
     /** Resize-handle render boxes (stage coords) for the single selection. */
-    handleBoxes = computed(() => {
-        if (!this.editable()) {
-            return [];
-        }
-        const box = this.singleSelected();
-        if (!box) {
-            return [];
-        }
-        const size = HANDLE_SCREEN_PX / (this.effectiveScale() || 1);
-        return RESIZE_HANDLES.map((handle) => {
-            const { fx, fy } = handleAnchor(handle);
-            return {
-                handle,
-                left: box.x + fx * box.width - size / 2,
-                top: box.y + fy * box.height - size / 2,
-                size,
-                cursor: handleCursor(handle),
-            };
-        });
-    }, /* @ts-ignore */
+    handleBoxes = computed(() => computeHandleBoxes(this.singleSelected(), this.editable(), HANDLE_SCREEN_PX, this.effectiveScale()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "handleBoxes" }] : /* istanbul ignore next */ []));
     /** Rotation-handle box (stage coords) above the single selection, or null. */
-    rotateHandle = computed(() => {
-        if (!this.editable()) {
-            return null;
-        }
-        const box = this.singleSelected();
-        if (!box) {
-            return null;
-        }
-        const zoom = this.effectiveScale() || 1;
-        const size = HANDLE_SCREEN_PX / zoom;
-        const offset = 24 / zoom;
-        return { left: box.x + box.width / 2 - size / 2, top: box.y - offset - size / 2, size };
-    }, /* @ts-ignore */
+    rotateHandle = computed(() => computeCornerHandle(this.singleSelected(), this.editable(), HANDLE_SCREEN_PX, 24, this.effectiveScale(), 'top-center'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rotateHandle" }] : /* istanbul ignore next */ []));
     /**
      * Shape-adjustment-handle box (stage coords) for the single selection, or
@@ -58537,38 +58872,14 @@ class SlideCanvasComponent {
      * resize/rotate handles. Selection-only + editable-only, so it vanishes in
      * presentation alongside the rest of the edit chrome.
      */
-    adjustHandle = computed(() => {
-        if (!this.editable()) {
-            return null;
-        }
-        const box = this.singleSelected();
-        if (!box) {
-            return null;
-        }
-        const zoom = this.effectiveScale() || 1;
-        const size = HANDLE_SCREEN_PX / zoom;
-        const offset = 16 / zoom;
-        return { left: box.x - offset - size / 2, top: box.y - offset - size / 2, size };
-    }, /* @ts-ignore */
+    adjustHandle = computed(() => computeCornerHandle(this.singleSelected(), this.editable(), HANDLE_SCREEN_PX, 16, this.effectiveScale(), 'top-left'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "adjustHandle" }] : /* istanbul ignore next */ []));
     /**
      * Resolve the id of the interactive element under a pointer target, or null.
-     * An element host carries `data-element-id`, but template (master/layout)
-     * elements are only interactive while editTemplateMode is on; when off they
-     * are reported as null so the canvas treats them as background (no
-     * select/drag/context-menu/inline-edit).
+     * See {@link resolveInteractiveElementId}.
      */
     interactiveElementIdAt(target) {
-        const host = target?.closest('[data-element-id]');
-        const id = host?.getAttribute('data-element-id');
-        if (!id) {
-            return null;
-        }
-        const el = this.allElements().find((e) => e.id === id);
-        if (!el) {
-            return null;
-        }
-        return isElementInteractive(el, true, this.editTemplateMode()) ? id : null;
+        return resolveInteractiveElementId(target, this.allElements(), this.editTemplateMode());
     }
     onStagePointerDown(event) {
         if (!this.editable()) {
@@ -58585,43 +58896,8 @@ class SlideCanvasComponent {
         // ── DRAW BRANCH: must come before the select/marquee/drag path ─────────
         // When a draw tool is active, pointer gestures capture strokes; none of
         // the select/marquee/drag logic should run.
-        if (this.drawTool() !== 'select') {
-            const stage = this.stageRef()?.nativeElement;
-            if (!stage) {
-                return;
-            }
-            const rect = stage.getBoundingClientRect();
-            const zoom = this.effectiveScale() || 1;
-            const pt = {
-                x: (event.clientX - rect.left) / zoom,
-                y: (event.clientY - rect.top) / zoom,
-            };
-            if (this.drawTool() === 'eraser') {
-                // Find ink elements whose bounding box (+ 15px hit radius) contains
-                // the pointer. Iterate in reverse so the topmost element wins.
-                const HIT_RADIUS = 15;
-                const allElements = this.elements();
-                for (let i = allElements.length - 1; i >= 0; i--) {
-                    const el = allElements[i];
-                    if (el.type !== 'ink') {
-                        continue;
-                    }
-                    if (pt.x >= el.x - HIT_RADIUS &&
-                        pt.x <= el.x + el.width + HIT_RADIUS &&
-                        pt.y >= el.y - HIT_RADIUS &&
-                        pt.y <= el.y + el.height + HIT_RADIUS) {
-                        this.eraserHit.emit(el.id);
-                        break;
-                    }
-                }
-                return;
-            }
-            // pen / highlighter / freeform: begin stroke
-            event.preventDefault();
-            event.target?.setPointerCapture?.(event.pointerId);
-            this.inkPoints = [pt];
-            this.inkActiveSignal.set(true);
-            this.liveInkPath.set(pointsToSvgPathD(this.inkPoints));
+        if (this.inkDrawing.isDrawToolActive()) {
+            this.inkDrawing.handleStagePointerDown(event);
             return;
         }
         // ── END DRAW BRANCH ─────────────────────────────────────────────────────
@@ -58831,36 +59107,13 @@ class SlideCanvasComponent {
     }
     onPointerMove(event) {
         // ── GUIDE DRAG ────────────────────────────────────────────────────────
-        if (this.guideDrag) {
-            const stage = this.stageRef()?.nativeElement;
-            if (stage) {
-                const rect = stage.getBoundingClientRect();
-                const z = this.effectiveScale() || 1;
-                const guides = this.rulerGuides();
-                const { id, axis } = this.guideDrag;
-                const rawPos = axis === 'x' ? (event.clientX - rect.left) / z : (event.clientY - rect.top) / z;
-                const clampMax = axis === 'x' ? this.canvasSize().width : this.canvasSize().height;
-                const pos = Math.max(0, Math.min(clampMax, rawPos));
-                this.rulerGuides.set(guides.map((g) => (g.id === id ? { ...g, pos } : g)));
-            }
+        if (this.rulerGuidesSvc.handlePointerMove(event)) {
             return;
         }
         // ── END GUIDE DRAG ────────────────────────────────────────────────────
         // ── DRAW BRANCH ───────────────────────────────────────────────────────
         // When a stroke is in progress, consume all pointer-move events for drawing.
-        if (this.inkActiveSignal()) {
-            const stage = this.stageRef()?.nativeElement;
-            if (!stage) {
-                return;
-            }
-            const rect = stage.getBoundingClientRect();
-            const zoom = this.effectiveScale() || 1;
-            const pt = {
-                x: (event.clientX - rect.left) / zoom,
-                y: (event.clientY - rect.top) / zoom,
-            };
-            this.inkPoints.push(pt);
-            this.liveInkPath.set(pointsToSvgPathD(this.inkPoints));
+        if (this.inkDrawing.handlePointerMove(event)) {
             return;
         }
         // ── END DRAW BRANCH ───────────────────────────────────────────────────
@@ -58944,7 +59197,7 @@ class SlideCanvasComponent {
             }
             // Guide snap: snap the moving element to the nearest user guide.
             if (this.snapToGuides()) {
-                const guides = this.rulerGuides();
+                const guides = this.rulerGuidesSvc.rulerGuides();
                 const thr = SNAP_SCREEN_PX / zoom;
                 let gx = box.x;
                 let gy = box.y;
@@ -58973,28 +59226,13 @@ class SlideCanvasComponent {
     }
     onPointerUp() {
         // ── GUIDE DRAG ────────────────────────────────────────────────────────
-        if (this.guideDrag) {
-            this.guideDrag = null;
+        if (this.rulerGuidesSvc.handlePointerUp()) {
             return;
         }
         // ── END GUIDE DRAG ────────────────────────────────────────────────────
         // ── DRAW BRANCH ───────────────────────────────────────────────────────
         // Finalise the stroke and emit the completed ink element.
-        if (this.inkActiveSignal()) {
-            this.inkActiveSignal.set(false);
-            const tool = this.drawTool();
-            const resolvedTool = tool === 'highlighter' ? 'highlighter' : tool === 'freeform' ? 'freeform' : 'pen';
-            const ink = strokeToInkElement({
-                points: this.inkPoints,
-                color: this.drawColor(),
-                width: this.drawWidth(),
-                tool: resolvedTool,
-            });
-            if (ink) {
-                this.inkStrokeComplete.emit(ink);
-            }
-            this.inkPoints = [];
-            this.liveInkPath.set('');
+        if (this.inkDrawing.handlePointerUp()) {
             return;
         }
         // ── END DRAW BRANCH ───────────────────────────────────────────────────
@@ -59017,59 +59255,6 @@ class SlideCanvasComponent {
         this.drag = null;
         this.snapGuides.set([]);
     }
-    /** Begin dragging an existing guide. Called from the guide handle pointerdown. */
-    onGuidePointerDown(event, id, axis) {
-        event.stopPropagation();
-        event.target?.setPointerCapture?.(event.pointerId);
-        this.guideDrag = { id, axis };
-    }
-    /** Remove a guide (called on guide handle double-click). */
-    onGuideDoubleClick(event, id) {
-        event.stopPropagation();
-        this.rulerGuides.update((gs) => gs.filter((g) => g.id !== id));
-    }
-    /** Drag from the horizontal ruler to create a new horizontal guide (axis:'y'). */
-    onHRulerPointerDown(event) {
-        if (!this.editable()) {
-            return;
-        }
-        const stage = this.stageRef()?.nativeElement;
-        if (!stage) {
-            return;
-        }
-        event.preventDefault();
-        event.target?.setPointerCapture?.(event.pointerId);
-        const rect = stage.getBoundingClientRect();
-        const z = this.effectiveScale() || 1;
-        const pos = (event.clientY - rect.top) / z;
-        const id = `guide-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-        this.rulerGuides.update((gs) => [
-            ...gs,
-            { id, axis: 'y', pos: Math.max(0, pos) },
-        ]);
-        this.guideDrag = { id, axis: 'y' };
-    }
-    /** Drag from the vertical ruler to create a new vertical guide (axis:'x'). */
-    onVRulerPointerDown(event) {
-        if (!this.editable()) {
-            return;
-        }
-        const stage = this.stageRef()?.nativeElement;
-        if (!stage) {
-            return;
-        }
-        event.preventDefault();
-        event.target?.setPointerCapture?.(event.pointerId);
-        const rect = stage.getBoundingClientRect();
-        const z = this.effectiveScale() || 1;
-        const pos = (event.clientX - rect.left) / z;
-        const id = `guide-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-        this.rulerGuides.update((gs) => [
-            ...gs,
-            { id, axis: 'x', pos: Math.max(0, pos) },
-        ]);
-        this.guideDrag = { id, axis: 'x' };
-    }
     wrapperStyle = computed(() => {
         const scale = this.effectiveScale();
         const size = this.canvasSize();
@@ -59139,7 +59324,7 @@ class SlideCanvasComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stageStyle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SlideCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SlideCanvasComponent, isStandalone: true, selector: "pptx-slide-canvas", inputs: { slide: { classPropertyName: "slide", publicName: "slide", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showRulers: { classPropertyName: "showRulers", publicName: "showRulers", isSignal: true, isRequired: false, transformFunction: null }, showGuides: { classPropertyName: "showGuides", publicName: "showGuides", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, snapToGuides: { classPropertyName: "snapToGuides", publicName: "snapToGuides", isSignal: true, isRequired: false, transformFunction: null }, autoFit: { classPropertyName: "autoFit", publicName: "autoFit", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, editingId: { classPropertyName: "editingId", publicName: "editingId", isSignal: true, isRequired: false, transformFunction: null }, editTemplateMode: { classPropertyName: "editTemplateMode", publicName: "editTemplateMode", isSignal: true, isRequired: false, transformFunction: null }, templateElements: { classPropertyName: "templateElements", publicName: "templateElements", isSignal: true, isRequired: false, transformFunction: null }, drawTool: { classPropertyName: "drawTool", publicName: "drawTool", isSignal: true, isRequired: false, transformFunction: null }, drawColor: { classPropertyName: "drawColor", publicName: "drawColor", isSignal: true, isRequired: false, transformFunction: null }, drawWidth: { classPropertyName: "drawWidth", publicName: "drawWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementSelect: "elementSelect", backgroundClick: "backgroundClick", transformStart: "transformStart", transformUpdate: "transformUpdate", contextMenu: "contextMenu", textEditStart: "textEditStart", textCommit: "textCommit", textCancel: "textCancel", textFormat: "textFormat", rotateUpdate: "rotateUpdate", marqueeSelect: "marqueeSelect", inkStrokeComplete: "inkStrokeComplete", eraserHit: "eraserHit", cellCommit: "cellCommit", tableChange: "tableChange" }, host: { listeners: { "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp()" } }, viewQueries: [{ propertyName: "textEditor", first: true, predicate: ["textEditor"], descendants: true, isSignal: true }, { propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true, isSignal: true }, { propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SlideCanvasComponent, isStandalone: true, selector: "pptx-slide-canvas", inputs: { slide: { classPropertyName: "slide", publicName: "slide", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showRulers: { classPropertyName: "showRulers", publicName: "showRulers", isSignal: true, isRequired: false, transformFunction: null }, showGuides: { classPropertyName: "showGuides", publicName: "showGuides", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, snapToGuides: { classPropertyName: "snapToGuides", publicName: "snapToGuides", isSignal: true, isRequired: false, transformFunction: null }, autoFit: { classPropertyName: "autoFit", publicName: "autoFit", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, editingId: { classPropertyName: "editingId", publicName: "editingId", isSignal: true, isRequired: false, transformFunction: null }, editTemplateMode: { classPropertyName: "editTemplateMode", publicName: "editTemplateMode", isSignal: true, isRequired: false, transformFunction: null }, templateElements: { classPropertyName: "templateElements", publicName: "templateElements", isSignal: true, isRequired: false, transformFunction: null }, drawTool: { classPropertyName: "drawTool", publicName: "drawTool", isSignal: true, isRequired: false, transformFunction: null }, drawColor: { classPropertyName: "drawColor", publicName: "drawColor", isSignal: true, isRequired: false, transformFunction: null }, drawWidth: { classPropertyName: "drawWidth", publicName: "drawWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementSelect: "elementSelect", backgroundClick: "backgroundClick", transformStart: "transformStart", transformUpdate: "transformUpdate", contextMenu: "contextMenu", textEditStart: "textEditStart", textCommit: "textCommit", textCancel: "textCancel", textFormat: "textFormat", rotateUpdate: "rotateUpdate", marqueeSelect: "marqueeSelect", inkStrokeComplete: "inkStrokeComplete", eraserHit: "eraserHit", cellCommit: "cellCommit", tableChange: "tableChange" }, host: { listeners: { "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp()" } }, providers: [CanvasFitService, InkDrawingService, RulerGuidesService], viewQueries: [{ propertyName: "textEditor", first: true, predicate: ["textEditor"], descendants: true, isSignal: true }, { propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true, isSignal: true }, { propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div
 			#viewport
 			class="pptx-ng-canvas-viewport"
@@ -59356,7 +59541,7 @@ class SlideCanvasComponent {
 							Each guide has a non-interactive line body and an interactive
 							drag handle. Double-click the handle to delete the guide.
 						-->
-						@for (g of rulerGuides(); track g.id) {
+						@for (g of rulerGuidesSvc.rulerGuides(); track g.id) {
 							<!-- Guide line body: pointer-events:none -->
 							<div
 								class="pptx-ng-ruler-guide-line"
@@ -59373,8 +59558,8 @@ class SlideCanvasComponent {
 								[style.width]="g.axis === 'x' ? '9px' : '100%'"
 								[style.height]="g.axis === 'y' ? '9px' : '100%'"
 								[style.cursor]="g.axis === 'x' ? 'col-resize' : 'row-resize'"
-								(pointerdown)="onGuidePointerDown($event, g.id, g.axis)"
-								(dblclick)="onGuideDoubleClick($event, g.id)"
+								(pointerdown)="rulerGuidesSvc.onGuidePointerDown($event, g.id, g.axis)"
+								(dblclick)="rulerGuidesSvc.onGuideDoubleClick($event, g.id)"
 								[title]="'pptx.canvas.guideTooltip' | translate"
 							></div>
 						}
@@ -59385,7 +59570,7 @@ class SlideCanvasComponent {
 						pointer-events:none so it never intercepts element gestures.
 						No data-pptx-element / aria-roledescription / data-pptx-viewport.
 					-->
-					@if (inkActiveSignal() && liveInkPath() && drawTool() !== 'select') {
+					@if (inkDrawing.active() && inkDrawing.liveInkPath() && drawTool() !== 'select') {
 						<svg
 							class="pptx-ng-ink-preview"
 							aria-hidden="true"
@@ -59394,7 +59579,7 @@ class SlideCanvasComponent {
 							style="position:absolute;inset:0;pointer-events:none;z-index:70"
 						>
 							<path
-								[attr.d]="liveInkPath()"
+								[attr.d]="inkDrawing.liveInkPath()"
 								fill="none"
 								[attr.stroke]="drawColor()"
 								[attr.stroke-width]="drawWidth()"
@@ -59424,7 +59609,7 @@ class SlideCanvasComponent {
 						[attr.width]="canvasSize().width * effectiveScalePublic()"
 						[attr.height]="20"
 						[style.cursor]="editable() ? 'crosshair' : null"
-						(pointerdown)="editable() ? onHRulerPointerDown($event) : null"
+						(pointerdown)="editable() ? rulerGuidesSvc.onHRulerPointerDown($event) : null"
 					>
 						<rect
 							[attr.width]="canvasSize().width * effectiveScalePublic()"
@@ -59469,7 +59654,7 @@ class SlideCanvasComponent {
 						[attr.width]="20"
 						[attr.height]="canvasSize().height * effectiveScalePublic()"
 						[style.cursor]="editable() ? 'crosshair' : null"
-						(pointerdown)="editable() ? onVRulerPointerDown($event) : null"
+						(pointerdown)="editable() ? rulerGuidesSvc.onVRulerPointerDown($event) : null"
 					>
 						<rect
 							width="20"
@@ -59513,7 +59698,7 @@ class SlideCanvasComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SlideCanvasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-slide-canvas', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, ElementRendererComponent, TranslatePipe], template: `
+            args: [{ selector: 'pptx-slide-canvas', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CanvasFitService, InkDrawingService, RulerGuidesService], imports: [NgStyle, ElementRendererComponent, TranslatePipe], template: `
 		<div
 			#viewport
 			class="pptx-ng-canvas-viewport"
@@ -59730,7 +59915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 							Each guide has a non-interactive line body and an interactive
 							drag handle. Double-click the handle to delete the guide.
 						-->
-						@for (g of rulerGuides(); track g.id) {
+						@for (g of rulerGuidesSvc.rulerGuides(); track g.id) {
 							<!-- Guide line body: pointer-events:none -->
 							<div
 								class="pptx-ng-ruler-guide-line"
@@ -59747,8 +59932,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 								[style.width]="g.axis === 'x' ? '9px' : '100%'"
 								[style.height]="g.axis === 'y' ? '9px' : '100%'"
 								[style.cursor]="g.axis === 'x' ? 'col-resize' : 'row-resize'"
-								(pointerdown)="onGuidePointerDown($event, g.id, g.axis)"
-								(dblclick)="onGuideDoubleClick($event, g.id)"
+								(pointerdown)="rulerGuidesSvc.onGuidePointerDown($event, g.id, g.axis)"
+								(dblclick)="rulerGuidesSvc.onGuideDoubleClick($event, g.id)"
 								[title]="'pptx.canvas.guideTooltip' | translate"
 							></div>
 						}
@@ -59759,7 +59944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						pointer-events:none so it never intercepts element gestures.
 						No data-pptx-element / aria-roledescription / data-pptx-viewport.
 					-->
-					@if (inkActiveSignal() && liveInkPath() && drawTool() !== 'select') {
+					@if (inkDrawing.active() && inkDrawing.liveInkPath() && drawTool() !== 'select') {
 						<svg
 							class="pptx-ng-ink-preview"
 							aria-hidden="true"
@@ -59768,7 +59953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 							style="position:absolute;inset:0;pointer-events:none;z-index:70"
 						>
 							<path
-								[attr.d]="liveInkPath()"
+								[attr.d]="inkDrawing.liveInkPath()"
 								fill="none"
 								[attr.stroke]="drawColor()"
 								[attr.stroke-width]="drawWidth()"
@@ -59798,7 +59983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[attr.width]="canvasSize().width * effectiveScalePublic()"
 						[attr.height]="20"
 						[style.cursor]="editable() ? 'crosshair' : null"
-						(pointerdown)="editable() ? onHRulerPointerDown($event) : null"
+						(pointerdown)="editable() ? rulerGuidesSvc.onHRulerPointerDown($event) : null"
 					>
 						<rect
 							[attr.width]="canvasSize().width * effectiveScalePublic()"
@@ -59843,7 +60028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[attr.width]="20"
 						[attr.height]="canvasSize().height * effectiveScalePublic()"
 						[style.cursor]="editable() ? 'crosshair' : null"
-						(pointerdown)="editable() ? onVRulerPointerDown($event) : null"
+						(pointerdown)="editable() ? rulerGuidesSvc.onVRulerPointerDown($event) : null"
 					>
 						<rect
 							width="20"
@@ -71431,7 +71616,6 @@ const GRID_GAP = 16;
  * Escape or clicking the ✕ button emits `closed`.
  *
  * Viewer-first scope: no drag-reorder, no context menu, no section grouping.
- * Those features are tracked in PORTING.md.
  *
  * Usage:
  * ```html
@@ -72594,170 +72778,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], activeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeName", required: false }] }], applyTheme: [{ type: i0.Output, args: ["applyTheme"] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
-/**
- * viewer-collaboration-session.service.ts: Viewer-scoped state + logic for the
- * Share (two-way collaboration) and Broadcast (one-way owner) sessions. Owns the
- * two dialog visibility flags and the active-session room/server, derives the
- * shareable join / follow links, and drives connect / disconnect on the
- * {@link CollaborationService}.
- *
- * Extracted from {@link PowerPointViewerComponent}: the component binds the host
- * inputs it cannot reach from a service (author name, share defaults, the
- * template-element snapshot supplier) plus the start/stop output emitters via
- * {@link bind}; the template reads the flags / links / defaults and invokes the
- * handlers off the injected instance.
- *
- * Provide it once on the viewer component
- * (`providers: [ViewerCollaborationSessionService]`).
- */
-class ViewerCollaborationSessionService {
-    collab = inject(CollaborationService);
-    /** Share (collaboration) dialog visibility. */
-    showShare = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showShare" }] : /* istanbul ignore next */ []));
-    /** Broadcast dialog visibility. */
-    showBroadcast = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showBroadcast" }] : /* istanbul ignore next */ []));
-    /**
-     * Room/server of the currently active session, used to build the shareable
-     * join/follow links shown in the dialogs. Null when no session is active.
-     */
-    activeSession = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeSession" }] : /* istanbul ignore next */ []));
-    host = null;
-    /** Wire the host inputs/outputs (called once from the component constructor). */
-    bind(host) {
-        this.host = host;
-    }
-    requireHost() {
-        if (!this.host) {
-            throw new Error('ViewerCollaborationSessionService.bind() was not called');
-        }
-        return this.host;
-    }
-    /** Browser location used to assemble share/follow URLs (omitted in SSR). */
-    browserLocation() {
-        return typeof window === 'undefined'
-            ? undefined
-            : { origin: window.location.origin, pathname: window.location.pathname };
-    }
-    /** Shareable join link for the active collaboration session. */
-    shareUrl = computed(() => {
-        const session = this.activeSession();
-        return session ? buildShareUrl(session.roomId, session.serverUrl, this.browserLocation()) : '';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "shareUrl" }] : /* istanbul ignore next */ []));
-    /** Shareable follow link for the active broadcast. */
-    broadcastViewerUrl = computed(() => {
-        const session = this.activeSession();
-        return session
-            ? buildBroadcastViewerUrl(session.roomId, session.serverUrl, this.browserLocation())
-            : '';
-    }, /* @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
-     * name pre-fills the form. Mirrors React/Vue.
-     */
-    shareDialogDefaults = computed(() => {
-        const host = this.host;
-        const defaults = host?.shareDefaults() ?? {};
-        return {
-            ...defaults,
-            userName: defaults.userName ?? host?.authorName() ?? 'You',
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "shareDialogDefaults" }] : /* istanbul ignore next */ []));
-    /**
-     * Connect / disconnect real-time collaboration when the host `collaboration`
-     * input changes (called from the component's effect).
-     */
-    syncHostConfig(config) {
-        if (config) {
-            this.activeSession.set({ roomId: config.roomId, serverUrl: config.serverUrl });
-            this.connectWithBaseline(config);
-        }
-        else {
-            this.collab.disconnect();
-            this.activeSession.set(null);
-        }
-    }
-    /** Start a real-time collaboration session from the share dialog config. */
-    onShareStart(config) {
-        const host = this.requireHost();
-        // Two-way collaboration: peers edit together (default `collaborator` role).
-        const collaboratorConfig = {
-            role: 'collaborator',
-            ...config,
-            userName: config.userName || (host.authorName() ?? 'You'),
-        };
-        this.activeSession.set({
-            roomId: collaboratorConfig.roomId,
-            serverUrl: collaboratorConfig.serverUrl,
-        });
-        this.connectWithBaseline(collaboratorConfig);
-        host.emitStart(collaboratorConfig);
-    }
-    onShareStop() {
-        this.collab.disconnect();
-        this.activeSession.set(null);
-        this.requireHost().emitStop();
-    }
-    /** Start broadcasting (presenter as session owner) from the broadcast config. */
-    onBroadcastStart(config) {
-        const host = this.requireHost();
-        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 });
-        this.connectWithBaseline(collabConfig);
-        host.emitStart(collabConfig);
-    }
-    onBroadcastStop() {
-        this.collab.disconnect();
-        this.activeSession.set(null);
-        this.requireHost().emitStop();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCollaborationSessionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCollaborationSessionService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCollaborationSessionService, decorators: [{
-            type: Injectable
-        }] });
-
 /**
  * viewer-dialogs.service.ts: Viewer-scoped open-state + light state for the
  * secondary dialogs and side panels (equation editor, set-up-slide-show,
@@ -72860,6 +72880,694 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Injectable
         }] });
 
+/**
+ * EyeDropper colour sampler for the Angular viewer.
+ *
+ * Prefers the native browser EyeDropper API (Chrome 95+ / Edge 95+). For
+ * browsers without it (Firefox, Safari) a DOM-sampling fallback reads the
+ * colour under the pointer via `elementFromPoint` + `getComputedStyle`, so the
+ * eyedropper still works everywhere. Mirrors the React viewer's
+ * `viewer/utils/eyedropper.ts`.
+ */
+/**
+ * Returns true when the native EyeDropper API is available in this browser.
+ * Guards against SSR / headless environments without `window`.
+ */
+function eyedropperAvailable() {
+    return typeof window !== 'undefined' && 'EyeDropper' in window;
+}
+/**
+ * Open the native EyeDropper and return the picked sRGB hex colour string
+ * (e.g. `"#a3b4c5"`), or `null` when the user cancels or the API is absent.
+ */
+async function openNativeEyeDropper() {
+    if (!eyedropperAvailable()) {
+        return null;
+    }
+    try {
+        const EyeDropperClass = window['EyeDropper'];
+        const dropper = new EyeDropperClass();
+        const result = await dropper.open();
+        return result.sRGBHex;
+    }
+    catch {
+        // User cancelled (AbortError) or unexpected error: treat as no-op
+        return null;
+    }
+}
+// ---------------------------------------------------------------------------
+// Fallback sampling (Firefox / Safari)
+// ---------------------------------------------------------------------------
+function toHex(r, g, b) {
+    const h = (n) => n.toString(16).padStart(2, '0');
+    return `#${h(r)}${h(g)}${h(b)}`;
+}
+function parseRgbaString(str) {
+    const match = str.match(/rgba?\(\s*(?<r>\d+)\s*,\s*(?<g>\d+)\s*,\s*(?<b>\d+)/u);
+    if (!match?.groups) {
+        return null;
+    }
+    const r = parseInt(match.groups.r, 10);
+    const g = parseInt(match.groups.g, 10);
+    const b = parseInt(match.groups.b, 10);
+    return { r, g, b, hex: toHex(r, g, b) };
+}
+/**
+ * Sample the colour at a client-space point by inspecting the topmost element's
+ * computed paint. Tries, in order: a real `<canvas>` pixel read (sharp for
+ * rasterised content), then the element's `background-color`, SVG `fill`, and
+ * finally text `color`. Returns `null` when nothing paintable is found.
+ *
+ * This is the DOM fallback used when the native EyeDropper API is unavailable;
+ * it needs no canvas plumbing, so it works against the live slide DOM.
+ */
+function sampleColorFromSlide(clientX, clientY) {
+    const target = typeof document === 'undefined' ? null : document.elementFromPoint(clientX, clientY);
+    if (!(target instanceof Element)) {
+        return null;
+    }
+    // Direct pixel read when the pointer is over a <canvas> (untainted only).
+    const canvas = target instanceof HTMLCanvasElement ? target : target.closest('canvas');
+    if (canvas instanceof HTMLCanvasElement) {
+        try {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                const rect = canvas.getBoundingClientRect();
+                const sx = Math.round((clientX - rect.left) * (canvas.width / canvas.clientWidth));
+                const sy = Math.round((clientY - rect.top) * (canvas.height / canvas.clientHeight));
+                const pixel = ctx.getImageData(sx, sy, 1, 1).data;
+                return { r: pixel[0], g: pixel[1], b: pixel[2], hex: toHex(pixel[0], pixel[1], pixel[2]) };
+            }
+        }
+        catch {
+            // Cross-origin / tainted canvas: fall through to computed-style sampling.
+        }
+    }
+    const computed = getComputedStyle(target);
+    const bg = computed.backgroundColor;
+    if (bg && bg !== 'transparent' && bg !== 'rgba(0, 0, 0, 0)') {
+        const parsed = parseRgbaString(bg);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    const fill = computed.fill;
+    if (fill && fill !== 'none' && fill !== 'transparent') {
+        const parsed = parseRgbaString(fill);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    return computed.color ? parseRgbaString(computed.color) : null;
+}
+/**
+ * Run the eyedropper fallback: arm a one-shot pointer listener and resolve with
+ * the hex colour of the next click (or `null` if the user presses Escape). Used
+ * only when {@link eyedropperAvailable} is false. The caller is responsible for
+ * any "armed" UI affordance; this just manages the listeners.
+ */
+function pickColorByClickFallback() {
+    if (typeof document === 'undefined') {
+        return Promise.resolve(null);
+    }
+    return new Promise((resolve) => {
+        const cleanup = () => {
+            document.removeEventListener('pointerdown', onPointerDown, true);
+            document.removeEventListener('keydown', onKeyDown, true);
+        };
+        const onPointerDown = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            cleanup();
+            const sample = sampleColorFromSlide(event.clientX, event.clientY);
+            resolve(sample ? sample.hex : null);
+        };
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                cleanup();
+                resolve(null);
+            }
+        };
+        document.addEventListener('pointerdown', onPointerDown, true);
+        document.addEventListener('keydown', onKeyDown, true);
+    });
+}
+
+/**
+ * Thin re-export shim → vendored `pptx-viewer-shared`.
+ *
+ * The format-painter copy/apply logic was consolidated into
+ * `pptx-viewer-shared` (`render/format-painter.ts`), shared by every binding.
+ * This shim keeps the historical Angular import path for the component and its
+ * tests.
+ */
+
+/**
+ * viewer-format-painter.service.ts: Viewer-scoped state + logic for the format
+ * painter (copy one element's shape/text style onto the next clicked element)
+ * and the eyedropper (sample a screen colour onto the selected shape's fill,
+ * else copy it to the clipboard). Both are "apply a style to an element"
+ * interactions keyed off the current selection.
+ *
+ * Extracted from {@link PowerPointViewerComponent}: the component binds the
+ * selection / active-slide accessors via {@link bind}; the template reads the
+ * armed/active flags and invokes the toggles, and the component's selection and
+ * keyboard handlers consult {@link active} / call {@link applyToTarget} /
+ * {@link cancel}.
+ *
+ * Provide it once on the viewer component (`providers: [ViewerFormatPainterService]`).
+ */
+class ViewerFormatPainterService {
+    editor = inject(EditorStateService);
+    /** True while the painter is armed (next element click applies the copied format). */
+    active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Whether the eyedropper is currently active. */
+    eyedropperActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "eyedropperActive" }] : /* istanbul ignore next */ []));
+    /** Format copied from the source element when the painter was armed. */
+    copiedFormat = null;
+    host = null;
+    /** Wire the host selection/slide accessors (called once from the constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    requireHost() {
+        if (!this.host) {
+            throw new Error('ViewerFormatPainterService.bind() was not called');
+        }
+        return this.host;
+    }
+    /** Whether the painter can be armed: exactly one selected element with copyable format. */
+    canActivate = computed(() => hasCopyableFormat(this.host?.selectedElement() ?? null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canActivate" }] : /* istanbul ignore next */ []));
+    /** Toggle the format painter: arm from the current selection, or disarm. */
+    toggle() {
+        if (this.active()) {
+            this.cancel();
+            return;
+        }
+        const source = this.requireHost().selectedElement();
+        if (!source || !hasCopyableFormat(source)) {
+            return;
+        }
+        this.copiedFormat = copyFormatFromElement(source);
+        this.active.set(true);
+    }
+    /** Disarm the painter and drop the copied format. */
+    cancel() {
+        this.active.set(false);
+        this.copiedFormat = null;
+    }
+    /** Apply the copied format to a target element (shape/text style only; one history entry). */
+    applyToTarget(id) {
+        const format = this.copiedFormat;
+        const host = this.requireHost();
+        const target = host.findActiveElement(id);
+        if (!format || !target) {
+            return;
+        }
+        const updated = applyFormatToElement(target, format);
+        const patch = {};
+        if (format.shapeStyle && updated['shapeStyle'] !== undefined) {
+            patch['shapeStyle'] = updated['shapeStyle'];
+        }
+        if (format.textStyle && updated['textStyle'] !== undefined) {
+            patch['textStyle'] = updated['textStyle'];
+        }
+        if (Object.keys(patch).length > 0) {
+            this.editor.updateElement(host.activeSlideIndex(), id, patch);
+        }
+    }
+    /**
+     * Activate the eyedropper to pick a colour from the screen. Uses the native
+     * EyeDropper API where available (Chrome/Edge); on Firefox/Safari it falls
+     * back to a one-shot click that samples the slide DOM under the pointer.
+     * When a shape/text/connector/image element is selected, applies the colour
+     * to its fill; otherwise copies it to the clipboard. No-ops when the user
+     * cancels (Escape) or nothing paintable is under the pointer.
+     */
+    async toggleEyedropper() {
+        this.eyedropperActive.set(true);
+        try {
+            const color = eyedropperAvailable()
+                ? await openNativeEyeDropper()
+                : await pickColorByClickFallback();
+            if (color) {
+                await this.applyEyedropperColor(color);
+            }
+        }
+        finally {
+            this.eyedropperActive.set(false);
+        }
+    }
+    /** Apply a picked colour to the selected shape's fill, else copy to clipboard. */
+    async applyEyedropperColor(color) {
+        const host = this.requireHost();
+        const sel = host.selectedElement();
+        const idx = host.activeSlideIndex();
+        if (sel !== null && hasShapeProperties(sel)) {
+            this.editor.updateElement(idx, sel.id, {
+                shapeStyle: { ...sel.shapeStyle, fillColor: color },
+            });
+        }
+        else {
+            await navigator.clipboard.writeText(color).catch(() => undefined);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerFormatPainterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerFormatPainterService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerFormatPainterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * viewer-canvas-editing.service.ts: Viewer-scoped state + logic for direct
+ * canvas interactions on the active slide: element/background/context-menu
+ * selection, inline text edit (incl. the equation-editor detour), ink stroke
+ * completion + eraser hits, table cell/structural edits, and the slide
+ * background/notes property edits. This is the single largest concern pulled
+ * off `PowerPointViewerComponent`'s `SlideCanvasComponent` output wiring.
+ *
+ * Extracted from {@link PowerPointViewerComponent}: the component binds the
+ * few accessors it alone owns (canEdit / active-slide / active-slide-index)
+ * via {@link bind}; the template reads the signals / invokes the handlers off
+ * the injected instance directly (same pattern as `session`/`xport`).
+ *
+ * Provide it once on the viewer component (`providers: [ViewerCanvasEditingService]`).
+ */
+class ViewerCanvasEditingService {
+    editor = inject(EditorStateService);
+    dialogs = inject(ViewerDialogsService);
+    formatPainter = inject(ViewerFormatPainterService);
+    /** Id of the element being inline text-edited, or null. */
+    editingId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editingId" }] : /* istanbul ignore next */ []));
+    /** Open editor context-menu position (client coords), or null. */
+    contextMenuPos = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextMenuPos" }] : /* istanbul ignore next */ []));
+    host = null;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    requireHost() {
+        if (!this.host) {
+            throw new Error('ViewerCanvasEditingService.bind() was not called');
+        }
+        return this.host;
+    }
+    /**
+     * Double-click text edit entry: equations open the equation editor instead
+     * of the inline text editor (mirrors React's dbl-click-to-edit-equation).
+     */
+    onTextEditStart(id) {
+        const host = this.requireHost();
+        const element = host.activeSlide()?.elements.find((el) => el.id === id);
+        const segments = element && 'textSegments' in element ? element.textSegments : undefined;
+        const equation = segments?.find((segment) => segment.equationXml);
+        if (host.canEdit() && equation?.equationXml) {
+            this.dialogs.openEquationEdit(id, equation.equationXml);
+            return;
+        }
+        this.editingId.set(id);
+    }
+    /** Apply a Ctrl/Cmd+B/I/U toggle from the inline editor (undoable). */
+    onTextFormat(event) {
+        const host = this.requireHost();
+        if (!host.canEdit()) {
+            return;
+        }
+        const element = host.activeSlide()?.elements.find((el) => el.id === event.id);
+        if (!element) {
+            return;
+        }
+        this.editor.updateElement(host.activeSlideIndex(), event.id, textStylePatch(element, event.updates));
+    }
+    /** Commit an inline text edit: replace the element's text (one history entry). */
+    onTextCommit(event) {
+        const host = this.requireHost();
+        this.editor.updateElement(host.activeSlideIndex(), event.id, {
+            text: event.text,
+            textSegments: [],
+        });
+        this.editingId.set(null);
+    }
+    /** Receive a completed ink stroke and append it to the active slide. */
+    onInkStrokeComplete(ink) {
+        const host = this.requireHost();
+        if (!host.canEdit()) {
+            return;
+        }
+        this.editor.addElement(host.activeSlideIndex(), ink);
+    }
+    /** Receive an eraser hit and delete the targeted ink element. */
+    onEraserHit(id) {
+        const host = this.requireHost();
+        if (!host.canEdit()) {
+            return;
+        }
+        this.editor.select([id]);
+        this.editor.deleteSelected(host.activeSlideIndex());
+    }
+    /**
+     * Handle an element press from the canvas. Additive (Shift/Ctrl) toggles
+     * membership; a plain press selects the element (keeping it selected if it
+     * already was, so a subsequent drag works).
+     */
+    onElementSelect(event) {
+        // The armed format painter intercepts the next element click: apply the
+        // copied format to the target, then disarm (no selection change).
+        if (this.formatPainter.active()) {
+            this.formatPainter.applyToTarget(event.id);
+            this.formatPainter.cancel();
+            return;
+        }
+        if (event.additive) {
+            this.editor.toggleSelect(event.id, true);
+        }
+        else if (!this.editor.isSelected(event.id)) {
+            this.editor.select([event.id]);
+        }
+    }
+    /** Empty-stage press: disarm the painter if armed, else clear the selection. */
+    onBackgroundClick() {
+        if (this.formatPainter.active()) {
+            this.formatPainter.cancel();
+            return;
+        }
+        this.editor.clearSelection();
+    }
+    /** Right-click: select the element under the cursor and open the menu. */
+    onContextMenu(event) {
+        if (event.id && !this.editor.isSelected(event.id)) {
+            this.editor.select([event.id]);
+        }
+        this.contextMenuPos.set({ x: event.x, y: event.y });
+    }
+    /** Update the active slide's background colour. */
+    onSlideBackground(event) {
+        this.editor.updateSlide(this.requireHost().activeSlideIndex(), {
+            backgroundColor: event.target.value,
+        });
+    }
+    /** Update the active slide's speaker notes. */
+    onSlideNotes(event) {
+        this.editor.updateSlide(this.requireHost().activeSlideIndex(), {
+            notes: event.target.value,
+        });
+    }
+    /** Update the active slide's speaker notes from the editable NotesPanel. */
+    onNotesUpdate(notes) {
+        this.editor.updateSlide(this.requireHost().activeSlideIndex(), { notes });
+    }
+    // ── Selection pane handlers ────────────────────────────────────────────────
+    onSelectionPaneBringForward(id) {
+        this.editor.select([id]);
+        this.editor.bringSelectedForward(this.requireHost().activeSlideIndex());
+    }
+    onSelectionPaneSendBackward(id) {
+        this.editor.select([id]);
+        this.editor.sendSelectedBackward(this.requireHost().activeSlideIndex());
+    }
+    onToggleElementHidden(id) {
+        const host = this.requireHost();
+        const el = host.activeSlide()?.elements.find((e) => e.id === id);
+        if (el) {
+            this.editor.updateElement(host.activeSlideIndex(), id, { hidden: !el.hidden });
+        }
+    }
+    /**
+     * Commit a table cell's inline text edit. Finds the table element on the
+     * active slide, rebuilds its `tableData` with the new cell text, and patches
+     * it through the editor (which records undo history).
+     */
+    onTableCellCommit(event) {
+        const host = this.requireHost();
+        if (!host.canEdit()) {
+            return;
+        }
+        const el = host.activeSlide()?.elements.find((e) => e.id === event.id);
+        if (!el || el.type !== 'table') {
+            return;
+        }
+        const updated = setCellText(el, event.commit.rowIndex, event.commit.colIndex, event.commit.text);
+        this.editor.updateElement(host.activeSlideIndex(), event.id, {
+            tableData: updated.tableData,
+        });
+    }
+    /**
+     * Persist a structural table change originating on the canvas (column / row
+     * drag-resize) as one undoable history entry.
+     */
+    onTableChange(event) {
+        const host = this.requireHost();
+        if (!host.canEdit()) {
+            return;
+        }
+        this.editor.updateElement(host.activeSlideIndex(), event.id, {
+            tableData: event.tableData,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCanvasEditingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCanvasEditingService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCanvasEditingService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * viewer-collab-cursor.service.ts: Viewer-scoped logic for the local
+ * collaboration cursor broadcast and the derived remote-cursor overlay list.
+ *
+ * Extracted from {@link PowerPointViewerComponent}: the component binds the
+ * few accessors it alone owns (the `<main>` element, zoom, canvas size, and
+ * active-slide-index) via {@link bind}. `CollaborationService` is already
+ * provided on the component, so it is injected directly rather than passed
+ * through the host.
+ *
+ * Provide it once on the viewer component (`providers: [ViewerCollabCursorService]`).
+ */
+class ViewerCollabCursorService {
+    collab = inject(CollaborationService);
+    /** Timestamp of the last cursor broadcast (throttle gate). */
+    lastCursorBroadcast = 0;
+    host = null;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    requireHost() {
+        if (!this.host) {
+            throw new Error('ViewerCollabCursorService.bind() was not called');
+        }
+        return this.host;
+    }
+    /**
+     * Remote cursors filtered to the slide the local user is viewing, so peers'
+     * cursors only appear on the shared slide (mirrors React/Vue).
+     */
+    cursors = computed(() => presenceToCursors(this.collab.presence(), this.requireHost().activeSlideIndex()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cursors" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    onPointerMove(event) {
+        if (!this.collab.active()) {
+            return;
+        }
+        const now = Date.now();
+        if (now - this.lastCursorBroadcast < BROADCAST_THROTTLE_MS) {
+            return;
+        }
+        this.lastCursorBroadcast = now;
+        const host = this.requireHost();
+        const el = host.mainElement();
+        if (!el) {
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        const zoom = host.zoom() || 1;
+        const size = host.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, host.activeSlideIndex());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCollabCursorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCollabCursorService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCollabCursorService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * viewer-collaboration-session.service.ts: Viewer-scoped state + logic for the
+ * Share (two-way collaboration) and Broadcast (one-way owner) sessions. Owns the
+ * two dialog visibility flags and the active-session room/server, derives the
+ * shareable join / follow links, and drives connect / disconnect on the
+ * {@link CollaborationService}.
+ *
+ * Extracted from {@link PowerPointViewerComponent}: the component binds the host
+ * inputs it cannot reach from a service (author name, share defaults, the
+ * template-element snapshot supplier) plus the start/stop output emitters via
+ * {@link bind}; the template reads the flags / links / defaults and invokes the
+ * handlers off the injected instance.
+ *
+ * Provide it once on the viewer component
+ * (`providers: [ViewerCollaborationSessionService]`).
+ */
+class ViewerCollaborationSessionService {
+    collab = inject(CollaborationService);
+    /** Share (collaboration) dialog visibility. */
+    showShare = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showShare" }] : /* istanbul ignore next */ []));
+    /** Broadcast dialog visibility. */
+    showBroadcast = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showBroadcast" }] : /* istanbul ignore next */ []));
+    /**
+     * Room/server of the currently active session, used to build the shareable
+     * join/follow links shown in the dialogs. Null when no session is active.
+     */
+    activeSession = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeSession" }] : /* istanbul ignore next */ []));
+    host = null;
+    /** Wire the host inputs/outputs (called once from the component constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    requireHost() {
+        if (!this.host) {
+            throw new Error('ViewerCollaborationSessionService.bind() was not called');
+        }
+        return this.host;
+    }
+    /** Browser location used to assemble share/follow URLs (omitted in SSR). */
+    browserLocation() {
+        return typeof window === 'undefined'
+            ? undefined
+            : { origin: window.location.origin, pathname: window.location.pathname };
+    }
+    /** Shareable join link for the active collaboration session. */
+    shareUrl = computed(() => {
+        const session = this.activeSession();
+        return session ? buildShareUrl(session.roomId, session.serverUrl, this.browserLocation()) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shareUrl" }] : /* istanbul ignore next */ []));
+    /** Shareable follow link for the active broadcast. */
+    broadcastViewerUrl = computed(() => {
+        const session = this.activeSession();
+        return session
+            ? buildBroadcastViewerUrl(session.roomId, session.serverUrl, this.browserLocation())
+            : '';
+    }, /* @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
+     * name pre-fills the form. Mirrors React/Vue.
+     */
+    shareDialogDefaults = computed(() => {
+        const host = this.host;
+        const defaults = host?.shareDefaults() ?? {};
+        return {
+            ...defaults,
+            userName: defaults.userName ?? host?.authorName() ?? 'You',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shareDialogDefaults" }] : /* istanbul ignore next */ []));
+    /**
+     * Connect / disconnect real-time collaboration when the host `collaboration`
+     * input changes (called from the component's effect).
+     */
+    syncHostConfig(config) {
+        if (config) {
+            this.activeSession.set({ roomId: config.roomId, serverUrl: config.serverUrl });
+            this.connectWithBaseline(config);
+        }
+        else {
+            this.collab.disconnect();
+            this.activeSession.set(null);
+        }
+    }
+    /** Start a real-time collaboration session from the share dialog config. */
+    onShareStart(config) {
+        const host = this.requireHost();
+        // Two-way collaboration: peers edit together (default `collaborator` role).
+        const collaboratorConfig = {
+            role: 'collaborator',
+            ...config,
+            userName: config.userName || (host.authorName() ?? 'You'),
+        };
+        this.activeSession.set({
+            roomId: collaboratorConfig.roomId,
+            serverUrl: collaboratorConfig.serverUrl,
+        });
+        this.connectWithBaseline(collaboratorConfig);
+        host.emitStart(collaboratorConfig);
+    }
+    onShareStop() {
+        this.collab.disconnect();
+        this.activeSession.set(null);
+        this.requireHost().emitStop();
+    }
+    /** Start broadcasting (presenter as session owner) from the broadcast config. */
+    onBroadcastStart(config) {
+        const host = this.requireHost();
+        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 });
+        this.connectWithBaseline(collabConfig);
+        host.emitStart(collabConfig);
+    }
+    onBroadcastStop() {
+        this.collab.disconnect();
+        this.activeSession.set(null);
+        this.requireHost().emitStop();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCollaborationSessionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCollaborationSessionService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerCollaborationSessionService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * viewer-extra-dialogs-helpers.ts: Pure helpers backing
  * {@link ViewerExtraDialogsComponent}. Kept framework-free (no Angular / DOM)
@@ -73141,6 +73849,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Injectable
         }] });
 
+/**
+ * viewer-document-properties.service.ts: Viewer-scoped state + logic for the
+ * Info (document properties) dialog and the hyperlink-edit dialog: their
+ * open/closed signals, the in-session core-properties override merged over
+ * the loaded document properties, and persisting an edit from either dialog.
+ *
+ * Extracted from {@link PowerPointViewerComponent}: the component binds the
+ * few accessors/emitters it alone owns (canEdit / selected-element /
+ * active-slide-index / the `propertiesChange` emitter) via {@link bind}.
+ *
+ * Provide it once on the viewer component (`providers: [ViewerDocumentPropertiesService]`).
+ */
+class ViewerDocumentPropertiesService {
+    editor = inject(EditorStateService);
+    loader = inject(LoadContentService);
+    /** Document-properties (Info) dialog visibility. */
+    showProperties = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showProperties" }] : /* istanbul ignore next */ []));
+    /** Hyperlink-edit dialog visibility. */
+    showHyperlink = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showHyperlink" }] : /* istanbul ignore next */ []));
+    /** Local overrides applied to document properties via the Info dialog. */
+    coreOverride = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "coreOverride" }] : /* istanbul ignore next */ []));
+    /** Document core properties (loaded, with any in-session edits merged in). */
+    coreProperties = computed(() => ({
+        ...(this.loader.coreProperties() ?? {}),
+        ...this.coreOverride(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "coreProperties" }] : /* istanbul ignore next */ []));
+    host = null;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    requireHost() {
+        if (!this.host) {
+            throw new Error('ViewerDocumentPropertiesService.bind() was not called');
+        }
+        return this.host;
+    }
+    /**
+     * Persist a document-properties edit from the Info dialog. Gated on
+     * `canEdit`: viewers may inspect properties but not mutate them (mirrors the
+     * comments / hyperlink edit paths).
+     */
+    onPropertiesSave(patch) {
+        const host = this.requireHost();
+        if (!host.canEdit()) {
+            this.showProperties.set(false);
+            return;
+        }
+        this.coreOverride.update((current) => ({ ...current, ...patch }));
+        host.emitPropertiesChange(patch);
+        this.showProperties.set(false);
+    }
+    /** Apply a hyperlink edit to the selected element (one history entry). */
+    onHyperlinkSave(patch) {
+        const host = this.requireHost();
+        const el = host.selectedElement();
+        if (el) {
+            this.editor.updateElement(host.activeSlideIndex(), el.id, patch);
+        }
+        this.showHyperlink.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerDocumentPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerDocumentPropertiesService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerDocumentPropertiesService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * viewer-export.service.ts: Viewer-scoped orchestration for the "render every
  * slide to the live stage and capture it" family of actions: single-slide PNG,
@@ -76505,6 +77285,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { activeSlideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSlideIndex", required: false }] }], selectedElementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedElementId", required: false }] }], filePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "filePath", required: false }] }], customShows: [{ type: i0.Input, args: [{ isSignal: true, alias: "customShows", required: false }] }], restoreContent: [{ type: i0.Output, args: ["restoreContent"] }] } });
 
+/**
+ * viewer-file-io.service.ts: Viewer-scoped state + logic for getting `.pptx`
+ * bytes in and out of the viewer: the built-in File ▸ Open override signal (a
+ * native-picker-loaded deck swapped in place ahead of the host `content`
+ * input), serialising the current deck to bytes, triggering a browser
+ * download, and resolving the loaded source bytes for collaboration's
+ * elected-writer write-back.
+ *
+ * Extracted from {@link PowerPointViewerComponent}: the component keeps the
+ * public {@link PowerPointViewerComponent.getContent} imperative-handle method
+ * (documented host API, so it cannot move off the component) as a thin
+ * delegate to {@link getContent} here. The component binds the few accessors
+ * it alone owns (canEdit / host `content` input / onOpenFile override / editor
+ * slides + template elements / the `contentChange` emitter) via {@link bind}.
+ *
+ * Provide it once on the viewer component (`providers: [ViewerFileIOService]`).
+ */
+class ViewerFileIOService {
+    loader = inject(LoadContentService);
+    exportSvc = inject(ExportService);
+    /**
+     * Built-in File ▸ Open override of the host `content` input. The native
+     * picker sets this to swap the deck in place; a fresh `content` input clears
+     * it so external reloads always win.
+     */
+    contentOverride = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentOverride" }] : /* istanbul ignore next */ []));
+    host = null;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    requireHost() {
+        if (!this.host) {
+            throw new Error('ViewerFileIOService.bind() was not called');
+        }
+        return this.host;
+    }
+    /** The currently active content: a picked-file override, else the host `content` input. */
+    activeContent() {
+        return this.contentOverride() ?? this.requireHost().content();
+    }
+    /** The loaded source `.pptx` bytes (for elected-writer write-back), if any. */
+    sourceBytes() {
+        const content = this.activeContent();
+        if (!content) {
+            return null;
+        }
+        return content instanceof Uint8Array ? content : new Uint8Array(content);
+    }
+    /**
+     * Serialise the current presentation to `.pptx` bytes. When editing, this
+     * serialises the editor's edited deck so changes persist.
+     */
+    async getContent() {
+        const host = this.requireHost();
+        const data = host.canEdit()
+            ? await this.loader.saveSlides(buildSaveSlides(host.slides(), host.templateElementsBySlideId()))
+            : await this.loader.getContent();
+        // Mirror React's imperative handle: serialising the deck also notifies the
+        // host so listeners wired to (contentChange) receive the latest bytes.
+        host.emitContentChange(data);
+        return data;
+    }
+    /**
+     * Serialise the current deck and trigger a browser download of the `.pptx`.
+     * Surfaced on the mobile toolbar so saving is reachable without the desktop
+     * ribbon's File tab.
+     */
+    async saveAsPptx() {
+        const bytes = await this.getContent();
+        this.exportSvc.savePptx(bytes, 'presentation.pptx');
+    }
+    /**
+     * File ▸ Open: host override (`onOpenFile` input) takes precedence; otherwise
+     * a built-in native picker loads the chosen presentation in place.
+     */
+    openFile() {
+        const host = this.requireHost();
+        const override = host.onOpenFile();
+        if (override) {
+            override();
+            return;
+        }
+        void (async () => {
+            const picked = await openPptxFile();
+            if (picked) {
+                this.contentOverride.set(new Uint8Array(picked.buffer));
+            }
+        })();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerFileIOService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerFileIOService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerFileIOService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * viewer-find-replace.service.ts: Viewer-scoped state + logic for the
  * find-in-slides bar and the edit-mode find-and-replace bar. Owns the two bar
@@ -76596,264 +77474,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }] });
 
 /**
- * EyeDropper colour sampler for the Angular viewer.
+ * swipe-dismiss.ts: Reusable pointer-drag-to-dismiss gesture for a docked
+ * sheet/panel that lives in normal document flow (not a fixed overlay), so a
+ * downward swipe is surfaced as a live drag offset (applied via a CSS
+ * transform) rather than relying on a native overlay's dismiss gesture.
  *
- * Prefers the native browser EyeDropper API (Chrome 95+ / Edge 95+). For
- * browsers without it (Firefox, Safari) a DOM-sampling fallback reads the
- * colour under the pointer via `elementFromPoint` + `getComputedStyle`, so the
- * eyedropper still works everywhere. Mirrors the React viewer's
- * `viewer/utils/eyedropper.ts`.
- */
-/**
- * Returns true when the native EyeDropper API is available in this browser.
- * Guards against SSR / headless environments without `window`.
- */
-function eyedropperAvailable() {
-    return typeof window !== 'undefined' && 'EyeDropper' in window;
-}
-/**
- * Open the native EyeDropper and return the picked sRGB hex colour string
- * (e.g. `"#a3b4c5"`), or `null` when the user cancels or the API is absent.
+ * Shared by the mobile notes sheet and the mobile inspector host in
+ * {@link PowerPointViewerComponent}, which both need identical drag-to-dismiss
+ * behaviour, differing only in what happens once the drag clears the
+ * threshold (their own `onDismiss` callback).
  */
-async function openNativeEyeDropper() {
-    if (!eyedropperAvailable()) {
-        return null;
-    }
-    try {
-        const EyeDropperClass = window['EyeDropper'];
-        const dropper = new EyeDropperClass();
-        const result = await dropper.open();
-        return result.sRGBHex;
-    }
-    catch {
-        // User cancelled (AbortError) or unexpected error: treat as no-op
-        return null;
-    }
-}
-// ---------------------------------------------------------------------------
-// Fallback sampling (Firefox / Safari)
-// ---------------------------------------------------------------------------
-function toHex(r, g, b) {
-    const h = (n) => n.toString(16).padStart(2, '0');
-    return `#${h(r)}${h(g)}${h(b)}`;
-}
-function parseRgbaString(str) {
-    const match = str.match(/rgba?\(\s*(?<r>\d+)\s*,\s*(?<g>\d+)\s*,\s*(?<b>\d+)/u);
-    if (!match?.groups) {
-        return null;
-    }
-    const r = parseInt(match.groups.r, 10);
-    const g = parseInt(match.groups.g, 10);
-    const b = parseInt(match.groups.b, 10);
-    return { r, g, b, hex: toHex(r, g, b) };
-}
+/** Downward drag distance (px) past which releasing the pointer dismisses. Matches `pptx-mobile-sheet`'s DISMISS_THRESHOLD. */
+const DISMISS_THRESHOLD_PX = 120;
 /**
- * Sample the colour at a client-space point by inspecting the topmost element's
- * computed paint. Tries, in order: a real `<canvas>` pixel read (sharp for
- * rasterised content), then the element's `background-color`, SVG `fill`, and
- * finally text `color`. Returns `null` when nothing paintable is found.
- *
- * This is the DOM fallback used when the native EyeDropper API is unavailable;
- * it needs no canvas plumbing, so it works against the live slide DOM.
+ * Create an independent swipe-to-dismiss drag tracker. `onDismiss` fires once,
+ * on pointer-up, when the downward drag exceeded {@link DISMISS_THRESHOLD_PX}.
  */
-function sampleColorFromSlide(clientX, clientY) {
-    const target = typeof document === 'undefined' ? null : document.elementFromPoint(clientX, clientY);
-    if (!(target instanceof Element)) {
-        return null;
-    }
-    // Direct pixel read when the pointer is over a <canvas> (untainted only).
-    const canvas = target instanceof HTMLCanvasElement ? target : target.closest('canvas');
-    if (canvas instanceof HTMLCanvasElement) {
-        try {
-            const ctx = canvas.getContext('2d');
-            if (ctx) {
-                const rect = canvas.getBoundingClientRect();
-                const sx = Math.round((clientX - rect.left) * (canvas.width / canvas.clientWidth));
-                const sy = Math.round((clientY - rect.top) * (canvas.height / canvas.clientHeight));
-                const pixel = ctx.getImageData(sx, sy, 1, 1).data;
-                return { r: pixel[0], g: pixel[1], b: pixel[2], hex: toHex(pixel[0], pixel[1], pixel[2]) };
+function createSwipeDismissDrag(onDismiss) {
+    const dragYSignal = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragYSignal" }] : /* istanbul ignore next */ []));
+    const draggingSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draggingSignal" }] : /* istanbul ignore next */ []));
+    let startY = null;
+    return {
+        dragY: dragYSignal,
+        dragging: draggingSignal,
+        onPointerDown(event) {
+            startY = event.clientY;
+            draggingSignal.set(true);
+            event.target.setPointerCapture?.(event.pointerId);
+        },
+        onPointerMove(event) {
+            if (startY === null) {
+                return;
             }
-        }
-        catch {
-            // Cross-origin / tainted canvas: fall through to computed-style sampling.
-        }
-    }
-    const computed = getComputedStyle(target);
-    const bg = computed.backgroundColor;
-    if (bg && bg !== 'transparent' && bg !== 'rgba(0, 0, 0, 0)') {
-        const parsed = parseRgbaString(bg);
-        if (parsed) {
-            return parsed;
-        }
-    }
-    const fill = computed.fill;
-    if (fill && fill !== 'none' && fill !== 'transparent') {
-        const parsed = parseRgbaString(fill);
-        if (parsed) {
-            return parsed;
-        }
-    }
-    return computed.color ? parseRgbaString(computed.color) : null;
-}
-/**
- * Run the eyedropper fallback: arm a one-shot pointer listener and resolve with
- * the hex colour of the next click (or `null` if the user presses Escape). Used
- * only when {@link eyedropperAvailable} is false. The caller is responsible for
- * any "armed" UI affordance; this just manages the listeners.
- */
-function pickColorByClickFallback() {
-    if (typeof document === 'undefined') {
-        return Promise.resolve(null);
-    }
-    return new Promise((resolve) => {
-        const cleanup = () => {
-            document.removeEventListener('pointerdown', onPointerDown, true);
-            document.removeEventListener('keydown', onKeyDown, true);
-        };
-        const onPointerDown = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            cleanup();
-            const sample = sampleColorFromSlide(event.clientX, event.clientY);
-            resolve(sample ? sample.hex : null);
-        };
-        const onKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                cleanup();
-                resolve(null);
+            dragYSignal.set(Math.max(0, event.clientY - startY));
+        },
+        onPointerUp(event) {
+            if (startY === null) {
+                return;
             }
-        };
-        document.addEventListener('pointerdown', onPointerDown, true);
-        document.addEventListener('keydown', onKeyDown, true);
-    });
+            const delta = event.clientY - startY;
+            startY = null;
+            draggingSignal.set(false);
+            event.target.releasePointerCapture?.(event.pointerId);
+            if (delta > DISMISS_THRESHOLD_PX) {
+                onDismiss();
+            }
+            dragYSignal.set(0);
+        },
+    };
 }
 
 /**
- * Thin re-export shim → vendored `pptx-viewer-shared`.
- *
- * The format-painter copy/apply logic was consolidated into
- * `pptx-viewer-shared` (`render/format-painter.ts`), shared by every binding.
- * This shim keeps the historical Angular import path for the component and its
- * tests.
- */
-
-/**
- * viewer-format-painter.service.ts: Viewer-scoped state + logic for the format
- * painter (copy one element's shape/text style onto the next clicked element)
- * and the eyedropper (sample a screen colour onto the selected shape's fill,
- * else copy it to the clipboard). Both are "apply a style to an element"
- * interactions keyed off the current selection.
+ * viewer-inspector-panel.service.ts: Viewer-scoped state + logic for the
+ * single right-docked inspector host: which explicit tool panel (comments /
+ * accessibility / signatures / selection) is toggled on, the derived "what
+ * should the host actually show" precedence (explicit panel → element →
+ * slide default), its mobile-only swipe-to-dismiss drag, and the accessible
+ * label per shown content.
  *
  * Extracted from {@link PowerPointViewerComponent}: the component binds the
- * selection / active-slide accessors via {@link bind}; the template reads the
- * armed/active flags and invokes the toggles, and the component's selection and
- * keyboard handlers consult {@link active} / call {@link applyToTarget} /
- * {@link cancel}.
+ * accessors it alone owns (canEdit / selected-element / active-slide) via
+ * {@link bind}; the template reads the signals/computeds off the injected
+ * instance directly (same pattern as `session`/`xport`).
  *
- * Provide it once on the viewer component (`providers: [ViewerFormatPainterService]`).
+ * Provide it once on the viewer component (`providers: [ViewerInspectorPanelService]`).
  */
-class ViewerFormatPainterService {
-    editor = inject(EditorStateService);
-    /** True while the painter is armed (next element click applies the copied format). */
-    active = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    /** Whether the eyedropper is currently active. */
-    eyedropperActive = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "eyedropperActive" }] : /* istanbul ignore next */ []));
-    /** Format copied from the source element when the painter was armed. */
-    copiedFormat = null;
+class ViewerInspectorPanelService {
+    mobile = inject(IsMobileService);
+    /** Active right-docked tool panel (comments / accessibility / selection), or null. */
+    activePanel = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePanel" }] : /* istanbul ignore next */ []));
+    /** True once the user swiped the inspector away on mobile (until reopened). */
+    mobileInspectorHidden = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileInspectorHidden" }] : /* istanbul ignore next */ []));
+    /**
+     * Swipe-to-dismiss drag for the inspector host. The host docks in-flow below
+     * the canvas on mobile (same keyboard-reachability reason as the notes
+     * sheet), so the gesture is wired here rather than via a fixed-overlay
+     * dismiss. Clearing the past-threshold drag also closes any open tool panel.
+     */
+    inspectorDrag = createSwipeDismissDrag(() => {
+        this.mobileInspectorHidden.set(true);
+        this.activePanel.set(null);
+    });
     host = null;
-    /** Wire the host selection/slide accessors (called once from the constructor). */
+    /** Wire the host accessors (called once from the component constructor). */
     bind(host) {
         this.host = host;
     }
     requireHost() {
         if (!this.host) {
-            throw new Error('ViewerFormatPainterService.bind() was not called');
+            throw new Error('ViewerInspectorPanelService.bind() was not called');
         }
         return this.host;
     }
-    /** Whether the painter can be armed: exactly one selected element with copyable format. */
-    canActivate = computed(() => hasCopyableFormat(this.host?.selectedElement() ?? null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canActivate" }] : /* istanbul ignore next */ []));
-    /** Toggle the format painter: arm from the current selection, or disarm. */
-    toggle() {
-        if (this.active()) {
-            this.cancel();
-            return;
-        }
-        const source = this.requireHost().selectedElement();
-        if (!source || !hasCopyableFormat(source)) {
-            return;
-        }
-        this.copiedFormat = copyFormatFromElement(source);
-        this.active.set(true);
-    }
-    /** Disarm the painter and drop the copied format. */
-    cancel() {
-        this.active.set(false);
-        this.copiedFormat = null;
-    }
-    /** Apply the copied format to a target element (shape/text style only; one history entry). */
-    applyToTarget(id) {
-        const format = this.copiedFormat;
+    /**
+     * Which panel the single inspector host should show, applying the original
+     * first-match precedence (explicit tool panels → element → slide default).
+     * `accessibility`/`signatures` render regardless of edit mode; the rest need
+     * `canEdit`.
+     */
+    inspectorContent = computed(() => {
         const host = this.requireHost();
-        const target = host.findActiveElement(id);
-        if (!format || !target) {
-            return;
+        const panel = this.activePanel();
+        if (panel === 'accessibility') {
+            return 'accessibility';
         }
-        const updated = applyFormatToElement(target, format);
-        const patch = {};
-        if (format.shapeStyle && updated['shapeStyle'] !== undefined) {
-            patch['shapeStyle'] = updated['shapeStyle'];
+        if (panel === 'signatures') {
+            return 'signatures';
         }
-        if (format.textStyle && updated['textStyle'] !== undefined) {
-            patch['textStyle'] = updated['textStyle'];
+        if (!host.canEdit()) {
+            return null;
         }
-        if (Object.keys(patch).length > 0) {
-            this.editor.updateElement(host.activeSlideIndex(), id, patch);
+        if (panel === 'comments') {
+            return 'comments';
         }
-    }
-    /**
-     * Activate the eyedropper to pick a colour from the screen. Uses the native
-     * EyeDropper API where available (Chrome/Edge); on Firefox/Safari it falls
-     * back to a one-shot click that samples the slide DOM under the pointer.
-     * When a shape/text/connector/image element is selected, applies the colour
-     * to its fill; otherwise copies it to the clipboard. No-ops when the user
-     * cancels (Escape) or nothing paintable is under the pointer.
-     */
-    async toggleEyedropper() {
-        this.eyedropperActive.set(true);
-        try {
-            const color = eyedropperAvailable()
-                ? await openNativeEyeDropper()
-                : await pickColorByClickFallback();
-            if (color) {
-                await this.applyEyedropperColor(color);
-            }
+        if (panel === 'selection') {
+            return 'selection';
         }
-        finally {
-            this.eyedropperActive.set(false);
+        if (host.selectedElement()) {
+            return 'element';
         }
-    }
-    /** Apply a picked colour to the selected shape's fill, else copy to clipboard. */
-    async applyEyedropperColor(color) {
-        const host = this.requireHost();
-        const sel = host.selectedElement();
-        const idx = host.activeSlideIndex();
-        if (sel !== null && hasShapeProperties(sel)) {
-            this.editor.updateElement(idx, sel.id, {
-                shapeStyle: { ...sel.shapeStyle, fillColor: color },
-            });
+        if (host.activeSlide()) {
+            return 'slide';
         }
-        else {
-            await navigator.clipboard.writeText(color).catch(() => undefined);
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inspectorContent" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the right-docked inspector is showing the format panel (element or
+     * slide properties). Drives the top-bar inspector-toggle active state.
+     */
+    inspectorPaneOpen = computed(() => {
+        const content = this.inspectorContent();
+        return content === 'element' || content === 'slide';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inspectorPaneOpen" }] : /* istanbul ignore next */ []));
+    /** Inspector content, but null on mobile once the user has swiped it away. */
+    visibleInspectorKind = computed(() => this.mobile.isMobile() && this.mobileInspectorHidden() ? null : this.inspectorContent(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleInspectorKind" }] : /* istanbul ignore next */ []));
+    /** Accessible-label translation key for the inspector host, by active content. */
+    inspectorLabel = computed(() => {
+        switch (this.inspectorContent()) {
+            case 'accessibility':
+                return 'pptx.accessibility.title';
+            case 'signatures':
+                return 'pptx.viewer.digitalSignatures';
+            case 'comments':
+                return 'pptx.toolbar.comments';
+            case 'selection':
+                return 'pptx.selectionPane.title';
+            case 'element':
+                return 'pptx.viewer.elementProperties';
+            case 'slide':
+                return 'pptx.viewer.slideProperties';
+            default:
+                return '';
         }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inspectorLabel" }] : /* istanbul ignore next */ []));
+    /** Toggle a right-docked tool panel (clicking the active one closes it). */
+    togglePanel(panel) {
+        this.activePanel.update((current) => (current === panel ? null : panel));
+        // Tapping a panel button re-opens the host even after a swipe-dismiss.
+        this.mobileInspectorHidden.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerFormatPainterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerFormatPainterService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerInspectorPanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerInspectorPanelService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerFormatPainterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerInspectorPanelService, decorators: [{
             type: Injectable
         }] });
 
@@ -76984,25 +77775,347 @@ class ViewerKeyboardService {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerKeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerKeyboardService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerKeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerKeyboardService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerKeyboardService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * viewer-mobile-sheet.service.ts: Viewer-scoped state for the mobile-only
+ * chrome: which bottom-sheet ('slides' | 'menu') is open, the speaker-notes
+ * strip visibility + its swipe-to-dismiss drag, and the mobile "Insert" quick
+ * action (drop a text box on the active slide).
+ *
+ * Extracted from {@link PowerPointViewerComponent}: the component binds the
+ * accessors it alone owns (canEdit / slide count / active-slide-index) via
+ * {@link bind}; the template reads the signals / invokes the handlers off the
+ * injected instance directly (same pattern as `session`/`xport`).
+ *
+ * Provide it once on the viewer component (`providers: [ViewerMobileSheetService]`).
+ */
+class ViewerMobileSheetService {
+    editor = inject(EditorStateService);
+    /** Open mobile bottom-sheet (slides / menu), or null. */
+    mobileSheet = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileSheet" }] : /* istanbul ignore next */ []));
+    /** Speaker-notes strip visibility. */
+    showNotes = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showNotes" }] : /* istanbul ignore next */ []));
+    /**
+     * Swipe-to-dismiss drag for the notes sheet. The sheet stays in normal flow
+     * (see template/CSS notes), so the drag gesture is wired here rather than
+     * via a fixed-overlay dismiss.
+     */
+    notesDrag = createSwipeDismissDrag(() => this.showNotes.set(false));
+    host = null;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    requireHost() {
+        if (!this.host) {
+            throw new Error('ViewerMobileSheetService.bind() was not called');
+        }
+        return this.host;
+    }
+    /** Toggle the speaker-notes strip. */
+    toggleNotes() {
+        this.showNotes.update((v) => !v);
+    }
+    /**
+     * Mobile quick-insert: drop a text box on the active slide. Mirrors React's
+     * mobile bottom-bar "Insert" slot (a text box is the most common starter
+     * element on a phone; the full Insert section lives in the top-bar menu).
+     */
+    onMobileInsert() {
+        const host = this.requireHost();
+        if (!host.canEdit() || host.slideCount() === 0) {
+            return;
+        }
+        // Close any open mobile sheet so the new element is visible on the canvas.
+        this.mobileSheet.set(null);
+        this.editor.addElement(host.activeSlideIndex(), newTextElement());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerMobileSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerMobileSheetService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerMobileSheetService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * viewer-presentation-mode.service.ts: Viewer-scoped state + logic for the
+ * fullscreen slideshow and presenter (speaker) view overlays: their visibility
+ * flags, the presenter-view elapsed-timer start time, opening/closing a
+ * separate audience window, mapping a (possibly custom-show-filtered)
+ * presentation-overlay index back to the full-deck active slide, and the
+ * keep/discard-annotations prompt shown when a slideshow with ink on it exits.
+ *
+ * Extracted from {@link PowerPointViewerComponent}: the component binds the few
+ * accessors it alone owns (active-slide-index get/set, the editing-id clear,
+ * the source bytes for the audience hand-off, canEdit, and the keep-annotations
+ * prompt trigger) via {@link bind}; the template reads the signals / invokes the
+ * handlers off the injected instance directly (same pattern as `session`/`xport`).
+ *
+ * Provide it once on the viewer component (`providers: [ViewerPresentationModeService]`).
+ */
+class ViewerPresentationModeService {
+    loader = inject(LoadContentService);
+    presenterWindow = inject(PresenterWindowService);
+    customShowsCtl = inject(ViewerCustomShowsService);
+    /** Fullscreen presentation-mode overlay visibility. */
+    presenting = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presenting" }] : /* istanbul ignore next */ []));
+    /** Presenter-view (speaker) overlay visibility. */
+    presentingPresenter = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presentingPresenter" }] : /* istanbul ignore next */ []));
+    /** Epoch ms when presenter view started (drives the elapsed timer). */
+    presenterStartTime = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presenterStartTime" }] : /* istanbul ignore next */ []));
+    host = null;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host) {
+        this.host = host;
+    }
+    requireHost() {
+        if (!this.host) {
+            throw new Error('ViewerPresentationModeService.bind() was not called');
+        }
+        return this.host;
+    }
+    /** Open the fullscreen presentation overlay from the current slide. */
+    present() {
+        const host = this.requireHost();
+        if (host.slideCount() > 0) {
+            // Deselect first so no edit chrome (selection outline / resize + rotate
+            // "Adjust shape" handles) leaks over the slideshow.
+            host.clearSelection();
+            host.clearEditing();
+            this.presenting.set(true);
+        }
+    }
+    /**
+     * Map a presentation-overlay index back to the full-deck `activeSlideIndex`.
+     * The overlay's index is relative to the (possibly custom-show-filtered)
+     * presentation slides, so resolve by slide id to keep the editor selection
+     * correct when the show closes.
+     */
+    onPresentationIndexChange(index) {
+        const host = this.requireHost();
+        const target = this.customShowsCtl.presentationSlides()[index];
+        if (!target) {
+            return;
+        }
+        const fullIndex = this.loader.slides().findIndex((s) => s.id === target.id);
+        host.setActiveSlideIndex(fullIndex >= 0 ? fullIndex : index);
+    }
+    /**
+     * Open a separate audience tab and hand off the deck via the shared
+     * IndexedDB store. Mirrors React's presenter "open audience window".
+     */
+    openAudienceWindow() {
+        const host = this.requireHost();
+        this.presenterWindow.openAudienceWindow(host.sourceContent(), host.activeSlideIndex());
+    }
+    /** Open the presenter (speaker) view: current+next slide, notes, timer. */
+    presentPresenter() {
+        const host = this.requireHost();
+        if (host.slideCount() > 0) {
+            this.presenterStartTime.set(Date.now());
+            this.presentingPresenter.set(true);
+        }
+    }
+    /** Close the presenter view (and any audience overlay/window it opened). */
+    exitPresenter() {
+        this.presentingPresenter.set(false);
+        this.presenting.set(false);
+        this.presenterWindow.closeAudienceWindow();
+    }
+    /** Presentation exited with ink on it: offer the keep/discard prompt. */
+    onPresentationAnnotationsExit(map) {
+        const host = this.requireHost();
+        if (host.canEdit()) {
+            host.promptKeepAnnotations(map);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerPresentationModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerPresentationModeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerPresentationModeService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * viewer-theme-gallery.service.ts: Viewer-scoped state + logic for the theme
+ * gallery overlay (Design ▸ Browse Themes): its open/closed signal, the loaded
+ * deck's active theme name (for the gallery's check-mark), and applying a
+ * built-in preset to the whole deck.
+ *
+ * Extracted from {@link PowerPointViewerComponent}. Unlike most of the other
+ * extracted viewer-*.service.ts controllers this one needs no `bind()`: it
+ * only depends on other already-provided services (`EditorStateService`,
+ * `LoadContentService`), so it injects them directly.
+ *
+ * Provide it once on the viewer component (`providers: [ViewerThemeGalleryService]`).
+ */
+class ViewerThemeGalleryService {
+    editor = inject(EditorStateService);
+    loader = inject(LoadContentService);
+    /** Whether the theme-gallery overlay is visible (Design → Browse Themes). */
+    showThemeGallery = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showThemeGallery" }] : /* istanbul ignore next */ []));
+    /** The `name` property of the loaded deck's theme (for check-mark in gallery). */
+    activeThemeName = computed(() => this.loader.theme()?.name, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeThemeName" }] : /* istanbul ignore next */ []));
+    /**
+     * Apply a built-in theme preset to the whole deck.
+     *
+     * Mirrors Vue's `applyThemePreset()`: re-resolves slide colours via core's
+     * pure `applyThemeToData`, then writes the updated slides + theme metadata
+     * into `EditorStateService` as a single undoable entry. Also refreshes the
+     * `loader.themeColorMap` so subsequent theme switches start from the correct
+     * baseline.
+     */
+    applyThemePreset(preset) {
+        const currentSlides = this.editor.slides();
+        const result = applyThemeToData({
+            slides: [...currentSlides],
+            theme: this.loader.theme() ?? {},
+            themeColorMap: this.loader.themeColorMap() ?? {},
+        }, preset.colorScheme, preset.fontScheme, preset.name);
+        // Write slides back through the editor (records undo history).
+        this.editor.applyReplacement(result.slides, `Apply theme "${preset.name}"`);
+        // Update the loader's theme signals so the check-mark and future switches are correct.
+        this.loader.theme.set(result.theme);
+        this.loader.themeColorMap.set(result.themeColorMap);
+        this.showThemeGallery.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerThemeGalleryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerThemeGalleryService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerThemeGalleryService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * viewer-zoom.service.ts: Viewer-scoped zoom-level state for the main editing
+ * canvas (not the auto-fit scale, which stays internal to `SlideCanvasComponent`).
+ *
+ * Extracted from {@link PowerPointViewerComponent}: the ribbon/status-bar zoom
+ * controls and the pinch-to-zoom touch gesture all read/write this one signal.
+ *
+ * Provide it once on the viewer component (`providers: [ViewerZoomService]`).
+ */
+const ZOOM_STEP = 0.1;
+const ZOOM_MIN = 0.2;
+const ZOOM_MAX = 3;
+class ViewerZoomService {
+    /** Current zoom multiplier applied to the main slide canvas (1 = 100%). */
+    zoom = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    /** {@link zoom} rounded to a whole percentage for display. */
+    zoomPercent = computed(() => Math.round(this.zoom() * 100), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomPercent" }] : /* istanbul ignore next */ []));
+    zoomIn() {
+        this.zoom.set(Math.min(ZOOM_MAX, Number((this.zoom() + ZOOM_STEP).toFixed(2))));
+    }
+    zoomOut() {
+        this.zoom.set(Math.max(ZOOM_MIN, Number((this.zoom() - ZOOM_STEP).toFixed(2))));
+    }
+    zoomReset() {
+        this.zoom.set(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerZoomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerZoomService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerZoomService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * viewer-touch-gestures.service.ts: Wires the framework-agnostic touch-gesture
+ * recogniser ({@link attachTouchGestures}) to the main canvas host. Mirrors
+ * React's `useTouchGestures` wiring:
+ *   - pinch-to-zoom always updates {@link ViewerZoomService}'s zoom signal
+ *     (clamped to the viewer range), with `preventDefault()` on the pinch path
+ *     to suppress the browser's native pinch-zoom;
+ *   - horizontal swipe navigates slides, but only when editing is off
+ *     (`!canEdit()`): in edit mode single-finger gestures belong to element
+ *     manipulation (move/resize/rotate), so we never hijack them. The large
+ *     ‹ › buttons remain available for explicit navigation in all modes;
+ *   - long-press in edit mode opens the editor context menu at the press point
+ *     for the current selection (mirrors React's onLongPress path).
+ *
+ * Extracted from {@link PowerPointViewerComponent}: the component calls
+ * {@link setup} once from its constructor with the `<main>` element accessor and
+ * the mode/navigation accessors the callbacks gate on. The recogniser's swipe/
+ * long-press callbacks check the live accessors, so a single attach handles
+ * every mode without re-binding.
+ *
+ * Provide it once on the viewer component (`providers: [ViewerTouchGesturesService]`).
+ */
+class ViewerTouchGesturesService {
+    zoomSvc = inject(ViewerZoomService);
+    destroyRef = inject(DestroyRef);
+    /**
+     * Attach the recogniser to `mainEl()`'s element once it is in the DOM
+     * (called once from the host component's constructor).
+     */
+    setup(mainEl, host) {
+        afterNextRender(() => {
+            const el = mainEl();
+            if (!el) {
+                return;
+            }
+            const teardown = attachTouchGestures(el, {
+                getScale: () => this.zoomSvc.zoom(),
+                callbacks: {
+                    onPinchZoom: (newScale) => this.zoomSvc.zoom.set(newScale),
+                    onSwipe: (direction) => {
+                        // Edit mode: leave single-finger gestures to element manipulation.
+                        if (host.canEdit()) {
+                            return;
+                        }
+                        // direction 1 = swipe right (previous), -1 = swipe left (next).
+                        if (direction === 1) {
+                            host.goPrev();
+                        }
+                        else {
+                            host.goNext();
+                        }
+                    },
+                    onLongPress: (x, y) => {
+                        if (!host.canEdit() || host.presenting()) {
+                            return;
+                        }
+                        const selected = host.selectedElement();
+                        if (!selected) {
+                            return;
+                        }
+                        host.setContextMenuPos({ x, y });
+                    },
+                },
+            });
+            this.destroyRef.onDestroy(teardown);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerTouchGesturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerTouchGesturesService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerKeyboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ViewerTouchGesturesService, decorators: [{
             type: Injectable
         }] });
 
-const ZOOM_STEP = 0.1;
-const ZOOM_MIN = 0.2;
-const ZOOM_MAX = 3;
 /**
  * PowerPointViewerComponent: Angular port of the React `PowerPointViewer.tsx`
  * and Vue `PowerPointViewer.vue`.
  *
  * Top-level orchestrator that loads `.pptx` bytes and renders the slides with
- * navigation and zoom. This is the viewer-first milestone of the port: the
- * React component additionally composes a full editor (toolbar, inspector
- * panels, dialogs, presentation mode, collaboration, export). The roadmap and
- * per-area status live in `packages/angular/PORTING.md`.
+ * navigation and zoom, composing the full editor (toolbar, inspector panels,
+ * dialogs, presentation mode, collaboration, export) like its React and Vue
+ * counterparts.
  *
  * Conventions vs. React/Vue:
  *  - React `forwardRef` handle / Vue `defineExpose` → public {@link getContent}
@@ -77082,7 +78195,6 @@ class PowerPointViewerComponent {
     /** Fired when the collaboration/broadcast session stops. Mirrors React/Vue. */
     stopCollaboration = output();
     loader = inject(LoadContentService);
-    exportSvc = inject(ExportService);
     editor = inject(EditorStateService);
     fonts = inject(EmbeddedFontsService);
     collab = inject(CollaborationService);
@@ -77100,6 +78212,16 @@ class PowerPointViewerComponent {
     session = inject(ViewerCollaborationSessionService);
     formatPainter = inject(ViewerFormatPainterService);
     keyboard = inject(ViewerKeyboardService);
+    zoomSvc = inject(ViewerZoomService);
+    touchGestures = inject(ViewerTouchGesturesService);
+    presentationMode = inject(ViewerPresentationModeService);
+    mobileSheetSvc = inject(ViewerMobileSheetService);
+    inspectorPanel = inject(ViewerInspectorPanelService);
+    fileIO = inject(ViewerFileIOService);
+    themeGallery = inject(ViewerThemeGalleryService);
+    canvasEditing = inject(ViewerCanvasEditingService);
+    collabCursor = inject(ViewerCollabCursorService);
+    docProperties = inject(ViewerDocumentPropertiesService);
     /** Handle on the secondary-dialog host (keep-annotations prompt). */
     extraDialogs = viewChild(ViewerExtraDialogsComponent, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "extraDialogs" }] : /* istanbul ignore next */ []));
@@ -77146,36 +78268,9 @@ class PowerPointViewerComponent {
     ...(ngDevMode ? [{ debugName: "activeTemplateElements" }] : /* istanbul ignore next */ []));
     rootStyle = computed(() => themeStyle(this.theme()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rootStyle" }] : /* istanbul ignore next */ []));
-    zoom = signal(1, /* @ts-ignore */
-    ...(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 */ []));
-    /** Presenter-view (speaker) overlay visibility. */
-    presentingPresenter = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "presentingPresenter" }] : /* istanbul ignore next */ []));
-    /** Epoch ms when presenter view started (drives the elapsed timer). */
-    presenterStartTime = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "presenterStartTime" }] : /* istanbul ignore next */ []));
     /** Slide-sorter grid overlay visibility. */
     showSorter = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showSorter" }] : /* istanbul ignore next */ []));
-    /** Open mobile bottom-sheet (slides / menu), or null. */
-    mobileSheet = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileSheet" }] : /* istanbul ignore next */ []));
-    /** Speaker-notes strip visibility. */
-    showNotes = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showNotes" }] : /* istanbul ignore next */ []));
     /** Whether the left slides panel is collapsed (top-bar sidebar toggle). */
     slidesPanelCollapsed = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "slidesPanelCollapsed" }] : /* istanbul ignore next */ []));
@@ -77189,73 +78284,6 @@ class PowerPointViewerComponent {
     /** Active ink stroke width in stage pixels. */
     activeDrawWidth = signal(3, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeDrawWidth" }] : /* istanbul ignore next */ []));
-    /** Active right-docked tool panel (comments / accessibility / selection), or null. */
-    activePanel = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activePanel" }] : /* istanbul ignore next */ []));
-    /**
-     * Which panel the single inspector host should show, applying the original
-     * first-match precedence (explicit tool panels → element → slide default).
-     * `accessibility`/`signatures` render regardless of edit mode; the rest need
-     * `canEdit`.
-     */
-    inspectorContent = computed(() => {
-        const panel = this.activePanel();
-        if (panel === 'accessibility') {
-            return 'accessibility';
-        }
-        if (panel === 'signatures') {
-            return 'signatures';
-        }
-        if (!this.canEdit()) {
-            return null;
-        }
-        if (panel === 'comments') {
-            return 'comments';
-        }
-        if (panel === 'selection') {
-            return 'selection';
-        }
-        if (this.selectedElement()) {
-            return 'element';
-        }
-        if (this.activeSlide()) {
-            return 'slide';
-        }
-        return null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inspectorContent" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the right-docked inspector is showing the format panel (element or
-     * slide properties). Drives the top-bar inspector-toggle active state.
-     */
-    inspectorPaneOpen = computed(() => {
-        const content = this.inspectorContent();
-        return content === 'element' || content === 'slide';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inspectorPaneOpen" }] : /* istanbul ignore next */ []));
-    /** Inspector content, but null on mobile once the user has swiped it away. */
-    visibleInspectorKind = computed(() => this.mobile.isMobile() && this.mobileInspectorHidden() ? null : this.inspectorContent(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleInspectorKind" }] : /* istanbul ignore next */ []));
-    /** Accessible-label translation key for the inspector host, by active content. */
-    inspectorLabel = computed(() => {
-        switch (this.inspectorContent()) {
-            case 'accessibility':
-                return 'pptx.accessibility.title';
-            case 'signatures':
-                return 'pptx.viewer.digitalSignatures';
-            case 'comments':
-                return 'pptx.toolbar.comments';
-            case 'selection':
-                return 'pptx.selectionPane.title';
-            case 'element':
-                return 'pptx.viewer.elementProperties';
-            case 'slide':
-                return 'pptx.viewer.slideProperties';
-            default:
-                return '';
-        }
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inspectorLabel" }] : /* istanbul ignore next */ []));
     /**
      * Which mobile bottom-bar slot is currently "active" (highlighted). The
      * comments panel maps to the Comments slot; an open notes strip maps to
@@ -77263,13 +78291,13 @@ class PowerPointViewerComponent {
      * selected the inspector (Format) is showing inline so it maps to inspector.
      */
     mobileBarSheet = computed(() => {
-        if (this.mobileSheet() === 'slides') {
+        if (this.mobileSheetSvc.mobileSheet() === 'slides') {
             return 'slides';
         }
-        if (this.activePanel() === 'comments') {
+        if (this.inspectorPanel.activePanel() === 'comments') {
             return 'comments';
         }
-        if (this.showNotes()) {
+        if (this.mobileSheetSvc.showNotes()) {
             return 'notes';
         }
         if (this.selectedElement()) {
@@ -77278,30 +78306,9 @@ class PowerPointViewerComponent {
         return null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mobileBarSheet" }] : /* istanbul ignore next */ []));
-    /** Document-properties (Info) dialog visibility. */
-    showProperties = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showProperties" }] : /* istanbul ignore next */ []));
-    /** Hyperlink-edit dialog visibility. */
-    showHyperlink = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showHyperlink" }] : /* istanbul ignore next */ []));
-    /** Local overrides applied to document properties via the Info dialog. */
-    coreOverride = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "coreOverride" }] : /* istanbul ignore next */ []));
     /** Comments on the active slide. */
     activeComments = computed(() => this.activeSlide()?.comments ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeComments" }] : /* istanbul ignore next */ []));
-    /** Document core properties (loaded, with any in-session edits merged in). */
-    coreProperties = computed(() => ({
-        ...(this.loader.coreProperties() ?? {}),
-        ...this.coreOverride(),
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "coreProperties" }] : /* istanbul ignore next */ []));
-    /** Open editor context-menu position (client coords), or null. */
-    contextMenuPos = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contextMenuPos" }] : /* istanbul ignore next */ []));
-    /** Id of the element being inline text-edited, or null. */
-    editingId = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "editingId" }] : /* istanbul ignore next */ []));
     /** Whether the dot-grid overlay is visible on the editor canvas. */
     showGrid = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showGrid" }] : /* istanbul ignore next */ []));
@@ -77314,15 +78321,9 @@ class PowerPointViewerComponent {
     /** Whether snap-to-grid is active on the editor canvas. */
     snapToGrid = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "snapToGrid" }] : /* istanbul ignore next */ []));
-    /** Whether the theme-gallery overlay is visible (Design → Browse Themes). */
-    showThemeGallery = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showThemeGallery" }] : /* istanbul ignore next */ []));
     /** Whether the Insert SmartArt gallery dialog is open. */
     showSmartArtInsert = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showSmartArtInsert" }] : /* istanbul ignore next */ []));
-    /** The `name` property of the loaded deck's theme (for check-mark in gallery). */
-    activeThemeName = computed(() => this.loader.theme()?.name, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeThemeName" }] : /* istanbul ignore next */ []));
     /**
      * Stable, always-truthy key for the slide-properties form. Changes only when
      * the active slide changes, so the `@if` recreates (and reseeds) the
@@ -77345,13 +78346,6 @@ class PowerPointViewerComponent {
             null);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedElement" }] : /* istanbul ignore next */ []));
-    /**
-     * Built-in File ▸ Open override of the `content` input. The native picker
-     * sets this to swap the deck in place; a fresh `content` input clears it so
-     * external reloads always win.
-     */
-    contentOverride = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentOverride" }] : /* istanbul ignore next */ []));
     constructor() {
         // Surface the `smartArt3D` opt-in to the element dispatcher via the
         // viewer-scoped SmartArt3DService.
@@ -77361,12 +78355,11 @@ class PowerPointViewerComponent {
         // A new host `content` input supersedes any in-place picked file.
         effect(() => {
             this.content();
-            this.contentOverride.set(null);
+            this.fileIO.contentOverride.set(null);
         });
         // Load whenever the active content (picked override, else input) changes.
         effect(() => {
-            const content = this.contentOverride() ?? this.content();
-            void this.loader.load(content);
+            void this.loader.load(this.fileIO.activeContent());
         });
         // Reset to the first slide and seed the editable deck whenever a new
         // presentation finishes loading.
@@ -77379,7 +78372,7 @@ class PowerPointViewerComponent {
         // it on mobile — tapping a shape to edit it should surface its properties.
         effect(() => {
             if (this.selectedElement()) {
-                this.mobileInspectorHidden.set(false);
+                this.inspectorPanel.mobileInspectorHidden.set(false);
             }
         });
         // Emit navigation changes.
@@ -77486,7 +78479,7 @@ class PowerPointViewerComponent {
             getTemplateElements: () => this.editor.templateElementsBySlideId(),
             applyRemoteSlides: (slides) => this.editor.applyRemoteSlides(slides),
             canvasSize: () => this.loader.canvasSize(),
-            getSourceBytes: () => this.currentSourceBytes(),
+            getSourceBytes: () => this.fileIO.sourceBytes(),
             currentSlides: () => this.editor.slides(),
             emitStart: (config) => this.startCollaboration.emit(config),
             emitStop: () => this.stopCollaboration.emit(),
@@ -77502,34 +78495,88 @@ class PowerPointViewerComponent {
         // on (the @HostListener stays on the component).
         this.keyboard.bind({
             canEdit: () => this.canEdit(),
-            presenting: () => this.presenting(),
+            presenting: () => this.presentationMode.presenting(),
             activeSlideIndex: () => this.activeSlideIndex(),
         });
         // Attach multi-touch gestures (pinch-zoom / swipe-nav / long-press menu)
-        // to the canvas host once it is rendered. See setupTouchGestures().
-        this.setupTouchGestures();
+        // to the canvas host once it is rendered.
+        this.touchGestures.setup(() => this.mainEl()?.nativeElement, {
+            canEdit: () => this.canEdit(),
+            presenting: () => this.presentationMode.presenting(),
+            selectedElement: () => this.selectedElement(),
+            goPrev: () => this.goPrev(),
+            goNext: () => this.goNext(),
+            setContextMenuPos: (pos) => this.canvasEditing.contextMenuPos.set(pos),
+        });
+        // Hand the presentation-mode controller the few accessors it alone needs
+        // from the component (active-slide-index get/set, editing/selection
+        // clearing, the source bytes for the audience hand-off, and the
+        // keep-annotations prompt trigger on the extra-dialogs host).
+        this.presentationMode.bind({
+            slideCount: () => this.slideCount(),
+            activeSlideIndex: () => this.activeSlideIndex(),
+            setActiveSlideIndex: (index) => this.activeSlideIndex.set(index),
+            clearEditing: () => this.canvasEditing.editingId.set(null),
+            clearSelection: () => this.editor.clearSelection(),
+            sourceContent: () => this.fileIO.activeContent(),
+            canEdit: () => this.canEdit(),
+            promptKeepAnnotations: (map) => this.extraDialogs()?.promptKeepAnnotations(map),
+        });
+        // Hand the mobile-sheet controller the accessors its quick-insert action
+        // needs from the component.
+        this.mobileSheetSvc.bind({
+            canEdit: () => this.canEdit(),
+            slideCount: () => this.slideCount(),
+            activeSlideIndex: () => this.activeSlideIndex(),
+        });
+        // Hand the inspector-panel controller the accessors its content
+        // precedence needs from the component.
+        this.inspectorPanel.bind({
+            canEdit: () => this.canEdit(),
+            selectedElement: () => this.selectedElement(),
+            activeSlide: () => this.activeSlide(),
+        });
+        // Hand the file-IO controller the accessors it alone needs from the
+        // component (canEdit, the host `content` input, the File ▸ Open override,
+        // the editor's slides + template elements, and the contentChange emitter).
+        this.fileIO.bind({
+            canEdit: () => this.canEdit(),
+            content: () => this.content(),
+            onOpenFile: () => this.onOpenFile(),
+            slides: () => this.editor.slides(),
+            templateElementsBySlideId: () => this.editor.templateElementsBySlideId(),
+            emitContentChange: (bytes) => this.contentChange.emit(bytes),
+        });
+        // Hand the canvas-editing controller the accessors it alone needs from the
+        // component (canEdit / active-slide / active-slide-index).
+        this.canvasEditing.bind({
+            canEdit: () => this.canEdit(),
+            activeSlide: () => this.activeSlide(),
+            activeSlideIndex: () => this.activeSlideIndex(),
+        });
+        // Hand the collab-cursor controller the accessors it alone needs from the
+        // component (the `<main>` host, zoom, canvas size, active-slide-index).
+        this.collabCursor.bind({
+            mainElement: () => this.mainEl()?.nativeElement,
+            zoom: () => this.zoomSvc.zoom(),
+            canvasSize: () => this.loader.canvasSize(),
+            activeSlideIndex: () => this.activeSlideIndex(),
+        });
+        // Hand the document-properties controller the accessors/emitter it alone
+        // needs from the component.
+        this.docProperties.bind({
+            canEdit: () => this.canEdit(),
+            selectedElement: () => this.selectedElement(),
+            activeSlideIndex: () => this.activeSlideIndex(),
+            emitPropertiesChange: (patch) => this.propertiesChange.emit(patch),
+        });
     }
     /**
      * Serialise the current presentation to `.pptx` bytes (imperative handle).
      * When editing, this serialises the editor's edited deck so changes persist.
      */
     async getContent() {
-        const data = this.canEdit()
-            ? await this.loader.saveSlides(buildSaveSlides(this.editor.slides(), this.editor.templateElementsBySlideId()))
-            : await this.loader.getContent();
-        // Mirror React's imperative handle: serialising the deck also notifies the
-        // host so listeners wired to (contentChange) receive the latest bytes.
-        this.contentChange.emit(data);
-        return data;
-    }
-    /**
-     * Serialise the current deck and trigger a browser download of the `.pptx`.
-     * Surfaced on the mobile toolbar so saving is reachable without the desktop
-     * ribbon's File tab.
-     */
-    async saveAsPptx() {
-        const bytes = await this.getContent();
-        this.exportSvc.savePptx(bytes, 'presentation.pptx');
+        return this.fileIO.getContent();
     }
     goTo(index) {
         if (index < 0 || index >= this.slideCount()) {
@@ -77543,318 +78590,13 @@ 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.
-     *
-     * Mirrors Vue's `applyThemePreset()`: re-resolves slide colours via core's
-     * pure `applyThemeToData`, then writes the updated slides + theme metadata
-     * into `EditorStateService` as a single undoable entry.  Also refreshes the
-     * `loader.themeColorMap` so subsequent theme switches start from the correct
-     * baseline.
-     */
-    applyThemePreset(preset) {
-        const currentSlides = this.editor.slides();
-        const result = applyThemeToData({
-            slides: [...currentSlides],
-            theme: this.loader.theme() ?? {},
-            themeColorMap: this.loader.themeColorMap() ?? {},
-        }, preset.colorScheme, preset.fontScheme, preset.name);
-        // Write slides back through the editor (records undo history).
-        this.editor.applyReplacement(result.slides, `Apply theme "${preset.name}"`);
-        // Update the loader's theme signals so the check-mark and future switches are correct.
-        this.loader.theme.set(result.theme);
-        this.loader.themeColorMap.set(result.themeColorMap);
-        this.showThemeGallery.set(false);
-    }
-    /**
-     * Wire the framework-agnostic touch-gesture recogniser to the `<main>` canvas
-     * host once it is in the DOM. Mirrors React's `useTouchGestures` wiring:
-     *   - pinch-to-zoom always updates the zoom signal (clamped to the viewer
-     *     range), with `preventDefault()` on the pinch path to suppress the
-     *     browser's native pinch-zoom;
-     *   - horizontal swipe navigates slides, but only when editing is off
-     *     (`!canEdit()`): in edit mode single-finger gestures belong to element
-     *     manipulation (move/resize/rotate), so we never hijack them. The large
-     *     ‹ › buttons remain available for explicit navigation in all modes;
-     *   - long-press in edit mode opens the editor context menu at the press
-     *     point for the current selection (mirrors React's onLongPress path).
-     *
-     * The recogniser's swipe/long-press callbacks check the live `canEdit()` /
-     * selection state, so a single attach handles every mode without re-binding.
-     */
-    setupTouchGestures() {
-        const destroyRef = inject(DestroyRef);
-        afterNextRender(() => {
-            const el = this.mainEl()?.nativeElement;
-            if (!el) {
-                return;
-            }
-            const teardown = attachTouchGestures(el, {
-                getScale: () => this.zoom(),
-                callbacks: {
-                    onPinchZoom: (newScale) => this.zoom.set(newScale),
-                    onSwipe: (direction) => {
-                        // Edit mode: leave single-finger gestures to element manipulation.
-                        if (this.canEdit()) {
-                            return;
-                        }
-                        // direction 1 = swipe right (previous), -1 = swipe left (next).
-                        if (direction === 1) {
-                            this.goPrev();
-                        }
-                        else {
-                            this.goNext();
-                        }
-                    },
-                    onLongPress: (x, y) => {
-                        if (!this.canEdit() || this.presenting()) {
-                            return;
-                        }
-                        const selected = this.selectedElement();
-                        if (!selected) {
-                            return;
-                        }
-                        this.contextMenuPos.set({ x, y });
-                    },
-                },
-            });
-            destroyRef.onDestroy(teardown);
-        });
-    }
-    zoomIn() {
-        this.zoom.set(Math.min(ZOOM_MAX, Number((this.zoom() + ZOOM_STEP).toFixed(2))));
-    }
-    zoomOut() {
-        this.zoom.set(Math.max(ZOOM_MIN, Number((this.zoom() - ZOOM_STEP).toFixed(2))));
-    }
-    zoomReset() {
-        this.zoom.set(1);
-    }
-    /** Open the fullscreen presentation overlay from the current slide. */
-    present() {
-        if (this.slideCount() > 0) {
-            // Deselect first so no edit chrome (selection outline / resize + rotate
-            // "Adjust shape" handles) leaks over the slideshow.
-            this.editor.clearSelection();
-            this.editingId.set(null);
-            this.presenting.set(true);
-        }
-    }
-    /**
-     * Map a presentation-overlay index back to the full-deck `activeSlideIndex`.
-     * The overlay's index is relative to {@link presentationSlides} (a custom show
-     * may filter/reorder the deck), so resolve by slide id to keep the editor
-     * selection correct when the show closes.
-     */
-    onPresentationIndexChange(index) {
-        const target = this.customShowsCtl.presentationSlides()[index];
-        if (!target) {
-            return;
-        }
-        const fullIndex = this.loader.slides().findIndex((s) => s.id === target.id);
-        this.activeSlideIndex.set(fullIndex >= 0 ? fullIndex : index);
-    }
-    /**
-     * Open a separate audience tab and hand off the deck via the shared
-     * IndexedDB store. Mirrors React's presenter "open audience window".
-     */
-    openAudienceWindow() {
-        const content = this.contentOverride() ?? this.content();
-        this.presenterWindow.openAudienceWindow(content, this.activeSlideIndex());
-    }
-    /** Open the presenter (speaker) view: current+next slide, notes, timer. */
-    presentPresenter() {
-        if (this.slideCount() > 0) {
-            this.presenterStartTime.set(Date.now());
-            this.presentingPresenter.set(true);
-        }
-    }
-    /** Close the presenter view (and any audience overlay/window it opened). */
-    exitPresenter() {
-        this.presentingPresenter.set(false);
-        this.presenting.set(false);
-        this.presenterWindow.closeAudienceWindow();
-    }
     /** Review ▸ Compare: pick a `.pptx` and diff it against the current deck. */
     onOpenCompare() {
         this.compareSvc.startCompare();
     }
-    /**
-     * Double-click text edit entry: equations open the equation editor instead
-     * of the inline text editor (mirrors React's dbl-click-to-edit-equation).
-     */
-    onTextEditStart(id) {
-        const element = this.activeSlide()?.elements.find((el) => el.id === id);
-        const segments = element && 'textSegments' in element ? element.textSegments : undefined;
-        const equation = segments?.find((segment) => segment.equationXml);
-        if (this.canEdit() && equation?.equationXml) {
-            this.dialogs.openEquationEdit(id, equation.equationXml);
-            return;
-        }
-        this.editingId.set(id);
-    }
-    /** Apply a Ctrl/Cmd+B/I/U toggle from the inline editor (undoable). */
-    onTextFormat(event) {
-        if (!this.canEdit()) {
-            return;
-        }
-        const element = this.activeSlide()?.elements.find((el) => el.id === event.id);
-        if (!element) {
-            return;
-        }
-        this.editor.updateElement(this.activeSlideIndex(), event.id, textStylePatch(element, event.updates));
-    }
-    /** Presentation exited with ink on it: offer the keep/discard prompt. */
-    onPresentationAnnotationsExit(map) {
-        if (this.canEdit()) {
-            this.extraDialogs()?.promptKeepAnnotations(map);
-        }
-    }
     /** Swap the deck for a restored version-history snapshot. */
     onRestoreVersion(bytes) {
-        this.contentOverride.set(bytes);
-    }
-    /** Toggle the speaker-notes strip. */
-    toggleNotes() {
-        this.showNotes.update((v) => !v);
-    }
-    /**
-     * File ▸ Open: host override (`onOpenFile` input) takes precedence; otherwise
-     * a built-in native picker loads the chosen presentation in place.
-     */
-    openFile() {
-        const override = this.onOpenFile();
-        if (override) {
-            override();
-            return;
-        }
-        void (async () => {
-            const picked = await openPptxFile();
-            if (picked) {
-                this.contentOverride.set(new Uint8Array(picked.buffer));
-            }
-        })();
-    }
-    // ── Mobile notes swipe-to-dismiss ─────────────────────────────────────────
-    // The notes sheet stays in normal flow (see template/CSS notes), so the drag
-    // gesture is wired here rather than via the fixed-overlay `pptx-mobile-sheet`.
-    /** Live downward drag offset for the notes sheet (px; 0 when idle). */
-    notesDragY = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "notesDragY" }] : /* istanbul ignore next */ []));
-    /** True while a notes-sheet drag is in progress (disables the snap-back transition). */
-    notesDragging = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "notesDragging" }] : /* istanbul ignore next */ []));
-    notesDragStartY = null;
-    onNotesPointerDown(event) {
-        this.notesDragStartY = event.clientY;
-        this.notesDragging.set(true);
-        event.target.setPointerCapture?.(event.pointerId);
-    }
-    onNotesPointerMove(event) {
-        if (this.notesDragStartY === null) {
-            return;
-        }
-        this.notesDragY.set(Math.max(0, event.clientY - this.notesDragStartY));
-    }
-    onNotesPointerUp(event) {
-        if (this.notesDragStartY === null) {
-            return;
-        }
-        const delta = event.clientY - this.notesDragStartY;
-        this.notesDragStartY = null;
-        this.notesDragging.set(false);
-        event.target.releasePointerCapture?.(event.pointerId);
-        // 120 px matches `pptx-mobile-sheet`'s DISMISS_THRESHOLD for consistency.
-        if (delta > 120) {
-            this.showNotes.set(false);
-        }
-        this.notesDragY.set(0);
-    }
-    // ── Mobile inspector (Format/Comments/Selection/…) swipe-to-dismiss ─────────
-    // The inspector host docks in-flow below the canvas on mobile (same keyboard-
-    // reachability reason as the notes sheet), so the swipe gesture is wired here.
-    /** True once the user swiped the inspector away on mobile (until reopened). */
-    mobileInspectorHidden = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileInspectorHidden" }] : /* istanbul ignore next */ []));
-    /** Live downward drag offset for the inspector host (px; 0 when idle). */
-    inspectorDragY = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inspectorDragY" }] : /* istanbul ignore next */ []));
-    /** True while an inspector-host drag is in progress. */
-    inspectorDragging = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inspectorDragging" }] : /* istanbul ignore next */ []));
-    inspectorDragStartY = null;
-    onInspectorPointerDown(event) {
-        this.inspectorDragStartY = event.clientY;
-        this.inspectorDragging.set(true);
-        event.target.setPointerCapture?.(event.pointerId);
-    }
-    onInspectorPointerMove(event) {
-        if (this.inspectorDragStartY === null) {
-            return;
-        }
-        this.inspectorDragY.set(Math.max(0, event.clientY - this.inspectorDragStartY));
-    }
-    onInspectorPointerUp(event) {
-        if (this.inspectorDragStartY === null) {
-            return;
-        }
-        const delta = event.clientY - this.inspectorDragStartY;
-        this.inspectorDragStartY = null;
-        this.inspectorDragging.set(false);
-        event.target.releasePointerCapture?.(event.pointerId);
-        if (delta > 120) {
-            this.mobileInspectorHidden.set(true);
-            this.activePanel.set(null);
-        }
-        this.inspectorDragY.set(0);
-    }
-    /**
-     * Mobile quick-insert: drop a text box on the active slide. Mirrors React's
-     * mobile bottom-bar "Insert" slot (a text box is the most common starter
-     * element on a phone; the full Insert section lives in the top-bar menu).
-     */
-    onMobileInsert() {
-        if (!this.canEdit() || this.slideCount() === 0) {
-            return;
-        }
-        // Close any open mobile sheet so the new element is visible on the canvas.
-        this.mobileSheet.set(null);
-        this.editor.addElement(this.activeSlideIndex(), newTextElement());
+        this.fileIO.contentOverride.set(bytes);
     }
     /**
      * Mobile "Format" slot: surface the inspector for the current selection. The
@@ -77864,16 +78606,10 @@ class PowerPointViewerComponent {
      * instead).
      */
     onMobileFormat() {
-        this.activePanel.set(null);
-        this.mobileSheet.set(null);
+        this.inspectorPanel.activePanel.set(null);
+        this.mobileSheetSvc.mobileSheet.set(null);
         // Reopen the inspector if a prior swipe-down had dismissed it.
-        this.mobileInspectorHidden.set(false);
-    }
-    /** Toggle a right-docked tool panel (clicking the active one closes it). */
-    togglePanel(panel) {
-        this.activePanel.update((current) => (current === panel ? null : panel));
-        // Tapping a panel button re-opens the host even after a swipe-dismiss.
-        this.mobileInspectorHidden.set(false);
+        this.inspectorPanel.mobileInspectorHidden.set(false);
     }
     /** Receive draw-tool state changes from the ribbon Draw tab. */
     onDrawToolChange(state) {
@@ -77881,21 +78617,6 @@ class PowerPointViewerComponent {
         this.activeDrawColor.set(state.color);
         this.activeDrawWidth.set(state.width);
     }
-    /** Receive a completed ink stroke and append it to the active slide. */
-    onInkStrokeComplete(ink) {
-        if (!this.canEdit()) {
-            return;
-        }
-        this.editor.addElement(this.activeSlideIndex(), ink);
-    }
-    /** Receive an eraser hit and delete the targeted ink element. */
-    onEraserHit(id) {
-        if (!this.canEdit()) {
-            return;
-        }
-        this.editor.select([id]);
-        this.editor.deleteSelected(this.activeSlideIndex());
-    }
     /** Append a comment to the active slide (one history entry). */
     onCommentAdd(text) {
         const next = addCommentToList(this.activeComments(), text, 'You');
@@ -77917,94 +78638,6 @@ class PowerPointViewerComponent {
             this.editor.updateSlide(this.activeSlideIndex(), { comments: next });
         }
     }
-    /**
-     * Persist a document-properties edit from the Info dialog. Gated on
-     * {@link canEdit}: viewers may inspect properties but not mutate them
-     * (mirrors the comments / hyperlink edit paths).
-     */
-    onPropertiesSave(patch) {
-        if (!this.canEdit()) {
-            this.showProperties.set(false);
-            return;
-        }
-        this.coreOverride.update((current) => ({ ...current, ...patch }));
-        this.propertiesChange.emit(patch);
-        this.showProperties.set(false);
-    }
-    /** Apply a hyperlink edit to the selected element (one history entry). */
-    onHyperlinkSave(patch) {
-        const el = this.selectedElement();
-        if (el) {
-            this.editor.updateElement(this.activeSlideIndex(), el.id, patch);
-        }
-        this.showHyperlink.set(false);
-    }
-    /**
-     * Handle an element press from the canvas. Additive (Shift/Ctrl) toggles
-     * membership; a plain press selects the element (keeping it selected if it
-     * already was, so a subsequent drag works).
-     */
-    onElementSelect(event) {
-        // The armed format painter intercepts the next element click: apply the
-        // copied format to the target, then disarm (no selection change).
-        if (this.formatPainter.active()) {
-            this.formatPainter.applyToTarget(event.id);
-            this.formatPainter.cancel();
-            return;
-        }
-        if (event.additive) {
-            this.editor.toggleSelect(event.id, true);
-        }
-        else if (!this.editor.isSelected(event.id)) {
-            this.editor.select([event.id]);
-        }
-    }
-    /** Empty-stage press: disarm the painter if armed, else clear the selection. */
-    onBackgroundClick() {
-        if (this.formatPainter.active()) {
-            this.formatPainter.cancel();
-            return;
-        }
-        this.editor.clearSelection();
-    }
-    /** Right-click: select the element under the cursor and open the menu. */
-    onContextMenu(event) {
-        if (event.id && !this.editor.isSelected(event.id)) {
-            this.editor.select([event.id]);
-        }
-        this.contextMenuPos.set({ x: event.x, y: event.y });
-    }
-    /** Update the active slide's background colour. */
-    onSlideBackground(event) {
-        this.editor.updateSlide(this.activeSlideIndex(), {
-            backgroundColor: event.target.value,
-        });
-    }
-    /** Update the active slide's speaker notes. */
-    onSlideNotes(event) {
-        this.editor.updateSlide(this.activeSlideIndex(), {
-            notes: event.target.value,
-        });
-    }
-    /** Update the active slide's speaker notes from the editable NotesPanel. */
-    onNotesUpdate(notes) {
-        this.editor.updateSlide(this.activeSlideIndex(), { notes });
-    }
-    // ── Selection pane handlers ────────────────────────────────────────────────
-    onSelectionPaneBringForward(id) {
-        this.editor.select([id]);
-        this.editor.bringSelectedForward(this.activeSlideIndex());
-    }
-    onSelectionPaneSendBackward(id) {
-        this.editor.select([id]);
-        this.editor.sendSelectedBackward(this.activeSlideIndex());
-    }
-    onToggleElementHidden(id) {
-        const el = this.activeSlide()?.elements.find((e) => e.id === id);
-        if (el) {
-            this.editor.updateElement(this.activeSlideIndex(), id, { hidden: !el.hidden });
-        }
-    }
     // ── Insert SmartArt ────────────────────────────────────────────────────────
     /**
      * Insert a new SmartArt element built from the dialog's chosen preset + item
@@ -78016,44 +78649,6 @@ class PowerPointViewerComponent {
         this.editor.addElement(this.activeSlideIndex(), element);
         this.showSmartArtInsert.set(false);
     }
-    /** Commit an inline text edit: replace the element's text (one history entry). */
-    onTextCommit(event) {
-        this.editor.updateElement(this.activeSlideIndex(), event.id, {
-            text: event.text,
-            textSegments: [],
-        });
-        this.editingId.set(null);
-    }
-    /**
-     * Commit a table cell's inline text edit. Finds the table element on the
-     * active slide, rebuilds its `tableData` with the new cell text, and patches
-     * it through the editor (which records undo history).
-     */
-    onTableCellCommit(event) {
-        if (!this.canEdit()) {
-            return;
-        }
-        const el = this.activeSlide()?.elements.find((e) => e.id === event.id);
-        if (!el || el.type !== 'table') {
-            return;
-        }
-        const updated = setCellText(el, event.commit.rowIndex, event.commit.colIndex, event.commit.text);
-        this.editor.updateElement(this.activeSlideIndex(), event.id, {
-            tableData: updated.tableData,
-        });
-    }
-    /**
-     * Persist a structural table change originating on the canvas (column / row
-     * drag-resize) as one undoable history entry.
-     */
-    onTableChange(event) {
-        if (!this.canEdit()) {
-            return;
-        }
-        this.editor.updateElement(this.activeSlideIndex(), event.id, {
-            tableData: event.tableData,
-        });
-    }
     /**
      * Editing keyboard shortcuts (only when `canEdit` and not typing in a
      * field or presenting). The decorator must live on the component; the logic
@@ -78086,8 +78681,18 @@ class PowerPointViewerComponent {
             ViewerFindReplaceService,
             ViewerCustomShowsService,
             ViewerCollaborationSessionService,
+            ViewerCanvasEditingService,
+            ViewerCollabCursorService,
+            ViewerDocumentPropertiesService,
+            ViewerFileIOService,
             ViewerFormatPainterService,
+            ViewerInspectorPanelService,
             ViewerKeyboardService,
+            ViewerMobileSheetService,
+            ViewerPresentationModeService,
+            ViewerThemeGalleryService,
+            ViewerTouchGesturesService,
+            ViewerZoomService,
         ], viewQueries: [{ propertyName: "extraDialogs", first: true, predicate: ViewerExtraDialogsComponent, descendants: true, isSignal: true }, { propertyName: "mainEl", first: true, predicate: ["mainEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div class="pptx-ng-viewer" [ngClass]="class()" [ngStyle]="rootStyle()">
 			@if (loader.loading()) {
@@ -78111,13 +78716,13 @@ class PowerPointViewerComponent {
 					[slideCount]="slideCount()"
 					[canEdit]="canEdit()"
 					[selectedElement]="selectedElement()"
-					[zoomPercent]="zoomPercent()"
+					[zoomPercent]="zoomSvc.zoomPercent()"
 					[formatPainterActive]="formatPainter.active()"
 					[canActivateFormatPainter]="formatPainter.canActivate()"
 					[exporting]="xport.exporting()"
 					[sidebarCollapsed]="slidesPanelCollapsed()"
-					[inspectorOpen]="inspectorPaneOpen()"
-					[commentsOpen]="activePanel() === 'comments'"
+					[inspectorOpen]="inspectorPanel.inspectorPaneOpen()"
+					[commentsOpen]="inspectorPanel.activePanel() === 'comments'"
 					[commentCount]="activeComments().length"
 					[findOpen]="findReplace.showFind() || findReplace.showFindReplace()"
 					[collabConnected]="collab.connected()"
@@ -78125,31 +78730,31 @@ class PowerPointViewerComponent {
 					(toggleSidebar)="slidesPanelCollapsed.update(v => !v)"
 					(prev)="goPrev()"
 					(next)="goNext()"
-					(zoomIn)="zoomIn()"
-					(zoomOut)="zoomOut()"
-					(zoomReset)="zoomReset()"
+					(zoomIn)="zoomSvc.zoomIn()"
+					(zoomOut)="zoomSvc.zoomOut()"
+					(zoomReset)="zoomSvc.zoomReset()"
 					(find)="findReplace.showFind.set(true)"
-					(present)="present()"
-					(presenter)="presentPresenter()"
+					(present)="presentationMode.present()"
+					(presenter)="presentationMode.presentPresenter()"
 					(share)="session.showShare.set(true)"
 					(broadcast)="session.showBroadcast.set(true)"
-					(openFile)="openFile()"
-					(save)="saveAsPptx()"
-					(info)="showProperties.set(true)"
+					(openFile)="fileIO.openFile()"
+					(save)="fileIO.saveAsPptx()"
+					(info)="docProperties.showProperties.set(true)"
 					(print)="print.openDialog()"
-					(comments)="togglePanel('comments')"
-					(signatures)="togglePanel('signatures')"
-					(a11y)="togglePanel('accessibility')"
-					(link)="showHyperlink.set(true)"
+					(comments)="inspectorPanel.togglePanel('comments')"
+					(signatures)="inspectorPanel.togglePanel('signatures')"
+					(a11y)="inspectorPanel.togglePanel('accessibility')"
+					(link)="docProperties.showHyperlink.set(true)"
 					(openSorter)="showSorter.set(true)"
-					(toggleNotes)="toggleNotes()"
+					(toggleNotes)="mobileSheetSvc.toggleNotes()"
 					(toggleFormatPainter)="formatPainter.toggle()"
 					(exportPng)="xport.exportPng()"
 					(exportPdf)="xport.exportPdf()"
 					(exportGif)="xport.exportGif()"
 					(exportVideo)="xport.exportVideo()"
 					(replace)="findReplace.openFindReplace()"
-					(toggleInspector)="activePanel.set(null)"
+					(toggleInspector)="inspectorPanel.activePanel.set(null)"
 					(drawToolChange)="onDrawToolChange($event)"
 					[showGrid]="showGrid()"
 					[showRulers]="showRulers()"
@@ -78161,9 +78766,9 @@ class PowerPointViewerComponent {
 					(toggleGuides)="showGuides.update(v => !v)"
 					(toggleSnapToGrid)="snapToGrid.update(v => !v)"
 					(toggleEyedropper)="formatPainter.toggleEyedropper()"
-					[themeGalleryOpen]="showThemeGallery()"
-					(toggleThemeGallery)="showThemeGallery.update(v => !v)"
-					(toggleSelectionPane)="togglePanel('selection')"
+					[themeGalleryOpen]="themeGallery.showThemeGallery()"
+					(toggleThemeGallery)="themeGallery.showThemeGallery.update(v => !v)"
+					(toggleSelectionPane)="inspectorPanel.togglePanel('selection')"
 					(openCustomShows)="customShowsCtl.showDialog.set(true)"
 					(openSmartArtDialog)="showSmartArtInsert.set(true)"
 					(openEquationDialog)="dialogs.openEquationInsert()"
@@ -78182,12 +78787,12 @@ class PowerPointViewerComponent {
 						[canUndo]="editor.canUndo()"
 						[canRedo]="editor.canRedo()"
 						[canPresent]="slideCount() > 0"
-						[menuOpen]="mobileSheet() === 'menu'"
-						(toggleMenu)="mobileSheet.set(mobileSheet() === 'menu' ? null : 'menu')"
+						[menuOpen]="mobileSheetSvc.mobileSheet() === 'menu'"
+						(toggleMenu)="mobileSheetSvc.mobileSheet.set(mobileSheetSvc.mobileSheet() === 'menu' ? null : 'menu')"
 						(undo)="editor.undo()"
 						(redo)="editor.redo()"
-						(save)="saveAsPptx()"
-						(present)="present()"
+						(save)="fileIO.saveAsPptx()"
+						(present)="presentationMode.present()"
 					/>
 				}
 
@@ -78214,12 +78819,12 @@ class PowerPointViewerComponent {
 						</nav>
 					}
 
-					<main class="pptx-ng-main" #mainEl (pointermove)="onCollabPointerMove($event)">
+					<main class="pptx-ng-main" #mainEl (pointermove)="collabCursor.onPointerMove($event)">
 						<pptx-slide-canvas
 							[slide]="activeSlide()"
 							[canvasSize]="loader.canvasSize()"
 							[mediaDataUrls]="loader.mediaDataUrls()"
-							[zoom]="zoom()"
+							[zoom]="zoomSvc.zoom()"
 							[editable]="canEdit()"
 							[selectedIds]="editor.selectedIds()"
 							[showGrid]="showGrid()"
@@ -78232,32 +78837,32 @@ class PowerPointViewerComponent {
 							[drawWidth]="activeDrawWidth()"
 							[editTemplateMode]="editor.editTemplateMode()"
 							[templateElements]="activeTemplateElements()"
-							(elementSelect)="onElementSelect($event)"
-							(backgroundClick)="onBackgroundClick()"
+							(elementSelect)="canvasEditing.onElementSelect($event)"
+							(backgroundClick)="canvasEditing.onBackgroundClick()"
 							(marqueeSelect)="editor.select($event)"
 							(transformStart)="editor.beginTransform($event.label)"
 							(transformUpdate)="editor.applyTransform(activeSlideIndex(), $event.id, $event.box)"
 							(rotateUpdate)="
 								editor.applyTransform(activeSlideIndex(), $event.id, { rotation: $event.rotation })
 							"
-							(contextMenu)="onContextMenu($event)"
-							[editingId]="editingId()"
-							(textEditStart)="onTextEditStart($event.id)"
-							(textCommit)="onTextCommit($event)"
-							(textCancel)="editingId.set(null)"
-							(textFormat)="onTextFormat($event)"
-							(inkStrokeComplete)="onInkStrokeComplete($event)"
-							(eraserHit)="onEraserHit($event)"
-							(cellCommit)="onTableCellCommit($event)"
-							(tableChange)="onTableChange($event)"
+							(contextMenu)="canvasEditing.onContextMenu($event)"
+							[editingId]="canvasEditing.editingId()"
+							(textEditStart)="canvasEditing.onTextEditStart($event.id)"
+							(textCommit)="canvasEditing.onTextCommit($event)"
+							(textCancel)="canvasEditing.editingId.set(null)"
+							(textFormat)="canvasEditing.onTextFormat($event)"
+							(inkStrokeComplete)="canvasEditing.onInkStrokeComplete($event)"
+							(eraserHit)="canvasEditing.onEraserHit($event)"
+							(cellCommit)="canvasEditing.onTableCellCommit($event)"
+							(tableChange)="canvasEditing.onTableChange($event)"
 						/>
 						@if (collab.connected()) {
-							<pptx-collaboration-cursors [cursors]="collabCursors()" [zoom]="zoom()" />
+							<pptx-collaboration-cursors [cursors]="collabCursor.cursors()" [zoom]="zoomSvc.zoom()" />
 							<pptx-remote-selection-overlay
 								[presences]="collab.presence()"
 								[elements]="activeSlide()?.elements ?? []"
 								[activeSlideIndex]="activeSlideIndex()"
-								[zoom]="zoom()"
+								[zoom]="zoomSvc.zoom()"
 							/>
 						}
 						@if (collab.active() && collab.presence().length > 0) {
@@ -78269,11 +78874,11 @@ class PowerPointViewerComponent {
 								/>
 							</div>
 						}
-						@if (showNotes() && !mobile.isMobile()) {
+						@if (mobileSheetSvc.showNotes() && !mobile.isMobile()) {
 							<aside class="pptx-ng-notes" [attr.aria-label]="'pptx.notes.speakerNotes' | translate">
 								<pptx-notes-panel
 									[slide]="activeSlide()"
-									(update)="onNotesUpdate($event)"
+									(update)="canvasEditing.onNotesUpdate($event)"
 								/>
 							</aside>
 						}
@@ -78282,25 +78887,26 @@ class PowerPointViewerComponent {
 					<!--
 						Single inspector host for every right-rail panel. On mobile it docks
 						full-width below the canvas and is swipe-dismissable (the grab handle
-						feeds onInspectorPointerDown/Move/Up); a downward swipe past the
-						threshold sets mobileInspectorHidden so the user reclaims the canvas.
+						feeds inspectorPanel.inspectorDrag's onPointerDown/Move/Up); a downward
+						swipe past the threshold sets mobileInspectorHidden so the user
+						reclaims the canvas.
 					-->
-					@if (visibleInspectorKind(); as kind) {
+					@if (inspectorPanel.visibleInspectorKind(); as kind) {
 						<aside
 							class="pptx-ng-inspector-host"
-							[attr.aria-label]="inspectorLabel() | translate"
+							[attr.aria-label]="inspectorPanel.inspectorLabel() | translate"
 							[style.transform]="
-								inspectorDragY() > 0 ? 'translateY(' + inspectorDragY() + 'px)' : null
+								inspectorPanel.inspectorDrag.dragY() > 0 ? 'translateY(' + inspectorPanel.inspectorDrag.dragY() + 'px)' : null
 							"
-							[style.transition]="inspectorDragging() ? 'none' : 'transform 150ms ease-out'"
+							[style.transition]="inspectorPanel.inspectorDrag.dragging() ? 'none' : 'transform 150ms ease-out'"
 						>
 							<!-- Swipe-down-to-dismiss grab handle (mobile only; hidden on desktop). -->
 							<div
 								class="pptx-ng-idrawer-grab"
-								(pointerdown)="onInspectorPointerDown($event)"
-								(pointermove)="onInspectorPointerMove($event)"
-								(pointerup)="onInspectorPointerUp($event)"
-								(pointercancel)="onInspectorPointerUp($event)"
+								(pointerdown)="inspectorPanel.inspectorDrag.onPointerDown($event)"
+								(pointermove)="inspectorPanel.inspectorDrag.onPointerMove($event)"
+								(pointerup)="inspectorPanel.inspectorDrag.onPointerUp($event)"
+								(pointercancel)="inspectorPanel.inspectorDrag.onPointerUp($event)"
 							>
 								<div class="pptx-ng-idrawer-handle"></div>
 							</div>
@@ -78327,9 +78933,9 @@ class PowerPointViewerComponent {
 										[elements]="activeSlide()?.elements ?? []"
 										[selectedIds]="editor.selectedIds()"
 										(selectElement)="editor.select([$event])"
-										(bringForward)="onSelectionPaneBringForward($event)"
-										(sendBackward)="onSelectionPaneSendBackward($event)"
-										(toggleHidden)="onToggleElementHidden($event)"
+										(bringForward)="canvasEditing.onSelectionPaneBringForward($event)"
+										(sendBackward)="canvasEditing.onSelectionPaneSendBackward($event)"
+										(toggleHidden)="canvasEditing.onToggleElementHidden($event)"
 									/>
 								}
 								@case ('element') {
@@ -78353,7 +78959,7 @@ class PowerPointViewerComponent {
 													<input
 														type="color"
 														[attr.value]="sl.backgroundColor || '#ffffff'"
-														(change)="onSlideBackground($event)"
+														(change)="canvasEditing.onSlideBackground($event)"
 													/>
 												</label>
 												<label class="pptx-ng-prop-row pptx-ng-prop-col">
@@ -78361,8 +78967,8 @@ class PowerPointViewerComponent {
 													<textarea
 														rows="5"
 														[attr.placeholder]="'pptx.viewer.speakerNotesPlaceholder' | translate"
-														(change)="onSlideNotes($event)"
-														(blur)="onSlideNotes($event)"
+														(change)="canvasEditing.onSlideNotes($event)"
+														(blur)="canvasEditing.onSlideNotes($event)"
 														>{{ sl.notes || '' }}</textarea
 													>
 												</label>
@@ -78381,17 +78987,17 @@ class PowerPointViewerComponent {
 						[slideCount]="slideCount()"
 						[canEdit]="canEdit()"
 						[dirty]="editor.dirty()"
-						[notesOpen]="showNotes()"
-						[zoomPercent]="zoomPercent()"
+						[notesOpen]="mobileSheetSvc.showNotes()"
+						[zoomPercent]="zoomSvc.zoomPercent()"
 						[sorterActive]="showSorter()"
-						[presenting]="presenting()"
-						(toggleNotes)="toggleNotes()"
+						[presenting]="presentationMode.presenting()"
+						(toggleNotes)="mobileSheetSvc.toggleNotes()"
 						(normalView)="showSorter.set(false)"
 						(openSorter)="showSorter.set(true)"
-						(slideShow)="present()"
-						(zoomIn)="zoomIn()"
-						(zoomOut)="zoomOut()"
-						(zoomReset)="zoomReset()"
+						(slideShow)="presentationMode.present()"
+						(zoomIn)="zoomSvc.zoomIn()"
+						(zoomOut)="zoomSvc.zoomOut()"
+						(zoomReset)="zoomSvc.zoomReset()"
 					/>
 				}
 			}
@@ -78407,19 +79013,19 @@ class PowerPointViewerComponent {
 				/>
 			}
 
-			@if (presenting()) {
+			@if (presentationMode.presenting()) {
 				<pptx-presentation-overlay
 					[slides]="customShowsCtl.presentationSlides()"
 					[canvasSize]="loader.canvasSize()"
 					[mediaDataUrls]="loader.mediaDataUrls()"
 					[startIndex]="customShowsCtl.presentationStartIndex()"
-					(indexChange)="onPresentationIndexChange($event)"
-					(annotationsExit)="onPresentationAnnotationsExit($event)"
-					(closed)="presenting.set(false)"
+					(indexChange)="presentationMode.onPresentationIndexChange($event)"
+					(annotationsExit)="presentationMode.onPresentationAnnotationsExit($event)"
+					(closed)="presentationMode.presenting.set(false)"
 				/>
 			}
 
-			@if (presentingPresenter()) {
+			@if (presentationMode.presentingPresenter()) {
 				@if (mobile.isMobile()) {
 					<!-- Single-column mobile presenter layout (phones / landscape phones). -->
 					<pptx-mobile-presenter-view
@@ -78427,9 +79033,9 @@ class PowerPointViewerComponent {
 						[currentSlideIndex]="activeSlideIndex()"
 						[canvasSize]="loader.canvasSize()"
 						[mediaDataUrls]="loader.mediaDataUrls()"
-						[presentationStartTime]="presenterStartTime()"
+						[presentationStartTime]="presentationMode.presenterStartTime()"
 						(movePresentationSlide)="goTo(activeSlideIndex() + $event)"
-						(exit)="exitPresenter()"
+						(exit)="presentationMode.exitPresenter()"
 					/>
 				} @else {
 					<pptx-presenter-view
@@ -78437,12 +79043,12 @@ class PowerPointViewerComponent {
 						[currentSlideIndex]="activeSlideIndex()"
 						[canvasSize]="loader.canvasSize()"
 						[mediaDataUrls]="loader.mediaDataUrls()"
-						[presentationStartTime]="presenterStartTime()"
+						[presentationStartTime]="presentationMode.presenterStartTime()"
 						[isAudienceWindowOpen]="presenterWindow.isAudienceWindowOpen()"
 						(movePresentationSlide)="goTo(activeSlideIndex() + $event)"
-						(openAudienceWindow)="openAudienceWindow()"
+						(openAudienceWindow)="presentationMode.openAudienceWindow()"
 						(closeAudienceWindow)="presenterWindow.closeAudienceWindow()"
-						(exit)="exitPresenter()"
+						(exit)="presentationMode.exitPresenter()"
 					/>
 				}
 			}
@@ -78467,27 +79073,27 @@ class PowerPointViewerComponent {
 				/>
 			}
 
-			@if (canEdit() && contextMenuPos(); as m) {
+			@if (canEdit() && canvasEditing.contextMenuPos(); as m) {
 				<pptx-editor-context-menu
 					[x]="m.x"
 					[y]="m.y"
 					[slideIndex]="activeSlideIndex()"
-					(closed)="contextMenuPos.set(null)"
+					(closed)="canvasEditing.contextMenuPos.set(null)"
 				/>
 			}
 
 			<pptx-theme-gallery
-				[open]="showThemeGallery()"
-				[activeName]="activeThemeName()"
-				(applyTheme)="applyThemePreset($event)"
-				(close)="showThemeGallery.set(false)"
+				[open]="themeGallery.showThemeGallery()"
+				[activeName]="themeGallery.activeThemeName()"
+				(applyTheme)="themeGallery.applyThemePreset($event)"
+				(close)="themeGallery.showThemeGallery.set(false)"
 			/>
 
 			<pptx-properties-dialog
-				[open]="showProperties()"
-				[properties]="coreProperties()"
-				(save)="onPropertiesSave($event)"
-				(close)="showProperties.set(false)"
+				[open]="docProperties.showProperties()"
+				[properties]="docProperties.coreProperties()"
+				(save)="docProperties.onPropertiesSave($event)"
+				(close)="docProperties.showProperties.set(false)"
 			/>
 
 			<!-- Secondary dialogs / side panels (equation, set-up show, password,
@@ -78503,10 +79109,10 @@ class PowerPointViewerComponent {
 
 			@if (canEdit()) {
 				<pptx-hyperlink-dialog
-					[open]="showHyperlink()"
+					[open]="docProperties.showHyperlink()"
 					[element]="selectedElement()"
-					(save)="onHyperlinkSave($event)"
-					(close)="showHyperlink.set(false)"
+					(save)="docProperties.onHyperlinkSave($event)"
+					(close)="docProperties.showHyperlink.set(false)"
 				/>
 			}
 
@@ -78577,29 +79183,29 @@ class PowerPointViewerComponent {
 			<!-- ── Mobile chrome (narrow / touch viewports only) ─────────────── -->
 			@if (mobile.isMobile() && !loader.loading() && !loader.error()) {
 				<pptx-mobile-slides-sheet
-					[open]="mobileSheet() === 'slides'"
+					[open]="mobileSheetSvc.mobileSheet() === 'slides'"
 					[slides]="displaySlidesMut()"
 					[canvasSize]="loader.canvasSize()"
 					[mediaDataUrls]="loader.mediaDataUrls()"
 					[activeIndex]="activeSlideIndex()"
 					(jumpToSlide)="goTo($event)"
-					(closed)="mobileSheet.set(null)"
+					(closed)="mobileSheetSvc.mobileSheet.set(null)"
 				/>
 
 				<pptx-mobile-menu-sheet
-					[open]="mobileSheet() === 'menu'"
+					[open]="mobileSheetSvc.mobileSheet() === 'menu'"
 					[slideCount]="slideCount()"
 					[exporting]="xport.exporting()"
-					[showNotes]="showNotes()"
+					[showNotes]="mobileSheetSvc.showNotes()"
 					[canEdit]="canEdit()"
-					(closed)="mobileSheet.set(null)"
+					(closed)="mobileSheetSvc.mobileSheet.set(null)"
 					(openFind)="findReplace.showFind.set(true)"
 					(openSorter)="showSorter.set(true)"
-					(toggleNotes)="toggleNotes()"
-					(insertText)="onMobileInsert()"
-					(present)="present()"
-					(openFile)="openFile()"
-					(savePptx)="saveAsPptx()"
+					(toggleNotes)="mobileSheetSvc.toggleNotes()"
+					(insertText)="mobileSheetSvc.onMobileInsert()"
+					(present)="presentationMode.present()"
+					(openFile)="fileIO.openFile()"
+					(savePptx)="fileIO.saveAsPptx()"
 					(exportPng)="xport.exportPng()"
 					(exportPdf)="xport.exportPdf()"
 					(exportGif)="xport.exportGif()"
@@ -78615,24 +79221,24 @@ class PowerPointViewerComponent {
 				     the visual viewport ends up below the document on mobile (100vh layout
 				     viewport < dynamic viewport), leaving its textarea unreachable to taps.
 				     Mirrors React, where the notes panel is a flow sibling below the canvas. -->
-				@if (showNotes()) {
+				@if (mobileSheetSvc.showNotes()) {
 					<div
 						class="pptx-ng-mobile-notes-sheet"
-						[style.transform]="notesDragY() > 0 ? 'translateY(' + notesDragY() + 'px)' : null"
-						[style.transition]="notesDragging() ? 'none' : 'transform 150ms ease-out'"
+						[style.transform]="mobileSheetSvc.notesDrag.dragY() > 0 ? 'translateY(' + mobileSheetSvc.notesDrag.dragY() + 'px)' : null"
+						[style.transition]="mobileSheetSvc.notesDrag.dragging() ? 'none' : 'transform 150ms ease-out'"
 					>
 						<!-- Swipe-down-to-dismiss grab handle (kept in-flow so the keyboard
 						     can't push the textarea out of reach). -->
 						<div
 							class="pptx-ng-mnotes-grab"
-							(pointerdown)="onNotesPointerDown($event)"
-							(pointermove)="onNotesPointerMove($event)"
-							(pointerup)="onNotesPointerUp($event)"
-							(pointercancel)="onNotesPointerUp($event)"
+							(pointerdown)="mobileSheetSvc.notesDrag.onPointerDown($event)"
+							(pointermove)="mobileSheetSvc.notesDrag.onPointerMove($event)"
+							(pointerup)="mobileSheetSvc.notesDrag.onPointerUp($event)"
+							(pointercancel)="mobileSheetSvc.notesDrag.onPointerUp($event)"
 						>
 							<div class="pptx-ng-mnotes-handle"></div>
 						</div>
-						<pptx-notes-panel [slide]="activeSlide()" (update)="onNotesUpdate($event)" />
+						<pptx-notes-panel [slide]="activeSlide()" (update)="canvasEditing.onNotesUpdate($event)" />
 					</div>
 				}
 
@@ -78646,11 +79252,11 @@ class PowerPointViewerComponent {
 					[slideCount]="slideCount()"
 					[commentCount]="activeComments().length"
 					[activeSheet]="mobileBarSheet()"
-					(openSlides)="mobileSheet.set(mobileSheet() === 'slides' ? null : 'slides')"
-					(insert)="onMobileInsert()"
+					(openSlides)="mobileSheetSvc.mobileSheet.set(mobileSheetSvc.mobileSheet() === 'slides' ? null : 'slides')"
+					(insert)="mobileSheetSvc.onMobileInsert()"
 					(openFormat)="onMobileFormat()"
-					(openComments)="togglePanel('comments')"
-					(notes)="toggleNotes()"
+					(openComments)="inspectorPanel.togglePanel('comments')"
+					(notes)="mobileSheetSvc.toggleNotes()"
 				/>
 			}
 		</div>
@@ -78681,8 +79287,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         ViewerFindReplaceService,
                         ViewerCustomShowsService,
                         ViewerCollaborationSessionService,
+                        ViewerCanvasEditingService,
+                        ViewerCollabCursorService,
+                        ViewerDocumentPropertiesService,
+                        ViewerFileIOService,
                         ViewerFormatPainterService,
+                        ViewerInspectorPanelService,
                         ViewerKeyboardService,
+                        ViewerMobileSheetService,
+                        ViewerPresentationModeService,
+                        ViewerThemeGalleryService,
+                        ViewerTouchGesturesService,
+                        ViewerZoomService,
                     ],
                     imports: [
                         NgClass,
@@ -78747,13 +79363,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[slideCount]="slideCount()"
 					[canEdit]="canEdit()"
 					[selectedElement]="selectedElement()"
-					[zoomPercent]="zoomPercent()"
+					[zoomPercent]="zoomSvc.zoomPercent()"
 					[formatPainterActive]="formatPainter.active()"
 					[canActivateFormatPainter]="formatPainter.canActivate()"
 					[exporting]="xport.exporting()"
 					[sidebarCollapsed]="slidesPanelCollapsed()"
-					[inspectorOpen]="inspectorPaneOpen()"
-					[commentsOpen]="activePanel() === 'comments'"
+					[inspectorOpen]="inspectorPanel.inspectorPaneOpen()"
+					[commentsOpen]="inspectorPanel.activePanel() === 'comments'"
 					[commentCount]="activeComments().length"
 					[findOpen]="findReplace.showFind() || findReplace.showFindReplace()"
 					[collabConnected]="collab.connected()"
@@ -78761,31 +79377,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					(toggleSidebar)="slidesPanelCollapsed.update(v => !v)"
 					(prev)="goPrev()"
 					(next)="goNext()"
-					(zoomIn)="zoomIn()"
-					(zoomOut)="zoomOut()"
-					(zoomReset)="zoomReset()"
+					(zoomIn)="zoomSvc.zoomIn()"
+					(zoomOut)="zoomSvc.zoomOut()"
+					(zoomReset)="zoomSvc.zoomReset()"
 					(find)="findReplace.showFind.set(true)"
-					(present)="present()"
-					(presenter)="presentPresenter()"
+					(present)="presentationMode.present()"
+					(presenter)="presentationMode.presentPresenter()"
 					(share)="session.showShare.set(true)"
 					(broadcast)="session.showBroadcast.set(true)"
-					(openFile)="openFile()"
-					(save)="saveAsPptx()"
-					(info)="showProperties.set(true)"
+					(openFile)="fileIO.openFile()"
+					(save)="fileIO.saveAsPptx()"
+					(info)="docProperties.showProperties.set(true)"
 					(print)="print.openDialog()"
-					(comments)="togglePanel('comments')"
-					(signatures)="togglePanel('signatures')"
-					(a11y)="togglePanel('accessibility')"
-					(link)="showHyperlink.set(true)"
+					(comments)="inspectorPanel.togglePanel('comments')"
+					(signatures)="inspectorPanel.togglePanel('signatures')"
+					(a11y)="inspectorPanel.togglePanel('accessibility')"
+					(link)="docProperties.showHyperlink.set(true)"
 					(openSorter)="showSorter.set(true)"
-					(toggleNotes)="toggleNotes()"
+					(toggleNotes)="mobileSheetSvc.toggleNotes()"
 					(toggleFormatPainter)="formatPainter.toggle()"
 					(exportPng)="xport.exportPng()"
 					(exportPdf)="xport.exportPdf()"
 					(exportGif)="xport.exportGif()"
 					(exportVideo)="xport.exportVideo()"
 					(replace)="findReplace.openFindReplace()"
-					(toggleInspector)="activePanel.set(null)"
+					(toggleInspector)="inspectorPanel.activePanel.set(null)"
 					(drawToolChange)="onDrawToolChange($event)"
 					[showGrid]="showGrid()"
 					[showRulers]="showRulers()"
@@ -78797,9 +79413,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					(toggleGuides)="showGuides.update(v => !v)"
 					(toggleSnapToGrid)="snapToGrid.update(v => !v)"
 					(toggleEyedropper)="formatPainter.toggleEyedropper()"
-					[themeGalleryOpen]="showThemeGallery()"
-					(toggleThemeGallery)="showThemeGallery.update(v => !v)"
-					(toggleSelectionPane)="togglePanel('selection')"
+					[themeGalleryOpen]="themeGallery.showThemeGallery()"
+					(toggleThemeGallery)="themeGallery.showThemeGallery.update(v => !v)"
+					(toggleSelectionPane)="inspectorPanel.togglePanel('selection')"
 					(openCustomShows)="customShowsCtl.showDialog.set(true)"
 					(openSmartArtDialog)="showSmartArtInsert.set(true)"
 					(openEquationDialog)="dialogs.openEquationInsert()"
@@ -78818,12 +79434,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[canUndo]="editor.canUndo()"
 						[canRedo]="editor.canRedo()"
 						[canPresent]="slideCount() > 0"
-						[menuOpen]="mobileSheet() === 'menu'"
-						(toggleMenu)="mobileSheet.set(mobileSheet() === 'menu' ? null : 'menu')"
+						[menuOpen]="mobileSheetSvc.mobileSheet() === 'menu'"
+						(toggleMenu)="mobileSheetSvc.mobileSheet.set(mobileSheetSvc.mobileSheet() === 'menu' ? null : 'menu')"
 						(undo)="editor.undo()"
 						(redo)="editor.redo()"
-						(save)="saveAsPptx()"
-						(present)="present()"
+						(save)="fileIO.saveAsPptx()"
+						(present)="presentationMode.present()"
 					/>
 				}
 
@@ -78850,12 +79466,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						</nav>
 					}
 
-					<main class="pptx-ng-main" #mainEl (pointermove)="onCollabPointerMove($event)">
+					<main class="pptx-ng-main" #mainEl (pointermove)="collabCursor.onPointerMove($event)">
 						<pptx-slide-canvas
 							[slide]="activeSlide()"
 							[canvasSize]="loader.canvasSize()"
 							[mediaDataUrls]="loader.mediaDataUrls()"
-							[zoom]="zoom()"
+							[zoom]="zoomSvc.zoom()"
 							[editable]="canEdit()"
 							[selectedIds]="editor.selectedIds()"
 							[showGrid]="showGrid()"
@@ -78868,32 +79484,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 							[drawWidth]="activeDrawWidth()"
 							[editTemplateMode]="editor.editTemplateMode()"
 							[templateElements]="activeTemplateElements()"
-							(elementSelect)="onElementSelect($event)"
-							(backgroundClick)="onBackgroundClick()"
+							(elementSelect)="canvasEditing.onElementSelect($event)"
+							(backgroundClick)="canvasEditing.onBackgroundClick()"
 							(marqueeSelect)="editor.select($event)"
 							(transformStart)="editor.beginTransform($event.label)"
 							(transformUpdate)="editor.applyTransform(activeSlideIndex(), $event.id, $event.box)"
 							(rotateUpdate)="
 								editor.applyTransform(activeSlideIndex(), $event.id, { rotation: $event.rotation })
 							"
-							(contextMenu)="onContextMenu($event)"
-							[editingId]="editingId()"
-							(textEditStart)="onTextEditStart($event.id)"
-							(textCommit)="onTextCommit($event)"
-							(textCancel)="editingId.set(null)"
-							(textFormat)="onTextFormat($event)"
-							(inkStrokeComplete)="onInkStrokeComplete($event)"
-							(eraserHit)="onEraserHit($event)"
-							(cellCommit)="onTableCellCommit($event)"
-							(tableChange)="onTableChange($event)"
+							(contextMenu)="canvasEditing.onContextMenu($event)"
+							[editingId]="canvasEditing.editingId()"
+							(textEditStart)="canvasEditing.onTextEditStart($event.id)"
+							(textCommit)="canvasEditing.onTextCommit($event)"
+							(textCancel)="canvasEditing.editingId.set(null)"
+							(textFormat)="canvasEditing.onTextFormat($event)"
+							(inkStrokeComplete)="canvasEditing.onInkStrokeComplete($event)"
+							(eraserHit)="canvasEditing.onEraserHit($event)"
+							(cellCommit)="canvasEditing.onTableCellCommit($event)"
+							(tableChange)="canvasEditing.onTableChange($event)"
 						/>
 						@if (collab.connected()) {
-							<pptx-collaboration-cursors [cursors]="collabCursors()" [zoom]="zoom()" />
+							<pptx-collaboration-cursors [cursors]="collabCursor.cursors()" [zoom]="zoomSvc.zoom()" />
 							<pptx-remote-selection-overlay
 								[presences]="collab.presence()"
 								[elements]="activeSlide()?.elements ?? []"
 								[activeSlideIndex]="activeSlideIndex()"
-								[zoom]="zoom()"
+								[zoom]="zoomSvc.zoom()"
 							/>
 						}
 						@if (collab.active() && collab.presence().length > 0) {
@@ -78905,11 +79521,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 								/>
 							</div>
 						}
-						@if (showNotes() && !mobile.isMobile()) {
+						@if (mobileSheetSvc.showNotes() && !mobile.isMobile()) {
 							<aside class="pptx-ng-notes" [attr.aria-label]="'pptx.notes.speakerNotes' | translate">
 								<pptx-notes-panel
 									[slide]="activeSlide()"
-									(update)="onNotesUpdate($event)"
+									(update)="canvasEditing.onNotesUpdate($event)"
 								/>
 							</aside>
 						}
@@ -78918,25 +79534,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					<!--
 						Single inspector host for every right-rail panel. On mobile it docks
 						full-width below the canvas and is swipe-dismissable (the grab handle
-						feeds onInspectorPointerDown/Move/Up); a downward swipe past the
-						threshold sets mobileInspectorHidden so the user reclaims the canvas.
+						feeds inspectorPanel.inspectorDrag's onPointerDown/Move/Up); a downward
+						swipe past the threshold sets mobileInspectorHidden so the user
+						reclaims the canvas.
 					-->
-					@if (visibleInspectorKind(); as kind) {
+					@if (inspectorPanel.visibleInspectorKind(); as kind) {
 						<aside
 							class="pptx-ng-inspector-host"
-							[attr.aria-label]="inspectorLabel() | translate"
+							[attr.aria-label]="inspectorPanel.inspectorLabel() | translate"
 							[style.transform]="
-								inspectorDragY() > 0 ? 'translateY(' + inspectorDragY() + 'px)' : null
+								inspectorPanel.inspectorDrag.dragY() > 0 ? 'translateY(' + inspectorPanel.inspectorDrag.dragY() + 'px)' : null
 							"
-							[style.transition]="inspectorDragging() ? 'none' : 'transform 150ms ease-out'"
+							[style.transition]="inspectorPanel.inspectorDrag.dragging() ? 'none' : 'transform 150ms ease-out'"
 						>
 							<!-- Swipe-down-to-dismiss grab handle (mobile only; hidden on desktop). -->
 							<div
 								class="pptx-ng-idrawer-grab"
-								(pointerdown)="onInspectorPointerDown($event)"
-								(pointermove)="onInspectorPointerMove($event)"
-								(pointerup)="onInspectorPointerUp($event)"
-								(pointercancel)="onInspectorPointerUp($event)"
+								(pointerdown)="inspectorPanel.inspectorDrag.onPointerDown($event)"
+								(pointermove)="inspectorPanel.inspectorDrag.onPointerMove($event)"
+								(pointerup)="inspectorPanel.inspectorDrag.onPointerUp($event)"
+								(pointercancel)="inspectorPanel.inspectorDrag.onPointerUp($event)"
 							>
 								<div class="pptx-ng-idrawer-handle"></div>
 							</div>
@@ -78963,9 +79580,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 										[elements]="activeSlide()?.elements ?? []"
 										[selectedIds]="editor.selectedIds()"
 										(selectElement)="editor.select([$event])"
-										(bringForward)="onSelectionPaneBringForward($event)"
-										(sendBackward)="onSelectionPaneSendBackward($event)"
-										(toggleHidden)="onToggleElementHidden($event)"
+										(bringForward)="canvasEditing.onSelectionPaneBringForward($event)"
+										(sendBackward)="canvasEditing.onSelectionPaneSendBackward($event)"
+										(toggleHidden)="canvasEditing.onToggleElementHidden($event)"
 									/>
 								}
 								@case ('element') {
@@ -78989,7 +79606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 													<input
 														type="color"
 														[attr.value]="sl.backgroundColor || '#ffffff'"
-														(change)="onSlideBackground($event)"
+														(change)="canvasEditing.onSlideBackground($event)"
 													/>
 												</label>
 												<label class="pptx-ng-prop-row pptx-ng-prop-col">
@@ -78997,8 +79614,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 													<textarea
 														rows="5"
 														[attr.placeholder]="'pptx.viewer.speakerNotesPlaceholder' | translate"
-														(change)="onSlideNotes($event)"
-														(blur)="onSlideNotes($event)"
+														(change)="canvasEditing.onSlideNotes($event)"
+														(blur)="canvasEditing.onSlideNotes($event)"
 														>{{ sl.notes || '' }}</textarea
 													>
 												</label>
@@ -79017,17 +79634,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[slideCount]="slideCount()"
 						[canEdit]="canEdit()"
 						[dirty]="editor.dirty()"
-						[notesOpen]="showNotes()"
-						[zoomPercent]="zoomPercent()"
+						[notesOpen]="mobileSheetSvc.showNotes()"
+						[zoomPercent]="zoomSvc.zoomPercent()"
 						[sorterActive]="showSorter()"
-						[presenting]="presenting()"
-						(toggleNotes)="toggleNotes()"
+						[presenting]="presentationMode.presenting()"
+						(toggleNotes)="mobileSheetSvc.toggleNotes()"
 						(normalView)="showSorter.set(false)"
 						(openSorter)="showSorter.set(true)"
-						(slideShow)="present()"
-						(zoomIn)="zoomIn()"
-						(zoomOut)="zoomOut()"
-						(zoomReset)="zoomReset()"
+						(slideShow)="presentationMode.present()"
+						(zoomIn)="zoomSvc.zoomIn()"
+						(zoomOut)="zoomSvc.zoomOut()"
+						(zoomReset)="zoomSvc.zoomReset()"
 					/>
 				}
 			}
@@ -79043,19 +79660,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				/>
 			}
 
-			@if (presenting()) {
+			@if (presentationMode.presenting()) {
 				<pptx-presentation-overlay
 					[slides]="customShowsCtl.presentationSlides()"
 					[canvasSize]="loader.canvasSize()"
 					[mediaDataUrls]="loader.mediaDataUrls()"
 					[startIndex]="customShowsCtl.presentationStartIndex()"
-					(indexChange)="onPresentationIndexChange($event)"
-					(annotationsExit)="onPresentationAnnotationsExit($event)"
-					(closed)="presenting.set(false)"
+					(indexChange)="presentationMode.onPresentationIndexChange($event)"
+					(annotationsExit)="presentationMode.onPresentationAnnotationsExit($event)"
+					(closed)="presentationMode.presenting.set(false)"
 				/>
 			}
 
-			@if (presentingPresenter()) {
+			@if (presentationMode.presentingPresenter()) {
 				@if (mobile.isMobile()) {
 					<!-- Single-column mobile presenter layout (phones / landscape phones). -->
 					<pptx-mobile-presenter-view
@@ -79063,9 +79680,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[currentSlideIndex]="activeSlideIndex()"
 						[canvasSize]="loader.canvasSize()"
 						[mediaDataUrls]="loader.mediaDataUrls()"
-						[presentationStartTime]="presenterStartTime()"
+						[presentationStartTime]="presentationMode.presenterStartTime()"
 						(movePresentationSlide)="goTo(activeSlideIndex() + $event)"
-						(exit)="exitPresenter()"
+						(exit)="presentationMode.exitPresenter()"
 					/>
 				} @else {
 					<pptx-presenter-view
@@ -79073,12 +79690,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 						[currentSlideIndex]="activeSlideIndex()"
 						[canvasSize]="loader.canvasSize()"
 						[mediaDataUrls]="loader.mediaDataUrls()"
-						[presentationStartTime]="presenterStartTime()"
+						[presentationStartTime]="presentationMode.presenterStartTime()"
 						[isAudienceWindowOpen]="presenterWindow.isAudienceWindowOpen()"
 						(movePresentationSlide)="goTo(activeSlideIndex() + $event)"
-						(openAudienceWindow)="openAudienceWindow()"
+						(openAudienceWindow)="presentationMode.openAudienceWindow()"
 						(closeAudienceWindow)="presenterWindow.closeAudienceWindow()"
-						(exit)="exitPresenter()"
+						(exit)="presentationMode.exitPresenter()"
 					/>
 				}
 			}
@@ -79103,27 +79720,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				/>
 			}
 
-			@if (canEdit() && contextMenuPos(); as m) {
+			@if (canEdit() && canvasEditing.contextMenuPos(); as m) {
 				<pptx-editor-context-menu
 					[x]="m.x"
 					[y]="m.y"
 					[slideIndex]="activeSlideIndex()"
-					(closed)="contextMenuPos.set(null)"
+					(closed)="canvasEditing.contextMenuPos.set(null)"
 				/>
 			}
 
 			<pptx-theme-gallery
-				[open]="showThemeGallery()"
-				[activeName]="activeThemeName()"
-				(applyTheme)="applyThemePreset($event)"
-				(close)="showThemeGallery.set(false)"
+				[open]="themeGallery.showThemeGallery()"
+				[activeName]="themeGallery.activeThemeName()"
+				(applyTheme)="themeGallery.applyThemePreset($event)"
+				(close)="themeGallery.showThemeGallery.set(false)"
 			/>
 
 			<pptx-properties-dialog
-				[open]="showProperties()"
-				[properties]="coreProperties()"
-				(save)="onPropertiesSave($event)"
-				(close)="showProperties.set(false)"
+				[open]="docProperties.showProperties()"
+				[properties]="docProperties.coreProperties()"
+				(save)="docProperties.onPropertiesSave($event)"
+				(close)="docProperties.showProperties.set(false)"
 			/>
 
 			<!-- Secondary dialogs / side panels (equation, set-up show, password,
@@ -79139,10 +79756,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 			@if (canEdit()) {
 				<pptx-hyperlink-dialog
-					[open]="showHyperlink()"
+					[open]="docProperties.showHyperlink()"
 					[element]="selectedElement()"
-					(save)="onHyperlinkSave($event)"
-					(close)="showHyperlink.set(false)"
+					(save)="docProperties.onHyperlinkSave($event)"
+					(close)="docProperties.showHyperlink.set(false)"
 				/>
 			}
 
@@ -79213,29 +79830,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 			<!-- ── Mobile chrome (narrow / touch viewports only) ─────────────── -->
 			@if (mobile.isMobile() && !loader.loading() && !loader.error()) {
 				<pptx-mobile-slides-sheet
-					[open]="mobileSheet() === 'slides'"
+					[open]="mobileSheetSvc.mobileSheet() === 'slides'"
 					[slides]="displaySlidesMut()"
 					[canvasSize]="loader.canvasSize()"
 					[mediaDataUrls]="loader.mediaDataUrls()"
 					[activeIndex]="activeSlideIndex()"
 					(jumpToSlide)="goTo($event)"
-					(closed)="mobileSheet.set(null)"
+					(closed)="mobileSheetSvc.mobileSheet.set(null)"
 				/>
 
 				<pptx-mobile-menu-sheet
-					[open]="mobileSheet() === 'menu'"
+					[open]="mobileSheetSvc.mobileSheet() === 'menu'"
 					[slideCount]="slideCount()"
 					[exporting]="xport.exporting()"
-					[showNotes]="showNotes()"
+					[showNotes]="mobileSheetSvc.showNotes()"
 					[canEdit]="canEdit()"
-					(closed)="mobileSheet.set(null)"
+					(closed)="mobileSheetSvc.mobileSheet.set(null)"
 					(openFind)="findReplace.showFind.set(true)"
 					(openSorter)="showSorter.set(true)"
-					(toggleNotes)="toggleNotes()"
-					(insertText)="onMobileInsert()"
-					(present)="present()"
-					(openFile)="openFile()"
-					(savePptx)="saveAsPptx()"
+					(toggleNotes)="mobileSheetSvc.toggleNotes()"
+					(insertText)="mobileSheetSvc.onMobileInsert()"
+					(present)="presentationMode.present()"
+					(openFile)="fileIO.openFile()"
+					(savePptx)="fileIO.saveAsPptx()"
 					(exportPng)="xport.exportPng()"
 					(exportPdf)="xport.exportPdf()"
 					(exportGif)="xport.exportGif()"
@@ -79251,24 +79868,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				     the visual viewport ends up below the document on mobile (100vh layout
 				     viewport < dynamic viewport), leaving its textarea unreachable to taps.
 				     Mirrors React, where the notes panel is a flow sibling below the canvas. -->
-				@if (showNotes()) {
+				@if (mobileSheetSvc.showNotes()) {
 					<div
 						class="pptx-ng-mobile-notes-sheet"
-						[style.transform]="notesDragY() > 0 ? 'translateY(' + notesDragY() + 'px)' : null"
-						[style.transition]="notesDragging() ? 'none' : 'transform 150ms ease-out'"
+						[style.transform]="mobileSheetSvc.notesDrag.dragY() > 0 ? 'translateY(' + mobileSheetSvc.notesDrag.dragY() + 'px)' : null"
+						[style.transition]="mobileSheetSvc.notesDrag.dragging() ? 'none' : 'transform 150ms ease-out'"
 					>
 						<!-- Swipe-down-to-dismiss grab handle (kept in-flow so the keyboard
 						     can't push the textarea out of reach). -->
 						<div
 							class="pptx-ng-mnotes-grab"
-							(pointerdown)="onNotesPointerDown($event)"
-							(pointermove)="onNotesPointerMove($event)"
-							(pointerup)="onNotesPointerUp($event)"
-							(pointercancel)="onNotesPointerUp($event)"
+							(pointerdown)="mobileSheetSvc.notesDrag.onPointerDown($event)"
+							(pointermove)="mobileSheetSvc.notesDrag.onPointerMove($event)"
+							(pointerup)="mobileSheetSvc.notesDrag.onPointerUp($event)"
+							(pointercancel)="mobileSheetSvc.notesDrag.onPointerUp($event)"
 						>
 							<div class="pptx-ng-mnotes-handle"></div>
 						</div>
-						<pptx-notes-panel [slide]="activeSlide()" (update)="onNotesUpdate($event)" />
+						<pptx-notes-panel [slide]="activeSlide()" (update)="canvasEditing.onNotesUpdate($event)" />
 					</div>
 				}
 
@@ -79282,11 +79899,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 					[slideCount]="slideCount()"
 					[commentCount]="activeComments().length"
 					[activeSheet]="mobileBarSheet()"
-					(openSlides)="mobileSheet.set(mobileSheet() === 'slides' ? null : 'slides')"
-					(insert)="onMobileInsert()"
+					(openSlides)="mobileSheetSvc.mobileSheet.set(mobileSheetSvc.mobileSheet() === 'slides' ? null : 'slides')"
+					(insert)="mobileSheetSvc.onMobileInsert()"
 					(openFormat)="onMobileFormat()"
-					(openComments)="togglePanel('comments')"
-					(notes)="toggleNotes()"
+					(openComments)="inspectorPanel.togglePanel('comments')"
+					(notes)="mobileSheetSvc.toggleNotes()"
 				/>
 			}
 		</div>