docgen-utils 1.0.6 → 1.0.8

package/dist/bundle.js

@@ -28641,6 +28641,16 @@ ${generateStylesCss(styleMap, themeFonts)}
       return "FFFFFF";
     return match.slice(1).map((n) => parseInt(n).toString(16).padStart(2, "0")).join("");
   }
+  function isFullyTransparent(colorStr) {
+    if (colorStr === "transparent" || colorStr === "rgba(0, 0, 0, 0)")
+      return true;
+    const match = colorStr.match(/rgba\(\d+,\s*\d+,\s*\d+,\s*([\d.]+)\)/);
+    if (match) {
+      const alpha = parseFloat(match[1]);
+      return alpha <= 0;
+    }
+    return false;
+  }
   function extractAlpha(rgbStr) {
     const match = rgbStr.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
     if (!match || !match[4])
@@ -28650,7 +28660,10 @@ ${generateStylesCss(styleMap, themeFonts)}
   }
   function parseCssGradient(gradientStr) {
     const colorToHex = (colorStr) => {
-      colorStr = colorStr.trim();
+      colorStr = colorStr.trim().toLowerCase();
+      if (colorStr === "transparent") {
+        return "000000";
+      }
       if (colorStr.startsWith("#")) {
         let hex = colorStr.slice(1);
         if (hex.length === 3)
@@ -28664,7 +28677,10 @@ ${generateStylesCss(styleMap, themeFonts)}
       return "FFFFFF";
     };
     const extractTransparency = (colorStr) => {
-      colorStr = colorStr.trim();
+      colorStr = colorStr.trim().toLowerCase();
+      if (colorStr === "transparent") {
+        return 100;
+      }
       const rgbaMatch = colorStr.match(/rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/);
       if (rgbaMatch) {
         const alpha = parseFloat(rgbaMatch[1]);
@@ -28785,6 +28801,89 @@ ${generateStylesCss(styleMap, themeFonts)}
     const normalizedFont = fontFamily.toLowerCase().replace(/['"]/g, "").split(",")[0].trim();
     return SINGLE_WEIGHT_FONTS.includes(normalizedFont);
   }
+  function extractLetterSpacing(computed) {
+    const ls = computed.letterSpacing;
+    if (!ls || ls === "normal" || ls === "0px")
+      return null;
+    const pxVal = parseFloat(ls);
+    if (isNaN(pxVal) || pxVal === 0)
+      return null;
+    return pxVal * PT_PER_PX;
+  }
+  function parseTextShadow(textShadow) {
+    if (!textShadow || textShadow === "none")
+      return { glow: null, shadow: null };
+    const shadows = [];
+    let current = "";
+    let depth = 0;
+    for (const char of textShadow) {
+      if (char === "(")
+        depth++;
+      else if (char === ")")
+        depth--;
+      if (char === "," && depth === 0) {
+        shadows.push(current.trim());
+        current = "";
+      } else {
+        current += char;
+      }
+    }
+    if (current.trim())
+      shadows.push(current.trim());
+    let bestGlow = null;
+    let bestShadow = null;
+    let bestGlowBlur = 0;
+    let bestShadowOffset = 0;
+    for (const shadowStr of shadows) {
+      const colorMatch = shadowStr.match(/rgba?\([^)]+\)/);
+      const numericParts = shadowStr.match(/([-\d.]+)px/g);
+      if (!numericParts || numericParts.length < 2)
+        continue;
+      const offsetX = parseFloat(numericParts[0]);
+      const offsetY = parseFloat(numericParts[1]);
+      const blur = numericParts.length > 2 ? parseFloat(numericParts[2]) : 0;
+      if (blur <= 0)
+        continue;
+      let opacity = 1;
+      if (colorMatch) {
+        const alphaMatch = colorMatch[0].match(/rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/);
+        if (alphaMatch) {
+          opacity = parseFloat(alphaMatch[1]);
+        }
+      }
+      const color = colorMatch ? rgbToHex(colorMatch[0]) : "000000";
+      const isGlow = Math.abs(offsetX) < 1 && Math.abs(offsetY) < 1;
+      if (isGlow) {
+        const GLOW_SIZE_SCALE = 2.5;
+        const GLOW_OPACITY_SCALE = 0.3;
+        if (blur > bestGlowBlur) {
+          bestGlowBlur = blur;
+          bestGlow = {
+            size: blur * PT_PER_PX * GLOW_SIZE_SCALE,
+            color,
+            opacity: Math.min(opacity * GLOW_OPACITY_SCALE, 1)
+          };
+        }
+      } else {
+        const offset = Math.sqrt(offsetX * offsetX + offsetY * offsetY);
+        if (offset > bestShadowOffset) {
+          bestShadowOffset = offset;
+          let angle = Math.atan2(offsetY, offsetX) * (180 / Math.PI);
+          if (angle < 0)
+            angle += 360;
+          bestShadow = {
+            type: "outer",
+            angle: Math.round(angle),
+            blur: blur * PT_PER_PX,
+            color,
+            offset: offset * PT_PER_PX,
+            opacity
+          };
+        }
+      }
+    }
+    return { glow: bestGlow, shadow: bestShadow };
+  }
   function applyTextTransform(text, textTransform) {
     if (textTransform === "uppercase")
       return text.toUpperCase();
@@ -28844,6 +28943,134 @@ ${generateStylesCss(styleMap, themeFonts)}
       h: el.offsetHeight
     };
   }
+  function applyImageFilter(img, filter) {
+    try {
+      if (!img.naturalWidth || !img.naturalHeight)
+        return img.src;
+      if (!filter || filter === "none")
+        return img.src;
+      const canvas = document.createElement("canvas");
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      const ctx = canvas.getContext("2d");
+      if (!ctx)
+        return img.src;
+      ctx.filter = filter;
+      ctx.drawImage(img, 0, 0);
+      return canvas.toDataURL("image/jpeg", 0.9);
+    } catch {
+      return img.src;
+    }
+  }
+  function applyImageMask(img, maskGradient, displayWidth, displayHeight, cssOpacity) {
+    try {
+      if (!img.naturalWidth || !img.naturalHeight)
+        return null;
+      if (!img.complete)
+        return null;
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.round(displayWidth);
+      canvas.height = Math.round(displayHeight);
+      const ctx = canvas.getContext("2d");
+      if (!ctx)
+        return null;
+      if (cssOpacity !== void 0 && cssOpacity < 1) {
+        ctx.globalAlpha = cssOpacity;
+      }
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      ctx.globalAlpha = 1;
+      try {
+        ctx.getImageData(0, 0, 1, 1);
+      } catch {
+        return null;
+      }
+      applyMaskGradientToCanvas(ctx, canvas.width, canvas.height, maskGradient);
+      return canvas.toDataURL("image/png");
+    } catch {
+      return null;
+    }
+  }
+  function applyMaskGradientToCanvas(ctx, width, height, maskGradient) {
+    ctx.globalCompositeOperation = "destination-in";
+    let gradient;
+    if (maskGradient.type === "radial") {
+      const cx = (maskGradient.centerX ?? 50) / 100 * width;
+      const cy = (maskGradient.centerY ?? 50) / 100 * height;
+      const radius = Math.max(width, height);
+      gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
+    } else {
+      const cssAngle = maskGradient.angle ?? 180;
+      const angleRad = (cssAngle - 90) * Math.PI / 180;
+      let x1, y1, x2, y2;
+      if (cssAngle === 0) {
+        x1 = width / 2;
+        y1 = height;
+        x2 = width / 2;
+        y2 = 0;
+      } else if (cssAngle === 90) {
+        x1 = 0;
+        y1 = height / 2;
+        x2 = width;
+        y2 = height / 2;
+      } else if (cssAngle === 180) {
+        x1 = width / 2;
+        y1 = 0;
+        x2 = width / 2;
+        y2 = height;
+      } else if (cssAngle === 270) {
+        x1 = width;
+        y1 = height / 2;
+        x2 = 0;
+        y2 = height / 2;
+      } else {
+        const halfDiag = Math.sqrt(width * width + height * height) / 2;
+        const cx = width / 2;
+        const cy = height / 2;
+        x1 = cx - Math.cos(angleRad) * halfDiag;
+        y1 = cy - Math.sin(angleRad) * halfDiag;
+        x2 = cx + Math.cos(angleRad) * halfDiag;
+        y2 = cy + Math.sin(angleRad) * halfDiag;
+      }
+      gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+    }
+    for (const stop of maskGradient.stops) {
+      const alpha = stop.transparency !== void 0 ? (100 - stop.transparency) / 100 : 1;
+      gradient.addColorStop(stop.position / 100, `rgba(255,255,255,${alpha})`);
+    }
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+  }
+  function parseCssFilter(filter) {
+    if (!filter || filter === "none")
+      return null;
+    const result = {};
+    let hasValues = false;
+    const brightnessMatch = filter.match(/brightness\(([\d.]+)\)/);
+    if (brightnessMatch) {
+      const val = parseFloat(brightnessMatch[1]);
+      if (val !== 1) {
+        result.brightness = Math.round((val - 1) * 100);
+        hasValues = true;
+      }
+    }
+    const contrastMatch = filter.match(/contrast\(([\d.]+)\)/);
+    if (contrastMatch) {
+      const val = parseFloat(contrastMatch[1]);
+      if (val !== 1) {
+        result.contrast = Math.round((val - 1) * 100);
+        hasValues = true;
+      }
+    }
+    const saturateMatch = filter.match(/saturate\(([\d.]+)\)/);
+    if (saturateMatch) {
+      const val = parseFloat(saturateMatch[1]);
+      if (val !== 1) {
+        result.saturation = Math.round(val * 100);
+        hasValues = true;
+      }
+    }
+    return hasValues ? result : null;
+  }
   function parseBoxShadow(boxShadow) {
     if (!boxShadow || boxShadow === "none")
       return null;
@@ -28880,6 +29107,103 @@ ${generateStylesCss(styleMap, themeFonts)}
       opacity
     };
   }
+  function extractPseudoElements(el, win) {
+    const results = [];
+    const parentRect = el.getBoundingClientRect();
+    if (parentRect.width <= 0 || parentRect.height <= 0)
+      return results;
+    for (const pseudo of ["::before", "::after"]) {
+      const pComputed = win.getComputedStyle(el, pseudo);
+      const content = pComputed.content;
+      if (!content || content === "none" || content === "normal")
+        continue;
+      if (pComputed.display === "none")
+        continue;
+      let pWidth = parseFloat(pComputed.width);
+      let pHeight = parseFloat(pComputed.height);
+      if (isNaN(pWidth) || pWidth <= 0) {
+        const left = parseFloat(pComputed.left);
+        const right = parseFloat(pComputed.right);
+        if (!isNaN(left) && !isNaN(right)) {
+          pWidth = parentRect.width - left - right;
+        } else {
+          pWidth = parentRect.width;
+        }
+      }
+      if (isNaN(pHeight) || pHeight <= 0) {
+        const top = parseFloat(pComputed.top);
+        const bottom = parseFloat(pComputed.bottom);
+        if (!isNaN(top) && !isNaN(bottom)) {
+          pHeight = parentRect.height - top - bottom;
+        } else {
+          pHeight = parentRect.height;
+        }
+      }
+      if (pWidth < 1 || pHeight < 1)
+        continue;
+      let pLeft = parseFloat(pComputed.left);
+      let pTop = parseFloat(pComputed.top);
+      if (isNaN(pLeft))
+        pLeft = 0;
+      if (isNaN(pTop))
+        pTop = 0;
+      const absLeft = parentRect.left + pLeft;
+      const absTop = parentRect.top + pTop;
+      const hasBg = pComputed.backgroundColor && pComputed.backgroundColor !== "rgba(0, 0, 0, 0)";
+      const bgImage = pComputed.backgroundImage;
+      const hasGradient = bgImage && bgImage !== "none" && (bgImage.includes("linear-gradient") || bgImage.includes("radial-gradient"));
+      const hasBgImage = bgImage && bgImage !== "none" && bgImage.includes("url(");
+      if (!hasBg && !hasGradient && !hasBgImage)
+        continue;
+      let gradient = null;
+      if (hasGradient) {
+        gradient = parseCssGradient(bgImage);
+      }
+      const elementOpacity = parseFloat(pComputed.opacity);
+      const hasOpacity = !isNaN(elementOpacity) && elementOpacity < 1;
+      let rectRadius = 0;
+      const borderRadius = pComputed.borderRadius;
+      const radiusValue = parseFloat(borderRadius);
+      if (radiusValue > 0) {
+        if (borderRadius.includes("%")) {
+          if (radiusValue >= 50) {
+            rectRadius = 1;
+          } else {
+            const minDim = Math.min(pWidth, pHeight);
+            rectRadius = radiusValue / 100 * pxToInch(minDim);
+          }
+        } else {
+          rectRadius = pxToInch(radiusValue);
+        }
+      }
+      const shadow = parseBoxShadow(pComputed.boxShadow);
+      const shapeElement = {
+        type: "shape",
+        text: "",
+        textRuns: null,
+        style: null,
+        position: {
+          x: pxToInch(absLeft),
+          y: pxToInch(absTop),
+          w: pxToInch(pWidth),
+          h: pxToInch(pHeight)
+        },
+        shape: {
+          fill: hasBg ? rgbToHex(pComputed.backgroundColor) : null,
+          gradient,
+          transparency: hasBg ? extractAlpha(pComputed.backgroundColor) : null,
+          line: null,
+          rectRadius,
+          shadow,
+          opacity: hasOpacity ? elementOpacity : null,
+          isEllipse: false,
+          softEdge: null
+        }
+      };
+      results.push(shapeElement);
+    }
+    return results;
+  }
   function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, win) {
     let prevNodeIsText = false;
     let pendingSoftBreak = false;
@@ -28906,7 +29230,32 @@ ${generateStylesCss(styleMap, themeFonts)}
         const el = node;
         const options = { ...baseOptions };
         const computed = win.getComputedStyle(el);
-        if (el.tagName === "SPAN" || el.tagName === "B" || el.tagName === "STRONG" || el.tagName === "I" || el.tagName === "EM" || el.tagName === "U") {
+        const inlineTags = /* @__PURE__ */ new Set([
+          "SPAN",
+          "B",
+          "STRONG",
+          "I",
+          "EM",
+          "U",
+          "CODE",
+          "A",
+          "MARK",
+          "SUB",
+          "SUP",
+          "SMALL",
+          "S",
+          "DEL",
+          "INS",
+          "ABBR",
+          "TIME",
+          "CITE",
+          "Q",
+          "DFN",
+          "KBD",
+          "SAMP",
+          "VAR"
+        ]);
+        if (inlineTags.has(el.tagName)) {
           const isBold = computed.fontWeight === "bold" || parseInt(computed.fontWeight) >= 600;
           if (isBold && !shouldSkipBold(computed.fontFamily))
             options.bold = true;
@@ -28922,6 +29271,12 @@ ${generateStylesCss(styleMap, themeFonts)}
           }
           if (computed.fontSize)
             options.fontSize = pxToPoints(computed.fontSize);
+          if (computed.fontFamily) {
+            options.fontFace = computed.fontFamily.split(",")[0].replace(/['"]/g, "").trim();
+          }
+          const runLetterSpacing = extractLetterSpacing(computed);
+          if (runLetterSpacing !== null)
+            options.charSpacing = runLetterSpacing;
           if (computed.textTransform && computed.textTransform !== "none") {
             const transformStr = computed.textTransform;
             textTransform = (text) => applyTextTransform(text, transformStr);
@@ -28968,6 +29323,8 @@ ${generateStylesCss(styleMap, themeFonts)}
     const placeholders = [];
     const textTags = ["P", "H1", "H2", "H3", "H4", "H5", "H6", "UL", "OL", "LI", "SPAN"];
     const processed = /* @__PURE__ */ new Set();
+    const bodyPseudoElements = extractPseudoElements(body, win);
+    elements.push(...bodyPseudoElements);
     doc.querySelectorAll("*").forEach((el) => {
       if (processed.has(el))
         return;
@@ -28986,7 +29343,9 @@ ${generateStylesCss(styleMap, themeFonts)}
         const computed2 = win.getComputedStyle(el);
         const hasBg = computed2.backgroundColor && computed2.backgroundColor !== "rgba(0, 0, 0, 0)";
         const hasBorder = computed2.borderWidth && parseFloat(computed2.borderWidth) > 0 || computed2.borderTopWidth && parseFloat(computed2.borderTopWidth) > 0 || computed2.borderRightWidth && parseFloat(computed2.borderRightWidth) > 0 || computed2.borderBottomWidth && parseFloat(computed2.borderBottomWidth) > 0 || computed2.borderLeftWidth && parseFloat(computed2.borderLeftWidth) > 0;
-        if (hasBg || hasBorder) {
+        const spanBgImage = computed2.backgroundImage;
+        const hasGradientBg = spanBgImage && spanBgImage !== "none" && (spanBgImage.includes("linear-gradient") || spanBgImage.includes("radial-gradient"));
+        if (hasBg || hasBorder || hasGradientBg) {
           const rect2 = htmlEl.getBoundingClientRect();
           if (rect2.width > 0 && rect2.height > 0) {
             const text2 = el.textContent.trim();
@@ -28994,7 +29353,10 @@ ${generateStylesCss(styleMap, themeFonts)}
             const borderRadius = computed2.borderRadius;
             const radiusValue = parseFloat(borderRadius);
             let rectRadius = 0;
-            if (radiusValue > 0) {
+            const isCircularRadius = borderRadius.includes("%") ? radiusValue >= 50 : radiusValue > 0 && radiusValue >= Math.min(rect2.width, rect2.height) / 2 - 1;
+            const aspectRatio = rect2.width / rect2.height;
+            const spanIsEllipse = isCircularRadius && aspectRatio > 0.5 && aspectRatio < 2;
+            if (radiusValue > 0 && !spanIsEllipse) {
               if (borderRadius.includes("%")) {
                 const minDim = Math.min(rect2.width, rect2.height);
                 rectRadius = radiusValue / 100 * pxToInch(minDim);
@@ -29007,6 +29369,9 @@ ${generateStylesCss(styleMap, themeFonts)}
             const borderBottom = computed2.borderBottomWidth;
             const borderLeft = computed2.borderLeftWidth;
             const hasUniformBorder = hasBorder && borderTop === borderRight && borderRight === borderBottom && borderBottom === borderLeft;
+            const spanOpacity = parseFloat(computed2.opacity);
+            const hasSpanOpacity = !isNaN(spanOpacity) && spanOpacity < 1;
+            const spanShadow = parseBoxShadow(computed2.boxShadow);
             const shapeElement = {
               type: "shape",
               position: {
@@ -29017,24 +29382,28 @@ ${generateStylesCss(styleMap, themeFonts)}
               },
               text: text2,
               textRuns: null,
-              style: {
+              style: text2 ? {
                 fontSize: pxToPoints(computed2.fontSize),
                 fontFace: computed2.fontFamily.split(",")[0].replace(/['"]/g, "").trim(),
                 color: rgbToHex(computed2.color),
                 bold: parseInt(computed2.fontWeight) >= 600,
                 align: "center",
                 valign: "middle"
-              },
+              } : null,
               shape: {
                 fill: hasBg ? rgbToHex(computed2.backgroundColor) : null,
                 gradient: bgGradient,
-                transparency: null,
+                transparency: hasBg ? extractAlpha(computed2.backgroundColor) : null,
                 line: hasUniformBorder ? {
                   color: rgbToHex(computed2.borderColor),
-                  width: pxToPoints(borderTop)
+                  width: pxToPoints(borderTop),
+                  transparency: extractAlpha(computed2.borderColor)
                 } : null,
-                rectRadius,
-                shadow: null
+                rectRadius: spanIsEllipse ? 0 : rectRadius,
+                shadow: spanShadow,
+                opacity: hasSpanOpacity ? spanOpacity : null,
+                isEllipse: spanIsEllipse,
+                softEdge: null
               }
             };
             elements.push(shapeElement);
@@ -29104,47 +29473,198 @@ ${generateStylesCss(styleMap, themeFonts)}
           const isFullSlideImage = coversWidth && coversHeight && nearOrigin;
           const objectFit = imgComputed.objectFit;
           let imgRectRadius = null;
+          let clipLeft = rect2.left;
+          let clipTop = rect2.top;
+          let clipRight = rect2.right;
+          let clipBottom = rect2.bottom;
           let ancestor = el.parentElement;
           while (ancestor && ancestor !== doc.body) {
             const ancestorComputed = win.getComputedStyle(ancestor);
             const ancestorOverflow = ancestorComputed.overflow;
-            const ancestorBorderRadius = ancestorComputed.borderRadius;
-            if ((ancestorOverflow === "hidden" || ancestorOverflow === "clip") && ancestorBorderRadius) {
-              const radiusValue = parseFloat(ancestorBorderRadius);
-              if (radiusValue > 0) {
-                if (ancestorBorderRadius.includes("%")) {
-                  const ancestorRect = ancestor.getBoundingClientRect();
-                  const minDim = Math.min(ancestorRect.width, ancestorRect.height);
-                  imgRectRadius = radiusValue / 100 * pxToInch(minDim);
-                } else if (ancestorBorderRadius.includes("pt")) {
-                  imgRectRadius = radiusValue / 72;
-                } else {
-                  imgRectRadius = pxToInch(radiusValue);
+            if (ancestorOverflow === "hidden" || ancestorOverflow === "clip") {
+              const ancestorRect = ancestor.getBoundingClientRect();
+              clipLeft = Math.max(clipLeft, ancestorRect.left);
+              clipTop = Math.max(clipTop, ancestorRect.top);
+              clipRight = Math.min(clipRight, ancestorRect.right);
+              clipBottom = Math.min(clipBottom, ancestorRect.bottom);
+              const ancestorBorderRadius = ancestorComputed.borderRadius;
+              if (ancestorBorderRadius && imgRectRadius === null) {
+                const radiusValue = parseFloat(ancestorBorderRadius);
+                if (radiusValue > 0) {
+                  if (ancestorBorderRadius.includes("%")) {
+                    const minDim = Math.min(ancestorRect.width, ancestorRect.height);
+                    imgRectRadius = radiusValue / 100 * pxToInch(minDim);
+                  } else if (ancestorBorderRadius.includes("pt")) {
+                    imgRectRadius = radiusValue / 72;
+                  } else {
+                    imgRectRadius = pxToInch(radiusValue);
+                  }
                 }
-                break;
               }
             }
             ancestor = ancestor.parentElement;
           }
+          const clippedW = Math.max(0, clipRight - clipLeft);
+          const clippedH = Math.max(0, clipBottom - clipTop);
+          const wasClipped = clippedW < rect2.width - 1 || clippedH < rect2.height - 1;
+          const cssFilter = imgComputed.filter;
+          let imgSrc = el.src;
+          let filterPreBaked = false;
+          if (cssFilter && cssFilter !== "none") {
+            const bakedSrc = applyImageFilter(el, cssFilter);
+            if (bakedSrc !== imgSrc) {
+              imgSrc = bakedSrc;
+              filterPreBaked = true;
+            }
+          }
+          const maskImageProp = imgComputed.maskImage || imgComputed.webkitMaskImage || imgComputed.getPropertyValue("mask-image") || imgComputed.getPropertyValue("-webkit-mask-image");
+          const imgOpacity = parseFloat(imgComputed.opacity);
+          const hasOpacity = !isNaN(imgOpacity) && imgOpacity < 1 && imgOpacity >= 0;
+          let maskApplied = false;
+          if (maskImageProp && maskImageProp !== "none" && (maskImageProp.includes("linear-gradient") || maskImageProp.includes("radial-gradient"))) {
+            const maskGradient = parseCssGradient(maskImageProp);
+            if (maskGradient) {
+              const displayW = wasClipped ? clippedW : rect2.width;
+              const displayH = wasClipped ? clippedH : rect2.height;
+              const maskedSrc = applyImageMask(el, maskGradient, displayW, displayH, hasOpacity ? imgOpacity : void 0);
+              if (maskedSrc) {
+                imgSrc = maskedSrc;
+                maskApplied = true;
+              }
+            }
+          }
+          const imgEl = el;
+          const natW = imgEl.naturalWidth;
+          const natH = imgEl.naturalHeight;
           const imageElement = {
             type: isFullSlideImage ? "slideBackgroundImage" : "image",
-            src: el.src,
+            src: imgSrc,
             position: {
-              x: pxToInch(rect2.left),
-              y: pxToInch(rect2.top),
-              w: pxToInch(rect2.width),
-              h: pxToInch(rect2.height)
+              x: pxToInch(wasClipped ? clipLeft : rect2.left),
+              y: pxToInch(wasClipped ? clipTop : rect2.top),
+              w: pxToInch(wasClipped ? clippedW : rect2.width),
+              h: pxToInch(wasClipped ? clippedH : rect2.height)
             },
             sizing: objectFit === "cover" ? { type: "cover" } : null
           };
+          if (objectFit === "cover" && natW > 0 && natH > 0 && !isFullSlideImage) {
+            imageElement.naturalWidth = natW;
+            imageElement.naturalHeight = natH;
+          }
           if (imgRectRadius !== null) {
             imageElement.rectRadius = imgRectRadius;
           }
+          if (!filterPreBaked && cssFilter && cssFilter !== "none") {
+            const filterValues = parseCssFilter(cssFilter);
+            if (filterValues) {
+              if (filterValues.brightness !== void 0) {
+                imageElement.brightness = filterValues.brightness;
+              }
+              if (filterValues.contrast !== void 0) {
+                imageElement.contrast = filterValues.contrast;
+              }
+              if (filterValues.saturation !== void 0) {
+                imageElement.saturation = filterValues.saturation;
+              }
+            }
+          }
+          if (hasOpacity && !maskApplied) {
+            imageElement.transparency = Math.round((1 - imgOpacity) * 100);
+          }
           elements.push(imageElement);
           processed.add(el);
           return;
         }
       }
+      if (el.tagName === "svg") {
+        const rect2 = htmlEl.getBoundingClientRect();
+        if (rect2.width > 0 && rect2.height > 0) {
+          const computedStyle = win.getComputedStyle(htmlEl);
+          const opacity = parseFloat(computedStyle.opacity || "1");
+          if (opacity < 0.1) {
+            processed.add(el);
+            el.querySelectorAll("*").forEach((child) => processed.add(child));
+            return;
+          }
+          const svgEl = el;
+          const hasFilter = svgEl.querySelector("filter, pattern");
+          const hasRenderableContent = svgEl.querySelector("path, circle, ellipse, line, polyline, polygon, text, image");
+          const allRects = svgEl.querySelectorAll("rect");
+          const hasRectWithoutFilter = Array.from(allRects).some((r) => !r.getAttribute("filter")?.startsWith("url("));
+          const hasOnlyFilterPattern = hasFilter && !hasRenderableContent && !hasRectWithoutFilter;
+          if (hasOnlyFilterPattern) {
+            processed.add(el);
+            el.querySelectorAll("*").forEach((child) => processed.add(child));
+            return;
+          }
+          const usesFilterRef = svgEl.querySelector('[filter^="url("]');
+          if (hasFilter && usesFilterRef && !hasRenderableContent) {
+            processed.add(el);
+            el.querySelectorAll("*").forEach((child) => processed.add(child));
+            return;
+          }
+          const svgClone = el.cloneNode(true);
+          if (!svgClone.hasAttribute("xmlns")) {
+            svgClone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+          }
+          svgClone.setAttribute("width", String(rect2.width));
+          svgClone.setAttribute("height", String(rect2.height));
+          const computedColor = win.getComputedStyle(htmlEl).color;
+          const rootStyles = win.getComputedStyle(doc.documentElement);
+          const resolveColorValue = (value) => {
+            if (!value)
+              return null;
+            if (value === "currentColor") {
+              return computedColor || null;
+            }
+            const varMatch = value.match(/^var\(\s*(--[\w-]+)(?:\s*,\s*(.+))?\s*\)$/);
+            if (varMatch) {
+              const propName = varMatch[1];
+              const fallback = varMatch[2];
+              const resolvedValue = rootStyles.getPropertyValue(propName).trim();
+              return resolvedValue || fallback || null;
+            }
+            return null;
+          };
+          const resolveDynamicColors = (element) => {
+            const fill = element.getAttribute("fill");
+            const resolvedFill = resolveColorValue(fill);
+            if (resolvedFill) {
+              element.setAttribute("fill", resolvedFill);
+            }
+            const stroke = element.getAttribute("stroke");
+            const resolvedStroke = resolveColorValue(stroke);
+            if (resolvedStroke) {
+              element.setAttribute("stroke", resolvedStroke);
+            }
+            element.querySelectorAll("*").forEach(resolveDynamicColors);
+          };
+          resolveDynamicColors(svgClone);
+          const serializer = new XMLSerializer();
+          const svgString = serializer.serializeToString(svgClone);
+          const svgBase64 = btoa(unescape(encodeURIComponent(svgString)));
+          const dataUri = `data:image/svg+xml;base64,${svgBase64}`;
+          const imageElement = {
+            type: "image",
+            src: dataUri,
+            position: {
+              x: pxToInch(rect2.left),
+              y: pxToInch(rect2.top),
+              w: pxToInch(rect2.width),
+              h: pxToInch(rect2.height)
+            },
+            sizing: null
+          };
+          elements.push(imageElement);
+          processed.add(el);
+          el.querySelectorAll("*").forEach((child) => processed.add(child));
+          return;
+        }
+      }
+      if (el.tagName === "I") {
+        processed.add(el);
+        return;
+      }
       const isContainer = el.tagName === "DIV" && !textTags.includes(el.tagName);
       if (isContainer) {
         const computed2 = win.getComputedStyle(el);
@@ -29180,7 +29700,7 @@ ${generateStylesCss(styleMap, themeFonts)}
           const y2 = pxToInch(rect2.top);
           const w2 = pxToInch(rect2.width);
           const h2 = pxToInch(rect2.height);
-          if (parseFloat(borderTop) > 0) {
+          if (parseFloat(borderTop) > 0 && !isFullyTransparent(computed2.borderTopColor)) {
             const widthPt = pxToPoints(borderTop);
             const inset = widthPt / 72 / 2;
             borderLines.push({
@@ -29190,10 +29710,11 @@ ${generateStylesCss(styleMap, themeFonts)}
               x2: x2 + w2,
               y2: y2 + inset,
               width: widthPt,
-              color: rgbToHex(computed2.borderTopColor)
+              color: rgbToHex(computed2.borderTopColor),
+              transparency: extractAlpha(computed2.borderTopColor)
             });
           }
-          if (parseFloat(borderRight) > 0) {
+          if (parseFloat(borderRight) > 0 && !isFullyTransparent(computed2.borderRightColor)) {
             const widthPt = pxToPoints(borderRight);
             const inset = widthPt / 72 / 2;
             borderLines.push({
@@ -29203,10 +29724,11 @@ ${generateStylesCss(styleMap, themeFonts)}
               x2: x2 + w2 - inset,
               y2: y2 + h2,
               width: widthPt,
-              color: rgbToHex(computed2.borderRightColor)
+              color: rgbToHex(computed2.borderRightColor),
+              transparency: extractAlpha(computed2.borderRightColor)
             });
           }
-          if (parseFloat(borderBottom) > 0) {
+          if (parseFloat(borderBottom) > 0 && !isFullyTransparent(computed2.borderBottomColor)) {
             const widthPt = pxToPoints(borderBottom);
             const inset = widthPt / 72 / 2;
             borderLines.push({
@@ -29216,10 +29738,11 @@ ${generateStylesCss(styleMap, themeFonts)}
               x2: x2 + w2,
               y2: y2 + h2 - inset,
               width: widthPt,
-              color: rgbToHex(computed2.borderBottomColor)
+              color: rgbToHex(computed2.borderBottomColor),
+              transparency: extractAlpha(computed2.borderBottomColor)
             });
           }
-          if (parseFloat(borderLeft) > 0) {
+          if (parseFloat(borderLeft) > 0 && !isFullyTransparent(computed2.borderLeftColor)) {
             const widthPt = pxToPoints(borderLeft);
             const inset = widthPt / 72 / 2;
             borderLines.push({
@@ -29229,7 +29752,8 @@ ${generateStylesCss(styleMap, themeFonts)}
               x2: x2 + inset,
               y2: y2 + h2,
               width: widthPt,
-              color: rgbToHex(computed2.borderLeftColor)
+              color: rgbToHex(computed2.borderLeftColor),
+              transparency: extractAlpha(computed2.borderLeftColor)
             });
           }
         }
@@ -29254,16 +29778,47 @@ ${generateStylesCss(styleMap, themeFonts)}
               };
               elements.push(bgImgElement);
             }
-            const textChildren = Array.from(el.children).filter((child) => ["P", "H1", "H2", "H3", "H4", "H5", "H6", "SPAN"].includes(child.tagName));
-            const nonTextChildren = Array.from(el.children).filter((child) => !["P", "H1", "H2", "H3", "H4", "H5", "H6", "SPAN"].includes(child.tagName));
-            const isSingleTextChild = textChildren.length === 1 && textChildren[0].children.length === 0 && nonTextChildren.length === 0;
+            const textTagSet = /* @__PURE__ */ new Set(["P", "H1", "H2", "H3", "H4", "H5", "H6", "SPAN"]);
+            const allChildren = Array.from(el.children);
+            const textChildren = allChildren.filter((child) => {
+              if (textTagSet.has(child.tagName))
+                return true;
+              if (child.tagName === "DIV") {
+                const childElements = Array.from(child.children);
+                const isTextOnlyDiv = childElements.length === 0 || childElements.every((ce) => ce.tagName === "BR") || childElements.length === 1 && childElements[0].tagName === "P" && childElements[0].children.length === 0;
+                if (!isTextOnlyDiv)
+                  return false;
+                const childText = child.textContent?.trim();
+                if (!childText)
+                  return false;
+                const childComputed = win.getComputedStyle(child);
+                const childHasBg = childComputed.backgroundColor && childComputed.backgroundColor !== "rgba(0, 0, 0, 0)";
+                const childHasBgImg = childComputed.backgroundImage && childComputed.backgroundImage !== "none";
+                const childBorders = [
+                  childComputed.borderTopWidth,
+                  childComputed.borderRightWidth,
+                  childComputed.borderBottomWidth,
+                  childComputed.borderLeftWidth
+                ].map((b) => parseFloat(b) || 0);
+                const childHasBorder = childBorders.some((b) => b > 0);
+                return !childHasBg && !childHasBgImg && !childHasBorder;
+              }
+              return false;
+            });
+            const decorativeTags = /* @__PURE__ */ new Set(["I", "SVG", "CANVAS", "VIDEO", "AUDIO", "IFRAME"]);
+            const nonTextChildren = allChildren.filter((child) => !textTagSet.has(child.tagName) && !decorativeTags.has(child.tagName) && !(child.tagName === "DIV" && textChildren.includes(child)));
+            const isSingleTextChild = textChildren.length === 1 && (() => {
+              const tc = textChildren[0];
+              const tcChildren = Array.from(tc.children);
+              return tcChildren.length === 0 || tcChildren.every((ce) => ce.tagName === "BR") || tcChildren.length === 1 && tcChildren[0].tagName === "P" && tcChildren[0].children.length === 0;
+            })() && nonTextChildren.length === 0;
             const display = computed2.display;
-            const isFlexContainer = display === "flex" || display === "inline-flex";
+            const isFlexContainer2 = display === "flex" || display === "inline-flex";
             const alignItems = computed2.alignItems;
             const justifyContent = computed2.justifyContent;
             let valign2 = "top";
             let align = "left";
-            if (isFlexContainer) {
+            if (isFlexContainer2) {
               const flexDirection = computed2.flexDirection || "row";
               if (flexDirection === "row" || flexDirection === "row-reverse") {
                 if (alignItems === "center")
@@ -29312,8 +29867,9 @@ ${generateStylesCss(styleMap, themeFonts)}
             let shapeText = "";
             let shapeTextRuns = null;
             let shapeStyle = null;
-            const hasTextChildren = textChildren.length > 0 && nonTextChildren.length === 0;
-            if (hasTextChildren) {
+            const hasTextChildren = textChildren.length > 0;
+            const shouldMergeText = hasTextChildren && (isSingleTextChild || nonTextChildren.length === 0);
+            if (shouldMergeText) {
               if (isSingleTextChild) {
                 const textEl = textChildren[0];
                 const textComputed = win.getComputedStyle(textEl);
@@ -29357,31 +29913,71 @@ ${generateStylesCss(styleMap, themeFonts)}
                   inset: 0,
                   wrap: !shouldNotWrap
                 };
+                const shapeLetterSpacing = extractLetterSpacing(textComputed);
+                if (shapeLetterSpacing !== null)
+                  shapeStyle.charSpacing = shapeLetterSpacing;
+                const shapeTextShadow = parseTextShadow(textComputed.textShadow);
+                if (shapeTextShadow.glow)
+                  shapeStyle.glow = shapeTextShadow.glow;
+                if (shapeTextShadow.shadow)
+                  shapeStyle.textShadow = shapeTextShadow.shadow;
                 processed.add(textEl);
+                textEl.querySelectorAll("*").forEach((desc) => processed.add(desc));
               } else {
                 shapeTextRuns = [];
                 textChildren.forEach((textChild, idx) => {
                   const textEl = textChild;
                   const textComputed = win.getComputedStyle(textEl);
-                  const text2 = textEl.textContent.trim();
-                  if (!text2)
+                  const fullText = textEl.textContent.trim();
+                  if (!fullText)
                     return;
                   const isBold = textComputed.fontWeight === "bold" || parseInt(textComputed.fontWeight) >= 600;
                   const isItalic = textComputed.fontStyle === "italic";
                   const isUnderline = textComputed.textDecoration && textComputed.textDecoration.includes("underline");
-                  const runText = idx > 0 && shapeTextRuns.length > 0 ? " " + text2 : text2;
-                  shapeTextRuns.push({
-                    text: runText,
-                    options: {
-                      fontSize: pxToPoints(textComputed.fontSize),
-                      fontFace: textComputed.fontFamily.split(",")[0].replace(/['"]/g, "").trim(),
-                      color: rgbToHex(textComputed.color),
-                      bold: isBold,
-                      italic: isItalic,
-                      underline: isUnderline || false
+                  const baseRunOptions = {
+                    fontSize: pxToPoints(textComputed.fontSize),
+                    fontFace: textComputed.fontFamily.split(",")[0].replace(/['"]/g, "").trim(),
+                    color: rgbToHex(textComputed.color),
+                    bold: isBold,
+                    italic: isItalic,
+                    underline: isUnderline || false,
+                    ...extractLetterSpacing(textComputed) !== null ? { charSpacing: extractLetterSpacing(textComputed) } : {},
+                    ...(() => {
+                      const ts = parseTextShadow(textComputed.textShadow);
+                      return ts.glow ? { glow: ts.glow } : {};
+                    })()
+                  };
+                  const hasBrChildren = textEl.querySelector("br") !== null;
+                  if (hasBrChildren) {
+                    let segments = [];
+                    let currentSegment = "";
+                    for (const node of Array.from(textEl.childNodes)) {
+                      if (node.tagName === "BR") {
+                        segments.push(currentSegment.trim());
+                        currentSegment = "";
+                      } else {
+                        currentSegment += node.textContent || "";
+                      }
                     }
-                  });
+                    if (currentSegment.trim())
+                      segments.push(currentSegment.trim());
+                    segments = segments.filter((s) => s.length > 0);
+                    segments.forEach((segment, segIdx) => {
+                      const prefix = segIdx === 0 && idx > 0 && shapeTextRuns.length > 0 ? "\n" : "";
+                      const runText = prefix + segment;
+                      const options = { ...baseRunOptions };
+                      if (segIdx > 0) {
+                        options.softBreakBefore = true;
+                      }
+                      shapeTextRuns.push({ text: runText, options });
+                    });
+                  } else {
+                    const runText = idx > 0 && shapeTextRuns.length > 0 ? "\n" + fullText : fullText;
+                    const options = idx > 0 && shapeTextRuns.length > 0 ? { ...baseRunOptions, breakLine: true } : baseRunOptions;
+                    shapeTextRuns.push({ text: runText, options });
+                  }
                   processed.add(textEl);
+                  textEl.querySelectorAll("*").forEach((desc) => processed.add(desc));
                 });
                 shapeStyle = {
                   align,
@@ -29391,6 +29987,29 @@ ${generateStylesCss(styleMap, themeFonts)}
               }
             }
             if (hasBg || hasUniformBorder || bgGradient) {
+              const elementOpacity = parseFloat(computed2.opacity);
+              const hasOpacity = !isNaN(elementOpacity) && elementOpacity < 1;
+              let softEdgePt = null;
+              const filterStr = computed2.filter;
+              if (filterStr && filterStr !== "none") {
+                const blurMatch = filterStr.match(/blur\(([\d.]+)px\)/);
+                if (blurMatch) {
+                  const blurPx = parseFloat(blurMatch[1]);
+                  if (blurPx > 0) {
+                    softEdgePt = blurPx * PT_PER_PX;
+                  }
+                }
+              }
+              const borderRadiusStr = computed2.borderRadius;
+              const borderRadiusVal = parseFloat(borderRadiusStr);
+              const isCircularRadius = borderRadiusStr.includes("%") ? borderRadiusVal >= 50 : borderRadiusVal > 0 && borderRadiusVal >= Math.min(rect2.width, rect2.height) / 2 - 1;
+              const aspectRatio = rect2.width / rect2.height;
+              const isEllipse = isCircularRadius && aspectRatio > 0.5 && aspectRatio < 2;
+              const paddingTop = parseFloat(computed2.paddingTop) || 0;
+              const paddingRight = parseFloat(computed2.paddingRight) || 0;
+              const paddingBottom = parseFloat(computed2.paddingBottom) || 0;
+              const paddingLeft = parseFloat(computed2.paddingLeft) || 0;
+              const hasPadding = paddingTop > 2 || paddingRight > 2 || paddingBottom > 2 || paddingLeft > 2;
               const shapeElement = {
                 type: "shape",
                 text: shapeText,
@@ -29408,9 +30027,12 @@ ${generateStylesCss(styleMap, themeFonts)}
                   transparency: hasBg ? extractAlpha(computed2.backgroundColor) : null,
                   line: hasUniformBorder ? {
                     color: rgbToHex(computed2.borderColor),
-                    width: pxToPoints(computed2.borderWidth)
+                    width: pxToPoints(computed2.borderWidth),
+                    transparency: extractAlpha(computed2.borderColor)
                   } : null,
                   rectRadius: (() => {
+                    if (isEllipse)
+                      return 0;
                     const radius = computed2.borderRadius;
                     const radiusValue = parseFloat(radius);
                     if (radiusValue === 0)
@@ -29425,9 +30047,24 @@ ${generateStylesCss(styleMap, themeFonts)}
                       return radiusValue / 72;
                     return radiusValue / PX_PER_IN;
                   })(),
-                  shadow
+                  shadow,
+                  opacity: hasOpacity ? elementOpacity : null,
+                  isEllipse,
+                  softEdge: softEdgePt
                 }
               };
+              if (hasPadding && shapeElement.style && (shapeText || shapeTextRuns && shapeTextRuns.length > 0)) {
+                shapeElement.style.margin = [
+                  paddingLeft * PT_PER_PX,
+                  // left
+                  paddingRight * PT_PER_PX,
+                  // right
+                  paddingBottom * PT_PER_PX,
+                  // bottom
+                  paddingTop * PT_PER_PX
+                  // top
+                ];
+              }
               elements.push(shapeElement);
             } else if (shapeStyle && shapeStyle.fontFill) {
               const fontFillTextElement = {
@@ -29450,6 +30087,60 @@ ${generateStylesCss(styleMap, themeFonts)}
             return;
           }
         }
+        if (isContainer) {
+          const rect2 = htmlEl.getBoundingClientRect();
+          if (rect2.width > 0 && rect2.height > 0) {
+            let directText = "";
+            for (const child of Array.from(el.childNodes)) {
+              if (child.nodeType === Node.TEXT_NODE) {
+                directText += child.textContent || "";
+              }
+            }
+            directText = directText.trim();
+            const childElements = Array.from(el.children);
+            if (!directText && childElements.length === 1 && childElements[0].tagName === "P" && childElements[0].children.length === 0) {
+              directText = childElements[0].textContent?.trim() || "";
+            }
+            const hasStructuralChildren = childElements.length > 0 && !childElements.every((ce) => ce.tagName === "BR") && !(childElements.length === 1 && childElements[0].tagName === "P" && childElements[0].children.length === 0);
+            if (directText && !hasStructuralChildren) {
+              const computed22 = win.getComputedStyle(el);
+              const fontSizePx2 = parseFloat(computed22.fontSize);
+              const lineHeightPx2 = parseFloat(computed22.lineHeight);
+              const lineHeightMultiplier2 = fontSizePx2 > 0 && !isNaN(lineHeightPx2) ? lineHeightPx2 / fontSizePx2 : 1;
+              const textElement = {
+                type: "p",
+                text: [{ text: directText, options: {} }],
+                position: {
+                  x: pxToInch(rect2.left),
+                  y: pxToInch(rect2.top),
+                  w: pxToInch(rect2.width),
+                  h: pxToInch(rect2.height)
+                },
+                style: {
+                  fontSize: pxToPoints(computed22.fontSize),
+                  fontFace: computed22.fontFamily.split(",")[0].replace(/['"]/g, "").trim(),
+                  color: rgbToHex(computed22.color),
+                  bold: parseInt(computed22.fontWeight) >= 600,
+                  italic: computed22.fontStyle === "italic",
+                  align: computed22.textAlign === "center" ? "center" : computed22.textAlign === "right" || computed22.textAlign === "end" ? "right" : "left",
+                  valign: "middle",
+                  lineSpacing: lineHeightMultiplier2 * pxToPoints(computed22.fontSize)
+                }
+              };
+              const textTransparency = extractAlpha(computed22.color);
+              if (textTransparency !== null) {
+                textElement.style.transparency = textTransparency;
+              }
+              const ls = extractLetterSpacing(computed22);
+              if (ls !== null)
+                textElement.style.charSpacing = ls;
+              elements.push(textElement);
+              processed.add(el);
+              el.querySelectorAll("*").forEach((desc) => processed.add(desc));
+              return;
+            }
+          }
+        }
       }
       if (el.tagName === "UL" || el.tagName === "OL") {
         const rect2 = htmlEl.getBoundingClientRect();
@@ -29461,12 +30152,23 @@ ${generateStylesCss(styleMap, themeFonts)}
         const ulPaddingLeftPt = pxToPoints(ulComputed.paddingLeft);
         const marginLeft = ulPaddingLeftPt * 0.5;
         const textIndent = ulPaddingLeftPt * 0.5;
+        const listStyleType = ulComputed.listStyleType;
+        const hasNativeBullets = listStyleType !== "none";
+        const hasFlexLiItems = liElements.some((li) => {
+          const liComputed2 = win.getComputedStyle(li);
+          return liComputed2.display === "flex" || liComputed2.display === "inline-flex";
+        });
+        if (hasFlexLiItems && !hasNativeBullets) {
+          return;
+        }
         liElements.forEach((li, idx) => {
           const isLast = idx === liElements.length - 1;
           const runs = parseInlineFormatting(li, { breakLine: false }, [], (x2) => x2, win);
           if (runs.length > 0) {
             runs[0].text = runs[0].text.replace(/^[•\-\*\u25AA\u25B8]\s*/, "");
-            runs[0].options.bullet = { indent: textIndent };
+            if (hasNativeBullets) {
+              runs[0].options.bullet = { indent: textIndent };
+            }
           }
           if (runs.length > 0 && !isLast) {
             runs[runs.length - 1].options.breakLine = true;
@@ -29505,15 +30207,34 @@ ${generateStylesCss(styleMap, themeFonts)}
       }
       if (!textTags.includes(el.tagName) || el.tagName === "SPAN")
         return;
-      const rect = htmlEl.getBoundingClientRect();
-      const text = el.textContent.trim();
+      let rect = htmlEl.getBoundingClientRect();
+      let text = el.textContent.trim();
       if (rect.width === 0 || rect.height === 0 || !text)
         return;
+      const computed = win.getComputedStyle(el);
+      const isFlexContainer = computed.display === "flex" || computed.display === "inline-flex";
+      if (isFlexContainer && el.children.length > 0) {
+        const textNodes = [];
+        el.childNodes.forEach((node) => {
+          if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
+            textNodes.push(node);
+          }
+        });
+        if (textNodes.length > 0) {
+          const range2 = doc.createRange();
+          range2.setStartBefore(textNodes[0]);
+          range2.setEndAfter(textNodes[textNodes.length - 1]);
+          const textRect = range2.getBoundingClientRect();
+          if (textRect.width > 0 && textRect.height > 0) {
+            rect = textRect;
+            text = textNodes.map((n) => n.textContent.trim()).join(" ").trim();
+          }
+        }
+      }
       if (el.tagName !== "LI" && /^[•\-\*\u25AA\u25B8\u25CB\u25CF\u25C6\u25C7\u25A0\u25A1]\s/.test(text.trimStart())) {
         errors.push(`Text element <${el.tagName.toLowerCase()}> starts with bullet symbol "${text.substring(0, 20)}...". Use <ul> or <ol> lists instead of manual bullet symbols.`);
         return;
       }
-      const computed = win.getComputedStyle(el);
       const rotation = getRotation(computed.transform, computed.writingMode);
       const { x, y, w, h } = getPositionAndSize(htmlEl, rect, rotation);
       const fontSizePx = parseFloat(computed.fontSize);
@@ -29564,6 +30285,14 @@ ${generateStylesCss(styleMap, themeFonts)}
       const transparency = extractAlpha(computed.color);
       if (transparency !== null)
         baseStyle.transparency = transparency;
+      const letterSpacing = extractLetterSpacing(computed);
+      if (letterSpacing !== null)
+        baseStyle.charSpacing = letterSpacing;
+      const textShadowResult = parseTextShadow(computed.textShadow);
+      if (textShadowResult.glow)
+        baseStyle.glow = textShadowResult.glow;
+      if (textShadowResult.shadow)
+        baseStyle.textShadow = textShadowResult.shadow;
       if (rotation !== null)
         baseStyle.rotate = rotation;
       const bgClip = computed.webkitBackgroundClip || computed.backgroundClip;
@@ -29579,7 +30308,7 @@ ${generateStylesCss(styleMap, themeFonts)}
           }
         }
       }
-      const hasFormatting = el.querySelector("b, i, u, strong, em, span, br");
+      const hasFormatting = el.querySelector("b, i, u, strong, em, span, br, code, a, mark, sub, sup, small, s, del, ins, abbr, time, cite, q, dfn, kbd, samp, var");
       if (hasFormatting) {
         const transformStr = computed.textTransform;
         const runs = parseInlineFormatting(el, {}, [], (str) => applyTextTransform(str, transformStr), win);
@@ -29609,10 +30338,64 @@ ${generateStylesCss(styleMap, themeFonts)}
       }
       processed.add(el);
     });
+    processed.forEach((processedEl) => {
+      const htmlEl = processedEl;
+      if (htmlEl.tagName === "BODY")
+        return;
+      const pseudoElements = extractPseudoElements(htmlEl, win);
+      elements.push(...pseudoElements);
+    });
+    doc.querySelectorAll("div").forEach((divEl) => {
+      if (processed.has(divEl))
+        return;
+      const htmlDiv = divEl;
+      if (htmlDiv === body)
+        return;
+      const rect = htmlDiv.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0)
+        return;
+      const pseudoElements = extractPseudoElements(htmlDiv, win);
+      elements.push(...pseudoElements);
+    });
     return { background, elements, placeholders, errors };
   }
 
   // packages/slides/convert.js
+  function hexToRgb(hex) {
+    const h = hex.replace("#", "");
+    return {
+      r: parseInt(h.substring(0, 2), 16),
+      g: parseInt(h.substring(2, 4), 16),
+      b: parseInt(h.substring(4, 6), 16)
+    };
+  }
+  function rgbToHex2(r, g, b) {
+    const toHex = (n) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, "0");
+    return `${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+  }
+  function blendColors(fgHex, bgHex, opacity) {
+    const fg = hexToRgb(fgHex);
+    const bg = hexToRgb(bgHex);
+    const r = fg.r * opacity + bg.r * (1 - opacity);
+    const g = fg.g * opacity + bg.g * (1 - opacity);
+    const b = fg.b * opacity + bg.b * (1 - opacity);
+    return rgbToHex2(r, g, b);
+  }
+  function applyOpacityToGradient(gradient, opacity, bgColor) {
+    return {
+      ...gradient,
+      stops: gradient.stops.map((stop) => {
+        const stopOpacity = stop.transparency !== void 0 ? (100 - stop.transparency) / 100 : 1;
+        const effectiveOpacity = opacity * stopOpacity;
+        return {
+          ...stop,
+          color: blendColors(stop.color, bgColor, effectiveOpacity),
+          // Remove transparency since it's now baked into the color
+          transparency: void 0
+        };
+      })
+    };
+  }
   async function fetchImageAsDataUrl(url) {
     try {
       const response = await fetch(url, { mode: "cors" });
@@ -29663,7 +30446,7 @@ ${generateStylesCss(styleMap, themeFonts)}
       }
     }
   }
-  async function addElementsToSlide(elements, slide, pres) {
+  async function addElementsToSlide(elements, slide, pres, bgColor) {
     for (const el of elements) {
       if (el.type === "slideBackgroundImage") {
         const imgSrc = await getImageSource(el.src);
@@ -29681,6 +30464,14 @@ ${generateStylesCss(styleMap, themeFonts)}
         if (el.sizing && el.sizing.type) {
           imageOptions.sizing = { type: el.sizing.type, w: el.position.w, h: el.position.h };
         }
+        if (el.brightness !== void 0)
+          imageOptions.brightness = el.brightness;
+        if (el.contrast !== void 0)
+          imageOptions.contrast = el.contrast;
+        if (el.saturation !== void 0)
+          imageOptions.saturation = el.saturation;
+        if (el.transparency !== void 0)
+          imageOptions.transparency = el.transparency;
         slide.addImage(imageOptions);
       }
     }
@@ -29700,12 +30491,37 @@ ${generateStylesCss(styleMap, themeFonts)}
           w: el.position.w,
           h: el.position.h
         };
-        if (el.sizing && el.sizing.type) {
+        if (el.sizing && el.sizing.type === "cover" && el.naturalWidth && el.naturalHeight) {
+          const imgRatio = el.naturalHeight / el.naturalWidth;
+          const boxRatio = el.position.h / el.position.w;
+          const isBoxBased = boxRatio > imgRatio;
+          const effW = isBoxBased ? el.position.h / imgRatio : el.position.w;
+          const effH = isBoxBased ? el.position.h : el.position.w * imgRatio;
+          const cropX = (effW - el.position.w) / 2;
+          const cropY = (effH - el.position.h) / 2;
+          imageOptions.w = effW;
+          imageOptions.h = effH;
+          imageOptions.sizing = {
+            type: "crop",
+            x: cropX,
+            y: cropY,
+            w: el.position.w,
+            h: el.position.h
+          };
+        } else if (el.sizing && el.sizing.type) {
           imageOptions.sizing = { type: el.sizing.type, w: el.position.w, h: el.position.h };
         }
         if (el.rectRadius) {
           imageOptions.rectRadius = el.rectRadius;
         }
+        if (el.brightness !== void 0)
+          imageOptions.brightness = el.brightness;
+        if (el.contrast !== void 0)
+          imageOptions.contrast = el.contrast;
+        if (el.saturation !== void 0)
+          imageOptions.saturation = el.saturation;
+        if (el.transparency !== void 0)
+          imageOptions.transparency = el.transparency;
         slide.addImage(imageOptions);
       } else if (el.type === "backgroundImage") {
         const imgSrc = await getImageSource(el.src);
@@ -29725,34 +30541,93 @@ ${generateStylesCss(styleMap, themeFonts)}
         }
         slide.addImage(imageOptions);
       } else if (el.type === "line") {
+        const lineOpts = {
+          color: el.color,
+          width: el.width
+        };
+        if (el.transparency != null)
+          lineOpts.transparency = el.transparency;
         slide.addShape(pres.ShapeType.line, {
           x: el.x1,
           y: el.y1,
           w: el.x2 - el.x1,
           h: el.y2 - el.y1,
-          line: { color: el.color, width: el.width }
+          line: lineOpts
         });
       } else if (el.type === "shape") {
+        let shapeType = pres.ShapeType.rect;
+        if (el.shape.isEllipse) {
+          shapeType = pres.ShapeType.ellipse;
+        } else if (el.shape.rectRadius > 0) {
+          shapeType = pres.ShapeType.roundRect;
+        }
+        const lineHeightPt = el.style?.lineSpacing || (el.style?.fontSize ?? 12) * 1.2;
+        const verticalPaddingPt = el.style?.margin ? (el.style.margin[2] || 0) + (el.style.margin[3] || 0) : 0;
+        const heightPt = el.position.h * 72 - verticalPaddingPt;
+        const isSingleLine = heightPt <= lineHeightPt * 1.5;
+        const hasText = el.text || el.textRuns && el.textRuns.length > 0;
+        let adjustedX = el.position.x;
+        let adjustedW = el.position.w;
+        if (isSingleLine && hasText) {
+          const widthIncrease = el.position.w * 0.02;
+          const align = el.style?.align;
+          if (align === "center") {
+            adjustedX = el.position.x - widthIncrease / 2;
+            adjustedW = el.position.w + widthIncrease;
+          } else if (align === "right") {
+            adjustedX = el.position.x - widthIncrease;
+            adjustedW = el.position.w + widthIncrease;
+          } else {
+            adjustedW = el.position.w + widthIncrease;
+          }
+        }
         const shapeOptions = {
-          x: el.position.x,
+          x: adjustedX,
           y: el.position.y,
-          w: el.position.w,
+          w: adjustedW,
           h: el.position.h,
-          shape: el.shape.rectRadius > 0 ? pres.ShapeType.roundRect : pres.ShapeType.rect
+          shape: shapeType,
+          // Disable text wrapping for single-line shapes to prevent unwanted line breaks
+          wrap: !isSingleLine
         };
+        let fillTransparency = el.shape.transparency;
+        const elementOpacity = el.shape.opacity !== null && el.shape.opacity < 1 ? el.shape.opacity : 1;
+        if (elementOpacity < 1) {
+          const opacityTransparency = Math.round((1 - elementOpacity) * 100);
+          if (fillTransparency !== null) {
+            const rgbaOpaque = (100 - fillTransparency) / 100;
+            fillTransparency = Math.round((1 - rgbaOpaque * elementOpacity) * 100);
+          } else {
+            fillTransparency = opacityTransparency;
+          }
+        }
         if (el.shape.gradient) {
-          shapeOptions.fill = { type: "gradient", gradient: el.shape.gradient };
+          if (elementOpacity < 1 && bgColor) {
+            const blendedGradient = applyOpacityToGradient(el.shape.gradient, elementOpacity, bgColor);
+            shapeOptions.fill = { type: "gradient", gradient: blendedGradient };
+          } else {
+            shapeOptions.fill = { type: "gradient", gradient: el.shape.gradient };
+          }
         } else if (el.shape.fill) {
           shapeOptions.fill = { color: el.shape.fill };
-          if (el.shape.transparency != null)
-            shapeOptions.fill.transparency = el.shape.transparency;
+          if (fillTransparency != null)
+            shapeOptions.fill.transparency = fillTransparency;
+        }
+        if (el.shape.line) {
+          const lineOpts = {
+            color: el.shape.line.color,
+            width: el.shape.line.width
+          };
+          if (el.shape.line.transparency != null)
+            lineOpts.transparency = el.shape.line.transparency;
+          shapeOptions.line = lineOpts;
         }
-        if (el.shape.line)
-          shapeOptions.line = el.shape.line;
         if (el.shape.rectRadius > 0)
           shapeOptions.rectRadius = el.shape.rectRadius;
         if (el.shape.shadow)
           shapeOptions.shadow = el.shape.shadow;
+        if (el.shape.softEdge)
+          shapeOptions.softEdgeRad = el.shape.softEdge;
         if (el.style) {
           if (el.style.fontSize)
             shapeOptions.fontSize = el.style.fontSize;
@@ -29772,8 +30647,18 @@ ${generateStylesCss(styleMap, themeFonts)}
             shapeOptions.margin = el.style.margin;
           if (el.style.inset !== void 0)
             shapeOptions.inset = el.style.inset;
-          if (el.style.wrap !== void 0)
-            shapeOptions.wrap = el.style.wrap;
+          if (el.style.charSpacing)
+            shapeOptions.charSpacing = el.style.charSpacing;
+          if (el.style.glow) {
+            shapeOptions.glow = {
+              size: el.style.glow.size,
+              color: el.style.glow.color,
+              opacity: el.style.glow.opacity
+            };
+          }
+          if (el.style.textShadow && !el.shape.shadow) {
+            shapeOptions.shadow = el.style.textShadow;
+          }
         }
         if (el.textRuns && el.textRuns.length > 0) {
           slide.addText(el.textRuns, shapeOptions);
@@ -29801,7 +30686,8 @@ ${generateStylesCss(styleMap, themeFonts)}
         slide.addText(el.items, listOptions);
       } else {
         const lineHeightPt = el.style.lineSpacing || (el.style.fontSize ?? 0) * 1.2;
-        const isSingleLine = el.position.h <= lineHeightPt * 1.5;
+        const heightPt = el.position.h * 72;
+        const isSingleLine = heightPt <= lineHeightPt * 1.5;
         let adjustedX = el.position.x;
         let adjustedW = el.position.w;
         if (isSingleLine) {
@@ -29832,7 +30718,9 @@ ${generateStylesCss(styleMap, themeFonts)}
           lineSpacing: el.style.lineSpacing,
           paraSpaceBefore: el.style.paraSpaceBefore,
           paraSpaceAfter: el.style.paraSpaceAfter,
-          inset: 0
+          inset: 0,
+          // Disable text wrapping for single-line text to prevent unwanted line breaks
+          wrap: !isSingleLine
         };
         if (el.style.align)
           textOptions.align = el.style.align;
@@ -29843,10 +30731,22 @@ ${generateStylesCss(styleMap, themeFonts)}
         if (el.style.transparency !== null && el.style.transparency !== void 0) {
           textOptions.transparency = el.style.transparency;
         }
+        if (el.style.charSpacing)
+          textOptions.charSpacing = el.style.charSpacing;
         if (el.style.fontFill) {
           textOptions.fontFill = el.style.fontFill;
           delete textOptions.color;
         }
+        if (el.style.glow) {
+          textOptions.glow = {
+            size: el.style.glow.size,
+            color: el.style.glow.color,
+            opacity: el.style.glow.opacity
+          };
+        }
+        if (el.style.textShadow) {
+          textOptions.shadow = el.style.textShadow;
+        }
         slide.addText(el.text, textOptions);
       }
     }
@@ -29989,13 +30889,19 @@ ${generateStylesCss(styleMap, themeFonts)}
         validationErrors.push(...slideData.errors);
       }
       if (validationErrors.length > 0) {
-        const errorMessage = validationErrors.length === 1 ? validationErrors[0] : `Multiple validation errors found:
+        const warningMessage = validationErrors.length === 1 ? validationErrors[0] : `Multiple validation warnings:
 ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
-        throw new Error(errorMessage);
+        console.warn(`[docgen] ${warningMessage}`);
       }
       const targetSlide = slide || pres.addSlide();
+      let bgColor;
+      if (slideData.background.type === "color") {
+        bgColor = slideData.background.value;
+      } else if (slideData.background.type === "gradient" && slideData.background.gradient.stops.length > 0) {
+        bgColor = slideData.background.gradient.stops[0].color;
+      }
       await applyBackground(slideData.background, targetSlide);
-      await addElementsToSlide(slideData.elements, targetSlide, pres);
+      await addElementsToSlide(slideData.elements, targetSlide, pres, bgColor);
       return { slide: targetSlide, placeholders: slideData.placeholders };
     } finally {
       if (cleanupIframe?.parentNode) {
@@ -30022,24 +30928,34 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
   }
 
   // packages/slides/transform.js
-  var NON_WEB_SAFE_FONTS = [
-    "Inter",
-    "Roboto",
-    "Open Sans",
-    "Lato",
-    "Montserrat",
-    "Poppins",
-    "Source Sans Pro",
-    "Nunito",
-    "Raleway",
-    "Ubuntu",
-    "Playfair Display",
-    "Merriweather",
-    "PT Sans",
-    "Noto Sans",
-    "Fira Sans",
-    "Work Sans"
-  ];
+  var FONT_FAMILY_MAP = {
+    // Serif fonts → Georgia (closest web-safe serif)
+    "Playfair Display": "Georgia, serif",
+    "Merriweather": "Georgia, serif",
+    "Libre Baskerville": "Georgia, serif",
+    "PT Serif": "Georgia, serif",
+    "Noto Serif": "Georgia, serif",
+    "Lora": "Georgia, serif",
+    // Sans-serif fonts → Calibri (modern sans-serif, widely available in PowerPoint)
+    "Inter": "Calibri, sans-serif",
+    "Roboto": "Calibri, sans-serif",
+    "Open Sans": "Calibri, sans-serif",
+    "Lato": "Calibri, sans-serif",
+    "Montserrat": "Calibri, sans-serif",
+    "Poppins": "Calibri, sans-serif",
+    "Source Sans Pro": "Calibri, sans-serif",
+    "Nunito": "Calibri, sans-serif",
+    "Raleway": "Calibri, sans-serif",
+    "Ubuntu": "Calibri, sans-serif",
+    "PT Sans": "Calibri, sans-serif",
+    "Noto Sans": "Calibri, sans-serif",
+    "Fira Sans": "Calibri, sans-serif",
+    "Work Sans": "Calibri, sans-serif",
+    // Monospace fonts → Courier New (standard monospace)
+    "Fira Code": "Courier New, monospace",
+    "Source Code Pro": "Courier New, monospace",
+    "JetBrains Mono": "Courier New, monospace"
+  };
   function transformHtmlForPptx(html, options = {}) {
     const targetWidth = options.targetWidth || 720;
     const targetHeight = options.targetHeight || 405;
@@ -30058,9 +30974,9 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
     const scaleFactor = targetWidth / sourceWidth;
     html = html.replace(/(body\s*\{[^}]*?)width:\s*\d+px/s, `$1width: ${targetWidth}pt`);
     html = html.replace(/(body\s*\{[^}]*?)height:\s*\d+px/s, `$1height: ${targetHeight}pt`);
-    for (const font of NON_WEB_SAFE_FONTS) {
-      const fontRegex = new RegExp(`font-family:\\s*["']?${font}["']?,?\\s*(sans-serif|serif)?`, "gi");
-      html = html.replace(fontRegex, "font-family: Arial, sans-serif");
+    for (const [font, replacement] of Object.entries(FONT_FAMILY_MAP)) {
+      const fontRegex = new RegExp(`font-family:\\s*["']?${font}["']?,?\\s*(sans-serif|serif|monospace)?`, "gi");
+      html = html.replace(fontRegex, `font-family: ${replacement}`);
     }
     html = html.replace(/<link[^>]*fonts\.googleapis\.com[^>]*>/g, "");
     const dataUriPlaceholders = [];
@@ -30076,6 +30992,16 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
     html = html.replace(/__DATA_URI_PLACEHOLDER_(\d+)__/g, (_match, index) => {
       return dataUriPlaceholders[parseInt(index, 10)];
     });
+    html = html.replace(/(<svg[^>]*\s)width="(\d+(?:\.\d+)?)"([^>]*\s)height="(\d+(?:\.\d+)?)"/g, (_match, pre, w, mid, h) => {
+      const scaledW = Math.round(parseFloat(w) * scaleFactor * 10) / 10;
+      const scaledH = Math.round(parseFloat(h) * scaleFactor * 10) / 10;
+      return `${pre}width="${scaledW}"${mid}height="${scaledH}"`;
+    });
+    html = html.replace(/(<svg[^>]*\s)height="(\d+(?:\.\d+)?)"([^>]*\s)width="(\d+(?:\.\d+)?)"/g, (_match, pre, h, mid, w) => {
+      const scaledW = Math.round(parseFloat(w) * scaleFactor * 10) / 10;
+      const scaledH = Math.round(parseFloat(h) * scaleFactor * 10) / 10;
+      return `${pre}height="${scaledH}"${mid}width="${scaledW}"`;
+    });
     html = html.replace(/<div(\s+[^>]*)?>([^<]+)<\/div>/g, (match, attrs, text) => {
       if (!text.trim())
         return match;
@@ -30084,14 +31010,9 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
     html = html.replace(/<div(\s+[^>]*)?>([^<]+)(<span[^>]*>[^<]*<\/span>)<\/div>/g, (_match, attrs, text, span) => {
       return `<div${attrs || ""}><p>${text}${span}</p></div>`;
     });
-    html = html.replace(/\}[^{}]*::before\s*\{[^}]+\}/g, "}");
-    html = html.replace(/\}[^{}]*::after\s*\{[^}]+\}/g, "}");
+    html = html.replace(/-webkit-backdrop-filter:\s*[^;]+;/g, "");
     html = html.replace(/backdrop-filter:\s*[^;]+;/g, "");
-    html = html.replace(/text-shadow:\s*[^;]+;/g, "");
-    html = html.replace(/letter-spacing:\s*[^;]+;/g, "");
-    html = html.replace(/box-shadow:\s*[^;]+;/g, "");
-    html = html.replace(/animation[^:]*:\s*[^;]+;/g, "");
-    html = html.replace(/animation-delay:\s*[^;]+;/g, "");
+    html = html.replace(/animation[\w-]*:\s*[^;]+;/g, "");
     let keyframeMatch;
     while (keyframeMatch = html.match(/@keyframes\s+[\w-]+\s*\{/)) {
       const start = keyframeMatch.index;
@@ -30106,9 +31027,28 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
       }
       html = html.slice(0, start) + html.slice(i);
     }
-    html = html.replace(/opacity:\s*0;/g, "");
+    html = html.replace(/opacity:\s*0;/g, "opacity: 1;");
     html = html.replace(/transition:\s*[^;]+;/g, "");
     html = html.replace(/pointer-events:\s*[^;]+;/g, "");
+    const bodyBlockMatch = html.match(/body\s*\{([^}]*)\}/s);
+    if (bodyBlockMatch) {
+      let bodyStyle = bodyBlockMatch[1];
+      if (!/overflow\s*:/.test(bodyStyle)) {
+        bodyStyle += " overflow: hidden;";
+      }
+      if (!/width\s*:\s*[\d.]+pt/.test(bodyStyle)) {
+        bodyStyle = bodyStyle.replace(/width\s*:[^;]+;/g, "");
+        bodyStyle += ` width: ${targetWidth}pt;`;
+      }
+      if (!/height\s*:\s*[\d.]+pt/.test(bodyStyle)) {
+        bodyStyle = bodyStyle.replace(/height\s*:[^;]+;/g, "");
+        bodyStyle += ` height: ${targetHeight}pt;`;
+      }
+      html = html.replace(/body\s*\{[^}]*\}/s, `body {${bodyStyle}}`);
+    } else {
+      html = html.replace(/<\/style>/i, `body { width: ${targetWidth}pt; height: ${targetHeight}pt; overflow: hidden; margin: 0; }
+</style>`);
+    }
     return html;
   }
 
@@ -31324,7 +32264,7 @@ ${inner}</div>`;
     const hex = c.toString(16);
     return hex.length === 1 ? "0" + hex : hex;
   }
-  function rgbToHex2(r, g, b) {
+  function rgbToHex3(r, g, b) {
     return (componentToHex(r) + componentToHex(g) + componentToHex(b)).toUpperCase();
   }
   function createColorElement(colorStr, innerElements) {
@@ -31365,7 +32305,7 @@ ${inner}</div>`;
     strXml += "</a:gsLst>";
     if (gradient.type === "linear") {
       const cssAngle = (_a = gradient.angle) !== null && _a !== void 0 ? _a : 0;
-      const ooxmlAngle = (450 - cssAngle) % 360 * 6e4;
+      const ooxmlAngle = (cssAngle + 270) % 360 * 6e4;
       strXml += `<a:lin ang="${ooxmlAngle}" scaled="1"/>`;
     } else if (gradient.type === "radial") {
       const centerX = (_b = gradient.centerX) !== null && _b !== void 0 ? _b : 50;
@@ -31843,8 +32783,8 @@ ${inner}</div>`;
             align: null,
             bold: !!(window.getComputedStyle(cell).getPropertyValue("font-weight") === "bold" || Number(window.getComputedStyle(cell).getPropertyValue("font-weight")) >= 500),
             border: null,
-            color: rgbToHex2(Number(arrRGB1[0]), Number(arrRGB1[1]), Number(arrRGB1[2])),
-            fill: { color: rgbToHex2(Number(arrRGB2[0]), Number(arrRGB2[1]), Number(arrRGB2[2])) },
+            color: rgbToHex3(Number(arrRGB1[0]), Number(arrRGB1[1]), Number(arrRGB1[2])),
+            fill: { color: rgbToHex3(Number(arrRGB2[0]), Number(arrRGB2[1]), Number(arrRGB2[2])) },
             fontFace: (window.getComputedStyle(cell).getPropertyValue("font-family") || "").split(",")[0].replace(/"/g, "").replace("inherit", "").replace("initial", "") || null,
             fontSize: Number(window.getComputedStyle(cell).getPropertyValue("font-size").replace(/[a-z]/gi, "")),
             margin: null,
@@ -31874,7 +32814,7 @@ ${inner}</div>`;
               const intBorderW = Math.round(Number(window.getComputedStyle(cell).getPropertyValue("border-" + val + "-width").replace("px", "")));
               let arrRGB = [];
               arrRGB = window.getComputedStyle(cell).getPropertyValue("border-" + val + "-color").replace(/\s+/gi, "").replace("rgba(", "").replace("rgb(", "").replace(")", "").split(",");
-              const strBorderC = rgbToHex2(Number(arrRGB[0]), Number(arrRGB[1]), Number(arrRGB[2]));
+              const strBorderC = rgbToHex3(Number(arrRGB[0]), Number(arrRGB[1]), Number(arrRGB[2]));
               cellOpts.border[idxb] = { pt: intBorderW, color: strBorderC };
             });
           }
@@ -32228,7 +33168,10 @@ ${inner}</div>`;
       flipH: opt.flipH || false,
       transparency: opt.transparency || 0,
       objectName,
-      shadow: correctShadowOptions(opt.shadow)
+      shadow: correctShadowOptions(opt.shadow),
+      // CUSTOM PATCH: Image filter effects
+      brightness: opt.brightness,
+      contrast: opt.contrast
     };
     if (strImgExtn === "svg") {
       target._relsMedia.push({
@@ -33335,7 +34278,7 @@ ${inner}</div>`;
           } else if (opts.dataBorder) {
             strXml += `<a:ln w="${valToPts(opts.dataBorder.pt)}" cap="${createLineCap(opts.lineCap)}"><a:solidFill>${createColorElement(opts.dataBorder.color)}</a:solidFill><a:prstDash val="solid"/><a:round/></a:ln>`;
           }
-          strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW);
+          strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW, opts.softEdgeRad);
           strXml += "  </c:spPr>";
           strXml += '  <c:invertIfNegative val="0"/>';
           if (chartType !== CHART_TYPE.RADAR) {
@@ -33389,7 +34332,7 @@ ${inner}</div>`;
                 strXml += "  </a:solidFill>";
                 strXml += "</a:ln>";
               }
-              strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW);
+              strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW, opts.softEdgeRad);
               strXml += "    </c:spPr>";
               strXml += "  </c:dPt>";
             });
@@ -33505,7 +34448,7 @@ ${inner}</div>`;
               strXml += `<a:ln w="${valToPts(opts.lineSize)}" cap="${createLineCap(opts.lineCap)}"><a:solidFill>${createColorElement(tmpSerColor)}</a:solidFill>`;
               strXml += `<a:prstDash val="${opts.lineDash || "solid"}"/><a:round/></a:ln>`;
             }
-            strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW);
+            strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW, opts.softEdgeRad);
           }
           strXml += "  </c:spPr>";
           {
@@ -33654,7 +34597,7 @@ ${inner}</div>`;
                 strXml += ' <a:srgbClr val="' + arrColors[index % arrColors.length] + '"/>';
                 strXml += "</a:solidFill>";
               }
-              strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW);
+              strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW, opts.softEdgeRad);
               strXml += "    </c:spPr>";
               strXml += "  </c:dPt>";
             });
@@ -33748,7 +34691,7 @@ ${inner}</div>`;
               strXml += `<a:ln w="${valToPts(opts.lineSize)}" cap="flat"><a:solidFill>${createColorElement(tmpSerColor)}</a:solidFill>`;
               strXml += `<a:prstDash val="${opts.lineDash || "solid"}"/><a:round/></a:ln>`;
             }
-            strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW);
+            strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW, opts.softEdgeRad);
             strXml += "</c:spPr>";
           }
           {
@@ -33840,7 +34783,7 @@ ${inner}</div>`;
         if (opts.dataNoEffects) {
           strXml += "<a:effectLst/>";
         } else {
-          strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW);
+          strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW, opts.softEdgeRad);
         }
         strXml += "  </c:spPr>";
         optsChartData.labels[0].forEach((_label, idx) => {
@@ -33852,7 +34795,7 @@ ${inner}</div>`;
           if (opts.dataBorder) {
             strXml += `<a:ln w="${valToPts(opts.dataBorder.pt)}" cap="flat"><a:solidFill>${createColorElement(opts.dataBorder.color)}</a:solidFill><a:prstDash val="solid"/><a:round/></a:ln>`;
           }
-          strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW);
+          strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW, opts.softEdgeRad);
           strXml += "  </c:spPr>";
           strXml += "</c:dPt>";
         });
@@ -34236,26 +35179,32 @@ ${inner}</div>`;
     }
     return colStr;
   }
-  function createShadowElement(options, defaults) {
-    if (!options) {
+  function createShadowElement(options, defaults, softEdgeRad) {
+    if (!options && !softEdgeRad) {
       return "<a:effectLst/>";
-    } else if (typeof options !== "object") {
+    } else if (options && typeof options !== "object") {
       console.warn("`shadow` options must be an object. Ex: `{shadow: {type:'none'}}`");
-      return "<a:effectLst/>";
+      if (!softEdgeRad) return "<a:effectLst/>";
     }
     let strXml = "<a:effectLst>";
-    const opts = Object.assign(Object.assign({}, defaults), options);
-    const type2 = opts.type || "outer";
-    const blur = valToPts(opts.blur);
-    const offset = valToPts(opts.offset);
-    const angle = Math.round(opts.angle * 6e4);
-    const color = opts.color;
-    const opacity = Math.round(opts.opacity * 1e5);
-    const rotShape = opts.rotateWithShape ? 1 : 0;
-    strXml += `<a:${type2}Shdw sx="100000" sy="100000" kx="0" ky="0"  algn="bl" blurRad="${blur}" rotWithShape="${rotShape}" dist="${offset}" dir="${angle}">`;
-    strXml += `<a:srgbClr val="${color}">`;
-    strXml += `<a:alpha val="${opacity}"/></a:srgbClr>`;
-    strXml += `</a:${type2}Shdw>`;
+    if (options && typeof options === "object") {
+      const opts = Object.assign(Object.assign({}, defaults), options);
+      const type2 = opts.type || "outer";
+      const blur = valToPts(opts.blur);
+      const offset = valToPts(opts.offset);
+      const angle = Math.round(opts.angle * 6e4);
+      const color = opts.color;
+      const opacity = Math.round(opts.opacity * 1e5);
+      const rotShape = opts.rotateWithShape ? 1 : 0;
+      strXml += `<a:${type2}Shdw sx="100000" sy="100000" kx="0" ky="0"  algn="bl" blurRad="${blur}" rotWithShape="${rotShape}" dist="${offset}" dir="${angle}">`;
+      strXml += `<a:srgbClr val="${color}">`;
+      strXml += `<a:alpha val="${opacity}"/></a:srgbClr>`;
+      strXml += `</a:${type2}Shdw>`;
+    }
+    if (softEdgeRad) {
+      const radEmu = Math.round(softEdgeRad * 12700);
+      strXml += `<a:softEdge rad="${radEmu}"/>`;
+    }
     strXml += "</a:effectLst>";
     return strXml;
   }
@@ -34750,18 +35699,24 @@ ${String(ex)}`);
               strSlideXml += `<a:tailEnd type="${slideItemObj.options.line.endArrowType}"/>`;
             strSlideXml += "</a:ln>";
           }
-          if (slideItemObj.options.shadow && slideItemObj.options.shadow.type !== "none") {
-            slideItemObj.options.shadow.type = slideItemObj.options.shadow.type || "outer";
-            slideItemObj.options.shadow.blur = valToPts(slideItemObj.options.shadow.blur || 8);
-            slideItemObj.options.shadow.offset = valToPts(slideItemObj.options.shadow.offset || 4);
-            slideItemObj.options.shadow.angle = Math.round((slideItemObj.options.shadow.angle || 270) * 6e4);
-            slideItemObj.options.shadow.opacity = Math.round((slideItemObj.options.shadow.opacity || 0.75) * 1e5);
-            slideItemObj.options.shadow.color = slideItemObj.options.shadow.color || DEF_TEXT_SHADOW.color;
+          if (slideItemObj.options.shadow && slideItemObj.options.shadow.type !== "none" || slideItemObj.options.softEdgeRad) {
             strSlideXml += "<a:effectLst>";
-            strSlideXml += ` <a:${slideItemObj.options.shadow.type}Shdw ${slideItemObj.options.shadow.type === "outer" ? 'sx="100000" sy="100000" kx="0" ky="0" algn="bl" rotWithShape="0"' : ""} blurRad="${slideItemObj.options.shadow.blur}" dist="${slideItemObj.options.shadow.offset}" dir="${slideItemObj.options.shadow.angle}">`;
-            strSlideXml += ` <a:srgbClr val="${slideItemObj.options.shadow.color}">`;
-            strSlideXml += ` <a:alpha val="${slideItemObj.options.shadow.opacity}"/></a:srgbClr>`;
-            strSlideXml += " </a:outerShdw>";
+            if (slideItemObj.options.shadow && slideItemObj.options.shadow.type !== "none") {
+              slideItemObj.options.shadow.type = slideItemObj.options.shadow.type || "outer";
+              slideItemObj.options.shadow.blur = valToPts(slideItemObj.options.shadow.blur || 8);
+              slideItemObj.options.shadow.offset = valToPts(slideItemObj.options.shadow.offset || 4);
+              slideItemObj.options.shadow.angle = Math.round((slideItemObj.options.shadow.angle || 270) * 6e4);
+              slideItemObj.options.shadow.opacity = Math.round((slideItemObj.options.shadow.opacity || 0.75) * 1e5);
+              slideItemObj.options.shadow.color = slideItemObj.options.shadow.color || DEF_TEXT_SHADOW.color;
+              strSlideXml += ` <a:${slideItemObj.options.shadow.type}Shdw ${slideItemObj.options.shadow.type === "outer" ? 'sx="100000" sy="100000" kx="0" ky="0" algn="bl" rotWithShape="0"' : ""} blurRad="${slideItemObj.options.shadow.blur}" dist="${slideItemObj.options.shadow.offset}" dir="${slideItemObj.options.shadow.angle}">`;
+              strSlideXml += ` <a:srgbClr val="${slideItemObj.options.shadow.color}">`;
+              strSlideXml += ` <a:alpha val="${slideItemObj.options.shadow.opacity}"/></a:srgbClr>`;
+              strSlideXml += " </a:outerShdw>";
+            }
+            if (slideItemObj.options.softEdgeRad) {
+              var softRadEmu = Math.round(slideItemObj.options.softEdgeRad * 12700);
+              strSlideXml += '<a:softEdge rad="' + softRadEmu + '"/>';
+            }
             strSlideXml += "</a:effectLst>";
           }
           strSlideXml += "</p:spPr>";
@@ -34795,6 +35750,11 @@ ${String(ex)}`);
           } else {
             strSlideXml += `<a:blip r:embed="rId${slideItemObj.imageRid}">`;
             strSlideXml += slideItemObj.options.transparency ? `<a:alphaModFix amt="${Math.round((100 - slideItemObj.options.transparency) * 1e3)}"/>` : "";
+            if (slideItemObj.options.brightness !== void 0 || slideItemObj.options.contrast !== void 0) {
+              const bright = slideItemObj.options.brightness ? Math.round(slideItemObj.options.brightness * 1e3) : 0;
+              const contrast = slideItemObj.options.contrast ? Math.round(slideItemObj.options.contrast * 1e3) : 0;
+              strSlideXml += `<a:lum bright="${bright}" contrast="${contrast}"/>`;
+            }
             strSlideXml += "</a:blip>";
           }
           if (sizing === null || sizing === void 0 ? void 0 : sizing.type) {
@@ -34822,18 +35782,24 @@ ${String(ex)}`);
           } else {
             strSlideXml += ` <a:prstGeom prst="${rounding ? "ellipse" : "rect"}"><a:avLst/></a:prstGeom>`;
           }
-          if (slideItemObj.options.shadow && slideItemObj.options.shadow.type !== "none") {
-            slideItemObj.options.shadow.type = slideItemObj.options.shadow.type || "outer";
-            slideItemObj.options.shadow.blur = valToPts(slideItemObj.options.shadow.blur || 8);
-            slideItemObj.options.shadow.offset = valToPts(slideItemObj.options.shadow.offset || 4);
-            slideItemObj.options.shadow.angle = Math.round((slideItemObj.options.shadow.angle || 270) * 6e4);
-            slideItemObj.options.shadow.opacity = Math.round((slideItemObj.options.shadow.opacity || 0.75) * 1e5);
-            slideItemObj.options.shadow.color = slideItemObj.options.shadow.color || DEF_TEXT_SHADOW.color;
+          if (slideItemObj.options.shadow && slideItemObj.options.shadow.type !== "none" || slideItemObj.options.softEdgeRad) {
             strSlideXml += "<a:effectLst>";
-            strSlideXml += `<a:${slideItemObj.options.shadow.type}Shdw ${slideItemObj.options.shadow.type === "outer" ? 'sx="100000" sy="100000" kx="0" ky="0" algn="bl" rotWithShape="0"' : ""} blurRad="${slideItemObj.options.shadow.blur}" dist="${slideItemObj.options.shadow.offset}" dir="${slideItemObj.options.shadow.angle}">`;
-            strSlideXml += `<a:srgbClr val="${slideItemObj.options.shadow.color}">`;
-            strSlideXml += `<a:alpha val="${slideItemObj.options.shadow.opacity}"/></a:srgbClr>`;
-            strSlideXml += `</a:${slideItemObj.options.shadow.type}Shdw>`;
+            if (slideItemObj.options.shadow && slideItemObj.options.shadow.type !== "none") {
+              slideItemObj.options.shadow.type = slideItemObj.options.shadow.type || "outer";
+              slideItemObj.options.shadow.blur = valToPts(slideItemObj.options.shadow.blur || 8);
+              slideItemObj.options.shadow.offset = valToPts(slideItemObj.options.shadow.offset || 4);
+              slideItemObj.options.shadow.angle = Math.round((slideItemObj.options.shadow.angle || 270) * 6e4);
+              slideItemObj.options.shadow.opacity = Math.round((slideItemObj.options.shadow.opacity || 0.75) * 1e5);
+              slideItemObj.options.shadow.color = slideItemObj.options.shadow.color || DEF_TEXT_SHADOW.color;
+              strSlideXml += `<a:${slideItemObj.options.shadow.type}Shdw ${slideItemObj.options.shadow.type === "outer" ? 'sx="100000" sy="100000" kx="0" ky="0" algn="bl" rotWithShape="0"' : ""} blurRad="${slideItemObj.options.shadow.blur}" dist="${slideItemObj.options.shadow.offset}" dir="${slideItemObj.options.shadow.angle}">`;
+              strSlideXml += `<a:srgbClr val="${slideItemObj.options.shadow.color}">`;
+              strSlideXml += `<a:alpha val="${slideItemObj.options.shadow.opacity}"/></a:srgbClr>`;
+              strSlideXml += `</a:${slideItemObj.options.shadow.type}Shdw>`;
+            }
+            if (slideItemObj.options.softEdgeRad) {
+              var softRadEmu2 = Math.round(slideItemObj.options.softEdgeRad * 12700);
+              strSlideXml += '<a:softEdge rad="' + softRadEmu2 + '"/>';
+            }
             strSlideXml += "</a:effectLst>";
           }
           strSlideXml += "</p:spPr>";