@agent-native/core 0.149.0 → 0.149.1

package/corpus/templates/slides/app/lib/export-pdf-client.ts

@@ -10,9 +10,16 @@
  * largest rendered element so a thumbnail's transform: scale(0.25)
  * doesn't shrink the captured pixels.
  */
+import { appBasePath } from "@agent-native/core/client/api-path";
+
 import { type AspectRatio, getAspectRatioDims } from "./aspect-ratios";
 import { importExportModule } from "./dynamic-import";
 
+/** Same-origin URL that re-serves a remote image, bypassing its missing CORS. */
+export function imageProxyUrl(src: string): string {
+  return `${appBasePath()}/api/image-proxy?url=${encodeURIComponent(src)}`;
+}
+
 /**
  * Cross-origin <img> elements without an explicit `crossOrigin="anonymous"`
  * attribute taint the canvas when rasterized via <foreignObject>, producing
@@ -21,8 +28,15 @@ import { importExportModule } from "./dynamic-import";
  * setting the attribute and re-assigning the same src. This is the root
  * cause of the "blank images in exported PDF" bug Rochkind reported.
  */
-export async function preloadImagesWithCors(root: HTMLElement): Promise<void> {
+export async function preloadImagesWithCors(
+  root: HTMLElement,
+): Promise<() => void> {
   const imgs = Array.from(root.querySelectorAll<HTMLImageElement>("img"));
+  // The slide DOM is the live editor canvas. Anything rewritten here would
+  // otherwise be picked up by the next save and persisted into the deck, so
+  // every mutation is recorded and undone once the capture is done.
+  const restores: Array<() => void> = [];
+
   await Promise.all(
     imgs.map(async (img) => {
       const src = img.currentSrc || img.src;
@@ -35,30 +49,59 @@ export async function preloadImagesWithCors(root: HTMLElement): Promise<void> {
         isCrossOrigin = false;
       }
       if (!isCrossOrigin) return;
+
+      const originalCrossOrigin = img.getAttribute("crossorigin");
+      const originalSrc = img.getAttribute("src");
+      const restore = () => {
+        if (originalCrossOrigin === null) img.removeAttribute("crossorigin");
+        else img.setAttribute("crossorigin", originalCrossOrigin);
+        if (originalSrc === null) img.removeAttribute("src");
+        else img.setAttribute("src", originalSrc);
+      };
+
       if (img.crossOrigin === "anonymous") {
         // Already CORS-enabled; just make sure it's decoded.
         try {
           await img.decode();
+          return;
         } catch {
-          /* ignore */
+          // coercion-ok: a failed direct load is the signal to try the proxy,
+          // and the proxy attempt below reports its own failure.
+        }
+      } else {
+        img.crossOrigin = "anonymous";
+        // Re-set src to retrigger the load with the new CORS attribute.
+        img.src = src;
+        restores.push(restore);
+        try {
+          await img.decode();
+          return;
+        } catch {
+          // coercion-ok: same as above — this is the CORS probe, not the
+          // final outcome.
         }
-        return;
       }
+
+      // The host does not send Access-Control-Allow-Origin, and no client-side
+      // flag can override that. Re-serve the image from our own origin so the
+      // canvas stays clean instead of rasterizing a blank rect.
+      if (!restores.includes(restore)) restores.push(restore);
       img.crossOrigin = "anonymous";
-      // Re-set src to retrigger the load with the new CORS attribute.
-      img.src = src;
+      img.src = imageProxyUrl(src);
       try {
         await img.decode();
       } catch (err) {
-        // Server didn't return Access-Control-Allow-Origin. The screenshot
-        // will be blank for this image — log so the user can swap the host.
         console.warn(
-          `[export-pdf] CORS-tainted image likely caused blank render: ${src}`,
+          `[export-pdf] image could not be loaded for export: ${src}`,
           err,
         );
       }
     }),
   );
+
+  return () => {
+    for (const restore of restores) restore();
+  };
 }
 
 export function findSlideExportSource(
@@ -132,23 +175,39 @@ export async function exportDeckAsPdf(
     // Force CORS-enabled re-fetch on every cross-origin <img> before
     // capture — otherwise the canvas tainting check inside modern-screenshot
     // produces a blank rect for the image.
-    await preloadImagesWithCors(source);
-
-    const dataUrl = await domToJpeg(source, {
-      width: dims.width,
-      height: dims.height,
-      scale: 2, // 2x for crisp text
-      backgroundColor: "#000000",
-      quality: 0.92,
-      // Pair with the in-DOM CORS preload above. modern-screenshot's
-      // internal image fetcher needs no-cache so re-issued requests don't
-      // get served the original tainted (no-CORS) response from the HTTP
-      // cache, and an anonymous-CORS request mode so the response itself
-      // is usable on a clean canvas.
-      fetch: {
-        requestInit: { cache: "no-cache", mode: "cors", credentials: "omit" },
-      },
-    });
+    const restoreImages = await preloadImagesWithCors(source);
+
+    let dataUrl: string;
+    try {
+      dataUrl = await domToJpeg(source, {
+        width: dims.width,
+        height: dims.height,
+        scale: 2, // 2x for crisp text
+        // guard:allow-raw-color — a PDF page has no theme to follow.
+        backgroundColor: "#000000",
+        quality: 0.92,
+        // Pair with the in-DOM CORS preload above. modern-screenshot's
+        // internal image fetcher needs no-cache so re-issued requests don't
+        // get served the original tainted (no-CORS) response from the HTTP
+        // cache, and an anonymous-CORS request mode so the response itself
+        // is usable on a clean canvas.
+        //
+        // `same-origin` rather than `omit`: images the preload rewrote to
+        // /api/image-proxy are same-origin and that route needs the session
+        // cookie, so omitting credentials would 401 exactly the images this
+        // is meant to rescue. Cross-origin requests still go out anonymously,
+        // which is what CORS mode requires.
+        fetch: {
+          requestInit: {
+            cache: "no-cache",
+            mode: "cors",
+            credentials: "same-origin",
+          },
+        },
+      });
+    } finally {
+      restoreImages();
+    }
 
     if (i > 0) pdf.addPage([dims.width, dims.height], orientation);
     pdf.addImage(dataUrl, "JPEG", 0, 0, dims.width, dims.height);

package/corpus/templates/slides/app/lib/import-uploaded-deck.ts

@@ -9,6 +9,16 @@ export type ImportedSourceDeck = {
   imagesSkipped: number;
 };
 
+/**
+ * PDF/PPTX import renders every page (image extraction, per-page fidelity
+ * parsing) and can run well past the client's default 60s action timeout on
+ * large or image-heavy files. A timeout here only aborts the client's wait —
+ * the server keeps importing and the deck still ends up with slides — so the
+ * default made the editor silently fail on a deck that had, or was about to
+ * have, real content.
+ */
+export const IMPORT_ACTION_TIMEOUT_MS = 5 * 60 * 1000;
+
 function sourceFormat(file: UploadedFile): "pdf" | "pptx" | null {
   const name = file.originalName.toLowerCase();
   if (name.endsWith(".pptx")) return "pptx";
@@ -57,6 +67,7 @@ export async function importUploadedDeckIntoDeck(
             deckId,
             importIntoDeck: true,
           },
+      { timeoutMs: IMPORT_ACTION_TIMEOUT_MS },
     ),
   );
   if (result.imported !== true || result.deckId !== deckId) {

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -345,6 +345,18 @@ export default function DeckEditor() {
     if (!generating) setAddSlideGenerating(false);
   }, [generating]);
 
+  // Below `md` the rail is a drawer behind a full-viewport dimming scrim; at
+  // `md` and up it's docked with no scrim. `sidebarOpen` is seeded from the
+  // width at mount only, so a window that starts wide and is then narrowed
+  // (or an editor opened in a resizable preview pane) keeps `sidebarOpen`
+  // true while the scrim stops being `md:hidden` — dimming the whole editor
+  // with no way to dismiss it.
+  useEffect(() => {
+    const onResize = () => setSidebarOpen(window.innerWidth >= 768);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
   const previousSlideIdsRef = useRef<string[]>([]);
   useEffect(() => {
     const currentSlideIds = deck?.slides.map((slide) => slide.id) ?? [];

package/corpus/templates/slides/app/pages/Index.tsx

@@ -59,6 +59,7 @@ import { createDeckAgentMessage } from "@/lib/agent-visible-message";
 import { savePromptToComposerDraft } from "@/lib/composer-draft";
 import { sortDecksByRecency } from "@/lib/deck-sorting";
 import {
+  IMPORT_ACTION_TIMEOUT_MS,
   importUploadedDeckIntoDeck,
   type ImportedSourceDeck,
 } from "@/lib/import-uploaded-deck";
@@ -813,9 +814,11 @@ export default function Index() {
         let importedReference: ImportedReference | null = null;
         let generationFiles = uploaded;
         if (pptxReference) {
-          const imported = (await callAction("import-pptx", {
-            filePath: pptxReference.path,
-          })) as {
+          const imported = (await callAction(
+            "import-pptx",
+            { filePath: pptxReference.path },
+            { timeoutMs: IMPORT_ACTION_TIMEOUT_MS },
+          )) as {
             id?: unknown;
             imported?: unknown;
             slideCount?: unknown;
@@ -854,12 +857,16 @@ export default function Index() {
             );
           }
           try {
-            const imported = (await callAction("import-file", {
-              filePath: pdfReference.path,
-              format: "pdf",
-              deckId: referenceDeck.id,
-              importIntoDeck: true,
-            })) as {
+            const imported = (await callAction(
+              "import-file",
+              {
+                filePath: pdfReference.path,
+                format: "pdf",
+                deckId: referenceDeck.id,
+                importIntoDeck: true,
+              },
+              { timeoutMs: IMPORT_ACTION_TIMEOUT_MS },
+            )) as {
               imported?: unknown;
               deckId?: unknown;
               pageCount?: unknown;

package/corpus/templates/slides/changelog/2026-08-08-google-slides-export-now-tells-you-why-a-deck-fell-back-to-a.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-08
+---
+
+Google Slides export now tells you why a deck fell back to a .pptx download instead of reporting success.

package/corpus/templates/slides/changelog/2026-08-09-delete-key-now-removes-a-selected-image.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-09
+---
+
+Fixed the Delete key doing nothing after selecting an image that sits inside a slide's layout, such as a picture in a card grid. Only images that had been moved freely on the canvas could be deleted before.

package/corpus/templates/slides/changelog/2026-08-09-editing-a-slide-in-an-imported-deck-no-longer-fails-to-save.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-09
+---
+
+Fixed direct edits to a PDF/PPTX-imported deck's slide text sometimes failing to save with a generic "Internal server error" — the source-preservation guard meant to stop an agent from silently dropping the original artwork or copy was also blocking ordinary human edits, which have no way to opt out of it.

package/corpus/templates/slides/changelog/2026-08-09-fixed-pdf-and-custom-size-powerpoint-imports-rendering-with-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-09
+---
+
+Fixed PDF and custom-size PowerPoint imports rendering with distorted, mispositioned images and text on non-16:9 pages.

package/corpus/templates/slides/changelog/2026-08-09-images-from-sites-without-cors-no-longer-export-blank.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-09
+---
+
+Fixed images vanishing from exported PDFs and PowerPoint files when they came from a site that blocks direct browser access, such as a blog or a stock photo host. Those images are now fetched through the app and appear in the export.

package/corpus/templates/slides/changelog/2026-08-09-imported-pdf-headings-no-longer-lose-the-space-between-color.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-09
+---
+
+Fixed imported PDF text losing the space between words when a line changes color or weight mid-sentence, which ran headings like "7 Air purifying house plants" together into "7 Airpurifying".

package/corpus/templates/slides/changelog/2026-08-09-imported-slide-text-no-longer-renders-too-large-for-its-box.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-09
+---
+
+Fixed imported PDF/PowerPoint slide text rendering larger than its original box (often overlapping neighboring text) whenever the source page's physical size didn't match the deck canvas's assumed size — font sizes now scale by the same factor as element positions instead of a fixed point-to-pixel conversion.

package/corpus/templates/slides/changelog/2026-08-09-large-decks-no-longer-render-slowly-or-glitch-in-the-editor.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-09
+---
+
+Fixed decks with many slides loading slowly and rendering incorrectly in the editor. Every slide thumbnail measured its full layout on mount, so a long deck forced hundreds of page reflows at once; off-screen thumbnails now wait until they scroll into view, and the browser skips painting them entirely until then. The hover buttons on each thumbnail also no longer blur what is behind them, which was making the rail flicker and leaving dark patches over the editor.

package/corpus/templates/slides/changelog/2026-08-09-revise-highlighted-slide-text-with-ai.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-08-09
+---
+
+Highlight text on a slide and the formatting bar now offers "Revise with AI". Describe the change you want — shorter, punchier, on-brand — and the agent rewrites just that text without disturbing the rest of the slide.

package/corpus/templates/slides/changelog/2026-08-09-the-deck-editor-no-longer-stays-dimmed-after-the-window-narro.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-09
+---
+
+Fixed the deck editor staying covered by the mobile slide-rail dimming overlay after the window was narrowed, which washed the whole editor dark with no way to dismiss it.

package/corpus/templates/slides/server/handlers/import/html-converter.ts

@@ -1,3 +1,5 @@
+import { ASPECT_RATIOS } from "@shared/aspect-ratios";
+
 import type {
   ParsedElement,
   ParsedParagraph,
@@ -165,10 +167,37 @@ export function convertToSlideHtml(
 
 const DEFAULT_SLIDE_WIDTH_EMU = 9144000;
 const DEFAULT_SLIDE_HEIGHT_EMU = 5143500;
-const CSS_PX_PER_POINT = 96 / 72;
 const DEFAULT_PPTX_BACKGROUND = "#000000"; // guard:allow-raw-color - preserve PPTX black when no background is declared
 const DEFAULT_PPTX_FOREGROUND = "#ffffff"; // guard:allow-raw-color - preserve PPTX white when no run color is declared
 
+/**
+ * The absolute px box `toSlidePxX`/`toSlidePxY` scale positions and sizes
+ * against. It must match the aspect-ratio preset the deck actually renders
+ * into (`ASPECT_RATIOS`, chosen by the import actions' own
+ * `nearestAspectRatio`) rather than a fixed 16:9 box: a PDF page or a custom
+ * PPTX slide size is routinely portrait or square, and scaling its elements
+ * against a 960x540 reference while the deck itself renders in an 864x1080
+ * (or other) box stretches every element by the ratio between the two
+ * boxes, most visibly squashing everything into the top fraction of a
+ * taller-than-540 canvas.
+ */
+function referenceBoxForSlide(
+  widthEmu: number,
+  heightEmu: number,
+): { width: number; height: number } {
+  const target = widthEmu / heightEmu;
+  let best: { width: number; height: number } = ASPECT_RATIOS["16:9"];
+  let bestDiff = Infinity;
+  for (const preset of Object.values(ASPECT_RATIOS)) {
+    const diff = Math.abs(preset.width / preset.height - target);
+    if (diff < bestDiff) {
+      bestDiff = diff;
+      best = preset;
+    }
+  }
+  return { width: best.width, height: best.height };
+}
+
 function buildFidelitySlide(
   slide: ParsedSlide,
   imageUrls: string | Record<string, string> | undefined,
@@ -176,9 +205,10 @@ function buildFidelitySlide(
 ): string {
   const widthEmu = slide.widthEmu || DEFAULT_SLIDE_WIDTH_EMU;
   const heightEmu = slide.heightEmu || DEFAULT_SLIDE_HEIGHT_EMU;
+  const refBox = referenceBoxForSlide(widthEmu, heightEmu);
   const background = slide.backgroundColor ?? DEFAULT_PPTX_BACKGROUND;
   const gridStyle = slide.backgroundGrid
-    ? `background-image:linear-gradient(to right, ${esc(slide.backgroundGrid.color)} 0 ${Math.max(0.5, toSlidePxX(slide.backgroundGrid.lineWidthEmu, widthEmu))}px, transparent ${Math.max(0.5, toSlidePxX(slide.backgroundGrid.lineWidthEmu, widthEmu))}px),linear-gradient(to bottom, ${esc(slide.backgroundGrid.color)} 0 ${Math.max(0.5, toSlidePxY(slide.backgroundGrid.lineWidthEmu, heightEmu))}px, transparent ${Math.max(0.5, toSlidePxY(slide.backgroundGrid.lineWidthEmu, heightEmu))}px);background-size:${toSlidePxX(slide.backgroundGrid.stepXEmu, widthEmu)}px ${toSlidePxY(slide.backgroundGrid.stepYEmu, heightEmu)}px;background-position:${toSlidePxX(slide.backgroundGrid.offsetXEmu, widthEmu)}px ${toSlidePxY(slide.backgroundGrid.offsetYEmu, heightEmu)}px;background-repeat:repeat;`
+    ? `background-image:linear-gradient(to right, ${esc(slide.backgroundGrid.color)} 0 ${Math.max(0.5, toSlidePxX(slide.backgroundGrid.lineWidthEmu, widthEmu, refBox.width))}px, transparent ${Math.max(0.5, toSlidePxX(slide.backgroundGrid.lineWidthEmu, widthEmu, refBox.width))}px),linear-gradient(to bottom, ${esc(slide.backgroundGrid.color)} 0 ${Math.max(0.5, toSlidePxY(slide.backgroundGrid.lineWidthEmu, heightEmu, refBox.height))}px, transparent ${Math.max(0.5, toSlidePxY(slide.backgroundGrid.lineWidthEmu, heightEmu, refBox.height))}px);background-size:${toSlidePxX(slide.backgroundGrid.stepXEmu, widthEmu, refBox.width)}px ${toSlidePxY(slide.backgroundGrid.stepYEmu, heightEmu, refBox.height)}px;background-position:${toSlidePxX(slide.backgroundGrid.offsetXEmu, widthEmu, refBox.width)}px ${toSlidePxY(slide.backgroundGrid.offsetYEmu, heightEmu, refBox.height)}px;background-repeat:repeat;`
     : "";
   const elements = slide.elements ?? [];
   const html = elements
@@ -188,6 +218,7 @@ function buildFidelitySlide(
         index,
         widthEmu,
         heightEmu,
+        refBox,
         imageUrls,
         themeFont,
       ),
@@ -203,10 +234,11 @@ function buildFidelityElement(
   index: number,
   widthEmu: number,
   heightEmu: number,
+  refBox: { width: number; height: number },
   imageUrls: string | Record<string, string> | undefined,
   themeFont: string | undefined,
 ): string {
-  const position = `position: absolute; left: ${toSlidePxX(element.x, widthEmu)}px; top: ${toSlidePxY(element.y, heightEmu)}px; width: ${toSlidePxX(element.width, widthEmu)}px; height: ${toSlidePxY(element.height, heightEmu)}px; z-index: ${index}; box-sizing: border-box;`;
+  const position = `position: absolute; left: ${toSlidePxX(element.x, widthEmu, refBox.width)}px; top: ${toSlidePxY(element.y, heightEmu, refBox.height)}px; width: ${toSlidePxX(element.width, widthEmu, refBox.width)}px; height: ${toSlidePxY(element.height, heightEmu, refBox.height)}px; z-index: ${index}; box-sizing: border-box;`;
   const rotation = element.rotation
     ? ` transform: rotate(${element.rotation}deg); transform-origin: center center;`
     : "";
@@ -218,12 +250,18 @@ function buildFidelityElement(
     return `<div class="fmd-pptx-image" data-pptx-element-kind="image" data-pptx-image-name="${esc(element.image?.name ?? "image")}"${objectId} style="${position}${rotation} overflow: hidden;">${url ? `<img src="${esc(url)}" alt="" style="${imageStyle}" />` : `<div class="fmd-img-placeholder" style="width:100%;height:100%;">Imported image: ${esc(element.image?.name ?? "image")}</div>`}</div>`;
   }
 
-  const decoration = shapeDecoration(element, widthEmu);
+  const decoration = shapeDecoration(element, widthEmu, refBox.width);
   if (element.kind === "shape") {
     return `<div class="fmd-pptx-shape" data-pptx-element-kind="shape"${objectId} style="${position}${rotation}${decoration}"></div>`;
   }
 
-  const textStyle = textBoxStyle(element, widthEmu, heightEmu, themeFont);
+  const textStyle = textBoxStyle(
+    element,
+    widthEmu,
+    heightEmu,
+    refBox,
+    themeFont,
+  );
   const defaultFontWeight = element.placeholderType === "title" ? 700 : 400;
   const paragraphs = (element.paragraphs ?? [])
     .map((paragraph, paragraphIndex) =>
@@ -231,6 +269,7 @@ function buildFidelityElement(
         paragraph,
         paragraphIndex,
         widthEmu,
+        refBox.width,
         themeFont,
         defaultFontWeight,
       ),
@@ -239,12 +278,41 @@ function buildFidelityElement(
   return `<div class="fmd-pptx-text" data-pptx-element-kind="text"${objectId} style="${position}${rotation}${decoration}${textStyle}">${paragraphs}</div>`;
 }
 
-function toSlidePxX(valueEmu: number, slideWidthEmu: number): number {
-  return Math.round((valueEmu / slideWidthEmu) * 960 * 1000) / 1000;
+function toSlidePxX(
+  valueEmu: number,
+  slideWidthEmu: number,
+  refWidthPx: number,
+): number {
+  return Math.round((valueEmu / slideWidthEmu) * refWidthPx * 1000) / 1000;
 }
 
-function toSlidePxY(valueEmu: number, slideHeightEmu: number): number {
-  return Math.round((valueEmu / slideHeightEmu) * 540 * 1000) / 1000;
+function toSlidePxY(
+  valueEmu: number,
+  slideHeightEmu: number,
+  refHeightPx: number,
+): number {
+  return Math.round((valueEmu / slideHeightEmu) * refHeightPx * 1000) / 1000;
+}
+
+const EMU_PER_POINT = 12700;
+
+/**
+ * A run's font size (and paragraph spacing) is stored in points, a physical
+ * unit independent of the source slide's own canvas size — unlike
+ * position/size EMUs, a fixed `pt * 96/72` conversion doesn't know how far
+ * `toSlidePxX`/`toSlidePxY` scaled that canvas down (or up) to fit the
+ * deck's aspect-ratio box. Converting the point value to EMU first and
+ * running it through the same `toSlidePxX` scale keeps text sized
+ * proportionally to its box on every source slide size, not just the one
+ * physical size (10in wide) that happens to make the fixed conversion agree
+ * with the 16:9 preset's box.
+ */
+function ptToSlidePx(
+  valuePt: number,
+  widthEmu: number,
+  refWidthPx: number,
+): number {
+  return toSlidePxX(valuePt * EMU_PER_POINT, widthEmu, refWidthPx);
 }
 
 function imageUrlForElement(
@@ -263,10 +331,14 @@ function imageRenderStyle(element: ParsedElement): string {
   return `display:block;position:absolute;left:${(-crop.left / visibleWidth) * 100}%;top:${(-crop.top / visibleHeight) * 100}%;width:${(1 / visibleWidth) * 100}%;height:${(1 / visibleHeight) * 100}%;object-fit:fill;`;
 }
 
-function shapeDecoration(element: ParsedElement, widthEmu: number): string {
+function shapeDecoration(
+  element: ParsedElement,
+  widthEmu: number,
+  refWidthPx: number,
+): string {
   const fill = element.fill ? `background: ${esc(element.fill)};` : "";
   const line = element.lineColor
-    ? `border: ${Math.max(1, toSlidePxX(element.lineWidth ?? 12700, widthEmu))}px solid ${esc(element.lineColor)};`
+    ? `border: ${Math.max(1, toSlidePxX(element.lineWidth ?? 12700, widthEmu, refWidthPx))}px solid ${esc(element.lineColor)};`
     : "";
   const radius = element.shapeType === "roundRect" ? "border-radius: 6px;" : "";
   return `${fill}${line}${radius}`;
@@ -276,13 +348,16 @@ function textBoxStyle(
   element: ParsedElement,
   widthEmu: number,
   heightEmu: number,
+  refBox: { width: number; height: number },
   themeFont: string | undefined,
 ): string {
   const padding = element.padding;
-  const left = padding ? toSlidePxX(padding.left, widthEmu) : 0;
-  const right = padding ? toSlidePxX(padding.right, widthEmu) : 0;
-  const top = padding ? toSlidePxY(padding.top, heightEmu) : 0;
-  const bottom = padding ? toSlidePxY(padding.bottom, heightEmu) : 0;
+  const left = padding ? toSlidePxX(padding.left, widthEmu, refBox.width) : 0;
+  const right = padding ? toSlidePxX(padding.right, widthEmu, refBox.width) : 0;
+  const top = padding ? toSlidePxY(padding.top, heightEmu, refBox.height) : 0;
+  const bottom = padding
+    ? toSlidePxY(padding.bottom, heightEmu, refBox.height)
+    : 0;
   const align = element.paragraphs?.[0]?.alignment ?? "left";
   const vertical =
     element.verticalAlign === "middle"
@@ -297,37 +372,55 @@ function buildFidelityParagraph(
   paragraph: ParsedParagraph,
   paragraphIndex: number,
   widthEmu: number,
+  refWidthPx: number,
   themeFont: string | undefined,
   defaultFontWeight: number,
 ): string {
   const firstRun = paragraph.runs[0];
-  const fontSize = (firstRun?.fontSize ?? 18) * CSS_PX_PER_POINT;
+  const fontSize = ptToSlidePx(firstRun?.fontSize ?? 18, widthEmu, refWidthPx);
   const lineHeight = paragraph.lineSpacing ?? 1.2;
+  const bulletFontSize = ptToSlidePx(
+    paragraph.bulletSize ?? firstRun?.fontSize ?? 18,
+    widthEmu,
+    refWidthPx,
+  );
   const bullet = paragraph.bulletChar
-    ? `<span aria-hidden="true" style="display:inline-block;width:${fontSize * 0.75}px;min-width:${fontSize * 0.75}px;margin-right:${fontSize * 0.65}px;color:${esc(paragraph.bulletColor ?? firstRun?.color ?? DEFAULT_PPTX_FOREGROUND)};font-family:${cssFontFamily(paragraph.bulletFontFamily ?? themeFont)};font-size:${(paragraph.bulletSize ?? firstRun?.fontSize ?? 18) * CSS_PX_PER_POINT}px;">${esc(paragraph.bulletChar)}</span>`
+    ? `<span aria-hidden="true" style="display:inline-block;width:${fontSize * 0.75}px;min-width:${fontSize * 0.75}px;margin-right:${fontSize * 0.65}px;color:${esc(paragraph.bulletColor ?? firstRun?.color ?? DEFAULT_PPTX_FOREGROUND)};font-family:${cssFontFamily(paragraph.bulletFontFamily ?? themeFont)};font-size:${bulletFontSize}px;">${esc(paragraph.bulletChar)}</span>`
     : "";
   const marginLeft = paragraph.marginLeftEmu
-    ? toSlidePxX(paragraph.marginLeftEmu, widthEmu)
+    ? toSlidePxX(paragraph.marginLeftEmu, widthEmu, refWidthPx)
     : 0;
   const indent = paragraph.indentEmu
-    ? toSlidePxX(paragraph.indentEmu, widthEmu)
+    ? toSlidePxX(paragraph.indentEmu, widthEmu, refWidthPx)
     : 0;
   const spacingBefore = paragraph.spaceBeforePt ?? 0;
   const spacingAfter = paragraph.spaceAfterPt ?? 0;
   const bulletMargin = paragraph.bulletChar ? `margin-left:${indent}px;` : "";
+  const marginBefore = ptToSlidePx(spacingBefore, widthEmu, refWidthPx);
+  const marginAfter = ptToSlidePx(spacingAfter, widthEmu, refWidthPx);
   const text = paragraph.runs
-    .map((run) => formatFidelityRun(run, themeFont, defaultFontWeight))
+    .map((run) =>
+      formatFidelityRun(
+        run,
+        widthEmu,
+        refWidthPx,
+        themeFont,
+        defaultFontWeight,
+      ),
+    )
     .join("");
-  return `<p data-pptx-paragraph="${paragraphIndex}" style="display:block;flex:0 0 auto;text-align:${paragraph.alignment ?? "left"};white-space:pre-wrap;margin:${spacingBefore * CSS_PX_PER_POINT}px 0 ${spacingAfter * CSS_PX_PER_POINT}px;line-height:${lineHeight};font-size:${fontSize}px;min-height:${fontSize * lineHeight}px;padding-left:${marginLeft}px;text-indent:${paragraph.bulletChar ? 0 : indent}px;">${bullet.replace("display:inline-block;", `display:inline-block;${bulletMargin}`)}${text}</p>`;
+  return `<p data-pptx-paragraph="${paragraphIndex}" style="display:block;flex:0 0 auto;text-align:${paragraph.alignment ?? "left"};white-space:pre-wrap;margin:${marginBefore}px 0 ${marginAfter}px;line-height:${lineHeight};font-size:${fontSize}px;min-height:${fontSize * lineHeight}px;padding-left:${marginLeft}px;text-indent:${paragraph.bulletChar ? 0 : indent}px;">${bullet.replace("display:inline-block;", `display:inline-block;${bulletMargin}`)}${text}</p>`;
 }
 
 function formatFidelityRun(
   run: ParsedTextRun,
+  widthEmu: number,
+  refWidthPx: number,
   themeFont: string | undefined,
   defaultFontWeight = 400,
 ): string {
   const styles = [
-    `font-size:${(run.fontSize ?? 18) * CSS_PX_PER_POINT}px`,
+    `font-size:${ptToSlidePx(run.fontSize ?? 18, widthEmu, refWidthPx)}px`,
     `font-family:${cssFontFamily(run.fontFamily ?? themeFont)}`,
     `color:${esc(run.color ?? DEFAULT_PPTX_FOREGROUND)}`,
     `font-weight:${run.bold ? 700 : fontWeightForFamily(run.fontFamily, defaultFontWeight)}`,

package/corpus/templates/slides/server/handlers/import/pdf-fidelity-parser.ts

@@ -380,14 +380,23 @@ export function mergeLineRuns(items: TextRunBox[]): TextRunBox[] {
       prev.italic === item.italic &&
       prev.underline === item.underline &&
       prev.href === item.href;
+    const needsSpace =
+      prev !== undefined && item.left - prev.right > item.fontSize * 0.25;
     if (prev && sameStyle) {
-      const needsSpace = item.left - prev.right > item.fontSize * 0.25;
       prev.text += (needsSpace ? " " : "") + item.text;
       prev.right = Math.max(prev.right, item.right);
       prev.top = Math.min(prev.top, item.top);
       prev.bottom = Math.max(prev.bottom, item.bottom);
     } else {
-      runs.push({ ...item });
+      // A word-sized gap has to survive a style change too. Only the
+      // same-style branch used to re-add it, so a heading whose colour
+      // changed mid-line ("7 Air " + "purifying") lost the space at the
+      // boundary and rendered as one jammed-together word.
+      const separator =
+        needsSpace && !/\s$/.test(prev?.text ?? "") && !/^\s/.test(item.text)
+          ? " "
+          : "";
+      runs.push({ ...item, text: separator + item.text });
     }
   }
   return runs;