pi-studio 0.5.31 → 0.5.32

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.32] — 2026-03-25
+
+### Added
+- `/studio-pdf <path>` now accepts a curated set of advanced layout controls for file-based exports, including font size, margins, line stretch, main font, paper size, geometry, heading sizes, heading spacing, and footer skip.
+
+### Changed
+- Large-font Markdown/QMD Studio PDF exports now switch to a more suitable LaTeX document class and use a safer default footer skip unless you explicitly override the geometry.
+- PDF callout blocks now render more compactly, reducing extra vertical whitespace around note/tip/warning content.
+
+### Fixed
+- Studio preview/PDF preparation now treats `.qmd` files like Markdown, strips HTML comments more narrowly, shows standalone LaTeX page-break commands as subtle preview dividers, and supports common Quarto-style callout and `fig-align` patterns in preview/PDF output.
+- Markdown/QMD preview now renders embedded local PDF figures more reliably via `pdf.js`, avoiding grey-box browser embed failures in the Studio preview surface.
+
 ## [0.5.31] — 2026-03-24
 
 ### Fixed

package/README.md

@@ -43,7 +43,7 @@ Extension for [pi](https://pi.dev) that opens a local two-pane browser workspace
 | `/studio --stop` | Stop studio server |
 | `/studio --help` | Show help |
 | `/studio-current <path>` | Load a file into currently open Studio tab(s) without opening a new browser window |
-| `/studio-pdf <path>` | Export a local file to `<name>.studio.pdf` via the Studio PDF pipeline |
+| `/studio-pdf <path> [options]` | Export a local file to `<name>.studio.pdf` via the Studio PDF pipeline, with optional layout controls |
 
 ## Install
 

package/client/studio-client.js

@@ -188,7 +188,7 @@
       const EDITOR_LANGUAGE_STORAGE_KEY = "piStudio.editorLanguage";
       // Single source of truth: language -> file extensions (and display label)
       var LANG_EXT_MAP = {
-        markdown:   { label: "Markdown",   exts: ["md", "markdown", "mdx"] },
+        markdown:   { label: "Markdown",   exts: ["md", "markdown", "mdx", "qmd"] },
         javascript: { label: "JavaScript", exts: ["js", "mjs", "cjs", "jsx"] },
         typescript: { label: "TypeScript", exts: ["ts", "mts", "cts", "tsx"] },
         python:     { label: "Python",     exts: ["py", "pyw"] },
@@ -245,6 +245,8 @@
       const EMPTY_OVERLAY_LINE = "\u200b";
       const MERMAID_CDN_URL = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
       const MATHJAX_CDN_URL = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js";
+      const PDFJS_CDN_URL = "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/legacy/build/pdf.min.mjs";
+      const PDFJS_WORKER_CDN_URL = "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/legacy/build/pdf.worker.min.mjs";
       const BOOT = (typeof window.__PI_STUDIO_BOOT__ === "object" && window.__PI_STUDIO_BOOT__)
         ? window.__PI_STUDIO_BOOT__
         : {};
@@ -255,9 +257,12 @@
       const MERMAID_RENDER_FAIL_MESSAGE = "Mermaid render failed. Showing diagram source text.";
       const MATHJAX_UNAVAILABLE_MESSAGE = "Math fallback unavailable. Some unsupported equations may remain as raw TeX.";
       const MATHJAX_RENDER_FAIL_MESSAGE = "Math fallback could not render some unsupported equations.";
+      const PDF_PREVIEW_UNAVAILABLE_MESSAGE = "PDF figure preview unavailable. Inline PDF rendering is not supported in this Studio browser environment.";
+      const PDF_PREVIEW_RENDER_FAIL_MESSAGE = "PDF figure preview could not be rendered.";
       let mermaidModulePromise = null;
       let mermaidInitialized = false;
       let mathJaxPromise = null;
+      let pdfJsPromise = null;
 
       const DEBUG_ENABLED = (() => {
         try {
@@ -1248,11 +1253,210 @@
               mathMl: true,
               svg: true,
             },
+            ADD_TAGS: ["embed"],
+            ADD_ATTR: ["src", "type", "title", "width", "height", "style", "data-fig-align"],
+            ADD_DATA_URI_TAGS: ["embed"],
           });
         }
         return buildPreviewErrorHtml("Preview sanitizer unavailable. Showing plain markdown.", markdown);
       }
 
+      function isPdfPreviewSource(src) {
+        return Boolean(src) && (/^data:application\/pdf(?:;|,)/i.test(src) || /\.pdf(?:$|[?#])/i.test(src));
+      }
+
+      function decoratePdfEmbeds(targetEl) {
+        if (!targetEl || typeof targetEl.querySelectorAll !== "function") {
+          return;
+        }
+
+        const embeds = targetEl.querySelectorAll("embed[src]");
+        embeds.forEach(function(embedEl) {
+          const src = typeof embedEl.getAttribute === "function" ? (embedEl.getAttribute("src") || "") : "";
+          if (!isPdfPreviewSource(src)) {
+            return;
+          }
+          if (!embedEl.getAttribute("type")) {
+            embedEl.setAttribute("type", "application/pdf");
+          }
+          if (!embedEl.getAttribute("title")) {
+            embedEl.setAttribute("title", "Embedded PDF figure");
+          }
+        });
+      }
+
+      function decodePdfDataUri(src) {
+        const match = String(src || "").match(/^data:application\/pdf(?:;[^,]*)?,([A-Za-z0-9+/=\s]+)$/i);
+        if (!match) return null;
+        const payload = (match[1] || "").replace(/\s+/g, "");
+        if (!payload) return null;
+        const binary = window.atob(payload);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i += 1) {
+          bytes[i] = binary.charCodeAt(i);
+        }
+        return bytes;
+      }
+
+      function ensurePdfJs() {
+        if (window.pdfjsLib && typeof window.pdfjsLib.getDocument === "function") {
+          return Promise.resolve(window.pdfjsLib);
+        }
+        if (pdfJsPromise) {
+          return pdfJsPromise;
+        }
+
+        pdfJsPromise = import(PDFJS_CDN_URL)
+          .then((module) => {
+            const api = module && typeof module.getDocument === "function"
+              ? module
+              : (module && module.default && typeof module.default.getDocument === "function" ? module.default : null);
+            if (!api || typeof api.getDocument !== "function") {
+              throw new Error("pdf.js did not initialize.");
+            }
+            if (api.GlobalWorkerOptions && !api.GlobalWorkerOptions.workerSrc) {
+              api.GlobalWorkerOptions.workerSrc = PDFJS_WORKER_CDN_URL;
+            }
+            window.pdfjsLib = api;
+            return api;
+          })
+          .catch((error) => {
+            pdfJsPromise = null;
+            throw error;
+          });
+
+        return pdfJsPromise;
+      }
+
+      function appendPdfPreviewNotice(targetEl, message) {
+        if (!targetEl || typeof targetEl.querySelector !== "function" || typeof targetEl.appendChild !== "function") {
+          return;
+        }
+        if (targetEl.querySelector(".preview-pdf-warning")) {
+          return;
+        }
+        const warningEl = document.createElement("div");
+        warningEl.className = "preview-warning preview-pdf-warning";
+        warningEl.textContent = String(message || PDF_PREVIEW_UNAVAILABLE_MESSAGE);
+        targetEl.appendChild(warningEl);
+      }
+
+      async function loadPdfDocumentSource(src) {
+        const embedded = decodePdfDataUri(src);
+        if (embedded) {
+          return { data: embedded };
+        }
+        const response = await fetch(src);
+        if (!response.ok) {
+          throw new Error("Failed to fetch PDF figure for preview.");
+        }
+        const bytes = new Uint8Array(await response.arrayBuffer());
+        return { data: bytes };
+      }
+
+      async function renderSinglePdfPreviewEmbed(embedEl, pdfjsLib) {
+        if (!embedEl || embedEl.dataset.studioPdfPreviewRendered === "1") {
+          return false;
+        }
+
+        const src = embedEl.getAttribute("src") || "";
+        if (!isPdfPreviewSource(src)) {
+          return false;
+        }
+
+        const measuredWidth = Math.max(1, Math.round(embedEl.getBoundingClientRect().width || 0));
+        const styleText = embedEl.getAttribute("style") || "";
+        const widthAttr = embedEl.getAttribute("width") || "";
+        const figAlign = embedEl.getAttribute("data-fig-align") || "";
+        const pdfSource = await loadPdfDocumentSource(src);
+        const loadingTask = pdfjsLib.getDocument(pdfSource);
+        const pdfDocument = await loadingTask.promise;
+
+        try {
+          const page = await pdfDocument.getPage(1);
+          const baseViewport = page.getViewport({ scale: 1 });
+          const cssWidth = Math.max(1, measuredWidth || Math.round(baseViewport.width));
+          const renderScale = Math.max(0.25, cssWidth / baseViewport.width) * Math.min(window.devicePixelRatio || 1, 2);
+          const viewport = page.getViewport({ scale: renderScale });
+          const canvas = document.createElement("canvas");
+          const context = canvas.getContext("2d", { alpha: false });
+          if (!context) {
+            throw new Error("Canvas 2D context unavailable.");
+          }
+
+          canvas.width = Math.max(1, Math.ceil(viewport.width));
+          canvas.height = Math.max(1, Math.ceil(viewport.height));
+          canvas.style.width = "100%";
+          canvas.style.height = "auto";
+          canvas.setAttribute("aria-label", "PDF figure preview");
+
+          await page.render({
+            canvasContext: context,
+            viewport,
+          }).promise;
+
+          const wrapper = document.createElement("div");
+          wrapper.className = "studio-pdf-preview";
+          if (styleText) {
+            wrapper.style.cssText = styleText;
+          } else if (widthAttr) {
+            wrapper.style.width = /^\d+(?:\.\d+)?$/.test(widthAttr) ? (widthAttr + "px") : widthAttr;
+          } else {
+            wrapper.style.width = "100%";
+          }
+          if (figAlign) {
+            wrapper.setAttribute("data-fig-align", figAlign);
+          }
+          wrapper.title = "PDF figure preview (page 1)";
+          wrapper.appendChild(canvas);
+          embedEl.dataset.studioPdfPreviewRendered = "1";
+          embedEl.replaceWith(wrapper);
+          return true;
+        } finally {
+          if (typeof pdfDocument.cleanup === "function") {
+            try { pdfDocument.cleanup(); } catch {}
+          }
+          if (typeof pdfDocument.destroy === "function") {
+            try { await pdfDocument.destroy(); } catch {}
+          }
+        }
+      }
+
+      async function renderPdfPreviewsInElement(targetEl) {
+        if (!targetEl || typeof targetEl.querySelectorAll !== "function") {
+          return;
+        }
+
+        const embeds = Array.from(targetEl.querySelectorAll("embed[src]"))
+          .filter((embedEl) => isPdfPreviewSource(embedEl.getAttribute("src") || ""));
+        if (embeds.length === 0) {
+          return;
+        }
+
+        let pdfjsLib;
+        try {
+          pdfjsLib = await ensurePdfJs();
+        } catch (error) {
+          console.error("pdf.js load failed:", error);
+          appendPdfPreviewNotice(targetEl, PDF_PREVIEW_UNAVAILABLE_MESSAGE);
+          return;
+        }
+
+        let hadFailure = false;
+        for (const embedEl of embeds) {
+          try {
+            await renderSinglePdfPreviewEmbed(embedEl, pdfjsLib);
+          } catch (error) {
+            hadFailure = true;
+            console.error("PDF preview render failed:", error);
+          }
+        }
+
+        if (hadFailure) {
+          appendPdfPreviewNotice(targetEl, PDF_PREVIEW_RENDER_FAIL_MESSAGE);
+        }
+      }
+
       function appendMathFallbackNotice(targetEl, message) {
         if (!targetEl || typeof targetEl.querySelector !== "function" || typeof targetEl.appendChild !== "function") {
           return;
@@ -1901,6 +2105,8 @@
 
           finishPreviewRender(targetEl);
           targetEl.innerHTML = sanitizeRenderedHtml(renderedHtml, markdown);
+          decoratePdfEmbeds(targetEl);
+          await renderPdfPreviewsInElement(targetEl);
           const annotationMode = (pane === "source" || pane === "response")
             ? (annotationsEnabled ? "highlight" : "hide")
             : "none";

package/client/studio.css

@@ -633,6 +633,91 @@
       color: var(--md-quote);
     }
 
+    .rendered-markdown .callout-note,
+    .rendered-markdown .callout-tip,
+    .rendered-markdown .callout-warning,
+    .rendered-markdown .callout-important,
+    .rendered-markdown .callout-caution {
+      margin: 1.15em 0;
+      padding: 0.8em 1rem 0.95em;
+      border: 1px solid var(--border-muted);
+      border-left-width: 4px;
+      border-radius: 10px;
+      background: var(--panel-2);
+      color: inherit;
+    }
+
+    .rendered-markdown .callout-note::before,
+    .rendered-markdown .callout-tip::before,
+    .rendered-markdown .callout-warning::before,
+    .rendered-markdown .callout-important::before,
+    .rendered-markdown .callout-caution::before {
+      display: inline-block;
+      margin-bottom: 0.45rem;
+      font-size: 0.76em;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .rendered-markdown .callout-note::before {
+      content: "Note";
+      color: var(--accent);
+    }
+
+    .rendered-markdown .callout-tip::before {
+      content: "Tip";
+      color: var(--ok);
+    }
+
+    .rendered-markdown .callout-warning::before {
+      content: "Warning";
+      color: var(--warn);
+    }
+
+    .rendered-markdown .callout-important::before {
+      content: "Important";
+      color: var(--error);
+    }
+
+    .rendered-markdown .callout-caution::before {
+      content: "Caution";
+      color: var(--error);
+    }
+
+    .rendered-markdown .callout-note {
+      border-left-color: var(--accent);
+    }
+
+    .rendered-markdown .callout-tip {
+      border-left-color: var(--ok);
+    }
+
+    .rendered-markdown .callout-warning {
+      border-left-color: var(--warn);
+    }
+
+    .rendered-markdown .callout-important,
+    .rendered-markdown .callout-caution {
+      border-left-color: var(--error);
+    }
+
+    .rendered-markdown .callout-note > :first-child,
+    .rendered-markdown .callout-tip > :first-child,
+    .rendered-markdown .callout-warning > :first-child,
+    .rendered-markdown .callout-important > :first-child,
+    .rendered-markdown .callout-caution > :first-child {
+      margin-top: 0;
+    }
+
+    .rendered-markdown .callout-note > :last-child,
+    .rendered-markdown .callout-tip > :last-child,
+    .rendered-markdown .callout-warning > :last-child,
+    .rendered-markdown .callout-important > :last-child,
+    .rendered-markdown .callout-caution > :last-child {
+      margin-bottom: 0;
+    }
+
     .rendered-markdown pre {
       background: var(--panel-2);
       border: 1px solid var(--md-codeblock-border);
@@ -765,10 +850,83 @@
       margin: 1.25em 0;
     }
 
+    .rendered-markdown .studio-page-break {
+      display: flex;
+      align-items: center;
+      gap: 0.85rem;
+      margin: 1.75em 0;
+      color: var(--muted);
+      font-size: 0.88em;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    .rendered-markdown .studio-page-break-rule {
+      flex: 1 1 auto;
+      height: 1px;
+      background: var(--md-hr);
+      opacity: 0.95;
+    }
+
+    .rendered-markdown .studio-page-break-label {
+      flex: 0 0 auto;
+      white-space: nowrap;
+    }
+
     .rendered-markdown img {
       max-width: 100%;
     }
 
+    .rendered-markdown img[data-fig-align="center"],
+    .rendered-markdown embed[data-fig-align="center"],
+    .rendered-markdown .studio-pdf-preview[data-fig-align="center"] {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .rendered-markdown img[data-fig-align="right"],
+    .rendered-markdown embed[data-fig-align="right"],
+    .rendered-markdown .studio-pdf-preview[data-fig-align="right"] {
+      display: block;
+      margin-left: auto;
+      margin-right: 0;
+    }
+
+    .rendered-markdown embed[type="application/pdf"],
+    .rendered-markdown embed[src^="data:application/pdf"],
+    .rendered-markdown embed[src$=".pdf"] {
+      display: block;
+      width: 100%;
+      min-height: 18rem;
+      border: 1px solid var(--md-table-border);
+      border-radius: 10px;
+      background: #fff;
+      overflow: hidden;
+    }
+
+    .rendered-markdown .studio-pdf-preview {
+      display: block;
+      max-width: 100%;
+      border: 1px solid var(--md-table-border);
+      border-radius: 10px;
+      background: #fff;
+      overflow: hidden;
+      line-height: 0;
+    }
+
+    .rendered-markdown .studio-pdf-preview[data-fig-align="center"] {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .rendered-markdown .studio-pdf-preview canvas {
+      display: block;
+      width: 100%;
+      height: auto;
+      max-width: 100%;
+    }
+
     .rendered-markdown .studio-subfigure-group {
       margin: 1.25em auto;
     }