@open-file-viewer/core 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -914,6 +914,8 @@ function createToolbar(toolbar, viewport, queue) {
   let queueLabel;
   let previousButton;
   let nextButton;
+  let zoomResetButton;
+  let currentZoom;
   const commandButtons = [];
   const customButtons = [];
   const disposers = [];
@@ -929,7 +931,9 @@ function createToolbar(toolbar, viewport, queue) {
     queue,
     element,
     search,
-    canCommand: canRunCommand
+    canCommand: canRunCommand,
+    zoom: currentZoom,
+    setZoom
   });
   const addButton = (label, title, action, className, icon) => {
     const button = document.createElement("button");
@@ -996,6 +1000,8 @@ function createToolbar(toolbar, viewport, queue) {
     }
     if (id === "zoom-reset" && options.zoom) {
       addCommandButton(id, getToolbarLabel(options, id), getToolbarTitle(options, id), "zoom-reset");
+      zoomResetButton = commandButtons[commandButtons.length - 1]?.button;
+      updateZoomLabel();
       return;
     }
     if (id === "rotate-right" && options.rotate) {
@@ -1098,6 +1104,22 @@ function createToolbar(toolbar, viewport, queue) {
       searchCount.textContent = "";
     }
   };
+  function setZoom(zoom) {
+    currentZoom = typeof zoom === "number" && Number.isFinite(zoom) && zoom > 0 ? zoom : void 0;
+    updateZoomLabel();
+    updateCustomButtons();
+    refreshCustomRender();
+  }
+  function updateZoomLabel() {
+    if (!zoomResetButton) {
+      return;
+    }
+    setToolbarButtonContent(
+      zoomResetButton,
+      currentZoom === void 0 ? getToolbarLabel(options, "zoom-reset") : formatToolbarZoom(currentZoom),
+      options.icons?.["zoom-reset"]
+    );
+  }
   const refreshCustomRender = () => {
     if (!options.render) {
       return;
@@ -1114,6 +1136,8 @@ function createToolbar(toolbar, viewport, queue) {
       file = nextFile;
       currentIndex = index;
       currentLength = length;
+      currentZoom = void 0;
+      updateZoomLabel();
       resetSearch();
       commandButtons.forEach(({ button }) => {
         button.disabled = true;
@@ -1139,6 +1163,7 @@ function createToolbar(toolbar, viewport, queue) {
       refreshCustomRender();
     },
     getContext,
+    setZoom,
     destroy() {
       search.clear();
       for (const dispose of disposers) {
@@ -1156,7 +1181,9 @@ function createToolbarContext({
   queue,
   element,
   search,
-  canCommand
+  canCommand,
+  zoom,
+  setZoom
 }) {
   return {
     file,
@@ -1165,6 +1192,8 @@ function createToolbarContext({
     viewport,
     canPrevious: index > 0,
     canNext: index < length - 1,
+    zoom,
+    zoomLabel: zoom === void 0 ? void 0 : formatToolbarZoom(zoom),
     async previous() {
       await queue.previous();
     },
@@ -1173,6 +1202,7 @@ function createToolbarContext({
     },
     command: queue.command,
     canCommand,
+    setZoom,
     download() {
       if (file) {
         downloadFile(file);
@@ -1220,6 +1250,9 @@ function getToolbarLabel(options, id) {
 function getToolbarTitle(options, id) {
   return options.titles?.[id] ?? options.labels?.[id] ?? defaultToolbarTitles[id];
 }
+function formatToolbarZoom(zoom) {
+  return `${Math.round(zoom * 100)}%`;
+}
 function getToolbarOrder(options, queueLength) {
   if (options.order) {
     return options.order;
@@ -1267,7 +1300,7 @@ function setToolbarButtonContent(button, label, icon) {
   iconElement.className = "ofv-toolbar-icon";
   iconElement.setAttribute("aria-hidden", "true");
   if (typeof icon === "string") {
-    iconElement.innerHTML = icon;
+    iconElement.append(sanitizeToolbarIcon(icon));
   } else {
     iconElement.append(icon.cloneNode(true));
   }
@@ -1276,6 +1309,96 @@ function setToolbarButtonContent(button, label, icon) {
   labelElement.textContent = label;
   button.append(iconElement, labelElement);
 }
+var allowedToolbarIconTags = /* @__PURE__ */ new Set([
+  "svg",
+  "g",
+  "path",
+  "circle",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "ellipse",
+  "defs",
+  "title",
+  "desc"
+]);
+var allowedToolbarIconAttrs = /* @__PURE__ */ new Set([
+  "aria-hidden",
+  "class",
+  "cx",
+  "cy",
+  "d",
+  "fill",
+  "focusable",
+  "height",
+  "id",
+  "points",
+  "r",
+  "rx",
+  "ry",
+  "stroke",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-width",
+  "transform",
+  "viewBox",
+  "width",
+  "x",
+  "x1",
+  "x2",
+  "y",
+  "y1",
+  "y2"
+]);
+function sanitizeToolbarIcon(icon) {
+  const template = document.createElement("template");
+  template.innerHTML = icon.trim();
+  const fragment = document.createDocumentFragment();
+  for (const child of Array.from(template.content.childNodes)) {
+    const sanitized = sanitizeToolbarIconNode(child);
+    if (sanitized) {
+      fragment.append(sanitized);
+    }
+  }
+  return fragment;
+}
+function sanitizeToolbarIconNode(node) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = node.textContent || "";
+    return text.trim() ? document.createTextNode(text) : null;
+  }
+  if (!(node instanceof Element)) {
+    return null;
+  }
+  const tagName = node.tagName.toLowerCase();
+  if (!allowedToolbarIconTags.has(tagName)) {
+    return null;
+  }
+  const sanitized = document.createElementNS("http://www.w3.org/2000/svg", tagName);
+  for (const attr of Array.from(node.attributes)) {
+    if (isSafeToolbarIconAttribute(attr.name, attr.value)) {
+      sanitized.setAttribute(attr.name, attr.value);
+    }
+  }
+  for (const child of Array.from(node.childNodes)) {
+    const sanitizedChild = sanitizeToolbarIconNode(child);
+    if (sanitizedChild) {
+      sanitized.append(sanitizedChild);
+    }
+  }
+  return sanitized;
+}
+function isSafeToolbarIconAttribute(name, value) {
+  const attrName = name.toLowerCase();
+  if (attrName.startsWith("on") || attrName.includes(":")) {
+    return false;
+  }
+  if (!allowedToolbarIconAttrs.has(name) && !allowedToolbarIconAttrs.has(attrName) && !attrName.startsWith("data-")) {
+    return false;
+  }
+  return !/^\s*(?:javascript|data:text\/html|vbscript):/i.test(value);
+}
 function isBuiltInToolbarAction(id) {
   return id in defaultToolbarLabels;
 }
@@ -1687,6 +1810,7 @@ function imagePlugin() {
       const updateTransform = () => {
         image.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale}) rotate(${rotation}deg)`;
         zoomLabel.textContent = `${Math.round(scale * 100)}%`;
+        ctx.toolbar?.setZoom(scale);
       };
       const showImageFallback = () => {
         stage.replaceChildren(createImageFallback(ctx.file.name, url));
@@ -1802,6 +1926,7 @@ function imagePlugin() {
           image.style.maxHeight = `${Math.max(0, size.height - controls.offsetHeight)}px`;
         },
         destroy() {
+          ctx.toolbar?.setZoom(void 0);
           for (const dispose of disposers) {
             dispose();
           }
@@ -3360,7 +3485,6 @@ var mimeLangMap = {
 };
 var MAX_HIGHLIGHT_CHARS = 18e4;
 var MAX_RENDER_CHARS = 6e5;
-var MONACO_LOADER_KEY = "__OFV_MONACO_LOADER__";
 function loadPrismCss(theme) {
   const lightId = "ofv-prism-css-light";
   const darkId = "ofv-prism-css-dark";
@@ -3584,10 +3708,6 @@ function textPlugin() {
       wrapButton.addEventListener("click", () => {
         const wrapped = wrapper.classList.toggle("is-wrapped");
         wrapButton.setAttribute("aria-pressed", String(wrapped));
-        monacoEditor?.updateOptions?.({ wordWrap: wrapped ? "on" : "off" });
-        if (fallbackEditor) {
-          fallbackEditor.wrap = wrapped ? "soft" : "off";
-        }
       });
       const copyButton = document.createElement("button");
       copyButton.type = "button";
@@ -3612,12 +3732,7 @@ function textPlugin() {
         downloadText(ctx.file.name, text);
         status.textContent = "Download ready";
       });
-      const editorButton = document.createElement("button");
-      editorButton.type = "button";
-      editorButton.className = "ofv-code-action";
-      editorButton.textContent = "Editor";
-      editorButton.setAttribute("aria-pressed", "false");
-      actions.append(status, editorButton, wrapButton, copyButton, downloadButton);
+      actions.append(wrapButton, copyButton, downloadButton, status);
       header.append(title, actions);
       const structureSummary = createTextStructureSummary(text, ext, lang, ctx.file.mimeType);
       const body = document.createElement("div");
@@ -3633,93 +3748,6 @@ function textPlugin() {
       code.textContent = codeText;
       pre.appendChild(code);
       body.append(gutter, pre);
-      const editorHost = document.createElement("div");
-      editorHost.className = "ofv-code-editor";
-      editorHost.hidden = true;
-      let monacoEditor;
-      let monacoModel;
-      let fallbackEditor;
-      let editorReady = false;
-      let editorLoading;
-      const showReader = () => {
-        editorHost.hidden = true;
-        body.hidden = false;
-        wrapper.classList.remove("is-editor");
-        editorButton.textContent = "Editor";
-        editorButton.setAttribute("aria-pressed", "false");
-      };
-      const showEditor = async () => {
-        if (text.length > MAX_RENDER_CHARS) {
-          status.textContent = "Editor skipped for large file";
-          return;
-        }
-        if (editorReady) {
-          body.hidden = true;
-          editorHost.hidden = false;
-          wrapper.classList.add("is-editor");
-          editorButton.textContent = "Reader";
-          editorButton.setAttribute("aria-pressed", "true");
-          monacoEditor?.layout?.();
-          return;
-        }
-        if (!editorLoading) {
-          editorLoading = (async () => {
-            editorButton.disabled = true;
-            status.textContent = "Loading editor";
-            try {
-              const monaco = await loadMonaco();
-              if (!monaco.editor?.create) {
-                throw new Error("Monaco editor API is unavailable.");
-              }
-              const monacoLanguage = toMonacoLanguage(ext, lang);
-              monaco.editor.setTheme?.(isDark ? "vs-dark" : "vs");
-              monacoModel = monaco.editor.createModel?.(text, monacoLanguage);
-              monacoEditor = monaco.editor.create(editorHost, {
-                ...monacoModel ? { model: monacoModel } : { value: text, language: monacoLanguage },
-                automaticLayout: true,
-                fontFamily: "var(--ofv-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)",
-                fontSize: 13,
-                lineNumbers: "on",
-                minimap: { enabled: text.length <= 8e4 },
-                readOnly: true,
-                renderLineHighlight: "line",
-                scrollBeyondLastLine: false,
-                wordWrap: wrapper.classList.contains("is-wrapped") ? "on" : "off"
-              });
-              editorReady = true;
-              status.textContent = "Editor ready";
-              body.hidden = true;
-              editorHost.hidden = false;
-              wrapper.classList.add("is-editor");
-              editorButton.textContent = "Reader";
-              editorButton.setAttribute("aria-pressed", "true");
-              monacoEditor.layout?.();
-            } catch (error) {
-              console.warn("Monaco editor failed to load; using built-in code editor fallback:", error);
-              fallbackEditor = createBasicCodeEditor(text, wrapper.classList.contains("is-wrapped"));
-              editorHost.replaceChildren(fallbackEditor);
-              editorReady = true;
-              status.textContent = "Basic editor";
-              body.hidden = true;
-              editorHost.hidden = false;
-              wrapper.classList.add("is-editor");
-              editorButton.textContent = "Reader";
-              editorButton.setAttribute("aria-pressed", "true");
-            } finally {
-              editorButton.disabled = false;
-            }
-          })();
-        }
-        await editorLoading;
-      };
-      editorButton.addEventListener("click", () => {
-        if (editorHost.hidden) {
-          void showEditor();
-        } else {
-          showReader();
-          status.textContent = "Reader mode";
-        }
-      });
       wrapper.append(header);
       if (structureSummary) {
         wrapper.append(structureSummary);
@@ -3737,7 +3765,6 @@ function textPlugin() {
         wrapper.append(notice);
       }
       wrapper.appendChild(body);
-      wrapper.appendChild(editorHost);
       ctx.viewport.appendChild(wrapper);
       if (shouldHighlight) {
         try {
@@ -3747,12 +3774,7 @@ function textPlugin() {
         }
       }
       return {
-        resize() {
-          monacoEditor?.layout?.();
-        },
         destroy() {
-          monacoEditor?.dispose?.();
-          monacoModel?.dispose?.();
           wrapper.remove();
         }
       };
@@ -3767,45 +3789,6 @@ function normalizeFileName2(name) {
   const baseName = name.split(/[\\/]/).pop() || name;
   return baseName.toLowerCase();
 }
-async function loadMonaco() {
-  const injectedLoader = globalThis[MONACO_LOADER_KEY];
-  if (typeof injectedLoader === "function") {
-    return await injectedLoader();
-  }
-  const importer = new Function("specifier", "return import(specifier)");
-  return importer("monaco-editor");
-}
-function toMonacoLanguage(ext, prismLanguage) {
-  if (ext === "vue") {
-    return "html";
-  }
-  if (ext === "tsx") {
-    return "typescript";
-  }
-  if (ext === "jsx") {
-    return "javascript";
-  }
-  if (prismLanguage === "markup") {
-    return ext === "xml" ? "xml" : "html";
-  }
-  if (prismLanguage === "bash") {
-    return "shell";
-  }
-  if (prismLanguage === "none") {
-    return "plaintext";
-  }
-  return prismLanguage;
-}
-function createBasicCodeEditor(text, wrapped) {
-  const textarea = document.createElement("textarea");
-  textarea.className = "ofv-code-editor-fallback";
-  textarea.readOnly = true;
-  textarea.spellcheck = false;
-  textarea.wrap = wrapped ? "soft" : "off";
-  textarea.value = text;
-  textarea.setAttribute("aria-label", "Code editor preview");
-  return textarea;
-}
 function createTextFallback(fileName, url) {
   const fallback = document.createElement("div");
   fallback.className = "ofv-fallback";
@@ -4043,7 +4026,13 @@ function pdfPlugin(options = {}) {
       scroller.className = "ofv-pdf ofv-pdf-pages";
       viewer.append(summary, scroller);
       ctx.viewport.append(viewer);
-      const documentTask = pdf.getDocument(url);
+      const documentTask = pdf.getDocument({
+        url,
+        cMapUrl: normalizedOptions.cMapUrl ?? `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdf.version}/cmaps/`,
+        cMapPacked: normalizedOptions.cMapPacked ?? true,
+        standardFontDataUrl: normalizedOptions.standardFontDataUrl ?? `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdf.version}/standard_fonts/`,
+        useSystemFonts: normalizedOptions.useSystemFonts ?? true
+      });
       const doc = await documentTask.promise.catch((error) => {
         viewer.remove();
         ctx.viewport.classList.add("ofv-center");
@@ -4079,6 +4068,7 @@ function pdfPlugin(options = {}) {
       let zoomFactor = 1;
       const updateSummary = () => {
         renderPdfSummary(summary, doc.numPages, pagesMeta, ctx.options.fit, zoomFactor);
+        ctx.toolbar?.setZoom(zoomFactor);
       };
       const clearPage = (pageIdx) => {
         const state = pageStates[pageIdx];
@@ -4102,12 +4092,17 @@ function pdfPlugin(options = {}) {
         try {
           const page = await doc.getPage(pageIdx + 1);
           const meta = pagesMeta[pageIdx];
-          const scale = ctx.options.fit === "actual" ? zoomFactor : Math.max(0.1, Math.min(5, (size.width - 32) / meta.width * zoomFactor));
+          const scale = ctx.options.fit === "actual" ? zoomFactor : Math.max(0.05, Math.min(5, getPdfAvailableWidth(size.width) / meta.width * zoomFactor));
           const viewport = page.getViewport({ scale });
+          const outputScale = getPdfOutputScale();
+          const cssWidth = Math.floor(viewport.width);
+          const cssHeight = Math.floor(viewport.height);
           const canvas = document.createElement("canvas");
           canvas.className = "ofv-pdf-page";
-          canvas.width = Math.floor(viewport.width);
-          canvas.height = Math.floor(viewport.height);
+          canvas.width = Math.floor(cssWidth * outputScale);
+          canvas.height = Math.floor(cssHeight * outputScale);
+          canvas.style.width = `${cssWidth}px`;
+          canvas.style.height = `${cssHeight}px`;
           const context = canvas.getContext("2d");
           if (!context) {
             throw new Error("Canvas 2D context is not available.");
@@ -4116,7 +4111,8 @@ function pdfPlugin(options = {}) {
           state.canvas = canvas;
           const renderTask = page.render({
             canvasContext: context,
-            viewport
+            viewport,
+            transform: outputScale === 1 ? void 0 : [outputScale, 0, 0, outputScale, 0, 0]
           });
           state.renderTask = renderTask;
           await renderTask.promise;
@@ -4124,8 +4120,8 @@ function pdfPlugin(options = {}) {
           const textContent = await page.getTextContent();
           const textLayer = document.createElement("div");
           textLayer.className = "ofv-pdf-text-layer";
-          textLayer.style.width = `${Math.floor(viewport.width)}px`;
-          textLayer.style.height = `${Math.floor(viewport.height)}px`;
+          textLayer.style.width = `${cssWidth}px`;
+          textLayer.style.height = `${cssHeight}px`;
           state.wrapper.appendChild(textLayer);
           for (const item of textContent.items) {
             if (!("str" in item)) continue;
@@ -4186,7 +4182,7 @@ function pdfPlugin(options = {}) {
         }
         for (let i = 0; i < doc.numPages; i++) {
           const meta = pagesMeta[i];
-          const scale = ctx.options.fit === "actual" ? zoomFactor : Math.max(0.1, Math.min(5, (size.width - 32) / meta.width * zoomFactor));
+          const scale = ctx.options.fit === "actual" ? zoomFactor : Math.max(0.05, Math.min(5, getPdfAvailableWidth(size.width) / meta.width * zoomFactor));
           const w = Math.floor(meta.width * scale);
           const h = Math.floor(meta.height * scale);
           const wrapper = document.createElement("div");
@@ -4241,6 +4237,7 @@ function pdfPlugin(options = {}) {
           }, 120);
         },
         destroy() {
+          ctx.toolbar?.setZoom(void 0);
           window.clearTimeout(resizeTimer);
           observer?.disconnect();
           pageStates.forEach((state) => {
@@ -4259,6 +4256,19 @@ function pdfPlugin(options = {}) {
     }
   };
 }
+function getPdfOutputScale() {
+  if (typeof window === "undefined") {
+    return 1;
+  }
+  return Math.max(1, Math.min(window.devicePixelRatio || 1, 2.5));
+}
+function getPdfAvailableWidth(width) {
+  if (!Number.isFinite(width) || width <= 0) {
+    return 1;
+  }
+  const gutter = width < 160 ? 16 : 32;
+  return Math.max(1, width - gutter);
+}
 function renderPdfSummary(summary, pages, pagesMeta, fit, zoomFactor) {
   summary.replaceChildren();
   appendPdfSummary(summary, "\u9875\u6570", String(pages));
@@ -5018,8 +5028,9 @@ function officePlugin() {
       ctx.viewport.append(panel);
       const extension = resolveFormat(ctx.file, officeMimeFormatMap);
       const arrayBuffer = await readArrayBuffer(ctx.file);
+      let disposeDocxFit;
       if (fileIsDocx(extension)) {
-        await renderDocx(panel, arrayBuffer);
+        disposeDocxFit = await renderDocx(panel, arrayBuffer);
       } else if (extension === "rtf") {
         renderPlainDocument(panel, "RTF \u6587\u6863", rtfToText(await readTextFromBuffer(arrayBuffer)));
       } else if (extension === "odt") {
@@ -5044,6 +5055,7 @@ function officePlugin() {
       }
       return {
         destroy() {
+          disposeDocxFit?.();
           panel.remove();
         }
       };
@@ -5077,6 +5089,8 @@ async function renderDocx(panel, arrayBuffer) {
       experimental: true,
       useBase64URL: true
     });
+    normalizeDocxLayout(content);
+    return fitDocxPages(content);
   } catch (error) {
     content.replaceChildren();
     const fallbackNote = document.createElement("div");
@@ -5091,6 +5105,97 @@ async function renderDocx(panel, arrayBuffer) {
     }
     console.warn("DOCX layout preview failed, fell back to Mammoth:", error);
   }
+  return () => void 0;
+}
+function normalizeDocxLayout(container) {
+  const pages = container.querySelectorAll("section.ofv-docx");
+  for (const page of pages) {
+    for (const element of page.querySelectorAll("[style*='line-height']")) {
+      const lineHeight = parseCssLineHeight(element.style.lineHeight);
+      if (lineHeight > 0 && lineHeight < 1) {
+        element.style.lineHeight = "1.2";
+      }
+    }
+  }
+}
+function parseCssLineHeight(value) {
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "normal") {
+    return 0;
+  }
+  if (trimmed.endsWith("%")) {
+    const parsedPercent = Number.parseFloat(trimmed);
+    return Number.isFinite(parsedPercent) ? parsedPercent / 100 : 0;
+  }
+  const parsed = Number.parseFloat(trimmed);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function fitDocxPages(container) {
+  const wrapper = container.querySelector(".ofv-docx-wrapper");
+  if (!wrapper) {
+    return () => void 0;
+  }
+  const update = () => {
+    const frames = ensureDocxPageFrames(wrapper);
+    if (frames.length === 0) {
+      wrapper.style.removeProperty("--ofv-docx-scale");
+      return;
+    }
+    const availableWidth = Math.max(1, container.clientWidth - 48);
+    const pageWidth = Math.max(
+      1,
+      ...frames.map(({ page }) => {
+        const rectWidth = page.getBoundingClientRect().width;
+        return page.offsetWidth || rectWidth || parseCssPixelValue(page.style.width) || 794;
+      })
+    );
+    const scale = Math.min(1, Math.max(0.35, availableWidth / pageWidth));
+    wrapper.style.setProperty("--ofv-docx-scale", formatCssNumber(scale));
+    wrapper.style.setProperty("--ofv-docx-page-width", `${pageWidth}px`);
+    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)}px`;
+      }
+    }
+  };
+  update();
+  const timers = [0, 80, 240].map((delay) => window.setTimeout(update, delay));
+  if (typeof ResizeObserver === "undefined") {
+    window.addEventListener("resize", update);
+    return () => {
+      timers.forEach((timer) => window.clearTimeout(timer));
+      window.removeEventListener("resize", update);
+    };
+  }
+  const observer = new ResizeObserver(update);
+  observer.observe(container);
+  observer.observe(wrapper);
+  return () => {
+    timers.forEach((timer) => window.clearTimeout(timer));
+    observer.disconnect();
+  };
+}
+function ensureDocxPageFrames(wrapper) {
+  const pages = Array.from(wrapper.querySelectorAll("section.ofv-docx"));
+  return pages.map((page) => {
+    const parent = page.parentElement;
+    if (parent?.classList.contains("ofv-docx-page-frame")) {
+      return { frame: parent, page };
+    }
+    const frame = document.createElement("div");
+    frame.className = "ofv-docx-page-frame";
+    page.before(frame);
+    frame.append(page);
+    return { frame, page };
+  });
+}
+function parseCssPixelValue(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function formatCssNumber(value) {
+  return Number.isFinite(value) ? value.toFixed(4).replace(/0+$/, "").replace(/\.$/, "") : "1";
 }
 async function renderDocxTextFallback(container, arrayBuffer) {
   const article = document.createElement("article");
@@ -5189,7 +5294,7 @@ async function renderSheet(panel, arrayBuffer, extension) {
     workbook = xlsx.read(arrayBuffer, { type: "array" });
   } catch (error) {
     if (isLegacyOfficeBinary(extension)) {
-      renderLegacyOfficeBinary(panel, extension, arrayBuffer, normalizeOfficeError(error));
+      renderLegacyOfficeBinary(panel, extension, arrayBuffer, `\u8868\u683C\u89E3\u6790\u5931\u8D25\uFF1A${normalizeOfficeError(error)}`);
       return;
     }
     renderSheetFallback(panel, extension, normalizeOfficeError(error));
@@ -6294,14 +6399,15 @@ function legacyOfficeFormatLabel(extension) {
 function renderLegacyOfficeBinary(panel, extension, arrayBuffer, parseError) {
   const fragments = extractLegacyOfficeText(arrayBuffer);
   panel.replaceChildren();
-  const section = createSection("Office \u4E8C\u8FDB\u5236\u57FA\u7840\u9884\u89C8");
+  const section = createSection("Office \u8F6C\u6362\u63D0\u793A");
+  section.classList.add("ofv-office-conversion");
   const format = document.createElement("p");
   const strong = document.createElement("strong");
   strong.textContent = `.${extension}`;
   format.append(
     strong,
     document.createTextNode(
-      " \u5C5E\u4E8E\u65E7\u7248 Microsoft Office \u4E8C\u8FDB\u5236\u683C\u5F0F\uFF0C\u6D4F\u89C8\u5668\u5185\u65E0\u6CD5\u9AD8\u4FDD\u771F\u89E3\u6790\uFF1B\u5F53\u524D\u5148\u63D0\u53D6\u53EF\u8BFB\u6587\u672C\u7247\u6BB5\u548C\u7ED3\u6784\u6307\u7EB9\uFF0C\u5B8C\u6574\u7248\u5F0F\u5EFA\u8BAE\u63A5\u5165 LibreOffice/OnlyOffice \u670D\u52A1\u7AEF\u8F6C\u6362\u3002"
+      " \u5C5E\u4E8E\u65E7\u7248 Microsoft Office \u4E8C\u8FDB\u5236\u683C\u5F0F\uFF0C\u6D4F\u89C8\u5668\u5185\u65E0\u6CD5\u9AD8\u4FDD\u771F\u89E3\u6790\uFF1B\u5F53\u524D\u4EC5\u5C55\u793A\u53EF\u4FE1\u6587\u672C\u7247\u6BB5\u548C\u7ED3\u6784\u6307\u7EB9\uFF0C\u5B8C\u6574\u6392\u7248\u5EFA\u8BAE\u63A5\u5165 LibreOffice/OnlyOffice \u670D\u52A1\u7AEF\u8F6C\u6362\u4E3A PDF/HTML\u3002"
     )
   );
   const meta = document.createElement("dl");
@@ -6310,12 +6416,15 @@ function renderLegacyOfficeBinary(panel, extension, arrayBuffer, parseError) {
   appendOfficeBinaryMeta(meta, "\u6587\u4EF6\u7ED3\u6784", hasOleSignature(arrayBuffer) ? "\u68C0\u6D4B\u5230 OLE Compound File \u7B7E\u540D" : "\u672A\u68C0\u6D4B\u5230\u6807\u51C6 OLE \u7B7E\u540D\uFF0C\u6309\u539F\u59CB\u4E8C\u8FDB\u5236\u5C1D\u8BD5\u63D0\u53D6");
   appendOfficeBinaryMeta(meta, "\u6587\u672C\u7247\u6BB5", `${fragments.length} \u6BB5`);
   if (parseError) {
-    appendOfficeBinaryMeta(meta, "\u8868\u683C\u89E3\u6790", `xlsx \u8BFB\u53D6\u5931\u8D25\uFF0C\u5DF2\u5207\u6362\u4E8C\u8FDB\u5236\u6307\u7EB9\uFF1A${parseError}`);
+    appendOfficeBinaryMeta(meta, "\u89E3\u6790\u72B6\u6001", parseError);
   }
   section.append(format, meta);
   if (fragments.length > 0) {
     const article = document.createElement("article");
-    article.className = "ofv-document";
+    article.className = "ofv-document ofv-office-binary-fragments";
+    const heading = document.createElement("h4");
+    heading.textContent = "\u53EF\u8BFB\u6587\u672C\u7247\u6BB5";
+    article.append(heading);
     for (const fragment of fragments.slice(0, 80)) {
       const paragraph = document.createElement("p");
       paragraph.textContent = fragment;
@@ -6324,7 +6433,8 @@ function renderLegacyOfficeBinary(panel, extension, arrayBuffer, parseError) {
     section.append(article);
   } else {
     const empty = document.createElement("p");
-    empty.textContent = "\u672A\u63D0\u53D6\u5230\u7A33\u5B9A\u53EF\u8BFB\u6587\u672C\u3002\u8BE5\u6587\u4EF6\u53EF\u80FD\u7ECF\u8FC7\u538B\u7F29\u3001\u52A0\u5BC6\uFF0C\u6216\u9700\u8981\u5B8C\u6574\u4E8C\u8FDB\u5236\u89E3\u6790\u5668\u3002";
+    empty.className = "ofv-office-binary-empty";
+    empty.textContent = "\u672A\u63D0\u53D6\u5230\u7A33\u5B9A\u53EF\u8BFB\u6587\u672C\u3002\u8BE5\u6587\u4EF6\u53EF\u80FD\u7ECF\u8FC7\u538B\u7F29\u3001\u52A0\u5BC6\uFF0C\u6216\u6587\u672C\u7F16\u7801\u65E0\u6CD5\u5728\u6D4F\u89C8\u5668\u7AEF\u53EF\u9760\u8BC6\u522B\uFF1B\u8BF7\u4F7F\u7528\u670D\u52A1\u7AEF LibreOffice/OnlyOffice \u8F6C\u6362\u540E\u9884\u89C8\u3002";
     section.append(empty);
   }
   panel.append(section);
@@ -6357,12 +6467,12 @@ function normalizeOfficeError(error) {
 function extractLegacyOfficeText(arrayBuffer) {
   const bytes = new Uint8Array(arrayBuffer);
   const fragments = [
-    ...extractPrintableRuns(bytes),
-    ...extractUtf16Runs(bytes)
-  ].map((fragment) => normalizeLegacyText(fragment)).filter((fragment) => fragment.length >= 3 && /[\p{L}\p{N}]/u.test(fragment));
+    ...extractPrintableRuns(bytes).map((text) => ({ text, source: "ascii" })),
+    ...extractUtf16Runs(bytes).map((text) => ({ text, source: "utf16" }))
+  ].map(({ text, source }) => ({ text: normalizeLegacyText(text), source })).filter(({ text, source }) => isReadableLegacyTextFragment(text, source));
   const unique = [];
   const seen = /* @__PURE__ */ new Set();
-  for (const fragment of fragments) {
+  for (const { text: fragment } of fragments) {
     const key = fragment.toLowerCase();
     if (!seen.has(key)) {
       seen.add(key);
@@ -6371,6 +6481,104 @@ function extractLegacyOfficeText(arrayBuffer) {
   }
   return unique.slice(0, 160);
 }
+function isReadableLegacyTextFragment(fragment, source) {
+  if (fragment.length > 600) {
+    return false;
+  }
+  if (isLegacyOfficeMetadataNoise(fragment)) {
+    return false;
+  }
+  if (!/[\p{L}\p{N}]/u.test(fragment)) {
+    return false;
+  }
+  const chars = Array.from(fragment);
+  const letters = chars.filter((char) => /\p{L}/u.test(char)).length;
+  const digits = chars.filter((char) => /\p{N}/u.test(char)).length;
+  const spaces = chars.filter((char) => /\s/u.test(char)).length;
+  const asciiLetters = chars.filter((char) => /[A-Za-z]/.test(char)).length;
+  const cjkLetters = chars.filter((char) => /[\u3400-\u9fff]/u.test(char)).length;
+  const punctuation = chars.filter((char) => /[^\p{L}\p{N}\s]/u.test(char)).length;
+  const alphaNumeric = letters + digits;
+  const readableRatio = alphaNumeric / chars.length;
+  const punctuationRatio = punctuation / chars.length;
+  if (fragment.length < 4 || readableRatio < 0.55 || punctuationRatio > 0.24) {
+    return false;
+  }
+  if (/([\p{L}\p{N}])\1{4,}/u.test(fragment)) {
+    return false;
+  }
+  if (cjkLetters >= 2) {
+    const suspiciousCjk = chars.filter((char) => isAsciiBytePairCjk(char)).length;
+    if (suspiciousCjk / cjkLetters > 0.65) {
+      return false;
+    }
+    if (isLikelyCjkHeading(fragment)) {
+      return true;
+    }
+    if (punctuation > 0 && fragment.length < 12) {
+      return false;
+    }
+    return cjkLetters >= 8 || cjkLetters >= 4 && spaces > 0;
+  }
+  if (asciiLetters >= 4) {
+    if (punctuation > 0 && spaces === 0) {
+      return false;
+    }
+    if (source === "ascii" && /^[A-Z]{2,8}$/.test(fragment)) {
+      return false;
+    }
+    if (spaces > 0) {
+      return letters >= 3;
+    }
+    return fragment.length >= 6;
+  }
+  if (spaces > 0 && letters >= 3) {
+    return true;
+  }
+  return false;
+}
+function isLegacyOfficeMetadataNoise(fragment) {
+  if (/[$�\uFFFD]/u.test(fragment)) {
+    return true;
+  }
+  if (/^(?:Root Entry|WordDocument|Workbook|Book|SummaryInformation|DocumentSummaryInformation|CompObj|ObjectPool|Data|PowerPoint Document|Pictures)$/i.test(fragment)) {
+    return true;
+  }
+  if (/\.(dotm?|docm?|pptx?|ppsx?|xlsm?|xlsx?)\b/i.test(fragment)) {
+    return true;
+  }
+  if (/^(?:默认段落字体|普通表格|正文|标题|副标题|目录|页眉|页脚|批注|超链接)(?:\s*\d+)?$/.test(fragment)) {
+    return true;
+  }
+  if (/\b(?:Normal|Default|Calibri|Times New Roman|WPS Office|Microsoft Office|KSOP?ProductBuildVer)\b/i.test(fragment)) {
+    return true;
+  }
+  if (/^\d+(?:Table|List|Heading|Title|Style)$/i.test(fragment)) {
+    return true;
+  }
+  if (/[{(]?[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}[})]?/i.test(fragment)) {
+    return true;
+  }
+  if (/^[A-Z_]{3,}$/.test(fragment) || /^[A-Za-z]+(?:Information|Document|Storage|Stream|Table|Data|Pool|Obj|Props)$/i.test(fragment)) {
+    return true;
+  }
+  return false;
+}
+function isLikelyCjkHeading(fragment) {
+  return /^(?:标题|第[一二三四五六七八九十\d]+[章节条]|[一二三四五六七八九十\d]+[、.．])\s*[\p{L}\p{N}\s-]*$/u.test(fragment);
+}
+function isAsciiBytePairCjk(char) {
+  const code = char.codePointAt(0) || 0;
+  if (code < 13312 || code > 40959) {
+    return false;
+  }
+  const low = code & 255;
+  const high = code >> 8;
+  return isPrintableAsciiByte(low) && isPrintableAsciiByte(high);
+}
+function isPrintableAsciiByte(value) {
+  return value >= 32 && value <= 126;
+}
 function extractPrintableRuns(bytes) {
   const fragments = [];
   let current = "";
@@ -6393,6 +6601,13 @@ function extractUtf16Runs(bytes) {
   const fragments = [];
   let current = "";
   for (let index = 0; index < bytes.length - 1; index += 2) {
+    if (looksLikeMisalignedAsciiUtf16(bytes[index], bytes[index + 1])) {
+      if (current.length >= 3) {
+        fragments.push(current);
+      }
+      current = "";
+      continue;
+    }
     const code = bytes[index] | bytes[index + 1] << 8;
     if (code >= 32 && code <= 55295 || code === 9) {
       current += String.fromCharCode(code);
@@ -6408,6 +6623,9 @@ function extractUtf16Runs(bytes) {
   }
   return fragments;
 }
+function looksLikeMisalignedAsciiUtf16(lowByte, highByte) {
+  return lowByte === 0 && (highByte >= 48 && highByte <= 57 || highByte >= 65 && highByte <= 90 || highByte >= 97 && highByte <= 122);
+}
 function normalizeLegacyText(value) {
   return value.replace(/[\u0000-\u001f]+/g, " ").replace(/\s+/g, " ").trim();
 }
@@ -7045,18 +7263,45 @@ function archivePlugin() {
       layout.className = "ofv-archive-layout";
       const sidebar = document.createElement("div");
       sidebar.className = "ofv-archive-sidebar";
+      const sidebarPanel = document.createElement("div");
+      sidebarPanel.className = "ofv-archive-sidebar-panel";
       const header = document.createElement("div");
       header.className = "ofv-archive-header";
-      header.textContent = `\u6587\u4EF6\u5217\u8868 (${archiveEntries.filter((e) => !e.dir).length})`;
-      sidebar.append(header);
+      const sidebarTitle = document.createElement("span");
+      sidebarTitle.className = "ofv-archive-header-title";
+      sidebarTitle.textContent = `\u6587\u4EF6\u5217\u8868 (${archiveEntries.filter((e) => !e.dir).length})`;
+      const sidebarToggle = document.createElement("button");
+      sidebarToggle.className = "ofv-archive-sidebar-toggle";
+      sidebarToggle.type = "button";
+      sidebarToggle.setAttribute("aria-label", "\u5C55\u5F00\u6587\u4EF6\u5217\u8868");
+      sidebarToggle.setAttribute("aria-expanded", "false");
+      sidebarToggle.title = "\u5C55\u5F00\u6587\u4EF6\u5217\u8868";
+      sidebarToggle.textContent = "\u2039";
+      header.append(sidebarToggle, sidebarTitle);
+      sidebarPanel.append(header);
       const tree = document.createElement("div");
       tree.className = "ofv-archive-tree";
-      sidebar.append(tree);
+      sidebarPanel.append(tree);
+      sidebar.append(sidebarPanel);
       const mainPanel = document.createElement("div");
       mainPanel.className = "ofv-archive-main";
       layout.append(sidebar, mainPanel);
       panel.append(layout);
       let currentSubInstance = null;
+      const getSidebarViewportWidth = () => ctx.viewport.clientWidth || ctx.size.width;
+      const shouldAutoCollapseSidebar = () => getSidebarViewportWidth() <= 520;
+      const setSidebarCollapsed = (collapsed) => {
+        layout.classList.toggle("is-sidebar-collapsed", collapsed);
+        sidebarToggle.setAttribute("aria-expanded", String(!collapsed));
+        const label = collapsed ? "\u5C55\u5F00\u6587\u4EF6\u5217\u8868" : "\u6536\u8D77\u6587\u4EF6\u5217\u8868";
+        sidebarToggle.setAttribute("aria-label", label);
+        sidebarToggle.title = label;
+        sidebarToggle.textContent = collapsed ? "\u203A" : "\u2039";
+      };
+      setSidebarCollapsed(false);
+      sidebarToggle.addEventListener("click", () => {
+        setSidebarCollapsed(!layout.classList.contains("is-sidebar-collapsed"));
+      });
       const showDefaultSummary = () => {
         mainPanel.replaceChildren();
         const summary = document.createElement("div");
@@ -7096,6 +7341,9 @@ function archivePlugin() {
           if (destroyed) {
             return;
           }
+          if (shouldAutoCollapseSidebar()) {
+            setSidebarCollapsed(true);
+          }
           const token = ++renderToken;
           sidebar.querySelectorAll(".ofv-archive-item").forEach((el) => {
             el.classList.remove("is-active");
@@ -9378,7 +9626,7 @@ function cadPlugin() {
         return { destroy: () => panel.remove() };
       }
       const dxf = await readTextFile(ctx.file);
-      const viewer = renderDxf(panel, dxf);
+      const viewer = renderDxf(panel, dxf, ctx);
       return {
         canCommand(command) {
           return viewer.canCommand(command);
@@ -9847,7 +10095,7 @@ function hexPreview(bytes) {
   }
   return rows.join("\n") || "\u65E0\u53EF\u5C55\u793A\u5B57\u8282\u3002";
 }
-function renderDxf(panel, dxf) {
+function renderDxf(panel, dxf, ctx) {
   const pairs = dxf.split(/\r?\n/).map((line) => line.trim());
   const lines = [];
   const circles = [];
@@ -10025,6 +10273,10 @@ function renderDxf(panel, dxf) {
   note.textContent = `\u5DF2\u63D0\u53D6 LINE ${lines.length} \u4E2A\u3001CIRCLE ${circles.length} \u4E2A\u3001ARC ${arcs.length} \u4E2A\u3001POLYLINE ${polylines.length} \u4E2A\u3001POINT ${points.length} \u4E2A\u3001TEXT ${texts.length} \u4E2A\u3002`;
   section.append(note, svg);
   panel.append(section);
+  const updateToolbarZoom = () => {
+    ctx.toolbar?.setZoom(initialViewBox.width / currentViewBox.width);
+  };
+  updateToolbarZoom();
   return {
     canCommand(command) {
       return command === "zoom-in" || command === "zoom-out" || command === "zoom-reset";
@@ -10039,14 +10291,19 @@ function renderDxf(panel, dxf) {
         currentViewBox.x = centerX - currentViewBox.width / 2;
         currentViewBox.y = centerY - currentViewBox.height / 2;
         applyViewBox();
+        updateToolbarZoom();
         return true;
       }
       if (command === "zoom-reset") {
         currentViewBox = { ...initialViewBox };
         applyViewBox();
+        updateToolbarZoom();
         return true;
       }
       return false;
+    },
+    destroy() {
+      ctx.toolbar?.setZoom(void 0);
     }
   };
 }
@@ -10322,6 +10579,12 @@ function model3dPlugin() {
         renderer.setSize(width, height, false);
       };
       resize(ctx.size);
+      const updateToolbarZoom = () => {
+        const currentDistance = vectorDistance(camera.position, controls.target);
+        const initialDistance = vectorDistance(initialFrame.cameraPosition, initialFrame.target);
+        ctx.toolbar?.setZoom(initialDistance > 0 ? initialDistance / currentDistance : void 0);
+      };
+      updateToolbarZoom();
       return {
         canCommand(command) {
           return command === "zoom-in" || command === "zoom-out" || command === "zoom-reset" || command === "rotate-right" || command === "rotate-left";
@@ -10332,6 +10595,7 @@ function model3dPlugin() {
             camera.position.sub(controls.target).multiplyScalar(factor).add(controls.target);
             camera.updateProjectionMatrix();
             controls.update();
+            updateToolbarZoom();
             return true;
           }
           if (command === "zoom-reset") {
@@ -10341,6 +10605,7 @@ function model3dPlugin() {
             camera.far = initialFrame.far;
             camera.updateProjectionMatrix();
             controls.update();
+            updateToolbarZoom();
             return true;
           }
           if (command === "rotate-right" || command === "rotate-left") {
@@ -10351,6 +10616,7 @@ function model3dPlugin() {
         },
         resize,
         destroy() {
+          ctx.toolbar?.setZoom(void 0);
           window.cancelAnimationFrame(animationFrame);
           controls.dispose();
           renderer.dispose();
@@ -10362,6 +10628,12 @@ function model3dPlugin() {
     }
   };
 }
+function vectorDistance(a, b) {
+  if (typeof a.distanceTo === "function") {
+    return a.distanceTo(b);
+  }
+  return Math.hypot(a.x - b.x, a.y - b.y, a.z - b.z);
+}
 function renderModelFallback(ctx, url, isExternal, message) {
   const panel = document.createElement("div");
   panel.className = "ofv-fallback";
@@ -10718,34 +10990,65 @@ function gisPlugin() {
       }
       const wrapper = document.createElement("div");
       wrapper.className = "ofv-gis-viewer";
-      wrapper.append(createGisSummary(geojson));
+      const summary = summarizeGeoJson(geojson);
+      wrapper.append(createGisSummary(summary));
       ctx.viewport.appendChild(wrapper);
       const mapContainer = document.createElement("div");
       mapContainer.className = "ofv-map-stage";
       wrapper.appendChild(mapContainer);
+      if (summary.features === 0) {
+        mapContainer.append(createEmptyMapState());
+      } else {
+        mapContainer.append(createMapLegend(summary));
+      }
       const map = Leaflet.map(mapContainer).setView([0, 0], 2);
       Leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
       }).addTo(map);
       const geojsonLayer = Leaflet.geoJSON(geojson, {
         style: () => ({
-          color: "#3b82f6",
+          className: "ofv-map-feature",
+          color: "#e11d48",
           weight: 2,
-          opacity: 0.8,
-          fillColor: "#93c5fd",
-          fillOpacity: 0.35
+          opacity: 0.92,
+          fillColor: "#fb923c",
+          fillOpacity: 0.3,
+          lineCap: "round",
+          lineJoin: "round"
         }),
         pointToLayer: (feature, latlng) => {
           return Leaflet.circleMarker(latlng, {
-            radius: 6,
-            fillColor: "#3b82f6",
+            className: "ofv-map-feature ofv-map-point",
+            radius: 7,
+            fillColor: "#e11d48",
             color: "#ffffff",
-            weight: 1.5,
+            weight: 2.5,
             opacity: 1,
-            fillOpacity: 0.8
+            fillOpacity: 0.9
           });
         },
         onEachFeature: (feature, layer) => {
+          const label = feature.properties?.name || feature.properties?.title || feature.properties?.label;
+          if (label) {
+            layer.bindTooltip?.(String(label), {
+              className: "ofv-map-tooltip",
+              direction: "top",
+              sticky: true
+            });
+          }
+          layer.on?.({
+            mouseover(event) {
+              event.target?.setStyle?.({
+                weight: 4,
+                opacity: 1,
+                fillOpacity: 0.4
+              });
+              event.target?.bringToFront?.();
+            },
+            mouseout(event) {
+              geojsonLayer.resetStyle?.(event.target);
+            }
+          });
           if (feature.properties) {
             const props = feature.properties;
             const keys = Object.keys(props);
@@ -10780,15 +11083,20 @@ function gisPlugin() {
         const bounds = geojsonLayer.getBounds();
         if (bounds.isValid()) {
           map.fitBounds(bounds, { padding: [20, 20] });
+          map.invalidateSize();
         }
       } catch (e) {
         console.warn("Could not fit bounds for GeoJSON data:", e);
       }
+      const resizeTimers = [0, 80, 240].map((delay) => window.setTimeout(() => {
+        map.invalidateSize();
+      }, delay));
       return {
         resize() {
           map.invalidateSize();
         },
         destroy() {
+          resizeTimers.forEach((timer) => window.clearTimeout(timer));
           map.remove();
           wrapper.remove();
         }
@@ -10813,8 +11121,7 @@ function normalizeGisError(error, fileName) {
 function isGisFallback(value) {
   return typeof value === "object" && value !== null && "fallback" in value;
 }
-function createGisSummary(geojson) {
-  const summary = summarizeGeoJson(geojson);
+function createGisSummary(summary) {
   const bar = document.createElement("div");
   bar.className = "ofv-gis-summary";
   appendSummaryItem(bar, "\u8981\u7D20", String(summary.features));
@@ -10828,6 +11135,26 @@ function createGisSummary(geojson) {
   }
   return bar;
 }
+function createEmptyMapState() {
+  const empty = document.createElement("div");
+  empty.className = "ofv-map-empty";
+  const title = document.createElement("strong");
+  title.textContent = "\u6682\u65E0\u53EF\u5C55\u793A\u7684\u5730\u56FE\u8981\u7D20";
+  const detail = document.createElement("span");
+  detail.textContent = "GeoJSON \u5DF2\u8BC6\u522B\uFF0C\u4F46 features \u4E3A\u7A7A\u3002";
+  empty.append(title, detail);
+  return empty;
+}
+function createMapLegend(summary) {
+  const legend = document.createElement("div");
+  legend.className = "ofv-map-legend";
+  const title = document.createElement("strong");
+  title.textContent = "GeoJSON";
+  const detail = document.createElement("span");
+  detail.textContent = `${summary.features} \u4E2A\u8981\u7D20 \xB7 ${formatGeometryCounts(summary.geometryCounts)}`;
+  legend.append(title, detail);
+  return legend;
+}
 function appendSummaryItem(parent, label, value) {
   const item = document.createElement("span");
   const key = document.createElement("span");