@open-file-viewer/core 0.1.15 → 0.1.16

package/dist/index.js

@@ -1877,12 +1877,12 @@ function imagePlugin() {
       let url = "";
       let convertedBlob = null;
       let isExternal = Boolean(ctx.file.url);
-      let canvasSource = null;
+      let tiffSource = null;
       if (isTiff) {
         ctx.setLoading(true);
         try {
           const bytes = await sourceBytesPromise;
-          canvasSource = await createTiffCanvas(bytes);
+          tiffSource = await createTiffPreview(bytes, ctx.file.name);
         } catch (err) {
           console.error("TIFF image conversion failed:", err);
           url = createObjectUrl(ctx.file);
@@ -1942,12 +1942,15 @@ function imagePlugin() {
       if (url) {
         image.src = url;
       }
-      const visual = canvasSource || image;
-      if (canvasSource) {
-        canvasSource.classList.add("ofv-media", "ofv-image-content", "ofv-tiff-canvas");
-        canvasSource.setAttribute("role", "img");
-        canvasSource.setAttribute("aria-label", ctx.file.name);
+      const visual = tiffSource || image;
+      if (tiffSource) {
+        tiffSource.classList.add("ofv-image-content");
+        if (tiffSource.classList.contains("ofv-tiff-pages")) {
+          stage.classList.add("ofv-image-stage-pages");
+        }
       }
+      const visualBox = document.createElement("div");
+      visualBox.className = "ofv-image-scrollbox";
       let scale = getInitialZoom(ctx);
       let rotation = 0;
       let offsetX = 0;
@@ -1961,7 +1964,23 @@ function imagePlugin() {
       let previewAvailable = true;
       const zoomLabel = document.createElement("span");
       zoomLabel.className = "ofv-image-zoom";
+      const updateScrollBox = () => {
+        if (visual.classList.contains("ofv-tiff-pages")) {
+          visualBox.style.removeProperty("width");
+          visualBox.style.removeProperty("height");
+          return;
+        }
+        const baseWidth = visual.offsetWidth || visual.getBoundingClientRect().width || visual.naturalWidth || 0;
+        const baseHeight = visual.offsetHeight || visual.getBoundingClientRect().height || visual.naturalHeight || 0;
+        if (baseWidth > 0) {
+          visualBox.style.width = `${Math.ceil(baseWidth * scale)}px`;
+        }
+        if (baseHeight > 0) {
+          visualBox.style.height = `${Math.ceil(baseHeight * scale)}px`;
+        }
+      };
       const updateTransform = () => {
+        updateScrollBox();
         visual.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale}) rotate(${rotation}deg)`;
         zoomLabel.textContent = `${Math.round(scale * 100)}%`;
         ctx.toolbar?.setZoom(previewAvailable ? scale : void 0);
@@ -2081,11 +2100,13 @@ function imagePlugin() {
       stage.addEventListener("lostpointercapture", onLostPointerCapture);
       stage.addEventListener("pointerleave", onPointerLeave);
       stage.addEventListener("wheel", onWheel, { passive: false });
-      if (!canvasSource) {
+      if (!tiffSource) {
         image.addEventListener("error", showImageFallback);
+        image.addEventListener("load", updateScrollBox);
       }
       window.addEventListener("blur", onWindowBlur);
-      stage.append(visual);
+      visualBox.append(visual);
+      stage.append(visualBox);
       wrapper.append(...showInlineControls ? [controls, stage, infoBar] : [stage, infoBar]);
       ctx.viewport.append(wrapper);
       updateTransform();
@@ -2123,7 +2144,12 @@ function imagePlugin() {
         },
         resize(size) {
           visual.style.maxWidth = `${size.width}px`;
-          visual.style.maxHeight = `${Math.max(0, size.height - controls.offsetHeight)}px`;
+          if (visual.classList.contains("ofv-tiff-pages")) {
+            visual.style.removeProperty("max-height");
+          } else {
+            visual.style.maxHeight = `${Math.max(0, size.height - controls.offsetHeight)}px`;
+          }
+          updateScrollBox();
         },
         destroy() {
           ctx.toolbar?.setZoom(void 0);
@@ -2138,6 +2164,7 @@ function imagePlugin() {
           stage.removeEventListener("pointerleave", onPointerLeave);
           stage.removeEventListener("wheel", onWheel);
           image.removeEventListener("error", showImageFallback);
+          image.removeEventListener("load", updateScrollBox);
           window.removeEventListener("blur", onWindowBlur);
           finishDrag();
           wrapper.remove();
@@ -2151,33 +2178,64 @@ function imagePlugin() {
     }
   };
 }
-async function createTiffCanvas(bytes) {
+async function createTiffPreview(bytes, fileName) {
   if (bytes.byteLength === 0) {
     throw new Error("\u65E0\u6CD5\u8BFB\u53D6 TIFF \u6587\u4EF6\u5185\u5BB9\u3002");
   }
   const UTIF = await import("utif");
   const buffer = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
   const ifds = UTIF.decode(buffer);
-  const ifd = ifds.find((item) => Number(item.width || 0) > 0 || Number(item.t256 || 0) > 0) || ifds[0];
-  if (!ifd) {
+  const imageIfds = ifds.filter((item) => hasTiffDimensions(item));
+  if (imageIfds.length === 0) {
     throw new Error("TIFF \u6587\u4EF6\u6CA1\u6709\u53EF\u89E3\u7801\u7684\u56FE\u50CF\u76EE\u5F55\u3002");
   }
+  const pages = imageIfds.map((ifd, index) => createTiffPage(UTIF, buffer, ifd, index, imageIfds.length, fileName));
+  if (pages.length === 1) {
+    return pages[0].canvas;
+  }
+  const container = document.createElement("div");
+  container.className = "ofv-tiff-pages";
+  container.setAttribute("role", "group");
+  container.setAttribute("aria-label", `${fileName}\uFF0C\u5171 ${pages.length} \u9875`);
+  for (const page of pages) {
+    const figure = document.createElement("figure");
+    figure.className = "ofv-tiff-page";
+    const caption = document.createElement("figcaption");
+    caption.textContent = `\u7B2C ${page.index + 1} / ${pages.length} \u9875 \xB7 ${page.width} x ${page.height}px`;
+    figure.append(page.canvas, caption);
+    container.append(figure);
+  }
+  return container;
+}
+function createTiffPage(UTIF, buffer, ifd, index, total, fileName) {
   UTIF.decodeImage(buffer, ifd);
   const rgba = UTIF.toRGBA8(ifd);
-  const width = Number(ifd.width || ifd.t256 || 0);
-  const height = Number(ifd.height || ifd.t257 || 0);
+  const { width, height } = getTiffDimensions(ifd);
   if (!width || !height || rgba.length < width * height * 4) {
     throw new Error("TIFF \u56FE\u50CF\u50CF\u7D20\u6570\u636E\u4E0D\u5B8C\u6574\u3002");
   }
   const canvas = document.createElement("canvas");
+  canvas.className = "ofv-tiff-canvas";
   canvas.width = width;
   canvas.height = height;
+  canvas.setAttribute("role", "img");
+  canvas.setAttribute("aria-label", total > 1 ? `${fileName} \u7B2C ${index + 1} \u9875` : fileName);
   const context = canvas.getContext("2d");
   if (!context) {
     throw new Error("\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301 Canvas 2D\uFF0C\u65E0\u6CD5\u5C55\u793A TIFF\u3002");
   }
   context.putImageData(new ImageData(new Uint8ClampedArray(rgba), width, height), 0, 0);
-  return canvas;
+  return { canvas, width, height, index };
+}
+function hasTiffDimensions(ifd) {
+  const { width, height } = getTiffDimensions(ifd);
+  return width > 0 && height > 0;
+}
+function getTiffDimensions(ifd) {
+  return {
+    width: Number(ifd.width || ifd.t256 || 0),
+    height: Number(ifd.height || ifd.t257 || 0)
+  };
 }
 function createImageFallback(fileName, url) {
   const fallback = document.createElement("div");
@@ -2506,6 +2564,7 @@ function parseTiffInfo(bytes) {
     return { format: magic === 43 ? "BigTIFF" : "TIFF", note: "IFD \u504F\u79FB\u8D85\u51FA\u6587\u4EF6\u8303\u56F4" };
   }
   const count = magic === 43 ? readTiffUint64AsNumber(bytes, ifdOffset, littleEndian) : readTiffUint16(bytes, ifdOffset, littleEndian);
+  const imageCount = countTiffIfds(bytes, ifdOffset, magic === 43, littleEndian);
   const entrySize = magic === 43 ? 20 : 12;
   const entriesStart = ifdOffset + (magic === 43 ? 8 : 2);
   let width;
@@ -2532,9 +2591,26 @@ function parseTiffInfo(bytes) {
     height,
     bitDepth: bitDepth ? `${bitDepth} bit` : void 0,
     color: compression ? tiffCompressionName(compression) : void 0,
-    count: Number.isFinite(count) ? count : void 0
+    count: imageCount || void 0
   };
 }
+function countTiffIfds(bytes, firstOffset, bigTiff, littleEndian) {
+  const seen = /* @__PURE__ */ new Set();
+  let offset = firstOffset;
+  let count = 0;
+  while (Number.isFinite(offset) && offset > 0 && offset < bytes.length && !seen.has(offset) && count < 512) {
+    seen.add(offset);
+    const entryCount = bigTiff ? readTiffUint64AsNumber(bytes, offset, littleEndian) : readTiffUint16(bytes, offset, littleEndian);
+    const entrySize = bigTiff ? 20 : 12;
+    const nextOffsetPosition = offset + (bigTiff ? 8 : 2) + entryCount * entrySize;
+    if (!Number.isFinite(entryCount) || nextOffsetPosition + (bigTiff ? 8 : 4) > bytes.length) {
+      break;
+    }
+    count++;
+    offset = bigTiff ? readTiffUint64AsNumber(bytes, nextOffsetPosition, littleEndian) : readTiffUint32(bytes, nextOffsetPosition, littleEndian);
+  }
+  return count;
+}
 function readTiffInlineValue(bytes, offset, type, littleEndian) {
   if (offset + 4 > bytes.length) {
     return void 0;
@@ -3933,26 +4009,6 @@ var mimeLangMap = {
 };
 var MAX_HIGHLIGHT_CHARS = 18e4;
 var MAX_RENDER_CHARS = 6e5;
-function loadPrismCss(theme) {
-  const lightId = "ofv-prism-css-light";
-  const darkId = "ofv-prism-css-dark";
-  const activeId = theme === "dark" ? darkId : lightId;
-  const inactiveId = theme === "dark" ? lightId : darkId;
-  document.getElementById(inactiveId)?.remove();
-  if (document.getElementById(activeId)) {
-    return Promise.resolve();
-  }
-  const href = theme === "dark" ? "https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" : "https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css";
-  return new Promise((resolve, reject) => {
-    const link = document.createElement("link");
-    link.id = activeId;
-    link.rel = "stylesheet";
-    link.href = href;
-    link.onload = () => resolve();
-    link.onerror = () => reject(new Error(`Failed to load Prism CSS: ${href}`));
-    document.head.appendChild(link);
-  });
-}
 function textPlugin() {
   return {
     name: "text",
@@ -3976,7 +4032,6 @@ function textPlugin() {
           }
         };
       }
-      const isDark = ctx.host.parentElement?.classList.contains("ofv-theme-dark") || document.body.classList.contains("ofv-theme-dark") || ctx.options.theme === "auto" && window.matchMedia?.("(prefers-color-scheme: dark)").matches || ctx.options.theme === "dark";
       if (isMarkdown) {
         const [markedModule, PrismModule2, DOMPurifyModule] = await Promise.all([
           import("marked"),
@@ -3997,7 +4052,6 @@ function textPlugin() {
         try {
           const codeBlocks = container.querySelectorAll("pre code");
           if (codeBlocks.length > 0) {
-            await loadPrismCss(isDark ? "dark" : "light");
             codeBlocks.forEach((block) => {
               const parent = block.parentElement;
               if (parent && !parent.className.includes("language-")) {
@@ -4121,9 +4175,6 @@ function textPlugin() {
           console.warn(`Prism failed to load language component for: ${lang}`, e);
         }
       }
-      await loadPrismCss(isDark ? "dark" : "light").catch((error) => {
-        console.warn("Prism CSS failed to load; rendering code without external theme:", error);
-      });
       const codeText = text.length > MAX_RENDER_CHARS ? text.slice(0, MAX_RENDER_CHARS) : text;
       const totalLines = countLines(text);
       const shownLines = countLines(codeText);
@@ -4651,10 +4702,11 @@ async function renderPdfDocumentPreview(options) {
       const baseViewport = page.getViewport({ scale: 1 });
       pagesMeta.push({
         width: baseViewport.width,
-        height: baseViewport.height
+        height: baseViewport.height,
+        rotation: getPdfPageRotation(page)
       });
     } catch {
-      pagesMeta.push({ width: 612, height: 792 });
+      pagesMeta.push({ width: 612, height: 792, rotation: 0 });
     }
   }
   const pageStates = [];
@@ -4689,7 +4741,7 @@ async function renderPdfDocumentPreview(options) {
       const page = await pdfDocument.getPage(pageIdx + 1);
       const meta = pagesMeta[pageIdx];
       const scale = options.fit === "actual" ? zoomFactor : Math.max(0.05, Math.min(5, getPdfAvailableWidth(size.width) / rotatedPdfWidth(meta, rotation) * zoomFactor));
-      const viewport = page.getViewport({ scale, rotation });
+      const viewport = page.getViewport({ scale, rotation: getPdfRenderRotation(meta, rotation) });
       const outputScale = getPdfOutputScale();
       const cssWidth = Math.floor(viewport.width);
       const cssHeight = Math.floor(viewport.height);
@@ -4728,6 +4780,8 @@ async function renderPdfDocumentPreview(options) {
         const span = document.createElement("span");
         span.textContent = str;
         span.style.fontSize = `${fontHeight}px`;
+        span.style.lineHeight = "1";
+        span.style.height = `${fontHeight}px`;
         span.style.fontFamily = item.fontName || "sans-serif";
         span.style.left = `${tx[4]}px`;
         span.style.top = `${tx[5] - fontHeight}px`;
@@ -4925,6 +4979,13 @@ function appendPdfSummary(parent, label, value) {
 function normalizePdfRotation(value) {
   return (value % 360 + 360) % 360;
 }
+function getPdfPageRotation(page) {
+  const rotation = Number(page.rotate);
+  return Number.isFinite(rotation) ? normalizePdfRotation(rotation) : 0;
+}
+function getPdfRenderRotation(meta, userRotation) {
+  return normalizePdfRotation((meta.rotation || 0) + userRotation);
+}
 function isPdfRotatedSideways(rotation) {
   const normalized = normalizePdfRotation(rotation);
   return normalized === 90 || normalized === 270;
@@ -5895,13 +5956,13 @@ function officePlugin(options = {}) {
       if (conversionContext && await shouldUseOfficeConversion(options, conversionContext)) {
         delegatedInstance = await renderConvertedOfficePreview(panel, ctx, options, conversionContext);
       } else if (packageFormat === "docx" && !fileIsDocx(extension)) {
-        disposeDocxFit = await renderDocx(panel, arrayBuffer);
+        disposeDocxFit = await renderDocx(panel, arrayBuffer, ctx.options.fit);
       } else if (packageFormat === "xlsx" && !sheetExtensions.has(extension)) {
         await renderSheet(panel, arrayBuffer, "xlsx");
       } else if (packageFormat === "pptx" && !["pptx", "pptm", "ppsx", "ppsm", "potx", "potm"].includes(extension)) {
         await renderPptx(panel, arrayBuffer);
       } else if (fileIsDocx(extension)) {
-        disposeDocxFit = await renderDocx(panel, arrayBuffer);
+        disposeDocxFit = await renderDocx(panel, arrayBuffer, ctx.options.fit);
       } else if (extension === "rtf") {
         renderPlainDocument(panel, "RTF \u6587\u6863", rtfToText(await readTextFromBuffer(arrayBuffer)));
       } else if (extension === "odt") {
@@ -5910,7 +5971,7 @@ function officePlugin(options = {}) {
         renderOpenDocumentXml(panel, "FODT \u6587\u6863", await readTextFromBuffer(arrayBuffer));
       } else if (extension === "fods") {
         renderFlatOds(panel, await readTextFromBuffer(arrayBuffer));
-      } else if (packagedOfficeCandidates.has(extension) && await renderPackagedOfficePreview(panel, arrayBuffer, extension)) {
+      } else if (packagedOfficeCandidates.has(extension) && await renderPackagedOfficePreview(panel, arrayBuffer, extension, ctx.options.fit)) {
       } else if (sheetExtensions.has(extension)) {
         await renderSheet(panel, arrayBuffer, extension);
       } else if (["pptx", "pptm", "ppsx", "ppsm", "potx", "potm"].includes(extension)) {
@@ -6112,7 +6173,7 @@ async function detectPackagedOfficeFormat(arrayBuffer) {
   }
   return void 0;
 }
-async function renderDocx(panel, arrayBuffer) {
+async function renderDocx(panel, arrayBuffer, fit) {
   const content = document.createElement("div");
   content.className = "ofv-docx-document";
   const styleContainer = document.createElement("div");
@@ -6151,7 +6212,7 @@ async function renderDocx(panel, arrayBuffer) {
       return () => void 0;
     }
     panel.append(content);
-    disposeFit = fitDocxPages(content);
+    disposeFit = fitDocxPages(content, fit);
     return () => {
       disposeFit?.();
       styleContainer.remove();
@@ -6749,7 +6810,8 @@ function looksLikeDocxTextboxHeading(value) {
   return text.length > 0 && text.length <= 12 && !/[0-9@.:：]/.test(text);
 }
 async function normalizeDocxLayout(container, arrayBuffer) {
-  const hints = await readDocxLayoutHints(arrayBuffer);
+  const [hints, charts] = await Promise.all([readDocxLayoutHints(arrayBuffer), readDocxCharts(arrayBuffer)]);
+  repairDocxChartPlaceholders(container, charts);
   const pages = container.querySelectorAll("section.ofv-docx");
   for (const page of pages) {
     repairDocxShapeFills(page);
@@ -6764,6 +6826,75 @@ async function normalizeDocxLayout(container, arrayBuffer) {
     }
   }
 }
+async function readDocxCharts(arrayBuffer) {
+  try {
+    const zip = await JSZip3.loadAsync(arrayBuffer);
+    const documentXml = await zip.file("word/document.xml")?.async("text");
+    const documentDoc = documentXml ? parseOfficeXml(documentXml) : void 0;
+    if (!documentDoc) {
+      return [];
+    }
+    const relationships = await readOfficeRelationships(zip, "word/document.xml");
+    const chartDrawings = Array.from(documentDoc.getElementsByTagName("*")).filter((element) => element.localName === "inline" || element.localName === "anchor").map((element) => readDocxChartDrawing(element)).filter((item) => Boolean(item?.relationshipId));
+    const charts = [];
+    for (const [index, drawing] of chartDrawings.entries()) {
+      const chartRel = relationships.find((rel) => rel.id === drawing.relationshipId && /\/chart$/i.test(rel.type));
+      const chartPath = resolveOfficeRelationshipTarget("word/document.xml", chartRel?.target);
+      const chartXml = chartPath ? await zip.file(chartPath)?.async("text") : void 0;
+      const chart = chartXml ? parseChartXml(chartXml, chartPath?.split("/").pop() || `chart${index + 1}.xml`) : null;
+      if (chart) {
+        charts.push({ ...chart, widthPt: drawing.widthPt, heightPt: drawing.heightPt });
+      }
+    }
+    return charts;
+  } catch {
+    return [];
+  }
+}
+function readDocxChartDrawing(element) {
+  const chart = Array.from(element.getElementsByTagName("*")).find((child) => child.localName === "chart");
+  const relationshipId = chart ? getXmlAttribute3(chart, "id") : "";
+  if (!relationshipId) {
+    return void 0;
+  }
+  const extent = Array.from(element.children).find((child) => child.localName === "extent");
+  return {
+    relationshipId,
+    widthPt: emuToPt(Number(extent?.getAttribute("cx") || 0)),
+    heightPt: emuToPt(Number(extent?.getAttribute("cy") || 0))
+  };
+}
+function repairDocxChartPlaceholders(container, charts) {
+  if (charts.length === 0) {
+    return;
+  }
+  const placeholders = Array.from(container.querySelectorAll("section.ofv-docx div")).filter(isDocxChartPlaceholder);
+  if (placeholders.length !== charts.length) {
+    return;
+  }
+  placeholders.forEach((placeholder, index) => {
+    const chart = charts[index];
+    placeholder.classList.add("ofv-docx-chart-preview");
+    placeholder.dataset.ofvDocxChartPreview = "true";
+    if (chart.widthPt > 0) {
+      placeholder.style.width ||= `${formatCssNumber(chart.widthPt)}pt`;
+    }
+    if (chart.heightPt > 0) {
+      placeholder.style.height ||= `${formatCssNumber(chart.heightPt)}pt`;
+    }
+    placeholder.replaceChildren(renderChartSvg(chart));
+  });
+}
+function isDocxChartPlaceholder(element) {
+  if (element.dataset.ofvDocxChartPreview === "true" || element.children.length > 0 || normalizePreviewText(element.textContent || "")) {
+    return false;
+  }
+  const display = element.style.display;
+  const position = element.style.position;
+  const width = parseCssPixelValue(element.style.width);
+  const height = parseCssPixelValue(element.style.height);
+  return display === "inline-block" && position === "relative" && width >= 120 && height >= 80;
+}
 function repairDocxHeadingShapeAlignment(page) {
   for (const paragraph of page.querySelectorAll("p")) {
     const text = normalizePreviewText(paragraph.textContent || "");
@@ -6914,14 +7045,19 @@ function repairDocxShapeFills(page) {
   }
 }
 function repairDocxFloatingPictures(page, hints) {
-  const hint = hints.floatingPictures.find((item) => item.relativeFrom === "column" && item.wrap === "square");
-  if (!hint) {
+  const pageHints = hints.floatingPictures.filter((item) => item.relativeFrom === "column" && item.wrap === "square");
+  if (pageHints.length === 0) {
     return;
   }
-  const image = page.querySelector("img");
-  if (!image) {
+  const images = Array.from(page.querySelectorAll("img")).filter(
+    (image) => image.closest("[data-ofv-docx-float-repaired='true']") === null
+  );
+  if (images.length === 0 || images.length !== pageHints.length) {
     return;
   }
+  images.forEach((image, index) => repairDocxFloatingPicture(page, image, pageHints[index]));
+}
+function repairDocxFloatingPicture(page, image, hint) {
   const wrapper = image.parentElement;
   if (!wrapper || wrapper.dataset.ofvDocxFloatRepaired === "true") {
     return;
@@ -6967,7 +7103,7 @@ function parseCssLineHeight(value) {
   const parsed = Number.parseFloat(trimmed);
   return Number.isFinite(parsed) ? parsed : 0;
 }
-function fitDocxPages(container) {
+function fitDocxPages(container, fit) {
   const wrapper = container.querySelector(".ofv-docx-wrapper");
   if (!wrapper) {
     return () => void 0;
@@ -6980,6 +7116,7 @@ function fitDocxPages(container) {
       return;
     }
     const availableWidth = Math.max(1, container.clientWidth - 48);
+    const availableHeight = container.clientHeight > 0 ? Math.max(1, container.clientHeight - 48) : void 0;
     const pageWidth = Math.max(
       1,
       ...frames.map(({ page }) => {
@@ -6987,14 +7124,24 @@ function fitDocxPages(container) {
         return page.offsetWidth || rectWidth || parseCssPixelValue(page.style.width) || 794;
       })
     );
-    const scale = Math.min(1, Math.max(0.35, availableWidth / pageWidth));
+    const pageHeight = Math.max(
+      1,
+      ...frames.map(({ page }) => page.offsetHeight || page.getBoundingClientRect().height || parseCssPixelValue(page.style.height) || 1123)
+    );
+    const scale = getDocxFitScale(fit, availableWidth, availableHeight, pageWidth, pageHeight);
     const userZoom = parseCssPixelValue(panel?.style.getPropertyValue("--ofv-office-zoom") || "1") || 1;
     wrapper.style.setProperty("--ofv-docx-scale", formatCssNumber(scale));
     wrapper.style.setProperty("--ofv-docx-page-width", `${pageWidth}px`);
+    wrapper.style.width = `${Math.ceil(pageWidth * scale * userZoom + 48)}px`;
+    wrapper.style.maxWidth = "none";
+    wrapper.style.overflow = "visible";
     for (const { frame, page } of frames) {
-      const pageHeight = page.offsetHeight || page.getBoundingClientRect().height || parseCssPixelValue(page.style.height);
-      if (pageHeight > 0) {
-        frame.style.height = `${Math.ceil(pageHeight * scale * userZoom)}px`;
+      const framePageHeight = page.offsetHeight || page.getBoundingClientRect().height || parseCssPixelValue(page.style.height);
+      const framePageWidth = page.offsetWidth || page.getBoundingClientRect().width || parseCssPixelValue(page.style.width) || pageWidth;
+      frame.style.width = `${Math.ceil(framePageWidth * scale * userZoom)}px`;
+      frame.style.maxWidth = "none";
+      if (framePageHeight > 0) {
+        frame.style.height = `${Math.ceil(framePageHeight * scale * userZoom)}px`;
       }
     }
   };
@@ -7019,6 +7166,26 @@ function fitDocxPages(container) {
     observer.disconnect();
   };
 }
+function getDocxFitScale(fit, availableWidth, availableHeight, pageWidth, pageHeight) {
+  const widthScale = availableWidth / pageWidth;
+  const heightScale = availableHeight ? availableHeight / pageHeight : void 0;
+  if (fit === "actual") {
+    return 1;
+  }
+  if (fit === "height") {
+    return Math.max(0.1, heightScale ?? widthScale);
+  }
+  if (fit === "cover") {
+    return Math.max(0.1, Math.max(widthScale, heightScale ?? widthScale));
+  }
+  if (fit === "scale-down") {
+    return Math.min(1, Math.max(0.1, Math.min(widthScale, heightScale ?? widthScale)));
+  }
+  if (fit === "contain") {
+    return Math.max(0.1, Math.min(widthScale, heightScale ?? widthScale));
+  }
+  return Math.max(0.1, widthScale);
+}
 function ensureDocxPageFrames(wrapper) {
   const pages = Array.from(wrapper.querySelectorAll("section.ofv-docx"));
   return pages.map((page) => {
@@ -7550,9 +7717,9 @@ function parseChartXml(xml, fallbackName) {
     return null;
   }
   const type = detectChartType(doc);
-  const title = textFromFirst(doc, "title") || fallbackName.replace(/\.xml$/i, "");
+  const title = readChartTitle(doc, fallbackName);
   const seriesElements = Array.from(doc.getElementsByTagName("*")).filter((element) => element.localName === "ser");
-  const series = seriesElements.map((element, index) => parseChartSeries(element, index)).filter((item) => item.values.length > 0);
+  const series = seriesElements.map((element, index) => ({ ...parseChartSeries(element, index), color: readChartSeriesColor(element) })).filter((item) => item.values.length > 0);
   if (series.length === 0) {
     return null;
   }
@@ -7561,9 +7728,21 @@ function parseChartXml(xml, fallbackName) {
     type,
     title,
     categories: series.find((item) => item.categories.length > 0)?.categories || [],
-    series: series.map((item) => ({ name: item.name, values: item.values }))
+    series: series.map((item) => ({ name: item.name, values: item.values, color: item.color }))
   };
 }
+function readChartTitle(doc, fallbackName) {
+  const titleElement = Array.from(doc.getElementsByTagName("*")).find((element) => element.localName === "title");
+  if (!titleElement) {
+    return fallbackName.replace(/\.xml$/i, "");
+  }
+  const explicitTitle = chartText(titleElement);
+  if (explicitTitle) {
+    return explicitTitle;
+  }
+  const language = Array.from(doc.getElementsByTagName("*")).find((element) => element.localName === "lang")?.getAttribute("val") || "";
+  return /^zh\b/i.test(language) ? "\u56FE\u8868\u6807\u9898" : "Chart Title";
+}
 function detectChartType(doc) {
   const chartType = Array.from(doc.getElementsByTagName("*")).find(
     (element) => element.localName.endsWith("Chart") && element.localName !== "chart"
@@ -7580,6 +7759,31 @@ function parseChartSeries(element, index) {
     categories: stringsFromFirst(element, "cat")
   };
 }
+function readChartSeriesColor(element) {
+  const shape = Array.from(element?.children || []).find((child) => child.localName === "spPr");
+  const color = Array.from(shape?.getElementsByTagName("*") || []).find(
+    (child) => child.localName === "srgbClr" || child.localName === "schemeClr"
+  );
+  if (!color) {
+    return void 0;
+  }
+  if (color.localName === "srgbClr") {
+    const value = color.getAttribute("val") || "";
+    return /^[\da-f]{6}$/i.test(value) ? `#${value}` : void 0;
+  }
+  return chartSchemeColor(color.getAttribute("val") || "");
+}
+function chartSchemeColor(value) {
+  const colors = {
+    accent1: "#156082",
+    accent2: "#e97132",
+    accent3: "#196b24",
+    accent4: "#0f9ed5",
+    accent5: "#a02b93",
+    accent6: "#4ea72e"
+  };
+  return colors[value];
+}
 function renderChartPreviewSection(charts) {
   const section = createSection("\u8868\u683C\u56FE\u8868\u9884\u89C8");
   const grid = document.createElement("div");
@@ -7617,17 +7821,39 @@ function renderChartCard(chart) {
 }
 function renderChartSvg(chart) {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("viewBox", "0 0 640 260");
+  svg.setAttribute("viewBox", "0 0 640 380");
   svg.setAttribute("role", "img");
   svg.setAttribute("aria-label", chart.title);
   svg.classList.add("ofv-chart-svg");
   const allValues = chart.series.flatMap((item) => item.values).filter((value) => Number.isFinite(value));
   const max = Math.max(1, ...allValues);
   const min = Math.min(0, ...allValues);
+  const axisScale = createChartAxisScale(max, min);
+  const axisMax = axisScale.max;
+  const axisMin = axisScale.min;
   const span = max - min || 1;
-  const colors = ["#2563eb", "#059669", "#d97706", "#dc2626", "#7c3aed"];
-  const plot = { x: 48, y: 24, width: 552, height: 178 };
-  appendSvg(svg, "line", { x1: plot.x, y1: plot.y, x2: plot.x, y2: plot.y + plot.height, class: "ofv-chart-axis" });
+  const colors = ["#156082", "#e97132", "#196b24", "#0f9ed5", "#a02b93", "#4ea72e"];
+  const plot = { x: 74, y: 74, width: 526, height: 214 };
+  const categories = chart.categories.length > 0 ? chart.categories : chart.series[0]?.values.map((_, index) => String(index + 1)) || [];
+  const title = appendSvg(svg, "text", { x: 320, y: 34, class: "ofv-chart-title", "text-anchor": "middle" });
+  title.textContent = chart.title;
+  for (const value of axisScale.ticks) {
+    const y = plot.y + plot.height - (value - axisMin) / (axisMax - axisMin || 1) * plot.height;
+    appendSvg(svg, "line", {
+      x1: plot.x,
+      y1: Number(y.toFixed(1)),
+      x2: plot.x + plot.width,
+      y2: Number(y.toFixed(1)),
+      class: value === 0 ? "ofv-chart-axis" : "ofv-chart-gridline"
+    });
+    const label = appendSvg(svg, "text", {
+      x: plot.x - 12,
+      y: Number((y + 4).toFixed(1)),
+      class: "ofv-chart-label",
+      "text-anchor": "end"
+    });
+    label.textContent = formatChartTick(value);
+  }
   appendSvg(svg, "line", {
     x1: plot.x,
     y1: plot.y + plot.height,
@@ -7635,28 +7861,47 @@ function renderChartSvg(chart) {
     y2: plot.y + plot.height,
     class: "ofv-chart-axis"
   });
-  chart.series.forEach((series, seriesIndex) => {
-    const color = colors[seriesIndex % colors.length];
-    const step = series.values.length > 1 ? plot.width / (series.values.length - 1) : plot.width;
-    const points = series.values.map((value, index) => ({
-      x: plot.x + index * step,
-      y: plot.y + plot.height - (value - min) / span * plot.height
-    }));
-    if (chart.type.includes("bar") || chart.type.includes("col")) {
-      const barWidth = Math.max(4, Math.min(28, step * 0.6)) / Math.max(1, chart.series.length);
-      points.forEach((point, index) => {
-        const zeroY = plot.y + plot.height - (0 - min) / span * plot.height;
-        const x = point.x - barWidth * chart.series.length / 2 + seriesIndex * barWidth;
+  if (chart.type.includes("bar") || chart.type.includes("col")) {
+    const categoryCount = Math.max(1, categories.length, ...chart.series.map((series) => series.values.length));
+    const groupWidth = plot.width / categoryCount;
+    const clusterWidth = groupWidth * 0.58;
+    const barWidth = Math.max(5, Math.min(28, clusterWidth / Math.max(1, chart.series.length)));
+    const zeroY = plot.y + plot.height - (0 - axisMin) / (axisMax - axisMin || 1) * plot.height;
+    categories.slice(0, categoryCount).forEach((category, index) => {
+      const x = plot.x + groupWidth * (index + 0.5);
+      const label = appendSvg(svg, "text", {
+        x: Number(x.toFixed(1)),
+        y: plot.y + plot.height + 22,
+        class: "ofv-chart-label",
+        "text-anchor": "middle"
+      });
+      label.textContent = truncateChartLabel(category);
+    });
+    chart.series.forEach((series, seriesIndex) => {
+      const color = series.color || colors[seriesIndex % colors.length];
+      series.values.forEach((value, index) => {
+        const groupCenter = plot.x + groupWidth * (index + 0.5);
+        const x = groupCenter - barWidth * chart.series.length / 2 + seriesIndex * barWidth + barWidth * 0.12;
+        const y = plot.y + plot.height - (value - axisMin) / (axisMax - axisMin || 1) * plot.height;
         appendSvg(svg, "rect", {
-          x,
-          y: Math.min(point.y, zeroY),
-          width: barWidth,
-          height: Math.max(1, Math.abs(zeroY - point.y)),
+          x: Number(x.toFixed(1)),
+          y: Number(Math.min(y, zeroY).toFixed(1)),
+          width: Number((barWidth * 0.76).toFixed(1)),
+          height: Number(Math.max(1, Math.abs(zeroY - y)).toFixed(1)),
           fill: color,
           "data-index": index
         });
       });
-    } else {
+    });
+  } else {
+    chart.series.forEach((series, seriesIndex) => {
+      const color = series.color || colors[seriesIndex % colors.length];
+      const step = series.values.length > 1 ? plot.width / (series.values.length - 1) : plot.width;
+      const lineSpan = axisMax - axisMin || span;
+      const points = series.values.map((value, index) => ({
+        x: plot.x + index * step,
+        y: plot.y + plot.height - (value - axisMin) / lineSpan * plot.height
+      }));
       appendSvg(svg, "polyline", {
         points: points.map((point) => `${point.x.toFixed(1)},${point.y.toFixed(1)}`).join(" "),
         fill: "none",
@@ -7668,11 +7913,49 @@ function renderChartSvg(chart) {
       for (const point of points.slice(0, 80)) {
         appendSvg(svg, "circle", { cx: point.x, cy: point.y, r: 3, fill: color });
       }
-    }
-    appendLegend(svg, series.name, color, 52 + seriesIndex * 118, 236);
-  });
+    });
+  }
+  appendChartLegend(svg, chart, colors, 348);
   return svg;
 }
+function appendChartLegend(svg, chart, colors, y) {
+  const itemWidth = 86;
+  const startX = 320 - chart.series.length * itemWidth / 2;
+  chart.series.forEach((series, seriesIndex) => {
+    const color = series.color || colors[seriesIndex % colors.length];
+    appendLegend(svg, series.name, color, startX + seriesIndex * itemWidth, y);
+  });
+}
+function createChartAxisScale(max, min) {
+  const axisMin = Math.min(0, min);
+  const positiveMax = Math.max(1, max);
+  const step = niceChartStep((positiveMax - axisMin) / 5);
+  let axisMax = Math.ceil(positiveMax / step) * step;
+  if (axisMax <= positiveMax) {
+    axisMax += step;
+  }
+  const ticks = [];
+  for (let value = axisMin; value <= axisMax + step / 2; value += step) {
+    ticks.push(Number(value.toFixed(6)));
+  }
+  return { min: axisMin, max: axisMax, ticks };
+}
+function niceChartStep(rawStep) {
+  if (rawStep <= 0) {
+    return 1;
+  }
+  const magnitude = 10 ** Math.floor(Math.log10(rawStep));
+  const normalized = rawStep / magnitude;
+  const nice = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
+  return nice * magnitude;
+}
+function formatChartTick(value) {
+  const rounded = Math.abs(value) < 1 ? Number(value.toFixed(1)) : Number(value.toFixed(0));
+  return String(rounded);
+}
+function truncateChartLabel(value) {
+  return value.length > 10 ? `${value.slice(0, 10)}...` : value;
+}
 function appendLegend(svg, label, color, x, y) {
   appendSvg(svg, "rect", { x, y: y - 10, width: 12, height: 12, rx: 2, fill: color });
   const text = appendSvg(svg, "text", { x: x + 18, y, class: "ofv-chart-label" });
@@ -8406,7 +8689,7 @@ function renderOpenDocumentPresentationXml(panel, xml) {
   renderPresentationInsight(panel, inspectOpenDocumentPresentation("FODP \u6F14\u793A\u6587\u7A3F", xml, 0));
   renderOpenDocumentPresentation(panel, "FODP \u6F14\u793A\u6587\u7A3F", xml, []);
 }
-async function renderPackagedOfficePreview(panel, arrayBuffer, extension) {
+async function renderPackagedOfficePreview(panel, arrayBuffer, extension, fit) {
   let zip;
   try {
     zip = await JSZip3.loadAsync(arrayBuffer);
@@ -8417,7 +8700,7 @@ async function renderPackagedOfficePreview(panel, arrayBuffer, extension) {
   const hasEntry = (path) => entries.some((entry) => entry.name.toLowerCase() === path.toLowerCase());
   const contentXml = zip.file(/(^|\/)content\.xml$/i)[0];
   if (hasEntry("word/document.xml")) {
-    await renderDocx(panel, arrayBuffer);
+    await renderDocx(panel, arrayBuffer, fit);
     return true;
   }
   if (hasEntry("xl/workbook.xml")) {