pptx-angular-viewer 1.1.16 → 1.1.18

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

@@ -1,10 +1,10 @@
 import * as _angular_core from '@angular/core';
 import { Signal, OnInit, OnDestroy, InjectionToken, Provider } from '@angular/core';
 import * as pptx_viewer_core from 'pptx-viewer-core';
-import { PptxSlide, AccessibilityCheckOptions, AccessibilityIssue, PptxElement, PptxTheme, PptxSlideMaster, PptxEmbeddedFont, PptxCoreProperties, PptxComment, TextSegment, TextStyle, PptxTableCell, Model3DPptxElement, ZoomPptxElement, XmlObject, ParsedSignature, SignatureStatus, AccessibilityIssueSeverity, AccessibilityIssueType, PptxElementAnimation, PptxTransitionType, PptxSlideTransition, ShapeStyle } from 'pptx-viewer-core';
+import { PptxSlide, AccessibilityCheckOptions, AccessibilityIssue, PptxElement, PptxTheme, PptxSlideMaster, PptxEmbeddedFont, PptxCoreProperties, ParsedSignature, PptxComment, TextSegment, TextStyle, PptxTableCell, Model3DPptxElement, ZoomPptxElement, PptxSlideTransition, TablePptxElement, ChartPptxElement, XmlObject, SignatureStatus, AccessibilityIssueSeverity, AccessibilityIssueType, PptxElementAnimation, PptxTransitionType, ShapeStyle } from 'pptx-viewer-core';
+import * as pptx_angular_viewer from 'pptx-angular-viewer';
 import { Options } from 'html2canvas-pro';
 import { SafeHtml } from '@angular/platform-browser';
-import * as pptx_angular_viewer from 'pptx-angular-viewer';
 
 /**
  * Theme configuration types for the PowerPoint viewer.
@@ -192,6 +192,55 @@ declare class AccessibilityService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<AccessibilityService>;
 }
 
+/**
+ * broadcast-helpers.ts — Pure (no Angular) helpers for the Broadcast dialog.
+ *
+ * A broadcast is a one-way collaboration session: the presenter drives slide
+ * navigation and viewers follow along via a shareable link. These helpers
+ * cover the testable, framework-agnostic parts of the Vue `BroadcastDialog.vue`
+ * and React `BroadcastDialog.tsx`: room-id generation, form validation, and
+ * the viewer-link builder.
+ *
+ * No `any`; all regexes use the `/u` flag; no `String.prototype.replaceAll`,
+ * no regex named-capture-groups (ng-packagr lib-target constraints).
+ */
+/** Default y-websocket server URL used when no default is supplied. */
+declare const DEFAULT_BROADCAST_SERVER_URL = "ws://localhost:1234";
+/** Optional seed values for the broadcast start form. */
+interface BroadcastDefaults {
+    roomId?: string;
+    serverUrl?: string;
+}
+/** The configuration emitted when a broadcast starts. */
+interface BroadcastConfig {
+    roomId: string;
+    serverUrl: string;
+}
+/** Generate a fresh, broadcast-scoped room id (`broadcast-<suffix>`). */
+declare function generateBroadcastRoomId(): string;
+/**
+ * Seed the start form from the (optional) defaults, generating a fresh room id
+ * when none is supplied and falling back to the default server URL.
+ */
+declare function seedBroadcastFields(defaults?: BroadcastDefaults): BroadcastConfig;
+/** Whether both required fields are non-blank (after trimming). */
+declare function canStartBroadcast(fields: BroadcastConfig): boolean;
+/**
+ * Assemble a {@link BroadcastConfig} from the (trimmed) form fields, or `null`
+ * when incomplete.
+ */
+declare function buildBroadcastConfig(fields: BroadcastConfig): BroadcastConfig | null;
+/**
+ * Build the shareable viewer follow-link for a broadcast. Returns just the
+ * room id when no `origin`/`pathname` are available (non-browser environments).
+ */
+declare function buildBroadcastViewerUrl(roomId: string, serverUrl: string, location?: {
+    origin: string;
+    pathname: string;
+}): string;
+/** Whether the runtime exposes a usable async clipboard write API. */
+declare function canUseClipboard(nav: Navigator | undefined): boolean;
+
 /**
  * collaboration-helpers.ts — Pure, framework-agnostic logic for the real-time
  * collaboration subsystem (Yjs-backed presence + remote cursors).
@@ -383,6 +432,12 @@ declare class EditorStateService {
     setSlides(slides: readonly PptxSlide[]): void;
     /** Current editable slides as a fresh (cloned) array. */
     snapshot(): readonly PptxSlide[];
+    /**
+     * Replace the whole deck with pre-computed slides (e.g. a find/replace
+     * result) as a single undoable history entry. Unlike {@link setSlides} this
+     * preserves history and selection.
+     */
+    applyReplacement(newSlides: readonly PptxSlide[], label?: string): void;
     select(ids: readonly string[]): void;
     toggleSelect(id: string, additive: boolean): void;
     clearSelection(): void;
@@ -457,6 +512,151 @@ declare class EditorStateService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<EditorStateService>;
 }
 
+/** Emitted when the user changes the find query or the case-sensitive toggle. */
+interface FindEvent {
+    query: string;
+    matchCase: boolean;
+}
+/** Emitted when the user confirms a replacement action. */
+interface ReplaceEvent {
+    query: string;
+    replacement: string;
+    matchCase: boolean;
+}
+declare class FindReplaceBarComponent {
+    /**
+     * Total number of matches found across all slides for the current query.
+     * Kept at 0 when no search has been performed yet.
+     */
+    readonly matchCount: _angular_core.InputSignal<number>;
+    /**
+     * Zero-based index of the currently highlighted match.
+     * Used to derive the 1-based display counter.
+     */
+    readonly matchIndex: _angular_core.InputSignal<number>;
+    /**
+     * Emitted whenever the find query or the case-sensitive toggle changes.
+     * The parent should run `findInSlides` and update `matchCount`/`matchIndex`.
+     */
+    readonly find: _angular_core.OutputEmitterRef<FindEvent>;
+    /**
+     * Emitted when the user clicks ↑ / ↓ or presses Enter in the find input.
+     * Payload is `1` (next) or `-1` (previous).
+     * The parent advances `matchIndex` and navigates to the matching slide.
+     */
+    readonly navigate: _angular_core.OutputEmitterRef<1 | -1>;
+    /**
+     * Emitted when the user clicks "Replace" (single match).
+     * The parent calls `replaceMatch(...)` on `EditorStateService`.
+     */
+    readonly replaceOne: _angular_core.OutputEmitterRef<ReplaceEvent>;
+    /**
+     * Emitted when the user clicks "Replace All".
+     * The parent calls `replaceInSlides(...)` and commits the result to history.
+     */
+    readonly replaceAll: _angular_core.OutputEmitterRef<ReplaceEvent>;
+    /** Emitted when the user closes the bar (Escape or ✕ button). */
+    readonly close: _angular_core.OutputEmitterRef<void>;
+    private readonly findInputRef;
+    /** Current text in the find input. */
+    readonly query: _angular_core.WritableSignal<string>;
+    /** Current text in the replacement input. */
+    readonly replacement: _angular_core.WritableSignal<string>;
+    /** Whether the search should be case-sensitive. */
+    readonly matchCase: _angular_core.WritableSignal<boolean>;
+    /** 1-based display index for the counter (e.g. "2 / 5"). Clamps to bounds. */
+    readonly displayIndex: _angular_core.Signal<number>;
+    /** Escape anywhere on the document closes the bar. */
+    onDocumentKeydown(event: KeyboardEvent): void;
+    onQueryInput(event: Event): void;
+    onReplacementInput(event: Event): void;
+    toggleCase(): void;
+    emitReplaceOne(): void;
+    emitReplaceAll(): void;
+    /** Focus the find input (called by the parent after toggling the bar open). */
+    focusFindInput(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FindReplaceBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FindReplaceBarComponent, "pptx-find-replace-bar", never, { "matchCount": { "alias": "matchCount"; "required": false; "isSignal": true; }; "matchIndex": { "alias": "matchIndex"; "required": false; "isSignal": true; }; }, { "find": "find"; "navigate": "navigate"; "replaceOne": "replaceOne"; "replaceAll": "replaceAll"; "close": "close"; }, never, never, true, never>;
+}
+
+/**
+ * find-replace-helpers.ts — Pure find & replace helpers for PPTX slides.
+ *
+ * Ported from:
+ *   packages/react/src/viewer/hooks/useFindReplace.ts  (findInSlides, applyFindReplacements)
+ *
+ * No Angular imports; safe to use in web workers or server-side code.
+ * All functions are immutable — they never mutate their input arrays.
+ *
+ * @module find-replace-helpers
+ */
+
+/**
+ * Identifies a single match of the find query at segment-level precision.
+ * Mirrors the React `FindResult` shape.
+ */
+interface FindResult {
+    /** Zero-based index of the slide in the slides array. */
+    slideIndex: number;
+    /** Id of the element that contains the match. */
+    elementId: string;
+    /** Zero-based index of the text segment within the element's `textSegments`. */
+    segmentIndex: number;
+    /** Character offset of the match start within the segment text. */
+    startOffset: number;
+    /** Number of characters matched (equals `query.length`). */
+    length: number;
+}
+/** Options passed to search and replace helpers. */
+interface FindOptions {
+    /** When `true`, the search is case-sensitive. Defaults to `false`. */
+    matchCase?: boolean;
+}
+/** Result returned by {@link replaceInSlides} and {@link replaceMatch}. */
+interface ReplaceResult {
+    /** Updated slides (immutable copy; unchanged slides share the original reference). */
+    slides: readonly PptxSlide[];
+    /** Number of text replacements actually applied. */
+    replacements: number;
+}
+/**
+ * Search all slides for occurrences of `query` at segment-level precision.
+ *
+ * - Only elements that pass `hasTextProperties` (text / shape / connector) are
+ *   searched; tables, smartArt, and groups are skipped (they have no
+ *   `textSegments`).
+ * - Overlapping matches are counted (search advances by 1 character after each
+ *   hit, not by `query.length`).
+ * - Returns an empty array when `query` is empty.
+ */
+declare function findInSlides(slides: readonly PptxSlide[], query: string, opts?: FindOptions): FindResult[];
+/**
+ * Apply a set of find-replace substitutions to slides immutably.
+ *
+ * Replacements inside the same segment are applied in **descending offset**
+ * order so that earlier matches are not shifted by later substitutions.
+ *
+ * Returns the original `slides` reference (no allocation) when `toReplace` is
+ * empty.
+ */
+declare function applyFindReplacements(slides: readonly PptxSlide[], toReplace: readonly FindResult[], replacement: string): ReplaceResult;
+/**
+ * Replace a single match (identified by its position in `allResults`) and
+ * return the updated slides together with the count of replacements applied
+ * (always 0 or 1).
+ *
+ * This is a convenience wrapper around {@link applyFindReplacements} for the
+ * "Replace current" action.
+ */
+declare function replaceMatch(slides: readonly PptxSlide[], allResults: readonly FindResult[], matchIndex: number, replacement: string): ReplaceResult;
+/**
+ * Replace **all** current matches and return the updated slides.
+ *
+ * This is a convenience wrapper around {@link applyFindReplacements} for the
+ * "Replace All" action.
+ */
+declare function replaceInSlides(slides: readonly PptxSlide[], query: string, replacement: string, opts?: FindOptions): ReplaceResult;
+
 /**
  * `LoadContentService` — Angular port of the React `useLoadContent` hook and
  * the Vue `useLoadContent` composable.
@@ -491,6 +691,8 @@ declare class LoadContentService {
     /** Core document properties from `docProps/core.xml`. */
     readonly coreProperties: _angular_core.WritableSignal<PptxCoreProperties | undefined>;
     /** Whether the presentation contains digital signatures. */
+    /** Parsed digital signatures (empty when unsigned or parsing fails). */
+    readonly signatures: _angular_core.WritableSignal<ParsedSignature[]>;
     readonly hasDigitalSignatures: _angular_core.WritableSignal<boolean>;
     /** Number of digital signatures found. */
     readonly digitalSignatureCount: _angular_core.WritableSignal<number>;
@@ -736,18 +938,31 @@ declare class PowerPointViewerComponent {
     protected readonly zoomPercent: _angular_core.Signal<number>;
     /** Fullscreen presentation-mode overlay visibility. */
     protected readonly presenting: _angular_core.WritableSignal<boolean>;
+    /** Presenter-view (speaker) overlay visibility. */
+    protected readonly presentingPresenter: _angular_core.WritableSignal<boolean>;
+    /** Epoch ms when presenter view started (drives the elapsed timer). */
+    protected readonly presenterStartTime: _angular_core.WritableSignal<number | null>;
     /** Slide-sorter grid overlay visibility. */
     protected readonly showSorter: _angular_core.WritableSignal<boolean>;
     /** Speaker-notes strip visibility. */
     protected readonly showNotes: _angular_core.WritableSignal<boolean>;
     /** Find-in-slides bar visibility. */
     protected readonly showFind: _angular_core.WritableSignal<boolean>;
+    /** Find-and-replace bar state (edit mode only). */
+    protected readonly showFindReplace: _angular_core.WritableSignal<boolean>;
+    protected readonly findResults: _angular_core.WritableSignal<readonly FindResult[]>;
+    protected readonly findActiveIndex: _angular_core.WritableSignal<number>;
+    private findMatchCase;
     /** Active right-docked tool panel (comments / accessibility), or null. */
-    protected readonly activePanel: _angular_core.WritableSignal<"comments" | "accessibility" | null>;
+    protected readonly activePanel: _angular_core.WritableSignal<"comments" | "accessibility" | "signatures" | null>;
     /** Document-properties (Info) dialog visibility. */
     protected readonly showProperties: _angular_core.WritableSignal<boolean>;
     /** Hyperlink-edit dialog visibility. */
     protected readonly showHyperlink: _angular_core.WritableSignal<boolean>;
+    /** Share (collaboration) dialog visibility. */
+    protected readonly showShare: _angular_core.WritableSignal<boolean>;
+    /** Broadcast dialog visibility. */
+    protected readonly showBroadcast: _angular_core.WritableSignal<boolean>;
     /** Local overrides applied to document properties via the Info dialog. */
     private readonly coreOverride;
     /** Comments on the active slide. */
@@ -781,6 +996,20 @@ declare class PowerPointViewerComponent {
     goTo(index: number): void;
     goPrev(): void;
     goNext(): void;
+    /** Open the find/replace bar (mutually exclusive with the find-only bar). */
+    protected openFindReplace(): void;
+    /** Re-run the search over the editable deck and refresh the match list. */
+    private refreshFindResults;
+    protected onFindReplaceFind(evt: FindEvent): void;
+    protected onFindReplaceNavigate(dir: 1 | -1): void;
+    protected onFindReplaceReplaceOne(evt: ReplaceEvent): void;
+    protected onFindReplaceReplaceAll(evt: ReplaceEvent): void;
+    /** Start a real-time collaboration session from the share dialog config. */
+    protected onShareStart(config: CollaborationConfig): void;
+    protected onShareStop(): void;
+    /** Start broadcasting (presenter as session owner) from the broadcast config. */
+    protected onBroadcastStart(config: BroadcastConfig): void;
+    protected onBroadcastStop(): void;
     /** Horizontal-swipe tracking start coordinates (touch begins on the canvas). */
     private swipeStartX;
     private swipeStartY;
@@ -804,10 +1033,14 @@ declare class PowerPointViewerComponent {
     zoomReset(): void;
     /** Open the fullscreen presentation overlay from the current slide. */
     present(): void;
+    /** Open the presenter (speaker) view — current+next slide, notes, timer. */
+    presentPresenter(): void;
+    /** Close the presenter view (and any audience overlay it opened). */
+    exitPresenter(): void;
     /** Toggle the speaker-notes strip. */
     toggleNotes(): void;
     /** Toggle a right-docked tool panel (clicking the active one closes it). */
-    togglePanel(panel: 'comments' | 'accessibility'): void;
+    togglePanel(panel: 'comments' | 'accessibility' | 'signatures'): void;
     /** Append a comment to the active slide (one history entry). */
     onCommentAdd(text: string): void;
     /** Remove a comment from the active slide. */
@@ -866,6 +1099,12 @@ declare class PowerPointViewerComponent {
      * slide is restored.
      */
     exportPdf(): Promise<void>;
+    /** Render every slide to a canvas (each made the live stage in turn). */
+    private renderAllSlideCanvases;
+    /** Export every slide as an animated GIF (2s per slide). */
+    exportGif(): Promise<void>;
+    /** Export every slide as a WebM video (3s per slide) via MediaRecorder. */
+    exportVideo(): 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"; "propertiesChange": "propertiesChange"; }, never, never, true, never>;
 }
@@ -896,6 +1135,184 @@ declare function applyMove(start: Box, dx: number, dy: number): Box;
  */
 declare function applyResize(start: Box, handle: ResizeHandle, dx: number, dy: number, min?: number): Box;
 
+/**
+ * Duotone SVG `<filter>` descriptor for Angular templates.
+ *
+ * Ported from:
+ *   packages/react/src/viewer/utils/effect-dag-filters.ts  (getDuotoneSvgFilterMarkup, hexToRgbUnit)
+ *   packages/angular/src/viewer/visual-effects.ts           (getDuotoneFilterId, getDuotoneSvgFilter)
+ *
+ * The React package serialises the SVG filter as a raw HTML string.  The Angular
+ * package instead returns a **structured descriptor** (`DuotoneFilterDef`) that
+ * the template can render declaratively with `@for` / `@switch`, matching the
+ * `SvgPrimitive` pattern used by `chart-renderer-helpers.ts`.
+ *
+ * @module viewer/duotone-filter
+ */
+
+/**
+ * Descriptor for an SVG `<feColorMatrix type="matrix">` primitive.
+ * The `values` string is a space-separated 4×5 colour-transformation matrix.
+ */
+interface FeColorMatrixPrimitive {
+    kind: 'feColorMatrix';
+    /** Space-separated 4×5 matrix values (`type="matrix"`). */
+    values: string;
+    /** `color-interpolation-filters` attribute (always `"sRGB"`). */
+    colorInterpolationFilters: 'sRGB';
+}
+/**
+ * One channel entry for an `<feComponentTransfer>` child function element.
+ * Maps to `<feFuncR>`, `<feFuncG>`, or `<feFuncB>` with `type="linear"`.
+ */
+interface FeComponentTransferChannel {
+    /** Which SVG component-transfer channel this entry corresponds to. */
+    channel: 'R' | 'G' | 'B';
+    /** The `slope` attribute value (highlight − shadow for that channel). */
+    slope: number;
+    /** The `intercept` attribute value (shadow colour for that channel, 0–1). */
+    intercept: number;
+}
+/**
+ * Descriptor for an SVG `<feComponentTransfer>` primitive, containing one
+ * linear ramp per RGB channel.
+ *
+ * The template should render:
+ * ```html
+ * <feComponentTransfer>
+ *   <feFuncR type="linear" [attr.slope]="ch.slope" [attr.intercept]="ch.intercept" />
+ *   …
+ * </feComponentTransfer>
+ * ```
+ */
+interface FeComponentTransferPrimitive {
+    kind: 'feComponentTransfer';
+    /** Exactly three entries — R, G, B in that order. */
+    channels: [FeComponentTransferChannel, FeComponentTransferChannel, FeComponentTransferChannel];
+}
+/**
+ * A fully structured descriptor for a duotone SVG `<filter>` definition.
+ *
+ * ### Integration guide (for the orchestrator)
+ *
+ * **Step 1 – Render the `<defs>` block.**
+ * Inside the element's host component (or a shared slide-level `<svg>`), emit
+ * a hidden `<svg>` containing one `<filter>` per element that has a duotone:
+ *
+ * ```html
+ * @if (duotone) {
+ *   <svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true">
+ *     <defs>
+ *       <filter [id]="duotone.id" color-interpolation-filters="sRGB">
+ *         @for (p of duotone.primitives; track p.kind) {
+ *           @switch (p.kind) {
+ *             @case ('feColorMatrix') {
+ *               <feColorMatrix type="matrix" [attr.values]="p.values" />
+ *             }
+ *             @case ('feComponentTransfer') {
+ *               <feComponentTransfer>
+ *                 @for (ch of p.channels; track ch.channel) {
+ *                   @switch (ch.channel) {
+ *                     @case ('R') { <feFuncR type="linear" [attr.slope]="ch.slope" [attr.intercept]="ch.intercept" /> }
+ *                     @case ('G') { <feFuncG type="linear" [attr.slope]="ch.slope" [attr.intercept]="ch.intercept" /> }
+ *                     @case ('B') { <feFuncB type="linear" [attr.slope]="ch.slope" [attr.intercept]="ch.intercept" /> }
+ *                   }
+ *                 }
+ *               </feComponentTransfer>
+ *             }
+ *           }
+ *         }
+ *       </filter>
+ *     </defs>
+ *   </svg>
+ * }
+ * ```
+ *
+ * **Step 2 – Apply the CSS `filter` reference.**
+ * In `element-style.ts` (or the image host component), when `duotone` is
+ * defined, append `duotone.cssFilter` to the element's `filter` CSS property
+ * *instead of* stripping the `url(#…)` reference as `getShapeFillStrokeStyle`
+ * currently does.  Example integration in `getShapeFillStrokeStyle`:
+ *
+ * ```ts
+ * const duotone = buildDuotoneFilter(el);
+ * const dagFilter = getEffectFilterCss(el.shapeStyle, el.id);
+ * if (dagFilter) {
+ *   // duotone url(#…) is now meaningful — keep it
+ *   style['filter'] = dagFilter;
+ * } else if (duotone) {
+ *   style['filter'] = duotone.cssFilter;
+ * }
+ * // Expose duotone so the template can render the <defs> block:
+ * return { style, duotone };
+ * ```
+ */
+interface DuotoneFilterDef {
+    /**
+     * Stable SVG `filter` element `id`, derived deterministically from the
+     * element id.  Format: `dag-duotone-<elementId>`.
+     */
+    id: string;
+    /**
+     * Ordered list of SVG filter primitives that make up the `<filter>` body.
+     * Always contains exactly two entries:
+     *   0. `feColorMatrix`        — BT.709 luminance-to-grayscale matrix
+     *   1. `feComponentTransfer`  — per-channel linear ramp (shadow → highlight)
+     */
+    primitives: [FeColorMatrixPrimitive, FeComponentTransferPrimitive];
+    /**
+     * Ready-to-use CSS `filter` function string.
+     * Example: `"url(#dag-duotone-shape1)"`.
+     * Append this to the element's existing `filter` CSS value.
+     */
+    cssFilter: string;
+    /**
+     * The raw shadow colour (`color1`) in 6-digit hex, preserved for tests and
+     * debugging without re-parsing the matrix.
+     */
+    shadowHex: string;
+    /**
+     * The raw highlight colour (`color2`) in 6-digit hex, preserved for tests and
+     * debugging without re-parsing the matrix.
+     */
+    highlightHex: string;
+}
+/**
+ * Build a stable SVG filter `id` for a duotone effect on the given element.
+ *
+ * Matches the format used by `getDuotoneFilterId` in `visual-effects.ts` so
+ * that the `url(#…)` reference emitted by `getEffectDagCssFilter` points to
+ * the correct `<filter>` definition.
+ *
+ * @param elementId - The element's `id` from `PptxElement.id`.
+ * @returns A CSS-identifier-safe string (no spaces, starts with a letter).
+ */
+declare function buildDuotoneFilterId(elementId: string): string;
+/**
+ * Derive a fully structured duotone `<filter>` descriptor from a
+ * `PptxElement`.
+ *
+ * The function reads `element.shapeStyle.dagDuotone` — the parsed
+ * `<a:duotone>` colour pair populated by the core parser.  Returns
+ * `undefined` when the element carries no duotone effect.
+ *
+ * ### Colour math
+ * 1. Convert to grayscale using BT.709 luminance weights (feColorMatrix).
+ * 2. Map grayscale 0 → `color1` (shadow) and 1 → `color2` (highlight) via
+ *    per-channel linear ramps (feComponentTransfer / feFuncR|G|B):
+ *    ```
+ *    slope     = highlight_channel − shadow_channel
+ *    intercept = shadow_channel
+ *    ```
+ *    At luminance 0: `output = intercept = shadow`.
+ *    At luminance 1: `output = slope + intercept = highlight`.
+ *
+ * @param element - Any `PptxElement`; elements without `shapeStyle` or
+ *   `dagDuotone` return `undefined`.
+ * @returns A {@link DuotoneFilterDef} or `undefined`.
+ */
+declare function buildDuotoneFilter(element: PptxElement): DuotoneFilterDef | undefined;
+
 /**
  * Basic, framework-agnostic style computation for slide elements, returning
  * `[ngStyle]`-compatible maps.
@@ -911,6 +1328,13 @@ declare function applyResize(start: Box, handle: ResizeHandle, dx: number, dy: n
  * return type (CSS map shape) differs per framework — so a future refactor
  * could hoist a neutral core into `pptx-viewer-shared`.
  */
+/**
+ * Resolve the duotone SVG `<filter>` descriptor for an element, or `undefined`
+ * when it carries no duotone image effect. The renderer pairs this with the
+ * `filter: url(#…)` set in {@link getShapeFillStrokeStyle} by injecting the
+ * matching `<filter>` def into a hidden `<defs>` block.
+ */
+declare function getDuotoneFilterDef(el: PptxElement): DuotoneFilterDef | undefined;
 /** `[ngStyle]`-compatible style map. */
 type StyleMap = Record<string, string | number>;
 /**
@@ -1241,6 +1665,8 @@ declare class ElementRendererComponent {
     readonly obstacles: _angular_core.InputSignal<readonly Rect[]>;
     readonly canvasWidth: _angular_core.InputSignal<number>;
     readonly canvasHeight: _angular_core.InputSignal<number>;
+    /** Duotone SVG `<filter>` descriptor for this element, if any. */
+    readonly duotoneFilter: _angular_core.Signal<pptx_angular_viewer.DuotoneFilterDef | undefined>;
     readonly containerStyle: _angular_core.Signal<StyleMap>;
     readonly shapeContainerStyle: _angular_core.Signal<StyleMap>;
     readonly textStyle: _angular_core.Signal<StyleMap>;
@@ -2061,6 +2487,14 @@ declare class PresentationOverlayComponent implements OnInit, OnDestroy {
     readonly closed: _angular_core.OutputEmitterRef<void>;
     /** Zero-based index into `slides()`. */
     protected readonly currentIndex: _angular_core.WritableSignal<number>;
+    /**
+     * Active slide-transition animation: the outgoing slide + the incoming
+     * slide's transition, played over the new slide. Cleared on completion.
+     */
+    protected readonly activeTransition: _angular_core.WritableSignal<{
+        outgoing: PptxSlide;
+        transition: PptxSlideTransition;
+    } | null>;
     /** Viewport dimensions — updated on resize. */
     private readonly viewportW;
     private readonly viewportH;
@@ -2299,6 +2733,14 @@ declare class InspectorPanelComponent {
     protected readonly currentBold: _angular_core.Signal<boolean>;
     protected readonly currentItalic: _angular_core.Signal<boolean>;
     protected readonly currentUnderline: _angular_core.Signal<boolean>;
+    /** The selected element narrowed to a table, or undefined. */
+    protected readonly tableEl: _angular_core.Signal<TablePptxElement | undefined>;
+    /** The selected element narrowed to a chart, or undefined. */
+    protected readonly chartEl: _angular_core.Signal<ChartPptxElement | undefined>;
+    /** Commit a partial-element patch from an advanced sub-panel as one history entry. */
+    protected onPatch(patch: Partial<PptxElement>): void;
+    /** Commit a fully-replaced element (table/chart data editors) as one history entry. */
+    protected onElementReplace(updated: PptxElement): void;
     protected onPositionChange(event: Event, axis: 'x' | 'y'): void;
     protected onSizeChange(event: Event, dim: 'width' | 'height'): void;
     protected onRotationChange(event: Event): void;
@@ -2314,6 +2756,281 @@ declare class InspectorPanelComponent {
     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>;
 }
 
+/**
+ * gradient-picker-helpers.ts — Pure (no Angular) helpers for GradientPickerComponent.
+ *
+ * Ported from / models the patterns in:
+ *   packages/react/src/viewer/components/inspector/FillAdvancedControls.tsx
+ *   packages/react/src/viewer/components/inspector/FillStrokeProperties.tsx
+ *   packages/angular/src/viewer/color-gradient.ts
+ *
+ * Readers extract current gradient values from a PptxElement (falling back to
+ * sensible defaults), and patch-builders produce shallow-merge-ready
+ * Partial<PptxElement> objects safe to pass to EditorStateService.updateElement.
+ *
+ * No `any` — every type is concrete or `unknown` + narrowed.
+ */
+
+/** A single gradient stop, mirroring the ShapeStyle array item shape. */
+interface GradientStop {
+    color: string;
+    position: number;
+    opacity?: number;
+}
+/** The editable gradient state surfaced to the component. */
+interface GradientState {
+    type: 'linear' | 'radial';
+    /** Angle in degrees (only meaningful for linear). */
+    angle: number;
+    stops: GradientStop[];
+}
+
+declare class GradientPickerComponent {
+    /** The element whose gradient fill is being edited. */
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    /**
+     * Emits a Partial<PptxElement> patch each time the user commits a change.
+     * The orchestrator (InspectorPanelComponent or a wrapper) should call
+     * EditorStateService.updateElement(slideIndex, element().id, patch).
+     */
+    readonly patch: _angular_core.OutputEmitterRef<Partial<PptxElement>>;
+    /** Derived gradient state from the current element. */
+    protected readonly state: _angular_core.Signal<GradientState>;
+    /** CSS gradient string for the preview strip. */
+    protected readonly previewCss: _angular_core.Signal<string>;
+    protected onTypeChange(event: Event): void;
+    protected onAngleChange(event: Event): void;
+    protected onStopColorChange(event: Event, index: number): void;
+    protected onStopPositionChange(event: Event, index: number): void;
+    protected onStopOpacityChange(event: Event, index: number): void;
+    protected onRemoveStop(index: number): void;
+    protected onAddStop(): void;
+    private emit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GradientPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GradientPickerComponent, "pptx-gradient-picker", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; }, { "patch": "patch"; }, never, never, true, never>;
+}
+
+/**
+ * effects-helpers.ts — Pure (no Angular) helpers for EffectsPanelComponent.
+ *
+ * Ported from / models the patterns in:
+ *   packages/react/src/viewer/components/inspector/fill-stroke-effect-configs.ts
+ *   packages/react/src/viewer/components/inspector/fill-stroke-visual-configs.ts
+ *   packages/angular/src/viewer/visual-effects.ts
+ *   packages/angular/src/viewer/inspector-helpers.ts
+ *
+ * Readers extract effect values from a PptxElement (with sensible defaults),
+ * and patch-builders produce shallow-merge-ready Partial<PptxElement> objects
+ * for EditorStateService.updateElement.
+ *
+ * @module viewer/effects-helpers
+ */
+
+/** Editable outer shadow state. */
+interface OuterShadowState {
+    enabled: boolean;
+    color: string;
+    opacity: number;
+    blur: number;
+    /** Direction angle in degrees. */
+    angle: number;
+    /** Distance in px. */
+    distance: number;
+}
+/** Editable inner shadow state. */
+interface InnerShadowState {
+    enabled: boolean;
+    color: string;
+    opacity: number;
+    blur: number;
+    offsetX: number;
+    offsetY: number;
+}
+/** Editable glow state. */
+interface GlowState {
+    enabled: boolean;
+    color: string;
+    radius: number;
+    opacity: number;
+}
+/** Editable reflection state. */
+interface ReflectionState {
+    enabled: boolean;
+    blurRadius: number;
+    startOpacity: number;
+    endOpacity: number;
+    distance: number;
+    direction: number;
+}
+/** Editable soft-edge (blur) state. */
+interface SoftEdgeState {
+    enabled: boolean;
+    radius: number;
+}
+/** All effect values collected for the panel. */
+interface EffectsState {
+    outerShadow: OuterShadowState;
+    innerShadow: InnerShadowState;
+    glow: GlowState;
+    reflection: ReflectionState;
+    softEdge: SoftEdgeState;
+}
+
+declare class EffectsPanelComponent {
+    /** The element whose effects are being edited. */
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    /**
+     * Emits a Partial<PptxElement> patch each time the user commits a change.
+     * The orchestrator should call EditorStateService.updateElement(slideIndex, element().id, patch).
+     */
+    readonly patch: _angular_core.OutputEmitterRef<Partial<PptxElement>>;
+    /** Derived EffectsState from the current element. */
+    protected readonly state: _angular_core.Signal<EffectsState>;
+    /** Stable key for keying inputs to the current element (prevents caret-reset). */
+    protected readonly elementKey: _angular_core.Signal<string>;
+    protected onOuterShadowToggle(event: Event): void;
+    protected onOuterShadowField(field: 'color' | 'opacity' | 'blur' | 'angle' | 'distance', event: Event): void;
+    protected onInnerShadowToggle(event: Event): void;
+    protected onInnerShadowField(field: 'color' | 'opacity' | 'blur' | 'offsetX' | 'offsetY', event: Event): void;
+    protected onGlowToggle(event: Event): void;
+    protected onGlowField(field: 'color' | 'radius' | 'opacity', event: Event): void;
+    protected onReflectionToggle(event: Event): void;
+    protected onReflectionField(field: 'blurRadius' | 'startOpacity' | 'endOpacity' | 'distance' | 'direction', event: Event): void;
+    protected onSoftEdgeToggle(event: Event): void;
+    protected onSoftEdgeRadius(event: Event): void;
+    private emit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EffectsPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EffectsPanelComponent, "pptx-effects-panel", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; }, { "patch": "patch"; }, never, never, true, never>;
+}
+
+/**
+ * text-advanced-helpers.ts — Pure (no Angular) helpers for TextAdvancedPanelComponent.
+ *
+ * Ported from / models the patterns in:
+ *   packages/react/src/viewer/components/inspector/TextPropertiesHelpers.tsx
+ *   packages/react/src/viewer/components/inspector/TextProperties.tsx
+ *   packages/angular/src/viewer/inspector-helpers.ts
+ *
+ * Readers extract advanced text values from a PptxElement (with sensible
+ * defaults), and patch-builders produce shallow-merge-ready Partial<PptxElement>
+ * objects for EditorStateService.updateElement.
+ *
+ * @module viewer/text-advanced-helpers
+ */
+
+/**
+ * The advanced text properties surfaced to the panel.
+ *
+ * Covers: character spacing, line spacing, paragraph alignment + spacing,
+ * indent, text direction, and vertical anchor.
+ */
+interface TextAdvancedState {
+    /** Character spacing in hundredths of a point (0 = normal). */
+    characterSpacing: number;
+    /** Line spacing multiplier (1.0 = single). */
+    lineSpacing: number;
+    /** Exact line spacing in points, or null when using multiplier mode. */
+    lineSpacingExactPt: number | null;
+    /** Paragraph spacing before in px. */
+    paragraphSpacingBefore: number;
+    /** Paragraph spacing after in px. */
+    paragraphSpacingAfter: number;
+    /** Paragraph text alignment. */
+    align: NonNullable<TextStyle['align']>;
+    /** Vertical anchor within the text body. */
+    vAlign: NonNullable<TextStyle['vAlign']>;
+    /** Paragraph first-line indent in px. */
+    paragraphIndent: number;
+    /** Paragraph left margin in px. */
+    paragraphMarginLeft: number;
+    /** Body text direction. */
+    textDirection: NonNullable<TextStyle['textDirection']>;
+    /** Right-to-left paragraph/run direction. */
+    rtl: boolean;
+}
+
+declare class TextAdvancedPanelComponent {
+    /** The element whose advanced text properties are being edited. */
+    readonly element: _angular_core.InputSignal<PptxElement>;
+    /**
+     * Emits a Partial<PptxElement> patch each time the user commits a change.
+     * The orchestrator should call EditorStateService.updateElement(slideIndex, element().id, patch).
+     */
+    readonly patch: _angular_core.OutputEmitterRef<Partial<PptxElement>>;
+    /** Whether the element supports text properties. */
+    protected readonly hasText: _angular_core.Signal<boolean>;
+    /** Derived advanced text state from the current element. */
+    protected readonly state: _angular_core.Signal<TextAdvancedState>;
+    /** Stable key for keying inputs to the current element (prevents caret-reset mid-edit). */
+    protected readonly elementKey: _angular_core.Signal<string>;
+    /** Exposed option arrays for the template. */
+    protected readonly alignOptions: [NonNullable<"center" | "left" | "right" | "justify" | "justLow" | "dist" | "thaiDist" | undefined>, string][];
+    protected readonly vAlignOptions: [NonNullable<"top" | "middle" | "bottom" | undefined>, string][];
+    protected readonly textDirectionOptions: [NonNullable<"eaVert" | "wordArtVert" | "wordArtVertRtl" | "mongolianVert" | "horizontal" | "vertical" | "vertical270" | undefined>, string][];
+    protected alignLabel(align: NonNullable<TextStyle['align']>): string;
+    protected onAlignChange(align: NonNullable<TextStyle['align']>): void;
+    protected onVAlignChange(event: Event): void;
+    protected onTextDirectionChange(event: Event): void;
+    protected onRtlToggle(event: Event): void;
+    protected onCharacterSpacingChange(event: Event): void;
+    protected onLineSpacingChange(event: Event): void;
+    protected onLineSpacingExactPtChange(event: Event): void;
+    protected onSpacingBeforeChange(event: Event): void;
+    protected onSpacingAfterChange(event: Event): void;
+    protected onIndentChange(event: Event): void;
+    protected onMarginLeftChange(event: Event): void;
+    private emit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextAdvancedPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextAdvancedPanelComponent, "pptx-text-advanced-panel", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; }, { "patch": "patch"; }, never, never, true, never>;
+}
+
+declare class TableDataEditorComponent {
+    /** The table element being edited. */
+    readonly element: _angular_core.InputSignal<TablePptxElement>;
+    /** Whether editing is enabled (read-only mode when false). */
+    readonly canEdit: _angular_core.InputSignal<boolean>;
+    /** Emits the updated element after any edit operation. */
+    readonly elementChange: _angular_core.OutputEmitterRef<TablePptxElement>;
+    protected readonly rows: _angular_core.Signal<pptx_viewer_core.PptxTableRow[]>;
+    protected readonly rowCount: _angular_core.Signal<number>;
+    protected readonly colCount: _angular_core.Signal<number>;
+    protected readonly colIndices: _angular_core.Signal<number[]>;
+    protected onCellChange(event: Event, rowIndex: number, colIndex: number): void;
+    protected onAddRow(): void;
+    protected onRemoveLastRow(): void;
+    protected onRemoveRow(rowIndex: number): void;
+    protected onAddColumn(): void;
+    protected onRemoveLastColumn(): void;
+    protected onRemoveColumn(colIndex: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableDataEditorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableDataEditorComponent, "pptx-table-data-editor", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "canEdit": { "alias": "canEdit"; "required": false; "isSignal": true; }; }, { "elementChange": "elementChange"; }, never, never, true, never>;
+}
+
+declare class ChartDataEditorComponent {
+    /** The chart element being edited. */
+    readonly element: _angular_core.InputSignal<ChartPptxElement>;
+    /** Whether editing is enabled (read-only mode when false). */
+    readonly canEdit: _angular_core.InputSignal<boolean>;
+    /** Emits the updated element after any edit operation. */
+    readonly elementChange: _angular_core.OutputEmitterRef<ChartPptxElement>;
+    protected readonly hasData: _angular_core.Signal<boolean>;
+    protected readonly series: _angular_core.Signal<pptx_viewer_core.PptxChartSeries[]>;
+    protected readonly categories: _angular_core.Signal<string[]>;
+    protected readonly seriesCount: _angular_core.Signal<number>;
+    protected readonly catCount: _angular_core.Signal<number>;
+    protected onSeriesNameChange(event: Event, seriesIndex: number): void;
+    protected onCategoryLabelChange(event: Event, catIndex: number): void;
+    protected onValueChange(event: Event, seriesIndex: number, catIndex: number): void;
+    protected onAddSeries(): void;
+    protected onRemoveLastSeries(): void;
+    protected onRemoveSeries(seriesIndex: number): void;
+    protected onAddCategory(): void;
+    protected onRemoveLastCategory(): void;
+    protected onRemoveCategory(catIndex: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartDataEditorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartDataEditorComponent, "pptx-chart-data-editor", never, { "element": { "alias": "element"; "required": true; "isSignal": true; }; "canEdit": { "alias": "canEdit"; "required": false; "isSignal": true; }; }, { "elementChange": "elementChange"; }, never, never, true, never>;
+}
+
 /**
  * SlidesPanelComponent — vertical slide-strip for the editor sidebar.
  *
@@ -2428,6 +3145,26 @@ declare class ExportService {
      * @param fileName     - Suggested download file name (unsafe chars stripped).
      */
     exportCanvasesToPdf(canvases: HTMLCanvasElement[], canvasWidth: number, canvasHeight: number, fileName: string): void;
+    /**
+     * Assemble an animated GIF from pre-rendered slide canvases (one frame per
+     * slide) and trigger a download. Frame delay is derived from
+     * `slideDurationMs` via the pure {@link planGifFrames} planner.
+     *
+     * @param canvases        - One canvas per slide, in order.
+     * @param slideDurationMs - Display time per slide in milliseconds.
+     * @param fileName        - Suggested download file name.
+     */
+    exportCanvasesToGif(canvases: HTMLCanvasElement[], slideDurationMs: number, fileName: string): void;
+    /**
+     * Record a WebM video from pre-rendered slide canvases (each held for
+     * `slideDurationMs`) via the browser `MediaRecorder` and trigger a download.
+     *
+     * @param canvases        - One canvas per slide, in order.
+     * @param slideDurationMs - Display time per slide in milliseconds.
+     * @param fileName        - Suggested download file name.
+     * @param signal          - Optional abort signal to cancel recording.
+     */
+    exportCanvasesToWebm(canvases: HTMLCanvasElement[], slideDurationMs: number, fileName: string, signal?: AbortSignal): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ExportService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ExportService>;
 }
@@ -2450,6 +3187,309 @@ declare class ExportService {
  */
 declare function renderToCanvas(element: HTMLElement, options?: Partial<Options>): Promise<HTMLCanvasElement>;
 
+/**
+ * GIF export helpers for the Angular viewer.
+ *
+ * Source: ported from packages/react/src/viewer/utils/export-gif-encoder.ts
+ * and packages/react/src/viewer/utils/export-gif.ts.
+ *
+ * Split into two concerns:
+ *   1. Pure, browser-free planning helpers (frame ordering, per-frame delay
+ *      computation, dimension clamping) — fully unit-testable.
+ *   2. A thin browser-facing `encodeGif()` function that assembles an animated
+ *      GIF89a Uint8Array from per-slide ImageData objects and a pre-computed
+ *      frame delay.  The caller (ExportService) is responsible for rasterising
+ *      slides to canvases and extracting ImageData via `ctx.getImageData()`.
+ *
+ * No external encoder dependency is required — the encoder is a self-contained
+ * pure-JS GIF89a implementation (median-cut quantisation + LZW) that mirrors
+ * the React package exactly.
+ */
+/**
+ * A single GIF frame descriptor produced by the planning helpers.
+ * The `imageData` field is filled in by the caller (ExportService) after
+ * rasterising the corresponding slide.
+ */
+interface GifFramePlan {
+    /** 0-based slide index this frame corresponds to. */
+    slideIndex: number;
+    /** Frame delay in **centiseconds** (1 cs = 10 ms), as required by GIF89a. */
+    delayCs: number;
+}
+/**
+ * Options controlling GIF frame planning.
+ */
+interface GifPlanOptions {
+    /** Total number of slides in the presentation. */
+    totalSlides: number;
+    /**
+     * Duration each slide is shown, in **milliseconds** (default: 2000).
+     * Per-slide overrides can be supplied via {@link slideTimingsMs}.
+     */
+    slideDurationMs?: number;
+    /**
+     * Per-slide duration overrides in milliseconds (index maps to slide index).
+     * When a slide's index is present here its value takes precedence over
+     * {@link slideDurationMs}.
+     */
+    slideTimingsMs?: number[];
+}
+/**
+ * Compute the ordered list of {@link GifFramePlan} objects for a presentation.
+ *
+ * All timing is derived here; nothing browser-specific is touched.
+ *
+ * @param opts - Planning options.
+ * @returns One {@link GifFramePlan} per slide, in slide order (0-based).
+ *
+ * @example
+ * const plans = planGifFrames({ totalSlides: 5, slideDurationMs: 3000 });
+ * // plans[0].slideIndex === 0, plans[0].delayCs === 300, …
+ */
+declare function planGifFrames(opts: GifPlanOptions): GifFramePlan[];
+/**
+ * Convert a slide duration in milliseconds to a GIF89a frame delay in
+ * centiseconds (1 cs = 10 ms), clamped to a minimum of 1 cs.
+ *
+ * @param ms - Duration in milliseconds (must be > 0).
+ * @returns Frame delay in centiseconds (integer ≥ 1).
+ */
+declare function msToFrameDelayCs(ms: number): number;
+/**
+ * Clamp canvas/image dimensions so neither side exceeds `maxSide` pixels
+ * while preserving the aspect ratio.  When both dimensions are already within
+ * the limit the original values are returned unchanged.
+ *
+ * GIF is limited to 65535 × 65535 but practical encoders perform best at
+ * much smaller sizes (the React package defaults to 0.5× scale).  This
+ * helper lets callers enforce a reasonable cap without coupling the logic to
+ * a specific scale factor.
+ *
+ * @param width   - Original width in pixels.
+ * @param height  - Original height in pixels.
+ * @param maxSide - Maximum permitted dimension on either axis (default 1920).
+ * @returns `{ width, height }` clamped to `maxSide`, floored to whole pixels.
+ */
+declare function clampGifDimensions(width: number, height: number, maxSide?: number): {
+    width: number;
+    height: number;
+};
+/**
+ * A single animated GIF frame: raw RGBA pixel data plus its dimensions.
+ */
+interface GifFrame {
+    imageData: ImageData;
+    width: number;
+    height: number;
+}
+/**
+ * Options for {@link encodeGif}.
+ */
+interface EncodeGifOptions {
+    /**
+     * Frame delay in **centiseconds** (1 cs = 10 ms).  All frames share the
+     * same delay; for per-frame delays compute them with {@link planGifFrames}
+     * and encode each frame separately.
+     *
+     * Default: 200 cs (2 s).
+     */
+    delayCs?: number;
+    /**
+     * Number of times the animation loops (0 = loop forever, default).
+     */
+    loopCount?: number;
+}
+/**
+ * Encode an ordered list of RGBA image frames into an animated GIF89a byte
+ * sequence.
+ *
+ * Uses median-cut colour quantisation (256 colours per frame) and LZW
+ * compression.  All frames must have identical dimensions.
+ *
+ * This function is browser-safe but does NOT require any browser API — it
+ * operates on pre-extracted `ImageData` objects.  Callers must rasterise
+ * slides to canvases themselves (see `ExportService.renderElement`).
+ *
+ * @param frames  - Ordered array of frame descriptors.
+ * @param opts    - Encoding options.
+ * @returns Raw GIF89a bytes.
+ *
+ * @example
+ * // In ExportService:
+ * const canvas = await this.renderElement(el, 0.5);
+ * const ctx    = canvas.getContext('2d')!;
+ * const id     = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ * const bytes  = encodeGif([{ imageData: id, width: canvas.width, height: canvas.height }]);
+ * const blob   = new Blob([bytes.buffer], { type: 'image/gif' });
+ */
+declare function encodeGif(frames: GifFrame[], opts?: EncodeGifOptions): Uint8Array;
+
+/**
+ * Video (WebM) export helpers for the Angular viewer.
+ *
+ * Source: ported from packages/react/src/viewer/utils/export-video.ts.
+ *
+ * Split into two concerns:
+ *   1. Pure, browser-free planning helpers (frame-segment timing, MIME-type
+ *      selection) — fully unit-testable with no DOM/MediaRecorder dependency.
+ *   2. A thin browser-facing `recordWebm()` function that drives a
+ *      `MediaRecorder` over a canvas `captureStream()` to produce a WebM Blob.
+ *      The caller (ExportService) supplies the pre-rendered slide canvases and
+ *      a `recordingCanvas` for compositing.
+ *
+ * No new npm dependency is needed — `MediaRecorder` is a browser built-in.
+ */
+/**
+ * Timing plan for one slide's contribution to the video.
+ */
+interface VideoSegmentPlan {
+    /** 0-based slide index. */
+    slideIndex: number;
+    /** Duration this segment should be held, in milliseconds. */
+    durationMs: number;
+    /** Target frame rate used to compute the segment frame count. */
+    fps: number;
+    /** Total number of draw-loop iterations for this segment at `fps`. */
+    frameCount: number;
+}
+/**
+ * Options for {@link planVideoSegments}.
+ */
+interface VideoPlanOptions {
+    /** Total number of slides. */
+    totalSlides: number;
+    /**
+     * Default slide display duration in **milliseconds** (default: 3000).
+     * Overridden per-slide by {@link slideTimingsMs}.
+     */
+    slideDurationMs?: number;
+    /**
+     * Per-slide duration overrides in milliseconds (index maps to slide index).
+     * `undefined` entries fall back to {@link slideDurationMs}.
+     */
+    slideTimingsMs?: number[];
+    /**
+     * Desired recording frame rate in frames-per-second (default: 30).
+     * Used to compute the number of draw iterations per segment.
+     */
+    fps?: number;
+}
+/**
+ * Compute an ordered list of {@link VideoSegmentPlan} objects for a
+ * presentation video.  Nothing browser-specific is touched.
+ *
+ * @param opts - Planning options.
+ * @returns One {@link VideoSegmentPlan} per slide, in slide order (0-based).
+ *
+ * @example
+ * const segs = planVideoSegments({ totalSlides: 3, slideDurationMs: 2000, fps: 30 });
+ * // segs[0].durationMs === 2000, segs[0].frameCount === 60
+ */
+declare function planVideoSegments(opts: VideoPlanOptions): VideoSegmentPlan[];
+/**
+ * Select the first MIME type from `candidates` that `MediaRecorder.isTypeSupported`
+ * accepts, falling back to the last candidate in the list when none is supported.
+ *
+ * This is a pure browser-API wrapper (no DOM, no canvas) that can be
+ * spied/mocked in unit tests.
+ *
+ * Priority order recommended for WebM:
+ * ```
+ * ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm']
+ * ```
+ *
+ * @param candidates - Ordered list of MIME type strings to test (most preferred first).
+ * @returns The first supported MIME type, or the last candidate as the fallback.
+ * @throws When `candidates` is empty.
+ */
+declare function pickSupportedMimeType(candidates: string[]): string;
+/**
+ * Compute the frame interval in milliseconds for a target frame rate.
+ *
+ * @param fps - Desired frames per second (must be > 0).
+ * @returns Frame interval in milliseconds.
+ */
+declare function fpsToFrameIntervalMs(fps: number): number;
+/**
+ * Compute the number of draw-loop frames needed to fill a segment of `durationMs`
+ * at `fps`.  Always at least 1.
+ *
+ * @param durationMs - Segment duration in milliseconds.
+ * @param fps        - Frame rate in frames per second.
+ * @returns Number of frames (integer ≥ 1).
+ */
+declare function segmentFrameCount(durationMs: number, fps: number): number;
+/**
+ * Default ordered MIME-type candidates for WebM recording, most preferred first.
+ * Pass to {@link pickSupportedMimeType} or directly to `recordWebm`.
+ */
+declare const WEBM_MIME_CANDIDATES: readonly string[];
+/**
+ * Options for {@link recordWebm}.
+ */
+interface RecordWebmOptions {
+    /**
+     * Desired recording frame rate fed to `captureStream()` (default: 30).
+     */
+    fps?: number;
+    /**
+     * Per-slide durations in milliseconds (index maps to slide order in `canvases`).
+     * When absent, `slideDurationMs` is used for every slide.
+     */
+    slideTimingsMs?: number[];
+    /**
+     * Default slide duration in milliseconds (default: 3000).
+     */
+    slideDurationMs?: number;
+    /**
+     * MIME type for `MediaRecorder` (default: result of
+     * `pickSupportedMimeType(WEBM_MIME_CANDIDATES)`).
+     */
+    mimeType?: string;
+    /**
+     * Video bit rate in bits/s (default: 5_000_000 = 5 Mbps, matching the
+     * React package).
+     */
+    videoBitsPerSecond?: number;
+    /**
+     * Optional `AbortSignal` to cancel the recording mid-way.
+     */
+    signal?: AbortSignal;
+    /**
+     * Progress callback invoked at the start of each slide's recording segment.
+     * Receives `(currentSlide, totalSlides)`.
+     */
+    onProgress?: (current: number, total: number) => void;
+}
+/**
+ * Record an ordered list of pre-rendered slide canvases as a WebM video Blob.
+ *
+ * Strategy (mirrors the React `exportAllSlidesAsVideo`):
+ * 1. Create an off-screen `recordingCanvas` sized to the first slide canvas.
+ * 2. Start a `captureStream(fps)` + `MediaRecorder` on it.
+ * 3. For each slide canvas, draw it repeatedly onto `recordingCanvas` for the
+ *    slide's duration at `fps`, feeding frames to the stream.
+ * 4. Stop the recorder and return the accumulated WebM Blob.
+ *
+ * The caller is responsible for rasterising slides to canvases beforehand
+ * (via `ExportService.renderElement`).  This keeps the heavy html2canvas-pro
+ * work outside this function and makes progress reporting easy.
+ *
+ * @param canvases - Pre-rendered slide canvases in slide order.
+ * @param opts     - Recording options.
+ * @returns A `Promise<Blob>` resolving to a `video/webm` Blob.
+ *
+ * @throws `DOMException('Export cancelled', 'AbortError')` when `signal` fires.
+ * @throws `Error` when no canvases are supplied or when 2D context creation fails.
+ *
+ * @example
+ * // In ExportService:
+ * const canvases = await Promise.all(slides.map(el => this.renderElement(el)));
+ * const blob     = await recordWebm(canvases, { slideDurationMs: 3000 });
+ * downloadBlob(blob, 'presentation.webm');
+ */
+declare function recordWebm(canvases: HTMLCanvasElement[], opts?: RecordWebmOptions): Promise<Blob>;
+
 /**
  * editor-history.ts — Generic undo/redo history stack.
  *
@@ -3536,55 +4576,6 @@ declare class HyperlinkDialogComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<HyperlinkDialogComponent, "pptx-hyperlink-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "element": { "alias": "element"; "required": false; "isSignal": true; }; }, { "save": "save"; "close": "close"; }, never, never, true, never>;
 }
 
-/**
- * broadcast-helpers.ts — Pure (no Angular) helpers for the Broadcast dialog.
- *
- * A broadcast is a one-way collaboration session: the presenter drives slide
- * navigation and viewers follow along via a shareable link. These helpers
- * cover the testable, framework-agnostic parts of the Vue `BroadcastDialog.vue`
- * and React `BroadcastDialog.tsx`: room-id generation, form validation, and
- * the viewer-link builder.
- *
- * No `any`; all regexes use the `/u` flag; no `String.prototype.replaceAll`,
- * no regex named-capture-groups (ng-packagr lib-target constraints).
- */
-/** Default y-websocket server URL used when no default is supplied. */
-declare const DEFAULT_BROADCAST_SERVER_URL = "ws://localhost:1234";
-/** Optional seed values for the broadcast start form. */
-interface BroadcastDefaults {
-    roomId?: string;
-    serverUrl?: string;
-}
-/** The configuration emitted when a broadcast starts. */
-interface BroadcastConfig {
-    roomId: string;
-    serverUrl: string;
-}
-/** Generate a fresh, broadcast-scoped room id (`broadcast-<suffix>`). */
-declare function generateBroadcastRoomId(): string;
-/**
- * Seed the start form from the (optional) defaults, generating a fresh room id
- * when none is supplied and falling back to the default server URL.
- */
-declare function seedBroadcastFields(defaults?: BroadcastDefaults): BroadcastConfig;
-/** Whether both required fields are non-blank (after trimming). */
-declare function canStartBroadcast(fields: BroadcastConfig): boolean;
-/**
- * Assemble a {@link BroadcastConfig} from the (trimmed) form fields, or `null`
- * when incomplete.
- */
-declare function buildBroadcastConfig(fields: BroadcastConfig): BroadcastConfig | null;
-/**
- * Build the shareable viewer follow-link for a broadcast. Returns just the
- * room id when no `origin`/`pathname` are available (non-browser environments).
- */
-declare function buildBroadcastViewerUrl(roomId: string, serverUrl: string, location?: {
-    origin: string;
-    pathname: string;
-}): string;
-/** Whether the runtime exposes a usable async clipboard write API. */
-declare function canUseClipboard(nav: Navigator | undefined): boolean;
-
 declare class BroadcastDialogComponent {
     /** Whether the dialog is visible. */
     readonly open: _angular_core.InputSignal<boolean>;
@@ -4187,5 +5178,5 @@ declare function themeStyle(theme: ViewerTheme | undefined): Record<string, stri
 type ClassValue = string | number | false | null | undefined;
 declare function cn(...values: ClassValue[]): string;
 
-export { AccessibilityPanelComponent, AccessibilityService, AnimationPanelComponent, AnimationPlaybackService, BroadcastDialogComponent, CURSOR_PALETTE, ChartRendererComponent, CollaborationCursorsComponent, CollaborationService, CommentsPanelComponent, CommentsService, ConnectorRendererComponent, ConnectorTextOverlayComponent, DEFAULT_BROADCAST_SERVER_URL, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_PRINT_SETTINGS, DEFAULT_SLIDE_BACKGROUND, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR, EMBEDDED_FONTS_STYLE_ID, EditorContextMenuComponent, EditorHistory, EditorStateService, EditorToolbarComponent, ElementRendererComponent, EmbeddedFontsService, EquationRendererComponent, ExportService, FindBarComponent, HANDOUT_OPTIONS, HyperlinkDialogComponent, InkRendererComponent, InspectorPanelComponent, LoadContentService, ModalDialogComponent, Model3DRendererComponent, OleRendererComponent, PowerPointViewerComponent, PresentationOverlayComponent, PresentationTransitionOverlayComponent, PresenterViewComponent, PrintDialogComponent, PrintService, PrintSettingsPanelComponent, PropertiesDialogComponent, RESIZE_HANDLES, SEVERITY_GROUPS, SEVERITY_LABELS, SLIDE_TRANSITION_KEYFRAMES, ShareDialogComponent, SignaturesPanelComponent, SignaturesService, SlideCanvasComponent, SlideSorterOverlayComponent, SlidesPanelComponent, SmartArtRendererComponent, TYPE_LABELS, TableRendererComponent, VIEWER_THEME, ZoomRendererComponent, addCommentToList, advanceStep, applyMove, applyResize, assignUserColor, bringForward, bringToFront, buildBroadcastConfig, buildBroadcastViewerUrl, buildClearHyperlinkPatch, buildClickGroups, buildCollaborationConfig, buildCssGradientFromShapeStyle, buildEmbeddedFontStyles, buildFontFaceRule, buildHyperlinkPatch, buildPatternFillCss, buildPrintDocument, buildPropertiesPatch, buildShareUrl, bulletIndentPx, canStartBroadcast, canStartShare, canUseClipboard, clampCursorPosition, clampNotesFontSize, clampStep, cn, collectAccessibilityIssues, collectElementText, collectSlideText, computeHandoutLayout, computePageCount, computeSlideIndices, computeTimerProgress, convertOmmlToMathMl, countAccessibilityIssues, defaultCssVars, defaultRadius, defaultThemeColors, deleteElementsByIds, derivePresenceList, duplicateElementById, durationOf, estimatePageCount, fontMimeForFormat, formatAutoNumber, formatCursorLabel, formatElapsed, formatPropertyDate, formatTime, generateBroadcastRoomId, generateCommentId, getContainerStyle, getImageSrc, getPatternSvg, getResolvedShapeClipPath, getResolvedShapeClipPathFor, getShapeFillStrokeStyle, getSlideBackgroundStyle, getSlideTransitionAnimations, getTextBlockStyle, groupIssuesBySeverity, hasExistingLink, headerLabel, isInjectableUrl, isPpactionUrl, isSigned, isUrlSafe, isValidRoomId, issueTrackKey, issueTypeLabel, moveElementBy, normalizeFontFormat, normalizeSlidesPerPage, ommlToMathml, overallStatus, pendingElementStyles, presenceToCursors, provideViewerTheme, removeCommentFromList, renderToCanvas, resizeElement, resolveFontVariant, resolveHyperlinkHref, resolveParagraphBullet, resolvePresenterNotes, resolveTransitionDuration, revealedElementStyles, routeOrthogonalConnector, sanitizeColor, sanitizeSlideIndex, sanitizeUserName, searchSlides, seedBroadcastFields, seedHyperlinkDraft, seedPropertiesDraft, seedShareFields, sendBackward, sendToBack, setElementPosition, signatureCountLabel, signatureKey, signatureTimestamp, signerName, statusKind, statusLabel, themeStyle, themeToCssVars, toggleCommentResolvedInList, updateElementById, validatePrintSettings, validateRoomId, waypointsToPathD, worstStatus };
-export type { AccessibilityIssueGroup, AnimationClickGroup, Box, BroadcastConfig, BroadcastDefaults, CSSProperties, CanvasSize, ClassValue, CollaborationConfig, CollaborationRole, Rect as ConnectorObstacle, Point as ConnectorPoint, ConnectorRouting, DocumentProperties, EmbeddedFontStyles, HandoutSlidesPerPage, HyperlinkDraft, NotesSegmentViewModel, ObjectUrlFactory, OverallSignatureStatus, PresenterNotes, PrintColorMode, PrintDocumentOptions, PrintOrientation, PrintSettings, PrintSlideRange, PrintWhat, PropertiesDraft, RemoteCursor, RemotePresence, ResizeHandle, ResolvedFontVariant, ShareDefaults, ShareFormFields, SignatureStatusKind, SlideTransitionAnimations, StyleMap, TimerProgress, ViewerTheme, ViewerThemeColors };
+export { AccessibilityPanelComponent, AccessibilityService, AnimationPanelComponent, AnimationPlaybackService, BroadcastDialogComponent, CURSOR_PALETTE, ChartDataEditorComponent, ChartRendererComponent, CollaborationCursorsComponent, CollaborationService, CommentsPanelComponent, CommentsService, ConnectorRendererComponent, ConnectorTextOverlayComponent, DEFAULT_BROADCAST_SERVER_URL, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_PRINT_SETTINGS, DEFAULT_SLIDE_BACKGROUND, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR, EMBEDDED_FONTS_STYLE_ID, EditorContextMenuComponent, EditorHistory, EditorStateService, EditorToolbarComponent, EffectsPanelComponent, ElementRendererComponent, EmbeddedFontsService, EquationRendererComponent, ExportService, FindBarComponent, FindReplaceBarComponent, GradientPickerComponent, HANDOUT_OPTIONS, HyperlinkDialogComponent, InkRendererComponent, InspectorPanelComponent, LoadContentService, ModalDialogComponent, Model3DRendererComponent, OleRendererComponent, PowerPointViewerComponent, PresentationOverlayComponent, PresentationTransitionOverlayComponent, PresenterViewComponent, PrintDialogComponent, PrintService, PrintSettingsPanelComponent, PropertiesDialogComponent, RESIZE_HANDLES, SEVERITY_GROUPS, SEVERITY_LABELS, SLIDE_TRANSITION_KEYFRAMES, ShareDialogComponent, SignaturesPanelComponent, SignaturesService, SlideCanvasComponent, SlideSorterOverlayComponent, SlidesPanelComponent, SmartArtRendererComponent, TYPE_LABELS, TableDataEditorComponent, TableRendererComponent, TextAdvancedPanelComponent, VIEWER_THEME, WEBM_MIME_CANDIDATES, ZoomRendererComponent, addCommentToList, advanceStep, applyFindReplacements, applyMove, applyResize, assignUserColor, bringForward, bringToFront, buildBroadcastConfig, buildBroadcastViewerUrl, buildClearHyperlinkPatch, buildClickGroups, buildCollaborationConfig, buildCssGradientFromShapeStyle, buildDuotoneFilter, buildDuotoneFilterId, buildEmbeddedFontStyles, buildFontFaceRule, buildHyperlinkPatch, buildPatternFillCss, buildPrintDocument, buildPropertiesPatch, buildShareUrl, bulletIndentPx, canStartBroadcast, canStartShare, canUseClipboard, clampCursorPosition, clampGifDimensions, clampNotesFontSize, clampStep, cn, collectAccessibilityIssues, collectElementText, collectSlideText, computeHandoutLayout, computePageCount, computeSlideIndices, computeTimerProgress, convertOmmlToMathMl, countAccessibilityIssues, defaultCssVars, defaultRadius, defaultThemeColors, deleteElementsByIds, derivePresenceList, duplicateElementById, durationOf, encodeGif, estimatePageCount, findInSlides, fontMimeForFormat, formatAutoNumber, formatCursorLabel, formatElapsed, formatPropertyDate, formatTime, fpsToFrameIntervalMs, generateBroadcastRoomId, generateCommentId, getContainerStyle, getDuotoneFilterDef, getImageSrc, getPatternSvg, getResolvedShapeClipPath, getResolvedShapeClipPathFor, getShapeFillStrokeStyle, getSlideBackgroundStyle, getSlideTransitionAnimations, getTextBlockStyle, groupIssuesBySeverity, hasExistingLink, headerLabel, isInjectableUrl, isPpactionUrl, isSigned, isUrlSafe, isValidRoomId, issueTrackKey, issueTypeLabel, moveElementBy, msToFrameDelayCs, normalizeFontFormat, normalizeSlidesPerPage, ommlToMathml, overallStatus, pendingElementStyles, pickSupportedMimeType, planGifFrames, planVideoSegments, presenceToCursors, provideViewerTheme, recordWebm, removeCommentFromList, renderToCanvas, replaceInSlides, replaceMatch, resizeElement, resolveFontVariant, resolveHyperlinkHref, resolveParagraphBullet, resolvePresenterNotes, resolveTransitionDuration, revealedElementStyles, routeOrthogonalConnector, sanitizeColor, sanitizeSlideIndex, sanitizeUserName, searchSlides, seedBroadcastFields, seedHyperlinkDraft, seedPropertiesDraft, seedShareFields, segmentFrameCount, sendBackward, sendToBack, setElementPosition, signatureCountLabel, signatureKey, signatureTimestamp, signerName, statusKind, statusLabel, themeStyle, themeToCssVars, toggleCommentResolvedInList, updateElementById, validatePrintSettings, validateRoomId, waypointsToPathD, worstStatus };
+export type { AccessibilityIssueGroup, AnimationClickGroup, Box, BroadcastConfig, BroadcastDefaults, CSSProperties, CanvasSize, ClassValue, CollaborationConfig, CollaborationRole, Rect as ConnectorObstacle, Point as ConnectorPoint, ConnectorRouting, DocumentProperties, DuotoneFilterDef, EmbeddedFontStyles, FindOptions, FindResult, GifFrame, GifFramePlan, GifPlanOptions, HandoutSlidesPerPage, HyperlinkDraft, NotesSegmentViewModel, ObjectUrlFactory, OverallSignatureStatus, PresenterNotes, PrintColorMode, PrintDocumentOptions, PrintOrientation, PrintSettings, PrintSlideRange, PrintWhat, PropertiesDraft, RecordWebmOptions, RemoteCursor, RemotePresence, ReplaceResult, ResizeHandle, ResolvedFontVariant, ShareDefaults, ShareFormFields, SignatureStatusKind, SlideTransitionAnimations, StyleMap, TimerProgress, VideoPlanOptions, VideoSegmentPlan, ViewerTheme, ViewerThemeColors };