@microlee666/dom-to-pptx 1.1.4

package/dist/dom-to-pptx.cjs

@@ -0,0 +1,2735 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PptxGenJSImport = require('pptxgenjs');
+var html2canvas = require('html2canvas');
+var opentype = require('opentype.js');
+var fonteditorCore = require('fonteditor-core');
+var pako = require('pako');
+var JSZip = require('jszip');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var PptxGenJSImport__namespace = /*#__PURE__*/_interopNamespace(PptxGenJSImport);
+var html2canvas__default = /*#__PURE__*/_interopDefaultLegacy(html2canvas);
+var opentype__default = /*#__PURE__*/_interopDefaultLegacy(opentype);
+var pako__default = /*#__PURE__*/_interopDefaultLegacy(pako);
+var JSZip__default = /*#__PURE__*/_interopDefaultLegacy(JSZip);
+
+// src/font-utils.js
+
+/**
+ * Converts various font formats to EOT (Embedded OpenType),
+ * which is highly compatible with PowerPoint embedding.
+ * @param {string} type - 'ttf', 'woff', or 'otf'
+ * @param {ArrayBuffer} fontBuffer - The raw font data
+ */
+async function fontToEot(type, fontBuffer) {
+  const options = {
+    type,
+    hinting: true,
+    // inflate is required for WOFF decoding
+    inflate: type === 'woff' ? pako__default["default"].inflate : undefined,
+  };
+
+  const font = fonteditorCore.Font.create(fontBuffer, options);
+
+  const eotBuffer = font.write({
+    type: 'eot',
+    toBuffer: true,
+  });
+
+  if (eotBuffer instanceof ArrayBuffer) {
+    return eotBuffer;
+  }
+
+  // Ensure we return an ArrayBuffer
+  return eotBuffer.buffer.slice(eotBuffer.byteOffset, eotBuffer.byteOffset + eotBuffer.byteLength);
+}
+
+// src/font-embedder.js
+
+const START_RID = 201314;
+
+class PPTXEmbedFonts {
+  constructor() {
+    this.zip = null;
+    this.rId = START_RID;
+    this.fonts = []; // { name, data, rid }
+  }
+
+  async loadZip(zip) {
+    this.zip = zip;
+  }
+
+  /**
+   * Reads the font name from the buffer using opentype.js
+   */
+  getFontInfo(fontBuffer) {
+    try {
+      const font = opentype__default["default"].parse(fontBuffer);
+      const names = font.names;
+      // Prefer English name, fallback to others
+      const fontFamily = names.fontFamily.en || Object.values(names.fontFamily)[0];
+      return { name: fontFamily };
+    } catch (e) {
+      console.warn('Could not parse font info', e);
+      return { name: 'Unknown' };
+    }
+  }
+
+  async addFont(fontFace, fontBuffer, type) {
+    // Convert to EOT/fntdata for PPTX compatibility
+    const eotData = await fontToEot(type, fontBuffer);
+    const rid = this.rId++;
+    this.fonts.push({ name: fontFace, data: eotData, rid });
+  }
+
+  async updateFiles() {
+    await this.updateContentTypesXML();
+    await this.updatePresentationXML();
+    await this.updateRelsPresentationXML();
+    this.updateFontFiles();
+  }
+
+  async generateBlob() {
+    if (!this.zip) throw new Error('Zip not loaded');
+    return this.zip.generateAsync({
+      type: 'blob',
+      compression: 'DEFLATE',
+      compressionOptions: { level: 6 },
+    });
+  }
+
+  // --- XML Manipulation Methods ---
+
+  async updateContentTypesXML() {
+    const file = this.zip.file('[Content_Types].xml');
+    if (!file) throw new Error('[Content_Types].xml not found');
+
+    const xmlStr = await file.async('string');
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, 'text/xml');
+
+    const types = doc.getElementsByTagName('Types')[0];
+    const defaults = Array.from(doc.getElementsByTagName('Default'));
+
+    const hasFntData = defaults.some((el) => el.getAttribute('Extension') === 'fntdata');
+
+    if (!hasFntData) {
+      const el = doc.createElement('Default');
+      el.setAttribute('Extension', 'fntdata');
+      el.setAttribute('ContentType', 'application/x-fontdata');
+      types.insertBefore(el, types.firstChild);
+    }
+
+    this.zip.file('[Content_Types].xml', new XMLSerializer().serializeToString(doc));
+  }
+
+  async updatePresentationXML() {
+    const file = this.zip.file('ppt/presentation.xml');
+    if (!file) throw new Error('ppt/presentation.xml not found');
+
+    const xmlStr = await file.async('string');
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, 'text/xml');
+    const presentation = doc.getElementsByTagName('p:presentation')[0];
+
+    // Enable embedding flags
+    presentation.setAttribute('saveSubsetFonts', 'true');
+    presentation.setAttribute('embedTrueTypeFonts', 'true');
+
+    // Find or create embeddedFontLst
+    let embeddedFontLst = presentation.getElementsByTagName('p:embeddedFontLst')[0];
+
+    if (!embeddedFontLst) {
+      embeddedFontLst = doc.createElement('p:embeddedFontLst');
+
+      // Insert before defaultTextStyle or at end
+      const defaultTextStyle = presentation.getElementsByTagName('p:defaultTextStyle')[0];
+      if (defaultTextStyle) {
+        presentation.insertBefore(embeddedFontLst, defaultTextStyle);
+      } else {
+        presentation.appendChild(embeddedFontLst);
+      }
+    }
+
+    // Add font references
+    this.fonts.forEach((font) => {
+      // Check if already exists
+      const existing = Array.from(embeddedFontLst.getElementsByTagName('p:font')).find(
+        (node) => node.getAttribute('typeface') === font.name
+      );
+
+      if (!existing) {
+        const embedFont = doc.createElement('p:embeddedFont');
+
+        const fontNode = doc.createElement('p:font');
+        fontNode.setAttribute('typeface', font.name);
+        embedFont.appendChild(fontNode);
+
+        const regular = doc.createElement('p:regular');
+        regular.setAttribute('r:id', `rId${font.rid}`);
+        embedFont.appendChild(regular);
+
+        embeddedFontLst.appendChild(embedFont);
+      }
+    });
+
+    this.zip.file('ppt/presentation.xml', new XMLSerializer().serializeToString(doc));
+  }
+
+  async updateRelsPresentationXML() {
+    const file = this.zip.file('ppt/_rels/presentation.xml.rels');
+    if (!file) throw new Error('presentation.xml.rels not found');
+
+    const xmlStr = await file.async('string');
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, 'text/xml');
+    const relationships = doc.getElementsByTagName('Relationships')[0];
+
+    this.fonts.forEach((font) => {
+      const rel = doc.createElement('Relationship');
+      rel.setAttribute('Id', `rId${font.rid}`);
+      rel.setAttribute('Target', `fonts/${font.rid}.fntdata`);
+      rel.setAttribute(
+        'Type',
+        'http://schemas.openxmlformats.org/officeDocument/2006/relationships/font'
+      );
+      relationships.appendChild(rel);
+    });
+
+    this.zip.file('ppt/_rels/presentation.xml.rels', new XMLSerializer().serializeToString(doc));
+  }
+
+  updateFontFiles() {
+    this.fonts.forEach((font) => {
+      this.zip.file(`ppt/fonts/${font.rid}.fntdata`, font.data);
+    });
+  }
+}
+
+// src/utils.js
+
+// canvas context for color normalization
+let _ctx;
+function getCtx() {
+  if (!_ctx) _ctx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+  return _ctx;
+}
+
+function getTableBorder(style, side, scale) {
+  const widthStr = style[`border${side}Width`];
+  const styleStr = style[`border${side}Style`];
+  const colorStr = style[`border${side}Color`];
+
+  const width = parseFloat(widthStr) || 0;
+  if (width === 0 || styleStr === 'none' || styleStr === 'hidden') {
+    return null;
+  }
+
+  const color = parseColor(colorStr);
+  if (!color.hex || color.opacity === 0) return null;
+
+  let dash = 'solid';
+  if (styleStr === 'dashed') dash = 'dash';
+  if (styleStr === 'dotted') dash = 'dot';
+
+  return {
+    pt: width * 0.75 * scale, // Convert px to pt
+    color: color.hex,
+    style: dash,
+  };
+}
+
+/**
+ * Extracts native table data for PptxGenJS.
+ */
+function extractTableData(node, scale, options = {}) {
+  const rows = [];
+  const colWidths = [];
+  const root = options.root || null;
+
+  // 1. Calculate Column Widths based on the first row of cells
+  // We look at the first <tr>'s children to determine visual column widths.
+  // Note: This assumes a fixed grid. Complex colspan/rowspan on the first row
+  // might skew widths, but getBoundingClientRect captures the rendered result.
+  const firstRow = node.querySelector('tr');
+  if (firstRow) {
+    const cells = Array.from(firstRow.children);
+    cells.forEach((cell) => {
+      const rect = cell.getBoundingClientRect();
+      const wIn = rect.width * (1 / 96) * scale;
+      colWidths.push(wIn);
+    });
+  }
+
+  // 2. Iterate Rows
+  const trList = node.querySelectorAll('tr');
+  trList.forEach((tr) => {
+    const rowData = [];
+    const cellList = Array.from(tr.children).filter((c) =>
+      ['TD', 'TH'].includes(c.tagName)
+    );
+
+    cellList.forEach((cell) => {
+      const style = window.getComputedStyle(cell);
+      const cellText = cell.innerText.replace(/[\n\r\t]+/g, ' ').trim();
+
+      // A. Text Style
+      const textStyle = getTextStyle(style, scale, cellText, options);
+
+      // B. Cell Background
+      const fill = computeTableCellFill(style, cell, root, options);
+
+      // C. Alignment
+      let align = 'left';
+      if (style.textAlign === 'center') align = 'center';
+      if (style.textAlign === 'right' || style.textAlign === 'end') align = 'right';
+
+      let valign = 'top';
+      if (style.verticalAlign === 'middle') valign = 'middle';
+      if (style.verticalAlign === 'bottom') valign = 'bottom';
+
+      // D. Padding (Margins in PPTX)
+      // CSS Padding px -> PPTX Margin pt
+      const padding = getPadding(style, scale);
+      // getPadding returns [top, right, bottom, left] in inches relative to scale
+      // PptxGenJS expects points (pt) for margin: [t, r, b, l]
+      // or discrete properties. Let's use discrete for clarity.
+      const margin = [
+        padding[0] * 72, // top
+        padding[1] * 72, // right
+        padding[2] * 72, // bottom
+        padding[3] * 72  // left
+      ];
+
+      // E. Borders
+      const borderTop = getTableBorder(style, 'Top', scale);
+      const borderRight = getTableBorder(style, 'Right', scale);
+      const borderBottom = getTableBorder(style, 'Bottom', scale);
+      const borderLeft = getTableBorder(style, 'Left', scale);
+
+      // F. Construct Cell Object
+      rowData.push({
+        text: cellText,
+        options: {
+          color: textStyle.color,
+          fontFace: textStyle.fontFace,
+          fontSize: textStyle.fontSize,
+          bold: textStyle.bold,
+          italic: textStyle.italic,
+          underline: textStyle.underline,
+
+          fill: fill,
+          align: align,
+          valign: valign,
+          margin: margin,
+
+          rowspan: parseInt(cell.getAttribute('rowspan')) || null,
+          colspan: parseInt(cell.getAttribute('colspan')) || null,
+
+          border: {
+            pt: null, // trigger explicit object structure
+            top: borderTop,
+            right: borderRight,
+            bottom: borderBottom,
+            left: borderLeft
+          }
+        },
+      });
+    });
+
+    if (rowData.length > 0) {
+      rows.push(rowData);
+    }
+  });
+
+  return { rows, colWidths };
+}
+
+// Checks if any parent element has overflow: hidden which would clip this element
+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
+// Helper to save gradient text: extracts the first color from a gradient string
+function getGradientFallbackColor(bgImage) {
+  if (!bgImage || bgImage === 'none') return null;
+
+  // 1. Extract content inside function(...)
+  // Handles linear-gradient(...), radial-gradient(...), repeating-linear-gradient(...)
+  const match = bgImage.match(/gradient\((.*)\)/);
+  if (!match) return null;
+
+  const content = match[1];
+
+  // 2. Split by comma, respecting parentheses (to avoid splitting inside rgb(), oklch(), etc.)
+  const parts = [];
+  let current = '';
+  let parenDepth = 0;
+
+  for (const char of content) {
+    if (char === '(') parenDepth++;
+    if (char === ')') parenDepth--;
+    if (char === ',' && parenDepth === 0) {
+      parts.push(current.trim());
+      current = '';
+    } else {
+      current += char;
+    }
+  }
+  if (current) parts.push(current.trim());
+
+  // 3. Find first part that is a color (skip angle/direction)
+  for (const part of parts) {
+    // Ignore directions (to right) or angles (90deg, 0.5turn)
+    if (/^(to\s|[\d\.]+(deg|rad|turn|grad))/.test(part)) continue;
+
+    // Extract color: Remove trailing position (e.g. "red 50%" -> "red")
+    // Regex matches whitespace + number + unit at end of string
+    const colorPart = part.replace(/\s+(-?[\d\.]+(%|px|em|rem|ch|vh|vw)?)$/, '');
+
+    // Check if it's not just a number (some gradients might have bare numbers? unlikely in standard syntax)
+    if (colorPart) return colorPart;
+  }
+
+  return null;
+}
+
+function mapDashType(style) {
+  if (style === 'dashed') return 'dash';
+  if (style === 'dotted') return 'dot';
+  return 'solid';
+}
+
+function hexToRgb(hex) {
+  const clean = (hex || '').replace('#', '').trim();
+  if (clean.length !== 6) return null;
+  const num = parseInt(clean, 16);
+  if (Number.isNaN(num)) return null;
+  return {
+    r: (num >> 16) & 255,
+    g: (num >> 8) & 255,
+    b: num & 255,
+  };
+}
+
+function rgbToHex(rgb) {
+  const toHex = (v) => v.toString(16).padStart(2, '0').toUpperCase();
+  return `${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+
+function blendHex(baseHex, overlayHex, alpha) {
+  const base = hexToRgb(baseHex);
+  const over = hexToRgb(overlayHex);
+  if (!base || !over) return overlayHex;
+  const a = Math.max(0, Math.min(1, alpha));
+  const r = Math.round(base.r * (1 - a) + over.r * a);
+  const g = Math.round(base.g * (1 - a) + over.g * a);
+  const b = Math.round(base.b * (1 - a) + over.b * a);
+  return rgbToHex({ r, g, b });
+}
+
+function resolveTableBaseColor(node, root) {
+  // Start from parent to avoid picking the cell's own semi-transparent fill
+  let el = node?.parentElement || null;
+  while (el && el !== document.body) {
+    const style = window.getComputedStyle(el);
+    const bg = parseColor(style.backgroundColor);
+    if (bg.hex && bg.opacity > 0) return bg.hex;
+
+    const bgClip = style.webkitBackgroundClip || style.backgroundClip;
+    const bgImage = style.backgroundImage;
+    if (bgClip !== 'text' && bgImage && bgImage.includes('gradient')) {
+      const fallback = getGradientFallbackColor(bgImage);
+      if (fallback) {
+        const parsed = parseColor(fallback);
+        if (parsed.hex) return parsed.hex;
+      }
+    }
+
+    if (el === root) break;
+    el = el.parentElement;
+  }
+  return null;
+}
+
+function computeTableCellFill(style, cell, root, options = {}) {
+  const bg = parseColor(style.backgroundColor);
+  if (!bg.hex || bg.opacity <= 0) return null;
+
+  const flatten = options.tableConfig?.flattenTransparentFill !== false;
+  if (bg.opacity < 1 && flatten) {
+    const baseHex = resolveTableBaseColor(cell, root) || 'FFFFFF';
+    const blended = blendHex(baseHex, bg.hex, bg.opacity);
+    return { color: blended };
+  }
+
+  const transparency = Math.max(0, Math.min(100, (1 - bg.opacity) * 100));
+  return transparency > 0 ? { color: bg.hex, transparency } : { color: bg.hex };
+}
+
+/**
+ * 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);
+}
+
+// --- REPLACE THE EXISTING parseColor FUNCTION ---
+function parseColor(str) {
+  if (!str || str === 'transparent' || str.trim() === 'rgba(0, 0, 0, 0)') {
+    return { hex: null, opacity: 0 };
+  }
+
+  const ctx = getCtx();
+  ctx.fillStyle = str;
+  const computed = ctx.fillStyle;
+
+  // 1. Handle Hex Output (e.g. #ff0000) - Fast Path
+  if (computed.startsWith('#')) {
+    let hex = computed.slice(1);
+    let opacity = 1;
+    if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
+    if (hex.length === 4) hex = hex.split('').map(c => c + c).join('');
+    if (hex.length === 8) {
+      opacity = parseInt(hex.slice(6), 16) / 255;
+      hex = hex.slice(0, 6);
+    }
+    return { hex: hex.toUpperCase(), opacity };
+  }
+
+  // 2. Handle RGB/RGBA Output (standard) - Fast Path
+  if (computed.startsWith('rgb')) {
+    const match = computed.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 };
+    }
+  }
+
+  // 3. Fallback: Browser returned a format we don't parse (oklch, lab, color(srgb...), etc.)
+  // Use Canvas API to convert to sRGB
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillRect(0, 0, 1, 1);
+  const data = ctx.getImageData(0, 0, 1, 1).data;
+  // data = [r, g, b, a]
+  const r = data[0];
+  const g = data[1];
+  const b = data[2];
+  const a = data[3] / 255;
+
+  if (a === 0) return { hex: null, opacity: 0 };
+
+  const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+  return { hex, opacity: a };
+}
+
+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;
+}
+
+const DEFAULT_CJK_FONTS = [
+  'PingFang SC',
+  'Hiragino Sans GB',
+  'Microsoft YaHei',
+  'Noto Sans CJK SC',
+  'Source Han Sans SC',
+  'WenQuanYi Micro Hei',
+  'SimHei',
+  'SimSun',
+  'STHeiti'
+];
+
+function normalizeFontList(fontFamily) {
+  if (!fontFamily || typeof fontFamily !== 'string') return [];
+  return fontFamily
+    .split(',')
+    .map((f) => f.trim().replace(/['"]/g, ''))
+    .filter(Boolean);
+}
+
+function containsCjk(text) {
+  if (!text) return false;
+  return /[\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff]/.test(text);
+}
+
+function normalizeCjkFallbacks(options) {
+  if (!options) return [];
+  const raw =
+    options.fontFallbacks?.cjk ??
+    options.cjkFonts ??
+    options.cjkFont ??
+    [];
+  const list = Array.isArray(raw) ? raw : [raw];
+  return list
+    .map((f) => (typeof f === 'string' ? f.trim() : String(f)))
+    .filter(Boolean);
+}
+
+function pickFontFace(fontFamily, text, options) {
+  const fontList = normalizeFontList(fontFamily);
+  const primary = fontList[0] || 'Arial';
+
+  if (!containsCjk(text)) return primary;
+
+  const lowered = fontList.map((f) => f.toLowerCase());
+  const configured = normalizeCjkFallbacks(options);
+  if (configured.length > 0) {
+    const match = configured.find((f) => lowered.includes(f.toLowerCase()));
+    return match || configured[0];
+  }
+
+  const autoMatch = DEFAULT_CJK_FONTS.find((f) => lowered.includes(f.toLowerCase()));
+  return autoMatch || primary;
+}
+
+function getTextStyle(style, scale, text = '', options = {}) {
+  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);
+  }
+
+  let lineSpacing = null;
+  const fontSizePx = parseFloat(style.fontSize);
+  const lhStr = style.lineHeight;
+
+  if (lhStr && lhStr !== 'normal') {
+    let lhPx = parseFloat(lhStr);
+
+    // Edge Case: If browser returns a raw multiplier (e.g. "1.5")
+    // we must multiply by font size to get the height in pixels.
+    // (Note: getComputedStyle usually returns 'px', but inline styles might differ)
+    if (/^[0-9.]+$/.test(lhStr)) {
+      lhPx = lhPx * fontSizePx;
+    }
+
+    if (!isNaN(lhPx) && lhPx > 0) {
+      // Convert Pixel Height to Point Height (1px = 0.75pt)
+      // And apply the global layout scale.
+      lineSpacing = lhPx * 0.75 * scale;
+    }
+  }
+
+  // --- Spacing (Margins) ---
+  // Convert CSS margins (px) to PPTX Paragraph Spacing (pt).
+  let paraSpaceBefore = 0;
+  let paraSpaceAfter = 0;
+
+  const mt = parseFloat(style.marginTop) || 0;
+  const mb = parseFloat(style.marginBottom) || 0;
+
+  if (mt > 0) paraSpaceBefore = mt * 0.75 * scale;
+  if (mb > 0) paraSpaceAfter = mb * 0.75 * scale;
+
+  const fontFace = pickFontFace(style.fontFamily, text, options);
+
+  return {
+    color: colorObj.hex || '000000',
+    fontFace: fontFace,
+    fontSize: Math.floor(fontSizePx * 0.75 * scale),
+    bold: parseInt(style.fontWeight) >= 600,
+    italic: style.fontStyle === 'italic',
+    underline: style.textDecoration.includes('underline'),
+    // Only add if we have a valid value
+    ...(lineSpacing && { lineSpacing }),
+    ...(paraSpaceBefore > 0 && { paraSpaceBefore }),
+    ...(paraSpaceAfter > 0 && { paraSpaceAfter }),
+    // Map background color to highlight if present
+    ...(parseColor(style.backgroundColor).hex ? { highlight: parseColor(style.backgroundColor).hex } : {}),
+  };
+}
+
+/**
+ * Determines if a given DOM node is primarily a text container.
+ * Updated to correctly reject Icon elements so they are rendered as images.
+ */
+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;
+
+  const isSafeInline = (el) => {
+    // 1. Reject Web Components / Custom Elements
+    if (el.tagName.includes('-')) return false;
+    // 2. Reject Explicit Images/SVGs
+    if (el.tagName === 'IMG' || el.tagName === 'SVG') return false;
+
+    // 3. Reject Class-based Icons (FontAwesome, Material, Bootstrap, etc.)
+    // If an <i> or <span> has icon classes, it is a visual object, not text.
+    if (el.tagName === 'I' || el.tagName === 'SPAN') {
+      const cls = el.getAttribute('class') || '';
+      if (
+        cls.includes('fa-') ||
+        cls.includes('fas') ||
+        cls.includes('far') ||
+        cls.includes('fab') ||
+        cls.includes('material-icons') ||
+        cls.includes('bi-') ||
+        cls.includes('icon')
+      ) {
+        return false;
+      }
+    }
+
+    const style = window.getComputedStyle(el);
+    const display = style.display;
+
+    // 4. Standard Inline Tag Check
+    const isInlineTag = ['SPAN', 'B', 'STRONG', 'EM', 'I', 'A', 'SMALL', 'MARK'].includes(
+      el.tagName
+    );
+    const isInlineDisplay = display.includes('inline');
+
+    if (!isInlineTag && !isInlineDisplay) return false;
+
+    // 5. Structural Styling Check
+    // If a child has a background or border, it's a layout block, not a simple text span.
+    const bgColor = parseColor(style.backgroundColor);
+    const hasVisibleBg = bgColor.hex && bgColor.opacity > 0;
+    const hasBorder =
+      parseFloat(style.borderWidth) > 0 && parseColor(style.borderColor).opacity > 0;
+
+    // 4. Check for empty shapes (visual objects without text, like dots)
+    const hasContent = el.textContent.trim().length > 0;
+    if (!hasContent && (hasVisibleBg || hasBorder)) {
+      return false;
+    }
+
+    // If element has background/border and is not inline, treat as layout block
+    if ((hasVisibleBg || hasBorder) && !isInlineDisplay) {
+      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;
+}
+
+/**
+ * Generates an SVG image for gradients, supporting degrees and keywords.
+ */
+function generateGradientSVG(w, h, bgString, radius, border) {
+  try {
+    const match = bgString.match(/linear-gradient\((.*)\)/);
+    if (!match) return null;
+    const content = match[1];
+
+    // Split by comma, ignoring commas inside parentheses (e.g. rgba())
+    const parts = content.split(/,(?![^()]*\))/).map((p) => p.trim());
+    if (parts.length < 2) return null;
+
+    let x1 = '0%',
+      y1 = '0%',
+      x2 = '0%',
+      y2 = '100%';
+    let stopsStartIndex = 0;
+    const firstPart = parts[0].toLowerCase();
+
+    // 1. Check for Keywords (to right, etc.)
+    if (firstPart.startsWith('to ')) {
+      stopsStartIndex = 1;
+      const direction = firstPart.replace('to ', '').trim();
+      switch (direction) {
+        case 'top':
+          y1 = '100%';
+          y2 = '0%';
+          break;
+        case 'bottom':
+          y1 = '0%';
+          y2 = '100%';
+          break;
+        case 'left':
+          x1 = '100%';
+          x2 = '0%';
+          break;
+        case 'right':
+          x2 = '100%';
+          break;
+        case 'top right':
+          x1 = '0%';
+          y1 = '100%';
+          x2 = '100%';
+          y2 = '0%';
+          break;
+        case 'top left':
+          x1 = '100%';
+          y1 = '100%';
+          x2 = '0%';
+          y2 = '0%';
+          break;
+        case 'bottom right':
+          x2 = '100%';
+          y2 = '100%';
+          break;
+        case 'bottom left':
+          x1 = '100%';
+          y2 = '100%';
+          break;
+      }
+    }
+    // 2. Check for Degrees (45deg, 90deg, etc.)
+    else if (firstPart.match(/^-?[\d.]+(deg|rad|turn|grad)$/)) {
+      stopsStartIndex = 1;
+      const val = parseFloat(firstPart);
+      // CSS 0deg is Top (North), 90deg is Right (East), 180deg is Bottom (South)
+      // We convert this to SVG coordinates on a unit square (0-100%).
+      // Formula: Map angle to perimeter coordinates.
+      if (!isNaN(val)) {
+        const deg = firstPart.includes('rad') ? val * (180 / Math.PI) : val;
+        const cssRad = ((deg - 90) * Math.PI) / 180; // Correct CSS angle offset
+
+        // Calculate standard vector for rectangle center (50, 50)
+        const scale = 50; // Distance from center to edge (approx)
+        const cos = Math.cos(cssRad); // Y component (reversed in SVG)
+        const sin = Math.sin(cssRad); // X component
+
+        // Invert Y for SVG coordinate system
+        x1 = (50 - sin * scale).toFixed(1) + '%';
+        y1 = (50 + cos * scale).toFixed(1) + '%';
+        x2 = (50 + sin * scale).toFixed(1) + '%';
+        y2 = (50 - cos * scale).toFixed(1) + '%';
+      }
+    }
+
+    // 3. Process Color Stops
+    let stopsXML = '';
+    const stopParts = parts.slice(stopsStartIndex);
+
+    stopParts.forEach((part, idx) => {
+      // Parse "Color Position" (e.g., "red 50%")
+      // Regex looks for optional space + number + unit at the end of the string
+      let color = part;
+      let offset = Math.round((idx / (stopParts.length - 1)) * 100) + '%';
+
+      const posMatch = part.match(/^(.*?)\s+(-?[\d.]+(?:%|px)?)$/);
+      if (posMatch) {
+        color = posMatch[1];
+        offset = posMatch[2];
+      }
+
+      // Handle RGBA/RGB for SVG compatibility
+      let opacity = 1;
+      if (color.includes('rgba')) {
+        const rgbaMatch = color.match(/[\d.]+/g);
+        if (rgbaMatch && rgbaMatch.length >= 4) {
+          opacity = rgbaMatch[3];
+          color = `rgb(${rgbaMatch[0]},${rgbaMatch[1]},${rgbaMatch[2]})`;
+        }
+      }
+
+      stopsXML += `<stop offset="${offset}" stop-color="${color.trim()}" 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 (e) {
+    console.warn('Gradient generation failed:', e);
+    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
+
+// ... (keep all existing exports) ...
+
+/**
+ * Traverses the target DOM and collects all unique font-family names used.
+ */
+function getUsedFontFamilies(root) {
+  const families = new Set();
+
+  function scan(node) {
+    if (node.nodeType === 1) {
+      // Element
+      const style = window.getComputedStyle(node);
+      const fontList = normalizeFontList(style.fontFamily);
+      fontList.forEach((f) => families.add(f));
+    }
+    for (const child of node.childNodes) {
+      scan(child);
+    }
+  }
+
+  // Handle array of roots or single root
+  const elements = Array.isArray(root) ? root : [root];
+  elements.forEach((el) => {
+    const node = typeof el === 'string' ? document.querySelector(el) : el;
+    if (node) scan(node);
+  });
+
+  return families;
+}
+
+/**
+ * Scans document.styleSheets to find @font-face URLs for the requested families.
+ * Returns an array of { name, url } objects.
+ */
+async function getAutoDetectedFonts(usedFamilies) {
+  const foundFonts = [];
+  const processedUrls = new Set();
+
+  // Helper to extract clean URL from CSS src string
+  const extractUrl = (srcStr) => {
+    // Look for url("...") or url('...') or url(...)
+    // Prioritize woff, ttf, otf. Avoid woff2 if possible as handling is harder,
+    // but if it's the only one, take it (convert logic handles it best effort).
+    const matches = srcStr.match(/url\((['"]?)(.*?)\1\)/g);
+    if (!matches) return null;
+
+    // Filter for preferred formats
+    let chosenUrl = null;
+    for (const match of matches) {
+      const urlRaw = match.replace(/url\((['"]?)(.*?)\1\)/, '$2');
+      // Skip data URIs for now (unless you want to support base64 embedding)
+      if (urlRaw.startsWith('data:')) continue;
+
+      if (urlRaw.includes('.ttf') || urlRaw.includes('.otf') || urlRaw.includes('.woff')) {
+        chosenUrl = urlRaw;
+        break; // Found a good one
+      }
+      // Fallback
+      if (!chosenUrl) chosenUrl = urlRaw;
+    }
+    return chosenUrl;
+  };
+
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      // Accessing cssRules on cross-origin sheets (like Google Fonts) might fail
+      // if CORS headers aren't set. We wrap in try/catch.
+      const rules = sheet.cssRules || sheet.rules;
+      if (!rules) continue;
+
+      for (const rule of Array.from(rules)) {
+        if (rule.constructor.name === 'CSSFontFaceRule' || rule.type === 5) {
+          const familyName = rule.style.getPropertyValue('font-family').replace(/['"]/g, '').trim();
+
+          if (usedFamilies.has(familyName)) {
+            const src = rule.style.getPropertyValue('src');
+            const url = extractUrl(src);
+
+            if (url && !processedUrls.has(url)) {
+              processedUrls.add(url);
+              foundFonts.push({ name: familyName, url: url });
+            }
+          }
+        }
+      }
+    } catch (e) {
+      // SecurityError is common for external stylesheets (CORS).
+      // We cannot scan those automatically via CSSOM.
+      console.warn('error:', e);
+      console.warn('Cannot scan stylesheet for fonts (CORS restriction):', sheet.href);
+    }
+  }
+
+  return foundFonts;
+}
+
+// src/image-processor.js
+
+async function getProcessedImage(
+  src,
+  targetW,
+  targetH,
+  radius,
+  objectFit = 'fill',
+  objectPosition = '50% 50%'
+) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const scale = 2; // Double resolution
+      canvas.width = targetW * scale;
+      canvas.height = targetH * scale;
+      const ctx = canvas.getContext('2d');
+      ctx.scale(scale, scale);
+
+      // Normalize radius
+      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 };
+      }
+
+      // 1. Draw Mask
+      ctx.beginPath();
+      // ... (radius clamping logic remains the same) ...
+      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;
+      }
+
+      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
+      ctx.globalCompositeOperation = 'source-in';
+
+      // 3. Draw Image with Object Fit logic
+      const wRatio = targetW / img.width;
+      const hRatio = targetH / img.height;
+      let renderW, renderH;
+
+      if (objectFit === 'contain') {
+        const fitScale = Math.min(wRatio, hRatio);
+        renderW = img.width * fitScale;
+        renderH = img.height * fitScale;
+      } else if (objectFit === 'cover') {
+        const coverScale = Math.max(wRatio, hRatio);
+        renderW = img.width * coverScale;
+        renderH = img.height * coverScale;
+      } else if (objectFit === 'none') {
+        renderW = img.width;
+        renderH = img.height;
+      } else if (objectFit === 'scale-down') {
+        const scaleDown = Math.min(1, Math.min(wRatio, hRatio));
+        renderW = img.width * scaleDown;
+        renderH = img.height * scaleDown;
+      } else {
+        // 'fill' (default)
+        renderW = targetW;
+        renderH = targetH;
+      }
+
+      // Handle Object Position (simplified parsing for "x% y%" or keywords)
+      let posX = 0.5; // Default center
+      let posY = 0.5;
+
+      const posParts = objectPosition.split(' ');
+      if (posParts.length > 0) {
+        const parsePos = (val) => {
+          if (val === 'left' || val === 'top') return 0;
+          if (val === 'center') return 0.5;
+          if (val === 'right' || val === 'bottom') return 1;
+          if (val.includes('%')) return parseFloat(val) / 100;
+          return 0.5; // fallback
+        };
+        posX = parsePos(posParts[0]);
+        posY = posParts.length > 1 ? parsePos(posParts[1]) : 0.5;
+      }
+
+      const renderX = (targetW - renderW) * posX;
+      const renderY = (targetH - renderH) * posY;
+
+      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__namespace?.default ?? PptxGenJSImport__namespace;
+
+const PPI = 96;
+const PX_TO_INCH = 1 / PPI;
+
+/**
+ * Main export function.
+ * @param {HTMLElement | string | Array<HTMLElement | string>} target
+ * @param {Object} options
+ * @param {string} [options.fileName]
+ * @param {boolean} [options.skipDownload=false] - If true, prevents automatic download
+ * @param {Object} [options.listConfig] - Config for bullets
+ * @returns {Promise<Blob>} - Returns the generated PPTX Blob
+ */
+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, options);
+  }
+
+  // 3. Font Embedding Logic
+  let finalBlob;
+  let fontsToEmbed = options.fonts || [];
+
+  if (options.autoEmbedFonts) {
+    // A. Scan DOM for used font families
+    const usedFamilies = getUsedFontFamilies(elements);
+
+    // B. Scan CSS for URLs matches
+    const detectedFonts = await getAutoDetectedFonts(usedFamilies);
+
+    // C. Merge (Avoid duplicates)
+    const explicitNames = new Set(fontsToEmbed.map((f) => f.name));
+    for (const autoFont of detectedFonts) {
+      if (!explicitNames.has(autoFont.name)) {
+        fontsToEmbed.push(autoFont);
+      }
+    }
+
+    if (detectedFonts.length > 0) {
+      console.log(
+        'Auto-detected fonts:',
+        detectedFonts.map((f) => f.name)
+      );
+    }
+  }
+
+  if (fontsToEmbed.length > 0) {
+    // Generate initial PPTX
+    const initialBlob = await pptx.write({ outputType: 'blob' });
+
+    // Load into Embedder
+    const zip = await JSZip__default["default"].loadAsync(initialBlob);
+    const embedder = new PPTXEmbedFonts();
+    await embedder.loadZip(zip);
+
+    // Fetch and Embed
+    for (const fontCfg of fontsToEmbed) {
+      try {
+        const response = await fetch(fontCfg.url);
+        if (!response.ok) throw new Error(`Failed to fetch ${fontCfg.url}`);
+        const buffer = await response.arrayBuffer();
+
+        // Infer type
+        const ext = fontCfg.url.split('.').pop().split(/[?#]/)[0].toLowerCase();
+        let type = 'ttf';
+        if (['woff', 'otf'].includes(ext)) type = ext;
+
+        await embedder.addFont(fontCfg.name, buffer, type);
+      } catch (e) {
+        console.warn(`Failed to embed font: ${fontCfg.name} (${fontCfg.url})`, e);
+      }
+    }
+
+    await embedder.updateFiles();
+    finalBlob = await embedder.generateBlob();
+  } else {
+    // No fonts to embed
+    finalBlob = await pptx.write({ outputType: 'blob' });
+  }
+
+  // 4. Output Handling
+  // If skipDownload is NOT true, proceed with browser download
+  if (!options.skipDownload) {
+    const fileName = options.fileName || 'export.pptx';
+    const url = URL.createObjectURL(finalBlob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  // Always return the blob so the caller can use it (e.g. upload to server)
+  return finalBlob;
+}
+
+/**
+ * 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, globalOptions = {}) {
+  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,
+      globalOptions
+    );
+
+    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);
+    if (item.type === 'table') {
+      slide.addTable(item.tableData.rows, {
+        x: item.options.x,
+        y: item.options.y,
+        w: item.options.w,
+        colW: item.tableData.colWidths, // Essential for correct layout
+        autoPage: false,
+        // Remove default table styles so our extracted CSS applies cleanly
+        border: { type: "none" },
+        fill: { color: "FFFFFF", transparency: 100 }
+      });
+    }
+  }
+}
+
+/**
+ * Optimized html2canvas wrapper
+ * Includes fix for cropped icons by adjusting styles in the cloned document.
+ */
+async function elementToCanvasImage(node, widthPx, heightPx) {
+  return new Promise((resolve) => {
+    // 1. Assign a temp ID to locate the node inside the cloned document
+    const originalId = node.id;
+    const tempId = 'pptx-capture-' + Math.random().toString(36).substr(2, 9);
+    node.id = tempId;
+
+    const width = Math.max(Math.ceil(widthPx), 1);
+    const height = Math.max(Math.ceil(heightPx), 1);
+    const style = window.getComputedStyle(node);
+
+    html2canvas__default["default"](node, {
+      backgroundColor: null,
+      logging: false,
+      scale: 3, // Higher scale for sharper icons
+      useCORS: true, // critical for external fonts/images
+      onclone: (clonedDoc) => {
+        const clonedNode = clonedDoc.getElementById(tempId);
+        if (clonedNode) {
+          // --- FIX: PREVENT ICON CLIPPING ---
+          // 1. Force overflow visible so glyphs bleeding out aren't cut
+          clonedNode.style.overflow = 'visible';
+
+          // 2. Adjust alignment for Icons to prevent baseline clipping
+          // (Applies to <i>, <span>, or standard icon classes)
+          const tag = clonedNode.tagName;
+          if (tag === 'I' || tag === 'SPAN' || clonedNode.className.includes('fa-')) {
+            // Flex center helps align the glyph exactly in the middle of the box
+            // preventing top/bottom cropping due to line-height mismatches.
+            clonedNode.style.display = 'inline-flex';
+            clonedNode.style.justifyContent = 'center';
+            clonedNode.style.alignItems = 'center';
+
+            // Remove margins that might offset the capture
+            clonedNode.style.margin = '0';
+
+            // Ensure the font fits
+            clonedNode.style.lineHeight = '1';
+            clonedNode.style.verticalAlign = 'middle';
+          }
+        }
+      },
+    })
+      .then((canvas) => {
+        // Restore the original ID
+        if (originalId) node.id = originalId;
+        else node.removeAttribute('id');
+
+        const destCanvas = document.createElement('canvas');
+        destCanvas.width = width;
+        destCanvas.height = height;
+        const ctx = destCanvas.getContext('2d');
+
+        // Draw captured canvas.
+        // We simply draw it to fill the box. Since we centered it in 'onclone',
+        // the glyph should now be visible within the bounds.
+        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, width, height);
+
+        // --- Border Radius Clipping (Existing Logic) ---
+        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) => {
+        if (originalId) node.id = originalId;
+        else node.removeAttribute('id');
+        console.warn('Canvas capture failed for node', node, e);
+        resolve(null);
+      });
+  });
+}
+
+/**
+ * Helper to identify elements that should be rendered as icons (Images).
+ * Detects Custom Elements AND generic tags (<i>, <span>) with icon classes/pseudo-elements.
+ */
+function isIconElement(node) {
+  // 1. Custom Elements (hyphenated tags) or Explicit Library Tags
+  const tag = node.tagName.toUpperCase();
+  if (
+    tag.includes('-') ||
+    [
+      'MATERIAL-ICON',
+      'ICONIFY-ICON',
+      'REMIX-ICON',
+      'ION-ICON',
+      'EVA-ICON',
+      'BOX-ICON',
+      'FA-ICON',
+    ].includes(tag)
+  ) {
+    return true;
+  }
+
+  // 2. Class-based Icons (FontAwesome, Bootstrap, Material symbols) on <i> or <span>
+  if (tag === 'I' || tag === 'SPAN') {
+    const cls = node.getAttribute('class') || '';
+    if (
+      typeof cls === 'string' &&
+      (cls.includes('fa-') ||
+        cls.includes('fas') ||
+        cls.includes('far') ||
+        cls.includes('fab') ||
+        cls.includes('bi-') ||
+        cls.includes('material-icons') ||
+        cls.includes('icon'))
+    ) {
+      // Double-check: Must have pseudo-element content to be a CSS icon
+      const before = window.getComputedStyle(node, '::before').content;
+      const after = window.getComputedStyle(node, '::after').content;
+      const hasContent = (c) => c && c !== 'none' && c !== 'normal' && c !== '""';
+
+      if (hasContent(before) || hasContent(after)) return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Replaces createRenderItem.
+ * Returns { items: [], job: () => Promise, stopRecursion: boolean }
+ */
+function prepareRenderItem(
+  node,
+  config,
+  domOrder,
+  pptx,
+  effectiveZIndex,
+  computedStyle,
+  globalOptions = {}
+) {
+  // 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: (() => {
+                const opts = getTextStyle(style, config.scale, textContent, globalOptions);
+                const bg = parseColor(style.backgroundColor);
+                if (opts.highlight && bg.hex && bg.opacity > 0 && !isTextContainer(parent)) {
+                  delete opts.highlight;
+                }
+                return opts;
+              })(),
+            },
+          ],
+          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 = [];
+
+  if (node.tagName === 'TABLE') {
+    const tableData = extractTableData(node, config.scale, { ...globalOptions, root: config.root });
+    const cellBgItems = [];
+    const renderCellBg = globalOptions.tableConfig?.renderCellBackgrounds !== false;
+
+    if (renderCellBg) {
+      const trList = node.querySelectorAll('tr');
+      trList.forEach((tr) => {
+        const cellList = Array.from(tr.children).filter((c) => ['TD', 'TH'].includes(c.tagName));
+        cellList.forEach((cell) => {
+          const style = window.getComputedStyle(cell);
+          const fill = computeTableCellFill(style, cell, config.root, globalOptions);
+          if (!fill) return;
+
+          const rect = cell.getBoundingClientRect();
+          const wIn = rect.width * PX_TO_INCH * config.scale;
+          const hIn = rect.height * PX_TO_INCH * config.scale;
+          const xIn = config.offX + (rect.left - config.rootX) * PX_TO_INCH * config.scale;
+          const yIn = config.offY + (rect.top - config.rootY) * PX_TO_INCH * config.scale;
+
+          cellBgItems.push({
+            type: 'shape',
+            zIndex: effectiveZIndex - 0.5,
+            domOrder,
+            shapeType: 'rect',
+            options: { x: xIn, y: yIn, w: wIn, h: hIn, fill: fill, line: { color: 'FFFFFF', transparency: 100 } }
+          });
+        });
+      });
+    }
+
+    // Calculate total table width to ensure X position is correct
+    // (Though x calculation above usually handles it, tables can be finicky)
+    return {
+      items: [
+        ...cellBgItems,
+        {
+          type: 'table',
+          zIndex: effectiveZIndex,
+          domOrder,
+          tableData: tableData,
+          options: { x, y, w: unrotatedW, h: unrotatedH }
+        }
+      ],
+      stopRecursion: true // Important: Don't process TR/TD as separate shapes
+    };
+  }
+
+  if ((node.tagName === 'UL' || node.tagName === 'OL') && !isComplexHierarchy(node)) {
+    const listItems = [];
+    const liChildren = Array.from(node.children).filter((c) => c.tagName === 'LI');
+
+    liChildren.forEach((child, index) => {
+      const liStyle = window.getComputedStyle(child);
+      const liRect = child.getBoundingClientRect();
+      const parentRect = node.getBoundingClientRect(); // node is UL/OL
+
+      // 1. Determine Bullet Config
+      let bullet = { type: 'bullet' };
+      const listStyleType = liStyle.listStyleType || 'disc';
+
+      if (node.tagName === 'OL' || listStyleType === 'decimal') {
+        bullet = { type: 'number' };
+      } else if (listStyleType === 'none') {
+        bullet = false;
+      } else {
+        let code = '2022'; // disc
+        if (listStyleType === 'circle') code = '25CB';
+        if (listStyleType === 'square') code = '25A0';
+
+        // --- CHANGE: Color & Size Logic (Option > ::marker > CSS color) ---
+        let finalHex = '000000';
+        let markerFontSize = null;
+
+        // A. Check Global Option override
+        if (globalOptions?.listConfig?.color) {
+          finalHex = parseColor(globalOptions.listConfig.color).hex || '000000';
+        }
+        // B. Check ::marker pseudo element (supported in modern browsers)
+        else {
+          const markerStyle = window.getComputedStyle(child, '::marker');
+          const markerColor = parseColor(markerStyle.color);
+          if (markerColor.hex) {
+            finalHex = markerColor.hex;
+          } else {
+            // C. Fallback to LI text color
+            const colorObj = parseColor(liStyle.color);
+            if (colorObj.hex) finalHex = colorObj.hex;
+          }
+
+          // Check ::marker font-size
+          const markerFs = parseFloat(markerStyle.fontSize);
+          if (!isNaN(markerFs) && markerFs > 0) {
+            // Convert px->pt for PPTX
+            markerFontSize = markerFs * 0.75 * config.scale;
+          }
+        }
+
+        bullet = { code, color: finalHex };
+        if (markerFontSize) {
+          bullet.fontSize = markerFontSize;
+        }
+      }
+
+      // 2. Calculate Dynamic Indent (Respects padding-left)
+      // Visual Indent = Distance from UL left edge to LI Content left edge.
+      // PptxGenJS 'indent' = Space between bullet and text? 
+      // Actually PptxGenJS 'indent' allows setting the hanging indent.
+      // We calculate the TOTAL visual offset from the parent container.
+      // 1 px = 0.75 pt (approx, standard DTP).
+      // We must scale it by config.scale.
+      const visualIndentPx = liRect.left - parentRect.left;
+      /*
+         Standard indent in PPT is ~27pt.
+         If visualIndentPx is small (e.g. 10px padding), we want small indent.
+         If visualIndentPx is large (40px padding), we want large indent.
+         We treat 'indent' as the value to pass to PptxGenJS.
+      */
+      const computedIndentPt = visualIndentPx * 0.75 * config.scale;
+
+      if (bullet && computedIndentPt > 0) {
+        bullet.indent = computedIndentPt;
+        // Also support custom margin between bullet and text if provided in listConfig?
+        // For now, computedIndentPt covers the visual placement.
+      }
+
+      // 3. Extract Text Parts
+      const parts = collectListParts(child, liStyle, config.scale, globalOptions);
+
+      if (parts.length > 0) {
+        parts.forEach((p) => {
+          if (!p.options) p.options = {};
+        });
+
+        // A. Apply Bullet
+        // Workaround: pptxgenjs bullets inherit the style of the text run they are attached to.
+        // To support ::marker styles (color, size) that differ from the text, we create
+        // a "dummy" text run at the start of the list item that carries the bullet configuration.
+        if (bullet) {
+          const firstPartInfo = parts[0].options;
+
+          // Create a dummy run. We use a Zero Width Space to ensure it's rendered but invisible.
+          // This "run" will hold the bullet and its specific color/size.
+          const bulletRun = {
+            text: '\u200B',
+            options: {
+              ...firstPartInfo, // Inherit base props (fontFace, etc.)
+              color: bullet.color || firstPartInfo.color,
+              fontSize: bullet.fontSize || firstPartInfo.fontSize,
+              bullet: bullet
+            }
+          };
+
+          // Don't duplicate transparent or empty color from firstPart if bullet has one
+          if (bullet.color) bulletRun.options.color = bullet.color;
+          if (bullet.fontSize) bulletRun.options.fontSize = bullet.fontSize;
+
+          // Prepend
+          parts.unshift(bulletRun);
+        }
+
+        // B. Apply Spacing
+        let ptBefore = 0;
+        let ptAfter = 0;
+
+        // A. Check Global Options (Expected in Points)
+        if (globalOptions.listConfig?.spacing) {
+          if (typeof globalOptions.listConfig.spacing.before === 'number') {
+            ptBefore = globalOptions.listConfig.spacing.before;
+          }
+          if (typeof globalOptions.listConfig.spacing.after === 'number') {
+            ptAfter = globalOptions.listConfig.spacing.after;
+          }
+        }
+        // B. Fallback to CSS Margins (Convert px -> pt)
+        else {
+          const mt = parseFloat(liStyle.marginTop) || 0;
+          const mb = parseFloat(liStyle.marginBottom) || 0;
+          if (mt > 0) ptBefore = mt * 0.75 * config.scale;
+          if (mb > 0) ptAfter = mb * 0.75 * config.scale;
+        }
+
+        if (ptBefore > 0) parts[0].options.paraSpaceBefore = ptBefore;
+        if (ptAfter > 0) parts[0].options.paraSpaceAfter = ptAfter;
+
+        if (index < liChildren.length - 1) {
+          parts[parts.length - 1].options.breakLine = true;
+        }
+
+        listItems.push(...parts);
+      }
+    });
+
+    if (listItems.length > 0) {
+      // Add background if exists
+      const bgColorObj = parseColor(style.backgroundColor);
+      if (bgColorObj.hex && bgColorObj.opacity > 0) {
+        items.push({
+          type: 'shape',
+          zIndex,
+          domOrder,
+          shapeType: 'rect',
+          options: { x, y, w, h, fill: { color: bgColorObj.hex } },
+        });
+      }
+
+      items.push({
+        type: 'text',
+        zIndex: zIndex + 1,
+        domOrder,
+        textParts: listItems,
+        options: {
+          x,
+          y,
+          w,
+          h,
+          align: 'left',
+          valign: 'top',
+          margin: 0,
+          autoFit: false,
+          wrap: true,
+        },
+      });
+
+      return { items, stopRecursion: true };
+    }
+  }
+
+  if (node.tagName === 'CANVAS') {
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: { x, y, w, h, rotate: rotation, data: null }
+    };
+
+    const job = async () => {
+      try {
+        // Direct data extraction from the canvas element
+        // This preserves the exact current state of the chart
+        const dataUrl = node.toDataURL('image/png');
+
+        // Basic validation
+        if (dataUrl && dataUrl.length > 10) {
+          item.options.data = dataUrl;
+        } else {
+          item.skip = true;
+        }
+      } catch (e) {
+        // Tainted canvas (CORS issues) will throw here
+        console.warn('Failed to capture canvas content:', e);
+        item.skip = true;
+      }
+    };
+
+    return { items: [item], job, stopRecursion: true };
+  }
+
+  // --- ASYNC JOB: SVG Tags ---
+  if (node.nodeName.toUpperCase() === 'SVG') {
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: { data: null, x, y, w, h, rotate: rotation },
+    };
+
+    const job = async () => {
+      const processed = await svgToPng(node);
+      if (processed) item.options.data = processed;
+      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 objectFit = style.objectFit || 'fill'; // default CSS behavior is fill
+    const objectPosition = style.objectPosition || '50% 50%';
+
+    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,
+        objectFit,
+        objectPosition
+      );
+      if (processed) item.options.data = processed;
+      else item.skip = true;
+    };
+
+    return { items: [item], job, stopRecursion: true };
+  }
+
+  // --- ASYNC JOB: Icons and Other Elements ---
+  if (isIconElement(node)) {
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: { x, y, w, h, rotate: rotation, data: null },
+    };
+    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 };
+  }
+
+  // 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));
+
+  // --- PRIORITY SVG: Solid Fill with Partial Border Radius (Vector Cone/Tab) ---
+  // Fix for "missing cone": Prioritize SVG vector generation over Raster Canvas for simple shapes with partial radii.
+  // This avoids html2canvas failures on empty divs.
+  const tempBg = parseColor(style.backgroundColor);
+  const isTxt = isTextContainer(node);
+
+  if (hasPartialBorderRadius && tempBg.hex && !isTxt) {
+    const shapeSvg = generateCustomShapeSVG(
+      widthPx,
+      heightPx,
+      tempBg.hex,
+      tempBg.opacity,
+      {
+        tl: parseFloat(style.borderTopLeftRadius) || 0,
+        tr: parseFloat(style.borderTopRightRadius) || 0,
+        br: parseFloat(style.borderBottomRightRadius) || 0,
+        bl: parseFloat(style.borderBottomLeftRadius) || 0,
+      }
+    );
+
+    return {
+      items: [{
+        type: 'image',
+        zIndex,
+        domOrder,
+        options: { data: shapeSvg, x, y, w, h, rotate: rotation },
+      }],
+      stopRecursion: true // Treat as leaf
+    };
+  }
+
+  // --- 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 = [];
+    let trimNextLeading = false;
+
+    node.childNodes.forEach((child, index) => {
+      // Handle <br> tags
+      if (child.tagName === 'BR') {
+        // 1. Trim trailing space from the *previous* text part to prevent double wrapping
+        if (textParts.length > 0) {
+          const lastPart = textParts[textParts.length - 1];
+          if (lastPart.text && typeof lastPart.text === 'string') {
+            lastPart.text = lastPart.text.trimEnd();
+          }
+        }
+
+        textParts.push({ text: '', options: { breakLine: true } });
+
+        // 2. Signal to trim leading space from the *next* text part
+        trimNextLeading = true;
+        return;
+      }
+
+      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, ' ');
+
+      // Trimming logic
+      if (index === 0) textVal = textVal.trimStart();
+      if (trimNextLeading) {
+        textVal = textVal.trimStart();
+        trimNextLeading = false;
+      }
+
+      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) {
+        const textOpts = getTextStyle(nodeStyle, config.scale, textVal, globalOptions);
+
+        // BUG FIX: Numbers 1 and 2 having background.
+        // If this is a naked Text Node (nodeType 3), it inherits style from the parent container.
+        // The parent container's background is already rendered as the Shape Fill.
+        // We must NOT render it again as a Text Highlight, otherwise it looks like a solid marker on top of the shape.
+        if (child.nodeType === 3 && textOpts.highlight) {
+          delete textOpts.highlight;
+        }
+
+        textParts.push({ text: textVal, options: textOpts });
+      }
+    });
+
+    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) {
+      textPayload.text[0].options.fontSize =
+        Math.floor(textPayload.text[0]?.options?.fontSize) || 12;
+      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);
+
+      // 1. Calculate dimensions first
+      const minDimension = Math.min(widthPx, heightPx);
+
+      let rawRadius = parseFloat(style.borderRadius) || 0;
+      const isPercentage = style.borderRadius && style.borderRadius.toString().includes('%');
+
+      // 2. Normalize radius to pixels
+      let radiusPx = rawRadius;
+      if (isPercentage) {
+        radiusPx = (rawRadius / 100) * minDimension;
+      }
+
+      let shapeType = pptx.ShapeType.rect;
+
+      // 3. Determine Shape Logic
+      const isSquare = Math.abs(widthPx - heightPx) < 1;
+      const isFullyRound = radiusPx >= minDimension / 2;
+
+      // CASE A: It is an Ellipse if:
+      // 1. It is explicitly "50%" (standard CSS way to make ovals/circles)
+      // 2. OR it is a perfect square and fully rounded (a circle)
+      if (isFullyRound && (isPercentage || isSquare)) {
+        shapeType = pptx.ShapeType.ellipse;
+      }
+      // CASE B: It is a Rounded Rectangle (including "Pill" shapes)
+      else if (radiusPx > 0) {
+        shapeType = pptx.ShapeType.roundRect;
+        let r = radiusPx / minDimension;
+        if (r > 0.5) r = 0.5;
+        if (minDimension < 100) r = r * 0.25; // Small size adjustment for small shapes
+
+        shapeOpts.rectRadius = r;
+      }
+
+      if (textPayload) {
+        textPayload.text[0].options.fontSize =
+          Math.floor(textPayload.text[0]?.options?.fontSize) || 12;
+        const textOptions = {
+          shape: shapeType,
+          ...shapeOpts,
+          rotate: rotation,
+          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 isComplexHierarchy(root) {
+  // Use a simple tree traversal to find forbidden elements in the list structure
+  if (root?.getAttribute?.('data-pptx-list') === 'complex') return true;
+
+  const stack = [root];
+  while (stack.length > 0) {
+    const el = stack.pop();
+
+    // 1. Layouts: Flex/Grid on LIs
+    if (el.tagName === 'LI') {
+      const s = window.getComputedStyle(el);
+      if (s.display === 'flex' || s.display === 'grid' || s.display === 'inline-flex') return true;
+
+      // Custom list items (e.g., list-style: none + structured children)
+      const listStyleType = s.listStyleType || s.listStyle;
+      if (listStyleType === 'none') {
+        const hasStructuredChild = Array.from(el.children).some((child) => {
+          const cs = window.getComputedStyle(child);
+          const display = cs.display || '';
+          if (!display.includes('inline')) return true;
+
+          const bg = parseColor(cs.backgroundColor);
+          if (bg.hex && bg.opacity > 0) return true;
+
+          const bw = parseFloat(cs.borderWidth) || 0;
+          const bc = parseColor(cs.borderColor);
+          if (bw > 0 && bc.opacity > 0) return true;
+
+          return false;
+        });
+
+        if (hasStructuredChild) return true;
+      }
+    }
+
+    // 2. Media / Icons
+    if (['IMG', 'SVG', 'CANVAS', 'VIDEO', 'IFRAME'].includes(el.tagName)) return true;
+    if (isIconElement(el)) return true;
+
+    // 3. Nested Lists (Flattening logic doesn't support nested bullets well yet)
+    if (el !== root && (el.tagName === 'UL' || el.tagName === 'OL')) return true;
+
+    // Recurse, but don't go too deep if not needed
+    for (let i = 0; i < el.children.length; i++) {
+      stack.push(el.children[i]);
+    }
+  }
+  return false;
+}
+
+function collectListParts(node, parentStyle, scale, globalOptions) {
+  const parts = [];
+
+  // Check for CSS Content (::before) - often used for icons
+  if (node.nodeType === 1) {
+    const beforeStyle = window.getComputedStyle(node, '::before');
+    const content = beforeStyle.content;
+    if (content && content !== 'none' && content !== 'normal' && content !== '""') {
+      // Strip quotes
+      const cleanContent = content.replace(/^['"]|['"]$/g, '');
+      if (cleanContent.trim()) {
+        parts.push({
+          text: cleanContent + ' ', // Add space after icon
+          options: getTextStyle(window.getComputedStyle(node), scale, cleanContent, globalOptions),
+        });
+      }
+    }
+  }
+
+  node.childNodes.forEach((child) => {
+    if (child.nodeType === 3) {
+      // Text
+      const val = child.nodeValue.replace(/[\n\r\t]+/g, ' ').replace(/\s{2,}/g, ' ');
+      if (val) {
+        // Use parent style if child is text node, otherwise current style
+        const styleToUse = node.nodeType === 1 ? window.getComputedStyle(node) : parentStyle;
+        parts.push({
+          text: val,
+          options: getTextStyle(styleToUse, scale, val, globalOptions),
+        });
+      }
+    } else if (child.nodeType === 1) {
+      // Element (span, i, b)
+      // Recurse
+      parts.push(...collectListParts(child, parentStyle, scale, globalOptions));
+    }
+  });
+
+  return parts;
+}
+
+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;
+//# sourceMappingURL=dom-to-pptx.cjs.map