@microlee666/dom-to-pptx 1.1.4 → 1.1.5

package/dist/dom-to-pptx.cjs

@@ -339,6 +339,7 @@ function extractTableData(node, scale, options = {}) {
           bold: textStyle.bold,
           italic: textStyle.italic,
           underline: textStyle.underline,
+          lang: 'zh-CN',
 
           fill: fill,
           align: align,
@@ -413,11 +414,11 @@ function getGradientFallbackColor(bgImage) {
   // 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;
@@ -688,6 +689,214 @@ function parseColor(str) {
   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 [
@@ -706,6 +915,8 @@ function getSoftEdges(filterStr, scale) {
 }
 
 const DEFAULT_CJK_FONTS = [
+  'Heiti TC',
+  'Heiti SC',
   'PingFang SC',
   'Hiragino Sans GB',
   'Microsoft YaHei',
@@ -757,7 +968,7 @@ function pickFontFace(fontFamily, text, options) {
   }
 
   const autoMatch = DEFAULT_CJK_FONTS.find((f) => lowered.includes(f.toLowerCase()));
-  return autoMatch || primary;
+  return autoMatch || 'Heiti TC';
 }
 
 function getTextStyle(style, scale, text = '', options = {}) {
@@ -788,6 +999,9 @@ function getTextStyle(style, scale, text = '', options = {}) {
       // 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) ---
@@ -806,10 +1020,11 @@ function getTextStyle(style, scale, text = '', options = {}) {
   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 }),
@@ -822,6 +1037,7 @@ function getTextStyle(style, scale, text = '', options = {}) {
 /**
  * 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;
@@ -830,6 +1046,26 @@ function isTextContainer(node) {
   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;
@@ -1388,6 +1624,60 @@ const PptxGenJS = PptxGenJSImport__namespace?.default ?? PptxGenJSImport__namesp
 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__default["default"].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
@@ -1412,6 +1702,7 @@ async function exportToPptx(target, options = {}) {
   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];
 
@@ -1486,6 +1777,9 @@ async function exportToPptx(target, options = {}) {
     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) {
@@ -1527,6 +1821,9 @@ async function processSlide(root, slide, pptx, globalOptions = {}) {
     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;
@@ -1562,7 +1859,7 @@ async function processSlide(root, slide, pptx, globalOptions = {}) {
       pptx,
       currentZ,
       nodeStyle,
-      globalOptions
+      slideOptions
     );
 
     if (result) {
@@ -1608,6 +1905,10 @@ async function processSlide(root, slide, pptx, globalOptions = {}) {
     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,
@@ -1808,13 +2109,23 @@ function prepareRenderItem(
     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: [
@@ -1853,7 +2164,7 @@ function prepareRenderItem(
   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;
@@ -1867,8 +2178,41 @@ function prepareRenderItem(
 
   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;
 
@@ -2212,6 +2556,35 @@ function prepareRenderItem(
     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;
@@ -2314,6 +2687,27 @@ function prepareRenderItem(
   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;
@@ -2370,8 +2764,71 @@ function prepareRenderItem(
       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;
@@ -2731,5 +3188,282 @@ function createCompositeBorderItems(sides, x, y, w, h, scale, zIndex, domOrder)
   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__default["default"](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;
 //# sourceMappingURL=dom-to-pptx.cjs.map