@microlee666/dom-to-pptx 1.1.4 → 1.1.5

package/cli/dom-to-pptx.bundle.js

@@ -7713,7 +7713,7 @@
    * @param {number} b - blue value
    * @returns {string} XML string
    */
-  function rgbToHex(r, g, b) {
+  function rgbToHex$1(r, g, b) {
       return (componentToHex(r) + componentToHex(g) + componentToHex(b)).toUpperCase();
   }
   /**  TODO: FUTURE: TODO-4.0:
@@ -8460,8 +8460,8 @@
                       bold: !!(window.getComputedStyle(cell).getPropertyValue('font-weight') === 'bold' ||
                           Number(window.getComputedStyle(cell).getPropertyValue('font-weight')) >= 500),
                       border: null,
-                      color: rgbToHex(Number(arrRGB1[0]), Number(arrRGB1[1]), Number(arrRGB1[2])),
-                      fill: { color: rgbToHex(Number(arrRGB2[0]), Number(arrRGB2[1]), Number(arrRGB2[2])) },
+                      color: rgbToHex$1(Number(arrRGB1[0]), Number(arrRGB1[1]), Number(arrRGB1[2])),
+                      fill: { color: rgbToHex$1(Number(arrRGB2[0]), Number(arrRGB2[1]), Number(arrRGB2[2])) },
                       fontFace: (window.getComputedStyle(cell).getPropertyValue('font-family') || '').split(',')[0].replace(/"/g, '').replace('inherit', '').replace('initial', '') ||
                           null,
                       fontSize: Number(window.getComputedStyle(cell).getPropertyValue('font-size').replace(/[a-z]/gi, '')),
@@ -8508,7 +8508,7 @@
                               .replace('rgb(', '')
                               .replace(')', '')
                               .split(',');
-                          var strBorderC = rgbToHex(Number(arrRGB[0]), Number(arrRGB[1]), Number(arrRGB[2]));
+                          var strBorderC = rgbToHex$1(Number(arrRGB[0]), Number(arrRGB[1]), Number(arrRGB[2]));
                           cellOpts.border[idxb] = { pt: intBorderW, color: strBorderC };
                       });
                   }
@@ -12981,7 +12981,8 @@
           bodyProperties += ' rtlCol="0"';
           // D: Add anchorPoints
           if (slideObject.options._bodyProp.anchor)
-              bodyProperties += ' anchor="' + slideObject.options._bodyProp.anchor + '"'; // VALS: [t,ctr,b]
+              bodyProperties += ' anchor="' + slideObject.options._bodyProp.anchor + '"'; // VALS: [t,ctr,b]
+          if (slideObject.options._bodyProp.anchor === 'ctr') bodyProperties += ' anchorCtr=\"1\"';
           if (slideObject.options._bodyProp.vert)
               bodyProperties += ' vert="' + slideObject.options._bodyProp.vert + '"'; // VALS: [eaVert,horz,mongolianVert,vert,vert270,wordArtVert,wordArtVertRtl]
           // E: Close <a:bodyPr element
@@ -54216,9 +54217,9 @@
 
   var ttftowoff2 = {};
 
-  var __dirname$1 = '/Contributions/dom-to-pptx';
+  var __dirname$1 = '/Volumes/OuterHD/OuterIdeaProjects/dom-to-pptx/node_modules/fonteditor-core/woff2';
 
-  var __dirname = '/Contributions/dom-to-pptx';
+  var __dirname = '/Volumes/OuterHD/OuterIdeaProjects/dom-to-pptx/node_modules/fonteditor-core/woff2';
 
   var woff2$1 = {exports: {}};
 
@@ -62445,9 +62446,10 @@
   /**
    * Extracts native table data for PptxGenJS.
    */
-  function extractTableData(node, scale) {
+  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.
@@ -62476,11 +62478,10 @@
         const cellText = cell.innerText.replace(/[\n\r\t]+/g, ' ').trim();
 
         // A. Text Style
-        const textStyle = getTextStyle(style, scale);
+        const textStyle = getTextStyle(style, scale, cellText, options);
 
         // B. Cell Background
-        const bg = parseColor(style.backgroundColor);
-        const fill = (bg.hex && bg.opacity > 0) ? { color: bg.hex } : null;
+        const fill = computeTableCellFill(style, cell, root, options);
 
         // C. Alignment
         let align = 'left';
@@ -62520,6 +62521,7 @@
             bold: textStyle.bold,
             italic: textStyle.italic,
             underline: textStyle.underline,
+            lang: 'zh-CN',
 
             fill: fill,
             align: align,
@@ -62594,11 +62596,11 @@
     // 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;
+      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)?)$/, '');
+      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;
@@ -62613,6 +62615,73 @@
     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.
    */
@@ -62802,6 +62871,214 @@
     return { hex, opacity: a };
   }
 
+  const SUPPORTED_CHART_TYPES = new Set(['area', 'bar', 'line', 'pie', 'doughnut', 'radar', 'scatter']);
+  const CHART_TYPE_ALIASES = {
+    column: 'bar',
+    columnbar: 'bar',
+    column3d: 'bar',
+    bar3d: 'bar',
+    donut: 'doughnut',
+    ring: 'doughnut',
+  };
+
+  function normalizeLegendPos(value) {
+    if (!value) return null;
+    const normalized = value.toString().toLowerCase().replace(/[^a-z]/g, '');
+    if (normalized === 'tr' || normalized === 'topright') return 'tr';
+    if (normalized === 'top') return 't';
+    if (normalized === 'bottom') return 'b';
+    if (normalized === 'left') return 'l';
+    if (normalized === 'right') return 'r';
+    return null;
+  }
+
+  function normalizeChartType(value) {
+    if (!value) return null;
+    const raw = value.toString().trim().toLowerCase();
+    const alias = CHART_TYPE_ALIASES[raw];
+    const candidate = alias || raw;
+    return SUPPORTED_CHART_TYPES.has(candidate) ? candidate : null;
+  }
+
+  function colorToHex(value) {
+    const parsed = parseColor(value);
+    return parsed.hex || null;
+  }
+
+  function resolveChartElement(root, config) {
+    if (!config) return null;
+    if (config.element instanceof HTMLElement) return config.element;
+    if (typeof config.element === 'function') return config.element(root);
+    if (typeof config.selector === 'string') {
+      return root.querySelector(config.selector);
+    }
+    return null;
+  }
+
+  function buildSeriesFromSource(source = {}) {
+    const fallbackLabels = Array.isArray(source.labels) ? source.labels : [];
+    const candidateDatasets = Array.isArray(source.datasets) ? source.datasets : [];
+    const series = [];
+
+    candidateDatasets.forEach((dataset, index) => {
+      if (!dataset) return;
+      const values = Array.isArray(dataset.values)
+        ? dataset.values
+        : Array.isArray(dataset.data)
+          ? dataset.data
+          : [];
+
+      if (!values.length) return;
+
+      const record = {
+        name: dataset.name || dataset.label || `Series ${index + 1}`,
+        values,
+      };
+
+      if (Array.isArray(dataset.labels) && dataset.labels.length === values.length) {
+        record.labels = dataset.labels;
+      } else if (fallbackLabels.length === values.length) {
+        record.labels = fallbackLabels;
+      }
+
+      if (Array.isArray(dataset.sizes) && dataset.sizes.length === values.length) {
+        record.sizes = dataset.sizes;
+      }
+
+      // Chart.js often provides strings/arrays in backgroundColor
+      const candidateColor =
+        dataset.color || dataset.backgroundColor || dataset.borderColor || dataset.fillColor;
+      if (candidateColor) {
+        if (Array.isArray(candidateColor)) {
+          record.color = candidateColor[0];
+        } else {
+          record.color = candidateColor;
+        }
+      }
+
+      series.push(record);
+    });
+
+    if (!series.length) {
+      const fallbackValues = Array.isArray(source.values)
+        ? source.values
+        : Array.isArray(source.data)
+          ? source.data
+          : [];
+
+      if (fallbackValues.length) {
+        const fallbackRecord = {
+          name: source.name || source.label || 'Series 1',
+          values: fallbackValues,
+        };
+        if (Array.isArray(source.labels) && source.labels.length === fallbackValues.length) {
+          fallbackRecord.labels = source.labels;
+        } else if (fallbackLabels.length === fallbackValues.length) {
+          fallbackRecord.labels = fallbackLabels;
+        }
+        if (Array.isArray(source.sizes) && source.sizes.length === fallbackValues.length) {
+          fallbackRecord.sizes = source.sizes;
+        }
+        if (source.color) {
+          fallbackRecord.color = source.color;
+        }
+        series.push(fallbackRecord);
+      }
+    }
+
+    return series;
+  }
+
+  function buildChartOptions(raw, derivedColors) {
+    const opts = { ...((raw && raw.chartOptions) || {}) };
+    if (raw && raw.showLegend !== undefined) opts.showLegend = raw.showLegend;
+    if (raw) {
+      const legendTarget = raw.legendPos || raw.legendPosition;
+      const normalizedLegend = normalizeLegendPos(legendTarget);
+      if (normalizedLegend) opts.legendPos = normalizedLegend;
+    }
+    if (raw && raw.title) opts.title = raw.title;
+    if (raw && raw.altText) opts.altText = raw.altText;
+    if (raw && raw.showDataTable !== undefined) opts.showDataTable = raw.showDataTable;
+    if (raw && raw.chartColorsOpacity !== undefined) opts.chartColorsOpacity = raw.chartColorsOpacity;
+    if (raw && raw.showLabel !== undefined) opts.showLabel = raw.showLabel;
+
+    const paletteFromConfig =
+      raw && Array.isArray(raw.chartColors) ? raw.chartColors.map(colorToHex).filter(Boolean) : [];
+    const palette = paletteFromConfig.length ? paletteFromConfig : derivedColors;
+    if (palette.length && !opts.chartColors) {
+      opts.chartColors = palette;
+    }
+
+    return opts;
+  }
+
+  function normalizeChartConfig(raw) {
+    if (!raw) return null;
+    const chartType = normalizeChartType(raw.chartType || raw.type || raw.chart);
+    if (!chartType) return null;
+
+    let seriesWithColor = [];
+    if (Array.isArray(raw.chartData) && raw.chartData.length) {
+      seriesWithColor = raw.chartData
+        .map((entry, index) => {
+          if (!entry || !Array.isArray(entry.values)) return null;
+          return {
+            ...entry,
+            name: entry.name || entry.label || `Series ${index + 1}`,
+          };
+        })
+        .filter((entry) => entry && entry.values && entry.values.length);
+    } else {
+      const source = {
+        labels: raw.data?.labels || raw.labels,
+        datasets: Array.isArray(raw.data?.datasets)
+          ? raw.data.datasets
+          : Array.isArray(raw.datasets)
+            ? raw.datasets
+            : [],
+        values: raw.data?.values || raw.values,
+        data: raw.data?.data,
+        name: raw.name,
+        label: raw.label,
+        color: raw.color,
+        sizes: raw.data?.sizes || raw.sizes,
+      };
+      seriesWithColor = buildSeriesFromSource(source);
+    }
+
+    if (!seriesWithColor.length) return null;
+
+    const derivedColors = seriesWithColor
+      .map((dataset) => dataset.color)
+      .map(colorToHex)
+      .filter(Boolean);
+
+    const chartOptions = buildChartOptions(raw, derivedColors);
+    const chartData = seriesWithColor.map(({ color, ...rest }) => rest);
+
+    return {
+      chartType,
+      chartData,
+      chartOptions,
+    };
+  }
+
+  function buildChartRegistry(root, chartConfigs = []) {
+    const registry = new Map();
+    if (!root || !Array.isArray(chartConfigs)) return registry;
+
+    chartConfigs.forEach((config) => {
+      const node = resolveChartElement(root, config);
+      if (!node) return;
+      const normalized = normalizeChartConfig(config);
+      if (!normalized || !normalized.chartData || !normalized.chartData.length) return;
+      registry.set(node, normalized);
+    });
+
+    return registry;
+  }
+
   function getPadding(style, scale) {
     const pxToInch = 1 / 96;
     return [
@@ -62819,7 +63096,64 @@
     return null;
   }
 
-  function getTextStyle(style, scale) {
+  const DEFAULT_CJK_FONTS = [
+    'Heiti TC',
+    'Heiti SC',
+    '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 || 'Heiti TC';
+  }
+
+  function getTextStyle(style, scale, text = '', options = {}) {
     let colorObj = parseColor(style.color);
 
     const bgClip = style.webkitBackgroundClip || style.backgroundClip;
@@ -62847,6 +63181,9 @@
         // And apply the global layout scale.
         lineSpacing = lhPx * 0.75 * scale;
       }
+    } else {
+      // Default line height when 'normal' - use 1.2 multiplier to match browser default
+      lineSpacing = fontSizePx * 1.2 * 0.75 * scale;
     }
 
     // --- Spacing (Margins) ---
@@ -62860,13 +63197,16 @@
     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: style.fontFamily.split(',')[0].replace(/['"]/g, ''),
-      fontSize: Math.floor(fontSizePx * 0.75 * scale),
+      fontFace: fontFace,
+      fontSize: Math.max(8, Math.floor(fontSizePx * 0.75 * scale)),
       bold: parseInt(style.fontWeight) >= 600,
       italic: style.fontStyle === 'italic',
       underline: style.textDecoration.includes('underline'),
+      lang: 'zh-CN',
       // Only add if we have a valid value
       ...(lineSpacing && { lineSpacing }),
       ...(paraSpaceBefore > 0 && { paraSpaceBefore }),
@@ -62879,6 +63219,7 @@
   /**
    * Determines if a given DOM node is primarily a text container.
    * Updated to correctly reject Icon elements so they are rendered as images.
+   * Also rejects flex/grid containers with distributed children (space-between/around/evenly).
    */
   function isTextContainer(node) {
     const hasText = node.textContent.trim().length > 0;
@@ -62887,6 +63228,26 @@
     const children = Array.from(node.children);
     if (children.length === 0) return true;
 
+    // Check if parent is a flex/grid container with special layout
+    // In such cases, children should be treated as separate elements
+    const parentStyle = window.getComputedStyle(node);
+    const display = parentStyle.display;
+    const justifyContent = parentStyle.justifyContent || '';
+    parentStyle.alignItems || '';
+
+    // If parent uses flex/grid with space distribution, don't treat as text container
+    if ((display.includes('flex') || display.includes('grid')) &&
+        (justifyContent.includes('space-between') ||
+         justifyContent.includes('space-around') ||
+         justifyContent.includes('space-evenly'))) {
+      return false;
+    }
+
+    // Note: We don't skip text container for align-items: center here.
+    // The valign inheritance is handled in prepareRenderItem with single-child check.
+    // This allows elements like "密钥状态流转" to properly inherit center alignment
+    // while preventing STEP 1/2/3 from being incorrectly centered.
+
     const isSafeInline = (el) => {
       // 1. Reject Web Components / Custom Elements
       if (el.tagName.includes('-')) return false;
@@ -62934,6 +63295,11 @@
         return false;
       }
 
+      // If element has background/border and is not inline, treat as layout block
+      if ((hasVisibleBg || hasBorder) && !isInlineDisplay) {
+        return false;
+      }
+
       return true;
     };
 
@@ -63229,10 +63595,8 @@
       if (node.nodeType === 1) {
         // Element
         const style = window.getComputedStyle(node);
-        const fontList = style.fontFamily.split(',');
-        // The first font in the stack is the primary one
-        const primary = fontList[0].trim().replace(/['"]/g, '');
-        if (primary) families.add(primary);
+        const fontList = normalizeFontList(style.fontFamily);
+        fontList.forEach((f) => families.add(f));
       }
       for (const child of node.childNodes) {
         scan(child);
@@ -63442,6 +63806,60 @@
   const PPI = 96;
   const PX_TO_INCH = 1 / PPI;
 
+  /**
+   * Fix Chinese font attributes (pitchFamily and charset) in PPTX XML.
+   * PptxGenJS sometimes generates incorrect charset="0" for East Asian fonts.
+   * @param {Blob} blob - The PPTX blob
+   * @returns {Promise<Blob>} - Fixed PPTX blob
+   */
+  async function fixChineseFontAttributes(blob) {
+    const zip = await JSZip.loadAsync(blob);
+    const cjkFonts = ['Heiti TC', 'Heiti SC', 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun'];
+
+    // Process all slide XML files
+    const slideFiles = Object.keys(zip.files).filter(name =>
+      name.startsWith('ppt/slides/slide') && name.endsWith('.xml')
+    );
+
+    for (const slidePath of slideFiles) {
+      let xml = await zip.file(slidePath).async('text');
+      let modified = false;
+
+      // Fix <a:ea> and <a:cs> tags for CJK fonts
+      // Replace tags that have charset="0" (incorrect for CJK) with proper values
+      for (const fontName of cjkFonts) {
+        // Fix <a:ea> - East Asian font
+        const eaPattern = new RegExp(
+          `<a:ea typeface="${fontName}"[^>]*>`,
+          'g'
+        );
+        xml = xml.replace(eaPattern, `<a:ea typeface="${fontName}" pitchFamily="34" charset="-122"/>`);
+
+        // Fix <a:cs> - Complex Script font
+        const csPattern = new RegExp(
+          `<a:cs typeface="${fontName}"[^>]*>`,
+          'g'
+        );
+        xml = xml.replace(csPattern, `<a:cs typeface="${fontName}" pitchFamily="34" charset="-120"/>`);
+
+        // Fix <a:latin> - Latin font (if it's a CJK font used as Latin)
+        const latinPattern = new RegExp(
+          `<a:latin typeface="${fontName}"[^>]*>`,
+          'g'
+        );
+        xml = xml.replace(latinPattern, `<a:latin typeface="${fontName}" pitchFamily="34" charset="0"/>`);
+      }
+      modified = true;
+
+      if (modified) {
+        zip.file(slidePath, xml);
+      }
+    }
+
+    // Generate new blob
+    return await zip.generateAsync({ type: 'blob' });
+  }
+
   /**
    * Main export function.
    * @param {HTMLElement | string | Array<HTMLElement | string>} target
@@ -63466,6 +63884,7 @@
     if (!PptxConstructor) throw new Error('PptxGenJS constructor not found.');
     const pptx = new PptxConstructor();
     pptx.layout = 'LAYOUT_16x9';
+    pptx.language = 'zh-CN';
 
     const elements = Array.isArray(target) ? target : [target];
 
@@ -63540,6 +63959,9 @@
       finalBlob = await pptx.write({ outputType: 'blob' });
     }
 
+    // Fix Chinese font attributes (pitchFamily and charset) in all slide XMLs
+    finalBlob = await fixChineseFontAttributes(finalBlob);
+
     // 4. Output Handling
     // If skipDownload is NOT true, proceed with browser download
     if (!options.skipDownload) {
@@ -63581,6 +64003,9 @@
       offY: (PPTX_HEIGHT_IN - contentHeightIn * scale) / 2,
     };
 
+    const chartRegistry = buildChartRegistry(root, globalOptions.chartConfigs);
+    const slideOptions = { ...globalOptions, chartRegistry };
+
     const renderQueue = [];
     const asyncTasks = []; // Queue for heavy operations (Images, Canvas)
     let domOrderCounter = 0;
@@ -63616,7 +64041,7 @@
         pptx,
         currentZ,
         nodeStyle,
-        globalOptions
+        slideOptions
       );
 
       if (result) {
@@ -63662,6 +64087,10 @@
       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 === 'chart') {
+        const chartType = PptxGenJS.ChartType?.[item.chartType] ?? item.chartType;
+        slide.addChart(chartType, item.chartData, item.options);
+      }
       if (item.type === 'table') {
         slide.addTable(item.tableData.rows, {
           x: item.options.x,
@@ -63862,13 +64291,23 @@
       range.detach();
 
       const style = window.getComputedStyle(parent);
-      const widthPx = rect.width;
-      const heightPx = rect.height;
+      // Use parent element's rect for better width calculation
+      // This is especially important for flex children where text node rect may be too narrow
+      const parentRect = parent.getBoundingClientRect();
+      const useParentRect = parentRect.width > rect.width;
+      let widthPx = useParentRect ? parentRect.width : rect.width;
+      const heightPx = useParentRect ? parentRect.height : rect.height;
+
+      // Add extra width buffer to prevent text wrapping in PPTX due to font rendering differences
+      // Chinese characters and certain fonts need more space in PPTX than in browser
+      widthPx = widthPx * 1.3; // Add 30% extra width
       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;
+      // Use parent rect's position if we're using parent dimensions
+      const sourceRect = useParentRect ? parentRect : rect;
+      const x = config.offX + (sourceRect.left - config.rootX) * PX_TO_INCH * config.scale;
+      const y = config.offY + (sourceRect.top - config.rootY) * PX_TO_INCH * config.scale;
 
       return {
         items: [
@@ -63879,7 +64318,14 @@
             textParts: [
               {
                 text: textContent,
-                options: getTextStyle(style, config.scale),
+                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 },
@@ -63900,7 +64346,7 @@
     const elementOpacity = parseFloat(style.opacity);
     const safeOpacity = isNaN(elementOpacity) ? 1 : elementOpacity;
 
-    const widthPx = node.offsetWidth || rect.width;
+    let 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;
@@ -63914,13 +64360,75 @@
 
     const items = [];
 
-    if (node.tagName === 'TABLE') {
-      const tableData = extractTableData(node, config.scale);
+    const chartConfig = globalOptions.chartRegistry?.get(node);
+    if (chartConfig) {
+      const chartOptions = {
+        ...chartConfig.chartOptions,
+        x,
+        y,
+        w: unrotatedW,
+        h: unrotatedH,
+      };
+
+      return {
+        items: [
+          {
+            type: 'chart',
+            zIndex: effectiveZIndex,
+            domOrder,
+            chartType: chartConfig.chartType,
+            chartData: chartConfig.chartData,
+            options: chartOptions,
+          },
+        ],
+        stopRecursion: true,
+      };
+    }
+
+    // --- Handle both native TABLE and div-based table structures ---
+    const isTableLike = node.tagName === 'TABLE' || detectTableLikeStructure(node);
+    if (isTableLike) {
+      let tableData;
+      if (node.tagName === 'TABLE') {
+        tableData = extractTableData(node, config.scale, { ...globalOptions, root: config.root });
+      } else {
+        // Extract data from div-based table structure
+        tableData = extractDivTableData(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,
@@ -64012,7 +64520,7 @@
         }
 
         // 3. Extract Text Parts
-        const parts = collectListParts(child, liStyle, config.scale);
+        const parts = collectListParts(child, liStyle, config.scale, globalOptions);
 
         if (parts.length > 0) {
           parts.forEach((p) => {
@@ -64230,6 +64738,35 @@
       return { items: [item], job, stopRecursion: true };
     }
 
+    // --- Handle vertical stat cards (like .mini-stat with number + label) ---
+    if (isVerticalStatCard(node)) {
+      // Capture the entire stat card as an image to preserve vertical layout
+      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 };
+    }
+
+    // --- Handle absolutely positioned children that overflow parent ---
+    // Check if this element has absolutely positioned children that extend outside
+    const overflowingChildren = detectOverflowingChildren(node);
+    if (overflowingChildren.length > 0) {
+      // Process this node normally, but also capture overflowing children separately
+      const baseResult = processOverflowingContent(
+        node, overflowingChildren, config, domOrder, pptx, zIndex);
+      if (baseResult) {
+        return baseResult;
+      }
+    }
+
     // Radii logic
     const borderRadiusValue = parseFloat(style.borderRadius) || 0;
     const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;
@@ -64332,6 +64869,27 @@
     let textPayload = null;
     const isText = isTextContainer(node);
 
+    // Add extra width buffer for inline text elements to prevent wrapping in PPTX
+    // This is especially needed for Chinese text and certain fonts
+    // Only apply to elements that are direct children of flex containers with space distribution
+    // and don't have a parent with visible background (to avoid overflowing card boundaries)
+    if (isText && !bgColorObj.hex && !hasBorder && !hasShadow) {
+      const parentEl = node.parentElement;
+      if (parentEl) {
+        const parentStyle = window.getComputedStyle(parentEl);
+        const parentDisplay = parentStyle.display || '';
+        const parentJustify = parentStyle.justifyContent || '';
+        const isFlexWithSpaceDist = (parentDisplay.includes('flex') || parentDisplay.includes('grid')) &&
+          (parentJustify.includes('space-between') || parentJustify.includes('space-around') || parentJustify.includes('space-evenly'));
+
+        if (isFlexWithSpaceDist) {
+          widthPx = widthPx * 1.3; // Add 30% extra width
+          // Recalculate w with the new width
+          w = widthPx * PX_TO_INCH * config.scale;
+        }
+      }
+    }
+
     if (isText) {
       const textParts = [];
       let trimNextLeading = false;
@@ -64370,7 +64928,7 @@
         if (nodeStyle.textTransform === 'lowercase') textVal = textVal.toLowerCase();
 
         if (textVal.length > 0) {
-          const textOpts = getTextStyle(nodeStyle, config.scale);
+          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.
@@ -64388,8 +64946,71 @@
         let align = style.textAlign || 'left';
         if (align === 'start') align = 'left';
         if (align === 'end') align = 'right';
+
+        // Fix: If this element is a flex/grid child and has no explicit text-align,
+        // force left alignment to match HTML default behavior
+        if (node.parentElement && (!style.textAlign || style.textAlign === 'start')) {
+          const parentStyle = window.getComputedStyle(node.parentElement);
+          if (parentStyle.display.includes('flex') || parentStyle.display.includes('grid')) {
+            align = 'left';
+          }
+        }
+
+        // Detect badge/pill buttons (high border-radius + short text) and auto-center them
+        const borderRadius = parseFloat(style.borderRadius) || 0;
+        const height = parseFloat(style.height) || node.offsetHeight;
+        const textContent = node.textContent.trim();
+        const className = (node.className || '').toLowerCase();
+
+        // Real badges/pills typically have visible styling (background, border, or large border-radius)
+        const hasVisibleBackground = bgColorObj.hex && bgColorObj.opacity > 0.1;
+        const hasVisibleBorder = borderWidth > 0;
+        const hasLargeBorderRadius = borderRadius >= height / 2;
+        const hasBadgeClass = className.includes('badge') || className.includes('pill');
+
+        // Only consider it a badge if it has visual styling AND short text
+        const isLikelyBadge =
+          (hasLargeBorderRadius || hasBadgeClass) &&
+          textContent.length <= 10 &&
+          (hasVisibleBackground || hasVisibleBorder || hasLargeBorderRadius);
+
+        if (isLikelyBadge) {
+          align = 'center';
+        }
+
         let valign = 'top';
-        if (style.alignItems === 'center') valign = 'middle';
+
+        // For flex items, valign should be determined by PARENT's align-items, not self
+        // Self's align-items controls how children are aligned, not self's position in parent
+        const parentEl = node.parentElement;
+        if (parentEl) {
+          const parentStyle = window.getComputedStyle(parentEl);
+          if (parentStyle.display.includes('flex')) {
+            // Parent's align-items controls this element's cross-axis alignment
+            if (parentStyle.alignItems === 'center') {
+              valign = 'middle';
+            } else if (parentStyle.alignItems === 'flex-end' || parentStyle.alignItems === 'end') {
+              valign = 'bottom';
+            }
+            // Default (stretch, flex-start) keeps valign = 'top'
+          }
+        }
+
+        // If element is not a flex item (no flex parent), then its own align-items
+        // might indicate self-centering intent for single-element containers
+        if (valign === 'top' && style.alignItems === 'center' && !parentEl) {
+          valign = 'middle';
+        }
+
+        // Auto-center vertically for likely badges
+        if (isLikelyBadge && valign !== 'middle') {
+          const paddingTop = parseFloat(style.paddingTop) || 0;
+          const paddingBottom = parseFloat(style.paddingBottom) || 0;
+          // If padding is relatively even, assume vertical centering is intended
+          if (Math.abs(paddingTop - paddingBottom) <= 4) {
+            valign = 'middle';
+          }
+        }
         if (style.justifyContent === 'center' && style.display.includes('flex')) align = 'center';
 
         const pt = parseFloat(style.paddingTop) || 0;
@@ -64613,6 +65234,8 @@
 
   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();
@@ -64621,6 +65244,27 @@
       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
@@ -64638,7 +65282,7 @@
     return false;
   }
 
-  function collectListParts(node, parentStyle, scale) {
+  function collectListParts(node, parentStyle, scale, globalOptions) {
     const parts = [];
 
     // Check for CSS Content (::before) - often used for icons
@@ -64651,7 +65295,7 @@
         if (cleanContent.trim()) {
           parts.push({
             text: cleanContent + ' ', // Add space after icon
-            options: getTextStyle(window.getComputedStyle(node), scale),
+            options: getTextStyle(window.getComputedStyle(node), scale, cleanContent, globalOptions),
           });
         }
       }
@@ -64666,13 +65310,13 @@
           const styleToUse = node.nodeType === 1 ? window.getComputedStyle(node) : parentStyle;
           parts.push({
             text: val,
-            options: getTextStyle(styleToUse, scale),
+            options: getTextStyle(styleToUse, scale, val, globalOptions),
           });
         }
       } else if (child.nodeType === 1) {
         // Element (span, i, b)
         // Recurse
-        parts.push(...collectListParts(child, parentStyle, scale));
+        parts.push(...collectListParts(child, parentStyle, scale, globalOptions));
       }
     });
 
@@ -64726,6 +65370,283 @@
     return items;
   }
 
+  /**
+   * Detect absolutely positioned children that overflow their parent
+   * This handles cases like chart value labels positioned above bars
+   */
+  function detectOverflowingChildren(node) {
+    const overflowing = [];
+    const parentRect = node.getBoundingClientRect();
+
+    // Only check for elements with specific class patterns that suggest chart values
+    const children = node.querySelectorAll('.bar-value, [class*="value"], [class*="label"]');
+
+    children.forEach(child => {
+      const childStyle = window.getComputedStyle(child);
+      const childRect = child.getBoundingClientRect();
+
+      // Check if absolutely positioned and outside parent bounds
+      if (childStyle.position === 'absolute') {
+        const isOutside =
+          childRect.bottom < parentRect.top ||
+          childRect.top > parentRect.bottom ||
+          childRect.right < parentRect.left ||
+          childRect.left > parentRect.right;
+
+        if (isOutside || childRect.top < parentRect.top) {
+          overflowing.push(child);
+        }
+      }
+    });
+
+    return overflowing;
+  }
+
+  /**
+   * Process content with overflowing children
+   * Captures the entire visual area including overflowing elements
+   */
+  function processOverflowingContent(node, overflowingChildren, config, domOrder, pptx, zIndex, style, globalOptions) {
+    // Calculate bounding box that includes all overflowing children
+    const rect = node.getBoundingClientRect();
+    let minX = rect.left;
+    let minY = rect.top;
+    let maxX = rect.right;
+    let maxY = rect.bottom;
+
+    overflowingChildren.forEach(child => {
+      const childRect = child.getBoundingClientRect();
+      minX = Math.min(minX, childRect.left);
+      minY = Math.min(minY, childRect.top);
+      maxX = Math.max(maxX, childRect.right);
+      maxY = Math.max(maxY, childRect.bottom);
+    });
+
+    const totalWidth = maxX - minX;
+    const totalHeight = maxY - minY;
+
+    // Use html2canvas to capture the entire area
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: {
+        x: config.offX + (minX - config.rootX) * PX_TO_INCH * config.scale,
+        y: config.offY + (minY - config.rootY) * PX_TO_INCH * config.scale,
+        w: totalWidth * PX_TO_INCH * config.scale,
+        h: totalHeight * PX_TO_INCH * config.scale,
+        data: null
+      }
+    };
+
+    const job = async () => {
+      try {
+        // Temporarily adjust node position for capture
+        const originalPosition = node.style.position;
+        const originalTransform = node.style.transform;
+
+        node.style.position = 'relative';
+        node.style.transform = 'none';
+
+        const canvas = await html2canvas(node, {
+          backgroundColor: null,
+          logging: false,
+          scale: 2,
+          useCORS: true,
+          x: minX - rect.left,
+          y: minY - rect.top,
+          width: totalWidth,
+          height: totalHeight
+        });
+
+        // Restore original styles
+        node.style.position = originalPosition;
+        node.style.transform = originalTransform;
+
+        item.options.data = canvas.toDataURL('image/png');
+      } catch (e) {
+        console.warn('Failed to capture overflowing content:', e);
+        item.skip = true;
+      }
+    };
+
+    return { items: [item], job, stopRecursion: true };
+  }
+
+  /**
+   * Detect vertical stat cards (like .mini-stat with number above label)
+   * These have block-level children that should stack vertically
+   */
+  function isVerticalStatCard(node) {
+    const className = (node.className || '').toLowerCase();
+
+    // Check for stat-like class names
+    const statIndicators = ['stat', 'metric', 'kpi', 'data-item', 'stat-item'];
+    const hasStatClass = statIndicators.some(indicator => className.includes(indicator));
+
+    if (!hasStatClass) return false;
+
+    const children = Array.from(node.children);
+    if (children.length !== 2) return false;
+
+    // Check if children are likely number + label pair
+    const child1 = children[0];
+    const child2 = children[1];
+
+    const style1 = window.getComputedStyle(child1);
+    const style2 = window.getComputedStyle(child2);
+
+    // Both should be block elements (or have block-like display)
+    const isBlock1 = style1.display === 'block' || style1.display === 'flex';
+    const isBlock2 = style2.display === 'block' || style2.display === 'flex';
+
+    if (!isBlock1 || !isBlock2) return false;
+
+    // First child should have larger font (the number)
+    const fontSize1 = parseFloat(style1.fontSize) || 0;
+    const fontSize2 = parseFloat(style2.fontSize) || 0;
+
+    // Number should be larger than label, or at least bold
+    const isBold1 = parseInt(style1.fontWeight) >= 600;
+
+    return fontSize1 >= fontSize2 || isBold1;
+  }
+
+  /**
+   * Detect if a div structure looks like a table
+   * Checks for table-like class names and structure patterns
+   */
+  function detectTableLikeStructure(node) {
+    const className = (node.className || '').toLowerCase();
+
+    // Check for table-related class names
+    const tableIndicators = ['table', 'data-table', 'grid', 'list'];
+    const hasTableClass = tableIndicators.some(indicator => className.includes(indicator));
+
+    if (!hasTableClass) return false;
+
+    // Check structure: should have header row and data rows
+    const children = Array.from(node.children);
+
+    // Look for header-like element
+    const hasHeader = children.some(child =>
+      (child.className || '').toLowerCase().includes('header') ||
+      child.tagName === 'THEAD'
+    );
+
+    // Look for row-like elements
+    const hasRows = children.some(child =>
+      (child.className || '').toLowerCase().includes('row') ||
+      child.tagName === 'TR' ||
+      child.tagName === 'TBODY'
+    );
+
+    // Check for cell-like structure in children
+    const hasCellStructure = children.some(child => {
+      const childChildren = Array.from(child.children);
+      return childChildren.some(grandchild =>
+        (grandchild.className || '').toLowerCase().includes('cell') ||
+        grandchild.className.toLowerCase().includes('col') ||
+        grandchild.className.toLowerCase().includes('td')
+      );
+    });
+
+    return (hasHeader || hasRows) && hasCellStructure;
+  }
+
+  /**
+   * Extract table data from div-based table structure
+   * Similar to extractTableData but for div grids
+   */
+  function extractDivTableData(node, scale, options = {}) {
+    const rows = [];
+    const colWidths = [];
+    const root = options.root || null;
+
+    // Find header row
+    const headerRow = node.querySelector('.table-header, [class*="header"]');
+    if (headerRow) {
+      const headerCells = Array.from(headerRow.children);
+      headerCells.forEach((cell, index) => {
+        const rect = cell.getBoundingClientRect();
+        const wIn = rect.width * (1 / 96) * scale;
+        colWidths[index] = wIn;
+      });
+
+      // Process header as first row
+      const headerData = headerCells.map(cell => {
+        const style = window.getComputedStyle(cell);
+        const cellText = cell.innerText.replace(/[\n\r\t]+/g, ' ').trim();
+        const textStyle = getTextStyle(style, scale, cellText, options);
+        const fill = computeTableCellFill(style, cell, root, options);
+
+        return {
+          text: cellText,
+          options: {
+            ...textStyle,
+            fill: fill || { color: '16A085', transparency: 80 },
+            bold: true,
+            align: style.textAlign === 'center' ? 'center' : 'left',
+            border: { type: 'none' }
+          }
+        };
+      });
+      rows.push(headerData);
+    }
+
+    // Find data rows
+    const dataRows = node.querySelectorAll('.table-row, [class*="row"]');
+    dataRows.forEach(row => {
+      const cells = Array.from(row.children);
+      const rowData = cells.map(cell => {
+        const style = window.getComputedStyle(cell);
+        const cellText = cell.innerText.replace(/[\n\r\t]+/g, ' ').trim();
+        const textStyle = getTextStyle(style, scale, cellText, options);
+        const fill = computeTableCellFill(style, cell, root, options);
+
+        // Detect trend colors
+        const className = (cell.className || '').toLowerCase();
+        let textColor = textStyle.color;
+        if (className.includes('up') || className.includes('positive')) {
+          textColor = '16A085';
+        } else if (className.includes('down') || className.includes('negative')) {
+          textColor = 'E74C3C';
+        }
+
+        return {
+          text: cellText,
+          options: {
+            ...textStyle,
+            color: textColor,
+            fill: fill,
+            align: style.textAlign === 'center' ? 'center' : 'left',
+            border: {
+              type: 'none',
+              bottom: { type: 'solid', pt: 0.5, color: 'FFFFFF', transparency: 95 }
+            }
+          }
+        };
+      });
+
+      if (rowData.length > 0) {
+        rows.push(rowData);
+      }
+    });
+
+    // Ensure all rows have same column count
+    const maxCols = Math.max(...rows.map(r => r.length), colWidths.length);
+    rows.forEach(row => {
+      while (row.length < maxCols) {
+        row.push({ text: '', options: {} });
+      }
+    });
+    while (colWidths.length < maxCols) {
+      colWidths.push(colWidths[colWidths.length - 1] || 1);
+    }
+
+    return { rows, colWidths };
+  }
+
   exports.exportToPptx = exportToPptx;
 
 }));