pi-studio 0.5.30 → 0.5.32

package/CHANGELOG.md

@@ -4,6 +4,25 @@ 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
+- The right-pane response view now nudges the browser to repaint after response renders complete, reducing cases where freshly rendered response content stayed visually blank until the user scrolled or interacted with the pane.
+- Newly selected or newly arrived responses now reset the right-pane scroll position to the top by default, while **Editor (Preview)** continues to preserve scroll position so in-place edit/preview workflows still feel natural.
+
 ## [0.5.30] — 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"] },
@@ -234,6 +234,7 @@
       let sourcePreviewRenderNonce = 0;
       let responsePreviewRenderNonce = 0;
       let responseEditorPreviewTimer = null;
+      let pendingResponseScrollReset = false;
       let editorMetaUpdateRaf = null;
       let editorHighlightEnabled = false;
       let editorLanguage = "markdown";
@@ -244,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__
         : {};
@@ -254,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 {
@@ -971,6 +977,7 @@
       }
 
       function clearActiveResponseView() {
+        pendingResponseScrollReset = false;
         latestResponseMarkdown = "";
         latestResponseThinking = "";
         latestResponseKind = "annotation";
@@ -1016,13 +1023,13 @@
         }
       }
 
-      function applySelectedHistoryItem() {
+      function applySelectedHistoryItem(options) {
         const item = getSelectedHistoryItem();
         if (!item) {
           clearActiveResponseView();
           return false;
         }
-        handleIncomingResponse(item.markdown, item.kind, item.timestamp, item.thinking);
+        handleIncomingResponse(item.markdown, item.kind, item.timestamp, item.thinking, options);
         return true;
       }
 
@@ -1035,9 +1042,13 @@
           return false;
         }
 
+        const previousItem = getSelectedHistoryItem();
+        const previousId = previousItem && typeof previousItem.id === "string" ? previousItem.id : null;
         const nextIndex = Math.max(0, Math.min(total - 1, Number(index) || 0));
         responseHistoryIndex = nextIndex;
-        const applied = applySelectedHistoryItem();
+        const nextItem = getSelectedHistoryItem();
+        const nextId = nextItem && typeof nextItem.id === "string" ? nextItem.id : null;
+        const applied = applySelectedHistoryItem({ resetScroll: previousId !== nextId });
         updateHistoryControls();
 
         if (applied && !(options && options.silent)) {
@@ -1242,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;
@@ -1539,6 +1749,33 @@
         targetEl.classList.remove("preview-pending");
       }
 
+      function scheduleResponsePaneRepaintNudge() {
+        if (!critiqueViewEl || typeof critiqueViewEl.getBoundingClientRect !== "function") return;
+        const schedule = typeof window.requestAnimationFrame === "function"
+          ? window.requestAnimationFrame.bind(window)
+          : (cb) => window.setTimeout(cb, 16);
+
+        schedule(() => {
+          if (!critiqueViewEl || !critiqueViewEl.isConnected) return;
+          void critiqueViewEl.getBoundingClientRect();
+          if (!critiqueViewEl.classList) return;
+          critiqueViewEl.classList.add("response-repaint-nudge");
+          schedule(() => {
+            if (!critiqueViewEl || !critiqueViewEl.classList) return;
+            critiqueViewEl.classList.remove("response-repaint-nudge");
+          });
+        });
+      }
+
+      function applyPendingResponseScrollReset() {
+        if (!pendingResponseScrollReset || !critiqueViewEl) return false;
+        if (rightView === "editor-preview") return false;
+        critiqueViewEl.scrollTop = 0;
+        critiqueViewEl.scrollLeft = 0;
+        pendingResponseScrollReset = false;
+        return true;
+      }
+
       async function getMermaidApi() {
         if (mermaidModulePromise) {
           return mermaidModulePromise;
@@ -1868,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";
@@ -1883,6 +2122,11 @@
               appendPreviewNotice(targetEl, "Images not displaying? Set working dir in the editor pane or open via /studio <path>.");
             }
           }
+
+          if (pane === "response") {
+            applyPendingResponseScrollReset();
+            scheduleResponsePaneRepaintNudge();
+          }
         } catch (error) {
           if (pane === "source") {
             if (nonce !== sourcePreviewRenderNonce || editorView !== "preview") return;
@@ -1893,6 +2137,10 @@
           const detail = error && error.message ? error.message : String(error || "unknown error");
           finishPreviewRender(targetEl);
           targetEl.innerHTML = buildPreviewErrorHtml("Preview renderer unavailable (" + detail + "). Showing plain markdown.", markdown);
+          if (pane === "response") {
+            applyPendingResponseScrollReset();
+            scheduleResponsePaneRepaintNudge();
+          }
         }
       }
 
@@ -1962,11 +2210,13 @@
           if (!editorText.trim()) {
             finishPreviewRender(critiqueViewEl);
             critiqueViewEl.innerHTML = "<pre class='plain-markdown'>Editor is empty.</pre>";
+            scheduleResponsePaneRepaintNudge();
             return;
           }
           if (editorLanguage && editorLanguage !== "markdown" && editorLanguage !== "latex") {
             finishPreviewRender(critiqueViewEl);
             critiqueViewEl.innerHTML = "<div class='response-markdown-highlight'>" + highlightCode(editorText, editorLanguage, "preview") + "</div>";
+            scheduleResponsePaneRepaintNudge();
             return;
           }
           const nonce = ++responsePreviewRenderNonce;
@@ -1981,6 +2231,8 @@
           critiqueViewEl.innerHTML = thinking && thinking.trim()
             ? buildPlainMarkdownHtml(thinking)
             : "<pre class='plain-markdown'>No thinking available for this response.</pre>";
+          applyPendingResponseScrollReset();
+          scheduleResponsePaneRepaintNudge();
           return;
         }
 
@@ -1988,6 +2240,8 @@
         if (!markdown || !markdown.trim()) {
           finishPreviewRender(critiqueViewEl);
           critiqueViewEl.innerHTML = "<pre class='plain-markdown'>No response yet. Run editor text or critique editor text.</pre>";
+          applyPendingResponseScrollReset();
+          scheduleResponsePaneRepaintNudge();
           return;
         }
 
@@ -2005,16 +2259,22 @@
               "Response is too large for markdown highlighting. Showing plain markdown.",
               markdown,
             );
+            applyPendingResponseScrollReset();
+            scheduleResponsePaneRepaintNudge();
             return;
           }
 
           finishPreviewRender(critiqueViewEl);
           critiqueViewEl.innerHTML = "<div class='response-markdown-highlight'>" + highlightMarkdown(markdown) + "</div>";
+          applyPendingResponseScrollReset();
+          scheduleResponsePaneRepaintNudge();
           return;
         }
 
         finishPreviewRender(critiqueViewEl);
         critiqueViewEl.innerHTML = buildPlainMarkdownHtml(markdown);
+        applyPendingResponseScrollReset();
+        scheduleResponsePaneRepaintNudge();
       }
 
       function updateResultActionButtons(normalizedEditorText) {
@@ -3058,15 +3318,29 @@
         return lower.indexOf("## critiques") !== -1 && lower.indexOf("## document") !== -1;
       }
 
-      function handleIncomingResponse(markdown, kind, timestamp, thinking) {
+      function handleIncomingResponse(markdown, kind, timestamp, thinking, options) {
         const responseTimestamp =
           typeof timestamp === "number" && Number.isFinite(timestamp) && timestamp > 0
             ? timestamp
             : Date.now();
+        const responseThinking = typeof thinking === "string" ? thinking : "";
+        const responseKind = kind === "critique" ? "critique" : "annotation";
+        const resetScroll = options && Object.prototype.hasOwnProperty.call(options, "resetScroll")
+          ? Boolean(options.resetScroll)
+          : (
+            latestResponseKind !== responseKind
+            || latestResponseTimestamp !== responseTimestamp
+            || latestResponseNormalized !== normalizeForCompare(markdown)
+            || latestResponseThinkingNormalized !== normalizeForCompare(responseThinking)
+          );
+
+        if (resetScroll) {
+          pendingResponseScrollReset = true;
+        }
 
         latestResponseMarkdown = markdown;
-        latestResponseThinking = typeof thinking === "string" ? thinking : "";
-        latestResponseKind = kind === "critique" ? "critique" : "annotation";
+        latestResponseThinking = responseThinking;
+        latestResponseKind = responseKind;
         latestResponseTimestamp = responseTimestamp;
         latestResponseIsStructuredCritique = isStructuredCritique(markdown);
         latestResponseHasContent = Boolean(markdown && markdown.trim());
@@ -3084,10 +3358,10 @@
         refreshResponseUi();
       }
 
-      function applyLatestPayload(payload) {
+      function applyLatestPayload(payload, options) {
         if (!payload || typeof payload.markdown !== "string") return false;
         const responseKind = payload.kind === "critique" ? "critique" : "annotation";
-        handleIncomingResponse(payload.markdown, responseKind, payload.timestamp, payload.thinking);
+        handleIncomingResponse(payload.markdown, responseKind, payload.timestamp, payload.thinking, options);
         return true;
       }
 

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;
     }
@@ -968,6 +1126,12 @@
       opacity: 0.64;
     }
 
+    .panel-scroll.response-repaint-nudge {
+      outline: 1px solid transparent;
+      -webkit-transform: translateZ(0);
+      transform: translateZ(0);
+    }
+
     .preview-error {
       color: var(--warn);
       margin-bottom: 0.75em;