mosage 0.2.0 → 0.8.0

package/src/app/lib/docx/paragraph.test.ts

@@ -0,0 +1,92 @@
+/**
+ * CSS collapses white space across element boundaries; Word keeps every space
+ * it is given. What reaches a run has to be what the browser showed.
+ */
+
+import { describe, expect, it } from 'vitest';
+import type { Inline, RunStyle } from './model';
+import { capitalize, ParagraphBuilder } from './paragraph';
+
+const style: RunStyle = {
+  fonts: { ascii: 'Inter' },
+  size: 21,
+  bold: false,
+  italic: false,
+  underline: false,
+  strike: false,
+  color: '000000',
+};
+
+function texts(inlines: Inline[]): string[] {
+  return inlines.map((inline) => (inline.type === 'text' ? inline.text : `<${inline.type}>`));
+}
+
+describe('ParagraphBuilder', () => {
+  it('keeps one space between spans and none at either end', () => {
+    const p = new ParagraphBuilder();
+    p.text(' Hello ', style, undefined, true);
+    p.text(' world ', style, undefined, true);
+    expect(texts(p.finish())).toEqual(['Hello ', 'world']);
+  });
+
+  it('collapses runs of spaces inside a span', () => {
+    const p = new ParagraphBuilder();
+    p.text('a    b', style, undefined, true);
+    expect(texts(p.finish())).toEqual(['a b']);
+  });
+
+  it('leaves preformatted text as it is', () => {
+    const p = new ParagraphBuilder();
+    p.text('  indented  ', style, undefined, false);
+    expect(texts(p.finish())).toEqual(['  indented  ']);
+  });
+
+  it('trims the space around a line break and a tab', () => {
+    const p = new ParagraphBuilder();
+    p.text('left ', style, undefined, true);
+    p.push({ type: 'tab' });
+    p.text(' right ', style, undefined, true);
+    p.push({ type: 'break' });
+    p.text(' next', style, undefined, true);
+    expect(texts(p.finish())).toEqual(['left', '<tab>', 'right', '<break>', 'next']);
+  });
+
+  it('puts a nested block on its own line, but never opens with a break', () => {
+    const p = new ParagraphBuilder();
+    p.requestBreak();
+    p.text('first', style, undefined, true);
+    p.requestBreak();
+    p.text('second', style, undefined, true);
+    p.requestBreak();
+    expect(texts(p.finish())).toEqual(['first', '<break>', 'second']);
+  });
+
+  it('knows the character before the next text, but not across a line break', () => {
+    const p = new ParagraphBuilder();
+    p.text('mac', style, undefined, true);
+    expect(p.lastChar()).toBe('c');
+    p.requestBreak();
+    expect(p.lastChar()).toBe('');
+  });
+
+  it('counts only visible content as content', () => {
+    const p = new ParagraphBuilder();
+    p.text('   ', style, undefined, true);
+    p.push({ type: 'break' });
+    expect(p.empty).toBe(true);
+    p.push({ type: 'footnote', id: 1, style });
+    expect(p.empty).toBe(false);
+  });
+});
+
+describe('capitalize', () => {
+  it('capitalizes each word as the browser does, accents and apostrophes included', () => {
+    expect(capitalize('naïve café élan', ' ')).toBe('Naïve Café Élan');
+    expect(capitalize("don't stop", '')).toBe("Don't Stop");
+  });
+
+  it('continues a word that began in an earlier element', () => {
+    expect(capitalize('book pro', 'c')).toBe('book Pro');
+    expect(capitalize('book', ' ')).toBe('Book');
+  });
+});

package/src/app/lib/docx/paragraph.ts

@@ -0,0 +1,107 @@
+import type { Inline, LinkTarget, RunStyle } from './model';
+
+const WORDS = new Intl.Segmenter(undefined, { granularity: 'word' });
+
+/**
+ * `text-transform: capitalize` as the browser applies it: the first letter of
+ * each word, where "naïve" and "don't" are one word each, and a word can begin
+ * in an earlier element — `mac<b>book</b>` is one — so `before` is the text's
+ * preceding character.
+ */
+export function capitalize(text: string, before: string): string {
+  const lead = before || ' ';
+  let out = '';
+  for (const { segment, index } of WORDS.segment(lead + text)) {
+    if (index < lead.length) {
+      out += segment.slice(lead.length - index);
+      continue;
+    }
+    const first = String.fromCodePoint(segment.codePointAt(0) ?? 32);
+    out += first.toUpperCase() + segment.slice(first.length);
+  }
+  return out;
+}
+
+function meaningful(inline: Inline): boolean {
+  if (inline.type === 'text') return inline.text.trim() !== '';
+  return inline.type !== 'break' && inline.type !== 'tab';
+}
+
+type Item = { inline: Inline; collapse: boolean };
+
+/**
+ * Inline content for one paragraph, with CSS white-space collapsing applied
+ * across element boundaries — the space between two spans is one space, and
+ * none at all at the start or end of a line.
+ */
+export class ParagraphBuilder {
+  private readonly items: Item[] = [];
+  private breakPending = false;
+
+  text(text: string, style: RunStyle, link: LinkTarget | undefined, collapse: boolean): void {
+    if (text) this.push({ type: 'text', text, style, link }, collapse);
+  }
+
+  push(inline: Inline, collapse = false): void {
+    if (this.breakPending) {
+      this.breakPending = false;
+      if (!this.empty) this.items.push({ inline: { type: 'break' }, collapse: false });
+    }
+    this.items.push({ inline, collapse });
+  }
+
+  /** A block nested in inline content starts and ends its own line. */
+  requestBreak(): void {
+    this.breakPending = true;
+  }
+
+  get empty(): boolean {
+    return !this.items.some((item) => meaningful(item.inline));
+  }
+
+  /** The last character of text so far; empty at the start of a line. */
+  lastChar(): string {
+    if (this.breakPending) return '';
+    const last = this.items[this.items.length - 1]?.inline;
+    return last?.type === 'text' ? last.text.slice(-1) : '';
+  }
+
+  finish(): Inline[] {
+    const out: Item[] = [];
+    const trimEnd = () => {
+      for (let i = out.length - 1; i >= 0; i--) {
+        const item = out[i];
+        if (!item?.collapse || item.inline.type !== 'text') return;
+        const text = item.inline.text.replace(/ +$/, '');
+        if (text) {
+          out[i] = { inline: { ...item.inline, text }, collapse: true };
+          return;
+        }
+        out.splice(i, 1);
+      }
+    };
+
+    let afterSpace = true;
+    for (const item of this.items) {
+      const { inline } = item;
+      if (inline.type === 'text' && item.collapse) {
+        let text = inline.text.replace(/ {2,}/g, ' ');
+        if (afterSpace) text = text.replace(/^ /, '');
+        if (!text) continue;
+        afterSpace = text.endsWith(' ');
+        out.push({ inline: { ...inline, text }, collapse: true });
+        continue;
+      }
+      if (inline.type === 'break' || inline.type === 'tab') {
+        trimEnd();
+        afterSpace = true;
+      } else {
+        afterSpace = false;
+      }
+      out.push(item);
+    }
+    trimEnd();
+    while (out[out.length - 1]?.inline.type === 'break') out.pop();
+    return out.map((item) => item.inline);
+  }
+}

package/src/app/lib/docx/props.ts

@@ -0,0 +1,187 @@
+/**
+ * `w:rPr` and `w:pPr`, written against a base. A style is written in full; a
+ * paragraph or run writes only what differs from its style, so restyling
+ * Heading 2 in Word restyles every heading instead of none of them.
+ *
+ * Child order follows the schema sequence. Word is strict about it: an element
+ * out of place is "unreadable content", not a warning.
+ */
+
+import type { Border, Borders, ParagraphProps, RunStyle, Sides, TabStop } from './model';
+import { el } from './xml';
+
+export type StylePara = {
+  align?: ParagraphProps['align'];
+  spaceBefore: number;
+  spaceAfter: number;
+  line?: number;
+  keepNext?: boolean;
+};
+
+export function runPropsXml(
+  run: RunStyle,
+  base: RunStyle | null,
+  opts: { eastAsiaHint?: boolean; lang?: string } = {},
+): string {
+  const out: string[] = [];
+
+  const fontsDiffer =
+    !base || run.fonts.ascii !== base.fonts.ascii || run.fonts.eastAsia !== base.fonts.eastAsia;
+  if (fontsDiffer || opts.eastAsiaHint) {
+    out.push(
+      el('w:rFonts', {
+        'w:ascii': fontsDiffer ? run.fonts.ascii : undefined,
+        'w:hAnsi': fontsDiffer ? run.fonts.ascii : undefined,
+        'w:eastAsia': fontsDiffer ? run.fonts.eastAsia : undefined,
+        'w:cs': fontsDiffer ? run.fonts.ascii : undefined,
+        // Quotes and dashes sit in ranges both scripts claim. The hint is how
+        // Word knows that a “ inside Chinese text is set in the CJK face.
+        'w:hint': opts.eastAsiaHint ? 'eastAsia' : undefined,
+      }),
+    );
+  }
+
+  const toggle = (name: string, value: boolean, was: boolean | undefined) => {
+    if (base ? value !== Boolean(was) : value) out.push(el(name, value ? {} : { 'w:val': '0' }));
+  };
+  toggle('w:b', run.bold, base?.bold);
+  toggle('w:bCs', run.bold, base?.bold);
+  toggle('w:i', run.italic, base?.italic);
+  toggle('w:iCs', run.italic, base?.italic);
+  toggle('w:caps', Boolean(run.caps), base?.caps);
+  toggle('w:smallCaps', Boolean(run.smallCaps), base?.smallCaps);
+  toggle('w:strike', run.strike, base?.strike);
+
+  if (!base || run.color !== base.color) out.push(el('w:color', { 'w:val': run.color }));
+  if ((run.spacing ?? 0) !== (base?.spacing ?? 0)) {
+    out.push(el('w:spacing', { 'w:val': run.spacing ?? 0 }));
+  }
+  if (!base || run.size !== base.size) {
+    out.push(el('w:sz', { 'w:val': run.size }), el('w:szCs', { 'w:val': run.size }));
+  }
+  if (base ? run.underline !== base.underline : run.underline) {
+    out.push(el('w:u', { 'w:val': run.underline ? 'single' : 'none' }));
+  }
+  if (run.shading !== base?.shading) out.push(shadingXml(run.shading ?? 'auto'));
+  if (run.vertAlign !== base?.vertAlign) {
+    out.push(el('w:vertAlign', { 'w:val': run.vertAlign ?? 'baseline' }));
+  }
+  if (opts.lang) out.push(opts.lang);
+
+  return out.length > 0 ? `<w:rPr>${out.join('')}</w:rPr>` : '';
+}
+
+function borderXml(side: string, border: Border): string {
+  return el(`w:${side}`, {
+    'w:val': border.style,
+    'w:sz': border.size,
+    'w:space': border.space,
+    'w:color': border.color,
+  });
+}
+
+export function bordersXml(name: string, borders: Borders | undefined): string {
+  if (!borders) return '';
+  const sides = (['top', 'left', 'bottom', 'right'] as const)
+    .map((side) => {
+      const border = borders[side];
+      return border ? borderXml(side, border) : '';
+    })
+    .join('');
+  return sides ? `<${name}>${sides}</${name}>` : '';
+}
+
+export function shadingXml(fill: string | undefined): string {
+  return fill ? el('w:shd', { 'w:val': 'clear', 'w:color': 'auto', 'w:fill': fill }) : '';
+}
+
+/** A width in twips, as table properties spell one. */
+export function dxa(name: string, width: number): string {
+  return el(name, { 'w:w': width, 'w:type': 'dxa' });
+}
+
+export function cellMarginsXml(name: string, margins: Partial<Sides>): string {
+  const sides = (['top', 'left', 'bottom', 'right'] as const)
+    .map((side) => {
+      const width = margins[side];
+      return width === undefined ? '' : dxa(`w:${side}`, width);
+    })
+    .join('');
+  return `<${name}>${sides}</${name}>`;
+}
+
+function tabsXml(tabs: TabStop[] | undefined): string {
+  if (!tabs || tabs.length === 0) return '';
+  const sorted = [...tabs].sort((a, b) => a.pos - b.pos);
+  return `<w:tabs>${sorted
+    .map((tab) => el('w:tab', { 'w:val': tab.align, 'w:leader': tab.leader, 'w:pos': tab.pos }))
+    .join('')}</w:tabs>`;
+}
+
+export function paraPropsXml(
+  props: ParagraphProps,
+  base: StylePara | null,
+  opts: {
+    pStyle?: string;
+    numPr?: { num: number; level: number };
+    keepLines?: boolean;
+    outlineLevel?: number;
+    sectPr?: string;
+  } = {},
+): string {
+  const out: string[] = [];
+  if (opts.pStyle) out.push(el('w:pStyle', { 'w:val': opts.pStyle }));
+
+  const keepNext = Boolean(props.keepNext);
+  if (base ? keepNext !== Boolean(base.keepNext) : keepNext) {
+    out.push(el('w:keepNext', keepNext ? {} : { 'w:val': '0' }));
+  }
+  if (opts.keepLines) out.push(el('w:keepLines'));
+  if (props.pageBreakBefore) out.push(el('w:pageBreakBefore'));
+  if (opts.numPr) {
+    out.push(
+      `<w:numPr>${el('w:ilvl', { 'w:val': opts.numPr.level })}${el('w:numId', { 'w:val': opts.numPr.num })}</w:numPr>`,
+    );
+  }
+  out.push(bordersXml('w:pBdr', props.borders));
+  out.push(shadingXml(props.shading));
+  out.push(tabsXml(props.tabs));
+  if (props.bidi) out.push(el('w:bidi'));
+
+  const spacing: Record<string, number | string | undefined> = {};
+  const before = props.spaceBefore ?? 0;
+  const after = props.spaceAfter ?? 0;
+  if (!base || before !== base.spaceBefore) spacing['w:before'] = before;
+  if (!base || after !== base.spaceAfter) spacing['w:after'] = after;
+  if (props.line !== undefined && (props.lineExact || !base || props.line !== base.line)) {
+    spacing['w:line'] = props.line;
+    spacing['w:lineRule'] = props.lineExact ? 'exact' : 'atLeast';
+  }
+  if (Object.keys(spacing).length > 0) out.push(el('w:spacing', spacing));
+
+  // Zero is written when it is given: a numbered paragraph's own indent is what
+  // overrides the numbering level's.
+  const indent: Record<string, number | undefined> = {};
+  if (props.indentLeft !== undefined) indent['w:left'] = props.indentLeft;
+  if (props.indentRight) indent['w:right'] = props.indentRight;
+  if (props.firstLine !== undefined) {
+    if (props.firstLine < 0) indent['w:hanging'] = -props.firstLine;
+    else indent['w:firstLine'] = props.firstLine;
+  }
+  if (Object.keys(indent).length > 0) out.push(el('w:ind', indent));
+
+  const align = props.align ?? 'left';
+  if (base ? align !== (base.align ?? 'left') : align !== 'left') {
+    out.push(el('w:jc', { 'w:val': align }));
+  }
+  if (opts.outlineLevel !== undefined) out.push(el('w:outlineLvl', { 'w:val': opts.outlineLevel }));
+  if (props.markSize !== undefined) {
+    out.push(
+      `<w:rPr>${el('w:sz', { 'w:val': props.markSize })}${el('w:szCs', { 'w:val': props.markSize })}</w:rPr>`,
+    );
+  }
+  if (opts.sectPr) out.push(opts.sectPr);
+
+  const body = out.join('');
+  return body ? `<w:pPr>${body}</w:pPr>` : '';
+}

package/src/app/lib/docx/styles.ts

@@ -0,0 +1,306 @@
+/**
+ * Word styles, inferred from the document rather than declared by it.
+ *
+ * Each paragraph role votes, weighted by how much text it carries: whatever the
+ * body text mostly looks like becomes Normal, whatever the second-level
+ * headings mostly look like becomes Heading 2, and a paragraph only carries
+ * direct formatting where it departs from that. Read from the rendered page, so
+ * it is right for a document whatever the design, theme, or inline styles did.
+ */
+
+import type { Block, DocxModel, Paragraph, RunStyle } from './model';
+import { cellMarginsXml, dxa, paraPropsXml, runPropsXml, type StylePara } from './props';
+import { el, W_NS, XML_DECLARATION } from './xml';
+
+export type StyleDef = {
+  id: string;
+  /** Word matches built-in styles by this name, so it stays lower-case where Word's is. */
+  name: string;
+  run: RunStyle;
+  para: StylePara;
+  outlineLevel?: number;
+  keepLines?: boolean;
+};
+
+export type StyleSheet = {
+  normal: StyleDef;
+  byId: Map<string, StyleDef>;
+  /** The footnote marker's colour; set once there are footnotes. */
+  footnoteColor?: string;
+};
+
+type StyleKey = { id: string; name: string; outlineLevel?: number; keepLines?: boolean };
+
+export function styleKeyOf(paragraph: Paragraph): StyleKey {
+  switch (paragraph.role) {
+    case 'heading': {
+      const level = Math.min(6, Math.max(1, paragraph.level ?? 1));
+      return {
+        id: `Heading${level}`,
+        name: `heading ${level}`,
+        outlineLevel: level - 1,
+        keepLines: true,
+      };
+    }
+    case 'title':
+      return { id: 'Title', name: 'Title' };
+    case 'subtitle':
+      return { id: 'Subtitle', name: 'Subtitle' };
+    case 'toc': {
+      const level = Math.min(9, Math.max(1, paragraph.level ?? 1));
+      return { id: `TOC${level}`, name: `toc ${level}` };
+    }
+    case 'caption':
+      return { id: 'Caption', name: 'caption' };
+    case 'list':
+      return { id: 'ListParagraph', name: 'List Paragraph' };
+    case 'footnote':
+      return { id: 'FootnoteText', name: 'footnote text' };
+    case 'header':
+      return { id: 'Header', name: 'header' };
+    case 'footer':
+      return { id: 'Footer', name: 'footer' };
+    default:
+      return { id: 'Normal', name: 'Normal' };
+  }
+}
+
+const FALLBACK_RUN: RunStyle = {
+  fonts: { ascii: 'Arial' },
+  size: 21,
+  bold: false,
+  italic: false,
+  underline: false,
+  strike: false,
+  color: '000000',
+};
+
+class Tally<T> {
+  private readonly weights = new Map<string, { value: T; weight: number }>();
+
+  add(value: T, weight: number): void {
+    const key = JSON.stringify(value);
+    const entry = this.weights.get(key);
+    if (entry) entry.weight += weight;
+    else this.weights.set(key, { value, weight });
+  }
+
+  winner(): T | undefined {
+    let best: { value: T; weight: number } | undefined;
+    for (const entry of this.weights.values()) {
+      if (!best || entry.weight > best.weight) best = entry;
+    }
+    return best?.value;
+  }
+}
+
+/** Only what a style can sensibly own; underline, shading, and super/subscript stay local. */
+function styleableRun(run: RunStyle): RunStyle {
+  return {
+    fonts: run.fonts,
+    size: run.size,
+    bold: run.bold,
+    italic: run.italic,
+    underline: false,
+    strike: false,
+    color: run.color,
+    caps: run.caps,
+    smallCaps: run.smallCaps,
+    spacing: run.spacing,
+  };
+}
+
+type Votes = {
+  key: StyleKey;
+  run: Tally<RunStyle>;
+  align: Tally<StylePara['align']>;
+  before: Tally<number>;
+  after: Tally<number>;
+  line: Tally<number | undefined>;
+  keepNext: Tally<boolean>;
+};
+
+function textLength(paragraph: Paragraph): number {
+  let length = 0;
+  for (const inline of paragraph.inlines) if (inline.type === 'text') length += inline.text.length;
+  return length;
+}
+
+/** Every paragraph in the blocks, table cells included, and whether it sits in one. */
+export function* paragraphsOf(blocks: Block[], inCell = false): Generator<[Paragraph, boolean]> {
+  for (const block of blocks) {
+    if (block.type === 'paragraph') {
+      yield [block, inCell];
+      continue;
+    }
+    for (const row of block.rows) {
+      for (const cell of row.cells) yield* paragraphsOf(cell.blocks, true);
+    }
+  }
+}
+
+function* allParagraphs(model: DocxModel): Generator<[Paragraph, boolean]> {
+  for (const section of model.sections) {
+    yield* paragraphsOf(section.blocks);
+    yield* paragraphsOf(section.header ?? []);
+    yield* paragraphsOf(section.footer ?? []);
+    yield* paragraphsOf(section.footerFirst ?? []);
+  }
+  for (const note of model.footnotes) yield* paragraphsOf(note.blocks);
+}
+
+export function inferStyles(model: DocxModel): StyleSheet {
+  const votes = new Map<string, Votes>();
+  const markers = new Tally<string>();
+
+  for (const [paragraph, inCell] of allParagraphs(model)) {
+    const key = styleKeyOf(paragraph);
+    // Table text is usually set smaller than the body. Letting it vote would
+    // make a table-heavy report's Normal the size of its cells.
+    if (inCell && key.id === 'Normal') continue;
+
+    let entry = votes.get(key.id);
+    if (!entry) {
+      entry = {
+        key,
+        run: new Tally(),
+        align: new Tally(),
+        before: new Tally(),
+        after: new Tally(),
+        line: new Tally(),
+        keepNext: new Tally(),
+      };
+      votes.set(key.id, entry);
+    }
+    const weight = Math.max(1, textLength(paragraph));
+    for (const inline of paragraph.inlines) {
+      if (inline.type === 'text' && inline.text.trim()) {
+        entry.run.add(styleableRun(inline.style), inline.text.length);
+      }
+      if (inline.type === 'footnote') markers.add(inline.style.color, 1);
+    }
+    entry.align.add(paragraph.props.align, weight);
+    entry.before.add(paragraph.props.spaceBefore ?? 0, weight);
+    entry.after.add(paragraph.props.spaceAfter ?? 0, weight);
+    entry.line.add(paragraph.props.lineExact ? undefined : paragraph.props.line, weight);
+    entry.keepNext.add(Boolean(paragraph.props.keepNext), weight);
+  }
+
+  const define = (entry: Votes, fallbackRun: RunStyle): StyleDef => ({
+    id: entry.key.id,
+    name: entry.key.name,
+    run: entry.run.winner() ?? fallbackRun,
+    para: {
+      spaceBefore: entry.before.winner() ?? 0,
+      spaceAfter: entry.after.winner() ?? 0,
+      align: entry.align.winner(),
+      line: entry.line.winner(),
+      keepNext: entry.keepNext.winner(),
+    },
+    outlineLevel: entry.key.outlineLevel,
+    keepLines: entry.key.keepLines,
+  });
+
+  const normalVotes = votes.get('Normal');
+  const normal: StyleDef = normalVotes
+    ? define(normalVotes, FALLBACK_RUN)
+    : { id: 'Normal', name: 'Normal', run: FALLBACK_RUN, para: { spaceBefore: 0, spaceAfter: 0 } };
+
+  const byId = new Map<string, StyleDef>([['Normal', normal]]);
+  for (const [id, entry] of votes) {
+    if (id !== 'Normal') byId.set(id, define(entry, normal.run));
+  }
+
+  // Headings the document never used still get defined, so a reviewer who adds
+  // one in Word gets the document's heading face rather than Word's own.
+  for (let level = 1; level <= 3; level++) {
+    const id = `Heading${level}`;
+    if (byId.has(id)) continue;
+    const nearest = [1, 2, 3, 4, 5, 6]
+      .map((n) => byId.get(`Heading${n}`))
+      .find((def): def is StyleDef => def !== undefined);
+    const run = nearest?.run ?? { ...normal.run, bold: true };
+    byId.set(id, {
+      id,
+      name: `heading ${level}`,
+      run: { ...run, size: model.headingSizes?.[level - 1] ?? run.size },
+      para: nearest?.para ?? { spaceBefore: 240, spaceAfter: 120, keepNext: true },
+      outlineLevel: level - 1,
+      keepLines: true,
+    });
+  }
+
+  return { normal, byId, footnoteColor: markers.winner() };
+}
+
+function hiddenStyle(type: string, id: string, name: string, priority: number, extra = ''): string {
+  return el(
+    'w:style',
+    { 'w:type': type, 'w:default': '1', 'w:styleId': id },
+    [
+      el('w:name', { 'w:val': name }),
+      el('w:uiPriority', { 'w:val': priority }),
+      el('w:semiHidden'),
+      el('w:unhideWhenUsed'),
+      extra,
+    ].join(''),
+  );
+}
+
+export function stylesXml(sheet: StyleSheet, eastAsiaLang?: string): string {
+  const normal = sheet.normal;
+  const lang = el('w:lang', { 'w:val': 'en-US', 'w:eastAsia': eastAsiaLang });
+
+  const paragraphStyle = (def: StyleDef): string => {
+    const isNormal = def.id === 'Normal';
+    return el(
+      'w:style',
+      { 'w:type': 'paragraph', 'w:default': isNormal ? '1' : undefined, 'w:styleId': def.id },
+      [
+        el('w:name', { 'w:val': def.name }),
+        isNormal ? '' : el('w:basedOn', { 'w:val': 'Normal' }),
+        isNormal || def.id.startsWith('TOC') ? '' : el('w:next', { 'w:val': 'Normal' }),
+        el('w:qFormat'),
+        paraPropsXml(def.para, null, { keepLines: def.keepLines, outlineLevel: def.outlineLevel }),
+        runPropsXml(def.run, isNormal ? null : normal.run),
+      ].join(''),
+    );
+  };
+
+  const styles = [
+    `<w:docDefaults><w:rPrDefault>${runPropsXml(normal.run, null, { lang })}</w:rPrDefault>`,
+    `<w:pPrDefault><w:pPr>${el('w:spacing', { 'w:after': 0, 'w:line': 240, 'w:lineRule': 'auto' })}</w:pPr></w:pPrDefault></w:docDefaults>`,
+    paragraphStyle(normal),
+    hiddenStyle('character', 'DefaultParagraphFont', 'Default Paragraph Font', 1),
+    hiddenStyle(
+      'table',
+      'TableNormal',
+      'Normal Table',
+      99,
+      `<w:tblPr>${dxa('w:tblInd', 0)}${cellMarginsXml('w:tblCellMar', { top: 0, left: 108, bottom: 0, right: 108 })}</w:tblPr>`,
+    ),
+    hiddenStyle('numbering', 'NoList', 'No List', 99),
+  ];
+
+  for (const def of sheet.byId.values()) {
+    if (def.id !== 'Normal') styles.push(paragraphStyle(def));
+  }
+
+  if (sheet.footnoteColor) {
+    styles.push(
+      el(
+        'w:style',
+        { 'w:type': 'character', 'w:styleId': 'FootnoteReference' },
+        [
+          el('w:name', { 'w:val': 'footnote reference' }),
+          el('w:basedOn', { 'w:val': 'DefaultParagraphFont' }),
+          el('w:uiPriority', { 'w:val': 99 }),
+          el('w:unhideWhenUsed'),
+          `<w:rPr>${el('w:color', { 'w:val': sheet.footnoteColor })}${el('w:vertAlign', { 'w:val': 'superscript' })}</w:rPr>`,
+        ].join(''),
+      ),
+    );
+  }
+
+  return `${XML_DECLARATION}<w:styles xmlns:w="${W_NS}">${styles.join('')}</w:styles>`;
+}