@json-to-office/core-docx 1.1.0 → 1.4.0

package/dist/plugin/example/index.js

@@ -355,8 +355,7 @@ var init_minimal_docx_theme = __esm({
         },
         list: {
           format: "bullet",
-          bullet: "\u2022",
-          indent: 3
+          bullet: "\u2022"
         },
         image: {
           alignment: "left"
@@ -480,8 +479,7 @@ var init_corporate_docx_theme = __esm({
         },
         list: {
           format: "bullet",
-          bullet: "\u2022",
-          indent: 3
+          bullet: "\u2022"
         },
         statistic: {
           alignment: "center"
@@ -594,8 +592,7 @@ var init_modern_docx_theme = __esm({
         },
         list: {
           format: "bullet",
-          bullet: "\u2013",
-          indent: 3
+          bullet: "\u2013"
         },
         image: {
           alignment: "center"
@@ -719,8 +716,7 @@ var init_apex_docx_theme = __esm({
         },
         list: {
           format: "bullet",
-          bullet: "\u2022",
-          indent: 3
+          bullet: "\u2022"
         },
         image: {
           alignment: "center"
@@ -852,8 +848,7 @@ var init_devportal_docx_theme = __esm({
         },
         list: {
           format: "bullet",
-          bullet: "\u2013",
-          indent: 3
+          bullet: "\u2013"
         },
         image: {
           alignment: "center"
@@ -2189,6 +2184,10 @@ function inlineChildren(children, resources = /* @__PURE__ */ new Map()) {
         throw new Error(
           "the docxjs renderer has no emitter for a drawing group; this document should have been refused by the capability check"
         );
+      case "chart":
+        throw new Error(
+          "the docxjs renderer has no emitter for a chart; this document should have been refused by the capability check"
+        );
       case "noteReference":
         out.push(
           child.noteKind === "endnote" ? new EndnoteReferenceRun(child.id) : new FootnoteReferenceRun(child.id)
@@ -2747,88 +2746,6 @@ var init_styles2 = __esm({
   }
 });
 
-// src/ir/features.ts
-var DOCX_FEATURES, ALL_DOCX_FEATURES;
-var init_features = __esm({
-  "src/ir/features.ts"() {
-    "use strict";
-    DOCX_FEATURES = [
-      /** Paragraphs and text runs — the floor of the format. */
-      "paragraphs",
-      /** Named paragraph and character styles in `styles.xml`. */
-      "styles",
-      /** Numbering definitions and numbered paragraphs. */
-      "numbering",
-      /** Multiple sections with their own page setup. */
-      "sections",
-      /** Multi-column section layout. */
-      "columns",
-      /** Header and footer parts, including first/even variants. */
-      "headers-footers",
-      "tables",
-      /** Merged table cells — column span or vertical merge. */
-      "table-merged-cells",
-      /** A table positioned out of the text flow. */
-      "floating-tables",
-      /** Inline images. */
-      "images",
-      /** Anchored images with text wrapping. */
-      "floating-images",
-      /** SVG images with a raster fallback. */
-      "svg-images",
-      /** A paragraph positioned as a floating frame. */
-      "text-frames",
-      /** Native shape text boxes. */
-      "text-boxes",
-      /**
-       * A DrawingML group: shapes, text boxes and pictures sharing one child
-       * coordinate space, drawn as a single anchored or inline object.
-       *
-       * Separate from `text-boxes` because a lone `wps:wsp` run is a far smaller
-       * ask than `wpg:wgp` with child transforms, preset geometry and grouped
-       * pictures — a backend can plausibly have the first and not the second.
-       */
-      "drawing-groups",
-      /** A table-of-contents field. */
-      "toc",
-      /** TOC entries baked in so an unrefreshed reader still shows them. */
-      "cached-toc",
-      /** Arbitrary Word fields, e.g. PAGE, NUMPAGES, REF. */
-      "fields",
-      /** Field results cached for readers that never refresh. */
-      "cached-fields",
-      "hyperlinks",
-      "bookmarks",
-      /** Links and REF fields that target a bookmark. */
-      "cross-references",
-      "comments",
-      /** Threaded and resolvable comments. */
-      "comment-threads",
-      "footnotes",
-      "endnotes",
-      /** Inserted and deleted content. */
-      "revisions",
-      /** Page, column and line breaks. */
-      "breaks",
-      /** Paragraph and table shading. */
-      "shading",
-      /** Paragraph, table and page borders. */
-      "borders",
-      /** Tab stops. */
-      "tab-stops",
-      /** Per-run proofing language and no-proof. */
-      "proofing-language",
-      /** Custom document properties. */
-      "custom-properties",
-      /** Right-to-left paragraph direction. */
-      "rtl"
-    ];
-    ALL_DOCX_FEATURES = new Set(
-      DOCX_FEATURES
-    );
-  }
-});
-
 // src/utils/packageDocument.ts
 import AdmZip from "adm-zip";
 function resolveGenerationDate(options) {
@@ -3236,41 +3153,149 @@ function coreProperties(ir) {
     ...metadata.custom?.length ? { customProperties: metadata.custom } : {}
   };
 }
-var DOCXJS_RENDERER_ID, NOT_YET_EMITTED, DOCXJS_CAPABILITIES;
+var DOCXJS_RENDERER_ID, DOCXJS_CAPABILITIES;
 var init_docxjs = __esm({
   "src/renderers/docxjs/index.ts"() {
     "use strict";
     init_styles2();
     init_imageUtils();
-    init_features();
     init_packageDocument();
     init_fixFloatingImageIds();
     init_emit();
     init_units();
     DOCXJS_RENDERER_ID = "docxjs";
-    NOT_YET_EMITTED = /* @__PURE__ */ new Set([
-      "table-merged-cells",
-      "cached-fields",
-      "shading",
-      "borders",
-      "rtl",
-      // `drawing-groups` is the one exclusion that is a real backend gap rather
-      // than a slice boundary: docx.js has no `wpg:wgp`. Leaving it out is what
-      // turns a native `visual` sent to this backend into a named capability
-      // error instead of a document with the graphic missing.
-      "drawing-groups"
+    DOCXJS_CAPABILITIES = /* @__PURE__ */ new Set([
+      "paragraphs",
+      "styles",
+      "numbering",
+      "sections",
+      "columns",
+      "headers-footers",
+      "tables",
+      "floating-tables",
+      "images",
+      "floating-images",
+      "svg-images",
+      "text-frames",
+      "text-boxes",
+      "toc",
+      "cached-toc",
+      "fields",
+      "hyperlinks",
+      "bookmarks",
+      "cross-references",
+      "comments",
+      "comment-threads",
+      "footnotes",
+      "endnotes",
+      "revisions",
+      "breaks",
+      "tab-stops",
+      "proofing-language",
+      "custom-properties"
     ]);
-    DOCXJS_CAPABILITIES = new Set(
-      [...ALL_DOCX_FEATURES].filter((feature) => !NOT_YET_EMITTED.has(feature))
+  }
+});
+
+// src/utils/chartWorkbook.ts
+import AdmZip3 from "adm-zip";
+import { chartWorkbookParts } from "@json-to-office/shared/rendering";
+import {
+  CHART_WORKBOOK_SHEET_NAME,
+  categoryReference,
+  columnLetter,
+  seriesNameReference,
+  seriesValueReference
+} from "@json-to-office/shared/rendering";
+function buildChartWorkbook(series) {
+  const zip = new AdmZip3();
+  for (const [name, content] of chartWorkbookParts(series)) {
+    zip.addFile(name, Buffer.from(content, "utf8"));
+  }
+  for (const entry of zip.getEntries()) {
+    entry.header.timeval = WORKBOOK_TIMESTAMP;
+  }
+  return new Uint8Array(zip.toBuffer());
+}
+var WORKBOOK_TIMESTAMP;
+var init_chartWorkbook = __esm({
+  "src/utils/chartWorkbook.ts"() {
+    "use strict";
+    init_packageDocument();
+    WORKBOOK_TIMESTAMP = toDosTime(DEFAULT_GENERATION_DATE);
+  }
+});
+
+// src/renderers/office-open/chartParts.ts
+import {
+  CHART_WORKBOOK_CONTENT_TYPE,
+  chartWorkbookRelsXml,
+  matchChartParts,
+  spliceChartXml
+} from "@json-to-office/shared/rendering";
+function spliceInput(chart) {
+  return {
+    chartType: chart.chartType,
+    series: chart.series,
+    colors: chart.colors,
+    ...chart.legendPosition ? { legendPosition: chart.legendPosition } : {},
+    ...chart.categoryAxisTitle ? { categoryAxis: { title: chart.categoryAxisTitle } } : {},
+    ...chart.valueAxisTitle ? { valueAxis: { title: chart.valueAxisTitle } } : {}
+  };
+}
+function declareWorkbookContentType(zip) {
+  const entry = zip.getEntry("[Content_Types].xml");
+  if (!entry) return;
+  const xml = entry.getData().toString("utf8");
+  if (xml.includes(`Extension="xlsx"`)) return;
+  zip.updateFile(
+    entry,
+    Buffer.from(
+      xml.replace(
+        '<Default Extension="xml"',
+        `<Default Extension="xlsx" ContentType="${CHART_WORKBOOK_CONTENT_TYPE}"/><Default Extension="xml"`
+      ),
+      "utf8"
+    )
+  );
+}
+function spliceChartParts(zip, charts) {
+  if (charts.length === 0) return;
+  const parts = zip.getEntries().map((entry) => entry.entryName).map((name) => name.match(/^word\/charts\/chart(\d+)\.xml$/)).filter((match) => match !== null).map(
+    (match) => [
+      Number(match[1]),
+      zip.getEntry(match[0]).getData().toString("utf8")
+    ]
+  );
+  for (const { ordinal, xml, chart } of matchChartParts(parts, charts)) {
+    const workbookName = `chart${ordinal}.xlsx`;
+    zip.updateFile(
+      zip.getEntry(`word/charts/chart${ordinal}.xml`),
+      Buffer.from(spliceChartXml(xml, spliceInput(chart)), "utf8")
+    );
+    zip.addFile(
+      `word/embeddings/${workbookName}`,
+      Buffer.from(buildChartWorkbook(chart.series))
+    );
+    zip.addFile(
+      `word/charts/_rels/chart${ordinal}.xml.rels`,
+      Buffer.from(chartWorkbookRelsXml(workbookName), "utf8")
     );
   }
+  declareWorkbookContentType(zip);
+}
+var init_chartParts = __esm({
+  "src/renderers/office-open/chartParts.ts"() {
+    "use strict";
+    init_chartWorkbook();
+  }
 });
 
 // src/renderers/office-open/emit.ts
 import { assertNever as assertNever2 } from "@json-to-office/shared/rendering";
 function emptyContext() {
   let next = 1;
-  return { pictures: /* @__PURE__ */ new Map(), nextDrawingId: () => next++ };
+  return { pictures: /* @__PURE__ */ new Map(), nextDrawingId: () => next++, charts: [] };
 }
 function simpleField(instruction, cachedText) {
   return {
@@ -3406,6 +3431,10 @@ function inlineChildren2(children, ctx = emptyContext()) {
       case "shape":
         out.push({ wpsShape: shapeOptions(child, ctx) });
         break;
+      case "chart":
+        ctx.charts?.push(child);
+        out.push({ chart: chartOptions(child, ctx) });
+        break;
       case "noteReference":
         out.push(
           child.noteKind === "endnote" ? { endnoteReference: child.id } : { footnoteReference: child.id }
@@ -3514,6 +3543,25 @@ function drawingGroupOptions(group, ctx) {
     ...group.floating ? { floating: floatingOptions2(group.floating) } : {}
   };
 }
+function chartOptions(chart, ctx) {
+  const id = ctx.nextDrawingId();
+  return {
+    type: chart.chartType,
+    categories: chart.series[0]?.labels ?? [],
+    series: chart.series.map((entry, index) => ({
+      name: entry.name ?? `Series ${index + 1}`,
+      values: entry.values
+    })),
+    ...chart.title && chart.showTitle !== false ? { title: chart.title } : {},
+    ...chart.showLegend !== void 0 ? { showLegend: chart.showLegend } : {},
+    transformation: { width: chart.widthEmu, height: chart.heightEmu },
+    altText: {
+      id: String(id),
+      ...chart.altText ? { description: chart.altText } : {}
+    },
+    ...chart.floating ? { floating: floatingOptions2(chart.floating) } : {}
+  };
+}
 function groupChild(child, ctx) {
   return child.kind === "shape" ? groupShape(child, ctx) : groupPicture(child, ctx);
 }
@@ -4086,6 +4134,7 @@ __export(office_open_exports, {
   buildDocumentOptions: () => buildDocumentOptions,
   createOfficeOpenDocxRenderer: () => createOfficeOpenDocxRenderer
 });
+import AdmZip4 from "adm-zip";
 async function createOfficeOpenDocxRenderer() {
   const backend = await import(
     /* @vite-ignore */
@@ -4101,13 +4150,19 @@ async function createOfficeOpenDocxRenderer() {
     format: "docx",
     capabilities: OFFICE_OPEN_CAPABILITIES,
     async render(ir, options) {
-      const document = await buildDocumentOptions(ir);
+      const charts = [];
+      const document = await buildDocumentOptions(ir, charts);
       const bytes = await backend.generateDocument(document, {
         type: "uint8array"
       });
-      const raw = Buffer.from(
+      let raw = Buffer.from(
         bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes)
       );
+      if (charts.length > 0) {
+        const zip = new AdmZip4(raw);
+        spliceChartParts(zip, charts);
+        raw = zip.toBuffer();
+      }
       if (options?.deterministic === false) return new Uint8Array(raw);
       return new Uint8Array(
         canonicalizeDocxBuffer(
@@ -4121,11 +4176,12 @@ async function createOfficeOpenDocxRenderer() {
     }
   };
 }
-async function buildDocumentOptions(ir) {
+async function buildDocumentOptions(ir, charts = []) {
   let nextDrawingId = 1;
   const ctx = {
     pictures: await prepareImages2(ir),
-    nextDrawingId: () => nextDrawingId++
+    nextDrawingId: () => nextDrawingId++,
+    charts
   };
   return {
     styles: emitStyles2(ir.styles),
@@ -4395,28 +4451,48 @@ function coreProperties2(ir) {
     ...metadata.custom?.length ? { customProperties: metadata.custom } : {}
   };
 }
-var OFFICE_OPEN_DOCX_RENDERER_ID, OFFICE_OPEN_DOCX, UNSUPPORTED, OFFICE_OPEN_CAPABILITIES;
+var OFFICE_OPEN_DOCX_RENDERER_ID, OFFICE_OPEN_DOCX, OFFICE_OPEN_CAPABILITIES;
 var init_office_open = __esm({
   "src/renderers/office-open/index.ts"() {
     "use strict";
-    init_features();
+    init_chartParts();
     init_imageUtils();
     init_packageDocument();
     init_emit2();
     init_styles3();
     OFFICE_OPEN_DOCX_RENDERER_ID = "office-open";
     OFFICE_OPEN_DOCX = "@office-open/docx";
-    UNSUPPORTED = /* @__PURE__ */ new Set([
-      "cached-fields",
-      "comment-threads",
-      "table-merged-cells",
-      "shading",
-      "borders",
-      "rtl"
+    OFFICE_OPEN_CAPABILITIES = /* @__PURE__ */ new Set([
+      "paragraphs",
+      "styles",
+      "numbering",
+      "sections",
+      "columns",
+      "headers-footers",
+      "tables",
+      "floating-tables",
+      "images",
+      "floating-images",
+      "svg-images",
+      "text-frames",
+      "text-boxes",
+      "drawing-groups",
+      "charts",
+      "toc",
+      "cached-toc",
+      "fields",
+      "hyperlinks",
+      "bookmarks",
+      "cross-references",
+      "comments",
+      "footnotes",
+      "endnotes",
+      "revisions",
+      "breaks",
+      "tab-stops",
+      "proofing-language",
+      "custom-properties"
     ]);
-    OFFICE_OPEN_CAPABILITIES = new Set(
-      [...ALL_DOCX_FEATURES].filter((feature) => !UNSUPPORTED.has(feature))
-    );
   }
 });
 
@@ -5527,7 +5603,10 @@ init_colorUtils();
 import {
   FeatureRequirementCollector
 } from "@json-to-office/shared/rendering";
-import { synthesizeFamilyName } from "@json-to-office/shared";
+import {
+  synthesizeFamilyName,
+  DEFAULT_CHART_THEME_COLORS as DEFAULT_CHART_THEME_COLORS2
+} from "@json-to-office/shared";
 import {
   isNativeVisualProps as isNativeVisualProps4
 } from "@json-to-office/shared-docx";
@@ -6044,6 +6123,13 @@ init_themes();
 init_colorUtils();
 init_styleHelpers();
 var RIGHT_MARGIN_TAB_TWIPS = 9026 * 2;
+var STATISTIC_NUMBER_STYLE_ID = "StatisticNumber";
+var STATISTIC_DESCRIPTION_STYLE_ID = "StatisticDescription";
+var STATISTIC_SIZE_POINTS = {
+  small: 20,
+  medium: 28,
+  large: 40
+};
 function isValidStyleName(name) {
   return [
     "normal",
@@ -6682,6 +6768,67 @@ function createDocumentStyles(themeNameOrObject = "minimal", language) {
     }
   };
 }
+function createStatisticStyles(theme) {
+  const definitions = [
+    {
+      id: STATISTIC_NUMBER_STYLE_ID,
+      name: "Statistic Number",
+      font: "heading",
+      sizePoints: STATISTIC_SIZE_POINTS.medium,
+      color: theme.colors.primary,
+      bold: true,
+      // Space above separates the figure from whatever preceded it; none below,
+      // because the description is the other half of the same block.
+      spacing: { before: 12, after: 0 },
+      next: STATISTIC_DESCRIPTION_STYLE_ID,
+      // The figure and its caption are one unit; a page break between them
+      // reads as a number with no label.
+      keepNext: true
+    },
+    {
+      id: STATISTIC_DESCRIPTION_STYLE_ID,
+      name: "Statistic Description",
+      font: "body",
+      sizePoints: 10,
+      color: theme.colors.textMuted,
+      bold: false,
+      spacing: { before: 0, after: 12 },
+      next: "Normal",
+      keepNext: false
+    }
+  ];
+  return definitions.filter(
+    (definition) => !(theme.styles && Object.prototype.hasOwnProperty.call(theme.styles, definition.id))
+  ).map((definition) => {
+    const fontProps = resolveFontProperties(theme, definition.font);
+    return {
+      id: definition.id,
+      name: definition.name,
+      basedOn: "Normal",
+      next: definition.next,
+      quickFormat: true,
+      run: {
+        fontFamily: fontProps.family || "Arial",
+        // Pinned, not inherited: the whole point of the style is that the
+        // figure is not body text, so a theme's body size must not decide it.
+        sizeHalfPoints: definition.sizePoints * 2,
+        color: { hex: resolveColor(definition.color, theme) },
+        bold: definition.bold
+      },
+      paragraph: {
+        spacing: {
+          ...resolveSpacing(definition.spacing),
+          ...irLineSpacing(fontProps.lineSpacing)
+        },
+        // Centred, matching the compiler's own alignment default — a KPI
+        // reads as a block, and an author who wants otherwise says so on the
+        // component, which overrides this on the paragraph.
+        alignment: convertAlignment("center"),
+        keepNext: definition.keepNext
+      }
+    };
+  });
+}
 
 // src/ir/compiler.ts
 init_styleHelpers();
@@ -7992,6 +8139,7 @@ function compileDocument(structure, layout, warnings = [], images = /* @__PURE__
     resourcesByHash: /* @__PURE__ */ new Map(),
     nextBookmarkId: CONTENT_BOOKMARK_ID_BASE + 1,
     bookmarkNames: /* @__PURE__ */ new Set(),
+    usesStatistic: false,
     styleIds: /* @__PURE__ */ new Set([
       ...styles.paragraph.map((s) => s.id),
       ...styles.character.map((s) => s.id)
@@ -8040,7 +8188,17 @@ function compileDocument(structure, layout, warnings = [], images = /* @__PURE__
       trackRevisions: structure.trackRevisions === true,
       ...noProofWords(structure.theme) ? { noProofWords: noProofWords(structure.theme) } : {}
     },
-    styles,
+    // The statistic styles are appended rather than built with the rest: a
+    // document that uses no statistic must keep the exact style set it had
+    // before the component had styles, or every recorded golden moves for a
+    // component the document does not contain.
+    styles: ctx.usesStatistic ? {
+      ...styles,
+      paragraph: [
+        ...styles.paragraph,
+        ...createStatisticStyles(structure.theme)
+      ]
+    } : styles,
     numbering: ctx.numbering,
     resources: ctx.resources,
     sections,
@@ -8055,6 +8213,21 @@ function compileDocument(structure, layout, warnings = [], images = /* @__PURE__
     unsupported: ctx.unsupported
   };
 }
+var AFTER_TABLE_TWIPS = 120;
+var BODY_STYLE_IDS = /* @__PURE__ */ new Set([void 0, "Normal"]);
+function separateFromTables(blocks) {
+  for (let i = 1; i < blocks.length; i += 1) {
+    const block2 = blocks[i];
+    if (blocks[i - 1].kind !== "table") continue;
+    if (block2.kind !== "paragraph") continue;
+    if (!BODY_STYLE_IDS.has(block2.styleId)) continue;
+    if (block2.formatting?.spacing?.beforeTwips !== void 0) continue;
+    block2.formatting = {
+      ...block2.formatting,
+      spacing: { ...block2.formatting?.spacing, beforeTwips: AFTER_TABLE_TWIPS }
+    };
+  }
+}
 function collectOutline(layout, warnings) {
   try {
     return collectDocumentOutline(layout.sections);
@@ -8131,6 +8304,7 @@ function compileSection(section2, index, ordinal, chrome, ctx) {
       })
     );
   });
+  separateFromTables(children);
   const compiled = {
     id: `s${index}`,
     path: path3,
@@ -8333,6 +8507,8 @@ function compileComponent(component, scope) {
       return compileImage2(component, scope);
     case "visual":
       return compileVisual(component, scope);
+    case "chart":
+      return compileChart(component, scope);
     case "table":
       return compileTable(component, scope);
     default:
@@ -8899,35 +9075,83 @@ function compileToc(component, scope) {
   });
   return blocks;
 }
+var TREND_GLYPHS = {
+  up: "\u25B2",
+  down: "\u25BC",
+  neutral: "\u2013"
+};
 function compileStatistic(component, scope) {
-  const { path: path3 } = scope;
+  const { ctx, path: path3 } = scope;
   const props = component.props ?? {};
   const alignment2 = compileAlignment(props.alignment) ?? "center";
+  ctx.usesStatistic = true;
   const spacing = props.spacing ? {
     ...props.spacing.before !== void 0 ? { beforeTwips: props.spacing.before } : {},
     ...props.spacing.after !== void 0 ? { afterTwips: props.spacing.after } : {}
   } : void 0;
-  const line = (text, styleId, suffix, formatting) => {
-    const value = normalizeUnicodeText(String(text ?? ""));
-    return {
-      kind: "paragraph",
-      id: `${scope.id}:${suffix}`,
-      path: `${path3}.${suffix}`,
-      styleId,
-      formatting,
-      // Nothing to say is not the same as saying nothing: an empty statistic
-      // line is a styled blank paragraph, with no run inside it at all.
-      children: value ? [{ kind: "text", text: value }] : []
-    };
-  };
+  if (props.format !== void 0) {
+    warnOnce(
+      ctx,
+      "statistic",
+      'statistic "format" is not implemented and was ignored \u2014 format the value yourself and pass the result as "number".',
+      "W_STATISTIC_FORMAT_IGNORED"
+    );
+  }
+  const text = (value) => normalizeUnicodeText(String(value ?? ""));
+  const numberPoints = STATISTIC_SIZE_POINTS[String(props.size)] ?? STATISTIC_SIZE_POINTS.medium;
+  const resized = numberPoints !== STATISTIC_SIZE_POINTS.medium;
+  const suffixHalfPoints = Math.max(12, Math.round(numberPoints));
+  const numberRuns = [];
+  const numberText = text(props.number);
+  if (numberText) {
+    numberRuns.push({
+      kind: "text",
+      text: numberText,
+      ...resized ? { formatting: { sizeHalfPoints: numberPoints * 2 } } : {}
+    });
+  }
+  const unitText = text(props.unit);
+  if (unitText) {
+    numberRuns.push({
+      kind: "text",
+      text: unitText,
+      formatting: { sizeHalfPoints: suffixHalfPoints }
+    });
+  }
+  const glyph = typeof props.trend === "string" ? TREND_GLYPHS[props.trend] : void 0;
+  const trendValue = text(props.trendValue);
+  if (glyph || trendValue) {
+    numberRuns.push({
+      kind: "text",
+      text: `${numberRuns.length > 0 ? " " : ""}${[glyph, trendValue].filter(Boolean).join(" ")}`,
+      formatting: {
+        sizeHalfPoints: suffixHalfPoints,
+        color: irColor(resolveColor(ctx.theme.colors.textMuted, ctx.theme))
+      }
+    });
+  }
+  const line = (children, styleId, suffix, formatting) => ({
+    kind: "paragraph",
+    id: `${scope.id}:${suffix}`,
+    path: `${path3}.${suffix}`,
+    styleId,
+    formatting,
+    // Nothing to say is not the same as saying nothing: an empty statistic
+    // line is a styled blank paragraph, with no run inside it at all.
+    children
+  });
+  const descriptionText = text(props.description);
   return [
-    line(props.number, "StatisticNumber", "number", {
+    line(numberRuns, STATISTIC_NUMBER_STYLE_ID, "number", {
       alignment: alignment2,
       ...spacing ? { spacing } : {}
     }),
-    line(props.description, "StatisticDescription", "description", {
-      alignment: alignment2
-    })
+    line(
+      descriptionText ? [{ kind: "text", text: descriptionText }] : [],
+      STATISTIC_DESCRIPTION_STYLE_ID,
+      "description",
+      { alignment: alignment2 }
+    )
   ];
 }
 function compileList(component, scope, referencePrefix = "list", explicitLevels) {
@@ -9000,12 +9224,12 @@ function compileList(component, scope, referencePrefix = "list", explicitLevels)
 }
 function itemSpacing(spacing, index, count) {
   const out = {};
-  if (index === 0 && spacing?.before) {
+  if (index === 0 && spacing?.before !== void 0) {
     out.beforeTwips = pointsToTwips2(spacing.before);
   }
-  if (index === count - 1 && spacing?.after) {
+  if (index === count - 1 && spacing?.after !== void 0) {
     out.afterTwips = pointsToTwips2(spacing.after);
-  } else if (spacing?.item) {
+  } else if (spacing?.item !== void 0) {
     out.afterTwips = pointsToTwips2(spacing.item);
   }
   return out;
@@ -9723,6 +9947,111 @@ function compileImage2(component, scope) {
   if (caption) blocks.push(caption);
   return blocks;
 }
+var DEFAULT_CHART_HEIGHT_INCHES = 3;
+function compileChart(component, scope) {
+  const { ctx, path: path3 } = scope;
+  const props = component.props ?? {};
+  if (props.type === "bubble") {
+    throw new Error(
+      `Chart at ${path3} is a bubble chart, which no docx renderer draws; use the pptx \`chart\` component on the pptxgenjs renderer for one.`
+    );
+  }
+  const rawSeries = Array.isArray(props.data) ? props.data : [];
+  if (rawSeries.length === 0) {
+    throw new Error(`Chart at ${path3} has no data series.`);
+  }
+  const series = rawSeries.map((entry, index) => {
+    const raw = entry ?? {};
+    const label = typeof raw.name === "string" ? raw.name : `series ${index}`;
+    const labels = raw.labels;
+    const values = raw.values;
+    if (!Array.isArray(labels) || !Array.isArray(values)) {
+      throw new Error(
+        `Chart series "${label}" at ${path3} needs both "labels" and "values"; every series carries its own, not just the first.`
+      );
+    }
+    if (labels.length !== values.length) {
+      throw new Error(
+        `Chart series "${label}" at ${path3} has ${labels.length} labels and ${values.length} values; they must be the same length.`
+      );
+    }
+    return {
+      ...typeof raw.name === "string" ? { name: raw.name } : {},
+      labels: labels.map((value) => String(value)),
+      values: values.map((value) => Number(value))
+    };
+  });
+  const categories = series[0].labels;
+  for (const [index, entry] of series.entries()) {
+    if (index === 0) continue;
+    if (entry.labels.length !== categories.length || entry.labels.some((label, i) => label !== categories[i])) {
+      throw new Error(
+        `Chart series "${entry.name ?? `series ${index}`}" at ${path3} has different labels from the first series. A chart has one category axis, so every series must name the same categories in the same order.`
+      );
+    }
+  }
+  const colors = Array.isArray(props.chartColors) ? props.chartColors.map(
+    (color) => resolveColor(String(color), ctx.theme)
+  ) : DEFAULT_CHART_THEME_COLORS2.map((token) => {
+    const value = ctx.theme?.colors?.[token];
+    if (typeof value !== "string" || value.length === 0) return void 0;
+    try {
+      return resolveColor(token, ctx.theme);
+    } catch {
+      return void 0;
+    }
+  }).filter((color) => color !== void 0);
+  const page = getPageSetup(ctx.theme);
+  const contentWidthInches = (page.size.width - page.margin.left - page.margin.right) / 1440;
+  const widthInches = typeof props.width === "number" ? props.width : contentWidthInches;
+  const heightInches = typeof props.height === "number" ? props.height : DEFAULT_CHART_HEIGHT_INCHES;
+  const chart = {
+    kind: "chart",
+    chartType: props.type,
+    series,
+    colors,
+    widthEmu: inchesToEmu(widthInches),
+    heightEmu: inchesToEmu(heightInches),
+    ...typeof props.title === "string" ? { title: props.title } : {},
+    ...props.showTitle !== void 0 ? { showTitle: props.showTitle } : {},
+    ...props.showLegend !== void 0 ? { showLegend: props.showLegend } : {},
+    ...props.legendPos ? { legendPosition: props.legendPos } : {},
+    ...typeof props.catAxisTitle === "string" ? { categoryAxisTitle: props.catAxisTitle } : {},
+    ...typeof props.valAxisTitle === "string" ? { valueAxisTitle: props.valAxisTitle } : {},
+    ...typeof props.alt === "string" && props.alt ? { altText: props.alt } : {},
+    ...props.floating ? { floating: compileFloating(props.floating, ctx, path3) } : {}
+  };
+  ctx.features.require("charts", path3);
+  if (props.floating) ctx.features.require("floating-images", path3);
+  const spacing = {};
+  if (props.spacing?.before !== void 0) {
+    spacing.beforeTwips = pointsToTwips2(props.spacing.before);
+  }
+  if (props.spacing?.after !== void 0) {
+    spacing.afterTwips = pointsToTwips2(props.spacing.after);
+  }
+  const blocks = [
+    {
+      kind: "paragraph",
+      id: scope.id,
+      path: path3,
+      children: [chart],
+      formatting: {
+        // An anchored chart moves with its anchor, so aligning the paragraph
+        // would move the anchor rather than the chart — the same reasoning as
+        // a floating image.
+        ...props.floating ? {} : { alignment: compileAlignment(props.alignment) ?? "center" },
+        ...Object.keys(spacing).length > 0 ? { spacing } : {},
+        ...props.keepNext !== void 0 ? { keepNext: props.keepNext } : {},
+        ...props.keepLines !== void 0 ? { keepLines: props.keepLines } : {}
+      }
+    }
+  ];
+  const caption = captionBlock(props.caption, scope, "chart");
+  if (caption === void 0) return [];
+  if (caption) blocks.push(caption);
+  return blocks;
+}
 function captionBlock(value, scope, componentName) {
   if (!value) return null;
   const { ctx, path: path3 } = scope;
@@ -10371,7 +10700,9 @@ function warnOnce(ctx, component, message, code) {
 }
 
 // src/renderers/registry.ts
-import { RendererRegistry } from "@json-to-office/shared/rendering";
+import {
+  RendererRegistry
+} from "@json-to-office/shared/rendering";
 
 // src/renderers/types.ts
 import {