@agent-native/core 0.124.4 → 0.124.6

package/corpus/templates/slides/actions/import-pptx.ts

@@ -1,20 +1,65 @@
 import { defineAction } from "@agent-native/core";
 import { writeAppState } from "@agent-native/core/application-state";
+import { uploadFile } from "@agent-native/core/file-upload";
 import {
   getRequestUserEmail,
   getRequestOrgId,
 } from "@agent-native/core/server/request-context";
 import { assertAccess } from "@agent-native/core/sharing";
 import { eq } from "drizzle-orm";
+import pLimit from "p-limit";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import { notifyClients } from "../server/handlers/decks.js";
 import { convertToSlideHtml } from "../server/handlers/import/html-converter.js";
-import { parsePptx } from "../server/handlers/import/pptx-parser.js";
+import {
+  parsePptx,
+  type ParsedSlide,
+} from "../server/handlers/import/pptx-parser.js";
 import { getDeckUrl } from "./_app-url.js";
 import { readUserUploadedFile } from "./_uploaded-files.js";
 
+// EMF/WMF (Windows metafiles) and TIFF are valid PPTX embed formats but
+// browsers can't render them in an <img> tag — uploading and linking one
+// would just produce a broken image icon.
+const BROWSER_RENDERABLE_IMAGE_MIME_TYPES = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+  "image/svg+xml",
+  "image/bmp",
+]);
+
+async function uploadFirstSlideImage(
+  slide: ParsedSlide,
+  slideIndex: number,
+  ownerEmail: string,
+): Promise<string | undefined> {
+  const image = slide.images[0];
+  if (!image || !BROWSER_RENDERABLE_IMAGE_MIME_TYPES.has(image.mimeType)) {
+    return undefined;
+  }
+  const filename =
+    "pptx-import-" + Date.now() + "-s" + slideIndex + "-" + image.name;
+  try {
+    const result = await uploadFile({
+      data: Buffer.from(image.data),
+      filename,
+      mimeType: image.mimeType,
+      ownerEmail,
+      recordAsset: false,
+    });
+    return result?.url;
+  } catch {
+    // A single slide's upload failing (network/API/rate-limit) shouldn't
+    // abort the whole deck import — that slide's text still imports fine,
+    // it just falls back to a placeholder like an unsupported format would.
+    return undefined;
+  }
+}
+
 export default defineAction({
   description:
     "Import a PPTX file and create a slide deck from it. " +
@@ -43,24 +88,63 @@ export default defineAction({
     const presentation = await parsePptx(fileBuffer);
 
     const deckTitle = title || presentation.title || "Imported Presentation";
+    const ownerEmail = getRequestUserEmail();
+    if (!ownerEmail) throw new Error("no authenticated user");
+    const themeFont = presentation.theme?.fonts?.[0];
 
-    // Convert each parsed slide to our HTML format
-    const slides = presentation.slides.map((parsedSlide, i) => {
-      const html = convertToSlideHtml(parsedSlide);
-      return {
-        id: `slide-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
-        content: html,
-        layout: parsedSlide.layoutHint ?? "content",
-        notes: parsedSlide.notes,
-      };
-    });
+    // Check edit access before uploading any embedded images — uploads are
+    // a side effect with real storage cost, so an unauthorized caller must
+    // be rejected before that side effect happens, not after.
+    if (deckId) {
+      await assertAccess("deck", deckId, "editor");
+    }
+
+    // Convert each parsed slide to our HTML format, uploading the first
+    // embedded image (if any) so it renders as a real image instead of a
+    // text placeholder. Concurrency is capped so a large deck doesn't fire
+    // one outbound upload per slide at once. An image can end up unused
+    // (unsupported format, or upload storage not configured) without
+    // failing the whole import — the slide's text still imports fine — but
+    // that shouldn't be a silent, invisible degradation, so it's counted
+    // and returned to the caller.
+    const uploadLimit = pLimit(4);
+    const results = await Promise.all(
+      presentation.slides.map((parsedSlide, i) =>
+        uploadLimit(async () => {
+          const imageUrl = await uploadFirstSlideImage(
+            parsedSlide,
+            i,
+            ownerEmail,
+          );
+          const html = convertToSlideHtml(parsedSlide, imageUrl, themeFont);
+          return {
+            slide: {
+              id: `slide-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+              content: html,
+              layout: parsedSlide.layoutHint ?? "content",
+              notes: parsedSlide.notes,
+            },
+            // Only the first image on a slide is ever uploaded, so every
+            // other image on that slide is unconditionally dropped too —
+            // not just the first one when it's unsupported.
+            imageSkippedCount: Math.max(
+              0,
+              parsedSlide.images.length - (imageUrl ? 1 : 0),
+            ),
+          };
+        }),
+      ),
+    );
+    const slides = results.map((r) => r.slide);
+    const imagesSkipped = results.reduce(
+      (total, r) => total + r.imageSkippedCount,
+      0,
+    );
 
     const db = getDb();
     const now = new Date().toISOString();
 
     if (deckId) {
-      await assertAccess("deck", deckId, "editor");
-
       const existing = await db
         .select()
         .from(schema.decks)
@@ -89,6 +173,7 @@ export default defineAction({
         theme: presentation.theme,
         imported: true,
         url: getDeckUrl(deckId),
+        ...(imagesSkipped > 0 ? { imagesSkipped } : {}),
       };
     }
 
@@ -99,11 +184,7 @@ export default defineAction({
       id,
       title: deckTitle,
       data: JSON.stringify(data),
-      ownerEmail: (() => {
-        const e = getRequestUserEmail();
-        if (!e) throw new Error("no authenticated user");
-        return e;
-      })(),
+      ownerEmail,
       orgId: getRequestOrgId(),
       createdAt: now,
       updatedAt: now,
@@ -119,6 +200,7 @@ export default defineAction({
       theme: presentation.theme,
       imported: true,
       url: getDeckUrl(id),
+      ...(imagesSkipped > 0 ? { imagesSkipped } : {}),
     };
   },
 });

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

@@ -50,11 +50,22 @@ export function buildFullBleedImageSlideHtml(
 /** Wrap text in formatting tags based on run properties. */
 function formatRun(run: ParsedTextRun): string {
   let text = esc(run.content);
+  if (run.color)
+    text = `<span style="color: ${esc(run.color)};">${text}</span>`;
   if (run.bold) text = `<strong>${text}</strong>`;
   if (run.italic) text = `<em>${text}</em>`;
   return text;
 }
 
+const DEFAULT_IMPORT_FONT = "'Poppins', sans-serif";
+
+/** Turn an extracted PPTX theme font name into a safe CSS font-family value, falling back to the default when absent. */
+function cssFontFamily(themeFont: string | undefined): string {
+  if (!themeFont) return DEFAULT_IMPORT_FONT;
+  const safeName = themeFont.replace(/["']/g, "").trim();
+  return safeName ? `'${safeName}', sans-serif` : DEFAULT_IMPORT_FONT;
+}
+
 /**
  * Group text runs into logical paragraphs.
  * In PPTX, paragraph boundaries are typically between runs with different
@@ -85,25 +96,41 @@ function groupIntoParagraphs(texts: ParsedTextRun[]): ParsedTextRun[][] {
   return paragraphs;
 }
 
-/** Determine slide layout and generate HTML. */
-export function convertToSlideHtml(slide: ParsedSlide): string {
+/**
+ * Determine slide layout and generate HTML. `imageUrl` is the hosted URL
+ * for the slide's first embedded image (already uploaded by the caller) —
+ * pass undefined when the slide has no image or the upload failed, and the
+ * builders fall back to a text placeholder instead of a broken `<img>`.
+ * `themeFont` is the presentation's extracted theme font, if any, so
+ * imported slides keep the source deck's typeface instead of always
+ * rendering in Poppins.
+ */
+export function convertToSlideHtml(
+  slide: ParsedSlide,
+  imageUrl?: string,
+  themeFont?: string,
+): string {
   const paragraphs = groupIntoParagraphs(slide.texts);
+  const fontFamily = cssFontFamily(themeFont);
 
-  // Determine layout
-  if (slide.layoutHint === "title" || paragraphs.length <= 2) {
-    return buildTitleSlide(paragraphs, slide);
+  // An embedded image always wins the layout choice — a forced title slide
+  // has no room to show it, which is how imports used to silently drop
+  // photos from otherwise short/title-shaped slides.
+  if (slide.images.length > 0) {
+    return buildImageSlide(paragraphs, slide, imageUrl, fontFamily);
   }
 
-  if (slide.images.length > 0) {
-    return buildImageSlide(paragraphs, slide);
+  if (slide.layoutHint === "title" || paragraphs.length <= 2) {
+    return buildTitleSlide(paragraphs, slide, fontFamily);
   }
 
-  return buildContentSlide(paragraphs, slide);
+  return buildContentSlide(paragraphs, slide, fontFamily);
 }
 
 function buildTitleSlide(
   paragraphs: ParsedTextRun[][],
   slide: ParsedSlide,
+  fontFamily: string,
 ): string {
   const titlePara = paragraphs[0] ?? [];
   const subtitlePara = paragraphs[1] ?? [];
@@ -111,19 +138,15 @@ function buildTitleSlide(
   const titleText = titlePara.map(formatRun).join(" ") || "Untitled Slide";
   const subtitleText = subtitlePara.map(formatRun).join(" ");
 
-  let imageHtml = "";
-  if (slide.images.length > 0) {
-    imageHtml = `\n    <div class="fmd-img-placeholder" style="width: 100%; height: 200px; border-radius: 12px; margin-top: 32px;">Imported image: ${esc(slide.images[0].name)}</div>`;
-  }
-
-  return `<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-family: 'Poppins', sans-serif;">
-    <h1 style="font-size: 64px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -2px; margin: 0 0 24px 0;">${titleText}</h1>${subtitleText ? `\n    <p style="font-size: 22px; color: rgba(255,255,255,0.55); margin: 0;">${subtitleText}</p>` : ""}${imageHtml}
+  return `<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-family: ${fontFamily};">
+    <h1 style="font-size: 64px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -2px; margin: 0 0 24px 0;">${titleText}</h1>${subtitleText ? `\n    <p style="font-size: 22px; color: rgba(255,255,255,0.55); margin: 0;">${subtitleText}</p>` : ""}
 </div>`;
 }
 
 function buildContentSlide(
   paragraphs: ParsedTextRun[][],
   slide: ParsedSlide,
+  fontFamily: string,
 ): string {
   // First paragraph is the heading, rest are bullet points
   const headingPara = paragraphs[0] ?? [];
@@ -148,20 +171,86 @@ ${bulletItems}
     </div>`;
   }
 
-  let imageHtml = "";
-  if (slide.images.length > 0) {
-    imageHtml = `\n    <div class="fmd-img-placeholder" style="width: 100%; height: 300px; border-radius: 12px; margin-top: 24px;">Imported image: ${esc(slide.images[0].name)}</div>`;
-  }
-
-  return `<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: flex-start; font-family: 'Poppins', sans-serif;">
+  return `<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: flex-start; font-family: ${fontFamily};">
     <div style="font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF; margin-bottom: 16px;">IMPORTED</div>
-    <h2 style="font-size: 40px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -1px; margin: 0 0 48px 0;">${headingText}</h2>${bulletsHtml}${imageHtml}
+    <h2 style="font-size: 40px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -1px; margin: 0 0 48px 0;">${headingText}</h2>${bulletsHtml}
 </div>`;
 }
 
+/**
+ * Render the slide's embedded image, or a text placeholder if it couldn't
+ * be uploaded. `objectFit` defaults to `contain` — the stacked-image layout
+ * sizes its box to the shape's own placed aspect ratio specifically so the
+ * source photo isn't cropped, but the embedded file's actual pixel ratio
+ * can still differ slightly from that placed ratio, and `cover` would crop
+ * to fill the box in that case, defeating the point. `cover` is only
+ * correct for a full-bleed background image, which intentionally fills its
+ * box edge-to-edge.
+ */
+function imageOrPlaceholder(
+  imageUrl: string | undefined,
+  imageName: string,
+  style: string,
+  objectFit: "cover" | "contain" = "contain",
+): string {
+  if (imageUrl) {
+    return `<img src="${esc(imageUrl)}" alt="" style="${style} object-fit: ${objectFit};" />`;
+  }
+  return `<div class="fmd-img-placeholder" style="${style}">Imported image: ${esc(imageName)}</div>`;
+}
+
+/**
+ * A PPTX slide's picture and heading always go through one of two real
+ * designs, decided by how big the photo was placed on the original slide —
+ * not by a single fixed template:
+ *  - a near-full-slide photo (a cover/section photo) had its title overlaid
+ *    on top of it in the original, so it's rendered full-bleed with the
+ *    text overlaid over a legibility scrim;
+ *  - a smaller inset photo (a card-style illustration) had its caption
+ *    stacked below it, so it's rendered that way, sized to the image's own
+ *    aspect ratio instead of a fixed box that would crop or stretch it.
+ */
 function buildImageSlide(
   paragraphs: ParsedTextRun[][],
   slide: ParsedSlide,
+  imageUrl: string | undefined,
+  fontFamily: string,
+): string {
+  if (imageUrl && slide.images[0]?.fullBleed) {
+    return buildOverlayImageSlide(paragraphs, imageUrl, fontFamily);
+  }
+  return buildStackedImageSlide(paragraphs, slide, imageUrl, fontFamily);
+}
+
+/** Full-bleed photo with the heading/caption overlaid at the bottom behind a gradient scrim. */
+function buildOverlayImageSlide(
+  paragraphs: ParsedTextRun[][],
+  imageUrl: string,
+  fontFamily: string,
+): string {
+  const headingPara = paragraphs[0] ?? [];
+  const headingHtml = headingPara.map(formatRun).join(" ") || "Slide";
+
+  const captionParas = paragraphs.slice(1);
+  const captionHtml = captionParas
+    .map((para) => para.map(formatRun).join(" "))
+    .join(" ");
+
+  return `<div class="fmd-slide" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
+    <img src="${esc(imageUrl)}" alt="" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;" />
+    <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 80%);"></div>
+    <div style="position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 70px; font-family: ${fontFamily};">
+      <h2 style="font-size: 40px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -1px; margin: 0 0 ${captionHtml ? "12px" : "0"} 0;">${headingHtml}</h2>${captionHtml ? `\n      <p style="font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.5; margin: 0;">${captionHtml}</p>` : ""}
+    </div>
+</div>`;
+}
+
+/** Photo card on top (sized to its own aspect ratio), heading/caption below. */
+function buildStackedImageSlide(
+  paragraphs: ParsedTextRun[][],
+  slide: ParsedSlide,
+  imageUrl: string | undefined,
+  fontFamily: string,
 ): string {
   const headingPara = paragraphs[0] ?? [];
   const headingText = headingPara.map(formatRun).join(" ") || "Slide";
@@ -172,11 +261,24 @@ function buildImageSlide(
     .join(" ");
 
   const imageName = slide.images[0]?.name ?? "image";
-
-  return `<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: flex-start; font-family: 'Poppins', sans-serif;">
-    <div style="font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF; margin-bottom: 16px;">IMPORTED</div>
-    <h2 style="font-size: 40px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -1px; margin: 0 0 32px 0;">${headingText}</h2>
-    <div class="fmd-img-placeholder" style="width: 100%; height: 300px; border-radius: 12px;">Imported image: ${esc(imageName)}</div>${captionText ? `\n    <p style="font-size: 18px; color: rgba(255,255,255,0.55); margin: 24px 0 0 0;">${captionText}</p>` : ""}
+  // Size the box to the image's own placed aspect ratio instead of a fixed
+  // height, so portrait and landscape source photos both render undistorted
+  // — a fixed height forced `object-fit: cover` to crop whichever
+  // orientation didn't match the assumed box.
+  const aspectRatio = slide.images[0]?.aspectRatio ?? 16 / 9;
+  // `max-width` (not `width: 100%`) so the aspect-ratio box is never forced
+  // wider than the height cap allows — pinning width to 100% while also
+  // capping height made `object-fit: cover` crop the image to fit, which
+  // defeated the point of sizing the box to its real aspect ratio.
+  const imageHtml = imageOrPlaceholder(
+    imageUrl,
+    imageName,
+    `display: block; max-width: 100%; max-height: 320px; aspect-ratio: ${aspectRatio}; border-radius: 12px; margin: 0 auto 24px;`,
+  );
+
+  return `<div class="fmd-slide" style="padding: 64px 90px; display: flex; flex-direction: column; justify-content: flex-start; font-family: ${fontFamily};">
+    ${imageHtml}
+    <h2 style="font-size: 32px; font-weight: 900; color: #fff; line-height: 1.2; letter-spacing: -0.5px; margin: 0 0 12px 0;">${headingText}</h2>${captionText ? `\n    <p style="font-size: 16px; color: rgba(255,255,255,0.7); line-height: 1.5; margin: 0;">${captionText}</p>` : ""}
 </div>`;
 }
 

package/dist/collab/routes.d.ts

@@ -26,8 +26,8 @@ export declare const getCollabState: import("h3").EventHandlerWithFetch<import("
  * Body: { update: string (base64), requestSource?: string }
  */
 export declare const postCollabUpdate: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
-    ok?: undefined;
     error: string;
+    ok?: undefined;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/ingestion/pptx.d.ts

@@ -9,6 +9,10 @@ export interface ParsedPptxImage {
     data: Uint8Array;
     mimeType: string;
     name: string;
+    /** Width / height of the picture shape on the slide, from its own placed size (not the source file's pixel dimensions). */
+    aspectRatio?: number;
+    /** True when the picture shape covers at least ~85% of the slide's width and height — a full-bleed background photo rather than an inset card image. */
+    fullBleed?: boolean;
 }
 export interface ParsedPptxSlide {
     texts: ParsedPptxTextRun[];

package/dist/ingestion/pptx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pptx.d.ts","sourceRoot":"","sources":["../../src/ingestion/pptx.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CAC/C;AAYD,wBAAsB,qBAAqB,CACzC,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,sBAAsB,CAAC,CAgHjC"}
+{"version":3,"file":"pptx.d.ts","sourceRoot":"","sources":["../../src/ingestion/pptx.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,2HAA2H;IAC3H,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wJAAwJ;IACxJ,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CAC/C;AAYD,wBAAsB,qBAAqB,CACzC,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,sBAAsB,CAAC,CAkJjC"}

package/dist/ingestion/pptx.js

@@ -7,7 +7,11 @@ export async function parsePptxPresentation(fileBuffer) {
     if (!presentationXml)
         throw new Error("Invalid PPTX: missing ppt/presentation.xml");
     const presentation = parseXml(presentationXml);
-    const slideIds = asArray(record(record(record(presentation)?.["p:presentation"])?.["p:sldIdLst"])?.["p:sldId"]).map((entry) => stringValue(record(entry)?.["@_r:id"]) ?? "");
+    const presentationRoot = record(record(presentation)?.["p:presentation"]);
+    const slideIds = asArray(record(presentationRoot?.["p:sldIdLst"])?.["p:sldId"]).map((entry) => stringValue(record(entry)?.["@_r:id"]) ?? "");
+    const sldSz = record(presentationRoot?.["p:sldSz"]);
+    const slideWidthEmu = Number(sldSz?.["@_cx"]) || undefined;
+    const slideHeightEmu = Number(sldSz?.["@_cy"]) || undefined;
     const relationshipsXml = await zip
         .file("ppt/_rels/presentation.xml.rels")
         ?.async("string");
@@ -50,7 +54,22 @@ export async function parsePptxPresentation(fileBuffer) {
             .file(relationshipPath)
             ?.async("string");
         if (slideRelationshipsXml) {
-            for (const relationship of parseRelationships(parseXml(slideRelationshipsXml)).values()) {
+            const slideRelationships = parseRelationships(parseXml(slideRelationshipsXml));
+            // Walk the slide's own picture shapes (in document order) rather than
+            // every image relationship, so each image carries the placed size the
+            // author gave it on the slide — that size is what tells a full-bleed
+            // cover photo apart from a small inset card photo, which a flat
+            // relationship scan has no way to know.
+            const pictureShapes = [];
+            collectPictureShapes(slide, pictureShapes);
+            reorderByDocumentPosition(pictureShapes, xml);
+            addBackgroundFillShape(slide, pictureShapes, slideWidthEmu, slideHeightEmu);
+            for (const shape of pictureShapes) {
+                if (!shape.embedId)
+                    continue;
+                const relationship = slideRelationships.get(shape.embedId);
+                if (!relationship)
+                    continue;
                 if (!relationship.type.includes("/image") &&
                     !/\.(png|jpe?g|gif|svg|webp|bmp|tiff?|emf|wmf)$/i.test(relationship.target)) {
                     continue;
@@ -64,10 +83,21 @@ export async function parsePptxPresentation(fileBuffer) {
                 if (!image)
                     continue;
                 const name = imagePath.split("/").at(-1) ?? "image";
+                const aspectRatio = shape.widthEmu && shape.heightEmu
+                    ? shape.widthEmu / shape.heightEmu
+                    : undefined;
+                const fullBleed = Boolean(shape.widthEmu &&
+                    shape.heightEmu &&
+                    slideWidthEmu &&
+                    slideHeightEmu &&
+                    shape.widthEmu / slideWidthEmu >= 0.85 &&
+                    shape.heightEmu / slideHeightEmu >= 0.85);
                 images.push({
                     data: new Uint8Array(await image.async("nodebuffer")),
                     mimeType: imageMimeType(name),
                     name,
+                    aspectRatio,
+                    fullBleed,
                 });
             }
         }
@@ -149,6 +179,181 @@ function collectTextRuns(value, runs, inherited = {}) {
             collectTextRuns(item, runs, inherited);
     }
 }
+/**
+ * Recursively find every embedded picture in a slide, in document order:
+ * plain `p:pic` shapes, and `p:sp` autoshapes whose fill is a picture
+ * (common for "photo cutout" shapes and full-bleed decorative rectangles).
+ * A group shape (`p:grpSp`) defines its own local coordinate space for its
+ * children (`chOff`/`chExt`) that can be scaled arbitrarily relative to the
+ * group's own placed size on the slide, so each level of nesting multiplies
+ * a running scale factor into the child sizes below it — without that, a
+ * picture inside a resized group would report its unscaled design-time
+ * size instead of how large it actually appears on the slide.
+ */
+function collectPictureShapes(value, out, scaleX = 1, scaleY = 1) {
+    const node = record(value);
+    if (!node)
+        return;
+    for (const [key, child] of Object.entries(node)) {
+        if (key.startsWith("@_"))
+            continue;
+        if (key === "p:pic") {
+            for (const picNode of asArray(child)) {
+                const pic = record(picNode);
+                const blip = record(record(pic?.["p:blipFill"])?.["a:blip"]);
+                out.push(scaledShape(stringValue(blip?.["@_r:embed"]), extFromSpPr(pic), scaleX, scaleY));
+            }
+            continue;
+        }
+        if (key === "p:sp") {
+            for (const spNode of asArray(child)) {
+                const sp = record(spNode);
+                const blip = record(record(record(sp?.["p:spPr"])?.["a:blipFill"])?.["a:blip"]);
+                const embedId = stringValue(blip?.["@_r:embed"]);
+                if (embedId) {
+                    out.push(scaledShape(embedId, extFromSpPr(sp), scaleX, scaleY));
+                }
+            }
+            continue;
+        }
+        if (key === "p:grpSp") {
+            for (const groupNode of asArray(child)) {
+                const scale = groupChildScale(record(groupNode), scaleX, scaleY);
+                collectPictureShapes(groupNode, out, scale.x, scale.y);
+            }
+            continue;
+        }
+        for (const item of asArray(child)) {
+            collectPictureShapes(item, out, scaleX, scaleY);
+        }
+    }
+}
+/** Whether an `a:xfrm` `rot` value (60,000ths of a degree) is an odd multiple of 90° — a 90/270 turn that swaps effective width and height. */
+function isOddQuarterTurn(rot) {
+    if (!Number.isFinite(rot))
+        return false;
+    const quarterTurns = Math.round(rot / 60000 / 90);
+    return ((quarterTurns % 2) + 2) % 2 === 1;
+}
+/**
+ * A group's `chExt` is the coordinate space its children are authored in;
+ * `ext` is how large the group actually renders — the ratio between them is
+ * the extra scale nested children need on top of their own declared size.
+ * When the group itself is rotated a 90/270-degree turn, that ratio applies
+ * to the perpendicular axis on the slide, so the X/Y scale factors need
+ * swapping the same way a rotated picture's own width/height do.
+ */
+function groupChildScale(groupNode, parentScaleX, parentScaleY) {
+    const xfrm = record(record(groupNode?.["p:grpSpPr"])?.["a:xfrm"]);
+    const ext = record(xfrm?.["a:ext"]);
+    const chExt = record(xfrm?.["a:chExt"]);
+    const extCx = Number(ext?.["@_cx"]);
+    const extCy = Number(ext?.["@_cy"]);
+    const chExtCx = Number(chExt?.["@_cx"]);
+    const chExtCy = Number(chExt?.["@_cy"]);
+    let groupScaleX = Number.isFinite(extCx) && Number.isFinite(chExtCx) && chExtCx > 0
+        ? extCx / chExtCx
+        : 1;
+    let groupScaleY = Number.isFinite(extCy) && Number.isFinite(chExtCy) && chExtCy > 0
+        ? extCy / chExtCy
+        : 1;
+    if (isOddQuarterTurn(Number(xfrm?.["@_rot"]))) {
+        [groupScaleX, groupScaleY] = [groupScaleY, groupScaleX];
+    }
+    return { x: parentScaleX * groupScaleX, y: parentScaleY * groupScaleY };
+}
+/**
+ * `a:xfrm/a:ext` always stores the shape's *unrotated* design-time width and
+ * height — `a:xfrm/@rot` (in 60,000ths of a degree) rotates it around its
+ * own center afterward. For a 90/270-degree turn, the shape's effective
+ * on-slide footprint has its width and height swapped relative to that
+ * declared size, so a rotated full-bleed photo can otherwise get treated as
+ * a small inset, or a portrait image get an inverted aspect ratio.
+ */
+function extFromSpPr(shapeNode) {
+    const xfrm = record(record(shapeNode?.["p:spPr"])?.["a:xfrm"]);
+    const ext = record(xfrm?.["a:ext"]);
+    const cx = Number(ext?.["@_cx"]);
+    const cy = Number(ext?.["@_cy"]);
+    if (!Number.isFinite(cx) || cx <= 0 || !Number.isFinite(cy) || cy <= 0) {
+        return { cx: undefined, cy: undefined };
+    }
+    return isOddQuarterTurn(Number(xfrm?.["@_rot"]))
+        ? { cx: cy, cy: cx }
+        : { cx, cy };
+}
+function scaledShape(embedId, size, scaleX, scaleY) {
+    return {
+        embedId,
+        widthEmu: size.cx !== undefined ? size.cx * scaleX : undefined,
+        heightEmu: size.cy !== undefined ? size.cy * scaleY : undefined,
+    };
+}
+/**
+ * fast-xml-parser groups sibling elements by tag name, so a slide whose
+ * picture-bearing shapes alternate types on the page (e.g. `p:sp`, `p:pic`,
+ * `p:sp`) comes out of `collectPictureShapes` re-sorted by tag rather than
+ * by the order they actually appear — every `p:sp` gets visited before any
+ * `p:pic`, even if a `p:pic` came first in the file. Re-derive the true
+ * order from the raw XML text instead: `<a:blip r:embed="...">` occurrences
+ * appear in exactly document order regardless of nesting, so they can be
+ * used to restore the author's original front-to-back ordering (which
+ * matters because downstream rendering treats the first image as primary).
+ */
+function reorderByDocumentPosition(shapes, xml) {
+    const order = [];
+    const blipPattern = /<a:blip\b[^>]*\br:embed=(?:"([^"]+)"|'([^']+)')/g;
+    let match;
+    while ((match = blipPattern.exec(xml)))
+        order.push(match[1] ?? match[2]);
+    // The same relationship id can legitimately be reused across multiple
+    // placements (e.g. a repeated icon), so looking up a single fixed index
+    // per id would assign every reused shape the position of its first XML
+    // occurrence. Instead give each id a queue of its occurrence positions
+    // and consume one per shape, in the order shapes were collected.
+    const occurrences = new Map();
+    order.forEach((embedId, index) => {
+        const queue = occurrences.get(embedId);
+        if (queue)
+            queue.push(index);
+        else
+            occurrences.set(embedId, [index]);
+    });
+    const positions = shapes.map((shape) => {
+        const queue = shape.embedId ? occurrences.get(shape.embedId) : undefined;
+        return queue && queue.length > 0 ? queue.shift() : -1;
+    });
+    const sortedIndices = shapes.map((_, i) => i);
+    sortedIndices.sort((a, b) => positions[a] - positions[b]);
+    const sorted = sortedIndices.map((i) => shapes[i]);
+    shapes.splice(0, shapes.length, ...sorted);
+}
+/** Read the embed relationship id of a slide's background picture fill (`p:cSld/p:bg/p:bgPr/a:blipFill/a:blip`), if any. */
+function extractBackgroundFillEmbedId(slide) {
+    const root = record(slide);
+    const cSld = record(record(root?.["p:sld"])?.["p:cSld"] ?? root?.["p:cSld"]);
+    const bgPr = record(record(cSld?.["p:bg"])?.["p:bgPr"]);
+    const blip = record(record(bgPr?.["a:blipFill"])?.["a:blip"]);
+    return stringValue(blip?.["@_r:embed"]);
+}
+/**
+ * Add the slide's background picture fill, if any, as a synthetic
+ * full-slide-sized shape. It's unshifted to the front rather than appended:
+ * downstream rendering only ever uses the first image in the list, and a
+ * background fill is the slide's base layer — the primary visual — so a
+ * smaller foreground picture (a logo, an icon) must not bump it out of that
+ * slot.
+ */
+function addBackgroundFillShape(slide, pictureShapes, slideWidthEmu, slideHeightEmu) {
+    const embedId = extractBackgroundFillEmbedId(slide);
+    if (!embedId)
+        return;
+    pictureShapes.unshift({
+        embedId,
+        widthEmu: slideWidthEmu,
+        heightEmu: slideHeightEmu,
+    });
+}
 function runProperties(value, inherited) {
     if (!value)
         return inherited;