docgen-utils 1.0.14 → 1.0.16

package/dist/bundle.js

@@ -46780,7 +46780,7 @@ var docgen = (() => {
     const trimmed = current.trim().replace(/^['"]|['"]$/g, "");
     if (trimmed)
       fonts.push(trimmed);
-    const genericFonts = /* @__PURE__ */ new Set([
+    const cssGenericFamilies = /* @__PURE__ */ new Set([
       "sans-serif",
       "serif",
       "monospace",
@@ -46788,27 +46788,81 @@ var docgen = (() => {
       "fantasy",
       "system-ui",
       "-apple-system",
-      "BlinkMacSystemFont",
-      "Segoe UI",
-      "Roboto",
-      "Helvetica Neue",
+      "BlinkMacSystemFont"
+    ]);
+    const systemFonts = /* @__PURE__ */ new Set([
       "Arial",
       "Helvetica",
-      "Ubuntu",
-      "Cantarell",
-      "Fira Sans",
-      "Droid Sans",
-      "Noto Sans",
-      "sans-serif",
-      "Oxygen",
-      "Open Sans"
+      "Helvetica Neue",
+      "Segoe UI",
+      "Times New Roman",
+      "Georgia",
+      "Courier New"
+    ]);
+    const webFontMap = /* @__PURE__ */ new Map([
+      // Sans-serif Google Fonts → Arial
+      ["Inter", "Arial"],
+      ["Roboto", "Arial"],
+      ["Open Sans", "Arial"],
+      ["Lato", "Arial"],
+      ["Montserrat", "Arial"],
+      ["Poppins", "Arial"],
+      ["Nunito", "Arial"],
+      ["Raleway", "Arial"],
+      ["Ubuntu", "Arial"],
+      ["Cantarell", "Arial"],
+      ["Fira Sans", "Arial"],
+      ["Droid Sans", "Arial"],
+      ["Noto Sans", "Arial"],
+      ["Oxygen", "Arial"],
+      ["Source Sans Pro", "Arial"],
+      ["Source Sans 3", "Arial"],
+      ["Work Sans", "Arial"],
+      ["DM Sans", "Arial"],
+      ["IBM Plex Sans", "Arial"],
+      ["Mulish", "Arial"],
+      ["Quicksand", "Arial"],
+      ["Manrope", "Arial"],
+      ["Outfit", "Arial"],
+      ["Plus Jakarta Sans", "Arial"],
+      ["Figtree", "Arial"],
+      ["Geist", "Arial"],
+      // Serif Google Fonts → Times New Roman
+      ["Playfair Display", "Times New Roman"],
+      ["Merriweather", "Times New Roman"],
+      ["Lora", "Times New Roman"],
+      ["PT Serif", "Times New Roman"],
+      ["Noto Serif", "Times New Roman"],
+      ["Source Serif Pro", "Times New Roman"],
+      ["Source Serif 4", "Times New Roman"],
+      ["Libre Baskerville", "Times New Roman"],
+      ["Crimson Text", "Times New Roman"],
+      ["EB Garamond", "Times New Roman"],
+      ["Cormorant Garamond", "Times New Roman"],
+      ["DM Serif Display", "Times New Roman"],
+      // Display/heading fonts (mostly sans-serif) → Arial
+      ["Oswald", "Arial"],
+      ["Abril Fatface", "Times New Roman"],
+      ["Bebas Neue", "Arial"]
     ]);
+    let webFontFallback;
     for (const font of fonts) {
-      if (!genericFonts.has(font) && !font.startsWith("-")) {
-        return font;
+      if (cssGenericFamilies.has(font) || font.startsWith("-")) {
+        continue;
       }
+      if (systemFonts.has(font)) {
+        continue;
+      }
+      const mapped = webFontMap.get(font);
+      if (mapped) {
+        if (!webFontFallback) {
+          webFontFallback = mapped;
+        }
+        continue;
+      }
+      return font;
     }
-    return fonts[0];
+    return webFontFallback;
   }
   function extractHexColor(value) {
     const namedColors = {
@@ -52293,31 +52347,44 @@ var docgen = (() => {
   // packages/docs/create-document.js
   function replaceChartPlaceholders(elements, chartImages) {
     let chartIndex = 0;
-    return elements.map((element) => {
-      if (element.type === "chart-placeholder" && element.chartId) {
-        const imageData = chartImages.get(element.chartId);
-        if (imageData) {
-          return {
-            type: "chart-image",
-            title: element.title,
-            imageData
-          };
+    function replaceInElements(els) {
+      return els.map((element) => {
+        if (element.type === "chart-placeholder" && element.chartId) {
+          const imageData = chartImages.get(element.chartId);
+          if (imageData) {
+            return {
+              type: "chart-image",
+              title: element.title,
+              imageData
+            };
+          }
         }
-      }
-      if (element.type === "svg-chart") {
-        const key2 = `svg-chart-${chartIndex}`;
-        const imageData = chartImages.get(key2);
-        chartIndex++;
-        if (imageData) {
+        if (element.type === "svg-chart") {
+          const key2 = `svg-chart-${chartIndex}`;
+          const imageData = chartImages.get(key2);
+          chartIndex++;
+          if (imageData) {
+            return {
+              type: "chart-image",
+              title: element.title,
+              imageData
+            };
+          }
+        }
+        if (element.type === "blockquote" && element.content) {
+          return { ...element, content: replaceInElements(element.content) };
+        }
+        if (element.type === "two-column-layout") {
           return {
-            type: "chart-image",
-            title: element.title,
-            imageData
+            ...element,
+            sidebar: { ...element.sidebar, content: replaceInElements(element.sidebar.content) },
+            main: { ...element.main, content: replaceInElements(element.main.content) }
           };
         }
-      }
-      return element;
-    });
+        return element;
+      });
+    }
+    return replaceInElements(elements);
   }
   function createDocxDocument(html, options = {}) {
     const { title, author, description, chartImages, imageMap, pageless, pageHeightTwips, elements: preElements } = options;
@@ -52559,18 +52626,29 @@ var docgen = (() => {
   }
   async function renderSvgChartsFromElements(elements) {
     const chartImages = /* @__PURE__ */ new Map();
-    let svgIndex = 0;
-    for (const element of elements) {
-      if (element.type === "svg-chart") {
-        try {
-          const imageData = await renderSvgToPng(element.svgContent, element.width, element.height, element.backgroundColor);
-          if (imageData) {
-            chartImages.set(`svg-chart-${svgIndex}`, imageData);
-          }
-        } catch (err) {
-          console.warn(`Failed to render SVG chart ${svgIndex}:`, err);
+    const svgChartElements = [];
+    function collectSvgCharts(els) {
+      for (const el of els) {
+        if (el.type === "svg-chart") {
+          svgChartElements.push(el);
+        } else if (el.type === "blockquote" && el.content) {
+          collectSvgCharts(el.content);
+        } else if (el.type === "two-column-layout") {
+          collectSvgCharts(el.sidebar.content);
+          collectSvgCharts(el.main.content);
+        }
+      }
+    }
+    collectSvgCharts(elements);
+    for (let svgIndex = 0; svgIndex < svgChartElements.length; svgIndex++) {
+      const element = svgChartElements[svgIndex];
+      try {
+        const imageData = await renderSvgToPng(element.svgContent, element.width, element.height, element.backgroundColor);
+        if (imageData) {
+          chartImages.set(`svg-chart-${svgIndex}`, imageData);
         }
-        svgIndex++;
+      } catch (err) {
+        console.warn(`Failed to render SVG chart ${svgIndex}:`, err);
       }
     }
     return chartImages;
@@ -67847,28 +67925,62 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
     const a = Math.round(alpha100k / 1e5 * 100) / 100;
     return `rgba(${r},${g},${b},${a})`;
   }
+  function applyTint(hex, tintVal) {
+    const factor = tintVal / 1e5;
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    const nr = Math.round(r + (255 - r) * (1 - factor));
+    const ng = Math.round(g + (255 - g) * (1 - factor));
+    const nb = Math.round(b + (255 - b) * (1 - factor));
+    return `#${nr.toString(16).padStart(2, "0")}${ng.toString(16).padStart(2, "0")}${nb.toString(16).padStart(2, "0")}`;
+  }
+  function applyShade(hex, shadeVal) {
+    const factor = shadeVal / 1e5;
+    const r = Math.round(parseInt(hex.slice(1, 3), 16) * factor);
+    const g = Math.round(parseInt(hex.slice(3, 5), 16) * factor);
+    const b = Math.round(parseInt(hex.slice(5, 7), 16) * factor);
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+  }
+  function applyColorModifiers(colorEl, hex) {
+    let color = hex;
+    let alphaVal;
+    const tintEl = findChild2(colorEl, "tint");
+    if (tintEl) {
+      const val = parseInt(tintEl.getAttribute("val") ?? "100000", 10);
+      color = applyTint(color, val);
+    }
+    const shadeEl = findChild2(colorEl, "shade");
+    if (shadeEl) {
+      const val = parseInt(shadeEl.getAttribute("val") ?? "100000", 10);
+      color = applyShade(color, val);
+    }
+    const alphaEl = findChild2(colorEl, "alpha");
+    if (alphaEl) {
+      alphaVal = parseInt(alphaEl.getAttribute("val") ?? "100000", 10);
+    }
+    return { color, alpha: alphaVal };
+  }
   function resolveColor2(parent, themeColors) {
     const srgbClr = findChild2(parent, "srgbClr");
     if (srgbClr) {
       const hex = "#" + (srgbClr.getAttribute("val") ?? "000000");
-      const alphaEl = findChild2(srgbClr, "alpha");
-      if (alphaEl) {
-        const alphaVal = parseInt(alphaEl.getAttribute("val") ?? "100000", 10);
-        return hexToRgba(hex, alphaVal);
+      const { color, alpha } = applyColorModifiers(srgbClr, hex);
+      if (alpha !== void 0 && alpha < 1e5) {
+        return hexToRgba(color, alpha);
       }
-      return hex;
+      return color;
     }
     const schemeClr = findChild2(parent, "schemeClr");
     if (schemeClr) {
       const val = schemeClr.getAttribute("val");
       if (val && themeColors.has(val)) {
         const hex = themeColors.get(val);
-        const alphaEl = findChild2(schemeClr, "alpha");
-        if (alphaEl) {
-          const alphaVal = parseInt(alphaEl.getAttribute("val") ?? "100000", 10);
-          return hexToRgba(hex, alphaVal);
+        const { color, alpha } = applyColorModifiers(schemeClr, hex);
+        if (alpha !== void 0 && alpha < 1e5) {
+          return hexToRgba(color, alpha);
         }
-        return hex;
+        return color;
       }
     }
     return void 0;
@@ -67919,6 +68031,158 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
       return resolveColor2(solidFill, themeColors);
     return extractGradientFill(spPr, themeColors);
   }
+  function resolveBgRef(bgRef, bgFillStyles, themeColors) {
+    const idx = parseInt(bgRef.getAttribute("idx") ?? "0", 10);
+    if (idx < 1001 || bgFillStyles.length === 0)
+      return void 0;
+    const styleIdx = idx - 1001;
+    if (styleIdx >= bgFillStyles.length)
+      return void 0;
+    const fillStyle = bgFillStyles[styleIdx];
+    const phColor = resolveColor2(bgRef, themeColors);
+    if (fillStyle.localName === "solidFill") {
+      const phClr = findChild2(fillStyle, "schemeClr");
+      if (phClr?.getAttribute("val") === "phClr" && phColor) {
+        return phColor;
+      }
+      return resolveColor2(fillStyle, themeColors) ?? phColor;
+    }
+    if (fillStyle.localName === "gradFill") {
+      return extractGradientFill(
+        // Wrap in a parent element for extractGradientFill
+        { children: [fillStyle] },
+        themeColors
+      );
+    }
+    return phColor;
+  }
+  function extractBgFill(bgEl, bgFillStyles, themeColors) {
+    const bgPr = findChild2(bgEl, "bgPr");
+    if (bgPr) {
+      return extractFill(bgPr, themeColors);
+    }
+    const bgRef = findChild2(bgEl, "bgRef");
+    if (bgRef) {
+      return resolveBgRef(bgRef, bgFillStyles, themeColors);
+    }
+    return void 0;
+  }
+  function extractCustGeomClipPath(custGeom) {
+    const pathLst = findChild2(custGeom, "pathLst");
+    if (!pathLst)
+      return void 0;
+    const pathEl = findChild2(pathLst, "path");
+    if (!pathEl)
+      return void 0;
+    const pathW = parseInt(pathEl.getAttribute("w") ?? "0", 10);
+    const pathH = parseInt(pathEl.getAttribute("h") ?? "0", 10);
+    if (pathW <= 0 || pathH <= 0)
+      return void 0;
+    const points = [];
+    for (let i = 0; i < pathEl.children.length; i++) {
+      const cmd = pathEl.children[i];
+      const localName = cmd.localName;
+      if (localName === "moveTo" || localName === "lnTo") {
+        const pt = findChild2(cmd, "pt");
+        if (pt) {
+          const x = parseInt(pt.getAttribute("x") ?? "0", 10);
+          const y = parseInt(pt.getAttribute("y") ?? "0", 10);
+          points.push({ x, y });
+        }
+      } else if (localName === "close") {
+      } else {
+        return void 0;
+      }
+    }
+    if (points.length < 3)
+      return void 0;
+    const polygonPoints = points.map((p) => {
+      const xPct = Math.round(p.x / pathW * 1e4) / 100;
+      const yPct = Math.round(p.y / pathH * 1e4) / 100;
+      return `${xPct}% ${yPct}%`;
+    }).join(", ");
+    return `polygon(${polygonPoints})`;
+  }
+  function parseDecorativeShapes(spTree, scale, themeColors, imageMap, themeFonts) {
+    const elements = [];
+    for (let i = 0; i < spTree.children.length; i++) {
+      const child = spTree.children[i];
+      if (child.localName === "sp") {
+        const nvSpPr = findChild2(child, "nvSpPr");
+        if (nvSpPr) {
+          const phEl = findChild2(findChild2(nvSpPr, "nvPr") ?? nvSpPr, "ph");
+          if (phEl)
+            continue;
+        }
+        const spPr = findChild2(child, "spPr");
+        if (spPr) {
+          const custGeom = findChild2(spPr, "custGeom");
+          if (custGeom) {
+            const clipPath = extractCustGeomClipPath(custGeom);
+            if (!clipPath)
+              continue;
+            const shape2 = parseShape(child, scale, themeColors, themeFonts);
+            if (shape2) {
+              shape2.clipPath = clipPath;
+              elements.push({ kind: "shape", data: shape2 });
+            }
+            continue;
+          }
+        }
+        const shape = parseShape(child, scale, themeColors, themeFonts);
+        if (shape)
+          elements.push({ kind: "shape", data: shape });
+      } else if (child.localName === "pic") {
+        const img = parsePicture(child, scale, imageMap);
+        if (img)
+          elements.push({ kind: "image", data: img });
+      } else if (child.localName === "grpSp") {
+        const grpElements = parseGroupShape(child, scale, themeColors, imageMap, themeFonts);
+        elements.push(...grpElements);
+      }
+    }
+    return elements;
+  }
+  function parseGroupShape(grpSp, scale, themeColors, imageMap, themeFonts) {
+    const elements = [];
+    for (let i = 0; i < grpSp.children.length; i++) {
+      const child = grpSp.children[i];
+      if (child.localName === "sp") {
+        const nvSpPr = findChild2(child, "nvSpPr");
+        if (nvSpPr) {
+          const phEl = findChild2(findChild2(nvSpPr, "nvPr") ?? nvSpPr, "ph");
+          if (phEl)
+            continue;
+        }
+        const spPr = findChild2(child, "spPr");
+        if (spPr) {
+          const custGeom = findChild2(spPr, "custGeom");
+          if (custGeom) {
+            const clipPath = extractCustGeomClipPath(custGeom);
+            if (!clipPath)
+              continue;
+            const shape2 = parseShape(child, scale, themeColors, themeFonts);
+            if (shape2) {
+              shape2.clipPath = clipPath;
+              elements.push({ kind: "shape", data: shape2 });
+            }
+            continue;
+          }
+        }
+        const shape = parseShape(child, scale, themeColors, themeFonts);
+        if (shape)
+          elements.push({ kind: "shape", data: shape });
+      } else if (child.localName === "pic") {
+        const img = parsePicture(child, scale, imageMap);
+        if (img)
+          elements.push({ kind: "image", data: img });
+      } else if (child.localName === "grpSp") {
+        const nested = parseGroupShape(child, scale, themeColors, imageMap, themeFonts);
+        elements.push(...nested);
+      }
+    }
+    return elements;
+  }
   function extractRunProps(rPr, scale, themeColors, themeFonts) {
     if (!rPr)
       return {};
@@ -67932,6 +68196,9 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
     const i = rPr.getAttribute("i");
     if (i === "1" || i === "true")
       result.italic = true;
+    const u = rPr.getAttribute("u");
+    if (u && u !== "none")
+      result.underline = true;
     const solidFill = findChild2(rPr, "solidFill");
     if (solidFill) {
       const color = resolveColor2(solidFill, themeColors);
@@ -68038,14 +68305,33 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
       return null;
     const wEmu = parseInt(ext.getAttribute("cx") ?? "0", 10);
     const hEmu = parseInt(ext.getAttribute("cy") ?? "0", 10);
+    let fill = extractFill(spPr, themeColors);
+    if (!fill && !findChild2(spPr, "noFill")) {
+      const styleEl = findChild2(sp, "style");
+      if (styleEl) {
+        const fillRef = findChild2(styleEl, "fillRef");
+        if (fillRef) {
+          const fillIdx = parseInt(fillRef.getAttribute("idx") ?? "0", 10);
+          if (fillIdx > 0) {
+            fill = resolveColor2(fillRef, themeColors) ?? void 0;
+          }
+        }
+      }
+    }
     const shape = {
       x: Math.round(emuToPx2(parseInt(off.getAttribute("x") ?? "0", 10)) * scale),
       y: Math.round(emuToPx2(parseInt(off.getAttribute("y") ?? "0", 10)) * scale),
       w: Math.round(emuToPx2(wEmu) * scale),
       h: Math.round(emuToPx2(hEmu) * scale),
-      fill: extractFill(spPr, themeColors),
+      fill,
       paragraphs: []
     };
+    const rotAttr = xfrm.getAttribute("rot");
+    if (rotAttr) {
+      const rotDeg = parseInt(rotAttr, 10) / 6e4;
+      if (rotDeg !== 0)
+        shape.rotation = rotDeg;
+    }
     const prstGeom = findChild2(spPr, "prstGeom");
     const prstType = prstGeom?.getAttribute("prst");
     if (prstType === "roundRect" && prstGeom) {
@@ -68057,6 +68343,10 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
       shape.borderRadius = Math.round(emuToPx2(radiusEmu) * scale);
     } else if (prstType === "ellipse") {
       shape.isEllipse = true;
+    } else if (prstType === "rtTriangle") {
+      shape.clipPath = "polygon(0 0, 0 100%, 100% 100%)";
+    } else if (prstType === "triangle" || prstType === "isoTriangle") {
+      shape.clipPath = "polygon(50% 0, 0 100%, 100% 100%)";
     }
     const ln = findChild2(spPr, "ln");
     if (ln) {
@@ -68151,6 +68441,10 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
           if (buChar) {
             para.bulletChar = buChar.getAttribute("char") ?? void 0;
           }
+          const buFont = findChild2(pPr, "buFont");
+          if (buFont) {
+            para.bulletFont = buFont.getAttribute("typeface") ?? void 0;
+          }
           const buClr = findChild2(pPr, "buClr");
           if (buClr) {
             para.bulletColor = resolveColor2(buClr, themeColors);
@@ -68171,6 +68465,7 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
                 text,
                 bold: props.bold ?? defaults?.bold,
                 italic: props.italic ?? defaults?.italic,
+                underline: props.underline ?? defaults?.underline,
                 fontSize: props.fontSize ?? defaults?.fontSize,
                 color: props.color ?? defaults?.color,
                 fontFamily: props.fontFamily ?? defaults?.fontFamily,
@@ -68241,12 +68536,16 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
     const alt = cNvPr?.getAttribute("descr") ?? void 0;
     const srcRect = findChild2(blipFill, "srcRect");
     let hasCrop = false;
+    let cropLeft = 0;
+    let cropTop = 0;
+    let cropRight = 0;
+    let cropBottom = 0;
     if (srcRect) {
-      const l = parseInt(srcRect.getAttribute("l") ?? "0", 10);
-      const r = parseInt(srcRect.getAttribute("r") ?? "0", 10);
-      const t = parseInt(srcRect.getAttribute("t") ?? "0", 10);
-      const b = parseInt(srcRect.getAttribute("b") ?? "0", 10);
-      hasCrop = l > 0 || r > 0 || t > 0 || b > 0;
+      cropLeft = parseInt(srcRect.getAttribute("l") ?? "0", 10) / 1e3;
+      cropRight = parseInt(srcRect.getAttribute("r") ?? "0", 10) / 1e3;
+      cropTop = parseInt(srcRect.getAttribute("t") ?? "0", 10) / 1e3;
+      cropBottom = parseInt(srcRect.getAttribute("b") ?? "0", 10) / 1e3;
+      hasCrop = cropLeft > 0 || cropRight > 0 || cropTop > 0 || cropBottom > 0;
     }
     let borderRadius;
     const prstGeom = findChild2(spPr, "prstGeom");
@@ -68260,6 +68559,13 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
       const radiusEmu = minDim * Math.min(adjVal, 5e4) / 1e5;
       borderRadius = Math.round(emuToPx2(radiusEmu) * scale);
     }
+    let rotation;
+    const rotAttr = xfrm.getAttribute("rot");
+    if (rotAttr) {
+      const rotDeg = parseInt(rotAttr, 10) / 6e4;
+      if (rotDeg !== 0)
+        rotation = rotDeg;
+    }
     return {
       x: Math.round(emuToPx2(parseInt(off.getAttribute("x") ?? "0", 10)) * scale),
       y: Math.round(emuToPx2(parseInt(off.getAttribute("y") ?? "0", 10)) * scale),
@@ -68268,7 +68574,12 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
       dataUri,
       alt,
       borderRadius,
-      hasCrop
+      hasCrop,
+      cropLeft: hasCrop ? cropLeft : void 0,
+      cropTop: hasCrop ? cropTop : void 0,
+      cropRight: hasCrop ? cropRight : void 0,
+      cropBottom: hasCrop ? cropBottom : void 0,
+      rotation
     };
   }
   async function parseTableStyles(zip, parser, themeColors) {
@@ -68396,6 +68707,10 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
         if (buChar) {
           para.bulletChar = buChar.getAttribute("char") ?? void 0;
         }
+        const buFont = findChild2(pPr, "buFont");
+        if (buFont) {
+          para.bulletFont = buFont.getAttribute("typeface") ?? void 0;
+        }
         const buClr = findChild2(pPr, "buClr");
         if (buClr) {
           para.bulletColor = resolveColor2(buClr, themeColors);
@@ -68416,6 +68731,7 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
               text,
               bold: props.bold ?? defaults?.bold,
               italic: props.italic ?? defaults?.italic,
+              underline: props.underline ?? defaults?.underline,
               fontSize: props.fontSize ?? defaults?.fontSize,
               color: props.color ?? defaults?.color,
               fontFamily: props.fontFamily ?? defaults?.fontFamily,
@@ -68573,15 +68889,523 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
     }
     return table;
   }
-  function renderSlideHtml(elements, bgColor) {
+  function resolveChartColor(parent, themeColors) {
+    const solidFill = findChild2(parent, "solidFill");
+    if (!solidFill)
+      return void 0;
+    return resolveColor2(solidFill, themeColors);
+  }
+  function parseChartRichText(richEl) {
+    const paragraphs = findChildren2(richEl, "p");
+    let text = "";
+    let font;
+    let color;
+    let size;
+    for (const p of paragraphs) {
+      const runs = findChildren2(p, "r");
+      for (const r of runs) {
+        const tEl = findChild2(r, "t");
+        if (tEl?.textContent)
+          text += tEl.textContent;
+        if (font === void 0) {
+          const rPr = findChild2(r, "rPr");
+          if (rPr) {
+            const szAttr = rPr.getAttribute("sz");
+            if (szAttr)
+              size = hptToPx(parseInt(szAttr, 10));
+            const latin = findChild2(rPr, "latin");
+            if (latin)
+              font = latin.getAttribute("typeface") ?? void 0;
+            const fill = findChild2(rPr, "solidFill");
+            if (fill) {
+              const srgb = findChild2(fill, "srgbClr");
+              if (srgb)
+                color = "#" + (srgb.getAttribute("val") ?? "000000");
+            }
+          }
+        }
+      }
+    }
+    return { text, font, color, size };
+  }
+  function parseChartAxis(axEl, themeColors) {
+    const axis = {
+      position: "b"
+    };
+    const axPos = findChild2(axEl, "axPos");
+    if (axPos) {
+      const val = axPos.getAttribute("val");
+      if (val === "b" || val === "l" || val === "r" || val === "t") {
+        axis.position = val;
+      }
+    }
+    const titleEl = findChild2(axEl, "title");
+    if (titleEl) {
+      const tx = findChild2(titleEl, "tx");
+      if (tx) {
+        const rich = findChild2(tx, "rich");
+        if (rich) {
+          const parsed = parseChartRichText(rich);
+          axis.title = parsed.text;
+        }
+      }
+    }
+    const numFmt = findChild2(axEl, "numFmt");
+    if (numFmt) {
+      const fmt = numFmt.getAttribute("formatCode");
+      if (fmt)
+        axis.numFormat = fmt;
+    }
+    const txPr = findChild2(axEl, "txPr");
+    if (txPr) {
+      const pEls = findChildren2(txPr, "p");
+      for (const p of pEls) {
+        const pPr = findChild2(p, "pPr");
+        if (pPr) {
+          const defRPr = findChild2(pPr, "defRPr");
+          if (defRPr) {
+            const szAttr = defRPr.getAttribute("sz");
+            if (szAttr)
+              axis.labelSize = hptToPx(parseInt(szAttr, 10));
+            const latin = findChild2(defRPr, "latin");
+            if (latin)
+              axis.labelFont = latin.getAttribute("typeface") ?? void 0;
+            const fill = findChild2(defRPr, "solidFill");
+            if (fill) {
+              const srgb = findChild2(fill, "srgbClr");
+              if (srgb)
+                axis.labelColor = "#" + (srgb.getAttribute("val") ?? "000000");
+            }
+          }
+        }
+      }
+    }
+    const gridlines = findChild2(axEl, "majorGridlines");
+    if (gridlines) {
+      const spPr = findChild2(gridlines, "spPr");
+      if (spPr) {
+        const ln = findChild2(spPr, "ln");
+        if (ln) {
+          const fill = findChild2(ln, "solidFill");
+          if (fill) {
+            const srgb = findChild2(fill, "srgbClr");
+            if (srgb) {
+              axis.gridlineColor = "#" + (srgb.getAttribute("val") ?? "CCCCCC");
+              const alphaEl = findChild2(srgb, "alpha");
+              if (alphaEl) {
+                axis.gridlineAlpha = parseInt(alphaEl.getAttribute("val") ?? "100000", 10) / 1e3;
+              }
+            }
+          }
+        }
+      }
+    }
+    const scaling = findChild2(axEl, "scaling");
+    if (scaling) {
+      const minEl = findChild2(scaling, "min");
+      if (minEl) {
+        const val = minEl.getAttribute("val");
+        if (val)
+          axis.min = parseFloat(val);
+      }
+    }
+    return axis;
+  }
+  async function parseChart(graphicFrame, scale, themeColors, zip, slideRelsDoc, parser) {
+    const xfrm = findChild2(graphicFrame, "xfrm");
+    if (!xfrm)
+      return null;
+    const off = findChild2(xfrm, "off");
+    const ext = findChild2(xfrm, "ext");
+    if (!off || !ext)
+      return null;
+    const graphic = findChild2(graphicFrame, "graphic");
+    if (!graphic)
+      return null;
+    const graphicData = findChild2(graphic, "graphicData");
+    if (!graphicData)
+      return null;
+    const uri2 = graphicData.getAttribute("uri") ?? "";
+    if (!uri2.includes("chart"))
+      return null;
+    let chartRId;
+    for (let i = 0; i < graphicData.children.length; i++) {
+      const child = graphicData.children[i];
+      if (child.localName === "chart") {
+        chartRId = child.getAttribute("r:id") ?? child.getAttributeNS("http://schemas.openxmlformats.org/officeDocument/2006/relationships", "id") ?? void 0;
+        break;
+      }
+    }
+    if (!chartRId)
+      return null;
+    let chartTarget;
+    const rels = slideRelsDoc.getElementsByTagName("Relationship");
+    for (let ri = 0; ri < rels.length; ri++) {
+      const rel = rels[ri];
+      if (rel.getAttribute("Id") === chartRId) {
+        chartTarget = rel.getAttribute("Target") ?? void 0;
+        break;
+      }
+    }
+    if (!chartTarget)
+      return null;
+    const chartPath = chartTarget.startsWith("../") ? "ppt/" + chartTarget.slice(3) : chartTarget;
+    const chartXml = await zip.file(chartPath)?.async("text");
+    if (!chartXml)
+      return null;
+    const chartDoc = parser.parseFromString(chartXml, "application/xml");
+    const chartSpace = chartDoc.documentElement;
+    const x = Math.round(emuToPx2(parseInt(off.getAttribute("x") ?? "0", 10)) * scale);
+    const y = Math.round(emuToPx2(parseInt(off.getAttribute("y") ?? "0", 10)) * scale);
+    const w = Math.round(emuToPx2(parseInt(ext.getAttribute("cx") ?? "0", 10)) * scale);
+    const h = Math.round(emuToPx2(parseInt(ext.getAttribute("cy") ?? "0", 10)) * scale);
+    const chartEl = findChild2(chartSpace, "chart");
+    if (!chartEl)
+      return null;
+    let title;
+    let titleFont;
+    let titleColor;
+    let titleSize;
+    const titleEl = findChild2(chartEl, "title");
+    if (titleEl) {
+      const tx = findChild2(titleEl, "tx");
+      if (tx) {
+        const rich = findChild2(tx, "rich");
+        if (rich) {
+          const parsed = parseChartRichText(rich);
+          title = parsed.text;
+          titleFont = parsed.font;
+          titleColor = parsed.color;
+          titleSize = parsed.size;
+        }
+      }
+    }
+    const plotArea = findChild2(chartEl, "plotArea");
+    if (!plotArea)
+      return null;
+    const barChart = findChild2(plotArea, "barChart");
+    if (!barChart)
+      return null;
+    const barDirEl = findChild2(barChart, "barDir");
+    const barDir = barDirEl?.getAttribute("val") ?? "col";
+    const chartType = barDir === "bar" ? "bar" : "column";
+    const gapWidthEl = findChild2(barChart, "gapWidth");
+    const gapWidth = gapWidthEl ? parseInt(gapWidthEl.getAttribute("val") ?? "150", 10) : 150;
+    const roundedCornersEl = findChild2(chartSpace, "roundedCorners");
+    const roundedCorners = roundedCornersEl?.getAttribute("val") === "1";
+    const series = [];
+    const serEls = findChildren2(barChart, "ser");
+    for (const ser of serEls) {
+      const seriesData = {
+        categories: [],
+        values: [],
+        fillColors: []
+      };
+      const txEl = findChild2(ser, "tx");
+      if (txEl) {
+        const strRef = findChild2(txEl, "strRef");
+        if (strRef) {
+          const strCache = findChild2(strRef, "strCache");
+          if (strCache) {
+            const pt = findChild2(strCache, "pt");
+            if (pt) {
+              const v = findChild2(pt, "v");
+              if (v?.textContent)
+                seriesData.name = v.textContent;
+            }
+          }
+        }
+      }
+      const serSpPr = findChild2(ser, "spPr");
+      if (serSpPr) {
+        const color = resolveChartColor(serSpPr, themeColors);
+        if (color)
+          seriesData.seriesColor = color;
+      }
+      const dPtMap = /* @__PURE__ */ new Map();
+      const dPtEls = findChildren2(ser, "dPt");
+      for (const dPt of dPtEls) {
+        const idxEl = findChild2(dPt, "idx");
+        const idx = idxEl ? parseInt(idxEl.getAttribute("val") ?? "0", 10) : 0;
+        const spPr = findChild2(dPt, "spPr");
+        if (spPr) {
+          const color = resolveChartColor(spPr, themeColors);
+          if (color)
+            dPtMap.set(idx, color);
+        }
+      }
+      const catEl = findChild2(ser, "cat");
+      if (catEl) {
+        const strRef = findChild2(catEl, "strRef");
+        if (strRef) {
+          const strCache = findChild2(strRef, "strCache");
+          if (strCache) {
+            const pts = findChildren2(strCache, "pt");
+            for (const pt of pts) {
+              const v = findChild2(pt, "v");
+              seriesData.categories.push(v?.textContent ?? "");
+            }
+          }
+        }
+      }
+      const valEl = findChild2(ser, "val");
+      if (valEl) {
+        const numRef = findChild2(valEl, "numRef");
+        if (numRef) {
+          const numCache = findChild2(numRef, "numCache");
+          if (numCache) {
+            const pts = findChildren2(numCache, "pt");
+            for (const pt of pts) {
+              const v = findChild2(pt, "v");
+              seriesData.values.push(parseFloat(v?.textContent ?? "0"));
+            }
+          }
+        }
+      }
+      for (let i = 0; i < seriesData.values.length; i++) {
+        seriesData.fillColors.push(dPtMap.get(i) ?? void 0);
+      }
+      series.push(seriesData);
+    }
+    if (series.length === 0)
+      return null;
+    let categoryAxis;
+    let valueAxis;
+    const catAx = findChild2(plotArea, "catAx");
+    if (catAx) {
+      categoryAxis = parseChartAxis(catAx, themeColors);
+    }
+    const valAx = findChild2(plotArea, "valAx");
+    if (valAx) {
+      valueAxis = parseChartAxis(valAx, themeColors);
+    }
+    return {
+      x,
+      y,
+      w,
+      h,
+      chartType,
+      title,
+      titleFont,
+      titleColor,
+      titleSize,
+      series,
+      categoryAxis,
+      valueAxis,
+      gapWidth,
+      roundedCorners
+    };
+  }
+  function formatChartValue(value, numFormat) {
+    if (!numFormat || numFormat === "General") {
+      return Number.isInteger(value) ? value.toString() : value.toFixed(1);
+    }
+    let prefix = "";
+    let suffix = "";
+    let fmt = numFormat;
+    const prefixMatch = fmt.match(/^"([^"]*)"(.*)$/);
+    if (prefixMatch) {
+      prefix = prefixMatch[1];
+      fmt = prefixMatch[2];
+    }
+    const suffixMatch = fmt.match(/^(.*)"([^"]*)"$/);
+    if (suffixMatch) {
+      fmt = suffixMatch[1];
+      suffix = suffixMatch[2];
+    }
+    const decimalMatch = fmt.match(/\.(0+)/);
+    const decimals = decimalMatch ? decimalMatch[1].length : 0;
+    const absVal = Math.abs(value);
+    let formatted;
+    if (fmt.includes(",")) {
+      const parts = absVal.toFixed(decimals).split(".");
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      formatted = parts.join(".");
+    } else {
+      formatted = absVal.toFixed(decimals);
+    }
+    const sign2 = value < 0 ? "-" : "";
+    return sign2 + prefix + formatted + suffix;
+  }
+  function escSvg(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  function renderChartSvg(chart, elId) {
+    const { x, y, w, h } = chart;
+    const titleHeight = chart.title ? Math.max(24, (chart.titleSize ?? 16) + 12) : 0;
+    const axisLabelHeight = 16;
+    const axisTitleHeight = chart.categoryAxis?.title ? 18 : 0;
+    const valAxisTitleWidth = chart.valueAxis?.title ? 20 : 0;
+    const allValues = chart.series.flatMap((s) => s.values);
+    const maxValue = Math.max(...allValues, 0);
+    const valNumFormat = chart.valueAxis?.numFormat;
+    const maxFormattedLabel = formatChartValue(maxValue, valNumFormat);
+    const valLabelCharWidth = (chart.valueAxis?.labelSize ?? 11) * 0.6;
+    const valLabelWidth = Math.max(30, maxFormattedLabel.length * valLabelCharWidth + 8);
+    const marginTop = 8 + titleHeight;
+    const marginBottom = 8 + axisLabelHeight + axisTitleHeight + 4;
+    const marginLeft = 4 + valAxisTitleWidth + valLabelWidth;
+    const marginRight = 12;
+    const plotX = marginLeft;
+    const plotY = marginTop;
+    const plotW = w - marginLeft - marginRight;
+    const plotH = h - marginTop - marginBottom;
+    if (plotW <= 0 || plotH <= 0)
+      return "";
+    const minValue = chart.valueAxis?.min ?? 0;
+    const valueRange = maxValue - minValue;
+    if (valueRange <= 0)
+      return "";
+    const rawInterval = valueRange / 5;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(rawInterval)));
+    const normalized = rawInterval / magnitude;
+    let niceInterval;
+    if (normalized <= 1)
+      niceInterval = 1 * magnitude;
+    else if (normalized <= 2)
+      niceInterval = 2 * magnitude;
+    else if (normalized <= 5)
+      niceInterval = 5 * magnitude;
+    else
+      niceInterval = 10 * magnitude;
+    const ticks = [];
+    let tickVal = Math.ceil(minValue / niceInterval) * niceInterval;
+    while (tickVal <= maxValue) {
+      ticks.push(tickVal);
+      tickVal += niceInterval;
+    }
+    if (minValue <= 0 && !ticks.includes(0)) {
+      ticks.unshift(0);
+      ticks.sort((a, b) => a - b);
+    }
+    const labelFont = chart.categoryAxis?.labelFont ?? chart.titleFont ?? "sans-serif";
+    const labelColor = chart.categoryAxis?.labelColor ?? "#333";
+    const labelSize = chart.categoryAxis?.labelSize ?? 11;
+    const valLabelColor = chart.valueAxis?.labelColor ?? labelColor;
+    const valLabelSize = chart.valueAxis?.labelSize ?? 11;
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" style="overflow:visible">`;
+    if (chart.title) {
+      const tFont = chart.titleFont ? `font-family:${cssFontFamily(chart.titleFont)};` : `font-family:${cssFontFamily(labelFont)};`;
+      const tColor = chart.titleColor ?? "#000";
+      const tSize = chart.titleSize ?? 16;
+      svg += `<text x="${w / 2}" y="${8 + tSize}" text-anchor="middle" style="${tFont}font-size:${tSize}px;font-weight:bold;fill:${tColor}">${escSvg(chart.title)}</text>`;
+    }
+    if (chart.valueAxis) {
+      const gColor = chart.valueAxis.gridlineColor ?? "#e0e0e0";
+      const gAlpha = chart.valueAxis.gridlineAlpha !== void 0 ? chart.valueAxis.gridlineAlpha / 100 : 0.3;
+      for (const tick of ticks) {
+        const tickY = plotY + plotH - (tick - minValue) / valueRange * plotH;
+        svg += `<line x1="${plotX}" y1="${tickY}" x2="${plotX + plotW}" y2="${tickY}" stroke="${gColor}" stroke-opacity="${gAlpha}" stroke-width="1"/>`;
+      }
+    }
+    const numCategories = chart.series[0]?.categories.length ?? 0;
+    const numSeries = chart.series.length;
+    if (numCategories > 0) {
+      const gapFraction = (chart.gapWidth ?? 150) / 100;
+      const categoryWidth = plotW / numCategories;
+      const barGroupWidth = categoryWidth / (1 + gapFraction);
+      const gapSpace = categoryWidth - barGroupWidth;
+      const barWidth = barGroupWidth / numSeries;
+      const cornerRadius = chart.roundedCorners ? Math.min(barWidth * 0.15, 4) : 0;
+      for (let si = 0; si < numSeries; si++) {
+        const s = chart.series[si];
+        for (let ci = 0; ci < s.values.length; ci++) {
+          const val = s.values[ci];
+          const barH = (val - minValue) / valueRange * plotH;
+          const barX = plotX + ci * categoryWidth + gapSpace / 2 + si * barWidth;
+          const barY = plotY + plotH - barH;
+          const fillColor = s.fillColors[ci] ?? s.seriesColor ?? "#4472C4";
+          if (cornerRadius > 0) {
+            const r = Math.min(cornerRadius, barH / 2, barWidth / 2);
+            svg += `<path d="M${barX},${barY + barH} L${barX},${barY + r} Q${barX},${barY} ${barX + r},${barY} L${barX + barWidth - r},${barY} Q${barX + barWidth},${barY} ${barX + barWidth},${barY + r} L${barX + barWidth},${barY + barH} Z" fill="${fillColor}"/>`;
+          } else {
+            svg += `<rect x="${barX}" y="${barY}" width="${barWidth}" height="${barH}" fill="${fillColor}"/>`;
+          }
+        }
+      }
+    }
+    svg += `<line x1="${plotX}" y1="${plotY + plotH}" x2="${plotX + plotW}" y2="${plotY + plotH}" stroke="${labelColor}" stroke-width="1"/>`;
+    svg += `<line x1="${plotX}" y1="${plotY}" x2="${plotX}" y2="${plotY + plotH}" stroke="${valLabelColor}" stroke-width="1"/>`;
+    if (numCategories > 0) {
+      const categoryWidth = plotW / numCategories;
+      const cats = chart.series[0]?.categories ?? [];
+      for (let ci = 0; ci < cats.length; ci++) {
+        const labelX = plotX + ci * categoryWidth + categoryWidth / 2;
+        const labelY = plotY + plotH + 4;
+        const catText = cats[ci];
+        const lines = catText.split("\n");
+        const lineH = labelSize + 2;
+        for (let li = 0; li < lines.length; li++) {
+          svg += `<text x="${labelX}" y="${labelY + labelSize + li * lineH}" text-anchor="middle" style="font-family:${cssFontFamily(labelFont)};font-size:${labelSize}px;fill:${labelColor}">${escSvg(lines[li])}</text>`;
+        }
+      }
+    }
+    for (const tick of ticks) {
+      const tickY = plotY + plotH - (tick - minValue) / valueRange * plotH;
+      const label = formatChartValue(tick, valNumFormat);
+      svg += `<text x="${plotX - 6}" y="${tickY + valLabelSize * 0.35}" text-anchor="end" style="font-family:${cssFontFamily(labelFont)};font-size:${valLabelSize}px;fill:${valLabelColor}">${escSvg(label)}</text>`;
+    }
+    if (chart.categoryAxis?.title) {
+      const axTitleY = plotY + plotH + axisLabelHeight + axisTitleHeight + 2;
+      svg += `<text x="${plotX + plotW / 2}" y="${axTitleY}" text-anchor="middle" style="font-family:${cssFontFamily(labelFont)};font-size:${labelSize}px;fill:${labelColor}">${escSvg(chart.categoryAxis.title)}</text>`;
+    }
+    if (chart.valueAxis?.title) {
+      const axTitleX = 4 + (chart.titleSize ?? 12) * 0.5;
+      const axTitleY = plotY + plotH / 2;
+      svg += `<text x="${axTitleX}" y="${axTitleY}" text-anchor="middle" transform="rotate(-90, ${axTitleX}, ${axTitleY})" style="font-family:${cssFontFamily(labelFont)};font-size:${labelSize}px;fill:${valLabelColor}">${escSvg(chart.valueAxis.title)}</text>`;
+    }
+    svg += `</svg>`;
+    const wrapperStyles = [
+      "position:absolute",
+      `left:${x}px`,
+      `top:${y}px`,
+      `width:${w}px`,
+      `height:${h}px`
+    ];
+    return `<div id="${elId}" data-elementType="chart" style="${wrapperStyles.join(";")}">${svg}</div>
+`;
+  }
+  function renderSlideHtml(elements, bgColor, contentOffsetX = 0) {
     let inner = "";
     let elementIndex = 0;
     for (const el of elements) {
       const elId = `el-${elementIndex++}`;
       if (el.kind === "image") {
         const img = el.data;
+        const altAttr = img.alt ? ` alt="${img.alt.replace(/"/g, "&quot;")}"` : "";
         const isFullbleed = img.x <= 10 && img.y <= 10 && img.w >= TARGET_WIDTH - 20 && img.h >= TARGET_HEIGHT - 20;
-        const objectFit = isFullbleed || img.hasCrop ? "cover" : "contain";
+        if (img.hasCrop && img.cropLeft !== void 0 && img.cropTop !== void 0 && img.cropRight !== void 0 && img.cropBottom !== void 0) {
+          const visW = (100 - img.cropLeft - img.cropRight) / 100;
+          const visH = (100 - img.cropTop - img.cropBottom) / 100;
+          if (visW > 0 && visH > 0) {
+            const displayW = img.w / visW;
+            const displayH = img.h / visH;
+            const offsetX = -(img.cropLeft / 100) * displayW;
+            const offsetY = -(img.cropTop / 100) * displayH;
+            const wrapperStyles = [
+              "position:absolute",
+              `left:${img.x}px`,
+              `top:${img.y}px`,
+              `width:${img.w}px`,
+              `height:${img.h}px`,
+              "overflow:hidden"
+            ];
+            if (img.rotation) {
+              wrapperStyles.push(`transform:rotate(${img.rotation}deg)`);
+              wrapperStyles.push("transform-origin:center center");
+            }
+            if (img.borderRadius && img.borderRadius > 0) {
+              wrapperStyles.push(`border-radius:${img.borderRadius}px`);
+            }
+            const imgStyle = `position:absolute;width:${Math.round(displayW)}px;height:${Math.round(displayH)}px;left:${Math.round(offsetX)}px;top:${Math.round(offsetY)}px`;
+            inner += `<div id="${elId}" data-elementType="image" style="${wrapperStyles.join(";")}">`;
+            inner += `<img src="${img.dataUri}"${altAttr} style="${imgStyle}" />`;
+            inner += `</div>
+`;
+            continue;
+          }
+        }
+        const objectFit = isFullbleed ? "cover" : "contain";
         const stylesList = [
           "position:absolute",
           `left:${img.x}px`,
@@ -68590,11 +69414,14 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
           `height:${img.h}px`,
           `object-fit:${objectFit}`
         ];
+        if (img.rotation) {
+          stylesList.push(`transform:rotate(${img.rotation}deg)`);
+          stylesList.push("transform-origin:center center");
+        }
         if (img.borderRadius && img.borderRadius > 0) {
           stylesList.push(`border-radius:${img.borderRadius}px`);
         }
         const styles2 = stylesList.join(";");
-        const altAttr = img.alt ? ` alt="${img.alt.replace(/"/g, "&quot;")}"` : "";
         inner += `<img id="${elId}" data-elementType="image" src="${img.dataUri}"${altAttr} style="${styles2}" />
 `;
         continue;
@@ -68683,6 +69510,8 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
                   rStyles.push("font-weight:bold");
                 if (run.italic)
                   rStyles.push("font-style:italic");
+                if (run.underline)
+                  rStyles.push("text-decoration:underline");
                 if (run.fontFamily)
                   rStyles.push(`font-family:${cssFontFamily(run.fontFamily)}`);
                 if (run.textShadow)
@@ -68705,6 +69534,11 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
 `;
         continue;
       }
+      if (el.kind === "chart") {
+        const chart = el.data;
+        inner += renderChartSvg(chart, elId);
+        continue;
+      }
       const shape = el.data;
       const styles = [
         "position:absolute",
@@ -68717,6 +69551,12 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
       if (shape.fill) {
         styles.push(`background:${shape.fill}`);
       }
+      if (shape.clipPath) {
+        styles.push(`clip-path:${shape.clipPath}`);
+      }
+      if (shape.rotation) {
+        styles.push(`transform:rotate(${shape.rotation}deg)`);
+      }
       if (shape.borderRadius) {
         styles.push(`border-radius:${shape.borderRadius}px`);
       } else if (shape.isEllipse) {
@@ -68750,7 +69590,10 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
         else if (shape.verticalAlign === "bottom")
           styles.push("justify-content:flex-end");
       }
-      if (shape.paragraphs.length === 0 && !shape.fill) {
+      if (shape.w <= 0 || shape.h <= 0) {
+        continue;
+      }
+      if (shape.paragraphs.length === 0 && !shape.fill && !shape.borderWidth && !shape.isEllipse) {
         continue;
       }
       const hasText = shape.paragraphs.length > 0;
@@ -68772,8 +69615,15 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
           pStyles.push(`text-indent:${para.indentPx}px`);
         let runHtml = "";
         if (para.bulletChar) {
-          const bulletStyle = para.bulletColor ? `margin-right:4px;color:${para.bulletColor}` : "margin-right:4px";
-          runHtml += `<span style="${bulletStyle}">${para.bulletChar}</span>`;
+          const bulletStyleParts = ["margin-right:4px"];
+          if (para.bulletColor)
+            bulletStyleParts.push(`color:${para.bulletColor}`);
+          if (para.bulletFont)
+            bulletStyleParts.push(`font-family:${cssFontFamily(para.bulletFont)}`);
+          const firstRunFontSize = para.runs[0]?.fontSize;
+          if (firstRunFontSize)
+            bulletStyleParts.push(`font-size:${firstRunFontSize}px`);
+          runHtml += `<span style="${bulletStyleParts.join(";")}">${para.bulletChar}</span>`;
         }
         for (const run of para.runs) {
           const rStyles = [];
@@ -68791,6 +69641,8 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
             rStyles.push("font-weight:bold");
           if (run.italic)
             rStyles.push("font-style:italic");
+          if (run.underline)
+            rStyles.push("text-decoration:underline");
           if (run.fontFamily)
             rStyles.push(`font-family:${cssFontFamily(run.fontFamily)}`);
           if (run.textShadow)
@@ -68808,8 +69660,12 @@ ${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join("\n")}`;
 `;
     }
     const bg = bgColor ?? "#fff";
+    const offsetPx = Math.round(contentOffsetX);
+    const innerWrapStyle = offsetPx > 0 ? ` style="position:absolute;left:${offsetPx}px;top:0"` : "";
     return `<div style="position:relative;width:${TARGET_WIDTH}px;height:${TARGET_HEIGHT}px;overflow:hidden;font-family:'Segoe UI',Arial,sans-serif;background:${bg}">
-${inner}</div>`;
+<div${innerWrapStyle}>
+${inner}</div>
+</div>`;
   }
   async function importPptx(arrayBuffer) {
     const zip = await import_jszip2.default.loadAsync(arrayBuffer);
@@ -68824,6 +69680,8 @@ ${inner}</div>`;
     const slideWPx = emuToPx2(slideWEmu);
     const slideHPx = emuToPx2(slideHEmu);
     const scale = Math.min(TARGET_WIDTH / slideWPx, TARGET_HEIGHT / slideHPx);
+    const scaledContentW = slideWPx * scale;
+    const contentOffsetX = (TARGET_WIDTH - scaledContentW) / 2;
     const sldIdLst = presDoc.getElementsByTagName("p:sldIdLst")[0];
     const visibleSlideRIds = [];
     if (sldIdLst) {
@@ -68872,6 +69730,7 @@ ${inner}</div>`;
     }
     const themeColors = /* @__PURE__ */ new Map();
     const themeXml = await zip.file("ppt/theme/theme1.xml")?.async("text");
+    const bgFillStyles = [];
     if (themeXml) {
       const themeDoc = parser.parseFromString(themeXml, "application/xml");
       const clrScheme = themeDoc.getElementsByTagName("a:clrScheme")[0];
@@ -68917,6 +69776,12 @@ ${inner}</div>`;
       const lt2Color = themeColors.get("lt2");
       if (lt2Color)
         themeColors.set("bg2", lt2Color);
+      const bgFillStyleLst = themeDoc.getElementsByTagName("a:bgFillStyleLst")[0];
+      if (bgFillStyleLst) {
+        for (let i = 0; i < bgFillStyleLst.children.length; i++) {
+          bgFillStyles.push(bgFillStyleLst.children[i]);
+        }
+      }
     }
     let themeFonts;
     if (themeXml) {
@@ -68953,6 +69818,96 @@ ${inner}</div>`;
       fontStyleBlock = `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${fontFamilies}&display=swap">`;
     }
     const slides = [];
+    let masterBg;
+    let masterDecorativeElements = [];
+    const masterXml = await zip.file("ppt/slideMasters/slideMaster1.xml")?.async("text");
+    if (masterXml) {
+      const masterDoc = parser.parseFromString(masterXml, "application/xml");
+      const masterBgEl = masterDoc.getElementsByTagName("p:bg")[0];
+      if (masterBgEl) {
+        masterBg = extractBgFill(masterBgEl, bgFillStyles, themeColors);
+      }
+      const masterImageMap = /* @__PURE__ */ new Map();
+      const masterRelsXml = await zip.file("ppt/slideMasters/_rels/slideMaster1.xml.rels")?.async("text");
+      if (masterRelsXml) {
+        const relsDoc = parser.parseFromString(masterRelsXml, "application/xml");
+        const rels = relsDoc.getElementsByTagName("Relationship");
+        for (let ri = 0; ri < rels.length; ri++) {
+          const rel = rels[ri];
+          const type2 = rel.getAttribute("Type") ?? "";
+          if (!type2.includes("/image"))
+            continue;
+          const rId = rel.getAttribute("Id");
+          const target = rel.getAttribute("Target");
+          if (!rId || !target)
+            continue;
+          const mediaPath = target.startsWith("../") ? "ppt/" + target.slice(3) : target;
+          const imgFile = zip.file(mediaPath);
+          if (!imgFile)
+            continue;
+          const imgData = await imgFile.async("base64");
+          const ext = mediaPath.split(".").pop()?.toLowerCase() ?? "png";
+          const mime = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : ext === "svg" ? "image/svg+xml" : `image/${ext}`;
+          masterImageMap.set(rId, `data:${mime};base64,${imgData}`);
+        }
+      }
+      const masterSpTree = masterDoc.getElementsByTagName("p:spTree")[0];
+      if (masterSpTree) {
+        masterDecorativeElements = parseDecorativeShapes(masterSpTree, scale, themeColors, masterImageMap, themeFonts);
+      }
+    }
+    const layoutCache = /* @__PURE__ */ new Map();
+    async function getLayoutInfo(layoutPath) {
+      if (layoutCache.has(layoutPath))
+        return layoutCache.get(layoutPath);
+      const result = { bg: void 0, showMasterSp: true, decorativeElements: [] };
+      const layoutXml = await zip.file(layoutPath)?.async("text");
+      if (layoutXml) {
+        const layoutDoc = parser.parseFromString(layoutXml, "application/xml");
+        const cSld = layoutDoc.getElementsByTagName("p:cSld")[0];
+        const rootEl = layoutDoc.documentElement;
+        const showMasterSpAttr = rootEl.getAttribute("showMasterSp");
+        if (showMasterSpAttr === "0") {
+          result.showMasterSp = false;
+        }
+        const layoutBgEl = layoutDoc.getElementsByTagName("p:bg")[0];
+        if (layoutBgEl) {
+          result.bg = extractBgFill(layoutBgEl, bgFillStyles, themeColors);
+        }
+        const layoutImageMap = /* @__PURE__ */ new Map();
+        const layoutBaseName = layoutPath.split("/").pop();
+        const layoutRelsPath = layoutPath.replace(layoutBaseName, `_rels/${layoutBaseName}.rels`);
+        const layoutRelsXml = await zip.file(layoutRelsPath)?.async("text");
+        if (layoutRelsXml) {
+          const relsDoc = parser.parseFromString(layoutRelsXml, "application/xml");
+          const rels = relsDoc.getElementsByTagName("Relationship");
+          for (let ri = 0; ri < rels.length; ri++) {
+            const rel = rels[ri];
+            const type2 = rel.getAttribute("Type") ?? "";
+            if (!type2.includes("/image"))
+              continue;
+            const rId = rel.getAttribute("Id");
+            const target = rel.getAttribute("Target");
+            if (!rId || !target)
+              continue;
+            const mediaPath = target.startsWith("../") ? "ppt/" + target.slice(3) : target;
+            const imgFile = zip.file(mediaPath);
+            if (!imgFile)
+              continue;
+            const imgData = await imgFile.async("base64");
+            const ext = mediaPath.split(".").pop()?.toLowerCase() ?? "png";
+            const mime = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : ext === "svg" ? "image/svg+xml" : `image/${ext}`;
+            layoutImageMap.set(rId, `data:${mime};base64,${imgData}`);
+          }
+        }
+        const layoutSpTree = layoutDoc.getElementsByTagName("p:spTree")[0];
+        if (layoutSpTree) {
+          result.decorativeElements = parseDecorativeShapes(layoutSpTree, scale, themeColors, layoutImageMap, themeFonts);
+        }
+      }
+      layoutCache.set(layoutPath, result);
+      return result;
+    }
     for (const slideFile of slideFiles) {
       const slideXml = await zip.file(slideFile)?.async("text");
       if (!slideXml)
@@ -68962,24 +69917,47 @@ ${inner}</div>`;
       let slideBg = void 0;
       const bgEl = slideDoc.getElementsByTagName("p:bg")[0];
       if (bgEl) {
-        const bgPr = findChild2(bgEl, "bgPr");
-        if (bgPr) {
-          slideBg = extractFill(bgPr, themeColors);
-        }
+        slideBg = extractBgFill(bgEl, bgFillStyles, themeColors);
       }
-      if (!spTree) {
-        slides.push(renderSlideHtml([], slideBg));
-        continue;
-      }
-      const imageMap = /* @__PURE__ */ new Map();
       const slideBaseName = slideFile.split("/").pop();
       const relsPath = slideFile.replace(slideBaseName, `_rels/${slideBaseName}.rels`);
       const relsXml = await zip.file(relsPath)?.async("text");
+      let layoutPath;
       if (relsXml) {
         const relsDoc = parser.parseFromString(relsXml, "application/xml");
         const rels = relsDoc.getElementsByTagName("Relationship");
-        for (let i = 0; i < rels.length; i++) {
-          const rel = rels[i];
+        for (let ri = 0; ri < rels.length; ri++) {
+          const rel = rels[ri];
+          const type2 = rel.getAttribute("Type") ?? "";
+          if (type2.includes("/slideLayout")) {
+            const target = rel.getAttribute("Target");
+            if (target) {
+              layoutPath = target.startsWith("../") ? "ppt/" + target.slice(3) : "ppt/slides/" + target;
+            }
+            break;
+          }
+        }
+      }
+      let layoutInfo;
+      if (layoutPath) {
+        layoutInfo = await getLayoutInfo(layoutPath);
+      }
+      if (!slideBg && layoutInfo?.bg) {
+        slideBg = layoutInfo.bg;
+      }
+      if (!slideBg && masterBg) {
+        slideBg = masterBg;
+      }
+      if (!spTree) {
+        slides.push(renderSlideHtml([], slideBg, contentOffsetX));
+        continue;
+      }
+      const imageMap = /* @__PURE__ */ new Map();
+      const slideRelsDoc = relsXml ? parser.parseFromString(relsXml, "application/xml") : null;
+      if (slideRelsDoc) {
+        const rels = slideRelsDoc.getElementsByTagName("Relationship");
+        for (let ri = 0; ri < rels.length; ri++) {
+          const rel = rels[ri];
           const type2 = rel.getAttribute("Type") ?? "";
           if (!type2.includes("/image"))
             continue;
@@ -68998,6 +69976,12 @@ ${inner}</div>`;
         }
       }
       const elements = [];
+      if (layoutInfo?.showMasterSp !== false) {
+        elements.push(...masterDecorativeElements);
+      }
+      if (layoutInfo?.decorativeElements) {
+        elements.push(...layoutInfo.decorativeElements);
+      }
       for (let i = 0; i < spTree.children.length; i++) {
         const child = spTree.children[i];
         if (child.localName === "sp") {
@@ -69010,11 +69994,16 @@ ${inner}</div>`;
             elements.push({ kind: "image", data: img });
         } else if (child.localName === "graphicFrame") {
           const table = parseTable2(child, scale, themeColors, themeFonts, tableStyleMap);
-          if (table)
+          if (table) {
             elements.push({ kind: "table", data: table });
+          } else if (slideRelsDoc) {
+            const chart = await parseChart(child, scale, themeColors, zip, slideRelsDoc, parser);
+            if (chart)
+              elements.push({ kind: "chart", data: chart });
+          }
         }
       }
-      slides.push(renderSlideHtml(elements, slideBg));
+      slides.push(renderSlideHtml(elements, slideBg, contentOffsetX));
     }
     if (fontStyleBlock && slides.length > 0) {
       slides[0] = fontStyleBlock + slides[0];