pi-studio 0.5.31 → 0.5.33

package/CHANGELOG.md

@@ -4,6 +4,30 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.33] — 2026-03-27
+
+### Changed
+- Studio browser tabs now use `π Studio` branding plus a simple theme-reactive `π` favicon instead of the generic browser globe.
+
+### Fixed
+- Markdown preview now preserves `[an: ...]` markers more reliably by replacing them with preview-safe placeholders before pandoc and restoring annotation pills afterwards, preventing long or markdown-like annotations from leaking through as raw text.
+- Preview/PDF markdown preparation now normalizes fenced blocks whose contents contain competing backtick/tilde fence runs, avoiding broken rendering/export for diff-heavy content that itself contains code fences.
+- Diff PDF exports now route highlighted diff content through the generated-LaTeX path more reliably, keeping add/delete/meta/hunk styling and line wrapping on exports that previously rendered poorly or fell back unnecessarily.
+- PDF annotation badges now wrap within the page width instead of overflowing on long notes, preserve inline math inside annotation text, and also render correctly inside diff token lines such as `+[an: ...]`.
+
+## [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"] },
@@ -242,9 +242,12 @@
       let editorHighlightRenderRaf = null;
       let annotationsEnabled = true;
       const ANNOTATION_MARKER_REGEX = /\[an:\s*([^\]]+?)\]/gi;
+      const PREVIEW_ANNOTATION_PLACEHOLDER_PREFIX = "PISTUDIOANNOT";
       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 +258,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 {
@@ -1178,6 +1184,80 @@
         return annotationsEnabled ? raw : stripAnnotationMarkers(raw);
       }
 
+      function normalizePreviewAnnotationLabel(text) {
+        return String(text || "")
+          .replace(/\r\n/g, "\n")
+          .replace(/\s*\n\s*/g, " ")
+          .replace(/\s{2,}/g, " ")
+          .trim();
+      }
+
+      function prepareMarkdownForPandocPreview(markdown) {
+        const source = String(markdown || "").replace(/\r\n/g, "\n");
+        const placeholders = [];
+        if (!source) {
+          return { markdown: source, placeholders: placeholders };
+        }
+
+        const lines = source.split("\n");
+        const out = [];
+        let plainBuffer = [];
+        let inFence = false;
+        let fenceChar = null;
+        let fenceLength = 0;
+
+        function flushPlain() {
+          if (plainBuffer.length === 0) return;
+          const segment = plainBuffer.join("\n").replace(/\[an:\s*([^\]]+?)\]/gi, function(_match, markerText) {
+            const label = normalizePreviewAnnotationLabel(markerText);
+            if (!label) return "";
+            const token = PREVIEW_ANNOTATION_PLACEHOLDER_PREFIX + placeholders.length + "TOKEN";
+            placeholders.push({ token: token, text: label, title: "[an: " + label + "]" });
+            return token;
+          });
+          out.push(segment);
+          plainBuffer = [];
+        }
+
+        for (const line of lines) {
+          const trimmed = line.trimStart();
+          const fenceMatch = trimmed.match(/^(`{3,}|~{3,})/);
+
+          if (fenceMatch) {
+            const marker = fenceMatch[1] || "";
+            const markerChar = marker.charAt(0);
+            const markerLength = marker.length;
+
+            if (!inFence) {
+              flushPlain();
+              inFence = true;
+              fenceChar = markerChar;
+              fenceLength = markerLength;
+              out.push(line);
+              continue;
+            }
+
+            if (fenceChar === markerChar && markerLength >= fenceLength) {
+              inFence = false;
+              fenceChar = null;
+              fenceLength = 0;
+            }
+
+            out.push(line);
+            continue;
+          }
+
+          if (inFence) {
+            out.push(line);
+          } else {
+            plainBuffer.push(line);
+          }
+        }
+
+        flushPlain();
+        return { markdown: out.join("\n"), placeholders: placeholders };
+      }
+
       function wrapAsFencedCodeBlock(text, language) {
         const source = String(text || "").trimEnd();
         const lang = String(language || "").trim();
@@ -1248,11 +1328,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;
@@ -1418,6 +1697,79 @@
         }
       }
 
+      function applyPreviewAnnotationPlaceholdersToElement(targetEl, placeholders) {
+        if (!targetEl || !Array.isArray(placeholders) || placeholders.length === 0) return;
+        if (typeof document.createTreeWalker !== "function") return;
+
+        const placeholderMap = new Map();
+        const placeholderTokens = [];
+        placeholders.forEach(function(entry) {
+          const token = entry && typeof entry.token === "string" ? entry.token : "";
+          if (!token) return;
+          placeholderMap.set(token, entry);
+          placeholderTokens.push(token);
+        });
+        if (placeholderTokens.length === 0) return;
+
+        const placeholderPattern = new RegExp(placeholderTokens.map(escapeRegExp).join("|"), "g");
+        const walker = document.createTreeWalker(targetEl, NodeFilter.SHOW_TEXT);
+        const textNodes = [];
+        let node = walker.nextNode();
+        while (node) {
+          const textNode = node;
+          const value = typeof textNode.nodeValue === "string" ? textNode.nodeValue : "";
+          if (value && value.indexOf(PREVIEW_ANNOTATION_PLACEHOLDER_PREFIX) !== -1) {
+            const parent = textNode.parentElement;
+            const tag = parent && parent.tagName ? parent.tagName.toUpperCase() : "";
+            if (tag !== "CODE" && tag !== "PRE" && tag !== "SCRIPT" && tag !== "STYLE" && tag !== "TEXTAREA") {
+              textNodes.push(textNode);
+            }
+          }
+          node = walker.nextNode();
+        }
+
+        textNodes.forEach(function(textNode) {
+          const text = typeof textNode.nodeValue === "string" ? textNode.nodeValue : "";
+          if (!text) return;
+          placeholderPattern.lastIndex = 0;
+          if (!placeholderPattern.test(text)) return;
+          placeholderPattern.lastIndex = 0;
+
+          const fragment = document.createDocumentFragment();
+          let lastIndex = 0;
+          let match;
+          while ((match = placeholderPattern.exec(text)) !== null) {
+            const token = match[0] || "";
+            const entry = placeholderMap.get(token);
+            const start = typeof match.index === "number" ? match.index : 0;
+            if (start > lastIndex) {
+              fragment.appendChild(document.createTextNode(text.slice(lastIndex, start)));
+            }
+            if (entry) {
+              const markerEl = document.createElement("span");
+              markerEl.className = "annotation-preview-marker";
+              markerEl.textContent = typeof entry.text === "string" ? entry.text : token;
+              markerEl.title = typeof entry.title === "string" ? entry.title : markerEl.textContent;
+              fragment.appendChild(markerEl);
+            } else {
+              fragment.appendChild(document.createTextNode(token));
+            }
+            lastIndex = start + token.length;
+            if (token.length === 0) {
+              placeholderPattern.lastIndex += 1;
+            }
+          }
+
+          if (lastIndex < text.length) {
+            fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
+          }
+
+          if (textNode.parentNode) {
+            textNode.parentNode.replaceChild(fragment, textNode);
+          }
+        });
+      }
+
       function applyAnnotationMarkersToElement(targetEl, mode) {
         if (!targetEl || mode === "none") return;
         if (typeof document.createTreeWalker !== "function") return;
@@ -1890,8 +2242,12 @@
       }
 
       async function applyRenderedMarkdown(targetEl, markdown, pane, nonce) {
+        const previewPrepared = annotationsEnabled
+          ? prepareMarkdownForPandocPreview(markdown)
+          : { markdown: stripAnnotationMarkers(String(markdown || "")), placeholders: [] };
+
         try {
-          const renderedHtml = await renderMarkdownWithPandoc(markdown);
+          const renderedHtml = await renderMarkdownWithPandoc(previewPrepared.markdown);
 
           if (pane === "source") {
             if (nonce !== sourcePreviewRenderNonce || editorView !== "preview") return;
@@ -1901,6 +2257,9 @@
 
           finishPreviewRender(targetEl);
           targetEl.innerHTML = sanitizeRenderedHtml(renderedHtml, markdown);
+          applyPreviewAnnotationPlaceholdersToElement(targetEl, previewPrepared.placeholders);
+          decoratePdfEmbeds(targetEl);
+          await renderPdfPreviewsInElement(targetEl);
           const annotationMode = (pane === "source" || pane === "response")
             ? (annotationsEnabled ? "highlight" : "hide")
             : "none";
@@ -2338,6 +2697,10 @@
           .replace(/'/g, "&#39;");
       }
 
+      function escapeRegExp(text) {
+        return String(text || "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      }
+
       function wrapHighlight(className, text) {
         return "<span class='" + className + "'>" + escapeHtml(String(text || "")) + "</span>";
       }

package/client/studio.css

@@ -516,7 +516,11 @@
       background: var(--accent-soft);
       border: 1px solid var(--marker-border);
       border-radius: 4px;
+      display: inline-block;
+      max-width: 100%;
       padding: 0 4px;
+      white-space: normal;
+      vertical-align: baseline;
     }
 
     #sourcePreview {
@@ -633,6 +637,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 +854,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;
     }