npm - @shadow-garden/bapbong-editor - Versions diffs - 0.1.0 → 0.2.0 - Mend

@shadow-garden/bapbong-editor 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs +949 -201
package/dist/index.js +959 -203
package/dist/lib/bapbong-editor.d.ts +27 -3
package/dist/lib/bapbong-editor.d.ts.map +1 -1
package/dist/lib/paste-images.d.ts +13 -0
package/dist/lib/paste-images.d.ts.map +1 -0
package/package.json +8 -7

package/dist/index.js CHANGED Viewed

@@ -1,8 +1,98 @@
 // packages/editor/src/lib/bapbong-editor.ts
-import { DOMParser as PMDOMParser, Schema as Schema2 } from "prosemirror-model";
+import {
+  DOMParser as PMDOMParser,
+  Schema as Schema2
+} from "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
 import { Schema } from "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 Schema({
   nodes: {
     doc: {
@@ -38,6 +128,11 @@ var schema = new 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 },
@@ -46,15 +141,23 @@ var schema = new 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" },
@@ -94,9 +197,13 @@ var schema = new 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];
@@ -133,7 +240,11 @@ var schema = new 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+",
@@ -169,9 +280,12 @@ var schema = new 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];
       }
     }
@@ -200,9 +314,15 @@ var schema = new 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
@@ -218,7 +338,11 @@ var schema = new 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
@@ -235,26 +359,51 @@ var schema = new 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`
@@ -268,12 +417,20 @@ var schema = new 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
@@ -286,7 +443,12 @@ var schema = new Schema({
 var commentSchema = new 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).
@@ -307,7 +469,10 @@ var commentSchema = new 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(/^@/, "")
+            };
           }
         }
       ]
@@ -329,7 +494,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("; ");
@@ -745,11 +911,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 = {
@@ -769,7 +940,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 = [];
@@ -818,8 +991,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") {
@@ -843,9 +1020,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";
   }
@@ -1022,7 +1201,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));
@@ -1117,7 +1298,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),
@@ -1150,9 +1334,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") {
@@ -1169,7 +1356,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;
@@ -1182,7 +1370,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"));
@@ -1199,6 +1389,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;
@@ -1311,7 +1504,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");
@@ -1364,7 +1559,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");
@@ -1391,8 +1593,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;
@@ -1403,12 +1615,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) {
@@ -1449,7 +1666,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)])]
@@ -1515,18 +1733,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,
@@ -1561,7 +1788,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");
@@ -1581,14 +1811,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();
 }
@@ -1608,12 +1848,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,
@@ -1627,7 +1873,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];
@@ -1677,7 +1925,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;
 }
@@ -1687,11 +1938,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);
@@ -1740,7 +1996,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");
@@ -1813,7 +2073,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",
@@ -1836,9 +2099,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) {
@@ -1880,7 +2149,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>`;
@@ -1890,7 +2161,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 "";
@@ -1900,9 +2172,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) {
@@ -1936,10 +2211,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 = [];
@@ -1947,7 +2228,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(" ")}/>`);
@@ -1958,11 +2241,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 = "") {
@@ -1970,7 +2255,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",
@@ -1992,12 +2284,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 = "";
@@ -2010,7 +2309,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));
@@ -2029,7 +2331,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));
@@ -2064,10 +2368,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}"/>`;
 }
@@ -2089,16 +2397,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>`;
@@ -2106,17 +2463,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) {
@@ -2125,7 +2495,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"] ?? [];
@@ -2134,7 +2507,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 = {
@@ -2149,13 +2523,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 JSZip2();
+  const styleIds = usedStyleIds(doc);
   let sectPr = "";
   if (opts?.carry) {
     const carry = opts.carry;
@@ -2163,18 +2544,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>`;
@@ -2183,14 +2575,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;
@@ -2266,11 +2671,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) {
@@ -2297,7 +2704,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"];
@@ -2333,8 +2741,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) {
@@ -2346,7 +2761,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;
@@ -2378,7 +2799,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);
@@ -2388,7 +2811,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 [
@@ -2499,7 +2931,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;
@@ -2509,7 +2946,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;
     }
@@ -2632,7 +3070,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;
@@ -2666,10 +3113,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) {
@@ -2677,14 +3128,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;
@@ -2705,7 +3163,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) {
@@ -2758,7 +3219,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;
@@ -2804,7 +3271,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]--;
@@ -2814,14 +3282,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];
       }
     }
   });
@@ -2829,7 +3301,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) {
@@ -2849,9 +3322,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,
@@ -2871,14 +3350,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;
@@ -2893,7 +3376,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;
@@ -2911,19 +3395,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;
 }
@@ -2956,7 +3451,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;
@@ -2992,11 +3490,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);
@@ -3019,7 +3525,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,
@@ -3041,10 +3553,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;
     })
   }));
@@ -3121,13 +3637,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;
   };
@@ -3156,10 +3674,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 = [];
@@ -3249,7 +3773,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));
         }
@@ -3293,7 +3819,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 {
@@ -3389,16 +3917,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;
@@ -3441,7 +3978,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(
@@ -3467,9 +4007,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) {
@@ -3481,12 +4029,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 };
 }
@@ -3495,10 +4052,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;
@@ -3507,25 +4078,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 };
@@ -3558,17 +4150,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 }));
@@ -3586,7 +4196,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);
   }
@@ -3597,7 +4210,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;
 }
@@ -4816,7 +5432,12 @@ function collectFontFamilies(...docs) {
 import { baseKeymap } from "prosemirror-commands";
 import { history, redo, undo } from "prosemirror-history";
 import { keymap } from "prosemirror-keymap";
-import { EditorState, Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import {
+  EditorState,
+  Plugin,
+  PluginKey,
+  TextSelection
+} from "prosemirror-state";
 import { canSplit } from "prosemirror-transform";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
 function moveCaretCommand(compute, extend = false) {
@@ -4835,7 +5456,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;
   }
@@ -4911,6 +5535,7 @@ var InputBridge = class {
     this.dom.appendChild(this.host);
     this.view = new 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);
@@ -4934,7 +5559,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 = TextSelection.between(doc.resolve(clamp2(anchor)), doc.resolve(clamp2(head)));
+    const sel = 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
@@ -5749,7 +6377,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;
       });
@@ -5774,7 +6403,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);
@@ -6037,8 +6668,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,
@@ -6055,9 +6688,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) {
@@ -6082,8 +6718,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 ──────────────────────────────────────────────────────
@@ -6226,34 +6868,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 = PMDOMParser.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 = PMDOMParser.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 = PMDOMParser.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() {
@@ -6294,7 +7018,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);
@@ -6323,14 +7048,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() {
@@ -6405,7 +7141,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,
@@ -6439,7 +7176,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)) {
@@ -6500,8 +7240,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;
@@ -6549,7 +7297,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,
@@ -6585,7 +7337,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;