@files-preview-app/preview-file 1.3.8 → 1.3.10

package/dist/index.cjs

@@ -1713,19 +1713,85 @@ var FilePreviewViewer = class _FilePreviewViewer {
     if (this.wrapperEl?.parentNode) {
       this.wrapperEl.parentNode.removeChild(this.wrapperEl);
     }
+    if (typeof document !== "undefined" && !document.getElementById("fp-core-injected-styles")) {
+      const styleEl = document.createElement("style");
+      styleEl.id = "fp-core-injected-styles";
+      styleEl.textContent = `
+        .fp-viewer {
+          display: flex !important;
+          flex-direction: column !important;
+          width: 100% !important;
+          height: 100% !important;
+          overflow: hidden !important;
+          position: relative !important;
+          box-sizing: border-box !important;
+        }
+        .fp-body {
+          display: flex !important;
+          flex: 1 1 0% !important;
+          min-height: 0 !important;
+          min-width: 0 !important;
+          width: 100% !important;
+          height: 100% !important;
+          overflow: hidden !important;
+          position: relative !important;
+          box-sizing: border-box !important;
+        }
+        .fp-content {
+          flex: 1 1 0% !important;
+          position: relative !important;
+          overflow: auto !important;
+          display: flex !important;
+          flex-direction: column !important;
+          align-items: stretch !important;
+          justify-content: flex-start !important;
+          width: 100% !important;
+          height: 100% !important;
+          min-width: 0 !important;
+          min-height: 0 !important;
+          box-sizing: border-box !important;
+        }
+      `;
+      document.head.appendChild(styleEl);
+    }
     const themeClass = options.theme === "dark" ? "fp-theme-dark" : "";
     const toolbarPos = options.toolbarPosition ?? "top";
     this.wrapperEl = document.createElement("div");
     this.wrapperEl.className = `fp-viewer ${themeClass} ${options.className ?? ""}`.trim();
     this.wrapperEl.tabIndex = 0;
+    this.wrapperEl.style.display = "flex";
+    this.wrapperEl.style.flexDirection = "column";
+    this.wrapperEl.style.width = "100%";
+    this.wrapperEl.style.height = "100%";
+    this.wrapperEl.style.overflow = "hidden";
+    this.wrapperEl.style.position = "relative";
     const toolbarEl = document.createElement("div");
     toolbarEl.className = "fp-toolbar-container";
     this.contentEl = document.createElement("div");
     this.contentEl.className = "fp-content";
+    this.contentEl.style.flex = "1 1 0%";
+    this.contentEl.style.position = "relative";
+    this.contentEl.style.overflow = "auto";
+    this.contentEl.style.display = "flex";
+    this.contentEl.style.flexDirection = "column";
+    this.contentEl.style.alignItems = "stretch";
+    this.contentEl.style.justifyContent = "flex-start";
+    this.contentEl.style.width = "100%";
+    this.contentEl.style.height = "100%";
+    this.contentEl.style.minWidth = "0";
+    this.contentEl.style.minHeight = "0";
+    this.contentEl.style.boxSizing = "border-box";
     const thumbnailEl = document.createElement("div");
     thumbnailEl.className = "fp-thumbnail-container";
     const bodyEl = document.createElement("div");
     bodyEl.className = "fp-body";
+    bodyEl.style.display = "flex";
+    bodyEl.style.flex = "1 1 0%";
+    bodyEl.style.minHeight = "0";
+    bodyEl.style.minWidth = "0";
+    bodyEl.style.width = "100%";
+    bodyEl.style.overflow = "hidden";
+    bodyEl.style.position = "relative";
     bodyEl.appendChild(thumbnailEl);
     bodyEl.appendChild(this.contentEl);
     const titleBarEl = document.createElement("div");
@@ -4519,31 +4585,80 @@ function csvPlugin() {
 }
 var CODE_EXTENSIONS = [
   ".txt",
+  ".log",
+  ".ini",
+  ".cfg",
+  ".conf",
+  ".env",
   ".json",
+  ".jsonc",
+  ".json5",
   ".js",
-  ".ts",
+  ".mjs",
+  ".cjs",
   ".jsx",
+  ".ts",
+  ".mts",
+  ".cts",
   ".tsx",
   ".html",
+  ".htm",
+  ".xhtml",
   ".css",
   ".scss",
+  ".sass",
   ".less",
   ".md",
+  ".markdown",
   ".xml",
+  ".svg",
+  ".xaml",
   ".yml",
   ".yaml",
+  ".toml",
   ".sh",
   ".bash",
+  ".zsh",
+  ".fish",
+  ".bat",
+  ".cmd",
+  ".ps1",
   ".py",
+  ".pyw",
   ".java",
+  ".class",
   ".c",
   ".cpp",
+  ".cc",
+  ".cxx",
   ".h",
+  ".hpp",
+  ".hxx",
   ".cs",
+  ".csx",
   ".go",
   ".rs",
   ".sql",
-  ".php"
+  ".php",
+  ".phtml",
+  ".rb",
+  ".swift",
+  ".kt",
+  ".kts",
+  ".scala",
+  ".r",
+  ".lua",
+  ".pl",
+  ".pm",
+  ".dart",
+  ".graphql",
+  ".gql",
+  ".proto",
+  ".diff",
+  ".patch",
+  ".dockerfile",
+  ".properties",
+  ".gradle"
 ];
 var CodePlugin = class {
   id = "code";
@@ -4561,34 +4676,36 @@ var CodePlugin = class {
   getToolbarActions(instance) {
     const totalPages = instance.getPageCount?.() ?? 1;
     const actions = [];
-    actions.push({
-      id: "thumbnails",
-      icon: "thumbnails",
-      label: "Page Thumbnails",
-      type: "button",
-      group: "navigation",
-      execute: () => instance.toggleThumbnails?.()
-    });
-    actions.push({
-      id: "page-nav",
-      icon: "",
-      label: "Page Navigation",
-      type: "page-nav",
-      group: "navigation",
-      value: instance.getCurrentPage?.() ?? 1,
-      max: totalPages,
-      execute: (action, page) => {
-        const cur = instance.getCurrentPage?.() ?? 1;
-        const max = instance.getPageCount?.() ?? 1;
-        if (action === "prev") {
-          if (cur > 1) instance.goToPage?.(cur - 1);
-        } else if (action === "next") {
-          if (cur < max) instance.goToPage?.(cur + 1);
-        } else if (typeof page === "number") {
-          instance.goToPage?.(page);
+    if (totalPages > 1) {
+      actions.push({
+        id: "thumbnails",
+        icon: "thumbnails",
+        label: "Page Thumbnails",
+        type: "button",
+        group: "navigation",
+        execute: () => instance.toggleThumbnails?.()
+      });
+      actions.push({
+        id: "page-nav",
+        icon: "",
+        label: "Page Navigation",
+        type: "page-nav",
+        group: "navigation",
+        value: instance.getCurrentPage?.() ?? 1,
+        max: totalPages,
+        execute: (action, page) => {
+          const cur = instance.getCurrentPage?.() ?? 1;
+          const max = instance.getPageCount?.() ?? 1;
+          if (action === "prev") {
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            if (cur < max) instance.goToPage?.(cur + 1);
+          } else if (typeof page === "number") {
+            instance.goToPage?.(page);
+          }
         }
-      }
-    });
+      });
+    }
     actions.push(
       {
         id: "zoom-out",
@@ -4725,10 +4842,6 @@ var CodePlugin = class {
     }
     const totalPages = Math.max(1, rawPages.length);
     let currentPage = 1;
-    const container = document.createElement("div");
-    container.style.width = "100%";
-    container.style.height = "100%";
-    container.style.overflow = "auto";
     let fontSize = 13;
     let rotation = 0;
     let zoomLevel = 1;
@@ -4737,9 +4850,10 @@ var CodePlugin = class {
     const code = document.createElement("code");
     const sizer = document.createElement("div");
     const scrollWrapper = document.createElement("div");
+    const lineGutter = document.createElement("div");
+    ctx.container.style.overflow = "auto";
     if (isTxt) {
-      container.style.overflow = "auto";
-      container.style.backgroundColor = "#f1f5f9";
+      ctx.container.style.backgroundColor = "#f1f5f9";
       scrollWrapper.className = "fp-code-scroll-wrapper";
       scrollWrapper.style.minWidth = "100%";
       scrollWrapper.style.minHeight = "100%";
@@ -4774,18 +4888,88 @@ var CodePlugin = class {
       pre.style.transition = "transform 0.15s ease";
       pre.style.flexShrink = "0";
     } else {
-      container.style.overflow = "auto";
-      container.style.backgroundColor = "#1e1e1e";
-      container.style.color = "#d4d4d4";
-      container.style.padding = "16px";
-      container.style.boxSizing = "border-box";
+      if (typeof document !== "undefined" && !document.getElementById("fp-code-syntax-styles")) {
+        const style = document.createElement("style");
+        style.id = "fp-code-syntax-styles";
+        style.textContent = `
+          .fp-code-scroll-wrapper .hljs-keyword { color: #569cd6; font-weight: normal; }
+          .fp-code-scroll-wrapper .hljs-built_in { color: #4ec9b0; }
+          .fp-code-scroll-wrapper .hljs-type { color: #4ec9b0; }
+          .fp-code-scroll-wrapper .hljs-literal { color: #569cd6; }
+          .fp-code-scroll-wrapper .hljs-number { color: #b5cea8; }
+          .fp-code-scroll-wrapper .hljs-regexp { color: #d16969; }
+          .fp-code-scroll-wrapper .hljs-string { color: #ce9178; }
+          .fp-code-scroll-wrapper .hljs-subst { color: #d4d4d4; }
+          .fp-code-scroll-wrapper .hljs-symbol { color: #569cd6; }
+          .fp-code-scroll-wrapper .hljs-class { color: #4ec9b0; }
+          .fp-code-scroll-wrapper .hljs-function { color: #dcdcaa; }
+          .fp-code-scroll-wrapper .hljs-title { color: #dcdcaa; }
+          .fp-code-scroll-wrapper .hljs-params { color: #9cdcfe; }
+          .fp-code-scroll-wrapper .hljs-comment { color: #6a9955; font-style: italic; }
+          .fp-code-scroll-wrapper .hljs-doctag { color: #608b4e; }
+          .fp-code-scroll-wrapper .hljs-meta { color: #9cdcfe; }
+          .fp-code-scroll-wrapper .hljs-section { color: #569cd6; }
+          .fp-code-scroll-wrapper .hljs-tag { color: #569cd6; }
+          .fp-code-scroll-wrapper .hljs-name { color: #569cd6; }
+          .fp-code-scroll-wrapper .hljs-attr { color: #9cdcfe; }
+          .fp-code-scroll-wrapper .hljs-attribute { color: #9cdcfe; }
+          .fp-code-scroll-wrapper .hljs-variable { color: #9cdcfe; }
+          .fp-code-scroll-wrapper .hljs-punctuation { color: #d4d4d4; }
+        `;
+        document.head.appendChild(style);
+      }
+      ctx.container.style.backgroundColor = "#1e1e1e";
+      ctx.container.style.color = "#d4d4d4";
+      scrollWrapper.className = "fp-code-scroll-wrapper";
+      scrollWrapper.style.minWidth = "100%";
+      scrollWrapper.style.minHeight = "100%";
+      scrollWrapper.style.width = "max-content";
+      scrollWrapper.style.height = "max-content";
+      scrollWrapper.style.display = "flex";
+      scrollWrapper.style.alignItems = "flex-start";
+      scrollWrapper.style.padding = "16px 16px 16px 0";
+      scrollWrapper.style.boxSizing = "border-box";
+      const rawLines = fullText.split(/\r?\n/);
+      if (rawLines.length > 1 && rawLines[rawLines.length - 1] === "") {
+        rawLines.pop();
+      }
+      const lineCount = Math.max(1, rawLines.length);
+      const gutterLines = [];
+      for (let i = 1; i <= lineCount; i++) {
+        gutterLines.push(String(i));
+      }
+      lineGutter.className = "fp-code-gutter";
+      lineGutter.style.userSelect = "none";
+      lineGutter.style.textAlign = "right";
+      lineGutter.style.padding = "0 16px";
+      lineGutter.style.margin = "0 16px 0 0";
+      lineGutter.style.borderRight = "1px solid #333333";
+      lineGutter.style.color = "#858585";
+      lineGutter.style.fontFamily = "Consolas, Menlo, Monaco, 'Courier New', monospace";
+      lineGutter.style.fontSize = `${fontSize}px`;
+      lineGutter.style.lineHeight = "1.6";
+      lineGutter.style.whiteSpace = "pre";
+      lineGutter.style.flexShrink = "0";
+      lineGutter.style.position = "sticky";
+      lineGutter.style.left = "0";
+      lineGutter.style.backgroundColor = "#1e1e1e";
+      lineGutter.style.zIndex = "2";
+      lineGutter.style.boxSizing = "border-box";
+      lineGutter.textContent = gutterLines.join("\n");
       pre.style.margin = "0";
-      pre.style.fontFamily = "Consolas, Menlo, Monaco, monospace";
+      pre.style.padding = "0 16px 0 0";
+      pre.style.fontFamily = "Consolas, Menlo, Monaco, 'Courier New', monospace";
       pre.style.fontSize = `${fontSize}px`;
-      pre.style.lineHeight = "1.5";
-      pre.style.whiteSpace = "pre-wrap";
-      pre.style.wordBreak = "break-all";
-      pre.style.transformOrigin = "top left";
+      pre.style.lineHeight = "1.6";
+      pre.style.whiteSpace = "pre";
+      pre.style.wordBreak = "normal";
+      pre.style.overflowWrap = "normal";
+      pre.style.flex = "1";
+      code.style.display = "block";
+      code.style.fontFamily = "inherit";
+      code.style.fontSize = "inherit";
+      code.style.lineHeight = "inherit";
+      code.style.whiteSpace = "inherit";
     }
     const ext = (ctx.metadata.extension || "").replace(".", "");
     const renderCodePage = (text) => {
@@ -4805,25 +4989,27 @@ var CodePlugin = class {
     };
     renderCodePage(rawPages[0] || (isTxt ? "" : fullText));
     pre.appendChild(code);
+    ctx.container.innerHTML = "";
     if (isTxt) {
       sizer.appendChild(pre);
       scrollWrapper.appendChild(sizer);
-      container.appendChild(scrollWrapper);
+      ctx.container.appendChild(scrollWrapper);
     } else {
-      container.appendChild(pre);
+      scrollWrapper.appendChild(lineGutter);
+      scrollWrapper.appendChild(pre);
+      ctx.container.appendChild(scrollWrapper);
     }
     const showPage = (pageNum) => {
       currentPage = Math.max(1, Math.min(totalPages, pageNum));
       renderCodePage(rawPages[currentPage - 1] || (isTxt ? "" : fullText));
-      container.scrollTop = 0;
+      ctx.container.scrollTop = 0;
       ctx.emit("page-change", { page: currentPage, total: totalPages });
     };
     if (totalPages > 1) {
       showPage(1);
     }
-    ctx.container.appendChild(container);
     const calculateTxtFit = () => {
-      const availW = Math.max(280, container.clientWidth - 32);
+      const availW = Math.max(280, ctx.container.clientWidth - 32);
       return Math.max(0.4, Math.min(3, availW / 816));
     };
     const updateTransform = () => {
@@ -4841,6 +5027,7 @@ var CodePlugin = class {
       } else {
         pre.style.transform = `rotate(${rotation}deg)`;
         pre.style.fontSize = `${fontSize}px`;
+        lineGutter.style.fontSize = `${fontSize}px`;
       }
     };
     let resizeObserver = null;
@@ -4855,11 +5042,11 @@ var CodePlugin = class {
           updateTransform();
         }
       }) : null;
-      resizeObserver?.observe(container);
+      resizeObserver?.observe(ctx.container);
     }
     const cleanup = () => {
       resizeObserver?.disconnect();
-      container.remove();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -4904,7 +5091,7 @@ var CodePlugin = class {
         if (isTxt) {
           zoomLevel = Math.min(3.5, zoomLevel + 0.15);
         } else {
-          fontSize = Math.min(32, fontSize + 2);
+          fontSize = Math.min(48, fontSize + 2);
         }
         updateTransform();
       },
@@ -4913,7 +5100,7 @@ var CodePlugin = class {
         if (isTxt) {
           zoomLevel = Math.max(0.1, zoomLevel - 0.15);
         } else {
-          fontSize = Math.max(8, fontSize - 2);
+          fontSize = Math.max(9, fontSize - 2);
         }
         updateTransform();
       },
@@ -4946,8 +5133,8 @@ var CodePlugin = class {
         fontSize = 13;
         rotation = 0;
         zoomLevel = isTxt ? calculateTxtFit() : 1;
-        container.scrollTop = 0;
-        container.scrollLeft = 0;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
         updateTransform();
       },
       rotateCW: () => {
@@ -5269,7 +5456,7 @@ var MarkdownPlugin = class {
       {
         id: "zoom-out",
         icon: "zoom-out",
-        label: "Decrease Font",
+        label: "Zoom Out",
         type: "button",
         group: "zoom",
         execute: () => instance.zoomOut?.()
@@ -5277,19 +5464,11 @@ var MarkdownPlugin = class {
       {
         id: "zoom-in",
         icon: "zoom-in",
-        label: "Increase Font",
+        label: "Zoom In",
         type: "button",
         group: "zoom",
         execute: () => instance.zoomIn?.()
       },
-      {
-        id: "fit-page",
-        icon: "fit-page",
-        label: "Default Size",
-        type: "button",
-        group: "zoom",
-        execute: () => instance.fitToPage?.()
-      },
       {
         id: "reset-zoom",
         icon: "reset-zoom",
@@ -5306,6 +5485,14 @@ var MarkdownPlugin = class {
         group: "zoom",
         execute: () => instance.fitToWidth?.()
       },
+      {
+        id: "fit-page",
+        icon: "fit-page",
+        label: "Fit to Page",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToPage?.()
+      },
       {
         id: "copy",
         icon: "copy",
@@ -5329,6 +5516,14 @@ var MarkdownPlugin = class {
         type: "button",
         group: "actions",
         execute: () => instance.print?.()
+      },
+      {
+        id: "open-window",
+        icon: "open-window",
+        label: "Open in Separate Full Window",
+        type: "button",
+        group: "actions",
+        execute: () => instance.openInSeparateWindow?.()
       }
     ];
   }
@@ -5341,35 +5536,57 @@ var MarkdownPlugin = class {
     const cleanHtml = DOMPurify6__default.default.sanitize(rawHtml, {
       USE_PROFILES: { html: true }
     });
-    const wrapper = document.createElement("div");
-    wrapper.className = "fp-markdown-wrapper";
-    wrapper.style.cssText = `
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-      padding: 32px 40px;
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-markdown-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.padding = "24px 16px";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-markdown-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "flex-start";
+    const docCard = document.createElement("div");
+    docCard.className = "fp-markdown-doc-card";
+    docCard.style.cssText = `
+      width: 860px;
+      min-height: 600px;
+      padding: 40px 48px;
       box-sizing: border-box;
       line-height: 1.6;
       font-size: 15px;
       color: var(--fp-text, #24292f);
       background: var(--fp-bg, #ffffff);
+      border-radius: 6px;
+      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+      transform-origin: top center;
+      transition: transform 0.15s ease;
+      flex-shrink: 0;
     `;
-    wrapper.innerHTML = `
+    docCard.innerHTML = `
       <style>
-        .fp-markdown-wrapper h1, .fp-markdown-wrapper h2, .fp-markdown-wrapper h3,
-        .fp-markdown-wrapper h4, .fp-markdown-wrapper h5, .fp-markdown-wrapper h6 {
+        .fp-markdown-doc-card h1, .fp-markdown-doc-card h2, .fp-markdown-doc-card h3,
+        .fp-markdown-doc-card h4, .fp-markdown-doc-card h5, .fp-markdown-doc-card h6 {
           margin-top: 24px;
           margin-bottom: 16px;
           font-weight: 600;
           line-height: 1.25;
           color: var(--fp-text, #1f2328);
         }
-        .fp-markdown-wrapper h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fp-border, #d0d7de); }
-        .fp-markdown-wrapper h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fp-border, #d0d7de); }
-        .fp-markdown-wrapper h3 { font-size: 1.25em; }
-        .fp-markdown-wrapper p { margin-top: 0; margin-bottom: 16px; }
-        .fp-markdown-wrapper table {
+        .fp-markdown-doc-card h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fp-border, #d0d7de); }
+        .fp-markdown-doc-card h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fp-border, #d0d7de); }
+        .fp-markdown-doc-card h3 { font-size: 1.25em; }
+        .fp-markdown-doc-card p { margin-top: 0; margin-bottom: 16px; }
+        .fp-markdown-doc-card table {
           border-spacing: 0;
           border-collapse: collapse;
           margin-top: 0;
@@ -5377,20 +5594,20 @@ var MarkdownPlugin = class {
           width: 100%;
           overflow: auto;
         }
-        .fp-markdown-wrapper table th, .fp-markdown-wrapper table td {
+        .fp-markdown-doc-card table th, .fp-markdown-doc-card table td {
           padding: 6px 13px;
           border: 1px solid var(--fp-border, #d0d7de);
         }
-        .fp-markdown-wrapper table tr:nth-child(2n) {
+        .fp-markdown-doc-card table tr:nth-child(2n) {
           background-color: var(--fp-toolbar-bg, #f6f8fa);
         }
-        .fp-markdown-wrapper blockquote {
+        .fp-markdown-doc-card blockquote {
           margin: 0 0 16px 0;
           padding: 0 1em;
           color: var(--fp-text-muted, #59636e);
           border-left: 0.25em solid var(--fp-border, #d0d7de);
         }
-        .fp-markdown-wrapper pre {
+        .fp-markdown-doc-card pre {
           padding: 16px;
           overflow: auto;
           font-size: 85%;
@@ -5399,7 +5616,7 @@ var MarkdownPlugin = class {
           border-radius: 6px;
           border: 1px solid var(--fp-border, #d0d7de);
         }
-        .fp-markdown-wrapper code {
+        .fp-markdown-doc-card code {
           padding: 0.2em 0.4em;
           margin: 0;
           font-size: 85%;
@@ -5407,16 +5624,16 @@ var MarkdownPlugin = class {
           border-radius: 4px;
           font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
         }
-        .fp-markdown-wrapper pre code {
+        .fp-markdown-doc-card pre code {
           padding: 0;
           background: transparent;
         }
-        .fp-markdown-wrapper ul, .fp-markdown-wrapper ol {
+        .fp-markdown-doc-card ul, .fp-markdown-doc-card ol {
           padding-left: 2em;
           margin-top: 0;
           margin-bottom: 16px;
         }
-        .fp-markdown-wrapper hr {
+        .fp-markdown-doc-card hr {
           height: 0.25em;
           padding: 0;
           margin: 24px 0;
@@ -5424,50 +5641,95 @@ var MarkdownPlugin = class {
           border: 0;
         }
       </style>
-      <div class="fp-markdown-content" style="max-width: 860px; margin: 0 auto;">
+      <div class="fp-markdown-body">
         ${cleanHtml}
       </div>
     `;
-    wrapper.querySelectorAll("pre code").forEach((block) => {
+    docCard.querySelectorAll("pre code").forEach((block) => {
       hljs__default.default.highlightElement(block);
     });
+    sizer.appendChild(docCard);
+    scrollWrapper.appendChild(sizer);
     ctx.container.innerHTML = "";
     ctx.container.style.overflow = "auto";
-    ctx.container.appendChild(wrapper);
-    let fontSize = 15;
+    ctx.container.style.backgroundColor = "#f1f5f9";
+    ctx.container.appendChild(scrollWrapper);
+    let scale = 1;
+    let isUserZoomed = false;
+    const calculateFitScale = () => {
+      const availW = Math.max(280, ctx.container.clientWidth - 48);
+      if (availW < 860) {
+        return Math.max(0.35, availW / 860);
+      }
+      return 1;
+    };
+    const applyTransform = () => {
+      const baseW = 860;
+      const baseH = docCard.offsetHeight || 600;
+      const scaledW = Math.round(baseW * scale);
+      const scaledH = Math.round(baseH * scale);
+      sizer.style.width = `${scaledW}px`;
+      sizer.style.height = `${scaledH}px`;
+      docCard.style.width = `${baseW}px`;
+      docCard.style.transform = `scale(${scale})`;
+      docCard.style.transformOrigin = scaledW > ctx.container.clientWidth - 32 ? "top left" : "top center";
+    };
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (!isUserZoomed) {
+        scale = calculateFitScale();
+        applyTransform();
+      }
+    }) : null;
+    ro?.observe(ctx.container);
+    requestAnimationFrame(() => {
+      if (!isUserZoomed) {
+        scale = calculateFitScale();
+      }
+      applyTransform();
+    });
     const cleanup = () => {
-      wrapper.remove();
+      ro?.disconnect();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
       zoomIn: () => {
-        fontSize = Math.min(28, fontSize + 2);
-        wrapper.style.fontSize = `${fontSize}px`;
+        isUserZoomed = true;
+        scale = Math.min(3.5, scale + 0.15);
+        applyTransform();
       },
       zoomOut: () => {
-        fontSize = Math.max(10, fontSize - 2);
-        wrapper.style.fontSize = `${fontSize}px`;
+        isUserZoomed = true;
+        scale = Math.max(0.25, scale - 0.15);
+        applyTransform();
       },
-      getZoom: () => fontSize / 15,
+      getZoom: () => scale,
       setZoom: (level) => {
-        fontSize = Math.round(15 * level);
-        wrapper.style.fontSize = `${fontSize}px`;
+        isUserZoomed = true;
+        scale = level;
+        applyTransform();
       },
       fitToPage: () => {
-        fontSize = 15;
-        wrapper.style.fontSize = "15px";
+        isUserZoomed = false;
+        scale = calculateFitScale();
+        applyTransform();
       },
       fitToWidth: () => {
-        fontSize = 15;
-        wrapper.style.fontSize = "15px";
+        isUserZoomed = false;
+        scale = calculateFitScale();
+        applyTransform();
       },
       resetZoom: () => {
-        fontSize = 15;
-        wrapper.style.fontSize = "15px";
+        isUserZoomed = false;
+        scale = calculateFitScale();
         ctx.container.scrollTop = 0;
         ctx.container.scrollLeft = 0;
+        applyTransform();
+      },
+      openInSeparateWindow: () => {
+        ctx?.openInSeparateWindow?.();
       },
       download: () => {
         downloadFile(ctx.buffer, ctx.metadata.name || "document.md", "text/markdown");
@@ -6783,14 +7045,6 @@ var HtmlPreviewPlugin = class {
         group: "zoom",
         execute: () => instance.zoomIn?.()
       },
-      {
-        id: "fit-page",
-        icon: "fit-page",
-        label: "Fit to Page",
-        type: "button",
-        group: "zoom",
-        execute: () => instance.fitToPage?.()
-      },
       {
         id: "reset-zoom",
         icon: "reset-zoom",
@@ -6807,6 +7061,14 @@ var HtmlPreviewPlugin = class {
         group: "zoom",
         execute: () => instance.fitToWidth?.()
       },
+      {
+        id: "fit-page",
+        icon: "fit-page",
+        label: "Fit to Page",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToPage?.()
+      },
       {
         id: "copy",
         icon: "copy",
@@ -6830,6 +7092,14 @@ var HtmlPreviewPlugin = class {
         type: "button",
         group: "actions",
         execute: () => instance.print?.()
+      },
+      {
+        id: "open-window",
+        icon: "open-window",
+        label: "Open in Separate Full Window",
+        type: "button",
+        group: "actions",
+        execute: () => instance.openInSeparateWindow?.()
       }
     ];
   }
@@ -6840,27 +7110,39 @@ var HtmlPreviewPlugin = class {
       ADD_TAGS: ["style", "link"],
       ADD_ATTR: ["target", "rel"]
     });
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-html-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "flex-start";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.boxSizing = "border-box";
     const sizer = document.createElement("div");
     sizer.className = "fp-html-sizer";
     sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
     const iframe = document.createElement("iframe");
     iframe.className = "fp-html-iframe";
     iframe.style.border = "none";
     iframe.style.backgroundColor = "#ffffff";
     iframe.style.transformOrigin = "top left";
-    iframe.style.transition = "transform 0.2s ease";
+    iframe.style.transition = "transform 0.15s ease";
     iframe.sandbox.add("allow-same-origin");
     sizer.appendChild(iframe);
+    scrollWrapper.appendChild(sizer);
     ctx.container.style.overflow = "auto";
     ctx.container.style.width = "100%";
     ctx.container.style.height = "100%";
     ctx.container.innerHTML = "";
-    ctx.container.appendChild(sizer);
+    ctx.container.appendChild(scrollWrapper);
     iframe.srcdoc = sanitized;
     let scale = 1;
+    let baseW = Math.max(600, ctx.container.clientWidth || 800);
+    let baseH = Math.max(400, ctx.container.clientHeight || 600);
     const applyTransform = () => {
-      const baseW = Math.max(600, ctx.container.clientWidth || 800);
-      const baseH = Math.max(400, ctx.container.clientHeight || 600);
       const scaledW = Math.round(baseW * scale);
       const scaledH = Math.round(baseH * scale);
       sizer.style.width = `${scaledW}px`;
@@ -6873,22 +7155,33 @@ var HtmlPreviewPlugin = class {
       iframe.style.transform = `scale(${scale})`;
       iframe.style.transformOrigin = "top left";
     };
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (Math.abs(scale - 1) < 0.05) {
+        baseW = Math.max(600, ctx.container.clientWidth || 800);
+        baseH = Math.max(400, ctx.container.clientHeight || 600);
+        applyTransform();
+      }
+    }) : null;
+    ro?.observe(ctx.container);
     requestAnimationFrame(() => {
+      baseW = Math.max(600, ctx.container.clientWidth || 800);
+      baseH = Math.max(400, ctx.container.clientHeight || 600);
       applyTransform();
     });
     const cleanup = () => {
-      sizer.remove();
+      ro?.disconnect();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
       zoomIn: () => {
-        scale += 0.1;
+        scale = Math.min(3.5, scale + 0.15);
         applyTransform();
       },
       zoomOut: () => {
-        scale = Math.max(0.2, scale - 0.1);
+        scale = Math.max(0.25, scale - 0.15);
         applyTransform();
       },
       getZoom: () => scale,
@@ -6910,8 +7203,11 @@ var HtmlPreviewPlugin = class {
         ctx.container.scrollLeft = 0;
         applyTransform();
       },
+      openInSeparateWindow: () => {
+        ctx?.openInSeparateWindow?.();
+      },
       copy: () => {
-        navigator.clipboard.writeText(rawHtml);
+        navigator.clipboard?.writeText(rawHtml);
       },
       download: () => {
         const blob = new Blob([ctx.buffer], { type: "text/html" });