@sofereditor/react 0.7.0 → 0.10.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "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)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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
@@ -23,6 +33,7 @@ __export(index_exports, {
   A4_PAGE: () => A4_PAGE,
   Editor: () => Editor,
   EditorProvider: () => EditorProvider,
+  FormulaDialog: () => FormulaDialog,
   ImageCaptionDialog: () => ImageCaptionDialog,
   LinkDialog: () => LinkDialog,
   NodeView: () => NodeView,
@@ -54,8 +65,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Editor.tsx
-var import_react14 = require("react");
-var import_core9 = require("@sofereditor/core");
+var import_react15 = require("react");
+var import_core10 = require("@sofereditor/core");
 
 // src/dom-bridge.ts
 function findContainingBlockElement(node, root) {
@@ -128,6 +139,11 @@ function isWrapAnchorImg(n) {
 function isPhantomEmbed(n) {
   return n.nodeType === Node.ELEMENT_NODE && n.dataset.embedPhantom === "true";
 }
+function isCellLineBoundary(n) {
+  if (n.nodeType !== Node.ELEMENT_NODE) return false;
+  const line = n.dataset.cellLine;
+  return line != null && Number(line) > 0;
+}
 function indexInParent(n) {
   const parent = n.parentNode;
   if (!parent) return 0;
@@ -155,6 +171,7 @@ function textOffsetWithin(container, node, offsetInNode) {
   let done = false;
   function visit(n) {
     if (done) return;
+    if (isCellLineBoundary(n)) offset += 1;
     if (n === target) {
       if (n.nodeType === Node.TEXT_NODE) {
         offset += targetOff;
@@ -255,6 +272,7 @@ function locatePoint(root, pos) {
   let remaining = Math.max(0, pos.offset - containerStart);
   let result = null;
   let lastImg = null;
+  let lastBoundary = null;
   let lastText = null;
   function visit(n) {
     if (result) return;
@@ -266,6 +284,7 @@ function locatePoint(root, pos) {
       }
       remaining -= len;
       lastImg = null;
+      lastBoundary = null;
       lastText = n;
       return;
     }
@@ -273,6 +292,25 @@ function locatePoint(root, pos) {
     const el = n;
     if (isRejectedSubtree(el, container)) return;
     if (isImgEmbed(el) && isWrapAnchorImg(el)) return;
+    if (isCellLineBoundary(el)) {
+      if (remaining === 0) {
+        if (lastImg) {
+          const parent = lastImg.parentNode;
+          if (parent) {
+            result = { node: parent, offset: indexInParent(lastImg) + 1 };
+            return;
+          }
+        }
+        const prevLine = lastBoundary ?? el.previousElementSibling;
+        if (prevLine) {
+          result = { node: prevLine, offset: 0 };
+          return;
+        }
+      }
+      remaining -= 1;
+      lastBoundary = el;
+      lastImg = null;
+    }
     if (isImgEmbed(el) || isPhantomEmbed(el)) {
       if (remaining === 0) {
         const parent = el.parentNode;
@@ -283,6 +321,7 @@ function locatePoint(root, pos) {
       }
       remaining -= 1;
       lastImg = el;
+      lastBoundary = null;
       return;
     }
     for (const child of Array.from(el.childNodes)) {
@@ -292,7 +331,10 @@ function locatePoint(root, pos) {
   }
   visit(container);
   if (result) return result;
-  if (lastImg && remaining === 0) {
+  if (lastBoundary) {
+    return { node: lastBoundary, offset: 0 };
+  }
+  if (lastImg) {
     const parent = lastImg.parentNode;
     if (parent) return { node: parent, offset: indexInParent(lastImg) + 1 };
   }
@@ -1293,7 +1335,7 @@ function LinkHoverTooltip({ href, rect }) {
 }
 
 // src/EditorContext.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/LinkDialog.tsx
 var import_react2 = require("react");
@@ -1822,19 +1864,380 @@ function ImageCaptionDialog() {
   );
 }
 
-// src/EditorContext.tsx
+// src/FormulaDialog.tsx
+var import_react5 = require("react");
+
+// src/formulaSnippet.ts
+var PALETA = [
+  {
+    nome: "Estruturas",
+    colunas: 4,
+    itens: [
+      { label: "Fra\xE7\xE3o", snippet: "\\frac{}{}" },
+      { label: "Expoente", snippet: "^{}" },
+      { label: "\xCDndice", snippet: "_{}" },
+      { label: "Raiz", snippet: "\\sqrt{}" },
+      { label: "Raiz n-\xE9sima", snippet: "\\sqrt[{}]{}" },
+      { label: "Somat\xF3rio", snippet: "\\sum_{}^{}" },
+      { label: "Produt\xF3rio", snippet: "\\prod_{}^{}" },
+      { label: "Integral", snippet: "\\int_{}^{}" },
+      { label: "Limite", snippet: "\\lim_{{} \\to {}}" },
+      { label: "Derivada", snippet: "\\frac{d}{d{}}" },
+      {
+        label: "Matriz 2\xD72",
+        snippet: "\\begin{pmatrix} {} & {} \\\\ {} & {} \\end{pmatrix}"
+      },
+      { label: "Sistema", snippet: "\\begin{cases} {} \\\\  \\end{cases}" },
+      { label: "Par\xEAnteses", snippet: "\\left({}\\right)" },
+      { label: "Binomial", snippet: "\\binom{}{}" },
+      { label: "M\xF3dulo", snippet: "\\left|{}\\right|" }
+    ]
+  },
+  {
+    nome: "S\xEDmbolos",
+    colunas: 6,
+    itens: [
+      { label: "\xB1", snippet: "\\pm", titulo: "mais ou menos" },
+      { label: "\xD7", snippet: "\\times", titulo: "multiplica\xE7\xE3o" },
+      { label: "\xF7", snippet: "\\div", titulo: "divis\xE3o" },
+      { label: "\xB7", snippet: "\\cdot", titulo: "multiplica\xE7\xE3o (ponto)" },
+      { label: "\u221E", snippet: "\\infty", titulo: "infinito" },
+      { label: "\xB0", snippet: "^\\circ", titulo: "grau" },
+      { label: "%", snippet: "\\%", titulo: "por cento" },
+      { label: ",", snippet: "{,}", titulo: "v\xEDrgula decimal" }
+    ]
+  },
+  {
+    nome: "Rela\xE7\xF5es",
+    colunas: 6,
+    itens: [
+      { label: "\u2260", snippet: "\\neq", titulo: "diferente de" },
+      { label: "\u2248", snippet: "\\approx", titulo: "aproximadamente" },
+      { label: "\u2261", snippet: "\\equiv", titulo: "id\xEAntico a" },
+      { label: "\u2264", snippet: "\\leq", titulo: "menor ou igual a" },
+      { label: "\u2265", snippet: "\\geq", titulo: "maior ou igual a" },
+      { label: "\u221D", snippet: "\\propto", titulo: "proporcional a" },
+      { label: "\u22A5", snippet: "\\perp", titulo: "perpendicular a" },
+      { label: "\u2225", snippet: "\\parallel", titulo: "paralelo a" },
+      { label: "\u2245", snippet: "\\cong", titulo: "congruente a" },
+      { label: "\u223C", snippet: "\\sim", titulo: "semelhante a" }
+    ]
+  },
+  {
+    nome: "Gregas",
+    colunas: 6,
+    itens: [
+      { label: "\u03B1", snippet: "\\alpha", titulo: "alfa" },
+      { label: "\u03B2", snippet: "\\beta", titulo: "beta" },
+      { label: "\u03B3", snippet: "\\gamma", titulo: "gama" },
+      { label: "\u03B4", snippet: "\\delta", titulo: "delta" },
+      { label: "\u03B5", snippet: "\\varepsilon", titulo: "\xE9psilon" },
+      { label: "\u03B8", snippet: "\\theta", titulo: "teta" },
+      { label: "\u03BB", snippet: "\\lambda", titulo: "lambda" },
+      { label: "\u03BC", snippet: "\\mu", titulo: "mi" },
+      { label: "\u03C0", snippet: "\\pi", titulo: "pi" },
+      { label: "\u03C1", snippet: "\\rho", titulo: "r\xF4" },
+      { label: "\u03C3", snippet: "\\sigma", titulo: "sigma" },
+      { label: "\u03C6", snippet: "\\varphi", titulo: "fi" },
+      { label: "\u03C9", snippet: "\\omega", titulo: "\xF4mega" },
+      { label: "\u0394", snippet: "\\Delta", titulo: "delta mai\xFAsculo" },
+      {
+        label: "\u03A3",
+        snippet: "\\Sigma",
+        titulo: "sigma mai\xFAsculo \u2014 letra grega; para somat\xF3rio use Estruturas"
+      },
+      {
+        label: "\u03A0",
+        snippet: "\\Pi",
+        titulo: "pi mai\xFAsculo \u2014 letra grega; para produt\xF3rio use Estruturas"
+      },
+      { label: "\u03A9", snippet: "\\Omega", titulo: "\xF4mega mai\xFAsculo" },
+      { label: "\u03A6", snippet: "\\Phi", titulo: "fi mai\xFAsculo" }
+    ]
+  },
+  {
+    nome: "Conjuntos",
+    colunas: 6,
+    itens: [
+      { label: "\u2208", snippet: "\\in", titulo: "pertence a" },
+      { label: "\u2209", snippet: "\\notin", titulo: "n\xE3o pertence a" },
+      { label: "\u2282", snippet: "\\subset", titulo: "contido em" },
+      { label: "\u2286", snippet: "\\subseteq", titulo: "contido ou igual a" },
+      { label: "\u222A", snippet: "\\cup", titulo: "uni\xE3o" },
+      { label: "\u2229", snippet: "\\cap", titulo: "interse\xE7\xE3o" },
+      { label: "\u2205", snippet: "\\varnothing", titulo: "conjunto vazio" },
+      { label: "\u2115", snippet: "\\mathbb{N}", titulo: "conjunto dos naturais" },
+      { label: "\u2124", snippet: "\\mathbb{Z}", titulo: "conjunto dos inteiros" },
+      { label: "\u211A", snippet: "\\mathbb{Q}", titulo: "conjunto dos racionais" },
+      { label: "\u211D", snippet: "\\mathbb{R}", titulo: "conjunto dos reais" },
+      { label: "\u2102", snippet: "\\mathbb{C}", titulo: "conjunto dos complexos" },
+      { label: "\u2200", snippet: "\\forall", titulo: "para todo" },
+      { label: "\u2203", snippet: "\\exists", titulo: "existe" },
+      { label: "{ }", snippet: "\\{{}\\}", titulo: "chaves de conjunto" }
+    ]
+  },
+  {
+    nome: "Fun\xE7\xF5es",
+    colunas: 6,
+    itens: [
+      { label: "sen", snippet: "\\operatorname{sen}", titulo: "seno" },
+      { label: "cos", snippet: "\\cos", titulo: "cosseno" },
+      { label: "tg", snippet: "\\operatorname{tg}", titulo: "tangente" },
+      { label: "cotg", snippet: "\\operatorname{cotg}", titulo: "cotangente" },
+      { label: "log", snippet: "\\log_{}", titulo: "logaritmo" },
+      { label: "ln", snippet: "\\ln", titulo: "logaritmo natural" },
+      { label: "exp", snippet: "\\exp", titulo: "exponencial" }
+    ]
+  },
+  {
+    nome: "Setas",
+    colunas: 6,
+    itens: [
+      { label: "\u2192", snippet: "\\to", titulo: "tende a / vai para" },
+      { label: "\u2190", snippet: "\\leftarrow", titulo: "vem de / sentido inverso" },
+      { label: "\u21D2", snippet: "\\Rightarrow", titulo: "implica em" },
+      { label: "\u21D4", snippet: "\\Leftrightarrow", titulo: "se e somente se" },
+      { label: "\u21CC", snippet: "\\rightleftharpoons", titulo: "equil\xEDbrio qu\xEDmico" },
+      { label: "vetor AB", snippet: "\\overrightarrow{}", titulo: "vetor entre dois pontos (AB)" },
+      { label: "vetor", snippet: "\\vec{}", titulo: "vetor (f\xEDsica)" },
+      { label: "\u2220", snippet: "\\angle", titulo: "\xE2ngulo" },
+      { label: "\u25B3", snippet: "\\triangle", titulo: "tri\xE2ngulo" }
+    ]
+  }
+];
+function paraMathlive(snippet) {
+  return snippet.replaceAll("{}", "{#?}");
+}
+function paraMarkup(snippet) {
+  return snippet.replaceAll("{}", "{\u25A1}");
+}
+function conteudoDoBotao(markup, snippet, label) {
+  if (!markup) return { children: label };
+  return { dangerouslySetInnerHTML: { __html: markup(paraMarkup(snippet)) } };
+}
+
+// src/formulaGuarda.ts
+var PLACEHOLDER = "\\placeholder{}";
+var GRUPO_VAZIO = /\{\s*\}/;
+var CELULA_VAZIA = /(?:\\begin\{[a-zA-Z]+\*?\}|&|\\\\)\s*(?:&|\\\\|\\end\{)/;
+function podeInserir(latex, preview) {
+  if (motivoBloqueio(latex, preview) !== null) return false;
+  return latex.trim() !== "" && preview?.ok === true;
+}
+function motivoBloqueio(latex, preview) {
+  if (latex.includes(PLACEHOLDER) || GRUPO_VAZIO.test(latex) || CELULA_VAZIA.test(latex)) {
+    return "Preencha os campos em branco da f\xF3rmula.";
+  }
+  if (preview && !preview.ok) return preview.error ?? null;
+  return null;
+}
+
+// src/FormulaDialog.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var EditorContext = (0, import_react5.createContext)(null);
-function EditorProvider({ editor, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(EditorContext.Provider, { value: editor, children: [
+var CIRCUNFLEXO_DE_TECLA_MORTA = /* @__PURE__ */ new Set(["\u02C6", "\u0302"]);
+function FormulaDialog({
+  fontsDirectory
+}) {
+  const { formulaRequest, resolveFormulaRequest } = useEditorContext();
+  const dialogRef = (0, import_react5.useRef)(null);
+  const hostRef = (0, import_react5.useRef)(null);
+  const fieldRef = (0, import_react5.useRef)(null);
+  const [latex, setLatex] = (0, import_react5.useState)("");
+  const [display, setDisplay] = (0, import_react5.useState)(false);
+  const [abaAtiva, setAbaAtiva] = (0, import_react5.useState)(0);
+  (0, import_react5.useEffect)(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (formulaRequest) {
+      setLatex(formulaRequest.initialLatex);
+      setDisplay(formulaRequest.initialDisplay);
+      setAbaAtiva(0);
+      if (!dialog.open) dialog.showModal();
+    } else if (dialog.open) {
+      dialog.close();
+    }
+  }, [formulaRequest]);
+  const rendererRef = (0, import_react5.useRef)(null);
+  const mathfieldCtorRef = (0, import_react5.useRef)(null);
+  const markupRef = (0, import_react5.useRef)(null);
+  const [preview, setPreview] = (0, import_react5.useState)(null);
+  const [carregando, setCarregando] = (0, import_react5.useState)(false);
+  const [erroCarregando, setErroCarregando] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    if (!formulaRequest || rendererRef.current) return;
+    setCarregando(true);
+    setErroCarregando(null);
+    void Promise.all([import("@sofereditor/math"), import("mathlive")]).then(([math, mathlive]) => {
+      rendererRef.current = math.renderLatexToSvg;
+      mathfieldCtorRef.current = mathlive.MathfieldElement;
+      markupRef.current = mathlive.convertLatexToMarkup;
+      mathlive.MathfieldElement.soundsDirectory = null;
+      if (fontsDirectory) {
+        mathlive.MathfieldElement.fontsDirectory = fontsDirectory;
+      }
+      setCarregando(false);
+    }).catch(() => {
+      setCarregando(false);
+      setErroCarregando(
+        "N\xE3o foi poss\xEDvel carregar o editor de f\xF3rmulas. Recarregue a p\xE1gina e tente de novo."
+      );
+    });
+  }, [formulaRequest]);
+  (0, import_react5.useEffect)(() => {
+    const render = rendererRef.current;
+    if (!render || !latex.trim()) {
+      setPreview(null);
+      return;
+    }
+    setPreview(render(latex, display));
+  }, [latex, display, carregando]);
+  const onCircunflexoMorto = (0, import_react5.useCallback)((e) => {
+    const ev = e;
+    if (!ev.data || !CIRCUNFLEXO_DE_TECLA_MORTA.has(ev.data)) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    fieldRef.current?.insert("^{#?}", { focus: true });
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    const Ctor = mathfieldCtorRef.current;
+    const host = hostRef.current;
+    if (!Ctor || !host || !formulaRequest) return;
+    const mf = new Ctor();
+    mf.className = "ed-formula-field";
+    const onInput = () => setLatex(mf.getValue("latex"));
+    mf.addEventListener("input", onInput);
+    mf.addEventListener("beforeinput", onCircunflexoMorto, true);
+    host.appendChild(mf);
+    mf.mathVirtualKeyboardPolicy = "manual";
+    mf.inlineShortcuts = {
+      ...mf.inlineShortcuts,
+      sen: "\\operatorname{sen}",
+      tg: "\\operatorname{tg}",
+      cotg: "\\operatorname{cotg}",
+      // Vírgula decimal. Em modo matemático a vírgula crua é átomo de
+      // pontuação e ganha espaço DEPOIS de si: digitar "3,14" sai impresso
+      // como "3, 14" (medido: 4.4ex contra 4.023ex do agrupado). A paleta
+      // tem um botão `{,}`, mas ninguém clica num botão para uma tecla que
+      // está no teclado — e decimal aparece em toda prova de matemática,
+      // física e química.
+      //
+      // O `after: "digit"` é o que separa os dois usos da vírgula, e foi
+      // verificado no navegador: "3,14" vira `3{,}14` e "f(x,y)" continua
+      // `f\left(x,y\right)`, com a vírgula de lista intacta — que é o
+      // comportamento certo, ali ela É pontuação.
+      ",": { after: "digit", value: "{,}" }
+    };
+    mf.setValue(formulaRequest.initialLatex);
+    setLatex(mf.getValue("latex"));
+    fieldRef.current = mf;
+    queueMicrotask(() => mf.focus());
+    return () => {
+      mf.removeEventListener("input", onInput);
+      mf.removeEventListener("beforeinput", onCircunflexoMorto, true);
+      mf.remove();
+      fieldRef.current = null;
+    };
+  }, [formulaRequest, carregando]);
+  if (!formulaRequest) return null;
+  const markup = markupRef.current;
+  const motivo = motivoBloqueio(latex, preview);
+  const podeSubmeter = podeInserir(latex, preview);
+  const onSubmit = (e) => {
+    e.preventDefault();
+    if (!podeSubmeter) return;
+    resolveFormulaRequest({ latex, display });
+  };
+  const onCancel = () => resolveFormulaRequest(null);
+  const onPaleta = (snippet) => {
+    const mf = fieldRef.current;
+    if (!mf) return;
+    mf.insert(paraMathlive(snippet), { focus: true });
+    setLatex(mf.getValue("latex"));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: "ed-formula-dialog ed-link-dialog",
+      style: DIALOG_CENTER_STYLE,
+      onClose: onCancel,
+      onCancel: (e) => {
+        e.preventDefault();
+        onCancel();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit, className: "ed-formula-form", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ed-formula-abas", role: "tablist", children: PALETA.map((cat, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": i === abaAtiva,
+            className: "ed-formula-aba",
+            onClick: () => setAbaAtiva(i),
+            children: cat.nome
+          },
+          cat.nome
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            className: "ed-formula-paleta",
+            role: "tabpanel",
+            style: { gridTemplateColumns: `repeat(${PALETA[abaAtiva].colunas}, 1fr)` },
+            children: PALETA[abaAtiva].itens.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "ed-formula-paleta-btn",
+                title: p.titulo ?? p.label,
+                "aria-label": p.titulo ?? p.label,
+                onClick: () => onPaleta(p.snippet),
+                ...conteudoDoBotao(markup, p.snippet, p.label)
+              },
+              p.label
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: hostRef, className: "ed-formula-host" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "ed-formula-display", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: display,
+              onChange: (e) => setDisplay(e.target.checked)
+            }
+          ),
+          "F\xF3rmula em bloco (centralizada, limites acima e abaixo)"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ed-formula-preview", "aria-live": "polite", children: carregando ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ed-formula-vazio", children: "Carregando o editor\u2026" }) : erroCarregando ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ed-formula-erro", role: "alert", children: erroCarregando }) : motivo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ed-formula-erro", role: "alert", children: motivo }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ed-formula-acoes", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "submit", disabled: !podeSubmeter, children: "Inserir" })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/EditorContext.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var EditorContext = (0, import_react6.createContext)(null);
+function EditorProvider({
+  editor,
+  children,
+  mathliveFontsDirectory
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(EditorContext.Provider, { value: editor, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LinkDialog, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PageConfigDialog, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImageCaptionDialog, {})
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkDialog, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PageConfigDialog, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ImageCaptionDialog, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormulaDialog, { fontsDirectory: mathliveFontsDirectory })
   ] });
 }
 function useEditorContext() {
-  const ctx = (0, import_react5.useContext)(EditorContext);
+  const ctx = (0, import_react6.useContext)(EditorContext);
   if (!ctx) {
     throw new Error("useEditorContext must be used inside an <EditorProvider>");
   }
@@ -1842,8 +2245,8 @@ function useEditorContext() {
 }
 
 // src/ImageResizeOverlay.tsx
-var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ImageResizeOverlay({
   rootRef,
   blockIndex,
@@ -1854,10 +2257,10 @@ function ImageResizeOverlay({
   onCommitMove,
   onReanchor
 }) {
-  const [rect, setRect] = (0, import_react6.useState)(null);
-  const [isMoving, setIsMoving] = (0, import_react6.useState)(false);
-  const imgRef = (0, import_react6.useRef)(null);
-  const locateImage = (0, import_react6.useCallback)(() => {
+  const [rect, setRect] = (0, import_react7.useState)(null);
+  const [isMoving, setIsMoving] = (0, import_react7.useState)(false);
+  const imgRef = (0, import_react7.useRef)(null);
+  const locateImage = (0, import_react7.useCallback)(() => {
     const root = rootRef.current;
     if (!root) return null;
     let container = null;
@@ -1875,7 +2278,7 @@ function ImageResizeOverlay({
       `img[data-embed="image"][data-embed-offset="${localOffset}"]`
     );
   }, [rootRef, blockIndex, offset, cellIndex]);
-  const measure = (0, import_react6.useCallback)(() => {
+  const measure = (0, import_react7.useCallback)(() => {
     const img = locateImage();
     if (!img) {
       setRect((prev) => prev === null ? prev : null);
@@ -1896,7 +2299,7 @@ function ImageResizeOverlay({
       (prev) => prev && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
     );
   }, [locateImage, rootRef]);
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     measure();
     let cancelled = false;
     let frame = 0;
@@ -1926,7 +2329,7 @@ function ImageResizeOverlay({
     embed.offsetX,
     embed.offsetY
   ]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const onScroll = () => measure();
@@ -1937,7 +2340,7 @@ function ImageResizeOverlay({
       root.removeEventListener("scroll", onScroll);
     };
   }, [measure, rootRef]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (typeof ResizeObserver === "undefined") return;
     const img = locateImage();
     const root = rootRef.current;
@@ -1950,7 +2353,7 @@ function ImageResizeOverlay({
   if (!rect) return null;
   const layout = embed.layout ?? "inline";
   const movable = layout !== "inline" && onCommitMove !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: "ed-image-overlay",
@@ -1961,7 +2364,7 @@ function ImageResizeOverlay({
         // follows the cursor, so the image stays visible while it crosses the
         // page boundary (the real, clipped figure is hidden during the drag).
         // Inline styles only — the package does not ship CSS.
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "img",
           {
             src: embed.src,
@@ -1979,7 +2382,7 @@ function ImageResizeOverlay({
             }
           }
         ),
-        movable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        movable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           MoveHandle,
           {
             layout,
@@ -1997,7 +2400,7 @@ function ImageResizeOverlay({
             onMoveEnd: () => setIsMoving(false)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Handle,
           {
             corner: "nw",
@@ -2008,7 +2411,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Handle,
           {
             corner: "ne",
@@ -2019,7 +2422,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Handle,
           {
             corner: "sw",
@@ -2030,7 +2433,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Handle,
           {
             corner: "se",
@@ -2060,7 +2463,7 @@ function MoveHandle({
   onMoveStart,
   onMoveEnd
 }) {
-  const dragRef = (0, import_react6.useRef)(null);
+  const dragRef = (0, import_react7.useRef)(null);
   const onPointerDown = (e) => {
     if (e.button !== 0) return;
     if (!imgRef.current) return;
@@ -2210,7 +2613,7 @@ function MoveHandle({
       newOffsetY
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       className: "ed-image-move",
@@ -2230,7 +2633,7 @@ function Handle({
   onCommit,
   onLiveChange
 }) {
-  const dragRef = (0, import_react6.useRef)(null);
+  const dragRef = (0, import_react7.useRef)(null);
   const onPointerDown = (e) => {
     if (e.button !== 0) return;
     if (!imgRef.current) return;
@@ -2273,7 +2676,7 @@ function Handle({
     }
     onCommit(Math.round(d.liveW), Math.round(d.liveH));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       className: `ed-image-handle ${corner}`,
@@ -2286,9 +2689,9 @@ function Handle({
 }
 
 // src/RemoteCursorsOverlay.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_core5 = require("@sofereditor/core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_COLOR = "#3b82f6";
 function RemoteCursorsOverlay({
   rootRef,
@@ -2296,9 +2699,9 @@ function RemoteCursorsOverlay({
   awareness,
   revision
 }) {
-  const [views, setViews] = (0, import_react7.useState)([]);
-  const rafRef = (0, import_react7.useRef)(null);
-  const measure = (0, import_react7.useCallback)(() => {
+  const [views, setViews] = (0, import_react8.useState)([]);
+  const rafRef = (0, import_react8.useRef)(null);
+  const measure = (0, import_react8.useCallback)(() => {
     const root = rootRef.current;
     if (!root) {
       setViews((prev) => prev.length === 0 ? prev : []);
@@ -2363,7 +2766,7 @@ function RemoteCursorsOverlay({
     });
     setViews(out);
   }, [rootRef, doc, awareness]);
-  const scheduleMeasure = (0, import_react7.useCallback)(() => {
+  const scheduleMeasure = (0, import_react8.useCallback)(() => {
     if (rafRef.current != null) return;
     const raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(() => cb(0), 16);
     rafRef.current = raf(() => {
@@ -2371,16 +2774,16 @@ function RemoteCursorsOverlay({
       measure();
     });
   }, [measure]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const onChange = () => scheduleMeasure();
     awareness.on("change", onChange);
     scheduleMeasure();
     return () => awareness.off("change", onChange);
   }, [awareness, scheduleMeasure]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     scheduleMeasure();
   }, [revision, scheduleMeasure]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const onScroll = () => scheduleMeasure();
@@ -2402,8 +2805,8 @@ function RemoteCursorsOverlay({
     pointerEvents: "none",
     zIndex: 6
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ed-remote-cursors", "aria-hidden": true, style: layer, children: views.map((v) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-    v.selection.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ed-remote-cursors", "aria-hidden": true, style: layer, children: views.map((v) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+    v.selection.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         style: {
@@ -2419,7 +2822,7 @@ function RemoteCursorsOverlay({
       },
       i
     )),
-    v.caret && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    v.caret && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         style: {
@@ -2430,7 +2833,7 @@ function RemoteCursorsOverlay({
           width: 2,
           background: v.color
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             style: {
@@ -2456,18 +2859,18 @@ function RemoteCursorsOverlay({
 }
 
 // src/NodeView.tsx
-var import_react10 = require("react");
-var import_core7 = require("@sofereditor/core");
+var import_react11 = require("react");
+var import_core8 = require("@sofereditor/core");
 
 // src/renderInline.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_core6 = require("@sofereditor/core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function renderInline(delta, keyPrefix) {
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function renderInline(delta, keyPrefix, baseOffset = 0) {
   if (delta.length === 0 || delta.length === 1 && typeof delta[0].insert === "string" && delta[0].insert === "") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("br", { "data-empty": "true" });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("br", { "data-empty": "true" });
   }
-  let offset = 0;
+  let offset = baseOffset;
   const wrapAnchors = [];
   const body = [];
   for (const op of delta) {
@@ -2475,7 +2878,7 @@ function renderInline(delta, keyPrefix) {
       const text = op.insert;
       if (text.length === 0) continue;
       const key = `${keyPrefix}-${offset}`;
-      body.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.Fragment, { children: wrap(text, op.attributes) }, key));
+      body.push(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react9.Fragment, { children: wrap(text, op.attributes) }, key));
       offset += text.length;
     } else if ((0, import_core6.isImageEmbed)(op.insert)) {
       const key = `${keyPrefix}-${offset}`;
@@ -2483,10 +2886,10 @@ function renderInline(delta, keyPrefix) {
       const commentMarkId = op.attributes?.comment?.markId;
       if (layout === "wrap-left" || layout === "wrap-right") {
         wrapAnchors.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ImageEmbedView, { embed: op.insert, offset, wrapAnchor: true }, `${key}-anchor`)
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageEmbedView, { embed: op.insert, offset, wrapAnchor: true }, `${key}-anchor`)
         );
         body.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "span",
             {
               "data-embed-phantom": "true",
@@ -2498,10 +2901,10 @@ function renderInline(delta, keyPrefix) {
           )
         );
       } else {
-        const imgNode = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ImageEmbedView, { embed: op.insert, offset }, key);
+        const imgNode = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageEmbedView, { embed: op.insert, offset }, key);
         if (commentMarkId) {
           body.push(
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-comment-id": commentMarkId, className: "ed-comment", children: imgNode }, `${key}-cmt`)
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-comment-id": commentMarkId, className: "ed-comment", children: imgNode }, `${key}-cmt`)
           );
         } else {
           body.push(imgNode);
@@ -2512,7 +2915,7 @@ function renderInline(delta, keyPrefix) {
       offset += 1;
     }
   }
-  if (wrapAnchors.length === 0 && body.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("br", { "data-empty": "true" });
+  if (wrapAnchors.length === 0 && body.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("br", { "data-empty": "true" });
   return [...wrapAnchors, ...body];
 }
 var PHANTOM_STYLE = {
@@ -2537,7 +2940,7 @@ function imageEmbedPropsEqual(a, b) {
   // because Y.js stores the embed in its content map and re-exposes it.
   x.src === y.src;
 }
-var ImageEmbedView = (0, import_react8.memo)(ImageEmbedViewImpl, imageEmbedPropsEqual);
+var ImageEmbedView = (0, import_react9.memo)(ImageEmbedViewImpl, imageEmbedPropsEqual);
 function ImageEmbedViewImpl({
   embed,
   offset,
@@ -2587,7 +2990,9 @@ function ImageEmbedViewImpl({
         marginRight: align === "right" ? 0 : "auto"
       } : {
         display: "inline-block",
-        verticalAlign: "text-bottom",
+        // Fórmula inline traz o deslocamento de base que o MathJax mediu;
+        // sem ele a fórmula flutua no topo da linha em vez de sentar nela.
+        verticalAlign: embed.formula?.vAlign ?? "text-bottom",
         width: embed.width
       };
       break;
@@ -2597,7 +3002,7 @@ function ImageEmbedViewImpl({
     height: embed.height,
     display: "block"
   };
-  const img = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const img = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "img",
     {
       src: embed.src,
@@ -2617,7 +3022,7 @@ function ImageEmbedViewImpl({
     }
   );
   const captionAlign = embed.captionAlign ?? "center";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "figure",
     {
       className: "ed-figure",
@@ -2627,7 +3032,7 @@ function ImageEmbedViewImpl({
       style: outerStyle,
       children: [
         img,
-        hasCaption && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        hasCaption && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "figcaption",
           {
             className: "ed-figcaption",
@@ -2644,26 +3049,26 @@ function decorateBlanks(text) {
   const segs = (0, import_core6.splitUnderscoreRuns)(text);
   if (segs.length === 1 && !segs[0].blank) return text;
   return segs.map(
-    (s, i) => s.blank ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-blank": "true", style: import_core6.BLANK_STYLE, children: s.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.Fragment, { children: s.text }, i)
+    (s, i) => s.blank ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-blank": "true", style: import_core6.BLANK_STYLE, children: s.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react9.Fragment, { children: s.text }, i)
   );
 }
 function wrap(text, attrs) {
   let node = decorateBlanks(text);
   if (!attrs) return node;
-  if (attrs.bold) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: node });
-  if (attrs.italic) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("em", { children: node });
-  if (attrs.underline) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("u", { children: node });
-  if (attrs.strike) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { children: node });
+  if (attrs.bold) node = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: node });
+  if (attrs.italic) node = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("em", { children: node });
+  if (attrs.underline) node = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("u", { children: node });
+  if (attrs.strike) node = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("s", { children: node });
   const styleParts = {};
   if (attrs.color) styleParts.color = attrs.color;
   if (attrs.highlight) styleParts.backgroundColor = attrs.highlight;
   if (attrs.fontFamily) styleParts.fontFamily = attrs.fontFamily;
   if (attrs.fontSize) styleParts.fontSize = attrs.fontSize;
   if (Object.keys(styleParts).length > 0) {
-    node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: styleParts, children: node });
+    node = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: styleParts, children: node });
   }
   if (attrs.link?.href) {
-    node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    node = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "a",
       {
         href: attrs.link.href,
@@ -2682,7 +3087,7 @@ function wrap(text, attrs) {
     );
   }
   if (attrs.comment?.markId) {
-    node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-comment-id": attrs.comment.markId, className: "ed-comment", children: node });
+    node = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-comment-id": attrs.comment.markId, className: "ed-comment", children: node });
   }
   return node;
 }
@@ -2726,16 +3131,25 @@ function sliceDelta(delta, start, end) {
 }
 
 // src/TableResizeOverlay.tsx
-var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function TableResizeOverlay({ tableRef, blockIndex, cols }) {
+var import_react10 = require("react");
+var import_core7 = require("@sofereditor/core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function deltaPctDoArrasto(dxPx, larguraTabelaPx) {
+  if (!(larguraTabelaPx > 0)) return 0;
+  return dxPx / larguraTabelaPx * 100;
+}
+function distribuirAltura(base, deltaPx) {
+  if (base.length === 0) return base;
+  const fatia = deltaPx / base.length;
+  return base.map((h) => Math.max(import_core7.MIN_LINHA_PX, Math.round(h + fatia)));
+}
+function TableResizeOverlay({ tableRef, blockIndex, cols, rows }) {
   const editor = useEditorContext();
-  const [positions, setPositions] = (0, import_react9.useState)(null);
-  const [layout, setLayout] = (0, import_react9.useState)(null);
-  const draggingRef = (0, import_react9.useRef)(null);
-  const measure = (0, import_react9.useCallback)(() => {
+  const [layout, setLayout] = (0, import_react10.useState)(null);
+  const arrastoRef = (0, import_react10.useRef)(null);
+  const measureNow = (0, import_react10.useCallback)(() => {
     const table = tableRef.current;
-    if (!table) return;
+    if (!table) return null;
     const tableRect = table.getBoundingClientRect();
     const cgCols = table.querySelectorAll("colgroup > col");
     let rights = [];
@@ -2758,55 +3172,160 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
       });
     }
     if (rights.length !== cols) {
-      setLayout(null);
-      return;
+      return null;
     }
-    setLayout({ rights, height: tableRect.height });
-  }, [cols, tableRef]);
-  (0, import_react9.useLayoutEffect)(() => {
+    const trs = table.querySelectorAll("tbody > tr");
+    const bottoms = [];
+    let accY = 0;
+    trs.forEach((tr) => {
+      accY += tr.getBoundingClientRect().height;
+      bottoms.push(accY);
+    });
+    return {
+      rights,
+      bottoms: trs.length === rows ? bottoms : [],
+      width: tableRect.width,
+      height: tableRect.height
+    };
+  }, [cols, rows, tableRef]);
+  const measure = (0, import_react10.useCallback)(() => {
+    setLayout(measureNow());
+  }, [measureNow]);
+  (0, import_react10.useLayoutEffect)(() => {
     measure();
   }, [measure]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const table = tableRef.current;
     if (!table) return;
     const ro = new ResizeObserver(() => measure());
     ro.observe(table);
     return () => ro.disconnect();
   }, [measure, tableRef]);
-  const onPointerDown = (0, import_react9.useCallback)(
-    (col) => (e) => {
+  const onPointerUp = (0, import_react10.useCallback)(
+    (e) => {
+      arrastoRef.current = null;
+      measure();
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    },
+    [measure]
+  );
+  const onPointerMove = (0, import_react10.useCallback)(
+    (e) => {
+      const d = arrastoRef.current;
+      if (!d) return;
+      switch (d.tipo) {
+        case "coluna": {
+          const dPct = deltaPctDoArrasto(e.clientX - d.startX, d.tableWidthPx);
+          editor.setColumnBoundary(blockIndex, d.boundary, dPct, d.baseWidths);
+          break;
+        }
+        case "larguraTotal": {
+          const dPct = deltaPctDoArrasto(e.clientX - d.startX, d.utilPx);
+          editor.setTableWidth(blockIndex, d.baseWidthPct + dPct);
+          break;
+        }
+        case "linha": {
+          editor.setRowHeight(blockIndex, d.row, d.baseHeightPx + (e.clientY - d.startY));
+          break;
+        }
+        case "alturaTotal": {
+          editor.setRowHeights(blockIndex, distribuirAltura(d.baseHeights, e.clientY - d.startY));
+          break;
+        }
+        case "canto": {
+          const dPct = deltaPctDoArrasto(e.clientX - d.startX, d.utilPx);
+          editor.setTableWidth(blockIndex, d.baseWidthPct + dPct);
+          editor.setRowHeights(blockIndex, distribuirAltura(d.baseHeights, e.clientY - d.startY));
+          break;
+        }
+      }
+    },
+    [blockIndex, editor]
+  );
+  const containerWidthPxOf = (0, import_react10.useCallback)((table, tableWidthPx) => {
+    return table.parentElement?.getBoundingClientRect().width || tableWidthPx;
+  }, []);
+  const onColumnPointerDown = (0, import_react10.useCallback)(
+    (boundary) => (e) => {
       e.preventDefault();
       e.stopPropagation();
       const table = tableRef.current;
       if (!table) return;
-      const cgCols = table.querySelectorAll("colgroup > col");
-      const startWidth = cgCols[col]?.getBoundingClientRect().width ?? 100;
-      draggingRef.current = { col, startX: e.clientX, startWidth };
-      setPositions({ x: e.clientX, height: layout?.height ?? 0 });
+      const tableWidthPx = table.getBoundingClientRect().width || 1;
+      const attrs = editor.doc.getBlockAttrs(blockIndex);
+      const baseWidths = (0, import_core7.normalizarLarguras)(attrs.colWidths, cols);
+      arrastoRef.current = { tipo: "coluna", boundary, startX: e.clientX, baseWidths, tableWidthPx };
       e.currentTarget.setPointerCapture(e.pointerId);
     },
-    [layout, tableRef]
+    [tableRef, editor, blockIndex, cols]
   );
-  const onPointerMove = (0, import_react9.useCallback)(
+  const onTableWidthPointerDown = (0, import_react10.useCallback)(
     (e) => {
-      const d = draggingRef.current;
-      if (!d) return;
-      const dx = e.clientX - d.startX;
-      const next = Math.max(40, d.startWidth + dx);
-      editor.setColumnWidth(blockIndex, d.col, next);
+      e.preventDefault();
+      e.stopPropagation();
+      const table = tableRef.current;
+      if (!table) return;
+      const tableWidthPx = table.getBoundingClientRect().width || 1;
+      const utilPx = containerWidthPxOf(table, tableWidthPx);
+      const attrs = editor.doc.getBlockAttrs(blockIndex);
+      const baseWidthPct = typeof attrs.tableWidth === "number" ? attrs.tableWidth : 100;
+      arrastoRef.current = { tipo: "larguraTotal", startX: e.clientX, baseWidthPct, utilPx };
+      e.currentTarget.setPointerCapture(e.pointerId);
     },
-    [blockIndex, editor]
+    [tableRef, editor, blockIndex, containerWidthPxOf]
+  );
+  const heightsFromBottoms = (bottoms) => bottoms.map((b, i) => b - (i === 0 ? 0 : bottoms[i - 1]));
+  const onRowPointerDown = (0, import_react10.useCallback)(
+    (row) => (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const m = measureNow();
+      if (!m || m.bottoms.length === 0) return;
+      const baseHeightPx = m.bottoms[row] - (row === 0 ? 0 : m.bottoms[row - 1]);
+      arrastoRef.current = { tipo: "linha", row, startY: e.clientY, baseHeightPx };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [measureNow]
+  );
+  const onTableHeightPointerDown = (0, import_react10.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const m = measureNow();
+      if (!m || m.bottoms.length === 0) return;
+      arrastoRef.current = { tipo: "alturaTotal", startY: e.clientY, baseHeights: heightsFromBottoms(m.bottoms) };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [measureNow]
+  );
+  const onCornerPointerDown = (0, import_react10.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const table = tableRef.current;
+      const m = measureNow();
+      if (!table || !m) return;
+      const tableWidthPx = table.getBoundingClientRect().width || 1;
+      const utilPx = containerWidthPxOf(table, tableWidthPx);
+      const attrs = editor.doc.getBlockAttrs(blockIndex);
+      const baseWidthPct = typeof attrs.tableWidth === "number" ? attrs.tableWidth : 100;
+      arrastoRef.current = {
+        tipo: "canto",
+        startX: e.clientX,
+        startY: e.clientY,
+        baseWidthPct,
+        utilPx,
+        baseHeights: heightsFromBottoms(m.bottoms)
+      };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [tableRef, editor, blockIndex, measureNow, containerWidthPxOf]
   );
-  const onPointerUp = (0, import_react9.useCallback)((e) => {
-    draggingRef.current = null;
-    setPositions(null);
-    try {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    } catch {
-    }
-  }, []);
   if (!layout) return null;
-  const handleStyle = (x) => ({
+  const colHandleStyle = (x) => ({
     position: "absolute",
     top: 0,
     left: `${x - 3}px`,
@@ -2815,28 +3334,104 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
     cursor: "col-resize",
     zIndex: 5
   });
-  void positions;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: layout.rights.map((x, c) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
-    {
-      contentEditable: false,
-      className: "ed-col-resize-handle",
-      style: handleStyle(x),
-      onPointerDown: onPointerDown(c),
-      onPointerMove,
-      onPointerUp,
-      "aria-label": `Redimensionar coluna ${c + 1}`,
-      role: "separator"
-    },
-    c
-  )) });
+  const rowHandleStyle = (y) => ({
+    position: "absolute",
+    left: 0,
+    top: `${y - 3}px`,
+    width: `${layout.width}px`,
+    height: "6px",
+    cursor: "row-resize",
+    zIndex: 5
+  });
+  const cornerHandleStyle = {
+    position: "absolute",
+    left: `${layout.width - 5}px`,
+    top: `${layout.height - 5}px`,
+    width: "10px",
+    height: "10px",
+    cursor: "nwse-resize",
+    zIndex: 6
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    layout.rights.map(
+      (x, c) => c < cols - 1 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "div",
+        {
+          contentEditable: false,
+          className: "ed-col-resize-handle",
+          style: colHandleStyle(x),
+          onPointerDown: onColumnPointerDown(c),
+          onPointerMove,
+          onPointerUp,
+          "aria-label": `Redimensionar coluna ${c + 1}`,
+          role: "separator"
+        },
+        `col-${c}`
+      ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "div",
+        {
+          contentEditable: false,
+          className: "ed-col-resize-handle",
+          style: colHandleStyle(x),
+          onPointerDown: onTableWidthPointerDown,
+          onPointerMove,
+          onPointerUp,
+          "aria-label": "Largura da tabela",
+          role: "separator"
+        },
+        "col-total"
+      )
+    ),
+    layout.bottoms.map(
+      (y, r) => r < rows - 1 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "div",
+        {
+          contentEditable: false,
+          className: "ed-row-resize-handle",
+          style: rowHandleStyle(y),
+          onPointerDown: onRowPointerDown(r),
+          onPointerMove,
+          onPointerUp,
+          "aria-label": `Redimensionar linha ${r + 1}`,
+          role: "separator"
+        },
+        `row-${r}`
+      ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "div",
+        {
+          contentEditable: false,
+          className: "ed-row-resize-handle",
+          style: rowHandleStyle(y),
+          onPointerDown: onTableHeightPointerDown,
+          onPointerMove,
+          onPointerUp,
+          "aria-label": "Altura da tabela",
+          role: "separator"
+        },
+        "row-total"
+      )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        contentEditable: false,
+        className: "ed-table-corner-handle",
+        style: cornerHandleStyle,
+        onPointerDown: onCornerPointerDown,
+        onPointerMove,
+        onPointerUp,
+        "aria-label": "Redimensionar tabela",
+        role: "separator"
+      }
+    )
+  ] });
 }
 
 // src/NodeView.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function NodeView({ block, index, children, fragment, tableFragment }) {
   if (block.type === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableView, { block, index, tableFragment });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableView, { block, index, tableFragment });
   }
   const inline = fragment ? renderInline(sliceDelta(block.delta, fragment.start, fragment.end), index) : renderInline(block.delta, index);
   const common = commonBlockProps(block.attrs, index, block.type, fragment);
@@ -2844,7 +3439,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
     case "heading": {
       const level = clampLevel2(block.attrs.level);
       const Tag = `h${level}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Tag,
         {
           ...common,
@@ -2854,7 +3449,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
       );
     }
     case "blockquote":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "blockquote",
         {
           ...common,
@@ -2863,18 +3458,18 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
         }
       );
     case "codeBlock":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "pre",
         {
           ...common,
           "data-language": block.attrs.language ?? void 0,
           className: `ed-block ed-codeblock${alignClass(block.attrs.align)}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { children: inline })
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("code", { children: inline })
         }
       );
     case "listItem": {
       const level = clampListLevel(block.attrs.listLevel);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "li",
         {
           ...common,
@@ -2890,7 +3485,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
     }
     case "paragraph":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
           ...common,
@@ -2903,7 +3498,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
 function commonBlockProps(attrs, index, type, fragment) {
   const style = {};
   if (attrs.align) style.textAlign = attrs.align;
-  Object.assign(style, (0, import_core7.answerLineStyle)(attrs) ?? {});
+  Object.assign(style, (0, import_core8.answerLineStyle)(attrs) ?? {});
   const base = {
     "data-block-index": index,
     "data-block-type": type,
@@ -2937,84 +3532,107 @@ function clampListLevel(l) {
   if (typeof l !== "number" || !Number.isFinite(l)) return 0;
   return Math.max(0, Math.min(5, Math.trunc(l)));
 }
+function renderCellContent(attrs, delta, keyPrefix) {
+  const kind = attrs?.listKind;
+  if (!kind) return renderInline(delta, keyPrefix);
+  const linhas = (0, import_core8.splitDeltaByLines)(delta);
+  const Tag = kind === "ordered" ? "ol" : "ul";
+  let baseOffset = 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Tag,
+    {
+      className: `ed-list ed-list-${kind}`,
+      "data-list-kind": kind,
+      start: kind === "ordered" && typeof attrs?.listStart === "number" ? attrs.listStart : void 0,
+      style: attrs?.listStyle ? { listStyleType: attrs.listStyle } : void 0,
+      children: linhas.map((linha, i) => {
+        const li = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "ed-listitem", "data-cell-line": i, children: renderInline(linha, `${keyPrefix}-l${i}`, baseOffset) }, i);
+        baseOffset += (0, import_core8.deltaLength)(linha) + 1;
+        return li;
+      })
+    }
+  );
+}
 function TableView({ block, index, tableFragment }) {
   const rows = clampPositive(block.attrs.rows);
   const cols = clampPositive(block.attrs.cols);
   const cells = block.cells ?? [];
-  const widths = readColWidths(block.attrs.colWidths, cols);
-  const tableRef = (0, import_react10.useRef)(null);
+  const widths = (0, import_core8.normalizarLarguras)(block.attrs.colWidths, cols);
+  const tableWidth = block.attrs.tableWidth;
+  const rowHeights = block.attrs.rowHeights;
+  const tableRef = (0, import_react11.useRef)(null);
   const rowStart = tableFragment?.rowStart ?? 0;
   const rowEnd = tableFragment?.rowEnd ?? rows;
   const isFirstFragment = !tableFragment || tableFragment.index === 0;
   const editor = useEditorContext();
-  const rect = (0, import_react10.useMemo)(() => {
+  const rect = (0, import_react11.useMemo)(() => {
     if (editor.selection.anchor.blockIndex !== index) return null;
     if (editor.selection.focus.blockIndex !== index) return null;
-    return (0, import_core7.tableRectSelection)(editor.doc, editor.selection);
+    return (0, import_core8.tableRectSelection)(editor.doc, editor.selection);
   }, [editor.doc, editor.selection, index]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ed-table-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ed-table-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "table",
       {
         ref: tableRef,
         "data-block-index": index,
         "data-block-type": "table",
         className: "ed-block ed-table",
+        style: typeof tableWidth === "number" ? { width: `${tableWidth}%` } : void 0,
         children: [
-          widths && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("colgroup", { children: widths.map((w, c) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("col", { style: w != null ? { width: `${w}px` } : void 0 }, c)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: Array.from({ length: rowEnd - rowStart }, (_, i) => {
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("colgroup", { children: widths.map((w, c) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("col", { style: { width: `${w}%` } }, c)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { children: Array.from({ length: rowEnd - rowStart }, (_, i) => {
             const r = rowStart + i;
-            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { "data-cell-row": r, children: Array.from({ length: cols }, (_2, c) => {
-              const flat = r * cols + c;
-              const cell = cells[flat];
-              if (cell?.attrs.covered === true) return null;
-              const rowspan = spanAttr(cell?.attrs.rowspan);
-              const colspan = spanAttr(cell?.attrs.colspan);
-              const delta = cell?.delta ?? [];
-              const inRect = rect !== null && r >= rect.top && r <= rect.bottom && c >= rect.left && c <= rect.right;
-              return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "td",
-                {
-                  "data-cell-index": flat,
-                  "data-cell-row": r,
-                  "data-cell-col": c,
-                  "data-cell-rowspan": rowspan,
-                  "data-cell-colspan": colspan,
-                  rowSpan: rowspan > 1 ? rowspan : void 0,
-                  colSpan: colspan > 1 ? colspan : void 0,
-                  style: cellStyle(
-                    cell?.attrs,
-                    // rowStart/rowEnd são os limites do FRAGMENTO: numa tabela
-                    // quebrada entre páginas, cada página fecha a própria caixa.
-                    (0, import_core7.cellBorderStyle)(
-                      block.attrs.borderPreset,
-                      { row: r, col: c, rowspan, colspan, cols, rowStart, rowEnd },
-                      "screen",
-                      block.attrs.borderColor
-                    )
-                  ),
-                  className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
-                  children: renderInline(delta, `t${index}-c${flat}`)
-                },
-                c
-              );
-            }) }, r);
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "tr",
+              {
+                "data-cell-row": r,
+                style: typeof rowHeights?.[r] === "number" ? { height: `${rowHeights[r]}px` } : void 0,
+                children: Array.from({ length: cols }, (_2, c) => {
+                  const flat = r * cols + c;
+                  const cell = cells[flat];
+                  if (cell?.attrs.covered === true) return null;
+                  const rowspan = spanAttr(cell?.attrs.rowspan);
+                  const colspan = spanAttr(cell?.attrs.colspan);
+                  const delta = cell?.delta ?? [];
+                  const inRect = rect !== null && r >= rect.top && r <= rect.bottom && c >= rect.left && c <= rect.right;
+                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "td",
+                    {
+                      "data-cell-index": flat,
+                      "data-cell-row": r,
+                      "data-cell-col": c,
+                      "data-cell-rowspan": rowspan,
+                      "data-cell-colspan": colspan,
+                      rowSpan: rowspan > 1 ? rowspan : void 0,
+                      colSpan: colspan > 1 ? colspan : void 0,
+                      style: cellStyle(
+                        cell?.attrs,
+                        // rowStart/rowEnd são os limites do FRAGMENTO: numa tabela
+                        // quebrada entre páginas, cada página fecha a própria caixa.
+                        (0, import_core8.cellBorderStyle)(
+                          block.attrs.borderPreset,
+                          { row: r, col: c, rowspan, colspan, cols, rowStart, rowEnd },
+                          "screen",
+                          block.attrs.borderColor
+                        )
+                      ),
+                      className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
+                      children: renderCellContent(cell?.attrs, delta, `t${index}-c${flat}`)
+                    },
+                    c
+                  );
+                })
+              },
+              r
+            );
           }) })
         ]
       }
     ),
-    isFirstFragment && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableResizeOverlay, { tableRef, blockIndex: index, cols })
+    isFirstFragment && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableResizeOverlay, { tableRef, blockIndex: index, cols, rows })
   ] });
 }
-function readColWidths(raw, cols) {
-  if (!Array.isArray(raw)) return null;
-  const out = [];
-  for (let i = 0; i < cols; i++) {
-    const v = raw[i];
-    out.push(typeof v === "number" && Number.isFinite(v) && v > 0 ? v : null);
-  }
-  return out;
-}
 function spanAttr(v) {
   if (typeof v !== "number" || !Number.isFinite(v) || v < 1) return 1;
   return Math.trunc(v);
@@ -3025,7 +3643,7 @@ function clampPositive(n) {
 }
 
 // src/usePagination.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var A4_PAGE = {
   width: 794,
   height: 1123,
@@ -3051,10 +3669,10 @@ function defaultPageLayout(topLevelCount) {
   };
 }
 function usePageLayout(rootRef, geometry, topLevelCount, deps) {
-  const [phase, setPhase] = (0, import_react11.useState)("measure");
-  const [layout, setLayout] = (0, import_react11.useState)(() => defaultPageLayout(topLevelCount));
-  const lastDepsRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useLayoutEffect)(() => {
+  const [phase, setPhase] = (0, import_react12.useState)("measure");
+  const [layout, setLayout] = (0, import_react12.useState)(() => defaultPageLayout(topLevelCount));
+  const lastDepsRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useLayoutEffect)(() => {
     const currentDeps = [...deps, topLevelCount, geometry];
     if (lastDepsRef.current !== null && shallowArrayEqual(lastDepsRef.current, currentDeps)) {
       return;
@@ -3066,7 +3684,7 @@ function usePageLayout(rootRef, geometry, topLevelCount, deps) {
     });
     setPhase("measure");
   });
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     if (phase !== "measure") return;
     const root = rootRef.current;
     if (!root) return;
@@ -3538,47 +4156,47 @@ function layoutsDeepEqual(a, b) {
 }
 
 // src/useEditor.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/usePageSettings.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function usePageSettings(doc) {
-  const cacheRef = (0, import_react12.useRef)(null);
-  const subscribe = (0, import_react12.useCallback)(
+  const cacheRef = (0, import_react13.useRef)(null);
+  const subscribe = (0, import_react13.useCallback)(
     (notify) => doc.observePageSettings(notify),
     [doc]
   );
-  const getSnapshot = (0, import_react12.useCallback)(() => {
+  const getSnapshot = (0, import_react13.useCallback)(() => {
     const next = doc.getPageSettings();
     const prev = cacheRef.current;
     if (prev && shallowEqual(prev, next)) return prev;
     cacheRef.current = next;
     return next;
   }, [doc]);
-  return (0, import_react12.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react13.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
 }
 function shallowEqual(a, b) {
   return a.width === b.width && a.height === b.height && a.marginTop === b.marginTop && a.marginBottom === b.marginBottom && a.marginLeft === b.marginLeft && a.marginRight === b.marginRight && a.preset === b.preset && a.systemHeaderTitle === b.systemHeaderTitle && a.systemHeaderAuthor === b.systemHeaderAuthor;
 }
 
 // src/useEditor.ts
-var import_core8 = require("@sofereditor/core");
+var import_core9 = require("@sofereditor/core");
 function useEditor(opts = {}) {
-  const doc = (0, import_react13.useMemo)(() => opts.document ?? new import_core8.EditorDocument(), [opts.document]);
-  const history = (0, import_react13.useMemo)(() => new import_core8.EditorHistory(doc), [doc]);
-  const [snapshot, setSnapshot] = (0, import_react13.useState)(() => doc.toJSON());
-  const [selection, setSelectionState] = (0, import_react13.useState)(
-    () => (0, import_core8.collapsedSelection)({ blockIndex: 0, offset: 0 })
+  const doc = (0, import_react14.useMemo)(() => opts.document ?? new import_core9.EditorDocument(), [opts.document]);
+  const history = (0, import_react14.useMemo)(() => new import_core9.EditorHistory(doc), [doc]);
+  const [snapshot, setSnapshot] = (0, import_react14.useState)(() => doc.toJSON());
+  const [selection, setSelectionState] = (0, import_react14.useState)(
+    () => (0, import_core9.collapsedSelection)({ blockIndex: 0, offset: 0 })
   );
-  const selectionRef = (0, import_react13.useRef)(selection);
+  const selectionRef = (0, import_react14.useRef)(selection);
   selectionRef.current = selection;
-  const pendingMarksRef = (0, import_react13.useRef)({});
-  const [pendingMarks, setPendingMarksState] = (0, import_react13.useState)({});
-  const setPendingMarks = (0, import_react13.useCallback)((next) => {
+  const pendingMarksRef = (0, import_react14.useRef)({});
+  const [pendingMarks, setPendingMarksState] = (0, import_react14.useState)({});
+  const setPendingMarks = (0, import_react14.useCallback)((next) => {
     pendingMarksRef.current = next;
     setPendingMarksState(next);
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     let scheduled = false;
     let cancelled = false;
     let frame = 0;
@@ -3605,8 +4223,8 @@ function useEditor(opts = {}) {
       doc.ydoc.off("afterTransaction", schedule);
     };
   }, [doc]);
-  const getSelection = (0, import_react13.useCallback)(() => selectionRef.current, []);
-  const setSelection = (0, import_react13.useCallback)(
+  const getSelection = (0, import_react14.useCallback)(() => selectionRef.current, []);
+  const setSelection = (0, import_react14.useCallback)(
     (sel) => {
       const prev = selectionRef.current;
       selectionRef.current = sel;
@@ -3621,19 +4239,19 @@ function useEditor(opts = {}) {
     },
     []
   );
-  const ctxRef = (0, import_react13.useRef)({ doc, getSelection, setSelection });
+  const ctxRef = (0, import_react14.useRef)({ doc, getSelection, setSelection });
   ctxRef.current = { doc, getSelection, setSelection };
-  const consumePendingMarks = (0, import_react13.useCallback)(() => {
+  const consumePendingMarks = (0, import_react14.useCallback)(() => {
     const current = pendingMarksRef.current;
     if (Object.keys(current).length === 0) return void 0;
     pendingMarksRef.current = {};
     setPendingMarksState({});
     return current;
   }, []);
-  const isMarkActive = (0, import_react13.useCallback)(
+  const isMarkActive = (0, import_react14.useCallback)(
     (name, value) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core8.orderedRange)(sel);
+      const { start, end } = (0, import_core9.orderedRange)(sel);
       if (start.blockIndex === end.blockIndex && start.offset === end.offset) {
         const pending = pendingMarksRef.current[name];
         if (pending !== void 0) {
@@ -3642,7 +4260,7 @@ function useEditor(opts = {}) {
         }
         const yText2 = doc.getBlockText(start.blockIndex);
         if (!yText2 || start.offset === 0) return false;
-        return (0, import_core8.isMarkUniformInRange)(yText2, start.offset - 1, start.offset, name, value);
+        return (0, import_core9.isMarkUniformInRange)(yText2, start.offset - 1, start.offset, name, value);
       }
       if (start.blockIndex !== end.blockIndex) {
         for (let i = start.blockIndex; i <= end.blockIndex; i++) {
@@ -3651,19 +4269,19 @@ function useEditor(opts = {}) {
           const s = i === start.blockIndex ? start.offset : 0;
           const e = i === end.blockIndex ? end.offset : yText2.length;
           if (s >= e) continue;
-          if (!(0, import_core8.isMarkUniformInRange)(yText2, s, e, name, value)) return false;
+          if (!(0, import_core9.isMarkUniformInRange)(yText2, s, e, name, value)) return false;
         }
         return true;
       }
       const yText = doc.getBlockText(start.blockIndex);
       if (!yText) return false;
-      return (0, import_core8.isMarkUniformInRange)(yText, start.offset, end.offset, name, value);
+      return (0, import_core9.isMarkUniformInRange)(yText, start.offset, end.offset, name, value);
     },
     [doc]
   );
-  const getActiveMarks = (0, import_react13.useCallback)(() => {
+  const getActiveMarks = (0, import_react14.useCallback)(() => {
     const sel = selectionRef.current;
-    const { start, end } = (0, import_core8.orderedRange)(sel);
+    const { start, end } = (0, import_core9.orderedRange)(sel);
     if (start.blockIndex !== end.blockIndex) {
       return {};
     }
@@ -3671,14 +4289,14 @@ function useEditor(opts = {}) {
     if (!yText) return {};
     if (start.offset === end.offset) {
       if (start.offset === 0) return {};
-      return (0, import_core8.getMarksInRange)(yText, start.offset - 1, start.offset);
+      return (0, import_core9.getMarksInRange)(yText, start.offset - 1, start.offset);
     }
-    return (0, import_core8.getMarksInRange)(yText, start.offset, end.offset);
+    return (0, import_core9.getMarksInRange)(yText, start.offset, end.offset);
   }, [doc]);
-  const toggleMark = (0, import_react13.useCallback)(
+  const toggleMark = (0, import_react14.useCallback)(
     (name, value) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core8.orderedRange)(sel);
+      const { start, end } = (0, import_core9.orderedRange)(sel);
       const isCollapsed = start.blockIndex === end.blockIndex && start.offset === end.offset;
       if (isCollapsed) {
         const next = { ...pendingMarksRef.current };
@@ -3691,39 +4309,39 @@ function useEditor(opts = {}) {
         setPendingMarks(next);
         return;
       }
-      (0, import_core8.toggleMark)(ctxRef.current, name, value);
+      (0, import_core9.toggleMark)(ctxRef.current, name, value);
     },
     [isMarkActive, setPendingMarks]
   );
-  const setMark = (0, import_react13.useCallback)(
+  const setMark = (0, import_react14.useCallback)(
     (name, value) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core8.orderedRange)(sel);
+      const { start, end } = (0, import_core9.orderedRange)(sel);
       const isCollapsed = start.blockIndex === end.blockIndex && start.offset === end.offset;
       if (isCollapsed) {
         setPendingMarks({ ...pendingMarksRef.current, [name]: value });
         return;
       }
-      (0, import_core8.setMark)(ctxRef.current, name, value);
+      (0, import_core9.setMark)(ctxRef.current, name, value);
     },
     [setPendingMarks]
   );
-  const removeMark = (0, import_react13.useCallback)(
+  const removeMark = (0, import_react14.useCallback)(
     (name) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core8.orderedRange)(sel);
+      const { start, end } = (0, import_core9.orderedRange)(sel);
       const isCollapsed = start.blockIndex === end.blockIndex && start.offset === end.offset;
       if (isCollapsed) {
         setPendingMarks({ ...pendingMarksRef.current, [name]: null });
         return;
       }
-      (0, import_core8.removeMark)(ctxRef.current, name);
+      (0, import_core9.removeMark)(ctxRef.current, name);
     },
     [setPendingMarks]
   );
-  const getBlockType = (0, import_react13.useCallback)(() => {
+  const getBlockType = (0, import_react14.useCallback)(() => {
     const sel = selectionRef.current;
-    const { start, end } = (0, import_core8.orderedRange)(sel);
+    const { start, end } = (0, import_core9.orderedRange)(sel);
     const first = doc.getBlockType(start.blockIndex);
     if (first === void 0) return "paragraph";
     for (let i = start.blockIndex + 1; i <= end.blockIndex; i++) {
@@ -3731,10 +4349,10 @@ function useEditor(opts = {}) {
     }
     return first;
   }, [doc]);
-  const getBlockAttr = (0, import_react13.useCallback)(
+  const getBlockAttr = (0, import_react14.useCallback)(
     (key) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core8.orderedRange)(sel);
+      const { start, end } = (0, import_core9.orderedRange)(sel);
       const first = doc.getBlockAttrs(start.blockIndex)[key];
       for (let i = start.blockIndex + 1; i <= end.blockIndex; i++) {
         const next = doc.getBlockAttrs(i)[key];
@@ -3744,60 +4362,64 @@ function useEditor(opts = {}) {
     },
     [doc]
   );
-  const setBlockType = (0, import_react13.useCallback)((type, attrs) => {
-    (0, import_core8.setBlockType)(ctxRef.current, type, attrs);
+  const setBlockType = (0, import_react14.useCallback)((type, attrs) => {
+    (0, import_core9.setBlockType)(ctxRef.current, type, attrs);
   }, []);
-  const setBlockAttr = (0, import_react13.useCallback)(
+  const setBlockAttr = (0, import_react14.useCallback)(
     (key, value) => {
-      (0, import_core8.setBlockAttr)(ctxRef.current, key, value);
+      (0, import_core9.setBlockAttr)(ctxRef.current, key, value);
     },
     []
   );
-  const setAlign = (0, import_react13.useCallback)((value) => {
+  const setAlign = (0, import_react14.useCallback)((value) => {
     const sel = selectionRef.current;
     const inCell = sel.focus.cellIndex != null;
-    if (inCell) (0, import_core8.setCellAttr)(ctxRef.current, "align", value);
-    else (0, import_core8.setBlockAttr)(ctxRef.current, "align", value);
+    if (inCell) (0, import_core9.setCellAttr)(ctxRef.current, "align", value);
+    else (0, import_core9.setBlockAttr)(ctxRef.current, "align", value);
   }, []);
-  const getAlign = (0, import_react13.useCallback)(() => {
+  const getAlign = (0, import_react14.useCallback)(() => {
     const sel = selectionRef.current;
     if (sel.focus.cellIndex != null && doc.isTable(sel.focus.blockIndex)) {
       return doc.getCellAttrs(sel.focus.blockIndex, sel.focus.cellIndex).align;
     }
     return getBlockAttr("align");
   }, [doc, getBlockAttr]);
-  const setCellBackground = (0, import_react13.useCallback)((color) => {
-    (0, import_core8.setCellAttr)(ctxRef.current, "bgColor", color);
+  const setCellBackground = (0, import_react14.useCallback)((color) => {
+    (0, import_core9.setCellAttr)(ctxRef.current, "bgColor", color);
   }, []);
-  const getCellBackground = (0, import_react13.useCallback)(() => {
+  const getCellBackground = (0, import_react14.useCallback)(() => {
     const sel = selectionRef.current;
     if (sel.focus.cellIndex == null || !doc.isTable(sel.focus.blockIndex)) return void 0;
     return doc.getCellAttrs(sel.focus.blockIndex, sel.focus.cellIndex).bgColor;
   }, [doc]);
-  const setTableBorderPreset = (0, import_react13.useCallback)((preset) => {
+  const setTableBorderPreset = (0, import_react14.useCallback)((preset) => {
     const sel = selectionRef.current;
     if (!doc.isTable(sel.focus.blockIndex)) return;
-    (0, import_core8.setBlockAttrAtIndex)(ctxRef.current, sel.focus.blockIndex, "borderPreset", preset);
+    (0, import_core9.setBlockAttrAtIndex)(ctxRef.current, sel.focus.blockIndex, "borderPreset", preset);
   }, [doc]);
-  const getTableBorderPreset = (0, import_react13.useCallback)(() => {
+  const getTableBorderPreset = (0, import_react14.useCallback)(() => {
     const sel = selectionRef.current;
     if (!doc.isTable(sel.focus.blockIndex)) return "all";
     return doc.getBlockAttrs(sel.focus.blockIndex).borderPreset ?? "all";
   }, [doc]);
-  const setTableBorderColor = (0, import_react13.useCallback)((color) => {
+  const setTableBorderColor = (0, import_react14.useCallback)((color) => {
     const sel = selectionRef.current;
     if (!doc.isTable(sel.focus.blockIndex)) return;
-    (0, import_core8.setBlockAttrAtIndex)(ctxRef.current, sel.focus.blockIndex, "borderColor", color);
+    (0, import_core9.setBlockAttrAtIndex)(ctxRef.current, sel.focus.blockIndex, "borderColor", color);
   }, [doc]);
-  const getTableBorderColor = (0, import_react13.useCallback)(() => {
+  const getTableBorderColor = (0, import_react14.useCallback)(() => {
     const sel = selectionRef.current;
     if (!doc.isTable(sel.focus.blockIndex)) return void 0;
     return doc.getBlockAttrs(sel.focus.blockIndex).borderColor;
   }, [doc]);
-  const isListActive = (0, import_react13.useCallback)(
+  const isListActive = (0, import_react14.useCallback)(
     (kind) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core8.orderedRange)(sel);
+      if (sel.focus.cellIndex != null && doc.isTable(sel.focus.blockIndex)) {
+        const real = doc.realCellIndex(sel.focus.blockIndex, sel.focus.cellIndex);
+        return real != null && doc.getCellAttrs(sel.focus.blockIndex, real).listKind === kind;
+      }
+      const { start, end } = (0, import_core9.orderedRange)(sel);
       for (let i = start.blockIndex; i <= end.blockIndex; i++) {
         if (doc.getBlockType(i) !== "listItem") return false;
         if (doc.getBlockAttrs(i).listKind !== kind) return false;
@@ -3806,119 +4428,128 @@ function useEditor(opts = {}) {
     },
     [doc]
   );
-  const toggleList = (0, import_react13.useCallback)((kind) => {
-    (0, import_core8.toggleList)(ctxRef.current, kind);
+  const toggleList = (0, import_react14.useCallback)((kind) => {
+    (0, import_core9.toggleList)(ctxRef.current, kind);
   }, []);
-  const indentList = (0, import_react13.useCallback)(() => {
-    (0, import_core8.indentList)(ctxRef.current);
+  const indentList = (0, import_react14.useCallback)(() => {
+    (0, import_core9.indentList)(ctxRef.current);
   }, []);
-  const dedentList = (0, import_react13.useCallback)(() => {
-    (0, import_core8.dedentList)(ctxRef.current);
+  const dedentList = (0, import_react14.useCallback)(() => {
+    (0, import_core9.dedentList)(ctxRef.current);
   }, []);
-  const splitListItem = (0, import_react13.useCallback)(() => {
-    return (0, import_core8.splitListItem)(ctxRef.current);
+  const splitListItem = (0, import_react14.useCallback)(() => {
+    return (0, import_core9.splitListItem)(ctxRef.current);
   }, []);
-  const isInTable = (0, import_react13.useCallback)(() => {
+  const isInTable = (0, import_react14.useCallback)(() => {
     return selectionRef.current.focus.cellIndex != null;
   }, []);
-  const getTableLocation = (0, import_react13.useCallback)(() => {
-    return (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
+  const getTableLocation = (0, import_react14.useCallback)(() => {
+    return (0, import_core9.tableLocationOf)(doc, selectionRef.current.focus);
   }, [doc]);
-  const insertTable = (0, import_react13.useCallback)((rows, cols) => {
-    (0, import_core8.insertTable)(ctxRef.current, rows, cols);
+  const insertTable = (0, import_react14.useCallback)((rows, cols) => {
+    (0, import_core9.insertTable)(ctxRef.current, rows, cols);
   }, []);
-  const insertAnswerLines = (0, import_react13.useCallback)((count, spacing) => {
-    (0, import_core8.insertAnswerLines)(ctxRef.current, count, spacing);
+  const insertAnswerLines = (0, import_react14.useCallback)((count, spacing) => {
+    (0, import_core9.insertAnswerLines)(ctxRef.current, count, spacing);
   }, []);
-  const deleteTable = (0, import_react13.useCallback)((blockIndex) => {
+  const deleteTable = (0, import_react14.useCallback)((blockIndex) => {
     const idx = blockIndex ?? selectionRef.current.focus.blockIndex;
-    (0, import_core8.deleteTable)(ctxRef.current, idx);
+    (0, import_core9.deleteTable)(ctxRef.current, idx);
   }, []);
-  const insertRowAbove = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
+  const insertRowAbove = (0, import_react14.useCallback)(() => {
+    const loc = (0, import_core9.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core8.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "before");
+    (0, import_core9.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "before");
   }, [doc]);
-  const insertRowBelow = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
+  const insertRowBelow = (0, import_react14.useCallback)(() => {
+    const loc = (0, import_core9.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core8.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "after");
+    (0, import_core9.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "after");
   }, [doc]);
-  const deleteCurrentRow = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
+  const deleteCurrentRow = (0, import_react14.useCallback)(() => {
+    const loc = (0, import_core9.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core8.deleteTableRow)(ctxRef.current, loc.blockIndex, loc.row);
+    (0, import_core9.deleteTableRow)(ctxRef.current, loc.blockIndex, loc.row);
   }, [doc]);
-  const insertColumnLeft = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
+  const insertColumnLeft = (0, import_react14.useCallback)(() => {
+    const loc = (0, import_core9.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core8.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "before");
+    (0, import_core9.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "before");
   }, [doc]);
-  const insertColumnRight = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
+  const insertColumnRight = (0, import_react14.useCallback)(() => {
+    const loc = (0, import_core9.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core8.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "after");
+    (0, import_core9.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "after");
   }, [doc]);
-  const deleteCurrentColumn = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
+  const deleteCurrentColumn = (0, import_react14.useCallback)(() => {
+    const loc = (0, import_core9.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core8.deleteTableColumn)(ctxRef.current, loc.blockIndex, loc.col);
+    (0, import_core9.deleteTableColumn)(ctxRef.current, loc.blockIndex, loc.col);
   }, [doc]);
-  const moveToNextCell = (0, import_react13.useCallback)(() => {
-    (0, import_core8.moveToNextCell)(ctxRef.current);
+  const moveToNextCell = (0, import_react14.useCallback)(() => {
+    (0, import_core9.moveToNextCell)(ctxRef.current);
   }, []);
-  const moveToPrevCell = (0, import_react13.useCallback)(() => {
-    (0, import_core8.moveToPrevCell)(ctxRef.current);
+  const moveToPrevCell = (0, import_react14.useCallback)(() => {
+    (0, import_core9.moveToPrevCell)(ctxRef.current);
   }, []);
-  const mergeRight = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
+  const mergeRight = (0, import_react14.useCallback)(() => {
+    const loc = (0, import_core9.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return false;
-    return (0, import_core8.mergeRight)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
+    return (0, import_core9.mergeRight)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const mergeDown = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
+  const mergeDown = (0, import_react14.useCallback)(() => {
+    const loc = (0, import_core9.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return false;
-    return (0, import_core8.mergeDown)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
+    return (0, import_core9.mergeDown)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const splitCell = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
+  const splitCell = (0, import_react14.useCallback)(() => {
+    const loc = (0, import_core9.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return false;
-    return (0, import_core8.splitCell)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
+    return (0, import_core9.splitCell)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const setColumnWidth = (0, import_react13.useCallback)(
-    (blockIndex, col, widthPx) => {
-      (0, import_core8.setColumnWidth)(ctxRef.current, blockIndex, col, widthPx);
+  const setColumnBoundary = (0, import_react14.useCallback)(
+    (blockIndex, boundary, deltaPct, base) => {
+      (0, import_core9.setColumnBoundary)(ctxRef.current, blockIndex, boundary, deltaPct, base);
     },
     []
   );
-  const getTableRect = (0, import_react13.useCallback)(
-    () => (0, import_core8.tableRectSelection)(doc, selectionRef.current),
+  const setTableWidth = (0, import_react14.useCallback)((blockIndex, pct) => {
+    (0, import_core9.setTableWidth)(ctxRef.current, blockIndex, pct);
+  }, []);
+  const setRowHeight = (0, import_react14.useCallback)((blockIndex, row, px) => {
+    (0, import_core9.setRowHeight)(ctxRef.current, blockIndex, row, px);
+  }, []);
+  const setRowHeights = (0, import_react14.useCallback)((blockIndex, heights) => {
+    (0, import_core9.setRowHeights)(ctxRef.current, blockIndex, heights);
+  }, []);
+  const getTableRect = (0, import_react14.useCallback)(
+    () => (0, import_core9.tableRectSelection)(doc, selectionRef.current),
     [doc]
   );
-  const hasTableRectSelection = (0, import_react13.useCallback)(() => {
-    return (0, import_core8.tableRectSelection)(doc, selectionRef.current) !== null;
+  const hasTableRectSelection = (0, import_react14.useCallback)(() => {
+    return (0, import_core9.tableRectSelection)(doc, selectionRef.current) !== null;
   }, [doc]);
-  const mergeSelection = (0, import_react13.useCallback)(() => {
-    return (0, import_core8.mergeSelection)(ctxRef.current);
+  const mergeSelection = (0, import_react14.useCallback)(() => {
+    return (0, import_core9.mergeSelection)(ctxRef.current);
   }, []);
-  const insertImage = (0, import_react13.useCallback)((embed) => {
-    (0, import_core8.insertImage)(ctxRef.current, embed);
+  const insertImage = (0, import_react14.useCallback)((embed) => {
+    (0, import_core9.insertImage)(ctxRef.current, embed);
   }, []);
-  const setImageAttrs = (0, import_react13.useCallback)(
+  const setImageAttrs = (0, import_react14.useCallback)(
     (blockIndex, offset, partial, cellIndex, newOffset) => {
-      (0, import_core8.setImageAttrs)(ctxRef.current, blockIndex, offset, partial, cellIndex, newOffset);
+      (0, import_core9.setImageAttrs)(ctxRef.current, blockIndex, offset, partial, cellIndex, newOffset);
     },
     []
   );
-  const moveEmbedAnchor = (0, import_react13.useCallback)(
+  const moveEmbedAnchor = (0, import_react14.useCallback)(
     (from, to, newOffsetX, newOffsetY) => {
-      (0, import_core8.moveEmbedAnchor)(ctxRef.current, from, to, newOffsetX, newOffsetY);
+      (0, import_core9.moveEmbedAnchor)(ctxRef.current, from, to, newOffsetX, newOffsetY);
     },
     []
   );
-  const uploadImageRef = (0, import_react13.useRef)(opts.uploadImage);
+  const uploadImageRef = (0, import_react14.useRef)(opts.uploadImage);
   uploadImageRef.current = opts.uploadImage;
-  const insertImageFromFile = (0, import_react13.useCallback)(async (file) => {
+  const insertImageFromFile = (0, import_react14.useCallback)(async (file) => {
     if (!file.type.startsWith("image/")) return;
     const dataUrl = await readAsDataURL(file);
     const dims = await readImageDimensions(dataUrl);
@@ -3930,9 +4561,9 @@ function useEditor(opts = {}) {
     }
     const upload = uploadImageRef.current;
     const src = upload ? await upload(file) : dataUrl;
-    (0, import_core8.insertImage)(ctxRef.current, { type: "image", src, width: w, height: h });
+    (0, import_core9.insertImage)(ctxRef.current, { type: "image", src, width: w, height: h });
   }, []);
-  const getSelectedEmbed = (0, import_react13.useCallback)(() => {
+  const getSelectedEmbed = (0, import_react14.useCallback)(() => {
     const sel = selectionRef.current;
     if (sel.anchor.blockIndex !== sel.focus.blockIndex) return null;
     if ((sel.anchor.cellIndex ?? -1) !== (sel.focus.cellIndex ?? -1)) return null;
@@ -3949,7 +4580,7 @@ function useEditor(opts = {}) {
         cursor += op.insert.length;
         continue;
       }
-      if (cursor === start && (0, import_core8.isImageEmbed)(op.insert)) {
+      if (cursor === start && (0, import_core9.isImageEmbed)(op.insert)) {
         return {
           blockIndex: sel.anchor.blockIndex,
           cellIndex: sel.anchor.cellIndex,
@@ -3961,16 +4592,16 @@ function useEditor(opts = {}) {
     }
     return null;
   }, [doc]);
-  const [linkRequest, setLinkRequest] = (0, import_react13.useState)(null);
-  const linkRequestRef = (0, import_react13.useRef)(null);
-  const requestLink = (0, import_react13.useCallback)((initialHref = "") => {
+  const [linkRequest, setLinkRequest] = (0, import_react14.useState)(null);
+  const linkRequestRef = (0, import_react14.useRef)(null);
+  const requestLink = (0, import_react14.useCallback)((initialHref = "") => {
     return new Promise((resolve) => {
       const req = { initialHref, resolve, selection: selectionRef.current };
       linkRequestRef.current = req;
       setLinkRequest(req);
     });
   }, []);
-  const resolveLinkRequest = (0, import_react13.useCallback)(
+  const resolveLinkRequest = (0, import_react14.useCallback)(
     (href) => {
       const req = linkRequestRef.current;
       linkRequestRef.current = null;
@@ -3983,26 +4614,26 @@ function useEditor(opts = {}) {
     [setSelection]
   );
   const pageSettings = usePageSettings(doc);
-  const setPageSettings = (0, import_react13.useCallback)(
+  const setPageSettings = (0, import_react14.useCallback)(
     (partial) => {
       doc.setPageSettings(partial);
     },
     [doc]
   );
-  const [pageConfigRequest, setPageConfigRequest] = (0, import_react13.useState)(null);
-  const requestPageConfig = (0, import_react13.useCallback)(() => {
+  const [pageConfigRequest, setPageConfigRequest] = (0, import_react14.useState)(null);
+  const requestPageConfig = (0, import_react14.useCallback)(() => {
     return new Promise((resolve) => {
       setPageConfigRequest({ initial: doc.getPageSettings(), resolve });
     });
   }, [doc]);
-  const resolvePageConfigRequest = (0, import_react13.useCallback)((applied) => {
+  const resolvePageConfigRequest = (0, import_react14.useCallback)((applied) => {
     setPageConfigRequest((prev) => {
       if (prev) prev.resolve(applied);
       return null;
     });
   }, []);
-  const [imageCaptionRequest, setImageCaptionRequest] = (0, import_react13.useState)(null);
-  const requestImageCaption = (0, import_react13.useCallback)(
+  const [imageCaptionRequest, setImageCaptionRequest] = (0, import_react14.useState)(null);
+  const requestImageCaption = (0, import_react14.useCallback)(
     (initialCaption = "", initialAlign = "center") => {
       return new Promise((resolve) => {
         setImageCaptionRequest({ initialCaption, initialAlign, resolve });
@@ -4010,12 +4641,82 @@ function useEditor(opts = {}) {
     },
     []
   );
-  const resolveImageCaptionRequest = (0, import_react13.useCallback)((result) => {
+  const resolveImageCaptionRequest = (0, import_react14.useCallback)((result) => {
     setImageCaptionRequest((prev) => {
       if (prev) prev.resolve(result);
       return null;
     });
   }, []);
+  const [formulaRequest, setFormulaRequest] = (0, import_react14.useState)(null);
+  const requestFormula = (0, import_react14.useCallback)(
+    (initialLatex = "", initialDisplay = false) => {
+      return new Promise((resolve) => {
+        setFormulaRequest({ initialLatex, initialDisplay, resolve });
+      });
+    },
+    []
+  );
+  const resolveFormulaRequest = (0, import_react14.useCallback)((result) => {
+    setFormulaRequest((prev) => {
+      if (prev) prev.resolve(result);
+      return null;
+    });
+  }, []);
+  const insertFormula = (0, import_react14.useCallback)(
+    async (latex, display) => {
+      const selectionAtCall = ctxRef.current.getSelection();
+      const embedAtCall = getSelectedEmbed();
+      let mathModule;
+      try {
+        mathModule = await import("@sofereditor/math");
+      } catch {
+        return;
+      }
+      const { renderLatexToSvg, measureExInPx, svgToDataUrl, svgToPngDataUrl } = mathModule;
+      const r = renderLatexToSvg(latex, display);
+      if (!r.ok) return;
+      const root = document.querySelector(".ed-root");
+      const exPx = root ? measureExInPx(root) : 8;
+      let w = Math.round(r.widthEx * exPx);
+      let h = Math.round(r.heightEx * exPx);
+      let vAlignScale = 1;
+      if (w > MAX_INSERT_WIDTH) {
+        vAlignScale = MAX_INSERT_WIDTH / w;
+        h = Math.round(h * MAX_INSERT_WIDTH / w);
+        w = MAX_INSERT_WIDTH;
+      }
+      const src = svgToDataUrl(r.svg);
+      let svgFallback;
+      try {
+        svgFallback = await svgToPngDataUrl(r.svg, w, h);
+      } catch {
+        svgFallback = void 0;
+      }
+      ctxRef.current.setSelection(selectionAtCall);
+      const inheritedLayout = {};
+      if ((0, import_core9.isFormulaEmbed)(embedAtCall?.embed)) {
+        const prev = embedAtCall.embed;
+        if (prev.layout !== void 0) inheritedLayout.layout = prev.layout;
+        if (prev.offsetX !== void 0) inheritedLayout.offsetX = prev.offsetX;
+        if (prev.offsetY !== void 0) inheritedLayout.offsetY = prev.offsetY;
+      }
+      (0, import_core9.insertImage)(ctxRef.current, {
+        type: "image",
+        src,
+        width: w,
+        height: h,
+        ...inheritedLayout,
+        ...display ? { align: "center" } : {},
+        formula: {
+          latex,
+          display,
+          ...display ? {} : { vAlign: `${r.vAlignEx * vAlignScale}ex` }
+        },
+        ...svgFallback ? { svgFallback } : {}
+      });
+    },
+    [getSelectedEmbed]
+  );
   return {
     doc,
     history,
@@ -4066,7 +4767,10 @@ function useEditor(opts = {}) {
     mergeRight,
     mergeDown,
     splitCell,
-    setColumnWidth,
+    setColumnBoundary,
+    setTableWidth,
+    setRowHeight,
+    setRowHeights,
     getTableRect,
     hasTableRectSelection,
     mergeSelection,
@@ -4083,6 +4787,10 @@ function useEditor(opts = {}) {
     imageCaptionRequest,
     requestImageCaption,
     resolveImageCaptionRequest,
+    formulaRequest,
+    requestFormula,
+    resolveFormulaRequest,
+    insertFormula,
     uploadImage: opts.uploadImage
   };
 }
@@ -4115,7 +4823,7 @@ function sameValue(a, b) {
 }
 
 // src/Editor.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var defaultFooter = ({ pageNumber, pageCount }) => `${pageNumber} / ${pageCount}`;
 function Editor({
   editor: providedEditor,
@@ -4128,15 +4836,15 @@ function Editor({
   const internal = useEditor();
   const editor = providedEditor ?? internal;
   const { doc, history, snapshot, getSelection, setSelection } = editor;
-  const rootRef = (0, import_react14.useRef)(null);
-  const isComposingRef = (0, import_react14.useRef)(false);
-  const pasteInFlightRef = (0, import_react14.useRef)(false);
-  const [hoveredBehind, setHoveredBehind] = (0, import_react14.useState)(null);
-  const hoveredBehindRef = (0, import_react14.useRef)(null);
-  const [hoveredLink, setHoveredLink] = (0, import_react14.useState)(null);
-  const hoveredLinkElRef = (0, import_react14.useRef)(null);
-  const suppressSelectionSyncRef = (0, import_react14.useRef)(false);
-  (0, import_react14.useEffect)(() => {
+  const rootRef = (0, import_react15.useRef)(null);
+  const isComposingRef = (0, import_react15.useRef)(false);
+  const pasteInFlightRef = (0, import_react15.useRef)(false);
+  const [hoveredBehind, setHoveredBehind] = (0, import_react15.useState)(null);
+  const hoveredBehindRef = (0, import_react15.useRef)(null);
+  const [hoveredLink, setHoveredLink] = (0, import_react15.useState)(null);
+  const hoveredLinkElRef = (0, import_react15.useRef)(null);
+  const suppressSelectionSyncRef = (0, import_react15.useRef)(false);
+  (0, import_react15.useEffect)(() => {
     if (!awareness) return;
     const root = rootRef.current;
     if (!root) return;
@@ -4146,7 +4854,7 @@ function Editor({
       const sel = readDomSelection(root);
       awareness.setLocalStateField(
         "cursor",
-        sel ? (0, import_core9.encodeSelection)(doc, sel) ?? null : null
+        sel ? (0, import_core10.encodeSelection)(doc, sel) ?? null : null
       );
     };
     const onSelChange = () => {
@@ -4166,13 +4874,13 @@ function Editor({
       awareness.setLocalStateField("cursor", null);
     };
   }, [awareness, doc]);
-  const ctxRef = (0, import_react14.useRef)({ doc, getSelection, setSelection });
+  const ctxRef = (0, import_react15.useRef)({ doc, getSelection, setSelection });
   ctxRef.current = { doc, getSelection, setSelection };
-  const historyRef = (0, import_react14.useRef)(history);
+  const historyRef = (0, import_react15.useRef)(history);
   historyRef.current = history;
-  const editorRef = (0, import_react14.useRef)(editor);
+  const editorRef = (0, import_react15.useRef)(editor);
   editorRef.current = editor;
-  (0, import_react14.useLayoutEffect)(() => {
+  (0, import_react15.useLayoutEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     if (isComposingRef.current) return;
@@ -4187,7 +4895,7 @@ function Editor({
     suppressSelectionSyncRef.current = true;
     applyDomSelection(root, editor.selection);
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const handler = () => {
@@ -4208,7 +4916,7 @@ function Editor({
     document.addEventListener("selectionchange", handler);
     return () => document.removeEventListener("selectionchange", handler);
   }, [setSelection]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     let drag = null;
@@ -4279,7 +4987,7 @@ function Editor({
       document.removeEventListener("pointerup", onPointerUp);
     };
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const onDragOver = (e) => {
@@ -4317,7 +5025,7 @@ function Editor({
       root.removeEventListener("drop", onDrop);
     };
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const onPointerDown = (e) => {
@@ -4345,7 +5053,27 @@ function Editor({
     root.addEventListener("pointerdown", onPointerDown);
     return () => root.removeEventListener("pointerdown", onPointerDown);
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const onDoubleClick = (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      if (!target.closest('img[data-embed="image"]')) return;
+      const ed = editorRef.current;
+      const sel = ed.getSelectedEmbed();
+      if (!sel || !(0, import_core10.isFormulaEmbed)(sel.embed)) return;
+      e.preventDefault();
+      const { latex, display } = sel.embed.formula;
+      void ed.requestFormula(latex, display).then((r) => {
+        if (!r) return;
+        void ed.insertFormula(r.latex, r.display);
+      });
+    };
+    root.addEventListener("dblclick", onDoubleClick);
+    return () => root.removeEventListener("dblclick", onDoubleClick);
+  }, []);
+  (0, import_react15.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const same = (a, b) => a === b || !!a && !!b && a.blockIndex === b.blockIndex && a.offset === b.offset && (a.cellIndex ?? -1) === (b.cellIndex ?? -1);
@@ -4398,7 +5126,7 @@ function Editor({
       if (raf) cancelAnimationFrame(raf);
     };
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const clear = () => {
@@ -4433,7 +5161,7 @@ function Editor({
       window.removeEventListener("scroll", clear, true);
     };
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const handler = (e) => {
@@ -4447,14 +5175,14 @@ function Editor({
           const data = e.data ?? "";
           if (data.length > 0) {
             e.preventDefault();
-            (0, import_core9.insertText)(ctx, data, ed.consumePendingMarks());
+            (0, import_core10.insertText)(ctx, data, ed.consumePendingMarks());
           }
           return;
         }
         case "insertLineBreak": {
           e.preventDefault();
           if (ed.getBlockType() === "listItem") {
-            (0, import_core9.insertText)(ctx, "\n", ed.consumePendingMarks());
+            (0, import_core10.insertText)(ctx, "\n", ed.consumePendingMarks());
             return;
           }
           const selEmbed = ed.getSelectedEmbed();
@@ -4474,7 +5202,7 @@ function Editor({
             });
           }
           if (ed.splitListItem()) return;
-          (0, import_core9.insertParagraph)(ctx);
+          (0, import_core10.insertParagraph)(ctx);
           return;
         }
         case "insertParagraph": {
@@ -4496,14 +5224,14 @@ function Editor({
             });
           }
           if (ed.splitListItem()) return;
-          (0, import_core9.insertParagraph)(ctx);
+          (0, import_core10.insertParagraph)(ctx);
           return;
         }
         case "insertReplacementText": {
           const text = e.data ?? e.dataTransfer?.getData("text/plain") ?? "";
           if (text.length > 0) {
             e.preventDefault();
-            (0, import_core9.insertText)(ctx, text, ed.consumePendingMarks());
+            (0, import_core10.insertText)(ctx, text, ed.consumePendingMarks());
           }
           return;
         }
@@ -4516,7 +5244,7 @@ function Editor({
         case "deleteSoftLineBackward":
         case "deleteHardLineBackward": {
           e.preventDefault();
-          (0, import_core9.deleteBackward)(ctx);
+          (0, import_core10.deleteBackward)(ctx);
           return;
         }
         case "deleteContentForward":
@@ -4524,7 +5252,7 @@ function Editor({
         case "deleteSoftLineForward":
         case "deleteHardLineForward": {
           e.preventDefault();
-          (0, import_core9.deleteForward)(ctx);
+          (0, import_core10.deleteForward)(ctx);
           return;
         }
         case "historyUndo": {
@@ -4546,15 +5274,15 @@ function Editor({
     root.addEventListener("beforeinput", handler);
     return () => root.removeEventListener("beforeinput", handler);
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const writeSlice = (e) => {
       const ctx = ctxRef.current;
-      const slice = (0, import_core9.serializeSelection)(ctx.doc, ctx.getSelection());
+      const slice = (0, import_core10.serializeSelection)(ctx.doc, ctx.getSelection());
       if (!slice || !e.clipboardData) return false;
-      e.clipboardData.setData(import_core9.SOFER_MIME, JSON.stringify(slice));
-      e.clipboardData.setData("text/plain", (0, import_core9.sliceToText)(slice));
+      e.clipboardData.setData(import_core10.SOFER_MIME, JSON.stringify(slice));
+      e.clipboardData.setData("text/plain", (0, import_core10.sliceToText)(slice));
       return true;
     };
     const onCopy = (e) => {
@@ -4562,7 +5290,7 @@ function Editor({
     };
     const onCut = (e) => {
       e.preventDefault();
-      if (writeSlice(e)) (0, import_core9.deleteSelection)(ctxRef.current);
+      if (writeSlice(e)) (0, import_core10.deleteSelection)(ctxRef.current);
     };
     const onPaste = (e) => {
       const ctx = ctxRef.current;
@@ -4573,11 +5301,11 @@ function Editor({
       e.preventDefault();
       switch (plan.kind) {
         case "sofer":
-          (0, import_core9.insertSlice)(ctx, plan.slice);
+          (0, import_core10.insertSlice)(ctx, plan.slice);
           return;
         case "html": {
           if (!sliceHasDataImageEmbeds(plan.slice)) {
-            (0, import_core9.insertSlice)(ctx, plan.slice);
+            (0, import_core10.insertSlice)(ctx, plan.slice);
             return;
           }
           if (pasteInFlightRef.current) {
@@ -4602,10 +5330,10 @@ function Editor({
                 );
                 const lastIndex = Math.max(0, ctxRef.current.doc.blockCount() - 1);
                 const lastText = ctxRef.current.doc.getBlockText(lastIndex);
-                insertAt = (0, import_core9.collapsedSelection)({ blockIndex: lastIndex, offset: lastText ? lastText.length : 0 });
+                insertAt = (0, import_core10.collapsedSelection)({ blockIndex: lastIndex, offset: lastText ? lastText.length : 0 });
               }
               ctxRef.current.setSelection(insertAt);
-              (0, import_core9.insertSlice)(ctxRef.current, resolved);
+              (0, import_core10.insertSlice)(ctxRef.current, resolved);
               if (userMovedAway) {
                 ctxRef.current.setSelection(liveSelection);
               }
@@ -4623,8 +5351,8 @@ function Editor({
         case "text": {
           const lines = plan.text.split(/\r\n|\r|\n/);
           lines.forEach((line, i) => {
-            if (i > 0) (0, import_core9.insertParagraph)(ctx);
-            if (line.length > 0) (0, import_core9.insertText)(ctx, line);
+            if (i > 0) (0, import_core10.insertParagraph)(ctx);
+            if (line.length > 0) (0, import_core10.insertText)(ctx, line);
           });
           return;
         }
@@ -4639,7 +5367,7 @@ function Editor({
       root.removeEventListener("paste", onPaste);
     };
   }, []);
-  const onKeyDown = (0, import_react14.useCallback)((e) => {
+  const onKeyDown = (0, import_react15.useCallback)((e) => {
     const ed = editorRef.current;
     const mod = e.metaKey || e.ctrlKey;
     if (e.key === "Tab") {
@@ -4670,11 +5398,11 @@ function Editor({
     if (!mod && (e.key === "Backspace" || e.key === "Delete")) {
       if (isComposingRef.current) return;
       const direction = e.key === "Backspace" ? "backward" : "forward";
-      const shouldIntercept = ed.getSelectedEmbed() != null || (0, import_core9.isEmbedAdjacentToCaret)(ctxRef.current, direction);
+      const shouldIntercept = ed.getSelectedEmbed() != null || (0, import_core10.isEmbedAdjacentToCaret)(ctxRef.current, direction);
       if (shouldIntercept) {
         e.preventDefault();
-        if (direction === "backward") (0, import_core9.deleteBackward)(ctxRef.current);
-        else (0, import_core9.deleteForward)(ctxRef.current);
+        if (direction === "backward") (0, import_core10.deleteBackward)(ctxRef.current);
+        else (0, import_core10.deleteForward)(ctxRef.current);
       }
       return;
     }
@@ -4724,17 +5452,17 @@ function Editor({
       });
     }
   }, []);
-  const onCompositionStart = (0, import_react14.useCallback)(() => {
+  const onCompositionStart = (0, import_react15.useCallback)(() => {
     isComposingRef.current = true;
   }, []);
-  const onCompositionEnd = (0, import_react14.useCallback)((e) => {
+  const onCompositionEnd = (0, import_react15.useCallback)((e) => {
     isComposingRef.current = false;
     if (e.data && e.data.length > 0) {
-      (0, import_core9.insertText)(ctxRef.current, e.data);
+      (0, import_core10.insertText)(ctxRef.current, e.data);
     }
   }, []);
-  const topLevels = (0, import_react14.useMemo)(() => groupTopLevels(snapshot.blocks), [snapshot]);
-  const topLevelsStructuralKey = (0, import_react14.useMemo)(
+  const topLevels = (0, import_react15.useMemo)(() => groupTopLevels(snapshot.blocks), [snapshot]);
+  const topLevelsStructuralKey = (0, import_react15.useMemo)(
     () => topLevels.map(
       (t) => t.kind === "list" ? `L:${t.listKind}:${t.items.length}:${t.ordinalStart}` : `B:${t.block.type}:${t.block.attrs.level ?? ""}`
     ).join("|"),
@@ -4756,7 +5484,7 @@ function Editor({
     [topLevelsStructuralKey, pageGeometry]
   );
   const effectiveLayout = paginated ? layout : defaultPageLayout(topLevels.length);
-  const pageStyle = (0, import_react14.useMemo)(
+  const pageStyle = (0, import_react15.useMemo)(
     () => paginated ? {
       "--ed-page-width": `${geom.width}px`,
       "--ed-page-height": `${geom.height}px`,
@@ -4775,7 +5503,7 @@ function Editor({
       geom.marginRight
     ]
   );
-  const body = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  const body = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ref: rootRef,
@@ -4801,7 +5529,7 @@ function Editor({
           const pageInlineStyle = pi === 0 && geom.firstPageExtraTop ? {
             "--ed-page-margin-top": `${geom.marginTop + geom.firstPageExtraTop}px`
           } : void 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "div",
             {
               className: "ed-page",
@@ -4809,15 +5537,15 @@ function Editor({
               "data-page-total": ctx.pageCount,
               style: pageInlineStyle,
               children: [
-                renderPageHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ed-page-header", contentEditable: false, children: renderPageHeader(ctx) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ed-page-content", children: page.slots.map((slot) => renderSlot(slot, topLevels)) }),
-                renderPageFooter && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ed-page-footer", contentEditable: false, children: renderPageFooter(ctx) })
+                renderPageHeader && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ed-page-header", contentEditable: false, children: renderPageHeader(ctx) }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ed-page-content", children: page.slots.map((slot) => renderSlot(slot, topLevels)) }),
+                renderPageFooter && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ed-page-footer", contentEditable: false, children: renderPageFooter(ctx) })
               ]
             },
             `page-${pi}`
           );
         }) : topLevels.map((t) => renderTopLevel(t)),
-        selectedEmbed && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        selectedEmbed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           ImageResizeOverlay,
           {
             rootRef,
@@ -4849,7 +5577,7 @@ function Editor({
             )
           }
         ),
-        hoveredBehind && !(selectedEmbed && selectedEmbed.blockIndex === hoveredBehind.blockIndex && selectedEmbed.offset === hoveredBehind.offset && (selectedEmbed.cellIndex ?? -1) === (hoveredBehind.cellIndex ?? -1)) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        hoveredBehind && !(selectedEmbed && selectedEmbed.blockIndex === hoveredBehind.blockIndex && selectedEmbed.offset === hoveredBehind.offset && (selectedEmbed.cellIndex ?? -1) === (hoveredBehind.cellIndex ?? -1)) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           BehindImageSelectAffordance,
           {
             rootRef,
@@ -4870,8 +5598,8 @@ function Editor({
             })
           }
         ),
-        hoveredLink && hoveredLink.href && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LinkHoverTooltip, { href: hoveredLink.href, rect: hoveredLink.rect }),
-        awareness && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        hoveredLink && hoveredLink.href && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LinkHoverTooltip, { href: hoveredLink.href, rect: hoveredLink.rect }),
+        awareness && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           RemoteCursorsOverlay,
           {
             rootRef,
@@ -4883,7 +5611,7 @@ function Editor({
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EditorProvider, { editor, children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EditorProvider, { editor, children: body });
 }
 function groupTopLevels(snapshot) {
   const out = [];
@@ -4937,7 +5665,7 @@ function renderSlot(slot, topLevels) {
       start: slot.fragment.start,
       end: slot.fragment.end
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       NodeView,
       {
         block: top.block,
@@ -4948,7 +5676,7 @@ function renderSlot(slot, topLevels) {
     );
   }
   if (slot.tableFragment && top.kind === "block" && top.block.type === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       NodeView,
       {
         block: top.block,
@@ -4968,7 +5696,7 @@ function renderTopLevel(top) {
     const tree = buildListTree(top.items);
     return renderListTree(tree, top, top.ordinalStart, `list-${top.key}`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NodeView, { block: top.block, index: top.blockIndex }, top.key);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NodeView, { block: top.block, index: top.blockIndex }, top.key);
 }
 function renderListFragment(top, frag) {
   const ranges = topLevelItemRanges(top.items);
@@ -5010,9 +5738,9 @@ function buildListTree(items) {
 function renderListTree(tree, top, start, key) {
   const className = `ed-list ed-list-${top.listKind}`;
   const style = top.listStyle ? { listStyleType: top.listStyle } : void 0;
-  const items = tree.map((node) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, `nested-${node.entry.index}`) : null }, node.entry.index));
+  const items = tree.map((node) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, `nested-${node.entry.index}`) : null }, node.entry.index));
   if (top.listKind === "ordered") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "ol",
       {
         className,
@@ -5024,12 +5752,12 @@ function renderListTree(tree, top, start, key) {
       key
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className, "data-list-kind": "bullet", style, children: items }, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className, "data-list-kind": "bullet", style, children: items }, key);
 }
 function renderNestedListTree(tree, key) {
   const kind = tree[0]?.entry.block.attrs.listKind === "ordered" ? "ordered" : "bullet";
   const Tag = kind === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tag, { className: `ed-list ed-list-${kind}`, "data-list-kind": kind, children: tree.map((node) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, `nested-${node.entry.index}`) : null }, node.entry.index)) }, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tag, { className: `ed-list ed-list-${kind}`, "data-list-kind": kind, children: tree.map((node) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, `nested-${node.entry.index}`) : null }, node.entry.index)) }, key);
 }
 function clampListLevel2(l) {
   if (typeof l !== "number" || !Number.isFinite(l)) return 0;
@@ -5057,10 +5785,76 @@ function caretRangeFromPoint(x, y) {
 }
 
 // src/Toolbar.tsx
-var import_react15 = require("react");
-var import_core10 = require("@sofereditor/core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var FONT_FAMILIES = ["Arial"];
+var import_react16 = require("react");
+var import_core11 = require("@sofereditor/core");
+
+// src/TableBorderPanel.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var BORDER_PRESETS = [
+  { key: "all", label: "Todas", glyph: "\u229E" },
+  { key: "outer", label: "S\xF3 externas", glyph: "\u25A1" },
+  { key: "horizontal", label: "S\xF3 horizontais", glyph: "\u25A4" },
+  { key: "vertical", label: "S\xF3 verticais", glyph: "\u25A5" },
+  { key: "none", label: "Nenhuma", glyph: "\u2B1A" }
+];
+var BORDER_MENU_GLYPH = "\u229E";
+function TableBorderPanel({
+  preset,
+  color,
+  onPreset,
+  onColor,
+  onResetColor
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ed-border-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ed-border-presets", children: BORDER_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "ed-border-preset",
+        "aria-pressed": preset === p.key,
+        title: p.label,
+        onClick: (e) => {
+          e.preventDefault();
+          onPreset(p.key);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ed-border-glyph", "aria-hidden": true, children: p.glyph }),
+          p.label
+        ]
+      },
+      p.key
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("hr", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "ed-toolbar-label ed-border-color", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ed-toolbar-swatch", "aria-hidden": true, style: { background: color } }),
+      "Cor da linha",
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "input",
+        {
+          type: "color",
+          value: color,
+          onChange: (e) => onColor(e.target.value),
+          "aria-label": "Cor da linha da borda"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ed-border-reset",
+        onClick: (e) => {
+          e.preventDefault();
+          onResetColor();
+        },
+        children: "Padr\xE3o"
+      }
+    )
+  ] });
+}
+
+// src/Toolbar.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var FONT_SIZES = ["8pt", "10pt", "11pt", "12pt", "14pt", "16pt", "18pt", "24pt", "32pt", "48pt"];
 var BLOCK_OPTIONS = [
   { value: "paragraph", label: "Par\xE1grafo", type: "paragraph" },
@@ -5134,11 +5928,6 @@ function Toolbar({ className }) {
   const onHighlightChange = (e) => {
     setMark("highlight", e.target.value);
   };
-  const onFontFamilyChange = (e) => {
-    const v = e.target.value;
-    if (v === "") removeMark("fontFamily");
-    else setMark("fontFamily", v);
-  };
   const onFontSizeChange = (e) => {
     const v = e.target.value;
     if (v === "") removeMark("fontSize");
@@ -5163,14 +5952,14 @@ function Toolbar({ className }) {
     }
     setAlign(value);
   };
-  const onInsertImageClick = (0, import_react15.useCallback)(
+  const onInsertImageClick = (0, import_react16.useCallback)(
     (e) => {
       e.preventDefault();
       imageInputRef.current?.click();
     },
     []
   );
-  const onImageInputChange = (0, import_react15.useCallback)(
+  const onImageInputChange = (0, import_react16.useCallback)(
     (e) => {
       const file = e.target.files?.[0];
       if (file) void editor.insertImageFromFile(file);
@@ -5178,14 +5967,14 @@ function Toolbar({ className }) {
     },
     [editor]
   );
-  const imageInputRef = (0, import_react15.useRef)(null);
+  const imageInputRef = (0, import_react16.useRef)(null);
   const onToggleDir = (e) => {
     e.preventDefault();
     const next = blockDir === "rtl" ? "ltr" : "rtl";
     setBlockAttr("dir", next);
   };
   const linkActive = isMarkActive("link");
-  const onLinkClick = (0, import_react15.useCallback)(
+  const onLinkClick = (0, import_react16.useCallback)(
     (e) => {
       e.preventDefault();
       const currentHref = active.link && typeof active.link === "object" && "href" in active.link ? active.link.href : "";
@@ -5199,7 +5988,6 @@ function Toolbar({ className }) {
   );
   const colorValue = typeof active.color === "string" ? active.color : "#000000";
   const highlightValue = typeof active.highlight === "string" ? active.highlight : "#fff176";
-  const fontFamilyValue = typeof active.fontFamily === "string" ? active.fontFamily : "";
   const fontSizeValue = typeof active.fontSize === "string" ? active.fontSize : "";
   const blockValue = blockSelectValue(blockType, blockLevel);
   const selectedEmbed = editor.getSelectedEmbed();
@@ -5216,7 +6004,7 @@ function Toolbar({ className }) {
       sel.cellIndex
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: className ?? "ed-toolbar",
@@ -5224,7 +6012,7 @@ function Toolbar({ className }) {
       "aria-label": "Editor toolbar",
       onMouseDown: stop,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "select",
           {
             className: "ed-toolbar-select",
@@ -5233,23 +6021,23 @@ function Toolbar({ className }) {
             onMouseDown: stop,
             "aria-label": "Tipo de bloco",
             children: [
-              blockValue === "" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "\u2014 (misto)" }),
-              BLOCK_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: o.value, children: o.label }, o.value))
+              blockValue === "" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "", children: "\u2014 (misto)" }),
+              BLOCK_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: o.value, children: o.label }, o.value))
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarkButton, { title: "Negrito (\u2318B)", pressed: isMarkActive("bold"), onClick: onToggle("bold"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "B" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarkButton, { title: "It\xE1lico (\u2318I)", pressed: isMarkActive("italic"), onClick: onToggle("italic"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("em", { children: "I" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarkButton, { title: "Sublinhado (\u2318U)", pressed: isMarkActive("underline"), onClick: onToggle("underline"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("u", { children: "U" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarkButton, { title: "Tachado (\u2318\u21E7X)", pressed: isMarkActive("strike"), onClick: onToggle("strike"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("s", { children: "S" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MarkButton, { title: "Negrito (\u2318B)", pressed: isMarkActive("bold"), onClick: onToggle("bold"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "B" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MarkButton, { title: "It\xE1lico (\u2318I)", pressed: isMarkActive("italic"), onClick: onToggle("italic"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("em", { children: "I" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MarkButton, { title: "Sublinhado (\u2318U)", pressed: isMarkActive("underline"), onClick: onToggle("underline"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("u", { children: "U" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MarkButton, { title: "Tachado (\u2318\u21E7X)", pressed: isMarkActive("strike"), onClick: onToggle("strike"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("s", { children: "S" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ed-toolbar-swatch", "aria-hidden": true, style: { background: colorValue } }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "color", value: colorValue, onChange: onColorChange, onMouseDown: stop, "aria-label": "Cor do texto" })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "ed-toolbar-label", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ed-toolbar-swatch", "aria-hidden": true, style: { background: colorValue } }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "color", value: colorValue, onChange: onColorChange, onMouseDown: stop, "aria-label": "Cor do texto" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               type: "button",
@@ -5263,8 +6051,8 @@ function Toolbar({ className }) {
               children: "\u232B"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", title: "Marca-texto", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "ed-toolbar-label", title: "Marca-texto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "span",
               {
                 className: "ed-toolbar-swatch ed-toolbar-swatch--highlight",
@@ -5272,7 +6060,7 @@ function Toolbar({ className }) {
                 style: { background: highlightValue }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "input",
               {
                 type: "color",
@@ -5283,7 +6071,7 @@ function Toolbar({ className }) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               type: "button",
@@ -5298,37 +6086,21 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-            "select",
-            {
-              className: "ed-toolbar-select",
-              value: fontFamilyValue,
-              onChange: onFontFamilyChange,
-              onMouseDown: stop,
-              "aria-label": "Fam\xEDlia da fonte",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "Fonte\u2026" }),
-                FONT_FAMILIES.map((f) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: f, children: f }, f))
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-            "select",
-            {
-              className: "ed-toolbar-select",
-              value: fontSizeValue,
-              onChange: onFontSizeChange,
-              onMouseDown: stop,
-              "aria-label": "Tamanho da fonte",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "Tamanho\u2026" }),
-                FONT_SIZES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: s, children: s }, s))
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: ALIGN_OPTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "select",
+          {
+            className: "ed-toolbar-select",
+            value: fontSizeValue,
+            onChange: onFontSizeChange,
+            onMouseDown: stop,
+            "aria-label": "Tamanho da fonte",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "", children: "Tamanho\u2026" }),
+              FONT_SIZES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: s, children: s }, s))
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Group, { children: ALIGN_OPTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             type: "button",
@@ -5341,7 +6113,7 @@ function Toolbar({ className }) {
           },
           a.value
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             type: "button",
@@ -5353,8 +6125,8 @@ function Toolbar({ className }) {
             children: blockDir === "rtl" ? "RTL" : "LTR"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               type: "button",
@@ -5369,7 +6141,7 @@ function Toolbar({ className }) {
               children: "\u2022"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               type: "button",
@@ -5384,7 +6156,7 @@ function Toolbar({ className }) {
               children: "1."
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               type: "button",
@@ -5398,7 +6170,7 @@ function Toolbar({ className }) {
               children: "\u21E4"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               type: "button",
@@ -5413,7 +6185,7 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             type: "button",
@@ -5425,12 +6197,12 @@ function Toolbar({ className }) {
             children: "\u{1F517}"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableMenu, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AnswerLinesMenu, {})
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableMenu, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnswerLinesMenu, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               type: "button",
@@ -5441,7 +6213,7 @@ function Toolbar({ className }) {
               children: "\u{1F5BC}"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "input",
             {
               ref: imageInputRef,
@@ -5450,10 +6222,26 @@ function Toolbar({ className }) {
               hidden: true,
               onChange: onImageInputChange
             }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ed-toolbar-btn",
+              title: "Inserir f\xF3rmula",
+              onMouseDown: stop,
+              onClick: (e) => {
+                e.preventDefault();
+                void editor.requestFormula().then((r) => r ? editor.insertFormula(r.latex, r.display) : void 0).catch((err) => {
+                  console.error("Falha ao inserir f\xF3rmula:", err);
+                });
+              },
+              children: "\u221Ax"
+            }
           )
         ] }),
-        selectedEmbed && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
-          IMAGE_LAYOUT_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        selectedEmbed && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Group, { children: [
+          IMAGE_LAYOUT_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               type: "button",
@@ -5466,7 +6254,25 @@ function Toolbar({ className }) {
             },
             opt.value
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          (0, import_core11.isFormulaEmbed)(selectedEmbed.embed) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ed-toolbar-btn",
+              title: "Editar f\xF3rmula",
+              onMouseDown: stop,
+              onClick: (e) => {
+                e.preventDefault();
+                if (!(0, import_core11.isFormulaEmbed)(selectedEmbed.embed)) return;
+                const f = selectedEmbed.embed.formula;
+                void editor.requestFormula(f.latex, f.display).then((r) => {
+                  if (!r) return;
+                  void editor.insertFormula(r.latex, r.display);
+                });
+              },
+              children: "Editar f\xF3rmula"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
               type: "button",
@@ -5496,7 +6302,7 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             type: "button",
@@ -5516,11 +6322,11 @@ function Toolbar({ className }) {
 }
 function AnswerLinesMenu() {
   const editor = useEditorContext();
-  const [open, setOpen] = (0, import_react15.useState)(false);
-  const [count, setCount] = (0, import_react15.useState)(5);
-  const [spacing, setSpacing] = (0, import_react15.useState)(1.5);
-  const rootRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const [count, setCount] = (0, import_react16.useState)(5);
+  const [spacing, setSpacing] = (0, import_react16.useState)(1.5);
+  const rootRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     if (!open) return;
     const onDown = (e) => {
       if (!rootRef.current) return;
@@ -5530,9 +6336,9 @@ function AnswerLinesMenu() {
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  const clamped = Math.max(1, Math.min(import_core10.ANSWER_LINE_MAX, Math.trunc(count) || 1));
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const clamped = Math.max(1, Math.min(import_core11.ANSWER_LINE_MAX, Math.trunc(count) || 1));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
@@ -5547,7 +6353,7 @@ function AnswerLinesMenu() {
         children: "\u2630"
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: "ed-table-popover ed-answerlines-popover",
@@ -5556,37 +6362,37 @@ function AnswerLinesMenu() {
           if (!keepsOwnMouseDown(e.target)) e.preventDefault();
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "ed-toolbar-label", children: [
             "Quantidade",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "input",
               {
                 type: "number",
                 min: 1,
-                max: import_core10.ANSWER_LINE_MAX,
+                max: import_core11.ANSWER_LINE_MAX,
                 value: count,
                 onChange: (e) => setCount(Number(e.target.value)),
                 "aria-label": "Quantidade de linhas"
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "ed-toolbar-label", children: [
             "Entrelinha",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               "select",
               {
                 value: String(spacing),
                 onChange: (e) => setSpacing(Number(e.target.value)),
                 "aria-label": "Entrelinha",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "1", children: "Simples" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "1.5", children: "1,5" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "2", children: "Duplo" })
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "1", children: "Simples" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "1.5", children: "1,5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "2", children: "Duplo" })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "button",
             {
               type: "button",
@@ -5610,9 +6416,10 @@ function AnswerLinesMenu() {
 function TableMenu() {
   const editor = useEditorContext();
   const inTable = editor.isInTable();
-  const [open, setOpen] = (0, import_react15.useState)(false);
-  const rootRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const [bordersOpen, setBordersOpen] = (0, import_react16.useState)(false);
+  const rootRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     if (!open) return;
     const onDown = (e) => {
       if (!rootRef.current) return;
@@ -5622,8 +6429,11 @@ function TableMenu() {
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  (0, import_react16.useEffect)(() => {
+    if (!open) setBordersOpen(false);
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
@@ -5638,7 +6448,7 @@ function TableMenu() {
         children: "\u25A6"
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: "ed-table-popover",
@@ -5647,7 +6457,7 @@ function TableMenu() {
           if (!keepsOwnMouseDown(e.target)) e.preventDefault();
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             TableSizePicker,
             {
               onPick: (rows, cols) => {
@@ -5656,34 +6466,34 @@ function TableMenu() {
               }
             }
           ),
-          inTable && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ed-table-actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+          inTable && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ed-table-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertRowAbove();
             }, children: "Inserir linha acima" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertRowBelow();
             }, children: "Inserir linha abaixo" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertColumnLeft();
             }, children: "Inserir coluna \xE0 esquerda" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertColumnRight();
             }, children: "Inserir coluna \xE0 direita" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.deleteCurrentRow();
             }, children: "Excluir linha" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.deleteCurrentColumn();
             }, children: "Excluir coluna" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
-            editor.hasTableRectSelection() && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", {}),
+            editor.hasTableRectSelection() && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -5694,21 +6504,21 @@ function TableMenu() {
                 children: "Mesclar c\xE9lulas selecionadas"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.mergeRight();
             }, children: "Mesclar com c\xE9lula \xE0 direita" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.mergeDown();
             }, children: "Mesclar com c\xE9lula abaixo" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.splitCell();
             }, children: "Dividir c\xE9lulas mescladas" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label ed-table-bgcolor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "ed-toolbar-label ed-table-bgcolor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "span",
                 {
                   className: "ed-toolbar-swatch",
@@ -5717,7 +6527,7 @@ function TableMenu() {
                 }
               ),
               "Cor de fundo da c\xE9lula",
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "input",
                 {
                   type: "color",
@@ -5727,62 +6537,39 @@ function TableMenu() {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.setCellBackground(null);
             }, children: "Remover cor de fundo" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", children: [
-              "Bordas",
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                "select",
-                {
-                  value: editor.getTableBorderPreset(),
-                  onChange: (e) => editor.setTableBorderPreset(e.target.value),
-                  "aria-label": "Bordas da tabela",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "all", children: "Todas" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "outer", children: "S\xF3 externas" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "horizontal", children: "S\xF3 horizontais" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "vertical", children: "S\xF3 verticais" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "none", children: "Nenhuma" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label ed-table-bgcolor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                "span",
-                {
-                  className: "ed-toolbar-swatch",
-                  "aria-hidden": true,
-                  style: { background: editor.getTableBorderColor() ?? import_core10.TABLE_BORDER_COLOR }
-                }
-              ),
-              "Cor da borda",
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                "input",
-                {
-                  type: "color",
-                  value: editor.getTableBorderColor() ?? import_core10.TABLE_BORDER_COLOR,
-                  onChange: (e) => editor.setTableBorderColor(e.target.value),
-                  "aria-label": "Cor da borda"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
-                onClick: () => {
-                  setOpen(false);
-                  editor.setTableBorderColor(null);
+                className: "ed-border-toggle",
+                "aria-pressed": bordersOpen,
+                "aria-expanded": bordersOpen,
+                title: "Bordas da tabela",
+                "aria-label": "Bordas da tabela",
+                onClick: (e) => {
+                  e.preventDefault();
+                  setBordersOpen((v) => !v);
                 },
-                children: "Restaurar cor padr\xE3o"
+                children: BORDER_MENU_GLYPH
+              }
+            ),
+            bordersOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              TableBorderPanel,
+              {
+                preset: editor.getTableBorderPreset(),
+                color: editor.getTableBorderColor() ?? import_core11.TABLE_BORDER_COLOR,
+                onPreset: (p) => editor.setTableBorderPreset(p),
+                onColor: (c) => editor.setTableBorderColor(c),
+                onResetColor: () => editor.setTableBorderColor(null)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -5803,11 +6590,11 @@ function TableMenu() {
 var PICKER_MAX_ROWS = 8;
 var PICKER_MAX_COLS = 10;
 function TableSizePicker({ onPick }) {
-  const [hover, setHover] = (0, import_react15.useState)(null);
+  const [hover, setHover] = (0, import_react16.useState)(null);
   const label = hover ? `${hover.r + 1} \xD7 ${hover.c + 1}` : "Inserir tabela";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ed-table-picker", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ed-table-picker-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ed-table-picker", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ed-table-picker-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         className: "ed-table-picker-grid",
@@ -5820,7 +6607,7 @@ function TableSizePicker({ onPick }) {
           { length: PICKER_MAX_ROWS },
           (_, r) => Array.from({ length: PICKER_MAX_COLS }, (_2, c) => {
             const filled = hover != null && r <= hover.r && c <= hover.c;
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -5850,10 +6637,10 @@ function blockSelectValue(type, level) {
   return type;
 }
 function Group({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ed-toolbar-group", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ed-toolbar-group", children });
 }
 function MarkButton({ title, pressed, onClick, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "button",
     {
       type: "button",
@@ -5871,6 +6658,7 @@ function MarkButton({ title, pressed, onClick, children }) {
   A4_PAGE,
   Editor,
   EditorProvider,
+  FormulaDialog,
   ImageCaptionDialog,
   LinkDialog,
   NodeView,