dom-to-pptx 1.0.0 → 1.0.1

package/code_context.txt

@@ -0,0 +1,346 @@
+// File: src/image-processor.js
+// src/image-processor.js
+
+export async function getProcessedImage(src, targetW, targetH, radius) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = "Anonymous"; // Critical for canvas manipulation
+    
+    img.onload = () => {
+       const canvas = document.createElement('canvas');
+       // Double resolution for better quality
+       const scale = 2; 
+       canvas.width = targetW * scale;
+       canvas.height = targetH * scale;
+       const ctx = canvas.getContext('2d');
+       ctx.scale(scale, scale);
+
+       // 1. Draw the Mask (Rounded Rect)
+       ctx.beginPath();
+       if (ctx.roundRect) {
+         ctx.roundRect(0, 0, targetW, targetH, radius);
+       } else {
+         // Fallback for older browsers if needed
+         ctx.rect(0, 0, targetW, targetH);
+       }
+       ctx.fillStyle = '#000';
+       ctx.fill();
+
+       // 2. Composite Source-In
+       ctx.globalCompositeOperation = 'source-in';
+
+       // 3. Draw Image (Object Cover Logic)
+       const wRatio = targetW / img.width;
+       const hRatio = targetH / img.height;
+       const maxRatio = Math.max(wRatio, hRatio);
+       const renderW = img.width * maxRatio;
+       const renderH = img.height * maxRatio;
+       const renderX = (targetW - renderW) / 2;
+       const renderY = (targetH - renderH) / 2;
+
+       ctx.drawImage(img, renderX, renderY, renderW, renderH);
+
+       resolve(canvas.toDataURL('image/png'));
+    };
+    
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+}
+// File: src/index.js
+// src/index.js
+import PptxGenJS from "pptxgenjs";
+import { parseColor, getTextStyle, isTextContainer, getVisibleShadow, generateGradientSVG } from "./utils.js";
+import { getProcessedImage } from "./image-processor.js";
+
+const PPI = 96;
+const PX_TO_INCH = 1 / PPI;
+
+/**
+ * Converts a DOM element to a PPTX file.
+ * @param {HTMLElement | string} elementOrSelector - The root element to convert.
+ * @param {Object} options - { fileName: string }
+ */
+export async function exportToPptx(elementOrSelector, options = {}) {
+  const root = typeof elementOrSelector === "string" 
+    ? document.querySelector(elementOrSelector) 
+    : elementOrSelector;
+
+  if (!root) throw new Error("Root element not found");
+
+  const pptx = new PptxGenJS();
+  pptx.layout = "LAYOUT_16x9"; // Default
+  const slide = pptx.addSlide();
+
+  // Use the dimensions of the root element to calculate scaling
+  const rootRect = root.getBoundingClientRect();
+  
+  // Standard PPTX 16:9 dimensions in inches
+  const PPTX_WIDTH_IN = 10;
+  const PPTX_HEIGHT_IN = 5.625;
+
+  const contentWidthIn = rootRect.width * PX_TO_INCH;
+  const contentHeightIn = rootRect.height * PX_TO_INCH;
+  
+  // Scale content to fit within the slide
+  const scale = Math.min(
+    PPTX_WIDTH_IN / contentWidthIn,
+    PPTX_HEIGHT_IN / contentHeightIn
+  );
+
+  const layoutConfig = {
+    rootX: rootRect.x,
+    rootY: rootRect.y,
+    scale: scale,
+    // Center the content
+    offX: (PPTX_WIDTH_IN - contentWidthIn * scale) / 2,
+    offY: (PPTX_HEIGHT_IN - contentHeightIn * scale) / 2,
+  };
+
+  await processNode(root, pptx, slide, layoutConfig);
+  
+  const fileName = options.fileName || "export.pptx";
+  pptx.writeFile({ fileName });
+}
+
+async function processNode(node, pptx, slide, config) {
+  if (node.nodeType !== 1) return; // Element nodes only
+  
+  const style = window.getComputedStyle(node);
+  if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return;
+
+  const rect = node.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return;
+
+  const x = config.offX + (rect.x - config.rootX) * PX_TO_INCH * config.scale;
+  const y = config.offY + (rect.y - config.rootY) * PX_TO_INCH * config.scale;
+  const w = rect.width * PX_TO_INCH * config.scale;
+  const h = rect.height * PX_TO_INCH * config.scale;
+
+  // --- 1. Detect Image Wrapper ---
+  let isImageWrapper = false;
+  const imgChild = Array.from(node.children).find(c => c.tagName === 'IMG');
+  if (imgChild) {
+      const imgRect = imgChild.getBoundingClientRect();
+      if (Math.abs(imgRect.width - rect.width) < 2 && Math.abs(imgRect.height - rect.height) < 2) {
+          isImageWrapper = true;
+      }
+  }
+
+  // --- 2. Backgrounds & Borders ---
+  let bgColor = parseColor(style.backgroundColor);
+  if (isImageWrapper && bgColor) bgColor = null; // Prevent halo
+
+  const hasGradient = style.backgroundImage && style.backgroundImage.includes("linear-gradient");
+  const borderColor = parseColor(style.borderColor);
+  const borderWidth = parseFloat(style.borderWidth);
+  const hasBorder = borderWidth > 0 && borderColor;
+  const shadowStr = style.boxShadow;
+  const hasShadow = shadowStr && shadowStr !== "none";
+  const borderRadius = parseFloat(style.borderRadius) || 0;
+
+  if (hasGradient) {
+    const svgData = generateGradientSVG(rect.width, rect.height, style.backgroundImage, borderRadius, hasBorder ? { color: borderColor, width: borderWidth } : null);
+    if (svgData) slide.addImage({ data: svgData, x, y, w, h });
+  } else if (bgColor || hasBorder || hasShadow) {
+    const isCircle = borderRadius >= Math.min(rect.width, rect.height) / 2 - 1;
+
+    const shapeOpts = {
+      x, y, w, h,
+      fill: bgColor ? { color: bgColor } : null,
+      line: hasBorder ? { color: borderColor, width: borderWidth * 0.75 * config.scale } : null,
+    };
+
+    if (hasShadow) {
+      const shadow = getVisibleShadow(shadowStr, config.scale);
+      if (shadow) shapeOpts.shadow = shadow;
+      
+      // Fix for shadow on transparent background (needed for PPTX to render shadow)
+      if (!bgColor && !hasBorder) {
+        if (style.backgroundColor && style.backgroundColor !== 'rgba(0, 0, 0, 0)') {
+             shapeOpts.fill = { color: parseColor(style.backgroundColor) };
+        }
+      }
+    }
+
+    if (isCircle) {
+      slide.addShape(pptx.ShapeType.ellipse, shapeOpts);
+    } else if (borderRadius > 0) {
+      const radiusFactor = Math.min(1, borderRadius / (Math.min(rect.width, rect.height) / 1.75));
+      shapeOpts.rectRadius = radiusFactor;
+      slide.addShape(pptx.ShapeType.roundRect, shapeOpts);
+    } else {
+      slide.addShape(pptx.ShapeType.rect, shapeOpts);
+    }
+  }
+
+  // --- 3. Process Image ---
+  if (node.tagName === "IMG") {
+    let effectiveRadius = borderRadius;
+    // Check parent clipping if current img has no radius
+    if (effectiveRadius === 0) {
+        const parentStyle = window.getComputedStyle(node.parentElement);
+        if (parentStyle.overflow !== 'visible') {
+            effectiveRadius = parseFloat(parentStyle.borderRadius) || 0;
+        }
+    }
+
+    const processedImage = await getProcessedImage(node.src, rect.width, rect.height, effectiveRadius);
+    if (processedImage) {
+      slide.addImage({ data: processedImage, x, y, w, h });
+    }
+    return; // Don't process children of IMG
+  }
+
+  // --- 4. Process Text ---
+  if (isTextContainer(node)) {
+    const textParts = [];
+    node.childNodes.forEach((child, index) => {
+      let textVal = child.nodeType === 3 ? child.nodeValue : child.textContent;
+      let nodeStyle = child.nodeType === 1 ? window.getComputedStyle(child) : style;
+      
+      textVal = textVal.replace(/[\n\r\t]+/g, " ").replace(/\s{2,}/g, " ");
+      if (index === 0) textVal = textVal.trimStart();
+      if (index === node.childNodes.length - 1) textVal = textVal.trimEnd();
+
+      if (nodeStyle.textTransform === "uppercase") textVal = textVal.toUpperCase();
+      if (nodeStyle.textTransform === "lowercase") textVal = textVal.toLowerCase();
+
+      if (textVal.length > 0) {
+        textParts.push({ text: textVal, options: getTextStyle(nodeStyle, config.scale) });
+      }
+    });
+
+    if (textParts.length > 0) {
+      let align = style.textAlign || "left";
+      if (align === "start") align = "left";
+      if (align === "end") align = "right";
+      
+      let valign = "top";
+      if (style.alignItems === "center") valign = "middle"; // Flex approximation
+      
+      slide.addText(textParts, { x, y, w, h, align, valign, margin: 0, wrap: true, autoFit: false });
+    }
+    return;
+  }
+
+  // Recursive call
+  for (const child of node.children) {
+    await processNode(child, pptx, slide, config);
+  }
+}
+// File: src/utils.js
+// src/utils.js
+
+export function parseColor(str) {
+  if (!str || str === "transparent" || str.startsWith("rgba(0, 0, 0, 0)")) return null;
+  const rgb = str.match(/\d+/g);
+  if (!rgb || rgb.length < 3) return null;
+  // Convert RGB to Hex
+  return ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2]))
+    .toString(16).slice(1).toUpperCase();
+}
+
+export function getTextStyle(style, scale) {
+  return {
+    color: parseColor(style.color) || "000000",
+    fontFace: style.fontFamily.split(",")[0].replace(/['"]/g, ""),
+    fontSize: parseFloat(style.fontSize) * 0.75 * scale,
+    bold: parseInt(style.fontWeight) >= 600,
+  };
+}
+
+export function isTextContainer(node) {
+  const hasText = node.textContent.trim().length > 0;
+  if (!hasText) return false;
+  const children = Array.from(node.children);
+  if (children.length === 0) return true;
+  // Check if children are inline elements
+  const isInline = (el) => 
+    window.getComputedStyle(el).display.includes("inline") || 
+    ["SPAN", "B", "STRONG", "EM"].includes(el.tagName);
+  return children.every(isInline);
+}
+
+export function getVisibleShadow(shadowStr, scale) {
+  if (!shadowStr || shadowStr === "none") return null;
+  const shadows = shadowStr.split(/,(?![^(]*\))/);
+  
+  for (let s of shadows) {
+    s = s.trim();
+    if (s.startsWith("rgba(0, 0, 0, 0)")) continue;
+
+    const match = s.match(/(rgba?\([^\)]+\)|#[0-9a-fA-F]+)\s+(-?[\d\.]+)px\s+(-?[\d\.]+)px\s+([\d\.]+)px/);
+    if (match) {
+      const colorStr = match[1];
+      const x = parseFloat(match[2]);
+      const y = parseFloat(match[3]);
+      const blur = parseFloat(match[4]);
+      
+      const distance = Math.sqrt(x*x + y*y);
+      let angle = Math.atan2(y, x) * (180 / Math.PI);
+      if (angle < 0) angle += 360;
+
+      let opacity = 0.4;
+      if (colorStr.includes('rgba')) {
+          const alphaMatch = colorStr.match(/, ([0-9.]+)\)/);
+          if (alphaMatch) opacity = parseFloat(alphaMatch[1]);
+      }
+
+      return {
+        type: "outer",
+        angle: angle,
+        blur: blur * 0.75 * scale,
+        offset: distance * 0.75 * scale,
+        color: parseColor(colorStr) || "000000",
+        opacity: opacity,
+      };
+    }
+  }
+  return null;
+}
+
+export function generateGradientSVG(w, h, bgString, radius, border) {
+    try {
+      const match = bgString.match(/linear-gradient\((.*)\)/);
+      if (!match) return null;
+      const content = match[1];
+      // Basic gradient parsing logic (simplified from your script)
+      const parts = content.split(/,(?![^(]*\))/).map((p) => p.trim());
+      
+      let x1 = "0%", y1 = "0%", x2 = "0%", y2 = "100%";
+      let stopsStartIdx = 0;
+      
+      if (parts[0].includes("to right")) { x1 = "0%"; x2 = "100%"; y2 = "0%"; stopsStartIdx = 1; }
+      else if (parts[0].includes("to left")) { x1 = "100%"; x2 = "0%"; y2 = "0%"; stopsStartIdx = 1; }
+      // Add other directions as needed...
+
+      let stopsXML = "";
+      const stopParts = parts.slice(stopsStartIdx);
+      stopParts.forEach((part, idx) => {
+        let color = part;
+        let offset = Math.round((idx / (stopParts.length - 1)) * 100) + "%";
+        // Simple regex to separate color from percentage
+        const posMatch = part.match(/(.*?)\s+(\d+(\.\d+)?%?)$/);
+        if (posMatch) { color = posMatch[1]; offset = posMatch[2]; }
+        
+        let opacity = 1;
+        if (color.includes("rgba")) {
+           // extract alpha
+           const rgba = color.match(/[\d\.]+/g);
+           if(rgba && rgba.length > 3) { opacity = rgba[3]; color = `rgb(${rgba[0]},${rgba[1]},${rgba[2]})`; }
+        }
+        stopsXML += `<stop offset="${offset}" stop-color="${color}" stop-opacity="${opacity}"/>`;
+      });
+
+      let strokeAttr = "";
+      if (border) { strokeAttr = `stroke="#${border.color}" stroke-width="${border.width}"`; }
+
+      const svg = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+              <defs><linearGradient id="grad" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}">${stopsXML}</linearGradient></defs>
+              <rect x="0" y="0" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="url(#grad)" ${strokeAttr} />
+          </svg>`;
+      return "data:image/svg+xml;base64," + btoa(svg);
+    } catch (e) { return null; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-to-pptx",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A client-side library that converts any HTML element into a fully editable PowerPoint slide. **dom-to-pptx** transforms DOM structures into pixel-accurate `.pptx` content, preserving gradients, shadows, rounded images, and responsive layouts. It translates CSS Flexbox/Grid, linear-gradients, box-shadows, and typography into native PowerPoint shapes, enabling precise, design-faithful slide generation directly from the browser.",
   "main": "src/index.js",
   "type": "module",

package/src/index.js

@@ -1,16 +1,12 @@
 // src/index.js
 import PptxGenJS from "pptxgenjs";
-import { parseColor, getTextStyle, isTextContainer, getVisibleShadow, generateGradientSVG } from "./utils.js";
+// FIX: Added generateGradientTextSVG
+import { parseColor, getTextStyle, isTextContainer, getVisibleShadow, generateGradientSVG, getRotation, svgToPng, getPadding, getSoftEdges, generateBlurredSVG } from "./utils.js";
 import { getProcessedImage } from "./image-processor.js";
 
 const PPI = 96;
 const PX_TO_INCH = 1 / PPI;
 
-/**
- * Converts a DOM element to a PPTX file.
- * @param {HTMLElement | string} elementOrSelector - The root element to convert.
- * @param {Object} options - { fileName: string }
- */
 export async function exportToPptx(elementOrSelector, options = {}) {
   const root = typeof elementOrSelector === "string" 
     ? document.querySelector(elementOrSelector) 
@@ -19,163 +15,239 @@ export async function exportToPptx(elementOrSelector, options = {}) {
   if (!root) throw new Error("Root element not found");
 
   const pptx = new PptxGenJS();
-  pptx.layout = "LAYOUT_16x9"; // Default
+  pptx.layout = "LAYOUT_16x9";
   const slide = pptx.addSlide();
 
-  // Use the dimensions of the root element to calculate scaling
   const rootRect = root.getBoundingClientRect();
-  
-  // Standard PPTX 16:9 dimensions in inches
   const PPTX_WIDTH_IN = 10;
   const PPTX_HEIGHT_IN = 5.625;
-
   const contentWidthIn = rootRect.width * PX_TO_INCH;
   const contentHeightIn = rootRect.height * PX_TO_INCH;
-  
-  // Scale content to fit within the slide
-  const scale = Math.min(
-    PPTX_WIDTH_IN / contentWidthIn,
-    PPTX_HEIGHT_IN / contentHeightIn
-  );
+  const scale = Math.min(PPTX_WIDTH_IN / contentWidthIn, PPTX_HEIGHT_IN / contentHeightIn);
 
   const layoutConfig = {
-    rootX: rootRect.x,
-    rootY: rootRect.y,
-    scale: scale,
-    // Center the content
+    rootX: rootRect.x, rootY: rootRect.y, scale: scale,
     offX: (PPTX_WIDTH_IN - contentWidthIn * scale) / 2,
     offY: (PPTX_HEIGHT_IN - contentHeightIn * scale) / 2,
   };
 
-  await processNode(root, pptx, slide, layoutConfig);
+  const renderQueue = [];
+  let domOrderCounter = 0;
+  
+  async function collect(node) {
+    const order = domOrderCounter++;
+    const result = await createRenderItem(node, layoutConfig, order, pptx);
+    if (result) {
+        if (result.items) renderQueue.push(...result.items);
+        if (result.stopRecursion) return;
+    }
+    for (const child of node.children) await collect(child);
+  }
+
+  await collect(root);
+
+  renderQueue.sort((a, b) => {
+      if (a.zIndex !== b.zIndex) return a.zIndex - b.zIndex;
+      return a.domOrder - b.domOrder;
+  });
+
+  for (const item of renderQueue) {
+      if (item.type === 'shape') slide.addShape(item.shapeType, item.options);
+      if (item.type === 'image') slide.addImage(item.options);
+      if (item.type === 'text') slide.addText(item.textParts, item.options);
+  }
   
   const fileName = options.fileName || "export.pptx";
   pptx.writeFile({ fileName });
 }
 
-async function processNode(node, pptx, slide, config) {
-  if (node.nodeType !== 1) return; // Element nodes only
-  
+async function createRenderItem(node, config, domOrder, pptx) {
+  if (node.nodeType !== 1) return null;
   const style = window.getComputedStyle(node);
-  if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return;
+  if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return null;
 
   const rect = node.getBoundingClientRect();
-  if (rect.width === 0 || rect.height === 0) return;
+  if (rect.width === 0 || rect.height === 0) return null;
 
-  const x = config.offX + (rect.x - config.rootX) * PX_TO_INCH * config.scale;
-  const y = config.offY + (rect.y - config.rootY) * PX_TO_INCH * config.scale;
-  const w = rect.width * PX_TO_INCH * config.scale;
-  const h = rect.height * PX_TO_INCH * config.scale;
+  const zIndex = style.zIndex !== 'auto' ? parseInt(style.zIndex) : 0;
+  const rotation = getRotation(style.transform);
+  const elementOpacity = parseFloat(style.opacity); 
+  
+  const widthPx = node.offsetWidth || rect.width;
+  const heightPx = node.offsetHeight || rect.height;
 
-  // --- 1. Detect Image Wrapper ---
-  let isImageWrapper = false;
-  const imgChild = Array.from(node.children).find(c => c.tagName === 'IMG');
-  if (imgChild) {
-      const imgRect = imgChild.getBoundingClientRect();
-      if (Math.abs(imgRect.width - rect.width) < 2 && Math.abs(imgRect.height - rect.height) < 2) {
-          isImageWrapper = true;
+  const unrotatedW = widthPx * PX_TO_INCH * config.scale;
+  const unrotatedH = heightPx * PX_TO_INCH * config.scale;
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+  
+  let x = config.offX + ((centerX - config.rootX) * PX_TO_INCH * config.scale) - (unrotatedW / 2);
+  let y = config.offY + ((centerY - config.rootY) * PX_TO_INCH * config.scale) - (unrotatedH / 2);
+  let w = unrotatedW;
+  let h = unrotatedH;
+
+  const items = [];
+
+  // --- SVG & IMG HANDLERS ---
+  if (node.nodeName.toUpperCase() === 'SVG') {
+      const pngData = await svgToPng(node);
+      if (pngData) items.push({ type: 'image', zIndex, domOrder, options: { data: pngData, x, y, w, h, rotate: rotation } });
+      return { items, stopRecursion: true };
+  }
+  if (node.tagName === "IMG") {
+      let borderRadius = parseFloat(style.borderRadius) || 0;
+      if (borderRadius === 0) {
+        const parentStyle = window.getComputedStyle(node.parentElement);
+        if (parentStyle.overflow !== 'visible') borderRadius = parseFloat(parentStyle.borderRadius) || 0;
       }
+      const processed = await getProcessedImage(node.src, widthPx, heightPx, borderRadius);
+      if (processed) items.push({ type: 'image', zIndex, domOrder, options: { data: processed, x, y, w, h, rotate: rotation } });
+      return { items, stopRecursion: true };
   }
 
-  // --- 2. Backgrounds & Borders ---
-  let bgColor = parseColor(style.backgroundColor);
-  if (isImageWrapper && bgColor) bgColor = null; // Prevent halo
-
-  const hasGradient = style.backgroundImage && style.backgroundImage.includes("linear-gradient");
-  const borderColor = parseColor(style.borderColor);
+  // --- PREPARE STYLES ---
+  const bgColorObj = parseColor(style.backgroundColor);
+  const bgClip = style.webkitBackgroundClip || style.backgroundClip;
+  const isBgClipText = bgClip === 'text';
+  const hasGradient = !isBgClipText && style.backgroundImage && style.backgroundImage.includes("linear-gradient");
+  
+  const borderColorObj = parseColor(style.borderColor);
   const borderWidth = parseFloat(style.borderWidth);
-  const hasBorder = borderWidth > 0 && borderColor;
+  const hasBorder = borderWidth > 0 && borderColorObj.hex;
   const shadowStr = style.boxShadow;
   const hasShadow = shadowStr && shadowStr !== "none";
   const borderRadius = parseFloat(style.borderRadius) || 0;
+  const softEdge = getSoftEdges(style.filter, config.scale);
 
-  if (hasGradient) {
-    const svgData = generateGradientSVG(rect.width, rect.height, style.backgroundImage, borderRadius, hasBorder ? { color: borderColor, width: borderWidth } : null);
-    if (svgData) slide.addImage({ data: svgData, x, y, w, h });
-  } else if (bgColor || hasBorder || hasShadow) {
-    const isCircle = borderRadius >= Math.min(rect.width, rect.height) / 2 - 1;
-
-    const shapeOpts = {
-      x, y, w, h,
-      fill: bgColor ? { color: bgColor } : null,
-      line: hasBorder ? { color: borderColor, width: borderWidth * 0.75 * config.scale } : null,
-    };
-
-    if (hasShadow) {
-      const shadow = getVisibleShadow(shadowStr, config.scale);
-      if (shadow) shapeOpts.shadow = shadow;
-      
-      // Fix for shadow on transparent background (needed for PPTX to render shadow)
-      if (!bgColor && !hasBorder) {
-        if (style.backgroundColor && style.backgroundColor !== 'rgba(0, 0, 0, 0)') {
-             shapeOpts.fill = { color: parseColor(style.backgroundColor) };
-        }
+  let isImageWrapper = false;
+  const imgChild = Array.from(node.children).find(c => c.tagName === 'IMG');
+  if (imgChild) {
+      const childW = imgChild.offsetWidth || imgChild.getBoundingClientRect().width;
+      const childH = imgChild.offsetHeight || imgChild.getBoundingClientRect().height;
+      if (childW >= widthPx - 2 && childH >= heightPx - 2) {
+          isImageWrapper = true;
       }
-    }
-
-    if (isCircle) {
-      slide.addShape(pptx.ShapeType.ellipse, shapeOpts);
-    } else if (borderRadius > 0) {
-      const radiusFactor = Math.min(1, borderRadius / (Math.min(rect.width, rect.height) / 1.75));
-      shapeOpts.rectRadius = radiusFactor;
-      slide.addShape(pptx.ShapeType.roundRect, shapeOpts);
-    } else {
-      slide.addShape(pptx.ShapeType.rect, shapeOpts);
-    }
   }
 
-  // --- 3. Process Image ---
-  if (node.tagName === "IMG") {
-    let effectiveRadius = borderRadius;
-    // Check parent clipping if current img has no radius
-    if (effectiveRadius === 0) {
-        const parentStyle = window.getComputedStyle(node.parentElement);
-        if (parentStyle.overflow !== 'visible') {
-            effectiveRadius = parseFloat(parentStyle.borderRadius) || 0;
-        }
-    }
+  // --- TEXT EXTRACTION ---
+  let textPayload = null;
+  const isText = isTextContainer(node);
+  
+  if (isText) {
+      const textParts = [];
+      const isList = style.display === 'list-item';
+      
+      if (isList) {
+          const fontSizePt = parseFloat(style.fontSize) * 0.75 * config.scale;
+          const bulletShift = (parseFloat(style.fontSize) || 16) * PX_TO_INCH * config.scale * 1.5;
+          x -= bulletShift;
+          w += bulletShift;
+          textParts.push({ text: "• ", options: { color: parseColor(style.color).hex || '000000', fontSize: fontSizePt } });
+      }
 
-    const processedImage = await getProcessedImage(node.src, rect.width, rect.height, effectiveRadius);
-    if (processedImage) {
-      slide.addImage({ data: processedImage, x, y, w, h });
-    }
-    return; // Don't process children of IMG
+      node.childNodes.forEach((child, index) => {
+          let textVal = child.nodeType === 3 ? child.nodeValue : child.textContent;
+          let nodeStyle = child.nodeType === 1 ? window.getComputedStyle(child) : style;
+          textVal = textVal.replace(/[\n\r\t]+/g, " ").replace(/\s{2,}/g, " ");
+          if (index === 0 && !isList) textVal = textVal.trimStart(); 
+          else if (index === 0) textVal = textVal.trimStart();
+          if (index === node.childNodes.length - 1) textVal = textVal.trimEnd();
+          if (nodeStyle.textTransform === "uppercase") textVal = textVal.toUpperCase();
+          if (nodeStyle.textTransform === "lowercase") textVal = textVal.toLowerCase();
+          
+          if (textVal.length > 0) {
+              textParts.push({ text: textVal, options: getTextStyle(nodeStyle, config.scale) });
+          }
+      });
+
+      if (textParts.length > 0) {
+          let align = style.textAlign || "left";
+          if (align === "start") align = "left"; if (align === "end") align = "right";
+          
+          let valign = "top";
+          // Standard Flex Alignment
+          if (style.alignItems === "center") valign = "middle"; 
+          if (style.justifyContent === "center" && style.display.includes("flex")) align = "center";
+          
+          // FIX: Improved Alignment Detection for "Button" Badges
+          // If Top/Bottom Padding is equal, and it's a "Shape" (has bg), default to Middle
+          const pt = parseFloat(style.paddingTop) || 0;
+          const pb = parseFloat(style.paddingBottom) || 0;
+          if (Math.abs(pt - pb) < 2 && bgColorObj.hex) {
+              valign = "middle";
+          }
+
+          const padding = getPadding(style, config.scale);
+          textPayload = { text: textParts, align, valign, inset: padding };
+      }
   }
 
-  // --- 4. Process Text ---
-  if (isTextContainer(node)) {
-    const textParts = [];
-    node.childNodes.forEach((child, index) => {
-      let textVal = child.nodeType === 3 ? child.nodeValue : child.textContent;
-      let nodeStyle = child.nodeType === 1 ? window.getComputedStyle(child) : style;
-      
-      textVal = textVal.replace(/[\n\r\t]+/g, " ").replace(/\s{2,}/g, " ");
-      if (index === 0) textVal = textVal.trimStart();
-      if (index === node.childNodes.length - 1) textVal = textVal.trimEnd();
+  // --- RENDER LOGIC ---
+  if (hasGradient || (softEdge && bgColorObj.hex && !isImageWrapper)) {
+      let bgData = null;
+      let padIn = 0;
+      if (softEdge) {
+          const svgInfo = generateBlurredSVG(widthPx, heightPx, bgColorObj.hex, borderRadius, softEdge);
+          bgData = svgInfo.data;
+          padIn = svgInfo.padding * PX_TO_INCH * config.scale;
+      } else {
+          bgData = generateGradientSVG(widthPx, heightPx, style.backgroundImage, borderRadius, hasBorder ? { color: borderColorObj.hex, width: borderWidth } : null);
+      }
 
-      if (nodeStyle.textTransform === "uppercase") textVal = textVal.toUpperCase();
-      if (nodeStyle.textTransform === "lowercase") textVal = textVal.toLowerCase();
+      if (bgData) {
+          items.push({
+             type: 'image', zIndex, domOrder,
+             options: { data: bgData, x: x - padIn, y: y - padIn, w: w + (padIn * 2), h: h + (padIn * 2), rotate: rotation }
+          });
+      }
+      
+      if (textPayload) {
+          items.push({
+              type: 'text', zIndex: zIndex + 1, domOrder,
+              textParts: textPayload.text,
+              options: { 
+                  x, y, w, h, align: textPayload.align, valign: textPayload.valign, inset: textPayload.inset, rotate: rotation, margin: 0, wrap: true, autoFit: false 
+              }
+          });
+      }
+  } 
+  else if ((bgColorObj.hex && !isImageWrapper) || hasBorder || hasShadow || textPayload) {
+      const finalAlpha = elementOpacity * bgColorObj.opacity;
+      const transparency = (1 - finalAlpha) * 100;
+
+      const shapeOpts = {
+          x, y, w, h, rotate: rotation,
+          fill: (bgColorObj.hex && !isImageWrapper) ? { color: bgColorObj.hex, transparency: transparency } : { type: 'none' },
+          line: hasBorder ? { color: borderColorObj.hex, width: borderWidth * 0.75 * config.scale } : null,
+      };
+
+      if (hasShadow) {
+          const shadow = getVisibleShadow(shadowStr, config.scale);
+          if (shadow) shapeOpts.shadow = shadow;
+          if (shapeOpts.fill.type === 'none' && !hasBorder && style.backgroundColor) {
+             shapeOpts.fill = { color: 'FFFFFF', transparency: 99 };
+          }
+      }
 
-      if (textVal.length > 0) {
-        textParts.push({ text: textVal, options: getTextStyle(nodeStyle, config.scale) });
+      const isCircle = borderRadius >= Math.min(widthPx, heightPx) / 2 - 1 && Math.abs(widthPx - heightPx) < 2;
+      let shapeType = pptx.ShapeType.rect;
+      if (isCircle) shapeType = pptx.ShapeType.ellipse;
+      else if (borderRadius > 0) {
+          shapeType = pptx.ShapeType.roundRect;
+          shapeOpts.rectRadius = Math.min(1, borderRadius / (Math.min(widthPx, heightPx) / 2));
       }
-    });
 
-    if (textParts.length > 0) {
-      let align = style.textAlign || "left";
-      if (align === "start") align = "left";
-      if (align === "end") align = "right";
-      
-      let valign = "top";
-      if (style.alignItems === "center") valign = "middle"; // Flex approximation
-      
-      slide.addText(textParts, { x, y, w, h, align, valign, margin: 0, wrap: true, autoFit: false });
-    }
-    return;
+      if (textPayload) {
+          const textOptions = {
+              shape: shapeType, ...shapeOpts, 
+              align: textPayload.align, valign: textPayload.valign, inset: textPayload.inset,
+              margin: 0, wrap: true, autoFit: false
+          };
+          items.push({ type: 'text', zIndex, domOrder, textParts: textPayload.text, options: textOptions });
+      } else {
+          items.push({ type: 'shape', zIndex, domOrder, shapeType, options: shapeOpts });
+      }
   }
 
-  // Recursive call
-  for (const child of node.children) {
-    await processNode(child, pptx, slide, config);
-  }
+  return { items, stopRecursion: !!textPayload };
 }

package/src/utils.js

@@ -1,20 +1,76 @@
 // src/utils.js
 
 export function parseColor(str) {
-  if (!str || str === "transparent" || str.startsWith("rgba(0, 0, 0, 0)")) return null;
-  const rgb = str.match(/\d+/g);
-  if (!rgb || rgb.length < 3) return null;
-  // Convert RGB to Hex
-  return ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2]))
-    .toString(16).slice(1).toUpperCase();
+  if (!str || str === "transparent" || str.startsWith("rgba(0, 0, 0, 0)")) {
+      return { hex: null, opacity: 0 };
+  }
+  if (str.startsWith('#')) {
+      let hex = str.slice(1);
+      if (hex.length === 3) hex = hex.split('').map(c => c+c).join('');
+      return { hex: hex.toUpperCase(), opacity: 1 };
+  }
+  const match = str.match(/[\d\.]+/g);
+  if (match && match.length >= 3) {
+      const r = parseInt(match[0]);
+      const g = parseInt(match[1]);
+      const b = parseInt(match[2]);
+      const a = match.length > 3 ? parseFloat(match[3]) : 1;
+      const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+      return { hex, opacity: a };
+  }
+  return { hex: null, opacity: 0 };
+}
+
+// FIX: New helper to save gradient text
+export function getGradientFallbackColor(bgImage) {
+    if (!bgImage) return null;
+    // Extract first hex or rgb color
+    // linear-gradient(to right, #4f46e5, ...) -> #4f46e5
+    const hexMatch = bgImage.match(/#(?:[0-9a-fA-F]{3}){1,2}/);
+    if (hexMatch) return hexMatch[0];
+    
+    const rgbMatch = bgImage.match(/rgba?\(.*?\)/);
+    if (rgbMatch) return rgbMatch[0];
+    
+    return null;
+}
+
+export function getPadding(style, scale) {
+    const pxToInch = 1 / 96;
+    return [
+        (parseFloat(style.paddingTop) || 0) * pxToInch * scale,
+        (parseFloat(style.paddingRight) || 0) * pxToInch * scale,
+        (parseFloat(style.paddingBottom) || 0) * pxToInch * scale,
+        (parseFloat(style.paddingLeft) || 0) * pxToInch * scale
+    ];
+}
+
+export function getSoftEdges(filterStr, scale) {
+  if (!filterStr || filterStr === "none") return null;
+  const match = filterStr.match(/blur\(([\d\.]+)px\)/);
+  if (match) return parseFloat(match[1]) * 0.75 * scale;
+  return null;
 }
 
 export function getTextStyle(style, scale) {
+  let colorObj = parseColor(style.color);
+  
+  // FIX: Handle text-transparent used in gradients
+  // If text is transparent but has background-clip: text, we can't render gradient text easily.
+  // We fallback to the gradient's first color so it's at least visible.
+  const bgClip = style.webkitBackgroundClip || style.backgroundClip;
+  if (colorObj.opacity === 0 && bgClip === 'text') {
+      const fallback = getGradientFallbackColor(style.backgroundImage);
+      if (fallback) colorObj = parseColor(fallback);
+  }
+
   return {
-    color: parseColor(style.color) || "000000",
+    color: colorObj.hex || "000000",
     fontFace: style.fontFamily.split(",")[0].replace(/['"]/g, ""),
     fontSize: parseFloat(style.fontSize) * 0.75 * scale,
     bold: parseInt(style.fontWeight) >= 600,
+    italic: style.fontStyle === "italic",
+    underline: style.textDecoration.includes("underline"),
   };
 }
 
@@ -23,45 +79,99 @@ export function isTextContainer(node) {
   if (!hasText) return false;
   const children = Array.from(node.children);
   if (children.length === 0) return true;
-  // Check if children are inline elements
   const isInline = (el) => 
     window.getComputedStyle(el).display.includes("inline") || 
-    ["SPAN", "B", "STRONG", "EM"].includes(el.tagName);
+    ["SPAN", "B", "STRONG", "EM", "I", "A", "SMALL"].includes(el.tagName);
   return children.every(isInline);
 }
 
+export function getRotation(transformStr) {
+  if (!transformStr || transformStr === 'none') return 0;
+  const values = transformStr.split('(')[1].split(')')[0].split(',');
+  if (values.length < 4) return 0;
+  const a = parseFloat(values[0]);
+  const b = parseFloat(values[1]);
+  return Math.round(Math.atan2(b, a) * (180 / Math.PI));
+}
+
+export function svgToPng(node) {
+  return new Promise((resolve) => {
+    const clone = node.cloneNode(true);
+    const rect = node.getBoundingClientRect();
+    const width = rect.width || 300; 
+    const height = rect.height || 150;
+
+    function inlineStyles(source, target) {
+      const computed = window.getComputedStyle(source);
+      const properties = ['fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'opacity', 'font-family', 'font-size', 'font-weight'];
+      
+      if (computed.fill === 'none') target.setAttribute('fill', 'none');
+      else if (computed.fill) target.style.fill = computed.fill;
+      
+      if (computed.stroke === 'none') target.setAttribute('stroke', 'none');
+      else if (computed.stroke) target.style.stroke = computed.stroke;
+
+      properties.forEach(prop => {
+          if (prop !== 'fill' && prop !== 'stroke') {
+              const val = computed[prop];
+              if (val && val !== 'auto') target.style[prop] = val;
+          }
+      });
+
+      for (let i = 0; i < source.children.length; i++) {
+          if (target.children[i]) inlineStyles(source.children[i], target.children[i]);
+      }
+    }
+    
+    inlineStyles(node, clone);
+
+    clone.setAttribute('width', width);
+    clone.setAttribute('height', height);
+    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+    const xml = new XMLSerializer().serializeToString(clone);
+    const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
+
+    const img = new Image();
+    img.crossOrigin = "Anonymous";
+    img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const scale = 3; 
+        canvas.width = width * scale;
+        canvas.height = height * scale;
+        const ctx = canvas.getContext('2d');
+        ctx.scale(scale, scale);
+        ctx.drawImage(img, 0, 0, width, height);
+        resolve(canvas.toDataURL('image/png'));
+    };
+    img.onerror = () => resolve(null);
+    img.src = svgUrl;
+  });
+}
+
 export function getVisibleShadow(shadowStr, scale) {
   if (!shadowStr || shadowStr === "none") return null;
   const shadows = shadowStr.split(/,(?![^(]*\))/);
-  
   for (let s of shadows) {
     s = s.trim();
     if (s.startsWith("rgba(0, 0, 0, 0)")) continue;
-
     const match = s.match(/(rgba?\([^\)]+\)|#[0-9a-fA-F]+)\s+(-?[\d\.]+)px\s+(-?[\d\.]+)px\s+([\d\.]+)px/);
     if (match) {
       const colorStr = match[1];
       const x = parseFloat(match[2]);
       const y = parseFloat(match[3]);
       const blur = parseFloat(match[4]);
-      
       const distance = Math.sqrt(x*x + y*y);
       let angle = Math.atan2(y, x) * (180 / Math.PI);
       if (angle < 0) angle += 360;
-
-      let opacity = 0.4;
-      if (colorStr.includes('rgba')) {
-          const alphaMatch = colorStr.match(/, ([0-9.]+)\)/);
-          if (alphaMatch) opacity = parseFloat(alphaMatch[1]);
-      }
-
+      const colorObj = parseColor(colorStr);
       return {
         type: "outer",
         angle: angle,
         blur: blur * 0.75 * scale,
         offset: distance * 0.75 * scale,
-        color: parseColor(colorStr) || "000000",
-        opacity: opacity,
+        color: colorObj.hex || "000000",
+        opacity: colorObj.opacity 
       };
     }
   }
@@ -73,28 +183,24 @@ export function generateGradientSVG(w, h, bgString, radius, border) {
       const match = bgString.match(/linear-gradient\((.*)\)/);
       if (!match) return null;
       const content = match[1];
-      // Basic gradient parsing logic (simplified from your script)
       const parts = content.split(/,(?![^(]*\))/).map((p) => p.trim());
       
       let x1 = "0%", y1 = "0%", x2 = "0%", y2 = "100%";
       let stopsStartIdx = 0;
-      
       if (parts[0].includes("to right")) { x1 = "0%"; x2 = "100%"; y2 = "0%"; stopsStartIdx = 1; }
       else if (parts[0].includes("to left")) { x1 = "100%"; x2 = "0%"; y2 = "0%"; stopsStartIdx = 1; }
-      // Add other directions as needed...
+      else if (parts[0].includes("to top")) { y1 = "100%"; y2 = "0%"; stopsStartIdx = 1; }
+      else if (parts[0].includes("to bottom")) { y1 = "0%"; y2 = "100%"; stopsStartIdx = 1; }
 
       let stopsXML = "";
       const stopParts = parts.slice(stopsStartIdx);
       stopParts.forEach((part, idx) => {
         let color = part;
         let offset = Math.round((idx / (stopParts.length - 1)) * 100) + "%";
-        // Simple regex to separate color from percentage
         const posMatch = part.match(/(.*?)\s+(\d+(\.\d+)?%?)$/);
         if (posMatch) { color = posMatch[1]; offset = posMatch[2]; }
-        
         let opacity = 1;
         if (color.includes("rgba")) {
-           // extract alpha
            const rgba = color.match(/[\d\.]+/g);
            if(rgba && rgba.length > 3) { opacity = rgba[3]; color = `rgb(${rgba[0]},${rgba[1]},${rgba[2]})`; }
         }
@@ -111,4 +217,40 @@ export function generateGradientSVG(w, h, bgString, radius, border) {
           </svg>`;
       return "data:image/svg+xml;base64," + btoa(svg);
     } catch (e) { return null; }
+}
+
+export function generateBlurredSVG(w, h, color, radius, blurPx) {
+  const padding = blurPx * 3; 
+  const fullW = w + (padding * 2);
+  const fullH = h + (padding * 2);
+  const x = padding;
+  const y = padding;
+  let shapeTag = "";
+  // Is it a Circle? Use strict check
+  const isCircle = radius >= (Math.min(w, h) / 2) - 1 && Math.abs(w - h) < 2;
+
+  if (isCircle) {
+      const cx = x + w/2;
+      const cy = y + h/2;
+      const rx = w/2;
+      const ry = h/2;
+      shapeTag = `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="#${color}" filter="url(#f1)" />`;
+  } else {
+      shapeTag = `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="#${color}" filter="url(#f1)" />`;
+  }
+
+  const svg = `
+  <svg xmlns="http://www.w3.org/2000/svg" width="${fullW}" height="${fullH}" viewBox="0 0 ${fullW} ${fullH}">
+    <defs>
+      <filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="${blurPx}" />
+      </filter>
+    </defs>
+    ${shapeTag}
+  </svg>`;
+
+  return {
+      data: 'data:image/svg+xml;base64,' + btoa(svg),
+      padding: padding
+  };
 }