@microlee666/dom-to-pptx 1.1.4 → 1.1.6

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

@@ -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
@@ -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;
@@ -62869,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 [
@@ -62887,6 +63097,8 @@
   }
 
   const DEFAULT_CJK_FONTS = [
+    'Heiti TC',
+    'Heiti SC',
     'PingFang SC',
     'Hiragino Sans GB',
     'Microsoft YaHei',
@@ -62938,7 +63150,7 @@
     }
 
     const autoMatch = DEFAULT_CJK_FONTS.find((f) => lowered.includes(f.toLowerCase()));
-    return autoMatch || primary;
+    return autoMatch || 'Heiti TC';
   }
 
   function getTextStyle(style, scale, text = '', options = {}) {
@@ -62969,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) ---
@@ -62987,10 +63202,11 @@
     return {
       color: colorObj.hex || '000000',
       fontFace: fontFace,
-      fontSize: Math.floor(fontSizePx * 0.75 * scale),
+      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 }),
@@ -63003,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;
@@ -63011,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;
@@ -63569,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
@@ -63593,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];
 
@@ -63667,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) {
@@ -63708,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;
@@ -63743,7 +64041,7 @@
         pptx,
         currentZ,
         nodeStyle,
-        globalOptions
+        slideOptions
       );
 
       if (result) {
@@ -63789,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,
@@ -63989,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: [
@@ -64034,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;
@@ -64048,8 +64360,41 @@
 
     const items = [];
 
-    if (node.tagName === 'TABLE') {
-      const tableData = extractTableData(node, config.scale, { ...globalOptions, root: config.root });
+    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;
 
@@ -64393,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;
@@ -64495,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;
@@ -64551,8 +64946,91 @@
         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) || hasGradient;
+        const hasVisibleBorder = borderWidth > 0;
+        const hasLargeBorderRadius = borderRadius >= height / 2;
+        const hasBadgeClass = className.includes('badge') || className.includes('pill') || className.includes('tag');
+
+        // Check if it's a small tag/label with rounded corners and short text
+        const paddingLeft = parseFloat(style.paddingLeft) || 0;
+        const paddingRight = parseFloat(style.paddingRight) || 0;
+        const paddingTop = parseFloat(style.paddingTop) || 0;
+        const paddingBottom = parseFloat(style.paddingBottom) || 0;
+        const hasSmallPadding = Math.max(paddingLeft, paddingRight, paddingTop, paddingBottom) <= 12;
+        const hasEvenPadding = Math.abs(paddingTop - paddingBottom) <= 4 && Math.abs(paddingLeft - paddingRight) <= 8;
+        const hasRoundedCorners = borderRadius >= 3;
+        const isInlineBlock = style.display === 'inline-block' || style.display === 'inline-flex';
+
+        // Small tag detection: inline-block with background, rounded corners, small even padding, and short text
+        const isSmallTag =
+          isInlineBlock &&
+          hasVisibleBackground &&
+          hasRoundedCorners &&
+          hasSmallPadding &&
+          hasEvenPadding &&
+          textContent.length <= 10;
+
+        // Only consider it a badge if it has visual styling AND short text
+        const isLikelyBadge =
+          ((hasLargeBorderRadius || hasBadgeClass) &&
+            textContent.length <= 10 &&
+            (hasVisibleBackground || hasVisibleBorder || hasLargeBorderRadius)) ||
+          isSmallTag;
+
+        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;
@@ -64912,6 +65390,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;
 
 }));