dom-to-pptx 1.0.5 → 1.0.7

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

@@ -4,7 +4,8 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.domToPptx = {}, global.PptxGenJS));
 })(this, (function (exports, PptxGenJSImport) { 'use strict';
 
-    function _interopNamespaceDefault(e) {
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
         var n = Object.create(null);
         if (e) {
             Object.keys(e).forEach(function (k) {
@@ -17,11 +18,11 @@
                 }
             });
         }
-        n.default = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
-    var PptxGenJSImport__namespace = /*#__PURE__*/_interopNamespaceDefault(PptxGenJSImport);
+    var PptxGenJSImport__namespace = /*#__PURE__*/_interopNamespace(PptxGenJSImport);
 
     /*!
      * html2canvas 1.4.1 <https://html2canvas.hertzen.com>
@@ -76,7 +77,7 @@
             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());
         });
     }
 
@@ -109,7 +110,7 @@
     }
 
     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];
@@ -7978,17 +7979,20 @@
      */
     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 = `
@@ -8019,7 +8023,10 @@
       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);
@@ -8082,25 +8089,35 @@
 
       // 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;
@@ -8118,62 +8135,6 @@
       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(/,(?![^()]*\))/);
@@ -8212,16 +8173,29 @@
         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 = '';
@@ -8296,81 +8270,84 @@
       };
     }
 
-    // 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
@@ -8442,66 +8419,115 @@
       };
 
       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;
@@ -8521,38 +8547,89 @@
               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;
@@ -8568,21 +8645,31 @@
 
       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,
@@ -8591,8 +8678,6 @@
         };
 
         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);
@@ -8603,10 +8688,6 @@
               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;
@@ -8614,19 +8695,23 @@
           }
         }
 
-        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;
@@ -8644,25 +8729,30 @@
             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';
@@ -8701,7 +8791,7 @@
           x -= bulletShift;
           w += bulletShift;
           textParts.push({
-            text: '• ',
+            text: '    ',
             options: {
               color: parseColor(style.color).hex || '000000',
               fontSize: fontSizePt,
@@ -8807,7 +8897,6 @@
           });
         }
         if (hasCompositeBorder) {
-          // Add border shapes after the main background
           const borderItems = createCompositeBorderItems(
             borderInfo.sides,
             x,
@@ -8827,7 +8916,7 @@
         hasShadow ||
         textPayload
       ) {
-        const finalAlpha = elementOpacity * bgColorObj.opacity;
+        const finalAlpha = safeOpacity * bgColorObj.opacity;
         const transparency = (1 - finalAlpha) * 100;
         const useSolidFill = bgColorObj.hex && !isImageWrapper;
 
@@ -8849,14 +8938,7 @@
             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 = {
@@ -8871,9 +8953,7 @@
             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);
@@ -8936,77 +9016,49 @@
       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;
     }