@json-to-office/core-docx 7.0.1 → 7.1.2

package/dist/plugin/example/index.js

@@ -2008,6 +2008,7 @@ var init_layoutUtils = __esm({
       if (themeConfig?.page) {
         const margins = themeConfig.page.margins || {};
         const dimensions = getPageDimensions(themeConfig.page.size);
+        const gutter = margins.gutter;
         return {
           size: {
             width: dimensions.width,
@@ -2018,7 +2019,13 @@ var init_layoutUtils = __esm({
             top: margins.top ?? defaultMargins.top ?? 1440,
             right: margins.right ?? defaultMargins.right ?? 1440,
             bottom: margins.bottom ?? defaultMargins.bottom ?? 1440,
-            left: margins.left ?? defaultMargins.left ?? 1440
+            left: margins.left ?? defaultMargins.left ?? 1440,
+            // How far the running head and foot sit from the page edge. Left out,
+            // each renderer writes its own default — docx.js 708, office-open 851
+            // and 992 — in place of the distance the theme states.
+            header: margins.header ?? defaultMargins.header ?? 720,
+            footer: margins.footer ?? defaultMargins.footer ?? 720,
+            ...gutter !== void 0 && { gutter }
           }
         };
       }
@@ -2034,50 +2041,15 @@ var init_layoutUtils = __esm({
           top: defaultMargins.top ?? 1440,
           right: defaultMargins.right ?? 1440,
           bottom: defaultMargins.bottom ?? 1440,
-          left: defaultMargins.left ?? 1440
+          left: defaultMargins.left ?? 1440,
+          header: defaultMargins.header ?? 720,
+          footer: defaultMargins.footer ?? 720
         }
       };
     };
   }
 });
 
-// src/utils/generationContext.ts
-import { AsyncLocalStorage } from "async_hooks";
-import { isAbsolute, resolve } from "path";
-function runWithBaseDir(baseDir, callback) {
-  return baseDir === void 0 ? callback() : baseDirStorage.run(resolve(baseDir), callback);
-}
-function resolveFromBaseDir(filePath) {
-  const base = baseDirStorage.getStore();
-  if (!base || isAbsolute(filePath)) return filePath;
-  return resolve(base, filePath);
-}
-function runWithWarnings(warnings, callback) {
-  return warnings === void 0 ? callback() : warningsStorage.run(warnings, callback);
-}
-function reportWarning(component, code, message, context) {
-  const warnings = warningsStorage.getStore();
-  if (warnings) {
-    warnings.push({
-      component,
-      message,
-      severity: "warning",
-      context: { code, ...context }
-    });
-    return;
-  }
-  console.warn(`[json-to-docx] [${code}] ${message}`);
-}
-var generationDateStorage, baseDirStorage, warningsStorage;
-var init_generationContext = __esm({
-  "src/utils/generationContext.ts"() {
-    "use strict";
-    generationDateStorage = new AsyncLocalStorage();
-    baseDirStorage = new AsyncLocalStorage();
-    warningsStorage = new AsyncLocalStorage();
-  }
-});
-
 // src/themes/json/parser.ts
 import { validateThemeJson } from "@json-to-office/shared-docx/validation/unified";
 var ThemeValidationError, ThemeParseError, ThemeParser;
@@ -2388,7 +2360,8 @@ function getAvailableWidthTwips(theme, themeName) {
   const width = page?.size?.width || 0;
   const left = page?.margin?.left || 0;
   const right = page?.margin?.right || 0;
-  return Math.max(0, width - left - right);
+  const gutter = page?.margin?.gutter || 0;
+  return Math.max(0, width - left - right - gutter);
 }
 function getPageWidthTwips(theme, themeName) {
   const page = getPageSetup(theme, themeName);
@@ -2423,6 +2396,13 @@ function resolveOffsetTwips(value, referenceTwips) {
   }
   return Math.round(referenceTwips * parseFloat(match[1]) / 100);
 }
+function splitTwips(count, totalTwips) {
+  const edge = (index) => Math.round(totalTwips * index / count);
+  return Array.from(
+    { length: count },
+    (_, index) => edge(index + 1) - edge(index)
+  );
+}
 function relativeLengthToTwips(value, availableWidthTwips) {
   if (typeof value === "number") {
     return pointsToTwips(value);
@@ -2439,6 +2419,43 @@ var init_widthUtils = __esm({
   }
 });
 
+// src/utils/generationContext.ts
+import { AsyncLocalStorage } from "async_hooks";
+import { isAbsolute, resolve } from "path";
+function runWithBaseDir(baseDir, callback) {
+  return baseDir === void 0 ? callback() : baseDirStorage.run(resolve(baseDir), callback);
+}
+function resolveFromBaseDir(filePath) {
+  const base = baseDirStorage.getStore();
+  if (!base || isAbsolute(filePath)) return filePath;
+  return resolve(base, filePath);
+}
+function runWithWarnings(warnings, callback) {
+  return warnings === void 0 ? callback() : warningsStorage.run(warnings, callback);
+}
+function reportWarning(component, code, message, context) {
+  const warnings = warningsStorage.getStore();
+  if (warnings) {
+    warnings.push({
+      component,
+      message,
+      severity: "warning",
+      context: { code, ...context }
+    });
+    return;
+  }
+  console.warn(`[json-to-docx] [${code}] ${message}`);
+}
+var generationDateStorage, baseDirStorage, warningsStorage;
+var init_generationContext = __esm({
+  "src/utils/generationContext.ts"() {
+    "use strict";
+    generationDateStorage = new AsyncLocalStorage();
+    baseDirStorage = new AsyncLocalStorage();
+    warningsStorage = new AsyncLocalStorage();
+  }
+});
+
 // src/utils/imageUtils.ts
 import { readFileSync } from "fs";
 import { availableParallelism } from "os";
@@ -2734,7 +2751,7 @@ var init_imageUtils = __esm({
 });
 
 // src/ir/types.ts
-var TWIPS_PER_INCH, TWIPS_PER_POINT2, EMU_PER_INCH, EMU_PER_TWIP, DOCX_IR_SCHEMA_VERSION;
+var TWIPS_PER_INCH, TWIPS_PER_POINT2, EMU_PER_INCH, EMU_PER_TWIP, DOCX_IR_SCHEMA_VERSION, DOCX_IR_BORDER_STYLES;
 var init_types = __esm({
   "src/ir/types.ts"() {
     "use strict";
@@ -2743,6 +2760,35 @@ var init_types = __esm({
     EMU_PER_INCH = 914400;
     EMU_PER_TWIP = EMU_PER_INCH / TWIPS_PER_INCH;
     DOCX_IR_SCHEMA_VERSION = 1;
+    DOCX_IR_BORDER_STYLES = [
+      "single",
+      "dashDotStroked",
+      "dashed",
+      "dashSmallGap",
+      "dotDash",
+      "dotDotDash",
+      "dotted",
+      "double",
+      "doubleWave",
+      "inset",
+      "nil",
+      "none",
+      "outset",
+      "thick",
+      "thickThinLargeGap",
+      "thickThinMediumGap",
+      "thickThinSmallGap",
+      "thinThickLargeGap",
+      "thinThickMediumGap",
+      "thinThickSmallGap",
+      "thinThickThinLargeGap",
+      "thinThickThinMediumGap",
+      "thinThickThinSmallGap",
+      "threeDEmboss",
+      "threeDEngrave",
+      "triple",
+      "wave"
+    ];
   }
 });
 
@@ -2802,7 +2848,6 @@ import {
   AlignmentType,
   BookmarkEnd,
   BookmarkStart,
-  BorderStyle,
   ColumnBreak,
   CommentRangeEnd,
   CommentRangeStart,
@@ -3248,7 +3293,8 @@ function emitTable(block2, resources = /* @__PURE__ */ new Map()) {
     },
     layout: block2.layout === "fixed" ? TableLayoutType.FIXED : TableLayoutType.AUTOFIT,
     // An empty grid is a table with nothing to say about its columns, which is
-    // not the same as one whose columns are all zero wide.
+    // not the same as one whose columns are all zero wide. The compiler hands
+    // over every grid in twips, the unit `columnWidths` takes.
     ...block2.columnGrid.values.length > 0 ? { columnWidths: block2.columnGrid.values } : {},
     ...block2.borders ? {
       borders: {
@@ -3342,7 +3388,10 @@ function emitTableCell(cell, resources) {
 function emitBorder(border3) {
   if (!border3) return void 0;
   return {
-    style: BORDER_STYLE[border3.style] ?? BorderStyle.SINGLE,
+    // Already OOXML's word, and docx.js's `BorderStyle` values are exactly
+    // those words. Mapping unknown ones to `single` here is what once hid an
+    // authoring word the IR should never have carried.
+    style: border3.style,
     size: border3.sizeEighthPoints ?? 0,
     color: border3.color?.hex ?? "000000",
     // Stated only when the IR states it, so every border that predates the
@@ -3351,7 +3400,7 @@ function emitBorder(border3) {
     ...border3.spacePoints !== void 0 ? { space: border3.spacePoints } : {}
   };
 }
-var ALIGNMENT2, PAGE_FIELDS, isSequenceField, WRAP_TYPE, ThemedTableOfContents, VERTICAL_ALIGN, TABLE_ANCHOR, HORIZONTAL_POSITION, VERTICAL_POSITION, BORDER_STYLE;
+var ALIGNMENT2, PAGE_FIELDS, isSequenceField, WRAP_TYPE, ThemedTableOfContents, VERTICAL_ALIGN, TABLE_ANCHOR, HORIZONTAL_POSITION, VERTICAL_POSITION;
 var init_emit = __esm({
   "src/renderers/docxjs/emit.ts"() {
     "use strict";
@@ -3400,20 +3449,10 @@ var init_emit = __esm({
       inside: RelativeVerticalPosition.INSIDE,
       outside: RelativeVerticalPosition.OUTSIDE
     };
-    BORDER_STYLE = {
-      none: BorderStyle.NONE,
-      single: BorderStyle.SINGLE,
-      double: BorderStyle.DOUBLE,
-      dashed: BorderStyle.DASHED,
-      dotted: BorderStyle.DOTTED
-    };
   }
 });
 
 // src/renderers/docxjs/styles.ts
-import {
-  BorderStyle as BorderStyle2
-} from "docx";
 function runProperties(formatting) {
   const out = {};
   if (formatting.fontFamily !== void 0) out.font = formatting.fontFamily;
@@ -3422,7 +3461,7 @@ function runProperties(formatting) {
   }
   if (formatting.color) out.color = formatting.color.hex;
   if (formatting.bold !== void 0) out.bold = formatting.bold;
-  if (formatting.italic !== void 0) out.italic = formatting.italic;
+  if (formatting.italic !== void 0) out.italics = formatting.italic;
   if (formatting.underline) {
     out.underline = {
       type: formatting.underline.type,
@@ -3434,7 +3473,9 @@ function runProperties(formatting) {
   if (formatting.subScript) out.subScript = true;
   if (formatting.smallCaps !== void 0) out.smallCaps = formatting.smallCaps;
   if (formatting.allCaps !== void 0) out.allCaps = formatting.allCaps;
-  if (formatting.highlight !== void 0) out.highlight = formatting.highlight;
+  if (formatting.highlight !== void 0) {
+    out.highlight = formatting.highlight;
+  }
   if (formatting.characterSpacingTwentieths !== void 0) {
     out.characterSpacing = formatting.characterSpacingTwentieths;
   }
@@ -3448,7 +3489,10 @@ function runProperties(formatting) {
 }
 function border(value) {
   return {
-    style: BORDER_STYLE2[value.style] ?? BorderStyle2.SINGLE,
+    // OOXML's word, which is what docx.js's `BorderStyle` values are. A theme
+    // may state any of them; mapping the unlisted ones to `single` drew a
+    // `wave` or `triple` rule as a plain line here and as asked on office-open.
+    style: value.style,
     ...value.sizeEighthPoints !== void 0 ? { size: value.sizeEighthPoints } : {},
     ...value.color ? { color: value.color.hex } : {},
     ...value.spacePoints !== void 0 ? { space: value.spacePoints } : {}
@@ -3561,19 +3605,10 @@ function emitStyles(styles) {
     }
   };
 }
-var BORDER_STYLE2;
 var init_styles2 = __esm({
   "src/renderers/docxjs/styles.ts"() {
     "use strict";
     init_emit();
-    BORDER_STYLE2 = {
-      none: BorderStyle2.NONE,
-      single: BorderStyle2.SINGLE,
-      double: BorderStyle2.DOUBLE,
-      dashed: BorderStyle2.DASHED,
-      dotted: BorderStyle2.DOTTED,
-      thick: BorderStyle2.THICK
-    };
   }
 });
 
@@ -3752,7 +3787,7 @@ import {
   Header,
   ImageRun,
   Packer,
-  LineRuleType as LineRuleType2,
+  LineRuleType,
   Paragraph as Paragraph2
 } from "docx";
 function createDocxJsRenderer() {
@@ -4039,7 +4074,7 @@ function lastBlockIsFrame(section2) {
 function anchorParagraph(anchor) {
   return new Paragraph2({
     children: anchor ? [anchor] : [],
-    spacing: { before: 0, after: 0, line: 20, lineRule: LineRuleType2.EXACT }
+    spacing: { before: 0, after: 0, line: 20, lineRule: LineRuleType.EXACT }
   });
 }
 function coreProperties(ir) {
@@ -4232,10 +4267,17 @@ function runProperties2(formatting) {
   if (formatting.fontFamily) out.font = formatting.fontFamily;
   if (formatting.sizeHalfPoints !== void 0) {
     out.size = formatting.sizeHalfPoints / 2;
+    if (formatting.sizeHalfPoints) out.sizeComplexScript = out.size;
   }
   if (formatting.color) out.color = formatting.color.hex;
-  if (formatting.bold !== void 0) out.bold = formatting.bold;
-  if (formatting.italic !== void 0) out.italic = formatting.italic;
+  if (formatting.bold !== void 0) {
+    out.bold = formatting.bold;
+    out.boldComplexScript = formatting.bold;
+  }
+  if (formatting.italic !== void 0) {
+    out.italic = formatting.italic;
+    out.italicComplexScript = formatting.italic;
+  }
   if (formatting.underline) {
     out.underline = {
       type: formatting.underline.type,
@@ -4791,10 +4833,9 @@ function table(value, ctx) {
     },
     layout: value.layout,
     // An empty grid is a table with nothing to say about its columns, which is
-    // not the same as one whose columns are all zero wide.
-    ...value.columnGrid.values.length > 0 ? {
-      columnWidths: value.columnGrid.unit === "twips" ? value.columnGrid.values.map(Math.floor) : value.columnGrid.values
-    } : {},
+    // not the same as one whose columns are all zero wide. The compiler hands
+    // over every grid in twips; floored for the same reason as the width.
+    ...value.columnGrid.values.length > 0 ? { columnWidths: value.columnGrid.values.map(Math.floor) } : {},
     ...value.alignment ? { alignment: alignment(value.alignment) } : {},
     ...value.borders ? { borders: borders2(value.borders) } : {},
     ...value.cellMargins ? { margins: cellMargins(value.cellMargins) } : {},
@@ -4928,7 +4969,13 @@ function section(value, ctx, closesDocument = false) {
             }))
           } : {}
         }
-      } : {}
+      } : {},
+      // No document grid, as the IR states none. Left to the backend, every
+      // section gets the one Word's Chinese template sets — a 15.6pt line grid
+      // (`w:type="lines"`, pitch 312) — and every line is laid out on it here
+      // but at its own height on docx.js, which writes no grid type. A field
+      // the backend is not given takes that default, so all three are stated.
+      grid: { type: "default", linePitch: 360, charSpace: 0 }
     },
     children: sectionChildren2(value, ctx, closesDocument),
     ...value.headers ? { headers: headerFooterSet(value.headers, ctx) } : {},
@@ -5013,12 +5060,11 @@ function builtIn2(style) {
   };
 }
 function emitStyles2(styles) {
-  const documentDefaults = {
-    ...Object.keys(styles.defaults.run).length > 0 ? { run: runProperties2(styles.defaults.run) } : {},
-    ...Object.keys(styles.defaults.paragraph).length > 0 ? { paragraph: paragraphProperties2(styles.defaults.paragraph) } : {}
-  };
   const defaults = {
-    ...Object.keys(documentDefaults).length > 0 ? { document: documentDefaults } : {}
+    document: {
+      run: Object.keys(styles.defaults.run).length > 0 ? runProperties2(styles.defaults.run) : null,
+      paragraph: Object.keys(styles.defaults.paragraph).length > 0 ? paragraphProperties2(styles.defaults.paragraph) : null
+    }
   };
   for (const slot of [
     "footnoteText",
@@ -5047,7 +5093,7 @@ function emitStyles2(styles) {
         run: runProperties2(style.run)
       }))
     } : {},
-    ...Object.keys(defaults).length > 0 ? { default: defaults } : {}
+    default: defaults
   };
 }
 var init_styles3 = __esm({
@@ -6280,7 +6326,7 @@ import {
 
 // src/components/highcharts.ts
 init_colorUtils();
-init_layoutUtils();
+init_widthUtils();
 import {
   chartFamilyResolver,
   remoteExportNotice,
@@ -6391,8 +6437,7 @@ function placedWidthPt(config, theme) {
   const chart = config.options.chart;
   if (typeof width === "number") return width * POINTS_PER_PIXEL;
   if (typeof width === "string") {
-    const page = getPageSetup(theme);
-    const contentWidthPt = (page.size.width - page.margin.left - page.margin.right) * POINTS_PER_TWIP;
+    const contentWidthPt = getAvailableWidthTwips(theme) * POINTS_PER_TWIP;
     return parseFloat(width) / 100 * contentWidthPt;
   }
   if (typeof height === "number" && chart.height > 0) {
@@ -7156,6 +7201,7 @@ function resolveColors(entries, at, deps) {
 
 // src/styles/themeToStyles.ts
 init_themes();
+init_types();
 init_colorUtils();
 init_styleHelpers();
 import {
@@ -7322,10 +7368,13 @@ function convertParagraphProperties(merged, styleProps, theme) {
     }
   };
 }
+function themeBorderStyle(style) {
+  return DOCX_IR_BORDER_STYLES.includes(style) ? style : "single";
+}
 function convertBorders(borders3, theme) {
   if (!borders3) return void 0;
   const mapSide = (side) => side ? {
-    style: side.style,
+    style: themeBorderStyle(side.style),
     sizeEighthPoints: side.size,
     color: { hex: resolveColor(side.color, theme) },
     ...side.space !== void 0 ? { spacePoints: side.space } : {}
@@ -8512,7 +8561,11 @@ function resolveTableModel(source, theme, themeName, options = {}) {
   });
   adjudicateInteriorEdges([...hasHeader ? [header] : [], ...rows]);
   return {
-    ...resolveWidths(source, columns, theme, themeName),
+    ...resolveWidths(
+      source,
+      columns,
+      options.measureTwips ?? getAvailableWidthTwips(theme, themeName)
+    ),
     ...hasHeader ? { header } : {},
     rows,
     repeatHeader: source.repeatHeaderOnPageBreak ?? true
@@ -8566,22 +8619,24 @@ function adjudicateInteriorEdges(rows) {
     });
   });
 }
-function resolveWidths(source, columns, theme, themeName) {
+function resolveWidths(source, columns, measureTwips) {
   const hasExplicitWidths = columns.some((col) => col.width !== void 0);
   if (!hasExplicitWidths) {
-    const share = 100 / columns.length;
+    const percent = source.width ?? 100;
     return {
-      columnGrid: { unit: "percent", values: columns.map(() => share) },
-      width: { size: source.width ?? 100, unit: "percent" }
+      columnGrid: {
+        unit: "twips",
+        values: splitTwips(columns.length, measureTwips * percent / 100)
+      },
+      width: { size: percent, unit: "percent" }
     };
   }
-  const available = getAvailableWidthTwips(theme, themeName);
   const stated = columns.map(
-    (col) => col.width !== void 0 ? relativeLengthToTwips(col.width, available) : void 0
+    (col) => col.width !== void 0 ? relativeLengthToTwips(col.width, measureTwips) : void 0
   );
   const totalStated = stated.reduce((sum, w) => sum + (w ?? 0), 0);
   const unstatedCount = columns.filter((col) => col.width === void 0).length;
-  const remaining = Math.max(0, available - totalStated);
+  const remaining = Math.max(0, measureTwips - totalStated);
   const shareOfRemainder = unstatedCount > 0 ? remaining / unstatedCount : pointsToTwips(72);
   const values = stated.map((w) => w || shareOfRemainder);
   return {
@@ -8590,7 +8645,7 @@ function resolveWidths(source, columns, theme, themeName) {
       size: values.reduce((sum, w) => sum + w, 0),
       unit: "twips"
     },
-    ...totalStated > available ? { overflow: { totalTwips: totalStated, availableTwips: available } } : {}
+    ...totalStated > measureTwips ? { overflow: { totalTwips: totalStated, availableTwips: measureTwips } } : {}
   };
 }
 
@@ -9306,6 +9361,36 @@ function emptyToUndefined(formatting) {
 
 // src/ir/compiler.ts
 init_types();
+
+// src/ir/measure.ts
+var DEFAULT_COLUMN_SPACE_TWIPS = 720;
+function textWidthTwips(page) {
+  const { leftTwips, rightTwips, gutterTwips = 0 } = page.margins;
+  return Math.max(0, page.widthTwips - leftTwips - rightTwips - gutterTwips);
+}
+function sectionMeasureTwips(properties) {
+  const textWidth = textWidthTwips(properties.page);
+  const columns = properties.columns;
+  if (!columns || columns.count <= 1) return textWidth;
+  if (columns.equalWidth !== true && columns.widths?.length) {
+    return Math.min(...columns.widths.map((column) => column.widthTwips));
+  }
+  const space = columns.spaceTwips ?? DEFAULT_COLUMN_SPACE_TWIPS;
+  return Math.max(0, (textWidth - space * (columns.count - 1)) / columns.count);
+}
+function cellMeasureTwips(widthTwips, margins) {
+  return Math.max(
+    0,
+    widthTwips - (margins?.leftTwips ?? 0) - (margins?.rightTwips ?? 0)
+  );
+}
+function tableWidthTwips(width, measureTwips) {
+  if (width.kind === "twips") return width.value;
+  if (width.kind === "percent") return measureTwips * width.value / 100;
+  return measureTwips;
+}
+
+// src/ir/compiler.ts
 init_units();
 var CONTENT_BOOKMARK_ID_BASE = 2e6;
 var SINGLE_LINE_TWIPS = 240;
@@ -9506,6 +9591,42 @@ function compileSectionBody(section2, index, ordinal, chrome, ctx) {
   if (column && column.count > 1) {
     ctx.features.require("columns", `${path3}.properties.columns`);
   }
+  const properties = {
+    page: {
+      widthTwips: page.size.width,
+      heightTwips: page.size.height,
+      orientation: page.size.width > page.size.height ? "landscape" : "portrait",
+      ...page.size.code !== void 0 ? { code: page.size.code } : {},
+      margins: {
+        topTwips: page.margin.top,
+        bottomTwips: page.margin.bottom,
+        leftTwips: page.margin.left,
+        rightTwips: page.margin.right,
+        ...page.margin.header !== void 0 ? { headerTwips: page.margin.header } : {},
+        ...page.margin.footer !== void 0 ? { footerTwips: page.margin.footer } : {},
+        ...page.margin.gutter !== void 0 ? { gutterTwips: page.margin.gutter } : {}
+      }
+    },
+    // A chunk that starts on a new page says so; the rest continue the flow.
+    // The layout stage already decided which, so it is carried rather than
+    // re-derived from `breakBefore`: a section can be continuous without the
+    // two agreeing.
+    ...section2.properties.type ? { type: sectionType(section2.properties.type) } : {},
+    ...column ? {
+      columns: {
+        count: column.count,
+        ...column.space !== void 0 ? { spaceTwips: column.space } : {},
+        ...column.equalWidth !== void 0 ? { equalWidth: column.equalWidth } : {},
+        ...column.widths ? {
+          widths: column.widths.map((c) => ({
+            widthTwips: c.width,
+            ...c.space !== void 0 ? { spaceTwips: c.space } : {}
+          }))
+        } : {}
+      }
+    } : {}
+  };
+  const measureTwips = sectionMeasureTwips(properties);
   const children = [];
   const sectionBookmarkName = section2.belongsToUserSection && ordinal.ordinal !== void 0 ? `_Section_${ordinal.ordinal}` : void 0;
   section2.components.forEach((component, i) => {
@@ -9515,6 +9636,7 @@ function compileSectionBody(section2, index, ordinal, chrome, ctx) {
         ctx,
         path: `${path3}.children[${i}]`,
         id: blockId(index, [i]),
+        measureTwips,
         ...sectionBookmarkName ? { sectionBookmarkName } : {}
       })
     );
@@ -9527,41 +9649,7 @@ function compileSectionBody(section2, index, ordinal, chrome, ctx) {
     id: `s${index}`,
     path: path3,
     children,
-    properties: {
-      page: {
-        widthTwips: page.size.width,
-        heightTwips: page.size.height,
-        orientation: page.size.width > page.size.height ? "landscape" : "portrait",
-        ...page.size.code !== void 0 ? { code: page.size.code } : {},
-        margins: {
-          topTwips: page.margin.top,
-          bottomTwips: page.margin.bottom,
-          leftTwips: page.margin.left,
-          rightTwips: page.margin.right,
-          ...page.margin.header !== void 0 ? { headerTwips: page.margin.header } : {},
-          ...page.margin.footer !== void 0 ? { footerTwips: page.margin.footer } : {},
-          ...page.margin.gutter !== void 0 ? { gutterTwips: page.margin.gutter } : {}
-        }
-      },
-      // A chunk that starts on a new page says so; the rest continue the flow.
-      // The layout stage already decided which, so it is carried rather than
-      // re-derived from `breakBefore`: a section can be continuous without the
-      // two agreeing.
-      ...section2.properties.type ? { type: sectionType(section2.properties.type) } : {},
-      ...column ? {
-        columns: {
-          count: column.count,
-          ...column.space !== void 0 ? { spaceTwips: column.space } : {},
-          ...column.equalWidth !== void 0 ? { equalWidth: column.equalWidth } : {},
-          ...column.widths ? {
-            widths: column.widths.map((c) => ({
-              widthTwips: c.width,
-              ...c.space !== void 0 ? { spaceTwips: c.space } : {}
-            }))
-          } : {}
-        }
-      } : {}
-    }
+    properties
   };
   if (ordinal.ordinal !== void 0) {
     compiled.bookmark = {
@@ -9572,9 +9660,22 @@ function compileSectionBody(section2, index, ordinal, chrome, ctx) {
     };
     ctx.features.require("bookmarks", `${path3}.bookmark`);
   }
-  const headers = compilePart(chrome.header, "header", index, ctx);
+  const chromeMeasureTwips = textWidthTwips(properties.page);
+  const headers = compilePart(
+    chrome.header,
+    "header",
+    index,
+    chromeMeasureTwips,
+    ctx
+  );
   if (headers) compiled.headers = { default: headers };
-  const footers = compilePart(chrome.footer, "footer", index, ctx);
+  const footers = compilePart(
+    chrome.footer,
+    "footer",
+    index,
+    chromeMeasureTwips,
+    ctx
+  );
   if (footers) compiled.footers = { default: footers };
   if (headers || footers) {
     ctx.features.require("headers-footers", `${path3}.headers`);
@@ -9593,7 +9694,7 @@ function sectionType(value) {
       return void 0;
   }
 }
-function compilePart(part, kind, sectionIndex, ctx) {
+function compilePart(part, kind, sectionIndex, measureTwips, ctx) {
   if (!part) return void 0;
   const id = `${kind}:s${sectionIndex}:default`;
   const children = [];
@@ -9604,7 +9705,8 @@ function compilePart(part, kind, sectionIndex, ctx) {
     const scope = {
       ctx,
       path: `sections[${sectionIndex}].${kind}s.default.children[${i}]`,
-      id: headerFooterBlockId(id, [i])
+      id: headerFooterBlockId(id, [i]),
+      measureTwips
     };
     children.push(
       ...component.name === "paragraph" ? compileChromeParagraph(component, scope) : component.name === "image" ? compileChromeImage(component, scope) : compileComponent(component, scope)
@@ -9680,9 +9782,7 @@ function compileChromeImage(component, scope) {
   if (mediaType === "svg") ctx.features.require("svg-images", path3);
   const page = getPageSetup(ctx.theme);
   const pageWidthPx = Math.round(twipsToPixels(page.size.width));
-  const contentWidthPx = Math.round(
-    twipsToPixels(page.size.width - page.margin.left - page.margin.right)
-  );
+  const contentWidthPx = Math.round(twipsToPixels(scope.measureTwips));
   const pageHeightPx = Math.round(twipsToPixels(page.size.height));
   const contentHeightPx = Math.round(
     twipsToPixels(page.size.height - page.margin.top - page.margin.bottom)
@@ -9890,7 +9990,7 @@ function compileColumns(component, scope) {
   const props = component.props ?? {};
   const configs = columnConfigs(props.columns);
   if (configs.length === 0) return [];
-  const available = getAvailableWidthTwips(ctx.theme, ctx.themeName);
+  const available = scope.measureTwips;
   const { widths, gaps } = columnMetrics(configs, props.gap, available);
   const stated = widths.map(
     (width, index) => width + gaps[index] / 2 + (index > 0 ? gaps[index - 1] / 2 : 0)
@@ -9919,11 +10019,18 @@ function compileColumns(component, scope) {
       rows: [
         {
           cells: configs.map((_, index) => {
+            const margins = {
+              topTwips: 0,
+              rightTwips: gaps[index] / 2,
+              bottomTwips: 0,
+              leftTwips: index > 0 ? gaps[index - 1] / 2 : 0
+            };
             const blocks = contents[index].flatMap(
               (child, childIndex) => compileComponent(child, {
                 ...scope,
                 path: `${path3}.children[${index}][${childIndex}]`,
-                id: `${scope.id}:c${index}:${childIndex}`
+                id: `${scope.id}:c${index}:${childIndex}`,
+                measureTwips: cellMeasureTwips(cells[index], margins)
               })
             );
             return {
@@ -9938,12 +10045,7 @@ function compileColumns(component, scope) {
                 }
               ],
               widthTwips: cells[index],
-              margins: {
-                topTwips: 0,
-                rightTwips: gaps[index] / 2,
-                bottomTwips: 0,
-                leftTwips: index > 0 ? gaps[index - 1] / 2 : 0
-              },
+              margins,
               verticalAlign: "top",
               borders: {
                 top: NO_BORDERS.top,
@@ -10000,6 +10102,16 @@ var DEFAULT_TEXT_BOX_WIDTH_TWIPS = 5e3;
 function compileTextBox(component, scope) {
   const { ctx, path: path3 } = scope;
   const props = component.props ?? {};
+  const style = props.style;
+  const padding = style?.padding;
+  const width = textBoxWidth(props);
+  const widthTwips = Math.round(tableWidthTwips(width, scope.measureTwips));
+  const margins = {
+    topTwips: padding?.top ? pointsToTwips2(padding.top) : 0,
+    rightTwips: padding?.right ? pointsToTwips2(padding.right) : 0,
+    bottomTwips: padding?.bottom ? pointsToTwips2(padding.bottom) : 0,
+    leftTwips: padding?.left ? pointsToTwips2(padding.left) : 0
+  };
   const children = [];
   const contents = component.children ?? [];
   contents.forEach((child, index) => {
@@ -10007,12 +10119,12 @@ function compileTextBox(component, scope) {
       ...compileComponent(child, {
         ...scope,
         path: `${path3}.children[${index}]`,
-        id: `${scope.id}:c${index}`
+        id: `${scope.id}:c${index}`,
+        // What the box holds is set against the box less its padding.
+        measureTwips: cellMeasureTwips(widthTwips, margins)
       })
     );
   });
-  const style = props.style;
-  const padding = style?.padding;
   if (props.renderAs === "shape") {
     const shape = compileShape2(props, children, scope);
     if (shape) return shape;
@@ -10024,9 +10136,11 @@ function compileTextBox(component, scope) {
       kind: "table",
       id: scope.id,
       path: path3,
-      // No grid: one cell, whose width the table itself decides.
-      columnGrid: { unit: "twips", values: [] },
-      width: textBoxWidth(props),
+      // One cell, as wide as the box. Left out, the grid would be each
+      // backend's 100-twip placeholder, which a reader that takes the grid as
+      // the column widths draws.
+      columnGrid: { unit: "twips", values: [widthTwips] },
+      width,
       layout: "fixed",
       // The container is invisible; whatever border the author asked for is
       // drawn by the cell inside it.
@@ -10046,12 +10160,7 @@ function compileTextBox(component, scope) {
                   children: []
                 }
               ],
-              margins: {
-                topTwips: padding?.top ? pointsToTwips2(padding.top) : 0,
-                rightTwips: padding?.right ? pointsToTwips2(padding.right) : 0,
-                bottomTwips: padding?.bottom ? pointsToTwips2(padding.bottom) : 0,
-                leftTwips: padding?.left ? pointsToTwips2(padding.left) : 0
-              },
+              margins,
               ...style?.shading?.fill ? {
                 shading: {
                   fill: irColor(
@@ -10070,8 +10179,11 @@ function compileTextBox(component, scope) {
 var EMU_PER_PIXEL = 9525;
 function compileShape2(props, children, scope) {
   const { ctx, path: path3 } = scope;
-  const width = shapeSize(props.width, "width", ctx);
-  const height = shapeSize(props.height, "height", ctx);
+  const width = shapeSize(props.width, scope.measureTwips);
+  const height = shapeSize(
+    props.height,
+    getAvailableHeightTwips(ctx.theme, ctx.themeName)
+  );
   if (width.pixels === void 0 || height.pixels === void 0) {
     warnOnce(
       ctx,
@@ -10102,7 +10214,7 @@ function compileShape2(props, children, scope) {
     warnOnce(
       ctx,
       "text-box",
-      '[core-docx] text-box renderAs "shape" resolves percentage sizes at generation time, against the current page content box; the shape will not reflow if the page size changes.'
+      '[core-docx] text-box renderAs "shape" resolves percentage sizes at generation time \u2014 a width against what holds it, a height against the page \u2014 so the shape will not reflow if either changes.'
     );
   }
   if (outline.ignoredSides.length > 0) {
@@ -10147,7 +10259,7 @@ function compileShape2(props, children, scope) {
     }
   ];
 }
-function shapeSize(value, axis, ctx) {
+function shapeSize(value, referenceTwips) {
   if (typeof value === "number") {
     return { pixels: Math.round(value), resolvedPercentage: false };
   }
@@ -10156,9 +10268,8 @@ function shapeSize(value, axis, ctx) {
   if (!Number.isFinite(fraction) || fraction <= 0) {
     return { resolvedPercentage: false };
   }
-  const availableTwips = axis === "width" ? getAvailableWidthTwips(ctx.theme, ctx.themeName) : getAvailableHeightTwips(ctx.theme, ctx.themeName);
   return {
-    pixels: Math.round(availableTwips * fraction / TWIPS_PER_PIXEL),
+    pixels: Math.round(referenceTwips * fraction / TWIPS_PER_PIXEL),
     resolvedPercentage: true
   };
 }
@@ -10233,10 +10344,20 @@ function textBoxWidth(props) {
     value: typeof raw === "number" ? raw * TWIPS_PER_PIXEL : DEFAULT_TEXT_BOX_WIDTH_TWIPS
   };
 }
+function borderLineStyle(authored) {
+  switch (authored) {
+    case "dashed":
+    case "dotted":
+    case "double":
+      return authored;
+    default:
+      return "single";
+  }
+}
 function compileBorders(border3, ctx) {
   if (!border3) return void 0;
   const side = (value) => value ? {
-    style: String(value.style ?? "single"),
+    style: value.style === "none" ? "none" : borderLineStyle(value.style),
     // Points to eighths of a point, never thinner than the hairline a
     // reader can actually see.
     sizeEighthPoints: value.width !== void 0 ? Math.max(1, Math.round(value.width * 8)) : 1,
@@ -10340,12 +10461,6 @@ function compileToc(component, scope) {
 var DEFAULT_DIVIDER_SPACING_PT = 6;
 var DEFAULT_DIVIDER_THICKNESS_PT = 1;
 var DIVIDER_LINE_TWIPS = 20;
-var DIVIDER_BORDER_STYLE = {
-  solid: "single",
-  dashed: "dashed",
-  dotted: "dotted",
-  double: "double"
-};
 function compileDivider(component, scope) {
   const { ctx, path: path3 } = scope;
   const props = component.props ?? {};
@@ -10374,10 +10489,10 @@ function compileDivider(component, scope) {
           lineTwips: DIVIDER_LINE_TWIPS,
           lineRule: "exact"
         },
-        ...dividerIndent(props, ctx, path3),
+        ...dividerIndent(props, scope),
         borders: {
           bottom: {
-            style: DIVIDER_BORDER_STYLE[String(props.style)] ?? "single",
+            style: borderLineStyle(props.style),
             sizeEighthPoints: pointsToEighthPoints(thicknessPt),
             color: irColor(
               resolveColor(String(props.color ?? "border"), ctx.theme)
@@ -10391,14 +10506,10 @@ function compileDivider(component, scope) {
     }
   ];
 }
-function dividerIndent(props, ctx, path3) {
+function dividerIndent(props, scope) {
+  const { ctx, path: path3, measureTwips } = scope;
   const width = props.width;
   if (width === void 0) return {};
-  const page = getPageSetup(ctx.theme);
-  const measureTwips = Math.max(
-    0,
-    page.size.width - page.margin.left - page.margin.right
-  );
   let usedTwips;
   if (typeof width === "number" && Number.isFinite(width)) {
     usedTwips = pointsToTwips2(width);
@@ -10554,7 +10665,7 @@ function compileList(component, scope, referencePrefix = "list", explicitLevels)
     }
     blocks.push(
       paragraphNode(
-        { ctx, path: itemPath, id: `${scope.id}:i${index}` },
+        { ...scope, path: itemPath, id: `${scope.id}:i${index}` },
         revision === void 0 ? parseInline(text, {
           base,
           hyperlinks: true,
@@ -11201,7 +11312,7 @@ function compileVisual(component, scope) {
   );
   if (!group) return [];
   const size = visualPlacementPixels(props, group.canvas, {
-    widthPx: Math.round(twipsToPixels(getAvailableWidthTwips(ctx.theme))),
+    widthPx: Math.round(twipsToPixels(scope.measureTwips)),
     heightPx: Math.round(twipsToPixels(getAvailableHeightTwips(ctx.theme)))
   });
   const drawing = {
@@ -11316,7 +11427,7 @@ function compileImage2(component, scope) {
       `Alt text is not written to the document: the DOCX pipeline has never emitted \`wp:docPr\` descriptions, so the image at ${path3} will have none. The text is preserved in the IR.`
     );
   }
-  const size = imagePixelSize(props, loaded, ctx);
+  const size = imagePixelSize(props, loaded, scope);
   const resourceId = declareResource(loaded, mediaType, ctx);
   const image = {
     kind: "image",
@@ -11426,8 +11537,7 @@ function compileChart(component, scope) {
       return [];
     }
   });
-  const page = getPageSetup(ctx.theme);
-  const contentWidthInches = (page.size.width - page.margin.left - page.margin.right) / 1440;
+  const contentWidthInches = scope.measureTwips / 1440;
   const widthInches = typeof props.width === "number" ? props.width : contentWidthInches;
   const heightInches = typeof props.height === "number" ? props.height : DEFAULT_CHART_HEIGHT_INCHES;
   const chart = {
@@ -11527,12 +11637,13 @@ function wrapType(value) {
       return "square";
   }
 }
-function imagePixelSize(props, loaded, ctx) {
+function imagePixelSize(props, loaded, scope) {
+  const { ctx } = scope;
   const widthRef = props.widthRelativeTo === "page" ? "page" : "content";
   const heightRef = props.heightRelativeTo === "page" ? "page" : "content";
   const availableWidthPx = Math.round(
     twipsToPixels(
-      widthRef === "page" ? getPageWidthTwips(ctx.theme) : getAvailableWidthTwips(ctx.theme)
+      widthRef === "page" ? getPageWidthTwips(ctx.theme) : scope.measureTwips
     )
   );
   const availableHeightPx = Math.round(
@@ -11719,7 +11830,10 @@ function compileTable(component, scope) {
     source,
     ctx.theme,
     ctx.themeName,
-    { onWarning: (code, message) => warnOnce(ctx, "table", message, code) }
+    {
+      onWarning: (code, message) => warnOnce(ctx, "table", message, code),
+      measureTwips: scope.measureTwips
+    }
   );
   if (model.overflow) {
     warnOnce(
@@ -11737,6 +11851,7 @@ function compileTable(component, scope) {
     ...model.header ? [
       compileTableRow(
         model.header,
+        model.columnGrid.values,
         style.headerParagraph,
         style.tableHeader,
         {
@@ -11749,13 +11864,19 @@ function compileTable(component, scope) {
       )
     ] : [],
     ...model.rows.map(
-      (row, index) => compileTableRow(row, style.cellParagraph, style.tableCell, {
-        ctx,
-        path: `${path3}.rows[${index}]`,
-        id: `${scope.id}:r${index}`,
-        ...row.tableHeader !== void 0 ? { isHeader: row.tableHeader } : {},
-        ...row.cantSplit !== void 0 ? { cantSplit: row.cantSplit } : {}
-      })
+      (row, index) => compileTableRow(
+        row,
+        model.columnGrid.values,
+        style.cellParagraph,
+        style.tableCell,
+        {
+          ctx,
+          path: `${path3}.rows[${index}]`,
+          id: `${scope.id}:r${index}`,
+          ...row.tableHeader !== void 0 ? { isHeader: row.tableHeader } : {},
+          ...row.cantSplit !== void 0 ? { cantSplit: row.cantSplit } : {}
+        }
+      )
     )
   ];
   ctx.features.require("tables", path3);
@@ -11833,7 +11954,7 @@ function tableBlocker(model, path3) {
   }
   return void 0;
 }
-function compileTableRow(row, spacing, baseStyle, scope) {
+function compileTableRow(row, columnTwips, spacing, baseStyle, scope) {
   const { ctx } = scope;
   const rowRevision = row.revision;
   const rowMark = rowRevision ? {
@@ -11853,6 +11974,7 @@ function compileTableRow(row, spacing, baseStyle, scope) {
     cells: row.cells.map(
       (cell, colIndex) => compileTableCell(
         cell,
+        columnTwips[colIndex] ?? 0,
         spacing,
         baseStyle,
         row.keepNext,
@@ -11874,7 +11996,17 @@ function compileTableRow(row, spacing, baseStyle, scope) {
     ...scope.cantSplit !== void 0 ? { cantSplit: scope.cantSplit } : {}
   };
 }
-function compileTableCell(cell, spacing, baseStyle, keepNext, scope, rowRevision, markRevision) {
+function compileTableCell(cell, columnTwips, spacing, baseStyle, keepNext, partScope, rowRevision, markRevision) {
+  const margins = !cell.missing && cell.padding ? {
+    topTwips: pointsToTwips2(cell.padding.top),
+    bottomTwips: pointsToTwips2(cell.padding.bottom),
+    leftTwips: pointsToTwips2(cell.padding.left),
+    rightTwips: pointsToTwips2(cell.padding.right)
+  } : void 0;
+  const scope = {
+    ...partScope,
+    measureTwips: cellMeasureTwips(columnTwips, margins)
+  };
   const cellLine = compileLineSpacing(cell.font?.lineSpacing);
   const paragraph2 = {
     kind: "paragraph",
@@ -11903,14 +12035,7 @@ function compileTableCell(cell, spacing, baseStyle, keepNext, scope, rowRevision
     ...cell.missing ? {} : {
       verticalAlign: verticalAlign(cell.verticalAlignment),
       ...cell.backgroundColor !== void 0 && cell.backgroundColor !== "transparent" ? { shading: { fill: { hex: cell.backgroundColor } } } : {},
-      ...cell.padding ? {
-        margins: {
-          topTwips: pointsToTwips2(cell.padding.top),
-          bottomTwips: pointsToTwips2(cell.padding.bottom),
-          leftTwips: pointsToTwips2(cell.padding.left),
-          rightTwips: pointsToTwips2(cell.padding.right)
-        }
-      } : {}
+      ...margins ? { margins } : {}
     },
     borders: {
       top: compileTableBorder(cell.borders.top),
@@ -12933,9 +13058,10 @@ function docxBlockContext(document, theme, path3, sources) {
     page.size ?? theme.page.size
   );
   const overrides = isBlockRecord(page.margins) ? page.margins : {};
+  const gutter = "gutter" in margins ? margins.gutter : 0;
   const width = Object.keys(page).length ? Math.max(
     0,
-    dimensions.width - Number(overrides.left ?? margins.left ?? 1440) - Number(overrides.right ?? margins.right ?? 1440)
+    dimensions.width - Number(overrides.left ?? margins.left ?? 1440) - Number(overrides.right ?? margins.right ?? 1440) - Number(overrides.gutter ?? gutter ?? 0)
   ) : getAvailableWidthTwips(theme);
   const height = Object.keys(page).length ? Math.max(
     0,
@@ -13492,7 +13618,7 @@ function pageBox(theme, themeName, pageOverride) {
   return {
     availableWidthTwips: Math.max(
       0,
-      page.size.width - page.margin.left - page.margin.right
+      page.size.width - page.margin.left - page.margin.right - (page.margin.gutter ?? 0)
     ),
     pageBottomTwips: page.size.height
   };