pptx-angular-viewer 0.1.0 → 1.1.11

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

@@ -1,7 +1,9 @@
 import * as pptx_viewer_core from 'pptx-viewer-core';
-import { PptxSlide, PptxTheme, PptxSlideMaster, PptxElement } from 'pptx-viewer-core';
+import { PptxSlide, PptxElement, PptxTheme, PptxSlideMaster, PptxTableCell, Model3DPptxElement, ZoomPptxElement, TextSegment, XmlObject, ShapeStyle } from 'pptx-viewer-core';
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Provider } from '@angular/core';
+import { OnInit, OnDestroy, InjectionToken, Provider } from '@angular/core';
+import { Options } from 'html2canvas-pro';
+import { SafeHtml } from '@angular/platform-browser';
 
 /**
  * Theme configuration types for the PowerPoint viewer.
@@ -164,6 +166,108 @@ declare const DEFAULT_FILL_COLOR = "#3b82f6";
 /** Fallback shape stroke colour. */
 declare const DEFAULT_STROKE_COLOR = "#1f2937";
 
+/**
+ * Pure geometry helpers for aligning and distributing selected editor elements.
+ *
+ * No Angular imports, no DOM, no side effects — only data in, data out.
+ * All inputs are treated as immutable.
+ */
+/** Horizontal or vertical alignment mode. */
+type AlignMode = 'left' | 'centerH' | 'right' | 'top' | 'middle' | 'bottom';
+/** Axis along which to distribute spacing evenly. */
+type DistributeMode = 'horizontal' | 'vertical';
+
+declare class EditorStateService {
+    private readonly history;
+    /** The editable slide deck (a clone of the loaded presentation). */
+    readonly slides: _angular_core.WritableSignal<readonly PptxSlide[]>;
+    /** Ids of the currently selected elements (on the active slide). */
+    readonly selectedIds: _angular_core.WritableSignal<readonly string[]>;
+    /** Whether the deck has unsaved edits. */
+    readonly dirty: _angular_core.WritableSignal<boolean>;
+    readonly canUndo: _angular_core.WritableSignal<boolean>;
+    readonly canRedo: _angular_core.WritableSignal<boolean>;
+    readonly undoLabel: _angular_core.WritableSignal<string | undefined>;
+    readonly redoLabel: _angular_core.WritableSignal<string | undefined>;
+    readonly hasSelection: _angular_core.Signal<boolean>;
+    /** Replace the editable deck (clones the source); resets selection + history. */
+    setSlides(slides: readonly PptxSlide[]): void;
+    /** Current editable slides as a fresh (cloned) array. */
+    snapshot(): readonly PptxSlide[];
+    select(ids: readonly string[]): void;
+    toggleSelect(id: string, additive: boolean): void;
+    clearSelection(): void;
+    /** Select every element on a slide. */
+    selectAll(slideIndex: number): void;
+    isSelected(id: string): boolean;
+    moveSelectedBy(slideIndex: number, dx: number, dy: number): void;
+    nudgeSelected(slideIndex: number, dirX: number, dirY: number): void;
+    setPosition(slideIndex: number, id: string, x: number, y: number): void;
+    resize(slideIndex: number, id: string, width: number, height: number): void;
+    updateElement(slideIndex: number, id: string, patch: Partial<PptxElement>): void;
+    deleteSelected(slideIndex: number): void;
+    duplicateSelected(slideIndex: number): void;
+    bringSelectedToFront(slideIndex: number): void;
+    sendSelectedToBack(slideIndex: number): void;
+    bringSelectedForward(slideIndex: number): void;
+    sendSelectedBackward(slideIndex: number): void;
+    /** Record a single history snapshot at the start of a drag/resize gesture. */
+    beginTransform(label: string): void;
+    /**
+     * Apply a live transform during a gesture WITHOUT recording history (the
+     * gesture's snapshot was taken in {@link beginTransform}). Accepts any subset
+     * of x/y/width/height.
+     */
+    applyTransform(slideIndex: number, id: string, box: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+        rotation?: number;
+    }): void;
+    undo(): void;
+    redo(): void;
+    /** Align the selected elements within their group bounds (one history entry). */
+    alignSelected(slideIndex: number, mode: AlignMode): void;
+    /** Evenly distribute the selected elements along an axis (one history entry). */
+    distributeSelected(slideIndex: number, mode: DistributeMode): void;
+    private applyPositionMap;
+    /** Group the selected elements into a single group element. */
+    groupSelected(slideIndex: number): void;
+    /** Ungroup the single selected group back into its children. */
+    ungroupSelected(slideIndex: number): void;
+    private clipboard;
+    /** Whether the clipboard holds copied elements (enables paste). */
+    readonly hasClipboard: _angular_core.WritableSignal<boolean>;
+    /** Copy the selected elements to the in-memory clipboard. */
+    copySelected(slideIndex: number): void;
+    /** Copy then delete the selected elements. */
+    cutSelected(slideIndex: number): void;
+    /** Paste clipboard elements onto a slide (offset + fresh ids) and select them. */
+    paste(slideIndex: number): void;
+    /** Append a new element to a slide (records history) and select it. */
+    addElement(slideIndex: number, element: PptxElement): void;
+    /** Patch slide-level properties (background, notes, …); one history entry. */
+    updateSlide(slideIndex: number, patch: Partial<PptxSlide>): void;
+    /** Insert a blank slide after `afterIndex` (records history). */
+    addSlide(afterIndex: number): void;
+    /** Delete a slide (keeps at least one; records history). */
+    deleteSlide(index: number): void;
+    /** Duplicate a slide, inserting the copy after it (records history). */
+    duplicateSlide(index: number): void;
+    /** Reorder a slide from `from` to `to` (records history). */
+    moveSlide(from: number, to: number): void;
+    private renumber;
+    private zOrder;
+    private commit;
+    private syncHistory;
+    private clone;
+    private newId;
+    private idCounter;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorStateService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<EditorStateService>;
+}
+
 /**
  * `LoadContentService` — Angular port of the React `useLoadContent` hook and
  * the Vue `useLoadContent` composable.
@@ -205,8 +309,13 @@ declare class LoadContentService {
     private renderToken;
     private activeBlobUrls;
     constructor();
-    /** Serialise the current presentation back to `.pptx` bytes. */
+    /** Serialise the current (loaded) presentation back to `.pptx` bytes. */
     getContent(): Promise<Uint8Array>;
+    /**
+     * Serialise an explicit set of slides back to `.pptx` bytes (e.g. the
+     * editor's edited deck) using the loaded presentation's handler.
+     */
+    saveSlides(slides: readonly PptxSlide[]): Promise<Uint8Array>;
     /** Parse the supplied `.pptx` bytes into the reactive signals. */
     load(raw: Uint8Array | ArrayBuffer | null | undefined): Promise<void>;
     private disposeHandler;
@@ -250,34 +359,160 @@ declare class PowerPointViewerComponent {
     /** Fired when the in-memory content changes after edits. (Editing not yet ported.) */
     readonly contentChange: _angular_core.OutputEmitterRef<Uint8Array<ArrayBufferLike>>;
     protected readonly loader: LoadContentService;
+    private readonly exportSvc;
+    protected readonly editor: EditorStateService;
+    /** The `<main>` host; used to locate the live `.pptx-ng-canvas-stage`. */
+    private readonly mainEl;
+    /** True while a PNG/PDF export is in progress (disables the buttons). */
+    protected readonly exporting: _angular_core.WritableSignal<boolean>;
     protected readonly activeSlideIndex: _angular_core.WritableSignal<number>;
+    /** Slides to display: the editable deck when `canEdit`, else the loaded deck. */
+    protected readonly displaySlides: _angular_core.Signal<readonly pptx_viewer_core.PptxSlide[]>;
     protected readonly slideCount: _angular_core.Signal<number>;
     protected readonly activeSlide: _angular_core.Signal<pptx_viewer_core.PptxSlide>;
     protected readonly rootStyle: _angular_core.Signal<Record<string, string>>;
     protected readonly zoom: _angular_core.WritableSignal<number>;
     protected readonly zoomPercent: _angular_core.Signal<number>;
+    /** Fullscreen presentation-mode overlay visibility. */
+    protected readonly presenting: _angular_core.WritableSignal<boolean>;
+    /** Slide-sorter grid overlay visibility. */
+    protected readonly showSorter: _angular_core.WritableSignal<boolean>;
+    /** Speaker-notes strip visibility. */
+    protected readonly showNotes: _angular_core.WritableSignal<boolean>;
+    /** Find-in-slides bar visibility. */
+    protected readonly showFind: _angular_core.WritableSignal<boolean>;
+    /** 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>;
+    /** Notes for the active slide, if any. */
+    protected readonly activeNotes: _angular_core.Signal<string>;
+    /**
+     * Stable, always-truthy key for the slide-properties form. Changes only when
+     * the active slide changes, so the `@if` recreates (and reseeds) the
+     * uncontrolled notes/background inputs on navigation — but never mid-typing.
+     * String-prefixed so slide index 0 stays truthy under `@if (…; as key)`.
+     */
+    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>;
     constructor();
-    /** Serialise the current presentation to `.pptx` bytes (imperative handle). */
+    /**
+     * Serialise the current presentation to `.pptx` bytes (imperative handle).
+     * When editing, this serialises the editor's edited deck so changes persist.
+     */
     getContent(): Promise<Uint8Array>;
     goTo(index: number): void;
     goPrev(): void;
     goNext(): void;
+    /** Horizontal-swipe tracking start coordinates (touch begins on the canvas). */
+    private swipeStartX;
+    private swipeStartY;
+    /**
+     * Begin tracking a horizontal swipe for slide navigation.
+     *
+     * To disambiguate a navigation swipe from an element drag, swipe-nav is only
+     * armed when editing is off (`!canEdit()`). When `canEdit()` is true,
+     * pointer/touch gestures belong to element manipulation (move/resize/rotate),
+     * so we never hijack them. The large ‹ › buttons remain available in all
+     * modes for explicit navigation.
+     */
+    onMainTouchStart(event: TouchEvent): void;
+    /**
+     * Complete a swipe: a predominantly horizontal drag of at least the threshold
+     * navigates to the previous (swipe right) or next (swipe left) slide.
+     */
+    onMainTouchEnd(event: TouchEvent): void;
     zoomIn(): void;
     zoomOut(): void;
     zoomReset(): void;
+    /** Open the fullscreen presentation overlay from the current slide. */
+    present(): void;
+    /** Toggle the speaker-notes strip. */
+    toggleNotes(): 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;
+    /** 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;
+    /** Commit an inline text edit: replace the element's text (one history entry). */
+    onTextCommit(event: {
+        id: string;
+        text: string;
+    }): void;
+    /**
+     * Editing keyboard shortcuts (only when `canEdit` and not typing in a
+     * field or presenting): Delete, Ctrl/Cmd+Z/Y undo/redo, Ctrl/Cmd+D
+     * duplicate, arrow-key nudge (Shift = ×10).
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    /** Resolve the live slide-stage element within `<main>`. */
+    private stageElement;
+    /** Export the current slide as a PNG download. */
+    exportPng(): Promise<void>;
+    /**
+     * Export every slide to a multi-page PDF. Each slide is made the live stage,
+     * given a render tick to settle, captured to a canvas, then the original
+     * slide is restored.
+     */
+    exportPdf(): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PowerPointViewerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PowerPointViewerComponent, "pptx-viewer", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "canEdit": { "alias": "canEdit"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "collaboration": { "alias": "collaboration"; "required": false; "isSignal": true; }; }, { "activeSlideChange": "activeSlideChange"; "dirtyChange": "dirtyChange"; "contentChange": "contentChange"; }, never, never, true, never>;
 }
 
+/**
+ * Pure geometry for interactive element drag/resize.
+ *
+ * Stage-space deltas in, a new bounding box out — no DOM, no framework, so the
+ * SlideCanvas pointer wiring stays thin and the maths is unit-testable.
+ */
+/** The eight resize-handle positions around a selection box. */
+type ResizeHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
+/** An axis-aligned box in stage (slide) coordinates. */
+interface Box {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** All handles, in render order (corners + edge midpoints). */
+declare const RESIZE_HANDLES: readonly ResizeHandle[];
+/** Translate a box by a stage-space delta. */
+declare function applyMove(start: Box, dx: number, dy: number): Box;
+/**
+ * Resize `start` by dragging `handle` with a stage-space delta, clamping to
+ * `min`. When clamping at the min size, the edge opposite the dragged handle
+ * stays fixed.
+ */
+declare function applyResize(start: Box, handle: ResizeHandle, dx: number, dy: number, min?: number): Box;
+
 /**
  * Basic, framework-agnostic style computation for slide elements, returning
  * `[ngStyle]`-compatible maps.
  *
  * This mirrors the Vue package's `element-style.ts` (and a deliberately small
  * subset of the React `viewer/utils/*` style layer). It is enough to position
- * and paint text boxes, basic preset shapes, and images. Advanced visuals
- * (gradients, custom geometry clip-paths, shadows, 3D, image effects, text
- * warp) are tracked in PORTING.md.
+ * 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.
  *
  * Long term the *logic* here is a shared-extraction candidate — only the
  * return type (CSS map shape) differs per framework — so a future refactor
@@ -303,30 +538,174 @@ declare function getTextBlockStyle(el: PptxElement): StyleMap;
 /** Resolve a displayable image source for picture/image/media poster frames. */
 declare function getImageSrc(el: PptxElement, mediaDataUrls: Map<string, string>): string | undefined;
 
+/**
+ * A single guide line to draw.
+ *
+ * `axis: 'x'` → a vertical line at x = `pos`, spanning y ∈ [start, end].
+ * `axis: 'y'` → a horizontal line at y = `pos`, spanning x ∈ [start, end].
+ */
+interface SnapGuide {
+    axis: 'x' | 'y';
+    /** The fixed coordinate of the line on its own axis. */
+    pos: number;
+    /** Start of the line along the perpendicular axis. */
+    start: number;
+    /** End of the line along the perpendicular axis. */
+    end: number;
+}
+
 /**
  * SlideCanvasComponent — Angular port of the React `SlideCanvas.tsx` and Vue
- * `SlideCanvas.vue` (viewer-first subset).
+ * `SlideCanvas.vue`.
  *
  * Renders the active slide as a fixed-size stage scaled by `zoom`, with each
- * element absolutely positioned. The React version additionally layered in
- * rulers, grid, guides, marquee/selection, connector-creation, drawing, and
- * collaboration overlays — all tracked in PORTING.md.
+ * 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.
  */
 declare class SlideCanvasComponent {
     readonly slide: _angular_core.InputSignal<PptxSlide | undefined>;
     readonly canvasSize: _angular_core.InputSignal<CanvasSize>;
     readonly mediaDataUrls: _angular_core.InputSignal<Map<string, string>>;
     readonly zoom: _angular_core.InputSignal<number>;
-    readonly elements: _angular_core.Signal<pptx_viewer_core.PptxElement[]>;
+    /** When true, elements are selectable and drag/resize handles are shown. */
+    readonly editable: _angular_core.InputSignal<boolean>;
+    /** Ids of currently-selected elements (drawn with a selection outline). */
+    readonly selectedIds: _angular_core.InputSignal<readonly string[]>;
+    /** Id of the element currently being text-edited inline (or null). */
+    readonly editingId: _angular_core.InputSignal<string | null>;
+    /** Emitted when an element is pointer-pressed (with the additive modifier). */
+    readonly elementSelect: _angular_core.OutputEmitterRef<{
+        id: string;
+        additive: boolean;
+    }>;
+    /** Emitted when empty stage space is pressed (deselect). */
+    readonly backgroundClick: _angular_core.OutputEmitterRef<void>;
+    /** Emitted once when a drag/resize gesture actually starts moving. */
+    readonly transformStart: _angular_core.OutputEmitterRef<{
+        id: string;
+        label: string;
+    }>;
+    /** Emitted on each pointer move during a gesture with the new box. */
+    readonly transformUpdate: _angular_core.OutputEmitterRef<{
+        id: string;
+        box: Box;
+    }>;
+    /** Emitted on right-click with the element under the cursor (or null). */
+    readonly contextMenu: _angular_core.OutputEmitterRef<{
+        id: string | null;
+        x: number;
+        y: number;
+    }>;
+    /** Emitted on double-click of a text-bearing element to begin inline edit. */
+    readonly textEditStart: _angular_core.OutputEmitterRef<{
+        id: string;
+    }>;
+    /** Emitted with the new text when an inline edit commits. */
+    readonly textCommit: _angular_core.OutputEmitterRef<{
+        id: string;
+        text: string;
+    }>;
+    /** Emitted when an inline edit is cancelled (Escape). */
+    readonly textCancel: _angular_core.OutputEmitterRef<void>;
+    /** Emitted during a rotate gesture with the new rotation (degrees). */
+    readonly rotateUpdate: _angular_core.OutputEmitterRef<{
+        id: string;
+        rotation: number;
+    }>;
+    /** Emitted on marquee release with the ids of enclosed/overlapping elements. */
+    readonly marqueeSelect: _angular_core.OutputEmitterRef<string[]>;
+    private drag;
+    private editCancelled;
+    private marquee;
+    /** Live marquee rectangle (stage coords) while rubber-band selecting. */
+    readonly marqueeRect: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null>;
+    /** Live alignment-snap guide lines (stage coords) during a move. */
+    readonly snapGuides: _angular_core.WritableSignal<readonly SnapGuide[]>;
+    private readonly textEditor;
+    private readonly stageRef;
+    /** The editing id we've already initialised the textarea for, to avoid re-seeding its value mid-edit. */
+    private seededEditId;
+    /** Last-tap timestamp + element id, for synthetic double-tap detection on touch. */
+    private lastTap;
+    constructor();
+    readonly elements: _angular_core.Signal<PptxElement[]>;
+    /** Bounding boxes (stage coords) for the selected elements. */
+    readonly selectionBoxes: _angular_core.Signal<{
+        id: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }[]>;
+    /** 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: ResizeHandle;
+        left: number;
+        top: number;
+        size: number;
+        cursor: string;
+    }[]>;
+    /** Rotation-handle box (stage coords) above the single selection, or null. */
+    readonly rotateHandle: _angular_core.Signal<{
+        left: number;
+        top: number;
+        size: number;
+    } | null>;
+    onStagePointerDown(event: PointerEvent): void;
+    /** Box + current plain text for the element under inline edit, or null. */
+    readonly editingBox: _angular_core.Signal<{
+        id: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        text: string;
+    } | null>;
+    onDblClick(event: MouseEvent): void;
+    onEditorKeydown(event: KeyboardEvent): void;
+    commitText(event: Event, id: string): void;
+    onContextMenu(event: MouseEvent): void;
+    onHandlePointerDown(event: PointerEvent, handle: ResizeHandle): void;
+    onRotatePointerDown(event: PointerEvent): void;
+    onPointerMove(event: PointerEvent): void;
+    onPointerUp(): void;
     readonly wrapperStyle: _angular_core.Signal<StyleMap>;
     readonly stageStyle: _angular_core.Signal<StyleMap>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlideCanvasComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlideCanvasComponent, "pptx-slide-canvas", never, { "slide": { "alias": "slide"; "required": false; "isSignal": true; }; "canvasSize": { "alias": "canvasSize"; "required": true; "isSignal": true; }; "mediaDataUrls": { "alias": "mediaDataUrls"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlideCanvasComponent, "pptx-slide-canvas", never, { "slide": { "alias": "slide"; "required": false; "isSignal": true; }; "canvasSize": { "alias": "canvasSize"; "required": true; "isSignal": true; }; "mediaDataUrls": { "alias": "mediaDataUrls"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "editingId": { "alias": "editingId"; "required": false; "isSignal": true; }; }, { "elementSelect": "elementSelect"; "backgroundClick": "backgroundClick"; "transformStart": "transformStart"; "transformUpdate": "transformUpdate"; "contextMenu": "contextMenu"; "textEditStart": "textEditStart"; "textCommit": "textCommit"; "textCancel": "textCancel"; "rotateUpdate": "rotateUpdate"; "marqueeSelect": "marqueeSelect"; }, never, never, true, never>;
 }
 
 interface TextRun {
     text: string;
     style: StyleMap;
+    /** Safe `href` when this run carries a renderable hyperlink. */
+    href?: string;
+    /** Hyperlink tooltip / title text. */
+    tooltip?: string;
+    /** Parsed OMML for an inline equation run (rendered as MathML). */
+    equationXml?: Record<string, unknown>;
+    /** Optional equation number for numbered equations. */
+    equationNumber?: string;
+}
+interface Paragraph {
+    runs: TextRun[];
+    /** Bullet / number marker text, when this paragraph is a list item. */
+    bulletMarker?: string;
+    /** `[ngStyle]` map for the bullet marker (colour / font). */
+    bulletStyle: StyleMap;
+    /** Left indent in px derived from the paragraph outline level. */
+    indentPx: number;
 }
 /**
  * ElementRendererComponent — Angular port of the React `ElementRenderer.tsx`
@@ -334,14 +713,21 @@ interface TextRun {
  *
  * Renders a single slide element by its `type` discriminant (viewer-first
  * subset):
- *  - `text` / `shape`    → positioned box with fill/stroke + rich text
+ *  - `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)
+ *  - `table`             → HTML `<table>`
+ *  - `smartArt`          → SVG drawing-shapes / node-text fallback
+ *  - `ink`               → SVG ink strokes
+ *  - `ole`               → embedded-object preview / icon
+ *  - `model3d`           → poster / placeholder (no three.js)
+ *  - `zoom`              → slide/section zoom thumbnail
  *  - `picture` / `image` → `<img>`
  *  - `media`             → poster frame (`<img>`) — playback TODO
  *  - `group`             → recursive children (self-referencing selector)
  *  - everything else     → labelled placeholder (TODO, see PORTING.md)
  *
- * Interaction (selection, resize, inline editing), connectors, charts, tables,
- * SmartArt, ink, OLE, and 3D are not yet ported.
+ * Interaction (selection, resize, inline editing) is not yet ported.
  */
 declare class ElementRendererComponent {
     readonly element: _angular_core.InputSignal<PptxElement>;
@@ -354,7 +740,7 @@ declare class ElementRendererComponent {
     readonly children: _angular_core.Signal<PptxElement[]>;
     readonly isShapeLike: _angular_core.Signal<boolean>;
     readonly isImageLike: _angular_core.Signal<boolean>;
-    readonly paragraphs: _angular_core.Signal<TextRun[][]>;
+    readonly paragraphs: _angular_core.Signal<Paragraph[]>;
     readonly hasText: _angular_core.Signal<boolean>;
     readonly placeholderLabel: _angular_core.Signal<string>;
     private segmentStyle;
@@ -362,6 +748,1645 @@ declare class ElementRendererComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ElementRendererComponent, "pptx-element-renderer", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "mediaDataUrls": { "alias": "mediaDataUrls"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Pure, framework-agnostic helpers for rendering connector elements.
+ *
+ * These are extracted from the component so they can be unit-tested without
+ * the Angular compiler or TestBed (the vitest setup for this package is
+ * plain happy-dom, no Analog plugin yet — see PORTING.md).
+ *
+ * Mirror of the Vue `ConnectorRenderer.vue` helpers and the React
+ * `ConnectorElementRenderer` path logic (basic straight-line subset).
+ */
+
+/** Shape description for a SVG `<marker>` element (viewBox 0 0 10 10). */
+interface MarkerShape {
+    shape: 'path' | 'circle';
+    d?: string;
+}
+/** All derived connector rendering values, computed from a `PptxElement`. */
+interface ConnectorGeometry {
+    strokeWidth: number;
+    strokeColor: string;
+    strokeOpacity: number;
+    dashArray: string | undefined;
+    /** SVG width (clamped to at least 1). */
+    svgW: number;
+    /** SVG height (clamped to at least 1). */
+    svgH: number;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    /**
+     * SVG `path` data for bent / curved connectors. `undefined` for straight
+     * connectors, in which case the component renders a `<line>` from
+     * `(x1,y1)` to `(x2,y2)` instead.
+     */
+    pathD: string | undefined;
+    startMarkerId: string;
+    endMarkerId: string;
+    startMarker: MarkerShape | null;
+    endMarker: MarkerShape | null;
+    startMarkerRef: string | null;
+    endMarkerRef: string | null;
+    /** Inline `style` string for the wrapper `<div>`. */
+    wrapperStyle: string;
+}
+
+/**
+ * ConnectorRendererComponent — Angular port of the Vue `ConnectorRenderer.vue`
+ * (and the React `ConnectorElementRenderer`, basic subset).
+ *
+ * Renders straight connectors/lines as an inline SVG spanning the element's
+ * bounding box, with stroke colour/width/dash and start/end arrowheads. Flip
+ * is baked into the endpoints (not a CSS transform) so arrowheads point the
+ * right way.
+ *
+ * All path/style math lives in `connector-path.ts` (pure TS, no Angular
+ * dependency) so it can be unit-tested without TestBed.
+ *
+ * Not yet ported (TODO, see PORTING.md): bent/curved connector routing
+ * (`getConnectorPathGeometry`), compound lines, connector text overlay, line
+ * shadows/glow. Bent/curved connectors currently fall back to a straight line.
+ */
+declare class ConnectorRendererComponent {
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    readonly zIndex: _angular_core.InputSignal<number>;
+    /** All derived geometry, recomputed on every input change. */
+    readonly geo: _angular_core.Signal<ConnectorGeometry>;
+    readonly viewBox: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConnectorRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConnectorRendererComponent, "pptx-connector-renderer", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Pure, framework-agnostic helpers for table rendering.
+ *
+ * Ported from:
+ *   - packages/react/src/viewer/utils/table-render-helpers.ts  (cellStyleToCss,
+ *     ooxmlDashToCssBorderStyle)
+ *   - packages/react/src/viewer/utils/table-render-data.tsx     (row / cell
+ *     view-model projection)
+ *
+ * All functions are pure (no Angular dependencies) so they can be unit-tested
+ * with plain vitest without TestBed or the Angular compiler.
+ */
+
+/**
+ * A single styled text run inside a cell paragraph.
+ *
+ * The `style` map is an `[ngStyle]`-compatible object derived from the cell's
+ * `PptxTableCellStyle` (bold, italic, underline, color, fontSize). When the
+ * cell has no style the map is empty ({}) and CSS inherits.
+ *
+ * `isLineBreak` is true for soft line-break runs. The template renders them
+ * as `<br>`.
+ */
+interface CellTextRun {
+    text: string;
+    style: StyleMap;
+    isLineBreak?: true;
+}
+/**
+ * A single paragraph inside a table cell, made up of one or more `CellTextRun`s.
+ *
+ * In the current implementation each paragraph has exactly one run (styled by
+ * the cell-level `PptxTableCellStyle`). When the core later exposes per-run
+ * segments on `PptxTableCell`, additional runs per paragraph will be populated.
+ */
+type CellParagraph = CellTextRun[];
+/**
+ * A flattened cell descriptor ready for template iteration. Cells flagged
+ * `hMerge` or `vMerge` are excluded; the template produces no `<td>` for
+ * them (the origin cell's colspan/rowspan expands to cover the gap).
+ */
+interface TableCellViewModel {
+    cell: PptxTableCell;
+    /** Resolved colspan from `gridSpan` (>= 2) or undefined. */
+    colSpan: number | undefined;
+    /** Resolved rowspan from `rowSpan` (>= 2) or undefined. */
+    rowSpan: number | undefined;
+    /** Pre-computed `[ngStyle]` map for this cell's `<td>`. */
+    tdStyle: StyleMap;
+    /**
+     * Display text — non-breaking space when the cell is empty to keep the row
+     * height. Used as fallback when `paragraphs` is empty (no text AND no style).
+     */
+    displayText: string;
+    /**
+     * Rich-text paragraphs built from the cell's text content and cell-level
+     * style. When non-empty the template renders this instead of `displayText`.
+     * Each entry is a paragraph (array of styled runs); runs with `isLineBreak`
+     * render as `<br>`.
+     *
+     * When this array is empty (cell is completely empty + unstyled) the template
+     * falls back to rendering `displayText` (a non-breaking space) so the row
+     * retains its height.
+     */
+    paragraphs: CellParagraph[];
+}
+interface TableRowViewModel {
+    rowStyle: StyleMap;
+    cells: TableCellViewModel[];
+}
+
+/**
+ * TableRendererComponent — Angular port of the React `renderTableFromTableData`
+ * (packages/react/src/viewer/utils/table-render-data.tsx).
+ *
+ * Renders a `<table>` from the typed `PptxTableData` structure that the core
+ * parser populates on every `TablePptxElement`. This is the viewer-first path:
+ * editing, resize overlays, and inline cell input are not yet ported.
+ *
+ * Key behaviours:
+ *  - Merged cells: cells with `hMerge`/`vMerge` are skipped; the origin cell
+ *    receives `[attr.colspan]`/`[attr.rowspan]` from `gridSpan`/`rowSpan`.
+ *  - Column widths: a `<colgroup>` drives proportional widths from
+ *    `PptxTableData.columnWidths` (0–1 fractions).
+ *  - Row heights: `[ngStyle]` on `<tr>` sets an explicit pixel height when
+ *    `PptxTableRow.height` is present.
+ *  - Cell fill: solid `backgroundColor` or the parser's pre-built
+ *    `gradientFillCss` string (gradient). Pattern fills are deferred.
+ *  - Cell borders: per-edge (top/bottom/left/right) width + colour.
+ *  - Cell text: rich-text paragraphs of styled `<span>` runs when the cell
+ *    carries text or formatting; falls back to a non-breaking-space placeholder
+ *    for empty+unstyled cells (preserves row height).
+ *
+ * Pure helpers (view-model projection, style maps) live in
+ * `table-renderer-helpers.ts` so tests can exercise them without TestBed.
+ */
+declare class TableRendererComponent {
+    /** The table element to render. Must be `type === 'table'`. */
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    /** Pre-computed `<col>` styles for the colgroup. */
+    readonly colStyles: _angular_core.Signal<StyleMap[]>;
+    /** Projected view-model rows with merged-cell resolution applied. */
+    readonly rows: _angular_core.Signal<TableRowViewModel[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableRendererComponent, "pptx-table-renderer", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Pure, framework-agnostic helpers for chart rendering.
+ *
+ * Ported from:
+ *   packages/react/src/viewer/utils/chart-helpers.ts  (value range, Y mapping, formatting, palette)
+ *   packages/react/src/viewer/utils/chart-layout.ts   (plot-area layout)
+ *   packages/react/src/viewer/utils/chart-pie.tsx      (pie/doughnut geometry)
+ *   packages/react/src/viewer/utils/chart-bar.tsx      (bar rect projection)
+ *   packages/react/src/viewer/utils/chart-area-line.tsx (line/area point projection)
+ *   packages/react/src/viewer/utils/chart-scatter-bubble.tsx (scatter point projection)
+ *
+ * All functions here are pure TypeScript with zero Angular dependencies.
+ * The component consumes a single `ChartViewModel` that is the projection
+ * of a `ChartPptxElement` -> SVG primitives.
+ *
+ * Supported chart kinds (viewer-first):
+ *   bar / column (clustered, stacked, percentStacked) -> bar rects
+ *   line / line3D -> polyline + dots
+ *   area / area3D -> polygon fill + polyline
+ *   pie / doughnut / pie3D / ofPie -> arc paths
+ *   scatter -> circle dots
+ *
+ * Deferred (fallback box rendered instead):
+ *   bubble, radar, stock, waterfall, combo, surface, treemap, sunburst,
+ *   funnel, boxWhisker, histogram, regionMap, bar3D (complex 3-D shading),
+ *   error bars, trendlines, secondary axes, data tables.
+ *
+ * @module chart-renderer-helpers
+ */
+
+interface SvgRect {
+    kind: 'rect';
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    fill: string;
+    rx?: number;
+    opacity?: number;
+}
+interface SvgPath {
+    kind: 'path';
+    d: string;
+    fill: string;
+    stroke?: string;
+    strokeWidth?: number;
+}
+interface SvgPolyline {
+    kind: 'polyline';
+    points: string;
+    stroke: string;
+    strokeWidth: number;
+    fill: string;
+    opacity?: number;
+}
+interface SvgCircle {
+    kind: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+    fill: string;
+    opacity?: number;
+}
+interface SvgLine {
+    kind: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    stroke: string;
+    strokeWidth: number;
+    dashArray?: string;
+    opacity?: number;
+}
+interface SvgText {
+    kind: 'text';
+    x: number;
+    y: number;
+    text: string;
+    fontSize: number;
+    fill: string;
+    textAnchor: 'start' | 'middle' | 'end';
+    fontWeight?: 'normal' | 'bold';
+    dominantBaseline?: string;
+    opacity?: number;
+}
+interface SvgAreaGradient {
+    kind: 'areaGradient';
+    id: string;
+    color: string;
+}
+type SvgPrimitive = SvgRect | SvgPath | SvgPolyline | SvgCircle | SvgLine | SvgText | SvgAreaGradient;
+interface LegendEntry {
+    color: string;
+    label: string;
+}
+interface ChartViewModel {
+    svgWidth: number;
+    svgHeight: number;
+    title: string | undefined;
+    titleX: number;
+    titleY: number;
+    gridlines: SvgLine[];
+    axisLabels: SvgText[];
+    zeroLine: SvgLine | undefined;
+    categoryLabels: SvgText[];
+    primitives: SvgPrimitive[];
+    dataLabels: SvgText[];
+    legend: LegendEntry[];
+    legendX: number;
+    legendY: number;
+    legendAnchor: 'start' | 'middle' | 'end';
+}
+
+declare class ChartRendererComponent {
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    readonly vm: _angular_core.Signal<ChartViewModel>;
+    readonly viewBox: _angular_core.Signal<string>;
+    readonly swatchSize = 10;
+    legendTransform(index: number): string;
+    asRect(p: SvgPrimitive): SvgRect;
+    asPath(p: SvgPrimitive): SvgPath;
+    asPolyline(p: SvgPrimitive): SvgPolyline;
+    asCircle(p: SvgPrimitive): SvgCircle;
+    asLine(p: SvgPrimitive): SvgLine;
+    asText(p: SvgPrimitive): SvgText;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartRendererComponent, "pptx-chart-renderer", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Pure TypeScript SmartArt family layout engines.
+ *
+ * Computes node box positions for the four core SmartArt families so the
+ * Angular `SmartArtRendererComponent` can lay out nodes when no explicit
+ * drawing-shapes are present.
+ *
+ * No Angular imports — all exports are plain TypeScript so they can be
+ * unit-tested with vitest without TestBed or the Angular compiler.
+ *
+ * Geometry ported from the React renderers:
+ *   packages/react/src/viewer/components/elements/smartart-layout-renderers.tsx
+ *   packages/react/src/viewer/components/elements/smartart-renderer-hierarchy.tsx
+ *   packages/react/src/viewer/utils/smartart-helpers.tsx
+ */
+
+/**
+ * A positioned node box ready to be rendered as `<rect>` + `<text>` in an SVG.
+ */
+interface PositionedNode {
+    /** Original node id from `PptxSmartArtNode`. */
+    id: string;
+    /** Display text (may be truncated by the caller). */
+    text: string;
+    /** Left edge (SVG user units). */
+    x: number;
+    /** Top edge (SVG user units). */
+    y: number;
+    /** Box width (SVG user units). */
+    w: number;
+    /** Box height (SVG user units). */
+    h: number;
+    /**
+     * Zero-based tree depth / band index.
+     * For flat families (list, process, cycle) all nodes are at level 0.
+     */
+    level: number;
+    /**
+     * Node radius — only set for cycle nodes (rendered as `<circle>`).
+     * When defined the caller should render a circle at (x + r, y + r) instead
+     * of a rect.
+     */
+    r?: number;
+}
+/**
+ * A connector segment rendered as `<line x1 y1 x2 y2 />` or SVG `<path>`.
+ */
+interface ConnectorSegment {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+/**
+ * Result returned by `layoutSmartArtNodes`.
+ */
+interface SmartArtLayoutResult {
+    nodes: PositionedNode[];
+    connectors: ConnectorSegment[];
+}
+
+/**
+ * Pure, framework-agnostic helpers for SmartArt rendering.
+ *
+ * Ported from the Vue component
+ *   packages/vue/src/viewer/components/SmartArtRenderer.vue
+ * (viewer-first subset — drawing-shapes path + stacked-block fallback).
+ *
+ * No Angular imports: all exports are plain TypeScript functions / types so
+ * they can be unit-tested with vitest without TestBed or the Angular compiler.
+ */
+
+/**
+ * Projected view-model for a single pre-computed drawing shape, ready for
+ * direct use in an SVG `<g>` block.
+ */
+interface RenderedShape {
+    /** Stable React-style key. */
+    key: string;
+    /** True → render `<ellipse>`, false → render `<rect>`. */
+    isEllipse: boolean;
+    /** Rect top-left (relative to the viewBox origin). */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Border-radius for `<rect rx>` (roundRect shapes). */
+    rx: number;
+    /** Ellipse centre x. */
+    cx: number;
+    /** Ellipse centre y. */
+    cy: number;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    /** SVG `transform` attribute, e.g. `rotate(30 50 40)`. */
+    transform: string | undefined;
+    /** Truncated text label (≤30 chars), or `undefined` when absent. */
+    text: string | undefined;
+    /** Text anchor x (centre of shape). */
+    textX: number;
+    /** Text anchor y (centre of shape). */
+    textY: number;
+    fontColor: string;
+    fontSize: number;
+}
+/**
+ * SVG `viewBox` bounding-box derived from all drawing shapes.
+ *
+ * Returns the minimal bounding box plus `minX`/`minY` offsets used to
+ * rebase each shape's position to (0, 0).
+ */
+interface DrawingViewBox {
+    minX: number;
+    minY: number;
+    width: number;
+    height: number;
+}
+/**
+ * A single coloured block in the stacked fallback list.
+ */
+interface FallbackBlock {
+    /** Stable key for `@for` tracking. */
+    key: string;
+    text: string;
+    fill: string;
+}
+
+/**
+ * SmartArtRendererComponent — Angular port of the Vue `SmartArtRenderer.vue`
+ * (packages/vue/src/viewer/components/SmartArtRenderer.vue).
+ *
+ * Viewer-first subset: renders from pre-computed drawing shapes
+ * (`smartArtData.drawingShapes`) when present, otherwise falls back to a
+ * stacked coloured block list of node text. When neither is available a small
+ * "SmartArt" placeholder is shown.
+ *
+ * Editing, interaction, and the full family-specific layout renderers
+ * (hierarchy / cycle / process / …) are out of scope — tracked in PORTING.md.
+ */
+declare class SmartArtRendererComponent {
+    /** The smartArt element to render. Must be `type === 'smartArt'`. */
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    readonly zIndex: _angular_core.InputSignal<number>;
+    readonly containerStyle: _angular_core.Signal<StyleMap>;
+    readonly chromeStyle: _angular_core.Signal<StyleMap>;
+    readonly palette: _angular_core.Signal<string[]>;
+    readonly artStyle: _angular_core.Signal<pptx_viewer_core.SmartArtStyle>;
+    readonly nodes: _angular_core.Signal<pptx_viewer_core.PptxSmartArtNode[]>;
+    readonly rawDrawingShapes: _angular_core.Signal<pptx_viewer_core.PptxSmartArtDrawingShape[]>;
+    readonly hasDrawingShapes: _angular_core.Signal<boolean>;
+    readonly viewBox: _angular_core.Signal<DrawingViewBox>;
+    /** `viewBox` attribute string for the `<svg>` element. */
+    readonly svgViewBox: _angular_core.Signal<string>;
+    readonly renderedShapes: _angular_core.Signal<RenderedShape[]>;
+    readonly shadowFilter: _angular_core.Signal<string | undefined>;
+    readonly layoutResult: _angular_core.Signal<SmartArtLayoutResult>;
+    readonly hasLayout: _angular_core.Signal<boolean>;
+    readonly layoutViewBox: _angular_core.Signal<string>;
+    /** Palette colour for a node at the given depth level. */
+    nodeFill(level: number): string;
+    readonly fallbackBlocks: _angular_core.Signal<FallbackBlock[]>;
+    readonly isEmpty: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SmartArtRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SmartArtRendererComponent, "pptx-smart-art-renderer", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Pure helpers for `InkRendererComponent`.
+ *
+ * All functions are framework-agnostic (no Angular dependency) so they can be
+ * unit-tested without TestBed, following the same pattern as
+ * `connector-path.ts`.
+ */
+/** Resolved per-stroke data used to render a single `<path>`. */
+interface InkStroke {
+    d: string;
+    color: string;
+    width: number;
+    opacity: number;
+}
+
+/**
+ * InkRendererComponent — Angular port of the Vue `InkRenderer.vue`
+ * (and the React `renderInk` inside `InkGroupRenderers.tsx`), viewer-first
+ * subset.
+ *
+ * Renders freehand ink strokes (`InkPptxElement.inkPaths`) as inline SVG
+ * `<path>` elements inside the element's bounding box, with per-stroke colour,
+ * width, and opacity resolved from the parallel `inkColors`/`inkWidths`/
+ * `inkOpacities` arrays.
+ *
+ * Not ported (TODO, see PORTING.md): pressure-sensitive variable-width strokes
+ * (`inkPointPressures`), ink replay animation, and the highlighter/eraser tool
+ * blend modes. These all degrade gracefully to plain constant-width strokes.
+ *
+ * All non-trivial pure computation lives in `ink-renderer-helpers.ts` (no
+ * Angular dependency) so it can be unit-tested without TestBed.
+ */
+declare class InkRendererComponent {
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    readonly zIndex: _angular_core.InputSignal<number>;
+    readonly mediaDataUrls: _angular_core.InputSignal<Map<string, string>>;
+    readonly containerStyle: _angular_core.Signal<StyleMap>;
+    readonly strokes: _angular_core.Signal<InkStroke[]>;
+    readonly viewBox: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InkRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InkRendererComponent, "pptx-ink-renderer", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "mediaDataUrls": { "alias": "mediaDataUrls"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Pure, framework-agnostic helpers for OLE renderer.
+ *
+ * Ported from:
+ *   - packages/react/src/viewer/components/elements/InkGroupRenderers.tsx
+ *     (resolveOleType, getOleTypeColor, getOleTypeLabel, getOleAriaLabel)
+ *   - packages/vue/src/viewer/components/OleRenderer.vue
+ *     (placeholder style, badge label, display name)
+ *
+ * All functions are pure (no Angular dependencies) so they can be unit-tested
+ * with plain vitest without TestBed or the Angular compiler.
+ */
+
+/**
+ * Resolved OLE application type, narrowed from the raw `OleObjectType` union.
+ *
+ * `package` and `unknown` from the core type both collapse to `'unknown'` here
+ * so that every branch is guaranteed to have a colour and label.
+ */
+type ResolvedOleType = 'excel' | 'word' | 'pdf' | 'visio' | 'mathtype' | 'unknown';
+
+/**
+ * OleRendererComponent — Angular port of the React `renderOleElement`
+ * (packages/react/src/viewer/components/elements/InkGroupRenderers.tsx) and
+ * the Vue `OleRenderer.vue`.
+ *
+ * Renders an embedded OLE object (`OlePptxElement`). When a decoded preview
+ * image is present (`previewImageData`) it is shown full-size with a small
+ * type-badge overlay; otherwise a type-specific icon + label placeholder box
+ * is drawn, mirroring the React / Vue fallback.
+ *
+ * Pure helpers (type resolution, colour / label maps, placeholder style) live
+ * in `ole-renderer-helpers.ts` so they can be unit-tested without TestBed.
+ *
+ * Double-click-to-open and OLE extraction are not ported (viewer-only).
+ */
+declare class OleRendererComponent {
+    /** The element to render. Must be `type === 'ole'`. */
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    readonly zIndex: _angular_core.InputSignal<number>;
+    /** Absolute container positioning + dimensions. */
+    readonly containerStyle: _angular_core.Signal<StyleMap>;
+    /** Narrowed OLE element — undefined when the input is not `type === 'ole'`. */
+    private readonly ole;
+    /** Resolved application type (excel / word / pdf / visio / mathtype / unknown). */
+    readonly oleType: _angular_core.Signal<ResolvedOleType>;
+    /** Brand hex colour for the resolved type. */
+    readonly typeColor: _angular_core.Signal<string>;
+    /** Human-readable type label (e.g. "Excel Spreadsheet"). */
+    readonly typeLabel: _angular_core.Signal<string>;
+    /** Short uppercase badge text shown over the preview image. */
+    readonly badgeLabel: _angular_core.Signal<string>;
+    /** Preview image data-URL, or undefined to show the placeholder. */
+    readonly previewSrc: _angular_core.Signal<string | undefined>;
+    /** Original file name, if present. */
+    readonly fileName: _angular_core.Signal<string | undefined>;
+    /** Primary display name: file name if present, otherwise the type label. */
+    readonly displayName: _angular_core.Signal<string>;
+    /** Accessible label for the role="img" wrapper. */
+    readonly ariaLabel: _angular_core.Signal<string>;
+    /** Border + background style for the placeholder box. */
+    readonly placeholderStyle: _angular_core.Signal<StyleMap>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OleRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OleRendererComponent, "pptx-ole-renderer", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Pure helpers for `Model3DRendererComponent`.
+ *
+ * All functions are framework-agnostic (no Angular dependency) so they can be
+ * unit-tested without TestBed, following the same pattern as
+ * `connector-path.ts`.
+ */
+/** Narrowed view-model derived from a `Model3DPptxElement`. */
+interface Model3DViewModel {
+    /** Resolved model element, or undefined when the element is not a model3d. */
+    readonly model: Model3DPptxElement | undefined;
+    /**
+     * Poster image src: `posterImage` is preferred over the raster `imageData`
+     * fallback (mirrors the React `PosterFallback` and the Vue port).
+     */
+    readonly posterSrc: string | undefined;
+}
+
+/**
+ * Model3DRendererComponent — Angular port of the Vue `Model3DRenderer.vue`
+ * (and the React `Model3DRenderer` / `PosterFallback`), poster-only subset.
+ *
+ * Interactive 3D rendering (three.js) is intentionally OUT OF SCOPE for the
+ * Angular port — see PORTING.md. This component always renders the
+ * poster/preview image (`posterImage`, falling back to `imageData`); when
+ * neither exists it draws a labelled "3D Model" placeholder, exactly like the
+ * React poster fallback.
+ *
+ * All non-trivial pure computation lives in `model3d-renderer-helpers.ts` (no
+ * Angular dependency) so it can be unit-tested without TestBed.
+ */
+declare class Model3DRendererComponent {
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    readonly zIndex: _angular_core.InputSignal<number>;
+    readonly mediaDataUrls: _angular_core.InputSignal<Map<string, string>>;
+    readonly containerStyle: _angular_core.Signal<StyleMap>;
+    readonly vm: _angular_core.Signal<Model3DViewModel>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Model3DRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Model3DRendererComponent, "pptx-model3d-renderer", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "mediaDataUrls": { "alias": "mediaDataUrls"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Pure helpers for `ZoomRendererComponent`.
+ *
+ * All functions are framework-agnostic (no Angular dependency) so they can be
+ * unit-tested without TestBed, following the same pattern as
+ * `connector-path.ts`.
+ */
+/** Narrowed view-model derived from a `ZoomPptxElement`. */
+interface ZoomViewModel {
+    /** Resolved zoom element, or undefined when the element is not a zoom. */
+    readonly zoom: ZoomPptxElement | undefined;
+    /** Preview image src (the `imageData` embedded thumbnail). */
+    readonly previewSrc: string | undefined;
+    /** Zero-based target slide index. */
+    readonly targetSlideIndex: number;
+    /** Zoom type string used as the badge label source and data attribute. */
+    readonly zoomType: 'slide' | 'section';
+    /** Optional section identifier for section zooms. */
+    readonly targetSectionId: string | undefined;
+    /** Human-readable badge text ("Slide Zoom" / "Section Zoom"). */
+    readonly badgeText: string;
+    /** Human-readable slide label ("Slide N"). */
+    readonly slideLabel: string;
+    /** Accessible label for the element. */
+    readonly ariaLabel: string;
+}
+
+/**
+ * ZoomRendererComponent — Angular port of the Vue `ZoomRenderer.vue`
+ * (and the React `ZoomElementRenderer`), static viewer-first subset.
+ *
+ * Renders a Slide-Zoom / Section-Zoom tile (`ZoomPptxElement`): the element's
+ * own preview thumbnail (`imageData`) when available, otherwise a fallback tile
+ * showing the target slide number. A small "Slide Zoom" / "Section Zoom" badge
+ * is drawn in the corner.
+ *
+ * Navigation (click-to-jump in presentation mode) and live target-slide preview
+ * rendering are NOT ported — this is a static link tile only (see PORTING.md).
+ * The `slides` array is not threaded through, so the fallback uses the target
+ * slide index rather than the real target background.
+ *
+ * All non-trivial pure computation lives in `zoom-renderer-helpers.ts` (no
+ * Angular dependency) so it can be unit-tested without TestBed.
+ */
+declare class ZoomRendererComponent {
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    readonly zIndex: _angular_core.InputSignal<number>;
+    readonly mediaDataUrls: _angular_core.InputSignal<Map<string, string>>;
+    readonly containerStyle: _angular_core.Signal<StyleMap>;
+    readonly vm: _angular_core.Signal<ZoomViewModel>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZoomRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZoomRendererComponent, "pptx-zoom-renderer", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "mediaDataUrls": { "alias": "mediaDataUrls"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * PresentationOverlayComponent — full-viewport black overlay that renders
+ * slides in presentation (kiosk) mode.
+ *
+ * Selector: `pptx-presentation-overlay`
+ *
+ * Inputs:
+ *   - `slides`         (required) — all slides in the deck
+ *   - `canvasSize`     (required) — logical canvas dimensions in pixels
+ *   - `mediaDataUrls`  — data-URL map for media assets (default: empty Map)
+ *   - `startIndex`     — zero-based slide to show first (default: 0)
+ *
+ * Outputs:
+ *   - `indexChange` — emits the new index on every navigation
+ *   - `closed`      — emits void when the overlay should be dismissed
+ *
+ * Keyboard bindings (document-level so no focusable element is required):
+ *   ArrowRight / Space / PageDown → next visible slide
+ *   ArrowLeft  / PageUp           → previous visible slide
+ *   Home                          → first slide
+ *   End                           → last slide
+ *   Escape                        → emit `closed`
+ *
+ * Touch bindings (mobile has no keyboard):
+ *   Always-visible ✕ button (top-right) → emit `closed`
+ *   ‹ / › edge buttons                  → previous / next visible slide
+ *   Horizontal swipe                    → left → next, right → previous
+ *
+ * Click on the overlay body → advance to next visible slide.
+ */
+declare class PresentationOverlayComponent implements OnInit, OnDestroy {
+    readonly slides: _angular_core.InputSignal<PptxSlide[]>;
+    readonly canvasSize: _angular_core.InputSignal<CanvasSize>;
+    readonly mediaDataUrls: _angular_core.InputSignal<Map<string, string>>;
+    readonly startIndex: _angular_core.InputSignal<number>;
+    readonly indexChange: _angular_core.OutputEmitterRef<number>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /** Zero-based index into `slides()`. */
+    protected readonly currentIndex: _angular_core.WritableSignal<number>;
+    /** Viewport dimensions — updated on resize. */
+    private readonly viewportW;
+    private readonly viewportH;
+    protected readonly currentSlide: _angular_core.Signal<PptxSlide | undefined>;
+    /** Zoom level that fits the canvas into the current viewport. */
+    protected readonly zoom: _angular_core.Signal<number>;
+    /** Centre the scaled slide in the viewport. */
+    protected readonly stageContainerStyle: _angular_core.Signal<Record<string, string>>;
+    /** "3 / 12" label. */
+    protected readonly counterLabel: _angular_core.Signal<string>;
+    /**
+     * Always-visible close button, fixed at the top-right and offset by the
+     * device safe-area insets so it clears notches / rounded corners. Sits on a
+     * higher z-index than the stage so taps never fall through to tap-advance.
+     */
+    protected readonly closeButtonStyle: Record<string, string>;
+    /** Shared geometry for the left/right edge navigation buttons. */
+    private readonly navButtonBase;
+    protected readonly prevButtonStyle: Record<string, string>;
+    protected readonly nextButtonStyle: Record<string, string>;
+    protected readonly counterStyle: Record<string, string>;
+    /** Horizontal swipe distance (px) required to trigger navigation. */
+    private static readonly SWIPE_THRESHOLD;
+    /** X coordinate captured on touchstart, or null when no swipe is active. */
+    private touchStartX;
+    private touchStartY;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onWindowResize(): void;
+    private snapViewport;
+    onKeyDown(event: KeyboardEvent): void;
+    /** Left-click on the slide area advances to the next visible slide. */
+    protected onBodyClick(event: MouseEvent): void;
+    /** Close button click — stop propagation so it does not also advance. */
+    protected onClose(event: MouseEvent): void;
+    /**
+     * Close button touch — stop propagation and prevent the synthesized click
+     * so a tap exits without bubbling to the tap-advance handler.
+     */
+    protected onCloseTouch(event: TouchEvent): void;
+    /** Previous-edge button — stop propagation so the tap does not double-fire. */
+    protected onPrev(event: MouseEvent): void;
+    protected onPrevTouch(event: TouchEvent): void;
+    /** Next-edge button — stop propagation so the tap does not double-fire. */
+    protected onNext(event: MouseEvent): void;
+    protected onNextTouch(event: TouchEvent): void;
+    /** Record the initial touch position. */
+    protected onTouchStart(event: TouchEvent): void;
+    /**
+     * On touchend, treat a predominantly horizontal drag past the threshold as a
+     * swipe: left-swipe → next, right-swipe → prev.
+     */
+    protected onTouchEnd(event: TouchEvent): void;
+    private navigate;
+    private emitClosed;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PresentationOverlayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PresentationOverlayComponent, "pptx-presentation-overlay", never, { "slides": { "alias": "slides"; "required": true; "isSignal": true; }; "canvasSize": { "alias": "canvasSize"; "required": true; "isSignal": true; }; "mediaDataUrls": { "alias": "mediaDataUrls"; "required": false; "isSignal": true; }; "startIndex": { "alias": "startIndex"; "required": false; "isSignal": true; }; }, { "indexChange": "indexChange"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * SlideSorterOverlayComponent — Angular port of the React `SlideSorterOverlay`.
+ *
+ * Renders a fixed full-screen modal overlay containing a responsive grid of
+ * scaled slide previews. Clicking a thumbnail emits `select(index)`; pressing
+ * 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
+ * <pptx-slide-sorter-overlay
+ *   [slides]="slides()"
+ *   [canvasSize]="canvasSize()"
+ *   [mediaDataUrls]="mediaDataUrls()"
+ *   [activeIndex]="activeSlideIndex()"
+ *   (select)="goTo($event)"
+ *   (closed)="showSorter.set(false)"
+ * />
+ * ```
+ */
+declare class SlideSorterOverlayComponent {
+    /** Full list of slides to display. */
+    readonly slides: _angular_core.InputSignal<PptxSlide[]>;
+    /** Natural (100 %) canvas dimensions — passed through to SlideCanvasComponent. */
+    readonly canvasSize: _angular_core.InputSignal<CanvasSize>;
+    /** Media asset lookup table — forwarded to each SlideCanvasComponent. */
+    readonly mediaDataUrls: _angular_core.InputSignal<Map<string, string>>;
+    /** Zero-based index of the currently active slide (highlighted in blue). */
+    readonly activeIndex: _angular_core.InputSignal<number>;
+    /** Emits the zero-based index of the thumbnail the user clicked. */
+    readonly select: _angular_core.OutputEmitterRef<number>;
+    /** Emits when the user closes the overlay (✕ button or Escape key). */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /** Zoom level that fits the full canvas width into THUMB_W pixels. */
+    readonly thumbZoom: _angular_core.Signal<number>;
+    /** Pixel height of the clipping box (aspect-correct). */
+    readonly thumbH: _angular_core.Signal<number>;
+    /** ngStyle object for the thumbnail clipping box. */
+    readonly clipStyle: _angular_core.Signal<Record<string, string>>;
+    /** ngStyle object for the grid: responsive auto-fill columns. */
+    readonly gridStyle: _angular_core.Signal<Record<string, string>>;
+    /** Keyboard handler: Escape closes the overlay. */
+    onKeydown(event: KeyboardEvent): void;
+    /** Clicking the backdrop (outside the panel) closes the overlay. */
+    onBackdropClick(event: MouseEvent): void;
+    /** Clicking a thumbnail selects the slide. */
+    onThumbClick(index: number): void;
+    /** Returns true when a slide has been marked as hidden in the presentation. */
+    isHiddenSlide(slide: PptxSlide): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlideSorterOverlayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlideSorterOverlayComponent, "pptx-slide-sorter-overlay", never, { "slides": { "alias": "slides"; "required": true; "isSignal": true; }; "canvasSize": { "alias": "canvasSize"; "required": true; "isSignal": true; }; "mediaDataUrls": { "alias": "mediaDataUrls"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; }, { "select": "select"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * slide-search.ts — Pure text-search helpers for PPTX slides.
+ *
+ * No Angular imports; safe to use in web workers or server-side code.
+ *
+ * @module slide-search
+ */
+
+/**
+ * A single slide that matched a text search query.
+ */
+interface SlideSearchMatch {
+    /** Zero-based index of the matching slide in the slides array. */
+    slideIndex: number;
+    /** Number of (overlapping) occurrences of the query on this slide. */
+    matchCount: number;
+    /**
+     * A short snippet of text surrounding the first match.
+     * Includes a few characters of context on each side.
+     */
+    snippet: string;
+}
+/**
+ * Collect all visible text from a single {@link PptxElement}.
+ *
+ * - `text` / `shape` / `connector` — flat `text` field + `textSegments[].text`.
+ * - `table` — iterates `tableData.rows[].cells[].text`.
+ * - `smartArt` — recursively collects `smartArtData.nodes[].text`.
+ * - `group` — recurses into `children`.
+ * - All other element types produce an empty string.
+ */
+declare function collectElementText(element: PptxElement): string;
+/**
+ * Collect all visible text from a {@link PptxSlide}, including speaker notes.
+ */
+declare function collectSlideText(slide: PptxSlide): string;
+/**
+ * Search all slides for `query` (case-insensitive substring match).
+ *
+ * Returns an empty array when `query` is empty or whitespace-only.
+ */
+declare function searchSlides(slides: readonly PptxSlide[], query: string): SlideSearchMatch[];
+
+declare class FindBarComponent {
+    /** All slides in the current presentation. */
+    readonly slides: _angular_core.InputSignal<PptxSlide[]>;
+    /** Emits the zero-based slide index to navigate to. */
+    readonly navigate: _angular_core.OutputEmitterRef<number>;
+    /** Emits when the user closes the find bar (Escape or ✕). */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    private readonly queryInputRef;
+    /** Current text typed into the search input. */
+    readonly query: _angular_core.WritableSignal<string>;
+    /**
+     * Zero-based index into the flat `matches` array tracking which result is
+     * currently highlighted. Clamped whenever `matches` changes.
+     */
+    readonly activeMatchIndex: _angular_core.WritableSignal<number>;
+    /** Slides that contain at least one match for the current query. */
+    readonly matches: _angular_core.Signal<SlideSearchMatch[]>;
+    /** Total number of individual occurrences across all matching slides. */
+    readonly totalMatches: _angular_core.Signal<number>;
+    /**
+     * 1-based display position (which slide-level result we're on).
+     * Accounts for clamping when the match list shrinks.
+     */
+    readonly activeMatchDisplay: _angular_core.Signal<number>;
+    /** Snippet text for the currently active match. */
+    readonly activeSnippet: _angular_core.Signal<string>;
+    /**
+     * Pressing Escape anywhere on the document closes the find bar.
+     * (Enter inside the input already calls `next()` via `keydown.enter`.)
+     */
+    onDocumentKeydown(event: KeyboardEvent): void;
+    onInput(event: Event): void;
+    next(): void;
+    prev(): void;
+    close(): void;
+    private _emitCurrentSlide;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FindBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FindBarComponent, "pptx-find-bar", never, { "slides": { "alias": "slides"; "required": true; "isSignal": true; }; }, { "navigate": "navigate"; "closed": "closed"; }, never, never, true, never>;
+}
+
+declare class InspectorPanelComponent {
+    /** The single selected element whose properties are being edited. */
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    /** Zero-based index of the active slide. */
+    readonly slideIndex: _angular_core.InputSignal<number>;
+    protected readonly editor: EditorStateService;
+    /** Alias so the template can call el() without conflicting with Angular internals. */
+    protected readonly el: _angular_core.Signal<PptxElement>;
+    /**
+     * Stable identity key for the selected element. Only changes when a
+     * *different* element is selected. The seed signal below is keyed on this so
+     * input [value] bindings never get rewritten while the user is typing into
+     * the currently-selected element (caret-reset / keyboard-dismiss guard).
+     */
+    protected readonly elementKey: _angular_core.Signal<string>;
+    /**
+     * One-shot seed of every editable field's initial display value, recomputed
+     * only when `elementKey` changes (i.e. on selection change), NOT on every
+     * edit commit. Bound to each <input>'s [value] so Angular re-evaluating the
+     * binding during change-detection always yields the same value mid-edit and
+     * therefore never rewrites the element's `.value` / resets the caret.
+     */
+    protected readonly seed: _angular_core.Signal<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        rotation: number;
+        opacity: number;
+        fillColor: string;
+        strokeColor: string;
+        textColor: string;
+        fontSize: number;
+    }>;
+    /** Whether the element supports shape-style (fill/stroke) editing. */
+    protected readonly hasShape: _angular_core.Signal<boolean>;
+    /** Whether the element supports text-style editing. */
+    protected readonly hasText: _angular_core.Signal<boolean>;
+    protected readonly currentBold: _angular_core.Signal<boolean>;
+    protected readonly currentItalic: _angular_core.Signal<boolean>;
+    protected readonly currentUnderline: _angular_core.Signal<boolean>;
+    protected onPositionChange(event: Event, axis: 'x' | 'y'): void;
+    protected onSizeChange(event: Event, dim: 'width' | 'height'): void;
+    protected onRotationChange(event: Event): void;
+    protected onOpacityChange(event: Event): void;
+    protected onFillColorChange(event: Event): void;
+    protected onStrokeColorChange(event: Event): void;
+    protected onTextColorChange(event: Event): void;
+    protected onFontSizeChange(event: Event): void;
+    protected onBoldToggle(): void;
+    protected onItalicToggle(): void;
+    protected onUnderlineToggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InspectorPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InspectorPanelComponent, "pptx-inspector-panel", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "slideIndex": { "alias": "slideIndex"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * SlidesPanelComponent — vertical slide-strip for the editor sidebar.
+ *
+ * Renders the live editable deck (from {@link EditorStateService}) as a
+ * scrollable vertical list of numbered thumbnail cards. Clicking a card emits
+ * `select(index)`; the active card is highlighted. Per-card hover toolbar
+ * provides Duplicate, Delete (disabled when only 1 slide), Move up, and Move
+ * down. A footer "＋ Add slide" button appends a blank slide after the current
+ * `activeIndex`.
+ *
+ * Usage:
+ * ```html
+ * <pptx-slides-panel
+ *   [canvasSize]="loader.canvasSize()"
+ *   [mediaDataUrls]="loader.mediaDataUrls()"
+ *   [activeIndex]="activeSlideIndex()"
+ *   (select)="goTo($event)"
+ * />
+ * ```
+ */
+declare class SlidesPanelComponent {
+    /** Natural (100 %) canvas dimensions — forwarded to each SlideCanvasComponent. */
+    readonly canvasSize: _angular_core.InputSignal<CanvasSize>;
+    /** Media asset lookup table — forwarded to each SlideCanvasComponent. */
+    readonly mediaDataUrls: _angular_core.InputSignal<Map<string, string>>;
+    /** Zero-based index of the currently active slide (highlighted in blue). */
+    readonly activeIndex: _angular_core.InputSignal<number>;
+    /** Emits the zero-based index of the card the user clicked. */
+    readonly select: _angular_core.OutputEmitterRef<number>;
+    protected readonly editor: EditorStateService;
+    /** Zoom level that fits the full canvas width into THUMB_W pixels. */
+    readonly thumbZoom: _angular_core.Signal<number>;
+    /** Pixel height of the clipping box (aspect-correct). */
+    readonly thumbH: _angular_core.Signal<number>;
+    /** ngStyle object for the thumbnail clipping box. */
+    readonly clipStyle: _angular_core.Signal<Record<string, string>>;
+    onDuplicate(index: number): void;
+    onDelete(index: number): void;
+    onMoveUp(index: number): void;
+    onMoveDown(index: number): void;
+    onAddSlide(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlidesPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlidesPanelComponent, "pptx-slides-panel", never, { "canvasSize": { "alias": "canvasSize"; "required": true; "isSignal": true; }; "mediaDataUrls": { "alias": "mediaDataUrls"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
+}
+
+declare class EditorToolbarComponent {
+    /** Zero-based index of the slide being edited. */
+    readonly slideIndex: _angular_core.InputSignal<number>;
+    protected readonly editor: EditorStateService;
+    /** Align needs ≥2 selected elements; distribute needs ≥3. */
+    protected readonly canAlign: _angular_core.Signal<boolean>;
+    protected readonly canDistribute: _angular_core.Signal<boolean>;
+    /** Group needs ≥2 selected; ungroup needs exactly one selected group. */
+    protected readonly canGroup: _angular_core.Signal<boolean>;
+    protected readonly canUngroup: _angular_core.Signal<boolean>;
+    protected onInsertText(): void;
+    protected onInsertShape(shapeType: 'rect' | 'ellipse' | 'line'): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorToolbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EditorToolbarComponent, "pptx-editor-toolbar", never, { "slideIndex": { "alias": "slideIndex"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class EditorContextMenuComponent {
+    /** Horizontal viewport coordinate (px) of the top-left corner of the menu. */
+    readonly x: _angular_core.InputSignal<number>;
+    /** Vertical viewport coordinate (px) of the top-left corner of the menu. */
+    readonly y: _angular_core.InputSignal<number>;
+    /** Zero-based index of the slide being edited. */
+    readonly slideIndex: _angular_core.InputSignal<number>;
+    /** Emitted when the menu should close (Escape or outside click). */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    protected readonly editor: EditorStateService;
+    private readonly host;
+    onEscape(): void;
+    onDocumentPointerDown(event: PointerEvent): void;
+    protected onCut(): void;
+    protected onCopy(): void;
+    protected onPaste(): void;
+    protected onDuplicate(): void;
+    protected onDelete(): void;
+    protected onBringToFront(): void;
+    protected onSendToBack(): void;
+    protected onBringForward(): void;
+    protected onSendBackward(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorContextMenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EditorContextMenuComponent, "pptx-editor-context-menu", never, { "x": { "alias": "x"; "required": true; "isSignal": true; }; "y": { "alias": "y"; "required": true; "isSignal": true; }; "slideIndex": { "alias": "slideIndex"; "required": true; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+}
+
+declare class ExportService {
+    /**
+     * Rasterize a single DOM element to PNG and trigger a browser download.
+     *
+     * @param el       - The element to capture (e.g. the `.pptx-ng-canvas-stage`).
+     * @param fileName - Suggested download file name (unsafe chars are stripped).
+     * @param scale    - Device-pixel ratio multiplier (default 2 for sharp output).
+     */
+    exportElementToPng(el: HTMLElement, fileName: string, scale?: number): Promise<void>;
+    /**
+     * Rasterize a single element to a canvas (passthrough to html2canvas-pro).
+     * Capture each slide's canvas *while that slide is the live DOM* — the
+     * viewer reuses one stage node, so a deferred capture would yield the same
+     * (last) slide for every page.
+     */
+    renderElement(el: HTMLElement, scale?: number): Promise<HTMLCanvasElement>;
+    /**
+     * Assemble a multi-page PDF from pre-rendered slide canvases (one page per
+     * canvas, sized to the slide aspect ratio in pt) and trigger a download.
+     *
+     * @param canvases     - One canvas per slide, in order, each captured while
+     *                       its slide was the live stage.
+     * @param canvasWidth  - Slide canvas width in pixels (for aspect ratio).
+     * @param canvasHeight - Slide canvas height in pixels (for aspect ratio).
+     * @param fileName     - Suggested download file name (unsafe chars stripped).
+     */
+    exportCanvasesToPdf(canvases: HTMLCanvasElement[], canvasWidth: number, canvasHeight: number, fileName: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ExportService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ExportService>;
+}
+
+/**
+ * A drop-in replacement for `html2canvas(element, options)` that first
+ * resolves any oklch / oklab / lch / lab / color() values in the cloned
+ * DOM to rgb()/hex, preventing parse errors in html2canvas ≤ 1.x.
+ *
+ * Three-pronged approach:
+ * 1. Patch `<style>` elements to replace oklch in CSS custom properties.
+ * 2. Resolve `:root` / `<body>` inline custom properties.
+ * 3. Walk every element and convert computed colour values to sRGB.
+ *
+ * Usage:
+ * ```ts
+ * import { renderToCanvas } from '../lib/canvas-export';
+ * const canvas = await renderToCanvas(element, { scale: 2 });
+ * ```
+ */
+declare function renderToCanvas(element: HTMLElement, options?: Partial<Options>): Promise<HTMLCanvasElement>;
+
+/**
+ * editor-history.ts — Generic undo/redo history stack.
+ *
+ * Framework-agnostic: no Angular, React, or any other framework imports.
+ * Designed to be consumed by an Angular service (e.g. EditorStateService).
+ *
+ * ## Snapshot semantics (PRE-mutation model)
+ *
+ * `record(snapshot, label)` must be called with the snapshot taken BEFORE the
+ * caller applies its mutation.  The class never deep-clones values: the caller
+ * is responsible for passing already-cloned / immutable snapshots so that
+ * mutations to the live state do not retroactively corrupt stored history
+ * entries.
+ *
+ * ## Example usage inside EditorStateService
+ *
+ *   // before mutating:
+ *   this.history.record(this.currentSnapshot(), 'Move element');
+ *   // apply mutation to the live signal …
+ *
+ *   // undo:
+ *   const result = this.history.undo(this.currentSnapshot());
+ *   if (result) this.applySnapshot(result.snapshot);
+ *
+ *   // redo:
+ *   const result = this.history.redo(this.currentSnapshot());
+ *   if (result) this.applySnapshot(result.snapshot);
+ */
+interface UndoRedoResult<T> {
+    readonly snapshot: T;
+    readonly label: string;
+}
+interface EditorHistoryOptions {
+    /**
+     * Maximum number of past entries kept on the undo stack.
+     * When exceeded, the oldest entry is silently dropped.
+     * @default 100
+     */
+    maxDepth?: number;
+}
+/**
+ * Generic undo/redo history stack.
+ *
+ * `T` is the snapshot type; the caller decides what constitutes a snapshot
+ * (e.g. `PptxSlide[]`, a plain state object, etc.).
+ *
+ * No deep-cloning is performed inside this class — the caller must pass
+ * already-cloned snapshots.
+ */
+declare class EditorHistory<T> {
+    private readonly _maxDepth;
+    private readonly _past;
+    private readonly _future;
+    constructor(options?: EditorHistoryOptions);
+    /** True when at least one undo step is available. */
+    get canUndo(): boolean;
+    /** True when at least one redo step is available. */
+    get canRedo(): boolean;
+    /**
+     * Label of the most-recently recorded entry (the action that would be
+     * undone on the next `undo()` call), or `undefined` when the stack is
+     * empty.
+     */
+    get undoLabel(): string | undefined;
+    /**
+     * Label of the most-recently undone entry (the action that would be
+     * redone on the next `redo()` call), or `undefined` when the redo stack
+     * is empty.
+     */
+    get redoLabel(): string | undefined;
+    /** Number of entries currently on the undo (past) stack. */
+    get depth(): number;
+    /**
+     * Push `snapshot` (taken **before** the caller's mutation) onto the undo
+     * stack with the given `label`, then clear the redo stack.
+     *
+     * When the stack length exceeds `maxDepth`, the oldest entry is dropped.
+     *
+     * The caller must pass an already-cloned snapshot — this method does NOT
+     * deep-clone.
+     */
+    record(snapshot: T, label: string): void;
+    /**
+     * Undo the last recorded action.
+     *
+     * Pops the top of the past stack, pushes `current` onto the future stack
+     * (so it can be redone), and returns the popped entry so the caller can
+     * restore it.
+     *
+     * Returns `undefined` when there is nothing to undo (`canUndo === false`).
+     *
+     * The caller must pass an already-cloned snapshot for `current` — this
+     * method does NOT deep-clone.
+     */
+    undo(current: T): UndoRedoResult<T> | undefined;
+    /**
+     * Redo the last undone action.
+     *
+     * Pops the top of the future stack, pushes `current` back onto the past
+     * stack, and returns the popped entry so the caller can restore it.
+     *
+     * Returns `undefined` when there is nothing to redo (`canRedo === false`).
+     *
+     * The caller must pass an already-cloned snapshot for `current` — this
+     * method does NOT deep-clone.
+     */
+    redo(current: T): UndoRedoResult<T> | undefined;
+    /**
+     * Clear both the undo and redo stacks, resetting history to an empty
+     * state.
+     */
+    clear(): void;
+}
+
+/**
+ * element-operations — Pure array-transformation functions for slide elements.
+ *
+ * All functions are framework-agnostic (no Angular imports). Each takes a
+ * `readonly PptxElement[]` representing the ordered element list for a slide
+ * (array index 0 = back, last index = front/top in paint order) and returns a
+ * NEW array — the input is never mutated.
+ *
+ * Callers supply a `newId` wherever a new element identity is needed, keeping
+ * these functions deterministic and side-effect-free.
+ *
+ * Usage in an Angular service:
+ *   history.snapshot();
+ *   slides.update(s => replaceSlideElements(s, idx, ops(s[idx].elements, …)));
+ */
+
+/**
+ * Shallow-merge `patch` onto the element with `id`.
+ * The discriminant `type` is always preserved from the original element.
+ *
+ * @example
+ *   updateElementById(elements, 'el1', { x: 50, hidden: true })
+ */
+declare function updateElementById(elements: readonly PptxElement[], id: string, patch: Partial<PptxElement>): PptxElement[];
+/**
+ * Translate the element by `(dx, dy)` relative to its current position.
+ *
+ * @example
+ *   moveElementBy(elements, 'el1', 10, -5)
+ */
+declare function moveElementBy(elements: readonly PptxElement[], id: string, dx: number, dy: number): PptxElement[];
+/**
+ * Set the absolute position of the element with `id`.
+ *
+ * @example
+ *   setElementPosition(elements, 'el1', 100, 200)
+ */
+declare function setElementPosition(elements: readonly PptxElement[], id: string, x: number, y: number): PptxElement[];
+/**
+ * Set the size of the element with `id`, clamping both dimensions to at
+ * least `MIN_ELEMENT_SIZE` (mirrors React's min-size guard).
+ *
+ * @example
+ *   resizeElement(elements, 'el1', 300, 150)
+ */
+declare function resizeElement(elements: readonly PptxElement[], id: string, width: number, height: number): PptxElement[];
+/**
+ * Remove all elements whose `id` is contained in `ids`.
+ * Elements not in `ids` are returned in their original order.
+ *
+ * @example
+ *   deleteElementsByIds(elements, ['el1', 'el3'])
+ */
+declare function deleteElementsByIds(elements: readonly PptxElement[], ids: readonly string[]): PptxElement[];
+/**
+ * Insert a copy of the element with `id` at the end of the array, using
+ * `newId` as the copy's identity.  The copy is nudged by `offset` on both
+ * axes so it does not exactly overlap the original.
+ *
+ * The caller is responsible for supplying a unique `newId` — keeping this
+ * function pure and deterministic.
+ *
+ * @example
+ *   duplicateElementById(elements, 'el1', crypto.randomUUID(), 20)
+ */
+declare function duplicateElementById(elements: readonly PptxElement[], id: string, newId: string, offset?: number): PptxElement[];
+/**
+ * Move the element with `id` to the end of the array (top/front in paint order).
+ *
+ * @example
+ *   bringToFront(elements, 'el1')
+ */
+declare function bringToFront(elements: readonly PptxElement[], id: string): PptxElement[];
+/**
+ * Move the element with `id` to index 0 (bottom/back in paint order).
+ *
+ * @example
+ *   sendToBack(elements, 'el1')
+ */
+declare function sendToBack(elements: readonly PptxElement[], id: string): PptxElement[];
+/**
+ * Swap the element with `id` with the element one position higher in the
+ * array (one step toward the front/top).  No-op if already at the top.
+ *
+ * @example
+ *   bringForward(elements, 'el1')
+ */
+declare function bringForward(elements: readonly PptxElement[], id: string): PptxElement[];
+/**
+ * Swap the element with `id` with the element one position lower in the
+ * array (one step toward the back/bottom).  No-op if already at the bottom.
+ *
+ * @example
+ *   sendBackward(elements, 'el1')
+ */
+declare function sendBackward(elements: readonly PptxElement[], id: string): PptxElement[];
+
+/**
+ * Pure paragraph bullet / list-marker helpers for the Angular text renderer.
+ *
+ * No Angular imports — all exports are plain TypeScript functions suitable for
+ * use inside computed signals or template helper calls.
+ *
+ * Numbering schemes follow the OOXML `ST_TextAutonumberScheme` enumeration
+ * (ECMA-376 §20.1.10.81). The `autoNumType` strings come from
+ * `BulletInfo.autoNumType` as parsed by `pptx-viewer-core`.
+ */
+
+/**
+ * Render the n-th (1-based) marker for an OOXML auto-numbering scheme.
+ *
+ * Suffix conventions:
+ * - `…Period`    →  `label.`  (e.g. "1.", "a.", "i.")
+ * - `…ParenR`    →  `label)`  (e.g. "1)", "a)", "i)")
+ * - `…ParenBoth` →  `(label)` (e.g. "(1)", "(a)", "(i)")
+ * - `…Plain`     →  `label`   (bare numeral)
+ *
+ * Unrecognised schemes fall back to `"<n>."`.
+ *
+ * @param autoNumType - The OOXML auto-number type string (e.g. "arabicPeriod").
+ * @param n           - 1-based sequence number to format.
+ */
+declare function formatAutoNumber(autoNumType: string | undefined, n: number): string;
+/**
+ * Resolved bullet marker for a single paragraph.
+ *
+ * `marker`     — the text to prepend (e.g. "•", "1.", "a)").
+ * `isNumbered` — true for auto-numbered lists; false for character bullets.
+ * `color`      — optional explicit bullet colour (hex string from `BulletInfo.color`).
+ * `fontFamily` — optional explicit bullet font (from `BulletInfo.fontFamily`).
+ */
+interface ParagraphBulletResult {
+    marker: string;
+    isNumbered: boolean;
+    color?: string;
+    fontFamily?: string;
+}
+/**
+ * Resolve the bullet marker for the first segment of a paragraph.
+ *
+ * Returns `undefined` when:
+ * - `firstSegment` is undefined or carries no `bulletInfo`.
+ * - `bulletInfo.none` is `true` (`a:buNone` explicitly suppresses the bullet).
+ * - The paragraph's `listType` is `'none'`.
+ * - Neither `char` nor `autoNumType` is present.
+ *
+ * For auto-numbered bullets the 1-based sequence index is derived from
+ * `bulletInfo.autoNumStartAt` (default 1) plus `bulletInfo.paragraphIndex`
+ * (0-based paragraph position within the text body).
+ *
+ * @param firstSegment - The first `TextSegment` of the paragraph (carries `bulletInfo`).
+ */
+declare function resolveParagraphBullet(firstSegment: TextSegment | undefined): ParagraphBulletResult | undefined;
+/**
+ * Return the left-indent in pixels for the given list nesting level.
+ *
+ * `level` is the 0-based `paragraphLevel` from `TextSegment` (matches
+ * OOXML `a:p/@lvl`). `undefined` or negative values are treated as level 0.
+ *
+ * @example
+ * bulletIndentPx(0)         // 0
+ * bulletIndentPx(1)         // 18
+ * bulletIndentPx(3)         // 54
+ * bulletIndentPx(undefined) // 0
+ */
+declare function bulletIndentPx(level: number | undefined): number;
+
+/**
+ * EquationRendererComponent — Angular port of the Vue `EquationRenderer.vue`
+ * (single-equation variant).
+ *
+ * Renders one parsed OMML equation tree as inline MathML via Angular's
+ * `DomSanitizer.bypassSecurityTrustHtml`, which is required because Angular's
+ * default HTML sanitizer strips `<math>` namespace markup.
+ *
+ * The wrapper is an inline-block `<span>` so the component flows inside a text
+ * paragraph in place of a regular text run. When an equation number is
+ * supplied the layout mirrors the Vue numbered-equation row: centred equation
+ * with the number right-aligned (flex row, width 100%).
+ *
+ * Pure conversion logic lives in `omml-to-mathml.ts` (Angular-free) so it can
+ * be unit-tested without TestBed.
+ */
+declare class EquationRendererComponent {
+    /** Parsed OMML equation tree (the `equationXml` field of a `TextSegment`). */
+    readonly equationXml: _angular_core.InputSignal<Record<string, unknown>>;
+    /** Optional equation number shown right-aligned, e.g. `"1"` → `(1)`. */
+    readonly equationNumber: _angular_core.InputSignal<string | undefined>;
+    private readonly sanitizer;
+    /**
+     * Converts the OMML input to MathML and wraps it in a `SafeHtml` value so
+     * Angular's `[innerHTML]` binding renders the `<math>` markup instead of
+     * stripping it.
+     */
+    readonly safeMathml: _angular_core.Signal<SafeHtml>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EquationRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EquationRendererComponent, "pptx-equation-renderer", never, { "equationXml": { "alias": "equationXml"; "required": true; "isSignal": true; }; "equationNumber": { "alias": "equationNumber"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * omml-to-mathml.ts — pure OMML → MathML conversion.
+ *
+ * Angular port of the Vue `viewer/composables/omml-to-mathml.ts`, consolidated
+ * into a single self-contained, framework-agnostic module. No Angular/Vue/DOM
+ * dependencies.
+ *
+ * Converts Office MathML (OMML) XML objects — as parsed by fast-xml-parser
+ * during PPTX load (attributes prefixed with `@_`) — into standard MathML
+ * markup strings (`<math>…</math>`) that browsers render natively.
+ *
+ * `pptx-viewer-core` does NOT ship an OMML→MathML converter (its
+ * `OmmlLatexConverter` only does OMML↔LaTeX), so this logic is ported here.
+ */
+
+/**
+ * A parsed OMML node. Structurally a parsed-XML object: attributes live under
+ * `@_`-prefixed keys, children under their (namespaced) tag name, text under
+ * `#text` (or a collapsed bare string). Aliased to core's `XmlObject`.
+ */
+type OmmlNode = XmlObject;
+/**
+ * Convert an OMML XML node (from fast-xml-parser) into a MathML string.
+ *
+ * Accepts the object at the `<a14:m>` / `<m:oMathPara>` level or directly at
+ * `<m:oMath>`. Returns a `<math>` element string, or empty string if the input
+ * is empty / unparseable.
+ */
+declare function convertOmmlToMathMl(ommlNode: OmmlNode): string;
+/**
+ * Convenience wrapper used by the Angular viewer: `ommlToMathml(omml)`.
+ *
+ * Accepts the parsed OMML object (the shape stored on
+ * {@link TextSegment.equationXml}) or a raw OMML markup string. String inputs
+ * are not re-parsed here (no XML parser dependency in this pure module) — they
+ * are returned wrapped so callers can still surface raw markup if needed.
+ */
+declare function ommlToMathml(omml: Record<string, unknown> | string | undefined): string;
+
+/**
+ * Shape-geometry clip-path helper.
+ *
+ * Wires the core geometry APIs into the Angular viewer's shape clipping
+ * pipeline. Implements a priority cascade so renderers always pick the
+ * highest-fidelity geometry available for a given element:
+ *
+ *   1. **Adjustment-aware** — if `shapeAdjustments` exist, consult
+ *      {@link getAdjustmentAwareShapeClipPath} so shapes like `pie`, `arc`,
+ *      `donut`, `blockArc`, and the wedge callouts respond to their
+ *      adjustment values.
+ *   2. **Spec-correct preset evaluator** — {@link getShapeClipPathFromPreset}
+ *      uses the ECMA-376 `pathLst` evaluator to produce a `path('…')`
+ *      clip-path for any shape covered by the preset table.
+ *   3. **Cloud Bezier path** — {@link getCloudPathForRendering} produces a
+ *      DPI-stable cubic-Bezier `path('…')` for `cloud` / `cloudCallout`.
+ *   4. **Static polygon table** — {@link getShapeClipPath} (the core preset
+ *      table) is the final fallback for shapes none of the higher-fidelity
+ *      APIs cover.
+ *
+ * This module is a plain-TypeScript port of the React package's
+ * `viewer/utils/resolved-shape-clip-path.ts`, with no framework imports.
+ * It mirrors the Vue port's `viewer/composables/shape-geometry.ts` exactly
+ * so the exported function names and signatures are drop-in compatible.
+ */
+
+/**
+ * Resolve the best available CSS `clip-path` value for a shape type at a
+ * given pixel size. Implements the priority cascade described in the module
+ * docstring.
+ *
+ * @param shapeType   The OOXML preset geometry name (case-insensitive).
+ * @param width       Element width in pixels (must be > 0 for path output).
+ * @param height      Element height in pixels (must be > 0 for path output).
+ * @param adjustments Optional `shapeAdjustments` record from the element.
+ * @returns A CSS `clip-path` value (`polygon(...)`, `path('…')`, or `inset(...)`),
+ *          or `undefined` if no clipping is needed.
+ */
+declare function getResolvedShapeClipPathFor(shapeType: string | undefined, width: number, height: number, adjustments?: Record<string, number>): string | undefined;
+/**
+ * Element-level convenience wrapper. Pulls `shapeType`, `width`, `height`,
+ * and `shapeAdjustments` off a {@link PptxElement} and delegates to
+ * {@link getResolvedShapeClipPathFor}.
+ *
+ * @param element The PPTX element to resolve a clip-path for.
+ * @param width   Optional width override (pixels). Defaults to `element.width`.
+ * @param height  Optional height override (pixels). Defaults to `element.height`.
+ * @returns A CSS `clip-path` value, or `undefined`.
+ */
+declare function getResolvedShapeClipPath(element: PptxElement, width?: number, height?: number): string | undefined;
+
+/**
+ * Slide-background style resolution.
+ *
+ * Maps a `PptxSlide`'s background fields to a `[ngStyle]`-compatible map for
+ * the slide stage. Mirrors the React `SlideCanvas` background handling and the
+ * Vue port: the core parser resolves the theme/master chain onto the slide, so
+ * here we only translate the already-resolved fields to CSS.
+ *
+ * Precedence (highest first): image fill → gradient → pattern → solid colour.
+ * Pattern fills currently approximate to their background colour (the SVG
+ * pattern preset renderer — `color-patterns.ts` in React — is a shared
+ * extraction candidate; see PORTING.md).
+ */
+
+/** Default slide stage colour when a slide carries no usable background. */
+declare const DEFAULT_SLIDE_BACKGROUND = "#ffffff";
+/**
+ * Build the background portion of the slide stage style from a slide's
+ * resolved background fields. Returns only `background-*` properties so the
+ * caller can spread it into the rest of the stage style.
+ */
+declare function getSlideBackgroundStyle(slide: PptxSlide | undefined): StyleMap;
+
+/**
+ * Hyperlink resolution + URL safety for the viewer.
+ *
+ * Viewer-first subset of the React `hyperlink-security.ts`: enough to render
+ * safe `<a href>` links on text runs. Internal PowerPoint actions
+ * (`ppaction://…` slide jumps) and unsafe protocols are not turned into
+ * navigable hrefs here — slide-jump wiring is a follow-up (see PORTING.md).
+ */
+/**
+ * Whether a URL is safe to expose as an `href`. Blocks `javascript:`,
+ * `data:`, `vbscript:`, and `mhtml:` (case- and whitespace-bypass resistant);
+ * allows `http(s)`, `mailto:`, `tel:`, `ftp:`, and relative URLs.
+ */
+declare function isUrlSafe(url: string | undefined): boolean;
+/** Whether a URL is a PowerPoint internal action (`ppaction://…`). */
+declare function isPpactionUrl(url: string | undefined): boolean;
+/**
+ * Resolve a raw hyperlink value to a renderable, safe `href`, or `undefined`
+ * when it should not be a plain link (empty, unsafe, or an internal
+ * `ppaction://` slide jump).
+ */
+declare function resolveHyperlinkHref(url: string | undefined): string | undefined;
+
+/**
+ * Gradient fill CSS builder — pure TypeScript, no Angular dependency.
+ *
+ * Ported from `packages/react/src/viewer/utils/color-gradient.ts`.
+ *
+ * Handles sanitization of gradient stop arrays and conversion to CSS gradient
+ * strings. Gradient rendering follows ECMA-376 Part 1, §20.1.8.35 (gradFill)
+ * and §20.1.8.49 (pathFill). The three path types — circle, rect, shape — each
+ * have dedicated builders that approximate the OOXML behaviour as closely as
+ * CSS radial-gradient permits.
+ *
+ * Pattern fill (`a:pattFill`) is intentionally NOT included here — it lives in
+ * a separate module.
+ */
+
+/**
+ * Builds a complete CSS `linear-gradient()` or `radial-gradient()` string
+ * from a ShapeStyle's gradient properties.
+ *
+ * For radial gradients, the rendering varies by `fillGradientPathType`:
+ * - `"circle"` (default): Simple circular radial gradient at the focal point.
+ * - `"rect"`: Elliptical radial gradient sized from the fillToRect rectangle,
+ *    approximating the OOXML rectangular path gradient.
+ * - `"shape"`: Radial gradient using farthest-side sizing, approximating a
+ *    gradient that follows the shape boundary.
+ *
+ * Falls back to `style.fillGradient` if no valid stops are present.
+ *
+ * @param style - The shape style containing gradient configuration.
+ * @returns A CSS gradient string, or `undefined` if not a gradient fill.
+ */
+declare function buildCssGradientFromShapeStyle(style: ShapeStyle | undefined): string | undefined;
+
+/**
+ * SVG pattern generation for OOXML pattern fill presets.
+ *
+ * Each preset maps to a tiled inline SVG data URI that closely approximates
+ * the corresponding ECMA-376 pattern (ST_PresetPatternVal). Patterns use
+ * two colours: foreground (`fg`) drawn on top of a background (`bg`) fill.
+ *
+ * Tile sizes are kept small (4-16 px) for performance when used as CSS
+ * `background-image` data URIs.
+ *
+ * Reference: ECMA-376 Part 1, section 20.1.10.33 (ST_PresetPatternVal)
+ *
+ * Ported from `packages/react/src/viewer/utils/color-patterns.ts`.
+ * Pure TypeScript — no Angular, Vue, or React runtime imports.
+ */
+
+/**
+ * Generate an inline SVG string for an OOXML preset pattern fill.
+ *
+ * @param preset  - DrawingML `ST_PresetPatternVal` string (e.g. `"pct5"`, `"horz"`).
+ * @param fgColor - Foreground hex colour (e.g. `"#000000"`).
+ * @param bgColor - Background hex colour (e.g. `"#ffffff"`).
+ * @returns An SVG string for use as a tiled `background-image`, or `undefined`
+ *          when the preset is not implemented.
+ */
+declare function getPatternSvg(preset: string, fgColor: string, bgColor: string): string | undefined;
+/**
+ * Build CSS `background-image` and `background-color` values for an OOXML
+ * pattern fill (`a:pattFill`) from a resolved `ShapeStyle`.
+ *
+ * Returns `undefined` when:
+ * - `style` is absent,
+ * - `style.fillMode` is not `"pattern"`,
+ * - `style.fillPatternPreset` is missing, or
+ * - the preset is not implemented by `getPatternSvg`.
+ *
+ * Colour values are hex-normalised before being passed to `getPatternSvg` so
+ * the SVG is always well-formed even when the parser emits bare colour strings
+ * without a leading `#`.
+ *
+ * @param style - Resolved shape style from the core parser.
+ * @returns `{ backgroundImage, backgroundColor }` ready for `[ngStyle]`, or
+ *          `undefined` when pattern rendering is not applicable.
+ */
+declare function buildPatternFillCss(style: ShapeStyle | undefined): {
+    backgroundImage: string;
+    backgroundColor: string;
+} | undefined;
+
 /**
  * Theme system for the Angular PowerPoint viewer.
  *
@@ -402,5 +2427,5 @@ declare function themeStyle(theme: ViewerTheme | undefined): Record<string, stri
 type ClassValue = string | number | false | null | undefined;
 declare function cn(...values: ClassValue[]): string;
 
-export { DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR, ElementRendererComponent, LoadContentService, PowerPointViewerComponent, SlideCanvasComponent, VIEWER_THEME, cn, defaultCssVars, defaultRadius, defaultThemeColors, getContainerStyle, getImageSrc, getShapeFillStrokeStyle, getTextBlockStyle, provideViewerTheme, themeStyle, themeToCssVars };
-export type { CanvasSize, ClassValue, CollaborationConfig, CollaborationRole, StyleMap, ViewerTheme, ViewerThemeColors };
+export { ChartRendererComponent, ConnectorRendererComponent, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_SLIDE_BACKGROUND, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR, EditorContextMenuComponent, EditorHistory, EditorStateService, EditorToolbarComponent, ElementRendererComponent, EquationRendererComponent, ExportService, FindBarComponent, InkRendererComponent, InspectorPanelComponent, LoadContentService, Model3DRendererComponent, OleRendererComponent, PowerPointViewerComponent, PresentationOverlayComponent, RESIZE_HANDLES, SlideCanvasComponent, SlideSorterOverlayComponent, SlidesPanelComponent, SmartArtRendererComponent, TableRendererComponent, VIEWER_THEME, ZoomRendererComponent, applyMove, applyResize, bringForward, bringToFront, buildCssGradientFromShapeStyle, buildPatternFillCss, bulletIndentPx, cn, collectElementText, collectSlideText, convertOmmlToMathMl, defaultCssVars, defaultRadius, defaultThemeColors, deleteElementsByIds, duplicateElementById, formatAutoNumber, getContainerStyle, getImageSrc, getPatternSvg, getResolvedShapeClipPath, getResolvedShapeClipPathFor, getShapeFillStrokeStyle, getSlideBackgroundStyle, getTextBlockStyle, isPpactionUrl, isUrlSafe, moveElementBy, ommlToMathml, provideViewerTheme, renderToCanvas, resizeElement, resolveHyperlinkHref, resolveParagraphBullet, searchSlides, sendBackward, sendToBack, setElementPosition, themeStyle, themeToCssVars, updateElementById };
+export type { Box, CanvasSize, ClassValue, CollaborationConfig, CollaborationRole, ResizeHandle, StyleMap, ViewerTheme, ViewerThemeColors };