@agent-native/core 0.157.9 → 0.157.11

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

@@ -528,6 +528,20 @@ function resetAutofitTransforms(root: HTMLElement) {
   }
 }
 
+/**
+ * `white-space: nowrap` does not only stop wrapping — it also switches the
+ * element from preserving whitespace to collapsing it. dom-to-pptx trims each
+ * inline run it extracts under a collapsing mode, so an imported PPTX run
+ * boundary that carries the only space between two words ("IMAGE " +
+ * "COMPOSITION") exports as one word, and a `<a:br/>`'s newline-only run
+ * disappears entirely. `pre` suppresses wrapping without giving that up.
+ */
+function noWrapWhiteSpace(element: HTMLElement) {
+  return window.getComputedStyle(element).whiteSpace.startsWith("pre")
+    ? "pre"
+    : "nowrap";
+}
+
 function restoreTextGeometry(
   clone: HTMLElement,
   sourceRect: DOMRect,
@@ -561,7 +575,9 @@ function restoreTextGeometry(
 
     if (record.position === "static" || record.position === "relative") {
       element.dataset.exportTextGeometry = "true";
-      if (record.singleLine) element.style.whiteSpace = "nowrap";
+      if (record.singleLine) {
+        element.style.whiteSpace = noWrapWhiteSpace(element);
+      }
       element.style.left = `${translateX.toFixed(3)}px`;
       element.style.position = "relative";
       element.style.top = `${translateY.toFixed(3)}px`;
@@ -577,7 +593,9 @@ function restoreTextGeometry(
     }
 
     element.dataset.exportTextGeometry = "true";
-    if (record.singleLine) element.style.whiteSpace = "nowrap";
+    if (record.singleLine) {
+      element.style.whiteSpace = noWrapWhiteSpace(element);
+    }
     element.style.boxSizing = "border-box";
     element.style.bottom = "auto";
     element.style.display = "block";
@@ -629,20 +647,37 @@ function restoreImageGeometry(
     element.style.maxWidth = "none";
     element.style.width = `${Math.max(1, desiredWidth)}px`;
 
+    const currentRect = element.getBoundingClientRect();
+    const deltaX = desiredLeft - (currentRect.left - cloneRect.left);
+    const deltaY = desiredTop - (currentRect.top - cloneRect.top);
+
     if (record.position === "absolute" || record.position === "fixed") {
+      // A cropped imported image is absolutely positioned inside its own
+      // absolutely positioned wrapper, so its containing block is that
+      // wrapper — not the slide root these coordinates are measured against.
+      // Assigning slide-space left/top there adds the wrapper's offset a
+      // second time and doubles the position (a tile at x=313.8px exported at
+      // 627.6px, off the canvas). Shift the element's own offsets by the
+      // measured delta instead, which holds for any containing block.
+      const style = window.getComputedStyle(element);
+      const cssLeft = Number.parseFloat(style.left);
+      const cssTop = Number.parseFloat(style.top);
       element.style.bottom = "auto";
-      element.style.left = `${desiredLeft.toFixed(3)}px`;
+      element.style.left = `${(Number.isFinite(cssLeft)
+        ? cssLeft + deltaX
+        : desiredLeft
+      ).toFixed(3)}px`;
       element.style.position = "absolute";
       element.style.right = "auto";
-      element.style.top = `${desiredTop.toFixed(3)}px`;
+      element.style.top = `${(Number.isFinite(cssTop)
+        ? cssTop + deltaY
+        : desiredTop
+      ).toFixed(3)}px`;
       element.style.transform = "none";
       continue;
     }
 
-    const currentRect = element.getBoundingClientRect();
-    const currentLeft = currentRect.left - cloneRect.left;
-    const currentTop = currentRect.top - cloneRect.top;
-    element.style.transform = `translate(${(desiredLeft - currentLeft).toFixed(3)}px, ${(desiredTop - currentTop).toFixed(3)}px)`;
+    element.style.transform = `translate(${deltaX.toFixed(3)}px, ${deltaY.toFixed(3)}px)`;
   }
 }
 
@@ -662,7 +697,7 @@ function normalizeSingleLineText(
     element.dataset.exportSingleLineText = "true";
     if (element.dataset.exportTextGeometry === "true") continue;
     element.style.boxSizing = "border-box";
-    element.style.whiteSpace = "nowrap";
+    element.style.whiteSpace = noWrapWhiteSpace(element);
     if (record.heading) {
       element.style.maxWidth = "none";
       element.style.width = `${Math.max(1, Math.ceil(cloneRect.right - rect.left))}px`;
@@ -753,6 +788,29 @@ function normalizeListsForPptx(
   return bulletIndents;
 }
 
+/**
+ * Imported PPTX paragraphs render their bullet as a decorative
+ * `aria-hidden` marker span separated from the text only by CSS
+ * margin-right (see server html-converter). dom-to-pptx extracts plain text
+ * per DOM node and has no notion of margin, so without a real space
+ * character the marker glyph and the first word run together in the
+ * exported file (e.g. "•PLG-first approach"). Insert one.
+ */
+function ensureBulletMarkerSpacing(root: HTMLElement) {
+  for (const marker of root.querySelectorAll<HTMLElement>(
+    'p[data-pptx-paragraph] > span[aria-hidden="true"]:first-child',
+  )) {
+    const next = marker.nextSibling;
+    if (
+      next?.nodeType === Node.TEXT_NODE &&
+      /^\s/.test(next.textContent ?? "")
+    ) {
+      continue;
+    }
+    marker.after(document.createTextNode(" "));
+  }
+}
+
 const EMU_PER_POINT = 12_700;
 
 /**
@@ -861,24 +919,61 @@ export async function patchBulletIndentsInPptxBlob(
   });
 }
 
+/** Placement on the page; inside a standalone raster it is drawn a second time. */
+const SVG_PLACEMENT_PROPERTIES = [
+  "bottom",
+  "left",
+  "position",
+  "right",
+  "top",
+  "transform",
+];
+
 function svgDataUrl(svg: SVGSVGElement) {
   const copy = svg.cloneNode(true) as SVGSVGElement;
   if (!copy.getAttribute("xmlns")) {
     copy.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   }
+  // The rotation belongs to the shape's slot on the slide and is re-applied to
+  // the <img> that replaces it. Serialized into the SVG's own viewport it
+  // rotates the drawing a second time and pushes it off frame: infog1's arrows
+  // came back as slivers in the corner of an otherwise empty 810px bitmap.
+  for (const property of SVG_PLACEMENT_PROPERTIES) {
+    copy.style.removeProperty(property);
+  }
   const serialized = new XMLSerializer().serializeToString(copy);
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`;
 }
 
+/**
+ * Whether a rasterized shape came back with nothing painted in it —
+ * `undefined` when the canvas cannot be read at all, which is a third outcome
+ * and not the same as "it has content". A fully transparent result is the
+ * shape silently disappearing from the deck, so it is reported, not returned
+ * as a successful render. Fully *opaque* pixels are left alone: a flat white
+ * rectangle is a legitimate shape.
+ */
+export function blankRasterResult(
+  data: Uint8ClampedArray | undefined,
+): boolean | undefined {
+  if (!data || data.length === 0) return undefined;
+  for (let i = 3; i < data.length; i += 4) {
+    if (data[i] !== 0) return false;
+  }
+  return true;
+}
+
 async function rasterizeSvgElement(
   svg: SVGSVGElement,
   width: number,
   height: number,
-) {
+): Promise<{ dataUrl: string; blank: boolean | undefined }> {
   const fallback = svgDataUrl(svg);
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
-  if (!ctx || typeof Image === "undefined") return fallback;
+  if (!ctx || typeof Image === "undefined") {
+    return { dataUrl: fallback, blank: undefined };
+  }
 
   const scale = Math.max(2, window.devicePixelRatio || 1);
   canvas.width = Math.max(1, Math.ceil(width * scale));
@@ -894,24 +989,328 @@ async function rasterizeSvgElement(
   try {
     await loaded;
     ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-    return canvas.toDataURL("image/png");
+    let pixels: Uint8ClampedArray | undefined;
+    try {
+      pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+    } catch {
+      // A tainted canvas cannot be inspected. "Unreadable" is not "rendered",
+      // so say so rather than letting it pass as a verified shape.
+      console.warn(
+        "[export-pptx] rasterized shape could not be inspected; it may be missing from the export",
+      );
+      pixels = undefined;
+    }
+    return {
+      dataUrl: canvas.toDataURL("image/png"),
+      blank: blankRasterResult(pixels),
+    };
   } catch {
-    return fallback;
+    return { dataUrl: fallback, blank: undefined };
   }
 }
 
-async function replaceInlineSvgsWithImages(root: HTMLElement) {
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+
+/**
+ * The `d` of a computed `clip-path`, in the element's own pixels. `path()` is
+ * already one; `polygon()` — what the importer draws every preset geometry
+ * with — becomes the equivalent closed path so both take the same route out.
+ */
+function clipPathOutline(
+  clipPath: string,
+  width: number,
+  height: number,
+): string | undefined {
+  const path = clipPath.match(/^path\(\s*["']?([^"')]*)["']?\s*\)$/i)?.[1];
+  if (path) return path;
+  const polygon = clipPath.match(/^polygon\(([^)]*)\)$/i)?.[1];
+  if (!polygon) return undefined;
+  const points = polygon.split(",").map((pair) => {
+    const [rawX, rawY] = pair.trim().split(/\s+/);
+    const x = clipPathPixels(rawX, width);
+    const y = clipPathPixels(rawY, height);
+    return x == null || y == null ? null : `${x} ${y}`;
+  });
+  if (points.length < 3 || points.some((point) => point == null)) {
+    return undefined;
+  }
+  return `M${points.join(" L")} Z`;
+}
+
+let gradientId = 0;
+
+const GRADIENT_SIDE_ANGLES: Record<string, number> = {
+  "to top": 0,
+  "to right": 90,
+  "to bottom": 180,
+  "to left": 270,
+};
+
+/** Split a CSS argument list on top-level commas so functional color values stay one stop. */
+function splitTopLevel(list: string): string[] | undefined {
+  const parts: string[] = [];
+  let depth = 0;
+  let current = "";
+  for (const character of list) {
+    if (character === "(") depth++;
+    else if (character === ")") depth--;
+    if (depth < 0) return undefined;
+    if (character === "," && depth === 0) {
+      parts.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += character;
+  }
+  if (depth !== 0) return undefined;
+  parts.push(current.trim());
+  return parts;
+}
+
+const round3 = (value: number) => `${Math.round(value * 1000) / 1000}`;
+
+/** `#RRGGBBAA` split into the two attributes SVG stops take; anything else is already a colour a stop accepts. */
+function stopPaint(color: string): { color: string; opacity?: string } {
+  const hex8 = color.match(/^#([\da-f]{6})([\da-f]{2})$/i);
+  if (!hex8) return { color };
+  return {
+    color: `#${hex8[1]}`,
+    opacity: round3(Number.parseInt(hex8[2], 16) / 255),
+  };
+}
+
+function appendGradientStops(
+  gradient: SVGElement,
+  stopParts: string[],
+): SVGElement {
+  stopParts.forEach((part, index) => {
+    const position = part.match(/\s(-?[\d.]+)%$/)?.[1];
+    const raw = position == null ? part : part.slice(0, -position.length - 1);
+    const paint = stopPaint(raw.trim());
+    const stop = document.createElementNS(SVG_NAMESPACE, "stop");
+    stop.setAttribute(
+      "offset",
+      position != null
+        ? `${position}%`
+        : `${(index / (stopParts.length - 1)) * 100}%`,
+    );
+    stop.setAttribute("stop-color", paint.color);
+    if (paint.opacity) stop.setAttribute("stop-opacity", paint.opacity);
+    gradient.appendChild(stop);
+  });
+  return gradient;
+}
+
+/**
+ * A CSS gradient as an SVG paint server for the traced outline. Without this
+ * the outline is filled with `background-color`, which a gradient-filled shape
+ * leaves the paint fully transparent: canyon's layout draws 20 `gradFill` freeforms
+ * behind every slide, and each one rasterized to a fully transparent PNG that
+ * the export then shipped as a successful render.
+ *
+ * `userSpaceOnUse` rather than the default bounding box because both the
+ * gradient line's length and the radial's farthest-corner radius depend on the
+ * box's real proportions, which normalized coordinates have thrown away.
+ */
+export function gradientPaint(
+  backgroundImage: string,
+  width: number,
+  height: number,
+  id: string,
+): SVGElement | undefined {
+  const declaration = backgroundImage
+    .trim()
+    .match(/^(linear|radial)-gradient\(([\s\S]*)\)$/i);
+  if (!declaration) return undefined;
+  const parts = splitTopLevel(declaration[2]);
+  if (!parts || parts.length < 2) return undefined;
+  const head = parts[0].toLowerCase();
+
+  if (declaration[1].toLowerCase() === "radial") {
+    const focus = head.match(
+      /^(?:circle|ellipse)?\s*at\s+(-?[\d.]+)%\s+(-?[\d.]+)%$/,
+    );
+    // A size keyword, a length focus, or an ellipse's two radii are all shapes
+    // this does not place. Reporting them blank beats inventing a circle.
+    if (!focus && head !== "circle" && head !== "ellipse") return undefined;
+    const stopParts = parts.slice(1);
+    if (stopParts.length < 2) return undefined;
+    const cx = focus ? (Number.parseFloat(focus[1]) / 100) * width : width / 2;
+    const cy = focus
+      ? (Number.parseFloat(focus[2]) / 100) * height
+      : height / 2;
+    const gradient = document.createElementNS(SVG_NAMESPACE, "radialGradient");
+    gradient.setAttribute("id", id);
+    gradient.setAttribute("gradientUnits", "userSpaceOnUse");
+    gradient.setAttribute("cx", round3(cx));
+    gradient.setAttribute("cy", round3(cy));
+    // CSS sizes an unqualified radial to its farthest corner.
+    gradient.setAttribute(
+      "r",
+      round3(
+        Math.max(
+          Math.hypot(cx, cy),
+          Math.hypot(width - cx, cy),
+          Math.hypot(cx, height - cy),
+          Math.hypot(width - cx, height - cy),
+        ),
+      ),
+    );
+    return appendGradientStops(gradient, stopParts);
+  }
+
+  const declaredAngle = head.match(/^(-?[\d.]+)deg$/)?.[1];
+  const sideAngle = GRADIENT_SIDE_ANGLES[head];
+  const hasDirection = declaredAngle != null || sideAngle !== undefined;
+  // A corner keyword or a unit this does not read is still a direction, so it
+  // is not a colour stop either. Reporting it blank beats inventing an angle.
+  if (
+    !hasDirection &&
+    /^(to\b|calc\(|-?[\d.]+(deg|rad|grad|turn))/.test(head)
+  ) {
+    return undefined;
+  }
+  const angle =
+    declaredAngle != null
+      ? Number.parseFloat(declaredAngle)
+      : (sideAngle ?? 180);
+  const stopParts = hasDirection ? parts.slice(1) : parts;
+  if (stopParts.length < 2) return undefined;
+
+  const radians = ((angle - 90) * Math.PI) / 180;
+  const dx = Math.cos(radians);
+  const dy = Math.sin(radians);
+  const lineLength = Math.abs(width * dx) + Math.abs(height * dy);
+  const gradient = document.createElementNS(SVG_NAMESPACE, "linearGradient");
+  gradient.setAttribute("id", id);
+  gradient.setAttribute("gradientUnits", "userSpaceOnUse");
+  gradient.setAttribute("x1", round3(width / 2 - (dx * lineLength) / 2));
+  gradient.setAttribute("y1", round3(height / 2 - (dy * lineLength) / 2));
+  gradient.setAttribute("x2", round3(width / 2 + (dx * lineLength) / 2));
+  gradient.setAttribute("y2", round3(height / 2 + (dy * lineLength) / 2));
+  return appendGradientStops(gradient, stopParts);
+}
+
+function clipPathPixels(raw: string | undefined, side: number) {
+  if (!raw) return undefined;
+  const value = Number.parseFloat(raw);
+  if (!Number.isFinite(value)) return undefined;
+  return raw.endsWith("%") ? (value / 100) * side : value;
+}
+
+/**
+ * dom-to-pptx has no custom-geometry surface — it never emits pptxgenjs
+ * `points`, so a clipped element reaches PowerPoint as the filled rectangle of
+ * its bounding box: infographics slide 5 shipped each 405px ring-segment arrow
+ * as a 5.62in solid square, one of them covering the title. Redraw the clip as
+ * a real path in an <svg> that takes the element's place, so
+ * `replaceInlineSvgsWithImages` below carries the outline across.
+ *
+ * The replacement has to *be* the element rather than sit inside it: rotation
+ * is read per node, so an <svg> child of a rotated shape would export
+ * unrotated at the size of its rotated bounding box — bigger than the square
+ * this replaces. Run it after the geometry passes that resolve recorded child
+ * indexes; swapping a node keeps its index, adding one does not.
+ */
+export function materializeClipPathShapes(root: HTMLElement) {
+  for (const element of Array.from(root.querySelectorAll<HTMLElement>("*"))) {
+    const style = window.getComputedStyle(element);
+    const width = computedLength(style.width, 0);
+    const height = computedLength(style.height, 0);
+    if (!(width > 0) || !(height > 0)) continue;
+    const outline = clipPathOutline(style.clipPath, width, height);
+    if (!outline) continue;
+    const overlay = element.firstElementChild;
+    // Anything else inside the clip is its own exported object and would be
+    // flattened into the bitmap, so leave those shapes to the exporter.
+    if (
+      element.childElementCount > (overlay instanceof SVGSVGElement ? 1 : 0)
+    ) {
+      continue;
+    }
+
+    const svg = document.createElementNS(SVG_NAMESPACE, "svg");
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    svg.setAttribute("preserveAspectRatio", "none");
+    svg.style.cssText = element.style.cssText;
+    Object.assign(svg.style, {
+      background: "none",
+      border: "0",
+      clipPath: "none",
+      height: `${height}px`,
+      overflow: "visible",
+      width: `${width}px`,
+    });
+
+    const path = document.createElementNS(SVG_NAMESPACE, "path");
+    path.setAttribute("d", outline);
+    const gradient = gradientPaint(
+      style.backgroundImage,
+      width,
+      height,
+      `fmd-grad-${gradientId++}`,
+    );
+    if (gradient) {
+      const defs = document.createElementNS(SVG_NAMESPACE, "defs");
+      defs.appendChild(gradient);
+      svg.appendChild(defs);
+      path.setAttribute("fill", `url(#${gradient.id})`);
+    } else {
+      path.setAttribute("fill", style.backgroundColor);
+    }
+    const strokeWidth = computedLength(style.borderTopWidth, 0);
+    if (strokeWidth > 0) {
+      path.setAttribute("stroke", style.borderTopColor);
+      path.setAttribute("stroke-width", `${strokeWidth}`);
+    }
+    svg.appendChild(path);
+    // The importer's stroke overlay is already in this element's pixel box, so
+    // its strokes belong over the fill rather than in a second image.
+    if (overlay instanceof SVGSVGElement) {
+      svg.append(...Array.from(overlay.childNodes));
+    }
+    element.replaceWith(svg);
+  }
+}
+
+/**
+ * Rasterize every inline `<svg>` in place, and return how many came back with
+ * nothing painted. A blank bitmap is a shape that vanished from the deck, so
+ * it is counted and named rather than passed on as a rendered image.
+ */
+export async function replaceInlineSvgsWithImages(
+  root: HTMLElement,
+  slideNumber = 1,
+): Promise<number> {
   const svgs = Array.from(root.querySelectorAll<SVGSVGElement>("svg"));
-  for (const svg of svgs) {
+  let blankCount = 0;
+  for (const [index, svg] of svgs.entries()) {
     const rect = svg.getBoundingClientRect();
     const viewBox = svg.viewBox?.baseVal;
+    const style = window.getComputedStyle(svg);
+    // getBoundingClientRect on a rotated node is the axis-aligned box around
+    // it — 1.41x the real edge on a 45deg shape — and the rotation is carried
+    // onto the <img> below, so measuring it here would apply the angle twice.
     const width =
-      rect.width || Number(svg.getAttribute("width")) || viewBox?.width || 1;
+      computedLength(style.width, rect.width) ||
+      Number(svg.getAttribute("width")) ||
+      viewBox?.width ||
+      1;
     const height =
-      rect.height || Number(svg.getAttribute("height")) || viewBox?.height || 1;
-    const dataUrl = await rasterizeSvgElement(svg, width, height);
+      computedLength(style.height, rect.height) ||
+      Number(svg.getAttribute("height")) ||
+      viewBox?.height ||
+      1;
+    const { dataUrl, blank } = await rasterizeSvgElement(svg, width, height);
+    if (blank) {
+      blankCount++;
+      const outline =
+        svg.querySelector("path")?.getAttribute("d")?.slice(0, 48) ?? "no path";
+      console.warn(
+        `[export-pptx] slide ${slideNumber} shape ${index + 1} rasterized empty and will be missing from the export (${Math.round(width)}x${Math.round(height)}, ${outline})`,
+      );
+    }
     const img = document.createElement("img");
-    const style = window.getComputedStyle(svg);
     img.src = dataUrl;
     img.alt = svg.getAttribute("aria-label") ?? "";
     Object.assign(img.style, {
@@ -936,6 +1335,123 @@ async function replaceInlineSvgsWithImages(root: HTMLElement) {
     });
     svg.replaceWith(img);
   }
+  return blankCount;
+}
+
+/**
+ * A PPTX `srcRect` crop imports as an oversized <img> inside an
+ * overflow-hidden wrapper. dom-to-pptx exports the image's own box and has no
+ * notion of the clip, so soze slide 2's 193px portrait shipped 522px wide
+ * across the body text. Bake the visible window into the bitmap and shrink the
+ * element onto it.
+ */
+async function flattenCroppedImages(root: HTMLElement) {
+  for (const image of Array.from(root.querySelectorAll("img"))) {
+    const clip = image.parentElement;
+    if (!clip) continue;
+    const clipStyle = window.getComputedStyle(clip);
+    if (
+      clipStyle.overflowX === "visible" ||
+      clipStyle.overflowY === "visible"
+    ) {
+      continue;
+    }
+
+    const imageRect = image.getBoundingClientRect();
+    const clipRect = clip.getBoundingClientRect();
+    const left = Math.max(imageRect.left, clipRect.left);
+    const top = Math.max(imageRect.top, clipRect.top);
+    const width = Math.min(imageRect.right, clipRect.right) - left;
+    const height = Math.min(imageRect.bottom, clipRect.bottom) - top;
+    if (width <= 0 || height <= 0) continue;
+    if (
+      width >= imageRect.width - 0.5 &&
+      height >= imageRect.height - 0.5 &&
+      left <= imageRect.left + 0.5 &&
+      top <= imageRect.top + 0.5
+    ) {
+      continue;
+    }
+
+    // Only `fill` maps the displayed box linearly onto the bitmap; any other
+    // object-fit needs its own letterbox math, which dom-to-pptx already does
+    // for the uncropped box.
+    if ((window.getComputedStyle(image).objectFit || "fill") !== "fill") {
+      console.warn(
+        `[export-pptx] cropped image uses object-fit and exports uncropped: ${image.src}`,
+      );
+      continue;
+    }
+    // The clone's own <img> can still be in flight even though the source it
+    // was copied from had settled.
+    await waitForImageToSettle(image);
+    if (!image.complete || image.naturalWidth <= 0) {
+      console.warn(
+        `[export-pptx] cropped image is not decoded and exports uncropped: ${image.src}`,
+      );
+      continue;
+    }
+
+    const scaleX = image.naturalWidth / imageRect.width;
+    const scaleY = image.naturalHeight / imageRect.height;
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(width * scaleX));
+    canvas.height = Math.max(1, Math.round(height * scaleY));
+    const context = canvas.getContext("2d");
+    if (!context) {
+      console.warn(
+        `[export-pptx] no 2d canvas to crop with; image exports uncropped: ${image.src}`,
+      );
+      continue;
+    }
+    context.drawImage(
+      image,
+      (left - imageRect.left) * scaleX,
+      (top - imageRect.top) * scaleY,
+      canvas.width,
+      canvas.height,
+      0,
+      0,
+      canvas.width,
+      canvas.height,
+    );
+
+    let cropped: string;
+    try {
+      cropped = canvas.toDataURL("image/png");
+    } catch (error) {
+      console.warn(
+        `[export-pptx] cropped image could not be rasterized and exports uncropped: ${image.src}`,
+        error,
+      );
+      continue;
+    }
+
+    image.src = cropped;
+    image.style.height = `${height}px`;
+    image.style.maxHeight = "none";
+    image.style.maxWidth = "none";
+    image.style.width = `${width}px`;
+
+    const shrunkRect = image.getBoundingClientRect();
+    const deltaX = left - shrunkRect.left;
+    const deltaY = top - shrunkRect.top;
+    const imageStyle = window.getComputedStyle(image);
+    if (imageStyle.position === "absolute" || imageStyle.position === "fixed") {
+      const cssLeft = Number.parseFloat(imageStyle.left);
+      const cssTop = Number.parseFloat(imageStyle.top);
+      image.style.bottom = "auto";
+      image.style.right = "auto";
+      if (Number.isFinite(cssLeft)) {
+        image.style.left = `${(cssLeft + deltaX).toFixed(3)}px`;
+      }
+      if (Number.isFinite(cssTop)) {
+        image.style.top = `${(cssTop + deltaY).toFixed(3)}px`;
+      }
+      continue;
+    }
+    image.style.transform = `translate(${deltaX.toFixed(3)}px, ${deltaY.toFixed(3)}px)`;
+  }
 }
 
 function widenNoWrapTextElements(root: HTMLElement) {
@@ -1049,7 +1565,7 @@ export async function buildDeckPptxBlob(
   deckTitle: string,
   slides: PptxExportSlide[],
   aspectRatio?: AspectRatio,
-): Promise<{ blob: Blob; filename: string }> {
+): Promise<{ blob: Blob; filename: string; blankShapes: number }> {
   const { exportToPptx } = await importExportModule(
     () => import("dom-to-pptx"),
   );
@@ -1064,6 +1580,7 @@ export async function buildDeckPptxBlob(
     cleanup: () => void;
   }> = [];
   const slideBulletIndents: number[][] = [];
+  let blankShapes = 0;
 
   try {
     for (let i = 0; i < slides.length; i++) {
@@ -1078,6 +1595,7 @@ export async function buildDeckPptxBlob(
       await preloadImagesWithCors(clone.element);
       resetAutofitTransforms(clone.element);
       slideBulletIndents.push(normalizeListsForPptx(clone.element, dims));
+      ensureBulletMarkerSpacing(clone.element);
       restorePositionedGeometry(
         clone.element,
         clone.sourceRect,
@@ -1091,9 +1609,9 @@ export async function buildDeckPptxBlob(
         dims,
       );
       normalizeSingleLineText(clone.element, clone.textGeometry);
-      materializeImportedBackgroundGrid(clone.element);
       widenNoWrapTextElements(clone.element);
-      await replaceInlineSvgsWithImages(clone.element);
+      materializeClipPathShapes(clone.element);
+      blankShapes += await replaceInlineSvgsWithImages(clone.element, i + 1);
       await preloadImagesWithCors(clone.element);
       restoreImageGeometry(
         clone.element,
@@ -1101,6 +1619,13 @@ export async function buildDeckPptxBlob(
         clone.imageGeometry,
         dims,
       );
+      // Runs after that restore, which re-applies each image's own measured
+      // box — the uncropped one — and would undo the crop.
+      await flattenCroppedImages(clone.element);
+      // Runs last: it prepends a child to the slide root, which shifts every
+      // child index the geometry passes above resolve their recorded paths
+      // through.
+      materializeImportedBackgroundGrid(clone.element);
     }
 
     const initialBlob = await exportToPptx(
@@ -1124,7 +1649,12 @@ export async function buildDeckPptxBlob(
       slides,
       dims.pptxInches,
     );
-    return { blob, filename: safePptxName(deckTitle) };
+    if (blankShapes > 0) {
+      console.warn(
+        `[export-pptx] ${blankShapes} shape(s) rendered empty and are missing from ${deckTitle}`,
+      );
+    }
+    return { blankShapes, blob, filename: safePptxName(deckTitle) };
   } finally {
     for (const clone of exportClones) {
       clone.cleanup();
@@ -1136,11 +1666,12 @@ export async function exportDeckAsPptx(
   deckTitle: string,
   slides: PptxExportSlide[],
   aspectRatio?: AspectRatio,
-): Promise<void> {
-  const { blob, filename } = await buildDeckPptxBlob(
+): Promise<{ blankShapes: number }> {
+  const { blankShapes, blob, filename } = await buildDeckPptxBlob(
     deckTitle,
     slides,
     aspectRatio,
   );
   triggerBlobDownload(blob, filename);
+  return { blankShapes };
 }