@sofereditor/react 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,16 +1,23 @@
 // src/Editor.tsx
 import {
-  useCallback as useCallback5,
-  useEffect as useEffect7,
-  useLayoutEffect as useLayoutEffect4,
+  useCallback as useCallback7,
+  useEffect as useEffect9,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo4,
-  useRef as useRef10
+  useRef as useRef11,
+  useState as useState10
 } from "react";
 import {
   deleteBackward,
   deleteForward,
+  deleteSelection,
+  encodeSelection,
   insertParagraph,
-  insertText
+  insertSlice,
+  insertText,
+  serializeSelection,
+  sliceToText,
+  SOFER_MIME
 } from "@sofereditor/core";
 
 // src/dom-bridge.ts
@@ -211,6 +218,7 @@ function locatePoint(root, pos) {
   let remaining = Math.max(0, pos.offset - containerStart);
   let result = null;
   let lastImg = null;
+  let lastText = null;
   function visit(n) {
     if (result) return;
     if (n.nodeType === Node.TEXT_NODE) {
@@ -221,6 +229,7 @@ function locatePoint(root, pos) {
       }
       remaining -= len;
       lastImg = null;
+      lastText = n;
       return;
     }
     if (n.nodeType !== Node.ELEMENT_NODE) return;
@@ -250,6 +259,10 @@ function locatePoint(root, pos) {
     const parent = lastImg.parentNode;
     if (parent) return { node: parent, offset: indexInParent(lastImg) + 1 };
   }
+  if (lastText) {
+    const t = lastText;
+    return { node: t, offset: (t.textContent ?? "").length };
+  }
   return { node: container, offset: 0 };
 }
 function selectionsEqual(a, b) {
@@ -270,6 +283,9 @@ function applyDomSelection(root, modelSel) {
   const anchorPt = locatePoint(root, modelSel.anchor);
   const focusPt = locatePoint(root, modelSel.focus);
   if (!anchorPt || !focusPt) return;
+  if (domSel.anchorNode === anchorPt.node && domSel.anchorOffset === anchorPt.offset && domSel.focusNode === focusPt.node && domSel.focusOffset === focusPt.offset) {
+    return;
+  }
   try {
     domSel.removeAllRanges();
     domSel.setBaseAndExtent(anchorPt.node, anchorPt.offset, focusPt.node, focusPt.offset);
@@ -277,22 +293,262 @@ function applyDomSelection(root, modelSel) {
   }
 }
 
+// src/BehindImageSelectAffordance.tsx
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ACCENT = "#3b82f6";
+function BehindImageSelectAffordance({
+  blockIndex,
+  offset,
+  cellIndex,
+  rootRef,
+  onSelect
+}) {
+  const [rect, setRect] = useState(null);
+  const locateImage = useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return null;
+    let container = null;
+    if (cellIndex != null) {
+      container = root.querySelector(
+        `[data-block-index="${blockIndex}"] [data-cell-index="${cellIndex}"]`
+      );
+    } else {
+      container = getFragmentForOffset(root, blockIndex, offset);
+    }
+    if (!container) return null;
+    const fragmentStart = container.dataset.fragmentStart ? Number.parseInt(container.dataset.fragmentStart, 10) || 0 : 0;
+    const localOffset = offset - fragmentStart;
+    return container.querySelector(
+      `img[data-embed="image"][data-embed-offset="${localOffset}"]`
+    );
+  }, [rootRef, blockIndex, offset, cellIndex]);
+  const measure = useCallback(() => {
+    const img = locateImage();
+    const root = rootRef.current;
+    if (!img || !root) {
+      setRect((prev) => prev === null ? prev : null);
+      return;
+    }
+    const r = img.getBoundingClientRect();
+    const rr = root.getBoundingClientRect();
+    const next = {
+      top: r.top - rr.top + root.scrollTop,
+      left: r.left - rr.left + root.scrollLeft,
+      width: r.width,
+      height: r.height
+    };
+    setRect(
+      (prev) => prev && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
+    );
+  }, [locateImage, rootRef]);
+  useLayoutEffect(() => {
+    measure();
+    let cancelled = false;
+    const remeasure = () => {
+      if (!cancelled) measure();
+    };
+    const id = typeof requestAnimationFrame === "function" ? requestAnimationFrame(remeasure) : (queueMicrotask(remeasure), 0);
+    return () => {
+      cancelled = true;
+      if (typeof cancelAnimationFrame === "function" && typeof id === "number" && id > 0) {
+        cancelAnimationFrame(id);
+      }
+    };
+  }, [measure]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const onScroll = () => measure();
+    window.addEventListener("resize", onScroll);
+    root.addEventListener("scroll", onScroll);
+    return () => {
+      window.removeEventListener("resize", onScroll);
+      root.removeEventListener("scroll", onScroll);
+    };
+  }, [measure, rootRef]);
+  if (!rect) return null;
+  const outlineStyle = {
+    position: "absolute",
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+    border: `1.5px dashed ${ACCENT}`,
+    borderRadius: 2,
+    boxSizing: "border-box",
+    pointerEvents: "none",
+    zIndex: 4
+  };
+  const badgeStyle = {
+    position: "absolute",
+    top: rect.top - 2,
+    left: rect.left - 2,
+    width: 24,
+    height: 24,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: ACCENT,
+    color: "#fff",
+    borderRadius: 4,
+    cursor: "pointer",
+    pointerEvents: "auto",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+    zIndex: 5
+  };
+  const onBadgeDown = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onSelect();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: outlineStyle, contentEditable: false, "aria-hidden": true }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: badgeStyle,
+        contentEditable: false,
+        onPointerDown: onBadgeDown,
+        role: "button",
+        "aria-label": "Selecionar imagem",
+        title: "Selecionar imagem",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx("path", { d: "M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20" })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/LinkHoverTooltip.tsx
+import { createPortal } from "react-dom";
+
+// src/platform.ts
+var IS_MAC = (() => {
+  if (typeof navigator === "undefined") return false;
+  const platform = navigator.userAgentData?.platform || navigator.platform || navigator.userAgent || "";
+  return /mac|iphone|ipad|ipod/i.test(platform);
+})();
+var MOD_SYMBOL = IS_MAC ? "\u2318" : "\u2303";
+function hasOpenModifier(e) {
+  return IS_MAC ? e.metaKey : e.ctrlKey;
+}
+
+// src/LinkHoverTooltip.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MAX_WIDTH = 360;
+var GAP = 6;
+function LinkHoverTooltip({ href, rect }) {
+  const above = rect.top > 48;
+  const viewportW = typeof window !== "undefined" ? window.innerWidth : MAX_WIDTH + 16;
+  const left = Math.max(8, Math.min(rect.left, viewportW - MAX_WIDTH - 8));
+  const style = {
+    position: "fixed",
+    left,
+    top: above ? rect.top - GAP : rect.bottom + GAP,
+    transform: above ? "translateY(-100%)" : void 0,
+    maxWidth: MAX_WIDTH,
+    background: "#1f2937",
+    color: "#fff",
+    fontSize: 12,
+    lineHeight: 1.4,
+    padding: "6px 9px",
+    borderRadius: 6,
+    boxShadow: "0 4px 14px rgba(0,0,0,0.28)",
+    zIndex: 60,
+    pointerEvents: "none"
+  };
+  const urlStyle = {
+    display: "block",
+    maxWidth: MAX_WIDTH - 18,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontWeight: 600
+  };
+  const hintStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    marginTop: 3,
+    fontSize: 11,
+    opacity: 0.85
+  };
+  const keycapStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 16,
+    height: 16,
+    padding: "0 4px",
+    fontSize: 11,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    background: "rgba(255,255,255,0.16)",
+    border: "1px solid rgba(255,255,255,0.4)",
+    borderRadius: 4,
+    boxShadow: "inset 0 -1px 0 rgba(0,0,0,0.25)"
+  };
+  if (typeof document === "undefined") return /* @__PURE__ */ jsx2(Fragment2, {});
+  return createPortal(
+    /* @__PURE__ */ jsxs2("div", { style, contentEditable: false, "aria-hidden": true, role: "tooltip", children: [
+      /* @__PURE__ */ jsx2("span", { style: urlStyle, children: href }),
+      /* @__PURE__ */ jsxs2("span", { style: hintStyle, children: [
+        /* @__PURE__ */ jsx2("kbd", { style: keycapStyle, children: MOD_SYMBOL }),
+        /* @__PURE__ */ jsx2("span", { style: { opacity: 0.8 }, children: "+ clique para abrir" })
+      ] })
+    ] }),
+    document.body
+  );
+}
+
 // src/EditorContext.tsx
 import { createContext, useContext } from "react";
 
 // src/LinkDialog.tsx
 import {
-  useEffect,
+  useEffect as useEffect2,
   useRef,
-  useState
+  useState as useState2
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/dialogCenterStyle.ts
+var DIALOG_CENTER_STYLE = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  margin: 0,
+  maxHeight: "90vh",
+  overflow: "auto"
+};
+
+// src/LinkDialog.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function LinkDialog() {
   const { linkRequest, resolveLinkRequest } = useEditorContext();
   const dialogRef = useRef(null);
   const inputRef = useRef(null);
-  const [href, setHref] = useState("");
-  useEffect(() => {
+  const [href, setHref] = useState2("");
+  useEffect2(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (linkRequest) {
@@ -320,20 +576,21 @@ function LinkDialog() {
   const onCancel = () => {
     resolveLinkRequest(null);
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "dialog",
     {
       ref: dialogRef,
       className: "ed-link-dialog",
+      style: DIALOG_CENTER_STYLE,
       onClose: onCancel,
       onCancel: (e) => {
         e.preventDefault();
         onCancel();
       },
-      children: /* @__PURE__ */ jsxs("form", { onSubmit, className: "ed-link-dialog-form", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ed-link-dialog-row", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "ed-link-href", children: "URL" }),
-          /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs3("form", { onSubmit, className: "ed-link-dialog-form", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "ed-link-dialog-row", children: [
+          /* @__PURE__ */ jsx3("label", { htmlFor: "ed-link-href", children: "URL" }),
+          /* @__PURE__ */ jsx3(
             "input",
             {
               id: "ed-link-href",
@@ -347,11 +604,11 @@ function LinkDialog() {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ed-link-dialog-actions", children: [
-          linkRequest.initialHref ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onRemove, className: "ed-link-dialog-remove", children: "Remover link" }) : /* @__PURE__ */ jsx("span", {}),
-          /* @__PURE__ */ jsxs("div", { className: "ed-link-dialog-confirm", children: [
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
-            /* @__PURE__ */ jsx("button", { type: "submit", className: "ed-link-dialog-apply", children: "Aplicar" })
+        /* @__PURE__ */ jsxs3("div", { className: "ed-link-dialog-actions", children: [
+          linkRequest.initialHref ? /* @__PURE__ */ jsx3("button", { type: "button", onClick: onRemove, className: "ed-link-dialog-remove", children: "Remover link" }) : /* @__PURE__ */ jsx3("span", {}),
+          /* @__PURE__ */ jsxs3("div", { className: "ed-link-dialog-confirm", children: [
+            /* @__PURE__ */ jsx3("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
+            /* @__PURE__ */ jsx3("button", { type: "submit", className: "ed-link-dialog-apply", children: "Aplicar" })
           ] })
         ] })
       ] })
@@ -360,7 +617,7 @@ function LinkDialog() {
 }
 
 // src/PageConfigDialog.tsx
-import { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import {
   MARGIN_PRESETS,
   PAGE_PRESETS,
@@ -368,19 +625,19 @@ import {
   mmToPx,
   pxToMm
 } from "@sofereditor/core";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function PageConfigDialog() {
   const { pageConfigRequest, resolvePageConfigRequest, setPageSettings } = useEditorContext();
   const dialogRef = useRef2(null);
-  const [sizePreset, setSizePreset] = useState2("a4");
-  const [widthMm, setWidthMm] = useState2(210);
-  const [heightMm, setHeightMm] = useState2(297);
-  const [marginPreset, setMarginPreset] = useState2("normal");
-  const [marginTopMm, setMarginTopMm] = useState2(25.4);
-  const [marginBottomMm, setMarginBottomMm] = useState2(25.4);
-  const [marginLeftMm, setMarginLeftMm] = useState2(25.4);
-  const [marginRightMm, setMarginRightMm] = useState2(25.4);
-  useEffect2(() => {
+  const [sizePreset, setSizePreset] = useState3("a4");
+  const [widthMm, setWidthMm] = useState3(210);
+  const [heightMm, setHeightMm] = useState3(297);
+  const [marginPreset, setMarginPreset] = useState3("normal");
+  const [marginTopMm, setMarginTopMm] = useState3(25.4);
+  const [marginBottomMm, setMarginBottomMm] = useState3(25.4);
+  const [marginLeftMm, setMarginLeftMm] = useState3(25.4);
+  const [marginRightMm, setMarginRightMm] = useState3(25.4);
+  useEffect3(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (pageConfigRequest) {
@@ -399,13 +656,13 @@ function PageConfigDialog() {
       dialog.close();
     }
   }, [pageConfigRequest]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (sizePreset === "custom") return;
     const p = PAGE_PRESETS[sizePreset];
     setWidthMm(roundMm(pxToMm(p.width)));
     setHeightMm(roundMm(pxToMm(p.height)));
   }, [sizePreset]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (marginPreset === "custom") return;
     const px = MARGIN_PRESETS[marginPreset];
     const mm = roundMm(pxToMm(px));
@@ -437,23 +694,24 @@ function PageConfigDialog() {
     resolvePageConfigRequest(true);
   };
   const onCancel = () => resolvePageConfigRequest(false);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     "dialog",
     {
       ref: dialogRef,
       className: "ed-page-config-dialog",
+      style: DIALOG_CENTER_STYLE,
       onClose: onCancel,
       onCancel: (e) => {
         e.preventDefault();
         onCancel();
       },
-      children: /* @__PURE__ */ jsxs2("form", { onSubmit: onApply, className: "ed-page-config-form", children: [
-        /* @__PURE__ */ jsx2("h2", { children: "Configurar p\xE1gina" }),
-        /* @__PURE__ */ jsxs2("fieldset", { children: [
-          /* @__PURE__ */ jsx2("legend", { children: "Tamanho" }),
-          /* @__PURE__ */ jsxs2("div", { className: "ed-page-config-row", children: [
-            /* @__PURE__ */ jsxs2("label", { children: [
-              /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsxs4("form", { onSubmit: onApply, className: "ed-page-config-form", children: [
+        /* @__PURE__ */ jsx4("h2", { children: "Configurar p\xE1gina" }),
+        /* @__PURE__ */ jsxs4("fieldset", { children: [
+          /* @__PURE__ */ jsx4("legend", { children: "Tamanho" }),
+          /* @__PURE__ */ jsxs4("div", { className: "ed-page-config-row", children: [
+            /* @__PURE__ */ jsxs4("label", { children: [
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "radio",
@@ -465,8 +723,8 @@ function PageConfigDialog() {
               " ",
               "A4 (210 \xD7 297 mm)"
             ] }),
-            /* @__PURE__ */ jsxs2("label", { children: [
-              /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsxs4("label", { children: [
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "radio",
@@ -478,8 +736,8 @@ function PageConfigDialog() {
               " ",
               "Carta (216 \xD7 279 mm)"
             ] }),
-            /* @__PURE__ */ jsxs2("label", { children: [
-              /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsxs4("label", { children: [
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "radio",
@@ -491,8 +749,8 @@ function PageConfigDialog() {
               " ",
               "Of\xEDcio (216 \xD7 330 mm)"
             ] }),
-            /* @__PURE__ */ jsxs2("label", { children: [
-              /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsxs4("label", { children: [
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "radio",
@@ -505,11 +763,11 @@ function PageConfigDialog() {
               "Personalizado"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "ed-page-config-row", children: [
-            /* @__PURE__ */ jsxs2("label", { children: [
+          /* @__PURE__ */ jsxs4("div", { className: "ed-page-config-row", children: [
+            /* @__PURE__ */ jsxs4("label", { children: [
               "Largura (mm)",
               " ",
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "number",
@@ -522,10 +780,10 @@ function PageConfigDialog() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs2("label", { children: [
+            /* @__PURE__ */ jsxs4("label", { children: [
               "Altura (mm)",
               " ",
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "number",
@@ -538,7 +796,7 @@ function PageConfigDialog() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs2("span", { className: "ed-page-config-preview", children: [
+            /* @__PURE__ */ jsxs4("span", { className: "ed-page-config-preview", children: [
               previewPx.width,
               " \xD7 ",
               previewPx.height,
@@ -546,11 +804,11 @@ function PageConfigDialog() {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs2("fieldset", { children: [
-          /* @__PURE__ */ jsx2("legend", { children: "Margens" }),
-          /* @__PURE__ */ jsxs2("div", { className: "ed-page-config-row", children: [
-            /* @__PURE__ */ jsxs2("label", { children: [
-              /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs4("fieldset", { children: [
+          /* @__PURE__ */ jsx4("legend", { children: "Margens" }),
+          /* @__PURE__ */ jsxs4("div", { className: "ed-page-config-row", children: [
+            /* @__PURE__ */ jsxs4("label", { children: [
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "radio",
@@ -562,8 +820,8 @@ function PageConfigDialog() {
               " ",
               "Normal (25,4 mm)"
             ] }),
-            /* @__PURE__ */ jsxs2("label", { children: [
-              /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsxs4("label", { children: [
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "radio",
@@ -575,8 +833,8 @@ function PageConfigDialog() {
               " ",
               "Estreita (12,7 mm)"
             ] }),
-            /* @__PURE__ */ jsxs2("label", { children: [
-              /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsxs4("label", { children: [
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "radio",
@@ -588,8 +846,8 @@ function PageConfigDialog() {
               " ",
               "Larga (50,8 mm)"
             ] }),
-            /* @__PURE__ */ jsxs2("label", { children: [
-              /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsxs4("label", { children: [
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "radio",
@@ -602,11 +860,11 @@ function PageConfigDialog() {
               "Personalizada"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "ed-page-config-row", children: [
-            /* @__PURE__ */ jsxs2("label", { children: [
+          /* @__PURE__ */ jsxs4("div", { className: "ed-page-config-row", children: [
+            /* @__PURE__ */ jsxs4("label", { children: [
               "Topo",
               " ",
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "number",
@@ -621,10 +879,10 @@ function PageConfigDialog() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs2("label", { children: [
+            /* @__PURE__ */ jsxs4("label", { children: [
               "Inferior",
               " ",
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "number",
@@ -639,10 +897,10 @@ function PageConfigDialog() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs2("label", { children: [
+            /* @__PURE__ */ jsxs4("label", { children: [
               "Esquerda",
               " ",
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "number",
@@ -657,10 +915,10 @@ function PageConfigDialog() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs2("label", { children: [
+            /* @__PURE__ */ jsxs4("label", { children: [
               "Direita",
               " ",
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "number",
@@ -677,9 +935,9 @@ function PageConfigDialog() {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "ed-page-config-actions", children: [
-          /* @__PURE__ */ jsx2("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
-          /* @__PURE__ */ jsx2("button", { type: "submit", className: "ed-page-config-apply", children: "Aplicar" })
+        /* @__PURE__ */ jsxs4("div", { className: "ed-page-config-actions", children: [
+          /* @__PURE__ */ jsx4("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
+          /* @__PURE__ */ jsx4("button", { type: "submit", className: "ed-page-config-apply", children: "Aplicar" })
         ] })
       ] })
     }
@@ -714,15 +972,15 @@ function detectMarginPreset(s) {
 }
 
 // src/ImageCaptionDialog.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ImageCaptionDialog() {
   const { imageCaptionRequest, resolveImageCaptionRequest } = useEditorContext();
   const dialogRef = useRef3(null);
   const inputRef = useRef3(null);
-  const [caption, setCaption] = useState3("");
-  const [align, setAlign] = useState3("center");
-  useEffect3(() => {
+  const [caption, setCaption] = useState4("");
+  const [align, setAlign] = useState4("center");
+  useEffect4(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (imageCaptionRequest) {
@@ -747,20 +1005,21 @@ function ImageCaptionDialog() {
   };
   const onRemove = () => resolveImageCaptionRequest({ caption: "", align });
   const onCancel = () => resolveImageCaptionRequest(null);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     "dialog",
     {
       ref: dialogRef,
       className: "ed-caption-dialog ed-link-dialog",
+      style: DIALOG_CENTER_STYLE,
       onClose: onCancel,
       onCancel: (e) => {
         e.preventDefault();
         onCancel();
       },
-      children: /* @__PURE__ */ jsxs3("form", { onSubmit, className: "ed-link-dialog-form", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "ed-link-dialog-row", children: [
-          /* @__PURE__ */ jsx3("label", { htmlFor: "ed-caption-input", children: "Legenda" }),
-          /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsxs5("form", { onSubmit, className: "ed-link-dialog-form", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "ed-link-dialog-row", children: [
+          /* @__PURE__ */ jsx5("label", { htmlFor: "ed-caption-input", children: "Legenda" }),
+          /* @__PURE__ */ jsx5(
             "input",
             {
               id: "ed-caption-input",
@@ -773,10 +1032,10 @@ function ImageCaptionDialog() {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "ed-link-dialog-row", children: [
-          /* @__PURE__ */ jsx3("span", { children: "Alinhamento" }),
-          /* @__PURE__ */ jsx3("div", { className: "ed-caption-align-group", role: "radiogroup", "aria-label": "Alinhamento da legenda", children: ["left", "center", "right"].map((value) => /* @__PURE__ */ jsxs3("label", { className: "ed-caption-align-option", children: [
-            /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs5("div", { className: "ed-link-dialog-row", children: [
+          /* @__PURE__ */ jsx5("span", { children: "Alinhamento" }),
+          /* @__PURE__ */ jsx5("div", { className: "ed-caption-align-group", role: "radiogroup", "aria-label": "Alinhamento da legenda", children: ["left", "center", "right"].map((value) => /* @__PURE__ */ jsxs5("label", { className: "ed-caption-align-option", children: [
+            /* @__PURE__ */ jsx5(
               "input",
               {
                 type: "radio",
@@ -789,11 +1048,11 @@ function ImageCaptionDialog() {
             value === "left" ? "Esquerda" : value === "center" ? "Centro" : "Direita"
           ] }, value)) })
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "ed-link-dialog-actions", children: [
-          imageCaptionRequest.initialCaption ? /* @__PURE__ */ jsx3("button", { type: "button", onClick: onRemove, className: "ed-link-dialog-remove", children: "Remover legenda" }) : /* @__PURE__ */ jsx3("span", {}),
-          /* @__PURE__ */ jsxs3("div", { className: "ed-link-dialog-confirm", children: [
-            /* @__PURE__ */ jsx3("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
-            /* @__PURE__ */ jsx3("button", { type: "submit", className: "ed-link-dialog-apply", children: "Aplicar" })
+        /* @__PURE__ */ jsxs5("div", { className: "ed-link-dialog-actions", children: [
+          imageCaptionRequest.initialCaption ? /* @__PURE__ */ jsx5("button", { type: "button", onClick: onRemove, className: "ed-link-dialog-remove", children: "Remover legenda" }) : /* @__PURE__ */ jsx5("span", {}),
+          /* @__PURE__ */ jsxs5("div", { className: "ed-link-dialog-confirm", children: [
+            /* @__PURE__ */ jsx5("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
+            /* @__PURE__ */ jsx5("button", { type: "submit", className: "ed-link-dialog-apply", children: "Aplicar" })
           ] })
         ] })
       ] })
@@ -802,14 +1061,14 @@ function ImageCaptionDialog() {
 }
 
 // src/EditorContext.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var EditorContext = createContext(null);
 function EditorProvider({ editor, children }) {
-  return /* @__PURE__ */ jsxs4(EditorContext.Provider, { value: editor, children: [
+  return /* @__PURE__ */ jsxs6(EditorContext.Provider, { value: editor, children: [
     children,
-    /* @__PURE__ */ jsx4(LinkDialog, {}),
-    /* @__PURE__ */ jsx4(PageConfigDialog, {}),
-    /* @__PURE__ */ jsx4(ImageCaptionDialog, {})
+    /* @__PURE__ */ jsx6(LinkDialog, {}),
+    /* @__PURE__ */ jsx6(PageConfigDialog, {}),
+    /* @__PURE__ */ jsx6(ImageCaptionDialog, {})
   ] });
 }
 function useEditorContext() {
@@ -822,13 +1081,13 @@ function useEditorContext() {
 
 // src/ImageResizeOverlay.tsx
 import {
-  useCallback,
-  useEffect as useEffect4,
-  useLayoutEffect,
+  useCallback as useCallback2,
+  useEffect as useEffect5,
+  useLayoutEffect as useLayoutEffect2,
   useRef as useRef4,
-  useState as useState4
+  useState as useState5
 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function ImageResizeOverlay({
   rootRef,
   blockIndex,
@@ -836,11 +1095,13 @@ function ImageResizeOverlay({
   cellIndex,
   embed,
   onCommit,
-  onCommitMove
+  onCommitMove,
+  onReanchor
 }) {
-  const [rect, setRect] = useState4(null);
+  const [rect, setRect] = useState5(null);
+  const [isMoving, setIsMoving] = useState5(false);
   const imgRef = useRef4(null);
-  const locateImage = useCallback(() => {
+  const locateImage = useCallback2(() => {
     const root = rootRef.current;
     if (!root) return null;
     let container = null;
@@ -858,7 +1119,7 @@ function ImageResizeOverlay({
       `img[data-embed="image"][data-embed-offset="${localOffset}"]`
     );
   }, [rootRef, blockIndex, offset, cellIndex]);
-  const measure = useCallback(() => {
+  const measure = useCallback2(() => {
     const img = locateImage();
     if (!img) {
       setRect((prev) => prev === null ? prev : null);
@@ -879,22 +1140,28 @@ function ImageResizeOverlay({
       (prev) => prev && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
     );
   }, [locateImage, rootRef]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     measure();
     let cancelled = false;
+    let frame = 0;
+    let rafId = 0;
     const remeasure = () => {
       if (cancelled) return;
       measure();
+      if (!locateImage() && frame++ < 30) {
+        rafId = typeof requestAnimationFrame === "function" ? requestAnimationFrame(remeasure) : (queueMicrotask(remeasure), 0);
+      }
     };
-    const id = typeof requestAnimationFrame === "function" ? requestAnimationFrame(remeasure) : (queueMicrotask(remeasure), 0);
+    rafId = typeof requestAnimationFrame === "function" ? requestAnimationFrame(remeasure) : (queueMicrotask(remeasure), 0);
     return () => {
       cancelled = true;
-      if (typeof cancelAnimationFrame === "function" && typeof id === "number" && id > 0) {
-        cancelAnimationFrame(id);
+      if (typeof cancelAnimationFrame === "function" && typeof rafId === "number" && rafId > 0) {
+        cancelAnimationFrame(rafId);
       }
     };
   }, [
     measure,
+    locateImage,
     embed.width,
     embed.height,
     embed.align,
@@ -903,7 +1170,7 @@ function ImageResizeOverlay({
     embed.offsetX,
     embed.offsetY
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     const root = rootRef.current;
     if (!root) return;
     const onScroll = () => measure();
@@ -914,7 +1181,7 @@ function ImageResizeOverlay({
       root.removeEventListener("scroll", onScroll);
     };
   }, [measure, rootRef]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (typeof ResizeObserver === "undefined") return;
     const img = locateImage();
     const root = rootRef.current;
@@ -927,14 +1194,36 @@ function ImageResizeOverlay({
   if (!rect) return null;
   const layout = embed.layout ?? "inline";
   const movable = layout !== "inline" && onCommitMove !== void 0;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: "ed-image-overlay",
       style: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },
       contentEditable: false,
       children: [
-        movable && /* @__PURE__ */ jsx5(
+        isMoving && // Non-clipped drag preview (Tier 2): the overlay lives in .ed-root and
+        // 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__ */ jsx7(
+          "img",
+          {
+            src: embed.src,
+            alt: "",
+            "aria-hidden": true,
+            draggable: false,
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "fill",
+              opacity: 0.8,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        movable && /* @__PURE__ */ jsx7(
           MoveHandle,
           {
             layout,
@@ -942,10 +1231,17 @@ function ImageResizeOverlay({
             startOffsetY: embed.offsetY ?? 0,
             imgRef,
             onCommit: onCommitMove,
-            onLiveChange: measure
+            onLiveChange: measure,
+            rootRef,
+            blockIndex,
+            offset,
+            cellIndex,
+            onReanchor,
+            onMoveStart: () => setIsMoving(true),
+            onMoveEnd: () => setIsMoving(false)
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           Handle,
           {
             corner: "nw",
@@ -956,7 +1252,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           Handle,
           {
             corner: "ne",
@@ -967,7 +1263,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           Handle,
           {
             corner: "sw",
@@ -978,7 +1274,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           Handle,
           {
             corner: "se",
@@ -999,7 +1295,14 @@ function MoveHandle({
   startOffsetY,
   imgRef,
   onCommit,
-  onLiveChange
+  onLiveChange,
+  rootRef,
+  blockIndex,
+  offset,
+  cellIndex,
+  onReanchor,
+  onMoveStart,
+  onMoveEnd
 }) {
   const dragRef = useRef4(null);
   const onPointerDown = (e) => {
@@ -1014,35 +1317,65 @@ function MoveHandle({
       liveOX: startOffsetX,
       liveOY: startOffsetY
     };
+    const styled = imgRef.current.closest(".ed-figure") ?? imgRef.current;
+    styled.style.opacity = "0";
+    onMoveStart?.();
   };
   const onPointerMove = (e) => {
     const d = dragRef.current;
     if (!d || !imgRef.current) return;
     const dx = e.clientX - d.startX;
     const dy = e.clientY - d.startY;
-    const img = imgRef.current;
+    const styled = imgRef.current.closest(".ed-figure") ?? imgRef.current;
     let nox = startOffsetX;
     let noy = startOffsetY;
     if (layout === "wrap-left") {
       nox = Math.max(8, startOffsetX + dx);
       noy = Math.max(0, startOffsetY + dy);
-      img.style.marginRight = `${nox}px`;
-      img.style.marginTop = `${noy}px`;
+      styled.style.marginRight = `${nox}px`;
+      styled.style.marginTop = `${noy}px`;
     } else if (layout === "wrap-right") {
       nox = Math.max(8, startOffsetX - dx);
       noy = Math.max(0, startOffsetY + dy);
-      img.style.marginLeft = `${nox}px`;
-      img.style.marginTop = `${noy}px`;
+      styled.style.marginLeft = `${nox}px`;
+      styled.style.marginTop = `${noy}px`;
     } else if (layout === "behind" || layout === "front") {
       nox = startOffsetX + dx;
       noy = startOffsetY + dy;
-      img.style.left = `${nox}px`;
-      img.style.top = `${noy}px`;
+      styled.style.left = `${nox}px`;
+      styled.style.top = `${noy}px`;
     }
     d.liveOX = nox;
     d.liveOY = noy;
     onLiveChange();
   };
+  const clampOffsetToFragment = (frag, oy) => {
+    const img = imgRef.current;
+    if (!img) return oy;
+    const page = frag.closest(".ed-page");
+    const content = page?.querySelector(".ed-page-content");
+    if (!content) return oy;
+    const fragRect = frag.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    const imgH = img.getBoundingClientRect().height;
+    const minLocalTop = contentRect.top - fragRect.top;
+    const maxLocalTop = contentRect.bottom - fragRect.top - imgH;
+    return Math.round(Math.max(minLocalTop, Math.min(oy, maxLocalTop)));
+  };
+  const clampedCommit = (ox, oy) => {
+    const img = imgRef.current;
+    const root = rootRef.current;
+    if (!img || !root || layout !== "behind" && layout !== "front") {
+      onCommit(ox, oy);
+      return;
+    }
+    const frag = getFragmentForOffset(root, blockIndex, offset);
+    if (!frag) {
+      onCommit(ox, oy);
+      return;
+    }
+    onCommit(ox, clampOffsetToFragment(frag, oy));
+  };
   const finish = (e) => {
     const d = dragRef.current;
     if (!d) return;
@@ -1051,9 +1384,77 @@ function MoveHandle({
       e.target.releasePointerCapture(e.pointerId);
     } catch {
     }
-    onCommit(Math.round(d.liveOX), Math.round(d.liveOY));
+    if (imgRef.current) {
+      const styled = imgRef.current.closest(".ed-figure") ?? imgRef.current;
+      styled.style.opacity = "";
+    }
+    onMoveEnd?.();
+    const img = imgRef.current;
+    const root = rootRef.current;
+    const liveOX = Math.round(d.liveOX);
+    const liveOY = Math.round(d.liveOY);
+    if (!img || !root || onReanchor === void 0 || cellIndex != null) {
+      clampedCommit(liveOX, liveOY);
+      return;
+    }
+    const imgRect = img.getBoundingClientRect();
+    const centerY = imgRect.top + imgRect.height / 2;
+    const pages = Array.from(root.querySelectorAll(".ed-page"));
+    let destPage = null;
+    let bestPageDist = Infinity;
+    for (const pg of pages) {
+      const r = pg.getBoundingClientRect();
+      if (centerY >= r.top && centerY <= r.bottom) {
+        destPage = pg;
+        break;
+      }
+      const dist = centerY < r.top ? r.top - centerY : centerY - r.bottom;
+      if (dist < bestPageDist) {
+        bestPageDist = dist;
+        destPage = pg;
+      }
+    }
+    const currentFrag = getFragmentForOffset(root, blockIndex, offset);
+    const currentPage = currentFrag?.closest(".ed-page") ?? null;
+    if (destPage == null || destPage === currentPage) {
+      clampedCommit(liveOX, liveOY);
+      return;
+    }
+    const blocksOnPage = Array.from(
+      destPage.querySelectorAll("[data-block-index]")
+    );
+    let destFrag = null;
+    let bestBlockDist = Infinity;
+    for (const b of blocksOnPage) {
+      const dist = Math.abs(b.getBoundingClientRect().top - imgRect.top);
+      if (dist < bestBlockDist) {
+        bestBlockDist = dist;
+        destFrag = b;
+      }
+    }
+    if (!destFrag) {
+      clampedCommit(liveOX, liveOY);
+      return;
+    }
+    const destBlockIndex = findBlockIndex(destFrag, root);
+    if (destBlockIndex == null) {
+      clampedCommit(liveOX, liveOY);
+      return;
+    }
+    const destOffset = destFrag.dataset.fragmentStart ? Number.parseInt(destFrag.dataset.fragmentStart, 10) || 0 : 0;
+    const fragRect = destFrag.getBoundingClientRect();
+    const newOffsetX = Math.round(imgRect.left - fragRect.left);
+    const newOffsetY = clampOffsetToFragment(
+      destFrag,
+      Math.round(imgRect.top - fragRect.top)
+    );
+    onReanchor(
+      { blockIndex: destBlockIndex, offset: destOffset, cellIndex: void 0 },
+      newOffsetX,
+      newOffsetY
+    );
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: "ed-image-move",
@@ -1116,7 +1517,7 @@ function Handle({
     }
     onCommit(Math.round(d.liveW), Math.round(d.liveH));
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: `ed-image-handle ${corner}`,
@@ -1128,17 +1529,194 @@ function Handle({
   );
 }
 
+// src/RemoteCursorsOverlay.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect6,
+  useRef as useRef5,
+  useState as useState6
+} from "react";
+import {
+  decodeSelection
+} from "@sofereditor/core";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_COLOR = "#3b82f6";
+function RemoteCursorsOverlay({
+  rootRef,
+  doc,
+  awareness,
+  revision
+}) {
+  const [views, setViews] = useState6([]);
+  const rafRef = useRef5(null);
+  const measure = useCallback3(() => {
+    const root = rootRef.current;
+    if (!root) {
+      setViews((prev) => prev.length === 0 ? prev : []);
+      return;
+    }
+    const rr = root.getBoundingClientRect();
+    const out = [];
+    awareness.getStates().forEach((state, clientId) => {
+      if (clientId === awareness.clientID) return;
+      const s = state;
+      if (!s.cursor) return;
+      const sel = decodeSelection(doc, s.cursor);
+      if (!sel) return;
+      const color = s.user?.color || DEFAULT_COLOR;
+      const name = s.user?.name || "An\xF4nimo";
+      const focus = locatePoint(root, sel.focus);
+      let caret = null;
+      if (focus) {
+        try {
+          const range = document.createRange();
+          range.setStart(focus.node, focus.offset);
+          range.collapse(true);
+          let rect = range.getBoundingClientRect();
+          if (rect.height === 0 && focus.node.nodeType === Node.ELEMENT_NODE) {
+            rect = focus.node.getBoundingClientRect();
+          }
+          caret = {
+            top: rect.top - rr.top + root.scrollTop,
+            left: rect.left - rr.left + root.scrollLeft,
+            height: rect.height || 18
+          };
+        } catch {
+        }
+      }
+      const collapsed = sel.anchor.blockIndex === sel.focus.blockIndex && (sel.anchor.cellIndex ?? -1) === (sel.focus.cellIndex ?? -1) && sel.anchor.offset === sel.focus.offset;
+      const selection = [];
+      if (!collapsed && focus) {
+        const anchor = locatePoint(root, sel.anchor);
+        if (anchor) {
+          try {
+            const r = document.createRange();
+            r.setStart(anchor.node, anchor.offset);
+            r.setEnd(focus.node, focus.offset);
+            if (r.collapsed) {
+              r.setStart(focus.node, focus.offset);
+              r.setEnd(anchor.node, anchor.offset);
+            }
+            for (const cr of Array.from(r.getClientRects())) {
+              if (cr.width === 0 || cr.height === 0) continue;
+              selection.push({
+                top: cr.top - rr.top + root.scrollTop,
+                left: cr.left - rr.left + root.scrollLeft,
+                width: cr.width,
+                height: cr.height
+              });
+            }
+          } catch {
+          }
+        }
+      }
+      out.push({ clientId, name, color, caret, selection });
+    });
+    setViews(out);
+  }, [rootRef, doc, awareness]);
+  const scheduleMeasure = useCallback3(() => {
+    if (rafRef.current != null) return;
+    const raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(() => cb(0), 16);
+    rafRef.current = raf(() => {
+      rafRef.current = null;
+      measure();
+    });
+  }, [measure]);
+  useEffect6(() => {
+    const onChange = () => scheduleMeasure();
+    awareness.on("change", onChange);
+    scheduleMeasure();
+    return () => awareness.off("change", onChange);
+  }, [awareness, scheduleMeasure]);
+  useEffect6(() => {
+    scheduleMeasure();
+  }, [revision, scheduleMeasure]);
+  useEffect6(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const onScroll = () => scheduleMeasure();
+    root.addEventListener("scroll", onScroll, { passive: true });
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(() => scheduleMeasure());
+      ro.observe(root);
+    }
+    return () => {
+      root.removeEventListener("scroll", onScroll);
+      ro?.disconnect();
+    };
+  }, [rootRef, scheduleMeasure]);
+  if (views.length === 0) return null;
+  const layer = {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 6
+  };
+  return /* @__PURE__ */ jsx8("div", { className: "ed-remote-cursors", "aria-hidden": true, style: layer, children: views.map((v) => /* @__PURE__ */ jsxs8("div", { children: [
+    v.selection.map((r, i) => /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: r.top,
+          left: r.left,
+          width: r.width,
+          height: r.height,
+          background: v.color,
+          opacity: 0.22,
+          borderRadius: 2
+        }
+      },
+      i
+    )),
+    v.caret && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: v.caret.top,
+          left: v.caret.left,
+          height: v.caret.height,
+          width: 2,
+          background: v.color
+        },
+        children: /* @__PURE__ */ jsx8(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: -15,
+              left: -1,
+              fontSize: 10,
+              lineHeight: "14px",
+              padding: "0 4px",
+              borderRadius: 3,
+              color: "#fff",
+              background: v.color,
+              whiteSpace: "nowrap",
+              fontFamily: "system-ui, sans-serif",
+              userSelect: "none"
+            },
+            children: v.name
+          }
+        )
+      }
+    )
+  ] }, v.clientId)) });
+}
+
 // src/NodeView.tsx
-import { useMemo as useMemo2, useRef as useRef6 } from "react";
+import { useMemo as useMemo2, useRef as useRef7 } from "react";
 import { tableRectSelection } from "@sofereditor/core";
 
 // src/renderInline.tsx
-import { Fragment, memo } from "react";
+import { Fragment as Fragment3, memo } from "react";
 import { isImageEmbed } from "@sofereditor/core";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function renderInline(delta, keyPrefix) {
   if (delta.length === 0 || delta.length === 1 && typeof delta[0].insert === "string" && delta[0].insert === "") {
-    return /* @__PURE__ */ jsx6("br", { "data-empty": "true" });
+    return /* @__PURE__ */ jsx9("br", { "data-empty": "true" });
   }
   let offset = 0;
   const wrapAnchors = [];
@@ -1148,17 +1726,18 @@ function renderInline(delta, keyPrefix) {
       const text = op.insert;
       if (text.length === 0) continue;
       const key = `${keyPrefix}-${offset}`;
-      body.push(/* @__PURE__ */ jsx6(Fragment, { children: wrap(text, op.attributes) }, key));
+      body.push(/* @__PURE__ */ jsx9(Fragment3, { children: wrap(text, op.attributes) }, key));
       offset += text.length;
     } else if (isImageEmbed(op.insert)) {
       const key = `${keyPrefix}-${offset}`;
       const layout = op.insert.layout ?? "inline";
+      const commentMarkId = op.attributes?.comment?.markId;
       if (layout === "wrap-left" || layout === "wrap-right") {
         wrapAnchors.push(
-          /* @__PURE__ */ jsx6(ImageEmbedView, { embed: op.insert, offset, wrapAnchor: true }, `${key}-anchor`)
+          /* @__PURE__ */ jsx9(ImageEmbedView, { embed: op.insert, offset, wrapAnchor: true }, `${key}-anchor`)
         );
         body.push(
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx9(
             "span",
             {
               "data-embed-phantom": "true",
@@ -1170,14 +1749,21 @@ function renderInline(delta, keyPrefix) {
           )
         );
       } else {
-        body.push(/* @__PURE__ */ jsx6(ImageEmbedView, { embed: op.insert, offset }, key));
+        const imgNode = /* @__PURE__ */ jsx9(ImageEmbedView, { embed: op.insert, offset }, key);
+        if (commentMarkId) {
+          body.push(
+            /* @__PURE__ */ jsx9("span", { "data-comment-id": commentMarkId, className: "ed-comment", children: imgNode }, `${key}-cmt`)
+          );
+        } else {
+          body.push(imgNode);
+        }
       }
       offset += 1;
     } else if (op.insert != null) {
       offset += 1;
     }
   }
-  if (wrapAnchors.length === 0 && body.length === 0) return /* @__PURE__ */ jsx6("br", { "data-empty": "true" });
+  if (wrapAnchors.length === 0 && body.length === 0) return /* @__PURE__ */ jsx9("br", { "data-empty": "true" });
   return [...wrapAnchors, ...body];
 }
 var PHANTOM_STYLE = {
@@ -1187,6 +1773,11 @@ var PHANTOM_STYLE = {
   overflow: "hidden",
   verticalAlign: "baseline"
 };
+var LINK_STYLE = {
+  color: "#2563eb",
+  textDecoration: "underline",
+  cursor: "text"
+};
 function imageEmbedPropsEqual(a, b) {
   if (a.offset !== b.offset || a.wrapAnchor !== b.wrapAnchor) return false;
   const x = a.embed;
@@ -1252,8 +1843,12 @@ function ImageEmbedViewImpl({
       };
       break;
   }
-  const imgStyle = hasCaption ? { width: embed.width, height: embed.height, display: "block" } : outerStyle;
-  const img = /* @__PURE__ */ jsx6(
+  const imgStyle = {
+    width: embed.width,
+    height: embed.height,
+    display: "block"
+  };
+  const img = /* @__PURE__ */ jsx9(
     "img",
     {
       src: embed.src,
@@ -1261,6 +1856,8 @@ function ImageEmbedViewImpl({
       height: embed.height,
       contentEditable: false,
       draggable: false,
+      decoding: "sync",
+      loading: "eager",
       "data-embed": "image",
       "data-embed-offset": offset,
       "data-embed-align": align ?? "",
@@ -1270,19 +1867,18 @@ function ImageEmbedViewImpl({
       alt: ""
     }
   );
-  if (!hasCaption) return img;
   const captionAlign = embed.captionAlign ?? "center";
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs9(
     "figure",
     {
       className: "ed-figure",
       contentEditable: false,
-      "data-embed-figure": "true",
+      "data-embed-figure": hasCaption ? "true" : void 0,
       "data-embed-layout": layout,
       style: outerStyle,
       children: [
         img,
-        /* @__PURE__ */ jsx6(
+        hasCaption && /* @__PURE__ */ jsx9(
           "figcaption",
           {
             className: "ed-figcaption",
@@ -1298,34 +1894,38 @@ function ImageEmbedViewImpl({
 function wrap(text, attrs) {
   let node = text;
   if (!attrs) return node;
-  if (attrs.bold) node = /* @__PURE__ */ jsx6("strong", { children: node });
-  if (attrs.italic) node = /* @__PURE__ */ jsx6("em", { children: node });
-  if (attrs.underline) node = /* @__PURE__ */ jsx6("u", { children: node });
-  if (attrs.strike) node = /* @__PURE__ */ jsx6("s", { children: node });
+  if (attrs.bold) node = /* @__PURE__ */ jsx9("strong", { children: node });
+  if (attrs.italic) node = /* @__PURE__ */ jsx9("em", { children: node });
+  if (attrs.underline) node = /* @__PURE__ */ jsx9("u", { children: node });
+  if (attrs.strike) node = /* @__PURE__ */ jsx9("s", { children: node });
   const styleParts = {};
   if (attrs.color) styleParts.color = attrs.color;
   if (attrs.fontFamily) styleParts.fontFamily = attrs.fontFamily;
   if (attrs.fontSize) styleParts.fontSize = attrs.fontSize;
   if (Object.keys(styleParts).length > 0) {
-    node = /* @__PURE__ */ jsx6("span", { style: styleParts, children: node });
+    node = /* @__PURE__ */ jsx9("span", { style: styleParts, children: node });
   }
   if (attrs.link?.href) {
-    node = /* @__PURE__ */ jsx6(
+    node = /* @__PURE__ */ jsx9(
       "a",
       {
         href: attrs.link.href,
         title: attrs.link.title,
         rel: "noopener noreferrer",
         target: "_blank",
+        style: LINK_STYLE,
         onClick: (e) => {
-          if (!(e.metaKey || e.ctrlKey)) e.preventDefault();
+          e.preventDefault();
+          if (hasOpenModifier(e) && attrs.link?.href) {
+            window.open(attrs.link.href, "_blank", "noopener,noreferrer");
+          }
         },
         children: node
       }
     );
   }
   if (attrs.comment?.markId) {
-    node = /* @__PURE__ */ jsx6("span", { "data-comment-id": attrs.comment.markId, className: "ed-comment", children: node });
+    node = /* @__PURE__ */ jsx9("span", { "data-comment-id": attrs.comment.markId, className: "ed-comment", children: node });
   }
   return node;
 }
@@ -1370,19 +1970,19 @@ function sliceDelta(delta, start, end) {
 
 // src/TableResizeOverlay.tsx
 import {
-  useCallback as useCallback2,
-  useEffect as useEffect5,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef5,
-  useState as useState5
+  useCallback as useCallback4,
+  useEffect as useEffect7,
+  useLayoutEffect as useLayoutEffect3,
+  useRef as useRef6,
+  useState as useState7
 } from "react";
-import { Fragment as Fragment2, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10 } from "react/jsx-runtime";
 function TableResizeOverlay({ tableRef, blockIndex, cols }) {
   const editor = useEditorContext();
-  const [positions, setPositions] = useState5(null);
-  const [layout, setLayout] = useState5(null);
-  const draggingRef = useRef5(null);
-  const measure = useCallback2(() => {
+  const [positions, setPositions] = useState7(null);
+  const [layout, setLayout] = useState7(null);
+  const draggingRef = useRef6(null);
+  const measure = useCallback4(() => {
     const table = tableRef.current;
     if (!table) return;
     const tableRect = table.getBoundingClientRect();
@@ -1412,17 +2012,17 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
     }
     setLayout({ rights, height: tableRect.height });
   }, [cols, tableRef]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     measure();
   }, [measure]);
-  useEffect5(() => {
+  useEffect7(() => {
     const table = tableRef.current;
     if (!table) return;
     const ro = new ResizeObserver(() => measure());
     ro.observe(table);
     return () => ro.disconnect();
   }, [measure, tableRef]);
-  const onPointerDown = useCallback2(
+  const onPointerDown = useCallback4(
     (col) => (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1436,7 +2036,7 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
     },
     [layout, tableRef]
   );
-  const onPointerMove = useCallback2(
+  const onPointerMove = useCallback4(
     (e) => {
       const d = draggingRef.current;
       if (!d) return;
@@ -1446,7 +2046,7 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
     },
     [blockIndex, editor]
   );
-  const onPointerUp = useCallback2((e) => {
+  const onPointerUp = useCallback4((e) => {
     draggingRef.current = null;
     setPositions(null);
     try {
@@ -1465,7 +2065,7 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
     zIndex: 5
   });
   void positions;
-  return /* @__PURE__ */ jsx7(Fragment2, { children: layout.rights.map((x, c) => /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(Fragment4, { children: layout.rights.map((x, c) => /* @__PURE__ */ jsx10(
     "div",
     {
       contentEditable: false,
@@ -1482,10 +2082,10 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
 }
 
 // src/NodeView.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function NodeView({ block, index, children, fragment, tableFragment }) {
   if (block.type === "table") {
-    return /* @__PURE__ */ jsx8(TableView, { block, index, tableFragment });
+    return /* @__PURE__ */ jsx11(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);
@@ -1493,7 +2093,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
     case "heading": {
       const level = clampLevel(block.attrs.level);
       const Tag = `h${level}`;
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx11(
         Tag,
         {
           ...common,
@@ -1503,7 +2103,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
       );
     }
     case "blockquote":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx11(
         "blockquote",
         {
           ...common,
@@ -1512,18 +2112,18 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
         }
       );
     case "codeBlock":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx11(
         "pre",
         {
           ...common,
           "data-language": block.attrs.language ?? void 0,
           className: `ed-block ed-codeblock${alignClass(block.attrs.align)}`,
-          children: /* @__PURE__ */ jsx8("code", { children: inline })
+          children: /* @__PURE__ */ jsx11("code", { children: inline })
         }
       );
     case "listItem": {
       const level = clampListLevel(block.attrs.listLevel);
-      return /* @__PURE__ */ jsxs7(
+      return /* @__PURE__ */ jsxs10(
         "li",
         {
           ...common,
@@ -1539,7 +2139,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
     }
     case "paragraph":
     default:
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx11(
         "div",
         {
           ...common,
@@ -1584,7 +2184,7 @@ function TableView({ block, index, tableFragment }) {
   const cols = clampPositive(block.attrs.cols);
   const cells = block.cells ?? [];
   const widths = readColWidths(block.attrs.colWidths, cols);
-  const tableRef = useRef6(null);
+  const tableRef = useRef7(null);
   const rowStart = tableFragment?.rowStart ?? 0;
   const rowEnd = tableFragment?.rowEnd ?? rows;
   const isFirstFragment = !tableFragment || tableFragment.index === 0;
@@ -1594,8 +2194,8 @@ function TableView({ block, index, tableFragment }) {
     if (editor.selection.focus.blockIndex !== index) return null;
     return tableRectSelection(editor.doc, editor.selection);
   }, [editor.doc, editor.selection, index]);
-  return /* @__PURE__ */ jsxs7("div", { className: "ed-table-wrap", children: [
-    /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs10("div", { className: "ed-table-wrap", children: [
+    /* @__PURE__ */ jsxs10(
       "table",
       {
         ref: tableRef,
@@ -1603,10 +2203,10 @@ function TableView({ block, index, tableFragment }) {
         "data-block-type": "table",
         className: "ed-block ed-table",
         children: [
-          widths && /* @__PURE__ */ jsx8("colgroup", { children: widths.map((w, c) => /* @__PURE__ */ jsx8("col", { style: w != null ? { width: `${w}px` } : void 0 }, c)) }),
-          /* @__PURE__ */ jsx8("tbody", { children: Array.from({ length: rowEnd - rowStart }, (_, i) => {
+          widths && /* @__PURE__ */ jsx11("colgroup", { children: widths.map((w, c) => /* @__PURE__ */ jsx11("col", { style: w != null ? { width: `${w}px` } : void 0 }, c)) }),
+          /* @__PURE__ */ jsx11("tbody", { children: Array.from({ length: rowEnd - rowStart }, (_, i) => {
             const r = rowStart + i;
-            return /* @__PURE__ */ jsx8("tr", { "data-cell-row": r, children: Array.from({ length: cols }, (_2, c) => {
+            return /* @__PURE__ */ jsx11("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;
@@ -1614,7 +2214,7 @@ function TableView({ block, index, tableFragment }) {
               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__ */ jsx8(
+              return /* @__PURE__ */ jsx11(
                 "td",
                 {
                   "data-cell-index": flat,
@@ -1624,6 +2224,7 @@ function TableView({ block, index, tableFragment }) {
                   "data-cell-colspan": colspan,
                   rowSpan: rowspan > 1 ? rowspan : void 0,
                   colSpan: colspan > 1 ? colspan : void 0,
+                  style: cell?.attrs.align ? { textAlign: cell.attrs.align } : void 0,
                   className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
                   children: renderInline(delta, `t${index}-c${flat}`)
                 },
@@ -1634,7 +2235,7 @@ function TableView({ block, index, tableFragment }) {
         ]
       }
     ),
-    isFirstFragment && /* @__PURE__ */ jsx8(TableResizeOverlay, { tableRef, blockIndex: index, cols })
+    isFirstFragment && /* @__PURE__ */ jsx11(TableResizeOverlay, { tableRef, blockIndex: index, cols })
   ] });
 }
 function readColWidths(raw, cols) {
@@ -1656,7 +2257,7 @@ function clampPositive(n) {
 }
 
 // src/usePagination.ts
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState6 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState8 } from "react";
 var A4_PAGE = {
   width: 794,
   height: 1123,
@@ -1665,8 +2266,9 @@ var A4_PAGE = {
   marginLeft: 96,
   marginRight: 96
 };
-function contentHeight(g) {
-  return g.height - g.marginTop - g.marginBottom;
+function contentHeight(g, pageIndex = 0) {
+  const extra = pageIndex === 0 ? g.firstPageExtraTop ?? 0 : 0;
+  return g.height - g.marginTop - g.marginBottom - extra;
 }
 function contentWidth(g) {
   return g.width - g.marginLeft - g.marginRight;
@@ -1681,17 +2283,22 @@ function defaultPageLayout(topLevelCount) {
   };
 }
 function usePageLayout(rootRef, geometry, topLevelCount, deps) {
-  const [phase, setPhase] = useState6("measure");
-  const [layout, setLayout] = useState6(() => defaultPageLayout(topLevelCount));
-  const lastDepsRef = useRef7([]);
-  const currentDeps = [...deps, topLevelCount, geometry];
-  if (!shallowArrayEqual(lastDepsRef.current, currentDeps)) {
+  const [phase, setPhase] = useState8("measure");
+  const [layout, setLayout] = useState8(() => defaultPageLayout(topLevelCount));
+  const lastDepsRef = useRef8(null);
+  useLayoutEffect4(() => {
+    const currentDeps = [...deps, topLevelCount, geometry];
+    if (lastDepsRef.current !== null && shallowArrayEqual(lastDepsRef.current, currentDeps)) {
+      return;
+    }
     lastDepsRef.current = currentDeps;
-    if (phase !== "measure") setPhase("measure");
-    const next = defaultPageLayout(topLevelCount);
-    if (!layoutsDeepEqual(layout, next)) setLayout(next);
-  }
-  useLayoutEffect3(() => {
+    setLayout((prev) => {
+      const next = defaultPageLayout(topLevelCount);
+      return layoutsDeepEqual(prev, next) ? prev : next;
+    });
+    setPhase("measure");
+  });
+  useLayoutEffect4(() => {
     if (phase !== "measure") return;
     const root = rootRef.current;
     if (!root) return;
@@ -1700,19 +2307,20 @@ function usePageLayout(rootRef, geometry, topLevelCount, deps) {
     if (!layoutsDeepEqual(layout, next)) setLayout(next);
     setPhase("stable");
   }, [phase, layout, geometry, topLevelCount, rootRef]);
-  return layout;
+  return { layout, phase };
 }
 function isUnfragmented(layout) {
   return layout.pages.length === 1 && layout.pages[0].slots.every(
-    (s) => s.fragment === void 0 && s.tableFragment === void 0
+    (s) => s.fragment === void 0 && s.tableFragment === void 0 && s.listFragment === void 0
   );
 }
 function computeLayout(root, geometry, topLevelCount) {
   const tops = collectTopLevelElements(root);
   if (tops.length === 0) return defaultPageLayout(topLevelCount);
-  const limit = contentHeight(geometry);
+  const limitFor = (pageIndex) => contentHeight(geometry, pageIndex);
   const pages = [{ slots: [] }];
   let currentPage = pages[0];
+  let limit = limitFor(0);
   let used = 0;
   const cap = Math.min(tops.length, topLevelCount);
   for (let i = 0; i < cap; i++) {
@@ -1724,14 +2332,23 @@ function computeLayout(root, geometry, topLevelCount) {
       continue;
     }
     if (isFragmentable(el)) {
-      const result = placeFragmentedBlock(el, i, pages, used, limit);
+      const result = placeFragmentedBlock(el, i, pages, used, limitFor);
       currentPage = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       used = result.lastUsed;
       continue;
     }
     if (isTableTopLevel(el)) {
-      const result = placeFragmentedTable(el, i, pages, used, limit);
+      const result = placeFragmentedTable(el, i, pages, used, limitFor);
       currentPage = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
+      used = result.lastUsed;
+      continue;
+    }
+    if (isListTopLevel(el)) {
+      const result = placeFragmentedList(el, i, pages, used, limitFor);
+      currentPage = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       used = result.lastUsed;
       continue;
     }
@@ -1739,10 +2356,12 @@ function computeLayout(root, geometry, topLevelCount) {
       currentPage.slots.push({ topLevelIndex: i });
       pages.push({ slots: [] });
       currentPage = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       used = 0;
     } else {
       pages.push({ slots: [] });
       currentPage = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       currentPage.slots.push({ topLevelIndex: i });
       used = h;
     }
@@ -1750,7 +2369,8 @@ function computeLayout(root, geometry, topLevelCount) {
   if (pages.length > 1 && pages[pages.length - 1].slots.length === 0) pages.pop();
   return { pages };
 }
-function placeFragmentedBlock(el, topLevelIndex, pages, startUsed, limit) {
+function placeFragmentedBlock(el, topLevelIndex, pages, startUsed, limitFor) {
+  let limit = limitFor(pages.length - 1);
   const totalChars = getBlockTextLength(el);
   if (totalChars === 0) {
     const h = elTotalHeight(el);
@@ -1758,6 +2378,7 @@ function placeFragmentedBlock(el, topLevelIndex, pages, startUsed, limit) {
     if (startUsed + h > limit && currentPage2.slots.length > 0) {
       pages.push({ slots: [] });
       currentPage2 = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       startUsed = 0;
     }
     currentPage2.slots.push({ topLevelIndex });
@@ -1770,6 +2391,7 @@ function placeFragmentedBlock(el, topLevelIndex, pages, startUsed, limit) {
     if (startUsed + h > limit && currentPage2.slots.length > 0) {
       pages.push({ slots: [] });
       currentPage2 = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       startUsed = 0;
     }
     currentPage2.slots.push({ topLevelIndex });
@@ -1784,6 +2406,7 @@ function placeFragmentedBlock(el, topLevelIndex, pages, startUsed, limit) {
     if (available <= 0) {
       pages.push({ slots: [] });
       currentPage = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       used = 0;
       continue;
     }
@@ -1800,6 +2423,7 @@ function placeFragmentedBlock(el, topLevelIndex, pages, startUsed, limit) {
       } else {
         pages.push({ slots: [] });
         currentPage = pages[pages.length - 1];
+        limit = limitFor(pages.length - 1);
         used = 0;
         continue;
       }
@@ -1817,6 +2441,7 @@ function placeFragmentedBlock(el, topLevelIndex, pages, startUsed, limit) {
     if (lineIdx < lines.length) {
       pages.push({ slots: [] });
       currentPage = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       used = 0;
     }
   }
@@ -1905,7 +2530,8 @@ function isFragmentable(el) {
 function isTableTopLevel(el) {
   return el.querySelector(':scope > table[data-block-type="table"]') !== null;
 }
-function placeFragmentedTable(el, topLevelIndex, pages, startUsed, limit) {
+function placeFragmentedTable(el, topLevelIndex, pages, startUsed, limitFor) {
+  let limit = limitFor(pages.length - 1);
   const table = el.querySelector(':scope > table[data-block-type="table"]');
   const tbody = table?.querySelector(":scope > tbody");
   const trs = tbody ? Array.from(tbody.children) : [];
@@ -1915,6 +2541,7 @@ function placeFragmentedTable(el, topLevelIndex, pages, startUsed, limit) {
     if (startUsed + h > limit && currentPage2.slots.length > 0) {
       pages.push({ slots: [] });
       currentPage2 = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       startUsed = 0;
     }
     currentPage2.slots.push({ topLevelIndex });
@@ -1946,6 +2573,7 @@ function placeFragmentedTable(el, topLevelIndex, pages, startUsed, limit) {
     if (available <= 0) {
       pages.push({ slots: [] });
       currentPage = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       used = 0;
       continue;
     }
@@ -1964,6 +2592,7 @@ function placeFragmentedTable(el, topLevelIndex, pages, startUsed, limit) {
       } else {
         pages.push({ slots: [] });
         currentPage = pages[pages.length - 1];
+        limit = limitFor(pages.length - 1);
         used = 0;
         continue;
       }
@@ -1981,6 +2610,77 @@ function placeFragmentedTable(el, topLevelIndex, pages, startUsed, limit) {
     if (rowIdx < trs.length) {
       pages.push({ slots: [] });
       currentPage = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
+      used = 0;
+    }
+  }
+  return { lastUsed: used };
+}
+function isListTopLevel(el) {
+  if (el.tagName !== "OL" && el.tagName !== "UL") return false;
+  return el.classList.contains("ed-list");
+}
+function placeFragmentedList(el, topLevelIndex, pages, startUsed, limitFor) {
+  let limit = limitFor(pages.length - 1);
+  const items = [];
+  for (const c of Array.from(el.children)) {
+    if (c instanceof HTMLLIElement && c.classList.contains("ed-listitem")) {
+      items.push(c);
+    }
+  }
+  if (items.length === 0) {
+    const h = elTotalHeight(el);
+    let currentPage2 = pages[pages.length - 1];
+    if (startUsed + h > limit && currentPage2.slots.length > 0) {
+      pages.push({ slots: [] });
+      currentPage2 = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
+      startUsed = 0;
+    }
+    currentPage2.slots.push({ topLevelIndex });
+    return { lastUsed: startUsed + h };
+  }
+  const heights = items.map((li) => elTotalHeight(li));
+  const sumHeights = heights.reduce((a, b) => a + b, 0);
+  const wrapperOverhead = Math.max(0, elTotalHeight(el) - sumHeights);
+  let i = 0;
+  let currentPage = pages[pages.length - 1];
+  let used = startUsed;
+  let fragIndex = 0;
+  while (i < items.length) {
+    const available = Math.max(0, limit - used);
+    const isFirstFragment = fragIndex === 0;
+    let bestK = -1;
+    let runningH = isFirstFragment ? wrapperOverhead : 0;
+    for (let k = i; k < items.length; k++) {
+      runningH += heights[k];
+      if (runningH <= available) bestK = k;
+      else break;
+    }
+    if (bestK < 0) {
+      if (currentPage.slots.length === 0) {
+        bestK = i;
+      } else {
+        pages.push({ slots: [] });
+        currentPage = pages[pages.length - 1];
+        limit = limitFor(pages.length - 1);
+        used = 0;
+        continue;
+      }
+    }
+    currentPage.slots.push({
+      topLevelIndex,
+      listFragment: { index: fragIndex, itemStart: i, itemEnd: bestK + 1 }
+    });
+    let consumed = isFirstFragment ? wrapperOverhead : 0;
+    for (let k = i; k <= bestK; k++) consumed += heights[k];
+    used += consumed;
+    i = bestK + 1;
+    fragIndex++;
+    if (i < items.length) {
+      pages.push({ slots: [] });
+      currentPage = pages[pages.length - 1];
+      limit = limitFor(pages.length - 1);
       used = 0;
     }
   }
@@ -2056,23 +2756,31 @@ function layoutsDeepEqual(a, b) {
           return false;
         }
       }
+      const lA = sA[j].listFragment;
+      const lB = sB[j].listFragment;
+      if (lA || lB) {
+        if (!lA || !lB) return false;
+        if (lA.index !== lB.index || lA.itemStart !== lB.itemStart || lA.itemEnd !== lB.itemEnd) {
+          return false;
+        }
+      }
     }
   }
   return true;
 }
 
 // src/useEditor.ts
-import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo3, useRef as useRef9, useState as useState7 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo3, useRef as useRef10, useState as useState9 } from "react";
 
 // src/usePageSettings.ts
-import { useCallback as useCallback3, useRef as useRef8, useSyncExternalStore } from "react";
+import { useCallback as useCallback5, useRef as useRef9, useSyncExternalStore } from "react";
 function usePageSettings(doc) {
-  const cacheRef = useRef8(null);
-  const subscribe = useCallback3(
+  const cacheRef = useRef9(null);
+  const subscribe = useCallback5(
     (notify) => doc.observePageSettings(notify),
     [doc]
   );
-  const getSnapshot = useCallback3(() => {
+  const getSnapshot = useCallback5(() => {
     const next = doc.getPageSettings();
     const prev = cacheRef.current;
     if (prev && shallowEqual(prev, next)) return prev;
@@ -2082,7 +2790,7 @@ function usePageSettings(doc) {
   return 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;
+  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
@@ -2098,6 +2806,7 @@ import {
   mergeDown as cmdMergeDown,
   mergeRight as cmdMergeRight,
   mergeSelection as cmdMergeSelection,
+  moveEmbedAnchor as cmdMoveEmbedAnchor,
   setColumnWidth as cmdSetColumnWidth,
   setImageAttrs as cmdSetImageAttrs,
   splitCell as cmdSplitCell,
@@ -2114,6 +2823,7 @@ import {
   orderedRange,
   removeMark as cmdRemoveMark,
   setBlockAttr as cmdSetBlockAttr,
+  setCellAttr as cmdSetCellAttr,
   setBlockType as cmdSetBlockType,
   setMark as cmdSetMark,
   splitListItem as cmdSplitListItem,
@@ -2125,19 +2835,19 @@ var MAX_INSERT_WIDTH = 600;
 function useEditor(opts = {}) {
   const doc = useMemo3(() => opts.document ?? new EditorDocument(), [opts.document]);
   const history = useMemo3(() => new EditorHistory(doc), [doc]);
-  const [snapshot, setSnapshot] = useState7(() => doc.toJSON());
-  const [selection, setSelectionState] = useState7(
+  const [snapshot, setSnapshot] = useState9(() => doc.toJSON());
+  const [selection, setSelectionState] = useState9(
     () => collapsedSelection({ blockIndex: 0, offset: 0 })
   );
-  const selectionRef = useRef9(selection);
+  const selectionRef = useRef10(selection);
   selectionRef.current = selection;
-  const pendingMarksRef = useRef9({});
-  const [pendingMarks, setPendingMarksState] = useState7({});
-  const setPendingMarks = useCallback4((next) => {
+  const pendingMarksRef = useRef10({});
+  const [pendingMarks, setPendingMarksState] = useState9({});
+  const setPendingMarks = useCallback6((next) => {
     pendingMarksRef.current = next;
     setPendingMarksState(next);
   }, []);
-  useEffect6(() => {
+  useEffect8(() => {
     let scheduled = false;
     let cancelled = false;
     let frame = 0;
@@ -2164,8 +2874,8 @@ function useEditor(opts = {}) {
       doc.ydoc.off("afterTransaction", schedule);
     };
   }, [doc]);
-  const getSelection = useCallback4(() => selectionRef.current, []);
-  const setSelection = useCallback4(
+  const getSelection = useCallback6(() => selectionRef.current, []);
+  const setSelection = useCallback6(
     (sel) => {
       const prev = selectionRef.current;
       selectionRef.current = sel;
@@ -2180,16 +2890,16 @@ function useEditor(opts = {}) {
     },
     []
   );
-  const ctxRef = useRef9({ doc, getSelection, setSelection });
+  const ctxRef = useRef10({ doc, getSelection, setSelection });
   ctxRef.current = { doc, getSelection, setSelection };
-  const consumePendingMarks = useCallback4(() => {
+  const consumePendingMarks = useCallback6(() => {
     const current = pendingMarksRef.current;
     if (Object.keys(current).length === 0) return void 0;
     pendingMarksRef.current = {};
     setPendingMarksState({});
     return current;
   }, []);
-  const isMarkActive = useCallback4(
+  const isMarkActive = useCallback6(
     (name, value) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -2220,7 +2930,7 @@ function useEditor(opts = {}) {
     },
     [doc]
   );
-  const getActiveMarks = useCallback4(() => {
+  const getActiveMarks = useCallback6(() => {
     const sel = selectionRef.current;
     const { start, end } = orderedRange(sel);
     if (start.blockIndex !== end.blockIndex) {
@@ -2234,7 +2944,7 @@ function useEditor(opts = {}) {
     }
     return getMarksInRange(yText, start.offset, end.offset);
   }, [doc]);
-  const toggleMark = useCallback4(
+  const toggleMark = useCallback6(
     (name, value) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -2254,7 +2964,7 @@ function useEditor(opts = {}) {
     },
     [isMarkActive, setPendingMarks]
   );
-  const setMark = useCallback4(
+  const setMark = useCallback6(
     (name, value) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -2267,7 +2977,7 @@ function useEditor(opts = {}) {
     },
     [setPendingMarks]
   );
-  const removeMark = useCallback4(
+  const removeMark = useCallback6(
     (name) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -2280,7 +2990,7 @@ function useEditor(opts = {}) {
     },
     [setPendingMarks]
   );
-  const getBlockType = useCallback4(() => {
+  const getBlockType = useCallback6(() => {
     const sel = selectionRef.current;
     const { start, end } = orderedRange(sel);
     const first = doc.getBlockType(start.blockIndex);
@@ -2290,7 +3000,7 @@ function useEditor(opts = {}) {
     }
     return first;
   }, [doc]);
-  const getBlockAttr = useCallback4(
+  const getBlockAttr = useCallback6(
     (key) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -2303,16 +3013,29 @@ function useEditor(opts = {}) {
     },
     [doc]
   );
-  const setBlockType = useCallback4((type, attrs) => {
+  const setBlockType = useCallback6((type, attrs) => {
     cmdSetBlockType(ctxRef.current, type, attrs);
   }, []);
-  const setBlockAttr = useCallback4(
+  const setBlockAttr = useCallback6(
     (key, value) => {
       cmdSetBlockAttr(ctxRef.current, key, value);
     },
     []
   );
-  const isListActive = useCallback4(
+  const setAlign = useCallback6((value) => {
+    const sel = selectionRef.current;
+    const inCell = sel.focus.cellIndex != null;
+    if (inCell) cmdSetCellAttr(ctxRef.current, "align", value);
+    else cmdSetBlockAttr(ctxRef.current, "align", value);
+  }, []);
+  const getAlign = useCallback6(() => {
+    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 isListActive = useCallback6(
     (kind) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -2324,110 +3047,116 @@ function useEditor(opts = {}) {
     },
     [doc]
   );
-  const toggleList = useCallback4((kind) => {
+  const toggleList = useCallback6((kind) => {
     cmdToggleList(ctxRef.current, kind);
   }, []);
-  const indentList = useCallback4(() => {
+  const indentList = useCallback6(() => {
     cmdIndentList(ctxRef.current);
   }, []);
-  const dedentList = useCallback4(() => {
+  const dedentList = useCallback6(() => {
     cmdDedentList(ctxRef.current);
   }, []);
-  const splitListItem = useCallback4(() => {
+  const splitListItem = useCallback6(() => {
     return cmdSplitListItem(ctxRef.current);
   }, []);
-  const isInTable = useCallback4(() => {
+  const isInTable = useCallback6(() => {
     return selectionRef.current.focus.cellIndex != null;
   }, []);
-  const getTableLocation = useCallback4(() => {
+  const getTableLocation = useCallback6(() => {
     return tableLocationOf(doc, selectionRef.current.focus);
   }, [doc]);
-  const insertTable = useCallback4((rows, cols) => {
+  const insertTable = useCallback6((rows, cols) => {
     cmdInsertTable(ctxRef.current, rows, cols);
   }, []);
-  const deleteTable = useCallback4((blockIndex) => {
+  const deleteTable = useCallback6((blockIndex) => {
     const idx = blockIndex ?? selectionRef.current.focus.blockIndex;
     cmdDeleteTable(ctxRef.current, idx);
   }, []);
-  const insertRowAbove = useCallback4(() => {
+  const insertRowAbove = useCallback6(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdInsertRow(ctxRef.current, loc.blockIndex, loc.row, "before");
   }, [doc]);
-  const insertRowBelow = useCallback4(() => {
+  const insertRowBelow = useCallback6(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdInsertRow(ctxRef.current, loc.blockIndex, loc.row, "after");
   }, [doc]);
-  const deleteCurrentRow = useCallback4(() => {
+  const deleteCurrentRow = useCallback6(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdDeleteRow(ctxRef.current, loc.blockIndex, loc.row);
   }, [doc]);
-  const insertColumnLeft = useCallback4(() => {
+  const insertColumnLeft = useCallback6(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdInsertColumn(ctxRef.current, loc.blockIndex, loc.col, "before");
   }, [doc]);
-  const insertColumnRight = useCallback4(() => {
+  const insertColumnRight = useCallback6(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdInsertColumn(ctxRef.current, loc.blockIndex, loc.col, "after");
   }, [doc]);
-  const deleteCurrentColumn = useCallback4(() => {
+  const deleteCurrentColumn = useCallback6(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdDeleteColumn(ctxRef.current, loc.blockIndex, loc.col);
   }, [doc]);
-  const moveToNextCell = useCallback4(() => {
+  const moveToNextCell = useCallback6(() => {
     cmdMoveNextCell(ctxRef.current);
   }, []);
-  const moveToPrevCell = useCallback4(() => {
+  const moveToPrevCell = useCallback6(() => {
     cmdMovePrevCell(ctxRef.current);
   }, []);
-  const mergeRight = useCallback4(() => {
+  const mergeRight = useCallback6(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return false;
     return cmdMergeRight(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const mergeDown = useCallback4(() => {
+  const mergeDown = useCallback6(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return false;
     return cmdMergeDown(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const splitCell = useCallback4(() => {
+  const splitCell = useCallback6(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return false;
     return cmdSplitCell(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const setColumnWidth = useCallback4(
+  const setColumnWidth = useCallback6(
     (blockIndex, col, widthPx) => {
       cmdSetColumnWidth(ctxRef.current, blockIndex, col, widthPx);
     },
     []
   );
-  const getTableRect = useCallback4(
+  const getTableRect = useCallback6(
     () => tableRectSelection2(doc, selectionRef.current),
     [doc]
   );
-  const hasTableRectSelection = useCallback4(() => {
+  const hasTableRectSelection = useCallback6(() => {
     return tableRectSelection2(doc, selectionRef.current) !== null;
   }, [doc]);
-  const mergeSelection = useCallback4(() => {
+  const mergeSelection = useCallback6(() => {
     return cmdMergeSelection(ctxRef.current);
   }, []);
-  const insertImage = useCallback4((embed) => {
+  const insertImage = useCallback6((embed) => {
     cmdInsertImage(ctxRef.current, embed);
   }, []);
-  const setImageAttrs = useCallback4(
+  const setImageAttrs = useCallback6(
     (blockIndex, offset, partial, cellIndex, newOffset) => {
       cmdSetImageAttrs(ctxRef.current, blockIndex, offset, partial, cellIndex, newOffset);
     },
     []
   );
-  const uploadImageRef = useRef9(opts.uploadImage);
+  const moveEmbedAnchor = useCallback6(
+    (from, to, newOffsetX, newOffsetY) => {
+      cmdMoveEmbedAnchor(ctxRef.current, from, to, newOffsetX, newOffsetY);
+    },
+    []
+  );
+  const uploadImageRef = useRef10(opts.uploadImage);
   uploadImageRef.current = opts.uploadImage;
-  const insertImageFromFile = useCallback4(async (file) => {
+  const insertImageFromFile = useCallback6(async (file) => {
     if (!file.type.startsWith("image/")) return;
     const dataUrl = await readAsDataURL(file);
     const dims = await readImageDimensions(dataUrl);
@@ -2441,7 +3170,7 @@ function useEditor(opts = {}) {
     const src = upload ? await upload(file) : dataUrl;
     cmdInsertImage(ctxRef.current, { type: "image", src, width: w, height: h });
   }, []);
-  const getSelectedEmbed = useCallback4(() => {
+  const getSelectedEmbed = useCallback6(() => {
     const sel = selectionRef.current;
     if (sel.anchor.blockIndex !== sel.focus.blockIndex) return null;
     if ((sel.anchor.cellIndex ?? -1) !== (sel.focus.cellIndex ?? -1)) return null;
@@ -2470,39 +3199,48 @@ function useEditor(opts = {}) {
     }
     return null;
   }, [doc]);
-  const [linkRequest, setLinkRequest] = useState7(null);
-  const requestLink = useCallback4((initialHref = "") => {
+  const [linkRequest, setLinkRequest] = useState9(null);
+  const linkRequestRef = useRef10(null);
+  const requestLink = useCallback6((initialHref = "") => {
     return new Promise((resolve) => {
-      setLinkRequest({ initialHref, resolve });
-    });
-  }, []);
-  const resolveLinkRequest = useCallback4((href) => {
-    setLinkRequest((prev) => {
-      if (prev) prev.resolve(href);
-      return null;
+      const req = { initialHref, resolve, selection: selectionRef.current };
+      linkRequestRef.current = req;
+      setLinkRequest(req);
     });
   }, []);
+  const resolveLinkRequest = useCallback6(
+    (href) => {
+      const req = linkRequestRef.current;
+      linkRequestRef.current = null;
+      setLinkRequest(null);
+      if (req) {
+        setSelection(req.selection);
+        req.resolve(href);
+      }
+    },
+    [setSelection]
+  );
   const pageSettings = usePageSettings(doc);
-  const setPageSettings = useCallback4(
+  const setPageSettings = useCallback6(
     (partial) => {
       doc.setPageSettings(partial);
     },
     [doc]
   );
-  const [pageConfigRequest, setPageConfigRequest] = useState7(null);
-  const requestPageConfig = useCallback4(() => {
+  const [pageConfigRequest, setPageConfigRequest] = useState9(null);
+  const requestPageConfig = useCallback6(() => {
     return new Promise((resolve) => {
       setPageConfigRequest({ initial: doc.getPageSettings(), resolve });
     });
   }, [doc]);
-  const resolvePageConfigRequest = useCallback4((applied) => {
+  const resolvePageConfigRequest = useCallback6((applied) => {
     setPageConfigRequest((prev) => {
       if (prev) prev.resolve(applied);
       return null;
     });
   }, []);
-  const [imageCaptionRequest, setImageCaptionRequest] = useState7(null);
-  const requestImageCaption = useCallback4(
+  const [imageCaptionRequest, setImageCaptionRequest] = useState9(null);
+  const requestImageCaption = useCallback6(
     (initialCaption = "", initialAlign = "center") => {
       return new Promise((resolve) => {
         setImageCaptionRequest({ initialCaption, initialAlign, resolve });
@@ -2510,7 +3248,7 @@ function useEditor(opts = {}) {
     },
     []
   );
-  const resolveImageCaptionRequest = useCallback4((result) => {
+  const resolveImageCaptionRequest = useCallback6((result) => {
     setImageCaptionRequest((prev) => {
       if (prev) prev.resolve(result);
       return null;
@@ -2534,6 +3272,8 @@ function useEditor(opts = {}) {
     getBlockAttr,
     setBlockType,
     setBlockAttr,
+    setAlign,
+    getAlign,
     isListActive,
     toggleList,
     indentList,
@@ -2563,6 +3303,7 @@ function useEditor(opts = {}) {
     mergeSelection,
     insertImage,
     setImageAttrs,
+    moveEmbedAnchor,
     insertImageFromFile,
     getSelectedEmbed,
     pageSettings,
@@ -2604,54 +3345,99 @@ function sameValue(a, b) {
 }
 
 // src/Editor.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var defaultFooter = ({ pageNumber, pageCount }) => `${pageNumber} / ${pageCount}`;
 function Editor({
   editor: providedEditor,
   className,
   pageGeometry,
   renderPageHeader,
-  renderPageFooter = defaultFooter
+  renderPageFooter = defaultFooter,
+  awareness
 }) {
   const internal = useEditor();
   const editor = providedEditor ?? internal;
   const { doc, history, snapshot, getSelection, setSelection } = editor;
-  const rootRef = useRef10(null);
-  const isComposingRef = useRef10(false);
-  const suppressSelectionSyncRef = useRef10(false);
-  const ctxRef = useRef10({ doc, getSelection, setSelection });
+  const rootRef = useRef11(null);
+  const isComposingRef = useRef11(false);
+  const [hoveredBehind, setHoveredBehind] = useState10(null);
+  const hoveredBehindRef = useRef11(null);
+  const [hoveredLink, setHoveredLink] = useState10(null);
+  const hoveredLinkElRef = useRef11(null);
+  const suppressSelectionSyncRef = useRef11(false);
+  useEffect9(() => {
+    if (!awareness) return;
+    const root = rootRef.current;
+    if (!root) return;
+    let raf = null;
+    const publish = () => {
+      raf = null;
+      const sel = readDomSelection(root);
+      awareness.setLocalStateField(
+        "cursor",
+        sel ? encodeSelection(doc, sel) ?? null : null
+      );
+    };
+    const onSelChange = () => {
+      const s = document.getSelection();
+      if (!s || s.rangeCount === 0) return;
+      if (s.anchorNode && !root.contains(s.anchorNode)) return;
+      if (raf != null) return;
+      raf = requestAnimationFrame(publish);
+    };
+    const onBlur = () => awareness.setLocalStateField("cursor", null);
+    document.addEventListener("selectionchange", onSelChange);
+    root.addEventListener("blur", onBlur, true);
+    return () => {
+      document.removeEventListener("selectionchange", onSelChange);
+      root.removeEventListener("blur", onBlur, true);
+      if (raf != null) cancelAnimationFrame(raf);
+      awareness.setLocalStateField("cursor", null);
+    };
+  }, [awareness, doc]);
+  const ctxRef = useRef11({ doc, getSelection, setSelection });
   ctxRef.current = { doc, getSelection, setSelection };
-  const historyRef = useRef10(history);
+  const historyRef = useRef11(history);
   historyRef.current = history;
-  const editorRef = useRef10(editor);
+  const editorRef = useRef11(editor);
   editorRef.current = editor;
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const root = rootRef.current;
     if (!root) return;
     if (isComposingRef.current) return;
     if (document.activeElement !== root) return;
     const current = readDomSelection(root);
     if (current && selectionsEqual(current, editor.selection)) return;
+    if (isTableRectSelection(editor.selection)) {
+      applyDomSelection(root, editor.selection);
+      suppressSelectionSyncRef.current = false;
+      return;
+    }
     suppressSelectionSyncRef.current = true;
     applyDomSelection(root, editor.selection);
-    queueMicrotask(() => {
-      suppressSelectionSyncRef.current = false;
-    });
   });
-  useEffect7(() => {
+  useEffect9(() => {
     const root = rootRef.current;
     if (!root) return;
     const handler = () => {
-      if (suppressSelectionSyncRef.current) return;
       if (isComposingRef.current) return;
-      if (document.activeElement !== root) return;
+      if (document.activeElement !== root) {
+        suppressSelectionSyncRef.current = false;
+        return;
+      }
       const modelSel = readDomSelection(root);
+      if (suppressSelectionSyncRef.current) {
+        if (modelSel && selectionsEqual(modelSel, editorRef.current.getSelection())) {
+          suppressSelectionSyncRef.current = false;
+        }
+        return;
+      }
       if (modelSel) setSelection(modelSel);
     };
     document.addEventListener("selectionchange", handler);
     return () => document.removeEventListener("selectionchange", handler);
   }, [setSelection]);
-  useEffect7(() => {
+  useEffect9(() => {
     const root = rootRef.current;
     if (!root) return;
     let drag = null;
@@ -2722,7 +3508,7 @@ function Editor({
       document.removeEventListener("pointerup", onPointerUp);
     };
   }, []);
-  useEffect7(() => {
+  useEffect9(() => {
     const root = rootRef.current;
     if (!root) return;
     const onDragOver = (e) => {
@@ -2760,7 +3546,7 @@ function Editor({
       root.removeEventListener("drop", onDrop);
     };
   }, []);
-  useEffect7(() => {
+  useEffect9(() => {
     const root = rootRef.current;
     if (!root) return;
     const onPointerDown = (e) => {
@@ -2788,7 +3574,95 @@ function Editor({
     root.addEventListener("pointerdown", onPointerDown);
     return () => root.removeEventListener("pointerdown", onPointerDown);
   }, []);
-  useEffect7(() => {
+  useEffect9(() => {
+    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);
+    const set = (next) => {
+      if (same(next, hoveredBehindRef.current)) return;
+      hoveredBehindRef.current = next;
+      setHoveredBehind(next);
+    };
+    let raf = 0;
+    const onMove = (e) => {
+      if (raf) return;
+      const x = e.clientX;
+      const y = e.clientY;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        const imgs = root.querySelectorAll(
+          'img[data-embed="image"][data-embed-layout="behind"]'
+        );
+        let hit = null;
+        for (const img of imgs) {
+          const r = img.getBoundingClientRect();
+          if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) {
+            hit = img;
+            break;
+          }
+        }
+        if (!hit) {
+          set(null);
+          return;
+        }
+        const blockEl = hit.closest("[data-block-index]");
+        const offsetAttr = hit.dataset.embedOffset;
+        if (!blockEl || offsetAttr == null) {
+          set(null);
+          return;
+        }
+        const blockIndex = Number.parseInt(blockEl.dataset.blockIndex, 10);
+        const fragmentStart = Number.parseInt(blockEl.dataset.fragmentStart ?? "0", 10) || 0;
+        const cellEl = hit.closest("[data-cell-index]");
+        const cellIndex = cellEl ? Number.parseInt(cellEl.dataset.cellIndex, 10) : void 0;
+        set({ blockIndex, offset: fragmentStart + Number.parseInt(offsetAttr, 10), cellIndex });
+      });
+    };
+    const onLeave = () => set(null);
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerleave", onLeave);
+    return () => {
+      root.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerleave", onLeave);
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, []);
+  useEffect9(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const clear = () => {
+      if (hoveredLinkElRef.current) {
+        hoveredLinkElRef.current = null;
+        setHoveredLink(null);
+      }
+    };
+    const onOver = (e) => {
+      const target = e.target;
+      const a = target?.closest?.("a[href]");
+      if (a && root.contains(a)) {
+        if (hoveredLinkElRef.current === a) return;
+        hoveredLinkElRef.current = a;
+        const r = a.getBoundingClientRect();
+        setHoveredLink({
+          href: a.getAttribute("href") ?? "",
+          rect: { top: r.top, left: r.left, bottom: r.bottom, width: r.width }
+        });
+      } else {
+        clear();
+      }
+    };
+    root.addEventListener("mouseover", onOver);
+    root.addEventListener("mouseleave", clear);
+    root.addEventListener("scroll", clear, true);
+    window.addEventListener("scroll", clear, true);
+    return () => {
+      root.removeEventListener("mouseover", onOver);
+      root.removeEventListener("mouseleave", clear);
+      root.removeEventListener("scroll", clear, true);
+      window.removeEventListener("scroll", clear, true);
+    };
+  }, []);
+  useEffect9(() => {
     const root = rootRef.current;
     if (!root) return;
     const handler = (e) => {
@@ -2806,8 +3680,33 @@ function Editor({
           }
           return;
         }
-        case "insertParagraph":
         case "insertLineBreak": {
+          e.preventDefault();
+          if (ed.getBlockType() === "listItem") {
+            insertText(ctx, "\n", ed.consumePendingMarks());
+            return;
+          }
+          const selEmbed = ed.getSelectedEmbed();
+          if (selEmbed) {
+            const off = selEmbed.offset + 1;
+            ctx.setSelection({
+              anchor: {
+                blockIndex: selEmbed.blockIndex,
+                cellIndex: selEmbed.cellIndex,
+                offset: off
+              },
+              focus: {
+                blockIndex: selEmbed.blockIndex,
+                cellIndex: selEmbed.cellIndex,
+                offset: off
+              }
+            });
+          }
+          if (ed.splitListItem()) return;
+          insertParagraph(ctx);
+          return;
+        }
+        case "insertParagraph": {
           e.preventDefault();
           const selectedEmbed2 = ed.getSelectedEmbed();
           if (selectedEmbed2) {
@@ -2839,22 +3738,6 @@ function Editor({
         }
         case "insertFromPaste": {
           e.preventDefault();
-          const images = Array.from(e.dataTransfer?.files ?? []).filter(
-            (f) => f.type.startsWith("image/")
-          );
-          if (images.length > 0) {
-            void (async () => {
-              for (const f of images) await editorRef.current.insertImageFromFile(f);
-            })();
-            return;
-          }
-          const text = e.dataTransfer?.getData("text/plain") ?? "";
-          if (text.length === 0) return;
-          const lines = text.split(/\r\n|\r|\n/);
-          lines.forEach((line, i) => {
-            if (i > 0) insertParagraph(ctx);
-            if (line.length > 0) insertText(ctx, line);
-          });
           return;
         }
         case "deleteContentBackward":
@@ -2892,7 +3775,67 @@ function Editor({
     root.addEventListener("beforeinput", handler);
     return () => root.removeEventListener("beforeinput", handler);
   }, []);
-  const onKeyDown = useCallback5((e) => {
+  useEffect9(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const writeSlice = (e) => {
+      const ctx = ctxRef.current;
+      const slice = serializeSelection(ctx.doc, ctx.getSelection());
+      if (!slice || !e.clipboardData) return false;
+      e.clipboardData.setData(SOFER_MIME, JSON.stringify(slice));
+      e.clipboardData.setData("text/plain", sliceToText(slice));
+      return true;
+    };
+    const onCopy = (e) => {
+      if (writeSlice(e)) e.preventDefault();
+    };
+    const onCut = (e) => {
+      e.preventDefault();
+      if (writeSlice(e)) deleteSelection(ctxRef.current);
+    };
+    const onPaste = (e) => {
+      const ctx = ctxRef.current;
+      const cd = e.clipboardData;
+      if (!cd) return;
+      const raw = cd.getData(SOFER_MIME);
+      if (raw) {
+        try {
+          const slice = JSON.parse(raw);
+          if (slice && Array.isArray(slice.blocks)) {
+            e.preventDefault();
+            insertSlice(ctx, slice);
+            return;
+          }
+        } catch {
+        }
+      }
+      const images = Array.from(cd.files ?? []).filter((f) => f.type.startsWith("image/"));
+      if (images.length > 0) {
+        e.preventDefault();
+        void (async () => {
+          for (const f of images) await editorRef.current.insertImageFromFile(f);
+        })();
+        return;
+      }
+      const text = cd.getData("text/plain");
+      if (text.length === 0) return;
+      e.preventDefault();
+      const lines = text.split(/\r\n|\r|\n/);
+      lines.forEach((line, i) => {
+        if (i > 0) insertParagraph(ctx);
+        if (line.length > 0) insertText(ctx, line);
+      });
+    };
+    root.addEventListener("copy", onCopy);
+    root.addEventListener("cut", onCut);
+    root.addEventListener("paste", onPaste);
+    return () => {
+      root.removeEventListener("copy", onCopy);
+      root.removeEventListener("cut", onCut);
+      root.removeEventListener("paste", onPaste);
+    };
+  }, []);
+  const onKeyDown = useCallback7((e) => {
     const ed = editorRef.current;
     const mod = e.metaKey || e.ctrlKey;
     if (e.key === "Tab") {
@@ -2906,6 +3849,20 @@ function Editor({
       else ed.indentList();
       return;
     }
+    if (!mod && (e.key === "Home" || e.key === "End")) {
+      const root = rootRef.current;
+      const sel = window.getSelection();
+      const sm = sel?.modify;
+      if (root && sel && sel.rangeCount > 0 && typeof sm === "function") {
+        e.preventDefault();
+        const alter = e.shiftKey ? "extend" : "move";
+        const direction = e.key === "Home" ? "left" : "right";
+        sm.call(sel, alter, direction, "lineboundary");
+        const modelSel = readDomSelection(root);
+        if (modelSel) ctxRef.current.setSelection(modelSel);
+      }
+      return;
+    }
     if (!mod) return;
     const key = e.key.toLowerCase();
     if (!e.shiftKey && !e.altKey && key === "z") {
@@ -2952,37 +3909,58 @@ function Editor({
       });
     }
   }, []);
-  const onCompositionStart = useCallback5(() => {
+  const onCompositionStart = useCallback7(() => {
     isComposingRef.current = true;
   }, []);
-  const onCompositionEnd = useCallback5((e) => {
+  const onCompositionEnd = useCallback7((e) => {
     isComposingRef.current = false;
     if (e.data && e.data.length > 0) {
       insertText(ctxRef.current, e.data);
     }
   }, []);
   const topLevels = useMemo4(() => groupTopLevels(snapshot.blocks), [snapshot]);
+  const topLevelsStructuralKey = useMemo4(
+    () => topLevels.map(
+      (t) => t.kind === "list" ? `L:${t.listKind}:${t.items.length}:${t.ordinalStart}` : `B:${t.block.type}:${t.block.attrs.level ?? ""}`
+    ).join("|"),
+    [topLevels]
+  );
   const docSettings = usePageSettings(editor.doc);
   const propIsSet = pageGeometry !== void 0;
   const geom = propIsSet ? pageGeometry ?? A4_PAGE : docSettings;
   const paginated = pageGeometry !== null;
   const selectedEmbed = editor.getSelectedEmbed();
-  const layout = usePageLayout(
+  const { layout, phase: paginationPhase } = usePageLayout(
     rootRef,
     geom,
     topLevels.length,
-    [topLevels, pageGeometry]
+    // Usar a chave estrutural (string) em vez do array `topLevels` direto:
+    // o array reference muda a cada keystroke, mas a chave só muda quando
+    // a SHAPE dos top-levels muda. `usePageLayout` compara deps via
+    // `shallowArrayEqual` — string equality cobre isso.
+    [topLevelsStructuralKey, pageGeometry]
   );
   const effectiveLayout = paginated ? layout : defaultPageLayout(topLevels.length);
-  const pageStyle = paginated ? {
-    "--ed-page-width": `${geom.width}px`,
-    "--ed-page-height": `${geom.height}px`,
-    "--ed-page-margin-top": `${geom.marginTop}px`,
-    "--ed-page-margin-bottom": `${geom.marginBottom}px`,
-    "--ed-page-margin-left": `${geom.marginLeft}px`,
-    "--ed-page-margin-right": `${geom.marginRight}px`
-  } : void 0;
-  const body = /* @__PURE__ */ jsxs8(
+  const pageStyle = useMemo4(
+    () => paginated ? {
+      "--ed-page-width": `${geom.width}px`,
+      "--ed-page-height": `${geom.height}px`,
+      "--ed-page-margin-top": `${geom.marginTop}px`,
+      "--ed-page-margin-bottom": `${geom.marginBottom}px`,
+      "--ed-page-margin-left": `${geom.marginLeft}px`,
+      "--ed-page-margin-right": `${geom.marginRight}px`
+    } : void 0,
+    [
+      paginated,
+      geom.width,
+      geom.height,
+      geom.marginTop,
+      geom.marginBottom,
+      geom.marginLeft,
+      geom.marginRight
+    ]
+  );
+  const body = /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: rootRef,
@@ -2994,6 +3972,7 @@ function Editor({
       role: "textbox",
       "aria-multiline": "true",
       className: (className ?? "ed-root") + (paginated ? " ed-root--paged" : " ed-root--flat"),
+      "data-pagination-phase": paginated ? paginationPhase : void 0,
       style: pageStyle,
       onKeyDown,
       onCompositionStart,
@@ -3004,22 +3983,26 @@ function Editor({
             pageNumber: pi + 1,
             pageCount: effectiveLayout.pages.length
           };
-          return /* @__PURE__ */ jsxs8(
+          const pageInlineStyle = pi === 0 && geom.firstPageExtraTop ? {
+            "--ed-page-margin-top": `${geom.marginTop + geom.firstPageExtraTop}px`
+          } : void 0;
+          return /* @__PURE__ */ jsxs11(
             "div",
             {
               className: "ed-page",
               "data-page-number": ctx.pageNumber,
               "data-page-total": ctx.pageCount,
+              style: pageInlineStyle,
               children: [
-                renderPageHeader && /* @__PURE__ */ jsx9("div", { className: "ed-page-header", contentEditable: false, children: renderPageHeader(ctx) }),
-                /* @__PURE__ */ jsx9("div", { className: "ed-page-content", children: page.slots.map((slot) => renderSlot(slot, topLevels)) }),
-                renderPageFooter && /* @__PURE__ */ jsx9("div", { className: "ed-page-footer", contentEditable: false, children: renderPageFooter(ctx) })
+                renderPageHeader && /* @__PURE__ */ jsx12("div", { className: "ed-page-header", contentEditable: false, children: renderPageHeader(ctx) }),
+                /* @__PURE__ */ jsx12("div", { className: "ed-page-content", children: page.slots.map((slot) => renderSlot(slot, topLevels)) }),
+                renderPageFooter && /* @__PURE__ */ jsx12("div", { className: "ed-page-footer", contentEditable: false, children: renderPageFooter(ctx) })
               ]
             },
             `page-${pi}`
           );
         }) : topLevels.map((t) => renderTopLevel(t)),
-        selectedEmbed && /* @__PURE__ */ jsx9(
+        selectedEmbed && /* @__PURE__ */ jsx12(
           ImageResizeOverlay,
           {
             rootRef,
@@ -3038,13 +4021,54 @@ function Editor({
               selectedEmbed.offset,
               { offsetX: ox, offsetY: oy },
               selectedEmbed.cellIndex
+            ),
+            onReanchor: (to, ox, oy) => editor.moveEmbedAnchor(
+              {
+                blockIndex: selectedEmbed.blockIndex,
+                offset: selectedEmbed.offset,
+                cellIndex: selectedEmbed.cellIndex
+              },
+              to,
+              ox,
+              oy
             )
           }
+        ),
+        hoveredBehind && !(selectedEmbed && selectedEmbed.blockIndex === hoveredBehind.blockIndex && selectedEmbed.offset === hoveredBehind.offset && (selectedEmbed.cellIndex ?? -1) === (hoveredBehind.cellIndex ?? -1)) && /* @__PURE__ */ jsx12(
+          BehindImageSelectAffordance,
+          {
+            rootRef,
+            blockIndex: hoveredBehind.blockIndex,
+            offset: hoveredBehind.offset,
+            cellIndex: hoveredBehind.cellIndex,
+            onSelect: () => setSelection({
+              anchor: {
+                blockIndex: hoveredBehind.blockIndex,
+                cellIndex: hoveredBehind.cellIndex,
+                offset: hoveredBehind.offset
+              },
+              focus: {
+                blockIndex: hoveredBehind.blockIndex,
+                cellIndex: hoveredBehind.cellIndex,
+                offset: hoveredBehind.offset + 1
+              }
+            })
+          }
+        ),
+        hoveredLink && hoveredLink.href && /* @__PURE__ */ jsx12(LinkHoverTooltip, { href: hoveredLink.href, rect: hoveredLink.rect }),
+        awareness && /* @__PURE__ */ jsx12(
+          RemoteCursorsOverlay,
+          {
+            rootRef,
+            doc,
+            awareness,
+            revision: snapshot
+          }
         )
       ]
     }
   );
-  return /* @__PURE__ */ jsx9(EditorProvider, { editor, children: body });
+  return /* @__PURE__ */ jsx12(EditorProvider, { editor, children: body });
 }
 function groupTopLevels(snapshot) {
   const out = [];
@@ -3055,11 +4079,29 @@ function groupTopLevels(snapshot) {
       const groupStart = i;
       const items = [];
       const kind = block.attrs.listKind === "ordered" ? "ordered" : "bullet";
-      while (i < snapshot.length && snapshot[i].type === "listItem" && (snapshot[i].attrs.listKind ?? "bullet") === kind) {
-        items.push({ block: snapshot[i], index: i });
+      const groupStyle = block.attrs.listStyle;
+      while (i < snapshot.length) {
+        const b = snapshot[i];
+        if (b.type !== "listItem") break;
+        if ((b.attrs.listKind ?? "bullet") !== kind) break;
+        if (i > groupStart) {
+          if (typeof b.attrs.listStart === "number") break;
+          const itemStyle = b.attrs.listStyle;
+          if (itemStyle !== void 0 && itemStyle !== groupStyle) break;
+        }
+        items.push({ block: b, index: i });
         i++;
       }
-      out.push({ kind: "list", items, listKind: kind, key: groupStart });
+      const firstAttrs = items[0].block.attrs;
+      const ordinalStart = typeof firstAttrs.listStart === "number" && firstAttrs.listStart > 0 ? firstAttrs.listStart : 1;
+      out.push({
+        kind: "list",
+        items,
+        listKind: kind,
+        ordinalStart,
+        listStyle: groupStyle,
+        key: groupStart
+      });
       continue;
     }
     out.push({ kind: "block", block, blockIndex: i, key: i });
@@ -3076,7 +4118,7 @@ function renderSlot(slot, topLevels) {
       start: slot.fragment.start,
       end: slot.fragment.end
     };
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx12(
       NodeView,
       {
         block: top.block,
@@ -3087,7 +4129,7 @@ function renderSlot(slot, topLevels) {
     );
   }
   if (slot.tableFragment && top.kind === "block" && top.block.type === "table") {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx12(
       NodeView,
       {
         block: top.block,
@@ -3097,14 +4139,42 @@ function renderSlot(slot, topLevels) {
       `${top.key}-tf${slot.tableFragment.index}`
     );
   }
+  if (slot.listFragment && top.kind === "list") {
+    return renderListFragment(top, slot.listFragment);
+  }
   return renderTopLevel(top);
 }
 function renderTopLevel(top) {
   if (top.kind === "list") {
     const tree = buildListTree(top.items);
-    return renderListTree(tree, top.listKind, `list-${top.key}`);
+    return renderListTree(tree, top, top.ordinalStart, `list-${top.key}`);
   }
-  return /* @__PURE__ */ jsx9(NodeView, { block: top.block, index: top.blockIndex }, top.key);
+  return /* @__PURE__ */ jsx12(NodeView, { block: top.block, index: top.blockIndex }, top.key);
+}
+function renderListFragment(top, frag) {
+  const ranges = topLevelItemRanges(top.items);
+  const startRange = ranges[frag.itemStart];
+  const endRange = ranges[frag.itemEnd - 1];
+  if (!startRange || !endRange) return renderTopLevel(top);
+  const sliced = top.items.slice(startRange[0], endRange[1]);
+  const ordinalStart = top.ordinalStart + frag.itemStart;
+  const key = `list-${top.key}-f${frag.index}`;
+  const slicedTop = { ...top, items: sliced };
+  const tree = buildListTree(sliced);
+  return renderListTree(tree, slicedTop, ordinalStart, key);
+}
+function topLevelItemRanges(items) {
+  const out = [];
+  let currentStart = -1;
+  items.forEach((it, idx) => {
+    const level = clampListLevel2(it.block.attrs.listLevel);
+    if (level === 0) {
+      if (currentStart >= 0) out.push([currentStart, idx]);
+      currentStart = idx;
+    }
+  });
+  if (currentStart >= 0) out.push([currentStart, items.length]);
+  return out;
 }
 function buildListTree(items) {
   const roots = [];
@@ -3118,9 +4188,28 @@ function buildListTree(items) {
   }
   return roots;
 }
-function renderListTree(tree, kind, key) {
+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__ */ jsx12(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, top.listKind, `nested-${node.entry.index}`) : null }, node.entry.index));
+  if (top.listKind === "ordered") {
+    return /* @__PURE__ */ jsx12(
+      "ol",
+      {
+        className,
+        "data-list-kind": "ordered",
+        start: start > 1 ? start : void 0,
+        style,
+        children: items
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ jsx12("ul", { className, "data-list-kind": "bullet", style, children: items }, key);
+}
+function renderNestedListTree(tree, kind, key) {
   const Tag = kind === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx9(Tag, { className: `ed-list ed-list-${kind}`, "data-list-kind": kind, children: tree.map((node) => /* @__PURE__ */ jsx9(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderListTree(node.children, kind, `nested-${node.entry.index}`) : null }, node.entry.index)) }, key);
+  return /* @__PURE__ */ jsx12(Tag, { className: `ed-list ed-list-${kind}`, "data-list-kind": kind, children: tree.map((node) => /* @__PURE__ */ jsx12(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, kind, `nested-${node.entry.index}`) : null }, node.entry.index)) }, key);
 }
 function clampListLevel2(l) {
   if (typeof l !== "number" || !Number.isFinite(l)) return 0;
@@ -3149,12 +4238,12 @@ function caretRangeFromPoint(x, y) {
 
 // src/Toolbar.tsx
 import {
-  useCallback as useCallback6,
-  useEffect as useEffect8,
-  useRef as useRef11,
-  useState as useState8
+  useCallback as useCallback8,
+  useEffect as useEffect10,
+  useRef as useRef12,
+  useState as useState11
 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var FONT_FAMILIES = ["Arial"];
 var FONT_SIZES = ["8pt", "10pt", "11pt", "12pt", "14pt", "16pt", "18pt", "24pt", "32pt", "48pt"];
 var BLOCK_OPTIONS = [
@@ -3194,6 +4283,8 @@ function Toolbar({ className }) {
     getBlockAttr,
     setBlockType,
     setBlockAttr,
+    setAlign,
+    getAlign,
     isListActive,
     toggleList,
     indentList,
@@ -3202,7 +4293,7 @@ function Toolbar({ className }) {
   const active = getActiveMarks();
   const blockType = getBlockType();
   const blockLevel = getBlockAttr("level");
-  const blockAlign = getBlockAttr("align");
+  const blockAlign = getAlign();
   const blockDir = getBlockAttr("dir");
   const stop = (e) => {
     const t = e.target;
@@ -3245,16 +4336,16 @@ function Toolbar({ className }) {
       );
       return;
     }
-    setBlockAttr("align", value);
+    setAlign(value);
   };
-  const onInsertImageClick = useCallback6(
+  const onInsertImageClick = useCallback8(
     (e) => {
       e.preventDefault();
       imageInputRef.current?.click();
     },
     []
   );
-  const onImageInputChange = useCallback6(
+  const onImageInputChange = useCallback8(
     (e) => {
       const file = e.target.files?.[0];
       if (file) void editor.insertImageFromFile(file);
@@ -3262,14 +4353,14 @@ function Toolbar({ className }) {
     },
     [editor]
   );
-  const imageInputRef = useRef11(null);
+  const imageInputRef = useRef12(null);
   const onToggleDir = (e) => {
     e.preventDefault();
     const next = blockDir === "rtl" ? "ltr" : "rtl";
     setBlockAttr("dir", next);
   };
   const linkActive = isMarkActive("link");
-  const onLinkClick = useCallback6(
+  const onLinkClick = useCallback8(
     (e) => {
       e.preventDefault();
       const currentHref = active.link && typeof active.link === "object" && "href" in active.link ? active.link.href : "";
@@ -3299,7 +4390,7 @@ function Toolbar({ className }) {
       sel.cellIndex
     );
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: className ?? "ed-toolbar",
@@ -3307,7 +4398,7 @@ function Toolbar({ className }) {
       "aria-label": "Editor toolbar",
       onMouseDown: stop,
       children: [
-        /* @__PURE__ */ jsx10(Group, { children: /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsx13(Group, { children: /* @__PURE__ */ jsxs12(
           "select",
           {
             className: "ed-toolbar-select",
@@ -3316,23 +4407,23 @@ function Toolbar({ className }) {
             onMouseDown: stop,
             "aria-label": "Tipo de bloco",
             children: [
-              blockValue === "" && /* @__PURE__ */ jsx10("option", { value: "", children: "\u2014 (misto)" }),
-              BLOCK_OPTIONS.map((o) => /* @__PURE__ */ jsx10("option", { value: o.value, children: o.label }, o.value))
+              blockValue === "" && /* @__PURE__ */ jsx13("option", { value: "", children: "\u2014 (misto)" }),
+              BLOCK_OPTIONS.map((o) => /* @__PURE__ */ jsx13("option", { value: o.value, children: o.label }, o.value))
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs9(Group, { children: [
-          /* @__PURE__ */ jsx10(MarkButton, { title: "Negrito (\u2318B)", pressed: isMarkActive("bold"), onClick: onToggle("bold"), children: /* @__PURE__ */ jsx10("strong", { children: "B" }) }),
-          /* @__PURE__ */ jsx10(MarkButton, { title: "It\xE1lico (\u2318I)", pressed: isMarkActive("italic"), onClick: onToggle("italic"), children: /* @__PURE__ */ jsx10("em", { children: "I" }) }),
-          /* @__PURE__ */ jsx10(MarkButton, { title: "Sublinhado (\u2318U)", pressed: isMarkActive("underline"), onClick: onToggle("underline"), children: /* @__PURE__ */ jsx10("u", { children: "U" }) }),
-          /* @__PURE__ */ jsx10(MarkButton, { title: "Tachado (\u2318\u21E7X)", pressed: isMarkActive("strike"), onClick: onToggle("strike"), children: /* @__PURE__ */ jsx10("s", { children: "S" }) })
+        /* @__PURE__ */ jsxs12(Group, { children: [
+          /* @__PURE__ */ jsx13(MarkButton, { title: "Negrito (\u2318B)", pressed: isMarkActive("bold"), onClick: onToggle("bold"), children: /* @__PURE__ */ jsx13("strong", { children: "B" }) }),
+          /* @__PURE__ */ jsx13(MarkButton, { title: "It\xE1lico (\u2318I)", pressed: isMarkActive("italic"), onClick: onToggle("italic"), children: /* @__PURE__ */ jsx13("em", { children: "I" }) }),
+          /* @__PURE__ */ jsx13(MarkButton, { title: "Sublinhado (\u2318U)", pressed: isMarkActive("underline"), onClick: onToggle("underline"), children: /* @__PURE__ */ jsx13("u", { children: "U" }) }),
+          /* @__PURE__ */ jsx13(MarkButton, { title: "Tachado (\u2318\u21E7X)", pressed: isMarkActive("strike"), onClick: onToggle("strike"), children: /* @__PURE__ */ jsx13("s", { children: "S" }) })
         ] }),
-        /* @__PURE__ */ jsxs9(Group, { children: [
-          /* @__PURE__ */ jsxs9("label", { className: "ed-toolbar-label", children: [
-            /* @__PURE__ */ jsx10("span", { className: "ed-toolbar-swatch", "aria-hidden": true, style: { background: colorValue } }),
-            /* @__PURE__ */ jsx10("input", { type: "color", value: colorValue, onChange: onColorChange, onMouseDown: stop, "aria-label": "Cor do texto" })
+        /* @__PURE__ */ jsxs12(Group, { children: [
+          /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label", children: [
+            /* @__PURE__ */ jsx13("span", { className: "ed-toolbar-swatch", "aria-hidden": true, style: { background: colorValue } }),
+            /* @__PURE__ */ jsx13("input", { type: "color", value: colorValue, onChange: onColorChange, onMouseDown: stop, "aria-label": "Cor do texto" })
           ] }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -3347,8 +4438,8 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs9(Group, { children: [
-          /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs12(Group, { children: [
+          /* @__PURE__ */ jsxs12(
             "select",
             {
               className: "ed-toolbar-select",
@@ -3357,12 +4448,12 @@ function Toolbar({ className }) {
               onMouseDown: stop,
               "aria-label": "Fam\xEDlia da fonte",
               children: [
-                /* @__PURE__ */ jsx10("option", { value: "", children: "Fonte\u2026" }),
-                FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx10("option", { value: f, children: f }, f))
+                /* @__PURE__ */ jsx13("option", { value: "", children: "Fonte\u2026" }),
+                FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx13("option", { value: f, children: f }, f))
               ]
             }
           ),
-          /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs12(
             "select",
             {
               className: "ed-toolbar-select",
@@ -3371,13 +4462,13 @@ function Toolbar({ className }) {
               onMouseDown: stop,
               "aria-label": "Tamanho da fonte",
               children: [
-                /* @__PURE__ */ jsx10("option", { value: "", children: "Tamanho\u2026" }),
-                FONT_SIZES.map((s) => /* @__PURE__ */ jsx10("option", { value: s, children: s }, s))
+                /* @__PURE__ */ jsx13("option", { value: "", children: "Tamanho\u2026" }),
+                FONT_SIZES.map((s) => /* @__PURE__ */ jsx13("option", { value: s, children: s }, s))
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx10(Group, { children: ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx13(Group, { children: ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -3390,7 +4481,7 @@ function Toolbar({ className }) {
           },
           a.value
         )) }),
-        /* @__PURE__ */ jsx10(Group, { children: /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx13(Group, { children: /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -3402,8 +4493,8 @@ function Toolbar({ className }) {
             children: blockDir === "rtl" ? "RTL" : "LTR"
           }
         ) }),
-        /* @__PURE__ */ jsxs9(Group, { children: [
-          /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsxs12(Group, { children: [
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -3418,7 +4509,7 @@ function Toolbar({ className }) {
               children: "\u2022"
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -3433,7 +4524,7 @@ function Toolbar({ className }) {
               children: "1."
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -3447,7 +4538,7 @@ function Toolbar({ className }) {
               children: "\u21E4"
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -3462,7 +4553,7 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx10(Group, { children: /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx13(Group, { children: /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -3474,9 +4565,9 @@ function Toolbar({ className }) {
             children: "\u{1F517}"
           }
         ) }),
-        /* @__PURE__ */ jsx10(Group, { children: /* @__PURE__ */ jsx10(TableMenu, {}) }),
-        /* @__PURE__ */ jsxs9(Group, { children: [
-          /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx13(Group, { children: /* @__PURE__ */ jsx13(TableMenu, {}) }),
+        /* @__PURE__ */ jsxs12(Group, { children: [
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -3487,7 +4578,7 @@ function Toolbar({ className }) {
               children: "\u{1F5BC}"
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx13(
             "input",
             {
               ref: imageInputRef,
@@ -3498,8 +4589,8 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        selectedEmbed && /* @__PURE__ */ jsxs9(Group, { children: [
-          IMAGE_LAYOUT_OPTIONS.map((opt) => /* @__PURE__ */ jsx10(
+        selectedEmbed && /* @__PURE__ */ jsxs12(Group, { children: [
+          IMAGE_LAYOUT_OPTIONS.map((opt) => /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -3512,7 +4603,7 @@ function Toolbar({ className }) {
             },
             opt.value
           )),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -3542,7 +4633,7 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx10(Group, { children: /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx13(Group, { children: /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -3563,9 +4654,9 @@ function Toolbar({ className }) {
 function TableMenu() {
   const editor = useEditorContext();
   const inTable = editor.isInTable();
-  const [open, setOpen] = useState8(false);
-  const rootRef = useRef11(null);
-  useEffect8(() => {
+  const [open, setOpen] = useState11(false);
+  const rootRef = useRef12(null);
+  useEffect10(() => {
     if (!open) return;
     const onDown = (e) => {
       if (!rootRef.current) return;
@@ -3575,8 +4666,8 @@ function TableMenu() {
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  return /* @__PURE__ */ jsxs9("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs12("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
+    /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
@@ -3591,7 +4682,7 @@ function TableMenu() {
         children: "\u25A6"
       }
     ),
-    open && /* @__PURE__ */ jsxs9(
+    open && /* @__PURE__ */ jsxs12(
       "div",
       {
         className: "ed-table-popover",
@@ -3603,7 +4694,7 @@ function TableMenu() {
           }
         },
         children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx13(
             TableSizePicker,
             {
               onPick: (rows, cols) => {
@@ -3612,34 +4703,34 @@ function TableMenu() {
               }
             }
           ),
-          inTable && /* @__PURE__ */ jsxs9("div", { className: "ed-table-actions", children: [
-            /* @__PURE__ */ jsx10("hr", {}),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => {
+          inTable && /* @__PURE__ */ jsxs12("div", { className: "ed-table-actions", children: [
+            /* @__PURE__ */ jsx13("hr", {}),
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertRowAbove();
             }, children: "Inserir linha acima" }),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertRowBelow();
             }, children: "Inserir linha abaixo" }),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertColumnLeft();
             }, children: "Inserir coluna \xE0 esquerda" }),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertColumnRight();
             }, children: "Inserir coluna \xE0 direita" }),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.deleteCurrentRow();
             }, children: "Excluir linha" }),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.deleteCurrentColumn();
             }, children: "Excluir coluna" }),
-            /* @__PURE__ */ jsx10("hr", {}),
-            editor.hasTableRectSelection() && /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx13("hr", {}),
+            editor.hasTableRectSelection() && /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -3650,19 +4741,19 @@ function TableMenu() {
                 children: "Mesclar c\xE9lulas selecionadas"
               }
             ),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.mergeRight();
             }, children: "Mesclar com c\xE9lula \xE0 direita" }),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.mergeDown();
             }, children: "Mesclar com c\xE9lula abaixo" }),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.splitCell();
             }, children: "Dividir c\xE9lulas mescladas" }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -3683,11 +4774,11 @@ function TableMenu() {
 var PICKER_MAX_ROWS = 8;
 var PICKER_MAX_COLS = 10;
 function TableSizePicker({ onPick }) {
-  const [hover, setHover] = useState8(null);
+  const [hover, setHover] = useState11(null);
   const label = hover ? `${hover.r + 1} \xD7 ${hover.c + 1}` : "Inserir tabela";
-  return /* @__PURE__ */ jsxs9("div", { className: "ed-table-picker", children: [
-    /* @__PURE__ */ jsx10("div", { className: "ed-table-picker-label", children: label }),
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs12("div", { className: "ed-table-picker", children: [
+    /* @__PURE__ */ jsx13("div", { className: "ed-table-picker-label", children: label }),
+    /* @__PURE__ */ jsx13(
       "div",
       {
         className: "ed-table-picker-grid",
@@ -3700,7 +4791,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__ */ jsx10(
+            return /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -3730,10 +4821,10 @@ function blockSelectValue(type, level) {
   return type;
 }
 function Group({ children }) {
-  return /* @__PURE__ */ jsx10("div", { className: "ed-toolbar-group", children });
+  return /* @__PURE__ */ jsx13("div", { className: "ed-toolbar-group", children });
 }
 function MarkButton({ title, pressed, onClick, children }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx13(
     "button",
     {
       type: "button",
@@ -3754,6 +4845,7 @@ export {
   LinkDialog,
   NodeView,
   PageConfigDialog,
+  RemoteCursorsOverlay,
   Toolbar,
   applyDomSelection,
   contentHeight,
@@ -3765,6 +4857,7 @@ export {
   getCellElement,
   getFragmentForOffset,
   isTableRectSelection,
+  locatePoint,
   readDomSelection,
   renderInline,
   selectionsEqual,