dom-to-pptx 1.0.5 → 1.0.6

package/dist/dom-to-pptx.mjs

@@ -53,7 +53,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
         function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, [])).next());
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 }
 
@@ -86,7 +86,7 @@ function __generator(thisArg, body) {
 }
 
 function __spreadArray(to, from, pack) {
-    if (arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) ar = Array.prototype.slice.call(from, 0, i);
             ar[i] = from[i];
@@ -7820,1172 +7820,1202 @@ var parseBackgroundColor = function (context, element, backgroundColorOverride)
         : defaultBackgroundColor;
 };
 
-// src/utils.js
-
-/**
- * Checks if any parent element has overflow: hidden which would clip this element
- * @param {HTMLElement} node - The DOM node to check
- * @returns {boolean} - True if a parent has overflow-hidden or overflow-clip
- */
-function isClippedByParent(node) {
-  let parent = node.parentElement;
-  while (parent && parent !== document.body) {
-    const style = window.getComputedStyle(parent);
-    const overflow = style.overflow;
-    if (overflow === 'hidden' || overflow === 'clip') {
-      return true;
-    }
-    parent = parent.parentElement;
-  }
-  return false;
-}
-
-// Helper to save gradient text
-function getGradientFallbackColor(bgImage) {
-  if (!bgImage) return null;
-  const hexMatch = bgImage.match(/#(?:[0-9a-fA-F]{3}){1,2}/);
-  if (hexMatch) return hexMatch[0];
-  const rgbMatch = bgImage.match(/rgba?\(.*?\)/);
-  if (rgbMatch) return rgbMatch[0];
-  return null;
-}
-
-function mapDashType(style) {
-  if (style === 'dashed') return 'dash';
-  if (style === 'dotted') return 'dot';
-  return 'solid';
-}
-
-/**
- * Analyzes computed border styles and determines the rendering strategy.
- */
-function getBorderInfo(style, scale) {
-  const top = {
-    width: parseFloat(style.borderTopWidth) || 0,
-    style: style.borderTopStyle,
-    color: parseColor(style.borderTopColor).hex,
-  };
-  const right = {
-    width: parseFloat(style.borderRightWidth) || 0,
-    style: style.borderRightStyle,
-    color: parseColor(style.borderRightColor).hex,
-  };
-  const bottom = {
-    width: parseFloat(style.borderBottomWidth) || 0,
-    style: style.borderBottomStyle,
-    color: parseColor(style.borderBottomColor).hex,
-  };
-  const left = {
-    width: parseFloat(style.borderLeftWidth) || 0,
-    style: style.borderLeftStyle,
-    color: parseColor(style.borderLeftColor).hex,
-  };
-
-  const hasAnyBorder = top.width > 0 || right.width > 0 || bottom.width > 0 || left.width > 0;
-  if (!hasAnyBorder) return { type: 'none' };
-
-  // Check if all sides are uniform
-  const isUniform =
-    top.width === right.width &&
-    top.width === bottom.width &&
-    top.width === left.width &&
-    top.style === right.style &&
-    top.style === bottom.style &&
-    top.style === left.style &&
-    top.color === right.color &&
-    top.color === bottom.color &&
-    top.color === left.color;
-
-  if (isUniform) {
-    return {
-      type: 'uniform',
-      options: {
-        width: top.width * 0.75 * scale,
-        color: top.color,
-        transparency: (1 - parseColor(style.borderTopColor).opacity) * 100,
-        dashType: mapDashType(top.style),
-      },
-    };
-  } else {
-    return {
-      type: 'composite',
-      sides: { top, right, bottom, left },
-    };
-  }
-}
-
-/**
- * Generates an SVG image for composite borders that respects border-radius.
- */
-function generateCompositeBorderSVG(w, h, radius, sides) {
-  radius = radius / 2; // Adjust for SVG rendering
-  const clipId = 'clip_' + Math.random().toString(36).substr(2, 9);
-  let borderRects = '';
-
-  if (sides.top.width > 0 && sides.top.color) {
-    borderRects += `<rect x="0" y="0" width="${w}" height="${sides.top.width}" fill="#${sides.top.color}" />`;
-  }
-  if (sides.right.width > 0 && sides.right.color) {
-    borderRects += `<rect x="${w - sides.right.width}" y="0" width="${sides.right.width}" height="${h}" fill="#${sides.right.color}" />`;
-  }
-  if (sides.bottom.width > 0 && sides.bottom.color) {
-    borderRects += `<rect x="0" y="${h - sides.bottom.width}" width="${w}" height="${sides.bottom.width}" fill="#${sides.bottom.color}" />`;
-  }
-  if (sides.left.width > 0 && sides.left.color) {
-    borderRects += `<rect x="0" y="0" width="${sides.left.width}" height="${h}" fill="#${sides.left.color}" />`;
-  }
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-        <defs>
-            <clipPath id="${clipId}">
-                <rect x="0" y="0" width="${w}" height="${h}" rx="${radius}" ry="${radius}" />
-            </clipPath>
-        </defs>
-        <g clip-path="url(#${clipId})">
-            ${borderRects}
-        </g>
-    </svg>`;
-
-  return 'data:image/svg+xml;base64,' + btoa(svg);
-}
-
-/**
- * Generates an SVG data URL for a solid shape with non-uniform corner radii.
- */
-function generateCustomShapeSVG(w, h, color, opacity, radii) {
-  let { tl, tr, br, bl } = radii;
-  
-  // Clamp radii using CSS spec logic (avoid overlap)
-  const factor = Math.min(
-    (w / (tl + tr)) || Infinity,
-    (h / (tr + br)) || Infinity,
-    (w / (br + bl)) || Infinity,
-    (h / (bl + tl)) || Infinity
-  );
-  
-  if (factor < 1) {
-    tl *= factor; tr *= factor; br *= factor; bl *= factor;
-  }
-
-  const path = `
-    M ${tl} 0
-    L ${w - tr} 0
-    A ${tr} ${tr} 0 0 1 ${w} ${tr}
-    L ${w} ${h - br}
-    A ${br} ${br} 0 0 1 ${w - br} ${h}
-    L ${bl} ${h}
-    A ${bl} ${bl} 0 0 1 0 ${h - bl}
-    L 0 ${tl}
-    A ${tl} ${tl} 0 0 1 ${tl} 0
-    Z
-  `;
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-      <path d="${path}" fill="#${color}" fill-opacity="${opacity}" />
-    </svg>`;
-
-  return 'data:image/svg+xml;base64,' + btoa(svg);
-}
-
-function parseColor(str) {
-  if (!str || str === 'transparent' || str.startsWith('rgba(0, 0, 0, 0)')) {
-    return { hex: null, opacity: 0 };
-  }
-  if (str.startsWith('#')) {
-    let hex = str.slice(1);
-    if (hex.length === 3)
-      hex = hex.split('').map((c) => c + c).join('');
-    return { hex: hex.toUpperCase(), opacity: 1 };
-  }
-  const match = str.match(/[\d.]+/g);
-  if (match && match.length >= 3) {
-    const r = parseInt(match[0]);
-    const g = parseInt(match[1]);
-    const b = parseInt(match[2]);
-    const a = match.length > 3 ? parseFloat(match[3]) : 1;
-    const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
-    return { hex, opacity: a };
-  }
-  return { hex: null, opacity: 0 };
-}
-
-function getPadding(style, scale) {
-  const pxToInch = 1 / 96;
-  return [
-    (parseFloat(style.paddingTop) || 0) * pxToInch * scale,
-    (parseFloat(style.paddingRight) || 0) * pxToInch * scale,
-    (parseFloat(style.paddingBottom) || 0) * pxToInch * scale,
-    (parseFloat(style.paddingLeft) || 0) * pxToInch * scale,
-  ];
-}
-
-function getSoftEdges(filterStr, scale) {
-  if (!filterStr || filterStr === 'none') return null;
-  const match = filterStr.match(/blur\(([\d.]+)px\)/);
-  if (match) return parseFloat(match[1]) * 0.75 * scale;
-  return null;
-}
-
-function getTextStyle(style, scale) {
-  let colorObj = parseColor(style.color);
-
-  const bgClip = style.webkitBackgroundClip || style.backgroundClip;
-  if (colorObj.opacity === 0 && bgClip === 'text') {
-    const fallback = getGradientFallbackColor(style.backgroundImage);
-    if (fallback) colorObj = parseColor(fallback);
-  }
-
-  return {
-    color: colorObj.hex || '000000',
-    fontFace: style.fontFamily.split(',')[0].replace(/['"]/g, ''),
-    fontSize: parseFloat(style.fontSize) * 0.75 * scale,
-    bold: parseInt(style.fontWeight) >= 600,
-    italic: style.fontStyle === 'italic',
-    underline: style.textDecoration.includes('underline'),
-  };
-}
-
-/**
- * Determines if a given DOM node is primarily a text container.
- */
-function isTextContainer(node) {
-  const hasText = node.textContent.trim().length > 0;
-  if (!hasText) return false;
-
-  const children = Array.from(node.children);
-  if (children.length === 0) return true;
-
-  // Check if children are purely inline text formatting or visual shapes
-  const isSafeInline = (el) => {
-    const style = window.getComputedStyle(el);
-    const display = style.display;
-    
-    // If it's a standard inline element
-    const isInlineTag = ['SPAN', 'B', 'STRONG', 'EM', 'I', 'A', 'SMALL'].includes(el.tagName);
-    const isInlineDisplay = display.includes('inline');
-
-    if (!isInlineTag && !isInlineDisplay) return false;
-
-    // Check if element is a shape (visual object without text)
-    // If an element is empty but has a visible background/border, it's a shape (like a dot).
-    // We must return false so the parent isn't treated as a text-only container.
-    const hasContent = el.textContent.trim().length > 0;
-    const bgColor = parseColor(style.backgroundColor);
-    const hasVisibleBg = bgColor.hex && bgColor.opacity > 0;
-    const hasBorder = parseFloat(style.borderWidth) > 0 && parseColor(style.borderColor).opacity > 0;
-
-    if (!hasContent && (hasVisibleBg || hasBorder)) {
-      return false; 
-    }
-
-    return true;
-  };
-
-  return children.every(isSafeInline);
-}
-
-function getRotation(transformStr) {
-  if (!transformStr || transformStr === 'none') return 0;
-  const values = transformStr.split('(')[1].split(')')[0].split(',');
-  if (values.length < 4) return 0;
-  const a = parseFloat(values[0]);
-  const b = parseFloat(values[1]);
-  return Math.round(Math.atan2(b, a) * (180 / Math.PI));
-}
-
-function svgToPng(node) {
-  return new Promise((resolve) => {
-    const clone = node.cloneNode(true);
-    const rect = node.getBoundingClientRect();
-    const width = rect.width || 300;
-    const height = rect.height || 150;
-
-    function inlineStyles(source, target) {
-      const computed = window.getComputedStyle(source);
-      const properties = [
-        'fill', 'stroke', 'stroke-width', 'stroke-linecap',
-        'stroke-linejoin', 'opacity', 'font-family', 'font-size', 'font-weight',
-      ];
-
-      if (computed.fill === 'none') target.setAttribute('fill', 'none');
-      else if (computed.fill) target.style.fill = computed.fill;
-
-      if (computed.stroke === 'none') target.setAttribute('stroke', 'none');
-      else if (computed.stroke) target.style.stroke = computed.stroke;
-
-      properties.forEach((prop) => {
-        if (prop !== 'fill' && prop !== 'stroke') {
-          const val = computed[prop];
-          if (val && val !== 'auto') target.style[prop] = val;
-        }
-      });
-
-      for (let i = 0; i < source.children.length; i++) {
-        if (target.children[i]) inlineStyles(source.children[i], target.children[i]);
-      }
-    }
-
-    inlineStyles(node, clone);
-    clone.setAttribute('width', width);
-    clone.setAttribute('height', height);
-    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-
-    const xml = new XMLSerializer().serializeToString(clone);
-    const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
-    const img = new Image();
-    img.crossOrigin = 'Anonymous';
-    img.onload = () => {
-      const canvas = document.createElement('canvas');
-      const scale = 3;
-      canvas.width = width * scale;
-      canvas.height = height * scale;
-      const ctx = canvas.getContext('2d');
-      ctx.scale(scale, scale);
-      ctx.drawImage(img, 0, 0, width, height);
-      resolve(canvas.toDataURL('image/png'));
-    };
-    img.onerror = () => resolve(null);
-    img.src = svgUrl;
-  });
-}
-
-function getVisibleShadow(shadowStr, scale) {
-  if (!shadowStr || shadowStr === 'none') return null;
-  const shadows = shadowStr.split(/,(?![^()]*\))/);
-  for (let s of shadows) {
-    s = s.trim();
-    if (s.startsWith('rgba(0, 0, 0, 0)')) continue;
-    const match = s.match(
-      /(rgba?\([^)]+\)|#[0-9a-fA-F]+)\s+(-?[\d.]+)px\s+(-?[\d.]+)px\s+([\d.]+)px/
-    );
-    if (match) {
-      const colorStr = match[1];
-      const x = parseFloat(match[2]);
-      const y = parseFloat(match[3]);
-      const blur = parseFloat(match[4]);
-      const distance = Math.sqrt(x * x + y * y);
-      let angle = Math.atan2(y, x) * (180 / Math.PI);
-      if (angle < 0) angle += 360;
-      const colorObj = parseColor(colorStr);
-      return {
-        type: 'outer',
-        angle: angle,
-        blur: blur * 0.75 * scale,
-        offset: distance * 0.75 * scale,
-        color: colorObj.hex || '000000',
-        opacity: colorObj.opacity,
-      };
-    }
-  }
-  return null;
-}
-
-function generateGradientSVG(w, h, bgString, radius, border) {
-  try {
-    const match = bgString.match(/linear-gradient\((.*)\)/);
-    if (!match) return null;
-    const content = match[1];
-    const parts = content.split(/,(?![^()]*\))/).map((p) => p.trim());
-
-    let x1 = '0%', y1 = '0%', x2 = '0%', y2 = '100%';
-    let stopsStartIdx = 0;
-    if (parts[0].includes('to right')) {
-      x1 = '0%'; x2 = '100%'; y2 = '0%'; stopsStartIdx = 1;
-    } else if (parts[0].includes('to left')) {
-      x1 = '100%'; x2 = '0%'; y2 = '0%'; stopsStartIdx = 1;
-    } else if (parts[0].includes('to top')) {
-      y1 = '100%'; y2 = '0%'; stopsStartIdx = 1;
-    } else if (parts[0].includes('to bottom')) {
-      y1 = '0%'; y2 = '100%'; stopsStartIdx = 1;
-    }
-
-    let stopsXML = '';
-    const stopParts = parts.slice(stopsStartIdx);
-    stopParts.forEach((part, idx) => {
-      let color = part;
-      let offset = Math.round((idx / (stopParts.length - 1)) * 100) + '%';
-      const posMatch = part.match(/(.*?)\s+(\d+(\.\d+)?%?)$/);
-      if (posMatch) {
-        color = posMatch[1];
-        offset = posMatch[2];
-      }
-      let opacity = 1;
-      if (color.includes('rgba')) {
-        const rgba = color.match(/[\d.]+/g);
-        if (rgba && rgba.length > 3) {
-          opacity = rgba[3];
-          color = `rgb(${rgba[0]},${rgba[1]},${rgba[2]})`;
-        }
-      }
-      stopsXML += `<stop offset="${offset}" stop-color="${color}" stop-opacity="${opacity}"/>`;
-    });
-
-    let strokeAttr = '';
-    if (border) {
-      strokeAttr = `stroke="#${border.color}" stroke-width="${border.width}"`;
-    }
-
-    const svg = `
-          <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-              <defs><linearGradient id="grad" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}">${stopsXML}</linearGradient></defs>
-              <rect x="0" y="0" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="url(#grad)" ${strokeAttr} />
-          </svg>`;
-    return 'data:image/svg+xml;base64,' + btoa(svg);
-  } catch {
-    return null;
-  }
-}
-
-function generateBlurredSVG(w, h, color, radius, blurPx) {
-  const padding = blurPx * 3;
-  const fullW = w + padding * 2;
-  const fullH = h + padding * 2;
-  const x = padding;
-  const y = padding;
-  let shapeTag = '';
-  const isCircle = radius >= Math.min(w, h) / 2 - 1 && Math.abs(w - h) < 2;
-
-  if (isCircle) {
-    const cx = x + w / 2;
-    const cy = y + h / 2;
-    const rx = w / 2;
-    const ry = h / 2;
-    shapeTag = `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="#${color}" filter="url(#f1)" />`;
-  } else {
-    shapeTag = `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="#${color}" filter="url(#f1)" />`;
-  }
-
-  const svg = `
-  <svg xmlns="http://www.w3.org/2000/svg" width="${fullW}" height="${fullH}" viewBox="0 0 ${fullW} ${fullH}">
-    <defs>
-      <filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
-        <feGaussianBlur in="SourceGraphic" stdDeviation="${blurPx}" />
-      </filter>
-    </defs>
-    ${shapeTag}
-  </svg>`;
-
-  return {
-    data: 'data:image/svg+xml;base64,' + btoa(svg),
-    padding: padding,
-  };
+// src/utils.js
+
+/**
+ * Checks if any parent element has overflow: hidden which would clip this element
+ * @param {HTMLElement} node - The DOM node to check
+ * @returns {boolean} - True if a parent has overflow-hidden or overflow-clip
+ */
+function isClippedByParent(node) {
+  let parent = node.parentElement;
+  while (parent && parent !== document.body) {
+    const style = window.getComputedStyle(parent);
+    const overflow = style.overflow;
+    if (overflow === 'hidden' || overflow === 'clip') {
+      return true;
+    }
+    parent = parent.parentElement;
+  }
+  return false;
 }
 
-// src/image-processor.js
-
-async function getProcessedImage(src, targetW, targetH, radius) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.crossOrigin = 'Anonymous'; // Critical for canvas manipulation
-
-    img.onload = () => {
-      const canvas = document.createElement('canvas');
-      // Double resolution for better quality
-      const scale = 2;
-      canvas.width = targetW * scale;
-      canvas.height = targetH * scale;
-      const ctx = canvas.getContext('2d');
-      ctx.scale(scale, scale);
-
-      // Normalize radius input to an object { tl, tr, br, bl }
-      let r = { tl: 0, tr: 0, br: 0, bl: 0 };
-      if (typeof radius === 'number') {
-        r = { tl: radius, tr: radius, br: radius, bl: radius };
-      } else if (typeof radius === 'object' && radius !== null) {
-        r = { ...r, ...radius }; // Merge with defaults
-      }
-
-      // 1. Draw the Mask (Custom Shape with specific corners)
-      ctx.beginPath();
-      
-      // Border Radius Clamping Logic (CSS Spec)
-      // Prevents corners from overlapping if radii are too large for the container
-      const factor = Math.min(
-        (targetW / (r.tl + r.tr)) || Infinity,
-        (targetH / (r.tr + r.br)) || Infinity,
-        (targetW / (r.br + r.bl)) || Infinity,
-        (targetH / (r.bl + r.tl)) || Infinity
-      );
-
-      if (factor < 1) {
-        r.tl *= factor; r.tr *= factor; r.br *= factor; r.bl *= factor;
-      }
-
-      // Draw path: Top-Left -> Top-Right -> Bottom-Right -> Bottom-Left
-      ctx.moveTo(r.tl, 0);
-      ctx.lineTo(targetW - r.tr, 0);
-      ctx.arcTo(targetW, 0, targetW, r.tr, r.tr);
-      ctx.lineTo(targetW, targetH - r.br);
-      ctx.arcTo(targetW, targetH, targetW - r.br, targetH, r.br);
-      ctx.lineTo(r.bl, targetH);
-      ctx.arcTo(0, targetH, 0, targetH - r.bl, r.bl);
-      ctx.lineTo(0, r.tl);
-      ctx.arcTo(0, 0, r.tl, 0, r.tl);
-      
-      ctx.closePath();
-      ctx.fillStyle = '#000';
-      ctx.fill();
-
-      // 2. Composite Source-In (Crops the next image draw to the mask)
-      ctx.globalCompositeOperation = 'source-in';
-
-      // 3. Draw Image (Object Cover Logic)
-      const wRatio = targetW / img.width;
-      const hRatio = targetH / img.height;
-      const maxRatio = Math.max(wRatio, hRatio);
-      const renderW = img.width * maxRatio;
-      const renderH = img.height * maxRatio;
-      const renderX = (targetW - renderW) / 2;
-      const renderY = (targetH - renderH) / 2;
-
-      ctx.drawImage(img, renderX, renderY, renderW, renderH);
-
-      resolve(canvas.toDataURL('image/png'));
-    };
-
-    img.onerror = () => resolve(null);
-    img.src = src;
-  });
+// Helper to save gradient text
+function getGradientFallbackColor(bgImage) {
+  if (!bgImage) return null;
+  const hexMatch = bgImage.match(/#(?:[0-9a-fA-F]{3}){1,2}/);
+  if (hexMatch) return hexMatch[0];
+  const rgbMatch = bgImage.match(/rgba?\(.*?\)/);
+  if (rgbMatch) return rgbMatch[0];
+  return null;
 }
 
-// src/index.js
-
-// Normalize import
-const PptxGenJS = PptxGenJSImport?.default ?? PptxGenJSImport;
-
-const PPI = 96;
-const PX_TO_INCH = 1 / PPI;
-
-/**
- * Main export function. Accepts single element or an array.
- * @param {HTMLElement | string | Array<HTMLElement | string>} target - The root element(s) to convert.
- * @param {Object} options - { fileName: string }
- */
-async function exportToPptx(target, options = {}) {
-  const resolvePptxConstructor = (pkg) => {
-    if (!pkg) return null;
-    if (typeof pkg === 'function') return pkg;
-    if (pkg && typeof pkg.default === 'function') return pkg.default;
-    if (pkg && typeof pkg.PptxGenJS === 'function') return pkg.PptxGenJS;
-    if (pkg && pkg.PptxGenJS && typeof pkg.PptxGenJS.default === 'function')
-      return pkg.PptxGenJS.default;
-    return null;
-  };
-
-  const PptxConstructor = resolvePptxConstructor(PptxGenJS);
-  if (!PptxConstructor) throw new Error('PptxGenJS constructor not found.');
-  const pptx = new PptxConstructor();
-  pptx.layout = 'LAYOUT_16x9';
-
-  const elements = Array.isArray(target) ? target : [target];
-
-  for (const el of elements) {
-    const root = typeof el === 'string' ? document.querySelector(el) : el;
-    if (!root) {
-      console.warn('Element not found, skipping slide:', el);
-      continue;
-    }
-    const slide = pptx.addSlide();
-    await processSlide(root, slide, pptx);
-  }
-
-  const fileName = options.fileName || 'export.pptx';
-  pptx.writeFile({ fileName });
-}
-
-/**
- * Worker function to process a single DOM element into a single PPTX slide.
- * @param {HTMLElement} root - The root element for this slide.
- * @param {PptxGenJS.Slide} slide - The PPTX slide object to add content to.
- * @param {PptxGenJS} pptx - The main PPTX instance.
- */
-async function processSlide(root, slide, pptx) {
-  const rootRect = root.getBoundingClientRect();
-  const PPTX_WIDTH_IN = 10;
-  const PPTX_HEIGHT_IN = 5.625;
-
-  const contentWidthIn = rootRect.width * PX_TO_INCH;
-  const contentHeightIn = rootRect.height * PX_TO_INCH;
-  const scale = Math.min(PPTX_WIDTH_IN / contentWidthIn, PPTX_HEIGHT_IN / contentHeightIn);
-
-  const layoutConfig = {
-    rootX: rootRect.x,
-    rootY: rootRect.y,
-    scale: scale,
-    offX: (PPTX_WIDTH_IN - contentWidthIn * scale) / 2,
-    offY: (PPTX_HEIGHT_IN - contentHeightIn * scale) / 2,
-  };
-
-  const renderQueue = [];
-  let domOrderCounter = 0;
-
-  async function collect(node) {
-    const order = domOrderCounter++;
-    const result = await createRenderItem(node, { ...layoutConfig, root }, order, pptx);
-    if (result) {
-      if (result.items) renderQueue.push(...result.items);
-      if (result.stopRecursion) return;
-    }
-    for (const child of node.children) await collect(child);
-  }
-
-  await collect(root);
-
-  renderQueue.sort((a, b) => {
-    if (a.zIndex !== b.zIndex) return a.zIndex - b.zIndex;
-    return a.domOrder - b.domOrder;
-  });
-
-  for (const item of renderQueue) {
-    if (item.type === 'shape') slide.addShape(item.shapeType, item.options);
-    if (item.type === 'image') slide.addImage(item.options);
-    if (item.type === 'text') slide.addText(item.textParts, item.options);
-  }
-}
-
-async function elementToCanvasImage(node, widthPx, heightPx, root) {
-  return new Promise((resolve) => {
-    const width = Math.ceil(widthPx);
-    const height = Math.ceil(heightPx);
-
-    if (width <= 0 || height <= 0) {
-      resolve(null);
-      return;
-    }
-
-    const style = window.getComputedStyle(node);
-
-    html2canvas(root, {
-      width: root.scrollWidth,
-      height: root.scrollHeight,
-      useCORS: true,
-      allowTaint: true,
-      backgroundColor: null,
-    })
-      .then((canvas) => {
-        const rootCanvas = canvas;
-        const nodeRect = node.getBoundingClientRect();
-        const rootRect = root.getBoundingClientRect();
-        const sourceX = nodeRect.left - rootRect.left;
-        const sourceY = nodeRect.top - rootRect.top;
-
-        const destCanvas = document.createElement('canvas');
-        destCanvas.width = width;
-        destCanvas.height = height;
-        const ctx = destCanvas.getContext('2d');
-
-        ctx.drawImage(rootCanvas, sourceX, sourceY, width, height, 0, 0, width, height);
-
-        // Parse radii
-        let tl = parseFloat(style.borderTopLeftRadius) || 0;
-        let tr = parseFloat(style.borderTopRightRadius) || 0;
-        let br = parseFloat(style.borderBottomRightRadius) || 0;
-        let bl = parseFloat(style.borderBottomLeftRadius) || 0;
-
-        const f = Math.min(
-          width / (tl + tr) || Infinity,
-          height / (tr + br) || Infinity,
-          width / (br + bl) || Infinity,
-          height / (bl + tl) || Infinity
-        );
-
-        if (f < 1) {
-          tl *= f;
-          tr *= f;
-          br *= f;
-          bl *= f;
-        }
-
-        ctx.globalCompositeOperation = 'destination-in';
-        ctx.beginPath();
-        ctx.moveTo(tl, 0);
-        ctx.lineTo(width - tr, 0);
-        ctx.arcTo(width, 0, width, tr, tr);
-        ctx.lineTo(width, height - br);
-        ctx.arcTo(width, height, width - br, height, br);
-        ctx.lineTo(bl, height);
-        ctx.arcTo(0, height, 0, height - bl, bl);
-        ctx.lineTo(0, tl);
-        ctx.arcTo(0, 0, tl, 0, tl);
-        ctx.closePath();
-        ctx.fill();
-
-        resolve(destCanvas.toDataURL('image/png'));
-      })
-      .catch(() => resolve(null));
-  });
-}
-
-async function createRenderItem(node, config, domOrder, pptx) {
-  if (node.nodeType !== 1) return null;
-  const style = window.getComputedStyle(node);
-  if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0')
-    return null;
-
-  const rect = node.getBoundingClientRect();
-  if (rect.width < 0.5 || rect.height < 0.5) return null;
-
-  const zIndex = style.zIndex !== 'auto' ? parseInt(style.zIndex) : 0;
-  const rotation = getRotation(style.transform);
-  const elementOpacity = parseFloat(style.opacity);
-
-  const widthPx = node.offsetWidth || rect.width;
-  const heightPx = node.offsetHeight || rect.height;
-  const unrotatedW = widthPx * PX_TO_INCH * config.scale;
-  const unrotatedH = heightPx * PX_TO_INCH * config.scale;
-  const centerX = rect.left + rect.width / 2;
-  const centerY = rect.top + rect.height / 2;
-
-  let x = config.offX + (centerX - config.rootX) * PX_TO_INCH * config.scale - unrotatedW / 2;
-  let y = config.offY + (centerY - config.rootY) * PX_TO_INCH * config.scale - unrotatedH / 2;
-  let w = unrotatedW;
-  let h = unrotatedH;
-
-  const items = [];
-
-  if (node.nodeName.toUpperCase() === 'SVG') {
-    const pngData = await svgToPng(node);
-    if (pngData)
-      items.push({
-        type: 'image',
-        zIndex,
-        domOrder,
-        options: { data: pngData, x, y, w, h, rotate: rotation },
-      });
-    return { items, stopRecursion: true };
-  }
-
-  // --- UPDATED IMG BLOCK START ---
-  if (node.tagName === 'IMG') {
-    // Extract individual corner radii
-    let radii = {
-      tl: parseFloat(style.borderTopLeftRadius) || 0,
-      tr: parseFloat(style.borderTopRightRadius) || 0,
-      br: parseFloat(style.borderBottomRightRadius) || 0,
-      bl: parseFloat(style.borderBottomLeftRadius) || 0,
-    };
-
-    const hasAnyRadius = radii.tl > 0 || radii.tr > 0 || radii.br > 0 || radii.bl > 0;
-
-    // Fallback: Check parent if image has no specific radius but parent clips it
-    if (!hasAnyRadius) {
-      const parent = node.parentElement;
-      const parentStyle = window.getComputedStyle(parent);
-      if (parentStyle.overflow !== 'visible') {
-        const pRadii = {
-          tl: parseFloat(parentStyle.borderTopLeftRadius) || 0,
-          tr: parseFloat(parentStyle.borderTopRightRadius) || 0,
-          br: parseFloat(parentStyle.borderBottomRightRadius) || 0,
-          bl: parseFloat(parentStyle.borderBottomLeftRadius) || 0,
-        };
-        // Simple heuristic: If image takes up full size of parent, inherit radii.
-        // For complex grids (like slide-1), this blindly applies parent radius.
-        // In a perfect world, we'd calculate intersection, but for now we apply parent radius
-        // if the image is close to the parent's size, effectively masking it.
-        const pRect = parent.getBoundingClientRect();
-        if (Math.abs(pRect.width - rect.width) < 5 && Math.abs(pRect.height - rect.height) < 5) {
-          radii = pRadii;
-        }
-      }
-    }
-
-    const processed = await getProcessedImage(node.src, widthPx, heightPx, radii);
-    if (processed)
-      items.push({
-        type: 'image',
-        zIndex,
-        domOrder,
-        options: { data: processed, x, y, w, h, rotate: rotation },
-      });
-    return { items, stopRecursion: true };
-  }
-  // --- UPDATED IMG BLOCK END ---
-
-  // Radii processing for Divs/Shapes
-  const borderRadiusValue = parseFloat(style.borderRadius) || 0;
-  const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;
-  const borderBottomRightRadius = parseFloat(style.borderBottomRightRadius) || 0;
-  const borderTopLeftRadius = parseFloat(style.borderTopLeftRadius) || 0;
-  const borderTopRightRadius = parseFloat(style.borderTopRightRadius) || 0;
-
-  const hasPartialBorderRadius =
-    (borderBottomLeftRadius > 0 && borderBottomLeftRadius !== borderRadiusValue) ||
-    (borderBottomRightRadius > 0 && borderBottomRightRadius !== borderRadiusValue) ||
-    (borderTopLeftRadius > 0 && borderTopLeftRadius !== borderRadiusValue) ||
-    (borderTopRightRadius > 0 && borderTopRightRadius !== borderRadiusValue) ||
-    (borderRadiusValue === 0 &&
-      (borderBottomLeftRadius ||
-        borderBottomRightRadius ||
-        borderTopLeftRadius ||
-        borderTopRightRadius));
-
-  // Allow clipped elements to be rendered via canvas
-  if (hasPartialBorderRadius && isClippedByParent(node)) {
-    const marginLeft = parseFloat(style.marginLeft) || 0;
-    const marginTop = parseFloat(style.marginTop) || 0;
-    x += marginLeft * PX_TO_INCH * config.scale;
-    y += marginTop * PX_TO_INCH * config.scale;
-
-    const canvasImageData = await elementToCanvasImage(node, widthPx, heightPx, config.root);
-    if (canvasImageData) {
-      items.push({
-        type: 'image',
-        zIndex,
-        domOrder,
-        options: { data: canvasImageData, x, y, w, h, rotate: rotation },
-      });
-      return { items, stopRecursion: true };
-    }
-  }
-
-  const bgColorObj = parseColor(style.backgroundColor);
-  const bgClip = style.webkitBackgroundClip || style.backgroundClip;
-  const isBgClipText = bgClip === 'text';
-  const hasGradient =
-    !isBgClipText && style.backgroundImage && style.backgroundImage.includes('linear-gradient');
-
-  const borderColorObj = parseColor(style.borderColor);
-  const borderWidth = parseFloat(style.borderWidth);
-  const hasBorder = borderWidth > 0 && borderColorObj.hex;
-
-  const borderInfo = getBorderInfo(style, config.scale);
-  const hasUniformBorder = borderInfo.type === 'uniform';
-  const hasCompositeBorder = borderInfo.type === 'composite';
-
-  const shadowStr = style.boxShadow;
-  const hasShadow = shadowStr && shadowStr !== 'none';
-  const softEdge = getSoftEdges(style.filter, config.scale);
-
-  let isImageWrapper = false;
-  const imgChild = Array.from(node.children).find((c) => c.tagName === 'IMG');
-  if (imgChild) {
-    const childW = imgChild.offsetWidth || imgChild.getBoundingClientRect().width;
-    const childH = imgChild.offsetHeight || imgChild.getBoundingClientRect().height;
-    if (childW >= widthPx - 2 && childH >= heightPx - 2) isImageWrapper = true;
-  }
-
-  let textPayload = null;
-  const isText = isTextContainer(node);
-
-  if (isText) {
-    const textParts = [];
-    const isList = style.display === 'list-item';
-    if (isList) {
-      const fontSizePt = parseFloat(style.fontSize) * 0.75 * config.scale;
-      const bulletShift = (parseFloat(style.fontSize) || 16) * PX_TO_INCH * config.scale * 1.5;
-      x -= bulletShift;
-      w += bulletShift;
-      textParts.push({
-        text: '• ',
-        options: {
-          color: parseColor(style.color).hex || '000000',
-          fontSize: fontSizePt,
-        },
-      });
-    }
-
-    node.childNodes.forEach((child, index) => {
-      let textVal = child.nodeType === 3 ? child.nodeValue : child.textContent;
-      let nodeStyle = child.nodeType === 1 ? window.getComputedStyle(child) : style;
-      textVal = textVal.replace(/[\n\r\t]+/g, ' ').replace(/\s{2,}/g, ' ');
-      if (index === 0 && !isList) textVal = textVal.trimStart();
-      else if (index === 0) textVal = textVal.trimStart();
-      if (index === node.childNodes.length - 1) textVal = textVal.trimEnd();
-      if (nodeStyle.textTransform === 'uppercase') textVal = textVal.toUpperCase();
-      if (nodeStyle.textTransform === 'lowercase') textVal = textVal.toLowerCase();
-
-      if (textVal.length > 0) {
-        textParts.push({
-          text: textVal,
-          options: getTextStyle(nodeStyle, config.scale),
-        });
-      }
-    });
-
-    if (textParts.length > 0) {
-      let align = style.textAlign || 'left';
-      if (align === 'start') align = 'left';
-      if (align === 'end') align = 'right';
-      let valign = 'top';
-      if (style.alignItems === 'center') valign = 'middle';
-      if (style.justifyContent === 'center' && style.display.includes('flex')) align = 'center';
-
-      const pt = parseFloat(style.paddingTop) || 0;
-      const pb = parseFloat(style.paddingBottom) || 0;
-      if (Math.abs(pt - pb) < 2 && bgColorObj.hex) valign = 'middle';
-
-      let padding = getPadding(style, config.scale);
-      if (align === 'center' && valign === 'middle') padding = [0, 0, 0, 0];
-
-      textPayload = { text: textParts, align, valign, inset: padding };
-    }
-  }
-
-  if (hasGradient || (softEdge && bgColorObj.hex && !isImageWrapper)) {
-    let bgData = null;
-    let padIn = 0;
-    if (softEdge) {
-      const svgInfo = generateBlurredSVG(
-        widthPx,
-        heightPx,
-        bgColorObj.hex,
-        borderRadiusValue,
-        softEdge
-      );
-      bgData = svgInfo.data;
-      padIn = svgInfo.padding * PX_TO_INCH * config.scale;
-    } else {
-      bgData = generateGradientSVG(
-        widthPx,
-        heightPx,
-        style.backgroundImage,
-        borderRadiusValue,
-        hasBorder ? { color: borderColorObj.hex, width: borderWidth } : null
-      );
-    }
-
-    if (bgData) {
-      items.push({
-        type: 'image',
-        zIndex,
-        domOrder,
-        options: {
-          data: bgData,
-          x: x - padIn,
-          y: y - padIn,
-          w: w + padIn * 2,
-          h: h + padIn * 2,
-          rotate: rotation,
-        },
-      });
-    }
-
-    if (textPayload) {
-      items.push({
-        type: 'text',
-        zIndex: zIndex + 1,
-        domOrder,
-        textParts: textPayload.text,
-        options: {
-          x,
-          y,
-          w,
-          h,
-          align: textPayload.align,
-          valign: textPayload.valign,
-          inset: textPayload.inset,
-          rotate: rotation,
-          margin: 0,
-          wrap: true,
-          autoFit: false,
-        },
-      });
-    }
-    if (hasCompositeBorder) {
-      // Add border shapes after the main background
-      const borderItems = createCompositeBorderItems(
-        borderInfo.sides,
-        x,
-        y,
-        w,
-        h,
-        config.scale,
-        zIndex,
-        domOrder
-      );
-      items.push(...borderItems);
-    }
-  } else if (
-    (bgColorObj.hex && !isImageWrapper) ||
-    hasUniformBorder ||
-    hasCompositeBorder ||
-    hasShadow ||
-    textPayload
-  ) {
-    const finalAlpha = elementOpacity * bgColorObj.opacity;
-    const transparency = (1 - finalAlpha) * 100;
-    const useSolidFill = bgColorObj.hex && !isImageWrapper;
-
-    if (hasPartialBorderRadius && useSolidFill && !textPayload) {
-      const shapeSvg = generateCustomShapeSVG(
-        widthPx,
-        heightPx,
-        bgColorObj.hex,
-        bgColorObj.opacity,
-        {
-          tl: parseFloat(style.borderTopLeftRadius) || 0,
-          tr: parseFloat(style.borderTopRightRadius) || 0,
-          br: parseFloat(style.borderBottomRightRadius) || 0,
-          bl: parseFloat(style.borderBottomLeftRadius) || 0,
-        }
-      );
-
-      items.push({
-        type: 'image',
-        zIndex,
-        domOrder,
-        options: {
-          data: shapeSvg,
-          x,
-          y,
-          w,
-          h,
-          rotate: rotation,
-        },
-      });
-    } else {
-      const shapeOpts = {
-        x,
-        y,
-        w,
-        h,
-        rotate: rotation,
-        fill: useSolidFill
-          ? { color: bgColorObj.hex, transparency: transparency }
-          : { type: 'none' },
-        line: hasUniformBorder ? borderInfo.options : null,
-      };
-
-      if (hasShadow) {
-        shapeOpts.shadow = getVisibleShadow(shadowStr, config.scale);
-      }
-
-      const borderRadius = parseFloat(style.borderRadius) || 0;
-      const aspectRatio = Math.max(widthPx, heightPx) / Math.min(widthPx, heightPx);
-      const isCircle = aspectRatio < 1.1 && borderRadius >= Math.min(widthPx, heightPx) / 2 - 1;
-
-      let shapeType = pptx.ShapeType.rect;
-      if (isCircle) shapeType = pptx.ShapeType.ellipse;
-      else if (borderRadius > 0) {
-        shapeType = pptx.ShapeType.roundRect;
-        shapeOpts.rectRadius = Math.min(0.5, borderRadius / Math.min(widthPx, heightPx));
-      }
-
-      if (textPayload) {
-        const textOptions = {
-          shape: shapeType,
-          ...shapeOpts,
-          align: textPayload.align,
-          valign: textPayload.valign,
-          inset: textPayload.inset,
-          margin: 0,
-          wrap: true,
-          autoFit: false,
-        };
-        items.push({
-          type: 'text',
-          zIndex,
-          domOrder,
-          textParts: textPayload.text,
-          options: textOptions,
-        });
-      } else if (!hasPartialBorderRadius) {
-        items.push({
-          type: 'shape',
-          zIndex,
-          domOrder,
-          shapeType,
-          options: shapeOpts,
-        });
-      }
-    }
-
-    if (hasCompositeBorder) {
-      const borderSvgData = generateCompositeBorderSVG(
-        widthPx,
-        heightPx,
-        borderRadiusValue,
-        borderInfo.sides
-      );
-      if (borderSvgData) {
-        items.push({
-          type: 'image',
-          zIndex: zIndex + 1,
-          domOrder,
-          options: { data: borderSvgData, x, y, w, h, rotate: rotation },
-        });
-      }
-    }
-  }
-
-  return { items, stopRecursion: !!textPayload };
-}
-
-/**
- * Helper function to create individual border shapes
- */
-function createCompositeBorderItems(sides, x, y, w, h, scale, zIndex, domOrder) {
-  const items = [];
-  const pxToInch = 1 / 96;
-
-  // TOP BORDER
-  if (sides.top.width > 0) {
-    items.push({
-      type: 'shape',
-      zIndex: zIndex + 1,
-      domOrder,
-      shapeType: 'rect',
-      options: {
-        x: x,
-        y: y,
-        w: w,
-        h: sides.top.width * pxToInch * scale,
-        fill: { color: sides.top.color },
-      },
-    });
-  }
-  // RIGHT BORDER
-  if (sides.right.width > 0) {
-    items.push({
-      type: 'shape',
-      zIndex: zIndex + 1,
-      domOrder,
-      shapeType: 'rect',
-      options: {
-        x: x + w - sides.right.width * pxToInch * scale,
-        y: y,
-        w: sides.right.width * pxToInch * scale,
-        h: h,
-        fill: { color: sides.right.color },
-      },
-    });
-  }
-  // BOTTOM BORDER
-  if (sides.bottom.width > 0) {
-    items.push({
-      type: 'shape',
-      zIndex: zIndex + 1,
-      domOrder,
-      shapeType: 'rect',
-      options: {
-        x: x,
-        y: y + h - sides.bottom.width * pxToInch * scale,
-        w: w,
-        h: sides.bottom.width * pxToInch * scale,
-        fill: { color: sides.bottom.color },
-      },
-    });
-  }
-  // LEFT BORDER
-  if (sides.left.width > 0) {
-    items.push({
-      type: 'shape',
-      zIndex: zIndex + 1,
-      domOrder,
-      shapeType: 'rect',
-      options: {
-        x: x,
-        y: y,
-        w: sides.left.width * pxToInch * scale,
-        h: h,
-        fill: { color: sides.left.color },
-      },
-    });
-  }
-
-  return items;
+function mapDashType(style) {
+  if (style === 'dashed') return 'dash';
+  if (style === 'dotted') return 'dot';
+  return 'solid';
+}
+
+/**
+ * Analyzes computed border styles and determines the rendering strategy.
+ */
+function getBorderInfo(style, scale) {
+  const top = {
+    width: parseFloat(style.borderTopWidth) || 0,
+    style: style.borderTopStyle,
+    color: parseColor(style.borderTopColor).hex,
+  };
+  const right = {
+    width: parseFloat(style.borderRightWidth) || 0,
+    style: style.borderRightStyle,
+    color: parseColor(style.borderRightColor).hex,
+  };
+  const bottom = {
+    width: parseFloat(style.borderBottomWidth) || 0,
+    style: style.borderBottomStyle,
+    color: parseColor(style.borderBottomColor).hex,
+  };
+  const left = {
+    width: parseFloat(style.borderLeftWidth) || 0,
+    style: style.borderLeftStyle,
+    color: parseColor(style.borderLeftColor).hex,
+  };
+
+  const hasAnyBorder = top.width > 0 || right.width > 0 || bottom.width > 0 || left.width > 0;
+  if (!hasAnyBorder) return { type: 'none' };
+
+  // Check if all sides are uniform
+  const isUniform =
+    top.width === right.width &&
+    top.width === bottom.width &&
+    top.width === left.width &&
+    top.style === right.style &&
+    top.style === bottom.style &&
+    top.style === left.style &&
+    top.color === right.color &&
+    top.color === bottom.color &&
+    top.color === left.color;
+
+  if (isUniform) {
+    return {
+      type: 'uniform',
+      options: {
+        width: top.width * 0.75 * scale,
+        color: top.color,
+        transparency: (1 - parseColor(style.borderTopColor).opacity) * 100,
+        dashType: mapDashType(top.style),
+      },
+    };
+  } else {
+    return {
+      type: 'composite',
+      sides: { top, right, bottom, left },
+    };
+  }
+}
+
+/**
+ * Generates an SVG image for composite borders that respects border-radius.
+ */
+function generateCompositeBorderSVG(w, h, radius, sides) {
+  radius = radius / 2; // Adjust for SVG rendering
+  const clipId = 'clip_' + Math.random().toString(36).substr(2, 9);
+  let borderRects = '';
+
+  if (sides.top.width > 0 && sides.top.color) {
+    borderRects += `<rect x="0" y="0" width="${w}" height="${sides.top.width}" fill="#${sides.top.color}" />`;
+  }
+  if (sides.right.width > 0 && sides.right.color) {
+    borderRects += `<rect x="${w - sides.right.width}" y="0" width="${sides.right.width}" height="${h}" fill="#${sides.right.color}" />`;
+  }
+  if (sides.bottom.width > 0 && sides.bottom.color) {
+    borderRects += `<rect x="0" y="${h - sides.bottom.width}" width="${w}" height="${sides.bottom.width}" fill="#${sides.bottom.color}" />`;
+  }
+  if (sides.left.width > 0 && sides.left.color) {
+    borderRects += `<rect x="0" y="0" width="${sides.left.width}" height="${h}" fill="#${sides.left.color}" />`;
+  }
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+        <defs>
+            <clipPath id="${clipId}">
+                <rect x="0" y="0" width="${w}" height="${h}" rx="${radius}" ry="${radius}" />
+            </clipPath>
+        </defs>
+        <g clip-path="url(#${clipId})">
+            ${borderRects}
+        </g>
+    </svg>`;
+
+  return 'data:image/svg+xml;base64,' + btoa(svg);
+}
+
+/**
+ * Generates an SVG data URL for a solid shape with non-uniform corner radii.
+ */
+function generateCustomShapeSVG(w, h, color, opacity, radii) {
+  let { tl, tr, br, bl } = radii;
+
+  // Clamp radii using CSS spec logic (avoid overlap)
+  const factor = Math.min(
+    w / (tl + tr) || Infinity,
+    h / (tr + br) || Infinity,
+    w / (br + bl) || Infinity,
+    h / (bl + tl) || Infinity
+  );
+
+  if (factor < 1) {
+    tl *= factor;
+    tr *= factor;
+    br *= factor;
+    bl *= factor;
+  }
+
+  const path = `
+    M ${tl} 0
+    L ${w - tr} 0
+    A ${tr} ${tr} 0 0 1 ${w} ${tr}
+    L ${w} ${h - br}
+    A ${br} ${br} 0 0 1 ${w - br} ${h}
+    L ${bl} ${h}
+    A ${bl} ${bl} 0 0 1 0 ${h - bl}
+    L 0 ${tl}
+    A ${tl} ${tl} 0 0 1 ${tl} 0
+    Z
+  `;
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+      <path d="${path}" fill="#${color}" fill-opacity="${opacity}" />
+    </svg>`;
+
+  return 'data:image/svg+xml;base64,' + btoa(svg);
+}
+
+function parseColor(str) {
+  if (!str || str === 'transparent' || str.startsWith('rgba(0, 0, 0, 0)')) {
+    return { hex: null, opacity: 0 };
+  }
+  if (str.startsWith('#')) {
+    let hex = str.slice(1);
+    if (hex.length === 3)
+      hex = hex
+        .split('')
+        .map((c) => c + c)
+        .join('');
+    return { hex: hex.toUpperCase(), opacity: 1 };
+  }
+  const match = str.match(/[\d.]+/g);
+  if (match && match.length >= 3) {
+    const r = parseInt(match[0]);
+    const g = parseInt(match[1]);
+    const b = parseInt(match[2]);
+    const a = match.length > 3 ? parseFloat(match[3]) : 1;
+    const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+    return { hex, opacity: a };
+  }
+  return { hex: null, opacity: 0 };
+}
+
+function getPadding(style, scale) {
+  const pxToInch = 1 / 96;
+  return [
+    (parseFloat(style.paddingTop) || 0) * pxToInch * scale,
+    (parseFloat(style.paddingRight) || 0) * pxToInch * scale,
+    (parseFloat(style.paddingBottom) || 0) * pxToInch * scale,
+    (parseFloat(style.paddingLeft) || 0) * pxToInch * scale,
+  ];
+}
+
+function getSoftEdges(filterStr, scale) {
+  if (!filterStr || filterStr === 'none') return null;
+  const match = filterStr.match(/blur\(([\d.]+)px\)/);
+  if (match) return parseFloat(match[1]) * 0.75 * scale;
+  return null;
+}
+
+function getTextStyle(style, scale) {
+  let colorObj = parseColor(style.color);
+
+  const bgClip = style.webkitBackgroundClip || style.backgroundClip;
+  if (colorObj.opacity === 0 && bgClip === 'text') {
+    const fallback = getGradientFallbackColor(style.backgroundImage);
+    if (fallback) colorObj = parseColor(fallback);
+  }
+
+  return {
+    color: colorObj.hex || '000000',
+    fontFace: style.fontFamily.split(',')[0].replace(/['"]/g, ''),
+    fontSize: parseFloat(style.fontSize) * 0.75 * scale,
+    bold: parseInt(style.fontWeight) >= 600,
+    italic: style.fontStyle === 'italic',
+    underline: style.textDecoration.includes('underline'),
+  };
+}
+
+/**
+ * Determines if a given DOM node is primarily a text container.
+ */
+function isTextContainer(node) {
+  const hasText = node.textContent.trim().length > 0;
+  if (!hasText) return false;
+
+  const children = Array.from(node.children);
+  if (children.length === 0) return true;
+
+  // Check if children are purely inline text formatting or visual shapes
+  const isSafeInline = (el) => {
+    const style = window.getComputedStyle(el);
+    const display = style.display;
+
+    // If it's a standard inline element
+    const isInlineTag = ['SPAN', 'B', 'STRONG', 'EM', 'I', 'A', 'SMALL'].includes(el.tagName);
+    const isInlineDisplay = display.includes('inline');
+
+    if (!isInlineTag && !isInlineDisplay) return false;
+
+    // Check if element is a shape (visual object without text)
+    // If an element is empty but has a visible background/border, it's a shape (like a dot).
+    // We must return false so the parent isn't treated as a text-only container.
+    const hasContent = el.textContent.trim().length > 0;
+    const bgColor = parseColor(style.backgroundColor);
+    const hasVisibleBg = bgColor.hex && bgColor.opacity > 0;
+    const hasBorder =
+      parseFloat(style.borderWidth) > 0 && parseColor(style.borderColor).opacity > 0;
+
+    if (!hasContent && (hasVisibleBg || hasBorder)) {
+      return false;
+    }
+
+    return true;
+  };
+
+  return children.every(isSafeInline);
+}
+
+function getRotation(transformStr) {
+  if (!transformStr || transformStr === 'none') return 0;
+  const values = transformStr.split('(')[1].split(')')[0].split(',');
+  if (values.length < 4) return 0;
+  const a = parseFloat(values[0]);
+  const b = parseFloat(values[1]);
+  return Math.round(Math.atan2(b, a) * (180 / Math.PI));
+}
+
+function svgToPng(node) {
+  return new Promise((resolve) => {
+    const clone = node.cloneNode(true);
+    const rect = node.getBoundingClientRect();
+    const width = rect.width || 300;
+    const height = rect.height || 150;
+
+    function inlineStyles(source, target) {
+      const computed = window.getComputedStyle(source);
+      const properties = [
+        'fill',
+        'stroke',
+        'stroke-width',
+        'stroke-linecap',
+        'stroke-linejoin',
+        'opacity',
+        'font-family',
+        'font-size',
+        'font-weight',
+      ];
+
+      if (computed.fill === 'none') target.setAttribute('fill', 'none');
+      else if (computed.fill) target.style.fill = computed.fill;
+
+      if (computed.stroke === 'none') target.setAttribute('stroke', 'none');
+      else if (computed.stroke) target.style.stroke = computed.stroke;
+
+      properties.forEach((prop) => {
+        if (prop !== 'fill' && prop !== 'stroke') {
+          const val = computed[prop];
+          if (val && val !== 'auto') target.style[prop] = val;
+        }
+      });
+
+      for (let i = 0; i < source.children.length; i++) {
+        if (target.children[i]) inlineStyles(source.children[i], target.children[i]);
+      }
+    }
+
+    inlineStyles(node, clone);
+    clone.setAttribute('width', width);
+    clone.setAttribute('height', height);
+    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+    const xml = new XMLSerializer().serializeToString(clone);
+    const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const scale = 3;
+      canvas.width = width * scale;
+      canvas.height = height * scale;
+      const ctx = canvas.getContext('2d');
+      ctx.scale(scale, scale);
+      ctx.drawImage(img, 0, 0, width, height);
+      resolve(canvas.toDataURL('image/png'));
+    };
+    img.onerror = () => resolve(null);
+    img.src = svgUrl;
+  });
+}
+
+function getVisibleShadow(shadowStr, scale) {
+  if (!shadowStr || shadowStr === 'none') return null;
+  const shadows = shadowStr.split(/,(?![^()]*\))/);
+  for (let s of shadows) {
+    s = s.trim();
+    if (s.startsWith('rgba(0, 0, 0, 0)')) continue;
+    const match = s.match(
+      /(rgba?\([^)]+\)|#[0-9a-fA-F]+)\s+(-?[\d.]+)px\s+(-?[\d.]+)px\s+([\d.]+)px/
+    );
+    if (match) {
+      const colorStr = match[1];
+      const x = parseFloat(match[2]);
+      const y = parseFloat(match[3]);
+      const blur = parseFloat(match[4]);
+      const distance = Math.sqrt(x * x + y * y);
+      let angle = Math.atan2(y, x) * (180 / Math.PI);
+      if (angle < 0) angle += 360;
+      const colorObj = parseColor(colorStr);
+      return {
+        type: 'outer',
+        angle: angle,
+        blur: blur * 0.75 * scale,
+        offset: distance * 0.75 * scale,
+        color: colorObj.hex || '000000',
+        opacity: colorObj.opacity,
+      };
+    }
+  }
+  return null;
+}
+
+function generateGradientSVG(w, h, bgString, radius, border) {
+  try {
+    const match = bgString.match(/linear-gradient\((.*)\)/);
+    if (!match) return null;
+    const content = match[1];
+    const parts = content.split(/,(?![^()]*\))/).map((p) => p.trim());
+
+    let x1 = '0%',
+      y1 = '0%',
+      x2 = '0%',
+      y2 = '100%';
+    let stopsStartIdx = 0;
+    if (parts[0].includes('to right')) {
+      x1 = '0%';
+      x2 = '100%';
+      y2 = '0%';
+      stopsStartIdx = 1;
+    } else if (parts[0].includes('to left')) {
+      x1 = '100%';
+      x2 = '0%';
+      y2 = '0%';
+      stopsStartIdx = 1;
+    } else if (parts[0].includes('to top')) {
+      y1 = '100%';
+      y2 = '0%';
+      stopsStartIdx = 1;
+    } else if (parts[0].includes('to bottom')) {
+      y1 = '0%';
+      y2 = '100%';
+      stopsStartIdx = 1;
+    }
+
+    let stopsXML = '';
+    const stopParts = parts.slice(stopsStartIdx);
+    stopParts.forEach((part, idx) => {
+      let color = part;
+      let offset = Math.round((idx / (stopParts.length - 1)) * 100) + '%';
+      const posMatch = part.match(/(.*?)\s+(\d+(\.\d+)?%?)$/);
+      if (posMatch) {
+        color = posMatch[1];
+        offset = posMatch[2];
+      }
+      let opacity = 1;
+      if (color.includes('rgba')) {
+        const rgba = color.match(/[\d.]+/g);
+        if (rgba && rgba.length > 3) {
+          opacity = rgba[3];
+          color = `rgb(${rgba[0]},${rgba[1]},${rgba[2]})`;
+        }
+      }
+      stopsXML += `<stop offset="${offset}" stop-color="${color}" stop-opacity="${opacity}"/>`;
+    });
+
+    let strokeAttr = '';
+    if (border) {
+      strokeAttr = `stroke="#${border.color}" stroke-width="${border.width}"`;
+    }
+
+    const svg = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+              <defs><linearGradient id="grad" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}">${stopsXML}</linearGradient></defs>
+              <rect x="0" y="0" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="url(#grad)" ${strokeAttr} />
+          </svg>`;
+    return 'data:image/svg+xml;base64,' + btoa(svg);
+  } catch {
+    return null;
+  }
+}
+
+function generateBlurredSVG(w, h, color, radius, blurPx) {
+  const padding = blurPx * 3;
+  const fullW = w + padding * 2;
+  const fullH = h + padding * 2;
+  const x = padding;
+  const y = padding;
+  let shapeTag = '';
+  const isCircle = radius >= Math.min(w, h) / 2 - 1 && Math.abs(w - h) < 2;
+
+  if (isCircle) {
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    const rx = w / 2;
+    const ry = h / 2;
+    shapeTag = `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="#${color}" filter="url(#f1)" />`;
+  } else {
+    shapeTag = `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="#${color}" filter="url(#f1)" />`;
+  }
+
+  const svg = `
+  <svg xmlns="http://www.w3.org/2000/svg" width="${fullW}" height="${fullH}" viewBox="0 0 ${fullW} ${fullH}">
+    <defs>
+      <filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="${blurPx}" />
+      </filter>
+    </defs>
+    ${shapeTag}
+  </svg>`;
+
+  return {
+    data: 'data:image/svg+xml;base64,' + btoa(svg),
+    padding: padding,
+  };
+}
+
+// src/image-processor.js
+
+async function getProcessedImage(src, targetW, targetH, radius) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous'; // Critical for canvas manipulation
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      // Double resolution for better quality
+      const scale = 2;
+      canvas.width = targetW * scale;
+      canvas.height = targetH * scale;
+      const ctx = canvas.getContext('2d');
+      ctx.scale(scale, scale);
+
+      // Normalize radius input to an object { tl, tr, br, bl }
+      let r = { tl: 0, tr: 0, br: 0, bl: 0 };
+      if (typeof radius === 'number') {
+        r = { tl: radius, tr: radius, br: radius, bl: radius };
+      } else if (typeof radius === 'object' && radius !== null) {
+        r = { ...r, ...radius }; // Merge with defaults
+      }
+
+      // 1. Draw the Mask (Custom Shape with specific corners)
+      ctx.beginPath();
+
+      // Border Radius Clamping Logic (CSS Spec)
+      // Prevents corners from overlapping if radii are too large for the container
+      const factor = Math.min(
+        targetW / (r.tl + r.tr) || Infinity,
+        targetH / (r.tr + r.br) || Infinity,
+        targetW / (r.br + r.bl) || Infinity,
+        targetH / (r.bl + r.tl) || Infinity
+      );
+
+      if (factor < 1) {
+        r.tl *= factor;
+        r.tr *= factor;
+        r.br *= factor;
+        r.bl *= factor;
+      }
+
+      // Draw path: Top-Left -> Top-Right -> Bottom-Right -> Bottom-Left
+      ctx.moveTo(r.tl, 0);
+      ctx.lineTo(targetW - r.tr, 0);
+      ctx.arcTo(targetW, 0, targetW, r.tr, r.tr);
+      ctx.lineTo(targetW, targetH - r.br);
+      ctx.arcTo(targetW, targetH, targetW - r.br, targetH, r.br);
+      ctx.lineTo(r.bl, targetH);
+      ctx.arcTo(0, targetH, 0, targetH - r.bl, r.bl);
+      ctx.lineTo(0, r.tl);
+      ctx.arcTo(0, 0, r.tl, 0, r.tl);
+
+      ctx.closePath();
+      ctx.fillStyle = '#000';
+      ctx.fill();
+
+      // 2. Composite Source-In (Crops the next image draw to the mask)
+      ctx.globalCompositeOperation = 'source-in';
+
+      // 3. Draw Image (Object Cover Logic)
+      const wRatio = targetW / img.width;
+      const hRatio = targetH / img.height;
+      const maxRatio = Math.max(wRatio, hRatio);
+      const renderW = img.width * maxRatio;
+      const renderH = img.height * maxRatio;
+      const renderX = (targetW - renderW) / 2;
+      const renderY = (targetH - renderH) / 2;
+
+      ctx.drawImage(img, renderX, renderY, renderW, renderH);
+
+      resolve(canvas.toDataURL('image/png'));
+    };
+
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+}
+
+// src/index.js
+
+// Normalize import
+const PptxGenJS = PptxGenJSImport?.default ?? PptxGenJSImport;
+
+const PPI = 96;
+const PX_TO_INCH = 1 / PPI;
+
+/**
+ * Main export function. Accepts single element or an array.
+ * @param {HTMLElement | string | Array<HTMLElement | string>} target - The root element(s) to convert.
+ * @param {Object} options - { fileName: string }
+ */
+async function exportToPptx(target, options = {}) {
+  const resolvePptxConstructor = (pkg) => {
+    if (!pkg) return null;
+    if (typeof pkg === 'function') return pkg;
+    if (pkg && typeof pkg.default === 'function') return pkg.default;
+    if (pkg && typeof pkg.PptxGenJS === 'function') return pkg.PptxGenJS;
+    if (pkg && pkg.PptxGenJS && typeof pkg.PptxGenJS.default === 'function')
+      return pkg.PptxGenJS.default;
+    return null;
+  };
+
+  const PptxConstructor = resolvePptxConstructor(PptxGenJS);
+  if (!PptxConstructor) throw new Error('PptxGenJS constructor not found.');
+  const pptx = new PptxConstructor();
+  pptx.layout = 'LAYOUT_16x9';
+
+  const elements = Array.isArray(target) ? target : [target];
+
+  for (const el of elements) {
+    const root = typeof el === 'string' ? document.querySelector(el) : el;
+    if (!root) {
+      console.warn('Element not found, skipping slide:', el);
+      continue;
+    }
+    const slide = pptx.addSlide();
+    await processSlide(root, slide, pptx);
+  }
+
+  const fileName = options.fileName || 'export.pptx';
+  pptx.writeFile({ fileName });
+}
+
+/**
+ * Worker function to process a single DOM element into a single PPTX slide.
+ * @param {HTMLElement} root - The root element for this slide.
+ * @param {PptxGenJS.Slide} slide - The PPTX slide object to add content to.
+ * @param {PptxGenJS} pptx - The main PPTX instance.
+ */
+async function processSlide(root, slide, pptx) {
+  const rootRect = root.getBoundingClientRect();
+  const PPTX_WIDTH_IN = 10;
+  const PPTX_HEIGHT_IN = 5.625;
+
+  const contentWidthIn = rootRect.width * PX_TO_INCH;
+  const contentHeightIn = rootRect.height * PX_TO_INCH;
+  const scale = Math.min(PPTX_WIDTH_IN / contentWidthIn, PPTX_HEIGHT_IN / contentHeightIn);
+
+  const layoutConfig = {
+    rootX: rootRect.x,
+    rootY: rootRect.y,
+    scale: scale,
+    offX: (PPTX_WIDTH_IN - contentWidthIn * scale) / 2,
+    offY: (PPTX_HEIGHT_IN - contentHeightIn * scale) / 2,
+  };
+
+  const renderQueue = [];
+  let domOrderCounter = 0;
+
+  async function collect(node) {
+    const order = domOrderCounter++;
+    const result = await createRenderItem(node, { ...layoutConfig, root }, order, pptx);
+    if (result) {
+      if (result.items) renderQueue.push(...result.items);
+      if (result.stopRecursion) return;
+    }
+    for (const child of node.children) await collect(child);
+  }
+
+  await collect(root);
+
+  renderQueue.sort((a, b) => {
+    if (a.zIndex !== b.zIndex) return a.zIndex - b.zIndex;
+    return a.domOrder - b.domOrder;
+  });
+
+  for (const item of renderQueue) {
+    if (item.type === 'shape') slide.addShape(item.shapeType, item.options);
+    if (item.type === 'image') slide.addImage(item.options);
+    if (item.type === 'text') slide.addText(item.textParts, item.options);
+  }
+}
+
+async function elementToCanvasImage(node, widthPx, heightPx, root) {
+  return new Promise((resolve) => {
+    const width = Math.ceil(widthPx);
+    const height = Math.ceil(heightPx);
+
+    if (width <= 0 || height <= 0) {
+      resolve(null);
+      return;
+    }
+
+    const style = window.getComputedStyle(node);
+
+    html2canvas(root, {
+      width: root.scrollWidth,
+      height: root.scrollHeight,
+      useCORS: true,
+      allowTaint: true,
+      backgroundColor: null,
+    })
+      .then((canvas) => {
+        const rootCanvas = canvas;
+        const nodeRect = node.getBoundingClientRect();
+        const rootRect = root.getBoundingClientRect();
+        const sourceX = nodeRect.left - rootRect.left;
+        const sourceY = nodeRect.top - rootRect.top;
+
+        const destCanvas = document.createElement('canvas');
+        destCanvas.width = width;
+        destCanvas.height = height;
+        const ctx = destCanvas.getContext('2d');
+
+        ctx.drawImage(rootCanvas, sourceX, sourceY, width, height, 0, 0, width, height);
+
+        // Parse radii
+        let tl = parseFloat(style.borderTopLeftRadius) || 0;
+        let tr = parseFloat(style.borderTopRightRadius) || 0;
+        let br = parseFloat(style.borderBottomRightRadius) || 0;
+        let bl = parseFloat(style.borderBottomLeftRadius) || 0;
+
+        const f = Math.min(
+          width / (tl + tr) || Infinity,
+          height / (tr + br) || Infinity,
+          width / (br + bl) || Infinity,
+          height / (bl + tl) || Infinity
+        );
+
+        if (f < 1) {
+          tl *= f;
+          tr *= f;
+          br *= f;
+          bl *= f;
+        }
+
+        ctx.globalCompositeOperation = 'destination-in';
+        ctx.beginPath();
+        ctx.moveTo(tl, 0);
+        ctx.lineTo(width - tr, 0);
+        ctx.arcTo(width, 0, width, tr, tr);
+        ctx.lineTo(width, height - br);
+        ctx.arcTo(width, height, width - br, height, br);
+        ctx.lineTo(bl, height);
+        ctx.arcTo(0, height, 0, height - bl, bl);
+        ctx.lineTo(0, tl);
+        ctx.arcTo(0, 0, tl, 0, tl);
+        ctx.closePath();
+        ctx.fill();
+
+        resolve(destCanvas.toDataURL('image/png'));
+      })
+      .catch(() => resolve(null));
+  });
+}
+
+async function createRenderItem(node, config, domOrder, pptx) {
+  if (node.nodeType !== 1) return null;
+  const style = window.getComputedStyle(node);
+  if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0')
+    return null;
+
+  const rect = node.getBoundingClientRect();
+  if (rect.width < 0.5 || rect.height < 0.5) return null;
+
+  const zIndex = style.zIndex !== 'auto' ? parseInt(style.zIndex) : 0;
+  const rotation = getRotation(style.transform);
+  const elementOpacity = parseFloat(style.opacity);
+
+  const widthPx = node.offsetWidth || rect.width;
+  const heightPx = node.offsetHeight || rect.height;
+  const unrotatedW = widthPx * PX_TO_INCH * config.scale;
+  const unrotatedH = heightPx * PX_TO_INCH * config.scale;
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+
+  let x = config.offX + (centerX - config.rootX) * PX_TO_INCH * config.scale - unrotatedW / 2;
+  let y = config.offY + (centerY - config.rootY) * PX_TO_INCH * config.scale - unrotatedH / 2;
+  let w = unrotatedW;
+  let h = unrotatedH;
+
+  const items = [];
+
+  if (node.nodeName.toUpperCase() === 'SVG') {
+    const pngData = await svgToPng(node);
+    if (pngData)
+      items.push({
+        type: 'image',
+        zIndex,
+        domOrder,
+        options: { data: pngData, x, y, w, h, rotate: rotation },
+      });
+    return { items, stopRecursion: true };
+  }
+
+  // --- UPDATED IMG BLOCK START ---
+  if (node.tagName === 'IMG') {
+    // Extract individual corner radii
+    let radii = {
+      tl: parseFloat(style.borderTopLeftRadius) || 0,
+      tr: parseFloat(style.borderTopRightRadius) || 0,
+      br: parseFloat(style.borderBottomRightRadius) || 0,
+      bl: parseFloat(style.borderBottomLeftRadius) || 0,
+    };
+
+    const hasAnyRadius = radii.tl > 0 || radii.tr > 0 || radii.br > 0 || radii.bl > 0;
+
+    // Fallback: Check parent if image has no specific radius but parent clips it
+    if (!hasAnyRadius) {
+      const parent = node.parentElement;
+      const parentStyle = window.getComputedStyle(parent);
+      if (parentStyle.overflow !== 'visible') {
+        const pRadii = {
+          tl: parseFloat(parentStyle.borderTopLeftRadius) || 0,
+          tr: parseFloat(parentStyle.borderTopRightRadius) || 0,
+          br: parseFloat(parentStyle.borderBottomRightRadius) || 0,
+          bl: parseFloat(parentStyle.borderBottomLeftRadius) || 0,
+        };
+        // Simple heuristic: If image takes up full size of parent, inherit radii.
+        // For complex grids (like slide-1), this blindly applies parent radius.
+        // In a perfect world, we'd calculate intersection, but for now we apply parent radius
+        // if the image is close to the parent's size, effectively masking it.
+        const pRect = parent.getBoundingClientRect();
+        if (Math.abs(pRect.width - rect.width) < 5 && Math.abs(pRect.height - rect.height) < 5) {
+          radii = pRadii;
+        }
+      }
+    }
+
+    const processed = await getProcessedImage(node.src, widthPx, heightPx, radii);
+    if (processed)
+      items.push({
+        type: 'image',
+        zIndex,
+        domOrder,
+        options: { data: processed, x, y, w, h, rotate: rotation },
+      });
+    return { items, stopRecursion: true };
+  }
+  // --- UPDATED IMG BLOCK END ---
+
+  // Radii processing for Divs/Shapes
+  const borderRadiusValue = parseFloat(style.borderRadius) || 0;
+  const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;
+  const borderBottomRightRadius = parseFloat(style.borderBottomRightRadius) || 0;
+  const borderTopLeftRadius = parseFloat(style.borderTopLeftRadius) || 0;
+  const borderTopRightRadius = parseFloat(style.borderTopRightRadius) || 0;
+
+  const hasPartialBorderRadius =
+    (borderBottomLeftRadius > 0 && borderBottomLeftRadius !== borderRadiusValue) ||
+    (borderBottomRightRadius > 0 && borderBottomRightRadius !== borderRadiusValue) ||
+    (borderTopLeftRadius > 0 && borderTopLeftRadius !== borderRadiusValue) ||
+    (borderTopRightRadius > 0 && borderTopRightRadius !== borderRadiusValue) ||
+    (borderRadiusValue === 0 &&
+      (borderBottomLeftRadius ||
+        borderBottomRightRadius ||
+        borderTopLeftRadius ||
+        borderTopRightRadius));
+
+  // Allow clipped elements to be rendered via canvas
+  if (hasPartialBorderRadius && isClippedByParent(node)) {
+    const marginLeft = parseFloat(style.marginLeft) || 0;
+    const marginTop = parseFloat(style.marginTop) || 0;
+    x += marginLeft * PX_TO_INCH * config.scale;
+    y += marginTop * PX_TO_INCH * config.scale;
+
+    const canvasImageData = await elementToCanvasImage(node, widthPx, heightPx, config.root);
+    if (canvasImageData) {
+      items.push({
+        type: 'image',
+        zIndex,
+        domOrder,
+        options: { data: canvasImageData, x, y, w, h, rotate: rotation },
+      });
+      return { items, stopRecursion: true };
+    }
+  }
+
+  const bgColorObj = parseColor(style.backgroundColor);
+  const bgClip = style.webkitBackgroundClip || style.backgroundClip;
+  const isBgClipText = bgClip === 'text';
+  const hasGradient =
+    !isBgClipText && style.backgroundImage && style.backgroundImage.includes('linear-gradient');
+
+  const borderColorObj = parseColor(style.borderColor);
+  const borderWidth = parseFloat(style.borderWidth);
+  const hasBorder = borderWidth > 0 && borderColorObj.hex;
+
+  const borderInfo = getBorderInfo(style, config.scale);
+  const hasUniformBorder = borderInfo.type === 'uniform';
+  const hasCompositeBorder = borderInfo.type === 'composite';
+
+  const shadowStr = style.boxShadow;
+  const hasShadow = shadowStr && shadowStr !== 'none';
+  const softEdge = getSoftEdges(style.filter, config.scale);
+
+  let isImageWrapper = false;
+  const imgChild = Array.from(node.children).find((c) => c.tagName === 'IMG');
+  if (imgChild) {
+    const childW = imgChild.offsetWidth || imgChild.getBoundingClientRect().width;
+    const childH = imgChild.offsetHeight || imgChild.getBoundingClientRect().height;
+    if (childW >= widthPx - 2 && childH >= heightPx - 2) isImageWrapper = true;
+  }
+
+  let textPayload = null;
+  const isText = isTextContainer(node);
+
+  if (isText) {
+    const textParts = [];
+    const isList = style.display === 'list-item';
+    if (isList) {
+      const fontSizePt = parseFloat(style.fontSize) * 0.75 * config.scale;
+      const bulletShift = (parseFloat(style.fontSize) || 16) * PX_TO_INCH * config.scale * 1.5;
+      x -= bulletShift;
+      w += bulletShift;
+      textParts.push({
+        text: '• ',
+        options: {
+          color: parseColor(style.color).hex || '000000',
+          fontSize: fontSizePt,
+        },
+      });
+    }
+
+    node.childNodes.forEach((child, index) => {
+      let textVal = child.nodeType === 3 ? child.nodeValue : child.textContent;
+      let nodeStyle = child.nodeType === 1 ? window.getComputedStyle(child) : style;
+      textVal = textVal.replace(/[\n\r\t]+/g, ' ').replace(/\s{2,}/g, ' ');
+      if (index === 0 && !isList) textVal = textVal.trimStart();
+      else if (index === 0) textVal = textVal.trimStart();
+      if (index === node.childNodes.length - 1) textVal = textVal.trimEnd();
+      if (nodeStyle.textTransform === 'uppercase') textVal = textVal.toUpperCase();
+      if (nodeStyle.textTransform === 'lowercase') textVal = textVal.toLowerCase();
+
+      if (textVal.length > 0) {
+        textParts.push({
+          text: textVal,
+          options: getTextStyle(nodeStyle, config.scale),
+        });
+      }
+    });
+
+    if (textParts.length > 0) {
+      let align = style.textAlign || 'left';
+      if (align === 'start') align = 'left';
+      if (align === 'end') align = 'right';
+      let valign = 'top';
+      if (style.alignItems === 'center') valign = 'middle';
+      if (style.justifyContent === 'center' && style.display.includes('flex')) align = 'center';
+
+      const pt = parseFloat(style.paddingTop) || 0;
+      const pb = parseFloat(style.paddingBottom) || 0;
+      if (Math.abs(pt - pb) < 2 && bgColorObj.hex) valign = 'middle';
+
+      let padding = getPadding(style, config.scale);
+      if (align === 'center' && valign === 'middle') padding = [0, 0, 0, 0];
+
+      textPayload = { text: textParts, align, valign, inset: padding };
+    }
+  }
+
+  if (hasGradient || (softEdge && bgColorObj.hex && !isImageWrapper)) {
+    let bgData = null;
+    let padIn = 0;
+    if (softEdge) {
+      const svgInfo = generateBlurredSVG(
+        widthPx,
+        heightPx,
+        bgColorObj.hex,
+        borderRadiusValue,
+        softEdge
+      );
+      bgData = svgInfo.data;
+      padIn = svgInfo.padding * PX_TO_INCH * config.scale;
+    } else {
+      bgData = generateGradientSVG(
+        widthPx,
+        heightPx,
+        style.backgroundImage,
+        borderRadiusValue,
+        hasBorder ? { color: borderColorObj.hex, width: borderWidth } : null
+      );
+    }
+
+    if (bgData) {
+      items.push({
+        type: 'image',
+        zIndex,
+        domOrder,
+        options: {
+          data: bgData,
+          x: x - padIn,
+          y: y - padIn,
+          w: w + padIn * 2,
+          h: h + padIn * 2,
+          rotate: rotation,
+        },
+      });
+    }
+
+    if (textPayload) {
+      items.push({
+        type: 'text',
+        zIndex: zIndex + 1,
+        domOrder,
+        textParts: textPayload.text,
+        options: {
+          x,
+          y,
+          w,
+          h,
+          align: textPayload.align,
+          valign: textPayload.valign,
+          inset: textPayload.inset,
+          rotate: rotation,
+          margin: 0,
+          wrap: true,
+          autoFit: false,
+        },
+      });
+    }
+    if (hasCompositeBorder) {
+      // Add border shapes after the main background
+      const borderItems = createCompositeBorderItems(
+        borderInfo.sides,
+        x,
+        y,
+        w,
+        h,
+        config.scale,
+        zIndex,
+        domOrder
+      );
+      items.push(...borderItems);
+    }
+  } else if (
+    (bgColorObj.hex && !isImageWrapper) ||
+    hasUniformBorder ||
+    hasCompositeBorder ||
+    hasShadow ||
+    textPayload
+  ) {
+    const finalAlpha = elementOpacity * bgColorObj.opacity;
+    const transparency = (1 - finalAlpha) * 100;
+    const useSolidFill = bgColorObj.hex && !isImageWrapper;
+
+    if (hasPartialBorderRadius && useSolidFill && !textPayload) {
+      const shapeSvg = generateCustomShapeSVG(
+        widthPx,
+        heightPx,
+        bgColorObj.hex,
+        bgColorObj.opacity,
+        {
+          tl: parseFloat(style.borderTopLeftRadius) || 0,
+          tr: parseFloat(style.borderTopRightRadius) || 0,
+          br: parseFloat(style.borderBottomRightRadius) || 0,
+          bl: parseFloat(style.borderBottomLeftRadius) || 0,
+        }
+      );
+
+      items.push({
+        type: 'image',
+        zIndex,
+        domOrder,
+        options: {
+          data: shapeSvg,
+          x,
+          y,
+          w,
+          h,
+          rotate: rotation,
+        },
+      });
+    } else {
+      const shapeOpts = {
+        x,
+        y,
+        w,
+        h,
+        rotate: rotation,
+        fill: useSolidFill
+          ? { color: bgColorObj.hex, transparency: transparency }
+          : { type: 'none' },
+        line: hasUniformBorder ? borderInfo.options : null,
+      };
+
+      if (hasShadow) {
+        shapeOpts.shadow = getVisibleShadow(shadowStr, config.scale);
+      }
+
+      const borderRadius = parseFloat(style.borderRadius) || 0;
+      const aspectRatio = Math.max(widthPx, heightPx) / Math.min(widthPx, heightPx);
+      const isCircle = aspectRatio < 1.1 && borderRadius >= Math.min(widthPx, heightPx) / 2 - 1;
+
+      let shapeType = pptx.ShapeType.rect;
+      if (isCircle) shapeType = pptx.ShapeType.ellipse;
+      else if (borderRadius > 0) {
+        shapeType = pptx.ShapeType.roundRect;
+        shapeOpts.rectRadius = Math.min(0.5, borderRadius / Math.min(widthPx, heightPx));
+      }
+
+      if (textPayload) {
+        const textOptions = {
+          shape: shapeType,
+          ...shapeOpts,
+          align: textPayload.align,
+          valign: textPayload.valign,
+          inset: textPayload.inset,
+          margin: 0,
+          wrap: true,
+          autoFit: false,
+        };
+        items.push({
+          type: 'text',
+          zIndex,
+          domOrder,
+          textParts: textPayload.text,
+          options: textOptions,
+        });
+      } else if (!hasPartialBorderRadius) {
+        items.push({
+          type: 'shape',
+          zIndex,
+          domOrder,
+          shapeType,
+          options: shapeOpts,
+        });
+      }
+    }
+
+    if (hasCompositeBorder) {
+      const borderSvgData = generateCompositeBorderSVG(
+        widthPx,
+        heightPx,
+        borderRadiusValue,
+        borderInfo.sides
+      );
+      if (borderSvgData) {
+        items.push({
+          type: 'image',
+          zIndex: zIndex + 1,
+          domOrder,
+          options: { data: borderSvgData, x, y, w, h, rotate: rotation },
+        });
+      }
+    }
+  }
+
+  return { items, stopRecursion: !!textPayload };
+}
+
+/**
+ * Helper function to create individual border shapes
+ */
+function createCompositeBorderItems(sides, x, y, w, h, scale, zIndex, domOrder) {
+  const items = [];
+  const pxToInch = 1 / 96;
+
+  // TOP BORDER
+  if (sides.top.width > 0) {
+    items.push({
+      type: 'shape',
+      zIndex: zIndex + 1,
+      domOrder,
+      shapeType: 'rect',
+      options: {
+        x: x,
+        y: y,
+        w: w,
+        h: sides.top.width * pxToInch * scale,
+        fill: { color: sides.top.color },
+      },
+    });
+  }
+  // RIGHT BORDER
+  if (sides.right.width > 0) {
+    items.push({
+      type: 'shape',
+      zIndex: zIndex + 1,
+      domOrder,
+      shapeType: 'rect',
+      options: {
+        x: x + w - sides.right.width * pxToInch * scale,
+        y: y,
+        w: sides.right.width * pxToInch * scale,
+        h: h,
+        fill: { color: sides.right.color },
+      },
+    });
+  }
+  // BOTTOM BORDER
+  if (sides.bottom.width > 0) {
+    items.push({
+      type: 'shape',
+      zIndex: zIndex + 1,
+      domOrder,
+      shapeType: 'rect',
+      options: {
+        x: x,
+        y: y + h - sides.bottom.width * pxToInch * scale,
+        w: w,
+        h: sides.bottom.width * pxToInch * scale,
+        fill: { color: sides.bottom.color },
+      },
+    });
+  }
+  // LEFT BORDER
+  if (sides.left.width > 0) {
+    items.push({
+      type: 'shape',
+      zIndex: zIndex + 1,
+      domOrder,
+      shapeType: 'rect',
+      options: {
+        x: x,
+        y: y,
+        w: sides.left.width * pxToInch * scale,
+        h: h,
+        fill: { color: sides.left.color },
+      },
+    });
+  }
+
+  return items;
 }
 
 export { exportToPptx };