dom-to-pptx 1.0.5 → 1.0.7

package/dist/dom-to-pptx.mjs

@@ -53,7 +53,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
         function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, [])).next());
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 }
 
@@ -86,7 +86,7 @@ function __generator(thisArg, body) {
 }
 
 function __spreadArray(to, from, pack) {
-    if (arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) ar = Array.prototype.slice.call(from, 0, i);
             ar[i] = from[i];
@@ -7955,17 +7955,20 @@ function generateCompositeBorderSVG(w, h, radius, sides) {
  */
 function generateCustomShapeSVG(w, h, color, opacity, radii) {
   let { tl, tr, br, bl } = radii;
-  
+
   // Clamp radii using CSS spec logic (avoid overlap)
   const factor = Math.min(
-    (w / (tl + tr)) || Infinity,
-    (h / (tr + br)) || Infinity,
-    (w / (br + bl)) || Infinity,
-    (h / (bl + tl)) || Infinity
+    w / (tl + tr) || Infinity,
+    h / (tr + br) || Infinity,
+    w / (br + bl) || Infinity,
+    h / (bl + tl) || Infinity
   );
-  
+
   if (factor < 1) {
-    tl *= factor; tr *= factor; br *= factor; bl *= factor;
+    tl *= factor;
+    tr *= factor;
+    br *= factor;
+    bl *= factor;
   }
 
   const path = `
@@ -7996,7 +7999,10 @@ function parseColor(str) {
   if (str.startsWith('#')) {
     let hex = str.slice(1);
     if (hex.length === 3)
-      hex = hex.split('').map((c) => c + c).join('');
+      hex = hex
+        .split('')
+        .map((c) => c + c)
+        .join('');
     return { hex: hex.toUpperCase(), opacity: 1 };
   }
   const match = str.match(/[\d.]+/g);
@@ -8059,25 +8065,35 @@ function isTextContainer(node) {
 
   // Check if children are purely inline text formatting or visual shapes
   const isSafeInline = (el) => {
+    // 1. Reject Web Components / Icons / Images
+    if (el.tagName.includes('-')) return false;
+    if (el.tagName === 'IMG' || el.tagName === 'SVG') return false;
+
     const style = window.getComputedStyle(el);
     const display = style.display;
-    
-    // If it's a standard inline element
-    const isInlineTag = ['SPAN', 'B', 'STRONG', 'EM', 'I', 'A', 'SMALL'].includes(el.tagName);
+
+    // 2. Initial check: Must be a standard inline tag OR display:inline
+    const isInlineTag = ['SPAN', 'B', 'STRONG', 'EM', 'I', 'A', 'SMALL', 'MARK'].includes(el.tagName);
     const isInlineDisplay = display.includes('inline');
 
     if (!isInlineTag && !isInlineDisplay) return false;
 
-    // Check if element is a shape (visual object without text)
-    // If an element is empty but has a visible background/border, it's a shape (like a dot).
-    // We must return false so the parent isn't treated as a text-only container.
-    const hasContent = el.textContent.trim().length > 0;
+    // 3. CRITICAL FIX: Check for Structural Styling
+    // PPTX Text Runs (parts of a text line) CANNOT have backgrounds, borders, or padding.
+    // If a child element has these, the parent is NOT a simple text container; 
+    // it is a layout container composed of styled blocks.
     const bgColor = parseColor(style.backgroundColor);
     const hasVisibleBg = bgColor.hex && bgColor.opacity > 0;
     const hasBorder = parseFloat(style.borderWidth) > 0 && parseColor(style.borderColor).opacity > 0;
 
+    if (hasVisibleBg || hasBorder) {
+      return false;
+    }
+
+    // 4. Check for empty shapes (visual objects without text, like dots)
+    const hasContent = el.textContent.trim().length > 0;
     if (!hasContent && (hasVisibleBg || hasBorder)) {
-      return false; 
+      return false;
     }
 
     return true;
@@ -8095,62 +8111,6 @@ function getRotation(transformStr) {
   return Math.round(Math.atan2(b, a) * (180 / Math.PI));
 }
 
-function svgToPng(node) {
-  return new Promise((resolve) => {
-    const clone = node.cloneNode(true);
-    const rect = node.getBoundingClientRect();
-    const width = rect.width || 300;
-    const height = rect.height || 150;
-
-    function inlineStyles(source, target) {
-      const computed = window.getComputedStyle(source);
-      const properties = [
-        'fill', 'stroke', 'stroke-width', 'stroke-linecap',
-        'stroke-linejoin', 'opacity', 'font-family', 'font-size', 'font-weight',
-      ];
-
-      if (computed.fill === 'none') target.setAttribute('fill', 'none');
-      else if (computed.fill) target.style.fill = computed.fill;
-
-      if (computed.stroke === 'none') target.setAttribute('stroke', 'none');
-      else if (computed.stroke) target.style.stroke = computed.stroke;
-
-      properties.forEach((prop) => {
-        if (prop !== 'fill' && prop !== 'stroke') {
-          const val = computed[prop];
-          if (val && val !== 'auto') target.style[prop] = val;
-        }
-      });
-
-      for (let i = 0; i < source.children.length; i++) {
-        if (target.children[i]) inlineStyles(source.children[i], target.children[i]);
-      }
-    }
-
-    inlineStyles(node, clone);
-    clone.setAttribute('width', width);
-    clone.setAttribute('height', height);
-    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-
-    const xml = new XMLSerializer().serializeToString(clone);
-    const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
-    const img = new Image();
-    img.crossOrigin = 'Anonymous';
-    img.onload = () => {
-      const canvas = document.createElement('canvas');
-      const scale = 3;
-      canvas.width = width * scale;
-      canvas.height = height * scale;
-      const ctx = canvas.getContext('2d');
-      ctx.scale(scale, scale);
-      ctx.drawImage(img, 0, 0, width, height);
-      resolve(canvas.toDataURL('image/png'));
-    };
-    img.onerror = () => resolve(null);
-    img.src = svgUrl;
-  });
-}
-
 function getVisibleShadow(shadowStr, scale) {
   if (!shadowStr || shadowStr === 'none') return null;
   const shadows = shadowStr.split(/,(?![^()]*\))/);
@@ -8189,16 +8149,29 @@ function generateGradientSVG(w, h, bgString, radius, border) {
     const content = match[1];
     const parts = content.split(/,(?![^()]*\))/).map((p) => p.trim());
 
-    let x1 = '0%', y1 = '0%', x2 = '0%', y2 = '100%';
+    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;
+      x1 = '0%';
+      x2 = '100%';
+      y2 = '0%';
+      stopsStartIdx = 1;
     } else if (parts[0].includes('to left')) {
-      x1 = '100%'; x2 = '0%'; y2 = '0%'; stopsStartIdx = 1;
+      x1 = '100%';
+      x2 = '0%';
+      y2 = '0%';
+      stopsStartIdx = 1;
     } else if (parts[0].includes('to top')) {
-      y1 = '100%'; y2 = '0%'; stopsStartIdx = 1;
+      y1 = '100%';
+      y2 = '0%';
+      stopsStartIdx = 1;
     } else if (parts[0].includes('to bottom')) {
-      y1 = '0%'; y2 = '100%'; stopsStartIdx = 1;
+      y1 = '0%';
+      y2 = '100%';
+      stopsStartIdx = 1;
     }
 
     let stopsXML = '';
@@ -8273,81 +8246,84 @@ function generateBlurredSVG(w, h, color, radius, blurPx) {
   };
 }
 
-// src/image-processor.js
-
-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);
-
-      // Normalize radius input to an object { tl, tr, br, bl }
-      let r = { tl: 0, tr: 0, br: 0, bl: 0 };
-      if (typeof radius === 'number') {
-        r = { tl: radius, tr: radius, br: radius, bl: radius };
-      } else if (typeof radius === 'object' && radius !== null) {
-        r = { ...r, ...radius }; // Merge with defaults
-      }
-
-      // 1. Draw the Mask (Custom Shape with specific corners)
-      ctx.beginPath();
-      
-      // Border Radius Clamping Logic (CSS Spec)
-      // Prevents corners from overlapping if radii are too large for the container
-      const factor = Math.min(
-        (targetW / (r.tl + r.tr)) || Infinity,
-        (targetH / (r.tr + r.br)) || Infinity,
-        (targetW / (r.br + r.bl)) || Infinity,
-        (targetH / (r.bl + r.tl)) || Infinity
-      );
-
-      if (factor < 1) {
-        r.tl *= factor; r.tr *= factor; r.br *= factor; r.bl *= factor;
-      }
-
-      // Draw path: Top-Left -> Top-Right -> Bottom-Right -> Bottom-Left
-      ctx.moveTo(r.tl, 0);
-      ctx.lineTo(targetW - r.tr, 0);
-      ctx.arcTo(targetW, 0, targetW, r.tr, r.tr);
-      ctx.lineTo(targetW, targetH - r.br);
-      ctx.arcTo(targetW, targetH, targetW - r.br, targetH, r.br);
-      ctx.lineTo(r.bl, targetH);
-      ctx.arcTo(0, targetH, 0, targetH - r.bl, r.bl);
-      ctx.lineTo(0, r.tl);
-      ctx.arcTo(0, 0, r.tl, 0, r.tl);
-      
-      ctx.closePath();
-      ctx.fillStyle = '#000';
-      ctx.fill();
-
-      // 2. Composite Source-In (Crops the next image draw to the mask)
-      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;
-  });
+// src/image-processor.js
+
+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);
+
+      // Normalize radius input to an object { tl, tr, br, bl }
+      let r = { tl: 0, tr: 0, br: 0, bl: 0 };
+      if (typeof radius === 'number') {
+        r = { tl: radius, tr: radius, br: radius, bl: radius };
+      } else if (typeof radius === 'object' && radius !== null) {
+        r = { ...r, ...radius }; // Merge with defaults
+      }
+
+      // 1. Draw the Mask (Custom Shape with specific corners)
+      ctx.beginPath();
+
+      // Border Radius Clamping Logic (CSS Spec)
+      // Prevents corners from overlapping if radii are too large for the container
+      const factor = Math.min(
+        targetW / (r.tl + r.tr) || Infinity,
+        targetH / (r.tr + r.br) || Infinity,
+        targetW / (r.br + r.bl) || Infinity,
+        targetH / (r.bl + r.tl) || Infinity
+      );
+
+      if (factor < 1) {
+        r.tl *= factor;
+        r.tr *= factor;
+        r.br *= factor;
+        r.bl *= factor;
+      }
+
+      // Draw path: Top-Left -> Top-Right -> Bottom-Right -> Bottom-Left
+      ctx.moveTo(r.tl, 0);
+      ctx.lineTo(targetW - r.tr, 0);
+      ctx.arcTo(targetW, 0, targetW, r.tr, r.tr);
+      ctx.lineTo(targetW, targetH - r.br);
+      ctx.arcTo(targetW, targetH, targetW - r.br, targetH, r.br);
+      ctx.lineTo(r.bl, targetH);
+      ctx.arcTo(0, targetH, 0, targetH - r.bl, r.bl);
+      ctx.lineTo(0, r.tl);
+      ctx.arcTo(0, 0, r.tl, 0, r.tl);
+
+      ctx.closePath();
+      ctx.fillStyle = '#000';
+      ctx.fill();
+
+      // 2. Composite Source-In (Crops the next image draw to the mask)
+      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;
+  });
 }
 
 // src/index.js
@@ -8419,66 +8395,115 @@ async function processSlide(root, slide, pptx) {
   };
 
   const renderQueue = [];
+  const asyncTasks = []; // Queue for heavy operations (Images, Canvas)
   let domOrderCounter = 0;
 
-  async function collect(node) {
+  // Sync Traversal Function
+  function collect(node, parentZIndex) {
     const order = domOrderCounter++;
-    const result = await createRenderItem(node, { ...layoutConfig, root }, order, pptx);
+
+    let currentZ = parentZIndex;
+    let nodeStyle = null;
+    const nodeType = node.nodeType;
+
+    if (nodeType === 1) {
+      nodeStyle = window.getComputedStyle(node);
+      // Optimization: Skip completely hidden elements immediately
+      if (
+        nodeStyle.display === 'none' ||
+        nodeStyle.visibility === 'hidden' ||
+        nodeStyle.opacity === '0'
+      ) {
+        return;
+      }
+      if (nodeStyle.zIndex !== 'auto') {
+        currentZ = parseInt(nodeStyle.zIndex);
+      }
+    }
+
+    // Prepare the item. If it needs async work, it returns a 'job'
+    const result = prepareRenderItem(
+      node,
+      { ...layoutConfig, root },
+      order,
+      pptx,
+      currentZ,
+      nodeStyle
+    );
+
     if (result) {
-      if (result.items) renderQueue.push(...result.items);
+      if (result.items) {
+        // Push items immediately to queue (data might be missing but filled later)
+        renderQueue.push(...result.items);
+      }
+      if (result.job) {
+        // Push the promise-returning function to the task list
+        asyncTasks.push(result.job);
+      }
       if (result.stopRecursion) return;
     }
-    for (const child of node.children) await collect(child);
+
+    // Recurse children synchronously
+    const childNodes = node.childNodes;
+    for (let i = 0; i < childNodes.length; i++) {
+      collect(childNodes[i], currentZ);
+    }
   }
 
-  await collect(root);
+  // 1. Traverse and build the structure (Fast)
+  collect(root, 0);
 
-  renderQueue.sort((a, b) => {
+  // 2. Execute all heavy tasks in parallel (Fast)
+  if (asyncTasks.length > 0) {
+    await Promise.all(asyncTasks.map((task) => task()));
+  }
+
+  // 3. Cleanup and Sort
+  // Remove items that failed to generate data (marked with skip)
+  const finalQueue = renderQueue.filter(
+    (item) => !item.skip && (item.type !== 'image' || item.options.data)
+  );
+
+  finalQueue.sort((a, b) => {
     if (a.zIndex !== b.zIndex) return a.zIndex - b.zIndex;
     return a.domOrder - b.domOrder;
   });
 
-  for (const item of renderQueue) {
+  // 4. Add to Slide
+  for (const item of finalQueue) {
     if (item.type === 'shape') slide.addShape(item.shapeType, item.options);
     if (item.type === 'image') slide.addImage(item.options);
     if (item.type === 'text') slide.addText(item.textParts, item.options);
   }
 }
 
-async function elementToCanvasImage(node, widthPx, heightPx, root) {
+/**
+ * Optimized html2canvas wrapper
+ * Now strictly captures the node itself, not the root.
+ */
+async function elementToCanvasImage(node, widthPx, heightPx) {
   return new Promise((resolve) => {
-    const width = Math.ceil(widthPx);
-    const height = Math.ceil(heightPx);
-
-    if (width <= 0 || height <= 0) {
-      resolve(null);
-      return;
-    }
-
+    const width = Math.max(Math.ceil(widthPx), 1);
+    const height = Math.max(Math.ceil(heightPx), 1);
     const style = window.getComputedStyle(node);
 
-    html2canvas(root, {
-      width: root.scrollWidth,
-      height: root.scrollHeight,
-      useCORS: true,
-      allowTaint: true,
+    // Optimized: Capture ONLY the specific node
+    html2canvas(node, {
       backgroundColor: null,
+      logging: false,
+      scale: 2, // Slight quality boost
     })
       .then((canvas) => {
-        const rootCanvas = canvas;
-        const nodeRect = node.getBoundingClientRect();
-        const rootRect = root.getBoundingClientRect();
-        const sourceX = nodeRect.left - rootRect.left;
-        const sourceY = nodeRect.top - rootRect.top;
-
         const destCanvas = document.createElement('canvas');
         destCanvas.width = width;
         destCanvas.height = height;
         const ctx = destCanvas.getContext('2d');
 
-        ctx.drawImage(rootCanvas, sourceX, sourceY, width, height, 0, 0, width, height);
+        // Draw the captured canvas into our sized canvas
+        // html2canvas might return a larger canvas if scale > 1, so we fit it
+        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, width, height);
 
-        // Parse radii
+        // Apply border radius clipping
         let tl = parseFloat(style.borderTopLeftRadius) || 0;
         let tr = parseFloat(style.borderTopRightRadius) || 0;
         let br = parseFloat(style.borderBottomRightRadius) || 0;
@@ -8498,38 +8523,89 @@ async function elementToCanvasImage(node, widthPx, heightPx, root) {
           bl *= f;
         }
 
-        ctx.globalCompositeOperation = 'destination-in';
-        ctx.beginPath();
-        ctx.moveTo(tl, 0);
-        ctx.lineTo(width - tr, 0);
-        ctx.arcTo(width, 0, width, tr, tr);
-        ctx.lineTo(width, height - br);
-        ctx.arcTo(width, height, width - br, height, br);
-        ctx.lineTo(bl, height);
-        ctx.arcTo(0, height, 0, height - bl, bl);
-        ctx.lineTo(0, tl);
-        ctx.arcTo(0, 0, tl, 0, tl);
-        ctx.closePath();
-        ctx.fill();
+        if (tl + tr + br + bl > 0) {
+          ctx.globalCompositeOperation = 'destination-in';
+          ctx.beginPath();
+          ctx.moveTo(tl, 0);
+          ctx.lineTo(width - tr, 0);
+          ctx.arcTo(width, 0, width, tr, tr);
+          ctx.lineTo(width, height - br);
+          ctx.arcTo(width, height, width - br, height, br);
+          ctx.lineTo(bl, height);
+          ctx.arcTo(0, height, 0, height - bl, bl);
+          ctx.lineTo(0, tl);
+          ctx.arcTo(0, 0, tl, 0, tl);
+          ctx.closePath();
+          ctx.fill();
+        }
 
         resolve(destCanvas.toDataURL('image/png'));
       })
-      .catch(() => resolve(null));
+      .catch((e) => {
+        console.warn('Canvas capture failed for node', node, e);
+        resolve(null);
+      });
   });
 }
 
-async function createRenderItem(node, config, domOrder, pptx) {
+/**
+ * Replaces createRenderItem.
+ * Returns { items: [], job: () => Promise, stopRecursion: boolean }
+ */
+function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, computedStyle) {
+  // 1. Text Node Handling
+  if (node.nodeType === 3) {
+    const textContent = node.nodeValue.trim();
+    if (!textContent) return null;
+
+    const parent = node.parentElement;
+    if (!parent) return null;
+
+    if (isTextContainer(parent)) return null; // Parent handles it
+
+    const range = document.createRange();
+    range.selectNode(node);
+    const rect = range.getBoundingClientRect();
+    range.detach();
+
+    const style = window.getComputedStyle(parent);
+    const widthPx = rect.width;
+    const heightPx = rect.height;
+    const unrotatedW = widthPx * PX_TO_INCH * config.scale;
+    const unrotatedH = heightPx * PX_TO_INCH * config.scale;
+
+    const x = config.offX + (rect.left - config.rootX) * PX_TO_INCH * config.scale;
+    const y = config.offY + (rect.top - config.rootY) * PX_TO_INCH * config.scale;
+
+    return {
+      items: [
+        {
+          type: 'text',
+          zIndex: effectiveZIndex,
+          domOrder,
+          textParts: [
+            {
+              text: textContent,
+              options: getTextStyle(style, config.scale),
+            },
+          ],
+          options: { x, y, w: unrotatedW, h: unrotatedH, margin: 0, autoFit: false },
+        },
+      ],
+      stopRecursion: false,
+    };
+  }
+
   if (node.nodeType !== 1) return null;
-  const style = window.getComputedStyle(node);
-  if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0')
-    return null;
+  const style = computedStyle; // Use pre-computed style
 
   const rect = node.getBoundingClientRect();
   if (rect.width < 0.5 || rect.height < 0.5) return null;
 
-  const zIndex = style.zIndex !== 'auto' ? parseInt(style.zIndex) : 0;
+  const zIndex = effectiveZIndex;
   const rotation = getRotation(style.transform);
   const elementOpacity = parseFloat(style.opacity);
+  const safeOpacity = isNaN(elementOpacity) ? 1 : elementOpacity;
 
   const widthPx = node.offsetWidth || rect.width;
   const heightPx = node.offsetHeight || rect.height;
@@ -8545,21 +8621,31 @@ async function createRenderItem(node, config, domOrder, pptx) {
 
   const items = [];
 
-  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 };
+  // --- ASYNC JOB: SVGs / Icons ---
+  if (
+    node.nodeName.toUpperCase() === 'SVG' ||
+    node.tagName.includes('-') ||
+    node.tagName === 'ION-ICON'
+  ) {
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+    };
+
+    // Create Job
+    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 };
   }
 
-  // --- UPDATED IMG BLOCK START ---
+  // --- ASYNC JOB: IMG Tags ---
   if (node.tagName === 'IMG') {
-    // Extract individual corner radii
     let radii = {
       tl: parseFloat(style.borderTopLeftRadius) || 0,
       tr: parseFloat(style.borderTopRightRadius) || 0,
@@ -8568,8 +8654,6 @@ async function createRenderItem(node, config, domOrder, pptx) {
     };
 
     const hasAnyRadius = radii.tl > 0 || radii.tr > 0 || radii.br > 0 || radii.bl > 0;
-
-    // Fallback: Check parent if image has no specific radius but parent clips it
     if (!hasAnyRadius) {
       const parent = node.parentElement;
       const parentStyle = window.getComputedStyle(parent);
@@ -8580,10 +8664,6 @@ async function createRenderItem(node, config, domOrder, pptx) {
           br: parseFloat(parentStyle.borderBottomRightRadius) || 0,
           bl: parseFloat(parentStyle.borderBottomLeftRadius) || 0,
         };
-        // Simple heuristic: If image takes up full size of parent, inherit radii.
-        // For complex grids (like slide-1), this blindly applies parent radius.
-        // In a perfect world, we'd calculate intersection, but for now we apply parent radius
-        // if the image is close to the parent's size, effectively masking it.
         const pRect = parent.getBoundingClientRect();
         if (Math.abs(pRect.width - rect.width) < 5 && Math.abs(pRect.height - rect.height) < 5) {
           radii = pRadii;
@@ -8591,19 +8671,23 @@ async function createRenderItem(node, config, domOrder, pptx) {
       }
     }
 
-    const processed = await getProcessedImage(node.src, widthPx, heightPx, radii);
-    if (processed)
-      items.push({
-        type: 'image',
-        zIndex,
-        domOrder,
-        options: { data: processed, x, y, w, h, rotate: rotation },
-      });
-    return { items, stopRecursion: true };
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: { x, y, w, h, rotate: rotation, data: null },
+    };
+
+    const job = async () => {
+      const processed = await getProcessedImage(node.src, widthPx, heightPx, radii);
+      if (processed) item.options.data = processed;
+      else item.skip = true;
+    };
+
+    return { items: [item], job, stopRecursion: true };
   }
-  // --- UPDATED IMG BLOCK END ---
 
-  // Radii processing for Divs/Shapes
+  // Radii logic
   const borderRadiusValue = parseFloat(style.borderRadius) || 0;
   const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;
   const borderBottomRightRadius = parseFloat(style.borderBottomRightRadius) || 0;
@@ -8621,25 +8705,30 @@ async function createRenderItem(node, config, domOrder, pptx) {
         borderTopLeftRadius ||
         borderTopRightRadius));
 
-  // Allow clipped elements to be rendered via canvas
+  // --- ASYNC JOB: Clipped Divs via Canvas ---
   if (hasPartialBorderRadius && isClippedByParent(node)) {
     const marginLeft = parseFloat(style.marginLeft) || 0;
     const marginTop = parseFloat(style.marginTop) || 0;
     x += marginLeft * PX_TO_INCH * config.scale;
     y += marginTop * PX_TO_INCH * config.scale;
 
-    const canvasImageData = await elementToCanvasImage(node, widthPx, heightPx, config.root);
-    if (canvasImageData) {
-      items.push({
-        type: 'image',
-        zIndex,
-        domOrder,
-        options: { data: canvasImageData, x, y, w, h, rotate: rotation },
-      });
-      return { items, stopRecursion: true };
-    }
+    const item = {
+      type: 'image',
+      zIndex,
+      domOrder,
+      options: { x, y, w, h, rotate: rotation, data: null },
+    };
+
+    const job = async () => {
+      const canvasImageData = await elementToCanvasImage(node, widthPx, heightPx);
+      if (canvasImageData) item.options.data = canvasImageData;
+      else item.skip = true;
+    };
+
+    return { items: [item], job, stopRecursion: true };
   }
 
+  // --- SYNC: Standard CSS Extraction ---
   const bgColorObj = parseColor(style.backgroundColor);
   const bgClip = style.webkitBackgroundClip || style.backgroundClip;
   const isBgClipText = bgClip === 'text';
@@ -8678,7 +8767,7 @@ async function createRenderItem(node, config, domOrder, pptx) {
       x -= bulletShift;
       w += bulletShift;
       textParts.push({
-        text: '• ',
+        text: '    ',
         options: {
           color: parseColor(style.color).hex || '000000',
           fontSize: fontSizePt,
@@ -8784,7 +8873,6 @@ async function createRenderItem(node, config, domOrder, pptx) {
       });
     }
     if (hasCompositeBorder) {
-      // Add border shapes after the main background
       const borderItems = createCompositeBorderItems(
         borderInfo.sides,
         x,
@@ -8804,7 +8892,7 @@ async function createRenderItem(node, config, domOrder, pptx) {
     hasShadow ||
     textPayload
   ) {
-    const finalAlpha = elementOpacity * bgColorObj.opacity;
+    const finalAlpha = safeOpacity * bgColorObj.opacity;
     const transparency = (1 - finalAlpha) * 100;
     const useSolidFill = bgColorObj.hex && !isImageWrapper;
 
@@ -8826,14 +8914,7 @@ async function createRenderItem(node, config, domOrder, pptx) {
         type: 'image',
         zIndex,
         domOrder,
-        options: {
-          data: shapeSvg,
-          x,
-          y,
-          w,
-          h,
-          rotate: rotation,
-        },
+        options: { data: shapeSvg, x, y, w, h, rotate: rotation },
       });
     } else {
       const shapeOpts = {
@@ -8848,9 +8929,7 @@ async function createRenderItem(node, config, domOrder, pptx) {
         line: hasUniformBorder ? borderInfo.options : null,
       };
 
-      if (hasShadow) {
-        shapeOpts.shadow = getVisibleShadow(shadowStr, config.scale);
-      }
+      if (hasShadow) shapeOpts.shadow = getVisibleShadow(shadowStr, config.scale);
 
       const borderRadius = parseFloat(style.borderRadius) || 0;
       const aspectRatio = Math.max(widthPx, heightPx) / Math.min(widthPx, heightPx);
@@ -8913,77 +8992,49 @@ async function createRenderItem(node, config, domOrder, pptx) {
   return { items, stopRecursion: !!textPayload };
 }
 
-/**
- * Helper function to create individual border shapes
- */
 function createCompositeBorderItems(sides, x, y, w, h, scale, zIndex, domOrder) {
   const items = [];
   const pxToInch = 1 / 96;
+  const common = { zIndex: zIndex + 1, domOrder, shapeType: 'rect' };
 
-  // TOP BORDER
-  if (sides.top.width > 0) {
+  if (sides.top.width > 0)
     items.push({
-      type: 'shape',
-      zIndex: zIndex + 1,
-      domOrder,
-      shapeType: 'rect',
-      options: {
-        x: x,
-        y: y,
-        w: w,
-        h: sides.top.width * pxToInch * scale,
-        fill: { color: sides.top.color },
-      },
+      ...common,
+      options: { x, y, w, h: sides.top.width * pxToInch * scale, fill: { color: sides.top.color } },
     });
-  }
-  // RIGHT BORDER
-  if (sides.right.width > 0) {
+  if (sides.right.width > 0)
     items.push({
-      type: 'shape',
-      zIndex: zIndex + 1,
-      domOrder,
-      shapeType: 'rect',
+      ...common,
       options: {
         x: x + w - sides.right.width * pxToInch * scale,
-        y: y,
+        y,
         w: sides.right.width * pxToInch * scale,
-        h: h,
+        h,
         fill: { color: sides.right.color },
       },
     });
-  }
-  // BOTTOM BORDER
-  if (sides.bottom.width > 0) {
+  if (sides.bottom.width > 0)
     items.push({
-      type: 'shape',
-      zIndex: zIndex + 1,
-      domOrder,
-      shapeType: 'rect',
+      ...common,
       options: {
-        x: x,
+        x,
         y: y + h - sides.bottom.width * pxToInch * scale,
-        w: w,
+        w,
         h: sides.bottom.width * pxToInch * scale,
         fill: { color: sides.bottom.color },
       },
     });
-  }
-  // LEFT BORDER
-  if (sides.left.width > 0) {
+  if (sides.left.width > 0)
     items.push({
-      type: 'shape',
-      zIndex: zIndex + 1,
-      domOrder,
-      shapeType: 'rect',
+      ...common,
       options: {
-        x: x,
-        y: y,
+        x,
+        y,
         w: sides.left.width * pxToInch * scale,
-        h: h,
+        h,
         fill: { color: sides.left.color },
       },
     });
-  }
 
   return items;
 }