docgen-utils 1.0.27 → 1.0.29

package/dist/bundle.js

@@ -50371,7 +50371,7 @@ var docgen = (() => {
     }
     return { type: "image", imageKey, src, alt, width, height, caption };
   }
-  function parseContainerContent(element, cssContext, nextImageKey, inheritedColor) {
+  function parseContainerContent(element, cssContext, _nextImageKey, inheritedColor) {
     const innerElements = [];
     function processInnerNode(node, color) {
       if (node.nodeType === Node.TEXT_NODE) {
@@ -65048,7 +65048,7 @@ var docgen = (() => {
     }
     return `<img src="${dataUri}"${alt} style="${styles.join(";")}">`;
   }
-  function renderPositionedElements(positionedElements, sectionProps, styleMap, themeColors, imageMap, docDefaults = {}) {
+  function renderPositionedElements(positionedElements, _sectionProps, styleMap, _themeColors, imageMap, docDefaults = {}) {
     if (positionedElements.length === 0)
       return "";
     let html = "";
@@ -65528,6 +65528,28 @@ ${generateStylesCss(styleMap, themeFonts)}
     const alpha = parseFloat(match[4]);
     return Math.round((1 - alpha) * 100);
   }
+  function extractZIndex(computed) {
+    const zIndex = computed.zIndex;
+    if (zIndex === "auto" || zIndex === "")
+      return void 0;
+    const parsed = parseInt(zIndex, 10);
+    if (isNaN(parsed))
+      return void 0;
+    return parsed;
+  }
+  function getEffectiveOpacity(element, win) {
+    let effectiveOpacity = 1;
+    let current = element;
+    while (current && current !== win.document.body && current !== win.document.documentElement) {
+      const computed = win.getComputedStyle(current);
+      const opacity = parseFloat(computed.opacity);
+      if (!isNaN(opacity) && opacity < 1) {
+        effectiveOpacity *= opacity;
+      }
+      current = current.parentElement;
+    }
+    return effectiveOpacity;
+  }
   function extractDashType(borderStyle) {
     switch (borderStyle.toLowerCase()) {
       case "dashed":
@@ -65578,18 +65600,6 @@ ${generateStylesCss(styleMap, themeFonts)}
     }
     return null;
   }
-  function getEffectiveOpacity(el, win) {
-    let opacity = 1;
-    let node = el;
-    while (node && node.tagName !== "HTML") {
-      const style = win.getComputedStyle(node);
-      const nodeOpacity = parseFloat(style.opacity);
-      if (!isNaN(nodeOpacity))
-        opacity *= nodeOpacity;
-      node = node.parentElement;
-    }
-    return opacity;
-  }
   function splitCssBackgroundGradients(bgImage) {
     if (!bgImage || bgImage === "none")
       return [];
@@ -65990,8 +66000,50 @@ ${generateStylesCss(styleMap, themeFonts)}
     }
     return text;
   }
+  var monospaceFonts = /* @__PURE__ */ new Set([
+    "consolas",
+    "courier",
+    "courier new",
+    "monospace",
+    "monaco",
+    "lucida console",
+    "dejavu sans mono",
+    "source code pro",
+    "fira code",
+    "roboto mono",
+    "jetbrains mono",
+    "inconsolata",
+    "menlo",
+    "sf mono",
+    "ubuntu mono",
+    "droid sans mono",
+    "andale mono",
+    "liberation mono"
+  ]);
+  function isMonospaceFont(fontFamily) {
+    const primaryFont = fontFamily.split(",")[0].trim().replace(/['"]/g, "").toLowerCase();
+    if (monospaceFonts.has(primaryFont)) {
+      return true;
+    }
+    const fonts = fontFamily.toLowerCase();
+    return fonts.includes("monospace") || fonts.includes("consolas") || fonts.includes("courier");
+  }
+  function shouldPreserveWhitespace(computed) {
+    const whiteSpace = computed.whiteSpace;
+    if (whiteSpace === "pre" || whiteSpace === "pre-wrap" || whiteSpace === "pre-line") {
+      return true;
+    }
+    return isMonospaceFont(computed.fontFamily);
+  }
   function getTransformedText(element, computed) {
-    const rawText = element.textContent?.trim() || "";
+    const preserveWhitespace = shouldPreserveWhitespace(computed);
+    let rawText;
+    if (preserveWhitespace) {
+      rawText = element.innerText || element.textContent || "";
+    } else {
+      rawText = element.textContent?.trim() || "";
+    }
+    rawText = rawText.replace(/\u00A0/g, " ");
     const textTransform = computed.textTransform;
     if (textTransform && textTransform !== "none") {
       return applyTextTransform2(rawText, textTransform);
@@ -66542,6 +66594,8 @@ ${generateStylesCss(styleMap, themeFonts)}
     const parentRect = el.getBoundingClientRect();
     if (parentRect.width <= 0 || parentRect.height <= 0)
       return results;
+    const parentComputed = win.getComputedStyle(el);
+    const parentZIndex = extractZIndex(parentComputed);
     for (const pseudo of ["::before", "::after"]) {
       const pComputed = win.getComputedStyle(el, pseudo);
       const content = pComputed.content;
@@ -66579,16 +66633,16 @@ ${generateStylesCss(styleMap, themeFonts)}
         pTop = 0;
       const pseudoPos = pComputed.position;
       if (!pseudoPos || pseudoPos === "static") {
-        const parentComputed = win.getComputedStyle(el);
-        const parentDisplay = parentComputed.display;
+        const parentComputed2 = win.getComputedStyle(el);
+        const parentDisplay = parentComputed2.display;
         const isFlex = parentDisplay === "flex" || parentDisplay === "inline-flex";
         const isGrid = parentDisplay === "grid" || parentDisplay === "inline-grid";
         if (isFlex) {
-          const flexDir = parentComputed.flexDirection || "row";
+          const flexDir = parentComputed2.flexDirection || "row";
           const isRow = flexDir === "row" || flexDir === "row-reverse";
           const isReverse = flexDir.endsWith("-reverse");
           const alignSelf = pComputed.alignSelf;
-          const effectiveAlign = alignSelf && alignSelf !== "auto" ? alignSelf : parentComputed.alignItems || "stretch";
+          const effectiveAlign = alignSelf && alignSelf !== "auto" ? alignSelf : parentComputed2.alignItems || "stretch";
           const mTop = parseFloat(pComputed.marginTop) || 0;
           const mRight = parseFloat(pComputed.marginRight) || 0;
           const mBottom = parseFloat(pComputed.marginBottom) || 0;
@@ -66611,8 +66665,8 @@ ${generateStylesCss(styleMap, themeFonts)}
               crossOffset = crossMarginBefore;
               break;
           }
-          const gapProp = isRow ? parentComputed.columnGap : parentComputed.rowGap;
-          const mainGap = parseFloat(gapProp) || parseFloat(parentComputed.gap) || 0;
+          const gapProp = isRow ? parentComputed2.columnGap : parentComputed2.rowGap;
+          const mainGap = parseFloat(gapProp) || parseFloat(parentComputed2.gap) || 0;
           const realChildren = Array.from(el.children).filter((c) => {
             const s = win.getComputedStyle(c);
             return s.display !== "none" && s.position !== "absolute" && s.position !== "fixed";
@@ -66636,7 +66690,7 @@ ${generateStylesCss(styleMap, themeFonts)}
                 mainOffset = marginBefore;
             }
           } else {
-            const justify = parentComputed.justifyContent || "normal";
+            const justify = parentComputed2.justifyContent || "normal";
             const mainSize = isRow ? parentRect.width : parentRect.height;
             const pseudoMainOuter = isRow ? pWidth + mLeft + mRight : pHeight + mTop + mBottom;
             const marginBefore = isRow ? mLeft : mTop;
@@ -66652,9 +66706,9 @@ ${generateStylesCss(styleMap, themeFonts)}
           pTop = isRow ? crossOffset : mainOffset;
         } else if (isGrid) {
           const alignSelf = pComputed.alignSelf;
-          const alignItems = alignSelf && alignSelf !== "auto" ? alignSelf : parentComputed.alignItems || "stretch";
+          const alignItems = alignSelf && alignSelf !== "auto" ? alignSelf : parentComputed2.alignItems || "stretch";
           const justifySelf = pComputed.justifySelf;
-          const justifyItems = justifySelf && justifySelf !== "auto" ? justifySelf : parentComputed.justifyItems || "stretch";
+          const justifyItems = justifySelf && justifySelf !== "auto" ? justifySelf : parentComputed2.justifyItems || "stretch";
           if (alignItems === "center") {
             pTop = (parentRect.height - pHeight) / 2;
           } else if (alignItems === "end") {
@@ -66683,7 +66737,13 @@ ${generateStylesCss(styleMap, themeFonts)}
       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)
+      const pseudoBorderTopWidth = parseFloat(pComputed.borderTopWidth) || 0;
+      const pseudoBorderRightWidth = parseFloat(pComputed.borderRightWidth) || 0;
+      const pseudoBorderBottomWidth = parseFloat(pComputed.borderBottomWidth) || 0;
+      const pseudoBorderLeftWidth = parseFloat(pComputed.borderLeftWidth) || 0;
+      const hasPseudoBorder = pseudoBorderTopWidth > 0 || pseudoBorderRightWidth > 0 || pseudoBorderBottomWidth > 0 || pseudoBorderLeftWidth > 0;
+      const hasUniformPseudoBorder = hasPseudoBorder && pseudoBorderTopWidth === pseudoBorderRightWidth && pseudoBorderRightWidth === pseudoBorderBottomWidth && pseudoBorderBottomWidth === pseudoBorderLeftWidth;
+      if (!hasBg && !hasGradient && !hasBgImage && !hasPseudoBorder)
         continue;
       let gradient = null;
       const extraPseudoGradients = [];
@@ -66704,10 +66764,16 @@ ${generateStylesCss(styleMap, themeFonts)}
       let rectRadius = 0;
       const borderRadius = pComputed.borderRadius;
       const radiusValue = parseFloat(borderRadius);
+      const pseudoRadiusTL = parseFloat(pComputed.borderTopLeftRadius) || 0;
+      const pseudoRadiusTR = parseFloat(pComputed.borderTopRightRadius) || 0;
+      const pseudoRadiusBL = parseFloat(pComputed.borderBottomLeftRadius) || 0;
+      const pseudoRadiusBR = parseFloat(pComputed.borderBottomRightRadius) || 0;
+      const hasPseudoRadius = pseudoRadiusTL > 0 || pseudoRadiusTR > 0 || pseudoRadiusBL > 0 || pseudoRadiusBR > 0;
+      const hasNonUniformPseudoRadius = hasPseudoRadius && (pseudoRadiusTL !== pseudoRadiusTR || pseudoRadiusTL !== pseudoRadiusBL || pseudoRadiusTL !== pseudoRadiusBR);
       const isCircularRadius = borderRadius.includes("%") ? radiusValue >= 50 : radiusValue > 0 && radiusValue >= Math.min(pWidth, pHeight) / 2 - 1;
       const aspectRatio = pWidth / pHeight;
       const isEllipse = isCircularRadius && aspectRatio > 0.5 && aspectRatio < 2;
-      if (radiusValue > 0 && !isEllipse) {
+      if (radiusValue > 0 && !isEllipse && !hasNonUniformPseudoRadius) {
         if (borderRadius.includes("%")) {
           const minDim = Math.min(pWidth, pHeight);
           rectRadius = radiusValue / 100 * pxToInch(minDim);
@@ -66716,17 +66782,18 @@ ${generateStylesCss(styleMap, themeFonts)}
         }
       }
       const shadow = parseBoxShadow(pComputed.boxShadow);
+      const pseudoRotation = extractRotationAngle(pComputed);
       let effectiveRectRadius = isEllipse ? 0 : rectRadius;
       if (rectRadius === 0 && !isEllipse) {
-        const parentComputed = win.getComputedStyle(el);
-        const parentOverflow = parentComputed.overflow;
+        const parentComputed2 = win.getComputedStyle(el);
+        const parentOverflow = parentComputed2.overflow;
         if (parentOverflow === "hidden" || parentOverflow === "clip") {
-          const parentRadius = parseFloat(parentComputed.borderRadius);
+          const parentRadius = parseFloat(parentComputed2.borderRadius);
           if (parentRadius > 0) {
-            const parentBorderLeft = parseFloat(parentComputed.borderLeftWidth) || 0;
-            const parentBorderRight = parseFloat(parentComputed.borderRightWidth) || 0;
-            const parentBorderTop = parseFloat(parentComputed.borderTopWidth) || 0;
-            const parentBorderBottom = parseFloat(parentComputed.borderBottomWidth) || 0;
+            const parentBorderLeft = parseFloat(parentComputed2.borderLeftWidth) || 0;
+            const parentBorderRight = parseFloat(parentComputed2.borderRightWidth) || 0;
+            const parentBorderTop = parseFloat(parentComputed2.borderTopWidth) || 0;
+            const parentBorderBottom = parseFloat(parentComputed2.borderBottomWidth) || 0;
             const parentInnerWidth = parentRect.width - parentBorderLeft - parentBorderRight;
             const parentInnerHeight = parentRect.height - parentBorderTop - parentBorderBottom;
             const flushTop = Math.abs(pTop) < 2;
@@ -66741,6 +66808,244 @@ ${generateStylesCss(styleMap, themeFonts)}
           }
         }
       }
+      let asymmetricCornerGeometry = null;
+      if (rectRadius === 0 && !isEllipse && effectiveRectRadius > 0) {
+        const parentComputed2 = win.getComputedStyle(el);
+        const parentRadius = parseFloat(parentComputed2.borderRadius);
+        const isThinHorizontal = pHeight < parentRadius && pWidth >= parentRadius * 2;
+        const isThinVertical = pWidth < parentRadius && pHeight >= parentRadius * 2;
+        if (isThinHorizontal || isThinVertical) {
+          const parentBorderLeft = parseFloat(parentComputed2.borderLeftWidth) || 0;
+          const parentBorderRight = parseFloat(parentComputed2.borderRightWidth) || 0;
+          const parentBorderTop = parseFloat(parentComputed2.borderTopWidth) || 0;
+          const parentBorderBottom = parseFloat(parentComputed2.borderBottomWidth) || 0;
+          const parentInnerWidth = parentRect.width - parentBorderLeft - parentBorderRight;
+          const parentInnerHeight = parentRect.height - parentBorderTop - parentBorderBottom;
+          const flushTop = Math.abs(pTop) < 2;
+          const flushLeft = Math.abs(pLeft) < 2;
+          const flushRight = Math.abs(pLeft + pWidth - parentRect.width) < 2 || Math.abs(pLeft + pWidth - parentInnerWidth) < 2;
+          const flushBottom = Math.abs(pTop + pHeight - parentRect.height) < 2 || Math.abs(pTop + pHeight - parentInnerHeight) < 2;
+          const arcXAtY = (r2, y) => {
+            if (y <= 0)
+              return r2;
+            if (y >= r2)
+              return 0;
+            const dy = r2 - y;
+            return r2 - Math.sqrt(r2 * r2 - dy * dy);
+          };
+          const h = pHeight;
+          const w = pWidth;
+          const r = parentRadius;
+          const EMU_PER_PX3 = 914400 / 96;
+          const points = [];
+          if (isThinHorizontal && flushTop) {
+            const segments = 8;
+            const arcPointsLeft = [];
+            const arcPointsRight = [];
+            for (let i = 0; i <= segments; i++) {
+              const t = i / segments;
+              const y = t * h;
+              const x = arcXAtY(r, y);
+              arcPointsLeft.push({
+                x: Math.round(x * EMU_PER_PX3),
+                y: Math.round(y * EMU_PER_PX3)
+              });
+              arcPointsRight.push({
+                x: Math.round((w - x) * EMU_PER_PX3),
+                y: Math.round(y * EMU_PER_PX3)
+              });
+            }
+            points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+            points.push({ x: arcPointsRight[0].x, y: arcPointsRight[0].y });
+            for (let i = 1; i <= segments; i++) {
+              points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+            }
+            points.push({ x: arcPointsLeft[segments].x, y: arcPointsLeft[segments].y });
+            for (let i = segments - 1; i >= 1; i--) {
+              points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+            }
+            points.push({ x: 0, y: 0, close: true });
+            asymmetricCornerGeometry = points;
+          } else if (isThinHorizontal && flushBottom) {
+            const segments = 8;
+            const arcPointsLeft = [];
+            const arcPointsRight = [];
+            for (let i = 0; i <= segments; i++) {
+              const t = i / segments;
+              const y = t * h;
+              const arcDistance = arcXAtY(r, h - y);
+              arcPointsLeft.push({
+                x: Math.round(arcDistance * EMU_PER_PX3),
+                y: Math.round(y * EMU_PER_PX3)
+              });
+              arcPointsRight.push({
+                x: Math.round((w - arcDistance) * EMU_PER_PX3),
+                y: Math.round(y * EMU_PER_PX3)
+              });
+            }
+            points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+            points.push({ x: arcPointsRight[0].x, y: arcPointsRight[0].y });
+            for (let i = 1; i <= segments; i++) {
+              points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+            }
+            points.push({ x: arcPointsLeft[segments].x, y: arcPointsLeft[segments].y });
+            for (let i = segments - 1; i >= 0; i--) {
+              if (i === 0) {
+                points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y, close: true });
+              } else {
+                points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+              }
+            }
+            asymmetricCornerGeometry = points;
+          } else if (isThinVertical && flushLeft) {
+            const arcYAtX = (radius, x) => {
+              if (x <= 0)
+                return radius;
+              if (x >= radius)
+                return 0;
+              const dx = radius - x;
+              return radius - Math.sqrt(radius * radius - dx * dx);
+            };
+            const segments = 8;
+            const arcPointsTop = [];
+            const arcPointsBottom = [];
+            for (let i = 0; i <= segments; i++) {
+              const t = i / segments;
+              const x = t * w;
+              const arcDistance = arcYAtX(r, x);
+              arcPointsTop.push({
+                x: Math.round(x * EMU_PER_PX3),
+                y: Math.round(arcDistance * EMU_PER_PX3)
+              });
+              arcPointsBottom.push({
+                x: Math.round(x * EMU_PER_PX3),
+                y: Math.round((h - arcDistance) * EMU_PER_PX3)
+              });
+            }
+            points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+            for (let i = 1; i <= segments; i++) {
+              points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+            }
+            points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+            for (let i = segments - 1; i >= 0; i--) {
+              points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+            }
+            points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+            asymmetricCornerGeometry = points;
+          } else if (isThinVertical && flushRight) {
+            const arcYAtX = (radius, x) => {
+              if (x <= 0)
+                return radius;
+              if (x >= radius)
+                return 0;
+              const dx = radius - x;
+              return radius - Math.sqrt(radius * radius - dx * dx);
+            };
+            const segments = 8;
+            const arcPointsTop = [];
+            const arcPointsBottom = [];
+            for (let i = 0; i <= segments; i++) {
+              const t = i / segments;
+              const x = t * w;
+              const arcDistance = arcYAtX(r, w - x);
+              arcPointsTop.push({
+                x: Math.round(x * EMU_PER_PX3),
+                y: Math.round(arcDistance * EMU_PER_PX3)
+              });
+              arcPointsBottom.push({
+                x: Math.round(x * EMU_PER_PX3),
+                y: Math.round((h - arcDistance) * EMU_PER_PX3)
+              });
+            }
+            points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+            for (let i = 1; i <= segments; i++) {
+              points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+            }
+            points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+            for (let i = segments - 1; i >= 0; i--) {
+              points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+            }
+            points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+            asymmetricCornerGeometry = points;
+          }
+          if (asymmetricCornerGeometry) {
+            effectiveRectRadius = 0;
+          }
+        }
+      }
+      if (!asymmetricCornerGeometry && hasNonUniformPseudoRadius && !isEllipse) {
+        const w = pWidth;
+        const h = pHeight;
+        const EMU_PER_PX3 = 914400 / 96;
+        const widthEmu = Math.round(w * EMU_PER_PX3);
+        const heightEmu = Math.round(h * EMU_PER_PX3);
+        const segments = 8;
+        const points = [];
+        const addCornerArc = (cornerRadius, isRight, isBottom) => {
+          if (cornerRadius <= 0)
+            return;
+          for (let i = 0; i <= segments; i++) {
+            const t = i / segments;
+            const angle = t * Math.PI / 2;
+            let x, y;
+            if (!isRight && !isBottom) {
+              x = cornerRadius * (1 - Math.sin(angle));
+              y = cornerRadius * (1 - Math.cos(angle));
+            } else if (isRight && !isBottom) {
+              x = w - cornerRadius + cornerRadius * Math.sin(angle);
+              y = cornerRadius * (1 - Math.cos(angle));
+            } else if (!isRight && isBottom) {
+              x = cornerRadius * (1 - Math.cos(angle));
+              y = h - cornerRadius + cornerRadius * Math.sin(angle);
+            } else {
+              x = w - cornerRadius + cornerRadius * Math.cos(angle);
+              y = h - cornerRadius + cornerRadius * Math.sin(angle);
+            }
+            x = Math.max(0, Math.min(w, x));
+            y = Math.max(0, Math.min(h, y));
+            points.push({
+              x: Math.round(x * EMU_PER_PX3),
+              y: Math.round(y * EMU_PER_PX3),
+              ...points.length === 0 ? { moveTo: true } : {}
+            });
+          }
+        };
+        if (pseudoRadiusTL > 0) {
+          points.push({ x: Math.round(pseudoRadiusTL * EMU_PER_PX3), y: 0, moveTo: true });
+        } else {
+          points.push({ x: 0, y: 0, moveTo: true });
+        }
+        if (pseudoRadiusTR > 0) {
+          points.push({ x: Math.round((w - pseudoRadiusTR) * EMU_PER_PX3), y: 0 });
+          addCornerArc(pseudoRadiusTR, true, false);
+        } else {
+          points.push({ x: widthEmu, y: 0 });
+        }
+        if (pseudoRadiusBR > 0) {
+          points.push({ x: widthEmu, y: Math.round((h - pseudoRadiusBR) * EMU_PER_PX3) });
+          addCornerArc(pseudoRadiusBR, true, true);
+        } else {
+          points.push({ x: widthEmu, y: heightEmu });
+        }
+        if (pseudoRadiusBL > 0) {
+          points.push({ x: Math.round(pseudoRadiusBL * EMU_PER_PX3), y: heightEmu });
+          addCornerArc(pseudoRadiusBL, false, true);
+        } else {
+          points.push({ x: 0, y: heightEmu });
+        }
+        if (pseudoRadiusTL > 0) {
+          points.push({ x: 0, y: Math.round(pseudoRadiusTL * EMU_PER_PX3) });
+          addCornerArc(pseudoRadiusTL, false, false);
+        }
+        if (points.length > 0) {
+          const firstPoint = points[0];
+          points.push({ x: firstPoint.x, y: firstPoint.y, close: true });
+        }
+        if (points.length > 5) {
+          asymmetricCornerGeometry = points;
+          effectiveRectRadius = 0;
+        }
+      }
       const shapeElement = {
         type: "shape",
         text: "",
@@ -66756,15 +67061,22 @@ ${generateStylesCss(styleMap, themeFonts)}
           fill: hasBg ? rgbToHex(pComputed.backgroundColor) : null,
           gradient,
           transparency: hasBg ? extractAlpha(pComputed.backgroundColor) : null,
-          line: null,
+          line: hasUniformPseudoBorder ? {
+            color: rgbToHex(pComputed.borderColor),
+            width: pxToPoints(pComputed.borderTopWidth),
+            transparency: extractAlpha(pComputed.borderColor),
+            dashType: extractDashType(pComputed.borderStyle)
+          } : null,
           rectRadius: effectiveRectRadius,
           shadow,
           opacity: hasOpacity ? elementOpacity : null,
           isEllipse,
           softEdge: null,
-          rotate: null,
-          customGeometry: null
-        }
+          rotate: pseudoRotation,
+          cssTriangle: null,
+          customGeometry: asymmetricCornerGeometry
+        },
+        zIndex: parentZIndex
       };
       results.push(shapeElement);
       for (const extraGrad of extraPseudoGradients) {
@@ -66785,15 +67097,17 @@ ${generateStylesCss(styleMap, themeFonts)}
             isEllipse: false,
             softEdge: null,
             rotate: null,
+            cssTriangle: null,
             customGeometry: null
-          }
+          },
+          zIndex: parentZIndex
         };
         results.push(extraShape);
       }
     }
     return results;
   }
-  function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, win) {
+  function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, win, preserveWhitespace = false) {
     let prevNodeIsText = false;
     let pendingSoftBreak = false;
     element.childNodes.forEach((node) => {
@@ -66802,7 +67116,32 @@ ${generateStylesCss(styleMap, themeFonts)}
         pendingSoftBreak = true;
         prevNodeIsText = false;
       } else if (node.nodeType === Node.TEXT_NODE) {
-        const text = textTransform(node.textContent.replace(/\s+/g, " "));
+        let rawText = node.textContent || "";
+        rawText = rawText.replace(/\u00A0/g, " ");
+        let text;
+        if (preserveWhitespace) {
+          const lines = rawText.split("\n");
+          for (let i = 0; i < lines.length; i++) {
+            let lineText = lines[i];
+            lineText = textTransform(lineText);
+            const prevRun2 = runs[runs.length - 1];
+            if (i === 0 && prevNodeIsText && prevRun2 && !pendingSoftBreak) {
+              prevRun2.text += lineText;
+            } else {
+              const runOptions = { ...baseOptions };
+              if (i > 0 || pendingSoftBreak) {
+                runOptions.softBreakBefore = true;
+                pendingSoftBreak = false;
+              }
+              const runText = lineText.length > 0 ? lineText : " ";
+              runs.push({ text: runText, options: runOptions });
+            }
+          }
+          prevNodeIsText = true;
+          return;
+        } else {
+          text = textTransform(rawText.replace(/\s+/g, " "));
+        }
         const prevRun = runs[runs.length - 1];
         if (prevNodeIsText && prevRun && !pendingSoftBreak) {
           prevRun.text += text;
@@ -66858,6 +67197,17 @@ ${generateStylesCss(styleMap, themeFonts)}
             if (transparency !== null)
               options.transparency = transparency;
           }
+          if (computed.backgroundColor && computed.backgroundColor !== "rgba(0, 0, 0, 0)") {
+            const bgAlpha = extractAlpha(computed.backgroundColor);
+            if (bgAlpha !== null && bgAlpha > 0) {
+              options.highlight = {
+                color: rgbToHex(computed.backgroundColor),
+                transparency: bgAlpha
+              };
+            } else {
+              options.highlight = rgbToHex(computed.backgroundColor);
+            }
+          }
           const bgClip = computed.webkitBackgroundClip || computed.backgroundClip;
           const textFillColor = computed.webkitTextFillColor;
           const isTextFillTransparent = textFillColor === "transparent" || textFillColor === "rgba(0, 0, 0, 0)" || textFillColor && textFillColor.includes("rgba") && textFillColor.endsWith(", 0)");
@@ -66871,10 +67221,17 @@ ${generateStylesCss(styleMap, themeFonts)}
               }
             }
           }
-          if (computed.fontSize)
-            options.fontSize = pxToPoints(computed.fontSize);
-          if (computed.fontFamily) {
-            options.fontFace = extractFontFace(computed.fontFamily);
+          const inlineFontFace = computed.fontFamily ? extractFontFace(computed.fontFamily) : null;
+          const baseFontFaceForCheck = baseOptions.fontFace || "";
+          const baseFontFaceIsMonospace = baseFontFaceForCheck && isMonospaceFont(baseFontFaceForCheck);
+          if (computed.fontSize) {
+            const shouldKeepBaseFontSize = baseOptions.fontSize && baseFontFaceIsMonospace;
+            if (!shouldKeepBaseFontSize) {
+              options.fontSize = pxToPoints(computed.fontSize);
+            }
+          }
+          if (inlineFontFace) {
+            options.fontFace = inlineFontFace;
           }
           const runLetterSpacing = extractLetterSpacing(computed);
           if (runLetterSpacing !== null)
@@ -66888,18 +67245,65 @@ ${generateStylesCss(styleMap, themeFonts)}
           if (pendingSoftBreak) {
             pendingSoftBreak = false;
           }
-          parseInlineFormatting(el, options, runs, textTransform, win);
+          parseInlineFormatting(el, options, runs, textTransform, win, preserveWhitespace);
           if (hadPendingSoftBreak && runs.length > runsBeforeRecurse) {
             runs[runsBeforeRecurse].options = {
               ...runs[runsBeforeRecurse].options,
               softBreakBefore: true
             };
           }
+        } else {
+          const blockTags = /* @__PURE__ */ new Set(["P", "DIV", "LI", "BLOCKQUOTE", "PRE", "H1", "H2", "H3", "H4", "H5", "H6"]);
+          if (blockTags.has(el.tagName)) {
+            const runsBeforeRecurse = runs.length;
+            const hadPendingSoftBreak = pendingSoftBreak;
+            if (pendingSoftBreak) {
+              pendingSoftBreak = false;
+            }
+            let blockPreserveWhitespace = preserveWhitespace;
+            const blockComputed = win.getComputedStyle(el);
+            if (el.tagName === "PRE") {
+              const ws = blockComputed.whiteSpace;
+              blockPreserveWhitespace = ws === "pre" || ws === "pre-wrap" || ws === "pre-line";
+            }
+            const blockOptions = { ...baseOptions };
+            const blockIsBold = blockComputed.fontWeight === "bold" || parseInt(blockComputed.fontWeight) >= 600;
+            if (blockIsBold && !shouldSkipBold(blockComputed.fontFamily)) {
+              blockOptions.bold = true;
+            }
+            if (blockComputed.fontStyle === "italic") {
+              blockOptions.italic = true;
+            }
+            if (blockComputed.textDecoration?.includes("underline")) {
+              blockOptions.underline = true;
+            }
+            if (blockComputed.color && blockComputed.color !== "rgb(0, 0, 0)") {
+              blockOptions.color = rgbToHex(blockComputed.color);
+              const transparency = extractAlpha(blockComputed.color);
+              if (transparency !== null)
+                blockOptions.transparency = transparency;
+            }
+            if (blockComputed.fontSize) {
+              blockOptions.fontSize = pxToPoints(blockComputed.fontSize);
+            }
+            if (blockComputed.fontFamily) {
+              blockOptions.fontFace = extractFontFace(blockComputed.fontFamily);
+            }
+            parseInlineFormatting(el, blockOptions, runs, textTransform, win, blockPreserveWhitespace);
+            if (runs.length > runsBeforeRecurse) {
+              if (hadPendingSoftBreak || runsBeforeRecurse > 0) {
+                runs[runsBeforeRecurse].options = {
+                  ...runs[runsBeforeRecurse].options,
+                  breakLine: true
+                };
+              }
+            }
+          }
         }
         prevNodeIsText = false;
       }
     });
-    if (runs.length > 0) {
+    if (!preserveWhitespace && runs.length > 0) {
       runs[0].text = runs[0].text.replace(/^\s+/, "");
       runs[runs.length - 1].text = runs[runs.length - 1].text.replace(/\s+$/, "");
     }
@@ -66934,7 +67338,7 @@ ${generateStylesCss(styleMap, themeFonts)}
     }
     const elements = [];
     const placeholders = [];
-    const textTags = ["P", "H1", "H2", "H3", "H4", "H5", "H6", "UL", "OL", "LI", "SPAN"];
+    const textTags = ["P", "H1", "H2", "H3", "H4", "H5", "H6", "UL", "OL", "LI", "SPAN", "PRE"];
     const processed = /* @__PURE__ */ new Set();
     const bodyPseudoElements = extractPseudoElements(body, win);
     elements.push(...bodyPseudoElements);
@@ -66948,32 +67352,24 @@ ${generateStylesCss(styleMap, themeFonts)}
         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;
         const hasShadow = computed2.boxShadow && computed2.boxShadow !== "none";
         if (hasBg || hasBorder || hasShadow) {
-          errors.push(`Text element <${el.tagName.toLowerCase()}> has ${hasBg ? "background" : hasBorder ? "border" : "shadow"}. Backgrounds, borders, and shadows are only supported on <div> elements, not text elements.`);
-          return;
-        }
-      }
-      if (el.tagName === "SPAN" || el.tagName === "A") {
-        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;
-        const spanBgImage = computed2.backgroundImage;
-        const hasGradientBg = spanBgImage && spanBgImage !== "none" && (spanBgImage.includes("linear-gradient") || spanBgImage.includes("radial-gradient"));
-        const spanBgClip = computed2.webkitBackgroundClip || computed2.backgroundClip;
-        const spanTextFillColor = computed2.webkitTextFillColor;
-        const isGradientTextFill = hasGradientBg && spanBgClip === "text" && (spanTextFillColor === "transparent" || spanTextFillColor === "rgba(0, 0, 0, 0)" || spanTextFillColor && spanTextFillColor.includes("rgba") && spanTextFillColor.endsWith(", 0)"));
-        if (isGradientTextFill) {
-        } else if (hasBg || hasBorder || hasGradientBg) {
           const rect2 = htmlEl.getBoundingClientRect();
           if (rect2.width > 0 && rect2.height > 0) {
-            const text2 = getTransformedText(htmlEl, computed2);
+            const styledTextDisplay = computed2.display;
+            const styledTextFlexDir = computed2.flexDirection || "row";
+            const styledTextChildCount = el.children.length;
+            const isStyledTextFlexRow = (styledTextDisplay === "flex" || styledTextDisplay === "inline-flex") && (styledTextFlexDir === "row" || styledTextFlexDir === "row-reverse") && styledTextChildCount > 1;
+            const isStyledTextFlexCol = (styledTextDisplay === "flex" || styledTextDisplay === "inline-flex") && (styledTextFlexDir === "column" || styledTextFlexDir === "column-reverse") && styledTextChildCount > 1;
+            const isStyledTextGrid = styledTextDisplay === "grid" || styledTextDisplay === "inline-grid";
+            const shouldMergeStyledText = !isStyledTextFlexRow && !isStyledTextFlexCol && !isStyledTextGrid;
+            const text2 = shouldMergeStyledText ? getTransformedText(htmlEl, computed2) : "";
             const bgGradient = parseCssGradient(computed2.backgroundImage);
             const borderRadius = computed2.borderRadius;
             const radiusValue = parseFloat(borderRadius);
             let rectRadius = 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) {
+            const styledTextIsEllipse = isCircularRadius && aspectRatio > 0.5 && aspectRatio < 2;
+            if (radiusValue > 0 && !styledTextIsEllipse) {
               if (borderRadius.includes("%")) {
                 const minDim = Math.min(rect2.width, rect2.height);
                 rectRadius = radiusValue / 100 * pxToInch(minDim);
@@ -66985,12 +67381,19 @@ ${generateStylesCss(styleMap, themeFonts)}
             const borderRight = computed2.borderRightWidth;
             const borderBottom = computed2.borderBottomWidth;
             const borderLeft = computed2.borderLeftWidth;
-            const hasUniformBorder = hasBorder && borderTop === borderRight && borderRight === borderBottom && borderBottom === borderLeft;
-            const spanOpacity = getEffectiveOpacity(el, win);
-            const hasSpanOpacity = spanOpacity < 1;
-            const spanShadow = parseBoxShadow(computed2.boxShadow);
-            const spanWhiteSpace = computed2.whiteSpace;
-            const spanShouldNotWrap = spanWhiteSpace === "nowrap" || spanWhiteSpace === "pre" || rect2.width < 100 || rect2.height < 50;
+            const borders = [parseFloat(borderTop) || 0, parseFloat(borderRight) || 0, parseFloat(borderBottom) || 0, parseFloat(borderLeft) || 0];
+            const hasUniformBorder = hasBorder && borders.every((b) => b === borders[0]);
+            const styledTextOpacity = getEffectiveOpacity(el, win);
+            const hasStyledTextOpacity = styledTextOpacity < 1;
+            const styledTextShadow = parseBoxShadow(computed2.boxShadow);
+            const computedAlign = computed2.textAlign;
+            let textAlign2 = "left";
+            if (computedAlign === "center")
+              textAlign2 = "center";
+            else if (computedAlign === "right")
+              textAlign2 = "right";
+            else if (computedAlign === "justify")
+              textAlign2 = "justify";
             const shapeElement = {
               type: "shape",
               position: {
@@ -67006,9 +67409,10 @@ ${generateStylesCss(styleMap, themeFonts)}
                 fontFace: extractFontFace(computed2.fontFamily),
                 color: rgbToHex(computed2.color),
                 bold: parseInt(computed2.fontWeight) >= 600,
-                align: "center",
+                align: textAlign2,
                 valign: "middle",
-                wrap: !spanShouldNotWrap
+                wrap: true,
+                ...extractAlpha(computed2.color) !== null ? { transparency: extractAlpha(computed2.color) } : {}
               } : null,
               shape: {
                 fill: hasBg ? rgbToHex(computed2.backgroundColor) : null,
@@ -67020,144 +67424,1066 @@ ${generateStylesCss(styleMap, themeFonts)}
                   transparency: extractAlpha(computed2.borderColor),
                   dashType: extractDashType(computed2.borderStyle)
                 } : null,
-                rectRadius: spanIsEllipse ? 0 : rectRadius,
-                shadow: spanShadow,
-                opacity: hasSpanOpacity ? spanOpacity : null,
-                isEllipse: spanIsEllipse,
+                rectRadius: styledTextIsEllipse ? 0 : rectRadius,
+                shadow: styledTextShadow,
+                opacity: hasStyledTextOpacity ? styledTextOpacity : null,
+                isEllipse: styledTextIsEllipse,
                 softEdge: null,
                 rotate: null,
+                cssTriangle: null,
                 customGeometry: null
-              }
-            };
-            elements.push(shapeElement);
-            processed.add(el);
-            return;
-          }
-        }
-        const parent = el.parentElement;
-        if (parent && parent.tagName === "DIV") {
-          const rect2 = htmlEl.getBoundingClientRect();
-          const computed22 = win.getComputedStyle(el);
-          const text2 = getTransformedText(htmlEl, computed22);
-          if (rect2.width > 0 && rect2.height > 0 && text2) {
-            const fontSizePx2 = parseFloat(computed22.fontSize);
-            const lineHeightPx2 = parseFloat(computed22.lineHeight);
-            const lineHeightMultiplier2 = fontSizePx2 > 0 && !isNaN(lineHeightPx2) ? lineHeightPx2 / fontSizePx2 : 1;
-            const span2BgClip = computed22.webkitBackgroundClip || computed22.backgroundClip;
-            const span2TextFillColor = computed22.webkitTextFillColor;
-            const span2IsGradientText = span2BgClip === "text" && (span2TextFillColor === "transparent" || span2TextFillColor === "rgba(0, 0, 0, 0)" || span2TextFillColor && span2TextFillColor.includes("rgba") && span2TextFillColor.endsWith(", 0)"));
-            const span2BgImage = computed22.backgroundImage;
-            const span2HasGradientBg = span2BgImage && span2BgImage !== "none" && (span2BgImage.includes("linear-gradient") || span2BgImage.includes("radial-gradient"));
-            let spanFontFill = void 0;
-            let spanTextColor = rgbToHex(computed22.color);
-            if (span2IsGradientText && span2HasGradientBg) {
-              const spanGradient = parseCssGradient(span2BgImage);
-              if (spanGradient) {
-                spanFontFill = { type: "gradient", gradient: spanGradient };
-                spanTextColor = null;
-              }
-            }
-            const textElement = {
-              type: "p",
-              text: [{ text: text2, options: spanFontFill ? { fontFill: spanFontFill } : {} }],
-              position: {
-                x: pxToInch(rect2.left),
-                y: pxToInch(rect2.top),
-                w: pxToInch(rect2.width),
-                h: pxToInch(rect2.height)
               },
-              style: {
-                fontSize: pxToPoints(computed22.fontSize),
-                fontFace: extractFontFace(computed22.fontFamily),
-                color: spanTextColor,
-                bold: parseInt(computed22.fontWeight) >= 600,
-                italic: computed22.fontStyle === "italic",
-                align: computed22.textAlign === "center" ? "center" : computed22.textAlign === "right" ? "right" : "left",
-                valign: "middle",
-                lineSpacing: lineHeightMultiplier2 * pxToPoints(computed22.fontSize),
-                fontFill: spanFontFill
-              }
+              zIndex: extractZIndex(computed2)
             };
-            elements.push(textElement);
-            processed.add(el);
-            return;
-          }
-        }
-      }
-      if (el.className && typeof el.className === "string" && el.className.includes("placeholder")) {
-        const rect2 = htmlEl.getBoundingClientRect();
-        if (rect2.width === 0 || rect2.height === 0) {
-          errors.push(`Placeholder "${el.id || "unnamed"}" has ${rect2.width === 0 ? "width: 0" : "height: 0"}. Check the layout CSS.`);
-        } else {
-          placeholders.push({
-            id: el.id || `placeholder-${placeholders.length}`,
-            x: pxToInch(rect2.left),
-            y: pxToInch(rect2.top),
-            w: pxToInch(rect2.width),
-            h: pxToInch(rect2.height)
-          });
-        }
-        processed.add(el);
-        return;
-      }
-      if (el.tagName === "IMG") {
-        const rect2 = htmlEl.getBoundingClientRect();
-        if (rect2.width > 0 && rect2.height > 0) {
-          const imgComputed = win.getComputedStyle(el);
-          const bodyRect = doc.body.getBoundingClientRect();
-          const coversWidth = rect2.width >= bodyRect.width * 0.95;
-          const coversHeight = rect2.height >= bodyRect.height * 0.95;
-          const nearOrigin = rect2.left <= 10 && rect2.top <= 10;
-          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;
-            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);
+            elements.push(shapeElement);
+            if (hasBorder && !hasUniformBorder) {
+              const topRightBottomBorders = [borders[0], borders[1], borders[2]].filter((b) => b > 0);
+              const minTopRightBottom = topRightBottomBorders.length > 0 ? Math.min(...topRightBottomBorders) : 0;
+              const topLeftBottomBorders = [borders[0], borders[3], borders[2]].filter((b) => b > 0);
+              const minTopLeftBottom = topLeftBottomBorders.length > 0 ? Math.min(...topLeftBottomBorders) : 0;
+              const borderLeftW = borders[3];
+              const borderRightW = borders[1];
+              const borderLeftHex = rgbToHex(computed2.borderLeftColor);
+              const borderRightHex = rgbToHex(computed2.borderRightColor);
+              const borderTopHex = rgbToHex(computed2.borderTopColor);
+              const borderLeftAlpha = extractAlpha(computed2.borderLeftColor);
+              const borderTopAlpha = extractAlpha(computed2.borderTopColor);
+              const borderRightAlpha = extractAlpha(computed2.borderRightColor);
+              const borderLeftHasDifferentColor = borderTopHex !== borderLeftHex;
+              const borderLeftIsMoreOpaque = (borderLeftAlpha ?? 0) < (borderTopAlpha ?? 0);
+              if (borderLeftW > 0 && !isFullyTransparent(computed2.borderLeftColor) && (borderLeftW > minTopRightBottom || minTopRightBottom === 0 || borderLeftHasDifferentColor || borderLeftIsMoreOpaque)) {
                 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);
+                  const w2 = borderLeftW;
+                  const h2 = rect2.height;
+                  const r = radiusValue;
+                  const EMU_PER_PX3 = 914400 / 96;
+                  const arcYAtX = (radius, x2) => {
+                    if (x2 <= 0)
+                      return radius;
+                    if (x2 >= radius)
+                      return 0;
+                    const dx = radius - x2;
+                    return radius - Math.sqrt(radius * radius - dx * dx);
+                  };
+                  const segments = 8;
+                  const arcPointsTop = [];
+                  const arcPointsBottom = [];
+                  for (let i = 0; i <= segments; i++) {
+                    const t = i / segments;
+                    const x2 = t * w2;
+                    const arcDistance = arcYAtX(r, x2);
+                    arcPointsTop.push({
+                      x: Math.round(x2 * EMU_PER_PX3),
+                      y: Math.round(arcDistance * EMU_PER_PX3)
+                    });
+                    arcPointsBottom.push({
+                      x: Math.round(x2 * EMU_PER_PX3),
+                      y: Math.round((h2 - arcDistance) * EMU_PER_PX3)
+                    });
                   }
-                }
-              }
-            }
-            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 = getEffectiveOpacity(el, win);
-          const hasOpacity = imgOpacity < 1 && imgOpacity >= 0;
+                  const points = [];
+                  points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                  for (let i = 1; i <= segments; i++) {
+                    points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                  }
+                  points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                  for (let i = segments - 1; i >= 0; i--) {
+                    points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                  }
+                  points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                  const borderLeftShape = {
+                    type: "shape",
+                    text: "",
+                    textRuns: null,
+                    style: null,
+                    position: {
+                      x: pxToInch(rect2.left),
+                      y: pxToInch(rect2.top),
+                      w: pxToInch(borderLeftW),
+                      h: pxToInch(rect2.height)
+                    },
+                    shape: {
+                      fill: rgbToHex(computed2.borderLeftColor),
+                      gradient: null,
+                      transparency: extractAlpha(computed2.borderLeftColor),
+                      line: null,
+                      rectRadius: 0,
+                      shadow: null,
+                      opacity: null,
+                      isEllipse: false,
+                      softEdge: null,
+                      rotate: null,
+                      cssTriangle: null,
+                      customGeometry: points
+                    }
+                  };
+                  elements.push(borderLeftShape);
+                } else {
+                  const borderLeftShape = {
+                    type: "shape",
+                    text: "",
+                    textRuns: null,
+                    style: null,
+                    position: {
+                      x: pxToInch(rect2.left),
+                      y: pxToInch(rect2.top),
+                      w: pxToInch(borderLeftW),
+                      h: pxToInch(rect2.height)
+                    },
+                    shape: {
+                      fill: rgbToHex(computed2.borderLeftColor),
+                      gradient: null,
+                      transparency: extractAlpha(computed2.borderLeftColor),
+                      line: null,
+                      rectRadius: 0,
+                      shadow: null,
+                      opacity: null,
+                      isEllipse: false,
+                      softEdge: null,
+                      rotate: null,
+                      cssTriangle: null,
+                      customGeometry: null
+                    }
+                  };
+                  elements.push(borderLeftShape);
+                }
+              }
+              const borderRightHasDifferentColor = borderTopHex !== borderRightHex;
+              const borderRightIsMoreOpaque = (borderRightAlpha ?? 0) < (borderTopAlpha ?? 0);
+              if (borderRightW > 0 && !isFullyTransparent(computed2.borderRightColor) && (borderRightW > minTopLeftBottom || minTopLeftBottom === 0 || borderRightHasDifferentColor || borderRightIsMoreOpaque)) {
+                if (radiusValue > 0) {
+                  const w2 = borderRightW;
+                  const h2 = rect2.height;
+                  const r = radiusValue;
+                  const EMU_PER_PX3 = 914400 / 96;
+                  const arcYAtX = (radius, x2) => {
+                    if (x2 <= 0)
+                      return radius;
+                    if (x2 >= radius)
+                      return 0;
+                    const dx = radius - x2;
+                    return radius - Math.sqrt(radius * radius - dx * dx);
+                  };
+                  const segments = 8;
+                  const arcPointsTop = [];
+                  const arcPointsBottom = [];
+                  for (let i = 0; i <= segments; i++) {
+                    const t = i / segments;
+                    const x2 = t * w2;
+                    const arcDistance = arcYAtX(r, w2 - x2);
+                    arcPointsTop.push({
+                      x: Math.round(x2 * EMU_PER_PX3),
+                      y: Math.round(arcDistance * EMU_PER_PX3)
+                    });
+                    arcPointsBottom.push({
+                      x: Math.round(x2 * EMU_PER_PX3),
+                      y: Math.round((h2 - arcDistance) * EMU_PER_PX3)
+                    });
+                  }
+                  const points = [];
+                  points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                  for (let i = 1; i <= segments; i++) {
+                    points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                  }
+                  points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                  for (let i = segments - 1; i >= 0; i--) {
+                    points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                  }
+                  points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                  const borderRightShape = {
+                    type: "shape",
+                    text: "",
+                    textRuns: null,
+                    style: null,
+                    position: {
+                      x: pxToInch(rect2.left + rect2.width - borderRightW),
+                      y: pxToInch(rect2.top),
+                      w: pxToInch(borderRightW),
+                      h: pxToInch(rect2.height)
+                    },
+                    shape: {
+                      fill: rgbToHex(computed2.borderRightColor),
+                      gradient: null,
+                      transparency: extractAlpha(computed2.borderRightColor),
+                      line: null,
+                      rectRadius: 0,
+                      shadow: null,
+                      opacity: null,
+                      isEllipse: false,
+                      softEdge: null,
+                      rotate: null,
+                      cssTriangle: null,
+                      customGeometry: points
+                    }
+                  };
+                  elements.push(borderRightShape);
+                } else {
+                  const borderRightShape = {
+                    type: "shape",
+                    text: "",
+                    textRuns: null,
+                    style: null,
+                    position: {
+                      x: pxToInch(rect2.left + rect2.width - borderRightW),
+                      y: pxToInch(rect2.top),
+                      w: pxToInch(borderRightW),
+                      h: pxToInch(rect2.height)
+                    },
+                    shape: {
+                      fill: rgbToHex(computed2.borderRightColor),
+                      gradient: null,
+                      transparency: extractAlpha(computed2.borderRightColor),
+                      line: null,
+                      rectRadius: 0,
+                      shadow: null,
+                      opacity: null,
+                      isEllipse: false,
+                      softEdge: null,
+                      rotate: null,
+                      cssTriangle: null,
+                      customGeometry: null
+                    }
+                  };
+                  elements.push(borderRightShape);
+                }
+              }
+            }
+            const leftRightBottomBorders = [borders[3], borders[1], borders[2]].filter((b) => b > 0);
+            const minLeftRightBottom = leftRightBottomBorders.length > 0 ? Math.min(...leftRightBottomBorders) : 0;
+            const leftRightTopBorders = [borders[3], borders[1], borders[0]].filter((b) => b > 0);
+            const minLeftRightTop = leftRightTopBorders.length > 0 ? Math.min(...leftRightTopBorders) : 0;
+            const borderTopW = borders[0];
+            if (borderTopW > 0 && !isFullyTransparent(computed2.borderTopColor) && (borderTopW > minLeftRightBottom || minLeftRightBottom === 0)) {
+              if (radiusValue > 0) {
+                const w2 = rect2.width;
+                const h2 = borderTopW;
+                const r = radiusValue;
+                const EMU_PER_PX3 = 914400 / 96;
+                const arcXAtY = (radius, y2) => {
+                  if (y2 <= 0)
+                    return radius;
+                  if (y2 >= radius)
+                    return 0;
+                  const dy = radius - y2;
+                  return radius - Math.sqrt(radius * radius - dy * dy);
+                };
+                const segments = 8;
+                const arcPointsLeft = [];
+                const arcPointsRight = [];
+                for (let i = 0; i <= segments; i++) {
+                  const t = i / segments;
+                  const y2 = t * h2;
+                  const arcDistance = arcXAtY(r, y2);
+                  arcPointsLeft.push({
+                    x: Math.round(arcDistance * EMU_PER_PX3),
+                    y: Math.round(y2 * EMU_PER_PX3)
+                  });
+                  arcPointsRight.push({
+                    x: Math.round((w2 - arcDistance) * EMU_PER_PX3),
+                    y: Math.round(y2 * EMU_PER_PX3)
+                  });
+                }
+                const points = [];
+                points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                for (let i = 1; i <= segments; i++) {
+                  points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                }
+                points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+                for (let i = segments - 1; i >= 0; i--) {
+                  points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                }
+                points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+                const borderTopShape = {
+                  type: "shape",
+                  text: "",
+                  textRuns: null,
+                  style: null,
+                  position: {
+                    x: pxToInch(rect2.left),
+                    y: pxToInch(rect2.top),
+                    w: pxToInch(rect2.width),
+                    h: pxToInch(borderTopW)
+                  },
+                  shape: {
+                    fill: rgbToHex(computed2.borderTopColor),
+                    gradient: null,
+                    transparency: extractAlpha(computed2.borderTopColor),
+                    line: null,
+                    rectRadius: 0,
+                    shadow: null,
+                    opacity: null,
+                    isEllipse: false,
+                    softEdge: null,
+                    rotate: null,
+                    cssTriangle: null,
+                    customGeometry: points
+                  }
+                };
+                elements.push(borderTopShape);
+              } else {
+                const borderTopShape = {
+                  type: "shape",
+                  text: "",
+                  textRuns: null,
+                  style: null,
+                  position: {
+                    x: pxToInch(rect2.left),
+                    y: pxToInch(rect2.top),
+                    w: pxToInch(rect2.width),
+                    h: pxToInch(borderTopW)
+                  },
+                  shape: {
+                    fill: rgbToHex(computed2.borderTopColor),
+                    gradient: null,
+                    transparency: extractAlpha(computed2.borderTopColor),
+                    line: null,
+                    rectRadius: 0,
+                    shadow: null,
+                    opacity: null,
+                    isEllipse: false,
+                    softEdge: null,
+                    rotate: null,
+                    cssTriangle: null,
+                    customGeometry: null
+                  }
+                };
+                elements.push(borderTopShape);
+              }
+            }
+            const borderBottomW = borders[2];
+            if (borderBottomW > 0 && !isFullyTransparent(computed2.borderBottomColor) && (borderBottomW > minLeftRightTop || minLeftRightTop === 0)) {
+              if (radiusValue > 0) {
+                const w2 = rect2.width;
+                const h2 = borderBottomW;
+                const r = radiusValue;
+                const EMU_PER_PX3 = 914400 / 96;
+                const arcXAtY = (radius, y2) => {
+                  if (y2 <= 0)
+                    return radius;
+                  if (y2 >= radius)
+                    return 0;
+                  const dy = radius - y2;
+                  return radius - Math.sqrt(radius * radius - dy * dy);
+                };
+                const segments = 8;
+                const arcPointsLeft = [];
+                const arcPointsRight = [];
+                for (let i = 0; i <= segments; i++) {
+                  const t = i / segments;
+                  const y2 = t * h2;
+                  const arcDistance = arcXAtY(r, h2 - y2);
+                  arcPointsLeft.push({
+                    x: Math.round(arcDistance * EMU_PER_PX3),
+                    y: Math.round(y2 * EMU_PER_PX3)
+                  });
+                  arcPointsRight.push({
+                    x: Math.round((w2 - arcDistance) * EMU_PER_PX3),
+                    y: Math.round(y2 * EMU_PER_PX3)
+                  });
+                }
+                const points = [];
+                points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                for (let i = 1; i <= segments; i++) {
+                  points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                }
+                points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+                for (let i = segments - 1; i >= 0; i--) {
+                  points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                }
+                points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+                const borderBottomShape = {
+                  type: "shape",
+                  text: "",
+                  textRuns: null,
+                  style: null,
+                  position: {
+                    x: pxToInch(rect2.left),
+                    y: pxToInch(rect2.top + rect2.height - borderBottomW),
+                    w: pxToInch(rect2.width),
+                    h: pxToInch(borderBottomW)
+                  },
+                  shape: {
+                    fill: rgbToHex(computed2.borderBottomColor),
+                    gradient: null,
+                    transparency: extractAlpha(computed2.borderBottomColor),
+                    line: null,
+                    rectRadius: 0,
+                    shadow: null,
+                    opacity: null,
+                    isEllipse: false,
+                    softEdge: null,
+                    rotate: null,
+                    cssTriangle: null,
+                    customGeometry: points
+                  }
+                };
+                elements.push(borderBottomShape);
+              } else {
+                const borderBottomShape = {
+                  type: "shape",
+                  text: "",
+                  textRuns: null,
+                  style: null,
+                  position: {
+                    x: pxToInch(rect2.left),
+                    y: pxToInch(rect2.top + rect2.height - borderBottomW),
+                    w: pxToInch(rect2.width),
+                    h: pxToInch(borderBottomW)
+                  },
+                  shape: {
+                    fill: rgbToHex(computed2.borderBottomColor),
+                    gradient: null,
+                    transparency: extractAlpha(computed2.borderBottomColor),
+                    line: null,
+                    rectRadius: 0,
+                    shadow: null,
+                    opacity: null,
+                    isEllipse: false,
+                    softEdge: null,
+                    rotate: null,
+                    cssTriangle: null,
+                    customGeometry: null
+                  }
+                };
+                elements.push(borderBottomShape);
+              }
+            }
+          }
+          processed.add(el);
+          return;
+        }
+      }
+      if (el.tagName === "SPAN" || el.tagName === "A" || el.tagName === "CODE") {
+        const spanText = el.textContent?.trim() || "";
+        const isEmptyDecorative = spanText.length === 0;
+        const parentTag = el.parentElement?.tagName;
+        const textParentTags = /* @__PURE__ */ new Set(["P", "H1", "H2", "H3", "H4", "H5", "H6", "LI", "TD", "TH", "FIGCAPTION", "BLOCKQUOTE", "LABEL"]);
+        if (parentTag && textParentTags.has(parentTag) && !isEmptyDecorative) {
+          processed.add(el);
+          return;
+        }
+        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;
+        const spanBgImage = computed2.backgroundImage;
+        const hasGradientBg = spanBgImage && spanBgImage !== "none" && (spanBgImage.includes("linear-gradient") || spanBgImage.includes("radial-gradient"));
+        const spanBgClip = computed2.webkitBackgroundClip || computed2.backgroundClip;
+        const spanTextFillColor = computed2.webkitTextFillColor;
+        const isGradientTextFill = hasGradientBg && spanBgClip === "text" && (spanTextFillColor === "transparent" || spanTextFillColor === "rgba(0, 0, 0, 0)" || spanTextFillColor && spanTextFillColor.includes("rgba") && spanTextFillColor.endsWith(", 0)"));
+        if (isGradientTextFill) {
+        } else if (hasBg || hasBorder || hasGradientBg) {
+          const rect2 = htmlEl.getBoundingClientRect();
+          if (rect2.width > 0 && rect2.height > 0) {
+            const text2 = getTransformedText(htmlEl, computed2);
+            const bgGradient = parseCssGradient(computed2.backgroundImage);
+            const borderRadius = computed2.borderRadius;
+            const radiusValue = parseFloat(borderRadius);
+            let rectRadius = 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);
+              } else {
+                rectRadius = pxToInch(radiusValue);
+              }
+            }
+            const borderTop = computed2.borderTopWidth;
+            const borderRight = computed2.borderRightWidth;
+            const borderBottom = computed2.borderBottomWidth;
+            const borderLeft = computed2.borderLeftWidth;
+            const borders = [parseFloat(borderTop) || 0, parseFloat(borderRight) || 0, parseFloat(borderBottom) || 0, parseFloat(borderLeft) || 0];
+            const hasUniformBorder = hasBorder && borders.every((b) => b === borders[0]);
+            const spanOpacity = getEffectiveOpacity(el, win);
+            const hasSpanOpacity = spanOpacity < 1;
+            const spanShadow = parseBoxShadow(computed2.boxShadow);
+            const spanWhiteSpace = computed2.whiteSpace;
+            const spanShouldNotWrap = spanWhiteSpace === "nowrap" || spanWhiteSpace === "pre" || rect2.width < 100 || rect2.height < 50;
+            const shapeElement = {
+              type: "shape",
+              position: {
+                x: pxToInch(rect2.left),
+                y: pxToInch(rect2.top),
+                w: pxToInch(rect2.width),
+                h: pxToInch(rect2.height)
+              },
+              text: text2,
+              textRuns: null,
+              style: text2 ? {
+                fontSize: pxToPoints(computed2.fontSize),
+                fontFace: extractFontFace(computed2.fontFamily),
+                color: rgbToHex(computed2.color),
+                bold: parseInt(computed2.fontWeight) >= 600,
+                align: "center",
+                valign: "middle",
+                wrap: !spanShouldNotWrap,
+                ...extractAlpha(computed2.color) !== null ? { transparency: extractAlpha(computed2.color) } : {}
+              } : null,
+              shape: {
+                fill: hasBg ? rgbToHex(computed2.backgroundColor) : null,
+                gradient: bgGradient,
+                transparency: hasBg ? extractAlpha(computed2.backgroundColor) : null,
+                line: hasUniformBorder ? {
+                  color: rgbToHex(computed2.borderColor),
+                  width: pxToPoints(borderTop),
+                  transparency: extractAlpha(computed2.borderColor),
+                  dashType: extractDashType(computed2.borderStyle)
+                } : null,
+                rectRadius: spanIsEllipse ? 0 : rectRadius,
+                shadow: spanShadow,
+                opacity: hasSpanOpacity ? spanOpacity : null,
+                isEllipse: spanIsEllipse,
+                softEdge: null,
+                rotate: null,
+                cssTriangle: null,
+                customGeometry: null
+              },
+              zIndex: extractZIndex(computed2)
+            };
+            elements.push(shapeElement);
+            if (hasBorder && !hasUniformBorder) {
+              const topRightBottomBorders = [borders[0], borders[1], borders[2]].filter((b) => b > 0);
+              const minTopRightBottom = topRightBottomBorders.length > 0 ? Math.min(...topRightBottomBorders) : 0;
+              const topLeftBottomBorders = [borders[0], borders[3], borders[2]].filter((b) => b > 0);
+              const minTopLeftBottom = topLeftBottomBorders.length > 0 ? Math.min(...topLeftBottomBorders) : 0;
+              const borderLeftW = borders[3];
+              const borderRightW = borders[1];
+              const borderLeftHex = rgbToHex(computed2.borderLeftColor);
+              const borderRightHex = rgbToHex(computed2.borderRightColor);
+              const borderTopHex = rgbToHex(computed2.borderTopColor);
+              const borderLeftAlpha = extractAlpha(computed2.borderLeftColor);
+              const borderTopAlpha = extractAlpha(computed2.borderTopColor);
+              const borderRightAlpha = extractAlpha(computed2.borderRightColor);
+              const borderLeftHasDifferentColor = borderTopHex !== borderLeftHex;
+              const borderLeftIsMoreOpaque = (borderLeftAlpha ?? 0) < (borderTopAlpha ?? 0);
+              if (borderLeftW > 0 && !isFullyTransparent(computed2.borderLeftColor) && (borderLeftW > minTopRightBottom || minTopRightBottom === 0 || borderLeftHasDifferentColor || borderLeftIsMoreOpaque)) {
+                if (radiusValue > 0) {
+                  const w2 = borderLeftW;
+                  const h2 = rect2.height;
+                  const r = radiusValue;
+                  const EMU_PER_PX3 = 914400 / 96;
+                  const arcYAtX = (radius, x2) => {
+                    if (x2 <= 0)
+                      return radius;
+                    if (x2 >= radius)
+                      return 0;
+                    const dx = radius - x2;
+                    return radius - Math.sqrt(radius * radius - dx * dx);
+                  };
+                  const segments = 8;
+                  const arcPointsTop = [];
+                  const arcPointsBottom = [];
+                  for (let i = 0; i <= segments; i++) {
+                    const t = i / segments;
+                    const x2 = t * w2;
+                    const arcDistance = arcYAtX(r, x2);
+                    arcPointsTop.push({
+                      x: Math.round(x2 * EMU_PER_PX3),
+                      y: Math.round(arcDistance * EMU_PER_PX3)
+                    });
+                    arcPointsBottom.push({
+                      x: Math.round(x2 * EMU_PER_PX3),
+                      y: Math.round((h2 - arcDistance) * EMU_PER_PX3)
+                    });
+                  }
+                  const points = [];
+                  points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                  for (let i = 1; i <= segments; i++) {
+                    points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                  }
+                  points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                  for (let i = segments - 1; i >= 0; i--) {
+                    points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                  }
+                  points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                  const borderLeftShape = {
+                    type: "shape",
+                    text: "",
+                    textRuns: null,
+                    style: null,
+                    position: {
+                      x: pxToInch(rect2.left),
+                      y: pxToInch(rect2.top),
+                      w: pxToInch(borderLeftW),
+                      h: pxToInch(rect2.height)
+                    },
+                    shape: {
+                      fill: rgbToHex(computed2.borderLeftColor),
+                      gradient: null,
+                      transparency: extractAlpha(computed2.borderLeftColor),
+                      line: null,
+                      rectRadius: 0,
+                      shadow: null,
+                      opacity: null,
+                      isEllipse: false,
+                      softEdge: null,
+                      rotate: null,
+                      cssTriangle: null,
+                      customGeometry: points
+                    }
+                  };
+                  elements.push(borderLeftShape);
+                } else {
+                  const borderLeftShape = {
+                    type: "shape",
+                    text: "",
+                    textRuns: null,
+                    style: null,
+                    position: {
+                      x: pxToInch(rect2.left),
+                      y: pxToInch(rect2.top),
+                      w: pxToInch(borderLeftW),
+                      h: pxToInch(rect2.height)
+                    },
+                    shape: {
+                      fill: rgbToHex(computed2.borderLeftColor),
+                      gradient: null,
+                      transparency: extractAlpha(computed2.borderLeftColor),
+                      line: null,
+                      rectRadius: 0,
+                      shadow: null,
+                      opacity: null,
+                      isEllipse: false,
+                      softEdge: null,
+                      rotate: null,
+                      cssTriangle: null,
+                      customGeometry: null
+                    }
+                  };
+                  elements.push(borderLeftShape);
+                }
+              }
+              const borderRightHasDifferentColor = borderTopHex !== borderRightHex;
+              const borderRightIsMoreOpaque = (borderRightAlpha ?? 0) < (borderTopAlpha ?? 0);
+              if (borderRightW > 0 && !isFullyTransparent(computed2.borderRightColor) && (borderRightW > minTopLeftBottom || minTopLeftBottom === 0 || borderRightHasDifferentColor || borderRightIsMoreOpaque)) {
+                if (radiusValue > 0) {
+                  const w2 = borderRightW;
+                  const h2 = rect2.height;
+                  const r = radiusValue;
+                  const EMU_PER_PX3 = 914400 / 96;
+                  const arcYAtX = (radius, x2) => {
+                    if (x2 <= 0)
+                      return radius;
+                    if (x2 >= radius)
+                      return 0;
+                    const dx = radius - x2;
+                    return radius - Math.sqrt(radius * radius - dx * dx);
+                  };
+                  const segments = 8;
+                  const arcPointsTop = [];
+                  const arcPointsBottom = [];
+                  for (let i = 0; i <= segments; i++) {
+                    const t = i / segments;
+                    const x2 = t * w2;
+                    const arcDistance = arcYAtX(r, w2 - x2);
+                    arcPointsTop.push({
+                      x: Math.round(x2 * EMU_PER_PX3),
+                      y: Math.round(arcDistance * EMU_PER_PX3)
+                    });
+                    arcPointsBottom.push({
+                      x: Math.round(x2 * EMU_PER_PX3),
+                      y: Math.round((h2 - arcDistance) * EMU_PER_PX3)
+                    });
+                  }
+                  const points = [];
+                  points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                  for (let i = 1; i <= segments; i++) {
+                    points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                  }
+                  points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                  for (let i = segments - 1; i >= 0; i--) {
+                    points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                  }
+                  points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                  const borderRightShape = {
+                    type: "shape",
+                    text: "",
+                    textRuns: null,
+                    style: null,
+                    position: {
+                      x: pxToInch(rect2.left + rect2.width - borderRightW),
+                      y: pxToInch(rect2.top),
+                      w: pxToInch(borderRightW),
+                      h: pxToInch(rect2.height)
+                    },
+                    shape: {
+                      fill: rgbToHex(computed2.borderRightColor),
+                      gradient: null,
+                      transparency: extractAlpha(computed2.borderRightColor),
+                      line: null,
+                      rectRadius: 0,
+                      shadow: null,
+                      opacity: null,
+                      isEllipse: false,
+                      softEdge: null,
+                      rotate: null,
+                      cssTriangle: null,
+                      customGeometry: points
+                    }
+                  };
+                  elements.push(borderRightShape);
+                } else {
+                  const borderRightShape = {
+                    type: "shape",
+                    text: "",
+                    textRuns: null,
+                    style: null,
+                    position: {
+                      x: pxToInch(rect2.left + rect2.width - borderRightW),
+                      y: pxToInch(rect2.top),
+                      w: pxToInch(borderRightW),
+                      h: pxToInch(rect2.height)
+                    },
+                    shape: {
+                      fill: rgbToHex(computed2.borderRightColor),
+                      gradient: null,
+                      transparency: extractAlpha(computed2.borderRightColor),
+                      line: null,
+                      rectRadius: 0,
+                      shadow: null,
+                      opacity: null,
+                      isEllipse: false,
+                      softEdge: null,
+                      rotate: null,
+                      cssTriangle: null,
+                      customGeometry: null
+                    }
+                  };
+                  elements.push(borderRightShape);
+                }
+              }
+            }
+            const leftRightBottomBorders = [borders[3], borders[1], borders[2]].filter((b) => b > 0);
+            const minLeftRightBottom = leftRightBottomBorders.length > 0 ? Math.min(...leftRightBottomBorders) : 0;
+            const leftRightTopBorders = [borders[3], borders[1], borders[0]].filter((b) => b > 0);
+            const minLeftRightTop = leftRightTopBorders.length > 0 ? Math.min(...leftRightTopBorders) : 0;
+            const borderTopW = borders[0];
+            if (borderTopW > 0 && !isFullyTransparent(computed2.borderTopColor) && (borderTopW > minLeftRightBottom || minLeftRightBottom === 0)) {
+              if (radiusValue > 0) {
+                const w2 = rect2.width;
+                const h2 = borderTopW;
+                const r = radiusValue;
+                const EMU_PER_PX3 = 914400 / 96;
+                const arcXAtY = (radius, y2) => {
+                  if (y2 <= 0)
+                    return radius;
+                  if (y2 >= radius)
+                    return 0;
+                  const dy = radius - y2;
+                  return radius - Math.sqrt(radius * radius - dy * dy);
+                };
+                const segments = 8;
+                const arcPointsLeft = [];
+                const arcPointsRight = [];
+                for (let i = 0; i <= segments; i++) {
+                  const t = i / segments;
+                  const y2 = t * h2;
+                  const arcDistance = arcXAtY(r, y2);
+                  arcPointsLeft.push({
+                    x: Math.round(arcDistance * EMU_PER_PX3),
+                    y: Math.round(y2 * EMU_PER_PX3)
+                  });
+                  arcPointsRight.push({
+                    x: Math.round((w2 - arcDistance) * EMU_PER_PX3),
+                    y: Math.round(y2 * EMU_PER_PX3)
+                  });
+                }
+                const points = [];
+                points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                for (let i = 1; i <= segments; i++) {
+                  points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                }
+                points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+                for (let i = segments - 1; i >= 0; i--) {
+                  points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                }
+                points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+                const borderTopShape = {
+                  type: "shape",
+                  text: "",
+                  textRuns: null,
+                  style: null,
+                  position: {
+                    x: pxToInch(rect2.left),
+                    y: pxToInch(rect2.top),
+                    w: pxToInch(rect2.width),
+                    h: pxToInch(borderTopW)
+                  },
+                  shape: {
+                    fill: rgbToHex(computed2.borderTopColor),
+                    gradient: null,
+                    transparency: extractAlpha(computed2.borderTopColor),
+                    line: null,
+                    rectRadius: 0,
+                    shadow: null,
+                    opacity: null,
+                    isEllipse: false,
+                    softEdge: null,
+                    rotate: null,
+                    cssTriangle: null,
+                    customGeometry: points
+                  }
+                };
+                elements.push(borderTopShape);
+              } else {
+                const borderTopShape = {
+                  type: "shape",
+                  text: "",
+                  textRuns: null,
+                  style: null,
+                  position: {
+                    x: pxToInch(rect2.left),
+                    y: pxToInch(rect2.top),
+                    w: pxToInch(rect2.width),
+                    h: pxToInch(borderTopW)
+                  },
+                  shape: {
+                    fill: rgbToHex(computed2.borderTopColor),
+                    gradient: null,
+                    transparency: extractAlpha(computed2.borderTopColor),
+                    line: null,
+                    rectRadius: 0,
+                    shadow: null,
+                    opacity: null,
+                    isEllipse: false,
+                    softEdge: null,
+                    rotate: null,
+                    cssTriangle: null,
+                    customGeometry: null
+                  }
+                };
+                elements.push(borderTopShape);
+              }
+            }
+            const borderBottomW = borders[2];
+            if (borderBottomW > 0 && !isFullyTransparent(computed2.borderBottomColor) && (borderBottomW > minLeftRightTop || minLeftRightTop === 0)) {
+              if (radiusValue > 0) {
+                const w2 = rect2.width;
+                const h2 = borderBottomW;
+                const r = radiusValue;
+                const EMU_PER_PX3 = 914400 / 96;
+                const arcXAtY = (radius, y2) => {
+                  if (y2 <= 0)
+                    return radius;
+                  if (y2 >= radius)
+                    return 0;
+                  const dy = radius - y2;
+                  return radius - Math.sqrt(radius * radius - dy * dy);
+                };
+                const segments = 8;
+                const arcPointsLeft = [];
+                const arcPointsRight = [];
+                for (let i = 0; i <= segments; i++) {
+                  const t = i / segments;
+                  const y2 = t * h2;
+                  const arcDistance = arcXAtY(r, h2 - y2);
+                  arcPointsLeft.push({
+                    x: Math.round(arcDistance * EMU_PER_PX3),
+                    y: Math.round(y2 * EMU_PER_PX3)
+                  });
+                  arcPointsRight.push({
+                    x: Math.round((w2 - arcDistance) * EMU_PER_PX3),
+                    y: Math.round(y2 * EMU_PER_PX3)
+                  });
+                }
+                const points = [];
+                points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                for (let i = 1; i <= segments; i++) {
+                  points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                }
+                points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+                for (let i = segments - 1; i >= 0; i--) {
+                  points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                }
+                points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+                const borderBottomShape = {
+                  type: "shape",
+                  text: "",
+                  textRuns: null,
+                  style: null,
+                  position: {
+                    x: pxToInch(rect2.left),
+                    y: pxToInch(rect2.top + rect2.height - borderBottomW),
+                    w: pxToInch(rect2.width),
+                    h: pxToInch(borderBottomW)
+                  },
+                  shape: {
+                    fill: rgbToHex(computed2.borderBottomColor),
+                    gradient: null,
+                    transparency: extractAlpha(computed2.borderBottomColor),
+                    line: null,
+                    rectRadius: 0,
+                    shadow: null,
+                    opacity: null,
+                    isEllipse: false,
+                    softEdge: null,
+                    rotate: null,
+                    cssTriangle: null,
+                    customGeometry: points
+                  }
+                };
+                elements.push(borderBottomShape);
+              } else {
+                const borderBottomShape = {
+                  type: "shape",
+                  text: "",
+                  textRuns: null,
+                  style: null,
+                  position: {
+                    x: pxToInch(rect2.left),
+                    y: pxToInch(rect2.top + rect2.height - borderBottomW),
+                    w: pxToInch(rect2.width),
+                    h: pxToInch(borderBottomW)
+                  },
+                  shape: {
+                    fill: rgbToHex(computed2.borderBottomColor),
+                    gradient: null,
+                    transparency: extractAlpha(computed2.borderBottomColor),
+                    line: null,
+                    rectRadius: 0,
+                    shadow: null,
+                    opacity: null,
+                    isEllipse: false,
+                    softEdge: null,
+                    rotate: null,
+                    cssTriangle: null,
+                    customGeometry: null
+                  }
+                };
+                elements.push(borderBottomShape);
+              }
+            }
+          }
+          processed.add(el);
+          return;
+        }
+        const parent = el.parentElement;
+        if (parent && parent.tagName === "DIV") {
+          const rect2 = htmlEl.getBoundingClientRect();
+          const computed22 = win.getComputedStyle(el);
+          const text2 = getTransformedText(htmlEl, computed22);
+          if (rect2.width > 0 && rect2.height > 0 && text2) {
+            const fontSizePx2 = parseFloat(computed22.fontSize);
+            const lineHeightPx2 = parseFloat(computed22.lineHeight);
+            const lineHeightMultiplier2 = fontSizePx2 > 0 && !isNaN(lineHeightPx2) ? lineHeightPx2 / fontSizePx2 : 1;
+            const span2BgClip = computed22.webkitBackgroundClip || computed22.backgroundClip;
+            const span2TextFillColor = computed22.webkitTextFillColor;
+            const span2IsGradientText = span2BgClip === "text" && (span2TextFillColor === "transparent" || span2TextFillColor === "rgba(0, 0, 0, 0)" || span2TextFillColor && span2TextFillColor.includes("rgba") && span2TextFillColor.endsWith(", 0)"));
+            const span2BgImage = computed22.backgroundImage;
+            const span2HasGradientBg = span2BgImage && span2BgImage !== "none" && (span2BgImage.includes("linear-gradient") || span2BgImage.includes("radial-gradient"));
+            let spanFontFill = void 0;
+            let spanTextColor = rgbToHex(computed22.color);
+            if (span2IsGradientText && span2HasGradientBg) {
+              const spanGradient = parseCssGradient(span2BgImage);
+              if (spanGradient) {
+                spanFontFill = { type: "gradient", gradient: spanGradient };
+                spanTextColor = null;
+              }
+            }
+            const textElement = {
+              type: "p",
+              text: [{ text: text2, options: spanFontFill ? { fontFill: spanFontFill } : {} }],
+              position: {
+                x: pxToInch(rect2.left),
+                y: pxToInch(rect2.top),
+                w: pxToInch(rect2.width),
+                h: pxToInch(rect2.height)
+              },
+              style: {
+                fontSize: pxToPoints(computed22.fontSize),
+                fontFace: extractFontFace(computed22.fontFamily),
+                color: spanTextColor,
+                bold: parseInt(computed22.fontWeight) >= 600,
+                italic: computed22.fontStyle === "italic",
+                align: computed22.textAlign === "center" ? "center" : computed22.textAlign === "right" ? "right" : "left",
+                valign: "middle",
+                lineSpacing: lineHeightMultiplier2 * pxToPoints(computed22.fontSize),
+                fontFill: spanFontFill,
+                ...extractAlpha(computed22.color) !== null ? { transparency: extractAlpha(computed22.color) } : {}
+              }
+            };
+            elements.push(textElement);
+            processed.add(el);
+            return;
+          }
+        }
+      }
+      if (el.className && typeof el.className === "string" && el.className.includes("placeholder")) {
+        const rect2 = htmlEl.getBoundingClientRect();
+        if (rect2.width === 0 || rect2.height === 0) {
+          errors.push(`Placeholder "${el.id || "unnamed"}" has ${rect2.width === 0 ? "width: 0" : "height: 0"}. Check the layout CSS.`);
+        } else {
+          placeholders.push({
+            id: el.id || `placeholder-${placeholders.length}`,
+            x: pxToInch(rect2.left),
+            y: pxToInch(rect2.top),
+            w: pxToInch(rect2.width),
+            h: pxToInch(rect2.height)
+          });
+        }
+        processed.add(el);
+        return;
+      }
+      if (el.tagName === "IMG") {
+        const rect2 = htmlEl.getBoundingClientRect();
+        if (rect2.width > 0 && rect2.height > 0) {
+          const imgComputed = win.getComputedStyle(el);
+          const bodyRect = doc.body.getBoundingClientRect();
+          const coversWidth = rect2.width >= bodyRect.width * 0.95;
+          const coversHeight = rect2.height >= bodyRect.height * 0.95;
+          const nearOrigin = rect2.left <= 10 && rect2.top <= 10;
+          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;
+            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);
+                  }
+                }
+              }
+            }
+            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 = getEffectiveOpacity(el, win);
+          const hasOpacity = imgOpacity < 1 && imgOpacity >= 0;
           let maskApplied = false;
           if (maskImageProp && maskImageProp !== "none" && (maskImageProp.includes("linear-gradient") || maskImageProp.includes("radial-gradient"))) {
             const maskGradient = parseCssGradient(maskImageProp);
@@ -67270,8 +68596,11 @@ ${generateStylesCss(styleMap, themeFonts)}
           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 MIN_SVG_RENDER_SIZE = 128;
+          const svgRenderWidth = Math.max(rect2.width, MIN_SVG_RENDER_SIZE);
+          const svgRenderHeight = Math.max(rect2.height, MIN_SVG_RENDER_SIZE);
+          svgClone.setAttribute("width", String(svgRenderWidth));
+          svgClone.setAttribute("height", String(svgRenderHeight));
           const computedColor = win.getComputedStyle(htmlEl).color;
           const rootStyles = win.getComputedStyle(doc.documentElement);
           const resolveColorValue = (value) => {
@@ -67337,10 +68666,12 @@ ${generateStylesCss(styleMap, themeFonts)}
           const svgString = serializer.serializeToString(svgClone);
           const svgBase64 = btoa(unescape(encodeURIComponent(svgString)));
           const dataUri = `data:image/svg+xml;base64,${svgBase64}`;
+          const svgX = rect2.left;
           let svgY = rect2.top;
           const computedAlign = win.getComputedStyle(htmlEl);
           const verticalAlign = computedAlign.verticalAlign;
-          if (verticalAlign === "middle" && el.parentElement) {
+          const svgDisplay = computedAlign.display;
+          if (verticalAlign === "middle" && svgDisplay !== "block" && el.parentElement) {
             const parentComputed = win.getComputedStyle(el.parentElement);
             const parentIsFlex = parentComputed.display === "flex" || parentComputed.display === "inline-flex";
             if (!parentIsFlex) {
@@ -67351,14 +68682,28 @@ ${generateStylesCss(styleMap, themeFonts)}
             }
           }
           const svgEffectiveOpacity = getEffectiveOpacity(el, win);
+          let displayW = pxToInch(rect2.width);
+          let displayH = pxToInch(rect2.height);
+          let displayX = pxToInch(svgX);
+          let displayY = pxToInch(svgY);
+          const MIN_SVG_DISPLAY_SIZE_IN = 0.145;
+          if (displayW < MIN_SVG_DISPLAY_SIZE_IN && displayH < MIN_SVG_DISPLAY_SIZE_IN) {
+            const originalCenterX = displayX + displayW / 2;
+            const originalCenterY = displayY + displayH / 2;
+            const scaleFactor = Math.max(MIN_SVG_DISPLAY_SIZE_IN / displayW, MIN_SVG_DISPLAY_SIZE_IN / displayH);
+            displayW = displayW * scaleFactor;
+            displayH = displayH * scaleFactor;
+            displayX = originalCenterX - displayW / 2;
+            displayY = originalCenterY - displayH / 2;
+          }
           const imageElement = {
             type: "image",
             src: dataUri,
             position: {
-              x: pxToInch(rect2.left),
-              y: pxToInch(svgY),
-              w: pxToInch(rect2.width),
-              h: pxToInch(rect2.height)
+              x: displayX,
+              y: displayY,
+              w: displayW,
+              h: displayH
             },
             sizing: null,
             transparency: svgEffectiveOpacity < 1 ? Math.round((1 - svgEffectiveOpacity) * 100) : void 0
@@ -67436,7 +68781,8 @@ ${generateStylesCss(styleMap, themeFonts)}
         processed.add(el);
         return;
       }
-      const isContainer = el.tagName === "DIV" && !textTags.includes(el.tagName);
+      const containerTags = /* @__PURE__ */ new Set(["DIV", "TABLE", "TR", "TD", "TH", "TBODY", "THEAD", "TFOOT", "CENTER"]);
+      const isContainer = containerTags.has(el.tagName) && !textTags.includes(el.tagName);
       if (isContainer) {
         const computed2 = win.getComputedStyle(el);
         const divFilterStr = computed2.filter;
@@ -67494,6 +68840,80 @@ ${generateStylesCss(styleMap, themeFonts)}
             }
           }
         }
+        const contentWidth = htmlEl.clientWidth;
+        const contentHeight = htmlEl.clientHeight;
+        const borderTopW = parseFloat(computed2.borderTopWidth) || 0;
+        const borderRightW = parseFloat(computed2.borderRightWidth) || 0;
+        const borderBottomW = parseFloat(computed2.borderBottomWidth) || 0;
+        const borderLeftW = parseFloat(computed2.borderLeftWidth) || 0;
+        if (contentWidth === 0 && contentHeight === 0 && (borderTopW > 0 || borderBottomW > 0 || borderLeftW > 0 || borderRightW > 0)) {
+          const isTopEffectivelyTransparent = borderTopW === 0 || isFullyTransparent(computed2.borderTopColor);
+          const isBottomEffectivelyTransparent = borderBottomW === 0 || isFullyTransparent(computed2.borderBottomColor);
+          const isLeftEffectivelyTransparent = borderLeftW === 0 || isFullyTransparent(computed2.borderLeftColor);
+          const isRightEffectivelyTransparent = borderRightW === 0 || isFullyTransparent(computed2.borderRightColor);
+          let triangleDirection = null;
+          let triangleColor = "";
+          let triangleTransparency = 0;
+          let triangleWidth = 0;
+          let triangleHeight = 0;
+          if (!isBottomEffectivelyTransparent && isLeftEffectivelyTransparent && isRightEffectivelyTransparent && isTopEffectivelyTransparent) {
+            triangleDirection = "up";
+            triangleColor = rgbToHex(computed2.borderBottomColor);
+            triangleTransparency = extractAlpha(computed2.borderBottomColor) ?? 0;
+            triangleWidth = borderLeftW + borderRightW;
+            triangleHeight = borderBottomW;
+          } else if (!isTopEffectivelyTransparent && isLeftEffectivelyTransparent && isRightEffectivelyTransparent && isBottomEffectivelyTransparent) {
+            triangleDirection = "down";
+            triangleColor = rgbToHex(computed2.borderTopColor);
+            triangleTransparency = extractAlpha(computed2.borderTopColor) ?? 0;
+            triangleWidth = borderLeftW + borderRightW;
+            triangleHeight = borderTopW;
+          } else if (!isRightEffectivelyTransparent && isTopEffectivelyTransparent && isBottomEffectivelyTransparent && isLeftEffectivelyTransparent) {
+            triangleDirection = "left";
+            triangleColor = rgbToHex(computed2.borderRightColor);
+            triangleTransparency = extractAlpha(computed2.borderRightColor) ?? 0;
+            triangleWidth = borderRightW;
+            triangleHeight = borderTopW + borderBottomW;
+          } else if (!isLeftEffectivelyTransparent && isTopEffectivelyTransparent && isBottomEffectivelyTransparent && isRightEffectivelyTransparent) {
+            triangleDirection = "right";
+            triangleColor = rgbToHex(computed2.borderLeftColor);
+            triangleTransparency = extractAlpha(computed2.borderLeftColor) ?? 0;
+            triangleWidth = borderLeftW;
+            triangleHeight = borderTopW + borderBottomW;
+          }
+          if (triangleDirection && triangleWidth > 0 && triangleHeight > 0) {
+            const triRect = htmlEl.getBoundingClientRect();
+            const triX = pxToInch(triRect.left);
+            const triY = pxToInch(triRect.top);
+            const triW = pxToInch(triangleWidth);
+            const triH = pxToInch(triangleHeight);
+            const triRotation = extractRotationAngle(computed2);
+            const triangleShape = {
+              type: "shape",
+              text: "",
+              textRuns: null,
+              style: null,
+              position: { x: triX, y: triY, w: triW, h: triH },
+              shape: {
+                fill: triangleColor,
+                gradient: null,
+                transparency: triangleTransparency > 0 ? triangleTransparency : null,
+                line: null,
+                rectRadius: 0,
+                shadow: null,
+                opacity: null,
+                isEllipse: false,
+                softEdge: null,
+                rotate: triRotation,
+                cssTriangle: { direction: triangleDirection },
+                customGeometry: null
+              }
+            };
+            elements.push(triangleShape);
+            processed.add(el);
+            return;
+          }
+        }
         const hasBg = computed2.backgroundColor && computed2.backgroundColor !== "rgba(0, 0, 0, 0)";
         const clipPathValue = computed2.clipPath || computed2.webkitClipPath || "";
         const clipPathPolygon = parseClipPathPolygon(clipPathValue);
@@ -67528,93 +68948,438 @@ ${generateStylesCss(styleMap, themeFonts)}
                 };
                 elements.push(imgElement);
               }
-              bgGradient = null;
-            } else if (gradParts.length > 0) {
-              bgGradient = parseCssGradient(gradParts[0]);
-              for (let gi = 1; gi < Math.min(gradParts.length, 4); gi++) {
-                const g = parseCssGradient(gradParts[gi]);
-                if (g)
-                  extraDivGradients.push(g);
+              bgGradient = null;
+            } else if (gradParts.length > 0) {
+              bgGradient = parseCssGradient(gradParts[0]);
+              for (let gi = 1; gi < Math.min(gradParts.length, 4); gi++) {
+                const g = parseCssGradient(gradParts[gi]);
+                if (g)
+                  extraDivGradients.push(g);
+              }
+            }
+          } else {
+            const urlMatch = elBgImage.match(/url\(["']?([^"')]+)["']?\)/);
+            if (urlMatch) {
+              bgImageUrl = urlMatch[1];
+              bgImageSize = computed2.backgroundSize || "auto";
+              bgImagePosition = computed2.backgroundPosition || "0% 0%";
+            }
+          }
+        }
+        const borderTop = computed2.borderTopWidth;
+        const borderRight = computed2.borderRightWidth;
+        const borderBottom = computed2.borderBottomWidth;
+        const borderLeft = computed2.borderLeftWidth;
+        const borders = [borderTop, borderRight, borderBottom, borderLeft].map((b) => parseFloat(b) || 0);
+        const hasBorder = borders.some((b) => b > 0);
+        const hasUniformBorder = hasBorder && borders.every((b) => b === borders[0]);
+        const borderShapes = [];
+        const divBorderRadius = parseFloat(computed2.borderRadius) || 0;
+        if (hasBorder && !hasUniformBorder) {
+          const rect2 = htmlEl.getBoundingClientRect();
+          const topRightBottomBorders = [borders[0], borders[1], borders[2]].filter((b) => b > 0);
+          const minTopRightBottom = topRightBottomBorders.length > 0 ? Math.min(...topRightBottomBorders) : 0;
+          const topLeftBottomBorders = [borders[0], borders[3], borders[2]].filter((b) => b > 0);
+          const minTopLeftBottom = topLeftBottomBorders.length > 0 ? Math.min(...topLeftBottomBorders) : 0;
+          const borderLeftHex = rgbToHex(computed2.borderLeftColor);
+          const borderRightHex = rgbToHex(computed2.borderRightColor);
+          const borderTopHex = rgbToHex(computed2.borderTopColor);
+          const borderLeftAlpha = extractAlpha(computed2.borderLeftColor);
+          const borderTopAlpha = extractAlpha(computed2.borderTopColor);
+          const borderRightAlpha = extractAlpha(computed2.borderRightColor);
+          const borderLeftW2 = borders[3];
+          const borderLeftHasDifferentColor = borderTopHex !== borderLeftHex;
+          const borderLeftIsMoreOpaque = (borderLeftAlpha ?? 0) < (borderTopAlpha ?? 0);
+          if (borderLeftW2 > 0 && !isFullyTransparent(computed2.borderLeftColor) && (borderLeftW2 > minTopRightBottom || minTopRightBottom === 0 || borderLeftHasDifferentColor || borderLeftIsMoreOpaque)) {
+            if (divBorderRadius > 0) {
+              const w2 = borderLeftW2;
+              const h2 = rect2.height;
+              const r = divBorderRadius;
+              const EMU_PER_PX3 = 914400 / 96;
+              const arcYAtX = (radius, x2) => {
+                if (x2 <= 0)
+                  return radius;
+                if (x2 >= radius)
+                  return 0;
+                const dx = radius - x2;
+                return radius - Math.sqrt(radius * radius - dx * dx);
+              };
+              const segments = 8;
+              const arcPointsTop = [];
+              const arcPointsBottom = [];
+              for (let i = 0; i <= segments; i++) {
+                const t = i / segments;
+                const x2 = t * w2;
+                const arcDistance = arcYAtX(r, x2);
+                arcPointsTop.push({
+                  x: Math.round(x2 * EMU_PER_PX3),
+                  y: Math.round(arcDistance * EMU_PER_PX3)
+                });
+                arcPointsBottom.push({
+                  x: Math.round(x2 * EMU_PER_PX3),
+                  y: Math.round((h2 - arcDistance) * EMU_PER_PX3)
+                });
+              }
+              const points = [];
+              points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+              for (let i = 1; i <= segments; i++) {
+                points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+              }
+              points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+              for (let i = segments - 1; i >= 0; i--) {
+                points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+              }
+              points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+              borderShapes.push({
+                type: "shape",
+                text: "",
+                textRuns: null,
+                style: null,
+                position: {
+                  x: pxToInch(rect2.left),
+                  y: pxToInch(rect2.top),
+                  w: pxToInch(borderLeftW2),
+                  h: pxToInch(rect2.height)
+                },
+                shape: {
+                  fill: rgbToHex(computed2.borderLeftColor),
+                  gradient: null,
+                  transparency: extractAlpha(computed2.borderLeftColor),
+                  line: null,
+                  rectRadius: 0,
+                  // Using custom geometry instead
+                  shadow: null,
+                  opacity: null,
+                  isEllipse: false,
+                  softEdge: null,
+                  rotate: null,
+                  cssTriangle: null,
+                  customGeometry: points
+                }
+              });
+            } else {
+              borderShapes.push({
+                type: "shape",
+                text: "",
+                textRuns: null,
+                style: null,
+                position: {
+                  x: pxToInch(rect2.left),
+                  y: pxToInch(rect2.top),
+                  w: pxToInch(borderLeftW2),
+                  h: pxToInch(rect2.height)
+                },
+                shape: {
+                  fill: rgbToHex(computed2.borderLeftColor),
+                  gradient: null,
+                  transparency: extractAlpha(computed2.borderLeftColor),
+                  line: null,
+                  rectRadius: 0,
+                  shadow: null,
+                  opacity: null,
+                  isEllipse: false,
+                  softEdge: null,
+                  rotate: null,
+                  cssTriangle: null,
+                  customGeometry: null
+                }
+              });
+            }
+          }
+          const borderRightW2 = borders[1];
+          const borderRightHasDifferentColor = borderTopHex !== borderRightHex;
+          const borderRightIsMoreOpaque = (borderRightAlpha ?? 0) < (borderTopAlpha ?? 0);
+          if (borderRightW2 > 0 && !isFullyTransparent(computed2.borderRightColor) && (borderRightW2 > minTopLeftBottom || minTopLeftBottom === 0 || borderRightHasDifferentColor || borderRightIsMoreOpaque)) {
+            if (divBorderRadius > 0) {
+              const w2 = borderRightW2;
+              const h2 = rect2.height;
+              const r = divBorderRadius;
+              const EMU_PER_PX3 = 914400 / 96;
+              const arcYAtX = (radius, x2) => {
+                if (x2 <= 0)
+                  return radius;
+                if (x2 >= radius)
+                  return 0;
+                const dx = radius - x2;
+                return radius - Math.sqrt(radius * radius - dx * dx);
+              };
+              const segments = 8;
+              const arcPointsTop = [];
+              const arcPointsBottom = [];
+              for (let i = 0; i <= segments; i++) {
+                const t = i / segments;
+                const x2 = t * w2;
+                const arcDistance = arcYAtX(r, w2 - x2);
+                arcPointsTop.push({
+                  x: Math.round(x2 * EMU_PER_PX3),
+                  y: Math.round(arcDistance * EMU_PER_PX3)
+                });
+                arcPointsBottom.push({
+                  x: Math.round(x2 * EMU_PER_PX3),
+                  y: Math.round((h2 - arcDistance) * EMU_PER_PX3)
+                });
+              }
+              const points = [];
+              points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+              for (let i = 1; i <= segments; i++) {
+                points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+              }
+              points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+              for (let i = segments - 1; i >= 0; i--) {
+                points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+              }
+              points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+              borderShapes.push({
+                type: "shape",
+                text: "",
+                textRuns: null,
+                style: null,
+                position: {
+                  x: pxToInch(rect2.left + rect2.width - borderRightW2),
+                  y: pxToInch(rect2.top),
+                  w: pxToInch(borderRightW2),
+                  h: pxToInch(rect2.height)
+                },
+                shape: {
+                  fill: rgbToHex(computed2.borderRightColor),
+                  gradient: null,
+                  transparency: extractAlpha(computed2.borderRightColor),
+                  line: null,
+                  rectRadius: 0,
+                  // Using custom geometry instead
+                  shadow: null,
+                  opacity: null,
+                  isEllipse: false,
+                  softEdge: null,
+                  rotate: null,
+                  cssTriangle: null,
+                  customGeometry: points
+                }
+              });
+            } else {
+              borderShapes.push({
+                type: "shape",
+                text: "",
+                textRuns: null,
+                style: null,
+                position: {
+                  x: pxToInch(rect2.left + rect2.width - borderRightW2),
+                  y: pxToInch(rect2.top),
+                  w: pxToInch(borderRightW2),
+                  h: pxToInch(rect2.height)
+                },
+                shape: {
+                  fill: rgbToHex(computed2.borderRightColor),
+                  gradient: null,
+                  transparency: extractAlpha(computed2.borderRightColor),
+                  line: null,
+                  rectRadius: 0,
+                  shadow: null,
+                  opacity: null,
+                  isEllipse: false,
+                  softEdge: null,
+                  rotate: null,
+                  cssTriangle: null,
+                  customGeometry: null
+                }
+              });
+            }
+          }
+          const leftRightBottomBorders = [borders[3], borders[1], borders[2]].filter((b) => b > 0);
+          const minLeftRightBottom = leftRightBottomBorders.length > 0 ? Math.min(...leftRightBottomBorders) : 0;
+          const leftRightTopBorders = [borders[3], borders[1], borders[0]].filter((b) => b > 0);
+          const minLeftRightTop = leftRightTopBorders.length > 0 ? Math.min(...leftRightTopBorders) : 0;
+          const borderTopW2 = borders[0];
+          if (borderTopW2 > 0 && !isFullyTransparent(computed2.borderTopColor) && (borderTopW2 > minLeftRightBottom || minLeftRightBottom === 0)) {
+            if (divBorderRadius > 0) {
+              const w2 = rect2.width;
+              const h2 = borderTopW2;
+              const r = divBorderRadius;
+              const EMU_PER_PX3 = 914400 / 96;
+              const arcXAtY = (radius, y2) => {
+                if (y2 <= 0)
+                  return radius;
+                if (y2 >= radius)
+                  return 0;
+                const dy = radius - y2;
+                return radius - Math.sqrt(radius * radius - dy * dy);
+              };
+              const segments = 8;
+              const arcPointsLeft = [];
+              const arcPointsRight = [];
+              for (let i = 0; i <= segments; i++) {
+                const t = i / segments;
+                const y2 = t * h2;
+                const arcDistance = arcXAtY(r, y2);
+                arcPointsLeft.push({
+                  x: Math.round(arcDistance * EMU_PER_PX3),
+                  y: Math.round(y2 * EMU_PER_PX3)
+                });
+                arcPointsRight.push({
+                  x: Math.round((w2 - arcDistance) * EMU_PER_PX3),
+                  y: Math.round(y2 * EMU_PER_PX3)
+                });
+              }
+              const points = [];
+              points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+              for (let i = 1; i <= segments; i++) {
+                points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+              }
+              points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+              for (let i = segments - 1; i >= 0; i--) {
+                points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+              }
+              points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+              borderShapes.push({
+                type: "shape",
+                text: "",
+                textRuns: null,
+                style: null,
+                position: {
+                  x: pxToInch(rect2.left),
+                  y: pxToInch(rect2.top),
+                  w: pxToInch(rect2.width),
+                  h: pxToInch(borderTopW2)
+                },
+                shape: {
+                  fill: rgbToHex(computed2.borderTopColor),
+                  gradient: null,
+                  transparency: extractAlpha(computed2.borderTopColor),
+                  line: null,
+                  rectRadius: 0,
+                  shadow: null,
+                  opacity: null,
+                  isEllipse: false,
+                  softEdge: null,
+                  rotate: null,
+                  cssTriangle: null,
+                  customGeometry: points
+                }
+              });
+            } else {
+              borderShapes.push({
+                type: "shape",
+                text: "",
+                textRuns: null,
+                style: null,
+                position: {
+                  x: pxToInch(rect2.left),
+                  y: pxToInch(rect2.top),
+                  w: pxToInch(rect2.width),
+                  h: pxToInch(borderTopW2)
+                },
+                shape: {
+                  fill: rgbToHex(computed2.borderTopColor),
+                  gradient: null,
+                  transparency: extractAlpha(computed2.borderTopColor),
+                  line: null,
+                  rectRadius: 0,
+                  shadow: null,
+                  opacity: null,
+                  isEllipse: false,
+                  softEdge: null,
+                  rotate: null,
+                  cssTriangle: null,
+                  customGeometry: null
+                }
+              });
+            }
+          }
+          const borderBottomW2 = borders[2];
+          if (borderBottomW2 > 0 && !isFullyTransparent(computed2.borderBottomColor) && (borderBottomW2 > minLeftRightTop || minLeftRightTop === 0)) {
+            if (divBorderRadius > 0) {
+              const w2 = rect2.width;
+              const h2 = borderBottomW2;
+              const r = divBorderRadius;
+              const EMU_PER_PX3 = 914400 / 96;
+              const arcXAtY = (radius, y2) => {
+                if (y2 <= 0)
+                  return radius;
+                if (y2 >= radius)
+                  return 0;
+                const dy = radius - y2;
+                return radius - Math.sqrt(radius * radius - dy * dy);
+              };
+              const segments = 8;
+              const arcPointsLeft = [];
+              const arcPointsRight = [];
+              for (let i = 0; i <= segments; i++) {
+                const t = i / segments;
+                const y2 = t * h2;
+                const arcDistance = arcXAtY(r, h2 - y2);
+                arcPointsLeft.push({
+                  x: Math.round(arcDistance * EMU_PER_PX3),
+                  y: Math.round(y2 * EMU_PER_PX3)
+                });
+                arcPointsRight.push({
+                  x: Math.round((w2 - arcDistance) * EMU_PER_PX3),
+                  y: Math.round(y2 * EMU_PER_PX3)
+                });
+              }
+              const points = [];
+              points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+              for (let i = 1; i <= segments; i++) {
+                points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
               }
+              points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+              for (let i = segments - 1; i >= 0; i--) {
+                points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+              }
+              points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+              borderShapes.push({
+                type: "shape",
+                text: "",
+                textRuns: null,
+                style: null,
+                position: {
+                  x: pxToInch(rect2.left),
+                  y: pxToInch(rect2.top + rect2.height - borderBottomW2),
+                  w: pxToInch(rect2.width),
+                  h: pxToInch(borderBottomW2)
+                },
+                shape: {
+                  fill: rgbToHex(computed2.borderBottomColor),
+                  gradient: null,
+                  transparency: extractAlpha(computed2.borderBottomColor),
+                  line: null,
+                  rectRadius: 0,
+                  shadow: null,
+                  opacity: null,
+                  isEllipse: false,
+                  softEdge: null,
+                  rotate: null,
+                  cssTriangle: null,
+                  customGeometry: points
+                }
+              });
+            } else {
+              borderShapes.push({
+                type: "shape",
+                text: "",
+                textRuns: null,
+                style: null,
+                position: {
+                  x: pxToInch(rect2.left),
+                  y: pxToInch(rect2.top + rect2.height - borderBottomW2),
+                  w: pxToInch(rect2.width),
+                  h: pxToInch(borderBottomW2)
+                },
+                shape: {
+                  fill: rgbToHex(computed2.borderBottomColor),
+                  gradient: null,
+                  transparency: extractAlpha(computed2.borderBottomColor),
+                  line: null,
+                  rectRadius: 0,
+                  shadow: null,
+                  opacity: null,
+                  isEllipse: false,
+                  softEdge: null,
+                  rotate: null,
+                  cssTriangle: null,
+                  customGeometry: null
+                }
+              });
             }
-          } else {
-            const urlMatch = elBgImage.match(/url\(["']?([^"')]+)["']?\)/);
-            if (urlMatch) {
-              bgImageUrl = urlMatch[1];
-              bgImageSize = computed2.backgroundSize || "auto";
-              bgImagePosition = computed2.backgroundPosition || "0% 0%";
-            }
-          }
-        }
-        const borderTop = computed2.borderTopWidth;
-        const borderRight = computed2.borderRightWidth;
-        const borderBottom = computed2.borderBottomWidth;
-        const borderLeft = computed2.borderLeftWidth;
-        const borders = [borderTop, borderRight, borderBottom, borderLeft].map((b) => parseFloat(b) || 0);
-        const hasBorder = borders.some((b) => b > 0);
-        const hasUniformBorder = hasBorder && borders.every((b) => b === borders[0]);
-        const borderLines = [];
-        if (hasBorder && !hasUniformBorder) {
-          const rect2 = htmlEl.getBoundingClientRect();
-          const x2 = pxToInch(rect2.left);
-          const y2 = pxToInch(rect2.top);
-          const w2 = pxToInch(rect2.width);
-          const h2 = pxToInch(rect2.height);
-          if (parseFloat(borderTop) > 0 && !isFullyTransparent(computed2.borderTopColor)) {
-            const widthPt = pxToPoints(borderTop);
-            const inset = widthPt / 72 / 2;
-            borderLines.push({
-              type: "line",
-              x1: x2,
-              y1: y2 + inset,
-              x2: x2 + w2,
-              y2: y2 + inset,
-              width: widthPt,
-              color: rgbToHex(computed2.borderTopColor),
-              transparency: extractAlpha(computed2.borderTopColor)
-            });
-          }
-          if (parseFloat(borderRight) > 0 && !isFullyTransparent(computed2.borderRightColor)) {
-            const widthPt = pxToPoints(borderRight);
-            const inset = widthPt / 72 / 2;
-            borderLines.push({
-              type: "line",
-              x1: x2 + w2 - inset,
-              y1: y2,
-              x2: x2 + w2 - inset,
-              y2: y2 + h2,
-              width: widthPt,
-              color: rgbToHex(computed2.borderRightColor),
-              transparency: extractAlpha(computed2.borderRightColor)
-            });
-          }
-          if (parseFloat(borderBottom) > 0 && !isFullyTransparent(computed2.borderBottomColor)) {
-            const widthPt = pxToPoints(borderBottom);
-            const inset = widthPt / 72 / 2;
-            borderLines.push({
-              type: "line",
-              x1: x2,
-              y1: y2 + h2 - inset,
-              x2: x2 + w2,
-              y2: y2 + h2 - inset,
-              width: widthPt,
-              color: rgbToHex(computed2.borderBottomColor),
-              transparency: extractAlpha(computed2.borderBottomColor)
-            });
-          }
-          if (parseFloat(borderLeft) > 0 && !isFullyTransparent(computed2.borderLeftColor)) {
-            const widthPt = pxToPoints(borderLeft);
-            const inset = widthPt / 72 / 2;
-            borderLines.push({
-              type: "line",
-              x1: x2 + inset,
-              y1: y2,
-              x2: x2 + inset,
-              y2: y2 + h2,
-              width: widthPt,
-              color: rgbToHex(computed2.borderLeftColor),
-              transparency: extractAlpha(computed2.borderLeftColor)
-            });
           }
         }
         if (hasBg || hasBorder || bgImageUrl || bgGradient || hasConicGradientImage) {
@@ -67638,7 +69403,7 @@ ${generateStylesCss(styleMap, themeFonts)}
               };
               elements.push(bgImgElement);
             }
-            const textTagSet = /* @__PURE__ */ new Set(["P", "H1", "H2", "H3", "H4", "H5", "H6", "SPAN"]);
+            const textTagSet = /* @__PURE__ */ new Set(["P", "H1", "H2", "H3", "H4", "H5", "H6", "SPAN", "PRE"]);
             const allChildren = Array.from(el.children);
             const textChildren = allChildren.filter((child) => {
               if (textTagSet.has(child.tagName)) {
@@ -67654,6 +69419,15 @@ ${generateStylesCss(styleMap, themeFonts)}
                     return false;
                   }
                 }
+                if (["H1", "H2", "H3", "H4", "H5", "H6", "P"].includes(child.tagName)) {
+                  const textTagComputed = win.getComputedStyle(child);
+                  const textTagHasBg = textTagComputed.backgroundColor && textTagComputed.backgroundColor !== "rgba(0, 0, 0, 0)";
+                  const textTagHasBorder = (parseFloat(textTagComputed.borderTopWidth) || 0) > 0 || (parseFloat(textTagComputed.borderRightWidth) || 0) > 0 || (parseFloat(textTagComputed.borderBottomWidth) || 0) > 0 || (parseFloat(textTagComputed.borderLeftWidth) || 0) > 0;
+                  const textTagHasShadow = textTagComputed.boxShadow && textTagComputed.boxShadow !== "none";
+                  if (textTagHasBg || textTagHasBorder || textTagHasShadow) {
+                    return false;
+                  }
+                }
                 return true;
               }
               if (child.tagName === "DIV") {
@@ -67686,8 +69460,36 @@ ${generateStylesCss(styleMap, themeFonts)}
               }
               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 decorativeTags = /* @__PURE__ */ new Set(["I", "CANVAS", "VIDEO", "AUDIO", "IFRAME"]);
+            const nonTextChildren = allChildren.filter((child) => {
+              const childTagUpper = child.tagName.toUpperCase();
+              if (textTagSet.has(childTagUpper))
+                return false;
+              if (decorativeTags.has(childTagUpper))
+                return false;
+              if (childTagUpper === "SVG") {
+                const svgComputed = win.getComputedStyle(child);
+                const svgDisplay = svgComputed.display;
+                if (svgDisplay === "block")
+                  return true;
+                return false;
+              }
+              if (child.tagName === "DIV" && textChildren.includes(child))
+                return false;
+              if (child.tagName === "DIV") {
+                const divText = child.textContent?.trim();
+                if (!divText) {
+                  const childElements = Array.from(child.children);
+                  const hasContentChildren = childElements.some((c) => {
+                    const tagUpper = c.tagName.toUpperCase();
+                    return c.textContent?.trim() || tagUpper === "SVG" || tagUpper === "IMG" || tagUpper === "CANVAS" || tagUpper === "VIDEO" || tagUpper === "I";
+                  });
+                  if (!hasContentChildren)
+                    return false;
+                }
+              }
+              return true;
+            });
             const inlineTextTagsForSimple = /* @__PURE__ */ new Set(["STRONG", "EM", "B", "I", "A", "BR", "SPAN", "MARK", "SMALL", "SUB", "SUP", "CODE", "U", "S", "Q", "CITE", "ABBR", "TIME", "DATA"]);
             const isSingleTextChild = textChildren.length === 1 && (() => {
               const tc = textChildren[0];
@@ -67744,26 +69546,68 @@ ${generateStylesCss(styleMap, themeFonts)}
             let shapeStyle = null;
             const hasTextChildren = textChildren.length > 0;
             let directTextContent = "";
-            if (!hasTextChildren) {
-              for (const node of Array.from(el.childNodes)) {
-                if (node.nodeType === Node.TEXT_NODE) {
-                  directTextContent += node.textContent || "";
-                }
-              }
-              directTextContent = directTextContent.trim();
-              if (directTextContent && computed2.textTransform && computed2.textTransform !== "none") {
-                directTextContent = applyTextTransform2(directTextContent, computed2.textTransform);
+            for (const node of Array.from(el.childNodes)) {
+              if (node.nodeType === Node.TEXT_NODE) {
+                directTextContent += node.textContent || "";
               }
             }
+            directTextContent = directTextContent.trim();
+            if (directTextContent && computed2.textTransform && computed2.textTransform !== "none") {
+              directTextContent = applyTextTransform2(directTextContent, computed2.textTransform);
+            }
             const hasDirectText = directTextContent.length > 0;
+            const inlineFormattingTagsForMixed = /* @__PURE__ */ new Set(["STRONG", "EM", "B", "I", "A", "SPAN", "MARK", "SMALL", "SUB", "SUP", "CODE", "U", "S", "Q", "CITE", "ABBR", "TIME", "DATA"]);
+            const hasInlineFormattingChildren = allChildren.some((child) => inlineFormattingTagsForMixed.has(child.tagName));
+            const hasMixedInlineContent = hasDirectText && (hasTextChildren || hasInlineFormattingChildren);
             const isParentFlexRow = isFlexContainer2 && (computed2.flexDirection === "row" || computed2.flexDirection === "row-reverse" || !computed2.flexDirection) && allChildren.length > 1;
+            const isParentFlexColumn = isFlexContainer2 && (computed2.flexDirection === "column" || computed2.flexDirection === "column-reverse") && allChildren.length > 1;
             const isParentGrid = display === "grid" || display === "inline-grid";
-            const shouldMergeText = !isParentFlexRow && !isParentGrid && (hasTextChildren && (isSingleTextChild || nonTextChildren.length === 0) || hasDirectText);
+            const shouldMergeText = !isParentFlexRow && !isParentFlexColumn && !isParentGrid && (hasTextChildren && (isSingleTextChild || nonTextChildren.length === 0) || hasDirectText || hasMixedInlineContent);
             if (shouldMergeText) {
-              if (isSingleTextChild) {
+              if (hasMixedInlineContent) {
+                const isBold = computed2.fontWeight === "bold" || parseInt(computed2.fontWeight) >= 600;
+                const isItalic = computed2.fontStyle === "italic";
+                const isUnderline = computed2.textDecoration && computed2.textDecoration.includes("underline");
+                const baseRunOptions = {
+                  fontSize: pxToPoints(computed2.fontSize),
+                  fontFace: extractFontFace(computed2.fontFamily),
+                  color: rgbToHex(computed2.color),
+                  bold: isBold,
+                  italic: isItalic,
+                  underline: isUnderline || false,
+                  ...extractLetterSpacing(computed2) !== null ? { charSpacing: extractLetterSpacing(computed2) } : {},
+                  ...extractAlpha(computed2.color) !== null ? { transparency: extractAlpha(computed2.color) } : {},
+                  ...(() => {
+                    const ts = parseTextShadow(computed2.textShadow);
+                    return ts.glow ? { glow: ts.glow } : {};
+                  })()
+                };
+                shapeTextRuns = [];
+                const textTransformFn = (s) => applyTextTransform2(s, computed2.textTransform || "none");
+                parseInlineFormatting(el, baseRunOptions, shapeTextRuns, textTransformFn, win, false);
+                shapeStyle = {
+                  fontSize: pxToPoints(computed2.fontSize),
+                  fontFace: extractFontFace(computed2.fontFamily),
+                  color: rgbToHex(computed2.color),
+                  bold: isBold,
+                  italic: isItalic,
+                  valign: valign2,
+                  align,
+                  lineSpacing: pxToPoints(computed2.lineHeight) || void 0,
+                  margin: [
+                    pxToPoints(computed2.paddingLeft),
+                    pxToPoints(computed2.paddingRight),
+                    pxToPoints(computed2.paddingBottom),
+                    pxToPoints(computed2.paddingTop)
+                  ],
+                  ...extractLetterSpacing(computed2) !== null ? { charSpacing: extractLetterSpacing(computed2) } : {},
+                  ...extractAlpha(computed2.color) !== null ? { transparency: extractAlpha(computed2.color) } : {}
+                };
+                el.querySelectorAll("*").forEach((desc) => processed.add(desc));
+              } else if (isSingleTextChild) {
                 const textEl = textChildren[0];
                 const textComputed = win.getComputedStyle(textEl);
-                shapeText = getTransformedText(textEl, textComputed);
+                const hasInlineFormatting2 = textEl.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");
                 let fontFill = null;
                 const textBgClip = textComputed.webkitBackgroundClip || textComputed.backgroundClip;
                 const textFillColor2 = textComputed.webkitTextFillColor;
@@ -67783,7 +69627,7 @@ ${generateStylesCss(styleMap, themeFonts)}
                     bgGradient = null;
                   }
                 }
-                const effectiveColor = textComputed.color !== "rgb(0, 0, 0)" ? textComputed.color : computed2.color;
+                const effectiveColor2 = textComputed.color !== "rgb(0, 0, 0)" ? textComputed.color : computed2.color;
                 const isBold = textComputed.fontWeight === "bold" || parseInt(textComputed.fontWeight) >= 600 || computed2.fontWeight === "bold" || parseInt(computed2.fontWeight) >= 600;
                 let effectiveAlign = align;
                 const childTextAlign = textComputed.textAlign;
@@ -67795,7 +69639,7 @@ ${generateStylesCss(styleMap, themeFonts)}
                 shapeStyle = {
                   fontSize: pxToPoints(textComputed.fontSize || computed2.fontSize),
                   fontFace: extractFontFace(textComputed.fontFamily || computed2.fontFamily),
-                  color: fontFill ? null : rgbToHex(effectiveColor),
+                  color: fontFill ? null : rgbToHex(effectiveColor2),
                   fontFill,
                   bold: isBold,
                   align: effectiveAlign,
@@ -67811,14 +69655,31 @@ ${generateStylesCss(styleMap, themeFonts)}
                   shapeStyle.glow = shapeTextShadow.glow;
                 if (shapeTextShadow.shadow)
                   shapeStyle.textShadow = shapeTextShadow.shadow;
+                if (hasInlineFormatting2) {
+                  const textTransformFn = (s) => applyTextTransform2(s, textComputed.textTransform || "none");
+                  const baseRunOptions = {
+                    fontSize: shapeStyle.fontSize,
+                    fontFace: shapeStyle.fontFace,
+                    color: shapeStyle.color ?? void 0,
+                    bold: shapeStyle.bold
+                  };
+                  const textPreserveWs = shouldPreserveWhitespace(textComputed) || isMonospaceFont(computed2.fontFamily);
+                  shapeTextRuns = parseInlineFormatting(textEl, baseRunOptions, [], textTransformFn, win, textPreserveWs);
+                  shapeText = "";
+                } else {
+                  const effectivePreserveWs = shouldPreserveWhitespace(textComputed) || isMonospaceFont(computed2.fontFamily);
+                  shapeText = getTransformedText(textEl, effectivePreserveWs ? computed2 : textComputed);
+                }
                 processed.add(textEl);
                 textEl.querySelectorAll("*").forEach((desc) => processed.add(desc));
               } else if (hasTextChildren) {
                 shapeTextRuns = [];
+                const parentHasMonospace = isMonospaceFont(computed2.fontFamily);
                 textChildren.forEach((textChild, idx) => {
                   const textEl = textChild;
                   const textComputed = win.getComputedStyle(textEl);
-                  const fullText = getTransformedText(textEl, textComputed);
+                  const effectiveWsStyle = parentHasMonospace ? computed2 : textComputed;
+                  const fullText = getTransformedText(textEl, effectiveWsStyle);
                   if (!fullText)
                     return;
                   const isBold = textComputed.fontWeight === "bold" || parseInt(textComputed.fontWeight) >= 600;
@@ -67837,37 +69698,48 @@ ${generateStylesCss(styleMap, themeFonts)}
                       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 || "";
+                  const hasInlineFormattingInChild = textEl.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 (hasInlineFormattingInChild) {
+                    const textTransformFn = (s) => applyTextTransform2(s, textComputed.textTransform || "none");
+                    if (idx > 0 && shapeTextRuns.length > 0) {
+                      const lastRun = shapeTextRuns[shapeTextRuns.length - 1];
+                      lastRun.options = { ...lastRun.options, breakLine: true };
+                    }
+                    const childPreserveWs = shouldPreserveWhitespace(textComputed) || isMonospaceFont(computed2.fontFamily);
+                    parseInlineFormatting(textEl, baseRunOptions, shapeTextRuns, textTransformFn, win, childPreserveWs);
+                  } else {
+                    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);
-                    if (textComputed.textTransform && textComputed.textTransform !== "none") {
-                      segments = segments.map((s) => applyTextTransform2(s, textComputed.textTransform));
-                    }
-                    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;
+                      if (currentSegment.trim())
+                        segments.push(currentSegment.trim());
+                      segments = segments.filter((s) => s.length > 0);
+                      if (textComputed.textTransform && textComputed.textTransform !== "none") {
+                        segments = segments.map((s) => applyTextTransform2(s, textComputed.textTransform));
                       }
+                      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 });
-                    });
-                  } 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));
@@ -67892,14 +69764,16 @@ ${generateStylesCss(styleMap, themeFonts)}
                   align,
                   valign: valign2,
                   inset: 0,
-                  wrap: !shouldNotWrap
+                  wrap: !shouldNotWrap,
+                  ...extractAlpha(computed2.color) !== null ? { transparency: extractAlpha(computed2.color) } : {}
                 };
                 const ls = extractLetterSpacing(computed2);
                 if (ls !== null)
                   shapeStyle.charSpacing = ls;
               }
             }
-            if (hasBg || hasUniformBorder || bgGradient) {
+            const hasTextToRender = shapeText || shapeTextRuns && shapeTextRuns.length > 0;
+            if (hasBg || hasUniformBorder || bgGradient || hasBorder && hasTextToRender) {
               const elementOpacity = getEffectiveOpacity(htmlEl, win);
               const hasOpacity = elementOpacity < 1;
               let softEdgePt = null;
@@ -67940,11 +69814,436 @@ ${generateStylesCss(styleMap, themeFonts)}
                   shapeY = cy - origH / 2;
                 }
               }
+              let overflowClipGeometry = null;
+              let clippedShapeX = shapeX;
+              let clippedShapeY = shapeY;
+              let clippedShapeW = shapeW;
+              let clippedShapeH = shapeH;
+              let wasClippedToParent = false;
+              const DEBUG_OVERFLOW = false;
+              if (DEBUG_OVERFLOW)
+                console.log("[OverflowClip] Processing element:", { shapeX, shapeY, shapeW, shapeH, bg: computed2.backgroundColor });
+              let overflowAncestor = htmlEl.parentElement;
+              while (overflowAncestor && overflowAncestor !== doc.body) {
+                const ancestorComputed = win.getComputedStyle(overflowAncestor);
+                const ancestorOverflow = ancestorComputed.overflow;
+                if (ancestorOverflow === "hidden" || ancestorOverflow === "clip") {
+                  const ancestorBorderRadius = parseFloat(ancestorComputed.borderRadius) || 0;
+                  const ancestorRect = overflowAncestor.getBoundingClientRect();
+                  if (DEBUG_OVERFLOW)
+                    console.log("[OverflowClip] Found overflow ancestor:", { overflow: ancestorOverflow, borderRadius: ancestorBorderRadius, ancestorRect: { left: ancestorRect.left, top: ancestorRect.top, width: ancestorRect.width, height: ancestorRect.height } });
+                  const cssWidth = parseFloat(computed2.width);
+                  const cssHeight = parseFloat(computed2.height);
+                  const cssTop = parseFloat(computed2.top);
+                  const cssRight = parseFloat(computed2.right);
+                  const cssBottom = parseFloat(computed2.bottom);
+                  const cssLeft = parseFloat(computed2.left);
+                  const origW = !isNaN(cssWidth) && cssWidth > 0 ? cssWidth : shapeW;
+                  const origH = !isNaN(cssHeight) && cssHeight > 0 ? cssHeight : shapeH;
+                  let origRelLeft;
+                  let origRelTop;
+                  const position = computed2.position;
+                  if (position === "absolute" || position === "fixed") {
+                    if (!isNaN(cssLeft)) {
+                      origRelLeft = cssLeft;
+                    } else if (!isNaN(cssRight)) {
+                      origRelLeft = ancestorRect.width - cssRight - origW;
+                    } else {
+                      origRelLeft = shapeX - ancestorRect.left;
+                    }
+                    if (!isNaN(cssTop)) {
+                      origRelTop = cssTop;
+                    } else if (!isNaN(cssBottom)) {
+                      origRelTop = ancestorRect.height - cssBottom - origH;
+                    } else {
+                      origRelTop = shapeY - ancestorRect.top;
+                    }
+                  } else {
+                    origRelLeft = shapeX - ancestorRect.left;
+                    origRelTop = shapeY - ancestorRect.top;
+                  }
+                  const origRelRight = origRelLeft + origW;
+                  const origRelBottom = origRelTop + origH;
+                  if (DEBUG_OVERFLOW) {
+                    console.log("[OverflowClip] Element original position:", {
+                      origRelLeft,
+                      origRelTop,
+                      origW,
+                      origH,
+                      cssTop,
+                      cssRight,
+                      cssBottom,
+                      cssLeft,
+                      rectW: shapeW,
+                      rectH: shapeH,
+                      bgColor: computed2.backgroundColor,
+                      isEllipse,
+                      borderRadius: borderRadiusStr
+                    });
+                  }
+                  const relLeft = origRelLeft;
+                  const relTop = origRelTop;
+                  const relRight = origRelRight;
+                  const relBottom = origRelBottom;
+                  const needsRectClip = relLeft < 0 || relTop < 0 || relRight > ancestorRect.width || relBottom > ancestorRect.height;
+                  if (needsRectClip) {
+                    if (DEBUG_OVERFLOW)
+                      console.log("[OverflowClip] Element needs rect clipping:", { relLeft, relTop, relRight, relBottom });
+                    const clippedRelLeft = Math.max(0, relLeft);
+                    const clippedRelTop = Math.max(0, relTop);
+                    const clippedRelRight = Math.min(ancestorRect.width, relRight);
+                    const clippedRelBottom = Math.min(ancestorRect.height, relBottom);
+                    clippedShapeX = ancestorRect.left + clippedRelLeft;
+                    clippedShapeY = ancestorRect.top + clippedRelTop;
+                    clippedShapeW = clippedRelRight - clippedRelLeft;
+                    clippedShapeH = clippedRelBottom - clippedRelTop;
+                    wasClippedToParent = true;
+                  }
+                  if (ancestorBorderRadius > 0) {
+                    const r = ancestorBorderRadius;
+                    const clippedRelLeft = clippedShapeX - ancestorRect.left;
+                    const clippedRelTop = clippedShapeY - ancestorRect.top;
+                    const clippedRelRight = clippedRelLeft + clippedShapeW;
+                    const clippedRelBottom = clippedRelTop + clippedShapeH;
+                    const overlapsTL = clippedRelLeft < r && clippedRelTop < r;
+                    const overlapsTR = clippedRelRight > ancestorRect.width - r && clippedRelTop < r;
+                    const overlapsBL = clippedRelLeft < r && clippedRelBottom > ancestorRect.height - r;
+                    const overlapsBR = clippedRelRight > ancestorRect.width - r && clippedRelBottom > ancestorRect.height - r;
+                    if ((overlapsTL || overlapsTR || overlapsBL || overlapsBR) && wasClippedToParent) {
+                      if (DEBUG_OVERFLOW)
+                        console.log("[OverflowClip] Element overlaps corners:", { overlapsTL, overlapsTR, overlapsBL, overlapsBR, clippedRelLeft, clippedRelTop, clippedRelRight, clippedRelBottom, r, isEllipse, wasClippedToParent });
+                      const w2 = clippedShapeW;
+                      const h2 = clippedShapeH;
+                      const EMU_PER_PX3 = 914400 / 96;
+                      const widthEmu = Math.round(w2 * EMU_PER_PX3);
+                      const heightEmu = Math.round(h2 * EMU_PER_PX3);
+                      const segments = 8;
+                      const points = [];
+                      const addCornerArc = (cornerRelX, cornerRelY, isRight, isBottom, goingClockwise) => {
+                        const arcCenterX = isRight ? cornerRelX - r : cornerRelX + r;
+                        const arcCenterY = isBottom ? cornerRelY - r : cornerRelY + r;
+                        for (let i = 0; i <= segments; i++) {
+                          const t = goingClockwise ? i / segments : 1 - i / segments;
+                          const angle = t * Math.PI / 2;
+                          let arcRelX, arcRelY;
+                          if (!isRight && !isBottom) {
+                            arcRelX = -r * Math.sin(angle);
+                            arcRelY = -r * Math.cos(angle);
+                          } else if (isRight && !isBottom) {
+                            arcRelX = r * Math.cos(angle);
+                            arcRelY = -r * Math.sin(angle);
+                          } else if (!isRight && isBottom) {
+                            arcRelX = -r * Math.cos(angle);
+                            arcRelY = r * Math.sin(angle);
+                          } else {
+                            arcRelX = r * Math.sin(angle);
+                            arcRelY = r * Math.cos(angle);
+                          }
+                          const x2 = arcCenterX + arcRelX - clippedRelLeft;
+                          const y2 = arcCenterY + arcRelY - clippedRelTop;
+                          if (x2 >= -0.1 && x2 <= w2 + 0.1 && y2 >= -0.1 && y2 <= h2 + 0.1) {
+                            points.push({
+                              x: Math.round(Math.max(0, Math.min(w2, x2)) * EMU_PER_PX3),
+                              y: Math.round(Math.max(0, Math.min(h2, y2)) * EMU_PER_PX3),
+                              ...points.length === 0 ? { moveTo: true } : {}
+                            });
+                          }
+                        }
+                      };
+                      if (isEllipse && wasClippedToParent) {
+                        const ellipseRx = origW / 2;
+                        const ellipseRy = origH / 2;
+                        const centerXInClipped = relLeft + ellipseRx - clippedRelLeft;
+                        const centerYInClipped = relTop + ellipseRy - clippedRelTop;
+                        if (DEBUG_OVERFLOW) {
+                          console.log("[OverflowClip] Ellipse clipping - origW:", origW, "origH:", origH);
+                          console.log("[OverflowClip] Ellipse clipping - rx:", ellipseRx, "ry:", ellipseRy);
+                          console.log("[OverflowClip] Ellipse clipping - relLeft:", relLeft, "relTop:", relTop);
+                          console.log("[OverflowClip] Ellipse clipping - clippedRelLeft:", clippedRelLeft, "clippedRelTop:", clippedRelTop);
+                          console.log("[OverflowClip] Ellipse clipping - centerX:", centerXInClipped, "centerY:", centerYInClipped);
+                          console.log("[OverflowClip] Ellipse clipping - w:", w2, "h:", h2);
+                          console.log("[OverflowClip] Ellipse clipping - clippedShapeW:", clippedShapeW, "clippedShapeH:", clippedShapeH);
+                        }
+                        const arcSegments = 64;
+                        const pathPoints = [];
+                        for (let i = 0; i <= arcSegments; i++) {
+                          const angle = i / arcSegments * 2 * Math.PI;
+                          const px = centerXInClipped + ellipseRx * Math.cos(angle);
+                          const py = centerYInClipped + ellipseRy * Math.sin(angle);
+                          const isInside = px >= -0.5 && px <= w2 + 0.5 && py >= -0.5 && py <= h2 + 0.5;
+                          if (i > 0) {
+                            const prevAngle = (i - 1) / arcSegments * 2 * Math.PI;
+                            const prevPx = centerXInClipped + ellipseRx * Math.cos(prevAngle);
+                            const prevPy = centerYInClipped + ellipseRy * Math.sin(prevAngle);
+                            const prevInside = prevPx >= -0.5 && prevPx <= w2 + 0.5 && prevPy >= -0.5 && prevPy <= h2 + 0.5;
+                            if (isInside !== prevInside) {
+                              let lowT = 0, highT = 1;
+                              for (let iter = 0; iter < 10; iter++) {
+                                const midT = (lowT + highT) / 2;
+                                const midAngle = prevAngle + midT * (angle - prevAngle);
+                                const midPx = centerXInClipped + ellipseRx * Math.cos(midAngle);
+                                const midPy = centerYInClipped + ellipseRy * Math.sin(midAngle);
+                                const midInside = midPx >= -0.5 && midPx <= w2 + 0.5 && midPy >= -0.5 && midPy <= h2 + 0.5;
+                                if (midInside === prevInside)
+                                  lowT = midT;
+                                else
+                                  highT = midT;
+                              }
+                              const crossT = (lowT + highT) / 2;
+                              const crossAngle = prevAngle + crossT * (angle - prevAngle);
+                              const crossPx = centerXInClipped + ellipseRx * Math.cos(crossAngle);
+                              const crossPy = centerYInClipped + ellipseRy * Math.sin(crossAngle);
+                              let edge = "";
+                              if (Math.abs(crossPy) < 1)
+                                edge = "top";
+                              else if (Math.abs(crossPy - h2) < 1)
+                                edge = "bottom";
+                              else if (Math.abs(crossPx) < 1)
+                                edge = "left";
+                              else if (Math.abs(crossPx - w2) < 1)
+                                edge = "right";
+                              pathPoints.push({
+                                x: Math.max(0, Math.min(w2, crossPx)),
+                                y: Math.max(0, Math.min(h2, crossPy)),
+                                angle: crossAngle,
+                                isEntry: isInside,
+                                isExit: !isInside,
+                                edge
+                              });
+                            }
+                          }
+                          if (isInside) {
+                            pathPoints.push({
+                              x: Math.max(0, Math.min(w2, px)),
+                              y: Math.max(0, Math.min(h2, py)),
+                              angle
+                            });
+                          }
+                        }
+                        if (pathPoints.length >= 3) {
+                          if (DEBUG_OVERFLOW) {
+                            console.log("[OverflowClip] pathPoints count:", pathPoints.length);
+                            const entryPt = pathPoints.find((p) => p.isEntry);
+                            const exitPt = pathPoints.find((p) => p.isExit);
+                            console.log("[OverflowClip] entry:", entryPt);
+                            console.log("[OverflowClip] exit:", exitPt);
+                          }
+                          const finalPoints = [];
+                          for (const p of pathPoints) {
+                            if (finalPoints.length > 0) {
+                              const last = finalPoints[finalPoints.length - 1];
+                              if (Math.abs(p.x - last.x) < 0.5 && Math.abs(p.y - last.y) < 0.5)
+                                continue;
+                            }
+                            finalPoints.push({ x: p.x, y: p.y });
+                          }
+                          if (finalPoints.length >= 2) {
+                            const exitEdge = pathPoints.find((p) => p.isExit)?.edge;
+                            const entryEdge = pathPoints.find((p) => p.isEntry)?.edge;
+                            if (exitEdge && entryEdge && exitEdge !== entryEdge) {
+                              const edgeOrder = ["top", "right", "bottom", "left"];
+                              const cornerHasArc = {
+                                "top-right": overlapsTR && r > 0,
+                                "right-bottom": overlapsBR && r > 0,
+                                "bottom-left": overlapsBL && r > 0,
+                                "left-top": overlapsTL && r > 0
+                              };
+                              const cornerPositions = {
+                                "top-right": {
+                                  x: ancestorRect.width - clippedRelLeft,
+                                  y: 0,
+                                  arcCenterX: ancestorRect.width - r - clippedRelLeft,
+                                  arcCenterY: r - clippedRelTop
+                                },
+                                "right-bottom": {
+                                  x: ancestorRect.width - clippedRelLeft,
+                                  y: ancestorRect.height - clippedRelTop,
+                                  arcCenterX: ancestorRect.width - r - clippedRelLeft,
+                                  arcCenterY: ancestorRect.height - r - clippedRelTop
+                                },
+                                "bottom-left": {
+                                  x: 0 - clippedRelLeft,
+                                  y: ancestorRect.height - clippedRelTop,
+                                  arcCenterX: r - clippedRelLeft,
+                                  arcCenterY: ancestorRect.height - r - clippedRelTop
+                                },
+                                "left-top": {
+                                  x: 0 - clippedRelLeft,
+                                  y: 0,
+                                  arcCenterX: r - clippedRelLeft,
+                                  arcCenterY: r - clippedRelTop
+                                }
+                              };
+                              let exitIdx = edgeOrder.indexOf(exitEdge);
+                              const entryIdxTarget = edgeOrder.indexOf(entryEdge);
+                              while (exitIdx !== entryIdxTarget) {
+                                const nextIdx = (exitIdx + 1) % 4;
+                                const cornerKey = `${edgeOrder[exitIdx]}-${edgeOrder[nextIdx]}`;
+                                const hasArc = cornerHasArc[cornerKey];
+                                const cornerPos = cornerPositions[cornerKey];
+                                if (hasArc && cornerPos) {
+                                  const arcCX = cornerPos.arcCenterX;
+                                  const arcCY = cornerPos.arcCenterY;
+                                  const arcSegs = 8;
+                                  let startAngle, endAngle;
+                                  switch (cornerKey) {
+                                    case "top-right":
+                                      startAngle = -Math.PI / 2;
+                                      endAngle = 0;
+                                      break;
+                                    case "right-bottom":
+                                      startAngle = 0;
+                                      endAngle = Math.PI / 2;
+                                      break;
+                                    case "bottom-left":
+                                      startAngle = Math.PI / 2;
+                                      endAngle = Math.PI;
+                                      break;
+                                    case "left-top":
+                                      startAngle = Math.PI;
+                                      endAngle = Math.PI * 1.5;
+                                      break;
+                                    default:
+                                      startAngle = 0;
+                                      endAngle = Math.PI / 2;
+                                  }
+                                  for (let ai = 0; ai <= arcSegs; ai++) {
+                                    const t = ai / arcSegs;
+                                    const angle = startAngle + t * (endAngle - startAngle);
+                                    const arcX = arcCX + r * Math.cos(angle);
+                                    const arcY = arcCY + r * Math.sin(angle);
+                                    if (arcX >= -0.5 && arcX <= w2 + 0.5 && arcY >= -0.5 && arcY <= h2 + 0.5) {
+                                      const clampedX = Math.max(0, Math.min(w2, arcX));
+                                      const clampedY = Math.max(0, Math.min(h2, arcY));
+                                      if (finalPoints.length > 0) {
+                                        const last = finalPoints[finalPoints.length - 1];
+                                        if (Math.abs(clampedX - last.x) < 0.5 && Math.abs(clampedY - last.y) < 0.5)
+                                          continue;
+                                      }
+                                      finalPoints.push({ x: clampedX, y: clampedY });
+                                    }
+                                  }
+                                } else if (cornerPos) {
+                                  const clampedX = Math.max(0, Math.min(w2, cornerPos.x));
+                                  const clampedY = Math.max(0, Math.min(h2, cornerPos.y));
+                                  finalPoints.push({ x: clampedX, y: clampedY });
+                                }
+                                exitIdx = nextIdx;
+                              }
+                            }
+                          }
+                          if (finalPoints.length >= 3) {
+                            if (DEBUG_OVERFLOW) {
+                              console.log("[OverflowClip] finalPoints count:", finalPoints.length);
+                              console.log("[OverflowClip] first 3 points:", JSON.stringify(finalPoints.slice(0, 3)));
+                              console.log("[OverflowClip] last 3 points:", JSON.stringify(finalPoints.slice(-3)));
+                            }
+                            for (let i = 0; i < finalPoints.length; i++) {
+                              points.push({
+                                x: Math.round(finalPoints[i].x * EMU_PER_PX3),
+                                y: Math.round(finalPoints[i].y * EMU_PER_PX3),
+                                ...i === 0 ? { moveTo: true } : {}
+                              });
+                            }
+                            points.push({ x: points[0].x, y: points[0].y, close: true });
+                          }
+                        }
+                      } else if (!isEllipse) {
+                        const elementBorderRadius = parseFloat(borderRadiusStr) || 0;
+                        const elemR = elementBorderRadius;
+                        const addElementCornerArc = (isRight, isBottom) => {
+                          if (elemR <= 0)
+                            return;
+                          for (let i = 0; i <= segments; i++) {
+                            const t = i / segments;
+                            const angle = t * Math.PI / 2;
+                            let arcX, arcY;
+                            if (!isRight && !isBottom) {
+                              arcX = elemR * Math.cos(angle);
+                              arcY = elemR * Math.sin(angle);
+                            } else if (!isRight && isBottom) {
+                              arcX = elemR - elemR * Math.cos(angle);
+                              arcY = h2 - elemR + elemR * Math.sin(angle);
+                            } else if (isRight && isBottom) {
+                              arcX = w2 - elemR + elemR * Math.sin(angle);
+                              arcY = h2 - elemR + elemR * Math.cos(angle);
+                            } else {
+                              arcX = w2 - elemR + elemR * Math.cos(angle);
+                              arcY = elemR - elemR * Math.sin(angle);
+                            }
+                            points.push({
+                              x: Math.round(arcX * EMU_PER_PX3),
+                              y: Math.round(arcY * EMU_PER_PX3),
+                              ...points.length === 0 ? { moveTo: true } : {}
+                            });
+                          }
+                        };
+                        const atLeftClipBoundary = wasClippedToParent && clippedRelLeft <= 0.1;
+                        const atTopClipBoundary = wasClippedToParent && clippedRelTop <= 0.1;
+                        const atRightClipBoundary = wasClippedToParent && clippedRelRight >= ancestorRect.width - 0.1;
+                        const atBottomClipBoundary = wasClippedToParent && clippedRelBottom >= ancestorRect.height - 0.1;
+                        if (overlapsTL) {
+                          addCornerArc(0, 0, false, false, true);
+                        } else if (elemR > 0 && !atLeftClipBoundary && !atTopClipBoundary) {
+                          addElementCornerArc(false, false);
+                        } else {
+                          points.push({ x: 0, y: 0, moveTo: true });
+                        }
+                        if (overlapsBL) {
+                          addCornerArc(0, ancestorRect.height, false, true, true);
+                        } else if (elemR > 0 && !atLeftClipBoundary && !atBottomClipBoundary) {
+                          addElementCornerArc(false, true);
+                        } else {
+                          points.push({ x: 0, y: heightEmu });
+                        }
+                        if (overlapsBR) {
+                          addCornerArc(ancestorRect.width, ancestorRect.height, true, true, true);
+                        } else if (elemR > 0 && !atRightClipBoundary && !atBottomClipBoundary) {
+                          addElementCornerArc(true, true);
+                        } else {
+                          points.push({ x: widthEmu, y: heightEmu });
+                        }
+                        if (overlapsTR) {
+                          addCornerArc(ancestorRect.width, 0, true, false, true);
+                        } else if (elemR > 0 && !atRightClipBoundary && !atTopClipBoundary) {
+                          addElementCornerArc(true, false);
+                        } else {
+                          points.push({ x: widthEmu, y: 0 });
+                        }
+                        points.push({ x: 0, y: 0, close: true });
+                      }
+                      if (points.length > 5) {
+                        overflowClipGeometry = points;
+                        if (DEBUG_OVERFLOW)
+                          console.log("[OverflowClip] Generated custom geometry with", points.length, "points");
+                      } else {
+                        if (DEBUG_OVERFLOW)
+                          console.log("[OverflowClip] Not enough points for custom geometry:", points.length);
+                      }
+                    }
+                  }
+                  break;
+                }
+                overflowAncestor = overflowAncestor.parentElement;
+              }
+              let originalShapeW = shapeW;
+              let originalShapeH = shapeH;
+              if (wasClippedToParent) {
+                originalShapeW = shapeW;
+                originalShapeH = shapeH;
+                shapeX = clippedShapeX;
+                shapeY = clippedShapeY;
+                shapeW = clippedShapeW;
+                shapeH = clippedShapeH;
+              }
+              const hasTextContent = shapeText || shapeTextRuns && shapeTextRuns.length > 0;
+              const shouldSplitTextFromClippedShape = overflowClipGeometry && hasTextContent;
               const shapeElement = {
                 type: "shape",
-                text: shapeText,
-                textRuns: shapeTextRuns,
-                style: shapeStyle,
+                // If splitting text from clipped shape, don't include text in the main shape
+                text: shouldSplitTextFromClippedShape ? "" : shapeText,
+                textRuns: shouldSplitTextFromClippedShape ? null : shapeTextRuns,
+                style: shouldSplitTextFromClippedShape ? null : shapeStyle,
                 position: {
                   x: pxToInch(shapeX),
                   y: pxToInch(shapeY),
@@ -67983,7 +70282,8 @@ ${generateStylesCss(styleMap, themeFonts)}
                   isEllipse,
                   softEdge: softEdgePt,
                   rotate: rotationAngle,
-                  customGeometry: clipPathPolygon ? (() => {
+                  cssTriangle: null,
+                  customGeometry: overflowClipGeometry ? overflowClipGeometry : clipPathPolygon ? (() => {
                     const EMU2 = 914400;
                     const pathW = Math.round(shapeW / PX_PER_IN * EMU2);
                     const pathH = Math.round(shapeH / PX_PER_IN * EMU2);
@@ -67998,11 +70298,12 @@ ${generateStylesCss(styleMap, themeFonts)}
                     points.push({ x: 0, y: 0, close: true });
                     return points;
                   })() : null
-                }
+                },
+                zIndex: extractZIndex(computed2)
               };
               if (hasPadding && shapeElement.style && (shapeText || shapeTextRuns && shapeTextRuns.length > 0)) {
                 let effectiveLeftPadding = paddingLeft;
-                if (hasDirectText && allChildren.length > 0) {
+                if (hasDirectText && allChildren.length > 0 && !hasMixedInlineContent) {
                   for (const child of allChildren) {
                     if (child.nodeType === Node.ELEMENT_NODE) {
                       const childEl = child;
@@ -68029,6 +70330,76 @@ ${generateStylesCss(styleMap, themeFonts)}
                 ];
               }
               elements.push(shapeElement);
+              if (!shouldMergeText && textChildren.length > 0) {
+                textChildren.forEach((tc) => {
+                  processed.delete(tc);
+                  tc.querySelectorAll("*").forEach((desc) => processed.delete(desc));
+                });
+              }
+              if (shouldSplitTextFromClippedShape && overflowClipGeometry) {
+                const originalArea = originalShapeW * originalShapeH;
+                const clippedArea = clippedShapeW * clippedShapeH;
+                const visiblePercent = clippedArea / originalArea * 100;
+                if (DEBUG_OVERFLOW)
+                  console.log("[OverflowClip] Text shape visibility:", {
+                    originalShapeW,
+                    originalShapeH,
+                    originalArea,
+                    clippedShapeW,
+                    clippedShapeH,
+                    clippedArea,
+                    visiblePercent: visiblePercent.toFixed(1) + "%"
+                  });
+                if (visiblePercent >= 50) {
+                  const clippedTextShape = {
+                    type: "shape",
+                    text: shapeText,
+                    textRuns: shapeTextRuns,
+                    style: shapeStyle,
+                    position: {
+                      // Use clipped dimensions to constrain text to visible area
+                      x: pxToInch(clippedShapeX),
+                      y: pxToInch(clippedShapeY),
+                      w: pxToInch(clippedShapeW),
+                      h: pxToInch(clippedShapeH)
+                    },
+                    shape: {
+                      fill: null,
+                      // No fill - just text
+                      gradient: null,
+                      transparency: null,
+                      line: null,
+                      rectRadius: 0,
+                      shadow: null,
+                      opacity: null,
+                      isEllipse: false,
+                      softEdge: null,
+                      rotate: null,
+                      cssTriangle: null,
+                      customGeometry: null
+                      // NO custom geometry - PPTX doesn't clip text to paths
+                    }
+                  };
+                  if (hasPadding && clippedTextShape.style) {
+                    clippedTextShape.style.margin = [
+                      paddingLeft * PT_PER_PX,
+                      // left
+                      paddingRight * PT_PER_PX,
+                      // right
+                      paddingBottom * PT_PER_PX,
+                      // bottom
+                      paddingTop * PT_PER_PX
+                      // top
+                    ];
+                  }
+                  elements.push(clippedTextShape);
+                  if (DEBUG_OVERFLOW)
+                    console.log("[OverflowClip] Created separate clipped text shape for:", shapeText);
+                } else {
+                  if (DEBUG_OVERFLOW)
+                    console.log("[OverflowClip] Skipping text (visible area too small):", shapeText);
+                }
+              }
               if (extraDivGradients.length > 0) {
                 for (const extraGrad of extraDivGradients) {
                   const extraShape = {
@@ -68048,6 +70419,7 @@ ${generateStylesCss(styleMap, themeFonts)}
                       isEllipse: false,
                       softEdge: null,
                       rotate: null,
+                      cssTriangle: null,
                       customGeometry: null
                     }
                   };
@@ -68090,6 +70462,7 @@ ${generateStylesCss(styleMap, themeFonts)}
                   isEllipse: false,
                   softEdge: null,
                   rotate: null,
+                  cssTriangle: null,
                   customGeometry: null
                 }
               };
@@ -68102,7 +70475,7 @@ ${generateStylesCss(styleMap, themeFonts)}
                 tc.querySelectorAll("*").forEach((desc) => processed.delete(desc));
               });
             }
-            elements.push(...borderLines);
+            elements.push(...borderShapes);
             processed.add(el);
             return;
           }
@@ -68200,16 +70573,29 @@ ${generateStylesCss(styleMap, themeFonts)}
               const textHeight = rect2.height;
               let textRuns;
               const isFlexColumn = (plainDivDisplay === "flex" || plainDivDisplay === "inline-flex") && (plainDivFlexDir === "column" || plainDivFlexDir === "column-reverse") && childElements.length > 1;
+              const baseRunOptions = {
+                fontSize: pxToPoints(computed22.fontSize),
+                fontFace: extractFontFace(computed22.fontFamily),
+                color: rgbToHex(computed22.color)
+              };
+              if (parseInt(computed22.fontWeight) >= 600)
+                baseRunOptions.bold = true;
+              if (computed22.fontStyle === "italic")
+                baseRunOptions.italic = true;
+              const colorAlphaTransparency2 = extractAlpha(computed22.color);
+              const elementOpacityVal = getEffectiveOpacity(el, win);
+              if (colorAlphaTransparency2 !== null || elementOpacityVal < 1) {
+                let runTransparency = colorAlphaTransparency2 !== null ? colorAlphaTransparency2 : 0;
+                if (elementOpacityVal < 1) {
+                  const existingOpacity = 1 - runTransparency / 100;
+                  const combinedOpacity = existingOpacity * elementOpacityVal;
+                  runTransparency = Math.round((1 - combinedOpacity) * 100);
+                }
+                if (runTransparency > 0) {
+                  baseRunOptions.transparency = runTransparency;
+                }
+              }
               if (allChildrenAreInlineText && childElements.length > 0) {
-                const baseRunOptions = {
-                  fontSize: pxToPoints(computed22.fontSize),
-                  fontFace: extractFontFace(computed22.fontFamily),
-                  color: rgbToHex(computed22.color)
-                };
-                if (parseInt(computed22.fontWeight) >= 600)
-                  baseRunOptions.bold = true;
-                if (computed22.fontStyle === "italic")
-                  baseRunOptions.italic = true;
                 let textTransformFn = (s) => s;
                 if (computed22.textTransform && computed22.textTransform !== "none") {
                   textTransformFn = (text2) => applyTextTransform2(text2, computed22.textTransform);
@@ -68233,6 +70619,12 @@ ${generateStylesCss(styleMap, themeFonts)}
                     const childColor = rgbToHex(childComputed.color);
                     if (childColor)
                       childRunOptions.color = childColor;
+                    const childColorTransparency = extractAlpha(childComputed.color);
+                    if (childColorTransparency !== null) {
+                      childRunOptions.transparency = childColorTransparency;
+                    } else {
+                      delete childRunOptions.transparency;
+                    }
                     if (parseInt(childComputed.fontWeight) >= 600) {
                       childRunOptions.bold = true;
                     } else if (parseInt(childComputed.fontWeight) < 600) {
@@ -68250,13 +70642,14 @@ ${generateStylesCss(styleMap, themeFonts)}
                     textRuns.push({ text: textWithBreak, options: childRunOptions });
                   }
                 } else {
-                  textRuns = parseInlineFormatting(el, baseRunOptions, [], textTransformFn, win);
+                  const elPreserveWs = shouldPreserveWhitespace(computed22);
+                  textRuns = parseInlineFormatting(el, baseRunOptions, [], textTransformFn, win, elPreserveWs);
                 }
                 if (textRuns.length === 0) {
-                  textRuns = [{ text: extractedText, options: {} }];
+                  textRuns = [{ text: extractedText, options: baseRunOptions }];
                 }
               } else {
-                textRuns = [{ text: extractedText, options: {} }];
+                textRuns = [{ text: extractedText, options: baseRunOptions }];
               }
               const paddingTop = parseFloat(computed22.paddingTop) || 0;
               const paddingRight = parseFloat(computed22.paddingRight) || 0;
@@ -68284,9 +70677,8 @@ ${generateStylesCss(styleMap, themeFonts)}
                   margin: hasPadding ? [paddingLeft * PT_PER_PX, paddingRight * PT_PER_PX, paddingBottom * PT_PER_PX, paddingTop * PT_PER_PX] : void 0
                 }
               };
-              const textTransparency = extractAlpha(computed22.color);
-              if (textTransparency !== null) {
-                textElement.style.transparency = textTransparency;
+              if (baseRunOptions.transparency !== void 0 && baseRunOptions.transparency > 0) {
+                textElement.style.transparency = baseRunOptions.transparency;
               }
               const ls = extractLetterSpacing(computed22);
               if (ls !== null)
@@ -68337,7 +70729,8 @@ ${generateStylesCss(styleMap, themeFonts)}
             const liPaddingLeft = parseFloat(liComputed2.paddingLeft) || 0;
             const textLeft = liRect.left + liPaddingLeft;
             const textWidth = liRect.width - liPaddingLeft;
-            const runs = parseInlineFormatting(liEl, { breakLine: false }, [], (x2) => x2, win);
+            const liPreserveWs = shouldPreserveWhitespace(liComputed2);
+            const runs = parseInlineFormatting(liEl, { breakLine: false }, [], (x2) => x2, win, liPreserveWs);
             if (runs.length === 0)
               return;
             runs[0].text = runs[0].text.replace(/^[•\-*\u25AA\u25B8]\s*/, "");
@@ -68368,7 +70761,10 @@ ${generateStylesCss(styleMap, themeFonts)}
         }
         liElements.forEach((li, idx) => {
           const isLast = idx === liElements.length - 1;
-          const runs = parseInlineFormatting(li, { breakLine: false }, [], (x2) => x2, win);
+          const liEl = li;
+          const liItemComputed = win.getComputedStyle(liEl);
+          const liItemPreserveWs = shouldPreserveWhitespace(liItemComputed);
+          const runs = parseInlineFormatting(li, { breakLine: false }, [], (x2) => x2, win, liItemPreserveWs);
           if (runs.length > 0) {
             runs[0].text = runs[0].text.replace(/^[•\-*\u25AA\u25B8]\s*/, "");
             if (hasNativeBullets) {
@@ -68414,9 +70810,40 @@ ${generateStylesCss(styleMap, themeFonts)}
         return;
       let rect = htmlEl.getBoundingClientRect();
       const computed = win.getComputedStyle(el);
-      let text = getTransformedText(htmlEl, computed);
+      let effectiveComputedForWhitespace = computed;
+      const pParentEl = htmlEl.parentElement;
+      if (el.tagName === "P" && pParentEl && pParentEl.tagName === "DIV") {
+        const pParentChildren = Array.from(pParentEl.children);
+        const nonBrChildren = pParentChildren.filter((c) => c.tagName !== "BR");
+        if (nonBrChildren.length === 1 && nonBrChildren[0] === el) {
+          const pParentComputed = win.getComputedStyle(pParentEl);
+          if (isMonospaceFont(pParentComputed.fontFamily)) {
+            effectiveComputedForWhitespace = pParentComputed;
+          }
+        }
+      }
+      let text = getTransformedText(htmlEl, effectiveComputedForWhitespace);
       if (rect.width === 0 || rect.height === 0 || !text)
         return;
+      let effectiveFontSizeForOverflow = computed.fontSize;
+      let effectiveLineHeightForOverflow = computed.lineHeight;
+      if (el.tagName === "P" && pParentEl && pParentEl.tagName === "DIV") {
+        const pParentChildren = Array.from(pParentEl.children);
+        const nonBrChildren = pParentChildren.filter((c) => c.tagName !== "BR");
+        if (nonBrChildren.length === 1 && nonBrChildren[0] === el) {
+          const pParentComputedForOverflow = win.getComputedStyle(pParentEl);
+          effectiveFontSizeForOverflow = pParentComputedForOverflow.fontSize;
+          effectiveLineHeightForOverflow = pParentComputedForOverflow.lineHeight;
+        }
+      }
+      const earlyFontSizePx = parseFloat(effectiveFontSizeForOverflow);
+      const earlyLineHeightPx = parseFloat(effectiveLineHeightForOverflow);
+      if (!isNaN(earlyFontSizePx) && !isNaN(earlyLineHeightPx) && earlyLineHeightPx < earlyFontSizePx) {
+        const lineHeightOverflowOffsetPx = earlyFontSizePx - earlyLineHeightPx;
+        const minHeightPx = earlyFontSizePx * 1.3;
+        const newHeight = Math.max(rect.height, minHeightPx);
+        rect = new DOMRect(rect.x, rect.y + lineHeightOverflowOffsetPx, rect.width, newHeight);
+      }
       const isFlexContainer = computed.display === "flex" || computed.display === "inline-flex";
       let flexContentChild = null;
       if (isFlexContainer && el.children.length > 0) {
@@ -68505,13 +70932,39 @@ ${generateStylesCss(styleMap, themeFonts)}
           valign = "middle";
         }
       }
+      if (!isNaN(earlyFontSizePx) && !isNaN(earlyLineHeightPx) && earlyLineHeightPx < earlyFontSizePx) {
+        valign = "top";
+      }
+      let effectiveColor = computed.color;
+      let effectiveFontFamily = computed.fontFamily;
+      let effectiveFontSize = computed.fontSize;
+      if (el.tagName === "P" && parentEl && parentEl.tagName === "DIV") {
+        const parentChildren = Array.from(parentEl.children);
+        const nonBrChildren = parentChildren.filter((c) => c.tagName !== "BR");
+        if (nonBrChildren.length === 1 && nonBrChildren[0] === el) {
+          const parentComputed = win.getComputedStyle(parentEl);
+          if (parentComputed.color !== computed.color && parentComputed.color !== "rgb(0, 0, 0)") {
+            effectiveColor = parentComputed.color;
+          }
+          if (parentComputed.fontFamily !== computed.fontFamily) {
+            if (isMonospaceFont(parentComputed.fontFamily)) {
+              effectiveFontFamily = parentComputed.fontFamily;
+            }
+          }
+          if (parentComputed.fontSize !== computed.fontSize) {
+            if (isMonospaceFont(parentComputed.fontFamily)) {
+              effectiveFontSize = parentComputed.fontSize;
+            }
+          }
+        }
+      }
       const baseStyle = {
-        fontSize: pxToPoints(computed.fontSize),
-        fontFace: extractFontFace(computed.fontFamily),
-        color: rgbToHex(computed.color),
+        fontSize: pxToPoints(effectiveFontSize),
+        fontFace: extractFontFace(effectiveFontFamily),
+        color: rgbToHex(effectiveColor),
         align: textAlign,
         valign,
-        lineSpacing: pxToPoints(computed.fontSize) * lineHeightMultiplier,
+        lineSpacing: pxToPoints(effectiveFontSize) * lineHeightMultiplier,
         paraSpaceBefore: pxToPoints(computed.marginTop),
         paraSpaceAfter: pxToPoints(computed.marginBottom),
         margin: [
@@ -68521,9 +70974,19 @@ ${generateStylesCss(styleMap, themeFonts)}
           pxToPoints(computed.paddingTop)
         ]
       };
-      const transparency = extractAlpha(computed.color);
-      if (transparency !== null)
-        baseStyle.transparency = transparency;
+      const colorAlphaTransparency = extractAlpha(effectiveColor);
+      const effectiveOpacity = getEffectiveOpacity(el, win);
+      if (colorAlphaTransparency !== null || effectiveOpacity < 1) {
+        let finalTransparency = colorAlphaTransparency !== null ? colorAlphaTransparency : 0;
+        if (effectiveOpacity < 1) {
+          const existingOpacity = 1 - finalTransparency / 100;
+          const combinedOpacity = existingOpacity * effectiveOpacity;
+          finalTransparency = Math.round((1 - combinedOpacity) * 100);
+        }
+        if (finalTransparency > 0) {
+          baseStyle.transparency = finalTransparency;
+        }
+      }
       const letterSpacing = extractLetterSpacing(computed);
       if (letterSpacing !== null)
         baseStyle.charSpacing = letterSpacing;
@@ -68548,10 +71011,16 @@ ${generateStylesCss(styleMap, themeFonts)}
         }
       }
       const formattingRoot = flexContentChild ?? el;
-      const hasFormatting = formattingRoot.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");
+      const hasFormatting = formattingRoot.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, div, p");
       if (hasFormatting) {
         const transformStr = computed.textTransform;
-        const runs = parseInlineFormatting(formattingRoot, {}, [], (str) => applyTextTransform2(str, transformStr), win);
+        const textPreserveWs = shouldPreserveWhitespace(effectiveComputedForWhitespace);
+        const baseRunOptions = {
+          fontSize: baseStyle.fontSize,
+          fontFace: baseStyle.fontFace,
+          color: baseStyle.color ?? void 0
+        };
+        const runs = parseInlineFormatting(formattingRoot, baseRunOptions, [], (str) => applyTextTransform2(str, transformStr), win, textPreserveWs);
         const textElement = {
           type: el.tagName.toLowerCase(),
           text: runs,
@@ -68601,6 +71070,11 @@ ${generateStylesCss(styleMap, themeFonts)}
       const pseudoElements = extractPseudoElements(htmlDiv, win);
       elements.push(...pseudoElements);
     });
+    elements.sort((a, b) => {
+      const zIndexA = "zIndex" in a && a.zIndex !== void 0 ? a.zIndex : 0;
+      const zIndexB = "zIndex" in b && b.zIndex !== void 0 ? b.zIndex : 0;
+      return zIndexA - zIndexB;
+    });
     return { background, elements, placeholders, errors };
   }
 
@@ -68847,7 +71321,24 @@ ${generateStylesCss(styleMap, themeFonts)}
       } else if (el.type === "shape") {
         let shapeType = pres.ShapeType.rect;
         let customGeometryPoints;
-        if (el.shape.customGeometry && el.shape.customGeometry.length > 0) {
+        let triangleRotation = null;
+        if (el.shape.cssTriangle) {
+          shapeType = pres.ShapeType.triangle;
+          switch (el.shape.cssTriangle.direction) {
+            case "up":
+              triangleRotation = 0;
+              break;
+            case "down":
+              triangleRotation = 180;
+              break;
+            case "left":
+              triangleRotation = 270;
+              break;
+            case "right":
+              triangleRotation = 90;
+              break;
+          }
+        } else if (el.shape.customGeometry && el.shape.customGeometry.length > 0) {
           shapeType = pres.ShapeType.custGeom;
           customGeometryPoints = el.shape.customGeometry;
         } else if (el.shape.isEllipse) {
@@ -68946,8 +71437,10 @@ ${generateStylesCss(styleMap, themeFonts)}
           shapeOptions.shadow = el.shape.shadow;
         if (el.shape.softEdge)
           shapeOptions.softEdgeRad = el.shape.softEdge;
-        if (el.shape.rotate)
-          shapeOptions.rotate = el.shape.rotate;
+        const cssRotation = el.shape.rotate ?? 0;
+        const totalRotation = cssRotation + (triangleRotation ?? 0);
+        if (totalRotation !== 0)
+          shapeOptions.rotate = totalRotation;
         if (el.style) {
           if (el.style.fontSize)
             shapeOptions.fontSize = el.style.fontSize;
@@ -68976,6 +71469,11 @@ ${generateStylesCss(styleMap, themeFonts)}
             shapeOptions.inset = el.style.inset;
           if (el.style.charSpacing)
             shapeOptions.charSpacing = el.style.charSpacing;
+          if (el.style.lineSpacing)
+            shapeOptions.lineSpacing = el.style.lineSpacing;
+          if (el.style.transparency !== null && el.style.transparency !== void 0) {
+            shapeOptions.transparency = el.style.transparency;
+          }
           if (el.style.glow) {
             shapeOptions.glow = {
               size: el.style.glow.size,
@@ -68995,10 +71493,14 @@ ${generateStylesCss(styleMap, themeFonts)}
       } else if (el.type === "list") {
         const heightIncrease = el.position.h * 0.15;
         const adjustedH = el.position.h + heightIncrease;
+        const fontSize = el.style.fontSize ?? 12;
+        const bufferPercent = fontSize < 14 ? 0.1 : fontSize < 24 ? 0.07 : 0.05;
+        const widthIncrease = el.position.w * bufferPercent;
+        const adjustedW = el.position.w + widthIncrease;
         const listOptions = {
           x: el.position.x,
           y: el.position.y,
-          w: el.position.w,
+          w: adjustedW,
           h: adjustedH,
           fontSize: el.style.fontSize,
           fontFace: el.style.fontFace,
@@ -69019,13 +71521,15 @@ ${generateStylesCss(styleMap, themeFonts)}
       } else {
         const lineHeightPt = el.style.lineSpacing || (el.style.fontSize ?? 0) * 1.2;
         const heightPt = el.position.h * 72;
-        const isSingleLine = heightPt <= lineHeightPt * 1.5;
+        const textContent2 = typeof el.text === "string" ? el.text : Array.isArray(el.text) ? el.text.map((r) => r.text).join("") : "";
+        const hasNewlines = textContent2.includes("\n");
+        const isSingleLine = !hasNewlines && heightPt <= lineHeightPt * 1.5;
         let adjustedX = el.position.x;
         let adjustedW;
         let adjustedH = el.position.h;
         if (isSingleLine) {
           const fontSize = el.style.fontSize ?? 12;
-          const bufferPercent = fontSize > 36 ? 0.02 : fontSize > 24 ? 0.015 : 0.01;
+          const bufferPercent = fontSize < 14 ? 0.1 : fontSize < 24 ? 0.07 : 0.05;
           const widthIncrease = el.position.w * bufferPercent;
           const align = el.style.align;
           if (align === "center") {
@@ -69049,7 +71553,7 @@ ${generateStylesCss(styleMap, themeFonts)}
           } else {
             adjustedW = el.position.w + widthIncrease;
           }
-          const heightIncrease = el.position.h * 0.05;
+          const heightIncrease = hasNewlines ? el.position.h * 1 : el.position.h * 0.05;
           adjustedH = el.position.h + heightIncrease;
         }
         const textOptions = {
@@ -69404,7 +71908,7 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
       }
       html = html.slice(0, start) + html.slice(i);
     }
-    html = html.replace(/opacity:\s*0\s*;?(?=\s*[}]|;)/g, "opacity: 1;");
+    html = html.replace(/opacity:\s*0\s*(;?)(?=\s*[}";])/g, "opacity: 1$1");
     html = html.replace(/transition:\s*[^;}]+;?/g, "");
     html = html.replace(/pointer-events:\s*[^;}]+;?/g, "");
     const bodyBlockMatch = html.match(/body\s*\{([^}]*)\}/s);
@@ -76127,8 +78631,11 @@ ${String(ex)}`);
       } else if (opts.color) {
         runProps += genXmlColorSelection({ color: opts.color, transparency: opts.transparency });
       }
-      if (opts.highlight)
-        runProps += `<a:highlight>${createColorElement(opts.highlight)}</a:highlight>`;
+      if (opts.highlight) {
+        var highlightColor = typeof opts.highlight === "object" ? opts.highlight.color : opts.highlight;
+        var highlightAlpha = typeof opts.highlight === "object" && opts.highlight.transparency != null ? `<a:alpha val="${Math.round((100 - opts.highlight.transparency) * 1e3)}"/>` : "";
+        runProps += `<a:highlight>${createColorElement(highlightColor, highlightAlpha)}</a:highlight>`;
+      }
       if (typeof opts.underline === "object" && opts.underline.color)
         runProps += `<a:uFill>${genXmlColorSelection(opts.underline.color)}</a:uFill>`;
       if (opts.glow)