@shadow-garden/bapbong-editor 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -39,8 +39,95 @@ module.exports = __toCommonJS(index_exports);
 // packages/editor/src/lib/bapbong-editor.ts
 var import_prosemirror_model3 = require("prosemirror-model");
 
+// packages/editor/src/lib/paste-images.ts
+var MAX_DISPLAY_WIDTH = 600;
+function imageFilesIn(dt) {
+  const files = [];
+  for (const item of Array.from(dt?.items ?? [])) {
+    if (item.kind === "file" && item.type.startsWith("image/")) {
+      const f = item.getAsFile();
+      if (f) files.push(f);
+    }
+  }
+  return files;
+}
+async function bitmapSize(blob) {
+  try {
+    const bmp = await createImageBitmap(blob);
+    const size = { width: bmp.width, height: bmp.height };
+    bmp.close();
+    return size;
+  } catch {
+    return null;
+  }
+}
+var toDataURL = (blob) => new Promise((resolve, reject) => {
+  const r = new FileReader();
+  r.onload = () => resolve(r.result);
+  r.onerror = () => reject(r.error);
+  r.readAsDataURL(blob);
+});
+async function insertImageBlobs(view, blobs) {
+  const imageType = view.state.schema.nodes["image"];
+  if (!imageType) return false;
+  const nodes = [];
+  for (const blob of blobs) {
+    const size = await bitmapSize(blob);
+    if (!size) continue;
+    const scale = Math.min(1, MAX_DISPLAY_WIDTH / size.width);
+    nodes.push(
+      imageType.create({
+        src: await toDataURL(blob),
+        width: Math.round(size.width * scale),
+        height: Math.round(size.height * scale)
+      })
+    );
+  }
+  if (!nodes.length) return false;
+  let tr = view.state.tr;
+  for (const node of nodes) tr = tr.replaceSelectionWith(node);
+  view.dispatch(tr.scrollIntoView());
+  return true;
+}
+function imagePasteHandler(view, event) {
+  const dt = event.clipboardData;
+  const files = imageFilesIn(dt);
+  if (!files.length) return false;
+  const html = dt?.getData("text/html") ?? "";
+  if (html) {
+    const body = new DOMParser().parseFromString(html, "text/html").body;
+    if ((body.textContent ?? "").trim()) return false;
+  }
+  void insertImageBlobs(view, files);
+  return true;
+}
+
 // packages/model/dist/index.js
 var import_prosemirror_model = require("prosemirror-model");
+function pastedParagraphAttrs(el, heading) {
+  const style = el.getAttribute("style") ?? "";
+  const m = /(?:^|;)\s*text-align\s*:\s*(center|right|justify)/i.exec(style);
+  return { heading, align: m ? m[1].toLowerCase() : null };
+}
+function pastedImageAttrs(el) {
+  const e = el;
+  const src = e.getAttribute("src") ?? "";
+  if (!/^data:image\//i.test(src)) return false;
+  const dim = (v) => {
+    const n = parseFloat(v ?? "");
+    return Number.isFinite(n) && n > 0 ? Math.round(n) : null;
+  };
+  return {
+    src,
+    alt: e.getAttribute("alt") ?? "",
+    width: dim(e.getAttribute("width")),
+    height: dim(e.getAttribute("height"))
+  };
+}
+function pastedLinkAttrs(el) {
+  const href = (el.getAttribute("href") ?? "").trim();
+  return /^(https?:|mailto:|#)/i.test(href) ? { href } : false;
+}
 var schema = new import_prosemirror_model.Schema({
   nodes: {
     doc: {
@@ -76,6 +163,11 @@ var schema = new import_prosemirror_model.Schema({
         // an <h1>–<h6> in toDOM so the a11y mirror is semantic), or null for a
         // body paragraph.
         heading: { default: null },
+        // Named Word paragraph style with no outline level: 'Title' |
+        // 'Subtitle', or null. Mutually exclusive with `heading` — the
+        // setParagraphStyle command is the only writer and keeps the
+        // invariant (styleId set ⇒ heading null).
+        styleId: { default: null },
         // w:tabs — [{ pos, val: 'left'|'right'|'center'|'decimal', leader? }]
         // in px from the paragraph's content left edge, or null. Importer-set.
         tabs: { default: null },
@@ -84,15 +176,23 @@ var schema = new import_prosemirror_model.Schema({
         // w:pageBreakBefore — start this paragraph on a new page.
         pageBreakBefore: { default: false }
       },
-      // No getAttrs: nothing in the pipeline parses paragraphs from the DOM
-      // yet (the importer builds nodes directly). align/indent still round-trip
-      // out through toDOM. Revisit when HTML paste lands.
-      parseDOM: [{ tag: "p" }],
+      // HTML paste path: recover heading level from h1–h6 and alignment from
+      // inline style. Other attrs (list/indent/tabs/spacing) stay importer-only
+      // — pasted HTML rarely carries them faithfully.
+      parseDOM: [
+        { tag: "p", getAttrs: (el) => pastedParagraphAttrs(el, null) },
+        ...[1, 2, 3, 4, 5, 6].map((level) => ({
+          tag: `h${level}`,
+          getAttrs: (el) => pastedParagraphAttrs(el, level)
+        }))
+      ],
       toDOM(node) {
         const attrs = node.attrs;
         const style = paragraphStyle(attrs);
         const tag = attrs.heading ? `h${attrs.heading}` : "p";
-        return [tag, style ? { style } : {}, 0];
+        const dom = style ? { style } : {};
+        if (attrs.styleId) dom["data-style"] = attrs.styleId;
+        return [tag, dom, 0];
       }
     },
     text: { group: "inline" },
@@ -132,9 +232,13 @@ var schema = new import_prosemirror_model.Schema({
         // Paint-only: the layout box stays axis-aligned.
         rotation: { default: 0 }
       },
+      parseDOM: [{ tag: "img[src]", getAttrs: pastedImageAttrs }],
       toDOM(node) {
         const a = node.attrs;
-        const attrs = { src: a["src"], alt: a["alt"] };
+        const attrs = {
+          src: a["src"],
+          alt: a["alt"]
+        };
         if (a["width"] != null) attrs["width"] = String(a["width"]);
         if (a["height"] != null) attrs["height"] = String(a["height"]);
         return ["img", attrs];
@@ -171,7 +275,11 @@ var schema = new import_prosemirror_model.Schema({
         align: { default: null }
       },
       parseDOM: [{ tag: "table" }],
-      toDOM: (node) => ["table", node.attrs["borders"] ? { "data-borders": "1" } : {}, ["tbody", 0]]
+      toDOM: (node) => [
+        "table",
+        node.attrs["borders"] ? { "data-borders": "1" } : {},
+        ["tbody", 0]
+      ]
     },
     table_row: {
       content: "table_cell+",
@@ -207,9 +315,12 @@ var schema = new import_prosemirror_model.Schema({
       parseDOM: [{ tag: "td" }, { tag: "th" }],
       toDOM(node) {
         const attrs = {};
-        if (node.attrs["colspan"] !== 1) attrs["colspan"] = String(node.attrs["colspan"]);
-        if (node.attrs["rowspan"] !== 1) attrs["rowspan"] = String(node.attrs["rowspan"]);
-        if (node.attrs["background"]) attrs["style"] = `background-color: ${node.attrs["background"]}`;
+        if (node.attrs["colspan"] !== 1)
+          attrs["colspan"] = String(node.attrs["colspan"]);
+        if (node.attrs["rowspan"] !== 1)
+          attrs["rowspan"] = String(node.attrs["rowspan"]);
+        if (node.attrs["background"])
+          attrs["style"] = `background-color: ${node.attrs["background"]}`;
         return ["td", attrs, 0];
       }
     }
@@ -238,9 +349,15 @@ var schema = new import_prosemirror_model.Schema({
     // w:color — hex "#RRGGBB"
     textColor: {
       attrs: { color: {} },
-      parseDOM: [{ style: "color", getAttrs: (value) => ({ color: value }) }],
+      parseDOM: [
+        { style: "color", getAttrs: (value) => ({ color: value }) }
+      ],
       toDOM(mark) {
-        return ["span", { style: `color: ${mark.attrs["color"]}` }, 0];
+        return [
+          "span",
+          { style: `color: ${mark.attrs["color"]}` },
+          0
+        ];
       }
     },
     // w:sz — size in points
@@ -256,7 +373,11 @@ var schema = new import_prosemirror_model.Schema({
         }
       ],
       toDOM(mark) {
-        return ["span", { style: `font-size: ${mark.attrs["size"]}pt` }, 0];
+        return [
+          "span",
+          { style: `font-size: ${mark.attrs["size"]}pt` },
+          0
+        ];
       }
     },
     // w:vertAlign — superscript / subscript
@@ -273,26 +394,51 @@ var schema = new import_prosemirror_model.Schema({
     highlight: {
       attrs: { color: {} },
       parseDOM: [
-        { style: "background-color", getAttrs: (value) => ({ color: value }) }
+        {
+          style: "background-color",
+          getAttrs: (value) => ({ color: value })
+        }
       ],
       toDOM(mark) {
-        return ["span", { style: `background-color: ${mark.attrs["color"]}` }, 0];
+        return [
+          "span",
+          { style: `background-color: ${mark.attrs["color"]}` },
+          0
+        ];
       }
     },
     // w:rFonts — font family
     fontFamily: {
       attrs: { family: {} },
-      parseDOM: [{ style: "font-family", getAttrs: (value) => ({ family: value }) }],
+      parseDOM: [
+        {
+          style: "font-family",
+          getAttrs: (value) => ({ family: value })
+        }
+      ],
       toDOM(mark) {
-        return ["span", { style: `font-family: ${mark.attrs["family"]}` }, 0];
+        return [
+          "span",
+          { style: `font-family: ${mark.attrs["family"]}` },
+          0
+        ];
       }
     },
     // w:hyperlink — external URL or "#anchor"
     link: {
       attrs: { href: {} },
       inclusive: false,
+      parseDOM: [{ tag: "a[href]", getAttrs: pastedLinkAttrs }],
       toDOM(mark) {
-        return ["a", { href: mark.attrs["href"], rel: "noopener", target: "_blank" }, 0];
+        return [
+          "a",
+          {
+            href: mark.attrs["href"],
+            rel: "noopener",
+            target: "_blank"
+          },
+          0
+        ];
       }
     },
     // w:footnoteReference — the carrier text is the superscript number; `num`
@@ -306,12 +452,20 @@ var schema = new import_prosemirror_model.Schema({
           // `el` is an HTMLElement at runtime; this package has no DOM lib, so
           // narrow structurally rather than naming the type.
           getAttrs: (el) => ({
-            num: Number(el.getAttribute("data-footnote")) || 0
+            num: Number(
+              el.getAttribute(
+                "data-footnote"
+              )
+            ) || 0
           })
         }
       ],
       toDOM(mark) {
-        return ["sup", { "data-footnote": String(mark.attrs["num"]) }, 0];
+        return [
+          "sup",
+          { "data-footnote": String(mark.attrs["num"]) },
+          0
+        ];
       }
     }
     // The `comment` mark (w:commentRangeStart/End) is contributed by the comment
@@ -324,7 +478,12 @@ var schema = new import_prosemirror_model.Schema({
 var commentSchema = new import_prosemirror_model.Schema({
   nodes: {
     doc: { content: "block+" },
-    paragraph: { group: "block", content: "inline*", parseDOM: [{ tag: "p" }], toDOM: () => ["p", 0] },
+    paragraph: {
+      group: "block",
+      content: "inline*",
+      parseDOM: [{ tag: "p" }],
+      toDOM: () => ["p", 0]
+    },
     text: { group: "inline" },
     // @mention: an inline atom carrying the mentioned user's id + display name.
     // `leafText` lets textContent include "@Name" (search / plain-text preview).
@@ -345,7 +504,10 @@ var commentSchema = new import_prosemirror_model.Schema({
           tag: "span.mention",
           getAttrs: (el) => {
             const e = el;
-            return { id: e.getAttribute("data-id"), label: (e.textContent ?? "").replace(/^@/, "") };
+            return {
+              id: e.getAttribute("data-id"),
+              label: (e.textContent ?? "").replace(/^@/, "")
+            };
           }
         }
       ]
@@ -367,7 +529,8 @@ function paragraphStyle(attrs) {
   if (sp) {
     if (sp.before) parts.push(`margin-top: ${sp.before}px`);
     if (sp.after) parts.push(`margin-bottom: ${sp.after}px`);
-    if (sp.line && sp.lineRule === "auto") parts.push(`line-height: ${sp.line}`);
+    if (sp.line && sp.lineRule === "auto")
+      parts.push(`line-height: ${sp.line}`);
     else if (sp.line) parts.push(`line-height: ${sp.line}px`);
   }
   return parts.join("; ");
@@ -783,11 +946,16 @@ function propsToMarks(p, ctx) {
   if (p.italic) marks.push(ctx.schema.marks["em"].create());
   if (p.underline) marks.push(ctx.schema.marks["underline"].create());
   if (p.strike) marks.push(ctx.schema.marks["strike"].create());
-  if (p.color) marks.push(ctx.schema.marks["textColor"].create({ color: p.color }));
-  if (p.sizePt !== void 0) marks.push(ctx.schema.marks["fontSize"].create({ size: p.sizePt }));
-  if (p.fontFamily) marks.push(ctx.schema.marks["fontFamily"].create({ family: p.fontFamily }));
-  if (p.highlight) marks.push(ctx.schema.marks["highlight"].create({ color: p.highlight }));
-  if (p.vertAlign) marks.push(ctx.schema.marks["vertAlign"].create({ value: p.vertAlign }));
+  if (p.color)
+    marks.push(ctx.schema.marks["textColor"].create({ color: p.color }));
+  if (p.sizePt !== void 0)
+    marks.push(ctx.schema.marks["fontSize"].create({ size: p.sizePt }));
+  if (p.fontFamily)
+    marks.push(ctx.schema.marks["fontFamily"].create({ family: p.fontFamily }));
+  if (p.highlight)
+    marks.push(ctx.schema.marks["highlight"].create({ color: p.highlight }));
+  if (p.vertAlign)
+    marks.push(ctx.schema.marks["vertAlign"].create({ value: p.vertAlign }));
   return marks;
 }
 var SYMBOL_MAP = {
@@ -807,7 +975,9 @@ function symbolChar(code) {
   return Number.isNaN(n) ? "" : String.fromCodePoint(n >= 61440 ? n - 61440 + 32 : n);
 }
 function hasPageBreak(run) {
-  return run.children.some((n) => n.name === "w:br" && attrOf(n, "w:type") === "page");
+  return run.children.some(
+    (n) => n.name === "w:br" && attrOf(n, "w:type") === "page"
+  );
 }
 function effectiveChildren(nodes) {
   const out = [];
@@ -856,8 +1026,12 @@ function runInlineNodes(run, marks, ctx) {
       if (id && ctx.notes.bodies[kind].has(id)) {
         flush();
         const num = ctx.notes.ref(kind, id);
-        const refMarks = [...marks, ctx.schema.marks["vertAlign"].create({ value: "super" })];
-        if (kind === "footnote") refMarks.push(ctx.schema.marks["footnote"].create({ num }));
+        const refMarks = [
+          ...marks,
+          ctx.schema.marks["vertAlign"].create({ value: "super" })
+        ];
+        if (kind === "footnote")
+          refMarks.push(ctx.schema.marks["footnote"].create({ num }));
         out.push(ctx.schema.text(String(num), refMarks));
       }
     } else if (node.name === "w:br" && attrOf(node, "w:type") !== "page") {
@@ -881,9 +1055,11 @@ function parseAnchorFloat(drawing) {
   const posH = child(anchor, "wp:positionH");
   if (posH) {
     const align = child(posH, "wp:align")?.text.trim();
-    if (align === "left" || align === "right" || align === "center") float["hAlign"] = align;
+    if (align === "left" || align === "right" || align === "center")
+      float["hAlign"] = align;
     const off = emuToPxZero(child(posH, "wp:posOffset")?.text);
-    if (off !== void 0 && float["hAlign"] === void 0) float["hOffset"] = off;
+    if (off !== void 0 && float["hAlign"] === void 0)
+      float["hOffset"] = off;
     const rel = attrOf(posH, "relativeFrom");
     float["hRel"] = rel === "page" ? "page" : "margin";
   }
@@ -1060,7 +1236,9 @@ function parseShape(run, ctx) {
 function parseTextbox(wsp, ctx) {
   const content = child(child(wsp, "wps:txbx"), "w:txbxContent");
   if (!content) return null;
-  const paragraphs = children(content, "w:p").map((p) => parseParagraph(p, ctx).toJSON());
+  const paragraphs = children(content, "w:p").map(
+    (p) => parseParagraph(p, ctx).toJSON()
+  );
   if (paragraphs.length === 0) return null;
   const bodyPr = child(wsp, "wps:bodyPr");
   const ins = (name) => emuToPxZero(attrOf(bodyPr, name));
@@ -1155,7 +1333,10 @@ function flattenOmml(node) {
 function parseParagraph(p, ctx) {
   const pPr = child(p, "w:pPr");
   const pStyleId = attrOf(child(pPr, "w:pStyle"), "w:val");
-  const paraBase = mergeRunProps(ctx.styles.docDefaults, ctx.styles.resolveStyle(pStyleId));
+  const paraBase = mergeRunProps(
+    ctx.styles.docDefaults,
+    ctx.styles.resolveStyle(pStyleId)
+  );
   const pPrChain = [
     ctx.styles.docDefaultsPPr,
     ...ctx.styles.resolveStylePPr(pStyleId),
@@ -1188,9 +1369,12 @@ function parseParagraph(p, ctx) {
         } else if (fldType === "end") {
           const kind = fieldKind(field.instr);
           if (kind) {
-            inline.push(pageFieldNode(kind, field.resultRuns[0], paraBase, ctx));
+            inline.push(
+              pageFieldNode(kind, field.resultRuns[0], paraBase, ctx)
+            );
           } else {
-            for (const r of field.resultRuns) inline.push(...runToInline(r, paraBase, ctx, null));
+            for (const r of field.resultRuns)
+              inline.push(...runToInline(r, paraBase, ctx, null));
           }
           field = null;
         } else if (field.phase === "instr") {
@@ -1207,7 +1391,8 @@ function parseParagraph(p, ctx) {
       if (kind) {
         inline.push(pageFieldNode(kind, resultRuns[0], paraBase, ctx));
       } else {
-        for (const r of resultRuns) inline.push(...runToInline(r, paraBase, ctx, null));
+        for (const r of resultRuns)
+          inline.push(...runToInline(r, paraBase, ctx, null));
       }
     } else if (node.name === "w:hyperlink") {
       const rel = attrOf(node, "r:id") ? ctx.rels.get(attrOf(node, "r:id")) : void 0;
@@ -1220,7 +1405,9 @@ function parseParagraph(p, ctx) {
       const text = flattenOmml(node);
       if (text.length > 0) {
         const first = findDescendant(node, "m:r");
-        inline.push(ctx.schema.text(text, runMarks(first, paraBase, ctx, null)));
+        inline.push(
+          ctx.schema.text(text, runMarks(first, paraBase, ctx, null))
+        );
       }
     } else if (node.name === "w:commentRangeStart") {
       const id = Number(attrOf(node, "w:id"));
@@ -1237,6 +1424,9 @@ function parseParagraph(p, ctx) {
   if (list) attrs.list = list;
   if (align) attrs.align = align;
   if (heading) attrs.heading = heading;
+  else if (pStyleId && /^(title|subtitle)$/i.test(pStyleId)) {
+    attrs.styleId = pStyleId.toLowerCase() === "title" ? "Title" : "Subtitle";
+  }
   if (indent) attrs.indent = indent;
   if (spacing) attrs.spacing = spacing;
   if (tabs) attrs.tabs = tabs;
@@ -1349,7 +1539,9 @@ function parseList(pPr) {
   return { numId, level: Number.isNaN(ilvl) ? 0 : ilvl };
 }
 function emptyCell(ctx) {
-  return ctx.schema.nodes["table_cell"].create(null, [ctx.schema.nodes["paragraph"].create()]);
+  return ctx.schema.nodes["table_cell"].create(null, [
+    ctx.schema.nodes["paragraph"].create()
+  ]);
 }
 function parseCellMargins(tbl) {
   const mar = child(child(tbl, "w:tblPr"), "w:tblCellMar");
@@ -1402,7 +1594,14 @@ function parseBordersEl(bordersEl, sides) {
   }
   return Object.keys(out).length > 0 ? out : null;
 }
-var TABLE_SIDES = ["top", "bottom", "left", "right", "insideH", "insideV"];
+var TABLE_SIDES = [
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "insideH",
+  "insideV"
+];
 var CELL_SIDES = ["top", "bottom", "left", "right"];
 function parseTableBorders(tbl, ctx) {
   const tblPr = child(tbl, "w:tblPr");
@@ -1429,8 +1628,18 @@ function parseTable(tbl, ctx) {
       const vAlign = vAlignVal === "center" || vAlignVal === "bottom" ? vAlignVal : null;
       const borders2 = parseBordersEl(child(tcPr, "w:tcBorders"), CELL_SIDES);
       const content = parseBlocks(tc, ctx);
-      if (content.length === 0) content.push(ctx.schema.nodes["paragraph"].create());
-      cells.push({ startCol: col, colspan, vMerge, colwidth: widths.length ? widths : null, background, vAlign, borders: borders2, content });
+      if (content.length === 0)
+        content.push(ctx.schema.nodes["paragraph"].create());
+      cells.push({
+        startCol: col,
+        colspan,
+        vMerge,
+        colwidth: widths.length ? widths : null,
+        background,
+        vAlign,
+        borders: borders2,
+        content
+      });
       col += colspan;
     }
     return cells;
@@ -1441,12 +1650,17 @@ function parseTable(tbl, ctx) {
     const header = hdr ? attrOf(hdr, "w:val") !== "false" && attrOf(hdr, "w:val") !== "0" : false;
     const trH = child(trPr, "w:trHeight");
     const hv = attrOf(trH, "w:val");
-    const height = hv !== void 0 ? { value: twipsToPx(Number(hv)), exact: attrOf(trH, "w:hRule") === "exact" } : null;
+    const height = hv !== void 0 ? {
+      value: twipsToPx(Number(hv)),
+      exact: attrOf(trH, "w:hRule") === "exact"
+    } : null;
     const cs = child(trPr, "w:cantSplit");
     const cantSplit = cs ? attrOf(cs, "w:val") !== "false" && attrOf(cs, "w:val") !== "0" : false;
     return { header, height, cantSplit };
   });
-  const colIndex = logicalRows.map((cells) => new Map(cells.map((c) => [c.startCol, c])));
+  const colIndex = logicalRows.map(
+    (cells) => new Map(cells.map((c) => [c.startCol, c]))
+  );
   const rows = logicalRows.map((cells, r) => {
     const emitted = [];
     for (const cell of cells) {
@@ -1487,7 +1701,8 @@ function parseTable(tbl, ctx) {
   const attrs = {};
   if (cellPadding) attrs["cellPadding"] = cellPadding;
   if (borders) attrs["borders"] = borders;
-  if (jc === "center" || jc === "right" || jc === "end") attrs["align"] = jc === "end" ? "right" : jc;
+  if (jc === "center" || jc === "right" || jc === "end")
+    attrs["align"] = jc === "end" ? "right" : jc;
   return ctx.schema.nodes["table"].create(
     Object.keys(attrs).length > 0 ? attrs : null,
     rows.length > 0 ? rows : [ctx.schema.nodes["table_row"].create(null, [emptyCell(ctx)])]
@@ -1553,18 +1768,27 @@ async function readPartRels(zip, partPath) {
   return xml ? parseXml(xml) : void 0;
 }
 async function buildNotesRegistry(zip) {
-  const bodies = { footnote: /* @__PURE__ */ new Map(), endnote: /* @__PURE__ */ new Map() };
+  const bodies = {
+    footnote: /* @__PURE__ */ new Map(),
+    endnote: /* @__PURE__ */ new Map()
+  };
   const load = async (path, root, tag, into) => {
     const xml = await readPart(zip, path);
     if (!xml) return;
     for (const note of children(child(parseXml(xml), root), tag)) {
       const id = attrOf(note, "w:id");
       const type = attrOf(note, "w:type");
-      if (id === void 0 || Number(id) < 1 || type && type !== "normal") continue;
+      if (id === void 0 || Number(id) < 1 || type && type !== "normal")
+        continue;
       into.set(id, note);
     }
   };
-  await load("word/footnotes.xml", "w:footnotes", "w:footnote", bodies.footnote);
+  await load(
+    "word/footnotes.xml",
+    "w:footnotes",
+    "w:footnote",
+    bodies.footnote
+  );
   await load("word/endnotes.xml", "w:endnotes", "w:endnote", bodies.endnote);
   const reg = {
     bodies,
@@ -1599,7 +1823,10 @@ async function buildCommentsRegistry(zip) {
   const ext = /* @__PURE__ */ new Map();
   const extXml = await readPart(zip, "word/commentsExtended.xml");
   if (extXml) {
-    for (const ex of children(child(parseXml(extXml), "w15:commentsEx"), "w15:commentEx")) {
+    for (const ex of children(
+      child(parseXml(extXml), "w15:commentsEx"),
+      "w15:commentEx"
+    )) {
       const paraId2 = attrOf(ex, "w15:paraId");
       if (!paraId2) continue;
       const done = attrOf(ex, "w15:done");
@@ -1619,14 +1846,24 @@ function buildCommentsList(ctx) {
   const out = [];
   for (const id of ctx.comments.used) {
     const def = ctx.comments.defs.get(id);
-    if (def) out.push({ id, author: def.author, date: def.date, text: collectText(def.body).trim() });
+    if (def)
+      out.push({
+        id,
+        author: def.author,
+        date: def.date,
+        text: collectText(def.body).trim()
+      });
   }
   return out;
 }
 function commentBodyJSON(comment) {
   const paras = children(comment, "w:p").map((p) => {
     const text = collectText(p);
-    return commentSchema.node("paragraph", null, text ? [commentSchema.text(text)] : []);
+    return commentSchema.node(
+      "paragraph",
+      null,
+      text ? [commentSchema.text(text)] : []
+    );
   });
   return commentSchema.node("doc", null, paras.length ? paras : [commentSchema.node("paragraph")]).toJSON();
 }
@@ -1646,12 +1883,18 @@ function buildCommentNodes(ctx) {
       if (usedSet.has(cur)) return true;
     return false;
   };
-  const ids = [...used.filter((id) => defs.has(id)), ...[...defs.keys()].filter((id) => !usedSet.has(id))];
+  const ids = [
+    ...used.filter((id) => defs.has(id)),
+    ...[...defs.keys()].filter((id) => !usedSet.has(id))
+  ];
   const out = [];
   for (const id of ids) {
     const def = defs.get(id);
     if (!def || !referenced(id)) continue;
-    const user = { id: def.author || "unknown", name: def.author || "Unknown" };
+    const user = {
+      id: def.author || "unknown",
+      name: def.author || "Unknown"
+    };
     out.push({
       id,
       parentId: parentOf.get(id) ?? null,
@@ -1665,7 +1908,9 @@ function buildCommentNodes(ctx) {
 }
 function noteBlocks(note, num, ctx) {
   const blocks = parseBlocks(note, ctx);
-  const marker = ctx.schema.text(`${num}. `, [ctx.schema.marks["vertAlign"].create({ value: "super" })]);
+  const marker = ctx.schema.text(`${num}. `, [
+    ctx.schema.marks["vertAlign"].create({ value: "super" })
+  ]);
   const first = blocks[0];
   if (first && first.type.name === "paragraph") {
     const kids = [marker];
@@ -1715,7 +1960,10 @@ async function extractMedia(zip) {
     if (!path.startsWith("word/media/")) continue;
     const entry = zip.file(path);
     if (!entry || entry.dir) continue;
-    media.set(path, `data:${mimeOf(path)};base64,${await entry.async("base64")}`);
+    media.set(
+      path,
+      `data:${mimeOf(path)};base64,${await entry.async("base64")}`
+    );
   }
   return media;
 }
@@ -1725,11 +1973,16 @@ async function importDocx(input, opts) {
   if (rawDocumentXml === void 0) {
     throw new Error("bapbong-docx: word/document.xml not found in archive");
   }
-  const stylesXml = await readPart(zip, "word/styles.xml");
+  const stylesXml2 = await readPart(zip, "word/styles.xml");
   const numberingXml = await readPart(zip, "word/numbering.xml");
   const themeXml = await readPart(zip, "word/theme/theme1.xml");
-  const resolveTheme = buildThemeResolver(themeXml ? parseXml(themeXml) : void 0);
-  const styles = buildStyleRegistry(stylesXml ? parseXml(stylesXml) : void 0, resolveTheme);
+  const resolveTheme = buildThemeResolver(
+    themeXml ? parseXml(themeXml) : void 0
+  );
+  const styles = buildStyleRegistry(
+    stylesXml2 ? parseXml(stylesXml2) : void 0,
+    resolveTheme
+  );
   const numberingRoot = numberingXml ? parseXml(numberingXml) : void 0;
   const media = await extractMedia(zip);
   const notes = await buildNotesRegistry(zip);
@@ -1778,7 +2031,11 @@ async function importDocx(input, opts) {
         if (!xml) continue;
         const partCtx = makeCtx(buildRels(await readPartRels(zip, partPath)));
         const el = child(parseXml(xml), root);
-        store[type] = storyDoc(partCtx, el ? parseBlocks(el, partCtx) : [], ctx.numbering.defs);
+        store[type] = storyDoc(
+          partCtx,
+          el ? parseBlocks(el, partCtx) : [],
+          ctx.numbering.defs
+        );
       }
     };
     await collect("w:headerReference", headers, "w:hdr");
@@ -1851,7 +2108,10 @@ var pxToEmu = (px) => Math.round(px * 9525);
 var commentIdsOf = (node) => node.marks.find((m) => m.type.name === "comment")?.attrs["ids"] ?? [];
 var isInlineLeaf = (node) => node.isText || node.type.name === "image" || node.type.name === "hard_break";
 function esc(s) {
-  return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  return s.replace(
+    /[&<>"]/g,
+    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]
+  );
 }
 var MIME_EXT = {
   "image/png": "png",
@@ -1874,9 +2134,15 @@ function runProps(marks) {
   const size = byName.get("fontSize")?.attrs["size"];
   if (size != null) out.push(`<w:sz w:val="${Math.round(size * 2)}"/>`);
   const hl = byName.get("highlight")?.attrs["color"];
-  if (hl) out.push(`<w:shd w:val="clear" w:color="auto" w:fill="${hl.replace(/^#/, "")}"/>`);
+  if (hl)
+    out.push(
+      `<w:shd w:val="clear" w:color="auto" w:fill="${hl.replace(/^#/, "")}"/>`
+    );
   const va = byName.get("vertAlign")?.attrs["value"];
-  if (va) out.push(`<w:vertAlign w:val="${va === "sub" ? "subscript" : "superscript"}"/>`);
+  if (va)
+    out.push(
+      `<w:vertAlign w:val="${va === "sub" ? "subscript" : "superscript"}"/>`
+    );
   return out.length ? `<w:rPr>${out.join("")}</w:rPr>` : "";
 }
 function anchorXml(float, cx, cy, n, graphic) {
@@ -1918,7 +2184,9 @@ function imageXml(node, ctx) {
   const n = ctx.nextId++;
   const rid = `rId${n}`;
   ctx.media.push({ path: `word/media/image${n}.${ext}`, base64: m[2] });
-  ctx.rels.push(`<Relationship Id="${rid}" Type="${R_NS}/image" Target="media/image${n}.${ext}"/>`);
+  ctx.rels.push(
+    `<Relationship Id="${rid}" Type="${R_NS}/image" Target="media/image${n}.${ext}"/>`
+  );
   const cx = pxToEmu(node.attrs["width"] ?? 96);
   const cy = pxToEmu(node.attrs["height"] ?? 96);
   return `<w:r><w:drawing><wp:inline distT="0" distB="0" distL="0" distR="0"><wp:extent cx="${cx}" cy="${cy}"/><wp:docPr id="${n}" name="Picture ${n}"/><a:graphic><a:graphicData uri="${PIC_NS}"><pic:pic><pic:nvPicPr><pic:cNvPr id="${n}" name="image${n}.${ext}"/><pic:cNvPicPr/></pic:nvPicPr><pic:blipFill><a:blip r:embed="${rid}"/><a:stretch><a:fillRect/></a:stretch></pic:blipFill><pic:spPr><a:xfrm${rotAttr(node)}><a:off x="0" y="0"/><a:ext cx="${cx}" cy="${cy}"/></a:xfrm><a:prstGeom prst="rect"><a:avLst/></a:prstGeom></pic:spPr></pic:pic></a:graphicData></a:graphic></wp:inline></w:drawing></w:r>`;
@@ -1928,7 +2196,8 @@ function inlineXml(node, ctx) {
   if (node.type.name === "image") return imageXml(node, ctx);
   if (node.isText) {
     const fn = node.marks.find((m) => m.type.name === "footnote");
-    if (fn) return `<w:r>${runProps(node.marks)}<w:footnoteReference w:id="${fn.attrs["num"]}"/></w:r>`;
+    if (fn)
+      return `<w:r>${runProps(node.marks)}<w:footnoteReference w:id="${fn.attrs["num"]}"/></w:r>`;
     return `<w:r>${runProps(node.marks)}<w:t xml:space="preserve">${esc(node.text ?? "")}</w:t></w:r>`;
   }
   return "";
@@ -1938,9 +2207,12 @@ function inlineUnit(node, ctx) {
   const inner = inlineXml(node, ctx);
   const href = linkHref(node);
   if (!href || !inner) return inner;
-  if (href.startsWith("#")) return `<w:hyperlink w:anchor="${esc(href.slice(1))}">${inner}</w:hyperlink>`;
+  if (href.startsWith("#"))
+    return `<w:hyperlink w:anchor="${esc(href.slice(1))}">${inner}</w:hyperlink>`;
   const n = ctx.nextId++;
-  ctx.rels.push(`<Relationship Id="rId${n}" Type="${R_NS}/hyperlink" Target="${esc(href)}" TargetMode="External"/>`);
+  ctx.rels.push(
+    `<Relationship Id="rId${n}" Type="${R_NS}/hyperlink" Target="${esc(href)}" TargetMode="External"/>`
+  );
   return `<w:hyperlink r:id="rId${n}">${inner}</w:hyperlink>`;
 }
 function inlineContent(node, ctx) {
@@ -1974,10 +2246,16 @@ function paraProps(node) {
   const a = node.attrs;
   const out = [];
   const heading = a["heading"];
+  const styleId = a["styleId"];
   if (heading) out.push(`<w:pStyle w:val="Heading${heading}"/>`);
+  else if (styleId === "Title" || styleId === "Subtitle")
+    out.push(`<w:pStyle w:val="${styleId}"/>`);
   if (a["pageBreakBefore"]) out.push("<w:pageBreakBefore/>");
   const list = a["list"];
-  if (list) out.push(`<w:numPr><w:ilvl w:val="${list.level}"/><w:numId w:val="${esc(list.numId)}"/></w:numPr>`);
+  if (list)
+    out.push(
+      `<w:numPr><w:ilvl w:val="${list.level}"/><w:numId w:val="${esc(list.numId)}"/></w:numPr>`
+    );
   const sp = a["spacing"];
   if (sp) {
     const at = [];
@@ -1985,7 +2263,9 @@ function paraProps(node) {
     if (sp.after != null) at.push(`w:after="${pxToTwips(sp.after)}"`);
     if (sp.line != null) {
       const auto = sp.lineRule === "auto" || sp.lineRule == null;
-      at.push(`w:line="${auto ? Math.round(sp.line * 240) : pxToTwips(sp.line)}"`);
+      at.push(
+        `w:line="${auto ? Math.round(sp.line * 240) : pxToTwips(sp.line)}"`
+      );
       at.push(`w:lineRule="${sp.lineRule ?? "auto"}"`);
     }
     if (at.length) out.push(`<w:spacing ${at.join(" ")}/>`);
@@ -1996,11 +2276,13 @@ function paraProps(node) {
     if (ind.left != null) at.push(`w:left="${pxToTwips(ind.left)}"`);
     if (ind.right != null) at.push(`w:right="${pxToTwips(ind.right)}"`);
     if (ind.hanging != null) at.push(`w:hanging="${pxToTwips(ind.hanging)}"`);
-    else if (ind.firstLine != null) at.push(`w:firstLine="${pxToTwips(ind.firstLine)}"`);
+    else if (ind.firstLine != null)
+      at.push(`w:firstLine="${pxToTwips(ind.firstLine)}"`);
     if (at.length) out.push(`<w:ind ${at.join(" ")}/>`);
   }
   const align = a["align"];
-  if (align) out.push(`<w:jc w:val="${align === "justify" ? "both" : align}"/>`);
+  if (align)
+    out.push(`<w:jc w:val="${align === "justify" ? "both" : align}"/>`);
   return out.join("");
 }
 function paragraphXml(node, ctx, sectPr = "") {
@@ -2008,7 +2290,14 @@ function paragraphXml(node, ctx, sectPr = "") {
   const pPr = props ? `<w:pPr>${props}</w:pPr>` : "";
   return `<w:p>${pPr}${inlineContent(node, ctx)}</w:p>`;
 }
-var TABLE_SIDES2 = ["top", "bottom", "left", "right", "insideH", "insideV"];
+var TABLE_SIDES2 = [
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "insideH",
+  "insideV"
+];
 var CELL_SIDES2 = ["top", "bottom", "left", "right"];
 var BORDER_STYLE_OUT = {
   solid: "single",
@@ -2030,12 +2319,19 @@ function cellXml(cell, ctx) {
   const a = cell.attrs;
   const pr = [];
   const colwidth = a["colwidth"];
-  if (colwidth?.length) pr.push(`<w:tcW w:w="${pxToTwips(colwidth.reduce((x, y) => x + y, 0))}" w:type="dxa"/>`);
-  if (a["colspan"] > 1) pr.push(`<w:gridSpan w:val="${a["colspan"]}"/>`);
+  if (colwidth?.length)
+    pr.push(
+      `<w:tcW w:w="${pxToTwips(colwidth.reduce((x, y) => x + y, 0))}" w:type="dxa"/>`
+    );
+  if (a["colspan"] > 1)
+    pr.push(`<w:gridSpan w:val="${a["colspan"]}"/>`);
   const borders = a["borders"];
   if (borders) pr.push(bordersXml("w:tcBorders", borders, CELL_SIDES2));
   const bg = a["background"];
-  if (bg) pr.push(`<w:shd w:val="clear" w:color="auto" w:fill="${bg.replace(/^#/, "")}"/>`);
+  if (bg)
+    pr.push(
+      `<w:shd w:val="clear" w:color="auto" w:fill="${bg.replace(/^#/, "")}"/>`
+    );
   const vAlign = a["vAlign"];
   if (vAlign) pr.push(`<w:vAlign w:val="${vAlign}"/>`);
   let content = "";
@@ -2048,7 +2344,10 @@ function rowXml(row, ctx) {
   if (row.attrs["header"]) pr.push("<w:tblHeader/>");
   if (row.attrs["cantSplit"]) pr.push("<w:cantSplit/>");
   const h = row.attrs["height"];
-  if (h) pr.push(`<w:trHeight w:val="${pxToTwips(h.value)}" w:hRule="${h.exact ? "exact" : "atLeast"}"/>`);
+  if (h)
+    pr.push(
+      `<w:trHeight w:val="${pxToTwips(h.value)}" w:hRule="${h.exact ? "exact" : "atLeast"}"/>`
+    );
   const trPr = pr.length ? `<w:trPr>${pr.join("")}</w:trPr>` : "";
   let cells = "";
   row.forEach((c) => cells += cellXml(c, ctx));
@@ -2067,7 +2366,9 @@ function tableXml(node, ctx) {
   }
   const firstRow = node.firstChild;
   const grid = [];
-  firstRow?.forEach((c) => c.attrs["colwidth"]?.forEach((w) => grid.push(w)));
+  firstRow?.forEach(
+    (c) => c.attrs["colwidth"]?.forEach((w) => grid.push(w))
+  );
   const gridXml = grid.length ? `<w:tblGrid>${grid.map((w) => `<w:gridCol w:w="${pxToTwips(w)}"/>`).join("")}</w:tblGrid>` : "";
   let rows = "";
   node.forEach((r) => rows += rowXml(r, ctx));
@@ -2102,10 +2403,14 @@ function commentBodyXml(body, firstParaId) {
   doc.forEach((p, _o, i) => {
     let runs = "";
     p.forEach((inline) => {
-      if (inline.isText) runs += `<w:r><w:t xml:space="preserve">${esc(inline.text ?? "")}</w:t></w:r>`;
-      else if (inline.type.name === "mention") runs += `<w:r><w:t xml:space="preserve">@${esc(String(inline.attrs["label"] ?? ""))}</w:t></w:r>`;
+      if (inline.isText)
+        runs += `<w:r><w:t xml:space="preserve">${esc(inline.text ?? "")}</w:t></w:r>`;
+      else if (inline.type.name === "mention")
+        runs += `<w:r><w:t xml:space="preserve">@${esc(String(inline.attrs["label"] ?? ""))}</w:t></w:r>`;
     });
-    ps.push(`<w:p${i === 0 ? ` w14:paraId="${firstParaId}"` : ""}>${runs}</w:p>`);
+    ps.push(
+      `<w:p${i === 0 ? ` w14:paraId="${firstParaId}"` : ""}>${runs}</w:p>`
+    );
   });
   return ps.join("") || `<w:p w14:paraId="${firstParaId}"/>`;
 }
@@ -2127,16 +2432,65 @@ function commentsExtendedXml(comments) {
 }
 var ROOT_RELS = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <Relationships xmlns="${PR_NS}"><Relationship Id="rId1" Type="${R_NS}/officeDocument" Target="word/document.xml"/></Relationships>`;
+var STYLE_DEFS = (() => {
+  const heading = (level, halfPt) => `<w:style w:type="paragraph" w:styleId="Heading${level}"><w:name w:val="heading ${level}"/><w:basedOn w:val="Normal"/><w:next w:val="Normal"/><w:qFormat/><w:pPr><w:keepNext/><w:spacing w:before="240" w:after="120"/><w:outlineLvl w:val="${level - 1}"/></w:pPr><w:rPr><w:b/><w:sz w:val="${halfPt}"/><w:szCs w:val="${halfPt}"/></w:rPr></w:style>`;
+  return {
+    Heading1: heading(1, 48),
+    Heading2: heading(2, 36),
+    Heading3: heading(3, 28),
+    Heading4: heading(4, 24),
+    Heading5: heading(5, 22),
+    Heading6: heading(6, 22),
+    Title: `<w:style w:type="paragraph" w:styleId="Title"><w:name w:val="Title"/><w:basedOn w:val="Normal"/><w:next w:val="Normal"/><w:qFormat/><w:pPr><w:spacing w:after="80"/></w:pPr><w:rPr><w:sz w:val="56"/><w:szCs w:val="56"/></w:rPr></w:style>`,
+    Subtitle: `<w:style w:type="paragraph" w:styleId="Subtitle"><w:name w:val="Subtitle"/><w:basedOn w:val="Normal"/><w:next w:val="Normal"/><w:qFormat/><w:rPr><w:i/><w:sz w:val="28"/><w:szCs w:val="28"/></w:rPr></w:style>`
+  };
+})();
+function usedStyleIds(doc) {
+  const used = /* @__PURE__ */ new Set();
+  doc.descendants((n) => {
+    if (n.type.name !== "paragraph") return;
+    const heading = n.attrs["heading"];
+    const styleId = n.attrs["styleId"];
+    if (heading) used.add(`Heading${heading}`);
+    else if (styleId && STYLE_DEFS[styleId]) used.add(styleId);
+  });
+  return used;
+}
+function stylesXml(used) {
+  const defs = [...used].map((id) => STYLE_DEFS[id]).join("");
+  return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<w:styles xmlns:w="${W_NS}"><w:docDefaults><w:rPrDefault><w:rPr><w:sz w:val="22"/><w:szCs w:val="22"/></w:rPr></w:rPrDefault><w:pPrDefault/></w:docDefaults><w:style w:type="paragraph" w:default="1" w:styleId="Normal"><w:name w:val="Normal"/><w:qFormat/></w:style>` + defs + `</w:styles>`;
+}
+function mergeStyles(xml, used) {
+  const missing = [...used].filter((id) => !xml.includes(`w:styleId="${id}"`));
+  if (!missing.length) return xml;
+  return xml.replace(
+    "</w:styles>",
+    `${missing.map((id) => STYLE_DEFS[id]).join("")}</w:styles>`
+  );
+}
 function contentTypes(exts, hasComments) {
   const parts = [
     '<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>',
     '<Default Extension="xml" ContentType="application/xml"/>'
   ];
-  for (const ext of exts) parts.push(`<Default Extension="${ext}" ContentType="image/${ext === "jpg" ? "jpeg" : ext}"/>`);
-  parts.push('<Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/>');
+  for (const ext of exts)
+    parts.push(
+      `<Default Extension="${ext}" ContentType="image/${ext === "jpg" ? "jpeg" : ext}"/>`
+    );
+  parts.push(
+    '<Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/>'
+  );
+  parts.push(
+    '<Override PartName="/word/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml"/>'
+  );
   if (hasComments) {
-    parts.push('<Override PartName="/word/comments.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.comments+xml"/>');
-    parts.push('<Override PartName="/word/commentsExtended.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.commentsExtended+xml"/>');
+    parts.push(
+      '<Override PartName="/word/comments.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.comments+xml"/>'
+    );
+    parts.push(
+      '<Override PartName="/word/commentsExtended.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.commentsExtended+xml"/>'
+    );
   }
   return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <Types xmlns="${CT_NS}">${parts.join("")}</Types>`;
@@ -2144,17 +2498,30 @@ function contentTypes(exts, hasComments) {
 function mergeContentTypes(xml, exts, hasComments) {
   let out = xml;
   const add = (frag, key) => {
-    if (!out.includes(`"${key}"`)) out = out.replace("</Types>", `${frag}</Types>`);
+    if (!out.includes(`"${key}"`))
+      out = out.replace("</Types>", `${frag}</Types>`);
   };
-  for (const ext of exts) add(`<Default Extension="${ext}" ContentType="image/${ext === "jpg" ? "jpeg" : ext}"/>`, ext);
+  for (const ext of exts)
+    add(
+      `<Default Extension="${ext}" ContentType="image/${ext === "jpg" ? "jpeg" : ext}"/>`,
+      ext
+    );
   if (hasComments) {
-    add('<Override PartName="/word/comments.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.comments+xml"/>', "/word/comments.xml");
-    add('<Override PartName="/word/commentsExtended.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.commentsExtended+xml"/>', "/word/commentsExtended.xml");
+    add(
+      '<Override PartName="/word/comments.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.comments+xml"/>',
+      "/word/comments.xml"
+    );
+    add(
+      '<Override PartName="/word/commentsExtended.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.commentsExtended+xml"/>',
+      "/word/commentsExtended.xml"
+    );
   }
   return out;
 }
 function extractBodySectPr(xml) {
-  const all = xml.match(/<w:sectPr\b[^>]*>[\s\S]*?<\/w:sectPr>|<w:sectPr\b[^>]*\/>/g);
+  const all = xml.match(
+    /<w:sectPr\b[^>]*>[\s\S]*?<\/w:sectPr>|<w:sectPr\b[^>]*\/>/g
+  );
   return all ? all[all.length - 1] : "";
 }
 function mergeRels(xml, newRels) {
@@ -2163,7 +2530,10 @@ function mergeRels(xml, newRels) {
     /<Relationship\b[^>]*Target="comments(?:Extended)?\.xml"[^>]*\/>/g,
     ""
   );
-  return base.replace("</Relationships>", `${newRels.join("")}</Relationships>`);
+  return base.replace(
+    "</Relationships>",
+    `${newRels.join("")}</Relationships>`
+  );
 }
 async function exportDocx(doc, opts) {
   const comments = doc.attrs["comments"] ?? [];
@@ -2172,7 +2542,8 @@ async function exportDocx(doc, opts) {
   let idx = 0;
   doc.descendants((n) => {
     if (!isInlineLeaf(n)) return;
-    for (const id of commentIdsOf(n)) if (knownComments.has(id)) lastRun.set(id, idx);
+    for (const id of commentIdsOf(n))
+      if (knownComments.has(id)) lastRun.set(id, idx);
     idx++;
   });
   const ctx = {
@@ -2187,13 +2558,20 @@ async function exportDocx(doc, opts) {
   };
   const boundaries = sectionBoundaries(doc);
   let body = "";
-  doc.forEach((block, _offset, i) => body += blockXml(block, ctx, boundaries.get(i)));
+  doc.forEach(
+    (block, _offset, i) => body += blockXml(block, ctx, boundaries.get(i))
+  );
   const hasComments = comments.length > 0;
   if (hasComments) {
-    ctx.rels.push(`<Relationship Id="rIdComments" Type="${R_NS}/comments" Target="comments.xml"/>`);
-    ctx.rels.push(`<Relationship Id="rIdCommentsExt" Type="${R_NS}/commentsExtended" Target="commentsExtended.xml"/>`);
+    ctx.rels.push(
+      `<Relationship Id="rIdComments" Type="${R_NS}/comments" Target="comments.xml"/>`
+    );
+    ctx.rels.push(
+      `<Relationship Id="rIdCommentsExt" Type="${R_NS}/commentsExtended" Target="commentsExtended.xml"/>`
+    );
   }
   const zip = new import_jszip2.default();
+  const styleIds = usedStyleIds(doc);
   let sectPr = "";
   if (opts?.carry) {
     const carry = opts.carry;
@@ -2201,18 +2579,29 @@ async function exportDocx(doc, opts) {
       if (!f.dir) zip.file(path, await f.async("uint8array"));
     }
     const ct = await carry.file("[Content_Types].xml")?.async("string");
-    zip.file("[Content_Types].xml", ct ? mergeContentTypes(ct, ctx.exts, hasComments) : contentTypes(ctx.exts, hasComments));
+    zip.file(
+      "[Content_Types].xml",
+      ct ? mergeContentTypes(ct, ctx.exts, hasComments) : contentTypes(ctx.exts, hasComments)
+    );
+    const carriedStyles = await carry.file("word/styles.xml")?.async("string");
+    if (carriedStyles)
+      zip.file("word/styles.xml", mergeStyles(carriedStyles, styleIds));
     const rels = await carry.file("word/_rels/document.xml.rels")?.async("string");
     zip.file("word/_rels/document.xml.rels", mergeRels(rels, ctx.rels));
     const origDoc = await carry.file("word/document.xml")?.async("string");
     if (origDoc) sectPr = extractBodySectPr(origDoc);
   } else {
+    ctx.rels.push(
+      `<Relationship Id="rIdStyles" Type="${R_NS}/styles" Target="styles.xml"/>`
+    );
+    zip.file("word/styles.xml", stylesXml(styleIds));
     zip.file("[Content_Types].xml", contentTypes(ctx.exts, hasComments));
     zip.file("_rels/.rels", ROOT_RELS);
-    if (ctx.rels.length) {
-      zip.file("word/_rels/document.xml.rels", `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<Relationships xmlns="${PR_NS}">${ctx.rels.join("")}</Relationships>`);
-    }
+    zip.file(
+      "word/_rels/document.xml.rels",
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Relationships xmlns="${PR_NS}">${ctx.rels.join("")}</Relationships>`
+    );
   }
   const documentXml = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <w:document xmlns:w="${W_NS}" xmlns:r="${R_NS}" xmlns:wp="${WP_NS}" xmlns:a="${A_NS}" xmlns:pic="${PIC_NS}" xmlns:wps="${WPS_NS}"><w:body>${body}${sectPr}</w:body></w:document>`;
@@ -2221,14 +2610,27 @@ async function exportDocx(doc, opts) {
     zip.file("word/comments.xml", commentsXml(comments));
     zip.file("word/commentsExtended.xml", commentsExtendedXml(comments));
   }
-  for (const { path, base64 } of ctx.media) zip.file(path, base64, { base64: true });
+  for (const { path, base64 } of ctx.media)
+    zip.file(path, base64, { base64: true });
   return zip.generateAsync({ type: "uint8array" });
 }
 
 // packages/layout-engine/dist/index.js
-var DEFAULT_FONT = { family: "Arial", sizePt: 11, bold: false, italic: false };
+var DEFAULT_FONT = {
+  family: "Arial",
+  sizePt: 11,
+  bold: false,
+  italic: false
+};
 var PT_TO_PX = 96 / 72;
-var HEADING_PT = { 1: 24, 2: 18, 3: 14, 4: 12, 5: 11, 6: 11 };
+var HEADING_PT = {
+  1: 24,
+  2: 18,
+  3: 14,
+  4: 12,
+  5: 11,
+  6: 11
+};
 var LINE_HEIGHT_FACTOR = 1.2;
 var BASELINE_FACTOR = 0.8;
 var DEFAULT_TAB_WIDTH = 48;
@@ -2304,11 +2706,13 @@ function resolveImage(node, pos) {
 function paragraphToFlow(node, base, nodePos, allowFloats = false, marker) {
   const contentStart = nodePos + 1;
   const headingLevel2 = node.attrs["heading"];
-  const runBase = headingLevel2 ? { ...base, sizePt: HEADING_PT[headingLevel2] ?? base.sizePt, bold: true } : base;
+  const styleId = node.attrs["styleId"];
+  const runBase = headingLevel2 ? { ...base, sizePt: HEADING_PT[headingLevel2] ?? base.sizePt, bold: true } : styleId === "Title" ? { ...base, sizePt: 28 } : styleId === "Subtitle" ? { ...base, sizePt: 14, italic: true } : base;
   const runs = [];
   const floats = [];
   node.forEach((child2, offset) => {
-    if (child2.isText) runs.push(resolveRun(child2, runBase, contentStart + offset));
+    if (child2.isText)
+      runs.push(resolveRun(child2, runBase, contentStart + offset));
     else if (child2.type.name === "image") {
       const float = child2.attrs["float"];
       if (float && allowFloats) {
@@ -2335,7 +2739,8 @@ function paragraphToFlow(node, base, nodePos, allowFloats = false, marker) {
       }
     } else if (child2.type.name === "page_field")
       runs.push(resolveField(child2, runBase, contentStart + offset));
-    else if (child2.type.name === "hard_break") runs.push({ break: true, pos: contentStart + offset });
+    else if (child2.type.name === "hard_break")
+      runs.push({ break: true, pos: contentStart + offset });
   });
   const list = node.attrs["list"];
   const align = node.attrs["align"];
@@ -2371,8 +2776,15 @@ function markerFor(node, counter) {
 }
 function nodeToBlock(node, base, nodePos, allowFloats = false, counter) {
   if (node.type.name === "paragraph")
-    return paragraphToFlow(node, base, nodePos, allowFloats, markerFor(node, counter));
-  if (node.type.name === "table") return tableToFlow(node, base, nodePos, counter);
+    return paragraphToFlow(
+      node,
+      base,
+      nodePos,
+      allowFloats,
+      markerFor(node, counter)
+    );
+  if (node.type.name === "table")
+    return tableToFlow(node, base, nodePos, counter);
   return null;
 }
 function tableToFlow(node, base, nodePos, counter) {
@@ -2384,7 +2796,13 @@ function tableToFlow(node, base, nodePos, counter) {
       const cellPos = rowPos + 1 + cellOffset;
       const content = [];
       cellNode.forEach((child2, childOffset) => {
-        const block = nodeToBlock(child2, base, cellPos + 1 + childOffset, true, counter);
+        const block = nodeToBlock(
+          child2,
+          base,
+          cellPos + 1 + childOffset,
+          true,
+          counter
+        );
         if (block) content.push(block);
       });
       const a = cellNode.attrs;
@@ -2416,7 +2834,9 @@ function tableToFlow(node, base, nodePos, counter) {
 }
 function toFlowBlocks(doc, defaultFont = {}, allowFloats = true) {
   const base = { ...DEFAULT_FONT, ...defaultFont };
-  const counter = createNumberingCounter(doc.attrs["numbering"]);
+  const counter = createNumberingCounter(
+    doc.attrs["numbering"]
+  );
   const blocks = [];
   doc.forEach((node, offset) => {
     const block = nodeToBlock(node, base, offset, allowFloats, counter);
@@ -2426,7 +2846,16 @@ function toFlowBlocks(doc, defaultFont = {}, allowFloats = true) {
 }
 function tokenizeInline(inline, ctx) {
   if ("break" in inline) {
-    return [{ isBreak: true, font: ctx.base, width: 0, isSpace: false, pos: inline.pos, size: 1 }];
+    return [
+      {
+        isBreak: true,
+        font: ctx.base,
+        width: 0,
+        isSpace: false,
+        pos: inline.pos,
+        size: 1
+      }
+    ];
   }
   if ("src" in inline) {
     return [
@@ -2537,7 +2966,12 @@ function wrapParagraph(block, ctx, bandFn, emit) {
     return lineLeft + k * tabWidth - x;
   };
   const tabStops = block.tabs ? [...block.tabs].sort((a, b) => a.pos - b.pos) : [];
-  const LEADER_CHARS = { dot: ".", hyphen: "-", underscore: "_", middleDot: "\xB7" };
+  const LEADER_CHARS = {
+    dot: ".",
+    hyphen: "-",
+    underscore: "_",
+    middleDot: "\xB7"
+  };
   const MIN_TAB = 2;
   const tabGroup = (ti) => {
     let width = 0;
@@ -2547,7 +2981,8 @@ function wrapParagraph(block, ctx, bandFn, emit) {
       if (t.isTab) break;
       if (decimalPrefix === null && t.text != null && !t.field) {
         const m = /[.,]/.exec(t.text);
-        if (m) decimalPrefix = width + measure(t.text.slice(0, m.index), t.font);
+        if (m)
+          decimalPrefix = width + measure(t.text.slice(0, m.index), t.font);
       }
       width += t.width;
     }
@@ -2670,7 +3105,16 @@ function wrapParagraph(block, ctx, bandFn, emit) {
       height = target;
     }
     const painted = firstLine && marker ? [marker, ...segments] : segments;
-    emit({ x: startX, width: lineRight - startX, height, baseline, segments: painted, images, from, to });
+    emit({
+      x: startX,
+      width: lineRight - startX,
+      height,
+      baseline,
+      segments: painted,
+      images,
+      from,
+      to
+    });
     prevTo = to;
     lineTokens = [];
     lineWidth = 0;
@@ -2704,10 +3148,14 @@ function wrapParagraph(block, ctx, bandFn, emit) {
       softWrapped = false;
       continue;
     }
-    if (token.isSpace && !token.isTab && lineTokens.length === 0 && softWrapped) continue;
+    if (token.isSpace && !token.isTab && lineTokens.length === 0 && softWrapped)
+      continue;
     if (token.isTab) resolveTab(token, lineStart() + lineWidth, ti);
     if (clusterable(token) && clusterFont && sameFont(clusterFont, token.font)) {
-      token.width = Math.max(0, measure(clusterText + token.text, token.font) - clusterWidth);
+      token.width = Math.max(
+        0,
+        measure(clusterText + token.text, token.font) - clusterWidth
+      );
     }
     const cursor = lineStart() + lineWidth;
     if (!token.isSpace && lineTokens.length > 0 && cursor + token.width > lineRight) {
@@ -2715,14 +3163,21 @@ function wrapParagraph(block, ctx, bandFn, emit) {
       resetCluster();
       softWrapped = true;
       if (token.isTab) resolveTab(token, lineStart() + lineWidth, ti);
-      else if (clusterable(token)) token.width = measure(token.text, token.font);
+      else if (clusterable(token))
+        token.width = measure(token.text, token.font);
     }
     if (clusterable(token) && lineTokens.length === 0 && token.text.length > 1 && lineStart() + token.width > lineRight) {
       const avail = lineRight - lineStart();
       let n = 1;
-      while (n < token.text.length && measure(token.text.slice(0, n + 1), token.font) <= avail) n++;
+      while (n < token.text.length && measure(token.text.slice(0, n + 1), token.font) <= avail)
+        n++;
       const restText = token.text.slice(n);
-      const rest = { ...token, text: restText, width: measure(restText, token.font), size: restText.length };
+      const rest = {
+        ...token,
+        text: restText,
+        width: measure(restText, token.font),
+        size: restText.length
+      };
       if (token.pos != null) rest.pos = token.pos + n;
       token.text = token.text.slice(0, n);
       token.size = n;
@@ -2743,7 +3198,10 @@ function wrapParagraph(block, ctx, bandFn, emit) {
       const rotH = rotatedBoxHeight(token.image);
       maxImagePx = Math.max(maxImagePx, rotH);
       maxAscent = Math.max(maxAscent, token.image.height / 2 + rotH / 2);
-      maxDescent = Math.max(maxDescent, Math.max(0, (rotH - token.image.height) / 2));
+      maxDescent = Math.max(
+        maxDescent,
+        Math.max(0, (rotH - token.image.height) / 2)
+      );
     } else {
       maxFontPx = Math.max(maxFontPx, sizePx(token.font));
       if (metrics) {
@@ -2796,7 +3254,13 @@ function shiftTableX(table, dx) {
 }
 var TEXTBOX_INSET = { l: 10, t: 5, r: 10, b: 5 };
 function resolveFloat(f, x, y, ctx) {
-  const rf = { x, y, width: f.width, height: f.height, src: f.src };
+  const rf = {
+    x,
+    y,
+    width: f.width,
+    height: f.height,
+    src: f.src
+  };
   if (f.pos != null) rf.pos = f.pos;
   if (f.rotation) rf.rotation = f.rotation;
   if (f.shape) rf.shape = f.shape;
@@ -2842,7 +3306,8 @@ function eachCell(rows, ncols, visit) {
     for (const cell of rows[r].cells) {
       while (col < ncols && spanned[col] > 0) col++;
       visit(r, cell, col);
-      for (let k = 0; k < cell.colspan && col + k < ncols; k++) spanned[col + k] = cell.rowspan;
+      for (let k = 0; k < cell.colspan && col + k < ncols; k++)
+        spanned[col + k] = cell.rowspan;
       col += cell.colspan;
     }
     for (let i = 0; i < ncols; i++) if (spanned[i] > 0) spanned[i]--;
@@ -2852,14 +3317,18 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
   const avail = contentRight - contentLeft;
   const nrows = table.rows.length;
   const ncols = table.rows.reduce(
-    (m, r) => Math.max(m, r.cells.reduce((s, c) => s + c.colspan, 0)),
+    (m, r) => Math.max(
+      m,
+      r.cells.reduce((s, c) => s + c.colspan, 0)
+    ),
     0
   );
   const colWidths = new Array(ncols).fill(0);
   eachCell(table.rows, ncols, (_r, cell, startCol) => {
     if (cell.colwidth && cell.colwidth.length === cell.colspan) {
       for (let k = 0; k < cell.colspan && startCol + k < ncols; k++) {
-        if (colWidths[startCol + k] === 0) colWidths[startCol + k] = cell.colwidth[k];
+        if (colWidths[startCol + k] === 0)
+          colWidths[startCol + k] = cell.colwidth[k];
       }
     }
   });
@@ -2867,7 +3336,8 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
   const unknown = colWidths.filter((w) => w === 0).length;
   if (unknown > 0) {
     const share = Math.max(0, (avail - known) / unknown);
-    for (let i = 0; i < ncols; i++) if (colWidths[i] === 0) colWidths[i] = share;
+    for (let i = 0; i < ncols; i++)
+      if (colWidths[i] === 0) colWidths[i] = share;
   }
   const natural = colWidths.reduce((s, w) => s + w, 0);
   if (natural > avail && natural > 0) {
@@ -2887,9 +3357,15 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
   const cellDrafts = [];
   eachCell(table.rows, ncols, (r, cell, col) => {
     let cellWidth = 0;
-    for (let k = 0; k < cell.colspan && col + k < ncols; k++) cellWidth += colWidths[col + k];
+    for (let k = 0; k < cell.colspan && col + k < ncols; k++)
+      cellWidth += colWidths[col + k];
     const cellLeft = colX[col];
-    const flow = layoutFlow(cell.content, cellLeft + pad.left, cellLeft + cellWidth - pad.right, ctx);
+    const flow = layoutFlow(
+      cell.content,
+      cellLeft + pad.left,
+      cellLeft + cellWidth - pad.right,
+      ctx
+    );
     cellDrafts.push({
       startRow: r,
       startCol: col,
@@ -2909,14 +3385,18 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
   const rowHeight = new Array(nrows).fill(0);
   for (const c of cellDrafts) {
     if (c.rowspan === 1) {
-      rowHeight[c.startRow] = Math.max(rowHeight[c.startRow], c.contentHeight + pad.top + pad.bottom);
+      rowHeight[c.startRow] = Math.max(
+        rowHeight[c.startRow],
+        c.contentHeight + pad.top + pad.bottom
+      );
     }
   }
   for (const c of cellDrafts) {
     if (c.rowspan > 1) {
       const need = c.contentHeight + pad.top + pad.bottom;
       let span = 0;
-      for (let r = c.startRow; r < c.startRow + c.rowspan && r < nrows; r++) span += rowHeight[r];
+      for (let r = c.startRow; r < c.startRow + c.rowspan && r < nrows; r++)
+        span += rowHeight[r];
       if (need > span) {
         const last = Math.min(c.startRow + c.rowspan - 1, nrows - 1);
         rowHeight[last] += need - span;
@@ -2931,7 +3411,8 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
   for (let r = 0; r < nrows; r++) rowY[r + 1] = rowY[r] + rowHeight[r];
   const cells = cellDrafts.map((c) => {
     let height = 0;
-    for (let r = c.startRow; r < c.startRow + c.rowspan && r < nrows; r++) height += rowHeight[r];
+    for (let r = c.startRow; r < c.startRow + c.rowspan && r < nrows; r++)
+      height += rowHeight[r];
     const slack = Math.max(0, height - pad.top - pad.bottom - c.contentHeight);
     const vOffset = c.vAlign === "bottom" ? slack : c.vAlign === "center" ? slack / 2 : 0;
     const dy = rowY[c.startRow] + pad.top + vOffset;
@@ -2949,19 +3430,30 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
     if (c.background) cell.background = c.background;
     if (c.borders) cell.borders = c.borders;
     if (c.tables.length > 0) cell.tables = c.tables;
-    if (c.floats.length > 0) cell.floats = c.floats.map((f) => ({ ...f, y: f.y + dy }));
+    if (c.floats.length > 0)
+      cell.floats = c.floats.map((f) => ({ ...f, y: f.y + dy }));
     return cell;
   });
-  const resolved = { x: contentLeft + xShift, y: 0, width: tableWidth, height: rowY[nrows], cells };
+  const resolved = {
+    x: contentLeft + xShift,
+    y: 0,
+    width: tableWidth,
+    height: rowY[nrows],
+    cells
+  };
   if (table.borders) resolved.borders = table.borders;
   let headerRows = 0;
   while (headerRows < nrows && table.rows[headerRows].header) headerRows++;
   if (headerRows > 0 && headerRows < nrows) {
     const headerBottom = rowY[headerRows];
-    const spansOut = cells.some((c) => c.y < headerBottom && c.y + c.height > headerBottom);
+    const spansOut = cells.some(
+      (c) => c.y < headerBottom && c.y + c.height > headerBottom
+    );
     if (!spansOut) resolved.headerBottom = headerBottom;
   }
-  const cantSplitBands = table.rows.map((row, r) => row.cantSplit ? { top: rowY[r], bottom: rowY[r + 1] } : null).filter((b) => b !== null);
+  const cantSplitBands = table.rows.map(
+    (row, r) => row.cantSplit ? { top: rowY[r], bottom: rowY[r + 1] } : null
+  ).filter((b) => b !== null);
   if (cantSplitBands.length > 0) resolved.cantSplitBands = cantSplitBands;
   return resolved;
 }
@@ -2994,7 +3486,10 @@ function cloneTable(t) {
   return { ...t, cells: t.cells.map(cloneCell) };
 }
 function cloneCell(cell) {
-  const copy = { ...cell, lines: cell.lines.map((l) => ({ ...l })) };
+  const copy = {
+    ...cell,
+    lines: cell.lines.map((l) => ({ ...l }))
+  };
   if (cell.tables) copy.tables = cell.tables.map(cloneTable);
   if (cell.floats) copy.floats = cell.floats.map((f) => ({ ...f }));
   return copy;
@@ -3030,11 +3525,19 @@ function splitTableAt(table, cut) {
     } else {
       const c = straddlers.get(cell);
       const topLines = cell.lines.filter((l) => l.y + l.height <= cut);
-      const topTables = (cell.tables ?? []).filter((t) => t.y + t.height <= cut);
-      const topCell = { ...cell, height: cut - cell.y, lines: topLines };
+      const topTables = (cell.tables ?? []).filter(
+        (t) => t.y + t.height <= cut
+      );
+      const topCell = {
+        ...cell,
+        height: cut - cell.y,
+        lines: topLines
+      };
       if (topTables.length > 0) topCell.tables = topTables;
       else delete topCell.tables;
-      const topFloats = (cell.floats ?? []).filter((f) => f.y + f.height <= cut);
+      const topFloats = (cell.floats ?? []).filter(
+        (f) => f.y + f.height <= cut
+      );
       if (topFloats.length > 0) topCell.floats = topFloats;
       else delete topCell.floats;
       topCells.push(topCell);
@@ -3057,7 +3560,13 @@ function splitTableAt(table, cut) {
       restCells.push(contCell);
     }
   }
-  const top = { x: table.x, y: 0, width: table.width, height: cut, cells: topCells };
+  const top = {
+    x: table.x,
+    y: 0,
+    width: table.width,
+    height: cut,
+    cells: topCells
+  };
   const rest = {
     x: table.x,
     y: 0,
@@ -3079,10 +3588,14 @@ function cloneHeaderCells(table, headerBottom) {
     tables: void 0,
     floats: cell.floats?.map((f) => ({ ...f })),
     lines: cell.lines.map((l) => {
-      const line = { ...l, segments: l.segments.map((s) => ({ ...s, pos: void 0 })) };
+      const line = {
+        ...l,
+        segments: l.segments.map((s) => ({ ...s, pos: void 0 }))
+      };
       delete line.from;
       delete line.to;
-      if (line.images) line.images = line.images.map((im) => ({ ...im, pos: void 0 }));
+      if (line.images)
+        line.images = line.images.map((im) => ({ ...im, pos: void 0 }));
       return line;
     })
   }));
@@ -3159,13 +3672,15 @@ function placeBlocks(items, config, ctx, band, footnotes) {
       for (const l of ls)
         for (const s of l.segments) {
           const n = s.footnoteRef;
-          if (n != null && footnotes?.has(n) && !pageFnSet.has(n) && !out.includes(n)) out.push(n);
+          if (n != null && footnotes?.has(n) && !pageFnSet.has(n) && !out.includes(n))
+            out.push(n);
         }
     };
     for (const c of t.cells) {
       if (c.y >= maxY) continue;
       scan(c.lines);
-      if (c.tables) for (const nt of c.tables) for (const nc of nt.cells) scan(nc.lines);
+      if (c.tables)
+        for (const nt of c.tables) for (const nc of nt.cells) scan(nc.lines);
     }
     return out;
   };
@@ -3194,10 +3709,16 @@ function placeBlocks(items, config, ctx, band, footnotes) {
     return { separatorY: areaTop + FOOTNOTE_AREA_GAP / 2, lines: out };
   };
   const finalizePage = () => {
-    const resolved = { index: pages.length, width: page.width, height: page.height, lines };
+    const resolved = {
+      index: pages.length,
+      width: page.width,
+      height: page.height,
+      lines
+    };
     if (tables.length > 0) resolved.tables = tables;
     if (pageFloats.length > 0) resolved.floats = pageFloats;
-    if (pageFnNums.length > 0) resolved.footnotes = buildFootnoteArea(pageFnNums);
+    if (pageFnNums.length > 0)
+      resolved.footnotes = buildFootnoteArea(pageFnNums);
     pages.push(resolved);
     lines = [];
     tables = [];
@@ -3287,7 +3808,9 @@ function placeBlocks(items, config, ctx, band, footnotes) {
           }
           const b = bandAt(y, estH);
           if (b) return b;
-          const blockers = exclusions.filter((ex) => ex.top < y + estH && ex.bottom > y);
+          const blockers = exclusions.filter(
+            (ex) => ex.top < y + estH && ex.bottom > y
+          );
           if (blockers.length === 0) return { left: colX0(), right: colX1() };
           y = Math.min(...blockers.map((ex) => ex.bottom));
         }
@@ -3331,7 +3854,9 @@ function placeBlocks(items, config, ctx, band, footnotes) {
       }
       const drafts = item.para.drafts;
       const draftsHeight = drafts?.reduce((s, d) => s + d.height, 0) ?? 0;
-      const floatsAhead = exclusions.some((ex) => ex.bottom > y && ex.top < y + draftsHeight);
+      const floatsAhead = exclusions.some(
+        (ex) => ex.bottom > y && ex.top < y + draftsHeight
+      );
       if (drafts && !floatsAhead) {
         for (const d of drafts) emitLine(d);
       } else {
@@ -3427,16 +3952,25 @@ function shiftDrafts(drafts, delta) {
     ...d,
     from: d.from != null ? d.from + delta : d.from,
     to: d.to != null ? d.to + delta : d.to,
-    segments: d.segments.map((s) => s.pos != null ? { ...s, pos: s.pos + delta } : s),
-    images: d.images.map((im) => im.pos != null ? { ...im, pos: im.pos + delta } : im)
+    segments: d.segments.map(
+      (s) => s.pos != null ? { ...s, pos: s.pos + delta } : s
+    ),
+    images: d.images.map(
+      (im) => im.pos != null ? { ...im, pos: im.pos + delta } : im
+    )
   }));
 }
 function cloneLineShifted(l, delta) {
   const out = {
     ...l,
-    segments: l.segments.map((s) => s.pos != null ? { ...s, pos: s.pos + delta } : { ...s })
+    segments: l.segments.map(
+      (s) => s.pos != null ? { ...s, pos: s.pos + delta } : { ...s }
+    )
   };
-  if (l.images) out.images = l.images.map((im) => im.pos != null ? { ...im, pos: im.pos + delta } : { ...im });
+  if (l.images)
+    out.images = l.images.map(
+      (im) => im.pos != null ? { ...im, pos: im.pos + delta } : { ...im }
+    );
   if (l.from != null) out.from = l.from + delta;
   if (l.to != null) out.to = l.to + delta;
   return out;
@@ -3479,7 +4013,10 @@ function layVariants(docs, fn) {
   return out;
 }
 function maxBandHeight(bands) {
-  return Math.max(0, ...[bands.default, bands.first, bands.even].filter(Boolean).map((b) => b.height));
+  return Math.max(
+    0,
+    ...[bands.default, bands.first, bands.even].filter(Boolean).map((b) => b.height)
+  );
 }
 function anyBandHasFields(bands) {
   return [bands.default, bands.first, bands.even].some(
@@ -3505,9 +4042,17 @@ function layoutChrome(doc, topY, left, right, ctx) {
   const lines = flow.lines.map((l) => ({ ...l, y: l.y + topY }));
   flow.tables.forEach((t) => offsetTable(t, topY));
   stripPositions(lines, flow.tables);
-  const band = { lines, tables: flow.tables, height: flow.height };
+  const band = {
+    lines,
+    tables: flow.tables,
+    height: flow.height
+  };
   if (flow.floats.length > 0)
-    band.floats = flow.floats.map((f) => ({ ...f, y: f.y + topY, pos: void 0 }));
+    band.floats = flow.floats.map((f) => ({
+      ...f,
+      y: f.y + topY,
+      pos: void 0
+    }));
   return band;
 }
 function layoutFooterChrome(doc, pageHeight, left, right, ctx) {
@@ -3519,12 +4064,21 @@ function layoutFooterChrome(doc, pageHeight, left, right, ctx) {
     height: flow.height
   };
   band.tables.forEach((t) => offsetTable(t, topY));
-  if (flow.floats) band.floats = flow.floats.map((f) => ({ ...f, y: f.y + topY }));
+  if (flow.floats)
+    band.floats = flow.floats.map((f) => ({ ...f, y: f.y + topY }));
   return band;
 }
 function layoutFootnoteBody(doc, left, right, ctx) {
-  const fnCtx = { ...ctx, base: { ...ctx.base, sizePt: ctx.base.sizePt * FOOTNOTE_FONT_SCALE } };
-  const flow = layoutFlow(toFlowBlocks(doc, fnCtx.base, false), left, right, fnCtx);
+  const fnCtx = {
+    ...ctx,
+    base: { ...ctx.base, sizePt: ctx.base.sizePt * FOOTNOTE_FONT_SCALE }
+  };
+  const flow = layoutFlow(
+    toFlowBlocks(doc, fnCtx.base, false),
+    left,
+    right,
+    fnCtx
+  );
   stripPositions(flow.lines, flow.tables);
   return { lines: flow.lines, height: flow.height };
 }
@@ -3533,10 +4087,24 @@ function layout(doc, config, cache, chrome, footnotes) {
   const { page } = config;
   const left = page.margin.left;
   const right = page.width - page.margin.right;
-  const headerDocs = { default: chrome?.header, first: chrome?.headerFirst, even: chrome?.headerEven };
-  const footerDocs = { default: chrome?.footer, first: chrome?.footerFirst, even: chrome?.footerEven };
-  const layHeaders = (c) => layVariants(headerDocs, (d) => layoutChrome(d, CHROME_DISTANCE, left, right, c));
-  const layFooters = (c) => layVariants(footerDocs, (d) => layoutFooterChrome(d, page.height, left, right, c));
+  const headerDocs = {
+    default: chrome?.header,
+    first: chrome?.headerFirst,
+    even: chrome?.headerEven
+  };
+  const footerDocs = {
+    default: chrome?.footer,
+    first: chrome?.footerFirst,
+    even: chrome?.footerEven
+  };
+  const layHeaders = (c) => layVariants(
+    headerDocs,
+    (d) => layoutChrome(d, CHROME_DISTANCE, left, right, c)
+  );
+  const layFooters = (c) => layVariants(
+    footerDocs,
+    (d) => layoutFooterChrome(d, page.height, left, right, c)
+  );
   let headers = layHeaders(ctx);
   let footers = layFooters(ctx);
   let top = page.margin.top;
@@ -3545,25 +4113,46 @@ function layout(doc, config, cache, chrome, footnotes) {
     top = Math.max(top, CHROME_DISTANCE + maxBandHeight(headers));
   }
   if (footers.default || footers.first || footers.even) {
-    bottom = Math.min(bottom, page.height - CHROME_DISTANCE - maxBandHeight(footers));
+    bottom = Math.min(
+      bottom,
+      page.height - CHROME_DISTANCE - maxBandHeight(footers)
+    );
   }
-  const counter = createNumberingCounter(doc.attrs["numbering"]);
+  const counter = createNumberingCounter(
+    doc.attrs["numbering"]
+  );
   const sections = doc.attrs["sections"] ?? [
-    { blockCount: doc.childCount, columns: { count: 1, gap: 0 }, newPage: true }
+    {
+      blockCount: doc.childCount,
+      columns: { count: 1, gap: 0 },
+      newPage: true
+    }
   ];
   const blockSection = [];
   for (const sec of sections) {
     for (let k = 0; k < sec.blockCount; k++) {
-      blockSection.push({ columns: sec.columns, start: k === 0, newPage: sec.newPage });
+      blockSection.push({
+        columns: sec.columns,
+        start: k === 0,
+        newPage: sec.newPage
+      });
     }
   }
   const lastSec = sections[sections.length - 1];
   while (blockSection.length < doc.childCount) {
-    blockSection.push({ columns: lastSec.columns, start: false, newPage: lastSec.newPage });
+    blockSection.push({
+      columns: lastSec.columns,
+      start: false,
+      newPage: lastSec.newPage
+    });
   }
   const items = [];
   doc.forEach((node, offset, index) => {
-    const bs = blockSection[index] ?? { columns: { count: 1, gap: 0 }, start: false, newPage: true };
+    const bs = blockSection[index] ?? {
+      columns: { count: 1, gap: 0 },
+      start: false,
+      newPage: true
+    };
     const colRight = left + columnWidth(right - left, bs.columns);
     const tag = (item) => {
       if (bs.start) item.section = { ...bs.columns, newPage: bs.newPage };
@@ -3596,17 +4185,35 @@ function layout(doc, config, cache, chrome, footnotes) {
       }
       const flow = paragraphToFlow(node, ctx.base, offset, true, marker);
       const drafts = layoutParagraph(flow, left, colRight, ctx);
-      cache?.paragraphs.set(node, { left, right: colRight, basePos: contentStart, marker, drafts });
+      cache?.paragraphs.set(node, {
+        left,
+        right: colRight,
+        basePos: contentStart,
+        marker,
+        drafts
+      });
       items.push(tag({ para: { ...para(drafts), getFlow: () => flow } }));
     } else if (node.type.name === "table") {
       const hit = cache?.tables.get(node);
       if (hit && hit.left === left && hit.right === colRight) {
-        items.push(tag({ table: cloneTableShifted(hit.table, offset - hit.basePos) }));
+        items.push(
+          tag({ table: cloneTableShifted(hit.table, offset - hit.basePos) })
+        );
         return;
       }
-      const table = layoutTable(tableToFlow(node, ctx.base, offset, counter), left, colRight, ctx);
+      const table = layoutTable(
+        tableToFlow(node, ctx.base, offset, counter),
+        left,
+        colRight,
+        ctx
+      );
       if (cache && !tableHasList(node)) {
-        cache.tables.set(node, { left, right: colRight, basePos: offset, table });
+        cache.tables.set(node, {
+          left,
+          right: colRight,
+          basePos: offset,
+          table
+        });
         items.push(tag({ table: cloneTableShifted(table, 0) }));
       } else {
         items.push(tag({ table }));
@@ -3624,7 +4231,10 @@ function layout(doc, config, cache, chrome, footnotes) {
   assignSectionHeights(items);
   const resolved = placeBlocks(items, config, ctx, { top, bottom }, fnMap);
   if (anyBandHasFields(headers) || anyBandHasFields(footers)) {
-    const fieldCtx = { ...ctx, fieldPlaceholder: String(resolved.pages.length) };
+    const fieldCtx = {
+      ...ctx,
+      fieldPlaceholder: String(resolved.pages.length)
+    };
     headers = layHeaders(fieldCtx);
     footers = layFooters(fieldCtx);
   }
@@ -3635,7 +4245,10 @@ function layout(doc, config, cache, chrome, footnotes) {
   if (footers.first) resolved.pageFooterFirst = footers.first;
   if (footers.even) resolved.pageFooterEven = footers.even;
   if (chrome?.titlePg || chrome?.evenAndOdd) {
-    resolved.chromeSelect = { titlePg: !!chrome.titlePg, evenAndOdd: !!chrome.evenAndOdd };
+    resolved.chromeSelect = {
+      titlePg: !!chrome.titlePg,
+      evenAndOdd: !!chrome.evenAndOdd
+    };
   }
   return resolved;
 }
@@ -4873,7 +5486,10 @@ var splitListItem = (state, dispatch) => {
   if ($from.parent !== $to.parent) return false;
   if (parent.content.size === 0) {
     dispatch?.(
-      state.tr.setNodeMarkup($from.before(), null, { ...parent.attrs, list: null })
+      state.tr.setNodeMarkup($from.before(), null, {
+        ...parent.attrs,
+        list: null
+      })
     );
     return true;
   }
@@ -4949,6 +5565,7 @@ var InputBridge = class {
     this.dom.appendChild(this.host);
     this.view = new import_prosemirror_view.EditorView(this.host, {
       state: createEditingState(options.doc, options.keys),
+      handlePaste: options.handlePaste,
       dispatchTransaction: (tr) => {
         const state = this.view.state.apply(tr);
         this.view.updateState(state);
@@ -4972,7 +5589,10 @@ var InputBridge = class {
   setSelection(anchor, head = anchor) {
     const { doc } = this.view.state;
     const clamp2 = (p) => Math.max(0, Math.min(p, doc.content.size));
-    const sel = import_prosemirror_state.TextSelection.between(doc.resolve(clamp2(anchor)), doc.resolve(clamp2(head)));
+    const sel = import_prosemirror_state.TextSelection.between(
+      doc.resolve(clamp2(anchor)),
+      doc.resolve(clamp2(head))
+    );
     this.view.dispatch(this.view.state.tr.setSelection(sel));
   }
   /** Select the word around `pos` (double-click); falls back to a collapsed
@@ -5787,7 +6407,8 @@ function setAlign(align) {
       const tr = state.tr;
       let changed = false;
       state.doc.nodesBetween(from, to, (node, pos) => {
-        if (node.type.name !== "paragraph" || node.attrs["align"] === align) return;
+        if (node.type.name !== "paragraph" || node.attrs["align"] === align)
+          return;
         tr.setNodeAttribute(pos, "align", align);
         changed = true;
       });
@@ -5812,7 +6433,9 @@ function toggleHeading(level) {
       const paras = selectedParagraphs(state);
       if (paras.length === 0) return false;
       if (dispatch) {
-        const allThisLevel = paras.every((p) => p.node.attrs["heading"] === level);
+        const allThisLevel = paras.every(
+          (p) => p.node.attrs["heading"] === level
+        );
         const next = allThisLevel ? null : level;
         const tr = state.tr;
         for (const p of paras) tr.setNodeAttribute(p.pos, "heading", next);
@@ -6075,8 +6698,10 @@ var BapbongEditor = class {
    *  Built from the shared command layer; the same ops run on a backend.
    *  (Plugin-contributed commands are an additive follow-up.) */
   commands = defaultCommands();
+  readClipboardFallback;
   constructor(stack, opts = {}) {
     this.stack = stack;
+    this.readClipboardFallback = opts.readClipboardFallback;
     this.core = new RenderCore(stack, {
       viewport: opts.viewport,
       measureText: opts.measureText,
@@ -6093,9 +6718,12 @@ var BapbongEditor = class {
     stack.addEventListener("dblclick", this.onDblClick);
     stack.addEventListener("contextmenu", this.onContextMenu);
     window.addEventListener("keydown", this.onKeyDown, true);
-    this.plugins = new Collection([...createBuiltins(), ...opts.plugins ?? []], {
-      idProperty: "name"
-    });
+    this.plugins = new Collection(
+      [...createBuiltins(), ...opts.plugins ?? []],
+      {
+        idProperty: "name"
+      }
+    );
     this.pointerPlugins = [...this.plugins].some((p) => p.onPointer);
     this.pluginCtx = this.makePluginContext();
     for (const p of this.plugins) {
@@ -6120,8 +6748,14 @@ var BapbongEditor = class {
       setActionButton: (at, onActivate) => this.setActionButton(at, onActivate),
       setFrame: (frame) => this.setFrame(frame)
     };
-    Object.defineProperty(ctx, "state", { enumerable: true, get: () => this.state });
-    Object.defineProperty(ctx, "layout", { enumerable: true, get: () => this.core.layout });
+    Object.defineProperty(ctx, "state", {
+      enumerable: true,
+      get: () => this.state
+    });
+    Object.defineProperty(ctx, "layout", {
+      enumerable: true,
+      get: () => this.core.layout
+    });
     return ctx;
   }
   // ── Public API ──────────────────────────────────────────────────────
@@ -6264,34 +6898,116 @@ var BapbongEditor = class {
     this.bridge.focus();
     return document.execCommand("cut");
   }
-  /** Paste clipboard content (HTML → parsed by the schema, else plain text). */
+  /** Paste clipboard content — HTML parsed by the schema, image blobs as
+   *  embedded images, else plain text.
+   *
+   *  Menu-driven paste can't ride a native ClipboardEvent, so it climbs a
+   *  ladder of acquisition strategies until one yields content:
+   *  1. the host's native clipboard reader (`readClipboardFallback`) when
+   *     provided — on WKWebView every programmatic clipboard READ (both
+   *     `navigator.clipboard.*` and execCommand) pops a "Paste" permission
+   *     callout and pends until the user taps it, so the desktop shell
+   *     must never touch the DOM clipboard from a menu click;
+   *  2. async Clipboard API (`navigator.clipboard.read`) — browsers, where
+   *     a user-gesture read is granted silently;
+   *  3. `document.execCommand('paste')` — legacy last resort. */
   async paste() {
     const view = this.bridge?.view;
     if (!view) return;
+    this.bridge?.focus();
+    if (await this.pasteViaHostClipboard(view)) return;
+    if (this.readClipboardFallback) return;
+    if (await this.pasteViaClipboardApi(view)) return;
+    document.execCommand("paste");
+  }
+  async pasteViaClipboardApi(view) {
     try {
       const items = await navigator.clipboard.read();
+      const htmlItem = items.find((i) => i.types.includes("text/html"));
+      if (htmlItem) {
+        const html = await (await htmlItem.getType("text/html")).text();
+        const dom = new DOMParser().parseFromString(html, "text/html").body;
+        if ((dom.textContent ?? "").trim()) {
+          const slice = import_prosemirror_model3.DOMParser.fromSchema(view.state.schema).parseSlice(
+            dom
+          );
+          view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+          return true;
+        }
+      }
       for (const item of items) {
-        if (item.types.includes("text/html")) {
-          const html = await (await item.getType("text/html")).text();
-          const dom = document.createElement("div");
-          dom.innerHTML = html;
-          const slice = import_prosemirror_model3.DOMParser.fromSchema(view.state.schema).parseSlice(dom);
+        const type = item.types.find((t) => t.startsWith("image/"));
+        if (type && await insertImageBlobs(view, [await item.getType(type)]))
+          return true;
+      }
+      const text = await navigator.clipboard.readText();
+      if (text) {
+        view.dispatch(view.state.tr.insertText(text).scrollIntoView());
+        return true;
+      }
+      return false;
+    } catch (err) {
+      console.warn(
+        "[bapbong] Clipboard API paste unavailable, falling back:",
+        err
+      );
+      return false;
+    }
+  }
+  async pasteViaHostClipboard(view) {
+    if (!this.readClipboardFallback) return false;
+    try {
+      const data = await this.readClipboardFallback();
+      if (!data) return false;
+      if (data.html) {
+        const dom = new DOMParser().parseFromString(
+          data.html,
+          "text/html"
+        ).body;
+        if ((dom.textContent ?? "").trim()) {
+          const slice = import_prosemirror_model3.DOMParser.fromSchema(view.state.schema).parseSlice(
+            dom
+          );
           view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
-          return;
+          return true;
         }
       }
-      await this.pasteText();
-    } catch {
+      if (data.image?.length) {
+        const blob = new Blob([data.image], {
+          type: data.imageMime ?? "image/png"
+        });
+        if (await insertImageBlobs(view, [blob])) return true;
+      }
+      if (data.text) {
+        view.dispatch(view.state.tr.insertText(data.text).scrollIntoView());
+        return true;
+      }
+      return false;
+    } catch (err) {
+      console.warn("[bapbong] host clipboard fallback failed:", err);
+      return false;
     }
   }
   /** Paste clipboard text as plain text (no formatting). */
   async pasteText() {
     const view = this.bridge?.view;
     if (!view) return;
+    this.bridge?.focus();
+    if (this.readClipboardFallback) {
+      try {
+        const data = await this.readClipboardFallback();
+        if (data?.text)
+          view.dispatch(view.state.tr.insertText(data.text).scrollIntoView());
+      } catch (err) {
+        console.warn("[bapbong] host clipboard fallback failed:", err);
+      }
+      return;
+    }
     try {
       const text = await navigator.clipboard.readText();
       if (text) view.dispatch(view.state.tr.insertText(text).scrollIntoView());
-    } catch {
+    } catch (err) {
+      console.warn("[bapbong] Clipboard API readText unavailable:", err);
     }
   }
   destroy() {
@@ -6332,7 +7048,8 @@ var BapbongEditor = class {
         "Shift-ArrowUp": this.verticalCmd(-1, true),
         "Shift-ArrowDown": this.verticalCmd(1, true)
       },
-      onUpdate: (state, tr) => this.refresh(state, tr)
+      onUpdate: (state, tr) => this.refresh(state, tr),
+      handlePaste: imagePasteHandler
     });
     this.stack.appendChild(this.bridge.dom);
     this.render(this.bridge.state, true);
@@ -6361,14 +7078,25 @@ var BapbongEditor = class {
     else this.core.paintOverlay(overlay);
     const caret = this.lastCaret;
     if (caret && this.bridge) {
-      const pt = this.core.pageToCanvas({ pageIndex: caret.pageIndex, x: caret.x, y: caret.y });
+      const pt = this.core.pageToCanvas({
+        pageIndex: caret.pageIndex,
+        x: caret.x,
+        y: caret.y
+      });
       if (pt) this.bridge.place(pt.x, pt.y, caret.height);
     }
-    this.emitChange({ state, pageCount: this.core.pageCount, docChanged: contentDirty });
+    this.emitChange({
+      state,
+      pageCount: this.core.pageCount,
+      docChanged: contentDirty
+    });
   }
   /** The caret/selection overlay in the current blink phase. */
   currentOverlay() {
-    return { caret: this.caretVisible ? this.lastCaret : null, selection: this.lastSelection };
+    return {
+      caret: this.caretVisible ? this.lastCaret : null,
+      selection: this.lastSelection
+    };
   }
   /** Each plugin's doc-range decorations (the core resolves them to rects). */
   pluginDecorations() {
@@ -6443,7 +7171,8 @@ var BapbongEditor = class {
    *  gesture), so plugins never steal keys from other inputs on the page. */
   onKeyDown = (ev) => {
     const target = ev.target;
-    if (target && target !== document.body && !this.stack.contains(target)) return;
+    if (target && target !== document.body && !this.stack.contains(target))
+      return;
     const offered = {
       key: ev.key,
       ctrlKey: ev.ctrlKey,
@@ -6477,7 +7206,10 @@ var BapbongEditor = class {
     this.lastCaret = this.core.caretRect(this.dragHead);
     this.lastSelection = from === to ? [] : this.core.selectionRects(from, to);
     this.caretVisible = true;
-    this.core.paintOverlay({ caret: this.lastCaret, selection: this.lastSelection });
+    this.core.paintOverlay({
+      caret: this.lastCaret,
+      selection: this.lastSelection
+    });
   }
   onPointerUp = (ev) => {
     if (this.offerPointer("up", ev)) {
@@ -6538,8 +7270,16 @@ var BapbongEditor = class {
       this.guideEl.style.cssText = "position:absolute;width:0;border-left:2px dashed #378add;pointer-events:none;z-index:5;";
       this.stack.appendChild(this.guideEl);
     }
-    const top = this.core.pageToCanvas({ pageIndex: guide.pageIndex, x: guide.x, y: guide.y });
-    const bottom = this.core.pageToCanvas({ pageIndex: guide.pageIndex, x: guide.x, y: guide.y + guide.height });
+    const top = this.core.pageToCanvas({
+      pageIndex: guide.pageIndex,
+      x: guide.x,
+      y: guide.y
+    });
+    const bottom = this.core.pageToCanvas({
+      pageIndex: guide.pageIndex,
+      x: guide.x,
+      y: guide.y + guide.height
+    });
     if (!top || !bottom) {
       this.guideEl.style.display = "none";
       return;
@@ -6587,7 +7327,11 @@ var BapbongEditor = class {
       this.stack.appendChild(el2);
       this.frameEl = el2;
     }
-    const tl = this.core.pageToCanvas({ pageIndex: frame.pageIndex, x: frame.x, y: frame.y });
+    const tl = this.core.pageToCanvas({
+      pageIndex: frame.pageIndex,
+      x: frame.x,
+      y: frame.y
+    });
     const br = this.core.pageToCanvas({
       pageIndex: frame.pageIndex,
       x: frame.x + frame.width,
@@ -6623,7 +7367,11 @@ var BapbongEditor = class {
     this.highlightEls.forEach((el, i) => {
       const r = list[i];
       const tl = r && this.core.pageToCanvas({ pageIndex: r.pageIndex, x: r.x, y: r.y });
-      const br = r && this.core.pageToCanvas({ pageIndex: r.pageIndex, x: r.x + r.width, y: r.y + r.height });
+      const br = r && this.core.pageToCanvas({
+        pageIndex: r.pageIndex,
+        x: r.x + r.width,
+        y: r.y + r.height
+      });
       if (!tl || !br) {
         el.style.display = "none";
         return;