@json-to-office/core-docx 0.5.0 → 0.7.0

package/dist/plugin/example/index.js

@@ -828,7 +828,7 @@ function convertLineSpacing(lineSpacing) {
   }
   return { line, lineRule };
 }
-var TWIPS_PER_POINT, SINGLE_LINE_SPACING_POINTS, SINGLE_LINE_SPACING_TWIPS, DOUBLE_LINE_SPACING_TWIPS, getBodyTextStyle;
+var TWIPS_PER_POINT, SINGLE_LINE_SPACING_POINTS, SINGLE_LINE_SPACING_TWIPS, DOUBLE_LINE_SPACING_TWIPS;
 var init_styleHelpers = __esm({
   "src/styles/utils/styleHelpers.ts"() {
     "use strict";
@@ -839,22 +839,6 @@ var init_styleHelpers = __esm({
     SINGLE_LINE_SPACING_POINTS = 12;
     SINGLE_LINE_SPACING_TWIPS = SINGLE_LINE_SPACING_POINTS * TWIPS_PER_POINT;
     DOUBLE_LINE_SPACING_TWIPS = SINGLE_LINE_SPACING_TWIPS * 2;
-    getBodyTextStyle = (theme, themeName) => {
-      const themeConfig = resolveTheme(theme, themeName);
-      if (themeConfig) {
-        const normalStyle = getNormalStyle(themeConfig);
-        return {
-          size: (normalStyle.size || 11) * 2,
-          font: resolveFontFamily(themeConfig, normalStyle.font),
-          color: normalStyle.color ? resolveColor(normalStyle.color, themeConfig) : "000000"
-        };
-      }
-      return {
-        size: 20,
-        font: "Arial",
-        color: "000000"
-      };
-    };
   }
 });
 
@@ -1347,7 +1331,8 @@ __export(widthUtils_exports, {
   getPageHeightTwips: () => getPageHeightTwips,
   getPageWidthTwips: () => getPageWidthTwips,
   parsePercentageStringToFraction: () => parsePercentageStringToFraction,
-  relativeLengthToTwips: () => relativeLengthToTwips
+  relativeLengthToTwips: () => relativeLengthToTwips,
+  resolveOffsetTwips: () => resolveOffsetTwips
 });
 function getAvailableWidthTwips(theme, themeName) {
   const page = getPageSetup(theme, themeName);
@@ -1378,6 +1363,17 @@ function parsePercentageStringToFraction(value) {
   if (pct < 0 || pct > 100) return void 0;
   return pct / 100;
 }
+function resolveOffsetTwips(value, referenceTwips) {
+  if (typeof value === "number") return value;
+  const match = /^([0-9]+(?:\.[0-9]+)?)%$/.exec(value);
+  if (!match) {
+    console.warn(
+      `resolveOffsetTwips: invalid percentage string "${value}", defaulting to 0`
+    );
+    return 0;
+  }
+  return Math.round(referenceTwips * parseFloat(match[1]) / 100);
+}
 function relativeLengthToTwips(value, availableWidthTwips) {
   if (typeof value === "number") {
     return pointsToTwips(value);
@@ -1394,240 +1390,6 @@ var init_widthUtils = __esm({
   }
 });
 
-// src/utils/imageUtils.ts
-var imageUtils_exports = {};
-__export(imageUtils_exports, {
-  calculateImageDimensions: () => calculateImageDimensions,
-  calculateMissingDimension: () => calculateMissingDimension,
-  decodeBase64Image: () => decodeBase64Image,
-  detectImageType: () => detectImageType,
-  detectImageTypeFromExtension: () => detectImageTypeFromExtension,
-  detectImageTypeFromMimeType: () => detectImageTypeFromMimeType,
-  downloadImageFromUrl: () => downloadImageFromUrl,
-  extractMimeTypeFromDataUri: () => extractMimeTypeFromDataUri,
-  getImageBuffer: () => getImageBuffer,
-  getImageDimensions: () => getImageDimensions,
-  isBase64Image: () => isBase64Image,
-  isValidUrl: () => isValidUrl,
-  parseDimensionValue: () => parseDimensionValue,
-  parseWidthValue: () => parseWidthValue
-});
-import { readFileSync } from "fs";
-import probe from "probe-image-size";
-function parseWidthValue(width, availableWidthPx) {
-  if (typeof width === "number") {
-    return width;
-  }
-  const percentageMatch = width.match(/^(\d+(?:\.\d+)?)%$/);
-  if (percentageMatch) {
-    const pct = parseFloat(percentageMatch[1]);
-    if (pct < 0 || pct > 100) {
-      throw new Error(
-        `Invalid percentage value: ${width}. Must be between 0% and 100%`
-      );
-    }
-    const fraction = parsePercentageStringToFraction(width);
-    if (fraction !== void 0) {
-      return Math.round(availableWidthPx * fraction);
-    }
-  }
-  throw new Error(
-    `Invalid width value: ${width}. Expected number (pixels) or percentage string (e.g., "90%")`
-  );
-}
-function parseDimensionValue(value, availablePx) {
-  if (typeof value === "number") return value;
-  const percentageMatch = value.match(/^(\d+(?:\.\d+)?)%$/);
-  if (percentageMatch) {
-    const pct = parseFloat(percentageMatch[1]);
-    if (pct < 0 || pct > 100) {
-      throw new Error(
-        `Invalid percentage value: ${value}. Must be between 0% and 100%`
-      );
-    }
-    const fraction = parsePercentageStringToFraction(value);
-    if (fraction !== void 0) return Math.round(availablePx * fraction);
-  }
-  throw new Error(
-    `Invalid dimension value: ${value}. Expected number (pixels) or percentage string (e.g., "90%")`
-  );
-}
-function isValidUrl(string) {
-  try {
-    const url = new URL(string);
-    return url.protocol === "http:" || url.protocol === "https:";
-  } catch {
-    return false;
-  }
-}
-function isBase64Image(string) {
-  return /^data:image\/[a-zA-Z+]+;base64,/.test(string);
-}
-function decodeBase64Image(dataUri) {
-  try {
-    const base64Data = dataUri.split(",")[1];
-    if (!base64Data) {
-      throw new Error("Invalid base64 data URI format");
-    }
-    return Buffer.from(base64Data, "base64");
-  } catch (error) {
-    throw new Error(
-      `Failed to decode base64 image: ${error instanceof Error ? error.message : String(error)}`
-    );
-  }
-}
-function extractMimeTypeFromDataUri(dataUri) {
-  const match = dataUri.match(/^data:(image\/[a-zA-Z0-9+.-]+);base64,/);
-  return match ? match[1] : void 0;
-}
-function detectImageTypeFromExtension(path3) {
-  const extension = path3.toLowerCase().split(".").pop()?.split("?")[0];
-  switch (extension) {
-    case "jpg":
-    case "jpeg":
-      return "jpg";
-    case "png":
-      return "png";
-    case "gif":
-      return "gif";
-    case "bmp":
-      return "bmp";
-    case "svg":
-      return "svg";
-    default:
-      return void 0;
-  }
-}
-function detectImageTypeFromMimeType(mimeType) {
-  const normalized = mimeType.toLowerCase();
-  if (normalized.includes("svg")) return "svg";
-  if (normalized.includes("jpeg") || normalized.includes("jpg")) return "jpg";
-  if (normalized.includes("png")) return "png";
-  if (normalized.includes("gif")) return "gif";
-  if (normalized.includes("bmp")) return "bmp";
-  return void 0;
-}
-function detectImageType(imagePath) {
-  if (isBase64Image(imagePath)) {
-    const mimeType = extractMimeTypeFromDataUri(imagePath);
-    if (mimeType) {
-      const typeFromMime = detectImageTypeFromMimeType(mimeType);
-      if (typeFromMime) return typeFromMime;
-    }
-  }
-  const typeFromExtension = detectImageTypeFromExtension(imagePath);
-  if (typeFromExtension) return typeFromExtension;
-  return "png";
-}
-async function downloadImageFromUrl(url) {
-  try {
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 1e4);
-    const response = await fetch(url, {
-      signal: controller.signal,
-      headers: {
-        "User-Agent": "Mozilla/5.0 (compatible; json-to-docx/1.0)"
-      },
-      redirect: "follow"
-      // Automatically follow redirects (default behavior)
-    });
-    clearTimeout(timeoutId);
-    if (!response.ok) {
-      throw new Error(
-        `Failed to download image: HTTP ${response.status} ${response.statusText}`
-      );
-    }
-    const arrayBuffer = await response.arrayBuffer();
-    return Buffer.from(arrayBuffer);
-  } catch (error) {
-    if (error instanceof Error) {
-      if (error.name === "AbortError") {
-        throw new Error(
-          "Failed to download image: Request timeout after 10 seconds"
-        );
-      }
-      throw new Error(`Failed to download image from ${url}: ${error.message}`);
-    }
-    throw new Error(`Failed to download image from ${url}: Unknown error`);
-  }
-}
-async function getImageBuffer(imagePath) {
-  if (isBase64Image(imagePath)) {
-    return decodeBase64Image(imagePath);
-  }
-  if (isValidUrl(imagePath)) {
-    return await downloadImageFromUrl(imagePath);
-  }
-  return readFileSync(imagePath);
-}
-async function getImageDimensions(imagePath) {
-  try {
-    const imageBuffer = await getImageBuffer(imagePath);
-    const result = probe.sync(imageBuffer);
-    if (!result) {
-      throw new Error(`Unable to determine dimensions for image: ${imagePath}`);
-    }
-    return {
-      width: result.width,
-      height: result.height
-    };
-  } catch (error) {
-    throw new Error(
-      `Error reading image dimensions from ${imagePath}: ${error instanceof Error ? error.message : String(error)}`
-    );
-  }
-}
-function calculateMissingDimension(originalWidth, originalHeight, targetWidth, targetHeight) {
-  if (targetWidth && targetHeight) {
-    return { width: targetWidth, height: targetHeight };
-  }
-  const aspectRatio = originalWidth / originalHeight;
-  if (targetWidth && !targetHeight) {
-    return {
-      width: targetWidth,
-      height: Math.round(targetWidth / aspectRatio)
-    };
-  }
-  if (!targetWidth && targetHeight) {
-    return {
-      width: Math.round(targetHeight * aspectRatio),
-      height: targetHeight
-    };
-  }
-  return { width: originalWidth, height: originalHeight };
-}
-async function calculateImageDimensions(imagePath, targetWidth, targetHeight, fallbackWidth = 300, fallbackHeight = 180) {
-  try {
-    const originalDimensions = await getImageDimensions(imagePath);
-    return calculateMissingDimension(
-      originalDimensions.width,
-      originalDimensions.height,
-      targetWidth,
-      targetHeight
-    );
-  } catch (error) {
-    if (targetWidth && targetHeight) {
-      return { width: targetWidth, height: targetHeight };
-    }
-    if (targetWidth && !targetHeight) {
-      return { width: targetWidth, height: Math.round(targetWidth * 9 / 16) };
-    }
-    if (!targetWidth && targetHeight) {
-      return {
-        width: Math.round(targetHeight * 16 / 9),
-        height: targetHeight
-      };
-    }
-    return { width: fallbackWidth, height: fallbackHeight };
-  }
-}
-var init_imageUtils = __esm({
-  "src/utils/imageUtils.ts"() {
-    "use strict";
-    init_widthUtils();
-  }
-});
-
 // src/utils/docxImagePositioning.ts
 var docxImagePositioning_exports = {};
 __export(docxImagePositioning_exports, {
@@ -1736,13 +1498,17 @@ function mapWrapSide(side) {
       return void 0;
   }
 }
-function mapFloatingOptions(floating) {
+function mapFloatingOptions(floating, theme, themeName) {
   if (!floating) return void 0;
   if (floating.wrap?.type === "tight") {
     throw new Error(
       "Image floating wrap.type 'tight' is not supported due to invalid OOXML emitted by docx. Use 'square', 'topAndBottom', or 'none'."
     );
   }
+  const hRelative = floating.horizontalPosition?.relative;
+  const vRelative = floating.verticalPosition?.relative;
+  const hRef = hRelative && hRelative !== "page" ? getAvailableWidthTwips(theme, themeName) : getPageWidthTwips(theme, themeName);
+  const vRef = vRelative && vRelative !== "page" ? getAvailableHeightTwips(theme, themeName) : getPageHeightTwips(theme, themeName);
   const hasHorizontal = Boolean(floating.horizontalPosition);
   const hasVertical = Boolean(floating.verticalPosition);
   const horizontalPosition = floating.horizontalPosition ? {
@@ -1753,7 +1519,7 @@ function mapFloatingOptions(floating) {
       align: mapHorizontalAlign(floating.horizontalPosition.align)
     },
     ...floating.horizontalPosition.offset !== void 0 && {
-      offset: floating.horizontalPosition.offset * TWIPS_TO_EMU
+      offset: resolveOffsetTwips(floating.horizontalPosition.offset, hRef) * TWIPS_TO_EMU
     }
   } : hasVertical ? {
     // Default horizontal: align left relative to margin
@@ -1768,7 +1534,7 @@ function mapFloatingOptions(floating) {
       align: mapVerticalAlign(floating.verticalPosition.align)
     },
     ...floating.verticalPosition.offset !== void 0 && {
-      offset: floating.verticalPosition.offset * TWIPS_TO_EMU
+      offset: resolveOffsetTwips(floating.verticalPosition.offset, vRef) * TWIPS_TO_EMU
     }
   } : hasHorizontal ? {
     // Default vertical: align top relative to paragraph
@@ -1779,19 +1545,21 @@ function mapFloatingOptions(floating) {
     ...floating.wrap.type && { type: mapWrapType(floating.wrap.type) },
     ...floating.wrap.side && { side: mapWrapSide(floating.wrap.side) }
   } : void 0;
+  const pageW = getPageWidthTwips(theme, themeName);
+  const pageH = getPageHeightTwips(theme, themeName);
   const rawMargins = floating.wrap?.margins || floating.margins;
   const margins = rawMargins ? {
     ...rawMargins.top !== void 0 && {
-      top: rawMargins.top * TWIPS_TO_EMU
+      top: resolveOffsetTwips(rawMargins.top, pageH) * TWIPS_TO_EMU
     },
     ...rawMargins.bottom !== void 0 && {
-      bottom: rawMargins.bottom * TWIPS_TO_EMU
+      bottom: resolveOffsetTwips(rawMargins.bottom, pageH) * TWIPS_TO_EMU
     },
     ...rawMargins.left !== void 0 && {
-      left: rawMargins.left * TWIPS_TO_EMU
+      left: resolveOffsetTwips(rawMargins.left, pageW) * TWIPS_TO_EMU
     },
     ...rawMargins.right !== void 0 && {
-      right: rawMargins.right * TWIPS_TO_EMU
+      right: resolveOffsetTwips(rawMargins.right, pageW) * TWIPS_TO_EMU
     }
   } : void 0;
   let zIndex = floating.zIndex !== void 0 ? floating.zIndex : 0;
@@ -1827,6 +1595,7 @@ var TWIPS_TO_EMU;
 var init_docxImagePositioning = __esm({
   "src/utils/docxImagePositioning.ts"() {
     "use strict";
+    init_widthUtils();
     TWIPS_TO_EMU = 635;
   }
 });
@@ -2191,8 +1960,6 @@ import {
   isTableComponent,
   isListComponent,
   isTocComponent,
-  isHeaderComponent,
-  isFooterComponent,
   isHighchartsComponent
 } from "@json-to-office/shared-docx";
 
@@ -2666,18 +2433,251 @@ Suggestion: ${suggestion}`
 }
 
 // src/core/render.ts
-init_imageUtils();
-init_defaults();
 import {
   Document,
-  Paragraph as Paragraph9,
-  TextRun as TextRun7,
-  ImageRun as ImageRun2,
-  AlignmentType as AlignmentType6,
+  Paragraph as Paragraph7,
+  TextRun as TextRun5,
+  AlignmentType as AlignmentType5,
   BookmarkStart as BookmarkStart2,
   BookmarkEnd as BookmarkEnd2
 } from "docx";
 
+// src/utils/imageUtils.ts
+init_widthUtils();
+import { readFileSync } from "fs";
+import probe from "probe-image-size";
+import { ImageRun } from "docx";
+function parseWidthValue(width, availableWidthPx) {
+  if (typeof width === "number") {
+    return width;
+  }
+  const percentageMatch = width.match(/^(\d+(?:\.\d+)?)%$/);
+  if (percentageMatch) {
+    const pct = parseFloat(percentageMatch[1]);
+    if (pct < 0 || pct > 100) {
+      throw new Error(
+        `Invalid percentage value: ${width}. Must be between 0% and 100%`
+      );
+    }
+    const fraction = parsePercentageStringToFraction(width);
+    if (fraction !== void 0) {
+      return Math.round(availableWidthPx * fraction);
+    }
+  }
+  throw new Error(
+    `Invalid width value: ${width}. Expected number (pixels) or percentage string (e.g., "90%")`
+  );
+}
+function parseDimensionValue(value, availablePx) {
+  if (typeof value === "number") return value;
+  const percentageMatch = value.match(/^(\d+(?:\.\d+)?)%$/);
+  if (percentageMatch) {
+    const pct = parseFloat(percentageMatch[1]);
+    if (pct < 0 || pct > 100) {
+      throw new Error(
+        `Invalid percentage value: ${value}. Must be between 0% and 100%`
+      );
+    }
+    const fraction = parsePercentageStringToFraction(value);
+    if (fraction !== void 0) return Math.round(availablePx * fraction);
+  }
+  throw new Error(
+    `Invalid dimension value: ${value}. Expected number (pixels) or percentage string (e.g., "90%")`
+  );
+}
+function isValidUrl(string) {
+  try {
+    const url = new URL(string);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function isBase64Image(string) {
+  return /^data:image\/[a-zA-Z+]+;base64,/.test(string);
+}
+function decodeBase64Image(dataUri) {
+  try {
+    const base64Data = dataUri.split(",")[1];
+    if (!base64Data) {
+      throw new Error("Invalid base64 data URI format");
+    }
+    return Buffer.from(base64Data, "base64");
+  } catch (error) {
+    throw new Error(
+      `Failed to decode base64 image: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}
+function extractMimeTypeFromDataUri(dataUri) {
+  const match = dataUri.match(/^data:(image\/[a-zA-Z0-9+.-]+);base64,/);
+  return match ? match[1] : void 0;
+}
+function detectImageTypeFromExtension(path3) {
+  const extension = path3.toLowerCase().split(".").pop()?.split("?")[0];
+  switch (extension) {
+    case "jpg":
+    case "jpeg":
+      return "jpg";
+    case "png":
+      return "png";
+    case "gif":
+      return "gif";
+    case "bmp":
+      return "bmp";
+    case "svg":
+      return "svg";
+    default:
+      return void 0;
+  }
+}
+function detectImageTypeFromMimeType(mimeType) {
+  const normalized = mimeType.toLowerCase();
+  if (normalized.includes("svg")) return "svg";
+  if (normalized.includes("jpeg") || normalized.includes("jpg")) return "jpg";
+  if (normalized.includes("png")) return "png";
+  if (normalized.includes("gif")) return "gif";
+  if (normalized.includes("bmp")) return "bmp";
+  return void 0;
+}
+function detectImageType(imagePath, responseContentType) {
+  if (responseContentType) {
+    const typeFromResponse = detectImageTypeFromMimeType(responseContentType);
+    if (typeFromResponse) return typeFromResponse;
+  }
+  if (isBase64Image(imagePath)) {
+    const mimeType = extractMimeTypeFromDataUri(imagePath);
+    if (mimeType) {
+      const typeFromMime = detectImageTypeFromMimeType(mimeType);
+      if (typeFromMime) return typeFromMime;
+    }
+  }
+  const typeFromExtension = detectImageTypeFromExtension(imagePath);
+  if (typeFromExtension) return typeFromExtension;
+  return "png";
+}
+function createTypedImageRun(opts) {
+  const base = {
+    data: opts.data,
+    transformation: opts.transformation,
+    ...opts.floating && { floating: opts.floating }
+  };
+  if (opts.type === "svg") {
+    return new ImageRun({
+      type: "svg",
+      ...base,
+      fallback: { type: "png", data: opts.data }
+    });
+  }
+  return new ImageRun({ type: opts.type, ...base });
+}
+async function downloadImageFromUrl(url) {
+  try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 1e4);
+    const response = await fetch(url, {
+      signal: controller.signal,
+      headers: {
+        "User-Agent": "Mozilla/5.0 (compatible; json-to-docx/1.0)"
+      },
+      redirect: "follow"
+      // Automatically follow redirects (default behavior)
+    });
+    clearTimeout(timeoutId);
+    if (!response.ok) {
+      throw new Error(
+        `Failed to download image: HTTP ${response.status} ${response.statusText}`
+      );
+    }
+    const contentType = response.headers.get("content-type") || void 0;
+    const arrayBuffer = await response.arrayBuffer();
+    return { buffer: Buffer.from(arrayBuffer), contentType };
+  } catch (error) {
+    if (error instanceof Error) {
+      if (error.name === "AbortError") {
+        throw new Error(
+          "Failed to download image: Request timeout after 10 seconds"
+        );
+      }
+      throw new Error(`Failed to download image from ${url}: ${error.message}`);
+    }
+    throw new Error(`Failed to download image from ${url}: Unknown error`);
+  }
+}
+async function getImageBuffer(imagePath) {
+  if (isBase64Image(imagePath)) {
+    return { buffer: decodeBase64Image(imagePath) };
+  }
+  if (isValidUrl(imagePath)) {
+    return await downloadImageFromUrl(imagePath);
+  }
+  return { buffer: readFileSync(imagePath) };
+}
+async function getImageDimensions(imagePath) {
+  try {
+    const { buffer: imageBuffer } = await getImageBuffer(imagePath);
+    const result = probe.sync(imageBuffer);
+    if (!result) {
+      throw new Error(`Unable to determine dimensions for image: ${imagePath}`);
+    }
+    return {
+      width: result.width,
+      height: result.height
+    };
+  } catch (error) {
+    throw new Error(
+      `Error reading image dimensions from ${imagePath}: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}
+function calculateMissingDimension(originalWidth, originalHeight, targetWidth, targetHeight) {
+  if (targetWidth && targetHeight) {
+    return { width: targetWidth, height: targetHeight };
+  }
+  const aspectRatio = originalWidth / originalHeight;
+  if (targetWidth && !targetHeight) {
+    return {
+      width: targetWidth,
+      height: Math.round(targetWidth / aspectRatio)
+    };
+  }
+  if (!targetWidth && targetHeight) {
+    return {
+      width: Math.round(targetHeight * aspectRatio),
+      height: targetHeight
+    };
+  }
+  return { width: originalWidth, height: originalHeight };
+}
+async function calculateImageDimensions(imagePath, targetWidth, targetHeight, fallbackWidth = 300, fallbackHeight = 180) {
+  try {
+    const originalDimensions = await getImageDimensions(imagePath);
+    return calculateMissingDimension(
+      originalDimensions.width,
+      originalDimensions.height,
+      targetWidth,
+      targetHeight
+    );
+  } catch (error) {
+    if (targetWidth && targetHeight) {
+      return { width: targetWidth, height: targetHeight };
+    }
+    if (targetWidth && !targetHeight) {
+      return { width: targetWidth, height: Math.round(targetWidth * 9 / 16) };
+    }
+    if (!targetWidth && targetHeight) {
+      return {
+        width: Math.round(targetHeight * 16 / 9),
+        height: targetHeight
+      };
+    }
+    return { width: fallbackWidth, height: fallbackHeight };
+  }
+}
+
+// src/core/render.ts
+init_defaults();
+
 // src/styles/themeToDocxAdapter.ts
 init_themes();
 init_colorUtils();
@@ -3932,9 +3932,6 @@ function resolveListProps(props, theme) {
 }
 
 // src/core/content.ts
-init_imageUtils();
-init_styles();
-init_defaults();
 import {
   Paragraph,
   TextRun as TextRun3,
@@ -3942,7 +3939,6 @@ import {
   TableRow,
   TableCell,
   AlignmentType as AlignmentType2,
-  ImageRun,
   PageBreak,
   WidthType,
   BorderStyle as BorderStyle2,
@@ -3954,6 +3950,8 @@ import {
   VerticalAlign,
   Bookmark
 } from "docx";
+init_styles();
+init_defaults();
 
 // src/utils/bookmarkRegistry.ts
 var BookmarkRegistry = class {
@@ -4028,7 +4026,8 @@ var globalBookmarkRegistry = new BookmarkRegistry();
 init_styleHelpers();
 init_colorUtils();
 init_styleHelpers();
-function createText(content, theme, _themeName, options = {}) {
+init_widthUtils();
+function createText(content, theme, themeName, options = {}) {
   const normalizedContent = normalizeUnicodeText(content);
   const style = options.style || "Normal";
   const spacing = {};
@@ -4080,7 +4079,7 @@ function createText(content, theme, _themeName, options = {}) {
     children.push(...textRuns);
   }
   const isFloating = !!options.floating;
-  const frameOptions = isFloating && options.floating ? mapFrameOptions(options.floating) : void 0;
+  const frameOptions = isFloating && options.floating ? mapFrameOptions(options.floating, theme, themeName) : void 0;
   return new Paragraph({
     children,
     style,
@@ -4094,7 +4093,7 @@ function createText(content, theme, _themeName, options = {}) {
     ...options.keepLines !== void 0 && { keepLines: options.keepLines }
   });
 }
-function mapFrameOptions(floating) {
+function mapFrameOptions(floating, theme, themeName) {
   const hasHorizontalOffset = floating.horizontalPosition?.offset !== void 0;
   const hasVerticalOffset = floating.verticalPosition?.offset !== void 0;
   const hasHorizontalAlign = floating.horizontalPosition?.align !== void 0;
@@ -4119,8 +4118,21 @@ function mapFrameOptions(floating) {
     baseOptions.anchorLock = floating.anchorLock;
   }
   if (useAbsolute) {
-    const x = floating.horizontalPosition?.offset ?? 0;
-    const y = floating.verticalPosition?.offset ?? 0;
+    const rawX = floating.horizontalPosition?.offset ?? 0;
+    const rawY = floating.verticalPosition?.offset ?? 0;
+    let x;
+    let y;
+    if (typeof rawX === "string" || typeof rawY === "string") {
+      const hRelative = floating.horizontalPosition?.relative;
+      const vRelative = floating.verticalPosition?.relative;
+      const hRef = hRelative && hRelative !== "page" ? getAvailableWidthTwips(theme, themeName) : getPageWidthTwips(theme, themeName);
+      const vRef = vRelative && vRelative !== "page" ? getAvailableHeightTwips(theme, themeName) : getPageHeightTwips(theme, themeName);
+      x = resolveOffsetTwips(rawX, hRef);
+      y = resolveOffsetTwips(rawY, vRef);
+    } else {
+      x = rawX;
+      y = rawY;
+    }
     return {
       type: "absolute",
       position: { x, y },
@@ -4218,14 +4230,17 @@ function createHeading(text, level, theme, _themeName, options = {}) {
     ...options.keepLines !== void 0 && { keepLines: options.keepLines }
   });
 }
-async function createImage(path3, theme, options = {}) {
+async function createImage(path3, theme, themeName, options = {}) {
   const elements = [];
   const isFloating = !!options.floating;
   const alignment = isFloating ? void 0 : getAlignment(options.alignment || "center");
   let imagePath = path3;
   let imageBuffer;
+  let responseContentType;
   try {
-    imageBuffer = await getImageBuffer(imagePath);
+    const imageResult = await getImageBuffer(imagePath);
+    imageBuffer = imageResult.buffer;
+    responseContentType = imageResult.contentType;
     const {
       getAvailableWidthTwips: getAvailableWidthTwips2,
       getPageWidthTwips: getPageWidthTwips2,
@@ -4255,29 +4270,12 @@ async function createImage(path3, theme, options = {}) {
       fallbackHeight
     );
     const { mapFloatingOptions: mapFloatingOptions2 } = await Promise.resolve().then(() => (init_docxImagePositioning(), docxImagePositioning_exports));
-    const floating = isFloating ? mapFloatingOptions2(options.floating) : void 0;
-    const { detectImageType: detectImageType2 } = await Promise.resolve().then(() => (init_imageUtils(), imageUtils_exports));
-    const imageType = detectImageType2(imagePath);
-    const imageRun = imageType === "svg" ? new ImageRun({
-      type: "svg",
-      data: imageBuffer,
-      fallback: {
-        type: "png",
-        data: imageBuffer
-        // Use the same buffer as fallback for now
-      },
-      transformation: {
-        width: dimensions.width,
-        height: dimensions.height
-      },
-      ...floating && { floating }
-    }) : new ImageRun({
+    const floating = isFloating ? mapFloatingOptions2(options.floating, theme, themeName) : void 0;
+    const imageType = detectImageType(imagePath, responseContentType);
+    const imageRun = createTypedImageRun({
       type: imageType,
       data: imageBuffer,
-      transformation: {
-        width: dimensions.width,
-        height: dimensions.height
-      },
+      transformation: { width: dimensions.width, height: dimensions.height },
       ...floating && { floating }
     });
     const spacing = {};
@@ -4401,7 +4399,7 @@ async function createTable(columns, tableConfig, theme, themeName, _options = {}
   const numRows = columns[0]?.cells?.length || 0;
   const getDefaultCellDefaults = () => ({
     color: "000000",
-    backgroundColor: "FFFFFF",
+    backgroundColor: "transparent",
     horizontalAlignment: "left",
     verticalAlignment: "top",
     font: {
@@ -4706,9 +4704,27 @@ async function createTable(columns, tableConfig, theme, themeName, _options = {}
     if (typeof cell === "object" && "name" in cell && "props" in cell) {
       if (isParagraphComponent(cell)) {
         const textComp = cell;
+        const paragraphFont = textComp.props.font;
+        const paragraphStyle = {
+          ...mergedStyle,
+          ...paragraphFont?.family && { font: paragraphFont.family },
+          ...paragraphFont?.size && { size: paragraphFont.size * 2 },
+          ...paragraphFont?.bold !== void 0 && {
+            bold: paragraphFont.bold
+          },
+          ...paragraphFont?.italic !== void 0 && {
+            italics: paragraphFont.italic
+          },
+          ...paragraphFont?.underline !== void 0 && {
+            underline: paragraphFont.underline ? { type: "single" } : void 0
+          },
+          ...paragraphFont?.color && {
+            color: resolveColor(paragraphFont.color, theme)
+          }
+        };
         cellChildren = parseTextWithDecorators(
           textComp.props.text,
-          mergedStyle,
+          paragraphStyle,
           { enableHyperlinks: true }
         );
       } else if (isImageComponent(cell)) {
@@ -4720,7 +4736,7 @@ async function createTable(columns, tableConfig, theme, themeName, _options = {}
               'Image component requires either "path" or "base64" property'
             );
           }
-          const imageBuffer = await getImageBuffer(imageSource);
+          const imageResult = await getImageBuffer(imageSource);
           const parsedWidth = typeof imageComp.props.width === "string" ? parseWidthValue(imageComp.props.width, 300) : imageComp.props.width;
           const parsedHeight = typeof imageComp.props.height === "string" ? parseWidthValue(imageComp.props.height, 200) : imageComp.props.height;
           const dimensions = await calculateImageDimensions(
@@ -4732,9 +4748,10 @@ async function createTable(columns, tableConfig, theme, themeName, _options = {}
             20
             // fallback height
           );
-          const imageRun = new ImageRun({
-            type: "png",
-            data: imageBuffer,
+          const imgType = detectImageType(imageSource, imageResult.contentType);
+          const imageRun = createTypedImageRun({
+            type: imgType,
+            data: imageResult.buffer,
             transformation: {
               width: dimensions.width,
               height: dimensions.height
@@ -4838,8 +4855,10 @@ async function createTable(columns, tableConfig, theme, themeName, _options = {}
             })
           ],
           verticalAlign: verticalAlignment,
-          shading: {
-            fill: mergedDefaults.backgroundColor || getThemeColors(theme).background
+          ...mergedDefaults.backgroundColor !== "transparent" && {
+            shading: {
+              fill: mergedDefaults.backgroundColor
+            }
           },
           margins: createMarginsFromPadding(mergedDefaults.padding),
           borders: {
@@ -5005,8 +5024,10 @@ async function createTable(columns, tableConfig, theme, themeName, _options = {}
                 })
               ],
               verticalAlign: verticalAlignment,
-              shading: {
-                fill: mergedDefaults.backgroundColor || getThemeColors(theme).background
+              ...mergedDefaults.backgroundColor !== "transparent" && {
+                shading: {
+                  fill: mergedDefaults.backgroundColor
+                }
               },
               margins: createMarginsFromPadding(mergedDefaults.padding),
               borders: {
@@ -5410,7 +5431,7 @@ function renderListComponent(component, theme, themeName) {
 }
 
 // src/components/image.ts
-async function renderImageComponent(component, theme) {
+async function renderImageComponent(component, theme, themeName) {
   if (!isImageComponent(component)) return [];
   const resolvedConfig = resolveImageProps(component.props, theme);
   const imageSource = resolvedConfig.base64 || resolvedConfig.path;
@@ -5419,7 +5440,7 @@ async function renderImageComponent(component, theme) {
       'Image component requires either "path" or "base64" property'
     );
   }
-  return await createImage(imageSource, theme, {
+  return await createImage(imageSource, theme, themeName, {
     caption: resolvedConfig.caption,
     width: resolvedConfig.width,
     height: resolvedConfig.height,
@@ -5520,15 +5541,20 @@ function buildCellOptions(children, styleCfg, theme) {
 }
 
 // src/components/text-box.ts
-function mapTableFloatOptions(floating) {
+init_widthUtils();
+function mapTableFloatOptions(floating, theme, themeName) {
   if (!floating) return void 0;
   const opt = {};
+  const hRelative = floating.horizontalPosition?.relative;
+  const vRelative = floating.verticalPosition?.relative;
+  const hRef = hRelative && hRelative !== "page" ? getAvailableWidthTwips(theme, themeName) : getPageWidthTwips(theme, themeName);
+  const vRef = vRelative && vRelative !== "page" ? getAvailableHeightTwips(theme, themeName) : getPageHeightTwips(theme, themeName);
   const hp = floating.horizontalPosition;
   if (hp?.relative) {
     opt.horizontalAnchor = hp.relative === "margin" ? TableAnchorType.MARGIN : hp.relative === "page" ? TableAnchorType.PAGE : TableAnchorType.TEXT;
   }
   if (hp?.offset !== void 0) {
-    opt.absoluteHorizontalPosition = hp.offset;
+    opt.absoluteHorizontalPosition = resolveOffsetTwips(hp.offset, hRef);
   } else if (hp?.align) {
     const map = {
       left: RelativeHorizontalPosition.LEFT,
@@ -5544,7 +5570,7 @@ function mapTableFloatOptions(floating) {
     opt.verticalAnchor = vp.relative === "margin" ? TableAnchorType.MARGIN : vp.relative === "page" ? TableAnchorType.PAGE : TableAnchorType.TEXT;
   }
   if (vp?.offset !== void 0) {
-    opt.absoluteVerticalPosition = vp.offset;
+    opt.absoluteVerticalPosition = resolveOffsetTwips(vp.offset, vRef);
   } else if (vp?.align) {
     const mapV = {
       top: RelativeVerticalPosition.TOP,
@@ -5555,12 +5581,17 @@ function mapTableFloatOptions(floating) {
     };
     opt.relativeVerticalPosition = mapV[vp.align];
   }
+  const pageW = getPageWidthTwips(theme, themeName);
+  const pageH = getPageHeightTwips(theme, themeName);
   const m = floating.wrap?.margins;
   if (m) {
-    if (m.top !== void 0) opt.topFromText = m.top;
-    if (m.right !== void 0) opt.rightFromText = m.right;
-    if (m.bottom !== void 0) opt.bottomFromText = m.bottom;
-    if (m.left !== void 0) opt.leftFromText = m.left;
+    if (m.top !== void 0) opt.topFromText = resolveOffsetTwips(m.top, pageH);
+    if (m.right !== void 0)
+      opt.rightFromText = resolveOffsetTwips(m.right, pageW);
+    if (m.bottom !== void 0)
+      opt.bottomFromText = resolveOffsetTwips(m.bottom, pageH);
+    if (m.left !== void 0)
+      opt.leftFromText = resolveOffsetTwips(m.left, pageW);
   }
   opt.overlap = OverlapType.OVERLAP;
   return opt;
@@ -5616,7 +5647,7 @@ async function renderTextBoxComponent(component, theme, themeName, _context) {
   const row = new TableRow2({
     children: [new TableCell2(cellOpts)]
   });
-  const float = mapTableFloatOptions(tb.props.floating);
+  const float = mapTableFloatOptions(tb.props.floating, theme, themeName);
   const PIXELS_TO_TWIPS = 15;
   const DEFAULT_WIDTH_TWIPS = 5e3;
   const rawWidth = tb.props.width ?? tb.props.floating?.width;
@@ -5653,7 +5684,7 @@ async function renderTableComponent(component, theme, themeName) {
     const rows = rawConfig.rows;
     const defaultCellDefaults = {
       color: "000000",
-      backgroundColor: "FFFFFF",
+      backgroundColor: "transparent",
       horizontalAlignment: "left",
       verticalAlignment: "top",
       font: {
@@ -5889,77 +5920,12 @@ function renderStatisticComponent(component, theme) {
   );
 }
 
-// src/components/header.ts
-import { Paragraph as Paragraph6, TextRun as TextRun4 } from "docx";
-init_styles();
-init_defaults();
-
-// src/utils/alignmentUtils.ts
-import { AlignmentType as AlignmentType4 } from "docx";
-function getAlignment3(alignment) {
-  switch (alignment) {
-    case "center":
-      return AlignmentType4.CENTER;
-    case "right":
-      return AlignmentType4.RIGHT;
-    case "justify":
-      return AlignmentType4.JUSTIFIED;
-    default:
-      return AlignmentType4.LEFT;
-  }
-}
-
-// src/components/header.ts
-function renderHeaderComponent(component, theme, themeName) {
-  if (!isHeaderComponent(component)) return [];
-  const headerComp = component;
-  const bodyStyle = getBodyTextStyle(theme, themeName);
-  return [
-    new Paragraph6({
-      children: [
-        new TextRun4({
-          text: `[Header: ${headerComp.props.alignment || "center"}]`,
-          font: bodyStyle.font,
-          size: bodyStyle.size,
-          color: getThemeColors(theme).secondary
-        })
-      ],
-      alignment: getAlignment3(headerComp.props.alignment || "center"),
-      style: "Normal"
-    })
-  ];
-}
-
-// src/components/footer.ts
-import { Paragraph as Paragraph7, TextRun as TextRun5 } from "docx";
-init_styles();
-init_defaults();
-function renderFooterComponent(component, theme, themeName) {
-  if (!isFooterComponent(component)) return [];
-  const footerComp = component;
-  const bodyStyle = getBodyTextStyle(theme, themeName);
-  return [
-    new Paragraph7({
-      children: [
-        new TextRun5({
-          text: `[Footer: ${footerComp.props.alignment || "center"}]`,
-          font: bodyStyle.font,
-          size: bodyStyle.size,
-          color: getThemeColors(theme).secondary
-        })
-      ],
-      alignment: getAlignment3(footerComp.props.alignment || "center"),
-      style: "Normal"
-    })
-  ];
-}
-
 // src/components/toc/index.ts
 import {
-  Paragraph as Paragraph8,
+  Paragraph as Paragraph6,
   TableOfContents,
-  AlignmentType as AlignmentType5,
-  TextRun as TextRun6,
+  AlignmentType as AlignmentType4,
+  TextRun as TextRun4,
   StyleLevel
 } from "docx";
 function parseDepthRange(rawDepth, fieldName, defaultFrom = 1, defaultTo = 3) {
@@ -6012,9 +5978,9 @@ function renderTocComponent(component, theme, context) {
   const paragraphs = [];
   if (componentProps.title) {
     paragraphs.push(
-      new Paragraph8({
+      new Paragraph6({
         children: [
-          new TextRun6({
+          new TextRun4({
             text: componentProps.title,
             bold: true,
             size: 28
@@ -6027,7 +5993,7 @@ function renderTocComponent(component, theme, context) {
           // 180 ~= 9pt, provides clearer separation by default
           after: 180
         },
-        alignment: AlignmentType5.LEFT
+        alignment: AlignmentType4.LEFT
       })
     );
   }
@@ -6096,27 +6062,33 @@ function isNodeEnvironment() {
 
 // src/components/highcharts.ts
 var DEFAULT_EXPORT_SERVER_URL = "http://localhost:7801";
-function getExportServerUrl(propsUrl) {
-  return propsUrl || process.env.HIGHCHARTS_SERVER_URL || DEFAULT_EXPORT_SERVER_URL;
+function getExportServerUrl(propsUrl, servicesUrl) {
+  const raw = propsUrl || servicesUrl || DEFAULT_EXPORT_SERVER_URL;
+  return raw.startsWith("http") ? raw : `http://${raw}`;
 }
-async function generateChart(config) {
+async function generateChart(config, servicesConfig) {
   if (!isNodeEnvironment()) {
     throw new Error(
       "Highcharts export server requires a Node.js environment. Chart generation is not available in browser environments."
     );
   }
-  const serverUrl = getExportServerUrl(config.serverUrl);
+  const serverUrl = getExportServerUrl(
+    config.serverUrl,
+    servicesConfig?.serverUrl
+  );
   const requestBody = {
     infile: config.options,
     type: "png",
     b64: true,
     scale: config.scale
   };
+  const headers = {
+    "Content-Type": "application/json",
+    ...servicesConfig?.headers
+  };
   const response = await fetch(`${serverUrl}/export`, {
     method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
+    headers,
     body: JSON.stringify(requestBody)
   }).catch((error) => {
     throw new Error(
@@ -6139,16 +6111,20 @@ Cause: ${error instanceof Error ? error.message : String(error)}`
     height
   };
 }
-async function renderHighchartsComponent(component, theme, _themeName) {
+async function renderHighchartsComponent(component, theme, themeName, context) {
   if (!isHighchartsComponent(component)) return [];
   const config = component.props;
-  const chartResult = await generateChart(config);
+  const chartResult = await generateChart(
+    config,
+    context?.services?.highcharts
+  );
   const hasConfigDimensions = config.width !== void 0 || config.height !== void 0;
   const renderWidth = hasConfigDimensions ? config.width : chartResult.width;
   const renderHeight = hasConfigDimensions ? config.height : chartResult.height;
   const imageParagraphs = await createImage(
     chartResult.base64DataUri,
     theme,
+    themeName,
     {
       width: renderWidth,
       height: renderHeight,
@@ -6211,16 +6187,16 @@ var textSpaceAfterComponent = createComponent({
 
 // src/core/render.ts
 init_docxImagePositioning();
-function getAlignment4(alignment) {
+function getAlignment3(alignment) {
   switch (alignment) {
     case "center":
-      return AlignmentType6.CENTER;
+      return AlignmentType5.CENTER;
     case "right":
-      return AlignmentType6.RIGHT;
+      return AlignmentType5.RIGHT;
     case "justify":
-      return AlignmentType6.JUSTIFIED;
+      return AlignmentType5.JUSTIFIED;
     default:
-      return AlignmentType6.LEFT;
+      return AlignmentType5.LEFT;
   }
 }
 async function renderDocument(structure, layout, options) {
@@ -6237,6 +6213,7 @@ async function renderDocument(structure, layout, options) {
     structure.theme,
     structure.themeName
   );
+  context.services = options?.services;
   let sectionBookmarkCounter = 0;
   let previousHeader = void 0;
   let previousFooter = void 0;
@@ -6311,7 +6288,7 @@ async function renderDocument(structure, layout, options) {
     }
   });
 }
-async function renderHeaderFooterComponents(components, theme, _themeName, _context) {
+async function renderHeaderFooterComponents(components, theme, themeName, _context) {
   if (!components || components.length === 0) {
     return [];
   }
@@ -6333,9 +6310,9 @@ async function renderHeaderFooterComponents(components, theme, _themeName, _cont
       };
       const textRuns = parseTextWithDecorators(textComp.props.text, textStyle);
       elements.push(
-        new Paragraph9({
+        new Paragraph7({
           children: textRuns,
-          alignment: textComp.props.alignment ? getAlignment4(textComp.props.alignment) : void 0,
+          alignment: textComp.props.alignment ? getAlignment3(textComp.props.alignment) : void 0,
           style: "Normal"
         })
       );
@@ -6344,9 +6321,9 @@ async function renderHeaderFooterComponents(components, theme, _themeName, _cont
       let imageSource = imageComp.props.base64 || imageComp.props.path;
       if (!imageSource) {
         elements.push(
-          new Paragraph9({
+          new Paragraph7({
             children: [
-              new TextRun7({
+              new TextRun5({
                 text: "[IMAGE: Missing path or base64 property]",
                 font: getThemeFonts(theme).body.family,
                 size: 20,
@@ -6354,15 +6331,18 @@ async function renderHeaderFooterComponents(components, theme, _themeName, _cont
                 color: "#FF0000"
               })
             ],
-            alignment: imageComp.props.alignment ? getAlignment4(imageComp.props.alignment) : void 0,
+            alignment: imageComp.props.alignment ? getAlignment3(imageComp.props.alignment) : void 0,
             style: "Normal"
           })
         );
         continue;
       }
       let imageBuffer;
+      let responseContentType;
       try {
-        imageBuffer = await getImageBuffer(imageSource);
+        const imageResult = await getImageBuffer(imageSource);
+        imageBuffer = imageResult.buffer;
+        responseContentType = imageResult.contentType;
       } catch (error) {
         throw new Error(
           `Failed to load image from ${imageSource.substring(0, 50)}`
@@ -6395,9 +6375,14 @@ async function renderHeaderFooterComponents(components, theme, _themeName, _cont
           referenceWidthPx,
           fallbackHeight
         );
-        const floatingOptions = mapFloatingOptions(imageComp.props.floating);
-        const imageRun = new ImageRun2({
-          type: "png",
+        const floatingOptions = mapFloatingOptions(
+          imageComp.props.floating,
+          theme,
+          themeName
+        );
+        const imageType = detectImageType(imageSource, responseContentType);
+        const imageRun = createTypedImageRun({
+          type: imageType,
           data: imageBuffer,
           transformation: {
             width: dimensions.width,
@@ -6406,9 +6391,9 @@ async function renderHeaderFooterComponents(components, theme, _themeName, _cont
           ...floatingOptions && { floating: floatingOptions }
         });
         elements.push(
-          new Paragraph9({
+          new Paragraph7({
             children: [imageRun],
-            alignment: imageComp.props.alignment ? getAlignment4(imageComp.props.alignment) : void 0,
+            alignment: imageComp.props.alignment ? getAlignment3(imageComp.props.alignment) : void 0,
             style: "Normal"
           })
         );
@@ -6418,9 +6403,9 @@ async function renderHeaderFooterComponents(components, theme, _themeName, _cont
           error instanceof Error ? error.message : error
         );
         elements.push(
-          new Paragraph9({
+          new Paragraph7({
             children: [
-              new TextRun7({
+              new TextRun5({
                 text: `[IMAGE: ${imageComp.props.path}]`,
                 font: getThemeFonts(theme).body.family,
                 size: 20,
@@ -6433,7 +6418,7 @@ async function renderHeaderFooterComponents(components, theme, _themeName, _cont
         );
       }
     } else if (isTableComponent(component)) {
-      const tables = await renderTableComponent(component, theme, _themeName);
+      const tables = await renderTableComponent(component, theme, themeName);
       elements.push(...tables);
     }
   }
@@ -6458,7 +6443,7 @@ async function renderSection(section, theme, themeName, context, sectionOrdinal,
   };
   if (sectionBookmarkId && isFirstLayoutOfUserSection && sharedLinkId !== void 0) {
     elements.push(
-      new Paragraph9({
+      new Paragraph7({
         children: [new BookmarkStart2(sectionBookmarkId, sharedLinkId)],
         spacing: {
           before: 0,
@@ -6484,7 +6469,7 @@ async function renderSection(section, theme, themeName, context, sectionOrdinal,
   }
   if (closeBookmark && sharedLinkId !== void 0) {
     elements.push(
-      new Paragraph9({
+      new Paragraph7({
         children: [new BookmarkEnd2(sharedLinkId)]
       })
     );
@@ -6537,23 +6522,24 @@ async function renderComponent(component, theme, themeName, context) {
   } else if (isColumnsComponent(component)) {
     return await renderColumnsComponent(component, theme, themeName, context);
   } else if (isImageComponent(component)) {
-    return await renderImageComponent(component, theme);
+    return await renderImageComponent(component, theme, themeName);
   } else if (isTextBoxComponent(component)) {
     return await renderTextBoxComponent(component, theme, themeName, context);
   } else if (isStatisticComponent(component)) {
     return renderStatisticComponent(component, theme);
   } else if (isTableComponent(component)) {
     return await renderTableComponent(component, theme, themeName);
-  } else if (isHeaderComponent(component)) {
-    return renderHeaderComponent(component, theme, themeName);
-  } else if (isFooterComponent(component)) {
-    return renderFooterComponent(component, theme, themeName);
   } else if (isListComponent(component)) {
     return renderListComponent(component, theme, themeName);
   } else if (isTocComponent(component)) {
     return renderTocComponent(component, theme, context);
   } else if (isHighchartsComponent(component)) {
-    return await renderHighchartsComponent(component, theme, themeName);
+    return await renderHighchartsComponent(
+      component,
+      theme,
+      themeName,
+      context
+    );
   } else if (isSectionComponent(component)) {
     return await renderSectionComponent(component, theme, themeName, context);
   }
@@ -6775,7 +6761,8 @@ function createBuilderImpl(state) {
       theme: state.theme,
       customThemes: state.customThemes,
       debug: state.debug,
-      enableCache: state.enableCache
+      enableCache: state.enableCache,
+      services: state.services
     };
     return createBuilderImpl(
       newState
@@ -6807,7 +6794,9 @@ function createBuilderImpl(state) {
         themeName
       );
       const layout = applyLayout(structure.sections, docTheme, themeName);
-      const generatedDocument = await renderDocument(structure, layout);
+      const generatedDocument = await renderDocument(structure, layout, {
+        services: state.services
+      });
       return {
         document: generatedDocument,
         warnings: warnings.length > 0 ? warnings : null
@@ -6922,7 +6911,8 @@ function createDocumentGenerator(options) {
     theme: options.theme,
     customThemes: options.customThemes,
     debug: options.debug ?? false,
-    enableCache: options.enableCache ?? false
+    enableCache: options.enableCache ?? false,
+    services: options.services
   };
   return createBuilderImpl(initialState);
 }