@file-viewer/core 2.0.0 → 2.0.2

package/dist/renderers/spreadsheet.js

@@ -1,7 +1,7 @@
-import { resolveFileViewerSpreadsheetWorkerUrl } from '../assets.js';
-import { registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '../documentDom.js';
-import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter } from '../documentZoom.js';
-import { createFileViewerWorkerController, } from '../worker.js';
+import { resolveFileViewerSpreadsheetWorkerUrl } from '../platform/assets.js';
+import { registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '../features/document/dom';
+import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter } from '../features/document/zoom.js';
+import { createFileViewerWorkerController, } from '../platform/worker.js';
 import { buildRows, clampWindowStart, collectWindowStarts, createEmptyVirtualState, DEFAULT_SHEET_DEFAULTS, displayCellKey, getDataKey, markWindowState, ROW_STATE_FIELD, RowState, WINDOW_SIZE, } from './spreadsheet/state.js';
 import { buildColumns, createTableConfig, detectIndexOffset, getDisplayColumns, getRowHeight, HEADER_HEIGHT, INDEX_COLUMN_WIDTH, normalizeCellStyle, normalizeRowHeight, } from './spreadsheet/view.js';
 const spreadsheetStyle = `

package/dist/renderers/typst.d.ts

@@ -1,4 +1,4 @@
-import type { FileRenderContext, FileViewerRenderedInstance } from '../types';
+import type { FileRenderContext, FileViewerRenderedInstance } from '../contracts/types';
 declare global {
     interface Window {
         __FLYFISH_TYPST_COMPILER_WASM_URL__?: string;

package/dist/renderers/typst.js

@@ -1,9 +1,9 @@
 import { $typst } from '@myriaddreamin/typst.ts';
-import { resolveFileViewerTypstCompilerWasmUrl, resolveFileViewerTypstRendererWasmUrl, } from '../assets.js';
-import { registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '../documentDom.js';
-import { createFileViewerZoomChangeEmitter } from '../documentZoom.js';
-import { formatCssPixels } from '../printLayout.js';
-import { readFileViewerText } from '../source.js';
+import { resolveFileViewerTypstCompilerWasmUrl, resolveFileViewerTypstRendererWasmUrl, } from '../platform/assets.js';
+import { registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '../features/document/dom';
+import { createFileViewerZoomChangeEmitter } from '../features/document/zoom.js';
+import { formatCssPixels } from '../output/printLayout.js';
+import { readFileViewerText } from '../source';
 const typstStyle = `
 .typst-viewer{min-height:100%;overflow:auto;background:#eef1f4;color:#172033}
 .typst-toolbar{position:sticky;top:0;z-index:2;display:flex;min-height:52px;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px;border-bottom:1px solid rgba(120,134,155,.18);background:rgba(248,250,252,.92);backdrop-filter:blur(16px)}

package/dist/renderers/umd.d.ts

@@ -1,2 +1,2 @@
-import type { FileViewerRenderedInstance } from '../types';
+import type { FileViewerRenderedInstance } from '../contracts/types';
 export default function renderUmd(buffer: ArrayBuffer, target: HTMLDivElement): Promise<FileViewerRenderedInstance>;

package/dist/renderers/video.d.ts

@@ -1,4 +1,4 @@
-import type { FileRenderContext, FileViewerRenderedInstance } from '../types';
+import type { FileRenderContext, FileViewerRenderedInstance } from '../contracts/types';
 /**
  * Pure TypeScript video renderer.
  *

package/dist/renderers/wordDoc.d.ts

@@ -1,4 +1,4 @@
-import type { FileRenderContext, FileViewerRenderedInstance as AppWrapper } from '../types';
+import type { FileRenderContext, FileViewerRenderedInstance as AppWrapper } from '../contracts/types';
 /**
  * 渲染 doc 文件
  */

package/dist/renderers/wordDoc.js

@@ -1,7 +1,7 @@
 import { defaultMsDocCss, parseMsDocToHtml } from 'msdoc-viewer';
-import { applyPrintPageSize, buildPrintPageStyle, formatCssPixels } from '../printLayout.js';
-import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, } from '../documentZoom.js';
-import { registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '../documentDom.js';
+import { applyPrintPageSize, buildPrintPageStyle, formatCssPixels } from '../output/printLayout.js';
+import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, } from '../features/document/zoom.js';
+import { registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '../features/document/dom';
 const PAGE_BREAK_MARKER = '<span class="msdoc-page-break"></span>';
 const EMPTY_PAGE_HTML = '<p class="msdoc-paragraph"><br></p>';
 const MSDOC_PAGE_SIZE = {

package/dist/renderers/wordDocx.d.ts

@@ -1,4 +1,4 @@
-import type { FileRenderContext, FileViewerRenderedInstance as AppWrapper } from '../types';
+import type { FileRenderContext, FileViewerRenderedInstance as AppWrapper } from '../contracts/types';
 /**
  * 渲染docx文件
  */

package/dist/renderers/wordDocx.js

@@ -1,7 +1,7 @@
-import { resolveFileViewerDocxWorkerUrl } from '../assets.js';
-import { applyPrintPageSize, buildPrintPageStyle, formatCssPixels, getElementPrintPageSize } from '../printLayout.js';
-import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, } from '../documentZoom.js';
-import { registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '../documentDom.js';
+import { resolveFileViewerDocxWorkerUrl } from '../platform/assets.js';
+import { applyPrintPageSize, buildPrintPageStyle, formatCssPixels, getElementPrintPageSize } from '../output/printLayout.js';
+import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, } from '../features/document/zoom.js';
+import { registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '../features/document/dom';
 const DOCX_DEFAULT_PAGE_SIZE = {
     width: 794,
     height: 1123
@@ -11,6 +11,7 @@ const DOCX_WORKER_TIMEOUT = 15000;
 const DOCX_MIN_SCALE = 0.24;
 const DOCX_MAX_SCALE = 3;
 const DOCX_ZOOM_STEP = 0.15;
+const DOCX_EMU_PER_CSS_PIXEL = 9525;
 let docxWorkerRequestId = 0;
 const loadLibrary = (() => {
     const loader = {
@@ -237,7 +238,558 @@ const DOCX_RESPONSIVE_CSS = `
   overflow: hidden;
   transform-origin: top center;
 }
+.docx-fit-viewer .docx-page-frame > section.docx > article {
+  position: relative;
+  z-index: 1;
+}
+.docx-fit-viewer .docx-vml-watermark {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.28;
+  filter: saturate(0.72) brightness(1.24);
+  pointer-events: none;
+  user-select: none;
+}
+.docx-fit-viewer .docx-vml-fallback,
+.docx-fit-viewer .docx-chart-fallback {
+  display: block;
+  max-width: 100%;
+  margin: 12px auto;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+.docx-fit-viewer .docx-vml-fallback {
+  text-align: center;
+}
+.docx-fit-viewer .docx-vml-fallback img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+.docx-fit-viewer .docx-chart-fallback {
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid #d7dee8;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08);
+}
+.docx-fit-viewer .docx-chart-fallback svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
 `;
+function getXmlLocalName(node) {
+    return node.localName || node.tagName.split(':').pop() || node.tagName;
+}
+function getXmlElements(root, localName) {
+    return Array.from(root.querySelectorAll('*')).filter(element => getXmlLocalName(element) === localName);
+}
+function getFirstXmlElement(root, localName) {
+    return getXmlElements(root, localName)[0];
+}
+function getXmlAttribute(element, name, namespace) {
+    return (namespace ? element.getAttributeNS(namespace, name) : null)
+        || element.getAttribute(name)
+        || element.getAttribute(`r:${name}`);
+}
+function getXmlText(element) {
+    if (!element) {
+        return '';
+    }
+    return (element.textContent || '').replace(/\s+/g, ' ').trim();
+}
+function getXmlAncestor(element, localName) {
+    let current = (element === null || element === void 0 ? void 0 : element.parentElement) || null;
+    while (current) {
+        if (getXmlLocalName(current) === localName) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+function getParagraphIndex(element) {
+    const paragraph = getXmlLocalName(element) === 'p' ? element : getXmlAncestor(element, 'p');
+    if (!paragraph) {
+        return undefined;
+    }
+    let index = 0;
+    let sibling = paragraph.previousElementSibling;
+    while (sibling) {
+        if (getXmlLocalName(sibling) === 'p') {
+            index += 1;
+        }
+        sibling = sibling.previousElementSibling;
+    }
+    return index;
+}
+function parseXml(xml, target) {
+    var _a;
+    const Parser = ((_a = getTargetWindow(target)) === null || _a === void 0 ? void 0 : _a.DOMParser) || globalThis.DOMParser;
+    if (!Parser) {
+        return null;
+    }
+    const doc = new Parser().parseFromString(xml, 'application/xml');
+    if (doc.querySelector('parsererror')) {
+        return null;
+    }
+    return doc;
+}
+function normalizeZipPath(path) {
+    const segments = [];
+    path.split('/').forEach(segment => {
+        if (!segment || segment === '.') {
+            return;
+        }
+        if (segment === '..') {
+            segments.pop();
+            return;
+        }
+        segments.push(segment);
+    });
+    return segments.join('/');
+}
+function getDirectoryName(path) {
+    const index = path.lastIndexOf('/');
+    return index >= 0 ? path.slice(0, index) : '';
+}
+function getRelationshipPath(partPath) {
+    const directory = getDirectoryName(partPath);
+    const name = partPath.slice(directory ? directory.length + 1 : 0);
+    return normalizeZipPath(`${directory}/_rels/${name}.rels`);
+}
+function resolveRelationshipTarget(partPath, target) {
+    if (target.startsWith('/')) {
+        return normalizeZipPath(target.slice(1));
+    }
+    return normalizeZipPath(`${getDirectoryName(partPath)}/${target}`);
+}
+function getMimeType(path) {
+    var _a;
+    const extension = (_a = path.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    switch (extension) {
+        case 'png':
+            return 'image/png';
+        case 'jpg':
+        case 'jpeg':
+            return 'image/jpeg';
+        case 'gif':
+            return 'image/gif';
+        case 'bmp':
+            return 'image/bmp';
+        case 'webp':
+            return 'image/webp';
+        case 'svg':
+            return 'image/svg+xml';
+        default:
+            return 'application/octet-stream';
+    }
+}
+function parseCssLengthToPixels(value) {
+    if (!value) {
+        return undefined;
+    }
+    const match = value.trim().match(/^(-?\d+(?:\.\d+)?)(px|pt|in|cm|mm)?$/i);
+    if (!match) {
+        return undefined;
+    }
+    const amount = Number(match[1]);
+    if (!Number.isFinite(amount) || amount <= 0) {
+        return undefined;
+    }
+    const unit = (match[2] || 'px').toLowerCase();
+    switch (unit) {
+        case 'pt':
+            return amount * 96 / 72;
+        case 'in':
+            return amount * 96;
+        case 'cm':
+            return amount * 96 / 2.54;
+        case 'mm':
+            return amount * 96 / 25.4;
+        default:
+            return amount;
+    }
+}
+function parseStyleDeclaration(style) {
+    const declarations = new Map();
+    if (!style) {
+        return declarations;
+    }
+    style.split(';').forEach(declaration => {
+        const separator = declaration.indexOf(':');
+        if (separator <= 0) {
+            return;
+        }
+        declarations.set(declaration.slice(0, separator).trim().toLowerCase(), declaration.slice(separator + 1).trim());
+    });
+    return declarations;
+}
+function parseShapeSize(style) {
+    const declarations = parseStyleDeclaration(style);
+    return {
+        width: parseCssLengthToPixels(declarations.get('width')),
+        height: parseCssLengthToPixels(declarations.get('height'))
+    };
+}
+function getExtentSize(element) {
+    const inline = getXmlAncestor(element, 'inline') || getXmlAncestor(element, 'anchor');
+    const extent = inline ? getFirstXmlElement(inline, 'extent') : undefined;
+    const width = Number(extent === null || extent === void 0 ? void 0 : extent.getAttribute('cx'));
+    const height = Number(extent === null || extent === void 0 ? void 0 : extent.getAttribute('cy'));
+    return {
+        width: Number.isFinite(width) && width > 0 ? width / DOCX_EMU_PER_CSS_PIXEL : undefined,
+        height: Number.isFinite(height) && height > 0 ? height / DOCX_EMU_PER_CSS_PIXEL : undefined
+    };
+}
+async function readDocxRelationships(zip, partPath, target) {
+    const relFile = zip.file(getRelationshipPath(partPath));
+    const relationships = new Map();
+    if (!relFile) {
+        return relationships;
+    }
+    const relDoc = parseXml(await relFile.async('text'), target);
+    if (!relDoc) {
+        return relationships;
+    }
+    getXmlElements(relDoc, 'Relationship').forEach(element => {
+        const id = element.getAttribute('Id');
+        const relationshipTarget = element.getAttribute('Target');
+        if (!id || !relationshipTarget) {
+            return;
+        }
+        relationships.set(id, {
+            id,
+            type: element.getAttribute('Type') || '',
+            target: relationshipTarget,
+            targetMode: element.getAttribute('TargetMode') || undefined
+        });
+    });
+    return relationships;
+}
+async function getDataUrlFromZip(zip, sourcePath) {
+    const file = zip.file(sourcePath);
+    if (!file) {
+        return undefined;
+    }
+    const base64 = await file.async('base64');
+    return `data:${getMimeType(sourcePath)};base64,${base64}`;
+}
+function getDocxPartPaths(zip) {
+    return Object.keys(zip.files)
+        .filter(path => path === 'word/document.xml'
+        || /^word\/header\d+\.xml$/i.test(path)
+        || /^word\/footer\d+\.xml$/i.test(path))
+        .sort((left, right) => {
+        if (left === 'word/document.xml') {
+            return -1;
+        }
+        if (right === 'word/document.xml') {
+            return 1;
+        }
+        return left.localeCompare(right);
+    });
+}
+function inferVmlFallbackRole(partPath, shape, style) {
+    const shapeId = `${(shape === null || shape === void 0 ? void 0 : shape.getAttribute('id')) || ''} ${(shape === null || shape === void 0 ? void 0 : shape.getAttribute('o:spid')) || ''}`.toLowerCase();
+    const normalizedStyle = (style || '').toLowerCase();
+    if (partPath.includes('/header')
+        && (shapeId.includes('watermark') || normalizedStyle.includes('z-index:-') || normalizedStyle.includes('mso-position-horizontal:center'))) {
+        return 'watermark';
+    }
+    if ((shape === null || shape === void 0 ? void 0 : shape.getAttribute('o:ole')) === 't' || (shape === null || shape === void 0 ? void 0 : shape.getAttribute('ole')) === 't') {
+        return 'ole-preview';
+    }
+    return 'vml-image';
+}
+async function collectDocxVmlFallbacks(zip, target) {
+    var _a;
+    const fallbacks = [];
+    const seen = new Set();
+    for (const partPath of getDocxPartPaths(zip)) {
+        const partFile = zip.file(partPath);
+        if (!partFile) {
+            continue;
+        }
+        const doc = parseXml(await partFile.async('text'), target);
+        if (!doc) {
+            continue;
+        }
+        const relationships = await readDocxRelationships(zip, partPath, target);
+        for (const imagedata of getXmlElements(doc, 'imagedata')) {
+            const relationshipId = getXmlAttribute(imagedata, 'id', 'http://schemas.openxmlformats.org/officeDocument/2006/relationships');
+            const relationship = relationshipId ? relationships.get(relationshipId) : undefined;
+            if (!relationship || relationship.targetMode === 'External' || !relationship.type.includes('/image')) {
+                continue;
+            }
+            const sourcePath = resolveRelationshipTarget(partPath, relationship.target);
+            const dataUrl = await getDataUrlFromZip(zip, sourcePath);
+            if (!dataUrl) {
+                continue;
+            }
+            const shape = getXmlAncestor(imagedata, 'shape');
+            const style = (shape === null || shape === void 0 ? void 0 : shape.getAttribute('style')) || undefined;
+            const role = inferVmlFallbackRole(partPath, shape, style);
+            const key = role === 'watermark'
+                ? `${role}:${sourcePath}`
+                : `${role}:${partPath}:${sourcePath}:${(_a = getParagraphIndex(imagedata)) !== null && _a !== void 0 ? _a : 'end'}`;
+            if (seen.has(key)) {
+                continue;
+            }
+            seen.add(key);
+            fallbacks.push({
+                role,
+                key,
+                dataUrl,
+                sourcePath,
+                partPath,
+                title: imagedata.getAttribute('o:title') || imagedata.getAttribute('title') || undefined,
+                style,
+                ...parseShapeSize(style),
+                paragraphIndex: partPath === 'word/document.xml' ? getParagraphIndex(imagedata) : undefined
+            });
+        }
+    }
+    return fallbacks;
+}
+function parseCacheValues(element) {
+    if (!element) {
+        return [];
+    }
+    return getXmlElements(element, 'pt')
+        .sort((left, right) => Number(left.getAttribute('idx') || 0) - Number(right.getAttribute('idx') || 0))
+        .map(point => getXmlText(getFirstXmlElement(point, 'v')))
+        .filter(Boolean);
+}
+function parseChartSeries(series) {
+    const name = parseCacheValues(getFirstXmlElement(getFirstXmlElement(series, 'tx') || series, 'strCache'))[0]
+        || parseCacheValues(getFirstXmlElement(getFirstXmlElement(series, 'tx') || series, 'numCache'))[0]
+        || 'Series';
+    const categories = parseCacheValues(getFirstXmlElement(getFirstXmlElement(series, 'cat') || series, 'strCache'));
+    const numericCategories = parseCacheValues(getFirstXmlElement(getFirstXmlElement(series, 'cat') || series, 'numCache'));
+    const values = parseCacheValues(getFirstXmlElement(getFirstXmlElement(series, 'val') || series, 'numCache'))
+        .map(value => Number(value))
+        .filter(value => Number.isFinite(value));
+    return {
+        name,
+        categories: categories.length ? categories : numericCategories,
+        values
+    };
+}
+function parseChartFallback(chartDoc, sourcePath, chartElement, paragraphIndex) {
+    const chartTypeElement = ['lineChart', 'barChart', 'pieChart', 'areaChart', 'scatterChart']
+        .map(type => getXmlElements(chartDoc, type)[0])
+        .find(Boolean);
+    const chartType = chartTypeElement ? getXmlLocalName(chartTypeElement) : 'chart';
+    const title = getXmlText(getFirstXmlElement(getFirstXmlElement(chartDoc, 'title') || chartDoc, 't'))
+        || sourcePath.split('/').pop() || 'Chart';
+    const series = (chartTypeElement ? getXmlElements(chartTypeElement, 'ser') : getXmlElements(chartDoc, 'ser'))
+        .map(parseChartSeries)
+        .filter(item => item.values.length);
+    const { width, height } = getExtentSize(chartElement);
+    if (!series.length) {
+        return undefined;
+    }
+    return {
+        key: `chart:${sourcePath}:${paragraphIndex !== null && paragraphIndex !== void 0 ? paragraphIndex : 'end'}`,
+        title,
+        type: chartType,
+        sourcePath,
+        series,
+        width,
+        height,
+        paragraphIndex
+    };
+}
+async function collectDocxChartFallbacks(zip, target) {
+    const partPath = 'word/document.xml';
+    const documentFile = zip.file(partPath);
+    if (!documentFile) {
+        return [];
+    }
+    const documentDoc = parseXml(await documentFile.async('text'), target);
+    if (!documentDoc) {
+        return [];
+    }
+    const relationships = await readDocxRelationships(zip, partPath, target);
+    const fallbacks = [];
+    const seen = new Set();
+    for (const chart of getXmlElements(documentDoc, 'chart')) {
+        const relationshipId = getXmlAttribute(chart, 'id', 'http://schemas.openxmlformats.org/officeDocument/2006/relationships');
+        const relationship = relationshipId ? relationships.get(relationshipId) : undefined;
+        if (!relationship || relationship.targetMode === 'External' || !relationship.type.includes('/chart')) {
+            continue;
+        }
+        const sourcePath = resolveRelationshipTarget(partPath, relationship.target);
+        const chartFile = zip.file(sourcePath);
+        if (!chartFile) {
+            continue;
+        }
+        const chartDoc = parseXml(await chartFile.async('text'), target);
+        const paragraphIndex = getParagraphIndex(chart);
+        const fallback = chartDoc ? parseChartFallback(chartDoc, sourcePath, chart, paragraphIndex) : undefined;
+        if (!fallback || seen.has(fallback.key)) {
+            continue;
+        }
+        seen.add(fallback.key);
+        fallbacks.push(fallback);
+    }
+    return fallbacks;
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+function buildChartSvg(chart) {
+    var _a;
+    const width = Math.max(360, Math.round(chart.width || 520));
+    const height = Math.max(220, Math.round(chart.height || 320));
+    const padding = { top: 52, right: 30, bottom: 56, left: 54 };
+    const plotWidth = width - padding.left - padding.right;
+    const plotHeight = height - padding.top - padding.bottom;
+    const allValues = chart.series.flatMap(item => item.values);
+    const maxValue = Math.max(...allValues, 1);
+    const minValue = Math.min(...allValues, 0);
+    const valueSpan = Math.max(maxValue - minValue, 1);
+    const colors = ['#2563eb', '#10b981', '#f97316', '#8b5cf6', '#ef4444'];
+    const maxPoints = Math.max(...chart.series.map(item => item.values.length), 1);
+    const pointX = (index) => padding.left + (maxPoints === 1 ? plotWidth / 2 : index * plotWidth / (maxPoints - 1));
+    const pointY = (value) => padding.top + plotHeight - ((value - minValue) / valueSpan) * plotHeight;
+    const seriesPaths = chart.series.map((series, seriesIndex) => {
+        const color = colors[seriesIndex % colors.length];
+        const points = series.values.map((value, index) => `${pointX(index).toFixed(1)},${pointY(value).toFixed(1)}`).join(' ');
+        const circles = series.values.map((value, index) => {
+            const x = pointX(index).toFixed(1);
+            const y = pointY(value).toFixed(1);
+            return `<circle cx="${x}" cy="${y}" r="3.5" fill="${color}"><title>${escapeHtml(series.name)}: ${escapeHtml(String(value))}</title></circle>`;
+        }).join('');
+        return `<polyline points="${points}" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>${circles}`;
+    }).join('');
+    const categories = ((_a = chart.series.find(item => item.categories.length)) === null || _a === void 0 ? void 0 : _a.categories) || [];
+    const labels = categories.slice(0, maxPoints).map((label, index) => {
+        const x = pointX(index);
+        const shown = label.length > 14 ? `${label.slice(0, 13)}...` : label;
+        return `<text x="${x.toFixed(1)}" y="${height - 22}" text-anchor="middle" fill="#64748b" font-size="11">${escapeHtml(shown)}</text>`;
+    }).join('');
+    const legend = chart.series.slice(0, 5).map((series, index) => {
+        const x = padding.left + index * 98;
+        const y = 30;
+        const color = colors[index % colors.length];
+        return `<g transform="translate(${x} ${y})"><rect width="10" height="10" rx="2" fill="${color}"/><text x="15" y="9" fill="#475569" font-size="11">${escapeHtml(series.name)}</text></g>`;
+    }).join('');
+    return `<svg viewBox="0 0 ${width} ${height}" role="img" aria-label="${escapeHtml(chart.title)}">
+    <rect x="0" y="0" width="${width}" height="${height}" rx="8" fill="#ffffff"/>
+    <text x="${padding.left}" y="22" fill="#0f172a" font-size="15" font-weight="700">${escapeHtml(chart.title)}</text>
+    ${legend}
+    <line x1="${padding.left}" y1="${padding.top + plotHeight}" x2="${padding.left + plotWidth}" y2="${padding.top + plotHeight}" stroke="#cbd5e1"/>
+    <line x1="${padding.left}" y1="${padding.top}" x2="${padding.left}" y2="${padding.top + plotHeight}" stroke="#cbd5e1"/>
+    <text x="${padding.left - 8}" y="${padding.top + 4}" text-anchor="end" fill="#64748b" font-size="11">${escapeHtml(maxValue.toFixed(1))}</text>
+    <text x="${padding.left - 8}" y="${padding.top + plotHeight}" text-anchor="end" fill="#64748b" font-size="11">${escapeHtml(minValue.toFixed(1))}</text>
+    ${seriesPaths}
+    ${labels}
+  </svg>`;
+}
+function getDocxSections(target) {
+    return Array.from(target.querySelectorAll('section.docx'));
+}
+function getDocxArticles(target) {
+    return Array.from(target.querySelectorAll('section.docx > article'));
+}
+function getDocxParagraphAnchor(target, paragraphIndex) {
+    if (paragraphIndex === undefined) {
+        return undefined;
+    }
+    const paragraphs = Array.from(target.querySelectorAll('section.docx > article p'));
+    return paragraphs[Math.min(Math.max(paragraphIndex, 0), Math.max(paragraphs.length - 1, 0))];
+}
+function insertDocxFallback(target, node, paragraphIndex) {
+    const anchor = getDocxParagraphAnchor(target, paragraphIndex);
+    if (anchor) {
+        anchor.after(node);
+        return;
+    }
+    const article = getDocxArticles(target)[0];
+    if (article) {
+        article.appendChild(node);
+    }
+}
+function injectDocxImageFallbacks(target, fallbacks) {
+    const sections = getDocxSections(target);
+    if (!sections.length) {
+        return;
+    }
+    fallbacks.forEach(fallback => {
+        if (fallback.role === 'watermark') {
+            sections.forEach(section => {
+                const image = target.ownerDocument.createElement('img');
+                image.className = 'docx-vml-watermark';
+                image.src = fallback.dataUrl;
+                image.alt = fallback.title || '';
+                image.dataset.docxFallback = fallback.key;
+                section.prepend(image);
+            });
+            return;
+        }
+        const figure = target.ownerDocument.createElement('figure');
+        figure.className = 'docx-vml-fallback';
+        figure.dataset.docxFallback = fallback.key;
+        if (fallback.width) {
+            figure.style.width = `${Math.round(fallback.width)}px`;
+        }
+        const image = target.ownerDocument.createElement('img');
+        image.src = fallback.dataUrl;
+        image.alt = fallback.title || (fallback.role === 'ole-preview' ? 'Embedded object preview' : 'Document image');
+        if (fallback.width) {
+            image.style.width = `${Math.round(fallback.width)}px`;
+        }
+        if (fallback.height) {
+            image.style.height = `${Math.round(fallback.height)}px`;
+        }
+        figure.appendChild(image);
+        insertDocxFallback(target, figure, fallback.paragraphIndex);
+    });
+}
+function injectDocxChartFallbacks(target, fallbacks) {
+    fallbacks.forEach(fallback => {
+        const figure = target.ownerDocument.createElement('figure');
+        figure.className = 'docx-chart-fallback';
+        figure.dataset.docxFallback = fallback.key;
+        if (fallback.width) {
+            figure.style.width = `${Math.round(fallback.width)}px`;
+        }
+        figure.innerHTML = buildChartSvg(fallback);
+        insertDocxFallback(target, figure, fallback.paragraphIndex);
+    });
+}
+async function enhanceDocxFallbacks(buffer, target) {
+    try {
+        const { default: JSZip } = await import('jszip');
+        const zip = await JSZip.loadAsync(buffer.slice(0));
+        const [imageFallbacks, chartFallbacks] = await Promise.all([
+            collectDocxVmlFallbacks(zip, target),
+            collectDocxChartFallbacks(zip, target)
+        ]);
+        if (imageFallbacks.length) {
+            injectDocxImageFallbacks(target, imageFallbacks);
+        }
+        if (chartFallbacks.length) {
+            injectDocxChartFallbacks(target, chartFallbacks);
+        }
+    }
+    catch (error) {
+        console.warn('[file-viewer] DOCX 兼容增强解析失败，已保留 docx-preview 原始渲染结果。', error);
+    }
+}
 function installResponsiveStyle(target) {
     const style = target.ownerDocument.createElement('style');
     style.textContent = DOCX_RESPONSIVE_CSS;
@@ -476,6 +1028,7 @@ export default async function (buffer, target, context) {
             ...docxOptions
         });
     }
+    await enhanceDocxFallbacks(buffer, target);
     const disposeResponsive = makeDocxResponsive(target, context);
     (_a = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _a === void 0 ? void 0 : _a.call(context, {
         includeDocumentStyles: false,

package/dist/{rendererDispatcher.d.ts → rendering/dispatcher.d.ts}

@@ -1,4 +1,4 @@
-import type { RendererRegistry } from './types';
+import type { RendererRegistry } from '../contracts/types';
 export interface FileViewerRendererHandlerEntry<Handler> {
     rendererId: string;
     handler: Handler;

package/dist/{rendererDispatcher.js → rendering/dispatcher.js}

@@ -1,6 +1,6 @@
-import { DEFAULT_RENDERER_DEFINITIONS } from './formats.js';
-import { createRendererRegistry } from './registry.js';
-import { normalizeFileExtension } from './source.js';
+import { DEFAULT_RENDERER_DEFINITIONS } from '../registry/formats.js';
+import { createRendererRegistry } from '../registry/registry.js';
+import { normalizeFileExtension } from '../source';
 export const createFileViewerRendererDispatcher = ({ registry = createRendererRegistry(DEFAULT_RENDERER_DEFINITIONS), handlers, fallbackHandler, fallbackKey = 'error', }) => {
     const handlersByRendererId = Array.from(handlers).reduce((result, entry) => {
         result.set(entry.rendererId, entry.handler);