mgcode-docx-editor 0.1.0

package/dist/index.js

@@ -0,0 +1,1483 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DocxEditor: () => DocxEditor_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/DocxEditor.tsx
+var import_react3 = require("react");
+var import_material4 = require("@mui/material");
+
+// src/docx/generate.ts
+var import_html_to_docx = __toESM(require("@turbodocx/html-to-docx"));
+var import_jszip = __toESM(require("jszip"));
+var import_buffer = require("buffer");
+
+// src/docx/pageFields.ts
+var PAGE_NUMBER_TOKEN = "[[PAGINA]]";
+var TOTAL_PAGES_TOKEN = "[[TOTAL_PAGINAS]]";
+var FIELD_BY_TOKEN = [
+  { token: PAGE_NUMBER_TOKEN, instr: "PAGE" },
+  { token: TOTAL_PAGES_TOKEN, instr: "NUMPAGES" }
+];
+function hasPageFieldTokens(html) {
+  if (!html) return false;
+  return FIELD_BY_TOKEN.some(({ token }) => html.includes(token));
+}
+var W_NAMESPACE = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
+var RUN_PATTERN = /<(w:)?r(?:\s[^>]*)?>[\s\S]*?<\/(?:w:)?r>/g;
+function splitTextByTokens(text) {
+  const parts = [];
+  let rest = text;
+  while (rest.length > 0) {
+    let earliest = -1;
+    let found = null;
+    for (const candidate of FIELD_BY_TOKEN) {
+      const i = rest.indexOf(candidate.token);
+      if (i !== -1 && (earliest === -1 || i < earliest)) {
+        earliest = i;
+        found = candidate;
+      }
+    }
+    if (!found) {
+      parts.push({ kind: "text", value: rest });
+      break;
+    }
+    if (earliest > 0) parts.push({ kind: "text", value: rest.slice(0, earliest) });
+    parts.push({ kind: "field", instr: found.instr });
+    rest = rest.slice(earliest + found.token.length);
+  }
+  return parts;
+}
+function rebuildRun(runXml, prefix) {
+  const tMatch = runXml.match(/<(?:w:)?t([^>]*)>([\s\S]*?)<\/(?:w:)?t>/);
+  if (!tMatch) return runXml;
+  const [, tAttrs, text] = tMatch;
+  if (!FIELD_BY_TOKEN.some(({ token }) => text.includes(token))) return runXml;
+  const rPrMatch = runXml.match(/<(?:w:)?rPr(?:\/>|>[\s\S]*?<\/(?:w:)?rPr>)/);
+  const props = rPrMatch ? rPrMatch[0] : "";
+  const p = prefix;
+  const tOpen = `<${p}t${tAttrs}>`;
+  const tClose = `</${p}t>`;
+  const nsDecl = p ? "" : ` xmlns:w="${W_NAMESPACE}"`;
+  return splitTextByTokens(text).map(
+    (part) => part.kind === "text" ? `<${p}r>${props}${tOpen}${part.value}${tClose}</${p}r>` : (
+      // "1" é o valor em cache exibido até o Word/LibreOffice atualizar o campo.
+      `<${p}fldSimple${nsDecl} w:instr=" ${part.instr} "><${p}r>${props}${tOpen}1${tClose}</${p}r></${p}fldSimple>`
+    )
+  ).join("");
+}
+function injectPageFields(xml) {
+  return xml.replace(
+    RUN_PATTERN,
+    (runXml, prefix) => rebuildRun(runXml, prefix ?? "")
+  );
+}
+
+// src/docx/generate.ts
+var DEFAULT_MARGINS = {
+  top: 1440,
+  right: 1440,
+  bottom: 1440,
+  left: 1440
+};
+var PAGE_SIZE_A4_TWIPS = { width: 11906, height: 16838 };
+function ensureBufferGlobal() {
+  const g = globalThis;
+  if (typeof g.Buffer === "undefined") g.Buffer = import_buffer.Buffer;
+}
+async function toArrayBuffer(out) {
+  if (out instanceof ArrayBuffer) return out;
+  if (typeof Blob !== "undefined" && out instanceof Blob) {
+    return out.arrayBuffer();
+  }
+  const u8 = out;
+  return u8.buffer.slice(u8.byteOffset, u8.byteOffset + u8.byteLength);
+}
+function wrapBody(bodyHtml) {
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>${bodyHtml}</body></html>`;
+}
+async function modelToDocx(model, options = {}) {
+  ensureBufferGlobal();
+  const margins = options.margins ?? DEFAULT_MARGINS;
+  const hasHeader = !!model.header && model.header.trim().length > 0;
+  const hasFooter = !!model.footer && model.footer.trim().length > 0;
+  const out = await (0, import_html_to_docx.default)(
+    wrapBody(model.body),
+    hasHeader ? model.header : null,
+    {
+      header: hasHeader,
+      footer: hasFooter,
+      margins,
+      pageSize: PAGE_SIZE_A4_TWIPS,
+      font: options.font ?? "Arial"
+    },
+    hasFooter ? model.footer : null
+  );
+  const buffer = await toArrayBuffer(out);
+  if (!hasPageFieldTokens(model.header) && !hasPageFieldTokens(model.footer)) {
+    return buffer;
+  }
+  const zip = await import_jszip.default.loadAsync(buffer);
+  const partNames = Object.keys(zip.files).filter(
+    (name) => /^word\/(header|footer)\d*\.xml$/.test(name)
+  );
+  for (const name of partNames) {
+    const xml = await zip.file(name).async("string");
+    zip.file(name, injectPageFields(xml));
+  }
+  return zip.generateAsync({ type: "arraybuffer" });
+}
+
+// src/docx/importDocx.ts
+var import_mammoth = __toESM(require("mammoth"));
+async function bufferToModel(buffer) {
+  const input = typeof Buffer !== "undefined" ? { buffer: Buffer.from(buffer) } : { arrayBuffer: buffer };
+  const { value: bodyHtml } = await import_mammoth.default.convertToHtml(input);
+  return {
+    body: bodyHtml
+  };
+}
+
+// src/docx/pagination.ts
+function computePageLayout(blocks, metrics) {
+  const { usableHeightPx, interPageGapPx } = metrics;
+  const stride = usableHeightPx + interPageGapPx;
+  const spacers = [];
+  let added = 0;
+  let maxEnd = 0;
+  blocks.forEach((block, index) => {
+    let start = block.top + added;
+    const page = Math.floor(start / stride);
+    const regionStart = page * stride;
+    const regionEnd = regionStart + usableHeightPx;
+    const fitsInAPage = block.height <= usableHeightPx;
+    const crossesBottom = start + block.height > regionEnd;
+    if (start >= regionEnd || crossesBottom && fitsInAPage && start > regionStart) {
+      const nextStart = (page + 1) * stride;
+      const height = nextStart - start;
+      spacers.push({ beforeBlockIndex: index, heightPx: height });
+      added += height;
+      start = nextStart;
+    }
+    maxEnd = Math.max(maxEnd, start + block.height);
+  });
+  const pageCount = Math.max(1, Math.floor(Math.max(0, maxEnd - 1) / stride) + 1);
+  return { spacers, pageCount };
+}
+var PAGE_SPACER_ATTR = "data-page-spacer";
+function createSpacerElement(heightPx) {
+  const el = document.createElement("div");
+  el.setAttribute(PAGE_SPACER_ATTR, "true");
+  el.setAttribute("contenteditable", "false");
+  el.setAttribute("aria-hidden", "true");
+  el.style.height = `${heightPx}px`;
+  el.style.userSelect = "none";
+  el.style.pointerEvents = "none";
+  return el;
+}
+function stripPageSpacers(html) {
+  const tmp = document.createElement("div");
+  tmp.innerHTML = html;
+  tmp.querySelectorAll(`[${PAGE_SPACER_ATTR}]`).forEach((n) => n.remove());
+  return tmp.innerHTML;
+}
+
+// src/editorCommands.ts
+function execFormat(command, value) {
+  document.execCommand("styleWithCSS", false, "true");
+  document.execCommand(command, false, value);
+}
+function setFontSize(region, pt) {
+  document.execCommand("styleWithCSS", false, "false");
+  document.execCommand("fontSize", false, "7");
+  const marked = region.querySelectorAll('font[size="7"]');
+  marked.forEach((el) => {
+    el.removeAttribute("size");
+    el.style.fontSize = `${pt}pt`;
+  });
+}
+function setFontFamily(family) {
+  document.execCommand("styleWithCSS", false, "true");
+  document.execCommand("fontName", false, family);
+}
+function insertTextIntoRegion(region, text) {
+  region.focus();
+  const selection = window.getSelection();
+  const node = document.createTextNode(text);
+  if (selection && selection.rangeCount > 0 && selection.anchorNode && region.contains(selection.anchorNode)) {
+    const range = selection.getRangeAt(0);
+    range.deleteContents();
+    range.insertNode(node);
+    range.setStartAfter(node);
+    range.setEndAfter(node);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  } else {
+    region.appendChild(node);
+  }
+}
+
+// src/docx/units.ts
+var TWIPS_PER_INCH = 1440;
+var PX_PER_INCH = 96;
+function pxToTwips(px) {
+  return Math.round(px / PX_PER_INCH * TWIPS_PER_INCH);
+}
+function twipsToPx(twips) {
+  return twips / TWIPS_PER_INCH * PX_PER_INCH;
+}
+
+// src/Toolbar.tsx
+var import_react = require("react");
+var import_material = require("@mui/material");
+var import_Undo = __toESM(require("@mui/icons-material/Undo"));
+var import_Redo = __toESM(require("@mui/icons-material/Redo"));
+var import_FormatBold = __toESM(require("@mui/icons-material/FormatBold"));
+var import_FormatItalic = __toESM(require("@mui/icons-material/FormatItalic"));
+var import_FormatUnderlined = __toESM(require("@mui/icons-material/FormatUnderlined"));
+var import_StrikethroughS = __toESM(require("@mui/icons-material/StrikethroughS"));
+var import_FormatColorText = __toESM(require("@mui/icons-material/FormatColorText"));
+var import_BorderColor = __toESM(require("@mui/icons-material/BorderColor"));
+var import_Link = __toESM(require("@mui/icons-material/Link"));
+var import_Superscript = __toESM(require("@mui/icons-material/Superscript"));
+var import_Subscript = __toESM(require("@mui/icons-material/Subscript"));
+var import_FormatAlignLeft = __toESM(require("@mui/icons-material/FormatAlignLeft"));
+var import_FormatAlignCenter = __toESM(require("@mui/icons-material/FormatAlignCenter"));
+var import_FormatAlignRight = __toESM(require("@mui/icons-material/FormatAlignRight"));
+var import_FormatAlignJustify = __toESM(require("@mui/icons-material/FormatAlignJustify"));
+var import_FormatListBulleted = __toESM(require("@mui/icons-material/FormatListBulleted"));
+var import_FormatListNumbered = __toESM(require("@mui/icons-material/FormatListNumbered"));
+var import_FormatIndentDecrease = __toESM(require("@mui/icons-material/FormatIndentDecrease"));
+var import_FormatIndentIncrease = __toESM(require("@mui/icons-material/FormatIndentIncrease"));
+var import_FormatClear = __toESM(require("@mui/icons-material/FormatClear"));
+var import_Image = __toESM(require("@mui/icons-material/Image"));
+var import_DataObject = __toESM(require("@mui/icons-material/DataObject"));
+var import_Add = __toESM(require("@mui/icons-material/Add"));
+var import_Remove = __toESM(require("@mui/icons-material/Remove"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var FONT_FAMILIES = [
+  "Arial",
+  "Times New Roman",
+  "Calibri",
+  "Courier New",
+  "Georgia",
+  "Verdana"
+];
+var BLOCK_FORMATS = [
+  { label: "Texto normal", tag: "P" },
+  { label: "T\xEDtulo 1", tag: "H1" },
+  { label: "T\xEDtulo 2", tag: "H2" },
+  { label: "T\xEDtulo 3", tag: "H3" }
+];
+function Toolbar(props) {
+  const [fontFamily, setFontFamilyState] = (0, import_react.useState)("Arial");
+  const [fontSize, setFontSizeState] = (0, import_react.useState)(11);
+  const [blockTag, setBlockTag] = (0, import_react.useState)("P");
+  const [varAnchor, setVarAnchor] = (0, import_react.useState)(null);
+  const colorInputRef = (0, import_react.useRef)(null);
+  const highlightInputRef = (0, import_react.useRef)(null);
+  const changeFontSize = (next) => {
+    const clamped = Math.min(96, Math.max(1, next));
+    setFontSizeState(clamped);
+    props.onFontSize(clamped);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_material.Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 0.5,
+        px: 1,
+        py: 0.5,
+        borderBottom: 1,
+        borderColor: "divider",
+        bgcolor: "background.paper"
+      },
+      onMouseDown: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Desfazer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("undo"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Undo.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Refazer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("redo"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Redo.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.Select,
+          {
+            size: "small",
+            value: blockTag,
+            onChange: (e) => {
+              setBlockTag(e.target.value);
+              props.onFormatBlock(e.target.value);
+            },
+            sx: { minWidth: 130, height: 32 },
+            children: BLOCK_FORMATS.map((b) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.MenuItem, { value: b.tag, children: b.label }, b.tag))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.Select,
+          {
+            size: "small",
+            value: fontFamily,
+            onChange: (e) => {
+              setFontFamilyState(e.target.value);
+              props.onFontFamily(e.target.value);
+            },
+            sx: { minWidth: 130, height: 32 },
+            children: FONT_FAMILIES.map((f) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.MenuItem, { value: f, style: { fontFamily: f }, children: f }, f))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Diminuir fonte", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => changeFontSize(fontSize - 1), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Remove.default, { fontSize: "small" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_material.Typography,
+            {
+              component: "span",
+              sx: {
+                minWidth: 24,
+                textAlign: "center",
+                fontVariantNumeric: "tabular-nums"
+              },
+              children: fontSize
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Aumentar fonte", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => changeFontSize(fontSize + 1), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Add.default, { fontSize: "small" }) }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Negrito", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("bold"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatBold.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "It\xE1lico", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("italic"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatItalic.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Sublinhado", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("underline"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatUnderlined.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Tachado", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("strikeThrough"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StrikethroughS.default, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Cor do texto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => colorInputRef.current?.click(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatColorText.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            ref: colorInputRef,
+            type: "color",
+            "aria-label": "Cor do texto",
+            style: { display: "none" },
+            onChange: (e) => props.onColor(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Realce", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.IconButton,
+          {
+            size: "small",
+            onClick: () => highlightInputRef.current?.click(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BorderColor.default, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            ref: highlightInputRef,
+            type: "color",
+            "aria-label": "Cor de realce",
+            style: { display: "none" },
+            onChange: (e) => props.onHighlight(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Inserir link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: props.onLink, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Link.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Sobrescrito", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("superscript"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Superscript.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Subscrito", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("subscript"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Subscript.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Alinhar \xE0 esquerda", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("justifyLeft"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatAlignLeft.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Centralizar", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("justifyCenter"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatAlignCenter.default, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Alinhar \xE0 direita", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("justifyRight"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatAlignRight.default, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Justificar", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("justifyFull"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatAlignJustify.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Lista com marcadores", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("insertUnorderedList"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatListBulleted.default, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Lista numerada", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("insertOrderedList"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatListNumbered.default, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Diminuir recuo", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("outdent"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatIndentDecrease.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Aumentar recuo", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: () => props.onCommand("indent"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatIndentIncrease.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Inserir imagem", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", onClick: props.onInsertImage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Image.default, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Limpar formata\xE7\xE3o", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("removeFormat"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormatClear.default, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.Button,
+          {
+            size: "small",
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataObject.default, {}),
+            onClick: (e) => setVarAnchor(e.currentTarget),
+            sx: { ml: 0.5, textTransform: "none" },
+            children: "Vari\xE1vel"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_material.Menu,
+          {
+            anchorEl: varAnchor,
+            open: Boolean(varAnchor),
+            onClose: () => setVarAnchor(null),
+            children: [
+              props.variables.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_material.MenuItem,
+                {
+                  onClick: () => {
+                    props.onInsertVariable(name);
+                    setVarAnchor(null);
+                  },
+                  children: name
+                },
+                name
+              )),
+              props.variables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_material.MenuItem,
+                {
+                  onClick: () => {
+                    props.onInsertPageField("pageNumber");
+                    setVarAnchor(null);
+                  },
+                  children: "N\xBA da p\xE1gina"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_material.MenuItem,
+                {
+                  onClick: () => {
+                    props.onInsertPageField("totalPages");
+                    setVarAnchor(null);
+                  },
+                  children: "Total de p\xE1ginas"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var Toolbar_default = Toolbar;
+
+// src/ZoomControl.tsx
+var import_material2 = require("@mui/material");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ZOOM_LEVELS = [0.5, 0.75, 0.9, 1, 1.25, 1.5, 2];
+function ZoomControl(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material2.Select,
+    {
+      size: "small",
+      value: props.zoom,
+      onChange: (e) => props.onChange(Number(e.target.value)),
+      "aria-label": "Zoom",
+      sx: { height: 32, minWidth: 88 },
+      children: ZOOM_LEVELS.map((z) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.MenuItem, { value: z, children: [
+        Math.round(z * 100),
+        "%"
+      ] }, z))
+    }
+  );
+}
+var ZoomControl_default = ZoomControl;
+
+// src/Ruler.tsx
+var import_react2 = require("react");
+var import_material3 = require("@mui/material");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RULER_HEIGHT = 24;
+function Ruler(props) {
+  const { pageWidthPx, zoom, margins, indent } = props;
+  const barRef = (0, import_react2.useRef)(null);
+  const scaledWidth = pageWidthPx * zoom;
+  const screenPxToTwips = (0, import_react2.useCallback)(
+    (px) => pxToTwips(px / zoom),
+    [zoom]
+  );
+  const leftMarginPx = twipsToPx(margins.left) * zoom;
+  const rightMarginFromLeftPx = (pageWidthPx - twipsToPx(margins.right)) * zoom;
+  const firstLinePx = (twipsToPx(margins.left) + twipsToPx(indent.firstLine)) * zoom;
+  const leftIndentPx = (twipsToPx(margins.left) + twipsToPx(indent.left)) * zoom;
+  const rightIndentPx = (pageWidthPx - twipsToPx(margins.right) - twipsToPx(indent.right)) * zoom;
+  const startDrag = (kind) => (e) => {
+    e.preventDefault();
+    const bar = barRef.current;
+    if (!bar) return;
+    const onMove = (ev) => {
+      const rect = bar.getBoundingClientRect();
+      const x = Math.min(Math.max(ev.clientX - rect.left, 0), scaledWidth);
+      const twipsFromLeft = screenPxToTwips(x);
+      const pageWidthTwips = pxToTwips(pageWidthPx);
+      switch (kind) {
+        case "leftMargin": {
+          const left = Math.min(twipsFromLeft, pageWidthTwips - margins.right - 720);
+          props.onMarginsChange({ ...margins, left: Math.max(0, left) });
+          break;
+        }
+        case "rightMargin": {
+          const right = Math.min(
+            pageWidthTwips - twipsFromLeft,
+            pageWidthTwips - margins.left - 720
+          );
+          props.onMarginsChange({ ...margins, right: Math.max(0, right) });
+          break;
+        }
+        case "firstLineIndent": {
+          props.onIndentChange({
+            ...indent,
+            firstLine: Math.max(0, twipsFromLeft - margins.left)
+          });
+          break;
+        }
+        case "leftIndent": {
+          props.onIndentChange({
+            ...indent,
+            left: Math.max(0, twipsFromLeft - margins.left)
+          });
+          break;
+        }
+        case "rightIndent": {
+          props.onIndentChange({
+            ...indent,
+            right: Math.max(0, pageWidthTwips - margins.right - twipsFromLeft)
+          });
+          break;
+        }
+      }
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  const ticks = [];
+  const inches = Math.floor(pageWidthPx / PX_PER_INCH);
+  for (let i = 0; i <= inches; i++) {
+    ticks.push(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_material3.Box,
+        {
+          sx: {
+            position: "absolute",
+            left: i * PX_PER_INCH * zoom,
+            top: 0,
+            bottom: 0,
+            borderLeft: "1px solid",
+            borderColor: "text.disabled",
+            fontSize: 9,
+            color: "text.secondary",
+            pl: "2px"
+          },
+          children: i
+        },
+        i
+      )
+    );
+  }
+  const marginHandleSx = {
+    position: "absolute",
+    top: 0,
+    width: 8,
+    height: RULER_HEIGHT,
+    cursor: "ew-resize",
+    bgcolor: "primary.main",
+    opacity: 0.6,
+    transform: "translateX(-50%)",
+    "&:hover": { opacity: 1 }
+  };
+  const indentHandleSx = {
+    position: "absolute",
+    width: 0,
+    height: 0,
+    cursor: "ew-resize",
+    borderLeft: "6px solid transparent",
+    borderRight: "6px solid transparent",
+    transform: "translateX(-50%)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_material3.Box,
+    {
+      ref: barRef,
+      sx: {
+        position: "relative",
+        height: RULER_HEIGHT,
+        width: scaledWidth,
+        bgcolor: "grey.100",
+        borderBottom: 1,
+        borderColor: "divider",
+        userSelect: "none",
+        mx: "auto"
+      },
+      role: "presentation",
+      "aria-label": "R\xE9gua",
+      children: [
+        ticks,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: leftMarginPx,
+              bgcolor: "grey.300",
+              opacity: 0.5
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              position: "absolute",
+              left: rightMarginFromLeftPx,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              bgcolor: "grey.300",
+              opacity: 0.5
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material3.Box,
+          {
+            sx: { ...marginHandleSx, left: leftMarginPx },
+            onMouseDown: startDrag("leftMargin"),
+            "aria-label": "Margem esquerda"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material3.Box,
+          {
+            sx: { ...marginHandleSx, left: rightMarginFromLeftPx },
+            onMouseDown: startDrag("rightMargin"),
+            "aria-label": "Margem direita"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              ...indentHandleSx,
+              left: firstLinePx,
+              top: 0,
+              borderTop: "7px solid",
+              borderTopColor: "primary.dark"
+            },
+            onMouseDown: startDrag("firstLineIndent"),
+            "aria-label": "Recuo da primeira linha"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              ...indentHandleSx,
+              left: leftIndentPx,
+              bottom: 0,
+              borderBottom: "7px solid",
+              borderBottomColor: "primary.dark"
+            },
+            onMouseDown: startDrag("leftIndent"),
+            "aria-label": "Recuo \xE0 esquerda"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              ...indentHandleSx,
+              left: rightIndentPx,
+              bottom: 0,
+              borderBottom: "7px solid",
+              borderBottomColor: "primary.dark"
+            },
+            onMouseDown: startDrag("rightIndent"),
+            "aria-label": "Recuo \xE0 direita"
+          }
+        )
+      ]
+    }
+  );
+}
+var Ruler_default = Ruler;
+
+// src/DocxEditor.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PAGE_WIDTH_PX = 794;
+var PAGE_HEIGHT_PX = 1123;
+var PAGE_GAP_PX = 24;
+var HEADER_FOOTER_DISTANCE_PX = 48;
+var EMPTY_INDENT = { firstLine: 0, left: 0, right: 0 };
+function EditableRegion(props) {
+  const setRef = (el) => {
+    if (el && el.dataset.initialized !== "1") {
+      el.innerHTML = props.html;
+      el.dataset.initialized = "1";
+    }
+    props.onRegister(el);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_material4.Box,
+    {
+      component: "div",
+      ref: setRef,
+      contentEditable: props.editable,
+      suppressContentEditableWarning: true,
+      onFocus: (e) => props.onFocus(e.currentTarget),
+      onBlur: props.onBlur,
+      onInput: props.onInput,
+      "aria-label": props.ariaLabel,
+      "data-placeholder": props.placeholder,
+      sx: [
+        {
+          outline: "none",
+          position: "relative",
+          minHeight: 24,
+          "& p": { m: 0, mb: 1 },
+          "&:empty::before": {
+            content: "attr(data-placeholder)",
+            color: "text.disabled"
+          }
+        },
+        ...Array.isArray(props.sx) ? props.sx : props.sx ? [props.sx] : []
+      ]
+    }
+  );
+}
+function currentBlock(region) {
+  if (!region) return null;
+  const selection = window.getSelection();
+  let node = selection && selection.anchorNode ? selection.anchorNode : null;
+  if (!node || !region.contains(node)) {
+    return region.firstElementChild ?? region;
+  }
+  let el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+  while (el && el !== region) {
+    if (/^(P|H1|H2|H3|H4|LI|DIV)$/.test(el.tagName) && el.parentElement === region) {
+      return el;
+    }
+    if (el.parentElement === region) return el;
+    el = el.parentElement;
+  }
+  return region.firstElementChild ?? region;
+}
+var mirrorSx = {
+  pointerEvents: "none",
+  "& p": { m: 0, mb: 1 }
+};
+function withPagePreview(html, pageNumber, totalPages) {
+  return html.split(PAGE_NUMBER_TOKEN).join(String(pageNumber)).split(TOTAL_PAGES_TOKEN).join(String(totalPages));
+}
+var RESIZE_CORNERS = ["nw", "ne", "sw", "se"];
+var DocxEditor = (0, import_react3.forwardRef)(
+  function DocxEditor2(props, ref) {
+    const {
+      documentBuffer,
+      document: documentModel,
+      mode,
+      showToolbar = false,
+      showRuler = false,
+      showZoomControl = false
+    } = props;
+    const editable = mode === "editing";
+    const [model, setModel] = (0, import_react3.useState)(
+      () => documentModel ?? { body: "" }
+    );
+    const [docVersion, setDocVersion] = (0, import_react3.useState)(0);
+    const [loading, setLoading] = (0, import_react3.useState)(false);
+    const [zoom, setZoom] = (0, import_react3.useState)(1);
+    const [margins, setMargins] = (0, import_react3.useState)(DEFAULT_MARGINS);
+    const [indent, setIndent] = (0, import_react3.useState)(EMPTY_INDENT);
+    const [pageCount, setPageCount] = (0, import_react3.useState)(1);
+    const [mirror, setMirror] = (0, import_react3.useState)(() => ({
+      header: documentModel?.header ?? "",
+      footer: documentModel?.footer ?? ""
+    }));
+    const [chromeHeights, setChromeHeights] = (0, import_react3.useState)({ header: 0, footer: 0 });
+    const [focusedRegion, setFocusedRegion] = (0, import_react3.useState)(null);
+    const [selectedImg, setSelectedImg] = (0, import_react3.useState)(null);
+    const [frame, setFrame] = (0, import_react3.useState)(null);
+    const regionEls = (0, import_react3.useRef)({});
+    const activeRegion = (0, import_react3.useRef)(null);
+    const imageInputRef = (0, import_react3.useRef)(null);
+    const rafId = (0, import_react3.useRef)(null);
+    const pagesColumnRef = (0, import_react3.useRef)(null);
+    const padTop = twipsToPx(margins.top);
+    const padRight = twipsToPx(margins.right);
+    const padBottom = twipsToPx(margins.bottom);
+    const padLeft = twipsToPx(margins.left);
+    const bodyTopPx = Math.max(
+      padTop,
+      HEADER_FOOTER_DISTANCE_PX + chromeHeights.header
+    );
+    const bodyBottomPx = Math.max(
+      padBottom,
+      HEADER_FOOTER_DISTANCE_PX + chromeHeights.footer
+    );
+    const recomputePagination = (0, import_react3.useCallback)(() => {
+      const body = regionEls.current.body;
+      if (!body) return;
+      const headerH = regionEls.current.header?.offsetHeight ?? 0;
+      const footerH = regionEls.current.footer?.offsetHeight ?? 0;
+      setChromeHeights(
+        (prev) => prev.header === headerH && prev.footer === footerH ? prev : { header: headerH, footer: footerH }
+      );
+      const top = Math.max(
+        twipsToPx(margins.top),
+        HEADER_FOOTER_DISTANCE_PX + headerH
+      );
+      const bottom = Math.max(
+        twipsToPx(margins.bottom),
+        HEADER_FOOTER_DISTANCE_PX + footerH
+      );
+      const usableHeightPx = Math.max(PAGE_HEIGHT_PX - top - bottom, 1);
+      const interPageGapPx = bottom + PAGE_GAP_PX + top;
+      let spacerAccum = 0;
+      const blocks = [];
+      const blockEls = [];
+      Array.from(body.children).forEach((child) => {
+        const el = child;
+        if (el.hasAttribute(PAGE_SPACER_ATTR)) {
+          spacerAccum += el.offsetHeight;
+          return;
+        }
+        blocks.push({ top: el.offsetTop - spacerAccum, height: el.offsetHeight });
+        blockEls.push(el);
+      });
+      const layout = computePageLayout(blocks, { usableHeightPx, interPageGapPx });
+      body.querySelectorAll(`[${PAGE_SPACER_ATTR}]`).forEach((node) => node.remove());
+      for (const spacer of layout.spacers) {
+        const target = blockEls[spacer.beforeBlockIndex];
+        if (target) body.insertBefore(createSpacerElement(spacer.heightPx), target);
+      }
+      setPageCount(layout.pageCount);
+    }, [margins]);
+    const schedulePagination = (0, import_react3.useCallback)(() => {
+      if (rafId.current !== null) cancelAnimationFrame(rafId.current);
+      rafId.current = requestAnimationFrame(() => {
+        rafId.current = null;
+        recomputePagination();
+      });
+    }, [recomputePagination]);
+    const handleContentChanged = (0, import_react3.useCallback)(() => {
+      const header = regionEls.current.header?.innerHTML ?? "";
+      const footer = regionEls.current.footer?.innerHTML ?? "";
+      setMirror(
+        (prev) => prev.header === header && prev.footer === footer ? prev : { header, footer }
+      );
+      schedulePagination();
+    }, [schedulePagination]);
+    (0, import_react3.useEffect)(() => {
+      if (!documentBuffer) return;
+      let cancelled = false;
+      setLoading(true);
+      bufferToModel(documentBuffer).then((imported) => {
+        if (cancelled) return;
+        setModel((prev) => ({ ...imported, variables: prev.variables }));
+        setMirror({
+          header: imported.header ?? "",
+          footer: imported.footer ?? ""
+        });
+        setDocVersion((v) => v + 1);
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [documentBuffer]);
+    (0, import_react3.useEffect)(() => {
+      recomputePagination();
+    }, [recomputePagination, docVersion, mirror]);
+    (0, import_react3.useEffect)(() => {
+      const body = regionEls.current.body;
+      if (!body) return;
+      const onLoad = () => schedulePagination();
+      body.addEventListener("load", onLoad, true);
+      return () => body.removeEventListener("load", onLoad, true);
+    }, [schedulePagination, docVersion]);
+    (0, import_react3.useEffect)(
+      () => () => {
+        if (rafId.current !== null) cancelAnimationFrame(rafId.current);
+      },
+      []
+    );
+    const buildModel = (0, import_react3.useCallback)(() => {
+      const els = regionEls.current;
+      return {
+        header: els.header ? els.header.innerHTML : model.header,
+        body: els.body ? stripPageSpacers(els.body.innerHTML) : model.body,
+        footer: els.footer ? els.footer.innerHTML : model.footer,
+        variables: model.variables
+      };
+    }, [model]);
+    (0, import_react3.useImperativeHandle)(
+      ref,
+      () => ({
+        save: () => modelToDocx(buildModel(), { margins }),
+        getModel: () => buildModel()
+      }),
+      [buildModel, margins]
+    );
+    const focusActive = () => {
+      const el = activeRegion.current ?? regionEls.current.body ?? null;
+      el?.focus();
+      return el;
+    };
+    const handleCommand = (command, value) => {
+      focusActive();
+      execFormat(command, value);
+      handleContentChanged();
+    };
+    const handleLink = () => {
+      const url = window.prompt("URL do link:");
+      if (!url) return;
+      focusActive();
+      execFormat("createLink", url);
+      handleContentChanged();
+    };
+    const handleInsertImage = () => imageInputRef.current?.click();
+    const onImagePicked = (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = () => {
+        focusActive();
+        execFormat("insertImage", String(reader.result));
+        handleContentChanged();
+      };
+      reader.readAsDataURL(file);
+      e.target.value = "";
+    };
+    const handleInsertVariable = (name) => {
+      const el = activeRegion.current ?? regionEls.current.body ?? null;
+      if (el) {
+        insertTextIntoRegion(el, `{{${name}}}`);
+        handleContentChanged();
+      }
+    };
+    const handleInsertPageField = (field) => {
+      const el = activeRegion.current ?? regionEls.current.footer ?? null;
+      if (el) {
+        insertTextIntoRegion(
+          el,
+          field === "pageNumber" ? PAGE_NUMBER_TOKEN : TOTAL_PAGES_TOKEN
+        );
+        handleContentChanged();
+      }
+    };
+    const applyIndent = (next) => {
+      setIndent(next);
+      const block = currentBlock(activeRegion.current ?? regionEls.current.body ?? null);
+      if (block) {
+        block.style.textIndent = `${twipsToPx(next.firstLine)}px`;
+        block.style.marginLeft = `${twipsToPx(next.left)}px`;
+        block.style.marginRight = `${twipsToPx(next.right)}px`;
+      }
+      schedulePagination();
+    };
+    const registerRegion = (key) => (el) => {
+      regionEls.current[key] = el;
+    };
+    const onRegionFocus = (el) => {
+      activeRegion.current = el;
+      const els = regionEls.current;
+      setFocusedRegion(
+        el === els.header ? "header" : el === els.footer ? "footer" : "body"
+      );
+    };
+    const onRegionBlur = () => setFocusedRegion(null);
+    const editingChrome = focusedRegion === "header" || focusedRegion === "footer";
+    const updateFrame = (0, import_react3.useCallback)(() => {
+      const img = selectedImg;
+      const column = pagesColumnRef.current;
+      if (!img || !img.isConnected || !column) {
+        setFrame(null);
+        return;
+      }
+      const imgRect = img.getBoundingClientRect();
+      const colRect = column.getBoundingClientRect();
+      setFrame({
+        top: (imgRect.top - colRect.top) / zoom,
+        left: (imgRect.left - colRect.left) / zoom,
+        width: imgRect.width / zoom,
+        height: imgRect.height / zoom
+      });
+    }, [selectedImg, zoom]);
+    const updateFrameRef = (0, import_react3.useRef)(updateFrame);
+    (0, import_react3.useEffect)(() => {
+      updateFrameRef.current = updateFrame;
+    });
+    (0, import_react3.useEffect)(() => {
+      updateFrame();
+    }, [updateFrame, pageCount, margins, mirror]);
+    (0, import_react3.useEffect)(() => {
+      setSelectedImg(null);
+    }, [docVersion]);
+    const handleColumnClick = (e) => {
+      if (!editable) return;
+      const target = e.target;
+      if (target instanceof HTMLImageElement && target.closest("[contenteditable]")) {
+        setSelectedImg(target);
+      } else {
+        setSelectedImg(null);
+      }
+    };
+    const startResize = (corner) => (e) => {
+      const img = selectedImg;
+      if (!img) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const startX = e.clientX;
+      const startWidth = img.offsetWidth;
+      const region = img.closest("[contenteditable]");
+      const maxWidth = region ? region.clientWidth : PAGE_WIDTH_PX;
+      const sign = corner === "ne" || corner === "se" ? 1 : -1;
+      const onMove = (ev) => {
+        const dx = (ev.clientX - startX) / zoom * sign;
+        const next = Math.round(Math.min(maxWidth, Math.max(20, startWidth + dx)));
+        img.style.width = `${next}px`;
+        img.style.height = "auto";
+        updateFrameRef.current();
+      };
+      const onUp = () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        img.style.height = `${img.offsetHeight}px`;
+        handleContentChanged();
+        updateFrameRef.current();
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    };
+    const columnHeight = pageCount * PAGE_HEIGHT_PX + (pageCount - 1) * PAGE_GAP_PX;
+    const usableFirstPagePx = Math.max(
+      PAGE_HEIGHT_PX - bodyTopPx - bodyBottomPx,
+      24
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_material4.Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          bgcolor: "grey.200"
+        },
+        children: [
+          showToolbar && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            import_material4.Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1,
+                flexWrap: "wrap",
+                position: "sticky",
+                top: 0,
+                zIndex: 4
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Box, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  Toolbar_default,
+                  {
+                    variables: model.variables ?? [],
+                    onCommand: handleCommand,
+                    onFontFamily: (f) => {
+                      focusActive();
+                      setFontFamily(f);
+                      handleContentChanged();
+                    },
+                    onFontSize: (pt) => {
+                      const el = focusActive();
+                      if (el) setFontSize(el, pt);
+                      handleContentChanged();
+                    },
+                    onFormatBlock: (tag) => handleCommand("formatBlock", tag),
+                    onColor: (c) => handleCommand("foreColor", c),
+                    onHighlight: (c) => handleCommand("hiliteColor", c),
+                    onLink: handleLink,
+                    onInsertImage: handleInsertImage,
+                    onInsertVariable: handleInsertVariable,
+                    onInsertPageField: handleInsertPageField
+                  }
+                ) }),
+                showZoomControl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Box, { sx: { px: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ZoomControl_default, { zoom, onChange: setZoom }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              ref: imageInputRef,
+              type: "file",
+              accept: "image/*",
+              style: { display: "none" },
+              onChange: onImagePicked
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.Box, { sx: { flex: 1, overflow: "auto", py: 3 }, children: [
+            showRuler && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Box, { sx: { display: "flex", justifyContent: "center", mb: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              Ruler_default,
+              {
+                pageWidthPx: PAGE_WIDTH_PX,
+                zoom,
+                margins,
+                indent,
+                onMarginsChange: setMargins,
+                onIndentChange: applyIndent
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              import_material4.Box,
+              {
+                ref: pagesColumnRef,
+                onClick: handleColumnClick,
+                sx: {
+                  width: PAGE_WIDTH_PX,
+                  height: columnHeight,
+                  transform: `scale(${zoom})`,
+                  transformOrigin: "top center",
+                  mx: "auto",
+                  position: "relative"
+                },
+                children: [
+                  Array.from({ length: pageCount }, (_, page) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    import_material4.Box,
+                    {
+                      "data-page-index": page,
+                      sx: {
+                        position: "absolute",
+                        top: page * (PAGE_HEIGHT_PX + PAGE_GAP_PX),
+                        left: 0,
+                        width: "100%",
+                        height: PAGE_HEIGHT_PX,
+                        bgcolor: "background.paper",
+                        boxShadow: 3,
+                        zIndex: 0
+                      },
+                      children: page > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          import_material4.Box,
+                          {
+                            "aria-hidden": true,
+                            sx: {
+                              ...mirrorSx,
+                              position: "absolute",
+                              top: HEADER_FOOTER_DISTANCE_PX,
+                              left: padLeft,
+                              right: padRight,
+                              zIndex: 2,
+                              opacity: focusedRegion === "body" ? 0.55 : 1,
+                              transition: "opacity 120ms"
+                            },
+                            dangerouslySetInnerHTML: {
+                              __html: withPagePreview(mirror.header, page + 1, pageCount)
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          import_material4.Box,
+                          {
+                            "aria-hidden": true,
+                            sx: {
+                              ...mirrorSx,
+                              position: "absolute",
+                              bottom: HEADER_FOOTER_DISTANCE_PX,
+                              left: padLeft,
+                              right: padRight,
+                              zIndex: 2,
+                              opacity: focusedRegion === "body" ? 0.55 : 1,
+                              transition: "opacity 120ms"
+                            },
+                            dangerouslySetInnerHTML: {
+                              __html: withPagePreview(mirror.footer, page + 1, pageCount)
+                            }
+                          }
+                        )
+                      ] })
+                    },
+                    page
+                  )),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                    import_material4.Box,
+                    {
+                      sx: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: PAGE_HEIGHT_PX,
+                        zIndex: 2,
+                        pointerEvents: "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                          import_material4.Box,
+                          {
+                            sx: {
+                              position: "absolute",
+                              top: HEADER_FOOTER_DISTANCE_PX,
+                              left: padLeft,
+                              right: padRight,
+                              pointerEvents: "auto",
+                              opacity: focusedRegion === "body" ? 0.55 : 1,
+                              transition: "opacity 120ms",
+                              ...focusedRegion === "header" && {
+                                outline: "1px dashed",
+                                outlineColor: "primary.main",
+                                outlineOffset: "4px"
+                              }
+                            },
+                            children: [
+                              focusedRegion === "header" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                import_material4.Chip,
+                                {
+                                  label: "Cabe\xE7alho",
+                                  size: "small",
+                                  color: "primary",
+                                  sx: {
+                                    position: "absolute",
+                                    top: -32,
+                                    left: -4,
+                                    borderRadius: 0.5,
+                                    pointerEvents: "none"
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                EditableRegion,
+                                {
+                                  html: model.header ?? "",
+                                  editable,
+                                  ariaLabel: "Cabe\xE7alho",
+                                  placeholder: "Cabe\xE7alho (opcional)",
+                                  onRegister: registerRegion("header"),
+                                  onFocus: onRegionFocus,
+                                  onBlur: onRegionBlur,
+                                  onInput: handleContentChanged
+                                },
+                                `header-${docVersion}`
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                          import_material4.Box,
+                          {
+                            sx: {
+                              position: "absolute",
+                              bottom: HEADER_FOOTER_DISTANCE_PX,
+                              left: padLeft,
+                              right: padRight,
+                              pointerEvents: "auto",
+                              opacity: focusedRegion === "body" ? 0.55 : 1,
+                              transition: "opacity 120ms",
+                              ...focusedRegion === "footer" && {
+                                outline: "1px dashed",
+                                outlineColor: "primary.main",
+                                outlineOffset: "4px"
+                              }
+                            },
+                            children: [
+                              focusedRegion === "footer" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                import_material4.Chip,
+                                {
+                                  label: "Rodap\xE9",
+                                  size: "small",
+                                  color: "primary",
+                                  sx: {
+                                    position: "absolute",
+                                    bottom: -32,
+                                    left: -4,
+                                    borderRadius: 0.5,
+                                    pointerEvents: "none"
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                EditableRegion,
+                                {
+                                  html: model.footer ?? "",
+                                  editable,
+                                  ariaLabel: "Rodap\xE9",
+                                  placeholder: "Rodap\xE9 (opcional)",
+                                  onRegister: registerRegion("footer"),
+                                  onFocus: onRegionFocus,
+                                  onBlur: onRegionBlur,
+                                  onInput: handleContentChanged
+                                },
+                                `footer-${docVersion}`
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    import_material4.Box,
+                    {
+                      sx: {
+                        position: "absolute",
+                        top: bodyTopPx,
+                        left: padLeft,
+                        width: PAGE_WIDTH_PX - padLeft - padRight,
+                        zIndex: 1,
+                        opacity: editingChrome ? 0.45 : 1,
+                        transition: "opacity 120ms"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        EditableRegion,
+                        {
+                          html: model.body,
+                          editable,
+                          ariaLabel: "Corpo do documento",
+                          placeholder: "Digite o conte\xFAdo do template\u2026",
+                          sx: { minHeight: usableFirstPagePx },
+                          onRegister: registerRegion("body"),
+                          onFocus: onRegionFocus,
+                          onBlur: onRegionBlur,
+                          onInput: handleContentChanged
+                        },
+                        `body-${docVersion}`
+                      )
+                    }
+                  ),
+                  editable && selectedImg && frame && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    import_material4.Box,
+                    {
+                      "data-testid": "image-resize-frame",
+                      sx: {
+                        position: "absolute",
+                        top: frame.top,
+                        left: frame.left,
+                        width: frame.width,
+                        height: frame.height,
+                        border: "1px solid",
+                        borderColor: "primary.main",
+                        zIndex: 3,
+                        pointerEvents: "none"
+                      },
+                      children: RESIZE_CORNERS.map((corner) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        import_material4.Box,
+                        {
+                          "data-testid": "image-resize-handle",
+                          onMouseDown: startResize(corner),
+                          sx: {
+                            position: "absolute",
+                            width: 10,
+                            height: 10,
+                            bgcolor: "primary.main",
+                            border: "1px solid #fff",
+                            pointerEvents: "auto",
+                            cursor: corner === "nw" || corner === "se" ? "nwse-resize" : "nesw-resize",
+                            top: corner.startsWith("n") ? -5 : "auto",
+                            bottom: corner.startsWith("s") ? -5 : "auto",
+                            left: corner.endsWith("w") ? -5 : "auto",
+                            right: corner.endsWith("e") ? -5 : "auto"
+                          }
+                        },
+                        corner
+                      ))
+                    }
+                  ),
+                  loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    import_material4.Box,
+                    {
+                      sx: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        bgcolor: "rgba(255,255,255,0.6)",
+                        zIndex: 3
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.CircularProgress, {})
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+var DocxEditor_default = DocxEditor;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DocxEditor
+});
+//# sourceMappingURL=index.js.map