pptx-angular-viewer 1.1.62 → 1.1.64

package/types/pptx-angular-viewer.d.ts

@@ -1,8 +1,8 @@
-import * as pptx_angular_viewer from 'pptx-angular-viewer';
 import * as _angular_core from '@angular/core';
 import { Signal, WritableSignal, OnDestroy, OnInit, OnChanges, SimpleChanges, InjectionToken, Provider } from '@angular/core';
 import * as pptx_viewer_core from 'pptx-viewer-core';
-import { PptxElement, ShapeStyle, PptxTextWarpPreset, XmlObject, PptxElementAnimation, PptxSlide, TextSegment, TextStyle, PptxTransitionType, PptxEmbeddedFont, AccessibilityIssueSeverity, AccessibilityIssue, AccessibilityIssueType, AccessibilityCheckOptions, PptxComment, SmartArtLayout, PptxTheme, PptxSlideMaster, PptxCoreProperties, PptxCustomProperty, PptxHeaderFooter, ParsedSignature, PptxTableCell, PptxTableData, PptxCustomShow, PptxPresentationProperties, PptxThemePreset, InkPptxElement, Model3DPptxElement, ZoomPptxElement, PptxSlideTransition, TablePptxElement, ChartPptxElement, SmartArtPptxElement, PptxSmartArtData, PptxTableCellStyle, PptxChartDataLabelOptions, PptxChartAxisType, PptxChartAxisFormatting, PptxChartSeries, PptxChartType, PptxChartDataPoint, PptxChartTrendline, PptxChartErrBars, PptxAnimationPreset, PptxAnimationTrigger, PptxAnimationTimingCurve, PptxAnimationRepeatMode, PptxAnimationDirection, PptxAnimationSequence, SignatureStatus } from 'pptx-viewer-core';
+import { PptxElement, ShapeStyle, PptxTextWarpPreset, XmlObject, PptxElementAnimation, PptxSlide, TextSegment, TextStyle, PptxTransitionType, PptxEmbeddedFont, AccessibilityIssueSeverity, AccessibilityIssue, AccessibilityIssueType, AccessibilityCheckOptions, PptxComment, SmartArtLayout, PptxTheme, PptxSlideMaster, PptxCoreProperties, PptxCustomProperty, PptxHeaderFooter, ParsedSignature, PptxTableCell, PptxTableData, InkPptxElement, PptxCustomShow, PptxPresentationProperties, PptxThemePreset, Model3DPptxElement, ZoomPptxElement, PptxSlideTransition, TablePptxElement, ChartPptxElement, SmartArtPptxElement, PptxSmartArtData, PptxTableCellStyle, PptxChartDataLabelOptions, PptxChartAxisType, PptxChartAxisFormatting, PptxChartSeries, PptxChartType, PptxChartDataPoint, PptxChartTrendline, PptxChartErrBars, PptxAnimationPreset, PptxAnimationTrigger, PptxAnimationTimingCurve, PptxAnimationRepeatMode, PptxAnimationDirection, PptxAnimationSequence, SignatureStatus } from 'pptx-viewer-core';
+import * as pptx_angular_viewer from 'pptx-angular-viewer';
 import { Options } from 'html2canvas-pro';
 import { SafeHtml } from '@angular/platform-browser';
 
@@ -2951,10 +2951,9 @@ declare class IsMobileService {
  * 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.
  */
 declare class LoadContentService {
     /** Parsed slides (with image Blob URLs patched in). */
@@ -3045,41 +3044,6 @@ declare class MobileBottomBarComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileBottomBarComponent, "pptx-mobile-bottom-bar", never, { "slideCount": { "alias": "slideCount"; "required": false; "isSignal": true; }; "commentCount": { "alias": "commentCount"; "required": false; "isSignal": true; }; "activeSheet": { "alias": "activeSheet"; "required": false; "isSignal": true; }; }, { "openSlides": "openSlides"; "insert": "insert"; "openFormat": "openFormat"; "openComments": "openComments"; "notes": "notes"; }, never, never, true, never>;
 }
 
-/**
- * presentation-annotations-helpers.ts: Pure geometry helpers for presentation
- * ink annotations (pen, highlighter, eraser, laser).
- *
- * Ported from React:
- *   packages/react/src/viewer/components/PresentationAnnotationOverlay.tsx
- *   packages/react/src/viewer/hooks/usePresentationAnnotations.ts
- *
- * No Angular dependencies; all functions are pure so they can be unit-tested
- * without TestBed.
- */
-/** A single {x, y} coordinate in slide-space pixels. */
-interface AnnotationPoint {
-    x: number;
-    y: number;
-}
-/** An ink stroke: a sequence of points with visual properties. */
-interface AnnotationStroke {
-    id: string;
-    points: AnnotationPoint[];
-    color: string;
-    width: number;
-    /** 1 = opaque (pen); 0.4 = semi-transparent (highlighter). */
-    opacity: number;
-}
-/** The tool currently armed in presentation mode. */
-type PresentationTool = 'none' | 'pen' | 'highlighter' | 'eraser' | 'laser';
-/** Per-slide annotation storage: slide index → strokes. */
-type SlideAnnotationMap = Map<number, AnnotationStroke[]>;
-/** Transient laser-pointer position in slide-space pixels. */
-interface LaserPosition {
-    x: number;
-    y: number;
-}
-
 /** BroadcastChannel name shared between presenter and audience tabs. */
 declare const PRESENTER_CHANNEL_NAME = "pptx-viewer-presenter";
 /** Unique origin identifier so we only react to our own messages. */
@@ -3355,7 +3319,8 @@ declare function buildDuotoneFilter(element: PptxElement): DuotoneFilterDef | un
  * 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
@@ -3517,6 +3482,124 @@ declare class TableRendererComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableRendererComponent, "pptx-table-renderer", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; }, { "cellCommit": "cellCommit"; "tableChange": "tableChange"; }, never, never, true, never>;
 }
 
+/** Live host accessors the canvas-editing controller needs. */
+interface CanvasEditingHost {
+    readonly canEdit: () => boolean;
+    readonly activeSlide: () => PptxSlide | undefined;
+    readonly activeSlideIndex: () => number;
+}
+declare class ViewerCanvasEditingService {
+    private readonly editor;
+    private readonly dialogs;
+    private readonly formatPainter;
+    /** Id of the element being inline text-edited, or null. */
+    readonly editingId: _angular_core.WritableSignal<string | null>;
+    /** Open editor context-menu position (client coords), or null. */
+    readonly contextMenuPos: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+    } | null>;
+    private host;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host: CanvasEditingHost): void;
+    private requireHost;
+    /**
+     * 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: string): void;
+    /** Apply a Ctrl/Cmd+B/I/U toggle from the inline editor (undoable). */
+    onTextFormat(event: {
+        id: string;
+        updates: Partial<TextStyle>;
+    }): void;
+    /** Commit an inline text edit: replace the element's text (one history entry). */
+    onTextCommit(event: {
+        id: string;
+        text: string;
+    }): void;
+    /** Receive a completed ink stroke and append it to the active slide. */
+    onInkStrokeComplete(ink: InkPptxElement): void;
+    /** Receive an eraser hit and delete the targeted ink element. */
+    onEraserHit(id: string): void;
+    /**
+     * 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: {
+        id: string;
+        additive: boolean;
+    }): void;
+    /** Empty-stage press: disarm the painter if armed, else clear the selection. */
+    onBackgroundClick(): void;
+    /** Right-click: select the element under the cursor and open the menu. */
+    onContextMenu(event: {
+        id: string | null;
+        x: number;
+        y: number;
+    }): void;
+    /** Update the active slide's background colour. */
+    onSlideBackground(event: Event): void;
+    /** Update the active slide's speaker notes. */
+    onSlideNotes(event: Event): void;
+    /** Update the active slide's speaker notes from the editable NotesPanel. */
+    onNotesUpdate(notes: string): void;
+    onSelectionPaneBringForward(id: string): void;
+    onSelectionPaneSendBackward(id: string): void;
+    onToggleElementHidden(id: string): void;
+    /**
+     * 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: {
+        id: string;
+        commit: TableCellCommit;
+    }): void;
+    /**
+     * Persist a structural table change originating on the canvas (column / row
+     * drag-resize) as one undoable history entry.
+     */
+    onTableChange(event: {
+        id: string;
+        tableData: PptxTableData;
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewerCanvasEditingService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerCanvasEditingService>;
+}
+
+/** Live host accessors the cursor broadcast needs. */
+interface CollabCursorHost {
+    readonly mainElement: () => HTMLElement | undefined;
+    readonly zoom: () => number;
+    readonly canvasSize: () => CanvasSize;
+    readonly activeSlideIndex: () => number;
+}
+declare class ViewerCollabCursorService {
+    private readonly collab;
+    /** Timestamp of the last cursor broadcast (throttle gate). */
+    private lastCursorBroadcast;
+    private host;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host: CollabCursorHost): void;
+    private requireHost;
+    /**
+     * Remote cursors filtered to the slide the local user is viewing, so peers'
+     * cursors only appear on the shared slide (mirrors React/Vue).
+     */
+    readonly cursors: _angular_core.Signal<pptx_angular_viewer.RemoteCursor[]>;
+    /**
+     * 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: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewerCollabCursorService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerCollabCursorService>;
+}
+
 /** Seed values for the Share dialog's start form. */
 interface ShareDefaults$1 {
     roomId?: string;
@@ -3682,6 +3765,40 @@ declare class ViewerDialogsService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerDialogsService>;
 }
 
+/** Live host accessors the document-properties controller needs. */
+interface DocumentPropertiesHost {
+    readonly canEdit: () => boolean;
+    readonly selectedElement: () => PptxElement | null;
+    readonly activeSlideIndex: () => number;
+    readonly emitPropertiesChange: (patch: Partial<PptxCoreProperties>) => void;
+}
+declare class ViewerDocumentPropertiesService {
+    private readonly editor;
+    private readonly loader;
+    /** Document-properties (Info) dialog visibility. */
+    readonly showProperties: _angular_core.WritableSignal<boolean>;
+    /** Hyperlink-edit dialog visibility. */
+    readonly showHyperlink: _angular_core.WritableSignal<boolean>;
+    /** Local overrides applied to document properties via the Info dialog. */
+    private readonly coreOverride;
+    /** Document core properties (loaded, with any in-session edits merged in). */
+    readonly coreProperties: _angular_core.Signal<PptxCoreProperties>;
+    private host;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host: DocumentPropertiesHost): void;
+    private requireHost;
+    /**
+     * 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: Partial<PptxCoreProperties>): void;
+    /** Apply a hyperlink edit to the selected element (one history entry). */
+    onHyperlinkSave(patch: Partial<PptxElement>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewerDocumentPropertiesService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerDocumentPropertiesService>;
+}
+
 /** Live accessors the export loop needs from the host component. */
 interface ExportHost {
     /** The component's active-slide index (read + written to flip the live stage). */
@@ -3744,6 +3861,52 @@ declare class ViewerExportService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerExportService>;
 }
 
+/** Live host accessors the file-IO controller needs. */
+interface FileIOHost {
+    readonly canEdit: () => boolean;
+    readonly content: () => Uint8Array | ArrayBuffer | null;
+    readonly onOpenFile: () => (() => void) | undefined;
+    readonly slides: () => readonly PptxSlide[];
+    readonly templateElementsBySlideId: () => TemplateElementsBySlideId;
+    readonly emitContentChange: (bytes: Uint8Array) => void;
+}
+declare class ViewerFileIOService {
+    private readonly loader;
+    private readonly exportSvc;
+    /**
+     * 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.
+     */
+    readonly contentOverride: _angular_core.WritableSignal<ArrayBuffer | Uint8Array<ArrayBufferLike> | null>;
+    private host;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host: FileIOHost): void;
+    private requireHost;
+    /** The currently active content: a picked-file override, else the host `content` input. */
+    activeContent(): Uint8Array | ArrayBuffer | null;
+    /** The loaded source `.pptx` bytes (for elected-writer write-back), if any. */
+    sourceBytes(): Uint8Array | null;
+    /**
+     * Serialise the current presentation to `.pptx` bytes. When editing, this
+     * serialises the editor's edited deck so changes persist.
+     */
+    getContent(): Promise<Uint8Array>;
+    /**
+     * 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.
+     */
+    saveAsPptx(): Promise<void>;
+    /**
+     * File ▸ Open: host override (`onOpenFile` input) takes precedence; otherwise
+     * a built-in native picker loads the chosen presentation in place.
+     */
+    openFile(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewerFileIOService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerFileIOService>;
+}
+
 /** Emitted when the user changes the find query or the case-sensitive toggle. */
 interface FindEvent {
     query: string;
@@ -3878,74 +4041,295 @@ declare class ViewerFormatPainterService {
 }
 
 /**
- * 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`.
+ * 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.
  *
- * Conventions vs. React/Vue:
- *  - React `forwardRef` handle / Vue `defineExpose` → public {@link getContent}
- *    method (reach it via a template ref or `viewChild`).
- *  - React callback props / Vue emits → Angular `output()` events.
- *  - React theme context / Vue provide-inject → `themeStyle` CSS vars applied to
- *    the root element (app-wide sharing via `provideViewerTheme`).
+ * 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).
  */
-declare class PowerPointViewerComponent {
-    /** PowerPoint content as Uint8Array (or ArrayBuffer). */
-    readonly content: _angular_core.InputSignal<ArrayBuffer | Uint8Array<ArrayBufferLike> | null>;
-    /** Whether editing actions are enabled. (Editor chrome not yet ported.) */
-    readonly canEdit: _angular_core.InputSignal<boolean>;
-    /** Optional class applied to the root element. */
-    readonly class: _angular_core.InputSignal<string>;
-    /** Theme configuration for customising the viewer's appearance. */
-    readonly theme: _angular_core.InputSignal<ViewerTheme | undefined>;
+/** Live drag state + pointer handlers for one swipe-to-dismiss surface. */
+interface SwipeDismissDrag {
+    /** Live downward drag offset (px; 0 when idle). */
+    readonly dragY: () => number;
+    /** True while a drag is in progress (disables the snap-back transition). */
+    readonly dragging: () => boolean;
+    onPointerDown(event: PointerEvent): void;
+    onPointerMove(event: PointerEvent): void;
+    onPointerUp(event: PointerEvent): void;
+}
+
+/** The explicit right-docked tool panels a ribbon/bottom-bar button can toggle. */
+type InspectorToolPanel = 'comments' | 'accessibility' | 'signatures' | 'selection';
+/** What the single inspector host is actually showing, after precedence rules. */
+type InspectorContent = InspectorToolPanel | 'element' | 'slide' | null;
+/** Live host accessors the content precedence needs. */
+interface InspectorPanelHost {
+    readonly canEdit: () => boolean;
+    readonly selectedElement: () => PptxElement | null;
+    readonly activeSlide: () => PptxSlide | undefined;
+}
+declare class ViewerInspectorPanelService {
+    private readonly mobile;
+    /** Active right-docked tool panel (comments / accessibility / selection), or null. */
+    readonly activePanel: _angular_core.WritableSignal<InspectorToolPanel | null>;
+    /** True once the user swiped the inspector away on mobile (until reopened). */
+    readonly mobileInspectorHidden: _angular_core.WritableSignal<boolean>;
     /**
-     * Host file path/identifier keying the version-history store. When omitted
-     * the version-history panel shows its empty state. Mirrors React's
-     * `filePath` prop.
+     * 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.
      */
-    readonly filePath: _angular_core.InputSignal<string | undefined>;
-    /** Optional real-time collaboration config; when set, connects and shows remote cursors. */
-    readonly collaboration: _angular_core.InputSignal<CollaborationConfig | undefined>;
+    readonly inspectorDrag: SwipeDismissDrag;
+    private host;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host: InspectorPanelHost): void;
+    private requireHost;
     /**
-     * Display name for the local user in collaboration/broadcast sessions and
-     * presence avatars. Falls back to "You" (cursors/avatars) and "Presenter"
-     * (broadcast owner) when omitted. Mirrors the React/Vue `authorName` prop.
+     * 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`.
      */
-    readonly authorName: _angular_core.InputSignal<string | undefined>;
+    readonly inspectorContent: _angular_core.Signal<InspectorContent>;
     /**
-     * Seed values for the Share dialog's start form (and the broadcast server
-     * URL). Lets the host pre-fill the room id / user name / server URL. Mirrors
-     * the React/Vue `shareDefaults` prop.
+     * Whether the right-docked inspector is showing the format panel (element or
+     * slide properties). Drives the top-bar inspector-toggle active state.
      */
-    readonly shareDefaults: _angular_core.InputSignal<{
-        roomId?: string;
-        userName?: string;
-        serverUrl?: string;
-    } | undefined>;
+    readonly inspectorPaneOpen: _angular_core.Signal<boolean>;
+    /** Inspector content, but null on mobile once the user has swiped it away. */
+    readonly visibleInspectorKind: _angular_core.Signal<InspectorContent>;
+    /** Accessible-label translation key for the inspector host, by active content. */
+    readonly inspectorLabel: _angular_core.Signal<"" | "pptx.toolbar.comments" | "pptx.accessibility.title" | "pptx.viewer.digitalSignatures" | "pptx.selectionPane.title" | "pptx.viewer.elementProperties" | "pptx.viewer.slideProperties">;
+    /** Toggle a right-docked tool panel (clicking the active one closes it). */
+    togglePanel(panel: InspectorToolPanel): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewerInspectorPanelService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerInspectorPanelService>;
+}
+
+/** Live host accessors the mobile-insert action needs. */
+interface MobileSheetHost {
+    readonly canEdit: () => boolean;
+    readonly slideCount: () => number;
+    readonly activeSlideIndex: () => number;
+}
+declare class ViewerMobileSheetService {
+    private readonly editor;
+    /** Open mobile bottom-sheet (slides / menu), or null. */
+    readonly mobileSheet: _angular_core.WritableSignal<"menu" | "slides" | null>;
+    /** Speaker-notes strip visibility. */
+    readonly showNotes: _angular_core.WritableSignal<boolean>;
     /**
-     * Host override for the File ▸ Open action. When set, the built-in native
-     * file picker is bypassed and this is invoked instead; the host then supplies
-     * a new `content` value. When omitted, the viewer opens its own picker and
-     * loads the chosen presentation in place.
+     * 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.
      */
-    readonly onOpenFile: _angular_core.InputSignal<(() => void) | undefined>;
+    readonly notesDrag: SwipeDismissDrag;
+    private host;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host: MobileSheetHost): void;
+    private requireHost;
+    /** Toggle the speaker-notes strip. */
+    toggleNotes(): void;
     /**
-     * Opt in to the experimental Three.js SmartArt renderer. When `true`,
-     * SmartArt diagrams render as extruded 3D blocks on a WebGL canvas instead
-     * of flat SVG. Requires the optional `three` peer dependency; when it is not
-     * installed (or the diagram has no geometry), the viewer transparently falls
-     * back to the SVG SmartArt renderer. Default `false`.
+     * 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).
      */
-    readonly smartArt3D: _angular_core.InputSignal<boolean>;
-    /** Fired when the active slide changes. */
-    readonly activeSlideChange: _angular_core.OutputEmitterRef<number>;
-    /** Fired when the unsaved-changes flag toggles. */
-    readonly dirtyChange: _angular_core.OutputEmitterRef<boolean>;
+    onMobileInsert(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewerMobileSheetService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerMobileSheetService>;
+}
+
+/**
+ * presentation-annotations-helpers.ts: Pure geometry helpers for presentation
+ * ink annotations (pen, highlighter, eraser, laser).
+ *
+ * Ported from React:
+ *   packages/react/src/viewer/components/PresentationAnnotationOverlay.tsx
+ *   packages/react/src/viewer/hooks/usePresentationAnnotations.ts
+ *
+ * No Angular dependencies; all functions are pure so they can be unit-tested
+ * without TestBed.
+ */
+/** A single {x, y} coordinate in slide-space pixels. */
+interface AnnotationPoint {
+    x: number;
+    y: number;
+}
+/** An ink stroke: a sequence of points with visual properties. */
+interface AnnotationStroke {
+    id: string;
+    points: AnnotationPoint[];
+    color: string;
+    width: number;
+    /** 1 = opaque (pen); 0.4 = semi-transparent (highlighter). */
+    opacity: number;
+}
+/** The tool currently armed in presentation mode. */
+type PresentationTool = 'none' | 'pen' | 'highlighter' | 'eraser' | 'laser';
+/** Per-slide annotation storage: slide index → strokes. */
+type SlideAnnotationMap = Map<number, AnnotationStroke[]>;
+/** Transient laser-pointer position in slide-space pixels. */
+interface LaserPosition {
+    x: number;
+    y: number;
+}
+
+/** Live host accessors the presentation-mode controller needs. */
+interface PresentationModeHost {
+    readonly slideCount: () => number;
+    readonly activeSlideIndex: () => number;
+    readonly setActiveSlideIndex: (index: number) => void;
+    readonly clearEditing: () => void;
+    readonly clearSelection: () => void;
+    readonly sourceContent: () => Uint8Array | ArrayBuffer | null;
+    readonly canEdit: () => boolean;
+    readonly promptKeepAnnotations: (map: SlideAnnotationMap) => void;
+}
+declare class ViewerPresentationModeService {
+    private readonly loader;
+    private readonly presenterWindow;
+    private readonly customShowsCtl;
+    /** Fullscreen presentation-mode overlay visibility. */
+    readonly presenting: _angular_core.WritableSignal<boolean>;
+    /** Presenter-view (speaker) overlay visibility. */
+    readonly presentingPresenter: _angular_core.WritableSignal<boolean>;
+    /** Epoch ms when presenter view started (drives the elapsed timer). */
+    readonly presenterStartTime: _angular_core.WritableSignal<number | null>;
+    private host;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host: PresentationModeHost): void;
+    private requireHost;
+    /** Open the fullscreen presentation overlay from the current slide. */
+    present(): void;
+    /**
+     * 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: number): void;
+    /**
+     * Open a separate audience tab and hand off the deck via the shared
+     * IndexedDB store. Mirrors React's presenter "open audience window".
+     */
+    openAudienceWindow(): void;
+    /** Open the presenter (speaker) view: current+next slide, notes, timer. */
+    presentPresenter(): void;
+    /** Close the presenter view (and any audience overlay/window it opened). */
+    exitPresenter(): void;
+    /** Presentation exited with ink on it: offer the keep/discard prompt. */
+    onPresentationAnnotationsExit(map: SlideAnnotationMap): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewerPresentationModeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerPresentationModeService>;
+}
+
+declare class ViewerThemeGalleryService {
+    private readonly editor;
+    private readonly loader;
+    /** Whether the theme-gallery overlay is visible (Design → Browse Themes). */
+    readonly showThemeGallery: _angular_core.WritableSignal<boolean>;
+    /** The `name` property of the loaded deck's theme (for check-mark in gallery). */
+    readonly activeThemeName: _angular_core.Signal<string | undefined>;
+    /**
+     * 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: PptxThemePreset): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewerThemeGalleryService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerThemeGalleryService>;
+}
+
+declare class ViewerZoomService {
+    /** Current zoom multiplier applied to the main slide canvas (1 = 100%). */
+    readonly zoom: _angular_core.WritableSignal<number>;
+    /** {@link zoom} rounded to a whole percentage for display. */
+    readonly zoomPercent: _angular_core.Signal<number>;
+    zoomIn(): void;
+    zoomOut(): void;
+    zoomReset(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewerZoomService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewerZoomService>;
+}
+
+/**
+ * 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, 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}
+ *    method (reach it via a template ref or `viewChild`).
+ *  - React callback props / Vue emits → Angular `output()` events.
+ *  - React theme context / Vue provide-inject → `themeStyle` CSS vars applied to
+ *    the root element (app-wide sharing via `provideViewerTheme`).
+ */
+declare class PowerPointViewerComponent {
+    /** PowerPoint content as Uint8Array (or ArrayBuffer). */
+    readonly content: _angular_core.InputSignal<ArrayBuffer | Uint8Array<ArrayBufferLike> | null>;
+    /** Whether editing actions are enabled. (Editor chrome not yet ported.) */
+    readonly canEdit: _angular_core.InputSignal<boolean>;
+    /** Optional class applied to the root element. */
+    readonly class: _angular_core.InputSignal<string>;
+    /** Theme configuration for customising the viewer's appearance. */
+    readonly theme: _angular_core.InputSignal<ViewerTheme | undefined>;
+    /**
+     * Host file path/identifier keying the version-history store. When omitted
+     * the version-history panel shows its empty state. Mirrors React's
+     * `filePath` prop.
+     */
+    readonly filePath: _angular_core.InputSignal<string | undefined>;
+    /** Optional real-time collaboration config; when set, connects and shows remote cursors. */
+    readonly collaboration: _angular_core.InputSignal<CollaborationConfig | undefined>;
+    /**
+     * Display name for the local user in collaboration/broadcast sessions and
+     * presence avatars. Falls back to "You" (cursors/avatars) and "Presenter"
+     * (broadcast owner) when omitted. Mirrors the React/Vue `authorName` prop.
+     */
+    readonly authorName: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Seed values for the Share dialog's start form (and the broadcast server
+     * URL). Lets the host pre-fill the room id / user name / server URL. Mirrors
+     * the React/Vue `shareDefaults` prop.
+     */
+    readonly shareDefaults: _angular_core.InputSignal<{
+        roomId?: string;
+        userName?: string;
+        serverUrl?: string;
+    } | undefined>;
+    /**
+     * Host override for the File ▸ Open action. When set, the built-in native
+     * file picker is bypassed and this is invoked instead; the host then supplies
+     * a new `content` value. When omitted, the viewer opens its own picker and
+     * loads the chosen presentation in place.
+     */
+    readonly onOpenFile: _angular_core.InputSignal<(() => void) | undefined>;
+    /**
+     * Opt in to the experimental Three.js SmartArt renderer. When `true`,
+     * SmartArt diagrams render as extruded 3D blocks on a WebGL canvas instead
+     * of flat SVG. Requires the optional `three` peer dependency; when it is not
+     * installed (or the diagram has no geometry), the viewer transparently falls
+     * back to the SVG SmartArt renderer. Default `false`.
+     */
+    readonly smartArt3D: _angular_core.InputSignal<boolean>;
+    /** Fired when the active slide changes. */
+    readonly activeSlideChange: _angular_core.OutputEmitterRef<number>;
+    /** Fired when the unsaved-changes flag toggles. */
+    readonly dirtyChange: _angular_core.OutputEmitterRef<boolean>;
     /** Fired with freshly-serialised `.pptx` bytes whenever {@link getContent} materialises the deck. */
     readonly contentChange: _angular_core.OutputEmitterRef<Uint8Array<ArrayBufferLike>>;
     /** Fired when the user edits document properties in the Info dialog. */
@@ -3959,7 +4343,6 @@ declare class PowerPointViewerComponent {
     /** Fired when the collaboration/broadcast session stops. Mirrors React/Vue. */
     readonly stopCollaboration: _angular_core.OutputEmitterRef<void>;
     protected readonly loader: LoadContentService;
-    private readonly exportSvc;
     protected readonly editor: EditorStateService;
     private readonly fonts;
     protected readonly collab: CollaborationService;
@@ -3977,6 +4360,16 @@ declare class PowerPointViewerComponent {
     protected readonly session: ViewerCollaborationSessionService;
     protected readonly formatPainter: ViewerFormatPainterService;
     private readonly keyboard;
+    protected readonly zoomSvc: ViewerZoomService;
+    private readonly touchGestures;
+    protected readonly presentationMode: ViewerPresentationModeService;
+    protected readonly mobileSheetSvc: ViewerMobileSheetService;
+    protected readonly inspectorPanel: ViewerInspectorPanelService;
+    protected readonly fileIO: ViewerFileIOService;
+    protected readonly themeGallery: ViewerThemeGalleryService;
+    protected readonly canvasEditing: ViewerCanvasEditingService;
+    protected readonly collabCursor: ViewerCollabCursorService;
+    protected readonly docProperties: ViewerDocumentPropertiesService;
     /** Handle on the secondary-dialog host (keep-annotations prompt). */
     private readonly extraDialogs;
     /** Surface the encrypted-file notice dialog alongside the inline fallback. */
@@ -4000,27 +4393,8 @@ declare class PowerPointViewerComponent {
     /** Inherited template (master/layout) elements for the active slide, when editing. */
     protected readonly activeTemplateElements: _angular_core.Signal<readonly PptxElement[]>;
     protected readonly rootStyle: _angular_core.Signal<Record<string, string>>;
-    protected readonly zoom: _angular_core.WritableSignal<number>;
-    protected readonly zoomPercent: _angular_core.Signal<number>;
-    /**
-     * Remote cursors filtered to the slide the local user is viewing, so peers'
-     * cursors only appear on the shared slide (mirrors React/Vue).
-     */
-    protected readonly collabCursors: _angular_core.Signal<pptx_angular_viewer.RemoteCursor[]>;
-    /** Timestamp of the last cursor broadcast (throttle gate). */
-    private lastCursorBroadcast;
-    /** Fullscreen presentation-mode overlay visibility. */
-    protected readonly presenting: _angular_core.WritableSignal<boolean>;
-    /** Presenter-view (speaker) overlay visibility. */
-    protected readonly presentingPresenter: _angular_core.WritableSignal<boolean>;
-    /** Epoch ms when presenter view started (drives the elapsed timer). */
-    protected readonly presenterStartTime: _angular_core.WritableSignal<number | null>;
     /** Slide-sorter grid overlay visibility. */
     protected readonly showSorter: _angular_core.WritableSignal<boolean>;
-    /** Open mobile bottom-sheet (slides / menu), or null. */
-    protected readonly mobileSheet: _angular_core.WritableSignal<"menu" | "slides" | null>;
-    /** Speaker-notes strip visibility. */
-    protected readonly showNotes: _angular_core.WritableSignal<boolean>;
     /** Whether the left slides panel is collapsed (top-bar sidebar toggle). */
     protected readonly slidesPanelCollapsed: _angular_core.WritableSignal<boolean>;
     /** Active drawing tool (from the ribbon Draw tab). */
@@ -4029,24 +4403,6 @@ declare class PowerPointViewerComponent {
     protected readonly activeDrawColor: _angular_core.WritableSignal<string>;
     /** Active ink stroke width in stage pixels. */
     protected readonly activeDrawWidth: _angular_core.WritableSignal<number>;
-    /** Active right-docked tool panel (comments / accessibility / selection), or null. */
-    protected readonly activePanel: _angular_core.WritableSignal<"comments" | "accessibility" | "signatures" | "selection" | null>;
-    /**
-     * 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`.
-     */
-    protected readonly inspectorContent: _angular_core.Signal<"slide" | "element" | "comments" | "accessibility" | "signatures" | "selection" | null>;
-    /**
-     * Whether the right-docked inspector is showing the format panel (element or
-     * slide properties). Drives the top-bar inspector-toggle active state.
-     */
-    protected readonly inspectorPaneOpen: _angular_core.Signal<boolean>;
-    /** Inspector content, but null on mobile once the user has swiped it away. */
-    protected readonly visibleInspectorKind: _angular_core.Signal<"slide" | "element" | "comments" | "accessibility" | "signatures" | "selection" | null>;
-    /** Accessible-label translation key for the inspector host, by active content. */
-    protected readonly inspectorLabel: _angular_core.Signal<"" | "pptx.toolbar.comments" | "pptx.accessibility.title" | "pptx.viewer.digitalSignatures" | "pptx.selectionPane.title" | "pptx.viewer.elementProperties" | "pptx.viewer.slideProperties">;
     /**
      * Which mobile bottom-bar slot is currently "active" (highlighted). The
      * comments panel maps to the Comments slot; an open notes strip maps to
@@ -4054,23 +4410,8 @@ declare class PowerPointViewerComponent {
      * selected the inspector (Format) is showing inline so it maps to inspector.
      */
     protected readonly mobileBarSheet: _angular_core.Signal<MobileBarSheet>;
-    /** Document-properties (Info) dialog visibility. */
-    protected readonly showProperties: _angular_core.WritableSignal<boolean>;
-    /** Hyperlink-edit dialog visibility. */
-    protected readonly showHyperlink: _angular_core.WritableSignal<boolean>;
-    /** Local overrides applied to document properties via the Info dialog. */
-    private readonly coreOverride;
     /** Comments on the active slide. */
     protected readonly activeComments: _angular_core.Signal<PptxComment[]>;
-    /** Document core properties (loaded, with any in-session edits merged in). */
-    protected readonly coreProperties: _angular_core.Signal<PptxCoreProperties>;
-    /** Open editor context-menu position (client coords), or null. */
-    protected readonly contextMenuPos: _angular_core.WritableSignal<{
-        x: number;
-        y: number;
-    } | null>;
-    /** Id of the element being inline text-edited, or null. */
-    protected readonly editingId: _angular_core.WritableSignal<string | null>;
     /** Whether the dot-grid overlay is visible on the editor canvas. */
     protected readonly showGrid: _angular_core.WritableSignal<boolean>;
     /** Whether ruler strips are visible on the editor canvas. */
@@ -4079,12 +4420,8 @@ declare class PowerPointViewerComponent {
     protected readonly showGuides: _angular_core.WritableSignal<boolean>;
     /** Whether snap-to-grid is active on the editor canvas. */
     protected readonly snapToGrid: _angular_core.WritableSignal<boolean>;
-    /** Whether the theme-gallery overlay is visible (Design → Browse Themes). */
-    protected readonly showThemeGallery: _angular_core.WritableSignal<boolean>;
     /** Whether the Insert SmartArt gallery dialog is open. */
     protected readonly showSmartArtInsert: _angular_core.WritableSignal<boolean>;
-    /** The `name` property of the loaded deck's theme (for check-mark in gallery). */
-    protected readonly activeThemeName: _angular_core.Signal<string | undefined>;
     /**
      * Stable, always-truthy key for the slide-properties form. Changes only when
      * the active slide changes, so the `@if` recreates (and reseeds) the
@@ -4094,131 +4431,19 @@ declare class PowerPointViewerComponent {
     protected readonly slidePropsKey: _angular_core.Signal<string>;
     /** The single selected element on the active slide (for the inspector). */
     protected readonly selectedElement: _angular_core.Signal<PptxElement | null>;
-    /**
-     * 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.
-     */
-    private readonly contentOverride;
     constructor();
     /**
      * Serialise the current presentation to `.pptx` bytes (imperative handle).
      * When editing, this serialises the editor's edited deck so changes persist.
      */
     getContent(): Promise<Uint8Array>;
-    /**
-     * 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.
-     */
-    saveAsPptx(): Promise<void>;
     goTo(index: number): void;
     goPrev(): void;
     goNext(): void;
-    /**
-     * 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.
-     */
-    protected onCollabPointerMove(event: PointerEvent): void;
-    /** The loaded source `.pptx` bytes (for elected-writer write-back), if any. */
-    private currentSourceBytes;
-    /**
-     * 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: PptxThemePreset): void;
-    /**
-     * 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.
-     */
-    private setupTouchGestures;
-    zoomIn(): void;
-    zoomOut(): void;
-    zoomReset(): void;
-    /** Open the fullscreen presentation overlay from the current slide. */
-    present(): void;
-    /**
-     * 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: number): void;
-    /**
-     * Open a separate audience tab and hand off the deck via the shared
-     * IndexedDB store. Mirrors React's presenter "open audience window".
-     */
-    openAudienceWindow(): void;
-    /** Open the presenter (speaker) view: current+next slide, notes, timer. */
-    presentPresenter(): void;
-    /** Close the presenter view (and any audience overlay/window it opened). */
-    exitPresenter(): void;
     /** Review ▸ Compare: pick a `.pptx` and diff it against the current deck. */
     protected onOpenCompare(): void;
-    /**
-     * Double-click text edit entry: equations open the equation editor instead
-     * of the inline text editor (mirrors React's dbl-click-to-edit-equation).
-     */
-    protected onTextEditStart(id: string): void;
-    /** Apply a Ctrl/Cmd+B/I/U toggle from the inline editor (undoable). */
-    protected onTextFormat(event: {
-        id: string;
-        updates: Partial<TextStyle>;
-    }): void;
-    /** Presentation exited with ink on it: offer the keep/discard prompt. */
-    protected onPresentationAnnotationsExit(map: SlideAnnotationMap): void;
     /** Swap the deck for a restored version-history snapshot. */
     protected onRestoreVersion(bytes: Uint8Array): void;
-    /** Toggle the speaker-notes strip. */
-    toggleNotes(): void;
-    /**
-     * File ▸ Open: host override (`onOpenFile` input) takes precedence; otherwise
-     * a built-in native picker loads the chosen presentation in place.
-     */
-    openFile(): void;
-    /** Live downward drag offset for the notes sheet (px; 0 when idle). */
-    protected readonly notesDragY: _angular_core.WritableSignal<number>;
-    /** True while a notes-sheet drag is in progress (disables the snap-back transition). */
-    protected readonly notesDragging: _angular_core.WritableSignal<boolean>;
-    private notesDragStartY;
-    protected onNotesPointerDown(event: PointerEvent): void;
-    protected onNotesPointerMove(event: PointerEvent): void;
-    protected onNotesPointerUp(event: PointerEvent): void;
-    /** True once the user swiped the inspector away on mobile (until reopened). */
-    protected readonly mobileInspectorHidden: _angular_core.WritableSignal<boolean>;
-    /** Live downward drag offset for the inspector host (px; 0 when idle). */
-    protected readonly inspectorDragY: _angular_core.WritableSignal<number>;
-    /** True while an inspector-host drag is in progress. */
-    protected readonly inspectorDragging: _angular_core.WritableSignal<boolean>;
-    private inspectorDragStartY;
-    protected onInspectorPointerDown(event: PointerEvent): void;
-    protected onInspectorPointerMove(event: PointerEvent): void;
-    protected onInspectorPointerUp(event: PointerEvent): void;
-    /**
-     * 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).
-     */
-    protected onMobileInsert(): void;
     /**
      * Mobile "Format" slot: surface the inspector for the current selection. The
      * inspector renders inline (below the canvas) whenever an element is selected
@@ -4227,86 +4452,24 @@ declare class PowerPointViewerComponent {
      * instead).
      */
     protected onMobileFormat(): void;
-    /** Toggle a right-docked tool panel (clicking the active one closes it). */
-    togglePanel(panel: 'comments' | 'accessibility' | 'signatures' | 'selection'): void;
     /** Receive draw-tool state changes from the ribbon Draw tab. */
     protected onDrawToolChange(state: {
         tool: string;
         color: string;
         width: number;
     }): void;
-    /** Receive a completed ink stroke and append it to the active slide. */
-    protected onInkStrokeComplete(ink: InkPptxElement): void;
-    /** Receive an eraser hit and delete the targeted ink element. */
-    protected onEraserHit(id: string): void;
     /** Append a comment to the active slide (one history entry). */
     onCommentAdd(text: string): void;
     /** Remove a comment from the active slide. */
     onCommentRemove(id: string): void;
     /** Toggle a comment's resolved flag on the active slide. */
     onCommentResolve(id: string): void;
-    /**
-     * 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: Partial<PptxCoreProperties>): void;
-    /** Apply a hyperlink edit to the selected element (one history entry). */
-    onHyperlinkSave(patch: Partial<PptxElement>): void;
-    /**
-     * 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: {
-        id: string;
-        additive: boolean;
-    }): void;
-    /** Empty-stage press: disarm the painter if armed, else clear the selection. */
-    onBackgroundClick(): void;
-    /** Right-click: select the element under the cursor and open the menu. */
-    onContextMenu(event: {
-        id: string | null;
-        x: number;
-        y: number;
-    }): void;
-    /** Update the active slide's background colour. */
-    onSlideBackground(event: Event): void;
-    /** Update the active slide's speaker notes. */
-    onSlideNotes(event: Event): void;
-    /** Update the active slide's speaker notes from the editable NotesPanel. */
-    onNotesUpdate(notes: string): void;
-    onSelectionPaneBringForward(id: string): void;
-    onSelectionPaneSendBackward(id: string): void;
-    onToggleElementHidden(id: string): void;
     /**
      * Insert a new SmartArt element built from the dialog's chosen preset + item
      * texts. The element id is left empty so `EditorStateService.addElement`
      * assigns one; the insert is a single undo/redo history entry.
      */
     protected onInsertSmartArt(event: SmartArtInsertEvent): void;
-    /** Commit an inline text edit: replace the element's text (one history entry). */
-    onTextCommit(event: {
-        id: string;
-        text: string;
-    }): void;
-    /**
-     * 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).
-     */
-    protected onTableCellCommit(event: {
-        id: string;
-        commit: TableCellCommit;
-    }): void;
-    /**
-     * Persist a structural table change originating on the canvas (column / row
-     * drag-resize) as one undoable history entry.
-     */
-    protected onTableChange(event: {
-        id: string;
-        tableData: PptxTableData;
-    }): void;
     /**
      * Editing keyboard shortcuts (only when `canEdit` and not typing in a
      * field or presenting). The decorator must live on the component; the logic
@@ -4339,6 +4502,115 @@ declare function applyMove(start: Box, dx: number, dy: number): Box;
  */
 declare function applyResize(start: Box, handle: ResizeHandle, dx: number, dy: number, min?: number): Box;
 
+/**
+ * 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.
+ */
+
+/** A selected element's bounding box (stage coords), keyed by id. */
+interface SelectionBox extends Box {
+    id: string;
+}
+/** A resize-handle's render box (stage coords) plus its cursor style. */
+interface HandleBox {
+    handle: ResizeHandle;
+    left: number;
+    top: number;
+    size: number;
+    cursor: string;
+}
+/** A rotate/adjust handle's render box (stage coords). */
+interface CornerHandleBox {
+    left: number;
+    top: number;
+    size: number;
+}
+
+/** The draw tools `SlideCanvasComponent` forwards from the ribbon Draw tab. */
+type DrawTool = 'select' | 'pen' | 'highlighter' | 'eraser' | 'freeform';
+/** Live host accessors + emitters the ink-drawing controller needs. */
+interface InkDrawingHost {
+    readonly stageElement: () => HTMLElement | undefined;
+    readonly effectiveScale: () => number;
+    readonly elements: () => readonly PptxElement[];
+    readonly drawTool: () => DrawTool;
+    readonly drawColor: () => string;
+    readonly drawWidth: () => number;
+    readonly emitInkStrokeComplete: (ink: InkPptxElement) => void;
+    readonly emitEraserHit: (id: string) => void;
+}
+declare class InkDrawingService {
+    /** Whether a freehand stroke is in progress. Signal for template reactivity. */
+    readonly active: _angular_core.WritableSignal<boolean>;
+    /** SVG path `d` for the live stroke preview (updated on every pointer move). */
+    readonly liveInkPath: _angular_core.WritableSignal<string>;
+    /** Accumulated points for the stroke currently being drawn. */
+    private points;
+    private host;
+    /** Wire the host accessors/emitters (called once from the component constructor). */
+    bind(host: InkDrawingHost): void;
+    private requireHost;
+    /** True when a draw tool (anything but 'select') should own the current gesture. */
+    isDrawToolActive(): boolean;
+    /**
+     * 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: PointerEvent): void;
+    /** Append a point to the in-progress stroke. Returns false when no stroke is active (caller should fall through). */
+    handlePointerMove(event: PointerEvent): boolean;
+    /** Finalise the in-progress stroke and emit it. Returns false when no stroke was active (caller should fall through). */
+    handlePointerUp(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InkDrawingService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<InkDrawingService>;
+}
+
+/** A user-created guide line dragged from a ruler strip. */
+interface RulerGuide {
+    id: string;
+    axis: 'x' | 'y';
+    pos: number;
+}
+/** Live host accessors the guide controller needs. */
+interface RulerGuidesHost {
+    readonly editable: () => boolean;
+    readonly stageElement: () => HTMLElement | undefined;
+    readonly effectiveScale: () => number;
+    readonly canvasSize: () => CanvasSize;
+}
+declare 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.
+     */
+    readonly rulerGuides: _angular_core.WritableSignal<readonly RulerGuide[]>;
+    /** Active guide-drag state (id + axis only), or null when nothing is being dragged. */
+    private guideDrag;
+    private host;
+    /** Wire the host accessors (called once from the component constructor). */
+    bind(host: RulerGuidesHost): void;
+    private requireHost;
+    /** True while an existing or just-created guide is being dragged. */
+    isDragging(): boolean;
+    /** Begin dragging an existing guide. Called from the guide handle pointerdown. */
+    onGuidePointerDown(event: PointerEvent, id: string, axis: RulerGuide['axis']): void;
+    /** Remove a guide (called on guide handle double-click). */
+    onGuideDoubleClick(event: MouseEvent, id: string): void;
+    /** Drag from the horizontal ruler to create a new horizontal guide (axis:'y'). */
+    onHRulerPointerDown(event: PointerEvent): void;
+    /** Drag from the vertical ruler to create a new vertical guide (axis:'x'). */
+    onVRulerPointerDown(event: PointerEvent): void;
+    /** Update the dragged guide's position. Returns false when no guide drag is in progress (caller should fall through). */
+    handlePointerMove(event: PointerEvent): boolean;
+    /** End the guide drag. Returns false when no guide drag was in progress (caller should fall through). */
+    handlePointerUp(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RulerGuidesService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<RulerGuidesService>;
+}
+
 /** A single tick mark on a ruler strip. */
 interface RulerTick {
     /** Position in screen pixels along the ruler. */
@@ -4348,12 +4620,7 @@ interface RulerTick {
     /** Label to display (only on major ticks, every N inches). */
     label: string | null;
 }
-/** A user-created guide line dragged from a ruler strip. */
-interface RulerGuide {
-    id: string;
-    axis: 'x' | 'y';
-    pos: number;
-}
+
 /**
  * SlideCanvasComponent: Angular port of the React `SlideCanvas.tsx` and Vue
  * `SlideCanvas.vue`.
@@ -4361,8 +4628,8 @@ interface RulerGuide {
  * 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.
  */
 declare class SlideCanvasComponent {
     readonly slide: _angular_core.InputSignal<PptxSlide | undefined>;
@@ -4498,8 +4765,6 @@ declare class SlideCanvasComponent {
     }>;
     private drag;
     private editCancelled;
-    /** Active guide-drag state (id + axis only), or null when nothing is being dragged. */
-    private guideDrag;
     private marquee;
     /** Live marquee rectangle (stage coords) while rubber-band selecting. */
     readonly marqueeRect: _angular_core.WritableSignal<{
@@ -4510,28 +4775,15 @@ declare class SlideCanvasComponent {
     } | null>;
     /** Live alignment-snap guide lines (stage coords) during a move. */
     readonly snapGuides: _angular_core.WritableSignal<readonly SnapGuide[]>;
-    /**
-     * 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.
-     */
-    readonly rulerGuides: _angular_core.WritableSignal<readonly RulerGuide[]>;
-    /** Accumulated points for the stroke currently being drawn. */
-    private inkPoints;
-    /** Whether a freehand stroke is in progress. Signal for template reactivity. */
-    readonly inkActiveSignal: _angular_core.WritableSignal<boolean>;
-    /** SVG path `d` for the live stroke preview (updated on every pointer move). */
-    readonly liveInkPath: _angular_core.WritableSignal<string>;
+    /** Per-instance pen/highlighter/freeform/eraser drawing controller. */
+    protected readonly inkDrawing: InkDrawingService;
+    /** Per-instance user-created ruler-guide controller. */
+    protected readonly rulerGuidesSvc: RulerGuidesService;
     private readonly textEditor;
     private readonly stageRef;
     private readonly viewportRef;
-    /**
-     * 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.
-     */
-    private readonly fitScale;
+    /** Per-instance auto-fit scale measurement (see {@link CanvasFitService}). */
+    private readonly canvasFit;
     /**
      * 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
@@ -4543,11 +4795,6 @@ declare class SlideCanvasComponent {
     /** Last-tap timestamp + element id, for synthetic double-tap detection on touch. */
     private lastTap;
     constructor();
-    /**
-     * 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.
-     */
-    private recomputeFit;
     readonly elements: _angular_core.Signal<PptxElement[]>;
     /**
      * Template elements + the slide's own elements, template first (behind). Used
@@ -4575,48 +4822,25 @@ declare class SlideCanvasComponent {
         height: number;
     }[]>;
     /** Bounding boxes (stage coords) for the selected elements. */
-    readonly selectionBoxes: _angular_core.Signal<{
-        id: string;
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    }[]>;
+    readonly selectionBoxes: _angular_core.Signal<SelectionBox[]>;
     /** The single selected element's box, or null when 0 or >1 are selected. */
     readonly singleSelected: _angular_core.Signal<(Box & {
         id: string;
     }) | null>;
     /** Resize-handle render boxes (stage coords) for the single selection. */
-    readonly handleBoxes: _angular_core.Signal<{
-        handle: ResizeHandleId;
-        left: number;
-        top: number;
-        size: number;
-        cursor: string;
-    }[]>;
+    readonly handleBoxes: _angular_core.Signal<HandleBox[]>;
     /** Rotation-handle box (stage coords) above the single selection, or null. */
-    readonly rotateHandle: _angular_core.Signal<{
-        left: number;
-        top: number;
-        size: number;
-    } | null>;
+    readonly rotateHandle: _angular_core.Signal<CornerHandleBox | null>;
     /**
      * Shape-adjustment-handle box (stage coords) for the single selection, or
      * null. Sits just outside the top-left corner so it never collides with the
      * resize/rotate handles. Selection-only + editable-only, so it vanishes in
      * presentation alongside the rest of the edit chrome.
      */
-    readonly adjustHandle: _angular_core.Signal<{
-        left: number;
-        top: number;
-        size: number;
-    } | null>;
+    readonly adjustHandle: _angular_core.Signal<CornerHandleBox | null>;
     /**
      * 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}.
      */
     private interactiveElementIdAt;
     onStagePointerDown(event: PointerEvent): void;
@@ -4648,14 +4872,6 @@ declare class SlideCanvasComponent {
     onRotatePointerDown(event: PointerEvent): void;
     onPointerMove(event: PointerEvent): void;
     onPointerUp(): void;
-    /** Begin dragging an existing guide. Called from the guide handle pointerdown. */
-    onGuidePointerDown(event: PointerEvent, id: string, axis: RulerGuide['axis']): void;
-    /** Remove a guide (called on guide handle double-click). */
-    onGuideDoubleClick(event: MouseEvent, id: string): void;
-    /** Drag from the horizontal ruler to create a new horizontal guide (axis:'y'). */
-    onHRulerPointerDown(event: PointerEvent): void;
-    /** Drag from the vertical ruler to create a new vertical guide (axis:'x'). */
-    onVRulerPointerDown(event: PointerEvent): void;
     readonly wrapperStyle: _angular_core.Signal<StyleMap>;
     /**
      * Public accessor of the internal effective scale for ruler/overlay sizing
@@ -4833,8 +5049,7 @@ interface Paragraph {
  * 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)
@@ -4842,14 +5057,13 @@ interface Paragraph {
  *  - `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)
  */
 declare class ElementRendererComponent {
     readonly element: _angular_core.InputSignal<PptxElement>;
@@ -4962,7 +5176,7 @@ declare class ElementRendererComponent {
  * 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.
  */
 declare class ConnectorRendererComponent {
     readonly element: _angular_core.InputSignal<PptxElement>;
@@ -5073,7 +5287,7 @@ declare class ChartRendererComponent {
  * 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
@@ -5288,7 +5502,7 @@ interface InkStroke {
  * 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
@@ -5916,7 +6130,6 @@ declare class PresentationOverlayComponent implements OnInit {
  * 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