@file-viewer/pptx 3.1.1 → 3.2.0

package/README.en.md

@@ -1,34 +1,7 @@
 # @file-viewer/pptx
 
-Native PPTX rendering engine extracted from Flyfish File Viewer. It is maintained as a standalone package so presentation rendering can evolve independently from framework adapters.
+Runtime package version 3.2.0.
 
-## Highlights
+Usage and API documentation: https://doc.file-viewer.app/
 
-- Pure TypeScript/DOM API with no Vue, React, or iframe dependency.
-- Web Worker based PPTX parsing with progressive slide output.
-- Preserves the latest native Flyfish rendering path for themes, images, shapes, tables, text, and basic charts.
-- Supports `fitMode`, `zoomPercent`, custom Worker URLs, and Worker factories for private deployment and strict CSP environments.
-
-`resolvePptxPackageWorkerUrl()` lets integrations identify an emitted or directly served package Worker URL. It returns `undefined` when the location is not recognized, not as proof that a file is missing; integrations can then use their asset-copy strategy or explicit Worker configuration.
-
-When `PptxViewer` is used directly, Vite or Webpack can serve a recognized package Worker; an unrecognized build never guesses an application-relative path. Angular, IIFE, offline static directories, and strict CSP deployments should use `file-viewer-copy-assets` or an explicit `workerUrl` so the final static origin serves the Worker reliably.
-
-## Usage
-
-```ts
-import { PptxViewer } from '@file-viewer/pptx'
-
-const buffer = await file.arrayBuffer()
-const viewer = await PptxViewer.open(buffer, document.querySelector('#app')!, {
-  fitMode: 'contain',
-  zoomPercent: 100,
-  onSlideRendered(index) {
-    console.log('slide rendered', index)
-  },
-})
-
-await viewer.setZoom(125)
-viewer.destroy()
-```
-
-Most users should consume PPTX through `@file-viewer/core` or a standard framework package. The core package lazy-loads this renderer only when a presentation is opened.
+The package's own license is Apache-2.0. Included third-party notices apply to their respective components.

package/README.md

@@ -1,34 +1,7 @@
 # @file-viewer/pptx
 
-Flyfish File Viewer 的原生 PPTX 渲染引擎包，从历史稳定实现中独立拆分，便于持续维护和单独发布。
+Runtime package version 3.2.0.
 
-## 特性
+Usage and API documentation: https://doc.file-viewer.app/
 
-- 纯 TypeScript/DOM 入口，不依赖 Vue、React 或 iframe。
-- 使用 Web Worker 解析 PPTX，按页渐进输出，避免阻塞主线程。
-- 保留历史原生解析链路中的主题、图片、形状、表格、文本和基础图表处理。
-- 支持 `fitMode`、`zoomPercent`、自定义 Worker URL / Worker factory，方便内网、离线和 CSP 场景。
-
-`resolvePptxPackageWorkerUrl()` 可供集成层识别打包器已输出或包目录直接提供的 Worker URL。未识别时返回 `undefined`，不代表文件不存在；集成层仍可使用自己的资产复制策略或显式 Worker 配置。
-
-直接使用 `PptxViewer` 时，Vite 或 Webpack 可直接提供已识别的包内 Worker；无法识别的构建不会猜测应用相对路径。Angular、IIFE、离线静态目录或严格 CSP 部署应使用 `file-viewer-copy-assets` 或显式 `workerUrl`，让 Worker 由最终静态域名稳定提供。
-
-## 使用
-
-```ts
-import { PptxViewer } from '@file-viewer/pptx'
-
-const buffer = await file.arrayBuffer()
-const viewer = await PptxViewer.open(buffer, document.querySelector('#app')!, {
-  fitMode: 'contain',
-  zoomPercent: 100,
-  onSlideRendered(index) {
-    console.log('slide rendered', index)
-  },
-})
-
-await viewer.setZoom(125)
-viewer.destroy()
-```
-
-在 Flyfish File Viewer 中通常无需直接使用本包，`@file-viewer/core` 会按 PPTX 类型自动按需加载。
+The package's own license is Apache-2.0. Included third-party notices apply to their respective components.

package/dist/chart.d.ts

@@ -8,4 +8,5 @@ export type PptxPostProcessingHandle = {
     destroy: () => void;
 };
 export declare const findPptxChartTarget: (root: ParentNode, chartID: string) => HTMLElement | null;
+export declare const getNumericBulletText: (type: string, index: number) => string;
 export declare const renderPptxPostProcessing: (charts: unknown, root: ParentNode) => Promise<PptxPostProcessingHandle>;

package/dist/chart.js

@@ -13,22 +13,69 @@ export const findPptxChartTarget = (root, chartID) => {
     return Array.from(root.querySelectorAll('[id]'))
         .find(element => element.id === chartID) || null;
 };
-const getNumericBulletText = (type, index) => {
-    switch (type) {
-        case 'arabicPeriod':
-            return `${index}. `;
-        case 'arabicParenR':
-            return `${index}) `;
-        case 'alphaLcParenR':
-            return `${String.fromCharCode(index + 96)}) `;
-        case 'alphaLcPeriod':
-            return `${String.fromCharCode(index + 96)}. `;
-        case 'alphaUcParenR':
-            return `${String.fromCharCode(index + 64)}) `;
-        case 'alphaUcPeriod':
-            return `${String.fromCharCode(index + 64)}. `;
-        default:
-            return String(index);
+const formatEastAsianNumber = (index) => {
+    const digits = '零一二三四五六七八九';
+    const units = [[1000, '千'], [100, '百'], [10, '十'], [1, '']];
+    const group = (value, omitLeadingOne = true) => {
+        let label = '';
+        let gap = false;
+        for (const [place, unit] of units) {
+            const digit = Math.floor(value / place);
+            value %= place;
+            if (digit) {
+                if (gap)
+                    label += digits[0];
+                label += (place === 10 && digit === 1 && !label && omitLeadingOne ? '' : digits[digit]) + unit;
+                gap = false;
+            }
+            else if (label && value)
+                gap = true;
+        }
+        return label;
+    };
+    if (index < 10000)
+        return group(index);
+    const remainder = index % 10000;
+    return digits[Math.floor(index / 10000)] + '万' +
+        (remainder ? (remainder < 1000 ? digits[0] : '') + group(remainder, false) : '');
+};
+export const getNumericBulletText = (type, index) => {
+    if (!Number.isInteger(index) || index < 1 || index > 32767) {
+        return String(index);
+    }
+    if (type === 'ea1JpnChsDbPeriod') {
+        return `${formatEastAsianNumber(index)}． `;
+    }
+    const match = /^(arabic|alphaLc|alphaUc|romanLc|romanUc)(Period|ParenR|ParenBoth|Plain)$/.exec(type);
+    if (!match) {
+        return String(index);
+    }
+    let label = String(index);
+    if (match[1].startsWith('alpha')) {
+        label = '';
+        for (let remaining = index; remaining > 0; remaining = Math.floor((remaining - 1) / 26)) {
+            label = String.fromCharCode(65 + (remaining - 1) % 26) + label;
+        }
+    }
+    else if (match[1].startsWith('roman')) {
+        label = '';
+        let remaining = index;
+        const digits = [
+            [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'], [100, 'C'], [90, 'XC'],
+            [50, 'L'], [40, 'XL'], [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
+        ];
+        for (const [value, symbol] of digits) {
+            label += symbol.repeat(Math.floor(remaining / value));
+            remaining %= value;
+        }
+    }
+    if (match[1].endsWith('Lc'))
+        label = label.toLowerCase();
+    switch (match[2]) {
+        case 'Period': return `${label}. `;
+        case 'ParenR': return `${label}) `;
+        case 'ParenBoth': return `(${label}) `;
+        default: return label;
     }
 };
 const restoreNumericBullets = (root) => {
@@ -43,7 +90,10 @@ const restoreNumericBullets = (root) => {
             const type = String(bullet.dataset.bulltname || 'arabicPeriod');
             const level = String(bullet.dataset.bulltlvl || '0');
             const key = `${level}:${type}`;
-            const nextIndex = (counters.get(key) || 0) + 1;
+            const startAt = Number(bullet.dataset.bulltstartat);
+            const nextIndex = Number.isInteger(startAt) && startAt >= 1 && startAt <= 32767
+                ? startAt
+                : (counters.get(key) || 0) + 1;
             counters.set(key, nextIndex);
             bullet.textContent = getNumericBulletText(type, nextIndex);
         }
@@ -120,6 +170,11 @@ const applyTextFitScale = (block, scale) => {
 const hasTextOverflow = (block, fitWidth = true) => block.scrollHeight > block.clientHeight + TEXT_FIT_TOLERANCE ||
     (fitWidth && block.scrollWidth > block.clientWidth + TEXT_FIT_TOLERANCE);
 const fitOverflowingTextBlock = (block, fitWidth = true) => {
+    const mode = block.dataset.pptxAutofit;
+    if (mode && mode !== 'normal')
+        return;
+    if (block.dataset.pptxWrap === 'none')
+        fitWidth = false;
     if (!block.querySelector('.text-block') || block.clientWidth <= 0 || block.clientHeight <= 0) {
         return;
     }
@@ -157,7 +212,7 @@ const fitOverflowingTextBlocks = (root) => {
         .forEach(block => fitOverflowingTextBlock(block, false));
 };
 const renderChart = async (message, root) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const payload = message.data;
     if (!(payload === null || payload === void 0 ? void 0 : payload.chartID) || !payload.chartType || !payload.chartData) {
         return;
@@ -174,10 +229,11 @@ const renderChart = async (message, root) => {
     }
     const { billboard, d3Format } = await chartLibraryLoader();
     const bb = billboard.default || billboard;
-    const { area, bar, line, pie, scatter } = billboard;
+    const { area, bar, line, pie, donut, scatter } = billboard;
+    if (typeof billboard.grid === 'function') {
+        billboard.grid();
+    }
     const chart = {
-        // A selector makes Billboard query the main document. That misses chart
-        // placeholders inside the viewer Shadow DOM and makes it fall back to body.
         bindto: chartTarget,
     };
     const chartData = payload.chartData;
@@ -192,6 +248,58 @@ const renderChart = async (message, root) => {
         },
     };
     switch (payload.chartType) {
+        case 'doughnutChart': {
+            const series = chartData[0];
+            const columns = [];
+            const names = {};
+            const colors = {};
+            for (const [index, point] of ((series === null || series === void 0 ? void 0 : series.values) || []).entries()) {
+                if (typeof point.y !== 'number' || !Number.isFinite(point.y) || point.y === 0)
+                    continue;
+                const id = `point-${index}`;
+                columns.push([id, Math.abs(point.y)]);
+                names[id] = String((_c = (_b = (_a = series.xlabels) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : point.x) !== null && _c !== void 0 ? _c : index);
+                const fill = (_h = (_g = (_f = (_e = (_d = payload.chartOptions) === null || _d === void 0 ? void 0 : _d.series) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.points) === null || _g === void 0 ? void 0 : _g[point.x]) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = payload.chartOptions) === null || _j === void 0 ? void 0 : _j.series) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.color;
+                if (fill && /^(?:#[\da-f]{6}(?:[\da-f]{2})?|transparent)$/i.test(fill))
+                    colors[id] = fill;
+            }
+            const hole = (_m = payload.chartOptions) === null || _m === void 0 ? void 0 : _m.holeSize;
+            const holeRatio = (typeof hole === 'number' && Number.isFinite(hole) && hole >= 10 && hole <= 90 ? hole : 50) / 100;
+            const angle = (_o = payload.chartOptions) === null || _o === void 0 ? void 0 : _o.firstSliceAngle;
+            let adjustingWidth = false;
+            Object.assign(chart, {
+                data: { columns, names, colors, type: donut(), order: null },
+                donut: {
+                    startingAngle: typeof angle === 'number' && Number.isFinite(angle) ? angle * Math.PI / 180 : 0,
+                    expand: false,
+                    label: { show: false },
+                },
+                transition: { duration: 0 },
+                onrendered() {
+                    if (adjustingWidth || typeof this.config !== 'function')
+                        return;
+                    let radius = 0;
+                    for (const arc of chartTarget.querySelectorAll('.bb-arc')) {
+                        const match = /[Aa]([\d.+eE-]+)[ ,]+([\d.+eE-]+)/.exec(arc.getAttribute('d') || '');
+                        if (match)
+                            radius = Math.max(radius, Number(match[1]));
+                    }
+                    if (!(radius > 0) || !Number.isFinite(radius))
+                        return;
+                    const width = radius * (1 - holeRatio);
+                    if (Math.abs(Number(this.config('donut.width')) - width) <= 0.01)
+                        return;
+                    adjustingWidth = true;
+                    try {
+                        this.config('donut.width', width, true);
+                    }
+                    finally {
+                        adjustingWidth = false;
+                    }
+                },
+            });
+            break;
+        }
         case 'lineChart':
             Object.assign(chart, {
                 data: {
@@ -226,7 +334,7 @@ const renderChart = async (message, root) => {
         case 'pie3DChart':
             Object.assign(chart, {
                 data: {
-                    columns: Object.values(((_a = chartData[0]) === null || _a === void 0 ? void 0 : _a.xlabels) || {}).map((value, index) => {
+                    columns: Object.values(((_p = chartData[0]) === null || _p === void 0 ? void 0 : _p.xlabels) || {}).map((value, index) => {
                         var _a, _b, _c;
                         return [
                             value,
@@ -276,7 +384,70 @@ const renderChart = async (message, root) => {
             return;
     }
     if (chart.data) {
-        return bb.generate(chart);
+        const options = payload.chartOptions;
+        if (options === null || options === void 0 ? void 0 : options.legend) {
+            chart.legend = {
+                show: options.legend.show !== false,
+                position: options.legend.position === 'b' ? 'bottom' : 'right',
+                format: (label) => label === '' ? '\u200b' : label,
+            };
+        }
+        if (['barChart', 'areaChart', 'lineChart'].includes(payload.chartType)) {
+            const used = new Set();
+            const reserved = new Set(chart.data.columns.map((column) => String(column[0])));
+            const names = {};
+            chart.data.columns.forEach((column, index) => {
+                const label = String(column[0]);
+                let id = label;
+                if (used.has(id)) {
+                    id = `pptx-series-${index}`;
+                    while (reserved.has(id) || used.has(id))
+                        id += '-';
+                    column[0] = id;
+                }
+                used.add(id);
+                Object.defineProperty(names, id, { value: label, enumerable: true });
+            });
+            chart.data.names = names;
+            if ((options === null || options === void 0 ? void 0 : options.grouping) === 'stacked' || (options === null || options === void 0 ? void 0 : options.grouping) === 'percentStacked') {
+                chart.data.groups = [chart.data.columns.map((column) => column[0])];
+                if (options.grouping === 'percentStacked')
+                    chart.data.stack = { normalize: true };
+                chart.data.order = null;
+            }
+            const colors = {};
+            chartData.forEach((item, index) => {
+                var _a, _b;
+                const fill = (_b = (_a = options === null || options === void 0 ? void 0 : options.series) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.color;
+                if (fill && /^(?:#[\da-f]{6}(?:[\da-f]{2})?|transparent)$/i.test(fill))
+                    Object.defineProperty(colors, String(chart.data.columns[index][0]), { value: fill, enumerable: true });
+            });
+            if (Object.keys(colors).length)
+                chart.data.colors = colors;
+        }
+        const surface = chartTarget.ownerDocument.createElement('div');
+        surface.className = 'pptx-chart-surface';
+        surface.style.cssText = 'width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto';
+        chartTarget.replaceChildren(surface);
+        chart.bindto = surface;
+        try {
+            const instance = bb.generate(chart);
+            return {
+                destroy() {
+                    var _a;
+                    try {
+                        (_a = instance.destroy) === null || _a === void 0 ? void 0 : _a.call(instance);
+                    }
+                    finally {
+                        surface.remove();
+                    }
+                },
+            };
+        }
+        catch (error) {
+            surface.remove();
+            throw error;
+        }
     }
 };
 export const renderPptxPostProcessing = async (charts, root) => {
@@ -310,7 +481,6 @@ export const renderPptxPostProcessing = async (charts, root) => {
                     (_a = chart.destroy) === null || _a === void 0 ? void 0 : _a.call(chart);
                 }
                 catch {
-                    // The DOM may already be detached during framework unmount.
                 }
             }
             chartInstances.length = 0;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { PptxViewer } from './viewer';
-export { PptxPresentation } from './presentation';
-export type { PptxPresentationLabels, PptxPresentationState } from './presentation';
-export { createPptxWorker, resolvePptxPackageWorkerUrl } from './worker';
-export { registerPptxChartLibraryLoader } from './chart';
-export type { PptxChartLibraries, PptxChartLibraryLoader } from './chart';
-export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from './options';
-export type { NativePptxEngineOptions, PptxDiagnosticError, PptxDiagnosticErrorCode, PptxFitMode, PptxListOptions, PptxSlideSize, PptxViewerOptions, PptxWorkerFactoryOptions, PptxWorkerMessage, PptxZipLimits, } from './types';
+export { PptxViewer } from "./viewer.js";
+export { PptxPresentation } from "./presentation.js";
+export type { PptxPresentationLabels, PptxPresentationState } from "./presentation.js";
+export { createPptxWorker, resolvePptxPackageWorkerUrl } from "./worker.js";
+export { registerPptxChartLibraryLoader } from "./chart.js";
+export type { PptxChartLibraries, PptxChartLibraryLoader } from "./chart.js";
+export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from "./options.js";
+export type { NativePptxEngineOptions, PptxDiagnosticError, PptxDiagnosticErrorCode, PptxFitMode, PptxListOptions, PptxSlideSize, PptxViewerOptions, PptxWorkerFactoryOptions, PptxWorkerMessage, PptxZipLimits, } from "./types.js";

package/dist/index.js

@@ -1,5 +1,5 @@
-export { PptxViewer } from './viewer.js';
-export { PptxPresentation } from './presentation.js';
-export { createPptxWorker, resolvePptxPackageWorkerUrl } from './worker.js';
-export { registerPptxChartLibraryLoader } from './chart.js';
-export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from './options.js';
+export { PptxViewer } from "./viewer.js";
+export { PptxPresentation } from "./presentation.js";
+export { createPptxWorker, resolvePptxPackageWorkerUrl } from "./worker.js";
+export { registerPptxChartLibraryLoader } from "./chart.js";
+export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from "./options.js";

package/dist/options.d.ts

@@ -1,4 +1,4 @@
-import type { NativePptxEngineOptions, PptxZipLimits } from './types';
+import type { NativePptxEngineOptions, PptxZipLimits } from "./types.js";
 export declare const RECOMMENDED_ZIP_LIMITS: Required<PptxZipLimits>;
 export declare const createDefaultPptxOptions: () => NativePptxEngineOptions;
 export declare const resolvePptxEngineOptions: (options?: Partial<NativePptxEngineOptions>) => NativePptxEngineOptions;

package/dist/presentation.d.ts

@@ -1,4 +1,4 @@
-import type { PptxViewer } from './viewer';
+import type { PptxViewer } from "./viewer.js";
 export interface PptxPresentationState {
     active: boolean;
     slideNumber: number;
@@ -10,14 +10,6 @@ export interface PptxPresentationLabels {
     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;
@@ -40,21 +32,10 @@ export declare class PptxPresentation {
     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;

package/dist/presentation.js

@@ -1,12 +1,4 @@
 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;
@@ -62,11 +54,8 @@ export class PptxPresentation {
         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);
@@ -80,13 +69,9 @@ export class PptxPresentation {
                 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));
@@ -105,8 +90,6 @@ export class PptxPresentation {
             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) {
@@ -149,11 +132,8 @@ export class PptxPresentation {
         }
         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
@@ -179,7 +159,6 @@ export class PptxPresentation {
             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) {
@@ -191,7 +170,6 @@ export class PptxPresentation {
             }
             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;
@@ -220,11 +198,6 @@ export class PptxPresentation {
     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) {
@@ -232,11 +205,6 @@ export class PptxPresentation {
         }
         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) {
@@ -275,8 +243,6 @@ export class PptxPresentation {
         });
         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();
@@ -295,7 +261,6 @@ export class PptxPresentation {
         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) {
@@ -309,16 +274,12 @@ export class PptxPresentation {
         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) {

package/dist/styles.d.ts

@@ -1,8 +1,3 @@
-/**
- * The legacy engine emits class-only selector lists. Prefix each top-level
- * class rule so light-DOM consumers do not inherit generic `.slide` or
- * generated `._css_*` rules from a renderer-local style element.
- */
 export declare const scopePptxContentStyleText: (cssText: string) => string;
 export declare const pptxViewerCss: string;
 export declare const ensurePptxViewerStyles: (documentRef: Document, root?: Document | ShadowRoot) => void;

package/dist/styles.js

@@ -32,13 +32,25 @@ const legacyPptxCss = `
 .slide table tr,.slide table td{box-sizing:border-box;min-width:0;overflow:hidden}
 .slide .pptx-table-cell-content{box-sizing:border-box;min-height:0;overflow:hidden}
 .slide svg.drawing{position:absolute;overflow:visible}
+/* Chart shapes need renderer-owned styling even in offline / Shadow DOM hosts.
+   Without it SVG's default black fill closes line and axis paths into polygons. */
+.slide .pptx-chart-surface svg{font:10px sans-serif;overflow:hidden}
+.slide .pptx-chart-surface .bb-axis path,.slide .pptx-chart-surface .bb-axis line{fill:none;stroke:currentColor}
+.slide .pptx-chart-surface .bb-line{fill:none;stroke-width:1px}
+.slide .pptx-chart-surface .bb-bar{stroke-width:0}
+.slide .pptx-chart-surface .bb-area{stroke-width:0;opacity:.2}
+.slide .pptx-chart-surface .bb-chart-arc path{stroke:#fff}
+.slide .pptx-chart-surface .bb-chart-arc text{fill:#fff;font-size:13px}
+.slide .pptx-chart-surface .bb-grid line{fill:none;stroke:#aaa}
+.slide .pptx-chart-surface .bb-xgrid,.slide .pptx-chart-surface .bb-ygrid{stroke-dasharray:3 3}
+.slide .pptx-chart-surface .bb-xgrid-focus,.slide .pptx-chart-surface .bb-ygrid-focus{pointer-events:none}
+.slide .pptx-chart-surface .bb-legend-item{font-size:12px}
+.slide .pptx-chart-surface .bb-tooltip-container{z-index:10;pointer-events:none}
+.slide .pptx-chart-surface table.bb-tooltip{position:static;width:auto;table-layout:auto;background:#fff;color:#172033;border:1px solid #ccc;opacity:.95;font-size:12px}
+.slide .pptx-chart-surface .bb-tooltip td,.slide .pptx-chart-surface .bb-tooltip th{padding:4px 6px}
+
 `;
 const PPTX_CONTENT_STYLE_SCOPE = '.flyfish-pptx-content';
-/**
- * The legacy engine emits class-only selector lists. Prefix each top-level
- * class rule so light-DOM consumers do not inherit generic `.slide` or
- * generated `._css_*` rules from a renderer-local style element.
- */
 export const scopePptxContentStyleText = (cssText) => cssText.replace(/(^|})\s*(\.[^{}]+)\{/g, (_match, boundary, selectorList) => {
     const scopedSelectors = selectorList
         .split(',')

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { PptxPresentationLabels, PptxPresentationState } from './presentation';
+import type { PptxPresentationLabels, PptxPresentationState } from "./presentation.js";
 export type PptxFitMode = 'contain' | 'none';
 export interface PptxZipLimits {
     maxFileBytes?: number;