dom-to-pptx 1.0.6 → 1.0.7

package/dist/dom-to-pptx.min.js

@@ -7844,484 +7844,430 @@
             : 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;
+    }
+
+    // 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) => {
+        // 1. Reject Web Components / Icons / Images
+        if (el.tagName.includes('-')) return false;
+        if (el.tagName === 'IMG' || el.tagName === 'SVG') return false;
+
+        const style = window.getComputedStyle(el);
+        const display = style.display;
+
+        // 2. Initial check: Must be a standard inline tag OR display:inline
+        const isInlineTag = ['SPAN', 'B', 'STRONG', 'EM', 'I', 'A', 'SMALL', 'MARK'].includes(el.tagName);
+        const isInlineDisplay = display.includes('inline');
+
+        if (!isInlineTag && !isInlineDisplay) return false;
+
+        // 3. CRITICAL FIX: Check for Structural Styling
+        // PPTX Text Runs (parts of a text line) CANNOT have backgrounds, borders, or padding.
+        // If a child element has these, the parent is NOT a simple text container; 
+        // it is a layout container composed of styled blocks.
+        const bgColor = parseColor(style.backgroundColor);
+        const hasVisibleBg = bgColor.hex && bgColor.opacity > 0;
+        const hasBorder = parseFloat(style.borderWidth) > 0 && parseColor(style.borderColor).opacity > 0;
+
+        if (hasVisibleBg || hasBorder) {
+          return false;
+        }
+
+        // 4. Check for empty shapes (visual objects without text, like dots)
+        const hasContent = el.textContent.trim().length > 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 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
@@ -8404,642 +8350,717 @@
       });
     }
 
-    // src/index.js
-
-    // Normalize import
-    const PptxGenJS = PptxGenJSImport__namespace?.default ?? PptxGenJSImport__namespace;
-
-    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;
+    // src/index.js
+
+    // Normalize import
+    const PptxGenJS = PptxGenJSImport__namespace?.default ?? PptxGenJSImport__namespace;
+
+    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 = [];
+      const asyncTasks = []; // Queue for heavy operations (Images, Canvas)
+      let domOrderCounter = 0;
+
+      // Sync Traversal Function
+      function collect(node, parentZIndex) {
+        const order = domOrderCounter++;
+
+        let currentZ = parentZIndex;
+        let nodeStyle = null;
+        const nodeType = node.nodeType;
+
+        if (nodeType === 1) {
+          nodeStyle = window.getComputedStyle(node);
+          // Optimization: Skip completely hidden elements immediately
+          if (
+            nodeStyle.display === 'none' ||
+            nodeStyle.visibility === 'hidden' ||
+            nodeStyle.opacity === '0'
+          ) {
+            return;
+          }
+          if (nodeStyle.zIndex !== 'auto') {
+            currentZ = parseInt(nodeStyle.zIndex);
+          }
+        }
+
+        // Prepare the item. If it needs async work, it returns a 'job'
+        const result = prepareRenderItem(
+          node,
+          { ...layoutConfig, root },
+          order,
+          pptx,
+          currentZ,
+          nodeStyle
+        );
+
+        if (result) {
+          if (result.items) {
+            // Push items immediately to queue (data might be missing but filled later)
+            renderQueue.push(...result.items);
+          }
+          if (result.job) {
+            // Push the promise-returning function to the task list
+            asyncTasks.push(result.job);
+          }
+          if (result.stopRecursion) return;
+        }
+
+        // Recurse children synchronously
+        const childNodes = node.childNodes;
+        for (let i = 0; i < childNodes.length; i++) {
+          collect(childNodes[i], currentZ);
+        }
+      }
+
+      // 1. Traverse and build the structure (Fast)
+      collect(root, 0);
+
+      // 2. Execute all heavy tasks in parallel (Fast)
+      if (asyncTasks.length > 0) {
+        await Promise.all(asyncTasks.map((task) => task()));
+      }
+
+      // 3. Cleanup and Sort
+      // Remove items that failed to generate data (marked with skip)
+      const finalQueue = renderQueue.filter(
+        (item) => !item.skip && (item.type !== 'image' || item.options.data)
+      );
+
+      finalQueue.sort((a, b) => {
+        if (a.zIndex !== b.zIndex) return a.zIndex - b.zIndex;
+        return a.domOrder - b.domOrder;
+      });
+
+      // 4. Add to Slide
+      for (const item of finalQueue) {
+        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);
+      }
+    }
+
+    /**
+     * Optimized html2canvas wrapper
+     * Now strictly captures the node itself, not the root.
+     */
+    async function elementToCanvasImage(node, widthPx, heightPx) {
+      return new Promise((resolve) => {
+        const width = Math.max(Math.ceil(widthPx), 1);
+        const height = Math.max(Math.ceil(heightPx), 1);
+        const style = window.getComputedStyle(node);
+
+        // Optimized: Capture ONLY the specific node
+        html2canvas(node, {
+          backgroundColor: null,
+          logging: false,
+          scale: 2, // Slight quality boost
+        })
+          .then((canvas) => {
+            const destCanvas = document.createElement('canvas');
+            destCanvas.width = width;
+            destCanvas.height = height;
+            const ctx = destCanvas.getContext('2d');
+
+            // Draw the captured canvas into our sized canvas
+            // html2canvas might return a larger canvas if scale > 1, so we fit it
+            ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, width, height);
+
+            // Apply border radius clipping
+            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;
+            }
+
+            if (tl + tr + br + bl > 0) {
+              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((e) => {
+            console.warn('Canvas capture failed for node', node, e);
+            resolve(null);
+          });
+      });
+    }
+
+    /**
+     * Replaces createRenderItem.
+     * Returns { items: [], job: () => Promise, stopRecursion: boolean }
+     */
+    function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, computedStyle) {
+      // 1. Text Node Handling
+      if (node.nodeType === 3) {
+        const textContent = node.nodeValue.trim();
+        if (!textContent) return null;
+
+        const parent = node.parentElement;
+        if (!parent) return null;
+
+        if (isTextContainer(parent)) return null; // Parent handles it
+
+        const range = document.createRange();
+        range.selectNode(node);
+        const rect = range.getBoundingClientRect();
+        range.detach();
+
+        const style = window.getComputedStyle(parent);
+        const widthPx = rect.width;
+        const heightPx = rect.height;
+        const unrotatedW = widthPx * PX_TO_INCH * config.scale;
+        const unrotatedH = heightPx * PX_TO_INCH * config.scale;
+
+        const x = config.offX + (rect.left - config.rootX) * PX_TO_INCH * config.scale;
+        const y = config.offY + (rect.top - config.rootY) * PX_TO_INCH * config.scale;
+
+        return {
+          items: [
+            {
+              type: 'text',
+              zIndex: effectiveZIndex,
+              domOrder,
+              textParts: [
+                {
+                  text: textContent,
+                  options: getTextStyle(style, config.scale),
+                },
+              ],
+              options: { x, y, w: unrotatedW, h: unrotatedH, margin: 0, autoFit: false },
+            },
+          ],
+          stopRecursion: false,
+        };
+      }
+
+      if (node.nodeType !== 1) return null;
+      const style = computedStyle; // Use pre-computed style
+
+      const rect = node.getBoundingClientRect();
+      if (rect.width < 0.5 || rect.height < 0.5) return null;
+
+      const zIndex = effectiveZIndex;
+      const rotation = getRotation(style.transform);
+      const elementOpacity = parseFloat(style.opacity);
+      const safeOpacity = isNaN(elementOpacity) ? 1 : elementOpacity;
+
+      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 = [];
+
+      // --- ASYNC JOB: SVGs / Icons ---
+      if (
+        node.nodeName.toUpperCase() === 'SVG' ||
+        node.tagName.includes('-') ||
+        node.tagName === 'ION-ICON'
+      ) {
+        const item = {
+          type: 'image',
+          zIndex,
+          domOrder,
+          options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+        };
+
+        // Create Job
+        const job = async () => {
+          const pngData = await elementToCanvasImage(node, widthPx, heightPx);
+          if (pngData) item.options.data = pngData;
+          else item.skip = true;
+        };
+
+        return { items: [item], job, stopRecursion: true };
+      }
+
+      // --- ASYNC JOB: IMG Tags ---
+      if (node.tagName === 'IMG') {
+        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;
+        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,
+            };
+            const pRect = parent.getBoundingClientRect();
+            if (Math.abs(pRect.width - rect.width) < 5 && Math.abs(pRect.height - rect.height) < 5) {
+              radii = pRadii;
+            }
+          }
+        }
+
+        const item = {
+          type: 'image',
+          zIndex,
+          domOrder,
+          options: { x, y, w, h, rotate: rotation, data: null },
+        };
+
+        const job = async () => {
+          const processed = await getProcessedImage(node.src, widthPx, heightPx, radii);
+          if (processed) item.options.data = processed;
+          else item.skip = true;
+        };
+
+        return { items: [item], job, stopRecursion: true };
+      }
+
+      // Radii logic
+      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));
+
+      // --- ASYNC JOB: Clipped Divs 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 item = {
+          type: 'image',
+          zIndex,
+          domOrder,
+          options: { x, y, w, h, rotate: rotation, data: null },
+        };
+
+        const job = async () => {
+          const canvasImageData = await elementToCanvasImage(node, widthPx, heightPx);
+          if (canvasImageData) item.options.data = canvasImageData;
+          else item.skip = true;
+        };
+
+        return { items: [item], job, stopRecursion: true };
+      }
+
+      // --- SYNC: Standard CSS Extraction ---
+      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) {
+          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 = safeOpacity * 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 };
+    }
+
+    function createCompositeBorderItems(sides, x, y, w, h, scale, zIndex, domOrder) {
+      const items = [];
+      const pxToInch = 1 / 96;
+      const common = { zIndex: zIndex + 1, domOrder, shapeType: 'rect' };
+
+      if (sides.top.width > 0)
+        items.push({
+          ...common,
+          options: { x, y, w, h: sides.top.width * pxToInch * scale, fill: { color: sides.top.color } },
+        });
+      if (sides.right.width > 0)
+        items.push({
+          ...common,
+          options: {
+            x: x + w - sides.right.width * pxToInch * scale,
+            y,
+            w: sides.right.width * pxToInch * scale,
+            h,
+            fill: { color: sides.right.color },
+          },
+        });
+      if (sides.bottom.width > 0)
+        items.push({
+          ...common,
+          options: {
+            x,
+            y: y + h - sides.bottom.width * pxToInch * scale,
+            w,
+            h: sides.bottom.width * pxToInch * scale,
+            fill: { color: sides.bottom.color },
+          },
+        });
+      if (sides.left.width > 0)
+        items.push({
+          ...common,
+          options: {
+            x,
+            y,
+            w: sides.left.width * pxToInch * scale,
+            h,
+            fill: { color: sides.left.color },
+          },
+        });
+
+      return items;
     }
 
     exports.exportToPptx = exportToPptx;