docgen-utils 1.0.28 → 1.0.29

package/README.md

@@ -42,15 +42,15 @@ The CLI is used in the agent sandbox to transform artifacts.
 alias docgen='npx tsx packages/cli'
 docgen import docx --file=file.docx --out-dir=./output [--name=<filename>]
 docgen import pptx --file=file.pptx --out-dir=./output [--name=<filename>]
-docgen export docs --file=file.html --out-dir=./output [--name=<filename>] [--pageless]
-docgen export slides --files=slide-1.html,slide-2.html --out-dir=./output [--name=<filename>]
+docgen export docs --file=file.html --out-dir=./output [--name=<filename>] [--pageless] [--pdf]
+docgen export slides --files=slide-1.html,slide-2.html --out-dir=./output [--name=<filename>] [--pdf]
 ```
 
 ## Visual Comparison
 
 The `output` directory contains the rendered output in target formats. e.g. DOCX or PPTX vs HTML
 
-- Files in `test-data/docs/` (27 HTML files) → converted to DOCX → `docx-render.jpg`
+- Files in `test-data/docs/` (28 HTML files) → converted to DOCX → `docx-render.jpg`
 - Files in `test-data/slides/` (90 HTML files) → converted to PPTX → `pptx-render.jpg`
 - Files in `test-data/pptx/` (145 PPTX files) → imported to HTML → `html-render.jpg`
 - Files in `test-data/docx/` (22 DOCX files) → imported to HTML → `html-render.jpg`

package/dist/bundle.js

@@ -65528,6 +65528,15 @@ ${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;
@@ -66585,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;
@@ -66622,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;
@@ -66654,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";
@@ -66679,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;
@@ -66695,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") {
@@ -66774,15 +66785,15 @@ ${generateStylesCss(styleMap, themeFonts)}
       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;
@@ -66799,15 +66810,15 @@ ${generateStylesCss(styleMap, themeFonts)}
       }
       let asymmetricCornerGeometry = null;
       if (rectRadius === 0 && !isEllipse && effectiveRectRadius > 0) {
-        const parentComputed = win.getComputedStyle(el);
-        const parentRadius = parseFloat(parentComputed.borderRadius);
+        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(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;
@@ -67064,7 +67075,8 @@ ${generateStylesCss(styleMap, themeFonts)}
           rotate: pseudoRotation,
           cssTriangle: null,
           customGeometry: asymmetricCornerGeometry
-        }
+        },
+        zIndex: parentZIndex
       };
       results.push(shapeElement);
       for (const extraGrad of extraPseudoGradients) {
@@ -67087,7 +67099,8 @@ ${generateStylesCss(styleMap, themeFonts)}
             rotate: null,
             cssTriangle: null,
             customGeometry: null
-          }
+          },
+          zIndex: parentZIndex
         };
         results.push(extraShape);
       }
@@ -67419,7 +67432,8 @@ ${generateStylesCss(styleMap, themeFonts)}
                 rotate: null,
                 cssTriangle: null,
                 customGeometry: null
-              }
+              },
+              zIndex: extractZIndex(computed2)
             };
             elements.push(shapeElement);
             if (hasBorder && !hasUniformBorder) {
@@ -67925,7 +67939,8 @@ ${generateStylesCss(styleMap, themeFonts)}
                 rotate: null,
                 cssTriangle: null,
                 customGeometry: null
-              }
+              },
+              zIndex: extractZIndex(computed2)
             };
             elements.push(shapeElement);
             if (hasBorder && !hasUniformBorder) {
@@ -70283,7 +70298,8 @@ ${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;
@@ -71054,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 };
   }