@open-file-viewer/core 0.1.4 → 0.1.5

package/dist/index.cjs

@@ -3328,6 +3328,95 @@ function readAiffExtended(bytes, offset) {
   return mantissa * Math.pow(2, exponent - 16383 - 63);
 }
 
+// src/plugins/utils.ts
+async function readArrayBuffer(file) {
+  if (file.source instanceof ArrayBuffer) {
+    return file.source;
+  }
+  if (file.blob) {
+    return file.blob.arrayBuffer();
+  }
+  if (typeof file.source === "string") {
+    const response = await fetch(file.source);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch file: ${response.status}`);
+    }
+    return response.arrayBuffer();
+  }
+  throw new Error("Unsupported file source.");
+}
+async function readTextFile(file) {
+  const decode = (buffer) => decodeTextBuffer(buffer);
+  if (typeof file.source === "string") {
+    const response = await fetch(file.source);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch text file: ${response.status}`);
+    }
+    return decode(await response.arrayBuffer());
+  }
+  if (file.blob) {
+    return decode(await file.blob.arrayBuffer());
+  }
+  if (file.source instanceof ArrayBuffer) {
+    return decode(file.source);
+  }
+  return String(file.source);
+}
+function createPanel(className = "") {
+  const panel = document.createElement("div");
+  panel.className = `ofv-panel ${className}`.trim();
+  return panel;
+}
+function createSection(title) {
+  const section = document.createElement("section");
+  section.className = "ofv-section";
+  const heading = document.createElement("h3");
+  heading.textContent = title;
+  section.append(heading);
+  return section;
+}
+function appendMeta(parent, label, value) {
+  const row = document.createElement("div");
+  row.className = "ofv-meta-row";
+  const key = document.createElement("span");
+  key.textContent = label;
+  const content = document.createElement("strong");
+  content.textContent = String(value);
+  row.append(key, content);
+  parent.append(row);
+}
+function decodeTextBuffer(buffer) {
+  return decodeTextBytes(new Uint8Array(buffer));
+}
+function decodeTextBytes(bytes) {
+  if (bytes.length >= 3 && bytes[0] === 239 && bytes[1] === 187 && bytes[2] === 191) {
+    return new TextDecoder("utf-8").decode(bytes.subarray(3));
+  }
+  if (bytes.length >= 2) {
+    if (bytes[0] === 255 && bytes[1] === 254) {
+      return new TextDecoder("utf-16le").decode(bytes.subarray(2));
+    }
+    if (bytes[0] === 254 && bytes[1] === 255) {
+      return new TextDecoder("utf-16be").decode(bytes.subarray(2));
+    }
+  }
+  try {
+    return new TextDecoder("utf-8", { fatal: true }).decode(bytes);
+  } catch {
+    return decodeWithFallback(bytes, "gb18030") || decodeWithFallback(bytes, "gbk") || new TextDecoder("utf-8").decode(bytes);
+  }
+}
+function decodeWithFallback(bytes, encoding) {
+  try {
+    return new TextDecoder(encoding).decode(bytes);
+  } catch {
+    return void 0;
+  }
+}
+function resolveFormat(file, mimeMap) {
+  return file.extension || mimeMap[file.mimeType] || "";
+}
+
 // src/plugins/text.ts
 var langMap = {
   js: "javascript",
@@ -3984,13 +4073,13 @@ async function readText(source) {
     if (!response.ok) {
       throw new Error(`Failed to fetch text file: ${response.status}`);
     }
-    return response.text();
+    return decodeTextBuffer(await response.arrayBuffer());
   }
   if (source instanceof Blob) {
-    return source.text();
+    return decodeTextBuffer(await source.arrayBuffer());
   }
   if (source instanceof ArrayBuffer) {
-    return new TextDecoder().decode(source);
+    return decodeTextBuffer(source);
   }
   return String(source);
 }
@@ -4347,68 +4436,6 @@ function configurePdfWorker(pdf, workerSrc) {
 // src/plugins/epub.ts
 var import_jszip = __toESM(require("jszip"), 1);
 var import_dompurify = __toESM(require("dompurify"), 1);
-
-// src/plugins/utils.ts
-async function readArrayBuffer(file) {
-  if (file.source instanceof ArrayBuffer) {
-    return file.source;
-  }
-  if (file.blob) {
-    return file.blob.arrayBuffer();
-  }
-  if (typeof file.source === "string") {
-    const response = await fetch(file.source);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch file: ${response.status}`);
-    }
-    return response.arrayBuffer();
-  }
-  throw new Error("Unsupported file source.");
-}
-async function readTextFile(file) {
-  if (typeof file.source === "string") {
-    const response = await fetch(file.source);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch text file: ${response.status}`);
-    }
-    return response.text();
-  }
-  if (file.blob) {
-    return file.blob.text();
-  }
-  if (file.source instanceof ArrayBuffer) {
-    return new TextDecoder().decode(file.source);
-  }
-  return String(file.source);
-}
-function createPanel(className = "") {
-  const panel = document.createElement("div");
-  panel.className = `ofv-panel ${className}`.trim();
-  return panel;
-}
-function createSection(title) {
-  const section = document.createElement("section");
-  section.className = "ofv-section";
-  const heading = document.createElement("h3");
-  heading.textContent = title;
-  section.append(heading);
-  return section;
-}
-function appendMeta(parent, label, value) {
-  const row = document.createElement("div");
-  row.className = "ofv-meta-row";
-  const key = document.createElement("span");
-  key.textContent = label;
-  const content = document.createElement("strong");
-  content.textContent = String(value);
-  row.append(key, content);
-  parent.append(row);
-}
-function resolveFormat(file, mimeMap) {
-  return file.extension || mimeMap[file.mimeType] || "";
-}
-
-// src/plugins/epub.ts
 var epubMimeTypes = /* @__PURE__ */ new Set(["application/epub+zip", "application/x-epub+zip"]);
 function epubPlugin() {
   return {
@@ -5028,8 +5055,15 @@ function officePlugin() {
       ctx.viewport.append(panel);
       const extension = resolveFormat(ctx.file, officeMimeFormatMap);
       const arrayBuffer = await readArrayBuffer(ctx.file);
+      const packageFormat = shouldSniffPackagedOffice(extension) ? await detectPackagedOfficeFormat(arrayBuffer) : void 0;
       let disposeDocxFit;
-      if (fileIsDocx(extension)) {
+      if (packageFormat === "docx" && !fileIsDocx(extension)) {
+        disposeDocxFit = await renderDocx(panel, arrayBuffer);
+      } 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);
       } else if (extension === "rtf") {
         renderPlainDocument(panel, "RTF \u6587\u6863", rtfToText(await readTextFromBuffer(arrayBuffer)));
@@ -5065,12 +5099,32 @@ function officePlugin() {
 function fileIsDocx(extension) {
   return extension === "docx" || extension === "docm" || extension === "dotx" || extension === "dotm";
 }
+function shouldSniffPackagedOffice(extension) {
+  return isLegacyOfficeBinary(extension) || packagedOfficeCandidates.has(extension) || extension === "";
+}
+async function detectPackagedOfficeFormat(arrayBuffer) {
+  try {
+    const zip = await import_jszip3.default.loadAsync(arrayBuffer);
+    const entries = Object.values(zip.files).filter((entry) => !entry.dir);
+    const hasEntry = (path) => entries.some((entry) => entry.name.toLowerCase() === path.toLowerCase());
+    if (hasEntry("word/document.xml")) {
+      return "docx";
+    }
+    if (hasEntry("xl/workbook.xml")) {
+      return "xlsx";
+    }
+    if (hasEntry("ppt/presentation.xml")) {
+      return "pptx";
+    }
+  } catch {
+    return void 0;
+  }
+  return void 0;
+}
 async function renderDocx(panel, arrayBuffer) {
-  const section = createSection("Word \u6587\u6863");
   const content = document.createElement("div");
   content.className = "ofv-docx-document";
-  section.append(content);
-  panel.append(section);
+  panel.append(content);
   try {
     const docxPreview = await import("docx-preview");
     await docxPreview.renderAsync(arrayBuffer, content, content, {
@@ -5291,7 +5345,7 @@ async function renderSheet(panel, arrayBuffer, extension) {
   const xlsx = await import("xlsx");
   let workbook;
   try {
-    workbook = xlsx.read(arrayBuffer, { type: "array" });
+    workbook = extension === "csv" || extension === "tsv" ? xlsx.read(decodeTextBuffer(arrayBuffer), { type: "string", FS: extension === "tsv" ? "	" : "," }) : xlsx.read(arrayBuffer, { type: "array" });
   } catch (error) {
     if (isLegacyOfficeBinary(extension)) {
       renderLegacyOfficeBinary(panel, extension, arrayBuffer, `\u8868\u683C\u89E3\u6790\u5931\u8D25\uFF1A${normalizeOfficeError(error)}`);
@@ -5924,10 +5978,30 @@ async function renderPptx(panel, arrayBuffer) {
   try {
     const { PptxViewer } = await import("@aiden0z/pptx-renderer");
     await PptxViewer.open(arrayBuffer, container);
+    normalizePptxLayout(container);
   } catch {
     container.textContent = "PPTX \u6E32\u67D3\u5931\u8D25\uFF0C\u8BF7\u68C0\u67E5\u6587\u4EF6\u662F\u5426\u635F\u574F\u3002";
   }
 }
+function normalizePptxLayout(container) {
+  const slideCanvases = findPptxSlideCanvases(container);
+  for (const slide of slideCanvases) {
+    slide.style.backgroundColor = "#FFFFFF";
+  }
+}
+function findPptxSlideCanvases(container) {
+  const slideWrappers = Array.from(container.querySelectorAll("div[data-slide-index]"));
+  const candidates = slideWrappers.flatMap(
+    (wrapper) => Array.from(wrapper.querySelectorAll("div")).filter(isPptxSlideCanvas)
+  );
+  if (candidates.length > 0) {
+    return Array.from(new Set(candidates));
+  }
+  return Array.from(container.querySelectorAll("div")).filter(isPptxSlideCanvas);
+}
+function isPptxSlideCanvas(element) {
+  return element.style.position === "relative" && parseCssPixelValue(element.style.width) > 0 && parseCssPixelValue(element.style.height) > 0;
+}
 async function renderOdp(panel, arrayBuffer) {
   const zip = await import_jszip3.default.loadAsync(arrayBuffer);
   const content = zip.file("content.xml");
@@ -5955,34 +6029,28 @@ 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")) {
-    renderOfficePackageNotice(panel, extension, "\u68C0\u6D4B\u5230 OOXML Word \u5305\u7ED3\u6784\uFF0C\u5DF2\u6309 DOCX \u517C\u5BB9\u8DEF\u5F84\u9884\u89C8\u3002");
     await renderDocx(panel, arrayBuffer);
     return true;
   }
   if (hasEntry("xl/workbook.xml")) {
-    renderOfficePackageNotice(panel, extension, "\u68C0\u6D4B\u5230 OOXML Workbook \u5305\u7ED3\u6784\uFF0C\u5DF2\u6309 XLSX \u517C\u5BB9\u8DEF\u5F84\u9884\u89C8\u3002");
     await renderSheet(panel, arrayBuffer, extension);
     return true;
   }
   if (hasEntry("ppt/presentation.xml")) {
-    renderOfficePackageNotice(panel, extension, "\u68C0\u6D4B\u5230 OOXML Presentation \u5305\u7ED3\u6784\uFF0C\u5DF2\u6309 PPTX \u517C\u5BB9\u8DEF\u5F84\u9884\u89C8\u3002");
     await renderPptx(panel, arrayBuffer);
     return true;
   }
   if (contentXml) {
     const xml = await contentXml.async("text");
     if (/<office:spreadsheet\b|<table:table\b/i.test(xml)) {
-      renderOfficePackageNotice(panel, extension, "\u68C0\u6D4B\u5230 OpenDocument Spreadsheet \u5305\u7ED3\u6784\uFF0C\u5DF2\u6309 ODS \u517C\u5BB9\u8DEF\u5F84\u9884\u89C8\u3002");
       renderParsedSheets(panel, parseFlatOds(xml), `${extension.toUpperCase()} \u6587\u4EF6\u672A\u89E3\u6790\u5230\u8868\u683C\u3002`);
       return true;
     }
     if (/<office:presentation\b|<draw:page\b/i.test(xml)) {
-      renderOfficePackageNotice(panel, extension, "\u68C0\u6D4B\u5230 OpenDocument Presentation \u5305\u7ED3\u6784\uFF0C\u5DF2\u6309 ODP \u517C\u5BB9\u8DEF\u5F84\u9884\u89C8\u3002");
       renderOpenDocumentPresentation(panel, `${extension.toUpperCase()} \u6F14\u793A\u6587\u7A3F`, xml, await extractZipImages(zip, /^Pictures\//));
       return true;
     }
     if (/<office:text\b|<text:p\b/i.test(xml)) {
-      renderOfficePackageNotice(panel, extension, "\u68C0\u6D4B\u5230 OpenDocument Text \u5305\u7ED3\u6784\uFF0C\u5DF2\u6309 ODT \u517C\u5BB9\u8DEF\u5F84\u9884\u89C8\u3002");
       renderOpenDocumentXml(panel, `${extension.toUpperCase()} \u6587\u6863`, xml);
       return true;
     }
@@ -6008,14 +6076,6 @@ async function renderPackagedOfficePreview(panel, arrayBuffer, extension) {
   }
   return false;
 }
-function renderOfficePackageNotice(panel, extension, message) {
-  const section = createSection("\u517C\u5BB9\u5305\u8BC6\u522B");
-  const note = document.createElement("p");
-  note.className = "ofv-office-package-note";
-  note.textContent = `.${extension} ${message}`;
-  section.append(note);
-  panel.append(section);
-}
 function renderOfficePackageStructure(panel, extension, entries, message, metadata) {
   const section = createSection("Office \u5305\u7ED3\u6784\u9884\u89C8");
   const note = document.createElement("p");
@@ -6663,7 +6723,7 @@ function rtfToText(rtf) {
   return rtf.replace(/\\'[0-9a-fA-F]{2}/g, "").replace(/\\par[d]?/g, "\n").replace(/\\tab/g, "	").replace(/\\[a-zA-Z]+\d* ?/g, "").replace(/[{}]/g, "").replace(/\n{3,}/g, "\n\n").trim();
 }
 async function readTextFromBuffer(arrayBuffer) {
-  return new TextDecoder("utf-8", { fatal: false }).decode(arrayBuffer);
+  return decodeTextBuffer(arrayBuffer);
 }
 function mimeTypeFromPath(path) {
   const extension = path.split(".").pop()?.toLowerCase();
@@ -6730,36 +6790,72 @@ function ofdPlugin() {
           }
         };
       }
-      const images = await readOfdImages(entries);
-      const pages = await readOfdPages(entries, images);
-      const section = createSection("OFD \u57FA\u7840\u9884\u89C8");
-      const note = document.createElement("p");
-      note.textContent = pages.length > 0 ? "\u5F53\u524D\u7248\u672C\u63D0\u53D6 OFD \u9875\u9762\u6587\u672C\u3001\u8DEF\u5F84\u3001\u76F4\u7EBF\u548C\u56FE\u7247\u5BF9\u8C61\uFF0C\u5E76\u6309 Boundary \u5750\u6807\u751F\u6210\u8F7B\u91CF SVG \u7248\u5F0F\u9884\u89C8\u3002\u590D\u6742\u5B57\u4F53\u3001\u7B7E\u7AE0\u548C\u989C\u8272\u7A7A\u95F4\u53EF\u540E\u7EED\u63A5\u5165\u4E13\u7528 OFD \u6E32\u67D3\u5668\u3002" : "\u5F53\u524D\u7248\u672C\u63D0\u53D6 OFD \u5305\u5185 XML \u6587\u672C\u548C\u6587\u4EF6\u7ED3\u6784\u3002\u7248\u5F0F\u7EA7\u6E32\u67D3\u53EF\u5728\u540E\u7EED\u63A5\u5165\u4E13\u7528 OFD \u6E32\u67D3\u5668\u3002";
-      section.append(note);
-      section.append(createOfdSummary(entries, pages, images));
+      const context = await readOfdContext(entries);
+      const pages = await readOfdPages(entries, context);
+      let zoom = 1;
+      let rotation = 0;
+      const applyZoom = () => {
+        panel.style.setProperty("--ofv-ofd-zoom", formatOfdCssNumber(zoom));
+        ctx.toolbar?.setZoom(zoom);
+      };
+      const applyRotation = () => {
+        const normalizedRotation = (rotation % 360 + 360) % 360;
+        panel.style.setProperty("--ofv-ofd-rotation", `${normalizedRotation}deg`);
+        panel.classList.toggle("is-ofd-rotated-sideways", normalizedRotation === 90 || normalizedRotation === 270);
+      };
       if (pages.length > 0) {
         const pagesWrap = document.createElement("div");
         pagesWrap.className = "ofv-ofd-pages";
         for (const page of pages) {
           pagesWrap.append(renderOfdPage(page));
         }
-        section.append(pagesWrap);
-      }
-      const content = document.createElement("pre");
-      content.className = "ofv-text-block";
-      content.textContent = textFragments.slice(0, 300).join("\n") || "\u672A\u63D0\u53D6\u5230\u53EF\u8BFB\u6587\u672C\u3002";
-      section.append(content);
-      const list = createSection(`\u6587\u4EF6\u7ED3\u6784 ${entries.length}`);
-      const ul = document.createElement("ul");
-      for (const entry of entries.slice(0, 200)) {
-        const li = document.createElement("li");
-        li.textContent = entry.name;
-        ul.append(li);
-      }
-      list.append(ul);
-      panel.append(section, list);
+        panel.append(pagesWrap);
+        applyZoom();
+        applyRotation();
+      }
+      if (pages.length === 0) {
+        const content = document.createElement("pre");
+        content.className = "ofv-text-block";
+        content.textContent = textFragments.slice(0, 300).join("\n") || "\u672A\u63D0\u53D6\u5230\u53EF\u8BFB\u6587\u672C\u3002";
+        panel.append(content);
+      }
       return {
+        canCommand(command) {
+          return pages.length > 0 && (command === "zoom-in" || command === "zoom-out" || command === "zoom-reset" || command === "rotate-right" || command === "rotate-left");
+        },
+        command(command) {
+          if (pages.length === 0) {
+            return false;
+          }
+          if (command === "zoom-in") {
+            zoom = Math.min(4, zoom + 0.15);
+            applyZoom();
+            return true;
+          }
+          if (command === "zoom-out") {
+            zoom = Math.max(0.25, zoom - 0.15);
+            applyZoom();
+            return true;
+          }
+          if (command === "zoom-reset") {
+            zoom = 1;
+            applyZoom();
+            return true;
+          }
+          if (command === "rotate-right") {
+            rotation += 90;
+            applyRotation();
+            return true;
+          }
+          if (command === "rotate-left") {
+            rotation -= 90;
+            applyRotation();
+            return true;
+          }
+          return false;
+        },
         destroy() {
+          ctx.toolbar?.setZoom(void 0);
           panel.remove();
           revokeObjectUrl(url, isExternal);
         }
@@ -6767,76 +6863,71 @@ function ofdPlugin() {
     }
   };
 }
-function createOfdSummary(entries, pages, images) {
-  const summary = document.createElement("div");
-  summary.className = "ofv-ofd-summary";
-  const xmlEntries = entries.filter((entry) => entry.name.endsWith(".xml")).length;
-  const textCount = pages.reduce((count, page) => count + page.texts.length, 0);
-  const pathCount = pages.reduce((count, page) => count + page.paths.length, 0);
-  const lineCount = pages.reduce((count, page) => count + page.lines.length, 0);
-  const imageCount = pages.reduce((count, page) => count + page.images.length, 0);
-  const textLength = pages.reduce((count, page) => count + page.texts.reduce((inner, item) => inner + item.text.length, 0), 0);
-  appendOfdSummary(summary, "\u6587\u4EF6", String(entries.length));
-  appendOfdSummary(summary, "XML", String(xmlEntries));
-  appendOfdSummary(summary, "\u9875\u9762", String(pages.length));
-  appendOfdSummary(summary, "\u6587\u672C", String(textCount));
-  appendOfdSummary(summary, "\u8DEF\u5F84", String(pathCount));
-  appendOfdSummary(summary, "\u7EBF\u6761", String(lineCount));
-  appendOfdSummary(summary, "\u56FE\u7247\u5BF9\u8C61", String(imageCount));
-  appendOfdSummary(summary, "\u56FE\u7247\u8D44\u6E90", String(uniqueOfdImageResources(images)));
-  if (textLength > 0) {
-    appendOfdSummary(summary, "\u6587\u5B57\u957F\u5EA6", String(textLength));
-  }
-  const sizes = formatOfdPageSizes(pages);
-  if (sizes) {
-    appendOfdSummary(summary, "\u9875\u9762\u5C3A\u5BF8", sizes);
-  }
-  return summary;
-}
-function appendOfdSummary(parent, label, value) {
-  const item = document.createElement("span");
-  const key = document.createElement("span");
-  key.textContent = label;
-  const content = document.createElement("strong");
-  content.textContent = value;
-  item.append(key, content);
-  parent.append(item);
-}
-function uniqueOfdImageResources(images) {
-  return new Set(images.values()).size;
-}
-function formatOfdPageSizes(pages) {
-  const counts = /* @__PURE__ */ new Map();
-  for (const page of pages) {
-    const key = `${Math.round(page.width)} x ${Math.round(page.height)}`;
-    counts.set(key, (counts.get(key) || 0) + 1);
-  }
-  return [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 4).map(([size, count]) => count > 1 ? `${size} (${count})` : size).join(", ");
-}
-async function readOfdPages(entries, images) {
+async function readOfdPages(entries, context) {
   const pages = [];
   const pageEntries = entries.filter((entry) => /(^|\/)Pages\/Page_[^/]+\/Content\.xml$/i.test(entry.name) || /(^|\/)Page_[^/]+\/Content\.xml$/i.test(entry.name)).slice(0, 80);
   for (const entry of pageEntries) {
     const xml = await entry.async("text");
-    const page = parseOfdPage(entry.name, xml, images);
+    const templates = await readPageTemplates(xml, context, entries);
+    const page = parseOfdPage(entry.name, xml, context.images, context.fonts, templates, context.pageSize);
     if (page.texts.length > 0 || page.paths.length > 0 || page.lines.length > 0 || page.images.length > 0) {
       pages.push(page);
     }
   }
   return pages;
 }
-function parseOfdPage(name, xml, images) {
+async function readPageTemplates(xml, context, entries) {
+  const doc = new DOMParser().parseFromString(xml, "application/xml");
+  if (doc.querySelector("parsererror")) {
+    return [];
+  }
+  const templateIds = Array.from(doc.getElementsByTagName("*")).filter((element) => element.localName === "Template").map((element) => getOfdAttribute(element, "TemplateID") || getOfdAttribute(element, "ID")).filter((id) => Boolean(id));
+  const templates = [];
+  for (const id of templateIds) {
+    const path = context.templates.get(id);
+    const entry = path ? findOfdEntry(entries, path) : void 0;
+    if (entry) {
+      templates.push(await entry.async("text"));
+    }
+  }
+  return templates;
+}
+function parseOfdPage(name, xml, images, fonts, templateXmls = [], defaultPageSize) {
   const doc = new DOMParser().parseFromString(xml, "application/xml");
   if (doc.querySelector("parsererror")) {
     return { name, width: 210, height: 297, texts: [], paths: [], lines: [], images: [] };
   }
-  const pageSize = parseOfdPageSize(doc);
+  const pageSize = parseOfdPageSize(doc, defaultPageSize);
+  const templatePages = templateXmls.map((templateXml) => {
+    const templateDoc = new DOMParser().parseFromString(templateXml, "application/xml");
+    return templateDoc.querySelector("parsererror") ? emptyOfdPageContent() : parseOfdPageContent(templateDoc, images, fonts);
+  });
+  const pageContent = parseOfdPageContent(doc, images, fonts);
+  const texts = [...templatePages.flatMap((page) => page.texts), ...pageContent.texts];
+  const paths = [...templatePages.flatMap((page) => page.paths), ...pageContent.paths];
+  const lines = [...templatePages.flatMap((page) => page.lines), ...pageContent.lines];
+  const imageObjects = [...templatePages.flatMap((page) => page.images), ...pageContent.images];
+  if (pageSize.explicit) {
+    return { name, width: pageSize.width, height: pageSize.height, texts, paths, lines, images: imageObjects };
+  }
+  const bounds = createOfdBounds(texts, paths, lines, imageObjects);
+  const width = Math.max(pageSize.width, ...bounds.map((item) => item.x + item.width + 12));
+  const height = Math.max(pageSize.height, ...bounds.map((item) => item.y + item.height + 12));
+  return { name, width, height, texts, paths, lines, images: imageObjects };
+}
+function parseOfdPageContent(doc, images, fonts) {
   const textObjects = Array.from(doc.getElementsByTagName("*")).filter((element) => element.localName === "TextObject");
-  const texts = textObjects.flatMap((element) => parseOfdTextObject(element));
+  const texts = textObjects.flatMap((element) => parseOfdTextObject(element, fonts));
   const paths = Array.from(doc.getElementsByTagName("*")).filter((element) => element.localName === "PathObject").flatMap((element) => parseOfdPathObject(element));
   const lines = Array.from(doc.getElementsByTagName("*")).filter((element) => element.localName === "LineObject").flatMap((element) => parseOfdLineObject(element));
   const imageObjects = Array.from(doc.getElementsByTagName("*")).filter((element) => element.localName === "ImageObject").flatMap((element) => parseOfdImageObject(element, images));
-  const bounds = [
+  return { texts, paths, lines, images: imageObjects };
+}
+function emptyOfdPageContent() {
+  return { texts: [], paths: [], lines: [], images: [] };
+}
+function createOfdBounds(texts, paths, lines, imageObjects) {
+  return [
     ...texts.map((item) => ({ x: item.x, y: item.y, width: item.width, height: item.height })),
     ...paths.map((item) => ({ x: item.x, y: item.y, width: item.width, height: item.height })),
     ...lines.map((item) => ({
@@ -6847,38 +6938,63 @@ function parseOfdPage(name, xml, images) {
     })),
     ...imageObjects.map((item) => ({ x: item.x, y: item.y, width: item.width, height: item.height }))
   ];
-  const width = Math.max(pageSize.width, ...bounds.map((item) => item.x + item.width + 12));
-  const height = Math.max(pageSize.height, ...bounds.map((item) => item.y + item.height + 12));
-  return { name, width, height, texts, paths, lines, images: imageObjects };
 }
-function parseOfdTextObject(element) {
+function parseOfdTextObject(element, fonts) {
   const boundary = parseBoundary(getOfdAttribute(element, "Boundary"));
   const size = finiteNumber2(getOfdAttribute(element, "Size"), Math.max(4, boundary.height || 5));
   const color = parseOfdColor(element, "#111827");
   const weight = finiteNumber2(getOfdAttribute(element, "Weight"), 400) >= 600 ? "700" : "400";
-  const letterSpacing = getOfdAttribute(element, "DeltaX") ? 0.5 : void 0;
+  const fontFamily = fontStackForOfdFont(fonts.get(getOfdAttribute(element, "Font") || ""));
+  const objectLetterSpacing = getOfdAttribute(element, "DeltaX") ? 0.5 : void 0;
   const textCodes = Array.from(element.getElementsByTagName("*")).filter((child) => child.localName === "TextCode");
   if (textCodes.length === 0) {
     return [];
   }
-  return textCodes.map((code) => {
+  return textCodes.flatMap((code) => {
     const x = boundary.x + finiteNumber2(getOfdAttribute(code, "X"), 0);
     const y = boundary.y + finiteNumber2(getOfdAttribute(code, "Y"), 0);
-    return {
-      text: code.textContent?.trim() || "",
-      x,
-      y,
-      width: boundary.width,
-      height: boundary.height,
-      size,
-      color,
-      weight,
-      letterSpacing
-    };
+    const text = code.textContent?.trim() || "";
+    const deltaX = parseOfdDeltaX(getOfdAttribute(code, "DeltaX"));
+    const align = deltaX ? "start" : inferOfdTextAlign(text, boundary);
+    const deltaY = getOfdAttribute(code, "DeltaY");
+    if (deltaY && text.length > 1) {
+      const step = parseOfdDeltaStep(deltaY, size);
+      return Array.from(text).map((char, index) => ({
+        text: char,
+        x,
+        y: y + index * step,
+        width: boundary.width,
+        height: boundary.height,
+        size,
+        color,
+        weight,
+        fontFamily,
+        letterSpacing: objectLetterSpacing,
+        vertical: true,
+        align
+      }));
+    }
+    return [
+      {
+        text,
+        x,
+        y,
+        width: boundary.width,
+        height: boundary.height,
+        size,
+        color,
+        weight,
+        fontFamily,
+        letterSpacing: deltaX ? void 0 : objectLetterSpacing,
+        deltaX,
+        align
+      }
+    ];
   }).filter((item) => item.text);
 }
 function parseOfdPathObject(element) {
   const boundary = parseBoundary(getOfdAttribute(element, "Boundary"));
+  const ctm = parseOfdCtm(getOfdAttribute(element, "CTM"));
   const commands = Array.from(element.getElementsByTagName("*")).filter(
     (child) => child.localName === "AbbreviatedData" || child.localName === "PathData"
   );
@@ -6893,9 +7009,10 @@ function parseOfdPathObject(element) {
       y: boundary.y,
       width: boundary.width,
       height: boundary.height,
-      stroke: parseOfdColor(element, "#334155", "StrokeColor"),
+      stroke: parseOfdColor(element, "#111827", "StrokeColor"),
       fill: parseOfdFill(element),
-      strokeWidth: finiteNumber2(getOfdAttribute(element, "LineWidth"), 1)
+      strokeWidth: finiteNumber2(getOfdAttribute(element, "LineWidth"), 1),
+      transform: createOfdPathTransform(boundary.x, boundary.y, ctm)
     }
   ];
 }
@@ -6912,7 +7029,7 @@ function parseOfdLineObject(element) {
       y1: boundary.y + start.y,
       x2: boundary.x + end.x,
       y2: boundary.y + end.y,
-      stroke: parseOfdColor(element, "#334155"),
+      stroke: parseOfdColor(element, "#111827"),
       strokeWidth: finiteNumber2(getOfdAttribute(element, "LineWidth"), 1)
     }
   ];
@@ -6934,6 +7051,8 @@ function parseOfdImageObject(element, images) {
 function renderOfdPage(page) {
   const figure = document.createElement("figure");
   figure.className = "ofv-ofd-page";
+  figure.style.setProperty("--ofv-ofd-page-width", `${formatOfdCssNumber(page.width)}mm`);
+  figure.style.setProperty("--ofv-ofd-page-height", `${formatOfdCssNumber(page.height)}mm`);
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("viewBox", `0 0 ${page.width} ${page.height}`);
   svg.setAttribute("role", "img");
@@ -6970,7 +7089,7 @@ function renderOfdPage(page) {
   for (const item of page.paths) {
     const path = document.createElementNS(svg.namespaceURI, "path");
     path.setAttribute("d", item.d);
-    path.setAttribute("transform", `translate(${item.x} ${item.y})`);
+    path.setAttribute("transform", item.transform);
     path.setAttribute("fill", item.fill);
     path.setAttribute("stroke", item.stroke);
     path.setAttribute("stroke-width", String(item.strokeWidth));
@@ -6989,22 +7108,63 @@ function renderOfdPage(page) {
   }
   for (const item of page.texts) {
     const text = document.createElementNS(svg.namespaceURI, "text");
-    text.setAttribute("x", String(item.x));
-    text.setAttribute("y", String(item.y + item.size));
+    text.setAttribute("x", String(item.align === "end" ? item.x + item.width : item.x));
+    text.setAttribute("y", String(item.y));
     text.setAttribute("font-size", String(item.size));
     text.setAttribute("fill", item.color);
     text.setAttribute("font-weight", item.weight);
+    text.setAttribute("font-family", item.fontFamily);
     if (item.letterSpacing !== void 0) {
       text.setAttribute("letter-spacing", String(item.letterSpacing));
     }
-    text.textContent = item.text;
+    if (item.deltaX && item.deltaX.length > 0 && item.align !== "end") {
+      const chars = Array.from(item.text);
+      let x = item.x;
+      for (let index = 0; index < chars.length; index += 1) {
+        const span = document.createElementNS(svg.namespaceURI, "tspan");
+        span.setAttribute("x", String(x));
+        span.setAttribute("y", String(item.y));
+        if (index < chars.length - 1) {
+          x += item.deltaX[Math.min(index, item.deltaX.length - 1)] || item.size;
+        }
+        span.textContent = chars[index];
+        text.append(span);
+      }
+    } else {
+      if (item.align === "end") {
+        text.setAttribute("text-anchor", "end");
+      }
+      text.textContent = item.text;
+    }
     svg.append(text);
   }
-  const caption = document.createElement("figcaption");
-  caption.textContent = `${page.name} \xB7 ${page.texts.length} text \xB7 ${page.paths.length} path \xB7 ${page.lines.length} line \xB7 ${page.images.length} image`;
-  figure.append(svg, caption);
+  figure.append(svg);
   return figure;
 }
+async function readOfdContext(entries) {
+  const images = await readOfdImages(entries);
+  const fonts = await readOfdFonts(entries);
+  const { templates, pageSize } = await readOfdDocumentInfo(entries);
+  return { images, templates, fonts, pageSize };
+}
+async function readOfdFonts(entries) {
+  const fonts = /* @__PURE__ */ new Map();
+  for (const entry of entries.filter((item) => /(?:^|\/)(?:DocumentRes|PublicRes)\.xml$/i.test(item.name))) {
+    const xml = await entry.async("text");
+    const doc = new DOMParser().parseFromString(xml, "application/xml");
+    if (doc.querySelector("parsererror")) {
+      continue;
+    }
+    for (const font of Array.from(doc.getElementsByTagName("*")).filter((element) => element.localName === "Font")) {
+      const id = getOfdAttribute(font, "ID");
+      const name = getOfdAttribute(font, "FontName") || getOfdAttribute(font, "FamilyName");
+      if (id && name) {
+        fonts.set(id, name.trim());
+      }
+    }
+  }
+  return fonts;
+}
 async function readOfdImages(entries) {
   const images = /* @__PURE__ */ new Map();
   for (const entry of entries.filter((item) => /\.(?:png|jpe?g|gif|bmp|webp)$/i.test(item.name)).slice(0, 80)) {
@@ -7019,17 +7179,69 @@ async function readOfdImages(entries) {
     images.set(entry.name, href);
     images.set(entry.name.split("/").pop() || entry.name, href);
   }
+  for (const entry of entries.filter((item) => /(?:^|\/)(?:DocumentRes|PublicRes)\.xml$/i.test(item.name))) {
+    const xml = await entry.async("text");
+    const doc = new DOMParser().parseFromString(xml, "application/xml");
+    if (doc.querySelector("parsererror")) {
+      continue;
+    }
+    const baseLoc = getOfdAttribute(doc.documentElement, "BaseLoc") || "";
+    const resourceDir = joinOfdPath(directoryName2(entry.name), baseLoc);
+    for (const media of Array.from(doc.getElementsByTagName("*")).filter((element) => element.localName === "MultiMedia")) {
+      const id = getOfdAttribute(media, "ID");
+      const mediaFile = findOfdChild(media, "MediaFile")?.textContent?.trim();
+      if (!id || !mediaFile) {
+        continue;
+      }
+      const imageEntry = findOfdEntry(entries, joinOfdPath(resourceDir, mediaFile)) || findOfdEntry(entries, mediaFile);
+      const href = imageEntry ? images.get(imageEntry.name) || images.get(imageEntry.name.split("/").pop() || imageEntry.name) : void 0;
+      if (href) {
+        images.set(id, href);
+      }
+    }
+  }
   return images;
 }
-function parseOfdPageSize(doc) {
+async function readOfdDocumentInfo(entries) {
+  const templates = /* @__PURE__ */ new Map();
+  let pageSize;
+  for (const entry of entries.filter((item) => /(?:^|\/)Document\.xml$/i.test(item.name))) {
+    const xml = await entry.async("text");
+    const doc = new DOMParser().parseFromString(xml, "application/xml");
+    if (doc.querySelector("parsererror")) {
+      continue;
+    }
+    const documentDir = directoryName2(entry.name);
+    const physicalBox = Array.from(doc.getElementsByTagName("*")).find((element) => element.localName === "PageArea")?.getElementsByTagName("*");
+    const pageAreaBox = physicalBox ? Array.from(physicalBox).find((element) => element.localName === "PhysicalBox") : void 0;
+    if (pageAreaBox?.textContent) {
+      const box = parseBoundary(pageAreaBox.textContent);
+      if (box.width > 0 && box.height > 0) {
+        pageSize = { width: box.width, height: box.height };
+      }
+    }
+    for (const template of Array.from(doc.getElementsByTagName("*")).filter((element) => element.localName === "TemplatePage")) {
+      const id = getOfdAttribute(template, "ID");
+      const baseLoc = getOfdAttribute(template, "BaseLoc");
+      if (id && baseLoc) {
+        templates.set(id, joinOfdPath(documentDir, baseLoc));
+      }
+    }
+  }
+  return { templates, pageSize };
+}
+function parseOfdPageSize(doc, defaultPageSize) {
+  if (defaultPageSize) {
+    return { ...defaultPageSize, explicit: true };
+  }
   const physicalBox = Array.from(doc.getElementsByTagName("*")).find((element) => element.localName === "PhysicalBox");
   if (physicalBox?.textContent) {
     const box = parseBoundary(physicalBox.textContent);
     if (box.width > 0 && box.height > 0) {
-      return { width: box.width, height: box.height };
+      return { width: box.width, height: box.height, explicit: true };
     }
   }
-  return { width: 210, height: 297 };
+  return { width: 210, height: 297, explicit: false };
 }
 function parseOfdColor(element, fallback, preferredLocalName = "FillColor") {
   const colorElement = findOfdChild(element, preferredLocalName) || findOfdChild(element, "StrokeColor") || findOfdChild(element, "FillColor");
@@ -7060,6 +7272,101 @@ function parsePoint(value, fallback) {
 function normalizeOfdPathData(value) {
   return value.replace(/\bM\s+/gi, "M ").replace(/\bL\s+/gi, "L ").replace(/\bC\s+/gi, "C ").replace(/\bQ\s+/gi, "Q ").replace(/\bA\s+/gi, "A ").replace(/\bB\s+/gi, "C ").replace(/\bZ\b/gi, "Z").replace(/\s+/g, " ").trim();
 }
+function parseOfdCtm(value) {
+  const parts = (value || "").trim().split(/\s+/).map((part) => Number(part));
+  if (parts.length !== 6 || parts.some((part) => !Number.isFinite(part))) {
+    return void 0;
+  }
+  return parts;
+}
+function createOfdPathTransform(x, y, ctm) {
+  if (!ctm) {
+    return `translate(${x} ${y})`;
+  }
+  const [a, b, c, d, e, f] = ctm;
+  return `translate(${x} ${y}) matrix(${a} ${b} ${c} ${d} ${e} ${f})`;
+}
+function parseOfdDeltaStep(value, fallback) {
+  const numbers = value.match(/-?\d+(?:\.\d+)?/g)?.map((part) => Number(part)).filter((part) => Number.isFinite(part)) || [];
+  return numbers.length > 0 ? numbers[numbers.length - 1] : fallback;
+}
+function parseOfdDeltaX(value) {
+  if (!value) {
+    return void 0;
+  }
+  const parts = value.match(/[a-z]+|-?\d+(?:\.\d+)?/gi) || [];
+  const deltas = [];
+  for (let index = 0; index < parts.length; index += 1) {
+    const token = parts[index];
+    if (/^g$/i.test(token)) {
+      const count = Number(parts[index + 1]);
+      const step = Number(parts[index + 2]);
+      if (Number.isFinite(count) && Number.isFinite(step)) {
+        deltas.push(...Array.from({ length: Math.max(0, Math.floor(count)) }, () => step));
+      }
+      index += 2;
+      continue;
+    }
+    const numeric = Number(token);
+    if (Number.isFinite(numeric)) {
+      deltas.push(numeric);
+    }
+  }
+  return deltas.length > 0 ? deltas : void 0;
+}
+function fontStackForOfdFont(fontName) {
+  const normalized = (fontName || "").trim().toLowerCase();
+  if (normalized.includes("courier")) {
+    return '"Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace';
+  }
+  if (normalized.includes("kaiti") || normalized.includes("kai") || normalized.includes("\u6977")) {
+    return '"STKaiti", "Kaiti SC", "KaiTi", "\u6977\u4F53", serif';
+  }
+  if (normalized.includes("simsun") || normalized.includes("simsong") || normalized.includes("song") || normalized.includes("\u5B8B")) {
+    return '"SimSong", "Songti SC", "STSong", SimSun, "\u5B8B\u4F53", serif';
+  }
+  if (normalized.includes("hei") || normalized.includes("\u9ED1")) {
+    return '"PingFang SC", "Microsoft YaHei", SimHei, sans-serif';
+  }
+  return '"SimSong", "Songti SC", "STSong", SimSun, "Noto Serif CJK SC", serif';
+}
+function inferOfdTextAlign(text, boundary) {
+  const normalized = text.trim();
+  if (!/^[¥￥]?\d+(?:\.\d+)?%?$/.test(normalized)) {
+    return "start";
+  }
+  if (boundary.x >= 75 || boundary.width <= 30) {
+    return "end";
+  }
+  return "start";
+}
+function findOfdEntry(entries, path) {
+  const normalized = normalizeOfdPath(path);
+  return entries.find((entry) => normalizeOfdPath(entry.name) === normalized || normalizeOfdPath(entry.name).endsWith(`/${normalized}`));
+}
+function joinOfdPath(...parts) {
+  const joined = parts.filter(Boolean).join("/");
+  const segments = [];
+  for (const segment of joined.split("/")) {
+    if (!segment || segment === ".") {
+      continue;
+    }
+    if (segment === "..") {
+      segments.pop();
+      continue;
+    }
+    segments.push(segment);
+  }
+  return segments.join("/");
+}
+function directoryName2(path) {
+  const normalized = normalizeOfdPath(path);
+  const index = normalized.lastIndexOf("/");
+  return index >= 0 ? normalized.slice(0, index) : "";
+}
+function normalizeOfdPath(path) {
+  return path.replace(/\\/g, "/").replace(/^\/+/, "").replace(/\/+/g, "/");
+}
 function mimeTypeFromPath2(path) {
   const extension = path.split(".").pop()?.toLowerCase();
   const map = {
@@ -7097,6 +7404,9 @@ function finiteNumber2(value, fallback) {
   const parsed = value === null ? Number.NaN : Number(value);
   return Number.isFinite(parsed) ? parsed : fallback;
 }
+function formatOfdCssNumber(value) {
+  return Number.isInteger(value) ? String(value) : value.toFixed(3).replace(/0+$/, "").replace(/\.$/, "");
+}
 function createOfdFallback(fileName, url, detail) {
   const fallback = document.createElement("div");
   fallback.className = "ofv-fallback";