@windoc/core 0.3.28 → 0.3.29

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var version = "0.3.28";
+var version = "0.3.29";
 
 // src/dataset/enum/Common.ts
 var MaxHeightRatio = /* @__PURE__ */ ((MaxHeightRatio2) => {
@@ -24372,13 +24372,16 @@ var Command = class {
 
 // src/utils/docxLayout.ts
 import {
+  AlignmentType,
   BorderStyle,
   Document as Document2,
   ExternalHyperlink,
   Footer as Footer2,
   Header as Header2,
   HeightRule,
+  HorizontalPositionRelativeFrom,
   ImageRun,
+  LevelFormat,
   LineRuleType,
   Packer,
   PageOrientation,
@@ -24391,7 +24394,9 @@ import {
   TableLayoutType,
   TableRow,
   TextRun,
+  TextWrappingType,
   VerticalAlign as DocxVerticalAlign,
+  VerticalPositionRelativeFrom,
   WidthType,
   XmlAttributeComponent,
   XmlComponent
@@ -24632,7 +24637,8 @@ async function exportDrawToDocx(draw, options = {}) {
   const ctx = {
     draw,
     scale: draw.getOptions().scale,
-    measureCtx
+    measureCtx,
+    lists: /* @__PURE__ */ new Map()
   };
   const file = await createDocument(ctx);
   const blob = await Packer.toBlob(file);
@@ -24650,18 +24656,21 @@ async function createDocument(ctx) {
   const headerExtra = header.getExtraHeight() / scale;
   const footerExtra = footer.getExtraHeight() / scale;
   const layoutMargins = draw.getMargins();
+  planLists(ctx);
   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 footerResult = opts.footer.disabled ? { children: [], distance: footer.getFooterBottom() / scale } : await serializeFooter(ctx, width, height, margins);
+  const footerChildren = footerResult.children;
   const { pageNumber } = draw.getOptions();
   endWithParagraph(headerChildren);
   endWithParagraph(footerChildren);
   return new Document2({
     compatabilityModeVersion: 15,
+    numbering: { config: createNumberingConfig(ctx) },
     // LibreOffice formats PAGE/NUMPAGES results from the paragraph style
     styles: {
       paragraphStyles: [
@@ -24688,7 +24697,7 @@ async function createDocument(ctx) {
               bottom: pxTw(margins[2] + footerExtra),
               left: pxTw(margins[3]),
               header: pxTw(headerTop),
-              footer: pxTw(footer.getFooterBottom() / scale),
+              footer: pxTw(footerResult.distance),
               gutter: 0
             }
           }
@@ -24720,13 +24729,14 @@ async function serializeMain(ctx, startX) {
 }
 async function serializeRows(ctx, rowList, zone, options = {}) {
   const { pageBreakBefore = false, padTop = 0, padBottom = 0 } = options;
+  const units = groupUnits(ctx, rowList, zone);
   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) {
+  for (let u = 0; u < units.length; u++) {
+    const unit = units[u];
+    const isFirst = u === 0;
+    const isLast = u === units.length - 1;
+    if (unit.kind === "table") {
+      const { row, table } = unit;
       if (isFirst && (pageBreakBefore || padTop) || row.offsetY) {
         children.push(
           createSpacerParagraph(
@@ -24743,72 +24753,92 @@ async function serializeRows(ctx, rowList, zone, options = {}) {
       }
       continue;
     }
+    const first = unitFirstRow(unit);
     const rowOptions = {
       pageBreakBefore: isFirst && pageBreakBefore,
       padTop: isFirst ? padTop : 0,
-      padBottom: isLast ? padBottom : 0
+      padBottom: isLast ? padBottom : 0,
+      rowY: rowY(zone, first)
     };
-    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])
-      });
+    if (!isFirst && units[u - 1].kind !== "table") rowOptions.skipLead = true;
+    const next = units[u + 1];
+    if (next && next.kind !== "table") {
+      rowOptions.extraAfter = unitLead(ctx, next, zone, {});
     }
-    const lead = rowOptions.pageBreakBefore ? rowLead(ctx, row, rowOptions) : 0;
+    const lead = rowOptions.pageBreakBefore ? unitLead(ctx, unit, zone, 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));
+    children.push(
+      unit.kind === "list" ? await serializeListItem(ctx, unit.rows, zone, rowOptions) : await serializeRow(ctx, unit.row, zone, rowOptions)
+    );
   }
   return children;
 }
+function unitFirstRow(unit) {
+  return unit.kind === "list" ? unit.rows[0] : unit.row;
+}
+function unitLead(ctx, unit, zone, options) {
+  if (unit.kind === "list") return listLead(ctx, unit.rows[0], options);
+  const row = unitFirstRow(unit);
+  return rowLead(ctx, row, { ...options, rowY: rowY(zone, row) });
+}
+function groupUnits(ctx, rowList, zone) {
+  const units = [];
+  for (let r = 0; r < rowList.length; r++) {
+    const row = rowList[r];
+    const table = row.elementList.find((el) => el.type === "table" /* TABLE */);
+    if (table) {
+      units.push({ kind: "table", row, table });
+      continue;
+    }
+    if (isNativeListStart(ctx, row, zone)) {
+      const rows = [row];
+      while (r + 1 < rowList.length && isListContinuation(row, rowList[r + 1])) {
+        rows.push(rowList[++r]);
+      }
+      units.push({ kind: "list", rows });
+      continue;
+    }
+    units.push({ kind: "row", row });
+  }
+  return units;
+}
 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;
+async function appendRowRuns(ctx, row, zone, line) {
   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;
+    if (!line.started) {
+      line.indent = target;
+      line.pen = target;
+      line.started = true;
       return;
     }
-    if (target - pen > ANCHOR_EPS) {
-      tabStops.push(pxTw(target));
-      children.push(new TextRun({ children: [new Tab()] }));
-      pen = target;
+    if (target - line.pen > ANCHOR_EPS) {
+      line.tabStops.push(pxTw(target));
+      line.children.push(new TextRun({ children: [new Tab()] }));
+      line.pen = target;
     }
   };
-  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));
+    line.children.push(
+      createTextRun(
+        ctx,
+        run.text,
+        run.element,
+        void 0,
+        void 0,
+        line.position
+      )
+    );
     run = null;
   };
   for (let j = 0; j < row.elementList.length; j++) {
@@ -24816,19 +24846,7 @@ async function serializeRow(ctx, row, zone, options, suffix) {
     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
-      );
-    }
-    if (element.value === ZERO || element.type === "tab" /* TAB */ || element.type === "pageBreak" /* PAGE_BREAK */ || element.type === "columnBreak" /* COLUMN_BREAK */) {
+    if (element.value === ZERO || element.type === "tab" /* TAB */ || element.type === "pageBreak" /* PAGE_BREAK */ || element.type === "columnBreak" /* COLUMN_BREAK */ || element.type === "separator" /* SEPARATOR */) {
       continue;
     }
     const x = position.coordinate.leftTop[0];
@@ -24837,25 +24855,32 @@ async function serializeRow(ctx, row, zone, options, suffix) {
       flush();
       anchorTo(x);
       const image = await createImageRun(element);
-      if (image) children.push(image);
-      pen += layoutWidth;
+      if (image) line.children.push(image);
+      line.pen += layoutWidth;
       continue;
     }
     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))
+      line.children.push(
+        createTextRun(
+          ctx,
+          element.value,
+          element,
+          labelShading(ctx, element),
+          void 0,
+          line.position
+        )
       );
-      pen += measure(ctx, element.value, element);
+      line.pen += measure(ctx, element.value, element);
       continue;
     }
     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 isDrift = !line.started || target - line.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);
@@ -24865,21 +24890,72 @@ async function serializeRow(ctx, row, zone, options, suffix) {
       flush();
       anchorTo(x);
       if (needsSpacing) {
-        children.push(
-          createTextRun(ctx, text, element, void 0, pxTw(extra))
+        line.children.push(
+          createTextRun(
+            ctx,
+            text,
+            element,
+            void 0,
+            pxTw(extra),
+            line.position
+          )
         );
       } else {
         run = { text, element };
       }
     }
-    pen = target + layoutWidth;
+    line.pen = target + layoutWidth;
   }
   flush();
-  if (!children.length && !suffix) {
+}
+async function serializeRow(ctx, row, zone, options, suffix, anchor) {
+  const { pageBreakBefore = false } = options;
+  const { draw, scale } = ctx;
+  const firstPosition = zone.positionList[row.startIndex];
+  const separatorIndex = row.elementList.findIndex(
+    (el) => el.type === "separator" /* SEPARATOR */
+  );
+  if (separatorIndex >= 0) {
+    const position = zone.positionList[row.startIndex + separatorIndex];
+    if (position) {
+      return createSeparatorParagraph(
+        ctx,
+        row,
+        row.elementList[separatorIndex],
+        position.coordinate.leftTop[0],
+        position.coordinate.leftTop[1],
+        zone,
+        options
+      );
+    }
+  }
+  const line = {
+    children: [],
+    tabStops: [],
+    pen: 0,
+    started: false,
+    indent: firstPosition ? (firstPosition.coordinate.leftTop[0] - zone.startX) / scale : 0
+  };
+  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) {
+      line.indent = (markerX - zone.startX) / scale;
+      line.pen = line.indent;
+      line.started = true;
+      line.children.push(createTextRun(ctx, marker.text, marker.styleElement));
+      line.pen += measure(ctx, marker.text, marker.styleElement);
+    }
+  }
+  await appendRowRuns(ctx, row, zone, line);
+  const { children } = line;
+  if (anchor) children.unshift(anchor);
+  if (!line.started && !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);
+    return createSpacerParagraph(pageBreakBefore, total / PX_TO_TWIP, anchor);
   }
-  const stops = tabStops.map((position) => ({ type: TabStopType.LEFT, position }));
+  const stops = line.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);
@@ -24891,10 +24967,191 @@ async function serializeRow(ctx, row, zone, options, suffix) {
     pageBreakBefore,
     widowControl: false,
     tabStops: stops,
-    indent: { left: pxTw(indent), right: RIGHT_SLACK_TWIP },
+    indent: { left: pxTw(line.indent), right: RIGHT_SLACK_TWIP },
     spacing: rowSpacing(ctx, row, options)
   });
 }
+var olStyleFormat = {
+  decimal: { format: LevelFormat.DECIMAL, suffix: "." },
+  decimalParen: { format: LevelFormat.DECIMAL, suffix: ")" },
+  decimalZero: { format: LevelFormat.DECIMAL_ZERO, suffix: "." },
+  lowerAlpha: { format: LevelFormat.LOWER_LETTER, suffix: "." },
+  lowerAlphaParen: { format: LevelFormat.LOWER_LETTER, suffix: ")" },
+  upperAlpha: { format: LevelFormat.UPPER_LETTER, suffix: "." },
+  lowerRoman: { format: LevelFormat.LOWER_ROMAN, suffix: "." },
+  lowerRomanParen: { format: LevelFormat.LOWER_ROMAN, suffix: ")" },
+  upperRoman: { format: LevelFormat.UPPER_ROMAN, suffix: "." },
+  outline: { format: LevelFormat.DECIMAL, suffix: "." }
+};
+function isListItemStart(row) {
+  const first = row.elementList[0];
+  return !!row.isList && first?.value === ZERO && !first.listWrap;
+}
+function rowListId(row) {
+  return row.elementList.find((el) => el.listId)?.listId;
+}
+function levelSpec(element, markerText) {
+  const level = Math.min(element.listLevel ?? 0, 8);
+  if (element.listType === "ul" /* UL */) {
+    return { level, format: LevelFormat.BULLET, text: markerText };
+  }
+  const cycle = element.listPreset ? olPresetCycles[element.listPreset] : void 0;
+  const style = cycle ? cycle[level % cycle.length] : "decimal";
+  const spec = olStyleFormat[style] || olStyleFormat.decimal;
+  return { level, format: spec.format, text: `%${level + 1}${spec.suffix}` };
+}
+function planLists(ctx) {
+  const listParticle = ctx.draw.getListParticle();
+  const counters = /* @__PURE__ */ new Map();
+  const visit = (rowList) => {
+    for (const row of rowList) {
+      const table = row.elementList.find((el) => el.type === "table" /* TABLE */);
+      if (table) {
+        for (const tr of table.trList || []) {
+          for (const td of tr.tdList) visit(td.rowList || []);
+        }
+        continue;
+      }
+      if (!isListItemStart(row)) continue;
+      const listId = rowListId(row);
+      if (!listId) continue;
+      let plan2 = ctx.lists.get(listId);
+      if (!plan2) {
+        plan2 = {
+          reference: `windoc-list-${ctx.lists.size + 1}`,
+          native: true,
+          levels: /* @__PURE__ */ new Map()
+        };
+        ctx.lists.set(listId, plan2);
+      }
+      const marker = listParticle.getListMarker(row);
+      if (!marker || hasInlineImage(row)) {
+        plan2.native = false;
+        continue;
+      }
+      const spec = levelSpec(row.elementList[0], marker.text);
+      const known = plan2.levels.get(spec.level);
+      if (known && (known.format !== spec.format || known.text !== spec.text)) {
+        plan2.native = false;
+      }
+      plan2.levels.set(spec.level, spec);
+      const count = counters.get(listId) || [];
+      counters.set(listId, count);
+      count[spec.level] = (count[spec.level] || 0) + 1;
+      count.length = spec.level + 1;
+      if (spec.format !== LevelFormat.BULLET && count[spec.level] !== (row.listIndex ?? 0) + 1) {
+        plan2.native = false;
+      }
+    }
+  };
+  ctx.draw.getPageRowList().forEach(visit);
+}
+function createNumberingConfig(ctx) {
+  return [...ctx.lists.values()].filter((plan2) => plan2.native).map((plan2) => ({
+    reference: plan2.reference,
+    levels: Array.from({ length: 9 }, (_, level) => {
+      const spec = plan2.levels.get(level) || {
+        format: LevelFormat.DECIMAL,
+        text: `%${level + 1}.`
+      };
+      return {
+        level,
+        format: spec.format,
+        text: spec.text,
+        alignment: AlignmentType.LEFT
+      };
+    })
+  }));
+}
+function listMarkerGeometry(ctx, row, zone) {
+  const listParticle = ctx.draw.getListParticle();
+  const firstPosition = zone.positionList[row.startIndex];
+  if (!firstPosition) return null;
+  const markerX = listParticle.getListMarkerX(row, firstPosition);
+  const marker = listParticle.getListMarker(row);
+  if (markerX === null || !marker) return null;
+  const textIndex = row.elementList.findIndex(
+    (el) => el.value !== ZERO && el.type !== "tab" /* TAB */
+  );
+  const textPosition = textIndex >= 0 ? zone.positionList[row.startIndex + textIndex] : firstPosition;
+  const textX = textPosition.coordinate.leftTop[0];
+  if (textX - markerX <= 0) return null;
+  return {
+    marker,
+    indent: (textX - zone.startX) / ctx.scale,
+    hanging: (textX - markerX) / ctx.scale
+  };
+}
+function isNativeListStart(ctx, row, zone) {
+  if (!isListItemStart(row) || hasInlineImage(row)) return false;
+  const listId = rowListId(row);
+  if (!listId || !ctx.lists.get(listId)?.native) return false;
+  if (row.elementList.some((el) => el.type === "separator" /* SEPARATOR */)) {
+    return false;
+  }
+  return !!listMarkerGeometry(ctx, row, zone);
+}
+function isListContinuation(start, row) {
+  return !!row.isList && !isListItemStart(row) && rowListId(row) === rowListId(start) && row.height === start.height && row.ascent === start.ascent && !row.offsetY && !row.spaceAbove && !hasInlineImage(row) && !row.elementList.some(
+    (el) => el.type === "table" /* TABLE */ || el.type === "separator" /* SEPARATOR */
+  );
+}
+function listLead(ctx, row, options) {
+  return tw(ctx, (row.offsetY || 0) + (row.spaceAbove || 0)) + pxTw(options.padTop || 0);
+}
+async function serializeListItem(ctx, rows, zone, options) {
+  const { scale } = ctx;
+  const first = rows[0];
+  const last = rows[rows.length - 1];
+  const geometry = listMarkerGeometry(ctx, first, zone);
+  const plan2 = ctx.lists.get(rowListId(first));
+  const height = first.height / scale;
+  const raise = Math.round(
+    (EXACT_BASELINE_RATIO * height - first.ascent / scale) * 1.5
+  );
+  const position = raise ? `${raise}` : void 0;
+  const line = {
+    children: [],
+    tabStops: [],
+    pen: geometry.indent,
+    started: true,
+    indent: geometry.indent,
+    position
+  };
+  for (let i = 0; i < rows.length; i++) {
+    if (i > 0) {
+      line.children.push(new TextRun({ break: 1 }));
+      line.pen = geometry.indent;
+    }
+    await appendRowRuns(ctx, rows[i], zone, line);
+  }
+  return new Paragraph({
+    children: line.children,
+    numbering: {
+      reference: plan2.reference,
+      level: Math.min(first.elementList[0].listLevel ?? 0, 8)
+    },
+    // the number is drawn with the paragraph mark's formatting
+    run: { ...runStyle(ctx, geometry.marker.styleElement), position },
+    pageBreakBefore: options.pageBreakBefore,
+    widowControl: false,
+    tabStops: [...new Set(line.tabStops)].map((tabPosition) => ({
+      type: TabStopType.LEFT,
+      position: tabPosition
+    })),
+    indent: {
+      left: pxTw(geometry.indent),
+      hanging: pxTw(geometry.hanging),
+      right: RIGHT_SLACK_TWIP
+    },
+    spacing: {
+      before: options.skipLead ? 0 : listLead(ctx, first, options),
+      after: tw(ctx, last.spaceBelow || 0) + pxTw(options.padBottom || 0) + (options.extraAfter || 0),
+      line: pxTw(height),
+      lineRule: LineRuleType.EXACT
+    }
+  });
+}
 var EXACT_BASELINE_RATIO = 0.8;
 var IMAGE_MARK_HALF_POINTS = 2;
 var IMAGE_MARK_DESCENT_PX = 0.3;
@@ -24991,10 +25248,7 @@ function createLineImage(width, height, color, dashArray) {
   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;
+  return canvasToPng(canvas);
 }
 function endWithParagraph(children) {
   if (children[children.length - 1] instanceof Table) {
@@ -25002,11 +25256,12 @@ function endWithParagraph(children) {
   }
   return children;
 }
-function createSpacerParagraph(pageBreakBefore, height = 0) {
+function createSpacerParagraph(pageBreakBefore, height = 0, anchor) {
   return new Paragraph({
     pageBreakBefore,
     widowControl: false,
-    children: [new TextRun({ text: "", size: 2 })],
+    run: { size: 2 },
+    children: anchor ? [anchor, new TextRun({ text: "", size: 2 })] : [new TextRun({ text: "", size: 2 })],
     spacing: {
       before: 0,
       after: 0,
@@ -25165,6 +25420,7 @@ async function serializeFooter(ctx, pageWidth, pageHeight, margins) {
   const footer = draw.getFooter();
   const opts = draw.getOptions();
   const barHeight = footer.getHeight() / scale;
+  const footerBottom = footer.getFooterBottom() / scale;
   const contentHeight = footer.getRowHeight() / scale;
   const paddingTop = Math.floor(Math.max(0, (barHeight - contentHeight) / 2) * scale) / scale;
   const zone = {
@@ -25186,56 +25442,73 @@ async function serializeFooter(ctx, pageWidth, pageHeight, margins) {
       }
     }
   }
+  const band = opts.footer.backgroundColor ? createBandImage(
+    pageWidth,
+    pageHeight - footerBottom - barHeight,
+    barHeight,
+    opts.footer.backgroundColor
+  ) : void 0;
   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, {
+    let suffix;
+    if (r === pageNumberRow) {
+      const top = zone.positionList[row.startIndex].coordinate.leftTop[1] / scale;
+      suffix = {
         tabStop: pageNumber.tabStop,
         tabType: pageNumber.tabType,
-        children: pageNumber.runs(shift),
+        children: pageNumber.runs(
+          pageNumber.baseline - (top + row.ascent / scale)
+        ),
         style: PAGE_NUMBER_STYLE
-      })
+      };
+    }
+    children.push(
+      await serializeRow(ctx, row, zone, {}, suffix, r === 0 ? band : 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)]
-          })
-        ]
-      })
-    ]
+  if (!children.length && band) {
+    children.push(createSpacerParagraph(false, 0, band));
+  }
+  const contentTop = pageHeight - footerBottom - barHeight + paddingTop;
+  const distance = Math.max(0, pageHeight - contentTop - contentHeight);
+  return { children, distance };
+}
+var EMU_PER_PX = 9525;
+function createBandImage(width, top, height, color) {
+  return new ImageRun({
+    type: "png",
+    data: createFillImage(color),
+    transformation: { width, height },
+    floating: {
+      horizontalPosition: {
+        relative: HorizontalPositionRelativeFrom.PAGE,
+        offset: 0
+      },
+      verticalPosition: {
+        relative: VerticalPositionRelativeFrom.PAGE,
+        offset: Math.round(top * EMU_PER_PX)
+      },
+      behindDocument: true,
+      allowOverlap: true,
+      wrap: { type: TextWrappingType.NONE }
+    }
   });
-  return [band];
+}
+function createFillImage(color) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 4;
+  canvas.height = 4;
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  return canvasToPng(canvas);
+}
+function canvasToPng(canvas) {
+  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;
 }
 var PAGE_NUMBER_STYLE = "WindocPageNumber";
 var FieldCharAttributes = class extends XmlAttributeComponent {
@@ -25309,7 +25582,17 @@ function createPageNumberRuns(ctx, pageHeight, textWidth) {
     }).flat()
   };
 }
-function createTextRun(ctx, text, element, shading, characterSpacing) {
+function runStyle(ctx, element) {
+  const opts = ctx.draw.getOptions();
+  return {
+    font: mapFont(element.font || opts.defaultFont),
+    size: Math.round(getSize(ctx, element) * 2),
+    bold: !!element.bold,
+    italics: !!element.italic,
+    color: normalizeHexColor(element.color || opts.defaultColor, "000000")
+  };
+}
+function createTextRun(ctx, text, element, shading, characterSpacing, position) {
   const opts = ctx.draw.getOptions();
   const isLink = element.type === "hyperlink" /* HYPERLINK */;
   const color = normalizeHexColor(
@@ -25329,7 +25612,8 @@ function createTextRun(ctx, text, element, shading, characterSpacing) {
     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
+    characterSpacing,
+    position
   });
   if (isLink && element.url) {
     return new ExternalHyperlink({ link: element.url, children: [textRun] });