@file-viewer/pptx 3.2.2 → 3.3.1

package/README.en.md

@@ -1,5 +1,7 @@
 # @file-viewer/pptx
 
+[English](https://github.com/flyfish-dev/file-viewer/blob/main/packages/renderers/pptx/README.md) · [简体中文](https://github.com/flyfish-dev/file-viewer/blob/main/packages/renderers/pptx/README.zh-CN.md)
+
 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.
 
 ## Highlights
@@ -8,6 +10,7 @@ Native PPTX rendering engine extracted from Flyfish File Viewer. It is maintaine
 - 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.
+- Charts retain authored sizes and text styles through slideshow zoom. CJK labels use independent logical measurements; legends support bottom, right, top, top-right and left positions. Fonts must be installed or supplied by the host; unavailable fonts use browser fallbacks.
 
 `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.
 

package/README.md

@@ -1,19 +1,22 @@
 # @file-viewer/pptx
 
-Flyfish File Viewer 的原生 PPTX 渲染引擎包，从历史稳定实现中独立拆分，便于持续维护和单独发布。
+[English](https://github.com/flyfish-dev/file-viewer/blob/main/packages/renderers/pptx/README.md) · [简体中文](https://github.com/flyfish-dev/file-viewer/blob/main/packages/renderers/pptx/README.zh-CN.md)
 
-## 特性
+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.
 
-- 纯 TypeScript/DOM 入口，不依赖 Vue、React 或 iframe。
-- 使用 Web Worker 解析 PPTX，按页渐进输出，避免阻塞主线程。
-- 保留历史原生解析链路中的主题、图片、形状、表格、文本和基础图表处理。
-- 支持 `fitMode`、`zoomPercent`、自定义 Worker URL / Worker factory，方便内网、离线和 CSP 场景。
+## Highlights
 
-`resolvePptxPackageWorkerUrl()` 可供集成层识别打包器已输出或包目录直接提供的 Worker URL。未识别时返回 `undefined`，不代表文件不存在；集成层仍可使用自己的资产复制策略或显式 Worker 配置。
+- 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.
+- Charts retain authored sizes and text styles through slideshow zoom. CJK labels use independent logical measurements; legends support bottom, right, top, top-right and left positions. Fonts must be installed or supplied by the host; unavailable fonts use browser fallbacks.
 
-直接使用 `PptxViewer` 时，Vite 或 Webpack 可直接提供已识别的包内 Worker；无法识别的构建不会猜测应用相对路径。Angular、IIFE、离线静态目录或严格 CSP 部署应使用 `file-viewer-copy-assets` 或显式 `workerUrl`，让 Worker 由最终静态域名稳定提供。
+`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'
@@ -31,4 +34,4 @@ await viewer.setZoom(125)
 viewer.destroy()
 ```
 
-在 Flyfish File Viewer 中通常无需直接使用本包，`@file-viewer/core` 会按 PPTX 类型自动按需加载。
+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.

package/README.zh-CN.md

@@ -0,0 +1,37 @@
+# @file-viewer/pptx
+
+[English](https://github.com/flyfish-dev/file-viewer/blob/main/packages/renderers/pptx/README.md) · [简体中文](https://github.com/flyfish-dev/file-viewer/blob/main/packages/renderers/pptx/README.zh-CN.md)
+
+Flyfish File Viewer 的原生 PPTX 渲染引擎包，从历史稳定实现中独立拆分，便于持续维护和单独发布。
+
+## 特性
+
+- 纯 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 类型自动按需加载。

package/dist/chart-config.d.ts

@@ -1,5 +1,12 @@
-import type { PptxChartModel } from "./chart-types.js";
+import type { PptxChartAxis, PptxChartModel } from './chart-types.js';
+/** Common authored numeric formats; unsupported Excel formats remain in the model. */
 export declare const formatPptxChartNumber: (value: number, format?: string) => string;
+export declare const resolvePptxChartAxes: (model: PptxChartModel) => {
+    category: PptxChartAxis | undefined;
+    primary: PptxChartAxis | undefined;
+    secondary: PptxChartAxis | undefined;
+};
+/** One category coordinate system, with every authored bar/line/area group. */
 export declare const createPptxCartesianChart: (model: PptxChartModel, library: Record<string, any>) => {
     interaction: {
         enabled: boolean;
@@ -44,6 +51,14 @@ export declare const createPptxCartesianChart: (model: PptxChartModel, library:
             categories: string[];
             tick: {
                 multiline: boolean;
+                culling?: undefined;
+                rotate?: undefined;
+                autorotate?: undefined;
+            } | {
+                multiline: boolean;
+                culling: boolean;
+                rotate: number;
+                autorotate: boolean;
             };
         };
         y: {};

package/dist/chart-config.js

@@ -1,3 +1,4 @@
+/** Common authored numeric formats; unsupported Excel formats remain in the model. */
 export const formatPptxChartNumber = (value, format = 'General') => {
     if (!Number.isFinite(value))
         return '';
@@ -28,8 +29,17 @@ const axisOptions = (axis) => {
     };
 };
 const defined = (labels) => Object.fromEntries(Object.entries(labels || {}).filter(([, value]) => value !== undefined));
+export const resolvePptxChartAxes = (model) => {
+    var _a, _b;
+    const axesFor = (group) => model.axes.filter(axis => group === null || group === void 0 ? void 0 : group.axisIds.includes(axis.id));
+    const primary = (_a = axesFor(model.groups[0]).find(axis => axis.kind === 'value')) !== null && _a !== void 0 ? _a : model.axes.find(axis => axis.kind === 'value');
+    const secondary = model.groups.filter(group => group.series.length > 0).flatMap(axesFor).find(axis => axis.kind === 'value' && axis.id !== (primary === null || primary === void 0 ? void 0 : primary.id));
+    const category = (_b = axesFor(model.groups[0]).find(axis => axis.kind === 'category' || axis.kind === 'date')) !== null && _b !== void 0 ? _b : model.axes.find(axis => axis.kind === 'category' || axis.kind === 'date');
+    return { category, primary, secondary };
+};
+/** One category coordinate system, with every authored bar/line/area group. */
 export const createPptxCartesianChart = (model, library) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     if (!model.groups.length || model.groups.some(group => !['lineChart', 'barChart', 'areaChart'].includes(group.chartType)))
         return null;
     const rows = model.groups.flatMap((group, groupIndex) => group.series.map((series, index) => ({
@@ -50,10 +60,7 @@ export const createPptxCartesianChart = (model, library) => {
         const points = new Map(series.values.map(point => [String(point.x), point.y]));
         return indices.map(index => { var _a; return (_a = points.get(index)) !== null && _a !== void 0 ? _a : null; });
     };
-    const axesFor = (group) => model.axes.filter(axis => group.axisIds.includes(axis.id));
-    const primary = (_b = axesFor(model.groups[0]).find(axis => axis.kind === 'value')) !== null && _b !== void 0 ? _b : model.axes.find(axis => axis.kind === 'value');
-    const secondary = rows.flatMap(row => axesFor(row.group)).find(axis => axis.kind === 'value' && axis.id !== (primary === null || primary === void 0 ? void 0 : primary.id));
-    const category = (_c = axesFor(model.groups[0]).find(axis => axis.kind === 'category' || axis.kind === 'date')) !== null && _c !== void 0 ? _c : model.axes.find(axis => axis.kind === 'category' || axis.kind === 'date');
+    const { primary, secondary, category } = resolvePptxChartAxes(model);
     const factory = { barChart: library.bar, lineChart: library.line, areaChart: library.area };
     if (rows.some(row => typeof factory[row.group.chartType] !== 'function'))
         return null;
@@ -66,6 +73,7 @@ export const createPptxCartesianChart = (model, library) => {
     const groups = model.groups.flatMap((group, groupIndex) => group.options.grouping === 'stacked' || group.options.grouping === 'percentStacked'
         ? [rows.filter(row => row.groupIndex === groupIndex).map(row => row.id)] : []);
     const normalizeAll = model.groups.length === 1 && model.groups[0].options.grouping === 'percentStacked';
+    // Normalize only this stacked group, preserving an unrelated line/secondary axis.
     const totals = new Map();
     rows.forEach((row, rowIndex) => {
         if (normalizeAll || row.group.options.grouping !== 'percentStacked')
@@ -91,7 +99,7 @@ export const createPptxCartesianChart = (model, library) => {
         const color = (_b = (_a = row.group.options.series) === null || _a === void 0 ? void 0 : _a[row.index]) === null || _b === void 0 ? void 0 : _b.color;
         return color && /^(?:#[\da-f]{6}(?:[\da-f]{2})?|transparent)$/i.test(color) ? [[row.id, color]] : [];
     }));
-    const gap = (_d = model.groups.find(group => group.chartType === 'barChart')) === null || _d === void 0 ? void 0 : _d.options.gapWidth;
+    const gap = (_b = model.groups.find(group => group.chartType === 'barChart')) === null || _b === void 0 ? void 0 : _b.options.gapWidth;
     const hasLabels = rows.some(row => { var _a, _b; return row.group.options.labels || ((_b = (_a = row.group.options.series) === null || _a === void 0 ? void 0 : _a[row.index]) === null || _b === void 0 ? void 0 : _b.labels); });
     const byId = new Map(rows.map(row => [row.id, row]));
     const labelFormat = (value, id, position) => {
@@ -116,7 +124,7 @@ export const createPptxCartesianChart = (model, library) => {
     };
     return {
         data: {
-            columns, types, type: types[(_e = rows[0]) === null || _e === void 0 ? void 0 : _e.id], axes: dataAxes,
+            columns, types, type: types[(_c = rows[0]) === null || _c === void 0 ? void 0 : _c.id], axes: dataAxes,
             names: Object.fromEntries(rows.map(row => [row.id, String(row.series.key)])),
             ...(Object.keys(colors).length ? { colors } : {}),
             ...(groups.length ? { groups, order: null } : {}),
@@ -125,7 +133,9 @@ export const createPptxCartesianChart = (model, library) => {
         },
         axis: {
             rotated: model.groups.some(group => group.barDirection === 'bar'),
-            x: { ...axisOptions(category), type: 'category', categories, tick: { multiline: true } },
+            x: { ...axisOptions(category), type: 'category', categories, tick: model.groups.some(group => group.barDirection === 'bar')
+                    ? { multiline: true }
+                    : { multiline: false, culling: false, rotate: (_d = category === null || category === void 0 ? void 0 : category.labelRotation) !== null && _d !== void 0 ? _d : 60, autorotate: (category === null || category === void 0 ? void 0 : category.labelRotation) === undefined } },
             y: axisOptions(primary),
             ...(secondary ? { y2: axisOptions(secondary) } : {}),
         },

package/dist/chart-legend.d.ts

@@ -0,0 +1,11 @@
+import type { PptxChartFont, PptxChartOptions } from './chart-types.js';
+/** Billboard only provides outside bottom/right legends. Preserve the other
+ * DrawingML placements without changing the authored outer chart frame. */
+export declare const createPptxChartLegend: (surface: HTMLElement, chart: any, legend?: PptxChartOptions["legend"], font?: PptxChartFont) => {
+    size(): {
+        width: number;
+        height: number;
+    };
+    bind(api: any): void;
+    destroy(): void;
+} | undefined;

package/dist/chart-legend.js

@@ -0,0 +1,103 @@
+import { applyPptxChartFont } from './chart-text.js';
+/** Billboard only provides outside bottom/right legends. Preserve the other
+ * DrawingML placements without changing the authored outer chart frame. */
+export const createPptxChartLegend = (surface, chart, legend, font) => {
+    var _a, _b;
+    const document = surface.ownerDocument;
+    const view = document === null || document === void 0 ? void 0 : document.defaultView;
+    if (!view || (legend === null || legend === void 0 ? void 0 : legend.show) === false || !((legend === null || legend === void 0 ? void 0 : legend.overlay) || ['t', 'tr', 'l'].includes((legend === null || legend === void 0 ? void 0 : legend.position) || '')))
+        return;
+    const left = (legend === null || legend === void 0 ? void 0 : legend.position) === 'l' || (legend === null || legend === void 0 ? void 0 : legend.position) === 'r';
+    const layout = document.createElement('div');
+    layout.className = 'pptx-chart-layout';
+    layout.style.cssText = `display:flex;flex-direction:${left ? 'row' : 'column'};width:100%;height:100%;min-width:0;min-height:0;position:relative`;
+    surface.replaceWith(layout);
+    const list = document.createElement('div');
+    list.className = 'pptx-chart-legend';
+    list.setAttribute('role', 'group');
+    list.setAttribute('aria-label', 'Chart legend');
+    list.style.cssText = `display:flex;flex:${left ? '0 1 auto' : '0 0 auto'};flex-direction:${left ? 'column' : 'row'};flex-wrap:${left ? 'nowrap' : 'wrap'};gap:4px 12px;align-items:${left ? 'stretch' : 'center'};justify-content:${(legend === null || legend === void 0 ? void 0 : legend.position) === 'tr' ? 'flex-end' : 'center'};box-sizing:border-box;padding:4px;overflow:auto;${left ? 'max-width:50%' : 'max-height:50%'};font:12px sans-serif`;
+    applyPptxChartFont(list.style, font);
+    if (legend === null || legend === void 0 ? void 0 : legend.overlay) {
+        list.style.position = 'absolute';
+        list.style.zIndex = '1';
+        list.style[legend.position === 'b' ? 'bottom' : 'top'] = '0';
+        list.style[legend.position === 'tr' || legend.position === 'r' ? 'right' : 'left'] = '0';
+        if (left)
+            list.style.height = '100%';
+        else
+            list.style.width = '100%';
+    }
+    // Prevent the surface's 100% basis from pushing a non-overlay legend outside
+    // the frame. Flex assigns only the remaining logical area to the plot.
+    surface.style.width = left ? '0' : '100%';
+    surface.style.height = left ? '100%' : '0';
+    surface.style.alignSelf = 'stretch';
+    if (legend === null || legend === void 0 ? void 0 : legend.overlay)
+        surface.style.width = surface.style.height = '100%';
+    layout.append(list, surface);
+    const xs = new Set(Object.values(((_a = chart.data) === null || _a === void 0 ? void 0 : _a.xs) || {}).map(String));
+    const entries = (((_b = chart.data) === null || _b === void 0 ? void 0 : _b.columns) || []).filter((column) => !xs.has(String(column[0])))
+        .map((column) => {
+        var _a, _b, _c;
+        const id = String(column[0]);
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.setAttribute('aria-pressed', 'true');
+        button.style.cssText = 'display:inline-flex;flex:0 0 auto;align-items:center;gap:4px;min-width:0;max-width:100%;border:0;padding:2px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer';
+        const swatch = document.createElement('span');
+        swatch.setAttribute('aria-hidden', 'true');
+        swatch.style.cssText = 'display:inline-block;flex:0 0 10px;width:10px;height:10px';
+        const text = document.createElement('span');
+        text.className = 'pptx-chart-legend-label';
+        text.style.cssText = 'min-width:0;overflow-wrap:anywhere';
+        text.textContent = String((_c = (_b = (_a = chart.data) === null || _a === void 0 ? void 0 : _a.names) === null || _b === void 0 ? void 0 : _b[id]) !== null && _c !== void 0 ? _c : id) || '\u200b';
+        button.append(swatch, text);
+        list.append(button);
+        return { id, button, swatch };
+    });
+    chart.legend = { ...chart.legend, show: false };
+    let observer;
+    let instance;
+    let width = 0, height = 0;
+    return {
+        size() {
+            return { width: surface.clientWidth, height: surface.clientHeight };
+        },
+        bind(api) {
+            var _a;
+            instance = api;
+            for (const { id, button, swatch } of entries) {
+                swatch.style.backgroundColor = ((_a = api.color) === null || _a === void 0 ? void 0 : _a.call(api, id)) || 'currentColor';
+                button.onclick = () => {
+                    var _a;
+                    (_a = api.toggle) === null || _a === void 0 ? void 0 : _a.call(api, id);
+                    const visible = button.getAttribute('aria-pressed') !== 'true';
+                    button.setAttribute('aria-pressed', String(visible));
+                    button.style.opacity = visible ? '1' : '.45';
+                };
+                button.onmouseenter = () => { var _a; return (_a = api.focus) === null || _a === void 0 ? void 0 : _a.call(api, id); };
+                button.onmouseleave = () => { var _a; return (_a = api.revert) === null || _a === void 0 ? void 0 : _a.call(api); };
+            }
+            if (view.ResizeObserver) {
+                observer = new view.ResizeObserver(([entry]) => {
+                    var _a;
+                    const { width: nextWidth, height: nextHeight } = entry.contentRect;
+                    if (nextWidth > 0 && nextHeight > 0 && (Math.abs(nextWidth - width) > .5 || Math.abs(nextHeight - height) > .5)) {
+                        width = nextWidth;
+                        height = nextHeight;
+                        (_a = instance === null || instance === void 0 ? void 0 : instance.resize) === null || _a === void 0 ? void 0 : _a.call(instance, { width, height });
+                    }
+                });
+                observer.observe(surface);
+            }
+        },
+        destroy() {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            instance = undefined;
+            for (const { button } of entries)
+                button.onclick = button.onmouseenter = button.onmouseleave = null;
+            layout.remove();
+        },
+    };
+};

package/dist/chart-text.d.ts

@@ -0,0 +1,19 @@
+import type { PptxChartFont, PptxChartModel } from './chart-types.js';
+export declare const mergePptxChartFonts: (...fonts: Array<PptxChartFont | undefined>) => PptxChartFont;
+/** CSSOM property assignment keeps document font names out of stylesheet source. */
+export declare const applyPptxChartFont: (style: CSSStyleDeclaration, font?: PptxChartFont) => void;
+/** Apply authored fonts before Billboard measures labels, including Shadow DOM. */
+export declare const stylePptxChartText: (surface: HTMLElement, model?: PptxChartModel, chart?: any, legendFont?: PptxChartFont) => HTMLStyleElement | undefined;
+/**
+ * Billboard's plugin hooks are per-chart. Its screen-space text rectangles and
+ * punctuation-normalized cache keys cannot represent DrawingML coordinates or
+ * distinct CJK labels. Measure fresh SVG glyph geometry in local coordinates.
+ */
+export declare const createPptxChartTextPlugin: (surface: HTMLElement) => {
+    $$: any;
+    $beforeInit(): void;
+    $init(): void;
+    $afterInit(): void;
+    $redraw(): void;
+    $willDestroy(): void;
+} | undefined;

package/dist/chart-text.js

@@ -0,0 +1,164 @@
+import { resolvePptxChartAxes } from './chart-config.js';
+export const mergePptxChartFonts = (...fonts) => Object.assign({}, ...fonts.map(font => Object.fromEntries(Object.entries(font || {}).filter(([, value]) => value !== undefined))));
+/** CSSOM property assignment keeps document font names out of stylesheet source. */
+export const applyPptxChartFont = (style, font) => {
+    if (!font)
+        return;
+    const families = [...new Set([font.family, font.eastAsianFamily, font.complexScriptFamily]
+            .filter((value) => typeof value === 'string' && !!value.trim())
+            .filter(value => !/^\+(?:mj|mn)-(?:lt|ea|cs)$/.test(value))
+            .map(value => /^(?:serif|sans-serif|monospace|cursive|fantasy|system-ui|ui-serif|ui-sans-serif|ui-monospace|ui-rounded|emoji|math|fangsong)$/i.test(value.trim())
+            ? value.trim().toLowerCase() : JSON.stringify(value.slice(0, 512))))];
+    if (families.length)
+        style.fontFamily = [...families, 'sans-serif'].join(',');
+    if (typeof font.sizePt === 'number' && Number.isFinite(font.sizePt) && font.sizePt > 0 && font.sizePt <= 4000) {
+        style.fontSize = `${font.sizePt * 96 / 72}px`;
+    }
+    if (font.bold !== undefined)
+        style.fontWeight = font.bold ? 'bold' : 'normal';
+    if (font.italic !== undefined)
+        style.fontStyle = font.italic ? 'italic' : 'normal';
+    if (typeof font.color === 'string' && /^(?:#[\da-f]{6}(?:[\da-f]{2})?|transparent)$/i.test(font.color)) {
+        style.color = font.color;
+        style.fill = font.color;
+    }
+};
+/** Apply authored fonts before Billboard measures labels, including Shadow DOM. */
+export const stylePptxChartText = (surface, model, chart, legendFont) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const view = (_a = surface.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+    if (!view || typeof surface.appendChild !== 'function')
+        return;
+    const scope = `chart-${Math.random().toString(36).slice(2)}`;
+    surface.dataset.pptxChartText = scope;
+    surface.classList.add('pptx-chart-typed');
+    const selector = `.pptx-chart-surface.pptx-chart-typed[data-pptx-chart-text="${scope}"]`;
+    const element = surface.ownerDocument.createElement('style');
+    element.dataset.pptxChartFonts = '';
+    // Billboard replaces the bind target's children during initialization.
+    // Keep scoped rules beside that target so they also apply during measurement.
+    (_b = surface.parentNode) === null || _b === void 0 ? void 0 : _b.appendChild(element);
+    const sheet = element.sheet;
+    if (!sheet)
+        return element;
+    const rule = (suffix, font) => {
+        if (!font || !Object.values(font).some(value => value !== undefined))
+            return;
+        const index = sheet.insertRule(suffix.split(',').map(value => `${selector} ${value.trim()}`).join(',') + '{}', sheet.cssRules.length);
+        applyPptxChartFont(sheet.cssRules[index].style, font);
+    };
+    rule('svg', model === null || model === void 0 ? void 0 : model.font);
+    rule('.bb-legend-item,.bb-legend-item text', mergePptxChartFonts(model === null || model === void 0 ? void 0 : model.font, legendFont));
+    if (!model)
+        return element;
+    const { category, primary, secondary } = resolvePptxChartAxes(model);
+    for (const [axis, font] of [['x', category === null || category === void 0 ? void 0 : category.font], ['y', primary === null || primary === void 0 ? void 0 : primary.font], ['y2', secondary === null || secondary === void 0 ? void 0 : secondary.font]]) {
+        rule(`.bb-axis-${axis},.bb-axis-${axis} text`, mergePptxChartFonts(model.font, font));
+    }
+    let column = 0;
+    const escape = (_c = view.CSS) === null || _c === void 0 ? void 0 : _c.escape;
+    if (!escape)
+        return element;
+    for (const group of model.groups)
+        for (let index = 0; index < group.series.length; index++, column++) {
+            const id = String((_g = (_f = (_e = (_d = chart === null || chart === void 0 ? void 0 : chart.data) === null || _d === void 0 ? void 0 : _d.columns) === null || _e === void 0 ? void 0 : _e[column]) === null || _f === void 0 ? void 0 : _f[0]) !== null && _g !== void 0 ? _g : '');
+            if (!id)
+                continue;
+            const labels = (_j = (_h = group.options.series) === null || _h === void 0 ? void 0 : _h[index]) === null || _j === void 0 ? void 0 : _j.labels;
+            const font = mergePptxChartFonts(model.font, (_k = group.options.labels) === null || _k === void 0 ? void 0 : _k.font, labels === null || labels === void 0 ? void 0 : labels.font);
+            const texts = `.bb-texts-${escape(id)}`;
+            rule(`${texts},${texts} text`, font);
+            const points = { ...(_l = group.options.labels) === null || _l === void 0 ? void 0 : _l.points, ...labels === null || labels === void 0 ? void 0 : labels.points };
+            for (const [position, point] of Object.entries(points)) {
+                if (!/^\d+$/.test(position) || !point.font)
+                    continue;
+                rule(`${texts} .bb-text-${escape(position)}`, mergePptxChartFonts(font, point.font));
+            }
+        }
+    return element;
+};
+/**
+ * Billboard's plugin hooks are per-chart. Its screen-space text rectangles and
+ * punctuation-normalized cache keys cannot represent DrawingML coordinates or
+ * distinct CJK labels. Measure fresh SVG glyph geometry in local coordinates.
+ */
+export const createPptxChartTextPlugin = (surface) => {
+    const document = surface.ownerDocument;
+    const view = document === null || document === void 0 ? void 0 : document.defaultView;
+    if (!view || typeof surface.appendChild !== 'function')
+        return undefined;
+    let original;
+    let wrapped;
+    let stopped = false;
+    let context;
+    const plugin = {
+        $$: undefined,
+        $beforeInit() {
+            const internal = this.$$;
+            if (typeof (internal === null || internal === void 0 ? void 0 : internal.getTextRect) !== 'function')
+                return;
+            original = internal.getTextRect;
+            wrapped = (source, className) => {
+                var _a, _b, _c, _d, _e;
+                const svg = ((_c = (_b = (_a = internal.$el) === null || _a === void 0 ? void 0 : _a.svg) === null || _b === void 0 ? void 0 : _b.node) === null || _c === void 0 ? void 0 : _c.call(_b)) || surface.querySelector('svg');
+                if (!svg)
+                    return original.call(internal, source, className);
+                let base = ((_d = source === null || source === void 0 ? void 0 : source.node) === null || _d === void 0 ? void 0 : _d.call(source)) || source;
+                if (!Array.isArray(source) && !/text/i.test((base === null || base === void 0 ? void 0 : base.tagName) || ''))
+                    base = (_e = base === null || base === void 0 ? void 0 : base.querySelector) === null || _e === void 0 ? void 0 : _e.call(base, 'text');
+                if (!Array.isArray(source) && !base)
+                    return original.call(internal, source, className);
+                const values = Array.isArray(source) ? source : [base.textContent || ''];
+                const rectangles = values.map((value) => {
+                    var _a;
+                    const text = String(value !== null && value !== void 0 ? value : '');
+                    const node = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                    if (className)
+                        node.setAttribute('class', className);
+                    node.style.visibility = 'hidden';
+                    if (base && !Array.isArray(source))
+                        node.style.font = view.getComputedStyle(base).font;
+                    node.textContent = text;
+                    svg.appendChild(node);
+                    try {
+                        const box = node.getBBox();
+                        if (box.height > 0 && (box.width > 0 || !text)) {
+                            return { x: box.x, y: box.y, left: box.x, top: box.y, right: box.x + box.width,
+                                bottom: box.y + box.height, width: box.width, height: box.height };
+                        }
+                        // Hidden slides still need logical font metrics before they become visible.
+                        const style = view.getComputedStyle(node);
+                        context !== null && context !== void 0 ? context : (context = document.createElement('canvas').getContext('2d'));
+                        const size = Number.parseFloat(style.fontSize) || 10;
+                        if (context)
+                            context.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+                        const metrics = context === null || context === void 0 ? void 0 : context.measureText(text);
+                        const width = (_a = metrics === null || metrics === void 0 ? void 0 : metrics.width) !== null && _a !== void 0 ? _a : 0;
+                        const height = ((metrics === null || metrics === void 0 ? void 0 : metrics.fontBoundingBoxAscent) || 0) + ((metrics === null || metrics === void 0 ? void 0 : metrics.fontBoundingBoxDescent) || 0) || size * 1.2;
+                        return { x: 0, y: 0, left: 0, top: 0, right: width, bottom: height, width, height };
+                    }
+                    finally {
+                        node.remove();
+                    }
+                });
+                return rectangles.length > 1 ? rectangles : rectangles[0];
+            };
+            internal.getTextRect = wrapped;
+        },
+        $init() { },
+        $afterInit() { var _a; (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.addEventListener('loadingdone', refresh); },
+        $redraw() { },
+        $willDestroy() {
+            var _a, _b;
+            stopped = true;
+            (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadingdone', refresh);
+            if (((_b = this.$$) === null || _b === void 0 ? void 0 : _b.getTextRect) === wrapped)
+                this.$$.getTextRect = original;
+            original = wrapped = context = undefined;
+            this.$$ = undefined;
+        },
+    };
+    const refresh = () => { var _a, _b, _c; if (!stopped)
+        (_c = (_b = (_a = plugin.$$) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.flush) === null || _c === void 0 ? void 0 : _c.call(_b); };
+    return plugin;
+};

package/dist/chart-types.d.ts

@@ -1,5 +1,16 @@
+/** Serializable DrawingML metadata carried by the actual PPTX Worker. */
 export type PptxChartType = 'lineChart' | 'barChart' | 'areaChart' | 'scatterChart' | 'pieChart' | 'pie3DChart' | 'doughnutChart';
+export interface PptxChartFont {
+    family?: string;
+    eastAsianFamily?: string;
+    complexScriptFamily?: string;
+    sizePt?: number;
+    bold?: boolean;
+    italic?: boolean;
+    color?: string;
+}
 export interface PptxChartLabels {
+    font?: PptxChartFont;
     showValue?: boolean;
     showCategory?: boolean;
     showSeries?: boolean;
@@ -19,6 +30,8 @@ export interface PptxChartOptions {
     legend?: {
         show?: boolean;
         position?: string;
+        overlay?: boolean;
+        font?: PptxChartFont;
     };
     labels?: PptxChartLabels;
     series?: Array<{
@@ -34,6 +47,7 @@ export interface PptxChartSeries {
         y: number | null;
     }>;
     xlabels: Record<string, string | number>;
+    /** Original indexed hierarchy, from innermost to outermost category level. */
     categoryLevels?: Array<Record<string, string>>;
 }
 export interface PptxChartAxis {
@@ -54,10 +68,8 @@ export interface PptxChartAxis {
     };
     title?: string;
     majorGridlines: boolean;
-    font?: {
-        family?: string;
-        sizePt?: number;
-    };
+    labelRotation?: number;
+    font?: PptxChartFont;
 }
 export interface PptxChartGroup {
     chartType: PptxChartType;
@@ -71,10 +83,7 @@ export interface PptxChartModel {
     groups: PptxChartGroup[];
     axes: PptxChartAxis[];
     title?: string;
-    font?: {
-        family?: string;
-        sizePt?: number;
-    };
+    font?: PptxChartFont;
 }
 export interface PptxChartMessage {
     type?: string;

package/dist/chart.d.ts

@@ -1,14 +1,16 @@
-import type { PptxChartRenderer } from "./chart-types.js";
+import type { PptxChartRenderer } from './chart-types.js';
 export type PptxChartLibraries = {
     billboard: any;
     d3Format: typeof import('d3-format');
 };
 export type PptxChartLibraryLoader = () => Promise<PptxChartLibraries>;
+/** Register a renderer receiving the preserved Worker model, without reopening the ZIP. */
 export declare const registerPptxChartRenderer: (renderer: PptxChartRenderer | null) => void;
 export declare const registerPptxChartLibraryLoader: (loader: PptxChartLibraryLoader | null) => void;
 export type PptxPostProcessingHandle = {
     destroy: () => void;
 };
 export declare const findPptxChartTarget: (root: ParentNode, chartID: string) => HTMLElement | null;
+/** DrawingML numbering, including the authored suffix punctuation. */
 export declare const getNumericBulletText: (type: string, index: number) => string;
 export declare const renderPptxPostProcessing: (charts: unknown, root: ParentNode) => Promise<PptxPostProcessingHandle>;