fix(desktop): preserve layered PPTX backgrounds

apps/desktop/src/main/deck-capture.ts

@@ -1059,6 +1059,12 @@ export async function runDomToPptx(slideSelector: string): Promise<{ b64?: strin
   function ensureExplicitSlideBackgrounds(slides: HTMLElement[]): void {
     for (const slide of slides) {
       slide.querySelectorAll(":scope > [data-od-pptx-bg]").forEach((el) => el.remove());
+      // preserveLayeredGradientBackgrounds owns supported layered backgrounds
+      // authored directly on a slide. Adding the usual fallback shim as well
+      // would export the same semi-transparent texture twice.
+      if (hasRasterizableLayeredGradientBackground(getComputedStyle(slide).backgroundImage || "")) {
+        continue;
+      }
       const background = effectiveBackgroundStyle(slide);
       if (!background) continue;
 
@@ -1096,6 +1102,147 @@ export async function runDomToPptx(slideSelector: string): Promise<{ b64?: strin
     }
   }
 
+  function splitCssBackgroundLayers(input: string): string[] {
+    const layers: string[] = [];
+    let current = "";
+    let depth = 0;
+    let quote = "";
+    let escaped = false;
+    for (const char of input) {
+      if (escaped) {
+        current += char;
+        escaped = false;
+        continue;
+      }
+      if (char === "\\") {
+        current += char;
+        escaped = true;
+        continue;
+      }
+      if (quote) {
+        current += char;
+        if (char === quote) quote = "";
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        current += char;
+        quote = char;
+        continue;
+      }
+      if (char === "(") depth += 1;
+      else if (char === ")") depth = Math.max(0, depth - 1);
+      if (char === "," && depth === 0) {
+        if (current.trim()) layers.push(current.trim());
+        current = "";
+      } else {
+        current += char;
+      }
+    }
+    if (current.trim()) layers.push(current.trim());
+    return layers;
+  }
+
+  function hasRasterizableLayeredGradientBackground(input: string): boolean {
+    const layers = splitCssBackgroundLayers(input);
+    if (layers.length < 2) return false;
+    // Keep this allowlist aligned with html2canvas 1.4.1's
+    // SUPPORTED_IMAGE_FUNCTIONS. In particular, repeating and conic gradients
+    // are discarded by its clone parser and must remain on the authored node.
+    const supportedGradient =
+      /^(?:(?:-(?:moz|ms|o|webkit)-)?(?:linear|radial)-gradient|-webkit-gradient)\(/i;
+    return layers.every((layer) => supportedGradient.test(layer));
+  }
+
+  function hasTextBackgroundClip(input: string): boolean {
+    return splitCssBackgroundLayers(input).some((layer) => layer.toLowerCase() === "text");
+  }
+
+  function preserveLayeredGradientBackgrounds(slides: HTMLElement[]): void {
+    const slideElements = new Set(slides);
+    const elements = new Set<HTMLElement>();
+    for (const slide of slides) {
+      elements.add(slide);
+      slide.querySelectorAll<HTMLElement>("*").forEach((el) => elements.add(el));
+    }
+
+    for (const element of elements) {
+      const style = getComputedStyle(element);
+      if (
+        !hasRasterizableLayeredGradientBackground(style.backgroundImage || "") ||
+        hasTextBackgroundClip(style.backgroundClip || "") ||
+        hasTextBackgroundClip(style.webkitBackgroundClip || "")
+      ) {
+        continue;
+      }
+      const isStaticNestedElement = style.position === "static" && !slideElements.has(element);
+
+      // dom-to-pptx's native gradient parser assumes one linear-gradient and
+      // greedily merges layered gradients into one invalid SVG. Its custom-
+      // element path already uses html2canvas, so move only the background to
+      // a background-only custom element. The converter rasterizes that layer
+      // with Chromium while continuing to emit the authored children as native
+      // editable text and shapes.
+      const background = document.createElement("od-pptx-layered-background");
+      background.setAttribute("data-od-pptx-layered-bg", "true");
+      background.setAttribute("aria-hidden", "true");
+      background.style.setProperty("position", "absolute", "important");
+      background.style.setProperty("inset", "0", "important");
+      background.style.setProperty("z-index", "0", "important");
+      background.style.setProperty("pointer-events", "none", "important");
+      background.style.setProperty("box-sizing", "border-box", "important");
+      background.style.setProperty(
+        "padding",
+        `${style.paddingTop || "0px"} ${style.paddingRight || "0px"} ${style.paddingBottom || "0px"} ${style.paddingLeft || "0px"}`,
+        "important",
+      );
+      background.style.setProperty(
+        "border-width",
+        `${style.borderTopWidth || "0px"} ${style.borderRightWidth || "0px"} ${style.borderBottomWidth || "0px"} ${style.borderLeftWidth || "0px"}`,
+        "important",
+      );
+      background.style.setProperty("border-style", "solid", "important");
+      background.style.setProperty("border-color", "transparent", "important");
+      background.style.setProperty("border-radius", style.borderRadius || "0px", "important");
+      background.style.setProperty("background-color", style.backgroundColor, "important");
+      background.style.setProperty("background-image", style.backgroundImage, "important");
+      background.style.setProperty("background-position", style.backgroundPosition, "important");
+      background.style.setProperty("background-size", style.backgroundSize, "important");
+      background.style.setProperty("background-repeat", style.backgroundRepeat, "important");
+      background.style.setProperty("background-origin", style.backgroundOrigin, "important");
+      background.style.setProperty("background-clip", style.backgroundClip, "important");
+
+      if (isStaticNestedElement) {
+        // A static panel and its absolutely positioned descendants share the
+        // same outer containing block. Anchor only the capture child to the
+        // panel's measured border box so the authored panel never becomes a
+        // new containing block.
+        background.style.setProperty("inset", "auto", "important");
+        background.style.setProperty("left", `${element.offsetLeft}px`, "important");
+        background.style.setProperty("top", `${element.offsetTop}px`, "important");
+        background.style.setProperty("width", `${element.offsetWidth}px`, "important");
+        background.style.setProperty("height", `${element.offsetHeight}px`, "important");
+      } else {
+        // ensureExplicitSlideBackgrounds already establishes this containing-
+        // block contract for slides; positioned authored elements already own
+        // the absolutely positioned capture child.
+        if (style.position === "static") element.style.setProperty("position", "relative", "important");
+        Array.from(element.children).forEach((child) => {
+          const childStyle = getComputedStyle(child);
+          const childElement = child as HTMLElement;
+          if (childStyle.position === "static") {
+            childElement.style.setProperty("position", "relative", "important");
+          }
+          if (childStyle.zIndex === "auto") {
+            childElement.style.setProperty("z-index", "1", "important");
+          }
+        });
+      }
+
+      element.style.setProperty("background-image", "none", "important");
+      element.prepend(background);
+    }
+  }
+
   function stabilizeLargeSingleLineText(slides: HTMLElement[]): void {
     for (const slide of slides) {
       slide.querySelectorAll<HTMLElement>("*").forEach((el) => {
@@ -1171,6 +1318,7 @@ export async function runDomToPptx(slideSelector: string): Promise<{ b64?: strin
       .filter((el) => !(el as HTMLElement).closest(".mini-slide, .overview, .notes-overlay, .thumb"));
     if (slides.length === 0) return { error: "no slides to export" };
     ensureExplicitSlideBackgrounds(slides as HTMLElement[]);
+    preserveLayeredGradientBackgrounds(slides as HTMLElement[]);
     stabilizeLargeSingleLineText(slides as HTMLElement[]);
     promoteCjkTypefaces(slides as HTMLElement[]);
     // dom-to-pptx assumes `node.className` is a string, but SVG elements expose