@windoc/core 0.3.25 → 0.3.27

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var version = "0.3.25";
+var version = "0.3.27";
 
 // src/dataset/enum/Common.ts
 var MaxHeightRatio = /* @__PURE__ */ ((MaxHeightRatio2) => {
@@ -19111,10 +19111,11 @@ var ListParticle = class {
     if (!cycle) return "\u25CF";
     return cycle[level % cycle.length];
   }
-  drawListStyle(ctx, row, position) {
-    const { elementList, offsetX, listIndex, ascent } = row;
+  // Marker x for a list row's first line (shared by canvas drawing and export)
+  getListMarkerX(row, position) {
+    const { elementList, offsetX } = row;
     const startElement = elementList[0];
-    if (startElement.value !== ZERO || startElement.listWrap) return;
+    if (startElement.value !== ZERO || startElement.listWrap) return null;
     let tabWidth = 0;
     const { defaultTabWidth, scale } = this.options;
     for (let i = 1; i < elementList.length; i++) {
@@ -19124,12 +19125,29 @@ var ListParticle = class {
     }
     const {
       coordinate: {
-        leftTop: [startX, startY]
+        leftTop: [startX]
       }
     } = position;
     const indentWidth = this.getListIndentWidth(startElement);
-    const x = startX - offsetX + tabWidth + indentWidth;
-    const y = startY + ascent;
+    return startX - offsetX + tabWidth + indentWidth;
+  }
+  getListMarker(row) {
+    const startElement = row.elementList[0];
+    if (startElement.listStyle === "checkbox" /* CHECKBOX */) return null;
+    const text = this._getListMarkerText(startElement, row.listIndex);
+    if (!text) return null;
+    return {
+      text,
+      styleElement: this._getListMarkerStyleElement(row.elementList)
+    };
+  }
+  drawListStyle(ctx, row, position) {
+    const { elementList, ascent } = row;
+    const startElement = elementList[0];
+    const x = this.getListMarkerX(row, position);
+    if (x === null) return;
+    const { scale } = this.options;
+    const y = position.coordinate.leftTop[1] + ascent;
     if (startElement.listStyle === "checkbox" /* CHECKBOX */) {
       const { width, height, gap } = this.options.checkbox;
       const checkboxRowElement = {
@@ -19154,12 +19172,11 @@ var ListParticle = class {
         }
       });
     } else {
-      const text = this._getListMarkerText(startElement, listIndex);
-      if (!text) return;
-      const markerStyleElement = this._getListMarkerStyleElement(elementList);
+      const marker = this.getListMarker(row);
+      if (!marker) return;
       ctx.save();
-      ctx.font = this.draw.getElementFont(markerStyleElement, scale);
-      ctx.fillText(text, x, y);
+      ctx.font = this.draw.getElementFont(marker.styleElement, scale);
+      ctx.fillText(marker.text, x, y);
       ctx.restore();
     }
   }
@@ -24347,1240 +24364,1016 @@ var Command = class {
   }
 };
 
-// src/utils/docx.ts
+// src/utils/docxLayout.ts
 import {
-  AlignmentType,
   BorderStyle,
-  ColumnBreak,
   Document as Document2,
   ExternalHyperlink,
   Footer as Footer2,
   Header as Header2,
-  HeadingLevel,
+  HeightRule,
   ImageRun,
-  LevelFormat,
   LineRuleType,
   Packer,
-  PageBreak,
-  PageNumber as PageNumber2,
   PageOrientation,
   Paragraph,
   ShadingType,
+  Tab,
+  TabStopType,
   Table,
   TableCell,
   TableLayoutType,
   TableRow,
   TextRun,
-  UnderlineType,
   VerticalAlign as DocxVerticalAlign,
-  WidthType
+  WidthType,
+  XmlAttributeComponent,
+  XmlComponent
 } from "docx";
+
+// src/utils/docx.ts
+import { UnderlineType } from "docx";
 var DEFAULT_DOCX_FILE_NAME = "document.docx";
 var DEFAULT_IMAGE_WIDTH = 320;
 var DEFAULT_IMAGE_HEIGHT = 180;
-var DEFAULT_LINE_HEIGHT = 1.15;
-var docxBulletCharMap = {
-  ["disc" /* DISC */]: "\u2022",
-  ["circle" /* CIRCLE */]: "\u25E6",
-  ["square" /* SQUARE */]: "\u25A0",
-  ["checkbox" /* CHECKBOX */]: "\u2611"
-};
-var titleHeadingMap = {
-  ["first" /* FIRST */]: HeadingLevel.HEADING_1,
-  ["second" /* SECOND */]: HeadingLevel.HEADING_2,
-  ["third" /* THIRD */]: HeadingLevel.HEADING_3,
-  ["fourth" /* FOURTH */]: HeadingLevel.HEADING_4,
-  ["fifth" /* FIFTH */]: HeadingLevel.HEADING_5,
-  ["sixth" /* SIXTH */]: HeadingLevel.HEADING_6
-};
-var orderedStyleFormatMap = {
-  ["decimal" /* DECIMAL */]: LevelFormat.DECIMAL,
-  ["lowerAlpha" /* LOWER_ALPHA */]: LevelFormat.LOWER_LETTER,
-  ["upperAlpha" /* UPPER_ALPHA */]: LevelFormat.UPPER_LETTER,
-  ["lowerRoman" /* LOWER_ROMAN */]: LevelFormat.LOWER_ROMAN,
-  ["upperRoman" /* UPPER_ROMAN */]: LevelFormat.UPPER_ROMAN,
-  ["decimalParen" /* DECIMAL_PAREN */]: LevelFormat.DECIMAL,
-  decimalZero: LevelFormat.DECIMAL_ZERO,
-  lowerAlphaParen: LevelFormat.LOWER_LETTER,
-  lowerRomanParen: LevelFormat.LOWER_ROMAN,
-  outline: LevelFormat.DECIMAL
-};
-async function exportEditorDataToDocx(payload, options = {}) {
-  const fileName = normalizeDocxFileName(options.fileName);
-  const file = await createDocxDocument(payload);
-  const blob = await Packer.toBlob(file);
+async function loadImagePayload(src) {
+  const source = src.trim();
+  if (source.startsWith("data:")) {
+    return getImagePayloadFromDataUrl(source);
+  }
+  const response = await fetch(source);
+  if (!response.ok) {
+    throw new Error(`Image request failed: ${response.status}`);
+  }
+  const contentType = response.headers.get("content-type") || "";
+  const data2 = await response.arrayBuffer();
+  return normalizeImagePayload(data2, contentType);
+}
+async function getImagePayloadFromDataUrl(src) {
+  const [, meta = "", encoded = ""] = src.match(/^data:([^,]*),(.*)$/) || [];
+  const mime = meta.split(";")[0] || "";
+  const isBase64 = meta.includes(";base64");
+  const text = isBase64 ? atob(encoded) : decodeURIComponent(encoded);
+  const bytes = new Uint8Array(text.length);
+  for (let i = 0; i < text.length; i++) {
+    bytes[i] = text.charCodeAt(i);
+  }
+  return normalizeImagePayload(bytes.buffer, mime);
+}
+async function normalizeImagePayload(data2, mime) {
+  const type = getRegularImageType(mime);
+  if (type) {
+    return {
+      type,
+      data: data2
+    };
+  }
+  if (mime.includes("svg")) {
+    return {
+      type: "svg",
+      data: data2,
+      fallbackPng: await rasterizeSvgToPng(data2)
+    };
+  }
+  const fallbackPng = await rasterizeImageToPng(data2, mime);
   return {
-    blob,
-    fileName
+    type: "png",
+    data: fallbackPng
   };
 }
-async function createDocxDocument(payload) {
-  const { data: data2, options } = payload;
-  const editorOptions = options;
-  const context = createSerializeContext();
-  const headerChildren = editorOptions.header.disabled ? [] : await serializeElementList(data2.header || [], editorOptions, context);
-  const footerChildren = editorOptions.footer.disabled ? [] : await serializeElementList(data2.footer || [], editorOptions, context);
-  const pageNumberParagraph = createPageNumberParagraph(
-    editorOptions.pageNumber
-  );
-  if (pageNumberParagraph) {
-    footerChildren.push(pageNumberParagraph);
+async function rasterizeSvgToPng(data2) {
+  return rasterizeImageToPng(data2, "image/svg+xml");
+}
+async function rasterizeImageToPng(data2, mime) {
+  const blob = new Blob([data2], {
+    type: mime || "image/png"
+  });
+  const url = URL.createObjectURL(blob);
+  try {
+    const image = await loadHtmlImage(url);
+    const canvas = document.createElement("canvas");
+    canvas.width = image.naturalWidth || DEFAULT_IMAGE_WIDTH;
+    canvas.height = image.naturalHeight || DEFAULT_IMAGE_HEIGHT;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("Canvas context is unavailable");
+    }
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const pngBlob = await new Promise((resolve, reject) => {
+      canvas.toBlob((output) => {
+        if (output) {
+          resolve(output);
+        } else {
+          reject(new Error("Failed to create PNG blob"));
+        }
+      }, "image/png");
+    });
+    return await pngBlob.arrayBuffer();
+  } finally {
+    URL.revokeObjectURL(url);
   }
-  const sectionChildren = await serializeElementList(
-    data2.main,
-    editorOptions,
-    context
-  );
-  const { width, height, paperDirection } = editorOptions;
-  const pageWidth = paperDirection === "horizontal" /* HORIZONTAL */ ? height : width;
-  const pageHeight = paperDirection === "horizontal" /* HORIZONTAL */ ? width : height;
+}
+function loadHtmlImage(src) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("Failed to load image"));
+    image.src = src;
+  });
+}
+function mapUnderlineType(style) {
+  switch (style) {
+    case "double" /* DOUBLE */:
+      return UnderlineType.DOUBLE;
+    case "dashed" /* DASHED */:
+      return UnderlineType.DASH;
+    case "dotted" /* DOTTED */:
+      return UnderlineType.DOTTED;
+    case "wavy" /* WAVY */:
+      return UnderlineType.WAVE;
+    default:
+      return UnderlineType.SINGLE;
+  }
+}
+function normalizeHexColor(color, fallback) {
+  const normalized = normalizeHexLiteral(color) || normalizeRgbColor(color) || normalizeBrowserColor(color);
+  if (normalized) {
+    return normalized;
+  }
+  return fallback ? normalizeHexLiteral(fallback) || void 0 : void 0;
+}
+function normalizeHexLiteral(color) {
+  const value = color.trim().replace(/^#/, "");
+  if (/^[\da-f]{3}$/i.test(value)) {
+    return value.split("").map((part) => `${part}${part}`).join("").toUpperCase();
+  }
+  if (/^[\da-f]{4}$/i.test(value)) {
+    return value.slice(0, 3).split("").map((part) => `${part}${part}`).join("").toUpperCase();
+  }
+  if (/^[\da-f]{6}$/i.test(value)) {
+    return value.toUpperCase();
+  }
+  if (/^[\da-f]{8}$/i.test(value)) {
+    return value.slice(0, 6).toUpperCase();
+  }
+  return void 0;
+}
+function normalizeRgbColor(color) {
+  const match = color.trim().match(/^rgba?\((.+)\)$/i);
+  if (!match) {
+    return void 0;
+  }
+  const parts = match[1].replace(/\s*\/\s*/g, ",").split(/\s*,\s*|\s+/).filter(Boolean);
+  if (parts.length < 3) {
+    return void 0;
+  }
+  const red = parseRgbChannel(parts[0]);
+  const green = parseRgbChannel(parts[1]);
+  const blue = parseRgbChannel(parts[2]);
+  if (red === null || green === null || blue === null) {
+    return void 0;
+  }
+  const alpha = parts[3] !== void 0 ? parseAlphaChannel(parts[3]) : 1;
+  if (alpha === null || alpha <= 0) {
+    return void 0;
+  }
+  const flattened = alpha >= 1 ? [red, green, blue] : [
+    flattenChannel(red, alpha),
+    flattenChannel(green, alpha),
+    flattenChannel(blue, alpha)
+  ];
+  return flattened.map(toHexChannel).join("");
+}
+function normalizeBrowserColor(color) {
+  if (typeof document === "undefined") {
+    return void 0;
+  }
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return void 0;
+  }
+  context.fillStyle = "#000000";
+  context.fillStyle = color;
+  const normalized = context.fillStyle;
+  if (typeof normalized !== "string") {
+    return void 0;
+  }
+  return normalizeHexLiteral(normalized) || normalizeRgbColor(normalized);
+}
+function parseRgbChannel(value) {
+  if (value.endsWith("%")) {
+    const percent = Number(value.slice(0, -1));
+    if (!Number.isFinite(percent)) {
+      return null;
+    }
+    return clampColorChannel(Math.round(percent / 100 * 255));
+  }
+  const channel = Number(value);
+  if (!Number.isFinite(channel)) {
+    return null;
+  }
+  return clampColorChannel(Math.round(channel));
+}
+function parseAlphaChannel(value) {
+  if (value.endsWith("%")) {
+    const percent = Number(value.slice(0, -1));
+    if (!Number.isFinite(percent)) {
+      return null;
+    }
+    return Math.min(Math.max(percent / 100, 0), 1);
+  }
+  const alpha = Number(value);
+  if (!Number.isFinite(alpha)) {
+    return null;
+  }
+  return Math.min(Math.max(alpha, 0), 1);
+}
+function clampColorChannel(value) {
+  return Math.min(Math.max(value, 0), 255);
+}
+function flattenChannel(value, alpha) {
+  return clampColorChannel(Math.round(255 * (1 - alpha) + value * alpha));
+}
+function toHexChannel(value) {
+  return value.toString(16).padStart(2, "0").toUpperCase();
+}
+function getRegularImageType(mime) {
+  if (mime.includes("png")) return "png";
+  if (mime.includes("jpeg") || mime.includes("jpg")) return "jpg";
+  if (mime.includes("gif")) return "gif";
+  if (mime.includes("bmp")) return "bmp";
+  return null;
+}
+function normalizeDocxFileName(fileName) {
+  const trimmed = fileName?.trim();
+  if (!trimmed) {
+    return DEFAULT_DOCX_FILE_NAME;
+  }
+  return trimmed.toLowerCase().endsWith(".docx") ? trimmed : `${trimmed}.docx`;
+}
+
+// src/utils/docxLayout.ts
+var PX_TO_TWIP = 15;
+var ANCHOR_EPS = 0.5;
+var RIGHT_SLACK_TWIP = -14400;
+var TINY_TWIP = 1;
+var tw = (ctx, layoutPx) => Math.round(layoutPx / ctx.scale * PX_TO_TWIP);
+var pxTw = (px) => Math.round(px * PX_TO_TWIP);
+async function exportDrawToDocx(draw, options = {}) {
+  const canvas = document.createElement("canvas");
+  const measureCtx = canvas.getContext("2d");
+  const ctx = {
+    draw,
+    scale: draw.getOptions().scale,
+    measureCtx
+  };
+  const file = await createDocument(ctx);
+  const blob = await Packer.toBlob(file);
+  return { blob, fileName: normalizeDocxFileName(options.fileName) };
+}
+async function createDocument(ctx) {
+  const { draw, scale } = ctx;
+  const opts = draw.getOptions();
+  const width = draw.getOriginalWidth();
+  const height = draw.getOriginalHeight();
+  const margins = draw.getOriginalMargins();
+  const header = draw.getHeader();
+  const footer = draw.getFooter();
+  const headerTop = header.getHeaderTop() / scale;
+  const headerExtra = header.getExtraHeight() / scale;
+  const footerExtra = footer.getExtraHeight() / scale;
+  const layoutMargins = draw.getMargins();
+  const body = await serializeMain(ctx, layoutMargins[3]);
+  const headerChildren = opts.header.disabled ? [] : await serializeRows(ctx, header.getRowList(), {
+    startX: layoutMargins[3],
+    width: draw.getInnerWidth(),
+    positionList: header.getPositionList()
+  });
+  const footerChildren = opts.footer.disabled ? [] : await serializeFooter(ctx, width, height, margins);
+  const { pageNumber } = draw.getOptions();
   return new Document2({
-    features: {
-      updateFields: true
-    },
-    numbering: {
-      config: createNumberingConfig()
+    compatabilityModeVersion: 15,
+    // LibreOffice formats PAGE/NUMPAGES results from the paragraph style
+    styles: {
+      paragraphStyles: [
+        {
+          id: PAGE_NUMBER_STYLE,
+          name: "Windoc Page Number",
+          run: pageNumberRunStyle(pageNumber)
+        }
+      ]
     },
+    defaultTabStop: pxTw(width),
     sections: [
       {
         properties: {
           page: {
             size: {
-              width: pxToTwips(pageWidth),
-              height: pxToTwips(pageHeight),
-              orientation: paperDirection === "horizontal" /* HORIZONTAL */ ? PageOrientation.LANDSCAPE : PageOrientation.PORTRAIT
+              width: pxTw(width),
+              height: pxTw(height),
+              orientation: opts.paperDirection === "horizontal" /* HORIZONTAL */ ? PageOrientation.LANDSCAPE : PageOrientation.PORTRAIT
             },
             margin: {
-              top: pxToTwips(editorOptions.margins[0]),
-              right: pxToTwips(editorOptions.margins[1]),
-              bottom: pxToTwips(editorOptions.margins[2]),
-              left: pxToTwips(editorOptions.margins[3]),
-              header: pxToTwips(editorOptions.header.top),
-              footer: pxToTwips(editorOptions.footer.bottom)
-            },
-            pageNumbers: !editorOptions.pageNumber.disabled && editorOptions.pageNumber.fromPageNo === 0 ? {
-              start: editorOptions.pageNumber.startPageNo
-            } : void 0
+              top: pxTw(margins[0] + headerExtra),
+              right: pxTw(margins[1]),
+              bottom: pxTw(margins[2] + footerExtra),
+              left: pxTw(margins[3]),
+              header: pxTw(headerTop),
+              footer: pxTw(footer.getFooterBottom() / scale),
+              gutter: 0
+            }
           }
         },
-        headers: headerChildren.length > 0 ? {
-          default: new Header2({
-            children: headerChildren
-          })
-        } : void 0,
-        footers: footerChildren.length > 0 ? {
-          default: new Footer2({
-            children: footerChildren
-          })
-        } : void 0,
-        children: sectionChildren.length ? sectionChildren : [new Paragraph({})]
+        headers: headerChildren.length ? { default: new Header2({ children: headerChildren }) } : void 0,
+        footers: footerChildren.length ? { default: new Footer2({ children: footerChildren }) } : void 0,
+        children: body.length ? body : [new Paragraph({})]
       }
     ]
   });
 }
-async function serializeElementList(elementList, options, context) {
-  const blocks = [];
-  let inlineBuffer = [];
-  const flushInlineBuffer = async () => {
-    if (!inlineBuffer.length) return;
-    blocks.push(
-      ...await serializeInlineElements(inlineBuffer, options, context)
-    );
-    inlineBuffer = [];
+async function serializeMain(ctx, startX) {
+  const { draw } = ctx;
+  const zone = {
+    startX,
+    width: draw.getInnerWidth(),
+    positionList: draw.getPosition().getOriginalMainPositionList()
   };
-  for (let i = 0; i < elementList.length; i++) {
-    const element = elementList[i];
-    if (element.type === "area" /* AREA */ && element.valueList?.length) {
-      await flushInlineBuffer();
-      blocks.push(
-        ...await serializeElementList(element.valueList, options, context)
-      );
-      continue;
-    }
-    if (element.type === "title" /* TITLE */ && element.valueList?.length) {
-      await flushInlineBuffer();
-      blocks.push(
-        ...await serializeInlineElements(element.valueList, options, context, {
-          heading: titleHeadingMap[element.level || "first" /* FIRST */]
-        })
-      );
-      continue;
-    }
-    if (element.type === "list" /* LIST */ && element.valueList?.length) {
-      await flushInlineBuffer();
-      blocks.push(...await serializeListElement(element, options, context));
-      continue;
-    }
-    if (element.type === "table" /* TABLE */ && element.trList?.length) {
-      await flushInlineBuffer();
-      blocks.push(await serializeTableElement(element, options, context));
-      continue;
-    }
-    if (element.type === "pageBreak" /* PAGE_BREAK */) {
-      await flushInlineBuffer();
-      blocks.push(
-        new Paragraph({
-          children: [new PageBreak()]
-        })
-      );
-      continue;
-    }
-    if (element.type === "separator" /* SEPARATOR */) {
-      await flushInlineBuffer();
-      blocks.push(
-        new Paragraph({
-          thematicBreak: true
-        })
-      );
-      continue;
-    }
-    if (element.type === "image" /* IMAGE */ && element.imgDisplay && element.imgDisplay !== "inline") {
-      await flushInlineBuffer();
-      blocks.push(...await serializeInlineElements([element], options));
-      continue;
-    }
-    if (element.type === "block" /* BLOCK */) {
-      await flushInlineBuffer();
-      const blockText = getBlockFallbackText(element);
-      if (blockText) {
-        blocks.push(
-          ...await serializeInlineElements(
-            [{ value: blockText }],
-            options,
-            context
+  const children = [];
+  const pageRowList = draw.getPageRowList();
+  for (let p = 0; p < pageRowList.length; p++) {
+    children.push(
+      ...await serializeRows(ctx, pageRowList[p], zone, {
+        pageBreakBefore: p > 0
+      })
+    );
+  }
+  return children;
+}
+async function serializeRows(ctx, rowList, zone, options = {}) {
+  const { pageBreakBefore = false, padTop = 0, padBottom = 0 } = options;
+  const children = [];
+  for (let r = 0; r < rowList.length; r++) {
+    const row = rowList[r];
+    const isFirst = r === 0;
+    const isLast = r === rowList.length - 1;
+    const table = row.elementList.find((el) => el.type === "table" /* TABLE */);
+    if (table) {
+      if (isFirst && (pageBreakBefore || padTop) || row.offsetY) {
+        children.push(
+          createSpacerParagraph(
+            isFirst && pageBreakBefore,
+            (isFirst ? padTop : 0) + (row.offsetY || 0) / ctx.scale
           )
         );
       }
+      const position = zone.positionList[row.startIndex + row.elementList.indexOf(table)];
+      children.push(await serializeTable(ctx, table, position, zone));
+      const rest = (row.height + (row.spaceBelow || 0)) / ctx.scale - table.height + (isLast ? padBottom : 0);
+      if (rest * PX_TO_TWIP >= 1) {
+        children.push(createSpacerParagraph(false, rest));
+      }
       continue;
     }
-    inlineBuffer.push(element);
+    const rowOptions = {
+      pageBreakBefore: isFirst && pageBreakBefore,
+      padTop: isFirst ? padTop : 0,
+      padBottom: isLast ? padBottom : 0
+    };
+    if (!isFirst && isTextRow(rowList[r - 1])) rowOptions.skipLead = true;
+    rowOptions.rowY = rowY(zone, row);
+    if (!isLast && isTextRow(rowList[r + 1])) {
+      rowOptions.extraAfter = rowLead(ctx, rowList[r + 1], {
+        rowY: rowY(zone, rowList[r + 1])
+      });
+    }
+    const lead = rowOptions.pageBreakBefore ? rowLead(ctx, row, rowOptions) : 0;
+    if (lead) {
+      children.push(createSpacerParagraph(true, lead / PX_TO_TWIP));
+      rowOptions.pageBreakBefore = false;
+      rowOptions.skipLead = true;
+    }
+    children.push(await serializeRow(ctx, row, zone, rowOptions));
   }
-  await flushInlineBuffer();
-  return blocks;
+  return children;
 }
-async function serializeInlineElements(elementList, options, _context, overrides = {}) {
-  const paragraphs = [];
-  let current = null;
-  const getParagraphContext = (element) => ({
-    heading: overrides.heading,
-    numbering: overrides.numbering,
-    alignment: overrides.alignment !== void 0 ? overrides.alignment : mapRowFlexToAlignment(element?.rowFlex),
-    rowMargin: overrides.rowMargin !== void 0 ? overrides.rowMargin : element?.rowMargin
-  });
-  const flushParagraph = (context) => {
-    if (!current) {
-      if (!context) return;
-      paragraphs.push(createParagraph([], context, options.defaultRowMargin));
+function rowY(zone, row) {
+  return zone.positionList[row.startIndex]?.coordinate.leftTop[1];
+}
+function isTextRow(row) {
+  return !row.elementList.some((el) => el.type === "table" /* TABLE */);
+}
+async function serializeRow(ctx, row, zone, options, suffix) {
+  const { pageBreakBefore = false } = options;
+  const { draw, scale } = ctx;
+  const positions = zone.positionList;
+  const children = [];
+  const tabStops = [];
+  const firstPosition = positions[row.startIndex];
+  let pen = 0;
+  let indent = firstPosition ? (firstPosition.coordinate.leftTop[0] - zone.startX) / scale : 0;
+  let started = false;
+  const anchorTo = (layoutX) => {
+    const target = (layoutX - zone.startX) / scale;
+    if (!started) {
+      indent = target;
+      pen = target;
+      started = true;
       return;
     }
-    paragraphs.push(
-      createParagraph(
-        current.children,
-        current.context,
-        options.defaultRowMargin
-      )
-    );
-    current = null;
-  };
-  const ensureParagraph = (element) => {
-    if (!current) {
-      current = {
-        children: [],
-        context: getParagraphContext(element)
-      };
+    if (target - pen > ANCHOR_EPS) {
+      tabStops.push(pxTw(target));
+      children.push(new TextRun({ children: [new Tab()] }));
+      pen = target;
     }
-    return current;
   };
-  const appendText = (element, text, childFactory, preserveTrailingBreak = false) => {
-    const normalized = normalizeText(text);
-    const parts = normalized.split("\n");
-    let lastSeparatorFlushedContent = false;
-    for (let i = 0; i < parts.length; i++) {
-      const segment = parts[i];
-      if (segment) {
-        ensureParagraph(element).children.push(childFactory(segment));
-      }
-      if (i < parts.length - 1) {
-        if (!current) {
-          paragraphs.push(
-            createParagraph(
-              [],
-              getParagraphContext(element),
-              options.defaultRowMargin
-            )
-          );
-          lastSeparatorFlushedContent = false;
-        } else {
-          flushParagraph();
-          lastSeparatorFlushedContent = true;
-        }
-      }
-    }
-    if (preserveTrailingBreak && normalized.endsWith("\n") && lastSeparatorFlushedContent) {
-      paragraphs.push(
-        createParagraph(
-          [],
-          getParagraphContext(element),
-          options.defaultRowMargin
-        )
+  if (row.isList && firstPosition) {
+    const listParticle = draw.getListParticle();
+    const markerX = listParticle.getListMarkerX(row, firstPosition);
+    const marker = markerX === null ? null : listParticle.getListMarker(row);
+    if (markerX !== null && marker) {
+      anchorTo(markerX);
+      children.push(createTextRun(ctx, marker.text, marker.styleElement));
+      pen += measure(ctx, marker.text, marker.styleElement);
+    }
+  }
+  let run = null;
+  const flush = () => {
+    if (!run) return;
+    children.push(createTextRun(ctx, run.text, run.element));
+    run = null;
+  };
+  for (let j = 0; j < row.elementList.length; j++) {
+    const element = row.elementList[j];
+    const position = positions[row.startIndex + j];
+    if (!position) continue;
+    if (element.hide || element.control?.hide || element.area?.hide) continue;
+    if (element.type === "separator" /* SEPARATOR */) {
+      flush();
+      return createSeparatorParagraph(
+        ctx,
+        row,
+        element,
+        position.coordinate.leftTop[0],
+        position.coordinate.leftTop[1],
+        zone,
+        options
       );
     }
-  };
-  for (let i = 0; i < elementList.length; i++) {
-    const element = elementList[i];
-    if (element.type === "hyperlink" /* HYPERLINK */ && element.valueList?.length) {
-      const hyperlink = await createHyperlinkChild(element, options);
-      if (hyperlink) {
-        ensureParagraph(element).children.push(hyperlink);
-      }
+    if (element.value === ZERO || element.type === "tab" /* TAB */ || element.type === "pageBreak" /* PAGE_BREAK */ || element.type === "columnBreak" /* COLUMN_BREAK */) {
       continue;
     }
+    const x = position.coordinate.leftTop[0];
+    const layoutWidth = element.metrics.width / scale;
     if (element.type === "image" /* IMAGE */) {
-      const imageChild = await createImageChild(element);
-      if (!imageChild) {
-        appendText(
-          element,
-          "[Image unavailable]",
-          (segment) => createTextRun(
-            segment,
-            element,
-            options.defaultSize,
-            options.defaultFont
-          ),
-          i === elementList.length - 1
-        );
-        continue;
-      }
-      ensureParagraph(element).children.push(imageChild);
+      flush();
+      anchorTo(x);
+      const image = await createImageRun(element);
+      if (image) children.push(image);
+      pen += layoutWidth;
       continue;
     }
-    if (element.type === "columnBreak" /* COLUMN_BREAK */) {
-      ensureParagraph(element).children.push(new ColumnBreak());
-      continue;
-    }
-    if (element.type === "tab" /* TAB */) {
-      appendText(
-        element,
-        "	",
-        (segment) => createTextRun(
-          segment,
-          element,
-          options.defaultSize,
-          options.defaultFont
-        ),
-        i === elementList.length - 1
+    if (element.type === "label" /* LABEL */) {
+      flush();
+      const padding = element.label?.padding || draw.getOptions().label.defaultPadding;
+      anchorTo(x + padding[3] * scale);
+      children.push(
+        createTextRun(ctx, element.value, element, labelShading(ctx, element))
       );
+      pen += measure(ctx, element.value, element);
       continue;
     }
-    const textValue = getInlineElementText(element);
-    if (!textValue) {
-      continue;
-    }
-    appendText(
-      element,
-      textValue,
-      (segment) => createTextRun(
-        segment,
-        element,
-        options.defaultSize,
-        options.defaultFont
-      ),
-      i === elementList.length - 1
-    );
-  }
-  if (current) {
-    flushParagraph();
-  }
-  return paragraphs.length ? paragraphs : [createParagraph([], overrides, options.defaultRowMargin)];
-}
-async function serializeListElement(element, options, context) {
-  const zipList = zipElementList(element.valueList || []);
-  const listItemMap = splitListElement(zipList);
-  const paragraphs = [];
-  const listInstance = createListInstance(context);
-  for (const listItemElements of listItemMap.values()) {
-    const numbering = getListNumbering(
-      getListItemNumberingElement(listItemElements, element),
-      listInstance
-    );
-    paragraphs.push(
-      ...await serializeInlineElements(listItemElements, options, context, {
-        numbering
-      })
-    );
-  }
-  return paragraphs;
-}
-async function serializeTableElement(element, options, context) {
-  const rows = [];
-  const trList = element.trList || [];
-  const tableContext = createTableSerializeContext(element);
-  for (let i = 0; i < trList.length; i++) {
-    rows.push(
-      await serializeTableRow(trList[i], options, context, tableContext)
-    );
-  }
-  const tableWidth = getTableWidthFromColgroup(element.colgroup);
-  return new Table({
-    rows,
-    width: tableWidth ? {
-      size: pxToTwips(tableWidth),
-      type: WidthType.DXA
-    } : {
-      size: 100,
-      type: WidthType.PERCENTAGE
-    },
-    columnWidths: element.colgroup?.map((col) => pxToTwips(col.width)),
-    layout: TableLayoutType.FIXED,
-    borders: createTableBorders(element)
-  });
-}
-async function serializeTableRow(tr, options, context, tableContext) {
-  const children = [];
-  for (let i = 0; i < tr.tdList.length; i++) {
-    children.push(
-      await serializeTableCell(tr.tdList[i], options, context, tableContext)
-    );
-  }
-  return new TableRow({
-    children
-  });
-}
-async function serializeTableCell(td, options, context, tableContext) {
-  const children = await serializeElementList(td.value, options, context);
-  const shadingFill = td.backgroundColor ? normalizeHexColor(td.backgroundColor) : void 0;
-  const cellWidth = tableContext.cellLayoutMap.get(td)?.width || td.width;
-  return new TableCell({
-    children: children.length ? children : [new Paragraph({})],
-    columnSpan: td.colspan > 1 ? td.colspan : void 0,
-    rowSpan: td.rowspan > 1 ? td.rowspan : void 0,
-    verticalAlign: mapCellVerticalAlign(td.verticalAlign),
-    width: cellWidth ? {
-      size: pxToTwips(cellWidth),
-      type: WidthType.DXA
-    } : void 0,
-    shading: shadingFill ? {
-      fill: shadingFill,
-      type: ShadingType.CLEAR
-    } : void 0,
-    margins: mapPaddingToTableMargins(td.padding),
-    borders: createTableCellBorders(
-      td,
-      tableContext.borderColor,
-      tableContext.borderWidth
-    )
-  });
-}
-function createParagraph(children, context, defaultRowMargin) {
-  return new Paragraph({
-    children,
-    heading: context.heading,
-    numbering: context.numbering,
-    alignment: context.alignment,
-    spacing: {
-      line: Math.round(
-        240 * (context.rowMargin || defaultRowMargin || DEFAULT_LINE_HEIGHT)
-      ),
-      lineRule: LineRuleType.AUTO
-    }
-  });
-}
-function createTextRun(text, element, defaultSize, defaultFont) {
-  const color = element.color ? normalizeHexColor(element.color, "000000") : void 0;
-  const highlightFill = element.highlight ? normalizeHexColor(element.highlight) : void 0;
-  return new TextRun({
-    text,
-    bold: !!element.bold,
-    italics: !!element.italic,
-    strike: !!element.strikeout,
-    subScript: element.type === "subscript" /* SUBSCRIPT */,
-    superScript: element.type === "superscript" /* SUPERSCRIPT */,
-    color,
-    shading: highlightFill ? {
-      fill: highlightFill,
-      type: ShadingType.CLEAR
-    } : void 0,
-    underline: element.underline ? {
-      type: mapUnderlineType(element.textDecoration?.style)
-    } : void 0,
-    font: element.font || defaultFont,
-    size: Math.round((element.size || defaultSize) * 2)
-  });
-}
-async function createHyperlinkChild(element, options) {
-  if (!element.url) {
-    const fallbackText = getTextFromElementList(element.valueList || []);
-    return fallbackText ? createTextRun(
-      fallbackText,
-      element.valueList?.[0] || element,
-      options.defaultSize,
-      options.defaultFont
-    ) : null;
-  }
-  const children = await createHyperlinkRuns(
-    element.valueList || [],
-    options.defaultSize,
-    options.defaultFont
-  );
-  if (!children.length) {
-    return null;
-  }
-  return new ExternalHyperlink({
-    link: element.url,
-    children
-  });
-}
-async function createHyperlinkRuns(valueList, defaultSize, defaultFont) {
-  const children = [];
-  for (let i = 0; i < valueList.length; i++) {
-    const element = valueList[i];
-    if (element.type === "tab" /* TAB */) {
-      children.push(createTextRun("	", element, defaultSize, defaultFont));
-      continue;
-    }
-    const text = normalizeText(getInlineElementText(element)).replace(
-      /\n/g,
-      " "
-    );
-    if (text) {
-      children.push(createTextRun(text, element, defaultSize, defaultFont));
-    }
-  }
-  return children;
-}
-async function createImageChild(element) {
-  try {
-    const image = await loadImagePayload(element.value);
-    const width = Math.max(1, Math.round(element.width || DEFAULT_IMAGE_WIDTH));
-    const height = Math.max(
-      1,
-      Math.round(element.height || DEFAULT_IMAGE_HEIGHT)
-    );
-    if (image.type === "svg" && image.fallbackPng) {
-      return new ImageRun({
-        type: "svg",
-        data: image.data,
-        fallback: {
-          type: "png",
-          data: image.fallbackPng
-        },
-        transformation: {
-          width,
-          height
-        }
-      });
-    }
-    return new ImageRun({
-      type: image.type,
-      data: image.data,
-      transformation: {
-        width,
-        height
+    const text = getElementText(element);
+    if (!text) continue;
+    const natural = measure(ctx, text, element);
+    const target = (x - zone.startX) / scale;
+    const isDrift = !started || target - pen > ANCHOR_EPS;
+    const extra = layoutWidth - natural;
+    const needsSpacing = Math.abs(extra) * PX_TO_TWIP >= 1;
+    const canJoin = run && !isDrift && !needsSpacing && isSameRunStyle(run.element, element);
+    if (canJoin) {
+      run.text += text;
+    } else {
+      flush();
+      anchorTo(x);
+      if (needsSpacing) {
+        children.push(
+          createTextRun(ctx, text, element, void 0, pxTw(extra))
+        );
+      } else {
+        run = { text, element };
       }
-    });
-  } catch {
-    return null;
-  }
-}
-async function loadImagePayload(src) {
-  const source = src.trim();
-  if (source.startsWith("data:")) {
-    return getImagePayloadFromDataUrl(source);
-  }
-  const response = await fetch(source);
-  if (!response.ok) {
-    throw new Error(`Image request failed: ${response.status}`);
-  }
-  const contentType = response.headers.get("content-type") || "";
-  const data2 = await response.arrayBuffer();
-  return normalizeImagePayload(data2, contentType);
-}
-async function getImagePayloadFromDataUrl(src) {
-  const [, meta = "", encoded = ""] = src.match(/^data:([^,]*),(.*)$/) || [];
-  const mime = meta.split(";")[0] || "";
-  const isBase64 = meta.includes(";base64");
-  const text = isBase64 ? atob(encoded) : decodeURIComponent(encoded);
-  const bytes = new Uint8Array(text.length);
-  for (let i = 0; i < text.length; i++) {
-    bytes[i] = text.charCodeAt(i);
-  }
-  return normalizeImagePayload(bytes.buffer, mime);
-}
-async function normalizeImagePayload(data2, mime) {
-  const type = getRegularImageType(mime);
-  if (type) {
-    return {
-      type,
-      data: data2
-    };
-  }
-  if (mime.includes("svg")) {
-    return {
-      type: "svg",
-      data: data2,
-      fallbackPng: await rasterizeSvgToPng(data2)
-    };
-  }
-  const fallbackPng = await rasterizeImageToPng(data2, mime);
-  return {
-    type: "png",
-    data: fallbackPng
-  };
-}
-async function rasterizeSvgToPng(data2) {
-  return rasterizeImageToPng(data2, "image/svg+xml");
-}
-async function rasterizeImageToPng(data2, mime) {
-  const blob = new Blob([data2], {
-    type: mime || "image/png"
-  });
-  const url = URL.createObjectURL(blob);
-  try {
-    const image = await loadHtmlImage(url);
-    const canvas = document.createElement("canvas");
-    canvas.width = image.naturalWidth || DEFAULT_IMAGE_WIDTH;
-    canvas.height = image.naturalHeight || DEFAULT_IMAGE_HEIGHT;
-    const context = canvas.getContext("2d");
-    if (!context) {
-      throw new Error("Canvas context is unavailable");
     }
-    context.drawImage(image, 0, 0, canvas.width, canvas.height);
-    const pngBlob = await new Promise((resolve, reject) => {
-      canvas.toBlob((output) => {
-        if (output) {
-          resolve(output);
-        } else {
-          reject(new Error("Failed to create PNG blob"));
-        }
-      }, "image/png");
-    });
-    return await pngBlob.arrayBuffer();
-  } finally {
-    URL.revokeObjectURL(url);
+    pen = target + layoutWidth;
   }
-}
-function loadHtmlImage(src) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => resolve(image);
-    image.onerror = () => reject(new Error("Failed to load image"));
-    image.src = src;
-  });
-}
-function createPageNumberParagraph(pageNumber) {
-  if (pageNumber.disabled || pageNumber.fromPageNo > 0) {
-    return null;
+  flush();
+  if (!children.length && !suffix) {
+    const total = (options.skipLead ? 0 : rowLead(ctx, row, options)) + rowLine(ctx, row).lineTw + rowSpacing(ctx, row, options).after;
+    return createSpacerParagraph(pageBreakBefore, total / PX_TO_TWIP);
   }
-  const children = [];
-  const format = pageNumber.format || FORMAT_PLACEHOLDER.PAGE_NO;
-  const tokens = format.split(/(\{pageNo\}|\{pageCount\})/);
-  for (let i = 0; i < tokens.length; i++) {
-    const token = tokens[i];
-    if (!token) continue;
-    const runChildren = token === FORMAT_PLACEHOLDER.PAGE_NO ? [PageNumber2.CURRENT] : token === FORMAT_PLACEHOLDER.PAGE_COUNT ? [PageNumber2.TOTAL_PAGES] : void 0;
-    children.push(
-      new TextRun({
-        text: runChildren ? void 0 : token,
-        children: runChildren,
-        color: normalizeHexColor(pageNumber.color || "#000000", "000000"),
-        font: pageNumber.font,
-        size: Math.round((pageNumber.size || 12) * 2)
-      })
-    );
+  const stops = tabStops.map((position) => ({ type: TabStopType.LEFT, position }));
+  if (suffix) {
+    stops.push({ type: suffix.tabType, position: suffix.tabStop });
+    children.push(new TextRun({ children: [new Tab()] }), ...suffix.children);
   }
   return new Paragraph({
     children,
-    alignment: mapRowFlexToAlignment(pageNumber.rowFlex)
+    style: suffix?.style,
+    pageBreakBefore,
+    widowControl: false,
+    tabStops: stops,
+    indent: { left: pxTw(indent), right: RIGHT_SLACK_TWIP },
+    spacing: rowSpacing(ctx, row, options)
   });
 }
-function createNumberingConfig() {
-  const config = [
-    createOrderedReference("windoc-ol-decimal", Array(9).fill("decimal" /* DECIMAL */)),
-    createOrderedReference(
-      "windoc-ol-lower-alpha",
-      Array(9).fill("lowerAlpha" /* LOWER_ALPHA */)
-    ),
-    createOrderedReference(
-      "windoc-ol-upper-alpha",
-      Array(9).fill("upperAlpha" /* UPPER_ALPHA */)
-    ),
-    createOrderedReference(
-      "windoc-ol-lower-roman",
-      Array(9).fill("lowerRoman" /* LOWER_ROMAN */)
-    ),
-    createOrderedReference(
-      "windoc-ol-upper-roman",
-      Array(9).fill("upperRoman" /* UPPER_ROMAN */)
-    ),
-    createOrderedReference(
-      "windoc-ol-decimal-paren",
-      Array(9).fill("decimalParen" /* DECIMAL_PAREN */)
-    ),
-    createOrderedReference(
-      `windoc-ol-${"olDefault" /* DEFAULT */}`,
-      createCycleList(olPresetCycles["olDefault" /* DEFAULT */], 9)
-    ),
-    createOrderedReference(
-      `windoc-ol-${"olParen" /* PARENTHESIS */}`,
-      createCycleList(olPresetCycles["olParen" /* PARENTHESIS */], 9)
-    ),
-    createOrderedReference(
-      `windoc-ol-${"olOutline" /* OUTLINE */}`,
-      createCycleList(olPresetCycles["olOutline" /* OUTLINE */], 9)
-    ),
-    createOrderedReference(
-      `windoc-ol-${"olUpperA" /* UPPER_ALPHA */}`,
-      createCycleList(olPresetCycles["olUpperA" /* UPPER_ALPHA */], 9)
-    ),
-    createOrderedReference(
-      `windoc-ol-${"olRoman" /* ROMAN */}`,
-      createCycleList(olPresetCycles["olRoman" /* ROMAN */], 9)
-    ),
-    createOrderedReference(
-      `windoc-ol-${"olZeroPad" /* ZERO_PAD */}`,
-      createCycleList(olPresetCycles["olZeroPad" /* ZERO_PAD */], 9)
-    ),
-    createBulletReference(
-      "windoc-ul-disc",
-      Array(9).fill(docxBulletCharMap["disc" /* DISC */])
-    ),
-    createBulletReference(
-      "windoc-ul-circle",
-      Array(9).fill(docxBulletCharMap["circle" /* CIRCLE */])
-    ),
-    createBulletReference(
-      "windoc-ul-square",
-      Array(9).fill(docxBulletCharMap["square" /* SQUARE */])
-    ),
-    createBulletReference(
-      "windoc-ul-checkbox",
-      Array(9).fill(docxBulletCharMap["checkbox" /* CHECKBOX */])
-    ),
-    createBulletReference(
-      `windoc-ul-${"ulDefault" /* DEFAULT */}`,
-      createCycleList(ulPresetCycles["ulDefault" /* DEFAULT */], 9)
-    ),
-    createBulletReference(
-      `windoc-ul-${"ulDiamond" /* DIAMOND */}`,
-      createCycleList(ulPresetCycles["ulDiamond" /* DIAMOND */], 9)
-    ),
-    createBulletReference(
-      `windoc-ul-${"ulHollowSq" /* HOLLOW_SQ */}`,
-      createCycleList(ulPresetCycles["ulHollowSq" /* HOLLOW_SQ */], 9)
-    ),
-    createBulletReference(
-      `windoc-ul-${"ulArrow" /* ARROW */}`,
-      createCycleList(ulPresetCycles["ulArrow" /* ARROW */], 9)
-    ),
-    createBulletReference(
-      `windoc-ul-${"ulStar" /* STAR */}`,
-      createCycleList(ulPresetCycles["ulStar" /* STAR */], 9)
-    ),
-    createBulletReference(
-      `windoc-ul-${"ulCheckArr" /* CHECK_ARROW */}`,
-      createCycleList(ulPresetCycles["ulCheckArr" /* CHECK_ARROW */], 9)
-    )
-  ];
-  return config;
-}
-function createOrderedReference(reference, styles) {
-  return {
-    reference,
-    levels: styles.map((style, level) => ({
-      level,
-      format: orderedStyleFormatMap[style] || LevelFormat.DECIMAL,
-      text: getOrderedLevelText(style, level),
-      alignment: AlignmentType.START,
-      style: {
-        paragraph: {
-          indent: {
-            left: 720 * (level + 1),
-            hanging: 360
-          }
-        }
-      }
-    }))
-  };
-}
-function createBulletReference(reference, bullets) {
-  return {
-    reference,
-    levels: bullets.map((bullet, level) => ({
-      level,
-      format: LevelFormat.BULLET,
-      text: bullet,
-      alignment: AlignmentType.START,
-      style: {
-        paragraph: {
-          indent: {
-            left: 720 * (level + 1),
-            hanging: 360
-          }
-        }
-      }
-    }))
-  };
-}
-function getOrderedLevelText(style, level) {
-  const placeholder = `%${level + 1}`;
-  if (style === "outline") {
-    return Array.from({ length: level + 1 }, (_, index) => `%${index + 1}`).join(
-      "."
-    ) + ".";
-  }
-  if (style.endsWith("Paren") || style === "decimalParen" /* DECIMAL_PAREN */) {
-    return `${placeholder})`;
-  }
-  return `${placeholder}.`;
-}
-function createCycleList(source = [], size) {
-  const result = [];
-  for (let i = 0; i < size; i++) {
-    result.push(source[i % source.length]);
-  }
-  return result;
-}
-function getListNumbering(element, instance) {
-  const level = Math.max(0, Math.min(element.listLevel || 0, 8));
-  if (element.listType === "ul" /* UL */) {
-    const reference2 = element.listPreset ? `windoc-ul-${element.listPreset}` : `windoc-ul-${element.listStyle || "disc" /* DISC */}`;
-    return {
-      reference: reference2,
-      level,
-      instance
-    };
-  }
-  const reference = element.listPreset ? `windoc-ol-${element.listPreset}` : getOrderedReferenceFromStyle(element.listStyle);
-  return {
-    reference,
-    level,
-    instance
-  };
-}
-function getOrderedReferenceFromStyle(style) {
-  switch (style) {
-    case "lowerAlpha" /* LOWER_ALPHA */:
-      return "windoc-ol-lower-alpha";
-    case "upperAlpha" /* UPPER_ALPHA */:
-      return "windoc-ol-upper-alpha";
-    case "lowerRoman" /* LOWER_ROMAN */:
-      return "windoc-ol-lower-roman";
-    case "upperRoman" /* UPPER_ROMAN */:
-      return "windoc-ol-upper-roman";
-    case "decimalParen" /* DECIMAL_PAREN */:
-      return "windoc-ol-decimal-paren";
-    default:
-      return "windoc-ol-decimal";
-  }
-}
-function createTableBorders(element) {
-  const outerBorder = createBorder(
-    element.borderColor,
-    BorderStyle.SINGLE,
-    element.borderExternalWidth || element.borderWidth
-  );
-  const innerBorder = createBorder(
-    element.borderColor,
-    BorderStyle.SINGLE,
-    element.borderWidth
-  );
-  switch (element.borderType) {
-    case "empty" /* EMPTY */:
-      return {
-        top: noneBorder(),
-        bottom: noneBorder(),
-        left: noneBorder(),
-        right: noneBorder(),
-        insideHorizontal: noneBorder(),
-        insideVertical: noneBorder()
-      };
-    case "external" /* EXTERNAL */:
-      return {
-        top: outerBorder,
-        bottom: outerBorder,
-        left: outerBorder,
-        right: outerBorder,
-        insideHorizontal: noneBorder(),
-        insideVertical: noneBorder()
-      };
-    case "internal" /* INTERNAL */:
-      return {
-        top: noneBorder(),
-        bottom: noneBorder(),
-        left: noneBorder(),
-        right: noneBorder(),
-        insideHorizontal: innerBorder,
-        insideVertical: innerBorder
-      };
-    case "dash" /* DASH */:
-      return {
-        top: createBorder(
-          element.borderColor,
-          BorderStyle.DASHED,
-          element.borderExternalWidth || element.borderWidth
-        ),
-        bottom: createBorder(
-          element.borderColor,
-          BorderStyle.DASHED,
-          element.borderExternalWidth || element.borderWidth
-        ),
-        left: createBorder(
-          element.borderColor,
-          BorderStyle.DASHED,
-          element.borderExternalWidth || element.borderWidth
-        ),
-        right: createBorder(
-          element.borderColor,
-          BorderStyle.DASHED,
-          element.borderExternalWidth || element.borderWidth
-        ),
-        insideHorizontal: createBorder(
-          element.borderColor,
-          BorderStyle.DASHED,
-          element.borderWidth
-        ),
-        insideVertical: createBorder(
-          element.borderColor,
-          BorderStyle.DASHED,
-          element.borderWidth
-        )
-      };
-    default:
-      return {
-        top: outerBorder,
-        bottom: outerBorder,
-        left: outerBorder,
-        right: outerBorder,
-        insideHorizontal: innerBorder,
-        insideVertical: innerBorder
-      };
-  }
-}
-function createTableCellBorders(td, inheritedColor, inheritedWidth) {
-  if (!td.borderTypes?.length && !td.borderColor) {
-    return void 0;
-  }
-  const color = td.borderColor || inheritedColor;
-  const createCellBorder = () => createBorder(color, BorderStyle.SINGLE, inheritedWidth);
-  if (td.borderColor && !td.borderTypes?.length) {
-    return {
-      top: createCellBorder(),
-      right: createCellBorder(),
-      bottom: createCellBorder(),
-      left: createCellBorder()
-    };
-  }
-  const top = td.borderTypes?.includes("top" /* TOP */) ? createCellBorder() : noneBorder();
-  const right2 = td.borderTypes?.includes("right" /* RIGHT */) ? createCellBorder() : noneBorder();
-  const bottom = td.borderTypes?.includes("bottom" /* BOTTOM */) ? createCellBorder() : noneBorder();
-  const left2 = td.borderTypes?.includes("left" /* LEFT */) ? createCellBorder() : noneBorder();
-  return {
-    top,
-    right: right2,
-    bottom,
-    left: left2
-  };
-}
-function createBorder(color = "#000000", style = BorderStyle.SINGLE, width = 1) {
-  return {
-    style,
-    color: normalizeHexColor(color, "000000") || "000000",
-    size: pxBorderToDocxSize(width)
-  };
-}
-function noneBorder() {
-  return {
-    style: BorderStyle.NONE,
-    size: 0,
-    color: "FFFFFF"
-  };
-}
-function mapPaddingToTableMargins(padding) {
-  if (!padding) return void 0;
-  return {
-    top: pxToTwips(padding[0]),
-    right: pxToTwips(padding[1]),
-    bottom: pxToTwips(padding[2]),
-    left: pxToTwips(padding[3]),
-    marginUnitType: WidthType.DXA
-  };
-}
-function mapCellVerticalAlign(verticalAlign) {
-  switch (verticalAlign) {
-    case VerticalAlign.CENTER:
-      return DocxVerticalAlign.CENTER;
-    case "bottom" /* BOTTOM */:
-      return DocxVerticalAlign.BOTTOM;
-    default:
-      return DocxVerticalAlign.TOP;
-  }
-}
-function mapRowFlexToAlignment(rowFlex) {
-  switch (rowFlex) {
-    case "center" /* CENTER */:
-      return AlignmentType.CENTER;
-    case "right" /* RIGHT */:
-      return AlignmentType.RIGHT;
-    case "alignment" /* ALIGNMENT */:
-    case "justify" /* JUSTIFY */:
-      return AlignmentType.JUSTIFIED;
-    default:
-      return AlignmentType.LEFT;
-  }
-}
-function mapUnderlineType(style) {
-  switch (style) {
-    case "double" /* DOUBLE */:
-      return UnderlineType.DOUBLE;
-    case "dashed" /* DASHED */:
-      return UnderlineType.DASH;
-    case "dotted" /* DOTTED */:
-      return UnderlineType.DOTTED;
-    case "wavy" /* WAVY */:
-      return UnderlineType.WAVE;
-    default:
-      return UnderlineType.SINGLE;
-  }
-}
-function getInlineElementText(element) {
-  switch (element.type) {
-    case "control" /* CONTROL */:
-      return getControlText(element.control);
-    case "date" /* DATE */:
-      return element.valueList?.length ? getTextFromElementList(element.valueList) : element.value;
-    case "checkbox" /* CHECKBOX */:
-      return element.checkbox?.value ? "\u2611" : "\u2610";
-    case "radio" /* RADIO */:
-      return element.radio?.value ? "\u25C9" : "\u25CB";
-    case "label" /* LABEL */:
-    case "latex" /* LATEX */:
-    case "subscript" /* SUBSCRIPT */:
-    case "superscript" /* SUPERSCRIPT */:
-      return element.value;
-    default:
-      return element.value;
-  }
-}
-function getControlText(control) {
-  if (!control) return "";
-  if (control.type === "text" /* TEXT */ || control.type === "date" /* DATE */ || control.type === "number" /* NUMBER */) {
-    const value = control.value?.length ? getTextFromElementList(control.value) : "";
-    const content = value || control.placeholder || "";
-    return `${control.preText || ""}${content}${control.postText || ""}`;
-  }
-  if (control.type === "select" /* SELECT */) {
-    const labels = getSelectedControlLabels(control.code, control.valueSets);
-    const content = labels.length ? labels.join(control.multiSelectDelimiter || ", ") : control.placeholder || "";
-    return `${control.preText || ""}${content}${control.postText || ""}`;
-  }
-  if (control.type === "checkbox" /* CHECKBOX */ || control.type === "radio" /* RADIO */) {
-    const isRadio = control.type === "radio" /* RADIO */;
-    return (control.valueSets || []).map((valueSet) => {
-      const checked = control.code?.split(",").includes(valueSet.code) || false;
-      return `${checked ? isRadio ? "\u25C9" : "\u2611" : isRadio ? "\u25CB" : "\u2610"} ${valueSet.value}`;
-    }).join("  ");
-  }
-  return "";
-}
-function getSelectedControlLabels(code, valueSets) {
-  if (!code || !valueSets?.length) return [];
-  return code.split(",").map(
-    (selectCode) => valueSets.find((valueSet) => valueSet.code === selectCode)?.value
-  ).filter((value) => !!value);
-}
-function getBlockFallbackText(element) {
-  if (element.block?.iframeBlock?.src) {
-    return element.block.iframeBlock.src;
-  }
-  if (element.block?.videoBlock?.src) {
-    return element.block.videoBlock.src;
-  }
-  return "";
-}
-function normalizeText(text = "") {
-  return text.replace(new RegExp(ZERO, "g"), "").replace(/\r\n/g, "\n");
+var EXACT_BASELINE_RATIO = 0.8;
+function rowLine(ctx, row, baseline = row.ascent / ctx.scale) {
+  const { scale } = ctx;
+  const height = row.height / scale;
+  const ascent = Math.min(baseline, height);
+  const line = Math.min(
+    ascent / EXACT_BASELINE_RATIO,
+    (height - ascent) / (1 - EXACT_BASELINE_RATIO)
+  );
+  const lineTw = Math.max(TINY_TWIP, pxTw(line));
+  const beforeTw = Math.max(
+    0,
+    pxTw(ascent) - Math.round(lineTw * EXACT_BASELINE_RATIO)
+  );
+  const afterTw = Math.max(0, pxTw(height) - lineTw - beforeTw);
+  return { lineTw, beforeTw, afterTw };
 }
-function createSerializeContext() {
+function rowLead(ctx, row, options) {
+  const separator = row.elementList.find(
+    (el) => el.type === "separator" /* SEPARATOR */
+  );
+  const baseline = separator && options.rowY !== void 0 ? separatorBaseline(
+    ctx,
+    row,
+    options.rowY,
+    separator.lineWidth || ctx.draw.getOptions().separator.lineWidth
+  ) : void 0;
+  return rowLine(ctx, row, baseline).beforeTw + tw(ctx, (row.offsetY || 0) + (row.spaceAbove || 0)) + pxTw(options.padTop || 0);
+}
+function rowSpacing(ctx, row, options) {
+  const { lineTw, afterTw } = rowLine(ctx, row);
   return {
-    nextListInstance: 1
+    before: options.skipLead ? 0 : rowLead(ctx, row, options),
+    after: afterTw + tw(ctx, row.spaceBelow || 0) + pxTw(options.padBottom || 0) + (options.extraAfter || 0),
+    line: lineTw,
+    lineRule: LineRuleType.EXACT
   };
 }
-function getListItemNumberingElement(listItemElements, fallback) {
-  return listItemElements.find(
-    (listItem) => listItem.listId || listItem.listLevel !== void 0 || !!listItem.listPreset || !!listItem.listStyle || !!listItem.listType
-  ) || fallback;
+function createSeparatorParagraph(ctx, row, element, x, rowY2, zone, options) {
+  const { scale } = ctx;
+  const opts = ctx.draw.getOptions();
+  const lineWidth = element.lineWidth || opts.separator.lineWidth;
+  const sideGap = 4;
+  const left2 = (x - zone.startX) / scale + sideGap;
+  const width = Math.max(1, (element.width || 0) - sideGap * 2);
+  const color = element.color || opts.separator.strokeStyle;
+  const line = rowLine(ctx, row, separatorBaseline(ctx, row, rowY2, lineWidth));
+  return new Paragraph({
+    pageBreakBefore: options.pageBreakBefore,
+    widowControl: false,
+    indent: { left: pxTw(left2), right: RIGHT_SLACK_TWIP },
+    children: [
+      new ImageRun({
+        type: "png",
+        data: createLineImage(width, lineWidth, color, element.dashArray),
+        transformation: { width, height: lineWidth }
+      })
+    ],
+    spacing: {
+      before: options.skipLead ? 0 : rowLead(ctx, row, options),
+      after: line.afterTw + tw(ctx, row.spaceBelow || 0) + pxTw(options.padBottom || 0) + (options.extraAfter || 0),
+      line: line.lineTw,
+      lineRule: LineRuleType.EXACT
+    }
+  });
 }
-function createListInstance(context) {
-  return context.nextListInstance++;
+function separatorBaseline(ctx, row, rowY2, lineWidth) {
+  return (Math.round(rowY2 + row.ascent) - rowY2) / ctx.scale + lineWidth;
 }
-function createTableSerializeContext(element) {
-  return {
-    cellLayoutMap: computeTableCellLayout(
-      element.trList || [],
-      element.colgroup || []
-    ),
-    borderColor: element.borderColor,
-    borderWidth: element.borderWidth,
-    borderExternalWidth: element.borderExternalWidth
-  };
+function createLineImage(width, height, color, dashArray) {
+  const ratio = 4;
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(width * ratio));
+  canvas.height = Math.max(1, Math.round(height * ratio));
+  const ctx = canvas.getContext("2d");
+  ctx.strokeStyle = color;
+  ctx.lineWidth = canvas.height;
+  if (dashArray?.length) ctx.setLineDash(dashArray.map((v) => v * ratio));
+  ctx.beginPath();
+  ctx.moveTo(0, canvas.height / 2);
+  ctx.lineTo(canvas.width, canvas.height / 2);
+  ctx.stroke();
+  const binary = atob(canvas.toDataURL("image/png").split(",")[1]);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}
+function createSpacerParagraph(pageBreakBefore, height = 0) {
+  return new Paragraph({
+    pageBreakBefore,
+    widowControl: false,
+    children: [new TextRun({ text: "", size: 2 })],
+    spacing: {
+      before: 0,
+      after: 0,
+      line: Math.max(TINY_TWIP, pxTw(height)),
+      lineRule: LineRuleType.EXACT
+    }
+  });
 }
-function computeTableCellLayout(trList, colgroup) {
-  const cellLayoutMap = /* @__PURE__ */ new WeakMap();
-  if (!trList.length || !colgroup.length) {
-    return cellLayoutMap;
-  }
-  const occupiedUntilRow = Array(colgroup.length).fill(0);
-  for (let rowIndex = 0; rowIndex < trList.length; rowIndex++) {
-    const tr = trList[rowIndex];
-    let colIndex = 0;
-    for (let tdIndex = 0; tdIndex < tr.tdList.length; tdIndex++) {
-      while (colIndex < colgroup.length && occupiedUntilRow[colIndex] > rowIndex) {
-        colIndex += 1;
-      }
-      const td = tr.tdList[tdIndex];
-      let width = 0;
-      for (let currentCol = colIndex; currentCol < colIndex + td.colspan && currentCol < colgroup.length; currentCol++) {
-        width += colgroup[currentCol].width;
-        occupiedUntilRow[currentCol] = Math.max(
-          occupiedUntilRow[currentCol],
-          rowIndex + td.rowspan
-        );
-      }
-      cellLayoutMap.set(td, { width });
-      colIndex += td.colspan;
+async function serializeTable(ctx, element, position, zone) {
+  const { draw, scale } = ctx;
+  const opts = draw.getOptions();
+  const tableX = position.coordinate.leftTop[0];
+  const trList = element.trList || [];
+  const colgroup = element.colgroup || [];
+  const rows = [];
+  for (let t = 0; t < trList.length; t++) {
+    const tr = trList[t];
+    const cells = [];
+    let rowTopBorder = 0;
+    for (let d = 0; d < tr.tdList.length; d++) {
+      const td = tr.tdList[d];
+      const padding = td.padding || opts.table.tdPadding;
+      const borders = createCellBorders(ctx, element, td);
+      const topBorder = t === 0 ? borderPx(borders.top) : 0;
+      rowTopBorder = Math.max(rowTopBorder, topBorder);
+      const cellChildren = await serializeRows(
+        ctx,
+        td.rowList || [],
+        {
+          startX: (td.x + padding[3]) * scale + tableX,
+          width: (td.width - padding[1] - padding[3]) * scale,
+          positionList: td.positionList || []
+        },
+        { padTop: Math.max(0, padding[0] - topBorder), padBottom: padding[2] }
+      );
+      cells.push(
+        new TableCell({
+          children: cellChildren.length ? cellChildren : [createSpacerParagraph(false)],
+          columnSpan: td.colspan > 1 ? td.colspan : void 0,
+          rowSpan: td.rowspan > 1 ? td.rowspan : void 0,
+          width: { size: pxTw(td.width), type: WidthType.DXA },
+          verticalAlign: mapVerticalAlign(td.verticalAlign),
+          margins: {
+            top: 0,
+            right: pxTw(padding[1]),
+            bottom: 0,
+            left: pxTw(Math.max(0, padding[3] - borderPx(borders.left) / 2)),
+            marginUnitType: WidthType.DXA
+          },
+          shading: td.backgroundColor ? {
+            fill: normalizeHexColor(td.backgroundColor, "FFFFFF"),
+            type: ShadingType.CLEAR,
+            color: "auto"
+          } : void 0,
+          borders
+        })
+      );
     }
+    rows.push(
+      new TableRow({
+        children: cells,
+        cantSplit: true,
+        height: {
+          value: pxTw(tr.height - rowTopBorder),
+          rule: HeightRule.EXACT
+        }
+      })
+    );
   }
-  return cellLayoutMap;
+  return new Table({
+    rows,
+    layout: TableLayoutType.FIXED,
+    width: { size: pxTw(element.width), type: WidthType.DXA },
+    columnWidths: colgroup.map((col) => pxTw(col.width)),
+    indent: { size: tw(ctx, tableX - zone.startX), type: WidthType.DXA },
+    borders: noTableBorders()
+  });
 }
-function getTableWidthFromColgroup(colgroup) {
-  if (!colgroup?.length) {
-    return void 0;
-  }
-  return colgroup.reduce((sum, col) => sum + col.width, 0);
+function createCellBorders(ctx, table, td) {
+  const opts = ctx.draw.getOptions();
+  const color = normalizeHexColor(
+    td.borderColor || table.borderColor || opts.table.defaultBorderColor,
+    "000000"
+  );
+  const width = table.borderWidth || 1;
+  const externalWidth = table.borderExternalWidth || width;
+  const isDash = table.borderType === "dash" /* DASH */;
+  const line = (w) => ({
+    style: isDash ? BorderStyle.DASHED : BorderStyle.SINGLE,
+    size: Math.max(2, Math.round(w * 6)),
+    color
+  });
+  const none = { style: BorderStyle.NONE, size: 0, color: "auto" };
+  const isTop = td.rowIndex === 0;
+  const isLeft = td.colIndex === 0;
+  const isBottom = td.rowIndex + td.rowspan === table.trList.length;
+  const isRight = td.colIndex + td.colspan === table.colgroup.length;
+  const edge = (outer) => outer ? line(externalWidth) : line(width);
+  let top = none;
+  let right2 = none;
+  let bottom = none;
+  let left2 = none;
+  switch (table.borderType) {
+    case "empty" /* EMPTY */:
+      break;
+    case "external" /* EXTERNAL */:
+      if (isTop) top = edge(true);
+      if (isBottom) bottom = edge(true);
+      if (isLeft) left2 = edge(true);
+      if (isRight) right2 = edge(true);
+      break;
+    case "internal" /* INTERNAL */:
+      if (!isTop) top = edge(false);
+      if (!isBottom) bottom = edge(false);
+      if (!isLeft) left2 = edge(false);
+      if (!isRight) right2 = edge(false);
+      break;
+    default:
+      top = edge(isTop);
+      bottom = edge(isBottom);
+      left2 = edge(isLeft);
+      right2 = edge(isRight);
+  }
+  if (td.borderTypes?.includes("top" /* TOP */)) top = line(width);
+  if (td.borderTypes?.includes("right" /* RIGHT */)) right2 = line(width);
+  if (td.borderTypes?.includes("bottom" /* BOTTOM */)) bottom = line(width);
+  if (td.borderTypes?.includes("left" /* LEFT */)) left2 = line(width);
+  return { top, right: right2, bottom, left: left2 };
+}
+function borderPx(border) {
+  return border.style === BorderStyle.NONE ? 0 : border.size / 8 * (4 / 3);
+}
+function noTableBorders() {
+  const none = { style: BorderStyle.NONE, size: 0, color: "auto" };
+  return {
+    top: none,
+    bottom: none,
+    left: none,
+    right: none,
+    insideHorizontal: none,
+    insideVertical: none
+  };
 }
-function normalizeHexColor(color, fallback) {
-  const normalized = normalizeHexLiteral(color) || normalizeRgbColor(color) || normalizeBrowserColor(color);
-  if (normalized) {
-    return normalized;
+function mapVerticalAlign(verticalAlign) {
+  switch (verticalAlign) {
+    case "middle" /* MIDDLE */:
+      return DocxVerticalAlign.CENTER;
+    case "bottom" /* BOTTOM */:
+      return DocxVerticalAlign.BOTTOM;
+    default:
+      return DocxVerticalAlign.TOP;
   }
-  return fallback ? normalizeHexLiteral(fallback) || void 0 : void 0;
 }
-function normalizeHexLiteral(color) {
-  const value = color.trim().replace(/^#/, "");
-  if (/^[\da-f]{3}$/i.test(value)) {
-    return value.split("").map((part) => `${part}${part}`).join("").toUpperCase();
-  }
-  if (/^[\da-f]{4}$/i.test(value)) {
-    return value.slice(0, 3).split("").map((part) => `${part}${part}`).join("").toUpperCase();
-  }
-  if (/^[\da-f]{6}$/i.test(value)) {
-    return value.toUpperCase();
+async function serializeFooter(ctx, pageWidth, pageHeight, margins) {
+  const { draw, scale } = ctx;
+  const footer = draw.getFooter();
+  const opts = draw.getOptions();
+  const barHeight = footer.getHeight() / scale;
+  const contentHeight = footer.getRowHeight() / scale;
+  const paddingTop = Math.floor(Math.max(0, (barHeight - contentHeight) / 2) * scale) / scale;
+  const zone = {
+    startX: draw.getMargins()[3],
+    width: draw.getInnerWidth(),
+    positionList: footer.getPositionList()
+  };
+  const rowList = footer.getRowList();
+  const textWidth = pageWidth - margins[1] - margins[3];
+  const pageNumber = createPageNumberRuns(ctx, pageHeight, textWidth);
+  let pageNumberRow = -1;
+  if (pageNumber) {
+    pageNumberRow = rowList.length - 1;
+    for (let r = 0; r < rowList.length; r++) {
+      const top = zone.positionList[rowList[r].startIndex].coordinate.leftTop[1] / scale;
+      if (pageNumber.baseline <= top + rowList[r].height / scale) {
+        pageNumberRow = r;
+        break;
+      }
+    }
   }
-  if (/^[\da-f]{8}$/i.test(value)) {
-    return value.slice(0, 6).toUpperCase();
+  const children = [];
+  for (let r = 0; r < rowList.length; r++) {
+    const row = rowList[r];
+    const rowOptions = { padTop: r === 0 ? paddingTop : 0 };
+    if (r !== pageNumberRow) {
+      children.push(...await serializeRows(ctx, [row], zone, rowOptions));
+      continue;
+    }
+    const top = zone.positionList[row.startIndex].coordinate.leftTop[1] / scale;
+    const shift = pageNumber.baseline - (top + row.ascent / scale);
+    children.push(
+      await serializeRow(ctx, row, zone, rowOptions, {
+        tabStop: pageNumber.tabStop,
+        tabType: pageNumber.tabType,
+        children: pageNumber.runs(shift),
+        style: PAGE_NUMBER_STYLE
+      })
+    );
   }
-  return void 0;
+  const fill = opts.footer.backgroundColor ? normalizeHexColor(opts.footer.backgroundColor, "FFFFFF") : void 0;
+  const none = { style: BorderStyle.NONE, size: 0, color: "auto" };
+  const band = new Table({
+    layout: TableLayoutType.FIXED,
+    width: { size: pxTw(pageWidth), type: WidthType.DXA },
+    columnWidths: [pxTw(pageWidth)],
+    indent: { size: -pxTw(margins[3]), type: WidthType.DXA },
+    borders: noTableBorders(),
+    rows: [
+      new TableRow({
+        cantSplit: true,
+        height: { value: pxTw(barHeight), rule: HeightRule.EXACT },
+        children: [
+          new TableCell({
+            width: { size: pxTw(pageWidth), type: WidthType.DXA },
+            margins: {
+              top: 0,
+              bottom: 0,
+              left: pxTw(margins[3]),
+              right: pxTw(margins[1]),
+              marginUnitType: WidthType.DXA
+            },
+            shading: fill ? { fill, type: ShadingType.CLEAR, color: "auto" } : void 0,
+            borders: { top: none, right: none, bottom: none, left: none },
+            children: children.length ? children : [createSpacerParagraph(false)]
+          })
+        ]
+      })
+    ]
+  });
+  return [band];
 }
-function normalizeRgbColor(color) {
-  const match = color.trim().match(/^rgba?\((.+)\)$/i);
-  if (!match) {
-    return void 0;
+var PAGE_NUMBER_STYLE = "WindocPageNumber";
+var FieldCharAttributes = class extends XmlAttributeComponent {
+  constructor() {
+    super(...arguments);
+    this.xmlKeys = { type: "w:fldCharType" };
   }
-  const parts = match[1].replace(/\s*\/\s*/g, ",").split(/\s*,\s*|\s+/).filter(Boolean);
-  if (parts.length < 3) {
-    return void 0;
+};
+var FieldChar = class extends XmlComponent {
+  constructor(type) {
+    super("w:fldChar");
+    this.root.push(new FieldCharAttributes({ type }));
   }
-  const red = parseRgbChannel(parts[0]);
-  const green = parseRgbChannel(parts[1]);
-  const blue = parseRgbChannel(parts[2]);
-  if (red === null || green === null || blue === null) {
-    return void 0;
+};
+var InstrTextAttributes = class extends XmlAttributeComponent {
+  constructor() {
+    super(...arguments);
+    this.xmlKeys = { space: "xml:space" };
   }
-  const alpha = parts[3] !== void 0 ? parseAlphaChannel(parts[3]) : 1;
-  if (alpha === null || alpha <= 0) {
-    return void 0;
+};
+var InstrText = class extends XmlComponent {
+  constructor(instruction) {
+    super("w:instrText");
+    this.root.push(new InstrTextAttributes({ space: "preserve" }));
+    this.root.push(` ${instruction} `);
   }
-  const flattened = alpha >= 1 ? [red, green, blue] : [
-    flattenChannel(red, alpha),
-    flattenChannel(green, alpha),
-    flattenChannel(blue, alpha)
+};
+function createFieldRuns(instruction, cached, style) {
+  return [
+    new TextRun({ ...style, children: [new FieldChar("begin")] }),
+    new TextRun({ ...style, children: [new InstrText(instruction)] }),
+    new TextRun({ ...style, children: [new FieldChar("separate")] }),
+    new TextRun({ ...style, text: cached }),
+    new TextRun({ ...style, children: [new FieldChar("end")] })
   ];
-  return flattened.map(toHexChannel).join("");
 }
-function normalizeBrowserColor(color) {
-  if (typeof document === "undefined") {
-    return void 0;
-  }
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-  if (!context) {
-    return void 0;
-  }
-  context.fillStyle = "#000000";
-  context.fillStyle = color;
-  const normalized = context.fillStyle;
-  if (typeof normalized !== "string") {
-    return void 0;
-  }
-  return normalizeHexLiteral(normalized) || normalizeRgbColor(normalized);
+function pageNumberRunStyle(pageNumber) {
+  return {
+    font: mapFont(pageNumber?.font || "sans-serif"),
+    // PageNumber draws `${size}px`; half-points = px * 0.75 * 2
+    size: Math.round((pageNumber?.size || 12) * 1.5),
+    color: normalizeHexColor(pageNumber?.color || "#000000", "000000")
+  };
 }
-function parseRgbChannel(value) {
-  if (value.endsWith("%")) {
-    const percent = Number(value.slice(0, -1));
-    if (!Number.isFinite(percent)) {
-      return null;
-    }
-    return clampColorChannel(Math.round(percent / 100 * 255));
-  }
-  const channel = Number(value);
-  if (!Number.isFinite(channel)) {
-    return null;
+function createPageNumberRuns(ctx, pageHeight, textWidth) {
+  const { pageNumber } = ctx.draw.getOptions();
+  if (pageNumber.disabled || pageNumber.fromPageNo > 0) return null;
+  const pageCount = ctx.draw.getPageCount();
+  const tokens = (pageNumber.format || FORMAT_PLACEHOLDER.PAGE_NO).split(
+    /(\{pageNo\}|\{pageCount\})/
+  );
+  const tabType = pageNumber.rowFlex === "center" /* CENTER */ ? TabStopType.CENTER : pageNumber.rowFlex === "right" /* RIGHT */ ? TabStopType.RIGHT : TabStopType.LEFT;
+  const tabStop = tabType === TabStopType.CENTER ? pxTw(textWidth / 2) : tabType === TabStopType.RIGHT ? pxTw(textWidth) : 0;
+  const position = (shift) => {
+    const halfPoints = Math.round(-shift * 0.75 * 2);
+    return halfPoints ? `${halfPoints}` : void 0;
+  };
+  return {
+    baseline: pageHeight - pageNumber.bottom,
+    tabType,
+    tabStop,
+    // shift > 0 means the number sits lower than the row baseline
+    runs: (shift) => tokens.filter(Boolean).map((token) => {
+      const style = {
+        ...pageNumberRunStyle(pageNumber),
+        position: position(shift)
+      };
+      const field = token === FORMAT_PLACEHOLDER.PAGE_NO ? { instruction: "PAGE", cached: "1" } : token === FORMAT_PLACEHOLDER.PAGE_COUNT ? { instruction: "NUMPAGES", cached: `${pageCount}` } : null;
+      if (!field) return [new TextRun({ text: token, ...style })];
+      return createFieldRuns(field.instruction, field.cached, style);
+    }).flat()
+  };
+}
+function createTextRun(ctx, text, element, shading, characterSpacing) {
+  const opts = ctx.draw.getOptions();
+  const isLink = element.type === "hyperlink" /* HYPERLINK */;
+  const color = normalizeHexColor(
+    element.color || (isLink ? opts.defaultHyperlinkColor : opts.defaultColor),
+    "000000"
+  );
+  const highlight = element.highlight ? normalizeHexColor(element.highlight) : void 0;
+  const textRun = new TextRun({
+    text,
+    font: mapFont(element.font || opts.defaultFont),
+    size: Math.round(getSize(ctx, element) * 2),
+    bold: !!element.bold,
+    italics: !!element.italic,
+    strike: !!element.strikeout,
+    superScript: element.type === "superscript" /* SUPERSCRIPT */,
+    subScript: element.type === "subscript" /* SUBSCRIPT */,
+    underline: element.underline || isLink ? { type: mapUnderlineType(element.textDecoration?.style) } : void 0,
+    color,
+    shading: shading || (highlight ? { fill: highlight, type: ShadingType.CLEAR, color: "auto" } : void 0),
+    characterSpacing
+  });
+  if (isLink && element.url) {
+    return new ExternalHyperlink({ link: element.url, children: [textRun] });
   }
-  return clampColorChannel(Math.round(channel));
+  return textRun;
 }
-function parseAlphaChannel(value) {
-  if (value.endsWith("%")) {
-    const percent = Number(value.slice(0, -1));
-    if (!Number.isFinite(percent)) {
-      return null;
+function labelShading(ctx, element) {
+  const { defaultBackgroundColor } = ctx.draw.getOptions().label;
+  return {
+    fill: normalizeHexColor(
+      element.label?.backgroundColor || defaultBackgroundColor,
+      "FFFFFF"
+    ),
+    type: ShadingType.CLEAR,
+    color: "auto"
+  };
+}
+async function createImageRun(element) {
+  try {
+    const image = await loadImagePayload(element.value);
+    const transformation = {
+      width: Math.max(1, element.width || 1),
+      height: Math.max(1, element.height || 1)
+    };
+    if (image.type === "svg" && image.fallbackPng) {
+      return new ImageRun({
+        type: "svg",
+        data: image.data,
+        fallback: { type: "png", data: image.fallbackPng },
+        transformation
+      });
     }
-    return Math.min(Math.max(percent / 100, 0), 1);
-  }
-  const alpha = Number(value);
-  if (!Number.isFinite(alpha)) {
+    return new ImageRun({
+      type: image.type,
+      data: image.data,
+      transformation
+    });
+  } catch {
     return null;
   }
-  return Math.min(Math.max(alpha, 0), 1);
-}
-function clampColorChannel(value) {
-  return Math.min(Math.max(value, 0), 255);
 }
-function flattenChannel(value, alpha) {
-  return clampColorChannel(Math.round(255 * (1 - alpha) + value * alpha));
+function getElementText(element) {
+  switch (element.type) {
+    case "checkbox" /* CHECKBOX */:
+      return element.checkbox?.value ? "\u2611" : "\u2610";
+    case "radio" /* RADIO */:
+      return element.radio?.value ? "\u25C9" : "\u25CB";
+    default:
+      return (element.value || "").replace(new RegExp(ZERO, "g"), "");
+  }
 }
-function toHexChannel(value) {
-  return value.toString(16).padStart(2, "0").toUpperCase();
+function getSize(ctx, element) {
+  return element.actualSize || element.size || ctx.draw.getOptions().defaultSize;
 }
-function pxBorderToDocxSize(width) {
-  const safeWidth = Number.isFinite(width) && width > 0 ? width : 1;
-  return Math.max(2, Math.round(safeWidth * 6));
+function measure(ctx, text, element) {
+  ctx.measureCtx.font = ctx.draw.getElementFont(element, 1);
+  return ctx.measureCtx.measureText(text).width;
 }
-function getRegularImageType(mime) {
-  if (mime.includes("png")) return "png";
-  if (mime.includes("jpeg") || mime.includes("jpg")) return "jpg";
-  if (mime.includes("gif")) return "gif";
-  if (mime.includes("bmp")) return "bmp";
-  return null;
+function isSameRunStyle(a, b) {
+  return a.type === b.type && a.font === b.font && a.size === b.size && a.actualSize === b.actualSize && !!a.bold === !!b.bold && !!a.italic === !!b.italic && !!a.underline === !!b.underline && !!a.strikeout === !!b.strikeout && a.color === b.color && a.highlight === b.highlight && a.url === b.url;
 }
-function normalizeDocxFileName(fileName) {
-  const trimmed = fileName?.trim();
-  if (!trimmed) {
-    return DEFAULT_DOCX_FILE_NAME;
+function mapFont(font) {
+  const name = font.trim().replace(/^['"]|['"]$/g, "");
+  switch (name.toLowerCase()) {
+    case "sans-serif":
+      return "Arial";
+    case "serif":
+      return "Times New Roman";
+    case "monospace":
+      return "Courier New";
+    default:
+      return name;
   }
-  return trimmed.toLowerCase().endsWith(".docx") ? trimmed : `${trimmed}.docx`;
-}
-function pxToTwips(px) {
-  return Math.round(px * 15);
 }
 
 // src/utils/pdf.ts
@@ -25592,7 +25385,7 @@ import {
 var DEFAULT_PDF_FILE_NAME = "document.pdf";
 var DEFAULT_IMAGE_WIDTH2 = 320;
 var DEFAULT_IMAGE_HEIGHT2 = 180;
-var DEFAULT_LINE_HEIGHT2 = 1.15;
+var DEFAULT_LINE_HEIGHT = 1.15;
 var PAGE_REGION_GAP = 12;
 var SEPARATOR_HEIGHT = 12;
 var LIST_GAP = 8;
@@ -25787,7 +25580,7 @@ async function parseElementList(elementList, context, options) {
     }
     if (element.type === "block" /* BLOCK */) {
       await flushInlineBuffer();
-      const blockText = getBlockFallbackText2(element);
+      const blockText = getBlockFallbackText(element);
       if (blockText) {
         blocks.push(
           ...await parseInlineElements(
@@ -25839,7 +25632,7 @@ async function parseInlineElements(elementList, context, options, overrides = {}
     current = null;
   };
   const appendText = (element, text, factory, preserveTrailingBreak = false) => {
-    const normalized = normalizeText2(text);
+    const normalized = normalizeText(text);
     const parts = normalized.split("\n");
     let lastSeparatorFlushedContent = false;
     for (let i = 0; i < parts.length; i++) {
@@ -25875,7 +25668,7 @@ async function parseInlineElements(elementList, context, options, overrides = {}
       const children = element.valueList || [];
       for (let childIndex = 0; childIndex < children.length; childIndex++) {
         const child = children[childIndex];
-        const text = normalizeText2(getInlineElementText2(child));
+        const text = normalizeText(getInlineElementText(child));
         if (!text) continue;
         appendText(
           element,
@@ -25924,7 +25717,7 @@ async function parseInlineElements(elementList, context, options, overrides = {}
       ensureParagraph(element).runs.push(badgeRun);
       continue;
     }
-    const textValue = getInlineElementText2(element);
+    const textValue = getInlineElementText(element);
     if (!textValue) {
       continue;
     }
@@ -25952,7 +25745,7 @@ async function parseListBlock(element, context, options) {
   const blocks = [];
   const orderedCounts = Array(9).fill(0);
   for (const listItemElements of listItemMap.values()) {
-    const itemElement = getListItemNumberingElement2(listItemElements, element);
+    const itemElement = getListItemNumberingElement(listItemElements, element);
     const marker = getListMarker(itemElement, orderedCounts);
     blocks.push(
       ...await parseInlineElements(listItemElements, context, options, {
@@ -26511,10 +26304,11 @@ function layoutParagraph(block, width, context) {
     }
     if (token.width > availableWidth && token.kind === "text" && token.run.type === "text") {
       const segments = splitTextToken(token, availableWidth, context);
-      for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {
-        tokens.splice(i + segmentIndex, 0, segments[segmentIndex]);
+      if (segments.length > 1) {
+        tokens.splice(i, 1, ...segments);
+        i--;
+        continue;
       }
-      continue;
     }
     if (line.width + token.width > availableWidth && line.fragments.length) {
       commitLine();
@@ -26873,7 +26667,7 @@ function getEmptyLineHeight(block, context) {
     block.context.rowMargin || context.options.defaultRowMargin
   );
 }
-function getRunHeight(run, rowMargin = DEFAULT_LINE_HEIGHT2) {
+function getRunHeight(run, rowMargin = DEFAULT_LINE_HEIGHT) {
   return run.size * rowMargin;
 }
 function resolveTextMetrics(run, context) {
@@ -27082,10 +26876,10 @@ function loadHtmlImage2(src) {
     image.src = src;
   });
 }
-function getInlineElementText2(element) {
+function getInlineElementText(element) {
   switch (element.type) {
     case "control" /* CONTROL */:
-      return getControlText2(element.control);
+      return getControlText(element.control);
     case "date" /* DATE */:
       return element.valueList?.length ? getTextFromElementList(element.valueList) : element.value;
     case "checkbox" /* CHECKBOX */:
@@ -27101,7 +26895,7 @@ function getInlineElementText2(element) {
       return element.value;
   }
 }
-function getControlText2(control) {
+function getControlText(control) {
   if (!control) return "";
   if (control.type === "text" /* TEXT */ || control.type === "date" /* DATE */ || control.type === "number" /* NUMBER */) {
     const value = control.value?.length ? getTextFromElementList(control.value) : "";
@@ -27109,7 +26903,7 @@ function getControlText2(control) {
     return `${control.preText || ""}${content}${control.postText || ""}`;
   }
   if (control.type === "select" /* SELECT */) {
-    const labels = getSelectedControlLabels2(control.code, control.valueSets);
+    const labels = getSelectedControlLabels(control.code, control.valueSets);
     const content = labels.length ? labels.join(control.multiSelectDelimiter || ", ") : control.placeholder || "";
     return `${control.preText || ""}${content}${control.postText || ""}`;
   }
@@ -27122,13 +26916,13 @@ function getControlText2(control) {
   }
   return "";
 }
-function getSelectedControlLabels2(code, valueSets) {
+function getSelectedControlLabels(code, valueSets) {
   if (!code || !valueSets?.length) return [];
   return code.split(",").map(
     (selectCode) => valueSets.find((valueSet) => valueSet.code === selectCode)?.value
   ).filter((value) => !!value);
 }
-function getBlockFallbackText2(element) {
+function getBlockFallbackText(element) {
   if (element.block?.iframeBlock?.src) {
     return element.block.iframeBlock.src;
   }
@@ -27137,7 +26931,7 @@ function getBlockFallbackText2(element) {
   }
   return "";
 }
-function getListItemNumberingElement2(listItemElements, fallback) {
+function getListItemNumberingElement(listItemElements, fallback) {
   return listItemElements.find(
     (listItem) => listItem.listId || listItem.listLevel !== void 0 || !!listItem.listPreset || !!listItem.listStyle || !!listItem.listType
   ) || fallback;
@@ -27359,7 +27153,7 @@ function getReservedPageNumberBottom(pageNumber, pageNumberHeight) {
   }
   return pxToPt(pageNumber.bottom + 4) + pageNumberHeight;
 }
-function normalizeText2(text = "") {
+function normalizeText(text = "") {
   return text.replace(new RegExp(ZERO, "g"), "").replace(/\r\n/g, "\n");
 }
 function normalizePdfFileName(fileName) {
@@ -28699,8 +28493,7 @@ var CommandAdapt = class {
     }
   }
   async exportDocx(payload = {}) {
-    const result = this.draw.getValue();
-    const { blob, fileName } = await exportEditorDataToDocx(result, payload);
+    const { blob, fileName } = await exportDrawToDocx(this.draw, payload);
     downloadBlob(blob, fileName);
   }
   async exportPdf(payload = {}) {