@file-viewer/pptx 2.2.8 → 2.3.0

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { PptxViewer } from './viewer';
+export { PptxPresentation } from './presentation';
+export type { PptxPresentationLabels, PptxPresentationState } from './presentation';
 export { createPptxWorker } from './worker';
 export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from './options';
 export type { NativePptxEngineOptions, PptxDiagnosticError, PptxDiagnosticErrorCode, PptxFitMode, PptxListOptions, PptxSlideSize, PptxViewerOptions, PptxWorkerFactoryOptions, PptxWorkerMessage, PptxZipLimits, } from './types';

package/dist/index.js

@@ -1,3 +1,4 @@
 export { PptxViewer } from './viewer.js';
+export { PptxPresentation } from './presentation.js';
 export { createPptxWorker } from './worker.js';
 export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from './options.js';

package/dist/presentation.d.ts

@@ -0,0 +1,66 @@
+import type { PptxViewer } from './viewer';
+export interface PptxPresentationState {
+    active: boolean;
+    slideNumber: number;
+    total: number;
+}
+export interface PptxPresentationLabels {
+    exit?: string;
+    hint?: string;
+    next?: string;
+    previous?: string;
+}
+/**
+ * Full-screen slideshow for a rendered PPTX deck.
+ *
+ * The slides stay where the viewer put them: the whole scale box is moved into an overlay and the
+ * inactive slots are hidden with CSS, so the engine's scoped `.flyfish-pptx-content .slide` rules
+ * keep applying and no node is cloned. A placeholder marks the original position so exiting puts
+ * everything back exactly where it was.
+ */
+export declare class PptxPresentation {
+    private readonly viewer;
+    private readonly labels;
+    private readonly fullscreen;
+    private overlay;
+    private stage;
+    private counter;
+    private placeholder;
+    private listeners;
+    private layoutFrame;
+    private ownsFullscreen;
+    private current;
+    constructor(viewer: PptxViewer, labels?: PptxPresentationLabels, fullscreen?: boolean);
+    get active(): boolean;
+    get slideNumber(): number;
+    get state(): PptxPresentationState;
+    enter(slideNumber?: number): Promise<void>;
+    exit(): void;
+    toggle(slideNumber?: number): Promise<void>;
+    goTo(slideNumber: number): void;
+    next(): void;
+    previous(): void;
+    /** Scale the active slide to fit the overlay, letterboxing whichever axis has slack. */
+    layout(): void;
+    destroy(): void;
+    private slots;
+    /**
+     * The nodes the slideshow toggles between. Windowed decks wrap each slide in a
+     * slot; the default (non-windowed) deck appends slides directly to the content
+     * node, so those are the containers there.
+     */
+    private slideContainers;
+    /**
+     * Chromium reports the fullscreen element of a shadow root on the shadow root
+     * itself while document.fullscreenElement stays on the host, so both have to
+     * be checked before deciding who owns fullscreen.
+     */
+    private isFullscreenElement;
+    private scheduleLayout;
+    private notify;
+    private on;
+    private attach;
+    private detach;
+    private handleClick;
+    private handleKey;
+}

package/dist/presentation.js

@@ -0,0 +1,360 @@
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+ * Full-screen slideshow for a rendered PPTX deck.
+ *
+ * The slides stay where the viewer put them: the whole scale box is moved into an overlay and the
+ * inactive slots are hidden with CSS, so the engine's scoped `.flyfish-pptx-content .slide` rules
+ * keep applying and no node is cloned. A placeholder marks the original position so exiting puts
+ * everything back exactly where it was.
+ */
+export class PptxPresentation {
+    constructor(viewer, labels = {}, fullscreen = true) {
+        this.overlay = null;
+        this.stage = null;
+        this.counter = null;
+        this.placeholder = null;
+        this.listeners = [];
+        this.layoutFrame = 0;
+        this.ownsFullscreen = false;
+        this.current = 1;
+        this.viewer = viewer;
+        this.labels = labels;
+        this.fullscreen = fullscreen;
+    }
+    get active() {
+        return Boolean(this.overlay);
+    }
+    get slideNumber() {
+        return this.current;
+    }
+    get state() {
+        return { active: this.active, slideNumber: this.current, total: this.viewer.slideCount };
+    }
+    async enter(slideNumber = this.current) {
+        var _a, _b;
+        if (this.active || this.viewer.slideCount === 0) {
+            return;
+        }
+        const documentRef = this.viewer.target.ownerDocument || document;
+        const overlay = documentRef.createElement('div');
+        overlay.className = 'flyfish-pptx-presentation';
+        overlay.tabIndex = -1;
+        overlay.setAttribute('role', 'region');
+        overlay.setAttribute('aria-label', this.labels.hint || 'Slideshow');
+        const stage = documentRef.createElement('div');
+        stage.className = 'flyfish-pptx-presentation-stage';
+        const counter = documentRef.createElement('div');
+        counter.className = 'flyfish-pptx-presentation-counter';
+        const hint = documentRef.createElement('div');
+        hint.className = 'flyfish-pptx-presentation-hint';
+        hint.textContent = this.labels.hint || '';
+        hint.hidden = !this.labels.hint;
+        const exit = documentRef.createElement('button');
+        exit.type = 'button';
+        exit.className = 'flyfish-pptx-presentation-exit';
+        exit.textContent = '✕';
+        exit.setAttribute('aria-label', this.labels.exit || 'Exit slideshow');
+        exit.addEventListener('click', event => {
+            event.stopPropagation();
+            this.exit();
+        });
+        overlay.append(stage, counter, hint, exit);
+        this.overlay = overlay;
+        this.stage = stage;
+        this.counter = counter;
+        // Keep the overlay inside whichever root holds the slide styles, or the engine's scoped CSS
+        // would not reach the slides once they move.
+        const styleRoot = this.viewer.presentationRoot;
+        styleRoot.appendChild(overlay);
+        // Park a comment where the scale box lived so exit() can restore the exact position.
+        this.placeholder = documentRef.createComment('flyfish-pptx-presentation');
+        this.viewer.saveScrollPosition();
+        this.viewer.scaleBox.replaceWith(this.placeholder);
+        stage.appendChild(this.viewer.scaleBox);
+        this.viewer.content.classList.add('is-presenting');
+        this.attach(documentRef, overlay);
+        this.goTo(slideNumber);
+        if (this.fullscreen) {
+            try {
+                await ((_a = overlay.requestFullscreen) === null || _a === void 0 ? void 0 : _a.call(overlay));
+                this.ownsFullscreen = this.isFullscreenElement(overlay);
+            }
+            catch {
+                // Fullscreen needs a user gesture and can be blocked by permissions policy. The overlay is
+                // position:fixed, so the slideshow still fills the viewport without it.
+                this.ownsFullscreen = false;
+            }
+        }
+        // exit() may have run while fullscreen was being requested. Leave the
+        // browser out of fullscreen rather than stranded with no overlay.
+        if (this.overlay !== overlay) {
+            if (this.ownsFullscreen) {
+                void ((_b = documentRef.exitFullscreen) === null || _b === void 0 ? void 0 : _b.call(documentRef).catch(() => undefined));
+            }
+            this.ownsFullscreen = false;
+            return;
+        }
+        overlay.focus({ preventScroll: true });
+        this.scheduleLayout();
+        this.notify();
+    }
+    exit() {
+        var _a, _b;
+        const overlay = this.overlay;
+        if (!overlay) {
+            return;
+        }
+        const documentRef = this.viewer.target.ownerDocument || document;
+        // Capture before the overlay leaves the DOM: a detached node's getRootNode()
+        // is the document, so the fullscreen check would fail after removal.
+        const shouldExitFullscreen = this.ownsFullscreen && this.isFullscreenElement(overlay);
+        this.detach();
+        if (this.layoutFrame) {
+            (documentRef.defaultView || window).cancelAnimationFrame(this.layoutFrame);
+            this.layoutFrame = 0;
+        }
+        this.viewer.content.classList.remove('is-presenting');
+        for (const container of this.slideContainers()) {
+            container.classList.remove('is-active-slide');
+        }
+        if ((_a = this.placeholder) === null || _a === void 0 ? void 0 : _a.parentNode) {
+            this.placeholder.replaceWith(this.viewer.scaleBox);
+        }
+        else {
+            this.viewer.target.appendChild(this.viewer.scaleBox);
+        }
+        this.placeholder = null;
+        overlay.remove();
+        this.overlay = null;
+        this.stage = null;
+        this.counter = null;
+        if (shouldExitFullscreen) {
+            void ((_b = documentRef.exitFullscreen) === null || _b === void 0 ? void 0 : _b.call(documentRef).catch(() => undefined));
+        }
+        this.ownsFullscreen = false;
+        this.viewer.restoreScrollPosition();
+        this.notify();
+    }
+    async toggle(slideNumber) {
+        if (this.active) {
+            this.exit();
+            return;
+        }
+        await this.enter(slideNumber);
+    }
+    goTo(slideNumber) {
+        const total = this.viewer.slideCount;
+        if (total === 0) {
+            return;
+        }
+        this.current = clamp(Math.round(slideNumber) || 1, 1, total);
+        this.viewer.ensureSlideRendered(this.current);
+        // Rendering the neighbour keeps the next step instant without defeating virtualization.
+        this.viewer.ensureSlideRendered(this.current + 1);
+        const containers = this.slideContainers();
+        // Windowed decks tag each slot with its slide number; non-windowed decks
+        // append slides in order, so the active one is found by index.
+        const byNumber = containers.some(container => Boolean(container.dataset.slideNumber));
+        containers.forEach((container, index) => {
+            const isActive = byNumber
+                ? Number(container.dataset.slideNumber) === this.current
+                : index === this.current - 1;
+            container.classList.toggle('is-active-slide', isActive);
+        });
+        if (this.counter) {
+            this.counter.textContent = `${this.current} / ${total}`;
+        }
+        if (this.active) {
+            this.scheduleLayout();
+            this.notify();
+        }
+    }
+    next() {
+        if (this.current < this.viewer.slideCount) {
+            this.goTo(this.current + 1);
+        }
+    }
+    previous() {
+        if (this.current > 1) {
+            this.goTo(this.current - 1);
+        }
+    }
+    /** Scale the active slide to fit the overlay, letterboxing whichever axis has slack. */
+    layout() {
+        const overlay = this.overlay;
+        if (!overlay) {
+            return;
+        }
+        const container = this.slideContainers().find((item, index) => {
+            if (item.dataset.slideNumber) {
+                return Number(item.dataset.slideNumber) === this.current;
+            }
+            return index === this.current - 1;
+        });
+        // Windowed decks wrap the slide in a slot; non-windowed decks are the slide.
+        const slide = container && container.classList.contains('flyfish-pptx-slide-slot')
+            ? container.firstElementChild
+            : container;
+        const size = this.viewer.slideDimensions;
+        const slideWidth = (slide === null || slide === void 0 ? void 0 : slide.offsetWidth) || (size === null || size === void 0 ? void 0 : size.width) || 0;
+        const slideHeight = (slide === null || slide === void 0 ? void 0 : slide.offsetHeight) || (size === null || size === void 0 ? void 0 : size.height) || 0;
+        if (!slideWidth || !slideHeight) {
+            return;
+        }
+        const viewWidth = overlay.clientWidth;
+        const viewHeight = overlay.clientHeight;
+        const scale = Math.min(viewWidth / slideWidth, viewHeight / slideHeight);
+        const offsetX = Math.max(0, (viewWidth - slideWidth * scale) / 2);
+        const offsetY = Math.max(0, (viewHeight - slideHeight * scale) / 2);
+        const content = this.viewer.content;
+        content.style.width = `${slideWidth}px`;
+        content.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+        const scaleBox = this.viewer.scaleBox;
+        scaleBox.style.width = '100%';
+        scaleBox.style.height = '100%';
+        scaleBox.style.minHeight = '';
+    }
+    destroy() {
+        this.exit();
+    }
+    slots() {
+        return Array.from(this.viewer.content.querySelectorAll(':scope > .flyfish-pptx-slide-slot'));
+    }
+    /**
+     * The nodes the slideshow toggles between. Windowed decks wrap each slide in a
+     * slot; the default (non-windowed) deck appends slides directly to the content
+     * node, so those are the containers there.
+     */
+    slideContainers() {
+        const slots = this.slots();
+        if (slots.length > 0) {
+            return slots;
+        }
+        return Array.from(this.viewer.content.querySelectorAll(':scope > .slide'));
+    }
+    /**
+     * Chromium reports the fullscreen element of a shadow root on the shadow root
+     * itself while document.fullscreenElement stays on the host, so both have to
+     * be checked before deciding who owns fullscreen.
+     */
+    isFullscreenElement(overlay) {
+        const documentRef = this.viewer.target.ownerDocument || document;
+        if (documentRef.fullscreenElement === overlay) {
+            return true;
+        }
+        const root = overlay.getRootNode();
+        if (root !== documentRef && 'fullscreenElement' in root) {
+            return root.fullscreenElement === overlay;
+        }
+        return false;
+    }
+    scheduleLayout() {
+        const view = this.viewer.target.ownerDocument.defaultView || window;
+        if (this.layoutFrame) {
+            view.cancelAnimationFrame(this.layoutFrame);
+        }
+        this.layoutFrame = view.requestAnimationFrame(() => {
+            this.layoutFrame = 0;
+            this.layout();
+        });
+    }
+    notify() {
+        this.viewer.emitPresentationChange(this.state);
+    }
+    on(target, type, listener) {
+        target.addEventListener(type, listener);
+        this.listeners.push({ target, type, listener });
+    }
+    attach(documentRef, overlay) {
+        const view = documentRef.defaultView || window;
+        this.on(documentRef, 'keydown', (event) => this.handleKey(event));
+        this.on(overlay, 'click', (event) => this.handleClick(event));
+        this.on(overlay, 'contextmenu', (event) => {
+            event.preventDefault();
+            this.previous();
+        });
+        this.on(view, 'resize', () => this.scheduleLayout());
+        this.on(documentRef, 'fullscreenchange', () => {
+            // Leaving fullscreen with the browser's own Esc must close the slideshow too, otherwise the
+            // overlay would stay up as a plain fixed layer.
+            if (this.ownsFullscreen && !this.isFullscreenElement(overlay)) {
+                this.ownsFullscreen = false;
+                this.exit();
+            }
+        });
+    }
+    detach() {
+        for (const { target, type, listener } of this.listeners) {
+            target.removeEventListener(type, listener);
+        }
+        this.listeners = [];
+    }
+    handleClick(event) {
+        var _a;
+        const overlay = this.overlay;
+        if (!overlay || ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('.flyfish-pptx-presentation-exit'))) {
+            return;
+        }
+        // PowerPoint advances on click; the left edge is the only place that goes back.
+        const bounds = overlay.getBoundingClientRect();
+        const ratio = (event.clientX - bounds.left) / (bounds.width || 1);
+        if (ratio < 0.2) {
+            this.previous();
+        }
+        else {
+            this.next();
+        }
+    }
+    handleKey(event) {
+        if (!this.active || event.altKey || event.metaKey || event.ctrlKey) {
+            return;
+        }
+        // Enter/Space on a focused control (the exit button) must activate that
+        // control, not advance the slide. Let the browser's default run instead.
+        const target = event.target;
+        if (target &&
+            typeof target.closest === 'function' &&
+            target.closest('button, a, input, textarea, select, [contenteditable="true"], [contenteditable=""]')) {
+            return;
+        }
+        // With two slideshows open, a key pressed inside the other overlay belongs
+        // to that overlay; only the focused one advances.
+        if (target && typeof target.closest === 'function') {
+            const otherOverlay = target.closest('.flyfish-pptx-presentation');
+            if (otherOverlay && otherOverlay !== this.overlay) {
+                return;
+            }
+        }
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+            case 'PageDown':
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                this.next();
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+            case 'PageUp':
+            case 'Backspace':
+                event.preventDefault();
+                this.previous();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.goTo(1);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.goTo(this.viewer.slideCount);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.exit();
+                break;
+            default:
+                break;
+        }
+    }
+}

package/dist/sanitize.d.ts

@@ -0,0 +1,2 @@
+export declare const sanitizePptxCss: (documentRef: Document, cssText: string) => string;
+export declare const sanitizePptxMarkup: (documentRef: Document, html: string) => DocumentFragment;

package/dist/sanitize.js

@@ -0,0 +1,167 @@
+import createDOMPurify from 'dompurify';
+const PPTX_CONTENT_STYLE_SCOPE = '.flyfish-pptx-content';
+const GENERATED_STYLE_RULE = /\s*(\._(?:css|svg_css|tbl_cell_css)_[A-Za-z0-9_-]+)\s*\{([^{}]*)\}/y;
+const purifierByDocument = new WeakMap();
+const createSafeFallbackFragment = (documentRef) => {
+    const fragment = documentRef.createDocumentFragment();
+    const fallback = documentRef.createElement('section');
+    fallback.className = 'slide flyfish-pptx-slide-error';
+    fallback.textContent = 'This slide could not be displayed safely.';
+    fragment.append(fallback);
+    return fragment;
+};
+const getPurifier = (documentRef) => {
+    const cached = purifierByDocument.get(documentRef);
+    if (cached) {
+        return cached;
+    }
+    const windowRef = documentRef.defaultView;
+    if (!windowRef) {
+        return null;
+    }
+    const purifier = createDOMPurify(windowRef);
+    if (!purifier.isSupported) {
+        return null;
+    }
+    purifierByDocument.set(documentRef, purifier);
+    return purifier;
+};
+const isAllowedCssUrl = (value) => {
+    const target = value
+        .trim()
+        .replace(/^(?:"([\s\S]*)"|'([\s\S]*)')$/, '$1$2')
+        .trim();
+    if (/^#[A-Za-z0-9_.:-]+$/.test(target)) {
+        return true;
+    }
+    return /^data:image\/[A-Za-z0-9.+-]+;base64,[A-Za-z0-9+/=\s]+$/i.test(target);
+};
+const isSafeEmbeddedResourceUrl = (value, allowFragment) => {
+    const normalized = value.trim();
+    if (allowFragment && /^#[A-Za-z0-9_.:-]+$/.test(normalized)) {
+        return true;
+    }
+    if (/^blob:/i.test(normalized)) {
+        return true;
+    }
+    return /^data:image\/[A-Za-z0-9.+-]+;base64,[A-Za-z0-9+/=\s]+$/i.test(normalized);
+};
+const isSafeCssValue = (value) => {
+    const normalized = value.replace(/\/\*[\s\S]*?\*\//g, '').trim();
+    if (/(?:expression|image(?:-set)?|paint|var)\s*\(/i.test(normalized) ||
+        /(?:javascript|vbscript)\s*:/i.test(normalized) ||
+        /(?:^|[^-])behavior\s*:/i.test(normalized) ||
+        /-moz-binding/i.test(normalized) ||
+        normalized.includes('\\')) {
+        return false;
+    }
+    let unsafeUrl = false;
+    const withoutUrls = normalized.replace(/url\(\s*([^)]*?)\s*\)/gi, (_match, target) => {
+        if (!isAllowedCssUrl(target)) {
+            unsafeUrl = true;
+        }
+        return '';
+    });
+    return !unsafeUrl && !/url\s*\(/i.test(withoutUrls);
+};
+const sanitizeStyleDeclaration = (documentRef, cssText) => {
+    const probe = documentRef.createElement('span');
+    probe.setAttribute('style', cssText);
+    const style = probe.style;
+    const propertyNames = Array.from({ length: style.length }, (_, index) => style.item(index));
+    for (const propertyName of propertyNames) {
+        const value = style.getPropertyValue(propertyName);
+        if (!propertyName ||
+            propertyName.startsWith('--') ||
+            propertyName === 'behavior' ||
+            propertyName === '-moz-binding' ||
+            (propertyName === 'position' && /^(?:fixed|sticky)$/i.test(value.trim())) ||
+            !isSafeCssValue(value)) {
+            style.removeProperty(propertyName);
+        }
+    }
+    return style.cssText;
+};
+const sanitizeStyleAttributes = (documentRef, root) => {
+    root.querySelectorAll('[style]').forEach((element) => {
+        const sanitized = sanitizeStyleDeclaration(documentRef, element.getAttribute('style') || '');
+        if (sanitized) {
+            element.setAttribute('style', sanitized);
+        }
+        else {
+            element.removeAttribute('style');
+        }
+    });
+};
+const sanitizeEmbeddedResourceUrls = (root) => {
+    root
+        .querySelectorAll('[src],[srcset],[poster],[href],[xlink\\:href]')
+        .forEach((element) => {
+        for (const attributeName of ['src', 'srcset', 'poster', 'href', 'xlink:href']) {
+            if (!element.hasAttribute(attributeName)) {
+                continue;
+            }
+            const isHtmlAnchor = element.namespaceURI === 'http://www.w3.org/1999/xhtml' && element.localName === 'a';
+            if (isHtmlAnchor && attributeName === 'href') {
+                continue;
+            }
+            const allowFragment = element.namespaceURI === 'http://www.w3.org/2000/svg' &&
+                (attributeName === 'href' || attributeName === 'xlink:href');
+            if (!isSafeEmbeddedResourceUrl(element.getAttribute(attributeName) || '', allowFragment)) {
+                element.removeAttribute(attributeName);
+            }
+        }
+    });
+};
+const sanitizeSvgUrlAttributes = (root) => {
+    root.querySelectorAll('svg, svg *').forEach((element) => {
+        for (const attribute of Array.from(element.attributes)) {
+            const value = attribute.value;
+            if (/url\s*\(/i.test(value) && !isSafeCssValue(value)) {
+                element.removeAttribute(attribute.name);
+            }
+        }
+    });
+};
+export const sanitizePptxCss = (documentRef, cssText) => {
+    const rules = [];
+    let offset = 0;
+    while (offset < cssText.length) {
+        if (!cssText.slice(offset).trim()) {
+            break;
+        }
+        GENERATED_STYLE_RULE.lastIndex = offset;
+        const match = GENERATED_STYLE_RULE.exec(cssText);
+        if (!match) {
+            return '';
+        }
+        const declarations = sanitizeStyleDeclaration(documentRef, match[2]);
+        if (declarations) {
+            rules.push(`${PPTX_CONTENT_STYLE_SCOPE} ${match[1]}{${declarations}}`);
+        }
+        offset = GENERATED_STYLE_RULE.lastIndex;
+    }
+    return rules.join('\n');
+};
+export const sanitizePptxMarkup = (documentRef, html) => {
+    const purifier = getPurifier(documentRef);
+    if (!purifier) {
+        return createSafeFallbackFragment(documentRef);
+    }
+    const fragment = purifier.sanitize(html, {
+        RETURN_DOM_FRAGMENT: true,
+        USE_PROFILES: { html: true, svg: true, svgFilters: true },
+        ADD_ATTR: ['target'],
+        FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
+        FORBID_ATTR: ['srcdoc']
+    });
+    sanitizeStyleAttributes(documentRef, fragment);
+    sanitizeEmbeddedResourceUrls(fragment);
+    sanitizeSvgUrlAttributes(fragment);
+    fragment.querySelectorAll('a[target]').forEach((anchor) => {
+        if ((anchor.getAttribute('target') || '').trim().toLowerCase() === '_blank') {
+            anchor.rel = 'noopener noreferrer';
+        }
+    });
+    return fragment;
+};

package/dist/styles.js

@@ -57,6 +57,24 @@ export const pptxViewerCss = `
 ${scopePptxContentStyleText(legacyPptxCss)}
 .flyfish-pptx-content > .slide:last-of-type{margin-bottom:0}
 .flyfish-pptx-slide-slot:last-of-type > .slide{margin-bottom:0}
+.flyfish-pptx-presentation{position:fixed;inset:0;z-index:2147483000;display:block;overflow:hidden;background:#000;cursor:default;user-select:none;-webkit-user-select:none}
+.flyfish-pptx-presentation:focus{outline:none}
+.flyfish-pptx-presentation-stage{position:absolute;inset:0;overflow:hidden}
+.flyfish-pptx-presentation .flyfish-pptx-scale-box{position:absolute;inset:0;width:100%;height:100%;margin:0}
+.flyfish-pptx-presentation .flyfish-pptx-thumbnail{display:none}
+.flyfish-pptx-content.is-presenting > .flyfish-pptx-slide-slot{display:none;min-height:0}
+.flyfish-pptx-content.is-presenting > .flyfish-pptx-slide-slot.is-active-slide{display:flow-root}
+.flyfish-pptx-content.is-presenting > .slide{display:none}
+.flyfish-pptx-content.is-presenting > .slide.is-active-slide{display:block}
+.flyfish-pptx-content.is-presenting .slide{margin:0!important;box-shadow:none}
+.flyfish-pptx-presentation-counter{position:absolute;right:18px;bottom:14px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:13px/1.4 system-ui,sans-serif;letter-spacing:.02em;pointer-events:none}
+.flyfish-pptx-presentation-hint{position:absolute;left:18px;bottom:14px;color:rgba(255,255,255,.55);font:12px/1.4 system-ui,sans-serif;pointer-events:none}
+.flyfish-pptx-presentation-hint[hidden]{display:none}
+.flyfish-pptx-presentation-exit{position:absolute;top:14px;right:14px;width:34px;height:34px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:15px;line-height:1;cursor:pointer}
+.flyfish-pptx-presentation-exit:hover{background:rgba(255,255,255,.26)}
+.flyfish-pptx-presentation-exit:focus-visible{outline:2px solid #fff;outline-offset:2px}
+@media (prefers-reduced-motion:no-preference){.flyfish-pptx-content.is-presenting > .flyfish-pptx-slide-slot.is-active-slide,.flyfish-pptx-content.is-presenting > .slide.is-active-slide{animation:flyfish-pptx-slide-in 140ms ease-out}}
+@keyframes flyfish-pptx-slide-in{from{opacity:.35}to{opacity:1}}
 `;
 const PPTX_STYLE_ID = 'flyfish-pptx-native-style';
 export const ensurePptxViewerStyles = (documentRef, root = documentRef) => {

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { PptxPresentationLabels, PptxPresentationState } from './presentation';
 export type PptxFitMode = 'contain' | 'none';
 export interface PptxZipLimits {
     maxFileBytes?: number;
@@ -60,6 +61,9 @@ export interface PptxViewerOptions extends PptxWorkerFactoryOptions {
     onRenderComplete?: () => void;
     onWarning?: (warning: unknown) => void;
     onError?: (error: unknown) => void;
+    presentationLabels?: PptxPresentationLabels;
+    presentationFullscreen?: boolean;
+    onPresentationChange?: (state: PptxPresentationState) => void;
 }
 export interface PptxWorkerMessage {
     type: string;